@chekinapp/ui 0.0.109 → 0.0.110

package/dist/index.js

@@ -2722,7 +2722,15 @@ function useLoadMore({
       observer.observe(element);
       observerRef.current = observer;
     },
-    [cleanupObserver, disabled, handleLoadMore, hasNextPage, loading, rootMargin, threshold]
+    [
+      cleanupObserver,
+      disabled,
+      handleLoadMore,
+      hasNextPage,
+      loading,
+      rootMargin,
+      threshold
+    ]
   );
   const loadMoreRef = useCallback5(
     (element) => {
@@ -5671,7 +5679,15 @@ var translation_default2 = {
   show_less: "Show less",
   show_more: "Show more",
   tap_here_to_sign: "Tap here to sign",
-  click_here_to_sign: "Click here to sign"
+  click_here_to_sign: "Click here to sign",
+  prefix: "Prefix",
+  prefix_required: "Prefix is required",
+  reset: "Reset",
+  show_password: "Show password",
+  hide_password: "Hide password",
+  increment: "Increment",
+  decrement: "Decrement",
+  create_option: 'Create "{{input}}"'
 };
 
 // src/locales/es/translation.json
@@ -12071,7 +12087,7 @@ function Fieldset({
         className: cn(
           "absolute box-border inline-flex max-w-full cursor-text items-center pl-[3px] pr-5 transition-all duration-100 ease-in",
           "left-[13px] text-[var(--chekin-color-gray-1)]",
-          isEmpty && !isFocused ? "top-[14px]" : "top-[-10px] !pl-1 !pr-[22px]",
+          isEmpty && !isFocused ? "top-[12px]" : "top-[-10px] !pl-1 !pr-[22px]",
           isFocused && "text-[var(--chekin-color-brand-blue)]",
           raised && invalid && "text-[var(--error-message-color)]",
           readOnly && "cursor-default",
@@ -12325,7 +12341,7 @@ var Input = React44.forwardRef(
                       onClick: onReset,
                       disabled,
                       className: "absolute right-0 top-0 flex h-full w-10 items-center justify-center border-0 bg-transparent p-0 text-[#9696b9] hover:opacity-80 disabled:cursor-not-allowed disabled:opacity-50",
-                      "aria-label": "Reset",
+                      "aria-label": t("reset"),
                       children: /* @__PURE__ */ jsx143(X9, { size: 14 })
                     }
                   ),
@@ -12335,7 +12351,7 @@ var Input = React44.forwardRef(
                       type: "button",
                       onClick: togglePasswordReveal,
                       className: "absolute right-[14px] top-[18px] flex h-[13px] w-[21px] cursor-pointer items-center justify-center border-0 bg-transparent p-0 hover:opacity-85",
-                      "aria-label": isPasswordRevealed ? "Hide password" : "Show password",
+                      "aria-label": isPasswordRevealed ? t("hide_password") : t("show_password"),
                       children: /* @__PURE__ */ jsx143(
                         Eye,
                         {
@@ -12355,7 +12371,7 @@ var Input = React44.forwardRef(
                       type: "button",
                       onClick: onDecrement,
                       className: "mr-2 inline-flex h-[23px] w-8 cursor-pointer items-center justify-center rounded-[3px] border-0 bg-[var(--chekin-color-brand-blue)] p-0 text-[20px] font-bold text-white outline-none hover:opacity-90 active:opacity-100",
-                      "aria-label": "Decrement",
+                      "aria-label": t("decrement"),
                       children: /* @__PURE__ */ jsx143(Minus4, { size: 16, strokeWidth: 3, "aria-hidden": true })
                     }
                   ),
@@ -12365,7 +12381,7 @@ var Input = React44.forwardRef(
                       type: "button",
                       onClick: onIncrement,
                       className: "inline-flex h-[23px] w-8 cursor-pointer items-center justify-center rounded-[3px] border-0 bg-[var(--chekin-color-brand-blue)] p-0 text-[20px] font-bold text-white outline-none hover:opacity-90 active:opacity-100",
-                      "aria-label": "Increment",
+                      "aria-label": t("increment"),
                       children: /* @__PURE__ */ jsx143(Plus3, { size: 16, strokeWidth: 3, "aria-hidden": true })
                     }
                   )
@@ -12399,7 +12415,11 @@ var Input = React44.forwardRef(
 );
 Input.displayName = "Input";
 
-// src/dashboard/select/Select.tsx
+// src/dashboard/phone-input/PhoneInput.tsx
+import * as React49 from "react";
+import { useTranslation as useTranslation31 } from "react-i18next";
+
+// src/dashboard/searchable-select/SearchableSelect.tsx
 import * as React48 from "react";
 import { useTranslation as useTranslation30 } from "react-i18next";
 
@@ -12750,6 +12770,128 @@ function SelectTrigger({
   );
 }
 
+// src/dashboard/_select-internals/ComboboxTrigger.tsx
+import { SquareX as SquareX2 } from "lucide-react";
+import { jsx as jsx149, jsxs as jsxs96 } from "react/jsx-runtime";
+function ComboboxTrigger({
+  triggerId,
+  listboxId,
+  labelId,
+  valueId,
+  describedErrorId,
+  isOpen,
+  isFocused,
+  isBlocked,
+  hasValue,
+  isEmpty,
+  disabled,
+  readOnly,
+  loading,
+  invalid,
+  isMulti,
+  inputRef,
+  inputValue,
+  placeholder,
+  highlightedIndex,
+  getOptionId: getOptionId2,
+  onInputChange,
+  onInputFocus,
+  onInputKeyDown,
+  onContainerClick,
+  showClear,
+  onClear,
+  clearLabel,
+  leadingContent,
+  containerClassName,
+  inputClassName
+}) {
+  const activeOptionId = isOpen && highlightedIndex !== void 0 && highlightedIndex >= 0 && getOptionId2 ? getOptionId2(highlightedIndex) : void 0;
+  return /* @__PURE__ */ jsxs96(
+    "div",
+    {
+      role: "combobox",
+      "aria-haspopup": "listbox",
+      "aria-expanded": isOpen,
+      "aria-controls": listboxId,
+      "aria-labelledby": hasValue && valueId ? `${labelId} ${valueId}` : labelId,
+      "aria-describedby": describedErrorId,
+      "aria-invalid": invalid,
+      "aria-busy": loading,
+      "aria-disabled": isBlocked,
+      onClick: onContainerClick,
+      className: cn(
+        "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(--chekin-color-surface-input-empty)]" : "bg-transparent",
+        disabled && "cursor-not-allowed",
+        loading && "cursor-progress",
+        containerClassName
+      ),
+      children: [
+        /* @__PURE__ */ jsxs96(
+          "div",
+          {
+            className: cn(
+              "flex min-w-0 flex-1 items-center gap-2 py-[10px] pl-4",
+              isMulti && "flex-wrap"
+            ),
+            children: [
+              leadingContent,
+              /* @__PURE__ */ jsx149(
+                "input",
+                {
+                  ref: inputRef,
+                  id: triggerId,
+                  type: "text",
+                  value: inputValue,
+                  onChange: onInputChange,
+                  onFocus: onInputFocus,
+                  onKeyDown: onInputKeyDown,
+                  disabled: isBlocked,
+                  readOnly,
+                  placeholder: isFocused || isOpen ? placeholder ?? "" : "",
+                  autoComplete: "off",
+                  "aria-autocomplete": "list",
+                  "aria-controls": listboxId,
+                  "aria-activedescendant": activeOptionId,
+                  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 && "cursor-not-allowed",
+                    inputClassName
+                  )
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs96("span", { className: "flex h-12 shrink-0 items-center gap-2 self-start pl-2 pr-4 text-[var(--chekin-color-gray-2)]", children: [
+          loading && /* @__PURE__ */ jsx149(ThreeDotsLoader, { height: 18, width: 18 }),
+          showClear && /* @__PURE__ */ jsx149(
+            "button",
+            {
+              type: "button",
+              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__ */ jsx149(SquareX2, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
+            }
+          ),
+          /* @__PURE__ */ jsx149(
+            RotateArrow,
+            {
+              shouldRotate: isOpen,
+              className: cn(
+                isFocused || isOpen ? "text-[var(--chekin-color-brand-blue)]" : "text-[var(--chekin-color-gray-2)]"
+              )
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
 // src/dashboard/_select-internals/useSelectIds.ts
 import * as React45 from "react";
 function useSelectIds({
@@ -12834,9 +12976,9 @@ function useSelectSearch({
   return { searchValue, setSearchValue, filteredOptions, clearSearch };
 }
 
-// src/dashboard/select/Select.tsx
-import { jsx as jsx149, jsxs as jsxs96 } from "react/jsx-runtime";
-function SelectInternal({
+// src/dashboard/searchable-select/SearchableSelect.tsx
+import { jsx as jsx150, jsxs as jsxs97 } from "react/jsx-runtime";
+function SearchableSelectInternal({
   options = [],
   value,
   onChange,
@@ -12959,7 +13101,7 @@ function SelectInternal({
       setIsOpen(false);
     }
   };
-  return /* @__PURE__ */ jsxs96(
+  return /* @__PURE__ */ jsxs97(
     SelectFieldShell,
     {
       containerRef,
@@ -12977,7 +13119,7 @@ function SelectInternal({
       name,
       hiddenValue: value ? String(value.value) : "",
       children: [
-        /* @__PURE__ */ jsx149(
+        /* @__PURE__ */ jsx150(
           SelectTrigger,
           {
             triggerRef,
@@ -12999,7 +13141,7 @@ function SelectInternal({
             onBlur
           }
         ),
-        /* @__PURE__ */ jsx149(
+        /* @__PURE__ */ jsx150(
           Fieldset,
           {
             isFocused: isOpen,
@@ -13013,10 +13155,10 @@ function SelectInternal({
             legend: typeof label === "string" ? label : void 0,
             label,
             tooltip,
-            onClick: !isBlocked ? toggleMenu : void 0
+            labelClassName: "cursor-pointer"
           }
         ),
-        /* @__PURE__ */ jsxs96(
+        /* @__PURE__ */ jsxs97(
           SelectMenuPanel,
           {
             isOpen,
@@ -13026,7 +13168,7 @@ function SelectInternal({
             className: dropdownClassName,
             drawerClassName,
             children: [
-              searchable && /* @__PURE__ */ jsx149(
+              searchable && /* @__PURE__ */ jsx150(
                 SelectSearchInput,
                 {
                   inputRef: searchInputRef,
@@ -13038,7 +13180,7 @@ function SelectInternal({
                   onKeyDown: handleSearchKeyDown
                 }
               ),
-              /* @__PURE__ */ jsx149(
+              /* @__PURE__ */ jsx150(
                 SelectMenu,
                 {
                   id: listboxId,
@@ -13066,48 +13208,224 @@ function SelectInternal({
     }
   );
 }
-var Select = React48.forwardRef(
-  SelectInternal
+var SearchableSelect = React48.forwardRef(
+  SearchableSelectInternal
 );
 
-// src/dashboard/multi-select/MultiSelect.tsx
-import * as React49 from "react";
-import { Search as Search4, SquareX as SquareX3 } from "lucide-react";
-import { useTranslation as useTranslation32 } from "react-i18next";
+// src/dashboard/phone-input/utils.ts
+var PREFIX_REGEX = /^\+/;
+function clearPhoneNumber(value) {
+  return value.replace(/[^0-9]/g, "");
+}
+function findPhoneCode(value, codeSet) {
+  const hasPrefix = PREFIX_REGEX.test(value);
+  const maxLength = hasPrefix ? 4 : 3;
+  const minLength = hasPrefix ? 2 : 1;
+  for (let length = minLength; length <= maxLength; length += 1) {
+    const candidate = value.slice(0, length);
+    const normalized = hasPrefix ? candidate : `+${candidate}`;
+    if (codeSet.has(normalized)) {
+      return normalized;
+    }
+  }
+  return void 0;
+}
+function parsePhoneValueWithOptions(options) {
+  const codeSet = new Set(options.map((option) => option.value));
+  return (value) => {
+    if (!PREFIX_REGEX.test(value)) {
+      return { code: "", number: value };
+    }
+    const code = findPhoneCode(value, codeSet);
+    if (!code) {
+      return { code: "", number: value };
+    }
+    return {
+      code,
+      number: value.slice(code.length)
+    };
+  };
+}
+function findPhoneCodeOption(options, code) {
+  return options.find((option) => option.value === code);
+}
+function formatPhoneCodeOptionLabel(option) {
+  const label = String(option.label);
+  const value = String(option.value);
+  return label.includes(value) ? label : `${label} ${value}`;
+}
 
-// src/dashboard/multi-select/MultiSelectChip.tsx
-import { SquareX as SquareX2 } from "lucide-react";
-import { useTranslation as useTranslation31 } from "react-i18next";
-import { jsx as jsx150, jsxs as jsxs97 } from "react/jsx-runtime";
-function MultiSelectChip({
-  option,
-  readOnly,
-  onRemove
-}) {
-  const { t } = useTranslation31();
-  const labelText = typeof option.label === "string" ? option.label : String(option.value);
-  return /* @__PURE__ */ jsxs97("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__ */ jsx150("span", { className: "whitespace-nowrap", children: option.label }),
-    !readOnly && /* @__PURE__ */ jsx150(
-      "button",
+// src/dashboard/phone-input/PhoneInput.tsx
+import { jsx as jsx151, jsxs as jsxs98 } from "react/jsx-runtime";
+var EMPTY_VALUE = { code: "", number: "" };
+var PhoneInput = React49.forwardRef(
+  function PhoneInput2({
+    options,
+    value,
+    onChange,
+    onBlur,
+    name,
+    codeName,
+    numberName,
+    label,
+    topLabel,
+    prefixLabel,
+    placeholder,
+    codePlaceholder = "+00",
+    disabled,
+    loading,
+    readOnly,
+    codeReadOnly,
+    optional,
+    tooltip,
+    error,
+    invalid,
+    className,
+    autoDetectCode = true,
+    searchable = true
+  }, ref) {
+    const { t } = useTranslation31();
+    const safeValue = value ?? EMPTY_VALUE;
+    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) && !safeValue.code;
+    const hasInvalidState = hasExternalError || Boolean(invalid) || isPrefixRequired;
+    const errorMessage = error ?? (isPrefixRequired ? t("prefix_required") : void 0);
+    const combinedValue = safeValue.code || safeValue.number ? `${safeValue.code}${safeValue.number}` : "";
+    const codeOptions = React49.useMemo(
+      () => options.map((option) => ({
+        value: option.value,
+        label: formatPhoneCodeOptionLabel(option),
+        data: option.data,
+        isDisabled: option.disabled
+      })),
+      [options]
+    );
+    const selectedCodeOption = React49.useMemo(
+      () => codeOptions.find((option) => option.value === safeValue.code) ?? null,
+      [codeOptions, safeValue.code]
+    );
+    const parsePhoneValue = React49.useMemo(
+      () => parsePhoneValueWithOptions(options),
+      [options]
+    );
+    const emitChange = (next) => {
+      onChange?.(next, name);
+    };
+    const handleCodeChange = (option) => {
+      emitChange({ code: option.value, number: safeValue.number });
+    };
+    const handleNumberChange = (event) => {
+      if (readOnly || disabled) return;
+      const rawValue = event.target.value;
+      if (!autoDetectCode) {
+        emitChange({ code: safeValue.code, number: clearPhoneNumber(rawValue) });
+        return;
+      }
+      const parsed = parsePhoneValue(rawValue);
+      const cleanedNumber = clearPhoneNumber(parsed.number);
+      if (parsed.code) {
+        emitChange({ code: parsed.code, number: cleanedNumber });
+        return;
+      }
+      emitChange({ code: safeValue.code, number: cleanedNumber });
+    };
+    return /* @__PURE__ */ jsxs98(
+      "div",
       {
-        type: "button",
-        onClick: (event) => {
-          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]",
-        "aria-label": t("remove_item", { label: labelText }),
-        children: /* @__PURE__ */ jsx150(SquareX2, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
+        className: cn(
+          "relative w-full max-w-[var(--field-max-width,296px)]",
+          disabled && "cursor-not-allowed opacity-50",
+          loading && "cursor-progress",
+          className
+        ),
+        children: [
+          name && /* @__PURE__ */ jsx151("input", { type: "hidden", name, value: combinedValue, disabled }),
+          codeName && /* @__PURE__ */ jsx151(
+            "input",
+            {
+              type: "hidden",
+              name: codeName,
+              value: safeValue.code,
+              disabled
+            }
+          ),
+          numberName && /* @__PURE__ */ jsx151(
+            "input",
+            {
+              type: "hidden",
+              name: numberName,
+              value: safeValue.number,
+              disabled
+            }
+          ),
+          topLabel && /* @__PURE__ */ jsx151("label", { className: "mb-2 block text-[14px] font-medium text-[var(--chekin-color-brand-navy)]", children: topLabel }),
+          /* @__PURE__ */ jsxs98("div", { className: "grid grid-cols-[96px_minmax(0,1fr)] gap-2", children: [
+            /* @__PURE__ */ jsx151(
+              SearchableSelect,
+              {
+                options: codeOptions,
+                value: selectedCodeOption,
+                onChange: handleCodeChange,
+                label: resolvedPrefixLabel,
+                placeholder: codePlaceholder,
+                disabled: isCodeBlocked,
+                loading,
+                invalid: hasInvalidState,
+                hideErrorMessage: true,
+                searchable,
+                getValueLabel: (option) => option.value,
+                className: "!max-w-none",
+                dropdownClassName: "right-auto w-[280px]"
+              }
+            ),
+            /* @__PURE__ */ jsx151(
+              Input,
+              {
+                ref,
+                type: "tel",
+                inputMode: "tel",
+                autoComplete: "tel-national",
+                label: resolvedLabel,
+                value: safeValue.number,
+                placeholder,
+                disabled,
+                readOnly,
+                loading,
+                invalid: hasInvalidState,
+                tooltip,
+                "aria-label": resolvedLabel || name,
+                onChange: handleNumberChange,
+                onBlur,
+                renderErrorMessage: false,
+                wrapperClassName: "!max-w-none"
+              }
+            )
+          ] }),
+          !errorMessage && optional && /* @__PURE__ */ jsx151("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : t("optional") }),
+          errorMessage && /* @__PURE__ */ jsx151(
+            FieldErrorMessage,
+            {
+              message: errorMessage,
+              "data-testid": name ? `${name}-error` : void 0,
+              className: "mt-[1px] text-[14px]"
+            }
+          )
+        ]
       }
-    )
-  ] });
-}
+    );
+  }
+);
+PhoneInput.displayName = "PhoneInput";
 
-// src/dashboard/multi-select/MultiSelect.tsx
-import { jsx as jsx151, jsxs as jsxs98 } from "react/jsx-runtime";
-var isValueSelected = (selected, option) => selected.some((item) => item.value === option.value);
-function MultiSelectInternal({
+// src/dashboard/select/Select.tsx
+import * as React50 from "react";
+import { useTranslation as useTranslation32 } from "react-i18next";
+import { jsx as jsx152, jsxs as jsxs99 } from "react/jsx-runtime";
+function SelectInternal({
   options = [],
   value,
   onChange,
@@ -13115,6 +13433,7 @@ function MultiSelectInternal({
   label,
   topLabel,
   placeholder,
+  getValueLabel,
   disabled,
   readOnly,
   loading,
@@ -13130,29 +13449,32 @@ function MultiSelectInternal({
   name,
   width,
   noOptionsMessage,
-  filterOption,
-  closeMenuOnSelect = false,
-  renderChip,
+  filterOption = defaultFilterOption,
   helperText,
+  clearable = true,
   isCreatable = false,
   onCreateOption,
-  formatCreateLabel = (input) => `Create "${input}"`,
+  formatCreateLabel,
   isValidNewOption
 }, ref) {
-  const inputRef = React49.useRef(null);
-  const mobileSearchInputRef = React49.useRef(null);
-  const listRef = React49.useRef(null);
-  const optionRefs = React49.useRef([]);
-  const [isFocused, setIsFocused] = React49.useState(false);
-  const [highlightedIndex, setHighlightedIndex] = React49.useState(-1);
+  const inputRef = React50.useRef(null);
+  const mobileSearchInputRef = React50.useRef(null);
+  const listRef = React50.useRef(null);
+  const optionRefs = React50.useRef([]);
+  const [isFocused, setIsFocused] = React50.useState(false);
+  const [highlightedIndex, setHighlightedIndex] = React50.useState(-1);
   const isMobile3 = useIsMobile();
   const { t } = useTranslation32();
-  const selectedValues = React49.useMemo(() => value ?? [], [value]);
-  const hasValue = selectedValues.length > 0;
-  const isEmpty = !hasValue;
+  const resolveLabel = React50.useCallback(
+    (option) => option ? getValueLabel?.(option) ?? String(option.label) : "",
+    [getValueLabel]
+  );
+  const valueLabel = resolveLabel(value);
+  const [inputValue, setInputValue] = React50.useState(valueLabel);
+  const hasValue = Boolean(value);
+  const isEmpty = !hasValue && !inputValue;
   const isBlocked = Boolean(disabled) || Boolean(loading) || Boolean(readOnly);
-  const triggerError = error ?? invalid;
-  const hasInvalidState = Boolean(triggerError);
+  const hasInvalidState = Boolean(error) || Boolean(invalid);
   const errorMessage = typeof error === "string" ? error : void 0;
   const { containerRef, isOpen, closeMenu, setIsOpen } = useSelectMenuState({
     isBlocked,
@@ -13160,34 +13482,30 @@ function MultiSelectInternal({
     onOutsideClick: () => setIsFocused(false)
   });
   const { triggerId, labelId, valueId, listboxId, describedErrorId, errorId, getOptionId: getOptionId2 } = useSelectIds({ name, hasValue, error, hideErrorMessage });
-  const { searchValue, setSearchValue, filteredOptions, clearSearch } = useSelectSearch({
-    options,
-    filterOption
-  });
-  const trimmedSearch = searchValue.trim();
-  const canCreateNewOption = React49.useMemo(() => {
-    if (!isCreatable || !trimmedSearch) return false;
-    if (isValidNewOption) return isValidNewOption(trimmedSearch, selectedValues, options);
-    const lower = trimmedSearch.toLowerCase();
+  React50.useEffect(() => {
+    if (!isFocused) setInputValue(valueLabel);
+  }, [valueLabel, isFocused]);
+  const trimmedInput = inputValue.trim();
+  const isFiltering = trimmedInput.length > 0 && trimmedInput.toLowerCase() !== valueLabel.toLowerCase();
+  const filteredOptions = React50.useMemo(() => {
+    if (!isFiltering) return options;
+    return options.filter((option) => filterOption(option, trimmedInput));
+  }, [options, isFiltering, trimmedInput, filterOption]);
+  const canCreateNewOption = React50.useMemo(() => {
+    if (!isCreatable || !trimmedInput) return false;
+    if (isValidNewOption) return isValidNewOption(trimmedInput, value, options);
+    const lower = trimmedInput.toLowerCase();
     const existsInOptions = options.some(
       (option) => typeof option.label === "string" && option.label.toLowerCase() === lower
     );
-    const existsInSelected = selectedValues.some(
-      (option) => typeof option.label === "string" && option.label.toLowerCase() === lower
-    );
-    return !existsInOptions && !existsInSelected;
-  }, [isCreatable, trimmedSearch, isValidNewOption, options, selectedValues]);
-  React49.useImperativeHandle(
+    const matchesSelected = valueLabel.toLowerCase() === lower;
+    return !existsInOptions && !matchesSelected;
+  }, [isCreatable, trimmedInput, isValidNewOption, value, options, valueLabel]);
+  React50.useImperativeHandle(
     ref,
     () => containerRef.current
   );
-  React49.useEffect(() => {
-    if (!isOpen) {
-      clearSearch();
-      setHighlightedIndex(-1);
-    }
-  }, [isOpen, clearSearch]);
-  React49.useEffect(() => {
+  React50.useEffect(() => {
     if (!isOpen || filteredOptions.length === 0) {
       setHighlightedIndex(-1);
       return;
@@ -13197,17 +13515,377 @@ function MultiSelectInternal({
       return getFirstEnabledOptionIndex(filteredOptions);
     });
   }, [isOpen, filteredOptions]);
-  React49.useEffect(() => {
+  React50.useEffect(() => {
+    if (!isOpen) return;
+    if (highlightedIndex < 0) return;
+    optionRefs.current[highlightedIndex]?.scrollIntoView({ block: "nearest" });
+  }, [highlightedIndex, isOpen]);
+  React50.useEffect(() => {
     if (!isOpen || !isMobile3) return;
     const frame = window.requestAnimationFrame(
       () => mobileSearchInputRef.current?.focus()
     );
     return () => window.cancelAnimationFrame(frame);
   }, [isOpen, isMobile3]);
-  const openMenu = () => {
-    if (isBlocked) return;
-    setIsOpen(true);
-    setIsFocused(true);
+  const commitSelection = (option) => {
+    if (option.isDisabled) return;
+    onChange(option);
+    setInputValue(resolveLabel(option));
+    setIsOpen(false);
+    setIsFocused(false);
+    inputRef.current?.blur();
+  };
+  const commitCreate = () => {
+    if (!canCreateNewOption) return;
+    const newOption = onCreateOption?.(trimmedInput) ?? { value: trimmedInput, label: trimmedInput };
+    onChange(newOption);
+    setInputValue(resolveLabel(newOption));
+    setIsOpen(false);
+    setIsFocused(false);
+    inputRef.current?.blur();
+  };
+  const clearSelection = (event) => {
+    event.stopPropagation();
+    if (isBlocked) return;
+    onChange(null);
+    setInputValue("");
+    inputRef.current?.focus();
+  };
+  const handleInputFocus = () => {
+    if (isBlocked) return;
+    setIsFocused(true);
+    setIsOpen(true);
+    requestAnimationFrame(() => inputRef.current?.select());
+  };
+  const handleBlur = (event) => {
+    if (containerRef.current?.contains(event.relatedTarget)) return;
+    setIsFocused(false);
+    setInputValue(valueLabel);
+    onBlur?.(event);
+  };
+  const handleInputKeyDown = (event) => {
+    if (event.key === "ArrowDown") {
+      event.preventDefault();
+      if (!isOpen) {
+        setIsOpen(true);
+        return;
+      }
+      const next = getNextEnabledOptionIndex(filteredOptions, highlightedIndex + 1, 1);
+      if (next >= 0) setHighlightedIndex(next);
+      return;
+    }
+    if (event.key === "ArrowUp") {
+      event.preventDefault();
+      if (!isOpen) {
+        setIsOpen(true);
+        return;
+      }
+      const next = getNextEnabledOptionIndex(filteredOptions, highlightedIndex - 1, -1);
+      if (next >= 0) setHighlightedIndex(next);
+      return;
+    }
+    if (event.key === "Enter") {
+      if (!isOpen) return;
+      event.preventDefault();
+      const option = filteredOptions[highlightedIndex];
+      if (option && !option.isDisabled) {
+        commitSelection(option);
+      } else if (canCreateNewOption) {
+        commitCreate();
+      }
+      return;
+    }
+    if (event.key === "Escape") {
+      event.preventDefault();
+      setInputValue(valueLabel);
+      setIsOpen(false);
+      inputRef.current?.blur();
+    }
+  };
+  const handleContainerClick = () => {
+    if (isBlocked) return;
+    inputRef.current?.focus();
+    setIsOpen(true);
+  };
+  return /* @__PURE__ */ jsxs99(
+    SelectFieldShell,
+    {
+      containerRef,
+      className,
+      width,
+      disabled,
+      loading,
+      topLabel,
+      triggerId,
+      errorId,
+      errorMessage,
+      hideErrorMessage,
+      optional,
+      helperText,
+      name,
+      hiddenValue: value ? String(value.value) : "",
+      onBlur: handleBlur,
+      children: [
+        /* @__PURE__ */ jsx152(
+          ComboboxTrigger,
+          {
+            triggerId,
+            listboxId,
+            labelId,
+            valueId,
+            describedErrorId,
+            isOpen,
+            isFocused,
+            isBlocked,
+            hasValue,
+            isEmpty,
+            disabled,
+            readOnly,
+            loading,
+            invalid: hasInvalidState,
+            inputRef,
+            inputValue,
+            placeholder,
+            highlightedIndex,
+            getOptionId: getOptionId2,
+            onInputChange: (event) => {
+              setInputValue(event.target.value);
+              if (!isOpen) setIsOpen(true);
+            },
+            onInputFocus: handleInputFocus,
+            onInputKeyDown: handleInputKeyDown,
+            onContainerClick: handleContainerClick,
+            showClear: clearable && hasValue && !readOnly && !disabled,
+            onClear: clearSelection,
+            clearLabel: t("clear")
+          }
+        ),
+        /* @__PURE__ */ jsx152(
+          Fieldset,
+          {
+            isFocused: isFocused || isOpen,
+            invalid: hasInvalidState,
+            isEmpty: isEmpty && !inputValue,
+            isActivated: !isEmpty || isFocused || isOpen || Boolean(inputValue),
+            disabled,
+            loading,
+            readOnly,
+            htmlFor: triggerId,
+            labelId,
+            legend: typeof label === "string" ? label : void 0,
+            label,
+            tooltip,
+            onClick: handleContainerClick
+          }
+        ),
+        /* @__PURE__ */ jsxs99(
+          SelectMenuPanel,
+          {
+            isOpen,
+            isMobile: isMobile3,
+            onClose: () => {
+              closeMenu();
+              setIsFocused(false);
+            },
+            title: typeof label === "string" ? label : void 0,
+            className: dropdownClassName,
+            drawerClassName,
+            children: [
+              isMobile3 && /* @__PURE__ */ jsx152(
+                SelectSearchInput,
+                {
+                  inputRef: mobileSearchInputRef,
+                  value: inputValue,
+                  placeholder: t("search_placeholder"),
+                  listboxId,
+                  activeOptionId: highlightedIndex >= 0 ? getOptionId2(highlightedIndex) : void 0,
+                  onChange: (event) => setInputValue(event.target.value),
+                  onKeyDown: handleInputKeyDown
+                }
+              ),
+              /* @__PURE__ */ jsx152(
+                SelectMenu,
+                {
+                  id: listboxId,
+                  options: filteredOptions,
+                  labelledBy: labelId,
+                  describedBy: describedErrorId,
+                  selectedValue: value,
+                  highlightedIndex,
+                  onOptionClick: commitSelection,
+                  onOptionHover: setHighlightedIndex,
+                  disabled: isBlocked,
+                  menuClassName,
+                  listRef,
+                  selectedOptionRef: (index, node) => {
+                    optionRefs.current[index] = node;
+                  },
+                  getOptionId: getOptionId2,
+                  noOptionsMessage
+                }
+              ),
+              canCreateNewOption && /* @__PURE__ */ jsx152(
+                "button",
+                {
+                  type: "button",
+                  onClick: commitCreate,
+                  className: "flex w-full items-center justify-start border-0 border-t border-[#f2f4f8] bg-white px-4 py-[16px] text-left text-[16px] font-medium leading-5 text-[var(--chekin-color-brand-blue)] outline-none hover:bg-[var(--chekin-color-surface-pressed)]",
+                  children: formatCreateLabel ? formatCreateLabel(trimmedInput) : t("create_option", { input: trimmedInput })
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+var Select = React50.forwardRef(SelectInternal);
+
+// src/dashboard/creatable-select/CreatableSelect.tsx
+import * as React51 from "react";
+import { jsx as jsx153 } from "react/jsx-runtime";
+var CreatableSelect = React51.forwardRef(function CreatableSelect2(props, ref) {
+  return /* @__PURE__ */ jsx153(Select, { ref, ...props, isCreatable: true });
+});
+
+// src/dashboard/multi-select/MultiSelect.tsx
+import * as React52 from "react";
+import { useTranslation as useTranslation34 } from "react-i18next";
+
+// src/dashboard/multi-select/MultiSelectChip.tsx
+import { SquareX as SquareX3 } from "lucide-react";
+import { useTranslation as useTranslation33 } from "react-i18next";
+import { jsx as jsx154, jsxs as jsxs100 } from "react/jsx-runtime";
+function MultiSelectChip({
+  option,
+  readOnly,
+  onRemove
+}) {
+  const { t } = useTranslation33();
+  const labelText = typeof option.label === "string" ? option.label : String(option.value);
+  return /* @__PURE__ */ jsxs100("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__ */ jsx154("span", { className: "whitespace-nowrap", children: option.label }),
+    !readOnly && /* @__PURE__ */ jsx154(
+      "button",
+      {
+        type: "button",
+        onClick: (event) => {
+          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]",
+        "aria-label": t("remove_item", { label: labelText }),
+        children: /* @__PURE__ */ jsx154(SquareX3, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
+      }
+    )
+  ] });
+}
+
+// src/dashboard/multi-select/MultiSelect.tsx
+import { jsx as jsx155, jsxs as jsxs101 } from "react/jsx-runtime";
+var isValueSelected = (selected, option) => selected.some((item) => item.value === option.value);
+function MultiSelectInternal({
+  options = [],
+  value,
+  onChange,
+  onBlur,
+  label,
+  topLabel,
+  placeholder,
+  disabled,
+  readOnly,
+  loading,
+  optional,
+  tooltip,
+  error,
+  invalid,
+  hideErrorMessage,
+  className,
+  menuClassName,
+  dropdownClassName,
+  drawerClassName,
+  name,
+  width,
+  noOptionsMessage,
+  filterOption,
+  closeMenuOnSelect = false,
+  renderChip,
+  helperText,
+  isCreatable = false,
+  onCreateOption,
+  formatCreateLabel,
+  isValidNewOption
+}, ref) {
+  const inputRef = React52.useRef(null);
+  const mobileSearchInputRef = React52.useRef(null);
+  const listRef = React52.useRef(null);
+  const optionRefs = React52.useRef([]);
+  const [isFocused, setIsFocused] = React52.useState(false);
+  const [highlightedIndex, setHighlightedIndex] = React52.useState(-1);
+  const isMobile3 = useIsMobile();
+  const { t } = useTranslation34();
+  const selectedValues = React52.useMemo(() => value ?? [], [value]);
+  const hasValue = selectedValues.length > 0;
+  const isEmpty = !hasValue;
+  const isBlocked = Boolean(disabled) || Boolean(loading) || Boolean(readOnly);
+  const triggerError = error ?? invalid;
+  const hasInvalidState = Boolean(triggerError);
+  const errorMessage = typeof error === "string" ? error : void 0;
+  const { containerRef, isOpen, closeMenu, setIsOpen } = useSelectMenuState({
+    isBlocked,
+    isMobile: isMobile3,
+    onOutsideClick: () => setIsFocused(false)
+  });
+  const { triggerId, labelId, valueId, listboxId, describedErrorId, errorId, getOptionId: getOptionId2 } = useSelectIds({ name, hasValue, error, hideErrorMessage });
+  const { searchValue, setSearchValue, filteredOptions, clearSearch } = useSelectSearch({
+    options,
+    filterOption
+  });
+  const trimmedSearch = searchValue.trim();
+  const canCreateNewOption = React52.useMemo(() => {
+    if (!isCreatable || !trimmedSearch) return false;
+    if (isValidNewOption) return isValidNewOption(trimmedSearch, selectedValues, options);
+    const lower = trimmedSearch.toLowerCase();
+    const existsInOptions = options.some(
+      (option) => typeof option.label === "string" && option.label.toLowerCase() === lower
+    );
+    const existsInSelected = selectedValues.some(
+      (option) => typeof option.label === "string" && option.label.toLowerCase() === lower
+    );
+    return !existsInOptions && !existsInSelected;
+  }, [isCreatable, trimmedSearch, isValidNewOption, options, selectedValues]);
+  React52.useImperativeHandle(
+    ref,
+    () => containerRef.current
+  );
+  React52.useEffect(() => {
+    if (!isOpen) {
+      clearSearch();
+      setHighlightedIndex(-1);
+    }
+  }, [isOpen, clearSearch]);
+  React52.useEffect(() => {
+    if (!isOpen || filteredOptions.length === 0) {
+      setHighlightedIndex(-1);
+      return;
+    }
+    setHighlightedIndex((current) => {
+      if (current >= 0 && current < filteredOptions.length) return current;
+      return getFirstEnabledOptionIndex(filteredOptions);
+    });
+  }, [isOpen, filteredOptions]);
+  React52.useEffect(() => {
+    if (!isOpen || !isMobile3) return;
+    const frame = window.requestAnimationFrame(
+      () => mobileSearchInputRef.current?.focus()
+    );
+    return () => window.cancelAnimationFrame(frame);
+  }, [isOpen, isMobile3]);
+  const openMenu = () => {
+    if (isBlocked) return;
+    setIsOpen(true);
+    setIsFocused(true);
   };
   const toggleOption = (option) => {
     if (option.isDisabled) return;
@@ -13231,7 +13909,7 @@ function MultiSelectInternal({
     onChange([]);
     inputRef.current?.focus();
   };
-  const createOption = React49.useCallback(() => {
+  const createOption = React52.useCallback(() => {
     if (!canCreateNewOption) return;
     const newOption = onCreateOption?.(trimmedSearch) ?? { value: trimmedSearch, label: trimmedSearch };
     onChange([...selectedValues, newOption]);
@@ -13300,7 +13978,7 @@ function MultiSelectInternal({
     setIsFocused(false);
     onBlur?.(event);
   };
-  return /* @__PURE__ */ jsxs98(
+  return /* @__PURE__ */ jsxs101(
     SelectFieldShell,
     {
       containerRef,
@@ -13319,104 +13997,59 @@ function MultiSelectInternal({
       hiddenValue: selectedValues.map((item) => String(item.value)).join(","),
       onBlur: handleInputBlur,
       children: [
-        /* @__PURE__ */ jsxs98(
-          "div",
+        /* @__PURE__ */ jsx155(
+          ComboboxTrigger,
           {
-            id: triggerId,
-            role: "combobox",
-            "aria-haspopup": "listbox",
-            "aria-expanded": isOpen,
-            "aria-controls": listboxId,
-            "aria-labelledby": hasValue && valueId ? `${labelId} ${valueId}` : labelId,
-            "aria-describedby": describedErrorId,
-            "aria-invalid": hasInvalidState,
-            "aria-busy": loading,
-            "aria-disabled": isBlocked,
-            onClick: handleContainerClick,
-            className: cn(
-              "relative box-border flex w-full cursor-text flex-wrap items-center gap-2 rounded-[6px] border-0 px-4 py-[10px] text-left text-[16px] font-medium leading-5 outline-none transition-colors duration-200",
-              "min-h-12",
-              isEmpty && !isFocused ? "bg-[var(--chekin-color-surface-input-empty)]" : "bg-transparent",
-              disabled && "cursor-not-allowed",
-              loading && "cursor-progress"
-            ),
-            children: [
-              selectedValues.map(
-                (option) => renderChip ? /* @__PURE__ */ jsx151(React49.Fragment, { children: renderChip(option, () => removeOption(option)) }, String(option.value)) : /* @__PURE__ */ jsx151(
-                  MultiSelectChip,
-                  {
-                    option,
-                    readOnly,
-                    onRemove: () => removeOption(option)
-                  },
-                  String(option.value)
-                )
-              ),
-              /* @__PURE__ */ jsx151(
-                Search4,
-                {
-                  "aria-hidden": "true",
-                  className: "h-4 w-4 shrink-0 text-[var(--chekin-color-gray-2)]"
-                }
-              ),
-              /* @__PURE__ */ jsx151(
-                "input",
+            triggerId,
+            listboxId,
+            labelId,
+            valueId,
+            describedErrorId,
+            isOpen,
+            isFocused,
+            isBlocked,
+            hasValue,
+            isEmpty,
+            disabled,
+            readOnly,
+            loading,
+            invalid: hasInvalidState,
+            isMulti: true,
+            inputRef,
+            inputValue: searchValue,
+            placeholder: !hasValue ? placeholder : "",
+            highlightedIndex,
+            getOptionId: getOptionId2,
+            onInputChange: (event) => {
+              setSearchValue(event.target.value);
+              if (!isOpen) setIsOpen(true);
+            },
+            onInputFocus: () => {
+              setIsFocused(true);
+              if (!isBlocked) setIsOpen(true);
+            },
+            onInputKeyDown: handleInputKeyDown,
+            onContainerClick: handleContainerClick,
+            showClear: hasValue && !readOnly && !disabled,
+            onClear: (event) => {
+              event.stopPropagation();
+              clearAll();
+            },
+            clearLabel: t("clear_all"),
+            leadingContent: selectedValues.map(
+              (option) => renderChip ? /* @__PURE__ */ jsx155(React52.Fragment, { children: renderChip(option, () => removeOption(option)) }, String(option.value)) : /* @__PURE__ */ jsx155(
+                MultiSelectChip,
                 {
-                  ref: inputRef,
-                  type: "text",
-                  id: `${triggerId}-input`,
-                  value: searchValue,
-                  onChange: (event) => {
-                    setSearchValue(event.target.value);
-                    if (!isOpen) setIsOpen(true);
-                  },
-                  onFocus: () => {
-                    setIsFocused(true);
-                    if (!isBlocked) setIsOpen(true);
-                  },
-                  onKeyDown: handleInputKeyDown,
-                  disabled: isBlocked,
+                  option,
                   readOnly,
-                  placeholder: !hasValue && (isFocused || isOpen) ? placeholder ?? "" : "",
-                  autoComplete: "off",
-                  className: cn(
-                    "m-0 box-border min-w-[40px] flex-1 border-0 bg-transparent p-0 text-[16px] font-medium leading-5 text-[var(--chekin-color-brand-navy)] outline-none placeholder:text-[var(--chekin-color-gray-1)]",
-                    isBlocked && "cursor-not-allowed"
-                  ),
-                  "aria-autocomplete": "list",
-                  "aria-controls": listboxId,
-                  "aria-activedescendant": isOpen && highlightedIndex >= 0 ? getOptionId2(highlightedIndex) : void 0
-                }
-              ),
-              /* @__PURE__ */ jsxs98("span", { className: "ml-auto flex items-center gap-2 pl-2 text-[var(--chekin-color-gray-2)]", children: [
-                loading && /* @__PURE__ */ jsx151(ThreeDotsLoader, { height: 18, width: 18 }),
-                hasValue && !readOnly && /* @__PURE__ */ jsx151(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: (event) => {
-                      event.stopPropagation();
-                      clearAll();
-                    },
-                    className: "flex h-5 w-5 items-center justify-center rounded-[3px] border-0 bg-transparent p-0 text-[#9696b9] hover:shadow-[0_3px_3px_#0f477734]",
-                    "aria-label": t("clear_all"),
-                    children: /* @__PURE__ */ jsx151(SquareX3, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
-                  }
-                ),
-                /* @__PURE__ */ jsx151(
-                  RotateArrow,
-                  {
-                    shouldRotate: isOpen,
-                    className: cn(
-                      isFocused || isOpen ? "text-[var(--chekin-color-brand-blue)]" : "text-[var(--chekin-color-gray-2)]"
-                    )
-                  }
-                )
-              ] })
-            ]
+                  onRemove: () => removeOption(option)
+                },
+                String(option.value)
+              )
+            )
           }
         ),
-        /* @__PURE__ */ jsx151(
+        /* @__PURE__ */ jsx155(
           Fieldset,
           {
             isFocused: isFocused || isOpen,
@@ -13426,7 +14059,7 @@ function MultiSelectInternal({
             disabled,
             loading,
             readOnly,
-            htmlFor: `${triggerId}-input`,
+            htmlFor: triggerId,
             labelId,
             legend: typeof label === "string" ? label : void 0,
             label,
@@ -13434,7 +14067,7 @@ function MultiSelectInternal({
             onClick: handleContainerClick
           }
         ),
-        /* @__PURE__ */ jsxs98(
+        /* @__PURE__ */ jsxs101(
           SelectMenuPanel,
           {
             isOpen,
@@ -13447,31 +14080,19 @@ function MultiSelectInternal({
             className: dropdownClassName,
             drawerClassName,
             children: [
-              isMobile3 && /* @__PURE__ */ jsx151("div", { className: "border-b border-[#f2f4f8] px-4 pb-2 pt-3", children: /* @__PURE__ */ jsxs98("div", { className: "relative", children: [
-                /* @__PURE__ */ jsx151(
-                  Search4,
-                  {
-                    "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)]"
-                  }
-                ),
-                /* @__PURE__ */ jsx151(
-                  "input",
-                  {
-                    ref: mobileSearchInputRef,
-                    type: "text",
-                    value: searchValue,
-                    placeholder: placeholder ?? "",
-                    onChange: (event) => setSearchValue(event.target.value),
-                    onKeyDown: handleInputKeyDown,
-                    autoComplete: "off",
-                    "aria-controls": listboxId,
-                    "aria-activedescendant": highlightedIndex >= 0 ? getOptionId2(highlightedIndex) : void 0,
-                    className: "m-0 box-border h-9 w-full rounded-md border border-[var(--chekin-color-gray-3)] bg-white px-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)]"
-                  }
-                )
-              ] }) }),
-              /* @__PURE__ */ jsx151(
+              isMobile3 && /* @__PURE__ */ jsx155(
+                SelectSearchInput,
+                {
+                  inputRef: mobileSearchInputRef,
+                  value: searchValue,
+                  placeholder: t("search_placeholder"),
+                  listboxId,
+                  activeOptionId: highlightedIndex >= 0 ? getOptionId2(highlightedIndex) : void 0,
+                  onChange: (event) => setSearchValue(event.target.value),
+                  onKeyDown: handleInputKeyDown
+                }
+              ),
+              /* @__PURE__ */ jsx155(
                 SelectMenu,
                 {
                   id: listboxId,
@@ -13493,13 +14114,13 @@ function MultiSelectInternal({
                   isMulti: true
                 }
               ),
-              canCreateNewOption && /* @__PURE__ */ jsx151(
+              canCreateNewOption && /* @__PURE__ */ jsx155(
                 "button",
                 {
                   type: "button",
                   onClick: createOption,
                   className: "flex w-full items-center justify-start border-0 border-t border-[#f2f4f8] bg-white px-4 py-[16px] text-left text-[16px] font-medium leading-5 text-[var(--chekin-color-brand-blue)] outline-none hover:bg-[var(--chekin-color-surface-pressed)]",
-                  children: formatCreateLabel(trimmedSearch)
+                  children: formatCreateLabel ? formatCreateLabel(trimmedSearch) : t("create_option", { input: trimmedSearch })
                 }
               )
             ]
@@ -13509,26 +14130,24 @@ function MultiSelectInternal({
     }
   );
 }
-var MultiSelect = React49.forwardRef(
+var MultiSelect = React52.forwardRef(
   MultiSelectInternal
 );
 
 // src/dashboard/creatable-multi-select/CreatableMultiSelect.tsx
-import * as React50 from "react";
-import { jsx as jsx152 } from "react/jsx-runtime";
-var CreatableMultiSelect = React50.forwardRef(
-  function CreatableMultiSelect2(props, ref) {
-    return /* @__PURE__ */ jsx152(MultiSelect, { ref, ...props, isCreatable: true });
-  }
-);
+import * as React53 from "react";
+import { jsx as jsx156 } from "react/jsx-runtime";
+var CreatableMultiSelect = React53.forwardRef(function CreatableMultiSelect2(props, ref) {
+  return /* @__PURE__ */ jsx156(MultiSelect, { ref, ...props, isCreatable: true });
+});
 
 // src/dashboard/infinite-scroll-select/InfiniteScrollSelect.tsx
-import * as React51 from "react";
+import * as React54 from "react";
 import { useVirtualizer as useVirtualizer2 } from "@tanstack/react-virtual";
-import { useTranslation as useTranslation33 } from "react-i18next";
+import { useTranslation as useTranslation35 } from "react-i18next";
 
 // src/dashboard/infinite-scroll-select/InfiniteScrollList.tsx
-import { jsx as jsx153, jsxs as jsxs99 } from "react/jsx-runtime";
+import { jsx as jsx157, jsxs as jsxs102 } from "react/jsx-runtime";
 function InfiniteScrollList({
   scrollRef,
   listboxId,
@@ -13545,17 +14164,19 @@ function InfiniteScrollList({
   loadingMoreText,
   activeOptionId,
   getOptionId: getOptionId2,
+  canLoadMore,
   onSelect,
   onHighlight
 }) {
   const virtualItems = virtualizer.getVirtualItems();
-  return /* @__PURE__ */ jsx153(
+  const lastOptionIndex = options.length - 1;
+  return /* @__PURE__ */ jsx157(
     "div",
     {
       ref: scrollRef,
       className: cn("overflow-y-auto", menuClassName),
       style: { height: `${height}px` },
-      children: /* @__PURE__ */ jsx153(
+      children: /* @__PURE__ */ jsx157(
         "div",
         {
           id: listboxId,
@@ -13572,7 +14193,8 @@ function InfiniteScrollList({
             const isSelected = !isLoaderRow && option ? option.value === value?.value : false;
             const isHighlighted = virtualItem.index === highlightedIndex;
             const isOptionDisabled = Boolean(isBlocked || option?.isDisabled);
-            return /* @__PURE__ */ jsx153(
+            const isLastOption = !isLoaderRow && virtualItem.index === lastOptionIndex && !canLoadMore;
+            return /* @__PURE__ */ jsx157(
               "div",
               {
                 "data-index": virtualItem.index,
@@ -13581,10 +14203,26 @@ function InfiniteScrollList({
                   height: `${virtualItem.size}px`,
                   transform: `translateY(${virtualItem.start}px)`
                 },
-                children: isLoaderRow ? /* @__PURE__ */ jsxs99("div", { className: "flex h-full items-center justify-center gap-2 px-4 text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: [
-                  /* @__PURE__ */ jsx153(ThreeDotsLoader, { height: 36, width: 36 }),
-                  /* @__PURE__ */ jsx153("span", { children: loadingMoreText })
-                ] }) : /* @__PURE__ */ jsxs99(
+                children: isLoaderRow ? /* @__PURE__ */ jsxs102(
+                  "div",
+                  {
+                    role: "status",
+                    "aria-busy": "true",
+                    "aria-live": "polite",
+                    className: "flex h-full items-center justify-center",
+                    children: [
+                      /* @__PURE__ */ jsx157("span", { className: "sr-only", children: loadingMoreText }),
+                      /* @__PURE__ */ jsx157(
+                        ThreeDotsLoader,
+                        {
+                          height: 24,
+                          width: 24,
+                          color: "var(--chekin-color-brand-blue)"
+                        }
+                      )
+                    ]
+                  }
+                ) : /* @__PURE__ */ jsxs102(
                   "button",
                   {
                     id: getOptionId2(virtualItem.index),
@@ -13597,14 +14235,15 @@ function InfiniteScrollList({
                     onClick: () => option && onSelect(option),
                     onMouseMove: () => onHighlight(virtualItem.index),
                     className: cn(
-                      "flex h-full w-full items-start justify-between border-0 border-b border-[#f2f4f8] bg-white px-4 text-left text-[16px] font-medium leading-5 text-[var(--chekin-color-brand-navy)] outline-none transition-colors",
+                      "flex h-full w-full items-center justify-between border-0 border-b border-[#f2f4f8] bg-white text-left text-[16px] font-medium leading-5 text-[var(--chekin-color-brand-navy)] outline-none transition-colors",
+                      isLastOption && "border-b-transparent",
                       isHighlighted && !isSelected && "cursor-pointer text-[var(--chekin-color-brand-blue)]",
                       isSelected && "cursor-default font-bold text-[var(--chekin-color-brand-navy)]",
                       isOptionDisabled && "cursor-default opacity-30"
                     ),
                     children: [
-                      /* @__PURE__ */ jsx153("span", { className: "block break-words", children: option?.label }),
-                      option?.description && /* @__PURE__ */ jsx153("span", { className: "ml-2 mt-[3px] shrink-0 text-[12px] font-bold italic text-[#777e91]", children: option.description })
+                      /* @__PURE__ */ jsx157("span", { className: "block break-words", children: option?.label }),
+                      option?.description && /* @__PURE__ */ jsx157("span", { className: "ml-2 shrink-0 text-[12px] font-bold italic text-[#777e91]", children: option.description })
                     ]
                   }
                 )
@@ -13619,7 +14258,7 @@ function InfiniteScrollList({
 }
 
 // src/dashboard/infinite-scroll-select/InfiniteScrollSelect.tsx
-import { jsx as jsx154, jsxs as jsxs100 } from "react/jsx-runtime";
+import { jsx as jsx158, jsxs as jsxs103 } from "react/jsx-runtime";
 var DEFAULT_ITEM_HEIGHT = 60;
 var DEFAULT_LIST_HEIGHT = 322;
 var DEFAULT_OVERSCAN = 5;
@@ -13634,6 +14273,7 @@ function InfiniteScrollSelectInternal({
   placeholder,
   getValueLabel,
   disabled,
+  readOnly,
   loading,
   optional,
   tooltip,
@@ -13647,10 +14287,9 @@ function InfiniteScrollSelectInternal({
   name,
   width,
   noOptionsMessage,
-  searchable = true,
-  searchPlaceholder,
-  filterOption,
+  filterOption = defaultFilterOption,
   helperText,
+  clearable = true,
   canLoadMore,
   isLoadingMore,
   loadMoreItems,
@@ -13661,32 +14300,42 @@ function InfiniteScrollSelectInternal({
   overscan = DEFAULT_OVERSCAN,
   loadMoreThreshold = DEFAULT_LOAD_MORE_THRESHOLD
 }, ref) {
-  const triggerRef = React51.useRef(null);
-  const searchInputRef = React51.useRef(null);
-  const scrollRef = React51.useRef(null);
-  const previousHighlightedIndexRef = React51.useRef(-1);
-  const lastLoadMoreOptionsLengthRef = React51.useRef(null);
-  const [highlightedIndex, setHighlightedIndex] = React51.useState(-1);
+  const inputRef = React54.useRef(null);
+  const mobileSearchInputRef = React54.useRef(null);
+  const scrollRef = React54.useRef(null);
+  const previousHighlightedIndexRef = React54.useRef(-1);
+  const lastLoadMoreOptionsLengthRef = React54.useRef(null);
+  const [isFocused, setIsFocused] = React54.useState(false);
+  const [highlightedIndex, setHighlightedIndex] = React54.useState(-1);
   const isMobile3 = useIsMobile();
-  const { t } = useTranslation33();
-  const resolvedSearchPlaceholder = searchPlaceholder ?? t("search_placeholder");
+  const { t } = useTranslation35();
   const resolvedLoadingMoreText = loadingMoreText ?? t("loading_more");
+  const resolveLabel = React54.useCallback(
+    (option) => option ? getValueLabel?.(option) ?? String(option.label) : "",
+    [getValueLabel]
+  );
+  const valueLabel = resolveLabel(value);
+  const [inputValue, setInputValue] = React54.useState(valueLabel);
   const hasValue = Boolean(value);
-  const isBlocked = Boolean(disabled) || Boolean(loading);
-  const triggerError = error ?? invalid;
-  const hasInvalidState = Boolean(triggerError);
+  const isEmpty = !hasValue && !inputValue;
+  const isBlocked = Boolean(disabled) || Boolean(loading) || Boolean(readOnly);
+  const hasInvalidState = Boolean(error) || Boolean(invalid);
   const errorMessage = typeof error === "string" ? error : void 0;
-  const valueLabel = value ? getValueLabel?.(value) ?? String(value.label) : void 0;
-  const { containerRef, isOpen, closeMenu, toggleMenu, setIsOpen } = useSelectMenuState({
+  const { containerRef, isOpen, closeMenu, setIsOpen } = useSelectMenuState({
     isBlocked,
-    isMobile: isMobile3
+    isMobile: isMobile3,
+    onOutsideClick: () => setIsFocused(false)
   });
   const { triggerId, labelId, valueId, listboxId, describedErrorId, errorId, getOptionId: getOptionId2 } = useSelectIds({ name, hasValue, error, hideErrorMessage });
-  const { searchValue, setSearchValue, filteredOptions } = useSelectSearch({
-    options,
-    searchable,
-    filterOption
-  });
+  React54.useEffect(() => {
+    if (!isFocused) setInputValue(valueLabel);
+  }, [valueLabel, isFocused]);
+  const trimmedInput = inputValue.trim();
+  const isFiltering = trimmedInput.length > 0 && trimmedInput.toLowerCase() !== valueLabel.toLowerCase();
+  const filteredOptions = React54.useMemo(() => {
+    if (!isFiltering) return options;
+    return options.filter((option) => filterOption(option, trimmedInput));
+  }, [options, isFiltering, trimmedInput, filterOption]);
   const itemCount = filteredOptions.length + (canLoadMore || isLoadingMore ? 1 : 0);
   const virtualizer = useVirtualizer2({
     count: itemCount,
@@ -13694,15 +14343,17 @@ function InfiniteScrollSelectInternal({
     estimateSize: () => itemHeight,
     overscan
   });
-  React51.useImperativeHandle(ref, () => triggerRef.current, []);
-  React51.useEffect(() => {
+  React54.useImperativeHandle(
+    ref,
+    () => containerRef.current
+  );
+  React54.useEffect(() => {
     if (isOpen) return;
-    setSearchValue("");
     setHighlightedIndex(-1);
     previousHighlightedIndexRef.current = -1;
     lastLoadMoreOptionsLengthRef.current = null;
-  }, [isOpen, setSearchValue]);
-  React51.useEffect(() => {
+  }, [isOpen]);
+  React54.useEffect(() => {
     if (!isOpen) return;
     setHighlightedIndex((current) => {
       const option = current >= 0 ? filteredOptions[current] : void 0;
@@ -13711,13 +14362,15 @@ function InfiniteScrollSelectInternal({
       return selectedIndex >= 0 ? selectedIndex : getFirstEnabledOptionIndex(filteredOptions);
     });
   }, [isOpen, filteredOptions, value]);
-  React51.useEffect(() => {
-    if (!isOpen || !searchable) return;
-    const frame = window.requestAnimationFrame(() => searchInputRef.current?.focus());
+  React54.useEffect(() => {
+    if (!isOpen || !isMobile3) return;
+    const frame = window.requestAnimationFrame(
+      () => mobileSearchInputRef.current?.focus()
+    );
     return () => window.cancelAnimationFrame(frame);
-  }, [isOpen, searchable]);
+  }, [isOpen, isMobile3]);
   const virtualItems = virtualizer.getVirtualItems();
-  React51.useEffect(() => {
+  React54.useEffect(() => {
     if (!isOpen || !canLoadMore || isLoadingMore || !loadMoreItems) return;
     if (virtualItems.length === 0) return;
     const lastItem = virtualItems[virtualItems.length - 1];
@@ -13734,65 +14387,92 @@ function InfiniteScrollSelectInternal({
     loadMoreThreshold,
     virtualItems
   ]);
-  React51.useEffect(() => {
+  React54.useEffect(() => {
     const changed = previousHighlightedIndexRef.current !== highlightedIndex;
     previousHighlightedIndexRef.current = highlightedIndex;
     if (!isOpen || highlightedIndex < 0 || !changed) return;
     virtualizer.scrollToIndex(highlightedIndex, { align: "auto" });
   }, [highlightedIndex, isOpen, virtualizer]);
-  const handleSelect = (option) => {
+  const commitSelection = (option) => {
     if (option.isDisabled) return;
     onChange(option);
+    setInputValue(resolveLabel(option));
     setIsOpen(false);
-    triggerRef.current?.focus();
+    setIsFocused(false);
+    inputRef.current?.blur();
   };
-  const handleTriggerKeyDown = (event) => {
+  const clearSelection = (event) => {
+    event.stopPropagation();
     if (isBlocked) return;
-    if (event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "Enter" || event.key === " ") {
-      event.preventDefault();
-      setIsOpen(true);
-    }
+    onChange(null);
+    setInputValue("");
+    onSearchChange?.("");
+    inputRef.current?.focus();
   };
-  const handleSearchKeyDown = (event) => {
+  const handleInputFocus = () => {
+    if (isBlocked) return;
+    setIsFocused(true);
+    setIsOpen(true);
+    requestAnimationFrame(() => inputRef.current?.select());
+  };
+  const handleBlur = (event) => {
+    if (containerRef.current?.contains(event.relatedTarget)) return;
+    setIsFocused(false);
+    setInputValue(valueLabel);
+    onBlur?.(event);
+  };
+  const handleInputChange = (event) => {
+    const next = event.target.value;
+    setInputValue(next);
+    lastLoadMoreOptionsLengthRef.current = null;
+    onSearchChange?.(next);
+    if (!isOpen) setIsOpen(true);
+  };
+  const handleInputKeyDown = (event) => {
     if (event.key === "ArrowDown") {
       event.preventDefault();
+      if (!isOpen) {
+        setIsOpen(true);
+        return;
+      }
       const next = getNextEnabledOptionIndex(filteredOptions, highlightedIndex + 1, 1);
       if (next >= 0) setHighlightedIndex(next);
       return;
     }
     if (event.key === "ArrowUp") {
       event.preventDefault();
+      if (!isOpen) {
+        setIsOpen(true);
+        return;
+      }
       const next = getNextEnabledOptionIndex(filteredOptions, highlightedIndex - 1, -1);
       if (next >= 0) setHighlightedIndex(next);
       return;
     }
     if (event.key === "Enter") {
+      if (!isOpen) return;
       event.preventDefault();
       const option = filteredOptions[highlightedIndex];
-      if (option && !option.isDisabled) handleSelect(option);
+      if (option && !option.isDisabled) commitSelection(option);
       return;
     }
     if (event.key === "Escape") {
       event.preventDefault();
+      setInputValue(valueLabel);
       setIsOpen(false);
-      triggerRef.current?.focus();
-      return;
-    }
-    if (event.key === "Tab") {
-      setIsOpen(false);
+      inputRef.current?.blur();
     }
   };
-  const handleSearchChange = (event) => {
-    const next = event.target.value;
-    setSearchValue(next);
-    lastLoadMoreOptionsLengthRef.current = null;
-    onSearchChange?.(next);
+  const handleContainerClick = () => {
+    if (isBlocked) return;
+    inputRef.current?.focus();
+    setIsOpen(true);
   };
   const emptyMessage = noOptionsMessage?.();
   const totalSize = virtualizer.getTotalSize();
   const measuredListHeight = Math.min(listHeight, Math.max(totalSize, itemHeight));
   const activeOptionId = highlightedIndex >= 0 ? getOptionId2(highlightedIndex) : void 0;
-  return /* @__PURE__ */ jsxs100(
+  return /* @__PURE__ */ jsxs103(
     SelectFieldShell,
     {
       containerRef,
@@ -13809,72 +14489,105 @@ function InfiniteScrollSelectInternal({
       helperText,
       name,
       hiddenValue: value ? String(value.value) : "",
+      onBlur: handleBlur,
       children: [
-        /* @__PURE__ */ jsx154(
-          SelectTrigger,
+        /* @__PURE__ */ jsx158(
+          ComboboxTrigger,
           {
-            triggerRef,
             triggerId,
             listboxId,
             labelId,
             valueId,
             describedErrorId,
-            hasValue,
             isOpen,
+            isFocused,
             isBlocked,
+            hasValue,
+            isEmpty,
             disabled,
+            readOnly,
             loading,
             invalid: hasInvalidState,
+            inputRef,
+            inputValue,
             placeholder,
-            valueLabel,
-            onClick: toggleMenu,
-            onKeyDown: handleTriggerKeyDown,
-            onBlur
+            highlightedIndex,
+            getOptionId: getOptionId2,
+            onInputChange: handleInputChange,
+            onInputFocus: handleInputFocus,
+            onInputKeyDown: handleInputKeyDown,
+            onContainerClick: handleContainerClick,
+            showClear: clearable && hasValue && !readOnly && !disabled,
+            onClear: clearSelection,
+            clearLabel: t("clear")
           }
         ),
-        /* @__PURE__ */ jsx154(
+        /* @__PURE__ */ jsx158(
           Fieldset,
           {
-            isFocused: isOpen,
+            isFocused: isFocused || isOpen,
             invalid: hasInvalidState,
-            isEmpty: !hasValue,
-            isActivated: hasValue || isOpen,
+            isEmpty: isEmpty && !inputValue,
+            isActivated: !isEmpty || isFocused || isOpen || Boolean(inputValue),
             disabled,
             loading,
+            readOnly,
             htmlFor: triggerId,
             labelId,
             legend: typeof label === "string" ? label : void 0,
             label,
             tooltip,
-            onClick: !isBlocked ? toggleMenu : void 0
+            onClick: handleContainerClick
           }
         ),
-        /* @__PURE__ */ jsxs100(
+        /* @__PURE__ */ jsxs103(
           SelectMenuPanel,
           {
             isOpen,
             isMobile: isMobile3,
-            onClose: closeMenu,
+            onClose: () => {
+              closeMenu();
+              setIsFocused(false);
+            },
             title: typeof label === "string" ? label : void 0,
             className: dropdownClassName,
             drawerClassName,
             children: [
-              searchable && /* @__PURE__ */ jsx154(
+              isMobile3 && /* @__PURE__ */ jsx158(
                 SelectSearchInput,
                 {
-                  inputRef: searchInputRef,
-                  value: searchValue,
-                  placeholder: resolvedSearchPlaceholder,
+                  inputRef: mobileSearchInputRef,
+                  value: inputValue,
+                  placeholder: t("search_placeholder"),
                   listboxId,
                   activeOptionId,
-                  onChange: handleSearchChange,
-                  onKeyDown: handleSearchKeyDown
+                  onChange: handleInputChange,
+                  onKeyDown: handleInputKeyDown
                 }
               ),
-              filteredOptions.length === 0 && isLoadingMore ? /* @__PURE__ */ jsxs100("div", { className: "flex items-center justify-center gap-2 px-4 py-[20px] text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: [
-                /* @__PURE__ */ jsx154(ThreeDotsLoader, { height: 18, width: 18 }),
-                /* @__PURE__ */ jsx154("span", { children: resolvedLoadingMoreText })
-              ] }) : filteredOptions.length === 0 ? /* @__PURE__ */ jsx154("div", { className: "px-4 py-[20px] text-left text-[16px] text-[var(--chekin-color-brand-navy)]", children: emptyMessage ?? t("no_options") }) : /* @__PURE__ */ jsx154(
+              /* @__PURE__ */ jsx158("div", { className: "min-h-[75px] px-4 pb-[19px] pt-[17px]", children: filteredOptions.length === 0 ? isLoadingMore ? /* @__PURE__ */ jsxs103(
+                "div",
+                {
+                  role: "status",
+                  "aria-busy": "true",
+                  "aria-live": "polite",
+                  className: "flex flex-col gap-2",
+                  children: [
+                    /* @__PURE__ */ jsx158("span", { className: "sr-only", children: resolvedLoadingMoreText }),
+                    Array.from({ length: 3 }).map((_, index) => /* @__PURE__ */ jsx158(
+                      Skeleton,
+                      {
+                        className: "h-10 w-full rounded-md",
+                        style: {
+                          animationDelay: `${index * 120}ms`,
+                          opacity: 1 - index * 0.2
+                        }
+                      },
+                      index
+                    ))
+                  ]
+                }
+              ) : /* @__PURE__ */ jsx158("div", { className: "flex min-h-[40px] items-center text-[16px] font-medium text-[var(--chekin-color-brand-navy)]", children: emptyMessage ?? t("no_options") }) : /* @__PURE__ */ jsx158(
                 InfiniteScrollList,
                 {
                   scrollRef,
@@ -13892,10 +14605,11 @@ function InfiniteScrollSelectInternal({
                   loadingMoreText: resolvedLoadingMoreText,
                   activeOptionId,
                   getOptionId: getOptionId2,
-                  onSelect: handleSelect,
+                  canLoadMore: Boolean(canLoadMore || isLoadingMore),
+                  onSelect: commitSelection,
                   onHighlight: setHighlightedIndex
                 }
-              )
+              ) })
             ]
           }
         )
@@ -13903,14 +14617,14 @@ function InfiniteScrollSelectInternal({
     }
   );
 }
-var InfiniteScrollSelect = React51.forwardRef(
+var InfiniteScrollSelect = React54.forwardRef(
   InfiniteScrollSelectInternal
 );
 
 // src/dashboard/textarea/Textarea.tsx
-import * as React52 from "react";
-import { useTranslation as useTranslation34 } from "react-i18next";
-import { jsx as jsx155, jsxs as jsxs101 } from "react/jsx-runtime";
+import * as React55 from "react";
+import { useTranslation as useTranslation36 } from "react-i18next";
+import { jsx as jsx159, jsxs as jsxs104 } from "react/jsx-runtime";
 var LINE_HEIGHT = 20;
 var VERTICAL_PADDING = 32;
 function getEmptyState(empty, value, defaultValue) {
@@ -13918,128 +14632,126 @@ function getEmptyState(empty, value, defaultValue) {
   if (value !== void 0) return !String(value);
   return !defaultValue;
 }
-var Textarea = React52.forwardRef(
-  function Textarea2({
-    className,
-    textareaClassName,
-    label,
-    invalid,
-    error,
-    empty,
-    optional,
-    disabled,
-    readOnly,
-    loading,
-    tooltip,
-    name,
-    id,
-    helperText,
-    minRows = 3,
-    maxRows,
-    autosize = true,
-    value,
-    defaultValue,
-    onInput,
-    ...textareaProps
-  }, ref) {
-    const innerRef = React52.useRef(null);
-    const combinedRef = useCombinedRef(ref, innerRef);
-    const reactId = React52.useId();
-    const textareaId = id ?? name ?? `dash-textarea-${reactId}`;
-    const { t } = useTranslation34();
-    const isInvalid = Boolean(invalid || error);
-    const isEmpty = getEmptyState(empty, value, defaultValue);
-    const isBlocked = Boolean(disabled);
-    const resize = React52.useCallback(() => {
-      const el = innerRef.current;
-      if (!el || !autosize) return;
-      el.style.height = "auto";
-      const minHeight = minRows * LINE_HEIGHT + VERTICAL_PADDING;
-      const maxHeight = maxRows ? maxRows * LINE_HEIGHT + VERTICAL_PADDING : Infinity;
-      const nextHeight = Math.min(Math.max(el.scrollHeight, minHeight), maxHeight);
-      el.style.height = `${nextHeight}px`;
-      el.style.overflowY = el.scrollHeight > nextHeight ? "auto" : "hidden";
-    }, [autosize, maxRows, minRows]);
-    React52.useLayoutEffect(() => {
-      resize();
-    }, [resize, value]);
-    const handleInput = (event) => {
-      resize();
-      onInput?.(event);
-    };
-    return /* @__PURE__ */ jsxs101(
-      "div",
-      {
-        className: cn(
-          "relative block min-h-[88px] w-full max-w-[var(--field-max-width,296px)]",
-          isBlocked && "cursor-not-allowed opacity-50",
-          loading && "cursor-progress opacity-50",
-          className
-        ),
-        children: [
-          label && /* @__PURE__ */ jsxs101(
-            "label",
-            {
-              htmlFor: textareaId,
-              className: "mb-2 flex select-none items-center text-[16px] font-medium text-[var(--chekin-color-brand-navy)]",
-              children: [
-                label,
-                tooltip && /* @__PURE__ */ jsx155("span", { className: "ml-1 inline-flex", children: /* @__PURE__ */ jsx155(HelpTooltip, { content: tooltip, size: 16 }) })
-              ]
-            }
-          ),
-          /* @__PURE__ */ jsx155(
-            "textarea",
-            {
-              ref: combinedRef,
-              id: textareaId,
-              name,
-              value,
-              defaultValue,
-              rows: minRows,
-              disabled: isBlocked || loading,
-              readOnly: isBlocked || readOnly,
-              "aria-invalid": isInvalid,
-              "aria-busy": loading,
-              onInput: handleInput,
-              className: cn(
-                "m-0 box-border block w-full resize-none rounded-[6px] border bg-white px-4 py-4 text-[16px] font-medium leading-5 text-[var(--chekin-color-brand-navy)] outline-none transition-colors duration-100 ease-in-out",
-                "border-[var(--chekin-color-gray-3)] placeholder:font-medium placeholder:text-[var(--chekin-color-gray-1)]",
-                !isBlocked && "focus:border-[var(--chekin-color-brand-blue)]",
-                isEmpty && "border-[var(--chekin-color-gray-3)] bg-[var(--chekin-color-surface-input-empty)] text-[var(--chekin-color-gray-1)]",
-                isInvalid && "border-[var(--error-message-color)] focus:border-[var(--error-message-color)]",
-                (readOnly || isBlocked) && "cursor-default",
-                isBlocked && "cursor-not-allowed",
-                loading && "cursor-progress",
-                textareaClassName
-              ),
-              style: autosize ? { minHeight: minRows * LINE_HEIGHT + VERTICAL_PADDING } : void 0,
-              ...textareaProps
-            }
-          ),
-          error && /* @__PURE__ */ jsx155(
-            FieldErrorMessage,
-            {
-              id: `${textareaId}-error`,
-              message: error,
-              className: "mt-[1px] text-[14px]"
-            }
-          ),
-          !error && optional && /* @__PURE__ */ jsx155("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : t("optional") }),
-          !error && helperText && /* @__PURE__ */ jsx155("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText })
-        ]
-      }
-    );
-  }
-);
+var Textarea = React55.forwardRef(function Textarea2({
+  className,
+  textareaClassName,
+  label,
+  invalid,
+  error,
+  empty,
+  optional,
+  disabled,
+  readOnly,
+  loading,
+  tooltip,
+  name,
+  id,
+  helperText,
+  minRows = 3,
+  maxRows,
+  autosize = true,
+  value,
+  defaultValue,
+  onInput,
+  ...textareaProps
+}, ref) {
+  const innerRef = React55.useRef(null);
+  const combinedRef = useCombinedRef(ref, innerRef);
+  const reactId = React55.useId();
+  const textareaId = id ?? name ?? `dash-textarea-${reactId}`;
+  const { t } = useTranslation36();
+  const isInvalid = Boolean(invalid || error);
+  const isEmpty = getEmptyState(empty, value, defaultValue);
+  const isBlocked = Boolean(disabled);
+  const resize = React55.useCallback(() => {
+    const el = innerRef.current;
+    if (!el || !autosize) return;
+    el.style.height = "auto";
+    const minHeight = minRows * LINE_HEIGHT + VERTICAL_PADDING;
+    const maxHeight = maxRows ? maxRows * LINE_HEIGHT + VERTICAL_PADDING : Infinity;
+    const nextHeight = Math.min(Math.max(el.scrollHeight, minHeight), maxHeight);
+    el.style.height = `${nextHeight}px`;
+    el.style.overflowY = el.scrollHeight > nextHeight ? "auto" : "hidden";
+  }, [autosize, maxRows, minRows]);
+  React55.useLayoutEffect(() => {
+    resize();
+  }, [resize, value]);
+  const handleInput = (event) => {
+    resize();
+    onInput?.(event);
+  };
+  return /* @__PURE__ */ jsxs104(
+    "div",
+    {
+      className: cn(
+        "relative block min-h-[88px] w-full max-w-[var(--field-max-width,296px)]",
+        isBlocked && "cursor-not-allowed opacity-50",
+        loading && "cursor-progress opacity-50",
+        className
+      ),
+      children: [
+        label && /* @__PURE__ */ jsxs104(
+          "label",
+          {
+            htmlFor: textareaId,
+            className: "mb-2 flex select-none items-center text-[16px] font-medium text-[var(--chekin-color-brand-navy)]",
+            children: [
+              label,
+              tooltip && /* @__PURE__ */ jsx159("span", { className: "ml-1 inline-flex", children: /* @__PURE__ */ jsx159(HelpTooltip, { content: tooltip, size: 16 }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx159(
+          "textarea",
+          {
+            ref: combinedRef,
+            id: textareaId,
+            name,
+            value,
+            defaultValue,
+            rows: minRows,
+            disabled: isBlocked || loading,
+            readOnly: isBlocked || readOnly,
+            "aria-invalid": isInvalid,
+            "aria-busy": loading,
+            onInput: handleInput,
+            className: cn(
+              "m-0 box-border block w-full resize-none rounded-[6px] border bg-white px-4 py-4 text-[16px] font-medium leading-5 text-[var(--chekin-color-brand-navy)] outline-none transition-colors duration-100 ease-in-out",
+              "border-[var(--chekin-color-gray-3)] placeholder:font-medium placeholder:text-[var(--chekin-color-gray-1)]",
+              !isBlocked && "focus:border-[var(--chekin-color-brand-blue)]",
+              isEmpty && "border-[var(--chekin-color-gray-3)] bg-[var(--chekin-color-surface-input-empty)] text-[var(--chekin-color-gray-1)]",
+              isInvalid && "border-[var(--error-message-color)] focus:border-[var(--error-message-color)]",
+              (readOnly || isBlocked) && "cursor-default",
+              isBlocked && "cursor-not-allowed",
+              loading && "cursor-progress",
+              textareaClassName
+            ),
+            style: autosize ? { minHeight: minRows * LINE_HEIGHT + VERTICAL_PADDING } : void 0,
+            ...textareaProps
+          }
+        ),
+        error && /* @__PURE__ */ jsx159(
+          FieldErrorMessage,
+          {
+            id: `${textareaId}-error`,
+            message: error,
+            className: "mt-[1px] text-[14px]"
+          }
+        ),
+        !error && optional && /* @__PURE__ */ jsx159("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : t("optional") }),
+        !error && helperText && /* @__PURE__ */ jsx159("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText })
+      ]
+    }
+  );
+});
 
 // src/dashboard/datepicker/Datepicker.tsx
-import * as React54 from "react";
+import * as React57 from "react";
 import { ChevronDown as ChevronDown3 } from "lucide-react";
-import { useTranslation as useTranslation35 } from "react-i18next";
+import { useTranslation as useTranslation37 } from "react-i18next";
 
 // src/airbnb-fields/datepicker/useDatePickerWheel.ts
-import * as React53 from "react";
+import * as React56 from "react";
 
 // src/airbnb-fields/datepicker/datePicker.utils.ts
 var DISPLAY_PAD_LENGTH = 2;
@@ -14190,21 +14902,21 @@ function useDatePickerWheel({
   minDate,
   maxDate
 }) {
-  const years = React53.useMemo(() => getYearRange(minDate, maxDate), [maxDate, minDate]);
-  const [draftDate, setDraftDate] = React53.useState(
+  const years = React56.useMemo(() => getYearRange(minDate, maxDate), [maxDate, minDate]);
+  const [draftDate, setDraftDate] = React56.useState(
     () => resolveInitialDate({ value, defaultValue, minDate, maxDate })
   );
   const draftYear = draftDate.getFullYear();
   const draftMonth = draftDate.getMonth();
-  const [monthScrollTop, setMonthScrollTop] = React53.useState(0);
-  const [dayScrollTop, setDayScrollTop] = React53.useState(0);
-  const [yearScrollTop, setYearScrollTop] = React53.useState(0);
-  const monthListRef = React53.useRef(null);
-  const dayListRef = React53.useRef(null);
-  const yearListRef = React53.useRef(null);
-  const settleTimeoutsRef = React53.useRef({});
-  const animationFramesRef = React53.useRef({});
-  const columnRefs = React53.useMemo(
+  const [monthScrollTop, setMonthScrollTop] = React56.useState(0);
+  const [dayScrollTop, setDayScrollTop] = React56.useState(0);
+  const [yearScrollTop, setYearScrollTop] = React56.useState(0);
+  const monthListRef = React56.useRef(null);
+  const dayListRef = React56.useRef(null);
+  const yearListRef = React56.useRef(null);
+  const settleTimeoutsRef = React56.useRef({});
+  const animationFramesRef = React56.useRef({});
+  const columnRefs = React56.useMemo(
     () => ({
       month: monthListRef,
       day: dayListRef,
@@ -14212,7 +14924,7 @@ function useDatePickerWheel({
     }),
     []
   );
-  const setColumnScrollTop = React53.useCallback(
+  const setColumnScrollTop = React56.useCallback(
     (column, nextScrollTop) => {
       if (column === "month") {
         setMonthScrollTop(nextScrollTop);
@@ -14226,19 +14938,19 @@ function useDatePickerWheel({
     },
     []
   );
-  const clearSettleTimeout = React53.useCallback((column) => {
+  const clearSettleTimeout = React56.useCallback((column) => {
     const timeoutId = settleTimeoutsRef.current[column];
     if (timeoutId === void 0) return;
     window.clearTimeout(timeoutId);
     delete settleTimeoutsRef.current[column];
   }, []);
-  const clearAnimationFrame = React53.useCallback((column) => {
+  const clearAnimationFrame = React56.useCallback((column) => {
     const frameId = animationFramesRef.current[column];
     if (frameId === void 0) return;
     window.cancelAnimationFrame(frameId);
     delete animationFramesRef.current[column];
   }, []);
-  React53.useEffect(
+  React56.useEffect(
     () => () => {
       ["month", "day", "year"].forEach((column) => {
         clearSettleTimeout(column);
@@ -14247,22 +14959,22 @@ function useDatePickerWheel({
     },
     [clearAnimationFrame, clearSettleTimeout]
   );
-  React53.useEffect(() => {
+  React56.useEffect(() => {
     if (isOpen) return;
     setDraftDate(resolveInitialDate({ value, defaultValue, minDate, maxDate }));
   }, [defaultValue, isOpen, maxDate, minDate, value]);
-  const months = React53.useMemo(
+  const months = React56.useMemo(
     () => getAllowedMonths(draftYear, minDate, maxDate),
     [draftYear, maxDate, minDate]
   );
-  const days = React53.useMemo(
+  const days = React56.useMemo(
     () => getAllowedDays(draftYear, draftMonth, minDate, maxDate),
     [draftMonth, draftYear, maxDate, minDate]
   );
   const monthIndex = months.findIndex((month) => month === draftMonth);
   const dayIndex = days.findIndex((day) => day === draftDate.getDate());
   const yearIndex = years.findIndex((year) => year === draftYear);
-  const syncScrollPositions = React53.useCallback(
+  const syncScrollPositions = React56.useCallback(
     (nextDate, behavior = "auto") => {
       const nextMonths = getAllowedMonths(nextDate.getFullYear(), minDate, maxDate);
       const nextMonthIndex = nextMonths.findIndex((month) => month === nextDate.getMonth());
@@ -14286,7 +14998,7 @@ function useDatePickerWheel({
     },
     [maxDate, minDate, years]
   );
-  React53.useLayoutEffect(() => {
+  React56.useLayoutEffect(() => {
     if (!isOpen) return;
     const nextDate = resolveInitialDate({ value, defaultValue, minDate, maxDate });
     setDraftDate(nextDate);
@@ -14297,7 +15009,7 @@ function useDatePickerWheel({
       window.cancelAnimationFrame(frameId);
     };
   }, [defaultValue, isOpen, maxDate, minDate, syncScrollPositions, value]);
-  const updateDraftDate = React53.useCallback(
+  const updateDraftDate = React56.useCallback(
     (column, targetIndex, behavior = "smooth") => {
       const currentDate = stripTime(draftDate);
       const currentYear = currentDate.getFullYear();
@@ -14342,7 +15054,7 @@ function useDatePickerWheel({
     },
     [days, draftDate, maxDate, minDate, months, syncScrollPositions, years]
   );
-  const settleColumnScroll = React53.useCallback(
+  const settleColumnScroll = React56.useCallback(
     (column) => {
       const list = columnRefs[column].current;
       if (!list) return;
@@ -14355,7 +15067,7 @@ function useDatePickerWheel({
     },
     [columnRefs, days.length, months.length, updateDraftDate, years.length]
   );
-  const scheduleScrollSettle = React53.useCallback(
+  const scheduleScrollSettle = React56.useCallback(
     (column) => {
       clearSettleTimeout(column);
       settleTimeoutsRef.current[column] = window.setTimeout(() => {
@@ -14364,7 +15076,7 @@ function useDatePickerWheel({
     },
     [clearSettleTimeout, settleColumnScroll]
   );
-  const handleColumnScroll = React53.useCallback(
+  const handleColumnScroll = React56.useCallback(
     (column) => {
       const list = columnRefs[column].current;
       if (!list) return;
@@ -14378,13 +15090,13 @@ function useDatePickerWheel({
     },
     [clearAnimationFrame, columnRefs, scheduleScrollSettle, setColumnScrollTop]
   );
-  const handleOptionSelect = React53.useCallback(
+  const handleOptionSelect = React56.useCallback(
     (column, targetIndex) => {
       updateDraftDate(column, targetIndex, "smooth");
     },
     [updateDraftDate]
   );
-  const focusAdjacentColumn = React53.useCallback(
+  const focusAdjacentColumn = React56.useCallback(
     (column, direction) => {
       const order = ["month", "day", "year"];
       const currentIndex = order.indexOf(column);
@@ -14394,7 +15106,7 @@ function useDatePickerWheel({
     },
     [columnRefs]
   );
-  const handleColumnKeyDown = React53.useCallback(
+  const handleColumnKeyDown = React56.useCallback(
     (column, event) => {
       const currentIndex = column === "month" ? monthIndex : column === "day" ? dayIndex : yearIndex;
       const maxIndex = column === "month" ? months.length - 1 : column === "day" ? days.length - 1 : years.length - 1;
@@ -14460,7 +15172,7 @@ function useDatePickerWheel({
 }
 
 // src/airbnb-fields/datepicker/DatePickerWheelColumn.tsx
-import { jsx as jsx156, jsxs as jsxs102 } from "react/jsx-runtime";
+import { jsx as jsx160, jsxs as jsxs105 } from "react/jsx-runtime";
 var spacerHeight = DATE_PICKER_OPTION_HEIGHT * DATE_PICKER_WHEEL_BUFFER_OPTIONS;
 function AirbnbDatePickerWheelColumn({
   id,
@@ -14474,7 +15186,7 @@ function AirbnbDatePickerWheelColumn({
   onOptionSelect,
   column
 }) {
-  return /* @__PURE__ */ jsx156("div", { className: "relative z-10 min-w-0", children: /* @__PURE__ */ jsxs102(
+  return /* @__PURE__ */ jsx160("div", { className: "relative z-10 min-w-0", children: /* @__PURE__ */ jsxs105(
     "div",
     {
       id,
@@ -14491,14 +15203,14 @@ function AirbnbDatePickerWheelColumn({
         WebkitOverflowScrolling: "touch"
       },
       children: [
-        /* @__PURE__ */ jsx156("div", { style: { height: `${spacerHeight}px` } }),
+        /* @__PURE__ */ jsx160("div", { style: { height: `${spacerHeight}px` } }),
         items.map((item, index) => {
           const { style } = getWheelOptionStyles(
             index,
             scrollTop,
             DATE_PICKER_OPTION_HEIGHT
           );
-          return /* @__PURE__ */ jsx156(
+          return /* @__PURE__ */ jsx160(
             "button",
             {
               id: `${id}-option-${index}`,
@@ -14514,14 +15226,14 @@ function AirbnbDatePickerWheelColumn({
             `${column}-${item}-${index}`
           );
         }),
-        /* @__PURE__ */ jsx156("div", { style: { height: `${spacerHeight}px` } })
+        /* @__PURE__ */ jsx160("div", { style: { height: `${spacerHeight}px` } })
       ]
     }
   ) });
 }
 
 // src/airbnb-fields/datepicker/DatePickerContent.tsx
-import { jsx as jsx157, jsxs as jsxs103 } from "react/jsx-runtime";
+import { jsx as jsx161, jsxs as jsxs106 } from "react/jsx-runtime";
 function AirbnbDatePickerBody({
   baseId,
   label,
@@ -14543,19 +15255,19 @@ function AirbnbDatePickerBody({
   onOptionSelect,
   onDone
 }) {
-  return /* @__PURE__ */ jsxs103("div", { className: "px-6 pb-4 pt-1 bg-white", children: [
-    /* @__PURE__ */ jsxs103("div", { className: "relative overflow-hidden rounded-[24px]", children: [
-      /* @__PURE__ */ jsx157("div", { className: "pointer-events-none absolute inset-x-0 top-0 z-20 h-16 bg-gradient-to-b from-white via-white/80 to-transparent" }),
-      /* @__PURE__ */ jsx157("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 z-20 h-16 bg-gradient-to-t from-white via-white/80 to-transparent" }),
-      /* @__PURE__ */ jsx157(
+  return /* @__PURE__ */ jsxs106("div", { className: "px-6 pb-4 pt-1 bg-white", children: [
+    /* @__PURE__ */ jsxs106("div", { className: "relative overflow-hidden rounded-[24px]", children: [
+      /* @__PURE__ */ jsx161("div", { className: "pointer-events-none absolute inset-x-0 top-0 z-20 h-16 bg-gradient-to-b from-white via-white/80 to-transparent" }),
+      /* @__PURE__ */ jsx161("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 z-20 h-16 bg-gradient-to-t from-white via-white/80 to-transparent" }),
+      /* @__PURE__ */ jsx161(
         "div",
         {
           "aria-hidden": true,
           className: "pointer-events-none absolute inset-x-0 top-1/2 z-0 h-8 -translate-y-1/2 rounded-[12px] bg-black/[0.04]"
         }
       ),
-      /* @__PURE__ */ jsxs103("div", { className: "relative grid grid-cols-[1.35fr_0.7fr_1fr] gap-1", children: [
-        /* @__PURE__ */ jsx157(
+      /* @__PURE__ */ jsxs106("div", { className: "relative grid grid-cols-[1.35fr_0.7fr_1fr] gap-1", children: [
+        /* @__PURE__ */ jsx161(
           AirbnbDatePickerWheelColumn,
           {
             id: `${baseId}-month`,
@@ -14570,7 +15282,7 @@ function AirbnbDatePickerBody({
             onOptionSelect
           }
         ),
-        /* @__PURE__ */ jsx157(
+        /* @__PURE__ */ jsx161(
           AirbnbDatePickerWheelColumn,
           {
             id: `${baseId}-day`,
@@ -14585,7 +15297,7 @@ function AirbnbDatePickerBody({
             onOptionSelect
           }
         ),
-        /* @__PURE__ */ jsx157(
+        /* @__PURE__ */ jsx161(
           AirbnbDatePickerWheelColumn,
           {
             id: `${baseId}-year`,
@@ -14602,7 +15314,7 @@ function AirbnbDatePickerBody({
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsx157(Button, { type: "button", onClick: onDone, className: "mt-4 h-12 mb-8 w-full", children: doneLabel })
+    /* @__PURE__ */ jsx161(Button, { type: "button", onClick: onDone, className: "mt-4 h-12 mb-8 w-full", children: doneLabel })
   ] });
 }
 function AirbnbDatePickerContent({
@@ -14630,7 +15342,7 @@ function AirbnbDatePickerContent({
   onColumnKeyDown,
   onOptionSelect
 }) {
-  const body = /* @__PURE__ */ jsx157(
+  const body = /* @__PURE__ */ jsx161(
     AirbnbDatePickerBody,
     {
       baseId,
@@ -14655,27 +15367,27 @@ function AirbnbDatePickerContent({
     }
   );
   if (isMobile3) {
-    return /* @__PURE__ */ jsx157(Drawer, { open, onOpenChange, children: /* @__PURE__ */ jsxs103(
+    return /* @__PURE__ */ jsx161(Drawer, { open, onOpenChange, children: /* @__PURE__ */ jsxs106(
       DrawerContent,
       {
         onClose: () => onOpenChange(false),
         className: "rounded-none rounded-t-[32px] border-0 p-0",
         children: [
-          /* @__PURE__ */ jsx157(DrawerTitle, { className: "sr-only", children: title }),
-          /* @__PURE__ */ jsx157(DrawerDescription, { className: "sr-only", children: label }),
+          /* @__PURE__ */ jsx161(DrawerTitle, { className: "sr-only", children: title }),
+          /* @__PURE__ */ jsx161(DrawerDescription, { className: "sr-only", children: label }),
           body
         ]
       }
     ) });
   }
-  return /* @__PURE__ */ jsx157(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs103(
+  return /* @__PURE__ */ jsx161(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs106(
     DialogContent,
     {
       className: "max-w-[520px] rounded-[28px] border-0 p-0 shadow-xl",
       showCloseButton: false,
       children: [
-        /* @__PURE__ */ jsx157(DialogTitle, { className: "sr-only", children: title }),
-        /* @__PURE__ */ jsx157(DialogDescription, { className: "sr-only", children: label }),
+        /* @__PURE__ */ jsx161(DialogTitle, { className: "sr-only", children: title }),
+        /* @__PURE__ */ jsx161(DialogDescription, { className: "sr-only", children: label }),
         body
       ]
     }
@@ -14683,7 +15395,7 @@ function AirbnbDatePickerContent({
 }
 
 // src/dashboard/datepicker/Datepicker.tsx
-import { jsx as jsx158, jsxs as jsxs104 } from "react/jsx-runtime";
+import { jsx as jsx162, jsxs as jsxs107 } from "react/jsx-runtime";
 var MONTHS_IN_YEAR2 = 12;
 function getMonthLabels2(locale) {
   const formatter = new Intl.DateTimeFormat(locale, { month: "long" });
@@ -14716,7 +15428,7 @@ function dateFromParts(day, monthIndex, year) {
   if (!isValidCalendarDate(yearNum, monthIndex, dayNum)) return null;
   return new Date(yearNum, monthIndex, dayNum);
 }
-var Datepicker = React54.forwardRef(
+var Datepicker = React57.forwardRef(
   function Datepicker2({
     label,
     value,
@@ -14746,66 +15458,66 @@ var Datepicker = React54.forwardRef(
     maxDate,
     formatValue
   }, ref) {
-    const containerRef = React54.useRef(null);
-    const dayInputRef = React54.useRef(null);
-    const monthInputRef = React54.useRef(null);
-    const monthListRef = React54.useRef(null);
-    const yearInputRef = React54.useRef(null);
-    const mobileTriggerRef = React54.useRef(null);
-    const wheelBaseId = React54.useId();
-    const reactId = React54.useId();
+    const containerRef = React57.useRef(null);
+    const dayInputRef = React57.useRef(null);
+    const monthInputRef = React57.useRef(null);
+    const monthListRef = React57.useRef(null);
+    const yearInputRef = React57.useRef(null);
+    const mobileTriggerRef = React57.useRef(null);
+    const wheelBaseId = React57.useId();
+    const reactId = React57.useId();
     const baseId = name ?? `dash-datepicker-${reactId}`;
     const dayId = `${baseId}-day`;
     const monthId = `${baseId}-month`;
     const yearId = `${baseId}-year`;
     const labelId = `${baseId}-label`;
     const errorId = `${baseId}-error`;
-    const { t } = useTranslation35();
-    const resolvedMonthLabels = React54.useMemo(
+    const { t } = useTranslation37();
+    const resolvedMonthLabels = React57.useMemo(
       () => monthLabels ?? getMonthLabels2(locale),
       [locale, monthLabels]
     );
     const resolvedMonthPlaceholder = monthPlaceholder ?? t("month");
     const resolvedDoneLabel = doneLabel ?? t("done");
     const isControlled = value !== void 0;
-    const initialParts = React54.useMemo(
+    const initialParts = React57.useMemo(
       () => partsFromDate(value ?? defaultValue ?? null),
       // eslint-disable-next-line react-hooks/exhaustive-deps
       []
     );
-    const [day, setDay] = React54.useState(initialParts.day);
-    const [monthIndex, setMonthIndex] = React54.useState(
+    const [day, setDay] = React57.useState(initialParts.day);
+    const [monthIndex, setMonthIndex] = React57.useState(
       initialParts.monthIndex
     );
-    const [year, setYear] = React54.useState(initialParts.year);
-    const [isMonthOpen, setIsMonthOpen] = React54.useState(false);
-    const [isWheelOpen, setIsWheelOpen] = React54.useState(false);
-    const [focusedField, setFocusedField] = React54.useState(null);
-    const [monthInputValue, setMonthInputValue] = React54.useState("");
-    const [monthHighlightIndex, setMonthHighlightIndex] = React54.useState(-1);
+    const [year, setYear] = React57.useState(initialParts.year);
+    const [isMonthOpen, setIsMonthOpen] = React57.useState(false);
+    const [isWheelOpen, setIsWheelOpen] = React57.useState(false);
+    const [focusedField, setFocusedField] = React57.useState(null);
+    const [monthInputValue, setMonthInputValue] = React57.useState("");
+    const [monthHighlightIndex, setMonthHighlightIndex] = React57.useState(-1);
     const isMobile3 = useIsMobile();
-    React54.useImperativeHandle(ref, () => dayInputRef.current, []);
-    React54.useEffect(() => {
+    React57.useImperativeHandle(ref, () => dayInputRef.current, []);
+    React57.useEffect(() => {
       if (!isControlled) return;
       const next = partsFromDate(value ?? null);
       setDay(next.day);
       setMonthIndex(next.monthIndex);
       setYear(next.year);
     }, [isControlled, value]);
-    React54.useEffect(() => {
+    React57.useEffect(() => {
       if (focusedField === "month") return;
       setMonthInputValue(
         monthIndex !== null ? resolvedMonthLabels[monthIndex] ?? "" : ""
       );
     }, [monthIndex, resolvedMonthLabels, focusedField]);
-    const filteredMonths = React54.useMemo(() => {
+    const filteredMonths = React57.useMemo(() => {
       const all = resolvedMonthLabels.map((label2, index) => ({ label: label2, index }));
       const query = monthInputValue.trim().toLowerCase();
       const currentLabel = monthIndex !== null ? resolvedMonthLabels[monthIndex] ?? "" : "";
       if (!query || monthInputValue === currentLabel) return all;
       return all.filter((opt) => opt.label.toLowerCase().includes(query));
     }, [monthInputValue, monthIndex, resolvedMonthLabels]);
-    React54.useEffect(() => {
+    React57.useEffect(() => {
       if (!isMonthOpen) {
         setMonthHighlightIndex(-1);
         return;
@@ -14826,7 +15538,7 @@ var Datepicker = React54.forwardRef(
     const isFocused = focusedField !== null || isMonthOpen || isWheelOpen;
     const isInvalid = Boolean(invalid || error);
     const wrapperWidth = toCssSize(width);
-    const currentDate = React54.useMemo(
+    const currentDate = React57.useMemo(
       () => dateFromParts(day, monthIndex, year),
       [day, monthIndex, year]
     );
@@ -14835,7 +15547,7 @@ var Datepicker = React54.forwardRef(
       onOutsideClick: () => setIsMonthOpen(false),
       isDisabled: !isMonthOpen || isMobile3
     });
-    const emitChange = React54.useCallback(
+    const emitChange = React57.useCallback(
       (nextDay, nextMonth, nextYear) => {
         if (!onChange) return;
         const date = dateFromParts(nextDay, nextMonth, nextYear);
@@ -14870,7 +15582,7 @@ var Datepicker = React54.forwardRef(
       setIsMonthOpen(true);
       setMonthHighlightIndex(0);
     };
-    const commitMonthInput = React54.useCallback(() => {
+    const commitMonthInput = React57.useCallback(() => {
       const query = monthInputValue.trim().toLowerCase();
       if (!query) {
         if (monthIndex !== null) {
@@ -14930,15 +15642,15 @@ var Datepicker = React54.forwardRef(
         setIsMonthOpen(false);
       }
     };
-    const focusDayInput = React54.useCallback(() => {
+    const focusDayInput = React57.useCallback(() => {
       if (isBlocked || readOnly) return;
       dayInputRef.current?.focus();
     }, [isBlocked, readOnly]);
-    const openWheel = React54.useCallback(() => {
+    const openWheel = React57.useCallback(() => {
       if (isBlocked || readOnly) return;
       setIsWheelOpen(true);
     }, [isBlocked, readOnly]);
-    const closeWheel = React54.useCallback(() => {
+    const closeWheel = React57.useCallback(() => {
       setIsWheelOpen(false);
       mobileTriggerRef.current?.focus();
     }, []);
@@ -14950,7 +15662,7 @@ var Datepicker = React54.forwardRef(
       minDate,
       maxDate
     });
-    const handleWheelDone = React54.useCallback(() => {
+    const handleWheelDone = React57.useCallback(() => {
       const next = wheel.draftDate;
       setDay(String(next.getDate()));
       setMonthIndex(next.getMonth());
@@ -14959,14 +15671,14 @@ var Datepicker = React54.forwardRef(
       setIsWheelOpen(false);
       mobileTriggerRef.current?.focus();
     }, [name, onChange, wheel.draftDate]);
-    const defaultFormatValue = React54.useCallback(
+    const defaultFormatValue = React57.useCallback(
       (date) => `${date.getDate()} ${resolvedMonthLabels[date.getMonth()]} ${date.getFullYear()}`,
       [resolvedMonthLabels]
     );
     const triggerText = currentDate ? (formatValue ?? defaultFormatValue)(currentDate) : void 0;
     const monthListboxId = `${monthId}-listbox`;
     const getMonthOptionId = (index) => `${monthId}-option-${index}`;
-    const monthPanelContent = filteredMonths.length === 0 ? /* @__PURE__ */ jsx158("div", { className: "px-4 py-3 text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: t("no_options") }) : /* @__PURE__ */ jsx158(
+    const monthPanelContent = filteredMonths.length === 0 ? /* @__PURE__ */ jsx162("div", { className: "px-4 py-3 text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: t("no_options") }) : /* @__PURE__ */ jsx162(
       "ul",
       {
         ref: monthListRef,
@@ -14977,7 +15689,7 @@ var Datepicker = React54.forwardRef(
         children: filteredMonths.map((option, position) => {
           const isSelected = option.index === monthIndex;
           const isHighlighted = position === monthHighlightIndex;
-          return /* @__PURE__ */ jsx158("li", { role: "presentation", children: /* @__PURE__ */ jsx158(
+          return /* @__PURE__ */ jsx162("li", { role: "presentation", children: /* @__PURE__ */ jsx162(
             "button",
             {
               id: getMonthOptionId(option.index),
@@ -15004,7 +15716,7 @@ var Datepicker = React54.forwardRef(
       isBlocked && "cursor-not-allowed",
       loading && "cursor-progress"
     );
-    return /* @__PURE__ */ jsx158(
+    return /* @__PURE__ */ jsx162(
       "div",
       {
         ref: containerRef,
@@ -15015,9 +15727,9 @@ var Datepicker = React54.forwardRef(
           className
         ),
         style: wrapperWidth ? { width: wrapperWidth } : void 0,
-        children: /* @__PURE__ */ jsxs104("div", { className: "relative min-h-[68px] w-full", children: [
-          /* @__PURE__ */ jsxs104("div", { className: "relative w-full", children: [
-            isMobile3 ? /* @__PURE__ */ jsxs104(
+        children: /* @__PURE__ */ jsxs107("div", { className: "relative min-h-[68px] w-full", children: [
+          /* @__PURE__ */ jsxs107("div", { className: "relative w-full", children: [
+            isMobile3 ? /* @__PURE__ */ jsxs107(
               "button",
               {
                 ref: mobileTriggerRef,
@@ -15036,10 +15748,10 @@ var Datepicker = React54.forwardRef(
                   (isBlocked || readOnly) && "cursor-not-allowed"
                 ),
                 children: [
-                  /* @__PURE__ */ jsx158("span", { className: "block min-w-0 flex-1 truncate text-left", children: triggerText ?? (isWheelOpen ? mobilePlaceholder : null) }),
-                  /* @__PURE__ */ jsxs104("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: [
-                    loading && /* @__PURE__ */ jsx158(ThreeDotsLoader, { height: 18, width: 18 }),
-                    /* @__PURE__ */ jsx158(
+                  /* @__PURE__ */ jsx162("span", { className: "block min-w-0 flex-1 truncate text-left", children: triggerText ?? (isWheelOpen ? mobilePlaceholder : null) }),
+                  /* @__PURE__ */ jsxs107("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: [
+                    loading && /* @__PURE__ */ jsx162(ThreeDotsLoader, { height: 18, width: 18 }),
+                    /* @__PURE__ */ jsx162(
                       ChevronDown3,
                       {
                         size: 16,
@@ -15052,14 +15764,14 @@ var Datepicker = React54.forwardRef(
                   ] })
                 ]
               }
-            ) : /* @__PURE__ */ jsxs104(
+            ) : /* @__PURE__ */ jsxs107(
               "div",
               {
                 className: cn(
                   "relative box-border grid h-12 w-full grid-cols-[minmax(0,1fr)_minmax(96px,140px)_minmax(0,1fr)] items-center rounded-[6px] text-[16px] font-medium text-[var(--chekin-color-brand-navy)]"
                 ),
                 children: [
-                  /* @__PURE__ */ jsx158("div", { className: "flex h-full min-w-0 items-center px-2 sm:px-4", children: /* @__PURE__ */ jsx158(
+                  /* @__PURE__ */ jsx162("div", { className: "flex h-full min-w-0 items-center px-2 sm:px-4", children: /* @__PURE__ */ jsx162(
                     "input",
                     {
                       ref: dayInputRef,
@@ -15081,8 +15793,8 @@ var Datepicker = React54.forwardRef(
                       className: subInputClass
                     }
                   ) }),
-                  /* @__PURE__ */ jsxs104("div", { className: "relative flex h-full min-w-0 items-center gap-1 border-x border-[var(--chekin-color-gray-3)] px-2 sm:px-3", children: [
-                    /* @__PURE__ */ jsx158(
+                  /* @__PURE__ */ jsxs107("div", { className: "relative flex h-full min-w-0 items-center gap-1 px-2 before:absolute before:inset-y-3 before:left-0 before:w-px before:bg-[var(--chekin-color-gray-3)] before:content-[''] after:absolute after:inset-y-3 after:right-0 after:w-px after:bg-[var(--chekin-color-gray-3)] after:content-[''] sm:px-3", children: [
+                    /* @__PURE__ */ jsx162(
                       "input",
                       {
                         ref: monthInputRef,
@@ -15125,7 +15837,7 @@ var Datepicker = React54.forwardRef(
                         )
                       }
                     ),
-                    /* @__PURE__ */ jsx158(
+                    /* @__PURE__ */ jsx162(
                       ChevronDown3,
                       {
                         size: 14,
@@ -15142,8 +15854,8 @@ var Datepicker = React54.forwardRef(
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ jsxs104("div", { className: "flex h-full min-w-0 items-center px-2 sm:px-4", children: [
-                    /* @__PURE__ */ jsx158(
+                  /* @__PURE__ */ jsxs107("div", { className: "flex h-full min-w-0 items-center px-2 sm:px-4", children: [
+                    /* @__PURE__ */ jsx162(
                       "input",
                       {
                         ref: yearInputRef,
@@ -15165,7 +15877,7 @@ var Datepicker = React54.forwardRef(
                         className: subInputClass
                       }
                     ),
-                    loading && /* @__PURE__ */ jsx158(
+                    loading && /* @__PURE__ */ jsx162(
                       ThreeDotsLoader,
                       {
                         height: 18,
@@ -15177,7 +15889,7 @@ var Datepicker = React54.forwardRef(
                 ]
               }
             ),
-            showCoverage && /* @__PURE__ */ jsx158(
+            showCoverage && /* @__PURE__ */ jsx162(
               "div",
               {
                 className: "absolute inset-0 cursor-text rounded-[6px] bg-[var(--chekin-color-surface-input-empty)]",
@@ -15185,7 +15897,7 @@ var Datepicker = React54.forwardRef(
                 "aria-hidden": "true"
               }
             ),
-            /* @__PURE__ */ jsx158(
+            /* @__PURE__ */ jsx162(
               Fieldset,
               {
                 isFocused,
@@ -15203,9 +15915,9 @@ var Datepicker = React54.forwardRef(
                 onClick: isMobile3 ? openWheel : showCoverage ? focusDayInput : void 0
               }
             ),
-            isMonthOpen && !isMobile3 && /* @__PURE__ */ jsx158("div", { className: "absolute left-0 right-0 top-full z-30 mx-auto mt-1 w-full max-w-[260px] overflow-hidden rounded-md bg-white shadow-[0_30px_30px_0_rgba(33,72,255,0.2)] sm:left-1/2 sm:right-auto sm:-translate-x-1/2", children: monthPanelContent })
+            isMonthOpen && !isMobile3 && /* @__PURE__ */ jsx162("div", { className: "absolute left-0 right-0 top-full z-30 mx-auto mt-1 w-full max-w-[260px] overflow-hidden rounded-md bg-white shadow-[0_30px_30px_0_rgba(33,72,255,0.2)] sm:left-1/2 sm:right-auto sm:-translate-x-1/2", children: monthPanelContent })
           ] }),
-          isMobile3 && /* @__PURE__ */ jsx158(
+          isMobile3 && /* @__PURE__ */ jsx162(
             AirbnbDatePickerContent,
             {
               baseId: wheelBaseId,
@@ -15233,9 +15945,9 @@ var Datepicker = React54.forwardRef(
               onOptionSelect: wheel.handleOptionSelect
             }
           ),
-          !error && optional && /* @__PURE__ */ jsx158("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : t("optional") }),
-          !error && helperText && /* @__PURE__ */ jsx158("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
-          error && !hideErrorMessage && /* @__PURE__ */ jsx158(
+          !error && optional && /* @__PURE__ */ jsx162("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : t("optional") }),
+          !error && helperText && /* @__PURE__ */ jsx162("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
+          error && !hideErrorMessage && /* @__PURE__ */ jsx162(
             FieldErrorMessage,
             {
               id: errorId,
@@ -15250,8 +15962,8 @@ var Datepicker = React54.forwardRef(
 );
 
 // src/dashboard/date-range-picker/DateRangePicker.tsx
-import * as React58 from "react";
-import { useTranslation as useTranslation36 } from "react-i18next";
+import * as React61 from "react";
+import { useTranslation as useTranslation38 } from "react-i18next";
 
 // src/dashboard/date-range-picker/isDayBlocked.ts
 import { differenceInDays, isAfter, isBefore, isSameDay } from "date-fns";
@@ -15329,7 +16041,7 @@ var createDisabledMatchers = ({
 };
 
 // src/dashboard/date-range-picker/hooks/useRangeValue.ts
-import * as React55 from "react";
+import * as React58 from "react";
 var getRangeKey = (range) => `${range?.from?.getTime() ?? ""}-${range?.to?.getTime() ?? ""}`;
 function useRangeValue({
   value: externalValue,
@@ -15338,10 +16050,10 @@ function useRangeValue({
   name
 }) {
   const isControlled = externalValue !== void 0;
-  const [draft, setDraft] = React55.useState(
+  const [draft, setDraft] = React58.useState(
     isControlled ? externalValue : defaultValue
   );
-  const lastExternalKeyRef = React55.useRef(getRangeKey(externalValue));
+  const lastExternalKeyRef = React58.useRef(getRangeKey(externalValue));
   if (isControlled) {
     const externalKey = getRangeKey(externalValue);
     if (externalKey !== lastExternalKeyRef.current) {
@@ -15349,7 +16061,7 @@ function useRangeValue({
       setDraft(externalValue);
     }
   }
-  const commit = React55.useCallback(
+  const commit = React58.useCallback(
     (next) => {
       setDraft(next);
       if (next === void 0) {
@@ -15364,7 +16076,7 @@ function useRangeValue({
 }
 
 // src/dashboard/date-range-picker/hooks/useRangeTextInputs.ts
-import * as React56 from "react";
+import * as React59 from "react";
 function useRangeTextInputs({
   value,
   format: format2,
@@ -15372,13 +16084,13 @@ function useRangeTextInputs({
   onCommit,
   onBlur
 }) {
-  const [fromText, setFromText] = React56.useState(value?.from ? format2(value.from) : "");
-  const [toText, setToText] = React56.useState(value?.to ? format2(value.to) : "");
-  React56.useEffect(() => {
+  const [fromText, setFromText] = React59.useState(value?.from ? format2(value.from) : "");
+  const [toText, setToText] = React59.useState(value?.to ? format2(value.to) : "");
+  React59.useEffect(() => {
     setFromText(value?.from ? format2(value.from) : "");
     setToText(value?.to ? format2(value.to) : "");
   }, [format2, value?.from, value?.to]);
-  const handleFromBlur = React56.useCallback(() => {
+  const handleFromBlur = React59.useCallback(() => {
     if (!fromText) {
       const next = { from: void 0, to: value?.to };
       onCommit(next);
@@ -15395,7 +16107,7 @@ function useRangeTextInputs({
     setFromText(value?.from ? format2(value.from) : "");
     return void 0;
   }, [format2, fromText, onBlur, onCommit, parse3, value]);
-  const handleToBlur = React56.useCallback(() => {
+  const handleToBlur = React59.useCallback(() => {
     if (!toText) {
       const next = { from: value?.from, to: void 0 };
       onCommit(next);
@@ -15422,21 +16134,21 @@ function useRangeTextInputs({
 }
 
 // src/dashboard/date-range-picker/hooks/useRangeMonthSync.ts
-import * as React57 from "react";
+import * as React60 from "react";
 function useRangeMonthSync(value) {
-  const isPreloadedRef = React57.useRef(false);
-  const [month, setMonth] = React57.useState(value?.from ?? /* @__PURE__ */ new Date());
-  React57.useEffect(() => {
+  const isPreloadedRef = React60.useRef(false);
+  const [month, setMonth] = React60.useState(value?.from ?? /* @__PURE__ */ new Date());
+  React60.useEffect(() => {
     if (value?.from && !isPreloadedRef.current) {
       setMonth(value.from);
       isPreloadedRef.current = true;
     }
   }, [value?.from]);
-  const syncMonthToValue = React57.useCallback((next) => {
+  const syncMonthToValue = React60.useCallback((next) => {
     isPreloadedRef.current = true;
     if (next?.from) setMonth(next.from);
   }, []);
-  const resetPreload = React57.useCallback(() => {
+  const resetPreload = React60.useCallback(() => {
     isPreloadedRef.current = false;
   }, []);
   return { month, setMonth, syncMonthToValue, resetPreload };
@@ -15462,7 +16174,7 @@ function resolveRangeSelection({
 
 // src/dashboard/date-range-picker/components/DateRangeInputs.tsx
 import { CalendarDays, SquareX as SquareX4 } from "lucide-react";
-import { jsx as jsx159, jsxs as jsxs105 } from "react/jsx-runtime";
+import { jsx as jsx163, jsxs as jsxs108 } 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)]";
 var iconButtonClass = "flex h-5 w-5 items-center justify-center rounded-[3px] border-0 bg-transparent p-0 text-[#9696b9] outline-none hover:shadow-[0_3px_3px_#0f477734] disabled:cursor-not-allowed";
@@ -15504,7 +16216,7 @@ function DateRangeInputs({
     isBlocked && "cursor-not-allowed",
     loading && "cursor-progress"
   );
-  return /* @__PURE__ */ jsxs105(
+  return /* @__PURE__ */ jsxs108(
     "div",
     {
       className: cn(
@@ -15513,7 +16225,7 @@ function DateRangeInputs({
       ),
       onClick: onRowClick,
       children: [
-        /* @__PURE__ */ jsx159(
+        /* @__PURE__ */ jsx163(
           "input",
           {
             ref: fromInputRef,
@@ -15537,7 +16249,7 @@ function DateRangeInputs({
             )
           }
         ),
-        /* @__PURE__ */ jsx159(
+        /* @__PURE__ */ jsx163(
           "span",
           {
             "aria-hidden": "true",
@@ -15548,7 +16260,7 @@ function DateRangeInputs({
             children: "\u2192"
           }
         ),
-        /* @__PURE__ */ jsx159(
+        /* @__PURE__ */ jsx163(
           "input",
           {
             ref: toInputRef,
@@ -15572,9 +16284,9 @@ function DateRangeInputs({
             )
           }
         ),
-        /* @__PURE__ */ jsxs105("span", { className: "ml-auto flex shrink-0 items-center gap-2 pl-2 text-[var(--chekin-color-gray-2)]", children: [
-          loading && /* @__PURE__ */ jsx159(ThreeDotsLoader, { height: 18, width: 18 }),
-          !readOnly && !hideClearDates && !isEmpty && /* @__PURE__ */ jsx159(
+        /* @__PURE__ */ jsxs108("span", { className: "ml-auto flex shrink-0 items-center gap-2 pl-2 text-[var(--chekin-color-gray-2)]", children: [
+          loading && /* @__PURE__ */ jsx163(ThreeDotsLoader, { height: 18, width: 18 }),
+          !readOnly && !hideClearDates && !isEmpty && /* @__PURE__ */ jsx163(
             "button",
             {
               type: "button",
@@ -15582,10 +16294,10 @@ function DateRangeInputs({
               onClick: onReset,
               className: iconButtonClass,
               "aria-label": clearLabel,
-              children: /* @__PURE__ */ jsx159(SquareX4, { size: 16, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
+              children: /* @__PURE__ */ jsx163(SquareX4, { size: 16, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
             }
           ),
-          !readOnly && !hideCalendarIcon && /* @__PURE__ */ jsx159(
+          !readOnly && !hideCalendarIcon && /* @__PURE__ */ jsx163(
             "button",
             {
               type: "button",
@@ -15597,7 +16309,7 @@ function DateRangeInputs({
                 focusedInput !== null || isOpen ? "text-[var(--chekin-color-brand-blue)]" : "text-[var(--chekin-color-gray-2)]"
               ),
               "aria-label": openCalendarLabel,
-              children: /* @__PURE__ */ jsx159(CalendarDays, { size: 18 })
+              children: /* @__PURE__ */ jsx163(CalendarDays, { size: 18 })
             }
           )
         ] })
@@ -15607,7 +16319,7 @@ function DateRangeInputs({
 }
 
 // src/dashboard/date-range-picker/components/DateRangeCalendar.tsx
-import { jsx as jsx160 } from "react/jsx-runtime";
+import { jsx as jsx164 } from "react/jsx-runtime";
 function DateRangeCalendar({
   value,
   month,
@@ -15623,7 +16335,7 @@ function DateRangeCalendar({
   components,
   ...dayPickerProps
 }) {
-  return /* @__PURE__ */ jsx160(
+  return /* @__PURE__ */ jsx164(
     Calendar,
     {
       mode: "range",
@@ -15646,7 +16358,7 @@ function DateRangeCalendar({
 }
 
 // src/dashboard/date-range-picker/components/DateRangePopover.tsx
-import { jsx as jsx161, jsxs as jsxs106 } from "react/jsx-runtime";
+import { jsx as jsx165, jsxs as jsxs109 } from "react/jsx-runtime";
 function DateRangePopover({
   isOpen,
   isMobile: isMobile3,
@@ -15658,30 +16370,30 @@ function DateRangePopover({
 }) {
   if (!isOpen) return null;
   if (isMobile3) {
-    return /* @__PURE__ */ jsx161(
+    return /* @__PURE__ */ jsx165(
       Drawer,
       {
         open: isOpen,
         onOpenChange: (next) => {
           if (!next) onClose();
         },
-        children: /* @__PURE__ */ jsxs106(
+        children: /* @__PURE__ */ jsxs109(
           DrawerContent,
           {
             onClose,
             lockScroll: false,
             className: "max-h-[calc(100vh-1rem)]",
             children: [
-              /* @__PURE__ */ jsx161(DrawerTitle, { className: "sr-only", children: drawerTitle }),
-              /* @__PURE__ */ jsx161(DrawerDescription, { className: "sr-only", children: drawerDescription }),
-              /* @__PURE__ */ jsx161("div", { className: "flex items-start justify-center overflow-x-auto px-2 pb-4 pt-1", children })
+              /* @__PURE__ */ jsx165(DrawerTitle, { className: "sr-only", children: drawerTitle }),
+              /* @__PURE__ */ jsx165(DrawerDescription, { className: "sr-only", children: drawerDescription }),
+              /* @__PURE__ */ jsx165("div", { className: "flex items-start justify-center overflow-x-auto px-2 pb-4 pt-1", children })
             ]
           }
         )
       }
     );
   }
-  return /* @__PURE__ */ jsx161(
+  return /* @__PURE__ */ jsx165(
     "div",
     {
       className: cn(
@@ -15694,8 +16406,8 @@ function DateRangePopover({
 }
 
 // src/dashboard/date-range-picker/DateRangePicker.tsx
-import { jsx as jsx162, jsxs as jsxs107 } from "react/jsx-runtime";
-var DateRangePicker = React58.forwardRef(function DateRangePicker2({
+import { jsx as jsx166, jsxs as jsxs110 } from "react/jsx-runtime";
+var DateRangePicker = React61.forwardRef(function DateRangePicker2({
   label,
   value: externalValue,
   defaultValue,
@@ -15729,20 +16441,20 @@ var DateRangePicker = React58.forwardRef(function DateRangePicker2({
   components: customComponents,
   ...dayPickerProps
 }, ref) {
-  const containerRef = React58.useRef(null);
-  const fromInputRef = React58.useRef(null);
-  const toInputRef = React58.useRef(null);
-  const reactId = React58.useId();
+  const containerRef = React61.useRef(null);
+  const fromInputRef = React61.useRef(null);
+  const toInputRef = React61.useRef(null);
+  const reactId = React61.useId();
   const baseId = name ?? `dash-daterange-${reactId}`;
   const fromId = `${baseId}-from`;
   const toId = `${baseId}-to`;
   const labelId = `${baseId}-label`;
   const errorId = `${baseId}-error`;
-  const normalizedValue = React58.useMemo(() => {
+  const normalizedValue = React61.useMemo(() => {
     if (externalValue === void 0) return void 0;
     return { from: toDate(externalValue?.from), to: toDate(externalValue?.to) };
   }, [externalValue]);
-  const normalizedDefaultValue = React58.useMemo(() => {
+  const normalizedDefaultValue = React61.useMemo(() => {
     if (defaultValue === void 0) return void 0;
     return { from: toDate(defaultValue?.from), to: toDate(defaultValue?.to) };
   }, [defaultValue]);
@@ -15752,10 +16464,10 @@ var DateRangePicker = React58.forwardRef(function DateRangePicker2({
     onChange,
     name
   });
-  const normalizedMinDate = React58.useMemo(() => toDate(minDate), [minDate]);
-  const normalizedMaxDate = React58.useMemo(() => toDate(maxDate), [maxDate]);
-  const formatter = React58.useMemo(() => formatDate(displayFormat), [displayFormat]);
-  const parser = React58.useMemo(() => parseDate(displayFormat), [displayFormat]);
+  const normalizedMinDate = React61.useMemo(() => toDate(minDate), [minDate]);
+  const normalizedMaxDate = React61.useMemo(() => toDate(maxDate), [maxDate]);
+  const formatter = React61.useMemo(() => formatDate(displayFormat), [displayFormat]);
+  const parser = React61.useMemo(() => parseDate(displayFormat), [displayFormat]);
   const { fromText, toText, setFromText, setToText, handleFromBlur, handleToBlur } = useRangeTextInputs({
     value,
     format: formatter,
@@ -15764,11 +16476,11 @@ var DateRangePicker = React58.forwardRef(function DateRangePicker2({
     onBlur
   });
   const { month, setMonth, syncMonthToValue } = useRangeMonthSync(value);
-  const [isOpen, setIsOpen] = React58.useState(false);
-  const [focusedInput, setFocusedInput] = React58.useState(null);
-  const [autoFocus, setAutoFocus] = React58.useState(false);
+  const [isOpen, setIsOpen] = React61.useState(false);
+  const [focusedInput, setFocusedInput] = React61.useState(null);
+  const [autoFocus, setAutoFocus] = React61.useState(false);
   const isMobile3 = useIsMobile();
-  const { t } = useTranslation36();
+  const { t } = useTranslation38();
   const drawerTitle = label ?? t("select_dates");
   const drawerDescription = label ?? t("pick_date_range");
   const isEmpty = !value?.from && !value?.to;
@@ -15777,13 +16489,13 @@ var DateRangePicker = React58.forwardRef(function DateRangePicker2({
   const isFocused = focusedInput !== null || isOpen;
   const wrapperWidth = toCssSize(width);
   const monthsToShow = numberOfMonths ?? (isMobile3 ? 1 : 2);
-  const closeCalendar = React58.useCallback(() => {
+  const closeCalendar = React61.useCallback(() => {
     setIsOpen(false);
     setFocusedInput(null);
     setAutoFocus(false);
     if (value?.from) setMonth(value.from);
   }, [setMonth, value?.from]);
-  const openCalendar = React58.useCallback(() => {
+  const openCalendar = React61.useCallback(() => {
     if (isBlocked || readOnly) return;
     setIsOpen(true);
   }, [isBlocked, readOnly]);
@@ -15792,7 +16504,7 @@ var DateRangePicker = React58.forwardRef(function DateRangePicker2({
     onOutsideClick: closeCalendar,
     isDisabled: !isOpen || isMobile3
   });
-  const handlePickerChange = React58.useCallback(
+  const handlePickerChange = React61.useCallback(
     (range, pickedDate) => {
       const { next, shouldClose } = resolveRangeSelection({
         previous: value,
@@ -15813,7 +16525,7 @@ var DateRangePicker = React58.forwardRef(function DateRangePicker2({
     setToText("");
     setMonth(/* @__PURE__ */ new Date());
   };
-  const disabledMatchers = React58.useMemo(
+  const disabledMatchers = React61.useMemo(
     () => createDisabledMatchers({
       minDate: normalizedMinDate,
       maxDate: normalizedMaxDate,
@@ -15832,7 +16544,7 @@ var DateRangePicker = React58.forwardRef(function DateRangePicker2({
     openCalendar();
     if (autoFocusOnOpen) setAutoFocus(true);
   };
-  React58.useImperativeHandle(
+  React61.useImperativeHandle(
     ref,
     () => ({
       setDateRange: (range) => {
@@ -15855,7 +16567,7 @@ var DateRangePicker = React58.forwardRef(function DateRangePicker2({
       syncMonthToValue
     ]
   );
-  return /* @__PURE__ */ jsx162(
+  return /* @__PURE__ */ jsx166(
     "div",
     {
       ref: containerRef,
@@ -15866,9 +16578,9 @@ var DateRangePicker = React58.forwardRef(function DateRangePicker2({
         className
       ),
       style: wrapperWidth ? { width: wrapperWidth } : void 0,
-      children: /* @__PURE__ */ jsxs107("div", { className: "relative min-h-[68px] w-full", children: [
-        /* @__PURE__ */ jsxs107("div", { className: "relative w-full", children: [
-          /* @__PURE__ */ jsx162(
+      children: /* @__PURE__ */ jsxs110("div", { className: "relative min-h-[68px] w-full", children: [
+        /* @__PURE__ */ jsxs110("div", { className: "relative w-full", children: [
+          /* @__PURE__ */ jsx166(
             DateRangeInputs,
             {
               fromId,
@@ -15919,7 +16631,7 @@ var DateRangePicker = React58.forwardRef(function DateRangePicker2({
               onToggleCalendar: toggleCalendar
             }
           ),
-          /* @__PURE__ */ jsx162(
+          /* @__PURE__ */ jsx166(
             Fieldset,
             {
               isFocused,
@@ -15936,7 +16648,7 @@ var DateRangePicker = React58.forwardRef(function DateRangePicker2({
               tooltip
             }
           ),
-          /* @__PURE__ */ jsx162(
+          /* @__PURE__ */ jsx166(
             DateRangePopover,
             {
               isOpen: isOpen && !isMobile3,
@@ -15945,7 +16657,7 @@ var DateRangePicker = React58.forwardRef(function DateRangePicker2({
               drawerTitle,
               drawerDescription,
               onClose: closeCalendar,
-              children: /* @__PURE__ */ jsx162(
+              children: /* @__PURE__ */ jsx166(
                 DateRangeCalendar,
                 {
                   value,
@@ -15966,7 +16678,7 @@ var DateRangePicker = React58.forwardRef(function DateRangePicker2({
             }
           )
         ] }),
-        /* @__PURE__ */ jsx162(
+        /* @__PURE__ */ jsx166(
           DateRangePopover,
           {
             isOpen: isOpen && isMobile3,
@@ -15975,7 +16687,7 @@ var DateRangePicker = React58.forwardRef(function DateRangePicker2({
             drawerTitle,
             drawerDescription,
             onClose: closeCalendar,
-            children: /* @__PURE__ */ jsx162(
+            children: /* @__PURE__ */ jsx166(
               DateRangeCalendar,
               {
                 value,
@@ -15995,9 +16707,9 @@ var DateRangePicker = React58.forwardRef(function DateRangePicker2({
             )
           }
         ),
-        !error && optional && /* @__PURE__ */ jsx162("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : t("optional") }),
-        !error && helperText && /* @__PURE__ */ jsx162("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
-        error && !hideErrorMessage && /* @__PURE__ */ jsx162(
+        !error && optional && /* @__PURE__ */ jsx166("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : t("optional") }),
+        !error && helperText && /* @__PURE__ */ jsx166("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
+        error && !hideErrorMessage && /* @__PURE__ */ jsx166(
           FieldErrorMessage,
           {
             id: errorId,
@@ -16011,8 +16723,8 @@ var DateRangePicker = React58.forwardRef(function DateRangePicker2({
 });
 
 // src/dashboard/date-range-picker/useValidateDates.ts
-import * as React59 from "react";
-import { useTranslation as useTranslation37 } from "react-i18next";
+import * as React62 from "react";
+import { useTranslation as useTranslation39 } from "react-i18next";
 import { differenceInDays as differenceInDays2, isAfter as isAfter2, isBefore as isBefore3 } from "date-fns";
 import {
   dateMatchModifiers,
@@ -16034,14 +16746,14 @@ function useValidateDates({
   onSuccess,
   displayFormat
 }) {
-  const { t } = useTranslation37();
+  const { t } = useTranslation39();
   const handleError = useEvent(onError);
   const handleSuccess = useEvent(onSuccess);
-  const errorFormatter = React59.useMemo(
+  const errorFormatter = React62.useMemo(
     () => formatDate(displayFormat ?? DEFAULT_DISPLAY_FORMAT),
     [displayFormat]
   );
-  const validateDates = React59.useCallback(
+  const validateDates = React62.useCallback(
     (dates) => {
       const startDate = dates?.from;
       const endDate = dates?.to;
@@ -16091,9 +16803,9 @@ function useValidateDates({
 }
 
 // src/dashboard/time-picker/TimePicker.tsx
-import * as React60 from "react";
+import * as React63 from "react";
 import { addDays, addHours, addMinutes, format, parse as parse2 } from "date-fns";
-import { jsx as jsx163 } from "react/jsx-runtime";
+import { jsx as jsx167 } from "react/jsx-runtime";
 var SHORT_TIME_FORMAT = "HH:mm";
 function parseTime(value) {
   return parse2(value, SHORT_TIME_FORMAT, /* @__PURE__ */ new Date());
@@ -16135,195 +16847,191 @@ var FORMAT_SETTINGS = {
   },
   hours: { intervalUnit: "H", interval: 1, minTime: "00:00", maxTime: "23:00" }
 };
-var TimePicker = React60.forwardRef(
-  function TimePicker2({ format: formatName = "time", timeSettings, options, ...selectProps }, ref) {
-    const resolvedOptions = React60.useMemo(() => {
-      if (options) return options;
-      const settings = timeSettings ?? FORMAT_SETTINGS[formatName];
-      return buildOptions(settings);
-    }, [formatName, options, timeSettings]);
-    return /* @__PURE__ */ jsx163(Select, { ref, ...selectProps, options: resolvedOptions });
-  }
-);
+var TimePicker = React63.forwardRef(function TimePicker2({ format: formatName = "time", timeSettings, options, ...selectProps }, ref) {
+  const resolvedOptions = React63.useMemo(() => {
+    if (options) return options;
+    const settings = timeSettings ?? FORMAT_SETTINGS[formatName];
+    return buildOptions(settings);
+  }, [formatName, options, timeSettings]);
+  return /* @__PURE__ */ jsx167(Select, { ref, ...selectProps, options: resolvedOptions });
+});
 
 // src/dashboard/file-input/FileInput.tsx
-import * as React61 from "react";
+import * as React64 from "react";
 import { Download, Paperclip, SquareX as SquareX5 } from "lucide-react";
-import { useTranslation as useTranslation38 } from "react-i18next";
-import { jsx as jsx164, jsxs as jsxs108 } from "react/jsx-runtime";
+import { useTranslation as useTranslation40 } from "react-i18next";
+import { jsx as jsx168, jsxs as jsxs111 } from "react/jsx-runtime";
 function defaultDownload(url) {
   window.open(url, "_blank", "noopener,noreferrer");
 }
-var FileInput = React61.forwardRef(
-  function FileInput2({
-    label,
-    value,
-    onChange,
-    onDownload = defaultDownload,
-    name = "file",
-    placeholder,
-    accept,
-    multiple,
-    disabled,
-    readOnly,
-    loading,
-    invalid,
-    error,
-    optional,
-    tooltip,
-    helperText,
-    hideErrorMessage,
-    className,
-    width,
-    downloadLabel
-  }, ref) {
-    const internalRef = React61.useRef(null);
-    const inputRef = useCombinedRef(ref, internalRef);
-    const { t } = useTranslation38();
-    const resolvedLabel = label ?? t("upload_file");
-    const resolvedDownloadLabel = downloadLabel ?? t("download_attachment");
-    const reactId = React61.useId();
-    const inputId = `${name || "dash-file"}-${reactId}`;
-    const labelId = `${inputId}-label`;
-    const errorId = `${inputId}-error`;
-    const isBlocked = Boolean(disabled) || Boolean(loading);
-    const isInvalid = Boolean(invalid || error);
-    const isEmpty = !value;
-    const wrapperWidth = toCssSize(width);
-    const isUrl = typeof value === "string" && value.length > 0;
-    const isFile = typeof File !== "undefined" && value instanceof File;
-    const hasFileChip = isUrl || isFile;
-    const handleFileChange = (event) => {
-      const file = event.target.files?.[0] ?? null;
-      onChange?.(file, event);
-    };
-    const handleClear = (event) => {
-      event.preventDefault();
-      event.stopPropagation();
-      if (internalRef.current) internalRef.current.value = "";
-      onChange?.(null);
-    };
-    const handleDownload = (event) => {
-      event.preventDefault();
-      event.stopPropagation();
-      if (isUrl) onDownload(value);
-    };
-    return /* @__PURE__ */ jsxs108(
-      "label",
-      {
-        htmlFor: inputId,
-        className: cn(
-          "relative block w-full max-w-[var(--field-max-width,296px)] cursor-pointer text-left",
-          (disabled || readOnly) && "cursor-not-allowed",
-          loading && "cursor-progress",
-          disabled && "opacity-50",
-          className
+var FileInput = React64.forwardRef(function FileInput2({
+  label,
+  value,
+  onChange,
+  onDownload = defaultDownload,
+  name = "file",
+  placeholder,
+  accept,
+  multiple,
+  disabled,
+  readOnly,
+  loading,
+  invalid,
+  error,
+  optional,
+  tooltip,
+  helperText,
+  hideErrorMessage,
+  className,
+  width,
+  downloadLabel
+}, ref) {
+  const internalRef = React64.useRef(null);
+  const inputRef = useCombinedRef(ref, internalRef);
+  const { t } = useTranslation40();
+  const resolvedLabel = label ?? t("upload_file");
+  const resolvedDownloadLabel = downloadLabel ?? t("download_attachment");
+  const reactId = React64.useId();
+  const inputId = `${name || "dash-file"}-${reactId}`;
+  const labelId = `${inputId}-label`;
+  const errorId = `${inputId}-error`;
+  const isBlocked = Boolean(disabled) || Boolean(loading);
+  const isInvalid = Boolean(invalid || error);
+  const isEmpty = !value;
+  const wrapperWidth = toCssSize(width);
+  const isUrl = typeof value === "string" && value.length > 0;
+  const isFile = typeof File !== "undefined" && value instanceof File;
+  const hasFileChip = isUrl || isFile;
+  const handleFileChange = (event) => {
+    const file = event.target.files?.[0] ?? null;
+    onChange?.(file, event);
+  };
+  const handleClear = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (internalRef.current) internalRef.current.value = "";
+    onChange?.(null);
+  };
+  const handleDownload = (event) => {
+    event.preventDefault();
+    event.stopPropagation();
+    if (isUrl) onDownload(value);
+  };
+  return /* @__PURE__ */ jsxs111(
+    "label",
+    {
+      htmlFor: inputId,
+      className: cn(
+        "relative block w-full max-w-[var(--field-max-width,296px)] cursor-pointer text-left",
+        (disabled || readOnly) && "cursor-not-allowed",
+        loading && "cursor-progress",
+        disabled && "opacity-50",
+        className
+      ),
+      style: wrapperWidth ? { width: wrapperWidth } : void 0,
+      children: [
+        /* @__PURE__ */ jsx168(
+          "input",
+          {
+            ref: inputRef,
+            id: inputId,
+            name,
+            type: "file",
+            accept,
+            multiple,
+            disabled: isBlocked || readOnly,
+            onChange: handleFileChange,
+            className: "absolute h-[0.1px] w-[0.1px] opacity-0",
+            "aria-labelledby": labelId,
+            "aria-invalid": isInvalid
+          }
         ),
-        style: wrapperWidth ? { width: wrapperWidth } : void 0,
-        children: [
-          /* @__PURE__ */ jsx164(
-            "input",
-            {
-              ref: inputRef,
-              id: inputId,
-              name,
-              type: "file",
-              accept,
-              multiple,
-              disabled: isBlocked || readOnly,
-              onChange: handleFileChange,
-              className: "absolute h-[0.1px] w-[0.1px] opacity-0",
-              "aria-labelledby": labelId,
-              "aria-invalid": isInvalid
-            }
-          ),
-          /* @__PURE__ */ jsxs108("div", { className: "relative min-h-[68px] w-full", children: [
-            /* @__PURE__ */ jsxs108("div", { className: "relative w-full", children: [
-              /* @__PURE__ */ jsxs108(
-                "div",
-                {
-                  className: cn(
-                    "relative box-border flex h-12 w-full items-center justify-between gap-2 rounded-[6px] px-4 text-[16px] font-medium text-[var(--chekin-color-brand-navy)]",
-                    isEmpty && "bg-[var(--chekin-color-surface-input-empty)]"
-                  ),
-                  children: [
-                    hasFileChip ? /* @__PURE__ */ jsxs108(
-                      "div",
-                      {
-                        className: "inline-flex h-6 max-w-[85%] items-center rounded-[4px] border border-[#acacd5] bg-[#f0f0f8] pl-[10px] pr-1",
-                        onClick: (event) => event.preventDefault(),
-                        children: [
-                          isUrl ? /* @__PURE__ */ jsxs108(
-                            "button",
-                            {
-                              type: "button",
-                              onClick: handleDownload,
-                              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__ */ jsx164("span", { className: "truncate", children: resolvedDownloadLabel }),
-                                /* @__PURE__ */ jsx164(Download, { size: 15 })
-                              ]
-                            }
-                          ) : /* @__PURE__ */ jsx164("span", { className: "truncate text-[14px] font-medium text-[var(--chekin-color-brand-navy)]", children: value.name }),
-                          /* @__PURE__ */ jsx164(
-                            "button",
-                            {
-                              type: "button",
-                              disabled: isBlocked || readOnly,
-                              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__ */ jsx164(SquareX5, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
-                            }
-                          )
-                        ]
-                      }
-                    ) : /* @__PURE__ */ jsx164("span", { className: "block min-w-0 flex-1 truncate text-left text-[var(--chekin-color-gray-1)]", children: placeholder ?? "" }),
-                    /* @__PURE__ */ jsxs108("span", { className: "ml-auto flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: [
-                      loading && /* @__PURE__ */ jsx164(ThreeDotsLoader, { height: 18, width: 18 }),
-                      /* @__PURE__ */ jsx164(Paperclip, { size: 20 })
-                    ] })
-                  ]
-                }
-              ),
-              /* @__PURE__ */ jsx164(
-                Fieldset,
-                {
-                  isFocused: false,
-                  invalid: isInvalid,
-                  isEmpty,
-                  isActivated: !isEmpty,
-                  disabled,
-                  loading,
-                  readOnly,
-                  htmlFor: inputId,
-                  labelId,
-                  legend: resolvedLabel,
-                  label: resolvedLabel,
-                  tooltip
-                }
-              )
-            ] }),
-            !error && optional && /* @__PURE__ */ jsx164("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : t("optional") }),
-            !error && helperText && /* @__PURE__ */ jsx164("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
-            error && !hideErrorMessage && /* @__PURE__ */ jsx164(
-              FieldErrorMessage,
+        /* @__PURE__ */ jsxs111("div", { className: "relative min-h-[68px] w-full", children: [
+          /* @__PURE__ */ jsxs111("div", { className: "relative w-full", children: [
+            /* @__PURE__ */ jsxs111(
+              "div",
+              {
+                className: cn(
+                  "relative box-border flex h-12 w-full items-center justify-between gap-2 rounded-[6px] px-4 text-[16px] font-medium text-[var(--chekin-color-brand-navy)]",
+                  isEmpty && "bg-[var(--chekin-color-surface-input-empty)]"
+                ),
+                children: [
+                  hasFileChip ? /* @__PURE__ */ jsxs111(
+                    "div",
+                    {
+                      className: "inline-flex h-6 max-w-[85%] items-center rounded-[4px] border border-[#acacd5] bg-[#f0f0f8] pl-[10px] pr-1",
+                      onClick: (event) => event.preventDefault(),
+                      children: [
+                        isUrl ? /* @__PURE__ */ jsxs111(
+                          "button",
+                          {
+                            type: "button",
+                            onClick: handleDownload,
+                            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__ */ jsx168("span", { className: "truncate", children: resolvedDownloadLabel }),
+                              /* @__PURE__ */ jsx168(Download, { size: 15 })
+                            ]
+                          }
+                        ) : /* @__PURE__ */ jsx168("span", { className: "truncate text-[14px] font-medium text-[var(--chekin-color-brand-navy)]", children: value.name }),
+                        /* @__PURE__ */ jsx168(
+                          "button",
+                          {
+                            type: "button",
+                            disabled: isBlocked || readOnly,
+                            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__ */ jsx168(SquareX5, { size: 15, fill: "#9696b9", color: "#f8f8f8", strokeWidth: 1.8 })
+                          }
+                        )
+                      ]
+                    }
+                  ) : /* @__PURE__ */ jsx168("span", { className: "block min-w-0 flex-1 truncate text-left text-[var(--chekin-color-gray-1)]", children: placeholder ?? "" }),
+                  /* @__PURE__ */ jsxs111("span", { className: "ml-auto flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: [
+                    loading && /* @__PURE__ */ jsx168(ThreeDotsLoader, { height: 18, width: 18 }),
+                    /* @__PURE__ */ jsx168(Paperclip, { size: 20 })
+                  ] })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx168(
+              Fieldset,
               {
-                id: errorId,
-                message: error,
-                className: "mt-[1px] text-[14px]"
+                isFocused: false,
+                invalid: isInvalid,
+                isEmpty,
+                isActivated: !isEmpty,
+                disabled,
+                loading,
+                readOnly,
+                htmlFor: inputId,
+                labelId,
+                legend: resolvedLabel,
+                label: resolvedLabel,
+                tooltip
               }
             )
-          ] })
-        ]
-      }
-    );
-  }
-);
+          ] }),
+          !error && optional && /* @__PURE__ */ jsx168("span", { className: "mt-[1px] block text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: typeof optional === "string" ? optional : t("optional") }),
+          !error && helperText && /* @__PURE__ */ jsx168("span", { className: "mt-[1px] block text-[12px] font-normal text-[var(--chekin-color-gray-1)]", children: helperText }),
+          error && !hideErrorMessage && /* @__PURE__ */ jsx168(
+            FieldErrorMessage,
+            {
+              id: errorId,
+              message: error,
+              className: "mt-[1px] text-[14px]"
+            }
+          )
+        ] })
+      ]
+    }
+  );
+});
 
 // src/dashboard/select-icons-box/SelectIconsBox.tsx
-import * as React62 from "react";
-import { jsx as jsx165, jsxs as jsxs109 } from "react/jsx-runtime";
+import * as React65 from "react";
+import { jsx as jsx169, jsxs as jsxs112 } from "react/jsx-runtime";
 function SelectIconsBox({
   children,
   icons,
@@ -16338,9 +17046,9 @@ function SelectIconsBox({
   className,
   boxClassName
 }) {
-  const containerRef = React62.useRef(null);
+  const containerRef = React65.useRef(null);
   const isControlled = controlledOpen !== void 0;
-  const [internalOpen, setInternalOpen] = React62.useState(defaultOpen);
+  const [internalOpen, setInternalOpen] = React65.useState(defaultOpen);
   const isOpen = isControlled ? controlledOpen : internalOpen;
   const setOpen = (next) => {
     if (!isControlled) setInternalOpen(next);
@@ -16359,7 +17067,7 @@ function SelectIconsBox({
     onSelect(iconName);
     setOpen(false);
   };
-  return /* @__PURE__ */ jsxs109(
+  return /* @__PURE__ */ jsxs112(
     "div",
     {
       ref: containerRef,
@@ -16367,7 +17075,7 @@ function SelectIconsBox({
       className: cn("relative inline-block", className),
       children: [
         children,
-        isOpen && /* @__PURE__ */ jsx165(
+        isOpen && /* @__PURE__ */ jsx169(
           "div",
           {
             className: cn(
@@ -16378,7 +17086,7 @@ function SelectIconsBox({
               boxClassName
             ),
             style: { gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))` },
-            children: icons.map((iconName) => /* @__PURE__ */ jsx165(
+            children: icons.map((iconName) => /* @__PURE__ */ jsx169(
               "button",
               {
                 type: "button",
@@ -16459,14 +17167,14 @@ function getErrorMessage(error) {
 
 // src/lib/toastResponseError.tsx
 import i18next from "i18next";
-import { jsx as jsx166, jsxs as jsxs110 } from "react/jsx-runtime";
+import { jsx as jsx170, jsxs as jsxs113 } from "react/jsx-runtime";
 function addSupportEmailToMessage(message, prefixText) {
   if (typeof message !== "string") {
     return message;
   }
   const builtMessage = `${prefixText ? `${prefixText} ` : ""}${message}`;
-  return /* @__PURE__ */ jsxs110("div", { children: [
-    /* @__PURE__ */ jsx166("div", { children: builtMessage }),
+  return /* @__PURE__ */ jsxs113("div", { children: [
+    /* @__PURE__ */ jsx170("div", { children: builtMessage }),
     i18next.t("reach_us_at_email")
   ] });
 }
@@ -16481,13 +17189,13 @@ function toastResponseError(error, options = {}) {
 }
 
 // src/legacy-fields/textarea/Textarea.tsx
-import { forwardRef as forwardRef68, useId as useId15 } from "react";
-import { jsx as jsx167, jsxs as jsxs111 } from "react/jsx-runtime";
-var LegacyTextarea = forwardRef68(
+import { forwardRef as forwardRef71, useId as useId15 } from "react";
+import { jsx as jsx171, jsxs as jsxs114 } from "react/jsx-runtime";
+var LegacyTextarea = forwardRef71(
   ({ className, textareaClassName, label, disabled, name, invalid, ...textareaProps }, ref) => {
     const inputId = useId15();
-    return /* @__PURE__ */ jsxs111("div", { className: cn("relative", className), children: [
-      /* @__PURE__ */ jsx167(
+    return /* @__PURE__ */ jsxs114("div", { className: cn("relative", className), children: [
+      /* @__PURE__ */ jsx171(
         "textarea",
         {
           ref,
@@ -16503,7 +17211,7 @@ var LegacyTextarea = forwardRef68(
           ...textareaProps
         }
       ),
-      label && /* @__PURE__ */ jsx167(
+      label && /* @__PURE__ */ jsx171(
         "label",
         {
           htmlFor: inputId,
@@ -16521,15 +17229,15 @@ var LegacyTextarea = forwardRef68(
 LegacyTextarea.displayName = "LegacyTextarea";
 
 // src/airbnb-fields/datepicker/DatePicker.tsx
-import * as React64 from "react";
+import * as React67 from "react";
 import { Calendar as Calendar2 } from "lucide-react";
 
 // src/airbnb-fields/field-trigger/FieldTrigger.tsx
-import * as React63 from "react";
+import * as React66 from "react";
 import { Loader2 as Loader24 } from "lucide-react";
-import { useTranslation as useTranslation39 } from "react-i18next";
-import { Fragment as Fragment17, jsx as jsx168, jsxs as jsxs112 } from "react/jsx-runtime";
-var AirbnbFieldTrigger = React63.forwardRef(
+import { useTranslation as useTranslation41 } from "react-i18next";
+import { Fragment as Fragment17, jsx as jsx172, jsxs as jsxs115 } from "react/jsx-runtime";
+var AirbnbFieldTrigger = React66.forwardRef(
   ({
     as = "button",
     variant = "airbnb",
@@ -16560,20 +17268,20 @@ var AirbnbFieldTrigger = React63.forwardRef(
     onKeyDown,
     ...props
   }, ref) => {
-    const { t } = useTranslation39();
+    const { t } = useTranslation41();
     const hasValue = Boolean(valueText);
     const isRaised = hasValue || forceFloatingLabel;
     const optionalLabel = optional ? typeof optional === "string" ? optional : t("optional") : void 0;
     const visibleLabelText = labelText ?? label;
     const hasLabelMeta = Boolean(optionalLabel) || Boolean(tooltip);
-    const resolvedLabelText = visibleLabelText && hasLabelMeta ? /* @__PURE__ */ jsxs112("span", { className: "inline-flex max-w-full items-center gap-1.5 align-middle", children: [
-      /* @__PURE__ */ jsx168("span", { className: "min-w-0 truncate", children: visibleLabelText }),
-      optionalLabel && /* @__PURE__ */ jsxs112("span", { className: "shrink-0 text-[12px] relative top-[1px] font-normal leading-4 text-current opacity-70", children: [
+    const resolvedLabelText = visibleLabelText && hasLabelMeta ? /* @__PURE__ */ jsxs115("span", { className: "inline-flex max-w-full items-center gap-1.5 align-middle", children: [
+      /* @__PURE__ */ jsx172("span", { className: "min-w-0 truncate", children: visibleLabelText }),
+      optionalLabel && /* @__PURE__ */ jsxs115("span", { className: "shrink-0 text-[12px] relative top-[1px] font-normal leading-4 text-current opacity-70", children: [
         "(",
         optionalLabel,
         ")"
       ] }),
-      tooltip && /* @__PURE__ */ jsx168(
+      tooltip && /* @__PURE__ */ jsx172(
         HelpTooltip,
         {
           content: tooltip,
@@ -16589,9 +17297,9 @@ var AirbnbFieldTrigger = React63.forwardRef(
     const hasInvalidState = Boolean(error);
     const errorMessage = typeof error === "string" ? error : void 0;
     const isBlocked = Boolean(disabled) || Boolean(loading);
-    const resolvedTrailingAdornment = loading || trailingAdornment ? /* @__PURE__ */ jsxs112("span", { className: "flex items-center gap-2", children: [
+    const resolvedTrailingAdornment = loading || trailingAdornment ? /* @__PURE__ */ jsxs115("span", { className: "flex items-center gap-2", children: [
       trailingAdornment,
-      loading && /* @__PURE__ */ jsx168(
+      loading && /* @__PURE__ */ jsx172(
         Loader24,
         {
           "aria-hidden": "true",
@@ -16607,8 +17315,8 @@ var AirbnbFieldTrigger = React63.forwardRef(
       disabled ? "cursor-not-allowed opacity-50" : loading ? "cursor-progress" : isAirbnbVariant ? "cursor-pointer" : "cursor-text",
       className
     );
-    const sharedContent = /* @__PURE__ */ jsxs112(Fragment17, { children: [
-      /* @__PURE__ */ jsxs112(
+    const sharedContent = /* @__PURE__ */ jsxs115(Fragment17, { children: [
+      /* @__PURE__ */ jsxs115(
         "span",
         {
           className: cn(
@@ -16617,7 +17325,7 @@ var AirbnbFieldTrigger = React63.forwardRef(
             contentClassName
           ),
           children: [
-            /* @__PURE__ */ jsx168(
+            /* @__PURE__ */ jsx172(
               "span",
               {
                 id: labelId,
@@ -16630,7 +17338,7 @@ var AirbnbFieldTrigger = React63.forwardRef(
                 children: animatedLabel
               }
             ),
-            children ? children : hasValue ? /* @__PURE__ */ jsx168(
+            children ? children : hasValue ? /* @__PURE__ */ jsx172(
               "span",
               {
                 id: valueId,
@@ -16641,11 +17349,11 @@ var AirbnbFieldTrigger = React63.forwardRef(
                 ),
                 children: valueText
               }
-            ) : /* @__PURE__ */ jsx168("span", { id: helperTextId, className: "sr-only", children: placeholder ?? label })
+            ) : /* @__PURE__ */ jsx172("span", { id: helperTextId, className: "sr-only", children: placeholder ?? label })
           ]
         }
       ),
-      resolvedTrailingAdornment && /* @__PURE__ */ jsx168(
+      resolvedTrailingAdornment && /* @__PURE__ */ jsx172(
         "span",
         {
           "aria-hidden": "true",
@@ -16657,9 +17365,9 @@ var AirbnbFieldTrigger = React63.forwardRef(
         }
       )
     ] });
-    return /* @__PURE__ */ jsxs112("div", { className: "w-full", children: [
-      topLabel && /* @__PURE__ */ jsx168("p", { className: "mb-3 text-[16px] font-semibold leading-5 text-[#222222]", children: topLabel }),
-      as === "button" ? /* @__PURE__ */ jsx168(
+    return /* @__PURE__ */ jsxs115("div", { className: "w-full", children: [
+      topLabel && /* @__PURE__ */ jsx172("p", { className: "mb-3 text-[16px] font-semibold leading-5 text-[#222222]", children: topLabel }),
+      as === "button" ? /* @__PURE__ */ jsx172(
         "button",
         {
           id,
@@ -16676,7 +17384,7 @@ var AirbnbFieldTrigger = React63.forwardRef(
           ...props,
           children: sharedContent
         }
-      ) : /* @__PURE__ */ jsx168(
+      ) : /* @__PURE__ */ jsx172(
         "div",
         {
           id,
@@ -16693,16 +17401,16 @@ var AirbnbFieldTrigger = React63.forwardRef(
           children: sharedContent
         }
       ),
-      errorMessage && !hideErrorMessage && /* @__PURE__ */ jsx168(FieldErrorMessage, { id: errorId, message: errorMessage })
+      errorMessage && !hideErrorMessage && /* @__PURE__ */ jsx172(FieldErrorMessage, { id: errorId, message: errorMessage })
     ] });
   }
 );
 AirbnbFieldTrigger.displayName = "AirbnbFieldTrigger";
 
 // src/airbnb-fields/datepicker/DatePicker.tsx
-import { jsx as jsx169, jsxs as jsxs113 } from "react/jsx-runtime";
+import { jsx as jsx173, jsxs as jsxs116 } from "react/jsx-runtime";
 var DEFAULT_MIN_DATE = new Date(1920, 0, 1);
-var AirbnbDatePicker = React64.forwardRef(
+var AirbnbDatePicker = React67.forwardRef(
   ({
     variant = "default",
     label,
@@ -16728,24 +17436,24 @@ var AirbnbDatePicker = React64.forwardRef(
     formatValue = formatDateValue
   }, ref) => {
     const { isMatch: isMobile3 } = useScreenResize(DEVICE.mobileXL);
-    const [isOpen, setIsOpen] = React64.useState(false);
-    const triggerId = React64.useId();
-    const pickerId = React64.useId();
-    const labelId = React64.useId();
-    const valueId = React64.useId();
-    const helperTextId = React64.useId();
-    const errorId = React64.useId();
-    const internalRef = React64.useRef(null);
+    const [isOpen, setIsOpen] = React67.useState(false);
+    const triggerId = React67.useId();
+    const pickerId = React67.useId();
+    const labelId = React67.useId();
+    const valueId = React67.useId();
+    const helperTextId = React67.useId();
+    const errorId = React67.useId();
+    const internalRef = React67.useRef(null);
     const combinedRef = useCombinedRef(ref, internalRef);
-    const monthLabels = React64.useMemo(() => getMonthLabels(locale), [locale]);
-    const resolvedMinDate = React64.useMemo(() => minDate ?? DEFAULT_MIN_DATE, [minDate]);
-    const resolvedMaxDate = React64.useMemo(() => maxDate ?? /* @__PURE__ */ new Date(), [maxDate]);
-    const normalizedValue = React64.useMemo(() => normalizeDateValue(value), [value]);
-    const normalizedDefaultValue = React64.useMemo(
+    const monthLabels = React67.useMemo(() => getMonthLabels(locale), [locale]);
+    const resolvedMinDate = React67.useMemo(() => minDate ?? DEFAULT_MIN_DATE, [minDate]);
+    const resolvedMaxDate = React67.useMemo(() => maxDate ?? /* @__PURE__ */ new Date(), [maxDate]);
+    const normalizedValue = React67.useMemo(() => normalizeDateValue(value), [value]);
+    const normalizedDefaultValue = React67.useMemo(
       () => normalizeDateValue(defaultValue),
       [defaultValue]
     );
-    const resolvedValue = React64.useMemo(
+    const resolvedValue = React67.useMemo(
       () => normalizedValue ? clampDate(normalizedValue, resolvedMinDate, resolvedMaxDate) : null,
       [normalizedValue, resolvedMaxDate, resolvedMinDate]
     );
@@ -16776,7 +17484,7 @@ var AirbnbDatePicker = React64.forwardRef(
       minDate: resolvedMinDate,
       maxDate: resolvedMaxDate
     });
-    const handleOpenChange = React64.useCallback(
+    const handleOpenChange = React67.useCallback(
       (nextOpen) => {
         if (isBlocked && nextOpen) return;
         setIsOpen(nextOpen);
@@ -16786,7 +17494,7 @@ var AirbnbDatePicker = React64.forwardRef(
       },
       [isBlocked]
     );
-    const handleDone = React64.useCallback(() => {
+    const handleDone = React67.useCallback(() => {
       if (isBlocked) return;
       onChange(clampDate(draftDate, resolvedMinDate, resolvedMaxDate));
       handleOpenChange(false);
@@ -16798,11 +17506,11 @@ var AirbnbDatePicker = React64.forwardRef(
       resolvedMaxDate,
       resolvedMinDate
     ]);
-    const handleTriggerClick = React64.useCallback(() => {
+    const handleTriggerClick = React67.useCallback(() => {
       if (isBlocked) return;
       setIsOpen(true);
     }, [isBlocked]);
-    const handleTriggerKeyDown = React64.useCallback(
+    const handleTriggerKeyDown = React67.useCallback(
       (event) => {
         if (isBlocked) return;
         if (event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "Enter" || event.key === " ") {
@@ -16812,13 +17520,13 @@ var AirbnbDatePicker = React64.forwardRef(
       },
       [isBlocked]
     );
-    React64.useEffect(() => {
+    React67.useEffect(() => {
       if (isBlocked) {
         setIsOpen(false);
       }
     }, [isBlocked]);
-    return /* @__PURE__ */ jsxs113("div", { className: cn("relative w-full max-w-[var(--max-field-width)]", className), children: [
-      name && /* @__PURE__ */ jsx169(
+    return /* @__PURE__ */ jsxs116("div", { className: cn("relative w-full max-w-[var(--max-field-width)]", className), children: [
+      name && /* @__PURE__ */ jsx173(
         "input",
         {
           type: "hidden",
@@ -16826,7 +17534,7 @@ var AirbnbDatePicker = React64.forwardRef(
           value: resolvedValue ? formatDateInputValue(resolvedValue) : ""
         }
       ),
-      /* @__PURE__ */ jsx169(
+      /* @__PURE__ */ jsx173(
         AirbnbFieldTrigger,
         {
           id: triggerId,
@@ -16853,10 +17561,10 @@ var AirbnbDatePicker = React64.forwardRef(
           onClick: handleTriggerClick,
           onKeyDown: handleTriggerKeyDown,
           onBlur,
-          trailingAdornment: /* @__PURE__ */ jsx169(Calendar2, { className: "h-5 w-5 text-[#1F1F1B]", strokeWidth: 2 })
+          trailingAdornment: /* @__PURE__ */ jsx173(Calendar2, { className: "h-5 w-5 text-[#1F1F1B]", strokeWidth: 2 })
         }
       ),
-      /* @__PURE__ */ jsx169(
+      /* @__PURE__ */ jsx173(
         AirbnbDatePickerContent,
         {
           baseId: pickerId,
@@ -16890,10 +17598,10 @@ var AirbnbDatePicker = React64.forwardRef(
 AirbnbDatePicker.displayName = "AirbnbDatePicker";
 
 // src/airbnb-fields/input/Input.tsx
-import * as React65 from "react";
-import { jsx as jsx170 } from "react/jsx-runtime";
+import * as React68 from "react";
+import { jsx as jsx174 } from "react/jsx-runtime";
 var getInputValue = (value) => value != null ? String(value) : "";
-var AirbnbInput = React65.forwardRef(
+var AirbnbInput = React68.forwardRef(
   ({
     variant = "default",
     label,
@@ -16922,15 +17630,15 @@ var AirbnbInput = React65.forwardRef(
     placeholder,
     ...props
   }, ref) => {
-    const generatedId = React65.useId();
-    const inputRef = React65.useRef(null);
+    const generatedId = React68.useId();
+    const inputRef = React68.useRef(null);
     const inputId = id ?? generatedId;
     const fieldId = `${inputId}-field`;
     const labelId = `${inputId}-label`;
     const errorId = `${inputId}-error`;
     const accessibleLabel = placeholder ?? label;
-    const [isFocused, setIsFocused] = React65.useState(false);
-    const [currentValue, setCurrentValue] = React65.useState(
+    const [isFocused, setIsFocused] = React68.useState(false);
+    const [currentValue, setCurrentValue] = React68.useState(
       () => value != null ? getInputValue(value) : getInputValue(defaultValue)
     );
     const resolvedValue = value != null ? getInputValue(value) : currentValue;
@@ -16940,11 +17648,11 @@ var AirbnbInput = React65.forwardRef(
     const triggerError = error ?? invalid;
     const hasLabelMeta = Boolean(optional) || Boolean(tooltip);
     const isBlocked = Boolean(disabled) || Boolean(loading);
-    React65.useLayoutEffect(() => {
+    React68.useLayoutEffect(() => {
       const nextValue = value != null ? getInputValue(value) : getInputValue(inputRef.current?.value);
       setCurrentValue((prevValue) => prevValue === nextValue ? prevValue : nextValue);
     }, [value]);
-    const setRefs = React65.useCallback(
+    const setRefs = React68.useCallback(
       (node) => {
         inputRef.current = node;
         if (node && value == null) {
@@ -16974,7 +17682,7 @@ var AirbnbInput = React65.forwardRef(
       setIsFocused(false);
       onBlur?.(event);
     };
-    return /* @__PURE__ */ jsx170("div", { className: cn("w-full max-w-[var(--max-field-width)]", wrapperClassName), children: /* @__PURE__ */ jsx170(
+    return /* @__PURE__ */ jsx174("div", { className: cn("w-full max-w-[var(--max-field-width)]", wrapperClassName), children: /* @__PURE__ */ jsx174(
       AirbnbFieldTrigger,
       {
         as: "div",
@@ -17006,7 +17714,7 @@ var AirbnbInput = React65.forwardRef(
         forceFloatingLabel: shouldShowLabel,
         forceLabelText: hasLabelMeta,
         hideErrorMessage: !renderErrorMessage,
-        children: /* @__PURE__ */ jsx170(
+        children: /* @__PURE__ */ jsx174(
           "input",
           {
             ...props,
@@ -17042,14 +17750,14 @@ var AirbnbInput = React65.forwardRef(
 AirbnbInput.displayName = "AirbnbInput";
 
 // src/airbnb-fields/phone-field/PhoneField.tsx
-import * as React71 from "react";
+import * as React74 from "react";
 import { ChevronDown as ChevronDown5 } from "lucide-react";
 
 // src/airbnb-fields/select/Select.tsx
-import * as React70 from "react";
+import * as React73 from "react";
 
 // src/airbnb-fields/select/SelectDesktopMenu.tsx
-import { jsx as jsx171, jsxs as jsxs114 } from "react/jsx-runtime";
+import { jsx as jsx175, jsxs as jsxs117 } from "react/jsx-runtime";
 function AirbnbSelectDesktopMenu({
   id,
   options,
@@ -17068,7 +17776,7 @@ function AirbnbSelectDesktopMenu({
   noOptionsMessage
 }) {
   const emptyMessage = noOptionsMessage?.();
-  return /* @__PURE__ */ jsxs114(
+  return /* @__PURE__ */ jsxs117(
     "div",
     {
       id,
@@ -17081,12 +17789,12 @@ function AirbnbSelectDesktopMenu({
       onKeyDown,
       className: cn("max-h-[280px] overflow-y-auto p-2 outline-none", menuClassName),
       children: [
-        options.length === 0 && emptyMessage ? /* @__PURE__ */ jsx171("div", { className: "px-4 py-3 text-base leading-6 text-[#6C6C6C]", children: emptyMessage }) : null,
+        options.length === 0 && emptyMessage ? /* @__PURE__ */ jsx175("div", { className: "px-4 py-3 text-base leading-6 text-[#6C6C6C]", children: emptyMessage }) : null,
         options.map((option, index) => {
           const isSelected = selectedValue?.value === option.value;
           const isHighlighted = index === highlightedIndex;
           const optionKey = `${String(option.value)}-${index}`;
-          return /* @__PURE__ */ jsx171(
+          return /* @__PURE__ */ jsx175(
             "button",
             {
               id: getOptionId2(index),
@@ -17118,7 +17826,7 @@ function AirbnbSelectDesktopMenu({
 }
 
 // src/airbnb-fields/select/SelectDesktopContent.tsx
-import { jsx as jsx172 } from "react/jsx-runtime";
+import { jsx as jsx176 } from "react/jsx-runtime";
 function AirbnbSelectDesktopContent({
   isOpen,
   listboxId,
@@ -17139,14 +17847,14 @@ function AirbnbSelectDesktopContent({
   noOptionsMessage
 }) {
   if (!isOpen) return null;
-  return /* @__PURE__ */ jsx172(
+  return /* @__PURE__ */ jsx176(
     "div",
     {
       className: cn(
         "absolute left-0 right-0 top-[calc(100%+8px)] z-20 overflow-hidden rounded-[20px] border border-[#DEDAD2] bg-white shadow-[0_14px_30px_rgba(18,18,18,0.08)]",
         dropdownClassName
       ),
-      children: /* @__PURE__ */ jsx172(
+      children: /* @__PURE__ */ jsx176(
         AirbnbSelectDesktopMenu,
         {
           id: listboxId,
@@ -17244,7 +17952,7 @@ function getMobileOptionStyles(index, scrollTop) {
 }
 
 // src/airbnb-fields/select/SelectMobileWheel.tsx
-import { jsx as jsx173, jsxs as jsxs115 } from "react/jsx-runtime";
+import { jsx as jsx177, jsxs as jsxs118 } from "react/jsx-runtime";
 function AirbnbSelectMobileWheel({
   id,
   options,
@@ -17263,7 +17971,7 @@ function AirbnbSelectMobileWheel({
 }) {
   const spacerHeight2 = getWheelSpacerHeight();
   const emptyMessage = noOptionsMessage?.();
-  return /* @__PURE__ */ jsxs115(
+  return /* @__PURE__ */ jsxs118(
     "div",
     {
       id,
@@ -17275,10 +17983,10 @@ function AirbnbSelectMobileWheel({
       onKeyDown,
       className: cn("relative overflow-hidden outline-none", menuClassName),
       children: [
-        options.length === 0 && emptyMessage ? /* @__PURE__ */ jsx173("div", { className: "flex min-h-[160px] items-center justify-center px-4 text-center text-base leading-6 text-[#6C6C6C]", children: emptyMessage }) : null,
-        /* @__PURE__ */ jsx173("div", { className: "pointer-events-none absolute inset-x-0 top-0 h-16 bg-gradient-to-b from-white via-white/80 to-transparent" }),
-        /* @__PURE__ */ jsx173("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 h-16 bg-gradient-to-t from-white via-white/80 to-transparent" }),
-        /* @__PURE__ */ jsx173(
+        options.length === 0 && emptyMessage ? /* @__PURE__ */ jsx177("div", { className: "flex min-h-[160px] items-center justify-center px-4 text-center text-base leading-6 text-[#6C6C6C]", children: emptyMessage }) : null,
+        /* @__PURE__ */ jsx177("div", { className: "pointer-events-none absolute inset-x-0 top-0 h-16 bg-gradient-to-b from-white via-white/80 to-transparent" }),
+        /* @__PURE__ */ jsx177("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 h-16 bg-gradient-to-t from-white via-white/80 to-transparent" }),
+        /* @__PURE__ */ jsx177(
           "div",
           {
             "aria-hidden": true,
@@ -17288,7 +17996,7 @@ function AirbnbSelectMobileWheel({
             )
           }
         ),
-        /* @__PURE__ */ jsxs115(
+        /* @__PURE__ */ jsxs118(
           "div",
           {
             ref: listRef,
@@ -17303,11 +18011,11 @@ function AirbnbSelectMobileWheel({
               WebkitOverflowScrolling: "touch"
             },
             children: [
-              /* @__PURE__ */ jsx173("div", { style: { height: `${spacerHeight2}px` } }),
+              /* @__PURE__ */ jsx177("div", { style: { height: `${spacerHeight2}px` } }),
               options.map((option, index) => {
                 const { distance, style } = getMobileOptionStyles(index, scrollTop);
                 const optionKey = `${String(option.value)}-${index}`;
-                return /* @__PURE__ */ jsx173(
+                return /* @__PURE__ */ jsx177(
                   "button",
                   {
                     id: getOptionId2(index),
@@ -17328,7 +18036,7 @@ function AirbnbSelectMobileWheel({
                   optionKey
                 );
               }),
-              /* @__PURE__ */ jsx173("div", { style: { height: `${spacerHeight2}px` } })
+              /* @__PURE__ */ jsx177("div", { style: { height: `${spacerHeight2}px` } })
             ]
           }
         )
@@ -17338,7 +18046,7 @@ function AirbnbSelectMobileWheel({
 }
 
 // src/airbnb-fields/select/SelectMobileContent.tsx
-import { jsx as jsx174, jsxs as jsxs116 } from "react/jsx-runtime";
+import { jsx as jsx178, jsxs as jsxs119 } from "react/jsx-runtime";
 function AirbnbSelectMobileContent({
   open,
   onOpenChange,
@@ -17362,11 +18070,11 @@ function AirbnbSelectMobileContent({
   getOptionId: getOptionId2,
   noOptionsMessage
 }) {
-  return /* @__PURE__ */ jsx174(Drawer, { open, onOpenChange, children: /* @__PURE__ */ jsxs116(DrawerContent, { onClose, lockScroll: false, children: [
-    /* @__PURE__ */ jsx174(DrawerTitle, { className: "sr-only", children: mobileTitle ?? label }),
-    /* @__PURE__ */ jsx174(DrawerDescription, { className: "sr-only", children: label }),
-    /* @__PURE__ */ jsxs116("div", { className: "px-6 pb-4 pt-1", children: [
-      /* @__PURE__ */ jsx174(
+  return /* @__PURE__ */ jsx178(Drawer, { open, onOpenChange, children: /* @__PURE__ */ jsxs119(DrawerContent, { onClose, lockScroll: false, children: [
+    /* @__PURE__ */ jsx178(DrawerTitle, { className: "sr-only", children: mobileTitle ?? label }),
+    /* @__PURE__ */ jsx178(DrawerDescription, { className: "sr-only", children: label }),
+    /* @__PURE__ */ jsxs119("div", { className: "px-6 pb-4 pt-1", children: [
+      /* @__PURE__ */ jsx178(
         AirbnbSelectMobileWheel,
         {
           id: listboxId,
@@ -17385,16 +18093,16 @@ function AirbnbSelectMobileContent({
           noOptionsMessage
         }
       ),
-      /* @__PURE__ */ jsx174(Button, { type: "button", onClick: onDone, className: "mt-4 h-12 mb-8 w-full", children: doneLabel })
+      /* @__PURE__ */ jsx178(Button, { type: "button", onClick: onDone, className: "mt-4 h-12 mb-8 w-full", children: doneLabel })
     ] })
   ] }) });
 }
 
 // src/airbnb-fields/select/SelectTrigger.tsx
-import * as React66 from "react";
+import * as React69 from "react";
 import { ChevronDown as ChevronDown4 } from "lucide-react";
-import { jsx as jsx175 } from "react/jsx-runtime";
-var AirbnbSelectTrigger = React66.forwardRef(
+import { jsx as jsx179 } from "react/jsx-runtime";
+var AirbnbSelectTrigger = React69.forwardRef(
   ({
     id,
     open,
@@ -17419,7 +18127,7 @@ var AirbnbSelectTrigger = React66.forwardRef(
     onKeyDown,
     onBlur
   }, ref) => {
-    return /* @__PURE__ */ jsx175(
+    return /* @__PURE__ */ jsx179(
       AirbnbFieldTrigger,
       {
         id,
@@ -17448,7 +18156,7 @@ var AirbnbSelectTrigger = React66.forwardRef(
         onClick,
         onKeyDown,
         onBlur,
-        trailingAdornment: /* @__PURE__ */ jsx175(
+        trailingAdornment: /* @__PURE__ */ jsx179(
           ChevronDown4,
           {
             className: open ? "h-6 w-6 rotate-180 text-[#1F1F1B] transition-transform" : "h-6 w-6 text-[#1F1F1B] transition-transform"
@@ -17461,7 +18169,7 @@ var AirbnbSelectTrigger = React66.forwardRef(
 AirbnbSelectTrigger.displayName = "AirbnbSelectTrigger";
 
 // src/airbnb-fields/select/useDesktopSelect.ts
-import * as React67 from "react";
+import * as React70 from "react";
 function useDesktopSelect({
   isMobile: isMobile3,
   isOpen,
@@ -17470,12 +18178,12 @@ function useDesktopSelect({
   disabled,
   onChange
 }) {
-  const [highlightedIndex, setHighlightedIndex] = React67.useState(-1);
-  const triggerRef = React67.useRef(null);
-  const listRef = React67.useRef(null);
-  const optionRefs = React67.useRef([]);
+  const [highlightedIndex, setHighlightedIndex] = React70.useState(-1);
+  const triggerRef = React70.useRef(null);
+  const listRef = React70.useRef(null);
+  const optionRefs = React70.useRef([]);
   const selectedIndex = getOptionIndex2(options, value);
-  React67.useEffect(() => {
+  React70.useEffect(() => {
     if (!isOpen || isMobile3) return;
     setHighlightedIndex((currentIndex) => {
       if (currentIndex >= 0) {
@@ -17490,34 +18198,34 @@ function useDesktopSelect({
       window.cancelAnimationFrame(frameId);
     };
   }, [isMobile3, isOpen, options, selectedIndex]);
-  React67.useEffect(() => {
+  React70.useEffect(() => {
     if (!isOpen || isMobile3 || highlightedIndex < 0) return;
     optionRefs.current[highlightedIndex]?.scrollIntoView({
       block: "nearest"
     });
   }, [highlightedIndex, isMobile3, isOpen]);
-  React67.useEffect(() => {
+  React70.useEffect(() => {
     if (isOpen) return;
     setHighlightedIndex(-1);
   }, [isOpen]);
-  const focusTrigger = React67.useCallback(() => {
+  const focusTrigger = React70.useCallback(() => {
     triggerRef.current?.focus();
   }, []);
-  const handleSelect = React67.useCallback(
+  const handleSelect = React70.useCallback(
     (option) => {
       if (option.isDisabled || disabled) return;
       onChange(option);
     },
     [disabled, onChange]
   );
-  const openMenu = React67.useCallback(
+  const openMenu = React70.useCallback(
     (targetIndex) => {
       const fallbackIndex = selectedIndex >= 0 ? selectedIndex : getFirstEnabledOptionIndex2(options);
       setHighlightedIndex(targetIndex ?? fallbackIndex);
     },
     [options, selectedIndex]
   );
-  const handleTriggerKeyDown = React67.useCallback(
+  const handleTriggerKeyDown = React70.useCallback(
     (event, onOpen) => {
       if (disabled) return;
       if (event.key === "ArrowDown") {
@@ -17542,7 +18250,7 @@ function useDesktopSelect({
     },
     [disabled, openMenu, options, selectedIndex]
   );
-  const handleMenuKeyDown = React67.useCallback(
+  const handleMenuKeyDown = React70.useCallback(
     (event, onClose) => {
       if (event.key === "Escape") {
         event.preventDefault();
@@ -17592,7 +18300,7 @@ function useDesktopSelect({
     },
     [focusTrigger, highlightedIndex, onChange, options]
   );
-  const setOptionRef = React67.useCallback(
+  const setOptionRef = React70.useCallback(
     (index, node) => {
       optionRefs.current[index] = node;
     },
@@ -17612,23 +18320,23 @@ function useDesktopSelect({
 }
 
 // src/airbnb-fields/select/useMobileSelectWheel.ts
-import * as React68 from "react";
+import * as React71 from "react";
 function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, disabled }) {
-  const [pendingValue, setPendingValue] = React68.useState(
+  const [pendingValue, setPendingValue] = React71.useState(
     value ?? null
   );
-  const [mobileScrollTop, setMobileScrollTop] = React68.useState(0);
-  const mobileListRef = React68.useRef(null);
-  const scrollSettleTimeoutRef = React68.useRef(null);
-  const scrollAnimationFrameRef = React68.useRef(null);
-  const getTargetIndex = React68.useCallback(
+  const [mobileScrollTop, setMobileScrollTop] = React71.useState(0);
+  const mobileListRef = React71.useRef(null);
+  const scrollSettleTimeoutRef = React71.useRef(null);
+  const scrollAnimationFrameRef = React71.useRef(null);
+  const getTargetIndex = React71.useCallback(
     (targetValue) => {
       const selectedIndex = getOptionIndex2(options, targetValue);
       return selectedIndex >= 0 ? selectedIndex : getFirstEnabledOptionIndex2(options);
     },
     [options]
   );
-  const syncScrollPosition = React68.useCallback(
+  const syncScrollPosition = React71.useCallback(
     (targetValue, behavior = "instant") => {
       const targetIndex = getTargetIndex(targetValue);
       if (targetIndex < 0) return;
@@ -17647,27 +18355,27 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
     },
     [getTargetIndex, options]
   );
-  const clearScrollSettleTimeout = React68.useCallback(() => {
+  const clearScrollSettleTimeout = React71.useCallback(() => {
     if (scrollSettleTimeoutRef.current === null) return;
     window.clearTimeout(scrollSettleTimeoutRef.current);
     scrollSettleTimeoutRef.current = null;
   }, []);
-  const clearScrollAnimationFrame = React68.useCallback(() => {
+  const clearScrollAnimationFrame = React71.useCallback(() => {
     if (scrollAnimationFrameRef.current === null) return;
     window.cancelAnimationFrame(scrollAnimationFrameRef.current);
     scrollAnimationFrameRef.current = null;
   }, []);
-  React68.useEffect(
+  React71.useEffect(
     () => () => {
       clearScrollSettleTimeout();
       clearScrollAnimationFrame();
     },
     [clearScrollAnimationFrame, clearScrollSettleTimeout]
   );
-  React68.useEffect(() => {
+  React71.useEffect(() => {
     setPendingValue(value ?? null);
   }, [value]);
-  React68.useLayoutEffect(() => {
+  React71.useLayoutEffect(() => {
     if (!isMobile3 || !isOpen) return;
     const frameId = window.requestAnimationFrame(() => {
       syncScrollPosition(value ?? null, "instant");
@@ -17676,7 +18384,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
       window.cancelAnimationFrame(frameId);
     };
   }, [isMobile3, isOpen, syncScrollPosition, value]);
-  const settleScroll = React68.useCallback(() => {
+  const settleScroll = React71.useCallback(() => {
     if (!mobileListRef.current) return;
     const nextIndex = Math.round(mobileListRef.current.scrollTop / MOBILE_OPTION_HEIGHT);
     const nextOption = options[nextIndex];
@@ -17688,13 +18396,13 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
     }
     setPendingValue(nextOption);
   }, [options, pendingValue]);
-  const scheduleScrollSettle = React68.useCallback(() => {
+  const scheduleScrollSettle = React71.useCallback(() => {
     clearScrollSettleTimeout();
     scrollSettleTimeoutRef.current = window.setTimeout(() => {
       settleScroll();
     }, MOBILE_SCROLL_SETTLE_DELAY);
   }, [clearScrollSettleTimeout, settleScroll]);
-  const handleScroll = React68.useCallback(() => {
+  const handleScroll = React71.useCallback(() => {
     if (!mobileListRef.current) return;
     const nextScrollTop = mobileListRef.current.scrollTop;
     clearScrollAnimationFrame();
@@ -17704,7 +18412,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
     });
     scheduleScrollSettle();
   }, [clearScrollAnimationFrame, scheduleScrollSettle]);
-  const focusOptionByIndex = React68.useCallback(
+  const focusOptionByIndex = React71.useCallback(
     (index, behavior = "instant", updatePendingImmediately = behavior === "instant") => {
       if (!mobileListRef.current || index < 0 || index >= options.length) return;
       const option = options[index];
@@ -17722,7 +18430,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
     },
     [options, scheduleScrollSettle]
   );
-  const handleOptionClick = React68.useCallback(
+  const handleOptionClick = React71.useCallback(
     (option) => {
       if (!mobileListRef.current || disabled || option.isDisabled) return;
       const optionIndex = getOptionIndex2(options, option);
@@ -17731,7 +18439,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
     },
     [disabled, focusOptionByIndex, options]
   );
-  const moveByStep = React68.useCallback(
+  const moveByStep = React71.useCallback(
     (step) => {
       const currentIndex = getOptionIndex2(options, pendingValue);
       const fallbackIndex = step === 1 ? getFirstEnabledOptionIndex2(options) : getLastEnabledOptionIndex2(options);
@@ -17743,7 +18451,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
     },
     [focusOptionByIndex, options, pendingValue]
   );
-  const moveToBoundary = React68.useCallback(
+  const moveToBoundary = React71.useCallback(
     (boundary) => {
       const targetIndex = boundary === "start" ? getFirstEnabledOptionIndex2(options) : getLastEnabledOptionIndex2(options);
       if (targetIndex >= 0) {
@@ -17752,7 +18460,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
     },
     [focusOptionByIndex, options]
   );
-  const syncPendingValue = React68.useCallback(
+  const syncPendingValue = React71.useCallback(
     (nextValue) => {
       const normalizedValue = nextValue ?? null;
       const matchedIndex = getOptionIndex2(options, normalizedValue);
@@ -17780,9 +18488,9 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
 }
 
 // src/airbnb-fields/select/useSelectIds.ts
-import * as React69 from "react";
+import * as React72 from "react";
 function useSelectIds2({ name, hasValue, error, hideErrorMessage }) {
-  const reactId = React69.useId().replace(/:/g, "");
+  const reactId = React72.useId().replace(/:/g, "");
   const baseId = name ? `select-${name}` : `select-${reactId}`;
   const triggerId = `${baseId}-trigger`;
   const labelId = `${baseId}-label`;
@@ -17792,7 +18500,7 @@ function useSelectIds2({ name, hasValue, error, hideErrorMessage }) {
   const listboxId = `${baseId}-listbox`;
   const describedErrorId = error && !hideErrorMessage ? errorId : void 0;
   const describedBy = [!hasValue ? helperTextId : null, describedErrorId].filter(Boolean).join(" ") || void 0;
-  const getOptionId2 = React69.useCallback(
+  const getOptionId2 = React72.useCallback(
     (index) => `${baseId}-option-${index}`,
     [baseId]
   );
@@ -17810,8 +18518,8 @@ function useSelectIds2({ name, hasValue, error, hideErrorMessage }) {
 }
 
 // src/airbnb-fields/select/Select.tsx
-import { jsx as jsx176, jsxs as jsxs117 } from "react/jsx-runtime";
-var AirbnbSelect = React70.forwardRef(function AirbnbSelect2({
+import { jsx as jsx180, jsxs as jsxs120 } from "react/jsx-runtime";
+var AirbnbSelect = React73.forwardRef(function AirbnbSelect2({
   options = [],
   value,
   onChange,
@@ -17838,8 +18546,8 @@ var AirbnbSelect = React70.forwardRef(function AirbnbSelect2({
   noOptionsMessage
 }, ref) {
   const { isMatch: isMobile3 } = useScreenResize(DEVICE.mobileXL);
-  const [isOpen, setIsOpen] = React70.useState(false);
-  const containerRef = React70.useRef(null);
+  const [isOpen, setIsOpen] = React73.useState(false);
+  const containerRef = React73.useRef(null);
   const hasValue = Boolean(value);
   const helperText = placeholder ?? label;
   const shouldDescribeHelperText = !hasValue && helperText !== label;
@@ -17900,12 +18608,12 @@ var AirbnbSelect = React70.forwardRef(function AirbnbSelect2({
     onOutsideClick: () => setIsOpen(false),
     isDisabled: !isOpen || isMobile3
   });
-  React70.useEffect(() => {
+  React73.useEffect(() => {
     if (isBlocked) {
       setIsOpen(false);
     }
   }, [isBlocked]);
-  React70.useEffect(
+  React73.useEffect(
     function setCorrectOptionIfThereIsOnlyValue() {
       if (value?.value === void 0 || value.value === null || value.label !== "") {
         return;
@@ -17917,7 +18625,7 @@ var AirbnbSelect = React70.forwardRef(function AirbnbSelect2({
     },
     [onChange, options, value]
   );
-  const handleMobileOpenChange = React70.useCallback(
+  const handleMobileOpenChange = React73.useCallback(
     (nextOpen) => {
       if (isBlocked && nextOpen) return;
       setIsOpen(nextOpen);
@@ -17928,7 +18636,7 @@ var AirbnbSelect = React70.forwardRef(function AirbnbSelect2({
     },
     [focusTrigger, isBlocked, syncPendingValue, value]
   );
-  const handleMobileDone = React70.useCallback(() => {
+  const handleMobileDone = React73.useCallback(() => {
     if (isBlocked) return;
     const finalOption = pendingValue;
     if (finalOption && finalOption.value !== value?.value) {
@@ -17937,7 +18645,7 @@ var AirbnbSelect = React70.forwardRef(function AirbnbSelect2({
     setIsOpen(false);
     focusTrigger();
   }, [focusTrigger, isBlocked, onChange, pendingValue, value]);
-  const handleTriggerClick = React70.useCallback(() => {
+  const handleTriggerClick = React73.useCallback(() => {
     if (isBlocked) return;
     setIsOpen((prev) => {
       const nextOpen = !prev;
@@ -17990,13 +18698,13 @@ var AirbnbSelect = React70.forwardRef(function AirbnbSelect2({
       handleMobileOpenChange(false);
     }
   };
-  return /* @__PURE__ */ jsxs117(
+  return /* @__PURE__ */ jsxs120(
     "div",
     {
       ref: containerRef,
       className: cn("relative w-full max-w-[var(--max-field-width)]", className),
       children: [
-        name && /* @__PURE__ */ jsx176("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
+        name && /* @__PURE__ */ jsx180("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
         renderTrigger ? renderTrigger({
           id: triggerId,
           open: isOpen,
@@ -18018,7 +18726,7 @@ var AirbnbSelect = React70.forwardRef(function AirbnbSelect2({
           onClick: handleTriggerClick,
           onKeyDown: handleRootTriggerKeyDown,
           onBlur
-        }) : /* @__PURE__ */ jsx176(
+        }) : /* @__PURE__ */ jsx180(
           AirbnbSelectTrigger,
           {
             id: triggerId,
@@ -18046,7 +18754,7 @@ var AirbnbSelect = React70.forwardRef(function AirbnbSelect2({
             onBlur
           }
         ),
-        isMobile3 ? /* @__PURE__ */ jsx176(
+        isMobile3 ? /* @__PURE__ */ jsx180(
           AirbnbSelectMobileContent,
           {
             open: isOpen,
@@ -18071,7 +18779,7 @@ var AirbnbSelect = React70.forwardRef(function AirbnbSelect2({
             getOptionId: getOptionId2,
             noOptionsMessage
           }
-        ) : /* @__PURE__ */ jsx176(
+        ) : /* @__PURE__ */ jsx180(
           AirbnbSelectDesktopContent,
           {
             isOpen,
@@ -18105,13 +18813,13 @@ var AirbnbSelect = React70.forwardRef(function AirbnbSelect2({
 });
 
 // src/airbnb-fields/phone-field/PhoneField.tsx
-import { jsx as jsx177, jsxs as jsxs118 } from "react/jsx-runtime";
-function formatPhoneCodeOptionLabel(option) {
+import { jsx as jsx181, jsxs as jsxs121 } from "react/jsx-runtime";
+function formatPhoneCodeOptionLabel2(option) {
   const label = String(option.label);
   const value = String(option.value);
   return label.includes(value) ? label : `${label} (${value})`;
 }
-var AirbnbPhoneField = React71.forwardRef(
+var AirbnbPhoneField = React74.forwardRef(
   ({
     variant = "default",
     label,
@@ -18135,16 +18843,16 @@ var AirbnbPhoneField = React71.forwardRef(
     mobileTitle,
     codePlaceholder = "+00"
   }, ref) => {
-    const inputId = React71.useId();
-    const codeOptions = React71.useMemo(
+    const inputId = React74.useId();
+    const codeOptions = React74.useMemo(
       () => options.map((option) => ({
         value: option.value,
-        label: formatPhoneCodeOptionLabel(option),
+        label: formatPhoneCodeOptionLabel2(option),
         disabled: option.disabled
       })),
       [options]
     );
-    const selectedCodeOption = React71.useMemo(
+    const selectedCodeOption = React74.useMemo(
       () => codeOptions.find((option) => option.value === value?.code) ?? null,
       [codeOptions, value?.code]
     );
@@ -18152,9 +18860,9 @@ var AirbnbPhoneField = React71.forwardRef(
     const hasInvalidState = Boolean(error) || Boolean(invalid);
     const isBlocked = Boolean(disabled) || Boolean(loading);
     const isCodeBlocked = isBlocked || Boolean(codeReadOnly);
-    return /* @__PURE__ */ jsxs118("div", { className: cn("w-full max-w-[var(--max-field-width)]", className), children: [
-      name && /* @__PURE__ */ jsx177("input", { type: "hidden", name, value: combinedValue, disabled }),
-      codeName && /* @__PURE__ */ jsx177(
+    return /* @__PURE__ */ jsxs121("div", { className: cn("w-full max-w-[var(--max-field-width)]", className), children: [
+      name && /* @__PURE__ */ jsx181("input", { type: "hidden", name, value: combinedValue, disabled }),
+      codeName && /* @__PURE__ */ jsx181(
         "input",
         {
           type: "hidden",
@@ -18163,7 +18871,7 @@ var AirbnbPhoneField = React71.forwardRef(
           disabled
         }
       ),
-      numberName && /* @__PURE__ */ jsx177(
+      numberName && /* @__PURE__ */ jsx181(
         "input",
         {
           type: "hidden",
@@ -18172,7 +18880,7 @@ var AirbnbPhoneField = React71.forwardRef(
           disabled
         }
       ),
-      topLabel && /* @__PURE__ */ jsx177(
+      topLabel && /* @__PURE__ */ jsx181(
         "label",
         {
           htmlFor: inputId,
@@ -18180,8 +18888,8 @@ var AirbnbPhoneField = React71.forwardRef(
           children: topLabel
         }
       ),
-      /* @__PURE__ */ jsxs118("div", { className: "flex items-stretch", children: [
-        /* @__PURE__ */ jsx177(
+      /* @__PURE__ */ jsxs121("div", { className: "flex items-stretch", children: [
+        /* @__PURE__ */ jsx181(
           AirbnbSelect,
           {
             ref,
@@ -18212,7 +18920,7 @@ var AirbnbPhoneField = React71.forwardRef(
               onClick,
               onKeyDown,
               valueLabel
-            }) => /* @__PURE__ */ jsxs118(
+            }) => /* @__PURE__ */ jsxs121(
               "button",
               {
                 id,
@@ -18234,8 +18942,8 @@ var AirbnbPhoneField = React71.forwardRef(
                   triggerDisabled ? "cursor-not-allowed opacity-50" : triggerLoading ? "cursor-progress" : "cursor-pointer"
                 ),
                 children: [
-                  /* @__PURE__ */ jsx177("span", { children: valueLabel ?? codePlaceholder }),
-                  /* @__PURE__ */ jsx177(
+                  /* @__PURE__ */ jsx181("span", { children: valueLabel ?? codePlaceholder }),
+                  /* @__PURE__ */ jsx181(
                     ChevronDown5,
                     {
                       className: cn("h-5 w-5 transition-transform", open ? "rotate-180" : ""),
@@ -18247,7 +18955,7 @@ var AirbnbPhoneField = React71.forwardRef(
             )
           }
         ),
-        /* @__PURE__ */ jsx177(
+        /* @__PURE__ */ jsx181(
           AirbnbInput,
           {
             id: inputId,
@@ -18279,18 +18987,18 @@ var AirbnbPhoneField = React71.forwardRef(
           }
         )
       ] }),
-      error && /* @__PURE__ */ jsx177(FieldErrorMessage, { message: error })
+      error && /* @__PURE__ */ jsx181(FieldErrorMessage, { message: error })
     ] });
   }
 );
 AirbnbPhoneField.displayName = "AirbnbPhoneField";
 
 // src/airbnb-fields/searchable-select/SearchableSelect.tsx
-import * as React72 from "react";
-import { ChevronDown as ChevronDown6, Search as Search5 } from "lucide-react";
+import * as React75 from "react";
+import { ChevronDown as ChevronDown6, Search as Search4 } from "lucide-react";
 import { useVirtualizer as useVirtualizer3 } from "@tanstack/react-virtual";
-import { useCallback as useCallback52 } from "react";
-import { jsx as jsx178, jsxs as jsxs119 } from "react/jsx-runtime";
+import { useCallback as useCallback54 } from "react";
+import { jsx as jsx182, jsxs as jsxs122 } from "react/jsx-runtime";
 var ROW_HEIGHT = 48;
 var DESKTOP_LIST_HEIGHT = 280;
 var MOBILE_LIST_HEIGHT = 420;
@@ -18331,13 +19039,13 @@ var AirbnbSearchableSelectInternal = ({
   loadingMessage
 }, ref) => {
   const { isMatch: isMobile3 } = useScreenResize(DEVICE.mobileXL);
-  const reactId = React72.useId();
-  const [open, setOpen] = React72.useState(false);
-  const [internalSearchValue, setInternalSearchValue] = React72.useState("");
-  const [highlightedIndex, setHighlightedIndex] = React72.useState(-1);
-  const containerRef = React72.useRef(null);
-  const triggerRef = React72.useRef(null);
-  const inputRef = React72.useRef(null);
+  const reactId = React75.useId();
+  const [open, setOpen] = React75.useState(false);
+  const [internalSearchValue, setInternalSearchValue] = React75.useState("");
+  const [highlightedIndex, setHighlightedIndex] = React75.useState(-1);
+  const containerRef = React75.useRef(null);
+  const triggerRef = React75.useRef(null);
+  const inputRef = React75.useRef(null);
   const listboxId = `${reactId}-listbox`;
   const labelId = `${reactId}-label`;
   const valueId = `${reactId}-value`;
@@ -18346,13 +19054,13 @@ var AirbnbSearchableSelectInternal = ({
   const searchInputId = `${reactId}-search`;
   const effectiveSearchValue = searchValue ?? internalSearchValue;
   const shouldFilterLocally = !onSearchChange && filterOption !== null;
-  const visibleOptions = React72.useMemo(() => {
+  const visibleOptions = React75.useMemo(() => {
     if (!shouldFilterLocally || !effectiveSearchValue) {
       return options;
     }
     return options.filter((option) => filterOption(option, effectiveSearchValue));
   }, [effectiveSearchValue, filterOption, options, shouldFilterLocally]);
-  const selectedIndex = React72.useMemo(
+  const selectedIndex = React75.useMemo(
     () => visibleOptions.findIndex((option) => option.value === value?.value),
     [value?.value, visibleOptions]
   );
@@ -18368,7 +19076,7 @@ var AirbnbSearchableSelectInternal = ({
     isDisabled: !open || isMobile3
   });
   const handleOnOpenChange = useEvent(onOpenChange);
-  const setSelectOpen = useCallback52(
+  const setSelectOpen = useCallback54(
     (nextOpen, options2) => {
       setOpen(nextOpen);
       handleOnOpenChange?.(nextOpen);
@@ -18378,7 +19086,7 @@ var AirbnbSearchableSelectInternal = ({
     },
     [handleOnOpenChange]
   );
-  React72.useEffect(() => {
+  React75.useEffect(() => {
     if (isBlocked) {
       setSelectOpen(false);
       return;
@@ -18391,7 +19099,7 @@ var AirbnbSearchableSelectInternal = ({
       window.cancelAnimationFrame(frameId);
     };
   }, [isBlocked, open, setSelectOpen]);
-  React72.useEffect(() => {
+  React75.useEffect(() => {
     if (!open) {
       setHighlightedIndex(-1);
       return;
@@ -18459,7 +19167,7 @@ var AirbnbSearchableSelectInternal = ({
       }
     }
   }
-  const content = /* @__PURE__ */ jsx178(
+  const content = /* @__PURE__ */ jsx182(
     AirbnbSearchableSelectContent,
     {
       inputId: searchInputId,
@@ -18486,10 +19194,10 @@ var AirbnbSearchableSelectInternal = ({
       onOptionHover: setHighlightedIndex
     }
   );
-  React72.useImperativeHandle(ref, () => triggerRef.current, []);
-  return /* @__PURE__ */ jsxs119("div", { ref: containerRef, className: cn("relative w-full max-w-[425px]", className), children: [
-    name && /* @__PURE__ */ jsx178("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
-    /* @__PURE__ */ jsx178(
+  React75.useImperativeHandle(ref, () => triggerRef.current, []);
+  return /* @__PURE__ */ jsxs122("div", { ref: containerRef, className: cn("relative w-full max-w-[425px]", className), children: [
+    name && /* @__PURE__ */ jsx182("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
+    /* @__PURE__ */ jsx182(
       AirbnbFieldTrigger,
       {
         id: `${reactId}-trigger`,
@@ -18524,7 +19232,7 @@ var AirbnbSearchableSelectInternal = ({
         },
         onKeyDown: handleTriggerKeyDown,
         onBlur,
-        trailingAdornment: /* @__PURE__ */ jsx178(
+        trailingAdornment: /* @__PURE__ */ jsx182(
           ChevronDown6,
           {
             className: cn(
@@ -18535,7 +19243,7 @@ var AirbnbSearchableSelectInternal = ({
         )
       }
     ),
-    isMobile3 ? /* @__PURE__ */ jsx178(
+    isMobile3 ? /* @__PURE__ */ jsx182(
       Drawer,
       {
         open,
@@ -18547,13 +19255,13 @@ var AirbnbSearchableSelectInternal = ({
           }
           closeSelect();
         },
-        children: /* @__PURE__ */ jsxs119(DrawerContent, { onClose: closeSelect, lockScroll: false, children: [
-          /* @__PURE__ */ jsx178(DrawerTitle, { className: "sr-only", children: mobileTitle ?? label }),
-          /* @__PURE__ */ jsx178(DrawerDescription, { className: "sr-only", children: label }),
-          /* @__PURE__ */ jsx178("div", { className: "px-5 pb-5 pt-1", children: content })
+        children: /* @__PURE__ */ jsxs122(DrawerContent, { onClose: closeSelect, lockScroll: false, children: [
+          /* @__PURE__ */ jsx182(DrawerTitle, { className: "sr-only", children: mobileTitle ?? label }),
+          /* @__PURE__ */ jsx182(DrawerDescription, { className: "sr-only", children: label }),
+          /* @__PURE__ */ jsx182("div", { className: "px-5 pb-5 pt-1", children: content })
         ] })
       }
-    ) : open ? /* @__PURE__ */ jsx178(
+    ) : open ? /* @__PURE__ */ jsx182(
       "div",
       {
         className: cn(
@@ -18565,7 +19273,7 @@ var AirbnbSearchableSelectInternal = ({
     ) : null
   ] });
 };
-var AirbnbSearchableSelect = React72.forwardRef(
+var AirbnbSearchableSelect = React75.forwardRef(
   AirbnbSearchableSelectInternal
 );
 function AirbnbSearchableSelectContent({
@@ -18592,9 +19300,9 @@ function AirbnbSearchableSelectContent({
   onOptionClick,
   onOptionHover
 }) {
-  const listRef = React72.useRef(null);
-  const lastLoadMoreOptionsLengthRef = React72.useRef(null);
-  const previousHighlightedIndexRef = React72.useRef(highlightedIndex);
+  const listRef = React75.useRef(null);
+  const lastLoadMoreOptionsLengthRef = React75.useRef(null);
+  const previousHighlightedIndexRef = React75.useRef(highlightedIndex);
   const rowCount = options.length + (loading && options.length > 0 ? 1 : 0);
   const virtualizer = useVirtualizer3({
     count: rowCount,
@@ -18605,7 +19313,7 @@ function AirbnbSearchableSelectContent({
   const virtualItems = virtualizer.getVirtualItems();
   const emptyMessage = noOptionsMessage?.() ?? "No matches found";
   const loadingText = loadingMessage?.() ?? "Loading...";
-  React72.useEffect(() => {
+  React75.useEffect(() => {
     const lastItem = virtualItems[virtualItems.length - 1];
     const shouldLoadMore = !!lastItem && hasNextPage && !loading && lastItem.index >= options.length - LOAD_MORE_THRESHOLD;
     if (shouldLoadMore && lastLoadMoreOptionsLengthRef.current !== options.length) {
@@ -18613,23 +19321,23 @@ function AirbnbSearchableSelectContent({
       onLoadMore?.();
     }
   }, [hasNextPage, loading, onLoadMore, options.length, virtualItems]);
-  React72.useEffect(() => {
+  React75.useEffect(() => {
     const hasHighlightedIndexChanged = previousHighlightedIndexRef.current !== highlightedIndex;
     previousHighlightedIndexRef.current = highlightedIndex;
     if (highlightedIndex >= 0 && hasHighlightedIndexChanged) {
       virtualizer.scrollToIndex(highlightedIndex, { align: "auto" });
     }
   }, [highlightedIndex, virtualizer]);
-  return /* @__PURE__ */ jsxs119("div", { className: "p-2", children: [
-    /* @__PURE__ */ jsxs119("div", { className: "relative mb-2", children: [
-      /* @__PURE__ */ jsx178(
-        Search5,
+  return /* @__PURE__ */ jsxs122("div", { className: "p-2", children: [
+    /* @__PURE__ */ jsxs122("div", { className: "relative mb-2", children: [
+      /* @__PURE__ */ jsx182(
+        Search4,
         {
           "aria-hidden": "true",
           className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 text-[#9696B9]"
         }
       ),
-      /* @__PURE__ */ jsx178(
+      /* @__PURE__ */ jsx182(
         "input",
         {
           id: inputId,
@@ -18648,7 +19356,7 @@ function AirbnbSearchableSelectContent({
         }
       )
     ] }),
-    loading && options.length === 0 ? /* @__PURE__ */ jsx178("div", { className: "px-4 py-5 text-center text-base leading-6 text-[#6C6C6C]", children: loadingText }) : options.length === 0 ? /* @__PURE__ */ jsx178("div", { className: "px-4 py-5 text-center text-base leading-6 text-[#6C6C6C]", children: emptyMessage }) : /* @__PURE__ */ jsx178(
+    loading && options.length === 0 ? /* @__PURE__ */ jsx182("div", { className: "px-4 py-5 text-center text-base leading-6 text-[#6C6C6C]", children: loadingText }) : options.length === 0 ? /* @__PURE__ */ jsx182("div", { className: "px-4 py-5 text-center text-base leading-6 text-[#6C6C6C]", children: emptyMessage }) : /* @__PURE__ */ jsx182(
       "div",
       {
         id: listboxId,
@@ -18657,7 +19365,7 @@ function AirbnbSearchableSelectContent({
         "aria-labelledby": labelId,
         className: cn("overflow-y-auto outline-none", menuClassName),
         style: { height: Math.min(height, rowCount * ROW_HEIGHT) },
-        children: /* @__PURE__ */ jsx178(
+        children: /* @__PURE__ */ jsx182(
           "div",
           {
             className: "relative w-full",
@@ -18665,7 +19373,7 @@ function AirbnbSearchableSelectContent({
             children: virtualItems.map((virtualItem) => {
               const option = options[virtualItem.index];
               if (!option) {
-                return /* @__PURE__ */ jsx178(
+                return /* @__PURE__ */ jsx182(
                   "div",
                   {
                     className: "absolute left-0 top-0 flex w-full items-center px-4 text-base leading-6 text-[#6C6C6C]",
@@ -18680,7 +19388,7 @@ function AirbnbSearchableSelectContent({
               }
               const isSelected = value?.value === option.value;
               const isHighlighted = virtualItem.index === highlightedIndex;
-              return /* @__PURE__ */ jsx178(
+              return /* @__PURE__ */ jsx182(
                 "button",
                 {
                   id: getOptionId(idPrefix, virtualItem.index),
@@ -18702,7 +19410,7 @@ function AirbnbSearchableSelectContent({
                     height: `${virtualItem.size}px`,
                     transform: `translateY(${virtualItem.start}px)`
                   },
-                  children: /* @__PURE__ */ jsx178("span", { className: "truncate text-center", children: String(option.label) })
+                  children: /* @__PURE__ */ jsx182("span", { className: "truncate text-center", children: String(option.label) })
                 },
                 `${String(option.value)}-${virtualItem.index}`
               );
@@ -18731,16 +19439,16 @@ function getNextEnabledIndex(options, startIndex, step) {
 }
 
 // src/airbnb-fields/search-input/SearchInput.tsx
-import * as React73 from "react";
-import { useTranslation as useTranslation40 } from "react-i18next";
-import { Search as Search6, X as X10 } from "lucide-react";
-import { jsx as jsx179, jsxs as jsxs120 } from "react/jsx-runtime";
-var AirbnbSearchInput = React73.forwardRef(({ onReset, placeholder, wrapperClassName, ...props }, ref) => {
-  const { t } = useTranslation40();
+import * as React76 from "react";
+import { useTranslation as useTranslation42 } from "react-i18next";
+import { Search as Search5, X as X10 } from "lucide-react";
+import { jsx as jsx183, jsxs as jsxs123 } from "react/jsx-runtime";
+var AirbnbSearchInput = React76.forwardRef(({ onReset, placeholder, wrapperClassName, ...props }, ref) => {
+  const { t } = useTranslation42();
   const placeholderText = placeholder || t("search_property") + "...";
-  return /* @__PURE__ */ jsxs120("div", { className: cn("input-wrapper relative", wrapperClassName), children: [
-    /* @__PURE__ */ jsx179(Search6, { className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 transform text-[#9696B9]" }),
-    /* @__PURE__ */ jsx179(
+  return /* @__PURE__ */ jsxs123("div", { className: cn("input-wrapper relative", wrapperClassName), children: [
+    /* @__PURE__ */ jsx183(Search5, { className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 transform text-[#9696B9]" }),
+    /* @__PURE__ */ jsx183(
       "input",
       {
         ...props,
@@ -18759,13 +19467,13 @@ var AirbnbSearchInput = React73.forwardRef(({ onReset, placeholder, wrapperClass
         )
       }
     ),
-    onReset && /* @__PURE__ */ jsx179(
+    onReset && /* @__PURE__ */ jsx183(
       Button,
       {
         variant: "ghost",
         onClick: onReset,
         className: "absolute right-0 top-1/2 h-5 w-5 -translate-y-1/2 transform text-[#9696B9]",
-        children: /* @__PURE__ */ jsx179(X10, { className: "h-5 w-5" })
+        children: /* @__PURE__ */ jsx183(X10, { className: "h-5 w-5" })
       }
     )
   ] });
@@ -18837,6 +19545,7 @@ export {
   Counter,
   CounterSize,
   CreatableMultiSelect,
+  CreatableSelect,
   CustomCheckboxDropdownGroup,
   DEFAULT_DISPLAY_FORMAT,
   DEVICE_BREAKPOINTS,
@@ -18948,6 +19657,7 @@ export {
   NumberedList,
   OverlayLoader,
   Pagination,
+  PhoneInput,
   Popover,
   PopoverAnchor,
   PopoverClose,
@@ -18970,6 +19680,7 @@ export {
   ScrollBar,
   SearchButton,
   SearchInput,
+  SearchableSelect,
   Section,
   SectionGroup,
   SectionTag,
@@ -19075,13 +19786,17 @@ export {
   buttonGroupVariants,
   buttonVariants,
   calendarClassNames,
+  clearPhoneNumber,
   cn,
   compressFile,
   compressImage,
   copyToClipboard,
   createDisabledMatchers,
   emptyMediaVariants,
+  findPhoneCode,
+  findPhoneCodeOption,
   formatDate,
+  formatPhoneCodeOptionLabel,
   getErrorMessage,
   getFileSizeMB,
   getScrollableAreaState,
@@ -19090,6 +19805,7 @@ export {
   isNumeric,
   labelVariants,
   parseDate,
+  parsePhoneValueWithOptions,
   registerUiKitI18n,
   scrollToTop,
   sectionTagVariants,