@wistia/ui 0.24.0 → 0.25.0-beta.4377f36c.f571fbc

package/dist/index.js

@@ -1,13 +1,13 @@
 
 /*
- * @license @wistia/ui v0.24.0
+ * @license @wistia/ui v0.25.0-beta.4377f36c.f571fbc
  *
  * Copyright (c) 2024-2026, Wistia, Inc. and its affiliates.
  *
  * This source code is unlicensed, all rights reserved.
  */
 
-import { Arrow, Content, Portal, Provider, Root, Trigger } from "@radix-ui/react-tooltip";
+import { Tooltip as Tooltip$1 } from "@base-ui/react/tooltip";
 import { Children, cloneElement, createContext, forwardRef, isValidElement, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState, useTransition } from "react";
 import { createGlobalStyle, css, keyframes, styled } from "styled-components";
 import { isArray, isBoolean, isEmptyString, isFunction, isNil, isNonEmptyArray, isNonEmptyString, isNotNil, isNotUndefined, isNumber, isRecord, isString, isUndefined } from "@wistia/type-guards";
@@ -25,24 +25,24 @@ import { FileAmountLimitValidator, FileSizeValidator, FileTypeValidator, ImageDi
 import { debounce, throttle } from "throttle-debounce";
 import { Link as Link$1, useInRouterContext } from "react-router";
 import { Collapsible as Collapsible$1 } from "@base-ui/react/collapsible";
-import { Item, Root as Root$1 } from "@radix-ui/react-radio-group";
+import { RadioGroup as RadioGroup$1 } from "@base-ui/react/radio-group";
 import { differenceEuclidean, easingSmootherstep, formatHex, interpolate, modeHsv, modeLrgb, modeRgb, parseHex, useMode, wcagContrast } from "culori/fn";
-import { Item as Item$1, Root as Root$2 } from "@radix-ui/react-toggle-group";
-import { Anchor, Close, Content as Content$1, PopoverArrow as PopoverArrow$1, Portal as Portal$1, Root as Root$3, Trigger as Trigger$1 } from "@radix-ui/react-popover";
-import { Root as Root$4, Thumb, Track } from "@radix-ui/react-slider";
+import { Radio as Radio$1 } from "@base-ui/react/radio";
+import { ToggleGroup } from "@base-ui/react/toggle-group";
+import { Toggle } from "@base-ui/react/toggle";
+import { Popover as Popover$1 } from "@base-ui/react/popover";
+import { Slider as Slider$1 } from "@base-ui/react/slider";
 import * as Ariakit from "@ariakit/react";
 import { matchSorter } from "match-sorter";
 import { createPortal } from "react-dom";
-import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "@radix-ui/react-dropdown-menu";
+import { ContextMenu as ContextMenu$1 } from "@base-ui/react/context-menu";
+import { Menu as Menu$1 } from "@base-ui/react/menu";
 import { ValidationError } from "yup";
 import { PreviewCard as PreviewCard$1 } from "@base-ui/react/preview-card";
 import ReactMarkdown from "react-markdown";
-import { Close as Close$1, Content as Content$2, Description, DialogOverlay, Portal as Portal$2, Root as Root$5, Title } from "@radix-ui/react-dialog";
+import { Dialog } from "@base-ui/react/dialog";
 import { Progress } from "@base-ui/react/progress";
-import { ToggleGroup } from "@base-ui/react/toggle-group";
-import { Toggle } from "@base-ui/react/toggle";
-import { Content as Content$3, Group, Item as Item$2, ItemIndicator, ItemText, Label as Label$1, Portal as Portal$3, Root as Root$6, ScrollDownButton, ScrollUpButton, Trigger as Trigger$2, Value, Viewport } from "@radix-ui/react-select";
-import { Slider as Slider$1 } from "@base-ui/react/slider";
+import { Select as Select$1 } from "@base-ui/react/select";
 import { Tabs as Tabs$1 } from "@base-ui/react/tabs";
 //#region src/css/globalStyleAdjustmentsCss.tsx
 const globalStyleAdjustmentsCss = css`
@@ -453,7 +453,7 @@ const UIProvider = ({ children }) => {
 	if (useContext(UIProviderNestingContext)) return /* @__PURE__ */ jsx(Fragment, { children });
 	return /* @__PURE__ */ jsx(UIProviderNestingContext.Provider, {
 		value: true,
-		children: /* @__PURE__ */ jsx(AriaLiveProvider, { children: /* @__PURE__ */ jsxs(Provider, { children: [
+		children: /* @__PURE__ */ jsx(AriaLiveProvider, { children: /* @__PURE__ */ jsxs(Tooltip$1.Provider, { children: [
 			/* @__PURE__ */ jsx(GlobalStyle, {}),
 			children,
 			/* @__PURE__ */ jsx(ToastProvider, {})
@@ -7792,7 +7792,7 @@ const Container$9 = styled.div`
 const LabelContainer$1 = styled.div`
   padding-top: var(--wui-space-01);
 `;
-const ItemsContainer$1 = styled(Root$1)`
+const ItemsContainer$1 = styled(RadioGroup$1)`
   display: flex;
   flex-wrap: wrap;
   align-items: center;
@@ -7807,7 +7807,7 @@ const ItemsContainer$1 = styled(Root$1)`
 const ColorGrid = ({ children, label }) => {
 	const { valueAsHex, onChangeNonDerivedValueAsHsv } = useColorPickerState();
 	const onValueChange = useCallback((value) => {
-		onChangeNonDerivedValueAsHsv(convertToHsv(value));
+		if (typeof value === "string") onChangeNonDerivedValueAsHsv(convertToHsv(value));
 	}, [onChangeNonDerivedValueAsHsv]);
 	return /* @__PURE__ */ jsxs(Container$9, { children: [label != null && /* @__PURE__ */ jsx(LabelContainer$1, { children: /* @__PURE__ */ jsx(Label, { children: label }) }), /* @__PURE__ */ jsx(ItemsContainer$1, {
 		onValueChange,
@@ -7905,7 +7905,7 @@ const slideRightAndFade = keyframes`
     transform: translateX(0);
   }
 `;
-const StyledContent$2 = styled(Content)`
+const StyledPopup$5 = styled(Tooltip$1.Popup)`
   --tooltip-font-family: var(--wui-typography-family-default);
   --tooltip-border-radius: var(--wui-border-radius-05);
   --tooltip-bg: var(--wui-color-bg-tooltip);
@@ -7931,27 +7931,54 @@ const StyledContent$2 = styled(Content)`
   max-width: 30em;
   z-index: var(--wui-zindex-tooltip);
 
-  &[data-state='closed'] {
+  &[data-closed] {
     animation-name: ${hide};
   }
 
-  &[data-state='delayed-open'][data-side='top'] {
+  &[data-open][data-side='top'] {
     animation-name: ${slideUpAndFade};
   }
 
-  &[data-state='delayed-open'][data-side='right'] {
+  &[data-open][data-side='right'] {
     animation-name: ${slideRightAndFade};
   }
 
-  &[data-state='delayed-open'][data-side='bottom'] {
+  &[data-open][data-side='bottom'] {
     animation-name: ${slideDownAndFade};
   }
 
-  &[data-state='delayed-open'][data-side='left'] {
+  &[data-open][data-side='left'] {
     animation-name: ${slideLeftAndFade};
   }
+
+  overflow: visible;
+`;
+const arrowEdgeCss = css`
+  &[data-side='top'] {
+    bottom: 0;
+    transform: translateY(calc(100% - 2px));
+  }
+
+  &[data-side='bottom'] {
+    top: 0;
+    transform: translateY(calc(-100% + 2px)) rotate(180deg);
+  }
+
+  &[data-side='left'] {
+    right: 0;
+    transform: translateX(calc(100% - 4px)) rotate(-90deg);
+  }
+
+  &[data-side='right'] {
+    left: 0;
+    transform: translateX(calc(-100% + 4px)) rotate(90deg);
+  }
+`;
+const StyledTooltipArrow = styled.svg`
+  ${arrowEdgeCss}
 `;
 const VISUAL_OFFSET = 6;
+const ARROW_EXTENSION = 6;
 /**
 * Tooltips are a way to provide additional information or context to a user when they hover or focus an element.
 * For elements that are not interactive, consider using a [Popover]() instead.
@@ -7961,29 +7988,27 @@ const Tooltip = ({ delay = 500, direction = "top", content, children, forceOpen,
 	const rootProps = {};
 	if (content === "" || content === null) rootProps.open = false;
 	if (forceOpen === true) rootProps.open = true;
-	return /* @__PURE__ */ jsxs(Root, {
-		delayDuration: delay,
+	return /* @__PURE__ */ jsxs(Tooltip$1.Root, {
 		...rootProps,
-		children: [/* @__PURE__ */ jsx(Trigger, {
-			asChild: true,
-			children
-		}), /* @__PURE__ */ jsx(Portal, {
-			container,
-			children: /* @__PURE__ */ jsxs(StyledContent$2, {
+		children: [/* @__PURE__ */ jsx(Tooltip$1.Trigger, {
+			delay,
+			render: isValidElement(children) ? children : /* @__PURE__ */ jsx("span", { children })
+		}), /* @__PURE__ */ jsx(Tooltip$1.Portal, {
+			...container != null ? { container } : {},
+			children: /* @__PURE__ */ jsx(Tooltip$1.Positioner, {
 				side: direction,
-				sideOffset: hideArrow ? VISUAL_OFFSET : VISUAL_OFFSET - 2,
-				children: [content, !hideArrow ? /* @__PURE__ */ jsx(Arrow, {
-					asChild: true,
-					children: /* @__PURE__ */ jsx("svg", {
+				sideOffset: hideArrow ? VISUAL_OFFSET : VISUAL_OFFSET + ARROW_EXTENSION,
+				children: /* @__PURE__ */ jsxs(StyledPopup$5, {
+					role: "tooltip",
+					children: [content, !hideArrow ? /* @__PURE__ */ jsx(Tooltip$1.Arrow, { render: /* @__PURE__ */ jsx(StyledTooltipArrow, {
 						fill: "var(--tooltip-bg)",
 						height: "8",
-						style: { transform: "translateY(-2px)" },
 						viewBox: "0 0 12 8",
 						width: "12",
 						xmlns: "http://www.w3.org/2000/svg",
 						children: /* @__PURE__ */ jsx("path", { d: "M6.8 6.93333C6.4 7.46667 5.6 7.46667 5.2 6.93333L-2.54292e-07 -1.04907e-06L12 0L6.8 6.93333Z" })
-					})
-				}) : null]
+					}) }) : null]
+				})
 			})
 		})]
 	});
@@ -7991,7 +8016,7 @@ const Tooltip = ({ delay = 500, direction = "top", content, children, forceOpen,
 Tooltip.displayName = "Tooltip_UI";
 //#endregion
 //#region src/components/ColorPicker/ColorGridOption.tsx
-const Container$8 = styled(Item)`
+const Container$8 = styled(Radio$1.Root)`
   border: none;
   appearance: none;
   outline: none;
@@ -8032,7 +8057,7 @@ const ColorGridOption = ({ value: rawValue, name }) => {
 ColorGridOption.displayName = "ColorGridOption_UI";
 //#endregion
 //#region src/components/ColorPicker/ColorList.tsx
-const Container$7 = styled(Root$2)`
+const Container$7 = styled(ToggleGroup)`
   display: grid;
   grid-template-columns: minmax(0, 1fr);
 `;
@@ -8044,12 +8069,12 @@ const Container$7 = styled(Root$2)`
 const ColorList = ({ children }) => {
 	const { valueAsHex, onChangeNonDerivedValueAsHsv } = useColorPickerState();
 	return /* @__PURE__ */ jsx(Container$7, {
-		onValueChange: useCallback((value) => {
-			if (value === "") return;
+		onValueChange: useCallback((newValue) => {
+			const value = newValue[0];
+			if (value === void 0 || value === "") return;
 			onChangeNonDerivedValueAsHsv(convertToHsv(value));
 		}, [onChangeNonDerivedValueAsHsv]),
-		type: "single",
-		value: valueAsHex,
+		value: [valueAsHex],
 		children
 	});
 };
@@ -8101,7 +8126,7 @@ const ColorNameOrHexCode = ({ name, hexCode }) => {
 };
 //#endregion
 //#region src/components/ColorPicker/ColorListOption.tsx
-const Container$5 = styled(Item$1)`
+const Container$5 = styled(Toggle)`
   border: none;
   appearance: none;
   outline: none;
@@ -8178,7 +8203,7 @@ const ColorPicker = ({ children, colorForComparison = DEFAULT_COLOR_FOR_COMPARIS
 	const handleOpenChange = (isOpen) => {
 		if (isFunction(onOpenChange)) onOpenChange(isOpen);
 	};
-	return /* @__PURE__ */ jsx(Root$3, {
+	return /* @__PURE__ */ jsx(Popover$1.Root, {
 		modal: false,
 		onOpenChange: handleOpenChange,
 		children: /* @__PURE__ */ jsx(ColorPickerProvider, {
@@ -8194,7 +8219,7 @@ const ColorPicker = ({ children, colorForComparison = DEFAULT_COLOR_FOR_COMPARIS
 ColorPicker.displayName = "ColorPicker_UI";
 //#endregion
 //#region src/components/ColorPicker/ColorPickerPopoverContent.tsx
-const StyledPopoverContent = styled(Content$1)`
+const StyledPopup$4 = styled(Popover$1.Popup)`
   background-color: var(--wui-color-bg-surface);
   border-radius: var(--wui-border-radius-02);
   border: 1px solid var(--wui-color-border);
@@ -8211,10 +8236,10 @@ const StyledPopoverContent = styled(Content$1)`
 * Use `ColorPickerSection` to organize content within it.
 */
 const ColorPickerPopoverContent = ({ children }) => {
-	return /* @__PURE__ */ jsx(Portal$1, { children: /* @__PURE__ */ jsx(StyledPopoverContent, {
+	return /* @__PURE__ */ jsx(Popover$1.Portal, { children: /* @__PURE__ */ jsx(Popover$1.Positioner, {
 		align: "start",
 		sideOffset: 4,
-		children
+		children: /* @__PURE__ */ jsx(StyledPopup$4, { children })
 	}) });
 };
 ColorPickerPopoverContent.displayName = "ColorPickerPopoverContent_UI";
@@ -8261,7 +8286,7 @@ const ValueNameOrHexCode = (props) => {
 ValueNameOrHexCode.displayName = "ValueNameOrHexCode_UI";
 //#endregion
 //#region src/components/ColorPicker/ColorPickerTrigger.tsx
-const StyledPopoverTrigger = styled(Trigger$1)`
+const StyledPopoverTrigger = styled(Popover$1.Trigger)`
   background-color: var(--wui-color-bg-surface);
   border-radius: var(--wui-border-radius-rounded);
   border: none;
@@ -8914,7 +8939,7 @@ const Container$2 = styled.div`
   padding: 0 var(--wui-space-03);
   position: relative;
 `;
-const Root$7 = styled(Root$4)`
+const Root = styled(Slider$1.Root)`
   align-items: center;
   display: flex;
   position: absolute;
@@ -8923,10 +8948,10 @@ const Root$7 = styled(Root$4)`
   width: calc(100% - var(--wui-space-05));
   height: 16px;
 `;
-const Track$1 = styled(Track)`
+const Track = styled(Slider$1.Track)`
   width: 100%;
 `;
-const Thumb$2 = styled(Thumb)`
+const Thumb$1 = styled(Slider$1.Thumb)`
   position: relative;
 `;
 const ThumbInner = styled.div`
@@ -8941,7 +8966,7 @@ const ThumbInner = styled.div`
   transform: translate(-50%, -50%);
   width: 16px;
 
-  ${Thumb$2}:focus-visible > & {
+  ${Thumb$1}:focus-visible > & {
     box-shadow:
       inset 0 0 0 2px var(--wui-color-border),
       inset 0 0 0 3px black;
@@ -8966,7 +8991,7 @@ const HueSlider = (props) => {
 		return { backgroundColor: formatHex(valueAsHsv) };
 	}, [valueAsHsv]);
 	const onHueChange = useCallback((values) => {
-		const newHue = values[0] ?? 0;
+		const newHue = typeof values === "number" ? values : values[0] ?? 0;
 		onChangeNonDerivedValueAsHsv({
 			...nonDerivedValueAsHsv,
 			h: newHue
@@ -8975,17 +9000,17 @@ const HueSlider = (props) => {
 	return /* @__PURE__ */ jsxs(Container$2, {
 		...props,
 		style: containerStyle,
-		children: [/* @__PURE__ */ jsxs(Root$7, {
+		children: [/* @__PURE__ */ jsx(Root, {
 			max: 360,
 			min: 0,
 			onValueChange: onHueChange,
 			orientation: "horizontal",
 			step: 1,
 			value: [nonDerivedValueAsHsv.h ?? 0],
-			children: [/* @__PURE__ */ jsx(Track$1, {}), /* @__PURE__ */ jsx(Thumb$2, {
+			children: /* @__PURE__ */ jsxs(Slider$1.Control, { children: [/* @__PURE__ */ jsx(Track, {}), /* @__PURE__ */ jsx(Thumb$1, {
 				"aria-label": "Hue slider",
 				children: /* @__PURE__ */ jsx(ThumbInner, { style: thumbInnerStyle })
-			})]
+			})] })
 		}), /* @__PURE__ */ jsx(HSVHueCanvas, { hsv: valueAsHsv })]
 	});
 };
@@ -9115,7 +9140,7 @@ const Container$1 = styled.div`
   overflow: hidden;
   position: relative;
 `;
-const Thumb$1 = styled.button.attrs({ type: "button" })`
+const Thumb = styled.button.attrs({ type: "button" })`
   appearance: none;
   border-radius: var(--wui-border-radius-rounded);
   border: none;
@@ -9250,7 +9275,7 @@ const SaturationAndValuePicker = ({ dataTestId }) => {
 		"data-testid": dataTestId,
 		onMouseDown: onContainerMouseDown,
 		children: [
-			/* @__PURE__ */ jsx(Thumb$1, {
+			/* @__PURE__ */ jsx(Thumb, {
 				ref: thumbRef,
 				"aria-describedby": instructionsId,
 				"aria-label": "Saturation and value thumb",
@@ -9715,18 +9740,18 @@ const menuContentCss = css`
   font-family: var(--menu-font-family);
   background: var(--menu-bg);
   border-radius: var(--menu-border-radius);
-  box-shadow: var(--menu-shadow); /* TODO - Need a box-shadow token */
-  max-height: var(--radix-dropdown-menu-content-available-height);
+  box-shadow: var(--menu-shadow);
+  max-height: var(--available-height);
   min-width: var(--menu-min-width);
   max-width: var(--menu-max-width);
   overflow: auto;
   padding: var(--menu-padding);
-  transform-origin: var(--radix-dropdown-menu-content-transform-origin);
+  transform-origin: var(--transform-origin);
   z-index: var(--wui-zindex-menu);
   border: 1px solid var(--wui-color-border);
 
-  &[data-state='closed'] {
-    animation: var(--menu-animation-duration) var(--wui-motion-ease-in) ${close}; /* TODO - need easing tokens */
+  &[data-closed] {
+    animation: var(--menu-animation-duration) var(--wui-motion-ease-in) ${close};
   }
 
   ${mq.smAndUp} {
@@ -9741,18 +9766,21 @@ const menuContentCss = css`
     margin: var(--menu-divider-margin) 0;
   }
 `;
-const MenuContent = styled(DropdownMenuContent)`
+const MenuPopup = styled(Menu$1.Popup)`
   ${menuContentCss}
-  min-width: var(--radix-dropdown-menu-trigger-width);
+  min-width: var(--anchor-width);
 `;
 /**
 * Displays a menu to the users with a set of actions.
 */
 const Menu = forwardRef(({ align = "start", children, disabled = false, compact = false, trigger, label, isOpen, side = "bottom", triggerProps = {}, onOpenChange, ...props }, ref) => {
 	const contextValue = useMemo(() => ({ compact }), [compact]);
+	const handleOpenChange = useCallback((nextOpen) => {
+		if (nextOpen !== isOpen) onOpenChange?.(nextOpen);
+	}, [isOpen, onOpenChange]);
 	let controlProps = isNotNil(onOpenChange) && isNotNil(isOpen) ? {
 		open: isOpen,
-		onOpenChange
+		onOpenChange: handleOpenChange
 	} : {};
 	if (disabled) controlProps = {
 		open: false,
@@ -9760,584 +9788,233 @@ const Menu = forwardRef(({ align = "start", children, disabled = false, compact
 	};
 	return /* @__PURE__ */ jsx(MenuContext.Provider, {
 		value: contextValue,
-		children: /* @__PURE__ */ jsxs(DropdownMenu, {
+		children: /* @__PURE__ */ jsxs(Menu$1.Root, {
 			modal: false,
 			...controlProps,
-			children: [/* @__PURE__ */ jsx(DropdownMenuTrigger, {
-				asChild: true,
-				children: isNotUndefined(trigger) ? trigger : /* @__PURE__ */ jsx(Button, {
-					ref,
-					"aria-expanded": isOpen,
-					disabled,
-					forceState: isOpen ? "active" : void 0,
-					rightIcon: /* @__PURE__ */ jsx(Icon, { type: "caret-down" }),
-					...triggerProps,
-					children: label
-				})
-			}), /* @__PURE__ */ jsx(DropdownMenuPortal, { children: /* @__PURE__ */ jsx(MenuContent, {
-				...props,
-				$compact: compact,
+			children: [/* @__PURE__ */ jsx(Menu$1.Trigger, { render: isNotUndefined(trigger) ? trigger : /* @__PURE__ */ jsx(Button, {
+				ref,
+				disabled,
+				forceState: isOpen ? "active" : void 0,
+				rightIcon: /* @__PURE__ */ jsx(Icon, { type: "caret-down" }),
+				...triggerProps,
+				children: label
+			}) }), /* @__PURE__ */ jsx(Menu$1.Portal, { children: /* @__PURE__ */ jsx(Menu$1.Positioner, {
 				align,
 				collisionPadding: 8,
-				onFocusOutside: (event) => {
-					event.preventDefault();
-				},
 				side,
 				sideOffset: 6,
-				children
+				children: /* @__PURE__ */ jsx(MenuPopup, {
+					...props,
+					$compact: compact,
+					children
+				})
 			}) })]
 		})
 	});
 });
 Menu.displayName = "Menu_UI";
-Menu.displayName = "Menu_UI";
 //#endregion
-//#region src/components/Menu/MenuLabel.tsx
-const StyledMenuLabel = styled(DropdownMenuLabel)`
-  padding: var(--wui-space-02);
+//#region src/components/ContextMenu/ContextMenu.tsx
+const ContextMenuPopup = styled(Menu$1.Popup)`
+  ${menuContentCss}
+  outline: none;
 `;
-const MenuLabel = ({ children, ...props }) => {
-	return /* @__PURE__ */ jsx(StyledMenuLabel, {
-		asChild: true,
-		...props,
-		children: /* @__PURE__ */ jsx(Heading, {
-			renderAs: "span",
-			variant: "heading6",
-			...props,
-			children
+/**
+* The ContextMenu is an extended implementation of the [Menu]() component that allows for right-click context menus.
+* It can be used in two ways:
+* 1. By providing a `triggerRef`, which will render the menu when the referenced element is right-clicked.
+* 2. By providing a `position` prop, which will render the menu at the specified coordinates.
+*/
+const ContextMenu = ({ position, triggerRef, children, side = "bottom", onRequestClose = () => null, compact = false }) => {
+	const [isRightClicked, setIsRightClicked] = useState(false);
+	const [menuPosition, setMenuPosition] = useState(position ?? {
+		x: 0,
+		y: 0
+	});
+	const contextValue = useMemo(() => ({ compact }), [compact]);
+	useEffect(() => {
+		if (isNil(position)) {
+			const onContextMenu = (event) => {
+				event.preventDefault();
+				setMenuPosition({
+					x: event.clientX,
+					y: event.clientY
+				});
+				setIsRightClicked(true);
+			};
+			const triggerEl = triggerRef?.current;
+			triggerEl?.addEventListener("contextmenu", onContextMenu);
+			return () => {
+				triggerEl?.removeEventListener("contextmenu", onContextMenu);
+			};
+		}
+		return () => null;
+	}, [position, triggerRef]);
+	const isOpen = isNotNil(position) || isRightClicked;
+	const anchor = useMemo(() => ({ getBoundingClientRect: () => ({
+		x: menuPosition.x,
+		y: menuPosition.y,
+		width: 0,
+		height: 0,
+		top: menuPosition.y,
+		right: menuPosition.x,
+		bottom: menuPosition.y,
+		left: menuPosition.x
+	}) }), [menuPosition.x, menuPosition.y]);
+	const handleOpenChange = (next) => {
+		setIsRightClicked(next);
+		if (!next) onRequestClose();
+	};
+	const menu = /* @__PURE__ */ jsx(MenuContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx(ContextMenu$1.Root, {
+			onOpenChange: handleOpenChange,
+			open: isOpen,
+			children: /* @__PURE__ */ jsx(Menu$1.Portal, { children: /* @__PURE__ */ jsx(Menu$1.Positioner, {
+				anchor,
+				collisionPadding: 8,
+				side,
+				sideOffset: 6,
+				children: /* @__PURE__ */ jsx(ContextMenuPopup, {
+					$compact: compact,
+					children
+				})
+			}) })
 		})
 	});
+	if (isNotNil(triggerRef)) return createPortal(menu, document.body);
+	return menu;
 };
-MenuLabel.displayName = "MenuLabel_UI";
 //#endregion
-//#region src/components/Menu/MenuItemButton.tsx
-const StyledButton = styled(Button)`
-  ${({ colorScheme }) => getColorScheme(colorScheme)};
+//#region src/components/CustomizableThemeWrapper/CustomizableThemeWrapper.tsx
+const StyledCustomizableThemeWrapper = styled.div((props) => props.$overrides);
+/**
+* Used for overriding the default theme tokens with custom values.
+* This should only be used when the ui systems team has been consulted first.
+*/
+const CustomizableThemeWrapper = ({ children, overrides, ...props }) => /* @__PURE__ */ jsx(StyledCustomizableThemeWrapper, {
+	...props,
+	$overrides: overrides,
+	"data-wui-theme": "true",
+	children
+});
+CustomizableThemeWrapper.displayName = "CustomizableThemeWrapper_UI";
+//#endregion
+//#region src/components/DataCards/DataCard.tsx
+const pulse = keyframes`
+  0%,
+      100% {
+        opacity: 1;
+      }
+      50% {
+        opacity: 0.5;
+      }
+`;
+const StyledDataCard = styled.div`
+  --wui-data-card-text: var(--wui-color-text-button);
+  --wui-color-text: var(--wui-data-card-text);
+  --wui-data-card-background: var(--wui-color-bg-surface-secondary);
+  --wui-data-card-background-hover: var(--wui-color-bg-surface-secondary-hover);
+  --wui-data-card-background-active: var(--wui-color-bg-surface-secondary-active);
+  --wui-data-card-skeleton-color: var(--wui-color-bg-surface-tertiary);
 
-  display: flex;
-  flex-direction: row;
-  gap: var(--menu-item-inner-gap);
-  padding: var(--menu-item-padding);
-  border-radius: var(--wui-border-radius-01);
-  text-align: left;
-  color: var(--wui-color-text-button);
-  font-size: var(--menu-label-font-size);
-  font-weight: var(--menu-label-font-weight);
-  line-height: var(--menu-label-line-height);
-  transition: background-color var(--wui-motion-duration-01) var(--wui-motion-ease);
+  display: grid;
+  grid-template-areas: 'label slot' 'value value';
+  grid-template-rows: auto auto;
+  grid-template-columns: auto auto;
+  gap: var(--wui-space-01);
+  padding: var(--wui-space-03);
+  background: var(--wui-data-card-background);
+  flex: 1;
+  border-radius: var(--wui-border-radius-02);
+  position: relative;
+  transition:
+    background var(--wui-motion-duration-01) var(--wui-motion-ease),
+    box-shadow var(--wui-motion-duration-01) var(--wui-motion-ease),
+    color var(--wui-motion-duration-01) var(--wui-motion-ease);
 
-  &:active {
-    background-color: var(--wui-color-bg-surface-active);
+  [data-wui-data-card-hover-icon] {
+    opacity: 0;
+    transform: translateX(-16px);
+    transition: all var(--wui-motion-duration-02) var(--wui-motion-ease-out);
   }
 
-  &[data-highlighted] {
-    outline: none;
-    ${({ $isGated }) => $isGated && getColorScheme("purple")};
-    background-color: var(--wui-color-bg-surface-hover);
+  &:has([data-wui-data-card-subtitle]) {
+    grid-template-areas: 'label slot' 'value value' 'subtitle subtitle';
+    grid-template-rows: auto auto auto;
   }
 
-  &[aria-disabled='true'] {
-    --wui-color-text-button: var(--wui-color-text-disabled);
-    --wui-color-text-secondary: var(--wui-color-text-disabled);
-    --wui-color-icon: var(--wui-color-icon-disabled);
+  [data-wui-data-card-skeleton='true'] {
+    pointer-events: none;
+    background-color: var(--wui-data-card-skeleton-color);
+    animation: ${pulse} 1.5s var(--wui-motion-ease-in-out) 0.5s infinite;
+    color: transparent;
+    user-select: none;
+    border-radius: var(--wui-border-radius-01);
+    width: fit-content;
+  }
 
-    &[data-highlighted] {
-      background-color: transparent;
+  &[data-click-region] {
+    &:not([disabled]) {
+      cursor: pointer;
+
+      &:hover {
+        --wui-data-card-text: var(--wui-color-text-button);
+        --wui-data-card-background: var(--wui-color-bg-surface-secondary-hover);
+
+        [data-wui-data-card-hover-icon] {
+          opacity: 1;
+          transform: translateX(0);
+        }
+      }
+
+      &:active {
+        --wui-data-card-background: var(--wui-color-bg-surface-secondary-active);
+      }
+
+      &:has([data-click-region-target-button]:focus-visible),
+      &:has([data-click-region-target-link]:focus-visible) {
+        --wui-data-card-focus-ring: var(--wui-color-border);
+
+        box-shadow: inset 0 0 0 2px var(--wui-data-card-focus-ring);
+      }
+
+      &:has([data-click-region-target-button][aria-pressed='true']) {
+        --wui-data-card-text: var(--wui-color-text-selected);
+        --wui-data-card-background: var(--wui-color-bg-surface-selected);
+        --wui-data-card-background-hover: var(--wui-color-bg-surface-selected-hover);
+        --wui-data-card-background-active: var(--wui-color-bg-surface-selected-active);
+        --wui-data-card-focus-ring: var(--wui-color-border-selected);
+        --wui-data-card-skeleton-color: var(--wui-color-bg-surface-selected-active);
+      }
+    }
+
+    &[disabled] {
+      pointer-events: none;
     }
+
+    ${({ $colorScheme }) => getColorScheme($colorScheme)}
   }
 `;
-const StyledLeftIconContainer = styled.div`
-  height: var(--menu-item-left-icon-size);
-  width: var(--menu-item-left-icon-size);
+const StyledLabel$1 = styled(Heading)`
+  grid-area: label;
 
-  && {
-    svg {
-      height: var(--menu-item-left-icon-size);
-      width: var(--menu-item-left-icon-size);
-      flex: 0 0 var(--menu-item-left-icon-size);
-    }
+  &[data-wui-data-card-skeleton='true'] {
+    width: 80px;
+  }
+
+  button {
+    text-align: left;
   }
 `;
-const StyledRightIconContainer = styled.div`
-  height: var(--menu-item-right-icon-size);
-  width: var(--menu-item-right-icon-size);
+const StyledValue = styled(Heading)`
+  grid-area: value;
 
-  && {
-    svg {
-      height: var(--menu-item-right-icon-size);
-      width: var(--menu-item-right-icon-size);
-      flex: 0 0 var(--menu-item-right-icon-size);
-    }
+  &[data-wui-data-card-skeleton='true'] {
+    width: min(90%, 156px);
   }
 `;
-const StyledLabelAndDescriptionContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  gap: var(--menu-label-description-gap);
-  flex-basis: 100%;
-`;
-const StyledBadgeContainer = styled.div`
-  align-self: start;
-  justify-self: end;
-  font-size: var(--wui-typography-label-4-size);
-  color: var(--wui-color-text-secondary);
-`;
-const MenuItemButton = forwardRef(({ children, appearance, command, icon, ...props }, ref) => {
-	let { colorScheme, badge } = props;
-	if (appearance === "dangerous") {
-		if (isNotUndefined(colorScheme)) console.warn("colorScheme prop is ignored when appearance is dangerous");
-		colorScheme = "error";
-	}
-	if (appearance === "gated") badge = /* @__PURE__ */ jsx(Icon, {
-		colorScheme: "purple",
-		style: {
-			height: "16px",
-			width: "16px"
-		},
-		type: "sparkle"
-	});
-	return /* @__PURE__ */ jsxs(StyledButton, {
-		...props,
-		ref,
-		$isGated: appearance === "gated",
-		colorScheme: colorScheme ?? "inherit",
-		fullWidth: true,
-		unstyled: true,
-		children: [
-			isNotNil(props.leftIcon) ? /* @__PURE__ */ jsx(StyledLeftIconContainer, { children: props.leftIcon }) : null,
-			/* @__PURE__ */ jsx(StyledLabelAndDescriptionContainer, { children }),
-			isNotNil(badge) || isNotNil(command) ? /* @__PURE__ */ jsx(StyledBadgeContainer, { children: badge ?? command }) : null,
-			isNotNil(props.rightIcon) ? /* @__PURE__ */ jsx(StyledRightIconContainer, { children: props.rightIcon }) : null
-		]
-	});
-});
-MenuItemButton.displayName = "MenuItemButton_UI";
-//#endregion
-//#region src/components/Menu/MenuItemLabel.tsx
-const StyledMenuItemLabel = styled.span`
-  /* avoid no-empty-source rule */
-`;
-const MenuItemLabel = ({ children }) => {
-	return /* @__PURE__ */ jsx(StyledMenuItemLabel, { children });
-};
-//#endregion
-//#region src/components/Menu/MenuItemDescription.tsx
-const StyledMenuItemDescription = styled(Text)`
-  /* avoid no-empty-source rule */
-`;
-const MenuItemDescription = ({ children }) => {
-	return /* @__PURE__ */ jsx(StyledMenuItemDescription, {
-		prominence: "secondary",
-		variant: "body4",
-		children
-	});
-};
-//#endregion
-//#region src/components/Menu/SubMenu.tsx
-const SubMenuContent = styled(DropdownMenuSubContent)`
-  ${menuContentCss}
-
-  ${mq.smAndDown} {
-    transform: translateX(-100%) !important;
-  }
-`;
-const StyledMobileSubMenuItems = styled.div`
-  margin-left: var(--wui-space-04);
-`;
-const StyledSubTrigger = styled(DropdownMenuSubTrigger)`
-  outline: none;
-
-  &[data-state='open'],
-  &[data-highlighted] {
-    background-color: var(--wui-color-bg-surface-hover);
-  }
-`;
-const SubMenuTrigger = ({ icon, ...props }) => {
-	const { isSmAndUp } = useMq();
-	return /* @__PURE__ */ jsx(isSmAndUp ? StyledSubTrigger : DropdownMenuItem, {
-		asChild: true,
-		children: /* @__PURE__ */ jsx(MenuItemButton, {
-			...props,
-			leftIcon: icon,
-			rightIcon: /* @__PURE__ */ jsx(Icon, { type: "caret-right" })
-		})
-	});
-};
-const SubMenu = ({ label, description, children, onOpenChange = () => null, ...props }) => {
-	const { isSmAndUp } = useMq();
-	const [isExpanded, setIsExpanded] = useState(false);
-	const { compact } = useMenuContext();
-	return isSmAndUp ? /* @__PURE__ */ jsxs(DropdownMenuSub, {
-		onOpenChange,
-		children: [/* @__PURE__ */ jsxs(SubMenuTrigger, {
-			...props,
-			children: [/* @__PURE__ */ jsx(MenuItemLabel, { children: label }), isNotNil(description) ? /* @__PURE__ */ jsx(MenuItemDescription, { children: description }) : null]
-		}), /* @__PURE__ */ jsx(DropdownMenuPortal, { children: /* @__PURE__ */ jsx(SubMenuContent, {
-			$compact: compact,
-			children
-		}) })]
-	}) : /* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [/* @__PURE__ */ jsxs(SubMenuTrigger, {
-		...props,
-		onClick: (event) => {
-			event.preventDefault();
-			setIsExpanded((prev) => !prev);
-		},
-		children: [/* @__PURE__ */ jsx(MenuItemLabel, { children: label }), /* @__PURE__ */ jsx(MenuItemDescription, { children: description })]
-	}), /* @__PURE__ */ jsx(StyledMobileSubMenuItems, { children: isExpanded ? children : null })] });
-};
-SubMenu.displayName = "SubMenu_UI";
-//#endregion
-//#region src/components/Menu/MenuItem.tsx
-const MenuItem = forwardRef(({ onSelect = () => null, ...props }, ref) => {
-	return /* @__PURE__ */ jsx(DropdownMenuItem, {
-		asChild: true,
-		onSelect,
-		children: /* @__PURE__ */ jsx(MenuItemButton, {
-			...props,
-			ref,
-			leftIcon: props.icon
-		})
-	});
-});
-MenuItem.displayName = "MenuItem_UI";
-//#endregion
-//#region src/components/Menu/MenuRadioGroup.tsx
-const MenuRadioGroup = ({ children, ...props }) => {
-	return /* @__PURE__ */ jsx(DropdownMenuRadioGroup, {
-		...props,
-		children
-	});
-};
-MenuRadioGroup.displayName = "MenuRadioGroup_UI";
-//#endregion
-//#region src/components/Menu/RadioMenuItem.tsx
-const RadioMenuItem = ({ onSelect, value, indicator = /* @__PURE__ */ jsx(Icon, {
-	size: "sm",
-	type: "checkmark"
-}), ...props }) => {
-	return /* @__PURE__ */ jsx(DropdownMenuRadioItem, {
-		...onSelect ? { onSelect } : {},
-		asChild: true,
-		value,
-		children: /* @__PURE__ */ jsx(MenuItemButton, {
-			...props,
-			rightIcon: /* @__PURE__ */ jsx(DropdownMenuItemIndicator, { children: indicator })
-		})
-	});
-};
-RadioMenuItem.displayName = "RadioMenuItem_UI";
-//#endregion
-//#region src/components/Menu/CheckboxMenuItem.tsx
-const CheckboxIndicator = ({ checked, ...props }) => {
-	return checked ? /* @__PURE__ */ jsxs("svg", {
-		...props,
-		fill: "none",
-		height: "24",
-		viewBox: "0 0 24 24",
-		width: "24",
-		xmlns: "http://www.w3.org/2000/svg",
-		children: [/* @__PURE__ */ jsx("path", {
-			d: "m4 8c0-2.20914 1.79086-4 4-4h8c2.2091 0 4 1.79086 4 4v8c0 2.2091-1.7909 4-4 4h-8c-2.20914 0-4-1.7909-4-4z",
-			fill: "#2949e5"
-		}), /* @__PURE__ */ jsx("path", {
-			d: "m10.4728 15.1931-3.09523-3.1131c-.18596-.187-.18596-.4902 0-.6773l.67341-.6773c.18596-.187.48749-.187.67344 0l2.08508 2.0971 4.4661-4.49174c.1859-.18703.4875-.18703.6734 0l.6734.67731c.186.18703.186.49027 0 .67731l-5.4762 5.50772c-.1859.187-.4874.187-.6734 0z",
-			fill: "#fff"
-		})]
-	}) : /* @__PURE__ */ jsxs("svg", {
-		...props,
-		fill: "none",
-		height: "24",
-		viewBox: "0 0 24 24",
-		width: "24",
-		xmlns: "http://www.w3.org/2000/svg",
-		children: [/* @__PURE__ */ jsx("path", {
-			d: "m8 4.5h8c1.933 0 3.5 1.567 3.5 3.5v8c0 1.933-1.567 3.5-3.5 3.5h-8c-1.933 0-3.5-1.567-3.5-3.5v-8c0-1.933 1.567-3.5 3.5-3.5z",
-			fill: "#fcfcfd"
-		}), /* @__PURE__ */ jsx("path", {
-			d: "m8 4.5h8c1.933 0 3.5 1.567 3.5 3.5v8c0 1.933-1.567 3.5-3.5 3.5h-8c-1.933 0-3.5-1.567-3.5-3.5v-8c0-1.933 1.567-3.5 3.5-3.5z",
-			stroke: "#bbbbc4"
-		})]
-	});
-};
-const CheckboxMenuItem = ({ onSelect = () => null, checked, onCheckedChange, ...props }) => {
-	return /* @__PURE__ */ jsx(DropdownMenuCheckboxItem, {
-		asChild: true,
-		checked,
-		onCheckedChange,
-		onSelect,
-		children: /* @__PURE__ */ jsx(MenuItemButton, {
-			...props,
-			leftIcon: isNotNil(props.icon) ? props.icon : /* @__PURE__ */ jsx(CheckboxIndicator, { checked }),
-			rightIcon: isNotNil(props.icon) ? /* @__PURE__ */ jsx(DropdownMenuItemIndicator, { children: /* @__PURE__ */ jsx(Icon, { type: "checkmark" }) }) : void 0
-		})
-	});
-};
-CheckboxMenuItem.displayName = "CheckboxMenuItem_UI";
-//#endregion
-//#region src/components/Menu/FilterMenu.tsx
-const FilterMenuItem = CheckboxMenuItem;
-const FilterMenu = forwardRef(({ value, onChange, searchValue, onSearchValueChange, children, ...props }, ref) => {
-	return /* @__PURE__ */ jsxs(Menu, {
-		...props,
-		ref,
-		children: [
-			/* @__PURE__ */ jsx(Card, {
-				alignItems: "flex-end",
-				border: false,
-				borderRadius: "border-radius-02",
-				paddingSize: "space-01",
-				prominence: "primary",
-				style: {
-					position: "absolute",
-					top: 0,
-					left: 0,
-					right: 0,
-					margin: "1px"
-				},
-				children: /* @__PURE__ */ jsx(Input, {
-					autoFocus: true,
-					onChange: (event) => {
-						onSearchValueChange(event.target.value);
-					},
-					onKeyDown: (event) => {
-						if (event.key === "ArrowDown") {
-							event.preventDefault();
-							const firstMenuItem = document.querySelector("[role=\"menu\"]")?.querySelector("[role=\"menuitemcheckbox\"]");
-							if (firstMenuItem) firstMenuItem.focus();
-						}
-						event.stopPropagation();
-					},
-					placeholder: "Search...",
-					tabIndex: 0,
-					type: "search",
-					value: searchValue
-				})
-			}),
-			/* @__PURE__ */ jsx(MenuItem, {
-				disabled: true,
-				style: { padding: "16px" },
-				children: " "
-			}),
-			Children.toArray(children).length > 0 ? children : /* @__PURE__ */ jsx(MenuItem, {
-				disabled: true,
-				children: "No results found"
-			}),
-			value.length > 0 && /* @__PURE__ */ jsx(DropdownMenuItem, {
-				disabled: true,
-				style: { marginTop: "24px" },
-				children: /* @__PURE__ */ jsx(Card, {
-					alignItems: "flex-end",
-					border: false,
-					borderRadius: "border-radius-02",
-					paddingSize: "space-01",
-					prominence: "primary",
-					style: {
-						position: "absolute",
-						bottom: 0,
-						left: 0,
-						right: 0,
-						margin: "1px"
-					},
-					children: /* @__PURE__ */ jsx(Button, {
-						onClick: () => onChange([]),
-						size: "sm",
-						children: "Clear"
-					})
-				})
-			})
-		]
-	});
-});
-FilterMenu.displayName = "FilterMenu_UI";
-//#endregion
-//#region src/components/ContextMenu/ContextMenu.tsx
-/**
-* The ContextMenu is an extended implementation of the [Menu]() component that allows for right-click context menus.
-* It can be used in two ways:
-* 1. By providing a `triggerRef`, which will render the menu when the referenced element is right-clicked.
-* 2. By providing a `position` prop, which will render the menu at the specified coordinates.
-*/
-const ContextMenu = ({ position, triggerRef, children, side = "bottom", onRequestClose = () => null, compact = false }) => {
-	const [isRightClicked, setIsRightClicked] = useState(false);
-	const [menuPosition, setMenuPosition] = useState(position ?? {
-		x: 0,
-		y: 0
-	});
-	useEffect(() => {
-		if (isNil(position)) {
-			const onContextMenu = (event) => {
-				event.preventDefault();
-				setMenuPosition({
-					x: event.clientX,
-					y: event.clientY
-				});
-				setIsRightClicked(true);
-			};
-			const triggerEl = triggerRef?.current;
-			triggerEl?.addEventListener("contextmenu", onContextMenu);
-			return () => {
-				triggerEl?.removeEventListener("contextmenu", onContextMenu);
-			};
-		}
-		return () => null;
-	}, [position, triggerRef]);
-	const isOpen = isNotNil(position) || isRightClicked;
-	if (!isOpen) return null;
-	const menu = /* @__PURE__ */ jsx(Menu, {
-		compact,
-		isOpen,
-		onOpenChange: (next) => {
-			setIsRightClicked(next);
-			if (!next) onRequestClose();
-		},
-		side,
-		trigger: /* @__PURE__ */ jsx("button", {
-			"aria-label": "context menu",
-			style: {
-				width: "1px",
-				height: "1px",
-				all: "unset",
-				position: "fixed",
-				top: menuPosition.y,
-				left: menuPosition.x
-			},
-			type: "button"
-		}),
-		children
-	});
-	if (isNotNil(triggerRef)) return createPortal(menu, document.body);
-	return menu;
-};
-//#endregion
-//#region src/components/CustomizableThemeWrapper/CustomizableThemeWrapper.tsx
-const StyledCustomizableThemeWrapper = styled.div((props) => props.$overrides);
-/**
-* Used for overriding the default theme tokens with custom values.
-* This should only be used when the ui systems team has been consulted first.
-*/
-const CustomizableThemeWrapper = ({ children, overrides, ...props }) => /* @__PURE__ */ jsx(StyledCustomizableThemeWrapper, {
-	...props,
-	$overrides: overrides,
-	"data-wui-theme": "true",
-	children
-});
-CustomizableThemeWrapper.displayName = "CustomizableThemeWrapper_UI";
-//#endregion
-//#region src/components/DataCards/DataCard.tsx
-const pulse = keyframes`
-  0%,
-      100% {
-        opacity: 1;
-      }
-      50% {
-        opacity: 0.5;
-      }
-`;
-const StyledDataCard = styled.div`
-  --wui-data-card-text: var(--wui-color-text-button);
-  --wui-color-text: var(--wui-data-card-text);
-  --wui-data-card-background: var(--wui-color-bg-surface-secondary);
-  --wui-data-card-background-hover: var(--wui-color-bg-surface-secondary-hover);
-  --wui-data-card-background-active: var(--wui-color-bg-surface-secondary-active);
-  --wui-data-card-skeleton-color: var(--wui-color-bg-surface-tertiary);
-
-  display: grid;
-  grid-template-areas: 'label slot' 'value value';
-  grid-template-rows: auto auto;
-  grid-template-columns: auto auto;
-  gap: var(--wui-space-01);
-  padding: var(--wui-space-03);
-  background: var(--wui-data-card-background);
-  flex: 1;
-  border-radius: var(--wui-border-radius-02);
-  position: relative;
-  transition:
-    background var(--wui-motion-duration-01) var(--wui-motion-ease),
-    box-shadow var(--wui-motion-duration-01) var(--wui-motion-ease),
-    color var(--wui-motion-duration-01) var(--wui-motion-ease);
-
-  [data-wui-data-card-hover-icon] {
-    opacity: 0;
-    transform: translateX(-16px);
-    transition: all var(--wui-motion-duration-02) var(--wui-motion-ease-out);
-  }
-
-  &:has([data-wui-data-card-subtitle]) {
-    grid-template-areas: 'label slot' 'value value' 'subtitle subtitle';
-    grid-template-rows: auto auto auto;
-  }
-
-  [data-wui-data-card-skeleton='true'] {
-    pointer-events: none;
-    background-color: var(--wui-data-card-skeleton-color);
-    animation: ${pulse} 1.5s var(--wui-motion-ease-in-out) 0.5s infinite;
-    color: transparent;
-    user-select: none;
-    border-radius: var(--wui-border-radius-01);
-    width: fit-content;
-  }
-
-  &[data-click-region] {
-    &:not([disabled]) {
-      cursor: pointer;
-
-      &:hover {
-        --wui-data-card-text: var(--wui-color-text-button);
-        --wui-data-card-background: var(--wui-color-bg-surface-secondary-hover);
-
-        [data-wui-data-card-hover-icon] {
-          opacity: 1;
-          transform: translateX(0);
-        }
-      }
-
-      &:active {
-        --wui-data-card-background: var(--wui-color-bg-surface-secondary-active);
-      }
-
-      &:has([data-click-region-target-button]:focus-visible),
-      &:has([data-click-region-target-link]:focus-visible) {
-        --wui-data-card-focus-ring: var(--wui-color-border);
-
-        box-shadow: inset 0 0 0 2px var(--wui-data-card-focus-ring);
-      }
-
-      &:has([data-click-region-target-button][aria-pressed='true']) {
-        --wui-data-card-text: var(--wui-color-text-selected);
-        --wui-data-card-background: var(--wui-color-bg-surface-selected);
-        --wui-data-card-background-hover: var(--wui-color-bg-surface-selected-hover);
-        --wui-data-card-background-active: var(--wui-color-bg-surface-selected-active);
-        --wui-data-card-focus-ring: var(--wui-color-border-selected);
-        --wui-data-card-skeleton-color: var(--wui-color-bg-surface-selected-active);
-      }
-    }
-
-    &[disabled] {
-      pointer-events: none;
-    }
-
-    ${({ $colorScheme }) => getColorScheme($colorScheme)}
-  }
-`;
-const StyledLabel$1 = styled(Heading)`
-  grid-area: label;
-
-  &[data-wui-data-card-skeleton='true'] {
-    width: 80px;
-  }
-
-  button {
-    text-align: left;
-  }
-`;
-const StyledValue = styled(Heading)`
-  grid-area: value;
-
-  &[data-wui-data-card-skeleton='true'] {
-    width: min(90%, 156px);
-  }
-`;
-const StyledSlot = styled.div`
+const StyledSlot = styled.div`
   display: flex;
   justify-content: flex-end;
   grid-area: slot;
@@ -11643,7 +11320,7 @@ const previewCardClose = keyframes`
     transform: scale(0.96);
   }
 `;
-const StyledPopup = styled(PreviewCard$1.Popup)`
+const StyledPopup$3 = styled(PreviewCard$1.Popup)`
   --preview-card-animation-duration: var(--wui-motion-duration-03);
   --preview-card-animation-ease: var(--wui-motion-ease-out);
 
@@ -11693,7 +11370,7 @@ const PreviewCard = ({ children, trigger, maxWidth = "320px", maxHeight = "auto"
 			align,
 			side,
 			sideOffset: 8,
-			children: /* @__PURE__ */ jsx(StyledPopup, {
+			children: /* @__PURE__ */ jsx(StyledPopup$3, {
 				$colorScheme: colorScheme,
 				$paddingSize: paddingSize,
 				...props,
@@ -11893,7 +11570,7 @@ const StyledKey = styled.kbd`
   min-width: 20px;
   padding: 0 var(--wui-space-01);
 `;
-const Label$2 = styled.span`
+const Label$1 = styled.span`
   color: var(--wui-color-text);
   font-size: 12px;
 `;
@@ -11929,7 +11606,7 @@ const keyToString = (key) => {
 const KeyboardShortcut = ({ label, keyboardKeys, fullWidth = false, ...otherProps }) => /* @__PURE__ */ jsxs(StyledKeyboardShortcut, {
 	$fullWidth: fullWidth,
 	...otherProps,
-	children: [isNotNil(label) && /* @__PURE__ */ jsx(Label$2, { children: label }), /* @__PURE__ */ jsx(KeysContainer, { children: (Array.isArray(keyboardKeys) ? keyboardKeys : [keyboardKeys]).map((keyboardKey, index) => /* @__PURE__ */ jsx(StyledKey, { children: keyToString(keyboardKey) }, index)) })]
+	children: [isNotNil(label) && /* @__PURE__ */ jsx(Label$1, { children: label }), /* @__PURE__ */ jsx(KeysContainer, { children: (Array.isArray(keyboardKeys) ? keyboardKeys : [keyboardKeys]).map((keyboardKey, index) => /* @__PURE__ */ jsx(StyledKey, { children: keyToString(keyboardKey) }, index)) })]
 });
 KeyboardShortcut.displayName = "KeyboardShortcut_UI";
 //#endregion
@@ -12190,33 +11867,394 @@ const baseMarkdownCss = (textSize = "body2") => css`
     margin: 0;
   }
 
-  hr {
-    border: none;
-    border-top: 1px solid var(--wui-color-border);
-    margin-block: calc(var(--wui-markdown-base-unit) * 1.5);
+  hr {
+    border: none;
+    border-top: 1px solid var(--wui-color-border);
+    margin-block: calc(var(--wui-markdown-base-unit) * 1.5);
+  }
+
+  img {
+    max-width: 100%;
+    height: auto;
+  }
+`;
+//#endregion
+//#region src/components/Markdown/Markdown.tsx
+const StyledMarkdownWrapper = styled.div`
+  ${({ $textSize }) => baseMarkdownCss($textSize)}
+`;
+/**
+* This is a simple wrapper around `react-markdown` that applies some basic styles.
+*/
+const Markdown = ({ children, textSize = "body2", ...otherProps }) => {
+	return /* @__PURE__ */ jsx(StyledMarkdownWrapper, {
+		$textSize: useResponsiveProp(textSize),
+		...otherProps,
+		children: /* @__PURE__ */ jsx(ReactMarkdown, { children })
+	});
+};
+Markdown.displayName = "Markdown_UI";
+//#endregion
+//#region src/components/Menu/MenuLabel.tsx
+const StyledMenuLabel = styled.div`
+  padding: var(--wui-space-02);
+`;
+const MenuLabel = ({ children, ...props }) => {
+	return /* @__PURE__ */ jsx(StyledMenuLabel, {
+		role: "group",
+		...props,
+		children: /* @__PURE__ */ jsx(Heading, {
+			renderAs: "span",
+			variant: "heading6",
+			children
+		})
+	});
+};
+MenuLabel.displayName = "MenuLabel_UI";
+//#endregion
+//#region src/components/Menu/MenuItemButton.tsx
+const StyledButton = styled(Button)`
+  ${({ colorScheme }) => getColorScheme(colorScheme)};
+
+  display: flex;
+  flex-direction: row;
+  gap: var(--menu-item-inner-gap);
+  padding: var(--menu-item-padding);
+  border-radius: var(--wui-border-radius-01);
+  text-align: left;
+  color: var(--wui-color-text-button);
+  font-size: var(--menu-label-font-size);
+  font-weight: var(--menu-label-font-weight);
+  line-height: var(--menu-label-line-height);
+  transition: background-color var(--wui-motion-duration-01) var(--wui-motion-ease);
+
+  &:active {
+    background-color: var(--wui-color-bg-surface-active);
+  }
+
+  &[data-highlighted] {
+    outline: none;
+    ${({ $isGated }) => $isGated && getColorScheme("purple")};
+    background-color: var(--wui-color-bg-surface-hover);
+  }
+
+  &[aria-disabled='true'] {
+    --wui-color-text-button: var(--wui-color-text-disabled);
+    --wui-color-text-secondary: var(--wui-color-text-disabled);
+    --wui-color-icon: var(--wui-color-icon-disabled);
+
+    &[data-highlighted] {
+      background-color: transparent;
+    }
+  }
+`;
+const StyledLeftIconContainer = styled.div`
+  height: var(--menu-item-left-icon-size);
+  width: var(--menu-item-left-icon-size);
+
+  && {
+    svg {
+      height: var(--menu-item-left-icon-size);
+      width: var(--menu-item-left-icon-size);
+      flex: 0 0 var(--menu-item-left-icon-size);
+    }
+  }
+`;
+const StyledRightIconContainer = styled.div`
+  height: var(--menu-item-right-icon-size);
+  width: var(--menu-item-right-icon-size);
+
+  && {
+    svg {
+      height: var(--menu-item-right-icon-size);
+      width: var(--menu-item-right-icon-size);
+      flex: 0 0 var(--menu-item-right-icon-size);
+    }
+  }
+`;
+const StyledLabelAndDescriptionContainer = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--menu-label-description-gap);
+  flex-basis: 100%;
+`;
+const StyledBadgeContainer = styled.div`
+  align-self: start;
+  justify-self: end;
+  font-size: var(--wui-typography-label-4-size);
+  color: var(--wui-color-text-secondary);
+`;
+const MenuItemButton = forwardRef(({ children, appearance, command, icon, ...props }, ref) => {
+	let { colorScheme, badge } = props;
+	if (appearance === "dangerous") {
+		if (isNotUndefined(colorScheme)) console.warn("colorScheme prop is ignored when appearance is dangerous");
+		colorScheme = "error";
+	}
+	if (appearance === "gated") badge = /* @__PURE__ */ jsx(Icon, {
+		colorScheme: "purple",
+		style: {
+			height: "16px",
+			width: "16px"
+		},
+		type: "sparkle"
+	});
+	return /* @__PURE__ */ jsxs(StyledButton, {
+		...props,
+		ref,
+		$isGated: appearance === "gated",
+		colorScheme: colorScheme ?? "inherit",
+		fullWidth: true,
+		unstyled: true,
+		children: [
+			isNotNil(props.leftIcon) ? /* @__PURE__ */ jsx(StyledLeftIconContainer, { children: props.leftIcon }) : null,
+			/* @__PURE__ */ jsx(StyledLabelAndDescriptionContainer, { children }),
+			isNotNil(badge) || isNotNil(command) ? /* @__PURE__ */ jsx(StyledBadgeContainer, { children: badge ?? command }) : null,
+			isNotNil(props.rightIcon) ? /* @__PURE__ */ jsx(StyledRightIconContainer, { children: props.rightIcon }) : null
+		]
+	});
+});
+MenuItemButton.displayName = "MenuItemButton_UI";
+//#endregion
+//#region src/components/Menu/MenuItemLabel.tsx
+const StyledMenuItemLabel = styled.span`
+  /* avoid no-empty-source rule */
+`;
+const MenuItemLabel = ({ children }) => {
+	return /* @__PURE__ */ jsx(StyledMenuItemLabel, { children });
+};
+//#endregion
+//#region src/components/Menu/MenuItemDescription.tsx
+const StyledMenuItemDescription = styled(Text)`
+  /* avoid no-empty-source rule */
+`;
+const MenuItemDescription = ({ children }) => {
+	return /* @__PURE__ */ jsx(StyledMenuItemDescription, {
+		prominence: "secondary",
+		variant: "body4",
+		children
+	});
+};
+//#endregion
+//#region src/components/Menu/SubMenu.tsx
+const SubMenuPopup = styled(Menu$1.Popup)`
+  ${menuContentCss}
+
+  ${mq.smAndDown} {
+    transform: translateX(-100%) !important;
   }
+`;
+const StyledMobileSubMenuItems = styled.div`
+  margin-left: var(--wui-space-04);
+`;
+const StyledSubTrigger = styled(Menu$1.SubmenuTrigger)`
+  outline: none;
 
-  img {
-    max-width: 100%;
-    height: auto;
+  &[data-popup-open],
+  &[data-highlighted] {
+    background-color: var(--wui-color-bg-surface-hover);
   }
 `;
+const SubMenuTrigger = ({ icon, ...props }) => {
+	const { isSmAndUp } = useMq();
+	return /* @__PURE__ */ jsx(isSmAndUp ? StyledSubTrigger : Menu$1.Item, {
+		nativeButton: true,
+		render: /* @__PURE__ */ jsx(MenuItemButton, {
+			...props,
+			leftIcon: icon,
+			rightIcon: /* @__PURE__ */ jsx(Icon, { type: "caret-right" })
+		})
+	});
+};
+const SubMenu = ({ label, description, children, onOpenChange = () => null, ...props }) => {
+	const { isSmAndUp } = useMq();
+	const [isExpanded, setIsExpanded] = useState(false);
+	const { compact } = useMenuContext();
+	return isSmAndUp ? /* @__PURE__ */ jsxs(Menu$1.SubmenuRoot, {
+		onOpenChange,
+		children: [/* @__PURE__ */ jsxs(SubMenuTrigger, {
+			...props,
+			children: [/* @__PURE__ */ jsx(MenuItemLabel, { children: label }), isNotNil(description) ? /* @__PURE__ */ jsx(MenuItemDescription, { children: description }) : null]
+		}), /* @__PURE__ */ jsx(Menu$1.Portal, { children: /* @__PURE__ */ jsx(Menu$1.Positioner, { children: /* @__PURE__ */ jsx(SubMenuPopup, {
+			$compact: compact,
+			children
+		}) }) })]
+	}) : /* @__PURE__ */ jsxs(Menu$1.Group, { children: [/* @__PURE__ */ jsxs(SubMenuTrigger, {
+		...props,
+		onClick: (event) => {
+			event.preventDefault();
+			setIsExpanded((prev) => !prev);
+		},
+		children: [/* @__PURE__ */ jsx(MenuItemLabel, { children: label }), isNotNil(description) ? /* @__PURE__ */ jsx(MenuItemDescription, { children: description }) : null]
+	}), /* @__PURE__ */ jsx(StyledMobileSubMenuItems, { children: isExpanded ? children : null })] });
+};
+SubMenu.displayName = "SubMenu_UI";
 //#endregion
-//#region src/components/Markdown/Markdown.tsx
-const StyledMarkdownWrapper = styled.div`
-  ${({ $textSize }) => baseMarkdownCss($textSize)}
-`;
-/**
-* This is a simple wrapper around `react-markdown` that applies some basic styles.
-*/
-const Markdown = ({ children, textSize = "body2", ...otherProps }) => {
-	return /* @__PURE__ */ jsx(StyledMarkdownWrapper, {
-		$textSize: useResponsiveProp(textSize),
-		...otherProps,
-		children: /* @__PURE__ */ jsx(ReactMarkdown, { children })
+//#region src/components/Menu/MenuItem.tsx
+const MenuItem = forwardRef(({ onSelect = () => null, closeOnClick = true, ...props }, ref) => {
+	return /* @__PURE__ */ jsx(Menu$1.Item, {
+		closeOnClick,
+		nativeButton: isNil(props.href),
+		onClick: onSelect,
+		render: /* @__PURE__ */ jsx(MenuItemButton, {
+			...props,
+			ref,
+			leftIcon: props.icon
+		})
+	});
+});
+MenuItem.displayName = "MenuItem_UI";
+//#endregion
+//#region src/components/Menu/MenuRadioGroup.tsx
+const MenuRadioGroup = ({ children, ...props }) => {
+	return /* @__PURE__ */ jsx(Menu$1.RadioGroup, {
+		...props,
+		children
 	});
 };
-Markdown.displayName = "Markdown_UI";
+MenuRadioGroup.displayName = "MenuRadioGroup_UI";
+//#endregion
+//#region src/components/Menu/RadioMenuItem.tsx
+const RadioMenuItem = ({ onSelect, value, indicator = /* @__PURE__ */ jsx(Icon, {
+	size: "sm",
+	type: "checkmark"
+}), ...props }) => {
+	const extraProps = onSelect ? { onClick: onSelect } : {};
+	return /* @__PURE__ */ jsx(Menu$1.RadioItem, {
+		closeOnClick: true,
+		nativeButton: true,
+		...extraProps,
+		render: /* @__PURE__ */ jsx(MenuItemButton, {
+			...props,
+			rightIcon: /* @__PURE__ */ jsx(Menu$1.RadioItemIndicator, { children: indicator })
+		}),
+		value
+	});
+};
+RadioMenuItem.displayName = "RadioMenuItem_UI";
+//#endregion
+//#region src/components/Menu/CheckboxMenuItem.tsx
+const CheckboxIndicator = ({ checked, ...props }) => {
+	return checked ? /* @__PURE__ */ jsxs("svg", {
+		...props,
+		fill: "none",
+		height: "24",
+		viewBox: "0 0 24 24",
+		width: "24",
+		xmlns: "http://www.w3.org/2000/svg",
+		children: [/* @__PURE__ */ jsx("path", {
+			d: "m4 8c0-2.20914 1.79086-4 4-4h8c2.2091 0 4 1.79086 4 4v8c0 2.2091-1.7909 4-4 4h-8c-2.20914 0-4-1.7909-4-4z",
+			fill: "#2949e5"
+		}), /* @__PURE__ */ jsx("path", {
+			d: "m10.4728 15.1931-3.09523-3.1131c-.18596-.187-.18596-.4902 0-.6773l.67341-.6773c.18596-.187.48749-.187.67344 0l2.08508 2.0971 4.4661-4.49174c.1859-.18703.4875-.18703.6734 0l.6734.67731c.186.18703.186.49027 0 .67731l-5.4762 5.50772c-.1859.187-.4874.187-.6734 0z",
+			fill: "#fff"
+		})]
+	}) : /* @__PURE__ */ jsxs("svg", {
+		...props,
+		fill: "none",
+		height: "24",
+		viewBox: "0 0 24 24",
+		width: "24",
+		xmlns: "http://www.w3.org/2000/svg",
+		children: [/* @__PURE__ */ jsx("path", {
+			d: "m8 4.5h8c1.933 0 3.5 1.567 3.5 3.5v8c0 1.933-1.567 3.5-3.5 3.5h-8c-1.933 0-3.5-1.567-3.5-3.5v-8c0-1.933 1.567-3.5 3.5-3.5z",
+			fill: "#fcfcfd"
+		}), /* @__PURE__ */ jsx("path", {
+			d: "m8 4.5h8c1.933 0 3.5 1.567 3.5 3.5v8c0 1.933-1.567 3.5-3.5 3.5h-8c-1.933 0-3.5-1.567-3.5-3.5v-8c0-1.933 1.567-3.5 3.5-3.5z",
+			stroke: "#bbbbc4"
+		})]
+	});
+};
+const CheckboxMenuItem = ({ onSelect = () => null, checked, onCheckedChange, ...props }) => {
+	return /* @__PURE__ */ jsx(Menu$1.CheckboxItem, {
+		checked,
+		closeOnClick: false,
+		nativeButton: true,
+		onCheckedChange,
+		onClick: onSelect,
+		render: /* @__PURE__ */ jsx(MenuItemButton, {
+			...props,
+			leftIcon: isNotNil(props.icon) ? props.icon : /* @__PURE__ */ jsx(CheckboxIndicator, { checked }),
+			rightIcon: isNotNil(props.icon) ? /* @__PURE__ */ jsx(Menu$1.CheckboxItemIndicator, { children: /* @__PURE__ */ jsx(Icon, { type: "checkmark" }) }) : void 0
+		})
+	});
+};
+CheckboxMenuItem.displayName = "CheckboxMenuItem_UI";
+//#endregion
+//#region src/components/Menu/FilterMenu.tsx
+const FilterMenuItem = CheckboxMenuItem;
+const FilterMenu = forwardRef(({ value, onChange, searchValue, onSearchValueChange, children, ...props }, ref) => {
+	return /* @__PURE__ */ jsxs(Menu, {
+		...props,
+		ref,
+		children: [
+			/* @__PURE__ */ jsx(Card, {
+				alignItems: "flex-end",
+				border: false,
+				borderRadius: "border-radius-02",
+				paddingSize: "space-01",
+				prominence: "primary",
+				style: {
+					position: "absolute",
+					top: 0,
+					left: 0,
+					right: 0,
+					margin: "1px"
+				},
+				children: /* @__PURE__ */ jsx(Input, {
+					autoFocus: true,
+					onChange: (event) => {
+						onSearchValueChange(event.target.value);
+					},
+					onKeyDown: (event) => {
+						if (event.key === "ArrowDown") {
+							event.preventDefault();
+							const firstMenuItem = document.querySelector("[role=\"menu\"]")?.querySelector("[role=\"menuitemcheckbox\"]");
+							if (firstMenuItem) firstMenuItem.focus();
+						}
+						event.stopPropagation();
+					},
+					placeholder: "Search...",
+					tabIndex: 0,
+					type: "search",
+					value: searchValue
+				})
+			}),
+			/* @__PURE__ */ jsx(MenuItem, {
+				disabled: true,
+				style: { padding: "16px" },
+				children: " "
+			}),
+			Children.toArray(children).length > 0 ? children : /* @__PURE__ */ jsx(MenuItem, {
+				disabled: true,
+				children: "No results found"
+			}),
+			value.length > 0 && /* @__PURE__ */ jsx(Menu$1.Item, {
+				disabled: true,
+				style: { marginTop: "24px" },
+				children: /* @__PURE__ */ jsx(Card, {
+					alignItems: "flex-end",
+					border: false,
+					borderRadius: "border-radius-02",
+					paddingSize: "space-01",
+					prominence: "primary",
+					style: {
+						position: "absolute",
+						bottom: 0,
+						left: 0,
+						right: 0,
+						margin: "1px"
+					},
+					children: /* @__PURE__ */ jsx(Button, {
+						onClick: () => onChange([]),
+						size: "sm",
+						children: "Clear"
+					})
+				})
+			})
+		]
+	});
+});
+FilterMenu.displayName = "FilterMenu_UI";
 //#endregion
 //#region src/components/Meter/Meter.tsx
 const MeterWrapper = styled.div`
@@ -12377,19 +12415,14 @@ const Meter = ({ segments, label, labelMeta, description, hideKey = false, max =
 Meter.displayName = "Meter_UI";
 //#endregion
 //#region src/components/Modal/ModalCloseButton.tsx
-const CloseButton = styled(Close$1)`
-  align-self: start;
-`;
 const ModalCloseButton = () => {
-	return /* @__PURE__ */ jsx(CloseButton, {
-		asChild: true,
-		children: /* @__PURE__ */ jsx(IconButton, {
-			label: "Dismiss modal",
-			size: "sm",
-			variant: "ghost",
-			children: /* @__PURE__ */ jsx(Icon, { type: "close" })
-		})
-	});
+	return /* @__PURE__ */ jsx(Dialog.Close, { render: /* @__PURE__ */ jsx(IconButton, {
+		label: "Dismiss modal",
+		size: "sm",
+		style: { alignSelf: "start" },
+		variant: "ghost",
+		children: /* @__PURE__ */ jsx(Icon, { type: "close" })
+	}) });
 };
 //#endregion
 //#region src/components/Modal/ModalHeader.tsx
@@ -12401,7 +12434,7 @@ const Header = styled.header`
   gap: var(--wui-space-01);
   justify-content: ${({ $hideTitle }) => $hideTitle ? "flex-end" : "space-between"}; /* ensure ModalCloseButton is right-aligned */
 
-  /* DialogTitle creates an h2 element which inherits some margin */
+  /* Dialog.Title creates an h2 element which inherits some margin */
   h2 {
     margin: 0;
     padding-right: ${({ $hideCloseButon }) => $hideCloseButon ? "0" : "var(--wui-space-03)"};
@@ -12413,7 +12446,7 @@ const Header = styled.header`
     top: var(--wui-space-03);
   }
 `;
-const Title$1 = styled(Title)`
+const Title = styled(Dialog.Title)`
   font-family: var(--wui-typography-heading-2-family);
   line-height: var(--wui-typography-heading-2-line-height);
   font-size: var(--wui-typography-heading-2-size);
@@ -12422,32 +12455,15 @@ const Title$1 = styled(Title)`
 `;
 const ModalHeader = ({ title, hideTitle, hideCloseButton }) => {
 	return /* @__PURE__ */ jsxs(Header, {
-		$hideCloseButon: hideCloseButton,
-		$hideTitle: hideTitle,
-		children: [hideTitle ? /* @__PURE__ */ jsx(ScreenReaderOnly, { children: /* @__PURE__ */ jsx(Title$1, { children: title }) }) : /* @__PURE__ */ jsx(Title$1, { children: title }), hideCloseButton ? null : /* @__PURE__ */ jsx(ModalCloseButton, {})]
-	});
-};
-//#endregion
-//#region src/components/Modal/constants.ts
-const DEFAULT_MODAL_WIDTH = "532px";
-//#endregion
-//#region src/private/hooks/useFocusRestore/useFocusRestore.ts
-const useFocusRestore = () => {
-	const previouslyFocusedRef = useRef(null);
-	const timeoutRef = useRef(null);
-	useEffect(() => {
-		previouslyFocusedRef.current = document.activeElement instanceof HTMLElement ? document.activeElement : null;
-	}, []);
-	useEffect(() => {
-		return () => {
-			if (isNotNil(timeoutRef.current)) clearTimeout(timeoutRef.current);
-			if (isNotNil(previouslyFocusedRef.current)) timeoutRef.current = setTimeout(() => {
-				previouslyFocusedRef.current?.focus();
-			}, 0);
-		};
-	}, []);
+		$hideCloseButon: hideCloseButton,
+		$hideTitle: hideTitle,
+		children: [hideTitle ? /* @__PURE__ */ jsx(ScreenReaderOnly, { children: /* @__PURE__ */ jsx(Title, { children: title }) }) : /* @__PURE__ */ jsx(Title, { children: title }), hideCloseButton ? null : /* @__PURE__ */ jsx(ModalCloseButton, {})]
+	});
 };
 //#endregion
+//#region src/components/Modal/constants.ts
+const DEFAULT_MODAL_WIDTH = "532px";
+//#endregion
 //#region src/components/Modal/ModalContent.tsx
 const modalEnter = keyframes`
   from {
@@ -12484,8 +12500,8 @@ const positionStyleMap = {
   transform-origin: left center;
   animation: ${modalEnter} var(--wui-motion-duration-04) var(--wui-motion-ease-out);
 
-  &[data-state='closed'] {
-    animation: ${modalExit} var(--wui-motion-duration-03) var(--wui-motion-ease-out);
+  &[data-closed] {
+    animation: ${modalExit} var(--wui-motion-duration-03) var(--wui-motion-ease-out) forwards;
   }
 `,
 	"fixed-top": css`
@@ -12503,8 +12519,8 @@ const positionStyleMap = {
   transform-origin: left center;
   animation: ${modalEnter} var(--wui-motion-duration-04) var(--wui-motion-ease-out);
 
-  &[data-state='closed'] {
-    animation: ${modalExit} var(--wui-motion-duration-03) var(--wui-motion-ease-out);
+  &[data-closed] {
+    animation: ${modalExit} var(--wui-motion-duration-03) var(--wui-motion-ease-out) forwards;
   }
 `,
 	"right-side-panel": css`
@@ -12526,7 +12542,7 @@ const positionStyleMap = {
 `} var(--wui-motion-duration-05) var(--wui-motion-ease-out);
   transform-origin: right center;
 
-  &[data-state='closed'] {
+  &[data-closed] {
     animation: ${keyframes`
   from {
     opacity: 1;
@@ -12537,11 +12553,11 @@ const positionStyleMap = {
     opacity: 0;
     transform: translateX(100%);
   }
-`} var(--wui-motion-duration-03) var(--wui-motion-ease-in);
+`} var(--wui-motion-duration-03) var(--wui-motion-ease-in) forwards;
   }
 `
 };
-const StyledModalContent = styled(Content$2)`
+const StyledModalContent = styled(Dialog.Popup)`
   position: fixed;
   display: flex;
   flex-direction: column;
@@ -12568,12 +12584,12 @@ const StyledModalContent = styled(Content$2)`
     ${({ $positionVariant }) => positionStyleMap[$positionVariant]}
   }
 `;
-const ModalContent = forwardRef(({ width, positionVariant, children, ...props }, ref) => {
-	useFocusRestore();
+const ModalContent = forwardRef(({ width, positionVariant, initialFocusRef, children, ...props }, ref) => {
 	return /* @__PURE__ */ jsx(StyledModalContent, {
 		ref,
 		$positionVariant: positionVariant,
 		$width: width,
+		...isNotNil(initialFocusRef) ? { initialFocus: initialFocusRef } : {},
 		...props,
 		children
 	});
@@ -12599,20 +12615,20 @@ const backdropHide = keyframes`
     opacity: 0;
   }
 `;
-const ModalOverlay = styled(DialogOverlay)`
+const ModalOverlay = styled(Dialog.Backdrop)`
   animation: ${backdropShow} var(--wui-motion-duration-02);
   background: var(--wui-color-backdrop);
   inset: 0;
   position: fixed;
   z-index: var(--wui-zindex-backdrop);
 
-  &[data-state='closed'] {
-    animation: ${backdropHide} var(--wui-motion-duration-02);
+  &[data-closed] {
+    animation: ${backdropHide} var(--wui-motion-duration-02) forwards;
   }
 `;
 //#endregion
 //#region src/components/Modal/Modal.tsx
-const ModalHiddenDescription = styled(Description)({ ...visuallyHiddenStyle });
+const ModalHiddenDescription = styled(Dialog.Description)({ ...visuallyHiddenStyle });
 const ModalBody = styled.div`
   flex-direction: column;
   display: flex;
@@ -12634,21 +12650,14 @@ const ModalFooter = styled.footer`
 * user interaction or dismissal before returning to the underlying content.
 */
 const Modal = forwardRef(({ children, footer, hideCloseButton = false, hideTitle = false, initialFocusRef, isOpen, onRequestClose, positionVariant = "centered", title, width = DEFAULT_MODAL_WIDTH, ...props }, ref) => {
-	return /* @__PURE__ */ jsx(Root$5, {
+	return /* @__PURE__ */ jsx(Dialog.Root, {
 		onOpenChange: (open) => {
 			if (!open && isNotNil(onRequestClose)) onRequestClose();
 		},
 		open: isOpen,
-		children: /* @__PURE__ */ jsxs(Portal$2, { children: [/* @__PURE__ */ jsx(ModalOverlay, {}), /* @__PURE__ */ jsxs(ModalContent, {
+		children: /* @__PURE__ */ jsxs(Dialog.Portal, { children: [/* @__PURE__ */ jsx(ModalOverlay, {}), /* @__PURE__ */ jsxs(ModalContent, {
 			ref,
-			onOpenAutoFocus: (event) => {
-				if (isNotNil(initialFocusRef) && initialFocusRef.current) {
-					event.preventDefault();
-					requestAnimationFrame(() => {
-						initialFocusRef.current?.focus();
-					});
-				}
-			},
+			initialFocusRef,
 			positionVariant,
 			width,
 			...props,
@@ -12691,114 +12700,23 @@ const ModalCallout = ({ title, image, children }) => {
 };
 ModalCallout.displayName = "ModalCallout_UI";
 //#endregion
-//#region src/components/Popover/PopoverRoot.tsx
-/**
-* The root of a composable popover. Wrap `PopoverTrigger` (or `PopoverAnchor`)
-* and `PopoverContent` inside it.
-*
-* For the common "button opens a panel" case, prefer the bundled `Popover`.
-*/
-const PopoverRoot = ({ isOpen, ...props }) => /* @__PURE__ */ jsx(Root$3, {
-	...props,
-	...isOpen !== void 0 ? { open: isOpen } : {}
-});
-PopoverRoot.displayName = "PopoverRoot_UI";
-//#endregion
-//#region src/components/Popover/PopoverTrigger.tsx
-/**
-* The button that toggles the popover open and closed. By default it renders a
-* `<button>` wrapping its children; pass `asChild` to merge the trigger
-* behavior onto a single child element (e.g. a `Button` or `IconButton`).
-*/
-const PopoverTrigger = forwardRef((props, forwardedRef) => /* @__PURE__ */ jsx(Trigger$1, {
-	ref: forwardedRef,
-	...props
-}));
-PopoverTrigger.displayName = "PopoverTrigger_UI";
-//#endregion
-//#region src/components/Popover/PopoverPortal.tsx
-/**
-* Portals the popover content out of the DOM hierarchy of its trigger so it can
-* escape clipping ancestors (`overflow: hidden`, transformed containers, etc.).
-*/
-const PopoverPortal = (props) => /* @__PURE__ */ jsx(Portal$1, { ...props });
-PopoverPortal.displayName = "PopoverPortal_UI";
-//#endregion
-//#region src/components/Popover/PopoverContent.tsx
-const StyledContent$1 = styled(Content$1)`
-  z-index: var(--wui-zindex-popover);
-  ${({ $colorScheme }) => getColorScheme($colorScheme)};
-  ${({ $unstyled }) => !$unstyled && css`
-      border-radius: var(--wui-border-radius-02);
-      padding: var(--wui-space-04);
-      max-width: var(--wui-popover-max-width);
-      max-height: var(--wui-popover-max-height);
-      background-color: var(--wui-color-bg-surface);
-      box-shadow: var(--wui-elevation-01);
-      border: 1px solid var(--wui-color-border);
-      overflow: auto;
-    `}
-
-  [data-wui-popover-close] {
-    position: absolute;
-    top: var(--wui-space-02);
-    right: var(--wui-space-02);
-  }
-`;
-const DEFAULT_SIDE_OFFSET = 8;
-const DEFAULT_MAX_WIDTH = "320px";
-const DEFAULT_MAX_HEIGHT = "auto";
-/**
-* The styled popover surface. Place inside a `PopoverRoot` (typically wrapped
-* in a `PopoverPortal`). Forwards all Radix Content props, including
-* dismissal/focus event handlers such as `onPointerDownOutside`,
-* `onOpenAutoFocus`, and `onCloseAutoFocus`.
-*/
-const PopoverContent = forwardRef(({ colorScheme = "inherit", unstyled = false, maxWidth = DEFAULT_MAX_WIDTH, maxHeight = DEFAULT_MAX_HEIGHT, sideOffset = DEFAULT_SIDE_OFFSET, style, ...props }, forwardedRef) => {
-	return /* @__PURE__ */ jsx(StyledContent$1, {
-		ref: forwardedRef,
-		$colorScheme: colorScheme,
-		$unstyled: unstyled,
-		sideOffset,
-		style: {
-			"--wui-popover-max-width": maxWidth,
-			"--wui-popover-max-height": maxHeight,
-			...style
-		},
-		...props
-	});
-});
-PopoverContent.displayName = "PopoverContent_UI";
-//#endregion
-//#region src/components/Popover/PopoverClose.tsx
-/**
-* An element that closes the popover when activated. Defaults to a `<button>`;
-* pass `asChild` to merge the close behavior onto a single child element. For
-* a pre-styled icon close button, use `PopoverCloseButton`.
-*/
-const PopoverClose = forwardRef((props, forwardedRef) => /* @__PURE__ */ jsx(Close, {
-	ref: forwardedRef,
-	...props
-}));
-PopoverClose.displayName = "PopoverClose_UI";
-//#endregion
-//#region src/components/Popover/PopoverCloseButton.tsx
-/**
-* A pre-styled close button intended to be placed inside a `PopoverContent`.
-* For a custom close control, use `PopoverClose` directly.
-*/
-const PopoverCloseButton = ({ label = "Close" } = {}) => /* @__PURE__ */ jsx(PopoverClose, {
-	asChild: true,
-	children: /* @__PURE__ */ jsx(IconButton, {
-		"data-wui-popover-close": true,
-		label,
-		variant: "ghost",
-		children: /* @__PURE__ */ jsx(Icon, { type: "close" })
-	})
-});
-PopoverCloseButton.displayName = "PopoverCloseButton_UI";
+//#region src/private/helpers/getControls/getControlProps.tsx
+const getControlProps = (isOpen, onOpenChange) => {
+	return isNotNil(onOpenChange) && isNotNil(isOpen) ? {
+		open: isOpen,
+		onOpenChange
+	} : {};
+};
 //#endregion
 //#region src/components/Popover/PopoverArrow.tsx
+const StyledArrowSvg = styled.svg`
+  /* Override Base UI's inline top positioning and rotate the arrow to match Radix behavior.
+     Radix applied rotate(180deg) so the circle sits near the trigger and the stalk extends
+     down toward the popup. Base UI does not rotate the arrow automatically. */
+  top: 0 !important;
+  transform: rotate(180deg);
+  transform-origin: center 0;
+`;
 const StyledPath = styled.path`
   fill: var(--wui-color-border-secondary);
 `;
@@ -12837,86 +12755,259 @@ const StyledCircle = styled.circle`
   }
 `;
 const PopoverArrow = ({ isAnimated }) => {
-	return /* @__PURE__ */ jsx(PopoverArrow$1, {
-		asChild: true,
-		children: /* @__PURE__ */ jsxs("svg", {
-			fill: "none",
-			height: "56",
-			viewBox: "0 0 48 56",
-			width: "48",
-			xmlns: "http://www.w3.org/2000/svg",
-			children: [
-				/* @__PURE__ */ jsx(StyledPath, { d: "M24 26.6667C21.0545 26.6667 18.6667 29.0545 18.6667 32C18.6667 34.9455 21.0545 37.3333 24 37.3333C26.9455 37.3333 29.3333 34.9455 29.3333 32C29.3333 29.0545 26.9455 26.6667 24 26.6667ZM23 0V32H25V0H23Z" }),
-				/* @__PURE__ */ jsx(StyledCircle, {
-					$isAnimated: isAnimated,
-					cx: "24",
-					cy: "32",
-					"data-wui-popover-arrow-inner-circle": true,
-					r: "10",
-					strokeWidth: "4"
-				}),
-				/* @__PURE__ */ jsx(StyledCircle, {
-					$isAnimated: isAnimated,
-					cx: "24",
-					cy: "32",
-					"data-wui-popover-arrow-outer-circle": true,
-					r: "20",
-					strokeWidth: "8"
-				})
-			]
-		})
-	});
+	return /* @__PURE__ */ jsx(Popover$1.Arrow, { render: /* @__PURE__ */ jsxs(StyledArrowSvg, {
+		fill: "none",
+		height: "56",
+		viewBox: "0 0 48 56",
+		width: "48",
+		xmlns: "http://www.w3.org/2000/svg",
+		children: [
+			/* @__PURE__ */ jsx(StyledPath, { d: "M24 26.6667C21.0545 26.6667 18.6667 29.0545 18.6667 32C18.6667 34.9455 21.0545 37.3333 24 37.3333C26.9455 37.3333 29.3333 34.9455 29.3333 32C29.3333 29.0545 26.9455 26.6667 24 26.6667ZM23 0V32H25V0H23Z" }),
+			/* @__PURE__ */ jsx(StyledCircle, {
+				$isAnimated: isAnimated,
+				cx: "24",
+				cy: "32",
+				"data-wui-popover-arrow-inner-circle": true,
+				r: "10",
+				strokeWidth: "4"
+			}),
+			/* @__PURE__ */ jsx(StyledCircle, {
+				$isAnimated: isAnimated,
+				cx: "24",
+				cy: "32",
+				"data-wui-popover-arrow-outer-circle": true,
+				r: "20",
+				strokeWidth: "8"
+			})
+		]
+	}) });
 };
 PopoverArrow.displayName = "PopoverArrow_UI";
 //#endregion
 //#region src/components/Popover/Popover.tsx
+const StyledPopup$2 = styled(Popover$1.Popup)`
+  z-index: var(--wui-zindex-popover);
+  ${({ $colorScheme }) => getColorScheme($colorScheme)};
+  ${({ $unstyled }) => !$unstyled && css`
+      border-radius: var(--wui-border-radius-02);
+      padding: var(--wui-space-04);
+      max-width: var(--wui-popover-max-width, 320px);
+      max-height: var(--wui-popover-max-height, auto);
+      background-color: var(--wui-color-bg-surface);
+      box-shadow: var(--wui-elevation-01);
+      border: 1px solid var(--wui-color-border);
+      overflow: auto;
+    `}
+
+  ${({ $withArrow }) => $withArrow && css`
+      overflow: visible;
+    `}
+
+  [data-wui-popover-close] {
+    position: absolute;
+    top: var(--wui-space-02);
+    right: var(--wui-space-02);
+  }
+`;
 /**
 * Displays rich content in a portal, triggered by a button.
 *
-* For more control — custom anchor, access to event handlers like
-* `onPointerDownOutside`, no injected close button, etc. — compose the
-* primitives directly: `PopoverRoot`, `PopoverTrigger`, `PopoverAnchor`,
+* For more control — custom anchor, no injected close button, etc. — compose
+* the primitives directly: `PopoverRoot`, `PopoverTrigger`, `PopoverAnchor`,
 * `PopoverPortal`, `PopoverContent`, `PopoverClose`.
 */
-const Popover = ({ children, trigger, isOpen, hideCloseButton = false, maxWidth, maxHeight, onOpenChange, unstyled = false, withArrow = false, isAnimated = false, colorScheme = "inherit", style, ...props }) => {
-	const sideOffset = withArrow ? -24 : 8;
-	return /* @__PURE__ */ jsxs(PopoverRoot, {
-		...isOpen !== void 0 ? {
-			isOpen,
-			onOpenChange
-		} : {},
-		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
-			asChild: true,
-			children: trigger
-		}), /* @__PURE__ */ jsx(PopoverPortal, { children: /* @__PURE__ */ jsxs(PopoverContent, {
-			colorScheme,
-			...maxHeight !== void 0 ? { maxHeight } : {},
-			...maxWidth !== void 0 ? { maxWidth } : {},
+const Popover = ({ children, trigger, isOpen, hideCloseButton = false, maxWidth, maxHeight, onOpenChange, unstyled = false, withArrow = false, isAnimated = false, colorScheme = "inherit", style, side, align, nativeButton = true, ...props }) => {
+	const sideOffset = withArrow ? 32 : 8;
+	const mergedStyle = {
+		"--wui-popover-max-width": maxWidth,
+		"--wui-popover-max-height": maxHeight,
+		...style
+	};
+	return /* @__PURE__ */ jsxs(Popover$1.Root, {
+		...getControlProps(isOpen, onOpenChange),
+		children: [/* @__PURE__ */ jsx(Popover$1.Trigger, {
+			nativeButton,
+			render: trigger
+		}), /* @__PURE__ */ jsx(Popover$1.Portal, { children: /* @__PURE__ */ jsx(Popover$1.Positioner, {
+			align,
+			collisionAvoidance: {
+				side: "flip",
+				align: "shift",
+				fallbackAxisSide: "none"
+			},
+			side,
 			sideOffset,
-			unstyled,
-			...props,
-			style,
-			children: [
-				!hideCloseButton && /* @__PURE__ */ jsx(PopoverCloseButton, {}),
-				withArrow ? /* @__PURE__ */ jsx(PopoverArrow, { isAnimated }) : null,
-				/* @__PURE__ */ jsx("div", { children })
-			]
+			children: /* @__PURE__ */ jsxs(StyledPopup$2, {
+				$colorScheme: colorScheme,
+				...props,
+				$unstyled: unstyled,
+				$withArrow: withArrow,
+				role: "dialog",
+				style: mergedStyle,
+				children: [
+					!hideCloseButton && /* @__PURE__ */ jsx(Popover$1.Close, { render: /* @__PURE__ */ jsx(IconButton, {
+						"data-wui-popover-close": true,
+						label: "Close",
+						variant: "ghost",
+						children: /* @__PURE__ */ jsx(Icon, { type: "close" })
+					}) }),
+					withArrow ? /* @__PURE__ */ jsx(PopoverArrow, { isAnimated }) : null,
+					/* @__PURE__ */ jsx("div", { children })
+				]
+			})
 		}) })]
 	});
 };
 Popover.displayName = "Popover_UI";
 //#endregion
+//#region src/components/Popover/PopoverAnchorContext.tsx
+const PopoverAnchorContext = createContext(null);
+const PopoverAnchorProvider = PopoverAnchorContext.Provider;
+const usePopoverAnchor = () => useContext(PopoverAnchorContext);
+const useCreatePopoverAnchorRef = () => useRef(null);
+//#endregion
 //#region src/components/Popover/PopoverAnchor.tsx
 /**
 * Positions the popover relative to an element other than the trigger. Useful
 * when the element the user interacts with (e.g. a text input) is separate
 * from what the popover attaches to.
+*
+* Wrap the anchor element and nest `PopoverTrigger` inside it.
+*/
+const PopoverAnchor = ({ children }) => {
+	const sharedRef = usePopoverAnchor();
+	return /* @__PURE__ */ jsx("div", {
+		ref: useCallback((node) => {
+			if (sharedRef) sharedRef.current = node;
+		}, [sharedRef]),
+		children
+	});
+};
+PopoverAnchor.displayName = "PopoverAnchor_UI";
+//#endregion
+//#region src/components/Popover/PopoverClose.tsx
+/**
+* An element that closes the popover when activated. Defaults to a `<button>`;
+* pass `render` to merge the close behavior onto a single child element. For
+* a pre-styled icon close button, use `PopoverCloseButton`.
 */
-const PopoverAnchor = forwardRef((props, forwardedRef) => /* @__PURE__ */ jsx(Anchor, {
+const PopoverClose = forwardRef((props, forwardedRef) => /* @__PURE__ */ jsx(Popover$1.Close, {
 	ref: forwardedRef,
 	...props
 }));
-PopoverAnchor.displayName = "PopoverAnchor_UI";
+PopoverClose.displayName = "PopoverClose_UI";
+//#endregion
+//#region src/components/Popover/PopoverCloseButton.tsx
+/**
+* A pre-styled close button intended to be placed inside a `PopoverContent`.
+* For a custom close control, use `PopoverClose` directly.
+*/
+const PopoverCloseButton = ({ label = "Close" } = {}) => /* @__PURE__ */ jsx(PopoverClose, { render: /* @__PURE__ */ jsx(IconButton, {
+	"data-wui-popover-close": true,
+	label,
+	variant: "ghost",
+	children: /* @__PURE__ */ jsx(Icon, { type: "close" })
+}) });
+PopoverCloseButton.displayName = "PopoverCloseButton_UI";
+//#endregion
+//#region src/components/Popover/PopoverContent.tsx
+const StyledPopup$1 = styled(Popover$1.Popup)`
+  z-index: var(--wui-zindex-popover);
+  ${({ $colorScheme }) => getColorScheme($colorScheme)};
+  ${({ $unstyled }) => !$unstyled && css`
+      border-radius: var(--wui-border-radius-02);
+      padding: var(--wui-space-04);
+      max-width: var(--wui-popover-max-width);
+      max-height: var(--wui-popover-max-height);
+      background-color: var(--wui-color-bg-surface);
+      box-shadow: var(--wui-elevation-01);
+      border: 1px solid var(--wui-color-border);
+      overflow: auto;
+    `}
+
+  [data-wui-popover-close] {
+    position: absolute;
+    top: var(--wui-space-02);
+    right: var(--wui-space-02);
+  }
+`;
+const DEFAULT_SIDE_OFFSET = 8;
+const DEFAULT_MAX_WIDTH = "320px";
+const DEFAULT_MAX_HEIGHT = "auto";
+/**
+* The styled popover surface. Place inside a `PopoverRoot` (typically wrapped
+* in a `PopoverPortal`). Wraps a `Positioner` and `Popup` internally.
+*/
+const PopoverContent = forwardRef(({ colorScheme = "inherit", unstyled = false, maxWidth = DEFAULT_MAX_WIDTH, maxHeight = DEFAULT_MAX_HEIGHT, sideOffset = DEFAULT_SIDE_OFFSET, side, align, style, role = "dialog", children, ...props }, forwardedRef) => {
+	const sharedAnchorRef = usePopoverAnchor();
+	const hasAnchor = sharedAnchorRef?.current != null;
+	const mergedStyle = {
+		"--wui-popover-max-width": maxWidth,
+		"--wui-popover-max-height": maxHeight,
+		...style
+	};
+	return /* @__PURE__ */ jsx(Popover$1.Positioner, {
+		align,
+		collisionAvoidance: {
+			side: "flip",
+			align: "shift",
+			fallbackAxisSide: "none"
+		},
+		side,
+		sideOffset,
+		...hasAnchor ? { anchor: sharedAnchorRef } : {},
+		children: /* @__PURE__ */ jsx(StyledPopup$1, {
+			ref: forwardedRef,
+			$colorScheme: colorScheme,
+			$unstyled: unstyled,
+			role,
+			style: mergedStyle,
+			...props,
+			children
+		})
+	});
+});
+PopoverContent.displayName = "PopoverContent_UI";
+//#endregion
+//#region src/components/Popover/PopoverPortal.tsx
+/**
+* Portals the popover content out of the DOM hierarchy of its trigger so it can
+* escape clipping ancestors (`overflow: hidden`, transformed containers, etc.).
+*/
+const PopoverPortal = ({ children }) => /* @__PURE__ */ jsx(Popover$1.Portal, { children });
+PopoverPortal.displayName = "PopoverPortal_UI";
+//#endregion
+//#region src/components/Popover/PopoverRoot.tsx
+/**
+* The root of a composable popover. Wrap `PopoverTrigger` (or `PopoverAnchor`)
+* and `PopoverContent` inside it.
+*
+* For the common "button opens a panel" case, prefer the bundled `Popover`.
+*/
+const PopoverRoot = ({ isOpen, onOpenChange, children }) => {
+	const anchorRef = useCreatePopoverAnchorRef();
+	return /* @__PURE__ */ jsx(Popover$1.Root, {
+		...getControlProps(isOpen, onOpenChange),
+		children: /* @__PURE__ */ jsx(PopoverAnchorProvider, {
+			value: anchorRef,
+			children
+		})
+	});
+};
+PopoverRoot.displayName = "PopoverRoot_UI";
+//#endregion
+//#region src/components/Popover/PopoverTrigger.tsx
+/**
+* The button that toggles the popover open and closed. By default it renders a
+* `<button>` wrapping its children; pass `render` to merge the trigger
+* behavior onto a single child element (e.g. a `Button` or `IconButton`).
+*/
+const PopoverTrigger = forwardRef(({ nativeButton = true, ...props }, forwardedRef) => /* @__PURE__ */ jsx(Popover$1.Trigger, {
+	ref: forwardedRef,
+	nativeButton,
+	...props
+}));
+PopoverTrigger.displayName = "PopoverTrigger_UI";
 //#endregion
 //#region src/components/ProgressBar/ProgressBar.tsx
 const ProgressBarWrapper = styled.div`
@@ -13699,7 +13790,7 @@ const SegmentedControlItem = forwardRef(({ disabled, icon, label, "aria-label":
 SegmentedControlItem.displayName = "SegmentedControlItem_UI";
 //#endregion
 //#region src/components/Select/Select.tsx
-const StyledTrigger = styled(Trigger$2)`
+const StyledTrigger = styled(Select$1.Trigger)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   ${inputCss};
   padding: var(--wui-input-vertical-padding) var(--wui-input-horizontal-padding);
@@ -13745,7 +13836,7 @@ const StyledTrigger = styled(Trigger$2)`
     color: var(--wui-input-placeholder);
   }
 `;
-const StyledContent = styled(Content$3)`
+const StyledPopup = styled(Select$1.Popup)`
   --wui-select-content-border: var(--wui-color-border);
   --wui-select-content-bg: var(--wui-color-bg-surface);
   --wui-select-content-border-radius: var(--wui-border-radius-02);
@@ -13759,8 +13850,8 @@ const StyledContent = styled(Content$3)`
   border-radius: var(--wui-select-content-border-radius);
   box-shadow: var(--wui-elevation-01);
   padding: var(--wui-select-option-padding);
-  min-width: var(--radix-select-trigger-width);
-  max-height: var(--radix-select-content-available-height);
+  min-width: var(--anchor-width);
+  max-height: var(--available-height);
   z-index: var(--wui-zindex-select);
 
   [role='separator'] {
@@ -13772,55 +13863,87 @@ const scrollButtonStyles = css`
   display: flex;
   justify-content: center;
 `;
-const StyledScrollDownButton = styled(ScrollDownButton)`
+const StyledScrollDownArrow = styled(Select$1.ScrollDownArrow)`
   ${scrollButtonStyles}
 `;
-const StyledScrollUpButton = styled(ScrollUpButton)`
+const StyledScrollUpArrow = styled(Select$1.ScrollUpArrow)`
   ${scrollButtonStyles}
 `;
 /**
+* Walks the React children tree to build a value→label mapping for Base UI's `items` prop.
+* This ensures `Select.Value` displays the label text instead of the raw value.
+*/
+const collectItemLabels = (children) => {
+	const items = [];
+	Children.forEach(children, (child) => {
+		if (!isValidElement(child)) return;
+		const { value, selectedDisplayValue, children: childChildren, textValue } = child.props;
+		if (typeof value === "string") {
+			if (selectedDisplayValue !== void 0 && selectedDisplayValue !== null) items.push({
+				value,
+				label: selectedDisplayValue
+			});
+			else if (typeof childChildren === "string") items.push({
+				value,
+				label: childChildren
+			});
+			else if (typeof textValue === "string") items.push({
+				value,
+				label: textValue
+			});
+			return;
+		}
+		if (childChildren !== void 0 && childChildren !== null) items.push(...collectItemLabels(childChildren));
+	});
+	return items;
+};
+/**
 * Display a list of options and choose one of them. Replacement for the native Select HTML element.
 */
-const Select = forwardRef(({ colorScheme = "inherit", children, onOpenChange = () => null, onChange = () => null, placeholder = "Select...", fullWidth = false, forceOpen = false, ...props }, forwardedRef) => {
+const Select = forwardRef(({ colorScheme = "inherit", children, onOpenChange = () => null, onChange = () => null, placeholder = "Select...", fullWidth = false, forceOpen = false, disabled, value, "aria-invalid": ariaInvalid, ...props }, forwardedRef) => {
 	const responsiveFullWidth = useResponsiveProp(fullWidth);
 	const rootProps = {
-		...props,
+		disabled,
+		items: useMemo(() => collectItemLabels(children), [children]),
 		onOpenChange,
-		onValueChange: onChange
+		onValueChange: onChange,
+		value
 	};
 	if (forceOpen) rootProps["open"] = true;
-	return /* @__PURE__ */ jsxs(Root$6, {
+	return /* @__PURE__ */ jsxs(Select$1.Root, {
 		...rootProps,
 		children: [/* @__PURE__ */ jsxs(StyledTrigger, {
 			ref: forwardedRef,
 			$colorScheme: colorScheme,
 			$fullWidth: responsiveFullWidth,
+			"aria-invalid": ariaInvalid,
 			...props,
-			children: [/* @__PURE__ */ jsx(Value, { placeholder }), /* @__PURE__ */ jsx(Icon, {
+			children: [/* @__PURE__ */ jsx(Select$1.Value, { placeholder }), /* @__PURE__ */ jsx(Icon, {
 				size: "md",
 				type: "caret-down"
 			})]
-		}), /* @__PURE__ */ jsx(Portal$3, { children: /* @__PURE__ */ jsxs(StyledContent, {
-			position: "popper",
+		}), /* @__PURE__ */ jsx(Select$1.Portal, { children: /* @__PURE__ */ jsx(Select$1.Positioner, {
+			align: "start",
+			alignItemWithTrigger: false,
 			sideOffset: 8,
-			children: [
-				/* @__PURE__ */ jsx(StyledScrollUpButton, { children: /* @__PURE__ */ jsx(Icon, {
+			children: /* @__PURE__ */ jsxs(StyledPopup, { children: [
+				/* @__PURE__ */ jsx(StyledScrollUpArrow, { children: /* @__PURE__ */ jsx(Icon, {
 					size: "sm",
 					type: "caret-up"
 				}) }),
-				/* @__PURE__ */ jsx(Viewport, { children }),
-				/* @__PURE__ */ jsx(StyledScrollDownButton, { children: /* @__PURE__ */ jsx(Icon, {
+				children,
+				/* @__PURE__ */ jsx(StyledScrollDownArrow, { children: /* @__PURE__ */ jsx(Icon, {
 					size: "sm",
 					type: "caret-down"
 				}) })
-			]
+			] })
 		}) })]
 	});
 });
 Select.displayName = "Select_UI";
 //#endregion
 //#region src/components/Select/SelectOption.tsx
-const StyledItem = styled(Item$2)`
+const StyledItem = styled(Select$1.Item)`
   ${getTypographicStyles("label3")}
   align-items: ${({ $checkmarkVerticalAlign }) => $checkmarkVerticalAlign === "center" ? "center" : "flex-start"};
   background-color: transparent;
@@ -13846,15 +13969,17 @@ const StyledItem = styled(Item$2)`
     background-color: transparent;
   }
 `;
-const SelectOption = forwardRef(({ children, selectedDisplayValue, checkmarkVerticalAlign = "center", ...props }, forwardedRef) => {
+const SelectOption = forwardRef(({ children, selectedDisplayValue, checkmarkVerticalAlign = "center", textValue, ...props }, forwardedRef) => {
+	const label = typeof children === "string" ? children : textValue;
 	return /* @__PURE__ */ jsxs(StyledItem, {
 		...props,
 		ref: forwardedRef,
 		$checkmarkVerticalAlign: checkmarkVerticalAlign,
+		...label != null ? { label } : {},
 		children: [isNotNil(selectedDisplayValue) ? /* @__PURE__ */ jsxs("div", { children: [children, /* @__PURE__ */ jsx("div", {
 			style: { display: "none" },
-			children: /* @__PURE__ */ jsx(ItemText, { children: selectedDisplayValue })
-		})] }) : /* @__PURE__ */ jsx(ItemText, { children }), /* @__PURE__ */ jsx(ItemIndicator, { children: /* @__PURE__ */ jsx(Icon, {
+			children: /* @__PURE__ */ jsx(Select$1.ItemText, { children: selectedDisplayValue })
+		})] }) : /* @__PURE__ */ jsx(Select$1.ItemText, { children }), /* @__PURE__ */ jsx(Select$1.ItemIndicator, { children: /* @__PURE__ */ jsx(Icon, {
 			size: "md",
 			type: "checkmark"
 		}) })]
@@ -13863,11 +13988,11 @@ const SelectOption = forwardRef(({ children, selectedDisplayValue, checkmarkVert
 SelectOption.displayName = "SelectOption_UI";
 //#endregion
 //#region src/components/Select/SelectOptionGroup.tsx
-const StyledLabel = styled(Label$1)`
+const StyledLabel = styled(Select$1.GroupLabel)`
   padding: var(--wui-select-option-padding);
 `;
 const SelectOptionGroup = ({ children, label, ...props }) => {
-	return /* @__PURE__ */ jsxs(Group, {
+	return /* @__PURE__ */ jsxs(Select$1.Group, {
 		...props,
 		children: [/* @__PURE__ */ jsx(StyledLabel, { children: /* @__PURE__ */ jsx(Heading, {
 			renderAs: "span",
@@ -13988,7 +14113,7 @@ const StyledSplitButton = styled.span`
       padding-right: 0;
     }
 
-    > [data-wui-button='true']:last-child {
+    > [data-wui-button='true']:not(:first-child) {
       border-top-left-radius: 0;
       border-bottom-left-radius: 0;
       display: inline-flex;