@chekinapp/ui 0.0.70 → 0.0.72

package/dist/index.js

@@ -9405,19 +9405,6 @@ var getValueArray = (value) => {
   }
   return [];
 };
-var convertStringToValue = (stringValue, option) => {
-  console.log(stringValue, option);
-  if (option) {
-    return option.value;
-  }
-  if (stringValue === "true") return true;
-  if (stringValue === "false") return false;
-  const numValue = Number(stringValue);
-  if (!isNaN(numValue) && stringValue !== "") {
-    return numValue;
-  }
-  return stringValue;
-};
 function getToggleContent(label, disabled, readOnly, active) {
   if (isValidElement2(label)) {
     return cloneElement2(label, {
@@ -9454,7 +9441,7 @@ function TogglesInternal({
       const newValueArray = Array.isArray(newValue) ? newValue : [newValue];
       const typedValues = newValueArray.map((item) => {
         const option2 = options.find((opt) => String(opt.value) === item);
-        return convertStringToValue(item, option2);
+        return option2 ? option2.value : item;
       });
       onChange?.(
         typedValues,
@@ -9464,10 +9451,7 @@ function TogglesInternal({
     }
     const singleValue = Array.isArray(newValue) ? newValue[0] : newValue;
     const option = options.find((opt) => String(opt.value) === singleValue);
-    const typedValue = convertStringToValue(singleValue, option);
-    {
-      console.log("typedValues", typedValue);
-    }
+    const typedValue = option ? option.value : singleValue;
     onChange?.(
       typedValue,
       {}
@@ -13801,6 +13785,52 @@ function SelectMenu({
   );
 }
 
+// src/dashboard/_select-internals/SelectMenuPanel.tsx
+import { jsx as jsx155, jsxs as jsxs99 } from "react/jsx-runtime";
+function SelectMenuPanel({
+  isOpen,
+  isMobile: isMobile2,
+  onClose,
+  title,
+  className,
+  drawerClassName,
+  children
+}) {
+  if (!isOpen) return null;
+  if (isMobile2) {
+    return /* @__PURE__ */ jsx155(
+      Drawer,
+      {
+        open: isOpen,
+        onOpenChange: (next) => {
+          if (!next) onClose();
+        },
+        children: /* @__PURE__ */ jsxs99(
+          DrawerContent,
+          {
+            onClose,
+            className: cn("max-h-[calc(100vh-1rem)]", drawerClassName),
+            children: [
+              title ? /* @__PURE__ */ jsx155(DrawerTitle, { className: "px-5 pb-3 pt-1 text-left text-[16px] font-semibold leading-6 text-[var(--chekin-color-brand-navy)]", children: title }) : /* @__PURE__ */ jsx155(DrawerTitle, { className: "sr-only", children: "Select option" }),
+              /* @__PURE__ */ jsx155("div", { className: "flex min-h-0 flex-1 flex-col", children })
+            ]
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx155(
+    "div",
+    {
+      className: cn(
+        "absolute left-0 right-0 top-full z-20 overflow-hidden rounded-b-lg bg-white shadow-[0_30px_30px_0_rgba(33,72,255,0.2)]",
+        className
+      ),
+      children
+    }
+  );
+}
+
 // src/dashboard/_select-internals/useSelectIds.ts
 import * as React54 from "react";
 function useSelectIds2({
@@ -13837,7 +13867,7 @@ function useSelectIds2({
 }
 
 // src/dashboard/select/Select.tsx
-import { jsx as jsx155, jsxs as jsxs99 } from "react/jsx-runtime";
+import { jsx as jsx156, jsxs as jsxs100 } from "react/jsx-runtime";
 function DashboardSelectInternal({
   options = [],
   value,
@@ -13857,6 +13887,7 @@ function DashboardSelectInternal({
   className,
   menuClassName,
   dropdownClassName,
+  drawerClassName,
   name,
   width,
   noOptionsMessage,
@@ -13873,6 +13904,7 @@ function DashboardSelectInternal({
   const [isOpen, setIsOpen] = React55.useState(false);
   const [searchValue, setSearchValue] = React55.useState("");
   const [highlightedIndex, setHighlightedIndex] = React55.useState(-1);
+  const isMobile2 = useIsMobile();
   const hasValue = Boolean(value);
   const isEmpty = !hasValue;
   const isBlocked = Boolean(disabled) || Boolean(loading);
@@ -13890,7 +13922,7 @@ function DashboardSelectInternal({
   useOutsideClick({
     elementRef: containerRef,
     onOutsideClick: () => setIsOpen(false),
-    isDisabled: !isOpen
+    isDisabled: !isOpen || isMobile2
   });
   React55.useEffect(() => {
     if (isBlocked) setIsOpen(false);
@@ -13969,7 +14001,7 @@ function DashboardSelectInternal({
       setIsOpen(false);
     }
   };
-  return /* @__PURE__ */ jsxs99(
+  return /* @__PURE__ */ jsxs100(
     "div",
     {
       ref: containerRef,
@@ -13981,9 +14013,9 @@ function DashboardSelectInternal({
       ),
       style: wrapperWidth ? { width: wrapperWidth } : void 0,
       children: [
-        name && /* @__PURE__ */ jsx155("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
-        /* @__PURE__ */ jsxs99("div", { className: "relative w-full min-h-[68px]", children: [
-          topLabel && /* @__PURE__ */ jsx155(
+        name && /* @__PURE__ */ jsx156("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
+        /* @__PURE__ */ jsxs100("div", { className: "relative w-full min-h-[68px]", children: [
+          topLabel && /* @__PURE__ */ jsx156(
             "label",
             {
               htmlFor: triggerId,
@@ -13991,8 +14023,8 @@ function DashboardSelectInternal({
               children: topLabel
             }
           ),
-          /* @__PURE__ */ jsxs99("div", { className: "relative w-full", children: [
-            /* @__PURE__ */ jsxs99(
+          /* @__PURE__ */ jsxs100("div", { className: "relative w-full", children: [
+            /* @__PURE__ */ jsxs100(
               "button",
               {
                 id: triggerId,
@@ -14016,10 +14048,10 @@ function DashboardSelectInternal({
                   loading && "cursor-progress"
                 ),
                 children: [
-                  /* @__PURE__ */ jsx155("span", { id: valueId, className: "block min-w-0 flex-1 truncate text-left", children: valueLabel ?? placeholder ?? label }),
-                  /* @__PURE__ */ jsxs99("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: [
-                    loading && /* @__PURE__ */ jsx155(ThreeDotsLoader, { height: 18, width: 18 }),
-                    /* @__PURE__ */ jsx155(
+                  /* @__PURE__ */ jsx156("span", { id: valueId, className: "block min-w-0 flex-1 truncate text-left", children: valueLabel ?? placeholder ?? label }),
+                  /* @__PURE__ */ jsxs100("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: [
+                    loading && /* @__PURE__ */ jsx156(ThreeDotsLoader, { height: 18, width: 18 }),
+                    /* @__PURE__ */ jsx156(
                       ChevronDown4,
                       {
                         size: 16,
@@ -14033,7 +14065,7 @@ function DashboardSelectInternal({
                 ]
               }
             ),
-            /* @__PURE__ */ jsx155(
+            /* @__PURE__ */ jsx156(
               Fieldset,
               {
                 isFocused: isOpen,
@@ -14050,15 +14082,17 @@ function DashboardSelectInternal({
                 onClick: !isBlocked ? toggleMenu : void 0
               }
             ),
-            isOpen && /* @__PURE__ */ jsxs99(
-              "div",
+            /* @__PURE__ */ jsxs100(
+              SelectMenuPanel,
               {
-                className: cn(
-                  "absolute left-0 right-0 top-full z-20 overflow-hidden rounded-b-lg bg-white shadow-[0_30px_30px_0_rgba(33,72,255,0.2)]",
-                  dropdownClassName
-                ),
+                isOpen,
+                isMobile: isMobile2,
+                onClose: () => setIsOpen(false),
+                title: typeof label === "string" ? label : void 0,
+                className: dropdownClassName,
+                drawerClassName,
                 children: [
-                  searchable && /* @__PURE__ */ jsx155("div", { className: "border-b border-[#f2f4f8] px-4 pb-2 pt-3", children: /* @__PURE__ */ jsx155(
+                  searchable && /* @__PURE__ */ jsx156("div", { className: "border-b border-[#f2f4f8] px-4 pb-2 pt-3", children: /* @__PURE__ */ jsx156(
                     "input",
                     {
                       ref: searchInputRef,
@@ -14073,7 +14107,7 @@ function DashboardSelectInternal({
                       className: "m-0 box-border h-9 w-full rounded-md border border-[var(--chekin-color-gray-3)] bg-white px-3 text-[16px] font-medium text-[var(--chekin-color-brand-navy)] outline-none transition-colors placeholder:text-[var(--chekin-color-gray-1)] focus:border-[var(--chekin-color-brand-blue)]"
                     }
                   ) }),
-                  /* @__PURE__ */ jsx155(
+                  /* @__PURE__ */ jsx156(
                     SelectMenu,
                     {
                       id: listboxId,
@@ -14098,9 +14132,9 @@ function DashboardSelectInternal({
               }
             )
           ] }),
-          !errorMessage && optional && /* @__PURE__ */ jsx155("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : "optional" }),
-          !errorMessage && helperText && /* @__PURE__ */ jsx155("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
-          errorMessage && !hideErrorMessage && /* @__PURE__ */ jsx155(
+          !errorMessage && optional && /* @__PURE__ */ jsx156("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : "optional" }),
+          !errorMessage && helperText && /* @__PURE__ */ jsx156("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
+          errorMessage && !hideErrorMessage && /* @__PURE__ */ jsx156(
             FieldErrorMessage,
             {
               id: errorId,
@@ -14120,7 +14154,7 @@ var DashboardSelect = React55.forwardRef(
 // src/dashboard/multi-select/MultiSelect.tsx
 import * as React56 from "react";
 import { SquareX as SquareX2 } from "lucide-react";
-import { jsx as jsx156, jsxs as jsxs100 } from "react/jsx-runtime";
+import { jsx as jsx157, jsxs as jsxs101 } from "react/jsx-runtime";
 var isValueSelected = (selected, option) => selected.some((item) => item.value === option.value);
 function DashboardMultiSelectInternal({
   options = [],
@@ -14141,6 +14175,7 @@ function DashboardMultiSelectInternal({
   className,
   menuClassName,
   dropdownClassName,
+  drawerClassName,
   name,
   width,
   noOptionsMessage,
@@ -14155,12 +14190,14 @@ function DashboardMultiSelectInternal({
 }, ref) {
   const containerRef = React56.useRef(null);
   const inputRef = React56.useRef(null);
+  const mobileSearchInputRef = React56.useRef(null);
   const listRef = React56.useRef(null);
   const optionRefs = React56.useRef([]);
   const [isOpen, setIsOpen] = React56.useState(false);
   const [searchValue, setSearchValue] = React56.useState("");
   const [isFocused, setIsFocused] = React56.useState(false);
   const [highlightedIndex, setHighlightedIndex] = React56.useState(-1);
+  const isMobile2 = useIsMobile();
   const selectedValues = React56.useMemo(() => value ?? [], [value]);
   const hasValue = selectedValues.length > 0;
   const isEmpty = !hasValue;
@@ -14197,7 +14234,7 @@ function DashboardMultiSelectInternal({
       setIsOpen(false);
       setIsFocused(false);
     },
-    isDisabled: !isOpen
+    isDisabled: !isOpen || isMobile2
   });
   React56.useEffect(() => {
     if (isBlocked) setIsOpen(false);
@@ -14218,6 +14255,11 @@ function DashboardMultiSelectInternal({
       return getFirstEnabledOptionIndex2(filteredOptions);
     });
   }, [isOpen, filteredOptions]);
+  React56.useEffect(() => {
+    if (!isOpen || !isMobile2) return;
+    const frame = window.requestAnimationFrame(() => mobileSearchInputRef.current?.focus());
+    return () => window.cancelAnimationFrame(frame);
+  }, [isOpen, isMobile2]);
   const openMenu = () => {
     if (isBlocked) return;
     setIsOpen(true);
@@ -14312,7 +14354,7 @@ function DashboardMultiSelectInternal({
     setIsFocused(false);
     onBlur?.(event);
   };
-  return /* @__PURE__ */ jsxs100(
+  return /* @__PURE__ */ jsxs101(
     "div",
     {
       ref: containerRef,
@@ -14325,7 +14367,7 @@ function DashboardMultiSelectInternal({
       ),
       style: wrapperWidth ? { width: wrapperWidth } : void 0,
       children: [
-        topLabel && /* @__PURE__ */ jsx156(
+        topLabel && /* @__PURE__ */ jsx157(
           "label",
           {
             htmlFor: triggerId,
@@ -14333,7 +14375,7 @@ function DashboardMultiSelectInternal({
             children: topLabel
           }
         ),
-        name && /* @__PURE__ */ jsx156(
+        name && /* @__PURE__ */ jsx157(
           "input",
           {
             type: "hidden",
@@ -14341,8 +14383,8 @@ function DashboardMultiSelectInternal({
             value: selectedValues.map((item) => String(item.value)).join(",")
           }
         ),
-        /* @__PURE__ */ jsxs100("div", { className: "relative w-full", children: [
-          /* @__PURE__ */ jsxs100(
+        /* @__PURE__ */ jsxs101("div", { className: "relative w-full", children: [
+          /* @__PURE__ */ jsxs101(
             "div",
             {
               id: triggerId,
@@ -14365,13 +14407,13 @@ function DashboardMultiSelectInternal({
               ),
               children: [
                 selectedValues.map(
-                  (option) => renderChip ? /* @__PURE__ */ jsx156(React56.Fragment, { children: renderChip(option, () => removeOption(option)) }, String(option.value)) : /* @__PURE__ */ jsxs100(
+                  (option) => renderChip ? /* @__PURE__ */ jsx157(React56.Fragment, { children: renderChip(option, () => removeOption(option)) }, String(option.value)) : /* @__PURE__ */ jsxs101(
                     "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__ */ jsx156("span", { className: "whitespace-nowrap", children: option.label }),
-                        !readOnly && /* @__PURE__ */ jsx156(
+                        /* @__PURE__ */ jsx157("span", { className: "whitespace-nowrap", children: option.label }),
+                        !readOnly && /* @__PURE__ */ jsx157(
                           "button",
                           {
                             type: "button",
@@ -14381,7 +14423,7 @@ function DashboardMultiSelectInternal({
                             },
                             className: "flex h-[15px] w-[15px] items-center justify-center rounded-[3px] border-0 bg-transparent p-0 text-[#9696b9] hover:shadow-[0_3px_3px_#0f477734]",
                             "aria-label": `Remove ${typeof option.label === "string" ? option.label : String(option.value)}`,
-                            children: /* @__PURE__ */ jsx156(SquareX2, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
+                            children: /* @__PURE__ */ jsx157(SquareX2, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
                           }
                         )
                       ]
@@ -14389,7 +14431,7 @@ function DashboardMultiSelectInternal({
                     String(option.value)
                   )
                 ),
-                /* @__PURE__ */ jsx156(
+                /* @__PURE__ */ jsx157(
                   "input",
                   {
                     ref: inputRef,
@@ -14418,9 +14460,9 @@ function DashboardMultiSelectInternal({
                     "aria-activedescendant": isOpen && highlightedIndex >= 0 ? getOptionId2(highlightedIndex) : void 0
                   }
                 ),
-                /* @__PURE__ */ jsxs100("span", { className: "ml-auto flex items-center gap-2 pl-2 text-[var(--chekin-color-gray-2)]", children: [
-                  loading && /* @__PURE__ */ jsx156(ThreeDotsLoader, { height: 18, width: 18 }),
-                  hasValue && !readOnly && /* @__PURE__ */ jsx156(
+                /* @__PURE__ */ jsxs101("span", { className: "ml-auto flex items-center gap-2 pl-2 text-[var(--chekin-color-gray-2)]", children: [
+                  loading && /* @__PURE__ */ jsx157(ThreeDotsLoader, { height: 18, width: 18 }),
+                  hasValue && !readOnly && /* @__PURE__ */ jsx157(
                     "button",
                     {
                       type: "button",
@@ -14430,10 +14472,10 @@ function DashboardMultiSelectInternal({
                       },
                       className: "flex h-5 w-5 items-center justify-center rounded-[3px] border-0 bg-transparent p-0 text-[#9696b9] hover:shadow-[0_3px_3px_#0f477734]",
                       "aria-label": "Clear all",
-                      children: /* @__PURE__ */ jsx156(SquareX2, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
+                      children: /* @__PURE__ */ jsx157(SquareX2, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
                     }
                   ),
-                  /* @__PURE__ */ jsx156(
+                  /* @__PURE__ */ jsx157(
                     RotateArrow,
                     {
                       shouldRotate: isOpen,
@@ -14446,7 +14488,7 @@ function DashboardMultiSelectInternal({
               ]
             }
           ),
-          /* @__PURE__ */ jsx156(
+          /* @__PURE__ */ jsx157(
             Fieldset,
             {
               isFocused: isFocused || isOpen,
@@ -14464,15 +14506,35 @@ function DashboardMultiSelectInternal({
               onClick: handleContainerClick
             }
           ),
-          isOpen && /* @__PURE__ */ jsxs100(
-            "div",
+          /* @__PURE__ */ jsxs101(
+            SelectMenuPanel,
             {
-              className: cn(
-                "absolute left-0 right-0 top-full z-20 overflow-hidden rounded-b-lg bg-white shadow-[0_30px_30px_0_rgba(33,72,255,0.2)]",
-                dropdownClassName
-              ),
+              isOpen,
+              isMobile: isMobile2,
+              onClose: () => {
+                setIsOpen(false);
+                setIsFocused(false);
+              },
+              title: typeof label === "string" ? label : void 0,
+              className: dropdownClassName,
+              drawerClassName,
               children: [
-                /* @__PURE__ */ jsx156(
+                isMobile2 && /* @__PURE__ */ jsx157("div", { className: "border-b border-[#f2f4f8] px-4 pb-2 pt-3", children: /* @__PURE__ */ jsx157(
+                  "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)]"
+                  }
+                ) }),
+                /* @__PURE__ */ jsx157(
                   SelectMenu,
                   {
                     id: listboxId,
@@ -14494,7 +14556,7 @@ function DashboardMultiSelectInternal({
                     isMulti: true
                   }
                 ),
-                canCreateNewOption && /* @__PURE__ */ jsx156(
+                canCreateNewOption && /* @__PURE__ */ jsx157(
                   "button",
                   {
                     type: "button",
@@ -14507,9 +14569,9 @@ function DashboardMultiSelectInternal({
             }
           )
         ] }),
-        !errorMessage && optional && /* @__PURE__ */ jsx156("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : "optional" }),
-        !errorMessage && helperText && /* @__PURE__ */ jsx156("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
-        errorMessage && !hideErrorMessage && /* @__PURE__ */ jsx156(
+        !errorMessage && optional && /* @__PURE__ */ jsx157("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : "optional" }),
+        !errorMessage && helperText && /* @__PURE__ */ jsx157("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
+        errorMessage && !hideErrorMessage && /* @__PURE__ */ jsx157(
           FieldErrorMessage,
           {
             id: errorId,
@@ -14527,10 +14589,10 @@ var DashboardMultiSelect = React56.forwardRef(
 
 // src/dashboard/creatable-multi-select/CreatableMultiSelect.tsx
 import * as React57 from "react";
-import { jsx as jsx157 } from "react/jsx-runtime";
+import { jsx as jsx158 } from "react/jsx-runtime";
 var DashboardCreatableMultiSelect = React57.forwardRef(
   function DashboardCreatableMultiSelect2(props, ref) {
-    return /* @__PURE__ */ jsx157(DashboardMultiSelect, { ref, ...props, isCreatable: true });
+    return /* @__PURE__ */ jsx158(DashboardMultiSelect, { ref, ...props, isCreatable: true });
   }
 );
 
@@ -14538,7 +14600,7 @@ var DashboardCreatableMultiSelect = React57.forwardRef(
 import * as React58 from "react";
 import { ChevronDown as ChevronDown5 } from "lucide-react";
 import { useVirtualizer as useVirtualizer2 } from "@tanstack/react-virtual";
-import { jsx as jsx158, jsxs as jsxs101 } from "react/jsx-runtime";
+import { jsx as jsx159, jsxs as jsxs102 } from "react/jsx-runtime";
 var DEFAULT_ITEM_HEIGHT = 60;
 var DEFAULT_LIST_HEIGHT = 322;
 var DEFAULT_OVERSCAN = 5;
@@ -14562,6 +14624,7 @@ function DashboardInfiniteScrollSelectInternal({
   className,
   menuClassName,
   dropdownClassName,
+  drawerClassName,
   name,
   width,
   noOptionsMessage,
@@ -14586,6 +14649,7 @@ function DashboardInfiniteScrollSelectInternal({
   const [isOpen, setIsOpen] = React58.useState(false);
   const [searchValue, setSearchValue] = React58.useState("");
   const [highlightedIndex, setHighlightedIndex] = React58.useState(-1);
+  const isMobile2 = useIsMobile();
   const hasValue = Boolean(value);
   const isEmpty = !hasValue;
   const isBlocked = Boolean(disabled) || Boolean(loading);
@@ -14610,7 +14674,7 @@ function DashboardInfiniteScrollSelectInternal({
   useOutsideClick({
     elementRef: containerRef,
     onOutsideClick: () => setIsOpen(false),
-    isDisabled: !isOpen
+    isDisabled: !isOpen || isMobile2
   });
   React58.useEffect(() => {
     if (isBlocked) setIsOpen(false);
@@ -14705,7 +14769,7 @@ function DashboardInfiniteScrollSelectInternal({
   const emptyMessage = noOptionsMessage?.();
   const totalSize = virtualizer.getTotalSize();
   const measuredListHeight = Math.min(listHeight, Math.max(totalSize, itemHeight));
-  return /* @__PURE__ */ jsxs101(
+  return /* @__PURE__ */ jsxs102(
     "div",
     {
       ref: containerRef,
@@ -14717,9 +14781,9 @@ function DashboardInfiniteScrollSelectInternal({
       ),
       style: wrapperWidth ? { width: wrapperWidth } : void 0,
       children: [
-        name && /* @__PURE__ */ jsx158("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
-        /* @__PURE__ */ jsxs101("div", { className: "relative min-h-[68px] w-full", children: [
-          topLabel && /* @__PURE__ */ jsx158(
+        name && /* @__PURE__ */ jsx159("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
+        /* @__PURE__ */ jsxs102("div", { className: "relative min-h-[68px] w-full", children: [
+          topLabel && /* @__PURE__ */ jsx159(
             "label",
             {
               htmlFor: triggerId,
@@ -14727,8 +14791,8 @@ function DashboardInfiniteScrollSelectInternal({
               children: topLabel
             }
           ),
-          /* @__PURE__ */ jsxs101("div", { className: "relative w-full", children: [
-            /* @__PURE__ */ jsxs101(
+          /* @__PURE__ */ jsxs102("div", { className: "relative w-full", children: [
+            /* @__PURE__ */ jsxs102(
               "button",
               {
                 id: triggerId,
@@ -14752,10 +14816,10 @@ function DashboardInfiniteScrollSelectInternal({
                   loading && "cursor-progress"
                 ),
                 children: [
-                  /* @__PURE__ */ jsx158("span", { id: valueId, className: "block min-w-0 flex-1 truncate text-left", children: valueLabel ?? placeholder ?? label }),
-                  /* @__PURE__ */ jsxs101("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(
+                  /* @__PURE__ */ jsx159("span", { id: valueId, className: "block min-w-0 flex-1 truncate text-left", children: valueLabel ?? placeholder ?? label }),
+                  /* @__PURE__ */ jsxs102("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: [
+                    loading && /* @__PURE__ */ jsx159(ThreeDotsLoader, { height: 18, width: 18 }),
+                    /* @__PURE__ */ jsx159(
                       ChevronDown5,
                       {
                         size: 16,
@@ -14769,7 +14833,7 @@ function DashboardInfiniteScrollSelectInternal({
                 ]
               }
             ),
-            /* @__PURE__ */ jsx158(
+            /* @__PURE__ */ jsx159(
               Fieldset,
               {
                 isFocused: isOpen,
@@ -14786,15 +14850,17 @@ function DashboardInfiniteScrollSelectInternal({
                 onClick: !isBlocked ? toggleMenu : void 0
               }
             ),
-            isOpen && /* @__PURE__ */ jsxs101(
-              "div",
+            /* @__PURE__ */ jsxs102(
+              SelectMenuPanel,
               {
-                className: cn(
-                  "absolute left-0 right-0 top-full z-20 overflow-hidden rounded-b-lg bg-white shadow-[0_30px_30px_0_rgba(33,72,255,0.2)]",
-                  dropdownClassName
-                ),
+                isOpen,
+                isMobile: isMobile2,
+                onClose: () => setIsOpen(false),
+                title: typeof label === "string" ? label : void 0,
+                className: dropdownClassName,
+                drawerClassName,
                 children: [
-                  searchable && /* @__PURE__ */ jsx158("div", { className: "border-b border-[#f2f4f8] px-4 pb-2 pt-3", children: /* @__PURE__ */ jsx158(
+                  searchable && /* @__PURE__ */ jsx159("div", { className: "border-b border-[#f2f4f8] px-4 pb-2 pt-3", children: /* @__PURE__ */ jsx159(
                     "input",
                     {
                       ref: searchInputRef,
@@ -14809,13 +14875,13 @@ function DashboardInfiniteScrollSelectInternal({
                       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)]"
                     }
                   ) }),
-                  itemCount === 0 ? /* @__PURE__ */ jsx158("div", { className: "px-4 py-[20px] text-left text-[16px] text-[var(--chekin-color-brand-navy)]", children: emptyMessage ?? "No options" }) : /* @__PURE__ */ jsx158(
+                  itemCount === 0 ? /* @__PURE__ */ jsx159("div", { className: "px-4 py-[20px] text-left text-[16px] text-[var(--chekin-color-brand-navy)]", children: emptyMessage ?? "No options" }) : /* @__PURE__ */ jsx159(
                     "div",
                     {
                       ref: scrollRef,
                       className: cn("overflow-y-auto", menuClassName),
                       style: { height: `${measuredListHeight}px` },
-                      children: /* @__PURE__ */ jsx158(
+                      children: /* @__PURE__ */ jsx159(
                         "div",
                         {
                           id: listboxId,
@@ -14832,7 +14898,7 @@ function DashboardInfiniteScrollSelectInternal({
                             const isSelected = !isLoaderRow && option ? option.value === value?.value : false;
                             const isHighlighted = virtualItem.index === highlightedIndex;
                             const isOptionDisabled = Boolean(isBlocked || option?.isDisabled);
-                            return /* @__PURE__ */ jsx158(
+                            return /* @__PURE__ */ jsx159(
                               "div",
                               {
                                 "data-index": virtualItem.index,
@@ -14841,10 +14907,10 @@ function DashboardInfiniteScrollSelectInternal({
                                   height: `${virtualItem.size}px`,
                                   transform: `translateY(${virtualItem.start}px)`
                                 },
-                                children: isLoaderRow ? /* @__PURE__ */ jsxs101("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__ */ jsx158(ThreeDotsLoader, { height: 18, width: 18 }),
-                                  /* @__PURE__ */ jsx158("span", { children: loadingMoreText })
-                                ] }) : /* @__PURE__ */ jsxs101(
+                                children: isLoaderRow ? /* @__PURE__ */ jsxs102("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__ */ jsx159(ThreeDotsLoader, { height: 18, width: 18 }),
+                                  /* @__PURE__ */ jsx159("span", { children: loadingMoreText })
+                                ] }) : /* @__PURE__ */ jsxs102(
                                   "button",
                                   {
                                     id: getOptionId2(virtualItem.index),
@@ -14863,8 +14929,8 @@ function DashboardInfiniteScrollSelectInternal({
                                       isOptionDisabled && "cursor-default opacity-30"
                                     ),
                                     children: [
-                                      /* @__PURE__ */ jsx158("span", { className: "block break-words", children: option?.label }),
-                                      option?.description && /* @__PURE__ */ jsx158("span", { className: "ml-2 mt-[3px] shrink-0 text-[12px] font-bold italic text-[#777e91]", children: option.description })
+                                      /* @__PURE__ */ jsx159("span", { className: "block break-words", children: option?.label }),
+                                      option?.description && /* @__PURE__ */ jsx159("span", { className: "ml-2 mt-[3px] shrink-0 text-[12px] font-bold italic text-[#777e91]", children: option.description })
                                     ]
                                   }
                                 )
@@ -14880,9 +14946,9 @@ function DashboardInfiniteScrollSelectInternal({
               }
             )
           ] }),
-          !errorMessage && optional && /* @__PURE__ */ jsx158("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : "optional" }),
-          !errorMessage && helperText && /* @__PURE__ */ jsx158("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
-          errorMessage && !hideErrorMessage && /* @__PURE__ */ jsx158(
+          !errorMessage && optional && /* @__PURE__ */ jsx159("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : "optional" }),
+          !errorMessage && helperText && /* @__PURE__ */ jsx159("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
+          errorMessage && !hideErrorMessage && /* @__PURE__ */ jsx159(
             FieldErrorMessage,
             {
               id: errorId,
@@ -14904,7 +14970,7 @@ import * as React59 from "react";
 import { ChevronDown as ChevronDown6, Search as Search4 } from "lucide-react";
 import { useVirtualizer as useVirtualizer3 } from "@tanstack/react-virtual";
 import { useCallback as useCallback35 } from "react";
-import { jsx as jsx159, jsxs as jsxs102 } from "react/jsx-runtime";
+import { jsx as jsx160, jsxs as jsxs103 } from "react/jsx-runtime";
 var ROW_HEIGHT = 48;
 var DESKTOP_LIST_HEIGHT = 280;
 var MOBILE_LIST_HEIGHT = 420;
@@ -15073,7 +15139,7 @@ var SearchableSelectInternal = ({
       }
     }
   }
-  const content = /* @__PURE__ */ jsx159(
+  const content = /* @__PURE__ */ jsx160(
     SearchableSelectContent,
     {
       inputId: searchInputId,
@@ -15101,9 +15167,9 @@ var SearchableSelectInternal = ({
     }
   );
   React59.useImperativeHandle(ref, () => triggerRef.current, []);
-  return /* @__PURE__ */ jsxs102("div", { ref: containerRef, className: cn("relative w-full max-w-[425px]", className), children: [
-    name && /* @__PURE__ */ jsx159("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
-    /* @__PURE__ */ jsx159(
+  return /* @__PURE__ */ jsxs103("div", { ref: containerRef, className: cn("relative w-full max-w-[425px]", className), children: [
+    name && /* @__PURE__ */ jsx160("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
+    /* @__PURE__ */ jsx160(
       FieldTrigger,
       {
         id: `${reactId}-trigger`,
@@ -15138,7 +15204,7 @@ var SearchableSelectInternal = ({
         },
         onKeyDown: handleTriggerKeyDown,
         onBlur,
-        trailingAdornment: /* @__PURE__ */ jsx159(
+        trailingAdornment: /* @__PURE__ */ jsx160(
           ChevronDown6,
           {
             className: cn(
@@ -15149,7 +15215,7 @@ var SearchableSelectInternal = ({
         )
       }
     ),
-    isMobile2 ? /* @__PURE__ */ jsx159(
+    isMobile2 ? /* @__PURE__ */ jsx160(
       Drawer,
       {
         open,
@@ -15161,13 +15227,13 @@ var SearchableSelectInternal = ({
           }
           closeSelect();
         },
-        children: /* @__PURE__ */ jsxs102(DrawerContent, { onClose: closeSelect, lockScroll: false, children: [
-          /* @__PURE__ */ jsx159(DrawerTitle, { className: "sr-only", children: mobileTitle ?? label }),
-          /* @__PURE__ */ jsx159(DrawerDescription, { className: "sr-only", children: label }),
-          /* @__PURE__ */ jsx159("div", { className: "px-5 pb-5 pt-1", children: content })
+        children: /* @__PURE__ */ jsxs103(DrawerContent, { onClose: closeSelect, lockScroll: false, children: [
+          /* @__PURE__ */ jsx160(DrawerTitle, { className: "sr-only", children: mobileTitle ?? label }),
+          /* @__PURE__ */ jsx160(DrawerDescription, { className: "sr-only", children: label }),
+          /* @__PURE__ */ jsx160("div", { className: "px-5 pb-5 pt-1", children: content })
         ] })
       }
-    ) : open ? /* @__PURE__ */ jsx159(
+    ) : open ? /* @__PURE__ */ jsx160(
       "div",
       {
         className: cn(
@@ -15234,16 +15300,16 @@ function SearchableSelectContent({
       virtualizer.scrollToIndex(highlightedIndex, { align: "auto" });
     }
   }, [highlightedIndex, virtualizer]);
-  return /* @__PURE__ */ jsxs102("div", { className: "p-2", children: [
-    /* @__PURE__ */ jsxs102("div", { className: "relative mb-2", children: [
-      /* @__PURE__ */ jsx159(
+  return /* @__PURE__ */ jsxs103("div", { className: "p-2", children: [
+    /* @__PURE__ */ jsxs103("div", { className: "relative mb-2", children: [
+      /* @__PURE__ */ jsx160(
         Search4,
         {
           "aria-hidden": "true",
           className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 text-[#9696B9]"
         }
       ),
-      /* @__PURE__ */ jsx159(
+      /* @__PURE__ */ jsx160(
         "input",
         {
           id: inputId,
@@ -15262,7 +15328,7 @@ function SearchableSelectContent({
         }
       )
     ] }),
-    loading && options.length === 0 ? /* @__PURE__ */ jsx159("div", { className: "px-4 py-5 text-center text-base leading-6 text-[#6C6C6C]", children: loadingText }) : options.length === 0 ? /* @__PURE__ */ jsx159("div", { className: "px-4 py-5 text-center text-base leading-6 text-[#6C6C6C]", children: emptyMessage }) : /* @__PURE__ */ jsx159(
+    loading && options.length === 0 ? /* @__PURE__ */ jsx160("div", { className: "px-4 py-5 text-center text-base leading-6 text-[#6C6C6C]", children: loadingText }) : options.length === 0 ? /* @__PURE__ */ jsx160("div", { className: "px-4 py-5 text-center text-base leading-6 text-[#6C6C6C]", children: emptyMessage }) : /* @__PURE__ */ jsx160(
       "div",
       {
         id: listboxId,
@@ -15271,7 +15337,7 @@ function SearchableSelectContent({
         "aria-labelledby": labelId,
         className: cn("overflow-y-auto outline-none", menuClassName),
         style: { height: Math.min(height, rowCount * ROW_HEIGHT) },
-        children: /* @__PURE__ */ jsx159(
+        children: /* @__PURE__ */ jsx160(
           "div",
           {
             className: "relative w-full",
@@ -15279,7 +15345,7 @@ function SearchableSelectContent({
             children: virtualItems.map((virtualItem) => {
               const option = options[virtualItem.index];
               if (!option) {
-                return /* @__PURE__ */ jsx159(
+                return /* @__PURE__ */ jsx160(
                   "div",
                   {
                     className: "absolute left-0 top-0 flex w-full items-center px-4 text-base leading-6 text-[#6C6C6C]",
@@ -15294,7 +15360,7 @@ function SearchableSelectContent({
               }
               const isSelected = value?.value === option.value;
               const isHighlighted = virtualItem.index === highlightedIndex;
-              return /* @__PURE__ */ jsx159(
+              return /* @__PURE__ */ jsx160(
                 "button",
                 {
                   id: getOptionId(idPrefix, virtualItem.index),
@@ -15316,7 +15382,7 @@ function SearchableSelectContent({
                     height: `${virtualItem.size}px`,
                     transform: `translateY(${virtualItem.start}px)`
                   },
-                  children: /* @__PURE__ */ jsx159("span", { className: "truncate text-center", children: String(option.label) })
+                  children: /* @__PURE__ */ jsx160("span", { className: "truncate text-center", children: String(option.label) })
                 },
                 `${String(option.value)}-${virtualItem.index}`
               );
@@ -15402,14 +15468,14 @@ function getErrorMessage(error) {
 
 // src/lib/toastResponseError.tsx
 import i18next from "i18next";
-import { jsx as jsx160, jsxs as jsxs103 } from "react/jsx-runtime";
+import { jsx as jsx161, jsxs as jsxs104 } from "react/jsx-runtime";
 function addSupportEmailToMessage(message, prefixText) {
   if (typeof message !== "string") {
     return message;
   }
   const builtMessage = `${prefixText ? `${prefixText} ` : ""}${message}`;
-  return /* @__PURE__ */ jsxs103("div", { children: [
-    /* @__PURE__ */ jsx160("div", { children: builtMessage }),
+  return /* @__PURE__ */ jsxs104("div", { children: [
+    /* @__PURE__ */ jsx161("div", { children: builtMessage }),
     i18next.t("reach_us_at_email")
   ] });
 }