@wistia/vhs 5.0.1 → 5.0.2-beta.b97af75d.ef7f4d2

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as styled_components from 'styled-components';
-import { css, DefaultTheme } from 'styled-components';
+import { css, DefaultTheme, IStyledComponent } 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, Ref, ComponentClass, ComponentProps, FocusEvent, HTMLInputTypeAttribute, KeyboardEvent as KeyboardEvent$1, ReactElement, ComponentType, PropsWithChildren } from 'react';
@@ -10,7 +10,6 @@ import { ReactEditor } from 'slate-react';
 import { HistoryEditor } from 'slate-history';
 import { DropdownMenuProps, DropdownMenuContentProps, DropdownMenuItemProps, DropdownMenuCheckboxItemProps, DropdownMenuRadioItemProps } from '@radix-ui/react-dropdown-menu';
 export { DropdownMenuRadioGroup as MenuRadioGroup } from '@radix-ui/react-dropdown-menu';
-import * as styled_components_dist_types from 'styled-components/dist/types';
 
 interface VHSTheme {
     readonly breakpoint: {
@@ -2245,7 +2244,7 @@ declare const KeyboardShortcut: {
     displayName: string;
 };
 
-type LabelProps = ComponentPropsWithoutRef<'label'> & {
+type LabelProps = {
     /**
      * Pass an arbitrary child node
      */
@@ -2271,9 +2270,9 @@ type LabelProps = ComponentPropsWithoutRef<'label'> & {
      * but otherwise hidden on screen.
      */
     screenReaderOnly?: boolean;
-};
+} & Omit<ComponentPropsWithoutRef<'label'>, 'children'>;
 declare const Label: {
-    ({ renderAs, children, disabled, htmlFor, required, screenReaderOnly, ...otherProps }: LabelProps): JSX.Element;
+    ({ renderAs, children, disabled, htmlFor, required, screenReaderOnly, className, style, id, ...otherProps }: LabelProps): JSX.Element;
     displayName: string;
 };
 
@@ -2596,9 +2595,9 @@ declare const Modal: {
     displayName: string;
 };
 
-declare const ModalHeader: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-declare const ModalBody: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-declare const ModalFooter: styled_components_dist_types.IStyledComponentBase<"web", styled_components.FastOmit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+declare const ModalHeader: IStyledComponent<'web', ComponentPropsWithRef<'div'>>;
+declare const ModalBody: IStyledComponent<'web', ComponentPropsWithRef<'div'>>;
+declare const ModalFooter: IStyledComponent<'web', ComponentPropsWithRef<'div'>>;
 type ModalCloseButtonProps = {
     /**
      * Callback invoked when the button is clicked
@@ -3141,57 +3140,7 @@ declare const variantStyleMap: {
     subtitle2: styled_components.RuleSet<object>;
     monospace: styled_components.RuleSet<object>;
 };
-type TextProps = ComponentPropsWithoutRef<'div'> & {
-    /**
-     * The horizontal alignment
-     * <br />
-     * _Note: this only affects block elements_
-     */
-    align?: keyof typeof alignMap;
-    /**
-     * Displays text as bold type
-     */
-    bold?: boolean;
-    /**
-     * Pass an arbitrary child node
-     */
-    children?: ReactNode | undefined;
-    /**
-     * Allows user to override default button colors
-     */
-    colorOverride?: string;
-    /**
-     * Used to indicate text is part of a "disabled" UI
-     */
-    disabled?: boolean;
-    /**
-     * Attempt to keep the text to a single line by truncating with an ellipsis
-     * <br />
-     * _Note: this only affects block elements_
-     */
-    ellipsis?: boolean;
-    /**
-     * Display the text as inline content
-     */
-    inline?: boolean;
-    /**
-     * Displays text as italic type
-     */
-    italic?: boolean;
-    /**
-     * Prevents text from being highlighted and copied
-     */
-    preventUserSelect?: boolean;
-    /**
-     * The type of html element to render as
-     */
-    renderAs?: keyof typeof renderMap;
-    /**
-     * The text style to display
-     */
-    variant?: keyof typeof variantStyleMap;
-};
-declare const Text: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+type TextProps = {
     /**
      * The horizontal alignment
      * <br />
@@ -3240,7 +3189,8 @@ declare const Text: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps
      * The text style to display
      */
     variant?: keyof typeof variantStyleMap;
-} & react.RefAttributes<HTMLElement>>;
+} & Omit<ComponentPropsWithRef<'div'>, 'children'>;
+declare const Text: react.ForwardRefExoticComponent<Omit<TextProps, "ref"> & react.RefAttributes<HTMLElement>>;
 
 type IconThumbnailProps = {
     /**

package/dist/index.js

@@ -1,8 +1,8 @@
 
 /*
- * @license @wistia/vhs v5.0.1
+ * @license @wistia/vhs v5.0.2-beta.b97af75d.ef7f4d2
  *
- * Copyright (c) 2021-2025, Wistia, Inc. and its affiliates.
+ * Copyright (c) 2021-2026, Wistia, Inc. and its affiliates.
  *
  * This source code is unlicensed, all rights reserved.
  */
@@ -3114,8 +3114,8 @@ var buttonStyle = css2`
 }}
 `;
 var ButtonStyledComponent = styled2.button`
-  ${({ $noStyle }) => $noStyle ? buttonResetStyle : buttonStyle}
-`;
+    ${({ $noStyle }) => $noStyle ? buttonResetStyle : buttonStyle}
+  `;
 
 // src/components/Button/getButtonColor.ts
 import { isNonEmptyString } from "@wistia/type-guards";
@@ -4310,7 +4310,7 @@ var createKeyPredicate = (keyFilter) => {
   if (typeof keyFilter === "string") {
     return (event) => event.key === keyFilter;
   }
-  if (keyFilter !== null && keyFilter !== void 0 && Boolean(keyFilter)) {
+  if (keyFilter !== null && keyFilter !== void 0 && keyFilter) {
     return () => true;
   }
   return () => false;
@@ -4855,7 +4855,7 @@ var variantStyleMap = {
   subtitle2: subtitle2TextStyle,
   monospace: monospaceTextStyle
 };
-var TextComponent = styled6.div`
+var sharedTextStyles = css6`
   color: ${({ theme: theme2, $colorOverride }) => $colorOverride ?? theme2.color.grey900};
   font-style: normal;
   margin: 0;
@@ -4879,10 +4879,44 @@ var TextComponent = styled6.div`
   ${({ $align }) => css6`
     text-align: ${alignMap[$align]};
   `}
-  ${({ as, theme: theme2 }) => as === "p" && css6`
-      display: block;
-      margin-bottom: ${theme2.spacing.space05};
-    `}
+`;
+var pStyles = css6`
+  ${sharedTextStyles}
+  display: block;
+  margin-bottom: ${({ theme: theme2 }) => theme2.spacing.space05};
+`;
+var StyledH1 = styled6.h1`
+  ${sharedTextStyles}
+`;
+var StyledH2 = styled6.h2`
+  ${sharedTextStyles}
+`;
+var StyledH3 = styled6.h3`
+  ${sharedTextStyles}
+`;
+var StyledH4 = styled6.h4`
+  ${sharedTextStyles}
+`;
+var StyledH5 = styled6.h5`
+  ${sharedTextStyles}
+`;
+var StyledH6 = styled6.h6`
+  ${sharedTextStyles}
+`;
+var StyledDiv = styled6.div`
+  ${sharedTextStyles}
+`;
+var StyledLabel = styled6.label`
+  ${sharedTextStyles}
+`;
+var StyledP = styled6.p`
+  ${pStyles}
+`;
+var StyledPre = styled6.pre`
+  ${sharedTextStyles}
+`;
+var StyledSpan = styled6.span`
+  ${sharedTextStyles}
 `;
 var Text = forwardRef2(
   ({
@@ -4897,11 +4931,12 @@ var Text = forwardRef2(
     preventUserSelect = false,
     renderAs = "div",
     variant = "body1",
+    className,
+    style,
+    id,
     ...otherProps
-  }, ref) => /* @__PURE__ */ jsx124(
-    TextComponent,
-    {
-      ref,
+  }, ref) => {
+    const sharedProps = {
       $align: align,
       $bold: bold,
       $colorOverride: colorOverride,
@@ -4911,11 +4946,114 @@ var Text = forwardRef2(
       $italic: italic,
       $preventUserSelect: preventUserSelect,
       $variant: variant,
-      as: renderAs,
-      ...otherProps,
-      children
+      className,
+      style,
+      id
+    };
+    switch (renderAs) {
+      case "h1":
+        return /* @__PURE__ */ jsx124(
+          StyledH1,
+          {
+            ...sharedProps,
+            ref,
+            children
+          }
+        );
+      case "h2":
+        return /* @__PURE__ */ jsx124(
+          StyledH2,
+          {
+            ...sharedProps,
+            ref,
+            children
+          }
+        );
+      case "h3":
+        return /* @__PURE__ */ jsx124(
+          StyledH3,
+          {
+            ...sharedProps,
+            ref,
+            children
+          }
+        );
+      case "h4":
+        return /* @__PURE__ */ jsx124(
+          StyledH4,
+          {
+            ...sharedProps,
+            ref,
+            children
+          }
+        );
+      case "h5":
+        return /* @__PURE__ */ jsx124(
+          StyledH5,
+          {
+            ...sharedProps,
+            ref,
+            children
+          }
+        );
+      case "h6":
+        return /* @__PURE__ */ jsx124(
+          StyledH6,
+          {
+            ...sharedProps,
+            ref,
+            children
+          }
+        );
+      case "label":
+        return /* @__PURE__ */ jsx124(
+          StyledLabel,
+          {
+            ...sharedProps,
+            ref,
+            children
+          }
+        );
+      case "p":
+        return /* @__PURE__ */ jsx124(
+          StyledP,
+          {
+            ...sharedProps,
+            ref,
+            children
+          }
+        );
+      case "pre":
+        return /* @__PURE__ */ jsx124(
+          StyledPre,
+          {
+            ...sharedProps,
+            ref,
+            children
+          }
+        );
+      case "span":
+        return /* @__PURE__ */ jsx124(
+          StyledSpan,
+          {
+            ...sharedProps,
+            ref,
+            children
+          }
+        );
+      case "div":
+      default:
+        return /* @__PURE__ */ jsx124(
+          StyledDiv,
+          {
+            ...sharedProps,
+            ref,
+            ...otherProps,
+            children
+          }
+        );
     }
-  )
+  }
 );
 Text.displayName = "Text_VHS";
 
@@ -6747,7 +6885,7 @@ var disabledStyle4 = css14`
   color: ${({ theme: theme2 }) => theme2.color.grey500};
 `;
 var SPACE_BETWEEN_LABEL_AND_INPUT = "8px";
-var LabelComponent = styled22.label`
+var sharedLabelStyles = css14`
   color: ${({ theme: theme2 }) => theme2.color.grey900};
   display: block;
   font-size: 14px;
@@ -6771,6 +6909,21 @@ var LabelComponent = styled22.label`
   ${({ $disabled }) => $disabled && disabledStyle4}
   ${({ $required }) => $required && requiredStyle}
 `;
+var StyledLabel2 = styled22.label`
+  ${sharedLabelStyles}
+`;
+var StyledLegend = styled22.legend`
+  ${sharedLabelStyles}
+`;
+var StyledDiv2 = styled22.div`
+  ${sharedLabelStyles}
+`;
+var StyledP2 = styled22.p`
+  ${sharedLabelStyles}
+`;
+var StyledSpan2 = styled22.span`
+  ${sharedLabelStyles}
+`;
 var Label = ({
   renderAs = "label",
   children,
@@ -6778,20 +6931,41 @@ var Label = ({
   htmlFor,
   required = false,
   screenReaderOnly = false,
+  className,
+  style,
+  id,
   ...otherProps
-}) => /* @__PURE__ */ jsx142(
-  LabelComponent,
-  {
+}) => {
+  const sharedProps = {
     $disabled: disabled,
-    $renderAs: renderAs,
     $required: required,
     $screenReaderOnly: screenReaderOnly,
-    as: renderAs,
-    htmlFor: renderAs === "label" ? htmlFor : "",
-    ...otherProps,
-    children
+    className,
+    style,
+    id
+  };
+  switch (renderAs) {
+    case "legend":
+      return /* @__PURE__ */ jsx142(StyledLegend, { ...sharedProps, children });
+    case "div":
+      return /* @__PURE__ */ jsx142(StyledDiv2, { ...sharedProps, children });
+    case "p":
+      return /* @__PURE__ */ jsx142(StyledP2, { ...sharedProps, children });
+    case "span":
+      return /* @__PURE__ */ jsx142(StyledSpan2, { ...sharedProps, children });
+    case "label":
+    default:
+      return /* @__PURE__ */ jsx142(
+        StyledLabel2,
+        {
+          ...sharedProps,
+          htmlFor,
+          ...otherProps,
+          children
+        }
+      );
   }
-);
+};
 Label.displayName = "Label_VHS";
 
 // src/components/FormFieldError/FormFieldError.tsx
@@ -7141,7 +7315,7 @@ var showOnHoverStyles = () => css16`
     opacity: 1;
   }
 `;
-var StyledLabel = styled29(Text)`
+var StyledLabel3 = styled29(Text)`
   /*
   * This should be able to support an input field when used to rename itself
   */
@@ -7297,7 +7471,7 @@ var CollapsibleGroup = ({
         onClick,
         children: [
           /* @__PURE__ */ jsx150(
-            StyledLabel,
+            StyledLabel3,
             {
               $open: open2,
               $styleVariant: variant,
@@ -8072,15 +8246,15 @@ var inputStyle = css17`
   }
 `;
 var InputStyledComponent = styled33.input`
-  ${inputStyle}
-  ${({ as }) => as === "textarea" && textareaStyle};
-  ${({ as }) => as !== "textarea" && ellipsisStyle};
-  ${({ $clickToCopy }) => $clickToCopy && clickToCopyStyle};
-  ${({ disabled }) => disabled && disabledStyle6};
-  ${({ $forceState }) => $forceState === "focus" && focusStyle};
-  ${({ $hasError }) => $hasError && errorStyle2};
-  ${({ readOnly }) => readOnly && readOnlyStyle};
-`;
+    ${inputStyle}
+    ${({ as }) => as === "textarea" && textareaStyle};
+    ${({ as }) => as !== "textarea" && ellipsisStyle};
+    ${({ $clickToCopy }) => $clickToCopy && clickToCopyStyle};
+    ${({ disabled }) => disabled && disabledStyle6};
+    ${({ $forceState }) => $forceState === "focus" && focusStyle};
+    ${({ $hasError }) => $hasError && errorStyle2};
+    ${({ readOnly }) => readOnly && readOnlyStyle};
+  `;
 
 // src/components/Input/ClickToCopy.tsx
 import { useState as useState17, useEffect as useEffect15 } from "react";
@@ -8641,46 +8815,46 @@ var errorStyle3 = css19`
   border: 1px solid ${({ theme: theme2 }) => theme2.color.error500};
 `;
 var SelectStyledComponent = styled37.select`
-  ${ellipsisStyle}
-  appearance: none;
-  background-color: white;
-  border: 1px solid ${({ theme: theme2 }) => theme2.color.grey400};
-  border-radius: 4px;
-  color: ${({ theme: theme2 }) => theme2.color.grey900};
-  cursor: pointer;
-  display: block;
-  font-size: 14px;
-  height: ${({ multiple }) => multiple ? "66px" : "auto"};
-  line-height: 20px;
-  margin: 0;
-  outline: none;
+    ${ellipsisStyle}
+    appearance: none;
+    background-color: white;
+    border: 1px solid ${({ theme: theme2 }) => theme2.color.grey400};
+    border-radius: 4px;
+    color: ${({ theme: theme2 }) => theme2.color.grey900};
+    cursor: pointer;
+    display: block;
+    font-size: 14px;
+    height: ${({ multiple }) => multiple ? "66px" : "auto"};
+    line-height: 20px;
+    margin: 0;
+    outline: none;
 
-  /* selects w/ multiple need to be able to scroll */
-  overflow-y: ${({ multiple }) => multiple ? "scroll" : "hidden"};
+    /* selects w/ multiple need to be able to scroll */
+    overflow-y: ${({ multiple }) => multiple ? "scroll" : "hidden"};
 
-  /* right padding is to prevent text collision with caret icon */
-  padding: ${({ theme: theme2 }) => `7px ${theme2.spacing.space06} 7px ${theme2.spacing.space02}`};
-  width: 100%;
+    /* right padding is to prevent text collision with caret icon */
+    padding: ${({ theme: theme2 }) => `7px ${theme2.spacing.space06} 7px ${theme2.spacing.space02}`};
+    width: 100%;
 
-  &:focus {
-    ${focusStyle2}
-  }
+    &:focus {
+      ${focusStyle2}
+    }
 
-  /* this removes a dotted border around select text when focusing in Firefox */
-  &:-moz-focusring {
-    color: transparent;
-    text-shadow: 0 0 0 #000000;
-  }
+    /* this removes a dotted border around select text when focusing in Firefox */
+    &:-moz-focusring {
+      color: transparent;
+      text-shadow: 0 0 0 #000000;
+    }
 
-  /* remove drop-down arrow in IE */
-  &::-ms-expand {
-    display: none;
-  }
+    /* remove drop-down arrow in IE */
+    &::-ms-expand {
+      display: none;
+    }
 
-  ${({ disabled }) => disabled && disabledStyle7}
-  ${({ $hasError }) => $hasError && errorStyle3}
+    ${({ disabled }) => disabled && disabledStyle7}
+    ${({ $hasError }) => $hasError && errorStyle3}
   ${({ $forceState }) => $forceState === "focus" && focusStyle2};
-`;
+  `;
 
 // src/components/Select/Select.tsx
 import { jsx as jsx165, jsxs as jsxs27 } from "react/jsx-runtime";
@@ -9460,7 +9634,7 @@ import { Transforms as Transforms3, Element as Element5, Node, Editor, Range, Pa
 import { isNonEmptyString as isNonEmptyString9 } from "@wistia/type-guards";
 var isHashUrl = (urlString) => {
   const urlPattern = /^#.+$/i;
-  return Boolean(urlPattern.test(urlString));
+  return urlPattern.test(urlString);
 };
 var isLinkActive = (editor) => {
   const [link] = Editor.nodes(editor, {
@@ -10651,11 +10825,11 @@ var ListComponent = styled49.ul`
   list-style-position: outside;
   margin: ${({ theme: theme2 }) => `0 0 ${theme2.spacing.space01}`};
   padding: ${({ theme: theme2 }) => `0 0 0 ${theme2.spacing.space04}`};
-  ${({ variant }) => variant === "unbulleted" && unbulletedStyle};
-  ${({ variant }) => variant === "spaces" && spacesStyle};
-  ${({ variant }) => variant === "commas" && commasStyle};
-  ${({ variant }) => variant === "slashes" && slashesStyle};
-  ${({ variant }) => variant === "breadcrumbs" && breadcrumbsStyle};
+  ${({ $variant }) => $variant === "unbulleted" && unbulletedStyle};
+  ${({ $variant }) => $variant === "spaces" && spacesStyle};
+  ${({ $variant }) => $variant === "commas" && commasStyle};
+  ${({ $variant }) => $variant === "slashes" && slashesStyle};
+  ${({ $variant }) => $variant === "breadcrumbs" && breadcrumbsStyle};
 
   > li:last-child {
     margin-bottom: 0;
@@ -10677,8 +10851,8 @@ var renderListComponent = (listItems, variant, { ...otherProps }) => {
   return /* @__PURE__ */ jsx192(
     ListComponent,
     {
+      $variant: variant,
       as: elementType,
-      variant,
       ...otherProps,
       children: listItems
     }
@@ -11217,7 +11391,6 @@ var MenuComponent = styled54.div`
   }
 `;
 var dangerousMenuItemStyles2 = css25`
-  /* stylelint-disable no-descending-specificity */
   button,
   a {
     &:hover {
@@ -12331,7 +12504,7 @@ var RangeSelectorCalendar = ({
   }, [internalRange, onIsValidChangeDebounced]);
   useEffect22(() => {
     if (isValidRange(range)) {
-      let date;
+      let date = void 0;
       if (priorInternalRange && !isEqual3(range.start, priorInternalRange.start)) {
         date = range.start;
       }
@@ -12557,7 +12730,7 @@ import isEqual4 from "react-fast-compare";
 // src/private/components/RangeSelectorInput/utils.ts
 import { isValid as isValid2, getDaysInMonth, getYear, isBefore as isBefore3, isSameDay as isSameDay2, compareAsc as compareAsc2 } from "date-fns";
 import { isNotNil as isNotNil39 } from "@wistia/type-guards";
-var timeout;
+var timeout = void 0;
 var preventDoubleClick = (event) => {
   const delay = 200;
   if (isNotNil39(timeout)) {
@@ -12802,7 +12975,7 @@ var getNextValue = ({
   return { nextValue, nextKeyCount, shouldApply };
 };
 var getNextSelection = ({ event, currentSelection }) => {
-  let nextSelection;
+  let nextSelection = void 0;
   if (isMoveRightChar(event)) {
     nextSelection = getSelectionFromMove(currentSelection, 1, DATE_PART_POSITIONS);
     if (!isEqual4(nextSelection, currentSelection)) {
@@ -13398,10 +13571,11 @@ var Slider = ({
             );
           },
           renderThumb: (thumbProps, thumbState) => {
-            const { key, as, ...restProps } = thumbProps;
+            const { key, as, ref, ...restProps } = thumbProps;
             return /* @__PURE__ */ jsx209(
               StyledThumb,
               {
+                ref,
                 ...restProps,
                 "data-testid": `${dataTestId}-thumb-${thumbState.index}`
               },
@@ -13409,10 +13583,11 @@ var Slider = ({
             );
           },
           renderTrack: (trackProps, trackState) => {
-            const { key, as, ...restProps } = trackProps;
+            const { key, as, ref, ...restProps } = trackProps;
             return /* @__PURE__ */ jsx209(
               StyledTrack,
               {
+                ref,
                 ...restProps,
                 $isFilledTrack: checkIfFilledTrack(trackState),
                 "data-testid": `${dataTestId}-track-${trackState.index}`