@optiaxiom/react 3.4.2 → 3.5.0

package/dist/cjs/SuggestionPopover-Bu_sY4dq.js

@@ -0,0 +1,1095 @@
+"use client";
+const require_rolldown_runtime = require("./rolldown-runtime-C0BPl7ul.js");
+const require_box = require("./box-B2PXBdH7.js");
+const require_recipeRuntime = require("./recipeRuntime-BV5B1H9r.js");
+const require_useSurface = require("./useSurface-Dy0GdyeS.js");
+const require_separator = require("./separator-DYd80dzd.js");
+const require_decorateChildren = require("./decorateChildren-BuXnWpNx.js");
+const require_button = require("./button-BO_WcwyT.js");
+const require_FocusBookmarkProvider = require("./FocusBookmarkProvider-BJWt--oq.js");
+const require_rem = require("./rem-yLUl-9YY.js");
+const require_text = require("./text-BWyl3PQL.js");
+const require_group = require("./group.js");
+const require_transition = require("./transition-tqiyzYYq.js");
+const require_paper = require("./paper-BAtiTHb1.js");
+const require_Portal = require("./Portal-DI9aR5XU.js");
+const require_heading = require("./heading-hT47_aTz.js");
+const require_useEvent = require("./useEvent-BGCT9scH.js");
+const require_avatar = require("./avatar-QYjj8itt.js");
+const require_useSuggestions = require("./useSuggestions-BqrBlpWi.js");
+const require_ToggleInputLabel = require("./ToggleInputLabel-CtYVkNC4.js");
+const require_skeleton = require("./skeleton-BNnKuj7z.js");
+let _radix_ui_react_id = require("@radix-ui/react-id");
+let react = require("react");
+let _radix_ui_react_slot = require("@radix-ui/react-slot");
+require("./assets/layers.css.ts.vanilla-CTOkUrdE.css");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _optiaxiom_globals = require("@optiaxiom/globals");
+let _radix_ui_react_context = require("@radix-ui/react-context");
+let _radix_ui_react_compose_refs = require("@radix-ui/react-compose-refs");
+let _radix_ui_react_use_controllable_state = require("@radix-ui/react-use-controllable-state");
+let _radix_ui_react_popover = require("@radix-ui/react-popover");
+_radix_ui_react_popover = require_rolldown_runtime.__toESM(_radix_ui_react_popover, 1);
+let _radix_ui_react_popper = require("@radix-ui/react-popper");
+_radix_ui_react_popper = require_rolldown_runtime.__toESM(_radix_ui_react_popper, 1);
+require("./assets/Listbox.css.ts.vanilla-BI2PlcN1.css");
+require("./assets/ButtonGroup.css.ts.vanilla-Big2-ymt.css");
+require("./assets/ToggleInput.css.ts.vanilla-BOJ3ABfS.css");
+require("./assets/CheckboxControl.css.ts.vanilla-ClwMtpdo.css");
+require("./assets/ListboxCheckboxItem.css.ts.vanilla-DDxyZ8SF.css");
+require("./assets/ListboxItem.css.ts.vanilla-DWpw4o3e.css");
+let _optiaxiom_icons_IconCheck = require("@optiaxiom/icons/IconCheck");
+require("./assets/ListboxItemIndicator.css.ts.vanilla-DlobHSMH.css");
+let _tanstack_react_virtual = require("@tanstack/react-virtual");
+require("./assets/Switch.css.ts.vanilla-DOZ492ct.css");
+require("./assets/ModalListbox.css.ts.vanilla-DepGdip1.css");
+//#region src/utils/isHoverSupported.ts
+const isHoverSupported = typeof window !== "undefined" && typeof window.matchMedia !== "undefined" && window.matchMedia("(hover: hover)").matches;
+//#endregion
+//#region src/popover/PopoverContext.ts
+const [PopoverProvider, usePopoverContext] = (0, _radix_ui_react_context.createContext)("@optiaxiom/react/Popover");
+//#endregion
+//#region src/popover/usePopoverScope.ts
+const usePopoverScope = _radix_ui_react_popover.createPopoverScope();
+//#endregion
+//#region src/popover/Popover.tsx
+/**
+* Display arbitrary rich content inside a non-modal dialog triggered by a button.
+*
+* @category overlay
+* @group Popover
+* @since 0.1.0
+*/
+function Popover({ children, defaultOpen = false, modal, onOpenChange, open: openProp }) {
+	const [open, setOpen] = (0, _radix_ui_react_use_controllable_state.useControllableState)({
+		caller: "@optiaxiom/react/Popover",
+		defaultProp: defaultOpen,
+		onChange: onOpenChange,
+		prop: openProp
+	});
+	const [presence, setPresence] = (0, react.useState)(false);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_popover.Root, {
+		modal,
+		onOpenChange: setOpen,
+		open,
+		...usePopoverScope(void 0),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PopoverProvider, {
+			open,
+			presence,
+			setPresence,
+			children
+		})
+	});
+}
+Popover.displayName = "@optiaxiom/react/Popover";
+//#endregion
+//#region src/popover/PopoverAnchor.tsx
+/**
+* @group Popover
+*/
+const PopoverAnchor = (0, react.forwardRef)(({ asChild, children, staticRef, ...props }, ref) => {
+	const { __scopePopover } = usePopoverScope(void 0);
+	const { open } = usePopoverContext("@optiaxiom/react/PopoverAnchor");
+	const [virtualRef, setVirtualRef] = (0, react.useState)({ current: null });
+	(0, react.useEffect)(() => {
+		if (!staticRef?.current || !open) return;
+		const rect = staticRef.current.getBoundingClientRect();
+		setVirtualRef({ current: { getBoundingClientRect: () => rect } });
+	}, [open, staticRef]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_box.Box, {
+		asChild: true,
+		ref,
+		virtualRef: staticRef ? virtualRef : void 0,
+		...props,
+		__scopePopper: __scopePopover,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_popper.Anchor, {
+			asChild,
+			children
+		})
+	});
+});
+PopoverAnchor.displayName = "@optiaxiom/react/PopoverAnchor";
+//#endregion
+//#region src/listbox/Listbox.css.ts
+var listbox$1 = require_recipeRuntime.recipeRuntime({ base: [{
+	display: "flex",
+	flex: "1",
+	flexDirection: "column",
+	gap: "2",
+	overflow: "auto"
+}, "_1fy2ex5"] });
+//#endregion
+//#region src/listbox/Listbox.tsx
+const Listbox = (0, react.forwardRef)(({ children, className, ...props }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_box.Box, {
+		ref,
+		...listbox$1({}, className),
+		...props,
+		children
+	});
+});
+Listbox.displayName = "@optiaxiom/react/Listbox";
+//#endregion
+//#region src/checkbox/CheckboxContent.tsx
+const CheckboxContent = (0, react.forwardRef)(({ children, description, size = "md", ...props }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_ToggleInputLabel.ToggleInputContent, {
+		fontSize: size,
+		ref,
+		...props,
+		children: [children && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ToggleInputLabel.ToggleInputLabel, {
+			fontWeight: size === "sm" ? "400" : "500",
+			children
+		}), description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ToggleInputLabel.ToggleInputDescription, { children: description })]
+	});
+});
+CheckboxContent.displayName = "@optiaxiom/react/CheckboxContent";
+//#endregion
+//#region src/icons/withIcon.tsx
+const withIcon = ({ fill, height = 16, name, viewBox, width = 20 }, children) => {
+	const Icon = (0, react.forwardRef)(({ style, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
+		fill,
+		height,
+		ref,
+		style: {
+			height: require_rem.rem(`${height}px`),
+			width: require_rem.rem(`${width}px`),
+			...style
+		},
+		viewBox: viewBox ?? `0 0 ${width} ${height}`,
+		width,
+		xmlns: "http://www.w3.org/2000/svg",
+		...props,
+		children
+	}));
+	Icon.displayName = `@optiaxiom/react/${name}`;
+	return Icon;
+};
+//#endregion
+//#region src/icons/CheckboxCheck.tsx
+const CheckboxCheck = withIcon({
+	fill: "none",
+	height: 8,
+	name: "CheckboxCheck",
+	width: 12
+}, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+	d: "M1.5 3.47059L4.83333 7L10.5 1",
+	stroke: "currentColor",
+	strokeLinecap: "round",
+	strokeLinejoin: "round",
+	strokeWidth: "1.5"
+}));
+//#endregion
+//#region src/icons/IconMinus.tsx
+const IconMinus = withIcon({
+	height: 8,
+	name: "IconMinus",
+	width: 12
+}, /* @__PURE__ */ (0, react_jsx_runtime.jsx)("path", {
+	d: "M2.85714 3.19995C2.35714 3.19995 2 3.56662 2 3.99995C2 4.46662 2.35714 4.79995 2.85714 4.79995H9.14286C9.60714 4.79995 10 4.46662 10 3.99995C10 3.56662 9.60714 3.19995 9.14286 3.19995H2.85714Z",
+	fill: "currentColor"
+}));
+//#endregion
+//#region src/checkbox/CheckboxControl.css.ts
+var control$1 = require_recipeRuntime.recipeRuntime({
+	base: [{ display: "grid" }, "_1eil425"],
+	variants: {
+		shift: {
+			false: {},
+			true: "_1gf34pa"
+		},
+		size: {
+			sm: [{ rounded: "sm" }, "eobpaz"],
+			md: [{ rounded: "md" }, "_11zh3fk"]
+		}
+	}
+});
+var icon = require_recipeRuntime.recipeRuntime({ base: [{ transition: "all" }, "_1264t7j"] });
+var indicator$1 = require_recipeRuntime.recipeRuntime({ base: [{
+	alignItems: "center",
+	display: "flex",
+	justifyContent: "center",
+	p: "2",
+	size: "full"
+}] });
+//#endregion
+//#region src/checkbox/CheckboxControl.tsx
+const CheckboxControl = (0, react.forwardRef)(({ className, indeterminate, shift, size = "md", ...props }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ToggleInputLabel.ToggleInputControl, {
+		ref,
+		...control$1({
+			shift,
+			size
+		}, className),
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_box.Box, {
+			...indicator$1(),
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_box.Box, {
+				asChild: true,
+				...icon(),
+				children: indeterminate ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(IconMinus, {}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CheckboxCheck, {})
+			})
+		})
+	});
+});
+CheckboxControl.displayName = "@optiaxiom/react/CheckboxControl";
+//#endregion
+//#region src/checkbox/CheckboxRoot.tsx
+const CheckboxRoot = (0, react.forwardRef)(({ children, ...props }, outerRef) => {
+	const { boxProps, restProps } = require_box.extractBoxProps(props);
+	const checked = props["aria-checked"];
+	const innerRef = (0, react.useRef)();
+	(0, react.useEffect)(() => {
+		if (!innerRef.current) return;
+		innerRef.current.indeterminate = checked === "mixed";
+	}, [checked]);
+	const ref = (0, _radix_ui_react_compose_refs.useComposedRefs)(innerRef, outerRef);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_ToggleInputLabel.ToggleInput, {
+		...boxProps,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ToggleInputLabel.ToggleInputHiddenInput, {
+			ref,
+			...restProps
+		}), children]
+	});
+});
+CheckboxRoot.displayName = "@optiaxiom/react/CheckboxRoot";
+//#endregion
+//#region src/checkbox/Checkbox.tsx
+/**
+* Basic control to allow selecting one or more items from a set.
+*
+* @since 0.1.0
+* @category form
+*/
+const Checkbox = (0, react.forwardRef)(({ children, description, indeterminate, size = "md", ...props }, outerRef) => {
+	const innerRef = (0, react.useRef)(null);
+	const ref = (0, _radix_ui_react_compose_refs.useComposedRefs)(innerRef, outerRef);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(CheckboxRoot, {
+		"aria-checked": indeterminate ? "mixed" : void 0,
+		ref,
+		...props,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(CheckboxControl, {
+				indeterminate,
+				shift: Boolean(children),
+				size
+			}),
+			(children || description) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CheckboxContent, {
+				description,
+				size,
+				children
+			}),
+			props.checked !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SuggestionPopover, { style: { marginTop: -2 } })
+		]
+	});
+});
+Checkbox.displayName = "@optiaxiom/react/Checkbox";
+//#endregion
+//#region src/listbox/ListboxCheckboxItem.css.ts
+var checkbox = require_recipeRuntime.recipeRuntime({ base: [{ display: "inline-flex" }, "_196zxyx"] });
+//#endregion
+//#region src/listbox/ListboxItem.css.ts
+var addon = require_recipeRuntime.recipeRuntime({
+	base: [{
+		alignItems: "center",
+		display: "flex",
+		gap: "8"
+	}, "_3enrc5"],
+	variants: { slot: {
+		after: { ml: "8" },
+		before: {}
+	} }
+});
+var description = require_recipeRuntime.recipeRuntime({ base: [{ fontSize: "sm" }, "mv9j27"] });
+var item = require_recipeRuntime.recipeRuntime({
+	base: [{
+		alignItems: "start",
+		fontSize: "md",
+		gap: "8",
+		p: "8",
+		rounded: "sm",
+		transition: "colors"
+	}, "nwpiky"],
+	variants: { intent: {
+		danger: "sbpv65",
+		neutral: "_1d1kwog"
+	} }
+});
+var title = require_recipeRuntime.recipeRuntime({ base: [{
+	alignItems: "center",
+	gap: "8"
+}, "_1v2gzxc"] });
+//#endregion
+//#region src/listbox/ListboxItem.tsx
+const Slot = (0, _radix_ui_react_slot.createSlot)("@optiaxiom/react/ListboxItem");
+/**
+* @group Listbox
+*/
+const ListboxItem = (0, react.forwardRef)(({ addonAfter, addonBefore, asChild, children, className, description: description$1, icon, intent = "neutral", ...props }, ref) => {
+	const Comp = asChild ? Slot : "div";
+	const labelId = (0, _radix_ui_react_id.useId)();
+	const descriptionId = (0, _radix_ui_react_id.useId)();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_group.Group, {
+		"aria-describedby": description$1 ? descriptionId : void 0,
+		"aria-labelledby": labelId,
+		asChild: true,
+		ref,
+		...item({ intent }, className),
+		...props,
+		...!isHoverSupported && { "data-highlighted": void 0 },
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Comp, { children: require_decorateChildren.decorateChildren({
+			asChild,
+			children
+		}, (children) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+			(addonBefore || icon) && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_box.Box, {
+				...addon({ slot: "before" }),
+				children: addonBefore ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Icon, {
+					asChild: true,
+					children: icon
+				})
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_group.Group, {
+				flex: "1",
+				flexDirection: "column",
+				gap: "0",
+				maxW: "full",
+				children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_group.Group, {
+					asChild: true,
+					...title(),
+					id: labelId,
+					children: require_button.fallbackSpan(children)
+				}), description$1 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text.Text, {
+					asChild: true,
+					...description(),
+					id: descriptionId,
+					children: require_button.fallbackSpan(description$1)
+				})]
+			}),
+			addonAfter && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_box.Box, {
+				...addon({ slot: "after" }),
+				children: addonAfter
+			})
+		] })) })
+	});
+});
+ListboxItem.displayName = "@optiaxiom/react/ListboxItem";
+//#endregion
+//#region src/listbox/ListboxCheckboxItem.tsx
+/**
+* @group Listbox
+*/
+const ListboxCheckboxItem = (0, react.forwardRef)(({ addonBefore, icon, onCheckedChange, ...props }, ref) => {
+	const checked = Boolean(props[props["role"] === "option" ? "aria-selected" : "aria-checked"]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ListboxItem, {
+		addonBefore: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_group.Group, {
+			gap: "8",
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_box.Box, {
+				onClick: onCheckedChange ? (event) => {
+					event.preventDefault();
+					event.stopPropagation();
+					onCheckedChange(true);
+				} : void 0,
+				...checkbox(),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Checkbox, {
+					checked,
+					hidden: true,
+					pointerEvents: "none",
+					tabIndex: -1
+				})
+			}), addonBefore ? addonBefore : icon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Icon, {
+				asChild: true,
+				children: icon
+			}) : null]
+		}),
+		ref,
+		...props
+	});
+});
+ListboxCheckboxItem.displayName = "@optiaxiom/react/ListboxCheckboxItem";
+//#endregion
+//#region src/listbox/ListboxEmpty.tsx
+/**
+* @group Listbox
+*/
+const ListboxEmpty = (0, react.forwardRef)(({ children = "No results found.", ...props }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_box.Box, {
+		alignItems: "center",
+		"aria-hidden": true,
+		color: "fg.tertiary",
+		display: "flex",
+		flexDirection: "column",
+		fontSize: "md",
+		p: "10",
+		ref,
+		...props,
+		children
+	});
+});
+ListboxEmpty.displayName = "@optiaxiom/react/ListboxEmpty";
+//#endregion
+//#region src/listbox/ListboxGroupContext.ts
+const [ListboxGroupProvider, useListboxGroupContext] = (0, _radix_ui_react_context.createContext)("@optiaxiom/react/ListboxGroup", { id: void 0 });
+//#endregion
+//#region src/listbox/ListboxGroup.tsx
+/**
+* @group Listbox
+*/
+const ListboxGroup = (0, react.forwardRef)(({ children, ...props }, ref) => {
+	const groupId = (0, _radix_ui_react_id.useId)();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ListboxGroupProvider, {
+		id: groupId,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_box.Box, {
+			"aria-labelledby": groupId,
+			ref,
+			role: "group",
+			...props,
+			children
+		})
+	});
+});
+ListboxGroup.displayName = "@optiaxiom/react/ListboxGroup";
+//#endregion
+//#region src/listbox/ListboxItemIndicator.css.ts
+var indicator = require_recipeRuntime.recipeRuntime({
+	base: ["mlo0x0"],
+	variants: { active: {
+		false: {},
+		true: "_2gbur8"
+	} }
+});
+//#endregion
+//#region src/listbox/ListboxItemIndicator.tsx
+/**
+* @group Listbox
+*/
+const ListboxItemIndicator = (0, react.forwardRef)(({ active, children, className, ...props }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_box.Box, {
+		asChild: true,
+		ref,
+		...indicator({ active }, className),
+		...props,
+		children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_optiaxiom_icons_IconCheck.IconCheck, {})
+	});
+});
+ListboxItemIndicator.displayName = "@optiaxiom/react/ListboxItemIndicator";
+//#endregion
+//#region src/listbox/ListboxVirtualized.tsx
+/**
+* @group Listbox
+*/
+const ListboxVirtualized = (0, react.forwardRef)(({ children, highlightedItem, items, itemToKey, ...props }, outerRef) => {
+	const innerRef = (0, react.useRef)(null);
+	const ref = (0, _radix_ui_react_compose_refs.useComposedRefs)(outerRef, innerRef);
+	/**
+	* We wait for first paint to render the menu and then another paint for
+	* radix popper to place the menu and set the max-height. Otherwise virtualizer
+	* will try to render the full list of items instead of a smaller set of data
+	* that is actually visible in the overflow element.
+	*/
+	const [enabled, setEnabled] = (0, react.useState)(false);
+	(0, react.useEffect)(() => {
+		requestAnimationFrame(() => requestAnimationFrame(() => setEnabled(true)));
+	}, []);
+	const { presence } = require_transition.useTransitionGroupContext("@optiaxiom/react/ListboxVirtualized") ?? {};
+	const rowVirtualizer = (0, _tanstack_react_virtual.useVirtualizer)({
+		count: items.length,
+		enabled,
+		estimateSize: () => 40,
+		gap: 2,
+		getScrollElement: () => innerRef.current
+	});
+	const itemToIndexMap = (0, react.useMemo)(() => new Map(items.map((item, index) => [item, index])), [items]);
+	(0, react.useEffect)(() => {
+		const index = itemToIndexMap.get(highlightedItem);
+		if (!presence || typeof index !== "number" || rowVirtualizer.isScrolling) return;
+		rowVirtualizer.scrollToIndex(index);
+	}, [
+		presence,
+		highlightedItem,
+		itemToIndexMap,
+		rowVirtualizer
+	]);
+	const virtualItems = rowVirtualizer.getVirtualItems();
+	const [paddingTop, paddingBottom] = virtualItems.length > 0 ? [Math.max(0, virtualItems[0].start), Math.max(0, rowVirtualizer.getTotalSize() - virtualItems[virtualItems.length - 1].end)] : [0, 0];
+	const [minWidth, setMinWidth] = (0, react.useState)(0);
+	(0, react.useEffect)(() => {
+		if (!innerRef.current) return;
+		const observer = new ResizeObserver((entries) => {
+			for (const entry of entries) setMinWidth(entry.contentRect.width);
+		});
+		observer.observe(innerRef.current);
+		return () => observer.disconnect();
+	}, []);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Listbox, {
+		ref,
+		...props,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_box.Box, {
+			display: "flex",
+			flex: "none",
+			flexDirection: "column",
+			gap: "2",
+			style: {
+				minHeight: Math.min(items.length, 8) * 40,
+				minWidth,
+				paddingBottom,
+				paddingTop
+			},
+			children: virtualItems.map((virtualItem) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_box.Box, {
+				"data-index": virtualItem.index,
+				ref: rowVirtualizer.measureElement,
+				children: children(items[virtualItem.index], virtualItem.index, items[virtualItem.index - 1])
+			}, itemToKey(items[virtualItem.index])))
+		})
+	});
+});
+ListboxVirtualized.displayName = "@optiaxiom/react/ListboxVirtualized";
+//#endregion
+//#region src/listbox/ListboxItemized.tsx
+const VIRTUALIZE_THRESHOLD = 50;
+/**
+* @group Listbox
+*/
+const ListboxItemized = (0, react.forwardRef)(({ children, empty = "No results found.", highlightedItem, items, itemToKey, loading, onPlacedChange, ...props }, ref) => {
+	const onPlacedChangeStable = require_useEvent.useEvent(onPlacedChange ?? (() => {}));
+	(0, react.useEffect)(() => {
+		/**
+		* We wait for first paint to render the menu and then another paint for
+		* radix popper to place the menu and set the max-height. Otherwise we
+		* cannot scroll to the item because it isn't scrollable yet.
+		*/
+		requestAnimationFrame(() => requestAnimationFrame(() => onPlacedChangeStable(true)));
+		return () => onPlacedChangeStable(false);
+	}, [onPlacedChangeStable]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Listbox, {
+		asChild: typeof children === "function" && items.length > VIRTUALIZE_THRESHOLD,
+		ref,
+		tabIndex: -1,
+		...props,
+		children: loading === "both" || loading === "skeleton" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_jsx_runtime.Fragment, { children: [
+			1,
+			2,
+			3
+		].map((item) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ListboxItem, {
+			addonBefore: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_skeleton.Skeleton, {
+				circle: true,
+				size: "xs"
+			}),
+			"aria-hidden": true,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_skeleton.Skeleton, {})
+		}, item)) }) : typeof children === "function" ? items.length > VIRTUALIZE_THRESHOLD ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ListboxVirtualized, {
+			highlightedItem,
+			items,
+			itemToKey,
+			children
+		}) : items.length > 0 ? items.map((item, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react.Fragment, { children: children(item, index, items[index - 1]) }, itemToKey(item))) : loading !== "spinner" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ListboxEmpty, { children: empty }) : items.length > 0 ? children : loading !== "spinner" && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ListboxEmpty, { children: empty })
+	});
+});
+ListboxItemized.displayName = "@optiaxiom/react/ListboxItemized";
+//#endregion
+//#region src/listbox/ListboxLabel.tsx
+/**
+* @group Listbox
+*/
+const ListboxLabel = (0, react.forwardRef)(({ children, ...props }, ref) => {
+	const { id } = useListboxGroupContext("@optiaxiom/react/ListboxLabel");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_box.Box, {
+		color: "fg.tertiary",
+		fontFamily: "mono",
+		fontSize: "sm",
+		id,
+		p: "8",
+		ref,
+		textTransform: "uppercase",
+		...props,
+		children
+	});
+});
+ListboxLabel.displayName = "@optiaxiom/react/ListboxLabel";
+//#endregion
+//#region src/listbox/ListboxRadioItem.tsx
+/**
+* @group Listbox
+*/
+const ListboxRadioItem = (0, react.forwardRef)(({ addonAfter, ...props }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ListboxItem, {
+		addonAfter: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_group.Group, {
+			gap: "8",
+			children: [addonAfter, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ListboxItemIndicator, { active: Boolean(props[props["role"] === "option" ? "aria-selected" : "aria-checked"]) })]
+		}),
+		ref,
+		...props
+	});
+});
+ListboxRadioItem.displayName = "@optiaxiom/react/ListboxRadioItem";
+//#endregion
+//#region src/listbox/ListboxSeparator.tsx
+/**
+* @group Listbox
+*/
+const ListboxSeparator = (0, react.forwardRef)((props, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_separator.Separator, {
+	"aria-hidden": true,
+	flex: "none",
+	mx: "8",
+	my: "4",
+	ref,
+	...props
+}));
+ListboxSeparator.displayName = "@optiaxiom/react/ListboxSeparator";
+//#endregion
+//#region src/switch/Switch.css.ts
+var control = require_recipeRuntime.recipeRuntime({
+	base: [{
+		display: "grid",
+		rounded: "full"
+	}, "zzopu5"],
+	variants: { size: {
+		md: [{ mt: "2" }, "_1u4ql7g"],
+		lg: ["_1j2slgg"]
+	} }
+});
+var input = require_recipeRuntime.recipeRuntime({ base: "_107dog0" });
+var root = require_recipeRuntime.recipeRuntime({ base: ["_1g9tbo", "_9kky79"] });
+var thumb = require_recipeRuntime.recipeRuntime({ base: [{
+	display: "block",
+	rounded: "full",
+	transition: "all"
+}, "eh5htl"] });
+//#endregion
+//#region src/switch/Switch.tsx
+/**
+* Control to allow toggling between checked and not checked state.
+*
+* @category form
+* @since 0.1.0
+*/
+const Switch = (0, react.forwardRef)(({ children, className, description, size = "md", ...props }, ref) => {
+	const { boxProps, restProps } = require_box.extractBoxProps(props);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_ToggleInputLabel.ToggleInput, {
+		...root({}, className),
+		...boxProps,
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ToggleInputLabel.ToggleInputHiddenInput, {
+				ref,
+				role: "switch",
+				...input(),
+				...restProps
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ToggleInputLabel.ToggleInputControl, {
+				...control({ size }),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_box.Box, { ...thumb() })
+			}),
+			(children || description) && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_ToggleInputLabel.ToggleInputContent, {
+				pt: size === "lg" ? "2" : "0",
+				children: [children && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ToggleInputLabel.ToggleInputLabel, {
+					fontWeight: "400",
+					children
+				}), description && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_ToggleInputLabel.ToggleInputDescription, { children: description })]
+			}),
+			props.checked !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SuggestionPopover, {})
+		]
+	});
+});
+Switch.displayName = "@optiaxiom/react/Switch";
+//#endregion
+//#region src/listbox/ListboxSwitchItem.tsx
+/**
+* @group Listbox
+*/
+const ListboxSwitchItem = (0, react.forwardRef)(({ addonAfter, onCheckedChange, ...props }, ref) => {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ListboxItem, {
+		addonAfter: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_group.Group, {
+			gap: "8",
+			children: [addonAfter, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_box.Box, {
+				onClick: onCheckedChange ? (event) => {
+					event.preventDefault();
+					event.stopPropagation();
+					onCheckedChange(true);
+				} : void 0,
+				...checkbox(),
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Switch, {
+					checked: Boolean(props[props["role"] === "option" ? "aria-selected" : "aria-checked"]),
+					hidden: true,
+					pointerEvents: "none",
+					tabIndex: -1
+				})
+			})]
+		}),
+		ref,
+		...props
+	});
+});
+ListboxSwitchItem.displayName = "@optiaxiom/react/ListboxSwitchItem";
+//#endregion
+//#region src/modal/ModalListbox.css.ts
+var listbox = require_recipeRuntime.recipeRuntime({
+	base: [{
+		maxW: "xs",
+		p: "4"
+	}, "_1lwytui"],
+	variants: {
+		maxH: {
+			xs: "_6rzgks",
+			sm: "g2zrzp",
+			md: "_1skl7lb",
+			lg: "_1gd76wx",
+			full: {}
+		},
+		minW: {
+			"0": {},
+			trigger: "_15dbrog"
+		}
+	}
+});
+//#endregion
+//#region src/modal/ModalListbox.tsx
+const ModalListbox = (0, react.forwardRef)(({ children, className, maxH, minW, ...props }, ref) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_transition.Transition, {
+	duration: "sm",
+	type: "pop",
+	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_paper.Paper, {
+		asChild: true,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Listbox, {
+			ref,
+			...listbox({
+				maxH,
+				minW
+			}, className),
+			...props,
+			children
+		})
+	})
+}));
+ModalListbox.displayName = "@optiaxiom/react/ModalListbox";
+//#endregion
+//#region src/popover/PopoverContentContext.ts
+const [PopoverContentProvider, usePopoverContentContext] = (0, _radix_ui_react_context.createContext)("@optiaxiom/react/PopoverContent", { side: void 0 });
+//#endregion
+//#region src/popover/PopoverContentImpl.tsx
+const PopoverContentImpl = (0, react.forwardRef)(({ children, ...props }, outerRef) => {
+	const innerRef = (0, react.useRef)(null);
+	const ref = (0, _radix_ui_react_compose_refs.useComposedRefs)(innerRef, outerRef);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PopoverContentProvider, {
+		side: "data-side" in props && (props["data-side"] === "bottom" || props["data-side"] === "left" || props["data-side"] === "right" || props["data-side"] === "top") ? props["data-side"] : void 0,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_optiaxiom_globals.ModalProvider, {
+			shardRef: innerRef,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_FocusBookmarkProvider.FocusBookmarkProvider, {
+				containerRef: innerRef,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_box.Box, {
+					ref,
+					...props,
+					children
+				})
+			})
+		})
+	});
+});
+PopoverContentImpl.displayName = "@optiaxiom/react/PopoverContentImpl";
+//#endregion
+//#region src/popover/PopoverContent.tsx
+/**
+* @group Popover
+*/
+const PopoverContent = (0, react.forwardRef)(({ align = "start", asChild, children, onCloseAutoFocus, sideOffset = 4, ...props }, ref) => {
+	const { open, presence, setPresence } = usePopoverContext("@optiaxiom/react/PopoverContent");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_transition.TransitionGroup, {
+		onPresenceChange: setPresence,
+		open,
+		presence,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Portal.Portal, {
+			asChild: true,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ModalListbox, {
+				asChild: true,
+				onBlur: require_FocusBookmarkProvider.onReactSelectInputBlur,
+				p: "16",
+				...props,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_popover.Content, {
+					align,
+					asChild: true,
+					collisionPadding: 16,
+					"data-state": presence ? "open" : "closed",
+					forceMount: true,
+					onCloseAutoFocus: (event) => {
+						onCloseAutoFocus?.(event);
+						if (event.defaultPrevented) return;
+						if (document.activeElement !== document.body)
+ /**
+						* In case we open a dialog from a popover that has an <input
+						* autoFocus /> - or we shift the focus away programmatically
+						* in some other way we need to handle that case and prevent
+						* shifting focus back to the trigger.
+						*/
+						event.preventDefault();
+					},
+					ref,
+					sideOffset,
+					...usePopoverScope(void 0),
+					children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(PopoverContentImpl, {
+						asChild,
+						children
+					})
+				})
+			})
+		})
+	});
+});
+PopoverContent.displayName = "@optiaxiom/react/PopoverContent";
+//#endregion
+//#region src/popover/PopoverTrigger.tsx
+/**
+* @extends Button
+* @group Popover
+*/
+const PopoverTrigger = (0, react.forwardRef)(({ asChild, children, ...props }, ref) => {
+	const { open, presence } = usePopoverContext("@optiaxiom/react/PopoverTrigger");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_radix_ui_react_popover.Trigger, {
+		"aria-expanded": open || presence,
+		asChild: true,
+		"data-state": open || presence ? "open" : "closed",
+		ref,
+		...props,
+		...usePopoverScope(void 0),
+		children: asChild ? children : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, { children })
+	});
+});
+PopoverTrigger.displayName = "@optiaxiom/react/PopoverTrigger";
+//#endregion
+//#region src/suggestion/SuggestionAutoPopover.tsx
+const SuggestionAutoPopover = (0, react.forwardRef)((props, ref) => {
+	const surface = require_useSurface.useSurface("property");
+	const register = require_useEvent.useEvent(surface?.suggestionPopover.register ?? (() => {}));
+	(0, react.useEffect)(() => {
+		return register();
+	}, [register]);
+	const suggestion = require_useSuggestions.useSuggestions("property", "value")?.find((s) => s.value !== surface?.value);
+	if (!suggestion || !surface) return null;
+	const text = surface.renderSuggestionValue ? surface.renderSuggestionValue(suggestion.value) : String(suggestion.value);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Popover, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(PopoverTrigger, {
+		appearance: "subtle",
+		"aria-label": "Opal suggestion",
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_avatar.Avatar, {
+			fallback: "opal",
+			size: "2xs"
+		}),
+		ref,
+		size: "sm",
+		...props
+	}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(PopoverContent, {
+		"aria-label": "Suggestion",
+		fontSize: "sm",
+		gap: "4",
+		p: "12",
+		children: [
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text.Text, { children: text }),
+			suggestion.reason && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_separator.Separator, { my: "8" }),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_heading.Heading, {
+					fontSize: "sm",
+					level: "4",
+					children: "Why this was suggested"
+				}),
+				/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_text.Text, {
+					color: "fg.secondary",
+					children: suggestion.reason
+				})
+			] }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_separator.Separator, { my: "8" }),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
+				icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_optiaxiom_icons_IconCheck.IconCheck, {}),
+				justifyContent: "center",
+				onClick: () => {
+					surface.accept(suggestion.id);
+				},
+				size: "sm",
+				children: "Accept"
+			})
+		]
+	})] });
+});
+SuggestionAutoPopover.displayName = "@optiaxiom/react/SuggestionAutoPopover";
+//#endregion
+//#region src/suggestion/SuggestionManualTrigger.tsx
+const SuggestionManualTrigger = (0, react.forwardRef)((props, ref) => {
+	const surface = require_useSurface.useSurface("property");
+	const register = require_useEvent.useEvent(surface?.suggestionPopover.register ?? (() => {}));
+	(0, react.useEffect)(() => {
+		return register();
+	}, [register]);
+	const [pending, setPending] = (0, react.useState)(false);
+	const suggestion = require_useSuggestions.useSuggestions("property", "value")?.[0];
+	const acceptSuggestion = require_useEvent.useEvent(() => {
+		if (!suggestion) return;
+		surface?.accept(suggestion.id);
+		setPending(false);
+	});
+	(0, react.useEffect)(() => {
+		acceptSuggestion();
+	}, [suggestion?.id, acceptSuggestion]);
+	if (!surface) return null;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_button.Button, {
+		appearance: "subtle",
+		"aria-label": "Opal suggestion",
+		icon: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_avatar.Avatar, {
+			fallback: "opal",
+			size: "2xs"
+		}),
+		loading: pending,
+		onClick: () => {
+			setPending(true);
+			surface.track({
+				name: "requested",
+				value: surface.value
+			});
+		},
+		ref,
+		size: "sm",
+		...props,
+		disabled: pending || props.disabled
+	});
+});
+SuggestionManualTrigger.displayName = "@optiaxiom/react/SuggestionManualTrigger";
+//#endregion
+//#region src/suggestion/SuggestionPopover.tsx
+/**
+* @experimental
+*/
+const SuggestionPopover = (0, react.forwardRef)((props, ref) => {
+	return require_useSurface.useSurface("property")?.manualSuggestion ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SuggestionManualTrigger, {
+		ref,
+		...props
+	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SuggestionAutoPopover, {
+		ref,
+		...props
+	});
+});
+SuggestionPopover.displayName = "@optiaxiom/react/SuggestionPopover";
+//#endregion
+Object.defineProperty(exports, "Checkbox", {
+	enumerable: true,
+	get: function() {
+		return Checkbox;
+	}
+});
+Object.defineProperty(exports, "Listbox", {
+	enumerable: true,
+	get: function() {
+		return Listbox;
+	}
+});
+Object.defineProperty(exports, "ListboxCheckboxItem", {
+	enumerable: true,
+	get: function() {
+		return ListboxCheckboxItem;
+	}
+});
+Object.defineProperty(exports, "ListboxEmpty", {
+	enumerable: true,
+	get: function() {
+		return ListboxEmpty;
+	}
+});
+Object.defineProperty(exports, "ListboxGroup", {
+	enumerable: true,
+	get: function() {
+		return ListboxGroup;
+	}
+});
+Object.defineProperty(exports, "ListboxItem", {
+	enumerable: true,
+	get: function() {
+		return ListboxItem;
+	}
+});
+Object.defineProperty(exports, "ListboxItemIndicator", {
+	enumerable: true,
+	get: function() {
+		return ListboxItemIndicator;
+	}
+});
+Object.defineProperty(exports, "ListboxItemized", {
+	enumerable: true,
+	get: function() {
+		return ListboxItemized;
+	}
+});
+Object.defineProperty(exports, "ListboxLabel", {
+	enumerable: true,
+	get: function() {
+		return ListboxLabel;
+	}
+});
+Object.defineProperty(exports, "ListboxRadioItem", {
+	enumerable: true,
+	get: function() {
+		return ListboxRadioItem;
+	}
+});
+Object.defineProperty(exports, "ListboxSeparator", {
+	enumerable: true,
+	get: function() {
+		return ListboxSeparator;
+	}
+});
+Object.defineProperty(exports, "ListboxSwitchItem", {
+	enumerable: true,
+	get: function() {
+		return ListboxSwitchItem;
+	}
+});
+Object.defineProperty(exports, "ModalListbox", {
+	enumerable: true,
+	get: function() {
+		return ModalListbox;
+	}
+});
+Object.defineProperty(exports, "Popover", {
+	enumerable: true,
+	get: function() {
+		return Popover;
+	}
+});
+Object.defineProperty(exports, "PopoverAnchor", {
+	enumerable: true,
+	get: function() {
+		return PopoverAnchor;
+	}
+});
+Object.defineProperty(exports, "PopoverContent", {
+	enumerable: true,
+	get: function() {
+		return PopoverContent;
+	}
+});
+Object.defineProperty(exports, "PopoverTrigger", {
+	enumerable: true,
+	get: function() {
+		return PopoverTrigger;
+	}
+});
+Object.defineProperty(exports, "SuggestionPopover", {
+	enumerable: true,
+	get: function() {
+		return SuggestionPopover;
+	}
+});
+Object.defineProperty(exports, "Switch", {
+	enumerable: true,
+	get: function() {
+		return Switch;
+	}
+});
+Object.defineProperty(exports, "usePopoverContentContext", {
+	enumerable: true,
+	get: function() {
+		return usePopoverContentContext;
+	}
+});
+Object.defineProperty(exports, "usePopoverContext", {
+	enumerable: true,
+	get: function() {
+		return usePopoverContext;
+	}
+});
+Object.defineProperty(exports, "withIcon", {
+	enumerable: true,
+	get: function() {
+		return withIcon;
+	}
+});