@wistia/vhs 3.0.1-beta.cd0ec91c.fd8df29 → 3.0.1-beta.de727c7e.149ab3d

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/vhs v3.0.1-beta.cd0ec91c.fd8df29
+ * @license @wistia/vhs v3.0.1-beta.de727c7e.149ab3d
  *
  * Copyright (c) 2021-2025, Wistia, Inc. and its affiliates.
  *
@@ -950,7 +950,7 @@ import { useState as useState3, useCallback as useCallback2 } from "react";
 import { memo, useState as useState2, useEffect, useCallback, Fragment as Fragment3 } from "react";
 import { createPortal } from "react-dom";
 import { LiveMessage as LiveMessage2 } from "react-aria-live";
-import { styled as styled3 } from "styled-components";
+import styled3 from "styled-components";
 import { isNonEmptyString as isNonEmptyString2 } from "@wistia/type-guards";
 
 // src/components/Toast/ToastAnimation.tsx
@@ -1092,7 +1092,7 @@ import { forwardRef } from "react";
 import { isNotNil as isNotNil3 } from "@wistia/type-guards";
 
 // src/components/Button/ButtonContent.tsx
-import { styled } from "styled-components";
+import styled from "styled-components";
 import { isNotNil as isNotNil2 } from "@wistia/type-guards";
 import { LiveMessage } from "react-aria-live";
 
@@ -2858,7 +2858,7 @@ var ButtonContent = ({
 };
 
 // src/components/Button/ButtonStyledComponent.tsx
-import { styled as styled2, css as css2 } from "styled-components";
+import styled2, { css as css2 } from "styled-components";
 import { darken, transparentize } from "polished";
 var hoverDarken = "0.04";
 var activeDarken = "0.08";
@@ -4456,7 +4456,7 @@ var usePreviousValue = (value) => {
 };
 
 // src/components/ActionModal/ActionModal.tsx
-import { styled as styled12 } from "styled-components";
+import styled12 from "styled-components";
 import { isNotNil as isNotNil8 } from "@wistia/type-guards";
 
 // src/components/ModalBase/ModalBase.tsx
@@ -4659,7 +4659,7 @@ var ModalBase = (props) => {
 ModalBase.displayName = "ModalBase_VHS";
 
 // src/components/ButtonGroup/ButtonGroup.tsx
-import { styled as styled4 } from "styled-components";
+import styled4 from "styled-components";
 import { isNil as isNil3 } from "@wistia/type-guards";
 import { jsx as jsx122 } from "react/jsx-runtime";
 var getAlignment = (align) => {
@@ -4721,11 +4721,11 @@ ButtonGroup.displayName = "ButtonGroup_VHS";
 
 // src/components/Text/Text.tsx
 import { forwardRef as forwardRef2 } from "react";
-import { styled as styled6, css as css6 } from "styled-components";
+import styled6, { css as css6 } from "styled-components";
 
 // src/components/Ellipsis/Ellipsis.tsx
 import { isNotNil as isNotNil6 } from "@wistia/type-guards";
-import { styled as styled5, css as css5 } from "styled-components";
+import styled5, { css as css5 } from "styled-components";
 import { jsx as jsx123 } from "react/jsx-runtime";
 var ellipsisStyle = css5`
   overflow: hidden;
@@ -4917,7 +4917,7 @@ var Text = forwardRef2(
 Text.displayName = "Text_VHS";
 
 // src/components/Backdrop/Backdrop.tsx
-import { styled as styled7 } from "styled-components";
+import styled7 from "styled-components";
 import { jsx as jsx125 } from "react/jsx-runtime";
 var alignVerticalMap = {
   normal: "normal",
@@ -4966,12 +4966,12 @@ Backdrop.displayName = "Backdrop_VHS";
 
 // src/components/IconButton/IconButton.tsx
 import { forwardRef as forwardRef3, useMemo as useMemo5 } from "react";
-import { styled as styled11, css as css9 } from "styled-components";
+import styled11, { css as css9 } from "styled-components";
 import { transparentize as transparentize2 } from "polished";
 import { isNonEmptyString as isNonEmptyString3 } from "@wistia/type-guards";
 
 // src/components/ScreenReaderOnly/ScreenReaderOnly.tsx
-import { styled as styled8, css as css7 } from "styled-components";
+import styled8, { css as css7 } from "styled-components";
 import { isNotNil as isNotNil7 } from "@wistia/type-guards";
 import { jsx as jsx126 } from "react/jsx-runtime";
 var screenReaderOnlyStyle = css7`
@@ -5009,11 +5009,11 @@ ScreenReaderOnly.displayName = "ScreenReaderOnly_VHS";
 
 // src/components/Tooltip/Tooltip.tsx
 import { useEffect as useEffect9, useState as useState12, useRef as useRef9, useMemo as useMemo4, useId } from "react";
-import { styled as styled10 } from "styled-components";
+import styled10 from "styled-components";
 import { isString as isString3 } from "@wistia/type-guards";
 
 // src/components/Tooltip/TooltipContent.tsx
-import { styled as styled9, css as css8 } from "styled-components";
+import styled9, { css as css8 } from "styled-components";
 import { jsx as jsx127 } from "react/jsx-runtime";
 var ARROW_SIZE = 8;
 var StyledTooltipLabel = styled9.div`
@@ -5681,7 +5681,7 @@ ActionModal.displayName = "ActionModal_VHS";
 // src/components/Avatar/Avatar.tsx
 import { useMemo as useMemo6, useState as useState13, useEffect as useEffect10 } from "react";
 import { isNil as isNil6 } from "@wistia/type-guards";
-import { styled as styled13 } from "styled-components";
+import styled13 from "styled-components";
 
 // src/components/Avatar/generateContactAvatarColors.tsx
 var colorVariants = {
@@ -5831,7 +5831,7 @@ var Avatar = ({
 Avatar.displayName = "Avatar_VHS";
 
 // src/components/BackgroundImage/BackgroundImage.tsx
-import { styled as styled14 } from "styled-components";
+import styled14 from "styled-components";
 import { isString as isString5 } from "@wistia/type-guards";
 import { jsx as jsx134 } from "react/jsx-runtime";
 var shouldWrap = (src) => {
@@ -5935,7 +5935,7 @@ var BackgroundImage = ({
 BackgroundImage.displayName = "BackgroundImage_VHS";
 
 // src/components/Badge/Badge.tsx
-import { styled as styled15 } from "styled-components";
+import styled15 from "styled-components";
 import { isNotNil as isNotNil9 } from "@wistia/type-guards";
 
 // src/components/Badge/getBadgeColors.ts
@@ -6046,11 +6046,11 @@ var Badge = ({
 Badge.displayName = "Badge_VHS";
 
 // src/components/Banner/Banner.tsx
-import { styled as styled17 } from "styled-components";
+import styled17 from "styled-components";
 import { isNotNil as isNotNil10 } from "@wistia/type-guards";
 
 // src/components/Banner/BannerChildComponents.tsx
-import { styled as styled16, css as css11 } from "styled-components";
+import styled16, { css as css11 } from "styled-components";
 import { jsx as jsx136 } from "react/jsx-runtime";
 var BodyComponent = styled16.div`
   color: ${({ theme: theme2 }) => theme2.color.grey900};
@@ -6149,7 +6149,7 @@ Banner.displayName = "Banner_VHS";
 
 // src/components/Box/Box.tsx
 import { forwardRef as forwardRef4 } from "react";
-import { styled as styled18 } from "styled-components";
+import styled18 from "styled-components";
 import { isNotNil as isNotNil11 } from "@wistia/type-guards";
 import { jsx as jsx138 } from "react/jsx-runtime";
 var ALIGN_CONTENT_MAP = {
@@ -6289,11 +6289,11 @@ Box.displayName = "Box_VHS";
 
 // src/components/ButtonLink/ButtonLink.tsx
 import { forwardRef as forwardRef6 } from "react";
-import { styled as styled20, css as css13 } from "styled-components";
+import styled20 from "styled-components";
 import { isNotNil as isNotNil12 } from "@wistia/type-guards";
 
 // src/components/Link/Link.tsx
-import { styled as styled19 } from "styled-components";
+import styled19 from "styled-components";
 import { forwardRef as forwardRef5 } from "react";
 
 // src/components/Link/linkStyle.tsx
@@ -6509,149 +6509,8 @@ 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)`
-  ${buttonLinkStyle};
+  ${buttonStyle};
 
   /* Links are disabled by removing their href */
   &:not([href]) {
@@ -6690,42 +6549,39 @@ var ButtonLink = forwardRef6(
       }
       return null;
     };
-    return /* @__PURE__ */ jsx140(
-      StyledButtonLink,
+    const styledProps = {
+      ref,
+      $buttonColor: buttonColor,
+      $forceState: forceState,
+      $fullWidth: fullWidth,
+      $icon: icon,
+      $iconPosition: iconPosition,
+      $isLoading: false,
+      $labelWrap: labelWrap,
+      $size: size,
+      $square: square,
+      $textAlign: textAlign,
+      $variant: variant,
+      beforeAction,
+      disabled,
+      href,
+      params,
+      type,
+      unstyled: true,
+      ...otherProps
+    };
+    return /* @__PURE__ */ jsx140(StyledButtonLink, { ...styledProps, children: /* @__PURE__ */ jsx140(
+      ButtonContent,
       {
-        ref,
-        $buttonColor: buttonColor,
-        $forceState: forceState,
-        $fullWidth: fullWidth,
-        $icon: icon,
-        $iconPosition: iconPosition,
-        $isLoading: false,
-        $labelWrap: labelWrap,
-        $size: size,
-        $square: square,
-        $textAlign: textAlign,
-        $variant: variant,
-        ...beforeAction && { beforeAction },
-        disabled,
-        href,
-        ...params && { params },
-        type,
-        unstyled: true,
-        ...otherProps,
-        children: /* @__PURE__ */ jsx140(
-          ButtonContent,
-          {
-            icon,
-            iconName,
-            iconPosition,
-            isLoading: false,
-            size,
-            textAlign,
-            children: getContent()
-          }
-        )
+        icon,
+        iconName,
+        iconPosition,
+        isLoading: false,
+        size,
+        textAlign,
+        children: getContent()
       }
-    );
+    ) });
   }
 );
 ButtonLink.displayName = "ButtonLink_VHS";
@@ -6735,7 +6591,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 css14 } from "styled-components";
+import styled21, { css as css13 } from "styled-components";
 var OptionWrapper = styled21.input`
   align-self: flex-start;
   border-radius: 3px;
@@ -6760,15 +6616,15 @@ var OptionSubLabel = styled21.div`
   font-size: 12px;
   line-height: 16px;
 `;
-var disabledStyle3 = css14`
+var disabledStyle3 = css13`
   cursor: not-allowed;
   opacity: 0.5;
 `;
-var errorHoverStyle = css14`
+var errorHoverStyle = css13`
   border-color: transparent;
 `;
-var errorFocusedStyle = css14``;
-var errorStyle = css14`
+var errorFocusedStyle = css13``;
+var errorStyle = css13`
   background-color: ${({ theme: theme2 }) => theme2.color.error100};
   border: 1px solid ${({ theme: theme2 }) => theme2.color.error500};
 
@@ -6778,11 +6634,11 @@ var errorStyle = css14`
     border-color: transparent !important;
   }
 `;
-var defaultHoverStyle = css14`
+var defaultHoverStyle = css13`
   background-color: ${({ theme: theme2 }) => theme2.color.grey300};
   cursor: pointer;
 `;
-var defaultFocusedStyle = css14`
+var defaultFocusedStyle = css13`
   ${defaultHoverStyle}
 `;
 var Container = styled21.label`
@@ -6868,22 +6724,22 @@ var Checkbox = forwardRef7(
 Checkbox.displayName = "Checkbox_VHS";
 
 // src/components/CheckboxGroup/CheckboxGroup.tsx
-import { styled as styled26 } from "styled-components";
+import styled26 from "styled-components";
 import { isNotNil as isNotNil13 } from "@wistia/type-guards";
 
 // src/private/components/FormFieldWrapper/FormFieldWrapper.tsx
-import { styled as styled25 } from "styled-components";
+import styled25 from "styled-components";
 
 // src/components/Label/Label.tsx
-import { styled as styled22, css as css15 } from "styled-components";
+import styled22, { css as css14 } from "styled-components";
 import { jsx as jsx142 } from "react/jsx-runtime";
-var requiredStyle = css15`
+var requiredStyle = css14`
   &::after {
     color: red;
     content: ' *';
   }
 `;
-var disabledStyle4 = css15`
+var disabledStyle4 = css14`
   color: ${({ theme: theme2 }) => theme2.color.grey500};
 `;
 var SPACE_BETWEEN_LABEL_AND_INPUT = "8px";
@@ -6935,7 +6791,7 @@ var Label = ({
 Label.displayName = "Label_VHS";
 
 // src/components/FormFieldError/FormFieldError.tsx
-import { styled as styled23 } from "styled-components";
+import styled23 from "styled-components";
 import { isNil as isNil7 } from "@wistia/type-guards";
 import { jsx as jsx143 } from "react/jsx-runtime";
 var FieldError = styled23.div`
@@ -6959,9 +6815,9 @@ var FormFieldError = ({
 FormFieldError.displayName = "FormFieldError_VHS";
 
 // src/components/LabelDescription/LabelDescription.tsx
-import { styled as styled24, css as css16 } from "styled-components";
+import styled24, { css as css15 } from "styled-components";
 import { jsx as jsx144 } from "react/jsx-runtime";
-var disabledStyle5 = css16`
+var disabledStyle5 = css15`
   color: ${({ theme: theme2 }) => theme2.color.grey500};
 `;
 var LabelDescriptionComponent = styled24.div`
@@ -7078,7 +6934,7 @@ CheckboxGroup.displayName = "CheckboxGroup_VHS";
 
 // src/components/ClickArea/ClickArea.tsx
 import { forwardRef as forwardRef8, useCallback as useCallback9 } from "react";
-import { styled as styled27 } from "styled-components";
+import styled27 from "styled-components";
 import { jsx as jsx147 } from "react/jsx-runtime";
 var ClickAreaComponent = styled27.div`
   cursor: pointer;
@@ -7122,7 +6978,7 @@ var ClickArea = forwardRef8(
 ClickArea.displayName = "ClickArea_VHS";
 
 // src/components/CloseButton/CloseButton.tsx
-import { styled as styled28 } from "styled-components";
+import styled28 from "styled-components";
 
 // src/components/CloseButton/CloseIcon.tsx
 import { jsx as jsx148 } from "react/jsx-runtime";
@@ -7186,7 +7042,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 css17 } from "styled-components";
+import styled29, { css as css16 } 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";
@@ -7271,7 +7127,7 @@ var Caret = styled29.span`
     width: 100%;
   }
 `;
-var showOnHoverStyles = () => css17`
+var showOnHoverStyles = () => css16`
   opacity: 0;
   transition: opacity ${TRANSITION_TIME2} ease-out;
 
@@ -7478,7 +7334,7 @@ var CollapsibleGroup = ({
 CollapsibleGroup.displayName = "CollapsibleGroup_VHS";
 
 // src/components/Divider/Divider.tsx
-import { styled as styled30 } from "styled-components";
+import styled30 from "styled-components";
 import { jsx as jsx151 } from "react/jsx-runtime";
 var DividerComponent = styled30.hr`
   background: none;
@@ -7515,7 +7371,7 @@ Divider.displayName = "Divider_VHS";
 
 // src/components/FileSelect/FileSelect.tsx
 import { forwardRef as forwardRef9 } from "react";
-import { styled as styled31 } from "styled-components";
+import styled31 from "styled-components";
 import { jsx as jsx152, jsxs as jsxs21 } from "react/jsx-runtime";
 var maxFileSizeInGigs = 26;
 var defaultMaximumFileSize = maxFileSizeInGigs * 1024;
@@ -7611,7 +7467,7 @@ import { isNotNil as isNotNil15, isNotUndefined as isNotUndefined5, isUndefined
 // src/components/FormGlobalError/FormGlobalError.tsx
 import { forwardRef as forwardRef10 } from "react";
 import { useFormikContext as useFormikContext2 } from "formik";
-import { styled as styled32 } from "styled-components";
+import styled32 from "styled-components";
 import { isNonEmptyString as isNonEmptyString6, isNotNil as isNotNil14 } from "@wistia/type-guards";
 import { jsx as jsx153, jsxs as jsxs22 } from "react/jsx-runtime";
 var GlobalErrorsContainer = styled32.div`
@@ -7943,7 +7799,7 @@ FormButtons.displayName = "FormButtons_VHS";
 
 // src/components/FormField/FormField.tsx
 import { forwardRef as forwardRef14 } from "react";
-import { styled as styled43 } from "styled-components";
+import styled43 from "styled-components";
 import { Field } from "formik";
 
 // src/components/FormField/inputTypeMap.ts
@@ -8111,23 +7967,23 @@ import { isNotUndefined as isNotUndefined8 } from "@wistia/type-guards";
 
 // src/components/Input/Input.tsx
 import { forwardRef as forwardRef11, useEffect as useEffect16, useRef as useRef11 } from "react";
-import { styled as styled35 } from "styled-components";
+import styled35 from "styled-components";
 import { isNotNil as isNotNil18 } from "@wistia/type-guards";
 
 // src/components/Input/InputStyledComponent.tsx
-import { styled as styled33, css as css18 } from "styled-components";
-var focusStyle = css18`
+import styled33, { css as css17 } from "styled-components";
+var focusStyle = css17`
   border-color: ${({ theme: theme2 }) => theme2.color.brandBlue500};
   outline: none;
 `;
-var errorStyle2 = css18`
+var errorStyle2 = css17`
   border-color: ${({ theme: theme2 }) => theme2.color.error500};
 
   &:focus {
     border-color: ${({ theme: theme2 }) => theme2.color.error600};
   }
 `;
-var disabledStyle6 = css18`
+var disabledStyle6 = css17`
   -webkit-opacity: 0.5;
   -webkit-text-fill-color: ${({ theme: theme2 }) => theme2.color.grey700};
   color: ${({ theme: theme2 }) => theme2.color.grey900}; /* iOS */
@@ -8138,7 +7994,7 @@ var disabledStyle6 = css18`
     border-color: ${({ theme: theme2 }) => theme2.color.grey300};
   }
 `;
-var readOnlyStyle = css18`
+var readOnlyStyle = css17`
   border: dashed 1px ${({ theme: theme2 }) => theme2.color.grey400};
   color: ${({ theme: theme2 }) => theme2.color.grey700};
   outline: none;
@@ -8147,15 +8003,15 @@ var readOnlyStyle = css18`
     border-color: ${({ theme: theme2 }) => theme2.color.grey300} !important;
   }
 `;
-var clickToCopyStyle = css18`
+var clickToCopyStyle = css17`
   ${readOnlyStyle}
   flex: 1;
 `;
-var textareaStyle = css18`
+var textareaStyle = css17`
   line-height: 20px;
   min-height: 80px;
 `;
-var inputStyle = css18`
+var inputStyle = css17`
   background-color: white;
   border: 1px solid ${({ theme: theme2 }) => theme2.color.grey400};
   border-radius: 4px;
@@ -8224,11 +8080,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 css19 } from "styled-components";
+import styled34, { css as css18 } 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 = css19`
+var clickToCopyWrapperEnabledStyles = css18`
   input {
     cursor: pointer;
   }
@@ -8243,10 +8099,10 @@ var ClickToCopyWrapper = styled34.div`
   position: relative;
   ${({ $disabled }) => !$disabled && clickToCopyWrapperEnabledStyles}
 `;
-var disabledClickToCopyButtonStyles = css19`
+var disabledClickToCopyButtonStyles = css18`
   cursor: not-allowed;
 `;
-var enabledClickToCopyButtonStyles = css19`
+var enabledClickToCopyButtonStyles = css18`
   &:hover {
     color: ${({ theme: theme2 }) => darken4("4%", theme2.color.grey700)};
   }
@@ -8605,7 +8461,7 @@ FormConnectorInput.displayName = "FormConnectorInput";
 import { useCallback as useCallback11 } from "react";
 
 // src/components/RadioGroup/RadioGroup.tsx
-import { styled as styled36 } from "styled-components";
+import styled36 from "styled-components";
 import { isNotNil as isNotNil20 } from "@wistia/type-guards";
 
 // src/components/Radio/Radio.tsx
@@ -8760,15 +8616,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 css21 } from "styled-components";
+import styled38, { css as css20 } 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 css20 } from "styled-components";
-var focusStyle2 = css20`
+import styled37, { css as css19 } from "styled-components";
+var focusStyle2 = css19`
   border: 1px solid ${({ theme: theme2 }) => theme2.color.brandBlue500};
 `;
-var disabledStyle7 = css20`
+var disabledStyle7 = css19`
   color: ${({ theme: theme2 }) => theme2.color.grey900};
   cursor: not-allowed;
   opacity: 0.5;
@@ -8777,7 +8633,7 @@ var disabledStyle7 = css20`
     border-color: ${({ theme: theme2 }) => theme2.color.grey300};
   }
 `;
-var errorStyle3 = css20`
+var errorStyle3 = css19`
   border: 1px solid ${({ theme: theme2 }) => theme2.color.error500};
 `;
 var SelectStyledComponent = styled37.select`
@@ -8846,7 +8702,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" && css21`
+    ${({ theme: theme2, $forceState }) => $forceState === "focus" && css20`
         color: ${getSvgColor(theme2, false, true)};
       `}
   }
@@ -9057,12 +8913,12 @@ FormConnectorHidden.displayName = "FormConnectorHidden";
 
 // src/private/components/FormConnectorRichTextEditor/FormConnectorRichTextEditor.tsx
 import { useState as useState19, useEffect as useEffect19 } from "react";
-import { styled as styled42 } from "styled-components";
+import styled42 from "styled-components";
 import { isNotUndefined as isNotUndefined11 } from "@wistia/type-guards";
 
 // src/components/RichTextEditor/RichTextEditor.tsx
 import { useCallback as useCallback12, useMemo as useMemo7, useEffect as useEffect18 } from "react";
-import { styled as styled41 } from "styled-components";
+import styled41 from "styled-components";
 import { Editable, withReact, Slate, ReactEditor } from "slate-react";
 import { createEditor, Transforms as Transforms5, Element as Element6, Text as Text4 } from "slate";
 import { withHistory } from "slate-history";
@@ -9373,7 +9229,7 @@ var Leaf = ({
 
 // src/components/RichTextEditor/Element.tsx
 import { useSelected, useFocused } from "slate-react";
-import { styled as styled39, css as css22 } from "styled-components";
+import 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';
@@ -9385,7 +9241,7 @@ var Image = styled39.img`
   max-width: 100%;
   user-select: none;
 `;
-var listStyle = css22`
+var listStyle = css21`
   padding: 0 ${({ theme: theme2 }) => theme2.spacing.space05};
 
   li {
@@ -9401,7 +9257,7 @@ var EditorOrderedList = styled39.ol`
 var EditorUnorderedList = styled39.ul`
   ${listStyle}
 `;
-var headerStyle = css22`
+var headerStyle = css21`
   font-weight: 500;
 `;
 var EditorHeading1 = styled39.h1`
@@ -9493,7 +9349,7 @@ var Element2 = ({
 
 // src/components/RichTextEditor/EditorButtons.tsx
 import { useSlate } from "slate-react";
-import { styled as styled40 } from "styled-components";
+import styled40 from "styled-components";
 import { Node as Node2 } from "slate";
 import { isNonEmptyString as isNonEmptyString10 } from "@wistia/type-guards";
 
@@ -10410,7 +10266,7 @@ var FormField = forwardRef14(
 FormField.displayName = "FormField_VHS";
 
 // src/components/FullScreenModal/FullScreenModal.tsx
-import { styled as styled44 } from "styled-components";
+import styled44 from "styled-components";
 import { isNonEmptyString as isNonEmptyString12 } from "@wistia/type-guards";
 import { jsx as jsx187, jsxs as jsxs31 } from "react/jsx-runtime";
 var CloseButton2 = styled44(Button)`
@@ -10465,7 +10321,7 @@ var FullScreenModal = ({
 FullScreenModal.displayName = "FullScreenModal_VHS";
 
 // src/components/Image/Image.tsx
-import { styled as styled45 } from "styled-components";
+import styled45 from "styled-components";
 import { jsx as jsx188 } from "react/jsx-runtime";
 var getFillStyle2 = ($fillContainer) => {
   if ($fillContainer === "horizontal") {
@@ -10510,7 +10366,7 @@ var Image3 = ({
 Image3.displayName = "Image_VHS";
 
 // src/components/KeyboardShortcut/KeyboardShortcut.tsx
-import { styled as styled46 } from "styled-components";
+import styled46 from "styled-components";
 import { isNotNil as isNotNil27, isArray as isArray3 } from "@wistia/type-guards";
 import { jsx as jsx189, jsxs as jsxs32 } from "react/jsx-runtime";
 var KeyboardShortcutComponent = styled46.div`
@@ -10628,7 +10484,7 @@ KeyboardShortcut.displayName = "KeyboardShortcut_VHS";
 
 // src/components/LinkButton/LinkButton.tsx
 import { forwardRef as forwardRef15 } from "react";
-import { styled as styled47 } from "styled-components";
+import styled47 from "styled-components";
 import { isNotNil as isNotNil28, isNil as isNil15 } from "@wistia/type-guards";
 import { jsx as jsx190 } from "react/jsx-runtime";
 var isEnterOrSpace = (event) => event.key === "Enter" || event.key === " " || event.key === "Spacebar";
@@ -10703,10 +10559,10 @@ LinkButton.displayName = "LinkButton_VHS";
 
 // src/components/List/List.tsx
 import { isNotNil as isNotNil29 } from "@wistia/type-guards";
-import { styled as styled49, css as css23 } from "styled-components";
+import styled49, { css as css22 } from "styled-components";
 
 // src/components/List/ListItem.tsx
-import { styled as styled48 } from "styled-components";
+import styled48 from "styled-components";
 import { isNil as isNil16 } from "@wistia/type-guards";
 import { jsx as jsx191 } from "react/jsx-runtime";
 var ListItemComponent = styled48.li`
@@ -10722,7 +10578,7 @@ ListItem.displayName = "ListItem_VHS";
 
 // src/components/List/List.tsx
 import { jsx as jsx192, jsxs as jsxs33 } from "react/jsx-runtime";
-var spacesStyle = css23`
+var spacesStyle = css22`
   overflow: hidden;
   padding-left: 0;
   vertical-align: bottom;
@@ -10744,7 +10600,7 @@ var spacesStyle = css23`
     }
   }
 `;
-var commasStyle = css23`
+var commasStyle = css22`
   ${spacesStyle};
 
   li {
@@ -10754,7 +10610,7 @@ var commasStyle = css23`
     }
   }
 `;
-var slashesStyle = css23`
+var slashesStyle = css22`
   ${spacesStyle};
 
   li {
@@ -10765,7 +10621,7 @@ var slashesStyle = css23`
     }
   }
 `;
-var breadcrumbsStyle = css23`
+var breadcrumbsStyle = css22`
   ${spacesStyle};
 
   li {
@@ -10776,7 +10632,7 @@ var breadcrumbsStyle = css23`
     }
   }
 `;
-var unbulletedStyle = css23`
+var unbulletedStyle = css22`
   list-style: none;
   padding-left: 0;
 `;
@@ -10863,7 +10719,7 @@ List.displayName = "List_VHS";
 import { DropdownMenuRadioGroup } from "@radix-ui/react-dropdown-menu";
 
 // src/components/Menu/Menu.tsx
-import { styled as styled50, css as css24, keyframes } from "styled-components";
+import styled50, { css as css23, keyframes } from "styled-components";
 import {
   DropdownMenu,
   DropdownMenuTrigger,
@@ -10893,7 +10749,7 @@ var close = keyframes`
     transform: scale(.97) translateY(-8px);
   }
 `;
-var menuContentCss = css24`
+var menuContentCss = css23`
   animation: ${open} ${({ theme: theme2 }) => theme2.duration.productive.moderate}
     ${({ theme: theme2 }) => theme2.easing.entrance.productive};
   background: white;
@@ -10981,12 +10837,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 css25 } from "styled-components";
+import styled51, { css as css24 } 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 = css25`
+var dangerousMenuItemStyles = css24`
   color: ${({ theme: theme2 }) => theme2.color.error700};
 
   &:focus,
@@ -10998,7 +10854,7 @@ var dangerousMenuItemStyles = css25`
     background-color: ${({ theme: theme2 }) => darken5(hoverDarken2, theme2.color.error100)};
   }
 `;
-var pricingMenuItemStyles = css25`
+var pricingMenuItemStyles = css24`
   color: ${({ theme: theme2 }) => theme2.color.purple600};
 
   &:focus,
@@ -11240,7 +11096,7 @@ var SubMenuTrigger = ({
 };
 
 // src/components/Menu/MenuLabel.tsx
-import { styled as styled52 } from "styled-components";
+import styled52 from "styled-components";
 import { DropdownMenuLabel } from "@radix-ui/react-dropdown-menu";
 import { jsx as jsx195 } from "react/jsx-runtime";
 var StyledMenuLabel = styled52(DropdownMenuLabel)`
@@ -11262,7 +11118,7 @@ var MenuLabel = ({ children, ...props }) => {
 
 // src/components/Menu/SubMenu.tsx
 import { useState as useState20 } from "react";
-import { styled as styled53 } from "styled-components";
+import styled53 from "styled-components";
 import {
   DropdownMenuPortal as DropdownMenuPortal2,
   DropdownMenuSub,
@@ -11313,11 +11169,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 css27 } from "styled-components";
+import styled56, { css as css26 } 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 css26 } from "styled-components";
+import styled54, { css as css25 } 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";
@@ -11344,7 +11200,7 @@ var MenuComponent = styled54.div`
     padding: ${GUTTER_WIDTH};
   }
 `;
-var dangerousMenuItemStyles2 = css26`
+var dangerousMenuItemStyles2 = css25`
   /* stylelint-disable no-descending-specificity */
   button,
   a {
@@ -11359,7 +11215,7 @@ var dangerousMenuItemStyles2 = css26`
     }
   }
 `;
-var disabledMenuItemStyles = css26`
+var disabledMenuItemStyles = css25`
   button,
   a {
     background-color: transparent;
@@ -11520,7 +11376,7 @@ var Menu2 = forwardRef16(
 Menu2.displayName = "Menu";
 
 // src/components/MenuButton/MenuHeader.tsx
-import { styled as styled55 } from "styled-components";
+import styled55 from "styled-components";
 import { isNotNil as isNotNil33 } from "@wistia/type-guards";
 import { jsx as jsx198, jsxs as jsxs38 } from "react/jsx-runtime";
 var HeaderAndButton = styled55.div`
@@ -11548,11 +11404,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 = css27`
+var menuPositionAboveCss = css26`
   bottom: 0;
   margin-bottom: ${({ $dropdownButtonHeight }) => $dropdownButtonHeight + MARGIN_BETWEEN_BUTTON_AND_MENU}px;
 `;
-var menuPositionBelowCss = css27`
+var menuPositionBelowCss = css26`
   margin-top: ${({ $dropdownButtonHeight }) => $dropdownButtonHeight + MARGIN_BETWEEN_BUTTON_AND_MENU}px;
   top: 0;
 `;
@@ -11688,12 +11544,12 @@ 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 css28 } from "styled-components";
+import styled58, { css as css27 } from "styled-components";
 import { hasKey, isNotNil as isNotNil35, isNotUndefined as isNotUndefined15 } from "@wistia/type-guards";
 import { createPortal as createPortal3 } from "react-dom";
 
 // src/components/Modal/Dialog.tsx
-import { styled as styled57 } from "styled-components";
+import styled57 from "styled-components";
 var Dialog = styled57.div`
   background-color: white;
   box-sizing: border-box;
@@ -11735,14 +11591,14 @@ import { jsx as jsx200 } from "react/jsx-runtime";
 var StyledBackdrop = styled58(Backdrop)`
   display: flex;
 
-  ${({ $allowModalToExceedViewportBounds }) => $allowModalToExceedViewportBounds && css28`
+  ${({ $allowModalToExceedViewportBounds }) => $allowModalToExceedViewportBounds && css27`
       ${mq.smAndUp} {
         padding: ${({ theme: theme2 }) => theme2.spacing.space05};
       }
     `}
 `;
 var StyledDialog = styled58(Dialog)`
-  ${({ $allowModalToExceedViewportBounds }) => $allowModalToExceedViewportBounds && css28`
+  ${({ $allowModalToExceedViewportBounds }) => $allowModalToExceedViewportBounds && css27`
       ${mq.smAndUp} {
         max-height: min-content;
         margin: auto;
@@ -11866,7 +11722,7 @@ Modal.displayName = "Modal_VHS";
 ModalContent.displayName = "ModalContent_VHS";
 
 // src/components/Modal/ModalParts.tsx
-import { styled as styled59 } from "styled-components";
+import styled59 from "styled-components";
 import { jsx as jsx201 } from "react/jsx-runtime";
 var ModalHeader = styled59.div`
   align-items: center;
@@ -11910,7 +11766,7 @@ var ModalCloseButton2 = ({ onClick, ...props }) => {
 };
 
 // src/components/Paper/Paper.tsx
-import { styled as styled60 } from "styled-components";
+import styled60 from "styled-components";
 import { jsx as jsx202 } from "react/jsx-runtime";
 var PaperComponent = styled60.div`
   background-color: white;
@@ -11931,7 +11787,7 @@ var Paper = ({ children, elevation = 1, ...otherProps }) => {
 Paper.displayName = "Paper_VHS";
 
 // src/components/ProgressBar/ProgressBar.tsx
-import { styled as styled61 } from "styled-components";
+import styled61 from "styled-components";
 import { jsx as jsx203, jsxs as jsxs40 } from "react/jsx-runtime";
 var progressBarHeight = "8px";
 var ProgressBarContainer = styled61.div`
@@ -12007,13 +11863,13 @@ ProgressBar.displayName = "ProgressBar_VHS";
 
 // src/components/RangeSelector/RangeSelector.tsx
 import { useEffect as useEffect24, useState as useState24 } from "react";
-import { styled as styled66 } from "styled-components";
+import styled66 from "styled-components";
 import { isSameDay as isSameDay3 } from "date-fns";
 
 // src/private/components/RangeSelectorCalendar/RangeSelectorCalendar.tsx
 import { useEffect as useEffect22, useMemo as useMemo8, useState as useState22 } from "react";
 import { isNotNil as isNotNil37, isNil as isNil17 } from "@wistia/type-guards";
-import { styled as styled63 } from "styled-components";
+import styled63 from "styled-components";
 import { debounce as debounce2 } from "throttle-debounce";
 import {
   addDays,
@@ -12028,7 +11884,7 @@ import {
 } from "date-fns";
 
 // src/private/components/Calendar/Calendar.tsx
-import { styled as styled62 } from "styled-components";
+import styled62 from "styled-components";
 import {
   isBefore,
   isAfter,
@@ -12550,12 +12406,12 @@ RangeSelectorCalendar.displayName = "RangeSelectorCalendar";
 
 // src/private/components/RangeSelectorInput/RangeSelectorInput.tsx
 import { useCallback as useCallback14, useEffect as useEffect23, useRef as useRef15, useState as useState23 } from "react";
-import { styled as styled65 } from "styled-components";
+import styled65 from "styled-components";
 import { endOfDay as endOfDay3 } from "date-fns";
 import { isNotUndefined as isNotUndefined17, isUndefined as isUndefined4, isNotNil as isNotNil41 } from "@wistia/type-guards";
 
 // src/private/components/RangeSelectorInput/ErrorMessages.tsx
-import { styled as styled64 } from "styled-components";
+import styled64 from "styled-components";
 import { jsx as jsx206 } from "react/jsx-runtime";
 var ErrorMessagesList = styled64.ul`
   list-style: none;
@@ -13410,7 +13266,7 @@ var RangeSelector = ({
 RangeSelector.displayName = "RangeSelector_VHS";
 
 // src/components/Slider/Slider.tsx
-import { styled as styled67, css as css29 } from "styled-components";
+import styled67, { css as css28 } from "styled-components";
 import ReactSlider from "react-slider";
 import {
   isFunction as isFunction4,
@@ -13422,7 +13278,7 @@ import {
 } from "@wistia/type-guards";
 import { jsx as jsx209 } from "react/jsx-runtime";
 var TRACK_SIZE = "4px";
-var DisabledSliderStyles = css29`
+var DisabledSliderStyles = css28`
   opacity: 0.5;
 
   & * {
@@ -13559,7 +13415,7 @@ Slider.displayName = "Slider_VHS";
 
 // src/components/Stack/Stack.tsx
 import { forwardRef as forwardRef18 } from "react";
-import { styled as styled68 } from "styled-components";
+import styled68 from "styled-components";
 import { jsx as jsx210 } from "react/jsx-runtime";
 var StyledStack = styled68.div`
   display: flex;
@@ -13587,7 +13443,7 @@ var Stack = forwardRef18(
 Stack.displayName = "Stack_VHS";
 
 // src/components/Switch/Switch.tsx
-import { styled as styled69, css as css30 } from "styled-components";
+import styled69, { css as css29 } from "styled-components";
 import { jsx as jsx211 } from "react/jsx-runtime";
 var SwitchComponent = styled69.button`
   background-color: white;
@@ -13626,7 +13482,7 @@ var SwitchComponent = styled69.button`
     opacity: 0.5;
   }
 `;
-var ShowTextStyles = css30`
+var ShowTextStyles = css29`
   &::before,
   &::after {
     display: inline-block;
@@ -13708,7 +13564,7 @@ var Switch = ({
 Switch.displayName = "Switch_VHS";
 
 // src/components/Thumbnail/Thumbnail.tsx
-import { styled as styled70 } from "styled-components";
+import styled70 from "styled-components";
 import { isNotNil as isNotNil43 } from "@wistia/type-guards";
 import { jsx as jsx212, jsxs as jsxs44 } from "react/jsx-runtime";
 var ThumbnailComponent = styled70.div`
@@ -13864,7 +13720,7 @@ var Thumbnail = ({
 Thumbnail.displayName = "Thumbnail_VHS";
 
 // src/components/ThumbnailCollage/ThumbnailCollage.tsx
-import { styled as styled71 } from "styled-components";
+import styled71 from "styled-components";
 import { isNotNil as isNotNil44 } from "@wistia/type-guards";
 import { jsx as jsx213 } from "react/jsx-runtime";
 var ThumbnailCollageContainer = styled71.div`
@@ -13922,7 +13778,7 @@ var ThumbnailCollage = ({
 };
 
 // src/components/WistiaLogo/WistiaLogo.tsx
-import { styled as styled72 } from "styled-components";
+import styled72 from "styled-components";
 import { isNotNil as isNotNil45 } from "@wistia/type-guards";
 import { jsx as jsx214, jsxs as jsxs45 } from "react/jsx-runtime";
 var renderBrandmark = (brandmarkColor, iconOnly) => {