@chekinapp/ui 0.0.2 → 0.0.4

package/dist/index.cjs

@@ -172,6 +172,7 @@ __export(index_exports, {
   RatingRadioGroup: () => RatingRadioGroup,
   RatingStars: () => RatingStars,
   RegistryIcon: () => RegistryIcon,
+  ResponsiveSheet: () => ResponsiveSheet,
   RotateIcon: () => RotateIcon,
   ScrollArea: () => ScrollArea,
   ScrollBar: () => ScrollBar,
@@ -4982,6 +4983,10 @@ var import_react25 = require("react");
 function getChekinRuntimeSettings() {
   return window.ChekinProSettings || window.ChekinHousingsSDKSettings || {};
 }
+function isMobileModalModeAvailable() {
+  const settings = getChekinRuntimeSettings();
+  return !settings.autoHeight;
+}
 
 // src/lib/use-scroll-frame-into-view.ts
 function useScrollFrameIntoView(active, options = {}) {
@@ -5298,37 +5303,42 @@ var SelectLabel = React19.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 SelectLabel.displayName = "SelectLabel";
-var Select = ({
-  placeholder,
-  label,
-  supportingText,
-  errorText,
-  containerClassName,
-  triggerClassName,
-  children,
-  ...props
-}) => {
-  const reactId = React19.useId();
-  const triggerId = props.name ?? reactId;
-  return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: cn("flex flex-col gap-chekin-1 w-[300px]", containerClassName), children: [
-    label && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
-      "label",
-      {
-        htmlFor: triggerId,
-        className: "text-chekin-navy font-sans font-medium text-[14px] leading-5",
-        children: label
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(SelectRoot, { ...props, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(SelectTrigger, { id: triggerId, className: triggerClassName, children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(RadixSelect.Value, { placeholder }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(SelectContent, { children })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "flex justify-between min-h-[15px]", children: [
-      supportingText && !errorText && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { className: "text-chekin-gray-2 font-sans italic text-[12px] leading-[15px]", children: supportingText }),
-      errorText && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { className: "ml-auto text-chekin-red font-sans font-medium text-[12px] leading-4 text-right", children: errorText })
-    ] })
-  ] });
-};
+var Select = React19.forwardRef(
+  ({
+    placeholder,
+    label,
+    supportingText,
+    errorText,
+    containerClassName,
+    triggerClassName,
+    children,
+    ...props
+  }, ref) => {
+    const reactId = React19.useId();
+    const triggerId = props.name ?? reactId;
+    const internalRef = React19.useRef(null);
+    const combinedRef = useCombinedRef(ref, internalRef);
+    return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: cn("flex flex-col gap-chekin-1 w-[300px]", containerClassName), children: [
+      label && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+        "label",
+        {
+          htmlFor: triggerId,
+          className: "text-chekin-navy font-sans font-medium text-[14px] leading-5",
+          children: label
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(SelectRoot, { ...props, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(SelectTrigger, { ref: combinedRef, id: triggerId, className: triggerClassName, children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(RadixSelect.Value, { placeholder }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(SelectContent, { children })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "flex justify-between min-h-[15px]", children: [
+        supportingText && !errorText && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { className: "text-chekin-gray-2 font-sans italic text-[12px] leading-[15px]", children: supportingText }),
+        errorText && /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { className: "ml-auto text-chekin-red font-sans font-medium text-[12px] leading-4 text-right", children: errorText })
+      ] })
+    ] });
+  }
+);
+Select.displayName = "Select";
 
 // src/pagination/Pagination.tsx
 var import_jsx_runtime77 = require("react/jsx-runtime");
@@ -9103,158 +9113,270 @@ FieldTrigger.displayName = "FieldTrigger";
 // src/datepicker/DatePicker.tsx
 var import_jsx_runtime123 = require("react/jsx-runtime");
 var DEFAULT_MIN_DATE = new Date(1920, 0, 1);
-function DatePicker({
-  variant = "default",
-  label,
-  topLabel,
-  value,
-  defaultValue,
-  onChange,
-  placeholder = "Select a date",
-  disabled,
-  error,
+var DatePicker = React30.forwardRef(
+  ({
+    variant = "default",
+    label,
+    topLabel,
+    value,
+    defaultValue,
+    onChange,
+    placeholder = "Select a date",
+    disabled,
+    error,
+    className,
+    name,
+    minDate,
+    maxDate,
+    locale = "en-US",
+    mobileTitle,
+    doneLabel = "Done",
+    formatValue = formatDateValue
+  }, ref) => {
+    const { isMatch: isMobile } = useScreenResize(DEVICE.mobileXL);
+    const [isOpen, setIsOpen] = React30.useState(false);
+    const triggerId = React30.useId();
+    const pickerId = React30.useId();
+    const labelId = React30.useId();
+    const valueId = React30.useId();
+    const helperTextId = React30.useId();
+    const errorId = React30.useId();
+    const internalRef = React30.useRef(null);
+    const combinedRef = useCombinedRef(ref, internalRef);
+    const monthLabels = React30.useMemo(() => getMonthLabels(locale), [locale]);
+    const resolvedMinDate = React30.useMemo(() => minDate ?? DEFAULT_MIN_DATE, [minDate]);
+    const resolvedMaxDate = React30.useMemo(() => maxDate ?? /* @__PURE__ */ new Date(), [maxDate]);
+    const resolvedValue = React30.useMemo(
+      () => value ? clampDate(value, resolvedMinDate, resolvedMaxDate) : null,
+      [resolvedMaxDate, resolvedMinDate, value]
+    );
+    const hasValue = Boolean(resolvedValue);
+    const {
+      dayIndex,
+      dayListRef,
+      dayScrollTop,
+      days,
+      draftDate,
+      handleColumnKeyDown,
+      handleColumnScroll,
+      handleOptionSelect,
+      monthIndex,
+      monthListRef,
+      months,
+      monthScrollTop,
+      yearIndex,
+      yearListRef,
+      yearScrollTop,
+      years
+    } = useDatePickerWheel({
+      isOpen,
+      value: resolvedValue,
+      defaultValue,
+      minDate: resolvedMinDate,
+      maxDate: resolvedMaxDate
+    });
+    const handleOpenChange = React30.useCallback((nextOpen) => {
+      setIsOpen(nextOpen);
+      if (!nextOpen) {
+        internalRef.current?.focus();
+      }
+    }, []);
+    const handleDone = React30.useCallback(() => {
+      onChange(clampDate(draftDate, resolvedMinDate, resolvedMaxDate));
+      handleOpenChange(false);
+    }, [draftDate, handleOpenChange, onChange, resolvedMaxDate, resolvedMinDate]);
+    const handleTriggerClick = React30.useCallback(() => {
+      if (disabled) return;
+      setIsOpen(true);
+    }, [disabled]);
+    const handleTriggerKeyDown = React30.useCallback(
+      (event) => {
+        if (disabled) return;
+        if (event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          setIsOpen(true);
+        }
+      },
+      [disabled]
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { className: cn("relative w-full max-w-[425px]", className), children: [
+      name && /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
+        "input",
+        {
+          type: "hidden",
+          name,
+          value: resolvedValue ? formatDateInputValue(resolvedValue) : ""
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
+        FieldTrigger,
+        {
+          id: triggerId,
+          ref: combinedRef,
+          variant,
+          label,
+          topLabel,
+          labelId,
+          valueId: hasValue ? valueId : void 0,
+          helperTextId: !hasValue ? helperTextId : void 0,
+          errorId: error ? errorId : void 0,
+          describedBy: error ? errorId : void 0,
+          labelText: topLabel ? placeholder : void 0,
+          valueText: resolvedValue ? formatValue(resolvedValue) : void 0,
+          placeholder,
+          disabled,
+          error,
+          "aria-haspopup": "dialog",
+          "aria-expanded": isOpen,
+          onClick: handleTriggerClick,
+          onKeyDown: handleTriggerKeyDown,
+          trailingAdornment: /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(import_lucide_react41.Calendar, { className: "h-5 w-5 text-[#1F1F1B]", strokeWidth: 2 })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
+        DatePickerContent,
+        {
+          baseId: pickerId,
+          open: isOpen,
+          isMobile,
+          label,
+          title: mobileTitle ?? label,
+          doneLabel,
+          monthLabels: months.map((month) => monthLabels[month] ?? ""),
+          days,
+          years,
+          monthIndex,
+          dayIndex,
+          yearIndex,
+          monthScrollTop,
+          dayScrollTop,
+          yearScrollTop,
+          monthListRef,
+          dayListRef,
+          yearListRef,
+          onOpenChange: handleOpenChange,
+          onDone: handleDone,
+          onColumnScroll: handleColumnScroll,
+          onColumnKeyDown: handleColumnKeyDown,
+          onOptionSelect: handleOptionSelect
+        }
+      )
+    ] });
+  }
+);
+DatePicker.displayName = "DatePicker";
+
+// src/responsive-sheet/ResponsiveSheet.tsx
+var import_jsx_runtime124 = require("react/jsx-runtime");
+function ResponsiveSheet({
+  open,
+  onClose,
+  title,
+  description,
+  children,
   className,
-  name,
-  minDate,
-  maxDate,
-  locale = "en-US",
-  mobileTitle,
-  doneLabel = "Done",
-  formatValue = formatDateValue
+  contentClassName,
+  dialogClassName,
+  drawerClassName,
+  titleClassName,
+  descriptionClassName,
+  showCloseButton = true,
+  showDrawerHandle = true,
+  closeOnOverlayClick = true,
+  closeOnEscape = true
 }) {
-  const { isMatch: isMobile } = useScreenResize(DEVICE.mobileXL);
-  const [isOpen, setIsOpen] = React30.useState(false);
-  const triggerId = React30.useId();
-  const pickerId = React30.useId();
-  const labelId = React30.useId();
-  const valueId = React30.useId();
-  const helperTextId = React30.useId();
-  const errorId = React30.useId();
-  const triggerRef = React30.useRef(null);
-  const monthLabels = React30.useMemo(() => getMonthLabels(locale), [locale]);
-  const resolvedMinDate = React30.useMemo(() => minDate ?? DEFAULT_MIN_DATE, [minDate]);
-  const resolvedMaxDate = React30.useMemo(() => maxDate ?? /* @__PURE__ */ new Date(), [maxDate]);
-  const resolvedValue = React30.useMemo(
-    () => value ? clampDate(value, resolvedMinDate, resolvedMaxDate) : null,
-    [resolvedMaxDate, resolvedMinDate, value]
-  );
-  const hasValue = Boolean(resolvedValue);
-  const {
-    dayIndex,
-    dayListRef,
-    dayScrollTop,
-    days,
-    draftDate,
-    handleColumnKeyDown,
-    handleColumnScroll,
-    handleOptionSelect,
-    monthIndex,
-    monthListRef,
-    months,
-    monthScrollTop,
-    yearIndex,
-    yearListRef,
-    yearScrollTop,
-    years
-  } = useDatePickerWheel({
-    isOpen,
-    value: resolvedValue,
-    defaultValue,
-    minDate: resolvedMinDate,
-    maxDate: resolvedMaxDate
-  });
-  const handleOpenChange = React30.useCallback((nextOpen) => {
-    setIsOpen(nextOpen);
+  const { isMatch: isMobile } = useScreenResize(DEVICE.laptop);
+  const isMobileMode = isMobile && isMobileModalModeAvailable();
+  const handleOpenChange = (nextOpen) => {
     if (!nextOpen) {
-      triggerRef.current?.focus();
+      onClose();
+    }
+  };
+  const handleInteractOutside = (event) => {
+    if (!closeOnOverlayClick) {
+      event.preventDefault();
+    }
+  };
+  const handleEscapeKeyDown = (event) => {
+    if (!closeOnEscape) {
+      event.preventDefault();
+    }
+  };
+  const content = /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(
+    "div",
+    {
+      className: cn(
+        "flex w-full flex-col px-6 pb-6 pt-4 sm:px-8 sm:pb-8 sm:pt-8",
+        contentClassName
+      ),
+      children: [
+        title ? /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
+          "div",
+          {
+            className: cn(
+              "text-center text-[20px] font-semibold leading-7",
+              titleClassName
+            ),
+            children: title
+          }
+        ) : null,
+        description ? /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
+          "p",
+          {
+            className: cn(
+              "mt-3 text-center text-[14px] leading-6 text-[var(--primary)]/70",
+              descriptionClassName
+            ),
+            children: description
+          }
+        ) : null,
+        children
+      ]
     }
-  }, []);
-  const handleDone = React30.useCallback(() => {
-    onChange(clampDate(draftDate, resolvedMinDate, resolvedMaxDate));
-    handleOpenChange(false);
-  }, [draftDate, handleOpenChange, onChange, resolvedMaxDate, resolvedMinDate]);
-  const handleTriggerClick = React30.useCallback(() => {
-    if (disabled) return;
-    setIsOpen(true);
-  }, [disabled]);
-  const handleTriggerKeyDown = React30.useCallback(
-    (event) => {
-      if (disabled) return;
-      if (event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "Enter" || event.key === " ") {
-        event.preventDefault();
-        setIsOpen(true);
-      }
-    },
-    [disabled]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime123.jsxs)("div", { className: cn("relative w-full max-w-[480px]", className), children: [
-    name && /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
-      "input",
-      {
-        type: "hidden",
-        name,
-        value: resolvedValue ? formatDateInputValue(resolvedValue) : ""
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
-      FieldTrigger,
-      {
-        id: triggerId,
-        ref: triggerRef,
-        variant,
-        label,
-        topLabel,
-        labelId,
-        valueId: hasValue ? valueId : void 0,
-        helperTextId: !hasValue ? helperTextId : void 0,
-        errorId: error ? errorId : void 0,
-        describedBy: error ? errorId : void 0,
-        labelText: topLabel ? placeholder : void 0,
-        valueText: resolvedValue ? formatValue(resolvedValue) : void 0,
-        placeholder,
-        disabled,
-        error,
-        "aria-haspopup": "dialog",
-        "aria-expanded": isOpen,
-        onClick: handleTriggerClick,
-        onKeyDown: handleTriggerKeyDown,
-        trailingAdornment: /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(import_lucide_react41.Calendar, { className: "h-5 w-5 text-[#1F1F1B]", strokeWidth: 2 })
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime123.jsx)(
-      DatePickerContent,
+  if (isMobileMode) {
+    return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(Drawer, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(
+      DrawerContent,
       {
-        baseId: pickerId,
-        open: isOpen,
-        isMobile,
-        label,
-        title: mobileTitle ?? label,
-        doneLabel,
-        monthLabels: months.map((month) => monthLabels[month] ?? ""),
-        days,
-        years,
-        monthIndex,
-        dayIndex,
-        yearIndex,
-        monthScrollTop,
-        dayScrollTop,
-        yearScrollTop,
-        monthListRef,
-        dayListRef,
-        yearListRef,
-        onOpenChange: handleOpenChange,
-        onDone: handleDone,
-        onColumnScroll: handleColumnScroll,
-        onColumnKeyDown: handleColumnKeyDown,
-        onOptionSelect: handleOptionSelect
+        onClose,
+        showHandle: showDrawerHandle,
+        closeOnOverlayClick,
+        lockScroll: false,
+        onEscapeKeyDown: handleEscapeKeyDown,
+        className: cn(className, drawerClassName),
+        children: [
+          title ? /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(DrawerTitle, { className: "sr-only", children: title }) : null,
+          description ? /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(DrawerDescription, { className: "sr-only", children: description }) : null,
+          content
+        ]
       }
-    )
-  ] });
+    ) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(Dialog, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime124.jsxs)(
+    DialogContent,
+    {
+      showCloseButton,
+      onPointerDownOutside: handleInteractOutside,
+      onInteractOutside: handleInteractOutside,
+      onEscapeKeyDown: handleEscapeKeyDown,
+      className: cn(
+        "max-w-[560px] rounded-[28px] border-0 p-0 shadow-xl",
+        className,
+        dialogClassName
+      ),
+      lockScroll: false,
+      children: [
+        title ? /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(DialogTitle, { className: "sr-only", children: title }) : null,
+        description ? /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(DialogDescription, { className: "sr-only", children: description }) : null,
+        content
+      ]
+    }
+  ) });
 }
 
 // src/airbnb/input/Input.tsx
 var React31 = __toESM(require("react"), 1);
-var import_jsx_runtime124 = require("react/jsx-runtime");
+var import_jsx_runtime125 = require("react/jsx-runtime");
 var getInputValue = (value) => value != null ? String(value) : "";
 var AirbnbInput = React31.forwardRef(
   ({
@@ -9329,7 +9451,7 @@ var AirbnbInput = React31.forwardRef(
       setIsFocused(false);
       onBlur?.(event);
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime124.jsx)("div", { className: cn("w-full", wrapperClassName), children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("div", { className: cn("w-full", wrapperClassName), children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
       FieldTrigger,
       {
         as: "div",
@@ -9357,7 +9479,7 @@ var AirbnbInput = React31.forwardRef(
         trailingAdornment,
         forceFloatingLabel: shouldShowLabel,
         hideErrorMessage: !renderErrorMessage,
-        children: /* @__PURE__ */ (0, import_jsx_runtime124.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime125.jsx)(
           "input",
           {
             ...props,
@@ -9398,7 +9520,7 @@ var import_lucide_react43 = require("lucide-react");
 var React36 = __toESM(require("react"), 1);
 
 // src/airbnb/select/SelectDesktopMenu.tsx
-var import_jsx_runtime125 = require("react/jsx-runtime");
+var import_jsx_runtime126 = require("react/jsx-runtime");
 function SelectDesktopMenu({
   id,
   options,
@@ -9417,7 +9539,7 @@ function SelectDesktopMenu({
   noOptionsMessage
 }) {
   const emptyMessage = noOptionsMessage?.();
-  return /* @__PURE__ */ (0, import_jsx_runtime125.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime126.jsxs)(
     "div",
     {
       id,
@@ -9430,12 +9552,12 @@ function SelectDesktopMenu({
       onKeyDown,
       className: cn("max-h-[280px] overflow-y-auto p-2 outline-none", menuClassName),
       children: [
-        options.length === 0 && emptyMessage ? /* @__PURE__ */ (0, import_jsx_runtime125.jsx)("div", { className: "px-4 py-3 text-base leading-6 text-[#6C6C6C]", children: emptyMessage }) : null,
+        options.length === 0 && emptyMessage ? /* @__PURE__ */ (0, import_jsx_runtime126.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_runtime125.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
             "button",
             {
               id: getOptionId2(index),
@@ -9467,7 +9589,7 @@ function SelectDesktopMenu({
 }
 
 // src/airbnb/select/SelectDesktopContent.tsx
-var import_jsx_runtime126 = require("react/jsx-runtime");
+var import_jsx_runtime127 = require("react/jsx-runtime");
 function SelectDesktopContent({
   isOpen,
   listboxId,
@@ -9488,14 +9610,14 @@ function SelectDesktopContent({
   noOptionsMessage
 }) {
   if (!isOpen) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime126.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime127.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_runtime126.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime127.jsx)(
         SelectDesktopMenu,
         {
           id: listboxId,
@@ -9593,7 +9715,7 @@ function getMobileOptionStyles(index, scrollTop) {
 }
 
 // src/airbnb/select/SelectMobileWheel.tsx
-var import_jsx_runtime127 = require("react/jsx-runtime");
+var import_jsx_runtime128 = require("react/jsx-runtime");
 function SelectMobileWheel({
   id,
   options,
@@ -9612,7 +9734,7 @@ function SelectMobileWheel({
 }) {
   const spacerHeight2 = getWheelSpacerHeight();
   const emptyMessage = noOptionsMessage?.();
-  return /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(
     "div",
     {
       id,
@@ -9624,10 +9746,10 @@ function SelectMobileWheel({
       onKeyDown,
       className: cn("relative overflow-hidden outline-none", menuClassName),
       children: [
-        options.length === 0 && emptyMessage ? /* @__PURE__ */ (0, import_jsx_runtime127.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_runtime127.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_runtime127.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_runtime127.jsx)(
+        options.length === 0 && emptyMessage ? /* @__PURE__ */ (0, import_jsx_runtime128.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_runtime128.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_runtime128.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_runtime128.jsx)(
           "div",
           {
             "aria-hidden": true,
@@ -9637,7 +9759,7 @@ function SelectMobileWheel({
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime127.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(
           "div",
           {
             ref: listRef,
@@ -9652,11 +9774,11 @@ function SelectMobileWheel({
               WebkitOverflowScrolling: "touch"
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("div", { style: { height: `${spacerHeight2}px` } }),
+              /* @__PURE__ */ (0, import_jsx_runtime128.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_runtime127.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
                   "button",
                   {
                     id: getOptionId2(index),
@@ -9677,7 +9799,7 @@ function SelectMobileWheel({
                   optionKey
                 );
               }),
-              /* @__PURE__ */ (0, import_jsx_runtime127.jsx)("div", { style: { height: `${spacerHeight2}px` } })
+              /* @__PURE__ */ (0, import_jsx_runtime128.jsx)("div", { style: { height: `${spacerHeight2}px` } })
             ]
           }
         )
@@ -9687,7 +9809,7 @@ function SelectMobileWheel({
 }
 
 // src/airbnb/select/SelectMobileContent.tsx
-var import_jsx_runtime128 = require("react/jsx-runtime");
+var import_jsx_runtime129 = require("react/jsx-runtime");
 function SelectMobileContent({
   open,
   onOpenChange,
@@ -9711,11 +9833,11 @@ function SelectMobileContent({
   getOptionId: getOptionId2,
   noOptionsMessage
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(Drawer, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)(DrawerContent, { onClose, lockScroll: false, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(DrawerTitle, { className: "sr-only", children: mobileTitle ?? label }),
-    /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(DrawerDescription, { className: "sr-only", children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime128.jsxs)("div", { className: "px-6 pb-4 pt-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(Drawer, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)(DrawerContent, { onClose, lockScroll: false, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(DrawerTitle, { className: "sr-only", children: mobileTitle ?? label }),
+    /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(DrawerDescription, { className: "sr-only", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime129.jsxs)("div", { className: "px-6 pb-4 pt-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
         SelectMobileWheel,
         {
           id: listboxId,
@@ -9734,7 +9856,7 @@ function SelectMobileContent({
           noOptionsMessage
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime128.jsx)(Button, { type: "button", onClick: onDone, className: "mt-4 h-12 mb-8 w-full", children: doneLabel })
+      /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(Button, { type: "button", onClick: onDone, className: "mt-4 h-12 mb-8 w-full", children: doneLabel })
     ] })
   ] }) });
 }
@@ -9742,7 +9864,7 @@ function SelectMobileContent({
 // src/airbnb/select/SelectTrigger.tsx
 var React32 = __toESM(require("react"), 1);
 var import_lucide_react42 = require("lucide-react");
-var import_jsx_runtime129 = require("react/jsx-runtime");
+var import_jsx_runtime130 = require("react/jsx-runtime");
 var SelectTrigger2 = React32.forwardRef(
   ({
     id,
@@ -9764,7 +9886,7 @@ var SelectTrigger2 = React32.forwardRef(
     onClick,
     onKeyDown
   }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
       FieldTrigger,
       {
         id,
@@ -9788,7 +9910,7 @@ var SelectTrigger2 = React32.forwardRef(
         disabled,
         onClick,
         onKeyDown,
-        trailingAdornment: /* @__PURE__ */ (0, import_jsx_runtime129.jsx)(
+        trailingAdornment: /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
           import_lucide_react42.ChevronDown,
           {
             className: open ? "h-6 w-6 rotate-180 text-[#1F1F1B] transition-transform" : "h-6 w-6 text-[#1F1F1B] transition-transform"
@@ -10202,8 +10324,8 @@ function useOutsideClick(elementRef, onOutsideClick, nested) {
 }
 
 // src/airbnb/select/Select.tsx
-var import_jsx_runtime130 = require("react/jsx-runtime");
-function AirbnbSelect({
+var import_jsx_runtime131 = require("react/jsx-runtime");
+var AirbnbSelect = React36.forwardRef(function AirbnbSelect2({
   options,
   value,
   onChange,
@@ -10223,7 +10345,7 @@ function AirbnbSelect({
   mobileTitle,
   name,
   noOptionsMessage
-}) {
+}, ref) {
   const { isMatch: isMobile } = useScreenResize(DEVICE.mobileXL);
   const [isOpen, setIsOpen] = React36.useState(false);
   const containerRef = React36.useRef(null);
@@ -10261,7 +10383,7 @@ function AirbnbSelect({
     listRef: desktopListRef,
     setHighlightedIndex,
     setOptionRef,
-    triggerRef,
+    triggerRef: desktopTriggerRef,
     focusTrigger,
     handleSelect: handleDesktopSelect,
     handleMenuKeyDown,
@@ -10274,6 +10396,7 @@ function AirbnbSelect({
     disabled,
     onChange
   });
+  const combinedRef = useCombinedRef(ref, desktopTriggerRef);
   const activeMobileIndex = getOptionIndex(options, pendingValue);
   const valueLabel = value ? getValueLabel?.(value) ?? String(value.label) : void 0;
   useOutsideClick(containerRef, isOpen && !isMobile ? () => setIsOpen(false) : null);
@@ -10360,8 +10483,8 @@ function AirbnbSelect({
       handleMobileOpenChange(false);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime130.jsxs)("div", { ref: containerRef, className: cn("relative w-full max-w-[480px]", className), children: [
-    name && /* @__PURE__ */ (0, import_jsx_runtime130.jsx)("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
+  return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("div", { ref: containerRef, className: cn("relative w-full max-w-[425px]", className), children: [
+    name && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
     renderTrigger ? renderTrigger({
       id: triggerId,
       open: isOpen,
@@ -10375,14 +10498,14 @@ function AirbnbSelect({
       error,
       listboxId,
       describedBy,
-      triggerRef,
+      triggerRef: combinedRef,
       onClick: handleTriggerClick,
       onKeyDown: handleRootTriggerKeyDown
-    }) : /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+    }) : /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
       SelectTrigger2,
       {
         id: triggerId,
-        ref: triggerRef,
+        ref: combinedRef,
         open: isOpen,
         variant,
         label,
@@ -10402,7 +10525,7 @@ function AirbnbSelect({
         onKeyDown: handleRootTriggerKeyDown
       }
     ),
-    isMobile ? /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+    isMobile ? /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
       SelectMobileContent,
       {
         open: isOpen,
@@ -10427,7 +10550,7 @@ function AirbnbSelect({
         getOptionId: getOptionId2,
         noOptionsMessage
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime130.jsx)(
+    ) : /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
       SelectDesktopContent,
       {
         isOpen,
@@ -10456,172 +10579,176 @@ function AirbnbSelect({
       }
     )
   ] });
-}
+});
 
 // src/airbnb/phone-field/PhoneField.tsx
-var import_jsx_runtime131 = require("react/jsx-runtime");
-function PhoneField({
-  variant = "default",
-  label,
-  topLabel,
-  value,
-  onChange,
-  options,
-  placeholder = "Phone number",
-  disabled,
-  error,
-  className,
-  name,
-  codeName,
-  numberName,
-  mobileTitle,
-  codePlaceholder = "+00"
-}) {
-  const inputId = React37.useId();
-  const codeOptions = React37.useMemo(
-    () => options.map((option) => ({
-      value: option.value,
-      label: option.label,
-      disabled: option.disabled
-    })),
-    [options]
-  );
-  const selectedCodeOption = React37.useMemo(
-    () => codeOptions.find((option) => option.value === value?.code) ?? null,
-    [codeOptions, value?.code]
-  );
-  const combinedValue = value?.code || value?.number ? `${value?.code ?? ""}${value?.number ?? ""}` : "";
-  return /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("div", { className: cn("w-full max-w-[480px]", className), children: [
-    name && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("input", { type: "hidden", name, value: combinedValue, disabled }),
-    codeName && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
-      "input",
-      {
-        type: "hidden",
-        name: codeName,
-        value: value?.code ?? "",
-        disabled
-      }
-    ),
-    numberName && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
-      "input",
-      {
-        type: "hidden",
-        name: numberName,
-        value: value?.number ?? "",
-        disabled
-      }
-    ),
-    topLabel && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
-      "label",
-      {
-        htmlFor: inputId,
-        className: "mb-3 block text-[16px] font-medium leading-5 text-[#1F1F1B]",
-        children: topLabel
-      }
-    ),
-    /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)("div", { className: "flex items-stretch", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
-        AirbnbSelect,
+var import_jsx_runtime132 = require("react/jsx-runtime");
+var PhoneField = React37.forwardRef(
+  ({
+    variant = "default",
+    label,
+    topLabel,
+    value,
+    onChange,
+    options,
+    placeholder = "Phone number",
+    disabled,
+    error,
+    className,
+    name,
+    codeName,
+    numberName,
+    mobileTitle,
+    codePlaceholder = "+00"
+  }, ref) => {
+    const inputId = React37.useId();
+    const codeOptions = React37.useMemo(
+      () => options.map((option) => ({
+        value: option.value,
+        label: option.label,
+        disabled: option.disabled
+      })),
+      [options]
+    );
+    const selectedCodeOption = React37.useMemo(
+      () => codeOptions.find((option) => option.value === value?.code) ?? null,
+      [codeOptions, value?.code]
+    );
+    const combinedValue = value?.code || value?.number ? `${value?.code ?? ""}${value?.number ?? ""}` : "";
+    return /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("div", { className: cn("w-full max-w-[425px]", className), children: [
+      name && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("input", { type: "hidden", name, value: combinedValue, disabled }),
+      codeName && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+        "input",
         {
-          variant,
-          options: codeOptions,
-          value: selectedCodeOption,
-          onChange: (option) => onChange({
-            code: String(option.value),
-            number: value?.number ?? ""
-          }),
-          label: `${label} country code`,
-          placeholder: codePlaceholder,
-          disabled,
-          className: "max-w-none shrink-0 basis-[96px]",
-          mobileTitle: mobileTitle ?? "Select country code",
-          dropdownClassName: "right-auto w-[280px]",
-          getValueLabel: (option) => String(option.value),
-          renderTrigger: ({
-            id,
-            open,
-            variant: selectVariant,
-            disabled: triggerDisabled,
-            listboxId,
-            triggerRef,
-            onClick,
-            onKeyDown,
-            valueLabel
-          }) => /* @__PURE__ */ (0, import_jsx_runtime131.jsxs)(
-            "button",
-            {
-              id,
-              ref: triggerRef,
-              type: "button",
-              "aria-label": `${label} country code`,
-              "aria-haspopup": "listbox",
-              "aria-expanded": open,
-              "aria-controls": listboxId,
-              disabled: triggerDisabled,
-              onClick,
-              onKeyDown,
-              className: cn(
-                "flex w-full items-center justify-center gap-2 border border-r-0 text-[16px] font-medium leading-6 transition-colors focus-visible:outline-none",
-                selectVariant === "airbnb" ? "h-full min-h-[60px] rounded-l-[16px] rounded-r-none px-4 focus-visible:ring-2 focus-visible:ring-[#1F1F1B] focus-visible:ring-offset-2" : "min-h-[48px] rounded-l-[10px] rounded-r-none px-3.5 focus-visible:border-[#315EFB]",
-                error ? "border-[var(--status-danger)] bg-[#F2F2F2] text-[var(--status-danger)]" : selectVariant === "airbnb" ? "border-[#8C8C8C] bg-[#F4F4F2] text-[#1F1F1B]" : "border-[#A8A8A4] bg-white text-[#1F1F1B]",
-                triggerDisabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"
-              ),
-              children: [
-                /* @__PURE__ */ (0, import_jsx_runtime131.jsx)("span", { children: valueLabel ?? codePlaceholder }),
-                /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
-                  import_lucide_react43.ChevronDown,
-                  {
-                    className: cn("h-5 w-5 transition-transform", open ? "rotate-180" : ""),
-                    strokeWidth: 2
-                  }
-                )
-              ]
-            }
-          )
+          type: "hidden",
+          name: codeName,
+          value: value?.code ?? "",
+          disabled
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(
-        AirbnbInput,
+      numberName && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+        "input",
         {
-          id: inputId,
-          variant,
-          type: "tel",
-          inputMode: "tel",
-          label,
-          helperText: placeholder,
+          type: "hidden",
+          name: numberName,
           value: value?.number ?? "",
-          placeholder,
-          disabled,
-          error,
-          renderErrorMessage: false,
-          wrapperClassName: "min-w-0 flex-1",
-          fieldClassName: cn(
-            variant === "airbnb" ? "min-h-[60px] rounded-l-none rounded-r-[16px] border-l-0" : "rounded-l-none rounded-r-[10px] border-l-0"
-          ),
-          contentClassName: cn(variant === "airbnb" ? "h-[40px] py-2" : "h-[48px]"),
-          inputClassName: "text-[16px] leading-7",
-          onChange: (event) => onChange({
-            code: value?.code ?? "",
-            number: event.target.value
-          })
+          disabled
         }
-      )
-    ] }),
-    error && /* @__PURE__ */ (0, import_jsx_runtime131.jsx)(FieldErrorMessage, { message: error })
-  ] });
-}
+      ),
+      topLabel && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+        "label",
+        {
+          htmlFor: inputId,
+          className: "mb-3 block text-[16px] font-medium leading-5 text-[#1F1F1B]",
+          children: topLabel
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("div", { className: "flex items-stretch", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+          AirbnbSelect,
+          {
+            ref,
+            variant,
+            options: codeOptions,
+            value: selectedCodeOption,
+            onChange: (option) => onChange({
+              code: String(option.value),
+              number: value?.number ?? ""
+            }),
+            label: `${label} country code`,
+            placeholder: codePlaceholder,
+            disabled,
+            className: "max-w-none shrink-0 basis-[96px]",
+            mobileTitle: mobileTitle ?? "Select country code",
+            dropdownClassName: "right-auto w-[280px]",
+            getValueLabel: (option) => String(option.value),
+            renderTrigger: ({
+              id,
+              open,
+              variant: selectVariant,
+              disabled: triggerDisabled,
+              listboxId,
+              triggerRef,
+              onClick,
+              onKeyDown,
+              valueLabel
+            }) => /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)(
+              "button",
+              {
+                id,
+                ref: triggerRef,
+                type: "button",
+                "aria-label": `${label} country code`,
+                "aria-haspopup": "listbox",
+                "aria-expanded": open,
+                "aria-controls": listboxId,
+                disabled: triggerDisabled,
+                onClick,
+                onKeyDown,
+                className: cn(
+                  "flex w-full items-center justify-center gap-2 border border-r-0 text-[16px] font-medium leading-6 transition-colors focus-visible:outline-none",
+                  selectVariant === "airbnb" ? "h-full min-h-[60px] rounded-l-[16px] rounded-r-none px-4 focus-visible:ring-2 focus-visible:ring-[#1F1F1B] focus-visible:ring-offset-2" : "min-h-[48px] rounded-l-[10px] rounded-r-none px-3.5 focus-visible:border-[#315EFB]",
+                  error ? "border-[var(--status-danger)] bg-[#F2F2F2] text-[var(--status-danger)]" : selectVariant === "airbnb" ? "border-[#8C8C8C] bg-[#F4F4F2] text-[#1F1F1B]" : "border-[#A8A8A4] bg-white text-[#1F1F1B]",
+                  triggerDisabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"
+                ),
+                children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime132.jsx)("span", { children: valueLabel ?? codePlaceholder }),
+                  /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+                    import_lucide_react43.ChevronDown,
+                    {
+                      className: cn("h-5 w-5 transition-transform", open ? "rotate-180" : ""),
+                      strokeWidth: 2
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+          AirbnbInput,
+          {
+            id: inputId,
+            variant,
+            type: "tel",
+            inputMode: "tel",
+            label,
+            helperText: placeholder,
+            value: value?.number ?? "",
+            placeholder,
+            disabled,
+            error,
+            renderErrorMessage: false,
+            wrapperClassName: "min-w-0 flex-1",
+            fieldClassName: cn(
+              variant === "airbnb" ? "min-h-[60px] rounded-l-none rounded-r-[16px] border-l-0" : "rounded-l-none rounded-r-[10px] border-l-0"
+            ),
+            contentClassName: cn(variant === "airbnb" ? "h-[40px] py-2" : "h-[48px]"),
+            inputClassName: "text-[16px] leading-7",
+            onChange: (event) => onChange({
+              code: value?.code ?? "",
+              number: event.target.value
+            })
+          }
+        )
+      ] }),
+      error && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(FieldErrorMessage, { message: error })
+    ] });
+  }
+);
+PhoneField.displayName = "PhoneField";
 
 // src/airbnb/search-input/SearchInput.tsx
 var React38 = __toESM(require("react"), 1);
 var import_react_i18next22 = require("react-i18next");
 var import_lucide_react44 = require("lucide-react");
-var import_jsx_runtime132 = require("react/jsx-runtime");
+var import_jsx_runtime133 = require("react/jsx-runtime");
 var AirbnbSearchInput = React38.forwardRef(({ onReset, placeholder, wrapperClassName, ...props }, ref) => {
   const { t } = (0, import_react_i18next22.useTranslation)();
   const placeholderText = placeholder || t("search_property") + "...";
-  return /* @__PURE__ */ (0, import_jsx_runtime132.jsxs)("div", { className: cn("input-wrapper relative", wrapperClassName), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(import_lucide_react44.Search, { className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 transform text-[#9696B9]" }),
-    /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)("div", { className: cn("input-wrapper relative", wrapperClassName), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_lucide_react44.Search, { className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 transform text-[#9696B9]" }),
+    /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
       "input",
       {
         ...props,
@@ -10640,13 +10767,13 @@ var AirbnbSearchInput = React38.forwardRef(({ onReset, placeholder, wrapperClass
         )
       }
     ),
-    onReset && /* @__PURE__ */ (0, import_jsx_runtime132.jsx)(
+    onReset && /* @__PURE__ */ (0, import_jsx_runtime133.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_runtime132.jsx)(import_lucide_react44.X, { className: "h-5 w-5" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(import_lucide_react44.X, { className: "h-5 w-5" })
       }
     )
   ] });
@@ -10657,7 +10784,7 @@ AirbnbSearchInput.displayName = "SearchInput";
 var React39 = __toESM(require("react"), 1);
 var import_lucide_react45 = require("lucide-react");
 var import_react_virtual = require("@tanstack/react-virtual");
-var import_jsx_runtime133 = require("react/jsx-runtime");
+var import_jsx_runtime134 = require("react/jsx-runtime");
 var ROW_HEIGHT = 48;
 var DESKTOP_LIST_HEIGHT = 280;
 var MOBILE_LIST_HEIGHT = 420;
@@ -10808,7 +10935,7 @@ var SearchableSelectInternal = ({
       }
     }
   }
-  const content = /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+  const content = /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
     SearchableSelectContent,
     {
       inputId: searchInputId,
@@ -10836,9 +10963,9 @@ var SearchableSelectInternal = ({
     }
   );
   React39.useImperativeHandle(ref, () => triggerRef.current, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)("div", { ref: containerRef, className: cn("relative w-full max-w-[480px]", className), children: [
-    name && /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
-    /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)("div", { ref: containerRef, className: cn("relative w-full max-w-[425px]", className), children: [
+    name && /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
+    /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
       FieldTrigger,
       {
         id: `${reactId}-trigger`,
@@ -10868,7 +10995,7 @@ var SearchableSelectInternal = ({
           openSelect();
         },
         onKeyDown: handleTriggerKeyDown,
-        trailingAdornment: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+        trailingAdornment: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
           import_lucide_react45.ChevronDown,
           {
             className: cn(
@@ -10879,7 +11006,7 @@ var SearchableSelectInternal = ({
         )
       }
     ),
-    isMobile ? /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+    isMobile ? /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
       Drawer,
       {
         open,
@@ -10890,13 +11017,13 @@ var SearchableSelectInternal = ({
           }
           closeSelect();
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)(DrawerContent, { onClose: closeSelect, lockScroll: false, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(DrawerTitle, { className: "sr-only", children: mobileTitle ?? label }),
-          /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(DrawerDescription, { className: "sr-only", children: label }),
-          /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("div", { className: "px-5 pb-5 pt-1", children: content })
+        children: /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)(DrawerContent, { onClose: closeSelect, lockScroll: false, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(DrawerTitle, { className: "sr-only", children: mobileTitle ?? label }),
+          /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(DrawerDescription, { className: "sr-only", children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("div", { className: "px-5 pb-5 pt-1", children: content })
         ] })
       }
-    ) : open ? /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+    ) : open ? /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
       "div",
       {
         className: cn(
@@ -10963,16 +11090,16 @@ function SearchableSelectContent({
       virtualizer.scrollToIndex(highlightedIndex, { align: "auto" });
     }
   }, [highlightedIndex, virtualizer]);
-  return /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)("div", { className: "p-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime133.jsxs)("div", { className: "relative mb-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)("div", { className: "p-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime134.jsxs)("div", { className: "relative mb-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
         import_lucide_react45.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_runtime133.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
         "input",
         {
           id: inputId,
@@ -10991,7 +11118,7 @@ function SearchableSelectContent({
         }
       )
     ] }),
-    loading && options.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("div", { className: "px-4 py-5 text-center text-base leading-6 text-[#6C6C6C]", children: loadingText }) : options.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("div", { className: "px-4 py-5 text-center text-base leading-6 text-[#6C6C6C]", children: emptyMessage }) : /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+    loading && options.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("div", { className: "px-4 py-5 text-center text-base leading-6 text-[#6C6C6C]", children: loadingText }) : options.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("div", { className: "px-4 py-5 text-center text-base leading-6 text-[#6C6C6C]", children: emptyMessage }) : /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
       "div",
       {
         id: listboxId,
@@ -11000,7 +11127,7 @@ function SearchableSelectContent({
         "aria-labelledby": labelId,
         className: cn("overflow-y-auto outline-none", menuClassName),
         style: { height: Math.min(height, rowCount * ROW_HEIGHT) },
-        children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
           "div",
           {
             className: "relative w-full",
@@ -11008,7 +11135,7 @@ function SearchableSelectContent({
             children: virtualItems.map((virtualItem) => {
               const option = options[virtualItem.index];
               if (!option) {
-                return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
                   "div",
                   {
                     className: "absolute left-0 top-0 flex w-full items-center px-4 text-base leading-6 text-[#6C6C6C]",
@@ -11023,7 +11150,7 @@ function SearchableSelectContent({
               }
               const isSelected = value?.value === option.value;
               const isHighlighted = virtualItem.index === highlightedIndex;
-              return /* @__PURE__ */ (0, import_jsx_runtime133.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime134.jsx)(
                 "button",
                 {
                   id: getOptionId(idPrefix, virtualItem.index),
@@ -11045,7 +11172,7 @@ function SearchableSelectContent({
                     height: `${virtualItem.size}px`,
                     transform: `translateY(${virtualItem.start}px)`
                   },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime133.jsx)("span", { className: "truncate text-center", children: String(option.label) })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime134.jsx)("span", { className: "truncate text-center", children: String(option.label) })
                 },
                 `${String(option.value)}-${virtualItem.index}`
               );
@@ -11216,6 +11343,7 @@ function getNextEnabledIndex(options, startIndex, step) {
   RatingRadioGroup,
   RatingStars,
   RegistryIcon,
+  ResponsiveSheet,
   RotateIcon,
   ScrollArea,
   ScrollBar,