@wistia/ui 0.22.3 → 0.22.4-beta.751eafb4.c632f00

package/dist/index.js

@@ -1,13 +1,13 @@
 
 /*
- * @license @wistia/ui v0.22.3
+ * @license @wistia/ui v0.22.4-beta.751eafb4.c632f00
  *
  * 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 { Close, Content as Content$2, PopoverArrow, 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, {})
@@ -6897,30 +6899,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 isControlled = isNotNil(onOpenChange);
+	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;
   }
@@ -6943,10 +6954,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
@@ -6977,7 +6985,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
@@ -7452,7 +7460,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;
@@ -7467,7 +7475,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,
@@ -7565,7 +7573,7 @@ const slideRightAndFade = keyframes`
     transform: translateX(0);
   }
 `;
-const StyledContent$3 = styled(Content)`
+const StyledPopup$4 = 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);
@@ -7591,27 +7599,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.
@@ -7621,29 +7656,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$4, {
+					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]
+				})
 			})
 		})]
 	});
@@ -7651,7 +7684,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;
@@ -7693,7 +7726,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);
 `;
@@ -7705,12 +7738,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
 	});
 };
@@ -7762,7 +7795,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;
@@ -7823,14 +7856,15 @@ 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, opacityForContrastCalculation = 1, onValueChange, value }) => {
-	return /* @__PURE__ */ jsx(Root$4, {
+	const normalizedValue = value.startsWith("#") ? value.toLocaleLowerCase() : `#${value.toLocaleLowerCase()}`;
+	return /* @__PURE__ */ jsx(Popover$1.Root, {
 		modal: false,
 		children: /* @__PURE__ */ jsx(ColorPickerProvider, {
 			colorForComparison,
 			minimumContrastRatio,
 			onValueChange,
 			opacityForContrastCalculation,
-			value: value.toLocaleLowerCase(),
+			value: normalizedValue,
 			children
 		})
 	});
@@ -7838,7 +7872,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$3 = 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);
@@ -7855,10 +7889,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$3, { children })
 	}) });
 };
 ColorPickerPopoverContent.displayName = "ColorPickerPopoverContent_UI";
@@ -7905,16 +7939,33 @@ 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: 1px solid var(--wui-color-border);
+  border: none;
+  outline: 1px solid var(--wui-color-border);
+  outline-offset: -1px;
   padding: var(--wui-space-01);
   transition: background-color var(--wui-motion-duration-03) var(--wui-motion-ease);
 
   &:hover {
     background-color: var(--wui-color-bg-surface-hover);
   }
+
+  &:focus {
+    outline-width: 2px;
+    outline-color: var(--wui-color-focus-ring);
+    outline-offset: -2px;
+  }
+
+  &[aria-invalid='true'] {
+    outline-color: var(--wui-color-invalid-indicator);
+  }
+
+  &:disabled {
+    outline-color: var(--wui-color-border-disabled);
+    background-color: var(--wui-color-bg-surface-disabled);
+  }
 `;
 const DefaultTriggerContentContainer = styled.div`
   align-items: center;
@@ -8534,7 +8585,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;
@@ -8543,10 +8594,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`
@@ -8561,7 +8612,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;
@@ -8586,7 +8637,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
@@ -8595,17 +8646,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 })]
 	});
 };
@@ -8735,7 +8786,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;
@@ -8870,7 +8921,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",
@@ -9335,18 +9386,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} {
@@ -9361,18 +9412,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,
@@ -9380,50 +9434,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
 		})
 	});
@@ -9554,7 +9601,7 @@ const MenuItemDescription = ({ children }) => {
 };
 //#endregion
 //#region src/components/Menu/SubMenu.tsx
-const SubMenuContent = styled(DropdownMenuSubContent)`
+const SubMenuPopup = styled(Menu$1.Popup)`
   ${menuContentCss}
 
   ${mq.smAndDown} {
@@ -9564,19 +9611,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" })
@@ -9587,16 +9634,16 @@ 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();
@@ -9608,11 +9655,12 @@ const SubMenu = ({ label, description, children, onOpenChange = () => null, ...p
 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
@@ -9623,7 +9671,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
 	});
@@ -9635,14 +9683,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";
@@ -9680,15 +9730,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
 		})
 	});
 };
@@ -9742,7 +9793,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, {
@@ -11263,21 +11314,21 @@ const previewCardClose = keyframes`
     transform: scale(0.96);
   }
 `;
-const StyledContent$2 = styled(Content$3)`
+const StyledPopup$2 = 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};
   }
 
@@ -11296,28 +11347,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$2, {
+				$colorScheme: colorScheme,
+				$paddingSize: paddingSize,
+				...props,
+				$unstyled: unstyled,
+				style,
+				children: /* @__PURE__ */ jsx("div", { children })
+			})
 		}) })]
 	});
 };
@@ -11510,7 +11564,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;
 `;
@@ -11544,7 +11598,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
@@ -11992,19 +12046,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
@@ -12016,7 +12065,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)"};
@@ -12028,7 +12077,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);
@@ -12039,7 +12088,7 @@ 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
@@ -12098,7 +12147,7 @@ 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);
   }
 `;
@@ -12117,7 +12166,7 @@ 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);
   }
 `;
@@ -12140,7 +12189,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;
@@ -12159,7 +12208,7 @@ const positionStyleMap = {
 	"fixed-top": fixedTopModalStyles,
 	"right-side-panel": rightSidePanelModalStyles
 };
-const StyledModalContent = styled(Content$4)`
+const StyledModalContent = styled(Dialog.Popup)`
   position: fixed;
   display: flex;
   flex-direction: column;
@@ -12186,12 +12235,13 @@ const StyledModalContent = styled(Content$4)`
     ${({ $positionVariant }) => positionStyleMap[$positionVariant]}
   }
 `;
-const ModalContent = forwardRef(({ width, positionVariant = "fixed-top", children, ...props }, ref) => {
+const ModalContent = forwardRef(({ width, positionVariant = "fixed-top", initialFocusRef, children, ...props }, ref) => {
 	useFocusRestore();
 	return /* @__PURE__ */ jsx(StyledModalContent, {
 		ref,
 		$positionVariant: positionVariant,
 		$width: width,
+		...isNotNil(initialFocusRef) ? { initialFocus: initialFocusRef } : {},
 		...props,
 		children
 	});
@@ -12217,20 +12267,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;
@@ -12252,21 +12302,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,
@@ -12318,6 +12361,14 @@ const getControlProps = (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);
 `;
@@ -12355,41 +12406,38 @@ const StyledCircle = styled.circle`
       `}
   }
 `;
-const PopoverArrow$1 = ({ isAnimated }) => {
-	return /* @__PURE__ */ jsx(PopoverArrow, {
-		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"
-				})
-			]
-		})
-	});
+const PopoverArrow = ({ isAnimated }) => {
+	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$1.displayName = "PopoverArrow_UI";
+PopoverArrow.displayName = "PopoverArrow_UI";
 //#endregion
 //#region src/components/Popover/Popover.tsx
-const StyledContent$1 = styled(Content$2)`
+const StyledPopup$1 = styled(Popover$1.Popup)`
   z-index: var(--wui-zindex-popover);
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   ${({ $unstyled }) => !$unstyled && css`
@@ -12403,6 +12451,10 @@ const StyledContent$1 = styled(Content$2)`
       overflow: auto;
     `}
 
+  ${({ $withArrow }) => $withArrow && css`
+      overflow: visible;
+    `}
+
   [data-wui-popover-close] {
     position: absolute;
     top: var(--wui-space-02);
@@ -12412,37 +12464,40 @@ const StyledContent$1 = styled(Content$2)`
 /**
 * Displays rich content in a portal, triggered by a button.
 */
-const Popover = ({ children, trigger, isOpen = false, hideCloseButton = false, maxWidth = "320px", maxHeight = "auto", onOpenChange, unstyled = false, withArrow = false, isAnimated = false, colorScheme = "inherit", style, ...props }) => {
-	const sideOffset = withArrow ? -24 : 8;
+const Popover = ({ children, trigger, isOpen = false, hideCloseButton = false, maxWidth = "320px", maxHeight = "auto", 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(Root$4, {
+	return /* @__PURE__ */ jsxs(Popover$1.Root, {
 		...getControlProps(isOpen, onOpenChange),
-		children: [/* @__PURE__ */ jsx(Trigger$2, {
-			asChild: true,
-			children: trigger
-		}), /* @__PURE__ */ jsx(Portal$1, { children: /* @__PURE__ */ jsxs(StyledContent$1, {
-			$colorScheme: colorScheme,
+		children: [/* @__PURE__ */ jsx(Popover$1.Trigger, {
+			nativeButton,
+			render: trigger
+		}), /* @__PURE__ */ jsx(Popover$1.Portal, { children: /* @__PURE__ */ jsx(Popover$1.Positioner, {
+			align,
+			side,
 			sideOffset,
-			...props,
-			$unstyled: unstyled,
-			style: mergedStyle,
-			children: [
-				!hideCloseButton && /* @__PURE__ */ jsx(Close, {
-					asChild: true,
-					children: /* @__PURE__ */ jsx(IconButton, {
+			children: /* @__PURE__ */ jsxs(StyledPopup$1, {
+				$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$1, { isAnimated }) : null,
-				/* @__PURE__ */ jsx("div", { children })
-			]
+					}) }),
+					withArrow ? /* @__PURE__ */ jsx(PopoverArrow, { isAnimated }) : null,
+					/* @__PURE__ */ jsx("div", { children })
+				]
+			})
 		}) })]
 	});
 };
@@ -12456,10 +12511,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);
@@ -12468,17 +12523,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;
@@ -12498,14 +12551,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
 	] });
@@ -13087,7 +13137,7 @@ const segmentedControlStyles = css`
   position: relative;
   width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
 `;
-const StyledSegmentedControl = styled(Root$3)`
+const StyledSegmentedControl = styled(ToggleGroup)`
   ${segmentedControlStyles}
 `;
 /**
@@ -13100,11 +13150,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,
@@ -13116,7 +13166,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);
@@ -13150,10 +13200,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));
@@ -13183,7 +13234,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) => {
@@ -13192,8 +13243,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;
@@ -13234,7 +13284,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);
@@ -13280,7 +13330,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);
@@ -13294,8 +13344,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'] {
@@ -13307,55 +13357,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;
@@ -13381,15 +13463,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"
 		}) })]
@@ -13398,11 +13482,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",
@@ -13429,28 +13513,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;
@@ -13477,16 +13561,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,
@@ -13494,13 +13581,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}`))]
+			}) })
 		})
 	});
 };
@@ -13518,7 +13605,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;
@@ -13702,8 +13789,10 @@ const useTabsValue = () => {
 const Tabs = ({ children, value: valueProp, onValueChange: onValueChangeProp, defaultValue, ...props }) => {
 	const [value, setValue] = useState(valueProp ?? defaultValue);
 	const onValueChange = useCallback((newValue) => {
-		setValue(newValue);
-		if (onValueChangeProp) onValueChangeProp(newValue);
+		if (newValue !== null) {
+			setValue(newValue);
+			if (onValueChangeProp) onValueChangeProp(newValue);
+		}
 	}, [onValueChangeProp]);
 	const rootProps = {
 		...props,
@@ -13711,7 +13800,7 @@ const Tabs = ({ children, value: valueProp, onValueChange: onValueChangeProp, de
 	};
 	if (isNotNil(value)) rootProps.value = value;
 	if (isNotNil(defaultValue)) rootProps.defaultValue = defaultValue;
-	return /* @__PURE__ */ jsx(Root$10, {
+	return /* @__PURE__ */ jsx(Tabs$1.Root, {
 		...rootProps,
 		children: /* @__PURE__ */ jsx(TabsValueProvider, {
 			value: value ?? defaultValue,
@@ -13723,7 +13812,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
 	});
@@ -13748,7 +13837,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 }) => {
@@ -13761,7 +13850,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 {