@chekinapp/ui 0.0.104 → 0.0.106

package/dist/index.js

@@ -2691,7 +2691,7 @@ function useIsMounted() {
 }
 
 // src/hooks/use-load-more.ts
-import { useEffect as useEffect8, useRef as useRef5 } from "react";
+import { useCallback as useCallback5, useEffect as useEffect8, useRef as useRef5 } from "react";
 function useLoadMore({
   hasNextPage,
   loading,
@@ -2700,39 +2700,56 @@ function useLoadMore({
   threshold = 0.1,
   rootMargin
 }) {
-  const loadMoreRef = useRef5(null);
+  const elementRef = useRef5(null);
+  const observerRef = useRef5(null);
+  const handleLoadMore = useEvent(onLoadMore);
+  const cleanupObserver = useCallback5(() => {
+    observerRef.current?.disconnect();
+    observerRef.current = null;
+  }, []);
+  const observeElement = useCallback5(
+    (element) => {
+      cleanupObserver();
+      if (!element || typeof IntersectionObserver === "undefined") return;
+      const observer = new IntersectionObserver(
+        (entries) => {
+          const entry = entries[0];
+          if (!entry?.isIntersecting || !hasNextPage || loading || disabled) return;
+          handleLoadMore();
+        },
+        { threshold, rootMargin }
+      );
+      observer.observe(element);
+      observerRef.current = observer;
+    },
+    [cleanupObserver, disabled, handleLoadMore, hasNextPage, loading, rootMargin, threshold]
+  );
+  const loadMoreRef = useCallback5(
+    (element) => {
+      elementRef.current = element;
+      observeElement(element);
+    },
+    [observeElement]
+  );
   useEffect8(() => {
-    const element = loadMoreRef.current;
-    if (!element) return;
-    const observer = new IntersectionObserver(
-      (entries) => {
-        if (entries[0].isIntersecting && hasNextPage && !loading && !disabled) {
-          onLoadMore();
-        }
-      },
-      { threshold, rootMargin }
-    );
-    observer.observe(element);
-    return () => {
-      observer.disconnect();
-    };
-  }, [hasNextPage, loading, disabled, onLoadMore, threshold, rootMargin]);
+    return cleanupObserver;
+  }, [cleanupObserver]);
   return [loadMoreRef];
 }
 
 // src/hooks/use-modal-controls.ts
-import { useCallback as useCallback5, useState as useState7 } from "react";
+import { useCallback as useCallback6, useState as useState7 } from "react";
 function useModalControls(initState = false, { disabled } = {}) {
   const [isOpen, setIsOpen] = useState7(initState);
-  const openModal = useCallback5(() => {
+  const openModal = useCallback6(() => {
     if (disabled) return;
     setIsOpen(true);
   }, [disabled]);
-  const closeModal = useCallback5(() => {
+  const closeModal = useCallback6(() => {
     if (disabled) return;
     setIsOpen(false);
   }, [disabled]);
-  const toggleModal = useCallback5(() => {
+  const toggleModal = useCallback6(() => {
     if (disabled) return;
     setIsOpen((value) => !value);
   }, [disabled]);
@@ -2746,13 +2763,13 @@ function useModalControls(initState = false, { disabled } = {}) {
 }
 
 // src/hooks/use-modal-with-history-controls.ts
-import { useCallback as useCallback7, useEffect as useEffect10, useRef as useRef7, useState as useState8 } from "react";
+import { useCallback as useCallback8, useEffect as useEffect10, useRef as useRef7, useState as useState8 } from "react";
 
 // src/hooks/use-timeout-ref.ts
-import { useCallback as useCallback6, useEffect as useEffect9, useRef as useRef6 } from "react";
+import { useCallback as useCallback7, useEffect as useEffect9, useRef as useRef6 } from "react";
 function useTimeoutRef() {
   const timeoutIdRef = useRef6();
-  const resetTimeout = useCallback6(() => {
+  const resetTimeout = useCallback7(() => {
     if (timeoutIdRef.current) {
       clearTimeout(timeoutIdRef.current);
     }
@@ -2784,7 +2801,7 @@ function useModalWithHistoryControls({
   const scrollRef = useRef7(0);
   const resetDelayRef = useRef7(false);
   const resetDelayTimeoutRef = useTimeoutRef();
-  const addHash = useCallback7(() => {
+  const addHash = useCallback8(() => {
     const targetWindow = getWindow();
     const historyState = targetWindow.history.state;
     if (enabled && historyState?.popupKey !== key) {
@@ -2801,11 +2818,11 @@ function useModalWithHistoryControls({
       targetWindow.scrollTo(0, scrollRef.current);
     }
   }, [enabled, key]);
-  const openModal = useCallback7(() => {
+  const openModal = useCallback8(() => {
     setIsOpen(true);
     addHash();
   }, [addHash]);
-  const resetHash = useCallback7(() => {
+  const resetHash = useCallback8(() => {
     const targetWindow = getWindow();
     const historyState = targetWindow.history.state;
     if (enabled && historyState?.popupKey === key && !resetDelayRef.current) {
@@ -2816,11 +2833,11 @@ function useModalWithHistoryControls({
       }, 300);
     }
   }, [enabled, key, resetDelayTimeoutRef]);
-  const closeModal = useCallback7(() => {
+  const closeModal = useCallback8(() => {
     setIsOpen(false);
     resetHash();
   }, [resetHash]);
-  const toggleModal = useCallback7(() => {
+  const toggleModal = useCallback8(() => {
     setIsOpen(!isOpen);
     if (isOpen) {
       resetHash();
@@ -2860,7 +2877,7 @@ function useModalWithHistoryControls({
 }
 
 // src/hooks/use-outside-click.ts
-import { useCallback as useCallback8, useEffect as useEffect11, useRef as useRef8 } from "react";
+import { useCallback as useCallback9, useEffect as useEffect11, useRef as useRef8 } from "react";
 function useOutsideClick({
   elementRef,
   onOutsideClick,
@@ -2870,7 +2887,7 @@ function useOutsideClick({
 }) {
   const handleOutsideClick = useRef8(onOutsideClick);
   handleOutsideClick.current = onOutsideClick;
-  const checkNestedElements = useCallback8(
+  const checkNestedElements = useCallback9(
     (event, ownerDocument) => {
       const checkIsElementClickedBySelector = (selector) => {
         const nestedElement = ownerDocument.querySelector(selector);
@@ -2962,12 +2979,12 @@ function useScreenResize(maxWidth, matchString) {
 }
 
 // src/hooks/use-lock-body-scroll.ts
-import { useCallback as useCallback9, useLayoutEffect as useLayoutEffect2 } from "react";
+import { useCallback as useCallback10, useLayoutEffect as useLayoutEffect2 } from "react";
 function useLockBodyScroll(needLock) {
-  const lockScroll = useCallback9(() => {
+  const lockScroll = useCallback10(() => {
     getDocument().getElementsByTagName("body")[0].style.overflow = "hidden";
   }, []);
-  const resetScroll = useCallback9(() => {
+  const resetScroll = useCallback10(() => {
     getDocument().getElementsByTagName("body")[0].style.overflow = "auto";
   }, []);
   useLayoutEffect2(() => {
@@ -3083,12 +3100,12 @@ function useDebounce(value, delayMs = 1e3, handleChange) {
 }
 
 // src/hooks/use-debounced-function.ts
-import { useCallback as useCallback10, useRef as useRef10 } from "react";
+import { useCallback as useCallback11, useRef as useRef10 } from "react";
 function useDebouncedFunction(callback, delay) {
   const timerRef = useRef10();
   const immediateCalling = useRef10(false);
   const callbackFn = useEvent(callback);
-  const throttled = useCallback10(
+  const throttled = useCallback11(
     (...args) => {
       clearTimeout(timerRef.current);
       if (immediateCalling.current) {
@@ -3103,7 +3120,7 @@ function useDebouncedFunction(callback, delay) {
     },
     [callbackFn, delay]
   );
-  const immediate = useCallback10(() => {
+  const immediate = useCallback11(() => {
     immediateCalling.current = true;
   }, []);
   return { throttled, immediate };
@@ -3120,7 +3137,7 @@ function usePrevious(value, defaultValue) {
 }
 
 // src/hooks/use-pagination.ts
-import { useCallback as useCallback11, useEffect as useEffect16, useMemo, useState as useState11 } from "react";
+import { useCallback as useCallback12, useEffect as useEffect16, useMemo, useState as useState11 } from "react";
 
 // src/storage/AbstractStorage.ts
 var AbstractStorage = class {
@@ -3223,14 +3240,14 @@ function usePagination(config) {
     return Math.min(state.page * state.pageSize, state.totalItems);
   }, [state.page, state.pageSize, state.totalItems]);
   const isEmpty = useMemo(() => state.totalItems === 0, [state.totalItems]);
-  const setPage = useCallback11(
+  const setPage = useCallback12(
     (page) => {
       const clampedPage = Math.max(1, Math.min(page, pages || 1));
       setState((prev) => ({ ...prev, page: clampedPage }));
     },
     [pages]
   );
-  const setPageSize = useCallback11((pageSize) => {
+  const setPageSize = useCallback12((pageSize) => {
     const validPageSize = Math.max(1, pageSize);
     setState((prev) => {
       const currentFirstItem = (prev.page - 1) * prev.pageSize + 1;
@@ -3242,7 +3259,7 @@ function usePagination(config) {
       };
     });
   }, []);
-  const setTotalItems = useCallback11((totalItems) => {
+  const setTotalItems = useCallback12((totalItems) => {
     const validTotalItems = Math.max(0, totalItems);
     setState((prev) => {
       const newPages = validTotalItems > 0 ? Math.ceil(validTotalItems / prev.pageSize) : 0;
@@ -3254,19 +3271,19 @@ function usePagination(config) {
       };
     });
   }, []);
-  const nextPage = useCallback11(() => {
+  const nextPage = useCallback12(() => {
     setPage(state.page + 1);
   }, [setPage, state.page]);
-  const previousPage = useCallback11(() => {
+  const previousPage = useCallback12(() => {
     setPage(state.page - 1);
   }, [setPage, state.page]);
-  const goToFirstPage = useCallback11(() => {
+  const goToFirstPage = useCallback12(() => {
     setPage(1);
   }, [setPage]);
-  const goToLastPage = useCallback11(() => {
+  const goToLastPage = useCallback12(() => {
     setPage(pages);
   }, [setPage, pages]);
-  const reset = useCallback11(() => {
+  const reset = useCallback12(() => {
     setState({
       page: defaultPage,
       pageSize: defaultPageSize,
@@ -3295,11 +3312,11 @@ function usePagination(config) {
 }
 
 // src/hooks/use-search-input.ts
-import { useCallback as useCallback12, useState as useState12 } from "react";
+import { useCallback as useCallback13, useState as useState12 } from "react";
 function useSearchInput({ value, onChange }) {
   const [innerValue, setInnerValue] = useState12(value || "");
   const [, setDebouncedValue] = useDebounce(innerValue, 600, onChange);
-  const handleChange = useCallback12(
+  const handleChange = useCallback13(
     (event) => {
       if (event.target.value === "") {
         setDebouncedValue("");
@@ -3349,7 +3366,7 @@ function useStickyStuck(ref) {
 }
 
 // src/hooks/use-switch-section-active.ts
-import { useCallback as useCallback13, useEffect as useEffect18, useLayoutEffect as useLayoutEffect3, useState as useState14 } from "react";
+import { useCallback as useCallback14, useEffect as useEffect18, useLayoutEffect as useLayoutEffect3, useState as useState14 } from "react";
 function useSwitchSectionActive(preloadedSectionActive, { canToggle, onToggle, onSectionActiveChange, onTouched } = {}) {
   const [isSectionActive, setIsSectionActive] = useState14(false);
   const [preloadedIsSendingEnabled, setPreloadedIsSendingEnabled] = useState14(null);
@@ -3367,7 +3384,7 @@ function useSwitchSectionActive(preloadedSectionActive, { canToggle, onToggle, o
     },
     [preloadedSectionActive]
   );
-  const toggleIsSectionActive = useCallback13(() => {
+  const toggleIsSectionActive = useCallback14(() => {
     const isTogglingDisabled = canToggle && !canToggle(isSectionActive);
     if (isTogglingDisabled) {
       return;
@@ -3468,13 +3485,13 @@ function useTimeout(callback, ms = 0) {
 }
 
 // src/hooks/use-hover.ts
-import { useCallback as useCallback14, useState as useState16 } from "react";
+import { useCallback as useCallback15, useState as useState16 } from "react";
 function useHover() {
   const [isHovering, setIsHovering] = useState16(false);
-  const handleMouseEnter = useCallback14(() => {
+  const handleMouseEnter = useCallback15(() => {
     setIsHovering(true);
   }, []);
-  const handleMouseLeave = useCallback14(() => {
+  const handleMouseLeave = useCallback15(() => {
     setIsHovering(false);
   }, []);
   return {
@@ -3485,7 +3502,7 @@ function useHover() {
 }
 
 // src/hooks/use-key-down.ts
-import { useCallback as useCallback15, useEffect as useEffect21 } from "react";
+import { useCallback as useCallback16, useEffect as useEffect21 } from "react";
 function useKeyDown({
   key,
   cb,
@@ -3499,7 +3516,7 @@ function useKeyDown({
     altKey = false
   } = options ?? {};
   const handleCallback = useEvent(cb);
-  const handleKeyDown = useCallback15(
+  const handleKeyDown = useCallback16(
     (event) => {
       const keys = Array.isArray(key) ? key : [key];
       const isKeyMatch = keys.includes(event.key);
@@ -4553,7 +4570,7 @@ ExternalLink.displayName = "ExternalLink";
 
 // src/expandable-content/ExpandableContent.tsx
 import {
-  useCallback as useCallback17,
+  useCallback as useCallback18,
   useEffect as useEffect24,
   useRef as useRef16,
   useState as useState19
@@ -4590,7 +4607,7 @@ function ExpandableContent({
   const [internalOpen, setInternalOpen] = useState19(defaultOpen);
   const isOpen = open ?? internalOpen;
   const isOverflowing = contentHeight > heightLimit;
-  const measureContent = useCallback17(() => {
+  const measureContent = useCallback18(() => {
     const nextHeight = contentRef.current?.getBoundingClientRect().height ?? 0;
     setContentHeight(nextHeight);
   }, []);
@@ -4649,7 +4666,7 @@ function ExpandableContent({
 // src/file-input-button/FileInputButton.tsx
 import {
   forwardRef as forwardRef24,
-  useCallback as useCallback18
+  useCallback as useCallback19
 } from "react";
 import { Upload } from "lucide-react";
 import { jsx as jsx54, jsxs as jsxs37 } from "react/jsx-runtime";
@@ -4665,7 +4682,7 @@ var FileInputButton = forwardRef24(
     size = "default",
     ...props
   }, ref) => {
-    const handleChange = useCallback18(
+    const handleChange = useCallback19(
       (event) => {
         onChange?.(event);
         event.target.value = "";
@@ -5084,7 +5101,7 @@ function extractDigits(str) {
 }
 
 // src/input-otp/useInputOTP.ts
-import { useCallback as useCallback19, useEffect as useEffect25, useMemo as useMemo3, useRef as useRef17, useState as useState22 } from "react";
+import { useCallback as useCallback20, useEffect as useEffect25, useMemo as useMemo3, useRef as useRef17, useState as useState22 } from "react";
 function useInputOTP({
   maxLength,
   value,
@@ -5109,7 +5126,7 @@ function useInputOTP({
     return nextSlots;
   }, [value, maxLength]);
   slotsRef.current = slots;
-  const emitValue = useCallback19(
+  const emitValue = useCallback20(
     (newSlots) => {
       let lastFilledIndex = -1;
       for (let index = newSlots.length - 1; index >= 0; index -= 1) {
@@ -5135,7 +5152,7 @@ function useInputOTP({
       inputRefs.current[0].focus();
     }
   }, [autoFocus]);
-  const handleContainerFocusIn = useCallback19((event) => {
+  const handleContainerFocusIn = useCallback20((event) => {
     clearTimeout(blurTimeoutRef.current);
     const target = event.target;
     const slotIndex = inputRefs.current.indexOf(target);
@@ -5143,7 +5160,7 @@ function useInputOTP({
       setActiveIndex(slotIndex);
     }
   }, []);
-  const handleContainerFocusOut = useCallback19(() => {
+  const handleContainerFocusOut = useCallback20(() => {
     clearTimeout(blurTimeoutRef.current);
     blurTimeoutRef.current = setTimeout(() => {
       if (!containerRef.current?.contains(document.activeElement)) {
@@ -5152,7 +5169,7 @@ function useInputOTP({
     }, 0);
   }, []);
   useEffect25(() => () => clearTimeout(blurTimeoutRef.current), []);
-  const handleDigitInput = useCallback19(
+  const handleDigitInput = useCallback20(
     (index, digit) => {
       if (!DIGIT_REGEX.test(digit)) return;
       const newSlots = [...slotsRef.current];
@@ -5166,7 +5183,7 @@ function useInputOTP({
     },
     [maxLength, emitValue]
   );
-  const handleDelete = useCallback19(
+  const handleDelete = useCallback20(
     (index) => {
       const newSlots = [...slotsRef.current];
       if (newSlots[index]) {
@@ -5181,7 +5198,7 @@ function useInputOTP({
     },
     [emitValue]
   );
-  const handlePaste = useCallback19(
+  const handlePaste = useCallback20(
     (text) => {
       const digits = extractDigits(text).slice(0, maxLength);
       if (digits.length > 0) {
@@ -5231,7 +5248,7 @@ function useInputOTP({
 
 // src/input-otp/useInputOTPSlot.ts
 import {
-  useCallback as useCallback20
+  useCallback as useCallback21
 } from "react";
 function useInputOTPSlot(index) {
   const {
@@ -5302,13 +5319,13 @@ function useInputOTPSlot(index) {
     event.preventDefault();
     handlePaste(event.clipboardData.getData("text/plain"));
   };
-  const setInputRef = useCallback20(
+  const setInputRef = useCallback21(
     (element) => {
       inputRefs.current[index] = element;
     },
     [index, inputRefs]
   );
-  const focusSlot = useCallback20(() => {
+  const focusSlot = useCallback21(() => {
     inputRefs.current[index]?.focus();
   }, [index, inputRefs]);
   return {
@@ -6778,7 +6795,7 @@ var LegacyMultiSelect = forwardRef33(LegacyMultiSelectInner);
 
 // src/legacy-fields/select/InfinitySelect.tsx
 import { useVirtualizer } from "@tanstack/react-virtual";
-import { useCallback as useCallback21, useEffect as useEffect26, useId as useId7, useRef as useRef19, useState as useState27 } from "react";
+import { useCallback as useCallback22, useEffect as useEffect26, useId as useId7, useRef as useRef19, useState as useState27 } from "react";
 import { jsx as jsx79, jsxs as jsxs50 } from "react/jsx-runtime";
 function LegacyInfinitySelect({
   label,
@@ -6802,7 +6819,7 @@ function LegacyInfinitySelect({
     estimateSize: () => itemHeight,
     overscan: 5
   });
-  const loadMore = useCallback21(() => {
+  const loadMore = useCallback22(() => {
     if (hasNextPage && !isFetchingNextPage) {
       fetchNextPage();
     }
@@ -7172,7 +7189,7 @@ var RadioGroupItem = React25.forwardRef(({ className, size = "default", ...props
 RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
 
 // src/radio/useRadioOptions.ts
-import { useCallback as useCallback22, useEffect as useEffect27, useState as useState28 } from "react";
+import { useCallback as useCallback23, useEffect as useEffect27, useState as useState28 } from "react";
 function getSelectedValue(options, defaultValue) {
   return (typeof defaultValue === "string" ? options.find((option) => option.value === defaultValue) : defaultValue) || "";
 }
@@ -7183,7 +7200,7 @@ function useRadioOptions({ options, defaultValue, onChange }) {
   useEffect27(() => {
     setSelectedValue(getSelectedValue(options, defaultValue));
   }, [defaultValue, options]);
-  const handleValueChange = useCallback22(
+  const handleValueChange = useCallback23(
     (value) => {
       setSelectedValue(value);
       const selectedOption = options.find((option) => option.value === value) || "";
@@ -8848,7 +8865,7 @@ import {
   useEffect as useEffect30,
   useRef as useRef21,
   useState as useState32,
-  useCallback as useCallback24,
+  useCallback as useCallback25,
   useImperativeHandle,
   useLayoutEffect as useLayoutEffect4
 } from "react";
@@ -8864,7 +8881,13 @@ var SIGNATURE_PROPS = {
   throttle: 16
 };
 var ASPECT_RATIO = 330 / 190;
-function getTrimmedCanvasData(canvas, padding = 10) {
+function getCanvasPixelPadding(canvas, padding) {
+  if (!Number.isFinite(padding) || padding <= 0) return 0;
+  const cssWidth = canvas.getBoundingClientRect().width;
+  const scale = cssWidth > 0 ? canvas.width / cssWidth : 1;
+  return Math.round(padding * scale);
+}
+function getTrimmedCanvas(canvas, padding = 10) {
   const ctx = canvas.getContext("2d");
   if (!ctx) return null;
   const { width, height } = canvas;
@@ -8880,18 +8903,19 @@ function getTrimmedCanvasData(canvas, padding = 10) {
       const alpha = data[(y * width + x) * 4 + 3];
       if (alpha > 0) {
         hasContent = true;
-        minX = Math.min(minX, x);
-        minY = Math.min(minY, y);
-        maxX = Math.max(maxX, x);
-        maxY = Math.max(maxY, y);
+        if (x < minX) minX = x;
+        if (y < minY) minY = y;
+        if (x > maxX) maxX = x;
+        if (y > maxY) maxY = y;
       }
     }
   }
   if (!hasContent) return null;
-  minX = Math.max(0, minX - padding);
-  minY = Math.max(0, minY - padding);
-  maxX = Math.min(width - 1, maxX + padding);
-  maxY = Math.min(height - 1, maxY + padding);
+  const pixelPadding = getCanvasPixelPadding(canvas, padding);
+  minX = Math.max(0, minX - pixelPadding);
+  minY = Math.max(0, minY - pixelPadding);
+  maxX = Math.min(width - 1, maxX + pixelPadding);
+  maxY = Math.min(height - 1, maxY + pixelPadding);
   const trimmedWidth = maxX - minX + 1;
   const trimmedHeight = maxY - minY + 1;
   const trimmedCanvas = document.createElement("canvas");
@@ -8910,10 +8934,7 @@ function getTrimmedCanvasData(canvas, padding = 10) {
     trimmedWidth,
     trimmedHeight
   );
-  return {
-    canvas: trimmedCanvas,
-    bounds: { x: minX, y: minY, width: trimmedWidth, height: trimmedHeight }
-  };
+  return trimmedCanvas;
 }
 var SignatureCanvas = forwardRef41(
   ({ onClear, onEnd, onEnable, className, enabled }, ref) => {
@@ -8923,7 +8944,7 @@ var SignatureCanvas = forwardRef41(
     const containerRef = useRef21(null);
     const [size, setSize] = useState32({ width: 330, height: 190 });
     const [hasSignature, setHasSignature] = useState32(false);
-    const calculateSize = useCallback24((containerWidth) => {
+    const calculateSize = useCallback25((containerWidth) => {
       const width = Math.floor(Math.min(containerWidth, 646));
       const height = Math.floor(width / ASPECT_RATIO);
       setSize((prev) => {
@@ -8957,12 +8978,12 @@ var SignatureCanvas = forwardRef41(
       canvas.style.width = `${size.width}px`;
       canvas.style.height = `${size.height}px`;
     }, [size, enabled]);
-    const handleEnd = useCallback24(() => {
+    const handleEnd = useCallback25(() => {
       const isEmpty = canvasRef.current?.isEmpty() ?? true;
       setHasSignature(!isEmpty);
       onEnd?.();
     }, [onEnd]);
-    const handleClear = useCallback24(() => {
+    const handleClear = useCallback25(() => {
       canvasRef.current?.clear();
       setHasSignature(false);
       onClear?.();
@@ -8978,9 +8999,9 @@ var SignatureCanvas = forwardRef41(
       toTrimmedDataURL: (type = "image/png", encoderOptions, padding = 10) => {
         const canvas = canvasRef.current?.getCanvas();
         if (!canvas) return "";
-        const trimmed = getTrimmedCanvasData(canvas, padding);
+        const trimmed = getTrimmedCanvas(canvas, padding);
         if (!trimmed) return "";
-        return trimmed.canvas.toDataURL(type, encoderOptions);
+        return trimmed.toDataURL(type, encoderOptions);
       },
       getCanvas: (...args) => canvasRef.current?.getCanvas(...args)
     }));
@@ -10085,11 +10106,11 @@ function TimelineDescription({ className, asChild, ...props }) {
 import { Toaster, toast as toast2 } from "sonner";
 
 // src/toaster/useUpdateToast.ts
-import { useCallback as useCallback26, useRef as useRef22 } from "react";
+import { useCallback as useCallback27, useRef as useRef22 } from "react";
 import { toast } from "sonner";
 function useUpdateToast({ id }) {
   const toastIdRef = useRef22("");
-  const getToastOptions = useCallback26(
+  const getToastOptions = useCallback27(
     (options) => ({
       id: toastIdRef.current,
       dismissible: false,
@@ -10924,7 +10945,7 @@ function VideoPlayer({
 import {
   forwardRef as forwardRef54,
   memo as memo7,
-  useCallback as useCallback28,
+  useCallback as useCallback29,
   useImperativeHandle as useImperativeHandle2,
   useMemo as useMemo7,
   useRef as useRef25,
@@ -10983,7 +11004,7 @@ async function compressImage(image) {
 }
 
 // src/webcam/useErrorHandler.ts
-import { useCallback as useCallback27 } from "react";
+import { useCallback as useCallback28 } from "react";
 import { useTranslation as useTranslation23 } from "react-i18next";
 import { isSafari as isSafari2 } from "react-device-detect";
 
@@ -11149,7 +11170,7 @@ var GET_USER_MEDIA_ERROR = "getUserMedia is not implemented in this browser";
 function useErrorHandler({ onError }) {
   const { t } = useTranslation23();
   const handleError = useEvent(onError);
-  const handleUserMediaError = useCallback27(
+  const handleUserMediaError = useCallback28(
     (error) => {
       console.error(error);
       let errorText = "";
@@ -11279,7 +11300,7 @@ var Webcam = memo7(
           onError(errorDetails);
         }
       });
-      const handleUserMediaErrorWithFallback = useCallback28(
+      const handleUserMediaErrorWithFallback = useCallback29(
         (error) => {
           if (error instanceof DOMException && error.name === "OverconstrainedError" && !useReducedConstraints && !videoConstraints) {
             console.warn("Camera constraints failed, trying reduced constraints:", error);
@@ -11329,7 +11350,7 @@ var Webcam = memo7(
           ...webcamRef.current
         })
       );
-      const handleUserMediaSuccess = useCallback28(
+      const handleUserMediaSuccess = useCallback29(
         (stream) => {
           if (!isMobile2) {
             const track = stream.getVideoTracks()[0];
@@ -11420,17 +11441,17 @@ Webcam.displayName = "Webcam";
 
 // src/mobile-webcam/MobileWebcam.tsx
 import { Camera, ChevronLeft as ChevronLeft4 } from "lucide-react";
-import { forwardRef as forwardRef55, useCallback as useCallback30 } from "react";
+import { forwardRef as forwardRef55, useCallback as useCallback31 } from "react";
 import { createPortal } from "react-dom";
 import { useTranslation as useTranslation25 } from "react-i18next";
 
 // src/mobile-webcam/DeviceCamera/DeviceCamera.tsx
-import { useCallback as useCallback29 } from "react";
+import { useCallback as useCallback30 } from "react";
 import { useTranslation as useTranslation24 } from "react-i18next";
 import { jsx as jsx136, jsxs as jsxs84 } from "react/jsx-runtime";
 function DeviceCamera({ onChange, facingMode, className }) {
   const { t } = useTranslation24();
-  const handleNativeScreenshot = useCallback29(
+  const handleNativeScreenshot = useCallback30(
     (event) => {
       const file = event.target.files?.[0];
       onChange(file ? compressImage(file) : void 0);
@@ -11478,7 +11499,7 @@ var MobileWebcam = forwardRef55(
   ({ onScreenshot, onBack, title, text, disabled, className, ...props }, ref) => {
     const rootElement = getDocument()?.body;
     const { t } = useTranslation25();
-    const handleNativeScreenshot = useCallback30(
+    const handleNativeScreenshot = useCallback31(
       (photo) => onScreenshot({ isNative: true, photo }),
       [onScreenshot]
     );
@@ -12145,7 +12166,7 @@ var DashboardInput = React43.forwardRef(
       "div",
       {
         className: cn(
-          "relative block w-full min-h-[68px] max-w-[var(--dashboard-input-max-width,none)]",
+          "relative block w-full max-w-[var(--field-max-width,296px)] min-h-[68px]",
           disabled && "cursor-not-allowed opacity-50",
           loading && "cursor-progress opacity-50",
           wrapperClassName,
@@ -12345,7 +12366,7 @@ function SelectFieldShell({
       ref: containerRef,
       onBlur,
       className: cn(
-        "relative w-full max-w-[var(--max-field-width)]",
+        "relative w-full max-w-[var(--field-max-width,296px)]",
         disabled && "cursor-not-allowed opacity-50",
         loading && "cursor-progress",
         className
@@ -12560,7 +12581,8 @@ function SelectMenuPanel({
 }
 
 // src/dashboard/_select-internals/SelectSearchInput.tsx
-import { jsx as jsx147 } from "react/jsx-runtime";
+import { Search as Search3 } from "lucide-react";
+import { jsx as jsx147, jsxs as jsxs94 } from "react/jsx-runtime";
 function SelectSearchInput({
   inputRef,
   value,
@@ -12570,26 +12592,35 @@ function SelectSearchInput({
   onChange,
   onKeyDown
 }) {
-  return /* @__PURE__ */ jsx147("div", { className: "border-b border-[#f2f4f8] px-4 pb-2 pt-3", children: /* @__PURE__ */ jsx147(
-    "input",
-    {
-      ref: inputRef,
-      type: "text",
-      value,
-      placeholder,
-      onChange,
-      onKeyDown,
-      autoComplete: "off",
-      "aria-controls": listboxId,
-      "aria-activedescendant": activeOptionId,
-      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)]"
-    }
-  ) });
+  return /* @__PURE__ */ jsx147("div", { className: "border-b border-[#f2f4f8] px-4 pb-2 pt-3", children: /* @__PURE__ */ jsxs94("div", { className: "relative", children: [
+    /* @__PURE__ */ jsx147(
+      Search3,
+      {
+        "aria-hidden": "true",
+        className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[var(--chekin-color-gray-2)]"
+      }
+    ),
+    /* @__PURE__ */ jsx147(
+      "input",
+      {
+        ref: inputRef,
+        type: "text",
+        value,
+        placeholder,
+        onChange,
+        onKeyDown,
+        autoComplete: "off",
+        "aria-controls": listboxId,
+        "aria-activedescendant": activeOptionId,
+        className: "m-0 box-border h-9 w-full rounded-md border border-[var(--chekin-color-gray-3)] bg-white px-9 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)]"
+      }
+    )
+  ] }) });
 }
 
 // src/dashboard/_select-internals/SelectTrigger.tsx
 import { ChevronDown as ChevronDown2 } from "lucide-react";
-import { jsx as jsx148, jsxs as jsxs94 } from "react/jsx-runtime";
+import { jsx as jsx148, jsxs as jsxs95 } from "react/jsx-runtime";
 function SelectTrigger({
   triggerRef,
   triggerId,
@@ -12610,7 +12641,7 @@ function SelectTrigger({
   onBlur
 }) {
   const isEmpty = !hasValue;
-  return /* @__PURE__ */ jsxs94(
+  return /* @__PURE__ */ jsxs95(
     "button",
     {
       id: triggerId,
@@ -12635,7 +12666,7 @@ function SelectTrigger({
       ),
       children: [
         /* @__PURE__ */ jsx148("span", { id: valueId, className: "block min-w-0 flex-1 truncate text-left", children: valueLabel ?? (isOpen ? placeholder : null) }),
-        /* @__PURE__ */ jsxs94("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: [
+        /* @__PURE__ */ jsxs95("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: [
           loading && /* @__PURE__ */ jsx148(ThreeDotsLoader, { height: 18, width: 18 }),
           /* @__PURE__ */ jsx148(
             ChevronDown2,
@@ -12738,7 +12769,7 @@ function useSelectSearch({
 }
 
 // src/dashboard/select/Select.tsx
-import { jsx as jsx149, jsxs as jsxs95 } from "react/jsx-runtime";
+import { jsx as jsx149, jsxs as jsxs96 } from "react/jsx-runtime";
 function DashboardSelectInternal({
   options = [],
   value,
@@ -12862,7 +12893,7 @@ function DashboardSelectInternal({
       setIsOpen(false);
     }
   };
-  return /* @__PURE__ */ jsxs95(
+  return /* @__PURE__ */ jsxs96(
     SelectFieldShell,
     {
       containerRef,
@@ -12919,7 +12950,7 @@ function DashboardSelectInternal({
             onClick: !isBlocked ? toggleMenu : void 0
           }
         ),
-        /* @__PURE__ */ jsxs95(
+        /* @__PURE__ */ jsxs96(
           SelectMenuPanel,
           {
             isOpen,
@@ -12975,13 +13006,13 @@ var DashboardSelect = React47.forwardRef(
 
 // src/dashboard/multi-select/MultiSelect.tsx
 import * as React48 from "react";
-import { SquareX as SquareX3 } from "lucide-react";
+import { Search as Search4, SquareX as SquareX3 } from "lucide-react";
 import { useTranslation as useTranslation32 } from "react-i18next";
 
 // src/dashboard/multi-select/MultiSelectChip.tsx
 import { SquareX as SquareX2 } from "lucide-react";
 import { useTranslation as useTranslation31 } from "react-i18next";
-import { jsx as jsx150, jsxs as jsxs96 } from "react/jsx-runtime";
+import { jsx as jsx150, jsxs as jsxs97 } from "react/jsx-runtime";
 function MultiSelectChip({
   option,
   readOnly,
@@ -12989,7 +13020,7 @@ function MultiSelectChip({
 }) {
   const { t } = useTranslation31();
   const labelText = typeof option.label === "string" ? option.label : String(option.value);
-  return /* @__PURE__ */ jsxs96("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: [
+  return /* @__PURE__ */ jsxs97("span", { className: "inline-flex items-center gap-2 rounded-[4px] border border-[#acacd5] bg-[#f0f0f8] py-[2px] pl-[10px] pr-1 text-[12px] font-medium text-[var(--chekin-color-brand-navy)]", children: [
     /* @__PURE__ */ jsx150("span", { className: "whitespace-nowrap", children: option.label }),
     !readOnly && /* @__PURE__ */ jsx150(
       "button",
@@ -13008,7 +13039,7 @@ function MultiSelectChip({
 }
 
 // src/dashboard/multi-select/MultiSelect.tsx
-import { jsx as jsx151, jsxs as jsxs97 } from "react/jsx-runtime";
+import { jsx as jsx151, jsxs as jsxs98 } from "react/jsx-runtime";
 var isValueSelected = (selected, option) => selected.some((item) => item.value === option.value);
 function DashboardMultiSelectInternal({
   options = [],
@@ -13203,7 +13234,7 @@ function DashboardMultiSelectInternal({
     setIsFocused(false);
     onBlur?.(event);
   };
-  return /* @__PURE__ */ jsxs97(
+  return /* @__PURE__ */ jsxs98(
     SelectFieldShell,
     {
       containerRef,
@@ -13222,7 +13253,7 @@ function DashboardMultiSelectInternal({
       hiddenValue: selectedValues.map((item) => String(item.value)).join(","),
       onBlur: handleInputBlur,
       children: [
-        /* @__PURE__ */ jsxs97(
+        /* @__PURE__ */ jsxs98(
           "div",
           {
             id: triggerId,
@@ -13255,6 +13286,13 @@ function DashboardMultiSelectInternal({
                   String(option.value)
                 )
               ),
+              /* @__PURE__ */ jsx151(
+                Search4,
+                {
+                  "aria-hidden": "true",
+                  className: "h-4 w-4 shrink-0 text-[var(--chekin-color-gray-2)]"
+                }
+              ),
               /* @__PURE__ */ jsx151(
                 "input",
                 {
@@ -13284,7 +13322,7 @@ function DashboardMultiSelectInternal({
                   "aria-activedescendant": isOpen && highlightedIndex >= 0 ? getOptionId2(highlightedIndex) : void 0
                 }
               ),
-              /* @__PURE__ */ jsxs97("span", { className: "ml-auto flex items-center gap-2 pl-2 text-[var(--chekin-color-gray-2)]", children: [
+              /* @__PURE__ */ jsxs98("span", { className: "ml-auto flex items-center gap-2 pl-2 text-[var(--chekin-color-gray-2)]", children: [
                 loading && /* @__PURE__ */ jsx151(ThreeDotsLoader, { height: 18, width: 18 }),
                 hasValue && !readOnly && /* @__PURE__ */ jsx151(
                   "button",
@@ -13330,7 +13368,7 @@ function DashboardMultiSelectInternal({
             onClick: handleContainerClick
           }
         ),
-        /* @__PURE__ */ jsxs97(
+        /* @__PURE__ */ jsxs98(
           SelectMenuPanel,
           {
             isOpen,
@@ -13343,21 +13381,30 @@ function DashboardMultiSelectInternal({
             className: dropdownClassName,
             drawerClassName,
             children: [
-              isMobile3 && /* @__PURE__ */ jsx151("div", { className: "border-b border-[#f2f4f8] px-4 pb-2 pt-3", children: /* @__PURE__ */ jsx151(
-                "input",
-                {
-                  ref: mobileSearchInputRef,
-                  type: "text",
-                  value: searchValue,
-                  placeholder: placeholder ?? "",
-                  onChange: (event) => setSearchValue(event.target.value),
-                  onKeyDown: handleInputKeyDown,
-                  autoComplete: "off",
-                  "aria-controls": listboxId,
-                  "aria-activedescendant": highlightedIndex >= 0 ? getOptionId2(highlightedIndex) : void 0,
-                  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)]"
-                }
-              ) }),
+              isMobile3 && /* @__PURE__ */ jsx151("div", { className: "border-b border-[#f2f4f8] px-4 pb-2 pt-3", children: /* @__PURE__ */ jsxs98("div", { className: "relative", children: [
+                /* @__PURE__ */ jsx151(
+                  Search4,
+                  {
+                    "aria-hidden": "true",
+                    className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[var(--chekin-color-gray-2)]"
+                  }
+                ),
+                /* @__PURE__ */ jsx151(
+                  "input",
+                  {
+                    ref: mobileSearchInputRef,
+                    type: "text",
+                    value: searchValue,
+                    placeholder: placeholder ?? "",
+                    onChange: (event) => setSearchValue(event.target.value),
+                    onKeyDown: handleInputKeyDown,
+                    autoComplete: "off",
+                    "aria-controls": listboxId,
+                    "aria-activedescendant": highlightedIndex >= 0 ? getOptionId2(highlightedIndex) : void 0,
+                    className: "m-0 box-border h-9 w-full rounded-md border border-[var(--chekin-color-gray-3)] bg-white px-9 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__ */ jsx151(
                 SelectMenu,
                 {
@@ -13415,7 +13462,7 @@ import { useVirtualizer as useVirtualizer2 } from "@tanstack/react-virtual";
 import { useTranslation as useTranslation33 } from "react-i18next";
 
 // src/dashboard/infinite-scroll-select/InfiniteScrollList.tsx
-import { jsx as jsx153, jsxs as jsxs98 } from "react/jsx-runtime";
+import { jsx as jsx153, jsxs as jsxs99 } from "react/jsx-runtime";
 function InfiniteScrollList({
   scrollRef,
   listboxId,
@@ -13468,10 +13515,10 @@ function InfiniteScrollList({
                   height: `${virtualItem.size}px`,
                   transform: `translateY(${virtualItem.start}px)`
                 },
-                children: isLoaderRow ? /* @__PURE__ */ jsxs98("div", { className: "flex h-full items-center justify-center gap-2 px-4 text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: [
+                children: isLoaderRow ? /* @__PURE__ */ jsxs99("div", { className: "flex h-full items-center justify-center gap-2 px-4 text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: [
                   /* @__PURE__ */ jsx153(ThreeDotsLoader, { height: 36, width: 36 }),
                   /* @__PURE__ */ jsx153("span", { children: loadingMoreText })
-                ] }) : /* @__PURE__ */ jsxs98(
+                ] }) : /* @__PURE__ */ jsxs99(
                   "button",
                   {
                     id: getOptionId2(virtualItem.index),
@@ -13506,7 +13553,7 @@ function InfiniteScrollList({
 }
 
 // src/dashboard/infinite-scroll-select/InfiniteScrollSelect.tsx
-import { jsx as jsx154, jsxs as jsxs99 } from "react/jsx-runtime";
+import { jsx as jsx154, jsxs as jsxs100 } from "react/jsx-runtime";
 var DEFAULT_ITEM_HEIGHT = 60;
 var DEFAULT_LIST_HEIGHT = 322;
 var DEFAULT_OVERSCAN = 5;
@@ -13679,7 +13726,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__ */ jsxs99(
+  return /* @__PURE__ */ jsxs100(
     SelectFieldShell,
     {
       containerRef,
@@ -13736,7 +13783,7 @@ function DashboardInfiniteScrollSelectInternal({
             onClick: !isBlocked ? toggleMenu : void 0
           }
         ),
-        /* @__PURE__ */ jsxs99(
+        /* @__PURE__ */ jsxs100(
           SelectMenuPanel,
           {
             isOpen,
@@ -13758,7 +13805,7 @@ function DashboardInfiniteScrollSelectInternal({
                   onKeyDown: handleSearchKeyDown
                 }
               ),
-              filteredOptions.length === 0 && isLoadingMore ? /* @__PURE__ */ jsxs99("div", { className: "flex items-center justify-center gap-2 px-4 py-[20px] text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: [
+              filteredOptions.length === 0 && isLoadingMore ? /* @__PURE__ */ jsxs100("div", { className: "flex items-center justify-center gap-2 px-4 py-[20px] text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: [
                 /* @__PURE__ */ jsx154(ThreeDotsLoader, { height: 18, width: 18 }),
                 /* @__PURE__ */ jsx154("span", { children: resolvedLoadingMoreText })
               ] }) : filteredOptions.length === 0 ? /* @__PURE__ */ jsx154("div", { className: "px-4 py-[20px] text-left text-[16px] text-[var(--chekin-color-brand-navy)]", children: emptyMessage ?? t("no_options") }) : /* @__PURE__ */ jsx154(
@@ -13797,7 +13844,7 @@ var DashboardInfiniteScrollSelect = React50.forwardRef(
 // src/dashboard/textarea/Textarea.tsx
 import * as React51 from "react";
 import { useTranslation as useTranslation34 } from "react-i18next";
-import { jsx as jsx155, jsxs as jsxs100 } from "react/jsx-runtime";
+import { jsx as jsx155, jsxs as jsxs101 } from "react/jsx-runtime";
 var LINE_HEIGHT = 20;
 var VERTICAL_PADDING = 32;
 function getEmptyState(empty, value, defaultValue) {
@@ -13854,17 +13901,17 @@ var DashboardTextarea = React51.forwardRef(
       resize();
       onInput?.(event);
     };
-    return /* @__PURE__ */ jsxs100(
+    return /* @__PURE__ */ jsxs101(
       "div",
       {
         className: cn(
-          "relative block min-h-[88px] w-full",
+          "relative block min-h-[88px] w-full max-w-[var(--field-max-width,296px)]",
           isBlocked && "cursor-not-allowed opacity-50",
           loading && "cursor-progress opacity-50",
           className
         ),
         children: [
-          label && /* @__PURE__ */ jsxs100(
+          label && /* @__PURE__ */ jsxs101(
             "label",
             {
               htmlFor: textareaId,
@@ -14347,7 +14394,7 @@ function useDatePickerWheel({
 }
 
 // src/airbnb-fields/datepicker/DatePickerWheelColumn.tsx
-import { jsx as jsx156, jsxs as jsxs101 } from "react/jsx-runtime";
+import { jsx as jsx156, jsxs as jsxs102 } from "react/jsx-runtime";
 var spacerHeight = DATE_PICKER_OPTION_HEIGHT * DATE_PICKER_WHEEL_BUFFER_OPTIONS;
 function AirbnbDatePickerWheelColumn({
   id,
@@ -14361,7 +14408,7 @@ function AirbnbDatePickerWheelColumn({
   onOptionSelect,
   column
 }) {
-  return /* @__PURE__ */ jsx156("div", { className: "relative z-10 min-w-0", children: /* @__PURE__ */ jsxs101(
+  return /* @__PURE__ */ jsx156("div", { className: "relative z-10 min-w-0", children: /* @__PURE__ */ jsxs102(
     "div",
     {
       id,
@@ -14408,7 +14455,7 @@ function AirbnbDatePickerWheelColumn({
 }
 
 // src/airbnb-fields/datepicker/DatePickerContent.tsx
-import { jsx as jsx157, jsxs as jsxs102 } from "react/jsx-runtime";
+import { jsx as jsx157, jsxs as jsxs103 } from "react/jsx-runtime";
 function AirbnbDatePickerBody({
   baseId,
   label,
@@ -14430,8 +14477,8 @@ function AirbnbDatePickerBody({
   onOptionSelect,
   onDone
 }) {
-  return /* @__PURE__ */ jsxs102("div", { className: "px-6 pb-4 pt-1 bg-white", children: [
-    /* @__PURE__ */ jsxs102("div", { className: "relative overflow-hidden rounded-[24px]", children: [
+  return /* @__PURE__ */ jsxs103("div", { className: "px-6 pb-4 pt-1 bg-white", children: [
+    /* @__PURE__ */ jsxs103("div", { className: "relative overflow-hidden rounded-[24px]", children: [
       /* @__PURE__ */ jsx157("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__ */ jsx157("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__ */ jsx157(
@@ -14441,7 +14488,7 @@ function AirbnbDatePickerBody({
           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__ */ jsxs102("div", { className: "relative grid grid-cols-[1.35fr_0.7fr_1fr] gap-1", children: [
+      /* @__PURE__ */ jsxs103("div", { className: "relative grid grid-cols-[1.35fr_0.7fr_1fr] gap-1", children: [
         /* @__PURE__ */ jsx157(
           AirbnbDatePickerWheelColumn,
           {
@@ -14542,7 +14589,7 @@ function AirbnbDatePickerContent({
     }
   );
   if (isMobile3) {
-    return /* @__PURE__ */ jsx157(Drawer, { open, onOpenChange, children: /* @__PURE__ */ jsxs102(
+    return /* @__PURE__ */ jsx157(Drawer, { open, onOpenChange, children: /* @__PURE__ */ jsxs103(
       DrawerContent,
       {
         onClose: () => onOpenChange(false),
@@ -14555,7 +14602,7 @@ function AirbnbDatePickerContent({
       }
     ) });
   }
-  return /* @__PURE__ */ jsx157(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs102(
+  return /* @__PURE__ */ jsx157(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs103(
     DialogContent,
     {
       className: "max-w-[520px] rounded-[28px] border-0 p-0 shadow-xl",
@@ -14570,7 +14617,7 @@ function AirbnbDatePickerContent({
 }
 
 // src/dashboard/datepicker/Datepicker.tsx
-import { jsx as jsx158, jsxs as jsxs103 } from "react/jsx-runtime";
+import { jsx as jsx158, jsxs as jsxs104 } from "react/jsx-runtime";
 var MONTHS_IN_YEAR2 = 12;
 function getMonthLabels2(locale) {
   const formatter = new Intl.DateTimeFormat(locale, { month: "long" });
@@ -14896,15 +14943,15 @@ var DashboardDatepicker = React53.forwardRef(
       {
         ref: containerRef,
         className: cn(
-          "relative w-full max-w-[var(--max-field-width)]",
+          "relative w-full max-w-[var(--field-max-width,296px)]",
           disabled && "cursor-not-allowed opacity-50",
           loading && "cursor-progress",
           className
         ),
         style: wrapperWidth ? { width: wrapperWidth } : void 0,
-        children: /* @__PURE__ */ jsxs103("div", { className: "relative min-h-[68px] w-full", children: [
-          /* @__PURE__ */ jsxs103("div", { className: "relative w-full", children: [
-            isMobile3 ? /* @__PURE__ */ jsxs103(
+        children: /* @__PURE__ */ jsxs104("div", { className: "relative min-h-[68px] w-full", children: [
+          /* @__PURE__ */ jsxs104("div", { className: "relative w-full", children: [
+            isMobile3 ? /* @__PURE__ */ jsxs104(
               "button",
               {
                 ref: mobileTriggerRef,
@@ -14924,7 +14971,7 @@ var DashboardDatepicker = React53.forwardRef(
                 ),
                 children: [
                   /* @__PURE__ */ jsx158("span", { className: "block min-w-0 flex-1 truncate text-left", children: triggerText ?? (isWheelOpen ? mobilePlaceholder : null) }),
-                  /* @__PURE__ */ jsxs103("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: [
+                  /* @__PURE__ */ jsxs104("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: [
                     loading && /* @__PURE__ */ jsx158(ThreeDotsLoader, { height: 18, width: 18 }),
                     /* @__PURE__ */ jsx158(
                       ChevronDown3,
@@ -14939,7 +14986,7 @@ var DashboardDatepicker = React53.forwardRef(
                   ] })
                 ]
               }
-            ) : /* @__PURE__ */ jsxs103(
+            ) : /* @__PURE__ */ jsxs104(
               "div",
               {
                 className: cn(
@@ -14968,7 +15015,7 @@ var DashboardDatepicker = React53.forwardRef(
                       className: subInputClass
                     }
                   ) }),
-                  /* @__PURE__ */ jsxs103("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__ */ jsxs104("div", { className: "relative flex h-full min-w-0 items-center gap-1 border-x border-[var(--chekin-color-gray-3)] px-2 sm:px-3", children: [
                     /* @__PURE__ */ jsx158(
                       "input",
                       {
@@ -15029,7 +15076,7 @@ var DashboardDatepicker = React53.forwardRef(
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ jsxs103("div", { className: "flex h-full min-w-0 items-center px-2 sm:px-4", children: [
+                  /* @__PURE__ */ jsxs104("div", { className: "flex h-full min-w-0 items-center px-2 sm:px-4", children: [
                     /* @__PURE__ */ jsx158(
                       "input",
                       {
@@ -15349,7 +15396,7 @@ function resolveRangeSelection({
 
 // src/dashboard/date-range-picker/components/DateRangeInputs.tsx
 import { CalendarDays, SquareX as SquareX4 } from "lucide-react";
-import { jsx as jsx159, jsxs as jsxs104 } from "react/jsx-runtime";
+import { jsx as jsx159, jsxs as jsxs105 } from "react/jsx-runtime";
 var DEFAULT_PLACEHOLDER = "00-00-0000";
 var inputBaseClass = "m-0 box-border h-full w-full min-w-0 border-0 bg-transparent text-[16px] font-medium leading-5 text-[var(--chekin-color-brand-navy)] outline-none placeholder:text-[var(--chekin-color-gray-1)]";
 var iconButtonClass = "flex h-5 w-5 items-center justify-center rounded-[3px] border-0 bg-transparent p-0 text-[#9696b9] outline-none hover:shadow-[0_3px_3px_#0f477734] disabled:cursor-not-allowed";
@@ -15391,7 +15438,7 @@ function DateRangeInputs({
     isBlocked && "cursor-not-allowed",
     loading && "cursor-progress"
   );
-  return /* @__PURE__ */ jsxs104(
+  return /* @__PURE__ */ jsxs105(
     "div",
     {
       className: cn(
@@ -15459,7 +15506,7 @@ function DateRangeInputs({
             )
           }
         ),
-        /* @__PURE__ */ jsxs104("span", { className: "ml-auto flex shrink-0 items-center gap-2 pl-2 text-[var(--chekin-color-gray-2)]", children: [
+        /* @__PURE__ */ jsxs105("span", { className: "ml-auto flex shrink-0 items-center gap-2 pl-2 text-[var(--chekin-color-gray-2)]", children: [
           loading && /* @__PURE__ */ jsx159(ThreeDotsLoader, { height: 18, width: 18 }),
           !readOnly && !hideClearDates && !isEmpty && /* @__PURE__ */ jsx159(
             "button",
@@ -15533,7 +15580,7 @@ function DateRangeCalendar({
 }
 
 // src/dashboard/date-range-picker/components/DateRangePopover.tsx
-import { jsx as jsx161, jsxs as jsxs105 } from "react/jsx-runtime";
+import { jsx as jsx161, jsxs as jsxs106 } from "react/jsx-runtime";
 function DateRangePopover({
   isOpen,
   isMobile: isMobile3,
@@ -15552,7 +15599,7 @@ function DateRangePopover({
         onOpenChange: (next) => {
           if (!next) onClose();
         },
-        children: /* @__PURE__ */ jsxs105(
+        children: /* @__PURE__ */ jsxs106(
           DrawerContent,
           {
             onClose,
@@ -15581,7 +15628,7 @@ function DateRangePopover({
 }
 
 // src/dashboard/date-range-picker/DateRangePicker.tsx
-import { jsx as jsx162, jsxs as jsxs106 } from "react/jsx-runtime";
+import { jsx as jsx162, jsxs as jsxs107 } from "react/jsx-runtime";
 var DashboardDateRangePicker = React57.forwardRef(function DashboardDateRangePicker2({
   label,
   value: externalValue,
@@ -15747,14 +15794,14 @@ var DashboardDateRangePicker = React57.forwardRef(function DashboardDateRangePic
     {
       ref: containerRef,
       className: cn(
-        "relative w-full max-w-[var(--max-field-width)]",
+        "relative w-full max-w-[var(--field-max-width,296px)]",
         disabled && "cursor-not-allowed opacity-50",
         loading && "cursor-progress",
         className
       ),
       style: wrapperWidth ? { width: wrapperWidth } : void 0,
-      children: /* @__PURE__ */ jsxs106("div", { className: "relative min-h-[68px] w-full", children: [
-        /* @__PURE__ */ jsxs106("div", { className: "relative w-full", children: [
+      children: /* @__PURE__ */ jsxs107("div", { className: "relative min-h-[68px] w-full", children: [
+        /* @__PURE__ */ jsxs107("div", { className: "relative w-full", children: [
           /* @__PURE__ */ jsx162(
             DateRangeInputs,
             {
@@ -16037,7 +16084,7 @@ var DashboardTimePicker = React59.forwardRef(
 import * as React60 from "react";
 import { Download, Paperclip, SquareX as SquareX5 } from "lucide-react";
 import { useTranslation as useTranslation38 } from "react-i18next";
-import { jsx as jsx164, jsxs as jsxs107 } from "react/jsx-runtime";
+import { jsx as jsx164, jsxs as jsxs108 } from "react/jsx-runtime";
 function defaultDownload(url) {
   window.open(url, "_blank", "noopener,noreferrer");
 }
@@ -16095,12 +16142,12 @@ var DashboardFileInput = React60.forwardRef(
       event.stopPropagation();
       if (isUrl) onDownload(value);
     };
-    return /* @__PURE__ */ jsxs107(
+    return /* @__PURE__ */ jsxs108(
       "label",
       {
         htmlFor: inputId,
         className: cn(
-          "relative block w-full max-w-[var(--max-field-width)] cursor-pointer text-left",
+          "relative block w-full max-w-[var(--field-max-width,296px)] cursor-pointer text-left",
           (disabled || readOnly) && "cursor-not-allowed",
           loading && "cursor-progress",
           disabled && "opacity-50",
@@ -16124,9 +16171,9 @@ var DashboardFileInput = React60.forwardRef(
               "aria-invalid": isInvalid
             }
           ),
-          /* @__PURE__ */ jsxs107("div", { className: "relative min-h-[68px] w-full", children: [
-            /* @__PURE__ */ jsxs107("div", { className: "relative w-full", children: [
-              /* @__PURE__ */ jsxs107(
+          /* @__PURE__ */ jsxs108("div", { className: "relative min-h-[68px] w-full", children: [
+            /* @__PURE__ */ jsxs108("div", { className: "relative w-full", children: [
+              /* @__PURE__ */ jsxs108(
                 "div",
                 {
                   className: cn(
@@ -16134,13 +16181,13 @@ var DashboardFileInput = React60.forwardRef(
                     isEmpty && "bg-[var(--chekin-color-surface-input-empty)]"
                   ),
                   children: [
-                    hasFileChip ? /* @__PURE__ */ jsxs107(
+                    hasFileChip ? /* @__PURE__ */ jsxs108(
                       "div",
                       {
                         className: "inline-flex h-6 max-w-[85%] items-center rounded-[4px] border border-[#acacd5] bg-[#f0f0f8] pl-[10px] pr-1",
                         onClick: (event) => event.preventDefault(),
                         children: [
-                          isUrl ? /* @__PURE__ */ jsxs107(
+                          isUrl ? /* @__PURE__ */ jsxs108(
                             "button",
                             {
                               type: "button",
@@ -16166,7 +16213,7 @@ var DashboardFileInput = React60.forwardRef(
                         ]
                       }
                     ) : /* @__PURE__ */ jsx164("span", { className: "block min-w-0 flex-1 truncate text-left text-[var(--chekin-color-gray-1)]", children: placeholder ?? "" }),
-                    /* @__PURE__ */ jsxs107("span", { className: "ml-auto flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: [
+                    /* @__PURE__ */ jsxs108("span", { className: "ml-auto flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: [
                       loading && /* @__PURE__ */ jsx164(ThreeDotsLoader, { height: 18, width: 18 }),
                       /* @__PURE__ */ jsx164(Paperclip, { size: 20 })
                     ] })
@@ -16210,7 +16257,7 @@ var DashboardFileInput = React60.forwardRef(
 
 // src/dashboard/select-icons-box/SelectIconsBox.tsx
 import * as React61 from "react";
-import { jsx as jsx165, jsxs as jsxs108 } from "react/jsx-runtime";
+import { jsx as jsx165, jsxs as jsxs109 } from "react/jsx-runtime";
 function DashboardSelectIconsBox({
   children,
   icons,
@@ -16246,7 +16293,7 @@ function DashboardSelectIconsBox({
     onSelect(iconName);
     setOpen(false);
   };
-  return /* @__PURE__ */ jsxs108(
+  return /* @__PURE__ */ jsxs109(
     "div",
     {
       ref: containerRef,
@@ -16346,13 +16393,13 @@ function getErrorMessage(error) {
 
 // src/lib/toastResponseError.tsx
 import i18next from "i18next";
-import { jsx as jsx166, jsxs as jsxs109 } from "react/jsx-runtime";
+import { jsx as jsx166, jsxs as jsxs110 } from "react/jsx-runtime";
 function addSupportEmailToMessage(message, prefixText) {
   if (typeof message !== "string") {
     return message;
   }
   const builtMessage = `${prefixText ? `${prefixText} ` : ""}${message}`;
-  return /* @__PURE__ */ jsxs109("div", { children: [
+  return /* @__PURE__ */ jsxs110("div", { children: [
     /* @__PURE__ */ jsx166("div", { children: builtMessage }),
     i18next.t("reach_us_at_email")
   ] });
@@ -16369,11 +16416,11 @@ function toastResponseError(error, options = {}) {
 
 // src/legacy-fields/textarea/Textarea.tsx
 import { forwardRef as forwardRef68, useId as useId15 } from "react";
-import { jsx as jsx167, jsxs as jsxs110 } from "react/jsx-runtime";
+import { jsx as jsx167, jsxs as jsxs111 } from "react/jsx-runtime";
 var LegacyTextarea = forwardRef68(
   ({ className, textareaClassName, label, disabled, name, invalid, ...textareaProps }, ref) => {
     const inputId = useId15();
-    return /* @__PURE__ */ jsxs110("div", { className: cn("relative", className), children: [
+    return /* @__PURE__ */ jsxs111("div", { className: cn("relative", className), children: [
       /* @__PURE__ */ jsx167(
         "textarea",
         {
@@ -16415,7 +16462,7 @@ import { Calendar as Calendar2 } from "lucide-react";
 import * as React62 from "react";
 import { Loader2 as Loader24 } from "lucide-react";
 import { useTranslation as useTranslation39 } from "react-i18next";
-import { Fragment as Fragment17, jsx as jsx168, jsxs as jsxs111 } from "react/jsx-runtime";
+import { Fragment as Fragment17, jsx as jsx168, jsxs as jsxs112 } from "react/jsx-runtime";
 var AirbnbFieldTrigger = React62.forwardRef(
   ({
     as = "button",
@@ -16453,9 +16500,9 @@ var AirbnbFieldTrigger = React62.forwardRef(
     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__ */ jsxs111("span", { className: "inline-flex max-w-full items-center gap-1.5 align-middle", children: [
+    const resolvedLabelText = visibleLabelText && hasLabelMeta ? /* @__PURE__ */ jsxs112("span", { className: "inline-flex max-w-full items-center gap-1.5 align-middle", children: [
       /* @__PURE__ */ jsx168("span", { className: "min-w-0 truncate", children: visibleLabelText }),
-      optionalLabel && /* @__PURE__ */ jsxs111("span", { className: "shrink-0 text-[12px] relative top-[1px] font-normal leading-4 text-current opacity-70", children: [
+      optionalLabel && /* @__PURE__ */ jsxs112("span", { className: "shrink-0 text-[12px] relative top-[1px] font-normal leading-4 text-current opacity-70", children: [
         "(",
         optionalLabel,
         ")"
@@ -16476,7 +16523,7 @@ var AirbnbFieldTrigger = React62.forwardRef(
     const hasInvalidState = Boolean(error);
     const errorMessage = typeof error === "string" ? error : void 0;
     const isBlocked = Boolean(disabled) || Boolean(loading);
-    const resolvedTrailingAdornment = loading || trailingAdornment ? /* @__PURE__ */ jsxs111("span", { className: "flex items-center gap-2", children: [
+    const resolvedTrailingAdornment = loading || trailingAdornment ? /* @__PURE__ */ jsxs112("span", { className: "flex items-center gap-2", children: [
       trailingAdornment,
       loading && /* @__PURE__ */ jsx168(
         Loader24,
@@ -16494,8 +16541,8 @@ var AirbnbFieldTrigger = React62.forwardRef(
       disabled ? "cursor-not-allowed opacity-50" : loading ? "cursor-progress" : isAirbnbVariant ? "cursor-pointer" : "cursor-text",
       className
     );
-    const sharedContent = /* @__PURE__ */ jsxs111(Fragment17, { children: [
-      /* @__PURE__ */ jsxs111(
+    const sharedContent = /* @__PURE__ */ jsxs112(Fragment17, { children: [
+      /* @__PURE__ */ jsxs112(
         "span",
         {
           className: cn(
@@ -16544,7 +16591,7 @@ var AirbnbFieldTrigger = React62.forwardRef(
         }
       )
     ] });
-    return /* @__PURE__ */ jsxs111("div", { className: "w-full", children: [
+    return /* @__PURE__ */ jsxs112("div", { className: "w-full", children: [
       topLabel && /* @__PURE__ */ jsx168("p", { className: "mb-3 text-[16px] font-semibold leading-5 text-[#222222]", children: topLabel }),
       as === "button" ? /* @__PURE__ */ jsx168(
         "button",
@@ -16587,7 +16634,7 @@ var AirbnbFieldTrigger = React62.forwardRef(
 AirbnbFieldTrigger.displayName = "AirbnbFieldTrigger";
 
 // src/airbnb-fields/datepicker/DatePicker.tsx
-import { jsx as jsx169, jsxs as jsxs112 } from "react/jsx-runtime";
+import { jsx as jsx169, jsxs as jsxs113 } from "react/jsx-runtime";
 var DEFAULT_MIN_DATE = new Date(1920, 0, 1);
 var AirbnbDatePicker = React63.forwardRef(
   ({
@@ -16704,7 +16751,7 @@ var AirbnbDatePicker = React63.forwardRef(
         setIsOpen(false);
       }
     }, [isBlocked]);
-    return /* @__PURE__ */ jsxs112("div", { className: cn("relative w-full max-w-[var(--max-field-width)]", className), children: [
+    return /* @__PURE__ */ jsxs113("div", { className: cn("relative w-full max-w-[var(--max-field-width)]", className), children: [
       name && /* @__PURE__ */ jsx169(
         "input",
         {
@@ -16936,7 +16983,7 @@ import { ChevronDown as ChevronDown5 } from "lucide-react";
 import * as React69 from "react";
 
 // src/airbnb-fields/select/SelectDesktopMenu.tsx
-import { jsx as jsx171, jsxs as jsxs113 } from "react/jsx-runtime";
+import { jsx as jsx171, jsxs as jsxs114 } from "react/jsx-runtime";
 function AirbnbSelectDesktopMenu({
   id,
   options,
@@ -16955,7 +17002,7 @@ function AirbnbSelectDesktopMenu({
   noOptionsMessage
 }) {
   const emptyMessage = noOptionsMessage?.();
-  return /* @__PURE__ */ jsxs113(
+  return /* @__PURE__ */ jsxs114(
     "div",
     {
       id,
@@ -17131,7 +17178,7 @@ function getMobileOptionStyles(index, scrollTop) {
 }
 
 // src/airbnb-fields/select/SelectMobileWheel.tsx
-import { jsx as jsx173, jsxs as jsxs114 } from "react/jsx-runtime";
+import { jsx as jsx173, jsxs as jsxs115 } from "react/jsx-runtime";
 function AirbnbSelectMobileWheel({
   id,
   options,
@@ -17150,7 +17197,7 @@ function AirbnbSelectMobileWheel({
 }) {
   const spacerHeight2 = getWheelSpacerHeight();
   const emptyMessage = noOptionsMessage?.();
-  return /* @__PURE__ */ jsxs114(
+  return /* @__PURE__ */ jsxs115(
     "div",
     {
       id,
@@ -17175,7 +17222,7 @@ function AirbnbSelectMobileWheel({
             )
           }
         ),
-        /* @__PURE__ */ jsxs114(
+        /* @__PURE__ */ jsxs115(
           "div",
           {
             ref: listRef,
@@ -17225,7 +17272,7 @@ function AirbnbSelectMobileWheel({
 }
 
 // src/airbnb-fields/select/SelectMobileContent.tsx
-import { jsx as jsx174, jsxs as jsxs115 } from "react/jsx-runtime";
+import { jsx as jsx174, jsxs as jsxs116 } from "react/jsx-runtime";
 function AirbnbSelectMobileContent({
   open,
   onOpenChange,
@@ -17249,10 +17296,10 @@ function AirbnbSelectMobileContent({
   getOptionId: getOptionId2,
   noOptionsMessage
 }) {
-  return /* @__PURE__ */ jsx174(Drawer, { open, onOpenChange, children: /* @__PURE__ */ jsxs115(DrawerContent, { onClose, lockScroll: false, children: [
+  return /* @__PURE__ */ jsx174(Drawer, { open, onOpenChange, children: /* @__PURE__ */ jsxs116(DrawerContent, { onClose, lockScroll: false, children: [
     /* @__PURE__ */ jsx174(DrawerTitle, { className: "sr-only", children: mobileTitle ?? label }),
     /* @__PURE__ */ jsx174(DrawerDescription, { className: "sr-only", children: label }),
-    /* @__PURE__ */ jsxs115("div", { className: "px-6 pb-4 pt-1", children: [
+    /* @__PURE__ */ jsxs116("div", { className: "px-6 pb-4 pt-1", children: [
       /* @__PURE__ */ jsx174(
         AirbnbSelectMobileWheel,
         {
@@ -17697,7 +17744,7 @@ function useSelectIds2({ name, hasValue, error, hideErrorMessage }) {
 }
 
 // src/airbnb-fields/select/Select.tsx
-import { jsx as jsx176, jsxs as jsxs116 } from "react/jsx-runtime";
+import { jsx as jsx176, jsxs as jsxs117 } from "react/jsx-runtime";
 var AirbnbSelect = React69.forwardRef(function AirbnbSelect2({
   options = [],
   value,
@@ -17877,7 +17924,7 @@ var AirbnbSelect = React69.forwardRef(function AirbnbSelect2({
       handleMobileOpenChange(false);
     }
   };
-  return /* @__PURE__ */ jsxs116(
+  return /* @__PURE__ */ jsxs117(
     "div",
     {
       ref: containerRef,
@@ -17992,7 +18039,7 @@ var AirbnbSelect = React69.forwardRef(function AirbnbSelect2({
 });
 
 // src/airbnb-fields/phone-field/PhoneField.tsx
-import { jsx as jsx177, jsxs as jsxs117 } from "react/jsx-runtime";
+import { jsx as jsx177, jsxs as jsxs118 } from "react/jsx-runtime";
 function formatPhoneCodeOptionLabel(option) {
   const label = String(option.label);
   const value = String(option.value);
@@ -18039,7 +18086,7 @@ var AirbnbPhoneField = React70.forwardRef(
     const hasInvalidState = Boolean(error) || Boolean(invalid);
     const isBlocked = Boolean(disabled) || Boolean(loading);
     const isCodeBlocked = isBlocked || Boolean(codeReadOnly);
-    return /* @__PURE__ */ jsxs117("div", { className: cn("w-full max-w-[var(--max-field-width)]", className), children: [
+    return /* @__PURE__ */ jsxs118("div", { className: cn("w-full max-w-[var(--max-field-width)]", className), children: [
       name && /* @__PURE__ */ jsx177("input", { type: "hidden", name, value: combinedValue, disabled }),
       codeName && /* @__PURE__ */ jsx177(
         "input",
@@ -18067,7 +18114,7 @@ var AirbnbPhoneField = React70.forwardRef(
           children: topLabel
         }
       ),
-      /* @__PURE__ */ jsxs117("div", { className: "flex items-stretch", children: [
+      /* @__PURE__ */ jsxs118("div", { className: "flex items-stretch", children: [
         /* @__PURE__ */ jsx177(
           AirbnbSelect,
           {
@@ -18099,7 +18146,7 @@ var AirbnbPhoneField = React70.forwardRef(
               onClick,
               onKeyDown,
               valueLabel
-            }) => /* @__PURE__ */ jsxs117(
+            }) => /* @__PURE__ */ jsxs118(
               "button",
               {
                 id,
@@ -18174,10 +18221,10 @@ AirbnbPhoneField.displayName = "AirbnbPhoneField";
 
 // src/airbnb-fields/searchable-select/SearchableSelect.tsx
 import * as React71 from "react";
-import { ChevronDown as ChevronDown6, Search as Search3 } from "lucide-react";
+import { ChevronDown as ChevronDown6, Search as Search5 } from "lucide-react";
 import { useVirtualizer as useVirtualizer3 } from "@tanstack/react-virtual";
-import { useCallback as useCallback50 } from "react";
-import { jsx as jsx178, jsxs as jsxs118 } from "react/jsx-runtime";
+import { useCallback as useCallback51 } from "react";
+import { jsx as jsx178, jsxs as jsxs119 } from "react/jsx-runtime";
 var ROW_HEIGHT = 48;
 var DESKTOP_LIST_HEIGHT = 280;
 var MOBILE_LIST_HEIGHT = 420;
@@ -18255,7 +18302,7 @@ var AirbnbSearchableSelectInternal = ({
     isDisabled: !open || isMobile3
   });
   const handleOnOpenChange = useEvent(onOpenChange);
-  const setSelectOpen = useCallback50(
+  const setSelectOpen = useCallback51(
     (nextOpen, options2) => {
       setOpen(nextOpen);
       handleOnOpenChange?.(nextOpen);
@@ -18374,7 +18421,7 @@ var AirbnbSearchableSelectInternal = ({
     }
   );
   React71.useImperativeHandle(ref, () => triggerRef.current, []);
-  return /* @__PURE__ */ jsxs118("div", { ref: containerRef, className: cn("relative w-full max-w-[425px]", className), children: [
+  return /* @__PURE__ */ jsxs119("div", { ref: containerRef, className: cn("relative w-full max-w-[425px]", className), children: [
     name && /* @__PURE__ */ jsx178("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
     /* @__PURE__ */ jsx178(
       AirbnbFieldTrigger,
@@ -18434,7 +18481,7 @@ var AirbnbSearchableSelectInternal = ({
           }
           closeSelect();
         },
-        children: /* @__PURE__ */ jsxs118(DrawerContent, { onClose: closeSelect, lockScroll: false, children: [
+        children: /* @__PURE__ */ jsxs119(DrawerContent, { onClose: closeSelect, lockScroll: false, children: [
           /* @__PURE__ */ jsx178(DrawerTitle, { className: "sr-only", children: mobileTitle ?? label }),
           /* @__PURE__ */ jsx178(DrawerDescription, { className: "sr-only", children: label }),
           /* @__PURE__ */ jsx178("div", { className: "px-5 pb-5 pt-1", children: content })
@@ -18507,10 +18554,10 @@ function AirbnbSearchableSelectContent({
       virtualizer.scrollToIndex(highlightedIndex, { align: "auto" });
     }
   }, [highlightedIndex, virtualizer]);
-  return /* @__PURE__ */ jsxs118("div", { className: "p-2", children: [
-    /* @__PURE__ */ jsxs118("div", { className: "relative mb-2", children: [
+  return /* @__PURE__ */ jsxs119("div", { className: "p-2", children: [
+    /* @__PURE__ */ jsxs119("div", { className: "relative mb-2", children: [
       /* @__PURE__ */ jsx178(
-        Search3,
+        Search5,
         {
           "aria-hidden": "true",
           className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 text-[#9696B9]"
@@ -18620,13 +18667,13 @@ function getNextEnabledIndex(options, startIndex, step) {
 // src/airbnb-fields/search-input/SearchInput.tsx
 import * as React72 from "react";
 import { useTranslation as useTranslation40 } from "react-i18next";
-import { Search as Search4, X as X10 } from "lucide-react";
-import { jsx as jsx179, jsxs as jsxs119 } from "react/jsx-runtime";
+import { Search as Search6, X as X10 } from "lucide-react";
+import { jsx as jsx179, jsxs as jsxs120 } from "react/jsx-runtime";
 var AirbnbSearchInput = React72.forwardRef(({ onReset, placeholder, wrapperClassName, ...props }, ref) => {
   const { t } = useTranslation40();
   const placeholderText = placeholder || t("search_property") + "...";
-  return /* @__PURE__ */ jsxs119("div", { className: cn("input-wrapper relative", wrapperClassName), children: [
-    /* @__PURE__ */ jsx179(Search4, { className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 transform text-[#9696B9]" }),
+  return /* @__PURE__ */ jsxs120("div", { className: cn("input-wrapper relative", wrapperClassName), children: [
+    /* @__PURE__ */ jsx179(Search6, { className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 transform text-[#9696B9]" }),
     /* @__PURE__ */ jsx179(
       "input",
       {