@wistia/vhs 6.0.2 → 6.0.3-beta.09ffba11.342c05b

package/dist/index.js

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/vhs v6.0.2
+ * @license @wistia/vhs v6.0.3-beta.09ffba11.342c05b
  *
  * Copyright (c) 2021-2026, Wistia, Inc. and its affiliates.
  *
@@ -8,9 +8,8 @@
  */
 
 import { AnimatePresence, MotionConfig, motion } from "motion/react";
-import { LiveAnnouncer, LiveMessage } from "react-aria-live";
 import { hasKey, isArray, isBoolean, isEmptyString, isFunction, isNil, isNonEmptyArray, isNonEmptyString, isNotNil, isNotUndefined, isNumber, isString, isUndefined } from "@wistia/type-guards";
-import { Children, Fragment, cloneElement, createContext, forwardRef, isValidElement, memo, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
+import { Children, Fragment, cloneElement, createContext, forwardRef, isValidElement, memo, use, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
 import { ThemeProvider, createGlobalStyle, css, keyframes, styled, useTheme as useTheme$1 } from "styled-components";
@@ -25,7 +24,7 @@ import { withHistory } from "slate-history";
 import { Editable, ReactEditor, Slate, useFocused, useSelected, useSlate, withReact } from "slate-react";
 import { jsx as jsx$1 } from "slate-hyperscript";
 import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuItemIndicator, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup as MenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "@radix-ui/react-dropdown-menu";
-import { addDays, addMonths, addYears, compareAsc, differenceInDays, eachDayOfInterval, eachMonthOfInterval, endOfDay, endOfMonth, getDay, getDaysInMonth, getYear, isAfter, isBefore, isEqual as isEqual$1, isFuture, isSameDay, isValid, isWithinInterval, startOfDay, startOfMonth } from "date-fns";
+import { addDays, addMonths, addYears, compareAsc, differenceInDays, differenceInMilliseconds, eachDayOfInterval, eachMonthOfInterval, endOfDay, endOfMonth, getDay, getDaysInMonth, getYear, isAfter, isBefore, isEqual as isEqual$1, isFuture, isSameDay, isValid, isWithinInterval, startOfDay, startOfMonth } from "date-fns";
 import ReactSlider from "react-slider";
 //#region \0rolldown/runtime.js
 var __defProp = Object.defineProperty;
@@ -110,6 +109,123 @@ const useThemeColor = (colorName = null) => {
 	return getColor(colors, colorName);
 };
 //#endregion
+//#region src/providers/AriaLiveProvider/AriaLiveContext.tsx
+const warnMissingProvider = () => {
+	console.warn("Announcement failed: render VHSProvider (or AriaLiveProvider) above this component");
+};
+const AriaLiveContext = createContext({ announce: warnMissingProvider });
+//#endregion
+//#region src/components/ScreenReaderOnly/ScreenReaderOnly.tsx
+const screenReaderOnlyStyle = css`
+  border: 0;
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+`;
+const VisuallyHidden = styled.div`
+  ${screenReaderOnlyStyle}
+`;
+const VisuallyHiddenButFocusable = styled.div`
+  &:not(:focus-within) {
+    ${screenReaderOnlyStyle}
+  }
+`;
+const ScreenReaderOnly = ({ text, children, focusable = false, ...otherProps }) => {
+	const accessibleText = isNotNil(text) ? text : children;
+	if (focusable) return /* @__PURE__ */ jsx(VisuallyHiddenButFocusable, {
+		...otherProps,
+		children: accessibleText
+	});
+	return /* @__PURE__ */ jsx(VisuallyHidden, {
+		...otherProps,
+		children: accessibleText
+	});
+};
+ScreenReaderOnly.displayName = "ScreenReaderOnly_VHS";
+//#endregion
+//#region src/providers/AriaLiveProvider/AriaLiveProvider.tsx
+const ANNOUNCEMENT_CLEAR_DELAY_MS = 5e3;
+const HiddenRegion = styled.div`
+  ${screenReaderOnlyStyle}
+  margin: -1px;
+`;
+const LiveRegion = ({ announcements, politeness }) => /* @__PURE__ */ jsx(HiddenRegion, {
+	"aria-live": politeness,
+	role: "log",
+	children: announcements.filter((announcement) => announcement.politeness === politeness).map((announcement) => /* @__PURE__ */ jsx("div", { children: announcement.message }, announcement.id))
+});
+const AriaLiveProvider = ({ children }) => {
+	const [announcements, setAnnouncements] = useState([]);
+	const nextId = useRef(0);
+	const pendingKeys = useRef(/* @__PURE__ */ new Set());
+	useEffect(() => {
+		pendingKeys.current.clear();
+	});
+	useEffect(() => {
+		if (announcements.length === 0) return;
+		const soonest = Math.min(...announcements.map((announcement) => announcement.expiresAt));
+		const timer = setTimeout(() => {
+			const now = Date.now();
+			setAnnouncements((current) => current.filter((announcement) => announcement.expiresAt > now));
+		}, Math.max(soonest - Date.now(), 0));
+		return () => {
+			clearTimeout(timer);
+		};
+	}, [announcements]);
+	const announce = useCallback((message, politeness = "polite") => {
+		if (!isNonEmptyString(message)) return;
+		const key = `${politeness}:${message}`;
+		if (pendingKeys.current.has(key)) return;
+		pendingKeys.current.add(key);
+		const id = nextId.current;
+		nextId.current += 1;
+		const expiresAt = Date.now() + ANNOUNCEMENT_CLEAR_DELAY_MS;
+		setAnnouncements((current) => [...current, {
+			expiresAt,
+			id,
+			message,
+			politeness
+		}]);
+	}, []);
+	const value = useMemo(() => ({ announce }), [announce]);
+	return /* @__PURE__ */ jsxs(AriaLiveContext, {
+		value,
+		children: [children, /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx(LiveRegion, {
+			announcements,
+			politeness: "assertive"
+		}), /* @__PURE__ */ jsx(LiveRegion, {
+			announcements,
+			politeness: "polite"
+		})] })]
+	});
+};
+//#endregion
+//#region src/private/hooks/useAriaLive/useAriaLive.ts
+const useAriaLive = () => use(AriaLiveContext);
+//#endregion
+//#region src/private/components/LiveAnnouncement/LiveAnnouncement.tsx
+/**
+* Announces `message` to screen readers when it mounts and each time `message` changes.
+*/
+const LiveAnnouncement = ({ message, politeness = "polite" }) => {
+	const { announce } = useAriaLive();
+	const announcedMessage = useRef(null);
+	useEffect(() => {
+		if (announcedMessage.current === message) return;
+		announcedMessage.current = message;
+		announce(message, politeness);
+	}, [
+		announce,
+		message,
+		politeness
+	]);
+	return null;
+};
+//#endregion
 //#region src/private/helpers/coerceToBoolean/coerceToBoolean.ts
 /**
 * Converts a boolean string value `value` into a boolean. If passed
@@ -1618,9 +1734,9 @@ const ButtonContent = ({ children, icon, iconName, iconPosition, isLoading, size
 	return /* @__PURE__ */ jsxs(Fragment$1, { children: [isLoading ? /* @__PURE__ */ jsxs(ButtonLoadingContainer, {
 		$textAlign: textAlign,
 		"data-testid": "button-content-loading",
-		children: [/* @__PURE__ */ jsx(LiveMessage, {
-			"aria-live": "assertive",
-			message: "Button has been disabled while action is in progress"
+		children: [/* @__PURE__ */ jsx(LiveAnnouncement, {
+			message: "Button has been disabled while action is in progress",
+			politeness: "assertive"
 		}), /* @__PURE__ */ jsx(Icon, {
 			size: iconSizeMap$2[size],
 			type: "spinner"
@@ -2090,9 +2206,9 @@ const Toast = memo(({ actionInterceptor, actionLabel = defaultActionLabel, color
 			...otherProps,
 			children: [/* @__PURE__ */ jsxs(ToastContent, {
 				"data-testid": "toast-message",
-				children: [/* @__PURE__ */ jsx(LiveMessage, {
-					"aria-live": ariaLive,
-					message
+				children: [/* @__PURE__ */ jsx(LiveAnnouncement, {
+					message,
+					politeness: ariaLive
 				}), message]
 			}), /* @__PURE__ */ jsx(Button, {
 				colorOverride: accentColor,
@@ -2570,9 +2686,10 @@ const merge = (target, ...sources) => {
 	const output = { ...target };
 	sources.forEach((source) => {
 		if (isObject(source)) Object.keys(source).forEach((key) => {
-			if (isObject(source[key])) if (output[key] === null || output[key] === void 0) output[key] = { ...source[key] };
-			else output[key] = merge(output[key], source[key]);
-			else output[key] = source[key];
+			if (isObject(source[key])) {
+				if (output[key] === null || output[key] === void 0) output[key] = { ...source[key] };
+				else output[key] = merge(output[key], source[key]);
+			} else output[key] = source[key];
 		});
 	});
 	return output;
@@ -2643,7 +2760,7 @@ const DEFAULT_THEME = {};
 const VHSProvider = ({ children, theme = DEFAULT_THEME, globalStylesIncluded = true, skipAnimations = false, Link }) => {
 	return /* @__PURE__ */ jsxs(VHSThemeProvider, {
 		theme,
-		children: [globalStylesIncluded ? /* @__PURE__ */ jsx(GlobalStyle$1, {}) : null, /* @__PURE__ */ jsx(LiveAnnouncer, { children: /* @__PURE__ */ jsx(MotionConfig, {
+		children: [globalStylesIncluded ? /* @__PURE__ */ jsx(GlobalStyle$1, {}) : null, /* @__PURE__ */ jsx(AriaLiveProvider, { children: /* @__PURE__ */ jsx(MotionConfig, {
 			reducedMotion: skipAnimations ? "always" : "user",
 			children: /* @__PURE__ */ jsx(WrapperProvider, {
 				value: { Link },
@@ -2653,38 +2770,6 @@ const VHSProvider = ({ children, theme = DEFAULT_THEME, globalStylesIncluded = t
 	});
 };
 //#endregion
-//#region src/components/ScreenReaderOnly/ScreenReaderOnly.tsx
-const screenReaderOnlyStyle = css`
-  border: 0;
-  clip-path: inset(50%);
-  height: 1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  white-space: nowrap;
-  width: 1px;
-`;
-const VisuallyHidden = styled.div`
-  ${screenReaderOnlyStyle}
-`;
-const VisuallyHiddenButFocusable = styled.div`
-  &:not(:focus-within) {
-    ${screenReaderOnlyStyle}
-  }
-`;
-const ScreenReaderOnly = ({ text, children, focusable = false, ...otherProps }) => {
-	const accessibleText = isNotNil(text) ? text : children;
-	if (focusable) return /* @__PURE__ */ jsx(VisuallyHiddenButFocusable, {
-		...otherProps,
-		children: accessibleText
-	});
-	return /* @__PURE__ */ jsx(VisuallyHidden, {
-		...otherProps,
-		children: accessibleText
-	});
-};
-ScreenReaderOnly.displayName = "ScreenReaderOnly_VHS";
-//#endregion
 //#region src/components/Truncate/Truncate.tsx
 const Truncate = ({ children, maxChars, terminator = "...", breakOnWords = false }) => {
 	if (isNil(children)) return null;
@@ -3056,7 +3141,7 @@ const ModalCloseButton$1 = ({ onClick, closeIconColorOverride }) => /* @__PURE__
 		zIndex: 1
 	}
 });
-ModalCloseButton$1.displayName = "ModalCloseButton";
+ModalCloseButton$1.displayName = "ModalCloseButton_VHS";
 //#endregion
 //#region src/private/helpers/mq/mq.ts
 const getMaxWidth = (breakpoint) => {
@@ -4697,7 +4782,7 @@ const FormFieldWrapper = ({ disabled = false, error = null, label = null, labelD
 		]
 	});
 };
-FormFieldWrapper.displayName = "FormFieldWrapper";
+FormFieldWrapper.displayName = "FormFieldWrapper_VHS";
 //#endregion
 //#region src/components/CheckboxGroup/CheckboxGroup.tsx
 const StyledOptionContainer$1 = styled.div`
@@ -5290,9 +5375,10 @@ const didValuesChange = (newValues, oldValues) => JSON.stringify(newValues) !==
 const handleInitialValues = (initialValues, validationSchema) => {
 	const filteredInitialValues = {};
 	Object.keys(initialValues).forEach((key) => {
-		if (initialValues[key] === null) if (isNotUndefined(validationSchema) && isNotUndefined(validationSchema.fields) && isNotUndefined(validationSchema.fields[key]) && validationSchema.fields[key]._type === "boolean") filteredInitialValues[key] = false;
-		else filteredInitialValues[key] = void 0;
-		else filteredInitialValues[key] = initialValues[key];
+		if (initialValues[key] === null) {
+			if (isNotUndefined(validationSchema) && isNotUndefined(validationSchema.fields) && isNotUndefined(validationSchema.fields[key]) && validationSchema.fields[key]._type === "boolean") filteredInitialValues[key] = false;
+			else filteredInitialValues[key] = void 0;
+		} else filteredInitialValues[key] = initialValues[key];
 	});
 	return filteredInitialValues;
 };
@@ -5387,7 +5473,7 @@ const FormConnectorButton = ({ type = "submit", isSubmitting = false, children,
 		children
 	});
 };
-FormConnectorButton.displayName = "FormConnectorButton";
+FormConnectorButton.displayName = "FormConnectorButton_VHS";
 //#endregion
 //#region src/components/FormButtons/FormButtons.tsx
 const handleMouseDown = (event) => event.preventDefault();
@@ -5416,10 +5502,12 @@ const FormConnectorCheckboxGroup = ({ direction = "column", disabled = false, fi
 	};
 	const onChangeMultiple = (event, optionValue) => {
 		const fieldValues = value;
-		if (isArray(fieldValues)) if (event.target.checked) fieldValues.push(optionValue);
-		else {
-			const index = fieldValues.indexOf(optionValue);
-			if (index !== -1) fieldValues.splice(index, 1);
+		if (isArray(fieldValues)) {
+			if (event.target.checked) fieldValues.push(optionValue);
+			else {
+				const index = fieldValues.indexOf(optionValue);
+				if (index !== -1) fieldValues.splice(index, 1);
+			}
 		}
 		setFieldValue(optionValue, fieldValues);
 	};
@@ -5441,7 +5529,7 @@ const FormConnectorCheckboxGroup = ({ direction = "column", disabled = false, fi
 		value
 	});
 };
-FormConnectorCheckboxGroup.displayName = "FormConnectorCheckboxGroup";
+FormConnectorCheckboxGroup.displayName = "FormConnectorCheckboxGroup_VHS";
 //#endregion
 //#region src/private/components/FormConnectorCustomField/FormConnectorCustomField.tsx
 const DEFAULT_LABEL_PROPS$5 = {};
@@ -5461,7 +5549,7 @@ const FormConnectorCustomField = ({ customComponent: Element, field, form, label
 		})
 	});
 };
-FormConnectorCustomField.displayName = "FormConnectorCustomField";
+FormConnectorCustomField.displayName = "FormConnectorCustomField_VHS";
 //#endregion
 //#region src/private/helpers/coerceToString/coerceToString.ts
 /**
@@ -5865,7 +5953,7 @@ const FormConnectorHidden = ({ field: { name, value, onChange }, form: { setFiel
 		...otherProps
 	});
 };
-FormConnectorHidden.displayName = "FormConnectorHidden";
+FormConnectorHidden.displayName = "FormConnectorHidden_VHS";
 //#endregion
 //#region src/private/components/FormConnectorInput/FormConnectorInput.tsx
 const TRIMMABLE_INPUTS = /* @__PURE__ */ new Set([
@@ -5905,7 +5993,7 @@ const FormConnectorInput = ({ disabled, field: { name, value, onChange, onBlur }
 		})
 	});
 };
-FormConnectorInput.displayName = "FormConnectorInput";
+FormConnectorInput.displayName = "FormConnectorInput_VHS";
 //#endregion
 //#region src/components/Radio/Radio.tsx
 const Radio = forwardRef(({ checked, direction = "column", disabled = false, forceState, hasError = false, id, label, labelDescription, name, onChange, value = "false", ...otherProps }, ref) => {
@@ -5995,7 +6083,7 @@ const FormConnectorRadioGroup = ({ direction = "column", disabled = false, field
 		value: values[name]
 	});
 };
-FormConnectorRadioGroup.displayName = "FormConnectorRadioGroup";
+FormConnectorRadioGroup.displayName = "FormConnectorRadioGroup_VHS";
 //#endregion
 //#region src/private/components/Icon/iconMap.ts
 const iconMap = {
@@ -6155,7 +6243,7 @@ const Icon$1 = ({ color = "currentColor", size = "lg", style, type, ...otherProp
 		...otherProps
 	});
 };
-Icon$1.displayName = "Icon";
+Icon$1.displayName = "Icon_VHS";
 //#endregion
 //#region src/private/helpers/isUrl/isUrl.ts
 /**
@@ -6854,6 +6942,78 @@ const rteDeserializeHTML = (htmlString) => {
 	return fragment;
 };
 //#endregion
+//#region src/components/RichTextEditor/utilities/useExternalValueSync.ts
+const defaultValue = [{
+	type: "paragraph",
+	children: [{ text: "" }]
+}];
+const MAX_PENDING_ECHOES = 50;
+const isTextValid = (rteValue) => {
+	if (isNil(rteValue) || isNil(rteValue[0]) || isNil(rteValue[0].children)) return false;
+	const { text } = rteValue[0].children[0];
+	return isNonEmptyString(text);
+};
+/**
+* Keeps a Slate editor in sync with a controlled `value` prop without clobbering
+* in-progress typing.
+*
+* Controlled parents echo every `onChange` back as `value`. When that echo is
+* delayed (async store, debounced save, slow render), the prop can arrive
+* holding an *older* editor state than the one the user is typing into. The
+* previous implementation treated any mismatch as an external update, reset
+* `editor.children` to the stale value and nulled the selection — dropping
+* characters and sending the caret to the start of the document.
+*
+* Here, every state emitted through `onChange` is remembered until the parent
+* echoes it back. A `value` that matches one of those states is an echo (current
+* or stale) and is ignored. Anything else is a genuine external update and is
+* applied, as before.
+*
+* Returns the `onChange` handler to pass to `<Slate>`.
+*
+* This is directly from the Slate.js docs on how to update slate outside of onChange:
+* If you want to update the editor's content in response to events from outside of Slate, you
+* need to change the children property directly. The simplest way is to replace the value of
+* editor.children editor.children = newValue and trigger a re-rendering (e.g. by calling
+* editor.onChange()).
+* More info here: https://docs.slatejs.org/walkthroughs/06-saving-to-a-database
+*/
+const useExternalValueSync = ({ editor, value, useExternalValue, onChange }) => {
+	const lastSeenValueHtml = useRef(rteSerializeToHTML(value));
+	const pendingEchoes = useRef([]);
+	const handleChange = useCallback((nodes) => {
+		const html = rteSerializeToHTML(nodes);
+		const pending = pendingEchoes.current;
+		if (pending.at(-1) !== html) {
+			pending.push(html);
+			if (pending.length > MAX_PENDING_ECHOES) pending.splice(0, pending.length - MAX_PENDING_ECHOES);
+		}
+		if (isNotNil(onChange)) onChange(nodes);
+	}, [onChange]);
+	useEffect(() => {
+		const valueHtml = rteSerializeToHTML(value);
+		if (valueHtml === lastSeenValueHtml.current) return;
+		lastSeenValueHtml.current = valueHtml;
+		const echoIndex = pendingEchoes.current.indexOf(valueHtml);
+		if (echoIndex !== -1) {
+			pendingEchoes.current.splice(0, echoIndex + 1);
+			return;
+		}
+		/** if we have an external value and the text editor is not empty (and therefore valid), we can safely update the editor. */
+		if (!(isEqual(value, defaultValue) || isTextValid(value) && useExternalValue)) return;
+		if (valueHtml === rteSerializeToHTML(editor.children)) return;
+		pendingEchoes.current = [];
+		editor.children = value;
+		editor.selection = null;
+		editor.onChange();
+	}, [
+		value,
+		editor,
+		useExternalValue
+	]);
+	return handleChange;
+};
+//#endregion
 //#region src/components/RichTextEditor/RichTextEditor.tsx
 const EditableWrapper = styled(Editable)`
   color: ${({ theme }) => theme.color.grey900};
@@ -6880,10 +7040,6 @@ const HOTKEYS = {
 	"mod+i": "italic",
 	"mod+u": "underline"
 };
-const defaultValue = [{
-	type: "paragraph",
-	children: [{ text: "" }]
-}];
 const RichTextEditor = ({ enabledFormats = Object.values(rteFormatTypes), value = defaultValue, onChange, onBlur, placeholder = "Enter some rich text...", disabled = false, ariaLabelledBy, useExternalValue, "data-testid": dataTestId = "vhs-rich-text-editor", height, ...otherProps }) => {
 	const renderElement = useCallback((props) => /* @__PURE__ */ jsx(Element$1, { ...props }), []);
 	const renderLeaf = useCallback((props) => /* @__PURE__ */ jsx(Leaf, { ...props }), []);
@@ -6891,34 +7047,12 @@ const RichTextEditor = ({ enabledFormats = Object.values(rteFormatTypes), value
 		const baseEditor = withReact(createEditor());
 		return withImages(withLinks(withHistory(baseEditor)));
 	}, []);
-	/**
-	* This is directly from the Slate.js docs on how to update slate outside of onChange:
-	* If you want to update the editor's content in response to events from outside of Slate, you
-	* need to change the children property directly. The simplest way is to replace the value of
-	* editor.children editor.children = newValue and trigger a re-rendering (e.g. by calling
-	* editor.onChange() in the example above).
-	* More info here: https://docs.slatejs.org/walkthroughs/06-saving-to-a-database
-	*/
-	const isTextValid = (rteValue) => {
-		if (isNil(rteValue) || isNil(rteValue[0]) || isNil(rteValue[0].children)) return false;
-		const { text } = rteValue[0].children[0];
-		return isNonEmptyString(text);
-	};
-	useEffect(() => {
-		const isDefaultValue = isEqual(value, defaultValue);
-		const valueString = rteSerializeToHTML(value);
-		const editorChildrenString = rteSerializeToHTML(editor.children);
-		/** if we have an external value and the text editor is not empty (and therefore valid) and the value string and children string is not equal to one another, we can safely update the editor. */
-		if (isDefaultValue || isTextValid(value) && useExternalValue && valueString !== editorChildrenString) {
-			editor.children = value;
-			editor.selection = null;
-			editor.onChange();
-		}
-	}, [
-		value,
+	const handleChange = useExternalValueSync({
 		editor,
-		useExternalValue
-	]);
+		value,
+		useExternalValue,
+		onChange
+	});
 	const handleEditorBlur = (_event) => {
 		const updatedValue = editor.children;
 		if (isNotNil(onBlur)) onBlur(updatedValue);
@@ -6949,7 +7083,7 @@ const RichTextEditor = ({ enabledFormats = Object.values(rteFormatTypes), value
 		children: /* @__PURE__ */ jsxs(Slate, {
 			editor,
 			initialValue: value,
-			onChange,
+			onChange: handleChange,
 			...otherProps,
 			children: [/* @__PURE__ */ jsx(EditorButtons, {
 				disabled,
@@ -7019,7 +7153,7 @@ const FormConnectorRichTextEditor = ({ field: { name, value, onChange }, form: {
 		})
 	});
 };
-FormConnectorRichTextEditor.displayName = "FormConnectorRichTextEditor";
+FormConnectorRichTextEditor.displayName = "FormConnectorRichTextEditor_VHS";
 //#endregion
 //#region src/components/Select/SelectStyledComponent.tsx
 const focusStyle = css`
@@ -7195,7 +7329,7 @@ const FormConnectorSelect = ({ disabled = false, field: { name, value, onChange,
 		})
 	});
 };
-FormConnectorSelect.displayName = "FormConnectorSelect";
+FormConnectorSelect.displayName = "FormConnectorSelect_VHS";
 //#endregion
 //#region src/components/FormField/inputTypeMap.ts
 const inputTypeMap = {
@@ -7779,6 +7913,7 @@ const StyledMenuItem = styled.div`
     ${({ $variant }) => isNotNil($variant) && getMenuItemStyles($variant)};
   }
 `;
+const PolymorphicStyledMenuItem = StyledMenuItem;
 const StyledMenuItemContent = styled.div`
   align-items: center;
   display: grid;
@@ -7817,7 +7952,7 @@ const MenuItem = ({ children, label, description, badge, icon, renderAs, href, t
 		style: { outline: "none" },
 		...props,
 		asChild: true,
-		children: /* @__PURE__ */ jsx(StyledMenuItem, {
+		children: /* @__PURE__ */ jsx(PolymorphicStyledMenuItem, {
 			$variant: variant,
 			as,
 			href,
@@ -8125,7 +8260,7 @@ const Menu$1 = forwardRef(({ items, menuHeader, width = "fullWidth", onClick, on
 		children: [isNotNil(menuHeader) ? /* @__PURE__ */ jsxs(Fragment$1, { children: [menuHeader, /* @__PURE__ */ jsx(MenuItem$1, { children: /* @__PURE__ */ jsx(Divider, {}) })] }) : null, itemsToRender]
 	});
 });
-Menu$1.displayName = "Menu";
+Menu$1.displayName = "Menu_VHS";
 //#endregion
 //#region src/private/hooks/useBoolean/useBoolean.ts
 const useBoolean = (initialValue = false) => {
@@ -8353,8 +8488,7 @@ const scopeTab = (node, event) => {
 	const target = tabbable[event.shiftKey ? tabbable.length - 1 : 0];
 	if (target) target.focus();
 };
-const createAriaHider = (containerNode, selector) => {
-	selector ??= "body > :not(script)";
+const createAriaHider = (containerNode, selector = "body > :not(script)") => {
 	const rootNodes = [...document.querySelectorAll(selector)].map((node) => {
 		if (node.contains(containerNode)) return;
 		const ariaHidden = node.getAttribute("aria-hidden");
@@ -8392,8 +8526,10 @@ const useFocusTrap = (active = true, options = {}) => {
 			const processNode = (node2) => {
 				restoreAriaRef.current = !(options.disableAriaHider ?? false) ? createAriaHider(node2) : null;
 				let focusElement = null;
-				if (isNotUndefined(options.focusSelector)) if (isRef(options.focusSelector)) focusElement = options.focusSelector.current;
-				else focusElement = typeof options.focusSelector === "string" ? node2.querySelector(options.focusSelector) : options.focusSelector;
+				if (isNotUndefined(options.focusSelector)) {
+					if (isRef(options.focusSelector)) focusElement = options.focusSelector.current;
+					else focusElement = typeof options.focusSelector === "string" ? node2.querySelector(options.focusSelector) : options.focusSelector;
+				}
 				if (!focusElement) {
 					const children = [...node2.querySelectorAll(FOCUSABLE_ELEMENT_SELECTORS)];
 					focusElement = children.find((element) => isTabbableElement(element)) ?? children.find((element) => isFocusableElement(element)) ?? null;
@@ -8856,6 +8992,12 @@ const MonthButton = styled.button`
   }
 `;
 const Calendar = ({ displayDate, earliestDate, latestDate, onDisplayDateChange, onMouseLeave, shouldPreventFuture = false, renderDay }) => {
+	const [today, setToday] = useState(() => /* @__PURE__ */ new Date());
+	useEffect(() => {
+		const nextMidnight = startOfDay(addDays(today, 1));
+		const timeout = setTimeout(() => setToday(/* @__PURE__ */ new Date()), differenceInMilliseconds(nextMidnight, today));
+		return () => clearTimeout(timeout);
+	}, [today]);
 	const month = monthLayout(daysOfMonth(displayDate));
 	const nextMonth = startOfMonth(addMonths(displayDate, 1));
 	const prevMonth = endOfMonth(addMonths(displayDate, -1));
@@ -8883,8 +9025,8 @@ const Calendar = ({ displayDate, earliestDate, latestDate, onDisplayDateChange,
 		children: /* @__PURE__ */ jsx(DayNumber, { children: formatDay(day) })
 	}, day);
 	const possibleRange = {
-		start: earliestDate ?? addYears(/* @__PURE__ */ new Date(), -5),
-		end: shouldPreventFuture ? /* @__PURE__ */ new Date() : addYears(/* @__PURE__ */ new Date(), 5)
+		start: earliestDate ?? addYears(today, -5),
+		end: shouldPreventFuture ? today : addYears(today, 5)
 	};
 	const currentYear = displayDate.getFullYear();
 	const getMonthOptions = () => {
@@ -8928,9 +9070,11 @@ const Calendar = ({ displayDate, earliestDate, latestDate, onDisplayDateChange,
 				onChange: (event) => {
 					const selectedMonth = event.target.value;
 					const nextDate = new Date(currentYear, Number(selectedMonth));
-					if (onDisplayDateChange) if (isInFuture(nextDate)) onDisplayDateChange(/* @__PURE__ */ new Date());
-					else if (isBeforeEarliest(nextDate)) onDisplayDateChange(earliestDate);
-					else onDisplayDateChange(nextDate);
+					if (onDisplayDateChange) {
+						if (isInFuture(nextDate)) onDisplayDateChange(/* @__PURE__ */ new Date());
+						else if (isBeforeEarliest(nextDate)) onDisplayDateChange(earliestDate);
+						else onDisplayDateChange(nextDate);
+					}
 				},
 				options: monthOptions,
 				placeholder: null,
@@ -8944,9 +9088,11 @@ const Calendar = ({ displayDate, earliestDate, latestDate, onDisplayDateChange,
 					const currentMonth = displayDate.getMonth();
 					const selectedYear = event.target.value;
 					const nextDate = new Date(Number(selectedYear), currentMonth);
-					if (onDisplayDateChange) if (isInFuture(nextDate)) onDisplayDateChange(/* @__PURE__ */ new Date());
-					else if (isBeforeEarliest(nextDate)) onDisplayDateChange(earliestDate);
-					else onDisplayDateChange(nextDate);
+					if (onDisplayDateChange) {
+						if (isInFuture(nextDate)) onDisplayDateChange(/* @__PURE__ */ new Date());
+						else if (isBeforeEarliest(nextDate)) onDisplayDateChange(earliestDate);
+						else onDisplayDateChange(nextDate);
+					}
 				},
 				options: yearOptions,
 				placeholder: null,
@@ -8974,7 +9120,7 @@ const Calendar = ({ displayDate, earliestDate, latestDate, onDisplayDateChange,
 		})]
 	});
 };
-Calendar.displayName = "Calendar";
+Calendar.displayName = "Calendar_VHS";
 //#endregion
 //#region src/private/components/RangeSelectorCalendar/RangeSelectorCalendar.tsx
 const EnhancedDay = styled(Day)`
@@ -9046,7 +9192,7 @@ const EnhancedDay = styled(Day)`
     }
   `}
 `;
-const isValidRange$1 = (range) => {
+const isValidRange = (range) => {
 	if (isNil(range)) return false;
 	const { start, end } = range;
 	return start instanceof Date && end instanceof Date && isBefore(start, end);
@@ -9085,14 +9231,14 @@ const DEFAULT_RANGE$1 = {
 };
 const NOOP = () => {};
 const RangeSelectorCalendar = ({ range = DEFAULT_RANGE$1, rangePartToShow = "", onChange, onIsValidChange = NOOP, earliestDate, latestDate, shouldPreventFuture = false }) => {
-	const thisMonth = useMemo(() => startOfMonth(/* @__PURE__ */ new Date()), []);
+	const [thisMonth] = useState(() => startOfMonth(/* @__PURE__ */ new Date()));
 	const initialDisplayDate = isNotNil(range.end) ? range.end : thisMonth;
 	const [displayDate, setDisplayDate] = useState(initialDisplayDate);
 	const [{ firstDate, secondDate }, setDates] = useState({});
 	const [hoveredDate, setHoveredDate] = useState();
 	const internalRange = useRange(firstDate, secondDate);
 	const priorInternalRange = usePreviousValue(internalRange);
-	const tempRange = useRange(!isValidRange$1(internalRange) && firstDate, hoveredDate);
+	const tempRange = useRange(!isValidRange(internalRange) && firstDate, hoveredDate);
 	const setDisplayDateDebounced = useMemo(() => debounce(0, setDisplayDate), []);
 	useEffect(() => {
 		setDisplayDateDebounced(range.end);
@@ -9111,13 +9257,13 @@ const RangeSelectorCalendar = ({ range = DEFAULT_RANGE$1, rangePartToShow = "",
 	]);
 	useEffect(() => {
 		const onIsValidChangeDebounced = debounce(100, onIsValidChange);
-		onIsValidChangeDebounced(isValidRange$1(internalRange));
+		onIsValidChangeDebounced(isValidRange(internalRange));
 		return () => {
 			onIsValidChangeDebounced.cancel();
 		};
 	}, [internalRange, onIsValidChange]);
 	useEffect(() => {
-		if (isValidRange$1(range)) {
+		if (isValidRange(range)) {
 			let date = void 0;
 			if (priorInternalRange && !isEqual$1(range.start, priorInternalRange.start)) date = range.start;
 			if (priorInternalRange && !isEqual$1(range.end, priorInternalRange.end)) date = range.end;
@@ -9176,7 +9322,7 @@ const RangeSelectorCalendar = ({ range = DEFAULT_RANGE$1, rangePartToShow = "",
 						secondDate: nextSecond
 					});
 					const nextRange = makeRange(nextFirst, nextSecond);
-					if (isValidRange$1(nextRange) && onChange) onChange(nextRange);
+					if (isValidRange(nextRange) && onChange) onChange(nextRange);
 					setHoveredDate(void 0);
 				},
 				onMouseOver: () => {
@@ -9188,7 +9334,7 @@ const RangeSelectorCalendar = ({ range = DEFAULT_RANGE$1, rangePartToShow = "",
 		shouldPreventFuture
 	});
 };
-RangeSelectorCalendar.displayName = "RangeSelectorCalendar";
+RangeSelectorCalendar.displayName = "RangeSelectorCalendar_VHS";
 //#endregion
 //#region src/private/components/RangeSelectorInput/constants.ts
 const DIVIDER_STRING = "       -       ";
@@ -9404,7 +9550,7 @@ const preventDoubleClick = (event) => {
 		timeout = void 0;
 	}, delay);
 };
-const isValidRange = ({ start, end }) => isValid(start) && isValid(end);
+const hasValidDates = ({ start, end }) => isValid(start) && isValid(end);
 const getFieldId = ([start], positions) => {
 	const currentPosition = positions.find((pos) => pos.start === start);
 	return isNotNil(currentPosition) && isNotNil(currentPosition.id) ? currentPosition.id : "";
@@ -9592,7 +9738,7 @@ const RangeSelectorInput = ({ onChange, onSelectedRangePartChange, range, earlie
 			}),
 			minDate: earliestDate
 		});
-		if (isValidRange(nextRange)) {
+		if (hasValidDates(nextRange)) {
 			setValue(rangeToString(nextRange));
 			if (!isNonEmptyArray(errors) && isNotUndefined(onChange)) onChange(orderRange(nextRange));
 		}
@@ -9687,7 +9833,7 @@ const RangeSelectorInput = ({ onChange, onSelectedRangePartChange, range, earlie
 		value
 	})] });
 };
-RangeSelectorInput.displayName = "RangeSelectorInput";
+RangeSelectorInput.displayName = "RangeSelectorInput_VHS";
 //#endregion
 //#region src/components/RangeSelector/RangeSelector.tsx
 const TooltipWrapper = styled.div`