@chekinapp/ui 0.0.110 → 0.0.111

package/dist/index.js

@@ -3417,18 +3417,15 @@ function useSwitchSectionActive(preloadedSectionActive, { canToggle, onToggle, o
 
 // src/hooks/use-countdown.ts
 import { useEffect as useEffect19, useState as useState15 } from "react";
-var useCountdown = ({
-  initialTime = 60,
-  enabled = true,
-  onFinish
-} = {}) => {
-  const [timeLeft, setTimeLeft] = useState15(initialTime);
+var useCountdown = ({ initialTime, enabled = true, onFinish } = {}) => {
+  const duration = initialTime ?? 60;
+  const [timeLeft, setTimeLeft] = useState15(duration);
   const [isTimerRunning, setIsTimerRunning] = useState15(enabled);
   const handleOnFinish = useEvent(onFinish);
   useEffect19(() => {
-    setTimeLeft(initialTime);
+    setTimeLeft(duration);
     setIsTimerRunning(enabled);
-  }, [initialTime, enabled]);
+  }, [duration, enabled]);
   useEffect19(() => {
     if (!isTimerRunning) return;
     const timer = setInterval(() => {
@@ -3447,12 +3444,13 @@ var useCountdown = ({
     if (timeLeft <= 0) {
       handleOnFinish();
     }
-  }, [timeLeft]);
+  }, [timeLeft, handleOnFinish]);
   const resetTimer = () => {
-    setTimeLeft(initialTime);
+    setTimeLeft(duration);
     setIsTimerRunning(enabled);
   };
   return {
+    count: timeLeft,
     timeLeft,
     isTimerRunning,
     resetTimer
@@ -11189,7 +11187,7 @@ function useErrorHandler({ onError }) {
   const handleUserMediaError = useCallback28(
     (error) => {
       console.error(error);
-      let errorText = "";
+      let errorText;
       if (error?.message === GET_USER_MEDIA_ERROR) {
         errorText = t("camera_errors.chekin_cant_use_your_camera");
         handleError({
@@ -12087,7 +12085,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-[12px]" : "top-[-10px] !pl-1 !pr-[22px]",
+          isEmpty && !isFocused ? "top-[12px]" : "top-[-10px] !px-1",
           isFocused && "text-[var(--chekin-color-brand-blue)]",
           raised && invalid && "text-[var(--error-message-color)]",
           readOnly && "cursor-default",
@@ -12102,8 +12100,8 @@ function Fieldset({
               id: labelId,
               htmlFor,
               className: cn(
-                "block cursor-[inherit] truncate font-medium transition-all duration-100 ease-in",
-                raised ? "text-[14px]" : "text-[16px]"
+                "block cursor-[inherit] truncate transition-all duration-100 ease-in",
+                raised ? "text-[14px] font-semibold" : "text-[16px] font-medium"
               ),
               children: label
             }
@@ -12141,7 +12139,16 @@ function Fieldset({
               !label && "w-0"
             ),
             children: [
-              showLegendText && /* @__PURE__ */ jsx142("span", { className: "visible inline-block pr-[6px] text-[14px] font-medium opacity-0", children: legend || label }),
+              showLegendText && /* @__PURE__ */ jsx142(
+                "span",
+                {
+                  className: cn(
+                    "visible inline-block px-1 text-[14px] opacity-0",
+                    raised ? "font-semibold" : "font-medium"
+                  ),
+                  children: legend || label
+                }
+              ),
               tooltip && /* @__PURE__ */ jsx142("span", { className: "visible inline-block w-[20px] opacity-0", children: /* @__PURE__ */ jsx142("span", { className: "inline-block h-4 w-4" }) })
             ]
           }
@@ -12248,7 +12255,7 @@ var Input = React44.forwardRef(
       "div",
       {
         className: cn(
-          "relative block w-full max-w-[var(--field-max-width,296px)] min-h-[68px]",
+          "relative block w-full max-w-[var(--field-max-width,296px)] min-h-[var(--field-min-height,48px)]",
           disabled && "cursor-not-allowed opacity-50",
           loading && "cursor-progress opacity-50",
           wrapperClassName,
@@ -12268,7 +12275,7 @@ var Input = React44.forwardRef(
             {
               className: cn(
                 "relative block w-full",
-                readOnly && "bg-[var(--chekin-color-surface-input-empty)]",
+                readOnly && "bg-[var(--empty-field-background)]",
                 fieldClassName
               ),
               children: [
@@ -12320,7 +12327,7 @@ var Input = React44.forwardRef(
                       className: cn(
                         "m-0 box-border h-12 w-full rounded-[6px] border-0 px-4 text-[16px] font-medium leading-5 text-[var(--chekin-color-brand-navy)] outline-none transition-colors duration-200 [text-overflow:ellipsis] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none",
                         "placeholder:font-medium placeholder:text-[var(--chekin-color-gray-1)] placeholder:opacity-100",
-                        isEmpty && !isFocused ? "bg-[var(--chekin-color-surface-input-empty)]" : "bg-transparent",
+                        isEmpty && !isFocused ? "bg-[var(--empty-field-background)]" : "bg-transparent",
                         isEmpty && "text-[var(--chekin-color-gray-1)]",
                         inputType === "password" && "[&:not(:placeholder-shown)]:font-bold [&:not(:placeholder-shown)]:tracking-[2px]",
                         (disabled || readOnly) && "cursor-not-allowed",
@@ -12453,14 +12460,14 @@ function SelectFieldShell({
       onBlur,
       className: cn(
         "relative w-full max-w-[var(--field-max-width,296px)]",
-        disabled && "cursor-not-allowed opacity-50",
-        loading && "cursor-progress",
+        disabled && !loading && "cursor-not-allowed opacity-50",
+        loading && "cursor-progress opacity-50",
         className
       ),
       style: wrapperWidth ? { width: wrapperWidth } : void 0,
       children: [
         name && /* @__PURE__ */ jsx144("input", { type: "hidden", name, value: hiddenValue ?? "" }),
-        /* @__PURE__ */ jsxs91("div", { className: "relative min-h-[68px] w-full", children: [
+        /* @__PURE__ */ jsxs91("div", { className: "relative min-h-[var(--field-min-height,48px)] w-full", children: [
           topLabel && /* @__PURE__ */ jsx144(
             "label",
             {
@@ -12494,13 +12501,19 @@ function getOptionIndex(options, option) {
   if (!option) return -1;
   return options.findIndex((item) => item.value === option.value);
 }
-function getFirstEnabledOptionIndex(options) {
-  return options.findIndex((option) => !option.isDisabled);
+function isOptionEnabled(option, isOptionDisabled) {
+  if (!option) return false;
+  if (option.isDisabled) return false;
+  if (isOptionDisabled?.(option)) return false;
+  return true;
+}
+function getFirstEnabledOptionIndex(options, isOptionDisabled) {
+  return options.findIndex((option) => isOptionEnabled(option, isOptionDisabled));
 }
-function getNextEnabledOptionIndex(options, startIndex, step) {
+function getNextEnabledOptionIndex(options, startIndex, step, isOptionDisabled) {
   let nextIndex = startIndex;
   while (nextIndex >= 0 && nextIndex < options.length) {
-    if (!options[nextIndex]?.isDisabled) return nextIndex;
+    if (isOptionEnabled(options[nextIndex], isOptionDisabled)) return nextIndex;
     nextIndex += step;
   }
   return -1;
@@ -12531,6 +12544,7 @@ function SelectMenu({
   onOptionHover,
   onKeyDown,
   disabled,
+  isOptionDisabled,
   menuClassName,
   listRef,
   selectedOptionRef,
@@ -12565,7 +12579,9 @@ function SelectMenu({
           const isSelected = isOptionSelected(option, selectedValue, selectedValues);
           const isHighlighted = index === highlightedIndex;
           const optionKey = `${String(option.value)}-${index}`;
-          const isOptionDisabled = Boolean(disabled || option.isDisabled);
+          const isOptionDisabledFlag = Boolean(
+            disabled || option.isDisabled || isOptionDisabled?.(option)
+          );
           return /* @__PURE__ */ jsxs92(
             "button",
             {
@@ -12576,9 +12592,9 @@ function SelectMenu({
               type: "button",
               role: "option",
               "aria-selected": isSelected,
-              "aria-disabled": isOptionDisabled,
+              "aria-disabled": isOptionDisabledFlag,
               tabIndex: -1,
-              disabled: isOptionDisabled,
+              disabled: isOptionDisabledFlag,
               onClick: () => onOptionClick(option),
               onMouseMove: () => onOptionHover?.(index),
               className: cn(
@@ -12586,7 +12602,7 @@ function SelectMenu({
                 "last: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"
+                isOptionDisabledFlag && "cursor-default opacity-30"
               ),
               children: [
                 /* @__PURE__ */ jsx145("span", { className: "block break-words", children: option.label }),
@@ -12746,25 +12762,22 @@ function SelectTrigger({
       onBlur,
       className: cn(
         "relative m-0 box-border flex h-12 w-full cursor-pointer items-center justify-between gap-2 rounded-[6px] border-0 px-4 text-left text-[16px] font-medium leading-5 outline-none transition-colors duration-200",
-        isEmpty ? "bg-[var(--chekin-color-surface-input-empty)] text-[var(--chekin-color-gray-1)]" : "bg-transparent text-[var(--chekin-color-brand-navy)]",
-        disabled && "cursor-not-allowed opacity-50",
-        loading && "cursor-progress"
+        isEmpty ? "bg-[var(--empty-field-background)] text-[var(--chekin-color-gray-1)]" : "bg-transparent text-[var(--chekin-color-brand-navy)]",
+        disabled && !loading && "cursor-not-allowed opacity-50",
+        loading && "!cursor-progress"
       ),
       children: [
         /* @__PURE__ */ jsx148("span", { id: valueId, className: "block min-w-0 flex-1 truncate text-left", children: valueLabel ?? (isOpen ? placeholder : null) }),
-        /* @__PURE__ */ jsxs95("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: [
-          loading && /* @__PURE__ */ jsx148(ThreeDotsLoader, { height: 18, width: 18 }),
-          /* @__PURE__ */ jsx148(
-            ChevronDown2,
-            {
-              size: 16,
-              className: cn(
-                "transition-transform duration-200",
-                isOpen && "rotate-180 text-[var(--chekin-color-brand-blue)]"
-              )
-            }
-          )
-        ] })
+        /* @__PURE__ */ jsx148("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ jsx148(
+          ChevronDown2,
+          {
+            size: 16,
+            className: cn(
+              "transition-transform duration-200",
+              isOpen && "rotate-180 text-[var(--chekin-color-brand-blue)]"
+            )
+          }
+        ) })
       ]
     }
   );
@@ -12822,9 +12835,9 @@ function ComboboxTrigger({
       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",
+        isEmpty && !isFocused ? "bg-[var(--empty-field-background)]" : "bg-transparent",
+        disabled && !loading && "cursor-not-allowed",
+        loading && "!cursor-progress",
         containerClassName
       ),
       children: [
@@ -12857,7 +12870,8 @@ function ComboboxTrigger({
                   className: cn(
                     "m-0 box-border min-w-0 flex-1 border-0 bg-transparent p-0 text-[16px] font-medium leading-5 text-[var(--chekin-color-brand-navy)] outline-none placeholder:text-[var(--chekin-color-gray-1)]",
                     isMulti && "min-w-[40px]",
-                    isBlocked && "cursor-not-allowed",
+                    isBlocked && !loading && "cursor-not-allowed",
+                    loading && "!cursor-progress",
                     inputClassName
                   )
                 }
@@ -12866,7 +12880,6 @@ function ComboboxTrigger({
           }
         ),
         /* @__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",
             {
@@ -13155,7 +13168,7 @@ function SearchableSelectInternal({
             legend: typeof label === "string" ? label : void 0,
             label,
             tooltip,
-            labelClassName: "cursor-pointer"
+            labelClassName: loading ? void 0 : "cursor-pointer"
           }
         ),
         /* @__PURE__ */ jsxs97(
@@ -13450,6 +13463,7 @@ function SelectInternal({
   width,
   noOptionsMessage,
   filterOption = defaultFilterOption,
+  isOptionDisabled,
   helperText,
   clearable = true,
   isCreatable = false,
@@ -13512,9 +13526,9 @@ function SelectInternal({
     }
     setHighlightedIndex((current) => {
       if (current >= 0 && current < filteredOptions.length) return current;
-      return getFirstEnabledOptionIndex(filteredOptions);
+      return getFirstEnabledOptionIndex(filteredOptions, isOptionDisabled);
     });
-  }, [isOpen, filteredOptions]);
+  }, [isOpen, filteredOptions, isOptionDisabled]);
   React50.useEffect(() => {
     if (!isOpen) return;
     if (highlightedIndex < 0) return;
@@ -13528,8 +13542,8 @@ function SelectInternal({
     return () => window.cancelAnimationFrame(frame);
   }, [isOpen, isMobile3]);
   const commitSelection = (option) => {
-    if (option.isDisabled) return;
-    onChange(option);
+    if (!isOptionEnabled(option, isOptionDisabled)) return;
+    onChange(option, { action: "select" });
     setInputValue(resolveLabel(option));
     setIsOpen(false);
     setIsFocused(false);
@@ -13538,7 +13552,7 @@ function SelectInternal({
   const commitCreate = () => {
     if (!canCreateNewOption) return;
     const newOption = onCreateOption?.(trimmedInput) ?? { value: trimmedInput, label: trimmedInput };
-    onChange(newOption);
+    onChange(newOption, { action: "create" });
     setInputValue(resolveLabel(newOption));
     setIsOpen(false);
     setIsFocused(false);
@@ -13547,7 +13561,7 @@ function SelectInternal({
   const clearSelection = (event) => {
     event.stopPropagation();
     if (isBlocked) return;
-    onChange(null);
+    onChange(null, { action: "clear" });
     setInputValue("");
     inputRef.current?.focus();
   };
@@ -13570,7 +13584,12 @@ function SelectInternal({
         setIsOpen(true);
         return;
       }
-      const next = getNextEnabledOptionIndex(filteredOptions, highlightedIndex + 1, 1);
+      const next = getNextEnabledOptionIndex(
+        filteredOptions,
+        highlightedIndex + 1,
+        1,
+        isOptionDisabled
+      );
       if (next >= 0) setHighlightedIndex(next);
       return;
     }
@@ -13580,7 +13599,12 @@ function SelectInternal({
         setIsOpen(true);
         return;
       }
-      const next = getNextEnabledOptionIndex(filteredOptions, highlightedIndex - 1, -1);
+      const next = getNextEnabledOptionIndex(
+        filteredOptions,
+        highlightedIndex - 1,
+        -1,
+        isOptionDisabled
+      );
       if (next >= 0) setHighlightedIndex(next);
       return;
     }
@@ -13588,7 +13612,7 @@ function SelectInternal({
       if (!isOpen) return;
       event.preventDefault();
       const option = filteredOptions[highlightedIndex];
-      if (option && !option.isDisabled) {
+      if (option && isOptionEnabled(option, isOptionDisabled)) {
         commitSelection(option);
       } else if (canCreateNewOption) {
         commitCreate();
@@ -13715,6 +13739,7 @@ function SelectInternal({
                   onOptionClick: commitSelection,
                   onOptionHover: setHighlightedIndex,
                   disabled: isBlocked,
+                  isOptionDisabled,
                   menuClassName,
                   listRef,
                   selectedOptionRef: (index, node) => {
@@ -13809,6 +13834,7 @@ function MultiSelectInternal({
   width,
   noOptionsMessage,
   filterOption,
+  isOptionDisabled,
   closeMenuOnSelect = false,
   renderChip,
   helperText,
@@ -13872,9 +13898,9 @@ function MultiSelectInternal({
     }
     setHighlightedIndex((current) => {
       if (current >= 0 && current < filteredOptions.length) return current;
-      return getFirstEnabledOptionIndex(filteredOptions);
+      return getFirstEnabledOptionIndex(filteredOptions, isOptionDisabled);
     });
-  }, [isOpen, filteredOptions]);
+  }, [isOpen, filteredOptions, isOptionDisabled]);
   React52.useEffect(() => {
     if (!isOpen || !isMobile3) return;
     const frame = window.requestAnimationFrame(
@@ -13888,10 +13914,10 @@ function MultiSelectInternal({
     setIsFocused(true);
   };
   const toggleOption = (option) => {
-    if (option.isDisabled) return;
+    if (!isOptionEnabled(option, isOptionDisabled)) return;
     const exists = isValueSelected(selectedValues, option);
     const next = exists ? selectedValues.filter((item) => item.value !== option.value) : [...selectedValues, option];
-    onChange(next);
+    onChange(next, { action: exists ? "deselect" : "select" });
     clearSearch();
     if (closeMenuOnSelect) {
       setIsOpen(false);
@@ -13901,18 +13927,21 @@ function MultiSelectInternal({
   };
   const removeOption = (option) => {
     if (isBlocked) return;
-    onChange(selectedValues.filter((item) => item.value !== option.value));
+    onChange(
+      selectedValues.filter((item) => item.value !== option.value),
+      { action: "deselect" }
+    );
     inputRef.current?.focus();
   };
   const clearAll = () => {
     if (isBlocked) return;
-    onChange([]);
+    onChange([], { action: "clear" });
     inputRef.current?.focus();
   };
   const createOption = React52.useCallback(() => {
     if (!canCreateNewOption) return;
     const newOption = onCreateOption?.(trimmedSearch) ?? { value: trimmedSearch, label: trimmedSearch };
-    onChange([...selectedValues, newOption]);
+    onChange([...selectedValues, newOption], { action: "create" });
     clearSearch();
     inputRef.current?.focus();
     if (closeMenuOnSelect) setIsOpen(false);
@@ -13929,7 +13958,7 @@ function MultiSelectInternal({
   const handleInputKeyDown = (event) => {
     if (event.key === "Backspace" && !searchValue && selectedValues.length > 0) {
       event.preventDefault();
-      onChange(selectedValues.slice(0, -1));
+      onChange(selectedValues.slice(0, -1), { action: "deselect" });
       return;
     }
     if (event.key === "ArrowDown") {
@@ -13938,7 +13967,12 @@ function MultiSelectInternal({
         openMenu();
         return;
       }
-      const next = getNextEnabledOptionIndex(filteredOptions, highlightedIndex + 1, 1);
+      const next = getNextEnabledOptionIndex(
+        filteredOptions,
+        highlightedIndex + 1,
+        1,
+        isOptionDisabled
+      );
       if (next >= 0) setHighlightedIndex(next);
       return;
     }
@@ -13948,7 +13982,12 @@ function MultiSelectInternal({
         openMenu();
         return;
       }
-      const next = getNextEnabledOptionIndex(filteredOptions, highlightedIndex - 1, -1);
+      const next = getNextEnabledOptionIndex(
+        filteredOptions,
+        highlightedIndex - 1,
+        -1,
+        isOptionDisabled
+      );
       if (next >= 0) setHighlightedIndex(next);
       return;
     }
@@ -13956,7 +13995,7 @@ function MultiSelectInternal({
       if (!isOpen) return;
       event.preventDefault();
       const option = filteredOptions[highlightedIndex];
-      if (option && !option.isDisabled) {
+      if (option && isOptionEnabled(option, isOptionDisabled)) {
         toggleOption(option);
       } else if (canCreateNewOption) {
         createOption();
@@ -14104,6 +14143,7 @@ function MultiSelectInternal({
                   onOptionClick: toggleOption,
                   onOptionHover: setHighlightedIndex,
                   disabled: isBlocked,
+                  isOptionDisabled,
                   menuClassName,
                   listRef,
                   selectedOptionRef: (index, node) => {
@@ -14622,17 +14662,79 @@ var InfiniteScrollSelect = React54.forwardRef(
 );
 
 // src/dashboard/textarea/Textarea.tsx
-import * as React55 from "react";
+import * as React56 from "react";
 import { useTranslation as useTranslation36 } from "react-i18next";
+
+// src/dashboard/textarea/useTextareaValueState.ts
+import * as React55 from "react";
+var isEmptyValue2 = (value) => {
+  if (value === void 0 || value === null) return true;
+  return String(value).length === 0;
+};
+var getTextareaEmptyState = ({
+  empty,
+  defaultValue,
+  value
+}) => {
+  if (typeof empty !== "undefined") return empty;
+  if (typeof value !== "undefined") return isEmptyValue2(value);
+  return isEmptyValue2(defaultValue);
+};
+function useTextareaValueState({
+  empty,
+  value,
+  defaultValue
+}) {
+  const textareaRef = React55.useRef(null);
+  const isControlled = typeof empty !== "undefined" || typeof value !== "undefined";
+  const propsAreEmpty = getTextareaEmptyState({ empty, value, defaultValue });
+  const [nativeIsEmpty, setNativeIsEmpty] = React55.useState(propsAreEmpty);
+  const isEmpty = isControlled ? propsAreEmpty : nativeIsEmpty;
+  const setNativeValue = React55.useCallback(
+    (nextValue) => {
+      if (isControlled) return;
+      const nextIsEmpty = nextValue.length === 0;
+      setNativeIsEmpty(
+        (prevIsEmpty) => prevIsEmpty === nextIsEmpty ? prevIsEmpty : nextIsEmpty
+      );
+    },
+    [isControlled]
+  );
+  const syncValueState = React55.useCallback(() => {
+    if (!textareaRef.current) return;
+    setNativeValue(textareaRef.current.value);
+  }, [setNativeValue]);
+  React55.useLayoutEffect(() => {
+    syncValueState();
+  });
+  React55.useEffect(() => {
+    const textarea = textareaRef.current;
+    const form = textarea?.form;
+    if (isControlled || !form) return;
+    const handleReset = () => {
+      if (typeof window !== "undefined" && window.requestAnimationFrame) {
+        window.requestAnimationFrame(syncValueState);
+        return;
+      }
+      globalThis.setTimeout(syncValueState, 0);
+    };
+    form.addEventListener("reset", handleReset);
+    return () => form.removeEventListener("reset", handleReset);
+  }, [isControlled, syncValueState]);
+  return {
+    textareaRef,
+    isControlled,
+    isEmpty,
+    setNativeValue,
+    syncValueState
+  };
+}
+
+// src/dashboard/textarea/Textarea.tsx
 import { jsx as jsx159, jsxs as jsxs104 } from "react/jsx-runtime";
 var LINE_HEIGHT = 20;
 var VERTICAL_PADDING = 32;
-function getEmptyState(empty, value, defaultValue) {
-  if (typeof empty === "boolean") return empty;
-  if (value !== void 0) return !String(value);
-  return !defaultValue;
-}
-var Textarea = React55.forwardRef(function Textarea2({
+var Textarea = React56.forwardRef(function Textarea2({
   className,
   textareaClassName,
   label,
@@ -14653,18 +14755,20 @@ var Textarea = React55.forwardRef(function Textarea2({
   value,
   defaultValue,
   onInput,
+  onChange,
+  onFocus,
+  onBlur,
   ...textareaProps
 }, ref) {
-  const innerRef = React55.useRef(null);
-  const combinedRef = useCombinedRef(ref, innerRef);
-  const reactId = React55.useId();
+  const { textareaRef, isControlled, isEmpty, setNativeValue, syncValueState } = useTextareaValueState({ empty, value, defaultValue });
+  const combinedRef = useCombinedRef(ref, textareaRef);
+  const reactId = React56.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;
+  const resize = React56.useCallback(() => {
+    const el = textareaRef.current;
     if (!el || !autosize) return;
     el.style.height = "auto";
     const minHeight = minRows * LINE_HEIGHT + VERTICAL_PADDING;
@@ -14672,14 +14776,30 @@ var Textarea = React55.forwardRef(function Textarea2({
     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(() => {
+  }, [autosize, maxRows, minRows, textareaRef]);
+  React56.useLayoutEffect(() => {
     resize();
   }, [resize, value]);
   const handleInput = (event) => {
     resize();
     onInput?.(event);
   };
+  const handleChange = (event) => {
+    if (readOnly || disabled) return;
+    if (!isControlled) {
+      setNativeValue(event.currentTarget.value);
+    }
+    onChange?.(event);
+  };
+  const handleFocus = (event) => {
+    if (readOnly || disabled) return;
+    onFocus?.(event);
+    syncValueState();
+  };
+  const handleBlur = (event) => {
+    onBlur?.(event);
+    syncValueState();
+  };
   return /* @__PURE__ */ jsxs104(
     "div",
     {
@@ -14715,11 +14835,14 @@ var Textarea = React55.forwardRef(function Textarea2({
             "aria-invalid": isInvalid,
             "aria-busy": loading,
             onInput: handleInput,
+            onChange: handleChange,
+            onFocus: handleFocus,
+            onBlur: handleBlur,
             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)]",
+              isEmpty && "border-[var(--chekin-color-gray-3)] bg-[var(--empty-field-background)] 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",
@@ -14746,12 +14869,12 @@ var Textarea = React55.forwardRef(function Textarea2({
 });
 
 // src/dashboard/datepicker/Datepicker.tsx
-import * as React57 from "react";
+import * as React58 from "react";
 import { ChevronDown as ChevronDown3 } from "lucide-react";
 import { useTranslation as useTranslation37 } from "react-i18next";
 
 // src/airbnb-fields/datepicker/useDatePickerWheel.ts
-import * as React56 from "react";
+import * as React57 from "react";
 
 // src/airbnb-fields/datepicker/datePicker.utils.ts
 var DISPLAY_PAD_LENGTH = 2;
@@ -14902,21 +15025,21 @@ function useDatePickerWheel({
   minDate,
   maxDate
 }) {
-  const years = React56.useMemo(() => getYearRange(minDate, maxDate), [maxDate, minDate]);
-  const [draftDate, setDraftDate] = React56.useState(
+  const years = React57.useMemo(() => getYearRange(minDate, maxDate), [maxDate, minDate]);
+  const [draftDate, setDraftDate] = React57.useState(
     () => resolveInitialDate({ value, defaultValue, minDate, maxDate })
   );
   const draftYear = draftDate.getFullYear();
   const draftMonth = draftDate.getMonth();
-  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(
+  const [monthScrollTop, setMonthScrollTop] = React57.useState(0);
+  const [dayScrollTop, setDayScrollTop] = React57.useState(0);
+  const [yearScrollTop, setYearScrollTop] = React57.useState(0);
+  const monthListRef = React57.useRef(null);
+  const dayListRef = React57.useRef(null);
+  const yearListRef = React57.useRef(null);
+  const settleTimeoutsRef = React57.useRef({});
+  const animationFramesRef = React57.useRef({});
+  const columnRefs = React57.useMemo(
     () => ({
       month: monthListRef,
       day: dayListRef,
@@ -14924,7 +15047,7 @@ function useDatePickerWheel({
     }),
     []
   );
-  const setColumnScrollTop = React56.useCallback(
+  const setColumnScrollTop = React57.useCallback(
     (column, nextScrollTop) => {
       if (column === "month") {
         setMonthScrollTop(nextScrollTop);
@@ -14938,19 +15061,19 @@ function useDatePickerWheel({
     },
     []
   );
-  const clearSettleTimeout = React56.useCallback((column) => {
+  const clearSettleTimeout = React57.useCallback((column) => {
     const timeoutId = settleTimeoutsRef.current[column];
     if (timeoutId === void 0) return;
     window.clearTimeout(timeoutId);
     delete settleTimeoutsRef.current[column];
   }, []);
-  const clearAnimationFrame = React56.useCallback((column) => {
+  const clearAnimationFrame = React57.useCallback((column) => {
     const frameId = animationFramesRef.current[column];
     if (frameId === void 0) return;
     window.cancelAnimationFrame(frameId);
     delete animationFramesRef.current[column];
   }, []);
-  React56.useEffect(
+  React57.useEffect(
     () => () => {
       ["month", "day", "year"].forEach((column) => {
         clearSettleTimeout(column);
@@ -14959,22 +15082,22 @@ function useDatePickerWheel({
     },
     [clearAnimationFrame, clearSettleTimeout]
   );
-  React56.useEffect(() => {
+  React57.useEffect(() => {
     if (isOpen) return;
     setDraftDate(resolveInitialDate({ value, defaultValue, minDate, maxDate }));
   }, [defaultValue, isOpen, maxDate, minDate, value]);
-  const months = React56.useMemo(
+  const months = React57.useMemo(
     () => getAllowedMonths(draftYear, minDate, maxDate),
     [draftYear, maxDate, minDate]
   );
-  const days = React56.useMemo(
+  const days = React57.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 = React56.useCallback(
+  const syncScrollPositions = React57.useCallback(
     (nextDate, behavior = "auto") => {
       const nextMonths = getAllowedMonths(nextDate.getFullYear(), minDate, maxDate);
       const nextMonthIndex = nextMonths.findIndex((month) => month === nextDate.getMonth());
@@ -14998,7 +15121,7 @@ function useDatePickerWheel({
     },
     [maxDate, minDate, years]
   );
-  React56.useLayoutEffect(() => {
+  React57.useLayoutEffect(() => {
     if (!isOpen) return;
     const nextDate = resolveInitialDate({ value, defaultValue, minDate, maxDate });
     setDraftDate(nextDate);
@@ -15009,7 +15132,7 @@ function useDatePickerWheel({
       window.cancelAnimationFrame(frameId);
     };
   }, [defaultValue, isOpen, maxDate, minDate, syncScrollPositions, value]);
-  const updateDraftDate = React56.useCallback(
+  const updateDraftDate = React57.useCallback(
     (column, targetIndex, behavior = "smooth") => {
       const currentDate = stripTime(draftDate);
       const currentYear = currentDate.getFullYear();
@@ -15054,7 +15177,7 @@ function useDatePickerWheel({
     },
     [days, draftDate, maxDate, minDate, months, syncScrollPositions, years]
   );
-  const settleColumnScroll = React56.useCallback(
+  const settleColumnScroll = React57.useCallback(
     (column) => {
       const list = columnRefs[column].current;
       if (!list) return;
@@ -15067,7 +15190,7 @@ function useDatePickerWheel({
     },
     [columnRefs, days.length, months.length, updateDraftDate, years.length]
   );
-  const scheduleScrollSettle = React56.useCallback(
+  const scheduleScrollSettle = React57.useCallback(
     (column) => {
       clearSettleTimeout(column);
       settleTimeoutsRef.current[column] = window.setTimeout(() => {
@@ -15076,7 +15199,7 @@ function useDatePickerWheel({
     },
     [clearSettleTimeout, settleColumnScroll]
   );
-  const handleColumnScroll = React56.useCallback(
+  const handleColumnScroll = React57.useCallback(
     (column) => {
       const list = columnRefs[column].current;
       if (!list) return;
@@ -15090,13 +15213,13 @@ function useDatePickerWheel({
     },
     [clearAnimationFrame, columnRefs, scheduleScrollSettle, setColumnScrollTop]
   );
-  const handleOptionSelect = React56.useCallback(
+  const handleOptionSelect = React57.useCallback(
     (column, targetIndex) => {
       updateDraftDate(column, targetIndex, "smooth");
     },
     [updateDraftDate]
   );
-  const focusAdjacentColumn = React56.useCallback(
+  const focusAdjacentColumn = React57.useCallback(
     (column, direction) => {
       const order = ["month", "day", "year"];
       const currentIndex = order.indexOf(column);
@@ -15106,7 +15229,7 @@ function useDatePickerWheel({
     },
     [columnRefs]
   );
-  const handleColumnKeyDown = React56.useCallback(
+  const handleColumnKeyDown = React57.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;
@@ -15428,7 +15551,7 @@ function dateFromParts(day, monthIndex, year) {
   if (!isValidCalendarDate(yearNum, monthIndex, dayNum)) return null;
   return new Date(yearNum, monthIndex, dayNum);
 }
-var Datepicker = React57.forwardRef(
+var Datepicker = React58.forwardRef(
   function Datepicker2({
     label,
     value,
@@ -15458,14 +15581,14 @@ var Datepicker = React57.forwardRef(
     maxDate,
     formatValue
   }, ref) {
-    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 containerRef = React58.useRef(null);
+    const dayInputRef = React58.useRef(null);
+    const monthInputRef = React58.useRef(null);
+    const monthListRef = React58.useRef(null);
+    const yearInputRef = React58.useRef(null);
+    const mobileTriggerRef = React58.useRef(null);
+    const wheelBaseId = React58.useId();
+    const reactId = React58.useId();
     const baseId = name ?? `dash-datepicker-${reactId}`;
     const dayId = `${baseId}-day`;
     const monthId = `${baseId}-month`;
@@ -15473,51 +15596,51 @@ var Datepicker = React57.forwardRef(
     const labelId = `${baseId}-label`;
     const errorId = `${baseId}-error`;
     const { t } = useTranslation37();
-    const resolvedMonthLabels = React57.useMemo(
+    const resolvedMonthLabels = React58.useMemo(
       () => monthLabels ?? getMonthLabels2(locale),
       [locale, monthLabels]
     );
     const resolvedMonthPlaceholder = monthPlaceholder ?? t("month");
     const resolvedDoneLabel = doneLabel ?? t("done");
     const isControlled = value !== void 0;
-    const initialParts = React57.useMemo(
+    const initialParts = React58.useMemo(
       () => partsFromDate(value ?? defaultValue ?? null),
       // eslint-disable-next-line react-hooks/exhaustive-deps
       []
     );
-    const [day, setDay] = React57.useState(initialParts.day);
-    const [monthIndex, setMonthIndex] = React57.useState(
+    const [day, setDay] = React58.useState(initialParts.day);
+    const [monthIndex, setMonthIndex] = React58.useState(
       initialParts.monthIndex
     );
-    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 [year, setYear] = React58.useState(initialParts.year);
+    const [isMonthOpen, setIsMonthOpen] = React58.useState(false);
+    const [isWheelOpen, setIsWheelOpen] = React58.useState(false);
+    const [focusedField, setFocusedField] = React58.useState(null);
+    const [monthInputValue, setMonthInputValue] = React58.useState("");
+    const [monthHighlightIndex, setMonthHighlightIndex] = React58.useState(-1);
     const isMobile3 = useIsMobile();
-    React57.useImperativeHandle(ref, () => dayInputRef.current, []);
-    React57.useEffect(() => {
+    React58.useImperativeHandle(ref, () => dayInputRef.current, []);
+    React58.useEffect(() => {
       if (!isControlled) return;
       const next = partsFromDate(value ?? null);
       setDay(next.day);
       setMonthIndex(next.monthIndex);
       setYear(next.year);
     }, [isControlled, value]);
-    React57.useEffect(() => {
+    React58.useEffect(() => {
       if (focusedField === "month") return;
       setMonthInputValue(
         monthIndex !== null ? resolvedMonthLabels[monthIndex] ?? "" : ""
       );
     }, [monthIndex, resolvedMonthLabels, focusedField]);
-    const filteredMonths = React57.useMemo(() => {
+    const filteredMonths = React58.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]);
-    React57.useEffect(() => {
+    React58.useEffect(() => {
       if (!isMonthOpen) {
         setMonthHighlightIndex(-1);
         return;
@@ -15538,7 +15661,7 @@ var Datepicker = React57.forwardRef(
     const isFocused = focusedField !== null || isMonthOpen || isWheelOpen;
     const isInvalid = Boolean(invalid || error);
     const wrapperWidth = toCssSize(width);
-    const currentDate = React57.useMemo(
+    const currentDate = React58.useMemo(
       () => dateFromParts(day, monthIndex, year),
       [day, monthIndex, year]
     );
@@ -15547,7 +15670,7 @@ var Datepicker = React57.forwardRef(
       onOutsideClick: () => setIsMonthOpen(false),
       isDisabled: !isMonthOpen || isMobile3
     });
-    const emitChange = React57.useCallback(
+    const emitChange = React58.useCallback(
       (nextDay, nextMonth, nextYear) => {
         if (!onChange) return;
         const date = dateFromParts(nextDay, nextMonth, nextYear);
@@ -15582,7 +15705,7 @@ var Datepicker = React57.forwardRef(
       setIsMonthOpen(true);
       setMonthHighlightIndex(0);
     };
-    const commitMonthInput = React57.useCallback(() => {
+    const commitMonthInput = React58.useCallback(() => {
       const query = monthInputValue.trim().toLowerCase();
       if (!query) {
         if (monthIndex !== null) {
@@ -15642,15 +15765,15 @@ var Datepicker = React57.forwardRef(
         setIsMonthOpen(false);
       }
     };
-    const focusDayInput = React57.useCallback(() => {
+    const focusDayInput = React58.useCallback(() => {
       if (isBlocked || readOnly) return;
       dayInputRef.current?.focus();
     }, [isBlocked, readOnly]);
-    const openWheel = React57.useCallback(() => {
+    const openWheel = React58.useCallback(() => {
       if (isBlocked || readOnly) return;
       setIsWheelOpen(true);
     }, [isBlocked, readOnly]);
-    const closeWheel = React57.useCallback(() => {
+    const closeWheel = React58.useCallback(() => {
       setIsWheelOpen(false);
       mobileTriggerRef.current?.focus();
     }, []);
@@ -15662,7 +15785,7 @@ var Datepicker = React57.forwardRef(
       minDate,
       maxDate
     });
-    const handleWheelDone = React57.useCallback(() => {
+    const handleWheelDone = React58.useCallback(() => {
       const next = wheel.draftDate;
       setDay(String(next.getDate()));
       setMonthIndex(next.getMonth());
@@ -15671,7 +15794,7 @@ var Datepicker = React57.forwardRef(
       setIsWheelOpen(false);
       mobileTriggerRef.current?.focus();
     }, [name, onChange, wheel.draftDate]);
-    const defaultFormatValue = React57.useCallback(
+    const defaultFormatValue = React58.useCallback(
       (date) => `${date.getDate()} ${resolvedMonthLabels[date.getMonth()]} ${date.getFullYear()}`,
       [resolvedMonthLabels]
     );
@@ -15723,11 +15846,11 @@ var Datepicker = React57.forwardRef(
         className: cn(
           "relative w-full max-w-[var(--field-max-width,296px)]",
           disabled && "cursor-not-allowed opacity-50",
-          loading && "cursor-progress",
+          loading && "cursor-progress opacity-50",
           className
         ),
         style: wrapperWidth ? { width: wrapperWidth } : void 0,
-        children: /* @__PURE__ */ jsxs107("div", { className: "relative min-h-[68px] w-full", children: [
+        children: /* @__PURE__ */ jsxs107("div", { className: "relative min-h-[var(--field-min-height,48px)] w-full", children: [
           /* @__PURE__ */ jsxs107("div", { className: "relative w-full", children: [
             isMobile3 ? /* @__PURE__ */ jsxs107(
               "button",
@@ -15744,24 +15867,21 @@ var Datepicker = React57.forwardRef(
                 onClick: openWheel,
                 className: cn(
                   "relative m-0 box-border flex h-12 w-full cursor-pointer items-center justify-between gap-2 rounded-[6px] border-0 px-4 text-left text-[16px] font-medium leading-5 outline-none transition-colors duration-200",
-                  triggerText ? "bg-transparent text-[var(--chekin-color-brand-navy)]" : "bg-[var(--chekin-color-surface-input-empty)] text-[var(--chekin-color-gray-1)]",
+                  triggerText ? "bg-transparent text-[var(--chekin-color-brand-navy)]" : "bg-[var(--empty-field-background)] text-[var(--chekin-color-gray-1)]",
                   (isBlocked || readOnly) && "cursor-not-allowed"
                 ),
                 children: [
                   /* @__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,
-                        className: cn(
-                          "transition-transform duration-200",
-                          isWheelOpen && "rotate-180 text-[var(--chekin-color-brand-blue)]"
-                        )
-                      }
-                    )
-                  ] })
+                  /* @__PURE__ */ jsx162("span", { className: "pointer-events-none flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ jsx162(
+                    ChevronDown3,
+                    {
+                      size: 16,
+                      className: cn(
+                        "transition-transform duration-200",
+                        isWheelOpen && "rotate-180 text-[var(--chekin-color-brand-blue)]"
+                      )
+                    }
+                  ) })
                 ]
               }
             ) : /* @__PURE__ */ jsxs107(
@@ -15854,45 +15974,35 @@ var Datepicker = React57.forwardRef(
                       }
                     )
                   ] }),
-                  /* @__PURE__ */ jsxs107("div", { className: "flex h-full min-w-0 items-center px-2 sm:px-4", children: [
-                    /* @__PURE__ */ jsx162(
-                      "input",
-                      {
-                        ref: yearInputRef,
-                        id: yearId,
-                        type: "text",
-                        inputMode: "numeric",
-                        autoComplete: "off",
-                        name: name ? `${name}-year` : void 0,
-                        value: year,
-                        placeholder: yearPlaceholder,
-                        disabled: isBlocked,
-                        readOnly,
-                        "aria-invalid": isInvalid,
-                        "aria-labelledby": labelId,
-                        onChange: handleYearChange,
-                        onFocus: () => setFocusedField("year"),
-                        onBlur: () => setFocusedField(null),
-                        maxLength: 4,
-                        className: subInputClass
-                      }
-                    ),
-                    loading && /* @__PURE__ */ jsx162(
-                      ThreeDotsLoader,
-                      {
-                        height: 18,
-                        width: 18,
-                        className: "ml-2 text-[var(--chekin-color-gray-2)]"
-                      }
-                    )
-                  ] })
+                  /* @__PURE__ */ jsx162("div", { className: "flex h-full min-w-0 items-center px-2 sm:px-4", children: /* @__PURE__ */ jsx162(
+                    "input",
+                    {
+                      ref: yearInputRef,
+                      id: yearId,
+                      type: "text",
+                      inputMode: "numeric",
+                      autoComplete: "off",
+                      name: name ? `${name}-year` : void 0,
+                      value: year,
+                      placeholder: yearPlaceholder,
+                      disabled: isBlocked,
+                      readOnly,
+                      "aria-invalid": isInvalid,
+                      "aria-labelledby": labelId,
+                      onChange: handleYearChange,
+                      onFocus: () => setFocusedField("year"),
+                      onBlur: () => setFocusedField(null),
+                      maxLength: 4,
+                      className: subInputClass
+                    }
+                  ) })
                 ]
               }
             ),
             showCoverage && /* @__PURE__ */ jsx162(
               "div",
               {
-                className: "absolute inset-0 cursor-text rounded-[6px] bg-[var(--chekin-color-surface-input-empty)]",
+                className: "absolute inset-0 cursor-text rounded-[6px] bg-[var(--empty-field-background)]",
                 onClick: focusDayInput,
                 "aria-hidden": "true"
               }
@@ -15962,7 +16072,7 @@ var Datepicker = React57.forwardRef(
 );
 
 // src/dashboard/date-range-picker/DateRangePicker.tsx
-import * as React61 from "react";
+import * as React62 from "react";
 import { useTranslation as useTranslation38 } from "react-i18next";
 
 // src/dashboard/date-range-picker/isDayBlocked.ts
@@ -16041,7 +16151,7 @@ var createDisabledMatchers = ({
 };
 
 // src/dashboard/date-range-picker/hooks/useRangeValue.ts
-import * as React58 from "react";
+import * as React59 from "react";
 var getRangeKey = (range) => `${range?.from?.getTime() ?? ""}-${range?.to?.getTime() ?? ""}`;
 function useRangeValue({
   value: externalValue,
@@ -16050,10 +16160,10 @@ function useRangeValue({
   name
 }) {
   const isControlled = externalValue !== void 0;
-  const [draft, setDraft] = React58.useState(
+  const [draft, setDraft] = React59.useState(
     isControlled ? externalValue : defaultValue
   );
-  const lastExternalKeyRef = React58.useRef(getRangeKey(externalValue));
+  const lastExternalKeyRef = React59.useRef(getRangeKey(externalValue));
   if (isControlled) {
     const externalKey = getRangeKey(externalValue);
     if (externalKey !== lastExternalKeyRef.current) {
@@ -16061,7 +16171,7 @@ function useRangeValue({
       setDraft(externalValue);
     }
   }
-  const commit = React58.useCallback(
+  const commit = React59.useCallback(
     (next) => {
       setDraft(next);
       if (next === void 0) {
@@ -16076,7 +16186,7 @@ function useRangeValue({
 }
 
 // src/dashboard/date-range-picker/hooks/useRangeTextInputs.ts
-import * as React59 from "react";
+import * as React60 from "react";
 function useRangeTextInputs({
   value,
   format: format2,
@@ -16084,13 +16194,13 @@ function useRangeTextInputs({
   onCommit,
   onBlur
 }) {
-  const [fromText, setFromText] = React59.useState(value?.from ? format2(value.from) : "");
-  const [toText, setToText] = React59.useState(value?.to ? format2(value.to) : "");
-  React59.useEffect(() => {
+  const [fromText, setFromText] = React60.useState(value?.from ? format2(value.from) : "");
+  const [toText, setToText] = React60.useState(value?.to ? format2(value.to) : "");
+  React60.useEffect(() => {
     setFromText(value?.from ? format2(value.from) : "");
     setToText(value?.to ? format2(value.to) : "");
   }, [format2, value?.from, value?.to]);
-  const handleFromBlur = React59.useCallback(() => {
+  const handleFromBlur = React60.useCallback(() => {
     if (!fromText) {
       const next = { from: void 0, to: value?.to };
       onCommit(next);
@@ -16107,7 +16217,7 @@ function useRangeTextInputs({
     setFromText(value?.from ? format2(value.from) : "");
     return void 0;
   }, [format2, fromText, onBlur, onCommit, parse3, value]);
-  const handleToBlur = React59.useCallback(() => {
+  const handleToBlur = React60.useCallback(() => {
     if (!toText) {
       const next = { from: value?.from, to: void 0 };
       onCommit(next);
@@ -16134,21 +16244,21 @@ function useRangeTextInputs({
 }
 
 // src/dashboard/date-range-picker/hooks/useRangeMonthSync.ts
-import * as React60 from "react";
+import * as React61 from "react";
 function useRangeMonthSync(value) {
-  const isPreloadedRef = React60.useRef(false);
-  const [month, setMonth] = React60.useState(value?.from ?? /* @__PURE__ */ new Date());
-  React60.useEffect(() => {
+  const isPreloadedRef = React61.useRef(false);
+  const [month, setMonth] = React61.useState(value?.from ?? /* @__PURE__ */ new Date());
+  React61.useEffect(() => {
     if (value?.from && !isPreloadedRef.current) {
       setMonth(value.from);
       isPreloadedRef.current = true;
     }
   }, [value?.from]);
-  const syncMonthToValue = React60.useCallback((next) => {
+  const syncMonthToValue = React61.useCallback((next) => {
     isPreloadedRef.current = true;
     if (next?.from) setMonth(next.from);
   }, []);
-  const resetPreload = React60.useCallback(() => {
+  const resetPreload = React61.useCallback(() => {
     isPreloadedRef.current = false;
   }, []);
   return { month, setMonth, syncMonthToValue, resetPreload };
@@ -16221,7 +16331,7 @@ function DateRangeInputs({
     {
       className: cn(
         "relative box-border flex h-12 w-full items-center rounded-[6px] pr-2 text-[16px] font-medium text-[var(--chekin-color-brand-navy)] transition-colors duration-200",
-        isEmpty && !isFocused && "bg-[var(--chekin-color-surface-input-empty)]"
+        isEmpty && !isFocused && "bg-[var(--empty-field-background)]"
       ),
       onClick: onRowClick,
       children: [
@@ -16285,7 +16395,6 @@ function DateRangeInputs({
           }
         ),
         /* @__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",
             {
@@ -16407,7 +16516,7 @@ function DateRangePopover({
 
 // src/dashboard/date-range-picker/DateRangePicker.tsx
 import { jsx as jsx166, jsxs as jsxs110 } from "react/jsx-runtime";
-var DateRangePicker = React61.forwardRef(function DateRangePicker2({
+var DateRangePicker = React62.forwardRef(function DateRangePicker2({
   label,
   value: externalValue,
   defaultValue,
@@ -16441,20 +16550,20 @@ var DateRangePicker = React61.forwardRef(function DateRangePicker2({
   components: customComponents,
   ...dayPickerProps
 }, ref) {
-  const containerRef = React61.useRef(null);
-  const fromInputRef = React61.useRef(null);
-  const toInputRef = React61.useRef(null);
-  const reactId = React61.useId();
+  const containerRef = React62.useRef(null);
+  const fromInputRef = React62.useRef(null);
+  const toInputRef = React62.useRef(null);
+  const reactId = React62.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 = React61.useMemo(() => {
+  const normalizedValue = React62.useMemo(() => {
     if (externalValue === void 0) return void 0;
     return { from: toDate(externalValue?.from), to: toDate(externalValue?.to) };
   }, [externalValue]);
-  const normalizedDefaultValue = React61.useMemo(() => {
+  const normalizedDefaultValue = React62.useMemo(() => {
     if (defaultValue === void 0) return void 0;
     return { from: toDate(defaultValue?.from), to: toDate(defaultValue?.to) };
   }, [defaultValue]);
@@ -16464,10 +16573,10 @@ var DateRangePicker = React61.forwardRef(function DateRangePicker2({
     onChange,
     name
   });
-  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 normalizedMinDate = React62.useMemo(() => toDate(minDate), [minDate]);
+  const normalizedMaxDate = React62.useMemo(() => toDate(maxDate), [maxDate]);
+  const formatter = React62.useMemo(() => formatDate(displayFormat), [displayFormat]);
+  const parser = React62.useMemo(() => parseDate(displayFormat), [displayFormat]);
   const { fromText, toText, setFromText, setToText, handleFromBlur, handleToBlur } = useRangeTextInputs({
     value,
     format: formatter,
@@ -16476,9 +16585,9 @@ var DateRangePicker = React61.forwardRef(function DateRangePicker2({
     onBlur
   });
   const { month, setMonth, syncMonthToValue } = useRangeMonthSync(value);
-  const [isOpen, setIsOpen] = React61.useState(false);
-  const [focusedInput, setFocusedInput] = React61.useState(null);
-  const [autoFocus, setAutoFocus] = React61.useState(false);
+  const [isOpen, setIsOpen] = React62.useState(false);
+  const [focusedInput, setFocusedInput] = React62.useState(null);
+  const [autoFocus, setAutoFocus] = React62.useState(false);
   const isMobile3 = useIsMobile();
   const { t } = useTranslation38();
   const drawerTitle = label ?? t("select_dates");
@@ -16489,13 +16598,13 @@ var DateRangePicker = React61.forwardRef(function DateRangePicker2({
   const isFocused = focusedInput !== null || isOpen;
   const wrapperWidth = toCssSize(width);
   const monthsToShow = numberOfMonths ?? (isMobile3 ? 1 : 2);
-  const closeCalendar = React61.useCallback(() => {
+  const closeCalendar = React62.useCallback(() => {
     setIsOpen(false);
     setFocusedInput(null);
     setAutoFocus(false);
     if (value?.from) setMonth(value.from);
   }, [setMonth, value?.from]);
-  const openCalendar = React61.useCallback(() => {
+  const openCalendar = React62.useCallback(() => {
     if (isBlocked || readOnly) return;
     setIsOpen(true);
   }, [isBlocked, readOnly]);
@@ -16504,7 +16613,7 @@ var DateRangePicker = React61.forwardRef(function DateRangePicker2({
     onOutsideClick: closeCalendar,
     isDisabled: !isOpen || isMobile3
   });
-  const handlePickerChange = React61.useCallback(
+  const handlePickerChange = React62.useCallback(
     (range, pickedDate) => {
       const { next, shouldClose } = resolveRangeSelection({
         previous: value,
@@ -16525,7 +16634,7 @@ var DateRangePicker = React61.forwardRef(function DateRangePicker2({
     setToText("");
     setMonth(/* @__PURE__ */ new Date());
   };
-  const disabledMatchers = React61.useMemo(
+  const disabledMatchers = React62.useMemo(
     () => createDisabledMatchers({
       minDate: normalizedMinDate,
       maxDate: normalizedMaxDate,
@@ -16544,7 +16653,7 @@ var DateRangePicker = React61.forwardRef(function DateRangePicker2({
     openCalendar();
     if (autoFocusOnOpen) setAutoFocus(true);
   };
-  React61.useImperativeHandle(
+  React62.useImperativeHandle(
     ref,
     () => ({
       setDateRange: (range) => {
@@ -16574,11 +16683,11 @@ var DateRangePicker = React61.forwardRef(function DateRangePicker2({
       className: cn(
         "relative w-full max-w-[var(--field-max-width,296px)]",
         disabled && "cursor-not-allowed opacity-50",
-        loading && "cursor-progress",
+        loading && "cursor-progress opacity-50",
         className
       ),
       style: wrapperWidth ? { width: wrapperWidth } : void 0,
-      children: /* @__PURE__ */ jsxs110("div", { className: "relative min-h-[68px] w-full", children: [
+      children: /* @__PURE__ */ jsxs110("div", { className: "relative min-h-[var(--field-min-height,48px)] w-full", children: [
         /* @__PURE__ */ jsxs110("div", { className: "relative w-full", children: [
           /* @__PURE__ */ jsx166(
             DateRangeInputs,
@@ -16723,7 +16832,7 @@ var DateRangePicker = React61.forwardRef(function DateRangePicker2({
 });
 
 // src/dashboard/date-range-picker/useValidateDates.ts
-import * as React62 from "react";
+import * as React63 from "react";
 import { useTranslation as useTranslation39 } from "react-i18next";
 import { differenceInDays as differenceInDays2, isAfter as isAfter2, isBefore as isBefore3 } from "date-fns";
 import {
@@ -16749,11 +16858,11 @@ function useValidateDates({
   const { t } = useTranslation39();
   const handleError = useEvent(onError);
   const handleSuccess = useEvent(onSuccess);
-  const errorFormatter = React62.useMemo(
+  const errorFormatter = React63.useMemo(
     () => formatDate(displayFormat ?? DEFAULT_DISPLAY_FORMAT),
     [displayFormat]
   );
-  const validateDates = React62.useCallback(
+  const validateDates = React63.useCallback(
     (dates) => {
       const startDate = dates?.from;
       const endDate = dates?.to;
@@ -16803,7 +16912,7 @@ function useValidateDates({
 }
 
 // src/dashboard/time-picker/TimePicker.tsx
-import * as React63 from "react";
+import * as React64 from "react";
 import { addDays, addHours, addMinutes, format, parse as parse2 } from "date-fns";
 import { jsx as jsx167 } from "react/jsx-runtime";
 var SHORT_TIME_FORMAT = "HH:mm";
@@ -16847,8 +16956,8 @@ var FORMAT_SETTINGS = {
   },
   hours: { intervalUnit: "H", interval: 1, minTime: "00:00", maxTime: "23:00" }
 };
-var TimePicker = React63.forwardRef(function TimePicker2({ format: formatName = "time", timeSettings, options, ...selectProps }, ref) {
-  const resolvedOptions = React63.useMemo(() => {
+var TimePicker = React64.forwardRef(function TimePicker2({ format: formatName = "time", timeSettings, options, ...selectProps }, ref) {
+  const resolvedOptions = React64.useMemo(() => {
     if (options) return options;
     const settings = timeSettings ?? FORMAT_SETTINGS[formatName];
     return buildOptions(settings);
@@ -16857,14 +16966,14 @@ var TimePicker = React63.forwardRef(function TimePicker2({ format: formatName =
 });
 
 // src/dashboard/file-input/FileInput.tsx
-import * as React64 from "react";
+import * as React65 from "react";
 import { Download, Paperclip, SquareX as SquareX5 } from "lucide-react";
 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 = React64.forwardRef(function FileInput2({
+var FileInput = React65.forwardRef(function FileInput2({
   label,
   value,
   onChange,
@@ -16886,12 +16995,12 @@ var FileInput = React64.forwardRef(function FileInput2({
   width,
   downloadLabel
 }, ref) {
-  const internalRef = React64.useRef(null);
+  const internalRef = React65.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 reactId = React65.useId();
   const inputId = `${name || "dash-file"}-${reactId}`;
   const labelId = `${inputId}-label`;
   const errorId = `${inputId}-error`;
@@ -16924,7 +17033,7 @@ var FileInput = React64.forwardRef(function FileInput2({
       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",
+        loading && "cursor-progress opacity-50",
         disabled && "opacity-50",
         className
       ),
@@ -16946,14 +17055,14 @@ var FileInput = React64.forwardRef(function FileInput2({
             "aria-invalid": isInvalid
           }
         ),
-        /* @__PURE__ */ jsxs111("div", { className: "relative min-h-[68px] w-full", children: [
+        /* @__PURE__ */ jsxs111("div", { className: "relative 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)]"
+                  isEmpty && "bg-[var(--empty-field-background)]"
                 ),
                 children: [
                   hasFileChip ? /* @__PURE__ */ jsxs111(
@@ -16988,10 +17097,7 @@ var FileInput = React64.forwardRef(function FileInput2({
                       ]
                     }
                   ) : /* @__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("span", { className: "ml-auto flex items-center gap-2 text-[var(--chekin-color-gray-2)]", children: /* @__PURE__ */ jsx168(Paperclip, { size: 20 }) })
                 ]
               }
             ),
@@ -17030,7 +17136,7 @@ var FileInput = React64.forwardRef(function FileInput2({
 });
 
 // src/dashboard/select-icons-box/SelectIconsBox.tsx
-import * as React65 from "react";
+import * as React66 from "react";
 import { jsx as jsx169, jsxs as jsxs112 } from "react/jsx-runtime";
 function SelectIconsBox({
   children,
@@ -17046,9 +17152,9 @@ function SelectIconsBox({
   className,
   boxClassName
 }) {
-  const containerRef = React65.useRef(null);
+  const containerRef = React66.useRef(null);
   const isControlled = controlledOpen !== void 0;
-  const [internalOpen, setInternalOpen] = React65.useState(defaultOpen);
+  const [internalOpen, setInternalOpen] = React66.useState(defaultOpen);
   const isOpen = isControlled ? controlledOpen : internalOpen;
   const setOpen = (next) => {
     if (!isControlled) setInternalOpen(next);
@@ -17229,15 +17335,15 @@ var LegacyTextarea = forwardRef71(
 LegacyTextarea.displayName = "LegacyTextarea";
 
 // src/airbnb-fields/datepicker/DatePicker.tsx
-import * as React67 from "react";
+import * as React68 from "react";
 import { Calendar as Calendar2 } from "lucide-react";
 
 // src/airbnb-fields/field-trigger/FieldTrigger.tsx
-import * as React66 from "react";
+import * as React67 from "react";
 import { Loader2 as Loader24 } from "lucide-react";
 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(
+var AirbnbFieldTrigger = React67.forwardRef(
   ({
     as = "button",
     variant = "airbnb",
@@ -17410,7 +17516,7 @@ AirbnbFieldTrigger.displayName = "AirbnbFieldTrigger";
 // src/airbnb-fields/datepicker/DatePicker.tsx
 import { jsx as jsx173, jsxs as jsxs116 } from "react/jsx-runtime";
 var DEFAULT_MIN_DATE = new Date(1920, 0, 1);
-var AirbnbDatePicker = React67.forwardRef(
+var AirbnbDatePicker = React68.forwardRef(
   ({
     variant = "default",
     label,
@@ -17436,24 +17542,24 @@ var AirbnbDatePicker = React67.forwardRef(
     formatValue = formatDateValue
   }, ref) => {
     const { isMatch: isMobile3 } = useScreenResize(DEVICE.mobileXL);
-    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 [isOpen, setIsOpen] = React68.useState(false);
+    const triggerId = React68.useId();
+    const pickerId = React68.useId();
+    const labelId = React68.useId();
+    const valueId = React68.useId();
+    const helperTextId = React68.useId();
+    const errorId = React68.useId();
+    const internalRef = React68.useRef(null);
     const combinedRef = useCombinedRef(ref, internalRef);
-    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(
+    const monthLabels = React68.useMemo(() => getMonthLabels(locale), [locale]);
+    const resolvedMinDate = React68.useMemo(() => minDate ?? DEFAULT_MIN_DATE, [minDate]);
+    const resolvedMaxDate = React68.useMemo(() => maxDate ?? /* @__PURE__ */ new Date(), [maxDate]);
+    const normalizedValue = React68.useMemo(() => normalizeDateValue(value), [value]);
+    const normalizedDefaultValue = React68.useMemo(
       () => normalizeDateValue(defaultValue),
       [defaultValue]
     );
-    const resolvedValue = React67.useMemo(
+    const resolvedValue = React68.useMemo(
       () => normalizedValue ? clampDate(normalizedValue, resolvedMinDate, resolvedMaxDate) : null,
       [normalizedValue, resolvedMaxDate, resolvedMinDate]
     );
@@ -17484,7 +17590,7 @@ var AirbnbDatePicker = React67.forwardRef(
       minDate: resolvedMinDate,
       maxDate: resolvedMaxDate
     });
-    const handleOpenChange = React67.useCallback(
+    const handleOpenChange = React68.useCallback(
       (nextOpen) => {
         if (isBlocked && nextOpen) return;
         setIsOpen(nextOpen);
@@ -17494,7 +17600,7 @@ var AirbnbDatePicker = React67.forwardRef(
       },
       [isBlocked]
     );
-    const handleDone = React67.useCallback(() => {
+    const handleDone = React68.useCallback(() => {
       if (isBlocked) return;
       onChange(clampDate(draftDate, resolvedMinDate, resolvedMaxDate));
       handleOpenChange(false);
@@ -17506,11 +17612,11 @@ var AirbnbDatePicker = React67.forwardRef(
       resolvedMaxDate,
       resolvedMinDate
     ]);
-    const handleTriggerClick = React67.useCallback(() => {
+    const handleTriggerClick = React68.useCallback(() => {
       if (isBlocked) return;
       setIsOpen(true);
     }, [isBlocked]);
-    const handleTriggerKeyDown = React67.useCallback(
+    const handleTriggerKeyDown = React68.useCallback(
       (event) => {
         if (isBlocked) return;
         if (event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "Enter" || event.key === " ") {
@@ -17520,7 +17626,7 @@ var AirbnbDatePicker = React67.forwardRef(
       },
       [isBlocked]
     );
-    React67.useEffect(() => {
+    React68.useEffect(() => {
       if (isBlocked) {
         setIsOpen(false);
       }
@@ -17598,10 +17704,10 @@ var AirbnbDatePicker = React67.forwardRef(
 AirbnbDatePicker.displayName = "AirbnbDatePicker";
 
 // src/airbnb-fields/input/Input.tsx
-import * as React68 from "react";
+import * as React69 from "react";
 import { jsx as jsx174 } from "react/jsx-runtime";
 var getInputValue = (value) => value != null ? String(value) : "";
-var AirbnbInput = React68.forwardRef(
+var AirbnbInput = React69.forwardRef(
   ({
     variant = "default",
     label,
@@ -17630,15 +17736,15 @@ var AirbnbInput = React68.forwardRef(
     placeholder,
     ...props
   }, ref) => {
-    const generatedId = React68.useId();
-    const inputRef = React68.useRef(null);
+    const generatedId = React69.useId();
+    const inputRef = React69.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] = React68.useState(false);
-    const [currentValue, setCurrentValue] = React68.useState(
+    const [isFocused, setIsFocused] = React69.useState(false);
+    const [currentValue, setCurrentValue] = React69.useState(
       () => value != null ? getInputValue(value) : getInputValue(defaultValue)
     );
     const resolvedValue = value != null ? getInputValue(value) : currentValue;
@@ -17648,11 +17754,11 @@ var AirbnbInput = React68.forwardRef(
     const triggerError = error ?? invalid;
     const hasLabelMeta = Boolean(optional) || Boolean(tooltip);
     const isBlocked = Boolean(disabled) || Boolean(loading);
-    React68.useLayoutEffect(() => {
+    React69.useLayoutEffect(() => {
       const nextValue = value != null ? getInputValue(value) : getInputValue(inputRef.current?.value);
       setCurrentValue((prevValue) => prevValue === nextValue ? prevValue : nextValue);
     }, [value]);
-    const setRefs = React68.useCallback(
+    const setRefs = React69.useCallback(
       (node) => {
         inputRef.current = node;
         if (node && value == null) {
@@ -17750,11 +17856,11 @@ var AirbnbInput = React68.forwardRef(
 AirbnbInput.displayName = "AirbnbInput";
 
 // src/airbnb-fields/phone-field/PhoneField.tsx
-import * as React74 from "react";
+import * as React75 from "react";
 import { ChevronDown as ChevronDown5 } from "lucide-react";
 
 // src/airbnb-fields/select/Select.tsx
-import * as React73 from "react";
+import * as React74 from "react";
 
 // src/airbnb-fields/select/SelectDesktopMenu.tsx
 import { jsx as jsx175, jsxs as jsxs117 } from "react/jsx-runtime";
@@ -18099,10 +18205,10 @@ function AirbnbSelectMobileContent({
 }
 
 // src/airbnb-fields/select/SelectTrigger.tsx
-import * as React69 from "react";
+import * as React70 from "react";
 import { ChevronDown as ChevronDown4 } from "lucide-react";
 import { jsx as jsx179 } from "react/jsx-runtime";
-var AirbnbSelectTrigger = React69.forwardRef(
+var AirbnbSelectTrigger = React70.forwardRef(
   ({
     id,
     open,
@@ -18169,7 +18275,7 @@ var AirbnbSelectTrigger = React69.forwardRef(
 AirbnbSelectTrigger.displayName = "AirbnbSelectTrigger";
 
 // src/airbnb-fields/select/useDesktopSelect.ts
-import * as React70 from "react";
+import * as React71 from "react";
 function useDesktopSelect({
   isMobile: isMobile3,
   isOpen,
@@ -18178,12 +18284,12 @@ function useDesktopSelect({
   disabled,
   onChange
 }) {
-  const [highlightedIndex, setHighlightedIndex] = React70.useState(-1);
-  const triggerRef = React70.useRef(null);
-  const listRef = React70.useRef(null);
-  const optionRefs = React70.useRef([]);
+  const [highlightedIndex, setHighlightedIndex] = React71.useState(-1);
+  const triggerRef = React71.useRef(null);
+  const listRef = React71.useRef(null);
+  const optionRefs = React71.useRef([]);
   const selectedIndex = getOptionIndex2(options, value);
-  React70.useEffect(() => {
+  React71.useEffect(() => {
     if (!isOpen || isMobile3) return;
     setHighlightedIndex((currentIndex) => {
       if (currentIndex >= 0) {
@@ -18198,34 +18304,34 @@ function useDesktopSelect({
       window.cancelAnimationFrame(frameId);
     };
   }, [isMobile3, isOpen, options, selectedIndex]);
-  React70.useEffect(() => {
+  React71.useEffect(() => {
     if (!isOpen || isMobile3 || highlightedIndex < 0) return;
     optionRefs.current[highlightedIndex]?.scrollIntoView({
       block: "nearest"
     });
   }, [highlightedIndex, isMobile3, isOpen]);
-  React70.useEffect(() => {
+  React71.useEffect(() => {
     if (isOpen) return;
     setHighlightedIndex(-1);
   }, [isOpen]);
-  const focusTrigger = React70.useCallback(() => {
+  const focusTrigger = React71.useCallback(() => {
     triggerRef.current?.focus();
   }, []);
-  const handleSelect = React70.useCallback(
+  const handleSelect = React71.useCallback(
     (option) => {
       if (option.isDisabled || disabled) return;
       onChange(option);
     },
     [disabled, onChange]
   );
-  const openMenu = React70.useCallback(
+  const openMenu = React71.useCallback(
     (targetIndex) => {
       const fallbackIndex = selectedIndex >= 0 ? selectedIndex : getFirstEnabledOptionIndex2(options);
       setHighlightedIndex(targetIndex ?? fallbackIndex);
     },
     [options, selectedIndex]
   );
-  const handleTriggerKeyDown = React70.useCallback(
+  const handleTriggerKeyDown = React71.useCallback(
     (event, onOpen) => {
       if (disabled) return;
       if (event.key === "ArrowDown") {
@@ -18250,7 +18356,7 @@ function useDesktopSelect({
     },
     [disabled, openMenu, options, selectedIndex]
   );
-  const handleMenuKeyDown = React70.useCallback(
+  const handleMenuKeyDown = React71.useCallback(
     (event, onClose) => {
       if (event.key === "Escape") {
         event.preventDefault();
@@ -18300,7 +18406,7 @@ function useDesktopSelect({
     },
     [focusTrigger, highlightedIndex, onChange, options]
   );
-  const setOptionRef = React70.useCallback(
+  const setOptionRef = React71.useCallback(
     (index, node) => {
       optionRefs.current[index] = node;
     },
@@ -18320,23 +18426,23 @@ function useDesktopSelect({
 }
 
 // src/airbnb-fields/select/useMobileSelectWheel.ts
-import * as React71 from "react";
+import * as React72 from "react";
 function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, disabled }) {
-  const [pendingValue, setPendingValue] = React71.useState(
+  const [pendingValue, setPendingValue] = React72.useState(
     value ?? null
   );
-  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(
+  const [mobileScrollTop, setMobileScrollTop] = React72.useState(0);
+  const mobileListRef = React72.useRef(null);
+  const scrollSettleTimeoutRef = React72.useRef(null);
+  const scrollAnimationFrameRef = React72.useRef(null);
+  const getTargetIndex = React72.useCallback(
     (targetValue) => {
       const selectedIndex = getOptionIndex2(options, targetValue);
       return selectedIndex >= 0 ? selectedIndex : getFirstEnabledOptionIndex2(options);
     },
     [options]
   );
-  const syncScrollPosition = React71.useCallback(
+  const syncScrollPosition = React72.useCallback(
     (targetValue, behavior = "instant") => {
       const targetIndex = getTargetIndex(targetValue);
       if (targetIndex < 0) return;
@@ -18355,27 +18461,27 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
     },
     [getTargetIndex, options]
   );
-  const clearScrollSettleTimeout = React71.useCallback(() => {
+  const clearScrollSettleTimeout = React72.useCallback(() => {
     if (scrollSettleTimeoutRef.current === null) return;
     window.clearTimeout(scrollSettleTimeoutRef.current);
     scrollSettleTimeoutRef.current = null;
   }, []);
-  const clearScrollAnimationFrame = React71.useCallback(() => {
+  const clearScrollAnimationFrame = React72.useCallback(() => {
     if (scrollAnimationFrameRef.current === null) return;
     window.cancelAnimationFrame(scrollAnimationFrameRef.current);
     scrollAnimationFrameRef.current = null;
   }, []);
-  React71.useEffect(
+  React72.useEffect(
     () => () => {
       clearScrollSettleTimeout();
       clearScrollAnimationFrame();
     },
     [clearScrollAnimationFrame, clearScrollSettleTimeout]
   );
-  React71.useEffect(() => {
+  React72.useEffect(() => {
     setPendingValue(value ?? null);
   }, [value]);
-  React71.useLayoutEffect(() => {
+  React72.useLayoutEffect(() => {
     if (!isMobile3 || !isOpen) return;
     const frameId = window.requestAnimationFrame(() => {
       syncScrollPosition(value ?? null, "instant");
@@ -18384,7 +18490,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
       window.cancelAnimationFrame(frameId);
     };
   }, [isMobile3, isOpen, syncScrollPosition, value]);
-  const settleScroll = React71.useCallback(() => {
+  const settleScroll = React72.useCallback(() => {
     if (!mobileListRef.current) return;
     const nextIndex = Math.round(mobileListRef.current.scrollTop / MOBILE_OPTION_HEIGHT);
     const nextOption = options[nextIndex];
@@ -18396,13 +18502,13 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
     }
     setPendingValue(nextOption);
   }, [options, pendingValue]);
-  const scheduleScrollSettle = React71.useCallback(() => {
+  const scheduleScrollSettle = React72.useCallback(() => {
     clearScrollSettleTimeout();
     scrollSettleTimeoutRef.current = window.setTimeout(() => {
       settleScroll();
     }, MOBILE_SCROLL_SETTLE_DELAY);
   }, [clearScrollSettleTimeout, settleScroll]);
-  const handleScroll = React71.useCallback(() => {
+  const handleScroll = React72.useCallback(() => {
     if (!mobileListRef.current) return;
     const nextScrollTop = mobileListRef.current.scrollTop;
     clearScrollAnimationFrame();
@@ -18412,7 +18518,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
     });
     scheduleScrollSettle();
   }, [clearScrollAnimationFrame, scheduleScrollSettle]);
-  const focusOptionByIndex = React71.useCallback(
+  const focusOptionByIndex = React72.useCallback(
     (index, behavior = "instant", updatePendingImmediately = behavior === "instant") => {
       if (!mobileListRef.current || index < 0 || index >= options.length) return;
       const option = options[index];
@@ -18430,7 +18536,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
     },
     [options, scheduleScrollSettle]
   );
-  const handleOptionClick = React71.useCallback(
+  const handleOptionClick = React72.useCallback(
     (option) => {
       if (!mobileListRef.current || disabled || option.isDisabled) return;
       const optionIndex = getOptionIndex2(options, option);
@@ -18439,7 +18545,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
     },
     [disabled, focusOptionByIndex, options]
   );
-  const moveByStep = React71.useCallback(
+  const moveByStep = React72.useCallback(
     (step) => {
       const currentIndex = getOptionIndex2(options, pendingValue);
       const fallbackIndex = step === 1 ? getFirstEnabledOptionIndex2(options) : getLastEnabledOptionIndex2(options);
@@ -18451,7 +18557,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
     },
     [focusOptionByIndex, options, pendingValue]
   );
-  const moveToBoundary = React71.useCallback(
+  const moveToBoundary = React72.useCallback(
     (boundary) => {
       const targetIndex = boundary === "start" ? getFirstEnabledOptionIndex2(options) : getLastEnabledOptionIndex2(options);
       if (targetIndex >= 0) {
@@ -18460,7 +18566,7 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
     },
     [focusOptionByIndex, options]
   );
-  const syncPendingValue = React71.useCallback(
+  const syncPendingValue = React72.useCallback(
     (nextValue) => {
       const normalizedValue = nextValue ?? null;
       const matchedIndex = getOptionIndex2(options, normalizedValue);
@@ -18488,9 +18594,9 @@ function useMobileSelectWheel({ isMobile: isMobile3, isOpen, options, value, dis
 }
 
 // src/airbnb-fields/select/useSelectIds.ts
-import * as React72 from "react";
+import * as React73 from "react";
 function useSelectIds2({ name, hasValue, error, hideErrorMessage }) {
-  const reactId = React72.useId().replace(/:/g, "");
+  const reactId = React73.useId().replace(/:/g, "");
   const baseId = name ? `select-${name}` : `select-${reactId}`;
   const triggerId = `${baseId}-trigger`;
   const labelId = `${baseId}-label`;
@@ -18500,7 +18606,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 = React72.useCallback(
+  const getOptionId2 = React73.useCallback(
     (index) => `${baseId}-option-${index}`,
     [baseId]
   );
@@ -18519,7 +18625,7 @@ function useSelectIds2({ name, hasValue, error, hideErrorMessage }) {
 
 // src/airbnb-fields/select/Select.tsx
 import { jsx as jsx180, jsxs as jsxs120 } from "react/jsx-runtime";
-var AirbnbSelect = React73.forwardRef(function AirbnbSelect2({
+var AirbnbSelect = React74.forwardRef(function AirbnbSelect2({
   options = [],
   value,
   onChange,
@@ -18546,8 +18652,8 @@ var AirbnbSelect = React73.forwardRef(function AirbnbSelect2({
   noOptionsMessage
 }, ref) {
   const { isMatch: isMobile3 } = useScreenResize(DEVICE.mobileXL);
-  const [isOpen, setIsOpen] = React73.useState(false);
-  const containerRef = React73.useRef(null);
+  const [isOpen, setIsOpen] = React74.useState(false);
+  const containerRef = React74.useRef(null);
   const hasValue = Boolean(value);
   const helperText = placeholder ?? label;
   const shouldDescribeHelperText = !hasValue && helperText !== label;
@@ -18608,12 +18714,12 @@ var AirbnbSelect = React73.forwardRef(function AirbnbSelect2({
     onOutsideClick: () => setIsOpen(false),
     isDisabled: !isOpen || isMobile3
   });
-  React73.useEffect(() => {
+  React74.useEffect(() => {
     if (isBlocked) {
       setIsOpen(false);
     }
   }, [isBlocked]);
-  React73.useEffect(
+  React74.useEffect(
     function setCorrectOptionIfThereIsOnlyValue() {
       if (value?.value === void 0 || value.value === null || value.label !== "") {
         return;
@@ -18625,7 +18731,7 @@ var AirbnbSelect = React73.forwardRef(function AirbnbSelect2({
     },
     [onChange, options, value]
   );
-  const handleMobileOpenChange = React73.useCallback(
+  const handleMobileOpenChange = React74.useCallback(
     (nextOpen) => {
       if (isBlocked && nextOpen) return;
       setIsOpen(nextOpen);
@@ -18636,7 +18742,7 @@ var AirbnbSelect = React73.forwardRef(function AirbnbSelect2({
     },
     [focusTrigger, isBlocked, syncPendingValue, value]
   );
-  const handleMobileDone = React73.useCallback(() => {
+  const handleMobileDone = React74.useCallback(() => {
     if (isBlocked) return;
     const finalOption = pendingValue;
     if (finalOption && finalOption.value !== value?.value) {
@@ -18645,7 +18751,7 @@ var AirbnbSelect = React73.forwardRef(function AirbnbSelect2({
     setIsOpen(false);
     focusTrigger();
   }, [focusTrigger, isBlocked, onChange, pendingValue, value]);
-  const handleTriggerClick = React73.useCallback(() => {
+  const handleTriggerClick = React74.useCallback(() => {
     if (isBlocked) return;
     setIsOpen((prev) => {
       const nextOpen = !prev;
@@ -18819,7 +18925,7 @@ function formatPhoneCodeOptionLabel2(option) {
   const value = String(option.value);
   return label.includes(value) ? label : `${label} (${value})`;
 }
-var AirbnbPhoneField = React74.forwardRef(
+var AirbnbPhoneField = React75.forwardRef(
   ({
     variant = "default",
     label,
@@ -18843,8 +18949,8 @@ var AirbnbPhoneField = React74.forwardRef(
     mobileTitle,
     codePlaceholder = "+00"
   }, ref) => {
-    const inputId = React74.useId();
-    const codeOptions = React74.useMemo(
+    const inputId = React75.useId();
+    const codeOptions = React75.useMemo(
       () => options.map((option) => ({
         value: option.value,
         label: formatPhoneCodeOptionLabel2(option),
@@ -18852,7 +18958,7 @@ var AirbnbPhoneField = React74.forwardRef(
       })),
       [options]
     );
-    const selectedCodeOption = React74.useMemo(
+    const selectedCodeOption = React75.useMemo(
       () => codeOptions.find((option) => option.value === value?.code) ?? null,
       [codeOptions, value?.code]
     );
@@ -18994,10 +19100,10 @@ var AirbnbPhoneField = React74.forwardRef(
 AirbnbPhoneField.displayName = "AirbnbPhoneField";
 
 // src/airbnb-fields/searchable-select/SearchableSelect.tsx
-import * as React75 from "react";
+import * as React76 from "react";
 import { ChevronDown as ChevronDown6, Search as Search4 } from "lucide-react";
 import { useVirtualizer as useVirtualizer3 } from "@tanstack/react-virtual";
-import { useCallback as useCallback54 } from "react";
+import { useCallback as useCallback55 } from "react";
 import { jsx as jsx182, jsxs as jsxs122 } from "react/jsx-runtime";
 var ROW_HEIGHT = 48;
 var DESKTOP_LIST_HEIGHT = 280;
@@ -19039,13 +19145,13 @@ var AirbnbSearchableSelectInternal = ({
   loadingMessage
 }, ref) => {
   const { isMatch: isMobile3 } = useScreenResize(DEVICE.mobileXL);
-  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 reactId = React76.useId();
+  const [open, setOpen] = React76.useState(false);
+  const [internalSearchValue, setInternalSearchValue] = React76.useState("");
+  const [highlightedIndex, setHighlightedIndex] = React76.useState(-1);
+  const containerRef = React76.useRef(null);
+  const triggerRef = React76.useRef(null);
+  const inputRef = React76.useRef(null);
   const listboxId = `${reactId}-listbox`;
   const labelId = `${reactId}-label`;
   const valueId = `${reactId}-value`;
@@ -19054,13 +19160,13 @@ var AirbnbSearchableSelectInternal = ({
   const searchInputId = `${reactId}-search`;
   const effectiveSearchValue = searchValue ?? internalSearchValue;
   const shouldFilterLocally = !onSearchChange && filterOption !== null;
-  const visibleOptions = React75.useMemo(() => {
+  const visibleOptions = React76.useMemo(() => {
     if (!shouldFilterLocally || !effectiveSearchValue) {
       return options;
     }
     return options.filter((option) => filterOption(option, effectiveSearchValue));
   }, [effectiveSearchValue, filterOption, options, shouldFilterLocally]);
-  const selectedIndex = React75.useMemo(
+  const selectedIndex = React76.useMemo(
     () => visibleOptions.findIndex((option) => option.value === value?.value),
     [value?.value, visibleOptions]
   );
@@ -19076,7 +19182,7 @@ var AirbnbSearchableSelectInternal = ({
     isDisabled: !open || isMobile3
   });
   const handleOnOpenChange = useEvent(onOpenChange);
-  const setSelectOpen = useCallback54(
+  const setSelectOpen = useCallback55(
     (nextOpen, options2) => {
       setOpen(nextOpen);
       handleOnOpenChange?.(nextOpen);
@@ -19086,7 +19192,7 @@ var AirbnbSearchableSelectInternal = ({
     },
     [handleOnOpenChange]
   );
-  React75.useEffect(() => {
+  React76.useEffect(() => {
     if (isBlocked) {
       setSelectOpen(false);
       return;
@@ -19099,7 +19205,7 @@ var AirbnbSearchableSelectInternal = ({
       window.cancelAnimationFrame(frameId);
     };
   }, [isBlocked, open, setSelectOpen]);
-  React75.useEffect(() => {
+  React76.useEffect(() => {
     if (!open) {
       setHighlightedIndex(-1);
       return;
@@ -19194,7 +19300,7 @@ var AirbnbSearchableSelectInternal = ({
       onOptionHover: setHighlightedIndex
     }
   );
-  React75.useImperativeHandle(ref, () => triggerRef.current, []);
+  React76.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(
@@ -19273,7 +19379,7 @@ var AirbnbSearchableSelectInternal = ({
     ) : null
   ] });
 };
-var AirbnbSearchableSelect = React75.forwardRef(
+var AirbnbSearchableSelect = React76.forwardRef(
   AirbnbSearchableSelectInternal
 );
 function AirbnbSearchableSelectContent({
@@ -19300,9 +19406,9 @@ function AirbnbSearchableSelectContent({
   onOptionClick,
   onOptionHover
 }) {
-  const listRef = React75.useRef(null);
-  const lastLoadMoreOptionsLengthRef = React75.useRef(null);
-  const previousHighlightedIndexRef = React75.useRef(highlightedIndex);
+  const listRef = React76.useRef(null);
+  const lastLoadMoreOptionsLengthRef = React76.useRef(null);
+  const previousHighlightedIndexRef = React76.useRef(highlightedIndex);
   const rowCount = options.length + (loading && options.length > 0 ? 1 : 0);
   const virtualizer = useVirtualizer3({
     count: rowCount,
@@ -19313,7 +19419,7 @@ function AirbnbSearchableSelectContent({
   const virtualItems = virtualizer.getVirtualItems();
   const emptyMessage = noOptionsMessage?.() ?? "No matches found";
   const loadingText = loadingMessage?.() ?? "Loading...";
-  React75.useEffect(() => {
+  React76.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) {
@@ -19321,7 +19427,7 @@ function AirbnbSearchableSelectContent({
       onLoadMore?.();
     }
   }, [hasNextPage, loading, onLoadMore, options.length, virtualItems]);
-  React75.useEffect(() => {
+  React76.useEffect(() => {
     const hasHighlightedIndexChanged = previousHighlightedIndexRef.current !== highlightedIndex;
     previousHighlightedIndexRef.current = highlightedIndex;
     if (highlightedIndex >= 0 && hasHighlightedIndexChanged) {
@@ -19439,11 +19545,11 @@ function getNextEnabledIndex(options, startIndex, step) {
 }
 
 // src/airbnb-fields/search-input/SearchInput.tsx
-import * as React76 from "react";
+import * as React77 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) => {
+var AirbnbSearchInput = React77.forwardRef(({ onReset, placeholder, wrapperClassName, ...props }, ref) => {
   const { t } = useTranslation42();
   const placeholderText = placeholder || t("search_property") + "...";
   return /* @__PURE__ */ jsxs123("div", { className: cn("input-wrapper relative", wrapperClassName), children: [