@wistia/vhs 4.0.0-beta.aac4187d.4ad4f67 → 4.0.0-beta.bf1fe785.cd2d6ec

package/dist/index.d.mts

@@ -2,7 +2,7 @@ import * as styled_components from 'styled-components';
 import { css, DefaultTheme } from 'styled-components';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { JSX, ReactNode, ComponentPropsWithoutRef, Dispatch, SetStateAction, RefObject, MutableRefObject, MouseEvent, ComponentPropsWithRef, ChangeEvent, ElementType, FocusEvent, HTMLInputTypeAttribute, KeyboardEvent as KeyboardEvent$1, ReactElement, ComponentType } from 'react';
+import { JSX, ReactNode, ComponentPropsWithoutRef, Dispatch, SetStateAction, RefObject, MutableRefObject, MouseEvent, ComponentPropsWithRef, ChangeEvent, ElementType, FocusEvent, HTMLInputTypeAttribute, KeyboardEvent as KeyboardEvent$1, ReactElement, ComponentType, PropsWithChildren } from 'react';
 import { FormikProps, FormikHelpers, FormikErrors, Field } from 'formik';
 export { useFormikContext } from 'formik';
 import { DropdownMenuProps, DropdownMenuContentProps, DropdownMenuItemProps, DropdownMenuCheckboxItemProps, DropdownMenuRadioItemProps } from '@radix-ui/react-dropdown-menu';
@@ -547,7 +547,7 @@ type Rect = {
     x: number;
     y: number;
 };
-declare const useElementObserver: <T extends HTMLElement>() => [RefObject<T>, Rect];
+declare const useElementObserver: <T extends HTMLElement>() => [RefObject<T | null>, Rect];
 
 type AddEventListenerType = (type: string, listener: (evt: Event) => void, options?: AddEventListenerOptions | boolean) => void;
 type RemoveEventListenerType = (type: string, listener: (evt: Event) => void, options?: AddEventListenerOptions | boolean) => void;
@@ -555,7 +555,7 @@ declare const useEvent: <T extends Event>(eventName: Parameters<AddEventListener
 
 type UseFocusTrapOptions = {
     disableAriaHider?: boolean;
-    focusSelector?: HTMLElement | RefObject<HTMLElement> | string | null | undefined;
+    focusSelector?: HTMLElement | RefObject<HTMLElement | null> | string | null | undefined;
 };
 declare const useFocusTrap: (active?: boolean, options?: UseFocusTrapOptions) => (node: HTMLElement | null | undefined) => void;
 
@@ -2532,7 +2532,7 @@ type ModalProps = ComponentPropsWithoutRef<'div'> & {
     /**
      * Ref to the element that should receive focus when the modal opens
      */
-    initialFocusRef?: RefObject<HTMLElement>;
+    initialFocusRef?: RefObject<HTMLElement | null>;
     /**
      * Whether or not the modal is open, and should be rendered
      */
@@ -3064,6 +3064,23 @@ declare const Slider: {
     displayName: string;
 };
 
+type StackProps<T extends ElementType> = ComponentPropsWithoutRef<T> & PropsWithChildren & {
+    /**
+     * The gap between each item in the stack. Should be one of the spacing values from the theme
+     */
+    gap?: keyof DefaultTheme['spacing'];
+    /**
+     * Vertical is equivalent to `flex-direction: column;`, horizontal is equivalent to `flex-direction: row;`.
+     * The default behavior is `vertical`.
+     */
+    direction?: 'horizontal' | 'vertical';
+    /**
+     * The element (e.g. div, span, p) or component to render as the root element.
+     */
+    renderAs?: T | 'div';
+};
+declare const Stack: react.ForwardRefExoticComponent<Omit<StackProps<ElementType>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+
 type SwitchProps = Omit<ComponentPropsWithoutRef<'button'>, 'onChange'> & {
     /**
      * Allows user to override default "on" color
@@ -3465,4 +3482,4 @@ declare const WistiaLogo: {
     displayName: string;
 };
 
-export { ActionModal, type ActionModalProps, Avatar, type AvatarInstanceType, type AvatarProps, Backdrop, type BackdropProps, BackgroundImage, type BackgroundImageProps, Badge, type BadgeColorScheme, type BadgeProps, Banner, type BannerProps, Box, type BoxProps, Button, ButtonGroup, type ButtonGroupProps, ButtonLink, type ButtonLinkProps, type ButtonProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, CheckboxMenuItem, type CheckboxMenuItemProps, type CheckboxProps, ClickArea, type ClickAreaProps, CloseButton, type CloseButtonProps, CollapsibleGroup, type CollapsibleGroupProps, Divider, type DividerProps, Ellipsis, type EllipsisProps, FileSelect, type FileSelectProps, Form, FormButtons, type FormButtonsProps, FormField, FormFieldError, type FormFieldErrorProps, type FormFieldProps, FormGlobalError, type FormProps, type FormState, FullScreenModal, type FullScreenModalProps, Icon, IconButton, type IconButtonProps, type IconNameType, Image, type ImageProps, Input, type InputProps, type KeyboardKeys, KeyboardShortcut, Label, LabelDescription, type LabelDescriptionProps, type LabelProps, Link, LinkButton, type LinkButtonProps, type LinkProps, List, ListItem, type ListItemProps, type ListProps, Menu, MenuButton, type MenuButtonProps, MenuItem, type MenuItemProps, MenuLabel, type MenuProps, Modal, ModalBase, type ModalBaseContentProps, ModalBody, ModalCloseButton, type ModalCloseButtonProps, ModalFooter, ModalHeader, type ModalProps, type NodeElementObject, type OnBeforeHideInterface, type OptionsType, Paper, type PaperProps, ProgressBar, type ProgressBarProps, Radio, RadioGroup, type RadioGroupProps, RadioMenuItem, type RadioMenuItemProps, type RadioProps, RangeSelector, type RangeSelectorProps, RichTextEditor, type RichTextEditorProps, ScreenReaderOnly, type ScreenReaderOnlyProps, Select, type SelectProps, Slider, type SliderProps, SubMenu, Switch, type SwitchProps, Text, type TextProps, Thumbnail, ThumbnailCollage, type ThumbnailCollageProps, type ThumbnailProps, Toast, type ToastProps, ToastProvider, type ToastVariants, Tooltip, type TooltipProps, Truncate, type TruncateProps, VHSProvider, type VHSProviderProps, type VHSTheme, WistiaLogo, type WistiaLogoProps, type WrapperProviderLinkType, copyToClipboard, datetimeHelpers, ellipsisFlexParentStyle, ellipsisStyle, getBackgroundGradient, getSemiRandomBackgroundGradient, iconSizeMap, mq, objectHelpers, rteDeserializeHTML, rteFormatTypes, rteSerializeToHTML, screenReaderOnlyStyle, stringHelpers, useBoolean, useClipboard, useElementObserver, useEvent, useFocusTrap, useForceUpdate, useIsHovered, useKey, useKeyPress, useKeyPressOnce, useLocalStorage, useMergedRefs, useMq, useOnClickOutside, usePreventScroll, usePreviousValue, useTheme, useThemeColor, useToast, useWindowSize };
+export { ActionModal, type ActionModalProps, Avatar, type AvatarInstanceType, type AvatarProps, Backdrop, type BackdropProps, BackgroundImage, type BackgroundImageProps, Badge, type BadgeColorScheme, type BadgeProps, Banner, type BannerProps, Box, type BoxProps, Button, ButtonGroup, type ButtonGroupProps, ButtonLink, type ButtonLinkProps, type ButtonProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, CheckboxMenuItem, type CheckboxMenuItemProps, type CheckboxProps, ClickArea, type ClickAreaProps, CloseButton, type CloseButtonProps, CollapsibleGroup, type CollapsibleGroupProps, Divider, type DividerProps, Ellipsis, type EllipsisProps, FileSelect, type FileSelectProps, Form, FormButtons, type FormButtonsProps, FormField, FormFieldError, type FormFieldErrorProps, type FormFieldProps, FormGlobalError, type FormProps, type FormState, FullScreenModal, type FullScreenModalProps, Icon, IconButton, type IconButtonProps, type IconNameType, Image, type ImageProps, Input, type InputProps, type KeyboardKeys, KeyboardShortcut, Label, LabelDescription, type LabelDescriptionProps, type LabelProps, Link, LinkButton, type LinkButtonProps, type LinkProps, List, ListItem, type ListItemProps, type ListProps, Menu, MenuButton, type MenuButtonProps, MenuItem, type MenuItemProps, MenuLabel, type MenuProps, Modal, ModalBase, type ModalBaseContentProps, ModalBody, ModalCloseButton, type ModalCloseButtonProps, ModalFooter, ModalHeader, type ModalProps, type NodeElementObject, type OnBeforeHideInterface, type OptionsType, Paper, type PaperProps, ProgressBar, type ProgressBarProps, Radio, RadioGroup, type RadioGroupProps, RadioMenuItem, type RadioMenuItemProps, type RadioProps, RangeSelector, type RangeSelectorProps, RichTextEditor, type RichTextEditorProps, ScreenReaderOnly, type ScreenReaderOnlyProps, Select, type SelectProps, Slider, type SliderProps, Stack, type StackProps, SubMenu, Switch, type SwitchProps, Text, type TextProps, Thumbnail, ThumbnailCollage, type ThumbnailCollageProps, type ThumbnailProps, Toast, type ToastProps, ToastProvider, type ToastVariants, Tooltip, type TooltipProps, Truncate, type TruncateProps, VHSProvider, type VHSProviderProps, type VHSTheme, WistiaLogo, type WistiaLogoProps, type WrapperProviderLinkType, copyToClipboard, datetimeHelpers, ellipsisFlexParentStyle, ellipsisStyle, getBackgroundGradient, getSemiRandomBackgroundGradient, iconSizeMap, mq, objectHelpers, rteDeserializeHTML, rteFormatTypes, rteSerializeToHTML, screenReaderOnlyStyle, stringHelpers, useBoolean, useClipboard, useElementObserver, useEvent, useFocusTrap, useForceUpdate, useIsHovered, useKey, useKeyPress, useKeyPressOnce, useLocalStorage, useMergedRefs, useMq, useOnClickOutside, usePreventScroll, usePreviousValue, useTheme, useThemeColor, useToast, useWindowSize };

package/dist/index.d.ts

@@ -2,7 +2,7 @@ import * as styled_components from 'styled-components';
 import { css, DefaultTheme } from 'styled-components';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as react from 'react';
-import { JSX, ReactNode, ComponentPropsWithoutRef, Dispatch, SetStateAction, RefObject, MutableRefObject, MouseEvent, ComponentPropsWithRef, ChangeEvent, ElementType, FocusEvent, HTMLInputTypeAttribute, KeyboardEvent as KeyboardEvent$1, ReactElement, ComponentType } from 'react';
+import { JSX, ReactNode, ComponentPropsWithoutRef, Dispatch, SetStateAction, RefObject, MutableRefObject, MouseEvent, ComponentPropsWithRef, ChangeEvent, ElementType, FocusEvent, HTMLInputTypeAttribute, KeyboardEvent as KeyboardEvent$1, ReactElement, ComponentType, PropsWithChildren } from 'react';
 import { FormikProps, FormikHelpers, FormikErrors, Field } from 'formik';
 export { useFormikContext } from 'formik';
 import { DropdownMenuProps, DropdownMenuContentProps, DropdownMenuItemProps, DropdownMenuCheckboxItemProps, DropdownMenuRadioItemProps } from '@radix-ui/react-dropdown-menu';
@@ -547,7 +547,7 @@ type Rect = {
     x: number;
     y: number;
 };
-declare const useElementObserver: <T extends HTMLElement>() => [RefObject<T>, Rect];
+declare const useElementObserver: <T extends HTMLElement>() => [RefObject<T | null>, Rect];
 
 type AddEventListenerType = (type: string, listener: (evt: Event) => void, options?: AddEventListenerOptions | boolean) => void;
 type RemoveEventListenerType = (type: string, listener: (evt: Event) => void, options?: AddEventListenerOptions | boolean) => void;
@@ -555,7 +555,7 @@ declare const useEvent: <T extends Event>(eventName: Parameters<AddEventListener
 
 type UseFocusTrapOptions = {
     disableAriaHider?: boolean;
-    focusSelector?: HTMLElement | RefObject<HTMLElement> | string | null | undefined;
+    focusSelector?: HTMLElement | RefObject<HTMLElement | null> | string | null | undefined;
 };
 declare const useFocusTrap: (active?: boolean, options?: UseFocusTrapOptions) => (node: HTMLElement | null | undefined) => void;
 
@@ -2532,7 +2532,7 @@ type ModalProps = ComponentPropsWithoutRef<'div'> & {
     /**
      * Ref to the element that should receive focus when the modal opens
      */
-    initialFocusRef?: RefObject<HTMLElement>;
+    initialFocusRef?: RefObject<HTMLElement | null>;
     /**
      * Whether or not the modal is open, and should be rendered
      */
@@ -3064,6 +3064,23 @@ declare const Slider: {
     displayName: string;
 };
 
+type StackProps<T extends ElementType> = ComponentPropsWithoutRef<T> & PropsWithChildren & {
+    /**
+     * The gap between each item in the stack. Should be one of the spacing values from the theme
+     */
+    gap?: keyof DefaultTheme['spacing'];
+    /**
+     * Vertical is equivalent to `flex-direction: column;`, horizontal is equivalent to `flex-direction: row;`.
+     * The default behavior is `vertical`.
+     */
+    direction?: 'horizontal' | 'vertical';
+    /**
+     * The element (e.g. div, span, p) or component to render as the root element.
+     */
+    renderAs?: T | 'div';
+};
+declare const Stack: react.ForwardRefExoticComponent<Omit<StackProps<ElementType>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+
 type SwitchProps = Omit<ComponentPropsWithoutRef<'button'>, 'onChange'> & {
     /**
      * Allows user to override default "on" color
@@ -3465,4 +3482,4 @@ declare const WistiaLogo: {
     displayName: string;
 };
 
-export { ActionModal, type ActionModalProps, Avatar, type AvatarInstanceType, type AvatarProps, Backdrop, type BackdropProps, BackgroundImage, type BackgroundImageProps, Badge, type BadgeColorScheme, type BadgeProps, Banner, type BannerProps, Box, type BoxProps, Button, ButtonGroup, type ButtonGroupProps, ButtonLink, type ButtonLinkProps, type ButtonProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, CheckboxMenuItem, type CheckboxMenuItemProps, type CheckboxProps, ClickArea, type ClickAreaProps, CloseButton, type CloseButtonProps, CollapsibleGroup, type CollapsibleGroupProps, Divider, type DividerProps, Ellipsis, type EllipsisProps, FileSelect, type FileSelectProps, Form, FormButtons, type FormButtonsProps, FormField, FormFieldError, type FormFieldErrorProps, type FormFieldProps, FormGlobalError, type FormProps, type FormState, FullScreenModal, type FullScreenModalProps, Icon, IconButton, type IconButtonProps, type IconNameType, Image, type ImageProps, Input, type InputProps, type KeyboardKeys, KeyboardShortcut, Label, LabelDescription, type LabelDescriptionProps, type LabelProps, Link, LinkButton, type LinkButtonProps, type LinkProps, List, ListItem, type ListItemProps, type ListProps, Menu, MenuButton, type MenuButtonProps, MenuItem, type MenuItemProps, MenuLabel, type MenuProps, Modal, ModalBase, type ModalBaseContentProps, ModalBody, ModalCloseButton, type ModalCloseButtonProps, ModalFooter, ModalHeader, type ModalProps, type NodeElementObject, type OnBeforeHideInterface, type OptionsType, Paper, type PaperProps, ProgressBar, type ProgressBarProps, Radio, RadioGroup, type RadioGroupProps, RadioMenuItem, type RadioMenuItemProps, type RadioProps, RangeSelector, type RangeSelectorProps, RichTextEditor, type RichTextEditorProps, ScreenReaderOnly, type ScreenReaderOnlyProps, Select, type SelectProps, Slider, type SliderProps, SubMenu, Switch, type SwitchProps, Text, type TextProps, Thumbnail, ThumbnailCollage, type ThumbnailCollageProps, type ThumbnailProps, Toast, type ToastProps, ToastProvider, type ToastVariants, Tooltip, type TooltipProps, Truncate, type TruncateProps, VHSProvider, type VHSProviderProps, type VHSTheme, WistiaLogo, type WistiaLogoProps, type WrapperProviderLinkType, copyToClipboard, datetimeHelpers, ellipsisFlexParentStyle, ellipsisStyle, getBackgroundGradient, getSemiRandomBackgroundGradient, iconSizeMap, mq, objectHelpers, rteDeserializeHTML, rteFormatTypes, rteSerializeToHTML, screenReaderOnlyStyle, stringHelpers, useBoolean, useClipboard, useElementObserver, useEvent, useFocusTrap, useForceUpdate, useIsHovered, useKey, useKeyPress, useKeyPressOnce, useLocalStorage, useMergedRefs, useMq, useOnClickOutside, usePreventScroll, usePreviousValue, useTheme, useThemeColor, useToast, useWindowSize };
+export { ActionModal, type ActionModalProps, Avatar, type AvatarInstanceType, type AvatarProps, Backdrop, type BackdropProps, BackgroundImage, type BackgroundImageProps, Badge, type BadgeColorScheme, type BadgeProps, Banner, type BannerProps, Box, type BoxProps, Button, ButtonGroup, type ButtonGroupProps, ButtonLink, type ButtonLinkProps, type ButtonProps, Checkbox, CheckboxGroup, type CheckboxGroupProps, CheckboxMenuItem, type CheckboxMenuItemProps, type CheckboxProps, ClickArea, type ClickAreaProps, CloseButton, type CloseButtonProps, CollapsibleGroup, type CollapsibleGroupProps, Divider, type DividerProps, Ellipsis, type EllipsisProps, FileSelect, type FileSelectProps, Form, FormButtons, type FormButtonsProps, FormField, FormFieldError, type FormFieldErrorProps, type FormFieldProps, FormGlobalError, type FormProps, type FormState, FullScreenModal, type FullScreenModalProps, Icon, IconButton, type IconButtonProps, type IconNameType, Image, type ImageProps, Input, type InputProps, type KeyboardKeys, KeyboardShortcut, Label, LabelDescription, type LabelDescriptionProps, type LabelProps, Link, LinkButton, type LinkButtonProps, type LinkProps, List, ListItem, type ListItemProps, type ListProps, Menu, MenuButton, type MenuButtonProps, MenuItem, type MenuItemProps, MenuLabel, type MenuProps, Modal, ModalBase, type ModalBaseContentProps, ModalBody, ModalCloseButton, type ModalCloseButtonProps, ModalFooter, ModalHeader, type ModalProps, type NodeElementObject, type OnBeforeHideInterface, type OptionsType, Paper, type PaperProps, ProgressBar, type ProgressBarProps, Radio, RadioGroup, type RadioGroupProps, RadioMenuItem, type RadioMenuItemProps, type RadioProps, RangeSelector, type RangeSelectorProps, RichTextEditor, type RichTextEditorProps, ScreenReaderOnly, type ScreenReaderOnlyProps, Select, type SelectProps, Slider, type SliderProps, Stack, type StackProps, SubMenu, Switch, type SwitchProps, Text, type TextProps, Thumbnail, ThumbnailCollage, type ThumbnailCollageProps, type ThumbnailProps, Toast, type ToastProps, ToastProvider, type ToastVariants, Tooltip, type TooltipProps, Truncate, type TruncateProps, VHSProvider, type VHSProviderProps, type VHSTheme, WistiaLogo, type WistiaLogoProps, type WrapperProviderLinkType, copyToClipboard, datetimeHelpers, ellipsisFlexParentStyle, ellipsisStyle, getBackgroundGradient, getSemiRandomBackgroundGradient, iconSizeMap, mq, objectHelpers, rteDeserializeHTML, rteFormatTypes, rteSerializeToHTML, screenReaderOnlyStyle, stringHelpers, useBoolean, useClipboard, useElementObserver, useEvent, useFocusTrap, useForceUpdate, useIsHovered, useKey, useKeyPress, useKeyPressOnce, useLocalStorage, useMergedRefs, useMq, useOnClickOutside, usePreventScroll, usePreviousValue, useTheme, useThemeColor, useToast, useWindowSize };

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/vhs v4.0.0-beta.aac4187d.4ad4f67
+ * @license @wistia/vhs v4.0.0-beta.bf1fe785.cd2d6ec
  *
  * Copyright (c) 2021-2025, Wistia, Inc. and its affiliates.
  *
@@ -3937,7 +3937,7 @@ import { useCallback as useCallback5 } from "react";
 import { useEffect as useEffect2, useRef as useRef2, useState as useState5 } from "react";
 var useTimedToggle = (initialValue) => {
   const [value, setValue] = useState5(false);
-  const timeoutRef = useRef2();
+  const timeoutRef = useRef2(void 0);
   const initialValueRef = useRef2(initialValue);
   const toggleValue = (timeout2) => {
     clearTimeout(timeoutRef.current);
@@ -4010,8 +4010,8 @@ var isEventTargetSupported = (eventTarget) => (
   Boolean(typeof eventTarget === "object" && eventTarget?.addEventListener)
 );
 var useEvent = (eventName, eventHandler, eventTarget = window, eventOptions = {}) => {
-  const savedEventHandler = useRef4();
-  const savedEventOptions = useRef4();
+  const savedEventHandler = useRef4(void 0);
+  const savedEventOptions = useRef4(void 0);
   useEffect3(() => {
     savedEventHandler.current = eventHandler;
   }, [eventHandler]);
@@ -4448,7 +4448,7 @@ var usePreventScroll = (locked) => {
 // src/hooks/usePreviousValue/usePreviousValue.ts
 import { useEffect as useEffect7, useRef as useRef7 } from "react";
 var usePreviousValue = (value) => {
-  const ref = useRef7();
+  const ref = useRef7(void 0);
   useEffect7(() => {
     ref.current = value;
   });
@@ -4545,7 +4545,7 @@ var ModalBaseContent = ({
   const wasJustShown = usePreviousValue(isShown);
   const hide = () => setIsShownAttempted(false);
   const show = useCallback8(() => setIsShownAttempted(true), []);
-  const toggleButtonRef = useRef8();
+  const toggleButtonRef = useRef8(void 0);
   const modalEl = document.createElement("div");
   modalEl.classList.add("Modal");
   if (isNotUndefined2(className)) {
@@ -7555,7 +7555,7 @@ import { useEffect as useEffect13 } from "react";
 import { useCallback as useCallback10, useEffect as useEffect12, useRef as useRef10 } from "react";
 var useTimeoutFunc = (func, timeout2 = 0) => {
   const readyRef = useRef10(false);
-  const timeoutRef = useRef10();
+  const timeoutRef = useRef10(void 0);
   const callbackRef = useRef10(func);
   const isReady = useCallback10(() => readyRef.current, []);
   const set = useCallback10(() => {
@@ -11307,7 +11307,7 @@ var Menu2 = forwardRef16(
     onClose,
     ...otherProps
   }, ref) => {
-    const menuRef = useRef12();
+    const menuRef = useRef12(void 0);
     const onClickOutsideFn = isNotNil32(onClickOutside) ? onClickOutside : () => {
     };
     useOnClickOutside(menuRef, onClickOutsideFn);
@@ -13413,10 +13413,39 @@ var Slider = ({
 };
 Slider.displayName = "Slider_VHS";
 
-// src/components/Switch/Switch.tsx
-import { styled as styled68, css as css29 } from "styled-components";
+// src/components/Stack/Stack.tsx
+import { forwardRef as forwardRef18 } from "react";
+import { styled as styled68 } from "styled-components";
 import { jsx as jsx210 } from "react/jsx-runtime";
-var SwitchComponent = styled68.button`
+var StyledStack = styled68.div`
+  display: flex;
+  flex-direction: ${({ $direction }) => $direction === "horizontal" ? "row" : "column"};
+  gap: ${({ $gap, theme: theme2 }) => theme2.spacing[$gap]};
+
+  > * {
+    flex: 1;
+  }
+`;
+var Stack = forwardRef18(
+  ({ renderAs = "div", direction = "vertical", gap = "space02", ...props }, ref) => {
+    return /* @__PURE__ */ jsx210(
+      StyledStack,
+      {
+        ...props,
+        ref,
+        $direction: direction,
+        $gap: gap,
+        as: renderAs
+      }
+    );
+  }
+);
+Stack.displayName = "Stack_VHS";
+
+// src/components/Switch/Switch.tsx
+import { styled as styled69, css as css29 } from "styled-components";
+import { jsx as jsx211 } from "react/jsx-runtime";
+var SwitchComponent = styled69.button`
   background-color: white;
   border-color: ${({ theme: theme2 }) => theme2.color.grey700};
   border-radius: 20px;
@@ -13481,7 +13510,7 @@ var ShowTextStyles = css29`
     }
   }
 `;
-var SwitchKnob = styled68.div`
+var SwitchKnob = styled69.div`
   background-color: ${({ theme: theme2 }) => theme2.color.grey700};
   border-radius: 50%;
   height: 12px;
@@ -13516,7 +13545,7 @@ var Switch = ({
       onChange(!isChecked);
     }
   };
-  return /* @__PURE__ */ jsx210(
+  return /* @__PURE__ */ jsx211(
     SwitchComponent,
     {
       $colorOverride: colorOverride,
@@ -13528,17 +13557,17 @@ var Switch = ({
       role: "switch",
       type: "button",
       ...otherProps,
-      children: /* @__PURE__ */ jsx210(SwitchKnob, { $hideText: hideText })
+      children: /* @__PURE__ */ jsx211(SwitchKnob, { $hideText: hideText })
     }
   );
 };
 Switch.displayName = "Switch_VHS";
 
 // src/components/Thumbnail/Thumbnail.tsx
-import { styled as styled69 } from "styled-components";
+import { styled as styled70 } from "styled-components";
 import { isNotNil as isNotNil43 } from "@wistia/type-guards";
-import { jsx as jsx211, jsxs as jsxs44 } from "react/jsx-runtime";
-var ThumbnailComponent = styled69.div`
+import { jsx as jsx212, jsxs as jsxs44 } from "react/jsx-runtime";
+var ThumbnailComponent = styled70.div`
   ${({ $gradientBackground }) => getBackgroundGradient($gradientBackground)};
   aspect-ratio: 16 / 9;
   background-image: ${({ $backgroundUrl }) => $backgroundUrl};
@@ -13550,17 +13579,17 @@ var ThumbnailComponent = styled69.div`
   position: relative;
   width: ${({ $width }) => $width};
 `;
-var WideThumbnailImage = styled69.img`
+var WideThumbnailImage = styled70.img`
   height: 100%;
   object-fit: cover;
   width: 100%;
 `;
-var SquareThumbnailImage = styled69.img`
+var SquareThumbnailImage = styled70.img`
   backdrop-filter: blur(8px);
   object-fit: contain;
   width: 100%;
 `;
-var BottomRightText = styled69.div`
+var BottomRightText = styled70.div`
   align-items: center;
   background-color: rgb(0 0 0 / 50%);
   border-radius: 2px;
@@ -13577,7 +13606,7 @@ var BottomRightText = styled69.div`
   right: 0;
   z-index: 1;
 `;
-var IconContainer3 = styled69.div`
+var IconContainer3 = styled70.div`
   align-self: center;
   aspect-ratio: 1;
   margin: 30%;
@@ -13590,7 +13619,7 @@ var IconContainer3 = styled69.div`
 `;
 var ThumbnailImage = ({ $thumbnailImageType, $thumbnailUrl }) => {
   if ($thumbnailImageType === "wide") {
-    return /* @__PURE__ */ jsx211(
+    return /* @__PURE__ */ jsx212(
       WideThumbnailImage,
       {
         alt: "",
@@ -13599,7 +13628,7 @@ var ThumbnailImage = ({ $thumbnailImageType, $thumbnailUrl }) => {
     );
   }
   if ($thumbnailImageType === "square") {
-    return /* @__PURE__ */ jsx211(
+    return /* @__PURE__ */ jsx212(
       SquareThumbnailImage,
       {
         alt: "",
@@ -13609,13 +13638,13 @@ var ThumbnailImage = ({ $thumbnailImageType, $thumbnailUrl }) => {
   }
   return null;
 };
-var Collage = styled69.div`
+var Collage = styled70.div`
   display: grid;
   grid-template-columns: auto auto;
   grid-template-rows: 50% 50%;
   width: 100%;
 `;
-var CollageImage = styled69.div`
+var CollageImage = styled70.div`
   background-image: ${({ $thumbnailUrl }) => `url(${$thumbnailUrl})`};
   background-position: center;
   background-size: cover;
@@ -13652,30 +13681,30 @@ var Thumbnail = ({
       ...otherProps,
       children: [
         isNotNil43(bottomRightText) ? /* @__PURE__ */ jsxs44(BottomRightText, { children: [
-          bottomRightIcon ? /* @__PURE__ */ jsx211(
+          bottomRightIcon ? /* @__PURE__ */ jsx212(
             Icon,
             {
               size: "sm",
               type: bottomRightIcon
             }
           ) : null,
-          /* @__PURE__ */ jsx211("span", { children: bottomRightText })
+          /* @__PURE__ */ jsx212("span", { children: bottomRightText })
         ] }) : null,
-        isNotNil43(icon) && /* @__PURE__ */ jsx211(IconContainer3, { children: /* @__PURE__ */ jsx211(
+        isNotNil43(icon) && /* @__PURE__ */ jsx212(IconContainer3, { children: /* @__PURE__ */ jsx212(
           Icon,
           {
             color: iconColor,
             type: icon
           }
         ) }),
-        !Array.isArray(thumbnailUrl) && isNotNil43(thumbnailImageType) && isNotNil43(thumbnailUrl) && /* @__PURE__ */ jsx211(
+        !Array.isArray(thumbnailUrl) && isNotNil43(thumbnailImageType) && isNotNil43(thumbnailUrl) && /* @__PURE__ */ jsx212(
           ThumbnailImage,
           {
             $thumbnailImageType: thumbnailImageType,
             $thumbnailUrl: thumbnailUrl
           }
         ),
-        Array.isArray(thumbnailUrl) && isNotNil43(thumbnailImageType) && isNotNil43(thumbnailUrl) && /* @__PURE__ */ jsx211(Collage, { "data-testid": "thumbnail-collage", children: thumbnailUrl.map((url, index) => /* @__PURE__ */ jsx211(
+        Array.isArray(thumbnailUrl) && isNotNil43(thumbnailImageType) && isNotNil43(thumbnailUrl) && /* @__PURE__ */ jsx212(Collage, { "data-testid": "thumbnail-collage", children: thumbnailUrl.map((url, index) => /* @__PURE__ */ jsx212(
           CollageImage,
           {
             $thumbnailUrl: url,
@@ -13691,10 +13720,10 @@ var Thumbnail = ({
 Thumbnail.displayName = "Thumbnail_VHS";
 
 // src/components/ThumbnailCollage/ThumbnailCollage.tsx
-import { styled as styled70 } from "styled-components";
+import { styled as styled71 } from "styled-components";
 import { isNotNil as isNotNil44 } from "@wistia/type-guards";
-import { jsx as jsx212 } from "react/jsx-runtime";
-var ThumbnailCollageContainer = styled70.div`
+import { jsx as jsx213 } from "react/jsx-runtime";
+var ThumbnailCollageContainer = styled71.div`
   display: grid;
   grid-template-columns: 3fr 2fr;
   grid-template-rows: 1fr 1fr;
@@ -13702,7 +13731,7 @@ var ThumbnailCollageContainer = styled70.div`
   grid-gap: ${({ theme: theme2 }) => theme2.spacing.space01};
   height: 100%;
 `;
-var CollageImage2 = styled70.div`
+var CollageImage2 = styled71.div`
   ${({ $thumbnailUrl }) => isNotNil44($thumbnailUrl) && `background-image: url(${$thumbnailUrl})`};
   ${({ $backgroundGradient }) => $backgroundGradient && getBackgroundGradient($backgroundGradient)};
   background-position: center;
@@ -13732,37 +13761,37 @@ var ThumbnailCollage = ({
   gradientBackground = "defaultMidOne",
   ...props
 }) => {
-  return /* @__PURE__ */ jsx212(
+  return /* @__PURE__ */ jsx213(
     ThumbnailCollageContainer,
     {
       role: "presentation",
       ...props,
-      children: thumbnailUrls.length ? thumbnailUrls.map((thumbnailUrl) => /* @__PURE__ */ jsx212(
+      children: thumbnailUrls.length ? thumbnailUrls.map((thumbnailUrl) => /* @__PURE__ */ jsx213(
         CollageImage2,
         {
           $thumbnailUrl: thumbnailUrl
         },
         thumbnailUrl
-      )) : /* @__PURE__ */ jsx212(CollageImage2, { $backgroundGradient: gradientBackground })
+      )) : /* @__PURE__ */ jsx213(CollageImage2, { $backgroundGradient: gradientBackground })
     }
   );
 };
 
 // src/components/WistiaLogo/WistiaLogo.tsx
-import { styled as styled71 } from "styled-components";
+import { styled as styled72 } from "styled-components";
 import { isNotNil as isNotNil45 } from "@wistia/type-guards";
-import { jsx as jsx213, jsxs as jsxs45 } from "react/jsx-runtime";
+import { jsx as jsx214, jsxs as jsxs45 } from "react/jsx-runtime";
 var renderBrandmark = (brandmarkColor, iconOnly) => {
   if (iconOnly) {
-    return /* @__PURE__ */ jsx213("g", { fill: brandmarkColor, children: /* @__PURE__ */ jsx213("path", { d: "M16.09 17.1h-5.2c-1.58 0-3.08.68-4.11 1.87L.21 26.53c4.78.25 9.78.25 13.3.25 18.31 0 20.89-11.27 20.89-16.55-1.59 1.93-6.06 6.87-18.32 6.87ZM32.14 0c-.08.92-.59 4.69-11.31 4.69-8.72 0-12.24 0-20.83-.17l6.44 7.4a6.657 6.657 0 0 0 4.96 2.3c2.13.03 5.05.06 5.53.06 11.01 0 17.19-5.05 17.19-9.89 0-2.01-.67-3.44-1.97-4.4Z" }) });
+    return /* @__PURE__ */ jsx214("g", { fill: brandmarkColor, children: /* @__PURE__ */ jsx214("path", { d: "M16.09 17.1h-5.2c-1.58 0-3.08.68-4.11 1.87L.21 26.53c4.78.25 9.78.25 13.3.25 18.31 0 20.89-11.27 20.89-16.55-1.59 1.93-6.06 6.87-18.32 6.87ZM32.14 0c-.08.92-.59 4.69-11.31 4.69-8.72 0-12.24 0-20.83-.17l6.44 7.4a6.657 6.657 0 0 0 4.96 2.3c2.13.03 5.05.06 5.53.06 11.01 0 17.19-5.05 17.19-9.89 0-2.01-.67-3.44-1.97-4.4Z" }) });
   }
-  return /* @__PURE__ */ jsx213("g", { fill: brandmarkColor, children: /* @__PURE__ */ jsx213("path", { d: "M16.09 21.37h-5.2c-1.58 0-3.08.68-4.11 1.87L.21 30.8c4.78.25 9.78.25 13.3.25 18.31 0 20.89-11.27 20.89-16.55-1.59 1.93-6.06 6.87-18.32 6.87Zm16.05-17.1c-.08.92-.59 4.69-11.31 4.69-8.72 0-12.24 0-20.83-.17l6.44 7.4a6.657 6.657 0 0 0 4.96 2.3c2.13.03 5.05.06 5.53.06 11.01 0 17.19-5.05 17.19-9.89 0-2.01-.67-3.44-1.97-4.4Z" }) });
+  return /* @__PURE__ */ jsx214("g", { fill: brandmarkColor, children: /* @__PURE__ */ jsx214("path", { d: "M16.09 21.37h-5.2c-1.58 0-3.08.68-4.11 1.87L.21 30.8c4.78.25 9.78.25 13.3.25 18.31 0 20.89-11.27 20.89-16.55-1.59 1.93-6.06 6.87-18.32 6.87Zm16.05-17.1c-.08.92-.59 4.69-11.31 4.69-8.72 0-12.24 0-20.83-.17l6.44 7.4a6.657 6.657 0 0 0 4.96 2.3c2.13.03 5.05.06 5.53.06 11.01 0 17.19-5.05 17.19-9.89 0-2.01-.67-3.44-1.97-4.4Z" }) });
 };
 var renderLogotype = (logotypeColor, iconOnly) => {
   if (iconOnly) {
     return null;
   }
-  return /* @__PURE__ */ jsx213("g", { fill: logotypeColor, children: /* @__PURE__ */ jsx213("path", { d: "M70.16 8.66v15.18c0 1.68-.35 3.09-1.05 4.23a6.612 6.612 0 0 1-2.85 2.54c-1.19.55-2.52.82-4.01.82s-2.8-.28-4.01-.85a6.655 6.655 0 0 1-3.11-2.96c-.08.15-.16.29-.24.42a6.552 6.552 0 0 1-2.87 2.54c-1.2.56-2.54.85-4.01.85s-2.8-.27-3.94-.82a6.214 6.214 0 0 1-2.71-2.52c-.67-1.14-1.01-2.56-1.02-4.25l-.22-15.18h7.34V22.3c0 .82.19 1.37.56 1.67.39.28.85.42 1.38.42s1.02-.15 1.45-.45c.43-.3.65-.85.65-1.65V8.65h7.3v13.64c0 .8.22 1.35.65 1.65.43.3.91.45 1.45.45s.99-.14 1.36-.42c.39-.3.58-.85.58-1.67V8.66h7.34Zm2.45 0v22.26h7.34V8.66h-7.34Zm5.67-1.87c.61-.3 1.08-.71 1.42-1.25.36-.55.53-1.19.53-1.94s-.18-1.34-.53-1.89A3.43 3.43 0 0 0 78.28.44c-.59-.3-1.25-.45-1.98-.45s-1.42.15-2.02.45c-.59.3-1.07.72-1.42 1.27-.36.55-.53 1.18-.53 1.89 0 1.1.38 1.97 1.13 2.63.76.65 1.71.98 2.85.98.73 0 1.39-.14 1.98-.42Zm8.86 1.96c-1.42.4-2.6 1.11-3.54 2.14-.93 1.02-1.4 2.4-1.4 4.12 0 1.11.17 2.09.51 2.94.36.85.82 1.62 1.38 2.34.22.28.55.65.98 1.11.37.4.64.72.8.96.18.24.27.47.27.69 0 .5-.4.87-1.2 1.09-.8.21-1.62.31-2.47.31-.1-.01-.22-.02-.33-.02l1.02 6.94c.42.07.92.11 1.51.11 1.9 0 3.6-.28 5.1-.85 1.5-.56 2.68-1.42 3.54-2.56.88-1.14 1.31-2.55 1.31-4.23 0-.68-.07-1.31-.22-1.87-.13-.58-.32-1.09-.56-1.54a6.64 6.64 0 0 0-.8-1.27c-.3-.37-.74-.82-1.34-1.36-.39-.33-.67-.59-.85-.8-.18-.22-.27-.45-.27-.67 0-.46.26-.79.78-.98.53-.19 1.17-.29 1.91-.29.25 0 .51.01.78.04l-.71-6.88a10.4 10.4 0 0 0-1.56-.11c-1.66 0-3.21.21-4.65.62Zm19.54 15.71c-.99 0-1.71-.23-2.14-.69-.42-.47-.62-1.18-.62-2.11v-6.57h4.21V8.66h-4.21V3.38l-7.34 1.85V24.1c0 2.45.47 4.29 1.4 5.52.95 1.22 2.45 1.83 4.49 1.83.95 0 1.86-.07 2.74-.22.88-.13 1.62-.34 2.25-.62l1.38-6.3c-.55.1-1.27.16-2.16.16Zm4.13-15.8v22.26h7.34V8.66h-7.34Zm5.67-1.87c.61-.3 1.08-.71 1.42-1.25.36-.55.53-1.19.53-1.94s-.18-1.34-.53-1.89a3.43 3.43 0 0 0-1.42-1.27c-.59-.3-1.25-.45-1.98-.45s-1.42.15-2.02.45c-.59.3-1.07.72-1.42 1.27-.36.55-.53 1.18-.53 1.89 0 1.1.38 1.97 1.14 2.63.76.65 1.71.98 2.85.98.73 0 1.39-.14 1.98-.42Zm27.51 1.87v22.26h-7.34v-2.28c-.41.43-.85.83-1.34 1.19-1.44 1.07-3.12 1.6-5.05 1.6s-3.61-.52-5.1-1.56c-1.48-1.05-2.63-2.47-3.45-4.25-.82-1.78-1.22-3.73-1.22-5.85s.41-4.07 1.22-5.83c.82-1.78 1.97-3.19 3.45-4.23 1.48-1.05 3.18-1.58 5.1-1.58s3.61.53 5.05 1.6c.48.36.93.75 1.34 1.19V8.66h7.34Zm-7.1 11.11c0-.8-.19-1.53-.56-2.18-.37-.67-.88-1.19-1.54-1.58-.64-.39-1.34-.58-2.09-.58s-1.45.19-2.09.58c-.64.39-1.15.91-1.54 1.58-.37.67-.56 1.39-.56 2.18s.19 1.51.56 2.18c.39.67.9 1.19 1.54 1.58.64.39 1.34.58 2.09.58s1.45-.19 2.09-.58c.65-.39 1.16-.91 1.54-1.56.37-.67.56-1.4.56-2.2Z" }) });
+  return /* @__PURE__ */ jsx214("g", { fill: logotypeColor, children: /* @__PURE__ */ jsx214("path", { d: "M70.16 8.66v15.18c0 1.68-.35 3.09-1.05 4.23a6.612 6.612 0 0 1-2.85 2.54c-1.19.55-2.52.82-4.01.82s-2.8-.28-4.01-.85a6.655 6.655 0 0 1-3.11-2.96c-.08.15-.16.29-.24.42a6.552 6.552 0 0 1-2.87 2.54c-1.2.56-2.54.85-4.01.85s-2.8-.27-3.94-.82a6.214 6.214 0 0 1-2.71-2.52c-.67-1.14-1.01-2.56-1.02-4.25l-.22-15.18h7.34V22.3c0 .82.19 1.37.56 1.67.39.28.85.42 1.38.42s1.02-.15 1.45-.45c.43-.3.65-.85.65-1.65V8.65h7.3v13.64c0 .8.22 1.35.65 1.65.43.3.91.45 1.45.45s.99-.14 1.36-.42c.39-.3.58-.85.58-1.67V8.66h7.34Zm2.45 0v22.26h7.34V8.66h-7.34Zm5.67-1.87c.61-.3 1.08-.71 1.42-1.25.36-.55.53-1.19.53-1.94s-.18-1.34-.53-1.89A3.43 3.43 0 0 0 78.28.44c-.59-.3-1.25-.45-1.98-.45s-1.42.15-2.02.45c-.59.3-1.07.72-1.42 1.27-.36.55-.53 1.18-.53 1.89 0 1.1.38 1.97 1.13 2.63.76.65 1.71.98 2.85.98.73 0 1.39-.14 1.98-.42Zm8.86 1.96c-1.42.4-2.6 1.11-3.54 2.14-.93 1.02-1.4 2.4-1.4 4.12 0 1.11.17 2.09.51 2.94.36.85.82 1.62 1.38 2.34.22.28.55.65.98 1.11.37.4.64.72.8.96.18.24.27.47.27.69 0 .5-.4.87-1.2 1.09-.8.21-1.62.31-2.47.31-.1-.01-.22-.02-.33-.02l1.02 6.94c.42.07.92.11 1.51.11 1.9 0 3.6-.28 5.1-.85 1.5-.56 2.68-1.42 3.54-2.56.88-1.14 1.31-2.55 1.31-4.23 0-.68-.07-1.31-.22-1.87-.13-.58-.32-1.09-.56-1.54a6.64 6.64 0 0 0-.8-1.27c-.3-.37-.74-.82-1.34-1.36-.39-.33-.67-.59-.85-.8-.18-.22-.27-.45-.27-.67 0-.46.26-.79.78-.98.53-.19 1.17-.29 1.91-.29.25 0 .51.01.78.04l-.71-6.88a10.4 10.4 0 0 0-1.56-.11c-1.66 0-3.21.21-4.65.62Zm19.54 15.71c-.99 0-1.71-.23-2.14-.69-.42-.47-.62-1.18-.62-2.11v-6.57h4.21V8.66h-4.21V3.38l-7.34 1.85V24.1c0 2.45.47 4.29 1.4 5.52.95 1.22 2.45 1.83 4.49 1.83.95 0 1.86-.07 2.74-.22.88-.13 1.62-.34 2.25-.62l1.38-6.3c-.55.1-1.27.16-2.16.16Zm4.13-15.8v22.26h7.34V8.66h-7.34Zm5.67-1.87c.61-.3 1.08-.71 1.42-1.25.36-.55.53-1.19.53-1.94s-.18-1.34-.53-1.89a3.43 3.43 0 0 0-1.42-1.27c-.59-.3-1.25-.45-1.98-.45s-1.42.15-2.02.45c-.59.3-1.07.72-1.42 1.27-.36.55-.53 1.18-.53 1.89 0 1.1.38 1.97 1.14 2.63.76.65 1.71.98 2.85.98.73 0 1.39-.14 1.98-.42Zm27.51 1.87v22.26h-7.34v-2.28c-.41.43-.85.83-1.34 1.19-1.44 1.07-3.12 1.6-5.05 1.6s-3.61-.52-5.1-1.56c-1.48-1.05-2.63-2.47-3.45-4.25-.82-1.78-1.22-3.73-1.22-5.85s.41-4.07 1.22-5.83c.82-1.78 1.97-3.19 3.45-4.23 1.48-1.05 3.18-1.58 5.1-1.58s3.61.53 5.05 1.6c.48.36.93.75 1.34 1.19V8.66h7.34Zm-7.1 11.11c0-.8-.19-1.53-.56-2.18-.37-.67-.88-1.19-1.54-1.58-.64-.39-1.34-.58-2.09-.58s-1.45.19-2.09.58c-.64.39-1.15.91-1.54 1.58-.37.67-.56 1.39-.56 2.18s.19 1.51.56 2.18c.39.67.9 1.19 1.54 1.58.64.39 1.34.58 2.09.58s1.45-.19 2.09-.58c.65-.39 1.16-.91 1.54-1.56.37-.67.56-1.4.56-2.2Z" }) });
 };
 var computedViewBox = (iconOnly) => {
   if (iconOnly) {
@@ -13770,7 +13799,7 @@ var computedViewBox = (iconOnly) => {
   }
   return "0 0 144 31.47";
 };
-var WistiaLogoComponent = styled71.svg`
+var WistiaLogoComponent = styled72.svg`
   height: ${({ height }) => `${height}px`};
 
   /* ensure it will always fit on mobile */
@@ -13822,14 +13851,14 @@ var WistiaLogo = ({
       xmlns: "http://www.w3.org/2000/svg",
       ...otherProps,
       children: [
-        /* @__PURE__ */ jsx213("title", { children: title }),
-        isNotNil45(description) ? /* @__PURE__ */ jsx213("desc", { children: description }) : null,
+        /* @__PURE__ */ jsx214("title", { children: title }),
+        isNotNil45(description) ? /* @__PURE__ */ jsx214("desc", { children: description }) : null,
         renderBrandmark(brandmarkColor, iconOnly),
         renderLogotype(logotypeColor, iconOnly)
       ]
     }
   );
-  return href !== void 0 ? /* @__PURE__ */ jsx213("a", { href, children: Logo }) : Logo;
+  return href !== void 0 ? /* @__PURE__ */ jsx214("a", { href, children: Logo }) : Logo;
 };
 WistiaLogo.displayName = "WistiaLogo_VHS";
 export {
@@ -13890,6 +13919,7 @@ export {
   ScreenReaderOnly,
   Select,
   Slider,
+  Stack,
   SubMenu,
   Switch,
   Text,