@chekinapp/ui 0.0.113 → 0.0.115

package/dist/index.cjs

@@ -12796,6 +12796,7 @@ var import_react_i18next33 = require("react-i18next");
 // src/dashboard/_select-internals/SelectFieldShell.tsx
 var import_react_i18next27 = require("react-i18next");
 var import_jsx_runtime146 = require("react/jsx-runtime");
+var FOCUSABLE_TRIGGER_SELECTOR = 'input:not([type="hidden"]):not([disabled]):not([readonly]), button:not([disabled])';
 function SelectFieldShell({
   containerRef,
   className,
@@ -12816,13 +12817,22 @@ function SelectFieldShell({
 }) {
   const { t } = (0, import_react_i18next27.useTranslation)();
   const wrapperWidth = toCssSize(width);
+  const handleContainerFocus = (event) => {
+    if (event.target !== event.currentTarget) return;
+    const focusable = event.currentTarget.querySelector(
+      FOCUSABLE_TRIGGER_SELECTOR
+    );
+    focusable?.focus();
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime146.jsxs)(
     "div",
     {
       ref: containerRef,
+      tabIndex: -1,
       onBlur,
+      onFocus: handleContainerFocus,
       className: cn(
-        "relative w-full max-w-[var(--field-max-width,296px)]",
+        "relative w-full max-w-[var(--field-max-width,296px)] outline-none",
         disabled && !loading && "cursor-not-allowed opacity-50",
         loading && "cursor-progress opacity-50",
         className
@@ -12894,6 +12904,7 @@ function defaultIsOptionSelected(option, selectValue) {
 }
 
 // src/dashboard/_select-internals/slots/DefaultOption.tsx
+var import_lucide_react43 = require("lucide-react");
 var import_jsx_runtime147 = require("react/jsx-runtime");
 function DefaultOption(props) {
   const {
@@ -12902,7 +12913,7 @@ function DefaultOption(props) {
     isSelected,
     isHighlighted,
     isDisabled,
-    isLast,
+    isMulti,
     id,
     onClick,
     onHover,
@@ -12930,15 +12941,26 @@ function DefaultOption(props) {
       onClick: () => onClick(option),
       onMouseMove: () => onHover(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",
-        isLast && "border-b-transparent",
-        isHighlighted && !isSelected && "cursor-pointer text-[var(--chekin-color-brand-blue)]",
-        isSelected && "cursor-default font-bold text-[var(--chekin-color-brand-navy)]",
-        isDisabled && "cursor-default opacity-30"
+        "group relative flex w-full items-start justify-between gap-2 rounded-md border-0 bg-transparent px-3 py-2.5 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__ */ (0, import_jsx_runtime147.jsx)("span", { className: "block break-words", children: labelContent }),
-        option.description && /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("span", { className: "ml-2 mt-[3px] shrink-0 text-[12px] font-bold italic text-[#777e91]", children: option.description })
+        /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("span", { className: "block min-w-0 break-words", children: labelContent }),
+        option.description && /* @__PURE__ */ (0, import_jsx_runtime147.jsx)("span", { className: "ml-auto shrink-0 self-center text-[12px] font-medium italic text-[var(--chekin-color-gray-1)]", children: option.description }),
+        isSelected && /* @__PURE__ */ (0, import_jsx_runtime147.jsx)(
+          import_lucide_react43.Check,
+          {
+            "aria-hidden": "true",
+            className: cn(
+              "shrink-0 text-[var(--chekin-color-brand-blue)]",
+              isMulti ? "ml-1 mt-0.5 h-3.5 w-3.5" : "ml-2 mt-0.5 h-4 w-4"
+            ),
+            strokeWidth: 2.5
+          }
+        )
       ]
     }
   );
@@ -12970,7 +12992,8 @@ function SelectMenu({
   components,
   inputValue = "",
   formatOptionLabel,
-  isOptionSelected: isOptionSelected2
+  isOptionSelected: isOptionSelected2,
+  onMenuScrollToBottom
 }) {
   const { t } = (0, import_react_i18next28.useTranslation)();
   const emptyMessage = noOptionsMessage?.() ?? t("no_options");
@@ -12981,6 +13004,19 @@ function SelectMenu({
     () => selectedValues ?? (selectedValue ? [selectedValue] : []),
     [selectedValues, selectedValue]
   );
+  const wasAtBottomRef = React45.useRef(false);
+  const handleScroll = React45.useCallback(
+    (event) => {
+      if (!onMenuScrollToBottom) return;
+      const target = event.currentTarget;
+      const atBottom = target.scrollHeight - target.scrollTop - target.clientHeight <= 1;
+      if (atBottom && !wasAtBottomRef.current) {
+        onMenuScrollToBottom(event);
+      }
+      wasAtBottomRef.current = atBottom;
+    },
+    [onMenuScrollToBottom]
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)(
     "div",
     {
@@ -12993,12 +13029,14 @@ function SelectMenu({
       "aria-multiselectable": isMulti,
       "aria-activedescendant": highlightedIndex !== void 0 && highlightedIndex >= 0 ? getOptionId2(highlightedIndex) : void 0,
       onKeyDown,
+      onScroll: onMenuScrollToBottom ? handleScroll : void 0,
       className: cn(
-        "h-auto max-h-[322px] min-h-[75px] overflow-y-auto px-4 pb-[19px] pt-[17px] outline-none",
+        "max-h-[300px] overflow-y-auto overscroll-contain p-1.5 outline-none",
+        "[scrollbar-color:var(--chekin-color-gray-3)_transparent] [scrollbar-width:thin] [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb]:bg-[var(--chekin-color-gray-3)] [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar]:w-1.5",
         menuClassName
       ),
       children: [
-        !hasOptions && (emptyContent ?? /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("div", { className: "mt-[10px] text-left text-[16px] text-[var(--chekin-color-brand-navy)]", children: emptyMessage })),
+        !hasOptions && (emptyContent ?? /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("div", { className: "px-3 py-3 text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: emptyMessage })),
         options.map((option, index) => {
           const isSelected = isOptionSelected2 ? isOptionSelected2(option, selectedList) : isOptionSelected(option, selectedValue, selectedValues);
           const isHighlighted = index === highlightedIndex;
@@ -13088,7 +13126,7 @@ function SelectMenuPanel({
     "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)]",
+        "absolute left-0 right-0 top-full z-50 mt-1.5 overflow-hidden rounded-lg border border-[var(--chekin-color-gray-3)] bg-white shadow-[0_4px_8px_-2px_rgba(22,22,67,0.06),0_16px_32px_-12px_rgba(33,72,255,0.18)] ring-1 ring-black/[0.02] animate-in fade-in-0 zoom-in-95 slide-in-from-top-1 duration-150",
         className
       ),
       children
@@ -13097,7 +13135,7 @@ function SelectMenuPanel({
 }
 
 // src/dashboard/_select-internals/SelectSearchInput.tsx
-var import_lucide_react43 = require("lucide-react");
+var import_lucide_react44 = require("lucide-react");
 var import_jsx_runtime150 = require("react/jsx-runtime");
 function SelectSearchInput({
   inputRef,
@@ -13108,12 +13146,12 @@ function SelectSearchInput({
   onChange,
   onKeyDown
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime150.jsx)("div", { className: "border-b border-[#f2f4f8] px-4 pb-2 pt-3", children: /* @__PURE__ */ (0, import_jsx_runtime150.jsxs)("div", { className: "relative", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime150.jsx)("div", { className: "border-b border-[var(--chekin-color-gray-3)] bg-white p-2", children: /* @__PURE__ */ (0, import_jsx_runtime150.jsxs)("div", { className: "relative", children: [
     /* @__PURE__ */ (0, import_jsx_runtime150.jsx)(
-      import_lucide_react43.Search,
+      import_lucide_react44.Search,
       {
         "aria-hidden": "true",
-        className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-[var(--chekin-color-gray-2)]"
+        className: "pointer-events-none absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-[var(--chekin-color-gray-2)]"
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime150.jsx)(
@@ -13128,14 +13166,14 @@ function SelectSearchInput({
         autoComplete: "off",
         "aria-controls": listboxId,
         "aria-activedescendant": activeOptionId,
-        className: "m-0 box-border h-9 w-full rounded-md border border-[var(--chekin-color-gray-3)] bg-white px-9 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)]"
+        className: "m-0 box-border h-9 w-full rounded-md border border-[var(--chekin-color-gray-3)] bg-white pl-8 pr-3 text-[14px] font-medium text-[var(--chekin-color-brand-navy)] outline-none transition-colors placeholder:text-[var(--chekin-color-gray-2)] hover:border-[var(--chekin-color-gray-2)] focus:border-[var(--chekin-color-brand-blue)] focus:ring-2 focus:ring-[var(--chekin-color-brand-blue)]/15"
       }
     )
   ] }) });
 }
 
 // src/dashboard/_select-internals/SelectTrigger.tsx
-var import_lucide_react44 = require("lucide-react");
+var import_lucide_react45 = require("lucide-react");
 var import_jsx_runtime151 = require("react/jsx-runtime");
 function SelectTrigger({
   triggerRef,
@@ -13152,6 +13190,7 @@ function SelectTrigger({
   invalid,
   placeholder,
   valueLabel,
+  leftIcon,
   onClick,
   onKeyDown,
   onBlur
@@ -13175,15 +13214,17 @@ function SelectTrigger({
       onKeyDown,
       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",
+        "relative m-0 box-border flex h-12 w-full cursor-pointer items-center justify-between gap-2 rounded-[6px] border-0 pr-4 text-left text-[16px] font-medium leading-5 outline-none transition-colors duration-200",
+        leftIcon ? "pl-10" : "pl-4",
         isEmpty ? "bg-[var(--empty-field-background)] text-[var(--chekin-color-gray-1)]" : "bg-transparent text-[var(--chekin-color-brand-navy)]",
         disabled && !loading && "cursor-not-allowed opacity-50",
         loading && "!cursor-progress"
       ),
       children: [
+        leftIcon && /* @__PURE__ */ (0, import_jsx_runtime151.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_runtime151.jsx)("span", { className: "flex h-full w-10 items-center justify-center", children: leftIcon }) }),
         /* @__PURE__ */ (0, import_jsx_runtime151.jsx)("span", { id: valueId, className: "block min-w-0 flex-1 truncate text-left", children: valueLabel ?? (isOpen ? placeholder : null) }),
         /* @__PURE__ */ (0, import_jsx_runtime151.jsx)("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ (0, import_jsx_runtime151.jsx)(
-          import_lucide_react44.ChevronDown,
+          import_lucide_react45.ChevronDown,
           {
             size: 16,
             className: cn(
@@ -13198,7 +13239,7 @@ function SelectTrigger({
 }
 
 // src/dashboard/_select-internals/ComboboxTrigger.tsx
-var import_lucide_react45 = require("lucide-react");
+var import_lucide_react46 = require("lucide-react");
 var import_react_i18next30 = require("react-i18next");
 var import_jsx_runtime152 = require("react/jsx-runtime");
 function ComboboxTrigger({
@@ -13230,6 +13271,7 @@ function ComboboxTrigger({
   onClear,
   clearLabel,
   leadingContent,
+  leftIcon,
   containerClassName,
   inputClassName,
   hideIndicator,
@@ -13260,11 +13302,13 @@ function ComboboxTrigger({
         containerClassName
       ),
       children: [
+        leftIcon && /* @__PURE__ */ (0, import_jsx_runtime152.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_runtime152.jsx)("span", { className: "flex h-full w-10 items-center justify-center", children: leftIcon }) }),
         /* @__PURE__ */ (0, import_jsx_runtime152.jsxs)(
           "div",
           {
             className: cn(
-              "flex min-w-0 flex-1 items-center gap-2 py-[10px] pl-4",
+              "flex min-w-0 flex-1 items-center gap-2 py-[10px]",
+              leftIcon ? "pl-10" : "pl-4",
               isMulti && "flex-wrap"
             ),
             children: [
@@ -13307,7 +13351,7 @@ function ComboboxTrigger({
               onClick: onClear,
               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": clearLabel,
-              children: /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(import_lucide_react45.SquareX, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
+              children: /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(import_lucide_react46.SquareX, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
             }
           ),
           !hideIndicator && /* @__PURE__ */ (0, import_jsx_runtime152.jsx)(
@@ -13763,7 +13807,7 @@ function useSelectState(params) {
 }
 
 // src/dashboard/_select-internals/slots/DefaultMultiValueChip.tsx
-var import_lucide_react46 = require("lucide-react");
+var import_lucide_react47 = require("lucide-react");
 var import_react_i18next31 = require("react-i18next");
 var import_jsx_runtime153 = require("react/jsx-runtime");
 function DefaultMultiValueChip({
@@ -13773,8 +13817,8 @@ function DefaultMultiValueChip({
 }) {
   const { t } = (0, import_react_i18next31.useTranslation)();
   const labelText = typeof option.label === "string" ? option.label : String(option.value);
-  return /* @__PURE__ */ (0, import_jsx_runtime153.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_runtime153.jsx)("span", { className: "whitespace-nowrap", children: option.label }),
+  return /* @__PURE__ */ (0, import_jsx_runtime153.jsxs)("span", { className: "inline-flex items-center gap-1 rounded-md border border-[var(--chekin-color-gray-3)] bg-[var(--chekin-color-surface-pressed)] py-0.5 pl-2 pr-1 text-[13px] font-medium text-[var(--chekin-color-brand-navy)] transition-colors", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime153.jsx)("span", { className: "whitespace-nowrap leading-5", children: option.label }),
     !readOnly && /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(
       "button",
       {
@@ -13783,9 +13827,9 @@ function DefaultMultiValueChip({
           event.stopPropagation();
           onRemove();
         },
-        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]",
+        className: "flex h-4 w-4 items-center justify-center rounded-sm border-0 bg-transparent p-0 text-[var(--chekin-color-gray-1)] outline-none transition-colors hover:bg-white/70 hover:text-[var(--chekin-color-brand-navy)] focus-visible:ring-2 focus-visible:ring-[var(--chekin-color-brand-blue)]/30",
         "aria-label": t("remove_item", { label: labelText }),
-        children: /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(import_lucide_react46.SquareX, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
+        children: /* @__PURE__ */ (0, import_jsx_runtime153.jsx)(import_lucide_react47.X, { size: 12, strokeWidth: 2.5 })
       }
     )
   ] });
@@ -13826,6 +13870,7 @@ function DefaultControl(props) {
     clearLabel,
     hideIndicator,
     autoFocus,
+    leftIcon,
     components
   } = props;
   const Chip = components.MultiValueChip ?? DefaultMultiValueChip;
@@ -13863,6 +13908,7 @@ function DefaultControl(props) {
       clearLabel,
       hideIndicator,
       autoFocus,
+      leftIcon,
       leadingContent: isMulti ? selectedOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime154.jsx)(
         Chip,
         {
@@ -13893,7 +13939,8 @@ function StaticControl(props) {
     disabled,
     valueLabel,
     placeholder,
-    onContainerClick
+    onContainerClick,
+    leftIcon
   } = props;
   return /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(
     SelectTrigger,
@@ -13911,6 +13958,7 @@ function StaticControl(props) {
       invalid,
       placeholder,
       valueLabel,
+      leftIcon,
       onClick: onContainerClick,
       onKeyDown: () => void 0
     }
@@ -13942,7 +13990,8 @@ function DefaultMenuList(props) {
     components,
     inputValue,
     formatOptionLabel,
-    isOptionSelected: isOptionSelected2
+    isOptionSelected: isOptionSelected2,
+    onMenuScrollToBottom
   } = props;
   return /* @__PURE__ */ (0, import_jsx_runtime156.jsx)(
     SelectMenu,
@@ -13969,7 +14018,8 @@ function DefaultMenuList(props) {
       components,
       inputValue,
       formatOptionLabel,
-      isOptionSelected: isOptionSelected2
+      isOptionSelected: isOptionSelected2,
+      onMenuScrollToBottom
     }
   );
 }
@@ -14059,7 +14109,9 @@ function SelectInternal(props, ref) {
     components: userComponents,
     onInputChange,
     searchPosition = "trigger",
-    menuHeader
+    menuHeader,
+    onMenuScrollToBottom,
+    leftIcon
   } = props;
   const isSearchInDropdown = searchPosition === "dropdown";
   const isMulti = props.isMulti === true;
@@ -14181,6 +14233,7 @@ function SelectInternal(props, ref) {
             clearLabel: isMulti ? t("clear_all") : t("clear"),
             hideIndicator,
             autoFocus,
+            leftIcon,
             components
           }
         ),
@@ -14199,7 +14252,8 @@ function SelectInternal(props, ref) {
             legend: resolvedLabel,
             label: resolvedLabel,
             tooltip,
-            onClick: state.handleContainerClick
+            onClick: state.handleContainerClick,
+            labelClassName: leftIcon ? "pl-[28px]" : void 0
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime158.jsxs)(
@@ -14250,7 +14304,8 @@ function SelectInternal(props, ref) {
                   components,
                   inputValue: state.inputValue,
                   formatOptionLabel,
-                  isOptionSelected: isOptionSelected2
+                  isOptionSelected: isOptionSelected2,
+                  onMenuScrollToBottom
                 }
               ),
               state.canCreateNewOption && /* @__PURE__ */ (0, import_jsx_runtime158.jsx)(
@@ -14314,7 +14369,8 @@ function VirtualMenuList(props) {
     components,
     inputValue = "",
     formatOptionLabel,
-    isOptionSelected: isOptionSelectedProp
+    isOptionSelected: isOptionSelectedProp,
+    onMenuScrollToBottom
   } = props;
   const {
     canLoadMore,
@@ -14362,6 +14418,19 @@ function VirtualMenuList(props) {
   const lastOptionIndex = options.length - 1;
   const emptyMessage = noOptionsMessage?.() ?? t("no_options");
   const isOptionSelected2 = (option) => isOptionSelectedProp ? isOptionSelectedProp(option, selectedOptions) : selectedOptions.some((s) => s.value === option.value);
+  const wasAtBottomRef = React51.useRef(false);
+  const handleScroll = React51.useCallback(
+    (event) => {
+      if (!onMenuScrollToBottom) return;
+      const target = event.currentTarget;
+      const atBottom = target.scrollHeight - target.scrollTop - target.clientHeight <= 1;
+      if (atBottom && !wasAtBottomRef.current) {
+        onMenuScrollToBottom(event);
+      }
+      wasAtBottomRef.current = atBottom;
+    },
+    [onMenuScrollToBottom]
+  );
   if (options.length === 0) {
     return /* @__PURE__ */ (0, import_jsx_runtime159.jsx)("div", { className: "min-h-[75px] px-4 pb-[19px] pt-[17px]", children: isLoadingMore ? /* @__PURE__ */ (0, import_jsx_runtime159.jsxs)(
       "div",
@@ -14390,6 +14459,7 @@ function VirtualMenuList(props) {
       ref: scrollRef,
       className: cn("overflow-y-auto", menuClassName),
       style: { height: `${measuredListHeight}px` },
+      onScroll: onMenuScrollToBottom ? handleScroll : void 0,
       children: /* @__PURE__ */ (0, import_jsx_runtime159.jsx)(
         "div",
         {
@@ -14871,7 +14941,6 @@ function SelectCheckboxOption(props) {
     isSelected,
     isHighlighted,
     isDisabled,
-    isLast,
     id,
     onClick,
     onHover,
@@ -14891,11 +14960,11 @@ function SelectCheckboxOption(props) {
       onClick: () => onClick(option),
       onMouseMove: () => onHover(index),
       className: cn(
-        "flex w-full items-center gap-3 border-0 border-b border-[#f2f4f8] bg-white px-4 py-[14px] text-left text-[16px] font-medium leading-5 text-[var(--chekin-color-brand-navy)] outline-none transition-colors",
-        isLast && "border-b-transparent",
+        "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 && "font-bold",
-        isDisabled && "cursor-default opacity-40"
+        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__ */ (0, import_jsx_runtime167.jsx)(
@@ -14908,9 +14977,9 @@ function SelectCheckboxOption(props) {
             className: "pointer-events-none shrink-0"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime167.jsxs)("span", { className: "flex min-w-0 flex-1 items-start justify-between gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime167.jsxs)("span", { className: "flex min-w-0 flex-1 items-center justify-between gap-2", children: [
           /* @__PURE__ */ (0, import_jsx_runtime167.jsx)("span", { className: "block break-words", children: option.label }),
-          option.description && /* @__PURE__ */ (0, import_jsx_runtime167.jsx)("span", { className: "shrink-0 text-[12px] font-bold italic text-[#777e91]", children: option.description })
+          option.description && /* @__PURE__ */ (0, import_jsx_runtime167.jsx)("span", { className: "shrink-0 text-[12px] font-medium italic text-[var(--chekin-color-gray-1)]", children: option.description })
         ] })
       ]
     }
@@ -14918,7 +14987,7 @@ function SelectCheckboxOption(props) {
 }
 
 // src/dashboard/select-checkboxes/CountTrigger.tsx
-var import_lucide_react47 = require("lucide-react");
+var import_lucide_react48 = require("lucide-react");
 var import_react_i18next36 = require("react-i18next");
 var import_jsx_runtime168 = require("react/jsx-runtime");
 function createCountTrigger(opts) {
@@ -14939,7 +15008,8 @@ function createCountTrigger(opts) {
       disabled,
       placeholder,
       selectedOptions,
-      onContainerClick
+      onContainerClick,
+      leftIcon
     } = props;
     const count = selectedOptions.length;
     const total = totalCount ?? count;
@@ -14961,15 +15031,17 @@ function createCountTrigger(opts) {
         disabled: isBlocked,
         onClick: onContainerClick,
         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",
+          "relative m-0 box-border flex h-12 w-full cursor-pointer items-center justify-between gap-2 rounded-[6px] border-0 pr-4 text-left text-[16px] font-medium leading-5 outline-none transition-colors duration-200",
+          leftIcon ? "pl-10" : "pl-4",
           isEmpty ? "bg-[var(--empty-field-background)] text-[var(--chekin-color-gray-1)]" : "bg-transparent text-[var(--chekin-color-brand-navy)]",
           disabled && !loading && "cursor-not-allowed opacity-50",
           loading && "!cursor-progress"
         ),
         children: [
+          leftIcon && /* @__PURE__ */ (0, import_jsx_runtime168.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_runtime168.jsx)("span", { className: "flex h-full w-10 items-center justify-center", children: leftIcon }) }),
           /* @__PURE__ */ (0, import_jsx_runtime168.jsx)("span", { id: valueId, className: "block min-w-0 flex-1 truncate text-left", children: display }),
           /* @__PURE__ */ (0, import_jsx_runtime168.jsx)("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ (0, import_jsx_runtime168.jsx)(
-            import_lucide_react47.ChevronDown,
+            import_lucide_react48.ChevronDown,
             {
               size: 16,
               className: cn(
@@ -15355,7 +15427,7 @@ var Textarea = React61.forwardRef(function Textarea2({
 
 // src/dashboard/datepicker/Datepicker.tsx
 var React63 = __toESM(require("react"), 1);
-var import_lucide_react48 = require("lucide-react");
+var import_lucide_react49 = require("lucide-react");
 var import_react_i18next39 = require("react-i18next");
 
 // src/airbnb-fields/datepicker/useDatePickerWheel.ts
@@ -16104,7 +16176,11 @@ var Datepicker = React63.forwardRef(
     const [monthInputValue, setMonthInputValue] = React63.useState("");
     const [monthHighlightIndex, setMonthHighlightIndex] = React63.useState(-1);
     const isMobile3 = useIsMobile();
-    React63.useImperativeHandle(ref, () => dayInputRef.current, []);
+    React63.useImperativeHandle(
+      ref,
+      () => dayInputRef.current ?? mobileTriggerRef.current,
+      [isMobile3]
+    );
     React63.useEffect(() => {
       if (!isControlled) return;
       const next = partsFromDate(value ?? null);
@@ -16358,7 +16434,7 @@ var Datepicker = React63.forwardRef(
                 children: [
                   /* @__PURE__ */ (0, import_jsx_runtime174.jsx)("span", { className: "block min-w-0 flex-1 truncate text-left", children: triggerText ?? (isWheelOpen ? mobilePlaceholder : null) }),
                   /* @__PURE__ */ (0, import_jsx_runtime174.jsx)("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(
-                    import_lucide_react48.ChevronDown,
+                    import_lucide_react49.ChevronDown,
                     {
                       size: 16,
                       className: cn(
@@ -16443,7 +16519,7 @@ var Datepicker = React63.forwardRef(
                       }
                     ),
                     /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(
-                      import_lucide_react48.ChevronDown,
+                      import_lucide_react49.ChevronDown,
                       {
                         size: 14,
                         onMouseDown: (event) => {
@@ -16768,7 +16844,7 @@ function resolveRangeSelection({
 }
 
 // src/dashboard/date-range-picker/components/DateRangeInputs.tsx
-var import_lucide_react49 = require("lucide-react");
+var import_lucide_react50 = require("lucide-react");
 var import_jsx_runtime175 = require("react/jsx-runtime");
 var DEFAULT_PLACEHOLDER = "00-00-0000";
 var inputBaseClass = "m-0 box-border h-full w-full min-w-0 border-0 bg-transparent text-[16px] font-medium leading-5 text-[var(--chekin-color-brand-navy)] outline-none placeholder:text-[var(--chekin-color-gray-1)]";
@@ -16888,7 +16964,7 @@ function DateRangeInputs({
               onClick: onReset,
               className: iconButtonClass,
               "aria-label": clearLabel,
-              children: /* @__PURE__ */ (0, import_jsx_runtime175.jsx)(import_lucide_react49.SquareX, { size: 16, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
+              children: /* @__PURE__ */ (0, import_jsx_runtime175.jsx)(import_lucide_react50.SquareX, { size: 16, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
             }
           ),
           !readOnly && !hideCalendarIcon && /* @__PURE__ */ (0, import_jsx_runtime175.jsx)(
@@ -16903,7 +16979,7 @@ function DateRangeInputs({
                 focusedInput !== null || isOpen ? "text-[var(--chekin-color-brand-blue)]" : "text-[var(--chekin-color-gray-2)]"
               ),
               "aria-label": openCalendarLabel,
-              children: /* @__PURE__ */ (0, import_jsx_runtime175.jsx)(import_lucide_react49.CalendarDays, { size: 18 })
+              children: /* @__PURE__ */ (0, import_jsx_runtime175.jsx)(import_lucide_react50.CalendarDays, { size: 18 })
             }
           )
         ] })
@@ -17449,7 +17525,7 @@ var TimePicker = React69.forwardRef(function TimePicker2({ format: formatName =
 
 // src/dashboard/file-input/FileInput.tsx
 var React70 = __toESM(require("react"), 1);
-var import_lucide_react50 = require("lucide-react");
+var import_lucide_react51 = require("lucide-react");
 var import_react_i18next42 = require("react-i18next");
 var import_jsx_runtime180 = require("react/jsx-runtime");
 function defaultDownload(url) {
@@ -17561,7 +17637,7 @@ var FileInput = React70.forwardRef(function FileInput2({
                             className: "inline-flex items-center gap-[7px] truncate border-0 bg-transparent p-0 text-[14px] font-medium text-[var(--chekin-color-brand-navy)] outline-none",
                             children: [
                               /* @__PURE__ */ (0, import_jsx_runtime180.jsx)("span", { className: "truncate", children: resolvedDownloadLabel }),
-                              /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(import_lucide_react50.Download, { size: 15 })
+                              /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(import_lucide_react51.Download, { size: 15 })
                             ]
                           }
                         ) : /* @__PURE__ */ (0, import_jsx_runtime180.jsx)("span", { className: "truncate text-[14px] font-medium text-[var(--chekin-color-brand-navy)]", children: value.name }),
@@ -17573,13 +17649,13 @@ var FileInput = React70.forwardRef(function FileInput2({
                             onClick: handleClear,
                             className: "ml-2 flex h-[15px] w-[15px] items-center justify-center rounded-[3px] border-0 bg-transparent p-0 text-[#9696b9] outline-none hover:shadow-[0_3px_3px_#0f477734]",
                             "aria-label": t("remove_file"),
-                            children: /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(import_lucide_react50.SquareX, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
+                            children: /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(import_lucide_react51.SquareX, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
                           }
                         )
                       ]
                     }
                   ) : /* @__PURE__ */ (0, import_jsx_runtime180.jsx)("span", { className: "block min-w-0 flex-1 truncate text-left text-[var(--chekin-color-gray-1)]", children: placeholder ?? "" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime180.jsx)("span", { className: "ml-auto flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(import_lucide_react50.Paperclip, { size: 20 }) })
+                  /* @__PURE__ */ (0, import_jsx_runtime180.jsx)("span", { className: "ml-auto flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ (0, import_jsx_runtime180.jsx)(import_lucide_react51.Paperclip, { size: 20 }) })
                 ]
               }
             ),
@@ -17620,78 +17696,92 @@ var FileInput = React70.forwardRef(function FileInput2({
 // src/dashboard/select-icons-box/SelectIconsBox.tsx
 var React71 = __toESM(require("react"), 1);
 var import_jsx_runtime181 = require("react/jsx-runtime");
-function SelectIconsBox({
-  children,
-  icons,
-  renderIcon,
-  onSelect,
-  columns = 4,
-  iconsColor = "#6B6B95",
-  isOpen: controlledOpen,
-  defaultOpen = false,
-  onOpenChange,
-  position = "left",
-  className,
-  boxClassName
-}) {
-  const containerRef = React71.useRef(null);
-  const isControlled = controlledOpen !== void 0;
-  const [internalOpen, setInternalOpen] = React71.useState(defaultOpen);
-  const isOpen = isControlled ? controlledOpen : internalOpen;
-  const setOpen = (next) => {
-    if (!isControlled) setInternalOpen(next);
-    onOpenChange?.(next);
-  };
-  const handleToggle = (event) => {
-    if (event.target.closest("[data-icon-box-item]")) return;
-    setOpen(!isOpen);
-  };
-  useOutsideClick({
-    elementRef: containerRef,
-    onOutsideClick: () => setOpen(false),
-    isDisabled: !isOpen
-  });
-  const handlePick = (iconName) => {
-    onSelect(iconName);
-    setOpen(false);
-  };
-  return /* @__PURE__ */ (0, import_jsx_runtime181.jsxs)(
-    "div",
-    {
-      ref: containerRef,
-      onClick: handleToggle,
-      className: cn("relative inline-block", className),
-      children: [
-        children,
-        isOpen && /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(
-          "div",
-          {
-            className: cn(
-              "absolute top-full z-30 mt-1 grid max-h-[192px] overflow-y-auto rounded-[6px] bg-white p-6 shadow-[0_15px_15px_0_rgba(33,72,255,0.2)]",
-              position === "left" && "left-0",
-              position === "right" && "right-0",
-              position === "center" && "left-1/2 -translate-x-1/2",
-              boxClassName
-            ),
-            style: { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` },
-            children: icons.map((iconName) => /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(
-              "button",
-              {
-                type: "button",
-                "data-icon-box-item": true,
-                onClick: () => handlePick(iconName),
-                className: "relative flex h-10 w-10 cursor-pointer items-center justify-center rounded-full border-0 bg-transparent p-0 outline-none hover:bg-[#f4f6f8]",
-                "aria-label": iconName,
-                children: renderIcon(iconName, iconsColor)
-              },
-              iconName
-            ))
-          }
-        )
-      ]
-    }
-  );
-}
+var FOCUSABLE_TRIGGER_SELECTOR2 = 'input:not([type="hidden"]):not([disabled]):not([readonly]), button:not([disabled])';
+var SelectIconsBox = React71.forwardRef(
+  function SelectIconsBox2({
+    children,
+    icons,
+    renderIcon,
+    onSelect,
+    columns = 4,
+    iconsColor = "#6B6B95",
+    isOpen: controlledOpen,
+    defaultOpen = false,
+    onOpenChange,
+    position = "left",
+    className,
+    boxClassName
+  }, ref) {
+    const containerRef = React71.useRef(null);
+    const combinedContainerRef = useCombinedRef(containerRef, ref);
+    const isControlled = controlledOpen !== void 0;
+    const [internalOpen, setInternalOpen] = React71.useState(defaultOpen);
+    const isOpen = isControlled ? controlledOpen : internalOpen;
+    const setOpen = (next) => {
+      if (!isControlled) setInternalOpen(next);
+      onOpenChange?.(next);
+    };
+    const handleToggle = (event) => {
+      if (event.target.closest("[data-icon-box-item]")) return;
+      setOpen(!isOpen);
+    };
+    useOutsideClick({
+      elementRef: containerRef,
+      onOutsideClick: () => setOpen(false),
+      isDisabled: !isOpen
+    });
+    const handlePick = (iconName) => {
+      onSelect(iconName);
+      setOpen(false);
+    };
+    const handleContainerFocus = (event) => {
+      if (event.target !== event.currentTarget) return;
+      const focusable = event.currentTarget.querySelector(
+        FOCUSABLE_TRIGGER_SELECTOR2
+      );
+      focusable?.focus();
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime181.jsxs)(
+      "div",
+      {
+        ref: combinedContainerRef,
+        tabIndex: -1,
+        onFocus: handleContainerFocus,
+        onClick: handleToggle,
+        className: cn("relative inline-block outline-none", className),
+        children: [
+          children,
+          isOpen && /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(
+            "div",
+            {
+              className: cn(
+                "absolute top-full z-30 mt-1 grid max-h-[192px] overflow-y-auto rounded-[6px] bg-white p-6 shadow-[0_15px_15px_0_rgba(33,72,255,0.2)]",
+                position === "left" && "left-0",
+                position === "right" && "right-0",
+                position === "center" && "left-1/2 -translate-x-1/2",
+                boxClassName
+              ),
+              style: { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` },
+              children: icons.map((iconName) => /* @__PURE__ */ (0, import_jsx_runtime181.jsx)(
+                "button",
+                {
+                  type: "button",
+                  "data-icon-box-item": true,
+                  onClick: () => handlePick(iconName),
+                  className: "relative flex h-10 w-10 cursor-pointer items-center justify-center rounded-full border-0 bg-transparent p-0 outline-none hover:bg-[#f4f6f8]",
+                  "aria-label": iconName,
+                  children: renderIcon(iconName, iconsColor)
+                },
+                iconName
+              ))
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+SelectIconsBox.displayName = "SelectIconsBox";
 
 // src/lib/breakpoints.ts
 var DEVICE_BREAKPOINTS = {
@@ -17818,11 +17908,11 @@ LegacyTextarea.displayName = "LegacyTextarea";
 
 // src/airbnb-fields/datepicker/DatePicker.tsx
 var React73 = __toESM(require("react"), 1);
-var import_lucide_react52 = require("lucide-react");
+var import_lucide_react53 = require("lucide-react");
 
 // src/airbnb-fields/field-trigger/FieldTrigger.tsx
 var React72 = __toESM(require("react"), 1);
-var import_lucide_react51 = require("lucide-react");
+var import_lucide_react52 = require("lucide-react");
 var import_react_i18next43 = require("react-i18next");
 var import_jsx_runtime184 = require("react/jsx-runtime");
 var AirbnbFieldTrigger = React72.forwardRef(
@@ -17888,7 +17978,7 @@ var AirbnbFieldTrigger = React72.forwardRef(
     const resolvedTrailingAdornment = loading || trailingAdornment ? /* @__PURE__ */ (0, import_jsx_runtime184.jsxs)("span", { className: "flex items-center gap-2", children: [
       trailingAdornment,
       loading && /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
-        import_lucide_react51.Loader2,
+        import_lucide_react52.Loader2,
         {
           "aria-hidden": "true",
           className: "h-5 w-5 animate-spin text-[var(--chekin-color-gray-1)]"
@@ -18149,7 +18239,7 @@ var AirbnbDatePicker = React73.forwardRef(
           onClick: handleTriggerClick,
           onKeyDown: handleTriggerKeyDown,
           onBlur,
-          trailingAdornment: /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(import_lucide_react52.Calendar, { className: "h-5 w-5 text-[#1F1F1B]", strokeWidth: 2 })
+          trailingAdornment: /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(import_lucide_react53.Calendar, { className: "h-5 w-5 text-[#1F1F1B]", strokeWidth: 2 })
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
@@ -18339,7 +18429,7 @@ AirbnbInput.displayName = "AirbnbInput";
 
 // src/airbnb-fields/phone-field/PhoneField.tsx
 var React80 = __toESM(require("react"), 1);
-var import_lucide_react54 = require("lucide-react");
+var import_lucide_react55 = require("lucide-react");
 
 // src/airbnb-fields/select/Select.tsx
 var React79 = __toESM(require("react"), 1);
@@ -18688,7 +18778,7 @@ function AirbnbSelectMobileContent({
 
 // src/airbnb-fields/select/SelectTrigger.tsx
 var React75 = __toESM(require("react"), 1);
-var import_lucide_react53 = require("lucide-react");
+var import_lucide_react54 = require("lucide-react");
 var import_jsx_runtime191 = require("react/jsx-runtime");
 var AirbnbSelectTrigger = React75.forwardRef(
   ({
@@ -18745,7 +18835,7 @@ var AirbnbSelectTrigger = React75.forwardRef(
         onKeyDown,
         onBlur,
         trailingAdornment: /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(
-          import_lucide_react53.ChevronDown,
+          import_lucide_react54.ChevronDown,
           {
             className: open ? "h-6 w-6 rotate-180 text-[#1F1F1B] transition-transform" : "h-6 w-6 text-[#1F1F1B] transition-transform"
           }
@@ -19532,7 +19622,7 @@ var AirbnbPhoneField = React80.forwardRef(
                 children: [
                   /* @__PURE__ */ (0, import_jsx_runtime193.jsx)("span", { children: valueLabel ?? codePlaceholder }),
                   /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
-                    import_lucide_react54.ChevronDown,
+                    import_lucide_react55.ChevronDown,
                     {
                       className: cn("h-5 w-5 transition-transform", open ? "rotate-180" : ""),
                       strokeWidth: 2
@@ -19583,7 +19673,7 @@ AirbnbPhoneField.displayName = "AirbnbPhoneField";
 
 // src/airbnb-fields/searchable-select/SearchableSelect.tsx
 var React81 = __toESM(require("react"), 1);
-var import_lucide_react55 = require("lucide-react");
+var import_lucide_react56 = require("lucide-react");
 var import_react_virtual3 = require("@tanstack/react-virtual");
 var import_react90 = require("react");
 var import_jsx_runtime194 = require("react/jsx-runtime");
@@ -19821,7 +19911,7 @@ var AirbnbSearchableSelectInternal = ({
         onKeyDown: handleTriggerKeyDown,
         onBlur,
         trailingAdornment: /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(
-          import_lucide_react55.ChevronDown,
+          import_lucide_react56.ChevronDown,
           {
             className: cn(
               "h-6 w-6 text-[#1F1F1B] transition-transform",
@@ -19919,7 +20009,7 @@ function AirbnbSearchableSelectContent({
   return /* @__PURE__ */ (0, import_jsx_runtime194.jsxs)("div", { className: "p-2", children: [
     /* @__PURE__ */ (0, import_jsx_runtime194.jsxs)("div", { className: "relative mb-2", children: [
       /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(
-        import_lucide_react55.Search,
+        import_lucide_react56.Search,
         {
           "aria-hidden": "true",
           className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 text-[#9696B9]"
@@ -20029,13 +20119,13 @@ function getNextEnabledIndex(options, startIndex, step) {
 // src/airbnb-fields/search-input/SearchInput.tsx
 var React82 = __toESM(require("react"), 1);
 var import_react_i18next44 = require("react-i18next");
-var import_lucide_react56 = require("lucide-react");
+var import_lucide_react57 = require("lucide-react");
 var import_jsx_runtime195 = require("react/jsx-runtime");
 var AirbnbSearchInput = React82.forwardRef(({ onReset, placeholder, wrapperClassName, ...props }, ref) => {
   const { t } = (0, import_react_i18next44.useTranslation)();
   const placeholderText = placeholder || t("search_property") + "...";
   return /* @__PURE__ */ (0, import_jsx_runtime195.jsxs)("div", { className: cn("input-wrapper relative", wrapperClassName), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(import_lucide_react56.Search, { className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 transform text-[#9696B9]" }),
+    /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(import_lucide_react57.Search, { className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 transform text-[#9696B9]" }),
     /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(
       "input",
       {
@@ -20061,7 +20151,7 @@ var AirbnbSearchInput = React82.forwardRef(({ onReset, placeholder, wrapperClass
         variant: "ghost",
         onClick: onReset,
         className: "absolute right-0 top-1/2 h-5 w-5 -translate-y-1/2 transform text-[#9696B9]",
-        children: /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(import_lucide_react56.X, { className: "h-5 w-5" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(import_lucide_react57.X, { className: "h-5 w-5" })
       }
     )
   ] });