@wistia/vhs 4.0.0-beta.7034eb93.0e6bb17 → 4.0.0-beta.71b676f3.95c7760

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, Ref, ComponentClass, ComponentProps, 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';
@@ -1786,7 +1786,7 @@ type FormProps = {
     /**
      * Ref to access the form's state and API
      */
-    innerRef?: React.Ref<FormState>;
+    innerRef?: Ref<FormState>;
     /**
      * On-submit callback
      */
@@ -1886,7 +1886,7 @@ type FormFieldProps = Omit<ComponentPropsWithRef<'input'>, 'placeholder'> & {
     /**
      * A custom component that acts as a field and that needs access to Formik fields
      */
-    customComponent?: React.ComponentClass<CustomComponentClass> | ((arg?: React.ComponentProps<typeof Field>) => ReactNode) | ((arg?: Record<string, unknown>) => ReactNode) | undefined;
+    customComponent?: ComponentClass<CustomComponentClass> | ((arg?: ComponentProps<typeof Field>) => ReactNode) | ((arg?: Record<string, unknown>) => ReactNode) | undefined;
     /**
      * Should the radio buttons be displayed vertically as a column or horizontally as a row
      */
@@ -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, Ref, ComponentClass, ComponentProps, 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';
@@ -1786,7 +1786,7 @@ type FormProps = {
     /**
      * Ref to access the form's state and API
      */
-    innerRef?: React.Ref<FormState>;
+    innerRef?: Ref<FormState>;
     /**
      * On-submit callback
      */
@@ -1886,7 +1886,7 @@ type FormFieldProps = Omit<ComponentPropsWithRef<'input'>, 'placeholder'> & {
     /**
      * A custom component that acts as a field and that needs access to Formik fields
      */
-    customComponent?: React.ComponentClass<CustomComponentClass> | ((arg?: React.ComponentProps<typeof Field>) => ReactNode) | ((arg?: Record<string, unknown>) => ReactNode) | undefined;
+    customComponent?: ComponentClass<CustomComponentClass> | ((arg?: ComponentProps<typeof Field>) => ReactNode) | ((arg?: Record<string, unknown>) => ReactNode) | undefined;
     /**
      * Should the radio buttons be displayed vertically as a column or horizontally as a row
      */
@@ -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.7034eb93.0e6bb17
+ * @license @wistia/vhs v4.0.0-beta.71b676f3.95c7760
  *
  * Copyright (c) 2021-2025, Wistia, Inc. and its affiliates.
  *
@@ -3707,7 +3707,7 @@ var normalize = css3`
   [type='button'],
   [type='reset'],
   [type='submit'] {
-    appearance: button;
+    appearance: auto;
   }
 
   /**
@@ -3817,7 +3817,7 @@ var normalize = css3`
   */
 
   ::-webkit-file-upload-button {
-    appearance: button; /* 1 */
+    appearance: auto; /* 1 */
     font: inherit; /* 2 */
   }
 
@@ -4976,8 +4976,7 @@ import { isNotNil as isNotNil7 } from "@wistia/type-guards";
 import { jsx as jsx126 } from "react/jsx-runtime";
 var screenReaderOnlyStyle = css7`
   border: 0;
-  clip: rect(1px, 1px, 1px, 1px); /* deprecated but remains as fallback */
-  clip-path: inset(50%); /* modern but less support */
+  clip-path: inset(50%);
   height: 1px;
   overflow: hidden;
   padding: 0;
@@ -9232,7 +9231,7 @@ import { useSelected, useFocused } from "slate-react";
 import { styled as styled39, css as css21 } from "styled-components";
 import { jsx as jsx170, jsxs as jsxs28 } from "react/jsx-runtime";
 var Wrapper = styled39.span`
-  display: 'inline-block';
+  display: inline-block;
   user-select: none;
 `;
 var Image = styled39.img`
@@ -12633,7 +12632,7 @@ var setCursorPosition = (ref, start, end) => {
 var getSelectionFromMove = (selection, move, positions) => {
   const currentIndex = positions.findIndex((pos) => pos.start === selection[0]);
   let nextPosition = positions[currentIndex + move];
-  if (nextPosition && nextPosition.type === "skip") {
+  if (nextPosition?.type === "skip") {
     nextPosition = positions[currentIndex + move * 2];
   }
   if (nextPosition) {
@@ -13413,10 +13412,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 +13509,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 +13544,7 @@ var Switch = ({
       onChange(!isChecked);
     }
   };
-  return /* @__PURE__ */ jsx210(
+  return /* @__PURE__ */ jsx211(
     SwitchComponent,
     {
       $colorOverride: colorOverride,
@@ -13528,17 +13556,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 +13578,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 +13605,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 +13618,7 @@ var IconContainer3 = styled69.div`
 `;
 var ThumbnailImage = ({ $thumbnailImageType, $thumbnailUrl }) => {
   if ($thumbnailImageType === "wide") {
-    return /* @__PURE__ */ jsx211(
+    return /* @__PURE__ */ jsx212(
       WideThumbnailImage,
       {
         alt: "",
@@ -13599,7 +13627,7 @@ var ThumbnailImage = ({ $thumbnailImageType, $thumbnailUrl }) => {
     );
   }
   if ($thumbnailImageType === "square") {
-    return /* @__PURE__ */ jsx211(
+    return /* @__PURE__ */ jsx212(
       SquareThumbnailImage,
       {
         alt: "",
@@ -13609,13 +13637,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 +13680,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,18 +13719,18 @@ 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;
   width: 100%;
-  grid-gap: ${({ theme: theme2 }) => theme2.spacing.space01};
+  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 +13760,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 +13798,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 +13850,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 +13918,7 @@ export {
   ScreenReaderOnly,
   Select,
   Slider,
+  Stack,
   SubMenu,
   Switch,
   Text,