@chekinapp/ui 0.0.130 → 0.0.132

package/dist/index.js

@@ -7786,7 +7786,6 @@ var SectionTagColors = /* @__PURE__ */ ((SectionTagColors2) => {
 
 // src/section/Section.tsx
 import { forwardRef as forwardRef38 } from "react";
-import { CircleHelp } from "lucide-react";
 import { useTranslation as useTranslation15 } from "react-i18next";
 
 // src/section/constants.ts
@@ -7799,16 +7798,17 @@ var SubSectionSize = /* @__PURE__ */ ((SubSectionSize2) => {
 // src/section/Section.tsx
 import { jsx as jsx98, jsxs as jsxs60 } from "react/jsx-runtime";
 function TooltipInfo({ content, className }) {
-  return /* @__PURE__ */ jsx98(Tooltip, { side: "right", content, contentClassName: "max-w-64", children: /* @__PURE__ */ jsx98(
-    "button",
+  return /* @__PURE__ */ jsx98(
+    HelpTooltip,
     {
-      type: "button",
-      className: cn("inline-flex text-[var(--chekin-color-gray-1)]", className),
+      side: "right",
+      content,
+      contentClassName: "max-w-64",
+      className: cn("text-[var(--chekin-color-gray-1)]", className),
       onClick: (event) => event.stopPropagation(),
-      "aria-label": typeof content === "string" ? content : "More information",
-      children: /* @__PURE__ */ jsx98(CircleHelp, { className: "h-4 w-4" })
+      label: typeof content === "string" ? content : "More information"
     }
-  ) });
+  );
 }
 var Section = forwardRef38(
   ({
@@ -12146,143 +12146,137 @@ var Input = React44.forwardRef(
               children: topLabel
             }
           ),
-          /* @__PURE__ */ jsxs89(
-            "div",
-            {
-              className: cn(
-                "input__field",
-                "relative block w-full",
-                readOnly && "bg-[var(--empty-field-background)]",
-                fieldClassName
-              ),
-              children: [
-                /* @__PURE__ */ jsxs89(
-                  "div",
-                  {
-                    className: cn("input__content relative w-full cursor-text", contentClassName),
-                    children: [
-                      /* @__PURE__ */ jsx142(
-                        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,
-                          className: "input__fieldset",
-                          labelClassName: cn({
-                            input__label: true,
-                            "pl-[28px]": !!leftIcon
-                          })
-                        }
-                      ),
-                      leftIcon && /* @__PURE__ */ jsx142("span", { className: "input__left-icon 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__ */ jsx142("span", { className: "input__left-icon-inner flex h-full w-10 items-center justify-center", children: leftIcon }) }),
-                      /* @__PURE__ */ jsx142(
-                        "input",
-                        {
-                          ...props,
-                          ref: combinedInputRef,
-                          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(
-                            "input__control",
-                            "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(--empty-field-background)]" : "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__ */ jsx142("span", { className: "input__sign 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__ */ jsx142("span", { className: "input__trailing-adornment pointer-events-none absolute right-[14px] top-0 flex h-full items-center", children: trailingAdornment }),
-                      onReset && !isEmpty && /* @__PURE__ */ jsx142(
-                        "button",
-                        {
-                          type: "button",
-                          onClick: onReset,
-                          disabled,
-                          className: "input__reset-button 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": t("reset"),
-                          children: /* @__PURE__ */ jsx142(X9, { size: 14 })
-                        }
-                      ),
-                      isPasswordReveal && /* @__PURE__ */ jsx142(
-                        "button",
-                        {
-                          type: "button",
-                          onClick: togglePasswordReveal,
-                          className: "input__password-button absolute right-[14px] top-[18px] flex h-[13px] w-[21px] cursor-pointer items-center justify-center border-0 bg-transparent p-0 hover:opacity-85",
-                          "aria-label": isPasswordRevealed ? t("hide_password") : t("show_password"),
-                          children: /* @__PURE__ */ jsx142(
-                            Eye,
-                            {
-                              size: 20,
-                              className: cn(
-                                "input__password-icon",
-                                isPasswordRevealed ? "text-[#fc98dd]" : "text-[var(--chekin-color-gray-2)]"
-                              )
-                            }
-                          )
-                        }
-                      )
-                    ]
-                  }
+          /* @__PURE__ */ jsxs89("div", { className: cn("input__field", "relative block w-full", fieldClassName), children: [
+            /* @__PURE__ */ jsxs89(
+              "div",
+              {
+                className: cn(
+                  "input__content relative w-full cursor-text",
+                  readOnly && !disabled && !loading && "cursor-default",
+                  contentClassName
                 ),
-                type === "number" && showNumberButtons && /* @__PURE__ */ jsxs89("div", { className: "input__number-controls absolute right-[18px] top-[13px] inline-flex items-center text-right", children: [
+                children: [
+                  /* @__PURE__ */ jsx142(
+                    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,
+                      className: "input__fieldset",
+                      labelClassName: cn({
+                        input__label: true,
+                        "pl-[28px]": !!leftIcon
+                      })
+                    }
+                  ),
+                  leftIcon && /* @__PURE__ */ jsx142("span", { className: "input__left-icon 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__ */ jsx142("span", { className: "input__left-icon-inner flex h-full w-10 items-center justify-center", children: leftIcon }) }),
                   /* @__PURE__ */ jsx142(
+                    "input",
+                    {
+                      ...props,
+                      ref: combinedInputRef,
+                      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(
+                        "input__control",
+                        "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(--empty-field-background)]" : "bg-transparent",
+                        isEmpty && "text-[var(--chekin-color-gray-1)]",
+                        inputType === "password" && "[&:not(:placeholder-shown)]:font-bold [&:not(:placeholder-shown)]:tracking-[2px]",
+                        disabled && "cursor-not-allowed",
+                        readOnly && !disabled && !loading && "cursor-default",
+                        loading && "cursor-progress",
+                        leftIcon && "pl-10",
+                        (showRightPaddingForReset || showRightPaddingForReveal) && "pr-10",
+                        sign && "pr-10",
+                        inputClassName
+                      )
+                    }
+                  ),
+                  sign && /* @__PURE__ */ jsx142("span", { className: "input__sign 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__ */ jsx142("span", { className: "input__trailing-adornment pointer-events-none absolute right-[14px] top-0 flex h-full items-center", children: trailingAdornment }),
+                  onReset && !isEmpty && /* @__PURE__ */ jsx142(
                     "button",
                     {
                       type: "button",
-                      onClick: onDecrement,
-                      className: "input__decrement-button 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": t("decrement"),
-                      children: /* @__PURE__ */ jsx142(Minus4, { size: 16, strokeWidth: 3, "aria-hidden": true })
+                      onClick: onReset,
+                      disabled,
+                      className: "input__reset-button 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": t("reset"),
+                      children: /* @__PURE__ */ jsx142(X9, { size: 14 })
                     }
                   ),
-                  /* @__PURE__ */ jsx142(
+                  isPasswordReveal && /* @__PURE__ */ jsx142(
                     "button",
                     {
                       type: "button",
-                      onClick: onIncrement,
-                      className: "input__increment-button 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": t("increment"),
-                      children: /* @__PURE__ */ jsx142(Plus3, { size: 16, strokeWidth: 3, "aria-hidden": true })
+                      onClick: togglePasswordReveal,
+                      className: "input__password-button absolute right-[14px] top-[18px] flex h-[13px] w-[21px] cursor-pointer items-center justify-center border-0 bg-transparent p-0 hover:opacity-85",
+                      "aria-label": isPasswordRevealed ? t("hide_password") : t("show_password"),
+                      children: /* @__PURE__ */ jsx142(
+                        Eye,
+                        {
+                          size: 20,
+                          className: cn(
+                            "input__password-icon",
+                            isPasswordRevealed ? "text-[#fc98dd]" : "text-[var(--chekin-color-gray-2)]"
+                          )
+                        }
+                      )
                     }
                   )
-                ] })
-              ]
-            }
-          ),
+                ]
+              }
+            ),
+            type === "number" && showNumberButtons && /* @__PURE__ */ jsxs89("div", { className: "input__number-controls absolute right-[18px] top-[13px] inline-flex items-center text-right", children: [
+              /* @__PURE__ */ jsx142(
+                "button",
+                {
+                  type: "button",
+                  onClick: onDecrement,
+                  className: "input__decrement-button 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": t("decrement"),
+                  children: /* @__PURE__ */ jsx142(Minus4, { size: 16, strokeWidth: 3, "aria-hidden": true })
+                }
+              ),
+              /* @__PURE__ */ jsx142(
+                "button",
+                {
+                  type: "button",
+                  onClick: onIncrement,
+                  className: "input__increment-button 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": t("increment"),
+                  children: /* @__PURE__ */ jsx142(Plus3, { size: 16, strokeWidth: 3, "aria-hidden": true })
+                }
+              )
+            ] })
+          ] }),
           !errorMessage && optional && /* @__PURE__ */ jsx142(
             "span",
             {
@@ -13098,15 +13092,19 @@ function useSelectMenuState({
 }) {
   const containerRef = React47.useRef(null);
   const [internalIsOpen, setInternalIsOpen] = React47.useState(false);
-  const isControlledOpen = controlledIsOpen === true;
-  const isOpen = isControlledOpen || internalIsOpen;
+  const [hasClosedControlledOpen, setHasClosedControlledOpen] = React47.useState(false);
+  const isOpen = controlledIsOpen === false ? false : controlledIsOpen === true ? !hasClosedControlledOpen : internalIsOpen;
+  React47.useEffect(() => {
+    if (controlledIsOpen !== true) setHasClosedControlledOpen(false);
+  }, [controlledIsOpen]);
   const setIsOpen = React47.useCallback(
     (next) => {
       const value = typeof next === "function" ? next(isOpen) : next;
-      setInternalIsOpen(value);
+      if (controlledIsOpen === true) setHasClosedControlledOpen(!value);
+      if (controlledIsOpen !== false) setInternalIsOpen(value);
       onMenuOpenChange?.(value);
     },
-    [isOpen, onMenuOpenChange]
+    [isOpen, controlledIsOpen, onMenuOpenChange]
   );
   const openMenu = React47.useCallback(() => {
     setIsOpen(true);
@@ -14307,7 +14305,7 @@ var PhoneInput = React50.forwardRef(function PhoneInput2({
                   filterOption: countriesFilter,
                   clearable: false,
                   getValueLabel: (option) => option.value,
-                  className: "!max-w-none",
+                  className: "max-w-none w-auto",
                   dropdownClassName: "right-auto w-[280px]"
                 }
               ),
@@ -14332,7 +14330,7 @@ var PhoneInput = React50.forwardRef(function PhoneInput2({
                   onFocus,
                   onBlur,
                   renderErrorMessage: false,
-                  wrapperClassName: "!max-w-none",
+                  wrapperClassName: "max-w-none w-auto",
                   contentClassName: readOnly ? "!cursor-default" : void 0,
                   inputClassName: readOnly ? "!cursor-default" : void 0
                 }
@@ -14719,64 +14717,10 @@ var InfiniteScrollMultiSelect = React57.forwardRef(function InfiniteScrollMultiS
 import * as React58 from "react";
 import { useTranslation as useTranslation36 } from "react-i18next";
 
-// src/dashboard/select-checkboxes/SelectCheckboxOption.tsx
-import { jsx as jsx163, jsxs as jsxs102 } from "react/jsx-runtime";
-function SelectCheckboxOption(props) {
-  const {
-    option,
-    index,
-    isSelected,
-    isHighlighted,
-    isDisabled,
-    id,
-    onClick,
-    onHover,
-    innerRef
-  } = props;
-  return /* @__PURE__ */ jsxs102(
-    "button",
-    {
-      id,
-      ref: innerRef,
-      type: "button",
-      role: "option",
-      "aria-selected": isSelected,
-      "aria-disabled": isDisabled,
-      tabIndex: -1,
-      disabled: isDisabled,
-      onClick: () => onClick(option),
-      onMouseMove: () => onHover(index),
-      className: cn(
-        "flex w-full items-center gap-3 rounded-md border-0 bg-transparent px-3 py-2 text-left text-[15px] font-medium leading-5 text-[var(--chekin-color-brand-navy)] outline-none transition-colors duration-100",
-        !isDisabled && "cursor-pointer hover:bg-[var(--chekin-color-surface-pressed)]",
-        isHighlighted && !isDisabled && "bg-[var(--chekin-color-surface-pressed)]",
-        isSelected && "bg-[var(--chekin-color-surface-autocomplete)] font-semibold text-[var(--chekin-color-brand-blue)]",
-        isDisabled && "cursor-not-allowed text-[var(--chekin-color-gray-2)]"
-      ),
-      children: [
-        /* @__PURE__ */ jsx163(
-          BaseCheckbox,
-          {
-            checked: isSelected,
-            disabled: isDisabled,
-            size: "s",
-            tabIndex: -1,
-            className: "pointer-events-none shrink-0"
-          }
-        ),
-        /* @__PURE__ */ jsxs102("span", { className: "flex min-w-0 flex-1 items-center justify-between gap-2", children: [
-          /* @__PURE__ */ jsx163("span", { className: "block break-words", children: option.label }),
-          option.description && /* @__PURE__ */ jsx163("span", { className: "shrink-0 text-[12px] font-medium italic text-[var(--chekin-color-gray-1)]", children: option.description })
-        ] })
-      ]
-    }
-  );
-}
-
 // src/dashboard/select-checkboxes/CountTrigger.tsx
 import { ChevronDown as ChevronDown3 } from "lucide-react";
 import { useTranslation as useTranslation35 } from "react-i18next";
-import { jsx as jsx164, jsxs as jsxs103 } from "react/jsx-runtime";
+import { jsx as jsx163, jsxs as jsxs102 } from "react/jsx-runtime";
 function createCountTrigger(opts) {
   const { valueText, totalCount } = opts;
   function CountTrigger(props) {
@@ -14804,7 +14748,7 @@ function createCountTrigger(opts) {
     const computedText = typeof valueText === "function" ? valueText(count, total) : valueText ?? (count > 0 ? t("n_selected", { count, defaultValue: `${count} selected` }) : "");
     const display = hasValue ? computedText : isOpen ? placeholder ?? null : null;
     const isEmpty = !hasValue;
-    return /* @__PURE__ */ jsxs103(
+    return /* @__PURE__ */ jsxs102(
       "button",
       {
         id: triggerId,
@@ -14827,9 +14771,9 @@ function createCountTrigger(opts) {
           loading && "!cursor-progress"
         ),
         children: [
-          leftIcon && /* @__PURE__ */ jsx164("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__ */ jsx164("span", { className: "flex h-full w-10 items-center justify-center", children: leftIcon }) }),
-          /* @__PURE__ */ jsx164("span", { id: valueId, className: "block min-w-0 flex-1 truncate text-left", children: display }),
-          /* @__PURE__ */ jsx164("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ jsx164(
+          leftIcon && /* @__PURE__ */ jsx163("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__ */ jsx163("span", { className: "flex h-full w-10 items-center justify-center", children: leftIcon }) }),
+          /* @__PURE__ */ jsx163("span", { id: valueId, className: "block min-w-0 flex-1 truncate text-left", children: display }),
+          /* @__PURE__ */ jsx163("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ jsx163(
             ChevronDown3,
             {
               size: 16,
@@ -14847,9 +14791,9 @@ function createCountTrigger(opts) {
 }
 
 // src/dashboard/select-checkboxes/SelectAllRow.tsx
-import { jsx as jsx165, jsxs as jsxs104 } from "react/jsx-runtime";
+import { jsx as jsx164, jsxs as jsxs103 } from "react/jsx-runtime";
 function SelectAllRow({ label, checked, disabled, onToggle }) {
-  return /* @__PURE__ */ jsxs104(
+  return /* @__PURE__ */ jsxs103(
     "button",
     {
       type: "button",
@@ -14860,7 +14804,7 @@ function SelectAllRow({ label, checked, disabled, onToggle }) {
         disabled && "cursor-default opacity-40"
       ),
       children: [
-        /* @__PURE__ */ jsx165(
+        /* @__PURE__ */ jsx164(
           BaseCheckbox,
           {
             checked,
@@ -14870,20 +14814,20 @@ function SelectAllRow({ label, checked, disabled, onToggle }) {
             className: "pointer-events-none shrink-0"
           }
         ),
-        /* @__PURE__ */ jsx165("span", { className: "flex-1", children: label })
+        /* @__PURE__ */ jsx164("span", { className: "flex-1", children: label })
       ]
     }
   );
 }
 
 // src/dashboard/select-checkboxes/SelectCheckboxes.tsx
-import { Fragment as Fragment16, jsx as jsx166 } from "react/jsx-runtime";
+import { Fragment as Fragment16, jsx as jsx165 } from "react/jsx-runtime";
 function hasPaginationProps(props) {
   return props.canLoadMore !== void 0 || props.isLoadingMore !== void 0 || props.loadMoreItems !== void 0 || props.onSearchChange !== void 0;
 }
 function makeTriggerSlot(render) {
   function CustomTrigger(props) {
-    return /* @__PURE__ */ jsx166(Fragment16, { children: render(props.isOpen, props.onContainerClick) });
+    return /* @__PURE__ */ jsx165(Fragment16, { children: render(props.isOpen, props.onContainerClick) });
   }
   return CustomTrigger;
 }
@@ -14968,15 +14912,7 @@ function SelectCheckboxesInternal(props, ref) {
       totalCount: flatRawOptions.length
     });
   }, [trigger, valueText, flatRawOptions.length]);
-  const components = React58.useMemo(
-    () => ({
-      ...userComponents,
-      Control,
-      Option: userComponents?.Option ?? SelectCheckboxOption
-    }),
-    [userComponents, Control]
-  );
-  const menuHeader = allowSelectAll ? /* @__PURE__ */ jsx166(
+  const menuHeader = allowSelectAll ? /* @__PURE__ */ jsx165(
     SelectAllRow,
     {
       label: selectAllLabel ?? t("select_all", { defaultValue: "Select All" }),
@@ -14996,7 +14932,7 @@ function SelectCheckboxesInternal(props, ref) {
     value: currentValue,
     onChange: handleChange,
     filterOption: passthroughFilter2,
-    components,
+    // components,
     closeMenuOnSelect,
     searchPosition: searchable ? "dropdown" : "trigger",
     searchable,
@@ -15005,7 +14941,7 @@ function SelectCheckboxesInternal(props, ref) {
     isMulti: true
   };
   if (isPaginated) {
-    return /* @__PURE__ */ jsx166(
+    return /* @__PURE__ */ jsx165(
       InfiniteScrollSelect,
       {
         ref,
@@ -15016,7 +14952,7 @@ function SelectCheckboxesInternal(props, ref) {
       }
     );
   }
-  return /* @__PURE__ */ jsx166(
+  return /* @__PURE__ */ jsx165(
     Select,
     {
       ref,
@@ -15031,6 +14967,60 @@ var SelectCheckboxes = React58.forwardRef(
   SelectCheckboxesInternal
 );
 
+// src/dashboard/select-checkboxes/SelectCheckboxOption.tsx
+import { jsx as jsx166, jsxs as jsxs104 } from "react/jsx-runtime";
+function SelectCheckboxOption(props) {
+  const {
+    option,
+    index,
+    isSelected,
+    isHighlighted,
+    isDisabled,
+    id,
+    onClick,
+    onHover,
+    innerRef
+  } = props;
+  return /* @__PURE__ */ jsxs104(
+    "button",
+    {
+      id,
+      ref: innerRef,
+      type: "button",
+      role: "option",
+      "aria-selected": isSelected,
+      "aria-disabled": isDisabled,
+      tabIndex: -1,
+      disabled: isDisabled,
+      onClick: () => onClick(option),
+      onMouseMove: () => onHover(index),
+      className: cn(
+        "flex w-full items-center gap-3 rounded-md border-0 bg-transparent px-3 py-2 text-left text-[15px] font-medium leading-5 text-[var(--chekin-color-brand-navy)] outline-none transition-colors duration-100",
+        !isDisabled && "cursor-pointer hover:bg-[var(--chekin-color-surface-pressed)]",
+        isHighlighted && !isDisabled && "bg-[var(--chekin-color-surface-pressed)]",
+        isSelected && "bg-[var(--chekin-color-surface-autocomplete)] font-semibold text-[var(--chekin-color-brand-blue)]",
+        isDisabled && "cursor-not-allowed text-[var(--chekin-color-gray-2)]"
+      ),
+      children: [
+        /* @__PURE__ */ jsx166(
+          BaseCheckbox,
+          {
+            checked: isSelected,
+            disabled: isDisabled,
+            size: "s",
+            tabIndex: -1,
+            className: "pointer-events-none shrink-0"
+          }
+        ),
+        /* @__PURE__ */ jsxs104("span", { className: "flex min-w-0 flex-1 items-center justify-between gap-2", children: [
+          /* @__PURE__ */ jsx166("span", { className: "block break-words", children: option.label }),
+          option.description && /* @__PURE__ */ jsx166("span", { className: "shrink-0 text-[12px] font-medium italic text-[var(--chekin-color-gray-1)]", children: option.description })
+        ] })
+      ]
+    }
+  );
+}
+
 // src/dashboard/textarea/Textarea.tsx
 import * as React60 from "react";
 import { useTranslation as useTranslation37 } from "react-i18next";