@wistia/ui 0.6.40 → 0.6.41-beta.c3bbd05d.43de7c7

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.6.40
+ * @license @wistia/ui v0.6.41-beta.c3bbd05d.43de7c7
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -1110,6 +1110,7 @@ var colorAliasTokens = css3`
   /* --- Misc --- */
   --wui-color-bg-fill-white: #ffffff;
   --wui-color-focus-color: var(--wui-blue-9);
+  --wui-color-invalid-indicator: var(--wui-error-9);
   --wui-color-notification-pill-color: var(--wui-pink-9);
   --wui-color-backdrop: var(--wui-gray-alpha-9);
   --wui-color-segmented-control-checked-background: var(--wui-bg-app);
@@ -1121,7 +1122,7 @@ var colorAliasTokens = css3`
 
   /* Disabled */
   --wui-color-bg-surface-disabled: var(--wui-gray-3);
-  --wui-color-bg-border-disabled: var(--wui-gray-4);
+  --wui-color-border-disabled: var(--wui-gray-4);
   --wui-color-icon-disabled: var(--wui-gray-8);
   --wui-color-text-disabled: var(--wui-gray-10);
   --wui-color-focus-ring-disabled: var(--wui-gray-6);
@@ -8104,7 +8105,7 @@ var StyledCheckboxInput = styled19.div`
   align-self: flex-start;
   border-width: 1px;
   border-style: solid;
-  border-color: ${({ $disabled }) => $disabled ? "var(--wui-color-bg-border-disabled)" : "var(--wui-color-border)"};
+  border-color: ${({ $disabled }) => $disabled ? "var(--wui-color-border-disabled)" : "var(--wui-color-border)"};
   background-color: ${({ $disabled }) => $disabled ? "var(--wui-color-bg-surface-disabled)" : "var(--wui-color-bg-surface)"};
 
   /* checkmark icon */
@@ -8811,7 +8812,7 @@ var Divider = ({
 Divider.displayName = "Divider";
 
 // src/components/EditableHeading/EditableHeading.tsx
-import styled30, { css as css26 } from "styled-components";
+import styled30, { css as css27 } from "styled-components";
 import { useState as useState6, useRef as useRef5 } from "react";
 
 // src/components/Tooltip/Tooltip.tsx
@@ -8928,29 +8929,43 @@ Tooltip.displayName = "Tooltip";
 
 // src/components/Input/Input.tsx
 import { forwardRef as forwardRef10, cloneElement as cloneElement4, useRef as useRef4 } from "react";
-import styled29, { css as css25 } from "styled-components";
+import styled29, { css as css26 } from "styled-components";
 import { isNil as isNil13, isNotNil as isNotNil12, isRecord as isRecord4 } from "@wistia/type-guards";
-import { jsx as jsx218, jsxs as jsxs19 } from "react/jsx-runtime";
-var inputStyles = css25`
+
+// src/css/sharedStyles/inputCssVariables.ts
+import { css as css25 } from "styled-components";
+var inputCssVariables = css25`
   --wui-input-color-bg: var(--wui-color-bg-surface);
   --wui-input-color-bg-disabled: var(--wui-color-bg-surface-disabled);
-  --wui-input-color-border: var(--wui-color-border);
-  --wui-input-color-border-focus: var(--wui-color-border-active);
-  --wui-input-color-border-error: var(--wui-color-border-error);
+  --wui-input-color-border: var(--wui-color-border-secondary);
+  --wui-input-color-border-focus: var(--wui-color-focus-ring);
+  --wui-input-color-border-error: var(--wui-color-invalid-indicator);
   --wui-input-color-border-disabled: var(--wui-color-border-disabled);
-  --wui-input-border-radius: var(--wui-border-radius-rounded);
+  --wui-input-border-radius: var(--wui-border-radius-03);
   --wui-input-multiline-border-radius: var(--wui-border-radius-02);
   --wui-input-vertical-padding: var(--wui-space-02);
   --wui-input-horizontal-padding: var(--wui-space-03);
   --wui-input-placeholder: var(--wui-gray-10);
-  --wui-input-color-text-error: var(--wui-color-text-error);
+  --wui-input-font-size: var(--wui-typography-body-3-size);
+  --wui-input-line-height: 16px;
+`;
 
+// src/components/Input/Input.tsx
+import { jsx as jsx218, jsxs as jsxs19 } from "react/jsx-runtime";
+var inputStyles = css26`
+  ${inputCssVariables}
   input,
   textarea {
     padding: var(--wui-input-vertical-padding) var(--wui-input-horizontal-padding);
     background-color: var(--wui-input-color-bg);
-    border: 1px solid var(--wui-input-color-border);
+    border: none;
+    outline: 1px solid var(--wui-input-color-border);
+    outline-offset: -1px;
     border-radius: var(--wui-input-border-radius);
+    font-size: var(--wui-input-font-size);
+    line-height: var(--wui-input-line-height);
+    font-weight: var(--wui-typography-weight-body);
+    color: var(--wui-color-text-primary);
 
     &::placeholder {
       color: var(--wui-input-placeholder);
@@ -8958,16 +8973,16 @@ var inputStyles = css25`
     }
 
     &:focus {
-      border-color: var(--wui-input-color-border-focus);
+      outline: 2px solid var(--wui-input-color-border-focus);
+      outline-offset: -2px;
     }
 
     &[aria-invalid='true'] {
-      border-color: var(--wui-input-color-border-error);
-      color: var(--wui-input-color-text-error);
+      outline-color: var(--wui-input-color-border-error);
     }
 
     &:disabled {
-      border-color: var(--wui-color-bg-surface-disabled);
+      outline-color: var(--wui-color-border-disabled);
       background-color: var(--wui-color-bg-surface-disabled);
     }
   }
@@ -8986,6 +9001,29 @@ var StyledInputContainer = styled29.div`
 
   textarea {
     border-radius: var(--wui-input-multiline-border-radius);
+
+    --wui-input-line-height: var(--wui-typography-body-3-line-height);
+  }
+
+  [type='search'] {
+    &::-webkit-search-cancel-button {
+      appearance: none;
+      height: 16px;
+      width: 16px;
+      margin-right: -4px;
+
+      /* css vars don't work in data URLs, so the stroke color value is hardcoded. if we support dark mode, we'll need to swap the background image based on the users preferred color scheme */
+      background-image: url("data:image/svg+xml,%3Csvg width='12' height='12' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 4L4 12M4 4L12 12' stroke='%2364646a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+      background-position: center;
+      background-repeat: no-repeat;
+      cursor: pointer;
+      background-color: var(--wui-color-bg-surface-secondary);
+      border-radius: var(--wui-border-radius-rounded);
+
+      &:hover {
+        background-color: var(--wui-color-bg-surface-secondary-hover);
+      }
+    }
   }
 
   .wui-input-left-icon {
@@ -9111,7 +9149,7 @@ var StyledInput = styled30(Input)`
     height: ${({ $height }) => `${$height}px`};
   }
 `;
-var editableStyles = css26`
+var editableStyles = css27`
   &:has(+ :focus-within) {
     background: var(--wui-color-bg-surface-hover);
   }
@@ -9445,9 +9483,9 @@ import styled35 from "styled-components";
 import { isArray as isArray2, isNotNil as isNotNil13, isNotUndefined as isNotUndefined9, isUndefined as isUndefined4 } from "@wistia/type-guards";
 
 // src/components/Label/Label.tsx
-import styled33, { css as css27 } from "styled-components";
+import styled33, { css as css28 } from "styled-components";
 import { jsx as jsx223 } from "react/jsx-runtime";
-var requiredStyle = css27`
+var requiredStyle = css28`
   &::after {
     color: var(--wui-color-text-error);
     display: inline;
@@ -9455,7 +9493,7 @@ var requiredStyle = css27`
     content: '*';
   }
 `;
-var disabledStyle3 = css27`
+var disabledStyle3 = css28`
   color: var(--wui-color-text-disabled);
 `;
 var StyledLabel3 = styled33.label`
@@ -9810,7 +9848,7 @@ var Image = ({
 Image.displayName = "Image";
 
 // src/components/Menu/Menu.tsx
-import styled38, { css as css28, keyframes as keyframes2 } from "styled-components";
+import styled38, { css as css29, keyframes as keyframes2 } from "styled-components";
 import {
   DropdownMenu,
   DropdownMenuTrigger,
@@ -9847,7 +9885,7 @@ var close = keyframes2`
     transform: scale(.97) translateY(-8px);
   }
 `;
-var menuItemCss = css28`
+var menuItemCss = css29`
   --menu-label-description-gap: var(--wui-space-01);
   --menu-item-inner-gap: var(--wui-space-03);
   --menu-item-left-icon-size: 24px;
@@ -9858,7 +9896,7 @@ var menuItemCss = css28`
   --menu-label-line-height: var(--wui-typography-label-3-line-height);
   --menu-divider-margin: var(--wui-space-02);
 `;
-var compactMenuItemCss = css28`
+var compactMenuItemCss = css29`
   --menu-label-description-gap: 0;
   --menu-item-inner-gap: var(--wui-space-02);
   --menu-item-left-icon-size: 16px;
@@ -9869,7 +9907,7 @@ var compactMenuItemCss = css28`
   --menu-label-line-height: var(--wui-typography-label-4-line-height);
   --menu-divider-margin: var(--wui-space-01);
 `;
-var menuContentCss = css28`
+var menuContentCss = css29`
   --menu-font-family: var(--wui-typography-family-default);
   --menu-bg: var(--wui-color-bg-surface);
   --menu-shadow: var(--wui-elevation-01);
@@ -10641,7 +10679,7 @@ Modal.displayName = "Modal";
 
 // src/components/Popover/Popover.tsx
 import { Root as Root2, Trigger as Trigger2, Portal, Content as Content2, Close } from "@radix-ui/react-popover";
-import styled48, { css as css29 } from "styled-components";
+import styled48, { css as css30 } from "styled-components";
 
 // src/private/helpers/getControls/getControlProps.tsx
 import { isNotNil as isNotNil20 } from "@wistia/type-guards";
@@ -10652,13 +10690,15 @@ var getControlProps = (isOpen, onOpenChange) => {
 // src/components/Popover/Popover.tsx
 import { jsx as jsx244, jsxs as jsxs31 } from "react/jsx-runtime";
 var StyledContent2 = styled48(Content2)`
-  ${({ $unstyled }) => !$unstyled && css29`
+  ${({ $unstyled }) => !$unstyled && css30`
       border-radius: var(--wui-border-radius-02);
       padding: var(--wui-space-04);
-      max-width: 320px;
+      max-width: var(--wui-popover-max-width, 320px);
+      max-height: var(--wui-popover-max-height, auto);
       background-color: var(--wui-color-bg-surface);
       box-shadow: var(--wui-elevation-01);
       border: 1px solid var(--wui-color-border);
+      overflow: auto;
     `}
 
   [data-wui-popover-close] {
@@ -10672,10 +10712,16 @@ var Popover = ({
   trigger,
   isOpen = false,
   hideCloseButton = false,
+  maxWidth = "320px",
+  maxHeight = "auto",
   onOpenChange,
   unstyled = false,
   ...props
 }) => {
+  const style = {
+    "--wui-popover-max-width": maxWidth,
+    "--wui-popover-max-height": maxHeight
+  };
   return /* @__PURE__ */ jsxs31(Root2, { ...getControlProps(isOpen, onOpenChange), children: [
     /* @__PURE__ */ jsx244(Trigger2, { asChild: true, children: trigger }),
     /* @__PURE__ */ jsx244(Portal, { children: /* @__PURE__ */ jsxs31(
@@ -10684,6 +10730,7 @@ var Popover = ({
         sideOffset: 8,
         ...props,
         $unstyled: unstyled,
+        style,
         children: [
           !hideCloseButton && /* @__PURE__ */ jsx244(Close, { asChild: true, children: /* @__PURE__ */ jsx244(
             IconButton,
@@ -10783,7 +10830,7 @@ ProgressBar.displayName = "ProgressBar";
 
 // src/components/Radio/Radio.tsx
 import { forwardRef as forwardRef19, useId as useId3 } from "react";
-import styled50, { css as css30 } from "styled-components";
+import styled50, { css as css31 } from "styled-components";
 import { isNonEmptyString as isNonEmptyString3 } from "@wistia/type-guards";
 import { jsx as jsx246, jsxs as jsxs33 } from "react/jsx-runtime";
 var RadioIcon = () => /* @__PURE__ */ jsx246(
@@ -10805,7 +10852,7 @@ var RadioIcon = () => /* @__PURE__ */ jsx246(
     )
   }
 );
-var sizeSmall2 = css30`
+var sizeSmall2 = css31`
   width: 14px;
   height: 14px;
   min-width: 14px;
@@ -10816,7 +10863,7 @@ var sizeSmall2 = css30`
     height: 7px;
   }
 `;
-var sizeMedium2 = css30`
+var sizeMedium2 = css31`
   width: 16px;
   height: 16px;
   min-width: 16px;
@@ -10827,7 +10874,7 @@ var sizeMedium2 = css30`
     height: 8px;
   }
 `;
-var sizeLarge2 = css30`
+var sizeLarge2 = css31`
   width: 20px;
   height: 20px;
   min-width: 20px;
@@ -10860,7 +10907,7 @@ var StyledRadioInput = styled50.div`
   align-self: flex-start;
   border-width: 1px;
   border-style: solid;
-  border-color: ${({ $disabled }) => $disabled ? "var(--wui-color-bg-border-disabled)" : "var(--wui-color-border)"};
+  border-color: ${({ $disabled }) => $disabled ? "var(--wui-color-border-disabled)" : "var(--wui-color-border)"};
   background-color: ${({ $disabled }) => $disabled ? "var(--wui-color-bg-surface-disabled)" : "var(--wui-color-bg-surface)"};
 
   /* radio button circle icon */
@@ -10877,7 +10924,7 @@ var StyledHiddenRadioInput = styled50.input`
 
   /* toggles display of faux-input border-color */
   &:checked + label [data-wui-faux-input='true'] {
-    border-color: ${({ disabled }) => disabled ? "var(--wui-color-bg-border-disabled)" : "var(--wui-color-bg-fill)"};
+    border-color: ${({ disabled }) => disabled ? "var(--wui-color-border-disabled)" : "var(--wui-color-bg-fill)"};
   }
 
   /* toggles display of RadioIcon */
@@ -10951,7 +10998,7 @@ Radio.displayName = "Radio";
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 import { forwardRef as forwardRef20 } from "react";
-import styled52, { css as css31 } from "styled-components";
+import styled52, { css as css32 } from "styled-components";
 import { Root as ToggleGroupRoot } from "@radix-ui/react-toggle-group";
 import { isNil as isNil14 } from "@wistia/type-guards";
 
@@ -11042,7 +11089,7 @@ var SelectedItemIndicator = () => {
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 import { jsx as jsx249, jsxs as jsxs34 } from "react/jsx-runtime";
-var segmentedControlStyles = css31`
+var segmentedControlStyles = css32`
   display: inline-flex;
   background-color: var(--wui-color-bg-surface-secondary);
   border-radius: var(--wui-border-radius-rounded);
@@ -11091,11 +11138,11 @@ SegmentedControl.displayName = "SegmentedControl";
 
 // src/components/SegmentedControl/SegmentedControlItem.tsx
 import { forwardRef as forwardRef21, useEffect as useEffect8, useRef as useRef10 } from "react";
-import styled53, { css as css32 } from "styled-components";
+import styled53, { css as css33 } from "styled-components";
 import { Item as ToggleGroupItem } from "@radix-ui/react-toggle-group";
 import { isNotNil as isNotNil22 } from "@wistia/type-guards";
 import { jsxs as jsxs35 } from "react/jsx-runtime";
-var segmentedControlItemStyles = css32`
+var segmentedControlItemStyles = css33`
   all: unset; /* ToggleGroupItem is a button element */
   align-items: center;
   border-radius: var(--wui-border-radius-rounded);
@@ -11231,23 +11278,13 @@ import styled54 from "styled-components";
 import { jsx as jsx250, jsxs as jsxs36 } from "react/jsx-runtime";
 var StyledTrigger = styled54(Trigger3)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
-  --wui-select-color-bg: var(--wui-color-bg-surface);
-  --wui-select-color-bg-disabled: var(--wui-color-bg-surface-disabled);
-  --wui-select-color-border: var(--wui-color-border);
-  --wui-select-color-border-focus: var(--wui-color-border-active);
-  --wui-select-color-border-error: var(--wui-color-border-error);
-  --wui-select-color-border-disabled: var(--wui-color-border-disabled);
-  --wui-select-border-radius: var(--wui-border-radius-rounded);
-  --wui-select-multiline-border-radius: var(--wui-border-radius-02);
-  --wui-select-vertical-padding: var(--wui-space-02);
-  --wui-select-horizontal-padding: var(--wui-space-03);
-  --wui-select-placeholder: var(--wui-gray-10);
-  --wui-select-color-text-error: var(--wui-color-text-error);
-
-  padding: var(--wui-select-vertical-padding) var(--wui-select-horizontal-padding);
-  background-color: var(--wui-select-color-bg);
-  border: 1px solid var(--wui-select-color-border);
-  border-radius: var(--wui-select-border-radius);
+  ${inputCssVariables};
+  padding: var(--wui-input-vertical-padding) var(--wui-input-horizontal-padding);
+  background-color: var(--wui-input-color-bg);
+  border: none;
+  outline: 1px solid var(--wui-input-color-border);
+  outline-offset: -2px;
+  border-radius: var(--wui-input-border-radius);
   min-width: 200px;
   text-align: left;
   display: inline-flex;
@@ -11255,6 +11292,9 @@ var StyledTrigger = styled54(Trigger3)`
   justify-content: space-between;
   max-width: 100%;
   width: ${({ $fullWidth = false }) => $fullWidth ? "100%" : "auto"};
+  color: var(--wui-input-color-text);
+  font-size: var(--wui-input-font-size);
+  line-height: var(--wui-input-line-height);
 
   > span {
     white-space: nowrap;
@@ -11268,14 +11308,17 @@ var StyledTrigger = styled54(Trigger3)`
   }
 
   &[aria-invalid='true'] {
-    outline: 2px solid var(--wui-select-color-border-error);
-    color: var(--wui-select-color-text-error);
+    outline: 2px solid var(--wui-input-color-border-error);
   }
 
   &:disabled {
-    border-color: var(--wui-color-bg-surface-disabled);
+    outline-color: var(--wui-color-border-disabled);
     background-color: var(--wui-color-bg-surface-disabled);
   }
+
+  [data-placeholder] {
+    color: var(--wui-input-placeholder);
+  }
 `;
 var StyledContent3 = styled54(Content3)`
   --wui-select-content-border: var(--wui-color-border);
@@ -11319,7 +11362,13 @@ var Select = forwardRef22(
               $fullWidth: responsiveFullWidth,
               ...props,
               children: [
-                /* @__PURE__ */ jsx250(Value, { placeholder }),
+                /* @__PURE__ */ jsx250(
+                  Value,
+                  {
+                    "data-placeholder": placeholder,
+                    placeholder
+                  }
+                ),
                 /* @__PURE__ */ jsx250(
                   Icon,
                   {
@@ -11355,6 +11404,7 @@ var StyledItem = styled55(Item)`
   font-size: var(--font-size);
   font-weight: var(--font-weight);
   border-radius: var(--wui-border-radius-01);
+  cursor: pointer;
 
   &:hover,
   &:focus-visible {
@@ -11419,10 +11469,10 @@ var SelectOptionGroup = ({ children, label, ...props }) => {
 
 // src/components/Switch/Switch.tsx
 import { forwardRef as forwardRef24, useId as useId4 } from "react";
-import styled57, { css as css33 } from "styled-components";
+import styled57, { css as css34 } from "styled-components";
 import { isNonEmptyString as isNonEmptyString4 } from "@wistia/type-guards";
 import { jsx as jsx253, jsxs as jsxs39 } from "react/jsx-runtime";
-var sizeSmall3 = css33`
+var sizeSmall3 = css34`
   --wui-size-small-width: 24px;
   --wui-size-small-height: 14px;
 
@@ -11437,7 +11487,7 @@ var sizeSmall3 = css33`
     height: calc(var(--wui-size-small-width) / 2);
   }
 `;
-var sizeMedium3 = css33`
+var sizeMedium3 = css34`
   --wui-size-medium-width: 32px;
   --wui-size-medium-height: 18px;
 
@@ -11452,7 +11502,7 @@ var sizeMedium3 = css33`
     height: calc(var(--wui-size-medium-width) / 2);
   }
 `;
-var sizeLarge3 = css33`
+var sizeLarge3 = css34`
   --wui-size-large-width: 40px;
   --wui-size-large-height: 22px;
 
@@ -11490,7 +11540,7 @@ var StyledSwitchInput = styled57.div`
   transition: all 0.2s ease-in-out;
   border-width: 1px;
   border-style: solid;
-  border-color: ${({ $disabled }) => $disabled ? "var(--wui-color-bg-border-disabled)" : "var(--wui-color-border)"}; /* "off state" border */
+  border-color: ${({ $disabled }) => $disabled ? "var(--wui-color-border-disabled)" : "var(--wui-color-border)"}; /* "off state" border */
 
   background-color: ${({ $disabled }) => $disabled ? "var(--wui-color-bg-surface-disabled)" : "var(--wui-color-bg-surface-secondary)"}; /* "off state" background */
 
@@ -11581,19 +11631,19 @@ var Switch = forwardRef24(
 Switch.displayName = "Switch";
 
 // src/components/Table/Table.tsx
-import styled58, { css as css34 } from "styled-components";
+import styled58, { css as css35 } from "styled-components";
 import { jsx as jsx254 } from "react/jsx-runtime";
 var StyledTable = styled58.table`
   width: 100%;
   border-collapse: collapse;
 
-  ${({ $striped }) => $striped && css34`
+  ${({ $striped }) => $striped && css35`
       tbody tr:nth-child(even) {
         background-color: var(--wui-color-bg-surface-secondary);
       }
     `}
 
-  ${({ $divided }) => $divided && css34`
+  ${({ $divided }) => $divided && css35`
       tr {
         border-bottom: 1px solid var(--wui-color-border);
       }
@@ -11632,9 +11682,9 @@ var TableBody = ({ children, ...props }) => {
 
 // src/components/Table/TableCell.tsx
 import { useContext as useContext7 } from "react";
-import styled60, { css as css35 } from "styled-components";
+import styled60, { css as css36 } from "styled-components";
 import { jsx as jsx256 } from "react/jsx-runtime";
-var sharedStyles = css35`
+var sharedStyles = css36`
   color: var(--wui-color-text);
   padding: var(--wui-space-02);
   text-align: left;
@@ -12158,7 +12208,7 @@ var Tag = forwardRef28(
 Tag.displayName = "Tag";
 
 // src/components/WistiaLogo/WistiaLogo.tsx
-import styled70, { css as css36 } from "styled-components";
+import styled70, { css as css37 } from "styled-components";
 import { isNotNil as isNotNil26 } from "@wistia/type-guards";
 import { jsx as jsx266, jsxs as jsxs43 } from "react/jsx-runtime";
 var renderBrandmark = (brandmarkColor, iconOnly) => {
@@ -12216,12 +12266,12 @@ var WistiaLogoComponent = styled70.svg`
   ${({ $opticallyCentered, $iconOnly }) => {
   if ($opticallyCentered) {
     if ($iconOnly) {
-      return css36`
+      return css37`
           aspect-ratio: 1;
           padding: 11.85% 3.12% 13.91%;
         `;
     }
-    return css36`
+    return css37`
         aspect-ratio: 127 / 32;
       `;
   }
@@ -12281,6 +12331,257 @@ var WistiaLogo = ({
   return href !== void 0 ? /* @__PURE__ */ jsx266("a", { href, children: Logo }) : Logo;
 };
 WistiaLogo.displayName = "WistiaLogo";
+
+// src/components/Thumbnail/ThumbnailBadge.tsx
+import styled71 from "styled-components";
+import { isNotNil as isNotNil27 } from "@wistia/type-guards";
+import { jsx as jsx267, jsxs as jsxs44 } from "react/jsx-runtime";
+var StyledThumbnailBadge = styled71.div`
+  align-items: center;
+  background-color: rgb(0 0 0 / 50%);
+  border-radius: var(--wui-border-radius-01);
+  bottom: var(--wui-space-01);
+  color: var(--wui-color-text-on-fill);
+  display: flex;
+  font-size: var(--wui-typography-body-4-size);
+  font-weight: var(--wui-typography-weight-body-bold);
+  gap: var(--wui-space-01);
+  padding: 0 var(--wui-space-01);
+  position: absolute;
+  right: var(--wui-space-01);
+  z-index: 1;
+
+  svg {
+    height: 12px;
+    width: 12px;
+
+    path {
+      color: var(--wui-color-icon-on-fill);
+    }
+  }
+`;
+var ThumbnailBadge = ({
+  icon,
+  label,
+  ...otherProps
+}) => {
+  return /* @__PURE__ */ jsxs44(StyledThumbnailBadge, { ...otherProps, children: [
+    isNotNil27(icon) && icon,
+    /* @__PURE__ */ jsx267("span", { children: label })
+  ] });
+};
+ThumbnailBadge.displayName = "ThumbnailBadge";
+
+// src/components/Thumbnail/Thumbnail.tsx
+import { forwardRef as forwardRef29 } from "react";
+import styled72 from "styled-components";
+import { isNotNil as isNotNil29 } from "@wistia/type-guards";
+
+// src/private/helpers/getBackgroundGradient/getBackgroundGradient.ts
+import { isNotNil as isNotNil28 } from "@wistia/type-guards";
+import { css as css38 } from "styled-components";
+var gradients = {
+  defaultDarkOne: css38`
+    background-color: #222d66;
+    background-image:
+      radial-gradient(farthest-corner at top right, #222d66, transparent 70%),
+      radial-gradient(farthest-corner at bottom right, #2949e5, transparent 50%),
+      radial-gradient(farthest-corner at bottom left, #6b84ff, transparent 57%),
+      radial-gradient(farthest-corner at top left, #2949e5, transparent 68%);
+  `,
+  defaultDarkTwo: css38`
+    background-color: #222d66;
+    background-image:
+      radial-gradient(farthest-corner at top left, #6b84ff, transparent 100%),
+      radial-gradient(farthest-corner at bottom left, #222d66, transparent 57%),
+      radial-gradient(farthest-corner at bottom right, #2949e5, transparent 50%),
+      radial-gradient(farthest-corner at top right, #2949e5, transparent 70%);
+  `,
+  defaultLightOne: css38`
+    background-color: #ccd5ff;
+    background-image:
+      radial-gradient(farthest-corner at bottom right, #ccd5ff, transparent 55%),
+      radial-gradient(farthest-corner at top left, #ccd5ff, transparent 65%),
+      radial-gradient(farthest-corner at top right, #6b84ff, transparent 50%),
+      radial-gradient(farthest-corner at bottom left, #f7f8ff, transparent 50%);
+  `,
+  defaultLightTwo: css38`
+    background-color: #ccd5ff;
+    background-image:
+      radial-gradient(ellipse at top, #ccd5ff, transparent),
+      radial-gradient(ellipse at bottom, #6b84ff, transparent);
+  `,
+  defaultMidOne: css38`
+    background-color: #6b84ff;
+    background-image:
+      radial-gradient(farthest-corner at top right, #2949e5, transparent 70%),
+      radial-gradient(farthest-corner at bottom right, #2949e5, transparent 50%),
+      radial-gradient(farthest-corner at top left, #6b84ff, transparent 80%),
+      radial-gradient(farthest-corner at bottom left, #222d66, transparent 57%);
+  `,
+  defaultMidTwo: css38`
+    background-color: #6b84ff;
+    background-image:
+      radial-gradient(ellipse at top, #2949e5, transparent),
+      radial-gradient(ellipse at bottom, #ccd5ff, transparent);
+  `,
+  green: css38`
+    background-color: #fafffa;
+    background-image:
+      radial-gradient(farthest-corner at bottom left, #b0e5a5, transparent 50%),
+      radial-gradient(farthest-corner at top right, #268713, transparent 50%),
+      radial-gradient(farthest-corner at top left, #44b62d, transparent 65%),
+      radial-gradient(farthest-corner at bottom right, #44b62d, transparent 55%);
+  `,
+  greenWithPop: css38`
+    background-color: #fafffa;
+    background-image:
+      radial-gradient(farthest-corner at bottom left, #b0e5a5, transparent 50%),
+      radial-gradient(farthest-corner at top right, #2949e5, transparent 50%),
+      radial-gradient(farthest-corner at top left, #44b62d, transparent 65%),
+      radial-gradient(farthest-corner at bottom right, #44b62d, transparent 55%);
+  `,
+  pink: css38`
+    background-color: #fffff0;
+    background-image:
+      radial-gradient(farthest-corner at bottom left, #ffc7e8, transparent 50%),
+      radial-gradient(farthest-corner at top right, #e0128e, transparent 70%),
+      radial-gradient(farthest-corner at top left, #ff40b3, transparent 65%),
+      radial-gradient(farthest-corner at bottom right, #ff40b3, transparent 55%);
+  `,
+  pinkWithPop: css38`
+    background-color: #fffff0;
+    background-image:
+      radial-gradient(farthest-corner at top right, #e0128e, transparent 70%),
+      radial-gradient(farthest-corner at top left, #ff40b3, transparent 65%),
+      radial-gradient(farthest-corner at bottom right, #ff40b3, transparent 55%),
+      radial-gradient(farthest-corner at bottom left, #2949e5, transparent 50%);
+  `,
+  playfulGradientOne: css38`
+    background-color: #f7f8ff;
+    background-image:
+      radial-gradient(farthest-corner at top left, #d65cff, transparent 68%),
+      radial-gradient(farthest-corner at bottom right, #2949e5, transparent 50%),
+      radial-gradient(farthest-corner at bottom left, #ffc7e8, transparent 57%),
+      radial-gradient(farthest-corner at top right, #ffcaba, transparent 70%);
+  `,
+  playfulGradientTwo: css38`
+    background-color: #f7f8ff;
+    background-image:
+      radial-gradient(farthest-corner at top left, #44b62d, transparent 68%),
+      radial-gradient(farthest-corner at bottom right, #eff18d, transparent 50%),
+      radial-gradient(farthest-corner at bottom left, #ccd5ff, transparent 57%),
+      radial-gradient(farthest-corner at top right, #2949e5, transparent 70%);
+  `,
+  purple: css38`
+    background-color: #f2caff;
+    background-image:
+      radial-gradient(ellipse at 0% 100%, #f9e5ff, transparent 50%),
+      radial-gradient(ellipse at 100% 0%, #e093fa, transparent 70%);
+  `,
+  purpleWithPop: css38`
+    background-color: #f2caff;
+    background-image:
+      radial-gradient(farthest-corner at bottom left, #f2caff, transparent 50%),
+      radial-gradient(farthest-corner at top left, #d65cff, transparent 65%),
+      radial-gradient(farthest-corner at bottom right, #d65cff, transparent 55%),
+      radial-gradient(farthest-corner at top right, #2949e5, transparent 70%);
+  `,
+  yellow: css38`
+    background-color: #fffff0;
+    background-image:
+      radial-gradient(farthest-corner at bottom left, #eff18d, transparent 50%),
+      radial-gradient(farthest-corner at top right, #bcbf19, transparent 70%),
+      radial-gradient(farthest-corner at top left, #e8ec1e, transparent 65%),
+      radial-gradient(farthest-corner at bottom right, #e8ec1e, transparent 55%);
+  `,
+  yellowWithPop: css38`
+    background-color: #fffff0;
+    background-image:
+      radial-gradient(farthest-corner at bottom left, #eff18d, transparent 50%),
+      radial-gradient(farthest-corner at top right, #bcbf19, transparent 70%),
+      radial-gradient(farthest-corner at top left, #e8ec1e, transparent 65%),
+      radial-gradient(farthest-corner at bottom right, #2949e5, transparent 55%);
+  `
+};
+var gradientMap = Object.keys(gradients);
+var getBackgroundGradient = (gradientName = void 0) => {
+  return isNotNil28(gradientName) ? gradients[gradientName] : gradients.defaultDarkOne;
+};
+
+// src/components/Thumbnail/Thumbnail.tsx
+import { jsx as jsx268, jsxs as jsxs45 } from "react/jsx-runtime";
+var WideThumbnailImage = styled72.img`
+  height: 100%;
+  object-fit: cover;
+  width: 100%;
+`;
+var SquareThumbnailImage = styled72.img`
+  backdrop-filter: blur(8px);
+  object-fit: contain;
+  width: 100%;
+`;
+var ThumbnailImage = ({ thumbnailImageType, thumbnailUrl }) => {
+  if (thumbnailImageType === "wide") {
+    return /* @__PURE__ */ jsx268(
+      WideThumbnailImage,
+      {
+        alt: "",
+        src: thumbnailUrl
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx268(
+    SquareThumbnailImage,
+    {
+      alt: "",
+      src: thumbnailUrl
+    }
+  );
+};
+var StyledThumbnail = styled72.div`
+  ${({ $gradientBackground }) => getBackgroundGradient($gradientBackground)};
+  aspect-ratio: 16 / 9;
+  background: ${({ $backgroundUrl }) => isNotNil29($backgroundUrl) ? `url('${$backgroundUrl}') center / cover` : void 0};
+  border-radius: 4px;
+  display: flex;
+  overflow: hidden;
+  position: relative;
+  width: ${({ $width }) => $width};
+`;
+var Thumbnail = forwardRef29(
+  ({
+    gradientBackground = "defaultMidOne",
+    thumbnailImageType = "square",
+    thumbnailUrl,
+    width = "100%",
+    children,
+    ...otherProps
+  }, ref) => {
+    const backgroundUrl = thumbnailImageType === "square" && isNotNil29(thumbnailUrl) ? thumbnailUrl : void 0;
+    return /* @__PURE__ */ jsxs45(
+      StyledThumbnail,
+      {
+        ref,
+        $backgroundUrl: backgroundUrl,
+        $gradientBackground: gradientBackground,
+        $width: width,
+        ...otherProps,
+        children: [
+          isNotNil29(children) && children,
+          isNotNil29(thumbnailUrl) && /* @__PURE__ */ jsx268(
+            ThumbnailImage,
+            {
+              thumbnailImageType,
+              thumbnailUrl
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Thumbnail.displayName = "Thumbnail";
 export {
   ActionButton,
   Avatar,
@@ -12353,6 +12654,8 @@ export {
   Tabs,
   Tag,
   Text,
+  Thumbnail,
+  ThumbnailBadge,
   Tooltip,
   UIProvider,
   WistiaLogo,