@wistia/vhs 5.0.4 → 5.0.5

package/dist/index.js

@@ -1,13 +1,13 @@
 
 /*
- * @license @wistia/vhs v5.0.4
+ * @license @wistia/vhs v5.0.5
  *
  * Copyright (c) 2021-2026, Wistia, Inc. and its affiliates.
  *
  * This source code is unlicensed, all rights reserved.
  */
 
-import { hasKey, isArray, isBoolean, isEmptyString, isFunction, isNil, isNonEmptyArray, isNonEmptyString, isNotNil, isNotUndefined, isNumber, isString, isUndefined } from "@wistia/type-guards";
+import { hasKey, isArray, isBoolean, isEmptyString, isFunction, isNil, isNonEmptyArray, isNonEmptyString, isNotNil, isNotUndefined, isNumber, isString as isString$1, isUndefined } from "@wistia/type-guards";
 import { addDays, addMonths, addYears, compareAsc, differenceInCalendarDays, differenceInDays, eachDayOfInterval, eachMonthOfInterval, endOfDay, endOfMonth, getDay, getDaysInMonth, getYear, isAfter, isBefore, isEqual, isFuture, isSameDay, isValid, isWithinInterval, startOfDay, startOfMonth } from "date-fns";
 import { daysInWeek } from "date-fns/constants";
 import { ThemeProvider, createGlobalStyle, css, keyframes, styled, useTheme as useTheme$1 } from "styled-components";
@@ -125,7 +125,7 @@ const dateOnlyString = (date, { timeZone = defaultTimeZone } = {}) => {
 * @param {string} options.timeZone - the timezone you want date displayed in, defaults to current users time zone
 * @returns {string} a formatted date string
 */
-const dateOnlyStringNumeric$1 = (date, { timeZone = defaultTimeZone } = {}) => {
+const dateOnlyStringNumeric = (date, { timeZone = defaultTimeZone } = {}) => {
 	if (!isDate(date) || isInvalidDate(date)) return "";
 	try {
 		return new Intl.DateTimeFormat(defaultLocales, {
@@ -512,7 +512,7 @@ const millisecondsToDurationISOString = (numberOfMilliseconds) => {
 const datetimeHelpers = {
 	isDate,
 	dateOnlyString,
-	dateOnlyStringNumeric: dateOnlyStringNumeric$1,
+	dateOnlyStringNumeric,
 	dateOnlyISOString,
 	monthDayStringNumeric,
 	dayOfWeekString,
@@ -664,7 +664,7 @@ const gradientMap = Object.keys(gradients);
 * @param {GradientName} gradientName - The name of the gradient to retrieve.
 * @returns {FlattenSimpleInterpolation} The CSS string representing the specified gradient.
 */
-const getBackgroundGradient = (gradientName = void 0) => {
+const getBackgroundGradient = (gradientName) => {
 	return isNotNil(gradientName) ? gradients[gradientName] : gradients.defaultDarkOne;
 };
 //#endregion
@@ -677,9 +677,8 @@ const MULTIPLIER = 31;
 * @returns {GradientName} gradientName
 */
 const getSemiRandomBackgroundGradient = (id) => {
-	let hashCode = null;
-	if (typeof id === "string" && id) hashCode = Array.from(id).reduce((num, char) => Math.imul(MULTIPLIER, num) + char.charCodeAt(0) || 0, 0);
-	else return gradientMap[0];
+	if (!(typeof id === "string" && id)) return gradientMap[0];
+	const hashCode = Array.from(id).reduce((num, char) => Math.imul(MULTIPLIER, num) + char.charCodeAt(0) || 0, 0);
 	return gradientMap[Math.abs(hashCode) % gradientMap.length];
 };
 //#endregion
@@ -820,7 +819,7 @@ const coerceToString = (value) => value === null || value === void 0 ? "" : Stri
 * @param {*} value - a value of any type
 * @returns {boolean} - whether value is a string
 */
-const isString$1 = (value) => typeof value === "string" || value instanceof String;
+const isString = (value) => typeof value === "string" || value instanceof String;
 //#endregion
 //#region src/helpers/stringHelpers/isHttpUrl.ts
 /**
@@ -830,11 +829,11 @@ const isString$1 = (value) => typeof value === "string" || value instanceof Stri
 * @return {boolean} - whether string is a valid http url
 */
 const isHttpUrl = (str) => {
-	if (!isString$1(str)) return false;
+	if (!isString(str)) return false;
 	try {
 		const url = new URL(str);
 		return url.protocol === "http:" || url.protocol === "https:";
-	} catch (_) {
+	} catch {
 		return false;
 	}
 };
@@ -850,7 +849,7 @@ const isUrl = (str) => {
 	const protocolAndDomain = /^(?:\w+:)?\/\/(\S+)$/;
 	const localhostDomain = /^localhost[:?\d]*(?:[^:?\d]\S*)?$/;
 	const nonLocalhostDomain = /^[^\s.]+\.\S{2,}$/;
-	if (!isString$1(str)) return false;
+	if (!isString(str)) return false;
 	const match = protocolAndDomain.exec(str);
 	if (!match) return false;
 	const remaining = match[1];
@@ -912,7 +911,7 @@ const stringHelpers = {
 	coerceToBoolean,
 	coerceToString,
 	isHttpUrl,
-	isString: isString$1,
+	isString,
 	isUrl,
 	lowerFirst,
 	removeNewlines,
@@ -2805,8 +2804,8 @@ const buttonStyle = css`
 }}
 `;
 const ButtonStyledComponent = styled.button`
-  ${({ $noStyle }) => $noStyle ? buttonResetStyle : buttonStyle}
-`;
+    ${({ $noStyle }) => $noStyle ? buttonResetStyle : buttonStyle}
+  `;
 //#endregion
 //#region src/components/Button/getButtonColor.ts
 const getButtonColor = (colorOverride, variant, allThemeColors) => {
@@ -2919,7 +2918,7 @@ const ToastPortal = ({ children }) => {
 	return createPortal(children, container);
 };
 let displayTimer = null;
-const Toast = memo(({ actionInterceptor = void 0, actionLabel = defaultActionLabel, colorOverride = void 0, renderInPlace = false, isOpen = false, message, onClose, timeout = defaultTimeout, variant = defaultVariant, ...otherProps }) => {
+const Toast = memo(({ actionInterceptor, actionLabel = defaultActionLabel, colorOverride, renderInPlace = false, isOpen = false, message, onClose, timeout = defaultTimeout, variant = defaultVariant, ...otherProps }) => {
 	const [showToast, setShowToast] = useState(isOpen);
 	const ariaLive = variant === "error" || variant === "warning" ? "assertive" : "polite";
 	const stopTimer = useCallback(() => {
@@ -3547,28 +3546,28 @@ const initialRect = {
 const useElementObserver = () => {
 	const ref = useRef(null);
 	const [rect, setRect] = useState(initialRect);
-	const observer = useMemo(() => new window.ResizeObserver((entries) => {
-		if (entries[0]) {
-			const { width, height, top, left, bottom, right, x, y } = entries[0].contentRect;
-			setRect({
-				width,
-				height,
-				top,
-				left,
-				bottom,
-				right,
-				x,
-				y
-			});
-		}
-	}), []);
 	useLayoutEffect(() => {
 		if (!ref.current) return;
+		const observer = new window.ResizeObserver((entries) => {
+			if (entries[0]) {
+				const { width, height, top, left, bottom, right, x, y } = entries[0].contentRect;
+				setRect({
+					width,
+					height,
+					top,
+					left,
+					bottom,
+					right,
+					x,
+					y
+				});
+			}
+		});
 		observer.observe(ref.current);
 		return () => {
 			observer.disconnect();
 		};
-	}, [observer]);
+	}, []);
 	return [ref, rect];
 };
 //#endregion
@@ -3830,7 +3829,7 @@ const useUpdateEffect = (effect, dependencies) => {
 };
 //#endregion
 //#region src/hooks/useKeyPressOnce/useKeyPressOnce.ts
-const useKeyPressOnce = (key, keydownHandler = void 0, keyupHandler = void 0) => {
+const useKeyPressOnce = (key, keydownHandler, keyupHandler) => {
 	const [pressed, event] = useKeyPress(key);
 	useUpdateEffect(() => {
 		if (!pressed && keyupHandler && event !== null) keyupHandler(event);
@@ -4455,7 +4454,7 @@ const TooltipContent = ({ id, active, direction, children, forceState, shouldWra
 const Truncate = ({ children, maxChars, terminator = "...", breakOnWords = false }) => {
 	if (isNil(children)) return null;
 	const canBeTruncated = children.length + terminator.length >= maxChars;
-	if (!isString(children) || maxChars <= 0 || !canBeTruncated) return /* @__PURE__ */ jsx(Fragment, { children });
+	if (!isString$1(children) || maxChars <= 0 || !canBeTruncated) return /* @__PURE__ */ jsx(Fragment, { children });
 	let truncatedChild = children.slice(0, maxChars - terminator.length);
 	if (breakOnWords) {
 		const index = Math.max(truncatedChild.lastIndexOf(" "), truncatedChild.lastIndexOf("\n"));
@@ -4472,7 +4471,7 @@ const TooltipWrapper$1 = styled.div`
   position: relative;
   width: inherit;
 `;
-const Tooltip = ({ label, direction = "top", duration = 2e3, eventType = "hover", forceState = void 0, maxChars = null, children, id = null, shouldWrap = false, backgroundColorOverride, fontColorOverride, ...otherProps }) => {
+const Tooltip = ({ label, direction = "top", duration = 2e3, eventType = "hover", forceState, maxChars = null, children, id = null, shouldWrap = false, backgroundColorOverride, fontColorOverride, ...otherProps }) => {
 	const [active, setActive] = useState(false);
 	const generatedId = `vhs-tooltip-${useId()}`;
 	const tooltipID = useMemo(() => id ?? generatedId, [id, generatedId]);
@@ -4512,7 +4511,7 @@ const Tooltip = ({ label, direction = "top", duration = 2e3, eventType = "hover"
 		timer,
 		duration
 	]);
-	if (isString(label) && !label.length) return /* @__PURE__ */ jsx(Fragment, { children });
+	if (isString$1(label) && !label.length) return /* @__PURE__ */ jsx(Fragment, { children });
 	let tooltipLabel = label;
 	if (maxChars !== null) tooltipLabel = /* @__PURE__ */ jsx(Truncate, {
 		breakOnWords: true,
@@ -4797,7 +4796,7 @@ const IllustrationWrapper = styled.div`
 * [Modal](?path=/docs/components-modal--docs) allows for a separate state control to toggle its visibility and is also more composable
 * allowing for more variation.
 */
-const ActionModal = ({ alignHorizontal = "center", alignVertical = "center", buttons, children, className, elevated = true, fullHeight = false, closeIconColorOverride = void 0, illustration = null, illustrationBackgroundColor = "brandBlue", initialShownState = false, isDismissible = true, onBeforeHide, onHide, onShow, render, title, toggle, width = defaultWidth, ...otherProps }) => {
+const ActionModal = ({ alignHorizontal = "center", alignVertical = "center", buttons, children, className, elevated = true, fullHeight = false, closeIconColorOverride, illustration = null, illustrationBackgroundColor = "brandBlue", initialShownState = false, isDismissible = true, onBeforeHide, onHide, onShow, render, title, toggle, width = defaultWidth, ...otherProps }) => {
 	return /* @__PURE__ */ jsx(ModalBase, {
 		className,
 		initialShownState,
@@ -4908,7 +4907,7 @@ const containsEmojiCharacter = (char) => {
 	return /<a?:.+?:\d{18}>|\p{Extended_Pictographic}/gu.test(char);
 };
 const formatInitialsForDisplay = (initials) => {
-	if (isNil(initials) || isEmptyString(initials) || isString(initials) && containsEmojiCharacter(initials)) return "U";
+	if (isNil(initials) || isEmptyString(initials) || isString$1(initials) && containsEmojiCharacter(initials)) return "U";
 	if (typeof initials !== "string") return "U";
 	return initials.substring(0, 1).toUpperCase();
 };
@@ -5021,7 +5020,7 @@ const shouldWrap = (src) => {
 };
 const getBackgroundImageValue = (src) => {
 	if (src !== void 0 && Array.isArray(src)) return src.map((imageSrc) => shouldWrap(imageSrc) ? `url('${imageSrc}')` : imageSrc).join(", ");
-	if (src !== void 0 && src !== "" && isString(src)) return shouldWrap(src) ? `url('${src}')` : src;
+	if (src !== void 0 && src !== "" && isString$1(src)) return shouldWrap(src) ? `url('${src}')` : src;
 };
 const getOverflowStyle = (overflow) => {
 	if (overflow !== "") {
@@ -5053,7 +5052,7 @@ const BackgroundImageComponent = styled.div`
   position: relative;
   width: ${({ $elWidth }) => $elWidth};
 `;
-const BackgroundImage = ({ children = void 0, attachment: bgAttachment = "scroll", clip: bgClip = "border-box", color: bgColor = void 0, height: elHeight = "auto", origin: bgOrigin = void 0, overflow: elOverflow = "hidden", position: bgPosition = "center", repeat: bgRepeat = "no-repeat", size: bgSize = "cover", src: bgImage = void 0, width: elWidth = "100%", ...otherProps }) => /* @__PURE__ */ jsx(BackgroundImageComponent, {
+const BackgroundImage = ({ children, attachment: bgAttachment = "scroll", clip: bgClip = "border-box", color: bgColor, height: elHeight = "auto", origin: bgOrigin, overflow: elOverflow = "hidden", position: bgPosition = "center", repeat: bgRepeat = "no-repeat", size: bgSize = "cover", src: bgImage, width: elWidth = "100%", ...otherProps }) => /* @__PURE__ */ jsx(BackgroundImageComponent, {
 	$bgAttachment: bgAttachment,
 	$bgClip: bgClip,
 	$bgColor: bgColor,
@@ -6157,7 +6156,7 @@ const DividerComponent = styled.hr`
   line-height: 0;
   margin: 0;
 `;
-const Divider = ({ colorOverride = void 0, height = 1, variant = "dashed", ...otherProps }) => {
+const Divider = ({ colorOverride, height = 1, variant = "dashed", ...otherProps }) => {
 	const defaultFillColor = useThemeColor("grey300");
 	return /* @__PURE__ */ jsx(DividerComponent, {
 		$borderHeight: height,
@@ -6661,15 +6660,15 @@ const inputStyle = css`
   }
 `;
 const InputStyledComponent = styled.input`
-  ${inputStyle}
-  ${({ as }) => as === "textarea" && textareaStyle};
-  ${({ as }) => as !== "textarea" && ellipsisStyle};
-  ${({ $clickToCopy }) => $clickToCopy && clickToCopyStyle};
-  ${({ disabled }) => disabled && disabledStyle$1};
-  ${({ $forceState }) => $forceState === "focus" && focusStyle$1};
-  ${({ $hasError }) => $hasError && errorStyle$1};
-  ${({ readOnly }) => readOnly && readOnlyStyle};
-`;
+    ${inputStyle}
+    ${({ as }) => as === "textarea" && textareaStyle};
+    ${({ as }) => as !== "textarea" && ellipsisStyle};
+    ${({ $clickToCopy }) => $clickToCopy && clickToCopyStyle};
+    ${({ disabled }) => disabled && disabledStyle$1};
+    ${({ $forceState }) => $forceState === "focus" && focusStyle$1};
+    ${({ $hasError }) => $hasError && errorStyle$1};
+    ${({ readOnly }) => readOnly && readOnlyStyle};
+  `;
 //#endregion
 //#region src/components/Input/ClickToCopy.tsx
 const clickToCopyWrapperEnabledStyles = css`
@@ -6780,7 +6779,6 @@ const formatString = (string) => {
 	const [initialSeconds, initialMinutes, initialHours] = string.split(":").reverse().map((stringNumber) => parseNumber(stringNumber));
 	let seconds = 0;
 	let minutes = 0;
-	let hours = 0;
 	if (isNotNil(initialSeconds)) {
 		minutes = Math.floor(initialSeconds / SEC_AND_MIN_MAX);
 		if (isNotNil(initialMinutes)) minutes += initialMinutes;
@@ -6789,14 +6787,14 @@ const formatString = (string) => {
 	const secondsString = seconds.toString();
 	if (secondsString.length === 1) seconds = secondsString.padStart(2, "0");
 	const initialHoursOr0 = isNotUndefined(initialHours) ? initialHours : 0;
-	hours = Math.floor(minutes / SEC_AND_MIN_MAX) + initialHoursOr0;
+	const hours = Math.floor(minutes / SEC_AND_MIN_MAX) + initialHoursOr0;
 	minutes %= SEC_AND_MIN_MAX;
 	const minutesString = minutes.toString();
 	if (hours && minutesString.length === 1) minutes = minutesString.padStart(2, "0");
 	return timeUnitsToString(seconds, minutes, hours);
 };
 const timePositionFormat = (value) => {
-	if (isNil(value) || !isString(value)) return "0:00";
+	if (isNil(value) || !isString$1(value)) return "0:00";
 	return formatString(stripInvalidCharacters(value));
 };
 //#endregion
@@ -7039,46 +7037,46 @@ const errorStyle = css`
   border: 1px solid ${({ theme }) => theme.color.error500};
 `;
 const SelectStyledComponent = styled.select`
-  ${ellipsisStyle}
-  appearance: none;
-  background-color: white;
-  border: 1px solid ${({ theme }) => theme.color.grey400};
-  border-radius: 4px;
-  color: ${({ theme }) => theme.color.grey900};
-  cursor: pointer;
-  display: block;
-  font-size: 14px;
-  height: ${({ multiple }) => multiple ? "66px" : "auto"};
-  line-height: 20px;
-  margin: 0;
-  outline: none;
+    ${ellipsisStyle}
+    appearance: none;
+    background-color: white;
+    border: 1px solid ${({ theme }) => theme.color.grey400};
+    border-radius: 4px;
+    color: ${({ theme }) => theme.color.grey900};
+    cursor: pointer;
+    display: block;
+    font-size: 14px;
+    height: ${({ multiple }) => multiple ? "66px" : "auto"};
+    line-height: 20px;
+    margin: 0;
+    outline: none;
 
-  /* selects w/ multiple need to be able to scroll */
-  overflow-y: ${({ multiple }) => multiple ? "scroll" : "hidden"};
+    /* selects w/ multiple need to be able to scroll */
+    overflow-y: ${({ multiple }) => multiple ? "scroll" : "hidden"};
 
-  /* right padding is to prevent text collision with caret icon */
-  padding: ${({ theme }) => `7px ${theme.spacing.space06} 7px ${theme.spacing.space02}`};
-  width: 100%;
+    /* right padding is to prevent text collision with caret icon */
+    padding: ${({ theme }) => `7px ${theme.spacing.space06} 7px ${theme.spacing.space02}`};
+    width: 100%;
 
-  &:focus {
-    ${focusStyle}
-  }
+    &:focus {
+      ${focusStyle}
+    }
 
-  /* this removes a dotted border around select text when focusing in Firefox */
-  &:-moz-focusring {
-    color: transparent;
-    text-shadow: 0 0 0 #000000;
-  }
+    /* this removes a dotted border around select text when focusing in Firefox */
+    &:-moz-focusring {
+      color: transparent;
+      text-shadow: 0 0 0 #000000;
+    }
 
-  /* remove drop-down arrow in IE */
-  &::-ms-expand {
-    display: none;
-  }
+    /* remove drop-down arrow in IE */
+    &::-ms-expand {
+      display: none;
+    }
 
-  ${({ disabled }) => disabled && disabledStyle}
-  ${({ $hasError }) => $hasError && errorStyle}
+    ${({ disabled }) => disabled && disabledStyle}
+    ${({ $hasError }) => $hasError && errorStyle}
   ${({ $forceState }) => $forceState === "focus" && focusStyle};
-`;
+  `;
 //#endregion
 //#region src/components/Select/Select.tsx
 const getSvgColor = (theme, disabled, focused) => {
@@ -7239,9 +7237,9 @@ const escapeHtml = (stringToEscape) => {
 	const str = `${stringToEscape}`;
 	const match = matchHtmlRegExp.exec(str);
 	if (!match) return str;
-	let escape = "";
+	let escape;
 	let html = "";
-	let index = 0;
+	let index;
 	let lastIndex = 0;
 	for (index = match.index; index < str.length; index++) {
 		const charCode = str.charCodeAt(index);
@@ -7368,17 +7366,17 @@ const isCodeBlock = (element) => element.nodeName === "CODE";
 const isInlineCodeBlock = (element, elementChildren) => isCodeBlock(element) && isNotNil(elementChildren[0]) && !elementChildren[0].match(/\n/g);
 const shouldCreateBlock = (el, children) => !isInlineCodeBlock(el, children) && isNotNil(ELEMENT_TAGS[el.nodeName]);
 const shouldCreateText = (el, children) => isInlineCodeBlock(el, children) || isNotNil(TEXT_TAGS[el.nodeName]);
-const htmlChildIsEmptyText = (child) => isNotNil(child) && !isString(child) && child.text?.trim() === "";
+const htmlChildIsEmptyText = (child) => isNotNil(child) && !isString$1(child) && child.text?.trim() === "";
 const createEditorBlockElements = (children, el) => {
 	const { nodeName } = el;
-	if (nodeName !== "IMG" && children.length === 1 && !isString(children[0]) && isNotNil(children[0].text) && children[0].text?.trim() === "") return jsx$1("element", ELEMENT_TAGS.P(), emptyTextNode$1);
+	if (nodeName !== "IMG" && children.length === 1 && !isString$1(children[0]) && isNotNil(children[0].text) && children[0].text?.trim() === "") return jsx$1("element", ELEMENT_TAGS.P(), emptyTextNode$1);
 	return jsx$1("element", ELEMENT_TAGS[nodeName](el), children);
 };
 const createEditorTextElements = (children, el) => {
 	const { nodeName } = el;
 	const attrs = TEXT_TAGS[nodeName]();
 	return children.map((child) => {
-		if (!isString(child) && isNotNil(child) && isNotNil(child.children)) return addAttrsToChildren(child, attrs);
+		if (!isString$1(child) && isNotNil(child) && isNotNil(child.children)) return addAttrsToChildren(child, attrs);
 		if (htmlChildIsEmptyText(child)) return jsx$1("text", {}, emptyTextNode$1);
 		return jsx$1("text", attrs, child);
 	});
@@ -7423,7 +7421,7 @@ const rteDeserializeHTML = (htmlString) => {
 };
 //#endregion
 //#region src/components/RichTextEditor/Leaf.tsx
-const Leaf = ({ attributes = { "data-slate-leaf": true }, children, leaf = {} }) => {
+const Leaf = ({ attributes, children, leaf }) => {
 	let kids = children;
 	if (isNotNil(leaf.bold)) kids = /* @__PURE__ */ jsx("strong", { children: kids });
 	if (isNotNil(leaf.italic)) kids = /* @__PURE__ */ jsx("em", { children: kids });
@@ -7488,10 +7486,7 @@ const EditorLink = styled.a`
 const EditorSpan = styled.span`
   font-weight: 400;
 `;
-const Element$1 = ({ attributes = {
-	"data-slate-node": "element",
-	ref: void 0
-}, children = void 0, element = {} }) => {
+const Element$1 = ({ attributes, children, element }) => {
 	const selected = useSelected();
 	const focused = useFocused();
 	switch (element.type) {
@@ -7942,7 +7937,7 @@ const ButtonContainer = styled.div`
    */
   z-index: 1;
 `;
-const EditorButton = ({ format = "", icon, disabled = false, onCustomClick, buttonType = "block" }) => {
+const EditorButton = ({ format = "", icon, disabled = false, onCustomClick, buttonType }) => {
 	const editor = useSlate();
 	const activeButtonColor = useThemeColor("brandBlue500");
 	const isActive = buttonType === "block" ? isBlockActive(editor, format) : isMarkActive(editor, format);
@@ -7952,10 +7947,9 @@ const EditorButton = ({ format = "", icon, disabled = false, onCustomClick, butt
 		else toggleMark(editor, format);
 		if (onCustomClick) onCustomClick(event);
 	};
-	const buttonColor = isActive ? activeButtonColor : void 0;
 	return /* @__PURE__ */ jsx(IconButton, {
 		"aria-pressed": isActive,
-		colorOverride: buttonColor,
+		colorOverride: isActive ? activeButtonColor : void 0,
 		disabled,
 		icon,
 		label: format,
@@ -8188,7 +8182,7 @@ RichTextEditor.displayName = "RichTextEditor_VHS";
 const Wrapper = styled.div`
   margin-top: ${({ theme }) => theme.spacing.space02};
 `;
-const FormConnectorRichTextEditor = ({ field: { name, value, onChange }, form: { errors }, label, labelDescription, labelProps = {}, placeholder = "", disabled = false, enabledFormats = Object.values(rteFormatTypes), useExternalValue = false, height = void 0, ...otherProps }) => {
+const FormConnectorRichTextEditor = ({ field: { name, value, onChange }, form: { errors }, label, labelDescription, labelProps = {}, placeholder = "", disabled = false, enabledFormats = Object.values(rteFormatTypes), useExternalValue = false, height, ...otherProps }) => {
 	const [rteValue, setRTEValue] = useState(rteDeserializeHTML(coerceToString(value)));
 	const labelId = isNotUndefined(label) ? `${name}-label-id` : void 0;
 	useEffect(() => {
@@ -8250,7 +8244,7 @@ const fieldsMap = {
 	FormConnectorHidden,
 	FormConnectorRichTextEditor
 };
-const FormField = forwardRef(({ resize = "vertical", customComponent, direction = "column", disabled = false, label, labelDescription, labelProps = {}, name = "", onChangeCustom, options, placeholder = null, type = "text", ...otherProps }, ref) => /* @__PURE__ */ jsx(FormFieldSet, {
+const FormField = forwardRef(({ resize = "vertical", customComponent, direction = "column", disabled = false, label, labelDescription, labelProps = {}, name = "", onChangeCustom, options, placeholder = null, type, ...otherProps }, ref) => /* @__PURE__ */ jsx(FormFieldSet, {
 	disabled,
 	id: `fieldset-${name}`,
 	children: /* @__PURE__ */ jsx(FieldWrapper, {
@@ -9079,7 +9073,7 @@ const HeaderText = styled.span`
   font-weight: 700;
   line-height: 24px;
 `;
-const MenuHeader = ({ label, onCloseClick, overrideMenuHeader = void 0 }) => /* @__PURE__ */ jsxs(HeaderAndButton, { children: [isNotNil(overrideMenuHeader) ? overrideMenuHeader : /* @__PURE__ */ jsx(HeaderText, { children: label || "Menu" }), /* @__PURE__ */ jsx(ModalCloseButton$1, { onClick: onCloseClick })] });
+const MenuHeader = ({ label, onCloseClick, overrideMenuHeader }) => /* @__PURE__ */ jsxs(HeaderAndButton, { children: [isNotNil(overrideMenuHeader) ? overrideMenuHeader : /* @__PURE__ */ jsx(HeaderText, { children: label || "Menu" }), /* @__PURE__ */ jsx(ModalCloseButton$1, { onClick: onCloseClick })] });
 //#endregion
 //#region src/components/MenuButton/MenuButton.tsx
 const MARGIN_BETWEEN_BUTTON_AND_MENU = 8;
@@ -9153,28 +9147,26 @@ const MenuButton = ({ label, menuAlignment = "right", menuItems, menuPosition =
 		if (onMenuClick) onMenuClick(event);
 		toggleMenuAndRenderItems();
 	}, [onMenuClick, toggleMenuAndRenderItems]);
-	let MenuTriggerButton = () => /* @__PURE__ */ jsx(Button, {
-		ref: dropdownButton,
-		"aria-expanded": isMenuVisible,
-		disabled,
-		forceState: isMenuVisible ? "active" : void 0,
-		iconName: "caret-down",
-		iconPosition: "end",
-		label,
-		onClick: onClickButton,
-		size,
-		...otherProps
-	});
-	if (isNotNil(iconButtonComponent)) MenuTriggerButton = () => cloneElement(iconButtonComponent, {
-		label,
-		onClick: onClickButton,
-		ref: dropdownButton,
-		disabled,
-		"aria-expanded": isMenuVisible,
-		...otherProps
-	});
 	return /* @__PURE__ */ jsxs(MenuButtonContainer, { children: [
-		/* @__PURE__ */ jsx(MenuTriggerButton, {}),
+		isNotNil(iconButtonComponent) ? cloneElement(iconButtonComponent, {
+			label,
+			onClick: onClickButton,
+			ref: dropdownButton,
+			disabled,
+			"aria-expanded": isMenuVisible,
+			...otherProps
+		}) : /* @__PURE__ */ jsx(Button, {
+			ref: dropdownButton,
+			"aria-expanded": isMenuVisible,
+			disabled,
+			forceState: isMenuVisible ? "active" : void 0,
+			iconName: "caret-down",
+			iconPosition: "end",
+			label,
+			onClick: onClickButton,
+			size,
+			...otherProps
+		}),
 		/* @__PURE__ */ jsx(MenuComponent, {
 			$dropdownButtonHeight: dropdownButtonHeight,
 			$isMenuVisible: isMenuVisible,
@@ -9257,20 +9249,22 @@ const isMutableRef = (ref) => {
 	return isNotNil(ref) && hasKey(ref, "current") && isNotNil(ref.current);
 };
 const useFocusRestore = (ref) => {
+	const timeoutRef = useRef(null);
 	useEffect(() => {
-		const previousFocus = document.activeElement;
+		const previousFocus = document.activeElement instanceof HTMLElement ? document.activeElement : null;
 		if (isMutableRef(ref)) {
 			const el = ref.current;
 			if (isNotNil(el)) el.focus();
 		}
 		return () => {
-			if (previousFocus !== null) setTimeout(() => {
+			if (isNotNil(timeoutRef.current)) clearTimeout(timeoutRef.current);
+			if (previousFocus !== null) timeoutRef.current = setTimeout(() => {
 				previousFocus.focus();
 			}, 0);
 		};
 	}, [ref]);
 };
-const ModalContent = forwardRef(({ alignHorizontal = "center", alignVertical = "center", allowModalToExceedViewportBounds = false, children, className, fullHeight = false, initialFocusRef, isOpen = false, shouldTrapFocus = true, onRequestClose, shouldCloseOnClickOutside = true, width, overflow = "auto", ...props }, ref) => {
+const ModalContent = forwardRef(({ alignHorizontal = "center", alignVertical = "center", allowModalToExceedViewportBounds = false, children, className, fullHeight = false, initialFocusRef, isOpen, shouldTrapFocus = true, onRequestClose, shouldCloseOnClickOutside = true, width, overflow = "auto", ...props }, ref) => {
 	useFocusRestore(ref);
 	const outerRef = useRef(null);
 	const focusRef = useFocusTrap(shouldTrapFocus, { focusSelector: isNotUndefined(initialFocusRef) ? initialFocusRef : null });
@@ -9406,7 +9400,7 @@ const ProgressBarLabel = styled.div`
   text-align: right;
   width: 5ch;
 `;
-const ProgressBar = ({ hasLabel = true, progress = 0, colorOverride = void 0, labelColorOverride = void 0, meterBgColorOverride = void 0, ...otherProps }) => {
+const ProgressBar = ({ hasLabel = true, progress = 0, colorOverride, labelColorOverride, meterBgColorOverride, ...otherProps }) => {
 	const clampedProgress = Math.min(Math.max(progress, 0), 1);
 	const currentProgress = Math.round(clampedProgress * 100);
 	return /* @__PURE__ */ jsxs(ProgressBarContainer, {
@@ -9571,10 +9565,8 @@ const Calendar = ({ displayDate, earliestDate, latestDate, onDisplayDateChange,
 		label: date.getFullYear()
 	})).reduce((memo, entry) => {
 		if (isNotNil(memo[entry.value])) return memo;
-		return {
-			...memo,
-			[entry.value]: entry
-		};
+		Object.assign(memo, { [entry.value]: entry });
+		return memo;
 	}, {}));
 	const monthOptions = getMonthOptions();
 	const yearOptions = getYearOptions();
@@ -9764,7 +9756,6 @@ const RangeSelectorCalendar = ({ range = {
 	const internalRange = useRange(firstDate, secondDate);
 	const priorInternalRange = usePreviousValue(internalRange);
 	const tempRange = useRange(!isValidRange$1(internalRange) && firstDate, hoveredDate);
-	const onIsValidChangeDebounced = useMemo(() => debounce(100, onIsValidChange), [onIsValidChange]);
 	const setDisplayDateDebounced = useMemo(() => debounce(0, setDisplayDate), []);
 	useEffect(() => {
 		setDisplayDateDebounced(range.end);
@@ -9782,8 +9773,12 @@ const RangeSelectorCalendar = ({ range = {
 		setDisplayDateDebounced
 	]);
 	useEffect(() => {
+		const onIsValidChangeDebounced = debounce(100, onIsValidChange);
 		onIsValidChangeDebounced(isValidRange$1(internalRange));
-	}, [internalRange, onIsValidChangeDebounced]);
+		return () => {
+			onIsValidChangeDebounced.cancel();
+		};
+	}, [internalRange, onIsValidChange]);
 	useEffect(() => {
 		if (isValidRange$1(range)) {
 			let date = void 0;
@@ -9963,7 +9958,7 @@ const getValueParts = (value) => {
 		year2: isNonEmptyString(year2Val) ? year2Val : ""
 	};
 };
-const dateOnlyStringNumeric = (date) => {
+const dateOnlyStringNumeric$1 = (date) => {
 	if (!isValid(date)) return "";
 	try {
 		return new Intl.DateTimeFormat(["en-US"], {
@@ -9987,7 +9982,7 @@ const stringToRange = (value) => {
 			start: startOfDay(new Date(Number(year1), Number(month1) - 1, Number(day1))),
 			end: endOfDay(new Date(Number(year2), Number(month2) - 1, Number(day2)))
 		};
-	} catch (error) {
+	} catch {
 		return;
 	}
 };
@@ -10041,16 +10036,16 @@ const getMaxValue = (valueParts, part) => {
 	}
 };
 const getErrors = ({ range, maxDate, minDate }) => {
-	const startString = dateOnlyStringNumeric(range.start);
-	const endString = dateOnlyStringNumeric(range.end);
+	const startString = dateOnlyStringNumeric$1(range.start);
+	const endString = dateOnlyStringNumeric$1(range.end);
 	const errorMessages = [];
 	if (isNotNil(maxDate)) {
-		const maxString = dateOnlyStringNumeric(maxDate);
+		const maxString = dateOnlyStringNumeric$1(maxDate);
 		if (isBefore(maxDate, range.start)) errorMessages.push(`${startString} is after maximum of ${maxString}`);
 		if (isBefore(maxDate, range.end)) errorMessages.push(`${endString} is after maximum of ${maxString}`);
 	}
 	if (minDate) {
-		const minString = dateOnlyStringNumeric(minDate);
+		const minString = dateOnlyStringNumeric$1(minDate);
 		if (isBefore(range.start, minDate)) errorMessages.push(`${startString} is before minimum of ${minString}`);
 		if (isBefore(range.end, minDate)) errorMessages.push(`${endString} is before minimum of ${minString}`);
 	}
@@ -10653,10 +10648,10 @@ const Slider = ({ ariaLabel, ariaLabelledby, ariaValuetext, disabled = false, in
 		"data-testid": dataTestId,
 		disabled,
 		children: /* @__PURE__ */ jsx(ReactSlider, {
-			...isString(ariaLabel) || isNonEmptyArray(ariaLabel) ? { ariaLabel } : {},
-			...isString(ariaLabelledby) || isNonEmptyArray(ariaLabelledby) ? { ariaLabelledby } : {},
+			...isString$1(ariaLabel) || isNonEmptyArray(ariaLabel) ? { ariaLabel } : {},
+			...isString$1(ariaLabelledby) || isNonEmptyArray(ariaLabelledby) ? { ariaLabelledby } : {},
 			...isFunction(ariaValuetext) && { ariaValuetext: (state) => ariaValuetext(state) },
-			...isString(ariaValuetext) && { ariaValuetext },
+			...isString$1(ariaValuetext) && { ariaValuetext },
 			...isNumber(initialValue) || isNonEmptyArray(initialValue) ? { defaultValue: initialValue } : {},
 			disabled,
 			marks: step,
@@ -10815,6 +10810,7 @@ const Switch = ({ disabled = false, isChecked = false, onChange, colorOverride,
 		"aria-label": ariaLabel,
 		onClick: !disabled ? handleClick : void 0,
 		role: "switch",
+		tabIndex: 0,
 		type: "button",
 		...otherProps,
 		children: /* @__PURE__ */ jsx(SwitchKnob, { $hideText: hideText })
@@ -11016,7 +11012,7 @@ const WistiaLogoComponent = styled.svg`
     }
   }
 `;
-const WistiaLogo = ({ description = void 0, height = 100, hoverColor = void 0, href = void 0, iconOnly = false, title = "Wistia Logo", variant = "standard", ...otherProps }) => {
+const WistiaLogo = ({ description, height = 100, hoverColor, href, iconOnly = false, title = "Wistia Logo", variant = "standard", ...otherProps }) => {
 	const primaryColor = "#2949e5";
 	const darkColor = "#000934";
 	const lightColor = "#ffffff";
@@ -11057,6 +11053,6 @@ const WistiaLogo = ({ description = void 0, height = 100, hoverColor = void 0, h
 };
 WistiaLogo.displayName = "WistiaLogo_VHS";
 //#endregion
-export { ActionModal, Avatar, Backdrop, BackgroundImage, Badge, Banner, Box, Button, ButtonGroup, ButtonLink, Checkbox, CheckboxGroup, CheckboxMenuItem, ClickArea, CloseButton, CollapsibleGroup, Divider, Ellipsis, FileSelect, Form, FormButtons, FormField, FormFieldError, FormGlobalError, FullScreenModal, Icon, IconButton, Image, Input, KeyboardShortcut, Label, LabelDescription, Link, LinkButton, List, ListItem, Menu, MenuButton, MenuItem, MenuLabel, MenuRadioGroup, Modal, ModalBase, ModalBody, ModalCloseButton, ModalFooter, ModalHeader, Paper, ProgressBar, Radio, RadioGroup, RadioMenuItem, RangeSelector, RichTextEditor, ScreenReaderOnly, Select, Slider, Stack, SubMenu, Switch, Text, Thumbnail, ThumbnailCollage, Toast, ToastProvider, Tooltip, Truncate, VHSProvider, WistiaLogo, copyToClipboard, datetimeHelpers, ellipsisFlexParentStyle, ellipsisStyle, getBackgroundGradient, getSemiRandomBackgroundGradient, iconSizeMap, mq, objectHelpers, rteDeserializeHTML, rteFormatTypes, rteSerializeToHTML, screenReaderOnlyStyle, stringHelpers, useBoolean, useClipboard, useElementObserver, useEvent, useFocusTrap, useForceUpdate, useFormikContext, useIsHovered, useKey, useKeyPress, useKeyPressOnce, useLocalStorage, useMergedRefs, useMq, useOnClickOutside, usePreventScroll, usePreviousValue, useTheme, useThemeColor, useToast, useWindowSize };
+export { ActionModal, Avatar, Backdrop, BackgroundImage, Badge, Banner, Box, Button, ButtonGroup, ButtonLink, Checkbox, CheckboxGroup, CheckboxMenuItem, ClickArea, CloseButton, CollapsibleGroup, Divider, Ellipsis, FileSelect, Form, FormButtons, FormField, FormFieldError, FormGlobalError, FullScreenModal, Icon, IconButton, Image, Input, KeyboardShortcut, Label, LabelDescription, Link, LinkButton, List, ListItem, Menu, MenuButton, MenuItem, MenuLabel, MenuRadioGroup, Modal, ModalBase, ModalBody, ModalCloseButton, ModalFooter, ModalHeader, Paper, ProgressBar, Radio, RadioGroup, RadioMenuItem, RangeSelector, RichTextEditor, ScreenReaderOnly, Select, Slider, Stack, SubMenu, Switch, Text, Thumbnail, ThumbnailCollage, Toast, ToastProvider, Tooltip, Truncate, VHSProvider, WistiaLogo, buildTimeDuration, camelCase, coerceToBoolean, coerceToString, copyToClipboard, dateOnlyISOString, dateOnlyString, dateOnlyStringForSentence, dateOnlyStringNumeric, dateTimeRounded, dateTimeString, dateTimeStringForSentence, dateTimeToDate, dateTimeToISO, dateToDateTime, dateUTCOffset, datetimeHelpers, dayOfWeekString, deepFreeze, ellipsisFlexParentStyle, ellipsisStyle, getBackgroundGradient, getSemiRandomBackgroundGradient, iconSizeMap, isDate, isHttpUrl, isObject, isString, isUrl, lowerFirst, mediaDurationString, merge, millisecondsToDurationISOString, monthDayStringNumeric, mq, objectHelpers, removeNewlines, rteDeserializeHTML, rteFormatTypes, rteSerializeToHTML, screenReaderOnlyStyle, selectKeys, sessionDurationString, stringHelpers, stripExtension, timeAgoString, timeOnlyString, truncate, upperFirst, useBoolean, useClipboard, useElementObserver, useEvent, useFocusTrap, useForceUpdate, useFormikContext, useIsHovered, useKey, useKeyPress, useKeyPressOnce, useLocalStorage, useMergedRefs, useMq, useOnClickOutside, usePreventScroll, usePreviousValue, useTheme, useThemeColor, useToast, useWindowSize };
 
 //# sourceMappingURL=index.js.map