@chekinapp/ui 0.0.67 → 0.0.68

package/dist/index.cjs

@@ -77,6 +77,11 @@ __export(index_exports, {
   CopyString: () => CopyString,
   CustomCheckboxDropdownGroup: () => CustomCheckboxDropdownGroup,
   DEVICE_BREAKPOINTS: () => DEVICE_BREAKPOINTS,
+  DashboardCreatableMultiSelect: () => DashboardCreatableMultiSelect,
+  DashboardInfiniteScrollSelect: () => DashboardInfiniteScrollSelect,
+  DashboardInput: () => DashboardInput,
+  DashboardMultiSelect: () => DashboardMultiSelect,
+  DashboardSelect: () => DashboardSelect,
   DataTable: () => DataTable,
   DatePicker: () => DatePicker,
   DateTableFilter: () => DateTableFilter,
@@ -4894,8 +4899,9 @@ var iconButtonVariants = (0, import_class_variance_authority10.cva)(
     variants: {
       size: {
         s: "w-8 h-8",
-        m: "w-10 h-10",
-        l: "w-[43px] h-[43px]"
+        m: "w-8 h-8",
+        l: "w-[43px] h-[43px]",
+        default: "w-8 h-8"
       },
       shape: {
         rounded: "rounded-[var(--chekin-radius-input)]",
@@ -7407,13 +7413,13 @@ function SearchButton({ onClick, className, icon, ariaLabel }) {
     {
       onClick,
       className: cn(
-        "p-1.5 text-[var(--chekin-color-gray-1)] hover:text-[var(--chekin-color-brand-blue)]",
+        "p-1.5 text-[#9696b9] hover:text-[var(--chekin-color-brand-blue)]",
         className
       ),
       "data-testid": "search-button",
       "aria-label": ariaLabel,
       type: "button",
-      children: icon || /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(import_lucide_react26.Search, { size: 14, strokeWidth: 4 })
+      children: icon || /* @__PURE__ */ (0, import_jsx_runtime93.jsx)(import_lucide_react26.Search, { size: 12, strokeWidth: 4 })
     }
   );
 }
@@ -9747,11 +9753,23 @@ 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 [];
 };
+var convertStringToValue = (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 ((0, import_react76.isValidElement)(label)) {
     return (0, import_react76.cloneElement)(label, {
@@ -9788,7 +9806,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 option2 ? option2.value : item;
+        return convertStringToValue(item, option2);
       });
       onChange?.(
         typedValues,
@@ -9798,7 +9816,7 @@ function TogglesInternal({
     }
     const singleValue = Array.isArray(newValue) ? newValue[0] : newValue;
     const option = options.find((opt) => String(opt.value) === singleValue);
-    const typedValue = option ? option.value : singleValue;
+    const typedValue = convertStringToValue(singleValue, option);
     onChange?.(
       typedValue,
       {}
@@ -13642,259 +13660,1833 @@ var AirbnbSearchInput = React52.forwardRef(({ onReset, placeholder, wrapperClass
 });
 AirbnbSearchInput.displayName = "SearchInput";
 
-// src/searchable-select/SearchableSelect.tsx
+// src/dashboard/input/Input.tsx
 var React53 = __toESM(require("react"), 1);
 var import_lucide_react46 = require("lucide-react");
-var import_react_virtual2 = require("@tanstack/react-virtual");
-var import_react82 = require("react");
+
+// src/dashboard/_fieldset/Fieldset.tsx
 var import_jsx_runtime154 = require("react/jsx-runtime");
-var ROW_HEIGHT = 48;
-var DESKTOP_LIST_HEIGHT = 280;
-var MOBILE_LIST_HEIGHT = 420;
-var LOAD_MORE_THRESHOLD = 6;
-function defaultFilter(option, searchValue) {
-  return String(option.label).toLowerCase().includes(searchValue.trim().toLowerCase());
-}
-var SearchableSelectInternal = ({
-  options,
-  value,
-  onChange,
-  onBlur,
-  onOpenChange,
-  searchValue,
-  onSearchChange,
-  filterOption = defaultFilter,
-  loading,
-  hasNextPage,
-  onLoadMore,
-  variant = "default",
-  label,
-  topLabel,
-  placeholder,
-  searchPlaceholder = "Search...",
-  mobileTitle,
-  getValueLabel,
-  disabled,
-  error,
+function Fieldset({
+  isActivated,
+  isFocused,
+  isEmpty,
   invalid,
-  optional,
+  label,
   tooltip,
-  hideErrorMessage,
-  name,
+  legend,
+  onClick,
+  htmlFor,
+  labelId,
+  readOnly,
+  loading,
+  disabled,
   className,
-  dropdownClassName,
-  menuClassName,
-  noOptionsMessage,
-  loadingMessage
-}, ref) => {
-  const { isMatch: isMobile2 } = useScreenResize(DEVICE.mobileXL);
-  const reactId = React53.useId();
-  const [open, setOpen] = React53.useState(false);
-  const [internalSearchValue, setInternalSearchValue] = React53.useState("");
-  const [highlightedIndex, setHighlightedIndex] = React53.useState(-1);
-  const containerRef = React53.useRef(null);
-  const triggerRef = React53.useRef(null);
-  const inputRef = React53.useRef(null);
-  const listboxId = `${reactId}-listbox`;
-  const labelId = `${reactId}-label`;
-  const valueId = `${reactId}-value`;
-  const helperTextId = `${reactId}-helper`;
-  const errorId = `${reactId}-error`;
-  const searchInputId = `${reactId}-search`;
-  const effectiveSearchValue = searchValue ?? internalSearchValue;
-  const shouldFilterLocally = !onSearchChange && filterOption !== null;
-  const visibleOptions = React53.useMemo(() => {
-    if (!shouldFilterLocally || !effectiveSearchValue) {
-      return options;
-    }
-    return options.filter((option) => filterOption(option, effectiveSearchValue));
-  }, [effectiveSearchValue, filterOption, options, shouldFilterLocally]);
-  const selectedIndex = React53.useMemo(
-    () => visibleOptions.findIndex((option) => option.value === value?.value),
-    [value?.value, visibleOptions]
-  );
-  const helperText = placeholder ?? label;
-  const valueLabel = value ? getValueLabel?.(value) ?? String(value.label) : void 0;
-  const isBlocked = Boolean(disabled) || Boolean(loading);
-  const triggerError = error ?? invalid;
-  const describedBy = error && !hideErrorMessage ? errorId : void 0;
-  const activeOptionId = highlightedIndex >= 0 ? getOptionId(reactId, highlightedIndex) : void 0;
-  useOutsideClick({
-    elementRef: containerRef,
-    onOutsideClick: () => closeSelect(),
-    isDisabled: !open || isMobile2
-  });
-  const handleOnOpenChange = useEvent(onOpenChange);
-  const setSelectOpen = (0, import_react82.useCallback)(
-    (nextOpen, options2) => {
-      setOpen(nextOpen);
-      handleOnOpenChange?.(nextOpen);
-      if (!nextOpen && options2?.restoreFocus) {
-        triggerRef.current?.focus();
-      }
-    },
-    [handleOnOpenChange]
-  );
-  React53.useEffect(() => {
-    if (isBlocked) {
-      setSelectOpen(false);
-      return;
-    }
-    if (!open) return;
-    const frameId = window.requestAnimationFrame(() => {
-      inputRef.current?.focus();
-    });
-    return () => {
-      window.cancelAnimationFrame(frameId);
-    };
-  }, [isBlocked, open, setSelectOpen]);
-  React53.useEffect(() => {
-    if (!open) {
-      setHighlightedIndex(-1);
-      return;
-    }
-    setHighlightedIndex((currentIndex) => {
-      if (currentIndex >= 0 && currentIndex < visibleOptions.length && !visibleOptions[currentIndex]?.isDisabled) {
-        return currentIndex;
-      }
-      return selectedIndex >= 0 ? selectedIndex : getFirstEnabledIndex(visibleOptions);
-    });
-  }, [open, selectedIndex, visibleOptions]);
-  function openSelect() {
-    if (isBlocked) return;
-    setSelectOpen(true);
-  }
-  function closeSelect() {
-    setSelectOpen(false, { restoreFocus: true });
-  }
-  function handleSearchChange(nextValue) {
-    if (!onSearchChange) {
-      setInternalSearchValue(nextValue);
-    }
-    onSearchChange?.(nextValue);
-  }
-  function handleSelect(option) {
-    if (isBlocked || option.isDisabled) return;
-    onChange(option);
-    setSelectOpen(false, { restoreFocus: true });
-  }
-  function moveHighlight(step) {
-    const startIndex = highlightedIndex >= 0 ? highlightedIndex + step : step === 1 ? 0 : visibleOptions.length - 1;
-    const nextIndex = getNextEnabledIndex(visibleOptions, startIndex, step);
-    if (nextIndex >= 0) {
-      setHighlightedIndex(nextIndex);
-    }
-  }
-  function handleTriggerKeyDown(event) {
-    if (isBlocked) return;
-    if (event.key === "Enter" || event.key === " " || event.key === "ArrowDown" || event.key === "ArrowUp") {
-      event.preventDefault();
-      openSelect();
-    }
-  }
-  function handleSearchKeyDown(event) {
-    if (event.key === "Escape") {
-      event.preventDefault();
-      closeSelect();
-      return;
-    }
-    if (event.key === "ArrowDown") {
-      event.preventDefault();
-      moveHighlight(1);
-      return;
-    }
-    if (event.key === "ArrowUp") {
-      event.preventDefault();
-      moveHighlight(-1);
-      return;
-    }
-    if (event.key === "Enter") {
-      event.preventDefault();
-      const option = visibleOptions[highlightedIndex];
-      if (option) {
-        handleSelect(option);
+  labelClassName
+}) {
+  const showLegendText = Boolean(legend || typeof label === "string");
+  const raised = !isEmpty || isFocused;
+  return /* @__PURE__ */ (0, import_jsx_runtime154.jsxs)(import_jsx_runtime154.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime154.jsxs)(
+      "div",
+      {
+        onClick,
+        className: cn(
+          "absolute box-border inline-flex max-w-full cursor-text items-center pl-[3px] pr-5 transition-all duration-100 ease-in",
+          "left-[13px] text-[var(--chekin-color-gray-1)]",
+          isEmpty && !isFocused ? "top-[14px]" : "top-[-8px] !pl-1 !pr-[22px]",
+          isFocused && "text-[var(--chekin-color-brand-blue)]",
+          raised && invalid && "text-[var(--error-message-color)]",
+          readOnly && "cursor-default",
+          disabled && "pointer-events-none cursor-not-allowed",
+          loading && "cursor-progress",
+          labelClassName
+        ),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime154.jsx)(
+            "label",
+            {
+              id: labelId,
+              htmlFor,
+              className: cn(
+                "block cursor-[inherit] truncate font-medium transition-all duration-100 ease-in",
+                raised ? "text-[14px]" : "text-[16px]"
+              ),
+              children: label
+            }
+          ),
+          tooltip && /* @__PURE__ */ (0, import_jsx_runtime154.jsx)("span", { className: "ml-1 inline-flex", children: /* @__PURE__ */ (0, import_jsx_runtime154.jsx)(
+            HelpTooltip,
+            {
+              content: tooltip,
+              size: 16,
+              className: cn(isFocused && "text-[var(--chekin-color-brand-blue)]")
+            }
+          ) })
+        ]
       }
-    }
-  }
-  const content = /* @__PURE__ */ (0, import_jsx_runtime154.jsx)(
-    SearchableSelectContent,
-    {
-      inputId: searchInputId,
-      listboxId,
-      labelId,
-      activeOptionId,
-      inputRef,
-      options: visibleOptions,
-      value,
-      searchValue: effectiveSearchValue,
-      searchPlaceholder,
-      highlightedIndex,
-      loading,
-      hasNextPage,
-      onLoadMore,
-      menuClassName,
-      noOptionsMessage,
-      loadingMessage,
-      height: isMobile2 ? MOBILE_LIST_HEIGHT : DESKTOP_LIST_HEIGHT,
-      idPrefix: reactId,
-      onSearchChange: handleSearchChange,
-      onSearchKeyDown: handleSearchKeyDown,
-      onOptionClick: handleSelect,
-      onOptionHover: setHighlightedIndex
-    }
-  );
-  React53.useImperativeHandle(ref, () => triggerRef.current, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime154.jsxs)("div", { ref: containerRef, className: cn("relative w-full max-w-[425px]", className), children: [
-    name && /* @__PURE__ */ (0, import_jsx_runtime154.jsx)("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
+    ),
     /* @__PURE__ */ (0, import_jsx_runtime154.jsx)(
-      FieldTrigger,
+      "fieldset",
       {
-        id: `${reactId}-trigger`,
-        ref: triggerRef,
-        variant,
-        "aria-haspopup": "listbox",
-        "aria-expanded": open,
-        "aria-controls": listboxId,
-        label,
-        topLabel,
-        labelId,
-        valueId,
-        helperTextId,
-        errorId: error ? errorId : void 0,
-        labelText: topLabel ? helperText : void 0,
-        valueText: valueLabel,
-        placeholder: helperText,
-        describedBy,
-        error: triggerError,
-        loading,
-        optional,
-        tooltip,
-        forceLabelText: Boolean(optional) || Boolean(tooltip),
-        hideErrorMessage,
-        disabled,
-        onClick: () => {
-          if (open) {
-            closeSelect();
-            return;
-          }
-          openSelect();
-        },
-        onKeyDown: handleTriggerKeyDown,
-        onBlur,
-        trailingAdornment: /* @__PURE__ */ (0, import_jsx_runtime154.jsx)(
-          import_lucide_react46.ChevronDown,
+        "aria-hidden": "true",
+        className: cn(
+          "pointer-events-none absolute -top-[5px] bottom-0 left-0 right-0 m-0 min-w-0 rounded-[6px] border px-[13px] transition-colors duration-75",
+          "border-[var(--chekin-color-gray-3)]",
+          isActivated && "border-[var(--chekin-color-gray-2)]",
+          isFocused && "border-[var(--chekin-color-brand-blue)]",
+          invalid && "border-[var(--error-message-color)]",
+          className
+        ),
+        children: /* @__PURE__ */ (0, import_jsx_runtime154.jsxs)(
+          "legend",
           {
             className: cn(
-              "h-6 w-6 text-[#1F1F1B] transition-transform",
-              open && "rotate-180"
-            )
+              "invisible float-none block h-[11px] max-w-[0.01px] whitespace-nowrap p-0 text-[0.75em]",
+              "transition-[max-width] duration-[50ms] ease-out",
+              raised && "max-w-full !duration-100 !delay-[50ms]",
+              !label && "w-0"
+            ),
+            children: [
+              showLegendText && /* @__PURE__ */ (0, import_jsx_runtime154.jsx)("span", { className: "visible inline-block pr-[6px] text-[14px] font-medium opacity-0", children: legend || label }),
+              tooltip && /* @__PURE__ */ (0, import_jsx_runtime154.jsx)("span", { className: "visible inline-block w-[20px] opacity-0", children: /* @__PURE__ */ (0, import_jsx_runtime154.jsx)("span", { className: "inline-block h-4 w-4" }) })
+            ]
           }
         )
       }
-    ),
-    isMobile2 ? /* @__PURE__ */ (0, import_jsx_runtime154.jsx)(
-      Drawer,
-      {
+    )
+  ] });
+}
+
+// src/dashboard/input/Input.tsx
+var import_jsx_runtime155 = require("react/jsx-runtime");
+var checkIfEmpty = ({
+  empty,
+  defaultValue,
+  value
+}) => {
+  if (typeof empty !== "undefined") return empty;
+  if (value === 0 || defaultValue === 0) return false;
+  return !value && !defaultValue;
+};
+var DashboardInput = React53.forwardRef(
+  ({
+    value,
+    defaultValue,
+    className,
+    wrapperClassName,
+    fieldClassName,
+    contentClassName,
+    inputClassName,
+    label,
+    topLabel,
+    tooltip,
+    disabled,
+    loading,
+    readOnly,
+    name,
+    id,
+    type,
+    error,
+    optional = false,
+    invalid,
+    empty,
+    showNumberButtons,
+    onIncrement,
+    onDecrement,
+    sign,
+    footer,
+    width,
+    onReset,
+    onChange,
+    onFocus,
+    onBlur,
+    helperText,
+    placeholder,
+    leftIcon,
+    trailingAdornment,
+    renderErrorMessage = true,
+    ...props
+  }, ref) => {
+    const generatedId = React53.useId();
+    const inputId = id ?? name ?? generatedId;
+    const errorId = `${inputId}-error`;
+    const isEmpty = checkIfEmpty({ empty, value, defaultValue });
+    const [inputType, setInputType] = React53.useState(type);
+    const [isPasswordRevealed, setIsPasswordRevealed] = React53.useState(false);
+    const [isFocused, setIsFocused] = React53.useState(false);
+    const prevInputType = usePrevious(inputType);
+    const isPasswordReveal = (prevInputType === "password" || type === "password") && !isEmpty;
+    const hasInvalidState = Boolean(invalid) || Boolean(error) && error !== "NONE";
+    const errorMessage = typeof error === "string" && error !== "NONE" ? error : void 0;
+    const wrapperWidth = toCssSize(width);
+    const togglePasswordReveal = () => {
+      if (isPasswordRevealed) {
+        setInputType("password");
+        setIsPasswordRevealed(false);
+      } else {
+        setInputType("text");
+        setIsPasswordRevealed(true);
+      }
+    };
+    React53.useEffect(() => {
+      setInputType(type);
+    }, [type]);
+    const handleChange = (event) => {
+      if (readOnly || disabled || !onChange) return;
+      onChange(event);
+    };
+    const handleLabelClick = () => {
+      if (readOnly || disabled) return;
+      setIsFocused(true);
+    };
+    const handleFocus = (event) => {
+      if (readOnly || disabled) return;
+      onFocus?.(event);
+      setIsFocused(true);
+    };
+    const handleBlur = (event) => {
+      onBlur?.(event);
+      setIsFocused(false);
+    };
+    const showRightPaddingForReset = Boolean(onReset);
+    const showRightPaddingForReveal = isPasswordReveal;
+    return /* @__PURE__ */ (0, import_jsx_runtime155.jsxs)(
+      "div",
+      {
+        className: cn(
+          "relative block min-h-[68px]",
+          disabled && "cursor-not-allowed opacity-50",
+          loading && "cursor-progress",
+          wrapperClassName,
+          className
+        ),
+        style: wrapperWidth ? { width: wrapperWidth } : void 0,
+        children: [
+          topLabel && /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(
+            "label",
+            {
+              htmlFor: inputId,
+              className: "mb-2 block text-[14px] font-medium text-[var(--chekin-color-brand-navy)]",
+              children: topLabel
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime155.jsxs)(
+            "div",
+            {
+              className: cn(
+                "relative block w-full",
+                readOnly && "bg-[var(--chekin-color-surface-input-empty)]",
+                fieldClassName
+              ),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime155.jsxs)("div", { className: cn("relative w-full cursor-text", contentClassName), children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(
+                    Fieldset,
+                    {
+                      isFocused: isFocused && !readOnly,
+                      invalid: hasInvalidState,
+                      isEmpty,
+                      onClick: handleLabelClick,
+                      isActivated: !isEmpty || isFocused,
+                      readOnly,
+                      loading,
+                      disabled,
+                      htmlFor: inputId,
+                      labelId: `${inputId}-label`,
+                      legend: typeof label === "string" ? label : void 0,
+                      label,
+                      tooltip
+                    }
+                  ),
+                  leftIcon && /* @__PURE__ */ (0, import_jsx_runtime155.jsx)("span", { className: "pointer-events-none absolute left-0 top-0 flex h-full max-w-10 items-center justify-center text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ (0, import_jsx_runtime155.jsx)("span", { className: "flex h-full w-10 items-center justify-center", children: leftIcon }) }),
+                  /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(
+                    "input",
+                    {
+                      ...props,
+                      ref,
+                      id: inputId,
+                      name,
+                      type: inputType,
+                      "data-testid": "input",
+                      value,
+                      defaultValue,
+                      disabled: disabled || loading,
+                      readOnly,
+                      required: !optional,
+                      "aria-label": typeof label === "string" ? label : void 0,
+                      "aria-invalid": hasInvalidState,
+                      "aria-busy": loading,
+                      "aria-describedby": errorMessage && renderErrorMessage ? errorId : void 0,
+                      placeholder: isFocused || !label ? placeholder : void 0,
+                      onChange: handleChange,
+                      onFocus: handleFocus,
+                      onBlur: handleBlur,
+                      className: cn(
+                        "m-0 box-border h-12 w-full rounded-[6px] border-0 px-4 text-[16px] font-medium leading-5 text-[var(--chekin-color-brand-navy)] outline-none transition-colors duration-200 [text-overflow:ellipsis] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none",
+                        "placeholder:font-medium placeholder:text-[var(--chekin-color-gray-1)] placeholder:opacity-100",
+                        isEmpty && !isFocused ? "bg-[var(--chekin-color-surface-input-empty)]" : "bg-transparent",
+                        isEmpty && "text-[var(--chekin-color-gray-1)]",
+                        inputType === "password" && "[&:not(:placeholder-shown)]:font-bold [&:not(:placeholder-shown)]:tracking-[2px]",
+                        (disabled || readOnly) && "cursor-not-allowed",
+                        loading && "cursor-progress",
+                        leftIcon && "pl-10",
+                        (showRightPaddingForReset || showRightPaddingForReveal) && "pr-10",
+                        sign && "pr-10",
+                        inputClassName
+                      )
+                    }
+                  ),
+                  sign && /* @__PURE__ */ (0, import_jsx_runtime155.jsx)("span", { className: "pointer-events-none absolute right-[14px] top-0 flex h-full items-center text-[18px] font-medium leading-6 text-[var(--chekin-color-brand-navy)]", children: sign }),
+                  trailingAdornment && /* @__PURE__ */ (0, import_jsx_runtime155.jsx)("span", { className: "pointer-events-none absolute right-[14px] top-0 flex h-full items-center", children: trailingAdornment }),
+                  onReset && /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: onReset,
+                      disabled,
+                      className: "absolute right-0 top-0 flex h-full w-10 items-center justify-center border-0 bg-transparent p-0 text-[#9696b9] hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50",
+                      "aria-label": "Reset",
+                      children: /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(import_lucide_react46.X, { size: 14 })
+                    }
+                  ),
+                  isPasswordReveal && /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: togglePasswordReveal,
+                      className: "absolute right-[14px] top-[13px] flex h-[13px] w-[21px] cursor-pointer items-center justify-center border-0 bg-transparent p-0 hover:opacity-85",
+                      "aria-label": isPasswordRevealed ? "Hide password" : "Show password",
+                      children: /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(
+                        import_lucide_react46.Eye,
+                        {
+                          className: cn(
+                            "h-[13px] w-[21px]",
+                            isPasswordRevealed ? "text-[#fc98dd]" : "text-[var(--chekin-color-gray-2)]"
+                          )
+                        }
+                      )
+                    }
+                  )
+                ] }),
+                type === "number" && showNumberButtons && /* @__PURE__ */ (0, import_jsx_runtime155.jsxs)("div", { className: "absolute right-[18px] top-[10px] inline-flex items-center text-right", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: onDecrement,
+                      className: "mr-2 inline-flex h-[23px] w-8 cursor-pointer items-center justify-center rounded-[3px] border-0 bg-[var(--chekin-color-brand-blue)] p-0 text-[20px] font-bold text-white outline-none hover:opacity-90 active:opacity-100",
+                      "aria-label": "Decrement",
+                      children: /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(import_lucide_react46.Minus, { size: 16, strokeWidth: 3, "aria-hidden": true })
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: onIncrement,
+                      className: "inline-flex h-[23px] w-8 cursor-pointer items-center justify-center rounded-[3px] border-0 bg-[var(--chekin-color-brand-blue)] p-0 text-[20px] font-bold text-white outline-none hover:opacity-90 active:opacity-100",
+                      "aria-label": "Increment",
+                      children: /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(import_lucide_react46.Plus, { size: 16, strokeWidth: 3, "aria-hidden": true })
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
+          !errorMessage && optional && /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(
+            "span",
+            {
+              "data-testid": `${name}-optional`,
+              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_runtime155.jsx)("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
+          errorMessage && renderErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(
+            FieldErrorMessage,
+            {
+              id: errorId,
+              message: errorMessage,
+              "data-testid": name ? `${name}-error` : void 0,
+              className: "mt-[1px] text-[14px]"
+            }
+          ),
+          footer
+        ]
+      }
+    );
+  }
+);
+DashboardInput.displayName = "DashboardInput";
+
+// src/dashboard/select/Select.tsx
+var React55 = __toESM(require("react"), 1);
+var import_lucide_react47 = require("lucide-react");
+
+// src/dashboard/_select-internals/utils.ts
+function getOptionIndex2(options, option) {
+  if (!option) return -1;
+  return options.findIndex((item) => item.value === option.value);
+}
+function getFirstEnabledOptionIndex2(options) {
+  return options.findIndex((option) => !option.isDisabled);
+}
+function getNextEnabledOptionIndex2(options, startIndex, step) {
+  let nextIndex = startIndex;
+  while (nextIndex >= 0 && nextIndex < options.length) {
+    if (!options[nextIndex]?.isDisabled) return nextIndex;
+    nextIndex += step;
+  }
+  return -1;
+}
+function defaultFilterOption(option, input) {
+  if (!input) return true;
+  const text = typeof option.label === "string" ? option.label : String(option.value);
+  return text.toLowerCase().includes(input.toLowerCase());
+}
+function isOptionSelected(option, selectedValue, selectedValues) {
+  if (selectedValues?.length) {
+    return selectedValues.some((item) => item.value === option.value);
+  }
+  return selectedValue?.value === option.value;
+}
+
+// src/dashboard/_select-internals/SelectMenu.tsx
+var import_jsx_runtime156 = require("react/jsx-runtime");
+function SelectMenu({
+  id,
+  options,
+  labelledBy,
+  describedBy,
+  selectedValue,
+  selectedValues,
+  highlightedIndex,
+  onOptionClick,
+  onOptionHover,
+  onKeyDown,
+  disabled,
+  menuClassName,
+  listRef,
+  selectedOptionRef,
+  getOptionId: getOptionId2,
+  noOptionsMessage,
+  isMulti,
+  emptyContent,
+  footer
+}) {
+  const emptyMessage = noOptionsMessage?.();
+  const hasOptions = options.length > 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime156.jsxs)(
+    "div",
+    {
+      id,
+      ref: listRef,
+      role: "listbox",
+      tabIndex: -1,
+      "aria-labelledby": labelledBy,
+      "aria-describedby": describedBy,
+      "aria-multiselectable": isMulti,
+      "aria-activedescendant": highlightedIndex !== void 0 && highlightedIndex >= 0 ? getOptionId2(highlightedIndex) : void 0,
+      onKeyDown,
+      className: cn(
+        "h-auto max-h-[322px] min-h-[75px] overflow-y-auto px-4 pb-[19px] pt-[17px] outline-none",
+        menuClassName
+      ),
+      children: [
+        !hasOptions && emptyMessage && /* @__PURE__ */ (0, import_jsx_runtime156.jsx)("div", { className: "mt-[10px] text-left text-[16px] text-[var(--chekin-color-brand-navy)]", children: emptyMessage }),
+        !hasOptions && !emptyMessage && emptyContent,
+        options.map((option, index) => {
+          const isSelected = isOptionSelected(option, selectedValue, selectedValues);
+          const isHighlighted = index === highlightedIndex;
+          const optionKey = `${String(option.value)}-${index}`;
+          const isOptionDisabled = Boolean(disabled || option.isDisabled);
+          return /* @__PURE__ */ (0, import_jsx_runtime156.jsxs)(
+            "button",
+            {
+              id: getOptionId2(index),
+              ref: (node) => {
+                selectedOptionRef?.(index, node);
+              },
+              type: "button",
+              role: "option",
+              "aria-selected": isSelected,
+              "aria-disabled": isOptionDisabled,
+              tabIndex: -1,
+              disabled: isOptionDisabled,
+              onClick: () => onOptionClick(option),
+              onMouseMove: () => onOptionHover?.(index),
+              className: cn(
+                "flex w-full items-start justify-between border-0 border-b border-[#f2f4f8] bg-white px-4 py-[20px] text-left text-[16px] font-medium leading-5 text-[var(--chekin-color-brand-navy)] outline-none transition-colors",
+                "last:border-b-transparent",
+                isHighlighted && !isSelected && "cursor-pointer text-[var(--chekin-color-brand-blue)]",
+                isSelected && "cursor-default font-bold text-[var(--chekin-color-brand-navy)]",
+                isOptionDisabled && "cursor-default opacity-30"
+              ),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime156.jsx)("span", { className: "block break-words", children: option.label }),
+                option.description && /* @__PURE__ */ (0, import_jsx_runtime156.jsx)("span", { className: "ml-2 mt-[3px] shrink-0 text-[12px] font-bold italic text-[#777e91]", children: option.description })
+              ]
+            },
+            optionKey
+          );
+        }),
+        footer
+      ]
+    }
+  );
+}
+
+// src/dashboard/_select-internals/useSelectIds.ts
+var React54 = __toESM(require("react"), 1);
+function useSelectIds2({
+  name,
+  hasValue,
+  error,
+  hideErrorMessage
+}) {
+  const reactId = React54.useId().replace(/:/g, "");
+  const baseId = name ? `dash-select-${name}` : `dash-select-${reactId}`;
+  const triggerId = `${baseId}-trigger`;
+  const labelId = `${baseId}-label`;
+  const valueId = `${baseId}-value`;
+  const helperTextId = `${baseId}-helper`;
+  const errorId = `${baseId}-error`;
+  const listboxId = `${baseId}-listbox`;
+  const describedErrorId = error && !hideErrorMessage ? errorId : void 0;
+  const describedBy = [!hasValue ? helperTextId : null, describedErrorId].filter(Boolean).join(" ") || void 0;
+  const getOptionId2 = React54.useCallback(
+    (index) => `${baseId}-option-${index}`,
+    [baseId]
+  );
+  return {
+    triggerId,
+    labelId,
+    valueId,
+    helperTextId,
+    errorId,
+    describedErrorId,
+    listboxId,
+    describedBy,
+    getOptionId: getOptionId2
+  };
+}
+
+// src/dashboard/select/Select.tsx
+var import_jsx_runtime157 = require("react/jsx-runtime");
+function DashboardSelectInternal({
+  options = [],
+  value,
+  onChange,
+  onBlur,
+  label,
+  topLabel,
+  placeholder,
+  getValueLabel,
+  disabled,
+  loading,
+  optional,
+  tooltip,
+  error,
+  invalid,
+  hideErrorMessage,
+  className,
+  menuClassName,
+  dropdownClassName,
+  name,
+  width,
+  noOptionsMessage,
+  searchable = true,
+  searchPlaceholder,
+  filterOption = defaultFilterOption,
+  helperText
+}, ref) {
+  const containerRef = React55.useRef(null);
+  const triggerRef = React55.useRef(null);
+  const searchInputRef = React55.useRef(null);
+  const listRef = React55.useRef(null);
+  const optionRefs = React55.useRef([]);
+  const [isOpen, setIsOpen] = React55.useState(false);
+  const [searchValue, setSearchValue] = React55.useState("");
+  const [highlightedIndex, setHighlightedIndex] = React55.useState(-1);
+  const hasValue = Boolean(value);
+  const isEmpty = !hasValue;
+  const isBlocked = Boolean(disabled) || Boolean(loading);
+  const triggerError = error ?? invalid;
+  const hasInvalidState = Boolean(triggerError);
+  const errorMessage = typeof error === "string" ? error : void 0;
+  const wrapperWidth = toCssSize(width);
+  const valueLabel = value ? getValueLabel?.(value) ?? String(value.label) : void 0;
+  const { triggerId, labelId, valueId, listboxId, describedErrorId, errorId, getOptionId: getOptionId2 } = useSelectIds2({ name, hasValue, error, hideErrorMessage });
+  const filteredOptions = React55.useMemo(() => {
+    if (!searchable || !searchValue) return options;
+    return options.filter((option) => filterOption(option, searchValue));
+  }, [options, searchable, searchValue, filterOption]);
+  React55.useImperativeHandle(ref, () => triggerRef.current, []);
+  useOutsideClick({
+    elementRef: containerRef,
+    onOutsideClick: () => setIsOpen(false),
+    isDisabled: !isOpen
+  });
+  React55.useEffect(() => {
+    if (isBlocked) setIsOpen(false);
+  }, [isBlocked]);
+  React55.useEffect(() => {
+    if (!isOpen) {
+      setSearchValue("");
+      setHighlightedIndex(-1);
+      return;
+    }
+    const selectedIndex = getOptionIndex2(filteredOptions, value);
+    setHighlightedIndex(
+      selectedIndex >= 0 ? selectedIndex : getFirstEnabledOptionIndex2(filteredOptions)
+    );
+    if (searchable) {
+      const frame = window.requestAnimationFrame(() => searchInputRef.current?.focus());
+      return () => window.cancelAnimationFrame(frame);
+    }
+  }, [isOpen, filteredOptions, searchable, value]);
+  React55.useEffect(() => {
+    if (!isOpen || highlightedIndex < 0) return;
+    optionRefs.current[highlightedIndex]?.scrollIntoView({ block: "nearest" });
+  }, [highlightedIndex, isOpen]);
+  React55.useEffect(
+    function setCorrectOptionIfThereIsOnlyValue() {
+      if (value?.value === void 0 || value.value === null || value.label !== "")
+        return;
+      const validOption = options.find((option) => option.value === value.value);
+      if (validOption) onChange(validOption);
+    },
+    [onChange, options, value]
+  );
+  const toggleMenu = () => {
+    if (isBlocked) return;
+    setIsOpen((prev) => !prev);
+  };
+  const handleSelect = (option) => {
+    if (option.isDisabled) return;
+    onChange(option);
+    setIsOpen(false);
+    triggerRef.current?.focus();
+  };
+  const handleTriggerKeyDown = (event) => {
+    if (isBlocked) return;
+    if (event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      setIsOpen(true);
+    }
+  };
+  const handleSearchKeyDown = (event) => {
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      const next = getNextEnabledOptionIndex2(filteredOptions, highlightedIndex + 1, 1);
+      if (next >= 0) setHighlightedIndex(next);
+      return;
+    }
+    if (event.key === "ArrowUp") {
+      event.preventDefault();
+      const next = getNextEnabledOptionIndex2(filteredOptions, highlightedIndex - 1, -1);
+      if (next >= 0) setHighlightedIndex(next);
+      return;
+    }
+    if (event.key === "Enter") {
+      event.preventDefault();
+      const option = filteredOptions[highlightedIndex];
+      if (option && !option.isDisabled) handleSelect(option);
+      return;
+    }
+    if (event.key === "Escape") {
+      event.preventDefault();
+      setIsOpen(false);
+      triggerRef.current?.focus();
+      return;
+    }
+    if (event.key === "Tab") {
+      setIsOpen(false);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime157.jsxs)(
+    "div",
+    {
+      ref: containerRef,
+      className: cn(
+        "relative w-full max-w-[var(--max-field-width)]",
+        disabled && "cursor-not-allowed opacity-50",
+        loading && "cursor-progress",
+        className
+      ),
+      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)(
+            "label",
+            {
+              htmlFor: triggerId,
+              className: "mb-2 block text-[14px] font-medium text-[var(--chekin-color-brand-navy)]",
+              children: topLabel
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime157.jsxs)("div", { className: "relative w-full", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime157.jsxs)(
+              "button",
+              {
+                id: triggerId,
+                ref: triggerRef,
+                type: "button",
+                "aria-haspopup": "listbox",
+                "aria-expanded": isOpen,
+                "aria-controls": listboxId,
+                "aria-labelledby": hasValue && valueId ? `${labelId} ${valueId}` : labelId,
+                "aria-describedby": describedErrorId,
+                "aria-invalid": hasInvalidState,
+                "aria-busy": loading,
+                disabled: isBlocked,
+                onClick: toggleMenu,
+                onKeyDown: handleTriggerKeyDown,
+                onBlur,
+                className: cn(
+                  "relative m-0 box-border flex h-12 w-full cursor-pointer items-center justify-between gap-2 rounded-[6px] border-0 px-4 text-left text-[16px] font-medium leading-5 outline-none transition-colors duration-200",
+                  isEmpty ? "bg-[var(--chekin-color-surface-input-empty)] text-[var(--chekin-color-gray-1)]" : "bg-transparent text-[var(--chekin-color-brand-navy)]",
+                  disabled && "cursor-not-allowed opacity-50",
+                  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)(
+                      import_lucide_react47.ChevronDown,
+                      {
+                        size: 16,
+                        className: cn(
+                          "transition-transform duration-200",
+                          isOpen && "rotate-180 text-[var(--chekin-color-brand-blue)]"
+                        )
+                      }
+                    )
+                  ] })
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime157.jsx)(
+              Fieldset,
+              {
+                isFocused: isOpen,
+                invalid: hasInvalidState,
+                isEmpty,
+                isActivated: !isEmpty || isOpen,
+                disabled,
+                loading,
+                htmlFor: triggerId,
+                labelId,
+                legend: typeof label === "string" ? label : void 0,
+                label,
+                tooltip,
+                onClick: !isBlocked ? toggleMenu : void 0
+              }
+            ),
+            isOpen && /* @__PURE__ */ (0, import_jsx_runtime157.jsxs)(
+              "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)]",
+                  dropdownClassName
+                ),
+                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)(
+                    "input",
+                    {
+                      ref: searchInputRef,
+                      type: "text",
+                      value: searchValue,
+                      placeholder: searchPlaceholder,
+                      onChange: (event) => setSearchValue(event.target.value),
+                      onKeyDown: handleSearchKeyDown,
+                      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_runtime157.jsx)(
+                    SelectMenu,
+                    {
+                      id: listboxId,
+                      options: filteredOptions,
+                      labelledBy: labelId,
+                      describedBy: describedErrorId,
+                      selectedValue: value,
+                      highlightedIndex,
+                      onOptionClick: handleSelect,
+                      onOptionHover: setHighlightedIndex,
+                      disabled: isBlocked,
+                      menuClassName,
+                      listRef,
+                      selectedOptionRef: (index, node) => {
+                        optionRefs.current[index] = node;
+                      },
+                      getOptionId: getOptionId2,
+                      noOptionsMessage
+                    }
+                  )
+                ]
+              }
+            )
+          ] }),
+          !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)(
+            FieldErrorMessage,
+            {
+              id: errorId,
+              message: errorMessage,
+              className: "mt-[1px] text-[14px]"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+var DashboardSelect = React55.forwardRef(
+  DashboardSelectInternal
+);
+
+// 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 isValueSelected = (selected, option) => selected.some((item) => item.value === option.value);
+function DashboardMultiSelectInternal({
+  options = [],
+  value,
+  onChange,
+  onBlur,
+  label,
+  topLabel,
+  placeholder,
+  disabled,
+  readOnly,
+  loading,
+  optional,
+  tooltip,
+  error,
+  invalid,
+  hideErrorMessage,
+  className,
+  menuClassName,
+  dropdownClassName,
+  name,
+  width,
+  noOptionsMessage,
+  filterOption = defaultFilterOption,
+  closeMenuOnSelect = false,
+  renderChip,
+  helperText,
+  isCreatable = false,
+  onCreateOption,
+  formatCreateLabel = (input) => `Create "${input}"`,
+  isValidNewOption
+}, ref) {
+  const containerRef = React56.useRef(null);
+  const inputRef = 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 selectedValues = React56.useMemo(() => value ?? [], [value]);
+  const hasValue = selectedValues.length > 0;
+  const isEmpty = !hasValue;
+  const isBlocked = Boolean(disabled) || Boolean(loading) || Boolean(readOnly);
+  const triggerError = error ?? invalid;
+  const hasInvalidState = Boolean(triggerError);
+  const errorMessage = typeof error === "string" ? error : void 0;
+  const wrapperWidth = toCssSize(width);
+  const { triggerId, labelId, valueId, listboxId, describedErrorId, errorId, getOptionId: getOptionId2 } = useSelectIds2({ name, hasValue, error, hideErrorMessage });
+  const filteredOptions = React56.useMemo(
+    () => options.filter((option) => filterOption(option, searchValue)),
+    [options, searchValue, filterOption]
+  );
+  const trimmedSearch = searchValue.trim();
+  const canCreateNewOption = React56.useMemo(() => {
+    if (!isCreatable || !trimmedSearch) return false;
+    if (isValidNewOption) return isValidNewOption(trimmedSearch, selectedValues, options);
+    const lower = trimmedSearch.toLowerCase();
+    const existsInOptions = options.some(
+      (option) => typeof option.label === "string" && option.label.toLowerCase() === lower
+    );
+    const existsInSelected = selectedValues.some(
+      (option) => typeof option.label === "string" && option.label.toLowerCase() === lower
+    );
+    return !existsInOptions && !existsInSelected;
+  }, [isCreatable, trimmedSearch, isValidNewOption, options, selectedValues]);
+  React56.useImperativeHandle(
+    ref,
+    () => containerRef.current
+  );
+  useOutsideClick({
+    elementRef: containerRef,
+    onOutsideClick: () => {
+      setIsOpen(false);
+      setIsFocused(false);
+    },
+    isDisabled: !isOpen
+  });
+  React56.useEffect(() => {
+    if (isBlocked) setIsOpen(false);
+  }, [isBlocked]);
+  React56.useEffect(() => {
+    if (!isOpen) {
+      setSearchValue("");
+      setHighlightedIndex(-1);
+    }
+  }, [isOpen]);
+  React56.useEffect(() => {
+    if (!isOpen || filteredOptions.length === 0) {
+      setHighlightedIndex(-1);
+      return;
+    }
+    setHighlightedIndex((current) => {
+      if (current >= 0 && current < filteredOptions.length) return current;
+      return getFirstEnabledOptionIndex2(filteredOptions);
+    });
+  }, [isOpen, filteredOptions]);
+  const openMenu = () => {
+    if (isBlocked) return;
+    setIsOpen(true);
+    setIsFocused(true);
+  };
+  const toggleOption = (option) => {
+    if (option.isDisabled) return;
+    const exists = isValueSelected(selectedValues, option);
+    const next = exists ? selectedValues.filter((item) => item.value !== option.value) : [...selectedValues, option];
+    onChange(next);
+    setSearchValue("");
+    if (closeMenuOnSelect) {
+      setIsOpen(false);
+    } else {
+      inputRef.current?.focus();
+    }
+  };
+  const removeOption = (option) => {
+    if (isBlocked) return;
+    onChange(selectedValues.filter((item) => item.value !== option.value));
+    inputRef.current?.focus();
+  };
+  const clearAll = () => {
+    if (isBlocked) return;
+    onChange([]);
+    inputRef.current?.focus();
+  };
+  const createOption = React56.useCallback(() => {
+    if (!canCreateNewOption) return;
+    const newOption = onCreateOption?.(trimmedSearch) ?? { value: trimmedSearch, label: trimmedSearch };
+    onChange([...selectedValues, newOption]);
+    setSearchValue("");
+    inputRef.current?.focus();
+    if (closeMenuOnSelect) setIsOpen(false);
+  }, [
+    canCreateNewOption,
+    closeMenuOnSelect,
+    onChange,
+    onCreateOption,
+    selectedValues,
+    trimmedSearch
+  ]);
+  const handleInputKeyDown = (event) => {
+    if (event.key === "Backspace" && !searchValue && selectedValues.length > 0) {
+      event.preventDefault();
+      onChange(selectedValues.slice(0, -1));
+      return;
+    }
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      if (!isOpen) {
+        openMenu();
+        return;
+      }
+      const next = getNextEnabledOptionIndex2(filteredOptions, highlightedIndex + 1, 1);
+      if (next >= 0) setHighlightedIndex(next);
+      return;
+    }
+    if (event.key === "ArrowUp") {
+      event.preventDefault();
+      if (!isOpen) {
+        openMenu();
+        return;
+      }
+      const next = getNextEnabledOptionIndex2(filteredOptions, highlightedIndex - 1, -1);
+      if (next >= 0) setHighlightedIndex(next);
+      return;
+    }
+    if (event.key === "Enter") {
+      if (!isOpen) return;
+      event.preventDefault();
+      const option = filteredOptions[highlightedIndex];
+      if (option && !option.isDisabled) {
+        toggleOption(option);
+      } else if (canCreateNewOption) {
+        createOption();
+      }
+      return;
+    }
+    if (event.key === "Escape") {
+      event.preventDefault();
+      setIsOpen(false);
+    }
+  };
+  const handleContainerClick = () => {
+    if (isBlocked) return;
+    inputRef.current?.focus();
+    setIsOpen(true);
+  };
+  const handleInputBlur = (event) => {
+    if (containerRef.current?.contains(event.relatedTarget)) return;
+    setIsFocused(false);
+    onBlur?.(event);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime158.jsxs)(
+    "div",
+    {
+      ref: containerRef,
+      onBlur: handleInputBlur,
+      className: cn(
+        "relative min-h-[68px] w-full max-w-[var(--max-field-width)]",
+        disabled && "cursor-not-allowed opacity-50",
+        loading && "cursor-progress",
+        className
+      ),
+      style: wrapperWidth ? { width: wrapperWidth } : void 0,
+      children: [
+        topLabel && /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
+          "label",
+          {
+            htmlFor: triggerId,
+            className: "mb-2 block text-[14px] font-medium text-[var(--chekin-color-brand-navy)]",
+            children: topLabel
+          }
+        ),
+        name && /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
+          "input",
+          {
+            type: "hidden",
+            name,
+            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)(
+            "div",
+            {
+              id: triggerId,
+              role: "combobox",
+              "aria-haspopup": "listbox",
+              "aria-expanded": isOpen,
+              "aria-controls": listboxId,
+              "aria-labelledby": hasValue && valueId ? `${labelId} ${valueId}` : labelId,
+              "aria-describedby": describedErrorId,
+              "aria-invalid": hasInvalidState,
+              "aria-busy": loading,
+              "aria-disabled": isBlocked,
+              onClick: handleContainerClick,
+              className: cn(
+                "relative box-border flex w-full cursor-text flex-wrap items-center gap-2 rounded-[6px] border-0 px-4 py-[10px] text-left text-[16px] font-medium leading-5 outline-none transition-colors duration-200",
+                "min-h-12",
+                isEmpty && !isFocused ? "bg-[var(--chekin-color-surface-input-empty)]" : "bg-transparent",
+                disabled && "cursor-not-allowed",
+                loading && "cursor-progress"
+              ),
+              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)(
+                    "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)(
+                          "button",
+                          {
+                            type: "button",
+                            onClick: (event) => {
+                              event.stopPropagation();
+                              removeOption(option);
+                            },
+                            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 })
+                          }
+                        )
+                      ]
+                    },
+                    String(option.value)
+                  )
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
+                  "input",
+                  {
+                    ref: inputRef,
+                    type: "text",
+                    id: `${triggerId}-input`,
+                    value: searchValue,
+                    onChange: (event) => {
+                      setSearchValue(event.target.value);
+                      if (!isOpen) setIsOpen(true);
+                    },
+                    onFocus: () => {
+                      setIsFocused(true);
+                      if (!isBlocked) setIsOpen(true);
+                    },
+                    onKeyDown: handleInputKeyDown,
+                    disabled: isBlocked,
+                    readOnly,
+                    placeholder: hasValue ? "" : placeholder ?? "",
+                    autoComplete: "off",
+                    className: cn(
+                      "m-0 box-border min-w-[40px] flex-1 border-0 bg-transparent p-0 text-[16px] font-medium leading-5 text-[var(--chekin-color-brand-navy)] outline-none placeholder:text-[var(--chekin-color-gray-1)]",
+                      isBlocked && "cursor-not-allowed"
+                    ),
+                    "aria-autocomplete": "list",
+                    "aria-controls": listboxId,
+                    "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)(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: (event) => {
+                        event.stopPropagation();
+                        clearAll();
+                      },
+                      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 })
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
+                    RotateArrow,
+                    {
+                      shouldRotate: isOpen,
+                      className: cn(
+                        isFocused || isOpen ? "text-[var(--chekin-color-brand-blue)]" : "text-[var(--chekin-color-gray-2)]"
+                      )
+                    }
+                  )
+                ] })
+              ]
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
+            Fieldset,
+            {
+              isFocused: isFocused || isOpen,
+              invalid: hasInvalidState,
+              isEmpty: isEmpty && !searchValue,
+              isActivated: !isEmpty || isFocused || isOpen || Boolean(searchValue),
+              disabled,
+              loading,
+              readOnly,
+              htmlFor: `${triggerId}-input`,
+              labelId,
+              legend: typeof label === "string" ? label : void 0,
+              label,
+              tooltip,
+              onClick: handleContainerClick
+            }
+          ),
+          isOpen && /* @__PURE__ */ (0, import_jsx_runtime158.jsxs)(
+            "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)]",
+                dropdownClassName
+              ),
+              children: [
+                /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
+                  SelectMenu,
+                  {
+                    id: listboxId,
+                    options: filteredOptions,
+                    labelledBy: labelId,
+                    describedBy: describedErrorId,
+                    selectedValues,
+                    highlightedIndex,
+                    onOptionClick: toggleOption,
+                    onOptionHover: setHighlightedIndex,
+                    disabled: isBlocked,
+                    menuClassName,
+                    listRef,
+                    selectedOptionRef: (index, node) => {
+                      optionRefs.current[index] = node;
+                    },
+                    getOptionId: getOptionId2,
+                    noOptionsMessage,
+                    isMulti: true
+                  }
+                ),
+                canCreateNewOption && /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: createOption,
+                    className: "flex w-full items-center justify-start border-0 border-t border-[#f2f4f8] bg-white px-4 py-[16px] text-left text-[16px] font-medium leading-5 text-[var(--chekin-color-brand-blue)] outline-none hover:bg-[var(--chekin-color-surface-pressed)]",
+                    children: formatCreateLabel(trimmedSearch)
+                  }
+                )
+              ]
+            }
+          )
+        ] }),
+        !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,
+            message: errorMessage,
+            className: "mt-[1px] text-[14px]"
+          }
+        )
+      ]
+    }
+  );
+}
+var DashboardMultiSelect = React56.forwardRef(
+  DashboardMultiSelectInternal
+);
+
+// src/dashboard/creatable-multi-select/CreatableMultiSelect.tsx
+var React57 = __toESM(require("react"), 1);
+var import_jsx_runtime159 = require("react/jsx-runtime");
+var DashboardCreatableMultiSelect = React57.forwardRef(
+  function DashboardCreatableMultiSelect2(props, ref) {
+    return /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(DashboardMultiSelect, { ref, ...props, isCreatable: true });
+  }
+);
+
+// src/dashboard/infinite-scroll-select/InfiniteScrollSelect.tsx
+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 DEFAULT_ITEM_HEIGHT = 60;
+var DEFAULT_LIST_HEIGHT = 322;
+var DEFAULT_OVERSCAN = 5;
+var DEFAULT_LOAD_MORE_THRESHOLD = 5;
+function DashboardInfiniteScrollSelectInternal({
+  options = [],
+  value,
+  onChange,
+  onBlur,
+  label,
+  topLabel,
+  placeholder,
+  getValueLabel,
+  disabled,
+  loading,
+  optional,
+  tooltip,
+  error,
+  invalid,
+  hideErrorMessage,
+  className,
+  menuClassName,
+  dropdownClassName,
+  name,
+  width,
+  noOptionsMessage,
+  searchable = true,
+  searchPlaceholder,
+  filterOption = defaultFilterOption,
+  helperText,
+  canLoadMore,
+  isLoadingMore,
+  loadMoreItems,
+  loadingMoreText = "Loading\u2026",
+  onSearchChange,
+  itemHeight = DEFAULT_ITEM_HEIGHT,
+  listHeight = DEFAULT_LIST_HEIGHT,
+  overscan = DEFAULT_OVERSCAN,
+  loadMoreThreshold = DEFAULT_LOAD_MORE_THRESHOLD
+}, ref) {
+  const containerRef = React58.useRef(null);
+  const triggerRef = React58.useRef(null);
+  const searchInputRef = React58.useRef(null);
+  const scrollRef = React58.useRef(null);
+  const [isOpen, setIsOpen] = React58.useState(false);
+  const [searchValue, setSearchValue] = React58.useState("");
+  const [highlightedIndex, setHighlightedIndex] = React58.useState(-1);
+  const hasValue = Boolean(value);
+  const isEmpty = !hasValue;
+  const isBlocked = Boolean(disabled) || Boolean(loading);
+  const triggerError = error ?? invalid;
+  const hasInvalidState = Boolean(triggerError);
+  const errorMessage = typeof error === "string" ? error : void 0;
+  const wrapperWidth = toCssSize(width);
+  const valueLabel = value ? getValueLabel?.(value) ?? String(value.label) : void 0;
+  const { triggerId, labelId, valueId, listboxId, describedErrorId, errorId, getOptionId: getOptionId2 } = useSelectIds2({ name, hasValue, error, hideErrorMessage });
+  const filteredOptions = React58.useMemo(() => {
+    if (!searchable || !searchValue) return options;
+    return options.filter((option) => filterOption(option, searchValue));
+  }, [options, searchable, searchValue, filterOption]);
+  const itemCount = filteredOptions.length + (canLoadMore || isLoadingMore ? 1 : 0);
+  const virtualizer = (0, import_react_virtual2.useVirtualizer)({
+    count: itemCount,
+    getScrollElement: () => scrollRef.current,
+    estimateSize: () => itemHeight,
+    overscan
+  });
+  React58.useImperativeHandle(ref, () => triggerRef.current, []);
+  useOutsideClick({
+    elementRef: containerRef,
+    onOutsideClick: () => setIsOpen(false),
+    isDisabled: !isOpen
+  });
+  React58.useEffect(() => {
+    if (isBlocked) setIsOpen(false);
+  }, [isBlocked]);
+  React58.useEffect(() => {
+    if (!isOpen) {
+      setSearchValue("");
+      setHighlightedIndex(-1);
+      return;
+    }
+    const selectedIndex = getOptionIndex2(filteredOptions, value);
+    setHighlightedIndex(
+      selectedIndex >= 0 ? selectedIndex : getFirstEnabledOptionIndex2(filteredOptions)
+    );
+    if (searchable) {
+      const frame = window.requestAnimationFrame(() => searchInputRef.current?.focus());
+      return () => window.cancelAnimationFrame(frame);
+    }
+  }, [isOpen, filteredOptions, searchable, value]);
+  const virtualItems = virtualizer.getVirtualItems();
+  React58.useEffect(() => {
+    if (!isOpen || !canLoadMore || isLoadingMore || !loadMoreItems) return;
+    if (virtualItems.length === 0) return;
+    const lastItem = virtualItems[virtualItems.length - 1];
+    if (lastItem && lastItem.index >= filteredOptions.length - loadMoreThreshold) {
+      loadMoreItems();
+    }
+  }, [
+    canLoadMore,
+    filteredOptions.length,
+    isLoadingMore,
+    isOpen,
+    loadMoreItems,
+    loadMoreThreshold,
+    virtualItems
+  ]);
+  React58.useEffect(() => {
+    if (!isOpen || highlightedIndex < 0) return;
+    virtualizer.scrollToIndex(highlightedIndex, { align: "auto" });
+  }, [highlightedIndex, isOpen, virtualizer]);
+  const toggleMenu = () => {
+    if (isBlocked) return;
+    setIsOpen((prev) => !prev);
+  };
+  const handleSelect = (option) => {
+    if (option.isDisabled) return;
+    onChange(option);
+    setIsOpen(false);
+    triggerRef.current?.focus();
+  };
+  const handleTriggerKeyDown = (event) => {
+    if (isBlocked) return;
+    if (event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      setIsOpen(true);
+    }
+  };
+  const handleSearchKeyDown = (event) => {
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      const next = getNextEnabledOptionIndex2(filteredOptions, highlightedIndex + 1, 1);
+      if (next >= 0) setHighlightedIndex(next);
+      return;
+    }
+    if (event.key === "ArrowUp") {
+      event.preventDefault();
+      const next = getNextEnabledOptionIndex2(filteredOptions, highlightedIndex - 1, -1);
+      if (next >= 0) setHighlightedIndex(next);
+      return;
+    }
+    if (event.key === "Enter") {
+      event.preventDefault();
+      const option = filteredOptions[highlightedIndex];
+      if (option && !option.isDisabled) handleSelect(option);
+      return;
+    }
+    if (event.key === "Escape") {
+      event.preventDefault();
+      setIsOpen(false);
+      triggerRef.current?.focus();
+      return;
+    }
+    if (event.key === "Tab") {
+      setIsOpen(false);
+    }
+  };
+  const handleSearchChange = (event) => {
+    const next = event.target.value;
+    setSearchValue(next);
+    onSearchChange?.(next);
+  };
+  const emptyMessage = noOptionsMessage?.();
+  const totalSize = virtualizer.getTotalSize();
+  const measuredListHeight = Math.min(listHeight, Math.max(totalSize, itemHeight));
+  return /* @__PURE__ */ (0, import_jsx_runtime160.jsxs)(
+    "div",
+    {
+      ref: containerRef,
+      className: cn(
+        "relative w-full max-w-[var(--max-field-width)]",
+        disabled && "cursor-not-allowed opacity-50",
+        loading && "cursor-progress",
+        className
+      ),
+      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)(
+            "label",
+            {
+              htmlFor: triggerId,
+              className: "mb-2 block text-[14px] font-medium text-[var(--chekin-color-brand-navy)]",
+              children: topLabel
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime160.jsxs)("div", { className: "relative w-full", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime160.jsxs)(
+              "button",
+              {
+                id: triggerId,
+                ref: triggerRef,
+                type: "button",
+                "aria-haspopup": "listbox",
+                "aria-expanded": isOpen,
+                "aria-controls": listboxId,
+                "aria-labelledby": hasValue && valueId ? `${labelId} ${valueId}` : labelId,
+                "aria-describedby": describedErrorId,
+                "aria-invalid": hasInvalidState,
+                "aria-busy": loading,
+                disabled: isBlocked,
+                onClick: toggleMenu,
+                onKeyDown: handleTriggerKeyDown,
+                onBlur,
+                className: cn(
+                  "relative m-0 box-border flex h-12 w-full cursor-pointer items-center justify-between gap-2 rounded-[6px] border-0 px-4 text-left text-[16px] font-medium leading-5 outline-none transition-colors duration-200",
+                  isEmpty ? "bg-[var(--chekin-color-surface-input-empty)] text-[var(--chekin-color-gray-1)]" : "bg-transparent text-[var(--chekin-color-brand-navy)]",
+                  disabled && "cursor-not-allowed opacity-50",
+                  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)(
+                      import_lucide_react49.ChevronDown,
+                      {
+                        size: 16,
+                        className: cn(
+                          "transition-transform duration-200",
+                          isOpen && "rotate-180 text-[var(--chekin-color-brand-blue)]"
+                        )
+                      }
+                    )
+                  ] })
+                ]
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(
+              Fieldset,
+              {
+                isFocused: isOpen,
+                invalid: hasInvalidState,
+                isEmpty,
+                isActivated: !isEmpty || isOpen,
+                disabled,
+                loading,
+                htmlFor: triggerId,
+                labelId,
+                legend: typeof label === "string" ? label : void 0,
+                label,
+                tooltip,
+                onClick: !isBlocked ? toggleMenu : void 0
+              }
+            ),
+            isOpen && /* @__PURE__ */ (0, import_jsx_runtime160.jsxs)(
+              "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)]",
+                  dropdownClassName
+                ),
+                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)(
+                    "input",
+                    {
+                      ref: searchInputRef,
+                      type: "text",
+                      value: searchValue,
+                      placeholder: searchPlaceholder,
+                      onChange: handleSearchChange,
+                      onKeyDown: handleSearchKeyDown,
+                      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)]"
+                    }
+                  ) }),
+                  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)(
+                    "div",
+                    {
+                      ref: scrollRef,
+                      className: cn("overflow-y-auto", menuClassName),
+                      style: { height: `${measuredListHeight}px` },
+                      children: /* @__PURE__ */ (0, import_jsx_runtime160.jsx)(
+                        "div",
+                        {
+                          id: listboxId,
+                          role: "listbox",
+                          tabIndex: -1,
+                          "aria-labelledby": labelId,
+                          "aria-describedby": describedErrorId,
+                          "aria-activedescendant": highlightedIndex >= 0 ? getOptionId2(highlightedIndex) : void 0,
+                          className: "relative w-full",
+                          style: { height: `${totalSize}px` },
+                          children: virtualItems.map((virtualItem) => {
+                            const isLoaderRow = virtualItem.index >= filteredOptions.length;
+                            const option = filteredOptions[virtualItem.index];
+                            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)(
+                              "div",
+                              {
+                                "data-index": virtualItem.index,
+                                className: "absolute left-0 top-0 w-full",
+                                style: {
+                                  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)(
+                                  "button",
+                                  {
+                                    id: getOptionId2(virtualItem.index),
+                                    type: "button",
+                                    role: "option",
+                                    "aria-selected": isSelected,
+                                    "aria-disabled": isOptionDisabled,
+                                    tabIndex: -1,
+                                    disabled: isOptionDisabled,
+                                    onClick: () => option && handleSelect(option),
+                                    onMouseMove: () => setHighlightedIndex(virtualItem.index),
+                                    className: cn(
+                                      "flex h-full w-full items-start justify-between border-0 border-b border-[#f2f4f8] bg-white px-4 text-left text-[16px] font-medium leading-5 text-[var(--chekin-color-brand-navy)] outline-none transition-colors",
+                                      isHighlighted && !isSelected && "cursor-pointer text-[var(--chekin-color-brand-blue)]",
+                                      isSelected && "cursor-default font-bold text-[var(--chekin-color-brand-navy)]",
+                                      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 })
+                                    ]
+                                  }
+                                )
+                              },
+                              virtualItem.key
+                            );
+                          })
+                        }
+                      )
+                    }
+                  )
+                ]
+              }
+            )
+          ] }),
+          !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)(
+            FieldErrorMessage,
+            {
+              id: errorId,
+              message: errorMessage,
+              className: "mt-[1px] text-[14px]"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+var DashboardInfiniteScrollSelect = React58.forwardRef(
+  DashboardInfiniteScrollSelectInternal
+);
+
+// src/searchable-select/SearchableSelect.tsx
+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 ROW_HEIGHT = 48;
+var DESKTOP_LIST_HEIGHT = 280;
+var MOBILE_LIST_HEIGHT = 420;
+var LOAD_MORE_THRESHOLD = 6;
+function defaultFilter(option, searchValue) {
+  return String(option.label).toLowerCase().includes(searchValue.trim().toLowerCase());
+}
+var SearchableSelectInternal = ({
+  options,
+  value,
+  onChange,
+  onBlur,
+  onOpenChange,
+  searchValue,
+  onSearchChange,
+  filterOption = defaultFilter,
+  loading,
+  hasNextPage,
+  onLoadMore,
+  variant = "default",
+  label,
+  topLabel,
+  placeholder,
+  searchPlaceholder = "Search...",
+  mobileTitle,
+  getValueLabel,
+  disabled,
+  error,
+  invalid,
+  optional,
+  tooltip,
+  hideErrorMessage,
+  name,
+  className,
+  dropdownClassName,
+  menuClassName,
+  noOptionsMessage,
+  loadingMessage
+}, ref) => {
+  const { isMatch: isMobile2 } = useScreenResize(DEVICE.mobileXL);
+  const reactId = React59.useId();
+  const [open, setOpen] = React59.useState(false);
+  const [internalSearchValue, setInternalSearchValue] = React59.useState("");
+  const [highlightedIndex, setHighlightedIndex] = React59.useState(-1);
+  const containerRef = React59.useRef(null);
+  const triggerRef = React59.useRef(null);
+  const inputRef = React59.useRef(null);
+  const listboxId = `${reactId}-listbox`;
+  const labelId = `${reactId}-label`;
+  const valueId = `${reactId}-value`;
+  const helperTextId = `${reactId}-helper`;
+  const errorId = `${reactId}-error`;
+  const searchInputId = `${reactId}-search`;
+  const effectiveSearchValue = searchValue ?? internalSearchValue;
+  const shouldFilterLocally = !onSearchChange && filterOption !== null;
+  const visibleOptions = React59.useMemo(() => {
+    if (!shouldFilterLocally || !effectiveSearchValue) {
+      return options;
+    }
+    return options.filter((option) => filterOption(option, effectiveSearchValue));
+  }, [effectiveSearchValue, filterOption, options, shouldFilterLocally]);
+  const selectedIndex = React59.useMemo(
+    () => visibleOptions.findIndex((option) => option.value === value?.value),
+    [value?.value, visibleOptions]
+  );
+  const helperText = placeholder ?? label;
+  const valueLabel = value ? getValueLabel?.(value) ?? String(value.label) : void 0;
+  const isBlocked = Boolean(disabled) || Boolean(loading);
+  const triggerError = error ?? invalid;
+  const describedBy = error && !hideErrorMessage ? errorId : void 0;
+  const activeOptionId = highlightedIndex >= 0 ? getOptionId(reactId, highlightedIndex) : void 0;
+  useOutsideClick({
+    elementRef: containerRef,
+    onOutsideClick: () => closeSelect(),
+    isDisabled: !open || isMobile2
+  });
+  const handleOnOpenChange = useEvent(onOpenChange);
+  const setSelectOpen = (0, import_react82.useCallback)(
+    (nextOpen, options2) => {
+      setOpen(nextOpen);
+      handleOnOpenChange?.(nextOpen);
+      if (!nextOpen && options2?.restoreFocus) {
+        triggerRef.current?.focus();
+      }
+    },
+    [handleOnOpenChange]
+  );
+  React59.useEffect(() => {
+    if (isBlocked) {
+      setSelectOpen(false);
+      return;
+    }
+    if (!open) return;
+    const frameId = window.requestAnimationFrame(() => {
+      inputRef.current?.focus();
+    });
+    return () => {
+      window.cancelAnimationFrame(frameId);
+    };
+  }, [isBlocked, open, setSelectOpen]);
+  React59.useEffect(() => {
+    if (!open) {
+      setHighlightedIndex(-1);
+      return;
+    }
+    setHighlightedIndex((currentIndex) => {
+      if (currentIndex >= 0 && currentIndex < visibleOptions.length && !visibleOptions[currentIndex]?.isDisabled) {
+        return currentIndex;
+      }
+      return selectedIndex >= 0 ? selectedIndex : getFirstEnabledIndex(visibleOptions);
+    });
+  }, [open, selectedIndex, visibleOptions]);
+  function openSelect() {
+    if (isBlocked) return;
+    setSelectOpen(true);
+  }
+  function closeSelect() {
+    setSelectOpen(false, { restoreFocus: true });
+  }
+  function handleSearchChange(nextValue) {
+    if (!onSearchChange) {
+      setInternalSearchValue(nextValue);
+    }
+    onSearchChange?.(nextValue);
+  }
+  function handleSelect(option) {
+    if (isBlocked || option.isDisabled) return;
+    onChange(option);
+    setSelectOpen(false, { restoreFocus: true });
+  }
+  function moveHighlight(step) {
+    const startIndex = highlightedIndex >= 0 ? highlightedIndex + step : step === 1 ? 0 : visibleOptions.length - 1;
+    const nextIndex = getNextEnabledIndex(visibleOptions, startIndex, step);
+    if (nextIndex >= 0) {
+      setHighlightedIndex(nextIndex);
+    }
+  }
+  function handleTriggerKeyDown(event) {
+    if (isBlocked) return;
+    if (event.key === "Enter" || event.key === " " || event.key === "ArrowDown" || event.key === "ArrowUp") {
+      event.preventDefault();
+      openSelect();
+    }
+  }
+  function handleSearchKeyDown(event) {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      closeSelect();
+      return;
+    }
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      moveHighlight(1);
+      return;
+    }
+    if (event.key === "ArrowUp") {
+      event.preventDefault();
+      moveHighlight(-1);
+      return;
+    }
+    if (event.key === "Enter") {
+      event.preventDefault();
+      const option = visibleOptions[highlightedIndex];
+      if (option) {
+        handleSelect(option);
+      }
+    }
+  }
+  const content = /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
+    SearchableSelectContent,
+    {
+      inputId: searchInputId,
+      listboxId,
+      labelId,
+      activeOptionId,
+      inputRef,
+      options: visibleOptions,
+      value,
+      searchValue: effectiveSearchValue,
+      searchPlaceholder,
+      highlightedIndex,
+      loading,
+      hasNextPage,
+      onLoadMore,
+      menuClassName,
+      noOptionsMessage,
+      loadingMessage,
+      height: isMobile2 ? MOBILE_LIST_HEIGHT : DESKTOP_LIST_HEIGHT,
+      idPrefix: reactId,
+      onSearchChange: handleSearchChange,
+      onSearchKeyDown: handleSearchKeyDown,
+      onOptionClick: handleSelect,
+      onOptionHover: setHighlightedIndex
+    }
+  );
+  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)(
+      FieldTrigger,
+      {
+        id: `${reactId}-trigger`,
+        ref: triggerRef,
+        variant,
+        "aria-haspopup": "listbox",
+        "aria-expanded": open,
+        "aria-controls": listboxId,
+        label,
+        topLabel,
+        labelId,
+        valueId,
+        helperTextId,
+        errorId: error ? errorId : void 0,
+        labelText: topLabel ? helperText : void 0,
+        valueText: valueLabel,
+        placeholder: helperText,
+        describedBy,
+        error: triggerError,
+        loading,
+        optional,
+        tooltip,
+        forceLabelText: Boolean(optional) || Boolean(tooltip),
+        hideErrorMessage,
+        disabled,
+        onClick: () => {
+          if (open) {
+            closeSelect();
+            return;
+          }
+          openSelect();
+        },
+        onKeyDown: handleTriggerKeyDown,
+        onBlur,
+        trailingAdornment: /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
+          import_lucide_react50.ChevronDown,
+          {
+            className: cn(
+              "h-6 w-6 text-[#1F1F1B] transition-transform",
+              open && "rotate-180"
+            )
+          }
+        )
+      }
+    ),
+    isMobile2 ? /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
+      Drawer,
+      {
         open,
         onOpenChange: (nextOpen) => {
           if (isBlocked && nextOpen) return;
@@ -13904,13 +15496,13 @@ var SearchableSelectInternal = ({
           }
           closeSelect();
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime154.jsxs)(DrawerContent, { onClose: closeSelect, lockScroll: false, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime154.jsx)(DrawerTitle, { className: "sr-only", children: mobileTitle ?? label }),
-          /* @__PURE__ */ (0, import_jsx_runtime154.jsx)(DrawerDescription, { className: "sr-only", children: label }),
-          /* @__PURE__ */ (0, import_jsx_runtime154.jsx)("div", { className: "px-5 pb-5 pt-1", children: content })
+        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 })
         ] })
       }
-    ) : open ? /* @__PURE__ */ (0, import_jsx_runtime154.jsx)(
+    ) : open ? /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
       "div",
       {
         className: cn(
@@ -13922,7 +15514,7 @@ var SearchableSelectInternal = ({
     ) : null
   ] });
 };
-var SearchableSelect = React53.forwardRef(
+var SearchableSelect = React59.forwardRef(
   SearchableSelectInternal
 );
 function SearchableSelectContent({
@@ -13949,11 +15541,11 @@ function SearchableSelectContent({
   onOptionClick,
   onOptionHover
 }) {
-  const listRef = React53.useRef(null);
-  const lastLoadMoreOptionsLengthRef = React53.useRef(null);
-  const previousHighlightedIndexRef = React53.useRef(highlightedIndex);
+  const listRef = React59.useRef(null);
+  const lastLoadMoreOptionsLengthRef = React59.useRef(null);
+  const previousHighlightedIndexRef = React59.useRef(highlightedIndex);
   const rowCount = options.length + (loading && options.length > 0 ? 1 : 0);
-  const virtualizer = (0, import_react_virtual2.useVirtualizer)({
+  const virtualizer = (0, import_react_virtual3.useVirtualizer)({
     count: rowCount,
     getScrollElement: () => listRef.current,
     estimateSize: () => ROW_HEIGHT,
@@ -13962,7 +15554,7 @@ function SearchableSelectContent({
   const virtualItems = virtualizer.getVirtualItems();
   const emptyMessage = noOptionsMessage?.() ?? "No matches found";
   const loadingText = loadingMessage?.() ?? "Loading...";
-  React53.useEffect(() => {
+  React59.useEffect(() => {
     const lastItem = virtualItems[virtualItems.length - 1];
     const shouldLoadMore = !!lastItem && hasNextPage && !loading && lastItem.index >= options.length - LOAD_MORE_THRESHOLD;
     if (shouldLoadMore && lastLoadMoreOptionsLengthRef.current !== options.length) {
@@ -13970,23 +15562,23 @@ function SearchableSelectContent({
       onLoadMore?.();
     }
   }, [hasNextPage, loading, onLoadMore, options.length, virtualItems]);
-  React53.useEffect(() => {
+  React59.useEffect(() => {
     const hasHighlightedIndexChanged = previousHighlightedIndexRef.current !== highlightedIndex;
     previousHighlightedIndexRef.current = highlightedIndex;
     if (highlightedIndex >= 0 && hasHighlightedIndexChanged) {
       virtualizer.scrollToIndex(highlightedIndex, { align: "auto" });
     }
   }, [highlightedIndex, virtualizer]);
-  return /* @__PURE__ */ (0, import_jsx_runtime154.jsxs)("div", { className: "p-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime154.jsxs)("div", { className: "relative mb-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime154.jsx)(
-        import_lucide_react46.Search,
+  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)(
+        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_runtime154.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
         "input",
         {
           id: inputId,
@@ -14005,7 +15597,7 @@ function SearchableSelectContent({
         }
       )
     ] }),
-    loading && options.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime154.jsx)("div", { className: "px-4 py-5 text-center text-base leading-6 text-[#6C6C6C]", children: loadingText }) : options.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime154.jsx)("div", { className: "px-4 py-5 text-center text-base leading-6 text-[#6C6C6C]", children: emptyMessage }) : /* @__PURE__ */ (0, import_jsx_runtime154.jsx)(
+    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)(
       "div",
       {
         id: listboxId,
@@ -14014,7 +15606,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_runtime154.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
           "div",
           {
             className: "relative w-full",
@@ -14022,7 +15614,7 @@ function SearchableSelectContent({
             children: virtualItems.map((virtualItem) => {
               const option = options[virtualItem.index];
               if (!option) {
-                return /* @__PURE__ */ (0, import_jsx_runtime154.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
                   "div",
                   {
                     className: "absolute left-0 top-0 flex w-full items-center px-4 text-base leading-6 text-[#6C6C6C]",
@@ -14037,7 +15629,7 @@ function SearchableSelectContent({
               }
               const isSelected = value?.value === option.value;
               const isHighlighted = virtualItem.index === highlightedIndex;
-              return /* @__PURE__ */ (0, import_jsx_runtime154.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime161.jsx)(
                 "button",
                 {
                   id: getOptionId(idPrefix, virtualItem.index),
@@ -14059,7 +15651,7 @@ function SearchableSelectContent({
                     height: `${virtualItem.size}px`,
                     transform: `translateY(${virtualItem.start}px)`
                   },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime154.jsx)("span", { className: "truncate text-center", children: String(option.label) })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime161.jsx)("span", { className: "truncate text-center", children: String(option.label) })
                 },
                 `${String(option.value)}-${virtualItem.index}`
               );
@@ -14145,14 +15737,14 @@ function getErrorMessage(error) {
 
 // src/lib/toastResponseError.tsx
 var import_i18next = __toESM(require("i18next"), 1);
-var import_jsx_runtime155 = require("react/jsx-runtime");
+var import_jsx_runtime162 = require("react/jsx-runtime");
 function addSupportEmailToMessage(message, prefixText) {
   if (typeof message !== "string") {
     return message;
   }
   const builtMessage = `${prefixText ? `${prefixText} ` : ""}${message}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime155.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime155.jsx)("div", { children: builtMessage }),
+  return /* @__PURE__ */ (0, import_jsx_runtime162.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime162.jsx)("div", { children: builtMessage }),
     import_i18next.default.t("reach_us_at_email")
   ] });
 }
@@ -14214,6 +15806,11 @@ function toastResponseError(error, options = {}) {
   CopyString,
   CustomCheckboxDropdownGroup,
   DEVICE_BREAKPOINTS,
+  DashboardCreatableMultiSelect,
+  DashboardInfiniteScrollSelect,
+  DashboardInput,
+  DashboardMultiSelect,
+  DashboardSelect,
   DataTable,
   DatePicker,
   DateTableFilter,