@chekinapp/ui 0.0.3 → 0.0.5

package/dist/index.js

@@ -3312,7 +3312,7 @@ GridItems.displayName = "GridItems";
 
 // src/help-tooltip/HelpTooltip.tsx
 import { CircleQuestionMark } from "lucide-react";
-import { jsx as jsx55, jsxs as jsxs34 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx55, jsxs as jsxs34 } from "react/jsx-runtime";
 function HelpTooltip({
   content,
   side,
@@ -3321,27 +3321,31 @@ function HelpTooltip({
   className,
   contentClassName,
   size = 16,
-  label = "More info"
+  label = "More info",
+  triggerAs = "button"
 }) {
+  const triggerClassName = cn(
+    "relative flex shrink-0 cursor-help items-center justify-center rounded-full",
+    "text-chekin-gray-2 outline-none transition-colors hover:text-chekin-blue",
+    triggerAs === "button" && "focus-visible:shadow-chekin-focus",
+    className
+  );
+  const triggerStyle = { width: size, height: size };
+  const triggerContent = /* @__PURE__ */ jsxs34(Fragment5, { children: [
+    /* @__PURE__ */ jsx55(CircleQuestionMark, { "aria-hidden": "true", style: { width: size, height: size } }),
+    /* @__PURE__ */ jsx55("span", { className: "absolute -left-0.5 -top-0.5 h-5 w-5" })
+  ] });
   return /* @__PURE__ */ jsx55(TooltipProvider, { children: /* @__PURE__ */ jsxs34(TooltipRoot, { children: [
-    /* @__PURE__ */ jsx55(TooltipTrigger, { asChild: true, onClick, children: /* @__PURE__ */ jsxs34(
+    /* @__PURE__ */ jsx55(TooltipTrigger, { asChild: true, onClick, children: triggerAs === "button" ? /* @__PURE__ */ jsx55(
       "button",
       {
         type: "button",
         "aria-label": label,
-        className: cn(
-          "relative flex shrink-0 cursor-help items-center justify-center rounded-full",
-          "text-chekin-gray-2 outline-none transition-colors hover:text-chekin-blue",
-          "focus-visible:shadow-chekin-focus",
-          className
-        ),
-        style: { width: size, height: size },
-        children: [
-          /* @__PURE__ */ jsx55(CircleQuestionMark, { "aria-hidden": "true", style: { width: size, height: size } }),
-          /* @__PURE__ */ jsx55("span", { className: "absolute -left-0.5 -top-0.5 h-5 w-5" })
-        ]
+        className: triggerClassName,
+        style: triggerStyle,
+        children: triggerContent
       }
-    ) }),
+    ) : /* @__PURE__ */ jsx55("span", { "aria-label": label, className: triggerClassName, style: triggerStyle, children: triggerContent }) }),
     /* @__PURE__ */ jsx55(
       TooltipContent,
       {
@@ -3356,11 +3360,11 @@ function HelpTooltip({
 
 // src/icon/Icon.tsx
 import { forwardRef as forwardRef23, memo as memo2 } from "react";
-import { Fragment as Fragment5, jsx as jsx56, jsxs as jsxs35 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx56, jsxs as jsxs35 } from "react/jsx-runtime";
 var MissingIcon = forwardRef23(
   ({ size = 24, className = "", fallback = null, color, ...props }, ref) => {
     if (fallback) {
-      return /* @__PURE__ */ jsx56(Fragment5, { children: fallback });
+      return /* @__PURE__ */ jsx56(Fragment6, { children: fallback });
     }
     return /* @__PURE__ */ jsxs35(
       "svg",
@@ -5033,37 +5037,42 @@ var SelectLabel = React19.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 SelectLabel.displayName = "SelectLabel";
-var Select = ({
-  placeholder,
-  label,
-  supportingText,
-  errorText,
-  containerClassName,
-  triggerClassName,
-  children,
-  ...props
-}) => {
-  const reactId = React19.useId();
-  const triggerId = props.name ?? reactId;
-  return /* @__PURE__ */ jsxs46("div", { className: cn("flex flex-col gap-chekin-1 w-[300px]", containerClassName), children: [
-    label && /* @__PURE__ */ jsx74(
-      "label",
-      {
-        htmlFor: triggerId,
-        className: "text-chekin-navy font-sans font-medium text-[14px] leading-5",
-        children: label
-      }
-    ),
-    /* @__PURE__ */ jsxs46(SelectRoot, { ...props, children: [
-      /* @__PURE__ */ jsx74(SelectTrigger, { id: triggerId, className: triggerClassName, children: /* @__PURE__ */ jsx74(RadixSelect.Value, { placeholder }) }),
-      /* @__PURE__ */ jsx74(SelectContent, { children })
-    ] }),
-    /* @__PURE__ */ jsxs46("div", { className: "flex justify-between min-h-[15px]", children: [
-      supportingText && !errorText && /* @__PURE__ */ jsx74("span", { className: "text-chekin-gray-2 font-sans italic text-[12px] leading-[15px]", children: supportingText }),
-      errorText && /* @__PURE__ */ jsx74("span", { className: "ml-auto text-chekin-red font-sans font-medium text-[12px] leading-4 text-right", children: errorText })
-    ] })
-  ] });
-};
+var Select = React19.forwardRef(
+  ({
+    placeholder,
+    label,
+    supportingText,
+    errorText,
+    containerClassName,
+    triggerClassName,
+    children,
+    ...props
+  }, ref) => {
+    const reactId = React19.useId();
+    const triggerId = props.name ?? reactId;
+    const internalRef = React19.useRef(null);
+    const combinedRef = useCombinedRef(ref, internalRef);
+    return /* @__PURE__ */ jsxs46("div", { className: cn("flex flex-col gap-chekin-1 w-[300px]", containerClassName), children: [
+      label && /* @__PURE__ */ jsx74(
+        "label",
+        {
+          htmlFor: triggerId,
+          className: "text-chekin-navy font-sans font-medium text-[14px] leading-5",
+          children: label
+        }
+      ),
+      /* @__PURE__ */ jsxs46(SelectRoot, { ...props, children: [
+        /* @__PURE__ */ jsx74(SelectTrigger, { ref: combinedRef, id: triggerId, className: triggerClassName, children: /* @__PURE__ */ jsx74(RadixSelect.Value, { placeholder }) }),
+        /* @__PURE__ */ jsx74(SelectContent, { children })
+      ] }),
+      /* @__PURE__ */ jsxs46("div", { className: "flex justify-between min-h-[15px]", children: [
+        supportingText && !errorText && /* @__PURE__ */ jsx74("span", { className: "text-chekin-gray-2 font-sans italic text-[12px] leading-[15px]", children: supportingText }),
+        errorText && /* @__PURE__ */ jsx74("span", { className: "ml-auto text-chekin-red font-sans font-medium text-[12px] leading-4 text-right", children: errorText })
+      ] })
+    ] });
+  }
+);
+Select.displayName = "Select";
 
 // src/pagination/Pagination.tsx
 import { jsx as jsx75, jsxs as jsxs47 } from "react/jsx-runtime";
@@ -5280,7 +5289,7 @@ function useRadioOptions({ options, defaultValue, onChange }) {
 var styles_default5 = {};
 
 // src/radio/Radio.tsx
-import { Fragment as Fragment6, jsx as jsx78, jsxs as jsxs48 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx78, jsxs as jsxs48 } from "react/jsx-runtime";
 var Radio = forwardRef32(
   ({ options, value, onChange, error, className = "", disabled = false, renderOption }, ref) => {
     const { selectedValue, handleValueChange } = useRadioOptions({
@@ -5294,7 +5303,7 @@ var Radio = forwardRef32(
       }
       return option.value === selectedValue;
     };
-    return /* @__PURE__ */ jsxs48(Fragment6, { children: [
+    return /* @__PURE__ */ jsxs48(Fragment7, { children: [
       /* @__PURE__ */ jsx78(
         RadioGroup,
         {
@@ -5311,7 +5320,7 @@ var Radio = forwardRef32(
                 styles_default5.radio__wrapper,
                 (disabled || option.disabled) && styles_default5.radio__wrapper_disabled
               ),
-              children: renderOption ? renderOption({ option, isSelected: getIsSelected(option) }) : /* @__PURE__ */ jsxs48(Fragment6, { children: [
+              children: renderOption ? renderOption({ option, isSelected: getIsSelected(option) }) : /* @__PURE__ */ jsxs48(Fragment7, { children: [
                 /* @__PURE__ */ jsx78(
                   RadioGroupItem,
                   {
@@ -5569,42 +5578,74 @@ function SearchButton({ onClick, className, icon, ariaLabel }) {
 }
 
 // src/search-input/SearchInput.tsx
-import { Search as Search2, X as X6 } from "lucide-react";
+import { Loader2 as Loader23, Search as Search2, X as X6 } from "lucide-react";
 import { useTranslation as useTranslation18 } from "react-i18next";
 import { jsx as jsx85, jsxs as jsxs53 } from "react/jsx-runtime";
 function SearchInput({
+  disabled,
+  invalid,
+  label,
+  loading,
   onReset,
+  optional,
   placeholder,
+  tooltip,
   wrapperClassName,
   className,
   ...props
 }) {
   const { t } = useTranslation18();
   const placeholderText = placeholder || `${t("search_property")}...`;
-  return /* @__PURE__ */ jsxs53("div", { className: cn("input-wrapper relative", wrapperClassName), children: [
-    /* @__PURE__ */ jsx85(Search2, { className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 text-chekin-gray-2" }),
-    /* @__PURE__ */ jsx85(
-      Input,
-      {
-        ...props,
-        type: "text",
-        placeholder: placeholderText,
-        className: cn(
-          "w-full py-3 pl-12 pr-10 text-base text-chekin-navy focus:border-chekin-gray-3",
-          className
+  const isBlocked = Boolean(disabled) || Boolean(loading);
+  const optionalLabel = optional ? typeof optional === "string" ? optional : t("optional") : void 0;
+  const hasLabelMeta = Boolean(optionalLabel) || Boolean(tooltip);
+  return /* @__PURE__ */ jsxs53("div", { className: cn("input-wrapper", wrapperClassName), children: [
+    (label || hasLabelMeta) && /* @__PURE__ */ jsxs53("div", { className: "mb-2 inline-flex max-w-full items-center gap-1.5 text-sm font-medium text-chekin-navy", children: [
+      label && /* @__PURE__ */ jsx85("span", { className: "min-w-0 truncate", children: label }),
+      optionalLabel && /* @__PURE__ */ jsx85("span", { className: "shrink-0 text-xs font-normal text-chekin-gray-2", children: optionalLabel }),
+      tooltip && /* @__PURE__ */ jsx85(HelpTooltip, { content: tooltip, side: "top", size: 16 })
+    ] }),
+    /* @__PURE__ */ jsxs53("div", { className: "relative", children: [
+      /* @__PURE__ */ jsx85(Search2, { className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 text-chekin-gray-2" }),
+      /* @__PURE__ */ jsx85(
+        Input,
+        {
+          ...props,
+          type: "text",
+          disabled: isBlocked,
+          placeholder: placeholderText,
+          "aria-busy": loading,
+          "aria-invalid": invalid,
+          className: cn(
+            "w-full py-3 pl-12 pr-10 text-base text-chekin-navy focus:border-chekin-gray-3",
+            (loading || onReset) && "pr-20",
+            invalid && "border-[var(--status-danger)] text-[var(--status-danger)] placeholder:text-[var(--status-danger)]",
+            loading && "cursor-progress",
+            className
+          )
+        }
+      ),
+      (loading || onReset) && /* @__PURE__ */ jsxs53("div", { className: "absolute right-2 top-1/2 flex -translate-y-1/2 items-center gap-1", children: [
+        loading && /* @__PURE__ */ jsx85(
+          Loader23,
+          {
+            "aria-hidden": "true",
+            className: "h-5 w-5 animate-spin text-chekin-gray-2"
+          }
+        ),
+        onReset && /* @__PURE__ */ jsx85(
+          Button,
+          {
+            variant: "ghost",
+            onClick: onReset,
+            disabled: isBlocked,
+            className: "h-7 w-7 p-0 text-chekin-gray-2",
+            "aria-label": t("reset_search"),
+            children: /* @__PURE__ */ jsx85(X6, { className: "h-5 w-5" })
+          }
         )
-      }
-    ),
-    onReset && /* @__PURE__ */ jsx85(
-      Button,
-      {
-        variant: "ghost",
-        onClick: onReset,
-        className: "absolute right-2 top-1/2 h-7 w-7 -translate-y-1/2 p-0 text-chekin-gray-2",
-        "aria-label": t("reset_search"),
-        children: /* @__PURE__ */ jsx85(X6, { className: "h-5 w-5" })
-      }
-    )
+      ] })
+    ] })
   ] });
 }
 
@@ -5797,7 +5838,7 @@ SelectorButton.displayName = "SelectorButton";
 var styles_default8 = {};
 
 // src/selectors/Selectors.tsx
-import { Fragment as Fragment7, jsx as jsx89, jsxs as jsxs56 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx89, jsxs as jsxs56 } from "react/jsx-runtime";
 var getValueArray = (value) => {
   if (value) {
     return Array.isArray(value) ? value : [value];
@@ -5854,7 +5895,7 @@ function SelectorsInternal({
   useEffect9(() => {
     onAnySelectorActive?.(isAnyActive);
   }, [isAnyActive, onAnySelectorActive]);
-  return /* @__PURE__ */ jsxs56(Fragment7, { children: [
+  return /* @__PURE__ */ jsxs56(Fragment8, { children: [
     label && /* @__PURE__ */ jsx89("div", { className: styles_default8.labelWrapper, children: /* @__PURE__ */ jsx89("div", { className: cn(styles_default8.name, "label"), children: label }) }),
     /* @__PURE__ */ jsx89(
       "div",
@@ -6831,7 +6872,7 @@ function SortingAction({
 // src/status-button/StatusButton.tsx
 import { useMemo as useMemo3 } from "react";
 import { useTranslation as useTranslation20 } from "react-i18next";
-import { AlertCircle as AlertCircle2, CheckCircle, Loader2 as Loader23 } from "lucide-react";
+import { AlertCircle as AlertCircle2, CheckCircle, Loader2 as Loader24 } from "lucide-react";
 import { jsx as jsx97, jsxs as jsxs61 } from "react/jsx-runtime";
 function StatusButton({
   hidden,
@@ -6850,7 +6891,7 @@ function StatusButton({
   const configMap = useMemo3(() => {
     const defaultLoadingConfig = {
       text: loadingText ?? `${t("saving")}...`,
-      icon: /* @__PURE__ */ jsx97(Loader23, { className: "h-4 w-4 animate-spin" }),
+      icon: /* @__PURE__ */ jsx97(Loader24, { className: "h-4 w-4 animate-spin" }),
       variant,
       isLoading: true
     };
@@ -7249,10 +7290,10 @@ var TASK_VARIANTS = {
 import { Toaster, toast as toast2 } from "sonner";
 
 // src/toaster/useUpdateToast.ts
-import { useCallback as useCallback9, useRef as useRef8 } from "react";
+import { useCallback as useCallback9, useRef as useRef9 } from "react";
 import { toast } from "sonner";
 function useUpdateToast({ id }) {
-  const toastIdRef = useRef8("");
+  const toastIdRef = useRef9("");
   const getToastOptions = useCallback9(
     (options) => ({
       id: toastIdRef.current,
@@ -7737,7 +7778,7 @@ var LABEL_PLACEMENT = /* @__PURE__ */ ((LABEL_PLACEMENT2) => {
 var styles_default10 = {};
 
 // src/three-dots-loader/ThreeDotsLoader.tsx
-import { Fragment as Fragment8, jsx as jsx113, jsxs as jsxs71 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx113, jsxs as jsxs71 } from "react/jsx-runtime";
 function Dots({
   height,
   width,
@@ -7759,10 +7800,10 @@ function ThreeDotsLoader({
 }) {
   const dots = /* @__PURE__ */ jsx113(Dots, { color, height, width });
   if (label) {
-    return /* @__PURE__ */ jsx113("div", { className: cn(styles_default10.Loader, className), children: labelPlacement === 0 /* right */ ? /* @__PURE__ */ jsxs71(Fragment8, { children: [
+    return /* @__PURE__ */ jsx113("div", { className: cn(styles_default10.Loader, className), children: labelPlacement === 0 /* right */ ? /* @__PURE__ */ jsxs71(Fragment9, { children: [
       dots,
       /* @__PURE__ */ jsx113("div", { children: label })
-    ] }) : /* @__PURE__ */ jsxs71(Fragment8, { children: [
+    ] }) : /* @__PURE__ */ jsxs71(Fragment9, { children: [
       /* @__PURE__ */ jsx113("div", { children: label }),
       dots
     ] }) });
@@ -8007,6 +8048,13 @@ function stripTime(date) {
 function isValidDate(value) {
   return value instanceof Date && !Number.isNaN(value.getTime());
 }
+function normalizeDateValue(value) {
+  if (value === "" || value === null || value === void 0) {
+    return null;
+  }
+  const date = value instanceof Date ? value : new Date(value);
+  return isValidDate(date) ? date : null;
+}
 function clampDate(date, minDate, maxDate) {
   const normalizedDate = stripTime(date);
   const normalizedMinDate = isValidDate(minDate) ? stripTime(minDate) : null;
@@ -8671,6 +8719,8 @@ var DEVICE = {
 
 // src/field-trigger/FieldTrigger.tsx
 import * as React29 from "react";
+import { Loader2 as Loader25 } from "lucide-react";
+import { useTranslation as useTranslation22 } from "react-i18next";
 
 // src/field-error-message/FieldErrorMessage.tsx
 import { AlertCircle as AlertCircle3 } from "lucide-react";
@@ -8711,7 +8761,7 @@ function FieldErrorMessage({
 }
 
 // src/field-trigger/FieldTrigger.tsx
-import { Fragment as Fragment9, jsx as jsx120, jsxs as jsxs77 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx120, jsxs as jsxs77 } from "react/jsx-runtime";
 var FieldTrigger = React29.forwardRef(
   ({
     as = "button",
@@ -8728,30 +8778,63 @@ var FieldTrigger = React29.forwardRef(
     placeholder,
     disabled,
     error,
+    loading,
+    optional,
+    tooltip,
     describedBy,
     className,
     contentClassName,
     trailingAdornment,
     forceFloatingLabel = false,
+    forceLabelText = false,
     hideErrorMessage = false,
     children,
     onClick,
     onKeyDown,
     ...props
   }, ref) => {
+    const { t } = useTranslation22();
     const hasValue = Boolean(valueText);
     const isRaised = hasValue || forceFloatingLabel;
-    const animatedLabel = isRaised ? labelText ?? label : label ?? placeholder;
+    const optionalLabel = optional ? typeof optional === "string" ? optional : t("optional") : void 0;
+    const visibleLabelText = labelText ?? label;
+    const hasLabelMeta = Boolean(optionalLabel) || Boolean(tooltip);
+    const resolvedLabelText = visibleLabelText && hasLabelMeta ? /* @__PURE__ */ jsxs77("span", { className: "inline-flex max-w-full items-center gap-1.5 align-middle", children: [
+      /* @__PURE__ */ jsx120("span", { className: "min-w-0 truncate", children: visibleLabelText }),
+      optionalLabel && /* @__PURE__ */ jsxs77("span", { className: "shrink-0 text-[12px] relative top-[1px] font-normal leading-4 text-current opacity-70", children: [
+        "(",
+        optionalLabel,
+        ")"
+      ] }),
+      tooltip && /* @__PURE__ */ jsx120(
+        HelpTooltip,
+        {
+          content: tooltip,
+          side: "top",
+          size: 16,
+          triggerAs: as === "button" ? "span" : "button",
+          className: "pointer-events-auto text-current opacity-70 hover:text-current hover:opacity-100"
+        }
+      )
+    ] }) : visibleLabelText;
+    const animatedLabel = forceLabelText ? resolvedLabelText ?? placeholder : isRaised ? resolvedLabelText : label ?? placeholder;
     const isAirbnbVariant = variant === "airbnb";
+    const hasInvalidState = Boolean(error);
+    const errorMessage = typeof error === "string" ? error : void 0;
+    const isBlocked = Boolean(disabled) || Boolean(loading);
+    const resolvedTrailingAdornment = loading || trailingAdornment ? /* @__PURE__ */ jsxs77("span", { className: "flex items-center gap-2", children: [
+      trailingAdornment,
+      loading && /* @__PURE__ */ jsx120(Loader25, { "aria-hidden": "true", className: "h-5 w-5 animate-spin text-[#7A8399]" })
+    ] }) : void 0;
     const sharedClasses = cn(
       "relative flex border w-full items-center bg-[var(--form-background-color,#fff)] text-left transition-colors focus-visible:outline-none",
       isAirbnbVariant ? "rounded-[var(--form-input-border-radius,12px)] border-[var(--form-border-color,#8c8c8c)] pl-4 pr-4 focus-visible:ring-2 focus-visible:ring-[var(--form-title-color,#222222)] focus-visible:ring-offset-2" : "rounded-[10px] px-3.5 focus-visible:border-[#315EFB]",
       isAirbnbVariant ? isRaised ? "min-h-[60px]" : "h-[60px]" : "min-h-[48px]",
-      error ? isAirbnbVariant ? "border-[var(--status-danger)] bg-[var(--form-error-background,#FFF5F3)]" : "border-[var(--status-danger)] bg-white" : isAirbnbVariant ? "border-[var(--form-border-color,#8c8c8c)]" : "border-[#A8A8A4] bg-white",
-      disabled ? "cursor-not-allowed opacity-50" : isAirbnbVariant ? "cursor-pointer" : "cursor-text",
+      hasInvalidState ? isAirbnbVariant ? "border-[var(--status-danger)] bg-[var(--form-error-background,#FFF5F3)]" : "border-[var(--status-danger)] bg-white" : isAirbnbVariant ? "border-[var(--form-border-color,#8c8c8c)]" : "border-[#A8A8A4] bg-white",
+      disabled ? "cursor-not-allowed opacity-50" : loading ? "cursor-progress" : isAirbnbVariant ? "cursor-pointer" : "cursor-text",
       className
     );
-    const sharedContent = /* @__PURE__ */ jsxs77(Fragment9, { children: [
+    const sharedContent = /* @__PURE__ */ jsxs77(Fragment10, { children: [
       /* @__PURE__ */ jsxs77(
         "span",
         {
@@ -8766,9 +8849,10 @@ var FieldTrigger = React29.forwardRef(
               {
                 id: labelId,
                 className: cn(
-                  "pointer-events-none absolute left-0 origin-left truncate transition-all duration-200 ease-out",
+                  "absolute left-0 origin-left truncate transition-all duration-200 ease-out",
+                  hasLabelMeta ? "" : "pointer-events-none",
                   isAirbnbVariant ? isRaised ? "top-0 translate-y-0 text-xs leading-5" : "top-1/2 -translate-y-1/2 text-[16px] leading-7" : isRaised ? "-top-2 translate-y-0 bg-[var(--form-background-color,#fff)] px-1 text-[12px] font-medium leading-4" : "top-1/2 -translate-y-1/2 text-[16px] leading-6",
-                  error ? "text-[var(--status-danger)]" : isAirbnbVariant ? "text-[var(--form-placeholder-color,#6c6c6c)]" : "text-[#7A8399]"
+                  hasInvalidState ? "text-[var(--status-danger)]" : isAirbnbVariant ? "text-[var(--form-placeholder-color,#6c6c6c)]" : "text-[#7A8399]"
                 ),
                 children: animatedLabel
               }
@@ -8780,7 +8864,7 @@ var FieldTrigger = React29.forwardRef(
                 className: cn(
                   "absolute left-0 block truncate transition-all duration-200 ease-out",
                   isAirbnbVariant ? "bottom-0 translate-y-0 text-[16px] leading-6 opacity-100" : "bottom-[11px] text-[16px] leading-6",
-                  error ? "text-[var(--status-danger)]" : "text-[var(--form-field-text-color,#222222)]"
+                  hasInvalidState ? "text-[var(--status-danger)]" : "text-[var(--form-field-text-color,#222222)]"
                 ),
                 children: valueText
               }
@@ -8788,7 +8872,7 @@ var FieldTrigger = React29.forwardRef(
           ]
         }
       ),
-      trailingAdornment && /* @__PURE__ */ jsx120(
+      resolvedTrailingAdornment && /* @__PURE__ */ jsx120(
         "span",
         {
           "aria-hidden": "true",
@@ -8796,7 +8880,7 @@ var FieldTrigger = React29.forwardRef(
             "pointer-events-none absolute top-1/2 -translate-y-1/2",
             isAirbnbVariant ? "right-5" : "right-4"
           ),
-          children: trailingAdornment
+          children: resolvedTrailingAdornment
         }
       )
     ] });
@@ -8810,10 +8894,11 @@ var FieldTrigger = React29.forwardRef(
           type: "button",
           "aria-labelledby": hasValue && valueId ? `${labelId} ${valueId}` : labelId,
           "aria-describedby": describedBy,
-          "aria-invalid": Boolean(error),
-          disabled,
-          onClick,
-          onKeyDown,
+          "aria-invalid": hasInvalidState,
+          "aria-busy": loading,
+          disabled: isBlocked,
+          onClick: isBlocked ? void 0 : onClick,
+          onKeyDown: isBlocked ? void 0 : onKeyDown,
           className: sharedClasses,
           ...props,
           children: sharedContent
@@ -8825,16 +8910,17 @@ var FieldTrigger = React29.forwardRef(
           ref,
           "aria-labelledby": hasValue && valueId ? `${labelId} ${valueId}` : labelId,
           "aria-describedby": describedBy,
-          "aria-invalid": Boolean(error),
-          "aria-disabled": disabled,
-          onClick,
-          onKeyDown,
+          "aria-invalid": hasInvalidState,
+          "aria-busy": loading,
+          "aria-disabled": isBlocked,
+          onClick: isBlocked ? void 0 : onClick,
+          onKeyDown: isBlocked ? void 0 : onKeyDown,
           className: sharedClasses,
           ...props,
           children: sharedContent
         }
       ),
-      error && !hideErrorMessage && /* @__PURE__ */ jsx120(FieldErrorMessage, { id: errorId, message: error })
+      errorMessage && !hideErrorMessage && /* @__PURE__ */ jsx120(FieldErrorMessage, { id: errorId, message: errorMessage })
     ] });
   }
 );
@@ -8843,154 +8929,190 @@ FieldTrigger.displayName = "FieldTrigger";
 // src/datepicker/DatePicker.tsx
 import { jsx as jsx121, jsxs as jsxs78 } from "react/jsx-runtime";
 var DEFAULT_MIN_DATE = new Date(1920, 0, 1);
-function DatePicker({
-  variant = "default",
-  label,
-  topLabel,
-  value,
-  defaultValue,
-  onChange,
-  placeholder = "Select a date",
-  disabled,
-  error,
-  className,
-  name,
-  minDate,
-  maxDate,
-  locale = "en-US",
-  mobileTitle,
-  doneLabel = "Done",
-  formatValue = formatDateValue
-}) {
-  const { isMatch: isMobile } = useScreenResize(DEVICE.mobileXL);
-  const [isOpen, setIsOpen] = React30.useState(false);
-  const triggerId = React30.useId();
-  const pickerId = React30.useId();
-  const labelId = React30.useId();
-  const valueId = React30.useId();
-  const helperTextId = React30.useId();
-  const errorId = React30.useId();
-  const triggerRef = React30.useRef(null);
-  const monthLabels = React30.useMemo(() => getMonthLabels(locale), [locale]);
-  const resolvedMinDate = React30.useMemo(() => minDate ?? DEFAULT_MIN_DATE, [minDate]);
-  const resolvedMaxDate = React30.useMemo(() => maxDate ?? /* @__PURE__ */ new Date(), [maxDate]);
-  const resolvedValue = React30.useMemo(
-    () => value ? clampDate(value, resolvedMinDate, resolvedMaxDate) : null,
-    [resolvedMaxDate, resolvedMinDate, value]
-  );
-  const hasValue = Boolean(resolvedValue);
-  const {
-    dayIndex,
-    dayListRef,
-    dayScrollTop,
-    days,
-    draftDate,
-    handleColumnKeyDown,
-    handleColumnScroll,
-    handleOptionSelect,
-    monthIndex,
-    monthListRef,
-    months,
-    monthScrollTop,
-    yearIndex,
-    yearListRef,
-    yearScrollTop,
-    years
-  } = useDatePickerWheel({
-    isOpen,
-    value: resolvedValue,
+var DatePicker = React30.forwardRef(
+  ({
+    variant = "default",
+    label,
+    topLabel,
+    value,
     defaultValue,
-    minDate: resolvedMinDate,
-    maxDate: resolvedMaxDate
-  });
-  const handleOpenChange = React30.useCallback((nextOpen) => {
-    setIsOpen(nextOpen);
-    if (!nextOpen) {
-      triggerRef.current?.focus();
-    }
-  }, []);
-  const handleDone = React30.useCallback(() => {
-    onChange(clampDate(draftDate, resolvedMinDate, resolvedMaxDate));
-    handleOpenChange(false);
-  }, [draftDate, handleOpenChange, onChange, resolvedMaxDate, resolvedMinDate]);
-  const handleTriggerClick = React30.useCallback(() => {
-    if (disabled) return;
-    setIsOpen(true);
-  }, [disabled]);
-  const handleTriggerKeyDown = React30.useCallback(
-    (event) => {
-      if (disabled) return;
-      if (event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "Enter" || event.key === " ") {
-        event.preventDefault();
-        setIsOpen(true);
-      }
-    },
-    [disabled]
-  );
-  return /* @__PURE__ */ jsxs78("div", { className: cn("relative w-full max-w-[480px]", className), children: [
-    name && /* @__PURE__ */ jsx121(
-      "input",
-      {
-        type: "hidden",
-        name,
-        value: resolvedValue ? formatDateInputValue(resolvedValue) : ""
-      }
-    ),
-    /* @__PURE__ */ jsx121(
-      FieldTrigger,
-      {
-        id: triggerId,
-        ref: triggerRef,
-        variant,
-        label,
-        topLabel,
-        labelId,
-        valueId: hasValue ? valueId : void 0,
-        helperTextId: !hasValue ? helperTextId : void 0,
-        errorId: error ? errorId : void 0,
-        describedBy: error ? errorId : void 0,
-        labelText: topLabel ? placeholder : void 0,
-        valueText: resolvedValue ? formatValue(resolvedValue) : void 0,
-        placeholder,
-        disabled,
-        error,
-        "aria-haspopup": "dialog",
-        "aria-expanded": isOpen,
-        onClick: handleTriggerClick,
-        onKeyDown: handleTriggerKeyDown,
-        trailingAdornment: /* @__PURE__ */ jsx121(Calendar2, { className: "h-5 w-5 text-[#1F1F1B]", strokeWidth: 2 })
-      }
-    ),
-    /* @__PURE__ */ jsx121(
-      DatePickerContent,
-      {
-        baseId: pickerId,
-        open: isOpen,
-        isMobile,
-        label,
-        title: mobileTitle ?? label,
-        doneLabel,
-        monthLabels: months.map((month) => monthLabels[month] ?? ""),
-        days,
-        years,
-        monthIndex,
-        dayIndex,
-        yearIndex,
-        monthScrollTop,
-        dayScrollTop,
-        yearScrollTop,
-        monthListRef,
-        dayListRef,
-        yearListRef,
-        onOpenChange: handleOpenChange,
-        onDone: handleDone,
-        onColumnScroll: handleColumnScroll,
-        onColumnKeyDown: handleColumnKeyDown,
-        onOptionSelect: handleOptionSelect
+    onChange,
+    placeholder = "Select a date",
+    disabled,
+    error,
+    invalid,
+    loading,
+    optional,
+    tooltip,
+    className,
+    name,
+    minDate,
+    maxDate,
+    locale = "en-US",
+    mobileTitle,
+    doneLabel = "Done",
+    formatValue = formatDateValue
+  }, ref) => {
+    const { isMatch: isMobile } = useScreenResize(DEVICE.mobileXL);
+    const [isOpen, setIsOpen] = React30.useState(false);
+    const triggerId = React30.useId();
+    const pickerId = React30.useId();
+    const labelId = React30.useId();
+    const valueId = React30.useId();
+    const helperTextId = React30.useId();
+    const errorId = React30.useId();
+    const internalRef = React30.useRef(null);
+    const combinedRef = useCombinedRef(ref, internalRef);
+    const monthLabels = React30.useMemo(() => getMonthLabels(locale), [locale]);
+    const resolvedMinDate = React30.useMemo(() => minDate ?? DEFAULT_MIN_DATE, [minDate]);
+    const resolvedMaxDate = React30.useMemo(() => maxDate ?? /* @__PURE__ */ new Date(), [maxDate]);
+    const normalizedValue = React30.useMemo(() => normalizeDateValue(value), [value]);
+    const normalizedDefaultValue = React30.useMemo(
+      () => normalizeDateValue(defaultValue),
+      [defaultValue]
+    );
+    const resolvedValue = React30.useMemo(
+      () => normalizedValue ? clampDate(normalizedValue, resolvedMinDate, resolvedMaxDate) : null,
+      [normalizedValue, resolvedMaxDate, resolvedMinDate]
+    );
+    const hasValue = Boolean(resolvedValue);
+    const isBlocked = Boolean(disabled) || Boolean(loading);
+    const triggerError = error ?? invalid;
+    const {
+      dayIndex,
+      dayListRef,
+      dayScrollTop,
+      days,
+      draftDate,
+      handleColumnKeyDown,
+      handleColumnScroll,
+      handleOptionSelect,
+      monthIndex,
+      monthListRef,
+      months,
+      monthScrollTop,
+      yearIndex,
+      yearListRef,
+      yearScrollTop,
+      years
+    } = useDatePickerWheel({
+      isOpen,
+      value: resolvedValue,
+      defaultValue: normalizedDefaultValue,
+      minDate: resolvedMinDate,
+      maxDate: resolvedMaxDate
+    });
+    const handleOpenChange = React30.useCallback(
+      (nextOpen) => {
+        if (isBlocked && nextOpen) return;
+        setIsOpen(nextOpen);
+        if (!nextOpen) {
+          internalRef.current?.focus();
+        }
+      },
+      [isBlocked]
+    );
+    const handleDone = React30.useCallback(() => {
+      if (isBlocked) return;
+      onChange(clampDate(draftDate, resolvedMinDate, resolvedMaxDate));
+      handleOpenChange(false);
+    }, [
+      draftDate,
+      handleOpenChange,
+      isBlocked,
+      onChange,
+      resolvedMaxDate,
+      resolvedMinDate
+    ]);
+    const handleTriggerClick = React30.useCallback(() => {
+      if (isBlocked) return;
+      setIsOpen(true);
+    }, [isBlocked]);
+    const handleTriggerKeyDown = React30.useCallback(
+      (event) => {
+        if (isBlocked) return;
+        if (event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          setIsOpen(true);
+        }
+      },
+      [isBlocked]
+    );
+    React30.useEffect(() => {
+      if (isBlocked) {
+        setIsOpen(false);
       }
-    )
-  ] });
-}
+    }, [isBlocked]);
+    return /* @__PURE__ */ jsxs78("div", { className: cn("relative w-full max-w-[425px]", className), children: [
+      name && /* @__PURE__ */ jsx121(
+        "input",
+        {
+          type: "hidden",
+          name,
+          value: resolvedValue ? formatDateInputValue(resolvedValue) : ""
+        }
+      ),
+      /* @__PURE__ */ jsx121(
+        FieldTrigger,
+        {
+          id: triggerId,
+          ref: combinedRef,
+          variant,
+          label,
+          topLabel,
+          labelId,
+          valueId: hasValue ? valueId : void 0,
+          helperTextId: !hasValue ? helperTextId : void 0,
+          errorId: error ? errorId : void 0,
+          describedBy: error ? errorId : void 0,
+          labelText: topLabel ? placeholder : void 0,
+          valueText: resolvedValue ? formatValue(resolvedValue) : void 0,
+          placeholder,
+          disabled,
+          error: triggerError,
+          loading,
+          optional,
+          tooltip,
+          forceLabelText: Boolean(optional) || Boolean(tooltip),
+          "aria-haspopup": "dialog",
+          "aria-expanded": isOpen,
+          onClick: handleTriggerClick,
+          onKeyDown: handleTriggerKeyDown,
+          trailingAdornment: /* @__PURE__ */ jsx121(Calendar2, { className: "h-5 w-5 text-[#1F1F1B]", strokeWidth: 2 })
+        }
+      ),
+      /* @__PURE__ */ jsx121(
+        DatePickerContent,
+        {
+          baseId: pickerId,
+          open: isOpen,
+          isMobile,
+          label,
+          title: mobileTitle ?? label,
+          doneLabel,
+          monthLabels: months.map((month) => monthLabels[month] ?? ""),
+          days,
+          years,
+          monthIndex,
+          dayIndex,
+          yearIndex,
+          monthScrollTop,
+          dayScrollTop,
+          yearScrollTop,
+          monthListRef,
+          dayListRef,
+          yearListRef,
+          onOpenChange: handleOpenChange,
+          onDone: handleDone,
+          onColumnScroll: handleColumnScroll,
+          onColumnKeyDown: handleColumnKeyDown,
+          onOptionSelect: handleOptionSelect
+        }
+      )
+    ] });
+  }
+);
+DatePicker.displayName = "DatePicker";
 
 // src/responsive-sheet/ResponsiveSheet.tsx
 import { jsx as jsx122, jsxs as jsxs79 } from "react/jsx-runtime";
@@ -9111,6 +9233,10 @@ var AirbnbInput = React31.forwardRef(
     topLabel,
     helperText,
     error,
+    invalid,
+    loading,
+    optional,
+    tooltip,
     wrapperClassName,
     fieldClassName,
     contentClassName,
@@ -9135,7 +9261,7 @@ var AirbnbInput = React31.forwardRef(
     const fieldId = `${inputId}-field`;
     const labelId = `${inputId}-label`;
     const errorId = `${inputId}-error`;
-    const accessibleLabel = label ?? placeholder;
+    const accessibleLabel = placeholder ?? label;
     const [isFocused, setIsFocused] = React31.useState(false);
     const [currentValue, setCurrentValue] = React31.useState(
       () => value != null ? getInputValue(value) : getInputValue(defaultValue)
@@ -9143,6 +9269,10 @@ var AirbnbInput = React31.forwardRef(
     const resolvedValue = value != null ? getInputValue(value) : currentValue;
     const hasValue = resolvedValue.length > 0;
     const shouldShowLabel = hasValue || isFocused;
+    const hasInvalidState = Boolean(error) || Boolean(invalid);
+    const triggerError = error ?? invalid;
+    const hasLabelMeta = Boolean(optional) || Boolean(tooltip);
+    const isBlocked = Boolean(disabled) || Boolean(loading);
     React31.useLayoutEffect(() => {
       const nextValue = value != null ? getInputValue(value) : getInputValue(inputRef.current?.value);
       setCurrentValue((prevValue) => prevValue === nextValue ? prevValue : nextValue);
@@ -9191,7 +9321,10 @@ var AirbnbInput = React31.forwardRef(
         labelText: helperText ?? label,
         placeholder: placeholder ?? label,
         disabled,
-        error,
+        error: triggerError,
+        loading,
+        optional,
+        tooltip,
         describedBy: error && renderErrorMessage ? errorId : void 0,
         className: cn(
           variant === "airbnb" ? "px-4 focus-within:ring-2 focus-within:ring-[#1F1F1B] focus-within:ring-offset-2" : "px-3.5 focus-within:border-[#315EFB]",
@@ -9204,6 +9337,7 @@ var AirbnbInput = React31.forwardRef(
         ),
         trailingAdornment,
         forceFloatingLabel: shouldShowLabel,
+        forceLabelText: hasLabelMeta,
         hideErrorMessage: !renderErrorMessage,
         children: /* @__PURE__ */ jsx123(
           "input",
@@ -9212,21 +9346,23 @@ var AirbnbInput = React31.forwardRef(
             id: inputId,
             ref: setRefs,
             type,
-            disabled,
+            disabled: isBlocked,
             value,
             defaultValue,
             onChange: handleChange,
             onFocus: handleFocus,
             onBlur: handleBlur,
             placeholder: "",
-            "aria-invalid": Boolean(error),
+            "aria-invalid": hasInvalidState,
+            "aria-busy": loading,
             "aria-describedby": error && renderErrorMessage ? errorId : void 0,
-            "aria-labelledby": accessibleLabel ? labelId : void 0,
+            "aria-label": accessibleLabel && hasLabelMeta ? accessibleLabel : void 0,
+            "aria-labelledby": accessibleLabel && !hasLabelMeta ? labelId : void 0,
             className: cn(
               "absolute left-0 h-6 w-full border-0 bg-transparent p-0 text-[16px] leading-6 text-[#1F1F1B] outline-none placeholder:text-[#7A8399]",
               variant === "airbnb" ? "bottom-0" : "bottom-[12px]",
-              error ? "text-[var(--status-danger)] placeholder:text-[var(--status-danger)]" : "",
-              disabled ? "cursor-not-allowed" : "",
+              hasInvalidState ? "text-[var(--status-danger)] placeholder:text-[var(--status-danger)]" : "",
+              disabled ? "cursor-not-allowed" : loading ? "cursor-progress" : "",
               inputClassName,
               className
             )
@@ -9601,6 +9737,9 @@ var SelectTrigger2 = React32.forwardRef(
     helperText,
     valueLabel,
     disabled,
+    loading,
+    optional,
+    tooltip,
     error,
     hideErrorMessage,
     labelId,
@@ -9632,6 +9771,10 @@ var SelectTrigger2 = React32.forwardRef(
         placeholder: helperText,
         describedBy,
         error,
+        loading,
+        optional,
+        tooltip,
+        forceLabelText: Boolean(optional) || Boolean(tooltip),
         hideErrorMessage,
         disabled,
         onClick,
@@ -9998,9 +10141,9 @@ function useSelectIds({ name, hasValue, error, hideErrorMessage }) {
 }
 
 // src/lib/use-outside-click.ts
-import { useCallback as useCallback18, useEffect as useEffect16, useRef as useRef15 } from "react";
+import { useCallback as useCallback18, useEffect as useEffect17, useRef as useRef16 } from "react";
 function useOutsideClick(elementRef, onOutsideClick, nested) {
-  const handleOutsideClick = useRef15(onOutsideClick);
+  const handleOutsideClick = useRef16(onOutsideClick);
   handleOutsideClick.current = onOutsideClick;
   const checkNestedElements = useCallback18(
     (event) => {
@@ -10033,7 +10176,7 @@ function useOutsideClick(elementRef, onOutsideClick, nested) {
     },
     [nested]
   );
-  useEffect16(() => {
+  useEffect17(() => {
     function handleClickOutside(event) {
       const isNestedElement = checkNestedElements(event);
       if (elementRef?.current && !elementRef.current.contains(event.target) && !isNestedElement) {
@@ -10051,7 +10194,7 @@ function useOutsideClick(elementRef, onOutsideClick, nested) {
 
 // src/airbnb/select/Select.tsx
 import { jsx as jsx129, jsxs as jsxs83 } from "react/jsx-runtime";
-function AirbnbSelect({
+var AirbnbSelect = React36.forwardRef(function AirbnbSelect2({
   options,
   value,
   onChange,
@@ -10062,7 +10205,11 @@ function AirbnbSelect({
   getValueLabel,
   renderTrigger,
   disabled,
+  loading,
+  optional,
+  tooltip,
   error,
+  invalid,
   hideErrorMessage,
   className,
   menuClassName,
@@ -10071,12 +10218,14 @@ function AirbnbSelect({
   mobileTitle,
   name,
   noOptionsMessage
-}) {
+}, ref) {
   const { isMatch: isMobile } = useScreenResize(DEVICE.mobileXL);
   const [isOpen, setIsOpen] = React36.useState(false);
   const containerRef = React36.useRef(null);
   const hasValue = Boolean(value);
   const helperText = placeholder ?? label;
+  const isBlocked = Boolean(disabled) || Boolean(loading);
+  const triggerError = error ?? invalid;
   const {
     triggerId,
     labelId,
@@ -10102,14 +10251,14 @@ function AirbnbSelect({
     isOpen,
     options,
     value,
-    disabled
+    disabled: isBlocked
   });
   const {
     highlightedIndex,
     listRef: desktopListRef,
     setHighlightedIndex,
     setOptionRef,
-    triggerRef,
+    triggerRef: desktopTriggerRef,
     focusTrigger,
     handleSelect: handleDesktopSelect,
     handleMenuKeyDown,
@@ -10119,12 +10268,18 @@ function AirbnbSelect({
     isOpen,
     options,
     value,
-    disabled,
+    disabled: isBlocked,
     onChange
   });
+  const combinedRef = useCombinedRef(ref, desktopTriggerRef);
   const activeMobileIndex = getOptionIndex(options, pendingValue);
   const valueLabel = value ? getValueLabel?.(value) ?? String(value.label) : void 0;
   useOutsideClick(containerRef, isOpen && !isMobile ? () => setIsOpen(false) : null);
+  React36.useEffect(() => {
+    if (isBlocked) {
+      setIsOpen(false);
+    }
+  }, [isBlocked]);
   React36.useEffect(
     function setCorrectOptionIfThereIsOnlyValue() {
       if (value?.value === void 0 || value.value === null || value.label !== "") {
@@ -10139,24 +10294,26 @@ function AirbnbSelect({
   );
   const handleMobileOpenChange = React36.useCallback(
     (nextOpen) => {
+      if (isBlocked && nextOpen) return;
       setIsOpen(nextOpen);
       syncPendingValue(value ?? null);
       if (!nextOpen) {
         focusTrigger();
       }
     },
-    [focusTrigger, syncPendingValue, value]
+    [focusTrigger, isBlocked, syncPendingValue, value]
   );
   const handleMobileDone = React36.useCallback(() => {
+    if (isBlocked) return;
     const finalOption = pendingValue;
     if (finalOption && finalOption.value !== value?.value) {
       onChange(finalOption);
     }
     setIsOpen(false);
     focusTrigger();
-  }, [focusTrigger, onChange, pendingValue, value]);
+  }, [focusTrigger, isBlocked, onChange, pendingValue, value]);
   const handleTriggerClick = React36.useCallback(() => {
-    if (disabled) return;
+    if (isBlocked) return;
     setIsOpen((prev) => {
       const nextOpen = !prev;
       if (isMobile) {
@@ -10164,10 +10321,10 @@ function AirbnbSelect({
       }
       return nextOpen;
     });
-  }, [disabled, isMobile, syncPendingValue, value]);
+  }, [isBlocked, isMobile, syncPendingValue, value]);
   const handleRootTriggerKeyDown = (event) => {
     if (isMobile) {
-      if (disabled) return;
+      if (isBlocked) return;
       if (event.key === "ArrowDown" || event.key === "ArrowUp" || event.key === "Enter" || event.key === " ") {
         event.preventDefault();
         syncPendingValue(value ?? null);
@@ -10208,7 +10365,7 @@ function AirbnbSelect({
       handleMobileOpenChange(false);
     }
   };
-  return /* @__PURE__ */ jsxs83("div", { ref: containerRef, className: cn("relative w-full max-w-[480px]", className), children: [
+  return /* @__PURE__ */ jsxs83("div", { ref: containerRef, className: cn("relative w-full max-w-[425px]", className), children: [
     name && /* @__PURE__ */ jsx129("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
     renderTrigger ? renderTrigger({
       id: triggerId,
@@ -10219,18 +10376,22 @@ function AirbnbSelect({
       helperText,
       value,
       valueLabel,
-      disabled,
+      disabled: isBlocked,
+      loading,
+      optional,
+      tooltip,
       error,
+      invalid,
       listboxId,
       describedBy,
-      triggerRef,
+      triggerRef: combinedRef,
       onClick: handleTriggerClick,
       onKeyDown: handleRootTriggerKeyDown
     }) : /* @__PURE__ */ jsx129(
       SelectTrigger2,
       {
         id: triggerId,
-        ref: triggerRef,
+        ref: combinedRef,
         open: isOpen,
         variant,
         label,
@@ -10238,7 +10399,10 @@ function AirbnbSelect({
         helperText,
         valueLabel,
         disabled,
-        error,
+        loading,
+        optional,
+        tooltip,
+        error: triggerError,
         hideErrorMessage,
         labelId,
         valueId,
@@ -10263,7 +10427,7 @@ function AirbnbSelect({
         doneLabel,
         errorId: describedErrorId,
         options,
-        disabled,
+        disabled: isBlocked,
         menuClassName,
         scrollTop: mobileScrollTop,
         activeIndex: activeMobileIndex,
@@ -10294,7 +10458,7 @@ function AirbnbSelect({
         onKeyDown: (event) => {
           handleMenuKeyDown(event, () => setIsOpen(false));
         },
-        disabled,
+        disabled: isBlocked,
         menuClassName,
         dropdownClassName,
         listRef: desktopListRef,
@@ -10304,168 +10468,189 @@ function AirbnbSelect({
       }
     )
   ] });
-}
+});
 
 // src/airbnb/phone-field/PhoneField.tsx
 import { jsx as jsx130, jsxs as jsxs84 } from "react/jsx-runtime";
-function PhoneField({
-  variant = "default",
-  label,
-  topLabel,
-  value,
-  onChange,
-  options,
-  placeholder = "Phone number",
-  disabled,
-  error,
-  className,
-  name,
-  codeName,
-  numberName,
-  mobileTitle,
-  codePlaceholder = "+00"
-}) {
-  const inputId = React37.useId();
-  const codeOptions = React37.useMemo(
-    () => options.map((option) => ({
-      value: option.value,
-      label: option.label,
-      disabled: option.disabled
-    })),
-    [options]
-  );
-  const selectedCodeOption = React37.useMemo(
-    () => codeOptions.find((option) => option.value === value?.code) ?? null,
-    [codeOptions, value?.code]
-  );
-  const combinedValue = value?.code || value?.number ? `${value?.code ?? ""}${value?.number ?? ""}` : "";
-  return /* @__PURE__ */ jsxs84("div", { className: cn("w-full max-w-[480px]", className), children: [
-    name && /* @__PURE__ */ jsx130("input", { type: "hidden", name, value: combinedValue, disabled }),
-    codeName && /* @__PURE__ */ jsx130(
-      "input",
-      {
-        type: "hidden",
-        name: codeName,
-        value: value?.code ?? "",
-        disabled
-      }
-    ),
-    numberName && /* @__PURE__ */ jsx130(
-      "input",
-      {
-        type: "hidden",
-        name: numberName,
-        value: value?.number ?? "",
-        disabled
-      }
-    ),
-    topLabel && /* @__PURE__ */ jsx130(
-      "label",
-      {
-        htmlFor: inputId,
-        className: "mb-3 block text-[16px] font-medium leading-5 text-[#1F1F1B]",
-        children: topLabel
-      }
-    ),
-    /* @__PURE__ */ jsxs84("div", { className: "flex items-stretch", children: [
-      /* @__PURE__ */ jsx130(
-        AirbnbSelect,
+var PhoneField = React37.forwardRef(
+  ({
+    variant = "default",
+    label,
+    topLabel,
+    value,
+    onChange,
+    options,
+    placeholder = "Phone number",
+    disabled,
+    codeReadOnly,
+    error,
+    invalid,
+    loading,
+    optional,
+    tooltip,
+    className,
+    name,
+    codeName,
+    numberName,
+    mobileTitle,
+    codePlaceholder = "+00"
+  }, ref) => {
+    const inputId = React37.useId();
+    const codeOptions = React37.useMemo(
+      () => options.map((option) => ({
+        value: option.value,
+        label: option.label,
+        disabled: option.disabled
+      })),
+      [options]
+    );
+    const selectedCodeOption = React37.useMemo(
+      () => codeOptions.find((option) => option.value === value?.code) ?? null,
+      [codeOptions, value?.code]
+    );
+    const combinedValue = value?.code || value?.number ? `${value?.code ?? ""}${value?.number ?? ""}` : "";
+    const hasInvalidState = Boolean(error) || Boolean(invalid);
+    const isBlocked = Boolean(disabled) || Boolean(loading);
+    const isCodeBlocked = isBlocked || Boolean(codeReadOnly);
+    return /* @__PURE__ */ jsxs84("div", { className: cn("w-full max-w-[425px]", className), children: [
+      name && /* @__PURE__ */ jsx130("input", { type: "hidden", name, value: combinedValue, disabled }),
+      codeName && /* @__PURE__ */ jsx130(
+        "input",
         {
-          variant,
-          options: codeOptions,
-          value: selectedCodeOption,
-          onChange: (option) => onChange({
-            code: String(option.value),
-            number: value?.number ?? ""
-          }),
-          label: `${label} country code`,
-          placeholder: codePlaceholder,
-          disabled,
-          className: "max-w-none shrink-0 basis-[96px]",
-          mobileTitle: mobileTitle ?? "Select country code",
-          dropdownClassName: "right-auto w-[280px]",
-          getValueLabel: (option) => String(option.value),
-          renderTrigger: ({
-            id,
-            open,
-            variant: selectVariant,
-            disabled: triggerDisabled,
-            listboxId,
-            triggerRef,
-            onClick,
-            onKeyDown,
-            valueLabel
-          }) => /* @__PURE__ */ jsxs84(
-            "button",
-            {
-              id,
-              ref: triggerRef,
-              type: "button",
-              "aria-label": `${label} country code`,
-              "aria-haspopup": "listbox",
-              "aria-expanded": open,
-              "aria-controls": listboxId,
-              disabled: triggerDisabled,
-              onClick,
-              onKeyDown,
-              className: cn(
-                "flex w-full items-center justify-center gap-2 border border-r-0 text-[16px] font-medium leading-6 transition-colors focus-visible:outline-none",
-                selectVariant === "airbnb" ? "h-full min-h-[60px] rounded-l-[16px] rounded-r-none px-4 focus-visible:ring-2 focus-visible:ring-[#1F1F1B] focus-visible:ring-offset-2" : "min-h-[48px] rounded-l-[10px] rounded-r-none px-3.5 focus-visible:border-[#315EFB]",
-                error ? "border-[var(--status-danger)] bg-[#F2F2F2] text-[var(--status-danger)]" : selectVariant === "airbnb" ? "border-[#8C8C8C] bg-[#F4F4F2] text-[#1F1F1B]" : "border-[#A8A8A4] bg-white text-[#1F1F1B]",
-                triggerDisabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"
-              ),
-              children: [
-                /* @__PURE__ */ jsx130("span", { children: valueLabel ?? codePlaceholder }),
-                /* @__PURE__ */ jsx130(
-                  ChevronDown2,
-                  {
-                    className: cn("h-5 w-5 transition-transform", open ? "rotate-180" : ""),
-                    strokeWidth: 2
-                  }
-                )
-              ]
-            }
-          )
+          type: "hidden",
+          name: codeName,
+          value: value?.code ?? "",
+          disabled
         }
       ),
-      /* @__PURE__ */ jsx130(
-        AirbnbInput,
+      numberName && /* @__PURE__ */ jsx130(
+        "input",
         {
-          id: inputId,
-          variant,
-          type: "tel",
-          inputMode: "tel",
-          label,
-          helperText: placeholder,
+          type: "hidden",
+          name: numberName,
           value: value?.number ?? "",
-          placeholder,
-          disabled,
-          error,
-          renderErrorMessage: false,
-          wrapperClassName: "min-w-0 flex-1",
-          fieldClassName: cn(
-            variant === "airbnb" ? "min-h-[60px] rounded-l-none rounded-r-[16px] border-l-0" : "rounded-l-none rounded-r-[10px] border-l-0"
-          ),
-          contentClassName: cn(variant === "airbnb" ? "h-[40px] py-2" : "h-[48px]"),
-          inputClassName: "text-[16px] leading-7",
-          onChange: (event) => onChange({
-            code: value?.code ?? "",
-            number: event.target.value
-          })
+          disabled
         }
-      )
-    ] }),
-    error && /* @__PURE__ */ jsx130(FieldErrorMessage, { message: error })
-  ] });
-}
+      ),
+      topLabel && /* @__PURE__ */ jsx130(
+        "label",
+        {
+          htmlFor: inputId,
+          className: "mb-3 block text-[16px] font-medium leading-5 text-[#1F1F1B]",
+          children: topLabel
+        }
+      ),
+      /* @__PURE__ */ jsxs84("div", { className: "flex items-stretch", children: [
+        /* @__PURE__ */ jsx130(
+          AirbnbSelect,
+          {
+            ref,
+            variant,
+            options: codeOptions,
+            value: selectedCodeOption,
+            onChange: (option) => onChange({
+              code: String(option.value),
+              number: value?.number ?? ""
+            }),
+            label: `${label} country code`,
+            placeholder: codePlaceholder,
+            disabled: isCodeBlocked,
+            loading,
+            invalid,
+            className: "max-w-none shrink-0 basis-[96px]",
+            mobileTitle: mobileTitle ?? "Select country code",
+            dropdownClassName: "right-auto w-[280px]",
+            getValueLabel: (option) => String(option.value),
+            renderTrigger: ({
+              id,
+              open,
+              variant: selectVariant,
+              disabled: triggerDisabled,
+              loading: triggerLoading,
+              listboxId,
+              triggerRef,
+              onClick,
+              onKeyDown,
+              valueLabel
+            }) => /* @__PURE__ */ jsxs84(
+              "button",
+              {
+                id,
+                ref: triggerRef,
+                type: "button",
+                "aria-label": `${label} country code`,
+                "aria-haspopup": "listbox",
+                "aria-expanded": open,
+                "aria-controls": listboxId,
+                "aria-busy": triggerLoading,
+                "aria-invalid": hasInvalidState,
+                disabled: triggerDisabled,
+                onClick,
+                onKeyDown,
+                className: cn(
+                  "flex w-full items-center justify-center gap-2 border border-r-0 text-[16px] font-medium leading-6 transition-colors focus-visible:outline-none",
+                  selectVariant === "airbnb" ? "h-full min-h-[60px] rounded-l-[16px] rounded-r-none px-4 focus-visible:ring-2 focus-visible:ring-[#1F1F1B] focus-visible:ring-offset-2" : "min-h-[48px] rounded-l-[10px] rounded-r-none px-3.5 focus-visible:border-[#315EFB]",
+                  hasInvalidState ? "border-[var(--status-danger)] bg-[#F2F2F2] text-[var(--status-danger)]" : selectVariant === "airbnb" ? "border-[#8C8C8C] bg-[#F4F4F2] text-[#1F1F1B]" : "border-[#A8A8A4] bg-white text-[#1F1F1B]",
+                  triggerDisabled ? "cursor-not-allowed opacity-50" : triggerLoading ? "cursor-progress" : "cursor-pointer"
+                ),
+                children: [
+                  /* @__PURE__ */ jsx130("span", { children: valueLabel ?? codePlaceholder }),
+                  /* @__PURE__ */ jsx130(
+                    ChevronDown2,
+                    {
+                      className: cn("h-5 w-5 transition-transform", open ? "rotate-180" : ""),
+                      strokeWidth: 2
+                    }
+                  )
+                ]
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ jsx130(
+          AirbnbInput,
+          {
+            id: inputId,
+            variant,
+            type: "tel",
+            inputMode: "tel",
+            label,
+            helperText: placeholder,
+            value: value?.number ?? "",
+            placeholder,
+            disabled,
+            error,
+            invalid,
+            loading,
+            optional,
+            tooltip,
+            renderErrorMessage: false,
+            wrapperClassName: "min-w-0 flex-1",
+            fieldClassName: cn(
+              variant === "airbnb" ? "min-h-[60px] rounded-l-none rounded-r-[16px] border-l-0" : "rounded-l-none rounded-r-[10px] border-l-0"
+            ),
+            contentClassName: cn(variant === "airbnb" ? "h-[40px] py-2" : "h-[48px]"),
+            inputClassName: "text-[16px] leading-7",
+            onChange: (event) => onChange({
+              code: value?.code ?? "",
+              number: event.target.value
+            })
+          }
+        )
+      ] }),
+      error && /* @__PURE__ */ jsx130(FieldErrorMessage, { message: error })
+    ] });
+  }
+);
+PhoneField.displayName = "PhoneField";
 
 // src/airbnb/search-input/SearchInput.tsx
 import * as React38 from "react";
-import { useTranslation as useTranslation22 } from "react-i18next";
+import { useTranslation as useTranslation23 } from "react-i18next";
 import { Search as Search3, X as X8 } from "lucide-react";
 import { jsx as jsx131, jsxs as jsxs85 } from "react/jsx-runtime";
 var AirbnbSearchInput = React38.forwardRef(({ onReset, placeholder, wrapperClassName, ...props }, ref) => {
-  const { t } = useTranslation22();
+  const { t } = useTranslation23();
   const placeholderText = placeholder || t("search_property") + "...";
   return /* @__PURE__ */ jsxs85("div", { className: cn("input-wrapper relative", wrapperClassName), children: [
     /* @__PURE__ */ jsx131(Search3, { className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 transform text-[#9696B9]" }),
@@ -10533,6 +10718,9 @@ var SearchableSelectInternal = ({
   getValueLabel,
   disabled,
   error,
+  invalid,
+  optional,
+  tooltip,
   hideErrorMessage,
   name,
   className,
@@ -10569,10 +10757,16 @@ var SearchableSelectInternal = ({
   );
   const helperText = placeholder ?? label;
   const valueLabel = value ? getValueLabel?.(value) ?? String(value.label) : void 0;
+  const isBlocked = Boolean(disabled) || Boolean(loading);
+  const triggerError = error ?? invalid;
   const describedBy = error && !hideErrorMessage ? errorId : void 0;
   const activeOptionId = highlightedIndex >= 0 ? getOptionId(reactId, highlightedIndex) : void 0;
   useOutsideClick(containerRef, open && !isMobile ? () => closeSelect() : null);
   React39.useEffect(() => {
+    if (isBlocked) {
+      setSelectOpen(false);
+      return;
+    }
     if (!open) return;
     const frameId = window.requestAnimationFrame(() => {
       inputRef.current?.focus();
@@ -10580,7 +10774,7 @@ var SearchableSelectInternal = ({
     return () => {
       window.cancelAnimationFrame(frameId);
     };
-  }, [open]);
+  }, [isBlocked, open]);
   React39.useEffect(() => {
     if (!open) {
       setHighlightedIndex(-1);
@@ -10601,7 +10795,7 @@ var SearchableSelectInternal = ({
     }
   }
   function openSelect() {
-    if (disabled) return;
+    if (isBlocked) return;
     setSelectOpen(true);
   }
   function closeSelect() {
@@ -10614,7 +10808,7 @@ var SearchableSelectInternal = ({
     onSearchChange?.(nextValue);
   }
   function handleSelect(option) {
-    if (disabled || option.isDisabled) return;
+    if (isBlocked || option.isDisabled) return;
     onChange(option);
     setSelectOpen(false, { restoreFocus: true });
   }
@@ -10626,7 +10820,7 @@ var SearchableSelectInternal = ({
     }
   }
   function handleTriggerKeyDown(event) {
-    if (disabled) return;
+    if (isBlocked) return;
     if (event.key === "Enter" || event.key === " " || event.key === "ArrowDown" || event.key === "ArrowUp") {
       event.preventDefault();
       openSelect();
@@ -10684,7 +10878,7 @@ var SearchableSelectInternal = ({
     }
   );
   React39.useImperativeHandle(ref, () => triggerRef.current, []);
-  return /* @__PURE__ */ jsxs86("div", { ref: containerRef, className: cn("relative w-full max-w-[480px]", className), children: [
+  return /* @__PURE__ */ jsxs86("div", { ref: containerRef, className: cn("relative w-full max-w-[425px]", className), children: [
     name && /* @__PURE__ */ jsx132("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
     /* @__PURE__ */ jsx132(
       FieldTrigger,
@@ -10705,7 +10899,11 @@ var SearchableSelectInternal = ({
         valueText: valueLabel,
         placeholder: helperText,
         describedBy,
-        error,
+        error: triggerError,
+        loading,
+        optional,
+        tooltip,
+        forceLabelText: Boolean(optional) || Boolean(tooltip),
         hideErrorMessage,
         disabled,
         onClick: () => {
@@ -10732,6 +10930,7 @@ var SearchableSelectInternal = ({
       {
         open,
         onOpenChange: (nextOpen) => {
+          if (isBlocked && nextOpen) return;
           if (nextOpen) {
             setSelectOpen(true);
             return;