@chekinapp/ui 0.0.115 → 0.0.117

package/dist/index.js

@@ -4747,7 +4747,7 @@ function Header2({ children, className, ...props }) {
     "h2",
     {
       className: cn(
-        "m-0 flex items-center gap-2 self-stretch p-0 text-2xl font-semibold leading-normal text-[var(--chekin-color-brand-navy)]",
+        "m-0 flex items-center gap-2 self-stretch p-0 text-2xl font-semibold leading-normal text-[var(--form-box-title-color)]",
         className
       ),
       ...props,
@@ -4763,7 +4763,7 @@ function Root11({ children, nested, className, ...props }) {
     "div",
     {
       className: cn(
-        "flex max-w-[1400px] flex-col items-start gap-6 self-stretch rounded-[10px] border border-[var(--chekin-color-gray-separator)] p-6 [container-type:inline-size]",
+        "flex max-w-[1400px] flex-col items-start gap-6 self-stretch rounded-[var(--form-box-radius)] border border-[var(--form-box-border)] p-6 [container-type:inline-size]",
         nested && "border-0 p-0",
         className
       ),
@@ -4780,7 +4780,7 @@ function SubHeader({ children, className, ...props }) {
     "h4",
     {
       className: cn(
-        "m-0 flex items-center gap-2 self-stretch border-b border-[var(--chekin-color-gray-separator)] px-0 py-2 text-base font-semibold leading-normal text-[var(--chekin-color-brand-navy)]",
+        "m-0 flex items-center gap-2 self-stretch border-b border-[var(--form-box-subtitle-border)] px-0 py-2 text-base font-semibold leading-normal text-[var(--form-box-subtitle-color)]",
         className
       ),
       ...props,
@@ -12511,6 +12511,23 @@ import * as React45 from "react";
 import { useTranslation as useTranslation28 } from "react-i18next";
 
 // src/dashboard/_select-internals/utils.ts
+function isOptionGroup(item) {
+  if (!item || typeof item !== "object") return false;
+  if ("value" in item) return false;
+  return Array.isArray(item.options);
+}
+function flattenGroupedOptions(items) {
+  if (!items) return [];
+  const result = [];
+  for (const item of items) {
+    if (isOptionGroup(item)) {
+      for (const option of item.options) result.push(option);
+    } else {
+      result.push(item);
+    }
+  }
+  return result;
+}
 function isOptionEnabled(option, isOptionDisabled) {
   if (!option) return false;
   if (option.isDisabled) return false;
@@ -12608,6 +12625,52 @@ function DefaultOption(props) {
 
 // src/dashboard/_select-internals/SelectMenu.tsx
 import { jsx as jsx146, jsxs as jsxs93 } from "react/jsx-runtime";
+function buildMenuEntries(groupedOptions, options, formatGroupLabel, listboxId) {
+  if (!groupedOptions || !groupedOptions.some((item) => isOptionGroup(item))) {
+    return options.map((option, index) => ({
+      kind: "option",
+      key: `${String(option.value)}-${index}`,
+      option,
+      flatIndex: index
+    }));
+  }
+  const visibleValues = new Set(options.map((option) => option.value));
+  const entries = [];
+  let flatIndex = 0;
+  let groupCount = 0;
+  for (const item of groupedOptions) {
+    if (isOptionGroup(item)) {
+      const visible = [];
+      for (const option of item.options) {
+        if (!visibleValues.has(option.value)) continue;
+        visible.push({
+          key: `${String(option.value)}-${flatIndex}`,
+          option,
+          flatIndex
+        });
+        flatIndex += 1;
+      }
+      if (visible.length === 0) continue;
+      entries.push({
+        kind: "group",
+        key: `__group-${groupCount}`,
+        labelId: `${listboxId}-group-${groupCount}`,
+        label: formatGroupLabel ? formatGroupLabel(item) : item.label,
+        options: visible
+      });
+      groupCount += 1;
+    } else if (visibleValues.has(item.value)) {
+      entries.push({
+        kind: "option",
+        key: `${String(item.value)}-${flatIndex}`,
+        option: item,
+        flatIndex
+      });
+      flatIndex += 1;
+    }
+  }
+  return entries;
+}
 function SelectMenu({
   id,
   options,
@@ -12633,7 +12696,9 @@ function SelectMenu({
   inputValue = "",
   formatOptionLabel,
   isOptionSelected: isOptionSelected2,
-  onMenuScrollToBottom
+  onMenuScrollToBottom,
+  groupedOptions,
+  formatGroupLabel
 }) {
   const { t } = useTranslation28();
   const emptyMessage = noOptionsMessage?.() ?? t("no_options");
@@ -12644,6 +12709,38 @@ function SelectMenu({
     () => selectedValues ?? (selectedValue ? [selectedValue] : []),
     [selectedValues, selectedValue]
   );
+  const entries = React45.useMemo(
+    () => buildMenuEntries(groupedOptions, options, formatGroupLabel, id),
+    [groupedOptions, options, formatGroupLabel, id]
+  );
+  const renderOption = (entry) => {
+    const { option, flatIndex, key } = entry;
+    const isSelected = isOptionSelected2 ? isOptionSelected2(option, selectedList) : isOptionSelected(option, selectedValue, selectedValues);
+    const isHighlighted = flatIndex === highlightedIndex;
+    const optionDisabled = Boolean(
+      disabled || option.isDisabled || isOptionDisabled?.(option)
+    );
+    return /* @__PURE__ */ jsx146(
+      Option,
+      {
+        id: getOptionId2(flatIndex),
+        option,
+        index: flatIndex,
+        isSelected,
+        isHighlighted,
+        isDisabled: optionDisabled,
+        isLast: flatIndex === lastIndex,
+        isMulti: Boolean(isMulti),
+        onClick: onOptionClick,
+        onHover: onOptionHover ?? (() => void 0),
+        innerRef: (node) => selectedOptionRef?.(flatIndex, node),
+        inputValue,
+        selectedOptions: selectedList,
+        formatOptionLabel
+      },
+      key
+    );
+  };
   const wasAtBottomRef = React45.useRef(false);
   const handleScroll = React45.useCallback(
     (event) => {
@@ -12677,32 +12774,21 @@ function SelectMenu({
       ),
       children: [
         !hasOptions && (emptyContent ?? /* @__PURE__ */ jsx146("div", { className: "px-3 py-3 text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: emptyMessage })),
-        options.map((option, index) => {
-          const isSelected = isOptionSelected2 ? isOptionSelected2(option, selectedList) : isOptionSelected(option, selectedValue, selectedValues);
-          const isHighlighted = index === highlightedIndex;
-          const optionDisabled = Boolean(
-            disabled || option.isDisabled || isOptionDisabled?.(option)
-          );
-          return /* @__PURE__ */ jsx146(
-            Option,
-            {
-              id: getOptionId2(index),
-              option,
-              index,
-              isSelected,
-              isHighlighted,
-              isDisabled: optionDisabled,
-              isLast: index === lastIndex,
-              isMulti: Boolean(isMulti),
-              onClick: onOptionClick,
-              onHover: onOptionHover ?? (() => void 0),
-              innerRef: (node) => selectedOptionRef?.(index, node),
-              inputValue,
-              selectedOptions: selectedList,
-              formatOptionLabel
-            },
-            `${String(option.value)}-${index}`
-          );
+        entries.map((entry) => {
+          if (entry.kind === "group") {
+            return /* @__PURE__ */ jsxs93("div", { role: "group", "aria-labelledby": entry.labelId, children: [
+              /* @__PURE__ */ jsx146(
+                "div",
+                {
+                  id: entry.labelId,
+                  className: "px-3 pb-1 pt-2 text-[11px] font-semibold uppercase tracking-wide text-[var(--chekin-color-gray-1)]",
+                  children: entry.label
+                }
+              ),
+              entry.options.map(renderOption)
+            ] }, entry.key);
+          }
+          return renderOption(entry);
         }),
         footer
       ]
@@ -13631,7 +13717,9 @@ function DefaultMenuList(props) {
     inputValue,
     formatOptionLabel,
     isOptionSelected: isOptionSelected2,
-    onMenuScrollToBottom
+    onMenuScrollToBottom,
+    groupedOptions,
+    formatGroupLabel
   } = props;
   return /* @__PURE__ */ jsx154(
     SelectMenu,
@@ -13659,7 +13747,9 @@ function DefaultMenuList(props) {
       inputValue,
       formatOptionLabel,
       isOptionSelected: isOptionSelected2,
-      onMenuScrollToBottom
+      onMenuScrollToBottom,
+      groupedOptions,
+      formatGroupLabel
     }
   );
 }
@@ -13751,7 +13841,8 @@ function SelectInternal(props, ref) {
     searchPosition = "trigger",
     menuHeader,
     onMenuScrollToBottom,
-    leftIcon
+    leftIcon,
+    formatGroupLabel
   } = props;
   const isSearchInDropdown = searchPosition === "dropdown";
   const isMulti = props.isMulti === true;
@@ -13772,9 +13863,10 @@ function SelectInternal(props, ref) {
     },
     [isMulti, props.onChange]
   );
+  const flatOptions = React49.useMemo(() => flattenGroupedOptions(options), [options]);
   const state = useSelectState({
     isMulti,
-    options,
+    options: flatOptions,
     selectedOptions,
     onSelectionChange,
     filterOption,
@@ -13945,7 +14037,9 @@ function SelectInternal(props, ref) {
                   inputValue: state.inputValue,
                   formatOptionLabel,
                   isOptionSelected: isOptionSelected2,
-                  onMenuScrollToBottom
+                  onMenuScrollToBottom,
+                  groupedOptions: options,
+                  formatGroupLabel
                 }
               ),
               state.canCreateNewOption && /* @__PURE__ */ jsx156(
@@ -14699,13 +14793,7 @@ function createCountTrigger(opts) {
 
 // src/dashboard/select-checkboxes/SelectAllRow.tsx
 import { jsx as jsx167, jsxs as jsxs104 } from "react/jsx-runtime";
-function SelectAllRow({
-  label,
-  checked,
-  indeterminate,
-  disabled,
-  onToggle
-}) {
+function SelectAllRow({ label, checked, disabled, onToggle }) {
   return /* @__PURE__ */ jsxs104(
     "button",
     {
@@ -14720,7 +14808,7 @@ function SelectAllRow({
         /* @__PURE__ */ jsx167(
           BaseCheckbox,
           {
-            checked: indeterminate ? "indeterminate" : checked,
+            checked,
             disabled,
             size: "s",
             tabIndex: -1,
@@ -14756,7 +14844,6 @@ function SelectCheckboxesInternal(props, ref) {
     allowSelectAll = false,
     selectAllLabel,
     searchable = true,
-    searchPlaceholder,
     filterOption = defaultFilterOption,
     closeMenuOnSelect = false,
     onSearchChange,
@@ -14768,19 +14855,32 @@ function SelectCheckboxesInternal(props, ref) {
   );
   const [inputValue, setInputValue] = React59.useState("");
   const selected = value ?? [];
-  const filteredOptions = React59.useMemo(() => {
+  const flatRawOptions = React59.useMemo(
+    () => flattenGroupedOptions(rawOptions),
+    [rawOptions]
+  );
+  const filteredGrouped = React59.useMemo(() => {
     const trimmed = inputValue.trim();
     if (!trimmed) return rawOptions;
-    return rawOptions.filter((option) => filterOption(option, trimmed));
+    return rawOptions.map((item) => {
+      if (isOptionGroup(item)) {
+        const opts = item.options.filter((o) => filterOption(o, trimmed));
+        return opts.length > 0 ? { ...item, options: opts } : null;
+      }
+      return filterOption(item, trimmed) ? item : null;
+    }).filter((item) => item !== null);
   }, [rawOptions, inputValue, filterOption]);
-  const visibleSelectedCount = filteredOptions.reduce((acc, option) => {
+  const filteredFlat = React59.useMemo(
+    () => flattenGroupedOptions(filteredGrouped),
+    [filteredGrouped]
+  );
+  const visibleSelectedCount = filteredFlat.reduce((acc, option) => {
     return acc + (selected.some((s) => s.value === option.value) ? 1 : 0);
   }, 0);
-  const allVisibleSelected = filteredOptions.length > 0 && visibleSelectedCount === filteredOptions.length;
-  const someVisibleSelected = visibleSelectedCount > 0 && visibleSelectedCount < filteredOptions.length;
+  const allVisibleSelected = filteredFlat.length > 0 && visibleSelectedCount === filteredFlat.length;
   const handleToggleAll = React59.useCallback(() => {
     if (allVisibleSelected) {
-      const visibleValues = new Set(filteredOptions.map((option) => option.value));
+      const visibleValues = new Set(filteredFlat.map((option) => option.value));
       onChange(
         selected.filter((s) => !visibleValues.has(s.value)),
         { action: "deselect" }
@@ -14788,18 +14888,18 @@ function SelectCheckboxesInternal(props, ref) {
       return;
     }
     const merged = [...selected];
-    for (const option of filteredOptions) {
+    for (const option of filteredFlat) {
       if (!merged.some((s) => s.value === option.value)) merged.push(option);
     }
     onChange(merged, { action: "select" });
-  }, [allVisibleSelected, filteredOptions, onChange, selected]);
+  }, [allVisibleSelected, filteredFlat, onChange, selected]);
   const Control = React59.useMemo(() => {
     if (trigger) return makeTriggerSlot2(trigger);
     return createCountTrigger({
       valueText,
-      totalCount: rawOptions.length
+      totalCount: flatRawOptions.length
     });
-  }, [trigger, valueText, rawOptions.length]);
+  }, [trigger, valueText, flatRawOptions.length]);
   const components = React59.useMemo(
     () => ({
       ...userComponents,
@@ -14813,7 +14913,6 @@ function SelectCheckboxesInternal(props, ref) {
     {
       label: selectAllLabel ?? t("select_all", { defaultValue: "Select All" }),
       checked: allVisibleSelected,
-      indeterminate: someVisibleSelected,
       onToggle: handleToggleAll
     }
   ) : void 0;
@@ -14824,11 +14923,10 @@ function SelectCheckboxesInternal(props, ref) {
     },
     [onSearchChange]
   );
-  const sharedProps = {
+  const baseSharedProps = {
     ...paginationAndRest,
     value,
     onChange,
-    options: filteredOptions,
     filterOption: passthroughFilter2,
     components,
     closeMenuOnSelect,
@@ -14842,7 +14940,10 @@ function SelectCheckboxesInternal(props, ref) {
       InfiniteScrollSelect,
       {
         ref,
-        ...sharedProps
+        ...{
+          ...baseSharedProps,
+          options: filteredFlat
+        }
       }
     );
   }
@@ -14850,7 +14951,10 @@ function SelectCheckboxesInternal(props, ref) {
     Select,
     {
       ref,
-      ...sharedProps
+      ...{
+        ...baseSharedProps,
+        options: filteredGrouped
+      }
     }
   );
 }
@@ -15773,7 +15877,7 @@ var Datepicker = React63.forwardRef(
     hideErrorMessage,
     helperText,
     width,
-    locale = "en-US",
+    locale,
     minDate,
     maxDate,
     formatValue
@@ -15792,10 +15896,11 @@ var Datepicker = React63.forwardRef(
     const yearId = `${baseId}-year`;
     const labelId = `${baseId}-label`;
     const errorId = `${baseId}-error`;
-    const { t } = useTranslation39();
+    const { t, i18n } = useTranslation39();
+    const resolvedLocale = locale ?? i18n.resolvedLanguage ?? i18n.language ?? "en-US";
     const resolvedMonthLabels = React63.useMemo(
-      () => monthLabels ?? getMonthLabels2(locale),
-      [locale, monthLabels]
+      () => monthLabels ?? getMonthLabels2(resolvedLocale),
+      [resolvedLocale, monthLabels]
     );
     const resolvedMonthPlaceholder = monthPlaceholder ?? t("month");
     const resolvedDoneLabel = doneLabel ?? t("done");
@@ -17597,7 +17702,7 @@ var AirbnbFieldTrigger = React72.forwardRef(
     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 }),
-      optionalLabel && /* @__PURE__ */ jsxs116("span", { className: "shrink-0 text-[12px] relative top-[1px] font-normal leading-4 text-current opacity-70", children: [
+      optionalLabel && /* @__PURE__ */ jsxs116("span", { className: "text-current opacity-70 lowercase", children: [
         "(",
         optionalLabel,
         ")"
@@ -17651,8 +17756,8 @@ var AirbnbFieldTrigger = React72.forwardRef(
               {
                 id: labelId,
                 className: cn(
-                  "absolute left-0 origin-left truncate transition-all duration-200 ease-out",
-                  hasLabelMeta ? "" : "pointer-events-none",
+                  "absolute left-0 origin-left transition-all duration-200 ease-out",
+                  hasLabelMeta ? "max-w-full" : "pointer-events-none truncate",
                   isAirbnbVariant ? isRaised ? "top-[-1px] 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-white px-1 text-[12px] font-medium leading-4" : "top-1/2 -translate-y-1/2 text-[16px] leading-6",
                   hasInvalidState ? "text-[var(--error-message-color)]" : isAirbnbVariant ? "text-[#6c6c6c]" : "text-[#7A8399]"
                 ),
@@ -17920,7 +18025,9 @@ AirbnbDatePicker.displayName = "AirbnbDatePicker";
 
 // src/airbnb-fields/input/Input.tsx
 import * as React74 from "react";
-import { jsx as jsx184 } from "react/jsx-runtime";
+import { Eye as Eye2 } from "lucide-react";
+import { useTranslation as useTranslation44 } from "react-i18next";
+import { jsx as jsx184, jsxs as jsxs118 } from "react/jsx-runtime";
 var getInputValue = (value) => value != null ? String(value) : "";
 var AirbnbInput = React74.forwardRef(
   ({
@@ -17951,6 +18058,7 @@ var AirbnbInput = React74.forwardRef(
     placeholder,
     ...props
   }, ref) => {
+    const { t } = useTranslation44();
     const generatedId = React74.useId();
     const inputRef = React74.useRef(null);
     const inputId = id ?? generatedId;
@@ -17959,11 +18067,15 @@ var AirbnbInput = React74.forwardRef(
     const errorId = `${inputId}-error`;
     const accessibleLabel = placeholder ?? label;
     const [isFocused, setIsFocused] = React74.useState(false);
+    const [isPasswordRevealed, setIsPasswordRevealed] = React74.useState(false);
     const [currentValue, setCurrentValue] = React74.useState(
       () => value != null ? getInputValue(value) : getInputValue(defaultValue)
     );
     const resolvedValue = value != null ? getInputValue(value) : currentValue;
     const hasValue = resolvedValue.length > 0;
+    const isPasswordInput = type === "password";
+    const inputType = isPasswordInput && isPasswordRevealed ? "text" : type;
+    const shouldShowPasswordReveal = isPasswordInput && hasValue && !loading;
     const shouldShowLabel = hasValue || isFocused;
     const hasInvalidState = Boolean(error) || Boolean(invalid);
     const triggerError = error ?? invalid;
@@ -17973,6 +18085,11 @@ var AirbnbInput = React74.forwardRef(
       const nextValue = value != null ? getInputValue(value) : getInputValue(inputRef.current?.value);
       setCurrentValue((prevValue) => prevValue === nextValue ? prevValue : nextValue);
     }, [value]);
+    React74.useEffect(() => {
+      if (!isPasswordInput) {
+        setIsPasswordRevealed(false);
+      }
+    }, [isPasswordInput]);
     const setRefs = React74.useCallback(
       (node) => {
         inputRef.current = node;
@@ -18003,7 +18120,10 @@ var AirbnbInput = React74.forwardRef(
       setIsFocused(false);
       onBlur?.(event);
     };
-    return /* @__PURE__ */ jsx184("div", { className: cn("w-full max-w-[var(--max-field-width)]", wrapperClassName), children: /* @__PURE__ */ jsx184(
+    const togglePasswordReveal = () => {
+      setIsPasswordRevealed((isRevealed) => !isRevealed);
+    };
+    return /* @__PURE__ */ jsx184("div", { className: cn("w-full max-w-[var(--max-field-width)]", wrapperClassName), children: /* @__PURE__ */ jsxs118(
       AirbnbFieldTrigger,
       {
         as: "div",
@@ -18031,39 +18151,63 @@ var AirbnbInput = React74.forwardRef(
           variant === "airbnb" ? "h-[42px]" : "h-[48px]",
           contentClassName
         ),
-        trailingAdornment,
+        trailingAdornment: shouldShowPasswordReveal ? void 0 : trailingAdornment,
         forceFloatingLabel: shouldShowLabel,
         forceLabelText: hasLabelMeta,
         hideErrorMessage: !renderErrorMessage,
-        children: /* @__PURE__ */ jsx184(
-          "input",
-          {
-            ...props,
-            id: inputId,
-            ref: setRefs,
-            type,
-            disabled: isBlocked,
-            value,
-            defaultValue,
-            onChange: handleChange,
-            onFocus: handleFocus,
-            onBlur: handleBlur,
-            placeholder: "",
-            "aria-invalid": hasInvalidState,
-            "aria-busy": loading,
-            "aria-describedby": error && renderErrorMessage ? errorId : 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]",
-              hasInvalidState ? "text-[var(--status-danger)] placeholder:text-[var(--status-danger)]" : "",
-              disabled ? "cursor-not-allowed" : loading ? "cursor-progress" : "",
-              inputClassName,
-              className
-            )
-          }
-        )
+        children: [
+          /* @__PURE__ */ jsx184(
+            "input",
+            {
+              ...props,
+              id: inputId,
+              ref: setRefs,
+              type: inputType,
+              disabled: isBlocked,
+              value,
+              defaultValue,
+              onChange: handleChange,
+              onFocus: handleFocus,
+              onBlur: handleBlur,
+              placeholder: "",
+              "aria-invalid": hasInvalidState,
+              "aria-busy": loading,
+              "aria-describedby": error && renderErrorMessage ? errorId : 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]",
+                hasInvalidState ? "text-[var(--status-danger)] placeholder:text-[var(--status-danger)]" : "",
+                disabled ? "cursor-not-allowed" : loading ? "cursor-progress" : "",
+                shouldShowPasswordReveal ? "pr-8" : "",
+                inputClassName,
+                className
+              )
+            }
+          ),
+          shouldShowPasswordReveal && /* @__PURE__ */ jsx184(
+            "button",
+            {
+              type: "button",
+              onClick: togglePasswordReveal,
+              disabled: isBlocked,
+              className: cn(
+                "absolute right-0 flex h-6 w-6 items-center justify-center border-0 bg-transparent p-0 text-[#7A8399] hover:text-[#1F1F1B] hover:opacity-85 disabled:cursor-not-allowed disabled:opacity-50",
+                variant === "airbnb" ? "bottom-0" : "bottom-[12px]"
+              ),
+              "aria-label": isPasswordRevealed ? t("hide_password") : t("show_password"),
+              children: /* @__PURE__ */ jsx184(
+                Eye2,
+                {
+                  size: 18,
+                  "aria-hidden": "true",
+                  className: cn(isPasswordRevealed ? "text-[#fc98dd]" : "")
+                }
+              )
+            }
+          )
+        ]
       }
     ) });
   }
@@ -18078,7 +18222,7 @@ import { ChevronDown as ChevronDown6 } from "lucide-react";
 import * as React79 from "react";
 
 // src/airbnb-fields/select/SelectDesktopMenu.tsx
-import { jsx as jsx185, jsxs as jsxs118 } from "react/jsx-runtime";
+import { jsx as jsx185, jsxs as jsxs119 } from "react/jsx-runtime";
 function AirbnbSelectDesktopMenu({
   id,
   options,
@@ -18097,7 +18241,7 @@ function AirbnbSelectDesktopMenu({
   noOptionsMessage
 }) {
   const emptyMessage = noOptionsMessage?.();
-  return /* @__PURE__ */ jsxs118(
+  return /* @__PURE__ */ jsxs119(
     "div",
     {
       id,
@@ -18273,7 +18417,7 @@ function getMobileOptionStyles(index, scrollTop) {
 }
 
 // src/airbnb-fields/select/SelectMobileWheel.tsx
-import { jsx as jsx187, jsxs as jsxs119 } from "react/jsx-runtime";
+import { jsx as jsx187, jsxs as jsxs120 } from "react/jsx-runtime";
 function AirbnbSelectMobileWheel({
   id,
   options,
@@ -18292,7 +18436,7 @@ function AirbnbSelectMobileWheel({
 }) {
   const spacerHeight2 = getWheelSpacerHeight();
   const emptyMessage = noOptionsMessage?.();
-  return /* @__PURE__ */ jsxs119(
+  return /* @__PURE__ */ jsxs120(
     "div",
     {
       id,
@@ -18317,7 +18461,7 @@ function AirbnbSelectMobileWheel({
             )
           }
         ),
-        /* @__PURE__ */ jsxs119(
+        /* @__PURE__ */ jsxs120(
           "div",
           {
             ref: listRef,
@@ -18367,7 +18511,7 @@ function AirbnbSelectMobileWheel({
 }
 
 // src/airbnb-fields/select/SelectMobileContent.tsx
-import { jsx as jsx188, jsxs as jsxs120 } from "react/jsx-runtime";
+import { jsx as jsx188, jsxs as jsxs121 } from "react/jsx-runtime";
 function AirbnbSelectMobileContent({
   open,
   onOpenChange,
@@ -18391,10 +18535,10 @@ function AirbnbSelectMobileContent({
   getOptionId: getOptionId2,
   noOptionsMessage
 }) {
-  return /* @__PURE__ */ jsx188(Drawer, { open, onOpenChange, children: /* @__PURE__ */ jsxs120(DrawerContent, { onClose, lockScroll: false, children: [
+  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 }),
-    /* @__PURE__ */ jsxs120("div", { className: "px-6 pb-4 pt-1", children: [
+    /* @__PURE__ */ jsxs121("div", { className: "px-6 pb-4 pt-1", children: [
       /* @__PURE__ */ jsx188(
         AirbnbSelectMobileWheel,
         {
@@ -18839,7 +18983,7 @@ function useSelectIds2({ name, hasValue, error, hideErrorMessage }) {
 }
 
 // src/airbnb-fields/select/Select.tsx
-import { jsx as jsx190, jsxs as jsxs121 } from "react/jsx-runtime";
+import { jsx as jsx190, jsxs as jsxs122 } from "react/jsx-runtime";
 var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
   options = [],
   value,
@@ -19019,7 +19163,7 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
       handleMobileOpenChange(false);
     }
   };
-  return /* @__PURE__ */ jsxs121(
+  return /* @__PURE__ */ jsxs122(
     "div",
     {
       ref: containerRef,
@@ -19134,7 +19278,7 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
 });
 
 // src/airbnb-fields/phone-field/PhoneField.tsx
-import { jsx as jsx191, jsxs as jsxs122 } from "react/jsx-runtime";
+import { jsx as jsx191, jsxs as jsxs123 } from "react/jsx-runtime";
 function formatPhoneCodeOptionLabel2(option) {
   const label = String(option.label);
   const value = String(option.value);
@@ -19181,7 +19325,7 @@ var AirbnbPhoneField = React80.forwardRef(
     const hasInvalidState = Boolean(error) || Boolean(invalid);
     const isBlocked = Boolean(disabled) || Boolean(loading);
     const isCodeBlocked = isBlocked || Boolean(codeReadOnly);
-    return /* @__PURE__ */ jsxs122("div", { className: cn("w-full max-w-[var(--max-field-width)]", className), children: [
+    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(
         "input",
@@ -19209,7 +19353,7 @@ var AirbnbPhoneField = React80.forwardRef(
           children: topLabel
         }
       ),
-      /* @__PURE__ */ jsxs122("div", { className: "flex items-stretch", children: [
+      /* @__PURE__ */ jsxs123("div", { className: "flex items-stretch", children: [
         /* @__PURE__ */ jsx191(
           AirbnbSelect,
           {
@@ -19241,7 +19385,7 @@ var AirbnbPhoneField = React80.forwardRef(
               onClick,
               onKeyDown,
               valueLabel
-            }) => /* @__PURE__ */ jsxs122(
+            }) => /* @__PURE__ */ jsxs123(
               "button",
               {
                 id,
@@ -19319,7 +19463,7 @@ import * as React81 from "react";
 import { ChevronDown as ChevronDown7, Search as Search4 } from "lucide-react";
 import { useVirtualizer as useVirtualizer3 } from "@tanstack/react-virtual";
 import { useCallback as useCallback57 } from "react";
-import { jsx as jsx192, jsxs as jsxs123 } from "react/jsx-runtime";
+import { jsx as jsx192, jsxs as jsxs124 } from "react/jsx-runtime";
 var ROW_HEIGHT = 48;
 var DESKTOP_LIST_HEIGHT = 280;
 var MOBILE_LIST_HEIGHT = 420;
@@ -19516,7 +19660,7 @@ var AirbnbSearchableSelectInternal = ({
     }
   );
   React81.useImperativeHandle(ref, () => triggerRef.current, []);
-  return /* @__PURE__ */ jsxs123("div", { ref: containerRef, className: cn("relative w-full max-w-[425px]", className), children: [
+  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(
       AirbnbFieldTrigger,
@@ -19576,7 +19720,7 @@ var AirbnbSearchableSelectInternal = ({
           }
           closeSelect();
         },
-        children: /* @__PURE__ */ jsxs123(DrawerContent, { onClose: closeSelect, lockScroll: false, children: [
+        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 })
@@ -19649,8 +19793,8 @@ function AirbnbSearchableSelectContent({
       virtualizer.scrollToIndex(highlightedIndex, { align: "auto" });
     }
   }, [highlightedIndex, virtualizer]);
-  return /* @__PURE__ */ jsxs123("div", { className: "p-2", children: [
-    /* @__PURE__ */ jsxs123("div", { className: "relative mb-2", children: [
+  return /* @__PURE__ */ jsxs124("div", { className: "p-2", children: [
+    /* @__PURE__ */ jsxs124("div", { className: "relative mb-2", children: [
       /* @__PURE__ */ jsx192(
         Search4,
         {
@@ -19761,13 +19905,13 @@ function getNextEnabledIndex(options, startIndex, step) {
 
 // src/airbnb-fields/search-input/SearchInput.tsx
 import * as React82 from "react";
-import { useTranslation as useTranslation44 } from "react-i18next";
+import { useTranslation as useTranslation45 } from "react-i18next";
 import { Search as Search5, X as X11 } from "lucide-react";
-import { jsx as jsx193, jsxs as jsxs124 } from "react/jsx-runtime";
+import { jsx as jsx193, jsxs as jsxs125 } from "react/jsx-runtime";
 var AirbnbSearchInput = React82.forwardRef(({ onReset, placeholder, wrapperClassName, ...props }, ref) => {
-  const { t } = useTranslation44();
+  const { t } = useTranslation45();
   const placeholderText = placeholder || t("search_property") + "...";
-  return /* @__PURE__ */ jsxs124("div", { className: cn("input-wrapper relative", wrapperClassName), children: [
+  return /* @__PURE__ */ jsxs125("div", { className: cn("input-wrapper relative", wrapperClassName), children: [
     /* @__PURE__ */ jsx193(Search5, { className: "absolute left-4 top-1/2 h-5 w-5 -translate-y-1/2 transform text-[#9696B9]" }),
     /* @__PURE__ */ jsx193(
       "input",
@@ -19800,6 +19944,66 @@ var AirbnbSearchInput = React82.forwardRef(({ onReset, placeholder, wrapperClass
   ] });
 });
 AirbnbSearchInput.displayName = "AirbnbSearchInput";
+
+// src/airbnb-fields/switch/Switch.tsx
+import * as React83 from "react";
+import * as SwitchPrimitives2 from "@radix-ui/react-switch";
+import { Check as Check7 } from "lucide-react";
+import { Fragment as Fragment19, jsx as jsx194, jsxs as jsxs126 } from "react/jsx-runtime";
+var AirbnbSwitch = React83.forwardRef(({ className, value, onChange, disabled, loading, readOnly, id, label, error, wrapperClassName, ...props }, ref) => {
+  const generatedId = React83.useId();
+  const fieldId = id || generatedId;
+  const switchElement = /* @__PURE__ */ jsx194(
+    SwitchPrimitives2.Root,
+    {
+      ref,
+      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)]",
+        "disabled:cursor-not-allowed disabled:opacity-50 aria-busy:cursor-wait aria-busy:opacity-50",
+        "aria-readonly:cursor-default aria-readonly:opacity-100",
+        "data-[state=checked]:bg-[#222222] data-[state=unchecked]:bg-[#E7E7E4]",
+        className
+      ),
+      id: fieldId,
+      disabled,
+      checked: value,
+      value: String(value),
+      onCheckedChange: !disabled && !readOnly ? onChange : void 0,
+      "aria-busy": loading,
+      "aria-readonly": readOnly,
+      ...props,
+      children: /* @__PURE__ */ jsx194(
+        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(
+            Check7,
+            {
+              "aria-hidden": "true",
+              className: "h-3 w-3 text-[#222222] opacity-0 transition-opacity duration-150 group-data-[state=checked]:opacity-100",
+              strokeWidth: 3
+            }
+          )
+        }
+      )
+    }
+  );
+  if (!label && !error) {
+    return switchElement;
+  }
+  return /* @__PURE__ */ jsxs126(Fragment19, { children: [
+    /* @__PURE__ */ jsxs126("div", { className: cn("flex items-center gap-x-3 gap-y-1.5", wrapperClassName), children: [
+      switchElement,
+      label && /* @__PURE__ */ jsx194(Label, { htmlFor: fieldId, className: "cursor-pointer text-base font-medium", children: label })
+    ] }),
+    error && /* @__PURE__ */ jsx194(ErrorMessage, { disabled, children: error })
+  ] });
+});
+AirbnbSwitch.displayName = "AirbnbSwitch";
 export {
   ALERT_BOX_VARIANTS,
   Accordion,
@@ -19813,6 +20017,7 @@ export {
   AirbnbSearchInput,
   AirbnbSearchableSelect,
   AirbnbSelect,
+  AirbnbSwitch,
   Alert,
   AlertBox,
   AlertDescription,