@wistia/vhs 3.0.2 → 4.0.0-beta.144ba507.317e0d6

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/vhs v3.0.2
+ * @license @wistia/vhs v4.0.0-beta.144ba507.317e0d6
  *
  * 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 styled3 from "styled-components";
+import { styled as 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 styled2, { css as css2 } from "styled-components";
+import { styled as styled2, css as css2 } from "styled-components";
 import { darken, transparentize } from "polished";
 var hoverDarken = "0.04";
 var activeDarken = "0.08";
@@ -3707,7 +3707,7 @@ var normalize = css3`
   [type='button'],
   [type='reset'],
   [type='submit'] {
-    appearance: button;
+    appearance: auto;
   }
 
   /**
@@ -3817,7 +3817,7 @@ var normalize = css3`
   */
 
   ::-webkit-file-upload-button {
-    appearance: button; /* 1 */
+    appearance: auto; /* 1 */
     font: inherit; /* 2 */
   }
 
@@ -3937,7 +3937,7 @@ import { useCallback as useCallback5 } from "react";
 import { useEffect as useEffect2, useRef as useRef2, useState as useState5 } from "react";
 var useTimedToggle = (initialValue) => {
   const [value, setValue] = useState5(false);
-  const timeoutRef = useRef2();
+  const timeoutRef = useRef2(void 0);
   const initialValueRef = useRef2(initialValue);
   const toggleValue = (timeout2) => {
     clearTimeout(timeoutRef.current);
@@ -4010,8 +4010,8 @@ var isEventTargetSupported = (eventTarget) => (
   Boolean(typeof eventTarget === "object" && eventTarget?.addEventListener)
 );
 var useEvent = (eventName, eventHandler, eventTarget = window, eventOptions = {}) => {
-  const savedEventHandler = useRef4();
-  const savedEventOptions = useRef4();
+  const savedEventHandler = useRef4(void 0);
+  const savedEventOptions = useRef4(void 0);
   useEffect3(() => {
     savedEventHandler.current = eventHandler;
   }, [eventHandler]);
@@ -4448,7 +4448,7 @@ var usePreventScroll = (locked) => {
 // src/hooks/usePreviousValue/usePreviousValue.ts
 import { useEffect as useEffect7, useRef as useRef7 } from "react";
 var usePreviousValue = (value) => {
-  const ref = useRef7();
+  const ref = useRef7(void 0);
   useEffect7(() => {
     ref.current = value;
   });
@@ -4456,7 +4456,7 @@ var usePreviousValue = (value) => {
 };
 
 // src/components/ActionModal/ActionModal.tsx
-import styled12 from "styled-components";
+import { styled as styled12 } from "styled-components";
 import { isNotNil as isNotNil8 } from "@wistia/type-guards";
 
 // src/components/ModalBase/ModalBase.tsx
@@ -4545,7 +4545,7 @@ var ModalBaseContent = ({
   const wasJustShown = usePreviousValue(isShown);
   const hide = () => setIsShownAttempted(false);
   const show = useCallback8(() => setIsShownAttempted(true), []);
-  const toggleButtonRef = useRef8();
+  const toggleButtonRef = useRef8(void 0);
   const modalEl = document.createElement("div");
   modalEl.classList.add("Modal");
   if (isNotUndefined2(className)) {
@@ -4659,7 +4659,7 @@ var ModalBase = (props) => {
 ModalBase.displayName = "ModalBase_VHS";
 
 // src/components/ButtonGroup/ButtonGroup.tsx
-import styled4 from "styled-components";
+import { styled as 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 styled6, { css as css6 } from "styled-components";
+import { styled as styled6, css as css6 } from "styled-components";
 
 // src/components/Ellipsis/Ellipsis.tsx
 import { isNotNil as isNotNil6 } from "@wistia/type-guards";
-import styled5, { css as css5 } from "styled-components";
+import { styled as 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 styled7 from "styled-components";
+import { styled as styled7 } from "styled-components";
 import { jsx as jsx125 } from "react/jsx-runtime";
 var alignVerticalMap = {
   normal: "normal",
@@ -4966,18 +4966,17 @@ Backdrop.displayName = "Backdrop_VHS";
 
 // src/components/IconButton/IconButton.tsx
 import { forwardRef as forwardRef3, useMemo as useMemo5 } from "react";
-import styled11, { css as css9 } from "styled-components";
+import { styled as 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 styled8, { css as css7 } from "styled-components";
+import { styled as 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`
   border: 0;
-  clip: rect(1px, 1px, 1px, 1px); /* deprecated but remains as fallback */
-  clip-path: inset(50%); /* modern but less support */
+  clip-path: inset(50%);
   height: 1px;
   overflow: hidden;
   padding: 0;
@@ -5009,11 +5008,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 styled10 from "styled-components";
+import { styled as styled10 } from "styled-components";
 import { isString as isString3 } from "@wistia/type-guards";
 
 // src/components/Tooltip/TooltipContent.tsx
-import styled9, { css as css8 } from "styled-components";
+import { styled as 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 +5680,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 styled13 from "styled-components";
+import { styled as styled13 } from "styled-components";
 
 // src/components/Avatar/generateContactAvatarColors.tsx
 var colorVariants = {
@@ -5831,7 +5830,7 @@ var Avatar = ({
 Avatar.displayName = "Avatar_VHS";
 
 // src/components/BackgroundImage/BackgroundImage.tsx
-import styled14 from "styled-components";
+import { styled as 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 +5934,7 @@ var BackgroundImage = ({
 BackgroundImage.displayName = "BackgroundImage_VHS";
 
 // src/components/Badge/Badge.tsx
-import styled15 from "styled-components";
+import { styled as styled15 } from "styled-components";
 import { isNotNil as isNotNil9 } from "@wistia/type-guards";
 
 // src/components/Badge/getBadgeColors.ts
@@ -6046,11 +6045,11 @@ var Badge = ({
 Badge.displayName = "Badge_VHS";
 
 // src/components/Banner/Banner.tsx
-import styled17 from "styled-components";
+import { styled as styled17 } from "styled-components";
 import { isNotNil as isNotNil10 } from "@wistia/type-guards";
 
 // src/components/Banner/BannerChildComponents.tsx
-import styled16, { css as css11 } from "styled-components";
+import { styled as 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 +6148,7 @@ Banner.displayName = "Banner_VHS";
 
 // src/components/Box/Box.tsx
 import { forwardRef as forwardRef4 } from "react";
-import styled18 from "styled-components";
+import { styled as 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 +6288,11 @@ Box.displayName = "Box_VHS";
 
 // src/components/ButtonLink/ButtonLink.tsx
 import { forwardRef as forwardRef6 } from "react";
-import styled20 from "styled-components";
+import { styled as styled20 } from "styled-components";
 import { isNotNil as isNotNil12 } from "@wistia/type-guards";
 
 // src/components/Link/Link.tsx
-import styled19 from "styled-components";
+import { styled as styled19 } from "styled-components";
 import { forwardRef as forwardRef5 } from "react";
 
 // src/components/Link/linkStyle.tsx
@@ -6591,7 +6590,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 styled21, { css as css13 } from "styled-components";
+import { styled as styled21, css as css13 } from "styled-components";
 var OptionWrapper = styled21.input`
   align-self: flex-start;
   border-radius: 3px;
@@ -6623,7 +6622,9 @@ var disabledStyle3 = css13`
 var errorHoverStyle = css13`
   border-color: transparent;
 `;
-var errorFocusedStyle = css13``;
+var errorFocusedStyle = css13`
+  outline: none;
+`;
 var errorStyle = css13`
   background-color: ${({ theme: theme2 }) => theme2.color.error100};
   border: 1px solid ${({ theme: theme2 }) => theme2.color.error500};
@@ -6724,14 +6725,14 @@ var Checkbox = forwardRef7(
 Checkbox.displayName = "Checkbox_VHS";
 
 // src/components/CheckboxGroup/CheckboxGroup.tsx
-import styled26 from "styled-components";
+import { styled as styled26 } from "styled-components";
 import { isNotNil as isNotNil13 } from "@wistia/type-guards";
 
 // src/private/components/FormFieldWrapper/FormFieldWrapper.tsx
-import styled25 from "styled-components";
+import { styled as styled25 } from "styled-components";
 
 // src/components/Label/Label.tsx
-import styled22, { css as css14 } from "styled-components";
+import { styled as styled22, css as css14 } from "styled-components";
 import { jsx as jsx142 } from "react/jsx-runtime";
 var requiredStyle = css14`
   &::after {
@@ -6791,7 +6792,7 @@ var Label = ({
 Label.displayName = "Label_VHS";
 
 // src/components/FormFieldError/FormFieldError.tsx
-import styled23 from "styled-components";
+import { styled as styled23 } from "styled-components";
 import { isNil as isNil7 } from "@wistia/type-guards";
 import { jsx as jsx143 } from "react/jsx-runtime";
 var FieldError = styled23.div`
@@ -6815,7 +6816,7 @@ var FormFieldError = ({
 FormFieldError.displayName = "FormFieldError_VHS";
 
 // src/components/LabelDescription/LabelDescription.tsx
-import styled24, { css as css15 } from "styled-components";
+import { styled as styled24, css as css15 } from "styled-components";
 import { jsx as jsx144 } from "react/jsx-runtime";
 var disabledStyle5 = css15`
   color: ${({ theme: theme2 }) => theme2.color.grey500};
@@ -6934,7 +6935,7 @@ CheckboxGroup.displayName = "CheckboxGroup_VHS";
 
 // src/components/ClickArea/ClickArea.tsx
 import { forwardRef as forwardRef8, useCallback as useCallback9 } from "react";
-import styled27 from "styled-components";
+import { styled as styled27 } from "styled-components";
 import { jsx as jsx147 } from "react/jsx-runtime";
 var ClickAreaComponent = styled27.div`
   cursor: pointer;
@@ -6978,7 +6979,7 @@ var ClickArea = forwardRef8(
 ClickArea.displayName = "ClickArea_VHS";
 
 // src/components/CloseButton/CloseButton.tsx
-import styled28 from "styled-components";
+import { styled as styled28 } from "styled-components";
 
 // src/components/CloseButton/CloseIcon.tsx
 import { jsx as jsx148 } from "react/jsx-runtime";
@@ -7042,7 +7043,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 styled29, { css as css16 } from "styled-components";
+import { styled as 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";
@@ -7334,7 +7335,7 @@ var CollapsibleGroup = ({
 CollapsibleGroup.displayName = "CollapsibleGroup_VHS";
 
 // src/components/Divider/Divider.tsx
-import styled30 from "styled-components";
+import { styled as styled30 } from "styled-components";
 import { jsx as jsx151 } from "react/jsx-runtime";
 var DividerComponent = styled30.hr`
   background: none;
@@ -7371,7 +7372,7 @@ Divider.displayName = "Divider_VHS";
 
 // src/components/FileSelect/FileSelect.tsx
 import { forwardRef as forwardRef9 } from "react";
-import styled31 from "styled-components";
+import { styled as styled31 } from "styled-components";
 import { jsx as jsx152, jsxs as jsxs21 } from "react/jsx-runtime";
 var maxFileSizeInGigs = 26;
 var defaultMaximumFileSize = maxFileSizeInGigs * 1024;
@@ -7467,7 +7468,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 styled32 from "styled-components";
+import { styled as 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`
@@ -7555,7 +7556,7 @@ import { useEffect as useEffect13 } from "react";
 import { useCallback as useCallback10, useEffect as useEffect12, useRef as useRef10 } from "react";
 var useTimeoutFunc = (func, timeout2 = 0) => {
   const readyRef = useRef10(false);
-  const timeoutRef = useRef10();
+  const timeoutRef = useRef10(void 0);
   const callbackRef = useRef10(func);
   const isReady = useCallback10(() => readyRef.current, []);
   const set = useCallback10(() => {
@@ -7799,7 +7800,7 @@ FormButtons.displayName = "FormButtons_VHS";
 
 // src/components/FormField/FormField.tsx
 import { forwardRef as forwardRef14 } from "react";
-import styled43 from "styled-components";
+import { styled as styled43 } from "styled-components";
 import { Field } from "formik";
 
 // src/components/FormField/inputTypeMap.ts
@@ -7967,11 +7968,11 @@ 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 styled35 from "styled-components";
+import { styled as styled35 } from "styled-components";
 import { isNotNil as isNotNil18 } from "@wistia/type-guards";
 
 // src/components/Input/InputStyledComponent.tsx
-import styled33, { css as css17 } from "styled-components";
+import { styled as styled33, css as css17 } from "styled-components";
 var focusStyle = css17`
   border-color: ${({ theme: theme2 }) => theme2.color.brandBlue500};
   outline: none;
@@ -8080,7 +8081,7 @@ var InputStyledComponent = styled33.input`
 
 // src/components/Input/ClickToCopy.tsx
 import { useState as useState17, useEffect as useEffect15 } from "react";
-import styled34, { css as css18 } from "styled-components";
+import { styled as 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";
@@ -8461,7 +8462,7 @@ FormConnectorInput.displayName = "FormConnectorInput";
 import { useCallback as useCallback11 } from "react";
 
 // src/components/RadioGroup/RadioGroup.tsx
-import styled36 from "styled-components";
+import { styled as styled36 } from "styled-components";
 import { isNotNil as isNotNil20 } from "@wistia/type-guards";
 
 // src/components/Radio/Radio.tsx
@@ -8616,11 +8617,11 @@ import { isNil as isNil10, isBoolean as isBoolean2 } from "@wistia/type-guards";
 
 // src/components/Select/Select.tsx
 import { forwardRef as forwardRef13 } from "react";
-import styled38, { css as css20 } from "styled-components";
+import { styled as 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 styled37, { css as css19 } from "styled-components";
+import { styled as styled37, css as css19 } from "styled-components";
 var focusStyle2 = css19`
   border: 1px solid ${({ theme: theme2 }) => theme2.color.brandBlue500};
 `;
@@ -8913,12 +8914,12 @@ FormConnectorHidden.displayName = "FormConnectorHidden";
 
 // src/private/components/FormConnectorRichTextEditor/FormConnectorRichTextEditor.tsx
 import { useState as useState19, useEffect as useEffect19 } from "react";
-import styled42 from "styled-components";
+import { styled as 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 styled41 from "styled-components";
+import { styled as 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";
@@ -9229,10 +9230,10 @@ var Leaf = ({
 
 // src/components/RichTextEditor/Element.tsx
 import { useSelected, useFocused } from "slate-react";
-import styled39, { css as css21 } from "styled-components";
+import { styled as 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';
+  display: inline-block;
   user-select: none;
 `;
 var Image = styled39.img`
@@ -9349,7 +9350,7 @@ var Element2 = ({
 
 // src/components/RichTextEditor/EditorButtons.tsx
 import { useSlate } from "slate-react";
-import styled40 from "styled-components";
+import { styled as styled40 } from "styled-components";
 import { Node as Node2 } from "slate";
 import { isNonEmptyString as isNonEmptyString10 } from "@wistia/type-guards";
 
@@ -10266,7 +10267,7 @@ var FormField = forwardRef14(
 FormField.displayName = "FormField_VHS";
 
 // src/components/FullScreenModal/FullScreenModal.tsx
-import styled44 from "styled-components";
+import { styled as 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)`
@@ -10321,7 +10322,7 @@ var FullScreenModal = ({
 FullScreenModal.displayName = "FullScreenModal_VHS";
 
 // src/components/Image/Image.tsx
-import styled45 from "styled-components";
+import { styled as styled45 } from "styled-components";
 import { jsx as jsx188 } from "react/jsx-runtime";
 var getFillStyle2 = ($fillContainer) => {
   if ($fillContainer === "horizontal") {
@@ -10366,7 +10367,7 @@ var Image3 = ({
 Image3.displayName = "Image_VHS";
 
 // src/components/KeyboardShortcut/KeyboardShortcut.tsx
-import styled46 from "styled-components";
+import { styled as 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`
@@ -10484,7 +10485,7 @@ KeyboardShortcut.displayName = "KeyboardShortcut_VHS";
 
 // src/components/LinkButton/LinkButton.tsx
 import { forwardRef as forwardRef15 } from "react";
-import styled47 from "styled-components";
+import { styled as 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";
@@ -10559,10 +10560,10 @@ LinkButton.displayName = "LinkButton_VHS";
 
 // src/components/List/List.tsx
 import { isNotNil as isNotNil29 } from "@wistia/type-guards";
-import styled49, { css as css22 } from "styled-components";
+import { styled as styled49, css as css22 } from "styled-components";
 
 // src/components/List/ListItem.tsx
-import styled48 from "styled-components";
+import { styled as styled48 } from "styled-components";
 import { isNil as isNil16 } from "@wistia/type-guards";
 import { jsx as jsx191 } from "react/jsx-runtime";
 var ListItemComponent = styled48.li`
@@ -10719,7 +10720,7 @@ List.displayName = "List_VHS";
 import { DropdownMenuRadioGroup } from "@radix-ui/react-dropdown-menu";
 
 // src/components/Menu/Menu.tsx
-import styled50, { css as css23, keyframes } from "styled-components";
+import { styled as styled50, css as css23, keyframes } from "styled-components";
 import {
   DropdownMenu,
   DropdownMenuTrigger,
@@ -10837,7 +10838,7 @@ import {
   DropdownMenuSubTrigger
 } from "@radix-ui/react-dropdown-menu";
 import { isNonEmptyString as isNonEmptyString13, isNotNil as isNotNil31, isNotUndefined as isNotUndefined13 } from "@wistia/type-guards";
-import styled51, { css as css24 } from "styled-components";
+import { styled as 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";
@@ -11096,7 +11097,7 @@ var SubMenuTrigger = ({
 };
 
 // src/components/Menu/MenuLabel.tsx
-import styled52 from "styled-components";
+import { styled as styled52 } from "styled-components";
 import { DropdownMenuLabel } from "@radix-ui/react-dropdown-menu";
 import { jsx as jsx195 } from "react/jsx-runtime";
 var StyledMenuLabel = styled52(DropdownMenuLabel)`
@@ -11118,7 +11119,7 @@ var MenuLabel = ({ children, ...props }) => {
 
 // src/components/Menu/SubMenu.tsx
 import { useState as useState20 } from "react";
-import styled53 from "styled-components";
+import { styled as styled53 } from "styled-components";
 import {
   DropdownMenuPortal as DropdownMenuPortal2,
   DropdownMenuSub,
@@ -11169,11 +11170,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 styled56, { css as css26 } from "styled-components";
+import { styled as 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 styled54, { css as css25 } from "styled-components";
+import { styled as 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";
@@ -11307,7 +11308,7 @@ var Menu2 = forwardRef16(
     onClose,
     ...otherProps
   }, ref) => {
-    const menuRef = useRef12();
+    const menuRef = useRef12(void 0);
     const onClickOutsideFn = isNotNil32(onClickOutside) ? onClickOutside : () => {
     };
     useOnClickOutside(menuRef, onClickOutsideFn);
@@ -11376,7 +11377,7 @@ var Menu2 = forwardRef16(
 Menu2.displayName = "Menu";
 
 // src/components/MenuButton/MenuHeader.tsx
-import styled55 from "styled-components";
+import { styled as 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`
@@ -11544,12 +11545,12 @@ MenuButton.displayName = "MenuButton_VHS";
 
 // src/components/Modal/Modal.tsx
 import { forwardRef as forwardRef17, useEffect as useEffect21, useRef as useRef14 } from "react";
-import styled58, { css as css27 } from "styled-components";
+import { styled as 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 styled57 from "styled-components";
+import { styled as styled57 } from "styled-components";
 var Dialog = styled57.div`
   background-color: white;
   box-sizing: border-box;
@@ -11722,7 +11723,7 @@ Modal.displayName = "Modal_VHS";
 ModalContent.displayName = "ModalContent_VHS";
 
 // src/components/Modal/ModalParts.tsx
-import styled59 from "styled-components";
+import { styled as styled59 } from "styled-components";
 import { jsx as jsx201 } from "react/jsx-runtime";
 var ModalHeader = styled59.div`
   align-items: center;
@@ -11766,7 +11767,7 @@ var ModalCloseButton2 = ({ onClick, ...props }) => {
 };
 
 // src/components/Paper/Paper.tsx
-import styled60 from "styled-components";
+import { styled as styled60 } from "styled-components";
 import { jsx as jsx202 } from "react/jsx-runtime";
 var PaperComponent = styled60.div`
   background-color: white;
@@ -11787,7 +11788,7 @@ var Paper = ({ children, elevation = 1, ...otherProps }) => {
 Paper.displayName = "Paper_VHS";
 
 // src/components/ProgressBar/ProgressBar.tsx
-import styled61 from "styled-components";
+import { styled as styled61 } from "styled-components";
 import { jsx as jsx203, jsxs as jsxs40 } from "react/jsx-runtime";
 var progressBarHeight = "8px";
 var ProgressBarContainer = styled61.div`
@@ -11863,13 +11864,13 @@ ProgressBar.displayName = "ProgressBar_VHS";
 
 // src/components/RangeSelector/RangeSelector.tsx
 import { useEffect as useEffect24, useState as useState24 } from "react";
-import styled66 from "styled-components";
+import { styled as 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 styled63 from "styled-components";
+import { styled as styled63 } from "styled-components";
 import { debounce as debounce2 } from "throttle-debounce";
 import {
   addDays,
@@ -11884,7 +11885,7 @@ import {
 } from "date-fns";
 
 // src/private/components/Calendar/Calendar.tsx
-import styled62 from "styled-components";
+import { styled as styled62 } from "styled-components";
 import {
   isBefore,
   isAfter,
@@ -12406,12 +12407,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 styled65 from "styled-components";
+import { styled as 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 styled64 from "styled-components";
+import { styled as styled64 } from "styled-components";
 import { jsx as jsx206 } from "react/jsx-runtime";
 var ErrorMessagesList = styled64.ul`
   list-style: none;
@@ -12633,7 +12634,7 @@ var setCursorPosition = (ref, start, end) => {
 var getSelectionFromMove = (selection, move, positions) => {
   const currentIndex = positions.findIndex((pos) => pos.start === selection[0]);
   let nextPosition = positions[currentIndex + move];
-  if (nextPosition && nextPosition.type === "skip") {
+  if (nextPosition?.type === "skip") {
     nextPosition = positions[currentIndex + move * 2];
   }
   if (nextPosition) {
@@ -13266,7 +13267,7 @@ var RangeSelector = ({
 RangeSelector.displayName = "RangeSelector_VHS";
 
 // src/components/Slider/Slider.tsx
-import styled67, { css as css28 } from "styled-components";
+import { styled as styled67, css as css28 } from "styled-components";
 import ReactSlider from "react-slider";
 import {
   isFunction as isFunction4,
@@ -13415,7 +13416,7 @@ Slider.displayName = "Slider_VHS";
 
 // src/components/Stack/Stack.tsx
 import { forwardRef as forwardRef18 } from "react";
-import styled68 from "styled-components";
+import { styled as styled68 } from "styled-components";
 import { jsx as jsx210 } from "react/jsx-runtime";
 var StyledStack = styled68.div`
   display: flex;
@@ -13443,7 +13444,7 @@ var Stack = forwardRef18(
 Stack.displayName = "Stack_VHS";
 
 // src/components/Switch/Switch.tsx
-import styled69, { css as css29 } from "styled-components";
+import { styled as styled69, css as css29 } from "styled-components";
 import { jsx as jsx211 } from "react/jsx-runtime";
 var SwitchComponent = styled69.button`
   background-color: white;
@@ -13564,7 +13565,7 @@ var Switch = ({
 Switch.displayName = "Switch_VHS";
 
 // src/components/Thumbnail/Thumbnail.tsx
-import styled70 from "styled-components";
+import { styled as 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`
@@ -13720,7 +13721,7 @@ var Thumbnail = ({
 Thumbnail.displayName = "Thumbnail_VHS";
 
 // src/components/ThumbnailCollage/ThumbnailCollage.tsx
-import styled71 from "styled-components";
+import { styled as styled71 } from "styled-components";
 import { isNotNil as isNotNil44 } from "@wistia/type-guards";
 import { jsx as jsx213 } from "react/jsx-runtime";
 var ThumbnailCollageContainer = styled71.div`
@@ -13728,7 +13729,7 @@ var ThumbnailCollageContainer = styled71.div`
   grid-template-columns: 3fr 2fr;
   grid-template-rows: 1fr 1fr;
   width: 100%;
-  grid-gap: ${({ theme: theme2 }) => theme2.spacing.space01};
+  gap: ${({ theme: theme2 }) => theme2.spacing.space01};
   height: 100%;
 `;
 var CollageImage2 = styled71.div`
@@ -13778,7 +13779,7 @@ var ThumbnailCollage = ({
 };
 
 // src/components/WistiaLogo/WistiaLogo.tsx
-import styled72 from "styled-components";
+import { styled as 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) => {