@persona/design-system 0.1.5-pre.4

package/dist/Combobox-B_-swcix.mjs

@@ -0,0 +1,1672 @@
+import { focusStyle } from "./mixins/focus.mjs";
+import { n as Stack } from "./Stack-hwgS2FU1.mjs";
+import "./components/Stack/index.mjs";
+import { i as Paragraph } from "./Text-DOTYjIt0.mjs";
+import { useOutsideClick } from "./lib/useOutsideClick.mjs";
+import { Z_INDICES } from "./lib/zindex.mjs";
+import { n as Button } from "./IconButton-C28qxOdi.mjs";
+import "./components/Button/index.mjs";
+import { n as Sticker } from "./Sticker-D6bwBTGr.mjs";
+import { n as useFormField } from "./useFormField-eftOPiXj.mjs";
+import { c as MenuList, n as IconContainer, o as MenuHeading, s as MenuItem, t as FloatingCard } from "./Menu-DNRHo2i_.mjs";
+import { t as Checkbox } from "./Checkbox-C5bGcb-r.mjs";
+import { r as InputGroup } from "./Input-eoFk39bE.mjs";
+import Input_default from "./components/Input/index.mjs";
+import "./components/Menu/index.mjs";
+import { t as Spinner } from "./Spinner-C05An_fn.mjs";
+import { Color, Spacing, Typography } from "@persona/design-tokens";
+import styled, { css } from "styled-components";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, cloneElement, forwardRef, isValidElement, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { ArrowLeftIcon, CaretDownIcon, ChevronRightIcon, CircleXInverseIcon, SearchIcon } from "@persona/icons";
+import Fuse from "fuse.js";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { useCombobox, useMultipleSelection } from "downshift";
+//#region components/Combobox/ComboboxBase.tsx
+function isOptionGroup(item) {
+	return "options" in item && Array.isArray(item.options);
+}
+/**
+* Flatten the visible leaves at the current navigation level. Inline
+* (non-nested) groups are walked through transparently — their leaves
+* surface at this level. Nested groups are skipped along with their
+* contents — those leaves live behind a navigation step in single-
+* select. Multi-select doesn't reach this code with nested groups
+* intact (it inlines them at the component boundary), so the skip
+* here is the single-select-only contract.
+*/
+function flattenOptions(items) {
+	const out = [];
+	for (const item of items) if (isOptionGroup(item)) {
+		if (!item.nested) out.push(...flattenOptions(item.options));
+	} else out.push(item);
+	return out;
+}
+/**
+* Recurse through the entire option tree looking for any nested
+* group. Used to gate nested-mode behavior so trees that don't opt
+* in (the overwhelmingly common case) skip the extra book-keeping
+* entirely. Single-select uses this to switch between its nested-nav
+* render path and the legacy renderer; multi-select uses it to
+* short-circuit its `nested → inline` transform when there's nothing
+* to convert.
+*/
+function containsNestedGroup(items) {
+	for (const item of items) if (isOptionGroup(item)) {
+		if (item.nested) return true;
+		if (containsNestedGroup(item.options)) return true;
+	}
+	return false;
+}
+/**
+* Find a nested-group child of `items` whose `label` matches `label`.
+* Walks transparently through inline (non-nested) groups at the same
+* level — they don't add a navigation step, so a nested submenu
+* declared inside an inline section header is still "at this level"
+* for descent purposes. Returns `null` if no match.
+*/
+function findNestedGroupByLabel(items, label) {
+	for (const item of items) {
+		if (!isOptionGroup(item)) continue;
+		if (item.nested) {
+			if (item.label === label) return item;
+		} else {
+			const found = findNestedGroupByLabel(item.options, label);
+			if (found) return found;
+		}
+	}
+	return null;
+}
+/**
+* Walk the option tree by following `path` step-by-step. Each entry
+* in `path` is the `label` of a nested group at that level; we
+* descend into its `options` at each step. Returns the items visible
+* at the resolved level (a mix of leaves, inline groups, and further
+* nested groups).
+*
+* - Empty `path` returns the original top-level items unchanged.
+* - If any step doesn't resolve to a known nested group (e.g. stale
+*   state after the registry changes), returns an empty list so the
+*   consumer can fall back to the root view.
+*/
+function getOptionsAtPath(options, path) {
+	let scope = options;
+	for (const label of path) {
+		const found = findNestedGroupByLabel(scope, label);
+		if (!found) return [];
+		scope = found.options;
+	}
+	return scope;
+}
+/**
+* Recursively walk the tree and return every leaf option, each paired
+* with the labels of its nested-group ancestors. Used by single-select
+* Combobox to populate the search-results view: the search query
+* bypasses the active navigation path and matches against every leaf
+* in the tree, with the breadcrumb surfacing parent context in each
+* hit.
+*
+* Inline (non-nested) groups are walked through transparently — their
+* `label` isn't a breadcrumb crumb because they don't correspond to a
+* navigation step. Only nested groups contribute a crumb.
+*/
+function flattenLeafOptions(options, breadcrumb = []) {
+	const result = [];
+	for (const item of options) if (isOptionGroup(item)) {
+		const nextBreadcrumb = item.nested ? [...breadcrumb, item.label] : breadcrumb;
+		result.push(...flattenLeafOptions(item.options, nextBreadcrumb));
+	} else result.push({
+		option: item,
+		breadcrumb
+	});
+	return result;
+}
+/**
+* Build the flat list of navigable items at the current navigation
+* level, in document order. Inline (non-nested) groups are walked
+* through transparently; their leaves and any nested subgroups
+* contribute at this level. Nested groups become a `kind: 'group'`
+* entry that the renderer turns into a navigation row.
+*/
+function getNavigableItemsAtLevel(items) {
+	const out = [];
+	for (const item of items) if (isOptionGroup(item)) if (item.nested) out.push({
+		kind: "group",
+		group: item
+	});
+	else out.push(...getNavigableItemsAtLevel(item.options));
+	else out.push({
+		kind: "leaf",
+		option: item
+	});
+	return out;
+}
+/**
+* A hook which provides the caller with dynamically filtered options
+*
+* @param options - The options to filter (can be flat or grouped)
+* @param inputValue - The input value to filter the options by
+* @returns The subset of the options that match the input value according to the fuse.js library
+*/
+function useFilteredOptions(options, inputValue) {
+	return useMemo(() => {
+		const flatOptions = flattenOptions(options);
+		const fuse = new Fuse(flatOptions, {
+			shouldSort: false,
+			threshold: 0,
+			ignoreLocation: true,
+			minMatchCharLength: 1,
+			keys: ["label", "description"]
+		});
+		return inputValue === "" ? flatOptions : Array.from(new Set(fuse.search(inputValue).map(({ item }) => item)).values());
+	}, [options, inputValue]);
+}
+function buildVirtualRows(options, filteredOptions, indexRealToIndexVirtual) {
+	const rows = [];
+	let idx = 0;
+	for (const item of options) if (isOptionGroup(item)) {
+		if (item.nested) continue;
+		const visibleLeaves = flattenOptions(item.options).filter((opt) => filteredOptions.some((f) => f.value === opt.value));
+		if (visibleLeaves.length > 0) {
+			rows.push({
+				kind: "group-header",
+				label: item.label
+			});
+			for (const opt of visibleLeaves) {
+				indexRealToIndexVirtual.set(idx, rows.length);
+				rows.push({
+					kind: "option",
+					option: opt,
+					index: idx++
+				});
+			}
+		}
+	} else if (filteredOptions.some((f) => f.value === item.value)) {
+		indexRealToIndexVirtual.set(idx, rows.length);
+		rows.push({
+			kind: "option",
+			option: item,
+			index: idx++
+		});
+	}
+	return rows;
+}
+/**
+* Renders options with support for groups, handling filtering and proper indexing
+*
+* @param params - Object containing options, filteredOptions, and renderOption
+* @param params.options - The original options array (can include groups)
+* @param params.filteredOptions - The flat filtered options to display
+* @param params.virtualizer - Optional virtualizer for large lists
+* @param params.virtualRows - Pre-built flat rows list (required when virtualizer is provided)
+* @param params.renderOption - Callback to render each individual option with its flat index
+* @returns React nodes with properly grouped and filtered options
+*/
+function renderOptionsWithGroups({ options, filteredOptions, renderOption, virtualizer, virtualRows }) {
+	if (virtualizer && virtualRows) {
+		const rows = virtualRows;
+		const vItems = virtualizer.getVirtualItems();
+		return /* @__PURE__ */ jsx("div", {
+			style: {
+				height: `${virtualizer.getTotalSize()}px`,
+				width: "100%",
+				position: "relative"
+			},
+			children: vItems.map((vItem) => {
+				const row = rows[vItem.index];
+				if (!row) return null;
+				return /* @__PURE__ */ jsx("div", {
+					"data-index": vItem.index,
+					ref: virtualizer.measureElement,
+					style: {
+						position: "absolute",
+						top: 0,
+						left: 0,
+						width: "100%",
+						transform: `translateY(${vItem.start}px)`
+					},
+					children: row.kind === "group-header" ? /* @__PURE__ */ jsx(MenuHeading, {
+						as: "div",
+						children: row.label
+					}) : renderOption(row.option, row.index)
+				}, String(vItem.key));
+			})
+		});
+	}
+	let flatIndex = -1;
+	return options.map((item, groupIndex) => {
+		if (isOptionGroup(item)) {
+			if (item.nested) return null;
+			const visibleLeaves = flattenOptions(item.options).filter((opt) => filteredOptions.some((filtered) => filtered.value === opt.value));
+			if (visibleLeaves.length === 0) return null;
+			return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(MenuHeading, { children: item.label }), visibleLeaves.map((option) => {
+				flatIndex++;
+				return renderOption(option, flatIndex);
+			})] }, `group-${groupIndex}`);
+		} else {
+			if (!filteredOptions.some((filtered) => filtered.value === item.value)) return null;
+			flatIndex++;
+			return renderOption(item, flatIndex);
+		}
+	});
+}
+const MAX_DROPDOWN_HEIGHT = "300px";
+const Container = styled.div`
+  display: flex;
+  position: relative;
+  width: 100%;
+`;
+const InputContainer = styled.div`
+  position: relative;
+  width: 100%;
+`;
+const ComboboxInput = styled(Input_default)`
+  padding-right: ${({ size }) => size === "sm" ? Spacing[5] : Spacing[6]}; /* Space for caret icon */
+
+  ${({ $isOpen }) => $isOpen && css`
+      ${focusStyle}
+    `}
+
+  /* Apply custom font family from selected item when dropdown is closed */
+  ${({ $selectedItemStyle, $isOpen }) => !$isOpen && $selectedItemStyle?.fontFamily && css`
+      && {
+        font-family: ${$selectedItemStyle.fontFamily};
+      }
+    `}
+`;
+const CaretButton = styled(Button).attrs({ width: "icon" })`
+  background-color: transparent;
+  border: none;
+  color: ${Color.BorderIconPrimary};
+
+  &:hover:not(:disabled),
+  &:active:not(:disabled) {
+    color: ${Color.BorderIconPrimary};
+    background-color: transparent;
+    border: none;
+  }
+
+  &:disabled {
+    color: ${Color.BorderIconDisabled};
+    background-color: transparent;
+    border: none;
+  }
+
+  position: absolute;
+  right: 0;
+  top: 0;
+`;
+const DropdownContainer = styled(FloatingCard)`
+  ${({ $portal, $embedded, $top, $left, $width }) => $embedded ? css`
+          position: static;
+          width: 100%;
+          min-width: 0;
+          border: 0;
+          border-radius: 0;
+          box-shadow: none;
+          background: transparent;
+          margin: 0;
+        ` : $portal ? css`
+          position: fixed;
+          top: ${$top != null ? `${$top}px` : "0"};
+          left: ${$left != null ? `${$left}px` : "0"};
+          width: ${$width != null ? `${$width}px` : "auto"};
+        ` : css`
+          position: absolute;
+          top: calc(100% + ${Spacing[2]});
+          left: 0;
+          right: 0;
+          width: 100%;
+        `}
+
+  ${({ $minWidth }) => $minWidth && css`
+      min-width: ${$minWidth};
+    `}
+
+  display: flex;
+  flex-direction: column;
+  ${({ $embedded }) => $embedded && css`
+      gap: ${Spacing[2]};
+    `}
+  overflow: ${({ $embedded }) => $embedded ? "visible" : "hidden"}; /* Prevent floating menu overflow while preserving embedded focus rings */
+  box-sizing: border-box;
+  z-index: ${Z_INDICES.modalDropdown}; /* Ensure portal dropdown appears above other content */
+
+  ${({ $isOpen }) => !$isOpen && css`
+      display: none;
+    `}
+`;
+const ScrollableMenuList = styled(MenuList)`
+  max-height: ${MAX_DROPDOWN_HEIGHT};
+  overflow-y: auto;
+  overflow-x: hidden; /* Prevent horizontal scrolling */
+  width: 100%; /* Ensure full width is used */
+  box-sizing: border-box;
+`;
+const SearchInputContainer = styled.div`
+  flex-shrink: 0;
+  ${({ $embedded }) => $embedded ? css`
+          padding: 0;
+        ` : css`
+          padding: ${Spacing[1]} ${Spacing[2]};
+          border-bottom: 1px solid ${({ theme }) => theme.color.border.primary};
+        `}
+`;
+const SearchInput = styled(Input_default)`
+  ${({ $embedded }) => !$embedded && css`
+      /* Borderless strip inside floating menus */
+      border: none;
+      padding-top: ${Spacing[1]};
+      padding-bottom: ${Spacing[1]};
+
+      &:focus {
+        outline: none !important;
+      }
+    `}
+`;
+const EmptyState = styled(Paragraph).attrs(({ size }) => ({ size }))`
+  padding: 0 ${({ size }) => size === "sm" ? Spacing[1] : Spacing[2]};
+  color: ${({ theme }) => theme.color.text.tertiary};
+  ${({ theme }) => theme.text.paragraph.md};
+`;
+const LoadingContainer = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 136px;
+  padding: ${Spacing[3]};
+`;
+const OptionLabel = styled.div`
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  min-width: 0; /* Allow flex item to shrink below content size */
+
+  /* Apply custom font family if provided */
+  ${({ $labelStyle }) => $labelStyle?.fontFamily && css`
+      font-family: ${$labelStyle.fontFamily};
+    `}
+`;
+const Description = styled.p`
+  ${Typography.TextSmall};
+  color: ${Color.TextSecondary};
+  margin: 0;
+
+  /* Multi-line truncation with 3-line limit */
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 3;
+  -webkit-box-orient: vertical;
+
+  /* Fallback for browsers that don't support -webkit-line-clamp */
+  max-height: calc(${Typography.TextSmall.lineHeight} * 3); /* line-height * 3 lines */
+`;
+function useDropdownPosition(portalContainerRef, isOpen, portal) {
+	const [position, setPosition] = useState({
+		top: 0,
+		left: 0,
+		width: 0
+	});
+	useEffect(() => {
+		if (!portal || !isOpen || !portalContainerRef.current) return;
+		const updatePosition = () => {
+			const rect = portalContainerRef.current.getBoundingClientRect();
+			const spacing = parseInt(Spacing[2]);
+			setPosition({
+				top: rect.bottom + spacing,
+				left: rect.left,
+				width: rect.width
+			});
+		};
+		updatePosition();
+		window.addEventListener("scroll", updatePosition, true);
+		window.addEventListener("resize", updatePosition);
+		return () => {
+			window.removeEventListener("scroll", updatePosition, true);
+			window.removeEventListener("resize", updatePosition);
+		};
+	}, [
+		portalContainerRef,
+		isOpen,
+		portal
+	]);
+	return position;
+}
+function DropdownPortalWrapper({ children, portal }) {
+	const portalRoot = useRef(null);
+	useEffect(() => {
+		if (portal) portalRoot.current = document.body;
+	}, [portal]);
+	if (portal && portalRoot.current) return createPortal(/* @__PURE__ */ jsx("div", {
+		id: "combobox-dropdown-portal-wrapper",
+		children
+	}), portalRoot.current);
+	return /* @__PURE__ */ jsx(Fragment, { children });
+}
+//#endregion
+//#region components/Combobox/useTruncation.ts
+/**
+* Custom hook for calculating truncation when multi-select items are restricted to a single line using actual DOM measurements
+* Ensures at least one item is always visible
+*/
+function useTruncation(selectedItems, stickerRefs, truncatorRef, containerRef, truncate) {
+	const [visibleCount, setVisibleCount] = useState(selectedItems.length);
+	useEffect(() => {
+		if (!truncate || selectedItems.length === 0 || !containerRef.current) {
+			setVisibleCount(selectedItems.length);
+			return;
+		}
+		const calculateVisibleCount = () => {
+			const container = containerRef.current;
+			if (!container) return;
+			if (!(selectedItems.every((_, i) => stickerRefs.current[i] != null) && truncatorRef.current != null)) return;
+			const computedStyle = window.getComputedStyle(container);
+			const paddingLeft = parseFloat(computedStyle.paddingLeft) || 0;
+			const paddingRight = parseFloat(computedStyle.paddingRight) || 0;
+			const availableWidth = container.offsetWidth - paddingLeft - paddingRight;
+			const gap = 4;
+			const truncatorWidth = truncatorRef.current.offsetWidth;
+			let count = 1;
+			let totalWidth = stickerRefs.current[0].offsetWidth;
+			for (let i = 1; i < selectedItems.length; i++) {
+				const itemWidth = stickerRefs.current[i].offsetWidth;
+				const wouldBeLastItem = i === selectedItems.length - 1;
+				const widthWithItem = totalWidth + gap + itemWidth;
+				if (widthWithItem + (wouldBeLastItem ? 0 : gap + truncatorWidth) <= availableWidth) {
+					totalWidth = widthWithItem;
+					count++;
+				} else break;
+			}
+			setVisibleCount((prev) => prev === count ? prev : count);
+		};
+		const resizeObserver = new ResizeObserver(calculateVisibleCount);
+		resizeObserver.observe(containerRef.current);
+		return () => {
+			resizeObserver.disconnect();
+		};
+	}, [
+		selectedItems,
+		stickerRefs,
+		truncatorRef,
+		containerRef,
+		truncate
+	]);
+	return visibleCount;
+}
+//#endregion
+//#region components/Combobox/ComboboxMultiSelect.tsx
+const SELECT_ALL_VALUE = "__SELECT_ALL__";
+const EXTERNAL_TRIGGER_DROPDOWN_MIN_WIDTH$1 = "240px";
+/**
+* Recursively drop the `nested: true` flag from every group in the
+* tree, converting nested-navigation groups into inline section-
+* header groups. Multi-select doesn't implement the nested-nav UX
+* (chevron rows, Back row, descent), so this graceful-degradation
+* transform keeps every leaf reachable as a checkable option under
+* its parent's section header — instead of having `flattenOptions` /
+* `renderOptionsWithGroups` silently drop them along with their
+* descendants. Single-select Combobox is unaffected; it owns its own
+* nested-nav render path.
+*
+* For a multi-level tree (`{nested, options: [{nested, options}]}`),
+* the inner inline group is walked through by `flattenOptions` so
+* its leaves surface under the outer header — the inner label is
+* lost, but all leaves stay reachable. Acceptable for the
+* graceful-degradation goal; nested-nav can be added later without
+* changing this API.
+*/
+function inlineNestedGroups(items) {
+	return items.map((item) => {
+		if (!isOptionGroup(item)) return item;
+		return {
+			label: item.label,
+			options: inlineNestedGroups(item.options)
+		};
+	});
+}
+const MultiSelectComboboxInput = styled(ComboboxInput)`
+  position: absolute;
+  inset: 0;
+  height: auto;
+  caret-color: transparent; /* Hide cursor in multi-select mode because we use stickers and focus into the search input */
+`;
+const MultiSelectScrollableMenuList = styled(ScrollableMenuList)`
+  max-height: calc(${MAX_DROPDOWN_HEIGHT} - 60px); /* Subtract approximate search bar height */
+  overflow-x: hidden; /* Prevent horizontal scrolling */
+  width: 100%; /* Ensure full width is used */
+  box-sizing: border-box;
+  ${({ $embedded }) => $embedded && css`
+      padding: 0;
+    `}
+`;
+const SelectedItemsContainer = styled.div`
+  position: relative; /* Establish positioning context */
+  box-sizing: border-box;
+  min-height: ${({ $size }) => $size === "sm" ? Spacing[5] : Spacing[6]};
+  max-height: ${({ $truncate, $size }) => $truncate ? $size === "sm" ? Spacing[5] : Spacing[6] : "none"};
+  padding-left: ${Spacing[2]};
+  padding-right: ${({ $size }) => $size === "sm" ? Spacing[5] : Spacing[6]}; /* Leave space for caret button.  */
+  padding-top: ${({ $size }) => $size === "sm" ? Spacing[1] : Spacing[2]};
+  padding-bottom: ${({ $size }) => $size === "sm" ? Spacing[1] : Spacing[2]};
+  display: flex;
+  flex-wrap: ${({ $truncate }) => $truncate ? "nowrap" : "wrap"};
+  gap: ${Spacing[1]};
+  align-items: flex-start;
+  align-content: flex-start;
+  pointer-events: none; /* Allow clicks to pass through to underlying input */
+  overflow: hidden; /* Required for truncation when truncate mode is enabled */
+
+  /* Re-enable pointer events on stickers' dismiss buttons */
+  button {
+    pointer-events: auto;
+  }
+`;
+const TruncatedItemsWrapper = styled.div`
+  display: flex;
+  flex-wrap: nowrap;
+  gap: ${Spacing[1]};
+  overflow: hidden;
+  flex: 1;
+  min-width: 0; /* Allow shrinking below content size */
+  pointer-events: none;
+`;
+const TruncatedSticker = styled(Sticker)`
+  /* Allow first sticker to truncate its text only when it's the only item */
+  flex-shrink: ${({ $isOnlyItem }) => $isOnlyItem ? 1 : 0};
+  min-width: 0;
+  max-width: 100%;
+  /* If the sticker is an inline element it was causing the parent to gain an extra pixel of height */
+  vertical-align: top;
+`;
+const TruncatorSticker = styled(Sticker)`
+  /* Truncator should never shrink */
+  flex-shrink: 0;
+  /* If the sticker is an inline element it was causing the parent to gain an extra pixel of height */
+  vertical-align: top;
+`;
+const HiddenMeasurementContainer = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  visibility: hidden;
+  display: flex;
+  flex-wrap: nowrap;
+  gap: ${Spacing[1]};
+  pointer-events: none;
+  overflow: hidden;
+  max-width: 100%;
+`;
+const StyledMenuItem$1 = styled(MenuItem)`
+  /* These heights should add up to 24 and 32 respectively and the content is 20 already */
+  padding: ${({ $size }) => $size === "sm" ? `2px ${Spacing[2]}` : `6px ${Spacing[2]}`};
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: ${Spacing[1]};
+  min-width: 0; /* Allow content to shrink below natural size */
+  width: 100%; /* Ensure full width of dropdown */
+  box-sizing: border-box;
+
+  /* Force all children to respect the container width */
+  > * {
+    width: 100%;
+    min-width: 0;
+    box-sizing: border-box;
+  }
+`;
+const CheckboxLabel = styled.span`
+  color: ${Color.TextPrimary};
+  ${({ $size }) => $size === "sm" ? Typography.TextSmall : Typography.TextMedium};
+  display: flex;
+  flex-direction: column;
+  gap: ${Spacing[1]};
+  min-width: 0; /* Allow content to shrink below natural size */
+
+  /** Nudge text for visual alignment */
+  position: relative;
+  bottom: -1px;
+`;
+function ComboboxMultiSelectComponent({ size = "md", options: rawOptions, isOptionsLoading, values = [], onValuesChange, searchPlaceholder = "Search...", onInputChange, placeholder = "Select an option...", emptyStateMessage = "No options found", disabled = false, hasWarning, hasError, id, labelId, "aria-label": ariaLabel, onOpenChange, truncate = false, selectAll = false, stableOptionOrder = false, portal = false, portalContainerRef: externalPortalContainerRef, trigger, embedded = false, virtualize = false, ...props }, ref) {
+	const options = useMemo(() => containsNestedGroup(rawOptions) ? inlineNestedGroups(rawOptions) : rawOptions, [rawOptions]);
+	const field = useFormField({
+		hasWarning,
+		hasError,
+		disabled,
+		inputId: id
+	});
+	const [inputValue, setInputValue] = useState("");
+	const searchInputRef = useRef(null);
+	const comboboxInputRef = useRef(null);
+	const caretButtonRef = useRef(null);
+	const comboboxContainerRef = useRef(null);
+	const scrollableListRef = useRef(null);
+	const selectedItemsContainerRef = useRef(null);
+	const measurementStickerRefs = useRef([]);
+	const measurementTruncatorRef = useRef(null);
+	const portalContainerRef = externalPortalContainerRef || comboboxContainerRef;
+	const flatOptions = useMemo(() => flattenOptions(options), [options]);
+	const selectedItems = flatOptions.filter((option) => values.includes(option.value));
+	useEffect(() => {
+		measurementStickerRefs.current = measurementStickerRefs.current.slice(0, selectedItems.length);
+	}, [selectedItems.length]);
+	const visibleCount = useTruncation(selectedItems, measurementStickerRefs, measurementTruncatorRef, selectedItemsContainerRef, truncate);
+	useImperativeHandle(ref, () => ({
+		...comboboxInputRef.current,
+		focusSearchInput: () => {
+			if (searchInputRef.current) searchInputRef.current.focus();
+		}
+	}), []);
+	const filteredOptions = useFilteredOptions(options, inputValue);
+	const isGrouped = useMemo(() => options.some(isOptionGroup), [options]);
+	const optionsWithSelectedFirstInGroups = useMemo(() => {
+		if (!isGrouped || values.length === 0 || stableOptionOrder) return options;
+		return options.map((item) => {
+			if (isOptionGroup(item)) {
+				const groupLeaves = flattenOptions(item.options);
+				return {
+					...item,
+					options: groupLeaves.toSorted((a, b) => {
+						const aSelected = values.includes(a.value);
+						if (aSelected === values.includes(b.value)) return 0;
+						return aSelected ? -1 : 1;
+					})
+				};
+			}
+			return item;
+		});
+	}, [
+		options,
+		isGrouped,
+		values,
+		stableOptionOrder
+	]);
+	const navigableItems = useMemo(() => {
+		const items = [];
+		if (isGrouped && values.length > 0) {
+			if (selectAll && filteredOptions.length > 0) items.push({
+				value: SELECT_ALL_VALUE,
+				label: "Select all"
+			});
+			for (const item of optionsWithSelectedFirstInGroups) if (isOptionGroup(item)) {
+				for (const opt of flattenOptions(item.options)) if (filteredOptions.some((f) => f.value === opt.value)) items.push(opt);
+			} else if (filteredOptions.some((f) => f.value === item.value)) items.push(item);
+			return items;
+		}
+		const orderedFiltered = !isGrouped && values.length > 0 && !stableOptionOrder ? filteredOptions.toSorted((a, b) => {
+			const aSelected = values.includes(a.value);
+			if (aSelected === values.includes(b.value)) return 0;
+			return aSelected ? -1 : 1;
+		}) : filteredOptions;
+		if (selectAll && orderedFiltered.length > 0) items.push({
+			value: SELECT_ALL_VALUE,
+			label: "Select all"
+		});
+		items.push(...orderedFiltered);
+		return items;
+	}, [
+		selectAll,
+		filteredOptions,
+		isGrouped,
+		values,
+		optionsWithSelectedFirstInGroups,
+		stableOptionOrder
+	]);
+	const optionsToRender = useMemo(() => {
+		if (!isGrouped && values.length > 0) return navigableItems;
+		const hasSelectAll = selectAll && filteredOptions.length > 0 && navigableItems[0]?.value === SELECT_ALL_VALUE;
+		const baseOptions = isGrouped && values.length > 0 ? optionsWithSelectedFirstInGroups : options;
+		return hasSelectAll ? [navigableItems[0], ...baseOptions] : baseOptions;
+	}, [
+		isGrouped,
+		values,
+		navigableItems,
+		selectAll,
+		filteredOptions,
+		optionsWithSelectedFirstInGroups,
+		options
+	]);
+	const navigableToVirtualRowRef = useRef(/* @__PURE__ */ new Map());
+	const virtualRows = useMemo(() => {
+		if (!virtualize) return [];
+		const map = /* @__PURE__ */ new Map();
+		const rows = buildVirtualRows(optionsToRender, navigableItems, map);
+		navigableToVirtualRowRef.current = map;
+		return rows;
+	}, [
+		optionsToRender,
+		navigableItems,
+		virtualize
+	]);
+	const virtualizer = useVirtualizer({
+		count: virtualRows.length,
+		getScrollElement: () => scrollableListRef.current,
+		estimateSize: () => size === "sm" ? 24 : 32,
+		overscan: 5
+	});
+	const itemToString = useCallback((item) => {
+		return item ? item.label : "";
+	}, []);
+	const { addSelectedItem, getSelectedItemProps, getDropdownProps, removeSelectedItem, reset, setSelectedItems } = useMultipleSelection({
+		selectedItems,
+		onStateChange: ({ selectedItems: newSelectedItems, type }) => {
+			switch (type) {
+				case useMultipleSelection.stateChangeTypes.SelectedItemKeyDownBackspace:
+				case useMultipleSelection.stateChangeTypes.SelectedItemKeyDownDelete:
+				case useMultipleSelection.stateChangeTypes.DropdownKeyDownBackspace:
+				case useMultipleSelection.stateChangeTypes.FunctionRemoveSelectedItem:
+				case useMultipleSelection.stateChangeTypes.FunctionAddSelectedItem:
+				case useMultipleSelection.stateChangeTypes.FunctionSetSelectedItems:
+					if (onValuesChange && newSelectedItems) {
+						const newValues = newSelectedItems.map((item) => item.value);
+						onValuesChange?.(newValues);
+					}
+					break;
+				case useMultipleSelection.stateChangeTypes.FunctionReset:
+					if (onValuesChange) onValuesChange([]);
+					break;
+				default: break;
+			}
+		}
+	});
+	const selectedState = useMemo(() => {
+		const counts = filteredOptions.reduce((acc, option) => {
+			if (values.includes(option.value)) acc.selected++;
+			else acc.notSelected++;
+			return acc;
+		}, {
+			selected: 0,
+			notSelected: 0
+		});
+		return {
+			allSelected: counts.selected === filteredOptions.length,
+			allNotSelected: counts.notSelected === filteredOptions.length,
+			indeterminate: counts.selected > 0 && counts.selected < filteredOptions.length
+		};
+	}, [values, filteredOptions]);
+	const handleSelectAllToggle = useCallback(() => {
+		if (selectedState.allSelected || selectedState.indeterminate) {
+			const visibleValues = filteredOptions.map((option) => option.value);
+			setSelectedItems(selectedItems.filter((item) => !visibleValues.includes(item.value)));
+		} else {
+			const newItems = filteredOptions.filter((option) => !values.includes(option.value));
+			setSelectedItems([...selectedItems, ...newItems]);
+		}
+	}, [
+		selectedState.allSelected,
+		selectedState.indeterminate,
+		filteredOptions,
+		selectedItems,
+		values,
+		setSelectedItems
+	]);
+	const { isOpen, getToggleButtonProps, getMenuProps, getInputProps, getItemProps, highlightedIndex, setHighlightedIndex, closeMenu, openMenu } = useCombobox({
+		items: navigableItems,
+		itemToString,
+		isOpen: embedded ? true : void 0,
+		selectedItem: null,
+		initialHighlightedIndex: 0,
+		defaultHighlightedIndex: 0,
+		onIsOpenChange({ isOpen: newIsOpen }) {
+			if (newIsOpen && inputValue !== "") setInputValue("");
+		},
+		onHighlightedIndexChange: ({ highlightedIndex, type }) => {
+			if (virtualize && type !== useCombobox.stateChangeTypes.MenuMouseLeave && highlightedIndex >= 0) {
+				const rowIndex = navigableToVirtualRowRef.current.get(highlightedIndex);
+				if (rowIndex != null) virtualizer.scrollToIndex(rowIndex, { align: "auto" });
+			}
+		},
+		onStateChange({ type, selectedItem: newSelectedItem, inputValue: newInputValue }) {
+			switch (type) {
+				case useCombobox.stateChangeTypes.InputChange:
+					setInputValue(newInputValue || "");
+					onInputChange?.(newInputValue || "");
+					break;
+				case useCombobox.stateChangeTypes.InputKeyDownEnter:
+				case useCombobox.stateChangeTypes.ItemClick:
+					if (newSelectedItem && newSelectedItem.value === SELECT_ALL_VALUE) {
+						handleSelectAllToggle();
+						break;
+					}
+					if (newSelectedItem) if (values.includes(newSelectedItem.value)) removeSelectedItem(newSelectedItem);
+					else addSelectedItem(newSelectedItem);
+					break;
+				default: break;
+			}
+		},
+		stateReducer(state, actionAndChanges) {
+			const { type, changes } = actionAndChanges;
+			switch (type) {
+				case useCombobox.stateChangeTypes.ItemClick:
+				case useCombobox.stateChangeTypes.InputKeyDownEnter: return {
+					...changes,
+					isOpen: true,
+					inputValue: "",
+					highlightedIndex: state.highlightedIndex
+				};
+				case useCombobox.stateChangeTypes.InputBlur:
+					if (isOpen) return {
+						...changes,
+						isOpen: true
+					};
+					return changes;
+				case useCombobox.stateChangeTypes.InputClick:
+				case useCombobox.stateChangeTypes.ToggleButtonClick: return changes;
+				default: return changes;
+			}
+		}
+	});
+	const renderOption = useCallback((option, currentIndex) => {
+		const isHighlighted = highlightedIndex === currentIndex;
+		const isSelected = values.includes(option.value);
+		if (option.value === SELECT_ALL_VALUE) return /* @__PURE__ */ jsx(StyledMenuItem$1, {
+			...getItemProps({
+				item: option,
+				index: currentIndex
+			}),
+			focused: isHighlighted,
+			selected: false,
+			"aria-labelledby": `combobox-option-label-${currentIndex}`,
+			$size: size,
+			tabIndex: -1,
+			children: /* @__PURE__ */ jsxs(Stack, {
+				direction: "horizontal",
+				align: "center",
+				spacing: Spacing[2],
+				children: [/* @__PURE__ */ jsx(Checkbox, {
+					checked: selectedState.allSelected,
+					indeterminate: selectedState.indeterminate,
+					tabIndex: -1
+				}), /* @__PURE__ */ jsx(CheckboxLabel, {
+					id: `combobox-option-label-${currentIndex}`,
+					$size: size,
+					children: /* @__PURE__ */ jsx(OptionLabel, { children: option.label })
+				})]
+			})
+		}, "select-all");
+		return /* @__PURE__ */ jsx(StyledMenuItem$1, {
+			...getItemProps({
+				item: option,
+				index: currentIndex,
+				"aria-selected": isSelected
+			}),
+			focused: isHighlighted,
+			selected: false,
+			"aria-labelledby": `combobox-option-label-${currentIndex}`,
+			$size: size,
+			tabIndex: -1,
+			children: /* @__PURE__ */ jsxs(Stack, {
+				direction: "horizontal",
+				align: "center",
+				spacing: Spacing[2],
+				children: [/* @__PURE__ */ jsx(Checkbox, {
+					checked: isSelected,
+					tabIndex: -1
+				}), /* @__PURE__ */ jsx(CheckboxLabel, {
+					id: `combobox-option-label-${currentIndex}`,
+					$size: size,
+					children: option.labelStickerVariant ? /* @__PURE__ */ jsx(Sticker, {
+						variant: option.labelStickerVariant,
+						children: option.label
+					}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(OptionLabel, {
+						title: option.label,
+						$labelStyle: option.PLEASE_DO_NOT_USE_labelFontStyle,
+						children: option.label
+					}), option.description && /* @__PURE__ */ jsx(Description, {
+						title: option.description,
+						children: option.description
+					})] })
+				})]
+			})
+		}, `${option.value}-${currentIndex}`);
+	}, [
+		highlightedIndex,
+		values,
+		getItemProps,
+		size,
+		selectedState
+	]);
+	const isMenuOpen = isOpen;
+	const handleKeyDown = useCallback((event) => {
+		if (event.key === "Enter" && !isMenuOpen) openMenu();
+	}, [isMenuOpen, openMenu]);
+	const dropdownPosition = useDropdownPosition(portalContainerRef, isMenuOpen, embedded ? false : portal);
+	useEffect(() => {
+		onOpenChange?.(isMenuOpen);
+	}, [isMenuOpen, onOpenChange]);
+	useEffect(() => {
+		if (isMenuOpen && navigableItems.length > 0) {
+			if (highlightedIndex === -1 || highlightedIndex >= navigableItems.length) setHighlightedIndex(0);
+		}
+	}, [
+		navigableItems,
+		isMenuOpen,
+		highlightedIndex,
+		setHighlightedIndex
+	]);
+	const searchInputId = `${field.inputId}-search`;
+	useEffect(() => {
+		if (isMenuOpen && searchInputRef.current) searchInputRef.current.focus();
+	}, [isMenuOpen]);
+	const handleSearchInputKeyDown = useCallback((e) => {
+		if (e.key === "ArrowDown" && navigableItems.length > 0) {
+			e.preventDefault();
+			setHighlightedIndex(highlightedIndex === -1 ? 0 : (highlightedIndex + 1) % navigableItems.length);
+		}
+		if (e.key === "ArrowUp" && navigableItems.length > 0) {
+			e.preventDefault();
+			setHighlightedIndex(highlightedIndex === -1 ? navigableItems.length - 1 : (highlightedIndex - 1 + navigableItems.length) % navigableItems.length);
+		}
+		if (e.key === "Enter" && highlightedIndex >= 0 && navigableItems[highlightedIndex]) {
+			e.preventDefault();
+			const selectedItem = navigableItems[highlightedIndex];
+			if (selectedItem.value === SELECT_ALL_VALUE) {
+				handleSelectAllToggle();
+				return;
+			}
+			if (values.includes(selectedItem.value)) removeSelectedItem(selectedItem);
+			else addSelectedItem(selectedItem);
+		}
+		if (e.key === "Escape") {
+			closeMenu();
+			if (comboboxInputRef.current) comboboxInputRef.current.focus();
+		}
+		if (e.key === "Tab" && highlightedIndex >= 0 && navigableItems[highlightedIndex]) closeMenu();
+	}, [
+		navigableItems,
+		highlightedIndex,
+		setHighlightedIndex,
+		values,
+		addSelectedItem,
+		removeSelectedItem,
+		closeMenu,
+		comboboxInputRef,
+		handleSelectAllToggle
+	]);
+	useOutsideClick({
+		ref: comboboxContainerRef,
+		onOutsideClick: useCallback((e) => {
+			if (!embedded && isMenuOpen && !e.target?.closest("#combobox-dropdown-portal-wrapper")) closeMenu();
+		}, [
+			embedded,
+			isMenuOpen,
+			closeMenu
+		])
+	});
+	const externalTrigger = (() => {
+		if (embedded || trigger == null || !isValidElement(trigger)) return null;
+		const triggerProps = trigger.props;
+		return cloneElement(trigger, getToggleButtonProps({
+			...triggerProps,
+			disabled: field.disabled || Boolean(triggerProps.disabled)
+		}));
+	})();
+	const handleSearchInputBlur = useCallback((e) => {
+		if (!isMenuOpen) return;
+		const relatedTarget = e.relatedTarget;
+		if (!embedded && (!relatedTarget || !comboboxContainerRef.current?.contains(relatedTarget))) closeMenu();
+	}, [
+		embedded,
+		isMenuOpen,
+		closeMenu
+	]);
+	return /* @__PURE__ */ jsxs(Container, {
+		...props,
+		ref: comboboxContainerRef,
+		children: [embedded ? null : externalTrigger != null ? externalTrigger : /* @__PURE__ */ jsxs(InputContainer, { children: [
+			/* @__PURE__ */ jsx(MultiSelectComboboxInput, {
+				...getInputProps(getDropdownProps({
+					...props,
+					ref: comboboxInputRef,
+					id: field.inputId,
+					placeholder: selectedItems.length === 0 ? placeholder : "",
+					disabled: field.disabled,
+					"aria-label": ariaLabel,
+					"aria-labelledby": labelId,
+					"aria-describedby": [field.helperTextId, field.hasWarning ? field.warningTextId : null].filter(Boolean).join(" ") || void 0,
+					"aria-errormessage": field.hasError ? field.errorTextId : void 0,
+					"aria-invalid": field.hasError,
+					preventKeyAction: isMenuOpen,
+					onKeyDown: handleKeyDown
+				})),
+				size,
+				$isOpen: isMenuOpen,
+				hasWarning: field.hasWarning,
+				hasError: field.hasError,
+				value: ""
+			}),
+			truncate && selectedItems.length > 0 && /* @__PURE__ */ jsxs(HiddenMeasurementContainer, {
+				"aria-hidden": "true",
+				children: [selectedItems.map((item, index) => {
+					return /* @__PURE__ */ jsx("div", {
+						ref: (el) => measurementStickerRefs.current[index] = el,
+						children: /* @__PURE__ */ jsx(Sticker, {
+							variant: flatOptions.find((opt) => opt.value === item.value)?.labelStickerVariant || "grey",
+							disabled: field.disabled,
+							children: item.label
+						})
+					}, `measurement-${item.value}-${index}`);
+				}), /* @__PURE__ */ jsx("div", {
+					ref: measurementTruncatorRef,
+					children: /* @__PURE__ */ jsxs(TruncatorSticker, {
+						variant: "grey",
+						disabled: field.disabled,
+						children: ["+", selectedItems.length - visibleCount]
+					})
+				})]
+			}),
+			/* @__PURE__ */ jsx(SelectedItemsContainer, {
+				$size: size,
+				$truncate: truncate,
+				ref: selectedItemsContainerRef,
+				children: truncate ? /* @__PURE__ */ jsxs(TruncatedItemsWrapper, { children: [selectedItems.slice(0, visibleCount).map((item, index) => {
+					const { ref: _ref, ...stickerProps } = getSelectedItemProps({
+						selectedItem: item,
+						index
+					});
+					const stickerVariant = flatOptions.find((opt) => opt.value === item.value)?.labelStickerVariant || "grey";
+					return /* @__PURE__ */ jsx(TruncatedSticker, {
+						...stickerProps,
+						variant: stickerVariant,
+						disabled: field.disabled,
+						$isOnlyItem: visibleCount === 1,
+						children: item.label
+					}, `selected-${item.value}-${index}`);
+				}), visibleCount < selectedItems.length && /* @__PURE__ */ jsxs(TruncatorSticker, {
+					variant: "grey",
+					disabled: field.disabled,
+					children: ["+", selectedItems.length - visibleCount]
+				})] }) : selectedItems.map((item, index) => {
+					const { ref, ...stickerProps } = getSelectedItemProps({
+						selectedItem: item,
+						index
+					});
+					const stickerVariant = flatOptions.find((opt) => opt.value === item.value)?.labelStickerVariant || "grey";
+					return /* @__PURE__ */ jsx(Sticker, {
+						...stickerProps,
+						variant: stickerVariant,
+						onDismiss: (e) => {
+							e.stopPropagation();
+							removeSelectedItem(item);
+						},
+						dismissButtonProps: { tabIndex: -1 },
+						disabled: field.disabled,
+						tabIndex: -1,
+						children: item.label
+					}, `selected-${item.value}-${index}`);
+				})
+			}),
+			selectedItems.length > 0 ? /* @__PURE__ */ jsx(CaretButton, {
+				id: `${field.inputId}__clear-all`,
+				onClick: reset,
+				size,
+				disabled: field.disabled,
+				"aria-label": "Clear all selected items",
+				children: /* @__PURE__ */ jsx(CircleXInverseIcon, {})
+			}) : /* @__PURE__ */ jsx(CaretButton, {
+				...getToggleButtonProps({ ref: caretButtonRef }),
+				size,
+				disabled: field.disabled,
+				"aria-label": `${isMenuOpen ? "Close" : "Open"} options menu`,
+				"aria-haspopup": "listbox",
+				children: /* @__PURE__ */ jsx(CaretDownIcon, {})
+			})
+		] }), /* @__PURE__ */ jsx(DropdownPortalWrapper, {
+			portal: embedded ? false : portal,
+			children: /* @__PURE__ */ jsxs(DropdownContainer, {
+				$isOpen: isMenuOpen,
+				$portal: embedded ? false : portal,
+				$embedded: embedded,
+				$top: dropdownPosition.top,
+				$left: dropdownPosition.left,
+				$width: dropdownPosition.width,
+				$minWidth: externalTrigger ? EXTERNAL_TRIGGER_DROPDOWN_MIN_WIDTH$1 : void 0,
+				...getMenuProps(),
+				"aria-multiselectable": "true",
+				children: [isMenuOpen && /* @__PURE__ */ jsx(SearchInputContainer, {
+					$embedded: embedded,
+					children: /* @__PURE__ */ jsx(InputGroup, {
+						leftIcon: embedded ? void 0 : /* @__PURE__ */ jsx(SearchIcon, {}),
+						size,
+						children: /* @__PURE__ */ jsx(SearchInput, {
+							$embedded: embedded,
+							id: searchInputId,
+							ref: searchInputRef,
+							placeholder: searchPlaceholder,
+							value: inputValue,
+							onChange: (e) => {
+								setInputValue(e.target.value);
+								onInputChange?.(e.target.value);
+							},
+							onKeyDown: handleSearchInputKeyDown,
+							onBlur: handleSearchInputBlur,
+							disabled: field.disabled,
+							"aria-label": embedded ? "Search options" : ariaLabel ?? searchPlaceholder,
+							size
+						})
+					})
+				}), /* @__PURE__ */ jsx(MultiSelectScrollableMenuList, {
+					$embedded: embedded,
+					tabIndex: -1,
+					ref: scrollableListRef,
+					children: isMenuOpen && /* @__PURE__ */ jsx(Fragment, { children: isOptionsLoading ? /* @__PURE__ */ jsx(LoadingContainer, { children: /* @__PURE__ */ jsx(Spinner, { size: "md" }) }) : navigableItems.length > 0 ? renderOptionsWithGroups({
+						options: optionsToRender,
+						filteredOptions: navigableItems,
+						renderOption,
+						virtualizer: virtualize ? virtualizer : void 0,
+						virtualRows: virtualize ? virtualRows : void 0
+					}) : /* @__PURE__ */ jsx(EmptyState, {
+						role: "status",
+						"aria-live": "polite",
+						size,
+						children: emptyStateMessage
+					}) })
+				})]
+			})
+		})]
+	});
+}
+const ComboboxMultiSelect = forwardRef(ComboboxMultiSelectComponent);
+//#endregion
+//#region components/Combobox/ComboboxSingleSelect.tsx
+const StyledMenuItem = styled(MenuItem)`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: ${Spacing[1]};
+  min-width: 0; /* Allow content to shrink below natural size */
+  width: 100%; /* Ensure full width of dropdown */
+  box-sizing: border-box;
+
+  /* Force all children to respect the container width */
+  > * {
+    width: 100%;
+    min-width: 0;
+    box-sizing: border-box;
+  }
+`;
+const ParentMenuItem = styled(MenuItem)`
+  ${IconContainer} {
+    margin-right: 0;
+  }
+`;
+const ParentChevron = styled.span`
+  display: inline-flex;
+  align-items: center;
+  color: ${Color.BorderIconSecondary};
+`;
+const EXTERNAL_TRIGGER_DROPDOWN_MIN_WIDTH = "240px";
+const SingleSelectScrollableMenuList = styled(ScrollableMenuList)`
+  ${({ $embedded }) => $embedded && css`
+      padding: 0;
+    `}
+`;
+const BackRow = styled.button`
+  display: flex;
+  align-items: center;
+  gap: ${({ $size }) => $size === "sm" ? Spacing[1] : Spacing[2]};
+  width: 100%;
+  padding: ${({ $size }) => $size === "sm" ? `${Spacing[1]} ${Spacing[2]}` : Spacing[2]};
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+  color: ${Color.TextPrimary};
+  ${({ $size }) => $size === "sm" ? Typography.TextSmall : Typography.TextMedium};
+
+  svg {
+    color: ${Color.BorderIconPrimary};
+  }
+`;
+const StickerDisplay = styled(Sticker)`
+  position: absolute;
+  left: ${Spacing[2]};
+  top: 50%;
+  transform: translateY(-50%);
+  pointer-events: none;
+  z-index: 1;
+`;
+const StickerComboboxInput = styled(ComboboxInput)`
+  /* Hide text when sticker is shown */
+  color: transparent;
+  caret-color: transparent;
+`;
+function ComboboxSingleSelectComponent({ size = "md", options, isOptionsLoading, value, onChange, onInputChange, placeholder = "Select an option...", emptyStateMessage = "No options found", disabled = false, hasWarning, hasError, id, labelId, "aria-label": ariaLabel, onOpenChange, portal = false, portalContainerRef: externalPortalContainerRef, trigger, embedded = false, ...props }, ref) {
+	const field = useFormField({
+		hasWarning,
+		hasError,
+		disabled,
+		inputId: id
+	});
+	const [inputValue, setInputValue] = useState("");
+	const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+	const [navigationPath, setNavigationPath] = useState([]);
+	const comboboxInputRef = useRef(null);
+	const internalContainerRef = useRef(null);
+	const pendingDescentRef = useRef(null);
+	const portalContainerRef = externalPortalContainerRef || internalContainerRef;
+	useImperativeHandle(ref, () => ({ ...comboboxInputRef.current }), []);
+	const isSearching = inputValue.trim() !== "";
+	const nestedOptions = useMemo(() => getOptionsAtPath(options, navigationPath), [options, navigationPath]);
+	const hasNestedGroups = useMemo(() => containsNestedGroup(options), [options]);
+	const navigableItems = useMemo(() => getNavigableItemsAtLevel(nestedOptions), [nestedOptions]);
+	const searchableLeaves = useMemo(() => {
+		if (!isSearching || !hasNestedGroups) return [];
+		return flattenLeafOptions(options).map(({ option }) => option);
+	}, [
+		options,
+		isSearching,
+		hasNestedGroups
+	]);
+	const searchableLeafFuse = useMemo(() => {
+		if (!isSearching || !hasNestedGroups) return null;
+		return new Fuse(flattenLeafOptions(options).map(({ option, breadcrumb }) => ({
+			option,
+			label: String(option.label),
+			description: option.description,
+			ancestors: breadcrumb.join(" ")
+		})), {
+			shouldSort: false,
+			threshold: 0,
+			ignoreLocation: true,
+			minMatchCharLength: 1,
+			keys: [
+				"label",
+				"description",
+				"ancestors"
+			]
+		});
+	}, [
+		options,
+		isSearching,
+		hasNestedGroups
+	]);
+	const renderSource = isSearching ? hasNestedGroups ? searchableLeaves : options : nestedOptions;
+	const standardFilteredOptions = useFilteredOptions(renderSource, inputValue);
+	const filteredOptions = useMemo(() => {
+		if (!isSearching || !hasNestedGroups || searchableLeafFuse == null) return standardFilteredOptions;
+		if (inputValue === "") return searchableLeaves;
+		return Array.from(new Set(searchableLeafFuse.search(inputValue).map(({ item }) => item.option)).values());
+	}, [
+		isSearching,
+		hasNestedGroups,
+		searchableLeafFuse,
+		inputValue,
+		searchableLeaves,
+		standardFilteredOptions
+	]);
+	const downshiftItems = useMemo(() => {
+		if (isSearching) return filteredOptions.map((option) => ({
+			kind: "leaf",
+			option
+		}));
+		return navigableItems.filter((item) => item.kind === "group" || filteredOptions.some((f) => f.value === item.option.value));
+	}, [
+		isSearching,
+		filteredOptions,
+		navigableItems
+	]);
+	const allLeaves = useMemo(() => flattenLeafOptions(options), [options]);
+	const flatOptionsForFallback = useMemo(() => flattenOptions(options), [options]);
+	const selectedOption = allLeaves.find(({ option }) => option.value === value)?.option ?? flatOptionsForFallback.find((option) => option.value === value) ?? null;
+	const selectedNavigableItem = useMemo(() => selectedOption ? {
+		kind: "leaf",
+		option: selectedOption
+	} : null, [selectedOption?.value, selectedOption?.label]);
+	const itemToString = useCallback((item) => {
+		if (!item) return "";
+		return item.kind === "leaf" ? item.option.label : item.group.label;
+	}, []);
+	const handleAscend = useCallback(() => {
+		setNavigationPath((prev) => prev.length > 0 ? prev.slice(0, -1) : prev);
+		setInputValue("");
+	}, []);
+	const handleDescend = useCallback((groupLabel) => {
+		setNavigationPath((prev) => [...prev, groupLabel]);
+		setInputValue("");
+	}, []);
+	const { isOpen, getToggleButtonProps, getMenuProps, getInputProps, getItemProps, highlightedIndex, setHighlightedIndex, openMenu } = useCombobox({
+		items: downshiftItems,
+		itemToString,
+		isOpen: embedded ? true : void 0,
+		selectedItem: isDropdownOpen ? null : selectedNavigableItem,
+		inputValue,
+		onInputValueChange({ inputValue: newInputValue }) {
+			if (newInputValue === "" && !embedded && trigger == null) onChange?.(null);
+			setInputValue(newInputValue || "");
+			onInputChange?.(newInputValue || "");
+		},
+		onIsOpenChange({ isOpen: newIsOpen }) {
+			setIsDropdownOpen(newIsOpen);
+			if (newIsOpen) {
+				if (selectedOption || value && inputValue === flatOptionsForFallback.find((opt) => opt.value === value)?.label) setInputValue("");
+			} else setInputValue(selectedOption?.label || "");
+		},
+		onSelectedItemChange: ({ selectedItem: newSelectedItem }) => {
+			if (newSelectedItem == null || newSelectedItem.kind !== "leaf") return;
+			const leaf = newSelectedItem.option;
+			onChange?.(leaf.value);
+			setInputValue(leaf.label);
+		},
+		stateReducer(state, actionAndChanges) {
+			const { changes, type } = actionAndChanges;
+			switch (type) {
+				case useCombobox.stateChangeTypes.InputBlur: return {
+					...changes,
+					selectedItem: state.selectedItem
+				};
+				case useCombobox.stateChangeTypes.ItemClick:
+				case useCombobox.stateChangeTypes.InputKeyDownEnter: {
+					const candidate = changes.selectedItem;
+					if (candidate && candidate.kind === "group") {
+						pendingDescentRef.current = candidate.group.label;
+						return {
+							...changes,
+							selectedItem: state.selectedItem,
+							isOpen: true
+						};
+					}
+					return changes;
+				}
+				default: return changes;
+			}
+		}
+	});
+	useEffect(() => {
+		if (pendingDescentRef.current != null) {
+			const target = pendingDescentRef.current;
+			pendingDescentRef.current = null;
+			handleDescend(target);
+		}
+	});
+	useEffect(() => {
+		if (!isOpen && !embedded && navigationPath.length > 0) setNavigationPath([]);
+	}, [
+		embedded,
+		isOpen,
+		navigationPath.length
+	]);
+	const renderLeaf = useCallback((option, currentIndex) => {
+		const isHighlighted = highlightedIndex === currentIndex;
+		const isSelected = selectedOption?.value === option.value;
+		const itemProps = getItemProps({
+			item: {
+				kind: "leaf",
+				option
+			},
+			index: currentIndex,
+			"aria-selected": isSelected
+		});
+		const labelContent = option.labelStickerVariant ? /* @__PURE__ */ jsx(Sticker, {
+			variant: option.labelStickerVariant,
+			children: option.label
+		}) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(OptionLabel, {
+			title: option.label,
+			$labelStyle: option.PLEASE_DO_NOT_USE_labelFontStyle,
+			children: option.label
+		}), option.description && /* @__PURE__ */ jsx(Description, {
+			title: option.description,
+			children: option.description
+		})] });
+		return /* @__PURE__ */ jsx(StyledMenuItem, {
+			...itemProps,
+			focused: isHighlighted,
+			selected: isSelected,
+			size,
+			tabIndex: -1,
+			children: labelContent
+		}, `leaf-${String(option.value)}-${currentIndex}`);
+	}, [
+		highlightedIndex,
+		selectedOption,
+		getItemProps,
+		size
+	]);
+	const renderNestedGroupRow = useCallback((group, currentIndex) => {
+		const isHighlighted = highlightedIndex === currentIndex;
+		return /* @__PURE__ */ jsx(ParentMenuItem, {
+			...getItemProps({
+				item: {
+					kind: "group",
+					group
+				},
+				index: currentIndex
+			}),
+			"aria-haspopup": "menu",
+			focused: isHighlighted,
+			size,
+			tabIndex: -1,
+			stretchLabel: true,
+			suffixIcon: /* @__PURE__ */ jsx(ParentChevron, {
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ jsx(ChevronRightIcon, {})
+			}),
+			children: /* @__PURE__ */ jsx(OptionLabel, {
+				title: group.label,
+				children: group.label
+			})
+		}, `group-${group.label}-${currentIndex}`);
+	}, [
+		highlightedIndex,
+		getItemProps,
+		size
+	]);
+	const renderNestedLevel = useCallback((items) => {
+		let navIndex = -1;
+		const walk = (node, key) => {
+			if (isOptionGroup(node)) {
+				if (node.nested) {
+					if (!downshiftItems.some((i) => i.kind === "group" && i.group === node)) return null;
+					navIndex++;
+					return /* @__PURE__ */ jsx(Fragment$1, { children: renderNestedGroupRow(node, navIndex) }, key);
+				}
+				const childNodes = [];
+				for (let i = 0; i < node.options.length; i++) {
+					const rendered = walk(node.options[i], `${key}-${i}`);
+					if (rendered != null) childNodes.push(rendered);
+				}
+				if (childNodes.length === 0) return null;
+				return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(MenuHeading, { children: node.label }), childNodes] }, key);
+			}
+			if (!downshiftItems.some((i) => i.kind === "leaf" && i.option === node)) return null;
+			navIndex++;
+			return renderLeaf(node, navIndex);
+		};
+		return items.map((item, idx) => walk(item, `item-${idx}`));
+	}, [
+		downshiftItems,
+		renderLeaf,
+		renderNestedGroupRow
+	]);
+	const renderOption = useCallback((option, currentIndex) => renderLeaf(option, currentIndex), [renderLeaf]);
+	const isMenuOpen = isOpen;
+	const dropdownPosition = useDropdownPosition(portalContainerRef, isMenuOpen, embedded ? false : portal);
+	const handleKeyDown = useCallback((event) => {
+		if (event.key === "Enter" && !isMenuOpen) {
+			openMenu();
+			return;
+		}
+		if (!isMenuOpen || isSearching) return;
+		if (event.key === "ArrowRight") {
+			const highlighted = downshiftItems[highlightedIndex];
+			if (highlighted && highlighted.kind === "group") {
+				event.preventDefault();
+				handleDescend(highlighted.group.label);
+			}
+			return;
+		}
+		if (event.key === "ArrowLeft" && navigationPath.length > 0) {
+			const input = event.currentTarget;
+			if ((input.selectionStart ?? 0) === 0 && (input.selectionEnd ?? 0) === 0) {
+				event.preventDefault();
+				handleAscend();
+			}
+		}
+	}, [
+		isMenuOpen,
+		isSearching,
+		downshiftItems,
+		highlightedIndex,
+		navigationPath.length,
+		openMenu,
+		handleDescend,
+		handleAscend
+	]);
+	useEffect(() => {
+		onOpenChange?.(isMenuOpen);
+	}, [isMenuOpen, onOpenChange]);
+	useEffect(() => {
+		if (!isMenuOpen) setInputValue(selectedOption?.label || "");
+	}, [selectedOption, isMenuOpen]);
+	const selectedLabel = selectedOption?.label || "";
+	useEffect(() => {
+		if (embedded) setInputValue(selectedLabel);
+	}, [selectedLabel, embedded]);
+	useEffect(() => {
+		if (isMenuOpen && downshiftItems.length > 0) {
+			if (highlightedIndex === -1 || highlightedIndex >= downshiftItems.length) setHighlightedIndex(0);
+		}
+	}, [
+		downshiftItems,
+		isMenuOpen,
+		highlightedIndex,
+		setHighlightedIndex
+	]);
+	const displayValue = isMenuOpen ? inputValue : selectedOption?.label || "";
+	const hasSticker = !isMenuOpen && selectedOption?.labelStickerVariant;
+	const InputComponent = hasSticker ? StickerComboboxInput : ComboboxInput;
+	const showBackRow = isMenuOpen && navigationPath.length > 0 && !isSearching;
+	const externalTrigger = (() => {
+		if (embedded || trigger == null || !isValidElement(trigger)) return null;
+		const triggerProps = trigger.props;
+		return cloneElement(trigger, getToggleButtonProps({
+			...triggerProps,
+			disabled: field.disabled || Boolean(triggerProps.disabled)
+		}));
+	})();
+	const searchInputProps = getInputProps({
+		ref: comboboxInputRef,
+		id: field.inputId,
+		placeholder: "Search…",
+		disabled: field.disabled,
+		"aria-label": embedded ? "Search options" : ariaLabel ?? "Search options",
+		"aria-labelledby": embedded ? void 0 : labelId,
+		"aria-describedby": [field.helperTextId, field.hasWarning ? field.warningTextId : null].filter(Boolean).join(" ") || void 0,
+		"aria-errormessage": field.hasError ? field.errorTextId : void 0,
+		"aria-invalid": field.hasError,
+		onKeyDown: handleKeyDown
+	});
+	return /* @__PURE__ */ jsxs(Container, {
+		...props,
+		ref: internalContainerRef,
+		children: [embedded ? null : externalTrigger != null ? externalTrigger : /* @__PURE__ */ jsxs(InputContainer, { children: [
+			hasSticker && /* @__PURE__ */ jsx(StickerDisplay, {
+				variant: selectedOption.labelStickerVariant,
+				children: selectedOption.label
+			}),
+			/* @__PURE__ */ jsx(InputComponent, {
+				...getInputProps({
+					...props,
+					ref: comboboxInputRef,
+					id: field.inputId,
+					placeholder,
+					disabled: field.disabled,
+					"aria-label": ariaLabel,
+					"aria-labelledby": labelId,
+					"aria-describedby": [field.helperTextId, field.hasWarning ? field.warningTextId : null].filter(Boolean).join(" ") || void 0,
+					"aria-errormessage": field.hasError ? field.errorTextId : void 0,
+					"aria-invalid": field.hasError,
+					onKeyDown: handleKeyDown
+				}),
+				size,
+				$isOpen: isMenuOpen,
+				hasWarning: field.hasWarning,
+				hasError: field.hasError,
+				value: displayValue,
+				$selectedItemStyle: selectedOption?.PLEASE_DO_NOT_USE_labelFontStyle
+			}),
+			/* @__PURE__ */ jsx(CaretButton, {
+				...getToggleButtonProps(),
+				size,
+				disabled: field.disabled,
+				"aria-label": `${isMenuOpen ? "Close" : "Open"} options menu`,
+				"aria-haspopup": "listbox",
+				children: /* @__PURE__ */ jsx(CaretDownIcon, {})
+			})
+		] }), /* @__PURE__ */ jsx(DropdownPortalWrapper, {
+			portal: embedded ? false : portal,
+			children: /* @__PURE__ */ jsxs(DropdownContainer, {
+				$isOpen: isMenuOpen,
+				$portal: embedded ? false : portal,
+				$embedded: embedded,
+				$top: dropdownPosition.top,
+				$left: dropdownPosition.left,
+				$width: dropdownPosition.width,
+				$minWidth: externalTrigger ? EXTERNAL_TRIGGER_DROPDOWN_MIN_WIDTH : void 0,
+				...getMenuProps(),
+				children: [(externalTrigger || embedded) && /* @__PURE__ */ jsx(SearchInputContainer, {
+					$embedded: embedded,
+					children: /* @__PURE__ */ jsx(InputGroup, {
+						leftIcon: embedded ? void 0 : /* @__PURE__ */ jsx(SearchIcon, {}),
+						size,
+						children: /* @__PURE__ */ jsx(SearchInput, {
+							$embedded: embedded,
+							...searchInputProps,
+							size,
+							hasWarning: field.hasWarning,
+							hasError: field.hasError,
+							value: inputValue,
+							autoComplete: "off"
+						})
+					})
+				}), /* @__PURE__ */ jsx(SingleSelectScrollableMenuList, {
+					$embedded: embedded,
+					tabIndex: -1,
+					children: isMenuOpen && /* @__PURE__ */ jsxs(Fragment, { children: [showBackRow && /* @__PURE__ */ jsxs(BackRow, {
+						type: "button",
+						tabIndex: -1,
+						onMouseDown: (event) => {
+							event.preventDefault();
+							handleAscend();
+						},
+						onClick: (event) => {
+							if (event.detail === 0) handleAscend();
+						},
+						"aria-label": "Back to previous menu",
+						$size: size,
+						children: [/* @__PURE__ */ jsx(ArrowLeftIcon, {
+							"aria-hidden": "true",
+							size: size === "sm" ? 12 : 16
+						}), /* @__PURE__ */ jsx("span", { children: "Back" })]
+					}), isOptionsLoading ? /* @__PURE__ */ jsx(LoadingContainer, { children: /* @__PURE__ */ jsx(Spinner, { size: "md" }) }) : downshiftItems.length > 0 ? hasNestedGroups && !isSearching ? renderNestedLevel(nestedOptions) : renderOptionsWithGroups({
+						options: renderSource,
+						filteredOptions,
+						renderOption
+					}) : /* @__PURE__ */ jsx(EmptyState, {
+						role: "status",
+						"aria-live": "polite",
+						size,
+						children: emptyStateMessage
+					})] })
+				})]
+			})
+		})]
+	});
+}
+const ComboboxSingleSelect = forwardRef(ComboboxSingleSelectComponent);
+//#endregion
+//#region components/Combobox/Combobox.tsx
+function ComboboxComponent(props, ref) {
+	if (props.multiple) return /* @__PURE__ */ jsx(ComboboxMultiSelect, {
+		ref,
+		...props
+	});
+	else return /* @__PURE__ */ jsx(ComboboxSingleSelect, {
+		ref,
+		...props
+	});
+}
+const Combobox = forwardRef(ComboboxComponent);
+//#endregion
+export { CaretButton as n, flattenOptions as r, Combobox as t };
+
+//# sourceMappingURL=Combobox-B_-swcix.mjs.map