@wistia/ui 0.22.8 → 0.22.9-beta.014159f2.bdc0210

package/dist/index.js

@@ -1,13 +1,13 @@
 
 /*
- * @license @wistia/ui v0.22.8
+ * @license @wistia/ui v0.22.9-beta.014159f2.bdc0210
  *
  * 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";
@@ -18,23 +18,25 @@ import { useFilePicker as useFilePicker$1, useImperativeFilePicker as useImperat
 import { FileAmountLimitValidator, FileSizeValidator, FileTypeValidator, ImageDimensionsValidator, PersistentFileAmountLimitValidator } from "use-file-picker/validators";
 import { debounce, throttle } from "throttle-debounce";
 import { Link as Link$1, useInRouterContext } from "react-router";
-import { Content as Content$1, Root as Root$1, Trigger as Trigger$1 } from "@radix-ui/react-collapsible";
-import { Item, Root as Root$2 } from "@radix-ui/react-radio-group";
+import { Collapsible as Collapsible$1 } from "@base-ui/react/collapsible";
+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$3 } from "@radix-ui/react-toggle-group";
-import { Anchor, Close, Content as Content$2, PopoverArrow as PopoverArrow$1, Portal as Portal$1, Root as Root$4, Trigger as Trigger$2 } from "@radix-ui/react-popover";
-import { Range, Root as Root$5, 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 { Menu as Menu$1 } from "@base-ui/react/menu";
 import { ValidationError } from "yup";
-import { Content as Content$3, Portal as Portal$2, Root as Root$6, Trigger as Trigger$3 } from "@radix-ui/react-hover-card";
+import { PreviewCard as PreviewCard$1 } from "@base-ui/react/preview-card";
 import ReactMarkdown from "react-markdown";
-import { Close as Close$1, Content as Content$4, Description, DialogOverlay, Portal as Portal$3, Root as Root$7, Title } from "@radix-ui/react-dialog";
-import { Indicator, Root as Root$8 } from "@radix-ui/react-progress";
-import { Content as Content$5, Group, Item as Item$2, ItemIndicator, ItemText, Label as Label$1, Portal as Portal$4, Root as Root$9, ScrollDownButton, ScrollUpButton, Trigger as Trigger$4, Value, Viewport } from "@radix-ui/react-select";
-import { Content as Content$6, List as List$1, Root as Root$10, Trigger as Trigger$5 } from "@radix-ui/react-tabs";
+import { Dialog } from "@base-ui/react/dialog";
+import { Progress } from "@base-ui/react/progress";
+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`
   /**
@@ -444,7 +446,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, {})
@@ -6900,30 +6902,39 @@ const ClickRegion = ({ children, targetRef }) => {
 ClickRegion.displayName = "ClickRegion_UI";
 //#endregion
 //#region src/components/Collapsible/Collapsible.tsx
-const StyledRoot = styled(Root$1)`
-  &[data-state='closed'] [data-wui-collapsible-content] {
-    display: -webkit-box;
-    -webkit-box-orient: vertical;
-    -webkit-line-clamp: var(--wui-collapsible-content-clamp-lines);
-    overflow: hidden;
-  }
+const StyledRoot = styled(Collapsible$1.Root)`
+  ${({ $isOpen }) => !$isOpen && css`
+      [data-wui-collapsible-content] {
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: var(--wui-collapsible-content-clamp-lines);
+        overflow: hidden;
+      }
+    `}
 `;
 /**
 * Toggle the visibility of content with a trigger.
 */
-const Collapsible = ({ children, isOpen = false, onOpenChange }) => {
+const Collapsible = ({ children, isOpen, onOpenChange }) => {
+	const isControlled = isNotNil(isOpen);
+	const [internalOpen, setInternalOpen] = useState(false);
+	const handleOpenChange = (open) => {
+		if (!isControlled) setInternalOpen(open);
+		onOpenChange?.(open);
+	};
 	return /* @__PURE__ */ jsx(StyledRoot, {
-		...isNotNil(onOpenChange) && isNotNil(isOpen) ? {
+		$isOpen: isControlled ? isOpen : internalOpen,
+		...isControlled ? {
 			open: isOpen,
-			onOpenChange
-		} : {},
+			onOpenChange: handleOpenChange
+		} : { onOpenChange: handleOpenChange },
 		children
 	});
 };
 Collapsible.displayName = "Collapsible_UI";
 //#endregion
 //#region src/components/Collapsible/CollapsibleTrigger.tsx
-const StyledTrigger$1 = styled(Trigger$1)`
+const StyledTrigger$1 = styled(Collapsible$1.Trigger)`
   [data-wui-collapsible-icon] {
     transition: transform var(--wui-motion-duration-03) ease-in-out;
   }
@@ -6946,10 +6957,7 @@ const StyledTrigger$1 = styled(Trigger$1)`
 `;
 const CollapsibleTrigger = ({ children }) => {
 	Children.only(children);
-	return /* @__PURE__ */ jsx(StyledTrigger$1, {
-		asChild: true,
-		children
-	});
+	return /* @__PURE__ */ jsx(StyledTrigger$1, { render: children });
 };
 //#endregion
 //#region src/components/Collapsible/CollapsibleTriggerIcon.tsx
@@ -6980,7 +6988,7 @@ const CollapsibleContent = ({ clamp, children }) => {
 		"data-wui-collapsible-content": "true",
 		children
 	});
-	return /* @__PURE__ */ jsx(Content$1, { children: /* @__PURE__ */ jsxs(Fragment, { children: [children, " "] }) });
+	return /* @__PURE__ */ jsx(Collapsible$1.Panel, { children: /* @__PURE__ */ jsxs(Fragment, { children: [children, " "] }) });
 };
 //#endregion
 //#region src/components/ColorPicker/color-conversion-utils.ts
@@ -7455,7 +7463,7 @@ const Container$9 = styled.div`
 const LabelContainer$1 = styled.div`
   padding-top: var(--wui-space-01);
 `;
-const ItemsContainer$1 = styled(Root$2)`
+const ItemsContainer$1 = styled(RadioGroup$1)`
   display: flex;
   flex-wrap: wrap;
   align-items: center;
@@ -7470,7 +7478,7 @@ const ItemsContainer$1 = styled(Root$2)`
 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,
@@ -7568,7 +7576,7 @@ const slideRightAndFade = keyframes`
     transform: translateX(0);
   }
 `;
-const StyledContent$3 = 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);
@@ -7594,27 +7602,54 @@ const StyledContent$3 = 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.
@@ -7624,29 +7659,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$3, {
+		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]
+				})
 			})
 		})]
 	});
@@ -7654,7 +7687,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;
@@ -7673,7 +7706,6 @@ const ColorGridOption = ({ value: rawValue, name }) => {
 	const { valueAsHsv, nonDerivedValueAsHex } = useColorPickerState();
 	const valueAsHex = formatHex(valueAsHsv);
 	const isSelected = valueAsHex === value;
-	const derivativeIsSelected = !isSelected && nonDerivedValueAsHex === value;
 	return /* @__PURE__ */ jsx(Tooltip, {
 		content: name ?? /* @__PURE__ */ jsx("span", {
 			style: { fontFamily: "var(--wui-typography-family-mono)" },
@@ -7686,7 +7718,7 @@ const ColorGridOption = ({ value: rawValue, name }) => {
 			tabIndex: -1,
 			value,
 			children: /* @__PURE__ */ jsx(ColorSwatch, {
-				derivativeIsSelected,
+				derivativeIsSelected: !isSelected && nonDerivedValueAsHex === value,
 				isSelected,
 				value
 			})
@@ -7696,7 +7728,7 @@ const ColorGridOption = ({ value: rawValue, name }) => {
 ColorGridOption.displayName = "ColorGridOption_UI";
 //#endregion
 //#region src/components/ColorPicker/ColorList.tsx
-const Container$7 = styled(Root$3)`
+const Container$7 = styled(ToggleGroup)`
   display: grid;
   grid-template-columns: minmax(0, 1fr);
 `;
@@ -7708,12 +7740,12 @@ const Container$7 = styled(Root$3)`
 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
 	});
 };
@@ -7765,7 +7797,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;
@@ -7796,7 +7828,6 @@ const ColorListOption = ({ value: rawValue, name }) => {
 	const { valueAsHsv, nonDerivedValueAsHex } = useColorPickerState();
 	const valueAsHex = formatHex(valueAsHsv);
 	const isSelected = valueAsHex === value;
-	const derivativeIsSelected = !isSelected && nonDerivedValueAsHex === value;
 	return /* @__PURE__ */ jsxs(Container$5, {
 		"aria-label": value,
 		"aria-selected": valueAsHex === value,
@@ -7804,7 +7835,7 @@ const ColorListOption = ({ value: rawValue, name }) => {
 		tabIndex: -1,
 		value,
 		children: [/* @__PURE__ */ jsx(ColorSwatch, {
-			derivativeIsSelected,
+			derivativeIsSelected: !isSelected && nonDerivedValueAsHex === value,
 			isSelected,
 			value
 		}), /* @__PURE__ */ jsx(ColorNameOrHexCode, {
@@ -7815,6 +7846,19 @@ const ColorListOption = ({ value: rawValue, name }) => {
 };
 ColorListOption.displayName = "ColorListOption_UI";
 //#endregion
+//#region src/components/ColorPicker/normalizeHexColor.ts
+/**
+* A helper to ensure that a given hex code is normalized for all variants (short-hand, missing hex prefix, uppercase)
+*
+* @param hexValue
+* @returns string, a hex code value with a hash prefix followed by 6 hex characters
+*/
+const normalizeHexColor = (hexValue) => {
+	const hexValueWithHash = hexValue.startsWith("#") ? hexValue.toLowerCase() : `#${hexValue.toLowerCase()}`;
+	if (hexValueWithHash.length === 4) return `#${hexValueWithHash[1]}${hexValueWithHash[1]}${hexValueWithHash[2]}${hexValueWithHash[2]}${hexValueWithHash[3]}${hexValueWithHash[3]}`;
+	return hexValueWithHash;
+};
+//#endregion
 //#region src/components/ColorPicker/ColorPicker.tsx
 /**
 * A composable color picker built from low-level building blocks. Choose the
@@ -7826,11 +7870,11 @@ ColorListOption.displayName = "ColorListOption_UI";
 * sensible defaults (brand colors, contrast controls, popover/inline modes).
 */
 const ColorPicker = ({ children, colorForComparison = DEFAULT_COLOR_FOR_COMPARISON, minimumContrastRatio = DEFAULT_MIN_CONTRAST, onOpenChange, opacityForContrastCalculation = 1, onValueChange, value }) => {
-	const normalizedValue = value.startsWith("#") ? value.toLocaleLowerCase() : `#${value.toLocaleLowerCase()}`;
+	const normalizedValue = normalizeHexColor(value);
 	const handleOpenChange = (isOpen) => {
 		if (isFunction(onOpenChange)) onOpenChange(isOpen);
 	};
-	return /* @__PURE__ */ jsx(Root$4, {
+	return /* @__PURE__ */ jsx(Popover$1.Root, {
 		modal: false,
 		onOpenChange: handleOpenChange,
 		children: /* @__PURE__ */ jsx(ColorPickerProvider, {
@@ -7846,7 +7890,7 @@ const ColorPicker = ({ children, colorForComparison = DEFAULT_COLOR_FOR_COMPARIS
 ColorPicker.displayName = "ColorPicker_UI";
 //#endregion
 //#region src/components/ColorPicker/ColorPickerPopoverContent.tsx
-const StyledPopoverContent = styled(Content$2)`
+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);
@@ -7863,10 +7907,10 @@ const StyledPopoverContent = styled(Content$2)`
 * 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";
@@ -7913,7 +7957,7 @@ const ValueNameOrHexCode = (props) => {
 ValueNameOrHexCode.displayName = "ValueNameOrHexCode_UI";
 //#endregion
 //#region src/components/ColorPicker/ColorPickerTrigger.tsx
-const StyledPopoverTrigger = styled(Trigger$2)`
+const StyledPopoverTrigger = styled(Popover$1.Trigger)`
   background-color: var(--wui-color-bg-surface);
   border-radius: var(--wui-border-radius-rounded);
   border: none;
@@ -8566,7 +8610,7 @@ const Container$2 = styled.div`
   padding: 0 var(--wui-space-03);
   position: relative;
 `;
-const Root$11 = styled(Root$5)`
+const Root = styled(Slider$1.Root)`
   align-items: center;
   display: flex;
   position: absolute;
@@ -8575,10 +8619,10 @@ const Root$11 = styled(Root$5)`
   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`
@@ -8593,7 +8637,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;
@@ -8618,7 +8662,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
@@ -8627,17 +8671,17 @@ const HueSlider = (props) => {
 	return /* @__PURE__ */ jsxs(Container$2, {
 		...props,
 		style: containerStyle,
-		children: [/* @__PURE__ */ jsxs(Root$11, {
+		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 })]
 	});
 };
@@ -8767,7 +8811,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;
@@ -8902,7 +8946,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",
@@ -9367,18 +9411,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} {
@@ -9393,18 +9437,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,
@@ -9412,50 +9459,43 @@ 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)`
+const StyledMenuLabel = styled.div`
   padding: var(--wui-space-02);
 `;
 const MenuLabel = ({ children, ...props }) => {
 	return /* @__PURE__ */ jsx(StyledMenuLabel, {
-		asChild: true,
+		role: "group",
 		...props,
 		children: /* @__PURE__ */ jsx(Heading, {
 			renderAs: "span",
 			variant: "heading6",
-			...props,
 			children
 		})
 	});
@@ -9586,7 +9626,7 @@ const MenuItemDescription = ({ children }) => {
 };
 //#endregion
 //#region src/components/Menu/SubMenu.tsx
-const SubMenuContent = styled(DropdownMenuSubContent)`
+const SubMenuPopup = styled(Menu$1.Popup)`
   ${menuContentCss}
 
   ${mq.smAndDown} {
@@ -9596,19 +9636,19 @@ const SubMenuContent = styled(DropdownMenuSubContent)`
 const StyledMobileSubMenuItems = styled.div`
   margin-left: var(--wui-space-04);
 `;
-const StyledSubTrigger = styled(DropdownMenuSubTrigger)`
+const StyledSubTrigger = styled(Menu$1.SubmenuTrigger)`
   outline: none;
 
-  &[data-state='open'],
+  &[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 : DropdownMenuItem, {
-		asChild: true,
-		children: /* @__PURE__ */ jsx(MenuItemButton, {
+	return /* @__PURE__ */ jsx(isSmAndUp ? StyledSubTrigger : Menu$1.Item, {
+		nativeButton: true,
+		render: /* @__PURE__ */ jsx(MenuItemButton, {
 			...props,
 			leftIcon: icon,
 			rightIcon: /* @__PURE__ */ jsx(Icon, { type: "caret-right" })
@@ -9619,32 +9659,33 @@ const SubMenu = ({ label, description, children, onOpenChange = () => null, ...p
 	const { isSmAndUp } = useMq();
 	const [isExpanded, setIsExpanded] = useState(false);
 	const { compact } = useMenuContext();
-	return isSmAndUp ? /* @__PURE__ */ jsxs(DropdownMenuSub, {
+	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(DropdownMenuPortal, { children: /* @__PURE__ */ jsx(SubMenuContent, {
+		}), /* @__PURE__ */ jsx(Menu$1.Portal, { children: /* @__PURE__ */ jsx(Menu$1.Positioner, { children: /* @__PURE__ */ jsx(SubMenuPopup, {
 			$compact: compact,
 			children
-		}) })]
-	}) : /* @__PURE__ */ jsxs(DropdownMenuGroup, { children: [/* @__PURE__ */ jsxs(SubMenuTrigger, {
+		}) }) })]
+	}) : /* @__PURE__ */ jsxs(Menu$1.Group, { children: [/* @__PURE__ */ jsxs(SubMenuTrigger, {
 		...props,
 		onClick: (event) => {
 			event.preventDefault();
 			setIsExpanded((prev) => !prev);
 		},
-		children: [/* @__PURE__ */ jsx(MenuItemLabel, { children: label }), /* @__PURE__ */ jsx(MenuItemDescription, { children: description })]
+		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/Menu/MenuItem.tsx
-const MenuItem = forwardRef(({ onSelect = () => null, ...props }, ref) => {
-	return /* @__PURE__ */ jsx(DropdownMenuItem, {
-		asChild: true,
-		onSelect,
-		children: /* @__PURE__ */ jsx(MenuItemButton, {
+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
@@ -9655,7 +9696,7 @@ MenuItem.displayName = "MenuItem_UI";
 //#endregion
 //#region src/components/Menu/MenuRadioGroup.tsx
 const MenuRadioGroup = ({ children, ...props }) => {
-	return /* @__PURE__ */ jsx(DropdownMenuRadioGroup, {
+	return /* @__PURE__ */ jsx(Menu$1.RadioGroup, {
 		...props,
 		children
 	});
@@ -9667,14 +9708,16 @@ 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, {
+	const extraProps = onSelect ? { onClick: onSelect } : {};
+	return /* @__PURE__ */ jsx(Menu$1.RadioItem, {
+		closeOnClick: false,
+		nativeButton: true,
+		...extraProps,
+		render: /* @__PURE__ */ jsx(MenuItemButton, {
 			...props,
-			rightIcon: /* @__PURE__ */ jsx(DropdownMenuItemIndicator, { children: indicator })
-		})
+			rightIcon: /* @__PURE__ */ jsx(Menu$1.RadioItemIndicator, { children: indicator })
+		}),
+		value
 	});
 };
 RadioMenuItem.displayName = "RadioMenuItem_UI";
@@ -9712,15 +9755,16 @@ const CheckboxIndicator = ({ checked, ...props }) => {
 	});
 };
 const CheckboxMenuItem = ({ onSelect = () => null, checked, onCheckedChange, ...props }) => {
-	return /* @__PURE__ */ jsx(DropdownMenuCheckboxItem, {
-		asChild: true,
+	return /* @__PURE__ */ jsx(Menu$1.CheckboxItem, {
 		checked,
+		closeOnClick: false,
+		nativeButton: true,
 		onCheckedChange,
-		onSelect,
-		children: /* @__PURE__ */ jsx(MenuItemButton, {
+		onClick: onSelect,
+		render: /* @__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
+			rightIcon: isNotNil(props.icon) ? /* @__PURE__ */ jsx(Menu$1.CheckboxItemIndicator, { children: /* @__PURE__ */ jsx(Icon, { type: "checkmark" }) }) : void 0
 		})
 	});
 };
@@ -9774,7 +9818,7 @@ const FilterMenu = forwardRef(({ value, onChange, searchValue, onSearchValueChan
 				disabled: true,
 				children: "No results found"
 			}),
-			value.length > 0 && /* @__PURE__ */ jsx(DropdownMenuItem, {
+			value.length > 0 && /* @__PURE__ */ jsx(Menu$1.Item, {
 				disabled: true,
 				style: { marginTop: "24px" },
 				children: /* @__PURE__ */ jsx(Card, {
@@ -11295,21 +11339,21 @@ const previewCardClose = keyframes`
     transform: scale(0.96);
   }
 `;
-const StyledContent$2 = styled(Content$3)`
+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);
 
   z-index: var(--wui-zindex-popover);
-  transform-origin: var(--radix-hover-card-content-transform-origin);
+  transform-origin: var(--transform-origin);
   animation-duration: var(--preview-card-animation-duration);
   animation-timing-function: var(--preview-card-animation-ease);
   will-change: transform, opacity;
 
-  &[data-state='open'] {
+  &[data-open] {
     animation-name: ${previewCardOpen};
   }
 
-  &[data-state='closed'] {
+  &[data-closed] {
     animation-name: ${previewCardClose};
   }
 
@@ -11328,28 +11372,31 @@ const StyledContent$2 = styled(Content$3)`
 /**
 * Preview cards reveal content on hover. **Everything in the card must also exist at the destination**—never put information only in the preview. This pattern is for sighted-only, so treat the card as a preview, not a source of truth.
 */
-const PreviewCard = ({ children, trigger, maxWidth = "320px", maxHeight = "auto", unstyled = false, paddingSize = "space-04", openDelay = 700, closeDelay = 300, colorScheme = "inherit", forceOpen, ...props }) => {
+const PreviewCard = ({ children, trigger, maxWidth = "320px", maxHeight = "auto", unstyled = false, paddingSize = "space-04", openDelay = 700, closeDelay = 300, colorScheme = "inherit", forceOpen, side, align, ...props }) => {
 	const style = {
 		"--wui-preview-card-max-width": maxWidth,
 		"--wui-preview-card-max-height": maxHeight
 	};
 	const rootProps = {};
 	if (forceOpen === true) rootProps.open = true;
-	return /* @__PURE__ */ jsxs(Root$6, {
-		closeDelay,
-		openDelay,
+	return /* @__PURE__ */ jsxs(PreviewCard$1.Root, {
 		...rootProps,
-		children: [/* @__PURE__ */ jsx(Trigger$3, {
-			asChild: true,
-			children: trigger
-		}), /* @__PURE__ */ jsx(Portal$2, { children: /* @__PURE__ */ jsx(StyledContent$2, {
-			$colorScheme: colorScheme,
-			$paddingSize: paddingSize,
+		children: [/* @__PURE__ */ jsx(PreviewCard$1.Trigger, {
+			closeDelay,
+			delay: openDelay,
+			render: trigger
+		}), /* @__PURE__ */ jsx(PreviewCard$1.Portal, { children: /* @__PURE__ */ jsx(PreviewCard$1.Positioner, {
+			align,
+			side,
 			sideOffset: 8,
-			...props,
-			$unstyled: unstyled,
-			style,
-			children: /* @__PURE__ */ jsx("div", { children })
+			children: /* @__PURE__ */ jsx(StyledPopup$3, {
+				$colorScheme: colorScheme,
+				$paddingSize: paddingSize,
+				...props,
+				$unstyled: unstyled,
+				style,
+				children: /* @__PURE__ */ jsx("div", { children })
+			})
 		}) })]
 	});
 };
@@ -11542,7 +11589,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;
 `;
@@ -11578,7 +11625,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
@@ -12026,19 +12073,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
@@ -12050,7 +12092,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)"};
@@ -12062,7 +12104,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);
@@ -12073,30 +12115,13 @@ 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, {})]
+		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/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);
-		};
-	}, []);
-};
-//#endregion
 //#region src/components/Modal/ModalContent.tsx
 const modalEnter = keyframes`
   from {
@@ -12120,7 +12145,8 @@ const modalExit = keyframes`
     transform: translateX(-50%) translateY(calc(var(--wui-modal-translate-y) + 24px));
   }
 `;
-const centeredModalStyles = css`
+const positionStyleMap = {
+	centered: css`
   --wui-modal-screen-offset: var(--wui-space-05);
   --wui-modal-translate-y: -50%;
 
@@ -12132,11 +12158,11 @@ const centeredModalStyles = css`
   transform-origin: left center;
   animation: ${modalEnter} var(--wui-motion-duration-04) var(--wui-motion-ease-out);
 
-  &[data-state='closed'] {
+  &[data-closed] {
     animation: ${modalExit} var(--wui-motion-duration-03) var(--wui-motion-ease-out);
   }
-`;
-const fixedTopModalStyles = css`
+`,
+	"fixed-top": css`
   --wui-modal-screen-offset-top: 15vh;
   --wui-modal-screen-offset-bottom: 5vh;
   --wui-modal-translate-y: 0%;
@@ -12151,11 +12177,11 @@ const fixedTopModalStyles = css`
   transform-origin: left center;
   animation: ${modalEnter} var(--wui-motion-duration-04) var(--wui-motion-ease-out);
 
-  &[data-state='closed'] {
+  &[data-closed] {
     animation: ${modalExit} var(--wui-motion-duration-03) var(--wui-motion-ease-out);
   }
-`;
-const rightSidePanelModalStyles = css`
+`,
+	"right-side-panel": css`
   --wui-modal-screen-offset: var(--wui-space-05);
 
   height: calc(100vh - var(--wui-modal-screen-offset) * 2);
@@ -12174,7 +12200,7 @@ const rightSidePanelModalStyles = css`
 `} var(--wui-motion-duration-05) var(--wui-motion-ease-out);
   transform-origin: right center;
 
-  &[data-state='closed'] {
+  &[data-closed] {
     animation: ${keyframes`
   from {
     opacity: 1;
@@ -12187,13 +12213,9 @@ const rightSidePanelModalStyles = css`
   }
 `} var(--wui-motion-duration-03) var(--wui-motion-ease-in);
   }
-`;
-const positionStyleMap = {
-	centered: centeredModalStyles,
-	"fixed-top": fixedTopModalStyles,
-	"right-side-panel": rightSidePanelModalStyles
+`
 };
-const StyledModalContent = styled(Content$4)`
+const StyledModalContent = styled(Dialog.Popup)`
   position: fixed;
   display: flex;
   flex-direction: column;
@@ -12220,12 +12242,12 @@ const StyledModalContent = styled(Content$4)`
     ${({ $positionVariant }) => positionStyleMap[$positionVariant]}
   }
 `;
-const ModalContent = forwardRef(({ width, positionVariant = "fixed-top", children, ...props }, ref) => {
-	useFocusRestore();
+const ModalContent = forwardRef(({ width, positionVariant = "fixed-top", initialFocusRef, children, ...props }, ref) => {
 	return /* @__PURE__ */ jsx(StyledModalContent, {
 		ref,
 		$positionVariant: positionVariant,
 		$width: width,
+		...isNotNil(initialFocusRef) ? { initialFocus: initialFocusRef } : {},
 		...props,
 		children
 	});
@@ -12251,20 +12273,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'] {
+  &[data-closed] {
     animation: ${backdropHide} var(--wui-motion-duration-02);
   }
 `;
 //#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;
@@ -12286,21 +12308,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$7, {
+	return /* @__PURE__ */ jsx(Dialog.Root, {
 		onOpenChange: (open) => {
 			if (!open && isNotNil(onRequestClose)) onRequestClose();
 		},
 		open: isOpen,
-		children: /* @__PURE__ */ jsxs(Portal$3, { 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,
@@ -12343,114 +12358,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$4, {
-	...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$2, {
-	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$2)`
-  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);
 `;
@@ -12489,39 +12413,60 @@ 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.
 *
@@ -12530,45 +12475,198 @@ PopoverArrow.displayName = "PopoverArrow_UI";
 * 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`
@@ -12578,10 +12676,10 @@ const ProgressBarWrapper = styled.div`
   align-items: center;
   gap: var(--wui-space-02);
 `;
-const getTranslateValue = (progress, max) => {
-	if (progress === 0) return "translateX(-101%)";
-	return `translateX(-${100 - progress / max * 100}%)`;
-};
+const StyledTrack = styled(Progress.Track)`
+  height: 100%;
+  overflow: hidden;
+`;
 const ProgressBarLabel = styled.div`
   display: flex;
   line-height: var(--wui-typography-label-3-line-height);
@@ -12590,17 +12688,15 @@ const ProgressBarLabel = styled.div`
   color: var(--wui-color-text-secondary);
   flex-shrink: 0;
 `;
-const StyledProgressIndicator = styled(Indicator)`
+const StyledProgressIndicator = styled(Progress.Indicator)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)}
   background-color: var(--wui-color-bg-fill);
-  width: 100%;
-  height: 100%;
+  display: block;
   border-top-right-radius: var(--wui-border-radius-rounded);
   border-bottom-right-radius: var(--wui-border-radius-rounded);
-  transition: transform 660ms cubic-bezier(0.65, 0, 0.35, 1);
-  transform: ${({ $progress, $max }) => getTranslateValue($progress, $max)};
+  transition: width 660ms cubic-bezier(0.65, 0, 0.35, 1);
 `;
-const StyledProgressBar = styled(Root$8)`
+const StyledProgressBar = styled(Progress.Root)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)}
   position: relative;
   overflow: hidden;
@@ -12620,14 +12716,11 @@ const ProgressBar = ({ progress, max = 100, children, labelLeft, labelRight, col
 		isNotNil(labelLeft) ? /* @__PURE__ */ jsx(ProgressBarLabel, { children: labelLeft }) : null,
 		/* @__PURE__ */ jsx(StyledProgressBar, {
 			$colorScheme: colorScheme,
+			getAriaValueText: (_formattedValue, value) => value != null ? `${Math.round(value / max * 100)}%` : "indeterminate progress",
 			max,
 			value: progress,
 			...props,
-			children: /* @__PURE__ */ jsx(StyledProgressIndicator, {
-				$colorScheme: colorScheme,
-				$max: max,
-				$progress: progress
-			})
+			children: /* @__PURE__ */ jsx(StyledTrack, { children: /* @__PURE__ */ jsx(StyledProgressIndicator, { $colorScheme: colorScheme }) })
 		}),
 		isNotNil(labelRight) ? /* @__PURE__ */ jsx(ProgressBarLabel, { children: labelRight }) : null
 	] });
@@ -13209,7 +13302,7 @@ const segmentedControlStyles = css`
   position: relative;
   width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
 `;
-const StyledSegmentedControl = styled(Root$3)`
+const StyledSegmentedControl = styled(ToggleGroup)`
   ${segmentedControlStyles}
 `;
 /**
@@ -13222,11 +13315,11 @@ const SegmentedControl = forwardRef(({ children, colorScheme = "inherit", disabl
 		$colorScheme: colorScheme,
 		$fullWidth: fullWidth,
 		disabled,
-		loop: true,
-		onValueChange: onSelectedValueChange,
-		rovingFocus: true,
-		type: "single",
-		value: selectedValue,
+		loopFocus: true,
+		onValueChange: (newValue) => {
+			if (newValue.length > 0 && newValue[0] !== void 0) onSelectedValueChange(newValue[0]);
+		},
+		value: [selectedValue],
 		...props,
 		children: /* @__PURE__ */ jsx(SegmentedControlValueProvider, {
 			value: selectedValue,
@@ -13238,7 +13331,7 @@ SegmentedControl.displayName = "SegmentedControl_UI";
 //#endregion
 //#region src/components/SegmentedControl/SegmentedControlItem.tsx
 const segmentedControlItemStyles = css`
-  all: unset; /* ToggleGroupItem is a button element */
+  all: unset;
   align-items: center;
   border-radius: var(--wui-border-radius-rounded);
   color: var(--wui-color-text-secondary);
@@ -13272,10 +13365,11 @@ const segmentedControlItemStyles = css`
   /* note: react-toggle-group uses 'aria-selected' and react-tabs uses "active" */
 
   /* we can't style off of 'data-state' since that gets overridden when wrapped in a Tooltip */
-  &:hover:not([aria-checked='true'], [aria-selected='true']) {
+  &:hover:not([aria-pressed='true'], [aria-checked='true'], [aria-selected='true']) {
     background-color: var(--wui-color-bg-surface-secondary-hover);
   }
 
+  &[aria-pressed='true'],
   &[aria-checked='true'],
   &[aria-selected='true'] {
     color: var(--wui-color-segmented-color-text-override, var(--wui-color-text-selected));
@@ -13305,7 +13399,7 @@ const segmentedControlItemStyles = css`
     }
   }
 `;
-const StyledSegmentedControlItem = styled(Item$1)`
+const StyledSegmentedControlItem = styled(Toggle)`
   ${segmentedControlItemStyles}
 `;
 const SegmentedControlItem = forwardRef(({ disabled, icon, label, "aria-label": ariaLabel, value, ...otherProps }, forwardedRef) => {
@@ -13314,8 +13408,7 @@ const SegmentedControlItem = forwardRef(({ disabled, icon, label, "aria-label":
 	const buttonRef = useRef(null);
 	const combinedRef = mergeRefs([buttonRef, forwardedRef]);
 	const handleClick = (event) => {
-		const { state } = event.target.dataset;
-		if (state === "on") event.preventDefault();
+		if (event.currentTarget.getAttribute("aria-pressed") === "true") event.preventDefault();
 	};
 	useEffect(() => {
 		const buttonElem = buttonRef.current;
@@ -13356,7 +13449,7 @@ const SegmentedControlItem = forwardRef(({ disabled, icon, label, "aria-label":
 SegmentedControlItem.displayName = "SegmentedControlItem_UI";
 //#endregion
 //#region src/components/Select/Select.tsx
-const StyledTrigger = styled(Trigger$4)`
+const StyledTrigger = styled(Select$1.Trigger)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   ${inputCss};
   padding: var(--wui-input-vertical-padding) var(--wui-input-horizontal-padding);
@@ -13402,7 +13495,7 @@ const StyledTrigger = styled(Trigger$4)`
     color: var(--wui-input-placeholder);
   }
 `;
-const StyledContent = styled(Content$5)`
+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);
@@ -13416,8 +13509,8 @@ const StyledContent = styled(Content$5)`
   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'] {
@@ -13429,55 +13522,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$9, {
+	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$4, { 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;
@@ -13503,15 +13628,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"
 		}) })]
@@ -13520,11 +13647,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",
@@ -13551,28 +13678,28 @@ const SliderContainer = styled.div`
     pointer-events: none;
   }
 `;
-const StyledSliderRoot = styled(Root$5)`
-  position: relative;
+const StyledSliderRoot = styled(Slider$1.Root)`
+  width: 100%;
+`;
+const StyledSliderControl = styled(Slider$1.Control)`
   display: flex;
   align-items: center;
   user-select: none;
   touch-action: none;
   width: 100%;
 `;
-const StyledSliderTrack = styled(Track)`
+const StyledSliderTrack = styled(Slider$1.Track)`
   background-color: var(--wui-slider-track-color);
   border-radius: var(--wui-slider-track-border-radius);
-  flex-grow: 1;
+  width: 100%;
   height: 6px;
   position: relative;
 `;
-const StyledSliderRange = styled(Range)`
+const StyledSliderIndicator = styled(Slider$1.Indicator)`
   background-color: var(--wui-slider-range-color);
   border-radius: var(--wui-slider-track-border-radius);
-  height: 100%;
-  position: absolute;
 `;
-const StyledSliderThumb = styled(Thumb)`
+const StyledSliderThumb = styled(Slider$1.Thumb)`
   background-color: var(--wui-slider-thumb-color);
   border-radius: var(--wui-border-radius-rounded);
   cursor: grab;
@@ -13599,16 +13726,19 @@ const StyledSliderThumb = styled(Thumb)`
     outline-width: 2px;
   }
 `;
-const Slider = ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, disabled = false, initialValue = [0], max = 100, min = 0, onChange, onValueCommit, step = 1, value, "data-testid": dataTestId = "ui-slider", ...otherProps }) => {
+const Slider = ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, disabled = false, initialValue = [0], max = 100, min = 0, onChange, onValueCommitted, step = 1, value, "data-testid": dataTestId = "ui-slider", ...otherProps }) => {
 	if (!(isNonEmptyString(ariaLabel) || isNonEmptyString(ariaLabelledby))) throw new Error("UI Slider: Sliders should have an accessible name. Add a label using the aria-label or aria-labelledby prop.");
 	const values = value ?? initialValue;
 	const handleValueChange = (newValue) => {
-		if (onChange) onChange(newValue);
+		if (onChange) onChange(typeof newValue === "number" ? [newValue] : [...newValue]);
+	};
+	const handleValueCommitted = (newValue) => {
+		if (onValueCommitted) onValueCommitted(typeof newValue === "number" ? [newValue] : [...newValue]);
 	};
 	return /* @__PURE__ */ jsx(SliderContainer, {
 		...otherProps,
 		"data-testid": dataTestId,
-		children: /* @__PURE__ */ jsxs(StyledSliderRoot, {
+		children: /* @__PURE__ */ jsx(StyledSliderRoot, {
 			"aria-label": ariaLabel,
 			"aria-labelledby": ariaLabelledby,
 			defaultValue: initialValue,
@@ -13616,13 +13746,13 @@ const Slider = ({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, di
 			max,
 			min,
 			onValueChange: handleValueChange,
+			onValueCommitted: handleValueCommitted,
 			step,
-			...onValueCommit ? { onValueCommit } : {},
 			...value ? { value } : {},
-			children: [/* @__PURE__ */ jsx(StyledSliderTrack, {
+			children: /* @__PURE__ */ jsx(StyledSliderControl, { children: /* @__PURE__ */ jsxs(StyledSliderTrack, {
 				"data-testid": `${dataTestId}-track`,
-				children: /* @__PURE__ */ jsx(StyledSliderRange, { "data-testid": `${dataTestId}-range` })
-			}), values.map((_, index) => /* @__PURE__ */ jsx(StyledSliderThumb, { "data-testid": `${dataTestId}-thumb-${index}` }, `thumb-${index}`))]
+				children: [/* @__PURE__ */ jsx(StyledSliderIndicator, { "data-testid": `${dataTestId}-range` }), values.map((_, index) => /* @__PURE__ */ jsx(StyledSliderThumb, { "data-testid": `${dataTestId}-thumb-${index}` }, `thumb-${index}`))]
+			}) })
 		})
 	});
 };
@@ -13640,7 +13770,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;
@@ -13822,18 +13952,22 @@ const useTabsValue = () => {
 //#endregion
 //#region src/components/Tabs/Tabs.tsx
 const Tabs = ({ children, value: valueProp, onValueChange: onValueChangeProp, defaultValue, ...props }) => {
-	const [value, setValue] = useState(valueProp ?? defaultValue);
+	const [internalValue, setInternalValue] = useState(valueProp ?? defaultValue);
+	const isControlled = isNotNil(valueProp);
+	const value = isControlled ? valueProp : internalValue;
 	const onValueChange = useCallback((newValue) => {
-		setValue(newValue);
-		if (onValueChangeProp) onValueChangeProp(newValue);
+		if (newValue !== null) {
+			setInternalValue(newValue);
+			if (onValueChangeProp) onValueChangeProp(newValue);
+		}
 	}, [onValueChangeProp]);
 	const rootProps = {
 		...props,
 		onValueChange
 	};
 	if (isNotNil(value)) rootProps.value = value;
-	if (isNotNil(defaultValue)) rootProps.defaultValue = defaultValue;
-	return /* @__PURE__ */ jsx(Root$10, {
+	if (!isControlled && isNotNil(defaultValue)) rootProps.defaultValue = defaultValue;
+	return /* @__PURE__ */ jsx(Tabs$1.Root, {
 		...rootProps,
 		children: /* @__PURE__ */ jsx(TabsValueProvider, {
 			value: value ?? defaultValue,
@@ -13845,7 +13979,7 @@ Tabs.displayName = "Tabs_UI";
 //#endregion
 //#region src/components/Tabs/TabsContent.tsx
 const TabsContent = ({ children, value }) => {
-	return /* @__PURE__ */ jsx(Content$6, {
+	return /* @__PURE__ */ jsx(Tabs$1.Panel, {
 		value,
 		children
 	});
@@ -13870,7 +14004,7 @@ const SelectedTabIndicator = () => {
 };
 //#endregion
 //#region src/components/Tabs/TabsList.tsx
-const StyledTabsList = styled(List$1)`
+const StyledTabsList = styled(Tabs$1.List)`
   ${segmentedControlStyles}
 `;
 const TabsList = ({ children, fullWidth = true, ...props }) => {
@@ -13883,7 +14017,7 @@ const TabsList = ({ children, fullWidth = true, ...props }) => {
 TabsList.displayName = "TabsList_UI";
 //#endregion
 //#region src/components/Tabs/StyledTabsTrigger.tsx
-const StyledTabsTrigger = styled(Trigger$5)`
+const StyledTabsTrigger = styled(Tabs$1.Tab)`
   ${segmentedControlItemStyles}
 
   &:focus-visible {