@wistia/vhs 4.0.0-beta.35300ea4.c17e43f → 4.0.0-beta.7034eb93.0e6bb17
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs +42 -73
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.mts +2 -19
- package/dist/index.d.ts +2 -19
- package/dist/index.mjs +39 -69
- package/dist/index.mjs.map +1 -1
- package/package.json +5 -5
package/dist/index.d.mts
CHANGED
|
@@ -2,7 +2,7 @@ import * as styled_components from 'styled-components';
|
|
|
2
2
|
import { css, DefaultTheme } from 'styled-components';
|
|
3
3
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
4
4
|
import * as react from 'react';
|
|
5
|
-
import { JSX, ReactNode, ComponentPropsWithoutRef, Dispatch, SetStateAction, RefObject, MutableRefObject, MouseEvent, ComponentPropsWithRef, ChangeEvent, ElementType, FocusEvent, HTMLInputTypeAttribute, KeyboardEvent as KeyboardEvent$1, ReactElement, ComponentType
|
|
5
|
+
import { JSX, ReactNode, ComponentPropsWithoutRef, Dispatch, SetStateAction, RefObject, MutableRefObject, MouseEvent, ComponentPropsWithRef, ChangeEvent, ElementType, FocusEvent, HTMLInputTypeAttribute, KeyboardEvent as KeyboardEvent$1, ReactElement, ComponentType } from 'react';
|
|
6
6
|
import { FormikProps, FormikHelpers, FormikErrors, Field } from 'formik';
|
|
7
7
|
export { useFormikContext } from 'formik';
|
|
8
8
|
import { DropdownMenuProps, DropdownMenuContentProps, DropdownMenuItemProps, DropdownMenuCheckboxItemProps, DropdownMenuRadioItemProps } from '@radix-ui/react-dropdown-menu';
|
|
@@ -3064,23 +3064,6 @@ declare const Slider: {
|
|
|
3064
3064
|
displayName: string;
|
|
3065
3065
|
};
|
|
3066
3066
|
|
|
3067
|
-
type StackProps<T extends ElementType> = ComponentPropsWithoutRef<T> & PropsWithChildren & {
|
|
3068
|
-
/**
|
|
3069
|
-
* The gap between each item in the stack. Should be one of the spacing values from the theme
|
|
3070
|
-
*/
|
|
3071
|
-
gap?: keyof DefaultTheme['spacing'];
|
|
3072
|
-
/**
|
|
3073
|
-
* Vertical is equivalent to `flex-direction: column;`, horizontal is equivalent to `flex-direction: row;`.
|
|
3074
|
-
* The default behavior is `vertical`.
|
|
3075
|
-
*/
|
|
3076
|
-
direction?: 'horizontal' | 'vertical';
|
|
3077
|
-
/**
|
|
3078
|
-
* The element (e.g. div, span, p) or component to render as the root element.
|
|
3079
|
-
*/
|
|
3080
|
-
renderAs?: T | 'div';
|
|
3081
|
-
};
|
|
3082
|
-
declare const Stack: react.ForwardRefExoticComponent<Omit<StackProps<ElementType>, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
3083
|
-
|
|
3084
3067
|
type SwitchProps = Omit<ComponentPropsWithoutRef<'button'>, 'onChange'> & {
|
|
3085
3068
|
/**
|
|
3086
3069
|
* Allows user to override default "on" color
|
|
@@ -3482,4 +3465,4 @@ declare const WistiaLogo: {
|
|
|
3482
3465
|
displayName: string;
|
|
3483
3466
|
};
|
|
3484
3467
|
|
|
3485
|
-
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,
|
|
3468
|
+
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 };
|
package/dist/index.d.ts
CHANGED
|
@@ -2,7 +2,7 @@ import * as styled_components from 'styled-components';
|
|
|
2
2
|
import { css, DefaultTheme } from 'styled-components';
|
|
3
3
|
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
4
4
|
import * as react from 'react';
|
|
5
|
-
import { JSX, ReactNode, ComponentPropsWithoutRef, Dispatch, SetStateAction, RefObject, MutableRefObject, MouseEvent, ComponentPropsWithRef, ChangeEvent, ElementType, FocusEvent, HTMLInputTypeAttribute, KeyboardEvent as KeyboardEvent$1, ReactElement, ComponentType
|
|
5
|
+
import { JSX, ReactNode, ComponentPropsWithoutRef, Dispatch, SetStateAction, RefObject, MutableRefObject, MouseEvent, ComponentPropsWithRef, ChangeEvent, ElementType, FocusEvent, HTMLInputTypeAttribute, KeyboardEvent as KeyboardEvent$1, ReactElement, ComponentType } from 'react';
|
|
6
6
|
import { FormikProps, FormikHelpers, FormikErrors, Field } from 'formik';
|
|
7
7
|
export { useFormikContext } from 'formik';
|
|
8
8
|
import { DropdownMenuProps, DropdownMenuContentProps, DropdownMenuItemProps, DropdownMenuCheckboxItemProps, DropdownMenuRadioItemProps } from '@radix-ui/react-dropdown-menu';
|
|
@@ -3064,23 +3064,6 @@ declare const Slider: {
|
|
|
3064
3064
|
displayName: string;
|
|
3065
3065
|
};
|
|
3066
3066
|
|
|
3067
|
-
type StackProps<T extends ElementType> = ComponentPropsWithoutRef<T> & PropsWithChildren & {
|
|
3068
|
-
/**
|
|
3069
|
-
* The gap between each item in the stack. Should be one of the spacing values from the theme
|
|
3070
|
-
*/
|
|
3071
|
-
gap?: keyof DefaultTheme['spacing'];
|
|
3072
|
-
/**
|
|
3073
|
-
* Vertical is equivalent to `flex-direction: column;`, horizontal is equivalent to `flex-direction: row;`.
|
|
3074
|
-
* The default behavior is `vertical`.
|
|
3075
|
-
*/
|
|
3076
|
-
direction?: 'horizontal' | 'vertical';
|
|
3077
|
-
/**
|
|
3078
|
-
* The element (e.g. div, span, p) or component to render as the root element.
|
|
3079
|
-
*/
|
|
3080
|
-
renderAs?: T | 'div';
|
|
3081
|
-
};
|
|
3082
|
-
declare const Stack: react.ForwardRefExoticComponent<Omit<StackProps<ElementType>, "ref"> & react.RefAttributes<HTMLDivElement>>;
|
|
3083
|
-
|
|
3084
3067
|
type SwitchProps = Omit<ComponentPropsWithoutRef<'button'>, 'onChange'> & {
|
|
3085
3068
|
/**
|
|
3086
3069
|
* Allows user to override default "on" color
|
|
@@ -3482,4 +3465,4 @@ declare const WistiaLogo: {
|
|
|
3482
3465
|
displayName: string;
|
|
3483
3466
|
};
|
|
3484
3467
|
|
|
3485
|
-
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,
|
|
3468
|
+
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 };
|
package/dist/index.mjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
/*
|
|
3
|
-
* @license @wistia/vhs v4.0.0-beta.
|
|
3
|
+
* @license @wistia/vhs v4.0.0-beta.7034eb93.0e6bb17
|
|
4
4
|
*
|
|
5
5
|
* Copyright (c) 2021-2025, Wistia, Inc. and its affiliates.
|
|
6
6
|
*
|
|
@@ -13413,39 +13413,10 @@ var Slider = ({
|
|
|
13413
13413
|
};
|
|
13414
13414
|
Slider.displayName = "Slider_VHS";
|
|
13415
13415
|
|
|
13416
|
-
// src/components/Stack/Stack.tsx
|
|
13417
|
-
import { forwardRef as forwardRef18 } from "react";
|
|
13418
|
-
import { styled as styled68 } from "styled-components";
|
|
13419
|
-
import { jsx as jsx210 } from "react/jsx-runtime";
|
|
13420
|
-
var StyledStack = styled68.div`
|
|
13421
|
-
display: flex;
|
|
13422
|
-
flex-direction: ${({ $direction }) => $direction === "horizontal" ? "row" : "column"};
|
|
13423
|
-
gap: ${({ $gap, theme: theme2 }) => theme2.spacing[$gap]};
|
|
13424
|
-
|
|
13425
|
-
> * {
|
|
13426
|
-
flex: 1;
|
|
13427
|
-
}
|
|
13428
|
-
`;
|
|
13429
|
-
var Stack = forwardRef18(
|
|
13430
|
-
({ renderAs = "div", direction = "vertical", gap = "space02", ...props }, ref) => {
|
|
13431
|
-
return /* @__PURE__ */ jsx210(
|
|
13432
|
-
StyledStack,
|
|
13433
|
-
{
|
|
13434
|
-
...props,
|
|
13435
|
-
ref,
|
|
13436
|
-
$direction: direction,
|
|
13437
|
-
$gap: gap,
|
|
13438
|
-
as: renderAs
|
|
13439
|
-
}
|
|
13440
|
-
);
|
|
13441
|
-
}
|
|
13442
|
-
);
|
|
13443
|
-
Stack.displayName = "Stack_VHS";
|
|
13444
|
-
|
|
13445
13416
|
// src/components/Switch/Switch.tsx
|
|
13446
|
-
import { styled as
|
|
13447
|
-
import { jsx as
|
|
13448
|
-
var SwitchComponent =
|
|
13417
|
+
import { styled as styled68, css as css29 } from "styled-components";
|
|
13418
|
+
import { jsx as jsx210 } from "react/jsx-runtime";
|
|
13419
|
+
var SwitchComponent = styled68.button`
|
|
13449
13420
|
background-color: white;
|
|
13450
13421
|
border-color: ${({ theme: theme2 }) => theme2.color.grey700};
|
|
13451
13422
|
border-radius: 20px;
|
|
@@ -13510,7 +13481,7 @@ var ShowTextStyles = css29`
|
|
|
13510
13481
|
}
|
|
13511
13482
|
}
|
|
13512
13483
|
`;
|
|
13513
|
-
var SwitchKnob =
|
|
13484
|
+
var SwitchKnob = styled68.div`
|
|
13514
13485
|
background-color: ${({ theme: theme2 }) => theme2.color.grey700};
|
|
13515
13486
|
border-radius: 50%;
|
|
13516
13487
|
height: 12px;
|
|
@@ -13545,7 +13516,7 @@ var Switch = ({
|
|
|
13545
13516
|
onChange(!isChecked);
|
|
13546
13517
|
}
|
|
13547
13518
|
};
|
|
13548
|
-
return /* @__PURE__ */
|
|
13519
|
+
return /* @__PURE__ */ jsx210(
|
|
13549
13520
|
SwitchComponent,
|
|
13550
13521
|
{
|
|
13551
13522
|
$colorOverride: colorOverride,
|
|
@@ -13557,17 +13528,17 @@ var Switch = ({
|
|
|
13557
13528
|
role: "switch",
|
|
13558
13529
|
type: "button",
|
|
13559
13530
|
...otherProps,
|
|
13560
|
-
children: /* @__PURE__ */
|
|
13531
|
+
children: /* @__PURE__ */ jsx210(SwitchKnob, { $hideText: hideText })
|
|
13561
13532
|
}
|
|
13562
13533
|
);
|
|
13563
13534
|
};
|
|
13564
13535
|
Switch.displayName = "Switch_VHS";
|
|
13565
13536
|
|
|
13566
13537
|
// src/components/Thumbnail/Thumbnail.tsx
|
|
13567
|
-
import { styled as
|
|
13538
|
+
import { styled as styled69 } from "styled-components";
|
|
13568
13539
|
import { isNotNil as isNotNil43 } from "@wistia/type-guards";
|
|
13569
|
-
import { jsx as
|
|
13570
|
-
var ThumbnailComponent =
|
|
13540
|
+
import { jsx as jsx211, jsxs as jsxs44 } from "react/jsx-runtime";
|
|
13541
|
+
var ThumbnailComponent = styled69.div`
|
|
13571
13542
|
${({ $gradientBackground }) => getBackgroundGradient($gradientBackground)};
|
|
13572
13543
|
aspect-ratio: 16 / 9;
|
|
13573
13544
|
background-image: ${({ $backgroundUrl }) => $backgroundUrl};
|
|
@@ -13579,17 +13550,17 @@ var ThumbnailComponent = styled70.div`
|
|
|
13579
13550
|
position: relative;
|
|
13580
13551
|
width: ${({ $width }) => $width};
|
|
13581
13552
|
`;
|
|
13582
|
-
var WideThumbnailImage =
|
|
13553
|
+
var WideThumbnailImage = styled69.img`
|
|
13583
13554
|
height: 100%;
|
|
13584
13555
|
object-fit: cover;
|
|
13585
13556
|
width: 100%;
|
|
13586
13557
|
`;
|
|
13587
|
-
var SquareThumbnailImage =
|
|
13558
|
+
var SquareThumbnailImage = styled69.img`
|
|
13588
13559
|
backdrop-filter: blur(8px);
|
|
13589
13560
|
object-fit: contain;
|
|
13590
13561
|
width: 100%;
|
|
13591
13562
|
`;
|
|
13592
|
-
var BottomRightText =
|
|
13563
|
+
var BottomRightText = styled69.div`
|
|
13593
13564
|
align-items: center;
|
|
13594
13565
|
background-color: rgb(0 0 0 / 50%);
|
|
13595
13566
|
border-radius: 2px;
|
|
@@ -13606,7 +13577,7 @@ var BottomRightText = styled70.div`
|
|
|
13606
13577
|
right: 0;
|
|
13607
13578
|
z-index: 1;
|
|
13608
13579
|
`;
|
|
13609
|
-
var IconContainer3 =
|
|
13580
|
+
var IconContainer3 = styled69.div`
|
|
13610
13581
|
align-self: center;
|
|
13611
13582
|
aspect-ratio: 1;
|
|
13612
13583
|
margin: 30%;
|
|
@@ -13619,7 +13590,7 @@ var IconContainer3 = styled70.div`
|
|
|
13619
13590
|
`;
|
|
13620
13591
|
var ThumbnailImage = ({ $thumbnailImageType, $thumbnailUrl }) => {
|
|
13621
13592
|
if ($thumbnailImageType === "wide") {
|
|
13622
|
-
return /* @__PURE__ */
|
|
13593
|
+
return /* @__PURE__ */ jsx211(
|
|
13623
13594
|
WideThumbnailImage,
|
|
13624
13595
|
{
|
|
13625
13596
|
alt: "",
|
|
@@ -13628,7 +13599,7 @@ var ThumbnailImage = ({ $thumbnailImageType, $thumbnailUrl }) => {
|
|
|
13628
13599
|
);
|
|
13629
13600
|
}
|
|
13630
13601
|
if ($thumbnailImageType === "square") {
|
|
13631
|
-
return /* @__PURE__ */
|
|
13602
|
+
return /* @__PURE__ */ jsx211(
|
|
13632
13603
|
SquareThumbnailImage,
|
|
13633
13604
|
{
|
|
13634
13605
|
alt: "",
|
|
@@ -13638,13 +13609,13 @@ var ThumbnailImage = ({ $thumbnailImageType, $thumbnailUrl }) => {
|
|
|
13638
13609
|
}
|
|
13639
13610
|
return null;
|
|
13640
13611
|
};
|
|
13641
|
-
var Collage =
|
|
13612
|
+
var Collage = styled69.div`
|
|
13642
13613
|
display: grid;
|
|
13643
13614
|
grid-template-columns: auto auto;
|
|
13644
13615
|
grid-template-rows: 50% 50%;
|
|
13645
13616
|
width: 100%;
|
|
13646
13617
|
`;
|
|
13647
|
-
var CollageImage =
|
|
13618
|
+
var CollageImage = styled69.div`
|
|
13648
13619
|
background-image: ${({ $thumbnailUrl }) => `url(${$thumbnailUrl})`};
|
|
13649
13620
|
background-position: center;
|
|
13650
13621
|
background-size: cover;
|
|
@@ -13681,30 +13652,30 @@ var Thumbnail = ({
|
|
|
13681
13652
|
...otherProps,
|
|
13682
13653
|
children: [
|
|
13683
13654
|
isNotNil43(bottomRightText) ? /* @__PURE__ */ jsxs44(BottomRightText, { children: [
|
|
13684
|
-
bottomRightIcon ? /* @__PURE__ */
|
|
13655
|
+
bottomRightIcon ? /* @__PURE__ */ jsx211(
|
|
13685
13656
|
Icon,
|
|
13686
13657
|
{
|
|
13687
13658
|
size: "sm",
|
|
13688
13659
|
type: bottomRightIcon
|
|
13689
13660
|
}
|
|
13690
13661
|
) : null,
|
|
13691
|
-
/* @__PURE__ */
|
|
13662
|
+
/* @__PURE__ */ jsx211("span", { children: bottomRightText })
|
|
13692
13663
|
] }) : null,
|
|
13693
|
-
isNotNil43(icon) && /* @__PURE__ */
|
|
13664
|
+
isNotNil43(icon) && /* @__PURE__ */ jsx211(IconContainer3, { children: /* @__PURE__ */ jsx211(
|
|
13694
13665
|
Icon,
|
|
13695
13666
|
{
|
|
13696
13667
|
color: iconColor,
|
|
13697
13668
|
type: icon
|
|
13698
13669
|
}
|
|
13699
13670
|
) }),
|
|
13700
|
-
!Array.isArray(thumbnailUrl) && isNotNil43(thumbnailImageType) && isNotNil43(thumbnailUrl) && /* @__PURE__ */
|
|
13671
|
+
!Array.isArray(thumbnailUrl) && isNotNil43(thumbnailImageType) && isNotNil43(thumbnailUrl) && /* @__PURE__ */ jsx211(
|
|
13701
13672
|
ThumbnailImage,
|
|
13702
13673
|
{
|
|
13703
13674
|
$thumbnailImageType: thumbnailImageType,
|
|
13704
13675
|
$thumbnailUrl: thumbnailUrl
|
|
13705
13676
|
}
|
|
13706
13677
|
),
|
|
13707
|
-
Array.isArray(thumbnailUrl) && isNotNil43(thumbnailImageType) && isNotNil43(thumbnailUrl) && /* @__PURE__ */
|
|
13678
|
+
Array.isArray(thumbnailUrl) && isNotNil43(thumbnailImageType) && isNotNil43(thumbnailUrl) && /* @__PURE__ */ jsx211(Collage, { "data-testid": "thumbnail-collage", children: thumbnailUrl.map((url, index) => /* @__PURE__ */ jsx211(
|
|
13708
13679
|
CollageImage,
|
|
13709
13680
|
{
|
|
13710
13681
|
$thumbnailUrl: url,
|
|
@@ -13720,10 +13691,10 @@ var Thumbnail = ({
|
|
|
13720
13691
|
Thumbnail.displayName = "Thumbnail_VHS";
|
|
13721
13692
|
|
|
13722
13693
|
// src/components/ThumbnailCollage/ThumbnailCollage.tsx
|
|
13723
|
-
import { styled as
|
|
13694
|
+
import { styled as styled70 } from "styled-components";
|
|
13724
13695
|
import { isNotNil as isNotNil44 } from "@wistia/type-guards";
|
|
13725
|
-
import { jsx as
|
|
13726
|
-
var ThumbnailCollageContainer =
|
|
13696
|
+
import { jsx as jsx212 } from "react/jsx-runtime";
|
|
13697
|
+
var ThumbnailCollageContainer = styled70.div`
|
|
13727
13698
|
display: grid;
|
|
13728
13699
|
grid-template-columns: 3fr 2fr;
|
|
13729
13700
|
grid-template-rows: 1fr 1fr;
|
|
@@ -13731,7 +13702,7 @@ var ThumbnailCollageContainer = styled71.div`
|
|
|
13731
13702
|
grid-gap: ${({ theme: theme2 }) => theme2.spacing.space01};
|
|
13732
13703
|
height: 100%;
|
|
13733
13704
|
`;
|
|
13734
|
-
var CollageImage2 =
|
|
13705
|
+
var CollageImage2 = styled70.div`
|
|
13735
13706
|
${({ $thumbnailUrl }) => isNotNil44($thumbnailUrl) && `background-image: url(${$thumbnailUrl})`};
|
|
13736
13707
|
${({ $backgroundGradient }) => $backgroundGradient && getBackgroundGradient($backgroundGradient)};
|
|
13737
13708
|
background-position: center;
|
|
@@ -13761,37 +13732,37 @@ var ThumbnailCollage = ({
|
|
|
13761
13732
|
gradientBackground = "defaultMidOne",
|
|
13762
13733
|
...props
|
|
13763
13734
|
}) => {
|
|
13764
|
-
return /* @__PURE__ */
|
|
13735
|
+
return /* @__PURE__ */ jsx212(
|
|
13765
13736
|
ThumbnailCollageContainer,
|
|
13766
13737
|
{
|
|
13767
13738
|
role: "presentation",
|
|
13768
13739
|
...props,
|
|
13769
|
-
children: thumbnailUrls.length ? thumbnailUrls.map((thumbnailUrl) => /* @__PURE__ */
|
|
13740
|
+
children: thumbnailUrls.length ? thumbnailUrls.map((thumbnailUrl) => /* @__PURE__ */ jsx212(
|
|
13770
13741
|
CollageImage2,
|
|
13771
13742
|
{
|
|
13772
13743
|
$thumbnailUrl: thumbnailUrl
|
|
13773
13744
|
},
|
|
13774
13745
|
thumbnailUrl
|
|
13775
|
-
)) : /* @__PURE__ */
|
|
13746
|
+
)) : /* @__PURE__ */ jsx212(CollageImage2, { $backgroundGradient: gradientBackground })
|
|
13776
13747
|
}
|
|
13777
13748
|
);
|
|
13778
13749
|
};
|
|
13779
13750
|
|
|
13780
13751
|
// src/components/WistiaLogo/WistiaLogo.tsx
|
|
13781
|
-
import { styled as
|
|
13752
|
+
import { styled as styled71 } from "styled-components";
|
|
13782
13753
|
import { isNotNil as isNotNil45 } from "@wistia/type-guards";
|
|
13783
|
-
import { jsx as
|
|
13754
|
+
import { jsx as jsx213, jsxs as jsxs45 } from "react/jsx-runtime";
|
|
13784
13755
|
var renderBrandmark = (brandmarkColor, iconOnly) => {
|
|
13785
13756
|
if (iconOnly) {
|
|
13786
|
-
return /* @__PURE__ */
|
|
13757
|
+
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" }) });
|
|
13787
13758
|
}
|
|
13788
|
-
return /* @__PURE__ */
|
|
13759
|
+
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" }) });
|
|
13789
13760
|
};
|
|
13790
13761
|
var renderLogotype = (logotypeColor, iconOnly) => {
|
|
13791
13762
|
if (iconOnly) {
|
|
13792
13763
|
return null;
|
|
13793
13764
|
}
|
|
13794
|
-
return /* @__PURE__ */
|
|
13765
|
+
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" }) });
|
|
13795
13766
|
};
|
|
13796
13767
|
var computedViewBox = (iconOnly) => {
|
|
13797
13768
|
if (iconOnly) {
|
|
@@ -13799,7 +13770,7 @@ var computedViewBox = (iconOnly) => {
|
|
|
13799
13770
|
}
|
|
13800
13771
|
return "0 0 144 31.47";
|
|
13801
13772
|
};
|
|
13802
|
-
var WistiaLogoComponent =
|
|
13773
|
+
var WistiaLogoComponent = styled71.svg`
|
|
13803
13774
|
height: ${({ height }) => `${height}px`};
|
|
13804
13775
|
|
|
13805
13776
|
/* ensure it will always fit on mobile */
|
|
@@ -13851,14 +13822,14 @@ var WistiaLogo = ({
|
|
|
13851
13822
|
xmlns: "http://www.w3.org/2000/svg",
|
|
13852
13823
|
...otherProps,
|
|
13853
13824
|
children: [
|
|
13854
|
-
/* @__PURE__ */
|
|
13855
|
-
isNotNil45(description) ? /* @__PURE__ */
|
|
13825
|
+
/* @__PURE__ */ jsx213("title", { children: title }),
|
|
13826
|
+
isNotNil45(description) ? /* @__PURE__ */ jsx213("desc", { children: description }) : null,
|
|
13856
13827
|
renderBrandmark(brandmarkColor, iconOnly),
|
|
13857
13828
|
renderLogotype(logotypeColor, iconOnly)
|
|
13858
13829
|
]
|
|
13859
13830
|
}
|
|
13860
13831
|
);
|
|
13861
|
-
return href !== void 0 ? /* @__PURE__ */
|
|
13832
|
+
return href !== void 0 ? /* @__PURE__ */ jsx213("a", { href, children: Logo }) : Logo;
|
|
13862
13833
|
};
|
|
13863
13834
|
WistiaLogo.displayName = "WistiaLogo_VHS";
|
|
13864
13835
|
export {
|
|
@@ -13919,7 +13890,6 @@ export {
|
|
|
13919
13890
|
ScreenReaderOnly,
|
|
13920
13891
|
Select,
|
|
13921
13892
|
Slider,
|
|
13922
|
-
Stack,
|
|
13923
13893
|
SubMenu,
|
|
13924
13894
|
Switch,
|
|
13925
13895
|
Text,
|