@chekinapp/ui 0.2.3 → 0.2.6

package/dist/index.js

@@ -7865,7 +7865,7 @@ function Modal({
       overlayClassName,
       className: cn(
         "modal__content",
-        "flex h-auto min-w-[340px] w-auto flex-col items-center gap-y-6 rounded-md bg-[var(--chekin-color-white)] text-center text-[var(--chekin-color-brand-navy)]",
+        "flex h-auto min-w-[340px] w-auto flex-col items-center gap-y-6 bg-[var(--chekin-color-white)] text-center text-[var(--chekin-color-brand-navy)]",
         scrollableOverlay && "min-h-0",
         size === "compact" && "w-[360px] min-w-0",
         className
@@ -7887,7 +7887,7 @@ function Modal({
           }
         ),
         (icon || iconSrc || iconProps?.src) && /* @__PURE__ */ jsx70("div", { className: cn("modal__icon mx-auto mt-4 select-none", iconClassName), children: icon ?? /* @__PURE__ */ jsx70("img", { src: iconSrc, alt: iconAlt ?? "", ...iconProps }) }),
-        title ? /* @__PURE__ */ jsx70(DialogTitle, { className: cn("modal__title", "px-6 text-lg font-bold"), children: title }) : /* @__PURE__ */ jsx70(DialogVisuallyHidden, { children: /* @__PURE__ */ jsx70(DialogTitle, { children: "Dialog" }) }),
+        title ? /* @__PURE__ */ jsx70(DialogTitle, { className: cn("modal__title", "px-6 font-bold"), children: title }) : /* @__PURE__ */ jsx70(DialogVisuallyHidden, { children: /* @__PURE__ */ jsx70(DialogTitle, { children: "Dialog" }) }),
         text && /* @__PURE__ */ jsx70(DialogDescription, { className: cn("modal__text", "text-base"), children: text }),
         children,
         buttons && /* @__PURE__ */ jsx70(
@@ -9555,7 +9555,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"
     }
@@ -9595,19 +9595,19 @@ var Section = forwardRef38(
               "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-semibold text-[var(--section-title-color)] md:max-w-full",
                   size !== 0 /* L */ && "subsection-title",
                   titleClassName
                 ),
                 children: [
                   title,
                   titleTooltip && /* @__PURE__ */ jsx98("div", { className: "ml-2.5", children: /* @__PURE__ */ jsx98(TooltipInfo, { content: titleTooltip }) }),
-                  linkContent && /* @__PURE__ */ jsx98("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__ */ jsx98("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__ */ jsxs60("div", { className: "w-full max-w-[720px] md:max-w-full", children: [
-              /* @__PURE__ */ jsx98("div", { className: "inline text-base font-normal text-[var(--chekin-color-gray-1)]", children: subtitle }),
+              /* @__PURE__ */ jsx98("div", { className: "inline text-base font-normal text-[var(--section-subtitle-color)]", children: subtitle }),
               subtitleTooltip && /* @__PURE__ */ jsx98("div", { className: "ml-1.5 inline-block align-text-top", children: /* @__PURE__ */ jsx98(TooltipInfo, { content: subtitleTooltip }) })
             ] })
           ] }),
@@ -19945,7 +19945,32 @@ import { Calendar as Calendar2 } from "lucide-react";
 import * as React73 from "react";
 import { Loader2 as Loader24 } from "lucide-react";
 import { useTranslation as useTranslation42 } from "react-i18next";
-import { Fragment as Fragment17, jsx as jsx182, jsxs as jsxs116 } from "react/jsx-runtime";
+
+// src/airbnb-fields/field-helper-text/FieldHelperText.tsx
+import { jsx as jsx182 } from "react/jsx-runtime";
+function AirbnbFieldHelperText({
+  id,
+  helper,
+  disabled,
+  className
+}) {
+  if (!helper) return null;
+  return /* @__PURE__ */ jsx182(
+    "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
+import { Fragment as Fragment17, jsx as jsx183, jsxs as jsxs116 } from "react/jsx-runtime";
 var AirbnbFieldTrigger = React73.forwardRef(
   ({
     as = "button",
@@ -19959,6 +19984,7 @@ var AirbnbFieldTrigger = React73.forwardRef(
     labelText,
     valueText,
     placeholder,
+    helper,
     disabled,
     error,
     loading,
@@ -19977,19 +20003,20 @@ var AirbnbFieldTrigger = React73.forwardRef(
     ...props
   }, ref) => {
     const { t } = useTranslation42();
+    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__ */ jsxs116("span", { className: "inline-flex max-w-full items-center gap-1.5 align-middle", children: [
-      /* @__PURE__ */ jsx182("span", { className: "min-w-0 truncate", children: visibleLabelText }),
+      /* @__PURE__ */ jsx183("span", { className: "min-w-0 truncate", children: visibleLabelText }),
       optionalLabel && /* @__PURE__ */ jsxs116("span", { className: "text-current opacity-70 lowercase", children: [
         "(",
         optionalLabel,
         ")"
       ] }),
-      tooltip && /* @__PURE__ */ jsx182(
+      tooltip && /* @__PURE__ */ jsx183(
         HelpTooltip,
         {
           content: tooltip,
@@ -20003,10 +20030,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__ */ jsxs116("span", { className: "flex items-center gap-2", children: [
       trailingAdornment,
-      loading && /* @__PURE__ */ jsx182(
+      loading && /* @__PURE__ */ jsx183(
         Loader24,
         {
           "aria-hidden": "true",
@@ -20032,7 +20063,7 @@ var AirbnbFieldTrigger = React73.forwardRef(
             contentClassName
           ),
           children: [
-            /* @__PURE__ */ jsx182(
+            /* @__PURE__ */ jsx183(
               "span",
               {
                 id: labelId,
@@ -20045,7 +20076,7 @@ var AirbnbFieldTrigger = React73.forwardRef(
                 children: animatedLabel
               }
             ),
-            children ? children : hasValue ? /* @__PURE__ */ jsx182(
+            children ? children : hasValue ? /* @__PURE__ */ jsx183(
               "span",
               {
                 id: valueId,
@@ -20056,11 +20087,11 @@ var AirbnbFieldTrigger = React73.forwardRef(
                 ),
                 children: valueText
               }
-            ) : /* @__PURE__ */ jsx182("span", { id: helperTextId, className: "sr-only", children: placeholder ?? label })
+            ) : /* @__PURE__ */ jsx183("span", { id: helperTextId, className: "sr-only", children: placeholder ?? label })
           ]
         }
       ),
-      resolvedTrailingAdornment && /* @__PURE__ */ jsx182(
+      resolvedTrailingAdornment && /* @__PURE__ */ jsx183(
         "span",
         {
           "aria-hidden": "true",
@@ -20070,15 +20101,15 @@ var AirbnbFieldTrigger = React73.forwardRef(
       )
     ] });
     return /* @__PURE__ */ jsxs116("div", { className: "w-full", children: [
-      topLabel && /* @__PURE__ */ jsx182("p", { className: "mb-3 text-[16px] font-semibold leading-5 text-[var(--chekin-airbnb-ink-strong)]", children: topLabel }),
-      as === "button" ? /* @__PURE__ */ jsx182(
+      topLabel && /* @__PURE__ */ jsx183("p", { className: "mb-3 text-[16px] font-semibold leading-5 text-[var(--chekin-airbnb-ink-strong)]", children: topLabel }),
+      as === "button" ? /* @__PURE__ */ jsx183(
         "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,
@@ -20088,13 +20119,13 @@ var AirbnbFieldTrigger = React73.forwardRef(
           ...props,
           children: sharedContent
         }
-      ) : /* @__PURE__ */ jsx182(
+      ) : /* @__PURE__ */ jsx183(
         "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,
@@ -20105,14 +20136,15 @@ var AirbnbFieldTrigger = React73.forwardRef(
           children: sharedContent
         }
       ),
-      errorMessage && !hideErrorMessage && /* @__PURE__ */ jsx182(FieldErrorMessage, { id: errorId, message: errorMessage })
+      showErrorMessage && /* @__PURE__ */ jsx183(FieldErrorMessage, { id: errorId, message: errorMessage }),
+      showHelper && /* @__PURE__ */ jsx183(AirbnbFieldHelperText, { id: helperId, helper, disabled })
     ] });
   }
 );
 AirbnbFieldTrigger.displayName = "AirbnbFieldTrigger";
 
 // src/airbnb-fields/datepicker/DatePicker.tsx
-import { jsx as jsx183, jsxs as jsxs117 } from "react/jsx-runtime";
+import { jsx as jsx184, jsxs as jsxs117 } from "react/jsx-runtime";
 var DEFAULT_MIN_DATE = new Date(1920, 0, 1);
 var AirbnbDatePicker = React74.forwardRef(
   ({
@@ -20129,6 +20161,7 @@ var AirbnbDatePicker = React74.forwardRef(
     loading,
     optional,
     tooltip,
+    helper,
     className,
     name,
     minDate,
@@ -20229,7 +20262,7 @@ var AirbnbDatePicker = React74.forwardRef(
       }
     }, [isBlocked]);
     return /* @__PURE__ */ jsxs117("div", { className: cn("relative w-full max-w-[var(--max-field-width)]", className), children: [
-      name && /* @__PURE__ */ jsx183(
+      name && /* @__PURE__ */ jsx184(
         "input",
         {
           type: "hidden",
@@ -20237,7 +20270,7 @@ var AirbnbDatePicker = React74.forwardRef(
           value: resolvedValue ? formatDateInputValue(resolvedValue) : ""
         }
       ),
-      /* @__PURE__ */ jsx183(
+      /* @__PURE__ */ jsx184(
         AirbnbFieldTrigger,
         {
           id: triggerId,
@@ -20257,13 +20290,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__ */ jsx183(
+          trailingAdornment: /* @__PURE__ */ jsx184(
             Calendar2,
             {
               className: "h-5 w-5 text-[var(--chekin-airbnb-ink)]",
@@ -20272,7 +20306,7 @@ var AirbnbDatePicker = React74.forwardRef(
           )
         }
       ),
-      /* @__PURE__ */ jsx183(
+      /* @__PURE__ */ jsx184(
         AirbnbDatePickerContent,
         {
           baseId: pickerId,
@@ -20309,13 +20343,14 @@ AirbnbDatePicker.displayName = "AirbnbDatePicker";
 import * as React75 from "react";
 import { Eye as Eye2 } from "lucide-react";
 import { useTranslation as useTranslation43 } from "react-i18next";
-import { jsx as jsx184, jsxs as jsxs118 } from "react/jsx-runtime";
+import { jsx as jsx185, jsxs as jsxs118 } from "react/jsx-runtime";
 var getInputValue = (value) => value != null ? String(value) : "";
 var AirbnbInput = React75.forwardRef(
   ({
     label,
     topLabel,
     helperText,
+    helper,
     error,
     invalid,
     loading,
@@ -20410,7 +20445,7 @@ var AirbnbInput = React75.forwardRef(
       }
       inputRef.current?.focus();
     };
-    return /* @__PURE__ */ jsx184("div", { className: cn("w-full max-w-[var(--max-field-width)]", wrapperClassName), children: /* @__PURE__ */ jsxs118(
+    return /* @__PURE__ */ jsx185("div", { className: cn("w-full max-w-[var(--max-field-width)]", wrapperClassName), children: /* @__PURE__ */ jsxs118(
       AirbnbFieldTrigger,
       {
         as: "div",
@@ -20422,6 +20457,7 @@ var AirbnbInput = React75.forwardRef(
         errorId: error ? errorId : void 0,
         labelText: helperText ?? label,
         placeholder: placeholder ?? label,
+        helper,
         disabled,
         error: triggerError,
         loading,
@@ -20440,7 +20476,7 @@ var AirbnbInput = React75.forwardRef(
         forceLabelText: hasLabelMeta,
         hideErrorMessage: !renderErrorMessage,
         children: [
-          /* @__PURE__ */ jsx184(
+          /* @__PURE__ */ jsx185(
             "input",
             {
               ...props,
@@ -20470,7 +20506,7 @@ var AirbnbInput = React75.forwardRef(
               )
             }
           ),
-          shouldShowPasswordReveal && /* @__PURE__ */ jsx184(
+          shouldShowPasswordReveal && /* @__PURE__ */ jsx185(
             "button",
             {
               type: "button",
@@ -20478,7 +20514,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__ */ jsx184(
+              children: /* @__PURE__ */ jsx185(
                 Eye2,
                 {
                   size: 18,
@@ -20505,7 +20541,7 @@ import { ChevronDown as ChevronDown6 } from "lucide-react";
 import * as React80 from "react";
 
 // src/airbnb-fields/select/SelectDesktopMenu.tsx
-import { jsx as jsx185, jsxs as jsxs119 } from "react/jsx-runtime";
+import { jsx as jsx186, jsxs as jsxs119 } from "react/jsx-runtime";
 function AirbnbSelectDesktopMenu({
   id,
   options,
@@ -20537,12 +20573,12 @@ function AirbnbSelectDesktopMenu({
       onKeyDown,
       className: cn("max-h-[280px] overflow-y-auto p-2 outline-none", menuClassName),
       children: [
-        options.length === 0 && emptyMessage ? /* @__PURE__ */ jsx185("div", { className: "px-4 py-3 text-base leading-6 text-[var(--chekin-airbnb-gray-text)]", children: emptyMessage }) : null,
+        options.length === 0 && emptyMessage ? /* @__PURE__ */ jsx186("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__ */ jsx185(
+          return /* @__PURE__ */ jsx186(
             "button",
             {
               id: getOptionId2(index),
@@ -20574,7 +20610,7 @@ function AirbnbSelectDesktopMenu({
 }
 
 // src/airbnb-fields/select/SelectDesktopContent.tsx
-import { jsx as jsx186 } from "react/jsx-runtime";
+import { jsx as jsx187 } from "react/jsx-runtime";
 function AirbnbSelectDesktopContent({
   isOpen,
   listboxId,
@@ -20595,14 +20631,14 @@ function AirbnbSelectDesktopContent({
   noOptionsMessage
 }) {
   if (!isOpen) return null;
-  return /* @__PURE__ */ jsx186(
+  return /* @__PURE__ */ jsx187(
     "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__ */ jsx186(
+      children: /* @__PURE__ */ jsx187(
         AirbnbSelectDesktopMenu,
         {
           id: listboxId,
@@ -20700,7 +20736,7 @@ function getMobileOptionStyles(index, scrollTop) {
 }
 
 // src/airbnb-fields/select/SelectMobileWheel.tsx
-import { jsx as jsx187, jsxs as jsxs120 } from "react/jsx-runtime";
+import { jsx as jsx188, jsxs as jsxs120 } from "react/jsx-runtime";
 function AirbnbSelectMobileWheel({
   id,
   options,
@@ -20731,10 +20767,10 @@ function AirbnbSelectMobileWheel({
       onKeyDown,
       className: cn("relative overflow-hidden outline-none", menuClassName),
       children: [
-        options.length === 0 && emptyMessage ? /* @__PURE__ */ jsx187("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__ */ jsx187("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__ */ jsx187("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__ */ jsx187(
+        options.length === 0 && emptyMessage ? /* @__PURE__ */ jsx188("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__ */ jsx188("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__ */ jsx188("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__ */ jsx188(
           "div",
           {
             "aria-hidden": true,
@@ -20759,11 +20795,11 @@ function AirbnbSelectMobileWheel({
               WebkitOverflowScrolling: "touch"
             },
             children: [
-              /* @__PURE__ */ jsx187("div", { style: { height: `${spacerHeight2}px` } }),
+              /* @__PURE__ */ jsx188("div", { style: { height: `${spacerHeight2}px` } }),
               options.map((option, index) => {
                 const { distance, style } = getMobileOptionStyles(index, scrollTop);
                 const optionKey = `${String(option.value)}-${index}`;
-                return /* @__PURE__ */ jsx187(
+                return /* @__PURE__ */ jsx188(
                   "button",
                   {
                     id: getOptionId2(index),
@@ -20784,7 +20820,7 @@ function AirbnbSelectMobileWheel({
                   optionKey
                 );
               }),
-              /* @__PURE__ */ jsx187("div", { style: { height: `${spacerHeight2}px` } })
+              /* @__PURE__ */ jsx188("div", { style: { height: `${spacerHeight2}px` } })
             ]
           }
         )
@@ -20794,7 +20830,7 @@ function AirbnbSelectMobileWheel({
 }
 
 // src/airbnb-fields/select/SelectMobileContent.tsx
-import { jsx as jsx188, jsxs as jsxs121 } from "react/jsx-runtime";
+import { jsx as jsx189, jsxs as jsxs121 } from "react/jsx-runtime";
 function AirbnbSelectMobileContent({
   open,
   onOpenChange,
@@ -20818,11 +20854,11 @@ function AirbnbSelectMobileContent({
   getOptionId: getOptionId2,
   noOptionsMessage
 }) {
-  return /* @__PURE__ */ jsx188(Drawer, { open, onOpenChange, children: /* @__PURE__ */ jsxs121(DrawerContent, { onClose, lockScroll: false, children: [
-    /* @__PURE__ */ jsx188(DrawerTitle, { className: "sr-only", children: mobileTitle ?? label }),
-    /* @__PURE__ */ jsx188(DrawerDescription, { className: "sr-only", children: label }),
+  return /* @__PURE__ */ jsx189(Drawer, { open, onOpenChange, children: /* @__PURE__ */ jsxs121(DrawerContent, { onClose, lockScroll: false, children: [
+    /* @__PURE__ */ jsx189(DrawerTitle, { className: "sr-only", children: mobileTitle ?? label }),
+    /* @__PURE__ */ jsx189(DrawerDescription, { className: "sr-only", children: label }),
     /* @__PURE__ */ jsxs121("div", { className: "px-6 pb-4 pt-1", children: [
-      /* @__PURE__ */ jsx188(
+      /* @__PURE__ */ jsx189(
         AirbnbSelectMobileWheel,
         {
           id: listboxId,
@@ -20841,7 +20877,7 @@ function AirbnbSelectMobileContent({
           noOptionsMessage
         }
       ),
-      /* @__PURE__ */ jsx188(Button, { type: "button", onClick: onDone, className: "mt-4 h-12 mb-8 w-full", children: doneLabel })
+      /* @__PURE__ */ jsx189(Button, { type: "button", onClick: onDone, className: "mt-4 h-12 mb-8 w-full", children: doneLabel })
     ] })
   ] }) });
 }
@@ -20849,7 +20885,7 @@ function AirbnbSelectMobileContent({
 // src/airbnb-fields/select/SelectTrigger.tsx
 import * as React76 from "react";
 import { ChevronDown as ChevronDown5 } from "lucide-react";
-import { jsx as jsx189 } from "react/jsx-runtime";
+import { jsx as jsx190 } from "react/jsx-runtime";
 var AirbnbSelectTrigger = React76.forwardRef(
   ({
     id,
@@ -20862,6 +20898,7 @@ var AirbnbSelectTrigger = React76.forwardRef(
     loading,
     optional,
     tooltip,
+    helper,
     error,
     hideErrorMessage,
     labelId,
@@ -20874,7 +20911,7 @@ var AirbnbSelectTrigger = React76.forwardRef(
     onKeyDown,
     onBlur
   }, ref) => {
-    return /* @__PURE__ */ jsx189(
+    return /* @__PURE__ */ jsx190(
       AirbnbFieldTrigger,
       {
         id,
@@ -20896,13 +20933,14 @@ var AirbnbSelectTrigger = React76.forwardRef(
         loading,
         optional,
         tooltip,
+        helper,
         forceLabelText: Boolean(optional) || Boolean(tooltip),
         hideErrorMessage,
         disabled,
         onClick,
         onKeyDown,
         onBlur,
-        trailingAdornment: /* @__PURE__ */ jsx189(
+        trailingAdornment: /* @__PURE__ */ jsx190(
           ChevronDown5,
           {
             strokeWidth: "1.5",
@@ -21265,7 +21303,7 @@ function useSelectIds2({ name, hasValue, error, hideErrorMessage }) {
 }
 
 // src/airbnb-fields/select/Select.tsx
-import { jsx as jsx190, jsxs as jsxs122 } from "react/jsx-runtime";
+import { jsx as jsx191, jsxs as jsxs122 } from "react/jsx-runtime";
 var AirbnbSelect = React80.forwardRef(function AirbnbSelect2({
   options = [],
   value,
@@ -21280,6 +21318,7 @@ var AirbnbSelect = React80.forwardRef(function AirbnbSelect2({
   loading,
   optional,
   tooltip,
+  helper,
   error,
   invalid,
   hideErrorMessage,
@@ -21452,7 +21491,7 @@ var AirbnbSelect = React80.forwardRef(function AirbnbSelect2({
       ref: containerRef,
       className: cn("relative w-full max-w-[var(--max-field-width)]", className),
       children: [
-        name && /* @__PURE__ */ jsx190("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
+        name && /* @__PURE__ */ jsx191("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
         renderTrigger ? renderTrigger({
           id: triggerId,
           open: isOpen,
@@ -21465,6 +21504,7 @@ var AirbnbSelect = React80.forwardRef(function AirbnbSelect2({
           loading,
           optional,
           tooltip,
+          helper,
           error,
           invalid,
           listboxId,
@@ -21473,7 +21513,7 @@ var AirbnbSelect = React80.forwardRef(function AirbnbSelect2({
           onClick: handleTriggerClick,
           onKeyDown: handleRootTriggerKeyDown,
           onBlur
-        }) : /* @__PURE__ */ jsx190(
+        }) : /* @__PURE__ */ jsx191(
           AirbnbSelectTrigger,
           {
             id: triggerId,
@@ -21487,6 +21527,7 @@ var AirbnbSelect = React80.forwardRef(function AirbnbSelect2({
             loading,
             optional,
             tooltip,
+            helper,
             error: triggerError,
             hideErrorMessage,
             labelId,
@@ -21500,7 +21541,7 @@ var AirbnbSelect = React80.forwardRef(function AirbnbSelect2({
             onBlur
           }
         ),
-        isMobile3 ? /* @__PURE__ */ jsx190(
+        isMobile3 ? /* @__PURE__ */ jsx191(
           AirbnbSelectMobileContent,
           {
             open: isOpen,
@@ -21525,7 +21566,7 @@ var AirbnbSelect = React80.forwardRef(function AirbnbSelect2({
             getOptionId: getOptionId2,
             noOptionsMessage
           }
-        ) : /* @__PURE__ */ jsx190(
+        ) : /* @__PURE__ */ jsx191(
           AirbnbSelectDesktopContent,
           {
             isOpen,
@@ -21559,7 +21600,7 @@ var AirbnbSelect = React80.forwardRef(function AirbnbSelect2({
 });
 
 // src/airbnb-fields/phone-field/PhoneField.tsx
-import { jsx as jsx191, jsxs as jsxs123 } from "react/jsx-runtime";
+import { jsx as jsx192, jsxs as jsxs123 } from "react/jsx-runtime";
 function formatPhoneCodeOptionLabel2(option) {
   const label = String(option.label);
   const value = String(option.value);
@@ -21581,6 +21622,7 @@ var AirbnbPhoneField = React81.forwardRef(
     loading,
     optional,
     tooltip,
+    helper,
     className,
     name,
     codeName,
@@ -21608,8 +21650,8 @@ var AirbnbPhoneField = React81.forwardRef(
     const isBlocked = Boolean(disabled) || Boolean(loading);
     const isCodeBlocked = isBlocked || Boolean(codeReadOnly);
     return /* @__PURE__ */ jsxs123("div", { className: cn("w-full max-w-[var(--max-field-width)]", className), children: [
-      name && /* @__PURE__ */ jsx191("input", { type: "hidden", name, value: combinedValue, disabled }),
-      codeName && /* @__PURE__ */ jsx191(
+      name && /* @__PURE__ */ jsx192("input", { type: "hidden", name, value: combinedValue, disabled }),
+      codeName && /* @__PURE__ */ jsx192(
         "input",
         {
           type: "hidden",
@@ -21618,7 +21660,7 @@ var AirbnbPhoneField = React81.forwardRef(
           disabled
         }
       ),
-      numberName && /* @__PURE__ */ jsx191(
+      numberName && /* @__PURE__ */ jsx192(
         "input",
         {
           type: "hidden",
@@ -21627,7 +21669,7 @@ var AirbnbPhoneField = React81.forwardRef(
           disabled
         }
       ),
-      topLabel && /* @__PURE__ */ jsx191(
+      topLabel && /* @__PURE__ */ jsx192(
         "label",
         {
           htmlFor: inputId,
@@ -21636,7 +21678,7 @@ var AirbnbPhoneField = React81.forwardRef(
         }
       ),
       /* @__PURE__ */ jsxs123("div", { className: "flex items-stretch", children: [
-        /* @__PURE__ */ jsx191(
+        /* @__PURE__ */ jsx192(
           AirbnbSelect,
           {
             ref,
@@ -21686,8 +21728,8 @@ var AirbnbPhoneField = React81.forwardRef(
                   triggerDisabled ? "cursor-not-allowed opacity-50" : triggerLoading ? "cursor-progress" : "cursor-pointer"
                 ),
                 children: [
-                  /* @__PURE__ */ jsx191("span", { children: valueLabel ?? codePlaceholder }),
-                  /* @__PURE__ */ jsx191(
+                  /* @__PURE__ */ jsx192("span", { children: valueLabel ?? codePlaceholder }),
+                  /* @__PURE__ */ jsx192(
                     ChevronDown6,
                     {
                       className: cn("h-5 w-5 transition-transform", open ? "rotate-180" : ""),
@@ -21699,7 +21741,7 @@ var AirbnbPhoneField = React81.forwardRef(
             )
           }
         ),
-        /* @__PURE__ */ jsx191(
+        /* @__PURE__ */ jsx192(
           AirbnbInput,
           {
             id: inputId,
@@ -21728,7 +21770,8 @@ var AirbnbPhoneField = React81.forwardRef(
           }
         )
       ] }),
-      error && /* @__PURE__ */ jsx191(FieldErrorMessage, { message: error })
+      error && /* @__PURE__ */ jsx192(FieldErrorMessage, { message: error }),
+      !error && /* @__PURE__ */ jsx192(AirbnbFieldHelperText, { helper, disabled })
     ] });
   }
 );
@@ -21739,7 +21782,7 @@ import * as React82 from "react";
 import { ChevronDown as ChevronDown7, Search as Search5 } from "lucide-react";
 import { useVirtualizer as useVirtualizer3 } from "@tanstack/react-virtual";
 import { useCallback as useCallback58 } from "react";
-import { jsx as jsx192, jsxs as jsxs124 } from "react/jsx-runtime";
+import { jsx as jsx193, jsxs as jsxs124 } from "react/jsx-runtime";
 var ROW_HEIGHT = 48;
 var DESKTOP_LIST_HEIGHT = 280;
 var MOBILE_LIST_HEIGHT = 420;
@@ -21770,6 +21813,7 @@ var AirbnbSearchableSelectInternal = ({
   invalid,
   optional,
   tooltip,
+  helper,
   hideErrorMessage,
   name,
   className,
@@ -21907,7 +21951,7 @@ var AirbnbSearchableSelectInternal = ({
       }
     }
   }
-  const content = /* @__PURE__ */ jsx192(
+  const content = /* @__PURE__ */ jsx193(
     AirbnbSearchableSelectContent,
     {
       inputId: searchInputId,
@@ -21936,8 +21980,8 @@ var AirbnbSearchableSelectInternal = ({
   );
   React82.useImperativeHandle(ref, () => triggerRef.current, []);
   return /* @__PURE__ */ jsxs124("div", { ref: containerRef, className: cn("relative w-full max-w-[425px]", className), children: [
-    name && /* @__PURE__ */ jsx192("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
-    /* @__PURE__ */ jsx192(
+    name && /* @__PURE__ */ jsx193("input", { type: "hidden", name, value: value ? String(value.value) : "" }),
+    /* @__PURE__ */ jsx193(
       AirbnbFieldTrigger,
       {
         id: `${reactId}-trigger`,
@@ -21959,6 +22003,7 @@ var AirbnbSearchableSelectInternal = ({
         loading,
         optional,
         tooltip,
+        helper,
         forceLabelText: Boolean(optional) || Boolean(tooltip),
         hideErrorMessage,
         disabled,
@@ -21971,7 +22016,7 @@ var AirbnbSearchableSelectInternal = ({
         },
         onKeyDown: handleTriggerKeyDown,
         onBlur,
-        trailingAdornment: /* @__PURE__ */ jsx192(
+        trailingAdornment: /* @__PURE__ */ jsx193(
           ChevronDown7,
           {
             className: cn(
@@ -21982,7 +22027,7 @@ var AirbnbSearchableSelectInternal = ({
         )
       }
     ),
-    isMobile3 ? /* @__PURE__ */ jsx192(
+    isMobile3 ? /* @__PURE__ */ jsx193(
       Drawer,
       {
         open,
@@ -21995,12 +22040,12 @@ var AirbnbSearchableSelectInternal = ({
           closeSelect();
         },
         children: /* @__PURE__ */ jsxs124(DrawerContent, { onClose: closeSelect, lockScroll: false, children: [
-          /* @__PURE__ */ jsx192(DrawerTitle, { className: "sr-only", children: mobileTitle ?? label }),
-          /* @__PURE__ */ jsx192(DrawerDescription, { className: "sr-only", children: label }),
-          /* @__PURE__ */ jsx192("div", { className: "px-5 pb-5 pt-1", children: content })
+          /* @__PURE__ */ jsx193(DrawerTitle, { className: "sr-only", children: mobileTitle ?? label }),
+          /* @__PURE__ */ jsx193(DrawerDescription, { className: "sr-only", children: label }),
+          /* @__PURE__ */ jsx193("div", { className: "px-5 pb-5 pt-1", children: content })
         ] })
       }
-    ) : open ? /* @__PURE__ */ jsx192(
+    ) : open ? /* @__PURE__ */ jsx193(
       "div",
       {
         className: cn(
@@ -22069,14 +22114,14 @@ function AirbnbSearchableSelectContent({
   }, [highlightedIndex, virtualizer]);
   return /* @__PURE__ */ jsxs124("div", { className: "p-2", children: [
     /* @__PURE__ */ jsxs124("div", { className: "relative mb-2", children: [
-      /* @__PURE__ */ jsx192(
+      /* @__PURE__ */ jsx193(
         Search5,
         {
           "aria-hidden": "true",
           className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 text-[var(--chekin-neutral-500)]"
         }
       ),
-      /* @__PURE__ */ jsx192(
+      /* @__PURE__ */ jsx193(
         "input",
         {
           id: inputId,
@@ -22095,7 +22140,7 @@ function AirbnbSearchableSelectContent({
         }
       )
     ] }),
-    loading && options.length === 0 ? /* @__PURE__ */ jsx192("div", { className: "px-4 py-5 text-center text-base leading-6 text-[var(--chekin-airbnb-gray-text)]", children: loadingText }) : options.length === 0 ? /* @__PURE__ */ jsx192("div", { className: "px-4 py-5 text-center text-base leading-6 text-[var(--chekin-airbnb-gray-text)]", children: emptyMessage }) : /* @__PURE__ */ jsx192(
+    loading && options.length === 0 ? /* @__PURE__ */ jsx193("div", { className: "px-4 py-5 text-center text-base leading-6 text-[var(--chekin-airbnb-gray-text)]", children: loadingText }) : options.length === 0 ? /* @__PURE__ */ jsx193("div", { className: "px-4 py-5 text-center text-base leading-6 text-[var(--chekin-airbnb-gray-text)]", children: emptyMessage }) : /* @__PURE__ */ jsx193(
       "div",
       {
         id: listboxId,
@@ -22104,7 +22149,7 @@ function AirbnbSearchableSelectContent({
         "aria-labelledby": labelId,
         className: cn("overflow-y-auto outline-none", menuClassName),
         style: { height: Math.min(height, rowCount * ROW_HEIGHT) },
-        children: /* @__PURE__ */ jsx192(
+        children: /* @__PURE__ */ jsx193(
           "div",
           {
             className: "relative w-full",
@@ -22112,7 +22157,7 @@ function AirbnbSearchableSelectContent({
             children: virtualItems.map((virtualItem) => {
               const option = options[virtualItem.index];
               if (!option) {
-                return /* @__PURE__ */ jsx192(
+                return /* @__PURE__ */ jsx193(
                   "div",
                   {
                     className: "absolute left-0 top-0 flex w-full items-center px-4 text-base leading-6 text-[var(--chekin-airbnb-gray-text)]",
@@ -22127,7 +22172,7 @@ function AirbnbSearchableSelectContent({
               }
               const isSelected = value?.value === option.value;
               const isHighlighted = virtualItem.index === highlightedIndex;
-              return /* @__PURE__ */ jsx192(
+              return /* @__PURE__ */ jsx193(
                 "button",
                 {
                   id: getOptionId(idPrefix, virtualItem.index),
@@ -22149,7 +22194,7 @@ function AirbnbSearchableSelectContent({
                     height: `${virtualItem.size}px`,
                     transform: `translateY(${virtualItem.start}px)`
                   },
-                  children: /* @__PURE__ */ jsx192("span", { className: "truncate text-center", children: String(option.label) })
+                  children: /* @__PURE__ */ jsx193("span", { className: "truncate text-center", children: String(option.label) })
                 },
                 `${String(option.value)}-${virtualItem.index}`
               );
@@ -22181,13 +22226,15 @@ function getNextEnabledIndex(options, startIndex, step) {
 import * as React83 from "react";
 import { useTranslation as useTranslation44 } from "react-i18next";
 import { Search as Search6, X as X11 } from "lucide-react";
-import { jsx as jsx193, jsxs as jsxs125 } from "react/jsx-runtime";
-var AirbnbSearchInput = React83.forwardRef(({ onReset, placeholder, wrapperClassName, ...props }, ref) => {
+import { jsx as jsx194, jsxs as jsxs125 } from "react/jsx-runtime";
+var AirbnbSearchInput = React83.forwardRef(({ onReset, placeholder, helper, wrapperClassName, ...props }, ref) => {
   const { t } = useTranslation44();
+  const generatedId = React83.useId();
+  const helperId = helper ? `${props.id ?? generatedId}-helper` : void 0;
   const placeholderText = placeholder || t("search_property") + "...";
-  return /* @__PURE__ */ jsxs125("div", { className: cn("input-wrapper relative", wrapperClassName), children: [
-    /* @__PURE__ */ jsx193(Search6, { className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 transform text-[var(--chekin-neutral-500)]" }),
-    /* @__PURE__ */ jsx193(
+  const field = /* @__PURE__ */ jsxs125("div", { className: cn("input-wrapper relative", wrapperClassName), children: [
+    /* @__PURE__ */ jsx194(Search6, { className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 transform text-[var(--chekin-neutral-500)]" }),
+    /* @__PURE__ */ jsx194(
       "input",
       {
         ...props,
@@ -22200,22 +22247,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__ */ jsx193(
+    onReset && /* @__PURE__ */ jsx194(
       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__ */ jsx193(X11, { className: "h-5 w-5" })
+        children: /* @__PURE__ */ jsx194(X11, { className: "h-5 w-5" })
       }
     )
   ] });
+  if (!helper) {
+    return field;
+  }
+  return /* @__PURE__ */ jsxs125("div", { className: "w-full", children: [
+    field,
+    /* @__PURE__ */ jsx194(AirbnbFieldHelperText, { id: helperId, helper, disabled: props.disabled })
+  ] });
 });
 AirbnbSearchInput.displayName = "AirbnbSearchInput";
 
@@ -22223,7 +22278,7 @@ AirbnbSearchInput.displayName = "AirbnbSearchInput";
 import * as React84 from "react";
 import * as SwitchPrimitives2 from "@radix-ui/react-switch";
 import { Check as Check8 } from "lucide-react";
-import { Fragment as Fragment18, jsx as jsx194, jsxs as jsxs126 } from "react/jsx-runtime";
+import { Fragment as Fragment18, jsx as jsx195, jsxs as jsxs126 } from "react/jsx-runtime";
 var AirbnbSwitch = React84.forwardRef(
   ({
     className,
@@ -22235,15 +22290,18 @@ var AirbnbSwitch = React84.forwardRef(
     id,
     label,
     error,
+    helper,
     wrapperClassName,
     ...props
   }, ref) => {
     const generatedId = React84.useId();
     const fieldId = id || generatedId;
-    const switchElement = /* @__PURE__ */ jsx194(
+    const helperId = `${fieldId}-helper`;
+    const switchElement = /* @__PURE__ */ jsx195(
       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)]",
@@ -22260,14 +22318,14 @@ var AirbnbSwitch = React84.forwardRef(
         "aria-busy": loading,
         "aria-readonly": readOnly,
         ...props,
-        children: /* @__PURE__ */ jsx194(
+        children: /* @__PURE__ */ jsx195(
           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__ */ jsx194(
+            children: /* @__PURE__ */ jsx195(
               Check8,
               {
                 "aria-hidden": "true",
@@ -22279,13 +22337,13 @@ var AirbnbSwitch = React84.forwardRef(
         )
       }
     );
-    if (!label && !error) {
+    if (!label && !error && !helper) {
       return switchElement;
     }
     return /* @__PURE__ */ jsxs126(Fragment18, { children: [
       /* @__PURE__ */ jsxs126("div", { className: cn("flex items-center gap-x-3 gap-y-1.5", wrapperClassName), children: [
         switchElement,
-        label && /* @__PURE__ */ jsx194(
+        label && /* @__PURE__ */ jsx195(
           Label,
           {
             htmlFor: fieldId,
@@ -22297,7 +22355,8 @@ var AirbnbSwitch = React84.forwardRef(
           }
         )
       ] }),
-      error && /* @__PURE__ */ jsx194(ErrorMessage, { disabled, children: error })
+      error && /* @__PURE__ */ jsx195(ErrorMessage, { disabled, children: error }),
+      !error && /* @__PURE__ */ jsx195(AirbnbFieldHelperText, { id: helperId, helper, disabled })
     ] });
   }
 );
@@ -22309,6 +22368,7 @@ export {
   AccordionItem,
   AccordionTrigger,
   AirbnbDatePicker,
+  AirbnbFieldHelperText,
   AirbnbFieldTrigger,
   AirbnbInput,
   AirbnbPhoneField,