@wistia/vhs 6.0.2-beta.b9791fdd.bf57768 → 6.0.2-beta.cd6ae361.53807dd

package/dist/index.js

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/vhs v6.0.2-beta.b9791fdd.bf57768
+ * @license @wistia/vhs v6.0.2-beta.cd6ae361.53807dd
  *
  * Copyright (c) 2021-2026, Wistia, Inc. and its affiliates.
  *
@@ -1967,7 +1967,7 @@ const toastWidth = {
 	minWidth: "352px",
 	width: "400px"
 };
-const toastMobileWidth = { width: `calc(100% - 48px)` };
+const toastMobileWidth = { width: `calc(100% - ${toastPositionOffset * 2}px)` };
 const ToastAnimation = ({ children, in: inProp, renderInPlace }) => {
 	const { isSmAndUp } = useMq();
 	const { duration, zIndex } = useTheme();
@@ -2183,8 +2183,9 @@ const baseline = css`
   }
 `;
 //#endregion
-//#region src/css/normalize.tsx
-const normalize = css`
+//#region src/css/GlobalStyle.tsx
+const GlobalStyle$1 = createGlobalStyle`
+  ${css`
   /* normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
 
   /* Document
@@ -2540,11 +2541,7 @@ const normalize = css`
   [hidden] {
     display: none;
   }
-`;
-//#endregion
-//#region src/css/GlobalStyle.tsx
-const GlobalStyle$1 = createGlobalStyle`
-  ${normalize}
+`}
   ${baseline}
 `;
 //#endregion
@@ -2626,9 +2623,8 @@ const theme = {
 //#endregion
 //#region src/providers/VHSThemeProvider.tsx
 const VHSThemeProvider = ({ children, theme: overrideTheme }) => {
-	const theme$1 = merge(theme, overrideTheme);
 	return /* @__PURE__ */ jsx(ThemeProvider, {
-		theme: theme$1,
+		theme: merge(theme, overrideTheme),
 		children
 	});
 };
@@ -2747,7 +2743,7 @@ const tooltipBottomStyle = css`
     &::after {
       border-bottom-color: ${({ $backgroundColor }) => $backgroundColor};
       left: 50%;
-      top: -${16}px;
+      top: -${ARROW_SIZE * 2}px;
     }
   }
 `;
@@ -3056,7 +3052,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) => {
@@ -3312,8 +3308,7 @@ const ModalBaseContent = ({ className, initialShownState = false, isDismissible
 	] });
 };
 const ModalBase = (props) => {
-	const modalProviderContext = useModalProviderContext();
-	if (!isEqual(modalProviderContext, {})) return /* @__PURE__ */ jsx(ModalBaseContent, { ...props });
+	if (!isEqual(useModalProviderContext(), {})) return /* @__PURE__ */ jsx(ModalBaseContent, { ...props });
 	return /* @__PURE__ */ jsx(ModalProvider, { children: /* @__PURE__ */ jsx(ModalBaseContent, { ...props }) });
 };
 ModalBase.displayName = "ModalBase_VHS";
@@ -4697,7 +4692,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`
@@ -4719,9 +4714,8 @@ const CheckboxGroup = ({ direction = "column", disabled = false, error, label, l
 	children: /* @__PURE__ */ jsx(StyledOptionContainer$1, {
 		direction,
 		children: options.map((option) => {
-			const isChecked = Array.isArray(value) ? value.includes(option.name) : value;
 			return /* @__PURE__ */ jsx(Checkbox, {
-				checked: isChecked,
+				checked: Array.isArray(value) ? value.includes(option.name) : value,
 				direction,
 				disabled,
 				onChange: (event) => isNotNil(onChange) ? onChange(event, option.name) : void 0,
@@ -5127,7 +5121,7 @@ const Divider = ({ colorOverride, height = 1, variant = "dashed", ...otherProps
 Divider.displayName = "Divider_VHS";
 //#endregion
 //#region src/components/FileSelect/FileSelect.tsx
-const defaultMaximumFileSize = 26624;
+const defaultMaximumFileSize = 26 * 1024;
 const FileSelectComponent = styled.label`
   display: inline-block;
   overflow: hidden;
@@ -5270,8 +5264,7 @@ const FormGlobalError = forwardRef((_, ref) => {
 	const { status, errors } = useFormikContext$1();
 	let errorsCount = Object.keys(errors).length;
 	if (isNotNil(status) && status["length"] > 0) errorsCount += 1;
-	const showErrorContainer = isNotNil(status) && !status["success"] || errorsCount;
-	if (coerceToBoolean(showErrorContainer)) return /* @__PURE__ */ jsxs(GlobalErrorsContainer, {
+	if (coerceToBoolean(isNotNil(status) && !status["success"] || errorsCount)) return /* @__PURE__ */ jsxs(GlobalErrorsContainer, {
 		ref,
 		children: [/* @__PURE__ */ jsx(ErrorsText, { children: errorsTitle(errorsCount) }), /* @__PURE__ */ jsx(FieldErrorsList, {
 			errors,
@@ -5387,7 +5380,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();
@@ -5441,7 +5434,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 +5454,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 +5858,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 +5898,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 +5988,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 +6148,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
 /**
@@ -6803,8 +6796,7 @@ const htmlChildIsEmptyText = (child) => isNotNil(child) && !isString(child) && c
 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);
-	const attrs = ELEMENT_TAGS[nodeName](el);
-	return jsx$1("element", attrs, children);
+	return jsx$1("element", ELEMENT_TAGS[nodeName](el), children);
 };
 const createEditorTextElements = (children, el) => {
 	const { nodeName } = el;
@@ -6888,8 +6880,7 @@ const RichTextEditor = ({ enabledFormats = Object.values(rteFormatTypes), value
 	const renderElement = useCallback((props) => /* @__PURE__ */ jsx(Element$1, { ...props }), []);
 	const renderLeaf = useCallback((props) => /* @__PURE__ */ jsx(Leaf, { ...props }), []);
 	const editor = useMemo(() => {
-		const baseEditor = withReact(createEditor());
-		return withImages(withLinks(withHistory(baseEditor)));
+		return withImages(withLinks(withHistory(withReact(createEditor()))));
 	}, []);
 	/**
 	* This is directly from the Slate.js docs on how to update slate outside of onChange:
@@ -7019,7 +7010,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 +7186,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 = {
@@ -7630,7 +7621,8 @@ List.displayName = "List_VHS";
 //#endregion
 //#region src/components/Menu/menuContentCss.ts
 const gutterWidth = "8px";
-const open = keyframes`
+const menuContentCss = css`
+  animation: ${keyframes`
   from {
     opacity: 0;
     transform: scale(.97) translateY(-8px);
@@ -7639,19 +7631,7 @@ const open = keyframes`
     opacity: 1;
     transform: scale(1);
   }
-`;
-const close = keyframes`
-  from {
-    opacity: 1;
-    transform: scale(1);
-  }
-  to {
-    opacity: 0;
-    transform: scale(.97) translateY(-8px);
-  }
-`;
-const menuContentCss = css`
-  animation: ${open} ${({ theme }) => theme.duration.productive.moderate}
+`} ${({ theme }) => theme.duration.productive.moderate}
     ${({ theme }) => theme.easing.entrance.productive};
   background: white;
   border-radius: 4px;
@@ -7664,7 +7644,16 @@ const menuContentCss = css`
   z-index: ${({ theme }) => theme.zIndex.MenuComponent};
 
   &[data-state='closed'] {
-    animation: ${close} ${({ theme }) => theme.duration.productive.moderate}
+    animation: ${keyframes`
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(.97) translateY(-8px);
+  }
+`} ${({ theme }) => theme.duration.productive.moderate}
       ${({ theme }) => theme.easing.exit.productive};
   }
 
@@ -8088,8 +8077,7 @@ const MenuItem$1 = styled.div`
 `;
 const Menu$1 = forwardRef(({ items, menuHeader, width = "fullWidth", onClick, onClickOutside, onPressEsc, onOpen, onClose, ...otherProps }, ref) => {
 	const menuRef = useRef(void 0);
-	const onClickOutsideFn = isNotNil(onClickOutside) ? onClickOutside : () => {};
-	useOnClickOutside(menuRef, onClickOutsideFn);
+	useOnClickOutside(menuRef, isNotNil(onClickOutside) ? onClickOutside : () => {});
 	const menuRefs = useMergedRefs([menuRef, ref]);
 	useEffect(() => {
 		if (onOpen) onOpen();
@@ -8126,7 +8114,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) => {
@@ -8464,7 +8452,7 @@ const createKeyPredicate = (keyFilter) => {
 };
 const useKey = (key, eventHandler, options = {}, dependencies = [key]) => {
 	const { eventName = "keydown", eventTarget, eventOptions } = options;
-	const memoizedEventHandler = useMemo(() => {
+	useEvent(eventName, useMemo(() => {
 		const predicate = createKeyPredicate(key);
 		return (handlerEvent) => {
 			if ([
@@ -8474,8 +8462,7 @@ const useKey = (key, eventHandler, options = {}, dependencies = [key]) => {
 			].includes(document.activeElement?.nodeName ?? "") || document.activeElement?.isContentEditable) return;
 			if (predicate(handlerEvent)) return eventHandler(handlerEvent);
 		};
-	}, dependencies);
-	useEvent(eventName, memoizedEventHandler, eventTarget, eventOptions);
+	}, dependencies), eventTarget, eventOptions);
 };
 //#endregion
 //#region src/private/hooks/useKeyPress/useKeyPress.ts
@@ -8774,11 +8761,10 @@ const daysOfWeek = [
 const daysInAWeek = 7;
 const hasDates = (week) => week[0] instanceof Date || week[6] instanceof Date;
 const daysOfMonth = (dateInMonth) => {
-	const interval = {
+	return eachDayOfInterval({
 		start: startOfMonth(startOfDay(dateInMonth)),
 		end: endOfMonth(startOfDay(dateInMonth))
-	};
-	return eachDayOfInterval(interval);
+	});
 };
 const makeEmptyWeek = () => Array.from({ length: daysInAWeek }, () => []);
 const monthLayout = (days) => {
@@ -8799,7 +8785,7 @@ const monthLayout = (days) => {
 const Month = styled.div`
   cursor: not-allowed;
   padding-top: ${({ theme }) => theme.spacing.space04};
-  width: ${315}px;
+  width: ${dayDimension * daysInAWeek}px;
 `;
 const MonthHeader = styled.div`
   display: flex;
@@ -8975,7 +8961,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)`
@@ -9087,8 +9073,7 @@ 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 initialDisplayDate = isNotNil(range.end) ? range.end : thisMonth;
-	const [displayDate, setDisplayDate] = useState(initialDisplayDate);
+	const [displayDate, setDisplayDate] = useState(isNotNil(range.end) ? range.end : thisMonth);
 	const [{ firstDate, secondDate }, setDates] = useState({});
 	const [hoveredDate, setHoveredDate] = useState();
 	const internalRange = useRange(firstDate, secondDate);
@@ -9189,7 +9174,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 = "       -       ";
@@ -9297,9 +9282,7 @@ const rangeToString = ({ start, end }) => {
 		day: "2-digit",
 		year: "numeric"
 	};
-	const startString = start.toLocaleDateString("en-US", opts);
-	const endString = end.toLocaleDateString("en-US", opts);
-	return `${startString}${DIVIDER_STRING}${endString}`;
+	return `${start.toLocaleDateString("en-US", opts)}${DIVIDER_STRING}${end.toLocaleDateString("en-US", opts)}`;
 };
 //#endregion
 //#region src/private/components/RangeSelectorInput/ErrorMessages.tsx
@@ -9512,8 +9495,7 @@ const getNextValue = ({ event, currentSelection, keyCount, valueParts, selection
 	if (isANum(event)) {
 		event.preventDefault();
 		const nextPotentialParts = applyNumKey(valueParts, id, type, event.key, keyCount);
-		const validatedParts = validateDays(nextPotentialParts);
-		nextValue = datePartsToString(validatedParts);
+		nextValue = datePartsToString(validateDays(nextPotentialParts));
 		nextKeyCount += 1;
 		shouldApply = selectionLength === nextKeyCount;
 	}
@@ -9521,8 +9503,7 @@ const getNextValue = ({ event, currentSelection, keyCount, valueParts, selection
 		event.preventDefault();
 		const diff = event.key === "ArrowUp" ? 1 : -1;
 		const nextPotentialParts = applyUpDownArrow(valueParts, id, diff);
-		const validatedParts = validateDays(nextPotentialParts);
-		nextValue = datePartsToString(validatedParts);
+		nextValue = datePartsToString(validateDays(nextPotentialParts));
 		nextKeyCount = 0;
 		shouldApply = true;
 	}
@@ -9688,7 +9669,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`