@wistia/ui 0.22.9 → 0.22.10-beta.2c5e73bf.f00d270

package/dist/index.js

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.22.9
+ * @license @wistia/ui v0.22.10-beta.2c5e73bf.f00d270
  *
  * Copyright (c) 2024-2026, Wistia, Inc. and its affiliates.
  *
@@ -13,6 +13,12 @@ import { createGlobalStyle, css, keyframes, styled } from "styled-components";
 import { isArray, isBoolean, isEmptyString, isFunction, isNil, isNonEmptyArray, isNonEmptyString, isNotNil, isNotUndefined, isNumber, isRecord, isString, isUndefined } from "@wistia/type-guards";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Toaster, toast } from "sonner";
+import { isValid } from "date-fns/isValid";
+import { startOfToday } from "date-fns/startOfToday";
+import { startOfTomorrow } from "date-fns/startOfTomorrow";
+import { startOfDay } from "date-fns/startOfDay";
+import { isPast } from "date-fns/isPast";
+import { parse } from "date-fns/parse";
 import { getValueAndUnit } from "polished";
 import { useFilePicker as useFilePicker$1, useImperativeFilePicker as useImperativeFilePicker$1 } from "use-file-picker";
 import { FileAmountLimitValidator, FileSizeValidator, FileTypeValidator, ImageDimensionsValidator, PersistentFileAmountLimitValidator } from "use-file-picker/validators";
@@ -28,6 +34,7 @@ import * as Ariakit from "@ariakit/react";
 import { matchSorter } from "match-sorter";
 import { createPortal } from "react-dom";
 import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "@radix-ui/react-dropdown-menu";
+import { DayPicker } from "react-day-picker";
 import { ValidationError } from "yup";
 import { Content as Content$3, Portal as Portal$2, Root as Root$6, Trigger as Trigger$3 } from "@radix-ui/react-hover-card";
 import ReactMarkdown from "react-markdown";
@@ -871,6 +878,53 @@ const monthDayStringNumeric = (date, { timeZone = defaultTimeZone } = {}) => {
 	}
 };
 //#endregion
+//#region src/helpers/dateTime/parseDateString.ts
+const MONTH_NAMES = [
+	"January",
+	"February",
+	"March",
+	"April",
+	"May",
+	"June",
+	"July",
+	"August",
+	"September",
+	"October",
+	"November",
+	"December"
+];
+const DATE_FORMATS = [
+	"MMM d, yyyy",
+	"MMM d",
+	"MMMM d, yyyy",
+	"MMMM d",
+	"M/d/yyyy",
+	"M/d",
+	"M-d-yyyy",
+	"M-d",
+	"yyyy-MM-dd"
+];
+const parseDateString = (str) => {
+	const trimmed = str.trim();
+	if (!trimmed) return null;
+	const lower = trimmed.toLowerCase();
+	if (lower === "today") return startOfToday();
+	if (lower === "tomorrow") return startOfTomorrow();
+	const monthIndex = MONTH_NAMES.findIndex((name) => name.toLowerCase().startsWith(lower));
+	if (monthIndex > -1) {
+		const today = startOfToday();
+		let date = new Date(today.getFullYear(), monthIndex, 1);
+		if (isPast(date)) date = new Date(today.getFullYear() + 1, monthIndex, 1);
+		return startOfDay(date);
+	}
+	const referenceDate = /* @__PURE__ */ new Date();
+	const parsedDate = DATE_FORMATS.map((fmt) => parse(trimmed, fmt, referenceDate)).find(isValid);
+	if (parsedDate !== void 0) return startOfDay(parsedDate);
+	const native = new Date(trimmed);
+	if (isValid(native)) return startOfDay(native);
+	return null;
+};
+//#endregion
 //#region src/helpers/dateTime/sessionDurationString.ts
 /**
 * A string representation of a duration for a user session. Assumes that
@@ -1031,6 +1085,7 @@ const dateTime = {
 	mediaDurationString,
 	millisecondsToDurationISOString,
 	monthDayStringNumeric,
+	parseDateString,
 	sessionDurationString,
 	timeAgoString,
 	timeOnlyString
@@ -2253,6 +2308,32 @@ const BoltIcon = (props) => /* @__PURE__ */ jsx("svg", {
 	})
 });
 //#endregion
+//#region src/components/Icon/icons/BrandsIcon.tsx
+const BrandsIcon = (props) => /* @__PURE__ */ jsxs("svg", {
+	...props,
+	viewBox: "0 0 16 16",
+	fill: "none",
+	xmlns: "http://www.w3.org/2000/svg",
+	children: [
+		/* @__PURE__ */ jsx("path", {
+			d: "M5.55561 1.77783H3.33339C2.47428 1.77783 1.77783 2.47428 1.77783 3.33339V5.55561C1.77783 6.41472 2.47428 7.11117 3.33339 7.11117H5.55561C6.41472 7.11117 7.11117 6.41472 7.11117 5.55561V3.33339C7.11117 2.47428 6.41472 1.77783 5.55561 1.77783Z",
+			fill: "currentColor"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: "M12.6669 8.88892H10.4447C9.58561 8.88892 8.88916 9.58536 8.88916 10.4445V12.6667C8.88916 13.5258 9.58561 14.2222 10.4447 14.2222H12.6669C13.526 14.2222 14.2225 13.5258 14.2225 12.6667V10.4445C14.2225 9.58536 13.526 8.88892 12.6669 8.88892Z",
+			fill: "currentColor"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: "M11.5559 7.33344C13.1514 7.33344 14.4448 6.04004 14.4448 4.44455C14.4448 2.84906 13.1514 1.55566 11.5559 1.55566C9.96039 1.55566 8.66699 2.84906 8.66699 4.44455C8.66699 6.04004 9.96039 7.33344 11.5559 7.33344Z",
+			fill: "currentColor"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: "M4.44455 14.4445C6.04004 14.4445 7.33344 13.1511 7.33344 11.5556C7.33344 9.96015 6.04004 8.66675 4.44455 8.66675C2.84906 8.66675 1.55566 9.96015 1.55566 11.5556C1.55566 13.1511 2.84906 14.4445 4.44455 14.4445Z",
+			fill: "currentColor"
+		})
+	]
+});
+//#endregion
 //#region src/components/Icon/icons/BulletListIcon.tsx
 const BulletListIcon = (props) => /* @__PURE__ */ jsx("svg", {
 	...props,
@@ -3299,6 +3380,30 @@ const LeaveIcon = (props) => /* @__PURE__ */ jsx("svg", {
 	})
 });
 //#endregion
+//#region src/components/Icon/icons/LibraryIcon.tsx
+const LibraryIcon = (props) => /* @__PURE__ */ jsxs("svg", {
+	...props,
+	xmlns: "http://www.w3.org/2000/svg",
+	fill: "none",
+	viewBox: "0 0 16 16",
+	children: [
+		/* @__PURE__ */ jsx("path", {
+			fill: "currentColor",
+			fillRule: "evenodd",
+			d: "M14.237 1.778h.652a.667.667 0 0 1 0 1.333h-.206a3.75 3.75 0 0 0 0 2.222h.206a.667.667 0 0 1 0 1.334H5.556a2.444 2.444 0 1 1 0-4.89h8.682m-.933 3.555a5.1 5.1 0 0 1 0-2.222H5.556a1.11 1.11 0 1 0 0 2.222z",
+			clipRule: "evenodd"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			fill: "currentColor",
+			d: "M13.304 10.222a5.05 5.05 0 0 0 0 2.222h-.193a.667.667 0 0 0 0 1.334h1.777a.667.667 0 0 0 0-1.334h-.205a3.74 3.74 0 0 1 0-2.222h.206a.667.667 0 0 0 0-1.333H5.556a2.444 2.444 0 1 0 0 4.889.667.667 0 0 0 0-1.334 1.11 1.11 0 1 1 0-2.222z"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			fill: "currentColor",
+			d: "M10.444 5.333H1.111a.667.667 0 0 0 0 1.334h.184c.114.364.192.742.191 1.122 0 .373-.078.742-.19 1.1H1.11a.667.667 0 0 0 0 1.333h9.333a2.446 2.446 0 0 0 2.445-2.444 2.446 2.446 0 0 0-2.445-2.445M11.111 11.555H7.555v3.111a.444.444 0 0 0 .76.315l1.018-1.018 1.019 1.018a.444.444 0 0 0 .759-.315z"
+		})
+	]
+});
+//#endregion
 //#region src/components/Icon/icons/LightBulbIcon.tsx
 const LightBulbIcon = (props) => /* @__PURE__ */ jsx("svg", {
 	...props,
@@ -4749,6 +4854,7 @@ const iconMap = {
 	bell: BellIcon,
 	bolt: BoltIcon,
 	"bullet-list": BulletListIcon,
+	brands: BrandsIcon,
 	calendar: CalendarIcon,
 	"call-to-action": CallToActionIcon,
 	camera: CameraIcon,
@@ -4831,6 +4937,7 @@ const iconMap = {
 	keyboard: KeyboardIcon,
 	layout: LayoutIcon,
 	leave: LeaveIcon,
+	library: LibraryIcon,
 	"light-bulb": LightBulbIcon,
 	link: LinkIcon,
 	list: ListIcon,
@@ -8206,23 +8313,46 @@ 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 {
-    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);
-
+    ${inputShellCss}
     &:read-only {
       outline-style: dashed;
     }
@@ -8231,21 +8361,6 @@ 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));`;
@@ -10221,69 +10336,911 @@ const DataListItemValue = (props) => {
 };
 DataListItemValue.displayName = "DataListItemValue_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})`};
+//#region src/components/Popover/PopoverRoot.tsx
+/**
+* The root of a composable popover. Wrap `PopoverTrigger` (or `PopoverAnchor`)
+* and `PopoverContent` inside it.
+*
+* For the common "button opens a panel" case, prefer the bundled `Popover`.
+*/
+const PopoverRoot = ({ isOpen, ...props }) => /* @__PURE__ */ jsx(Root$4, {
+	...props,
+	...isOpen !== void 0 ? { open: isOpen } : {}
+});
+PopoverRoot.displayName = "PopoverRoot_UI";
+//#endregion
+//#region src/components/Popover/PopoverTrigger.tsx
+/**
+* The button that toggles the popover open and closed. By default it renders a
+* `<button>` wrapping its children; pass `asChild` to merge the trigger
+* behavior onto a single child element (e.g. a `Button` or `IconButton`).
+*/
+const PopoverTrigger = forwardRef((props, forwardedRef) => /* @__PURE__ */ jsx(Trigger$2, {
+	ref: forwardedRef,
+	...props
+}));
+PopoverTrigger.displayName = "PopoverTrigger_UI";
+//#endregion
+//#region src/components/Popover/PopoverPortal.tsx
+/**
+* Portals the popover content out of the DOM hierarchy of its trigger so it can
+* escape clipping ancestors (`overflow: hidden`, transformed containers, etc.).
+*/
+const PopoverPortal = (props) => /* @__PURE__ */ jsx(Portal$1, { ...props });
+PopoverPortal.displayName = "PopoverPortal_UI";
+//#endregion
+//#region src/components/Popover/PopoverContent.tsx
+const StyledContent$2 = styled(Content$2)`
+  z-index: var(--wui-zindex-popover);
+  ${({ $colorScheme }) => getColorScheme($colorScheme)};
+  ${({ $unstyled }) => !$unstyled && css`
+      border-radius: var(--wui-border-radius-02);
+      padding: var(--wui-space-04);
+      max-width: var(--wui-popover-max-width);
+      max-height: var(--wui-popover-max-height);
+      background-color: var(--wui-color-bg-surface);
+      box-shadow: var(--wui-elevation-01);
+      border: 1px solid var(--wui-color-border);
+      overflow: auto;
+    `}
 
-  align-self: stretch;
+  [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";
 /**
-* A line used to visually separate content; note that dividers have no external margin/spacing on their own.
+* The styled popover surface. Place inside a `PopoverRoot` (typically wrapped
+* in a `PopoverPortal`). Forwards all Radix Content props, including
+* dismissal/focus event handlers such as `onPointerDownOutside`,
+* `onOpenAutoFocus`, and `onCloseAutoFocus`.
 */
-const 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",
+const PopoverContent = forwardRef(({ colorScheme = "inherit", unstyled = false, maxWidth = DEFAULT_MAX_WIDTH, maxHeight = DEFAULT_MAX_HEIGHT, sideOffset = DEFAULT_SIDE_OFFSET, style, ...props }, forwardedRef) => {
+	return /* @__PURE__ */ jsx(StyledContent$2, {
+		ref: forwardedRef,
+		$colorScheme: colorScheme,
+		$unstyled: unstyled,
+		sideOffset,
+		style: {
+			"--wui-popover-max-width": maxWidth,
+			"--wui-popover-max-height": maxHeight,
+			...style
+		},
 		...props
 	});
-};
-Divider.displayName = "Divider_UI";
+});
+PopoverContent.displayName = "PopoverContent_UI";
 //#endregion
-//#region src/components/EditableHeading/EditableHeading.tsx
-const StyledInput$1 = styled(Input)`
-  &:not([rows]) {
-    min-height: unset;
+//#region src/components/Popover/PopoverClose.tsx
+/**
+* An element that closes the popover when activated. Defaults to a `<button>`;
+* pass `asChild` to merge the close behavior onto a single child element. For
+* a pre-styled icon close button, use `PopoverCloseButton`.
+*/
+const PopoverClose = forwardRef((props, forwardedRef) => /* @__PURE__ */ jsx(Close, {
+	ref: forwardedRef,
+	...props
+}));
+PopoverClose.displayName = "PopoverClose_UI";
+//#endregion
+//#region src/components/Popover/PopoverCloseButton.tsx
+/**
+* A pre-styled close button intended to be placed inside a `PopoverContent`.
+* For a custom close control, use `PopoverClose` directly.
+*/
+const PopoverCloseButton = ({ label = "Close" } = {}) => /* @__PURE__ */ jsx(PopoverClose, {
+	asChild: true,
+	children: /* @__PURE__ */ jsx(IconButton, {
+		"data-wui-popover-close": true,
+		label,
+		variant: "ghost",
+		children: /* @__PURE__ */ jsx(Icon, { type: "close" })
+	})
+});
+PopoverCloseButton.displayName = "PopoverCloseButton_UI";
+//#endregion
+//#region src/components/Popover/PopoverArrow.tsx
+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;
   }
+`;
+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;
 
-  &:focus {
-    height: ${({ $height }) => `${$height}px !important`};
+  &[data-wui-popover-arrow-inner-circle] {
+    --wui-popover-arrow-circle-starting-opacity: 0.36;
+
+    opacity: var(--wui-popover-arrow-circle-starting-opacity);
   }
 
-  && {
-    ${({ $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-wui-popover-arrow-outer-circle] {
+    --wui-popover-arrow-circle-starting-opacity: 0.2;
 
-    font-family: var(--font-family);
-    width: 100%;
+    animation-direction: alternate-reverse;
+    opacity: 0.11;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    ${({ $isAnimated }) => $isAnimated && css`
+        animation-name: ${circleAnimation};
+      `}
+  }
+`;
+const PopoverArrow = ({ isAnimated }) => {
+	return /* @__PURE__ */ jsx(PopoverArrow$1, {
+		asChild: true,
+		children: /* @__PURE__ */ jsxs("svg", {
+			fill: "none",
+			height: "56",
+			viewBox: "0 0 48 56",
+			width: "48",
+			xmlns: "http://www.w3.org/2000/svg",
+			children: [
+				/* @__PURE__ */ jsx(StyledPath, { d: "M24 26.6667C21.0545 26.6667 18.6667 29.0545 18.6667 32C18.6667 34.9455 21.0545 37.3333 24 37.3333C26.9455 37.3333 29.3333 34.9455 29.3333 32C29.3333 29.0545 26.9455 26.6667 24 26.6667ZM23 0V32H25V0H23Z" }),
+				/* @__PURE__ */ jsx(StyledCircle, {
+					$isAnimated: isAnimated,
+					cx: "24",
+					cy: "32",
+					"data-wui-popover-arrow-inner-circle": true,
+					r: "10",
+					strokeWidth: "4"
+				}),
+				/* @__PURE__ */ jsx(StyledCircle, {
+					$isAnimated: isAnimated,
+					cx: "24",
+					cy: "32",
+					"data-wui-popover-arrow-outer-circle": true,
+					r: "20",
+					strokeWidth: "8"
+				})
+			]
+		})
+	});
+};
+PopoverArrow.displayName = "PopoverArrow_UI";
+//#endregion
+//#region src/components/Popover/Popover.tsx
+/**
+* Displays rich content in a portal, triggered by a button.
+*
+* For more control — custom anchor, access to event handlers like
+* `onPointerDownOutside`, no injected close button, etc. — compose the
+* primitives directly: `PopoverRoot`, `PopoverTrigger`, `PopoverAnchor`,
+* `PopoverPortal`, `PopoverContent`, `PopoverClose`.
+*/
+const Popover = ({ children, trigger, isOpen, hideCloseButton = false, maxWidth, maxHeight, onOpenChange, unstyled = false, withArrow = false, isAnimated = false, colorScheme = "inherit", style, ...props }) => {
+	const sideOffset = withArrow ? -24 : 8;
+	return /* @__PURE__ */ jsxs(PopoverRoot, {
+		...isOpen !== void 0 ? {
+			isOpen,
+			onOpenChange
+		} : {},
+		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
+			asChild: true,
+			children: trigger
+		}), /* @__PURE__ */ jsx(PopoverPortal, { children: /* @__PURE__ */ jsxs(PopoverContent, {
+			colorScheme,
+			...maxHeight !== void 0 ? { maxHeight } : {},
+			...maxWidth !== void 0 ? { maxWidth } : {},
+			sideOffset,
+			unstyled,
+			...props,
+			style,
+			children: [
+				!hideCloseButton && /* @__PURE__ */ jsx(PopoverCloseButton, {}),
+				withArrow ? /* @__PURE__ */ jsx(PopoverArrow, { isAnimated }) : null,
+				/* @__PURE__ */ jsx("div", { children })
+			]
+		}) })]
+	});
+};
+Popover.displayName = "Popover_UI";
+//#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.
+*/
+const PopoverAnchor = forwardRef((props, forwardedRef) => /* @__PURE__ */ jsx(Anchor, {
+	ref: forwardedRef,
+	...props
+}));
+PopoverAnchor.displayName = "PopoverAnchor_UI";
+//#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, inputRef, popoverContentRef, setIsOpen, handleInputChange, handleCommit } = useDatePickerContext();
+	const submittedValue = selectedDate !== null ? toISODate(selectedDate) : "";
+	const handleClick = () => {
+		if (!isOpen) setIsOpen(true);
+	};
+	if (isMobile) {
+		const handleMobileKeyDown = (event) => {
+			if (event.key === "Escape" && isOpen) {
+				event.preventDefault();
+				setIsOpen(false);
+			}
+		};
+		const isEmpty = inputText.length === 0;
+		return /* @__PURE__ */ jsxs(PopoverAnchor, { children: [/* @__PURE__ */ jsxs(StyledMobileTrigger, {
+			ref: inputRef,
+			"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 handleKeyDown = (event) => {
+		if (event.key === "Enter") {
+			event.preventDefault();
+			handleCommit();
+		}
+		if (event.key === "Tab" && isOpen && popoverContentRef.current !== null) {
+			event.preventDefault();
+			popoverContentRef.current.focus();
+		}
+		if (event.key === "Escape" && isOpen) setIsOpen(false);
+	};
+	return /* @__PURE__ */ jsxs(PopoverAnchor, { children: [/* @__PURE__ */ jsx(Input, {
+		ref: inputRef,
+		"aria-describedby": ariaDescribedBy,
+		"aria-expanded": isOpen,
+		"aria-haspopup": "dialog",
+		...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);
+		},
+		onClick: handleClick,
+		onKeyDown: handleKeyDown
+	}), name !== void 0 && /* @__PURE__ */ jsx("input", {
+		name,
+		type: "hidden",
+		value: submittedValue
+	})] });
+};
+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;
+`;
+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" })
+	})] });
+};
+CalendarNavigation.displayName = "CalendarNavigation";
+//#endregion
+//#region src/private/components/Calendar/calendarStyles.ts
+const calendarCss = css`
+  /* stylelint-disable selector-class-pattern, no-descending-specificity --
+     react-day-picker 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;
+  }
+
+  /* Weekday headers */
+  .rdp-weekday {
+    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;
+    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]) {
+      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
+* react-day-picker 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, inputRef, popoverContentRef, handleDaySelect, setDisplayedMonth, setIsOpen } = 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 handleKeyDown = (event) => {
+		if (event.key === "Escape") {
+			setIsOpen(false);
+			inputRef.current?.focus();
+		}
+	};
+	return /* @__PURE__ */ jsx(PopoverPortal, { children: /* @__PURE__ */ jsx(PopoverContent, {
+		ref: popoverContentRef,
+		align,
+		maxWidth: "none",
+		side,
+		onCloseAutoFocus: handleCloseAutoFocus,
+		onKeyDown: handleKeyDown,
+		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 { 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 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) if (skipNextCommitRef.current) skipNextCommitRef.current = false;
+		else handleCommit();
+		setIsOpen(open);
+	}, [handleCommit]);
+	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,
+		inputRef,
+		popoverContentRef,
+		setIsOpen,
+		setInputText,
+		handleInputChange,
+		handleCommit,
+		handleDaySelect,
+		setDisplayedMonth
+	}), [
+		selectedDate,
+		isOpen,
+		inputText,
+		previewDate,
+		displayedMonth,
+		disabled,
+		isSmAndDown,
+		align,
+		side,
+		minDate,
+		maxDate,
+		disabledDates,
+		handleInputChange,
+		handleCommit,
+		handleDaySelect
+	]);
+	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, {})]
+			})
+		})
+	});
+});
+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
+	});
+};
+Divider.displayName = "Divider_UI";
+//#endregion
+//#region src/components/EditableHeading/EditableHeading.tsx
+const StyledInput$1 = styled(Input)`
+  &:not([rows]) {
+    min-height: unset;
+  }
+
+  &:focus {
+    height: ${({ $height }) => `${$height}px !important`};
+  }
+
+  && {
+    ${({ $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`};
@@ -11306,7 +12263,7 @@ const previewCardClose = keyframes`
     transform: scale(0.96);
   }
 `;
-const StyledContent$2 = styled(Content$3)`
+const StyledContent$1 = styled(Content$3)`
   --preview-card-animation-duration: var(--wui-motion-duration-03);
   --preview-card-animation-ease: var(--wui-motion-ease-out);
 
@@ -11353,7 +12310,7 @@ const PreviewCard = ({ children, trigger, maxWidth = "320px", maxHeight = "auto"
 		children: [/* @__PURE__ */ jsx(Trigger$3, {
 			asChild: true,
 			children: trigger
-		}), /* @__PURE__ */ jsx(Portal$2, { children: /* @__PURE__ */ jsx(StyledContent$2, {
+		}), /* @__PURE__ */ jsx(Portal$2, { children: /* @__PURE__ */ jsx(StyledContent$1, {
 			$colorScheme: colorScheme,
 			$paddingSize: paddingSize,
 			sideOffset: 8,
@@ -12351,233 +13308,6 @@ const ModalCallout = ({ title, image, children }) => {
 };
 ModalCallout.displayName = "ModalCallout_UI";
 //#endregion
-//#region src/components/Popover/PopoverRoot.tsx
-/**
-* The root of a composable popover. Wrap `PopoverTrigger` (or `PopoverAnchor`)
-* and `PopoverContent` inside it.
-*
-* For the common "button opens a panel" case, prefer the bundled `Popover`.
-*/
-const PopoverRoot = ({ isOpen, ...props }) => /* @__PURE__ */ jsx(Root$4, {
-	...props,
-	...isOpen !== void 0 ? { open: isOpen } : {}
-});
-PopoverRoot.displayName = "PopoverRoot_UI";
-//#endregion
-//#region src/components/Popover/PopoverTrigger.tsx
-/**
-* The button that toggles the popover open and closed. By default it renders a
-* `<button>` wrapping its children; pass `asChild` to merge the trigger
-* behavior onto a single child element (e.g. a `Button` or `IconButton`).
-*/
-const PopoverTrigger = forwardRef((props, forwardedRef) => /* @__PURE__ */ jsx(Trigger$2, {
-	ref: forwardedRef,
-	...props
-}));
-PopoverTrigger.displayName = "PopoverTrigger_UI";
-//#endregion
-//#region src/components/Popover/PopoverPortal.tsx
-/**
-* Portals the popover content out of the DOM hierarchy of its trigger so it can
-* escape clipping ancestors (`overflow: hidden`, transformed containers, etc.).
-*/
-const PopoverPortal = (props) => /* @__PURE__ */ jsx(Portal$1, { ...props });
-PopoverPortal.displayName = "PopoverPortal_UI";
-//#endregion
-//#region src/components/Popover/PopoverContent.tsx
-const StyledContent$1 = styled(Content$2)`
-  z-index: var(--wui-zindex-popover);
-  ${({ $colorScheme }) => getColorScheme($colorScheme)};
-  ${({ $unstyled }) => !$unstyled && css`
-      border-radius: var(--wui-border-radius-02);
-      padding: var(--wui-space-04);
-      max-width: var(--wui-popover-max-width);
-      max-height: var(--wui-popover-max-height);
-      background-color: var(--wui-color-bg-surface);
-      box-shadow: var(--wui-elevation-01);
-      border: 1px solid var(--wui-color-border);
-      overflow: auto;
-    `}
-
-  [data-wui-popover-close] {
-    position: absolute;
-    top: var(--wui-space-02);
-    right: var(--wui-space-02);
-  }
-`;
-const DEFAULT_SIDE_OFFSET = 8;
-const DEFAULT_MAX_WIDTH = "320px";
-const DEFAULT_MAX_HEIGHT = "auto";
-/**
-* The styled popover surface. Place inside a `PopoverRoot` (typically wrapped
-* in a `PopoverPortal`). Forwards all Radix Content props, including
-* dismissal/focus event handlers such as `onPointerDownOutside`,
-* `onOpenAutoFocus`, and `onCloseAutoFocus`.
-*/
-const PopoverContent = forwardRef(({ colorScheme = "inherit", unstyled = false, maxWidth = DEFAULT_MAX_WIDTH, maxHeight = DEFAULT_MAX_HEIGHT, sideOffset = DEFAULT_SIDE_OFFSET, style, ...props }, forwardedRef) => {
-	return /* @__PURE__ */ jsx(StyledContent$1, {
-		ref: forwardedRef,
-		$colorScheme: colorScheme,
-		$unstyled: unstyled,
-		sideOffset,
-		style: {
-			"--wui-popover-max-width": maxWidth,
-			"--wui-popover-max-height": maxHeight,
-			...style
-		},
-		...props
-	});
-});
-PopoverContent.displayName = "PopoverContent_UI";
-//#endregion
-//#region src/components/Popover/PopoverClose.tsx
-/**
-* An element that closes the popover when activated. Defaults to a `<button>`;
-* pass `asChild` to merge the close behavior onto a single child element. For
-* a pre-styled icon close button, use `PopoverCloseButton`.
-*/
-const PopoverClose = forwardRef((props, forwardedRef) => /* @__PURE__ */ jsx(Close, {
-	ref: forwardedRef,
-	...props
-}));
-PopoverClose.displayName = "PopoverClose_UI";
-//#endregion
-//#region src/components/Popover/PopoverCloseButton.tsx
-/**
-* A pre-styled close button intended to be placed inside a `PopoverContent`.
-* For a custom close control, use `PopoverClose` directly.
-*/
-const PopoverCloseButton = ({ label = "Close" } = {}) => /* @__PURE__ */ jsx(PopoverClose, {
-	asChild: true,
-	children: /* @__PURE__ */ jsx(IconButton, {
-		"data-wui-popover-close": true,
-		label,
-		variant: "ghost",
-		children: /* @__PURE__ */ jsx(Icon, { type: "close" })
-	})
-});
-PopoverCloseButton.displayName = "PopoverCloseButton_UI";
-//#endregion
-//#region src/components/Popover/PopoverArrow.tsx
-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;
-  }
-`;
-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;
-  }
-
-  @media (prefers-reduced-motion: no-preference) {
-    ${({ $isAnimated }) => $isAnimated && css`
-        animation-name: ${circleAnimation};
-      `}
-  }
-`;
-const PopoverArrow = ({ isAnimated }) => {
-	return /* @__PURE__ */ jsx(PopoverArrow$1, {
-		asChild: true,
-		children: /* @__PURE__ */ jsxs("svg", {
-			fill: "none",
-			height: "56",
-			viewBox: "0 0 48 56",
-			width: "48",
-			xmlns: "http://www.w3.org/2000/svg",
-			children: [
-				/* @__PURE__ */ jsx(StyledPath, { d: "M24 26.6667C21.0545 26.6667 18.6667 29.0545 18.6667 32C18.6667 34.9455 21.0545 37.3333 24 37.3333C26.9455 37.3333 29.3333 34.9455 29.3333 32C29.3333 29.0545 26.9455 26.6667 24 26.6667ZM23 0V32H25V0H23Z" }),
-				/* @__PURE__ */ jsx(StyledCircle, {
-					$isAnimated: isAnimated,
-					cx: "24",
-					cy: "32",
-					"data-wui-popover-arrow-inner-circle": true,
-					r: "10",
-					strokeWidth: "4"
-				}),
-				/* @__PURE__ */ jsx(StyledCircle, {
-					$isAnimated: isAnimated,
-					cx: "24",
-					cy: "32",
-					"data-wui-popover-arrow-outer-circle": true,
-					r: "20",
-					strokeWidth: "8"
-				})
-			]
-		})
-	});
-};
-PopoverArrow.displayName = "PopoverArrow_UI";
-//#endregion
-//#region src/components/Popover/Popover.tsx
-/**
-* Displays rich content in a portal, triggered by a button.
-*
-* For more control — custom anchor, access to event handlers like
-* `onPointerDownOutside`, no injected close button, etc. — compose the
-* primitives directly: `PopoverRoot`, `PopoverTrigger`, `PopoverAnchor`,
-* `PopoverPortal`, `PopoverContent`, `PopoverClose`.
-*/
-const Popover = ({ children, trigger, isOpen, hideCloseButton = false, maxWidth, maxHeight, onOpenChange, unstyled = false, withArrow = false, isAnimated = false, colorScheme = "inherit", style, ...props }) => {
-	const sideOffset = withArrow ? -24 : 8;
-	return /* @__PURE__ */ jsxs(PopoverRoot, {
-		...isOpen !== void 0 ? {
-			isOpen,
-			onOpenChange
-		} : {},
-		children: [/* @__PURE__ */ jsx(PopoverTrigger, {
-			asChild: true,
-			children: trigger
-		}), /* @__PURE__ */ jsx(PopoverPortal, { children: /* @__PURE__ */ jsxs(PopoverContent, {
-			colorScheme,
-			...maxHeight !== void 0 ? { maxHeight } : {},
-			...maxWidth !== void 0 ? { maxWidth } : {},
-			sideOffset,
-			unstyled,
-			...props,
-			style,
-			children: [
-				!hideCloseButton && /* @__PURE__ */ jsx(PopoverCloseButton, {}),
-				withArrow ? /* @__PURE__ */ jsx(PopoverArrow, { isAnimated }) : null,
-				/* @__PURE__ */ jsx("div", { children })
-			]
-		}) })]
-	});
-};
-Popover.displayName = "Popover_UI";
-//#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.
-*/
-const PopoverAnchor = forwardRef((props, forwardedRef) => /* @__PURE__ */ jsx(Anchor, {
-	ref: forwardedRef,
-	...props
-}));
-PopoverAnchor.displayName = "PopoverAnchor_UI";
-//#endregion
 //#region src/components/ProgressBar/ProgressBar.tsx
 const ProgressBarWrapper = styled.div`
   --progress-bar-height: 8px;
@@ -14524,6 +15254,6 @@ const WistiaLogo = ({ description = void 0, height = 100, hoverColor = void 0, h
 };
 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, 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, 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, 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, calculateContrast, coerceToBoolean, colorSchemeOptions, copyToClipboard, dateTime, iconSizeMap, isKeyboardKey, mergeRefs, mq, 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, 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, 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, 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, calculateContrast, coerceToBoolean, colorSchemeOptions, copyToClipboard, dateTime, iconSizeMap, isKeyboardKey, mergeRefs, mq, 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