@wistia/ui 0.14.9 → 0.14.10-beta.fe9c3253.fc4005b

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.14.9
+ * @license @wistia/ui v0.14.10-beta.fe9c3253.fc4005b
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -13690,7 +13690,6 @@ var Menu = (0, import_react64.forwardRef)(
     isOpen,
     triggerProps = {},
     onOpenChange,
-    onInteractOutside,
     ...props
   }, ref) => {
     const contextValue = (0, import_react64.useMemo)(() => ({ compact }), [compact]);
@@ -15059,13 +15058,14 @@ var StyledCard2 = import_styled_components94.default.label`
   --wui-radio-card-border-radius: var(--wui-border-radius-02);
 
   position: relative;
-  display: flex;
+  display: inline-flex;
   padding: ${({ $padding }) => `var(--wui-${$padding})`};
   aspect-ratio: ${({ $aspectRatio }) => $aspectRatio};
   border: var(--wui-radio-card-border-width) solid var(--wui-radio-card-border-color);
   border-radius: var(--wui-radio-card-border-radius);
   background-color: var(--wui-radio-card-background-color);
   cursor: var(--wui-radio-card-cursor);
+  overflow: hidden;
   transition: all var(--wui-motion-duration-03) var(--wui-motion-ease);
 
   svg {
@@ -15243,7 +15243,7 @@ var RadioCardDefaultLayout = ({
           gap: "space-01",
           style: (0, import_type_guards55.isNotNil)(icon) ? { paddingLeft: 2 } : void 0,
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime288.jsx)(Text, { variant: "label3", children: /* @__PURE__ */ (0, import_jsx_runtime288.jsx)("strong", { children: label }) }),
+            (0, import_type_guards55.isNotNil)(label) && /* @__PURE__ */ (0, import_jsx_runtime288.jsx)(Text, { variant: "label3", children: /* @__PURE__ */ (0, import_jsx_runtime288.jsx)("strong", { children: label }) }),
             (0, import_type_guards55.isNotNil)(description) && /* @__PURE__ */ (0, import_jsx_runtime288.jsx)(
               Text,
               {
@@ -15260,16 +15260,23 @@ var RadioCardDefaultLayout = ({
 };
 RadioCardDefaultLayout.displayName = "RadioCardDefaultLayout_UI";
 
+// src/components/RadioCard/RadioCardChildrenContainer.tsx
+var import_styled_components97 = __toESM(require("styled-components"));
+var RadioCardChildrenContainer = import_styled_components97.default.div`
+  flex: 1 1 auto;
+`;
+
 // src/components/RadioCard/RadioCard.tsx
 var import_jsx_runtime289 = require("react/jsx-runtime");
 var RadioCard = (0, import_react74.forwardRef)(
-  ({ icon, label, description, showIndicator, ...rootProps }, ref) => {
+  ({ icon, label, description, showIndicator, children, ...rootProps }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime289.jsx)(
       RadioCardRoot,
       {
         ref,
+        padding: children != null ? "space-00" : "space-04",
         ...rootProps,
-        children: /* @__PURE__ */ (0, import_jsx_runtime289.jsx)(
+        children: children != null ? /* @__PURE__ */ (0, import_jsx_runtime289.jsx)(RadioCardChildrenContainer, { "data-wui-radio-card-image": "cover", children }) : /* @__PURE__ */ (0, import_jsx_runtime289.jsx)(
           RadioCardDefaultLayout,
           {
             description,
@@ -15314,7 +15321,7 @@ RadioCardImage.displayName = "RadioCardImage_UI";
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 var import_react78 = require("react");
-var import_styled_components98 = __toESM(require("styled-components"));
+var import_styled_components99 = __toESM(require("styled-components"));
 var import_react_toggle_group3 = require("@radix-ui/react-toggle-group");
 var import_type_guards57 = require("@wistia/type-guards");
 
@@ -15352,7 +15359,7 @@ var useSelectedItemStyle = () => {
 };
 
 // src/components/SegmentedControl/SelectedItemIndicator.tsx
-var import_styled_components97 = __toESM(require("styled-components"));
+var import_styled_components98 = __toESM(require("styled-components"));
 var import_type_guards56 = require("@wistia/type-guards");
 
 // src/components/SegmentedControl/useSegmentedControlValue.tsx
@@ -15369,12 +15376,12 @@ var useSegmentedControlValue = () => {
 
 // src/components/SegmentedControl/SelectedItemIndicator.tsx
 var import_jsx_runtime292 = require("react/jsx-runtime");
-var selectedItemIndicatorStyles = import_styled_components97.css`
+var selectedItemIndicatorStyles = import_styled_components98.css`
   background-color: var(--wui-color-bg-fill-white);
   border-radius: var(--wui-border-radius-rounded);
   box-shadow: var(--wui-elevation-01);
 `;
-var SelectedItemIndicatorDiv = import_styled_components97.default.div`
+var SelectedItemIndicatorDiv = import_styled_components98.default.div`
   ${selectedItemIndicatorStyles}
   left: 0;
   position: absolute;
@@ -15401,7 +15408,7 @@ var SelectedItemIndicator = () => {
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 var import_jsx_runtime293 = require("react/jsx-runtime");
-var segmentedControlStyles = import_styled_components98.css`
+var segmentedControlStyles = import_styled_components99.css`
   display: inline-flex;
   background-color: var(--wui-color-bg-surface-secondary);
   border-radius: var(--wui-border-radius-rounded);
@@ -15412,7 +15419,7 @@ var segmentedControlStyles = import_styled_components98.css`
   position: relative;
   width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
 `;
-var StyledSegmentedControl = (0, import_styled_components98.default)(import_react_toggle_group3.Root)`
+var StyledSegmentedControl = (0, import_styled_components99.default)(import_react_toggle_group3.Root)`
   ${segmentedControlStyles}
 `;
 var SegmentedControl = (0, import_react78.forwardRef)(
@@ -15451,11 +15458,11 @@ SegmentedControl.displayName = "SegmentedControl_UI";
 
 // src/components/SegmentedControl/SegmentedControlItem.tsx
 var import_react79 = require("react");
-var import_styled_components99 = __toESM(require("styled-components"));
+var import_styled_components100 = __toESM(require("styled-components"));
 var import_react_toggle_group4 = require("@radix-ui/react-toggle-group");
 var import_type_guards58 = require("@wistia/type-guards");
 var import_jsx_runtime294 = require("react/jsx-runtime");
-var segmentedControlItemStyles = import_styled_components99.css`
+var segmentedControlItemStyles = import_styled_components100.css`
   all: unset; /* ToggleGroupItem is a button element */
   align-items: center;
   border-radius: var(--wui-border-radius-rounded);
@@ -15522,7 +15529,7 @@ var segmentedControlItemStyles = import_styled_components99.css`
     }
   }
 `;
-var StyledSegmentedControlItem = (0, import_styled_components99.default)(import_react_toggle_group4.Item)`
+var StyledSegmentedControlItem = (0, import_styled_components100.default)(import_react_toggle_group4.Item)`
   ${segmentedControlItemStyles}
 `;
 var SegmentedControlItem = (0, import_react79.forwardRef)(
@@ -15586,9 +15593,9 @@ SegmentedControlItem.displayName = "SegmentedControlItem_UI";
 // src/components/Select/Select.tsx
 var import_react_select = require("@radix-ui/react-select");
 var import_react80 = require("react");
-var import_styled_components100 = __toESM(require("styled-components"));
+var import_styled_components101 = __toESM(require("styled-components"));
 var import_jsx_runtime295 = require("react/jsx-runtime");
-var StyledTrigger2 = (0, import_styled_components100.default)(import_react_select.Trigger)`
+var StyledTrigger2 = (0, import_styled_components101.default)(import_react_select.Trigger)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   ${inputCss};
   padding: var(--wui-input-vertical-padding) var(--wui-input-horizontal-padding);
@@ -15632,7 +15639,7 @@ var StyledTrigger2 = (0, import_styled_components100.default)(import_react_selec
     color: var(--wui-input-placeholder);
   }
 `;
-var StyledContent3 = (0, import_styled_components100.default)(import_react_select.Content)`
+var StyledContent3 = (0, import_styled_components101.default)(import_react_select.Content)`
   --wui-select-content-border: var(--wui-color-border);
   --wui-select-content-bg: var(--wui-color-bg-surface);
   --wui-select-content-border-radius: var(--wui-border-radius-02);
@@ -15700,10 +15707,10 @@ Select.displayName = "Select_UI";
 // src/components/Select/SelectOption.tsx
 var import_react_select2 = require("@radix-ui/react-select");
 var import_react81 = require("react");
-var import_styled_components101 = __toESM(require("styled-components"));
+var import_styled_components102 = __toESM(require("styled-components"));
 var import_type_guards59 = require("@wistia/type-guards");
 var import_jsx_runtime296 = require("react/jsx-runtime");
-var StyledItem = (0, import_styled_components101.default)(import_react_select2.Item)`
+var StyledItem = (0, import_styled_components102.default)(import_react_select2.Item)`
   ${variantStyleMap2.body3};
   display: flex;
   padding: var(--wui-select-option-padding);
@@ -15727,7 +15734,7 @@ var StyledItem = (0, import_styled_components101.default)(import_react_select2.I
     background-color: transparent;
   }
 `;
-var StyledIconContainer2 = import_styled_components101.default.span`
+var StyledIconContainer2 = import_styled_components102.default.span`
   width: 12px;
 `;
 var SelectOption = (0, import_react81.forwardRef)(
@@ -15758,9 +15765,9 @@ SelectOption.displayName = "SelectOption_UI";
 
 // src/components/Select/SelectOptionGroup.tsx
 var import_react_select3 = require("@radix-ui/react-select");
-var import_styled_components102 = __toESM(require("styled-components"));
+var import_styled_components103 = __toESM(require("styled-components"));
 var import_jsx_runtime297 = require("react/jsx-runtime");
-var StyledLabel4 = (0, import_styled_components102.default)(import_react_select3.Label)`
+var StyledLabel4 = (0, import_styled_components103.default)(import_react_select3.Label)`
   padding: var(--wui-select-option-padding);
 `;
 var SelectOptionGroup = ({ children, label, ...props }) => {
@@ -15779,10 +15786,10 @@ var SelectOptionGroup = ({ children, label, ...props }) => {
 
 // src/components/Slider/Slider.tsx
 var import_react_slider2 = require("@radix-ui/react-slider");
-var import_styled_components103 = __toESM(require("styled-components"));
+var import_styled_components104 = __toESM(require("styled-components"));
 var import_type_guards60 = require("@wistia/type-guards");
 var import_jsx_runtime298 = require("react/jsx-runtime");
-var SliderContainer = import_styled_components103.default.div`
+var SliderContainer = import_styled_components104.default.div`
   --wui-slider-track-color: var(--wui-gray-6);
   --wui-slider-track-border-radius: var(--wui-border-radius-rounded);
   --wui-slider-range-color: var(--wui-color-bg-fill);
@@ -15798,7 +15805,7 @@ var SliderContainer = import_styled_components103.default.div`
     pointer-events: none;
   }
 `;
-var StyledSliderRoot = (0, import_styled_components103.default)(import_react_slider2.Root)`
+var StyledSliderRoot = (0, import_styled_components104.default)(import_react_slider2.Root)`
   position: relative;
   display: flex;
   align-items: center;
@@ -15806,20 +15813,20 @@ var StyledSliderRoot = (0, import_styled_components103.default)(import_react_sli
   touch-action: none;
   width: 100%;
 `;
-var StyledSliderTrack = (0, import_styled_components103.default)(import_react_slider2.Track)`
+var StyledSliderTrack = (0, import_styled_components104.default)(import_react_slider2.Track)`
   background-color: var(--wui-slider-track-color);
   border-radius: var(--wui-slider-track-border-radius);
   flex-grow: 1;
   height: 6px;
   position: relative;
 `;
-var StyledSliderRange = (0, import_styled_components103.default)(import_react_slider2.Range)`
+var StyledSliderRange = (0, import_styled_components104.default)(import_react_slider2.Range)`
   background-color: var(--wui-slider-range-color);
   border-radius: var(--wui-slider-track-border-radius);
   height: 100%;
   position: absolute;
 `;
-var StyledSliderThumb = (0, import_styled_components103.default)(import_react_slider2.Thumb)`
+var StyledSliderThumb = (0, import_styled_components104.default)(import_react_slider2.Thumb)`
   background-color: var(--wui-slider-thumb-color);
   border-radius: var(--wui-border-radius-rounded);
   cursor: grab;
@@ -15905,25 +15912,25 @@ var Slider = ({
 Slider.displayName = "Slider_UI";
 
 // src/components/Table/Table.tsx
-var import_styled_components104 = __toESM(require("styled-components"));
+var import_styled_components105 = __toESM(require("styled-components"));
 var import_jsx_runtime299 = require("react/jsx-runtime");
-var StyledTable = import_styled_components104.default.table`
+var StyledTable = import_styled_components105.default.table`
   width: 100%;
   border-collapse: collapse;
 
-  ${({ $divided }) => $divided && import_styled_components104.css`
+  ${({ $divided }) => $divided && import_styled_components105.css`
       tr {
         border-bottom: 1px solid var(--wui-color-border);
       }
     `}
 
-  ${({ $striped }) => $striped && import_styled_components104.css`
+  ${({ $striped }) => $striped && import_styled_components105.css`
       tbody tr:nth-child(even) {
         background-color: var(--wui-color-bg-surface-secondary);
       }
     `}
 
-  ${({ $visuallyHiddenHeader }) => $visuallyHiddenHeader && import_styled_components104.css`
+  ${({ $visuallyHiddenHeader }) => $visuallyHiddenHeader && import_styled_components105.css`
       thead {
         ${visuallyHiddenStyle}
       }
@@ -15949,7 +15956,7 @@ var Table = ({
 };
 
 // src/components/Table/TableBody.tsx
-var import_styled_components105 = __toESM(require("styled-components"));
+var import_styled_components106 = __toESM(require("styled-components"));
 
 // src/components/Table/TableSectionContext.ts
 var import_react82 = require("react");
@@ -15957,27 +15964,27 @@ var TableSectionContext = (0, import_react82.createContext)(null);
 
 // src/components/Table/TableBody.tsx
 var import_jsx_runtime300 = require("react/jsx-runtime");
-var StyledTableBody = import_styled_components105.default.tbody``;
+var StyledTableBody = import_styled_components106.default.tbody``;
 var TableBody = ({ children, ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime300.jsx)(TableSectionContext.Provider, { value: "body", children: /* @__PURE__ */ (0, import_jsx_runtime300.jsx)(StyledTableBody, { ...props, children }) });
 };
 
 // src/components/Table/TableCell.tsx
 var import_react83 = require("react");
-var import_styled_components106 = __toESM(require("styled-components"));
+var import_styled_components107 = __toESM(require("styled-components"));
 var import_jsx_runtime301 = require("react/jsx-runtime");
-var sharedStyles = import_styled_components106.css`
+var sharedStyles = import_styled_components107.css`
   color: var(--wui-color-text);
   padding: var(--wui-space-02);
   text-align: left;
 `;
-var StyledTh = import_styled_components106.default.th`
+var StyledTh = import_styled_components107.default.th`
   ${sharedStyles}
   font-size: var(--wui-typography-body-4-size);
   font-weight: var(--wui-typography-weight-label-bold);
   line-height: var(--wui-typography-body-4-line-height);
 `;
-var StyledTd = import_styled_components106.default.td`
+var StyledTd = import_styled_components107.default.td`
   ${sharedStyles}
   font-size: var(--wui-typography-body-2-size);
   font-weight: var(--wui-typography-body-2-weight);
@@ -15992,25 +15999,25 @@ var TableCell = ({ children, ...props }) => {
 };
 
 // src/components/Table/TableFoot.tsx
-var import_styled_components107 = __toESM(require("styled-components"));
+var import_styled_components108 = __toESM(require("styled-components"));
 var import_jsx_runtime302 = require("react/jsx-runtime");
-var StyledTableFoot = import_styled_components107.default.tfoot``;
+var StyledTableFoot = import_styled_components108.default.tfoot``;
 var TableFoot = ({ children, ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(TableSectionContext.Provider, { value: "footer", children: /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(StyledTableFoot, { ...props, children }) });
 };
 
 // src/components/Table/TableHead.tsx
-var import_styled_components108 = __toESM(require("styled-components"));
+var import_styled_components109 = __toESM(require("styled-components"));
 var import_jsx_runtime303 = require("react/jsx-runtime");
-var StyledThead = import_styled_components108.default.thead``;
+var StyledThead = import_styled_components109.default.thead``;
 var TableHead = ({ children, ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime303.jsx)(TableSectionContext.Provider, { value: "head", children: /* @__PURE__ */ (0, import_jsx_runtime303.jsx)(StyledThead, { ...props, children }) });
 };
 
 // src/components/Table/TableRow.tsx
-var import_styled_components109 = __toESM(require("styled-components"));
+var import_styled_components110 = __toESM(require("styled-components"));
 var import_jsx_runtime304 = require("react/jsx-runtime");
-var StyledTableRow = import_styled_components109.default.tr``;
+var StyledTableRow = import_styled_components110.default.tr``;
 var TableRow = ({ children, ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime304.jsx)(StyledTableRow, { ...props, children });
 };
@@ -16075,14 +16082,14 @@ TabsContent.displayName = "TabsContent_UI";
 
 // src/components/Tabs/TabsList.tsx
 var import_react_tabs3 = require("@radix-ui/react-tabs");
-var import_styled_components111 = __toESM(require("styled-components"));
+var import_styled_components112 = __toESM(require("styled-components"));
 
 // src/components/Tabs/SelectedTabIndicator.tsx
 var import_type_guards62 = require("@wistia/type-guards");
 
 // src/components/Tabs/TabsSelectedItemIndicatorDiv.tsx
-var import_styled_components110 = __toESM(require("styled-components"));
-var TabsSelectedItemIndicatorDiv = (0, import_styled_components110.default)(SelectedItemIndicatorDiv)`
+var import_styled_components111 = __toESM(require("styled-components"));
+var TabsSelectedItemIndicatorDiv = (0, import_styled_components111.default)(SelectedItemIndicatorDiv)`
   &:has(~ button[role='tab']:focus-visible) {
     outline: 2px solid var(--wui-color-focus-ring);
   }
@@ -16107,7 +16114,7 @@ var SelectedTabIndicator = () => {
 
 // src/components/Tabs/TabsList.tsx
 var import_jsx_runtime308 = require("react/jsx-runtime");
-var StyledRadixTabsList = (0, import_styled_components111.default)(import_react_tabs3.List)`
+var StyledRadixTabsList = (0, import_styled_components112.default)(import_react_tabs3.List)`
   ${segmentedControlStyles}
 `;
 var TabsList = ({ children, fullWidth = true, ...props }) => {
@@ -16130,9 +16137,9 @@ var import_react86 = require("react");
 var import_type_guards63 = require("@wistia/type-guards");
 
 // src/components/Tabs/StyledRadixTabsTrigger.tsx
-var import_styled_components112 = __toESM(require("styled-components"));
+var import_styled_components113 = __toESM(require("styled-components"));
 var import_react_tabs4 = require("@radix-ui/react-tabs");
-var StyledRadixTabsTrigger = (0, import_styled_components112.default)(import_react_tabs4.Trigger)`
+var StyledRadixTabsTrigger = (0, import_styled_components113.default)(import_react_tabs4.Trigger)`
   ${segmentedControlItemStyles}
 
   &:focus-visible {
@@ -16193,10 +16200,10 @@ var TabsTrigger = (0, import_react86.forwardRef)(
 TabsTrigger.displayName = "TabsTrigger_UI";
 
 // src/components/Thumbnail/ThumbnailBadge.tsx
-var import_styled_components113 = __toESM(require("styled-components"));
+var import_styled_components114 = __toESM(require("styled-components"));
 var import_type_guards64 = require("@wistia/type-guards");
 var import_jsx_runtime310 = require("react/jsx-runtime");
-var StyledThumbnailBadge = import_styled_components113.default.div`
+var StyledThumbnailBadge = import_styled_components114.default.div`
   align-items: center;
   background-color: rgb(0 0 0 / 50%);
   border-radius: var(--wui-border-radius-01);
@@ -16230,14 +16237,14 @@ ThumbnailBadge.displayName = "ThumbnailBadge_UI";
 
 // src/components/Thumbnail/Thumbnail.tsx
 var import_react87 = require("react");
-var import_styled_components116 = __toESM(require("styled-components"));
+var import_styled_components117 = __toESM(require("styled-components"));
 var import_type_guards67 = require("@wistia/type-guards");
 
 // src/private/helpers/getBackgroundGradient/getBackgroundGradient.ts
 var import_type_guards65 = require("@wistia/type-guards");
-var import_styled_components114 = require("styled-components");
+var import_styled_components115 = require("styled-components");
 var gradients = {
-  defaultDarkOne: import_styled_components114.css`
+  defaultDarkOne: import_styled_components115.css`
     background-color: #222d66;
     background-image:
       radial-gradient(farthest-corner at top right, #222d66, transparent 70%),
@@ -16245,7 +16252,7 @@ var gradients = {
       radial-gradient(farthest-corner at bottom left, #6b84ff, transparent 57%),
       radial-gradient(farthest-corner at top left, #2949e5, transparent 68%);
   `,
-  defaultDarkTwo: import_styled_components114.css`
+  defaultDarkTwo: import_styled_components115.css`
     background-color: #222d66;
     background-image:
       radial-gradient(farthest-corner at top left, #6b84ff, transparent 100%),
@@ -16253,7 +16260,7 @@ var gradients = {
       radial-gradient(farthest-corner at bottom right, #2949e5, transparent 50%),
       radial-gradient(farthest-corner at top right, #2949e5, transparent 70%);
   `,
-  defaultLightOne: import_styled_components114.css`
+  defaultLightOne: import_styled_components115.css`
     background-color: #ccd5ff;
     background-image:
       radial-gradient(farthest-corner at bottom right, #ccd5ff, transparent 55%),
@@ -16261,13 +16268,13 @@ var gradients = {
       radial-gradient(farthest-corner at top right, #6b84ff, transparent 50%),
       radial-gradient(farthest-corner at bottom left, #f7f8ff, transparent 50%);
   `,
-  defaultLightTwo: import_styled_components114.css`
+  defaultLightTwo: import_styled_components115.css`
     background-color: #ccd5ff;
     background-image:
       radial-gradient(ellipse at top, #ccd5ff, transparent),
       radial-gradient(ellipse at bottom, #6b84ff, transparent);
   `,
-  defaultMidOne: import_styled_components114.css`
+  defaultMidOne: import_styled_components115.css`
     background-color: #6b84ff;
     background-image:
       radial-gradient(farthest-corner at top right, #2949e5, transparent 70%),
@@ -16275,13 +16282,13 @@ var gradients = {
       radial-gradient(farthest-corner at top left, #6b84ff, transparent 80%),
       radial-gradient(farthest-corner at bottom left, #222d66, transparent 57%);
   `,
-  defaultMidTwo: import_styled_components114.css`
+  defaultMidTwo: import_styled_components115.css`
     background-color: #6b84ff;
     background-image:
       radial-gradient(ellipse at top, #2949e5, transparent),
       radial-gradient(ellipse at bottom, #ccd5ff, transparent);
   `,
-  green: import_styled_components114.css`
+  green: import_styled_components115.css`
     background-color: #fafffa;
     background-image:
       radial-gradient(farthest-corner at bottom left, #b0e5a5, transparent 50%),
@@ -16289,7 +16296,7 @@ var gradients = {
       radial-gradient(farthest-corner at top left, #44b62d, transparent 65%),
       radial-gradient(farthest-corner at bottom right, #44b62d, transparent 55%);
   `,
-  greenWithPop: import_styled_components114.css`
+  greenWithPop: import_styled_components115.css`
     background-color: #fafffa;
     background-image:
       radial-gradient(farthest-corner at bottom left, #b0e5a5, transparent 50%),
@@ -16297,7 +16304,7 @@ var gradients = {
       radial-gradient(farthest-corner at top left, #44b62d, transparent 65%),
       radial-gradient(farthest-corner at bottom right, #44b62d, transparent 55%);
   `,
-  pink: import_styled_components114.css`
+  pink: import_styled_components115.css`
     background-color: #fffff0;
     background-image:
       radial-gradient(farthest-corner at bottom left, #ffc7e8, transparent 50%),
@@ -16305,7 +16312,7 @@ var gradients = {
       radial-gradient(farthest-corner at top left, #ff40b3, transparent 65%),
       radial-gradient(farthest-corner at bottom right, #ff40b3, transparent 55%);
   `,
-  pinkWithPop: import_styled_components114.css`
+  pinkWithPop: import_styled_components115.css`
     background-color: #fffff0;
     background-image:
       radial-gradient(farthest-corner at top right, #e0128e, transparent 70%),
@@ -16313,7 +16320,7 @@ var gradients = {
       radial-gradient(farthest-corner at bottom right, #ff40b3, transparent 55%),
       radial-gradient(farthest-corner at bottom left, #2949e5, transparent 50%);
   `,
-  playfulGradientOne: import_styled_components114.css`
+  playfulGradientOne: import_styled_components115.css`
     background-color: #f7f8ff;
     background-image:
       radial-gradient(farthest-corner at top left, #d65cff, transparent 68%),
@@ -16321,7 +16328,7 @@ var gradients = {
       radial-gradient(farthest-corner at bottom left, #ffc7e8, transparent 57%),
       radial-gradient(farthest-corner at top right, #ffcaba, transparent 70%);
   `,
-  playfulGradientTwo: import_styled_components114.css`
+  playfulGradientTwo: import_styled_components115.css`
     background-color: #f7f8ff;
     background-image:
       radial-gradient(farthest-corner at top left, #44b62d, transparent 68%),
@@ -16329,13 +16336,13 @@ var gradients = {
       radial-gradient(farthest-corner at bottom left, #ccd5ff, transparent 57%),
       radial-gradient(farthest-corner at top right, #2949e5, transparent 70%);
   `,
-  purple: import_styled_components114.css`
+  purple: import_styled_components115.css`
     background-color: #f2caff;
     background-image:
       radial-gradient(ellipse at 0% 100%, #f9e5ff, transparent 50%),
       radial-gradient(ellipse at 100% 0%, #e093fa, transparent 70%);
   `,
-  purpleWithPop: import_styled_components114.css`
+  purpleWithPop: import_styled_components115.css`
     background-color: #f2caff;
     background-image:
       radial-gradient(farthest-corner at bottom left, #f2caff, transparent 50%),
@@ -16343,7 +16350,7 @@ var gradients = {
       radial-gradient(farthest-corner at bottom right, #d65cff, transparent 55%),
       radial-gradient(farthest-corner at top right, #2949e5, transparent 70%);
   `,
-  yellow: import_styled_components114.css`
+  yellow: import_styled_components115.css`
     background-color: #fffff0;
     background-image:
       radial-gradient(farthest-corner at bottom left, #eff18d, transparent 50%),
@@ -16351,7 +16358,7 @@ var gradients = {
       radial-gradient(farthest-corner at top left, #e8ec1e, transparent 65%),
       radial-gradient(farthest-corner at bottom right, #e8ec1e, transparent 55%);
   `,
-  yellowWithPop: import_styled_components114.css`
+  yellowWithPop: import_styled_components115.css`
     background-color: #fffff0;
     background-image:
       radial-gradient(farthest-corner at bottom left, #eff18d, transparent 50%),
@@ -16366,10 +16373,10 @@ var getBackgroundGradient = (gradientName = void 0) => {
 };
 
 // src/components/Thumbnail/ThumbnailStoryboardViewer.tsx
-var import_styled_components115 = __toESM(require("styled-components"));
+var import_styled_components116 = __toESM(require("styled-components"));
 var import_type_guards66 = require("@wistia/type-guards");
 var import_jsx_runtime311 = require("react/jsx-runtime");
-var ScrubLine = import_styled_components115.default.div`
+var ScrubLine = import_styled_components116.default.div`
   position: absolute;
   top: 0;
   height: 100%;
@@ -16494,12 +16501,12 @@ var ThumbnailStoryboardViewer = ({
 
 // src/components/Thumbnail/Thumbnail.tsx
 var import_jsx_runtime312 = require("react/jsx-runtime");
-var WideThumbnailImage = import_styled_components116.default.img`
+var WideThumbnailImage = import_styled_components117.default.img`
   height: 100%;
   object-fit: cover;
   width: 100%;
 `;
-var SquareThumbnailImage = import_styled_components116.default.img`
+var SquareThumbnailImage = import_styled_components117.default.img`
   backdrop-filter: blur(8px);
   object-fit: contain;
   width: 100%;
@@ -16524,7 +16531,7 @@ var ThumbnailImage = ({ thumbnailImageType, thumbnailUrl }) => {
     }
   );
 };
-var StyledThumbnail = import_styled_components116.default.div`
+var StyledThumbnail = import_styled_components117.default.div`
   background-image: ${({ $backgroundUrl }) => (0, import_type_guards67.isNotNil)($backgroundUrl) ? `url('${$backgroundUrl}')` : void 0};
   ${({ $backgroundUrl, $gradientBackground }) => (
   // if we don't have $backgroundUrl show a gradient
@@ -16673,13 +16680,13 @@ Thumbnail.displayName = "Thumbnail_UI";
 
 // src/components/ThumbnailCollage/ThumbnailCollage.tsx
 var import_react88 = __toESM(require("react"));
-var import_styled_components117 = __toESM(require("styled-components"));
+var import_styled_components118 = __toESM(require("styled-components"));
 var import_type_guards68 = require("@wistia/type-guards");
 var import_jsx_runtime313 = (
   // ThumbnailCollage will fallback to a Thumbnail with a gradient background if no children are provided
   require("react/jsx-runtime")
 );
-var StyledThumbnailCollage = import_styled_components117.default.div`
+var StyledThumbnailCollage = import_styled_components118.default.div`
   display: grid;
   gap: var(--wui-space-01);
   width: 100%;
@@ -16781,7 +16788,7 @@ var ThumbnailCollage = ({
 };
 
 // src/components/WistiaLogo/WistiaLogo.tsx
-var import_styled_components118 = __toESM(require("styled-components"));
+var import_styled_components119 = __toESM(require("styled-components"));
 var import_type_guards69 = require("@wistia/type-guards");
 var import_jsx_runtime314 = require("react/jsx-runtime");
 var renderBrandmark = (brandmarkColor, iconOnly) => {
@@ -16823,7 +16830,7 @@ var computedViewBox = (iconOnly) => {
   }
   return "0 0 144 31.47";
 };
-var WistiaLogoComponent = import_styled_components118.default.svg`
+var WistiaLogoComponent = import_styled_components119.default.svg`
   height: ${({ height }) => `${height}px`};
 
   /* ensure it will always fit on mobile */
@@ -16839,12 +16846,12 @@ var WistiaLogoComponent = import_styled_components118.default.svg`
   ${({ $opticallyCentered, $iconOnly }) => {
   if ($opticallyCentered) {
     if ($iconOnly) {
-      return import_styled_components118.css`
+      return import_styled_components119.css`
           aspect-ratio: 1;
           padding: 11.85% 3.12% 13.91%;
         `;
     }
-    return import_styled_components118.css`
+    return import_styled_components119.css`
         aspect-ratio: 127 / 32;
       `;
   }
@@ -16906,11 +16913,11 @@ var WistiaLogo = ({
 WistiaLogo.displayName = "WistiaLogo_UI";
 
 // src/components/InputPassword/InputPassword.tsx
-var import_styled_components119 = __toESM(require("styled-components"));
+var import_styled_components120 = __toESM(require("styled-components"));
 var import_react89 = require("react");
 var import_type_guards70 = require("@wistia/type-guards");
 var import_jsx_runtime315 = require("react/jsx-runtime");
-var StyledIconButton = (0, import_styled_components119.default)(IconButton)`
+var StyledIconButton = (0, import_styled_components120.default)(IconButton)`
   /* override size for icon button since prop gets changed by Input */
   height: var(--icon-button-size-sm);
   width: var(--icon-button-size-sm);