@chekinapp/ui 0.0.2 → 0.0.3

package/dist/index.js

@@ -4713,6 +4713,10 @@ import { useEffect as useEffect8 } from "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 = {}) {
@@ -8988,9 +8992,117 @@ function DatePicker({
   ] });
 }
 
+// src/responsive-sheet/ResponsiveSheet.tsx
+import { jsx as jsx122, jsxs as jsxs79 } from "react/jsx-runtime";
+function ResponsiveSheet({
+  open,
+  onClose,
+  title,
+  description,
+  children,
+  className,
+  contentClassName,
+  dialogClassName,
+  drawerClassName,
+  titleClassName,
+  descriptionClassName,
+  showCloseButton = true,
+  showDrawerHandle = true,
+  closeOnOverlayClick = true,
+  closeOnEscape = true
+}) {
+  const { isMatch: isMobile } = useScreenResize(DEVICE.laptop);
+  const isMobileMode = isMobile && isMobileModalModeAvailable();
+  const handleOpenChange = (nextOpen) => {
+    if (!nextOpen) {
+      onClose();
+    }
+  };
+  const handleInteractOutside = (event) => {
+    if (!closeOnOverlayClick) {
+      event.preventDefault();
+    }
+  };
+  const handleEscapeKeyDown = (event) => {
+    if (!closeOnEscape) {
+      event.preventDefault();
+    }
+  };
+  const content = /* @__PURE__ */ jsxs79(
+    "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__ */ jsx122(
+          "div",
+          {
+            className: cn(
+              "text-center text-[20px] font-semibold leading-7",
+              titleClassName
+            ),
+            children: title
+          }
+        ) : null,
+        description ? /* @__PURE__ */ jsx122(
+          "p",
+          {
+            className: cn(
+              "mt-3 text-center text-[14px] leading-6 text-[var(--primary)]/70",
+              descriptionClassName
+            ),
+            children: description
+          }
+        ) : null,
+        children
+      ]
+    }
+  );
+  if (isMobileMode) {
+    return /* @__PURE__ */ jsx122(Drawer, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxs79(
+      DrawerContent,
+      {
+        onClose,
+        showHandle: showDrawerHandle,
+        closeOnOverlayClick,
+        lockScroll: false,
+        onEscapeKeyDown: handleEscapeKeyDown,
+        className: cn(className, drawerClassName),
+        children: [
+          title ? /* @__PURE__ */ jsx122(DrawerTitle, { className: "sr-only", children: title }) : null,
+          description ? /* @__PURE__ */ jsx122(DrawerDescription, { className: "sr-only", children: description }) : null,
+          content
+        ]
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsx122(Dialog, { open, onOpenChange: handleOpenChange, children: /* @__PURE__ */ jsxs79(
+    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__ */ jsx122(DialogTitle, { className: "sr-only", children: title }) : null,
+        description ? /* @__PURE__ */ jsx122(DialogDescription, { className: "sr-only", children: description }) : null,
+        content
+      ]
+    }
+  ) });
+}
+
 // src/airbnb/input/Input.tsx
 import * as React31 from "react";
-import { jsx as jsx122 } from "react/jsx-runtime";
+import { jsx as jsx123 } from "react/jsx-runtime";
 var getInputValue = (value) => value != null ? String(value) : "";
 var AirbnbInput = React31.forwardRef(
   ({
@@ -9065,7 +9177,7 @@ var AirbnbInput = React31.forwardRef(
       setIsFocused(false);
       onBlur?.(event);
     };
-    return /* @__PURE__ */ jsx122("div", { className: cn("w-full", wrapperClassName), children: /* @__PURE__ */ jsx122(
+    return /* @__PURE__ */ jsx123("div", { className: cn("w-full", wrapperClassName), children: /* @__PURE__ */ jsx123(
       FieldTrigger,
       {
         as: "div",
@@ -9093,7 +9205,7 @@ var AirbnbInput = React31.forwardRef(
         trailingAdornment,
         forceFloatingLabel: shouldShowLabel,
         hideErrorMessage: !renderErrorMessage,
-        children: /* @__PURE__ */ jsx122(
+        children: /* @__PURE__ */ jsx123(
           "input",
           {
             ...props,
@@ -9134,7 +9246,7 @@ import { ChevronDown as ChevronDown2 } from "lucide-react";
 import * as React36 from "react";
 
 // src/airbnb/select/SelectDesktopMenu.tsx
-import { jsx as jsx123, jsxs as jsxs79 } from "react/jsx-runtime";
+import { jsx as jsx124, jsxs as jsxs80 } from "react/jsx-runtime";
 function SelectDesktopMenu({
   id,
   options,
@@ -9153,7 +9265,7 @@ function SelectDesktopMenu({
   noOptionsMessage
 }) {
   const emptyMessage = noOptionsMessage?.();
-  return /* @__PURE__ */ jsxs79(
+  return /* @__PURE__ */ jsxs80(
     "div",
     {
       id,
@@ -9166,12 +9278,12 @@ function SelectDesktopMenu({
       onKeyDown,
       className: cn("max-h-[280px] overflow-y-auto p-2 outline-none", menuClassName),
       children: [
-        options.length === 0 && emptyMessage ? /* @__PURE__ */ jsx123("div", { className: "px-4 py-3 text-base leading-6 text-[#6C6C6C]", children: emptyMessage }) : null,
+        options.length === 0 && emptyMessage ? /* @__PURE__ */ jsx124("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__ */ jsx123(
+          return /* @__PURE__ */ jsx124(
             "button",
             {
               id: getOptionId2(index),
@@ -9203,7 +9315,7 @@ function SelectDesktopMenu({
 }
 
 // src/airbnb/select/SelectDesktopContent.tsx
-import { jsx as jsx124 } from "react/jsx-runtime";
+import { jsx as jsx125 } from "react/jsx-runtime";
 function SelectDesktopContent({
   isOpen,
   listboxId,
@@ -9224,14 +9336,14 @@ function SelectDesktopContent({
   noOptionsMessage
 }) {
   if (!isOpen) return null;
-  return /* @__PURE__ */ jsx124(
+  return /* @__PURE__ */ jsx125(
     "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__ */ jsx124(
+      children: /* @__PURE__ */ jsx125(
         SelectDesktopMenu,
         {
           id: listboxId,
@@ -9329,7 +9441,7 @@ function getMobileOptionStyles(index, scrollTop) {
 }
 
 // src/airbnb/select/SelectMobileWheel.tsx
-import { jsx as jsx125, jsxs as jsxs80 } from "react/jsx-runtime";
+import { jsx as jsx126, jsxs as jsxs81 } from "react/jsx-runtime";
 function SelectMobileWheel({
   id,
   options,
@@ -9348,7 +9460,7 @@ function SelectMobileWheel({
 }) {
   const spacerHeight2 = getWheelSpacerHeight();
   const emptyMessage = noOptionsMessage?.();
-  return /* @__PURE__ */ jsxs80(
+  return /* @__PURE__ */ jsxs81(
     "div",
     {
       id,
@@ -9360,10 +9472,10 @@ function SelectMobileWheel({
       onKeyDown,
       className: cn("relative overflow-hidden outline-none", menuClassName),
       children: [
-        options.length === 0 && emptyMessage ? /* @__PURE__ */ jsx125("div", { className: "flex min-h-[160px] items-center justify-center px-4 text-center text-base leading-6 text-[#6C6C6C]", children: emptyMessage }) : null,
-        /* @__PURE__ */ jsx125("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__ */ jsx125("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__ */ jsx125(
+        options.length === 0 && emptyMessage ? /* @__PURE__ */ jsx126("div", { className: "flex min-h-[160px] items-center justify-center px-4 text-center text-base leading-6 text-[#6C6C6C]", children: emptyMessage }) : null,
+        /* @__PURE__ */ jsx126("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__ */ jsx126("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__ */ jsx126(
           "div",
           {
             "aria-hidden": true,
@@ -9373,7 +9485,7 @@ function SelectMobileWheel({
             )
           }
         ),
-        /* @__PURE__ */ jsxs80(
+        /* @__PURE__ */ jsxs81(
           "div",
           {
             ref: listRef,
@@ -9388,11 +9500,11 @@ function SelectMobileWheel({
               WebkitOverflowScrolling: "touch"
             },
             children: [
-              /* @__PURE__ */ jsx125("div", { style: { height: `${spacerHeight2}px` } }),
+              /* @__PURE__ */ jsx126("div", { style: { height: `${spacerHeight2}px` } }),
               options.map((option, index) => {
                 const { distance, style } = getMobileOptionStyles(index, scrollTop);
                 const optionKey = `${String(option.value)}-${index}`;
-                return /* @__PURE__ */ jsx125(
+                return /* @__PURE__ */ jsx126(
                   "button",
                   {
                     id: getOptionId2(index),
@@ -9413,7 +9525,7 @@ function SelectMobileWheel({
                   optionKey
                 );
               }),
-              /* @__PURE__ */ jsx125("div", { style: { height: `${spacerHeight2}px` } })
+              /* @__PURE__ */ jsx126("div", { style: { height: `${spacerHeight2}px` } })
             ]
           }
         )
@@ -9423,7 +9535,7 @@ function SelectMobileWheel({
 }
 
 // src/airbnb/select/SelectMobileContent.tsx
-import { jsx as jsx126, jsxs as jsxs81 } from "react/jsx-runtime";
+import { jsx as jsx127, jsxs as jsxs82 } from "react/jsx-runtime";
 function SelectMobileContent({
   open,
   onOpenChange,
@@ -9447,11 +9559,11 @@ function SelectMobileContent({
   getOptionId: getOptionId2,
   noOptionsMessage
 }) {
-  return /* @__PURE__ */ jsx126(Drawer, { open, onOpenChange, children: /* @__PURE__ */ jsxs81(DrawerContent, { onClose, lockScroll: false, children: [
-    /* @__PURE__ */ jsx126(DrawerTitle, { className: "sr-only", children: mobileTitle ?? label }),
-    /* @__PURE__ */ jsx126(DrawerDescription, { className: "sr-only", children: label }),
-    /* @__PURE__ */ jsxs81("div", { className: "px-6 pb-4 pt-1", children: [
-      /* @__PURE__ */ jsx126(
+  return /* @__PURE__ */ jsx127(Drawer, { open, onOpenChange, children: /* @__PURE__ */ jsxs82(DrawerContent, { onClose, lockScroll: false, children: [
+    /* @__PURE__ */ jsx127(DrawerTitle, { className: "sr-only", children: mobileTitle ?? label }),
+    /* @__PURE__ */ jsx127(DrawerDescription, { className: "sr-only", children: label }),
+    /* @__PURE__ */ jsxs82("div", { className: "px-6 pb-4 pt-1", children: [
+      /* @__PURE__ */ jsx127(
         SelectMobileWheel,
         {
           id: listboxId,
@@ -9470,7 +9582,7 @@ function SelectMobileContent({
           noOptionsMessage
         }
       ),
-      /* @__PURE__ */ jsx126(Button, { type: "button", onClick: onDone, className: "mt-4 h-12 mb-8 w-full", children: doneLabel })
+      /* @__PURE__ */ jsx127(Button, { type: "button", onClick: onDone, className: "mt-4 h-12 mb-8 w-full", children: doneLabel })
     ] })
   ] }) });
 }
@@ -9478,7 +9590,7 @@ function SelectMobileContent({
 // src/airbnb/select/SelectTrigger.tsx
 import * as React32 from "react";
 import { ChevronDown } from "lucide-react";
-import { jsx as jsx127 } from "react/jsx-runtime";
+import { jsx as jsx128 } from "react/jsx-runtime";
 var SelectTrigger2 = React32.forwardRef(
   ({
     id,
@@ -9500,7 +9612,7 @@ var SelectTrigger2 = React32.forwardRef(
     onClick,
     onKeyDown
   }, ref) => {
-    return /* @__PURE__ */ jsx127(
+    return /* @__PURE__ */ jsx128(
       FieldTrigger,
       {
         id,
@@ -9524,7 +9636,7 @@ var SelectTrigger2 = React32.forwardRef(
         disabled,
         onClick,
         onKeyDown,
-        trailingAdornment: /* @__PURE__ */ jsx127(
+        trailingAdornment: /* @__PURE__ */ jsx128(
           ChevronDown,
           {
             className: open ? "h-6 w-6 rotate-180 text-[#1F1F1B] transition-transform" : "h-6 w-6 text-[#1F1F1B] transition-transform"
@@ -9938,7 +10050,7 @@ function useOutsideClick(elementRef, onOutsideClick, nested) {
 }
 
 // src/airbnb/select/Select.tsx
-import { jsx as jsx128, jsxs as jsxs82 } from "react/jsx-runtime";
+import { jsx as jsx129, jsxs as jsxs83 } from "react/jsx-runtime";
 function AirbnbSelect({
   options,
   value,
@@ -10096,8 +10208,8 @@ function AirbnbSelect({
       handleMobileOpenChange(false);
     }
   };
-  return /* @__PURE__ */ jsxs82("div", { ref: containerRef, className: cn("relative w-full max-w-[480px]", className), children: [
-    name && /* @__PURE__ */ jsx128("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
+  return /* @__PURE__ */ jsxs83("div", { ref: containerRef, className: cn("relative w-full max-w-[480px]", className), children: [
+    name && /* @__PURE__ */ jsx129("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
     renderTrigger ? renderTrigger({
       id: triggerId,
       open: isOpen,
@@ -10114,7 +10226,7 @@ function AirbnbSelect({
       triggerRef,
       onClick: handleTriggerClick,
       onKeyDown: handleRootTriggerKeyDown
-    }) : /* @__PURE__ */ jsx128(
+    }) : /* @__PURE__ */ jsx129(
       SelectTrigger2,
       {
         id: triggerId,
@@ -10138,7 +10250,7 @@ function AirbnbSelect({
         onKeyDown: handleRootTriggerKeyDown
       }
     ),
-    isMobile ? /* @__PURE__ */ jsx128(
+    isMobile ? /* @__PURE__ */ jsx129(
       SelectMobileContent,
       {
         open: isOpen,
@@ -10163,7 +10275,7 @@ function AirbnbSelect({
         getOptionId: getOptionId2,
         noOptionsMessage
       }
-    ) : /* @__PURE__ */ jsx128(
+    ) : /* @__PURE__ */ jsx129(
       SelectDesktopContent,
       {
         isOpen,
@@ -10195,7 +10307,7 @@ function AirbnbSelect({
 }
 
 // src/airbnb/phone-field/PhoneField.tsx
-import { jsx as jsx129, jsxs as jsxs83 } from "react/jsx-runtime";
+import { jsx as jsx130, jsxs as jsxs84 } from "react/jsx-runtime";
 function PhoneField({
   variant = "default",
   label,
@@ -10227,9 +10339,9 @@ function PhoneField({
     [codeOptions, value?.code]
   );
   const combinedValue = value?.code || value?.number ? `${value?.code ?? ""}${value?.number ?? ""}` : "";
-  return /* @__PURE__ */ jsxs83("div", { className: cn("w-full max-w-[480px]", className), children: [
-    name && /* @__PURE__ */ jsx129("input", { type: "hidden", name, value: combinedValue, disabled }),
-    codeName && /* @__PURE__ */ jsx129(
+  return /* @__PURE__ */ jsxs84("div", { className: cn("w-full max-w-[480px]", className), children: [
+    name && /* @__PURE__ */ jsx130("input", { type: "hidden", name, value: combinedValue, disabled }),
+    codeName && /* @__PURE__ */ jsx130(
       "input",
       {
         type: "hidden",
@@ -10238,7 +10350,7 @@ function PhoneField({
         disabled
       }
     ),
-    numberName && /* @__PURE__ */ jsx129(
+    numberName && /* @__PURE__ */ jsx130(
       "input",
       {
         type: "hidden",
@@ -10247,7 +10359,7 @@ function PhoneField({
         disabled
       }
     ),
-    topLabel && /* @__PURE__ */ jsx129(
+    topLabel && /* @__PURE__ */ jsx130(
       "label",
       {
         htmlFor: inputId,
@@ -10255,8 +10367,8 @@ function PhoneField({
         children: topLabel
       }
     ),
-    /* @__PURE__ */ jsxs83("div", { className: "flex items-stretch", children: [
-      /* @__PURE__ */ jsx129(
+    /* @__PURE__ */ jsxs84("div", { className: "flex items-stretch", children: [
+      /* @__PURE__ */ jsx130(
         AirbnbSelect,
         {
           variant,
@@ -10283,7 +10395,7 @@ function PhoneField({
             onClick,
             onKeyDown,
             valueLabel
-          }) => /* @__PURE__ */ jsxs83(
+          }) => /* @__PURE__ */ jsxs84(
             "button",
             {
               id,
@@ -10303,8 +10415,8 @@ function PhoneField({
                 triggerDisabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"
               ),
               children: [
-                /* @__PURE__ */ jsx129("span", { children: valueLabel ?? codePlaceholder }),
-                /* @__PURE__ */ jsx129(
+                /* @__PURE__ */ jsx130("span", { children: valueLabel ?? codePlaceholder }),
+                /* @__PURE__ */ jsx130(
                   ChevronDown2,
                   {
                     className: cn("h-5 w-5 transition-transform", open ? "rotate-180" : ""),
@@ -10316,7 +10428,7 @@ function PhoneField({
           )
         }
       ),
-      /* @__PURE__ */ jsx129(
+      /* @__PURE__ */ jsx130(
         AirbnbInput,
         {
           id: inputId,
@@ -10343,7 +10455,7 @@ function PhoneField({
         }
       )
     ] }),
-    error && /* @__PURE__ */ jsx129(FieldErrorMessage, { message: error })
+    error && /* @__PURE__ */ jsx130(FieldErrorMessage, { message: error })
   ] });
 }
 
@@ -10351,13 +10463,13 @@ function PhoneField({
 import * as React38 from "react";
 import { useTranslation as useTranslation22 } from "react-i18next";
 import { Search as Search3, X as X8 } from "lucide-react";
-import { jsx as jsx130, jsxs as jsxs84 } from "react/jsx-runtime";
+import { jsx as jsx131, jsxs as jsxs85 } from "react/jsx-runtime";
 var AirbnbSearchInput = React38.forwardRef(({ onReset, placeholder, wrapperClassName, ...props }, ref) => {
   const { t } = useTranslation22();
   const placeholderText = placeholder || t("search_property") + "...";
-  return /* @__PURE__ */ jsxs84("div", { className: cn("input-wrapper relative", wrapperClassName), children: [
-    /* @__PURE__ */ jsx130(Search3, { className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 transform text-[#9696B9]" }),
-    /* @__PURE__ */ jsx130(
+  return /* @__PURE__ */ jsxs85("div", { className: cn("input-wrapper relative", wrapperClassName), children: [
+    /* @__PURE__ */ jsx131(Search3, { className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 transform text-[#9696B9]" }),
+    /* @__PURE__ */ jsx131(
       "input",
       {
         ...props,
@@ -10376,13 +10488,13 @@ var AirbnbSearchInput = React38.forwardRef(({ onReset, placeholder, wrapperClass
         )
       }
     ),
-    onReset && /* @__PURE__ */ jsx130(
+    onReset && /* @__PURE__ */ jsx131(
       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__ */ jsx130(X8, { className: "h-5 w-5" })
+        children: /* @__PURE__ */ jsx131(X8, { className: "h-5 w-5" })
       }
     )
   ] });
@@ -10393,7 +10505,7 @@ AirbnbSearchInput.displayName = "SearchInput";
 import * as React39 from "react";
 import { ChevronDown as ChevronDown3, Search as Search4 } from "lucide-react";
 import { useVirtualizer } from "@tanstack/react-virtual";
-import { jsx as jsx131, jsxs as jsxs85 } from "react/jsx-runtime";
+import { jsx as jsx132, jsxs as jsxs86 } from "react/jsx-runtime";
 var ROW_HEIGHT = 48;
 var DESKTOP_LIST_HEIGHT = 280;
 var MOBILE_LIST_HEIGHT = 420;
@@ -10544,7 +10656,7 @@ var SearchableSelectInternal = ({
       }
     }
   }
-  const content = /* @__PURE__ */ jsx131(
+  const content = /* @__PURE__ */ jsx132(
     SearchableSelectContent,
     {
       inputId: searchInputId,
@@ -10572,9 +10684,9 @@ var SearchableSelectInternal = ({
     }
   );
   React39.useImperativeHandle(ref, () => triggerRef.current, []);
-  return /* @__PURE__ */ jsxs85("div", { ref: containerRef, className: cn("relative w-full max-w-[480px]", className), children: [
-    name && /* @__PURE__ */ jsx131("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
-    /* @__PURE__ */ jsx131(
+  return /* @__PURE__ */ jsxs86("div", { ref: containerRef, className: cn("relative w-full max-w-[480px]", className), children: [
+    name && /* @__PURE__ */ jsx132("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
+    /* @__PURE__ */ jsx132(
       FieldTrigger,
       {
         id: `${reactId}-trigger`,
@@ -10604,7 +10716,7 @@ var SearchableSelectInternal = ({
           openSelect();
         },
         onKeyDown: handleTriggerKeyDown,
-        trailingAdornment: /* @__PURE__ */ jsx131(
+        trailingAdornment: /* @__PURE__ */ jsx132(
           ChevronDown3,
           {
             className: cn(
@@ -10615,7 +10727,7 @@ var SearchableSelectInternal = ({
         )
       }
     ),
-    isMobile ? /* @__PURE__ */ jsx131(
+    isMobile ? /* @__PURE__ */ jsx132(
       Drawer,
       {
         open,
@@ -10626,13 +10738,13 @@ var SearchableSelectInternal = ({
           }
           closeSelect();
         },
-        children: /* @__PURE__ */ jsxs85(DrawerContent, { onClose: closeSelect, lockScroll: false, children: [
-          /* @__PURE__ */ jsx131(DrawerTitle, { className: "sr-only", children: mobileTitle ?? label }),
-          /* @__PURE__ */ jsx131(DrawerDescription, { className: "sr-only", children: label }),
-          /* @__PURE__ */ jsx131("div", { className: "px-5 pb-5 pt-1", children: content })
+        children: /* @__PURE__ */ jsxs86(DrawerContent, { onClose: closeSelect, lockScroll: false, children: [
+          /* @__PURE__ */ jsx132(DrawerTitle, { className: "sr-only", children: mobileTitle ?? label }),
+          /* @__PURE__ */ jsx132(DrawerDescription, { className: "sr-only", children: label }),
+          /* @__PURE__ */ jsx132("div", { className: "px-5 pb-5 pt-1", children: content })
         ] })
       }
-    ) : open ? /* @__PURE__ */ jsx131(
+    ) : open ? /* @__PURE__ */ jsx132(
       "div",
       {
         className: cn(
@@ -10699,16 +10811,16 @@ function SearchableSelectContent({
       virtualizer.scrollToIndex(highlightedIndex, { align: "auto" });
     }
   }, [highlightedIndex, virtualizer]);
-  return /* @__PURE__ */ jsxs85("div", { className: "p-2", children: [
-    /* @__PURE__ */ jsxs85("div", { className: "relative mb-2", children: [
-      /* @__PURE__ */ jsx131(
+  return /* @__PURE__ */ jsxs86("div", { className: "p-2", children: [
+    /* @__PURE__ */ jsxs86("div", { className: "relative mb-2", children: [
+      /* @__PURE__ */ jsx132(
         Search4,
         {
           "aria-hidden": "true",
           className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 text-[#9696B9]"
         }
       ),
-      /* @__PURE__ */ jsx131(
+      /* @__PURE__ */ jsx132(
         "input",
         {
           id: inputId,
@@ -10727,7 +10839,7 @@ function SearchableSelectContent({
         }
       )
     ] }),
-    loading && options.length === 0 ? /* @__PURE__ */ jsx131("div", { className: "px-4 py-5 text-center text-base leading-6 text-[#6C6C6C]", children: loadingText }) : options.length === 0 ? /* @__PURE__ */ jsx131("div", { className: "px-4 py-5 text-center text-base leading-6 text-[#6C6C6C]", children: emptyMessage }) : /* @__PURE__ */ jsx131(
+    loading && options.length === 0 ? /* @__PURE__ */ jsx132("div", { className: "px-4 py-5 text-center text-base leading-6 text-[#6C6C6C]", children: loadingText }) : options.length === 0 ? /* @__PURE__ */ jsx132("div", { className: "px-4 py-5 text-center text-base leading-6 text-[#6C6C6C]", children: emptyMessage }) : /* @__PURE__ */ jsx132(
       "div",
       {
         id: listboxId,
@@ -10736,7 +10848,7 @@ function SearchableSelectContent({
         "aria-labelledby": labelId,
         className: cn("overflow-y-auto outline-none", menuClassName),
         style: { height: Math.min(height, rowCount * ROW_HEIGHT) },
-        children: /* @__PURE__ */ jsx131(
+        children: /* @__PURE__ */ jsx132(
           "div",
           {
             className: "relative w-full",
@@ -10744,7 +10856,7 @@ function SearchableSelectContent({
             children: virtualItems.map((virtualItem) => {
               const option = options[virtualItem.index];
               if (!option) {
-                return /* @__PURE__ */ jsx131(
+                return /* @__PURE__ */ jsx132(
                   "div",
                   {
                     className: "absolute left-0 top-0 flex w-full items-center px-4 text-base leading-6 text-[#6C6C6C]",
@@ -10759,7 +10871,7 @@ function SearchableSelectContent({
               }
               const isSelected = value?.value === option.value;
               const isHighlighted = virtualItem.index === highlightedIndex;
-              return /* @__PURE__ */ jsx131(
+              return /* @__PURE__ */ jsx132(
                 "button",
                 {
                   id: getOptionId(idPrefix, virtualItem.index),
@@ -10781,7 +10893,7 @@ function SearchableSelectContent({
                     height: `${virtualItem.size}px`,
                     transform: `translateY(${virtualItem.start}px)`
                   },
-                  children: /* @__PURE__ */ jsx131("span", { className: "truncate text-center", children: String(option.label) })
+                  children: /* @__PURE__ */ jsx132("span", { className: "truncate text-center", children: String(option.label) })
                 },
                 `${String(option.value)}-${virtualItem.index}`
               );
@@ -10951,6 +11063,7 @@ export {
   RatingRadioGroup,
   RatingStars,
   RegistryIcon,
+  ResponsiveSheet,
   RotateIcon,
   ScrollArea,
   ScrollBar,