@chekinapp/ui 0.0.113 → 0.0.115

package/dist/index.js

@@ -12436,6 +12436,7 @@ import { useTranslation as useTranslation33 } from "react-i18next";
 // src/dashboard/_select-internals/SelectFieldShell.tsx
 import { useTranslation as useTranslation27 } from "react-i18next";
 import { jsx as jsx144, jsxs as jsxs91 } from "react/jsx-runtime";
+var FOCUSABLE_TRIGGER_SELECTOR = 'input:not([type="hidden"]):not([disabled]):not([readonly]), button:not([disabled])';
 function SelectFieldShell({
   containerRef,
   className,
@@ -12456,13 +12457,22 @@ function SelectFieldShell({
 }) {
   const { t } = useTranslation27();
   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__ */ jsxs91(
     "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
@@ -12534,6 +12544,7 @@ function defaultIsOptionSelected(option, selectValue) {
 }
 
 // src/dashboard/_select-internals/slots/DefaultOption.tsx
+import { Check as Check6 } from "lucide-react";
 import { jsx as jsx145, jsxs as jsxs92 } from "react/jsx-runtime";
 function DefaultOption(props) {
   const {
@@ -12542,7 +12553,7 @@ function DefaultOption(props) {
     isSelected,
     isHighlighted,
     isDisabled,
-    isLast,
+    isMulti,
     id,
     onClick,
     onHover,
@@ -12570,15 +12581,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__ */ jsx145("span", { className: "block break-words", children: labelContent }),
-        option.description && /* @__PURE__ */ jsx145("span", { className: "ml-2 mt-[3px] shrink-0 text-[12px] font-bold italic text-[#777e91]", children: option.description })
+        /* @__PURE__ */ jsx145("span", { className: "block min-w-0 break-words", children: labelContent }),
+        option.description && /* @__PURE__ */ jsx145("span", { className: "ml-auto shrink-0 self-center text-[12px] font-medium italic text-[var(--chekin-color-gray-1)]", children: option.description }),
+        isSelected && /* @__PURE__ */ jsx145(
+          Check6,
+          {
+            "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
+          }
+        )
       ]
     }
   );
@@ -12610,7 +12632,8 @@ function SelectMenu({
   components,
   inputValue = "",
   formatOptionLabel,
-  isOptionSelected: isOptionSelected2
+  isOptionSelected: isOptionSelected2,
+  onMenuScrollToBottom
 }) {
   const { t } = useTranslation28();
   const emptyMessage = noOptionsMessage?.() ?? t("no_options");
@@ -12621,6 +12644,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__ */ jsxs93(
     "div",
     {
@@ -12633,12 +12669,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__ */ jsx146("div", { className: "mt-[10px] text-left text-[16px] text-[var(--chekin-color-brand-navy)]", children: emptyMessage })),
+        !hasOptions && (emptyContent ?? /* @__PURE__ */ jsx146("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;
@@ -12728,7 +12766,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
@@ -12748,12 +12786,12 @@ function SelectSearchInput({
   onChange,
   onKeyDown
 }) {
-  return /* @__PURE__ */ jsx148("div", { className: "border-b border-[#f2f4f8] px-4 pb-2 pt-3", children: /* @__PURE__ */ jsxs95("div", { className: "relative", children: [
+  return /* @__PURE__ */ jsx148("div", { className: "border-b border-[var(--chekin-color-gray-3)] bg-white p-2", children: /* @__PURE__ */ jsxs95("div", { className: "relative", children: [
     /* @__PURE__ */ jsx148(
       Search3,
       {
         "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__ */ jsx148(
@@ -12768,7 +12806,7 @@ 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"
       }
     )
   ] }) });
@@ -12792,6 +12830,7 @@ function SelectTrigger({
   invalid,
   placeholder,
   valueLabel,
+  leftIcon,
   onClick,
   onKeyDown,
   onBlur
@@ -12815,12 +12854,14 @@ 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__ */ jsx149("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__ */ jsx149("span", { className: "flex h-full w-10 items-center justify-center", children: leftIcon }) }),
         /* @__PURE__ */ jsx149("span", { id: valueId, className: "block min-w-0 flex-1 truncate text-left", children: valueLabel ?? (isOpen ? placeholder : null) }),
         /* @__PURE__ */ jsx149("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ jsx149(
           ChevronDown2,
@@ -12870,6 +12911,7 @@ function ComboboxTrigger({
   onClear,
   clearLabel,
   leadingContent,
+  leftIcon,
   containerClassName,
   inputClassName,
   hideIndicator,
@@ -12900,11 +12942,13 @@ function ComboboxTrigger({
         containerClassName
       ),
       children: [
+        leftIcon && /* @__PURE__ */ jsx150("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__ */ jsx150("span", { className: "flex h-full w-10 items-center justify-center", children: leftIcon }) }),
         /* @__PURE__ */ jsxs97(
           "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: [
@@ -13403,7 +13447,7 @@ function useSelectState(params) {
 }
 
 // src/dashboard/_select-internals/slots/DefaultMultiValueChip.tsx
-import { SquareX as SquareX3 } from "lucide-react";
+import { X as X10 } from "lucide-react";
 import { useTranslation as useTranslation31 } from "react-i18next";
 import { jsx as jsx151, jsxs as jsxs98 } from "react/jsx-runtime";
 function DefaultMultiValueChip({
@@ -13413,8 +13457,8 @@ function DefaultMultiValueChip({
 }) {
   const { t } = useTranslation31();
   const labelText = typeof option.label === "string" ? option.label : String(option.value);
-  return /* @__PURE__ */ jsxs98("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__ */ jsx151("span", { className: "whitespace-nowrap", children: option.label }),
+  return /* @__PURE__ */ jsxs98("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__ */ jsx151("span", { className: "whitespace-nowrap leading-5", children: option.label }),
     !readOnly && /* @__PURE__ */ jsx151(
       "button",
       {
@@ -13423,9 +13467,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__ */ jsx151(SquareX3, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
+        children: /* @__PURE__ */ jsx151(X10, { size: 12, strokeWidth: 2.5 })
       }
     )
   ] });
@@ -13466,6 +13510,7 @@ function DefaultControl(props) {
     clearLabel,
     hideIndicator,
     autoFocus,
+    leftIcon,
     components
   } = props;
   const Chip = components.MultiValueChip ?? DefaultMultiValueChip;
@@ -13503,6 +13548,7 @@ function DefaultControl(props) {
       clearLabel,
       hideIndicator,
       autoFocus,
+      leftIcon,
       leadingContent: isMulti ? selectedOptions.map((option) => /* @__PURE__ */ jsx152(
         Chip,
         {
@@ -13533,7 +13579,8 @@ function StaticControl(props) {
     disabled,
     valueLabel,
     placeholder,
-    onContainerClick
+    onContainerClick,
+    leftIcon
   } = props;
   return /* @__PURE__ */ jsx153(
     SelectTrigger,
@@ -13551,6 +13598,7 @@ function StaticControl(props) {
       invalid,
       placeholder,
       valueLabel,
+      leftIcon,
       onClick: onContainerClick,
       onKeyDown: () => void 0
     }
@@ -13582,7 +13630,8 @@ function DefaultMenuList(props) {
     components,
     inputValue,
     formatOptionLabel,
-    isOptionSelected: isOptionSelected2
+    isOptionSelected: isOptionSelected2,
+    onMenuScrollToBottom
   } = props;
   return /* @__PURE__ */ jsx154(
     SelectMenu,
@@ -13609,7 +13658,8 @@ function DefaultMenuList(props) {
       components,
       inputValue,
       formatOptionLabel,
-      isOptionSelected: isOptionSelected2
+      isOptionSelected: isOptionSelected2,
+      onMenuScrollToBottom
     }
   );
 }
@@ -13699,7 +13749,9 @@ function SelectInternal(props, ref) {
     components: userComponents,
     onInputChange,
     searchPosition = "trigger",
-    menuHeader
+    menuHeader,
+    onMenuScrollToBottom,
+    leftIcon
   } = props;
   const isSearchInDropdown = searchPosition === "dropdown";
   const isMulti = props.isMulti === true;
@@ -13821,6 +13873,7 @@ function SelectInternal(props, ref) {
             clearLabel: isMulti ? t("clear_all") : t("clear"),
             hideIndicator,
             autoFocus,
+            leftIcon,
             components
           }
         ),
@@ -13839,7 +13892,8 @@ function SelectInternal(props, ref) {
             legend: resolvedLabel,
             label: resolvedLabel,
             tooltip,
-            onClick: state.handleContainerClick
+            onClick: state.handleContainerClick,
+            labelClassName: leftIcon ? "pl-[28px]" : void 0
           }
         ),
         /* @__PURE__ */ jsxs99(
@@ -13890,7 +13944,8 @@ function SelectInternal(props, ref) {
                   components,
                   inputValue: state.inputValue,
                   formatOptionLabel,
-                  isOptionSelected: isOptionSelected2
+                  isOptionSelected: isOptionSelected2,
+                  onMenuScrollToBottom
                 }
               ),
               state.canCreateNewOption && /* @__PURE__ */ jsx156(
@@ -13954,7 +14009,8 @@ function VirtualMenuList(props) {
     components,
     inputValue = "",
     formatOptionLabel,
-    isOptionSelected: isOptionSelectedProp
+    isOptionSelected: isOptionSelectedProp,
+    onMenuScrollToBottom
   } = props;
   const {
     canLoadMore,
@@ -14002,6 +14058,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__ */ jsx157("div", { className: "min-h-[75px] px-4 pb-[19px] pt-[17px]", children: isLoadingMore ? /* @__PURE__ */ jsxs100(
       "div",
@@ -14030,6 +14099,7 @@ function VirtualMenuList(props) {
       ref: scrollRef,
       className: cn("overflow-y-auto", menuClassName),
       style: { height: `${measuredListHeight}px` },
+      onScroll: onMenuScrollToBottom ? handleScroll : void 0,
       children: /* @__PURE__ */ jsx157(
         "div",
         {
@@ -14511,7 +14581,6 @@ function SelectCheckboxOption(props) {
     isSelected,
     isHighlighted,
     isDisabled,
-    isLast,
     id,
     onClick,
     onHover,
@@ -14531,11 +14600,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__ */ jsx165(
@@ -14548,9 +14617,9 @@ function SelectCheckboxOption(props) {
             className: "pointer-events-none shrink-0"
           }
         ),
-        /* @__PURE__ */ jsxs102("span", { className: "flex min-w-0 flex-1 items-start justify-between gap-2", children: [
+        /* @__PURE__ */ jsxs102("span", { className: "flex min-w-0 flex-1 items-center justify-between gap-2", children: [
           /* @__PURE__ */ jsx165("span", { className: "block break-words", children: option.label }),
-          option.description && /* @__PURE__ */ jsx165("span", { className: "shrink-0 text-[12px] font-bold italic text-[#777e91]", children: option.description })
+          option.description && /* @__PURE__ */ jsx165("span", { className: "shrink-0 text-[12px] font-medium italic text-[var(--chekin-color-gray-1)]", children: option.description })
         ] })
       ]
     }
@@ -14579,7 +14648,8 @@ function createCountTrigger(opts) {
       disabled,
       placeholder,
       selectedOptions,
-      onContainerClick
+      onContainerClick,
+      leftIcon
     } = props;
     const count = selectedOptions.length;
     const total = totalCount ?? count;
@@ -14601,12 +14671,14 @@ 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__ */ jsx166("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__ */ jsx166("span", { className: "flex h-full w-10 items-center justify-center", children: leftIcon }) }),
           /* @__PURE__ */ jsx166("span", { id: valueId, className: "block min-w-0 flex-1 truncate text-left", children: display }),
           /* @__PURE__ */ jsx166("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ jsx166(
             ChevronDown3,
@@ -15744,7 +15816,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);
@@ -16408,7 +16484,7 @@ function resolveRangeSelection({
 }
 
 // src/dashboard/date-range-picker/components/DateRangeInputs.tsx
-import { CalendarDays, SquareX as SquareX4 } from "lucide-react";
+import { CalendarDays, SquareX as SquareX3 } from "lucide-react";
 import { jsx as jsx173, jsxs as jsxs109 } from "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)]";
@@ -16528,7 +16604,7 @@ function DateRangeInputs({
               onClick: onReset,
               className: iconButtonClass,
               "aria-label": clearLabel,
-              children: /* @__PURE__ */ jsx173(SquareX4, { size: 16, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
+              children: /* @__PURE__ */ jsx173(SquareX3, { size: 16, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
             }
           ),
           !readOnly && !hideCalendarIcon && /* @__PURE__ */ jsx173(
@@ -17092,7 +17168,7 @@ var TimePicker = React69.forwardRef(function TimePicker2({ format: formatName =
 
 // src/dashboard/file-input/FileInput.tsx
 import * as React70 from "react";
-import { Download, Paperclip, SquareX as SquareX5 } from "lucide-react";
+import { Download, Paperclip, SquareX as SquareX4 } from "lucide-react";
 import { useTranslation as useTranslation42 } from "react-i18next";
 import { jsx as jsx178, jsxs as jsxs112 } from "react/jsx-runtime";
 function defaultDownload(url) {
@@ -17216,7 +17292,7 @@ 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__ */ jsx178(SquareX5, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
+                            children: /* @__PURE__ */ jsx178(SquareX4, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
                           }
                         )
                       ]
@@ -17263,78 +17339,92 @@ var FileInput = React70.forwardRef(function FileInput2({
 // src/dashboard/select-icons-box/SelectIconsBox.tsx
 import * as React71 from "react";
 import { jsx as jsx179, jsxs as jsxs113 } from "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__ */ jsxs113(
-    "div",
-    {
-      ref: containerRef,
-      onClick: handleToggle,
-      className: cn("relative inline-block", className),
-      children: [
-        children,
-        isOpen && /* @__PURE__ */ jsx179(
-          "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__ */ jsx179(
-              "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__ */ jsxs113(
+      "div",
+      {
+        ref: combinedContainerRef,
+        tabIndex: -1,
+        onFocus: handleContainerFocus,
+        onClick: handleToggle,
+        className: cn("relative inline-block outline-none", className),
+        children: [
+          children,
+          isOpen && /* @__PURE__ */ jsx179(
+            "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__ */ jsx179(
+                "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 = {
@@ -17420,9 +17510,9 @@ function toastResponseError(error, options = {}) {
 }
 
 // src/legacy-fields/textarea/Textarea.tsx
-import { forwardRef as forwardRef73, useId as useId15 } from "react";
+import { forwardRef as forwardRef74, useId as useId15 } from "react";
 import { jsx as jsx181, jsxs as jsxs115 } from "react/jsx-runtime";
-var LegacyTextarea = forwardRef73(
+var LegacyTextarea = forwardRef74(
   ({ className, textareaClassName, label, disabled, name, invalid, ...textareaProps }, ref) => {
     const inputId = useId15();
     return /* @__PURE__ */ jsxs115("div", { className: cn("relative", className), children: [
@@ -19228,7 +19318,7 @@ AirbnbPhoneField.displayName = "AirbnbPhoneField";
 import * as React81 from "react";
 import { ChevronDown as ChevronDown7, Search as Search4 } from "lucide-react";
 import { useVirtualizer as useVirtualizer3 } from "@tanstack/react-virtual";
-import { useCallback as useCallback55 } from "react";
+import { useCallback as useCallback57 } from "react";
 import { jsx as jsx192, jsxs as jsxs123 } from "react/jsx-runtime";
 var ROW_HEIGHT = 48;
 var DESKTOP_LIST_HEIGHT = 280;
@@ -19307,7 +19397,7 @@ var AirbnbSearchableSelectInternal = ({
     isDisabled: !open || isMobile3
   });
   const handleOnOpenChange = useEvent(onOpenChange);
-  const setSelectOpen = useCallback55(
+  const setSelectOpen = useCallback57(
     (nextOpen, options2) => {
       setOpen(nextOpen);
       handleOnOpenChange?.(nextOpen);
@@ -19672,7 +19762,7 @@ function getNextEnabledIndex(options, startIndex, step) {
 // src/airbnb-fields/search-input/SearchInput.tsx
 import * as React82 from "react";
 import { useTranslation as useTranslation44 } from "react-i18next";
-import { Search as Search5, X as X10 } from "lucide-react";
+import { Search as Search5, X as X11 } from "lucide-react";
 import { jsx as jsx193, jsxs as jsxs124 } from "react/jsx-runtime";
 var AirbnbSearchInput = React82.forwardRef(({ onReset, placeholder, wrapperClassName, ...props }, ref) => {
   const { t } = useTranslation44();
@@ -19704,7 +19794,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__ */ jsx193(X10, { className: "h-5 w-5" })
+        children: /* @__PURE__ */ jsx193(X11, { className: "h-5 w-5" })
       }
     )
   ] });