@wistia/vhs 5.0.2-beta.b97af75d.ef7f4d2 → 5.0.2-beta.d42b58b7.331ff68

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as styled_components from 'styled-components';
-import { css, DefaultTheme, IStyledComponent } 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, Ref, ComponentClass, ComponentProps, FocusEvent, HTMLInputTypeAttribute, KeyboardEvent as KeyboardEvent$1, ReactElement, ComponentType, PropsWithChildren } from 'react';
@@ -10,6 +10,7 @@ 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: {
@@ -2244,7 +2245,7 @@ declare const KeyboardShortcut: {
     displayName: string;
 };
 
-type LabelProps = {
+type LabelProps = ComponentPropsWithoutRef<'label'> & {
     /**
      * Pass an arbitrary child node
      */
@@ -2270,9 +2271,9 @@ type LabelProps = {
      * but otherwise hidden on screen.
      */
     screenReaderOnly?: boolean;
-} & Omit<ComponentPropsWithoutRef<'label'>, 'children'>;
+};
 declare const Label: {
-    ({ renderAs, children, disabled, htmlFor, required, screenReaderOnly, className, style, id, ...otherProps }: LabelProps): JSX.Element;
+    ({ renderAs, children, disabled, htmlFor, required, screenReaderOnly, ...otherProps }: LabelProps): JSX.Element;
     displayName: string;
 };
 
@@ -2595,9 +2596,9 @@ declare const Modal: {
     displayName: string;
 };
 
-declare const ModalHeader: IStyledComponent<'web', ComponentPropsWithRef<'div'>>;
-declare const ModalBody: IStyledComponent<'web', ComponentPropsWithRef<'div'>>;
-declare const ModalFooter: IStyledComponent<'web', ComponentPropsWithRef<'div'>>;
+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;
 type ModalCloseButtonProps = {
     /**
      * Callback invoked when the button is clicked
@@ -3140,7 +3141,57 @@ declare const variantStyleMap: {
     subtitle2: styled_components.RuleSet<object>;
     monospace: styled_components.RuleSet<object>;
 };
-type TextProps = {
+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"> & {
     /**
      * The horizontal alignment
      * <br />
@@ -3189,8 +3240,7 @@ type TextProps = {
      * The text style to display
      */
     variant?: keyof typeof variantStyleMap;
-} & Omit<ComponentPropsWithRef<'div'>, 'children'>;
-declare const Text: react.ForwardRefExoticComponent<Omit<TextProps, "ref"> & react.RefAttributes<HTMLElement>>;
+} & react.RefAttributes<HTMLElement>>;
 
 type IconThumbnailProps = {
     /**

package/dist/index.js

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/vhs v5.0.2-beta.b97af75d.ef7f4d2
+ * @license @wistia/vhs v5.0.2-beta.d42b58b7.331ff68
  *
  * Copyright (c) 2021-2026, Wistia, Inc. and its affiliates.
  *
@@ -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";
@@ -4855,7 +4855,7 @@ var variantStyleMap = {
   subtitle2: subtitle2TextStyle,
   monospace: monospaceTextStyle
 };
-var sharedTextStyles = css6`
+var TextComponent = styled6.div`
   color: ${({ theme: theme2, $colorOverride }) => $colorOverride ?? theme2.color.grey900};
   font-style: normal;
   margin: 0;
@@ -4879,44 +4879,10 @@ var sharedTextStyles = css6`
   ${({ $align }) => css6`
     text-align: ${alignMap[$align]};
   `}
-`;
-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}
+  ${({ as, theme: theme2 }) => as === "p" && css6`
+      display: block;
+      margin-bottom: ${theme2.spacing.space05};
+    `}
 `;
 var Text = forwardRef2(
   ({
@@ -4931,12 +4897,11 @@ var Text = forwardRef2(
     preventUserSelect = false,
     renderAs = "div",
     variant = "body1",
-    className,
-    style,
-    id,
     ...otherProps
-  }, ref) => {
-    const sharedProps = {
+  }, ref) => /* @__PURE__ */ jsx124(
+    TextComponent,
+    {
+      ref,
       $align: align,
       $bold: bold,
       $colorOverride: colorOverride,
@@ -4946,114 +4911,11 @@ var Text = forwardRef2(
       $italic: italic,
       $preventUserSelect: preventUserSelect,
       $variant: variant,
-      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
-          }
-        );
+      as: renderAs,
+      ...otherProps,
+      children
     }
-  }
+  )
 );
 Text.displayName = "Text_VHS";
 
@@ -6885,7 +6747,7 @@ var disabledStyle4 = css14`
   color: ${({ theme: theme2 }) => theme2.color.grey500};
 `;
 var SPACE_BETWEEN_LABEL_AND_INPUT = "8px";
-var sharedLabelStyles = css14`
+var LabelComponent = styled22.label`
   color: ${({ theme: theme2 }) => theme2.color.grey900};
   display: block;
   font-size: 14px;
@@ -6909,21 +6771,6 @@ var sharedLabelStyles = css14`
   ${({ $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,
@@ -6931,41 +6778,20 @@ var Label = ({
   htmlFor,
   required = false,
   screenReaderOnly = false,
-  className,
-  style,
-  id,
   ...otherProps
-}) => {
-  const sharedProps = {
+}) => /* @__PURE__ */ jsx142(
+  LabelComponent,
+  {
     $disabled: disabled,
+    $renderAs: renderAs,
     $required: required,
     $screenReaderOnly: screenReaderOnly,
-    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
-        }
-      );
+    as: renderAs,
+    htmlFor: renderAs === "label" ? htmlFor : "",
+    ...otherProps,
+    children
   }
-};
+);
 Label.displayName = "Label_VHS";
 
 // src/components/FormFieldError/FormFieldError.tsx
@@ -7315,7 +7141,7 @@ var showOnHoverStyles = () => css16`
     opacity: 1;
   }
 `;
-var StyledLabel3 = styled29(Text)`
+var StyledLabel = styled29(Text)`
   /*
   * This should be able to support an input field when used to rename itself
   */
@@ -7471,7 +7297,7 @@ var CollapsibleGroup = ({
         onClick,
         children: [
           /* @__PURE__ */ jsx150(
-            StyledLabel3,
+            StyledLabel,
             {
               $open: open2,
               $styleVariant: variant,
@@ -8246,15 +8072,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";
@@ -8815,46 +8641,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";