@chekinapp/ui 0.0.92 → 0.0.94

package/dist/index.js

@@ -1707,6 +1707,25 @@ function toCssSize(size) {
     return size;
   }
 }
+function getCanvasBlob(canvas) {
+  return new Promise((resolve) => {
+    canvas.toBlob((blob) => {
+      resolve(blob);
+    });
+  });
+}
+function toBase64(file) {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = () => resolve(String(reader.result));
+    reader.onerror = () => reject(new Error("Failed to read file as base64"));
+  });
+}
+function getFileSizeMB(file) {
+  if (!file) return;
+  return file.size / Math.pow(1024, 2);
+}
 
 // src/tooltip/Tooltip.tsx
 import { jsx as jsx25, jsxs as jsxs17 } from "react/jsx-runtime";
@@ -2643,7 +2662,7 @@ function useCombinedRef(...refs) {
 import { useEffect as useEffect6, useState as useState6 } from "react";
 var MOBILE_BREAKPOINT = 768;
 function useIsMobile({ breakpoint = MOBILE_BREAKPOINT } = {}) {
-  const [isMobile2, setIsMobile] = useState6(void 0);
+  const [isMobile3, setIsMobile] = useState6(void 0);
   useEffect6(() => {
     const mediaQuery = window.matchMedia(`(max-width: ${breakpoint - 1}px)`);
     const onChange = () => {
@@ -2655,7 +2674,7 @@ function useIsMobile({ breakpoint = MOBILE_BREAKPOINT } = {}) {
       mediaQuery.removeEventListener("change", onChange);
     };
   }, [breakpoint]);
-  return !!isMobile2;
+  return !!isMobile3;
 }
 
 // src/hooks/use-is-mounted.ts
@@ -5600,7 +5619,23 @@ var translation_default2 = {
   past_dates: "Date cannot be before {{minDate}}",
   future_dates: "Date cannot be after {{maxDate}}",
   signature_placeholder_text: "Sign inside this box.<br/> Use your finger.<br/> Tap to start.",
+  open_devices_camera: "Open device's camera",
+  place_document_inside_frame: "Place your document inside the frame",
+  close_other_application_that_may_be_using_your_camera: "Close other applications that may be using your camera",
+  if_you_use_external_camera_disconnect_and_reconnect: "If you use an external camera, disconnect and reconnect it",
+  close_the_browser_re_open_it: "Close the browser and reopen it",
   camera_permissions_denied: "The camera doesn't open? Make sure to allow the browser permission to use the camera.",
+  camera_errors: {
+    experiencing_camera_issues: "Experiencing camera issues?",
+    chekin_cant_use_your_camera: "Chekin can't use your camera",
+    please_try_a_different_browser: "Your camera doesn't work in this browser. Please, try to open the link in a different browser.",
+    permissions_denied: "Permission denied",
+    camera_permissions_denied: "The camera doesn't open? Make sure to allow the browser permission to use the camera.",
+    no_camera_device_found: "No camera device found. Please connect a camera.",
+    constraints_camera_error: "Constraints cannot be satisfied by available devices.",
+    safari_camera_error: "Safari could not satisfy the camera requirements",
+    try_chrome_or_firefox: "Please try Chrome or Firefox"
+  },
   clear: "Clear",
   show_less: "Show less",
   show_more: "Show more"
@@ -8210,7 +8245,7 @@ var SidebarProvider = React28.forwardRef(
     stateName = SIDEBAR_COOKIE_NAME_DEFAULT,
     ...props
   }, ref) => {
-    const isMobile2 = useIsMobile({ breakpoint: 641 });
+    const isMobile3 = useIsMobile({ breakpoint: 641 });
     const [openMobile, setOpenMobile] = React28.useState(false);
     const [_open, _setOpen] = React28.useState(defaultOpen);
     const open = openProp ?? _open;
@@ -8227,8 +8262,8 @@ var SidebarProvider = React28.forwardRef(
       [setOpenProp, open, stateName]
     );
     const toggleSidebar = React28.useCallback(() => {
-      return isMobile2 ? setOpenMobile((value) => !value) : setOpen((value) => !value);
-    }, [isMobile2, setOpen]);
+      return isMobile3 ? setOpenMobile((value) => !value) : setOpen((value) => !value);
+    }, [isMobile3, setOpen]);
     React28.useEffect(() => {
       const handleKeyDown = (event) => {
         if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
@@ -8245,12 +8280,12 @@ var SidebarProvider = React28.forwardRef(
         state,
         open,
         setOpen,
-        isMobile: isMobile2,
+        isMobile: isMobile3,
         openMobile,
         setOpenMobile,
         toggleSidebar
       }),
-      [state, open, setOpen, isMobile2, openMobile, setOpenMobile, toggleSidebar]
+      [state, open, setOpen, isMobile3, openMobile, setOpenMobile, toggleSidebar]
     );
     return /* @__PURE__ */ jsx105(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsx105(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ jsx105(
       "div",
@@ -8277,7 +8312,7 @@ var Sidebar = React28.forwardRef(
     children,
     ...props
   }, ref) => {
-    const { isMobile: isMobile2, state, openMobile, setOpenMobile } = useSidebar();
+    const { isMobile: isMobile3, state, openMobile, setOpenMobile } = useSidebar();
     if (collapsible === "none") {
       return /* @__PURE__ */ jsx105(
         "div",
@@ -8292,7 +8327,7 @@ var Sidebar = React28.forwardRef(
         }
       );
     }
-    if (isMobile2) {
+    if (isMobile3) {
       return /* @__PURE__ */ jsx105(Sheet, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: /* @__PURE__ */ jsxs64(
         SheetContent,
         {
@@ -8363,7 +8398,7 @@ var Sidebar = React28.forwardRef(
 );
 Sidebar.displayName = "Sidebar";
 var SidebarTrigger = React28.forwardRef(({ className, onClick, icon, ...props }, ref) => {
-  const { toggleSidebar, open, isMobile: isMobile2, openMobile } = useSidebar();
+  const { toggleSidebar, open, isMobile: isMobile3, openMobile } = useSidebar();
   return /* @__PURE__ */ jsxs64(
     Button,
     {
@@ -8382,7 +8417,7 @@ var SidebarTrigger = React28.forwardRef(({ className, onClick, icon, ...props },
       },
       ...props,
       children: [
-        icon || (isMobile2 ? openMobile : open) ? icon || /* @__PURE__ */ jsx105(ArrowLeftFromLineIcon, {}) : /* @__PURE__ */ jsx105(ArrowRightFromLineIcon, {}),
+        icon || (isMobile3 ? openMobile : open) ? icon || /* @__PURE__ */ jsx105(ArrowLeftFromLineIcon, {}) : /* @__PURE__ */ jsx105(ArrowRightFromLineIcon, {}),
         /* @__PURE__ */ jsx105("span", { className: "sr-only", children: "Toggle Sidebar" })
       ]
     }
@@ -8602,7 +8637,7 @@ var SidebarMenuButton = React28.forwardRef(
     ...props
   }, ref) => {
     const Comp = asChild ? Slot4 : "button";
-    const { isMobile: isMobile2, state } = useSidebar();
+    const { isMobile: isMobile3, state } = useSidebar();
     const button = /* @__PURE__ */ jsx105(
       Comp,
       {
@@ -8626,7 +8661,7 @@ var SidebarMenuButton = React28.forwardRef(
         {
           side: "right",
           align: "center",
-          hidden: state !== "collapsed" || isMobile2,
+          hidden: state !== "collapsed" || isMobile3,
           className: "capitalize",
           variant: "dark",
           ...tooltipProps
@@ -8655,8 +8690,8 @@ var SidebarMenuAction = React28.forwardRef(({ className, asChild = false, showOn
 SidebarMenuAction.displayName = "SidebarMenuAction";
 var SidebarMenuBadge = React28.forwardRef(
   ({ className, ...props }, ref) => {
-    const { open, isMobile: isMobile2, openMobile } = useSidebar();
-    const isOpen = isMobile2 ? openMobile : open;
+    const { open, isMobile: isMobile3, openMobile } = useSidebar();
+    const isOpen = isMobile3 ? openMobile : open;
     return /* @__PURE__ */ jsx105(
       "div",
       {
@@ -10733,147 +10768,623 @@ function VideoPlayer({
 }
 
 // src/webcam/Webcam.tsx
-import { forwardRef as forwardRef54, useCallback as useCallback26, useEffect as useEffect34, useMemo as useMemo7, useState as useState35 } from "react";
-import { useTranslation as useTranslation23 } from "react-i18next";
-import { isMobile, isTablet } from "react-device-detect";
+import {
+  forwardRef as forwardRef54,
+  memo as memo7,
+  useCallback as useCallback27,
+  useImperativeHandle,
+  useMemo as useMemo7,
+  useRef as useRef25,
+  useState as useState35
+} from "react";
+import { isFirefox, isMobile as isMobile2 } from "react-device-detect";
 import ReactWebcam from "react-webcam";
 
-// src/webcam/utils.ts
-function isDOMException(error) {
-  return error instanceof DOMException && Boolean(error?.name);
+// src/lib/compression.ts
+var IDENTITY_VERIFICATION_PHOTOS_MAX_SIZE_MB = 6;
+var IDENTITY_VERIFICATION_PHOTOS_QUALITY = 0.8;
+async function compressFile(file, { convertSize }) {
+  const { default: Compressor } = await import("compressorjs");
+  return new Promise((resolve, reject) => {
+    new Compressor(file, {
+      convertSize: convertSize ? convertSize * 1e6 : void 0,
+      quality: 1,
+      success: (result) => resolve(result),
+      error: reject
+    });
+  });
+}
+async function compressImage(image) {
+  const { default: Compressor } = await import("compressorjs");
+  const parsedImage = new File([image], image.name, { type: image.type });
+  return new Promise((resolve, reject) => {
+    new Compressor(parsedImage, {
+      convertSize: IDENTITY_VERIFICATION_PHOTOS_MAX_SIZE_MB * 1e6,
+      quality: IDENTITY_VERIFICATION_PHOTOS_QUALITY,
+      success: (compressedResult) => {
+        toBase64(compressedResult).then((result) => {
+          console.log(
+            "Before: ",
+            getFileSizeMB(image)?.toFixed(2),
+            "MB",
+            "After: ",
+            getFileSizeMB(compressedResult)?.toFixed(2),
+            "MB"
+          );
+          resolve(result);
+        }, reject);
+      },
+      error: (error) => {
+        if (error.message.includes("Failed to load the image")) {
+          reject(
+            new Error(
+              "Unable to process the selected image. Please try a different image."
+            )
+          );
+          return;
+        }
+        reject(error);
+      }
+    });
+  });
 }
 
-// src/webcam/Webcam.tsx
-import { Fragment as Fragment13, jsx as jsx136, jsxs as jsxs84 } from "react/jsx-runtime";
-var SCREENSHOT_FORMAT = "image/jpeg";
-var MEDIA_CONSTRAINTS = {
-  audio: false,
-  video: {
-    width: { ideal: 4096 },
-    height: { ideal: 2160 }
-  }
-};
+// src/webcam/useErrorHandler.ts
+import { useCallback as useCallback26 } from "react";
+import { useTranslation as useTranslation23 } from "react-i18next";
+import { isSafari as isSafari2 } from "react-device-detect";
+
+// src/webcam/utils.ts
+import { isMobile, isSafari, isTablet } from "react-device-detect";
 var isMobileOrTablet = () => isMobile || isTablet;
-function getMobileOrDesktopVideoConstraints() {
+var getLivenessOptimizedConstraints = (deviceId, additional) => {
+  const additionalConstraints = typeof additional === "object" && additional !== null ? additional : {};
+  const baseConstraints = {
+    deviceId: deviceId ? { exact: deviceId } : void 0,
+    facingMode: { ideal: "user" },
+    width: { min: 320, ideal: 800 },
+    height: { min: 240, ideal: 600 },
+    frameRate: { ideal: 24 },
+    resizeMode: "crop-and-scale",
+    aspectRatio: { ideal: 1.333 },
+    ...additionalConstraints
+  };
   if (isMobileOrTablet()) {
     return {
-      width: { min: 576, ideal: 1080, max: 2160 },
-      height: { min: 1024, ideal: 1920, max: 4096 },
-      facingMode: {
-        exact: "environment"
-      }
+      ...baseConstraints,
+      width: { min: 320, ideal: 640 },
+      height: { min: 240, ideal: 480 },
+      aspectRatio: { ideal: 1 },
+      facingMode: { ideal: "environment" },
+      ...additionalConstraints
     };
   }
+  return baseConstraints;
+};
+function getReducedVideoConstraints({
+  deviceId,
+  facingMode,
+  additional
+}) {
+  const additionalConstraints = typeof additional === "object" ? additional : {};
   return {
-    facingMode: "user"
+    deviceId: deviceId ? { exact: deviceId } : void 0,
+    facingMode: { ideal: facingMode || "user" },
+    width: { min: 320, ideal: 640 },
+    height: { min: 240, ideal: 480 },
+    ...additionalConstraints
   };
 }
-var Webcam = forwardRef54(
-  ({
-    onUserMedia,
-    onUserMediaError,
-    onException,
-    audio = false,
-    imageSmoothing = false,
-    screenshotQuality = 1,
-    videoConstraints,
-    className,
-    mirrored
-  }, ref) => {
-    const { t } = useTranslation23();
-    const isMounted = useIsMounted();
-    const [minScreenshotHeight, setMinScreenshotHeight] = useState35(
-      void 0
-    );
-    const [minScreenshotWidth, setMinScreenshotWidth] = useState35(
-      void 0
+function getMobileOrDesktopVideoConstraints({
+  deviceId,
+  facingMode,
+  additional,
+  optimizedForLiveness = false
+}) {
+  const additionalConstraints = typeof additional === "object" ? additional : {};
+  if (optimizedForLiveness) {
+    return getLivenessOptimizedConstraints(deviceId, additionalConstraints);
+  }
+  const initialConstraints = {
+    deviceId: deviceId ? { exact: deviceId } : void 0,
+    facingMode: { ideal: facingMode || "user" },
+    width: isSafari ? { min: 320, ideal: 1920 } : { min: 320, ideal: 4096, max: 4096 },
+    height: isSafari ? { min: 240, ideal: 1080 } : { min: 240, ideal: 2160, max: 2160 },
+    frameRate: { ideal: 30 },
+    resizeMode: "none",
+    aspectRatio: { ideal: 1.777 },
+    ...additionalConstraints
+  };
+  if (isMobileOrTablet()) {
+    return {
+      ...initialConstraints,
+      aspectRatio: { ideal: 1 },
+      facingMode: { ideal: "environment" },
+      ...additionalConstraints
+    };
+  }
+  if (isSafari && !isMobile) {
+    return {
+      deviceId: deviceId ? { ideal: deviceId } : void 0,
+      width: { min: 320, ideal: 1920 },
+      height: { min: 240, ideal: 1080 },
+      ...additionalConstraints
+    };
+  }
+  return initialConstraints;
+}
+function isDOMException(error) {
+  return error instanceof DOMException && Boolean(error?.name);
+}
+function getPhotoCanvas({
+  player,
+  container,
+  scanArea,
+  canvas,
+  cropToScanArea
+}) {
+  if (!canvas) return;
+  const playerWidth = player?.videoWidth ?? 1280;
+  const playerHeight = player?.videoHeight ?? 720;
+  const playerAR = playerWidth / playerHeight;
+  const canvasWidth = container?.offsetWidth ?? 1280;
+  const canvasHeight = container?.offsetHeight ?? 1280;
+  const canvasAR = canvasWidth / canvasHeight;
+  let sourceX;
+  let sourceY;
+  let sourceWidth;
+  let sourceHeight;
+  if (playerAR > canvasAR) {
+    sourceHeight = playerHeight;
+    sourceWidth = playerHeight * canvasAR;
+    sourceX = (playerWidth - sourceWidth) / 2;
+    sourceY = 0;
+  } else {
+    sourceWidth = playerWidth;
+    sourceHeight = playerWidth / canvasAR;
+    sourceX = 0;
+    sourceY = (playerHeight - sourceHeight) / 2;
+  }
+  if (cropToScanArea && scanArea && player) {
+    const scanAreaRect = scanArea.getBoundingClientRect();
+    const scaleY = playerHeight / player.clientHeight;
+    const offsetX = (playerWidth - player.clientWidth * scaleY) / 2;
+    const offsetY = (playerHeight - player.clientHeight * scaleY) / 2;
+    const cropX = offsetX + (player.clientWidth - scanAreaRect.width) / 2 * scaleY;
+    const cropY = offsetY + (player.clientHeight - scanAreaRect.height) / 2 * scaleY;
+    const cropWidth = scanAreaRect.width * scaleY;
+    const cropHeight = scanAreaRect.height * scaleY;
+    canvas.width = cropWidth;
+    canvas.height = cropHeight;
+    const context2 = canvas.getContext("2d");
+    if (context2) {
+      context2.drawImage(
+        player,
+        cropX,
+        cropY,
+        cropWidth,
+        cropHeight,
+        0,
+        0,
+        cropWidth,
+        cropHeight
+      );
+    }
+    return canvas;
+  }
+  canvas.width = sourceWidth;
+  canvas.height = sourceHeight;
+  const context = canvas.getContext("2d");
+  if (context && player) {
+    context.drawImage(
+      player,
+      sourceX,
+      sourceY,
+      sourceWidth,
+      sourceHeight,
+      0,
+      0,
+      sourceWidth,
+      sourceHeight
     );
-    const [isCameraPermissionsDenied, setIsCameraPermissionsDenied] = useState35(false);
-    const constraints = videoConstraints || getMobileOrDesktopVideoConstraints();
-    const isDisplayingMirrored = useMemo7(() => {
-      if (mirrored !== void 0) {
-        return mirrored;
-      }
-      if (isCameraPermissionsDenied) {
-        return false;
-      }
-      const facingMode = typeof constraints === "object" && constraints !== null ? constraints.facingMode : void 0;
-      if (typeof facingMode === "string") {
-        return facingMode === "user";
-      }
-      if (typeof facingMode === "object" && facingMode !== null && ("exact" in facingMode || "ideal" in facingMode)) {
-        const { exact, ideal } = facingMode;
-        return (exact ?? ideal) === "user";
-      }
-      return !isMobileOrTablet();
-    }, [mirrored, isCameraPermissionsDenied, constraints]);
-    useEffect34(() => {
-      if (!isMobile) {
-        try {
-          window.navigator?.mediaDevices?.getUserMedia(MEDIA_CONSTRAINTS)?.then((stream) => {
-            const track = stream.getVideoTracks()[0];
-            const capabilities = track.getCapabilities();
-            if (capabilities && isMounted.current) {
-              setMinScreenshotHeight(capabilities?.height?.max);
-              setMinScreenshotWidth(capabilities?.width?.max);
+  }
+  return canvas;
+}
+
+// src/webcam/useErrorHandler.ts
+var GET_USER_MEDIA_ERROR = "getUserMedia is not implemented in this browser";
+function useErrorHandler({ onError }) {
+  const { t } = useTranslation23();
+  const handleError = useEvent(onError);
+  const handleUserMediaError = useCallback26(
+    (error) => {
+      console.error(error);
+      let errorText = "";
+      if (error?.message === GET_USER_MEDIA_ERROR) {
+        errorText = t("camera_errors.chekin_cant_use_your_camera");
+        handleError({
+          title: errorText,
+          message: t("camera_errors.please_try_a_different_browser")
+        });
+      } else if (isDOMException(error)) {
+        switch (error.name) {
+          case "PermissionDeniedError":
+          case "NotAllowedError":
+            errorText = `${t("camera_errors.permissions_denied")}. ${t(
+              "camera_errors.camera_permissions_denied"
+            )}`;
+            toast2.error(errorText);
+            break;
+          case "NotFoundError":
+            errorText = t("camera_errors.no_camera_device_found");
+            toast2.error(errorText);
+            break;
+          case "NotReadableError":
+          case "AbortError":
+            errorText = t("camera_errors.chekin_cant_use_your_camera");
+            handleError({
+              title: errorText,
+              message: `${t("close_other_application_that_may_be_using_your_camera")}.
+                ${t("if_you_use_external_camera_disconnect_and_reconnect")}.
+                ${t("close_the_browser_re_open_it")}.`
+            });
+            break;
+          case "OverconstrainedError":
+            errorText = t("camera_errors.constraints_camera_error");
+            if (isSafari2) {
+              handleError({
+                title: errorText,
+                message: `${t("camera_errors.safari_camera_error")}. ${t(
+                  "camera_errors.try_chrome_or_firefox"
+                )}.`
+              });
+            } else {
+              toast2.error(errorText);
             }
-            track.stop();
-          });
-        } catch (err) {
-          onException?.(err instanceof Error ? err : String(err));
+            break;
+          default:
+            errorText = t("camera_errors.chekin_cant_use_your_camera");
+            handleError({
+              title: errorText,
+              message: `${t("camera_errors.please_try_a_different_browser")} ${error}`
+            });
         }
+      } else {
+        errorText = t("camera_errors.chekin_cant_use_your_camera");
+        handleError({
+          title: errorText,
+          message: `${t("camera_errors.please_try_a_different_browser")} ${error}`
+        });
       }
-    }, [constraints, isMounted, onException]);
-    const handleUserMediaError = useCallback26(
-      (error) => {
-        if (isDOMException(error) && ["PermissionDeniedError", "NotAllowedError"].includes(error.name)) {
-          setIsCameraPermissionsDenied(true);
-        } else {
-          onException?.(error);
+    },
+    [handleError, t]
+  );
+  return { handleUserMediaError };
+}
+
+// src/webcam/Webcam.tsx
+import { Fragment as Fragment13, jsx as jsx136, jsxs as jsxs84 } from "react/jsx-runtime";
+var SCREENSHOT_FORMAT = "image/jpeg";
+var mirroredTransformStyle = { transform: "rotateY(180deg)" };
+var Webcam = memo7(
+  forwardRef54(
+    ({
+      onUserMedia,
+      onDisabled,
+      imageSmoothing,
+      videoConstraints,
+      additionalConstraints,
+      hideScanArea,
+      roundedScanArea,
+      cropToScanArea,
+      className,
+      mirrored,
+      children,
+      isLoading,
+      placeholderImage,
+      screenshotMaxSize,
+      minScreenshotH,
+      minScreenshotW,
+      videoSourceDeviceId,
+      screenshotQuality = 1,
+      compression,
+      onError,
+      ...props
+    }, ref) => {
+      const [minScreenshotHeight, setMinScreenshotHeight] = useState35();
+      const [minScreenshotWidth, setMinScreenshotWidth] = useState35();
+      const [useReducedConstraints, setUseReducedConstraints] = useState35(false);
+      const [numberOfCameras, setNumberOfCameras] = useState35(0);
+      const constraints = useMemo7(() => {
+        if (videoConstraints) {
+          return videoConstraints;
         }
-        onUserMediaError?.();
-      },
-      [onUserMediaError, onException]
-    );
-    return /* @__PURE__ */ jsxs84(Fragment13, { children: [
-      /* @__PURE__ */ jsx136(
+        if (useReducedConstraints) {
+          return getReducedVideoConstraints({
+            deviceId: videoSourceDeviceId,
+            additional: additionalConstraints
+          });
+        }
+        return getMobileOrDesktopVideoConstraints({
+          deviceId: videoSourceDeviceId,
+          additional: additionalConstraints
+        });
+      }, [
+        additionalConstraints,
+        useReducedConstraints,
+        videoConstraints,
+        videoSourceDeviceId
+      ]);
+      const isMirroredInCSS = mirrored === void 0 && !isMobileOrTablet();
+      const webcamRef = useRef25(null);
+      const scanAreaRef = useRef25(null);
+      const canvasRef = useRef25(null);
+      const containerRef = useRef25(null);
+      const { handleUserMediaError } = useErrorHandler({
+        onError: (errorDetails) => {
+          onDisabled?.(true);
+          onError(errorDetails);
+        }
+      });
+      const handleUserMediaErrorWithFallback = useCallback27(
+        (error) => {
+          if (error instanceof DOMException && error.name === "OverconstrainedError" && !useReducedConstraints && !videoConstraints) {
+            console.warn("Camera constraints failed, trying reduced constraints:", error);
+            setUseReducedConstraints(true);
+            return;
+          }
+          handleUserMediaError(error);
+        },
+        [handleUserMediaError, useReducedConstraints, videoConstraints]
+      );
+      const compressImage2 = async (canvas) => {
+        if (!canvas) return;
+        const blobImage = await getCanvasBlob(canvas);
+        if (!blobImage) return;
+        const compressedFile = await compressFile(blobImage, {
+          convertSize: screenshotMaxSize
+        });
+        console.log(
+          "Before: ",
+          getFileSizeMB(blobImage)?.toFixed(2),
+          "MB",
+          "After: ",
+          getFileSizeMB(compressedFile)?.toFixed(2),
+          "MB"
+        );
+        return toBase64(compressedFile);
+      };
+      const handleTakePhoto = () => {
+        const takenPhotoCanvas = getPhotoCanvas({
+          player: webcamRef.current?.video,
+          container: containerRef.current,
+          canvas: canvasRef.current,
+          scanArea: scanAreaRef.current,
+          cropToScanArea
+        });
+        if (!takenPhotoCanvas) return;
+        if (compression) return compressImage2(takenPhotoCanvas);
+        return Promise.resolve(
+          takenPhotoCanvas.toDataURL(SCREENSHOT_FORMAT, screenshotQuality)
+        );
+      };
+      useImperativeHandle(
+        ref,
+        () => ({
+          takePhoto: handleTakePhoto,
+          numberOfCameras,
+          ...webcamRef.current
+        })
+      );
+      const handleUserMediaSuccess = useCallback27(
+        (stream) => {
+          if (!isMobile2) {
+            const track = stream.getVideoTracks()[0];
+            const capabilities = !isFirefox && track?.getCapabilities();
+            if (capabilities) {
+              setMinScreenshotHeight(capabilities.height?.max);
+              setMinScreenshotWidth(capabilities.width?.max);
+            }
+          } else {
+            setMinScreenshotWidth(minScreenshotW);
+            setMinScreenshotHeight(minScreenshotH);
+          }
+          navigator.mediaDevices.enumerateDevices().then((devices) => {
+            setNumberOfCameras(
+              devices.filter((device) => device.kind === "videoinput").length
+            );
+          }).catch((error) => {
+            console.warn("Failed to enumerate devices:", error);
+            setNumberOfCameras(1);
+          });
+          onUserMedia?.();
+        },
+        [minScreenshotH, minScreenshotW, onUserMedia]
+      );
+      return /* @__PURE__ */ jsxs84(
         "div",
         {
+          ref: containerRef,
           className: cn(
-            "relative z-[1] mx-auto flex h-[191px] w-[283px] justify-center overflow-hidden rounded-md text-center",
-            isDisplayingMirrored && "[&_video]:scale-x-[-1]",
-            className
+            className,
+            "webcam relative z-[1] mx-auto flex h-[222px] w-[332px] items-center justify-center overflow-hidden rounded-[6px] text-center",
+            "kiosko:h-[620px] kiosko:max-h-[620px] kiosko:w-[890px] kiosko:max-w-[890px]"
           ),
-          children: /* @__PURE__ */ jsx136(
-            ReactWebcam,
+          style: isMirroredInCSS ? mirroredTransformStyle : void 0,
+          children: [
+            !hideScanArea && /* @__PURE__ */ jsxs84(
+              "div",
+              {
+                ref: scanAreaRef,
+                className: cn(
+                  "webcam__scan-area absolute inset-0 z-[2] m-auto flex w-[calc(100%-32px)] items-center justify-center shadow-[0_0_0_9999em_rgb(0_0_0_/_60%)]",
+                  "h-[200px] rounded-[15px] min-[479px]:h-[calc(100%-32px)]",
+                  roundedScanArea && "h-[197px] w-[165px] rounded-[45%] border-[3px] border-white shadow-[0_0_8px_#fff,inset_0_0_0_#fff,0_0_0_9999em_rgb(0_0_0_/_60%)]",
+                  "kiosko:h-[calc(100%-170px)] kiosko:w-[345px]"
+                ),
+                style: isMirroredInCSS ? mirroredTransformStyle : void 0,
+                children: [
+                  !roundedScanArea && /* @__PURE__ */ jsxs84(Fragment13, { children: [
+                    /* @__PURE__ */ jsx136("div", { className: "absolute left-[-2px] top-[-2px] h-[45px] w-[45px] rounded-tl-[15px] border-[4px] border-b-0 border-r-0 border-white" }),
+                    /* @__PURE__ */ jsx136("div", { className: "absolute right-[-2px] top-[-2px] h-[45px] w-[45px] rounded-tr-[15px] border-[4px] border-b-0 border-l-0 border-white" }),
+                    /* @__PURE__ */ jsx136("div", { className: "absolute bottom-[-2px] right-[-2px] h-[45px] w-[45px] rounded-br-[15px] border-[4px] border-l-0 border-t-0 border-white" }),
+                    /* @__PURE__ */ jsx136("div", { className: "absolute bottom-[-2px] left-[-2px] h-[45px] w-[45px] rounded-bl-[15px] border-[4px] border-r-0 border-t-0 border-white" })
+                  ] }),
+                  placeholderImage
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx136("canvas", { ref: canvasRef, className: "hidden" }),
+            isLoading ? /* @__PURE__ */ jsx136("div", { className: "absolute inset-0 z-10 flex items-center justify-center bg-black/50", children: /* @__PURE__ */ jsx136("div", { className: "h-10 w-10 animate-spin rounded-full border-4 border-white/30 border-t-white" }) }) : /* @__PURE__ */ jsx136(
+              ReactWebcam,
+              {
+                ref: webcamRef,
+                mirrored: !!mirrored,
+                width: props.width,
+                height: props.height,
+                videoConstraints: constraints,
+                imageSmoothing: !!imageSmoothing,
+                screenshotFormat: SCREENSHOT_FORMAT,
+                onUserMedia: handleUserMediaSuccess,
+                screenshotQuality,
+                onUserMediaError: handleUserMediaErrorWithFallback,
+                minScreenshotWidth,
+                minScreenshotHeight,
+                className: "webcam__video z-[1] h-full w-full bg-[#e2e2e2] object-cover",
+                audio: false,
+                disablePictureInPicture: false,
+                forceScreenshotSourceSize: false
+              }
+            ),
+            children
+          ]
+        }
+      );
+    }
+  )
+);
+Webcam.displayName = "Webcam";
+
+// src/mobile-webcam/MobileWebcam.tsx
+import { Camera, ChevronLeft as ChevronLeft4 } from "lucide-react";
+import { forwardRef as forwardRef55, useCallback as useCallback29 } from "react";
+import { createPortal } from "react-dom";
+import { useTranslation as useTranslation25 } from "react-i18next";
+
+// src/mobile-webcam/DeviceCamera/DeviceCamera.tsx
+import { useCallback as useCallback28 } from "react";
+import { useTranslation as useTranslation24 } from "react-i18next";
+import { jsx as jsx137, jsxs as jsxs85 } from "react/jsx-runtime";
+function DeviceCamera({ onChange, facingMode, className }) {
+  const { t } = useTranslation24();
+  const handleNativeScreenshot = useCallback28(
+    (event) => {
+      const file = event.target.files?.[0];
+      onChange(file ? compressImage(file) : void 0);
+    },
+    [onChange]
+  );
+  return /* @__PURE__ */ jsxs85(
+    "div",
+    {
+      className: cn(
+        "mobile-webcam-device-camera flex flex-col items-center gap-3 rounded-xl bg-[#1c1b1f] p-4 text-sm text-white",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsx137("div", { children: t("camera_errors.experiencing_camera_issues") }),
+        /* @__PURE__ */ jsxs85("label", { className: "text-[16px] font-semibold uppercase leading-6 text-[var(--text-button-color)]", children: [
+          t("open_devices_camera"),
+          /* @__PURE__ */ jsx137(
+            "input",
             {
-              ref,
-              className: "z-[1] h-[260px] flex-1 self-center bg-[var(--webcam-bg)] max-md:min-h-[200%]",
-              onUserMedia,
-              onUserMediaError: handleUserMediaError,
-              audio,
-              imageSmoothing,
-              mirrored,
-              screenshotQuality,
-              videoConstraints: constraints,
-              screenshotFormat: SCREENSHOT_FORMAT,
-              minScreenshotHeight,
-              minScreenshotWidth
+              className: "sr-only",
+              type: "file",
+              accept: "image/*",
+              capture: facingMode || "environment",
+              onChange: handleNativeScreenshot
             }
           )
-        }
-      ),
-      /* @__PURE__ */ jsx136("div", { className: "mx-auto box-border w-[306px] p-4 text-center text-base text-[var(--webcam-permission-text)]", children: t("camera_permissions_denied") })
-    ] });
+        ] })
+      ]
+    }
+  );
+}
+
+// src/mobile-webcam/MobileWebcam.tsx
+import { jsx as jsx138, jsxs as jsxs86 } from "react/jsx-runtime";
+var webcamClasses = "fixed left-0 top-0 z-[6] h-full w-full rounded-none";
+var scanAreaClasses = String.raw`[&_.webcam\_\_scan-area]:h-full [&_.webcam\_\_scan-area]:max-h-[209px] landscape:[&_.webcam\_\_scan-area]:h-[80%] landscape:[&_.webcam\_\_scan-area]:max-h-full md:[&_.webcam\_\_scan-area]:h-auto md:[&_.webcam\_\_scan-area]:max-h-none md:[&_.webcam\_\_scan-area]:aspect-[2/1]`;
+var roundedWebcamClasses = String.raw`[&_.webcam\_\_scan-area]:top-[-60px] [&_.webcam\_\_scan-area]:h-full [&_.webcam\_\_scan-area]:w-full [&_.webcam\_\_scan-area]:max-h-[55%] [&_.webcam\_\_scan-area]:max-w-[80%] max-[375px]:[&_.webcam\_\_scan-area]:max-h-[369px] max-[375px]:[&_.webcam\_\_scan-area]:max-w-[261px] max-[320px]:[&_.webcam\_\_scan-area]:max-h-[318px] max-[320px]:[&_.webcam\_\_scan-area]:max-w-[220px] landscape:[&_.webcam\_\_scan-area]:h-full landscape:[&_.webcam\_\_scan-area]:w-full landscape:[&_.webcam\_\_scan-area]:max-h-[90%] landscape:[&_.webcam\_\_scan-area]:max-w-[261px] md:[&_.webcam\_\_scan-area]:aspect-square`;
+function getAndMapFacingMode(constraints) {
+  if (typeof constraints === "boolean" || !constraints) return;
+  if (constraints.facingMode === "user") return "user";
+  if (constraints.facingMode === "environment") return "environment";
+}
+var MobileWebcam = forwardRef55(
+  ({ onScreenshot, onBack, title, text, disabled, className, ...props }, ref) => {
+    const rootElement = getDocument()?.body;
+    const { t } = useTranslation25();
+    const handleNativeScreenshot = useCallback29(
+      (photo) => onScreenshot({ isNative: true, photo }),
+      [onScreenshot]
+    );
+    return createPortal(
+      /* @__PURE__ */ jsxs86("div", { className: "mobile-camera flex justify-center", children: [
+        /* @__PURE__ */ jsx138(
+          "button",
+          {
+            type: "button",
+            onClick: onBack,
+            className: "mobile-camera__back-btn fixed left-7 top-9 z-[7] flex border-0 bg-transparent p-0 landscape:left-[50px] landscape:top-[70px]",
+            children: /* @__PURE__ */ jsx138(ChevronLeft4, { size: 32, strokeWidth: 3, className: "text-white" })
+          }
+        ),
+        title && /* @__PURE__ */ jsx138("div", { className: "mobile-camera__title fixed left-1/2 top-8 z-[7] -translate-x-1/2 whitespace-nowrap text-[18px] font-bold text-white landscape:top-[5px]", children: title }),
+        text ? /* @__PURE__ */ jsx138("p", { className: "mobile-camera__subtitle fixed top-[76px] z-[7] mx-auto my-0 px-6 text-center text-white landscape:hidden [@media(min-height:838px)]:top-28", children: text }) : /* @__PURE__ */ jsx138("p", { className: "mobile-camera__helper fixed top-[88px] z-[7] mx-auto my-0 px-6 text-center text-xs text-white landscape:hidden [@media(min-height:700px)]:[font-size:inherit]", children: t("place_document_inside_frame") }),
+        /* @__PURE__ */ jsx138(
+          Webcam,
+          {
+            ref,
+            ...props,
+            className: cn(
+              className,
+              webcamClasses,
+              props.roundedScanArea ? roundedWebcamClasses : scanAreaClasses
+            )
+          }
+        ),
+        /* @__PURE__ */ jsxs86("div", { className: "fixed bottom-5 z-[7] flex w-[calc(100%-32px)] flex-col justify-between gap-5 self-center landscape:inset-y-0 landscape:right-10 landscape:my-auto landscape:h-auto landscape:w-auto landscape:justify-normal landscape:[&_.mobile-webcam-device-camera]:hidden", children: [
+          /* @__PURE__ */ jsx138(
+            "button",
+            {
+              type: "button",
+              disabled,
+              onClick: () => onScreenshot({ isNative: false }),
+              className: "mobile-camera__take-btn relative flex h-[75px] w-[75px] items-center justify-center self-center rounded-full border-0 bg-white p-[10px] shadow-[0_0_10px_#ffffff] hover:opacity-80 disabled:cursor-default disabled:opacity-60 disabled:hover:opacity-60",
+              children: /* @__PURE__ */ jsx138(Camera, { size: 26, className: "text-[var(--primary)]" })
+            }
+          ),
+          /* @__PURE__ */ jsx138(
+            DeviceCamera,
+            {
+              onChange: handleNativeScreenshot,
+              facingMode: getAndMapFacingMode(props.additionalConstraints)
+            }
+          )
+        ] })
+      ] }),
+      rootElement
+    );
   }
 );
-Webcam.displayName = "Webcam";
+MobileWebcam.displayName = "MobileWebcam";
 
 // src/wide-button/WideButton.tsx
-import { forwardRef as forwardRef55 } from "react";
-import { jsx as jsx137 } from "react/jsx-runtime";
-var WideButton = forwardRef55(
-  ({ className, disabled, ...props }, ref) => /* @__PURE__ */ jsx137(
+import { forwardRef as forwardRef56 } from "react";
+import { jsx as jsx139 } from "react/jsx-runtime";
+var WideButton = forwardRef56(
+  ({ className, disabled, ...props }, ref) => /* @__PURE__ */ jsx139(
     Button,
     {
       ref,
@@ -10895,22 +11406,22 @@ WideButton.displayName = "WideButton";
 import * as React42 from "react";
 import * as DialogPrimitive2 from "@radix-ui/react-dialog";
 import Draggable from "react-draggable";
-import { jsx as jsx138, jsxs as jsxs85 } from "react/jsx-runtime";
+import { jsx as jsx140, jsxs as jsxs87 } from "react/jsx-runtime";
 var DRAWER_CLOSE_THRESHOLD = 72;
 var DRAWER_MIN_OVERLAY_OPACITY = 0.1;
 function Drawer({ ...props }) {
-  return /* @__PURE__ */ jsx138(DialogPrimitive2.Root, { "data-slot": "drawer", ...props });
+  return /* @__PURE__ */ jsx140(DialogPrimitive2.Root, { "data-slot": "drawer", ...props });
 }
 function DrawerTrigger({ ...props }) {
-  return /* @__PURE__ */ jsx138(DialogPrimitive2.Trigger, { "data-slot": "drawer-trigger", ...props });
+  return /* @__PURE__ */ jsx140(DialogPrimitive2.Trigger, { "data-slot": "drawer-trigger", ...props });
 }
 function DrawerPortal({ ...props }) {
-  return /* @__PURE__ */ jsx138(DialogPrimitive2.Portal, { "data-slot": "drawer-portal", ...props });
+  return /* @__PURE__ */ jsx140(DialogPrimitive2.Portal, { "data-slot": "drawer-portal", ...props });
 }
 function DrawerClose({ ...props }) {
-  return /* @__PURE__ */ jsx138(DialogPrimitive2.Close, { "data-slot": "drawer-close", ...props });
+  return /* @__PURE__ */ jsx140(DialogPrimitive2.Close, { "data-slot": "drawer-close", ...props });
 }
-var DrawerOverlay = React42.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx138(
+var DrawerOverlay = React42.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx140(
   DialogPrimitive2.Overlay,
   {
     ref,
@@ -10960,14 +11471,14 @@ var DrawerContent = React42.forwardRef(
       },
       [onClose]
     );
-    return /* @__PURE__ */ jsxs85(DrawerPortal, { container: finalContainer, children: [
-      lockScroll ? /* @__PURE__ */ jsx138(
+    return /* @__PURE__ */ jsxs87(DrawerPortal, { container: finalContainer, children: [
+      lockScroll ? /* @__PURE__ */ jsx140(
         DrawerOverlay,
         {
           style: { opacity: overlayOpacity },
           onClick: closeOnOverlayClick ? onClose : void 0
         }
-      ) : /* @__PURE__ */ jsx138(
+      ) : /* @__PURE__ */ jsx140(
         "div",
         {
           className: cn(DrawerOverlayClasses),
@@ -10975,7 +11486,7 @@ var DrawerContent = React42.forwardRef(
           onClick: closeOnOverlayClick ? onClose : void 0
         }
       ),
-      /* @__PURE__ */ jsx138(
+      /* @__PURE__ */ jsx140(
         DialogPrimitive2.Content,
         {
           asChild: true,
@@ -10991,7 +11502,7 @@ var DrawerContent = React42.forwardRef(
             }
           },
           ...props,
-          children: /* @__PURE__ */ jsx138("div", { className: "fixed inset-x-0 bottom-0 top-auto z-50 outline-none", children: /* @__PURE__ */ jsx138(
+          children: /* @__PURE__ */ jsx140("div", { className: "fixed inset-x-0 bottom-0 top-auto z-50 outline-none", children: /* @__PURE__ */ jsx140(
             Draggable,
             {
               axis: "y",
@@ -11002,7 +11513,7 @@ var DrawerContent = React42.forwardRef(
               onDrag: handleDrag,
               onStop: handleStop,
               position: { x: 0, y: dragOffsetY },
-              children: /* @__PURE__ */ jsxs85(
+              children: /* @__PURE__ */ jsxs87(
                 "div",
                 {
                   ref: nodeRef,
@@ -11011,7 +11522,7 @@ var DrawerContent = React42.forwardRef(
                     className
                   ),
                   children: [
-                    showHandle && /* @__PURE__ */ jsx138(
+                    showHandle && /* @__PURE__ */ jsx140(
                       "div",
                       {
                         "data-drawer-handle": true,
@@ -11019,10 +11530,10 @@ var DrawerContent = React42.forwardRef(
                           "mx-auto flex h-8 w-24 touch-none items-center justify-center",
                           disableDrag ? "cursor-default" : "cursor-grab active:cursor-grabbing"
                         ),
-                        children: /* @__PURE__ */ jsx138("span", { className: "block h-1.5 w-12 rounded-full bg-[#D9D7D3]" })
+                        children: /* @__PURE__ */ jsx140("span", { className: "block h-1.5 w-12 rounded-full bg-[#D9D7D3]" })
                       }
                     ),
-                    /* @__PURE__ */ jsx138("div", { className: "min-h-0 flex-1 overflow-y-auto", children })
+                    /* @__PURE__ */ jsx140("div", { className: "min-h-0 flex-1 overflow-y-auto", children })
                   ]
                 }
               )
@@ -11034,7 +11545,7 @@ var DrawerContent = React42.forwardRef(
   }
 );
 DrawerContent.displayName = DialogPrimitive2.Content.displayName;
-var DrawerHeader = ({ className, ...props }) => /* @__PURE__ */ jsx138(
+var DrawerHeader = ({ className, ...props }) => /* @__PURE__ */ jsx140(
   "div",
   {
     className: cn("flex flex-col gap-2 px-5 pt-2 text-center", className),
@@ -11042,9 +11553,9 @@ var DrawerHeader = ({ className, ...props }) => /* @__PURE__ */ jsx138(
   }
 );
 DrawerHeader.displayName = "DrawerHeader";
-var DrawerFooter = ({ className, ...props }) => /* @__PURE__ */ jsx138("div", { className: cn("flex flex-col gap-2 p-5", className), ...props });
+var DrawerFooter = ({ className, ...props }) => /* @__PURE__ */ jsx140("div", { className: cn("flex flex-col gap-2 p-5", className), ...props });
 DrawerFooter.displayName = "DrawerFooter";
-var DrawerTitle = React42.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx138(
+var DrawerTitle = React42.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx140(
   DialogPrimitive2.Title,
   {
     ref,
@@ -11054,7 +11565,7 @@ var DrawerTitle = React42.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 DrawerTitle.displayName = DialogPrimitive2.Title.displayName;
-var DrawerDescription = React42.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx138(
+var DrawerDescription = React42.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx140(
   DialogPrimitive2.Description,
   {
     ref,
@@ -11081,7 +11592,7 @@ var DEVICE = {
 };
 
 // src/responsive-sheet/ResponsiveSheet.tsx
-import { jsx as jsx139, jsxs as jsxs86 } from "react/jsx-runtime";
+import { jsx as jsx141, jsxs as jsxs88 } from "react/jsx-runtime";
 function ResponsiveSheet({
   open,
   onClose,
@@ -11100,8 +11611,8 @@ function ResponsiveSheet({
   closeOnEscape = true,
   disableDrag = false
 }) {
-  const { isMatch: isMobile2 } = useScreenResize(DEVICE.tablet);
-  const isMobileMode = isMobile2 && isMobileModalModeAvailable();
+  const { isMatch: isMobile3 } = useScreenResize(DEVICE.tablet);
+  const isMobileMode = isMobile3 && isMobileModalModeAvailable();
   const handleOpenChange = (nextOpen) => {
     if (!nextOpen) {
       onClose();
@@ -11117,7 +11628,7 @@ function ResponsiveSheet({
       event.preventDefault();
     }
   };
-  const content = /* @__PURE__ */ jsxs86(
+  const content = /* @__PURE__ */ jsxs88(
     "div",
     {
       className: cn(
@@ -11125,7 +11636,7 @@ function ResponsiveSheet({
         contentClassName
       ),
       children: [
-        title ? /* @__PURE__ */ jsx139(
+        title ? /* @__PURE__ */ jsx141(
           "div",
           {
             "aria-hidden": "true",
@@ -11136,7 +11647,7 @@ function ResponsiveSheet({
             children: title
           }
         ) : null,
-        description ? /* @__PURE__ */ jsx139(
+        description ? /* @__PURE__ */ jsx141(
           "p",
           {
             "aria-hidden": "true",
@@ -11152,7 +11663,7 @@ function ResponsiveSheet({
     }
   );
   if (isMobileMode) {
-    return /* @__PURE__ */ jsx139(Drawer, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxs86(
+    return /* @__PURE__ */ jsx141(Drawer, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxs88(
       DrawerContent,
       {
         onClose,
@@ -11163,14 +11674,14 @@ function ResponsiveSheet({
         onEscapeKeyDown: handleEscapeKeyDown,
         className: cn(className, drawerClassName),
         children: [
-          title ? /* @__PURE__ */ jsx139(DrawerTitle, { className: "sr-only", children: title }) : null,
-          description ? /* @__PURE__ */ jsx139(DrawerDescription, { className: "sr-only", children: description }) : null,
+          title ? /* @__PURE__ */ jsx141(DrawerTitle, { className: "sr-only", children: title }) : null,
+          description ? /* @__PURE__ */ jsx141(DrawerDescription, { className: "sr-only", children: description }) : null,
           content
         ]
       }
     ) });
   }
-  return /* @__PURE__ */ jsx139(Dialog, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxs86(
+  return /* @__PURE__ */ jsx141(Dialog, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxs88(
     DialogContent,
     {
       showCloseButton,
@@ -11180,8 +11691,8 @@ function ResponsiveSheet({
       className: cn("max-w-[560px] border-0 p-0 shadow-xl", className, dialogClassName),
       lockScroll: false,
       children: [
-        title ? /* @__PURE__ */ jsx139(DialogTitle, { className: "sr-only", children: title }) : null,
-        description ? /* @__PURE__ */ jsx139(DialogDescription, { className: "sr-only", children: description }) : null,
+        title ? /* @__PURE__ */ jsx141(DialogTitle, { className: "sr-only", children: title }) : null,
+        description ? /* @__PURE__ */ jsx141(DialogDescription, { className: "sr-only", children: description }) : null,
         content
       ]
     }
@@ -11190,7 +11701,7 @@ function ResponsiveSheet({
 
 // src/responsive-dropdown/ResponsiveDropdown.tsx
 import * as React43 from "react";
-import { Fragment as Fragment14, jsx as jsx140, jsxs as jsxs87 } from "react/jsx-runtime";
+import { Fragment as Fragment14, jsx as jsx142, jsxs as jsxs89 } from "react/jsx-runtime";
 function ResponsiveDropdown({
   trigger,
   options,
@@ -11203,8 +11714,8 @@ function ResponsiveDropdown({
   dropdownClassName,
   drawerClassName
 }) {
-  const { isMatch: isMobile2 } = useScreenResize(DEVICE.mobileXL);
-  const isMobileMode = isMobile2 && isMobileModalModeAvailable();
+  const { isMatch: isMobile3 } = useScreenResize(DEVICE.mobileXL);
+  const isMobileMode = isMobile3 && isMobileModalModeAvailable();
   const [open, setOpen] = React43.useState(false);
   const visibleOptions = options?.filter((option) => !option.hidden) ?? [];
   const renderTrigger = (isOpen) => typeof trigger === "function" ? trigger(isOpen) : trigger;
@@ -11222,8 +11733,8 @@ function ResponsiveDropdown({
     setOpen(false);
   };
   if (isMobileMode) {
-    return /* @__PURE__ */ jsxs87(Fragment14, { children: [
-      /* @__PURE__ */ jsx140(
+    return /* @__PURE__ */ jsxs89(Fragment14, { children: [
+      /* @__PURE__ */ jsx142(
         "div",
         {
           className: "responsive-dropdown__mobile-trigger",
@@ -11231,16 +11742,16 @@ function ResponsiveDropdown({
           children: renderTrigger(open)
         }
       ),
-      /* @__PURE__ */ jsx140(Drawer, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxs87(
+      /* @__PURE__ */ jsx142(Drawer, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxs89(
         DrawerContent,
         {
           onClose: () => setOpen(false),
           lockScroll: false,
           className: cn("px-0 pb-2", className, drawerClassName),
           children: [
-            title ? /* @__PURE__ */ jsx140(DrawerTitle, { className: "sr-only", children: title }) : null,
-            /* @__PURE__ */ jsxs87("div", { className: "flex flex-col", children: [
-              visibleOptions.map((option) => /* @__PURE__ */ jsx140(
+            title ? /* @__PURE__ */ jsx142(DrawerTitle, { className: "sr-only", children: title }) : null,
+            /* @__PURE__ */ jsxs89("div", { className: "flex flex-col", children: [
+              visibleOptions.map((option) => /* @__PURE__ */ jsx142(
                 "div",
                 {
                   role: "button",
@@ -11262,16 +11773,16 @@ function ResponsiveDropdown({
       ) })
     ] });
   }
-  return /* @__PURE__ */ jsxs87(DropdownMenu, { open, onOpenChange: handleOpenChange, children: [
-    /* @__PURE__ */ jsx140(DropdownMenuTrigger, { asChild: true, disabled, children: renderTrigger(open) }),
-    /* @__PURE__ */ jsxs87(
+  return /* @__PURE__ */ jsxs89(DropdownMenu, { open, onOpenChange: handleOpenChange, children: [
+    /* @__PURE__ */ jsx142(DropdownMenuTrigger, { asChild: true, disabled, children: renderTrigger(open) }),
+    /* @__PURE__ */ jsxs89(
       DropdownMenuContent,
       {
         side,
         align,
         className: cn("min-w-[295px]", className, dropdownClassName),
         children: [
-          visibleOptions.map((option) => /* @__PURE__ */ jsx140(
+          visibleOptions.map((option) => /* @__PURE__ */ jsx142(
             DropdownMenuItem,
             {
               disabled: option.disabled,
@@ -11290,10 +11801,10 @@ function ResponsiveDropdown({
 // src/dashboard/input/Input.tsx
 import * as React44 from "react";
 import { Eye, Minus as Minus4, Plus as Plus3, X as X9 } from "lucide-react";
-import { useTranslation as useTranslation24 } from "react-i18next";
+import { useTranslation as useTranslation26 } from "react-i18next";
 
 // src/dashboard/_fieldset/Fieldset.tsx
-import { Fragment as Fragment15, jsx as jsx141, jsxs as jsxs88 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx143, jsxs as jsxs90 } from "react/jsx-runtime";
 function Fieldset({
   isActivated,
   isFocused,
@@ -11313,8 +11824,8 @@ function Fieldset({
 }) {
   const showLegendText = Boolean(legend || typeof label === "string");
   const raised = !isEmpty || isFocused;
-  return /* @__PURE__ */ jsxs88(Fragment15, { children: [
-    /* @__PURE__ */ jsxs88(
+  return /* @__PURE__ */ jsxs90(Fragment15, { children: [
+    /* @__PURE__ */ jsxs90(
       "div",
       {
         onClick,
@@ -11330,7 +11841,7 @@ function Fieldset({
           labelClassName
         ),
         children: [
-          /* @__PURE__ */ jsx141(
+          /* @__PURE__ */ jsx143(
             "label",
             {
               id: labelId,
@@ -11342,7 +11853,7 @@ function Fieldset({
               children: label
             }
           ),
-          tooltip && /* @__PURE__ */ jsx141("span", { className: "ml-1 inline-flex", children: /* @__PURE__ */ jsx141(
+          tooltip && /* @__PURE__ */ jsx143("span", { className: "ml-1 inline-flex", children: /* @__PURE__ */ jsx143(
             HelpTooltip,
             {
               content: tooltip,
@@ -11353,7 +11864,7 @@ function Fieldset({
         ]
       }
     ),
-    /* @__PURE__ */ jsx141(
+    /* @__PURE__ */ jsx143(
       "fieldset",
       {
         "aria-hidden": "true",
@@ -11365,7 +11876,7 @@ function Fieldset({
           invalid && "border-[var(--error-message-color)]",
           className
         ),
-        children: /* @__PURE__ */ jsxs88(
+        children: /* @__PURE__ */ jsxs90(
           "legend",
           {
             className: cn(
@@ -11375,8 +11886,8 @@ function Fieldset({
               !label && "w-0"
             ),
             children: [
-              showLegendText && /* @__PURE__ */ jsx141("span", { className: "visible inline-block pr-[6px] text-[14px] font-medium opacity-0", children: legend || label }),
-              tooltip && /* @__PURE__ */ jsx141("span", { className: "visible inline-block w-[20px] opacity-0", children: /* @__PURE__ */ jsx141("span", { className: "inline-block h-4 w-4" }) })
+              showLegendText && /* @__PURE__ */ jsx143("span", { className: "visible inline-block pr-[6px] text-[14px] font-medium opacity-0", children: legend || label }),
+              tooltip && /* @__PURE__ */ jsx143("span", { className: "visible inline-block w-[20px] opacity-0", children: /* @__PURE__ */ jsx143("span", { className: "inline-block h-4 w-4" }) })
             ]
           }
         )
@@ -11386,7 +11897,7 @@ function Fieldset({
 }
 
 // src/dashboard/input/Input.tsx
-import { jsx as jsx142, jsxs as jsxs89 } from "react/jsx-runtime";
+import { jsx as jsx144, jsxs as jsxs91 } from "react/jsx-runtime";
 var checkIfEmpty = ({
   empty,
   defaultValue,
@@ -11437,7 +11948,7 @@ var DashboardInput = React44.forwardRef(
     const generatedId = React44.useId();
     const inputId = id ?? name ?? generatedId;
     const errorId = `${inputId}-error`;
-    const { t } = useTranslation24();
+    const { t } = useTranslation26();
     const isEmpty = checkIfEmpty({ empty, value, defaultValue });
     const [inputType, setInputType] = React44.useState(type);
     const [isPasswordRevealed, setIsPasswordRevealed] = React44.useState(false);
@@ -11477,7 +11988,7 @@ var DashboardInput = React44.forwardRef(
     };
     const showRightPaddingForReset = Boolean(onReset);
     const showRightPaddingForReveal = isPasswordReveal;
-    return /* @__PURE__ */ jsxs89(
+    return /* @__PURE__ */ jsxs91(
       "div",
       {
         className: cn(
@@ -11488,7 +11999,7 @@ var DashboardInput = React44.forwardRef(
           className
         ),
         children: [
-          topLabel && /* @__PURE__ */ jsx142(
+          topLabel && /* @__PURE__ */ jsx144(
             "label",
             {
               htmlFor: inputId,
@@ -11496,7 +12007,7 @@ var DashboardInput = React44.forwardRef(
               children: topLabel
             }
           ),
-          /* @__PURE__ */ jsxs89(
+          /* @__PURE__ */ jsxs91(
             "div",
             {
               className: cn(
@@ -11505,8 +12016,8 @@ var DashboardInput = React44.forwardRef(
                 fieldClassName
               ),
               children: [
-                /* @__PURE__ */ jsxs89("div", { className: cn("relative w-full cursor-text", contentClassName), children: [
-                  /* @__PURE__ */ jsx142(
+                /* @__PURE__ */ jsxs91("div", { className: cn("relative w-full cursor-text", contentClassName), children: [
+                  /* @__PURE__ */ jsx144(
                     Fieldset,
                     {
                       isFocused: isFocused && !readOnly,
@@ -11527,8 +12038,8 @@ var DashboardInput = React44.forwardRef(
                       })
                     }
                   ),
-                  leftIcon && /* @__PURE__ */ jsx142("span", { className: "pointer-events-none absolute left-0 top-0 flex h-full max-w-10 items-center justify-center text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ jsx142("span", { className: "flex h-full w-10 items-center justify-center", children: leftIcon }) }),
-                  /* @__PURE__ */ jsx142(
+                  leftIcon && /* @__PURE__ */ jsx144("span", { className: "pointer-events-none absolute left-0 top-0 flex h-full max-w-10 items-center justify-center text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ jsx144("span", { className: "flex h-full w-10 items-center justify-center", children: leftIcon }) }),
+                  /* @__PURE__ */ jsx144(
                     "input",
                     {
                       ...props,
@@ -11565,9 +12076,9 @@ var DashboardInput = React44.forwardRef(
                       )
                     }
                   ),
-                  sign && /* @__PURE__ */ jsx142("span", { className: "pointer-events-none absolute right-[14px] top-0 flex h-full items-center text-[18px] font-medium leading-6 text-[var(--chekin-color-brand-navy)]", children: sign }),
-                  trailingAdornment && /* @__PURE__ */ jsx142("span", { className: "pointer-events-none absolute right-[14px] top-0 flex h-full items-center", children: trailingAdornment }),
-                  onReset && !isEmpty && /* @__PURE__ */ jsx142(
+                  sign && /* @__PURE__ */ jsx144("span", { className: "pointer-events-none absolute right-[14px] top-0 flex h-full items-center text-[18px] font-medium leading-6 text-[var(--chekin-color-brand-navy)]", children: sign }),
+                  trailingAdornment && /* @__PURE__ */ jsx144("span", { className: "pointer-events-none absolute right-[14px] top-0 flex h-full items-center", children: trailingAdornment }),
+                  onReset && !isEmpty && /* @__PURE__ */ jsx144(
                     "button",
                     {
                       type: "button",
@@ -11575,17 +12086,17 @@ var DashboardInput = React44.forwardRef(
                       disabled,
                       className: "absolute right-0 top-0 flex h-full w-10 items-center justify-center border-0 bg-transparent p-0 text-[#9696b9] hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50",
                       "aria-label": "Reset",
-                      children: /* @__PURE__ */ jsx142(X9, { size: 14 })
+                      children: /* @__PURE__ */ jsx144(X9, { size: 14 })
                     }
                   ),
-                  isPasswordReveal && /* @__PURE__ */ jsx142(
+                  isPasswordReveal && /* @__PURE__ */ jsx144(
                     "button",
                     {
                       type: "button",
                       onClick: togglePasswordReveal,
                       className: "absolute right-[14px] top-[18px] flex h-[13px] w-[21px] cursor-pointer items-center justify-center border-0 bg-transparent p-0 hover:opacity-85",
                       "aria-label": isPasswordRevealed ? "Hide password" : "Show password",
-                      children: /* @__PURE__ */ jsx142(
+                      children: /* @__PURE__ */ jsx144(
                         Eye,
                         {
                           size: 20,
@@ -11597,32 +12108,32 @@ var DashboardInput = React44.forwardRef(
                     }
                   )
                 ] }),
-                type === "number" && showNumberButtons && /* @__PURE__ */ jsxs89("div", { className: "absolute right-[18px] top-[13px] inline-flex items-center text-right", children: [
-                  /* @__PURE__ */ jsx142(
+                type === "number" && showNumberButtons && /* @__PURE__ */ jsxs91("div", { className: "absolute right-[18px] top-[13px] inline-flex items-center text-right", children: [
+                  /* @__PURE__ */ jsx144(
                     "button",
                     {
                       type: "button",
                       onClick: onDecrement,
                       className: "mr-2 inline-flex h-[23px] w-8 cursor-pointer items-center justify-center rounded-[3px] border-0 bg-[var(--chekin-color-brand-blue)] p-0 text-[20px] font-bold text-white outline-none hover:opacity-90 active:opacity-100",
                       "aria-label": "Decrement",
-                      children: /* @__PURE__ */ jsx142(Minus4, { size: 16, strokeWidth: 3, "aria-hidden": true })
+                      children: /* @__PURE__ */ jsx144(Minus4, { size: 16, strokeWidth: 3, "aria-hidden": true })
                     }
                   ),
-                  /* @__PURE__ */ jsx142(
+                  /* @__PURE__ */ jsx144(
                     "button",
                     {
                       type: "button",
                       onClick: onIncrement,
                       className: "inline-flex h-[23px] w-8 cursor-pointer items-center justify-center rounded-[3px] border-0 bg-[var(--chekin-color-brand-blue)] p-0 text-[20px] font-bold text-white outline-none hover:opacity-90 active:opacity-100",
                       "aria-label": "Increment",
-                      children: /* @__PURE__ */ jsx142(Plus3, { size: 16, strokeWidth: 3, "aria-hidden": true })
+                      children: /* @__PURE__ */ jsx144(Plus3, { size: 16, strokeWidth: 3, "aria-hidden": true })
                     }
                   )
                 ] })
               ]
             }
           ),
-          !errorMessage && optional && /* @__PURE__ */ jsx142(
+          !errorMessage && optional && /* @__PURE__ */ jsx144(
             "span",
             {
               "data-testid": `${name}-optional`,
@@ -11630,8 +12141,8 @@ var DashboardInput = React44.forwardRef(
               children: typeof optional === "string" ? optional : t("optional")
             }
           ),
-          !errorMessage && helperText && /* @__PURE__ */ jsx142("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
-          errorMessage && renderErrorMessage && /* @__PURE__ */ jsx142(
+          !errorMessage && helperText && /* @__PURE__ */ jsx144("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
+          errorMessage && renderErrorMessage && /* @__PURE__ */ jsx144(
             FieldErrorMessage,
             {
               id: errorId,
@@ -11650,11 +12161,11 @@ DashboardInput.displayName = "DashboardInput";
 
 // src/dashboard/select/Select.tsx
 import * as React48 from "react";
-import { useTranslation as useTranslation28 } from "react-i18next";
+import { useTranslation as useTranslation30 } from "react-i18next";
 
 // src/dashboard/_select-internals/SelectFieldShell.tsx
-import { useTranslation as useTranslation25 } from "react-i18next";
-import { jsx as jsx143, jsxs as jsxs90 } from "react/jsx-runtime";
+import { useTranslation as useTranslation27 } from "react-i18next";
+import { jsx as jsx145, jsxs as jsxs92 } from "react/jsx-runtime";
 function SelectFieldShell({
   containerRef,
   className,
@@ -11673,9 +12184,9 @@ function SelectFieldShell({
   onBlur,
   children
 }) {
-  const { t } = useTranslation25();
+  const { t } = useTranslation27();
   const wrapperWidth = toCssSize(width);
-  return /* @__PURE__ */ jsxs90(
+  return /* @__PURE__ */ jsxs92(
     "div",
     {
       ref: containerRef,
@@ -11688,9 +12199,9 @@ function SelectFieldShell({
       ),
       style: wrapperWidth ? { width: wrapperWidth } : void 0,
       children: [
-        name && /* @__PURE__ */ jsx143("input", { type: "hidden", name, value: hiddenValue ?? "" }),
-        /* @__PURE__ */ jsxs90("div", { className: "relative min-h-[68px] w-full", children: [
-          topLabel && /* @__PURE__ */ jsx143(
+        name && /* @__PURE__ */ jsx145("input", { type: "hidden", name, value: hiddenValue ?? "" }),
+        /* @__PURE__ */ jsxs92("div", { className: "relative min-h-[68px] w-full", children: [
+          topLabel && /* @__PURE__ */ jsx145(
             "label",
             {
               htmlFor: triggerId,
@@ -11698,10 +12209,10 @@ function SelectFieldShell({
               children: topLabel
             }
           ),
-          /* @__PURE__ */ jsx143("div", { className: "relative w-full", children }),
-          !errorMessage && optional && /* @__PURE__ */ jsx143("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : t("optional") }),
-          !errorMessage && helperText && /* @__PURE__ */ jsx143("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
-          errorMessage && !hideErrorMessage && /* @__PURE__ */ jsx143(
+          /* @__PURE__ */ jsx145("div", { className: "relative w-full", children }),
+          !errorMessage && optional && /* @__PURE__ */ jsx145("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : t("optional") }),
+          !errorMessage && helperText && /* @__PURE__ */ jsx145("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
+          errorMessage && !hideErrorMessage && /* @__PURE__ */ jsx145(
             FieldErrorMessage,
             {
               id: errorId,
@@ -11716,7 +12227,7 @@ function SelectFieldShell({
 }
 
 // src/dashboard/_select-internals/SelectMenu.tsx
-import { useTranslation as useTranslation26 } from "react-i18next";
+import { useTranslation as useTranslation28 } from "react-i18next";
 
 // src/dashboard/_select-internals/utils.ts
 function getOptionIndex(options, option) {
@@ -11747,7 +12258,7 @@ function isOptionSelected(option, selectedValue, selectedValues) {
 }
 
 // src/dashboard/_select-internals/SelectMenu.tsx
-import { jsx as jsx144, jsxs as jsxs91 } from "react/jsx-runtime";
+import { jsx as jsx146, jsxs as jsxs93 } from "react/jsx-runtime";
 function SelectMenu({
   id,
   options,
@@ -11769,10 +12280,10 @@ function SelectMenu({
   emptyContent,
   footer
 }) {
-  const { t } = useTranslation26();
+  const { t } = useTranslation28();
   const emptyMessage = noOptionsMessage?.() ?? t("no_options");
   const hasOptions = options.length > 0;
-  return /* @__PURE__ */ jsxs91(
+  return /* @__PURE__ */ jsxs93(
     "div",
     {
       id,
@@ -11789,13 +12300,13 @@ function SelectMenu({
         menuClassName
       ),
       children: [
-        !hasOptions && (emptyContent ?? /* @__PURE__ */ jsx144("div", { className: "mt-[10px] text-left text-[16px] text-[var(--chekin-color-brand-navy)]", children: emptyMessage })),
+        !hasOptions && (emptyContent ?? /* @__PURE__ */ jsx146("div", { className: "mt-[10px] text-left text-[16px] text-[var(--chekin-color-brand-navy)]", children: emptyMessage })),
         options.map((option, index) => {
           const isSelected = isOptionSelected(option, selectedValue, selectedValues);
           const isHighlighted = index === highlightedIndex;
           const optionKey = `${String(option.value)}-${index}`;
           const isOptionDisabled = Boolean(disabled || option.isDisabled);
-          return /* @__PURE__ */ jsxs91(
+          return /* @__PURE__ */ jsxs93(
             "button",
             {
               id: getOptionId2(index),
@@ -11818,8 +12329,8 @@ function SelectMenu({
                 isOptionDisabled && "cursor-default opacity-30"
               ),
               children: [
-                /* @__PURE__ */ jsx144("span", { className: "block break-words", children: option.label }),
-                option.description && /* @__PURE__ */ jsx144("span", { className: "ml-2 mt-[3px] shrink-0 text-[12px] font-bold italic text-[#777e91]", children: option.description })
+                /* @__PURE__ */ jsx146("span", { className: "block break-words", children: option.label }),
+                option.description && /* @__PURE__ */ jsx146("span", { className: "ml-2 mt-[3px] shrink-0 text-[12px] font-bold italic text-[#777e91]", children: option.description })
               ]
             },
             optionKey
@@ -11832,11 +12343,11 @@ function SelectMenu({
 }
 
 // src/dashboard/_select-internals/SelectMenuPanel.tsx
-import { useTranslation as useTranslation27 } from "react-i18next";
-import { jsx as jsx145, jsxs as jsxs92 } from "react/jsx-runtime";
+import { useTranslation as useTranslation29 } from "react-i18next";
+import { jsx as jsx147, jsxs as jsxs94 } from "react/jsx-runtime";
 function SelectMenuPanel({
   isOpen,
-  isMobile: isMobile2,
+  isMobile: isMobile3,
   onClose,
   title,
   description,
@@ -11845,29 +12356,29 @@ function SelectMenuPanel({
   drawerContentClassName,
   children
 }) {
-  const { t } = useTranslation27();
+  const { t } = useTranslation29();
   if (!isOpen) return null;
-  if (isMobile2) {
+  if (isMobile3) {
     const fallbackTitle = t("select_option");
     const titleText = typeof title === "string" || typeof title === "number" ? String(title) : fallbackTitle;
     const descriptionText = typeof description === "string" || typeof description === "number" ? String(description) : titleText;
-    return /* @__PURE__ */ jsx145(
+    return /* @__PURE__ */ jsx147(
       Drawer,
       {
         open: isOpen,
         onOpenChange: (next) => {
           if (!next) onClose();
         },
-        children: /* @__PURE__ */ jsxs92(
+        children: /* @__PURE__ */ jsxs94(
           DrawerContent,
           {
             onClose,
             lockScroll: false,
             className: cn("max-h-[calc(100vh-1rem)]", drawerClassName),
             children: [
-              /* @__PURE__ */ jsx145(DrawerTitle, { className: "sr-only", children: titleText }),
-              /* @__PURE__ */ jsx145(DrawerDescription, { className: "sr-only", children: descriptionText }),
-              /* @__PURE__ */ jsx145(
+              /* @__PURE__ */ jsx147(DrawerTitle, { className: "sr-only", children: titleText }),
+              /* @__PURE__ */ jsx147(DrawerDescription, { className: "sr-only", children: descriptionText }),
+              /* @__PURE__ */ jsx147(
                 "div",
                 {
                   className: cn(
@@ -11883,7 +12394,7 @@ function SelectMenuPanel({
       }
     );
   }
-  return /* @__PURE__ */ jsx145(
+  return /* @__PURE__ */ jsx147(
     "div",
     {
       className: cn(
@@ -11896,7 +12407,7 @@ function SelectMenuPanel({
 }
 
 // src/dashboard/_select-internals/SelectSearchInput.tsx
-import { jsx as jsx146 } from "react/jsx-runtime";
+import { jsx as jsx148 } from "react/jsx-runtime";
 function SelectSearchInput({
   inputRef,
   value,
@@ -11906,7 +12417,7 @@ function SelectSearchInput({
   onChange,
   onKeyDown
 }) {
-  return /* @__PURE__ */ jsx146("div", { className: "border-b border-[#f2f4f8] px-4 pb-2 pt-3", children: /* @__PURE__ */ jsx146(
+  return /* @__PURE__ */ jsx148("div", { className: "border-b border-[#f2f4f8] px-4 pb-2 pt-3", children: /* @__PURE__ */ jsx148(
     "input",
     {
       ref: inputRef,
@@ -11925,7 +12436,7 @@ function SelectSearchInput({
 
 // src/dashboard/_select-internals/SelectTrigger.tsx
 import { ChevronDown as ChevronDown2 } from "lucide-react";
-import { jsx as jsx147, jsxs as jsxs93 } from "react/jsx-runtime";
+import { jsx as jsx149, jsxs as jsxs95 } from "react/jsx-runtime";
 function SelectTrigger({
   triggerRef,
   triggerId,
@@ -11946,7 +12457,7 @@ function SelectTrigger({
   onBlur
 }) {
   const isEmpty = !hasValue;
-  return /* @__PURE__ */ jsxs93(
+  return /* @__PURE__ */ jsxs95(
     "button",
     {
       id: triggerId,
@@ -11970,10 +12481,10 @@ function SelectTrigger({
         loading && "cursor-progress"
       ),
       children: [
-        /* @__PURE__ */ jsx147("span", { id: valueId, className: "block min-w-0 flex-1 truncate text-left", children: valueLabel ?? (isOpen ? placeholder : null) }),
-        /* @__PURE__ */ jsxs93("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: [
-          loading && /* @__PURE__ */ jsx147(ThreeDotsLoader, { height: 18, width: 18 }),
-          /* @__PURE__ */ jsx147(
+        /* @__PURE__ */ jsx149("span", { id: valueId, className: "block min-w-0 flex-1 truncate text-left", children: valueLabel ?? (isOpen ? placeholder : null) }),
+        /* @__PURE__ */ jsxs95("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: [
+          loading && /* @__PURE__ */ jsx149(ThreeDotsLoader, { height: 18, width: 18 }),
+          /* @__PURE__ */ jsx149(
             ChevronDown2,
             {
               size: 16,
@@ -12028,7 +12539,7 @@ function useSelectIds({
 import * as React46 from "react";
 function useSelectMenuState({
   isBlocked,
-  isMobile: isMobile2,
+  isMobile: isMobile3,
   onOutsideClick
 }) {
   const containerRef = React46.useRef(null);
@@ -12049,7 +12560,7 @@ function useSelectMenuState({
       setIsOpen(false);
       onOutsideClick?.();
     },
-    isDisabled: !isOpen || isMobile2
+    isDisabled: !isOpen || isMobile3
   });
   React46.useEffect(() => {
     if (isBlocked) setIsOpen(false);
@@ -12074,7 +12585,7 @@ function useSelectSearch({
 }
 
 // src/dashboard/select/Select.tsx
-import { jsx as jsx148, jsxs as jsxs94 } from "react/jsx-runtime";
+import { jsx as jsx150, jsxs as jsxs96 } from "react/jsx-runtime";
 function DashboardSelectInternal({
   options = [],
   value,
@@ -12108,8 +12619,8 @@ function DashboardSelectInternal({
   const listRef = React48.useRef(null);
   const optionRefs = React48.useRef([]);
   const [highlightedIndex, setHighlightedIndex] = React48.useState(-1);
-  const isMobile2 = useIsMobile();
-  const { t } = useTranslation28();
+  const isMobile3 = useIsMobile();
+  const { t } = useTranslation30();
   const resolvedSearchPlaceholder = searchPlaceholder ?? t("search_placeholder");
   const hasValue = Boolean(value);
   const isBlocked = Boolean(disabled) || Boolean(loading);
@@ -12119,7 +12630,7 @@ function DashboardSelectInternal({
   const valueLabel = value ? getValueLabel?.(value) ?? String(value.label) : void 0;
   const { containerRef, isOpen, closeMenu, toggleMenu, setIsOpen } = useSelectMenuState({
     isBlocked,
-    isMobile: isMobile2
+    isMobile: isMobile3
   });
   const { triggerId, labelId, valueId, listboxId, describedErrorId, errorId, getOptionId: getOptionId2 } = useSelectIds({ name, hasValue, error, hideErrorMessage });
   const { searchValue, setSearchValue, filteredOptions } = useSelectSearch({
@@ -12198,7 +12709,7 @@ function DashboardSelectInternal({
       setIsOpen(false);
     }
   };
-  return /* @__PURE__ */ jsxs94(
+  return /* @__PURE__ */ jsxs96(
     SelectFieldShell,
     {
       containerRef,
@@ -12216,7 +12727,7 @@ function DashboardSelectInternal({
       name,
       hiddenValue: value ? String(value.value) : "",
       children: [
-        /* @__PURE__ */ jsx148(
+        /* @__PURE__ */ jsx150(
           SelectTrigger,
           {
             triggerRef,
@@ -12238,7 +12749,7 @@ function DashboardSelectInternal({
             onBlur
           }
         ),
-        /* @__PURE__ */ jsx148(
+        /* @__PURE__ */ jsx150(
           Fieldset,
           {
             isFocused: isOpen,
@@ -12255,17 +12766,17 @@ function DashboardSelectInternal({
             onClick: !isBlocked ? toggleMenu : void 0
           }
         ),
-        /* @__PURE__ */ jsxs94(
+        /* @__PURE__ */ jsxs96(
           SelectMenuPanel,
           {
             isOpen,
-            isMobile: isMobile2,
+            isMobile: isMobile3,
             onClose: closeMenu,
             title: typeof label === "string" ? label : void 0,
             className: dropdownClassName,
             drawerClassName,
             children: [
-              searchable && /* @__PURE__ */ jsx148(
+              searchable && /* @__PURE__ */ jsx150(
                 SelectSearchInput,
                 {
                   inputRef: searchInputRef,
@@ -12277,7 +12788,7 @@ function DashboardSelectInternal({
                   onKeyDown: handleSearchKeyDown
                 }
               ),
-              /* @__PURE__ */ jsx148(
+              /* @__PURE__ */ jsx150(
                 SelectMenu,
                 {
                   id: listboxId,
@@ -12312,22 +12823,22 @@ var DashboardSelect = React48.forwardRef(
 // src/dashboard/multi-select/MultiSelect.tsx
 import * as React49 from "react";
 import { SquareX as SquareX3 } from "lucide-react";
-import { useTranslation as useTranslation30 } from "react-i18next";
+import { useTranslation as useTranslation32 } from "react-i18next";
 
 // src/dashboard/multi-select/MultiSelectChip.tsx
 import { SquareX as SquareX2 } from "lucide-react";
-import { useTranslation as useTranslation29 } from "react-i18next";
-import { jsx as jsx149, jsxs as jsxs95 } from "react/jsx-runtime";
+import { useTranslation as useTranslation31 } from "react-i18next";
+import { jsx as jsx151, jsxs as jsxs97 } from "react/jsx-runtime";
 function MultiSelectChip({
   option,
   readOnly,
   onRemove
 }) {
-  const { t } = useTranslation29();
+  const { t } = useTranslation31();
   const labelText = typeof option.label === "string" ? option.label : String(option.value);
-  return /* @__PURE__ */ jsxs95("span", { className: "inline-flex items-center gap-2 rounded-[4px] border border-[#acacd5] bg-[#f0f0f8] py-[2px] pl-[10px] pr-1 text-[12px] font-medium text-[var(--chekin-color-brand-navy)]", children: [
-    /* @__PURE__ */ jsx149("span", { className: "whitespace-nowrap", children: option.label }),
-    !readOnly && /* @__PURE__ */ jsx149(
+  return /* @__PURE__ */ jsxs97("span", { className: "inline-flex items-center gap-2 rounded-[4px] border border-[#acacd5] bg-[#f0f0f8] py-[2px] pl-[10px] pr-1 text-[12px] font-medium text-[var(--chekin-color-brand-navy)]", children: [
+    /* @__PURE__ */ jsx151("span", { className: "whitespace-nowrap", children: option.label }),
+    !readOnly && /* @__PURE__ */ jsx151(
       "button",
       {
         type: "button",
@@ -12337,14 +12848,14 @@ function MultiSelectChip({
         },
         className: "flex h-[15px] w-[15px] items-center justify-center rounded-[3px] border-0 bg-transparent p-0 text-[#9696b9] hover:shadow-[0_3px_3px_#0f477734]",
         "aria-label": t("remove_item", { label: labelText }),
-        children: /* @__PURE__ */ jsx149(SquareX2, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
+        children: /* @__PURE__ */ jsx151(SquareX2, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
       }
     )
   ] });
 }
 
 // src/dashboard/multi-select/MultiSelect.tsx
-import { jsx as jsx150, jsxs as jsxs96 } from "react/jsx-runtime";
+import { jsx as jsx152, jsxs as jsxs98 } from "react/jsx-runtime";
 var isValueSelected = (selected, option) => selected.some((item) => item.value === option.value);
 function DashboardMultiSelectInternal({
   options = [],
@@ -12384,8 +12895,8 @@ function DashboardMultiSelectInternal({
   const optionRefs = React49.useRef([]);
   const [isFocused, setIsFocused] = React49.useState(false);
   const [highlightedIndex, setHighlightedIndex] = React49.useState(-1);
-  const isMobile2 = useIsMobile();
-  const { t } = useTranslation30();
+  const isMobile3 = useIsMobile();
+  const { t } = useTranslation32();
   const selectedValues = React49.useMemo(() => value ?? [], [value]);
   const hasValue = selectedValues.length > 0;
   const isEmpty = !hasValue;
@@ -12395,7 +12906,7 @@ function DashboardMultiSelectInternal({
   const errorMessage = typeof error === "string" ? error : void 0;
   const { containerRef, isOpen, closeMenu, setIsOpen } = useSelectMenuState({
     isBlocked,
-    isMobile: isMobile2,
+    isMobile: isMobile3,
     onOutsideClick: () => setIsFocused(false)
   });
   const { triggerId, labelId, valueId, listboxId, describedErrorId, errorId, getOptionId: getOptionId2 } = useSelectIds({ name, hasValue, error, hideErrorMessage });
@@ -12437,12 +12948,12 @@ function DashboardMultiSelectInternal({
     });
   }, [isOpen, filteredOptions]);
   React49.useEffect(() => {
-    if (!isOpen || !isMobile2) return;
+    if (!isOpen || !isMobile3) return;
     const frame = window.requestAnimationFrame(
       () => mobileSearchInputRef.current?.focus()
     );
     return () => window.cancelAnimationFrame(frame);
-  }, [isOpen, isMobile2]);
+  }, [isOpen, isMobile3]);
   const openMenu = () => {
     if (isBlocked) return;
     setIsOpen(true);
@@ -12539,7 +13050,7 @@ function DashboardMultiSelectInternal({
     setIsFocused(false);
     onBlur?.(event);
   };
-  return /* @__PURE__ */ jsxs96(
+  return /* @__PURE__ */ jsxs98(
     SelectFieldShell,
     {
       containerRef,
@@ -12558,7 +13069,7 @@ function DashboardMultiSelectInternal({
       hiddenValue: selectedValues.map((item) => String(item.value)).join(","),
       onBlur: handleInputBlur,
       children: [
-        /* @__PURE__ */ jsxs96(
+        /* @__PURE__ */ jsxs98(
           "div",
           {
             id: triggerId,
@@ -12581,7 +13092,7 @@ function DashboardMultiSelectInternal({
             ),
             children: [
               selectedValues.map(
-                (option) => renderChip ? /* @__PURE__ */ jsx150(React49.Fragment, { children: renderChip(option, () => removeOption(option)) }, String(option.value)) : /* @__PURE__ */ jsx150(
+                (option) => renderChip ? /* @__PURE__ */ jsx152(React49.Fragment, { children: renderChip(option, () => removeOption(option)) }, String(option.value)) : /* @__PURE__ */ jsx152(
                   MultiSelectChip,
                   {
                     option,
@@ -12591,7 +13102,7 @@ function DashboardMultiSelectInternal({
                   String(option.value)
                 )
               ),
-              /* @__PURE__ */ jsx150(
+              /* @__PURE__ */ jsx152(
                 "input",
                 {
                   ref: inputRef,
@@ -12620,9 +13131,9 @@ function DashboardMultiSelectInternal({
                   "aria-activedescendant": isOpen && highlightedIndex >= 0 ? getOptionId2(highlightedIndex) : void 0
                 }
               ),
-              /* @__PURE__ */ jsxs96("span", { className: "ml-auto flex items-center gap-2 pl-2 text-[var(--chekin-color-gray-2)]", children: [
-                loading && /* @__PURE__ */ jsx150(ThreeDotsLoader, { height: 18, width: 18 }),
-                hasValue && !readOnly && /* @__PURE__ */ jsx150(
+              /* @__PURE__ */ jsxs98("span", { className: "ml-auto flex items-center gap-2 pl-2 text-[var(--chekin-color-gray-2)]", children: [
+                loading && /* @__PURE__ */ jsx152(ThreeDotsLoader, { height: 18, width: 18 }),
+                hasValue && !readOnly && /* @__PURE__ */ jsx152(
                   "button",
                   {
                     type: "button",
@@ -12632,10 +13143,10 @@ function DashboardMultiSelectInternal({
                     },
                     className: "flex h-5 w-5 items-center justify-center rounded-[3px] border-0 bg-transparent p-0 text-[#9696b9] hover:shadow-[0_3px_3px_#0f477734]",
                     "aria-label": t("clear_all"),
-                    children: /* @__PURE__ */ jsx150(SquareX3, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
+                    children: /* @__PURE__ */ jsx152(SquareX3, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
                   }
                 ),
-                /* @__PURE__ */ jsx150(
+                /* @__PURE__ */ jsx152(
                   RotateArrow,
                   {
                     shouldRotate: isOpen,
@@ -12648,7 +13159,7 @@ function DashboardMultiSelectInternal({
             ]
           }
         ),
-        /* @__PURE__ */ jsx150(
+        /* @__PURE__ */ jsx152(
           Fieldset,
           {
             isFocused: isFocused || isOpen,
@@ -12666,11 +13177,11 @@ function DashboardMultiSelectInternal({
             onClick: handleContainerClick
           }
         ),
-        /* @__PURE__ */ jsxs96(
+        /* @__PURE__ */ jsxs98(
           SelectMenuPanel,
           {
             isOpen,
-            isMobile: isMobile2,
+            isMobile: isMobile3,
             onClose: () => {
               closeMenu();
               setIsFocused(false);
@@ -12679,7 +13190,7 @@ function DashboardMultiSelectInternal({
             className: dropdownClassName,
             drawerClassName,
             children: [
-              isMobile2 && /* @__PURE__ */ jsx150("div", { className: "border-b border-[#f2f4f8] px-4 pb-2 pt-3", children: /* @__PURE__ */ jsx150(
+              isMobile3 && /* @__PURE__ */ jsx152("div", { className: "border-b border-[#f2f4f8] px-4 pb-2 pt-3", children: /* @__PURE__ */ jsx152(
                 "input",
                 {
                   ref: mobileSearchInputRef,
@@ -12694,7 +13205,7 @@ function DashboardMultiSelectInternal({
                   className: "m-0 box-border h-9 w-full rounded-md border border-[var(--chekin-color-gray-3)] bg-white px-3 text-[16px] font-medium text-[var(--chekin-color-brand-navy)] outline-none transition-colors placeholder:text-[var(--chekin-color-gray-1)] focus:border-[var(--chekin-color-brand-blue)]"
                 }
               ) }),
-              /* @__PURE__ */ jsx150(
+              /* @__PURE__ */ jsx152(
                 SelectMenu,
                 {
                   id: listboxId,
@@ -12716,7 +13227,7 @@ function DashboardMultiSelectInternal({
                   isMulti: true
                 }
               ),
-              canCreateNewOption && /* @__PURE__ */ jsx150(
+              canCreateNewOption && /* @__PURE__ */ jsx152(
                 "button",
                 {
                   type: "button",
@@ -12738,20 +13249,20 @@ var DashboardMultiSelect = React49.forwardRef(
 
 // src/dashboard/creatable-multi-select/CreatableMultiSelect.tsx
 import * as React50 from "react";
-import { jsx as jsx151 } from "react/jsx-runtime";
+import { jsx as jsx153 } from "react/jsx-runtime";
 var DashboardCreatableMultiSelect = React50.forwardRef(
   function DashboardCreatableMultiSelect2(props, ref) {
-    return /* @__PURE__ */ jsx151(DashboardMultiSelect, { ref, ...props, isCreatable: true });
+    return /* @__PURE__ */ jsx153(DashboardMultiSelect, { ref, ...props, isCreatable: true });
   }
 );
 
 // src/dashboard/infinite-scroll-select/InfiniteScrollSelect.tsx
 import * as React51 from "react";
 import { useVirtualizer as useVirtualizer2 } from "@tanstack/react-virtual";
-import { useTranslation as useTranslation31 } from "react-i18next";
+import { useTranslation as useTranslation33 } from "react-i18next";
 
 // src/dashboard/infinite-scroll-select/InfiniteScrollList.tsx
-import { jsx as jsx152, jsxs as jsxs97 } from "react/jsx-runtime";
+import { jsx as jsx154, jsxs as jsxs99 } from "react/jsx-runtime";
 function InfiniteScrollList({
   scrollRef,
   listboxId,
@@ -12772,13 +13283,13 @@ function InfiniteScrollList({
   onHighlight
 }) {
   const virtualItems = virtualizer.getVirtualItems();
-  return /* @__PURE__ */ jsx152(
+  return /* @__PURE__ */ jsx154(
     "div",
     {
       ref: scrollRef,
       className: cn("overflow-y-auto", menuClassName),
       style: { height: `${height}px` },
-      children: /* @__PURE__ */ jsx152(
+      children: /* @__PURE__ */ jsx154(
         "div",
         {
           id: listboxId,
@@ -12795,7 +13306,7 @@ function InfiniteScrollList({
             const isSelected = !isLoaderRow && option ? option.value === value?.value : false;
             const isHighlighted = virtualItem.index === highlightedIndex;
             const isOptionDisabled = Boolean(isBlocked || option?.isDisabled);
-            return /* @__PURE__ */ jsx152(
+            return /* @__PURE__ */ jsx154(
               "div",
               {
                 "data-index": virtualItem.index,
@@ -12804,10 +13315,10 @@ function InfiniteScrollList({
                   height: `${virtualItem.size}px`,
                   transform: `translateY(${virtualItem.start}px)`
                 },
-                children: isLoaderRow ? /* @__PURE__ */ jsxs97("div", { className: "flex h-full items-center justify-center gap-2 px-4 text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: [
-                  /* @__PURE__ */ jsx152(ThreeDotsLoader, { height: 36, width: 36 }),
-                  /* @__PURE__ */ jsx152("span", { children: loadingMoreText })
-                ] }) : /* @__PURE__ */ jsxs97(
+                children: isLoaderRow ? /* @__PURE__ */ jsxs99("div", { className: "flex h-full items-center justify-center gap-2 px-4 text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: [
+                  /* @__PURE__ */ jsx154(ThreeDotsLoader, { height: 36, width: 36 }),
+                  /* @__PURE__ */ jsx154("span", { children: loadingMoreText })
+                ] }) : /* @__PURE__ */ jsxs99(
                   "button",
                   {
                     id: getOptionId2(virtualItem.index),
@@ -12826,8 +13337,8 @@ function InfiniteScrollList({
                       isOptionDisabled && "cursor-default opacity-30"
                     ),
                     children: [
-                      /* @__PURE__ */ jsx152("span", { className: "block break-words", children: option?.label }),
-                      option?.description && /* @__PURE__ */ jsx152("span", { className: "ml-2 mt-[3px] shrink-0 text-[12px] font-bold italic text-[#777e91]", children: option.description })
+                      /* @__PURE__ */ jsx154("span", { className: "block break-words", children: option?.label }),
+                      option?.description && /* @__PURE__ */ jsx154("span", { className: "ml-2 mt-[3px] shrink-0 text-[12px] font-bold italic text-[#777e91]", children: option.description })
                     ]
                   }
                 )
@@ -12842,7 +13353,7 @@ function InfiniteScrollList({
 }
 
 // src/dashboard/infinite-scroll-select/InfiniteScrollSelect.tsx
-import { jsx as jsx153, jsxs as jsxs98 } from "react/jsx-runtime";
+import { jsx as jsx155, jsxs as jsxs100 } from "react/jsx-runtime";
 var DEFAULT_ITEM_HEIGHT = 60;
 var DEFAULT_LIST_HEIGHT = 322;
 var DEFAULT_OVERSCAN = 5;
@@ -12890,8 +13401,8 @@ function DashboardInfiniteScrollSelectInternal({
   const previousHighlightedIndexRef = React51.useRef(-1);
   const lastLoadMoreOptionsLengthRef = React51.useRef(null);
   const [highlightedIndex, setHighlightedIndex] = React51.useState(-1);
-  const isMobile2 = useIsMobile();
-  const { t } = useTranslation31();
+  const isMobile3 = useIsMobile();
+  const { t } = useTranslation33();
   const resolvedSearchPlaceholder = searchPlaceholder ?? t("search_placeholder");
   const resolvedLoadingMoreText = loadingMoreText ?? t("loading_more");
   const hasValue = Boolean(value);
@@ -12902,7 +13413,7 @@ function DashboardInfiniteScrollSelectInternal({
   const valueLabel = value ? getValueLabel?.(value) ?? String(value.label) : void 0;
   const { containerRef, isOpen, closeMenu, toggleMenu, setIsOpen } = useSelectMenuState({
     isBlocked,
-    isMobile: isMobile2
+    isMobile: isMobile3
   });
   const { triggerId, labelId, valueId, listboxId, describedErrorId, errorId, getOptionId: getOptionId2 } = useSelectIds({ name, hasValue, error, hideErrorMessage });
   const { searchValue, setSearchValue, filteredOptions } = useSelectSearch({
@@ -13015,7 +13526,7 @@ function DashboardInfiniteScrollSelectInternal({
   const totalSize = virtualizer.getTotalSize();
   const measuredListHeight = Math.min(listHeight, Math.max(totalSize, itemHeight));
   const activeOptionId = highlightedIndex >= 0 ? getOptionId2(highlightedIndex) : void 0;
-  return /* @__PURE__ */ jsxs98(
+  return /* @__PURE__ */ jsxs100(
     SelectFieldShell,
     {
       containerRef,
@@ -13033,7 +13544,7 @@ function DashboardInfiniteScrollSelectInternal({
       name,
       hiddenValue: value ? String(value.value) : "",
       children: [
-        /* @__PURE__ */ jsx153(
+        /* @__PURE__ */ jsx155(
           SelectTrigger,
           {
             triggerRef,
@@ -13055,7 +13566,7 @@ function DashboardInfiniteScrollSelectInternal({
             onBlur
           }
         ),
-        /* @__PURE__ */ jsx153(
+        /* @__PURE__ */ jsx155(
           Fieldset,
           {
             isFocused: isOpen,
@@ -13072,17 +13583,17 @@ function DashboardInfiniteScrollSelectInternal({
             onClick: !isBlocked ? toggleMenu : void 0
           }
         ),
-        /* @__PURE__ */ jsxs98(
+        /* @__PURE__ */ jsxs100(
           SelectMenuPanel,
           {
             isOpen,
-            isMobile: isMobile2,
+            isMobile: isMobile3,
             onClose: closeMenu,
             title: typeof label === "string" ? label : void 0,
             className: dropdownClassName,
             drawerClassName,
             children: [
-              searchable && /* @__PURE__ */ jsx153(
+              searchable && /* @__PURE__ */ jsx155(
                 SelectSearchInput,
                 {
                   inputRef: searchInputRef,
@@ -13094,10 +13605,10 @@ function DashboardInfiniteScrollSelectInternal({
                   onKeyDown: handleSearchKeyDown
                 }
               ),
-              filteredOptions.length === 0 && isLoadingMore ? /* @__PURE__ */ jsxs98("div", { className: "flex items-center justify-center gap-2 px-4 py-[20px] text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: [
-                /* @__PURE__ */ jsx153(ThreeDotsLoader, { height: 18, width: 18 }),
-                /* @__PURE__ */ jsx153("span", { children: resolvedLoadingMoreText })
-              ] }) : filteredOptions.length === 0 ? /* @__PURE__ */ jsx153("div", { className: "px-4 py-[20px] text-left text-[16px] text-[var(--chekin-color-brand-navy)]", children: emptyMessage ?? t("no_options") }) : /* @__PURE__ */ jsx153(
+              filteredOptions.length === 0 && isLoadingMore ? /* @__PURE__ */ jsxs100("div", { className: "flex items-center justify-center gap-2 px-4 py-[20px] text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: [
+                /* @__PURE__ */ jsx155(ThreeDotsLoader, { height: 18, width: 18 }),
+                /* @__PURE__ */ jsx155("span", { children: resolvedLoadingMoreText })
+              ] }) : filteredOptions.length === 0 ? /* @__PURE__ */ jsx155("div", { className: "px-4 py-[20px] text-left text-[16px] text-[var(--chekin-color-brand-navy)]", children: emptyMessage ?? t("no_options") }) : /* @__PURE__ */ jsx155(
                 InfiniteScrollList,
                 {
                   scrollRef,
@@ -13132,8 +13643,8 @@ var DashboardInfiniteScrollSelect = React51.forwardRef(
 
 // src/dashboard/textarea/Textarea.tsx
 import * as React52 from "react";
-import { useTranslation as useTranslation32 } from "react-i18next";
-import { jsx as jsx154, jsxs as jsxs99 } from "react/jsx-runtime";
+import { useTranslation as useTranslation34 } from "react-i18next";
+import { jsx as jsx156, jsxs as jsxs101 } from "react/jsx-runtime";
 var LINE_HEIGHT = 20;
 var VERTICAL_PADDING = 32;
 function getEmptyState(empty, value, defaultValue) {
@@ -13169,7 +13680,7 @@ var DashboardTextarea = React52.forwardRef(
     const combinedRef = useCombinedRef(ref, innerRef);
     const reactId = React52.useId();
     const textareaId = id ?? name ?? `dash-textarea-${reactId}`;
-    const { t } = useTranslation32();
+    const { t } = useTranslation34();
     const isInvalid = Boolean(invalid || error);
     const isEmpty = getEmptyState(empty, value, defaultValue);
     const isBlocked = Boolean(disabled);
@@ -13190,7 +13701,7 @@ var DashboardTextarea = React52.forwardRef(
       resize();
       onInput?.(event);
     };
-    return /* @__PURE__ */ jsxs99(
+    return /* @__PURE__ */ jsxs101(
       "div",
       {
         className: cn(
@@ -13200,18 +13711,18 @@ var DashboardTextarea = React52.forwardRef(
           className
         ),
         children: [
-          label && /* @__PURE__ */ jsxs99(
+          label && /* @__PURE__ */ jsxs101(
             "label",
             {
               htmlFor: textareaId,
               className: "mb-2 flex select-none items-center text-[16px] font-medium text-[var(--chekin-color-brand-navy)]",
               children: [
                 label,
-                tooltip && /* @__PURE__ */ jsx154("span", { className: "ml-1 inline-flex", children: /* @__PURE__ */ jsx154(HelpTooltip, { content: tooltip, size: 16 }) })
+                tooltip && /* @__PURE__ */ jsx156("span", { className: "ml-1 inline-flex", children: /* @__PURE__ */ jsx156(HelpTooltip, { content: tooltip, size: 16 }) })
               ]
             }
           ),
-          /* @__PURE__ */ jsx154(
+          /* @__PURE__ */ jsx156(
             "textarea",
             {
               ref: combinedRef,
@@ -13240,7 +13751,7 @@ var DashboardTextarea = React52.forwardRef(
               ...textareaProps
             }
           ),
-          error && /* @__PURE__ */ jsx154(
+          error && /* @__PURE__ */ jsx156(
             FieldErrorMessage,
             {
               id: `${textareaId}-error`,
@@ -13248,8 +13759,8 @@ var DashboardTextarea = React52.forwardRef(
               className: "mt-[1px] text-[14px]"
             }
           ),
-          !error && optional && /* @__PURE__ */ jsx154("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : t("optional") }),
-          !error && helperText && /* @__PURE__ */ jsx154("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText })
+          !error && optional && /* @__PURE__ */ jsx156("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : t("optional") }),
+          !error && helperText && /* @__PURE__ */ jsx156("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText })
         ]
       }
     );
@@ -13259,7 +13770,7 @@ var DashboardTextarea = React52.forwardRef(
 // src/dashboard/datepicker/Datepicker.tsx
 import * as React54 from "react";
 import { ChevronDown as ChevronDown3 } from "lucide-react";
-import { useTranslation as useTranslation33 } from "react-i18next";
+import { useTranslation as useTranslation35 } from "react-i18next";
 
 // src/airbnb-fields/datepicker/useDatePickerWheel.ts
 import * as React53 from "react";
@@ -13683,7 +14194,7 @@ function useDatePickerWheel({
 }
 
 // src/airbnb-fields/datepicker/DatePickerWheelColumn.tsx
-import { jsx as jsx155, jsxs as jsxs100 } from "react/jsx-runtime";
+import { jsx as jsx157, jsxs as jsxs102 } from "react/jsx-runtime";
 var spacerHeight = DATE_PICKER_OPTION_HEIGHT * DATE_PICKER_WHEEL_BUFFER_OPTIONS;
 function AirbnbDatePickerWheelColumn({
   id,
@@ -13697,7 +14208,7 @@ function AirbnbDatePickerWheelColumn({
   onOptionSelect,
   column
 }) {
-  return /* @__PURE__ */ jsx155("div", { className: "relative z-10 min-w-0", children: /* @__PURE__ */ jsxs100(
+  return /* @__PURE__ */ jsx157("div", { className: "relative z-10 min-w-0", children: /* @__PURE__ */ jsxs102(
     "div",
     {
       id,
@@ -13714,14 +14225,14 @@ function AirbnbDatePickerWheelColumn({
         WebkitOverflowScrolling: "touch"
       },
       children: [
-        /* @__PURE__ */ jsx155("div", { style: { height: `${spacerHeight}px` } }),
+        /* @__PURE__ */ jsx157("div", { style: { height: `${spacerHeight}px` } }),
         items.map((item, index) => {
           const { style } = getWheelOptionStyles(
             index,
             scrollTop,
             DATE_PICKER_OPTION_HEIGHT
           );
-          return /* @__PURE__ */ jsx155(
+          return /* @__PURE__ */ jsx157(
             "button",
             {
               id: `${id}-option-${index}`,
@@ -13737,14 +14248,14 @@ function AirbnbDatePickerWheelColumn({
             `${column}-${item}-${index}`
           );
         }),
-        /* @__PURE__ */ jsx155("div", { style: { height: `${spacerHeight}px` } })
+        /* @__PURE__ */ jsx157("div", { style: { height: `${spacerHeight}px` } })
       ]
     }
   ) });
 }
 
 // src/airbnb-fields/datepicker/DatePickerContent.tsx
-import { jsx as jsx156, jsxs as jsxs101 } from "react/jsx-runtime";
+import { jsx as jsx158, jsxs as jsxs103 } from "react/jsx-runtime";
 function AirbnbDatePickerBody({
   baseId,
   label,
@@ -13766,19 +14277,19 @@ function AirbnbDatePickerBody({
   onOptionSelect,
   onDone
 }) {
-  return /* @__PURE__ */ jsxs101("div", { className: "px-6 pb-4 pt-1 bg-white", children: [
-    /* @__PURE__ */ jsxs101("div", { className: "relative overflow-hidden rounded-[24px]", children: [
-      /* @__PURE__ */ jsx156("div", { className: "pointer-events-none absolute inset-x-0 top-0 z-20 h-16 bg-gradient-to-b from-white via-white/80 to-transparent" }),
-      /* @__PURE__ */ jsx156("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 z-20 h-16 bg-gradient-to-t from-white via-white/80 to-transparent" }),
-      /* @__PURE__ */ jsx156(
+  return /* @__PURE__ */ jsxs103("div", { className: "px-6 pb-4 pt-1 bg-white", children: [
+    /* @__PURE__ */ jsxs103("div", { className: "relative overflow-hidden rounded-[24px]", children: [
+      /* @__PURE__ */ jsx158("div", { className: "pointer-events-none absolute inset-x-0 top-0 z-20 h-16 bg-gradient-to-b from-white via-white/80 to-transparent" }),
+      /* @__PURE__ */ jsx158("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 z-20 h-16 bg-gradient-to-t from-white via-white/80 to-transparent" }),
+      /* @__PURE__ */ jsx158(
         "div",
         {
           "aria-hidden": true,
           className: "pointer-events-none absolute inset-x-0 top-1/2 z-0 h-8 -translate-y-1/2 rounded-[12px] bg-black/[0.04]"
         }
       ),
-      /* @__PURE__ */ jsxs101("div", { className: "relative grid grid-cols-[1.35fr_0.7fr_1fr] gap-1", children: [
-        /* @__PURE__ */ jsx156(
+      /* @__PURE__ */ jsxs103("div", { className: "relative grid grid-cols-[1.35fr_0.7fr_1fr] gap-1", children: [
+        /* @__PURE__ */ jsx158(
           AirbnbDatePickerWheelColumn,
           {
             id: `${baseId}-month`,
@@ -13793,7 +14304,7 @@ function AirbnbDatePickerBody({
             onOptionSelect
           }
         ),
-        /* @__PURE__ */ jsx156(
+        /* @__PURE__ */ jsx158(
           AirbnbDatePickerWheelColumn,
           {
             id: `${baseId}-day`,
@@ -13808,7 +14319,7 @@ function AirbnbDatePickerBody({
             onOptionSelect
           }
         ),
-        /* @__PURE__ */ jsx156(
+        /* @__PURE__ */ jsx158(
           AirbnbDatePickerWheelColumn,
           {
             id: `${baseId}-year`,
@@ -13825,13 +14336,13 @@ function AirbnbDatePickerBody({
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsx156(Button, { type: "button", onClick: onDone, className: "mt-4 h-12 mb-8 w-full", children: doneLabel })
+    /* @__PURE__ */ jsx158(Button, { type: "button", onClick: onDone, className: "mt-4 h-12 mb-8 w-full", children: doneLabel })
   ] });
 }
 function AirbnbDatePickerContent({
   baseId,
   open,
-  isMobile: isMobile2,
+  isMobile: isMobile3,
   label,
   title,
   doneLabel,
@@ -13853,7 +14364,7 @@ function AirbnbDatePickerContent({
   onColumnKeyDown,
   onOptionSelect
 }) {
-  const body = /* @__PURE__ */ jsx156(
+  const body = /* @__PURE__ */ jsx158(
     AirbnbDatePickerBody,
     {
       baseId,
@@ -13877,28 +14388,28 @@ function AirbnbDatePickerContent({
       onDone
     }
   );
-  if (isMobile2) {
-    return /* @__PURE__ */ jsx156(Drawer, { open, onOpenChange, children: /* @__PURE__ */ jsxs101(
+  if (isMobile3) {
+    return /* @__PURE__ */ jsx158(Drawer, { open, onOpenChange, children: /* @__PURE__ */ jsxs103(
       DrawerContent,
       {
         onClose: () => onOpenChange(false),
         className: "rounded-none rounded-t-[32px] border-0 p-0",
         children: [
-          /* @__PURE__ */ jsx156(DrawerTitle, { className: "sr-only", children: title }),
-          /* @__PURE__ */ jsx156(DrawerDescription, { className: "sr-only", children: label }),
+          /* @__PURE__ */ jsx158(DrawerTitle, { className: "sr-only", children: title }),
+          /* @__PURE__ */ jsx158(DrawerDescription, { className: "sr-only", children: label }),
           body
         ]
       }
     ) });
   }
-  return /* @__PURE__ */ jsx156(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs101(
+  return /* @__PURE__ */ jsx158(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs103(
     DialogContent,
     {
       className: "max-w-[520px] rounded-[28px] border-0 p-0 shadow-xl",
       showCloseButton: false,
       children: [
-        /* @__PURE__ */ jsx156(DialogTitle, { className: "sr-only", children: title }),
-        /* @__PURE__ */ jsx156(DialogDescription, { className: "sr-only", children: label }),
+        /* @__PURE__ */ jsx158(DialogTitle, { className: "sr-only", children: title }),
+        /* @__PURE__ */ jsx158(DialogDescription, { className: "sr-only", children: label }),
         body
       ]
     }
@@ -13906,7 +14417,7 @@ function AirbnbDatePickerContent({
 }
 
 // src/dashboard/datepicker/Datepicker.tsx
-import { jsx as jsx157, jsxs as jsxs102 } from "react/jsx-runtime";
+import { jsx as jsx159, jsxs as jsxs104 } from "react/jsx-runtime";
 var MONTHS_IN_YEAR2 = 12;
 function getMonthLabels2(locale) {
   const formatter = new Intl.DateTimeFormat(locale, { month: "long" });
@@ -13983,7 +14494,7 @@ var DashboardDatepicker = React54.forwardRef(
     const yearId = `${baseId}-year`;
     const labelId = `${baseId}-label`;
     const errorId = `${baseId}-error`;
-    const { t } = useTranslation33();
+    const { t } = useTranslation35();
     const resolvedMonthLabels = React54.useMemo(
       () => monthLabels ?? getMonthLabels2(locale),
       [locale, monthLabels]
@@ -14006,7 +14517,7 @@ var DashboardDatepicker = React54.forwardRef(
     const [focusedField, setFocusedField] = React54.useState(null);
     const [monthInputValue, setMonthInputValue] = React54.useState("");
     const [monthHighlightIndex, setMonthHighlightIndex] = React54.useState(-1);
-    const isMobile2 = useIsMobile();
+    const isMobile3 = useIsMobile();
     React54.useImperativeHandle(ref, () => dayInputRef.current, []);
     React54.useEffect(() => {
       if (!isControlled) return;
@@ -14056,7 +14567,7 @@ var DashboardDatepicker = React54.forwardRef(
     useOutsideClick({
       elementRef: containerRef,
       onOutsideClick: () => setIsMonthOpen(false),
-      isDisabled: !isMonthOpen || isMobile2
+      isDisabled: !isMonthOpen || isMobile3
     });
     const emitChange = React54.useCallback(
       (nextDay, nextMonth, nextYear) => {
@@ -14165,7 +14676,7 @@ var DashboardDatepicker = React54.forwardRef(
       setIsWheelOpen(false);
       mobileTriggerRef.current?.focus();
     }, []);
-    const showCoverage = isEmpty && !isFocused && !isMobile2;
+    const showCoverage = isEmpty && !isFocused && !isMobile3;
     const wheel = useDatePickerWheel({
       isOpen: isWheelOpen,
       value: currentDate,
@@ -14189,7 +14700,7 @@ var DashboardDatepicker = React54.forwardRef(
     const triggerText = currentDate ? (formatValue ?? defaultFormatValue)(currentDate) : void 0;
     const monthListboxId = `${monthId}-listbox`;
     const getMonthOptionId = (index) => `${monthId}-option-${index}`;
-    const monthPanelContent = filteredMonths.length === 0 ? /* @__PURE__ */ jsx157("div", { className: "px-4 py-3 text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: t("no_options") }) : /* @__PURE__ */ jsx157(
+    const monthPanelContent = filteredMonths.length === 0 ? /* @__PURE__ */ jsx159("div", { className: "px-4 py-3 text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: t("no_options") }) : /* @__PURE__ */ jsx159(
       "ul",
       {
         ref: monthListRef,
@@ -14200,7 +14711,7 @@ var DashboardDatepicker = React54.forwardRef(
         children: filteredMonths.map((option, position) => {
           const isSelected = option.index === monthIndex;
           const isHighlighted = position === monthHighlightIndex;
-          return /* @__PURE__ */ jsx157("li", { role: "presentation", children: /* @__PURE__ */ jsx157(
+          return /* @__PURE__ */ jsx159("li", { role: "presentation", children: /* @__PURE__ */ jsx159(
             "button",
             {
               id: getMonthOptionId(option.index),
@@ -14227,7 +14738,7 @@ var DashboardDatepicker = React54.forwardRef(
       isBlocked && "cursor-not-allowed",
       loading && "cursor-progress"
     );
-    return /* @__PURE__ */ jsx157(
+    return /* @__PURE__ */ jsx159(
       "div",
       {
         ref: containerRef,
@@ -14238,9 +14749,9 @@ var DashboardDatepicker = React54.forwardRef(
           className
         ),
         style: wrapperWidth ? { width: wrapperWidth } : void 0,
-        children: /* @__PURE__ */ jsxs102("div", { className: "relative min-h-[68px] w-full", children: [
-          /* @__PURE__ */ jsxs102("div", { className: "relative w-full", children: [
-            isMobile2 ? /* @__PURE__ */ jsxs102(
+        children: /* @__PURE__ */ jsxs104("div", { className: "relative min-h-[68px] w-full", children: [
+          /* @__PURE__ */ jsxs104("div", { className: "relative w-full", children: [
+            isMobile3 ? /* @__PURE__ */ jsxs104(
               "button",
               {
                 ref: mobileTriggerRef,
@@ -14259,10 +14770,10 @@ var DashboardDatepicker = React54.forwardRef(
                   (isBlocked || readOnly) && "cursor-not-allowed"
                 ),
                 children: [
-                  /* @__PURE__ */ jsx157("span", { className: "block min-w-0 flex-1 truncate text-left", children: triggerText ?? (isWheelOpen ? mobilePlaceholder : null) }),
-                  /* @__PURE__ */ jsxs102("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: [
-                    loading && /* @__PURE__ */ jsx157(ThreeDotsLoader, { height: 18, width: 18 }),
-                    /* @__PURE__ */ jsx157(
+                  /* @__PURE__ */ jsx159("span", { className: "block min-w-0 flex-1 truncate text-left", children: triggerText ?? (isWheelOpen ? mobilePlaceholder : null) }),
+                  /* @__PURE__ */ jsxs104("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: [
+                    loading && /* @__PURE__ */ jsx159(ThreeDotsLoader, { height: 18, width: 18 }),
+                    /* @__PURE__ */ jsx159(
                       ChevronDown3,
                       {
                         size: 16,
@@ -14275,14 +14786,14 @@ var DashboardDatepicker = React54.forwardRef(
                   ] })
                 ]
               }
-            ) : /* @__PURE__ */ jsxs102(
+            ) : /* @__PURE__ */ jsxs104(
               "div",
               {
                 className: cn(
                   "relative box-border grid h-12 w-full grid-cols-[minmax(0,1fr)_minmax(96px,140px)_minmax(0,1fr)] items-center rounded-[6px] text-[16px] font-medium text-[var(--chekin-color-brand-navy)]"
                 ),
                 children: [
-                  /* @__PURE__ */ jsx157("div", { className: "flex h-full min-w-0 items-center px-2 sm:px-4", children: /* @__PURE__ */ jsx157(
+                  /* @__PURE__ */ jsx159("div", { className: "flex h-full min-w-0 items-center px-2 sm:px-4", children: /* @__PURE__ */ jsx159(
                     "input",
                     {
                       ref: dayInputRef,
@@ -14304,8 +14815,8 @@ var DashboardDatepicker = React54.forwardRef(
                       className: subInputClass
                     }
                   ) }),
-                  /* @__PURE__ */ jsxs102("div", { className: "relative flex h-full min-w-0 items-center gap-1 border-x border-[var(--chekin-color-gray-3)] px-2 sm:px-3", children: [
-                    /* @__PURE__ */ jsx157(
+                  /* @__PURE__ */ jsxs104("div", { className: "relative flex h-full min-w-0 items-center gap-1 border-x border-[var(--chekin-color-gray-3)] px-2 sm:px-3", children: [
+                    /* @__PURE__ */ jsx159(
                       "input",
                       {
                         ref: monthInputRef,
@@ -14348,7 +14859,7 @@ var DashboardDatepicker = React54.forwardRef(
                         )
                       }
                     ),
-                    /* @__PURE__ */ jsx157(
+                    /* @__PURE__ */ jsx159(
                       ChevronDown3,
                       {
                         size: 14,
@@ -14365,8 +14876,8 @@ var DashboardDatepicker = React54.forwardRef(
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ jsxs102("div", { className: "flex h-full min-w-0 items-center px-2 sm:px-4", children: [
-                    /* @__PURE__ */ jsx157(
+                  /* @__PURE__ */ jsxs104("div", { className: "flex h-full min-w-0 items-center px-2 sm:px-4", children: [
+                    /* @__PURE__ */ jsx159(
                       "input",
                       {
                         ref: yearInputRef,
@@ -14388,7 +14899,7 @@ var DashboardDatepicker = React54.forwardRef(
                         className: subInputClass
                       }
                     ),
-                    loading && /* @__PURE__ */ jsx157(
+                    loading && /* @__PURE__ */ jsx159(
                       ThreeDotsLoader,
                       {
                         height: 18,
@@ -14400,7 +14911,7 @@ var DashboardDatepicker = React54.forwardRef(
                 ]
               }
             ),
-            showCoverage && /* @__PURE__ */ jsx157(
+            showCoverage && /* @__PURE__ */ jsx159(
               "div",
               {
                 className: "absolute inset-0 cursor-text rounded-[6px] bg-[var(--chekin-color-surface-input-empty)]",
@@ -14408,7 +14919,7 @@ var DashboardDatepicker = React54.forwardRef(
                 "aria-hidden": "true"
               }
             ),
-            /* @__PURE__ */ jsx157(
+            /* @__PURE__ */ jsx159(
               Fieldset,
               {
                 isFocused,
@@ -14423,12 +14934,12 @@ var DashboardDatepicker = React54.forwardRef(
                 legend: label,
                 label,
                 tooltip,
-                onClick: isMobile2 ? openWheel : showCoverage ? focusDayInput : void 0
+                onClick: isMobile3 ? openWheel : showCoverage ? focusDayInput : void 0
               }
             ),
-            isMonthOpen && !isMobile2 && /* @__PURE__ */ jsx157("div", { className: "absolute left-0 right-0 top-full z-30 mx-auto mt-1 w-full max-w-[260px] overflow-hidden rounded-md bg-white shadow-[0_30px_30px_0_rgba(33,72,255,0.2)] sm:left-1/2 sm:right-auto sm:-translate-x-1/2", children: monthPanelContent })
+            isMonthOpen && !isMobile3 && /* @__PURE__ */ jsx159("div", { className: "absolute left-0 right-0 top-full z-30 mx-auto mt-1 w-full max-w-[260px] overflow-hidden rounded-md bg-white shadow-[0_30px_30px_0_rgba(33,72,255,0.2)] sm:left-1/2 sm:right-auto sm:-translate-x-1/2", children: monthPanelContent })
           ] }),
-          isMobile2 && /* @__PURE__ */ jsx157(
+          isMobile3 && /* @__PURE__ */ jsx159(
             AirbnbDatePickerContent,
             {
               baseId: wheelBaseId,
@@ -14456,9 +14967,9 @@ var DashboardDatepicker = React54.forwardRef(
               onOptionSelect: wheel.handleOptionSelect
             }
           ),
-          !error && optional && /* @__PURE__ */ jsx157("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : t("optional") }),
-          !error && helperText && /* @__PURE__ */ jsx157("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
-          error && !hideErrorMessage && /* @__PURE__ */ jsx157(
+          !error && optional && /* @__PURE__ */ jsx159("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : t("optional") }),
+          !error && helperText && /* @__PURE__ */ jsx159("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
+          error && !hideErrorMessage && /* @__PURE__ */ jsx159(
             FieldErrorMessage,
             {
               id: errorId,
@@ -14474,7 +14985,7 @@ var DashboardDatepicker = React54.forwardRef(
 
 // src/dashboard/date-range-picker/DateRangePicker.tsx
 import * as React58 from "react";
-import { useTranslation as useTranslation34 } from "react-i18next";
+import { useTranslation as useTranslation36 } from "react-i18next";
 
 // src/dashboard/date-range-picker/isDayBlocked.ts
 import { differenceInDays, isAfter, isBefore, isSameDay } from "date-fns";
@@ -14685,7 +15196,7 @@ function resolveRangeSelection({
 
 // src/dashboard/date-range-picker/components/DateRangeInputs.tsx
 import { CalendarDays, SquareX as SquareX4 } from "lucide-react";
-import { jsx as jsx158, jsxs as jsxs103 } from "react/jsx-runtime";
+import { jsx as jsx160, jsxs as jsxs105 } from "react/jsx-runtime";
 var DEFAULT_PLACEHOLDER = "00-00-0000";
 var inputBaseClass = "m-0 box-border h-full w-full min-w-0 border-0 bg-transparent text-[16px] font-medium leading-5 text-[var(--chekin-color-brand-navy)] outline-none placeholder:text-[var(--chekin-color-gray-1)]";
 var iconButtonClass = "flex h-5 w-5 items-center justify-center rounded-[3px] border-0 bg-transparent p-0 text-[#9696b9] outline-none hover:shadow-[0_3px_3px_#0f477734] disabled:cursor-not-allowed";
@@ -14727,7 +15238,7 @@ function DateRangeInputs({
     isBlocked && "cursor-not-allowed",
     loading && "cursor-progress"
   );
-  return /* @__PURE__ */ jsxs103(
+  return /* @__PURE__ */ jsxs105(
     "div",
     {
       className: cn(
@@ -14736,7 +15247,7 @@ function DateRangeInputs({
       ),
       onClick: onRowClick,
       children: [
-        /* @__PURE__ */ jsx158(
+        /* @__PURE__ */ jsx160(
           "input",
           {
             ref: fromInputRef,
@@ -14760,7 +15271,7 @@ function DateRangeInputs({
             )
           }
         ),
-        /* @__PURE__ */ jsx158(
+        /* @__PURE__ */ jsx160(
           "span",
           {
             "aria-hidden": "true",
@@ -14771,7 +15282,7 @@ function DateRangeInputs({
             children: "\u2192"
           }
         ),
-        /* @__PURE__ */ jsx158(
+        /* @__PURE__ */ jsx160(
           "input",
           {
             ref: toInputRef,
@@ -14795,9 +15306,9 @@ function DateRangeInputs({
             )
           }
         ),
-        /* @__PURE__ */ jsxs103("span", { className: "ml-auto flex shrink-0 items-center gap-2 pl-2 text-[var(--chekin-color-gray-2)]", children: [
-          loading && /* @__PURE__ */ jsx158(ThreeDotsLoader, { height: 18, width: 18 }),
-          !readOnly && !hideClearDates && !isEmpty && /* @__PURE__ */ jsx158(
+        /* @__PURE__ */ jsxs105("span", { className: "ml-auto flex shrink-0 items-center gap-2 pl-2 text-[var(--chekin-color-gray-2)]", children: [
+          loading && /* @__PURE__ */ jsx160(ThreeDotsLoader, { height: 18, width: 18 }),
+          !readOnly && !hideClearDates && !isEmpty && /* @__PURE__ */ jsx160(
             "button",
             {
               type: "button",
@@ -14805,10 +15316,10 @@ function DateRangeInputs({
               onClick: onReset,
               className: iconButtonClass,
               "aria-label": clearLabel,
-              children: /* @__PURE__ */ jsx158(SquareX4, { size: 16, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
+              children: /* @__PURE__ */ jsx160(SquareX4, { size: 16, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
             }
           ),
-          !readOnly && !hideCalendarIcon && /* @__PURE__ */ jsx158(
+          !readOnly && !hideCalendarIcon && /* @__PURE__ */ jsx160(
             "button",
             {
               type: "button",
@@ -14820,7 +15331,7 @@ function DateRangeInputs({
                 focusedInput !== null || isOpen ? "text-[var(--chekin-color-brand-blue)]" : "text-[var(--chekin-color-gray-2)]"
               ),
               "aria-label": openCalendarLabel,
-              children: /* @__PURE__ */ jsx158(CalendarDays, { size: 18 })
+              children: /* @__PURE__ */ jsx160(CalendarDays, { size: 18 })
             }
           )
         ] })
@@ -14830,7 +15341,7 @@ function DateRangeInputs({
 }
 
 // src/dashboard/date-range-picker/components/DateRangeCalendar.tsx
-import { jsx as jsx159 } from "react/jsx-runtime";
+import { jsx as jsx161 } from "react/jsx-runtime";
 function DateRangeCalendar({
   value,
   month,
@@ -14846,7 +15357,7 @@ function DateRangeCalendar({
   components,
   ...dayPickerProps
 }) {
-  return /* @__PURE__ */ jsx159(
+  return /* @__PURE__ */ jsx161(
     Calendar,
     {
       mode: "range",
@@ -14869,10 +15380,10 @@ function DateRangeCalendar({
 }
 
 // src/dashboard/date-range-picker/components/DateRangePopover.tsx
-import { jsx as jsx160, jsxs as jsxs104 } from "react/jsx-runtime";
+import { jsx as jsx162, jsxs as jsxs106 } from "react/jsx-runtime";
 function DateRangePopover({
   isOpen,
-  isMobile: isMobile2,
+  isMobile: isMobile3,
   openDirection,
   drawerTitle,
   drawerDescription,
@@ -14880,31 +15391,31 @@ function DateRangePopover({
   children
 }) {
   if (!isOpen) return null;
-  if (isMobile2) {
-    return /* @__PURE__ */ jsx160(
+  if (isMobile3) {
+    return /* @__PURE__ */ jsx162(
       Drawer,
       {
         open: isOpen,
         onOpenChange: (next) => {
           if (!next) onClose();
         },
-        children: /* @__PURE__ */ jsxs104(
+        children: /* @__PURE__ */ jsxs106(
           DrawerContent,
           {
             onClose,
             lockScroll: false,
             className: "max-h-[calc(100vh-1rem)]",
             children: [
-              /* @__PURE__ */ jsx160(DrawerTitle, { className: "sr-only", children: drawerTitle }),
-              /* @__PURE__ */ jsx160(DrawerDescription, { className: "sr-only", children: drawerDescription }),
-              /* @__PURE__ */ jsx160("div", { className: "flex items-start justify-center overflow-x-auto px-2 pb-4 pt-1", children })
+              /* @__PURE__ */ jsx162(DrawerTitle, { className: "sr-only", children: drawerTitle }),
+              /* @__PURE__ */ jsx162(DrawerDescription, { className: "sr-only", children: drawerDescription }),
+              /* @__PURE__ */ jsx162("div", { className: "flex items-start justify-center overflow-x-auto px-2 pb-4 pt-1", children })
             ]
           }
         )
       }
     );
   }
-  return /* @__PURE__ */ jsx160(
+  return /* @__PURE__ */ jsx162(
     "div",
     {
       className: cn(
@@ -14917,7 +15428,7 @@ function DateRangePopover({
 }
 
 // src/dashboard/date-range-picker/DateRangePicker.tsx
-import { jsx as jsx161, jsxs as jsxs105 } from "react/jsx-runtime";
+import { jsx as jsx163, jsxs as jsxs107 } from "react/jsx-runtime";
 var DashboardDateRangePicker = React58.forwardRef(function DashboardDateRangePicker2({
   label,
   value: externalValue,
@@ -14990,8 +15501,8 @@ var DashboardDateRangePicker = React58.forwardRef(function DashboardDateRangePic
   const [isOpen, setIsOpen] = React58.useState(false);
   const [focusedInput, setFocusedInput] = React58.useState(null);
   const [autoFocus, setAutoFocus] = React58.useState(false);
-  const isMobile2 = useIsMobile();
-  const { t } = useTranslation34();
+  const isMobile3 = useIsMobile();
+  const { t } = useTranslation36();
   const drawerTitle = label ?? t("select_dates");
   const drawerDescription = label ?? t("pick_date_range");
   const isEmpty = !value?.from && !value?.to;
@@ -14999,7 +15510,7 @@ var DashboardDateRangePicker = React58.forwardRef(function DashboardDateRangePic
   const isInvalid = Boolean(invalid || error);
   const isFocused = focusedInput !== null || isOpen;
   const wrapperWidth = toCssSize(width);
-  const monthsToShow = numberOfMonths ?? (isMobile2 ? 1 : 2);
+  const monthsToShow = numberOfMonths ?? (isMobile3 ? 1 : 2);
   const closeCalendar = React58.useCallback(() => {
     setIsOpen(false);
     setFocusedInput(null);
@@ -15013,7 +15524,7 @@ var DashboardDateRangePicker = React58.forwardRef(function DashboardDateRangePic
   useOutsideClick({
     elementRef: containerRef,
     onOutsideClick: closeCalendar,
-    isDisabled: !isOpen || isMobile2
+    isDisabled: !isOpen || isMobile3
   });
   const handlePickerChange = React58.useCallback(
     (range, pickedDate) => {
@@ -15078,7 +15589,7 @@ var DashboardDateRangePicker = React58.forwardRef(function DashboardDateRangePic
       syncMonthToValue
     ]
   );
-  return /* @__PURE__ */ jsx161(
+  return /* @__PURE__ */ jsx163(
     "div",
     {
       ref: containerRef,
@@ -15089,9 +15600,9 @@ var DashboardDateRangePicker = React58.forwardRef(function DashboardDateRangePic
         className
       ),
       style: wrapperWidth ? { width: wrapperWidth } : void 0,
-      children: /* @__PURE__ */ jsxs105("div", { className: "relative min-h-[68px] w-full", children: [
-        /* @__PURE__ */ jsxs105("div", { className: "relative w-full", children: [
-          /* @__PURE__ */ jsx161(
+      children: /* @__PURE__ */ jsxs107("div", { className: "relative min-h-[68px] w-full", children: [
+        /* @__PURE__ */ jsxs107("div", { className: "relative w-full", children: [
+          /* @__PURE__ */ jsx163(
             DateRangeInputs,
             {
               fromId,
@@ -15142,7 +15653,7 @@ var DashboardDateRangePicker = React58.forwardRef(function DashboardDateRangePic
               onToggleCalendar: toggleCalendar
             }
           ),
-          /* @__PURE__ */ jsx161(
+          /* @__PURE__ */ jsx163(
             Fieldset,
             {
               isFocused,
@@ -15159,16 +15670,16 @@ var DashboardDateRangePicker = React58.forwardRef(function DashboardDateRangePic
               tooltip
             }
           ),
-          /* @__PURE__ */ jsx161(
+          /* @__PURE__ */ jsx163(
             DateRangePopover,
             {
-              isOpen: isOpen && !isMobile2,
+              isOpen: isOpen && !isMobile3,
               isMobile: false,
               openDirection,
               drawerTitle,
               drawerDescription,
               onClose: closeCalendar,
-              children: /* @__PURE__ */ jsx161(
+              children: /* @__PURE__ */ jsx163(
                 DateRangeCalendar,
                 {
                   value,
@@ -15189,16 +15700,16 @@ var DashboardDateRangePicker = React58.forwardRef(function DashboardDateRangePic
             }
           )
         ] }),
-        /* @__PURE__ */ jsx161(
+        /* @__PURE__ */ jsx163(
           DateRangePopover,
           {
-            isOpen: isOpen && isMobile2,
+            isOpen: isOpen && isMobile3,
             isMobile: true,
             openDirection,
             drawerTitle,
             drawerDescription,
             onClose: closeCalendar,
-            children: /* @__PURE__ */ jsx161(
+            children: /* @__PURE__ */ jsx163(
               DateRangeCalendar,
               {
                 value,
@@ -15218,9 +15729,9 @@ var DashboardDateRangePicker = React58.forwardRef(function DashboardDateRangePic
             )
           }
         ),
-        !error && optional && /* @__PURE__ */ jsx161("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : t("optional") }),
-        !error && helperText && /* @__PURE__ */ jsx161("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
-        error && !hideErrorMessage && /* @__PURE__ */ jsx161(
+        !error && optional && /* @__PURE__ */ jsx163("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : t("optional") }),
+        !error && helperText && /* @__PURE__ */ jsx163("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
+        error && !hideErrorMessage && /* @__PURE__ */ jsx163(
           FieldErrorMessage,
           {
             id: errorId,
@@ -15235,7 +15746,7 @@ var DashboardDateRangePicker = React58.forwardRef(function DashboardDateRangePic
 
 // src/dashboard/date-range-picker/useValidateDates.ts
 import * as React59 from "react";
-import { useTranslation as useTranslation35 } from "react-i18next";
+import { useTranslation as useTranslation37 } from "react-i18next";
 import { differenceInDays as differenceInDays2, isAfter as isAfter2, isBefore as isBefore3 } from "date-fns";
 import {
   dateMatchModifiers,
@@ -15257,7 +15768,7 @@ function useValidateDates({
   onSuccess,
   displayFormat
 }) {
-  const { t } = useTranslation35();
+  const { t } = useTranslation37();
   const handleError = useEvent(onError);
   const handleSuccess = useEvent(onSuccess);
   const errorFormatter = React59.useMemo(
@@ -15316,7 +15827,7 @@ function useValidateDates({
 // src/dashboard/time-picker/TimePicker.tsx
 import * as React60 from "react";
 import { addDays, addHours, addMinutes, format, parse as parse2 } from "date-fns";
-import { jsx as jsx162 } from "react/jsx-runtime";
+import { jsx as jsx164 } from "react/jsx-runtime";
 var SHORT_TIME_FORMAT = "HH:mm";
 function parseTime(value) {
   return parse2(value, SHORT_TIME_FORMAT, /* @__PURE__ */ new Date());
@@ -15365,15 +15876,15 @@ var DashboardTimePicker = React60.forwardRef(
       const settings = timeSettings ?? FORMAT_SETTINGS[formatName];
       return buildOptions(settings);
     }, [formatName, options, timeSettings]);
-    return /* @__PURE__ */ jsx162(DashboardSelect, { ref, ...selectProps, options: resolvedOptions });
+    return /* @__PURE__ */ jsx164(DashboardSelect, { ref, ...selectProps, options: resolvedOptions });
   }
 );
 
 // src/dashboard/file-input/FileInput.tsx
 import * as React61 from "react";
 import { Download, Paperclip, SquareX as SquareX5 } from "lucide-react";
-import { useTranslation as useTranslation36 } from "react-i18next";
-import { jsx as jsx163, jsxs as jsxs106 } from "react/jsx-runtime";
+import { useTranslation as useTranslation38 } from "react-i18next";
+import { jsx as jsx165, jsxs as jsxs108 } from "react/jsx-runtime";
 function defaultDownload(url) {
   window.open(url, "_blank", "noopener,noreferrer");
 }
@@ -15402,7 +15913,7 @@ var DashboardFileInput = React61.forwardRef(
   }, ref) {
     const internalRef = React61.useRef(null);
     const inputRef = useCombinedRef(ref, internalRef);
-    const { t } = useTranslation36();
+    const { t } = useTranslation38();
     const resolvedLabel = label ?? t("upload_file");
     const resolvedDownloadLabel = downloadLabel ?? t("download_attachment");
     const reactId = React61.useId();
@@ -15431,7 +15942,7 @@ var DashboardFileInput = React61.forwardRef(
       event.stopPropagation();
       if (isUrl) onDownload(value);
     };
-    return /* @__PURE__ */ jsxs106(
+    return /* @__PURE__ */ jsxs108(
       "label",
       {
         htmlFor: inputId,
@@ -15444,7 +15955,7 @@ var DashboardFileInput = React61.forwardRef(
         ),
         style: wrapperWidth ? { width: wrapperWidth } : void 0,
         children: [
-          /* @__PURE__ */ jsx163(
+          /* @__PURE__ */ jsx165(
             "input",
             {
               ref: inputRef,
@@ -15460,9 +15971,9 @@ var DashboardFileInput = React61.forwardRef(
               "aria-invalid": isInvalid
             }
           ),
-          /* @__PURE__ */ jsxs106("div", { className: "relative min-h-[68px] w-full", children: [
-            /* @__PURE__ */ jsxs106("div", { className: "relative w-full", children: [
-              /* @__PURE__ */ jsxs106(
+          /* @__PURE__ */ jsxs108("div", { className: "relative min-h-[68px] w-full", children: [
+            /* @__PURE__ */ jsxs108("div", { className: "relative w-full", children: [
+              /* @__PURE__ */ jsxs108(
                 "div",
                 {
                   className: cn(
@@ -15470,25 +15981,25 @@ var DashboardFileInput = React61.forwardRef(
                     isEmpty && "bg-[var(--chekin-color-surface-input-empty)]"
                   ),
                   children: [
-                    hasFileChip ? /* @__PURE__ */ jsxs106(
+                    hasFileChip ? /* @__PURE__ */ jsxs108(
                       "div",
                       {
                         className: "inline-flex h-6 max-w-[85%] items-center rounded-[4px] border border-[#acacd5] bg-[#f0f0f8] pl-[10px] pr-1",
                         onClick: (event) => event.preventDefault(),
                         children: [
-                          isUrl ? /* @__PURE__ */ jsxs106(
+                          isUrl ? /* @__PURE__ */ jsxs108(
                             "button",
                             {
                               type: "button",
                               onClick: handleDownload,
                               className: "inline-flex items-center gap-[7px] truncate border-0 bg-transparent p-0 text-[14px] font-medium text-[var(--chekin-color-brand-navy)] outline-none",
                               children: [
-                                /* @__PURE__ */ jsx163("span", { className: "truncate", children: resolvedDownloadLabel }),
-                                /* @__PURE__ */ jsx163(Download, { size: 15 })
+                                /* @__PURE__ */ jsx165("span", { className: "truncate", children: resolvedDownloadLabel }),
+                                /* @__PURE__ */ jsx165(Download, { size: 15 })
                               ]
                             }
-                          ) : /* @__PURE__ */ jsx163("span", { className: "truncate text-[14px] font-medium text-[var(--chekin-color-brand-navy)]", children: value.name }),
-                          /* @__PURE__ */ jsx163(
+                          ) : /* @__PURE__ */ jsx165("span", { className: "truncate text-[14px] font-medium text-[var(--chekin-color-brand-navy)]", children: value.name }),
+                          /* @__PURE__ */ jsx165(
                             "button",
                             {
                               type: "button",
@@ -15496,20 +16007,20 @@ var DashboardFileInput = React61.forwardRef(
                               onClick: handleClear,
                               className: "ml-2 flex h-[15px] w-[15px] items-center justify-center rounded-[3px] border-0 bg-transparent p-0 text-[#9696b9] outline-none hover:shadow-[0_3px_3px_#0f477734]",
                               "aria-label": t("remove_file"),
-                              children: /* @__PURE__ */ jsx163(SquareX5, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
+                              children: /* @__PURE__ */ jsx165(SquareX5, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
                             }
                           )
                         ]
                       }
-                    ) : /* @__PURE__ */ jsx163("span", { className: "block min-w-0 flex-1 truncate text-left text-[var(--chekin-color-gray-1)]", children: placeholder ?? "" }),
-                    /* @__PURE__ */ jsxs106("span", { className: "ml-auto flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: [
-                      loading && /* @__PURE__ */ jsx163(ThreeDotsLoader, { height: 18, width: 18 }),
-                      /* @__PURE__ */ jsx163(Paperclip, { size: 20 })
+                    ) : /* @__PURE__ */ jsx165("span", { className: "block min-w-0 flex-1 truncate text-left text-[var(--chekin-color-gray-1)]", children: placeholder ?? "" }),
+                    /* @__PURE__ */ jsxs108("span", { className: "ml-auto flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: [
+                      loading && /* @__PURE__ */ jsx165(ThreeDotsLoader, { height: 18, width: 18 }),
+                      /* @__PURE__ */ jsx165(Paperclip, { size: 20 })
                     ] })
                   ]
                 }
               ),
-              /* @__PURE__ */ jsx163(
+              /* @__PURE__ */ jsx165(
                 Fieldset,
                 {
                   isFocused: false,
@@ -15527,9 +16038,9 @@ var DashboardFileInput = React61.forwardRef(
                 }
               )
             ] }),
-            !error && optional && /* @__PURE__ */ jsx163("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : t("optional") }),
-            !error && helperText && /* @__PURE__ */ jsx163("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
-            error && !hideErrorMessage && /* @__PURE__ */ jsx163(
+            !error && optional && /* @__PURE__ */ jsx165("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : t("optional") }),
+            !error && helperText && /* @__PURE__ */ jsx165("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
+            error && !hideErrorMessage && /* @__PURE__ */ jsx165(
               FieldErrorMessage,
               {
                 id: errorId,
@@ -15546,7 +16057,7 @@ var DashboardFileInput = React61.forwardRef(
 
 // src/dashboard/select-icons-box/SelectIconsBox.tsx
 import * as React62 from "react";
-import { jsx as jsx164, jsxs as jsxs107 } from "react/jsx-runtime";
+import { jsx as jsx166, jsxs as jsxs109 } from "react/jsx-runtime";
 function DashboardSelectIconsBox({
   children,
   icons,
@@ -15582,7 +16093,7 @@ function DashboardSelectIconsBox({
     onSelect(iconName);
     setOpen(false);
   };
-  return /* @__PURE__ */ jsxs107(
+  return /* @__PURE__ */ jsxs109(
     "div",
     {
       ref: containerRef,
@@ -15590,7 +16101,7 @@ function DashboardSelectIconsBox({
       className: cn("relative inline-block", className),
       children: [
         children,
-        isOpen && /* @__PURE__ */ jsx164(
+        isOpen && /* @__PURE__ */ jsx166(
           "div",
           {
             className: cn(
@@ -15601,7 +16112,7 @@ function DashboardSelectIconsBox({
               boxClassName
             ),
             style: { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` },
-            children: icons.map((iconName) => /* @__PURE__ */ jsx164(
+            children: icons.map((iconName) => /* @__PURE__ */ jsx166(
               "button",
               {
                 type: "button",
@@ -15682,14 +16193,14 @@ function getErrorMessage(error) {
 
 // src/lib/toastResponseError.tsx
 import i18next from "i18next";
-import { jsx as jsx165, jsxs as jsxs108 } from "react/jsx-runtime";
+import { jsx as jsx167, jsxs as jsxs110 } from "react/jsx-runtime";
 function addSupportEmailToMessage(message, prefixText) {
   if (typeof message !== "string") {
     return message;
   }
   const builtMessage = `${prefixText ? `${prefixText} ` : ""}${message}`;
-  return /* @__PURE__ */ jsxs108("div", { children: [
-    /* @__PURE__ */ jsx165("div", { children: builtMessage }),
+  return /* @__PURE__ */ jsxs110("div", { children: [
+    /* @__PURE__ */ jsx167("div", { children: builtMessage }),
     i18next.t("reach_us_at_email")
   ] });
 }
@@ -15704,13 +16215,13 @@ function toastResponseError(error, options = {}) {
 }
 
 // src/legacy-fields/textarea/Textarea.tsx
-import { forwardRef as forwardRef67, useId as useId15 } from "react";
-import { jsx as jsx166, jsxs as jsxs109 } from "react/jsx-runtime";
-var LegacyTextarea = forwardRef67(
+import { forwardRef as forwardRef68, useId as useId15 } from "react";
+import { jsx as jsx168, jsxs as jsxs111 } from "react/jsx-runtime";
+var LegacyTextarea = forwardRef68(
   ({ className, textareaClassName, label, disabled, name, invalid, ...textareaProps }, ref) => {
     const inputId = useId15();
-    return /* @__PURE__ */ jsxs109("div", { className: cn("relative", className), children: [
-      /* @__PURE__ */ jsx166(
+    return /* @__PURE__ */ jsxs111("div", { className: cn("relative", className), children: [
+      /* @__PURE__ */ jsx168(
         "textarea",
         {
           ref,
@@ -15726,7 +16237,7 @@ var LegacyTextarea = forwardRef67(
           ...textareaProps
         }
       ),
-      label && /* @__PURE__ */ jsx166(
+      label && /* @__PURE__ */ jsx168(
         "label",
         {
           htmlFor: inputId,
@@ -15750,8 +16261,8 @@ import { Calendar as Calendar2 } from "lucide-react";
 // src/airbnb-fields/field-trigger/FieldTrigger.tsx
 import * as React63 from "react";
 import { Loader2 as Loader24 } from "lucide-react";
-import { useTranslation as useTranslation37 } from "react-i18next";
-import { Fragment as Fragment17, jsx as jsx167, jsxs as jsxs110 } from "react/jsx-runtime";
+import { useTranslation as useTranslation39 } from "react-i18next";
+import { Fragment as Fragment17, jsx as jsx169, jsxs as jsxs112 } from "react/jsx-runtime";
 var AirbnbFieldTrigger = React63.forwardRef(
   ({
     as = "button",
@@ -15783,20 +16294,20 @@ var AirbnbFieldTrigger = React63.forwardRef(
     onKeyDown,
     ...props
   }, ref) => {
-    const { t } = useTranslation37();
+    const { t } = useTranslation39();
     const hasValue = Boolean(valueText);
     const isRaised = hasValue || forceFloatingLabel;
     const optionalLabel = optional ? typeof optional === "string" ? optional : t("optional") : void 0;
     const visibleLabelText = labelText ?? label;
     const hasLabelMeta = Boolean(optionalLabel) || Boolean(tooltip);
-    const resolvedLabelText = visibleLabelText && hasLabelMeta ? /* @__PURE__ */ jsxs110("span", { className: "inline-flex max-w-full items-center gap-1.5 align-middle", children: [
-      /* @__PURE__ */ jsx167("span", { className: "min-w-0 truncate", children: visibleLabelText }),
-      optionalLabel && /* @__PURE__ */ jsxs110("span", { className: "shrink-0 text-[12px] relative top-[1px] font-normal leading-4 text-current opacity-70", children: [
+    const resolvedLabelText = visibleLabelText && hasLabelMeta ? /* @__PURE__ */ jsxs112("span", { className: "inline-flex max-w-full items-center gap-1.5 align-middle", children: [
+      /* @__PURE__ */ jsx169("span", { className: "min-w-0 truncate", children: visibleLabelText }),
+      optionalLabel && /* @__PURE__ */ jsxs112("span", { className: "shrink-0 text-[12px] relative top-[1px] font-normal leading-4 text-current opacity-70", children: [
         "(",
         optionalLabel,
         ")"
       ] }),
-      tooltip && /* @__PURE__ */ jsx167(
+      tooltip && /* @__PURE__ */ jsx169(
         HelpTooltip,
         {
           content: tooltip,
@@ -15812,9 +16323,9 @@ var AirbnbFieldTrigger = React63.forwardRef(
     const hasInvalidState = Boolean(error);
     const errorMessage = typeof error === "string" ? error : void 0;
     const isBlocked = Boolean(disabled) || Boolean(loading);
-    const resolvedTrailingAdornment = loading || trailingAdornment ? /* @__PURE__ */ jsxs110("span", { className: "flex items-center gap-2", children: [
+    const resolvedTrailingAdornment = loading || trailingAdornment ? /* @__PURE__ */ jsxs112("span", { className: "flex items-center gap-2", children: [
       trailingAdornment,
-      loading && /* @__PURE__ */ jsx167(
+      loading && /* @__PURE__ */ jsx169(
         Loader24,
         {
           "aria-hidden": "true",
@@ -15830,8 +16341,8 @@ var AirbnbFieldTrigger = React63.forwardRef(
       disabled ? "cursor-not-allowed opacity-50" : loading ? "cursor-progress" : isAirbnbVariant ? "cursor-pointer" : "cursor-text",
       className
     );
-    const sharedContent = /* @__PURE__ */ jsxs110(Fragment17, { children: [
-      /* @__PURE__ */ jsxs110(
+    const sharedContent = /* @__PURE__ */ jsxs112(Fragment17, { children: [
+      /* @__PURE__ */ jsxs112(
         "span",
         {
           className: cn(
@@ -15840,7 +16351,7 @@ var AirbnbFieldTrigger = React63.forwardRef(
             contentClassName
           ),
           children: [
-            /* @__PURE__ */ jsx167(
+            /* @__PURE__ */ jsx169(
               "span",
               {
                 id: labelId,
@@ -15853,7 +16364,7 @@ var AirbnbFieldTrigger = React63.forwardRef(
                 children: animatedLabel
               }
             ),
-            children ? children : hasValue ? /* @__PURE__ */ jsx167(
+            children ? children : hasValue ? /* @__PURE__ */ jsx169(
               "span",
               {
                 id: valueId,
@@ -15864,11 +16375,11 @@ var AirbnbFieldTrigger = React63.forwardRef(
                 ),
                 children: valueText
               }
-            ) : /* @__PURE__ */ jsx167("span", { id: helperTextId, className: "sr-only", children: placeholder ?? label })
+            ) : /* @__PURE__ */ jsx169("span", { id: helperTextId, className: "sr-only", children: placeholder ?? label })
           ]
         }
       ),
-      resolvedTrailingAdornment && /* @__PURE__ */ jsx167(
+      resolvedTrailingAdornment && /* @__PURE__ */ jsx169(
         "span",
         {
           "aria-hidden": "true",
@@ -15880,9 +16391,9 @@ var AirbnbFieldTrigger = React63.forwardRef(
         }
       )
     ] });
-    return /* @__PURE__ */ jsxs110("div", { className: "w-full", children: [
-      topLabel && /* @__PURE__ */ jsx167("p", { className: "mb-3 text-[16px] font-semibold leading-5 text-[#222222]", children: topLabel }),
-      as === "button" ? /* @__PURE__ */ jsx167(
+    return /* @__PURE__ */ jsxs112("div", { className: "w-full", children: [
+      topLabel && /* @__PURE__ */ jsx169("p", { className: "mb-3 text-[16px] font-semibold leading-5 text-[#222222]", children: topLabel }),
+      as === "button" ? /* @__PURE__ */ jsx169(
         "button",
         {
           id,
@@ -15899,7 +16410,7 @@ var AirbnbFieldTrigger = React63.forwardRef(
           ...props,
           children: sharedContent
         }
-      ) : /* @__PURE__ */ jsx167(
+      ) : /* @__PURE__ */ jsx169(
         "div",
         {
           id,
@@ -15916,14 +16427,14 @@ var AirbnbFieldTrigger = React63.forwardRef(
           children: sharedContent
         }
       ),
-      errorMessage && !hideErrorMessage && /* @__PURE__ */ jsx167(FieldErrorMessage, { id: errorId, message: errorMessage })
+      errorMessage && !hideErrorMessage && /* @__PURE__ */ jsx169(FieldErrorMessage, { id: errorId, message: errorMessage })
     ] });
   }
 );
 AirbnbFieldTrigger.displayName = "AirbnbFieldTrigger";
 
 // src/airbnb-fields/datepicker/DatePicker.tsx
-import { jsx as jsx168, jsxs as jsxs111 } from "react/jsx-runtime";
+import { jsx as jsx170, jsxs as jsxs113 } from "react/jsx-runtime";
 var DEFAULT_MIN_DATE = new Date(1920, 0, 1);
 var AirbnbDatePicker = React64.forwardRef(
   ({
@@ -15950,7 +16461,7 @@ var AirbnbDatePicker = React64.forwardRef(
     doneLabel = "Done",
     formatValue = formatDateValue
   }, ref) => {
-    const { isMatch: isMobile2 } = useScreenResize(DEVICE.mobileXL);
+    const { isMatch: isMobile3 } = useScreenResize(DEVICE.mobileXL);
     const [isOpen, setIsOpen] = React64.useState(false);
     const triggerId = React64.useId();
     const pickerId = React64.useId();
@@ -16040,8 +16551,8 @@ var AirbnbDatePicker = React64.forwardRef(
         setIsOpen(false);
       }
     }, [isBlocked]);
-    return /* @__PURE__ */ jsxs111("div", { className: cn("relative w-full max-w-[var(--max-field-width)]", className), children: [
-      name && /* @__PURE__ */ jsx168(
+    return /* @__PURE__ */ jsxs113("div", { className: cn("relative w-full max-w-[var(--max-field-width)]", className), children: [
+      name && /* @__PURE__ */ jsx170(
         "input",
         {
           type: "hidden",
@@ -16049,7 +16560,7 @@ var AirbnbDatePicker = React64.forwardRef(
           value: resolvedValue ? formatDateInputValue(resolvedValue) : ""
         }
       ),
-      /* @__PURE__ */ jsx168(
+      /* @__PURE__ */ jsx170(
         AirbnbFieldTrigger,
         {
           id: triggerId,
@@ -16076,15 +16587,15 @@ var AirbnbDatePicker = React64.forwardRef(
           onClick: handleTriggerClick,
           onKeyDown: handleTriggerKeyDown,
           onBlur,
-          trailingAdornment: /* @__PURE__ */ jsx168(Calendar2, { className: "h-5 w-5 text-[#1F1F1B]", strokeWidth: 2 })
+          trailingAdornment: /* @__PURE__ */ jsx170(Calendar2, { className: "h-5 w-5 text-[#1F1F1B]", strokeWidth: 2 })
         }
       ),
-      /* @__PURE__ */ jsx168(
+      /* @__PURE__ */ jsx170(
         AirbnbDatePickerContent,
         {
           baseId: pickerId,
           open: isOpen,
-          isMobile: isMobile2,
+          isMobile: isMobile3,
           label,
           title: mobileTitle ?? label,
           doneLabel,
@@ -16114,7 +16625,7 @@ AirbnbDatePicker.displayName = "AirbnbDatePicker";
 
 // src/airbnb-fields/input/Input.tsx
 import * as React65 from "react";
-import { jsx as jsx169 } from "react/jsx-runtime";
+import { jsx as jsx171 } from "react/jsx-runtime";
 var getInputValue = (value) => value != null ? String(value) : "";
 var AirbnbInput = React65.forwardRef(
   ({
@@ -16197,7 +16708,7 @@ var AirbnbInput = React65.forwardRef(
       setIsFocused(false);
       onBlur?.(event);
     };
-    return /* @__PURE__ */ jsx169("div", { className: cn("w-full max-w-[var(--max-field-width)]", wrapperClassName), children: /* @__PURE__ */ jsx169(
+    return /* @__PURE__ */ jsx171("div", { className: cn("w-full max-w-[var(--max-field-width)]", wrapperClassName), children: /* @__PURE__ */ jsx171(
       AirbnbFieldTrigger,
       {
         as: "div",
@@ -16229,7 +16740,7 @@ var AirbnbInput = React65.forwardRef(
         forceFloatingLabel: shouldShowLabel,
         forceLabelText: hasLabelMeta,
         hideErrorMessage: !renderErrorMessage,
-        children: /* @__PURE__ */ jsx169(
+        children: /* @__PURE__ */ jsx171(
           "input",
           {
             ...props,
@@ -16272,7 +16783,7 @@ import { ChevronDown as ChevronDown5 } from "lucide-react";
 import * as React70 from "react";
 
 // src/airbnb-fields/select/SelectDesktopMenu.tsx
-import { jsx as jsx170, jsxs as jsxs112 } from "react/jsx-runtime";
+import { jsx as jsx172, jsxs as jsxs114 } from "react/jsx-runtime";
 function AirbnbSelectDesktopMenu({
   id,
   options,
@@ -16291,7 +16802,7 @@ function AirbnbSelectDesktopMenu({
   noOptionsMessage
 }) {
   const emptyMessage = noOptionsMessage?.();
-  return /* @__PURE__ */ jsxs112(
+  return /* @__PURE__ */ jsxs114(
     "div",
     {
       id,
@@ -16304,12 +16815,12 @@ function AirbnbSelectDesktopMenu({
       onKeyDown,
       className: cn("max-h-[280px] overflow-y-auto p-2 outline-none", menuClassName),
       children: [
-        options.length === 0 && emptyMessage ? /* @__PURE__ */ jsx170("div", { className: "px-4 py-3 text-base leading-6 text-[#6C6C6C]", children: emptyMessage }) : null,
+        options.length === 0 && emptyMessage ? /* @__PURE__ */ jsx172("div", { className: "px-4 py-3 text-base leading-6 text-[#6C6C6C]", children: emptyMessage }) : null,
         options.map((option, index) => {
           const isSelected = selectedValue?.value === option.value;
           const isHighlighted = index === highlightedIndex;
           const optionKey = `${String(option.value)}-${index}`;
-          return /* @__PURE__ */ jsx170(
+          return /* @__PURE__ */ jsx172(
             "button",
             {
               id: getOptionId2(index),
@@ -16341,7 +16852,7 @@ function AirbnbSelectDesktopMenu({
 }
 
 // src/airbnb-fields/select/SelectDesktopContent.tsx
-import { jsx as jsx171 } from "react/jsx-runtime";
+import { jsx as jsx173 } from "react/jsx-runtime";
 function AirbnbSelectDesktopContent({
   isOpen,
   listboxId,
@@ -16362,14 +16873,14 @@ function AirbnbSelectDesktopContent({
   noOptionsMessage
 }) {
   if (!isOpen) return null;
-  return /* @__PURE__ */ jsx171(
+  return /* @__PURE__ */ jsx173(
     "div",
     {
       className: cn(
         "absolute left-0 right-0 top-[calc(100%+8px)] z-20 overflow-hidden rounded-[20px] border border-[#DEDAD2] bg-white shadow-[0_14px_30px_rgba(18,18,18,0.08)]",
         dropdownClassName
       ),
-      children: /* @__PURE__ */ jsx171(
+      children: /* @__PURE__ */ jsx173(
         AirbnbSelectDesktopMenu,
         {
           id: listboxId,
@@ -16467,7 +16978,7 @@ function getMobileOptionStyles(index, scrollTop) {
 }
 
 // src/airbnb-fields/select/SelectMobileWheel.tsx
-import { jsx as jsx172, jsxs as jsxs113 } from "react/jsx-runtime";
+import { jsx as jsx174, jsxs as jsxs115 } from "react/jsx-runtime";
 function AirbnbSelectMobileWheel({
   id,
   options,
@@ -16486,7 +16997,7 @@ function AirbnbSelectMobileWheel({
 }) {
   const spacerHeight2 = getWheelSpacerHeight();
   const emptyMessage = noOptionsMessage?.();
-  return /* @__PURE__ */ jsxs113(
+  return /* @__PURE__ */ jsxs115(
     "div",
     {
       id,
@@ -16498,10 +17009,10 @@ function AirbnbSelectMobileWheel({
       onKeyDown,
       className: cn("relative overflow-hidden outline-none", menuClassName),
       children: [
-        options.length === 0 && emptyMessage ? /* @__PURE__ */ jsx172("div", { className: "flex min-h-[160px] items-center justify-center px-4 text-center text-base leading-6 text-[#6C6C6C]", children: emptyMessage }) : null,
-        /* @__PURE__ */ jsx172("div", { className: "pointer-events-none absolute inset-x-0 top-0 h-16 bg-gradient-to-b from-white via-white/80 to-transparent" }),
-        /* @__PURE__ */ jsx172("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 h-16 bg-gradient-to-t from-white via-white/80 to-transparent" }),
-        /* @__PURE__ */ jsx172(
+        options.length === 0 && emptyMessage ? /* @__PURE__ */ jsx174("div", { className: "flex min-h-[160px] items-center justify-center px-4 text-center text-base leading-6 text-[#6C6C6C]", children: emptyMessage }) : null,
+        /* @__PURE__ */ jsx174("div", { className: "pointer-events-none absolute inset-x-0 top-0 h-16 bg-gradient-to-b from-white via-white/80 to-transparent" }),
+        /* @__PURE__ */ jsx174("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 h-16 bg-gradient-to-t from-white via-white/80 to-transparent" }),
+        /* @__PURE__ */ jsx174(
           "div",
           {
             "aria-hidden": true,
@@ -16511,7 +17022,7 @@ function AirbnbSelectMobileWheel({
             )
           }
         ),
-        /* @__PURE__ */ jsxs113(
+        /* @__PURE__ */ jsxs115(
           "div",
           {
             ref: listRef,
@@ -16526,11 +17037,11 @@ function AirbnbSelectMobileWheel({
               WebkitOverflowScrolling: "touch"
             },
             children: [
-              /* @__PURE__ */ jsx172("div", { style: { height: `${spacerHeight2}px` } }),
+              /* @__PURE__ */ jsx174("div", { style: { height: `${spacerHeight2}px` } }),
               options.map((option, index) => {
                 const { distance, style } = getMobileOptionStyles(index, scrollTop);
                 const optionKey = `${String(option.value)}-${index}`;
-                return /* @__PURE__ */ jsx172(
+                return /* @__PURE__ */ jsx174(
                   "button",
                   {
                     id: getOptionId2(index),
@@ -16551,7 +17062,7 @@ function AirbnbSelectMobileWheel({
                   optionKey
                 );
               }),
-              /* @__PURE__ */ jsx172("div", { style: { height: `${spacerHeight2}px` } })
+              /* @__PURE__ */ jsx174("div", { style: { height: `${spacerHeight2}px` } })
             ]
           }
         )
@@ -16561,7 +17072,7 @@ function AirbnbSelectMobileWheel({
 }
 
 // src/airbnb-fields/select/SelectMobileContent.tsx
-import { jsx as jsx173, jsxs as jsxs114 } from "react/jsx-runtime";
+import { jsx as jsx175, jsxs as jsxs116 } from "react/jsx-runtime";
 function AirbnbSelectMobileContent({
   open,
   onOpenChange,
@@ -16585,11 +17096,11 @@ function AirbnbSelectMobileContent({
   getOptionId: getOptionId2,
   noOptionsMessage
 }) {
-  return /* @__PURE__ */ jsx173(Drawer, { open, onOpenChange, children: /* @__PURE__ */ jsxs114(DrawerContent, { onClose, lockScroll: false, children: [
-    /* @__PURE__ */ jsx173(DrawerTitle, { className: "sr-only", children: mobileTitle ?? label }),
-    /* @__PURE__ */ jsx173(DrawerDescription, { className: "sr-only", children: label }),
-    /* @__PURE__ */ jsxs114("div", { className: "px-6 pb-4 pt-1", children: [
-      /* @__PURE__ */ jsx173(
+  return /* @__PURE__ */ jsx175(Drawer, { open, onOpenChange, children: /* @__PURE__ */ jsxs116(DrawerContent, { onClose, lockScroll: false, children: [
+    /* @__PURE__ */ jsx175(DrawerTitle, { className: "sr-only", children: mobileTitle ?? label }),
+    /* @__PURE__ */ jsx175(DrawerDescription, { className: "sr-only", children: label }),
+    /* @__PURE__ */ jsxs116("div", { className: "px-6 pb-4 pt-1", children: [
+      /* @__PURE__ */ jsx175(
         AirbnbSelectMobileWheel,
         {
           id: listboxId,
@@ -16608,7 +17119,7 @@ function AirbnbSelectMobileContent({
           noOptionsMessage
         }
       ),
-      /* @__PURE__ */ jsx173(Button, { type: "button", onClick: onDone, className: "mt-4 h-12 mb-8 w-full", children: doneLabel })
+      /* @__PURE__ */ jsx175(Button, { type: "button", onClick: onDone, className: "mt-4 h-12 mb-8 w-full", children: doneLabel })
     ] })
   ] }) });
 }
@@ -16616,7 +17127,7 @@ function AirbnbSelectMobileContent({
 // src/airbnb-fields/select/SelectTrigger.tsx
 import * as React66 from "react";
 import { ChevronDown as ChevronDown4 } from "lucide-react";
-import { jsx as jsx174 } from "react/jsx-runtime";
+import { jsx as jsx176 } from "react/jsx-runtime";
 var AirbnbSelectTrigger = React66.forwardRef(
   ({
     id,
@@ -16642,7 +17153,7 @@ var AirbnbSelectTrigger = React66.forwardRef(
     onKeyDown,
     onBlur
   }, ref) => {
-    return /* @__PURE__ */ jsx174(
+    return /* @__PURE__ */ jsx176(
       AirbnbFieldTrigger,
       {
         id,
@@ -16671,7 +17182,7 @@ var AirbnbSelectTrigger = React66.forwardRef(
         onClick,
         onKeyDown,
         onBlur,
-        trailingAdornment: /* @__PURE__ */ jsx174(
+        trailingAdornment: /* @__PURE__ */ jsx176(
           ChevronDown4,
           {
             className: open ? "h-6 w-6 rotate-180 text-[#1F1F1B] transition-transform" : "h-6 w-6 text-[#1F1F1B] transition-transform"
@@ -16686,7 +17197,7 @@ AirbnbSelectTrigger.displayName = "AirbnbSelectTrigger";
 // src/airbnb-fields/select/useDesktopSelect.ts
 import * as React67 from "react";
 function useDesktopSelect({
-  isMobile: isMobile2,
+  isMobile: isMobile3,
   isOpen,
   options,
   value,
@@ -16699,7 +17210,7 @@ function useDesktopSelect({
   const optionRefs = React67.useRef([]);
   const selectedIndex = getOptionIndex2(options, value);
   React67.useEffect(() => {
-    if (!isOpen || isMobile2) return;
+    if (!isOpen || isMobile3) return;
     setHighlightedIndex((currentIndex) => {
       if (currentIndex >= 0) {
         return currentIndex;
@@ -16712,13 +17223,13 @@ function useDesktopSelect({
     return () => {
       window.cancelAnimationFrame(frameId);
     };
-  }, [isMobile2, isOpen, options, selectedIndex]);
+  }, [isMobile3, isOpen, options, selectedIndex]);
   React67.useEffect(() => {
-    if (!isOpen || isMobile2 || highlightedIndex < 0) return;
+    if (!isOpen || isMobile3 || highlightedIndex < 0) return;
     optionRefs.current[highlightedIndex]?.scrollIntoView({
       block: "nearest"
     });
-  }, [highlightedIndex, isMobile2, isOpen]);
+  }, [highlightedIndex, isMobile3, isOpen]);
   React67.useEffect(() => {
     if (isOpen) return;
     setHighlightedIndex(-1);
@@ -16836,7 +17347,7 @@ function useDesktopSelect({
 
 // src/airbnb-fields/select/useMobileSelectWheel.ts
 import * as React68 from "react";
-function useMobileSelectWheel({ isMobile: isMobile2, isOpen, options, value, disabled }) {
+function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, disabled }) {
   const [pendingValue, setPendingValue] = React68.useState(
     value ?? null
   );
@@ -16891,14 +17402,14 @@ function useMobileSelectWheel({ isMobile: isMobile2, isOpen, options, value, dis
     setPendingValue(value ?? null);
   }, [value]);
   React68.useLayoutEffect(() => {
-    if (!isMobile2 || !isOpen) return;
+    if (!isMobile3 || !isOpen) return;
     const frameId = window.requestAnimationFrame(() => {
       syncScrollPosition(value ?? null, "instant");
     });
     return () => {
       window.cancelAnimationFrame(frameId);
     };
-  }, [isMobile2, isOpen, syncScrollPosition, value]);
+  }, [isMobile3, isOpen, syncScrollPosition, value]);
   const settleScroll = React68.useCallback(() => {
     if (!mobileListRef.current) return;
     const nextIndex = Math.round(mobileListRef.current.scrollTop / MOBILE_OPTION_HEIGHT);
@@ -17033,7 +17544,7 @@ function useSelectIds2({ name, hasValue, error, hideErrorMessage }) {
 }
 
 // src/airbnb-fields/select/Select.tsx
-import { jsx as jsx175, jsxs as jsxs115 } from "react/jsx-runtime";
+import { jsx as jsx177, jsxs as jsxs117 } from "react/jsx-runtime";
 var AirbnbSelect = React70.forwardRef(function AirbnbSelect2({
   options = [],
   value,
@@ -17060,7 +17571,7 @@ var AirbnbSelect = React70.forwardRef(function AirbnbSelect2({
   name,
   noOptionsMessage
 }, ref) {
-  const { isMatch: isMobile2 } = useScreenResize(DEVICE.mobileXL);
+  const { isMatch: isMobile3 } = useScreenResize(DEVICE.mobileXL);
   const [isOpen, setIsOpen] = React70.useState(false);
   const containerRef = React70.useRef(null);
   const hasValue = Boolean(value);
@@ -17091,7 +17602,7 @@ var AirbnbSelect = React70.forwardRef(function AirbnbSelect2({
     moveByStep,
     moveToBoundary
   } = useMobileSelectWheel({
-    isMobile: isMobile2,
+    isMobile: isMobile3,
     isOpen,
     options,
     value,
@@ -17108,7 +17619,7 @@ var AirbnbSelect = React70.forwardRef(function AirbnbSelect2({
     handleMenuKeyDown,
     handleTriggerKeyDown
   } = useDesktopSelect({
-    isMobile: isMobile2,
+    isMobile: isMobile3,
     isOpen,
     options,
     value,
@@ -17121,7 +17632,7 @@ var AirbnbSelect = React70.forwardRef(function AirbnbSelect2({
   useOutsideClick({
     elementRef: containerRef,
     onOutsideClick: () => setIsOpen(false),
-    isDisabled: !isOpen || isMobile2
+    isDisabled: !isOpen || isMobile3
   });
   React70.useEffect(() => {
     if (isBlocked) {
@@ -17164,14 +17675,14 @@ var AirbnbSelect = React70.forwardRef(function AirbnbSelect2({
     if (isBlocked) return;
     setIsOpen((prev) => {
       const nextOpen = !prev;
-      if (isMobile2) {
+      if (isMobile3) {
         syncPendingValue(value ?? null);
       }
       return nextOpen;
     });
-  }, [isBlocked, isMobile2, syncPendingValue, value]);
+  }, [isBlocked, isMobile3, syncPendingValue, value]);
   const handleRootTriggerKeyDown = (event) => {
-    if (isMobile2) {
+    if (isMobile3) {
       if (isBlocked) return;
       if (event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "Enter" || event.key === " ") {
         event.preventDefault();
@@ -17213,13 +17724,13 @@ var AirbnbSelect = React70.forwardRef(function AirbnbSelect2({
       handleMobileOpenChange(false);
     }
   };
-  return /* @__PURE__ */ jsxs115(
+  return /* @__PURE__ */ jsxs117(
     "div",
     {
       ref: containerRef,
       className: cn("relative w-full max-w-[var(--max-field-width)]", className),
       children: [
-        name && /* @__PURE__ */ jsx175("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
+        name && /* @__PURE__ */ jsx177("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
         renderTrigger ? renderTrigger({
           id: triggerId,
           open: isOpen,
@@ -17241,7 +17752,7 @@ var AirbnbSelect = React70.forwardRef(function AirbnbSelect2({
           onClick: handleTriggerClick,
           onKeyDown: handleRootTriggerKeyDown,
           onBlur
-        }) : /* @__PURE__ */ jsx175(
+        }) : /* @__PURE__ */ jsx177(
           AirbnbSelectTrigger,
           {
             id: triggerId,
@@ -17269,7 +17780,7 @@ var AirbnbSelect = React70.forwardRef(function AirbnbSelect2({
             onBlur
           }
         ),
-        isMobile2 ? /* @__PURE__ */ jsx175(
+        isMobile3 ? /* @__PURE__ */ jsx177(
           AirbnbSelectMobileContent,
           {
             open: isOpen,
@@ -17294,7 +17805,7 @@ var AirbnbSelect = React70.forwardRef(function AirbnbSelect2({
             getOptionId: getOptionId2,
             noOptionsMessage
           }
-        ) : /* @__PURE__ */ jsx175(
+        ) : /* @__PURE__ */ jsx177(
           AirbnbSelectDesktopContent,
           {
             isOpen,
@@ -17328,7 +17839,7 @@ var AirbnbSelect = React70.forwardRef(function AirbnbSelect2({
 });
 
 // src/airbnb-fields/phone-field/PhoneField.tsx
-import { jsx as jsx176, jsxs as jsxs116 } from "react/jsx-runtime";
+import { jsx as jsx178, jsxs as jsxs118 } from "react/jsx-runtime";
 function formatPhoneCodeOptionLabel(option) {
   const label = String(option.label);
   const value = String(option.value);
@@ -17375,9 +17886,9 @@ var AirbnbPhoneField = React71.forwardRef(
     const hasInvalidState = Boolean(error) || Boolean(invalid);
     const isBlocked = Boolean(disabled) || Boolean(loading);
     const isCodeBlocked = isBlocked || Boolean(codeReadOnly);
-    return /* @__PURE__ */ jsxs116("div", { className: cn("w-full max-w-[var(--max-field-width)]", className), children: [
-      name && /* @__PURE__ */ jsx176("input", { type: "hidden", name, value: combinedValue, disabled }),
-      codeName && /* @__PURE__ */ jsx176(
+    return /* @__PURE__ */ jsxs118("div", { className: cn("w-full max-w-[var(--max-field-width)]", className), children: [
+      name && /* @__PURE__ */ jsx178("input", { type: "hidden", name, value: combinedValue, disabled }),
+      codeName && /* @__PURE__ */ jsx178(
         "input",
         {
           type: "hidden",
@@ -17386,7 +17897,7 @@ var AirbnbPhoneField = React71.forwardRef(
           disabled
         }
       ),
-      numberName && /* @__PURE__ */ jsx176(
+      numberName && /* @__PURE__ */ jsx178(
         "input",
         {
           type: "hidden",
@@ -17395,7 +17906,7 @@ var AirbnbPhoneField = React71.forwardRef(
           disabled
         }
       ),
-      topLabel && /* @__PURE__ */ jsx176(
+      topLabel && /* @__PURE__ */ jsx178(
         "label",
         {
           htmlFor: inputId,
@@ -17403,8 +17914,8 @@ var AirbnbPhoneField = React71.forwardRef(
           children: topLabel
         }
       ),
-      /* @__PURE__ */ jsxs116("div", { className: "flex items-stretch", children: [
-        /* @__PURE__ */ jsx176(
+      /* @__PURE__ */ jsxs118("div", { className: "flex items-stretch", children: [
+        /* @__PURE__ */ jsx178(
           AirbnbSelect,
           {
             ref,
@@ -17435,7 +17946,7 @@ var AirbnbPhoneField = React71.forwardRef(
               onClick,
               onKeyDown,
               valueLabel
-            }) => /* @__PURE__ */ jsxs116(
+            }) => /* @__PURE__ */ jsxs118(
               "button",
               {
                 id,
@@ -17457,8 +17968,8 @@ var AirbnbPhoneField = React71.forwardRef(
                   triggerDisabled ? "cursor-not-allowed opacity-50" : triggerLoading ? "cursor-progress" : "cursor-pointer"
                 ),
                 children: [
-                  /* @__PURE__ */ jsx176("span", { children: valueLabel ?? codePlaceholder }),
-                  /* @__PURE__ */ jsx176(
+                  /* @__PURE__ */ jsx178("span", { children: valueLabel ?? codePlaceholder }),
+                  /* @__PURE__ */ jsx178(
                     ChevronDown5,
                     {
                       className: cn("h-5 w-5 transition-transform", open ? "rotate-180" : ""),
@@ -17470,7 +17981,7 @@ var AirbnbPhoneField = React71.forwardRef(
             )
           }
         ),
-        /* @__PURE__ */ jsx176(
+        /* @__PURE__ */ jsx178(
           AirbnbInput,
           {
             id: inputId,
@@ -17502,7 +18013,7 @@ var AirbnbPhoneField = React71.forwardRef(
           }
         )
       ] }),
-      error && /* @__PURE__ */ jsx176(FieldErrorMessage, { message: error })
+      error && /* @__PURE__ */ jsx178(FieldErrorMessage, { message: error })
     ] });
   }
 );
@@ -17512,8 +18023,8 @@ AirbnbPhoneField.displayName = "AirbnbPhoneField";
 import * as React72 from "react";
 import { ChevronDown as ChevronDown6, Search as Search3 } from "lucide-react";
 import { useVirtualizer as useVirtualizer3 } from "@tanstack/react-virtual";
-import { useCallback as useCallback46 } from "react";
-import { jsx as jsx177, jsxs as jsxs117 } from "react/jsx-runtime";
+import { useCallback as useCallback49 } from "react";
+import { jsx as jsx179, jsxs as jsxs119 } from "react/jsx-runtime";
 var ROW_HEIGHT = 48;
 var DESKTOP_LIST_HEIGHT = 280;
 var MOBILE_LIST_HEIGHT = 420;
@@ -17553,7 +18064,7 @@ var AirbnbSearchableSelectInternal = ({
   noOptionsMessage,
   loadingMessage
 }, ref) => {
-  const { isMatch: isMobile2 } = useScreenResize(DEVICE.mobileXL);
+  const { isMatch: isMobile3 } = useScreenResize(DEVICE.mobileXL);
   const reactId = React72.useId();
   const [open, setOpen] = React72.useState(false);
   const [internalSearchValue, setInternalSearchValue] = React72.useState("");
@@ -17588,10 +18099,10 @@ var AirbnbSearchableSelectInternal = ({
   useOutsideClick({
     elementRef: containerRef,
     onOutsideClick: () => closeSelect(),
-    isDisabled: !open || isMobile2
+    isDisabled: !open || isMobile3
   });
   const handleOnOpenChange = useEvent(onOpenChange);
-  const setSelectOpen = useCallback46(
+  const setSelectOpen = useCallback49(
     (nextOpen, options2) => {
       setOpen(nextOpen);
       handleOnOpenChange?.(nextOpen);
@@ -17682,7 +18193,7 @@ var AirbnbSearchableSelectInternal = ({
       }
     }
   }
-  const content = /* @__PURE__ */ jsx177(
+  const content = /* @__PURE__ */ jsx179(
     AirbnbSearchableSelectContent,
     {
       inputId: searchInputId,
@@ -17701,7 +18212,7 @@ var AirbnbSearchableSelectInternal = ({
       menuClassName,
       noOptionsMessage,
       loadingMessage,
-      height: isMobile2 ? MOBILE_LIST_HEIGHT : DESKTOP_LIST_HEIGHT,
+      height: isMobile3 ? MOBILE_LIST_HEIGHT : DESKTOP_LIST_HEIGHT,
       idPrefix: reactId,
       onSearchChange: handleSearchChange,
       onSearchKeyDown: handleSearchKeyDown,
@@ -17710,9 +18221,9 @@ var AirbnbSearchableSelectInternal = ({
     }
   );
   React72.useImperativeHandle(ref, () => triggerRef.current, []);
-  return /* @__PURE__ */ jsxs117("div", { ref: containerRef, className: cn("relative w-full max-w-[425px]", className), children: [
-    name && /* @__PURE__ */ jsx177("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
-    /* @__PURE__ */ jsx177(
+  return /* @__PURE__ */ jsxs119("div", { ref: containerRef, className: cn("relative w-full max-w-[425px]", className), children: [
+    name && /* @__PURE__ */ jsx179("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
+    /* @__PURE__ */ jsx179(
       AirbnbFieldTrigger,
       {
         id: `${reactId}-trigger`,
@@ -17747,7 +18258,7 @@ var AirbnbSearchableSelectInternal = ({
         },
         onKeyDown: handleTriggerKeyDown,
         onBlur,
-        trailingAdornment: /* @__PURE__ */ jsx177(
+        trailingAdornment: /* @__PURE__ */ jsx179(
           ChevronDown6,
           {
             className: cn(
@@ -17758,7 +18269,7 @@ var AirbnbSearchableSelectInternal = ({
         )
       }
     ),
-    isMobile2 ? /* @__PURE__ */ jsx177(
+    isMobile3 ? /* @__PURE__ */ jsx179(
       Drawer,
       {
         open,
@@ -17770,13 +18281,13 @@ var AirbnbSearchableSelectInternal = ({
           }
           closeSelect();
         },
-        children: /* @__PURE__ */ jsxs117(DrawerContent, { onClose: closeSelect, lockScroll: false, children: [
-          /* @__PURE__ */ jsx177(DrawerTitle, { className: "sr-only", children: mobileTitle ?? label }),
-          /* @__PURE__ */ jsx177(DrawerDescription, { className: "sr-only", children: label }),
-          /* @__PURE__ */ jsx177("div", { className: "px-5 pb-5 pt-1", children: content })
+        children: /* @__PURE__ */ jsxs119(DrawerContent, { onClose: closeSelect, lockScroll: false, children: [
+          /* @__PURE__ */ jsx179(DrawerTitle, { className: "sr-only", children: mobileTitle ?? label }),
+          /* @__PURE__ */ jsx179(DrawerDescription, { className: "sr-only", children: label }),
+          /* @__PURE__ */ jsx179("div", { className: "px-5 pb-5 pt-1", children: content })
         ] })
       }
-    ) : open ? /* @__PURE__ */ jsx177(
+    ) : open ? /* @__PURE__ */ jsx179(
       "div",
       {
         className: cn(
@@ -17843,16 +18354,16 @@ function AirbnbSearchableSelectContent({
       virtualizer.scrollToIndex(highlightedIndex, { align: "auto" });
     }
   }, [highlightedIndex, virtualizer]);
-  return /* @__PURE__ */ jsxs117("div", { className: "p-2", children: [
-    /* @__PURE__ */ jsxs117("div", { className: "relative mb-2", children: [
-      /* @__PURE__ */ jsx177(
+  return /* @__PURE__ */ jsxs119("div", { className: "p-2", children: [
+    /* @__PURE__ */ jsxs119("div", { className: "relative mb-2", children: [
+      /* @__PURE__ */ jsx179(
         Search3,
         {
           "aria-hidden": "true",
           className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 text-[#9696B9]"
         }
       ),
-      /* @__PURE__ */ jsx177(
+      /* @__PURE__ */ jsx179(
         "input",
         {
           id: inputId,
@@ -17871,7 +18382,7 @@ function AirbnbSearchableSelectContent({
         }
       )
     ] }),
-    loading && options.length === 0 ? /* @__PURE__ */ jsx177("div", { className: "px-4 py-5 text-center text-base leading-6 text-[#6C6C6C]", children: loadingText }) : options.length === 0 ? /* @__PURE__ */ jsx177("div", { className: "px-4 py-5 text-center text-base leading-6 text-[#6C6C6C]", children: emptyMessage }) : /* @__PURE__ */ jsx177(
+    loading && options.length === 0 ? /* @__PURE__ */ jsx179("div", { className: "px-4 py-5 text-center text-base leading-6 text-[#6C6C6C]", children: loadingText }) : options.length === 0 ? /* @__PURE__ */ jsx179("div", { className: "px-4 py-5 text-center text-base leading-6 text-[#6C6C6C]", children: emptyMessage }) : /* @__PURE__ */ jsx179(
       "div",
       {
         id: listboxId,
@@ -17880,7 +18391,7 @@ function AirbnbSearchableSelectContent({
         "aria-labelledby": labelId,
         className: cn("overflow-y-auto outline-none", menuClassName),
         style: { height: Math.min(height, rowCount * ROW_HEIGHT) },
-        children: /* @__PURE__ */ jsx177(
+        children: /* @__PURE__ */ jsx179(
           "div",
           {
             className: "relative w-full",
@@ -17888,7 +18399,7 @@ function AirbnbSearchableSelectContent({
             children: virtualItems.map((virtualItem) => {
               const option = options[virtualItem.index];
               if (!option) {
-                return /* @__PURE__ */ jsx177(
+                return /* @__PURE__ */ jsx179(
                   "div",
                   {
                     className: "absolute left-0 top-0 flex w-full items-center px-4 text-base leading-6 text-[#6C6C6C]",
@@ -17903,7 +18414,7 @@ function AirbnbSearchableSelectContent({
               }
               const isSelected = value?.value === option.value;
               const isHighlighted = virtualItem.index === highlightedIndex;
-              return /* @__PURE__ */ jsx177(
+              return /* @__PURE__ */ jsx179(
                 "button",
                 {
                   id: getOptionId(idPrefix, virtualItem.index),
@@ -17925,7 +18436,7 @@ function AirbnbSearchableSelectContent({
                     height: `${virtualItem.size}px`,
                     transform: `translateY(${virtualItem.start}px)`
                   },
-                  children: /* @__PURE__ */ jsx177("span", { className: "truncate text-center", children: String(option.label) })
+                  children: /* @__PURE__ */ jsx179("span", { className: "truncate text-center", children: String(option.label) })
                 },
                 `${String(option.value)}-${virtualItem.index}`
               );
@@ -17955,15 +18466,15 @@ function getNextEnabledIndex(options, startIndex, step) {
 
 // src/airbnb-fields/search-input/SearchInput.tsx
 import * as React73 from "react";
-import { useTranslation as useTranslation38 } from "react-i18next";
+import { useTranslation as useTranslation40 } from "react-i18next";
 import { Search as Search4, X as X10 } from "lucide-react";
-import { jsx as jsx178, jsxs as jsxs118 } from "react/jsx-runtime";
+import { jsx as jsx180, jsxs as jsxs120 } from "react/jsx-runtime";
 var AirbnbSearchInput = React73.forwardRef(({ onReset, placeholder, wrapperClassName, ...props }, ref) => {
-  const { t } = useTranslation38();
+  const { t } = useTranslation40();
   const placeholderText = placeholder || t("search_property") + "...";
-  return /* @__PURE__ */ jsxs118("div", { className: cn("input-wrapper relative", wrapperClassName), children: [
-    /* @__PURE__ */ jsx178(Search4, { className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 transform text-[#9696B9]" }),
-    /* @__PURE__ */ jsx178(
+  return /* @__PURE__ */ jsxs120("div", { className: cn("input-wrapper relative", wrapperClassName), children: [
+    /* @__PURE__ */ jsx180(Search4, { className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 transform text-[#9696B9]" }),
+    /* @__PURE__ */ jsx180(
       "input",
       {
         ...props,
@@ -17982,13 +18493,13 @@ var AirbnbSearchInput = React73.forwardRef(({ onReset, placeholder, wrapperClass
         )
       }
     ),
-    onReset && /* @__PURE__ */ jsx178(
+    onReset && /* @__PURE__ */ jsx180(
       Button,
       {
         variant: "ghost",
         onClick: onReset,
         className: "absolute right-0 top-1/2 h-5 w-5 -translate-y-1/2 transform text-[#9696B9]",
-        children: /* @__PURE__ */ jsx178(X10, { className: "h-5 w-5" })
+        children: /* @__PURE__ */ jsx180(X10, { className: "h-5 w-5" })
       }
     )
   ] });
@@ -18168,6 +18679,7 @@ export {
   LegacyTextarea,
   Link,
   LoadingBar,
+  MobileWebcam,
   Modal,
   ModalButton,
   ModalLoader,
@@ -18298,11 +18810,14 @@ export {
   buttonVariants,
   calendarClassNames,
   cn,
+  compressFile,
+  compressImage,
   copyToClipboard,
   createDisabledMatchers,
   emptyMediaVariants,
   formatDate,
   getErrorMessage,
+  getFileSizeMB,
   getScrollableAreaState,
   getSidebarState,
   isDayBlocked,