@persona/design-system 0.1.8 → 0.2.0

package/dist/Combobox-COXvmxlM.cjs

@@ -1,1877 +0,0 @@
-const require_chunk = require("./chunk-CKQMccvm.cjs");
-const require_mixins_focus = require("./mixins/focus.cjs");
-const require_Stack = require("./Stack-UeifHn3c.cjs");
-const require_Text = require("./Text-G9QmYf0P.cjs");
-const require_lib_useOutsideClick = require("./lib/useOutsideClick.cjs");
-const require_lib_zindex = require("./lib/zindex.cjs");
-const require_IconButton = require("./IconButton-nlgjJQCS.cjs");
-const require_Menu = require("./Menu-t2q8NrV0.cjs");
-const require_useFormField = require("./useFormField-BZlArnsI.cjs");
-const require_Input = require("./Input-OJPQ07TW.cjs");
-const require_components_Input_index = require("./components/Input/index.cjs");
-const require_Spinner = require("./Spinner-B6bx70yR.cjs");
-const require_Sticker = require("./Sticker-CIoseh9f.cjs");
-const require_Checkbox = require("./Checkbox-CmCujC1W.cjs");
-let _persona_design_tokens = require("@persona/design-tokens");
-let styled_components = require("styled-components");
-styled_components = require_chunk.__toESM(styled_components);
-let react_jsx_runtime = require("react/jsx-runtime");
-let react = require("react");
-let _persona_icons = require("@persona/icons");
-let fuse_js = require("fuse.js");
-fuse_js = require_chunk.__toESM(fuse_js);
-let react_dom = require("react-dom");
-let _tanstack_react_virtual = require("@tanstack/react-virtual");
-let downshift = require("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 (0, react.useMemo)(() => {
-		const flatOptions = flattenOptions(options);
-		const fuse = new fuse_js.default(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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(require_Menu.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__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Menu.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_components.default.div`
-  display: flex;
-  position: relative;
-  width: 100%;
-`;
-const InputContainer = styled_components.default.div`
-  position: relative;
-  width: 100%;
-`;
-const ComboboxInput = (0, styled_components.default)(require_components_Input_index.default)`
-  padding-right: ${({ size }) => size === "sm" ? _persona_design_tokens.Spacing[5] : _persona_design_tokens.Spacing[6]}; /* Space for caret icon */
-
-  ${({ $isOpen }) => $isOpen && styled_components.css`
-      ${require_mixins_focus.focusStyle}
-    `}
-
-  /* Apply custom font family from selected item when dropdown is closed */
-  ${({ $selectedItemStyle, $isOpen }) => !$isOpen && $selectedItemStyle?.fontFamily && styled_components.css`
-      && {
-        font-family: ${$selectedItemStyle.fontFamily};
-      }
-    `}
-`;
-const CaretButton = (0, styled_components.default)(require_IconButton.Button).attrs({ width: "icon" })`
-  background-color: transparent;
-  border: none;
-  color: ${_persona_design_tokens.Color.BorderIconPrimary};
-
-  &:hover:not(:disabled),
-  &:active:not(:disabled) {
-    color: ${_persona_design_tokens.Color.BorderIconPrimary};
-    background-color: transparent;
-    border: none;
-  }
-
-  &:disabled {
-    color: ${_persona_design_tokens.Color.BorderIconDisabled};
-    background-color: transparent;
-    border: none;
-  }
-
-  position: absolute;
-  right: 0;
-  top: 0;
-`;
-const DropdownContainer = (0, styled_components.default)(require_Menu.FloatingCard)`
-  ${({ $portal, $embedded, $top, $left, $width }) => $embedded ? styled_components.css`
-          position: static;
-          width: 100%;
-          min-width: 0;
-          border: 0;
-          border-radius: 0;
-          box-shadow: none;
-          background: transparent;
-          margin: 0;
-        ` : $portal ? styled_components.css`
-          position: fixed;
-          top: ${$top != null ? `${$top}px` : "0"};
-          left: ${$left != null ? `${$left}px` : "0"};
-          width: ${$width != null ? `${$width}px` : "auto"};
-        ` : styled_components.css`
-          position: absolute;
-          top: calc(100% + ${_persona_design_tokens.Spacing[2]});
-          left: 0;
-          right: 0;
-          width: 100%;
-        `}
-
-  ${({ $minWidth }) => $minWidth && styled_components.css`
-      min-width: ${$minWidth};
-    `}
-
-  display: flex;
-  flex-direction: column;
-  ${({ $embedded }) => $embedded && styled_components.css`
-      gap: ${_persona_design_tokens.Spacing[2]};
-    `}
-  overflow: ${({ $embedded }) => $embedded ? "visible" : "hidden"}; /* Prevent floating menu overflow while preserving embedded focus rings */
-  box-sizing: border-box;
-  z-index: ${require_lib_zindex.Z_INDICES.modalDropdown}; /* Ensure portal dropdown appears above other content */
-
-  ${({ $isOpen }) => !$isOpen && styled_components.css`
-      display: none;
-    `}
-`;
-const ScrollableMenuList = (0, styled_components.default)(require_Menu.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_components.default.div`
-  flex-shrink: 0;
-  ${({ $embedded }) => $embedded ? styled_components.css`
-          padding: 0;
-        ` : styled_components.css`
-          padding: ${_persona_design_tokens.Spacing[1]} ${_persona_design_tokens.Spacing[2]};
-          border-bottom: 1px solid ${({ theme }) => theme.color.border.primary};
-        `}
-`;
-const SearchInput = (0, styled_components.default)(require_components_Input_index.default)`
-  ${({ $embedded }) => !$embedded && styled_components.css`
-      /* Borderless strip inside floating menus */
-      border: none;
-      padding-top: ${_persona_design_tokens.Spacing[1]};
-      padding-bottom: ${_persona_design_tokens.Spacing[1]};
-
-      &:focus {
-        outline: none !important;
-      }
-    `}
-`;
-const EmptyState = (0, styled_components.default)(require_Text.Paragraph).attrs(({ size }) => ({ size }))`
-  padding: 0 ${({ size }) => size === "sm" ? _persona_design_tokens.Spacing[1] : _persona_design_tokens.Spacing[2]};
-  color: ${({ theme }) => theme.color.text.tertiary};
-  ${({ theme }) => theme.text.paragraph.md};
-`;
-const LoadingContainer = styled_components.default.div`
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 136px;
-  padding: ${_persona_design_tokens.Spacing[3]};
-`;
-const FooterActionContainer = styled_components.default.div`
-  flex-shrink: 0;
-  padding-top: ${_persona_design_tokens.Spacing[1]};
-`;
-/**
-* Action button rendered at the bottom of the dropdown, below the option list.
-* Kept out of downshift's `items` list and out of the Tab order, mirroring the
-* `BackRow` affordance: `onMouseDown` preventDefault beats downshift's
-* blur-on-mousedown so the dropdown stays open on click. Keyboard users reach it
-* by arrowing past the last option (the parent drives `isHighlighted` and points
-* the input's `aria-activedescendant` at this button via `id`).
-*/
-function FooterActionRow({ action, size, id, isHighlighted = false }) {
-	const buttonRef = (0, react.useRef)(null);
-	(0, react.useEffect)(() => {
-		if (isHighlighted) buttonRef.current?.scrollIntoView({ block: "nearest" });
-	}, [isHighlighted]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FooterActionContainer, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_IconButton.Button, {
-		ref: buttonRef,
-		id,
-		type: "button",
-		variant: "basic",
-		width: "full",
-		size,
-		tabIndex: -1,
-		active: isHighlighted,
-		onMouseDown: (e) => {
-			e.preventDefault();
-			action.onClick();
-		},
-		onClick: (e) => {
-			if (e.detail === 0) action.onClick();
-		},
-		children: action.label
-	}) });
-}
-const OptionLabel = styled_components.default.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 && styled_components.css`
-      font-family: ${$labelStyle.fontFamily};
-    `}
-`;
-const Description = styled_components.default.p`
-  ${_persona_design_tokens.Typography.TextSmall};
-  color: ${_persona_design_tokens.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(${_persona_design_tokens.Typography.TextSmall.lineHeight} * 3); /* line-height * 3 lines */
-`;
-function useDropdownPosition(portalContainerRef, isOpen, portal) {
-	const [position, setPosition] = (0, react.useState)({
-		top: 0,
-		left: 0,
-		width: 0
-	});
-	(0, react.useEffect)(() => {
-		if (!portal || !isOpen || !portalContainerRef.current) return;
-		const updatePosition = () => {
-			const rect = portalContainerRef.current.getBoundingClientRect();
-			const spacing = parseInt(_persona_design_tokens.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 = (0, react.useRef)(null);
-	(0, react.useEffect)(() => {
-		if (portal) portalRoot.current = document.body;
-	}, [portal]);
-	if (portal && portalRoot.current) return (0, react_dom.createPortal)(/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-		id: "combobox-dropdown-portal-wrapper",
-		"data-react-aria-top-layer": "true",
-		children
-	}), portalRoot.current);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children });
-}
-//#endregion
-//#region components/Combobox/useComboboxFooterAction.ts
-/**
-* Shared keyboard-navigation logic for the Combobox `footerAction` button, used
-* by both the single- and multi-select variants. The footer is a real
-* `<button>` outside downshift's item list, so it needs a parallel highlight
-* flag (`isFooterHighlighted`) reached by arrowing past the last option or up
-* from the first option, rather than a downshift `highlightedIndex`. DOM focus
-* stays on the input; the footer is never a Tab stop (mirrors the `BackRow`
-* affordance).
-*/
-function useComboboxFooterAction({ footerAction, isOptionsLoading, itemCount, isMenuOpen, inputValue, highlightedIndex, setHighlightedIndex, inputId }) {
-	const [isFooterHighlighted, setIsFooterHighlighted] = (0, react.useState)(false);
-	const footerActionId = `${inputId}-footer-action`;
-	const showFooterAction = Boolean(footerAction) && !isOptionsLoading && itemCount > 0;
-	(0, react.useEffect)(() => {
-		if (!isMenuOpen) setIsFooterHighlighted(false);
-	}, [isMenuOpen]);
-	(0, react.useEffect)(() => {
-		setIsFooterHighlighted(false);
-	}, [inputValue]);
-	(0, react.useEffect)(() => {
-		if (!showFooterAction) setIsFooterHighlighted(false);
-	}, [showFooterAction]);
-	(0, react.useEffect)(() => {
-		if (highlightedIndex >= 0) setIsFooterHighlighted(false);
-	}, [highlightedIndex]);
-	const clearFooterHighlight = (0, react.useCallback)(() => setIsFooterHighlighted(false), []);
-	return {
-		isFooterHighlighted,
-		footerActionId,
-		showFooterAction,
-		handleFooterKeyDown: (0, react.useCallback)((event) => {
-			if (!showFooterAction) return false;
-			const nativeEvent = event.nativeEvent;
-			const consume = () => {
-				event.preventDefault();
-				nativeEvent.preventDownshiftDefault = true;
-			};
-			if (!isFooterHighlighted && event.key === "ArrowDown" && highlightedIndex === itemCount - 1) {
-				consume();
-				setIsFooterHighlighted(true);
-				setHighlightedIndex(-1);
-				return true;
-			}
-			if (!isFooterHighlighted && event.key === "ArrowUp" && highlightedIndex === 0) {
-				consume();
-				setIsFooterHighlighted(true);
-				setHighlightedIndex(-1);
-				return true;
-			}
-			if (isFooterHighlighted) {
-				if (event.key === "ArrowUp") {
-					consume();
-					setIsFooterHighlighted(false);
-					setHighlightedIndex(itemCount - 1);
-					return true;
-				}
-				if (event.key === "ArrowDown") {
-					consume();
-					setIsFooterHighlighted(false);
-					setHighlightedIndex(0);
-					return true;
-				}
-				if (event.key === "Enter") {
-					consume();
-					footerAction?.onClick();
-					return true;
-				}
-			}
-			return false;
-		}, [
-			showFooterAction,
-			isFooterHighlighted,
-			highlightedIndex,
-			itemCount,
-			footerAction,
-			setHighlightedIndex
-		]),
-		clearFooterHighlight
-	};
-}
-//#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] = (0, react.useState)(selectedItems.length);
-	(0, react.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 = (0, styled_components.default)(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 = (0, styled_components.default)(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 && styled_components.css`
-      padding: 0;
-    `}
-`;
-const SelectedItemsContainer = styled_components.default.div`
-  position: relative; /* Establish positioning context */
-  box-sizing: border-box;
-  min-height: ${({ $size }) => $size === "sm" ? _persona_design_tokens.Spacing[5] : _persona_design_tokens.Spacing[6]};
-  max-height: ${({ $truncate, $size }) => $truncate ? $size === "sm" ? _persona_design_tokens.Spacing[5] : _persona_design_tokens.Spacing[6] : "none"};
-  padding-left: ${_persona_design_tokens.Spacing[2]};
-  padding-right: ${({ $size }) => $size === "sm" ? _persona_design_tokens.Spacing[5] : _persona_design_tokens.Spacing[6]}; /* Leave space for caret button.  */
-  padding-top: ${({ $size }) => $size === "sm" ? _persona_design_tokens.Spacing[1] : _persona_design_tokens.Spacing[2]};
-  padding-bottom: ${({ $size }) => $size === "sm" ? _persona_design_tokens.Spacing[1] : _persona_design_tokens.Spacing[2]};
-  display: flex;
-  flex-wrap: ${({ $truncate }) => $truncate ? "nowrap" : "wrap"};
-  gap: ${_persona_design_tokens.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_components.default.div`
-  display: flex;
-  flex-wrap: nowrap;
-  gap: ${_persona_design_tokens.Spacing[1]};
-  overflow: hidden;
-  flex: 1;
-  min-width: 0; /* Allow shrinking below content size */
-  pointer-events: none;
-`;
-const TruncatedSticker = (0, styled_components.default)(require_Sticker.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 = (0, styled_components.default)(require_Sticker.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_components.default.div`
-  position: absolute;
-  top: 0;
-  left: 0;
-  visibility: hidden;
-  display: flex;
-  flex-wrap: nowrap;
-  gap: ${_persona_design_tokens.Spacing[1]};
-  pointer-events: none;
-  overflow: hidden;
-  max-width: 100%;
-`;
-const StyledMenuItem$1 = (0, styled_components.default)(require_Menu.MenuItem)`
-  /* These heights should add up to 24 and 32 respectively and the content is 20 already */
-  padding: ${({ $size }) => $size === "sm" ? `2px ${_persona_design_tokens.Spacing[2]}` : `6px ${_persona_design_tokens.Spacing[2]}`};
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: ${_persona_design_tokens.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_components.default.span`
-  color: ${_persona_design_tokens.Color.TextPrimary};
-  ${({ $size }) => $size === "sm" ? _persona_design_tokens.Typography.TextSmall : _persona_design_tokens.Typography.TextMedium};
-  display: flex;
-  flex-direction: column;
-  gap: ${_persona_design_tokens.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, footerAction, ...props }, ref) {
-	const options = (0, react.useMemo)(() => containsNestedGroup(rawOptions) ? inlineNestedGroups(rawOptions) : rawOptions, [rawOptions]);
-	const field = require_useFormField.useFormField({
-		hasWarning,
-		hasError,
-		disabled,
-		inputId: id
-	});
-	const [inputValue, setInputValue] = (0, react.useState)("");
-	const searchInputRef = (0, react.useRef)(null);
-	const comboboxInputRef = (0, react.useRef)(null);
-	const caretButtonRef = (0, react.useRef)(null);
-	const comboboxContainerRef = (0, react.useRef)(null);
-	const scrollableListRef = (0, react.useRef)(null);
-	const selectedItemsContainerRef = (0, react.useRef)(null);
-	const measurementStickerRefs = (0, react.useRef)([]);
-	const measurementTruncatorRef = (0, react.useRef)(null);
-	const portalContainerRef = externalPortalContainerRef || comboboxContainerRef;
-	const flatOptions = (0, react.useMemo)(() => flattenOptions(options), [options]);
-	const selectedItems = flatOptions.filter((option) => values.includes(option.value));
-	(0, react.useEffect)(() => {
-		measurementStickerRefs.current = measurementStickerRefs.current.slice(0, selectedItems.length);
-	}, [selectedItems.length]);
-	const visibleCount = useTruncation(selectedItems, measurementStickerRefs, measurementTruncatorRef, selectedItemsContainerRef, truncate);
-	(0, react.useImperativeHandle)(ref, () => ({
-		...comboboxInputRef.current,
-		focusSearchInput: () => {
-			if (searchInputRef.current) searchInputRef.current.focus();
-		}
-	}), []);
-	const filteredOptions = useFilteredOptions(options, inputValue);
-	const isGrouped = (0, react.useMemo)(() => options.some(isOptionGroup), [options]);
-	const optionsWithSelectedFirstInGroups = (0, react.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 = (0, react.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 = (0, react.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 = (0, react.useRef)(/* @__PURE__ */ new Map());
-	const virtualRows = (0, react.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 = (0, _tanstack_react_virtual.useVirtualizer)({
-		count: virtualRows.length,
-		getScrollElement: () => scrollableListRef.current,
-		estimateSize: () => size === "sm" ? 24 : 32,
-		overscan: 5
-	});
-	const itemToString = (0, react.useCallback)((item) => {
-		return item ? item.label : "";
-	}, []);
-	const getOptionId = (0, react.useCallback)((index) => `${field.inputId}-option-${index}`, [field.inputId]);
-	const { addSelectedItem, getSelectedItemProps, getDropdownProps, removeSelectedItem, reset, setSelectedItems } = (0, downshift.useMultipleSelection)({
-		selectedItems,
-		onStateChange: ({ selectedItems: newSelectedItems, type }) => {
-			switch (type) {
-				case downshift.useMultipleSelection.stateChangeTypes.SelectedItemKeyDownBackspace:
-				case downshift.useMultipleSelection.stateChangeTypes.SelectedItemKeyDownDelete:
-				case downshift.useMultipleSelection.stateChangeTypes.DropdownKeyDownBackspace:
-				case downshift.useMultipleSelection.stateChangeTypes.FunctionRemoveSelectedItem:
-				case downshift.useMultipleSelection.stateChangeTypes.FunctionAddSelectedItem:
-				case downshift.useMultipleSelection.stateChangeTypes.FunctionSetSelectedItems:
-					if (onValuesChange && newSelectedItems) {
-						const newValues = newSelectedItems.map((item) => item.value);
-						onValuesChange?.(newValues);
-					}
-					break;
-				case downshift.useMultipleSelection.stateChangeTypes.FunctionReset:
-					if (onValuesChange) onValuesChange([]);
-					break;
-				default: break;
-			}
-		}
-	});
-	const selectedState = (0, react.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 = (0, react.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 } = (0, downshift.useCombobox)({
-		items: navigableItems,
-		itemToString,
-		getItemId: getOptionId,
-		isOpen: embedded ? true : void 0,
-		selectedItem: null,
-		initialHighlightedIndex: 0,
-		defaultHighlightedIndex: 0,
-		onIsOpenChange({ isOpen: newIsOpen }) {
-			if (newIsOpen && inputValue !== "") setInputValue("");
-		},
-		onHighlightedIndexChange: ({ highlightedIndex, type }) => {
-			if (virtualize && type !== downshift.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 downshift.useCombobox.stateChangeTypes.InputChange:
-					setInputValue(newInputValue || "");
-					onInputChange?.(newInputValue || "");
-					break;
-				case downshift.useCombobox.stateChangeTypes.InputKeyDownEnter:
-				case downshift.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 downshift.useCombobox.stateChangeTypes.ItemClick:
-				case downshift.useCombobox.stateChangeTypes.InputKeyDownEnter: return {
-					...changes,
-					isOpen: true,
-					inputValue: "",
-					highlightedIndex: state.highlightedIndex
-				};
-				case downshift.useCombobox.stateChangeTypes.InputBlur:
-					if (state.isOpen) return {
-						...changes,
-						isOpen: true
-					};
-					return changes;
-				case downshift.useCombobox.stateChangeTypes.InputClick:
-				case downshift.useCombobox.stateChangeTypes.ToggleButtonClick: return changes;
-				default: return changes;
-			}
-		}
-	});
-	const renderOption = (0, react.useCallback)((option, currentIndex) => {
-		const isHighlighted = highlightedIndex === currentIndex;
-		const isSelected = values.includes(option.value);
-		if (option.value === SELECT_ALL_VALUE) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledMenuItem$1, {
-			...getItemProps({
-				item: option,
-				index: currentIndex
-			}),
-			focused: isHighlighted,
-			selected: false,
-			"aria-labelledby": `combobox-option-label-${currentIndex}`,
-			$size: size,
-			tabIndex: -1,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Stack.Stack, {
-				direction: "horizontal",
-				align: "center",
-				spacing: _persona_design_tokens.Spacing[2],
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Checkbox.Checkbox, {
-					checked: selectedState.allSelected,
-					indeterminate: selectedState.indeterminate,
-					tabIndex: -1
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CheckboxLabel, {
-					id: `combobox-option-label-${currentIndex}`,
-					$size: size,
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(OptionLabel, { children: option.label })
-				})]
-			})
-		}, "select-all");
-		return /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)(require_Stack.Stack, {
-				direction: "horizontal",
-				align: "center",
-				spacing: _persona_design_tokens.Spacing[2],
-				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Checkbox.Checkbox, {
-					checked: isSelected,
-					tabIndex: -1
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CheckboxLabel, {
-					id: `combobox-option-label-${currentIndex}`,
-					$size: size,
-					children: option.labelStickerVariant ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Sticker.Sticker, {
-						variant: option.labelStickerVariant,
-						children: option.label
-					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(OptionLabel, {
-						title: option.label,
-						$labelStyle: option.PLEASE_DO_NOT_USE_labelFontStyle,
-						children: option.label
-					}), option.description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Description, {
-						title: option.description,
-						children: option.description
-					})] })
-				})]
-			})
-		}, `${option.value}-${currentIndex}`);
-	}, [
-		highlightedIndex,
-		values,
-		getItemProps,
-		size,
-		selectedState
-	]);
-	const isMenuOpen = isOpen;
-	const { isFooterHighlighted, footerActionId, showFooterAction, handleFooterKeyDown, clearFooterHighlight } = useComboboxFooterAction({
-		footerAction,
-		isOptionsLoading,
-		itemCount: navigableItems.length,
-		isMenuOpen,
-		inputValue,
-		highlightedIndex,
-		setHighlightedIndex,
-		inputId: field.inputId
-	});
-	const handleKeyDown = (0, react.useCallback)((event) => {
-		if (event.key === "Enter" && !isMenuOpen) openMenu();
-	}, [isMenuOpen, openMenu]);
-	const dropdownPosition = useDropdownPosition(portalContainerRef, isMenuOpen, embedded ? false : portal);
-	(0, react.useEffect)(() => {
-		onOpenChange?.(isMenuOpen);
-	}, [isMenuOpen, onOpenChange]);
-	(0, react.useEffect)(() => {
-		if (isMenuOpen && navigableItems.length > 0 && !isFooterHighlighted) {
-			if (highlightedIndex === -1 || highlightedIndex >= navigableItems.length) setHighlightedIndex(0);
-		}
-	}, [
-		navigableItems,
-		isMenuOpen,
-		highlightedIndex,
-		isFooterHighlighted,
-		setHighlightedIndex
-	]);
-	const searchInputId = `${field.inputId}-search`;
-	(0, react.useEffect)(() => {
-		if (isMenuOpen && searchInputRef.current) searchInputRef.current.focus();
-	}, [isMenuOpen]);
-	const handleSearchInputKeyDown = (0, react.useCallback)((e) => {
-		if (handleFooterKeyDown(e)) return;
-		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") {
-			clearFooterHighlight();
-			closeMenu();
-			if (comboboxInputRef.current) comboboxInputRef.current.focus();
-		}
-		if (e.key === "Tab") {
-			if (isFooterHighlighted) {
-				clearFooterHighlight();
-				closeMenu();
-			} else if (highlightedIndex >= 0 && navigableItems[highlightedIndex]) closeMenu();
-		}
-	}, [
-		navigableItems,
-		highlightedIndex,
-		setHighlightedIndex,
-		handleFooterKeyDown,
-		isFooterHighlighted,
-		clearFooterHighlight,
-		values,
-		addSelectedItem,
-		removeSelectedItem,
-		closeMenu,
-		comboboxInputRef,
-		handleSelectAllToggle
-	]);
-	require_lib_useOutsideClick.useOutsideClick({
-		ref: comboboxContainerRef,
-		onOutsideClick: (0, react.useCallback)((e) => {
-			if (!embedded && isMenuOpen && !e.target?.closest("#combobox-dropdown-portal-wrapper")) closeMenu();
-		}, [
-			embedded,
-			isMenuOpen,
-			closeMenu
-		])
-	});
-	const externalTrigger = (() => {
-		if (embedded || trigger == null || !(0, react.isValidElement)(trigger)) return null;
-		const triggerProps = trigger.props;
-		return (0, react.cloneElement)(trigger, getToggleButtonProps({
-			...triggerProps,
-			disabled: field.disabled || Boolean(triggerProps.disabled)
-		}));
-	})();
-	const handleSearchInputBlur = (0, react.useCallback)((e) => {
-		if (!isMenuOpen) return;
-		const relatedTarget = e.relatedTarget;
-		const staysInCombobox = relatedTarget != null && (Boolean(comboboxContainerRef.current?.contains(relatedTarget)) || Boolean(relatedTarget.closest("#combobox-dropdown-portal-wrapper")));
-		if (!embedded && !staysInCombobox) closeMenu();
-	}, [
-		embedded,
-		isMenuOpen,
-		closeMenu
-	]);
-	const searchInputAriaLabel = embedded ? "Search options" : ariaLabel ?? searchPlaceholder;
-	const searchInputDownshiftProps = embedded ? getInputProps(getDropdownProps({
-		ref: searchInputRef,
-		id: searchInputId,
-		"aria-label": searchInputAriaLabel
-	})) : {
-		ref: searchInputRef,
-		id: searchInputId
-	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Container, {
-		...props,
-		ref: comboboxContainerRef,
-		children: [embedded ? null : externalTrigger != null ? externalTrigger : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(InputContainer, { children: [
-			/* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsxs)(HiddenMeasurementContainer, {
-				"aria-hidden": "true",
-				children: [selectedItems.map((item, index) => {
-					return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-						ref: (el) => measurementStickerRefs.current[index] = el,
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Sticker.Sticker, {
-							variant: flatOptions.find((opt) => opt.value === item.value)?.labelStickerVariant || "grey",
-							disabled: field.disabled,
-							children: item.label
-						})
-					}, `measurement-${item.value}-${index}`);
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-					ref: measurementTruncatorRef,
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(TruncatorSticker, {
-						variant: "grey",
-						disabled: field.disabled,
-						children: ["+", selectedItems.length - visibleCount]
-					})
-				})]
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(SelectedItemsContainer, {
-				$size: size,
-				$truncate: truncate,
-				ref: selectedItemsContainerRef,
-				children: truncate ? /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(TruncatedSticker, {
-						...stickerProps,
-						variant: stickerVariant,
-						disabled: field.disabled,
-						$isOnlyItem: visibleCount === 1,
-						children: item.label
-					}, `selected-${item.value}-${index}`);
-				}), visibleCount < selectedItems.length && /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(require_Sticker.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__ */ (0, react_jsx_runtime.jsx)(CaretButton, {
-				id: `${field.inputId}__clear-all`,
-				onClick: reset,
-				size,
-				disabled: field.disabled,
-				"aria-label": "Clear all selected items",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons.CircleXInverseIcon, {})
-			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CaretButton, {
-				...getToggleButtonProps({ ref: caretButtonRef }),
-				size,
-				disabled: field.disabled,
-				"aria-label": `${isMenuOpen ? "Close" : "Open"} options menu`,
-				"aria-haspopup": "listbox",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons.CaretDownIcon, {})
-			})
-		] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownPortalWrapper, {
-			portal: embedded ? false : portal,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(SearchInputContainer, {
-					$embedded: embedded,
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Input.InputGroup, {
-						leftIcon: embedded ? void 0 : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons.SearchIcon, {}),
-						size,
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SearchInput, {
-							...searchInputDownshiftProps,
-							$embedded: embedded,
-							placeholder: searchPlaceholder,
-							value: inputValue,
-							onChange: (e) => {
-								setInputValue(e.target.value);
-								onInputChange?.(e.target.value);
-							},
-							onKeyDown: handleSearchInputKeyDown,
-							onBlur: handleSearchInputBlur,
-							disabled: field.disabled,
-							"aria-label": searchInputAriaLabel,
-							"aria-activedescendant": isFooterHighlighted ? footerActionId : highlightedIndex >= 0 ? getOptionId(highlightedIndex) : void 0,
-							size
-						})
-					})
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MultiSelectScrollableMenuList, {
-					$embedded: embedded,
-					tabIndex: -1,
-					ref: scrollableListRef,
-					children: isMenuOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [isOptionsLoading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LoadingContainer, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Spinner.Spinner, { size: "md" }) }) : navigableItems.length > 0 ? renderOptionsWithGroups({
-						options: optionsToRender,
-						filteredOptions: navigableItems,
-						renderOption,
-						virtualizer: virtualize ? virtualizer : void 0,
-						virtualRows: virtualize ? virtualRows : void 0
-					}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmptyState, {
-						role: "status",
-						"aria-live": "polite",
-						size,
-						children: emptyStateMessage
-					}), showFooterAction && footerAction && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FooterActionRow, {
-						action: footerAction,
-						size,
-						id: footerActionId,
-						isHighlighted: isFooterHighlighted
-					})] })
-				})]
-			})
-		})]
-	});
-}
-const ComboboxMultiSelect = (0, react.forwardRef)(ComboboxMultiSelectComponent);
-//#endregion
-//#region components/Combobox/ComboboxSingleSelect.tsx
-const StyledMenuItem = (0, styled_components.default)(require_Menu.MenuItem)`
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: ${_persona_design_tokens.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 = (0, styled_components.default)(require_Menu.MenuItem)`
-  ${require_Menu.IconContainer} {
-    margin-right: 0;
-  }
-
-  > ${require_Menu.IconContainer}:first-child:not(:last-child) {
-    margin-right: ${_persona_design_tokens.Spacing[2]};
-  }
-`;
-const ParentChevron = styled_components.default.span`
-  display: inline-flex;
-  align-items: center;
-  color: ${_persona_design_tokens.Color.BorderIconSecondary};
-`;
-const EXTERNAL_TRIGGER_DROPDOWN_MIN_WIDTH = "240px";
-const SingleSelectScrollableMenuList = (0, styled_components.default)(ScrollableMenuList)`
-  ${({ $embedded }) => $embedded && styled_components.css`
-      padding: 0;
-    `}
-`;
-const BackRow = styled_components.default.button`
-  display: flex;
-  align-items: center;
-  gap: ${({ $size }) => $size === "sm" ? _persona_design_tokens.Spacing[1] : _persona_design_tokens.Spacing[2]};
-  width: 100%;
-  padding: ${({ $size }) => $size === "sm" ? `${_persona_design_tokens.Spacing[1]} ${_persona_design_tokens.Spacing[2]}` : _persona_design_tokens.Spacing[2]};
-  background: transparent;
-  border: 0;
-  cursor: pointer;
-  color: ${_persona_design_tokens.Color.TextPrimary};
-  ${({ $size }) => $size === "sm" ? _persona_design_tokens.Typography.TextSmall : _persona_design_tokens.Typography.TextMedium};
-
-  svg {
-    color: ${_persona_design_tokens.Color.BorderIconPrimary};
-  }
-`;
-const StickerDisplay = (0, styled_components.default)(require_Sticker.Sticker)`
-  position: absolute;
-  left: ${_persona_design_tokens.Spacing[2]};
-  top: 50%;
-  transform: translateY(-50%);
-  pointer-events: none;
-  z-index: 1;
-`;
-const StickerComboboxInput = (0, styled_components.default)(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, footerAction, ...props }, ref) {
-	const field = require_useFormField.useFormField({
-		hasWarning,
-		hasError,
-		disabled,
-		inputId: id
-	});
-	const [inputValue, setInputValue] = (0, react.useState)("");
-	const [isDropdownOpen, setIsDropdownOpen] = (0, react.useState)(embedded);
-	const [navigationPath, setNavigationPath] = (0, react.useState)([]);
-	const comboboxInputRef = (0, react.useRef)(null);
-	const internalContainerRef = (0, react.useRef)(null);
-	const pendingDescentRef = (0, react.useRef)(null);
-	const portalContainerRef = externalPortalContainerRef || internalContainerRef;
-	(0, react.useImperativeHandle)(ref, () => ({ ...comboboxInputRef.current }), []);
-	const isSearching = inputValue.trim() !== "";
-	const nestedOptions = (0, react.useMemo)(() => getOptionsAtPath(options, navigationPath), [options, navigationPath]);
-	const hasNestedGroups = (0, react.useMemo)(() => containsNestedGroup(options), [options]);
-	const navigableItems = (0, react.useMemo)(() => getNavigableItemsAtLevel(nestedOptions), [nestedOptions]);
-	const searchableLeaves = (0, react.useMemo)(() => {
-		if (!isSearching || !hasNestedGroups) return [];
-		return flattenLeafOptions(options).map(({ option }) => option);
-	}, [
-		options,
-		isSearching,
-		hasNestedGroups
-	]);
-	const searchableLeafFuse = (0, react.useMemo)(() => {
-		if (!isSearching || !hasNestedGroups) return null;
-		return new fuse_js.default(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 = (0, react.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 = (0, react.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 = (0, react.useMemo)(() => flattenLeafOptions(options), [options]);
-	const flatOptionsForFallback = (0, react.useMemo)(() => flattenOptions(options), [options]);
-	const selectedOption = allLeaves.find(({ option }) => option.value === value)?.option ?? flatOptionsForFallback.find((option) => option.value === value) ?? null;
-	const selectedNavigableItem = (0, react.useMemo)(() => selectedOption ? {
-		kind: "leaf",
-		option: selectedOption
-	} : null, [selectedOption?.value, selectedOption?.label]);
-	const itemToString = (0, react.useCallback)((item) => {
-		if (!item) return "";
-		return item.kind === "leaf" ? item.option.label : item.group.label;
-	}, []);
-	const handleAscend = (0, react.useCallback)(() => {
-		setNavigationPath((prev) => prev.length > 0 ? prev.slice(0, -1) : prev);
-		setInputValue("");
-	}, []);
-	const handleDescend = (0, react.useCallback)((groupLabel) => {
-		setNavigationPath((prev) => [...prev, groupLabel]);
-		setInputValue("");
-	}, []);
-	const { isOpen, getToggleButtonProps, getMenuProps, getInputProps, getItemProps, highlightedIndex, setHighlightedIndex, openMenu } = (0, downshift.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 }) {
-			if (embedded) return;
-			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 downshift.useCombobox.stateChangeTypes.InputBlur: return {
-					...changes,
-					selectedItem: state.selectedItem
-				};
-				case downshift.useCombobox.stateChangeTypes.ItemClick:
-				case downshift.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;
-			}
-		}
-	});
-	(0, react.useEffect)(() => {
-		if (pendingDescentRef.current != null) {
-			const target = pendingDescentRef.current;
-			pendingDescentRef.current = null;
-			handleDescend(target);
-		}
-	});
-	(0, react.useEffect)(() => {
-		if (!isOpen && !embedded && navigationPath.length > 0) setNavigationPath([]);
-	}, [
-		embedded,
-		isOpen,
-		navigationPath.length
-	]);
-	const renderLeaf = (0, react.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__ */ (0, react_jsx_runtime.jsx)(require_Sticker.Sticker, {
-			variant: option.labelStickerVariant,
-			children: option.label
-		}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(OptionLabel, {
-			title: option.label,
-			$labelStyle: option.PLEASE_DO_NOT_USE_labelFontStyle,
-			children: option.label
-		}), option.description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Description, {
-			title: option.description,
-			children: option.description
-		})] });
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledMenuItem, {
-			...itemProps,
-			focused: isHighlighted,
-			selected: isSelected,
-			size,
-			tabIndex: -1,
-			children: labelContent
-		}, `leaf-${String(option.value)}-${currentIndex}`);
-	}, [
-		highlightedIndex,
-		selectedOption,
-		getItemProps,
-		size
-	]);
-	const renderNestedGroupRow = (0, react.useCallback)((group, currentIndex) => {
-		const isHighlighted = highlightedIndex === currentIndex;
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ParentMenuItem, {
-			...getItemProps({
-				item: {
-					kind: "group",
-					group
-				},
-				index: currentIndex
-			}),
-			"aria-haspopup": "menu",
-			focused: isHighlighted,
-			prefixIcon: group.prefixIcon,
-			size,
-			tabIndex: -1,
-			stretchLabel: true,
-			suffixIcon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ParentChevron, {
-				"aria-hidden": "true",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons.ChevronRightIcon, {})
-			}),
-			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(OptionLabel, {
-				title: group.label,
-				children: group.label
-			}), group.description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Description, {
-				title: group.description,
-				children: group.description
-			})]
-		}, `group-${group.label}-${currentIndex}`);
-	}, [
-		highlightedIndex,
-		getItemProps,
-		size
-	]);
-	const renderNestedLevel = (0, react.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__ */ (0, react_jsx_runtime.jsx)(react.Fragment, { 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__ */ (0, react_jsx_runtime.jsxs)(react.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Menu.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 = (0, react.useCallback)((option, currentIndex) => renderLeaf(option, currentIndex), [renderLeaf]);
-	const isMenuOpen = isOpen;
-	const dropdownPosition = useDropdownPosition(portalContainerRef, isMenuOpen, embedded ? false : portal);
-	const { isFooterHighlighted, footerActionId, showFooterAction, handleFooterKeyDown } = useComboboxFooterAction({
-		footerAction,
-		isOptionsLoading,
-		itemCount: downshiftItems.length,
-		isMenuOpen,
-		inputValue,
-		highlightedIndex,
-		setHighlightedIndex,
-		inputId: field.inputId
-	});
-	const handleKeyDown = (0, react.useCallback)((event) => {
-		if (event.key === "Enter" && !isMenuOpen) {
-			openMenu();
-			return;
-		}
-		if (!isMenuOpen) return;
-		if (handleFooterKeyDown(event)) return;
-		if (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,
-		handleFooterKeyDown,
-		downshiftItems,
-		highlightedIndex,
-		navigationPath.length,
-		openMenu,
-		handleDescend,
-		handleAscend
-	]);
-	(0, react.useEffect)(() => {
-		onOpenChange?.(isMenuOpen);
-	}, [isMenuOpen, onOpenChange]);
-	(0, react.useEffect)(() => {
-		if (!isMenuOpen) setInputValue(selectedOption?.label || "");
-	}, [selectedOption, isMenuOpen]);
-	(0, react.useEffect)(() => {
-		if (isMenuOpen && downshiftItems.length > 0 && !isFooterHighlighted) {
-			if (highlightedIndex === -1 || highlightedIndex >= downshiftItems.length) setHighlightedIndex(0);
-		}
-	}, [
-		downshiftItems,
-		isMenuOpen,
-		highlightedIndex,
-		isFooterHighlighted,
-		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 || !(0, react.isValidElement)(trigger)) return null;
-		const triggerProps = trigger.props;
-		return (0, react.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
-	});
-	if (isFooterHighlighted) searchInputProps["aria-activedescendant"] = footerActionId;
-	const mainInputProps = 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
-	});
-	if (isFooterHighlighted) mainInputProps["aria-activedescendant"] = footerActionId;
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Container, {
-		...props,
-		ref: internalContainerRef,
-		children: [embedded ? null : externalTrigger != null ? externalTrigger : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(InputContainer, { children: [
-			hasSticker && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StickerDisplay, {
-				variant: selectedOption.labelStickerVariant,
-				children: selectedOption.label
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(InputComponent, {
-				...mainInputProps,
-				size,
-				$isOpen: isMenuOpen,
-				hasWarning: field.hasWarning,
-				hasError: field.hasError,
-				value: displayValue,
-				$selectedItemStyle: selectedOption?.PLEASE_DO_NOT_USE_labelFontStyle
-			}),
-			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CaretButton, {
-				...getToggleButtonProps(),
-				size,
-				disabled: field.disabled,
-				"aria-label": `${isMenuOpen ? "Close" : "Open"} options menu`,
-				"aria-haspopup": "listbox",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons.CaretDownIcon, {})
-			})
-		] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownPortalWrapper, {
-			portal: embedded ? false : portal,
-			children: /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(SearchInputContainer, {
-					$embedded: embedded,
-					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Input.InputGroup, {
-						leftIcon: embedded ? void 0 : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_persona_icons.SearchIcon, {}),
-						size,
-						children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SearchInput, {
-							$embedded: embedded,
-							...searchInputProps,
-							size,
-							hasWarning: field.hasWarning,
-							hasError: field.hasError,
-							value: inputValue,
-							autoComplete: "off"
-						})
-					})
-				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SingleSelectScrollableMenuList, {
-					$embedded: embedded,
-					tabIndex: -1,
-					children: isMenuOpen && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
-						showBackRow && /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(_persona_icons.ArrowLeftIcon, {
-								"aria-hidden": "true",
-								size: size === "sm" ? 12 : 16
-							}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: "Back" })]
-						}),
-						isOptionsLoading ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(LoadingContainer, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Spinner.Spinner, { size: "md" }) }) : downshiftItems.length > 0 ? hasNestedGroups && !isSearching ? renderNestedLevel(nestedOptions) : renderOptionsWithGroups({
-							options: renderSource,
-							filteredOptions,
-							renderOption
-						}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(EmptyState, {
-							role: "status",
-							"aria-live": "polite",
-							size,
-							children: emptyStateMessage
-						}),
-						showFooterAction && footerAction && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FooterActionRow, {
-							action: footerAction,
-							size,
-							id: footerActionId,
-							isHighlighted: isFooterHighlighted
-						})
-					] })
-				})]
-			})
-		})]
-	});
-}
-const ComboboxSingleSelect = (0, react.forwardRef)(ComboboxSingleSelectComponent);
-//#endregion
-//#region components/Combobox/Combobox.tsx
-function ComboboxComponent(props, ref) {
-	if (props.multiple) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComboboxMultiSelect, {
-		ref,
-		...props
-	});
-	else return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ComboboxSingleSelect, {
-		ref,
-		...props
-	});
-}
-const Combobox = (0, react.forwardRef)(ComboboxComponent);
-//#endregion
-Object.defineProperty(exports, "CaretButton", {
-	enumerable: true,
-	get: function() {
-		return CaretButton;
-	}
-});
-Object.defineProperty(exports, "Combobox", {
-	enumerable: true,
-	get: function() {
-		return Combobox;
-	}
-});
-Object.defineProperty(exports, "flattenOptions", {
-	enumerable: true,
-	get: function() {
-		return flattenOptions;
-	}
-});
-
-//# sourceMappingURL=Combobox-COXvmxlM.cjs.map