@chekinapp/ui 0.0.71 → 0.0.72

package/dist/index.cjs

@@ -9753,7 +9753,7 @@ ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
 var import_react76 = require("react");
 var import_jsx_runtime127 = require("react/jsx-runtime");
 var getValueArray = (value) => {
-  if (value) {
+  if (value !== void 0 && value !== null) {
     return Array.isArray(value) ? value : [value];
   }
   return [];
@@ -14127,6 +14127,52 @@ function SelectMenu({
   );
 }
 
+// src/dashboard/_select-internals/SelectMenuPanel.tsx
+var import_jsx_runtime157 = require("react/jsx-runtime");
+function SelectMenuPanel({
+  isOpen,
+  isMobile: isMobile2,
+  onClose,
+  title,
+  className,
+  drawerClassName,
+  children
+}) {
+  if (!isOpen) return null;
+  if (isMobile2) {
+    return /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(
+      Drawer,
+      {
+        open: isOpen,
+        onOpenChange: (next) => {
+          if (!next) onClose();
+        },
+        children: /* @__PURE__ */ (0, import_jsx_runtime157.jsxs)(
+          DrawerContent,
+          {
+            onClose,
+            className: cn("max-h-[calc(100vh-1rem)]", drawerClassName),
+            children: [
+              title ? /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(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__ */ (0, import_jsx_runtime157.jsx)(DrawerTitle, { className: "sr-only", children: "Select option" }),
+              /* @__PURE__ */ (0, import_jsx_runtime157.jsx)("div", { className: "flex min-h-0 flex-1 flex-col", children })
+            ]
+          }
+        )
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(
+    "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
 var React54 = __toESM(require("react"), 1);
 function useSelectIds2({
@@ -14163,7 +14209,7 @@ function useSelectIds2({
 }
 
 // src/dashboard/select/Select.tsx
-var import_jsx_runtime157 = require("react/jsx-runtime");
+var import_jsx_runtime158 = require("react/jsx-runtime");
 function DashboardSelectInternal({
   options = [],
   value,
@@ -14183,6 +14229,7 @@ function DashboardSelectInternal({
   className,
   menuClassName,
   dropdownClassName,
+  drawerClassName,
   name,
   width,
   noOptionsMessage,
@@ -14199,6 +14246,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);
@@ -14216,7 +14264,7 @@ function DashboardSelectInternal({
   useOutsideClick({
     elementRef: containerRef,
     onOutsideClick: () => setIsOpen(false),
-    isDisabled: !isOpen
+    isDisabled: !isOpen || isMobile2
   });
   React55.useEffect(() => {
     if (isBlocked) setIsOpen(false);
@@ -14295,7 +14343,7 @@ function DashboardSelectInternal({
       setIsOpen(false);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime157.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime158.jsxs)(
     "div",
     {
       ref: containerRef,
@@ -14307,9 +14355,9 @@ function DashboardSelectInternal({
       ),
       style: wrapperWidth ? { width: wrapperWidth } : void 0,
       children: [
-        name && /* @__PURE__ */ (0, import_jsx_runtime157.jsx)("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
-        /* @__PURE__ */ (0, import_jsx_runtime157.jsxs)("div", { className: "relative w-full min-h-[68px]", children: [
-          topLabel && /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(
+        name && /* @__PURE__ */ (0, import_jsx_runtime158.jsx)("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
+        /* @__PURE__ */ (0, import_jsx_runtime158.jsxs)("div", { className: "relative w-full min-h-[68px]", children: [
+          topLabel && /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
             "label",
             {
               htmlFor: triggerId,
@@ -14317,8 +14365,8 @@ function DashboardSelectInternal({
               children: topLabel
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime157.jsxs)("div", { className: "relative w-full", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime157.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime158.jsxs)("div", { className: "relative w-full", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime158.jsxs)(
               "button",
               {
                 id: triggerId,
@@ -14342,10 +14390,10 @@ function DashboardSelectInternal({
                   loading && "cursor-progress"
                 ),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime157.jsx)("span", { id: valueId, className: "block min-w-0 flex-1 truncate text-left", children: valueLabel ?? placeholder ?? label }),
-                  /* @__PURE__ */ (0, import_jsx_runtime157.jsxs)("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: [
-                    loading && /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(ThreeDotsLoader, { height: 18, width: 18 }),
-                    /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime158.jsx)("span", { id: valueId, className: "block min-w-0 flex-1 truncate text-left", children: valueLabel ?? placeholder ?? label }),
+                  /* @__PURE__ */ (0, import_jsx_runtime158.jsxs)("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: [
+                    loading && /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(ThreeDotsLoader, { height: 18, width: 18 }),
+                    /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
                       import_lucide_react47.ChevronDown,
                       {
                         size: 16,
@@ -14359,7 +14407,7 @@ function DashboardSelectInternal({
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
               Fieldset,
               {
                 isFocused: isOpen,
@@ -14376,15 +14424,17 @@ function DashboardSelectInternal({
                 onClick: !isBlocked ? toggleMenu : void 0
               }
             ),
-            isOpen && /* @__PURE__ */ (0, import_jsx_runtime157.jsxs)(
-              "div",
+            /* @__PURE__ */ (0, import_jsx_runtime158.jsxs)(
+              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__ */ (0, import_jsx_runtime157.jsx)("div", { className: "border-b border-[#f2f4f8] px-4 pb-2 pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(
+                  searchable && /* @__PURE__ */ (0, import_jsx_runtime158.jsx)("div", { className: "border-b border-[#f2f4f8] px-4 pb-2 pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
                     "input",
                     {
                       ref: searchInputRef,
@@ -14399,7 +14449,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__ */ (0, import_jsx_runtime157.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
                     SelectMenu,
                     {
                       id: listboxId,
@@ -14424,9 +14474,9 @@ function DashboardSelectInternal({
               }
             )
           ] }),
-          !errorMessage && optional && /* @__PURE__ */ (0, import_jsx_runtime157.jsx)("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__ */ (0, import_jsx_runtime157.jsx)("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
-          errorMessage && !hideErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(
+          !errorMessage && optional && /* @__PURE__ */ (0, import_jsx_runtime158.jsx)("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : "optional" }),
+          !errorMessage && helperText && /* @__PURE__ */ (0, import_jsx_runtime158.jsx)("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
+          errorMessage && !hideErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
             FieldErrorMessage,
             {
               id: errorId,
@@ -14446,7 +14496,7 @@ var DashboardSelect = React55.forwardRef(
 // src/dashboard/multi-select/MultiSelect.tsx
 var React56 = __toESM(require("react"), 1);
 var import_lucide_react48 = require("lucide-react");
-var import_jsx_runtime158 = require("react/jsx-runtime");
+var import_jsx_runtime159 = require("react/jsx-runtime");
 var isValueSelected = (selected, option) => selected.some((item) => item.value === option.value);
 function DashboardMultiSelectInternal({
   options = [],
@@ -14467,6 +14517,7 @@ function DashboardMultiSelectInternal({
   className,
   menuClassName,
   dropdownClassName,
+  drawerClassName,
   name,
   width,
   noOptionsMessage,
@@ -14481,12 +14532,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;
@@ -14523,7 +14576,7 @@ function DashboardMultiSelectInternal({
       setIsOpen(false);
       setIsFocused(false);
     },
-    isDisabled: !isOpen
+    isDisabled: !isOpen || isMobile2
   });
   React56.useEffect(() => {
     if (isBlocked) setIsOpen(false);
@@ -14544,6 +14597,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);
@@ -14638,7 +14696,7 @@ function DashboardMultiSelectInternal({
     setIsFocused(false);
     onBlur?.(event);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime158.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime159.jsxs)(
     "div",
     {
       ref: containerRef,
@@ -14651,7 +14709,7 @@ function DashboardMultiSelectInternal({
       ),
       style: wrapperWidth ? { width: wrapperWidth } : void 0,
       children: [
-        topLabel && /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
+        topLabel && /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(
           "label",
           {
             htmlFor: triggerId,
@@ -14659,7 +14717,7 @@ function DashboardMultiSelectInternal({
             children: topLabel
           }
         ),
-        name && /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
+        name && /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(
           "input",
           {
             type: "hidden",
@@ -14667,8 +14725,8 @@ function DashboardMultiSelectInternal({
             value: selectedValues.map((item) => String(item.value)).join(",")
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime158.jsxs)("div", { className: "relative w-full", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime158.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime159.jsxs)("div", { className: "relative w-full", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime159.jsxs)(
             "div",
             {
               id: triggerId,
@@ -14691,13 +14749,13 @@ function DashboardMultiSelectInternal({
               ),
               children: [
                 selectedValues.map(
-                  (option) => renderChip ? /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(React56.Fragment, { children: renderChip(option, () => removeOption(option)) }, String(option.value)) : /* @__PURE__ */ (0, import_jsx_runtime158.jsxs)(
+                  (option) => renderChip ? /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(React56.Fragment, { children: renderChip(option, () => removeOption(option)) }, String(option.value)) : /* @__PURE__ */ (0, import_jsx_runtime159.jsxs)(
                     "span",
                     {
                       className: "inline-flex items-center gap-2 rounded-[4px] border border-[#acacd5] bg-[#f0f0f8] py-[2px] pl-[10px] pr-1 text-[12px] font-medium text-[var(--chekin-color-brand-navy)]",
                       children: [
-                        /* @__PURE__ */ (0, import_jsx_runtime158.jsx)("span", { className: "whitespace-nowrap", children: option.label }),
-                        !readOnly && /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
+                        /* @__PURE__ */ (0, import_jsx_runtime159.jsx)("span", { className: "whitespace-nowrap", children: option.label }),
+                        !readOnly && /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(
                           "button",
                           {
                             type: "button",
@@ -14707,7 +14765,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__ */ (0, import_jsx_runtime158.jsx)(import_lucide_react48.SquareX, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
+                            children: /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(import_lucide_react48.SquareX, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
                           }
                         )
                       ]
@@ -14715,7 +14773,7 @@ function DashboardMultiSelectInternal({
                     String(option.value)
                   )
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(
                   "input",
                   {
                     ref: inputRef,
@@ -14744,9 +14802,9 @@ function DashboardMultiSelectInternal({
                     "aria-activedescendant": isOpen && highlightedIndex >= 0 ? getOptionId2(highlightedIndex) : void 0
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime158.jsxs)("span", { className: "ml-auto flex items-center gap-2 pl-2 text-[var(--chekin-color-gray-2)]", children: [
-                  loading && /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(ThreeDotsLoader, { height: 18, width: 18 }),
-                  hasValue && !readOnly && /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime159.jsxs)("span", { className: "ml-auto flex items-center gap-2 pl-2 text-[var(--chekin-color-gray-2)]", children: [
+                  loading && /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(ThreeDotsLoader, { height: 18, width: 18 }),
+                  hasValue && !readOnly && /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(
                     "button",
                     {
                       type: "button",
@@ -14756,10 +14814,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__ */ (0, import_jsx_runtime158.jsx)(import_lucide_react48.SquareX, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
+                      children: /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(import_lucide_react48.SquareX, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(
                     RotateArrow,
                     {
                       shouldRotate: isOpen,
@@ -14772,7 +14830,7 @@ function DashboardMultiSelectInternal({
               ]
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(
             Fieldset,
             {
               isFocused: isFocused || isOpen,
@@ -14790,15 +14848,35 @@ function DashboardMultiSelectInternal({
               onClick: handleContainerClick
             }
           ),
-          isOpen && /* @__PURE__ */ (0, import_jsx_runtime158.jsxs)(
-            "div",
+          /* @__PURE__ */ (0, import_jsx_runtime159.jsxs)(
+            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__ */ (0, import_jsx_runtime158.jsx)(
+                isMobile2 && /* @__PURE__ */ (0, import_jsx_runtime159.jsx)("div", { className: "border-b border-[#f2f4f8] px-4 pb-2 pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(
+                  "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__ */ (0, import_jsx_runtime159.jsx)(
                   SelectMenu,
                   {
                     id: listboxId,
@@ -14820,7 +14898,7 @@ function DashboardMultiSelectInternal({
                     isMulti: true
                   }
                 ),
-                canCreateNewOption && /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
+                canCreateNewOption && /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(
                   "button",
                   {
                     type: "button",
@@ -14833,9 +14911,9 @@ function DashboardMultiSelectInternal({
             }
           )
         ] }),
-        !errorMessage && optional && /* @__PURE__ */ (0, import_jsx_runtime158.jsx)("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : "optional" }),
-        !errorMessage && helperText && /* @__PURE__ */ (0, import_jsx_runtime158.jsx)("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
-        errorMessage && !hideErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
+        !errorMessage && optional && /* @__PURE__ */ (0, import_jsx_runtime159.jsx)("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : "optional" }),
+        !errorMessage && helperText && /* @__PURE__ */ (0, import_jsx_runtime159.jsx)("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
+        errorMessage && !hideErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(
           FieldErrorMessage,
           {
             id: errorId,
@@ -14853,10 +14931,10 @@ var DashboardMultiSelect = React56.forwardRef(
 
 // src/dashboard/creatable-multi-select/CreatableMultiSelect.tsx
 var React57 = __toESM(require("react"), 1);
-var import_jsx_runtime159 = require("react/jsx-runtime");
+var import_jsx_runtime160 = require("react/jsx-runtime");
 var DashboardCreatableMultiSelect = React57.forwardRef(
   function DashboardCreatableMultiSelect2(props, ref) {
-    return /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(DashboardMultiSelect, { ref, ...props, isCreatable: true });
+    return /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(DashboardMultiSelect, { ref, ...props, isCreatable: true });
   }
 );
 
@@ -14864,7 +14942,7 @@ var DashboardCreatableMultiSelect = React57.forwardRef(
 var React58 = __toESM(require("react"), 1);
 var import_lucide_react49 = require("lucide-react");
 var import_react_virtual2 = require("@tanstack/react-virtual");
-var import_jsx_runtime160 = require("react/jsx-runtime");
+var import_jsx_runtime161 = require("react/jsx-runtime");
 var DEFAULT_ITEM_HEIGHT = 60;
 var DEFAULT_LIST_HEIGHT = 322;
 var DEFAULT_OVERSCAN = 5;
@@ -14888,6 +14966,7 @@ function DashboardInfiniteScrollSelectInternal({
   className,
   menuClassName,
   dropdownClassName,
+  drawerClassName,
   name,
   width,
   noOptionsMessage,
@@ -14912,6 +14991,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);
@@ -14936,7 +15016,7 @@ function DashboardInfiniteScrollSelectInternal({
   useOutsideClick({
     elementRef: containerRef,
     onOutsideClick: () => setIsOpen(false),
-    isDisabled: !isOpen
+    isDisabled: !isOpen || isMobile2
   });
   React58.useEffect(() => {
     if (isBlocked) setIsOpen(false);
@@ -15031,7 +15111,7 @@ function DashboardInfiniteScrollSelectInternal({
   const emptyMessage = noOptionsMessage?.();
   const totalSize = virtualizer.getTotalSize();
   const measuredListHeight = Math.min(listHeight, Math.max(totalSize, itemHeight));
-  return /* @__PURE__ */ (0, import_jsx_runtime160.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime161.jsxs)(
     "div",
     {
       ref: containerRef,
@@ -15043,9 +15123,9 @@ function DashboardInfiniteScrollSelectInternal({
       ),
       style: wrapperWidth ? { width: wrapperWidth } : void 0,
       children: [
-        name && /* @__PURE__ */ (0, import_jsx_runtime160.jsx)("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
-        /* @__PURE__ */ (0, import_jsx_runtime160.jsxs)("div", { className: "relative min-h-[68px] w-full", children: [
-          topLabel && /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(
+        name && /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
+        /* @__PURE__ */ (0, import_jsx_runtime161.jsxs)("div", { className: "relative min-h-[68px] w-full", children: [
+          topLabel && /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
             "label",
             {
               htmlFor: triggerId,
@@ -15053,8 +15133,8 @@ function DashboardInfiniteScrollSelectInternal({
               children: topLabel
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime160.jsxs)("div", { className: "relative w-full", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime160.jsxs)(
+          /* @__PURE__ */ (0, import_jsx_runtime161.jsxs)("div", { className: "relative w-full", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime161.jsxs)(
               "button",
               {
                 id: triggerId,
@@ -15078,10 +15158,10 @@ function DashboardInfiniteScrollSelectInternal({
                   loading && "cursor-progress"
                 ),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime160.jsx)("span", { id: valueId, className: "block min-w-0 flex-1 truncate text-left", children: valueLabel ?? placeholder ?? label }),
-                  /* @__PURE__ */ (0, import_jsx_runtime160.jsxs)("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: [
-                    loading && /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(ThreeDotsLoader, { height: 18, width: 18 }),
-                    /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("span", { id: valueId, className: "block min-w-0 flex-1 truncate text-left", children: valueLabel ?? placeholder ?? label }),
+                  /* @__PURE__ */ (0, import_jsx_runtime161.jsxs)("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: [
+                    loading && /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(ThreeDotsLoader, { height: 18, width: 18 }),
+                    /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
                       import_lucide_react49.ChevronDown,
                       {
                         size: 16,
@@ -15095,7 +15175,7 @@ function DashboardInfiniteScrollSelectInternal({
                 ]
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
               Fieldset,
               {
                 isFocused: isOpen,
@@ -15112,15 +15192,17 @@ function DashboardInfiniteScrollSelectInternal({
                 onClick: !isBlocked ? toggleMenu : void 0
               }
             ),
-            isOpen && /* @__PURE__ */ (0, import_jsx_runtime160.jsxs)(
-              "div",
+            /* @__PURE__ */ (0, import_jsx_runtime161.jsxs)(
+              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__ */ (0, import_jsx_runtime160.jsx)("div", { className: "border-b border-[#f2f4f8] px-4 pb-2 pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(
+                  searchable && /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("div", { className: "border-b border-[#f2f4f8] px-4 pb-2 pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
                     "input",
                     {
                       ref: searchInputRef,
@@ -15135,13 +15217,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__ */ (0, import_jsx_runtime160.jsx)("div", { className: "px-4 py-[20px] text-left text-[16px] text-[var(--chekin-color-brand-navy)]", children: emptyMessage ?? "No options" }) : /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(
+                  itemCount === 0 ? /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("div", { className: "px-4 py-[20px] text-left text-[16px] text-[var(--chekin-color-brand-navy)]", children: emptyMessage ?? "No options" }) : /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
                     "div",
                     {
                       ref: scrollRef,
                       className: cn("overflow-y-auto", menuClassName),
                       style: { height: `${measuredListHeight}px` },
-                      children: /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(
+                      children: /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
                         "div",
                         {
                           id: listboxId,
@@ -15158,7 +15240,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__ */ (0, import_jsx_runtime160.jsx)(
+                            return /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
                               "div",
                               {
                                 "data-index": virtualItem.index,
@@ -15167,10 +15249,10 @@ function DashboardInfiniteScrollSelectInternal({
                                   height: `${virtualItem.size}px`,
                                   transform: `translateY(${virtualItem.start}px)`
                                 },
-                                children: isLoaderRow ? /* @__PURE__ */ (0, import_jsx_runtime160.jsxs)("div", { className: "flex h-full items-center justify-center gap-2 px-4 text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: [
-                                  /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(ThreeDotsLoader, { height: 18, width: 18 }),
-                                  /* @__PURE__ */ (0, import_jsx_runtime160.jsx)("span", { children: loadingMoreText })
-                                ] }) : /* @__PURE__ */ (0, import_jsx_runtime160.jsxs)(
+                                children: isLoaderRow ? /* @__PURE__ */ (0, import_jsx_runtime161.jsxs)("div", { className: "flex h-full items-center justify-center gap-2 px-4 text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: [
+                                  /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(ThreeDotsLoader, { height: 18, width: 18 }),
+                                  /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("span", { children: loadingMoreText })
+                                ] }) : /* @__PURE__ */ (0, import_jsx_runtime161.jsxs)(
                                   "button",
                                   {
                                     id: getOptionId2(virtualItem.index),
@@ -15189,8 +15271,8 @@ function DashboardInfiniteScrollSelectInternal({
                                       isOptionDisabled && "cursor-default opacity-30"
                                     ),
                                     children: [
-                                      /* @__PURE__ */ (0, import_jsx_runtime160.jsx)("span", { className: "block break-words", children: option?.label }),
-                                      option?.description && /* @__PURE__ */ (0, import_jsx_runtime160.jsx)("span", { className: "ml-2 mt-[3px] shrink-0 text-[12px] font-bold italic text-[#777e91]", children: option.description })
+                                      /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("span", { className: "block break-words", children: option?.label }),
+                                      option?.description && /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("span", { className: "ml-2 mt-[3px] shrink-0 text-[12px] font-bold italic text-[#777e91]", children: option.description })
                                     ]
                                   }
                                 )
@@ -15206,9 +15288,9 @@ function DashboardInfiniteScrollSelectInternal({
               }
             )
           ] }),
-          !errorMessage && optional && /* @__PURE__ */ (0, import_jsx_runtime160.jsx)("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__ */ (0, import_jsx_runtime160.jsx)("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
-          errorMessage && !hideErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(
+          !errorMessage && optional && /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : "optional" }),
+          !errorMessage && helperText && /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
+          errorMessage && !hideErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
             FieldErrorMessage,
             {
               id: errorId,
@@ -15230,7 +15312,7 @@ var React59 = __toESM(require("react"), 1);
 var import_lucide_react50 = require("lucide-react");
 var import_react_virtual3 = require("@tanstack/react-virtual");
 var import_react82 = require("react");
-var import_jsx_runtime161 = require("react/jsx-runtime");
+var import_jsx_runtime162 = require("react/jsx-runtime");
 var ROW_HEIGHT = 48;
 var DESKTOP_LIST_HEIGHT = 280;
 var MOBILE_LIST_HEIGHT = 420;
@@ -15399,7 +15481,7 @@ var SearchableSelectInternal = ({
       }
     }
   }
-  const content = /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
+  const content = /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(
     SearchableSelectContent,
     {
       inputId: searchInputId,
@@ -15427,9 +15509,9 @@ var SearchableSelectInternal = ({
     }
   );
   React59.useImperativeHandle(ref, () => triggerRef.current, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime161.jsxs)("div", { ref: containerRef, className: cn("relative w-full max-w-[425px]", className), children: [
-    name && /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
-    /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime162.jsxs)("div", { ref: containerRef, className: cn("relative w-full max-w-[425px]", className), children: [
+    name && /* @__PURE__ */ (0, import_jsx_runtime162.jsx)("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
+    /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(
       FieldTrigger,
       {
         id: `${reactId}-trigger`,
@@ -15464,7 +15546,7 @@ var SearchableSelectInternal = ({
         },
         onKeyDown: handleTriggerKeyDown,
         onBlur,
-        trailingAdornment: /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
+        trailingAdornment: /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(
           import_lucide_react50.ChevronDown,
           {
             className: cn(
@@ -15475,7 +15557,7 @@ var SearchableSelectInternal = ({
         )
       }
     ),
-    isMobile2 ? /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
+    isMobile2 ? /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(
       Drawer,
       {
         open,
@@ -15487,13 +15569,13 @@ var SearchableSelectInternal = ({
           }
           closeSelect();
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime161.jsxs)(DrawerContent, { onClose: closeSelect, lockScroll: false, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(DrawerTitle, { className: "sr-only", children: mobileTitle ?? label }),
-          /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(DrawerDescription, { className: "sr-only", children: label }),
-          /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("div", { className: "px-5 pb-5 pt-1", children: content })
+        children: /* @__PURE__ */ (0, import_jsx_runtime162.jsxs)(DrawerContent, { onClose: closeSelect, lockScroll: false, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(DrawerTitle, { className: "sr-only", children: mobileTitle ?? label }),
+          /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(DrawerDescription, { className: "sr-only", children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime162.jsx)("div", { className: "px-5 pb-5 pt-1", children: content })
         ] })
       }
-    ) : open ? /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
+    ) : open ? /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(
       "div",
       {
         className: cn(
@@ -15560,16 +15642,16 @@ function SearchableSelectContent({
       virtualizer.scrollToIndex(highlightedIndex, { align: "auto" });
     }
   }, [highlightedIndex, virtualizer]);
-  return /* @__PURE__ */ (0, import_jsx_runtime161.jsxs)("div", { className: "p-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime161.jsxs)("div", { className: "relative mb-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime162.jsxs)("div", { className: "p-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime162.jsxs)("div", { className: "relative mb-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(
         import_lucide_react50.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_runtime161.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(
         "input",
         {
           id: inputId,
@@ -15588,7 +15670,7 @@ function SearchableSelectContent({
         }
       )
     ] }),
-    loading && options.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("div", { className: "px-4 py-5 text-center text-base leading-6 text-[#6C6C6C]", children: loadingText }) : options.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("div", { className: "px-4 py-5 text-center text-base leading-6 text-[#6C6C6C]", children: emptyMessage }) : /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
+    loading && options.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime162.jsx)("div", { className: "px-4 py-5 text-center text-base leading-6 text-[#6C6C6C]", children: loadingText }) : options.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime162.jsx)("div", { className: "px-4 py-5 text-center text-base leading-6 text-[#6C6C6C]", children: emptyMessage }) : /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(
       "div",
       {
         id: listboxId,
@@ -15597,7 +15679,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_runtime161.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(
           "div",
           {
             className: "relative w-full",
@@ -15605,7 +15687,7 @@ function SearchableSelectContent({
             children: virtualItems.map((virtualItem) => {
               const option = options[virtualItem.index];
               if (!option) {
-                return /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(
                   "div",
                   {
                     className: "absolute left-0 top-0 flex w-full items-center px-4 text-base leading-6 text-[#6C6C6C]",
@@ -15620,7 +15702,7 @@ function SearchableSelectContent({
               }
               const isSelected = value?.value === option.value;
               const isHighlighted = virtualItem.index === highlightedIndex;
-              return /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime162.jsx)(
                 "button",
                 {
                   id: getOptionId(idPrefix, virtualItem.index),
@@ -15642,7 +15724,7 @@ function SearchableSelectContent({
                     height: `${virtualItem.size}px`,
                     transform: `translateY(${virtualItem.start}px)`
                   },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("span", { className: "truncate text-center", children: String(option.label) })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime162.jsx)("span", { className: "truncate text-center", children: String(option.label) })
                 },
                 `${String(option.value)}-${virtualItem.index}`
               );
@@ -15728,14 +15810,14 @@ function getErrorMessage(error) {
 
 // src/lib/toastResponseError.tsx
 var import_i18next = __toESM(require("i18next"), 1);
-var import_jsx_runtime162 = require("react/jsx-runtime");
+var import_jsx_runtime163 = require("react/jsx-runtime");
 function addSupportEmailToMessage(message, prefixText) {
   if (typeof message !== "string") {
     return message;
   }
   const builtMessage = `${prefixText ? `${prefixText} ` : ""}${message}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime162.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime162.jsx)("div", { children: builtMessage }),
+  return /* @__PURE__ */ (0, import_jsx_runtime163.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime163.jsx)("div", { children: builtMessage }),
     import_i18next.default.t("reach_us_at_email")
   ] });
 }