@chekinapp/ui 0.0.117 → 0.0.119

package/dist/index.js

@@ -13842,7 +13842,8 @@ function SelectInternal(props, ref) {
     menuHeader,
     onMenuScrollToBottom,
     leftIcon,
-    formatGroupLabel
+    formatGroupLabel,
+    onReset
   } = props;
   const isSearchInDropdown = searchPosition === "dropdown";
   const isMulti = props.isMulti === true;
@@ -13909,7 +13910,10 @@ function SelectInternal(props, ref) {
   const resolvedLabel = label ?? placeholder;
   const hasInvalidState = state.hasInvalidState || Boolean(invalid);
   const hiddenValue = isMulti ? selectedOptions.map((item) => String(item.value)).join(",") : selectedOptions[0] ? String(selectedOptions[0].value) : "";
-  const handleClear = (event) => state.clearSelection(event);
+  const handleClear = (event) => {
+    state.clearSelection(event);
+    onReset?.();
+  };
   const { Control, MenuList, CreateOption } = components;
   return /* @__PURE__ */ jsxs99(
     SelectFieldShell,
@@ -14141,7 +14145,14 @@ function VirtualMenuList(props) {
     if (lastLoadMoreOptionsLengthRef.current === options.length) return;
     lastLoadMoreOptionsLengthRef.current = options.length;
     loadMoreItems();
-  }, [virtualItems, options.length]);
+  }, [
+    virtualItems,
+    options.length,
+    canLoadMore,
+    isLoadingMore,
+    loadMoreItems,
+    loadMoreThreshold
+  ]);
   React51.useEffect(() => {
     const changed = previousHighlightedIndexRef.current !== highlightedIndex;
     previousHighlightedIndexRef.current = highlightedIndex;
@@ -14317,7 +14328,7 @@ function InfiniteScrollSelectInternal(props, ref) {
       if (synthetic) list = [synthetic, ...list];
     }
     return list;
-  }, [rawOptions, inputValue, filterOption, getFullSearchOption, rest.getValueLabel, props]);
+  }, [rawOptions, inputValue, filterOption, getFullSearchOption, props, rest]);
   const contextValue = React52.useMemo(
     () => ({
       canLoadMore,
@@ -14381,13 +14392,7 @@ function hasPaginationProps(props) {
   return props.canLoadMore !== void 0 || props.isLoadingMore !== void 0 || props.loadMoreItems !== void 0 || props.onSearchChange !== void 0 || props.getFullSearchOption !== void 0;
 }
 function SearchingSelectInternal(props, ref) {
-  const {
-    trigger,
-    components: userComponents,
-    searchPlaceholder,
-    searchable = true,
-    ...rest
-  } = props;
+  const { trigger, components: userComponents, searchable = true, ...rest } = props;
   const Control = React53.useMemo(() => {
     if (trigger) return makeTriggerSlot(trigger);
     return StaticControl;
@@ -14854,7 +14859,7 @@ function SelectCheckboxesInternal(props, ref) {
     paginationAndRest
   );
   const [inputValue, setInputValue] = React59.useState("");
-  const selected = value ?? [];
+  const selected = React59.useMemo(() => value ?? [], [value]);
   const flatRawOptions = React59.useMemo(
     () => flattenGroupedOptions(rawOptions),
     [rawOptions]
@@ -15924,7 +15929,7 @@ var Datepicker = React63.forwardRef(
     React63.useImperativeHandle(
       ref,
       () => dayInputRef.current ?? mobileTriggerRef.current,
-      [isMobile3]
+      []
     );
     React63.useEffect(() => {
       if (!isControlled) return;
@@ -17666,7 +17671,6 @@ import { Fragment as Fragment18, jsx as jsx182, jsxs as jsxs116 } from "react/js
 var AirbnbFieldTrigger = React72.forwardRef(
   ({
     as = "button",
-    variant = "airbnb",
     id,
     label,
     topLabel,
@@ -17719,7 +17723,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);
@@ -17734,11 +17737,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__ */ jsxs116(Fragment18, { children: [
@@ -17747,7 +17750,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: [
@@ -17758,8 +17761,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
               }
@@ -17770,7 +17773,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
@@ -17783,10 +17786,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
         }
       )
@@ -17838,7 +17838,6 @@ import { jsx as jsx183, jsxs as jsxs117 } from "react/jsx-runtime";
 var DEFAULT_MIN_DATE = new Date(1920, 0, 1);
 var AirbnbDatePicker = React73.forwardRef(
   ({
-    variant = "default",
     label,
     topLabel,
     value,
@@ -17965,7 +17964,6 @@ var AirbnbDatePicker = React73.forwardRef(
         {
           id: triggerId,
           ref: combinedRef,
-          variant,
           label,
           topLabel,
           labelId,
@@ -18031,7 +18029,6 @@ import { jsx as jsx184, jsxs as jsxs118 } from "react/jsx-runtime";
 var getInputValue = (value) => value != null ? String(value) : "";
 var AirbnbInput = React74.forwardRef(
   ({
-    variant = "default",
     label,
     topLabel,
     helperText,
@@ -18127,7 +18124,6 @@ var AirbnbInput = React74.forwardRef(
       AirbnbFieldTrigger,
       {
         as: "div",
-        variant,
         id: fieldId,
         label: accessibleLabel ?? "",
         topLabel,
@@ -18143,14 +18139,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,
@@ -18177,7 +18170,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" : "",
@@ -18192,10 +18185,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__ */ jsx184(
                 Eye2,
@@ -18571,7 +18561,6 @@ var AirbnbSelectTrigger = React75.forwardRef(
   ({
     id,
     open,
-    variant,
     label,
     topLabel,
     helperText,
@@ -18597,7 +18586,6 @@ var AirbnbSelectTrigger = React75.forwardRef(
       {
         id,
         ref,
-        variant,
         "aria-haspopup": "listbox",
         "aria-expanded": open,
         "aria-controls": listboxId,
@@ -18989,7 +18977,6 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
   value,
   onChange,
   onBlur,
-  variant = "default",
   label,
   topLabel,
   placeholder,
@@ -19008,11 +18995,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;
@@ -19043,7 +19032,7 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
   } = useMobileSelectWheel({
     isMobile: isMobile3,
     isOpen,
-    options,
+    options: filteredOptions,
     value,
     disabled: isBlocked
   });
@@ -19060,13 +19049,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,
@@ -19083,12 +19072,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) => {
@@ -19173,7 +19162,6 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
         renderTrigger ? renderTrigger({
           id: triggerId,
           open: isOpen,
-          variant,
           label,
           topLabel,
           helperText,
@@ -19197,7 +19185,6 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
             id: triggerId,
             ref: combinedRef,
             open: isOpen,
-            variant,
             label,
             topLabel,
             helperText,
@@ -19231,7 +19218,7 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
             mobileTitle,
             doneLabel,
             errorId: describedErrorId,
-            options,
+            options: filteredOptions,
             disabled: isBlocked,
             menuClassName,
             scrollTop: mobileScrollTop,
@@ -19251,7 +19238,7 @@ var AirbnbSelect = React79.forwardRef(function AirbnbSelect2({
             listboxId,
             labelId,
             errorId: describedErrorId,
-            options,
+            options: filteredOptions,
             value,
             highlightedIndex,
             onOptionClick: (option) => {
@@ -19286,7 +19273,6 @@ function formatPhoneCodeOptionLabel2(option) {
 }
 var AirbnbPhoneField = React80.forwardRef(
   ({
-    variant = "default",
     label,
     topLabel,
     value,
@@ -19358,7 +19344,6 @@ var AirbnbPhoneField = React80.forwardRef(
           AirbnbSelect,
           {
             ref,
-            variant,
             options: codeOptions,
             value: selectedCodeOption,
             onChange: (option) => onChange({
@@ -19377,7 +19362,6 @@ var AirbnbPhoneField = React80.forwardRef(
             renderTrigger: ({
               id,
               open,
-              variant: selectVariant,
               disabled: triggerDisabled,
               loading: triggerLoading,
               listboxId,
@@ -19401,9 +19385,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: [
@@ -19424,7 +19407,6 @@ var AirbnbPhoneField = React80.forwardRef(
           AirbnbInput,
           {
             id: inputId,
-            variant,
             type: "tel",
             inputMode: "tel",
             label,
@@ -19439,10 +19421,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 ?? "",
@@ -19483,7 +19463,6 @@ var AirbnbSearchableSelectInternal = ({
   loading,
   hasNextPage,
   onLoadMore,
-  variant = "default",
   label,
   topLabel,
   placeholder,
@@ -19667,7 +19646,6 @@ var AirbnbSearchableSelectInternal = ({
       {
         id: `${reactId}-trigger`,
         ref: triggerRef,
-        variant,
         "aria-haspopup": "listbox",
         "aria-expanded": open,
         "aria-controls": listboxId,
@@ -19950,59 +19928,83 @@ 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
-            }
-          )
-        }
-      )
+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;
     }
-  );
-  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: cn(
+              "text-base font-medium",
+              readOnly ? "cursor-default" : "cursor-pointer"
+            ),
+            children: label
+          }
+        )
+      ] }),
+      error && /* @__PURE__ */ jsx194(ErrorMessage, { disabled, children: error })
+    ] });
   }
-  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,