@chekinapp/ui 0.2.3 → 0.2.5

package/dist/index.cjs

@@ -36,6 +36,7 @@ __export(index_exports, {
   AccordionItem: () => AccordionItem,
   AccordionTrigger: () => AccordionTrigger,
   AirbnbDatePicker: () => AirbnbDatePicker,
+  AirbnbFieldHelperText: () => AirbnbFieldHelperText,
   AirbnbFieldTrigger: () => AirbnbFieldTrigger,
   AirbnbInput: () => AirbnbInput,
   AirbnbPhoneField: () => AirbnbPhoneField,
@@ -9956,7 +9957,7 @@ function TooltipInfo({ content, className }) {
       side: "right",
       content,
       contentClassName: "max-w-64",
-      className: cn("text-[var(--chekin-color-gray-1)]", className),
+      className: cn("text-[var(--section-tooltip-color)]", className),
       onClick: (event) => event.stopPropagation(),
       label: typeof content === "string" ? content : "More information"
     }
@@ -9996,19 +9997,19 @@ var Section = (0, import_react68.forwardRef)(
               "div",
               {
                 className: cn(
-                  "flex max-w-[85%] items-center text-lg font-bold text-[var(--chekin-color-brand-navy)] md:max-w-full",
+                  "flex max-w-[85%] items-center text-lg font-bold text-[var(--section-title-color)] md:max-w-full",
                   size !== 0 /* L */ && "subsection-title",
                   titleClassName
                 ),
                 children: [
                   title,
                   titleTooltip && /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("div", { className: "ml-2.5", children: /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(TooltipInfo, { content: titleTooltip }) }),
-                  linkContent && /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("div", { className: "ml-6 text-sm font-semibold text-[var(--chekin-color-brand-blue)] no-underline hover:opacity-70 active:opacity-100", children: linkContent })
+                  linkContent && /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("div", { className: "ml-6 text-sm font-semibold text-[var(--section-link-color)] no-underline hover:opacity-70 active:opacity-100", children: linkContent })
                 ]
               }
             ),
             subtitle && /* @__PURE__ */ (0, import_jsx_runtime100.jsxs)("div", { className: "w-full max-w-[720px] md:max-w-full", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("div", { className: "inline text-base font-normal text-[var(--chekin-color-gray-1)]", children: subtitle }),
+              /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("div", { className: "inline text-base font-normal text-[var(--section-subtitle-color)]", children: subtitle }),
               subtitleTooltip && /* @__PURE__ */ (0, import_jsx_runtime100.jsx)("div", { className: "ml-1.5 inline-block align-text-top", children: /* @__PURE__ */ (0, import_jsx_runtime100.jsx)(TooltipInfo, { content: subtitleTooltip }) })
             ] })
           ] }),
@@ -20309,7 +20310,32 @@ var import_lucide_react54 = require("lucide-react");
 var React73 = __toESM(require("react"), 1);
 var import_lucide_react53 = require("lucide-react");
 var import_react_i18next42 = require("react-i18next");
+
+// src/airbnb-fields/field-helper-text/FieldHelperText.tsx
 var import_jsx_runtime184 = require("react/jsx-runtime");
+function AirbnbFieldHelperText({
+  id,
+  helper,
+  disabled,
+  className
+}) {
+  if (!helper) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
+    "p",
+    {
+      id,
+      className: cn(
+        "mt-2 text-[12px] font-normal leading-5 text-[var(--chekin-airbnb-gray-text)]",
+        disabled && "opacity-50",
+        className
+      ),
+      children: helper
+    }
+  );
+}
+
+// src/airbnb-fields/field-trigger/FieldTrigger.tsx
+var import_jsx_runtime185 = require("react/jsx-runtime");
 var AirbnbFieldTrigger = React73.forwardRef(
   ({
     as = "button",
@@ -20323,6 +20349,7 @@ var AirbnbFieldTrigger = React73.forwardRef(
     labelText,
     valueText,
     placeholder,
+    helper,
     disabled,
     error,
     loading,
@@ -20341,19 +20368,20 @@ var AirbnbFieldTrigger = React73.forwardRef(
     ...props
   }, ref) => {
     const { t } = (0, import_react_i18next42.useTranslation)();
+    const generatedHelperId = React73.useId();
     const hasValue = Boolean(valueText);
     const isRaised = hasValue || forceFloatingLabel;
     const optionalLabel = optional ? typeof optional === "string" ? optional : t("optional") : void 0;
     const visibleLabelText = labelText ?? label;
     const hasLabelMeta = Boolean(optionalLabel) || Boolean(tooltip);
-    const resolvedLabelText = visibleLabelText && hasLabelMeta ? /* @__PURE__ */ (0, import_jsx_runtime184.jsxs)("span", { className: "inline-flex max-w-full items-center gap-1.5 align-middle", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime184.jsx)("span", { className: "min-w-0 truncate", children: visibleLabelText }),
-      optionalLabel && /* @__PURE__ */ (0, import_jsx_runtime184.jsxs)("span", { className: "text-current opacity-70 lowercase", children: [
+    const resolvedLabelText = visibleLabelText && hasLabelMeta ? /* @__PURE__ */ (0, import_jsx_runtime185.jsxs)("span", { className: "inline-flex max-w-full items-center gap-1.5 align-middle", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime185.jsx)("span", { className: "min-w-0 truncate", children: visibleLabelText }),
+      optionalLabel && /* @__PURE__ */ (0, import_jsx_runtime185.jsxs)("span", { className: "text-current opacity-70 lowercase", children: [
         "(",
         optionalLabel,
         ")"
       ] }),
-      tooltip && /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
+      tooltip && /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
         HelpTooltip,
         {
           content: tooltip,
@@ -20367,10 +20395,14 @@ var AirbnbFieldTrigger = React73.forwardRef(
     const animatedLabel = forceLabelText ? resolvedLabelText ?? placeholder : isRaised ? resolvedLabelText : label ?? placeholder;
     const hasInvalidState = Boolean(error);
     const errorMessage = typeof error === "string" ? error : void 0;
+    const showErrorMessage = Boolean(errorMessage) && !hideErrorMessage;
+    const showHelper = Boolean(helper) && !showErrorMessage;
+    const helperId = helper ? generatedHelperId : void 0;
+    const describedByValue = [describedBy, showHelper ? helperId : void 0].filter(Boolean).join(" ") || void 0;
     const isBlocked = Boolean(disabled) || Boolean(loading);
-    const resolvedTrailingAdornment = loading || trailingAdornment ? /* @__PURE__ */ (0, import_jsx_runtime184.jsxs)("span", { className: "flex items-center gap-2", children: [
+    const resolvedTrailingAdornment = loading || trailingAdornment ? /* @__PURE__ */ (0, import_jsx_runtime185.jsxs)("span", { className: "flex items-center gap-2", children: [
       trailingAdornment,
-      loading && /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
+      loading && /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
         import_lucide_react53.Loader2,
         {
           "aria-hidden": "true",
@@ -20386,8 +20418,8 @@ var AirbnbFieldTrigger = React73.forwardRef(
       disabled ? "cursor-not-allowed opacity-50" : loading ? "cursor-progress" : "cursor-pointer",
       className
     );
-    const sharedContent = /* @__PURE__ */ (0, import_jsx_runtime184.jsxs)(import_jsx_runtime184.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime184.jsxs)(
+    const sharedContent = /* @__PURE__ */ (0, import_jsx_runtime185.jsxs)(import_jsx_runtime185.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime185.jsxs)(
         "span",
         {
           className: cn(
@@ -20396,7 +20428,7 @@ var AirbnbFieldTrigger = React73.forwardRef(
             contentClassName
           ),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
               "span",
               {
                 id: labelId,
@@ -20409,7 +20441,7 @@ var AirbnbFieldTrigger = React73.forwardRef(
                 children: animatedLabel
               }
             ),
-            children ? children : hasValue ? /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
+            children ? children : hasValue ? /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
               "span",
               {
                 id: valueId,
@@ -20420,11 +20452,11 @@ var AirbnbFieldTrigger = React73.forwardRef(
                 ),
                 children: valueText
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime184.jsx)("span", { id: helperTextId, className: "sr-only", children: placeholder ?? label })
+            ) : /* @__PURE__ */ (0, import_jsx_runtime185.jsx)("span", { id: helperTextId, className: "sr-only", children: placeholder ?? label })
           ]
         }
       ),
-      resolvedTrailingAdornment && /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
+      resolvedTrailingAdornment && /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
         "span",
         {
           "aria-hidden": "true",
@@ -20433,16 +20465,16 @@ var AirbnbFieldTrigger = React73.forwardRef(
         }
       )
     ] });
-    return /* @__PURE__ */ (0, import_jsx_runtime184.jsxs)("div", { className: "w-full", children: [
-      topLabel && /* @__PURE__ */ (0, import_jsx_runtime184.jsx)("p", { className: "mb-3 text-[16px] font-semibold leading-5 text-[var(--chekin-airbnb-ink-strong)]", children: topLabel }),
-      as === "button" ? /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime185.jsxs)("div", { className: "w-full", children: [
+      topLabel && /* @__PURE__ */ (0, import_jsx_runtime185.jsx)("p", { className: "mb-3 text-[16px] font-semibold leading-5 text-[var(--chekin-airbnb-ink-strong)]", children: topLabel }),
+      as === "button" ? /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
         "button",
         {
           id,
           ref,
           type: "button",
           "aria-labelledby": hasValue && valueId ? `${labelId} ${valueId}` : labelId,
-          "aria-describedby": describedBy,
+          "aria-describedby": describedByValue,
           "aria-invalid": hasInvalidState,
           "aria-busy": loading,
           disabled: isBlocked,
@@ -20452,13 +20484,13 @@ var AirbnbFieldTrigger = React73.forwardRef(
           ...props,
           children: sharedContent
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
+      ) : /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
         "div",
         {
           id,
           ref,
           "aria-labelledby": hasValue && valueId ? `${labelId} ${valueId}` : labelId,
-          "aria-describedby": describedBy,
+          "aria-describedby": describedByValue,
           "aria-invalid": hasInvalidState,
           "aria-busy": loading,
           "aria-disabled": isBlocked,
@@ -20469,14 +20501,15 @@ var AirbnbFieldTrigger = React73.forwardRef(
           children: sharedContent
         }
       ),
-      errorMessage && !hideErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(FieldErrorMessage, { id: errorId, message: errorMessage })
+      showErrorMessage && /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(FieldErrorMessage, { id: errorId, message: errorMessage }),
+      showHelper && /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(AirbnbFieldHelperText, { id: helperId, helper, disabled })
     ] });
   }
 );
 AirbnbFieldTrigger.displayName = "AirbnbFieldTrigger";
 
 // src/airbnb-fields/datepicker/DatePicker.tsx
-var import_jsx_runtime185 = require("react/jsx-runtime");
+var import_jsx_runtime186 = require("react/jsx-runtime");
 var DEFAULT_MIN_DATE = new Date(1920, 0, 1);
 var AirbnbDatePicker = React74.forwardRef(
   ({
@@ -20493,6 +20526,7 @@ var AirbnbDatePicker = React74.forwardRef(
     loading,
     optional,
     tooltip,
+    helper,
     className,
     name,
     minDate,
@@ -20592,8 +20626,8 @@ var AirbnbDatePicker = React74.forwardRef(
         setIsOpen(false);
       }
     }, [isBlocked]);
-    return /* @__PURE__ */ (0, import_jsx_runtime185.jsxs)("div", { className: cn("relative w-full max-w-[var(--max-field-width)]", className), children: [
-      name && /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime186.jsxs)("div", { className: cn("relative w-full max-w-[var(--max-field-width)]", className), children: [
+      name && /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(
         "input",
         {
           type: "hidden",
@@ -20601,7 +20635,7 @@ var AirbnbDatePicker = React74.forwardRef(
           value: resolvedValue ? formatDateInputValue(resolvedValue) : ""
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(
         AirbnbFieldTrigger,
         {
           id: triggerId,
@@ -20621,13 +20655,14 @@ var AirbnbDatePicker = React74.forwardRef(
           loading,
           optional,
           tooltip,
+          helper,
           forceLabelText: Boolean(optional) || Boolean(tooltip),
           "aria-haspopup": "dialog",
           "aria-expanded": isOpen,
           onClick: handleTriggerClick,
           onKeyDown: handleTriggerKeyDown,
           onBlur,
-          trailingAdornment: /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
+          trailingAdornment: /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(
             import_lucide_react54.Calendar,
             {
               className: "h-5 w-5 text-[var(--chekin-airbnb-ink)]",
@@ -20636,7 +20671,7 @@ var AirbnbDatePicker = React74.forwardRef(
           )
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(
         AirbnbDatePickerContent,
         {
           baseId: pickerId,
@@ -20673,13 +20708,14 @@ AirbnbDatePicker.displayName = "AirbnbDatePicker";
 var React75 = __toESM(require("react"), 1);
 var import_lucide_react55 = require("lucide-react");
 var import_react_i18next43 = require("react-i18next");
-var import_jsx_runtime186 = require("react/jsx-runtime");
+var import_jsx_runtime187 = require("react/jsx-runtime");
 var getInputValue = (value) => value != null ? String(value) : "";
 var AirbnbInput = React75.forwardRef(
   ({
     label,
     topLabel,
     helperText,
+    helper,
     error,
     invalid,
     loading,
@@ -20774,7 +20810,7 @@ var AirbnbInput = React75.forwardRef(
       }
       inputRef.current?.focus();
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime186.jsx)("div", { className: cn("w-full max-w-[var(--max-field-width)]", wrapperClassName), children: /* @__PURE__ */ (0, import_jsx_runtime186.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime187.jsx)("div", { className: cn("w-full max-w-[var(--max-field-width)]", wrapperClassName), children: /* @__PURE__ */ (0, import_jsx_runtime187.jsxs)(
       AirbnbFieldTrigger,
       {
         as: "div",
@@ -20786,6 +20822,7 @@ var AirbnbInput = React75.forwardRef(
         errorId: error ? errorId : void 0,
         labelText: helperText ?? label,
         placeholder: placeholder ?? label,
+        helper,
         disabled,
         error: triggerError,
         loading,
@@ -20804,7 +20841,7 @@ var AirbnbInput = React75.forwardRef(
         forceLabelText: hasLabelMeta,
         hideErrorMessage: !renderErrorMessage,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(
             "input",
             {
               ...props,
@@ -20834,7 +20871,7 @@ var AirbnbInput = React75.forwardRef(
               )
             }
           ),
-          shouldShowPasswordReveal && /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(
+          shouldShowPasswordReveal && /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(
             "button",
             {
               type: "button",
@@ -20842,7 +20879,7 @@ var AirbnbInput = React75.forwardRef(
               disabled: isBlocked,
               className: "absolute bottom-0 right-0 flex h-6 w-6 items-center justify-center border-0 bg-transparent p-0 text-[var(--chekin-airbnb-gray-cool)] hover:text-[var(--chekin-airbnb-ink)] hover:opacity-85 disabled:cursor-not-allowed disabled:opacity-50",
               "aria-label": isPasswordRevealed ? t("hide_password") : t("show_password"),
-              children: /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(
                 import_lucide_react55.Eye,
                 {
                   size: 18,
@@ -20869,7 +20906,7 @@ var import_lucide_react57 = require("lucide-react");
 var React80 = __toESM(require("react"), 1);
 
 // src/airbnb-fields/select/SelectDesktopMenu.tsx
-var import_jsx_runtime187 = require("react/jsx-runtime");
+var import_jsx_runtime188 = require("react/jsx-runtime");
 function AirbnbSelectDesktopMenu({
   id,
   options,
@@ -20888,7 +20925,7 @@ function AirbnbSelectDesktopMenu({
   noOptionsMessage
 }) {
   const emptyMessage = noOptionsMessage?.();
-  return /* @__PURE__ */ (0, import_jsx_runtime187.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime188.jsxs)(
     "div",
     {
       id,
@@ -20901,12 +20938,12 @@ function AirbnbSelectDesktopMenu({
       onKeyDown,
       className: cn("max-h-[280px] overflow-y-auto p-2 outline-none", menuClassName),
       children: [
-        options.length === 0 && emptyMessage ? /* @__PURE__ */ (0, import_jsx_runtime187.jsx)("div", { className: "px-4 py-3 text-base leading-6 text-[var(--chekin-airbnb-gray-text)]", children: emptyMessage }) : null,
+        options.length === 0 && emptyMessage ? /* @__PURE__ */ (0, import_jsx_runtime188.jsx)("div", { className: "px-4 py-3 text-base leading-6 text-[var(--chekin-airbnb-gray-text)]", children: emptyMessage }) : null,
         options.map((option, index) => {
           const isSelected = selectedValue?.value === option.value;
           const isHighlighted = index === highlightedIndex;
           const optionKey = `${String(option.value)}-${index}`;
-          return /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(
             "button",
             {
               id: getOptionId2(index),
@@ -20938,7 +20975,7 @@ function AirbnbSelectDesktopMenu({
 }
 
 // src/airbnb-fields/select/SelectDesktopContent.tsx
-var import_jsx_runtime188 = require("react/jsx-runtime");
+var import_jsx_runtime189 = require("react/jsx-runtime");
 function AirbnbSelectDesktopContent({
   isOpen,
   listboxId,
@@ -20959,14 +20996,14 @@ function AirbnbSelectDesktopContent({
   noOptionsMessage
 }) {
   if (!isOpen) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(
     "div",
     {
       className: cn(
         "absolute left-0 right-0 top-[calc(100%+8px)] z-20 overflow-hidden rounded-[20px] border border-[var(--chekin-airbnb-border)] bg-white shadow-[0_14px_30px_rgba(18,18,18,0.08)]",
         dropdownClassName
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(
         AirbnbSelectDesktopMenu,
         {
           id: listboxId,
@@ -21064,7 +21101,7 @@ function getMobileOptionStyles(index, scrollTop) {
 }
 
 // src/airbnb-fields/select/SelectMobileWheel.tsx
-var import_jsx_runtime189 = require("react/jsx-runtime");
+var import_jsx_runtime190 = require("react/jsx-runtime");
 function AirbnbSelectMobileWheel({
   id,
   options,
@@ -21083,7 +21120,7 @@ function AirbnbSelectMobileWheel({
 }) {
   const spacerHeight2 = getWheelSpacerHeight();
   const emptyMessage = noOptionsMessage?.();
-  return /* @__PURE__ */ (0, import_jsx_runtime189.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime190.jsxs)(
     "div",
     {
       id,
@@ -21095,10 +21132,10 @@ function AirbnbSelectMobileWheel({
       onKeyDown,
       className: cn("relative overflow-hidden outline-none", menuClassName),
       children: [
-        options.length === 0 && emptyMessage ? /* @__PURE__ */ (0, import_jsx_runtime189.jsx)("div", { className: "flex min-h-[160px] items-center justify-center px-4 text-center text-base leading-6 text-[var(--chekin-airbnb-gray-text)]", children: emptyMessage }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime189.jsx)("div", { className: "pointer-events-none absolute inset-x-0 top-0 h-16 bg-gradient-to-b from-white via-white/80 to-transparent" }),
-        /* @__PURE__ */ (0, import_jsx_runtime189.jsx)("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 h-16 bg-gradient-to-t from-white via-white/80 to-transparent" }),
-        /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(
+        options.length === 0 && emptyMessage ? /* @__PURE__ */ (0, import_jsx_runtime190.jsx)("div", { className: "flex min-h-[160px] items-center justify-center px-4 text-center text-base leading-6 text-[var(--chekin-airbnb-gray-text)]", children: emptyMessage }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime190.jsx)("div", { className: "pointer-events-none absolute inset-x-0 top-0 h-16 bg-gradient-to-b from-white via-white/80 to-transparent" }),
+        /* @__PURE__ */ (0, import_jsx_runtime190.jsx)("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 h-16 bg-gradient-to-t from-white via-white/80 to-transparent" }),
+        /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(
           "div",
           {
             "aria-hidden": true,
@@ -21108,7 +21145,7 @@ function AirbnbSelectMobileWheel({
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime189.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime190.jsxs)(
           "div",
           {
             ref: listRef,
@@ -21123,11 +21160,11 @@ function AirbnbSelectMobileWheel({
               WebkitOverflowScrolling: "touch"
             },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime189.jsx)("div", { style: { height: `${spacerHeight2}px` } }),
+              /* @__PURE__ */ (0, import_jsx_runtime190.jsx)("div", { style: { height: `${spacerHeight2}px` } }),
               options.map((option, index) => {
                 const { distance, style } = getMobileOptionStyles(index, scrollTop);
                 const optionKey = `${String(option.value)}-${index}`;
-                return /* @__PURE__ */ (0, import_jsx_runtime189.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(
                   "button",
                   {
                     id: getOptionId2(index),
@@ -21148,7 +21185,7 @@ function AirbnbSelectMobileWheel({
                   optionKey
                 );
               }),
-              /* @__PURE__ */ (0, import_jsx_runtime189.jsx)("div", { style: { height: `${spacerHeight2}px` } })
+              /* @__PURE__ */ (0, import_jsx_runtime190.jsx)("div", { style: { height: `${spacerHeight2}px` } })
             ]
           }
         )
@@ -21158,7 +21195,7 @@ function AirbnbSelectMobileWheel({
 }
 
 // src/airbnb-fields/select/SelectMobileContent.tsx
-var import_jsx_runtime190 = require("react/jsx-runtime");
+var import_jsx_runtime191 = require("react/jsx-runtime");
 function AirbnbSelectMobileContent({
   open,
   onOpenChange,
@@ -21182,11 +21219,11 @@ function AirbnbSelectMobileContent({
   getOptionId: getOptionId2,
   noOptionsMessage
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(Drawer, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime190.jsxs)(DrawerContent, { onClose, lockScroll: false, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(DrawerTitle, { className: "sr-only", children: mobileTitle ?? label }),
-    /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(DrawerDescription, { className: "sr-only", children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime190.jsxs)("div", { className: "px-6 pb-4 pt-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(Drawer, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime191.jsxs)(DrawerContent, { onClose, lockScroll: false, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(DrawerTitle, { className: "sr-only", children: mobileTitle ?? label }),
+    /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(DrawerDescription, { className: "sr-only", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime191.jsxs)("div", { className: "px-6 pb-4 pt-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(
         AirbnbSelectMobileWheel,
         {
           id: listboxId,
@@ -21205,7 +21242,7 @@ function AirbnbSelectMobileContent({
           noOptionsMessage
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime190.jsx)(Button, { type: "button", onClick: onDone, className: "mt-4 h-12 mb-8 w-full", children: doneLabel })
+      /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(Button, { type: "button", onClick: onDone, className: "mt-4 h-12 mb-8 w-full", children: doneLabel })
     ] })
   ] }) });
 }
@@ -21213,7 +21250,7 @@ function AirbnbSelectMobileContent({
 // src/airbnb-fields/select/SelectTrigger.tsx
 var React76 = __toESM(require("react"), 1);
 var import_lucide_react56 = require("lucide-react");
-var import_jsx_runtime191 = require("react/jsx-runtime");
+var import_jsx_runtime192 = require("react/jsx-runtime");
 var AirbnbSelectTrigger = React76.forwardRef(
   ({
     id,
@@ -21226,6 +21263,7 @@ var AirbnbSelectTrigger = React76.forwardRef(
     loading,
     optional,
     tooltip,
+    helper,
     error,
     hideErrorMessage,
     labelId,
@@ -21238,7 +21276,7 @@ var AirbnbSelectTrigger = React76.forwardRef(
     onKeyDown,
     onBlur
   }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
       AirbnbFieldTrigger,
       {
         id,
@@ -21260,13 +21298,14 @@ var AirbnbSelectTrigger = React76.forwardRef(
         loading,
         optional,
         tooltip,
+        helper,
         forceLabelText: Boolean(optional) || Boolean(tooltip),
         hideErrorMessage,
         disabled,
         onClick,
         onKeyDown,
         onBlur,
-        trailingAdornment: /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(
+        trailingAdornment: /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
           import_lucide_react56.ChevronDown,
           {
             strokeWidth: "1.5",
@@ -21629,7 +21668,7 @@ function useSelectIds2({ name, hasValue, error, hideErrorMessage }) {
 }
 
 // src/airbnb-fields/select/Select.tsx
-var import_jsx_runtime192 = require("react/jsx-runtime");
+var import_jsx_runtime193 = require("react/jsx-runtime");
 var AirbnbSelect = React80.forwardRef(function AirbnbSelect2({
   options = [],
   value,
@@ -21644,6 +21683,7 @@ var AirbnbSelect = React80.forwardRef(function AirbnbSelect2({
   loading,
   optional,
   tooltip,
+  helper,
   error,
   invalid,
   hideErrorMessage,
@@ -21810,13 +21850,13 @@ var AirbnbSelect = React80.forwardRef(function AirbnbSelect2({
       handleMobileOpenChange(false);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime192.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)(
     "div",
     {
       ref: containerRef,
       className: cn("relative w-full max-w-[var(--max-field-width)]", className),
       children: [
-        name && /* @__PURE__ */ (0, import_jsx_runtime192.jsx)("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
+        name && /* @__PURE__ */ (0, import_jsx_runtime193.jsx)("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
         renderTrigger ? renderTrigger({
           id: triggerId,
           open: isOpen,
@@ -21829,6 +21869,7 @@ var AirbnbSelect = React80.forwardRef(function AirbnbSelect2({
           loading,
           optional,
           tooltip,
+          helper,
           error,
           invalid,
           listboxId,
@@ -21837,7 +21878,7 @@ var AirbnbSelect = React80.forwardRef(function AirbnbSelect2({
           onClick: handleTriggerClick,
           onKeyDown: handleRootTriggerKeyDown,
           onBlur
-        }) : /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
+        }) : /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
           AirbnbSelectTrigger,
           {
             id: triggerId,
@@ -21851,6 +21892,7 @@ var AirbnbSelect = React80.forwardRef(function AirbnbSelect2({
             loading,
             optional,
             tooltip,
+            helper,
             error: triggerError,
             hideErrorMessage,
             labelId,
@@ -21864,7 +21906,7 @@ var AirbnbSelect = React80.forwardRef(function AirbnbSelect2({
             onBlur
           }
         ),
-        isMobile3 ? /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
+        isMobile3 ? /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
           AirbnbSelectMobileContent,
           {
             open: isOpen,
@@ -21889,7 +21931,7 @@ var AirbnbSelect = React80.forwardRef(function AirbnbSelect2({
             getOptionId: getOptionId2,
             noOptionsMessage
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
+        ) : /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
           AirbnbSelectDesktopContent,
           {
             isOpen,
@@ -21923,7 +21965,7 @@ var AirbnbSelect = React80.forwardRef(function AirbnbSelect2({
 });
 
 // src/airbnb-fields/phone-field/PhoneField.tsx
-var import_jsx_runtime193 = require("react/jsx-runtime");
+var import_jsx_runtime194 = require("react/jsx-runtime");
 function formatPhoneCodeOptionLabel2(option) {
   const label = String(option.label);
   const value = String(option.value);
@@ -21945,6 +21987,7 @@ var AirbnbPhoneField = React81.forwardRef(
     loading,
     optional,
     tooltip,
+    helper,
     className,
     name,
     codeName,
@@ -21971,9 +22014,9 @@ var AirbnbPhoneField = React81.forwardRef(
     const hasInvalidState = Boolean(error) || Boolean(invalid);
     const isBlocked = Boolean(disabled) || Boolean(loading);
     const isCodeBlocked = isBlocked || Boolean(codeReadOnly);
-    return /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)("div", { className: cn("w-full max-w-[var(--max-field-width)]", className), children: [
-      name && /* @__PURE__ */ (0, import_jsx_runtime193.jsx)("input", { type: "hidden", name, value: combinedValue, disabled }),
-      codeName && /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime194.jsxs)("div", { className: cn("w-full max-w-[var(--max-field-width)]", className), children: [
+      name && /* @__PURE__ */ (0, import_jsx_runtime194.jsx)("input", { type: "hidden", name, value: combinedValue, disabled }),
+      codeName && /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(
         "input",
         {
           type: "hidden",
@@ -21982,7 +22025,7 @@ var AirbnbPhoneField = React81.forwardRef(
           disabled
         }
       ),
-      numberName && /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
+      numberName && /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(
         "input",
         {
           type: "hidden",
@@ -21991,7 +22034,7 @@ var AirbnbPhoneField = React81.forwardRef(
           disabled
         }
       ),
-      topLabel && /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
+      topLabel && /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(
         "label",
         {
           htmlFor: inputId,
@@ -21999,8 +22042,8 @@ var AirbnbPhoneField = React81.forwardRef(
           children: topLabel
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)("div", { className: "flex items-stretch", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime194.jsxs)("div", { className: "flex items-stretch", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(
           AirbnbSelect,
           {
             ref,
@@ -22029,7 +22072,7 @@ var AirbnbPhoneField = React81.forwardRef(
               onClick,
               onKeyDown,
               valueLabel
-            }) => /* @__PURE__ */ (0, import_jsx_runtime193.jsxs)(
+            }) => /* @__PURE__ */ (0, import_jsx_runtime194.jsxs)(
               "button",
               {
                 id,
@@ -22050,8 +22093,8 @@ var AirbnbPhoneField = React81.forwardRef(
                   triggerDisabled ? "cursor-not-allowed opacity-50" : triggerLoading ? "cursor-progress" : "cursor-pointer"
                 ),
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime193.jsx)("span", { children: valueLabel ?? codePlaceholder }),
-                  /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime194.jsx)("span", { children: valueLabel ?? codePlaceholder }),
+                  /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(
                     import_lucide_react57.ChevronDown,
                     {
                       className: cn("h-5 w-5 transition-transform", open ? "rotate-180" : ""),
@@ -22063,7 +22106,7 @@ var AirbnbPhoneField = React81.forwardRef(
             )
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(
           AirbnbInput,
           {
             id: inputId,
@@ -22092,7 +22135,8 @@ var AirbnbPhoneField = React81.forwardRef(
           }
         )
       ] }),
-      error && /* @__PURE__ */ (0, import_jsx_runtime193.jsx)(FieldErrorMessage, { message: error })
+      error && /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(FieldErrorMessage, { message: error }),
+      !error && /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(AirbnbFieldHelperText, { helper, disabled })
     ] });
   }
 );
@@ -22103,7 +22147,7 @@ var React82 = __toESM(require("react"), 1);
 var import_lucide_react58 = require("lucide-react");
 var import_react_virtual3 = require("@tanstack/react-virtual");
 var import_react90 = require("react");
-var import_jsx_runtime194 = require("react/jsx-runtime");
+var import_jsx_runtime195 = require("react/jsx-runtime");
 var ROW_HEIGHT = 48;
 var DESKTOP_LIST_HEIGHT = 280;
 var MOBILE_LIST_HEIGHT = 420;
@@ -22134,6 +22178,7 @@ var AirbnbSearchableSelectInternal = ({
   invalid,
   optional,
   tooltip,
+  helper,
   hideErrorMessage,
   name,
   className,
@@ -22271,7 +22316,7 @@ var AirbnbSearchableSelectInternal = ({
       }
     }
   }
-  const content = /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(
+  const content = /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(
     AirbnbSearchableSelectContent,
     {
       inputId: searchInputId,
@@ -22299,9 +22344,9 @@ var AirbnbSearchableSelectInternal = ({
     }
   );
   React82.useImperativeHandle(ref, () => triggerRef.current, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime194.jsxs)("div", { ref: containerRef, className: cn("relative w-full max-w-[425px]", className), children: [
-    name && /* @__PURE__ */ (0, import_jsx_runtime194.jsx)("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
-    /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime195.jsxs)("div", { ref: containerRef, className: cn("relative w-full max-w-[425px]", className), children: [
+    name && /* @__PURE__ */ (0, import_jsx_runtime195.jsx)("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
+    /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(
       AirbnbFieldTrigger,
       {
         id: `${reactId}-trigger`,
@@ -22323,6 +22368,7 @@ var AirbnbSearchableSelectInternal = ({
         loading,
         optional,
         tooltip,
+        helper,
         forceLabelText: Boolean(optional) || Boolean(tooltip),
         hideErrorMessage,
         disabled,
@@ -22335,7 +22381,7 @@ var AirbnbSearchableSelectInternal = ({
         },
         onKeyDown: handleTriggerKeyDown,
         onBlur,
-        trailingAdornment: /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(
+        trailingAdornment: /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(
           import_lucide_react58.ChevronDown,
           {
             className: cn(
@@ -22346,7 +22392,7 @@ var AirbnbSearchableSelectInternal = ({
         )
       }
     ),
-    isMobile3 ? /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(
+    isMobile3 ? /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(
       Drawer,
       {
         open,
@@ -22358,13 +22404,13 @@ var AirbnbSearchableSelectInternal = ({
           }
           closeSelect();
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime194.jsxs)(DrawerContent, { onClose: closeSelect, lockScroll: false, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(DrawerTitle, { className: "sr-only", children: mobileTitle ?? label }),
-          /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(DrawerDescription, { className: "sr-only", children: label }),
-          /* @__PURE__ */ (0, import_jsx_runtime194.jsx)("div", { className: "px-5 pb-5 pt-1", children: content })
+        children: /* @__PURE__ */ (0, import_jsx_runtime195.jsxs)(DrawerContent, { onClose: closeSelect, lockScroll: false, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(DrawerTitle, { className: "sr-only", children: mobileTitle ?? label }),
+          /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(DrawerDescription, { className: "sr-only", children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime195.jsx)("div", { className: "px-5 pb-5 pt-1", children: content })
         ] })
       }
-    ) : open ? /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(
+    ) : open ? /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(
       "div",
       {
         className: cn(
@@ -22431,16 +22477,16 @@ function AirbnbSearchableSelectContent({
       virtualizer.scrollToIndex(highlightedIndex, { align: "auto" });
     }
   }, [highlightedIndex, virtualizer]);
-  return /* @__PURE__ */ (0, import_jsx_runtime194.jsxs)("div", { className: "p-2", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime194.jsxs)("div", { className: "relative mb-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime195.jsxs)("div", { className: "p-2", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime195.jsxs)("div", { className: "relative mb-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(
         import_lucide_react58.Search,
         {
           "aria-hidden": "true",
           className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 text-[var(--chekin-neutral-500)]"
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(
         "input",
         {
           id: inputId,
@@ -22459,7 +22505,7 @@ function AirbnbSearchableSelectContent({
         }
       )
     ] }),
-    loading && options.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime194.jsx)("div", { className: "px-4 py-5 text-center text-base leading-6 text-[var(--chekin-airbnb-gray-text)]", children: loadingText }) : options.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime194.jsx)("div", { className: "px-4 py-5 text-center text-base leading-6 text-[var(--chekin-airbnb-gray-text)]", children: emptyMessage }) : /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(
+    loading && options.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime195.jsx)("div", { className: "px-4 py-5 text-center text-base leading-6 text-[var(--chekin-airbnb-gray-text)]", children: loadingText }) : options.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime195.jsx)("div", { className: "px-4 py-5 text-center text-base leading-6 text-[var(--chekin-airbnb-gray-text)]", children: emptyMessage }) : /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(
       "div",
       {
         id: listboxId,
@@ -22468,7 +22514,7 @@ function AirbnbSearchableSelectContent({
         "aria-labelledby": labelId,
         className: cn("overflow-y-auto outline-none", menuClassName),
         style: { height: Math.min(height, rowCount * ROW_HEIGHT) },
-        children: /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(
           "div",
           {
             className: "relative w-full",
@@ -22476,7 +22522,7 @@ function AirbnbSearchableSelectContent({
             children: virtualItems.map((virtualItem) => {
               const option = options[virtualItem.index];
               if (!option) {
-                return /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(
+                return /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(
                   "div",
                   {
                     className: "absolute left-0 top-0 flex w-full items-center px-4 text-base leading-6 text-[var(--chekin-airbnb-gray-text)]",
@@ -22491,7 +22537,7 @@ function AirbnbSearchableSelectContent({
               }
               const isSelected = value?.value === option.value;
               const isHighlighted = virtualItem.index === highlightedIndex;
-              return /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(
+              return /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(
                 "button",
                 {
                   id: getOptionId(idPrefix, virtualItem.index),
@@ -22513,7 +22559,7 @@ function AirbnbSearchableSelectContent({
                     height: `${virtualItem.size}px`,
                     transform: `translateY(${virtualItem.start}px)`
                   },
-                  children: /* @__PURE__ */ (0, import_jsx_runtime194.jsx)("span", { className: "truncate text-center", children: String(option.label) })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime195.jsx)("span", { className: "truncate text-center", children: String(option.label) })
                 },
                 `${String(option.value)}-${virtualItem.index}`
               );
@@ -22545,13 +22591,15 @@ function getNextEnabledIndex(options, startIndex, step) {
 var React83 = __toESM(require("react"), 1);
 var import_react_i18next44 = require("react-i18next");
 var import_lucide_react59 = require("lucide-react");
-var import_jsx_runtime195 = require("react/jsx-runtime");
-var AirbnbSearchInput = React83.forwardRef(({ onReset, placeholder, wrapperClassName, ...props }, ref) => {
+var import_jsx_runtime196 = require("react/jsx-runtime");
+var AirbnbSearchInput = React83.forwardRef(({ onReset, placeholder, helper, wrapperClassName, ...props }, ref) => {
   const { t } = (0, import_react_i18next44.useTranslation)();
+  const generatedId = React83.useId();
+  const helperId = helper ? `${props.id ?? generatedId}-helper` : void 0;
   const placeholderText = placeholder || t("search_property") + "...";
-  return /* @__PURE__ */ (0, import_jsx_runtime195.jsxs)("div", { className: cn("input-wrapper relative", wrapperClassName), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(import_lucide_react59.Search, { className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 transform text-[var(--chekin-neutral-500)]" }),
-    /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(
+  const field = /* @__PURE__ */ (0, import_jsx_runtime196.jsxs)("div", { className: cn("input-wrapper relative", wrapperClassName), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(import_lucide_react59.Search, { className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 transform text-[var(--chekin-neutral-500)]" }),
+    /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(
       "input",
       {
         ...props,
@@ -22564,22 +22612,30 @@ var AirbnbSearchInput = React83.forwardRef(({ onReset, placeholder, wrapperClass
         onFocus: props.onFocus,
         onBlur: props.onBlur,
         placeholder: placeholderText,
+        "aria-describedby": helperId ?? props["aria-describedby"],
         className: cn(
           "placeholder-shown:bg-accent flex h-10 w-full rounded-md border border-input bg-background py-3 pl-12 pr-4 text-base text-[#2d3748] ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-base placeholder:font-medium placeholder:text-[var(--chekin-neutral-500)] focus:border-gray-300 focus:outline-none focus:ring-0 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
           props.className
         )
       }
     ),
-    onReset && /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(
+    onReset && /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(
       Button,
       {
         variant: "ghost",
         onClick: onReset,
         className: "absolute right-0 top-1/2 h-5 w-5 -translate-y-1/2 transform text-[var(--chekin-neutral-500)]",
-        children: /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(import_lucide_react59.X, { className: "h-5 w-5" })
+        children: /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(import_lucide_react59.X, { className: "h-5 w-5" })
       }
     )
   ] });
+  if (!helper) {
+    return field;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime196.jsxs)("div", { className: "w-full", children: [
+    field,
+    /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(AirbnbFieldHelperText, { id: helperId, helper, disabled: props.disabled })
+  ] });
 });
 AirbnbSearchInput.displayName = "AirbnbSearchInput";
 
@@ -22587,7 +22643,7 @@ AirbnbSearchInput.displayName = "AirbnbSearchInput";
 var React84 = __toESM(require("react"), 1);
 var SwitchPrimitives2 = __toESM(require("@radix-ui/react-switch"), 1);
 var import_lucide_react60 = require("lucide-react");
-var import_jsx_runtime196 = require("react/jsx-runtime");
+var import_jsx_runtime197 = require("react/jsx-runtime");
 var AirbnbSwitch = React84.forwardRef(
   ({
     className,
@@ -22599,15 +22655,18 @@ var AirbnbSwitch = React84.forwardRef(
     id,
     label,
     error,
+    helper,
     wrapperClassName,
     ...props
   }, ref) => {
     const generatedId = React84.useId();
     const fieldId = id || generatedId;
-    const switchElement = /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(
+    const helperId = `${fieldId}-helper`;
+    const switchElement = /* @__PURE__ */ (0, import_jsx_runtime197.jsx)(
       SwitchPrimitives2.Root,
       {
         ref,
+        "aria-describedby": helper ? helperId : void 0,
         className: cn(
           "group inline-flex h-[24px] w-[36px] shrink-0 cursor-pointer items-center rounded-full border border-solid border-transparent p-[2px] transition-colors duration-200",
           "focus-visible:outline-none focus-visible:shadow-[var(--chekin-shadow-focus)]",
@@ -22624,14 +22683,14 @@ var AirbnbSwitch = React84.forwardRef(
         "aria-busy": loading,
         "aria-readonly": readOnly,
         ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(
+        children: /* @__PURE__ */ (0, import_jsx_runtime197.jsx)(
           SwitchPrimitives2.Thumb,
           {
             className: cn(
               "flex h-[20px] w-[20px] items-center justify-center rounded-full bg-white shadow-[0_1px_3px_rgba(0,0,0,0.22)] transition-transform duration-200",
               "data-[state=checked]:translate-x-[12px] data-[state=unchecked]:translate-x-0"
             ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime197.jsx)(
               import_lucide_react60.Check,
               {
                 "aria-hidden": "true",
@@ -22643,13 +22702,13 @@ var AirbnbSwitch = React84.forwardRef(
         )
       }
     );
-    if (!label && !error) {
+    if (!label && !error && !helper) {
       return switchElement;
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime196.jsxs)(import_jsx_runtime196.Fragment, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime196.jsxs)("div", { className: cn("flex items-center gap-x-3 gap-y-1.5", wrapperClassName), children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime197.jsxs)(import_jsx_runtime197.Fragment, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime197.jsxs)("div", { className: cn("flex items-center gap-x-3 gap-y-1.5", wrapperClassName), children: [
         switchElement,
-        label && /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(
+        label && /* @__PURE__ */ (0, import_jsx_runtime197.jsx)(
           Label,
           {
             htmlFor: fieldId,
@@ -22661,7 +22720,8 @@ var AirbnbSwitch = React84.forwardRef(
           }
         )
       ] }),
-      error && /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(ErrorMessage, { disabled, children: error })
+      error && /* @__PURE__ */ (0, import_jsx_runtime197.jsx)(ErrorMessage, { disabled, children: error }),
+      !error && /* @__PURE__ */ (0, import_jsx_runtime197.jsx)(AirbnbFieldHelperText, { id: helperId, helper, disabled })
     ] });
   }
 );
@@ -22674,6 +22734,7 @@ AirbnbSwitch.displayName = "AirbnbSwitch";
   AccordionItem,
   AccordionTrigger,
   AirbnbDatePicker,
+  AirbnbFieldHelperText,
   AirbnbFieldTrigger,
   AirbnbInput,
   AirbnbPhoneField,