@chekinapp/ui 0.0.116 → 0.0.118

package/dist/index.cjs

@@ -12873,9 +12873,9 @@ var import_react_i18next28 = require("react-i18next");
 
 // src/dashboard/_select-internals/utils.ts
 function isOptionGroup(item) {
-  return Boolean(
-    item && Array.isArray(item.options)
-  );
+  if (!item || typeof item !== "object") return false;
+  if ("value" in item) return false;
+  return Array.isArray(item.options);
 }
 function flattenGroupedOptions(items) {
   if (!items) return [];
@@ -12986,7 +12986,7 @@ function DefaultOption(props) {
 
 // src/dashboard/_select-internals/SelectMenu.tsx
 var import_jsx_runtime148 = require("react/jsx-runtime");
-function buildMenuEntries(groupedOptions, options, formatGroupLabel) {
+function buildMenuEntries(groupedOptions, options, formatGroupLabel, listboxId) {
   if (!groupedOptions || !groupedOptions.some((item) => isOptionGroup(item))) {
     return options.map((option, index) => ({
       kind: "option",
@@ -12995,38 +12995,39 @@ function buildMenuEntries(groupedOptions, options, formatGroupLabel) {
       flatIndex: index
     }));
   }
-  const indexByOption = /* @__PURE__ */ new Map();
-  options.forEach((option, index) => indexByOption.set(option, 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 = item.options.filter((option) => indexByOption.has(option));
-      if (visible.length === 0) continue;
-      const label = formatGroupLabel ? formatGroupLabel(item) : item.label;
-      entries.push({
-        kind: "group-label",
-        key: `__group-${groupCount}`,
-        label
-      });
-      groupCount += 1;
-      for (const option of visible) {
-        const flatIndex = indexByOption.get(option);
-        entries.push({
-          kind: "option",
+      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;
       }
-    } else if (indexByOption.has(item)) {
-      const flatIndex = indexByOption.get(item);
+      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;
@@ -13070,9 +13071,37 @@ function SelectMenu({
     [selectedValues, selectedValue]
   );
   const entries = React45.useMemo(
-    () => buildMenuEntries(groupedOptions, options, formatGroupLabel),
-    [groupedOptions, options, formatGroupLabel]
+    () => 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__ */ (0, import_jsx_runtime148.jsx)(
+      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) => {
@@ -13107,43 +13136,20 @@ function SelectMenu({
       children: [
         !hasOptions && (emptyContent ?? /* @__PURE__ */ (0, import_jsx_runtime148.jsx)("div", { className: "px-3 py-3 text-left text-[14px] font-medium text-[var(--chekin-color-gray-1)]", children: emptyMessage })),
         entries.map((entry) => {
-          if (entry.kind === "group-label") {
-            return /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(
-              "div",
-              {
-                role: "presentation",
-                className: "px-3 pb-1 pt-2 text-[11px] font-semibold uppercase tracking-wide text-[var(--chekin-color-gray-1)]",
-                children: entry.label
-              },
-              entry.key
-            );
+          if (entry.kind === "group") {
+            return /* @__PURE__ */ (0, import_jsx_runtime148.jsxs)("div", { role: "group", "aria-labelledby": entry.labelId, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime148.jsx)(
+                "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);
           }
-          const { option, flatIndex } = 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__ */ (0, import_jsx_runtime148.jsx)(
-            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
-            },
-            entry.key
-          );
+          return renderOption(entry);
         }),
         footer
       ]
@@ -14672,7 +14678,14 @@ function InfiniteScrollSelectInternal(props, ref) {
       if (synthetic) list = [synthetic, ...list];
     }
     return list;
-  }, [rawOptions, inputValue, filterOption, getFullSearchOption, rest.getValueLabel, props]);
+  }, [
+    rawOptions,
+    inputValue,
+    filterOption,
+    getFullSearchOption,
+    rest.getValueLabel,
+    props
+  ]);
   const contextValue = React52.useMemo(
     () => ({
       canLoadMore,
@@ -15148,13 +15161,7 @@ function createCountTrigger(opts) {
 
 // src/dashboard/select-checkboxes/SelectAllRow.tsx
 var import_jsx_runtime169 = require("react/jsx-runtime");
-function SelectAllRow({
-  label,
-  checked,
-  indeterminate,
-  disabled,
-  onToggle
-}) {
+function SelectAllRow({ label, checked, disabled, onToggle }) {
   return /* @__PURE__ */ (0, import_jsx_runtime169.jsxs)(
     "button",
     {
@@ -15169,7 +15176,7 @@ function SelectAllRow({
         /* @__PURE__ */ (0, import_jsx_runtime169.jsx)(
           BaseCheckbox,
           {
-            checked: indeterminate ? "indeterminate" : checked,
+            checked,
             disabled,
             size: "s",
             tabIndex: -1,
@@ -15205,7 +15212,6 @@ function SelectCheckboxesInternal(props, ref) {
     allowSelectAll = false,
     selectAllLabel,
     searchable = true,
-    searchPlaceholder,
     filterOption = defaultFilterOption,
     closeMenuOnSelect = false,
     onSearchChange,
@@ -15240,7 +15246,6 @@ function SelectCheckboxesInternal(props, ref) {
     return acc + (selected.some((s) => s.value === option.value) ? 1 : 0);
   }, 0);
   const allVisibleSelected = filteredFlat.length > 0 && visibleSelectedCount === filteredFlat.length;
-  const someVisibleSelected = visibleSelectedCount > 0 && visibleSelectedCount < filteredFlat.length;
   const handleToggleAll = React59.useCallback(() => {
     if (allVisibleSelected) {
       const visibleValues = new Set(filteredFlat.map((option) => option.value));
@@ -15276,7 +15281,6 @@ function SelectCheckboxesInternal(props, ref) {
     {
       label: selectAllLabel ?? t("select_all", { defaultValue: "Select All" }),
       checked: allVisibleSelected,
-      indeterminate: someVisibleSelected,
       onToggle: handleToggleAll
     }
   ) : void 0;
@@ -18027,7 +18031,6 @@ var import_jsx_runtime184 = require("react/jsx-runtime");
 var AirbnbFieldTrigger = React72.forwardRef(
   ({
     as = "button",
-    variant = "airbnb",
     id,
     label,
     topLabel,
@@ -18080,7 +18083,6 @@ var AirbnbFieldTrigger = React72.forwardRef(
       )
     ] }) : visibleLabelText;
     const animatedLabel = forceLabelText ? resolvedLabelText ?? placeholder : isRaised ? resolvedLabelText : label ?? placeholder;
-    const isAirbnbVariant = variant === "airbnb";
     const hasInvalidState = Boolean(error);
     const errorMessage = typeof error === "string" ? error : void 0;
     const isBlocked = Boolean(disabled) || Boolean(loading);
@@ -18095,11 +18097,11 @@ var AirbnbFieldTrigger = React72.forwardRef(
       )
     ] }) : void 0;
     const sharedClasses = cn(
-      "relative flex w-full items-center border bg-white text-left transition-colors focus-visible:outline-none",
-      isAirbnbVariant ? "rounded-[12px] border-[#8c8c8c] pl-4 pr-4 focus-visible:ring-2 focus-visible:ring-[#222222] focus-visible:ring-offset-2" : "rounded-[10px] px-3.5 focus-visible:border-[var(--chekin-color-brand-blue)]",
-      isAirbnbVariant ? isRaised ? "min-h-[60px]" : "h-[60px]" : "min-h-[48px]",
-      hasInvalidState ? isAirbnbVariant ? "border-[var(--error-message-color)] bg-[#FFF5F3]" : "border-[var(--error-message-color)] bg-white" : isAirbnbVariant ? "border-[#8c8c8c]" : "border-[#A8A8A4] bg-white",
-      disabled ? "cursor-not-allowed opacity-50" : loading ? "cursor-progress" : isAirbnbVariant ? "cursor-pointer" : "cursor-text",
+      "relative flex w-full items-center border bg-transparent text-left transition-colors focus-visible:outline-none",
+      "rounded-[12px] border-[#8c8c8c] pl-4 pr-4 focus-visible:ring-2 focus-visible:ring-[#222222] focus-visible:ring-offset-2",
+      isRaised ? "min-h-[60px]" : "h-[60px]",
+      hasInvalidState ? "border-[var(--error-message-color)] bg-[#FFF5F3]" : "border-[#8c8c8c]",
+      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: [
@@ -18108,7 +18110,7 @@ var AirbnbFieldTrigger = React72.forwardRef(
         {
           className: cn(
             "relative min-w-0 flex-1 pr-2",
-            isAirbnbVariant ? isRaised ? "h-[42px]" : "h-[28px]" : "h-[48px]",
+            isRaised ? "h-[42px]" : "h-[28px]",
             contentClassName
           ),
           children: [
@@ -18119,8 +18121,8 @@ var AirbnbFieldTrigger = React72.forwardRef(
                 className: cn(
                   "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]"
+                  isRaised ? "top-[-1px] translate-y-0 text-xs leading-5" : "top-1/2 -translate-y-1/2 text-[16px] leading-7",
+                  hasInvalidState ? "text-[var(--error-message-color)]" : "text-[#6c6c6c]"
                 ),
                 children: animatedLabel
               }
@@ -18131,7 +18133,7 @@ var AirbnbFieldTrigger = React72.forwardRef(
                 id: valueId,
                 className: cn(
                   "absolute left-0 block truncate transition-all duration-200 ease-out",
-                  isAirbnbVariant ? "bottom-0 translate-y-0 text-[16px] leading-6 opacity-100" : "bottom-[11px] text-[16px] leading-6",
+                  "bottom-0 translate-y-0 text-[16px] leading-6 opacity-100",
                   hasInvalidState ? "text-[var(--error-message-color)]" : "text-[#222222]"
                 ),
                 children: valueText
@@ -18144,10 +18146,7 @@ var AirbnbFieldTrigger = React72.forwardRef(
         "span",
         {
           "aria-hidden": "true",
-          className: cn(
-            "pointer-events-none absolute top-1/2 -translate-y-1/2",
-            isAirbnbVariant ? "right-5" : "right-4"
-          ),
+          className: "pointer-events-none absolute right-5 top-1/2 -translate-y-1/2",
           children: resolvedTrailingAdornment
         }
       )
@@ -18199,7 +18198,6 @@ var import_jsx_runtime185 = require("react/jsx-runtime");
 var DEFAULT_MIN_DATE = new Date(1920, 0, 1);
 var AirbnbDatePicker = React73.forwardRef(
   ({
-    variant = "default",
     label,
     topLabel,
     value,
@@ -18326,7 +18324,6 @@ var AirbnbDatePicker = React73.forwardRef(
         {
           id: triggerId,
           ref: combinedRef,
-          variant,
           label,
           topLabel,
           labelId,
@@ -18392,7 +18389,6 @@ var import_jsx_runtime186 = require("react/jsx-runtime");
 var getInputValue = (value) => value != null ? String(value) : "";
 var AirbnbInput = React74.forwardRef(
   ({
-    variant = "default",
     label,
     topLabel,
     helperText,
@@ -18488,7 +18484,6 @@ var AirbnbInput = React74.forwardRef(
       AirbnbFieldTrigger,
       {
         as: "div",
-        variant,
         id: fieldId,
         label: accessibleLabel ?? "",
         topLabel,
@@ -18504,14 +18499,11 @@ var AirbnbInput = React74.forwardRef(
         tooltip,
         describedBy: error && renderErrorMessage ? errorId : void 0,
         className: cn(
-          variant === "airbnb" ? "px-4 focus-within:ring-2 focus-within:ring-[#1F1F1B] focus-within:ring-offset-2" : "px-3.5 focus-within:border-[#315EFB]",
+          "px-4 focus-within:ring-2 focus-within:ring-[#1F1F1B] focus-within:ring-offset-2",
           disabled ? "cursor-not-allowed" : "cursor-text",
           fieldClassName
         ),
-        contentClassName: cn(
-          variant === "airbnb" ? "h-[42px]" : "h-[48px]",
-          contentClassName
-        ),
+        contentClassName: cn("h-[42px]", contentClassName),
         trailingAdornment: shouldShowPasswordReveal ? void 0 : trailingAdornment,
         forceFloatingLabel: shouldShowLabel,
         forceLabelText: hasLabelMeta,
@@ -18538,7 +18530,7 @@ var AirbnbInput = React74.forwardRef(
               "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]",
+                "bottom-0",
                 hasInvalidState ? "text-[var(--status-danger)] placeholder:text-[var(--status-danger)]" : "",
                 disabled ? "cursor-not-allowed" : loading ? "cursor-progress" : "",
                 shouldShowPasswordReveal ? "pr-8" : "",
@@ -18553,10 +18545,7 @@ var AirbnbInput = React74.forwardRef(
               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]"
-              ),
+              className: "absolute bottom-0 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",
               "aria-label": isPasswordRevealed ? t("hide_password") : t("show_password"),
               children: /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(
                 import_lucide_react54.Eye,
@@ -18932,7 +18921,6 @@ var AirbnbSelectTrigger = React75.forwardRef(
   ({
     id,
     open,
-    variant,
     label,
     topLabel,
     helperText,
@@ -18958,7 +18946,6 @@ var AirbnbSelectTrigger = React75.forwardRef(
       {
         id,
         ref,
-        variant,
         "aria-haspopup": "listbox",
         "aria-expanded": open,
         "aria-controls": listboxId,
@@ -19350,7 +19337,6 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
   value,
   onChange,
   onBlur,
-  variant = "default",
   label,
   topLabel,
   placeholder,
@@ -19369,11 +19355,13 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
   doneLabel = "Done",
   mobileTitle,
   name,
-  noOptionsMessage
+  noOptionsMessage,
+  filterOption
 }, ref) {
   const { isMatch: isMobile3 } = useScreenResize(DEVICE.mobileXL);
   const [isOpen, setIsOpen] = React79.useState(false);
   const containerRef = React79.useRef(null);
+  const filteredOptions = filterOption ? options.filter(filterOption) : options;
   const hasValue = Boolean(value);
   const helperText = placeholder ?? label;
   const shouldDescribeHelperText = !hasValue && helperText !== label;
@@ -19404,7 +19392,7 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
   } = useMobileSelectWheel({
     isMobile: isMobile3,
     isOpen,
-    options,
+    options: filteredOptions,
     value,
     disabled: isBlocked
   });
@@ -19421,13 +19409,13 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
   } = useDesktopSelect({
     isMobile: isMobile3,
     isOpen,
-    options,
+    options: filteredOptions,
     value,
     disabled: isBlocked,
     onChange
   });
   const combinedRef = useCombinedRef(ref, desktopTriggerRef);
-  const activeMobileIndex = getOptionIndex2(options, pendingValue);
+  const activeMobileIndex = getOptionIndex2(filteredOptions, pendingValue);
   const valueLabel = value ? getValueLabel?.(value) ?? String(value.label) : void 0;
   useOutsideClick({
     elementRef: containerRef,
@@ -19444,12 +19432,12 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
       if (value?.value === void 0 || value.value === null || value.label !== "") {
         return;
       }
-      const validOption = options.find((option) => option.value === value.value);
+      const validOption = filteredOptions.find((option) => option.value === value.value);
       if (validOption) {
         onChange(validOption);
       }
     },
-    [onChange, options, value]
+    [onChange, filteredOptions, value]
   );
   const handleMobileOpenChange = React79.useCallback(
     (nextOpen) => {
@@ -19534,7 +19522,6 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
         renderTrigger ? renderTrigger({
           id: triggerId,
           open: isOpen,
-          variant,
           label,
           topLabel,
           helperText,
@@ -19558,7 +19545,6 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
             id: triggerId,
             ref: combinedRef,
             open: isOpen,
-            variant,
             label,
             topLabel,
             helperText,
@@ -19592,7 +19578,7 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
             mobileTitle,
             doneLabel,
             errorId: describedErrorId,
-            options,
+            options: filteredOptions,
             disabled: isBlocked,
             menuClassName,
             scrollTop: mobileScrollTop,
@@ -19612,7 +19598,7 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
             listboxId,
             labelId,
             errorId: describedErrorId,
-            options,
+            options: filteredOptions,
             value,
             highlightedIndex,
             onOptionClick: (option) => {
@@ -19647,7 +19633,6 @@ function formatPhoneCodeOptionLabel2(option) {
 }
 var AirbnbPhoneField = React80.forwardRef(
   ({
-    variant = "default",
     label,
     topLabel,
     value,
@@ -19719,7 +19704,6 @@ var AirbnbPhoneField = React80.forwardRef(
           AirbnbSelect,
           {
             ref,
-            variant,
             options: codeOptions,
             value: selectedCodeOption,
             onChange: (option) => onChange({
@@ -19738,7 +19722,6 @@ var AirbnbPhoneField = React80.forwardRef(
             renderTrigger: ({
               id,
               open,
-              variant: selectVariant,
               disabled: triggerDisabled,
               loading: triggerLoading,
               listboxId,
@@ -19762,9 +19745,8 @@ var AirbnbPhoneField = React80.forwardRef(
                 onClick,
                 onKeyDown,
                 className: cn(
-                  "flex w-full items-center justify-center gap-2 border border-r-0 text-[16px] font-medium leading-6 transition-colors focus-visible:outline-none",
-                  selectVariant === "airbnb" ? "h-full min-h-[60px] rounded-l-[16px] rounded-r-none px-4 focus-visible:ring-2 focus-visible:ring-[#1F1F1B] focus-visible:ring-offset-2" : "min-h-[48px] rounded-l-[10px] rounded-r-none px-3.5 focus-visible:border-[#315EFB]",
-                  hasInvalidState ? "border-[var(--status-danger)] bg-[#F2F2F2] text-[var(--status-danger)]" : selectVariant === "airbnb" ? "border-[#8C8C8C] bg-[#F4F4F2] text-[#1F1F1B]" : "border-[#A8A8A4] bg-white text-[#1F1F1B]",
+                  "flex h-full min-h-[60px] w-full items-center justify-center gap-2 rounded-l-[16px] rounded-r-none border border-r-0 px-4 text-[16px] font-medium leading-6 transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[#1F1F1B] focus-visible:ring-offset-2",
+                  hasInvalidState ? "border-[var(--status-danger)] bg-[#F2F2F2] text-[var(--status-danger)]" : "border-[#8C8C8C] bg-[#F4F4F2] text-[#1F1F1B]",
                   triggerDisabled ? "cursor-not-allowed opacity-50" : triggerLoading ? "cursor-progress" : "cursor-pointer"
                 ),
                 children: [
@@ -19785,7 +19767,6 @@ var AirbnbPhoneField = React80.forwardRef(
           AirbnbInput,
           {
             id: inputId,
-            variant,
             type: "tel",
             inputMode: "tel",
             label,
@@ -19800,10 +19781,8 @@ var AirbnbPhoneField = React80.forwardRef(
             tooltip,
             renderErrorMessage: false,
             wrapperClassName: "min-w-0 flex-1",
-            fieldClassName: cn(
-              variant === "airbnb" ? "min-h-[60px] rounded-l-none rounded-r-[16px] border-l-0" : "rounded-l-none rounded-r-[10px] border-l-0"
-            ),
-            contentClassName: cn(variant === "airbnb" ? "h-[40px] py-2" : "h-[48px]"),
+            fieldClassName: "min-h-[60px] rounded-l-none rounded-r-[16px] border-l-0",
+            contentClassName: "h-[40px] py-2",
             inputClassName: "text-[16px] leading-7",
             onChange: (event) => onChange({
               code: value?.code ?? "",
@@ -19844,7 +19823,6 @@ var AirbnbSearchableSelectInternal = ({
   loading,
   hasNextPage,
   onLoadMore,
-  variant = "default",
   label,
   topLabel,
   placeholder,
@@ -20028,7 +20006,6 @@ var AirbnbSearchableSelectInternal = ({
       {
         id: `${reactId}-trigger`,
         ref: triggerRef,
-        variant,
         "aria-haspopup": "listbox",
         "aria-expanded": open,
         "aria-controls": listboxId,
@@ -20311,44 +20288,83 @@ var React83 = __toESM(require("react"), 1);
 var SwitchPrimitives2 = __toESM(require("@radix-ui/react-switch"), 1);
 var import_lucide_react59 = require("lucide-react");
 var import_jsx_runtime196 = require("react/jsx-runtime");
-var AirbnbSwitch = React83.forwardRef(({ className, value, onChange, disabled, loading, readOnly, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(
-  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
-    ),
+var AirbnbSwitch = React83.forwardRef(
+  ({
+    className,
+    value,
+    onChange,
     disabled,
-    checked: value,
-    value: String(value),
-    onCheckedChange: !disabled && !readOnly ? onChange : void 0,
-    "aria-busy": loading,
-    "aria-readonly": readOnly,
-    ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(
-      SwitchPrimitives2.Thumb,
+    loading,
+    readOnly,
+    id,
+    label,
+    error,
+    wrapperClassName,
+    ...props
+  }, ref) => {
+    const generatedId = React83.useId();
+    const fieldId = id || generatedId;
+    const switchElement = /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(
+      SwitchPrimitives2.Root,
       {
+        ref,
         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"
+          "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__ */ (0, import_jsx_runtime196.jsx)(
-          import_lucide_react59.Check,
+          SwitchPrimitives2.Thumb,
           {
-            "aria-hidden": "true",
-            className: "h-3 w-3 text-[#222222] opacity-0 transition-opacity duration-150 group-data-[state=checked]:opacity-100",
-            strokeWidth: 3
+            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)(
+              import_lucide_react59.Check,
+              {
+                "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__ */ (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: [
+        switchElement,
+        label && /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(
+          Label,
+          {
+            htmlFor: fieldId,
+            className: cn(
+              "text-base font-medium",
+              readOnly ? "cursor-default" : "cursor-pointer"
+            ),
+            children: label
+          }
+        )
+      ] }),
+      error && /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(ErrorMessage, { disabled, children: error })
+    ] });
   }
-));
+);
 AirbnbSwitch.displayName = "AirbnbSwitch";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {