@wistia/ui 0.17.1 → 0.18.0-beta.3a151a03.96acbe5

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.17.1
+ * @license @wistia/ui v0.18.0-beta.3a151a03.96acbe5
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -3058,12 +3058,12 @@ import { toast as sonnerToast } from "sonner";
 
 // src/private/components/Toast/Toast.tsx
 import { cloneElement, isValidElement } from "react";
-import styled2 from "styled-components";
+import { styled as styled2 } from "styled-components";
 import { isNotNil as isNotNil4 } from "@wistia/type-guards";
 
 // src/components/Ellipsis/Ellipsis.tsx
 import { isNotNil as isNotNil3 } from "@wistia/type-guards";
-import styled, { css as css14 } from "styled-components";
+import { styled, css as css14 } from "styled-components";
 
 // src/css/lineClampCss.tsx
 import { css as css13 } from "styled-components";
@@ -3267,11 +3267,11 @@ var useToast = () => {
 
 // src/components/ActionButton/ActionButton.tsx
 import { forwardRef as forwardRef3 } from "react";
-import styled6, { css as css19 } from "styled-components";
+import { styled as styled6, css as css19 } from "styled-components";
 
 // src/components/Button/Button.tsx
 import { forwardRef as forwardRef2 } from "react";
-import styled5 from "styled-components";
+import { styled as styled5 } from "styled-components";
 import { isNotNil as isNotNil6, isNotUndefined as isNotUndefined4 } from "@wistia/type-guards";
 
 // src/css/buttonResetCss.tsx
@@ -3477,7 +3477,7 @@ var buttonSizeStyles = {
 
 // src/components/Icon/Icon.tsx
 import { isNil as isNil5 } from "@wistia/type-guards";
-import styled3, { css as css18 } from "styled-components";
+import { styled as styled3, css as css18 } from "styled-components";
 
 // src/components/Icon/icons/AbTestIcon.tsx
 import { jsx as jsx7 } from "react/jsx-runtime";
@@ -7569,7 +7569,7 @@ Icon.displayName = "Icon_UI";
 
 // src/components/Link/Link.tsx
 import { forwardRef } from "react";
-import styled4 from "styled-components";
+import { styled as styled4 } from "styled-components";
 import { Link as RouterLink, useInRouterContext } from "react-router";
 import { isFunction as isFunction2, isNil as isNil6, isNotNil as isNotNil5, isNotUndefined as isNotUndefined3, isUndefined as isUndefined2 } from "@wistia/type-guards";
 import { jsx as jsx199, jsxs as jsxs8 } from "react/jsx-runtime";
@@ -8002,7 +8002,7 @@ ActionButton.displayName = "ActionButton_UI";
 // src/components/Avatar/Avatar.tsx
 import { useState as useState9, useMemo as useMemo4, useEffect as useEffect7 } from "react";
 import { isNil as isNil8, isNotNil as isNotNil8 } from "@wistia/type-guards";
-import styled9 from "styled-components";
+import { styled as styled9 } from "styled-components";
 
 // src/components/Avatar/formatNameForDisplay.tsx
 import { isNil as isNil7, isString, isEmptyString } from "@wistia/type-guards";
@@ -8019,7 +8019,7 @@ var formatNameForDisplay = (name) => {
 };
 
 // src/components/Image/Image.tsx
-import styled7 from "styled-components";
+import { styled as styled7 } from "styled-components";
 import { isNotNil as isNotNil7 } from "@wistia/type-guards";
 import { jsx as jsx202 } from "react/jsx-runtime";
 var getFillStyle = (fillContainer) => {
@@ -8072,7 +8072,7 @@ var Image = ({
 Image.displayName = "Image_UI";
 
 // src/components/ColorSchemeWrapper/ColorSchemeWrapper.tsx
-import styled8 from "styled-components";
+import { styled as styled8 } from "styled-components";
 import { jsx as jsx203 } from "react/jsx-runtime";
 var defaultColorSchemeOptions = ["standard", "inherit"];
 var semanticColorSchemeOptions = ["error", "info", "success", "warning"];
@@ -8254,7 +8254,7 @@ Avatar.displayName = "Avatar_UI";
 
 // src/components/Badge/Badge.tsx
 import { forwardRef as forwardRef4 } from "react";
-import styled10 from "styled-components";
+import { styled as styled10 } from "styled-components";
 import { isNotNil as isNotNil9 } from "@wistia/type-guards";
 import { jsx as jsx205, jsxs as jsxs12 } from "react/jsx-runtime";
 var StyledBadge = styled10.div`
@@ -8306,12 +8306,12 @@ Badge.displayName = "Badge_UI";
 
 // src/components/Banner/Banner.tsx
 import { useEffect as useEffect8, useState as useState10, useMemo as useMemo5 } from "react";
-import styled16 from "styled-components";
+import { styled as styled16 } from "styled-components";
 import { isNil as isNil11, isNotNil as isNotNil13 } from "@wistia/type-guards";
 
 // src/components/Box/Box.tsx
 import { forwardRef as forwardRef5 } from "react";
-import styled11, { css as css20 } from "styled-components";
+import { styled as styled11, css as css20 } from "styled-components";
 import { isNotNil as isNotNil10, isRecord as isRecord3, isNotUndefined as isNotUndefined5 } from "@wistia/type-guards";
 
 // src/private/helpers/makePolymorphic/makePolymorphic.tsx
@@ -8508,7 +8508,7 @@ var Box = makePolymorphic(BoxComponent);
 
 // src/components/Heading/Heading.tsx
 import { forwardRef as forwardRef6 } from "react";
-import styled12, { css as css21 } from "styled-components";
+import { styled as styled12, css as css21 } from "styled-components";
 import { isNotNil as isNotNil11 } from "@wistia/type-guards";
 
 // src/private/helpers/applyMaxCharsToChildren/applyMaxCharsToChildren.ts
@@ -8687,7 +8687,7 @@ var Heading = makePolymorphic(HeadingComponent);
 
 // src/components/Text/Text.tsx
 import { forwardRef as forwardRef7 } from "react";
-import styled13, { css as css22 } from "styled-components";
+import { styled as styled13, css as css22 } from "styled-components";
 import { isNotNil as isNotNil12 } from "@wistia/type-guards";
 import { jsx as jsx208 } from "react/jsx-runtime";
 var sharedBodyStyle = css22`
@@ -8909,7 +8909,7 @@ TextComponent.displayName = "Text_UI";
 var Text = makePolymorphic(TextComponent);
 
 // src/components/ButtonGroup/ButtonGroup.tsx
-import styled14, { css as css23 } from "styled-components";
+import { styled as styled14, css as css23 } from "styled-components";
 import { isNil as isNil10 } from "@wistia/type-guards";
 import { jsx as jsx209 } from "react/jsx-runtime";
 var getAlignment = (align) => {
@@ -8989,7 +8989,7 @@ ButtonGroup.displayName = "ButtonGroup_UI";
 
 // src/components/IconButton/IconButton.tsx
 import { Children, cloneElement as cloneElement2, forwardRef as forwardRef8 } from "react";
-import styled15 from "styled-components";
+import { styled as styled15 } from "styled-components";
 import { jsx as jsx210 } from "react/jsx-runtime";
 var StyledButton2 = styled15(Button)`
   --icon-button-size-sm: 24px;
@@ -9190,7 +9190,7 @@ Banner.displayName = "Banner_UI";
 
 // src/components/Breadcrumbs/Breadcrumbs.tsx
 import { Children as Children2 } from "react";
-import styled17 from "styled-components";
+import { styled as styled17 } from "styled-components";
 import { Fragment as Fragment4, jsx as jsx212, jsxs as jsxs14 } from "react/jsx-runtime";
 var StyledBreadcrumbs = styled17.nav`
   display: flex;
@@ -9237,7 +9237,7 @@ var Breadcrumbs = ({ children, ...props }) => {
 Breadcrumbs.displayName = "Breadcrumbs_UI";
 
 // src/components/Breadcrumbs/Breadcrumb.tsx
-import styled18 from "styled-components";
+import { styled as styled18 } from "styled-components";
 import { Fragment as Fragment5, jsx as jsx213, jsxs as jsxs15 } from "react/jsx-runtime";
 var BreadcrumbContent = styled18.span`
   overflow: hidden;
@@ -9271,7 +9271,7 @@ var Breadcrumb = ({ icon, href, children, ...props }) => {
 };
 
 // src/components/Card/Card.tsx
-import styled19 from "styled-components";
+import { styled as styled19 } from "styled-components";
 import { jsx as jsx214 } from "react/jsx-runtime";
 var StyledCard = styled19(Box)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
@@ -9331,7 +9331,7 @@ Card.displayName = "Card_UI";
 
 // src/components/Center/Center.tsx
 import { forwardRef as forwardRef9 } from "react";
-import styled20 from "styled-components";
+import { styled as styled20 } from "styled-components";
 import { jsx as jsx215 } from "react/jsx-runtime";
 var StyledCenter = styled20.div`
   box-sizing: border-box;
@@ -9363,14 +9363,14 @@ Center.displayName = "Center_UI";
 // src/components/Checkbox/Checkbox.tsx
 import { isNonEmptyString as isNonEmptyString3, isNotUndefined as isNotUndefined7 } from "@wistia/type-guards";
 import { forwardRef as forwardRef12, useId as useId2 } from "react";
-import styled27, { css as css26 } from "styled-components";
+import { styled as styled27, css as css26 } from "styled-components";
 
 // src/private/components/FormControlLabel/FormControlLabel.tsx
 import { isNil as isNil13, isNotNil as isNotNil15 } from "@wistia/type-guards";
-import styled23, { css as css25 } from "styled-components";
+import { styled as styled23, css as css25 } from "styled-components";
 
 // src/components/ScreenReaderOnly/ScreenReaderOnly.tsx
-import styled21 from "styled-components";
+import { styled as styled21 } from "styled-components";
 import { isNotNil as isNotNil14 } from "@wistia/type-guards";
 import { jsx as jsx216 } from "react/jsx-runtime";
 var VisuallyHidden = styled21.div({ ...visuallyHiddenStyle });
@@ -9392,7 +9392,7 @@ var ScreenReaderOnly = ({
 ScreenReaderOnly.displayName = "ScreenReaderOnly_UI";
 
 // src/private/components/FormControlLabel/FormControlLabelDescription.tsx
-import styled22, { css as css24 } from "styled-components";
+import { styled as styled22, css as css24 } from "styled-components";
 import { isNil as isNil12 } from "@wistia/type-guards";
 import { jsx as jsx217 } from "react/jsx-runtime";
 var disabledStyle = css24`
@@ -9489,13 +9489,13 @@ import { createContext as createContext4, useMemo as useMemo7, useContext as use
 import { isArray } from "@wistia/type-guards";
 
 // src/components/FormGroup/FormGroup.tsx
-import styled25 from "styled-components";
+import { styled as styled25 } from "styled-components";
 import { useRef as useRef7 } from "react";
 import { isNonEmptyString as isNonEmptyString2, isNotNil as isNotNil16 } from "@wistia/type-guards";
 
 // src/components/Stack/Stack.tsx
 import { forwardRef as forwardRef10 } from "react";
-import styled24 from "styled-components";
+import { styled as styled24 } from "styled-components";
 import { jsx as jsx219 } from "react/jsx-runtime";
 var DEFAULT_ELEMENT4 = "div";
 var StyledStack = styled24.div`
@@ -9584,7 +9584,7 @@ FormGroup.displayName = "FormGroup_UI";
 
 // src/components/Form/Form.tsx
 import { forwardRef as forwardRef11, useRef as useRef8, useMemo as useMemo6, createContext as createContext3, useState as useState11, useId } from "react";
-import styled26 from "styled-components";
+import { styled as styled26 } from "styled-components";
 import { isNotUndefined as isNotUndefined6, isUndefined as isUndefined3 } from "@wistia/type-guards";
 
 // src/components/Form/serializeFormData.tsx
@@ -9950,7 +9950,7 @@ ClickRegion.displayName = "ClickRegion_UI";
 // src/components/Collapsible/Collapsible.tsx
 import { Root as CollapsibleRoot } from "@radix-ui/react-collapsible";
 import { isNotNil as isNotNil17 } from "@wistia/type-guards";
-import styled28 from "styled-components";
+import { styled as styled28 } from "styled-components";
 import { jsx as jsx224 } from "react/jsx-runtime";
 var StyledRoot = styled28(CollapsibleRoot)`
   &[data-state='closed'] [data-wui-collapsible-content] {
@@ -9975,7 +9975,7 @@ Collapsible.displayName = "Collapsible_UI";
 // src/components/Collapsible/CollapsibleTrigger.tsx
 import { Children as Children4 } from "react";
 import { Trigger } from "@radix-ui/react-collapsible";
-import styled29 from "styled-components";
+import { styled as styled29 } from "styled-components";
 import { jsx as jsx225 } from "react/jsx-runtime";
 var StyledTrigger = styled29(Trigger)`
   [data-wui-collapsible-icon] {
@@ -10026,7 +10026,7 @@ var CollapsibleTriggerIcon = ({ type, ...props }) => {
 CollapsibleTriggerIcon.displayName = "CollapsibleTriggerIcon_UI";
 
 // src/components/Collapsible/CollapsibleContent.tsx
-import styled30 from "styled-components";
+import { styled as styled30 } from "styled-components";
 import { Content } from "@radix-ui/react-collapsible";
 import { isNotUndefined as isNotUndefined8 } from "@wistia/type-guards";
 import { Fragment as Fragment6, jsx as jsx227, jsxs as jsxs19 } from "react/jsx-runtime";
@@ -10052,7 +10052,7 @@ var CollapsibleContent = ({ clamp, children }) => {
 
 // src/components/ColorPicker/ColorGrid.tsx
 import { useCallback as useCallback10 } from "react";
-import styled32 from "styled-components";
+import { styled as styled32 } from "styled-components";
 import { Root as RadioGroupRoot } from "@radix-ui/react-radio-group";
 
 // src/components/ColorPicker/ColorPickerContext.tsx
@@ -10597,7 +10597,7 @@ var useColorPickerState = () => {
 };
 
 // src/components/Label/Label.tsx
-import styled31, { css as css27 } from "styled-components";
+import { styled as styled31, css as css27 } from "styled-components";
 import { jsx as jsx229 } from "react/jsx-runtime";
 var requiredStyle = css27`
   &::after {
@@ -10698,12 +10698,12 @@ var ColorGrid = ({ children, label }) => {
 ColorGrid.displayName = "ColorGrid_UI";
 
 // src/components/ColorPicker/ColorGridOption.tsx
-import styled35 from "styled-components";
+import { styled as styled35 } from "styled-components";
 import { Item as RadioGroupItem } from "@radix-ui/react-radio-group";
 import { formatHex as formatHex3 } from "culori/fn";
 
 // src/components/ColorPicker/ColorSwatch.tsx
-import styled33 from "styled-components";
+import { styled as styled33 } from "styled-components";
 import { jsx as jsx231, jsxs as jsxs21 } from "react/jsx-runtime";
 var ColorSwatchDiv = styled33.div`
   aspect-ratio: 1;
@@ -10767,7 +10767,7 @@ import {
   Portal as TooltipPortal,
   Arrow as TooltipArrow
 } from "@radix-ui/react-tooltip";
-import styled34, { keyframes } from "styled-components";
+import { styled as styled34, keyframes } from "styled-components";
 import { jsx as jsx232, jsxs as jsxs22 } from "react/jsx-runtime";
 var hide = keyframes`
   from {
@@ -10962,7 +10962,7 @@ ColorGridOption.displayName = "ColorGridOption_UI";
 
 // src/components/ColorPicker/ColorList.tsx
 import { useCallback as useCallback11 } from "react";
-import styled36 from "styled-components";
+import { styled as styled36 } from "styled-components";
 import { Root as ToggleGroupRoot } from "@radix-ui/react-toggle-group";
 import { jsx as jsx234 } from "react/jsx-runtime";
 var Container3 = styled36(ToggleGroupRoot)`
@@ -10994,7 +10994,7 @@ var ColorList = ({ children }) => {
 ColorList.displayName = "ColorList_UI";
 
 // src/components/ColorPicker/ColorListGroup.tsx
-import styled37 from "styled-components";
+import { styled as styled37 } from "styled-components";
 import { jsx as jsx235, jsxs as jsxs23 } from "react/jsx-runtime";
 var Container4 = styled37.div`
   display: grid;
@@ -11024,7 +11024,7 @@ var ColorListGroup = ({ label, children }) => {
 ColorListGroup.displayName = "ColorListGroup_UI";
 
 // src/components/ColorPicker/ColorListOption.tsx
-import styled38 from "styled-components";
+import { styled as styled38 } from "styled-components";
 import { Item as ToggleGroupItem } from "@radix-ui/react-toggle-group";
 import { formatHex as formatHex4 } from "culori/fn";
 
@@ -11148,7 +11148,7 @@ ColorPicker.displayName = "ColorPicker_UI";
 
 // src/components/ColorPicker/ColorPickerPopoverContent.tsx
 import { Content as PopoverContent, Portal as PopoverPortal } from "@radix-ui/react-popover";
-import styled39 from "styled-components";
+import { styled as styled39 } from "styled-components";
 import { jsx as jsx239 } from "react/jsx-runtime";
 var StyledPopoverContent = styled39(PopoverContent)`
   background-color: var(--wui-color-bg-surface);
@@ -11177,7 +11177,7 @@ var ColorPickerPopoverContent = ({
 ColorPickerPopoverContent.displayName = "ColorPickerPopoverContent_UI";
 
 // src/components/ColorPicker/ColorPickerSection.tsx
-import styled40 from "styled-components";
+import { styled as styled40 } from "styled-components";
 import { jsx as jsx240 } from "react/jsx-runtime";
 var Container6 = styled40.div`
   padding: var(--wui-space-02);
@@ -11190,7 +11190,7 @@ ColorPickerSection.displayName = "ColorPickerSection_UI";
 // src/components/ColorPicker/ColorPickerTrigger.tsx
 import { forwardRef as forwardRef13 } from "react";
 import { Trigger as PopoverTrigger } from "@radix-ui/react-popover";
-import styled41 from "styled-components";
+import { styled as styled41 } from "styled-components";
 
 // src/components/ColorPicker/ValueSwatch.tsx
 import { jsx as jsx241 } from "react/jsx-runtime";
@@ -11257,7 +11257,7 @@ var ColorPickerTrigger = forwardRef13(
 ColorPickerTrigger.displayName = "ColorPickerTrigger_UI";
 
 // src/components/ColorPicker/ContrastIndicator.tsx
-import styled42 from "styled-components";
+import { styled as styled42 } from "styled-components";
 import { jsx as jsx244, jsxs as jsxs27 } from "react/jsx-runtime";
 var Container7 = styled42.div`
   display: flex;
@@ -11317,7 +11317,7 @@ import { useCallback as useCallback12 } from "react";
 
 // src/components/Switch/Switch.tsx
 import { forwardRef as forwardRef14, useId as useId3 } from "react";
-import styled43, { css as css28 } from "styled-components";
+import { styled as styled43, css as css28 } from "styled-components";
 import { isNonEmptyString as isNonEmptyString4 } from "@wistia/type-guards";
 import { jsx as jsx245, jsxs as jsxs28 } from "react/jsx-runtime";
 var switchHeightMap = {
@@ -11528,7 +11528,7 @@ import { parseHex as parseHex2 } from "culori/fn";
 
 // src/components/Input/Input.tsx
 import { isValidElement as isValidElement2, forwardRef as forwardRef15, cloneElement as cloneElement4, useRef as useRef9 } from "react";
-import styled44, { css as css30 } from "styled-components";
+import { styled as styled44, css as css30 } from "styled-components";
 import { isNil as isNil14, isNotNil as isNotNil18, isRecord as isRecord4 } from "@wistia/type-guards";
 
 // src/css/inputCss.ts
@@ -11908,12 +11908,12 @@ import {
   Track as SliderTrack,
   Thumb as SliderThumb
 } from "@radix-ui/react-slider";
-import styled46 from "styled-components";
+import { styled as styled46 } from "styled-components";
 import { formatHex as formatHex6 } from "culori/fn";
 
 // src/components/ColorPicker/HSVHueCanvas.tsx
 import { useEffect as useEffect12, useRef as useRef11 } from "react";
-import styled45 from "styled-components";
+import { styled as styled45 } from "styled-components";
 import { formatHex as formatHex5 } from "culori/fn";
 import { jsx as jsx251 } from "react/jsx-runtime";
 var Canvas = styled45.canvas`
@@ -12044,11 +12044,11 @@ HueSlider.displayName = "HueSlider_UI";
 
 // src/components/ColorPicker/SaturationAndValuePicker.tsx
 import { useCallback as useCallback15, useEffect as useEffect14, useLayoutEffect as useLayoutEffect4, useMemo as useMemo10, useRef as useRef13, useState as useState14 } from "react";
-import styled48 from "styled-components";
+import { styled as styled48 } from "styled-components";
 
 // src/components/ColorPicker/HSVSaturationValueCanvas.tsx
 import { useEffect as useEffect13, useRef as useRef12 } from "react";
-import styled47 from "styled-components";
+import { styled as styled47 } from "styled-components";
 
 // src/components/ColorPicker/canvas-utils.ts
 var drawSmoothCurve = (context, points) => {
@@ -12427,12 +12427,12 @@ import {
   isValidElement as isValidElement3
 } from "react";
 import { matchSorter } from "match-sorter";
-import styled50 from "styled-components";
+import { styled as styled50 } from "styled-components";
 import { isArray as isArray2, isString as isString3 } from "@wistia/type-guards";
 
 // src/components/Tag/Tag.tsx
 import { forwardRef as forwardRef16 } from "react";
-import styled49 from "styled-components";
+import { styled as styled49 } from "styled-components";
 import { isNil as isNil15, isNotNil as isNotNil19, isNonEmptyString as isNonEmptyString5 } from "@wistia/type-guards";
 import { Fragment as Fragment7, jsx as jsx255, jsxs as jsxs33 } from "react/jsx-runtime";
 var TagLabel = styled49.a`
@@ -12888,7 +12888,7 @@ import {
 } from "@radix-ui/react-dropdown-menu";
 import { isNotNil as isNotNil20, isNotUndefined as isNotUndefined9 } from "@wistia/type-guards";
 import { forwardRef as forwardRef17, useMemo as useMemo12 } from "react";
-import styled51, { css as css32, keyframes as keyframes2 } from "styled-components";
+import { styled as styled51, css as css32, keyframes as keyframes2 } from "styled-components";
 
 // src/components/Menu/MenuContext.tsx
 import { createContext as createContext6, useContext as useContext5 } from "react";
@@ -13051,7 +13051,7 @@ Menu.displayName = "Menu_UI";
 Menu.displayName = "Menu_UI";
 
 // 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 jsx258 } from "react/jsx-runtime";
 var StyledMenuLabel = styled52(DropdownMenuLabel)`
@@ -13079,7 +13079,7 @@ MenuLabel.displayName = "MenuLabel_UI";
 
 // src/components/Menu/SubMenu.tsx
 import { useState as useState16 } from "react";
-import styled55 from "styled-components";
+import { styled as styled55 } from "styled-components";
 import {
   DropdownMenuPortal as DropdownMenuPortal2,
   DropdownMenuSub,
@@ -13092,7 +13092,7 @@ import { isNotNil as isNotNil22 } from "@wistia/type-guards";
 
 // src/components/Menu/MenuItemButton.tsx
 import { forwardRef as forwardRef18 } from "react";
-import styled53 from "styled-components";
+import { styled as styled53 } from "styled-components";
 import { isNotNil as isNotNil21, isNotUndefined as isNotUndefined10 } from "@wistia/type-guards";
 import { jsx as jsx259, jsxs as jsxs36 } from "react/jsx-runtime";
 var StyledButton3 = styled53(Button)`
@@ -13212,7 +13212,7 @@ var MenuItemButton = forwardRef18(({ children, appearance, command, icon, ...pro
 MenuItemButton.displayName = "MenuItemButton_UI";
 
 // src/components/Menu/MenuItemLabelDescription.tsx
-import styled54 from "styled-components";
+import { styled as styled54 } from "styled-components";
 import { jsx as jsx260 } from "react/jsx-runtime";
 var StyledMenuItemLabel = styled54.span``;
 var StyledMenuItemDescription = styled54(Text)``;
@@ -13621,7 +13621,7 @@ var ContextMenu = ({
 
 // src/components/DataCards/DataCard.tsx
 import { useRef as useRef15 } from "react";
-import styled56, { keyframes as keyframes3 } from "styled-components";
+import { styled as styled56, keyframes as keyframes3 } from "styled-components";
 import { isNotNil as isNotNil25 } from "@wistia/type-guards";
 import { jsx as jsx268, jsxs as jsxs40 } from "react/jsx-runtime";
 var StyledDataCard = styled56.div`
@@ -13820,7 +13820,7 @@ var DataCard = (props) => {
 DataCard.displayName = "DataCard_UI";
 
 // src/components/DataCards/DataCards.tsx
-import styled57 from "styled-components";
+import { styled as styled57 } from "styled-components";
 import { jsx as jsx269 } from "react/jsx-runtime";
 var StyledDataCards = styled57(Box)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
@@ -13855,7 +13855,7 @@ var DataCards = ({
 DataCards.displayName = "DataCards_UI";
 
 // src/components/DataCards/DataCardTrend.tsx
-import styled58 from "styled-components";
+import { styled as styled58 } from "styled-components";
 import { jsx as jsx270, jsxs as jsxs41 } from "react/jsx-runtime";
 var StyledDataCardTrend = styled58.div`
   ${({ $outlook }) => getColorScheme($outlook === "positive" ? "success" : "error")};
@@ -13893,7 +13893,7 @@ var DataCardTrend = ({
 };
 
 // src/components/DataCards/DataCardHoverArrow.tsx
-import styled59 from "styled-components";
+import { styled as styled59 } from "styled-components";
 import { jsx as jsx271 } from "react/jsx-runtime";
 var StyledIconContainer = styled59.div`
   display: flex;
@@ -13911,7 +13911,7 @@ var DataCardHoverArrow = () => /* @__PURE__ */ jsx271(StyledIconContainer, { chi
 DataCardHoverArrow.displayName = "DataCardHoverArrow_UI";
 
 // src/components/DataList/DataList.tsx
-import styled60 from "styled-components";
+import { styled as styled60 } from "styled-components";
 import { jsx as jsx272 } from "react/jsx-runtime";
 var StyledDataList = styled60.dl`
   display: grid;
@@ -13992,7 +13992,7 @@ var DataListItemValue = (props) => {
 DataListItemValue.displayName = "DataListItemValue_UI";
 
 // src/components/Divider/Divider.tsx
-import styled61, { css as css33 } from "styled-components";
+import { styled as styled61, css as css33 } from "styled-components";
 import { jsx as jsx275 } from "react/jsx-runtime";
 var horizontalBorderCss = css33`
   border-top-color: var(--wui-color-border);
@@ -14033,7 +14033,7 @@ var Divider = ({ orientation = "horizontal", ...props }) => {
 Divider.displayName = "Divider_UI";
 
 // src/components/EditableHeading/EditableHeading.tsx
-import styled62, { css as css34 } from "styled-components";
+import { styled as styled62, css as css34 } from "styled-components";
 import { useState as useState18, useRef as useRef16 } from "react";
 import { Fragment as Fragment8, jsx as jsx276, jsxs as jsxs42 } from "react/jsx-runtime";
 var StyledInput = styled62(Input)`
@@ -14170,13 +14170,13 @@ var EditableHeading = ({
 
 // src/components/EditableText/EditableTextDisplay.tsx
 import { useContext as useContext6, useRef as useRef17, forwardRef as forwardRef21 } from "react";
-import styled64, { css as css35 } from "styled-components";
+import { styled as styled64, css as css35 } from "styled-components";
 import { isNotNil as isNotNil26 } from "@wistia/type-guards";
 
 // src/components/EditableText/EditableTextRoot.tsx
 import { createContext as createContext7, useMemo as useMemo13, useState as useState19, useCallback as useCallback16, useId as useId4 } from "react";
 import { isNonEmptyString as isNonEmptyString6 } from "@wistia/type-guards";
-import styled63 from "styled-components";
+import { styled as styled63 } from "styled-components";
 import { jsx as jsx277 } from "react/jsx-runtime";
 var LARGE_PADDING = "var(--wui-space-02)";
 var SMALL_PADDING = "var(--wui-space-01)";
@@ -14426,7 +14426,7 @@ var EditableTextDisplay = makePolymorphic(
 
 // src/components/EditableText/EditableTextInput.tsx
 import { useContext as useContext7, useEffect as useEffect17, useRef as useRef18 } from "react";
-import styled65 from "styled-components";
+import { styled as styled65 } from "styled-components";
 import { isNotNil as isNotNil27 } from "@wistia/type-guards";
 import { jsx as jsx279 } from "react/jsx-runtime";
 var StyledInput2 = styled65(Input)`
@@ -14731,7 +14731,7 @@ var FormErrorSummary = ({ description }) => {
 
 // src/components/FormField/FormField.tsx
 import { Children as Children10, cloneElement as cloneElement8, useContext as useContext13 } from "react";
-import styled66 from "styled-components";
+import { styled as styled66 } from "styled-components";
 import { isArray as isArray4, isNotNil as isNotNil28, isNotUndefined as isNotUndefined12, isUndefined as isUndefined4 } from "@wistia/type-guards";
 import { Fragment as Fragment9, jsx as jsx283, jsxs as jsxs46 } from "react/jsx-runtime";
 var StyledFormField = styled66.div`
@@ -14927,7 +14927,7 @@ RadioGroup.displayName = "RadioGroup_UI";
 
 // src/components/Grid/Grid.tsx
 import { forwardRef as forwardRef22 } from "react";
-import styled67, { css as css36 } from "styled-components";
+import { styled as styled67, css as css36 } from "styled-components";
 import { isRecord as isRecord5 } from "@wistia/type-guards";
 import { jsx as jsx285 } from "react/jsx-runtime";
 var DEFAULT_ELEMENT5 = "div";
@@ -15001,7 +15001,7 @@ GridComponent.displayName = "Grid_UI";
 var Grid = makePolymorphic(GridComponent);
 
 // src/components/InputClickToCopy/InputClickToCopy.tsx
-import styled68 from "styled-components";
+import { styled as styled68 } from "styled-components";
 import { forwardRef as forwardRef23, useEffect as useEffect18, useState as useState21 } from "react";
 import { isFunction as isFunction3 } from "@wistia/type-guards";
 import { jsx as jsx286 } from "react/jsx-runtime";
@@ -15071,7 +15071,7 @@ var InputClickToCopy = forwardRef23(
 InputClickToCopy.displayName = "InputClickToCopy_UI";
 
 // src/components/InputPassword/InputPassword.tsx
-import styled69 from "styled-components";
+import { styled as styled69 } from "styled-components";
 import { forwardRef as forwardRef24, useState as useState22 } from "react";
 import { isFunction as isFunction4 } from "@wistia/type-guards";
 import { jsx as jsx287 } from "react/jsx-runtime";
@@ -15118,7 +15118,7 @@ var InputPassword = forwardRef24(
 InputPassword.displayName = "InputPassword_UI";
 
 // src/components/KeyboardShortcut/KeyboardShortcut.tsx
-import styled70 from "styled-components";
+import { styled as styled70 } from "styled-components";
 import { isNotNil as isNotNil29 } from "@wistia/type-guards";
 import { jsx as jsx288, jsxs as jsxs47 } from "react/jsx-runtime";
 var StyledKeyboardShortcut = styled70.div`
@@ -15228,10 +15228,10 @@ KeyboardShortcut.displayName = "KeyboardShortcut_UI";
 
 // src/components/List/List.tsx
 import { isNotNil as isNotNil30 } from "@wistia/type-guards";
-import styled72, { css as css37 } from "styled-components";
+import { styled as styled72, css as css37 } from "styled-components";
 
 // src/components/List/ListItem.tsx
-import styled71 from "styled-components";
+import { styled as styled71 } from "styled-components";
 import { isNil as isNil17 } from "@wistia/type-guards";
 import { jsx as jsx289 } from "react/jsx-runtime";
 var ListItemComponent = styled71.li`
@@ -15385,7 +15385,7 @@ var List = ({
 List.displayName = "List_UI";
 
 // src/components/Mark/Mark.tsx
-import styled73 from "styled-components";
+import { styled as styled73 } from "styled-components";
 import { jsx as jsx291 } from "react/jsx-runtime";
 var StyledMark = styled73.mark`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
@@ -15407,16 +15407,16 @@ Mark.displayName = "Mark_UI";
 
 // src/components/Modal/Modal.tsx
 import { forwardRef as forwardRef26 } from "react";
-import styled78 from "styled-components";
+import { styled as styled78 } from "styled-components";
 import { Root as DialogRoot, Portal as DialogPortal } from "@radix-ui/react-dialog";
 import { isNotNil as isNotNil32 } from "@wistia/type-guards";
 
 // src/components/Modal/ModalHeader.tsx
-import styled75 from "styled-components";
+import { styled as styled75 } from "styled-components";
 import { Title as DialogTitle } from "@radix-ui/react-dialog";
 
 // src/components/Modal/ModalCloseButton.tsx
-import styled74 from "styled-components";
+import { styled as styled74 } from "styled-components";
 import { Close as DialogClose } from "@radix-ui/react-dialog";
 import { jsx as jsx292 } from "react/jsx-runtime";
 var CloseButton = styled74(DialogClose)`
@@ -15483,7 +15483,7 @@ var ModalHeader = ({
 
 // src/components/Modal/ModalContent.tsx
 import { forwardRef as forwardRef25 } from "react";
-import styled76, { css as css38, keyframes as keyframes4 } from "styled-components";
+import { styled as styled76, css as css38, keyframes as keyframes4 } from "styled-components";
 import { Content as DialogContent } from "@radix-ui/react-dialog";
 
 // src/private/hooks/useFocusRestore/useFocusRestore.ts
@@ -15650,7 +15650,7 @@ var ModalContent = forwardRef25(
 
 // src/components/Modal/ModalOverlay.tsx
 import { DialogOverlay } from "@radix-ui/react-dialog";
-import styled77, { keyframes as keyframes5 } from "styled-components";
+import { styled as styled77, keyframes as keyframes5 } from "styled-components";
 var backdropShow = keyframes5`
   from {
     opacity: 0;
@@ -15784,7 +15784,7 @@ ModalCallout.displayName = "ModalCallout_UI";
 
 // src/components/Popover/Popover.tsx
 import { Root as Root2, Trigger as Trigger2, Portal, Content as Content2, Close } from "@radix-ui/react-popover";
-import styled80, { css as css40 } from "styled-components";
+import { styled as styled80, css as css40 } from "styled-components";
 
 // src/private/helpers/getControls/getControlProps.tsx
 import { isNotNil as isNotNil33 } from "@wistia/type-guards";
@@ -15794,7 +15794,7 @@ var getControlProps = (isOpen, onOpenChange) => {
 
 // src/components/Popover/PopoverArrow.tsx
 import { PopoverArrow as RadixPopoverArrow } from "@radix-ui/react-popover";
-import styled79, { css as css39, keyframes as keyframes6 } from "styled-components";
+import { styled as styled79, css as css39, keyframes as keyframes6 } from "styled-components";
 import { jsx as jsx297, jsxs as jsxs52 } from "react/jsx-runtime";
 var StyledPath = styled79.path`
   fill: var(--wui-color-border-secondary);
@@ -15943,7 +15943,7 @@ var Popover = ({
 Popover.displayName = "Popover_UI";
 
 // src/components/ProgressBar/ProgressBar.tsx
-import styled81 from "styled-components";
+import { styled as styled81 } from "styled-components";
 import { Root as ProgressRoot, Indicator as ProgressIndicator } from "@radix-ui/react-progress";
 import { isNotNil as isNotNil34 } from "@wistia/type-guards";
 import { jsx as jsx299, jsxs as jsxs54 } from "react/jsx-runtime";
@@ -16027,7 +16027,7 @@ ProgressBar.displayName = "ProgressBar_UI";
 // src/components/Radio/Radio.tsx
 import { isNonEmptyString as isNonEmptyString7, isNotUndefined as isNotUndefined13 } from "@wistia/type-guards";
 import { forwardRef as forwardRef27, useId as useId5 } from "react";
-import styled82, { css as css41 } from "styled-components";
+import { styled as styled82, css as css41 } from "styled-components";
 import { jsx as jsx300, jsxs as jsxs55 } from "react/jsx-runtime";
 var sizeSmall2 = css41`
   --wui-radio-size: 14px;
@@ -16178,7 +16178,7 @@ import { forwardRef as forwardRef29 } from "react";
 
 // src/components/RadioCard/RadioCardRoot.tsx
 import { forwardRef as forwardRef28, useId as useId6 } from "react";
-import styled83, { css as css42 } from "styled-components";
+import { styled as styled83, css as css42 } from "styled-components";
 import { isNonEmptyString as isNonEmptyString8, isNotUndefined as isNotUndefined14 } from "@wistia/type-guards";
 import { jsx as jsx301, jsxs as jsxs56 } from "react/jsx-runtime";
 var checkedStyles = css42`
@@ -16339,11 +16339,11 @@ var RadioCardRoot = forwardRef28(
 RadioCardRoot.displayName = "RadioCardRoot_UI";
 
 // src/components/RadioCard/RadioCardDefaultLayout.tsx
-import styled85 from "styled-components";
+import { styled as styled85 } from "styled-components";
 import { isNotNil as isNotNil35 } from "@wistia/type-guards";
 
 // src/components/RadioCard/RadioCardIndicator.tsx
-import styled84 from "styled-components";
+import { styled as styled84 } from "styled-components";
 var RadioCardIndicator = styled84.div`
   --wui-radio-card-indicator-size: 14px;
   --wui-radio-card-indicator-background-color: var(--wui-color-bg-surface);
@@ -16441,7 +16441,7 @@ var RadioCardDefaultLayout = ({
 RadioCardDefaultLayout.displayName = "RadioCardDefaultLayout_UI";
 
 // src/components/RadioCard/RadioCardChildrenContainer.tsx
-import styled86 from "styled-components";
+import { styled as styled86 } from "styled-components";
 var RadioCardChildrenContainer = styled86.div`
   flex: 1 1 auto;
 `;
@@ -16501,7 +16501,7 @@ RadioCardImage.displayName = "RadioCardImage_UI";
 
 // src/components/ScrollArea/ScrollArea.tsx
 import { forwardRef as forwardRef31, useCallback as useCallback18, useEffect as useEffect20, useMemo as useMemo15, useRef as useRef21, useState as useState23 } from "react";
-import styled87 from "styled-components";
+import { styled as styled87 } from "styled-components";
 import { throttle } from "throttle-debounce";
 import { jsx as jsx305, jsxs as jsxs58 } from "react/jsx-runtime";
 var SHADOW_SIZE_PX = 8;
@@ -16605,7 +16605,7 @@ ScrollArea.displayName = "ScrollArea_UI";
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 import { forwardRef as forwardRef32 } from "react";
-import styled89, { css as css44 } from "styled-components";
+import { styled as styled89, css as css44 } from "styled-components";
 import { Root as ToggleGroupRoot2 } from "@radix-ui/react-toggle-group";
 import { isNil as isNil18 } from "@wistia/type-guards";
 
@@ -16643,7 +16643,7 @@ var useSelectedItemStyle = () => {
 };
 
 // src/components/SegmentedControl/SelectedItemIndicator.tsx
-import styled88, { css as css43 } from "styled-components";
+import { styled as styled88, css as css43 } from "styled-components";
 import { isUndefined as isUndefined5 } from "@wistia/type-guards";
 
 // src/components/SegmentedControl/useSegmentedControlValue.tsx
@@ -16742,7 +16742,7 @@ SegmentedControl.displayName = "SegmentedControl_UI";
 
 // src/components/SegmentedControl/SegmentedControlItem.tsx
 import { forwardRef as forwardRef33, useEffect as useEffect21, useRef as useRef22 } from "react";
-import styled90, { css as css45 } from "styled-components";
+import { styled as styled90, css as css45 } from "styled-components";
 import { Item as ToggleGroupItem2 } from "@radix-ui/react-toggle-group";
 import { isNotNil as isNotNil36 } from "@wistia/type-guards";
 import { jsxs as jsxs60 } from "react/jsx-runtime";
@@ -16887,7 +16887,7 @@ import {
   ScrollDownButton
 } from "@radix-ui/react-select";
 import { forwardRef as forwardRef34 } from "react";
-import styled91, { css as css46 } from "styled-components";
+import { styled as styled91, css as css46 } from "styled-components";
 import { jsx as jsx309, jsxs as jsxs61 } from "react/jsx-runtime";
 var StyledTrigger2 = styled91(Trigger3)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
@@ -17034,7 +17034,7 @@ Select.displayName = "Select_UI";
 // src/components/Select/SelectOption.tsx
 import { Item, ItemText, ItemIndicator } from "@radix-ui/react-select";
 import { forwardRef as forwardRef35 } from "react";
-import styled92 from "styled-components";
+import { styled as styled92 } from "styled-components";
 import { isNotNil as isNotNil37 } from "@wistia/type-guards";
 import { jsx as jsx310, jsxs as jsxs62 } from "react/jsx-runtime";
 var StyledItem = styled92(Item)`
@@ -17092,7 +17092,7 @@ SelectOption.displayName = "SelectOption_UI";
 
 // src/components/Select/SelectOptionGroup.tsx
 import { Group, Label as Label3 } from "@radix-ui/react-select";
-import styled93 from "styled-components";
+import { styled as styled93 } from "styled-components";
 import { jsx as jsx311, jsxs as jsxs63 } from "react/jsx-runtime";
 var StyledLabel4 = styled93(Label3)`
   padding: var(--wui-select-option-padding);
@@ -17118,7 +17118,7 @@ import {
   Range as RadixSliderRange,
   Thumb as RadixSliderThumb
 } from "@radix-ui/react-slider";
-import styled94 from "styled-components";
+import { styled as styled94 } from "styled-components";
 import { isNonEmptyString as isNonEmptyString9 } from "@wistia/type-guards";
 import { jsx as jsx312, jsxs as jsxs64 } from "react/jsx-runtime";
 var SliderContainer = styled94.div`
@@ -17244,7 +17244,7 @@ var Slider = ({
 Slider.displayName = "Slider_UI";
 
 // src/components/Table/Table.tsx
-import styled95, { css as css47 } from "styled-components";
+import { styled as styled95, css as css47 } from "styled-components";
 import { jsx as jsx313 } from "react/jsx-runtime";
 var StyledTable = styled95.table`
   width: 100%;
@@ -17289,7 +17289,7 @@ var Table = ({
 
 // src/components/Table/TableBody.tsx
 import "react";
-import styled96 from "styled-components";
+import { styled as styled96 } from "styled-components";
 
 // src/components/Table/TableSectionContext.ts
 import { createContext as createContext11 } from "react";
@@ -17304,7 +17304,7 @@ var TableBody = ({ children, ...props }) => {
 
 // src/components/Table/TableCell.tsx
 import { useContext as useContext17 } from "react";
-import styled97, { css as css48 } from "styled-components";
+import { styled as styled97, css as css48 } from "styled-components";
 import { jsx as jsx315 } from "react/jsx-runtime";
 var sharedStyles = css48`
   color: var(--wui-color-text);
@@ -17333,7 +17333,7 @@ var TableCell = ({ children, ...props }) => {
 
 // src/components/Table/TableFoot.tsx
 import "react";
-import styled98 from "styled-components";
+import { styled as styled98 } from "styled-components";
 import { jsx as jsx316 } from "react/jsx-runtime";
 var StyledTableFoot = styled98.tfoot``;
 var TableFoot = ({ children, ...props }) => {
@@ -17342,7 +17342,7 @@ var TableFoot = ({ children, ...props }) => {
 
 // src/components/Table/TableHead.tsx
 import "react";
-import styled99 from "styled-components";
+import { styled as styled99 } from "styled-components";
 import { jsx as jsx317 } from "react/jsx-runtime";
 var StyledThead = styled99.thead``;
 var TableHead = ({ children, ...props }) => {
@@ -17350,7 +17350,7 @@ var TableHead = ({ children, ...props }) => {
 };
 
 // src/components/Table/TableRow.tsx
-import styled100 from "styled-components";
+import { styled as styled100 } from "styled-components";
 import { jsx as jsx318 } from "react/jsx-runtime";
 var StyledTableRow = styled100.tr``;
 var TableRow = ({ children, ...props }) => {
@@ -17417,13 +17417,13 @@ TabsContent.displayName = "TabsContent_UI";
 
 // src/components/Tabs/TabsList.tsx
 import { List as RadixTabList } from "@radix-ui/react-tabs";
-import styled102 from "styled-components";
+import { styled as styled102 } from "styled-components";
 
 // src/components/Tabs/SelectedTabIndicator.tsx
 import { isUndefined as isUndefined6 } from "@wistia/type-guards";
 
 // src/components/Tabs/TabsSelectedItemIndicatorDiv.tsx
-import styled101 from "styled-components";
+import { styled as styled101 } from "styled-components";
 var TabsSelectedItemIndicatorDiv = styled101(SelectedItemIndicatorDiv)`
   &:has(~ button[role='tab']:focus-visible) {
     outline: 2px solid var(--wui-color-focus-ring);
@@ -17472,7 +17472,7 @@ import { forwardRef as forwardRef36, useEffect as useEffect22, useRef as useRef2
 import { isNotNil as isNotNil39 } from "@wistia/type-guards";
 
 // src/components/Tabs/StyledRadixTabsTrigger.tsx
-import styled103 from "styled-components";
+import { styled as styled103 } from "styled-components";
 import { Trigger as RadixTabsTrigger } from "@radix-ui/react-tabs";
 var StyledRadixTabsTrigger = styled103(RadixTabsTrigger)`
   ${segmentedControlItemStyles}
@@ -17535,7 +17535,7 @@ var TabsTrigger = forwardRef36(
 TabsTrigger.displayName = "TabsTrigger_UI";
 
 // src/components/Thumbnail/ThumbnailBadge.tsx
-import styled104 from "styled-components";
+import { styled as styled104 } from "styled-components";
 import { isNotNil as isNotNil40 } from "@wistia/type-guards";
 import { jsx as jsx323, jsxs as jsxs67 } from "react/jsx-runtime";
 var StyledThumbnailBadge = styled104.div`
@@ -17573,7 +17573,7 @@ ThumbnailBadge.displayName = "ThumbnailBadge_UI";
 
 // src/components/Thumbnail/Thumbnail.tsx
 import { forwardRef as forwardRef37, useState as useState26, useRef as useRef24, useCallback as useCallback20, useMemo as useMemo17 } from "react";
-import styled106 from "styled-components";
+import { styled as styled106 } from "styled-components";
 import { isNil as isNil19, isNotNil as isNotNil43, isUndefined as isUndefined7, isEmptyString as isEmptyString2, isString as isString4 } from "@wistia/type-guards";
 
 // src/private/helpers/getBackgroundGradient/getBackgroundGradient.ts
@@ -17709,7 +17709,7 @@ var getBackgroundGradient = (gradientName = void 0) => {
 };
 
 // src/components/Thumbnail/ThumbnailStoryboardViewer.tsx
-import styled105 from "styled-components";
+import { styled as styled105 } from "styled-components";
 import { isNotNil as isNotNil42 } from "@wistia/type-guards";
 import { jsx as jsx324, jsxs as jsxs68 } from "react/jsx-runtime";
 var ScrubLine = styled105.div`
@@ -17845,6 +17845,14 @@ var ThumbnailStoryboardViewer = ({
 
 // src/components/Thumbnail/Thumbnail.tsx
 import { jsx as jsx325, jsxs as jsxs69 } from "react/jsx-runtime";
+var WIDE_ASPECT_RATIO = 16 / 9;
+var SQUARE_ASPECT_RATIO = 1;
+var getAspectRatioValue = (aspectRatio) => {
+  if (aspectRatio === "square") {
+    return SQUARE_ASPECT_RATIO;
+  }
+  return WIDE_ASPECT_RATIO;
+};
 var WideThumbnailImage = styled106.img`
   height: 100%;
   object-fit: cover;
@@ -17883,7 +17891,7 @@ var StyledThumbnail = styled106.div`
 )};
   background-position: center center;
   background-size: cover;
-  aspect-ratio: 16 / 9;
+  aspect-ratio: ${({ $aspectRatio }) => $aspectRatio};
   display: flex;
   overflow: hidden;
   position: relative;
@@ -17892,7 +17900,10 @@ var StyledThumbnail = styled106.div`
 
   &,
   img {
-    border-radius: calc(8% * (9 / 16)) / 8%;
+    border-radius: ${({ $aspectRatio }) => {
+  const heightPercentage = 8 / $aspectRatio;
+  return `calc(8% * (1 / ${$aspectRatio})) / ${heightPercentage}%`;
+}};
   }
 `;
 var StoryboardRenderer = ({
@@ -17900,17 +17911,10 @@ var StoryboardRenderer = ({
   width,
   percent,
   cursorPosition,
-  isStoryboardReady
+  isStoryboardReady,
+  aspectRatio
 }) => {
-  const {
-    url,
-    width: sbWidth,
-    height: sbHeight,
-    frameHeight,
-    frameWidth,
-    frameCount,
-    aspectRatio
-  } = storyboard;
+  const { url, width: sbWidth, height: sbHeight, frameHeight, frameWidth, frameCount } = storyboard;
   const targetWidth = isString4(width) ? parseInt(width, 10) : Number(width);
   const effectiveCursorPosition = isStoryboardReady ? cursorPosition : null;
   return /* @__PURE__ */ jsx325(
@@ -17924,7 +17928,7 @@ var StoryboardRenderer = ({
       storyboardHeight: sbHeight,
       storyboardUrl: url,
       storyboardWidth: sbWidth,
-      targetAspectRatio: aspectRatio,
+      targetAspectRatio: getAspectRatioValue(aspectRatio),
       targetWidth
     }
   );
@@ -17947,6 +17951,7 @@ var Thumbnail = forwardRef37(
     children,
     storyboard,
     height,
+    aspectRatio = "wide",
     ...props
   }, ref) => {
     const [percent, setPercent] = useState26(0);
@@ -17998,6 +18003,7 @@ var Thumbnail = forwardRef37(
       thumbnailContent = /* @__PURE__ */ jsx325(
         StoryboardRenderer,
         {
+          aspectRatio,
           cursorPosition,
           isStoryboardReady,
           percent,
@@ -18021,6 +18027,7 @@ var Thumbnail = forwardRef37(
       {
         ref,
         ...props,
+        $aspectRatio: getAspectRatioValue(aspectRatio),
         $backgroundUrl: backgroundUrl,
         $gradientBackground: gradientBackground,
         $isScrubbable: isScrubbable,
@@ -18041,7 +18048,7 @@ Thumbnail.displayName = "Thumbnail_UI";
 
 // src/components/ThumbnailCollage/ThumbnailCollage.tsx
 import React5 from "react";
-import styled107 from "styled-components";
+import { styled as styled107 } from "styled-components";
 import { isNonEmptyArray } from "@wistia/type-guards";
 import { jsx as jsx326 } from "react/jsx-runtime";
 var StyledThumbnailCollage = styled107.div`
@@ -18147,7 +18154,7 @@ var ThumbnailCollage = ({
 };
 
 // src/components/WistiaLogo/WistiaLogo.tsx
-import styled108, { css as css50 } from "styled-components";
+import { styled as styled108, css as css50 } from "styled-components";
 import { isNotNil as isNotNil44 } from "@wistia/type-guards";
 import { jsx as jsx327, jsxs as jsxs70 } from "react/jsx-runtime";
 var renderBrandmark = (brandmarkColor, iconOnly) => {
@@ -18272,7 +18279,7 @@ var WistiaLogo = ({
 WistiaLogo.displayName = "WistiaLogo_UI";
 
 // src/components/SplitButton/SplitButton.tsx
-import styled109 from "styled-components";
+import { styled as styled109 } from "styled-components";
 import { isNotNil as isNotNil45 } from "@wistia/type-guards";
 import { cloneElement as cloneElement9 } from "react";
 import { jsx as jsx328, jsxs as jsxs71 } from "react/jsx-runtime";