@bigbinary/neeto-atoms 1.0.35 → 1.0.37

package/dist/Select-o0yJaN0P.js

@@ -0,0 +1,1059 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import React__default, { useState, useRef, useEffect, useCallback, useMemo, useId, forwardRef } from 'react';
+import { S as SelectFieldWrapper } from './SelectFieldWrapper-CiBARDsn.js';
+import { c as cn } from './utils-BJnb9o5c.js';
+import { ComboboxItem, ComboboxList, ComboboxEmpty, ComboboxCollection, ComboboxGroup, ComboboxLabel, Combobox, ComboboxChips, ComboboxChipsInput, ComboboxContent, ComboboxChip } from './primitives/Combobox.js';
+import { Spinner } from './primitives/Spinner.js';
+import { X } from './x-_o2T3n6D.js';
+import { C as ChevronDown } from './chevron-down-BNi0ntys.js';
+
+function hyphenize(str) {
+  return str.replace(/([a-z])([A-Z])/g, "$1-$2").replace(/[\s_]+/g, "-").toLowerCase();
+}
+
+function buildAriaDescribedBy(error, errorId, helpText, helpTextId) {
+  return [error ? errorId : null, helpText ? helpTextId : null].filter(Boolean).join(" ") || void 0;
+}
+function buildTestIdPrefix(dataTestId, label) {
+  return dataTestId ?? (label ? hyphenize(label) : void 0);
+}
+
+function useAsyncOptions({
+  loadOptions,
+  defaultOptions = false,
+  cacheOptions = false
+}) {
+  const [asyncOptions, setAsyncOptions] = useState(
+    () => Array.isArray(defaultOptions) ? defaultOptions : []
+  );
+  const [isLoading, setIsLoading] = useState(false);
+  const cacheRef = useRef({});
+  const debounceRef = useRef(null);
+  const latestRequestRef = useRef(0);
+  const mountedRef = useRef(true);
+  useEffect(() => {
+    if (!loadOptions || defaultOptions !== true) return;
+    let cancelled = false;
+    setIsLoading(true);
+    loadOptions("").then((results) => {
+      if (cancelled) return;
+      setAsyncOptions(results);
+      if (cacheOptions) cacheRef.current[""] = results;
+      setIsLoading(false);
+    }).catch(() => {
+      if (!cancelled) setIsLoading(false);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, []);
+  useEffect(() => {
+    return () => {
+      mountedRef.current = false;
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+    };
+  }, []);
+  const handleAsyncInputChange = useCallback(
+    (value) => {
+      if (!loadOptions) return;
+      const query = value.trim();
+      if (cacheOptions && query in cacheRef.current) {
+        setAsyncOptions(cacheRef.current[query]);
+        return;
+      }
+      if (debounceRef.current) clearTimeout(debounceRef.current);
+      debounceRef.current = setTimeout(() => {
+        const requestId = ++latestRequestRef.current;
+        setIsLoading(true);
+        loadOptions(query).then((results) => {
+          if (requestId !== latestRequestRef.current || !mountedRef.current)
+            return;
+          setAsyncOptions(results);
+          if (cacheOptions) cacheRef.current[query] = results;
+          setIsLoading(false);
+        }).catch(() => {
+          if (requestId === latestRequestRef.current && mountedRef.current) {
+            setIsLoading(false);
+          }
+        });
+      }, 300);
+    },
+    [loadOptions, cacheOptions]
+  );
+  return { asyncOptions, isLoading, handleAsyncInputChange };
+}
+
+function useLazyLoadSentinel({
+  fetchMore,
+  isEnabled
+}) {
+  const observerRef = useRef(null);
+  const fetchMoreRef = useRef(fetchMore);
+  fetchMoreRef.current = fetchMore;
+  const sentinelRef = useCallback(
+    (node) => {
+      observerRef.current?.disconnect();
+      observerRef.current = null;
+      if (!node || !isEnabled) return;
+      const observer = new IntersectionObserver(
+        (entries) => {
+          if (entries[0]?.isIntersecting) fetchMoreRef.current?.();
+        },
+        { root: null, rootMargin: "0px", threshold: 0.1 }
+      );
+      observer.observe(node);
+      observerRef.current = observer;
+    },
+    [isEnabled]
+  );
+  useEffect(() => {
+    return () => {
+      observerRef.current?.disconnect();
+    };
+  }, []);
+  return sentinelRef;
+}
+
+const CREATE_PREFIX = "__create__:";
+function useCreatableItems({
+  isCreatable,
+  isGrouped,
+  flatOptions,
+  selectedValues,
+  baseUiItems,
+  onCreateOption,
+  onChange,
+  onAsyncInputChange,
+  children
+}) {
+  const [inputValue, setInputValue] = useState("");
+  const handleInputValueChange = useCallback(
+    (value) => {
+      setInputValue(value);
+      onAsyncInputChange?.(value);
+    },
+    [onAsyncInputChange]
+  );
+  const trimmedInput = inputValue.trim();
+  const showCreateOption = useMemo(() => {
+    if (!isCreatable || trimmedInput.length === 0) return false;
+    const lower = trimmedInput.toLowerCase();
+    return !flatOptions.some(
+      (o) => o.label.toLowerCase() === lower || o.value.toLowerCase() === lower
+    ) && !selectedValues.includes(trimmedInput);
+  }, [isCreatable, trimmedInput, flatOptions, selectedValues]);
+  const effectiveItems = React__default.useMemo(
+    () => computeEffectiveItems(
+      children,
+      baseUiItems,
+      showCreateOption,
+      isGrouped,
+      trimmedInput
+    ),
+    [baseUiItems, children, isGrouped, showCreateOption, trimmedInput]
+  );
+  const creatableFilter = useCallback(
+    (itemValue, query, itemToString) => {
+      if (itemValue.startsWith(CREATE_PREFIX)) return true;
+      const label = itemToString?.(itemValue) ?? itemValue;
+      return label.toLowerCase().includes(query.toLowerCase());
+    },
+    []
+  );
+  const handleValueChange = useCallback(
+    (next) => {
+      const raw = next ?? [];
+      const createEntry = raw.find((v) => v.startsWith(CREATE_PREFIX));
+      if (createEntry) {
+        const newValue = createEntry.slice(CREATE_PREFIX.length);
+        const withNewValue = raw.map((v) => v === createEntry ? newValue : v);
+        onCreateOption?.(newValue);
+        onChange?.(withNewValue);
+        return;
+      }
+      onChange?.(raw);
+    },
+    [onChange, onCreateOption]
+  );
+  return {
+    inputValue,
+    showCreateOption,
+    effectiveItems,
+    creatableFilter,
+    handleInputValueChange,
+    handleValueChange
+  };
+}
+
+function isOptionGroup(opt) {
+  return "options" in opt && Array.isArray(opt.options);
+}
+
+function flattenOptions(options) {
+  return options.flatMap((opt) => isOptionGroup(opt) ? opt.options : [opt]);
+}
+function hasGroups(options) {
+  return options.some(isOptionGroup);
+}
+function toBaseUiItems(options) {
+  if (hasGroups(options)) {
+    return options.filter(isOptionGroup).map((g) => ({
+      label: g.label,
+      items: g.options.map((o) => o.value)
+    }));
+  }
+  return options.map((o) => o.value);
+}
+function computeEffectiveItems(children, baseUiItems, showCreateOption, isGrouped, trimmedInput) {
+  if (children) return void 0;
+  const createValue = showCreateOption ? `${CREATE_PREFIX}${trimmedInput}` : null;
+  if (!baseUiItems && !createValue) return void 0;
+  const base = baseUiItems ?? [];
+  if (!createValue) return base;
+  if (!isGrouped) {
+    return [...base, createValue];
+  }
+  return [
+    ...base,
+    { label: "", items: [createValue] }
+  ];
+}
+
+function useMultiSelectOptions(props) {
+  const isAsync = !!props.loadOptions;
+  const { asyncOptions, isLoading, handleAsyncInputChange } = useAsyncOptions({
+    loadOptions: props.loadOptions,
+    defaultOptions: props.defaultOptions ?? false,
+    cacheOptions: props.cacheOptions ?? false
+  });
+  const resolvedOptions = isAsync ? asyncOptions : props.options ?? [];
+  const flatOptions = flattenOptions(resolvedOptions);
+  const isGrouped = hasGroups(resolvedOptions);
+  const baseUiItems = React__default.useMemo(
+    () => resolvedOptions.length > 0 ? toBaseUiItems(resolvedOptions) : void 0,
+    [resolvedOptions]
+  );
+  const hasMoreLazy = (props.isAsyncLoadOptionEnabled ?? false) && typeof props.totalOptionsCount === "number" && flatOptions.length < props.totalOptionsCount;
+  const loaderCallbackRef = useLazyLoadSentinel({
+    fetchMore: props.fetchMore,
+    isEnabled: props.isAsyncLoadOptionEnabled ?? false
+  });
+  return {
+    isAsync,
+    resolvedOptions,
+    flatOptions,
+    isGrouped,
+    isLoading,
+    handleAsyncInputChange,
+    baseUiItems,
+    hasMoreLazy,
+    loaderCallbackRef
+  };
+}
+
+const SIZE_CONFIG = {
+  small: {
+    chips: "min-h-7 text-xs gap-0.5 px-1 py-0.5",
+    input: "text-xs",
+    chip: "h-4.5 text-[0.6875rem] px-1"
+  },
+  medium: {
+    chips: "min-h-8 text-sm gap-1 px-2.5 py-1",
+    input: "text-sm",
+    chip: "h-5.25 text-xs px-1.5"
+  },
+  large: {
+    chips: "min-h-10 text-sm gap-1 px-2.5 py-1.5",
+    input: "text-sm",
+    chip: "h-6 text-xs px-2"
+  }
+};
+
+const defaultFormatCreateLabel$1 = (v) => `Create "${v}"`;
+function useSelectState(props) {
+  const {
+    id: idProp,
+    size = "medium",
+    label = "",
+    error = "",
+    helpText = "",
+    value: valueProp,
+    defaultValue,
+    onChange,
+    dataTestId,
+    isCreatable = false,
+    onCreateOption,
+    formatCreateLabel = defaultFormatCreateLabel$1,
+    isClearable = false,
+    isDisabled = false,
+    required = false,
+    isSearchable = true,
+    autoHighlight = true,
+    onOpenChange,
+    children
+  } = props;
+  const opt = useMultiSelectOptions(props);
+  const generatedId = useId();
+  const id = idProp ?? generatedId;
+  const errorId = `error_${id}`;
+  const helpTextId = `helpText_${id}`;
+  const sizeConfig = SIZE_CONFIG[size];
+  const isControlled = valueProp !== void 0;
+  const [internalValue, setInternalValue] = useState(
+    defaultValue ?? ""
+  );
+  const currentValue = isControlled ? valueProp ?? "" : internalValue;
+  const applyValue = useCallback(
+    (next) => {
+      if (!isControlled) setInternalValue(next);
+      onChange?.(next);
+    },
+    [isControlled, onChange]
+  );
+  const handleValueChange = useCallback(
+    (next) => {
+      const raw = next ?? "";
+      if (raw.startsWith(CREATE_PREFIX)) {
+        const newValue = raw.slice(CREATE_PREFIX.length);
+        onCreateOption?.(newValue);
+        applyValue(newValue);
+        return;
+      }
+      applyValue(raw);
+    },
+    [applyValue, onCreateOption]
+  );
+  const [inputValue, setInputValueState] = useState("");
+  const trimmedInput = inputValue.trim();
+  const combinedHandleInputValueChange = useCallback(
+    (value) => {
+      setInputValueState(value);
+      if (opt.isAsync) opt.handleAsyncInputChange(value);
+    },
+    [opt.isAsync, opt.handleAsyncInputChange]
+  );
+  const handleClear = useCallback(() => {
+    applyValue("");
+  }, [applyValue]);
+  const showCreateOption = useMemo(() => {
+    if (!isCreatable || trimmedInput.length === 0 || currentValue === trimmedInput)
+      return false;
+    const lower = trimmedInput.toLowerCase();
+    return !opt.flatOptions.some(
+      (o) => o.label.toLowerCase() === lower || o.value.toLowerCase() === lower
+    );
+  }, [isCreatable, trimmedInput, currentValue, opt.flatOptions]);
+  const effectiveItems = useMemo(() => {
+    if (children) return void 0;
+    const base = opt.baseUiItems;
+    if (!showCreateOption) return base;
+    const createValue = `${CREATE_PREFIX}${trimmedInput}`;
+    if (!opt.isGrouped) {
+      return [...base ?? [], createValue];
+    }
+    return [
+      ...base ?? [],
+      { label: "", items: [createValue] }
+    ];
+  }, [
+    children,
+    opt.baseUiItems,
+    opt.isGrouped,
+    showCreateOption,
+    trimmedInput
+  ]);
+  const creatableFilter = useCallback(
+    (itemValue, query, itemToString) => {
+      if (itemValue.startsWith(CREATE_PREFIX)) return true;
+      const label2 = itemToString?.(itemValue) ?? itemValue;
+      return label2.toLowerCase().includes(query.toLowerCase());
+    },
+    []
+  );
+  const ariaDescribedBy = buildAriaDescribedBy(
+    error,
+    errorId,
+    helpText,
+    helpTextId
+  );
+  const testIdPrefix = buildTestIdPrefix(dataTestId, label);
+  const showClearButton = isClearable && !!currentValue && !isDisabled;
+  const flatOptionsMap = useMemo(
+    () => new Map(opt.flatOptions.map((o) => [o.value, o])),
+    [opt.flatOptions]
+  );
+  const labelForValue = useCallback(
+    (val) => {
+      if (val.startsWith(CREATE_PREFIX)) {
+        return formatCreateLabel(val.slice(CREATE_PREFIX.length));
+      }
+      return flatOptionsMap.get(val)?.label ?? val;
+    },
+    [flatOptionsMap, formatCreateLabel]
+  );
+  return {
+    ...opt,
+    id,
+    errorId,
+    helpTextId,
+    sizeConfig,
+    isControlled,
+    currentValue,
+    effectiveItems,
+    creatableFilter,
+    handleValueChange,
+    handleInputValueChange: combinedHandleInputValueChange,
+    handleClear,
+    showCreateOption,
+    showClearButton,
+    ariaDescribedBy,
+    testIdPrefix,
+    labelForValue,
+    flatOptionsMap,
+    label,
+    error,
+    helpText,
+    isDisabled,
+    required,
+    isSearchable,
+    autoHighlight,
+    onOpenChange,
+    isClearable
+  };
+}
+
+const defaultFormatCreateLabel = (v) => `Create "${v}"`;
+function useMultiSelectState(props) {
+  const {
+    id: idProp,
+    size = "medium",
+    label = "",
+    error = "",
+    helpText = "",
+    value: valueProp,
+    defaultValue,
+    onChange,
+    dataTestId,
+    isCreatable = false,
+    onCreateOption,
+    formatCreateLabel = defaultFormatCreateLabel,
+    children
+  } = props;
+  const opt = useMultiSelectOptions(props);
+  const generatedId = useId();
+  const id = idProp ?? generatedId;
+  const errorId = `error_${id}`;
+  const helpTextId = `helpText_${id}`;
+  const sizeConfig = SIZE_CONFIG[size];
+  const isControlled = valueProp !== void 0;
+  const [internalValue, setInternalValue] = useState(
+    defaultValue ?? []
+  );
+  const selectedValues = isControlled ? valueProp : internalValue;
+  const handleChange = useCallback(
+    (values) => {
+      setInternalValue(values);
+      onChange?.(values);
+    },
+    [onChange]
+  );
+  const {
+    showCreateOption,
+    effectiveItems,
+    creatableFilter,
+    handleInputValueChange,
+    handleValueChange
+  } = useCreatableItems({
+    isCreatable,
+    isGrouped: opt.isGrouped,
+    flatOptions: opt.flatOptions,
+    selectedValues,
+    baseUiItems: opt.baseUiItems,
+    onCreateOption,
+    onChange: handleChange,
+    onAsyncInputChange: opt.isAsync ? opt.handleAsyncInputChange : void 0,
+    children
+  });
+  const ariaDescribedBy = buildAriaDescribedBy(
+    error,
+    errorId,
+    helpText,
+    helpTextId
+  );
+  const testIdPrefix = buildTestIdPrefix(dataTestId, label);
+  const flatOptionsMap = useMemo(
+    () => new Map(opt.flatOptions.map((o) => [o.value, o])),
+    [opt.flatOptions]
+  );
+  const labelForValue = useCallback(
+    (val) => {
+      if (val.startsWith(CREATE_PREFIX)) {
+        return formatCreateLabel(val.slice(CREATE_PREFIX.length));
+      }
+      return flatOptionsMap.get(val)?.label ?? val;
+    },
+    [flatOptionsMap, formatCreateLabel]
+  );
+  return {
+    ...opt,
+    id,
+    errorId,
+    helpTextId,
+    sizeConfig,
+    isControlled,
+    selectedValues,
+    effectiveItems,
+    creatableFilter,
+    handleInputValueChange,
+    handleValueChange,
+    showCreateOption,
+    ariaDescribedBy,
+    testIdPrefix,
+    labelForValue,
+    flatOptionsMap,
+    label,
+    error,
+    helpText
+  };
+}
+
+function useComboboxAnchor(isSearchable) {
+  const [anchorEl, setAnchorEl] = useState(null);
+  const handleClick = useCallback(
+    (e) => {
+      if (!isSearchable) {
+        e.currentTarget.querySelector("input")?.focus();
+      }
+    },
+    [isSearchable]
+  );
+  return { anchorEl, setAnchorEl, handleClick };
+}
+
+function OptionItem({
+  val,
+  flatOptionsMap,
+  labelForValue,
+  testIdPrefix
+}) {
+  return /* @__PURE__ */ jsx(
+    ComboboxItem,
+    {
+      value: val,
+      disabled: !val.startsWith(CREATE_PREFIX) && flatOptionsMap.get(val)?.disabled,
+      className: val.startsWith(CREATE_PREFIX) ? "text-primary" : void 0,
+      ...testIdPrefix ? { "data-testid": `${testIdPrefix}-select-option` } : {},
+      children: labelForValue(val)
+    },
+    val
+  );
+}
+
+function MultiSelectDropdown({
+  resolvedOptions,
+  flatOptionsMap,
+  isGrouped,
+  isLoading,
+  loadingMessage,
+  emptyMessage,
+  showCreateOption,
+  labelForValue,
+  testIdPrefix,
+  hasMoreLazy,
+  loaderCallbackRef,
+  children
+}) {
+  return /* @__PURE__ */ jsxs(
+    ComboboxList,
+    {
+      ...testIdPrefix ? { "data-testid": `${testIdPrefix}-select-menu` } : {},
+      children: [
+        isLoading && /* @__PURE__ */ jsx("div", { className: "flex w-full justify-center py-2 text-center text-sm text-muted-foreground", children: loadingMessage }),
+        !isLoading && !showCreateOption && /* @__PURE__ */ jsx(ComboboxEmpty, { children: emptyMessage }),
+        children ?? (resolvedOptions.length > 0 || showCreateOption ? isGrouped ? /* @__PURE__ */ jsx(ComboboxCollection, { children: (group) => /* @__PURE__ */ jsxs(
+          ComboboxGroup,
+          {
+            items: group.items,
+            children: [
+              group.label && /* @__PURE__ */ jsx(ComboboxLabel, { children: group.label }),
+              /* @__PURE__ */ jsx(ComboboxCollection, { children: (val) => /* @__PURE__ */ jsx(
+                OptionItem,
+                {
+                  val,
+                  flatOptionsMap,
+                  labelForValue,
+                  testIdPrefix
+                },
+                val
+              ) })
+            ]
+          },
+          group.label || "__create__"
+        ) }) : /* @__PURE__ */ jsx(ComboboxCollection, { children: (val) => /* @__PURE__ */ jsx(
+          OptionItem,
+          {
+            val,
+            flatOptionsMap,
+            labelForValue,
+            testIdPrefix
+          },
+          val
+        ) }) : null),
+        hasMoreLazy && /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: loaderCallbackRef,
+            className: "flex w-full items-center justify-center py-3",
+            "data-testid": testIdPrefix ? `${testIdPrefix}-lazy-loader` : "lazy-loader",
+            children: /* @__PURE__ */ jsx(Spinner, {})
+          }
+        )
+      ]
+    }
+  );
+}
+
+const SelectCombobox = forwardRef(
+  ({
+    name,
+    id,
+    effectiveItems,
+    labelForValue,
+    isSearchable,
+    isAsync,
+    isCreatable,
+    creatableFilter,
+    currentValue,
+    handleValueChange,
+    handleInputValueChange,
+    handleClear,
+    onOpenChange,
+    isDisabled,
+    autoHighlight,
+    required,
+    showClearButton,
+    sizeConfig,
+    error,
+    placeholder,
+    ariaDescribedBy,
+    testIdPrefix,
+    inputClassName,
+    contentProps,
+    dropdownProps,
+    children
+  }, ref) => {
+    const { anchorEl, setAnchorEl, handleClick } = useComboboxAnchor(isSearchable);
+    const handleClearClick = useCallback(
+      (event) => {
+        event.stopPropagation();
+        event.preventDefault();
+        handleClear();
+      },
+      [handleClear]
+    );
+    return (
+      // @ts-expect-error — conditional spread creates a union that TS cannot narrow to the Combobox discriminated-union props
+      /* @__PURE__ */ jsxs(
+        Combobox,
+        {
+          name,
+          ...effectiveItems && !children ? {
+            items: effectiveItems,
+            itemToStringLabel: labelForValue,
+            ...!isSearchable || isAsync ? { filter: null } : isCreatable ? { filter: creatableFilter } : {}
+          } : {},
+          value: currentValue,
+          onValueChange: handleValueChange,
+          ...isCreatable || isAsync ? { onInputValueChange: handleInputValueChange } : {},
+          onOpenChange,
+          disabled: isDisabled,
+          autoHighlight,
+          children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                ref: setAnchorEl,
+                onClick: handleClick,
+                className: !isSearchable ? "cursor-pointer" : void 0,
+                children: /* @__PURE__ */ jsxs(
+                  ComboboxChips,
+                  {
+                    className: cn(
+                      sizeConfig.chips,
+                      !!error && "border-destructive ring-3 ring-destructive/20 dark:border-destructive/50 dark:ring-destructive/40",
+                      inputClassName
+                    ),
+                    ...testIdPrefix ? { "data-testid": `${testIdPrefix}-select-container` } : {},
+                    children: [
+                      !isSearchable && (currentValue ? /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: labelForValue(currentValue) }) : /* @__PURE__ */ jsx("span", { className: "flex-1 truncate text-muted-foreground", children: placeholder })),
+                      /* @__PURE__ */ jsx(
+                        ComboboxChipsInput,
+                        {
+                          ref,
+                          id,
+                          placeholder: isSearchable && !currentValue ? placeholder : void 0,
+                          "aria-invalid": !!error || void 0,
+                          "aria-describedby": ariaDescribedBy,
+                          "aria-required": required || void 0,
+                          className: cn(
+                            sizeConfig.input,
+                            !isSearchable && "w-0 min-w-0 overflow-hidden p-0 opacity-0"
+                          ),
+                          disabled: isDisabled,
+                          ...testIdPrefix ? { "data-testid": `${testIdPrefix}-select-input` } : {}
+                        }
+                      ),
+                      showClearButton && /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          tabIndex: -1,
+                          "aria-label": "Clear selection",
+                          className: "shrink-0 text-muted-foreground hover:text-foreground",
+                          onClick: handleClearClick,
+                          children: /* @__PURE__ */ jsx(X, { className: "size-3.5" })
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(ChevronDown, { className: "size-4 shrink-0 text-muted-foreground" })
+                    ]
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx(ComboboxContent, { anchor: anchorEl, ...contentProps, children: /* @__PURE__ */ jsx(
+              MultiSelectDropdown,
+              {
+                ...dropdownProps,
+                labelForValue,
+                testIdPrefix,
+                children
+              }
+            ) })
+          ]
+        }
+      )
+    );
+  }
+);
+SelectCombobox.displayName = "SelectCombobox";
+
+const MultiSelectCombobox = forwardRef(
+  ({
+    name,
+    id,
+    effectiveItems,
+    labelForValue,
+    isSearchable,
+    isAsync,
+    isCreatable,
+    creatableFilter,
+    isControlled,
+    valueProp,
+    defaultValue,
+    selectedValues,
+    handleValueChange,
+    handleInputValueChange,
+    onOpenChange,
+    isDisabled,
+    autoHighlight,
+    required,
+    sizeConfig,
+    error,
+    chipsClassName,
+    inputClassName,
+    placeholder,
+    hideChipRemove,
+    ariaDescribedBy,
+    testIdPrefix,
+    contentProps,
+    dropdownProps,
+    children
+  }, ref) => {
+    const { anchorEl, setAnchorEl, handleClick } = useComboboxAnchor(isSearchable);
+    return (
+      // @ts-expect-error — conditional spread creates a union that TS cannot narrow to the Combobox discriminated-union props
+      /* @__PURE__ */ jsxs(
+        Combobox,
+        {
+          multiple: true,
+          name,
+          ...effectiveItems && !children ? {
+            items: effectiveItems,
+            itemToStringLabel: labelForValue,
+            ...!isSearchable || isAsync ? { filter: null } : isCreatable ? { filter: creatableFilter } : {}
+          } : {},
+          ...isControlled ? { value: valueProp } : { defaultValue },
+          onValueChange: handleValueChange,
+          ...isCreatable || isAsync ? { onInputValueChange: handleInputValueChange } : {},
+          onOpenChange,
+          disabled: isDisabled,
+          autoHighlight,
+          children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                ref: setAnchorEl,
+                onClick: handleClick,
+                className: !isSearchable ? "cursor-pointer" : void 0,
+                children: /* @__PURE__ */ jsxs(
+                  ComboboxChips,
+                  {
+                    className: cn(
+                      sizeConfig.chips,
+                      !!error && "border-destructive ring-3 ring-destructive/20 dark:border-destructive/50 dark:ring-destructive/40",
+                      chipsClassName,
+                      inputClassName
+                    ),
+                    ...testIdPrefix ? { "data-testid": `${testIdPrefix}-select-container` } : {},
+                    children: [
+                      selectedValues.map((val) => /* @__PURE__ */ jsx(
+                        ComboboxChip,
+                        {
+                          className: sizeConfig.chip,
+                          showRemove: !hideChipRemove,
+                          ...testIdPrefix ? { "data-testid": `${testIdPrefix}-chip` } : {},
+                          children: labelForValue(val)
+                        },
+                        val
+                      )),
+                      /* @__PURE__ */ jsx(
+                        ComboboxChipsInput,
+                        {
+                          ref,
+                          id,
+                          placeholder: isSearchable && selectedValues.length === 0 ? placeholder : void 0,
+                          "aria-invalid": !!error || void 0,
+                          "aria-describedby": ariaDescribedBy,
+                          "aria-required": required || void 0,
+                          className: cn(
+                            sizeConfig.input,
+                            !isSearchable && "w-0 min-w-0 overflow-hidden p-0 opacity-0"
+                          ),
+                          disabled: isDisabled,
+                          ...testIdPrefix ? { "data-testid": `${testIdPrefix}-select-input` } : {}
+                        }
+                      )
+                    ]
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsx(ComboboxContent, { anchor: anchorEl, ...contentProps, children: /* @__PURE__ */ jsx(
+              MultiSelectDropdown,
+              {
+                ...dropdownProps,
+                labelForValue,
+                testIdPrefix,
+                children
+              }
+            ) })
+          ]
+        }
+      )
+    );
+  }
+);
+MultiSelectCombobox.displayName = "MultiSelectCombobox";
+
+const SingleSelectInner = forwardRef(
+  (props, ref) => {
+    const {
+      id,
+      label,
+      error,
+      helpText,
+      errorId,
+      helpTextId,
+      isDisabled,
+      required,
+      testIdPrefix,
+      effectiveItems,
+      labelForValue,
+      isSearchable,
+      isAsync,
+      creatableFilter,
+      isControlled,
+      currentValue,
+      handleValueChange,
+      handleInputValueChange,
+      handleClear,
+      autoHighlight,
+      showClearButton,
+      sizeConfig,
+      ariaDescribedBy,
+      resolvedOptions,
+      flatOptionsMap,
+      isGrouped,
+      isLoading,
+      showCreateOption,
+      hasMoreLazy,
+      loaderCallbackRef
+    } = useSelectState(props);
+    return /* @__PURE__ */ jsx(
+      SelectFieldWrapper,
+      {
+        id,
+        label,
+        error,
+        helpText,
+        errorId,
+        helpTextId,
+        isDisabled,
+        required,
+        testIdPrefix,
+        labelProps: props.labelProps,
+        className: props.className,
+        children: /* @__PURE__ */ jsx(
+          SelectCombobox,
+          {
+            ref,
+            name: props.name,
+            id,
+            effectiveItems,
+            labelForValue,
+            isSearchable,
+            isAsync,
+            isCreatable: props.isCreatable ?? false,
+            creatableFilter,
+            isControlled,
+            valueProp: props.value,
+            defaultValue: props.defaultValue,
+            currentValue,
+            handleValueChange,
+            handleInputValueChange,
+            handleClear,
+            onOpenChange: props.onOpenChange,
+            isDisabled,
+            autoHighlight,
+            required,
+            isClearable: props.isClearable ?? false,
+            showClearButton,
+            sizeConfig,
+            error,
+            placeholder: props.placeholder ?? "",
+            ariaDescribedBy,
+            testIdPrefix,
+            inputClassName: props.inputClassName,
+            contentProps: props.contentProps,
+            dropdownProps: {
+              resolvedOptions,
+              flatOptionsMap,
+              isGrouped,
+              isLoading,
+              loadingMessage: props.loadingMessage ?? "Loading\u2026",
+              emptyMessage: props.emptyMessage ?? "No results found.",
+              showCreateOption,
+              hasMoreLazy,
+              loaderCallbackRef
+            },
+            children: props.children
+          }
+        )
+      }
+    );
+  }
+);
+SingleSelectInner.displayName = "SingleSelectInner";
+const MultiSelectInner = forwardRef(
+  (props, ref) => {
+    const {
+      id,
+      label,
+      error,
+      helpText,
+      errorId,
+      helpTextId,
+      testIdPrefix,
+      effectiveItems,
+      labelForValue,
+      isAsync,
+      creatableFilter,
+      isControlled,
+      selectedValues,
+      handleValueChange,
+      handleInputValueChange,
+      sizeConfig,
+      ariaDescribedBy,
+      resolvedOptions,
+      flatOptionsMap,
+      isGrouped,
+      isLoading,
+      showCreateOption,
+      hasMoreLazy,
+      loaderCallbackRef
+    } = useMultiSelectState(props);
+    const { isDisabled = false, required = false } = props;
+    return /* @__PURE__ */ jsx(
+      SelectFieldWrapper,
+      {
+        id,
+        label,
+        error,
+        helpText,
+        errorId,
+        helpTextId,
+        isDisabled,
+        required,
+        testIdPrefix,
+        labelProps: props.labelProps,
+        className: props.className,
+        children: /* @__PURE__ */ jsx(
+          MultiSelectCombobox,
+          {
+            ref,
+            name: props.name,
+            id,
+            effectiveItems,
+            labelForValue,
+            isSearchable: props.isSearchable ?? true,
+            isAsync,
+            isCreatable: props.isCreatable ?? false,
+            creatableFilter,
+            isControlled,
+            valueProp: props.value,
+            defaultValue: props.defaultValue,
+            selectedValues,
+            handleValueChange,
+            handleInputValueChange,
+            onOpenChange: props.onOpenChange,
+            isDisabled,
+            autoHighlight: props.autoHighlight ?? true,
+            sizeConfig,
+            error,
+            chipsClassName: props.chipsClassName,
+            inputClassName: props.inputClassName,
+            placeholder: props.placeholder ?? "",
+            hideChipRemove: props.hideChipRemove ?? false,
+            ariaDescribedBy,
+            required,
+            testIdPrefix,
+            contentProps: props.contentProps,
+            dropdownProps: {
+              resolvedOptions,
+              flatOptionsMap,
+              isGrouped,
+              isLoading,
+              loadingMessage: props.loadingMessage ?? "Loading\u2026",
+              emptyMessage: props.emptyMessage ?? "No results found.",
+              showCreateOption,
+              hasMoreLazy,
+              loaderCallbackRef
+            },
+            children: props.children
+          }
+        )
+      }
+    );
+  }
+);
+MultiSelectInner.displayName = "MultiSelectInner";
+const Select = forwardRef((props, ref) => {
+  if (props.isMulti === true) {
+    return /* @__PURE__ */ jsx(MultiSelectInner, { ...props, ref });
+  }
+  return /* @__PURE__ */ jsx(SingleSelectInner, { ...props, ref });
+});
+Select.displayName = "Select";
+
+export { Select as S };
+//# sourceMappingURL=Select-o0yJaN0P.js.map