@wistia/ui 0.26.8-beta.e6adee61.1fbb76a → 0.26.8

package/dist/index.js

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.26.8-beta.e6adee61.1fbb76a
+ * @license @wistia/ui v0.26.8
  *
  * Copyright (c) 2024-2026, Wistia, Inc. and its affiliates.
  *
@@ -8,7 +8,7 @@
  */
 
 import { Tooltip as Tooltip$1 } from "@base-ui/react/tooltip";
-import { Children, cloneElement, createContext, forwardRef, isValidElement, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, useTransition } from "react";
+import { Children, cloneElement, createContext, isValidElement, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState, useTransition } from "react";
 import { createGlobalStyle, css, keyframes, styled } from "styled-components";
 import { isArray, isBoolean, isDate, isEmptyString, isFunction, isNil, isNonEmptyArray, isNonEmptyString, isNotNil, isNotUndefined, isNumber, isRecord, isString, isUndefined } from "@wistia/type-guards";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -37,7 +37,6 @@ import { matchSorter } from "match-sorter";
 import { createPortal } from "react-dom";
 import { ContextMenu as ContextMenu$1 } from "@base-ui/react/context-menu";
 import { Menu as Menu$1 } from "@base-ui/react/menu";
-import { DayPicker } from "@daypicker/react";
 import { ValidationError } from "yup";
 import { PreviewCard as PreviewCard$1 } from "@base-ui/react/preview-card";
 import ReactMarkdown from "react-markdown";
@@ -8717,46 +8716,23 @@ const inputCss = css`
   --wui-input-line-height: 16px;
   --wui-input-font-weight: var(--wui-typography-weight-body);
 `;
-/**
-* Applies the shared visual styling for input-like form controls (background,
-* outline, focus/error/disabled states, typography). Consumes the tokens from
-* `inputCss`, which must be applied to the element itself or an ancestor.
-*/
-const inputShellCss = css`
-  padding: var(--wui-input-vertical-padding) var(--wui-input-horizontal-padding);
-  background-color: var(--wui-input-color-bg);
-  border: none;
-  outline: 1px solid var(--wui-input-color-border);
-  outline-offset: -1px;
-  border-radius: var(--wui-input-border-radius);
-  font-size: var(--wui-input-font-size);
-  line-height: var(--wui-input-line-height);
-  font-weight: var(--wui-input-font-weight);
-  color: var(--wui-input-color-text);
-
-  &:focus,
-  &[aria-expanded='true'] {
-    outline-width: 2px;
-    outline-color: var(--wui-input-color-border-focus);
-    outline-offset: -2px;
-  }
-
-  &[aria-invalid='true'] {
-    outline-color: var(--wui-input-color-border-error);
-  }
-
-  &:disabled {
-    outline-color: var(--wui-color-border-disabled);
-    background-color: var(--wui-color-bg-surface-disabled);
-  }
-`;
 //#endregion
 //#region src/components/Input/Input.tsx
 const inputStyles = css`
   ${inputCss}
   input,
   textarea {
-    ${inputShellCss}
+    padding: var(--wui-input-vertical-padding) var(--wui-input-horizontal-padding);
+    background-color: var(--wui-input-color-bg);
+    border: none;
+    outline: 1px solid var(--wui-input-color-border);
+    outline-offset: -1px;
+    border-radius: var(--wui-input-border-radius);
+    font-size: var(--wui-input-font-size);
+    line-height: var(--wui-input-line-height);
+    font-weight: var(--wui-input-font-weight);
+    color: var(--wui-input-color-text);
+
     &:read-only {
       outline-style: dashed;
     }
@@ -8765,6 +8741,21 @@ const inputStyles = css`
       color: var(--wui-input-placeholder);
       opacity: 1; /* Firefox */
     }
+
+    &:focus {
+      outline-width: 2px;
+      outline-color: var(--wui-input-color-border-focus);
+      outline-offset: -2px;
+    }
+
+    &[aria-invalid='true'] {
+      outline-color: var(--wui-input-color-border-error);
+    }
+
+    &:disabled {
+      outline-color: var(--wui-color-border-disabled);
+      background-color: var(--wui-color-bg-surface-disabled);
+    }
   }
 `;
 const calculateTextareaHeight = (rows = 1) => `calc((var(--wui-input-line-height) * ${rows}) + (var(--wui-input-vertical-padding) * 2));`;
@@ -10397,1441 +10388,468 @@ const DataListItemValue = (props) => {
 };
 DataListItemValue.displayName = "DataListItemValue_UI";
 //#endregion
-//#region src/private/helpers/getControls/getControlProps.tsx
-const getControlProps = (isOpen, onOpenChange) => {
-	return isNotNil(onOpenChange) && isNotNil(isOpen) ? {
-		open: isOpen,
-		onOpenChange
-	} : {};
+//#region src/components/Divider/Divider.tsx
+const horizontalBorderCss = css`
+  border-top-color: var(--wui-color-border);
+  border-top-style: solid;
+  border-top-width: 1px;
+  clear: both; /* for horizontal dividers, ensure it clears any floats */
+  height: 0;
+  margin-left: var(--wui-divider-inset);
+  margin-right: var(--wui-divider-inset);
+`;
+const verticalBorderCss = css`
+  background-color: var(--wui-color-border);
+  max-width: 1px;
+  min-height: 100%;
+  width: 1px;
+  margin-top: var(--wui-divider-inset);
+  margin-bottom: var(--wui-divider-inset);
+`;
+const DividerComponent = styled.div`
+  ${({ $orientation }) => {
+	switch ($orientation) {
+		case "vertical": return verticalBorderCss;
+		default: return horizontalBorderCss;
+	}
+}}
+  --wui-divider-inset: ${({ $inset }) => `var(--wui-${$inset})`};
+
+  align-self: stretch;
+`;
+/**
+* A line used to visually separate content; note that dividers have no external margin/spacing on their own.
+*/
+const Divider = ({ orientation = "horizontal", inset = "space-00", ...props }) => {
+	const responsiveOrientation = useResponsiveProp(orientation);
+	return /* @__PURE__ */ jsx(DividerComponent, {
+		$inset: useResponsiveProp(inset),
+		$orientation: responsiveOrientation,
+		"aria-orientation": responsiveOrientation,
+		role: "separator",
+		...props
+	});
 };
+Divider.displayName = "Divider_UI";
 //#endregion
-//#region src/components/Popover/PopoverArrow.tsx
-const StyledArrowSvg = styled.svg`
-  pointer-events: none;
-
-  /* override inline positioning and rotate the arrow so the circle sits near the trigger and the stalk extends down toward the popup. */
-  &[data-side='top'] {
-    top: 100% !important;
+//#region src/components/EditableHeading/EditableHeading.tsx
+const StyledInput$1 = styled(Input)`
+  &:not([rows]) {
+    min-height: unset;
   }
 
-  &[data-side='bottom'] {
-    top: 0 !important;
-    transform: rotate(180deg);
-    transform-origin: center 0;
+  &:focus {
+    height: ${({ $height }) => `${$height}px !important`};
   }
 
-  &[data-side='left'] {
-    right: 0;
-    left: auto;
-    transform: translateX(52px) rotate(-90deg);
-    transform-origin: center center;
-  }
+  && {
+    ${({ $variant }) => variantStyleMap$1[$variant]}
+    /* The input font styles (edit mode) needs the same font styles as Heading */
+    --wui-input-font-size: var(--font-size);
+    --wui-input-font-weight: var(--font-weight);
+    --wui-input-line-height: var(--line-height);
 
-  &[data-side='right'] {
-    left: 0;
-    right: auto;
-    transform: translateX(-52px) rotate(90deg);
-    transform-origin: center center;
-  }
-`;
-const StyledPath = styled.path`
-  fill: var(--wui-color-border-secondary);
-`;
-const circleAnimation = keyframes`
-  0% {
-    opacity: var(--wui-popover-arrow-circle-starting-opacity);
-  }
-  100% {
-    opacity: 0;
+    font-family: var(--font-family);
+    width: 100%;
+    padding: var(--wui-space-02);
+    border: none;
+    height: ${({ $height }) => `${$height}px`};
+    min-height: ${({ $height }) => `${$height}px`};
+    resize: none;
   }
 `;
-const StyledCircle = styled.circle`
-  stroke: var(--wui-color-border-active);
-  animation-duration: 2s;
-  animation-iteration-count: infinite;
-  animation-direction: alternate;
-  animation-timing-function: ease-in-out;
-
-  &[data-wui-popover-arrow-inner-circle] {
-    --wui-popover-arrow-circle-starting-opacity: 0.36;
-
-    opacity: var(--wui-popover-arrow-circle-starting-opacity);
-  }
-
-  &[data-wui-popover-arrow-outer-circle] {
-    --wui-popover-arrow-circle-starting-opacity: 0.2;
-
-    animation-direction: alternate-reverse;
-    opacity: 0.11;
+const editableStyles = css`
+  &:has(+ :focus-within) {
+    background: var(--wui-color-bg-surface-hover);
   }
 
-  @media (prefers-reduced-motion: no-preference) {
-    ${({ $isAnimated }) => $isAnimated && css`
-        animation-name: ${circleAnimation};
-      `}
+  &:hover {
+    background: var(--wui-color-bg-surface-hover);
+    cursor: pointer;
   }
 `;
-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.displayName = "PopoverArrow_UI";
-//#endregion
-//#region src/components/Popover/Popover.tsx
-const StyledPopup$3 = styled(Popover$1.Popup)`
-  ${({ $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);
-  }
+const StyledHeading = styled(Heading)`
+  width: 100%;
+  border-radius: var(--wui-border-radius-02);
+  padding: var(--wui-space-02);
+  overflow-wrap: anywhere;
+  transition: all var(--wui-motion-duration-01) var(--wui-motion-ease);
+  ${({ $editingDisabled }) => !$editingDisabled && editableStyles}
 `;
 /**
-* Displays rich content in a portal, triggered by a button.
-*
-* For more control — custom anchor, no injected close button, etc. — compose
-* the primitives directly: `PopoverRoot`, `PopoverTrigger`, `PopoverAnchor`,
-* `PopoverPortal`, `PopoverContent`, `PopoverClose`.
+* A special heading component that allows for inline editing. When clicked or activated via keyboard,
+* it transforms into an editable text field. In its default state, it renders as a heading with
+* an accessible button that enables editing mode. The component handles empty values, keyboard
+* navigation (Enter to save, Escape to cancel), and provides callbacks for value and state changes.
 */
-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
+const EditableHeading = ({ children, onValueChange, onEditingChange, tooltipText = "Click to edit title", ariaLabel = "Edit title", variant = "heading1", __forceEditing = false, editingDisabled = false }) => {
+	const [isEditing, setIsEditing] = useState(false);
+	const [value, setValue] = useState(children);
+	const [previousValue, setPreviousValue] = useState(children);
+	const [headingHeight, setHeadingHeight] = useState("60");
+	const headingRef = useRef(null);
+	const handleSetEditing = (editing) => {
+		if (editingDisabled) return;
+		if (editing && headingRef.current) setHeadingHeight(`${headingRef.current.offsetHeight}`);
+		if (editing) setPreviousValue(value);
+		setIsEditing(editing);
+		onEditingChange?.(editing);
 	};
-	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,
-			style: { zIndex: "var(--wui-zindex-popover)" },
-			children: /* @__PURE__ */ jsxs(StyledPopup$3, {
-				$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;
-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 PopoverClose = ({ ref, ...props }) => /* @__PURE__ */ jsx(Popover$1.Close, {
-	ref,
-	...props
-});
-//#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$2 = styled(Popover$1.Popup)`
-  ${({ $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 = ({ colorScheme = "inherit", unstyled = false, maxWidth = DEFAULT_MAX_WIDTH, maxHeight = DEFAULT_MAX_HEIGHT, sideOffset = DEFAULT_SIDE_OFFSET, side, align, style, role = "dialog", children, ref, ...props }) => {
-	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,
-		style: { zIndex: "var(--wui-zindex-popover)" },
-		...hasAnchor ? { anchor: sharedAnchorRef } : {},
-		children: /* @__PURE__ */ jsx(StyledPopup$2, {
-			ref,
-			$colorScheme: colorScheme,
-			$unstyled: unstyled,
-			role,
-			style: mergedStyle,
-			...props,
-			children
-		})
-	});
-};
-//#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 = ({ nativeButton = true, ref, ...props }) => /* @__PURE__ */ jsx(Popover$1.Trigger, {
-	ref,
-	nativeButton,
-	...props
-});
-//#endregion
-//#region src/components/DatePicker/DatePickerContext.tsx
-const DatePickerContext = createContext(null);
-const DatePickerProvider = DatePickerContext.Provider;
-const useDatePickerContext = () => {
-	const context = useContext(DatePickerContext);
-	if (context === null) throw new Error("useDatePickerContext must be used within a DatePickerProvider");
-	return context;
-};
-//#endregion
-//#region src/components/DatePicker/datePickerUtils.ts
-/**
-* Formats a Date into a human-readable string (e.g. "Jun 3, 2021").
-* Returns an empty string for null/undefined.
-*/
-const formatDate = (date) => {
-	if (date === null) return "";
-	return dateOnlyString(date);
-};
-/**
-* Formats a Date as an ISO 8601 date-only string (`YYYY-MM-DD`) in local time.
-* Intended for form submission — unlike the locale-formatted display string,
-* this is stable across locales and trivial for backends to parse.
-*/
-const toISODate = (date) => {
-	return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
-};
-const stripTime = (date) => new Date(date.getFullYear(), date.getMonth(), date.getDate());
-/**
-* Returns true if the date falls within the min/max range (inclusive).
-*/
-const isDateInRange = (date, minDate, maxDate) => {
-	const dateOnly = stripTime(date);
-	if (minDate !== void 0 && dateOnly < stripTime(minDate)) return false;
-	if (maxDate !== void 0 && dateOnly > stripTime(maxDate)) return false;
-	return true;
-};
-/**
-* Returns true if the date matches any of the disabled matchers.
-* Supports a subset of react-day-picker Matcher types:
-* - Date objects (exact match by day)
-* - { dayOfWeek: number[] }
-* - { before: Date } / { after: Date }
-* - { from: Date, to: Date }
-*/
-const isDateDisabled = (date, disabledDates) => {
-	if (disabledDates === void 0) return false;
-	const matchers = Array.isArray(disabledDates) ? disabledDates : [disabledDates];
-	const dateOnly = stripTime(date);
-	return matchers.some((matcher) => {
-		if (matcher instanceof Date) return dateOnly.getTime() === stripTime(matcher).getTime();
-		if (typeof matcher !== "object") return false;
-		if ("dayOfWeek" in matcher && Array.isArray(matcher.dayOfWeek)) return matcher.dayOfWeek.includes(date.getDay());
-		if ("before" in matcher && matcher.before instanceof Date) return dateOnly < stripTime(matcher.before);
-		if ("after" in matcher && matcher.after instanceof Date) return dateOnly > stripTime(matcher.after);
-		if ("from" in matcher && "to" in matcher) {
-			const { from } = matcher;
-			const { to } = matcher;
-			if (from instanceof Date && to instanceof Date) return dateOnly >= stripTime(from) && dateOnly <= stripTime(to);
-		}
-		return false;
-	});
-};
-/**
-* Builds a combined disabled matcher array for react-day-picker from
-* minDate, maxDate, and user-provided disabledDates.
-*/
-const buildDisabledMatcher = (minDate, maxDate, disabledDates) => {
-	const matchers = [];
-	if (minDate !== void 0) matchers.push({ before: minDate });
-	if (maxDate !== void 0) matchers.push({ after: maxDate });
-	if (disabledDates !== void 0) if (Array.isArray(disabledDates)) matchers.push(...disabledDates);
-	else matchers.push(disabledDates);
-	return matchers;
-};
-//#endregion
-//#region src/components/DatePicker/DatePickerInput.tsx
-const StyledMobileTrigger = styled.button`
-  ${inputCss}
-  ${inputShellCss}
-
-  display: inline-flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--wui-space-02);
-  width: 100%;
-  font-family: inherit;
-  text-align: left;
-  cursor: pointer;
-
-  &:disabled {
-    cursor: not-allowed;
-  }
-
-  &[data-empty='true'] {
-    color: var(--wui-input-placeholder);
-  }
-`;
-const DatePickerInput = ({ placeholder = "Select a date...", fullWidth, name, id, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedBy }) => {
-	const { selectedDate, isOpen, inputText, disabled, isMobile, popoverId, inputRef, popoverContentRef, handleInputChange, handleCommit, handleCancel, openPopover } = useDatePickerContext();
-	const submittedValue = selectedDate !== null ? toISODate(selectedDate) : "";
-	const handleClick = () => {
-		if (!isOpen) openPopover();
-	};
-	if (isMobile) {
-		const handleMobileKeyDown = (event) => {
-			if (event.key === "Escape" && isOpen) {
-				event.preventDefault();
-				handleCancel();
-			}
-		};
-		const isEmpty = inputText.length === 0;
-		return /* @__PURE__ */ jsxs(PopoverAnchor, { children: [/* @__PURE__ */ jsxs(StyledMobileTrigger, {
-			ref: inputRef,
-			"aria-controls": isOpen ? popoverId : void 0,
-			"aria-describedby": ariaDescribedBy,
-			"aria-expanded": isOpen,
-			"aria-haspopup": "dialog",
-			...ariaInvalid !== void 0 ? { "aria-invalid": ariaInvalid } : {},
-			$fullWidth: fullWidth ?? false,
-			"data-empty": isEmpty,
-			disabled,
-			id,
-			type: "button",
-			onClick: handleClick,
-			onKeyDown: handleMobileKeyDown,
-			children: [/* @__PURE__ */ jsx("span", { children: isEmpty ? placeholder : inputText }), /* @__PURE__ */ jsx(Icon, {
-				type: "calendar",
-				size: "md"
-			})]
-		}), name !== void 0 && /* @__PURE__ */ jsx("input", {
-			name,
-			type: "hidden",
-			value: submittedValue
-		})] });
-	}
-	const handleBlur = (event) => {
-		const relatedTarget = event.relatedTarget;
-		if (relatedTarget !== null && popoverContentRef.current?.contains(relatedTarget)) return;
-		handleCommit();
-	};
-	const focusGrid = () => {
-		const popover = popoverContentRef.current;
-		if (popover === null) return;
-		(popover.querySelector(".rdp-day_button[tabindex=\"0\"]") ?? popover.querySelector(".rdp-day_button:not([disabled])") ?? popover).focus();
+	const handleFinishEditing = () => {
+		const trimmedValue = value.trim();
+		if (trimmedValue === "") setValue(previousValue);
+		else if (trimmedValue !== previousValue && onValueChange) onValueChange(trimmedValue);
+		else setValue(trimmedValue);
+		handleSetEditing(false);
 	};
 	const handleKeyDown = (event) => {
-		if (event.key === "Enter") {
-			event.preventDefault();
-			handleCommit();
-			return;
-		}
-		if (event.key === "Escape" && isOpen) {
+		if (event.key === "Enter" && !event.shiftKey) {
 			event.preventDefault();
-			handleCancel();
-			return;
+			handleFinishEditing();
 		}
-		if (event.key === "ArrowDown") {
-			event.preventDefault();
-			if (!isOpen) openPopover();
-			if (!event.altKey) requestAnimationFrame(() => {
-				focusGrid();
-			});
+		if (event.key === "Escape") {
+			setValue(previousValue);
+			handleSetEditing(false);
 		}
 	};
-	return /* @__PURE__ */ jsxs(PopoverAnchor, { children: [/* @__PURE__ */ jsx(Input, {
-		ref: inputRef,
-		"aria-controls": popoverId,
-		"aria-describedby": ariaDescribedBy,
-		"aria-expanded": isOpen,
-		...ariaInvalid !== void 0 ? { "aria-invalid": ariaInvalid } : {},
-		autoSelect: true,
-		disabled,
-		...fullWidth !== void 0 ? { fullWidth } : {},
-		id,
-		placeholder,
-		rightIcon: /* @__PURE__ */ jsx(Icon, { type: "calendar" }),
-		role: "combobox",
-		value: inputText,
-		onBlur: handleBlur,
-		onChange: (event) => {
-			handleInputChange(event.target.value);
+	const HeadingComponent = /* @__PURE__ */ jsx(StyledHeading, {
+		ref: headingRef,
+		$editingDisabled: editingDisabled,
+		onClick: () => handleSetEditing(true),
+		variant,
+		children: value
+	});
+	if (editingDisabled) return HeadingComponent;
+	if (isEditing || __forceEditing) return /* @__PURE__ */ jsx(StyledInput$1, {
+		$height: headingHeight,
+		$variant: variant,
+		autoFocus: true,
+		fullWidth: true,
+		onBlur: handleFinishEditing,
+		onChange: (event) => setValue(event.target.value),
+		onFocus: (event) => {
+			const { length } = event.currentTarget.value;
+			event.currentTarget.setSelectionRange(length, length);
 		},
-		onClick: handleClick,
-		onKeyDown: handleKeyDown
-	}), name !== void 0 && /* @__PURE__ */ jsx("input", {
-		name,
-		type: "hidden",
-		value: submittedValue
-	})] });
+		onKeyDown: handleKeyDown,
+		type: "multiline",
+		value
+	});
+	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Tooltip, {
+		content: tooltipText,
+		children: HeadingComponent
+	}), /* @__PURE__ */ jsx(ScreenReaderOnly, { children: /* @__PURE__ */ jsx("button", {
+		"aria-label": ariaLabel,
+		onClick: () => handleSetEditing(true),
+		type: "button"
+	}) })] });
 };
-DatePickerInput.displayName = "DatePickerInput_UI";
 //#endregion
-//#region src/private/components/Calendar/CalendarNavigation.tsx
-const StyledNav = styled.div`
-  position: absolute;
-  inset-block-start: 0;
-  inset-inline-end: 0;
-  display: flex;
-  align-items: center;
+//#region src/components/EditableText/EditableTextRoot.tsx
+const LARGE_PADDING = "var(--wui-space-02)";
+const SMALL_PADDING = "var(--wui-space-01)";
+const getPaddingForVariant = (variant) => {
+	const largePaddingVariants = [
+		"hero",
+		"heading1",
+		"heading2",
+		"heading3",
+		"body1",
+		"label1",
+		"body1Mono"
+	];
+	const smallPaddingVariants = [
+		"heading4",
+		"heading5",
+		"heading6",
+		"body2",
+		"body3",
+		"body4",
+		"label2",
+		"label3",
+		"label4",
+		"body2Mono",
+		"body3Mono",
+		"body4Mono"
+	];
+	if (largePaddingVariants.includes(variant)) return LARGE_PADDING;
+	if (smallPaddingVariants.includes(variant)) return SMALL_PADDING;
+	return SMALL_PADDING;
+};
+const StyledEditableTextRoot = styled.div`
+  display: contents;
+
+  --wui-editable-text-padding: ${({ $typographicVariant }) => getPaddingForVariant($typographicVariant)};
+  --wui-editable-text-border-radius: var(--wui-border-radius-01);
 `;
-const CalendarNavigation = ({ onPreviousClick, onNextClick, previousMonth, nextMonth }) => {
-	return /* @__PURE__ */ jsxs(StyledNav, { children: [/* @__PURE__ */ jsx(IconButton, {
-		disabled: !previousMonth,
-		label: "Go to previous month",
-		onClick: onPreviousClick,
-		size: "md",
-		variant: "ghost",
-		children: /* @__PURE__ */ jsx(Icon, { type: "caret-left" })
-	}), /* @__PURE__ */ jsx(IconButton, {
-		disabled: !nextMonth,
-		label: "Go to next month",
-		onClick: onNextClick,
-		size: "md",
-		variant: "ghost",
-		children: /* @__PURE__ */ jsx(Icon, { type: "caret-right" })
-	})] });
+const EditableTextContext = createContext(null);
+const EditableTextRoot = ({ children, defaultValue = "", value: controlledValue, onValueChange, onValueCommit, onValueRevert, onEditingChange, typographicVariant = "body2", submitMode = "both", readOnly = false, id, label, placeholder = "Click to edit this text", minLines = 1, maxLines, finalFocusEl, ...props }) => {
+	const isControlled = controlledValue !== void 0;
+	const [internalValue, setInternalValue] = useState(defaultValue);
+	const [originalValue, setOriginalValue] = useState(defaultValue);
+	const [isEditing, setIsEditing] = useState(false);
+	const value = isControlled ? controlledValue : internalValue;
+	const generatedId = useId();
+	const computedId = isNonEmptyString(id) ? id : `wistia-ui-editable-text-${generatedId}`;
+	const handleSetIsEditing = useCallback((editing) => {
+		if (editing && !isEditing) setOriginalValue(value);
+		setIsEditing(editing);
+		onEditingChange?.(editing);
+	}, [
+		isEditing,
+		value,
+		onEditingChange
+	]);
+	const setValue = useCallback((newValue) => {
+		if (!isControlled) setInternalValue(newValue);
+		onValueChange?.(newValue);
+	}, [isControlled, onValueChange]);
+	const context = useMemo(() => {
+		return {
+			isEditing,
+			setIsEditing: handleSetIsEditing,
+			value,
+			setValue,
+			originalValue,
+			onValueCommit,
+			onValueRevert,
+			typographicVariant,
+			submitMode,
+			readOnly,
+			id: computedId,
+			label,
+			placeholder,
+			minLines,
+			maxLines,
+			finalFocusEl
+		};
+	}, [
+		isEditing,
+		handleSetIsEditing,
+		value,
+		setValue,
+		originalValue,
+		onValueCommit,
+		onValueRevert,
+		typographicVariant,
+		submitMode,
+		readOnly,
+		computedId,
+		label,
+		placeholder,
+		minLines,
+		maxLines,
+		finalFocusEl
+	]);
+	const getState = () => {
+		if (readOnly) return "read-only";
+		if (isEditing) return "editing";
+		return "idle";
+	};
+	return /* @__PURE__ */ jsx(StyledEditableTextRoot, {
+		$typographicVariant: typographicVariant,
+		"data-testid": "editable-text-root",
+		"data-wui-editable-text-root": true,
+		"data-wui-editable-text-state": getState(),
+		...props,
+		children: /* @__PURE__ */ jsx(EditableTextContext, {
+			value: context,
+			children
+		})
+	});
 };
-CalendarNavigation.displayName = "CalendarNavigation";
 //#endregion
-//#region src/private/components/Calendar/calendarStyles.ts
-const calendarCss = css`
-  /* stylelint-disable selector-class-pattern, no-descending-specificity --
-     @daypicker/react ships class names with underscores (e.g. rdp-day_button, rdp-range_start).
-     We can't rename library classes, so the kebab-case pattern doesn't apply here. The
-     descending-specificity rule is disabled because state rules (.rdp-today, .rdp-selected,
-     .rdp-range_*) intentionally layer on top of the base .rdp-day_button block. */
-
-  /* Root */
-  .rdp-root {
-    --rdp-day-size: 36px;
-
-    font-family: var(--wui-typography-family-default);
-    font-size: var(--wui-typography-body-3-size);
-    font-weight: var(--wui-typography-body-3-weight);
-    user-select: none;
-    position: relative;
-  }
-
-  /* Months layout */
-  .rdp-months {
-    display: flex;
-    gap: var(--wui-space-05);
-  }
-
-  .rdp-month {
-    display: flex;
-    flex-direction: column;
-  }
-
-  /* Caption / navigation row */
-  .rdp-month_caption {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding-left: var(--wui-space-01);
-  }
-
-  .rdp-caption_label {
-    font-family: var(--wui-typography-heading-4-family);
-    font-weight: var(--wui-typography-heading-4-weight);
-    font-size: var(--wui-typography-heading-4-size);
-    line-height: var(--wui-typography-heading-4-line-height);
-    min-height: 32px;
-    display: flex;
-    align-items: center;
-    white-space: nowrap;
-  }
-
-  /* Grid */
-  .rdp-month_grid {
-    border-collapse: collapse;
-    border-spacing: 0;
-  }
+//#region src/components/EditableText/EditableTextDisplay.tsx
+const StyledEditableTextDisplay = styled.div`
+  ${({ $typographicVariant }) => getTypographicStyles($typographicVariant)}
+  padding: var(--wui-editable-text-padding);
+  border-radius: var(--wui-editable-text-border-radius);
+  margin: 0;
+  transition: all var(--wui-motion-duration-02) var(--wui-motion-ease);
+  ${({ $maxLines }) => {
+	if (isNotNil($maxLines)) return css`
+        ${ellipsisStyle};
+        ${lineClampCss($maxLines)};
+      `;
+}}
+  ${({ $minLines }) => isNotNil($minLines) && css`
+      min-height: calc(${$minLines}lh + calc(var(--wui-editable-text-padding) * 2));
+    `}
+  word-break: normal;
+  overflow-wrap: anywhere;
 
-  /* Weekday headers */
-  .rdp-weekday {
+  &[data-wui-editable-text-display='placeholder'] {
     color: var(--wui-color-text-secondary);
-    font-weight: var(--wui-typography-label-3-weight);
-    font-size: var(--wui-typography-label-3-size);
-    line-height: var(--wui-typography-label-3-line-height);
-    text-align: center;
-    width: var(--rdp-day-size);
-    height: var(--rdp-day-size);
-    padding: 0;
-  }
-
-  /* Day cells */
-  .rdp-day {
-    width: var(--rdp-day-size);
-    height: var(--rdp-day-size);
-    text-align: center;
-    padding: 0;
   }
 
-  /* Day button — base */
-  .rdp-day_button {
-    --rdp-day-button-size: calc(var(--rdp-day-size) - 4px);
-
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    width: var(--rdp-day-button-size);
-    height: var(--rdp-day-button-size);
-    border: none;
-    border-radius: var(--wui-border-radius-rounded);
-    background: none;
+  &:has(button) {
+    user-select: none;
     cursor: pointer;
-    font-family: var(--wui-typography-label-3-family);
-    font-size: var(--wui-typography-label-3-size);
-    font-weight: var(--wui-typography-label-3-weight);
-    line-height: var(--wui-typography-label-3-line-height);
-    color: var(--wui-color-text);
-    padding: 0;
-    transition: background-color var(--wui-motion-duration-01) var(--wui-motion-ease);
 
-    &:hover:not([disabled]) {
+    &:hover,
+    &:focus-within {
       background-color: var(--wui-color-bg-surface-hover);
     }
-
-    &:focus-visible {
-      outline: 2px solid var(--wui-color-focus-ring);
-      outline-offset: 1px;
-    }
-  }
-
-  /* Day button — today */
-  .rdp-today .rdp-day_button {
-    color: var(--wui-color-text-button-blue);
-    font-weight: var(--wui-typography-weight-label-bold);
-  }
-
-  /* Day button — outside month */
-  .rdp-outside .rdp-day_button {
-    color: var(--wui-color-text-secondary);
-  }
-
-  /* Day button — selected */
-  .rdp-selected .rdp-day_button {
-    background-color: var(--wui-color-bg-fill);
-    color: var(--wui-color-text-on-fill);
-
-    &:hover:not([disabled]) {
-      background-color: var(--wui-color-bg-fill-hover);
-    }
-  }
-
-  /* Day button — disabled */
-  .rdp-disabled .rdp-day_button {
-    color: var(--wui-color-text-disabled);
-    font-weight: var(--wui-typography-weight-body);
-    cursor: not-allowed;
-  }
-
-  /* Day button — disabled + selected (forced state: match disabled button) */
-  .rdp-selected.rdp-disabled .rdp-day_button {
-    background-color: var(--wui-color-bg-surface-disabled);
-    color: var(--wui-color-text-disabled);
-  }
-
-  /* Range — cell backgrounds (the connecting band on the <td>) */
-  .rdp-range_start {
-    border-top-left-radius: var(--wui-border-radius-rounded);
-    border-bottom-left-radius: var(--wui-border-radius-rounded);
-    background-color: var(--wui-color-bg-surface-selected);
-  }
-
-  .rdp-range_end {
-    border-top-right-radius: var(--wui-border-radius-rounded);
-    border-bottom-right-radius: var(--wui-border-radius-rounded);
-    background-color: var(--wui-color-bg-surface-selected);
-  }
-
-  .rdp-range_middle {
-    background-color: var(--wui-color-bg-surface-selected);
-  }
-
-  .rdp-range_start.rdp-range_end {
-    background-color: transparent;
-  }
-
-  /* Range — button overrides */
-  .rdp-range_start .rdp-day_button,
-  .rdp-range_end .rdp-day_button {
-    background-color: var(--wui-color-bg-fill);
-    color: var(--wui-color-text-on-fill);
-  }
-
-  .rdp-range_middle .rdp-day_button {
-    color: var(--wui-color-text-selected);
-    background: none;
-
-    &:hover:not([disabled]) {
-      background-color: var(--wui-color-bg-surface-selected-hover);
-    }
-  }
-
-  /* Hidden */
-  .rdp-hidden {
-    visibility: hidden;
   }
 `;
-//#endregion
-//#region src/private/components/Calendar/Calendar.tsx
-const StyledCalendarWrapper = styled.div`
-  ${calendarCss}
-`;
-/**
-* Removes keys with `undefined` values so that exactOptionalPropertyTypes
-* does not complain when we spread into DayPicker.
-*/
-const stripUndefined = (obj) => Object.fromEntries(Object.entries(obj).filter(([, value]) => value !== void 0));
-/**
-* A calendar grid for selecting dates or date ranges. Built on
-* @daypicker/react and styled with WUI design tokens.
-*/
-const Calendar = (props) => {
-	const { mode, selected, onSelect, month, defaultMonth, onMonthChange, startMonth, endMonth, disabled, numberOfMonths = 1, showOutsideDays, weekStartsOn, today, ...rest } = props;
-	const rangeMin = mode === "range" ? props.min : void 0;
-	const rangeMax = mode === "range" ? props.max : void 0;
-	const dayPickerProps = stripUndefined({
-		...mode === "range" ? {
-			mode: "range",
-			selected,
-			onSelect,
-			min: rangeMin,
-			max: rangeMax
-		} : {
-			mode: "single",
-			selected,
-			onSelect
-		},
-		components: { Nav: CalendarNavigation },
-		defaultMonth,
-		disabled,
-		endMonth,
-		month,
-		numberOfMonths,
-		onMonthChange,
-		showOutsideDays,
-		startMonth,
-		today,
-		weekStartsOn
-	});
-	return /* @__PURE__ */ jsx(StyledCalendarWrapper, {
-		...rest,
-		children: /* @__PURE__ */ jsx(DayPicker, { ...dayPickerProps })
-	});
-};
-Calendar.displayName = "Calendar";
-//#endregion
-//#region src/components/DatePicker/DatePickerPopover.tsx
-const DatePickerPopover = () => {
-	const { selectedDate, previewDate, displayedMonth, align, side, minDate, maxDate, disabledDates, popoverId, inputRef, popoverContentRef, handleDaySelect, handleCancel, setDisplayedMonth } = useDatePickerContext();
-	const disabledMatcher = buildDisabledMatcher(minDate, maxDate, disabledDates);
-	const handleOpenAutoFocus = (event) => {
-		event.preventDefault();
-	};
-	const handleCloseAutoFocus = (event) => {
-		event.preventDefault();
-	};
-	const handlePointerDownOutside = (event) => {
-		const { target } = event.detail.originalEvent;
-		if (target instanceof Node && inputRef.current?.contains(target)) event.preventDefault();
-	};
-	const handleEscapeKeyDown = (event) => {
-		event.preventDefault();
-		handleCancel();
+const EditableTextDisplayComponent = ({ ref, asTrigger, renderAs, ...props }) => {
+	const context = useContext(EditableTextContext);
+	if (!context) throw new Error("EditableTextDisplay must be used within an EditableTextRoot context");
+	const { value, typographicVariant, setIsEditing, placeholder, maxLines, isEditing, minLines } = context;
+	const triggerButtonRef = useRef(null);
+	const handleTriggerClick = () => {
+		setIsEditing(true);
 	};
-	return /* @__PURE__ */ jsx(PopoverPortal, { children: /* @__PURE__ */ jsx(PopoverContent, {
-		ref: popoverContentRef,
-		align,
-		id: popoverId,
-		maxWidth: "none",
-		side,
-		onCloseAutoFocus: handleCloseAutoFocus,
-		onEscapeKeyDown: handleEscapeKeyDown,
-		onOpenAutoFocus: handleOpenAutoFocus,
-		onPointerDownOutside: handlePointerDownOutside,
-		children: /* @__PURE__ */ jsx(Calendar, {
-			...disabledMatcher.length > 0 ? { disabled: disabledMatcher } : {},
-			...maxDate !== void 0 ? { endMonth: maxDate } : {},
-			mode: "single",
-			month: displayedMonth,
-			selected: previewDate ?? selectedDate ?? void 0,
-			...minDate !== void 0 ? { startMonth: minDate } : {},
-			onMonthChange: setDisplayedMonth,
-			onSelect: handleDaySelect
-		})
-	}) });
-};
-DatePickerPopover.displayName = "DatePickerPopover_UI";
-//#endregion
-//#region src/components/DatePicker/DatePicker.tsx
-/**
-* A date picker that combines a text input with natural language parsing
-* and a calendar popover for visual date selection.
-*/
-const DatePicker = forwardRef(({ value, onChange, defaultValue, minDate, maxDate, disabledDates, disabled = false, placeholder, fullWidth, align = "start", side = "bottom", name, id, "aria-invalid": ariaInvalid, "aria-describedby": ariaDescribedBy, ...rest }, ref) => {
-	const isControlled = value !== void 0;
-	const [internalDate, setInternalDate] = useState(defaultValue ?? null);
-	const selectedDate = isControlled ? value : internalDate;
-	const [isOpen, setIsOpen] = useState(false);
-	const [inputText, setInputText] = useState(() => formatDate(selectedDate));
-	const [previewDate, setPreviewDate] = useState(null);
-	const [displayedMonth, setDisplayedMonth] = useState(() => selectedDate ?? /* @__PURE__ */ new Date());
-	const inputRef = useRef(null);
-	const popoverContentRef = useRef(null);
-	const skipNextCommitRef = useRef(false);
-	const popoverId = useId();
-	const { isSmAndDown } = useMq();
-	const commitDate = useCallback((date) => {
-		if (isControlled) onChange(date);
-		else setInternalDate(date);
-		setInputText(formatDate(date));
-		setPreviewDate(null);
-	}, [isControlled, onChange]);
-	const handleInputChange = useCallback((text) => {
-		setInputText(text);
-		const parsed = parseDateString(text);
-		if (parsed !== null) {
-			const inRange = isDateInRange(parsed, minDate, maxDate);
-			const isDisabled = isDateDisabled(parsed, disabledDates);
-			if (inRange && !isDisabled) {
-				setPreviewDate(parsed);
-				setDisplayedMonth(parsed);
-			} else setPreviewDate(null);
-		} else setPreviewDate(null);
-	}, [
-		minDate,
-		maxDate,
-		disabledDates
-	]);
-	const handleCommit = useCallback(() => {
-		if (previewDate !== null) {
-			commitDate(previewDate);
-			setIsOpen(false);
-			return;
-		}
-		setInputText(formatDate(selectedDate));
-		setPreviewDate(null);
-	}, [
-		previewDate,
-		selectedDate,
-		commitDate
-	]);
-	const handleCancel = useCallback(() => {
-		skipNextCommitRef.current = true;
-		setInputText(formatDate(selectedDate));
-		setPreviewDate(null);
-		setIsOpen(false);
-		inputRef.current?.focus();
-	}, [selectedDate]);
-	const openPopover = useCallback(() => {
-		setDisplayedMonth(selectedDate ?? /* @__PURE__ */ new Date());
-		setIsOpen(true);
-	}, [selectedDate]);
-	const handleDaySelect = useCallback((date) => {
-		if (date !== void 0) {
-			skipNextCommitRef.current = true;
-			commitDate(date);
-			setDisplayedMonth(date);
-			setIsOpen(false);
-			inputRef.current?.focus();
-			requestAnimationFrame(() => {
-				const input = inputRef.current;
-				if (input instanceof HTMLInputElement) input.setSelectionRange(input.value.length, input.value.length);
-			});
-		}
-	}, [commitDate]);
-	const handleOpenChange = useCallback((open) => {
-		if (open) setDisplayedMonth(selectedDate ?? /* @__PURE__ */ new Date());
-		else if (skipNextCommitRef.current) skipNextCommitRef.current = false;
-		else handleCommit();
-		setIsOpen(open);
-	}, [handleCommit, selectedDate]);
-	useEffect(() => {
-		if (!isControlled) return;
-		setInputText(formatDate(value));
-		setPreviewDate(null);
-		if (value !== null) setDisplayedMonth(value);
-	}, [isControlled, value]);
-	const contextValue = useMemo(() => ({
-		selectedDate,
-		isOpen,
-		inputText,
-		previewDate,
-		displayedMonth,
-		disabled,
-		isMobile: isSmAndDown,
-		align,
-		side,
-		minDate,
-		maxDate,
-		disabledDates,
-		popoverId,
-		inputRef,
-		popoverContentRef,
-		setIsOpen,
-		setInputText,
-		handleInputChange,
-		handleCommit,
-		handleCancel,
-		handleDaySelect,
-		openPopover,
-		setDisplayedMonth
-	}), [
-		selectedDate,
-		isOpen,
-		inputText,
-		previewDate,
-		displayedMonth,
-		disabled,
-		isSmAndDown,
-		align,
-		side,
-		minDate,
-		maxDate,
-		disabledDates,
-		popoverId,
-		handleInputChange,
-		handleCommit,
-		handleCancel,
-		handleDaySelect,
-		openPopover
-	]);
-	return /* @__PURE__ */ jsx("div", {
-		ref,
-		...rest,
-		children: /* @__PURE__ */ jsx(PopoverRoot, {
-			isOpen,
-			onOpenChange: handleOpenChange,
-			children: /* @__PURE__ */ jsxs(DatePickerProvider, {
-				value: contextValue,
-				children: [/* @__PURE__ */ jsx(DatePickerInput, {
-					"aria-describedby": ariaDescribedBy,
-					"aria-invalid": ariaInvalid,
-					fullWidth,
-					id,
-					name,
-					placeholder
-				}), /* @__PURE__ */ jsx(DatePickerPopover, {})]
-			})
+	const elementType = renderAs ?? getDefaultTypographicElement(typographicVariant);
+	const displayText = value.length > 0 ? value : placeholder;
+	const isPlaceholderVisible = value.length === 0 && Boolean(placeholder);
+	if (isEditing) return null;
+	if (asTrigger && !context.readOnly) return /* @__PURE__ */ jsx(ClickRegion, {
+		targetRef: triggerButtonRef,
+		children: /* @__PURE__ */ jsxs(StyledEditableTextDisplay, {
+			ref,
+			$maxLines: maxLines,
+			$minLines: minLines,
+			$typographicVariant: typographicVariant,
+			as: elementType,
+			"data-wui-editable-text-display": isPlaceholderVisible ? "placeholder" : "value",
+			...props,
+			children: [displayText, /* @__PURE__ */ jsx("button", {
+				ref: triggerButtonRef,
+				onClick: handleTriggerClick,
+				style: { ...visuallyHiddenStyle },
+				type: "button",
+				children: "Edit text"
+			})]
 		})
 	});
-});
-DatePicker.displayName = "DatePicker_UI";
-//#endregion
-//#region src/components/Divider/Divider.tsx
-const horizontalBorderCss = css`
-  border-top-color: var(--wui-color-border);
-  border-top-style: solid;
-  border-top-width: 1px;
-  clear: both; /* for horizontal dividers, ensure it clears any floats */
-  height: 0;
-  margin-left: var(--wui-divider-inset);
-  margin-right: var(--wui-divider-inset);
-`;
-const verticalBorderCss = css`
-  background-color: var(--wui-color-border);
-  max-width: 1px;
-  min-height: 100%;
-  width: 1px;
-  margin-top: var(--wui-divider-inset);
-  margin-bottom: var(--wui-divider-inset);
-`;
-const DividerComponent = styled.div`
-  ${({ $orientation }) => {
-	switch ($orientation) {
-		case "vertical": return verticalBorderCss;
-		default: return horizontalBorderCss;
-	}
-}}
-  --wui-divider-inset: ${({ $inset }) => `var(--wui-${$inset})`};
-
-  align-self: stretch;
-`;
-/**
-* A line used to visually separate content; note that dividers have no external margin/spacing on their own.
-*/
-const Divider = ({ orientation = "horizontal", inset = "space-00", ...props }) => {
-	const responsiveOrientation = useResponsiveProp(orientation);
-	return /* @__PURE__ */ jsx(DividerComponent, {
-		$inset: useResponsiveProp(inset),
-		$orientation: responsiveOrientation,
-		"aria-orientation": responsiveOrientation,
-		role: "separator",
-		...props
+	return /* @__PURE__ */ jsx(StyledEditableTextDisplay, {
+		ref,
+		$maxLines: maxLines,
+		$minLines: minLines,
+		$typographicVariant: typographicVariant,
+		as: elementType,
+		"data-placeholder-visible": isPlaceholderVisible || void 0,
+		"data-wui-editable-text-display": true,
+		...props,
+		children: displayText
 	});
 };
-Divider.displayName = "Divider_UI";
+const EditableTextDisplay = makePolymorphic(EditableTextDisplayComponent);
 //#endregion
-//#region src/components/EditableHeading/EditableHeading.tsx
-const StyledInput$1 = styled(Input)`
-  &:not([rows]) {
-    min-height: unset;
-  }
-
-  &:focus {
-    height: ${({ $height }) => `${$height}px !important`};
-  }
-
+//#region src/components/EditableText/EditableTextInput.tsx
+const StyledInput = styled(Input)`
   && {
-    ${({ $variant }) => variantStyleMap$1[$variant]}
-    /* The input font styles (edit mode) needs the same font styles as Heading */
-    --wui-input-font-size: var(--font-size);
-    --wui-input-font-weight: var(--font-weight);
-    --wui-input-line-height: var(--line-height);
-
-    font-family: var(--font-family);
-    width: 100%;
-    padding: var(--wui-space-02);
-    border: none;
-    height: ${({ $height }) => `${$height}px`};
-    min-height: ${({ $height }) => `${$height}px`};
+    ${({ $minLines }) => isNotNil($minLines) && `min-height: calc(${$minLines}lh + calc(var(--wui-editable-text-padding) * 2));`}
+    ${({ $maxLines }) => isNotNil($maxLines) && `max-height: calc(${$maxLines}lh + calc(var(--wui-editable-text-padding) * 2));`}
+    ${({ $typographicVariant }) => getTypographicStyles($typographicVariant)}
+    background-color: var(--wui-color-bg-surface);
+    border-radius: var(--wui-editable-text-border-radius);
+    padding: var(--wui-editable-text-padding);
     resize: none;
   }
 `;
-const editableStyles = css`
-  &:has(+ :focus-within) {
-    background: var(--wui-color-bg-surface-hover);
-  }
-
-  &:hover {
-    background: var(--wui-color-bg-surface-hover);
-    cursor: pointer;
-  }
-`;
-const StyledHeading = styled(Heading)`
-  width: 100%;
-  border-radius: var(--wui-border-radius-02);
-  padding: var(--wui-space-02);
-  overflow-wrap: anywhere;
-  transition: all var(--wui-motion-duration-01) var(--wui-motion-ease);
-  ${({ $editingDisabled }) => !$editingDisabled && editableStyles}
-`;
-/**
-* A special heading component that allows for inline editing. When clicked or activated via keyboard,
-* it transforms into an editable text field. In its default state, it renders as a heading with
-* an accessible button that enables editing mode. The component handles empty values, keyboard
-* navigation (Enter to save, Escape to cancel), and provides callbacks for value and state changes.
-*/
-const EditableHeading = ({ children, onValueChange, onEditingChange, tooltipText = "Click to edit title", ariaLabel = "Edit title", variant = "heading1", __forceEditing = false, editingDisabled = false }) => {
-	const [isEditing, setIsEditing] = useState(false);
-	const [value, setValue] = useState(children);
-	const [previousValue, setPreviousValue] = useState(children);
-	const [headingHeight, setHeadingHeight] = useState("60");
-	const headingRef = useRef(null);
-	const handleSetEditing = (editing) => {
-		if (editingDisabled) return;
-		if (editing && headingRef.current) setHeadingHeight(`${headingRef.current.offsetHeight}`);
-		if (editing) setPreviousValue(value);
-		setIsEditing(editing);
-		onEditingChange?.(editing);
-	};
-	const handleFinishEditing = () => {
-		const trimmedValue = value.trim();
-		if (trimmedValue === "") setValue(previousValue);
-		else if (trimmedValue !== previousValue && onValueChange) onValueChange(trimmedValue);
-		else setValue(trimmedValue);
-		handleSetEditing(false);
+const EditableTextInput = (props) => {
+	const context = useContext(EditableTextContext);
+	if (!context) throw new Error("EditableTextInput must be used within an EditableTextRoot context");
+	const { isEditing, value, setValue, onValueCommit, setIsEditing, typographicVariant, submitMode, originalValue, onValueRevert, id, placeholder, minLines, maxLines, finalFocusEl } = context;
+	const inputRef = useRef(null);
+	useEffect(() => {
+		if (inputRef.current) {
+			if (isEditing) {
+				const element = inputRef.current;
+				const { style } = element;
+				style.height = "0px";
+				const { scrollHeight } = element;
+				style.height = `${scrollHeight}px`;
+			}
+			if (isEditing) inputRef.current.focus();
+		}
+	}, [value, isEditing]);
+	const handleChange = (event) => {
+		setValue(event.target.value);
 	};
 	const handleKeyDown = (event) => {
-		if (event.key === "Enter" && !event.shiftKey) {
+		if ((submitMode === "enter" || submitMode === "both") && event.key === "Enter" && !event.shiftKey) {
 			event.preventDefault();
-			handleFinishEditing();
+			onValueCommit?.(value);
+			setIsEditing(false);
+			setTimeout(() => {
+				const element = finalFocusEl?.();
+				if (element) element.focus();
+			}, 0);
 		}
 		if (event.key === "Escape") {
-			setValue(previousValue);
-			handleSetEditing(false);
+			event.preventDefault();
+			setValue(originalValue);
+			onValueRevert?.(originalValue);
+			setIsEditing(false);
+			setTimeout(() => {
+				const element = finalFocusEl?.();
+				if (element) element.focus();
+			}, 0);
 		}
 	};
-	const HeadingComponent = /* @__PURE__ */ jsx(StyledHeading, {
-		ref: headingRef,
-		$editingDisabled: editingDisabled,
-		onClick: () => handleSetEditing(true),
-		variant,
-		children: value
-	});
-	if (editingDisabled) return HeadingComponent;
-	if (isEditing || __forceEditing) return /* @__PURE__ */ jsx(StyledInput$1, {
-		$height: headingHeight,
-		$variant: variant,
-		autoFocus: true,
-		fullWidth: true,
-		onBlur: handleFinishEditing,
-		onChange: (event) => setValue(event.target.value),
+	const handleBlur = () => {
+		if (submitMode === "blur" || submitMode === "both") {
+			onValueCommit?.(value);
+			setIsEditing(false);
+			setTimeout(() => {
+				const element = finalFocusEl?.();
+				if (element) element.focus();
+			}, 0);
+		}
+	};
+	if (!isEditing) return null;
+	return /* @__PURE__ */ jsx(StyledInput, {
+		ref: inputRef,
+		$maxLines: maxLines ?? "infinity",
+		$minLines: minLines,
+		$typographicVariant: typographicVariant,
+		"data-wui-editable-text-input": true,
+		id,
+		onBlur: handleBlur,
+		onChange: handleChange,
 		onFocus: (event) => {
 			const { length } = event.currentTarget.value;
 			event.currentTarget.setSelectionRange(length, length);
 		},
 		onKeyDown: handleKeyDown,
+		placeholder,
 		type: "multiline",
-		value
-	});
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Tooltip, {
-		content: tooltipText,
-		children: HeadingComponent
-	}), /* @__PURE__ */ jsx(ScreenReaderOnly, { children: /* @__PURE__ */ jsx("button", {
-		"aria-label": ariaLabel,
-		onClick: () => handleSetEditing(true),
-		type: "button"
-	}) })] });
-};
-//#endregion
-//#region src/components/EditableText/EditableTextRoot.tsx
-const LARGE_PADDING = "var(--wui-space-02)";
-const SMALL_PADDING = "var(--wui-space-01)";
-const getPaddingForVariant = (variant) => {
-	const largePaddingVariants = [
-		"hero",
-		"heading1",
-		"heading2",
-		"heading3",
-		"body1",
-		"label1",
-		"body1Mono"
-	];
-	const smallPaddingVariants = [
-		"heading4",
-		"heading5",
-		"heading6",
-		"body2",
-		"body3",
-		"body4",
-		"label2",
-		"label3",
-		"label4",
-		"body2Mono",
-		"body3Mono",
-		"body4Mono"
-	];
-	if (largePaddingVariants.includes(variant)) return LARGE_PADDING;
-	if (smallPaddingVariants.includes(variant)) return SMALL_PADDING;
-	return SMALL_PADDING;
-};
-const StyledEditableTextRoot = styled.div`
-  display: contents;
-
-  --wui-editable-text-padding: ${({ $typographicVariant }) => getPaddingForVariant($typographicVariant)};
-  --wui-editable-text-border-radius: var(--wui-border-radius-01);
-`;
-const EditableTextContext = createContext(null);
-const EditableTextRoot = ({ children, defaultValue = "", value: controlledValue, onValueChange, onValueCommit, onValueRevert, onEditingChange, typographicVariant = "body2", submitMode = "both", readOnly = false, id, label, placeholder = "Click to edit this text", minLines = 1, maxLines, finalFocusEl, ...props }) => {
-	const isControlled = controlledValue !== void 0;
-	const [internalValue, setInternalValue] = useState(defaultValue);
-	const [originalValue, setOriginalValue] = useState(defaultValue);
-	const [isEditing, setIsEditing] = useState(false);
-	const value = isControlled ? controlledValue : internalValue;
-	const generatedId = useId();
-	const computedId = isNonEmptyString(id) ? id : `wistia-ui-editable-text-${generatedId}`;
-	const handleSetIsEditing = useCallback((editing) => {
-		if (editing && !isEditing) setOriginalValue(value);
-		setIsEditing(editing);
-		onEditingChange?.(editing);
-	}, [
-		isEditing,
-		value,
-		onEditingChange
-	]);
-	const setValue = useCallback((newValue) => {
-		if (!isControlled) setInternalValue(newValue);
-		onValueChange?.(newValue);
-	}, [isControlled, onValueChange]);
-	const context = useMemo(() => {
-		return {
-			isEditing,
-			setIsEditing: handleSetIsEditing,
-			value,
-			setValue,
-			originalValue,
-			onValueCommit,
-			onValueRevert,
-			typographicVariant,
-			submitMode,
-			readOnly,
-			id: computedId,
-			label,
-			placeholder,
-			minLines,
-			maxLines,
-			finalFocusEl
-		};
-	}, [
-		isEditing,
-		handleSetIsEditing,
 		value,
-		setValue,
-		originalValue,
-		onValueCommit,
-		onValueRevert,
-		typographicVariant,
-		submitMode,
-		readOnly,
-		computedId,
-		label,
-		placeholder,
-		minLines,
-		maxLines,
-		finalFocusEl
-	]);
-	const getState = () => {
-		if (readOnly) return "read-only";
-		if (isEditing) return "editing";
-		return "idle";
-	};
-	return /* @__PURE__ */ jsx(StyledEditableTextRoot, {
-		$typographicVariant: typographicVariant,
-		"data-testid": "editable-text-root",
-		"data-wui-editable-text-root": true,
-		"data-wui-editable-text-state": getState(),
-		...props,
-		children: /* @__PURE__ */ jsx(EditableTextContext, {
-			value: context,
-			children
-		})
+		...props
 	});
 };
 //#endregion
-//#region src/components/EditableText/EditableTextDisplay.tsx
-const StyledEditableTextDisplay = styled.div`
-  ${({ $typographicVariant }) => getTypographicStyles($typographicVariant)}
-  padding: var(--wui-editable-text-padding);
-  border-radius: var(--wui-editable-text-border-radius);
-  margin: 0;
-  transition: all var(--wui-motion-duration-02) var(--wui-motion-ease);
-  ${({ $maxLines }) => {
-	if (isNotNil($maxLines)) return css`
-        ${ellipsisStyle};
-        ${lineClampCss($maxLines)};
-      `;
-}}
-  ${({ $minLines }) => isNotNil($minLines) && css`
-      min-height: calc(${$minLines}lh + calc(var(--wui-editable-text-padding) * 2));
-    `}
-  word-break: normal;
-  overflow-wrap: anywhere;
-
-  &[data-wui-editable-text-display='placeholder'] {
-    color: var(--wui-color-text-secondary);
-  }
-
-  &:has(button) {
-    user-select: none;
-    cursor: pointer;
-
-    &:hover,
-    &:focus-within {
-      background-color: var(--wui-color-bg-surface-hover);
-    }
-  }
-`;
-const EditableTextDisplayComponent = ({ ref, asTrigger, renderAs, ...props }) => {
+//#region src/components/EditableText/EditableTextLabel.tsx
+const EditableTextLabel = ({ ...props }) => {
 	const context = useContext(EditableTextContext);
-	if (!context) throw new Error("EditableTextDisplay must be used within an EditableTextRoot context");
-	const { value, typographicVariant, setIsEditing, placeholder, maxLines, isEditing, minLines } = context;
-	const triggerButtonRef = useRef(null);
-	const handleTriggerClick = () => {
-		setIsEditing(true);
-	};
-	const elementType = renderAs ?? getDefaultTypographicElement(typographicVariant);
-	const displayText = value.length > 0 ? value : placeholder;
-	const isPlaceholderVisible = value.length === 0 && Boolean(placeholder);
-	if (isEditing) return null;
-	if (asTrigger && !context.readOnly) return /* @__PURE__ */ jsx(ClickRegion, {
-		targetRef: triggerButtonRef,
-		children: /* @__PURE__ */ jsxs(StyledEditableTextDisplay, {
-			ref,
-			$maxLines: maxLines,
-			$minLines: minLines,
-			$typographicVariant: typographicVariant,
-			as: elementType,
-			"data-wui-editable-text-display": isPlaceholderVisible ? "placeholder" : "value",
-			...props,
-			children: [displayText, /* @__PURE__ */ jsx("button", {
-				ref: triggerButtonRef,
-				onClick: handleTriggerClick,
-				style: { ...visuallyHiddenStyle },
-				type: "button",
-				children: "Edit text"
-			})]
-		})
-	});
-	return /* @__PURE__ */ jsx(StyledEditableTextDisplay, {
-		ref,
-		$maxLines: maxLines,
-		$minLines: minLines,
-		$typographicVariant: typographicVariant,
-		as: elementType,
-		"data-placeholder-visible": isPlaceholderVisible || void 0,
-		"data-wui-editable-text-display": true,
+	if (!context) throw new Error("EditableTextLabel must be used within an EditableTextRoot context");
+	const { id, label, isEditing } = context;
+	return /* @__PURE__ */ jsx(Label, {
+		...isEditing && { htmlFor: id },
 		...props,
-		children: displayText
+		children: label
 	});
 };
-const EditableTextDisplay = makePolymorphic(EditableTextDisplayComponent);
 //#endregion
-//#region src/components/EditableText/EditableTextInput.tsx
-const StyledInput = styled(Input)`
-  && {
-    ${({ $minLines }) => isNotNil($minLines) && `min-height: calc(${$minLines}lh + calc(var(--wui-editable-text-padding) * 2));`}
-    ${({ $maxLines }) => isNotNil($maxLines) && `max-height: calc(${$maxLines}lh + calc(var(--wui-editable-text-padding) * 2));`}
-    ${({ $typographicVariant }) => getTypographicStyles($typographicVariant)}
-    background-color: var(--wui-color-bg-surface);
-    border-radius: var(--wui-editable-text-border-radius);
-    padding: var(--wui-editable-text-padding);
-    resize: none;
-  }
-`;
-const EditableTextInput = (props) => {
-	const context = useContext(EditableTextContext);
-	if (!context) throw new Error("EditableTextInput must be used within an EditableTextRoot context");
-	const { isEditing, value, setValue, onValueCommit, setIsEditing, typographicVariant, submitMode, originalValue, onValueRevert, id, placeholder, minLines, maxLines, finalFocusEl } = context;
-	const inputRef = useRef(null);
-	useEffect(() => {
-		if (inputRef.current) {
-			if (isEditing) {
-				const element = inputRef.current;
-				const { style } = element;
-				style.height = "0px";
-				const { scrollHeight } = element;
-				style.height = `${scrollHeight}px`;
-			}
-			if (isEditing) inputRef.current.focus();
-		}
-	}, [value, isEditing]);
-	const handleChange = (event) => {
-		setValue(event.target.value);
-	};
-	const handleKeyDown = (event) => {
-		if ((submitMode === "enter" || submitMode === "both") && event.key === "Enter" && !event.shiftKey) {
-			event.preventDefault();
-			onValueCommit?.(value);
-			setIsEditing(false);
-			setTimeout(() => {
-				const element = finalFocusEl?.();
-				if (element) element.focus();
-			}, 0);
-		}
-		if (event.key === "Escape") {
-			event.preventDefault();
-			setValue(originalValue);
-			onValueRevert?.(originalValue);
-			setIsEditing(false);
-			setTimeout(() => {
-				const element = finalFocusEl?.();
-				if (element) element.focus();
-			}, 0);
-		}
-	};
-	const handleBlur = () => {
-		if (submitMode === "blur" || submitMode === "both") {
-			onValueCommit?.(value);
-			setIsEditing(false);
-			setTimeout(() => {
-				const element = finalFocusEl?.();
-				if (element) element.focus();
-			}, 0);
-		}
-	};
-	if (!isEditing) return null;
-	return /* @__PURE__ */ jsx(StyledInput, {
-		ref: inputRef,
-		$maxLines: maxLines ?? "infinity",
-		$minLines: minLines,
-		$typographicVariant: typographicVariant,
-		"data-wui-editable-text-input": true,
-		id,
-		onBlur: handleBlur,
-		onChange: handleChange,
-		onFocus: (event) => {
-			const { length } = event.currentTarget.value;
-			event.currentTarget.setSelectionRange(length, length);
-		},
-		onKeyDown: handleKeyDown,
-		placeholder,
-		type: "multiline",
-		value,
-		...props
-	});
-};
-//#endregion
-//#region src/components/EditableText/EditableTextLabel.tsx
-const EditableTextLabel = ({ ...props }) => {
-	const context = useContext(EditableTextContext);
-	if (!context) throw new Error("EditableTextLabel must be used within an EditableTextRoot context");
-	const { id, label, isEditing } = context;
-	return /* @__PURE__ */ jsx(Label, {
-		...isEditing && { htmlFor: id },
-		...props,
-		children: label
-	});
-};
-//#endregion
-//#region src/components/EditableText/EditableText.tsx
-/**
-* Used for inline editing of text.
-*/
-const EditableText = ({ hideLabel = true, ...props }) => /* @__PURE__ */ jsxs(EditableTextRoot, {
-	...props,
-	children: [
-		/* @__PURE__ */ jsx(EditableTextLabel, { screenReaderOnly: hideLabel }),
-		/* @__PURE__ */ jsx(EditableTextInput, {}),
-		/* @__PURE__ */ jsx(EditableTextDisplay, { asTrigger: true })
-	]
-});
-EditableText.displayName = "EditableText_UI";
-//#endregion
-//#region src/components/EditableText/EditableTextSubmitButton.tsx
-const EditableTextSubmitButton = ({ children }) => {
+//#region src/components/EditableText/EditableText.tsx
+/**
+* Used for inline editing of text.
+*/
+const EditableText = ({ hideLabel = true, ...props }) => /* @__PURE__ */ jsxs(EditableTextRoot, {
+	...props,
+	children: [
+		/* @__PURE__ */ jsx(EditableTextLabel, { screenReaderOnly: hideLabel }),
+		/* @__PURE__ */ jsx(EditableTextInput, {}),
+		/* @__PURE__ */ jsx(EditableTextDisplay, { asTrigger: true })
+	]
+});
+EditableText.displayName = "EditableText_UI";
+//#endregion
+//#region src/components/EditableText/EditableTextSubmitButton.tsx
+const EditableTextSubmitButton = ({ children }) => {
 	const context = useContext(EditableTextContext);
 	if (!context) throw new Error("EditableTextSubmitButton must be used within an EditableTextRoot context");
 	const { setIsEditing, value, onValueCommit, finalFocusEl, isEditing } = context;
@@ -12452,7 +11470,7 @@ const previewCardClose = keyframes`
     transform: scale(0.96);
   }
 `;
-const StyledPopup$1 = styled(PreviewCard$1.Popup)`
+const StyledPopup$3 = styled(PreviewCard$1.Popup)`
   --preview-card-animation-duration: var(--wui-motion-duration-03);
   --preview-card-animation-ease: var(--wui-motion-ease-out);
 
@@ -12502,7 +11520,7 @@ const PreviewCard = ({ children, trigger, maxWidth = "320px", maxHeight = "auto"
 			side,
 			sideOffset: 8,
 			style: { zIndex: "var(--wui-zindex-popover)" },
-			children: /* @__PURE__ */ jsx(StyledPopup$1, {
+			children: /* @__PURE__ */ jsx(StyledPopup$3, {
 				$colorScheme: colorScheme,
 				$paddingSize: paddingSize,
 				...props,
@@ -14089,448 +13107,774 @@ const FilterMenu = ({ value, onChange, searchValue, onSearchValueChange, childre
 	});
 };
 //#endregion
-//#region src/components/Meter/Meter.tsx
-const MeterWrapper = styled.div`
-  --meter-height: 16px;
+//#region src/components/Meter/Meter.tsx
+const MeterWrapper = styled.div`
+  --meter-height: 16px;
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--wui-space-02);
+`;
+const MeterLabelContainer = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+`;
+const MeterLabel = styled.div`
+  font-family: var(--wui-typography-heading-5-family);
+  line-height: var(--wui-typography-heading-5-line-height);
+  font-size: var(--wui-typography-heading-5-size);
+  font-weight: var(--wui-typography-heading-5-weight);
+`;
+const MeterLabelMeta = styled.div`
+  font-family: var(--wui-typography-heading-5-family);
+  line-height: var(--wui-typography-heading-5-line-height);
+  font-size: var(--wui-typography-heading-5-size);
+  font-weight: var(--wui-typography-heading-5-weight);
+`;
+const MeterBarContainer = styled.div`
+  position: relative;
+  overflow: hidden;
+  background-color: var(--wui-color-bg-surface-secondary);
+  border-radius: var(--wui-border-radius-rounded);
+  width: 100%;
+  height: var(--meter-height);
+  transform: translateZ(0);
+`;
+const MeterSegmentBar = styled.div`
+  position: absolute;
+  top: 0;
+  left: ${({ $offset }) => $offset}%;
+  width: ${({ $width }) => $width}%;
+  height: 100%;
+  background-color: ${({ $color }) => `var(--wui-${$color})`};
+
+  &:first-child {
+    border-top-left-radius: var(--wui-border-radius-rounded);
+    border-bottom-left-radius: var(--wui-border-radius-rounded);
+  }
+
+  &:last-child {
+    border-top-right-radius: var(--wui-border-radius-rounded);
+    border-bottom-right-radius: var(--wui-border-radius-rounded);
+  }
+`;
+const MeterDescription = styled.div`
+  line-height: var(--wui-typography-label-3-line-height);
+  font-size: var(--wui-typography-label-3-size);
+  font-weight: var(--wui-typography-label-3-weight);
+  color: var(--wui-color-text-secondary);
+`;
+const MeterKey = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--wui-space-03);
+`;
+const MeterKeyItem = styled.div`
+  display: flex;
+  align-items: center;
+  gap: var(--wui-space-01);
+`;
+const MeterKeyColorIndicator = styled.div`
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: ${({ $color }) => `var(--wui-${$color})`};
+  flex-shrink: 0;
+`;
+const MeterKeyLabel = styled.span`
+  line-height: var(--wui-typography-label-3-line-height);
+  font-size: var(--wui-typography-label-3-size);
+  font-weight: var(--wui-typography-label-3-weight);
+  color: var(--wui-color-text-secondary);
+`;
+const nodeToString = (node) => {
+	if (typeof node === "string") return node;
+	if (typeof node === "number") return String(node);
+	if (node == null || typeof node === "boolean") return "";
+	if (Array.isArray(node)) return node.map(nodeToString).join("");
+	if (typeof node === "object" && "props" in node) {
+		const element = node;
+		if (element.props?.children != null) return nodeToString(element.props.children);
+	}
+	return "";
+};
+/**
+* A meter component that visually represents one to many segments as portions of a whole
+*/
+const Meter = ({ segments, label, labelMeta, description, hideKey = false, max = 100, "aria-label": ariaLabel, ...props }) => {
+	const labelId = useId();
+	const descriptionId = useId();
+	const segmentsWithOffsets = segments.reduce((acc, segment) => {
+		const offset = acc.reduce((sum, prev) => sum + prev.widthPercent, 0);
+		const widthPercent = segment.value / max * 100;
+		acc.push({
+			...segment,
+			offset,
+			widthPercent
+		});
+		return acc;
+	}, []);
+	const keySegments = segmentsWithOffsets.filter((segment) => isNotNil(segment.label));
+	const totalValue = segments.reduce((sum, segment) => sum + segment.value, 0);
+	const generateAriaDescription = () => {
+		const segmentDescriptions = segments.filter((segment) => isNotNil(segment.label)).map((segment) => `${nodeToString(segment.label)}: ${segment.value}%`).join(", ");
+		const totalDescription = `Total: ${totalValue} out of ${max}`;
+		return segmentDescriptions ? `${segmentDescriptions}. ${totalDescription}` : totalDescription;
+	};
+	const effectiveAriaLabel = ariaLabel ?? (isNotNil(label) ? nodeToString(label) : "Data meter");
+	return /* @__PURE__ */ jsxs(MeterWrapper, {
+		...props,
+		children: [
+			/* @__PURE__ */ jsx(ScreenReaderOnly, {
+				id: descriptionId,
+				text: generateAriaDescription()
+			}),
+			isNotNil(label) || isNotNil(labelMeta) ? /* @__PURE__ */ jsxs(MeterLabelContainer, {
+				id: labelId,
+				children: [isNotNil(label) ? /* @__PURE__ */ jsx(MeterLabel, { children: label }) : null, isNotNil(labelMeta) ? /* @__PURE__ */ jsx(MeterLabelMeta, { children: labelMeta }) : null]
+			}) : null,
+			/* @__PURE__ */ jsx(MeterBarContainer, {
+				"aria-describedby": descriptionId,
+				"aria-label": effectiveAriaLabel,
+				"aria-labelledby": isNotNil(label) || isNotNil(labelMeta) ? labelId : void 0,
+				"aria-valuemax": max,
+				"aria-valuemin": 0,
+				"aria-valuenow": totalValue,
+				role: "meter",
+				children: segmentsWithOffsets.map((segment) => /* @__PURE__ */ jsx(MeterSegmentBar, {
+					$color: segment.color,
+					$offset: segment.offset,
+					$width: segment.widthPercent,
+					"aria-hidden": "true"
+				}, `${segment.color}-${segment.value}-${segment.offset}`))
+			}),
+			isNotNil(description) ? /* @__PURE__ */ jsx(MeterDescription, { children: description }) : null,
+			!hideKey && keySegments.length > 0 ? /* @__PURE__ */ jsx(MeterKey, {
+				"aria-label": "Meter legend",
+				role: "list",
+				children: keySegments.map((segment) => /* @__PURE__ */ jsxs(MeterKeyItem, {
+					role: "listitem",
+					children: [/* @__PURE__ */ jsx(MeterKeyColorIndicator, {
+						$color: segment.color,
+						"aria-hidden": "true"
+					}), /* @__PURE__ */ jsx(MeterKeyLabel, { children: segment.label })]
+				}, `${segment.color}-${segment.value}-${segment.offset}-${nodeToString(segment.label)}`))
+			}) : null
+		]
+	});
+};
+Meter.displayName = "Meter_UI";
+//#endregion
+//#region src/components/Modal/ModalCloseButton.tsx
+const ModalCloseButton = () => {
+	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
+const Header = styled.header`
+  display: flex;
+  order: 1;
+  padding: 0 var(--wui-space-05);
+  padding-bottom: 0;
+  gap: var(--wui-space-01);
+  justify-content: ${({ $hideTitle }) => $hideTitle ? "flex-end" : "space-between"}; /* ensure ModalCloseButton is right-aligned */
+
+  /* Dialog.Title creates an h2 element which inherits some margin */
+  h2 {
+    margin: 0;
+    padding-right: ${({ $hideCloseButon }) => $hideCloseButon ? "0" : "var(--wui-space-03)"};
+  }
+
+  button {
+    position: absolute;
+    right: var(--wui-space-03);
+    top: var(--wui-space-03);
+  }
+`;
+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);
+  font-weight: var(--wui-typography-heading-2-weight);
+  overflow-wrap: anywhere;
+`;
+const ModalHeader = ({ title, hideTitle, hideCloseButton }) => {
+	return /* @__PURE__ */ jsxs(Header, {
+		$hideCloseButon: hideCloseButton,
+		$hideTitle: hideTitle,
+		children: [hideTitle ? /* @__PURE__ */ jsx(ScreenReaderOnly, { children: /* @__PURE__ */ jsx(Title, { children: title }) }) : /* @__PURE__ */ jsx(Title, { children: title }), hideCloseButton ? null : /* @__PURE__ */ jsx(ModalCloseButton, {})]
+	});
+};
+//#endregion
+//#region src/components/Modal/constants.ts
+const DEFAULT_MODAL_WIDTH = "532px";
+//#endregion
+//#region src/components/Modal/ModalContent.tsx
+const modalEnter = keyframes`
+  from {
+    opacity: 0;
+    transform: translateX(-50%) translateY(calc(var(--wui-modal-translate-y) + 24px));
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(-50%) translateY(var(--wui-modal-translate-y));
+  }
+`;
+const modalExit = keyframes`
+  from {
+    opacity: 1;
+    transform: translateX(-50%) translateY(var(--wui-modal-translate-y));
+  }
+
+  to {
+    opacity: 0;
+    transform: translateX(-50%) translateY(calc(var(--wui-modal-translate-y) + 24px));
+  }
+`;
+const positionStyleMap = {
+	centered: css`
+  --wui-modal-screen-offset: var(--wui-space-05);
+  --wui-modal-translate-y: -50%;
+
+  height: auto;
+  max-height: calc(100vh - var(--wui-modal-screen-offset) * 2);
+  top: 50%;
+  left: 50%;
+  transform: translateX(-50%) translateY(var(--wui-modal-translate-y));
+  transform-origin: left center;
+  animation: ${modalEnter} var(--wui-motion-duration-04) var(--wui-motion-ease-out);
+
+  &[data-closed] {
+    animation: ${modalExit} var(--wui-motion-duration-03) var(--wui-motion-ease-out) forwards;
+  }
+`,
+	"fixed-top": css`
+  --wui-modal-screen-offset-top: 15vh;
+  --wui-modal-screen-offset-bottom: 5vh;
+  --wui-modal-translate-y: 0%;
+
+  height: auto;
+  max-height: calc(
+    100vh - var(--wui-modal-screen-offset-top) - var(--wui-modal-screen-offset-bottom)
+  );
+  top: var(--wui-modal-screen-offset-top);
+  left: 50%;
+  transform: translateX(-50%) translateY(var(--wui-modal-translate-y));
+  transform-origin: left center;
+  animation: ${modalEnter} var(--wui-motion-duration-04) var(--wui-motion-ease-out);
+
+  &[data-closed] {
+    animation: ${modalExit} var(--wui-motion-duration-03) var(--wui-motion-ease-out) forwards;
+  }
+`,
+	"right-side-panel": css`
+  --wui-modal-screen-offset: var(--wui-space-05);
+
+  height: calc(100vh - var(--wui-modal-screen-offset) * 2);
+  top: var(--wui-modal-screen-offset);
+  right: var(--wui-modal-screen-offset);
+  animation: ${keyframes`
+  from {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+
+  to {
+    opacity: 1;
+    transform: translateX(0);
+  }
+`} var(--wui-motion-duration-05) var(--wui-motion-ease-out);
+  transform-origin: right center;
+
+  &[data-closed] {
+    animation: ${keyframes`
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+
+  to {
+    opacity: 0;
+    transform: translateX(100%);
+  }
+`} var(--wui-motion-duration-03) var(--wui-motion-ease-in) forwards;
+  }
+`
+};
+const StyledModalContent = styled(Dialog.Popup)`
+  position: fixed;
+  display: flex;
+  flex-direction: column;
+  gap: var(--wui-space-03);
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: var(--wui-zindex-modal);
+  box-sizing: border-box;
+  padding: var(--wui-space-05) 0;
+  background-color: var(--wui-color-bg-app);
+
+  ${mq.smAndUp} {
+    position: fixed;
+    top: unset;
+    left: unset;
+    width: calc(100vw - var(--wui-space-05) * 2);
+    max-width: ${({ $width }) => $width ?? "532px"};
+    border-radius: var(--wui-border-radius-03);
+    animation-duration: var(--wui-motion-duration-03);
+    animation-timing-function: var(--wui-motion-ease-out);
+    will-change: transform, opacity;
+    ${({ $positionVariant }) => positionStyleMap[$positionVariant]}
+  }
+`;
+const ModalContent = ({ width, positionVariant, initialFocusRef, children, ref, ...props }) => {
+	return /* @__PURE__ */ jsx(StyledModalContent, {
+		ref,
+		$positionVariant: positionVariant,
+		$width: width,
+		...isNotNil(initialFocusRef) ? { initialFocus: initialFocusRef } : {},
+		...props,
+		children
+	});
+};
+//#endregion
+//#region src/components/Modal/ModalOverlay.tsx
+const backdropShow = keyframes`
+  from {
+    opacity: 0;
+  }
 
-  display: flex;
-  flex-direction: column;
-  gap: var(--wui-space-02);
-`;
-const MeterLabelContainer = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: baseline;
-`;
-const MeterLabel = styled.div`
-  font-family: var(--wui-typography-heading-5-family);
-  line-height: var(--wui-typography-heading-5-line-height);
-  font-size: var(--wui-typography-heading-5-size);
-  font-weight: var(--wui-typography-heading-5-weight);
-`;
-const MeterLabelMeta = styled.div`
-  font-family: var(--wui-typography-heading-5-family);
-  line-height: var(--wui-typography-heading-5-line-height);
-  font-size: var(--wui-typography-heading-5-size);
-  font-weight: var(--wui-typography-heading-5-weight);
-`;
-const MeterBarContainer = styled.div`
-  position: relative;
-  overflow: hidden;
-  background-color: var(--wui-color-bg-surface-secondary);
-  border-radius: var(--wui-border-radius-rounded);
-  width: 100%;
-  height: var(--meter-height);
-  transform: translateZ(0);
+  to {
+    opacity: 1;
+  }
 `;
-const MeterSegmentBar = styled.div`
-  position: absolute;
-  top: 0;
-  left: ${({ $offset }) => $offset}%;
-  width: ${({ $width }) => $width}%;
-  height: 100%;
-  background-color: ${({ $color }) => `var(--wui-${$color})`};
-
-  &:first-child {
-    border-top-left-radius: var(--wui-border-radius-rounded);
-    border-bottom-left-radius: var(--wui-border-radius-rounded);
+const backdropHide = keyframes`
+  from {
+    opacity: 1;
   }
 
-  &:last-child {
-    border-top-right-radius: var(--wui-border-radius-rounded);
-    border-bottom-right-radius: var(--wui-border-radius-rounded);
+  to {
+    opacity: 0;
   }
 `;
-const MeterDescription = styled.div`
-  line-height: var(--wui-typography-label-3-line-height);
-  font-size: var(--wui-typography-label-3-size);
-  font-weight: var(--wui-typography-label-3-weight);
-  color: var(--wui-color-text-secondary);
-`;
-const MeterKey = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--wui-space-03);
+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-closed] {
+    animation: ${backdropHide} var(--wui-motion-duration-02) forwards;
+  }
 `;
-const MeterKeyItem = styled.div`
+//#endregion
+//#region src/components/Modal/Modal.tsx
+const ModalHiddenDescription = styled(Dialog.Description)({ ...visuallyHiddenStyle });
+const ModalBody = styled.div`
+  flex-direction: column;
   display: flex;
-  align-items: center;
-  gap: var(--wui-space-01);
+  flex: 1 0 0;
+  padding: 0 var(--wui-space-05);
 `;
-const MeterKeyColorIndicator = styled.div`
-  width: 8px;
-  height: 8px;
-  border-radius: 50%;
-  background-color: ${({ $color }) => `var(--wui-${$color})`};
-  flex-shrink: 0;
+const ModalScrollArea = styled.div`
+  order: 2;
+  max-height: 90vh;
+  overflow-y: auto;
+  height: 100%;
 `;
-const MeterKeyLabel = styled.span`
-  line-height: var(--wui-typography-label-3-line-height);
-  font-size: var(--wui-typography-label-3-size);
-  font-weight: var(--wui-typography-label-3-weight);
-  color: var(--wui-color-text-secondary);
+const ModalFooter = styled.footer`
+  padding: 0 var(--wui-space-05);
+  order: 3;
 `;
-const nodeToString = (node) => {
-	if (typeof node === "string") return node;
-	if (typeof node === "number") return String(node);
-	if (node == null || typeof node === "boolean") return "";
-	if (Array.isArray(node)) return node.map(nodeToString).join("");
-	if (typeof node === "object" && "props" in node) {
-		const element = node;
-		if (element.props?.children != null) return nodeToString(element.props.children);
-	}
-	return "";
-};
 /**
-* A meter component that visually represents one to many segments as portions of a whole
+* A Modal is a focused UI element that appears atop the main interface, requiring
+* user interaction or dismissal before returning to the underlying content.
 */
-const Meter = ({ segments, label, labelMeta, description, hideKey = false, max = 100, "aria-label": ariaLabel, ...props }) => {
-	const labelId = useId();
-	const descriptionId = useId();
-	const segmentsWithOffsets = segments.reduce((acc, segment) => {
-		const offset = acc.reduce((sum, prev) => sum + prev.widthPercent, 0);
-		const widthPercent = segment.value / max * 100;
-		acc.push({
-			...segment,
-			offset,
-			widthPercent
-		});
-		return acc;
-	}, []);
-	const keySegments = segmentsWithOffsets.filter((segment) => isNotNil(segment.label));
-	const totalValue = segments.reduce((sum, segment) => sum + segment.value, 0);
-	const generateAriaDescription = () => {
-		const segmentDescriptions = segments.filter((segment) => isNotNil(segment.label)).map((segment) => `${nodeToString(segment.label)}: ${segment.value}%`).join(", ");
-		const totalDescription = `Total: ${totalValue} out of ${max}`;
-		return segmentDescriptions ? `${segmentDescriptions}. ${totalDescription}` : totalDescription;
-	};
-	const effectiveAriaLabel = ariaLabel ?? (isNotNil(label) ? nodeToString(label) : "Data meter");
-	return /* @__PURE__ */ jsxs(MeterWrapper, {
-		...props,
-		children: [
-			/* @__PURE__ */ jsx(ScreenReaderOnly, {
-				id: descriptionId,
-				text: generateAriaDescription()
-			}),
-			isNotNil(label) || isNotNil(labelMeta) ? /* @__PURE__ */ jsxs(MeterLabelContainer, {
-				id: labelId,
-				children: [isNotNil(label) ? /* @__PURE__ */ jsx(MeterLabel, { children: label }) : null, isNotNil(labelMeta) ? /* @__PURE__ */ jsx(MeterLabelMeta, { children: labelMeta }) : null]
-			}) : null,
-			/* @__PURE__ */ jsx(MeterBarContainer, {
-				"aria-describedby": descriptionId,
-				"aria-label": effectiveAriaLabel,
-				"aria-labelledby": isNotNil(label) || isNotNil(labelMeta) ? labelId : void 0,
-				"aria-valuemax": max,
-				"aria-valuemin": 0,
-				"aria-valuenow": totalValue,
-				role: "meter",
-				children: segmentsWithOffsets.map((segment) => /* @__PURE__ */ jsx(MeterSegmentBar, {
-					$color: segment.color,
-					$offset: segment.offset,
-					$width: segment.widthPercent,
-					"aria-hidden": "true"
-				}, `${segment.color}-${segment.value}-${segment.offset}`))
-			}),
-			isNotNil(description) ? /* @__PURE__ */ jsx(MeterDescription, { children: description }) : null,
-			!hideKey && keySegments.length > 0 ? /* @__PURE__ */ jsx(MeterKey, {
-				"aria-label": "Meter legend",
-				role: "list",
-				children: keySegments.map((segment) => /* @__PURE__ */ jsxs(MeterKeyItem, {
-					role: "listitem",
-					children: [/* @__PURE__ */ jsx(MeterKeyColorIndicator, {
-						$color: segment.color,
-						"aria-hidden": "true"
-					}), /* @__PURE__ */ jsx(MeterKeyLabel, { children: segment.label })]
-				}, `${segment.color}-${segment.value}-${segment.offset}-${nodeToString(segment.label)}`))
-			}) : null
-		]
+const Modal = ({ children, footer, hideCloseButton = false, hideTitle = false, initialFocusRef, isOpen, onRequestClose, positionVariant = "centered", title, width = DEFAULT_MODAL_WIDTH, ref, ...props }) => {
+	return /* @__PURE__ */ jsx(Dialog.Root, {
+		onOpenChange: (open) => {
+			if (!open && isNotNil(onRequestClose)) onRequestClose();
+		},
+		open: isOpen,
+		children: /* @__PURE__ */ jsxs(Dialog.Portal, { children: [/* @__PURE__ */ jsx(ModalOverlay, {}), /* @__PURE__ */ jsxs(ModalContent, {
+			ref,
+			initialFocusRef,
+			positionVariant,
+			width,
+			...props,
+			children: [
+				/* @__PURE__ */ jsx(ModalScrollArea, { children: /* @__PURE__ */ jsx(ModalBody, { children }) }),
+				isNotNil(footer) ? /* @__PURE__ */ jsx(ModalFooter, { children: footer }) : null,
+				hideCloseButton && hideTitle ? null : /* @__PURE__ */ jsx(ModalHeader, {
+					hideCloseButton,
+					hideTitle,
+					title
+				}),
+				/* @__PURE__ */ jsx(ModalHiddenDescription, {})
+			]
+		})] })
 	});
 };
-Meter.displayName = "Meter_UI";
 //#endregion
-//#region src/components/Modal/ModalCloseButton.tsx
-const ModalCloseButton = () => {
-	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" })
-	}) });
+//#region src/components/Modal/ModalCallouts.tsx
+const ModalCallouts = ({ children }) => {
+	return /* @__PURE__ */ jsx(Stack, {
+		direction: "horizontal",
+		gap: "space-08",
+		children
+	});
+};
+ModalCallouts.displayName = "ModalCallouts_UI";
+const ModalCallout = ({ title, image, children }) => {
+	return /* @__PURE__ */ jsxs(Stack, {
+		direction: "vertical",
+		children: [
+			image,
+			/* @__PURE__ */ jsx(Heading, {
+				variant: "heading4",
+				children: title
+			}),
+			children
+		]
+	});
 };
+ModalCallout.displayName = "ModalCallout_UI";
 //#endregion
-//#region src/components/Modal/ModalHeader.tsx
-const Header = styled.header`
-  display: flex;
-  order: 1;
-  padding: 0 var(--wui-space-05);
-  padding-bottom: 0;
-  gap: var(--wui-space-01);
-  justify-content: ${({ $hideTitle }) => $hideTitle ? "flex-end" : "space-between"}; /* ensure ModalCloseButton is right-aligned */
+//#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`
+  pointer-events: none;
 
-  /* Dialog.Title creates an h2 element which inherits some margin */
-  h2 {
-    margin: 0;
-    padding-right: ${({ $hideCloseButon }) => $hideCloseButon ? "0" : "var(--wui-space-03)"};
+  /* override inline positioning and rotate the arrow so the circle sits near the trigger and the stalk extends down toward the popup. */
+  &[data-side='top'] {
+    top: 100% !important;
   }
 
-  button {
-    position: absolute;
-    right: var(--wui-space-03);
-    top: var(--wui-space-03);
+  &[data-side='bottom'] {
+    top: 0 !important;
+    transform: rotate(180deg);
+    transform-origin: center 0;
   }
-`;
-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);
-  font-weight: var(--wui-typography-heading-2-weight);
-  overflow-wrap: anywhere;
-`;
-const ModalHeader = ({ title, hideTitle, hideCloseButton }) => {
-	return /* @__PURE__ */ jsxs(Header, {
-		$hideCloseButon: hideCloseButton,
-		$hideTitle: hideTitle,
-		children: [hideTitle ? /* @__PURE__ */ jsx(ScreenReaderOnly, { children: /* @__PURE__ */ jsx(Title, { children: title }) }) : /* @__PURE__ */ jsx(Title, { children: title }), hideCloseButton ? null : /* @__PURE__ */ jsx(ModalCloseButton, {})]
-	});
-};
-//#endregion
-//#region src/components/Modal/constants.ts
-const DEFAULT_MODAL_WIDTH = "532px";
-//#endregion
-//#region src/components/Modal/ModalContent.tsx
-const modalEnter = keyframes`
-  from {
-    opacity: 0;
-    transform: translateX(-50%) translateY(calc(var(--wui-modal-translate-y) + 24px));
+
+  &[data-side='left'] {
+    right: 0;
+    left: auto;
+    transform: translateX(52px) rotate(-90deg);
+    transform-origin: center center;
   }
 
-  to {
-    opacity: 1;
-    transform: translateX(-50%) translateY(var(--wui-modal-translate-y));
+  &[data-side='right'] {
+    left: 0;
+    right: auto;
+    transform: translateX(-52px) rotate(90deg);
+    transform-origin: center center;
   }
 `;
-const modalExit = keyframes`
-  from {
-    opacity: 1;
-    transform: translateX(-50%) translateY(var(--wui-modal-translate-y));
+const StyledPath = styled.path`
+  fill: var(--wui-color-border-secondary);
+`;
+const circleAnimation = keyframes`
+  0% {
+    opacity: var(--wui-popover-arrow-circle-starting-opacity);
   }
-
-  to {
+  100% {
     opacity: 0;
-    transform: translateX(-50%) translateY(calc(var(--wui-modal-translate-y) + 24px));
   }
 `;
-const positionStyleMap = {
-	centered: css`
-  --wui-modal-screen-offset: var(--wui-space-05);
-  --wui-modal-translate-y: -50%;
+const StyledCircle = styled.circle`
+  stroke: var(--wui-color-border-active);
+  animation-duration: 2s;
+  animation-iteration-count: infinite;
+  animation-direction: alternate;
+  animation-timing-function: ease-in-out;
 
-  height: auto;
-  max-height: calc(100vh - var(--wui-modal-screen-offset) * 2);
-  top: 50%;
-  left: 50%;
-  transform: translateX(-50%) translateY(var(--wui-modal-translate-y));
-  transform-origin: left center;
-  animation: ${modalEnter} var(--wui-motion-duration-04) var(--wui-motion-ease-out);
+  &[data-wui-popover-arrow-inner-circle] {
+    --wui-popover-arrow-circle-starting-opacity: 0.36;
 
-  &[data-closed] {
-    animation: ${modalExit} var(--wui-motion-duration-03) var(--wui-motion-ease-out) forwards;
+    opacity: var(--wui-popover-arrow-circle-starting-opacity);
   }
-`,
-	"fixed-top": css`
-  --wui-modal-screen-offset-top: 15vh;
-  --wui-modal-screen-offset-bottom: 5vh;
-  --wui-modal-translate-y: 0%;
-
-  height: auto;
-  max-height: calc(
-    100vh - var(--wui-modal-screen-offset-top) - var(--wui-modal-screen-offset-bottom)
-  );
-  top: var(--wui-modal-screen-offset-top);
-  left: 50%;
-  transform: translateX(-50%) translateY(var(--wui-modal-translate-y));
-  transform-origin: left center;
-  animation: ${modalEnter} var(--wui-motion-duration-04) var(--wui-motion-ease-out);
 
-  &[data-closed] {
-    animation: ${modalExit} var(--wui-motion-duration-03) var(--wui-motion-ease-out) forwards;
-  }
-`,
-	"right-side-panel": css`
-  --wui-modal-screen-offset: var(--wui-space-05);
+  &[data-wui-popover-arrow-outer-circle] {
+    --wui-popover-arrow-circle-starting-opacity: 0.2;
 
-  height: calc(100vh - var(--wui-modal-screen-offset) * 2);
-  top: var(--wui-modal-screen-offset);
-  right: var(--wui-modal-screen-offset);
-  animation: ${keyframes`
-  from {
-    opacity: 0;
-    transform: translateX(100%);
+    animation-direction: alternate-reverse;
+    opacity: 0.11;
   }
 
-  to {
-    opacity: 1;
-    transform: translateX(0);
+  @media (prefers-reduced-motion: no-preference) {
+    ${({ $isAnimated }) => $isAnimated && css`
+        animation-name: ${circleAnimation};
+      `}
   }
-`} var(--wui-motion-duration-05) var(--wui-motion-ease-out);
-  transform-origin: right center;
+`;
+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.displayName = "PopoverArrow_UI";
+//#endregion
+//#region src/components/Popover/Popover.tsx
+const StyledPopup$2 = styled(Popover$1.Popup)`
+  ${({ $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;
+    `}
 
-  &[data-closed] {
-    animation: ${keyframes`
-  from {
-    opacity: 1;
-    transform: translateX(0);
-  }
+  ${({ $withArrow }) => $withArrow && css`
+      overflow: visible;
+    `}
 
-  to {
-    opacity: 0;
-    transform: translateX(100%);
-  }
-`} var(--wui-motion-duration-03) var(--wui-motion-ease-in) forwards;
+  [data-wui-popover-close] {
+    position: absolute;
+    top: var(--wui-space-02);
+    right: var(--wui-space-02);
   }
-`
+`;
+/**
+* Displays rich content in a portal, triggered by a button.
+*
+* For more control — custom anchor, no injected close button, etc. — compose
+* the primitives directly: `PopoverRoot`, `PopoverTrigger`, `PopoverAnchor`,
+* `PopoverPortal`, `PopoverContent`, `PopoverClose`.
+*/
+const Popover = ({ children, trigger, isOpen, hideCloseButton = false, maxWidth, maxHeight, onOpenChange, unstyled = false, withArrow = false, isAnimated = false, colorScheme = "inherit", style, 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,
+			style: { zIndex: "var(--wui-zindex-popover)" },
+			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 })
+				]
+			})
+		}) })]
+	});
 };
-const StyledModalContent = styled(Dialog.Popup)`
-  position: fixed;
-  display: flex;
-  flex-direction: column;
-  gap: var(--wui-space-03);
-  top: 0;
-  left: 0;
-  width: 100vw;
-  height: 100vh;
-  z-index: var(--wui-zindex-modal);
-  box-sizing: border-box;
-  padding: var(--wui-space-05) 0;
-  background-color: var(--wui-color-bg-app);
-
-  ${mq.smAndUp} {
-    position: fixed;
-    top: unset;
-    left: unset;
-    width: calc(100vw - var(--wui-space-05) * 2);
-    max-width: ${({ $width }) => $width ?? "532px"};
-    border-radius: var(--wui-border-radius-03);
-    animation-duration: var(--wui-motion-duration-03);
-    animation-timing-function: var(--wui-motion-ease-out);
-    will-change: transform, opacity;
-    ${({ $positionVariant }) => positionStyleMap[$positionVariant]}
-  }
-`;
-const ModalContent = ({ width, positionVariant, initialFocusRef, children, ref, ...props }) => {
-	return /* @__PURE__ */ jsx(StyledModalContent, {
-		ref,
-		$positionVariant: positionVariant,
-		$width: width,
-		...isNotNil(initialFocusRef) ? { initialFocus: initialFocusRef } : {},
-		...props,
+Popover.displayName = "Popover_UI";
+//#endregion
+//#region src/components/Popover/PopoverAnchorContext.tsx
+const PopoverAnchorContext = createContext(null);
+const PopoverAnchorProvider = PopoverAnchorContext;
+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/Modal/ModalOverlay.tsx
-const backdropShow = keyframes`
-  from {
-    opacity: 0;
-  }
-
-  to {
-    opacity: 1;
-  }
-`;
-const backdropHide = keyframes`
-  from {
-    opacity: 1;
-  }
-
-  to {
-    opacity: 0;
-  }
-`;
-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);
+//#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 PopoverClose = ({ ref, ...props }) => /* @__PURE__ */ jsx(Popover$1.Close, {
+	ref,
+	...props
+});
+//#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)`
+  ${({ $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-closed] {
-    animation: ${backdropHide} var(--wui-motion-duration-02) forwards;
+  [data-wui-popover-close] {
+    position: absolute;
+    top: var(--wui-space-02);
+    right: var(--wui-space-02);
   }
 `;
-//#endregion
-//#region src/components/Modal/Modal.tsx
-const ModalHiddenDescription = styled(Dialog.Description)({ ...visuallyHiddenStyle });
-const ModalBody = styled.div`
-  flex-direction: column;
-  display: flex;
-  flex: 1 0 0;
-  padding: 0 var(--wui-space-05);
-`;
-const ModalScrollArea = styled.div`
-  order: 2;
-  max-height: 90vh;
-  overflow-y: auto;
-  height: 100%;
-`;
-const ModalFooter = styled.footer`
-  padding: 0 var(--wui-space-05);
-  order: 3;
-`;
+const DEFAULT_SIDE_OFFSET = 8;
+const DEFAULT_MAX_WIDTH = "320px";
+const DEFAULT_MAX_HEIGHT = "auto";
 /**
-* A Modal is a focused UI element that appears atop the main interface, requiring
-* user interaction or dismissal before returning to the underlying content.
+* The styled popover surface. Place inside a `PopoverRoot` (typically wrapped
+* in a `PopoverPortal`). Wraps a `Positioner` and `Popup` internally.
 */
-const Modal = ({ children, footer, hideCloseButton = false, hideTitle = false, initialFocusRef, isOpen, onRequestClose, positionVariant = "centered", title, width = DEFAULT_MODAL_WIDTH, ref, ...props }) => {
-	return /* @__PURE__ */ jsx(Dialog.Root, {
-		onOpenChange: (open) => {
-			if (!open && isNotNil(onRequestClose)) onRequestClose();
+const PopoverContent = ({ colorScheme = "inherit", unstyled = false, maxWidth = DEFAULT_MAX_WIDTH, maxHeight = DEFAULT_MAX_HEIGHT, sideOffset = DEFAULT_SIDE_OFFSET, side, align, style, role = "dialog", children, ref, ...props }) => {
+	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"
 		},
-		open: isOpen,
-		children: /* @__PURE__ */ jsxs(Dialog.Portal, { children: [/* @__PURE__ */ jsx(ModalOverlay, {}), /* @__PURE__ */ jsxs(ModalContent, {
+		side,
+		sideOffset,
+		style: { zIndex: "var(--wui-zindex-popover)" },
+		...hasAnchor ? { anchor: sharedAnchorRef } : {},
+		children: /* @__PURE__ */ jsx(StyledPopup$1, {
 			ref,
-			initialFocusRef,
-			positionVariant,
-			width,
+			$colorScheme: colorScheme,
+			$unstyled: unstyled,
+			role,
+			style: mergedStyle,
 			...props,
-			children: [
-				/* @__PURE__ */ jsx(ModalScrollArea, { children: /* @__PURE__ */ jsx(ModalBody, { children }) }),
-				isNotNil(footer) ? /* @__PURE__ */ jsx(ModalFooter, { children: footer }) : null,
-				hideCloseButton && hideTitle ? null : /* @__PURE__ */ jsx(ModalHeader, {
-					hideCloseButton,
-					hideTitle,
-					title
-				}),
-				/* @__PURE__ */ jsx(ModalHiddenDescription, {})
-			]
-		})] })
+			children
+		})
 	});
 };
 //#endregion
-//#region src/components/Modal/ModalCallouts.tsx
-const ModalCallouts = ({ children }) => {
-	return /* @__PURE__ */ jsx(Stack, {
-		direction: "horizontal",
-		gap: "space-08",
-		children
-	});
-};
-ModalCallouts.displayName = "ModalCallouts_UI";
-const ModalCallout = ({ title, image, children }) => {
-	return /* @__PURE__ */ jsxs(Stack, {
-		direction: "vertical",
-		children: [
-			image,
-			/* @__PURE__ */ jsx(Heading, {
-				variant: "heading4",
-				children: title
-			}),
+//#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
-		]
+		})
 	});
 };
-ModalCallout.displayName = "ModalCallout_UI";
+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 = ({ nativeButton = true, ref, ...props }) => /* @__PURE__ */ jsx(Popover$1.Trigger, {
+	ref,
+	nativeButton,
+	...props
+});
 //#endregion
 //#region src/components/ProgressBar/ProgressBar.tsx
 const ProgressBarWrapper = styled.div`
@@ -16603,6 +15947,6 @@ const WistiaLogo = ({ description, height = 100, hoverColor, href, iconOnly = fa
 };
 WistiaLogo.displayName = "WistiaLogo_UI";
 //#endregion
-export { ActionButton, Avatar, Badge, Banner, Box, Breadcrumb, Breadcrumbs, Button, ButtonGroup, Card, Center, Checkbox, CheckboxGroup, CheckboxMenuItem, ClickRegion, Collapsible, CollapsibleContent, CollapsibleTrigger, CollapsibleTriggerIcon, ColorGrid, ColorGridOption, ColorList, ColorListGroup, ColorListOption, ColorPicker, ColorPickerPopoverContent, ColorPickerSection, ColorPickerTrigger, ColorSchemeWrapper, Combobox, ComboboxOption, ContextMenu, ContrastControls, CustomizableThemeWrapper, DataCard, DataCardHoverArrow, DataCardTrend, DataCards, DataList, DataListItem, DataListItemLabel, DataListItemValue, DatePicker, Divider, EditableHeading, EditableText, EditableTextCancelButton, EditableTextContext, EditableTextDisplay, EditableTextInput, EditableTextLabel, EditableTextRoot, EditableTextSubmitButton, EditableTextTrigger, Ellipsis, FeatureCard, FeatureCardImage, FileAmountLimitValidator, FileSizeValidator, FileTypeValidator, FilterMenu, FilterMenuItem, Form, FormErrorSummary, FormField, FormGroup, Grid, Heading, HexColorInput, HueSlider, Icon, IconButton, Image, ImageDimensionsValidator, Input, InputClickToCopy, InputDuration, InputPassword, KeyboardShortcut, Label, Link, List, ListItem, Mark, Markdown, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Meter, Modal, ModalCallout, ModalCallouts, PersistentFileAmountLimitValidator, Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverCloseButton, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger, PreviewCard, ProgressBar, Radio, RadioCard, RadioCardImage, RadioGroup, RadioMenuItem, SaturationAndValuePicker, ScreenReaderOnly, ScrollArea, SegmentedControl, SegmentedControlItem, Select, SelectOption, SelectOptionGroup, Sidebar, SidebarButton, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarSearchInput, SidebarTitle, Slider, SplitButton, Stack, SubMenu, Switch, Table, TableBody, TableCell, TableFoot, TableHead, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, Text, Thumbnail, ThumbnailBadge, ThumbnailCollage, Tooltip, UIProvider, ValueNameOrHexCode, ValueSwatch, WistiaLogo, buildTimeDuration, calculateContrast, coerceToBoolean, colorSchemeOptions, copyToClipboard, dateOnlyISOString, dateOnlyString, dateOnlyStringForSentence, dateOnlyStringNumeric, dateTime, dateTimeRounded, dateTimeString, dateTimeStringForSentence, dateTimeToDate, dateTimeToISO, dateToDateTime, dateUTCOffset, dayOfWeekString, getBackgroundGradient, getSemiRandomBackgroundGradient, iconSizeMap, isKeyboardKey, isUrl, mediaDurationString, mergeRefs, millisecondsToDurationISOString, monthDayStringNumeric, mq, parseDateString, sessionDurationString, stripExtension, timeAgoString, timeOnlyString, useActiveMq, useAriaLive, useBoolean, useClipboard, useElementObserver, useFilePicker, useFocusTrap, useForceUpdate, useFormState, useImperativeFilePicker, useIsHovered, useKey, useKeyPress, useLocalStorage, useLockBodyScroll, useMq, useOnClickOutside, usePreviousValue, useToast, useWindowSize, validateWithYup };
+export { ActionButton, Avatar, Badge, Banner, Box, Breadcrumb, Breadcrumbs, Button, ButtonGroup, Card, Center, Checkbox, CheckboxGroup, CheckboxMenuItem, ClickRegion, Collapsible, CollapsibleContent, CollapsibleTrigger, CollapsibleTriggerIcon, ColorGrid, ColorGridOption, ColorList, ColorListGroup, ColorListOption, ColorPicker, ColorPickerPopoverContent, ColorPickerSection, ColorPickerTrigger, ColorSchemeWrapper, Combobox, ComboboxOption, ContextMenu, ContrastControls, CustomizableThemeWrapper, DataCard, DataCardHoverArrow, DataCardTrend, DataCards, DataList, DataListItem, DataListItemLabel, DataListItemValue, Divider, EditableHeading, EditableText, EditableTextCancelButton, EditableTextContext, EditableTextDisplay, EditableTextInput, EditableTextLabel, EditableTextRoot, EditableTextSubmitButton, EditableTextTrigger, Ellipsis, FeatureCard, FeatureCardImage, FileAmountLimitValidator, FileSizeValidator, FileTypeValidator, FilterMenu, FilterMenuItem, Form, FormErrorSummary, FormField, FormGroup, Grid, Heading, HexColorInput, HueSlider, Icon, IconButton, Image, ImageDimensionsValidator, Input, InputClickToCopy, InputDuration, InputPassword, KeyboardShortcut, Label, Link, List, ListItem, Mark, Markdown, Menu, MenuItem, MenuItemDescription, MenuItemLabel, MenuLabel, MenuRadioGroup, Meter, Modal, ModalCallout, ModalCallouts, PersistentFileAmountLimitValidator, Popover, PopoverAnchor, PopoverArrow, PopoverClose, PopoverCloseButton, PopoverContent, PopoverPortal, PopoverRoot, PopoverTrigger, PreviewCard, ProgressBar, Radio, RadioCard, RadioCardImage, RadioGroup, RadioMenuItem, SaturationAndValuePicker, ScreenReaderOnly, ScrollArea, SegmentedControl, SegmentedControlItem, Select, SelectOption, SelectOptionGroup, Sidebar, SidebarButton, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupLabel, SidebarHeader, SidebarSearchInput, SidebarTitle, Slider, SplitButton, Stack, SubMenu, Switch, Table, TableBody, TableCell, TableFoot, TableHead, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, Text, Thumbnail, ThumbnailBadge, ThumbnailCollage, Tooltip, UIProvider, ValueNameOrHexCode, ValueSwatch, WistiaLogo, buildTimeDuration, calculateContrast, coerceToBoolean, colorSchemeOptions, copyToClipboard, dateOnlyISOString, dateOnlyString, dateOnlyStringForSentence, dateOnlyStringNumeric, dateTime, dateTimeRounded, dateTimeString, dateTimeStringForSentence, dateTimeToDate, dateTimeToISO, dateToDateTime, dateUTCOffset, dayOfWeekString, getBackgroundGradient, getSemiRandomBackgroundGradient, iconSizeMap, isKeyboardKey, isUrl, mediaDurationString, mergeRefs, millisecondsToDurationISOString, monthDayStringNumeric, mq, parseDateString, sessionDurationString, stripExtension, timeAgoString, timeOnlyString, useActiveMq, useAriaLive, useBoolean, useClipboard, useElementObserver, useFilePicker, useFocusTrap, useForceUpdate, useFormState, useImperativeFilePicker, useIsHovered, useKey, useKeyPress, useLocalStorage, useLockBodyScroll, useMq, useOnClickOutside, usePreviousValue, useToast, useWindowSize, validateWithYup };
 
 //# sourceMappingURL=index.js.map