@chekinapp/ui 0.0.92 → 0.0.93

package/dist/index.cjs

@@ -203,6 +203,7 @@ __export(index_exports, {
   LegacyTextarea: () => LegacyTextarea,
   Link: () => Link,
   LoadingBar: () => LoadingBar,
+  MobileWebcam: () => MobileWebcam,
   Modal: () => Modal,
   ModalButton: () => ModalButton,
   ModalLoader: () => ModalLoader,
@@ -2105,6 +2106,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
 var import_jsx_runtime26 = require("react/jsx-runtime");
@@ -3035,7 +3055,7 @@ function useCombinedRef(...refs) {
 var import_react15 = require("react");
 var MOBILE_BREAKPOINT = 768;
 function useIsMobile({ breakpoint = MOBILE_BREAKPOINT } = {}) {
-  const [isMobile2, setIsMobile] = (0, import_react15.useState)(void 0);
+  const [isMobile3, setIsMobile] = (0, import_react15.useState)(void 0);
   (0, import_react15.useEffect)(() => {
     const mediaQuery = window.matchMedia(`(max-width: ${breakpoint - 1}px)`);
     const onChange = () => {
@@ -3047,7 +3067,7 @@ function useIsMobile({ breakpoint = MOBILE_BREAKPOINT } = {}) {
       mediaQuery.removeEventListener("change", onChange);
     };
   }, [breakpoint]);
-  return !!isMobile2;
+  return !!isMobile3;
 }
 
 // src/hooks/use-is-mounted.ts
@@ -5978,7 +5998,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"
@@ -8588,7 +8624,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;
@@ -8605,8 +8641,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)) {
@@ -8623,12 +8659,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__ */ (0, import_jsx_runtime107.jsx)(SidebarContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(TooltipProvider, { delayDuration: 0, children: /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
       "div",
@@ -8655,7 +8691,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__ */ (0, import_jsx_runtime107.jsx)(
         "div",
@@ -8670,7 +8706,7 @@ var Sidebar = React28.forwardRef(
         }
       );
     }
-    if (isMobile2) {
+    if (isMobile3) {
       return /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(Sheet, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime107.jsxs)(
         SheetContent,
         {
@@ -8741,7 +8777,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__ */ (0, import_jsx_runtime107.jsxs)(
     Button,
     {
@@ -8760,7 +8796,7 @@ var SidebarTrigger = React28.forwardRef(({ className, onClick, icon, ...props },
       },
       ...props,
       children: [
-        icon || (isMobile2 ? openMobile : open) ? icon || /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(import_lucide_react31.ArrowLeftFromLineIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(import_lucide_react31.ArrowRightFromLineIcon, {}),
+        icon || (isMobile3 ? openMobile : open) ? icon || /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(import_lucide_react31.ArrowLeftFromLineIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(import_lucide_react31.ArrowRightFromLineIcon, {}),
         /* @__PURE__ */ (0, import_jsx_runtime107.jsx)("span", { className: "sr-only", children: "Toggle Sidebar" })
       ]
     }
@@ -8980,7 +9016,7 @@ var SidebarMenuButton = React28.forwardRef(
     ...props
   }, ref) => {
     const Comp = asChild ? import_react_slot4.Slot : "button";
-    const { isMobile: isMobile2, state } = useSidebar();
+    const { isMobile: isMobile3, state } = useSidebar();
     const button = /* @__PURE__ */ (0, import_jsx_runtime107.jsx)(
       Comp,
       {
@@ -9004,7 +9040,7 @@ var SidebarMenuButton = React28.forwardRef(
         {
           side: "right",
           align: "center",
-          hidden: state !== "collapsed" || isMobile2,
+          hidden: state !== "collapsed" || isMobile3,
           className: "capitalize",
           variant: "dark",
           ...tooltipProps
@@ -9033,8 +9069,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__ */ (0, import_jsx_runtime107.jsx)(
       "div",
       {
@@ -11093,147 +11129,611 @@ function VideoPlayer({
 }
 
 // src/webcam/Webcam.tsx
-var import_react84 = require("react");
-var import_react_i18next23 = require("react-i18next");
-var import_react_device_detect = require("react-device-detect");
+var import_react85 = require("react");
+var import_react_device_detect3 = require("react-device-detect");
 var import_react_webcam = __toESM(require("react-webcam"), 1);
 
-// 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
-var import_jsx_runtime138 = require("react/jsx-runtime");
-var SCREENSHOT_FORMAT = "image/jpeg";
-var MEDIA_CONSTRAINTS = {
-  audio: false,
-  video: {
-    width: { ideal: 4096 },
-    height: { ideal: 2160 }
-  }
-};
+// src/webcam/useErrorHandler.ts
+var import_react84 = require("react");
+var import_react_i18next23 = require("react-i18next");
+var import_react_device_detect2 = require("react-device-detect");
+
+// src/webcam/utils.ts
+var import_react_device_detect = require("react-device-detect");
 var isMobileOrTablet = () => import_react_device_detect.isMobile || import_react_device_detect.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 = (0, import_react84.forwardRef)(
-  ({
-    onUserMedia,
-    onUserMediaError,
-    onException,
-    audio = false,
-    imageSmoothing = false,
-    screenshotQuality = 1,
-    videoConstraints,
-    className,
-    mirrored
-  }, ref) => {
-    const { t } = (0, import_react_i18next23.useTranslation)();
-    const isMounted = useIsMounted();
-    const [minScreenshotHeight, setMinScreenshotHeight] = (0, import_react84.useState)(
-      void 0
-    );
-    const [minScreenshotWidth, setMinScreenshotWidth] = (0, import_react84.useState)(
-      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: import_react_device_detect.isSafari ? { min: 320, ideal: 1920 } : { min: 320, ideal: 4096, max: 4096 },
+    height: import_react_device_detect.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 (import_react_device_detect.isSafari && !import_react_device_detect.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] = (0, import_react84.useState)(false);
-    const constraints = videoConstraints || getMobileOrDesktopVideoConstraints();
-    const isDisplayingMirrored = (0, import_react84.useMemo)(() => {
-      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]);
-    (0, import_react84.useEffect)(() => {
-      if (!import_react_device_detect.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 } = (0, import_react_i18next23.useTranslation)();
+  const handleError = useEvent(onError);
+  const handleUserMediaError = (0, import_react84.useCallback)(
+    (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"
+            )}`;
+            import_sonner2.toast.error(errorText);
+            break;
+          case "NotFoundError":
+            errorText = t("camera_errors.no_camera_device_found");
+            import_sonner2.toast.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 (import_react_device_detect2.isSafari) {
+              handleError({
+                title: errorText,
+                message: `${t("camera_errors.safari_camera_error")}. ${t(
+                  "camera_errors.try_chrome_or_firefox"
+                )}.`
+              });
+            } else {
+              import_sonner2.toast.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 = (0, import_react84.useCallback)(
-      (error) => {
-        if (isDOMException(error) && ["PermissionDeniedError", "NotAllowedError"].includes(error.name)) {
-          setIsCameraPermissionsDenied(true);
-        } else {
-          onException?.(error);
+    },
+    [handleError, t]
+  );
+  return { handleUserMediaError };
+}
+
+// src/webcam/Webcam.tsx
+var import_jsx_runtime138 = require("react/jsx-runtime");
+var SCREENSHOT_FORMAT = "image/jpeg";
+var mirroredTransformStyle = { transform: "rotateY(180deg)" };
+var Webcam = (0, import_react85.memo)(
+  (0, import_react85.forwardRef)(
+    ({
+      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] = (0, import_react85.useState)();
+      const [minScreenshotWidth, setMinScreenshotWidth] = (0, import_react85.useState)();
+      const [useReducedConstraints, setUseReducedConstraints] = (0, import_react85.useState)(false);
+      const [numberOfCameras, setNumberOfCameras] = (0, import_react85.useState)(0);
+      const constraints = (0, import_react85.useMemo)(() => {
+        if (videoConstraints) {
+          return videoConstraints;
         }
-        onUserMediaError?.();
-      },
-      [onUserMediaError, onException]
-    );
-    return /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(import_jsx_runtime138.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
+        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 = (0, import_react85.useRef)(null);
+      const scanAreaRef = (0, import_react85.useRef)(null);
+      const canvasRef = (0, import_react85.useRef)(null);
+      const containerRef = (0, import_react85.useRef)(null);
+      const { handleUserMediaError } = useErrorHandler({
+        onError: (errorDetails) => {
+          onDisabled?.(true);
+          onError(errorDetails);
+        }
+      });
+      const handleUserMediaErrorWithFallback = (0, import_react85.useCallback)(
+        (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)
+        );
+      };
+      (0, import_react85.useImperativeHandle)(
+        ref,
+        () => ({
+          takePhoto: handleTakePhoto,
+          numberOfCameras,
+          ...webcamRef.current
+        })
+      );
+      const handleUserMediaSuccess = (0, import_react85.useCallback)(
+        (stream) => {
+          if (!import_react_device_detect3.isMobile) {
+            const track = stream.getVideoTracks()[0];
+            const capabilities = !import_react_device_detect3.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__ */ (0, import_jsx_runtime138.jsxs)(
         "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__ */ (0, import_jsx_runtime138.jsx)(
-            import_react_webcam.default,
+          style: isMirroredInCSS ? mirroredTransformStyle : void 0,
+          children: [
+            !hideScanArea && /* @__PURE__ */ (0, import_jsx_runtime138.jsxs)(
+              "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__ */ (0, import_jsx_runtime138.jsxs)(import_jsx_runtime138.Fragment, { children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("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__ */ (0, import_jsx_runtime138.jsx)("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__ */ (0, import_jsx_runtime138.jsx)("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__ */ (0, import_jsx_runtime138.jsx)("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__ */ (0, import_jsx_runtime138.jsx)("canvas", { ref: canvasRef, className: "hidden" }),
+            isLoading ? /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("div", { className: "absolute inset-0 z-10 flex items-center justify-center bg-black/50", children: /* @__PURE__ */ (0, import_jsx_runtime138.jsx)("div", { className: "h-10 w-10 animate-spin rounded-full border-4 border-white/30 border-t-white" }) }) : /* @__PURE__ */ (0, import_jsx_runtime138.jsx)(
+              import_react_webcam.default,
+              {
+                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
+var import_lucide_react41 = require("lucide-react");
+var import_react87 = require("react");
+var import_react_dom = require("react-dom");
+var import_react_i18next25 = require("react-i18next");
+
+// src/mobile-webcam/DeviceCamera/DeviceCamera.tsx
+var import_react86 = require("react");
+var import_react_i18next24 = require("react-i18next");
+var import_jsx_runtime139 = require("react/jsx-runtime");
+function DeviceCamera({ onChange, facingMode, className }) {
+  const { t } = (0, import_react_i18next24.useTranslation)();
+  const handleNativeScreenshot = (0, import_react86.useCallback)(
+    (event) => {
+      const file = event.target.files?.[0];
+      onChange(file ? compressImage(file) : void 0);
+    },
+    [onChange]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)(
+    "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__ */ (0, import_jsx_runtime139.jsx)("div", { children: t("camera_errors.experiencing_camera_issues") }),
+        /* @__PURE__ */ (0, import_jsx_runtime139.jsxs)("label", { className: "text-[16px] font-semibold uppercase leading-6 text-[var(--text-button-color)]", children: [
+          t("open_devices_camera"),
+          /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
+            "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__ */ (0, import_jsx_runtime138.jsx)("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
+var import_jsx_runtime140 = require("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 = (0, import_react87.forwardRef)(
+  ({ onScreenshot, onBack, title, text, disabled, className, ...props }, ref) => {
+    const rootElement = getDocument()?.body;
+    const { t } = (0, import_react_i18next25.useTranslation)();
+    const handleNativeScreenshot = (0, import_react87.useCallback)(
+      (photo) => onScreenshot({ isNative: true, photo }),
+      [onScreenshot]
+    );
+    return (0, import_react_dom.createPortal)(
+      /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)("div", { className: "mobile-camera flex justify-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
+          "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__ */ (0, import_jsx_runtime140.jsx)(import_lucide_react41.ChevronLeft, { size: 32, strokeWidth: 3, className: "text-white" })
+          }
+        ),
+        title && /* @__PURE__ */ (0, import_jsx_runtime140.jsx)("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__ */ (0, import_jsx_runtime140.jsx)("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__ */ (0, import_jsx_runtime140.jsx)("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__ */ (0, import_jsx_runtime140.jsx)(
+          Webcam,
+          {
+            ref,
+            ...props,
+            className: cn(
+              className,
+              webcamClasses,
+              props.roundedScanArea ? roundedWebcamClasses : scanAreaClasses
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)("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__ */ (0, import_jsx_runtime140.jsx)(
+            "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__ */ (0, import_jsx_runtime140.jsx)(import_lucide_react41.Camera, { size: 26, className: "text-[var(--primary)]" })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
+            DeviceCamera,
+            {
+              onChange: handleNativeScreenshot,
+              facingMode: getAndMapFacingMode(props.additionalConstraints)
+            }
+          )
+        ] })
+      ] }),
+      rootElement
+    );
   }
 );
-Webcam.displayName = "Webcam";
+MobileWebcam.displayName = "MobileWebcam";
 
 // src/wide-button/WideButton.tsx
-var import_react85 = require("react");
-var import_jsx_runtime139 = require("react/jsx-runtime");
-var WideButton = (0, import_react85.forwardRef)(
-  ({ className, disabled, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime139.jsx)(
+var import_react88 = require("react");
+var import_jsx_runtime141 = require("react/jsx-runtime");
+var WideButton = (0, import_react88.forwardRef)(
+  ({ className, disabled, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
     Button,
     {
       ref,
@@ -11255,22 +11755,22 @@ WideButton.displayName = "WideButton";
 var React42 = __toESM(require("react"), 1);
 var DialogPrimitive2 = __toESM(require("@radix-ui/react-dialog"), 1);
 var import_react_draggable = __toESM(require("react-draggable"), 1);
-var import_jsx_runtime140 = require("react/jsx-runtime");
+var import_jsx_runtime142 = require("react/jsx-runtime");
 var DRAWER_CLOSE_THRESHOLD = 72;
 var DRAWER_MIN_OVERLAY_OPACITY = 0.1;
 function Drawer({ ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(DialogPrimitive2.Root, { "data-slot": "drawer", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(DialogPrimitive2.Root, { "data-slot": "drawer", ...props });
 }
 function DrawerTrigger({ ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(DialogPrimitive2.Trigger, { "data-slot": "drawer-trigger", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(DialogPrimitive2.Trigger, { "data-slot": "drawer-trigger", ...props });
 }
 function DrawerPortal({ ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(DialogPrimitive2.Portal, { "data-slot": "drawer-portal", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(DialogPrimitive2.Portal, { "data-slot": "drawer-portal", ...props });
 }
 function DrawerClose({ ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(DialogPrimitive2.Close, { "data-slot": "drawer-close", ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(DialogPrimitive2.Close, { "data-slot": "drawer-close", ...props });
 }
-var DrawerOverlay = React42.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
+var DrawerOverlay = React42.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
   DialogPrimitive2.Overlay,
   {
     ref,
@@ -11320,14 +11820,14 @@ var DrawerContent = React42.forwardRef(
       },
       [onClose]
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(DrawerPortal, { container: finalContainer, children: [
-      lockScroll ? /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime142.jsxs)(DrawerPortal, { container: finalContainer, children: [
+      lockScroll ? /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
         DrawerOverlay,
         {
           style: { opacity: overlayOpacity },
           onClick: closeOnOverlayClick ? onClose : void 0
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
+      ) : /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
         "div",
         {
           className: cn(DrawerOverlayClasses),
@@ -11335,7 +11835,7 @@ var DrawerContent = React42.forwardRef(
           onClick: closeOnOverlayClick ? onClose : void 0
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
         DialogPrimitive2.Content,
         {
           asChild: true,
@@ -11351,7 +11851,7 @@ var DrawerContent = React42.forwardRef(
             }
           },
           ...props,
-          children: /* @__PURE__ */ (0, import_jsx_runtime140.jsx)("div", { className: "fixed inset-x-0 bottom-0 top-auto z-50 outline-none", children: /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
+          children: /* @__PURE__ */ (0, import_jsx_runtime142.jsx)("div", { className: "fixed inset-x-0 bottom-0 top-auto z-50 outline-none", children: /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
             import_react_draggable.default,
             {
               axis: "y",
@@ -11362,7 +11862,7 @@ var DrawerContent = React42.forwardRef(
               onDrag: handleDrag,
               onStop: handleStop,
               position: { x: 0, y: dragOffsetY },
-              children: /* @__PURE__ */ (0, import_jsx_runtime140.jsxs)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime142.jsxs)(
                 "div",
                 {
                   ref: nodeRef,
@@ -11371,7 +11871,7 @@ var DrawerContent = React42.forwardRef(
                     className
                   ),
                   children: [
-                    showHandle && /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
+                    showHandle && /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
                       "div",
                       {
                         "data-drawer-handle": true,
@@ -11379,10 +11879,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__ */ (0, import_jsx_runtime140.jsx)("span", { className: "block h-1.5 w-12 rounded-full bg-[#D9D7D3]" })
+                        children: /* @__PURE__ */ (0, import_jsx_runtime142.jsx)("span", { className: "block h-1.5 w-12 rounded-full bg-[#D9D7D3]" })
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime140.jsx)("div", { className: "min-h-0 flex-1 overflow-y-auto", children })
+                    /* @__PURE__ */ (0, import_jsx_runtime142.jsx)("div", { className: "min-h-0 flex-1 overflow-y-auto", children })
                   ]
                 }
               )
@@ -11394,7 +11894,7 @@ var DrawerContent = React42.forwardRef(
   }
 );
 DrawerContent.displayName = DialogPrimitive2.Content.displayName;
-var DrawerHeader = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
+var DrawerHeader = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
   "div",
   {
     className: cn("flex flex-col gap-2 px-5 pt-2 text-center", className),
@@ -11402,9 +11902,9 @@ var DrawerHeader = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_r
   }
 );
 DrawerHeader.displayName = "DrawerHeader";
-var DrawerFooter = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime140.jsx)("div", { className: cn("flex flex-col gap-2 p-5", className), ...props });
+var DrawerFooter = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime142.jsx)("div", { className: cn("flex flex-col gap-2 p-5", className), ...props });
 DrawerFooter.displayName = "DrawerFooter";
-var DrawerTitle = React42.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
+var DrawerTitle = React42.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
   DialogPrimitive2.Title,
   {
     ref,
@@ -11414,7 +11914,7 @@ var DrawerTitle = React42.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 DrawerTitle.displayName = DialogPrimitive2.Title.displayName;
-var DrawerDescription = React42.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime140.jsx)(
+var DrawerDescription = React42.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
   DialogPrimitive2.Description,
   {
     ref,
@@ -11441,7 +11941,7 @@ var DEVICE = {
 };
 
 // src/responsive-sheet/ResponsiveSheet.tsx
-var import_jsx_runtime141 = require("react/jsx-runtime");
+var import_jsx_runtime143 = require("react/jsx-runtime");
 function ResponsiveSheet({
   open,
   onClose,
@@ -11460,8 +11960,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();
@@ -11477,7 +11977,7 @@ function ResponsiveSheet({
       event.preventDefault();
     }
   };
-  const content = /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)(
+  const content = /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)(
     "div",
     {
       className: cn(
@@ -11485,7 +11985,7 @@ function ResponsiveSheet({
         contentClassName
       ),
       children: [
-        title ? /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
+        title ? /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
           "div",
           {
             "aria-hidden": "true",
@@ -11496,7 +11996,7 @@ function ResponsiveSheet({
             children: title
           }
         ) : null,
-        description ? /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(
+        description ? /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
           "p",
           {
             "aria-hidden": "true",
@@ -11512,7 +12012,7 @@ function ResponsiveSheet({
     }
   );
   if (isMobileMode) {
-    return /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(Drawer, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(Drawer, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)(
       DrawerContent,
       {
         onClose,
@@ -11523,14 +12023,14 @@ function ResponsiveSheet({
         onEscapeKeyDown: handleEscapeKeyDown,
         className: cn(className, drawerClassName),
         children: [
-          title ? /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(DrawerTitle, { className: "sr-only", children: title }) : null,
-          description ? /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(DrawerDescription, { className: "sr-only", children: description }) : null,
+          title ? /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(DrawerTitle, { className: "sr-only", children: title }) : null,
+          description ? /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(DrawerDescription, { className: "sr-only", children: description }) : null,
           content
         ]
       }
     ) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(Dialog, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime141.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(Dialog, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)(
     DialogContent,
     {
       showCloseButton,
@@ -11540,8 +12040,8 @@ function ResponsiveSheet({
       className: cn("max-w-[560px] border-0 p-0 shadow-xl", className, dialogClassName),
       lockScroll: false,
       children: [
-        title ? /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(DialogTitle, { className: "sr-only", children: title }) : null,
-        description ? /* @__PURE__ */ (0, import_jsx_runtime141.jsx)(DialogDescription, { className: "sr-only", children: description }) : null,
+        title ? /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(DialogTitle, { className: "sr-only", children: title }) : null,
+        description ? /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(DialogDescription, { className: "sr-only", children: description }) : null,
         content
       ]
     }
@@ -11550,7 +12050,7 @@ function ResponsiveSheet({
 
 // src/responsive-dropdown/ResponsiveDropdown.tsx
 var React43 = __toESM(require("react"), 1);
-var import_jsx_runtime142 = require("react/jsx-runtime");
+var import_jsx_runtime144 = require("react/jsx-runtime");
 function ResponsiveDropdown({
   trigger,
   options,
@@ -11563,8 +12063,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;
@@ -11582,8 +12082,8 @@ function ResponsiveDropdown({
     setOpen(false);
   };
   if (isMobileMode) {
-    return /* @__PURE__ */ (0, import_jsx_runtime142.jsxs)(import_jsx_runtime142.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime144.jsxs)(import_jsx_runtime144.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
         "div",
         {
           className: "responsive-dropdown__mobile-trigger",
@@ -11591,16 +12091,16 @@ function ResponsiveDropdown({
           children: renderTrigger(open)
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(Drawer, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime142.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(Drawer, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime144.jsxs)(
         DrawerContent,
         {
           onClose: () => setOpen(false),
           lockScroll: false,
           className: cn("px-0 pb-2", className, drawerClassName),
           children: [
-            title ? /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(DrawerTitle, { className: "sr-only", children: title }) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime142.jsxs)("div", { className: "flex flex-col", children: [
-              visibleOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
+            title ? /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(DrawerTitle, { className: "sr-only", children: title }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime144.jsxs)("div", { className: "flex flex-col", children: [
+              visibleOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
                 "div",
                 {
                   role: "button",
@@ -11622,16 +12122,16 @@ function ResponsiveDropdown({
       ) })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime142.jsxs)(DropdownMenu, { open, onOpenChange: handleOpenChange, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(DropdownMenuTrigger, { asChild: true, disabled, children: renderTrigger(open) }),
-    /* @__PURE__ */ (0, import_jsx_runtime142.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime144.jsxs)(DropdownMenu, { open, onOpenChange: handleOpenChange, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(DropdownMenuTrigger, { asChild: true, disabled, children: renderTrigger(open) }),
+    /* @__PURE__ */ (0, import_jsx_runtime144.jsxs)(
       DropdownMenuContent,
       {
         side,
         align,
         className: cn("min-w-[295px]", className, dropdownClassName),
         children: [
-          visibleOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime142.jsx)(
+          visibleOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
             DropdownMenuItem,
             {
               disabled: option.disabled,
@@ -11649,11 +12149,11 @@ function ResponsiveDropdown({
 
 // src/dashboard/input/Input.tsx
 var React44 = __toESM(require("react"), 1);
-var import_lucide_react41 = require("lucide-react");
-var import_react_i18next24 = require("react-i18next");
+var import_lucide_react42 = require("lucide-react");
+var import_react_i18next26 = require("react-i18next");
 
 // src/dashboard/_fieldset/Fieldset.tsx
-var import_jsx_runtime143 = require("react/jsx-runtime");
+var import_jsx_runtime145 = require("react/jsx-runtime");
 function Fieldset({
   isActivated,
   isFocused,
@@ -11673,8 +12173,8 @@ function Fieldset({
 }) {
   const showLegendText = Boolean(legend || typeof label === "string");
   const raised = !isEmpty || isFocused;
-  return /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)(import_jsx_runtime143.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime145.jsxs)(import_jsx_runtime145.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime145.jsxs)(
       "div",
       {
         onClick,
@@ -11690,7 +12190,7 @@ function Fieldset({
           labelClassName
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(
             "label",
             {
               id: labelId,
@@ -11702,7 +12202,7 @@ function Fieldset({
               children: label
             }
           ),
-          tooltip && /* @__PURE__ */ (0, import_jsx_runtime143.jsx)("span", { className: "ml-1 inline-flex", children: /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
+          tooltip && /* @__PURE__ */ (0, import_jsx_runtime145.jsx)("span", { className: "ml-1 inline-flex", children: /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(
             HelpTooltip,
             {
               content: tooltip,
@@ -11713,7 +12213,7 @@ function Fieldset({
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime143.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(
       "fieldset",
       {
         "aria-hidden": "true",
@@ -11725,7 +12225,7 @@ function Fieldset({
           invalid && "border-[var(--error-message-color)]",
           className
         ),
-        children: /* @__PURE__ */ (0, import_jsx_runtime143.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime145.jsxs)(
           "legend",
           {
             className: cn(
@@ -11735,8 +12235,8 @@ function Fieldset({
               !label && "w-0"
             ),
             children: [
-              showLegendText && /* @__PURE__ */ (0, import_jsx_runtime143.jsx)("span", { className: "visible inline-block pr-[6px] text-[14px] font-medium opacity-0", children: legend || label }),
-              tooltip && /* @__PURE__ */ (0, import_jsx_runtime143.jsx)("span", { className: "visible inline-block w-[20px] opacity-0", children: /* @__PURE__ */ (0, import_jsx_runtime143.jsx)("span", { className: "inline-block h-4 w-4" }) })
+              showLegendText && /* @__PURE__ */ (0, import_jsx_runtime145.jsx)("span", { className: "visible inline-block pr-[6px] text-[14px] font-medium opacity-0", children: legend || label }),
+              tooltip && /* @__PURE__ */ (0, import_jsx_runtime145.jsx)("span", { className: "visible inline-block w-[20px] opacity-0", children: /* @__PURE__ */ (0, import_jsx_runtime145.jsx)("span", { className: "inline-block h-4 w-4" }) })
             ]
           }
         )
@@ -11746,7 +12246,7 @@ function Fieldset({
 }
 
 // src/dashboard/input/Input.tsx
-var import_jsx_runtime144 = require("react/jsx-runtime");
+var import_jsx_runtime146 = require("react/jsx-runtime");
 var checkIfEmpty = ({
   empty,
   defaultValue,
@@ -11797,7 +12297,7 @@ var DashboardInput = React44.forwardRef(
     const generatedId = React44.useId();
     const inputId = id ?? name ?? generatedId;
     const errorId = `${inputId}-error`;
-    const { t } = (0, import_react_i18next24.useTranslation)();
+    const { t } = (0, import_react_i18next26.useTranslation)();
     const isEmpty = checkIfEmpty({ empty, value, defaultValue });
     const [inputType, setInputType] = React44.useState(type);
     const [isPasswordRevealed, setIsPasswordRevealed] = React44.useState(false);
@@ -11837,7 +12337,7 @@ var DashboardInput = React44.forwardRef(
     };
     const showRightPaddingForReset = Boolean(onReset);
     const showRightPaddingForReveal = isPasswordReveal;
-    return /* @__PURE__ */ (0, import_jsx_runtime144.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime146.jsxs)(
       "div",
       {
         className: cn(
@@ -11848,7 +12348,7 @@ var DashboardInput = React44.forwardRef(
           className
         ),
         children: [
-          topLabel && /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
+          topLabel && /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
             "label",
             {
               htmlFor: inputId,
@@ -11856,7 +12356,7 @@ var DashboardInput = React44.forwardRef(
               children: topLabel
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime144.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime146.jsxs)(
             "div",
             {
               className: cn(
@@ -11865,8 +12365,8 @@ var DashboardInput = React44.forwardRef(
                 fieldClassName
               ),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime144.jsxs)("div", { className: cn("relative w-full cursor-text", contentClassName), children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime146.jsxs)("div", { className: cn("relative w-full cursor-text", contentClassName), children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
                     Fieldset,
                     {
                       isFocused: isFocused && !readOnly,
@@ -11887,8 +12387,8 @@ var DashboardInput = React44.forwardRef(
                       })
                     }
                   ),
-                  leftIcon && /* @__PURE__ */ (0, import_jsx_runtime144.jsx)("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__ */ (0, import_jsx_runtime144.jsx)("span", { className: "flex h-full w-10 items-center justify-center", children: leftIcon }) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
+                  leftIcon && /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("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__ */ (0, import_jsx_runtime146.jsx)("span", { className: "flex h-full w-10 items-center justify-center", children: leftIcon }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
                     "input",
                     {
                       ...props,
@@ -11925,9 +12425,9 @@ var DashboardInput = React44.forwardRef(
                       )
                     }
                   ),
-                  sign && /* @__PURE__ */ (0, import_jsx_runtime144.jsx)("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__ */ (0, import_jsx_runtime144.jsx)("span", { className: "pointer-events-none absolute right-[14px] top-0 flex h-full items-center", children: trailingAdornment }),
-                  onReset && !isEmpty && /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
+                  sign && /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("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__ */ (0, import_jsx_runtime146.jsx)("span", { className: "pointer-events-none absolute right-[14px] top-0 flex h-full items-center", children: trailingAdornment }),
+                  onReset && !isEmpty && /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
                     "button",
                     {
                       type: "button",
@@ -11935,18 +12435,18 @@ 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__ */ (0, import_jsx_runtime144.jsx)(import_lucide_react41.X, { size: 14 })
+                      children: /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(import_lucide_react42.X, { size: 14 })
                     }
                   ),
-                  isPasswordReveal && /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
+                  isPasswordReveal && /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
                     "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__ */ (0, import_jsx_runtime144.jsx)(
-                        import_lucide_react41.Eye,
+                      children: /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
+                        import_lucide_react42.Eye,
                         {
                           size: 20,
                           className: cn(
@@ -11957,32 +12457,32 @@ var DashboardInput = React44.forwardRef(
                     }
                   )
                 ] }),
-                type === "number" && showNumberButtons && /* @__PURE__ */ (0, import_jsx_runtime144.jsxs)("div", { className: "absolute right-[18px] top-[13px] inline-flex items-center text-right", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
+                type === "number" && showNumberButtons && /* @__PURE__ */ (0, import_jsx_runtime146.jsxs)("div", { className: "absolute right-[18px] top-[13px] inline-flex items-center text-right", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
                     "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__ */ (0, import_jsx_runtime144.jsx)(import_lucide_react41.Minus, { size: 16, strokeWidth: 3, "aria-hidden": true })
+                      children: /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(import_lucide_react42.Minus, { size: 16, strokeWidth: 3, "aria-hidden": true })
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
                     "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__ */ (0, import_jsx_runtime144.jsx)(import_lucide_react41.Plus, { size: 16, strokeWidth: 3, "aria-hidden": true })
+                      children: /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(import_lucide_react42.Plus, { size: 16, strokeWidth: 3, "aria-hidden": true })
                     }
                   )
                 ] })
               ]
             }
           ),
-          !errorMessage && optional && /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
+          !errorMessage && optional && /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
             "span",
             {
               "data-testid": `${name}-optional`,
@@ -11990,8 +12490,8 @@ var DashboardInput = React44.forwardRef(
               children: typeof optional === "string" ? optional : t("optional")
             }
           ),
-          !errorMessage && helperText && /* @__PURE__ */ (0, import_jsx_runtime144.jsx)("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
-          errorMessage && renderErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime144.jsx)(
+          !errorMessage && helperText && /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
+          errorMessage && renderErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime146.jsx)(
             FieldErrorMessage,
             {
               id: errorId,
@@ -12010,11 +12510,11 @@ DashboardInput.displayName = "DashboardInput";
 
 // src/dashboard/select/Select.tsx
 var React48 = __toESM(require("react"), 1);
-var import_react_i18next28 = require("react-i18next");
+var import_react_i18next30 = require("react-i18next");
 
 // src/dashboard/_select-internals/SelectFieldShell.tsx
-var import_react_i18next25 = require("react-i18next");
-var import_jsx_runtime145 = require("react/jsx-runtime");
+var import_react_i18next27 = require("react-i18next");
+var import_jsx_runtime147 = require("react/jsx-runtime");
 function SelectFieldShell({
   containerRef,
   className,
@@ -12033,9 +12533,9 @@ function SelectFieldShell({
   onBlur,
   children
 }) {
-  const { t } = (0, import_react_i18next25.useTranslation)();
+  const { t } = (0, import_react_i18next27.useTranslation)();
   const wrapperWidth = toCssSize(width);
-  return /* @__PURE__ */ (0, import_jsx_runtime145.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime147.jsxs)(
     "div",
     {
       ref: containerRef,
@@ -12048,9 +12548,9 @@ function SelectFieldShell({
       ),
       style: wrapperWidth ? { width: wrapperWidth } : void 0,
       children: [
-        name && /* @__PURE__ */ (0, import_jsx_runtime145.jsx)("input", { type: "hidden", name, value: hiddenValue ?? "" }),
-        /* @__PURE__ */ (0, import_jsx_runtime145.jsxs)("div", { className: "relative min-h-[68px] w-full", children: [
-          topLabel && /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(
+        name && /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("input", { type: "hidden", name, value: hiddenValue ?? "" }),
+        /* @__PURE__ */ (0, import_jsx_runtime147.jsxs)("div", { className: "relative min-h-[68px] w-full", children: [
+          topLabel && /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(
             "label",
             {
               htmlFor: triggerId,
@@ -12058,10 +12558,10 @@ function SelectFieldShell({
               children: topLabel
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime145.jsx)("div", { className: "relative w-full", children }),
-          !errorMessage && optional && /* @__PURE__ */ (0, import_jsx_runtime145.jsx)("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__ */ (0, import_jsx_runtime145.jsx)("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
-          errorMessage && !hideErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime145.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("div", { className: "relative w-full", children }),
+          !errorMessage && optional && /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("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__ */ (0, import_jsx_runtime147.jsx)("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
+          errorMessage && !hideErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(
             FieldErrorMessage,
             {
               id: errorId,
@@ -12076,7 +12576,7 @@ function SelectFieldShell({
 }
 
 // src/dashboard/_select-internals/SelectMenu.tsx
-var import_react_i18next26 = require("react-i18next");
+var import_react_i18next28 = require("react-i18next");
 
 // src/dashboard/_select-internals/utils.ts
 function getOptionIndex(options, option) {
@@ -12107,7 +12607,7 @@ function isOptionSelected(option, selectedValue, selectedValues) {
 }
 
 // src/dashboard/_select-internals/SelectMenu.tsx
-var import_jsx_runtime146 = require("react/jsx-runtime");
+var import_jsx_runtime148 = require("react/jsx-runtime");
 function SelectMenu({
   id,
   options,
@@ -12129,10 +12629,10 @@ function SelectMenu({
   emptyContent,
   footer
 }) {
-  const { t } = (0, import_react_i18next26.useTranslation)();
+  const { t } = (0, import_react_i18next28.useTranslation)();
   const emptyMessage = noOptionsMessage?.() ?? t("no_options");
   const hasOptions = options.length > 0;
-  return /* @__PURE__ */ (0, import_jsx_runtime146.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)(
     "div",
     {
       id,
@@ -12149,13 +12649,13 @@ function SelectMenu({
         menuClassName
       ),
       children: [
-        !hasOptions && (emptyContent ?? /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("div", { className: "mt-[10px] text-left text-[16px] text-[var(--chekin-color-brand-navy)]", children: emptyMessage })),
+        !hasOptions && (emptyContent ?? /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("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__ */ (0, import_jsx_runtime146.jsxs)(
+          return /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)(
             "button",
             {
               id: getOptionId2(index),
@@ -12178,8 +12678,8 @@ function SelectMenu({
                 isOptionDisabled && "cursor-default opacity-30"
               ),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("span", { className: "block break-words", children: option.label }),
-                option.description && /* @__PURE__ */ (0, import_jsx_runtime146.jsx)("span", { className: "ml-2 mt-[3px] shrink-0 text-[12px] font-bold italic text-[#777e91]", children: option.description })
+                /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("span", { className: "block break-words", children: option.label }),
+                option.description && /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("span", { className: "ml-2 mt-[3px] shrink-0 text-[12px] font-bold italic text-[#777e91]", children: option.description })
               ]
             },
             optionKey
@@ -12192,11 +12692,11 @@ function SelectMenu({
 }
 
 // src/dashboard/_select-internals/SelectMenuPanel.tsx
-var import_react_i18next27 = require("react-i18next");
-var import_jsx_runtime147 = require("react/jsx-runtime");
+var import_react_i18next29 = require("react-i18next");
+var import_jsx_runtime149 = require("react/jsx-runtime");
 function SelectMenuPanel({
   isOpen,
-  isMobile: isMobile2,
+  isMobile: isMobile3,
   onClose,
   title,
   description,
@@ -12205,29 +12705,29 @@ function SelectMenuPanel({
   drawerContentClassName,
   children
 }) {
-  const { t } = (0, import_react_i18next27.useTranslation)();
+  const { t } = (0, import_react_i18next29.useTranslation)();
   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__ */ (0, import_jsx_runtime147.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime149.jsx)(
       Drawer,
       {
         open: isOpen,
         onOpenChange: (next) => {
           if (!next) onClose();
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime147.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime149.jsxs)(
           DrawerContent,
           {
             onClose,
             lockScroll: false,
             className: cn("max-h-[calc(100vh-1rem)]", drawerClassName),
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(DrawerTitle, { className: "sr-only", children: titleText }),
-              /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(DrawerDescription, { className: "sr-only", children: descriptionText }),
-              /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime149.jsx)(DrawerTitle, { className: "sr-only", children: titleText }),
+              /* @__PURE__ */ (0, import_jsx_runtime149.jsx)(DrawerDescription, { className: "sr-only", children: descriptionText }),
+              /* @__PURE__ */ (0, import_jsx_runtime149.jsx)(
                 "div",
                 {
                   className: cn(
@@ -12243,7 +12743,7 @@ function SelectMenuPanel({
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime149.jsx)(
     "div",
     {
       className: cn(
@@ -12256,7 +12756,7 @@ function SelectMenuPanel({
 }
 
 // src/dashboard/_select-internals/SelectSearchInput.tsx
-var import_jsx_runtime148 = require("react/jsx-runtime");
+var import_jsx_runtime150 = require("react/jsx-runtime");
 function SelectSearchInput({
   inputRef,
   value,
@@ -12266,7 +12766,7 @@ function SelectSearchInput({
   onChange,
   onKeyDown
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("div", { className: "border-b border-[#f2f4f8] px-4 pb-2 pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime150.jsx)("div", { className: "border-b border-[#f2f4f8] px-4 pb-2 pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime150.jsx)(
     "input",
     {
       ref: inputRef,
@@ -12284,8 +12784,8 @@ function SelectSearchInput({
 }
 
 // src/dashboard/_select-internals/SelectTrigger.tsx
-var import_lucide_react42 = require("lucide-react");
-var import_jsx_runtime149 = require("react/jsx-runtime");
+var import_lucide_react43 = require("lucide-react");
+var import_jsx_runtime151 = require("react/jsx-runtime");
 function SelectTrigger({
   triggerRef,
   triggerId,
@@ -12306,7 +12806,7 @@ function SelectTrigger({
   onBlur
 }) {
   const isEmpty = !hasValue;
-  return /* @__PURE__ */ (0, import_jsx_runtime149.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime151.jsxs)(
     "button",
     {
       id: triggerId,
@@ -12330,11 +12830,11 @@ function SelectTrigger({
         loading && "cursor-progress"
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime149.jsx)("span", { id: valueId, className: "block min-w-0 flex-1 truncate text-left", children: valueLabel ?? (isOpen ? placeholder : null) }),
-        /* @__PURE__ */ (0, import_jsx_runtime149.jsxs)("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: [
-          loading && /* @__PURE__ */ (0, import_jsx_runtime149.jsx)(ThreeDotsLoader, { height: 18, width: 18 }),
-          /* @__PURE__ */ (0, import_jsx_runtime149.jsx)(
-            import_lucide_react42.ChevronDown,
+        /* @__PURE__ */ (0, import_jsx_runtime151.jsx)("span", { id: valueId, className: "block min-w-0 flex-1 truncate text-left", children: valueLabel ?? (isOpen ? placeholder : null) }),
+        /* @__PURE__ */ (0, import_jsx_runtime151.jsxs)("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: [
+          loading && /* @__PURE__ */ (0, import_jsx_runtime151.jsx)(ThreeDotsLoader, { height: 18, width: 18 }),
+          /* @__PURE__ */ (0, import_jsx_runtime151.jsx)(
+            import_lucide_react43.ChevronDown,
             {
               size: 16,
               className: cn(
@@ -12388,7 +12888,7 @@ function useSelectIds({
 var React46 = __toESM(require("react"), 1);
 function useSelectMenuState({
   isBlocked,
-  isMobile: isMobile2,
+  isMobile: isMobile3,
   onOutsideClick
 }) {
   const containerRef = React46.useRef(null);
@@ -12409,7 +12909,7 @@ function useSelectMenuState({
       setIsOpen(false);
       onOutsideClick?.();
     },
-    isDisabled: !isOpen || isMobile2
+    isDisabled: !isOpen || isMobile3
   });
   React46.useEffect(() => {
     if (isBlocked) setIsOpen(false);
@@ -12434,7 +12934,7 @@ function useSelectSearch({
 }
 
 // src/dashboard/select/Select.tsx
-var import_jsx_runtime150 = require("react/jsx-runtime");
+var import_jsx_runtime152 = require("react/jsx-runtime");
 function DashboardSelectInternal({
   options = [],
   value,
@@ -12468,8 +12968,8 @@ function DashboardSelectInternal({
   const listRef = React48.useRef(null);
   const optionRefs = React48.useRef([]);
   const [highlightedIndex, setHighlightedIndex] = React48.useState(-1);
-  const isMobile2 = useIsMobile();
-  const { t } = (0, import_react_i18next28.useTranslation)();
+  const isMobile3 = useIsMobile();
+  const { t } = (0, import_react_i18next30.useTranslation)();
   const resolvedSearchPlaceholder = searchPlaceholder ?? t("search_placeholder");
   const hasValue = Boolean(value);
   const isBlocked = Boolean(disabled) || Boolean(loading);
@@ -12479,7 +12979,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({
@@ -12558,7 +13058,7 @@ function DashboardSelectInternal({
       setIsOpen(false);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime150.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime152.jsxs)(
     SelectFieldShell,
     {
       containerRef,
@@ -12576,7 +13076,7 @@ function DashboardSelectInternal({
       name,
       hiddenValue: value ? String(value.value) : "",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime150.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(
           SelectTrigger,
           {
             triggerRef,
@@ -12598,7 +13098,7 @@ function DashboardSelectInternal({
             onBlur
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime150.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(
           Fieldset,
           {
             isFocused: isOpen,
@@ -12615,17 +13115,17 @@ function DashboardSelectInternal({
             onClick: !isBlocked ? toggleMenu : void 0
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime150.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime152.jsxs)(
           SelectMenuPanel,
           {
             isOpen,
-            isMobile: isMobile2,
+            isMobile: isMobile3,
             onClose: closeMenu,
             title: typeof label === "string" ? label : void 0,
             className: dropdownClassName,
             drawerClassName,
             children: [
-              searchable && /* @__PURE__ */ (0, import_jsx_runtime150.jsx)(
+              searchable && /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(
                 SelectSearchInput,
                 {
                   inputRef: searchInputRef,
@@ -12637,7 +13137,7 @@ function DashboardSelectInternal({
                   onKeyDown: handleSearchKeyDown
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime150.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(
                 SelectMenu,
                 {
                   id: listboxId,
@@ -12671,23 +13171,23 @@ var DashboardSelect = React48.forwardRef(
 
 // src/dashboard/multi-select/MultiSelect.tsx
 var React49 = __toESM(require("react"), 1);
-var import_lucide_react44 = require("lucide-react");
-var import_react_i18next30 = require("react-i18next");
+var import_lucide_react45 = require("lucide-react");
+var import_react_i18next32 = require("react-i18next");
 
 // src/dashboard/multi-select/MultiSelectChip.tsx
-var import_lucide_react43 = require("lucide-react");
-var import_react_i18next29 = require("react-i18next");
-var import_jsx_runtime151 = require("react/jsx-runtime");
+var import_lucide_react44 = require("lucide-react");
+var import_react_i18next31 = require("react-i18next");
+var import_jsx_runtime153 = require("react/jsx-runtime");
 function MultiSelectChip({
   option,
   readOnly,
   onRemove
 }) {
-  const { t } = (0, import_react_i18next29.useTranslation)();
+  const { t } = (0, import_react_i18next31.useTranslation)();
   const labelText = typeof option.label === "string" ? option.label : String(option.value);
-  return /* @__PURE__ */ (0, import_jsx_runtime151.jsxs)("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__ */ (0, import_jsx_runtime151.jsx)("span", { className: "whitespace-nowrap", children: option.label }),
-    !readOnly && /* @__PURE__ */ (0, import_jsx_runtime151.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime153.jsxs)("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__ */ (0, import_jsx_runtime153.jsx)("span", { className: "whitespace-nowrap", children: option.label }),
+    !readOnly && /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(
       "button",
       {
         type: "button",
@@ -12697,14 +13197,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__ */ (0, import_jsx_runtime151.jsx)(import_lucide_react43.SquareX, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
+        children: /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(import_lucide_react44.SquareX, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
       }
     )
   ] });
 }
 
 // src/dashboard/multi-select/MultiSelect.tsx
-var import_jsx_runtime152 = require("react/jsx-runtime");
+var import_jsx_runtime154 = require("react/jsx-runtime");
 var isValueSelected = (selected, option) => selected.some((item) => item.value === option.value);
 function DashboardMultiSelectInternal({
   options = [],
@@ -12744,8 +13244,8 @@ function DashboardMultiSelectInternal({
   const optionRefs = React49.useRef([]);
   const [isFocused, setIsFocused] = React49.useState(false);
   const [highlightedIndex, setHighlightedIndex] = React49.useState(-1);
-  const isMobile2 = useIsMobile();
-  const { t } = (0, import_react_i18next30.useTranslation)();
+  const isMobile3 = useIsMobile();
+  const { t } = (0, import_react_i18next32.useTranslation)();
   const selectedValues = React49.useMemo(() => value ?? [], [value]);
   const hasValue = selectedValues.length > 0;
   const isEmpty = !hasValue;
@@ -12755,7 +13255,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 });
@@ -12797,12 +13297,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);
@@ -12899,7 +13399,7 @@ function DashboardMultiSelectInternal({
     setIsFocused(false);
     onBlur?.(event);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime152.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime154.jsxs)(
     SelectFieldShell,
     {
       containerRef,
@@ -12918,7 +13418,7 @@ function DashboardMultiSelectInternal({
       hiddenValue: selectedValues.map((item) => String(item.value)).join(","),
       onBlur: handleInputBlur,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime152.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime154.jsxs)(
           "div",
           {
             id: triggerId,
@@ -12941,7 +13441,7 @@ function DashboardMultiSelectInternal({
             ),
             children: [
               selectedValues.map(
-                (option) => renderChip ? /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(React49.Fragment, { children: renderChip(option, () => removeOption(option)) }, String(option.value)) : /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(
+                (option) => renderChip ? /* @__PURE__ */ (0, import_jsx_runtime154.jsx)(React49.Fragment, { children: renderChip(option, () => removeOption(option)) }, String(option.value)) : /* @__PURE__ */ (0, import_jsx_runtime154.jsx)(
                   MultiSelectChip,
                   {
                     option,
@@ -12951,7 +13451,7 @@ function DashboardMultiSelectInternal({
                   String(option.value)
                 )
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime154.jsx)(
                 "input",
                 {
                   ref: inputRef,
@@ -12980,9 +13480,9 @@ function DashboardMultiSelectInternal({
                   "aria-activedescendant": isOpen && highlightedIndex >= 0 ? getOptionId2(highlightedIndex) : void 0
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime152.jsxs)("span", { className: "ml-auto flex items-center gap-2 pl-2 text-[var(--chekin-color-gray-2)]", children: [
-                loading && /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(ThreeDotsLoader, { height: 18, width: 18 }),
-                hasValue && !readOnly && /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime154.jsxs)("span", { className: "ml-auto flex items-center gap-2 pl-2 text-[var(--chekin-color-gray-2)]", children: [
+                loading && /* @__PURE__ */ (0, import_jsx_runtime154.jsx)(ThreeDotsLoader, { height: 18, width: 18 }),
+                hasValue && !readOnly && /* @__PURE__ */ (0, import_jsx_runtime154.jsx)(
                   "button",
                   {
                     type: "button",
@@ -12992,10 +13492,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__ */ (0, import_jsx_runtime152.jsx)(import_lucide_react44.SquareX, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime154.jsx)(import_lucide_react45.SquareX, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime154.jsx)(
                   RotateArrow,
                   {
                     shouldRotate: isOpen,
@@ -13008,7 +13508,7 @@ function DashboardMultiSelectInternal({
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime154.jsx)(
           Fieldset,
           {
             isFocused: isFocused || isOpen,
@@ -13026,11 +13526,11 @@ function DashboardMultiSelectInternal({
             onClick: handleContainerClick
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime152.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime154.jsxs)(
           SelectMenuPanel,
           {
             isOpen,
-            isMobile: isMobile2,
+            isMobile: isMobile3,
             onClose: () => {
               closeMenu();
               setIsFocused(false);
@@ -13039,7 +13539,7 @@ function DashboardMultiSelectInternal({
             className: dropdownClassName,
             drawerClassName,
             children: [
-              isMobile2 && /* @__PURE__ */ (0, import_jsx_runtime152.jsx)("div", { className: "border-b border-[#f2f4f8] px-4 pb-2 pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(
+              isMobile3 && /* @__PURE__ */ (0, import_jsx_runtime154.jsx)("div", { className: "border-b border-[#f2f4f8] px-4 pb-2 pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime154.jsx)(
                 "input",
                 {
                   ref: mobileSearchInputRef,
@@ -13054,7 +13554,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__ */ (0, import_jsx_runtime152.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime154.jsx)(
                 SelectMenu,
                 {
                   id: listboxId,
@@ -13076,7 +13576,7 @@ function DashboardMultiSelectInternal({
                   isMulti: true
                 }
               ),
-              canCreateNewOption && /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(
+              canCreateNewOption && /* @__PURE__ */ (0, import_jsx_runtime154.jsx)(
                 "button",
                 {
                   type: "button",
@@ -13098,20 +13598,20 @@ var DashboardMultiSelect = React49.forwardRef(
 
 // src/dashboard/creatable-multi-select/CreatableMultiSelect.tsx
 var React50 = __toESM(require("react"), 1);
-var import_jsx_runtime153 = require("react/jsx-runtime");
+var import_jsx_runtime155 = require("react/jsx-runtime");
 var DashboardCreatableMultiSelect = React50.forwardRef(
   function DashboardCreatableMultiSelect2(props, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(DashboardMultiSelect, { ref, ...props, isCreatable: true });
+    return /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(DashboardMultiSelect, { ref, ...props, isCreatable: true });
   }
 );
 
 // src/dashboard/infinite-scroll-select/InfiniteScrollSelect.tsx
 var React51 = __toESM(require("react"), 1);
 var import_react_virtual2 = require("@tanstack/react-virtual");
-var import_react_i18next31 = require("react-i18next");
+var import_react_i18next33 = require("react-i18next");
 
 // src/dashboard/infinite-scroll-select/InfiniteScrollList.tsx
-var import_jsx_runtime154 = require("react/jsx-runtime");
+var import_jsx_runtime156 = require("react/jsx-runtime");
 function InfiniteScrollList({
   scrollRef,
   listboxId,
@@ -13132,13 +13632,13 @@ function InfiniteScrollList({
   onHighlight
 }) {
   const virtualItems = virtualizer.getVirtualItems();
-  return /* @__PURE__ */ (0, import_jsx_runtime154.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(
     "div",
     {
       ref: scrollRef,
       className: cn("overflow-y-auto", menuClassName),
       style: { height: `${height}px` },
-      children: /* @__PURE__ */ (0, import_jsx_runtime154.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(
         "div",
         {
           id: listboxId,
@@ -13155,7 +13655,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__ */ (0, import_jsx_runtime154.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(
               "div",
               {
                 "data-index": virtualItem.index,
@@ -13164,10 +13664,10 @@ function InfiniteScrollList({
                   height: `${virtualItem.size}px`,
                   transform: `translateY(${virtualItem.start}px)`
                 },
-                children: isLoaderRow ? /* @__PURE__ */ (0, import_jsx_runtime154.jsxs)("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__ */ (0, import_jsx_runtime154.jsx)(ThreeDotsLoader, { height: 36, width: 36 }),
-                  /* @__PURE__ */ (0, import_jsx_runtime154.jsx)("span", { children: loadingMoreText })
-                ] }) : /* @__PURE__ */ (0, import_jsx_runtime154.jsxs)(
+                children: isLoaderRow ? /* @__PURE__ */ (0, import_jsx_runtime156.jsxs)("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__ */ (0, import_jsx_runtime156.jsx)(ThreeDotsLoader, { height: 36, width: 36 }),
+                  /* @__PURE__ */ (0, import_jsx_runtime156.jsx)("span", { children: loadingMoreText })
+                ] }) : /* @__PURE__ */ (0, import_jsx_runtime156.jsxs)(
                   "button",
                   {
                     id: getOptionId2(virtualItem.index),
@@ -13186,8 +13686,8 @@ function InfiniteScrollList({
                       isOptionDisabled && "cursor-default opacity-30"
                     ),
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime154.jsx)("span", { className: "block break-words", children: option?.label }),
-                      option?.description && /* @__PURE__ */ (0, import_jsx_runtime154.jsx)("span", { className: "ml-2 mt-[3px] shrink-0 text-[12px] font-bold italic text-[#777e91]", children: option.description })
+                      /* @__PURE__ */ (0, import_jsx_runtime156.jsx)("span", { className: "block break-words", children: option?.label }),
+                      option?.description && /* @__PURE__ */ (0, import_jsx_runtime156.jsx)("span", { className: "ml-2 mt-[3px] shrink-0 text-[12px] font-bold italic text-[#777e91]", children: option.description })
                     ]
                   }
                 )
@@ -13202,7 +13702,7 @@ function InfiniteScrollList({
 }
 
 // src/dashboard/infinite-scroll-select/InfiniteScrollSelect.tsx
-var import_jsx_runtime155 = require("react/jsx-runtime");
+var import_jsx_runtime157 = require("react/jsx-runtime");
 var DEFAULT_ITEM_HEIGHT = 60;
 var DEFAULT_LIST_HEIGHT = 322;
 var DEFAULT_OVERSCAN = 5;
@@ -13250,8 +13750,8 @@ function DashboardInfiniteScrollSelectInternal({
   const previousHighlightedIndexRef = React51.useRef(-1);
   const lastLoadMoreOptionsLengthRef = React51.useRef(null);
   const [highlightedIndex, setHighlightedIndex] = React51.useState(-1);
-  const isMobile2 = useIsMobile();
-  const { t } = (0, import_react_i18next31.useTranslation)();
+  const isMobile3 = useIsMobile();
+  const { t } = (0, import_react_i18next33.useTranslation)();
   const resolvedSearchPlaceholder = searchPlaceholder ?? t("search_placeholder");
   const resolvedLoadingMoreText = loadingMoreText ?? t("loading_more");
   const hasValue = Boolean(value);
@@ -13262,7 +13762,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({
@@ -13375,7 +13875,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__ */ (0, import_jsx_runtime155.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime157.jsxs)(
     SelectFieldShell,
     {
       containerRef,
@@ -13393,7 +13893,7 @@ function DashboardInfiniteScrollSelectInternal({
       name,
       hiddenValue: value ? String(value.value) : "",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(
           SelectTrigger,
           {
             triggerRef,
@@ -13415,7 +13915,7 @@ function DashboardInfiniteScrollSelectInternal({
             onBlur
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(
           Fieldset,
           {
             isFocused: isOpen,
@@ -13432,17 +13932,17 @@ function DashboardInfiniteScrollSelectInternal({
             onClick: !isBlocked ? toggleMenu : void 0
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime155.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime157.jsxs)(
           SelectMenuPanel,
           {
             isOpen,
-            isMobile: isMobile2,
+            isMobile: isMobile3,
             onClose: closeMenu,
             title: typeof label === "string" ? label : void 0,
             className: dropdownClassName,
             drawerClassName,
             children: [
-              searchable && /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(
+              searchable && /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(
                 SelectSearchInput,
                 {
                   inputRef: searchInputRef,
@@ -13454,10 +13954,10 @@ function DashboardInfiniteScrollSelectInternal({
                   onKeyDown: handleSearchKeyDown
                 }
               ),
-              filteredOptions.length === 0 && isLoadingMore ? /* @__PURE__ */ (0, import_jsx_runtime155.jsxs)("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__ */ (0, import_jsx_runtime155.jsx)(ThreeDotsLoader, { height: 18, width: 18 }),
-                /* @__PURE__ */ (0, import_jsx_runtime155.jsx)("span", { children: resolvedLoadingMoreText })
-              ] }) : filteredOptions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime155.jsx)("div", { className: "px-4 py-[20px] text-left text-[16px] text-[var(--chekin-color-brand-navy)]", children: emptyMessage ?? t("no_options") }) : /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(
+              filteredOptions.length === 0 && isLoadingMore ? /* @__PURE__ */ (0, import_jsx_runtime157.jsxs)("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__ */ (0, import_jsx_runtime157.jsx)(ThreeDotsLoader, { height: 18, width: 18 }),
+                /* @__PURE__ */ (0, import_jsx_runtime157.jsx)("span", { children: resolvedLoadingMoreText })
+              ] }) : filteredOptions.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime157.jsx)("div", { className: "px-4 py-[20px] text-left text-[16px] text-[var(--chekin-color-brand-navy)]", children: emptyMessage ?? t("no_options") }) : /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(
                 InfiniteScrollList,
                 {
                   scrollRef,
@@ -13492,8 +13992,8 @@ var DashboardInfiniteScrollSelect = React51.forwardRef(
 
 // src/dashboard/textarea/Textarea.tsx
 var React52 = __toESM(require("react"), 1);
-var import_react_i18next32 = require("react-i18next");
-var import_jsx_runtime156 = require("react/jsx-runtime");
+var import_react_i18next34 = require("react-i18next");
+var import_jsx_runtime158 = require("react/jsx-runtime");
 var LINE_HEIGHT = 20;
 var VERTICAL_PADDING = 32;
 function getEmptyState(empty, value, defaultValue) {
@@ -13529,7 +14029,7 @@ var DashboardTextarea = React52.forwardRef(
     const combinedRef = useCombinedRef(ref, innerRef);
     const reactId = React52.useId();
     const textareaId = id ?? name ?? `dash-textarea-${reactId}`;
-    const { t } = (0, import_react_i18next32.useTranslation)();
+    const { t } = (0, import_react_i18next34.useTranslation)();
     const isInvalid = Boolean(invalid || error);
     const isEmpty = getEmptyState(empty, value, defaultValue);
     const isBlocked = Boolean(disabled);
@@ -13550,7 +14050,7 @@ var DashboardTextarea = React52.forwardRef(
       resize();
       onInput?.(event);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime156.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime158.jsxs)(
       "div",
       {
         className: cn(
@@ -13560,18 +14060,18 @@ var DashboardTextarea = React52.forwardRef(
           className
         ),
         children: [
-          label && /* @__PURE__ */ (0, import_jsx_runtime156.jsxs)(
+          label && /* @__PURE__ */ (0, import_jsx_runtime158.jsxs)(
             "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__ */ (0, import_jsx_runtime156.jsx)("span", { className: "ml-1 inline-flex", children: /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(HelpTooltip, { content: tooltip, size: 16 }) })
+                tooltip && /* @__PURE__ */ (0, import_jsx_runtime158.jsx)("span", { className: "ml-1 inline-flex", children: /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(HelpTooltip, { content: tooltip, size: 16 }) })
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
             "textarea",
             {
               ref: combinedRef,
@@ -13600,7 +14100,7 @@ var DashboardTextarea = React52.forwardRef(
               ...textareaProps
             }
           ),
-          error && /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(
+          error && /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
             FieldErrorMessage,
             {
               id: `${textareaId}-error`,
@@ -13608,8 +14108,8 @@ var DashboardTextarea = React52.forwardRef(
               className: "mt-[1px] text-[14px]"
             }
           ),
-          !error && optional && /* @__PURE__ */ (0, import_jsx_runtime156.jsx)("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__ */ (0, import_jsx_runtime156.jsx)("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText })
+          !error && optional && /* @__PURE__ */ (0, import_jsx_runtime158.jsx)("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__ */ (0, import_jsx_runtime158.jsx)("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText })
         ]
       }
     );
@@ -13618,8 +14118,8 @@ var DashboardTextarea = React52.forwardRef(
 
 // src/dashboard/datepicker/Datepicker.tsx
 var React54 = __toESM(require("react"), 1);
-var import_lucide_react45 = require("lucide-react");
-var import_react_i18next33 = require("react-i18next");
+var import_lucide_react46 = require("lucide-react");
+var import_react_i18next35 = require("react-i18next");
 
 // src/airbnb-fields/datepicker/useDatePickerWheel.ts
 var React53 = __toESM(require("react"), 1);
@@ -14043,7 +14543,7 @@ function useDatePickerWheel({
 }
 
 // src/airbnb-fields/datepicker/DatePickerWheelColumn.tsx
-var import_jsx_runtime157 = require("react/jsx-runtime");
+var import_jsx_runtime159 = require("react/jsx-runtime");
 var spacerHeight = DATE_PICKER_OPTION_HEIGHT * DATE_PICKER_WHEEL_BUFFER_OPTIONS;
 function AirbnbDatePickerWheelColumn({
   id,
@@ -14057,7 +14557,7 @@ function AirbnbDatePickerWheelColumn({
   onOptionSelect,
   column
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime157.jsx)("div", { className: "relative z-10 min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime157.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime159.jsx)("div", { className: "relative z-10 min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime159.jsxs)(
     "div",
     {
       id,
@@ -14074,14 +14574,14 @@ function AirbnbDatePickerWheelColumn({
         WebkitOverflowScrolling: "touch"
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime157.jsx)("div", { style: { height: `${spacerHeight}px` } }),
+        /* @__PURE__ */ (0, import_jsx_runtime159.jsx)("div", { style: { height: `${spacerHeight}px` } }),
         items.map((item, index) => {
           const { style } = getWheelOptionStyles(
             index,
             scrollTop,
             DATE_PICKER_OPTION_HEIGHT
           );
-          return /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(
             "button",
             {
               id: `${id}-option-${index}`,
@@ -14097,14 +14597,14 @@ function AirbnbDatePickerWheelColumn({
             `${column}-${item}-${index}`
           );
         }),
-        /* @__PURE__ */ (0, import_jsx_runtime157.jsx)("div", { style: { height: `${spacerHeight}px` } })
+        /* @__PURE__ */ (0, import_jsx_runtime159.jsx)("div", { style: { height: `${spacerHeight}px` } })
       ]
     }
   ) });
 }
 
 // src/airbnb-fields/datepicker/DatePickerContent.tsx
-var import_jsx_runtime158 = require("react/jsx-runtime");
+var import_jsx_runtime160 = require("react/jsx-runtime");
 function AirbnbDatePickerBody({
   baseId,
   label,
@@ -14126,19 +14626,19 @@ function AirbnbDatePickerBody({
   onOptionSelect,
   onDone
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime158.jsxs)("div", { className: "px-6 pb-4 pt-1 bg-white", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime158.jsxs)("div", { className: "relative overflow-hidden rounded-[24px]", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime158.jsx)("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__ */ (0, import_jsx_runtime158.jsx)("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__ */ (0, import_jsx_runtime158.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime160.jsxs)("div", { className: "px-6 pb-4 pt-1 bg-white", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime160.jsxs)("div", { className: "relative overflow-hidden rounded-[24px]", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime160.jsx)("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__ */ (0, import_jsx_runtime160.jsx)("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__ */ (0, import_jsx_runtime160.jsx)(
         "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__ */ (0, import_jsx_runtime158.jsxs)("div", { className: "relative grid grid-cols-[1.35fr_0.7fr_1fr] gap-1", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime160.jsxs)("div", { className: "relative grid grid-cols-[1.35fr_0.7fr_1fr] gap-1", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(
           AirbnbDatePickerWheelColumn,
           {
             id: `${baseId}-month`,
@@ -14153,7 +14653,7 @@ function AirbnbDatePickerBody({
             onOptionSelect
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(
           AirbnbDatePickerWheelColumn,
           {
             id: `${baseId}-day`,
@@ -14168,7 +14668,7 @@ function AirbnbDatePickerBody({
             onOptionSelect
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(
           AirbnbDatePickerWheelColumn,
           {
             id: `${baseId}-year`,
@@ -14185,13 +14685,13 @@ function AirbnbDatePickerBody({
         )
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(Button, { type: "button", onClick: onDone, className: "mt-4 h-12 mb-8 w-full", children: doneLabel })
+    /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(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,
@@ -14213,7 +14713,7 @@ function AirbnbDatePickerContent({
   onColumnKeyDown,
   onOptionSelect
 }) {
-  const body = /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
+  const body = /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(
     AirbnbDatePickerBody,
     {
       baseId,
@@ -14237,28 +14737,28 @@ function AirbnbDatePickerContent({
       onDone
     }
   );
-  if (isMobile2) {
-    return /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(Drawer, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime158.jsxs)(
+  if (isMobile3) {
+    return /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(Drawer, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime160.jsxs)(
       DrawerContent,
       {
         onClose: () => onOpenChange(false),
         className: "rounded-none rounded-t-[32px] border-0 p-0",
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(DrawerTitle, { className: "sr-only", children: title }),
-          /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(DrawerDescription, { className: "sr-only", children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(DrawerTitle, { className: "sr-only", children: title }),
+          /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(DrawerDescription, { className: "sr-only", children: label }),
           body
         ]
       }
     ) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(Dialog, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime158.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(Dialog, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime160.jsxs)(
     DialogContent,
     {
       className: "max-w-[520px] rounded-[28px] border-0 p-0 shadow-xl",
       showCloseButton: false,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(DialogTitle, { className: "sr-only", children: title }),
-        /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(DialogDescription, { className: "sr-only", children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(DialogTitle, { className: "sr-only", children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(DialogDescription, { className: "sr-only", children: label }),
         body
       ]
     }
@@ -14266,7 +14766,7 @@ function AirbnbDatePickerContent({
 }
 
 // src/dashboard/datepicker/Datepicker.tsx
-var import_jsx_runtime159 = require("react/jsx-runtime");
+var import_jsx_runtime161 = require("react/jsx-runtime");
 var MONTHS_IN_YEAR2 = 12;
 function getMonthLabels2(locale) {
   const formatter = new Intl.DateTimeFormat(locale, { month: "long" });
@@ -14343,7 +14843,7 @@ var DashboardDatepicker = React54.forwardRef(
     const yearId = `${baseId}-year`;
     const labelId = `${baseId}-label`;
     const errorId = `${baseId}-error`;
-    const { t } = (0, import_react_i18next33.useTranslation)();
+    const { t } = (0, import_react_i18next35.useTranslation)();
     const resolvedMonthLabels = React54.useMemo(
       () => monthLabels ?? getMonthLabels2(locale),
       [locale, monthLabels]
@@ -14366,7 +14866,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;
@@ -14416,7 +14916,7 @@ var DashboardDatepicker = React54.forwardRef(
     useOutsideClick({
       elementRef: containerRef,
       onOutsideClick: () => setIsMonthOpen(false),
-      isDisabled: !isMonthOpen || isMobile2
+      isDisabled: !isMonthOpen || isMobile3
     });
     const emitChange = React54.useCallback(
       (nextDay, nextMonth, nextYear) => {
@@ -14525,7 +15025,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,
@@ -14549,7 +15049,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__ */ (0, import_jsx_runtime159.jsx)("div", { className: "px-4 py-3 text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: t("no_options") }) : /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(
+    const monthPanelContent = filteredMonths.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("div", { className: "px-4 py-3 text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: t("no_options") }) : /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
       "ul",
       {
         ref: monthListRef,
@@ -14560,7 +15060,7 @@ var DashboardDatepicker = React54.forwardRef(
         children: filteredMonths.map((option, position) => {
           const isSelected = option.index === monthIndex;
           const isHighlighted = position === monthHighlightIndex;
-          return /* @__PURE__ */ (0, import_jsx_runtime159.jsx)("li", { role: "presentation", children: /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("li", { role: "presentation", children: /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
             "button",
             {
               id: getMonthOptionId(option.index),
@@ -14587,7 +15087,7 @@ var DashboardDatepicker = React54.forwardRef(
       isBlocked && "cursor-not-allowed",
       loading && "cursor-progress"
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
       "div",
       {
         ref: containerRef,
@@ -14598,9 +15098,9 @@ var DashboardDatepicker = React54.forwardRef(
           className
         ),
         style: wrapperWidth ? { width: wrapperWidth } : void 0,
-        children: /* @__PURE__ */ (0, import_jsx_runtime159.jsxs)("div", { className: "relative min-h-[68px] w-full", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime159.jsxs)("div", { className: "relative w-full", children: [
-            isMobile2 ? /* @__PURE__ */ (0, import_jsx_runtime159.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime161.jsxs)("div", { className: "relative min-h-[68px] w-full", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime161.jsxs)("div", { className: "relative w-full", children: [
+            isMobile3 ? /* @__PURE__ */ (0, import_jsx_runtime161.jsxs)(
               "button",
               {
                 ref: mobileTriggerRef,
@@ -14619,11 +15119,11 @@ var DashboardDatepicker = React54.forwardRef(
                   (isBlocked || readOnly) && "cursor-not-allowed"
                 ),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime159.jsx)("span", { className: "block min-w-0 flex-1 truncate text-left", children: triggerText ?? (isWheelOpen ? mobilePlaceholder : null) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime159.jsxs)("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: [
-                    loading && /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(ThreeDotsLoader, { height: 18, width: 18 }),
-                    /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(
-                      import_lucide_react45.ChevronDown,
+                  /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("span", { className: "block min-w-0 flex-1 truncate text-left", children: triggerText ?? (isWheelOpen ? mobilePlaceholder : null) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime161.jsxs)("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: [
+                    loading && /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(ThreeDotsLoader, { height: 18, width: 18 }),
+                    /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
+                      import_lucide_react46.ChevronDown,
                       {
                         size: 16,
                         className: cn(
@@ -14635,14 +15135,14 @@ var DashboardDatepicker = React54.forwardRef(
                   ] })
                 ]
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime159.jsxs)(
+            ) : /* @__PURE__ */ (0, import_jsx_runtime161.jsxs)(
               "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__ */ (0, import_jsx_runtime159.jsx)("div", { className: "flex h-full min-w-0 items-center px-2 sm:px-4", children: /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("div", { className: "flex h-full min-w-0 items-center px-2 sm:px-4", children: /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
                     "input",
                     {
                       ref: dayInputRef,
@@ -14664,8 +15164,8 @@ var DashboardDatepicker = React54.forwardRef(
                       className: subInputClass
                     }
                   ) }),
-                  /* @__PURE__ */ (0, import_jsx_runtime159.jsxs)("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__ */ (0, import_jsx_runtime159.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime161.jsxs)("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__ */ (0, import_jsx_runtime161.jsx)(
                       "input",
                       {
                         ref: monthInputRef,
@@ -14708,8 +15208,8 @@ var DashboardDatepicker = React54.forwardRef(
                         )
                       }
                     ),
-                    /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(
-                      import_lucide_react45.ChevronDown,
+                    /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
+                      import_lucide_react46.ChevronDown,
                       {
                         size: 14,
                         onMouseDown: (event) => {
@@ -14725,8 +15225,8 @@ var DashboardDatepicker = React54.forwardRef(
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime159.jsxs)("div", { className: "flex h-full min-w-0 items-center px-2 sm:px-4", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime161.jsxs)("div", { className: "flex h-full min-w-0 items-center px-2 sm:px-4", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
                       "input",
                       {
                         ref: yearInputRef,
@@ -14748,7 +15248,7 @@ var DashboardDatepicker = React54.forwardRef(
                         className: subInputClass
                       }
                     ),
-                    loading && /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(
+                    loading && /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
                       ThreeDotsLoader,
                       {
                         height: 18,
@@ -14760,7 +15260,7 @@ var DashboardDatepicker = React54.forwardRef(
                 ]
               }
             ),
-            showCoverage && /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(
+            showCoverage && /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
               "div",
               {
                 className: "absolute inset-0 cursor-text rounded-[6px] bg-[var(--chekin-color-surface-input-empty)]",
@@ -14768,7 +15268,7 @@ var DashboardDatepicker = React54.forwardRef(
                 "aria-hidden": "true"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
               Fieldset,
               {
                 isFocused,
@@ -14783,12 +15283,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__ */ (0, import_jsx_runtime159.jsx)("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__ */ (0, import_jsx_runtime161.jsx)("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__ */ (0, import_jsx_runtime159.jsx)(
+          isMobile3 && /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
             AirbnbDatePickerContent,
             {
               baseId: wheelBaseId,
@@ -14816,9 +15316,9 @@ var DashboardDatepicker = React54.forwardRef(
               onOptionSelect: wheel.handleOptionSelect
             }
           ),
-          !error && optional && /* @__PURE__ */ (0, import_jsx_runtime159.jsx)("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__ */ (0, import_jsx_runtime159.jsx)("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
-          error && !hideErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(
+          !error && optional && /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("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__ */ (0, import_jsx_runtime161.jsx)("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
+          error && !hideErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
             FieldErrorMessage,
             {
               id: errorId,
@@ -14834,7 +15334,7 @@ var DashboardDatepicker = React54.forwardRef(
 
 // src/dashboard/date-range-picker/DateRangePicker.tsx
 var React58 = __toESM(require("react"), 1);
-var import_react_i18next34 = require("react-i18next");
+var import_react_i18next36 = require("react-i18next");
 
 // src/dashboard/date-range-picker/isDayBlocked.ts
 var import_date_fns2 = require("date-fns");
@@ -15044,8 +15544,8 @@ function resolveRangeSelection({
 }
 
 // src/dashboard/date-range-picker/components/DateRangeInputs.tsx
-var import_lucide_react46 = require("lucide-react");
-var import_jsx_runtime160 = require("react/jsx-runtime");
+var import_lucide_react47 = require("lucide-react");
+var import_jsx_runtime162 = require("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";
@@ -15087,7 +15587,7 @@ function DateRangeInputs({
     isBlocked && "cursor-not-allowed",
     loading && "cursor-progress"
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime160.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime162.jsxs)(
     "div",
     {
       className: cn(
@@ -15096,7 +15596,7 @@ function DateRangeInputs({
       ),
       onClick: onRowClick,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(
           "input",
           {
             ref: fromInputRef,
@@ -15120,7 +15620,7 @@ function DateRangeInputs({
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(
           "span",
           {
             "aria-hidden": "true",
@@ -15131,7 +15631,7 @@ function DateRangeInputs({
             children: "\u2192"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(
           "input",
           {
             ref: toInputRef,
@@ -15155,9 +15655,9 @@ function DateRangeInputs({
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime160.jsxs)("span", { className: "ml-auto flex shrink-0 items-center gap-2 pl-2 text-[var(--chekin-color-gray-2)]", children: [
-          loading && /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(ThreeDotsLoader, { height: 18, width: 18 }),
-          !readOnly && !hideClearDates && !isEmpty && /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime162.jsxs)("span", { className: "ml-auto flex shrink-0 items-center gap-2 pl-2 text-[var(--chekin-color-gray-2)]", children: [
+          loading && /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(ThreeDotsLoader, { height: 18, width: 18 }),
+          !readOnly && !hideClearDates && !isEmpty && /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(
             "button",
             {
               type: "button",
@@ -15165,10 +15665,10 @@ function DateRangeInputs({
               onClick: onReset,
               className: iconButtonClass,
               "aria-label": clearLabel,
-              children: /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(import_lucide_react46.SquareX, { size: 16, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
+              children: /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(import_lucide_react47.SquareX, { size: 16, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
             }
           ),
-          !readOnly && !hideCalendarIcon && /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(
+          !readOnly && !hideCalendarIcon && /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(
             "button",
             {
               type: "button",
@@ -15180,7 +15680,7 @@ function DateRangeInputs({
                 focusedInput !== null || isOpen ? "text-[var(--chekin-color-brand-blue)]" : "text-[var(--chekin-color-gray-2)]"
               ),
               "aria-label": openCalendarLabel,
-              children: /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(import_lucide_react46.CalendarDays, { size: 18 })
+              children: /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(import_lucide_react47.CalendarDays, { size: 18 })
             }
           )
         ] })
@@ -15190,7 +15690,7 @@ function DateRangeInputs({
 }
 
 // src/dashboard/date-range-picker/components/DateRangeCalendar.tsx
-var import_jsx_runtime161 = require("react/jsx-runtime");
+var import_jsx_runtime163 = require("react/jsx-runtime");
 function DateRangeCalendar({
   value,
   month,
@@ -15206,7 +15706,7 @@ function DateRangeCalendar({
   components,
   ...dayPickerProps
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(
     Calendar,
     {
       mode: "range",
@@ -15229,10 +15729,10 @@ function DateRangeCalendar({
 }
 
 // src/dashboard/date-range-picker/components/DateRangePopover.tsx
-var import_jsx_runtime162 = require("react/jsx-runtime");
+var import_jsx_runtime164 = require("react/jsx-runtime");
 function DateRangePopover({
   isOpen,
-  isMobile: isMobile2,
+  isMobile: isMobile3,
   openDirection,
   drawerTitle,
   drawerDescription,
@@ -15240,31 +15740,31 @@ function DateRangePopover({
   children
 }) {
   if (!isOpen) return null;
-  if (isMobile2) {
-    return /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(
+  if (isMobile3) {
+    return /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(
       Drawer,
       {
         open: isOpen,
         onOpenChange: (next) => {
           if (!next) onClose();
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime162.jsxs)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime164.jsxs)(
           DrawerContent,
           {
             onClose,
             lockScroll: false,
             className: "max-h-[calc(100vh-1rem)]",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(DrawerTitle, { className: "sr-only", children: drawerTitle }),
-              /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(DrawerDescription, { className: "sr-only", children: drawerDescription }),
-              /* @__PURE__ */ (0, import_jsx_runtime162.jsx)("div", { className: "flex items-start justify-center overflow-x-auto px-2 pb-4 pt-1", children })
+              /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(DrawerTitle, { className: "sr-only", children: drawerTitle }),
+              /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(DrawerDescription, { className: "sr-only", children: drawerDescription }),
+              /* @__PURE__ */ (0, import_jsx_runtime164.jsx)("div", { className: "flex items-start justify-center overflow-x-auto px-2 pb-4 pt-1", children })
             ]
           }
         )
       }
     );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(
     "div",
     {
       className: cn(
@@ -15277,7 +15777,7 @@ function DateRangePopover({
 }
 
 // src/dashboard/date-range-picker/DateRangePicker.tsx
-var import_jsx_runtime163 = require("react/jsx-runtime");
+var import_jsx_runtime165 = require("react/jsx-runtime");
 var DashboardDateRangePicker = React58.forwardRef(function DashboardDateRangePicker2({
   label,
   value: externalValue,
@@ -15350,8 +15850,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 } = (0, import_react_i18next34.useTranslation)();
+  const isMobile3 = useIsMobile();
+  const { t } = (0, import_react_i18next36.useTranslation)();
   const drawerTitle = label ?? t("select_dates");
   const drawerDescription = label ?? t("pick_date_range");
   const isEmpty = !value?.from && !value?.to;
@@ -15359,7 +15859,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);
@@ -15373,7 +15873,7 @@ var DashboardDateRangePicker = React58.forwardRef(function DashboardDateRangePic
   useOutsideClick({
     elementRef: containerRef,
     onOutsideClick: closeCalendar,
-    isDisabled: !isOpen || isMobile2
+    isDisabled: !isOpen || isMobile3
   });
   const handlePickerChange = React58.useCallback(
     (range, pickedDate) => {
@@ -15438,7 +15938,7 @@ var DashboardDateRangePicker = React58.forwardRef(function DashboardDateRangePic
       syncMonthToValue
     ]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime165.jsx)(
     "div",
     {
       ref: containerRef,
@@ -15449,9 +15949,9 @@ var DashboardDateRangePicker = React58.forwardRef(function DashboardDateRangePic
         className
       ),
       style: wrapperWidth ? { width: wrapperWidth } : void 0,
-      children: /* @__PURE__ */ (0, import_jsx_runtime163.jsxs)("div", { className: "relative min-h-[68px] w-full", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime163.jsxs)("div", { className: "relative w-full", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime165.jsxs)("div", { className: "relative min-h-[68px] w-full", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime165.jsxs)("div", { className: "relative w-full", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime165.jsx)(
             DateRangeInputs,
             {
               fromId,
@@ -15502,7 +16002,7 @@ var DashboardDateRangePicker = React58.forwardRef(function DashboardDateRangePic
               onToggleCalendar: toggleCalendar
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime165.jsx)(
             Fieldset,
             {
               isFocused,
@@ -15519,16 +16019,16 @@ var DashboardDateRangePicker = React58.forwardRef(function DashboardDateRangePic
               tooltip
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime165.jsx)(
             DateRangePopover,
             {
-              isOpen: isOpen && !isMobile2,
+              isOpen: isOpen && !isMobile3,
               isMobile: false,
               openDirection,
               drawerTitle,
               drawerDescription,
               onClose: closeCalendar,
-              children: /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime165.jsx)(
                 DateRangeCalendar,
                 {
                   value,
@@ -15549,16 +16049,16 @@ var DashboardDateRangePicker = React58.forwardRef(function DashboardDateRangePic
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime165.jsx)(
           DateRangePopover,
           {
-            isOpen: isOpen && isMobile2,
+            isOpen: isOpen && isMobile3,
             isMobile: true,
             openDirection,
             drawerTitle,
             drawerDescription,
             onClose: closeCalendar,
-            children: /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime165.jsx)(
               DateRangeCalendar,
               {
                 value,
@@ -15578,9 +16078,9 @@ var DashboardDateRangePicker = React58.forwardRef(function DashboardDateRangePic
             )
           }
         ),
-        !error && optional && /* @__PURE__ */ (0, import_jsx_runtime163.jsx)("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__ */ (0, import_jsx_runtime163.jsx)("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
-        error && !hideErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime163.jsx)(
+        !error && optional && /* @__PURE__ */ (0, import_jsx_runtime165.jsx)("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__ */ (0, import_jsx_runtime165.jsx)("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
+        error && !hideErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime165.jsx)(
           FieldErrorMessage,
           {
             id: errorId,
@@ -15595,7 +16095,7 @@ var DashboardDateRangePicker = React58.forwardRef(function DashboardDateRangePic
 
 // src/dashboard/date-range-picker/useValidateDates.ts
 var React59 = __toESM(require("react"), 1);
-var import_react_i18next35 = require("react-i18next");
+var import_react_i18next37 = require("react-i18next");
 var import_date_fns4 = require("date-fns");
 var import_react_day_picker2 = require("react-day-picker");
 function isAfterMax(date, maxDate) {
@@ -15614,7 +16114,7 @@ function useValidateDates({
   onSuccess,
   displayFormat
 }) {
-  const { t } = (0, import_react_i18next35.useTranslation)();
+  const { t } = (0, import_react_i18next37.useTranslation)();
   const handleError = useEvent(onError);
   const handleSuccess = useEvent(onSuccess);
   const errorFormatter = React59.useMemo(
@@ -15673,7 +16173,7 @@ function useValidateDates({
 // src/dashboard/time-picker/TimePicker.tsx
 var React60 = __toESM(require("react"), 1);
 var import_date_fns5 = require("date-fns");
-var import_jsx_runtime164 = require("react/jsx-runtime");
+var import_jsx_runtime166 = require("react/jsx-runtime");
 var SHORT_TIME_FORMAT = "HH:mm";
 function parseTime(value) {
   return (0, import_date_fns5.parse)(value, SHORT_TIME_FORMAT, /* @__PURE__ */ new Date());
@@ -15722,15 +16222,15 @@ var DashboardTimePicker = React60.forwardRef(
       const settings = timeSettings ?? FORMAT_SETTINGS[formatName];
       return buildOptions(settings);
     }, [formatName, options, timeSettings]);
-    return /* @__PURE__ */ (0, import_jsx_runtime164.jsx)(DashboardSelect, { ref, ...selectProps, options: resolvedOptions });
+    return /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(DashboardSelect, { ref, ...selectProps, options: resolvedOptions });
   }
 );
 
 // src/dashboard/file-input/FileInput.tsx
 var React61 = __toESM(require("react"), 1);
-var import_lucide_react47 = require("lucide-react");
-var import_react_i18next36 = require("react-i18next");
-var import_jsx_runtime165 = require("react/jsx-runtime");
+var import_lucide_react48 = require("lucide-react");
+var import_react_i18next38 = require("react-i18next");
+var import_jsx_runtime167 = require("react/jsx-runtime");
 function defaultDownload(url) {
   window.open(url, "_blank", "noopener,noreferrer");
 }
@@ -15759,7 +16259,7 @@ var DashboardFileInput = React61.forwardRef(
   }, ref) {
     const internalRef = React61.useRef(null);
     const inputRef = useCombinedRef(ref, internalRef);
-    const { t } = (0, import_react_i18next36.useTranslation)();
+    const { t } = (0, import_react_i18next38.useTranslation)();
     const resolvedLabel = label ?? t("upload_file");
     const resolvedDownloadLabel = downloadLabel ?? t("download_attachment");
     const reactId = React61.useId();
@@ -15788,7 +16288,7 @@ var DashboardFileInput = React61.forwardRef(
       event.stopPropagation();
       if (isUrl) onDownload(value);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime165.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime167.jsxs)(
       "label",
       {
         htmlFor: inputId,
@@ -15801,7 +16301,7 @@ var DashboardFileInput = React61.forwardRef(
         ),
         style: wrapperWidth ? { width: wrapperWidth } : void 0,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime165.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(
             "input",
             {
               ref: inputRef,
@@ -15817,9 +16317,9 @@ var DashboardFileInput = React61.forwardRef(
               "aria-invalid": isInvalid
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime165.jsxs)("div", { className: "relative min-h-[68px] w-full", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime165.jsxs)("div", { className: "relative w-full", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime165.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime167.jsxs)("div", { className: "relative min-h-[68px] w-full", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime167.jsxs)("div", { className: "relative w-full", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime167.jsxs)(
                 "div",
                 {
                   className: cn(
@@ -15827,25 +16327,25 @@ var DashboardFileInput = React61.forwardRef(
                     isEmpty && "bg-[var(--chekin-color-surface-input-empty)]"
                   ),
                   children: [
-                    hasFileChip ? /* @__PURE__ */ (0, import_jsx_runtime165.jsxs)(
+                    hasFileChip ? /* @__PURE__ */ (0, import_jsx_runtime167.jsxs)(
                       "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__ */ (0, import_jsx_runtime165.jsxs)(
+                          isUrl ? /* @__PURE__ */ (0, import_jsx_runtime167.jsxs)(
                             "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__ */ (0, import_jsx_runtime165.jsx)("span", { className: "truncate", children: resolvedDownloadLabel }),
-                                /* @__PURE__ */ (0, import_jsx_runtime165.jsx)(import_lucide_react47.Download, { size: 15 })
+                                /* @__PURE__ */ (0, import_jsx_runtime167.jsx)("span", { className: "truncate", children: resolvedDownloadLabel }),
+                                /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(import_lucide_react48.Download, { size: 15 })
                               ]
                             }
-                          ) : /* @__PURE__ */ (0, import_jsx_runtime165.jsx)("span", { className: "truncate text-[14px] font-medium text-[var(--chekin-color-brand-navy)]", children: value.name }),
-                          /* @__PURE__ */ (0, import_jsx_runtime165.jsx)(
+                          ) : /* @__PURE__ */ (0, import_jsx_runtime167.jsx)("span", { className: "truncate text-[14px] font-medium text-[var(--chekin-color-brand-navy)]", children: value.name }),
+                          /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(
                             "button",
                             {
                               type: "button",
@@ -15853,20 +16353,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__ */ (0, import_jsx_runtime165.jsx)(import_lucide_react47.SquareX, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
+                              children: /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(import_lucide_react48.SquareX, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
                             }
                           )
                         ]
                       }
-                    ) : /* @__PURE__ */ (0, import_jsx_runtime165.jsx)("span", { className: "block min-w-0 flex-1 truncate text-left text-[var(--chekin-color-gray-1)]", children: placeholder ?? "" }),
-                    /* @__PURE__ */ (0, import_jsx_runtime165.jsxs)("span", { className: "ml-auto flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: [
-                      loading && /* @__PURE__ */ (0, import_jsx_runtime165.jsx)(ThreeDotsLoader, { height: 18, width: 18 }),
-                      /* @__PURE__ */ (0, import_jsx_runtime165.jsx)(import_lucide_react47.Paperclip, { size: 20 })
+                    ) : /* @__PURE__ */ (0, import_jsx_runtime167.jsx)("span", { className: "block min-w-0 flex-1 truncate text-left text-[var(--chekin-color-gray-1)]", children: placeholder ?? "" }),
+                    /* @__PURE__ */ (0, import_jsx_runtime167.jsxs)("span", { className: "ml-auto flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: [
+                      loading && /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(ThreeDotsLoader, { height: 18, width: 18 }),
+                      /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(import_lucide_react48.Paperclip, { size: 20 })
                     ] })
                   ]
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime165.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(
                 Fieldset,
                 {
                   isFocused: false,
@@ -15884,9 +16384,9 @@ var DashboardFileInput = React61.forwardRef(
                 }
               )
             ] }),
-            !error && optional && /* @__PURE__ */ (0, import_jsx_runtime165.jsx)("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__ */ (0, import_jsx_runtime165.jsx)("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
-            error && !hideErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime165.jsx)(
+            !error && optional && /* @__PURE__ */ (0, import_jsx_runtime167.jsx)("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__ */ (0, import_jsx_runtime167.jsx)("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
+            error && !hideErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(
               FieldErrorMessage,
               {
                 id: errorId,
@@ -15903,7 +16403,7 @@ var DashboardFileInput = React61.forwardRef(
 
 // src/dashboard/select-icons-box/SelectIconsBox.tsx
 var React62 = __toESM(require("react"), 1);
-var import_jsx_runtime166 = require("react/jsx-runtime");
+var import_jsx_runtime168 = require("react/jsx-runtime");
 function DashboardSelectIconsBox({
   children,
   icons,
@@ -15939,7 +16439,7 @@ function DashboardSelectIconsBox({
     onSelect(iconName);
     setOpen(false);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime166.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime168.jsxs)(
     "div",
     {
       ref: containerRef,
@@ -15947,7 +16447,7 @@ function DashboardSelectIconsBox({
       className: cn("relative inline-block", className),
       children: [
         children,
-        isOpen && /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(
+        isOpen && /* @__PURE__ */ (0, import_jsx_runtime168.jsx)(
           "div",
           {
             className: cn(
@@ -15958,7 +16458,7 @@ function DashboardSelectIconsBox({
               boxClassName
             ),
             style: { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` },
-            children: icons.map((iconName) => /* @__PURE__ */ (0, import_jsx_runtime166.jsx)(
+            children: icons.map((iconName) => /* @__PURE__ */ (0, import_jsx_runtime168.jsx)(
               "button",
               {
                 type: "button",
@@ -16039,14 +16539,14 @@ function getErrorMessage(error) {
 
 // src/lib/toastResponseError.tsx
 var import_i18next = __toESM(require("i18next"), 1);
-var import_jsx_runtime167 = require("react/jsx-runtime");
+var import_jsx_runtime169 = require("react/jsx-runtime");
 function addSupportEmailToMessage(message, prefixText) {
   if (typeof message !== "string") {
     return message;
   }
   const builtMessage = `${prefixText ? `${prefixText} ` : ""}${message}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime167.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime167.jsx)("div", { children: builtMessage }),
+  return /* @__PURE__ */ (0, import_jsx_runtime169.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime169.jsx)("div", { children: builtMessage }),
     import_i18next.default.t("reach_us_at_email")
   ] });
 }
@@ -16061,13 +16561,13 @@ function toastResponseError(error, options = {}) {
 }
 
 // src/legacy-fields/textarea/Textarea.tsx
-var import_react86 = require("react");
-var import_jsx_runtime168 = require("react/jsx-runtime");
-var LegacyTextarea = (0, import_react86.forwardRef)(
+var import_react89 = require("react");
+var import_jsx_runtime170 = require("react/jsx-runtime");
+var LegacyTextarea = (0, import_react89.forwardRef)(
   ({ className, textareaClassName, label, disabled, name, invalid, ...textareaProps }, ref) => {
-    const inputId = (0, import_react86.useId)();
-    return /* @__PURE__ */ (0, import_jsx_runtime168.jsxs)("div", { className: cn("relative", className), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime168.jsx)(
+    const inputId = (0, import_react89.useId)();
+    return /* @__PURE__ */ (0, import_jsx_runtime170.jsxs)("div", { className: cn("relative", className), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime170.jsx)(
         "textarea",
         {
           ref,
@@ -16083,7 +16583,7 @@ var LegacyTextarea = (0, import_react86.forwardRef)(
           ...textareaProps
         }
       ),
-      label && /* @__PURE__ */ (0, import_jsx_runtime168.jsx)(
+      label && /* @__PURE__ */ (0, import_jsx_runtime170.jsx)(
         "label",
         {
           htmlFor: inputId,
@@ -16102,13 +16602,13 @@ LegacyTextarea.displayName = "LegacyTextarea";
 
 // src/airbnb-fields/datepicker/DatePicker.tsx
 var React64 = __toESM(require("react"), 1);
-var import_lucide_react49 = require("lucide-react");
+var import_lucide_react50 = require("lucide-react");
 
 // src/airbnb-fields/field-trigger/FieldTrigger.tsx
 var React63 = __toESM(require("react"), 1);
-var import_lucide_react48 = require("lucide-react");
-var import_react_i18next37 = require("react-i18next");
-var import_jsx_runtime169 = require("react/jsx-runtime");
+var import_lucide_react49 = require("lucide-react");
+var import_react_i18next39 = require("react-i18next");
+var import_jsx_runtime171 = require("react/jsx-runtime");
 var AirbnbFieldTrigger = React63.forwardRef(
   ({
     as = "button",
@@ -16140,20 +16640,20 @@ var AirbnbFieldTrigger = React63.forwardRef(
     onKeyDown,
     ...props
   }, ref) => {
-    const { t } = (0, import_react_i18next37.useTranslation)();
+    const { t } = (0, import_react_i18next39.useTranslation)();
     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__ */ (0, import_jsx_runtime169.jsxs)("span", { className: "inline-flex max-w-full items-center gap-1.5 align-middle", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime169.jsx)("span", { className: "min-w-0 truncate", children: visibleLabelText }),
-      optionalLabel && /* @__PURE__ */ (0, import_jsx_runtime169.jsxs)("span", { className: "shrink-0 text-[12px] relative top-[1px] font-normal leading-4 text-current opacity-70", children: [
+    const resolvedLabelText = visibleLabelText && hasLabelMeta ? /* @__PURE__ */ (0, import_jsx_runtime171.jsxs)("span", { className: "inline-flex max-w-full items-center gap-1.5 align-middle", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime171.jsx)("span", { className: "min-w-0 truncate", children: visibleLabelText }),
+      optionalLabel && /* @__PURE__ */ (0, import_jsx_runtime171.jsxs)("span", { className: "shrink-0 text-[12px] relative top-[1px] font-normal leading-4 text-current opacity-70", children: [
         "(",
         optionalLabel,
         ")"
       ] }),
-      tooltip && /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(
+      tooltip && /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(
         HelpTooltip,
         {
           content: tooltip,
@@ -16169,10 +16669,10 @@ 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__ */ (0, import_jsx_runtime169.jsxs)("span", { className: "flex items-center gap-2", children: [
+    const resolvedTrailingAdornment = loading || trailingAdornment ? /* @__PURE__ */ (0, import_jsx_runtime171.jsxs)("span", { className: "flex items-center gap-2", children: [
       trailingAdornment,
-      loading && /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(
-        import_lucide_react48.Loader2,
+      loading && /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(
+        import_lucide_react49.Loader2,
         {
           "aria-hidden": "true",
           className: "h-5 w-5 animate-spin text-[var(--chekin-color-gray-1)]"
@@ -16187,8 +16687,8 @@ var AirbnbFieldTrigger = React63.forwardRef(
       disabled ? "cursor-not-allowed opacity-50" : loading ? "cursor-progress" : isAirbnbVariant ? "cursor-pointer" : "cursor-text",
       className
     );
-    const sharedContent = /* @__PURE__ */ (0, import_jsx_runtime169.jsxs)(import_jsx_runtime169.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime169.jsxs)(
+    const sharedContent = /* @__PURE__ */ (0, import_jsx_runtime171.jsxs)(import_jsx_runtime171.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime171.jsxs)(
         "span",
         {
           className: cn(
@@ -16197,7 +16697,7 @@ var AirbnbFieldTrigger = React63.forwardRef(
             contentClassName
           ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(
               "span",
               {
                 id: labelId,
@@ -16210,7 +16710,7 @@ var AirbnbFieldTrigger = React63.forwardRef(
                 children: animatedLabel
               }
             ),
-            children ? children : hasValue ? /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(
+            children ? children : hasValue ? /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(
               "span",
               {
                 id: valueId,
@@ -16221,11 +16721,11 @@ var AirbnbFieldTrigger = React63.forwardRef(
                 ),
                 children: valueText
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime169.jsx)("span", { id: helperTextId, className: "sr-only", children: placeholder ?? label })
+            ) : /* @__PURE__ */ (0, import_jsx_runtime171.jsx)("span", { id: helperTextId, className: "sr-only", children: placeholder ?? label })
           ]
         }
       ),
-      resolvedTrailingAdornment && /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(
+      resolvedTrailingAdornment && /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(
         "span",
         {
           "aria-hidden": "true",
@@ -16237,9 +16737,9 @@ var AirbnbFieldTrigger = React63.forwardRef(
         }
       )
     ] });
-    return /* @__PURE__ */ (0, import_jsx_runtime169.jsxs)("div", { className: "w-full", children: [
-      topLabel && /* @__PURE__ */ (0, import_jsx_runtime169.jsx)("p", { className: "mb-3 text-[16px] font-semibold leading-5 text-[#222222]", children: topLabel }),
-      as === "button" ? /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime171.jsxs)("div", { className: "w-full", children: [
+      topLabel && /* @__PURE__ */ (0, import_jsx_runtime171.jsx)("p", { className: "mb-3 text-[16px] font-semibold leading-5 text-[#222222]", children: topLabel }),
+      as === "button" ? /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(
         "button",
         {
           id,
@@ -16256,7 +16756,7 @@ var AirbnbFieldTrigger = React63.forwardRef(
           ...props,
           children: sharedContent
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(
+      ) : /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(
         "div",
         {
           id,
@@ -16273,14 +16773,14 @@ var AirbnbFieldTrigger = React63.forwardRef(
           children: sharedContent
         }
       ),
-      errorMessage && !hideErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(FieldErrorMessage, { id: errorId, message: errorMessage })
+      errorMessage && !hideErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(FieldErrorMessage, { id: errorId, message: errorMessage })
     ] });
   }
 );
 AirbnbFieldTrigger.displayName = "AirbnbFieldTrigger";
 
 // src/airbnb-fields/datepicker/DatePicker.tsx
-var import_jsx_runtime170 = require("react/jsx-runtime");
+var import_jsx_runtime172 = require("react/jsx-runtime");
 var DEFAULT_MIN_DATE = new Date(1920, 0, 1);
 var AirbnbDatePicker = React64.forwardRef(
   ({
@@ -16307,7 +16807,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();
@@ -16397,8 +16897,8 @@ var AirbnbDatePicker = React64.forwardRef(
         setIsOpen(false);
       }
     }, [isBlocked]);
-    return /* @__PURE__ */ (0, import_jsx_runtime170.jsxs)("div", { className: cn("relative w-full max-w-[var(--max-field-width)]", className), children: [
-      name && /* @__PURE__ */ (0, import_jsx_runtime170.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime172.jsxs)("div", { className: cn("relative w-full max-w-[var(--max-field-width)]", className), children: [
+      name && /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(
         "input",
         {
           type: "hidden",
@@ -16406,7 +16906,7 @@ var AirbnbDatePicker = React64.forwardRef(
           value: resolvedValue ? formatDateInputValue(resolvedValue) : ""
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime170.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(
         AirbnbFieldTrigger,
         {
           id: triggerId,
@@ -16433,15 +16933,15 @@ var AirbnbDatePicker = React64.forwardRef(
           onClick: handleTriggerClick,
           onKeyDown: handleTriggerKeyDown,
           onBlur,
-          trailingAdornment: /* @__PURE__ */ (0, import_jsx_runtime170.jsx)(import_lucide_react49.Calendar, { className: "h-5 w-5 text-[#1F1F1B]", strokeWidth: 2 })
+          trailingAdornment: /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(import_lucide_react50.Calendar, { className: "h-5 w-5 text-[#1F1F1B]", strokeWidth: 2 })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime170.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime172.jsx)(
         AirbnbDatePickerContent,
         {
           baseId: pickerId,
           open: isOpen,
-          isMobile: isMobile2,
+          isMobile: isMobile3,
           label,
           title: mobileTitle ?? label,
           doneLabel,
@@ -16471,7 +16971,7 @@ AirbnbDatePicker.displayName = "AirbnbDatePicker";
 
 // src/airbnb-fields/input/Input.tsx
 var React65 = __toESM(require("react"), 1);
-var import_jsx_runtime171 = require("react/jsx-runtime");
+var import_jsx_runtime173 = require("react/jsx-runtime");
 var getInputValue = (value) => value != null ? String(value) : "";
 var AirbnbInput = React65.forwardRef(
   ({
@@ -16554,7 +17054,7 @@ var AirbnbInput = React65.forwardRef(
       setIsFocused(false);
       onBlur?.(event);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime171.jsx)("div", { className: cn("w-full max-w-[var(--max-field-width)]", wrapperClassName), children: /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime173.jsx)("div", { className: cn("w-full max-w-[var(--max-field-width)]", wrapperClassName), children: /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
       AirbnbFieldTrigger,
       {
         as: "div",
@@ -16586,7 +17086,7 @@ var AirbnbInput = React65.forwardRef(
         forceFloatingLabel: shouldShowLabel,
         forceLabelText: hasLabelMeta,
         hideErrorMessage: !renderErrorMessage,
-        children: /* @__PURE__ */ (0, import_jsx_runtime171.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
           "input",
           {
             ...props,
@@ -16623,13 +17123,13 @@ AirbnbInput.displayName = "AirbnbInput";
 
 // src/airbnb-fields/phone-field/PhoneField.tsx
 var React71 = __toESM(require("react"), 1);
-var import_lucide_react51 = require("lucide-react");
+var import_lucide_react52 = require("lucide-react");
 
 // src/airbnb-fields/select/Select.tsx
 var React70 = __toESM(require("react"), 1);
 
 // src/airbnb-fields/select/SelectDesktopMenu.tsx
-var import_jsx_runtime172 = require("react/jsx-runtime");
+var import_jsx_runtime174 = require("react/jsx-runtime");
 function AirbnbSelectDesktopMenu({
   id,
   options,
@@ -16648,7 +17148,7 @@ function AirbnbSelectDesktopMenu({
   noOptionsMessage
 }) {
   const emptyMessage = noOptionsMessage?.();
-  return /* @__PURE__ */ (0, import_jsx_runtime172.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime174.jsxs)(
     "div",
     {
       id,
@@ -16661,12 +17161,12 @@ function AirbnbSelectDesktopMenu({
       onKeyDown,
       className: cn("max-h-[280px] overflow-y-auto p-2 outline-none", menuClassName),
       children: [
-        options.length === 0 && emptyMessage ? /* @__PURE__ */ (0, import_jsx_runtime172.jsx)("div", { className: "px-4 py-3 text-base leading-6 text-[#6C6C6C]", children: emptyMessage }) : null,
+        options.length === 0 && emptyMessage ? /* @__PURE__ */ (0, import_jsx_runtime174.jsx)("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__ */ (0, import_jsx_runtime172.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(
             "button",
             {
               id: getOptionId2(index),
@@ -16698,7 +17198,7 @@ function AirbnbSelectDesktopMenu({
 }
 
 // src/airbnb-fields/select/SelectDesktopContent.tsx
-var import_jsx_runtime173 = require("react/jsx-runtime");
+var import_jsx_runtime175 = require("react/jsx-runtime");
 function AirbnbSelectDesktopContent({
   isOpen,
   listboxId,
@@ -16719,14 +17219,14 @@ function AirbnbSelectDesktopContent({
   noOptionsMessage
 }) {
   if (!isOpen) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime175.jsx)(
     "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__ */ (0, import_jsx_runtime173.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime175.jsx)(
         AirbnbSelectDesktopMenu,
         {
           id: listboxId,
@@ -16824,7 +17324,7 @@ function getMobileOptionStyles(index, scrollTop) {
 }
 
 // src/airbnb-fields/select/SelectMobileWheel.tsx
-var import_jsx_runtime174 = require("react/jsx-runtime");
+var import_jsx_runtime176 = require("react/jsx-runtime");
 function AirbnbSelectMobileWheel({
   id,
   options,
@@ -16843,7 +17343,7 @@ function AirbnbSelectMobileWheel({
 }) {
   const spacerHeight2 = getWheelSpacerHeight();
   const emptyMessage = noOptionsMessage?.();
-  return /* @__PURE__ */ (0, import_jsx_runtime174.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime176.jsxs)(
     "div",
     {
       id,
@@ -16855,10 +17355,10 @@ function AirbnbSelectMobileWheel({
       onKeyDown,
       className: cn("relative overflow-hidden outline-none", menuClassName),
       children: [
-        options.length === 0 && emptyMessage ? /* @__PURE__ */ (0, import_jsx_runtime174.jsx)("div", { className: "flex min-h-[160px] items-center justify-center px-4 text-center text-base leading-6 text-[#6C6C6C]", children: emptyMessage }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime174.jsx)("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__ */ (0, import_jsx_runtime174.jsx)("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__ */ (0, import_jsx_runtime174.jsx)(
+        options.length === 0 && emptyMessage ? /* @__PURE__ */ (0, import_jsx_runtime176.jsx)("div", { className: "flex min-h-[160px] items-center justify-center px-4 text-center text-base leading-6 text-[#6C6C6C]", children: emptyMessage }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime176.jsx)("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__ */ (0, import_jsx_runtime176.jsx)("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__ */ (0, import_jsx_runtime176.jsx)(
           "div",
           {
             "aria-hidden": true,
@@ -16868,7 +17368,7 @@ function AirbnbSelectMobileWheel({
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime174.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime176.jsxs)(
           "div",
           {
             ref: listRef,
@@ -16883,11 +17383,11 @@ function AirbnbSelectMobileWheel({
               WebkitOverflowScrolling: "touch"
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime174.jsx)("div", { style: { height: `${spacerHeight2}px` } }),
+              /* @__PURE__ */ (0, import_jsx_runtime176.jsx)("div", { style: { height: `${spacerHeight2}px` } }),
               options.map((option, index) => {
                 const { distance, style } = getMobileOptionStyles(index, scrollTop);
                 const optionKey = `${String(option.value)}-${index}`;
-                return /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime176.jsx)(
                   "button",
                   {
                     id: getOptionId2(index),
@@ -16908,7 +17408,7 @@ function AirbnbSelectMobileWheel({
                   optionKey
                 );
               }),
-              /* @__PURE__ */ (0, import_jsx_runtime174.jsx)("div", { style: { height: `${spacerHeight2}px` } })
+              /* @__PURE__ */ (0, import_jsx_runtime176.jsx)("div", { style: { height: `${spacerHeight2}px` } })
             ]
           }
         )
@@ -16918,7 +17418,7 @@ function AirbnbSelectMobileWheel({
 }
 
 // src/airbnb-fields/select/SelectMobileContent.tsx
-var import_jsx_runtime175 = require("react/jsx-runtime");
+var import_jsx_runtime177 = require("react/jsx-runtime");
 function AirbnbSelectMobileContent({
   open,
   onOpenChange,
@@ -16942,11 +17442,11 @@ function AirbnbSelectMobileContent({
   getOptionId: getOptionId2,
   noOptionsMessage
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime175.jsx)(Drawer, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime175.jsxs)(DrawerContent, { onClose, lockScroll: false, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime175.jsx)(DrawerTitle, { className: "sr-only", children: mobileTitle ?? label }),
-    /* @__PURE__ */ (0, import_jsx_runtime175.jsx)(DrawerDescription, { className: "sr-only", children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime175.jsxs)("div", { className: "px-6 pb-4 pt-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime175.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(Drawer, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime177.jsxs)(DrawerContent, { onClose, lockScroll: false, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(DrawerTitle, { className: "sr-only", children: mobileTitle ?? label }),
+    /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(DrawerDescription, { className: "sr-only", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime177.jsxs)("div", { className: "px-6 pb-4 pt-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(
         AirbnbSelectMobileWheel,
         {
           id: listboxId,
@@ -16965,15 +17465,15 @@ function AirbnbSelectMobileContent({
           noOptionsMessage
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime175.jsx)(Button, { type: "button", onClick: onDone, className: "mt-4 h-12 mb-8 w-full", children: doneLabel })
+      /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(Button, { type: "button", onClick: onDone, className: "mt-4 h-12 mb-8 w-full", children: doneLabel })
     ] })
   ] }) });
 }
 
 // src/airbnb-fields/select/SelectTrigger.tsx
 var React66 = __toESM(require("react"), 1);
-var import_lucide_react50 = require("lucide-react");
-var import_jsx_runtime176 = require("react/jsx-runtime");
+var import_lucide_react51 = require("lucide-react");
+var import_jsx_runtime178 = require("react/jsx-runtime");
 var AirbnbSelectTrigger = React66.forwardRef(
   ({
     id,
@@ -16999,7 +17499,7 @@ var AirbnbSelectTrigger = React66.forwardRef(
     onKeyDown,
     onBlur
   }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime176.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(
       AirbnbFieldTrigger,
       {
         id,
@@ -17028,8 +17528,8 @@ var AirbnbSelectTrigger = React66.forwardRef(
         onClick,
         onKeyDown,
         onBlur,
-        trailingAdornment: /* @__PURE__ */ (0, import_jsx_runtime176.jsx)(
-          import_lucide_react50.ChevronDown,
+        trailingAdornment: /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(
+          import_lucide_react51.ChevronDown,
           {
             className: open ? "h-6 w-6 rotate-180 text-[#1F1F1B] transition-transform" : "h-6 w-6 text-[#1F1F1B] transition-transform"
           }
@@ -17043,7 +17543,7 @@ AirbnbSelectTrigger.displayName = "AirbnbSelectTrigger";
 // src/airbnb-fields/select/useDesktopSelect.ts
 var React67 = __toESM(require("react"), 1);
 function useDesktopSelect({
-  isMobile: isMobile2,
+  isMobile: isMobile3,
   isOpen,
   options,
   value,
@@ -17056,7 +17556,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;
@@ -17069,13 +17569,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);
@@ -17193,7 +17693,7 @@ function useDesktopSelect({
 
 // src/airbnb-fields/select/useMobileSelectWheel.ts
 var React68 = __toESM(require("react"), 1);
-function useMobileSelectWheel({ isMobile: isMobile2, isOpen, options, value, disabled }) {
+function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, disabled }) {
   const [pendingValue, setPendingValue] = React68.useState(
     value ?? null
   );
@@ -17248,14 +17748,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);
@@ -17390,7 +17890,7 @@ function useSelectIds2({ name, hasValue, error, hideErrorMessage }) {
 }
 
 // src/airbnb-fields/select/Select.tsx
-var import_jsx_runtime177 = require("react/jsx-runtime");
+var import_jsx_runtime179 = require("react/jsx-runtime");
 var AirbnbSelect = React70.forwardRef(function AirbnbSelect2({
   options = [],
   value,
@@ -17417,7 +17917,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);
@@ -17448,7 +17948,7 @@ var AirbnbSelect = React70.forwardRef(function AirbnbSelect2({
     moveByStep,
     moveToBoundary
   } = useMobileSelectWheel({
-    isMobile: isMobile2,
+    isMobile: isMobile3,
     isOpen,
     options,
     value,
@@ -17465,7 +17965,7 @@ var AirbnbSelect = React70.forwardRef(function AirbnbSelect2({
     handleMenuKeyDown,
     handleTriggerKeyDown
   } = useDesktopSelect({
-    isMobile: isMobile2,
+    isMobile: isMobile3,
     isOpen,
     options,
     value,
@@ -17478,7 +17978,7 @@ var AirbnbSelect = React70.forwardRef(function AirbnbSelect2({
   useOutsideClick({
     elementRef: containerRef,
     onOutsideClick: () => setIsOpen(false),
-    isDisabled: !isOpen || isMobile2
+    isDisabled: !isOpen || isMobile3
   });
   React70.useEffect(() => {
     if (isBlocked) {
@@ -17521,14 +18021,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();
@@ -17570,13 +18070,13 @@ var AirbnbSelect = React70.forwardRef(function AirbnbSelect2({
       handleMobileOpenChange(false);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime177.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime179.jsxs)(
     "div",
     {
       ref: containerRef,
       className: cn("relative w-full max-w-[var(--max-field-width)]", className),
       children: [
-        name && /* @__PURE__ */ (0, import_jsx_runtime177.jsx)("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
+        name && /* @__PURE__ */ (0, import_jsx_runtime179.jsx)("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
         renderTrigger ? renderTrigger({
           id: triggerId,
           open: isOpen,
@@ -17598,7 +18098,7 @@ var AirbnbSelect = React70.forwardRef(function AirbnbSelect2({
           onClick: handleTriggerClick,
           onKeyDown: handleRootTriggerKeyDown,
           onBlur
-        }) : /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(
+        }) : /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(
           AirbnbSelectTrigger,
           {
             id: triggerId,
@@ -17626,7 +18126,7 @@ var AirbnbSelect = React70.forwardRef(function AirbnbSelect2({
             onBlur
           }
         ),
-        isMobile2 ? /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(
+        isMobile3 ? /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(
           AirbnbSelectMobileContent,
           {
             open: isOpen,
@@ -17651,7 +18151,7 @@ var AirbnbSelect = React70.forwardRef(function AirbnbSelect2({
             getOptionId: getOptionId2,
             noOptionsMessage
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime177.jsx)(
+        ) : /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(
           AirbnbSelectDesktopContent,
           {
             isOpen,
@@ -17685,7 +18185,7 @@ var AirbnbSelect = React70.forwardRef(function AirbnbSelect2({
 });
 
 // src/airbnb-fields/phone-field/PhoneField.tsx
-var import_jsx_runtime178 = require("react/jsx-runtime");
+var import_jsx_runtime180 = require("react/jsx-runtime");
 function formatPhoneCodeOptionLabel(option) {
   const label = String(option.label);
   const value = String(option.value);
@@ -17732,9 +18232,9 @@ var AirbnbPhoneField = React71.forwardRef(
     const hasInvalidState = Boolean(error) || Boolean(invalid);
     const isBlocked = Boolean(disabled) || Boolean(loading);
     const isCodeBlocked = isBlocked || Boolean(codeReadOnly);
-    return /* @__PURE__ */ (0, import_jsx_runtime178.jsxs)("div", { className: cn("w-full max-w-[var(--max-field-width)]", className), children: [
-      name && /* @__PURE__ */ (0, import_jsx_runtime178.jsx)("input", { type: "hidden", name, value: combinedValue, disabled }),
-      codeName && /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime180.jsxs)("div", { className: cn("w-full max-w-[var(--max-field-width)]", className), children: [
+      name && /* @__PURE__ */ (0, import_jsx_runtime180.jsx)("input", { type: "hidden", name, value: combinedValue, disabled }),
+      codeName && /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(
         "input",
         {
           type: "hidden",
@@ -17743,7 +18243,7 @@ var AirbnbPhoneField = React71.forwardRef(
           disabled
         }
       ),
-      numberName && /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(
+      numberName && /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(
         "input",
         {
           type: "hidden",
@@ -17752,7 +18252,7 @@ var AirbnbPhoneField = React71.forwardRef(
           disabled
         }
       ),
-      topLabel && /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(
+      topLabel && /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(
         "label",
         {
           htmlFor: inputId,
@@ -17760,8 +18260,8 @@ var AirbnbPhoneField = React71.forwardRef(
           children: topLabel
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime178.jsxs)("div", { className: "flex items-stretch", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime180.jsxs)("div", { className: "flex items-stretch", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(
           AirbnbSelect,
           {
             ref,
@@ -17792,7 +18292,7 @@ var AirbnbPhoneField = React71.forwardRef(
               onClick,
               onKeyDown,
               valueLabel
-            }) => /* @__PURE__ */ (0, import_jsx_runtime178.jsxs)(
+            }) => /* @__PURE__ */ (0, import_jsx_runtime180.jsxs)(
               "button",
               {
                 id,
@@ -17814,9 +18314,9 @@ var AirbnbPhoneField = React71.forwardRef(
                   triggerDisabled ? "cursor-not-allowed opacity-50" : triggerLoading ? "cursor-progress" : "cursor-pointer"
                 ),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime178.jsx)("span", { children: valueLabel ?? codePlaceholder }),
-                  /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(
-                    import_lucide_react51.ChevronDown,
+                  /* @__PURE__ */ (0, import_jsx_runtime180.jsx)("span", { children: valueLabel ?? codePlaceholder }),
+                  /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(
+                    import_lucide_react52.ChevronDown,
                     {
                       className: cn("h-5 w-5 transition-transform", open ? "rotate-180" : ""),
                       strokeWidth: 2
@@ -17827,7 +18327,7 @@ var AirbnbPhoneField = React71.forwardRef(
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(
           AirbnbInput,
           {
             id: inputId,
@@ -17859,7 +18359,7 @@ var AirbnbPhoneField = React71.forwardRef(
           }
         )
       ] }),
-      error && /* @__PURE__ */ (0, import_jsx_runtime178.jsx)(FieldErrorMessage, { message: error })
+      error && /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(FieldErrorMessage, { message: error })
     ] });
   }
 );
@@ -17867,10 +18367,10 @@ AirbnbPhoneField.displayName = "AirbnbPhoneField";
 
 // src/airbnb-fields/searchable-select/SearchableSelect.tsx
 var React72 = __toESM(require("react"), 1);
-var import_lucide_react52 = require("lucide-react");
+var import_lucide_react53 = require("lucide-react");
 var import_react_virtual3 = require("@tanstack/react-virtual");
-var import_react87 = require("react");
-var import_jsx_runtime179 = require("react/jsx-runtime");
+var import_react90 = require("react");
+var import_jsx_runtime181 = require("react/jsx-runtime");
 var ROW_HEIGHT = 48;
 var DESKTOP_LIST_HEIGHT = 280;
 var MOBILE_LIST_HEIGHT = 420;
@@ -17910,7 +18410,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("");
@@ -17945,10 +18445,10 @@ var AirbnbSearchableSelectInternal = ({
   useOutsideClick({
     elementRef: containerRef,
     onOutsideClick: () => closeSelect(),
-    isDisabled: !open || isMobile2
+    isDisabled: !open || isMobile3
   });
   const handleOnOpenChange = useEvent(onOpenChange);
-  const setSelectOpen = (0, import_react87.useCallback)(
+  const setSelectOpen = (0, import_react90.useCallback)(
     (nextOpen, options2) => {
       setOpen(nextOpen);
       handleOnOpenChange?.(nextOpen);
@@ -18039,7 +18539,7 @@ var AirbnbSearchableSelectInternal = ({
       }
     }
   }
-  const content = /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(
+  const content = /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(
     AirbnbSearchableSelectContent,
     {
       inputId: searchInputId,
@@ -18058,7 +18558,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,
@@ -18067,9 +18567,9 @@ var AirbnbSearchableSelectInternal = ({
     }
   );
   React72.useImperativeHandle(ref, () => triggerRef.current, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime179.jsxs)("div", { ref: containerRef, className: cn("relative w-full max-w-[425px]", className), children: [
-    name && /* @__PURE__ */ (0, import_jsx_runtime179.jsx)("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
-    /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime181.jsxs)("div", { ref: containerRef, className: cn("relative w-full max-w-[425px]", className), children: [
+    name && /* @__PURE__ */ (0, import_jsx_runtime181.jsx)("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
+    /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(
       AirbnbFieldTrigger,
       {
         id: `${reactId}-trigger`,
@@ -18104,8 +18604,8 @@ var AirbnbSearchableSelectInternal = ({
         },
         onKeyDown: handleTriggerKeyDown,
         onBlur,
-        trailingAdornment: /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(
-          import_lucide_react52.ChevronDown,
+        trailingAdornment: /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(
+          import_lucide_react53.ChevronDown,
           {
             className: cn(
               "h-6 w-6 text-[#1F1F1B] transition-transform",
@@ -18115,7 +18615,7 @@ var AirbnbSearchableSelectInternal = ({
         )
       }
     ),
-    isMobile2 ? /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(
+    isMobile3 ? /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(
       Drawer,
       {
         open,
@@ -18127,13 +18627,13 @@ var AirbnbSearchableSelectInternal = ({
           }
           closeSelect();
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime179.jsxs)(DrawerContent, { onClose: closeSelect, lockScroll: false, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(DrawerTitle, { className: "sr-only", children: mobileTitle ?? label }),
-          /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(DrawerDescription, { className: "sr-only", children: label }),
-          /* @__PURE__ */ (0, import_jsx_runtime179.jsx)("div", { className: "px-5 pb-5 pt-1", children: content })
+        children: /* @__PURE__ */ (0, import_jsx_runtime181.jsxs)(DrawerContent, { onClose: closeSelect, lockScroll: false, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(DrawerTitle, { className: "sr-only", children: mobileTitle ?? label }),
+          /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(DrawerDescription, { className: "sr-only", children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime181.jsx)("div", { className: "px-5 pb-5 pt-1", children: content })
         ] })
       }
-    ) : open ? /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(
+    ) : open ? /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(
       "div",
       {
         className: cn(
@@ -18200,16 +18700,16 @@ function AirbnbSearchableSelectContent({
       virtualizer.scrollToIndex(highlightedIndex, { align: "auto" });
     }
   }, [highlightedIndex, virtualizer]);
-  return /* @__PURE__ */ (0, import_jsx_runtime179.jsxs)("div", { className: "p-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime179.jsxs)("div", { className: "relative mb-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(
-        import_lucide_react52.Search,
+  return /* @__PURE__ */ (0, import_jsx_runtime181.jsxs)("div", { className: "p-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime181.jsxs)("div", { className: "relative mb-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(
+        import_lucide_react53.Search,
         {
           "aria-hidden": "true",
           className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 text-[#9696B9]"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(
         "input",
         {
           id: inputId,
@@ -18228,7 +18728,7 @@ function AirbnbSearchableSelectContent({
         }
       )
     ] }),
-    loading && options.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime179.jsx)("div", { className: "px-4 py-5 text-center text-base leading-6 text-[#6C6C6C]", children: loadingText }) : options.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime179.jsx)("div", { className: "px-4 py-5 text-center text-base leading-6 text-[#6C6C6C]", children: emptyMessage }) : /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(
+    loading && options.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime181.jsx)("div", { className: "px-4 py-5 text-center text-base leading-6 text-[#6C6C6C]", children: loadingText }) : options.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime181.jsx)("div", { className: "px-4 py-5 text-center text-base leading-6 text-[#6C6C6C]", children: emptyMessage }) : /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(
       "div",
       {
         id: listboxId,
@@ -18237,7 +18737,7 @@ function AirbnbSearchableSelectContent({
         "aria-labelledby": labelId,
         className: cn("overflow-y-auto outline-none", menuClassName),
         style: { height: Math.min(height, rowCount * ROW_HEIGHT) },
-        children: /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(
           "div",
           {
             className: "relative w-full",
@@ -18245,7 +18745,7 @@ function AirbnbSearchableSelectContent({
             children: virtualItems.map((virtualItem) => {
               const option = options[virtualItem.index];
               if (!option) {
-                return /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(
                   "div",
                   {
                     className: "absolute left-0 top-0 flex w-full items-center px-4 text-base leading-6 text-[#6C6C6C]",
@@ -18260,7 +18760,7 @@ function AirbnbSearchableSelectContent({
               }
               const isSelected = value?.value === option.value;
               const isHighlighted = virtualItem.index === highlightedIndex;
-              return /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(
                 "button",
                 {
                   id: getOptionId(idPrefix, virtualItem.index),
@@ -18282,7 +18782,7 @@ function AirbnbSearchableSelectContent({
                     height: `${virtualItem.size}px`,
                     transform: `translateY(${virtualItem.start}px)`
                   },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime179.jsx)("span", { className: "truncate text-center", children: String(option.label) })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime181.jsx)("span", { className: "truncate text-center", children: String(option.label) })
                 },
                 `${String(option.value)}-${virtualItem.index}`
               );
@@ -18312,15 +18812,15 @@ function getNextEnabledIndex(options, startIndex, step) {
 
 // src/airbnb-fields/search-input/SearchInput.tsx
 var React73 = __toESM(require("react"), 1);
-var import_react_i18next38 = require("react-i18next");
-var import_lucide_react53 = require("lucide-react");
-var import_jsx_runtime180 = require("react/jsx-runtime");
+var import_react_i18next40 = require("react-i18next");
+var import_lucide_react54 = require("lucide-react");
+var import_jsx_runtime182 = require("react/jsx-runtime");
 var AirbnbSearchInput = React73.forwardRef(({ onReset, placeholder, wrapperClassName, ...props }, ref) => {
-  const { t } = (0, import_react_i18next38.useTranslation)();
+  const { t } = (0, import_react_i18next40.useTranslation)();
   const placeholderText = placeholder || t("search_property") + "...";
-  return /* @__PURE__ */ (0, import_jsx_runtime180.jsxs)("div", { className: cn("input-wrapper relative", wrapperClassName), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(import_lucide_react53.Search, { className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 transform text-[#9696B9]" }),
-    /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime182.jsxs)("div", { className: cn("input-wrapper relative", wrapperClassName), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(import_lucide_react54.Search, { className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 transform text-[#9696B9]" }),
+    /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(
       "input",
       {
         ...props,
@@ -18339,13 +18839,13 @@ var AirbnbSearchInput = React73.forwardRef(({ onReset, placeholder, wrapperClass
         )
       }
     ),
-    onReset && /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(
+    onReset && /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(
       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__ */ (0, import_jsx_runtime180.jsx)(import_lucide_react53.X, { className: "h-5 w-5" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime182.jsx)(import_lucide_react54.X, { className: "h-5 w-5" })
       }
     )
   ] });
@@ -18526,6 +19026,7 @@ AirbnbSearchInput.displayName = "AirbnbSearchInput";
   LegacyTextarea,
   Link,
   LoadingBar,
+  MobileWebcam,
   Modal,
   ModalButton,
   ModalLoader,