@chekinapp/ui 0.0.126 → 0.0.127

package/dist/index.cjs

@@ -345,6 +345,7 @@ __export(index_exports, {
   compressFile: () => compressFile,
   compressImage: () => compressImage,
   copyToClipboard: () => copyToClipboard,
+  countriesFilter: () => countriesFilter,
   createDisabledMatchers: () => createDisabledMatchers,
   emptyMediaVariants: () => emptyMediaVariants,
   findPhoneCode: () => findPhoneCode,
@@ -12482,7 +12483,7 @@ function Fieldset({
       {
         "aria-hidden": "true",
         className: cn(
-          "pointer-events-none absolute -top-[5px] bottom-0 left-0 right-0 m-0 min-w-0 rounded-[6px] border px-[13px] transition-colors duration-75",
+          "pointer-events-none absolute -top-[5px] bottom-0 left-0 right-0 m-0 min-w-0 rounded-[6px] border px-[13px] text-left transition-colors duration-75",
           "border-[var(--chekin-color-gray-3)]",
           isActivated && "border-[var(--chekin-color-gray-2)]",
           isFocused && "border-[var(--chekin-color-brand-blue)]",
@@ -12786,10 +12787,6 @@ Input.displayName = "Input";
 var React50 = __toESM(require("react"), 1);
 var import_react_i18next34 = require("react-i18next");
 
-// src/dashboard/select/Select.tsx
-var React49 = __toESM(require("react"), 1);
-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");
@@ -12917,6 +12914,46 @@ function isOptionSelected(option, selectedValue, selectedValues) {
 function defaultIsOptionSelected(option, selectValue) {
   return selectValue.some((item) => item.value === option.value);
 }
+var COUNTRY_ALIASES = [["T\xFCrkiye", ["Turkey", "Turkiye"]]];
+function normalizeSearchText(value) {
+  return value.normalize("NFD").replace(/[̀-ͯ]/g, "").toLowerCase();
+}
+var ALIAS_LOOKUP = COUNTRY_ALIASES.reduce(
+  (acc, [officialName, aliases]) => {
+    const officialLower = normalizeSearchText(officialName);
+    aliases.forEach((alias) => {
+      acc[normalizeSearchText(alias)] = officialLower;
+    });
+    return acc;
+  },
+  {}
+);
+function getOptionSearchText(option) {
+  if (typeof option.label === "string" || typeof option.label === "number") {
+    return String(option.label);
+  }
+  return String(option.value);
+}
+function countriesFilter(option, inputValue) {
+  const input = normalizeSearchText(inputValue.trim());
+  if (!input) {
+    return true;
+  }
+  const label = normalizeSearchText(getOptionSearchText(option));
+  if (label.includes(input)) {
+    return true;
+  }
+  const officialName = ALIAS_LOOKUP[input];
+  if (officialName && label.includes(officialName)) {
+    return true;
+  }
+  for (const [alias, official] of Object.entries(ALIAS_LOOKUP)) {
+    if (alias.includes(input) && label.includes(official)) {
+      return true;
+    }
+  }
+  return false;
+}
 
 // src/dashboard/_select-internals/slots/DefaultOption.tsx
 var import_lucide_react43 = require("lucide-react");
@@ -13266,15 +13303,19 @@ function SelectTrigger({
   labelId,
   valueId,
   describedErrorId,
+  accessibleLabel,
   hasValue,
   isOpen,
   isBlocked,
   disabled,
+  readOnly,
   loading,
   invalid,
   placeholder,
+  showPlaceholderWhenIdle,
   valueLabel,
   leftIcon,
+  hideIndicator,
   onClick,
   onKeyDown,
   onBlur
@@ -13289,7 +13330,8 @@ function SelectTrigger({
       "aria-haspopup": "listbox",
       "aria-expanded": isOpen,
       "aria-controls": listboxId,
-      "aria-labelledby": hasValue && valueId ? `${labelId} ${valueId}` : labelId,
+      "aria-label": accessibleLabel,
+      "aria-labelledby": accessibleLabel ? void 0 : hasValue && valueId ? `${labelId} ${valueId}` : labelId,
       "aria-describedby": describedErrorId,
       "aria-invalid": invalid,
       "aria-busy": loading,
@@ -13301,18 +13343,19 @@ function SelectTrigger({
         "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)]",
+        readOnly && !disabled && !loading && "cursor-default",
         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)(
+        /* @__PURE__ */ (0, import_jsx_runtime151.jsx)("span", { id: valueId, className: "block min-w-0 flex-1 truncate text-left", children: hasValue ? valueLabel : showPlaceholderWhenIdle || isOpen ? placeholder : null }),
+        /* @__PURE__ */ (0, import_jsx_runtime151.jsx)("span", { className: "flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: !hideIndicator && /* @__PURE__ */ (0, import_jsx_runtime151.jsx)(
           import_lucide_react45.ChevronDown,
           {
             size: 16,
             className: cn(
-              "transition-transform duration-200",
+              "pointer-events-none transition-transform duration-200",
               isOpen && "rotate-180 text-[var(--chekin-color-brand-blue)]"
             )
           }
@@ -13332,6 +13375,7 @@ function ComboboxTrigger({
   labelId,
   valueId,
   describedErrorId,
+  accessibleLabel,
   isOpen,
   isFocused,
   isBlocked,
@@ -13345,6 +13389,7 @@ function ComboboxTrigger({
   inputRef,
   inputValue,
   placeholder,
+  showPlaceholderWhenIdle,
   highlightedIndex,
   getOptionId: getOptionId2,
   onInputChange,
@@ -13359,7 +13404,8 @@ function ComboboxTrigger({
   containerClassName,
   inputClassName,
   hideIndicator,
-  autoFocus
+  autoFocus,
+  searchable = true
 }) {
   const { t } = (0, import_react_i18next30.useTranslation)();
   const resolvedPlaceholder = placeholder ?? t("type_to_search");
@@ -13371,7 +13417,8 @@ function ComboboxTrigger({
       "aria-haspopup": "listbox",
       "aria-expanded": isOpen,
       "aria-controls": listboxId,
-      "aria-labelledby": hasValue && valueId ? `${labelId} ${valueId}` : labelId,
+      "aria-label": accessibleLabel,
+      "aria-labelledby": accessibleLabel ? void 0 : hasValue && valueId ? `${labelId} ${valueId}` : labelId,
       "aria-describedby": describedErrorId,
       "aria-invalid": invalid,
       "aria-busy": loading,
@@ -13381,6 +13428,7 @@ function ComboboxTrigger({
         "relative box-border flex w-full cursor-text rounded-[6px] border-0 text-left text-[16px] font-medium leading-5 outline-none transition-colors duration-200",
         "min-h-12",
         isEmpty && !isFocused ? "bg-[var(--empty-field-background)]" : "bg-transparent",
+        readOnly && !disabled && !loading && "cursor-default",
         disabled && !loading && "cursor-not-allowed",
         loading && "!cursor-progress",
         containerClassName
@@ -13408,8 +13456,8 @@ function ComboboxTrigger({
                   onFocus: onInputFocus,
                   onKeyDown: onInputKeyDown,
                   disabled: isBlocked,
-                  readOnly,
-                  placeholder: isFocused || isOpen ? resolvedPlaceholder : "",
+                  readOnly: readOnly || !searchable,
+                  placeholder: searchable && (showPlaceholderWhenIdle || isFocused || isOpen) ? resolvedPlaceholder : "",
                   autoComplete: "off",
                   autoFocus,
                   "aria-autocomplete": "list",
@@ -13418,7 +13466,9 @@ function ComboboxTrigger({
                   className: cn(
                     "m-0 box-border min-w-0 flex-1 border-0 bg-transparent p-0 text-[16px] font-medium leading-5 text-[var(--chekin-color-brand-navy)] outline-none placeholder:text-[var(--chekin-color-gray-1)]",
                     isMulti && "min-w-[40px]",
-                    isBlocked && !loading && "cursor-not-allowed",
+                    !searchable && "sr-only",
+                    readOnly && !disabled && !loading && "cursor-default",
+                    disabled && !loading && "cursor-not-allowed",
                     loading && "!cursor-progress",
                     inputClassName
                   )
@@ -13565,7 +13615,9 @@ function useSelectState(params) {
     onKeyDown,
     onFocus,
     onBlur,
-    isSearchInDropdown
+    onInputChange,
+    isSearchInDropdown,
+    searchable = true
   } = params;
   const inputRef = React48.useRef(null);
   const mobileSearchInputRef = React48.useRef(null);
@@ -13579,8 +13631,10 @@ function useSelectState(params) {
     () => resolveValueLabel(singleSelected, getValueLabel),
     [singleSelected, getValueLabel]
   );
-  const isSearchOnlyInput = isMulti || Boolean(isSearchInDropdown);
-  const [inputValue, setInputValue] = React48.useState(isSearchOnlyInput ? "" : valueLabel);
+  const isSearchOnlyInput = searchable && (isMulti || Boolean(isSearchInDropdown));
+  const [inputValue, setInputValue] = React48.useState(
+    searchable && !isSearchOnlyInput ? valueLabel : ""
+  );
   const hasValue = selectedOptions.length > 0;
   const isBlocked = Boolean(disabled) || Boolean(loading) || Boolean(readOnly);
   const hasInvalidState = Boolean(error);
@@ -13595,9 +13649,10 @@ function useSelectState(params) {
   const ids = useSelectIds({ name, hasValue, error, hideErrorMessage });
   const { listboxId, getOptionId: getOptionId2 } = ids;
   React48.useEffect(() => {
+    if (!searchable) return;
     if (isSearchOnlyInput) return;
     if (!isFocused) setInputValue(valueLabel);
-  }, [valueLabel, isFocused, isSearchOnlyInput]);
+  }, [valueLabel, isFocused, isSearchOnlyInput, searchable]);
   React48.useEffect(() => {
     if (!isSearchOnlyInput) return;
     if (!isOpen) {
@@ -13606,7 +13661,7 @@ function useSelectState(params) {
     }
   }, [isOpen, isSearchOnlyInput]);
   const trimmedInput = inputValue.trim();
-  const isFiltering = isSearchOnlyInput ? trimmedInput.length > 0 : trimmedInput.length > 0 && trimmedInput.toLowerCase() !== valueLabel.toLowerCase();
+  const isFiltering = searchable && (isSearchOnlyInput ? trimmedInput.length > 0 : trimmedInput.length > 0 && trimmedInput.toLowerCase() !== valueLabel.toLowerCase());
   const filteredOptions = React48.useMemo(() => {
     if (!isFiltering) return options;
     return options.filter((option) => filterOption(option, trimmedInput));
@@ -13637,9 +13692,9 @@ function useSelectState(params) {
   }, [isOpen, filteredOptions, isOptionDisabled]);
   React48.useEffect(() => {
     if (!isOpen || highlightedIndex < 0) return;
-    optionRefs.current[highlightedIndex]?.scrollIntoView({ block: "nearest" });
+    optionRefs.current[highlightedIndex]?.scrollIntoView?.({ block: "nearest" });
   }, [highlightedIndex, isOpen]);
-  const inMenuSearchVisible = isMobile3 || Boolean(isSearchInDropdown);
+  const inMenuSearchVisible = searchable && (isMobile3 || Boolean(isSearchInDropdown));
   React48.useEffect(() => {
     if (!isOpen || !inMenuSearchVisible) return;
     const frame = window.requestAnimationFrame(
@@ -13667,7 +13722,9 @@ function useSelectState(params) {
         return;
       }
       onSelectionChange([option], { action: "select" });
-      setInputValue(isSearchInDropdown ? "" : resolveValueLabel(option, getValueLabel));
+      setInputValue(
+        searchable && !isSearchInDropdown ? resolveValueLabel(option, getValueLabel) : ""
+      );
       setIsOpen(false);
       setIsFocused(false);
       inputRef.current?.blur();
@@ -13681,7 +13738,8 @@ function useSelectState(params) {
       closeMenuOnSelect,
       setIsOpen,
       getValueLabel,
-      isSearchInDropdown
+      isSearchInDropdown,
+      searchable
     ]
   );
   const removeOption = React48.useCallback(
@@ -13716,7 +13774,9 @@ function useSelectState(params) {
       return;
     }
     onSelectionChange([newOption], { action: "create" });
-    setInputValue(isSearchInDropdown ? "" : resolveValueLabel(newOption, getValueLabel));
+    setInputValue(
+      searchable && !isSearchInDropdown ? resolveValueLabel(newOption, getValueLabel) : ""
+    );
     setIsOpen(false);
     setIsFocused(false);
     inputRef.current?.blur();
@@ -13730,14 +13790,18 @@ function useSelectState(params) {
     closeMenuOnSelect,
     setIsOpen,
     getValueLabel,
-    isSearchInDropdown
+    isSearchInDropdown,
+    searchable
   ]);
   const handleInputChange = React48.useCallback(
     (event) => {
-      setInputValue(event.target.value);
+      if (!searchable) return;
+      const nextValue = event.target.value;
+      setInputValue(nextValue);
+      onInputChange?.(nextValue);
       if (!isOpen) setIsOpen(true);
     },
-    [isOpen, setIsOpen]
+    [isOpen, onInputChange, searchable, setIsOpen]
   );
   const handleInputFocus = React48.useCallback(
     (event) => {
@@ -13745,11 +13809,11 @@ function useSelectState(params) {
       onFocus?.(event);
       setIsFocused(true);
       if (openMenuOnFocus) setIsOpen(true);
-      if (!isMulti) {
+      if (searchable && !isMulti) {
         requestAnimationFrame(() => inputRef.current?.select());
       }
     },
-    [isBlocked, onFocus, openMenuOnFocus, setIsOpen, isMulti]
+    [isBlocked, onFocus, openMenuOnFocus, setIsOpen, searchable, isMulti]
   );
   const handleContainerClick = React48.useCallback(() => {
     if (isBlocked) return;
@@ -13760,10 +13824,10 @@ function useSelectState(params) {
     (event) => {
       if (containerRef.current?.contains(event.relatedTarget)) return;
       setIsFocused(false);
-      if (!isSearchOnlyInput) setInputValue(valueLabel);
+      if (searchable && !isSearchOnlyInput) setInputValue(valueLabel);
       onBlur?.(event);
     },
-    [containerRef, isSearchOnlyInput, valueLabel, onBlur]
+    [containerRef, isSearchOnlyInput, searchable, valueLabel, onBlur]
   );
   const handleInputKeyDown = React48.useCallback(
     (event) => {
@@ -13817,7 +13881,7 @@ function useSelectState(params) {
       }
       if (event.key === "Escape") {
         event.preventDefault();
-        if (!isSearchOnlyInput) setInputValue(valueLabel);
+        if (searchable && !isSearchOnlyInput) setInputValue(valueLabel);
         setIsOpen(false);
         inputRef.current?.blur();
       }
@@ -13837,7 +13901,8 @@ function useSelectState(params) {
       selectOption,
       canCreateNewOption,
       createOption,
-      valueLabel
+      valueLabel,
+      searchable
     ]
   );
   const isEmpty = !hasValue && !inputValue;
@@ -13937,10 +14002,12 @@ function DefaultControl(props) {
     labelId,
     valueId,
     describedErrorId,
+    accessibleLabel,
     getOptionId: getOptionId2,
     inputRef,
     inputValue,
     placeholder,
+    showPlaceholderWhenIdle,
     isMulti,
     isOpen,
     isFocused,
@@ -13964,6 +14031,7 @@ function DefaultControl(props) {
     hideIndicator,
     autoFocus,
     leftIcon,
+    searchable,
     components
   } = props;
   const Chip = components.MultiValueChip ?? DefaultMultiValueChip;
@@ -13977,6 +14045,7 @@ function DefaultControl(props) {
       labelId,
       valueId,
       describedErrorId,
+      accessibleLabel,
       isOpen,
       isFocused,
       isBlocked,
@@ -13990,6 +14059,7 @@ function DefaultControl(props) {
       inputRef,
       inputValue,
       placeholder: placeholderText,
+      showPlaceholderWhenIdle,
       highlightedIndex,
       getOptionId: getOptionId2,
       onInputChange,
@@ -14002,6 +14072,7 @@ function DefaultControl(props) {
       hideIndicator,
       autoFocus,
       leftIcon,
+      searchable,
       leadingContent: isMulti ? selectedOptions.map((option) => /* @__PURE__ */ (0, import_jsx_runtime154.jsx)(
         Chip,
         {
@@ -14016,6 +14087,7 @@ function DefaultControl(props) {
 }
 
 // src/dashboard/_select-internals/slots/StaticControl.tsx
+var import_lucide_react48 = require("lucide-react");
 var import_jsx_runtime155 = require("react/jsx-runtime");
 function StaticControl(props) {
   const {
@@ -14024,6 +14096,7 @@ function StaticControl(props) {
     labelId,
     valueId,
     describedErrorId,
+    accessibleLabel,
     isOpen,
     isBlocked,
     hasValue,
@@ -14032,30 +14105,53 @@ function StaticControl(props) {
     disabled,
     valueLabel,
     placeholder,
+    showPlaceholderWhenIdle,
     onContainerClick,
+    onClear,
+    clearable,
+    clearLabel,
+    hideIndicator,
+    readOnly,
     leftIcon
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(
-    SelectTrigger,
-    {
-      triggerId,
-      listboxId,
-      labelId,
-      valueId,
-      describedErrorId,
-      hasValue,
-      isOpen,
-      isBlocked,
-      disabled,
-      loading,
-      invalid,
-      placeholder,
-      valueLabel,
-      leftIcon,
-      onClick: onContainerClick,
-      onKeyDown: () => void 0
-    }
-  );
+  const showClear = Boolean(clearable) && hasValue && !readOnly && !disabled;
+  return /* @__PURE__ */ (0, import_jsx_runtime155.jsxs)("div", { className: "relative", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(
+      SelectTrigger,
+      {
+        triggerId,
+        listboxId,
+        labelId,
+        valueId,
+        describedErrorId,
+        accessibleLabel,
+        hasValue,
+        isOpen,
+        isBlocked,
+        disabled,
+        readOnly,
+        loading,
+        invalid,
+        placeholder,
+        showPlaceholderWhenIdle,
+        valueLabel,
+        leftIcon,
+        hideIndicator,
+        onClick: onContainerClick,
+        onKeyDown: () => void 0
+      }
+    ),
+    showClear && /* @__PURE__ */ (0, import_jsx_runtime155.jsx)(
+      "button",
+      {
+        type: "button",
+        onClick: onClear,
+        className: "absolute right-9 top-1/2 flex h-5 w-5 -translate-y-1/2 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_runtime155.jsx)(import_lucide_react48.SquareX, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
+      }
+    )
+  ] });
 }
 
 // src/dashboard/_select-internals/slots/DefaultMenuList.tsx
@@ -14163,6 +14259,10 @@ function mergeComponents(overrides) {
   };
 }
 
+// src/dashboard/select/Select.tsx
+var React49 = __toESM(require("react"), 1);
+var import_react_i18next33 = require("react-i18next");
+
 // src/dashboard/select/useSetCorrectOptionIfThereIsOnlyValue.ts
 var import_react89 = require("react");
 function useSetCorrectOptionIfThereIsOnlyValue({ value, options, onChange, enabled = true }) {
@@ -14222,6 +14322,7 @@ function SelectInternal(props, ref) {
     openMenuOnFocus,
     components: userComponents,
     onInputChange,
+    searchable = true,
     searchPosition = "trigger",
     menuHeader,
     onMenuScrollToBottom,
@@ -14229,8 +14330,8 @@ function SelectInternal(props, ref) {
     formatGroupLabel,
     onReset
   } = props;
-  const isSearchInDropdown = searchPosition === "dropdown";
   const isMulti = props.isMulti === true;
+  const isSearchInDropdown = searchable && searchPosition === "dropdown";
   const clearable = !isMulti ? props.clearable ?? true : true;
   const closeMenuOnSelect = isMulti ? props.closeMenuOnSelect ?? false : void 0;
   const { t } = (0, import_react_i18next33.useTranslation)();
@@ -14289,25 +14390,24 @@ function SelectInternal(props, ref) {
     onKeyDown,
     onFocus,
     onBlur,
-    isSearchInDropdown
+    onInputChange,
+    isSearchInDropdown,
+    searchable
   });
   const components = React49.useMemo(() => {
     const merged = mergeComponents(userComponents);
-    if (isSearchInDropdown && !userComponents?.Control) {
+    if ((isSearchInDropdown || !searchable && !isMulti) && !userComponents?.Control) {
       return { ...merged, Control: StaticControl };
     }
     return merged;
-  }, [userComponents, isSearchInDropdown]);
+  }, [userComponents, isSearchInDropdown, searchable, isMulti]);
   React49.useImperativeHandle(
     ref,
     () => state.containerRef.current
   );
-  const onInputChangeRef = React49.useRef(onInputChange);
-  onInputChangeRef.current = onInputChange;
-  React49.useEffect(() => {
-    onInputChangeRef.current?.(state.inputValue);
-  }, [state.inputValue]);
-  const resolvedLabel = label ?? placeholder;
+  const hasLabel = Boolean(label);
+  const resolvedTitle = label ?? placeholder;
+  const accessibleLabel = !hasLabel && typeof placeholder === "string" ? placeholder : void 0;
   const hasInvalidState = state.hasInvalidState || Boolean(invalid);
   const hiddenValue = isMulti ? selectedOptions.map((item) => String(item.value)).join(",") : selectedOptions[0] ? String(selectedOptions[0].value) : "";
   const handleClear = (event) => {
@@ -14342,10 +14442,12 @@ function SelectInternal(props, ref) {
             labelId: state.ids.labelId,
             valueId: state.ids.valueId,
             describedErrorId: state.ids.describedErrorId,
+            accessibleLabel,
             getOptionId: state.ids.getOptionId,
             inputRef: state.inputRef,
             inputValue: state.inputValue,
             placeholder,
+            showPlaceholderWhenIdle: !hasLabel,
             isMulti,
             isOpen: state.isOpen,
             isFocused: state.isFocused,
@@ -14370,6 +14472,7 @@ function SelectInternal(props, ref) {
             hideIndicator,
             autoFocus,
             leftIcon,
+            searchable,
             components
           }
         ),
@@ -14385,8 +14488,8 @@ function SelectInternal(props, ref) {
             readOnly,
             htmlFor: state.ids.triggerId,
             labelId: state.ids.labelId,
-            legend: resolvedLabel,
-            label: resolvedLabel,
+            legend: label,
+            label,
             tooltip,
             onClick: state.handleContainerClick,
             labelClassName: leftIcon ? "pl-[28px]" : void 0,
@@ -14402,7 +14505,7 @@ function SelectInternal(props, ref) {
               state.closeMenu();
               state.setIsFocused(false);
             },
-            title: resolvedLabel,
+            title: resolvedTitle,
             className: dropdownClassName,
             drawerClassName,
             children: [
@@ -14542,9 +14645,6 @@ var PhoneInput = React50.forwardRef(
     const safeValue = value ?? EMPTY_VALUE;
     const effectiveCode = safeValue.code || defaultCode || "";
     const resolvedLabel = label ?? "";
-    const resolvedPrefixLabel = prefixLabel ?? t("prefix");
-    const isBlocked = Boolean(disabled) || Boolean(loading);
-    const isCodeBlocked = isBlocked || Boolean(readOnly) || Boolean(codeReadOnly);
     const hasExternalError = Boolean(error);
     const isPrefixRequired = autoDetectCode && Boolean(safeValue.number) && !effectiveCode;
     const hasInvalidState = hasExternalError || Boolean(invalid) || isPrefixRequired;
@@ -14626,13 +14726,17 @@ var PhoneInput = React50.forwardRef(
                 options: codeOptions,
                 value: selectedCodeOption,
                 onChange: handleCodeChange,
-                label: resolvedPrefixLabel,
+                label: prefixLabel,
                 placeholder: codePlaceholder,
-                disabled: isCodeBlocked,
+                disabled,
+                readOnly: Boolean(readOnly) || Boolean(codeReadOnly),
                 loading,
                 invalid: hasInvalidState,
                 hideErrorMessage: true,
                 searchPosition: searchable ? "dropdown" : "trigger",
+                searchable,
+                filterOption: countriesFilter,
+                clearable: false,
                 getValueLabel: (option) => option.value,
                 className: "!max-w-none",
                 dropdownClassName: "right-auto w-[280px]"
@@ -14658,7 +14762,9 @@ var PhoneInput = React50.forwardRef(
                 onFocus,
                 onBlur,
                 renderErrorMessage: false,
-                wrapperClassName: "!max-w-none"
+                wrapperClassName: "!max-w-none",
+                contentClassName: readOnly ? "!cursor-default" : void 0,
+                inputClassName: readOnly ? "!cursor-default" : void 0
               }
             )
           ] }),
@@ -14937,13 +15043,14 @@ function InfiniteScrollSelectInternal(props, ref) {
     listHeight = DEFAULT_LIST_HEIGHT,
     overscan = DEFAULT_OVERSCAN,
     loadMoreThreshold = DEFAULT_LOAD_MORE_THRESHOLD,
-    getFullSearchOption,
+    getFullSearchOption: getFullSearchOptionProp,
     filterOption: userFilterOption,
     components: userComponents,
     onInputChange: userOnInputChange,
     isMulti = false,
     ...rest
   } = props;
+  const getFullSearchOption = isMulti ? void 0 : getFullSearchOptionProp;
   const isPaginated = canLoadMore !== void 0 || isLoadingMore !== void 0 || loadMoreItems !== void 0 || onSearchChange !== void 0 || getFullSearchOption !== void 0;
   const filterOption = userFilterOption ?? (isPaginated ? passthroughFilter : defaultFilterOption);
   const [inputValue, setInputValue] = React56.useState("");
@@ -15095,7 +15202,7 @@ function SelectCheckboxOption(props) {
 }
 
 // src/dashboard/select-checkboxes/CountTrigger.tsx
-var import_lucide_react48 = require("lucide-react");
+var import_lucide_react49 = require("lucide-react");
 var import_react_i18next36 = require("react-i18next");
 var import_jsx_runtime167 = require("react/jsx-runtime");
 function createCountTrigger(opts) {
@@ -15149,7 +15256,7 @@ function createCountTrigger(opts) {
           leftIcon && /* @__PURE__ */ (0, import_jsx_runtime167.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_runtime167.jsx)("span", { className: "flex h-full w-10 items-center justify-center", children: leftIcon }) }),
           /* @__PURE__ */ (0, import_jsx_runtime167.jsx)("span", { id: valueId, className: "block min-w-0 flex-1 truncate text-left", children: display }),
           /* @__PURE__ */ (0, import_jsx_runtime167.jsx)("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ (0, import_jsx_runtime167.jsx)(
-            import_lucide_react48.ChevronDown,
+            import_lucide_react49.ChevronDown,
             {
               size: 16,
               className: cn(
@@ -15198,7 +15305,7 @@ function SelectAllRow({ label, checked, disabled, onToggle }) {
 // src/dashboard/select-checkboxes/SelectCheckboxes.tsx
 var import_jsx_runtime169 = require("react/jsx-runtime");
 function hasPaginationProps(props) {
-  return props.canLoadMore !== void 0 || props.isLoadingMore !== void 0 || props.loadMoreItems !== void 0 || props.onSearchChange !== void 0 || props.getFullSearchOption !== void 0;
+  return props.canLoadMore !== void 0 || props.isLoadingMore !== void 0 || props.loadMoreItems !== void 0 || props.onSearchChange !== void 0;
 }
 function makeTriggerSlot(render) {
   function CustomTrigger(props) {
@@ -15318,6 +15425,7 @@ function SelectCheckboxesInternal(props, ref) {
     components,
     closeMenuOnSelect,
     searchPosition: searchable ? "dropdown" : "trigger",
+    searchable,
     menuHeader,
     onInputChange: handleInputChange,
     isMulti: true
@@ -15558,7 +15666,7 @@ var Textarea = React60.forwardRef(function Textarea2({
 
 // src/dashboard/datepicker/Datepicker.tsx
 var React62 = __toESM(require("react"), 1);
-var import_lucide_react49 = require("lucide-react");
+var import_lucide_react50 = require("lucide-react");
 var import_react_i18next39 = require("react-i18next");
 
 // src/airbnb-fields/datepicker/useDatePickerWheel.ts
@@ -16592,7 +16700,7 @@ var Datepicker = React62.forwardRef(
                 children: [
                   /* @__PURE__ */ (0, import_jsx_runtime173.jsx)("span", { className: "block min-w-0 flex-1 truncate text-left", children: triggerText ?? (isWheelOpen ? mobilePlaceholder : null) }),
                   /* @__PURE__ */ (0, import_jsx_runtime173.jsx)("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
-                    import_lucide_react49.ChevronDown,
+                    import_lucide_react50.ChevronDown,
                     {
                       size: 16,
                       className: cn(
@@ -16687,7 +16795,7 @@ var Datepicker = React62.forwardRef(
                       }
                     ),
                     /* @__PURE__ */ (0, import_jsx_runtime173.jsx)(
-                      import_lucide_react49.ChevronDown,
+                      import_lucide_react50.ChevronDown,
                       {
                         size: 14,
                         onMouseDown: (event) => {
@@ -17019,7 +17127,7 @@ function resolveRangeSelection({
 }
 
 // src/dashboard/date-range-picker/components/DateRangeInputs.tsx
-var import_lucide_react50 = require("lucide-react");
+var import_lucide_react51 = require("lucide-react");
 var import_jsx_runtime174 = 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)]";
@@ -17139,7 +17247,7 @@ function DateRangeInputs({
               onClick: onReset,
               className: iconButtonClass,
               "aria-label": clearLabel,
-              children: /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(import_lucide_react50.SquareX, { size: 16, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
+              children: /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(import_lucide_react51.SquareX, { size: 16, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
             }
           ),
           !readOnly && !hideCalendarIcon && /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(
@@ -17154,7 +17262,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_runtime174.jsx)(import_lucide_react50.CalendarDays, { size: 18 })
+              children: /* @__PURE__ */ (0, import_jsx_runtime174.jsx)(import_lucide_react51.CalendarDays, { size: 18 })
             }
           )
         ] })
@@ -17703,7 +17811,7 @@ var TimePicker = React68.forwardRef(function TimePicker2({ format: formatName =
 
 // src/dashboard/file-input/FileInput.tsx
 var React69 = __toESM(require("react"), 1);
-var import_lucide_react51 = require("lucide-react");
+var import_lucide_react52 = require("lucide-react");
 var import_react_i18next42 = require("react-i18next");
 var import_jsx_runtime179 = require("react/jsx-runtime");
 function defaultDownload(url) {
@@ -17817,7 +17925,7 @@ var FileInput = React69.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_runtime179.jsx)("span", { className: "truncate", children: resolvedDownloadLabel }),
-                              /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(import_lucide_react51.Download, { size: 15 })
+                              /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(import_lucide_react52.Download, { size: 15 })
                             ]
                           }
                         ) : /* @__PURE__ */ (0, import_jsx_runtime179.jsx)("span", { className: "truncate text-[14px] font-medium text-[var(--chekin-color-brand-navy)]", children: value.name }),
@@ -17829,13 +17937,13 @@ var FileInput = React69.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_runtime179.jsx)(import_lucide_react51.SquareX, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
+                            children: /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(import_lucide_react52.SquareX, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
                           }
                         )
                       ]
                     }
                   ) : /* @__PURE__ */ (0, import_jsx_runtime179.jsx)("span", { className: "block min-w-0 flex-1 truncate text-left text-[var(--chekin-color-gray-1)]", children: placeholder ?? "" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime179.jsx)("span", { className: "ml-auto flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(import_lucide_react51.Paperclip, { size: 20 }) })
+                  /* @__PURE__ */ (0, import_jsx_runtime179.jsx)("span", { className: "ml-auto flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ (0, import_jsx_runtime179.jsx)(import_lucide_react52.Paperclip, { size: 20 }) })
                 ]
               }
             ),
@@ -18090,11 +18198,11 @@ LegacyTextarea.displayName = "LegacyTextarea";
 
 // src/airbnb-fields/datepicker/DatePicker.tsx
 var React72 = __toESM(require("react"), 1);
-var import_lucide_react53 = require("lucide-react");
+var import_lucide_react54 = require("lucide-react");
 
 // src/airbnb-fields/field-trigger/FieldTrigger.tsx
 var React71 = __toESM(require("react"), 1);
-var import_lucide_react52 = require("lucide-react");
+var import_lucide_react53 = require("lucide-react");
 var import_react_i18next43 = require("react-i18next");
 var import_jsx_runtime183 = require("react/jsx-runtime");
 var AirbnbFieldTrigger = React71.forwardRef(
@@ -18158,7 +18266,7 @@ var AirbnbFieldTrigger = React71.forwardRef(
     const resolvedTrailingAdornment = loading || trailingAdornment ? /* @__PURE__ */ (0, import_jsx_runtime183.jsxs)("span", { className: "flex items-center gap-2", children: [
       trailingAdornment,
       loading && /* @__PURE__ */ (0, import_jsx_runtime183.jsx)(
-        import_lucide_react52.Loader2,
+        import_lucide_react53.Loader2,
         {
           "aria-hidden": "true",
           className: "h-5 w-5 animate-spin text-[var(--chekin-color-gray-1)]"
@@ -18414,7 +18522,7 @@ var AirbnbDatePicker = React72.forwardRef(
           onClick: handleTriggerClick,
           onKeyDown: handleTriggerKeyDown,
           onBlur,
-          trailingAdornment: /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(import_lucide_react53.Calendar, { className: "h-5 w-5 text-[#1F1F1B]", strokeWidth: 2 })
+          trailingAdornment: /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(import_lucide_react54.Calendar, { className: "h-5 w-5 text-[#1F1F1B]", strokeWidth: 2 })
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
@@ -18452,7 +18560,7 @@ AirbnbDatePicker.displayName = "AirbnbDatePicker";
 
 // src/airbnb-fields/input/Input.tsx
 var React73 = __toESM(require("react"), 1);
-var import_lucide_react54 = require("lucide-react");
+var import_lucide_react55 = require("lucide-react");
 var import_react_i18next44 = require("react-i18next");
 var import_jsx_runtime185 = require("react/jsx-runtime");
 var getInputValue = (value) => value != null ? String(value) : "";
@@ -18617,7 +18725,7 @@ var AirbnbInput = React73.forwardRef(
               className: "absolute bottom-0 right-0 flex h-6 w-6 items-center justify-center border-0 bg-transparent p-0 text-[#7A8399] hover:text-[#1F1F1B] hover:opacity-85 disabled:cursor-not-allowed disabled:opacity-50",
               "aria-label": isPasswordRevealed ? t("hide_password") : t("show_password"),
               children: /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
-                import_lucide_react54.Eye,
+                import_lucide_react55.Eye,
                 {
                   size: 18,
                   "aria-hidden": "true",
@@ -18635,7 +18743,7 @@ AirbnbInput.displayName = "AirbnbInput";
 
 // src/airbnb-fields/phone-field/PhoneField.tsx
 var React79 = __toESM(require("react"), 1);
-var import_lucide_react56 = require("lucide-react");
+var import_lucide_react57 = require("lucide-react");
 
 // src/airbnb-fields/select/Select.tsx
 var React78 = __toESM(require("react"), 1);
@@ -18984,7 +19092,7 @@ function AirbnbSelectMobileContent({
 
 // src/airbnb-fields/select/SelectTrigger.tsx
 var React74 = __toESM(require("react"), 1);
-var import_lucide_react55 = require("lucide-react");
+var import_lucide_react56 = require("lucide-react");
 var import_jsx_runtime190 = require("react/jsx-runtime");
 var AirbnbSelectTrigger = React74.forwardRef(
   ({
@@ -19039,7 +19147,7 @@ var AirbnbSelectTrigger = React74.forwardRef(
         onKeyDown,
         onBlur,
         trailingAdornment: /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(
-          import_lucide_react55.ChevronDown,
+          import_lucide_react56.ChevronDown,
           {
             className: open ? "h-6 w-6 rotate-180 text-[#1F1F1B] transition-transform" : "h-6 w-6 text-[#1F1F1B] transition-transform"
           }
@@ -19823,7 +19931,7 @@ var AirbnbPhoneField = React79.forwardRef(
                 children: [
                   /* @__PURE__ */ (0, import_jsx_runtime192.jsx)("span", { children: valueLabel ?? codePlaceholder }),
                   /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
-                    import_lucide_react56.ChevronDown,
+                    import_lucide_react57.ChevronDown,
                     {
                       className: cn("h-5 w-5 transition-transform", open ? "rotate-180" : ""),
                       strokeWidth: 2
@@ -19871,7 +19979,7 @@ AirbnbPhoneField.displayName = "AirbnbPhoneField";
 
 // src/airbnb-fields/searchable-select/SearchableSelect.tsx
 var React80 = __toESM(require("react"), 1);
-var import_lucide_react57 = require("lucide-react");
+var import_lucide_react58 = require("lucide-react");
 var import_react_virtual3 = require("@tanstack/react-virtual");
 var import_react91 = require("react");
 var import_jsx_runtime193 = require("react/jsx-runtime");
@@ -20107,7 +20215,7 @@ var AirbnbSearchableSelectInternal = ({
         onKeyDown: handleTriggerKeyDown,
         onBlur,
         trailingAdornment: /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
-          import_lucide_react57.ChevronDown,
+          import_lucide_react58.ChevronDown,
           {
             className: cn(
               "h-6 w-6 text-[#1F1F1B] transition-transform",
@@ -20205,7 +20313,7 @@ function AirbnbSearchableSelectContent({
   return /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)("div", { className: "p-2", children: [
     /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)("div", { className: "relative mb-2", children: [
       /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
-        import_lucide_react57.Search,
+        import_lucide_react58.Search,
         {
           "aria-hidden": "true",
           className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 text-[#9696B9]"
@@ -20315,13 +20423,13 @@ function getNextEnabledIndex(options, startIndex, step) {
 // src/airbnb-fields/search-input/SearchInput.tsx
 var React81 = __toESM(require("react"), 1);
 var import_react_i18next45 = require("react-i18next");
-var import_lucide_react58 = require("lucide-react");
+var import_lucide_react59 = require("lucide-react");
 var import_jsx_runtime194 = require("react/jsx-runtime");
 var AirbnbSearchInput = React81.forwardRef(({ onReset, placeholder, wrapperClassName, ...props }, ref) => {
   const { t } = (0, import_react_i18next45.useTranslation)();
   const placeholderText = placeholder || t("search_property") + "...";
   return /* @__PURE__ */ (0, import_jsx_runtime194.jsxs)("div", { className: cn("input-wrapper relative", wrapperClassName), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(import_lucide_react58.Search, { className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 transform text-[#9696B9]" }),
+    /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(import_lucide_react59.Search, { className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 transform text-[#9696B9]" }),
     /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(
       "input",
       {
@@ -20347,7 +20455,7 @@ var AirbnbSearchInput = React81.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_runtime194.jsx)(import_lucide_react58.X, { className: "h-5 w-5" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(import_lucide_react59.X, { className: "h-5 w-5" })
       }
     )
   ] });
@@ -20357,7 +20465,7 @@ AirbnbSearchInput.displayName = "AirbnbSearchInput";
 // src/airbnb-fields/switch/Switch.tsx
 var React82 = __toESM(require("react"), 1);
 var SwitchPrimitives2 = __toESM(require("@radix-ui/react-switch"), 1);
-var import_lucide_react59 = require("lucide-react");
+var import_lucide_react60 = require("lucide-react");
 var import_jsx_runtime195 = require("react/jsx-runtime");
 var AirbnbSwitch = React82.forwardRef(
   ({
@@ -20403,7 +20511,7 @@ var AirbnbSwitch = React82.forwardRef(
               "data-[state=checked]:translate-x-[12px] data-[state=unchecked]:translate-x-0"
             ),
             children: /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(
-              import_lucide_react59.Check,
+              import_lucide_react60.Check,
               {
                 "aria-hidden": "true",
                 className: "h-3 w-3 text-[#222222] opacity-0 transition-opacity duration-150 group-data-[state=checked]:opacity-100",
@@ -20754,6 +20862,7 @@ AirbnbSwitch.displayName = "AirbnbSwitch";
   compressFile,
   compressImage,
   copyToClipboard,
+  countriesFilter,
   createDisabledMatchers,
   emptyMediaVariants,
   findPhoneCode,