@wistia/vhs 6.0.1-beta.5a7fac1d.a9cc388 → 6.0.1-beta.64eebfb2.b2ca212

package/dist/index.js

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/vhs v6.0.1-beta.5a7fac1d.a9cc388
+ * @license @wistia/vhs v6.0.1-beta.64eebfb2.b2ca212
  *
  * Copyright (c) 2021-2026, Wistia, Inc. and its affiliates.
  *
@@ -1967,7 +1967,7 @@ const toastWidth = {
 	minWidth: "352px",
 	width: "400px"
 };
-const toastMobileWidth = { width: `calc(100% - ${toastPositionOffset * 2}px)` };
+const toastMobileWidth = { width: `calc(100% - 48px)` };
 const ToastAnimation = ({ children, in: inProp, renderInPlace }) => {
 	const { isSmAndUp } = useMq();
 	const { duration, zIndex } = useTheme();
@@ -2183,9 +2183,8 @@ const baseline = css`
   }
 `;
 //#endregion
-//#region src/css/GlobalStyle.tsx
-const GlobalStyle$1 = createGlobalStyle`
-  ${css`
+//#region src/css/normalize.tsx
+const normalize = css`
   /* normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
 
   /* Document
@@ -2541,7 +2540,11 @@ const GlobalStyle$1 = createGlobalStyle`
   [hidden] {
     display: none;
   }
-`}
+`;
+//#endregion
+//#region src/css/GlobalStyle.tsx
+const GlobalStyle$1 = createGlobalStyle`
+  ${normalize}
   ${baseline}
 `;
 //#endregion
@@ -2623,8 +2626,9 @@ const theme = {
 //#endregion
 //#region src/providers/VHSThemeProvider.tsx
 const VHSThemeProvider = ({ children, theme: overrideTheme }) => {
+	const theme$1 = merge(theme, overrideTheme);
 	return /* @__PURE__ */ jsx(ThemeProvider, {
-		theme: merge(theme, overrideTheme),
+		theme: theme$1,
 		children
 	});
 };
@@ -2743,7 +2747,7 @@ const tooltipBottomStyle = css`
     &::after {
       border-bottom-color: ${({ $backgroundColor }) => $backgroundColor};
       left: 50%;
-      top: -${ARROW_SIZE * 2}px;
+      top: -${16}px;
     }
   }
 `;
@@ -3308,7 +3312,8 @@ const ModalBaseContent = ({ className, initialShownState = false, isDismissible
 	] });
 };
 const ModalBase = (props) => {
-	if (!isEqual(useModalProviderContext(), {})) return /* @__PURE__ */ jsx(ModalBaseContent, { ...props });
+	const modalProviderContext = useModalProviderContext();
+	if (!isEqual(modalProviderContext, {})) return /* @__PURE__ */ jsx(ModalBaseContent, { ...props });
 	return /* @__PURE__ */ jsx(ModalProvider, { children: /* @__PURE__ */ jsx(ModalBaseContent, { ...props }) });
 };
 ModalBase.displayName = "ModalBase_VHS";
@@ -4714,8 +4719,9 @@ 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: Array.isArray(value) ? value.includes(option.name) : value,
+				checked: isChecked,
 				direction,
 				disabled,
 				onChange: (event) => isNotNil(onChange) ? onChange(event, option.name) : void 0,
@@ -5121,7 +5127,7 @@ const Divider = ({ colorOverride, height = 1, variant = "dashed", ...otherProps
 Divider.displayName = "Divider_VHS";
 //#endregion
 //#region src/components/FileSelect/FileSelect.tsx
-const defaultMaximumFileSize = 26 * 1024;
+const defaultMaximumFileSize = 26624;
 const FileSelectComponent = styled.label`
   display: inline-block;
   overflow: hidden;
@@ -5264,7 +5270,8 @@ const FormGlobalError = forwardRef((_, ref) => {
 	const { status, errors } = useFormikContext$1();
 	let errorsCount = Object.keys(errors).length;
 	if (isNotNil(status) && status["length"] > 0) errorsCount += 1;
-	if (coerceToBoolean(isNotNil(status) && !status["success"] || errorsCount)) return /* @__PURE__ */ jsxs(GlobalErrorsContainer, {
+	const showErrorContainer = isNotNil(status) && !status["success"] || errorsCount;
+	if (coerceToBoolean(showErrorContainer)) return /* @__PURE__ */ jsxs(GlobalErrorsContainer, {
 		ref,
 		children: [/* @__PURE__ */ jsx(ErrorsText, { children: errorsTitle(errorsCount) }), /* @__PURE__ */ jsx(FieldErrorsList, {
 			errors,
@@ -6796,7 +6803,8 @@ 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);
-	return jsx$1("element", ELEMENT_TAGS[nodeName](el), children);
+	const attrs = ELEMENT_TAGS[nodeName](el);
+	return jsx$1("element", attrs, children);
 };
 const createEditorTextElements = (children, el) => {
 	const { nodeName } = el;
@@ -6880,7 +6888,8 @@ 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(() => {
-		return withImages(withLinks(withHistory(withReact(createEditor()))));
+		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:
@@ -7067,7 +7076,7 @@ const SelectStyledComponent = styled.select`
 
     ${({ disabled }) => disabled && disabledStyle}
     ${({ $hasError }) => $hasError && errorStyle}
-  ${({ $forceState }) => $forceState === "focus" && focusStyle};
+    ${({ $forceState }) => $forceState === "focus" && focusStyle};
   `;
 //#endregion
 //#region src/components/Select/Select.tsx
@@ -7621,8 +7630,7 @@ List.displayName = "List_VHS";
 //#endregion
 //#region src/components/Menu/menuContentCss.ts
 const gutterWidth = "8px";
-const menuContentCss = css`
-  animation: ${keyframes`
+const open = keyframes`
   from {
     opacity: 0;
     transform: scale(.97) translateY(-8px);
@@ -7631,7 +7639,19 @@ const menuContentCss = css`
     opacity: 1;
     transform: scale(1);
   }
-`} ${({ theme }) => theme.duration.productive.moderate}
+`;
+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.easing.entrance.productive};
   background: white;
   border-radius: 4px;
@@ -7644,16 +7664,7 @@ const menuContentCss = css`
   z-index: ${({ theme }) => theme.zIndex.MenuComponent};
 
   &[data-state='closed'] {
-    animation: ${keyframes`
-  from {
-    opacity: 1;
-    transform: scale(1);
-  }
-  to {
-    opacity: 0;
-    transform: scale(.97) translateY(-8px);
-  }
-`} ${({ theme }) => theme.duration.productive.moderate}
+    animation: ${close} ${({ theme }) => theme.duration.productive.moderate}
       ${({ theme }) => theme.easing.exit.productive};
   }
 
@@ -8076,7 +8087,8 @@ 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);
-	useOnClickOutside(menuRef, isNotNil(onClickOutside) ? onClickOutside : () => {});
+	const onClickOutsideFn = isNotNil(onClickOutside) ? onClickOutside : () => {};
+	useOnClickOutside(menuRef, onClickOutsideFn);
 	const menuRefs = useMergedRefs([menuRef, ref]);
 	useEffect(() => {
 		if (onOpen) onOpen();
@@ -8451,7 +8463,7 @@ const createKeyPredicate = (keyFilter) => {
 };
 const useKey = (key, eventHandler, options = {}, dependencies = [key]) => {
 	const { eventName = "keydown", eventTarget, eventOptions } = options;
-	useEvent(eventName, useMemo(() => {
+	const memoizedEventHandler = useMemo(() => {
 		const predicate = createKeyPredicate(key);
 		return (handlerEvent) => {
 			if ([
@@ -8461,7 +8473,8 @@ const useKey = (key, eventHandler, options = {}, dependencies = [key]) => {
 			].includes(document.activeElement?.nodeName ?? "") || document.activeElement?.isContentEditable) return;
 			if (predicate(handlerEvent)) return eventHandler(handlerEvent);
 		};
-	}, dependencies), eventTarget, eventOptions);
+	}, dependencies);
+	useEvent(eventName, memoizedEventHandler, eventTarget, eventOptions);
 };
 //#endregion
 //#region src/private/hooks/useKeyPress/useKeyPress.ts
@@ -8760,10 +8773,11 @@ const daysOfWeek = [
 const daysInAWeek = 7;
 const hasDates = (week) => week[0] instanceof Date || week[6] instanceof Date;
 const daysOfMonth = (dateInMonth) => {
-	return eachDayOfInterval({
+	const interval = {
 		start: startOfMonth(startOfDay(dateInMonth)),
 		end: endOfMonth(startOfDay(dateInMonth))
-	});
+	};
+	return eachDayOfInterval(interval);
 };
 const makeEmptyWeek = () => Array.from({ length: daysInAWeek }, () => []);
 const monthLayout = (days) => {
@@ -8784,7 +8798,7 @@ const monthLayout = (days) => {
 const Month = styled.div`
   cursor: not-allowed;
   padding-top: ${({ theme }) => theme.spacing.space04};
-  width: ${dayDimension * daysInAWeek}px;
+  width: ${315}px;
 `;
 const MonthHeader = styled.div`
   display: flex;
@@ -9072,7 +9086,8 @@ 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 [displayDate, setDisplayDate] = useState(isNotNil(range.end) ? range.end : thisMonth);
+	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);
@@ -9281,7 +9296,9 @@ const rangeToString = ({ start, end }) => {
 		day: "2-digit",
 		year: "numeric"
 	};
-	return `${start.toLocaleDateString("en-US", opts)}${DIVIDER_STRING}${end.toLocaleDateString("en-US", opts)}`;
+	const startString = start.toLocaleDateString("en-US", opts);
+	const endString = end.toLocaleDateString("en-US", opts);
+	return `${startString}${DIVIDER_STRING}${endString}`;
 };
 //#endregion
 //#region src/private/components/RangeSelectorInput/ErrorMessages.tsx
@@ -9494,7 +9511,8 @@ const getNextValue = ({ event, currentSelection, keyCount, valueParts, selection
 	if (isANum(event)) {
 		event.preventDefault();
 		const nextPotentialParts = applyNumKey(valueParts, id, type, event.key, keyCount);
-		nextValue = datePartsToString(validateDays(nextPotentialParts));
+		const validatedParts = validateDays(nextPotentialParts);
+		nextValue = datePartsToString(validatedParts);
 		nextKeyCount += 1;
 		shouldApply = selectionLength === nextKeyCount;
 	}
@@ -9502,7 +9520,8 @@ const getNextValue = ({ event, currentSelection, keyCount, valueParts, selection
 		event.preventDefault();
 		const diff = event.key === "ArrowUp" ? 1 : -1;
 		const nextPotentialParts = applyUpDownArrow(valueParts, id, diff);
-		nextValue = datePartsToString(validateDays(nextPotentialParts));
+		const validatedParts = validateDays(nextPotentialParts);
+		nextValue = datePartsToString(validatedParts);
 		nextKeyCount = 0;
 		shouldApply = true;
 	}