@wistia/vhs 3.0.1-beta.a963c7a8.8b7d153 → 3.0.1-beta.cd0ec91c.fd8df29

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/vhs v3.0.1-beta.a963c7a8.8b7d153
+ * @license @wistia/vhs v3.0.1-beta.cd0ec91c.fd8df29
  *
  * Copyright (c) 2021-2025, Wistia, Inc. and its affiliates.
  *
@@ -6289,7 +6289,7 @@ Box.displayName = "Box_VHS";
 
 // src/components/ButtonLink/ButtonLink.tsx
 import { forwardRef as forwardRef6 } from "react";
-import { styled as styled20 } from "styled-components";
+import { styled as styled20, css as css13 } from "styled-components";
 import { isNotNil as isNotNil12 } from "@wistia/type-guards";
 
 // src/components/Link/Link.tsx
@@ -6509,8 +6509,149 @@ Link.displayName = "Link_VHS";
 
 // src/components/ButtonLink/ButtonLink.tsx
 import { jsx as jsx140 } from "react/jsx-runtime";
+var buttonLinkStyle = css13`
+  align-items: center;
+  background-color: transparent;
+  background-image: none;
+  border: none;
+  box-shadow: none;
+  color: inherit;
+  cursor: pointer;
+  display: inline-flex;
+  font: inherit;
+  justify-content: center;
+  line-height: 1;
+  padding: 0;
+  text-align: left;
+  vertical-align: middle;
+  appearance: none;
+  border-radius: ${({ theme: theme2 }) => theme2.button.borderRadius};
+  border-style: solid;
+  border-width: 1px;
+  font-weight: ${({ theme: theme2 }) => theme2.font.weight.medium};
+  text-decoration: none;
+  transition: all ${({ theme: theme2 }) => theme2.duration.productive.moderate};
+
+  &:focus {
+    outline: none;
+  }
+
+  &[aria-disabled='true'] {
+    opacity: 0.4;
+  }
+
+  /* border-radius */
+  ${({ $square }) => $square === true && css13`
+      border-radius: 0;
+    `}
+
+  /* label wrapping */
+  white-space: ${({ $labelWrap }) => $labelWrap === true ? "wrap" : "nowrap"};
+
+  /* size styles */
+  ${({ $size, theme: theme2 }) => {
+  if ($size === "lg") {
+    return css13`
+        font-size: 16px;
+        line-height: 24px;
+        padding: ${theme2.spacing.space02} ${theme2.spacing.space04};
+      `;
+  }
+  if ($size === "md") {
+    return css13`
+        font-size: 14px;
+        line-height: 20px;
+        padding: ${theme2.spacing.space02} ${theme2.spacing.space03};
+      `;
+  }
+  if ($size === "sm") {
+    return css13`
+        font-size: 12px;
+        line-height: 18px;
+        padding: 2px ${theme2.spacing.space02};
+      `;
+  }
+  return css13``;
+}}
+
+  /* full width */
+  ${({ $fullWidth }) => $fullWidth && css13`
+      width: 100%;
+    `}
+
+  /* variant styles */
+  ${({ $variant, $buttonColor }) => {
+  if ($variant === "primary" || $variant === "dangerous") {
+    return css13`
+        background-color: ${$buttonColor};
+        border-color: ${$buttonColor};
+        color: white;
+
+        &:focus-visible {
+          box-shadow: inset 0 0 0 1px white;
+        }
+
+        &:hover:not([aria-disabled='true']) {
+          background-color: ${$buttonColor};
+          border-color: ${$buttonColor};
+          opacity: 0.9;
+        }
+
+        &:active:not([aria-disabled='true']) {
+          background-color: ${$buttonColor};
+          border-color: ${$buttonColor};
+          opacity: 0.8;
+        }
+      `;
+  }
+  if ($variant === "secondary") {
+    return css13`
+        background-color: transparent;
+        border-color: ${$buttonColor};
+        color: ${$buttonColor};
+
+        &:focus-visible {
+          box-shadow:
+            inset 0 0 0 1px white,
+            inset 0 0 0 2px ${$buttonColor};
+        }
+
+        &:hover:not([aria-disabled='true']) {
+          background-color: rgb(0 0 0 / 10%);
+        }
+
+        &:active:not([aria-disabled='true']) {
+          background-color: rgb(0 0 0 / 20%);
+        }
+      `;
+  }
+  if ($variant === "tertiary") {
+    return css13`
+        background-color: transparent;
+        border-color: transparent;
+        color: ${$buttonColor};
+
+        &:focus-visible {
+          border-color: ${$buttonColor};
+          box-shadow:
+            inset 0 0 0 1px white,
+            inset 0 0 0 2px ${$buttonColor};
+        }
+
+        &:hover:not([aria-disabled='true']) {
+          background-color: rgb(0 0 0 / 10%);
+        }
+
+        &:active:not([aria-disabled='true']) {
+          background-color: rgb(0 0 0 / 20%);
+        }
+      `;
+  }
+  return css13``;
+}}
+`;
 var StyledButtonLink = styled20(Link)`
-  ${buttonStyle};
+  ${buttonLinkStyle};
 
   /* Links are disabled by removing their href */
   &:not([href]) {
@@ -6564,10 +6705,10 @@ var ButtonLink = forwardRef6(
         $square: square,
         $textAlign: textAlign,
         $variant: variant,
-        beforeAction,
+        ...beforeAction && { beforeAction },
         disabled,
         href,
-        params,
+        ...params && { params },
         type,
         unstyled: true,
         ...otherProps,
@@ -6594,7 +6735,7 @@ import { forwardRef as forwardRef7, useState as useState14, isValidElement } fro
 import { isNonEmptyString as isNonEmptyString4, isNotUndefined as isNotUndefined3 } from "@wistia/type-guards";
 
 // src/components/Checkbox/OptionStyledComponent.tsx
-import { styled as styled21, css as css13 } from "styled-components";
+import { styled as styled21, css as css14 } from "styled-components";
 var OptionWrapper = styled21.input`
   align-self: flex-start;
   border-radius: 3px;
@@ -6619,15 +6760,15 @@ var OptionSubLabel = styled21.div`
   font-size: 12px;
   line-height: 16px;
 `;
-var disabledStyle3 = css13`
+var disabledStyle3 = css14`
   cursor: not-allowed;
   opacity: 0.5;
 `;
-var errorHoverStyle = css13`
+var errorHoverStyle = css14`
   border-color: transparent;
 `;
-var errorFocusedStyle = css13``;
-var errorStyle = css13`
+var errorFocusedStyle = css14``;
+var errorStyle = css14`
   background-color: ${({ theme: theme2 }) => theme2.color.error100};
   border: 1px solid ${({ theme: theme2 }) => theme2.color.error500};
 
@@ -6637,11 +6778,11 @@ var errorStyle = css13`
     border-color: transparent !important;
   }
 `;
-var defaultHoverStyle = css13`
+var defaultHoverStyle = css14`
   background-color: ${({ theme: theme2 }) => theme2.color.grey300};
   cursor: pointer;
 `;
-var defaultFocusedStyle = css13`
+var defaultFocusedStyle = css14`
   ${defaultHoverStyle}
 `;
 var Container = styled21.label`
@@ -6734,15 +6875,15 @@ import { isNotNil as isNotNil13 } from "@wistia/type-guards";
 import { styled as styled25 } from "styled-components";
 
 // src/components/Label/Label.tsx
-import { styled as styled22, css as css14 } from "styled-components";
+import { styled as styled22, css as css15 } from "styled-components";
 import { jsx as jsx142 } from "react/jsx-runtime";
-var requiredStyle = css14`
+var requiredStyle = css15`
   &::after {
     color: red;
     content: ' *';
   }
 `;
-var disabledStyle4 = css14`
+var disabledStyle4 = css15`
   color: ${({ theme: theme2 }) => theme2.color.grey500};
 `;
 var SPACE_BETWEEN_LABEL_AND_INPUT = "8px";
@@ -6818,9 +6959,9 @@ var FormFieldError = ({
 FormFieldError.displayName = "FormFieldError_VHS";
 
 // src/components/LabelDescription/LabelDescription.tsx
-import { styled as styled24, css as css15 } from "styled-components";
+import { styled as styled24, css as css16 } from "styled-components";
 import { jsx as jsx144 } from "react/jsx-runtime";
-var disabledStyle5 = css15`
+var disabledStyle5 = css16`
   color: ${({ theme: theme2 }) => theme2.color.grey500};
 `;
 var LabelDescriptionComponent = styled24.div`
@@ -7045,7 +7186,7 @@ CloseButton.displayName = "CloseButton_VHS";
 
 // src/components/CollapsibleGroup/CollapsibleGroup.tsx
 import { useEffect as useEffect11, useLayoutEffect as useLayoutEffect4, useState as useState15, useId as useId2 } from "react";
-import { styled as styled29, css as css16 } from "styled-components";
+import { styled as styled29, css as css17 } from "styled-components";
 import { darken as darken3 } from "polished";
 import { isNil as isNil8, isNonEmptyString as isNonEmptyString5, isNotUndefined as isNotUndefined4 } from "@wistia/type-guards";
 import { jsx as jsx150, jsxs as jsxs20 } from "react/jsx-runtime";
@@ -7130,7 +7271,7 @@ var Caret = styled29.span`
     width: 100%;
   }
 `;
-var showOnHoverStyles = () => css16`
+var showOnHoverStyles = () => css17`
   opacity: 0;
   transition: opacity ${TRANSITION_TIME2} ease-out;
 
@@ -7974,19 +8115,19 @@ import { styled as styled35 } from "styled-components";
 import { isNotNil as isNotNil18 } from "@wistia/type-guards";
 
 // src/components/Input/InputStyledComponent.tsx
-import { styled as styled33, css as css17 } from "styled-components";
-var focusStyle = css17`
+import { styled as styled33, css as css18 } from "styled-components";
+var focusStyle = css18`
   border-color: ${({ theme: theme2 }) => theme2.color.brandBlue500};
   outline: none;
 `;
-var errorStyle2 = css17`
+var errorStyle2 = css18`
   border-color: ${({ theme: theme2 }) => theme2.color.error500};
 
   &:focus {
     border-color: ${({ theme: theme2 }) => theme2.color.error600};
   }
 `;
-var disabledStyle6 = css17`
+var disabledStyle6 = css18`
   -webkit-opacity: 0.5;
   -webkit-text-fill-color: ${({ theme: theme2 }) => theme2.color.grey700};
   color: ${({ theme: theme2 }) => theme2.color.grey900}; /* iOS */
@@ -7997,7 +8138,7 @@ var disabledStyle6 = css17`
     border-color: ${({ theme: theme2 }) => theme2.color.grey300};
   }
 `;
-var readOnlyStyle = css17`
+var readOnlyStyle = css18`
   border: dashed 1px ${({ theme: theme2 }) => theme2.color.grey400};
   color: ${({ theme: theme2 }) => theme2.color.grey700};
   outline: none;
@@ -8006,15 +8147,15 @@ var readOnlyStyle = css17`
     border-color: ${({ theme: theme2 }) => theme2.color.grey300} !important;
   }
 `;
-var clickToCopyStyle = css17`
+var clickToCopyStyle = css18`
   ${readOnlyStyle}
   flex: 1;
 `;
-var textareaStyle = css17`
+var textareaStyle = css18`
   line-height: 20px;
   min-height: 80px;
 `;
-var inputStyle = css17`
+var inputStyle = css18`
   background-color: white;
   border: 1px solid ${({ theme: theme2 }) => theme2.color.grey400};
   border-radius: 4px;
@@ -8083,11 +8224,11 @@ var InputStyledComponent = styled33.input`
 
 // src/components/Input/ClickToCopy.tsx
 import { useState as useState17, useEffect as useEffect15 } from "react";
-import { styled as styled34, css as css18 } from "styled-components";
+import { styled as styled34, css as css19 } from "styled-components";
 import { isFunction as isFunction2 } from "@wistia/type-guards";
 import { darken as darken4 } from "polished";
 import { jsx as jsx159, jsxs as jsxs24 } from "react/jsx-runtime";
-var clickToCopyWrapperEnabledStyles = css18`
+var clickToCopyWrapperEnabledStyles = css19`
   input {
     cursor: pointer;
   }
@@ -8102,10 +8243,10 @@ var ClickToCopyWrapper = styled34.div`
   position: relative;
   ${({ $disabled }) => !$disabled && clickToCopyWrapperEnabledStyles}
 `;
-var disabledClickToCopyButtonStyles = css18`
+var disabledClickToCopyButtonStyles = css19`
   cursor: not-allowed;
 `;
-var enabledClickToCopyButtonStyles = css18`
+var enabledClickToCopyButtonStyles = css19`
   &:hover {
     color: ${({ theme: theme2 }) => darken4("4%", theme2.color.grey700)};
   }
@@ -8619,15 +8760,15 @@ import { isNil as isNil10, isBoolean as isBoolean2 } from "@wistia/type-guards";
 
 // src/components/Select/Select.tsx
 import { forwardRef as forwardRef13 } from "react";
-import { styled as styled38, css as css20 } from "styled-components";
+import { styled as styled38, css as css21 } from "styled-components";
 import { isBoolean, isNonEmptyString as isNonEmptyString7, isNotNil as isNotNil21 } from "@wistia/type-guards";
 
 // src/components/Select/SelectStyledComponent.tsx
-import { styled as styled37, css as css19 } from "styled-components";
-var focusStyle2 = css19`
+import { styled as styled37, css as css20 } from "styled-components";
+var focusStyle2 = css20`
   border: 1px solid ${({ theme: theme2 }) => theme2.color.brandBlue500};
 `;
-var disabledStyle7 = css19`
+var disabledStyle7 = css20`
   color: ${({ theme: theme2 }) => theme2.color.grey900};
   cursor: not-allowed;
   opacity: 0.5;
@@ -8636,7 +8777,7 @@ var disabledStyle7 = css19`
     border-color: ${({ theme: theme2 }) => theme2.color.grey300};
   }
 `;
-var errorStyle3 = css19`
+var errorStyle3 = css20`
   border: 1px solid ${({ theme: theme2 }) => theme2.color.error500};
 `;
 var SelectStyledComponent = styled37.select`
@@ -8705,7 +8846,7 @@ var SelectWrapper = styled38.div`
     top: ${({ theme: theme2 }) => theme2.spacing.space03};
 
     /* fakes the focus state of the svg for documentation purposes */
-    ${({ theme: theme2, $forceState }) => $forceState === "focus" && css20`
+    ${({ theme: theme2, $forceState }) => $forceState === "focus" && css21`
         color: ${getSvgColor(theme2, false, true)};
       `}
   }
@@ -9232,7 +9373,7 @@ var Leaf = ({
 
 // src/components/RichTextEditor/Element.tsx
 import { useSelected, useFocused } from "slate-react";
-import { styled as styled39, css as css21 } from "styled-components";
+import { styled as styled39, css as css22 } from "styled-components";
 import { jsx as jsx170, jsxs as jsxs28 } from "react/jsx-runtime";
 var Wrapper = styled39.span`
   display: 'inline-block';
@@ -9244,7 +9385,7 @@ var Image = styled39.img`
   max-width: 100%;
   user-select: none;
 `;
-var listStyle = css21`
+var listStyle = css22`
   padding: 0 ${({ theme: theme2 }) => theme2.spacing.space05};
 
   li {
@@ -9260,7 +9401,7 @@ var EditorOrderedList = styled39.ol`
 var EditorUnorderedList = styled39.ul`
   ${listStyle}
 `;
-var headerStyle = css21`
+var headerStyle = css22`
   font-weight: 500;
 `;
 var EditorHeading1 = styled39.h1`
@@ -10562,7 +10703,7 @@ LinkButton.displayName = "LinkButton_VHS";
 
 // src/components/List/List.tsx
 import { isNotNil as isNotNil29 } from "@wistia/type-guards";
-import { styled as styled49, css as css22 } from "styled-components";
+import { styled as styled49, css as css23 } from "styled-components";
 
 // src/components/List/ListItem.tsx
 import { styled as styled48 } from "styled-components";
@@ -10581,7 +10722,7 @@ ListItem.displayName = "ListItem_VHS";
 
 // src/components/List/List.tsx
 import { jsx as jsx192, jsxs as jsxs33 } from "react/jsx-runtime";
-var spacesStyle = css22`
+var spacesStyle = css23`
   overflow: hidden;
   padding-left: 0;
   vertical-align: bottom;
@@ -10603,7 +10744,7 @@ var spacesStyle = css22`
     }
   }
 `;
-var commasStyle = css22`
+var commasStyle = css23`
   ${spacesStyle};
 
   li {
@@ -10613,7 +10754,7 @@ var commasStyle = css22`
     }
   }
 `;
-var slashesStyle = css22`
+var slashesStyle = css23`
   ${spacesStyle};
 
   li {
@@ -10624,7 +10765,7 @@ var slashesStyle = css22`
     }
   }
 `;
-var breadcrumbsStyle = css22`
+var breadcrumbsStyle = css23`
   ${spacesStyle};
 
   li {
@@ -10635,7 +10776,7 @@ var breadcrumbsStyle = css22`
     }
   }
 `;
-var unbulletedStyle = css22`
+var unbulletedStyle = css23`
   list-style: none;
   padding-left: 0;
 `;
@@ -10722,7 +10863,7 @@ List.displayName = "List_VHS";
 import { DropdownMenuRadioGroup } from "@radix-ui/react-dropdown-menu";
 
 // src/components/Menu/Menu.tsx
-import { styled as styled50, css as css23, keyframes } from "styled-components";
+import { styled as styled50, css as css24, keyframes } from "styled-components";
 import {
   DropdownMenu,
   DropdownMenuTrigger,
@@ -10752,7 +10893,7 @@ var close = keyframes`
     transform: scale(.97) translateY(-8px);
   }
 `;
-var menuContentCss = css23`
+var menuContentCss = css24`
   animation: ${open} ${({ theme: theme2 }) => theme2.duration.productive.moderate}
     ${({ theme: theme2 }) => theme2.easing.entrance.productive};
   background: white;
@@ -10840,12 +10981,12 @@ import {
   DropdownMenuSubTrigger
 } from "@radix-ui/react-dropdown-menu";
 import { isNonEmptyString as isNonEmptyString13, isNotNil as isNotNil31, isNotUndefined as isNotUndefined13 } from "@wistia/type-guards";
-import { styled as styled51, css as css24 } from "styled-components";
+import { styled as styled51, css as css25 } from "styled-components";
 import { darken as darken5 } from "polished";
 import { jsx as jsx194, jsxs as jsxs35 } from "react/jsx-runtime";
 var hoverDarken2 = "0.04";
 var focusDarken = "0.08";
-var dangerousMenuItemStyles = css24`
+var dangerousMenuItemStyles = css25`
   color: ${({ theme: theme2 }) => theme2.color.error700};
 
   &:focus,
@@ -10857,7 +10998,7 @@ var dangerousMenuItemStyles = css24`
     background-color: ${({ theme: theme2 }) => darken5(hoverDarken2, theme2.color.error100)};
   }
 `;
-var pricingMenuItemStyles = css24`
+var pricingMenuItemStyles = css25`
   color: ${({ theme: theme2 }) => theme2.color.purple600};
 
   &:focus,
@@ -11172,11 +11313,11 @@ var SubMenu = ({ label, icon, description, children }) => {
 // src/components/MenuButton/MenuButton.tsx
 import { useCallback as useCallback13, cloneElement, useState as useState21, useLayoutEffect as useLayoutEffect5, useRef as useRef13 } from "react";
 import { isFunction as isFunction3, isNotNil as isNotNil34 } from "@wistia/type-guards";
-import { styled as styled56, css as css26 } from "styled-components";
+import { styled as styled56, css as css27 } from "styled-components";
 
 // src/private/components/Menu/Menu.tsx
 import { forwardRef as forwardRef16, useRef as useRef12, useEffect as useEffect20 } from "react";
-import { styled as styled54, css as css25 } from "styled-components";
+import { styled as styled54, css as css26 } from "styled-components";
 import { darken as darken6 } from "polished";
 import { isNotNil as isNotNil32, isNonEmptyString as isNonEmptyString14 } from "@wistia/type-guards";
 import { Fragment as Fragment12, jsx as jsx197, jsxs as jsxs37 } from "react/jsx-runtime";
@@ -11203,7 +11344,7 @@ var MenuComponent = styled54.div`
     padding: ${GUTTER_WIDTH};
   }
 `;
-var dangerousMenuItemStyles2 = css25`
+var dangerousMenuItemStyles2 = css26`
   /* stylelint-disable no-descending-specificity */
   button,
   a {
@@ -11218,7 +11359,7 @@ var dangerousMenuItemStyles2 = css25`
     }
   }
 `;
-var disabledMenuItemStyles = css25`
+var disabledMenuItemStyles = css26`
   button,
   a {
     background-color: transparent;
@@ -11407,11 +11548,11 @@ var MenuHeader = ({
 // src/components/MenuButton/MenuButton.tsx
 import { jsx as jsx199, jsxs as jsxs39 } from "react/jsx-runtime";
 var MARGIN_BETWEEN_BUTTON_AND_MENU = 8;
-var menuPositionAboveCss = css26`
+var menuPositionAboveCss = css27`
   bottom: 0;
   margin-bottom: ${({ $dropdownButtonHeight }) => $dropdownButtonHeight + MARGIN_BETWEEN_BUTTON_AND_MENU}px;
 `;
-var menuPositionBelowCss = css26`
+var menuPositionBelowCss = css27`
   margin-top: ${({ $dropdownButtonHeight }) => $dropdownButtonHeight + MARGIN_BETWEEN_BUTTON_AND_MENU}px;
   top: 0;
 `;
@@ -11547,7 +11688,7 @@ MenuButton.displayName = "MenuButton_VHS";
 
 // src/components/Modal/Modal.tsx
 import { forwardRef as forwardRef17, useEffect as useEffect21, useRef as useRef14 } from "react";
-import { styled as styled58, css as css27 } from "styled-components";
+import { styled as styled58, css as css28 } from "styled-components";
 import { hasKey, isNotNil as isNotNil35, isNotUndefined as isNotUndefined15 } from "@wistia/type-guards";
 import { createPortal as createPortal3 } from "react-dom";
 
@@ -11594,14 +11735,14 @@ import { jsx as jsx200 } from "react/jsx-runtime";
 var StyledBackdrop = styled58(Backdrop)`
   display: flex;
 
-  ${({ $allowModalToExceedViewportBounds }) => $allowModalToExceedViewportBounds && css27`
+  ${({ $allowModalToExceedViewportBounds }) => $allowModalToExceedViewportBounds && css28`
       ${mq.smAndUp} {
         padding: ${({ theme: theme2 }) => theme2.spacing.space05};
       }
     `}
 `;
 var StyledDialog = styled58(Dialog)`
-  ${({ $allowModalToExceedViewportBounds }) => $allowModalToExceedViewportBounds && css27`
+  ${({ $allowModalToExceedViewportBounds }) => $allowModalToExceedViewportBounds && css28`
       ${mq.smAndUp} {
         max-height: min-content;
         margin: auto;
@@ -13269,7 +13410,7 @@ var RangeSelector = ({
 RangeSelector.displayName = "RangeSelector_VHS";
 
 // src/components/Slider/Slider.tsx
-import { styled as styled67, css as css28 } from "styled-components";
+import { styled as styled67, css as css29 } from "styled-components";
 import ReactSlider from "react-slider";
 import {
   isFunction as isFunction4,
@@ -13281,7 +13422,7 @@ import {
 } from "@wistia/type-guards";
 import { jsx as jsx209 } from "react/jsx-runtime";
 var TRACK_SIZE = "4px";
-var DisabledSliderStyles = css28`
+var DisabledSliderStyles = css29`
   opacity: 0.5;
 
   & * {
@@ -13446,7 +13587,7 @@ var Stack = forwardRef18(
 Stack.displayName = "Stack_VHS";
 
 // src/components/Switch/Switch.tsx
-import { styled as styled69, css as css29 } from "styled-components";
+import { styled as styled69, css as css30 } from "styled-components";
 import { jsx as jsx211 } from "react/jsx-runtime";
 var SwitchComponent = styled69.button`
   background-color: white;
@@ -13485,7 +13626,7 @@ var SwitchComponent = styled69.button`
     opacity: 0.5;
   }
 `;
-var ShowTextStyles = css29`
+var ShowTextStyles = css30`
   &::before,
   &::after {
     display: inline-block;