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

package/dist/index.cjs

@@ -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.
  *
@@ -110,6 +110,8 @@ __export(index_exports, {
   Tabs: () => Tabs,
   Tag: () => Tag,
   Text: () => Text,
+  Thumbnail: () => Thumbnail,
+  ThumbnailBadge: () => ThumbnailBadge,
   Tooltip: () => Tooltip,
   UIProvider: () => UIProvider,
   WistiaLogo: () => WistiaLogo,
@@ -1240,6 +1242,7 @@ var colorAliasTokens = import_styled_components3.css`
   /* --- 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);
@@ -1251,7 +1254,7 @@ var colorAliasTokens = import_styled_components3.css`
 
   /* 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);
@@ -8228,7 +8231,7 @@ var StyledCheckboxInput = import_styled_components34.default.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 */
@@ -8935,7 +8938,7 @@ var Divider = ({
 Divider.displayName = "Divider";
 
 // src/components/EditableHeading/EditableHeading.tsx
-var import_styled_components45 = __toESM(require("styled-components"));
+var import_styled_components46 = __toESM(require("styled-components"));
 var import_react29 = require("react");
 
 // src/components/Tooltip/Tooltip.tsx
@@ -9046,29 +9049,43 @@ Tooltip.displayName = "Tooltip";
 
 // src/components/Input/Input.tsx
 var import_react28 = require("react");
-var import_styled_components44 = __toESM(require("styled-components"));
+var import_styled_components45 = __toESM(require("styled-components"));
 var import_type_guards28 = require("@wistia/type-guards");
-var import_jsx_runtime218 = require("react/jsx-runtime");
-var inputStyles = import_styled_components44.css`
+
+// src/css/sharedStyles/inputCssVariables.ts
+var import_styled_components44 = require("styled-components");
+var inputCssVariables = import_styled_components44.css`
   --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
+var import_jsx_runtime218 = require("react/jsx-runtime");
+var inputStyles = import_styled_components45.css`
+  ${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);
@@ -9076,21 +9093,21 @@ var inputStyles = import_styled_components44.css`
     }
 
     &: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);
     }
   }
 `;
-var StyledInputContainer = import_styled_components44.default.div`
+var StyledInputContainer = import_styled_components45.default.div`
   display: inline-flex;
   position: relative;
   ${inputStyles};
@@ -9104,6 +9121,29 @@ var StyledInputContainer = import_styled_components44.default.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 {
@@ -9209,7 +9249,7 @@ Input.displayName = "Input";
 
 // src/components/EditableHeading/EditableHeading.tsx
 var import_jsx_runtime219 = require("react/jsx-runtime");
-var StyledInput = (0, import_styled_components45.default)(Input)`
+var StyledInput = (0, import_styled_components46.default)(Input)`
   :not([rows]) {
     min-height: unset;
   }
@@ -9229,7 +9269,7 @@ var StyledInput = (0, import_styled_components45.default)(Input)`
     height: ${({ $height }) => `${$height}px`};
   }
 `;
-var editableStyles = import_styled_components45.css`
+var editableStyles = import_styled_components46.css`
   &:has(+ :focus-within) {
     background: var(--wui-color-bg-surface-hover);
   }
@@ -9239,7 +9279,7 @@ var editableStyles = import_styled_components45.css`
     cursor: pointer;
   }
 `;
-var StyledHeading2 = (0, import_styled_components45.default)(Heading)`
+var StyledHeading2 = (0, import_styled_components46.default)(Heading)`
   width: 100%;
   border-radius: var(--wui-border-radius-02);
   padding: var(--wui-space-02);
@@ -9347,15 +9387,15 @@ var EditableHeading = ({
 
 // src/components/Form/Form.tsx
 var import_react31 = require("react");
-var import_styled_components47 = __toESM(require("styled-components"));
+var import_styled_components48 = __toESM(require("styled-components"));
 var import_type_guards29 = require("@wistia/type-guards");
 
 // src/components/Stack/Stack.tsx
 var import_react30 = require("react");
-var import_styled_components46 = __toESM(require("styled-components"));
+var import_styled_components47 = __toESM(require("styled-components"));
 var import_jsx_runtime220 = require("react/jsx-runtime");
 var DEFAULT_ELEMENT4 = "div";
-var StyledStack = import_styled_components46.default.div`
+var StyledStack = import_styled_components47.default.div`
   display: flex;
   flex-direction: ${({ $direction }) => $direction === "horizontal" ? "row" : "column"};
   gap: ${({ $gap }) => `var(--wui-${$gap})`};
@@ -9384,7 +9424,7 @@ var Stack = makePolymorphic(StackComponent);
 
 // src/components/Form/Form.tsx
 var import_jsx_runtime221 = require("react/jsx-runtime");
-var StyledForm = import_styled_components47.default.form`
+var StyledForm = import_styled_components48.default.form`
   --form-default-width: 690px;
 
   max-width: ${({ $fullWidth }) => $fullWidth ? "auto" : "var(--form-default-width)"};
@@ -9559,13 +9599,13 @@ var FormErrorSummary = ({ description }) => {
 
 // src/components/FormField/FormField.tsx
 var import_react36 = require("react");
-var import_styled_components50 = __toESM(require("styled-components"));
+var import_styled_components51 = __toESM(require("styled-components"));
 var import_type_guards31 = require("@wistia/type-guards");
 
 // src/components/Label/Label.tsx
-var import_styled_components48 = __toESM(require("styled-components"));
+var import_styled_components49 = __toESM(require("styled-components"));
 var import_jsx_runtime223 = require("react/jsx-runtime");
-var requiredStyle = import_styled_components48.css`
+var requiredStyle = import_styled_components49.css`
   &::after {
     color: var(--wui-color-text-error);
     display: inline;
@@ -9573,10 +9613,10 @@ var requiredStyle = import_styled_components48.css`
     content: '*';
   }
 `;
-var disabledStyle3 = import_styled_components48.css`
+var disabledStyle3 = import_styled_components49.css`
   color: var(--wui-color-text-disabled);
 `;
-var StyledLabel3 = import_styled_components48.default.label`
+var StyledLabel3 = import_styled_components49.default.label`
   display: block;
   width: 100%;
   color: var(--wui-color-text);
@@ -9626,13 +9666,13 @@ Label.displayName = "Label";
 var import_react35 = require("react");
 
 // src/components/FormGroup/FormGroup.tsx
-var import_styled_components49 = __toESM(require("styled-components"));
+var import_styled_components50 = __toESM(require("styled-components"));
 var import_react34 = require("react");
 var import_jsx_runtime224 = require("react/jsx-runtime");
-var StyledFieldset = import_styled_components49.default.fieldset`
+var StyledFieldset = import_styled_components50.default.fieldset`
   border: 0;
 `;
-var StyledLegend = import_styled_components49.default.legend`
+var StyledLegend = import_styled_components50.default.legend`
   margin-bottom: var(--space-01);
 `;
 var FormGroup = ({ children, label, ...props }) => {
@@ -9681,7 +9721,7 @@ CheckboxGroup.displayName = "CheckboxGroup";
 
 // src/components/FormField/FormField.tsx
 var import_jsx_runtime226 = require("react/jsx-runtime");
-var StyledFormField = import_styled_components50.default.div`
+var StyledFormField = import_styled_components51.default.div`
   --form-field-spacing: var(--wui-space-01);
   --form-field-spacing-inline: var(--wui-space-02);
   --form-field-error-color: var(--wui-color-text-secondary-error);
@@ -9711,7 +9751,7 @@ var StyledFormField = import_styled_components50.default.div`
     grid-template-rows: 1fr;
   }
 `;
-var StyledErrorList = import_styled_components50.default.ul`
+var StyledErrorList = import_styled_components51.default.ul`
   margin: 0;
   padding: 0;
   padding-left: var(--wui-space-04);
@@ -9842,9 +9882,9 @@ RadioGroup.displayName = "RadioGroup";
 
 // src/components/IconButton/IconButton.tsx
 var import_react38 = require("react");
-var import_styled_components51 = __toESM(require("styled-components"));
+var import_styled_components52 = __toESM(require("styled-components"));
 var import_jsx_runtime228 = require("react/jsx-runtime");
-var StyledButton2 = (0, import_styled_components51.default)(Button)`
+var StyledButton2 = (0, import_styled_components52.default)(Button)`
   --icon-button-size-sm: 24px;
   --icon-button-size-md: 32px;
   --icon-button-size-lg: 40px;
@@ -9879,7 +9919,7 @@ var IconButton = (0, import_react38.forwardRef)(
 IconButton.displayName = "IconButton";
 
 // src/components/Image/Image.tsx
-var import_styled_components52 = __toESM(require("styled-components"));
+var import_styled_components53 = __toESM(require("styled-components"));
 var import_type_guards32 = require("@wistia/type-guards");
 var import_jsx_runtime229 = require("react/jsx-runtime");
 var getFillStyle2 = (fillContainer) => {
@@ -9897,7 +9937,7 @@ var getFillStyle2 = (fillContainer) => {
   }
   return void 0;
 };
-var StyledImage = import_styled_components52.default.img`
+var StyledImage = import_styled_components53.default.img`
   border-radius: ${({ $borderRadius }) => (0, import_type_guards32.isNotNil)($borderRadius) ? `var(--wui-${$borderRadius})` : void 0};
   ${({ $fillContainer }) => getFillStyle2($fillContainer)};
   object-fit: ${({ $objFit }) => $objFit};
@@ -9928,7 +9968,7 @@ var Image = ({
 Image.displayName = "Image";
 
 // src/components/Menu/Menu.tsx
-var import_styled_components53 = __toESM(require("styled-components"));
+var import_styled_components54 = __toESM(require("styled-components"));
 var import_react_dropdown_menu = require("@radix-ui/react-dropdown-menu");
 var import_type_guards33 = require("@wistia/type-guards");
 var import_react40 = require("react");
@@ -9940,7 +9980,7 @@ var useMenuContext = () => (0, import_react39.useContext)(MenuContext);
 
 // src/components/Menu/Menu.tsx
 var import_jsx_runtime230 = require("react/jsx-runtime");
-var open = import_styled_components53.keyframes`
+var open = import_styled_components54.keyframes`
   from {
     opacity: 0;
     transform: scale(.97) translateY(-8px);
@@ -9950,7 +9990,7 @@ var open = import_styled_components53.keyframes`
     transform: scale(1);
   }
 `;
-var close = import_styled_components53.keyframes`
+var close = import_styled_components54.keyframes`
   from {
     opacity: 1;
     transform: scale(1);
@@ -9960,7 +10000,7 @@ var close = import_styled_components53.keyframes`
     transform: scale(.97) translateY(-8px);
   }
 `;
-var menuItemCss = import_styled_components53.css`
+var menuItemCss = import_styled_components54.css`
   --menu-label-description-gap: var(--wui-space-01);
   --menu-item-inner-gap: var(--wui-space-03);
   --menu-item-left-icon-size: 24px;
@@ -9971,7 +10011,7 @@ var menuItemCss = import_styled_components53.css`
   --menu-label-line-height: var(--wui-typography-label-3-line-height);
   --menu-divider-margin: var(--wui-space-02);
 `;
-var compactMenuItemCss = import_styled_components53.css`
+var compactMenuItemCss = import_styled_components54.css`
   --menu-label-description-gap: 0;
   --menu-item-inner-gap: var(--wui-space-02);
   --menu-item-left-icon-size: 16px;
@@ -9982,7 +10022,7 @@ var compactMenuItemCss = import_styled_components53.css`
   --menu-label-line-height: var(--wui-typography-label-4-line-height);
   --menu-divider-margin: var(--wui-space-01);
 `;
-var menuContentCss = import_styled_components53.css`
+var menuContentCss = import_styled_components54.css`
   --menu-font-family: var(--wui-typography-family-default);
   --menu-bg: var(--wui-color-bg-surface);
   --menu-shadow: var(--wui-elevation-01);
@@ -10024,7 +10064,7 @@ var menuContentCss = import_styled_components53.css`
     margin: var(--menu-divider-margin) 0;
   }
 `;
-var MenuContent = (0, import_styled_components53.default)(import_react_dropdown_menu.DropdownMenuContent)`
+var MenuContent = (0, import_styled_components54.default)(import_react_dropdown_menu.DropdownMenuContent)`
   ${menuContentCss}
 `;
 var Menu = ({
@@ -10087,10 +10127,10 @@ var Menu = ({
 Menu.displayName = "Menu";
 
 // src/components/Menu/MenuLabel.tsx
-var import_styled_components54 = __toESM(require("styled-components"));
+var import_styled_components55 = __toESM(require("styled-components"));
 var import_react_dropdown_menu2 = require("@radix-ui/react-dropdown-menu");
 var import_jsx_runtime231 = require("react/jsx-runtime");
-var StyledMenuLabel = (0, import_styled_components54.default)(import_react_dropdown_menu2.DropdownMenuLabel)`
+var StyledMenuLabel = (0, import_styled_components55.default)(import_react_dropdown_menu2.DropdownMenuLabel)`
   padding: var(--wui-space-02);
 `;
 var MenuLabel = ({ children, ...props }) => {
@@ -10115,16 +10155,16 @@ MenuLabel.displayName = "MenuLabel";
 
 // src/components/Menu/SubMenu.tsx
 var import_react42 = require("react");
-var import_styled_components57 = __toESM(require("styled-components"));
+var import_styled_components58 = __toESM(require("styled-components"));
 var import_react_dropdown_menu3 = require("@radix-ui/react-dropdown-menu");
 var import_type_guards35 = require("@wistia/type-guards");
 
 // src/components/Menu/MenuItemButton.tsx
 var import_react41 = require("react");
-var import_styled_components55 = __toESM(require("styled-components"));
+var import_styled_components56 = __toESM(require("styled-components"));
 var import_type_guards34 = require("@wistia/type-guards");
 var import_jsx_runtime232 = require("react/jsx-runtime");
-var StyledButton3 = (0, import_styled_components55.default)(Button)`
+var StyledButton3 = (0, import_styled_components56.default)(Button)`
   ${({ colorScheme }) => getColorScheme(colorScheme)};
 
   display: flex;
@@ -10163,7 +10203,7 @@ var StyledButton3 = (0, import_styled_components55.default)(Button)`
     padding-left: var(--wui-space-04);
   }
 `;
-var StyledLeftIconContainer = import_styled_components55.default.div`
+var StyledLeftIconContainer = import_styled_components56.default.div`
   height: var(--menu-item-left-icon-size);
   width: var(--menu-item-left-icon-size);
 
@@ -10174,7 +10214,7 @@ var StyledLeftIconContainer = import_styled_components55.default.div`
     }
   }
 `;
-var StyledRightIconContainer = import_styled_components55.default.div`
+var StyledRightIconContainer = import_styled_components56.default.div`
   height: var(--menu-item-right-icon-size);
   width: var(--menu-item-right-icon-size);
 
@@ -10185,13 +10225,13 @@ var StyledRightIconContainer = import_styled_components55.default.div`
     }
   }
 `;
-var StyledLabelAndDescriptionContainer = import_styled_components55.default.div`
+var StyledLabelAndDescriptionContainer = import_styled_components56.default.div`
   display: flex;
   flex-direction: column;
   gap: var(--menu-label-description-gap);
   flex-basis: 100%;
 `;
-var StyledBadgeContainer = import_styled_components55.default.div`
+var StyledBadgeContainer = import_styled_components56.default.div`
   align-self: start;
   justify-self: end;
   font-size: var(--wui-typography-label-4-size);
@@ -10239,10 +10279,10 @@ var MenuItemButton = (0, import_react41.forwardRef)(({ children, appearance, com
 MenuItemButton.displayName = "MenuItemButton";
 
 // src/components/Menu/MenuItemLabelDescription.tsx
-var import_styled_components56 = __toESM(require("styled-components"));
+var import_styled_components57 = __toESM(require("styled-components"));
 var import_jsx_runtime233 = require("react/jsx-runtime");
-var StyledMenuItemLabel = import_styled_components56.default.span``;
-var StyledMenuItemDescription = (0, import_styled_components56.default)(Text).attrs({
+var StyledMenuItemLabel = import_styled_components57.default.span``;
+var StyledMenuItemDescription = (0, import_styled_components57.default)(Text).attrs({
   variant: "body4",
   prominence: "secondary"
 })``;
@@ -10255,17 +10295,17 @@ var MenuItemDescription = ({ children }) => {
 
 // src/components/Menu/SubMenu.tsx
 var import_jsx_runtime234 = require("react/jsx-runtime");
-var SubMenuContent = (0, import_styled_components57.default)(import_react_dropdown_menu3.DropdownMenuSubContent)`
+var SubMenuContent = (0, import_styled_components58.default)(import_react_dropdown_menu3.DropdownMenuSubContent)`
   ${menuContentCss}
 
   ${mq.smAndDown} {
     transform: translateX(-100%) !important;
   }
 `;
-var StyledMobileSubMenuItems = import_styled_components57.default.div`
+var StyledMobileSubMenuItems = import_styled_components58.default.div`
   margin-left: var(--wui-space-04);
 `;
-var StyledSubTrigger = (0, import_styled_components57.default)(import_react_dropdown_menu3.DropdownMenuSubTrigger)`
+var StyledSubTrigger = (0, import_styled_components58.default)(import_react_dropdown_menu3.DropdownMenuSubTrigger)`
   outline: none;
 
   &[data-state='open'],
@@ -10476,19 +10516,19 @@ CheckboxMenuItem.displayName = "CheckboxMenuItem";
 
 // src/components/Modal/Modal.tsx
 var import_react47 = require("react");
-var import_styled_components62 = __toESM(require("styled-components"));
+var import_styled_components63 = __toESM(require("styled-components"));
 var import_react_dialog4 = require("@radix-ui/react-dialog");
 var import_type_guards37 = require("@wistia/type-guards");
 
 // src/components/Modal/ModalHeader.tsx
-var import_styled_components59 = __toESM(require("styled-components"));
+var import_styled_components60 = __toESM(require("styled-components"));
 var import_react_dialog2 = require("@radix-ui/react-dialog");
 
 // src/components/Modal/ModalCloseButton.tsx
-var import_styled_components58 = __toESM(require("styled-components"));
+var import_styled_components59 = __toESM(require("styled-components"));
 var import_react_dialog = require("@radix-ui/react-dialog");
 var import_jsx_runtime239 = require("react/jsx-runtime");
-var CloseButton = (0, import_styled_components58.default)(import_react_dialog.Close)`
+var CloseButton = (0, import_styled_components59.default)(import_react_dialog.Close)`
   align-self: start;
 `;
 var ModalCloseButton = () => {
@@ -10505,7 +10545,7 @@ var ModalCloseButton = () => {
 
 // src/components/Modal/ModalHeader.tsx
 var import_jsx_runtime240 = require("react/jsx-runtime");
-var Header = import_styled_components59.default.header`
+var Header = import_styled_components60.default.header`
   display: flex;
   order: 1;
   gap: var(--wui-space-01);
@@ -10516,7 +10556,7 @@ var Header = import_styled_components59.default.header`
     margin: 0 0 var(--wui-space-03);
   }
 `;
-var Title = (0, import_styled_components59.default)(import_react_dialog2.Title)`
+var Title = (0, import_styled_components60.default)(import_react_dialog2.Title)`
   font-family: var(--wui-typography-heading-2-family);
   line-height: var(--wui-typography-heading-2-line-height);
   font-size: var(--wui-typography-heading-2-size);
@@ -10536,7 +10576,7 @@ var ModalHeader = ({
 
 // src/components/Modal/ModalContent.tsx
 var import_react45 = require("react");
-var import_styled_components60 = __toESM(require("styled-components"));
+var import_styled_components61 = __toESM(require("styled-components"));
 var import_react_dialog3 = require("@radix-ui/react-dialog");
 
 // src/private/hooks/useFocusRestore/useFocusRestore.ts
@@ -10560,7 +10600,7 @@ var useFocusRestore = () => {
 
 // src/components/Modal/ModalContent.tsx
 var import_jsx_runtime241 = require("react/jsx-runtime");
-var StyledModalContent = (0, import_styled_components60.default)(import_react_dialog3.Content)`
+var StyledModalContent = (0, import_styled_components61.default)(import_react_dialog3.Content)`
   background-color: var(--wui-color-bg-app);
   box-sizing: border-box;
   display: flex;
@@ -10620,7 +10660,7 @@ var ModalContent = (0, import_react45.forwardRef)(
 
 // src/private/components/Backdrop/Backdrop.tsx
 var import_react46 = require("react");
-var import_styled_components61 = __toESM(require("styled-components"));
+var import_styled_components62 = __toESM(require("styled-components"));
 var import_jsx_runtime242 = require("react/jsx-runtime");
 var backdropAnimationDuration = 150;
 var alignVerticalMap = {
@@ -10634,7 +10674,7 @@ var alignHorizontalMap = {
   center: "center",
   right: "end"
 };
-var BackdropComponent = import_styled_components61.default.div`
+var BackdropComponent = import_styled_components62.default.div`
   align-items: ${({ $alignVertical }) => alignVerticalMap[$alignVertical]};
   animation-name: backdropShow;
   animation-duration: ${() => `${backdropAnimationDuration}ms`};
@@ -10674,7 +10714,7 @@ Backdrop.displayName = "Backdrop";
 // src/components/Modal/Modal.tsx
 var import_jsx_runtime243 = require("react/jsx-runtime");
 var DEFAULT_MODAL_WIDTH = "532px";
-var ModalBody = import_styled_components62.default.div`
+var ModalBody = import_styled_components63.default.div`
   flex-direction: column;
   display: flex;
   order: 2;
@@ -10740,7 +10780,7 @@ Modal.displayName = "Modal";
 
 // src/components/Popover/Popover.tsx
 var import_react_popover = require("@radix-ui/react-popover");
-var import_styled_components63 = __toESM(require("styled-components"));
+var import_styled_components64 = __toESM(require("styled-components"));
 
 // src/private/helpers/getControls/getControlProps.tsx
 var import_type_guards38 = require("@wistia/type-guards");
@@ -10750,14 +10790,16 @@ var getControlProps = (isOpen, onOpenChange) => {
 
 // src/components/Popover/Popover.tsx
 var import_jsx_runtime244 = require("react/jsx-runtime");
-var StyledContent2 = (0, import_styled_components63.default)(import_react_popover.Content)`
-  ${({ $unstyled }) => !$unstyled && import_styled_components63.css`
+var StyledContent2 = (0, import_styled_components64.default)(import_react_popover.Content)`
+  ${({ $unstyled }) => !$unstyled && import_styled_components64.css`
       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] {
@@ -10771,10 +10813,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__ */ (0, import_jsx_runtime244.jsxs)(import_react_popover.Root, { ...getControlProps(isOpen, onOpenChange), children: [
     /* @__PURE__ */ (0, import_jsx_runtime244.jsx)(import_react_popover.Trigger, { asChild: true, children: trigger }),
     /* @__PURE__ */ (0, import_jsx_runtime244.jsx)(import_react_popover.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime244.jsxs)(
@@ -10783,6 +10831,7 @@ var Popover = ({
         sideOffset: 8,
         ...props,
         $unstyled: unstyled,
+        style,
         children: [
           !hideCloseButton && /* @__PURE__ */ (0, import_jsx_runtime244.jsx)(import_react_popover.Close, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime244.jsx)(
             IconButton,
@@ -10802,11 +10851,11 @@ var Popover = ({
 Popover.displayName = "Popover";
 
 // src/components/ProgressBar/ProgressBar.tsx
-var import_styled_components64 = __toESM(require("styled-components"));
+var import_styled_components65 = __toESM(require("styled-components"));
 var import_react_progress = require("@radix-ui/react-progress");
 var import_type_guards39 = require("@wistia/type-guards");
 var import_jsx_runtime245 = require("react/jsx-runtime");
-var ProgressBarWrapper = import_styled_components64.default.div`
+var ProgressBarWrapper = import_styled_components65.default.div`
   --progress-bar-height: 8px;
   --progress-bar-indicator-color: var(--wui-color-bg-fill);
   --progress-bar-background-color: var(--wui-color-bg-surface-secondary);
@@ -10822,7 +10871,7 @@ var getTranslateValue = (progress, max) => {
   const progressPercentage = progress / max * 100;
   return `translateX(-${100 - progressPercentage}%)`;
 };
-var ProgressBarLabel = import_styled_components64.default.div`
+var ProgressBarLabel = import_styled_components65.default.div`
   display: flex;
   line-height: var(--wui-typography-label-3-line-height);
   font-size: var(--wui-typography-label-3-size);
@@ -10830,7 +10879,7 @@ var ProgressBarLabel = import_styled_components64.default.div`
   color: var(--wui-color-text-secondary);
   flex-shrink: 0;
 `;
-var StyledProgressIndicator = (0, import_styled_components64.default)(import_react_progress.Indicator)`
+var StyledProgressIndicator = (0, import_styled_components65.default)(import_react_progress.Indicator)`
   background-color: var(--progress-bar-indicator-color);
   width: 100%;
   height: 100%;
@@ -10839,7 +10888,7 @@ var StyledProgressIndicator = (0, import_styled_components64.default)(import_rea
   transition: transform 660ms cubic-bezier(0.65, 0, 0.35, 1);
   transform: ${({ $progress, $max }) => getTranslateValue($progress, $max)};
 `;
-var StyledProgressBar = (0, import_styled_components64.default)(import_react_progress.Root)`
+var StyledProgressBar = (0, import_styled_components65.default)(import_react_progress.Root)`
   position: relative;
   overflow: hidden;
   background: var(--progress-bar-background-color);
@@ -10882,7 +10931,7 @@ ProgressBar.displayName = "ProgressBar";
 
 // src/components/Radio/Radio.tsx
 var import_react48 = require("react");
-var import_styled_components65 = __toESM(require("styled-components"));
+var import_styled_components66 = __toESM(require("styled-components"));
 var import_type_guards40 = require("@wistia/type-guards");
 var import_jsx_runtime246 = require("react/jsx-runtime");
 var RadioIcon = () => /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(
@@ -10904,7 +10953,7 @@ var RadioIcon = () => /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(
     )
   }
 );
-var sizeSmall2 = import_styled_components65.css`
+var sizeSmall2 = import_styled_components66.css`
   width: 14px;
   height: 14px;
   min-width: 14px;
@@ -10915,7 +10964,7 @@ var sizeSmall2 = import_styled_components65.css`
     height: 7px;
   }
 `;
-var sizeMedium2 = import_styled_components65.css`
+var sizeMedium2 = import_styled_components66.css`
   width: 16px;
   height: 16px;
   min-width: 16px;
@@ -10926,7 +10975,7 @@ var sizeMedium2 = import_styled_components65.css`
     height: 8px;
   }
 `;
-var sizeLarge2 = import_styled_components65.css`
+var sizeLarge2 = import_styled_components66.css`
   width: 20px;
   height: 20px;
   min-width: 20px;
@@ -10942,14 +10991,14 @@ var getSizeCss2 = (size) => {
   if (size === "lg") return sizeLarge2;
   return sizeMedium2;
 };
-var StyledRadioWrapper = import_styled_components65.default.div`
+var StyledRadioWrapper = import_styled_components66.default.div`
   display: flex;
   margin: 0;
 
   /* TODO this solves a problem but potentially causes and a11y issue */
   user-select: none;
 `;
-var StyledRadioInput = import_styled_components65.default.div`
+var StyledRadioInput = import_styled_components66.default.div`
   ${({ $size }) => getSizeCss2($size)}
   line-height: 0;
   margin: 0;
@@ -10959,7 +11008,7 @@ var StyledRadioInput = import_styled_components65.default.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 */
@@ -10971,12 +11020,12 @@ var StyledRadioInput = import_styled_components65.default.div`
     }
   }
 `;
-var StyledHiddenRadioInput = import_styled_components65.default.input`
+var StyledHiddenRadioInput = import_styled_components66.default.input`
   ${visuallyHiddenStyle}
 
   /* 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 */
@@ -11050,7 +11099,7 @@ Radio.displayName = "Radio";
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 var import_react52 = require("react");
-var import_styled_components67 = __toESM(require("styled-components"));
+var import_styled_components68 = __toESM(require("styled-components"));
 var import_react_toggle_group = require("@radix-ui/react-toggle-group");
 var import_type_guards41 = require("@wistia/type-guards");
 
@@ -11085,7 +11134,7 @@ var useSelectedItemMeasurements = () => {
 
 // src/components/SegmentedControl/SelectedItemIndicator.tsx
 var import_react51 = require("react");
-var import_styled_components66 = __toESM(require("styled-components"));
+var import_styled_components67 = __toESM(require("styled-components"));
 
 // src/components/SegmentedControl/useSegmentedControlValue.tsx
 var import_react50 = require("react");
@@ -11101,7 +11150,7 @@ var useSegmentedControlValue = () => {
 
 // src/components/SegmentedControl/SelectedItemIndicator.tsx
 var import_jsx_runtime248 = require("react/jsx-runtime");
-var SelectedItemIndicatorDiv = import_styled_components66.default.div`
+var SelectedItemIndicatorDiv = import_styled_components67.default.div`
   background-color: var(--wui-color-bg-fill-white);
   border-radius: var(--wui-border-radius-rounded);
   left: 0;
@@ -11141,7 +11190,7 @@ var SelectedItemIndicator = () => {
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 var import_jsx_runtime249 = require("react/jsx-runtime");
-var segmentedControlStyles = import_styled_components67.css`
+var segmentedControlStyles = import_styled_components68.css`
   display: inline-flex;
   background-color: var(--wui-color-bg-surface-secondary);
   border-radius: var(--wui-border-radius-rounded);
@@ -11151,7 +11200,7 @@ var segmentedControlStyles = import_styled_components67.css`
   position: relative;
   width: ${({ $fullWidth }) => $fullWidth ? "100%" : "auto"};
 `;
-var StyledSegmentedControl = (0, import_styled_components67.default)(import_react_toggle_group.Root)`
+var StyledSegmentedControl = (0, import_styled_components68.default)(import_react_toggle_group.Root)`
   ${segmentedControlStyles}
 `;
 var SegmentedControl = (0, import_react52.forwardRef)(
@@ -11190,11 +11239,11 @@ SegmentedControl.displayName = "SegmentedControl";
 
 // src/components/SegmentedControl/SegmentedControlItem.tsx
 var import_react53 = require("react");
-var import_styled_components68 = __toESM(require("styled-components"));
+var import_styled_components69 = __toESM(require("styled-components"));
 var import_react_toggle_group2 = require("@radix-ui/react-toggle-group");
 var import_type_guards42 = require("@wistia/type-guards");
 var import_jsx_runtime250 = require("react/jsx-runtime");
-var segmentedControlItemStyles = import_styled_components68.css`
+var segmentedControlItemStyles = import_styled_components69.css`
   all: unset; /* ToggleGroupItem is a button element */
   align-items: center;
   border-radius: var(--wui-border-radius-rounded);
@@ -11254,7 +11303,7 @@ var segmentedControlItemStyles = import_styled_components68.css`
     }
   }
 `;
-var StyledSegmentedControlItem = (0, import_styled_components68.default)(import_react_toggle_group2.Item)`
+var StyledSegmentedControlItem = (0, import_styled_components69.default)(import_react_toggle_group2.Item)`
   ${segmentedControlItemStyles}
 `;
 var SegmentedControlItem = (0, import_react53.forwardRef)(
@@ -11317,27 +11366,17 @@ SegmentedControlItem.displayName = "SegmentedControlItem";
 // src/components/Select/Select.tsx
 var import_react_select = require("@radix-ui/react-select");
 var import_react54 = require("react");
-var import_styled_components69 = __toESM(require("styled-components"));
+var import_styled_components70 = __toESM(require("styled-components"));
 var import_jsx_runtime251 = require("react/jsx-runtime");
-var StyledTrigger = (0, import_styled_components69.default)(import_react_select.Trigger)`
+var StyledTrigger = (0, import_styled_components70.default)(import_react_select.Trigger)`
   ${({ $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;
@@ -11345,6 +11384,9 @@ var StyledTrigger = (0, import_styled_components69.default)(import_react_select.
   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;
@@ -11358,16 +11400,19 @@ var StyledTrigger = (0, import_styled_components69.default)(import_react_select.
   }
 
   &[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 = (0, import_styled_components69.default)(import_react_select.Content)`
+var StyledContent3 = (0, import_styled_components70.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);
@@ -11409,7 +11454,13 @@ var Select = (0, import_react54.forwardRef)(
               $fullWidth: responsiveFullWidth,
               ...props,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(import_react_select.Value, { placeholder }),
+                /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(
+                  import_react_select.Value,
+                  {
+                    "data-placeholder": placeholder,
+                    placeholder
+                  }
+                ),
                 /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(
                   Icon,
                   {
@@ -11435,9 +11486,9 @@ Select.displayName = "Select";
 // src/components/Select/SelectOption.tsx
 var import_react_select2 = require("@radix-ui/react-select");
 var import_react55 = require("react");
-var import_styled_components70 = __toESM(require("styled-components"));
+var import_styled_components71 = __toESM(require("styled-components"));
 var import_jsx_runtime252 = require("react/jsx-runtime");
-var StyledItem = (0, import_styled_components70.default)(import_react_select2.Item)`
+var StyledItem = (0, import_styled_components71.default)(import_react_select2.Item)`
   ${variantStyleMap2.body3};
   display: flex;
   padding: var(--wui-select-option-padding);
@@ -11445,6 +11496,7 @@ var StyledItem = (0, import_styled_components70.default)(import_react_select2.It
   font-size: var(--font-size);
   font-weight: var(--font-weight);
   border-radius: var(--wui-border-radius-01);
+  cursor: pointer;
 
   &:hover,
   &:focus-visible {
@@ -11460,7 +11512,7 @@ var StyledItem = (0, import_styled_components70.default)(import_react_select2.It
     background-color: transparent;
   }
 `;
-var StyledIconContainer = import_styled_components70.default.span`
+var StyledIconContainer = import_styled_components71.default.span`
   width: 12px;
 `;
 var SelectOption = (0, import_react55.forwardRef)(
@@ -11488,9 +11540,9 @@ SelectOption.displayName = "Option";
 
 // src/components/Select/SelectOptionGroup.tsx
 var import_react_select3 = require("@radix-ui/react-select");
-var import_styled_components71 = __toESM(require("styled-components"));
+var import_styled_components72 = __toESM(require("styled-components"));
 var import_jsx_runtime253 = require("react/jsx-runtime");
-var StyledLabel4 = (0, import_styled_components71.default)(import_react_select3.Label)`
+var StyledLabel4 = (0, import_styled_components72.default)(import_react_select3.Label)`
   padding: var(--wui-select-option-padding);
 `;
 var SelectOptionGroup = ({ children, label, ...props }) => {
@@ -11509,10 +11561,10 @@ var SelectOptionGroup = ({ children, label, ...props }) => {
 
 // src/components/Switch/Switch.tsx
 var import_react56 = require("react");
-var import_styled_components72 = __toESM(require("styled-components"));
+var import_styled_components73 = __toESM(require("styled-components"));
 var import_type_guards43 = require("@wistia/type-guards");
 var import_jsx_runtime254 = require("react/jsx-runtime");
-var sizeSmall3 = import_styled_components72.css`
+var sizeSmall3 = import_styled_components73.css`
   --wui-size-small-width: 24px;
   --wui-size-small-height: 14px;
 
@@ -11527,7 +11579,7 @@ var sizeSmall3 = import_styled_components72.css`
     height: calc(var(--wui-size-small-width) / 2);
   }
 `;
-var sizeMedium3 = import_styled_components72.css`
+var sizeMedium3 = import_styled_components73.css`
   --wui-size-medium-width: 32px;
   --wui-size-medium-height: 18px;
 
@@ -11542,7 +11594,7 @@ var sizeMedium3 = import_styled_components72.css`
     height: calc(var(--wui-size-medium-width) / 2);
   }
 `;
-var sizeLarge3 = import_styled_components72.css`
+var sizeLarge3 = import_styled_components73.css`
   --wui-size-large-width: 40px;
   --wui-size-large-height: 22px;
 
@@ -11562,14 +11614,14 @@ var getSizeCss3 = (size) => {
   if (size === "lg") return sizeLarge3;
   return sizeMedium3;
 };
-var StyledSwitchWrapper = import_styled_components72.default.div`
+var StyledSwitchWrapper = import_styled_components73.default.div`
   display: flex;
   margin: 0;
 
   /* TODO this solves a problem but potentially causes and a11y issue */
   user-select: none;
 `;
-var StyledSwitchInput = import_styled_components72.default.div`
+var StyledSwitchInput = import_styled_components73.default.div`
   ${({ $size }) => getSizeCss3($size)}
   line-height: 0;
   margin: 0;
@@ -11580,7 +11632,7 @@ var StyledSwitchInput = import_styled_components72.default.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 */
 
@@ -11597,7 +11649,7 @@ var StyledSwitchInput = import_styled_components72.default.div`
     transition: all 0.2s ease-in-out;
   }
 `;
-var StyledHiddenSwitchInput = import_styled_components72.default.input`
+var StyledHiddenSwitchInput = import_styled_components73.default.input`
   ${visuallyHiddenStyle}
 
   /* toggles display of faux-input background-color and toggle position */
@@ -11671,19 +11723,19 @@ var Switch = (0, import_react56.forwardRef)(
 Switch.displayName = "Switch";
 
 // src/components/Table/Table.tsx
-var import_styled_components73 = __toESM(require("styled-components"));
+var import_styled_components74 = __toESM(require("styled-components"));
 var import_jsx_runtime255 = require("react/jsx-runtime");
-var StyledTable = import_styled_components73.default.table`
+var StyledTable = import_styled_components74.default.table`
   width: 100%;
   border-collapse: collapse;
 
-  ${({ $striped }) => $striped && import_styled_components73.css`
+  ${({ $striped }) => $striped && import_styled_components74.css`
       tbody tr:nth-child(even) {
         background-color: var(--wui-color-bg-surface-secondary);
       }
     `}
 
-  ${({ $divided }) => $divided && import_styled_components73.css`
+  ${({ $divided }) => $divided && import_styled_components74.css`
       tr {
         border-bottom: 1px solid var(--wui-color-border);
       }
@@ -11707,7 +11759,7 @@ var Table = ({
 };
 
 // src/components/Table/TableBody.tsx
-var import_styled_components74 = __toESM(require("styled-components"));
+var import_styled_components75 = __toESM(require("styled-components"));
 
 // src/components/Table/TableSectionContext.ts
 var import_react57 = require("react");
@@ -11715,27 +11767,27 @@ var TableSectionContext = (0, import_react57.createContext)(null);
 
 // src/components/Table/TableBody.tsx
 var import_jsx_runtime256 = require("react/jsx-runtime");
-var StyledTbody = import_styled_components74.default.tbody``;
+var StyledTbody = import_styled_components75.default.tbody``;
 var TableBody = ({ children, ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime256.jsx)(TableSectionContext.Provider, { value: "body", children: /* @__PURE__ */ (0, import_jsx_runtime256.jsx)(StyledTbody, { ...props, children }) });
 };
 
 // src/components/Table/TableCell.tsx
 var import_react58 = require("react");
-var import_styled_components75 = __toESM(require("styled-components"));
+var import_styled_components76 = __toESM(require("styled-components"));
 var import_jsx_runtime257 = require("react/jsx-runtime");
-var sharedStyles = import_styled_components75.css`
+var sharedStyles = import_styled_components76.css`
   color: var(--wui-color-text);
   padding: var(--wui-space-02);
   text-align: left;
 `;
-var StyledTh = import_styled_components75.default.th`
+var StyledTh = import_styled_components76.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_components75.default.td`
+var StyledTd = import_styled_components76.default.td`
   ${sharedStyles}
   font-size: var(--wui-typography-body-2-size);
   font-weight: var(--wui-typography-body-2-weight);
@@ -11750,25 +11802,25 @@ var TableCell = ({ children, ...props }) => {
 };
 
 // src/components/Table/TableFooter.tsx
-var import_styled_components76 = __toESM(require("styled-components"));
+var import_styled_components77 = __toESM(require("styled-components"));
 var import_jsx_runtime258 = require("react/jsx-runtime");
-var StyledTfoot = import_styled_components76.default.tfoot``;
+var StyledTfoot = import_styled_components77.default.tfoot``;
 var TableFooter = ({ children, ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(TableSectionContext.Provider, { value: "footer", children: /* @__PURE__ */ (0, import_jsx_runtime258.jsx)(StyledTfoot, { ...props, children }) });
 };
 
 // src/components/Table/TableHead.tsx
-var import_styled_components77 = __toESM(require("styled-components"));
+var import_styled_components78 = __toESM(require("styled-components"));
 var import_jsx_runtime259 = require("react/jsx-runtime");
-var StyledThead = import_styled_components77.default.thead``;
+var StyledThead = import_styled_components78.default.thead``;
 var TableHead = ({ children, ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime259.jsx)(TableSectionContext.Provider, { value: "head", children: /* @__PURE__ */ (0, import_jsx_runtime259.jsx)(StyledThead, { ...props, children }) });
 };
 
 // src/components/Table/TableRow.tsx
-var import_styled_components78 = __toESM(require("styled-components"));
+var import_styled_components79 = __toESM(require("styled-components"));
 var import_jsx_runtime260 = require("react/jsx-runtime");
-var StyledTr = import_styled_components78.default.tr``;
+var StyledTr = import_styled_components79.default.tr``;
 var TableRow = ({ children, ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime260.jsx)(StyledTr, { ...props, children });
 };
@@ -11777,13 +11829,13 @@ var TableRow = ({ children, ...props }) => {
 var import_react63 = require("react");
 var import_react_tabs4 = require("@radix-ui/react-tabs");
 var import_type_guards45 = require("@wistia/type-guards");
-var import_styled_components83 = __toESM(require("styled-components"));
+var import_styled_components84 = __toESM(require("styled-components"));
 
 // src/components/Tabs/TabPanel.tsx
-var import_styled_components79 = __toESM(require("styled-components"));
+var import_styled_components80 = __toESM(require("styled-components"));
 var import_react_tabs = require("@radix-ui/react-tabs");
 var import_jsx_runtime261 = require("react/jsx-runtime");
-var StyledTabPanel = (0, import_styled_components79.default)(import_react_tabs.Content)`
+var StyledTabPanel = (0, import_styled_components80.default)(import_react_tabs.Content)`
   display: flex;
   flex-direction: column;
 `;
@@ -11800,10 +11852,10 @@ var TabPanel = ({ children, value, ...props }) => {
 TabPanel.displayName = "TabPanel";
 
 // src/components/Tabs/TabList.tsx
-var import_styled_components80 = __toESM(require("styled-components"));
+var import_styled_components81 = __toESM(require("styled-components"));
 var import_react_tabs2 = require("@radix-ui/react-tabs");
 var import_jsx_runtime262 = require("react/jsx-runtime");
-var StyledTabList = (0, import_styled_components80.default)(import_react_tabs2.List)`
+var StyledTabList = (0, import_styled_components81.default)(import_react_tabs2.List)`
   ${segmentedControlStyles}
 
   margin-bottom: var(--wui-space-04);
@@ -11830,7 +11882,7 @@ TabList.displayName = "TabList";
 
 // src/components/Tabs/TabItem.tsx
 var import_react60 = require("react");
-var import_styled_components81 = __toESM(require("styled-components"));
+var import_styled_components82 = __toESM(require("styled-components"));
 var import_react_tabs3 = require("@radix-ui/react-tabs");
 var import_type_guards44 = require("@wistia/type-guards");
 
@@ -11848,7 +11900,7 @@ var useTabsValue = () => {
 
 // src/components/Tabs/TabItem.tsx
 var import_jsx_runtime263 = require("react/jsx-runtime");
-var StyledTabItem = (0, import_styled_components81.default)(import_react_tabs3.Trigger)`
+var StyledTabItem = (0, import_styled_components82.default)(import_react_tabs3.Trigger)`
   ${segmentedControlItemStyles}
 
   &:focus-visible {
@@ -11928,9 +11980,9 @@ var extractTabItems = (children) => {
 
 // src/components/Tabs/SelectedItemIndicator.tsx
 var import_react62 = require("react");
-var import_styled_components82 = __toESM(require("styled-components"));
+var import_styled_components83 = __toESM(require("styled-components"));
 var import_jsx_runtime264 = require("react/jsx-runtime");
-var TabsSelectedItemIndicatorDiv = (0, import_styled_components82.default)(SelectedItemIndicatorDiv)`
+var TabsSelectedItemIndicatorDiv = (0, import_styled_components83.default)(SelectedItemIndicatorDiv)`
   &:has(~ ${StyledTabItem}:focus-visible) {
     outline: 2px solid var(--wui-color-focus-ring);
   }
@@ -11963,18 +12015,18 @@ var SelectedItemIndicator2 = () => {
 
 // src/components/Tabs/Tabs.tsx
 var import_jsx_runtime265 = require("react/jsx-runtime");
-var TabsContainer = import_styled_components83.default.div`
+var TabsContainer = import_styled_components84.default.div`
   display: flex;
   flex-direction: column;
   height: ${({ $stickyHeaders }) => $stickyHeaders ? "100%" : "auto"};
   overflow: ${({ $stickyHeaders }) => $stickyHeaders ? "hidden" : "visible"};
 `;
-var StickyTabContent = import_styled_components83.default.div`
+var StickyTabContent = import_styled_components84.default.div`
   flex: ${({ $stickyHeaders }) => $stickyHeaders ? "1" : "initial"};
   overflow-y: ${({ $stickyHeaders }) => $stickyHeaders ? "auto" : "visible"};
   overflow-x: ${({ $stickyHeaders }) => $stickyHeaders ? "hidden" : "visible"};
 `;
-var StyledTabsRoot = (0, import_styled_components83.default)(import_react_tabs4.Root)`
+var StyledTabsRoot = (0, import_styled_components84.default)(import_react_tabs4.Root)`
   display: flex;
   flex-direction: column;
   height: ${({ $stickyHeaders }) => $stickyHeaders ? "100%" : "auto"};
@@ -12086,10 +12138,10 @@ Tab.displayName = "Tab";
 
 // src/components/Tag/Tag.tsx
 var import_react65 = require("react");
-var import_styled_components84 = __toESM(require("styled-components"));
+var import_styled_components85 = __toESM(require("styled-components"));
 var import_type_guards46 = require("@wistia/type-guards");
 var import_jsx_runtime267 = require("react/jsx-runtime");
-var TagLabel = import_styled_components84.default.a`
+var TagLabel = import_styled_components85.default.a`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   font-size: var(--wui-typography-label-4-size);
   font-weight: var(--wui-typography-label-4-weight);
@@ -12124,14 +12176,14 @@ var TagLabel = import_styled_components84.default.a`
     box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
   }
 `;
-var TagDivider = import_styled_components84.default.div`
+var TagDivider = import_styled_components85.default.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   border-left: 1px solid var(--wui-color-border);
   display: flex;
   height: 14px;
   width: 1px;
 `;
-var StyledRemoveButton = import_styled_components84.default.button`
+var StyledRemoveButton = import_styled_components85.default.button`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   all: unset;
   cursor: pointer;
@@ -12159,7 +12211,7 @@ var StyledRemoveButton = import_styled_components84.default.button`
     box-shadow: inset 0 0 0 2px var(--wui-color-border-secondary);
   }
 `;
-var StyledTag = import_styled_components84.default.div`
+var StyledTag = import_styled_components85.default.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   align-items: center;
   background-color: var(--wui-color-bg-surface-secondary);
@@ -12248,7 +12300,7 @@ var Tag = (0, import_react65.forwardRef)(
 Tag.displayName = "Tag";
 
 // src/components/WistiaLogo/WistiaLogo.tsx
-var import_styled_components85 = __toESM(require("styled-components"));
+var import_styled_components86 = __toESM(require("styled-components"));
 var import_type_guards47 = require("@wistia/type-guards");
 var import_jsx_runtime268 = require("react/jsx-runtime");
 var renderBrandmark = (brandmarkColor, iconOnly) => {
@@ -12290,7 +12342,7 @@ var computedViewBox = (iconOnly) => {
   }
   return "0 0 144 31.47";
 };
-var WistiaLogoComponent = import_styled_components85.default.svg`
+var WistiaLogoComponent = import_styled_components86.default.svg`
   height: ${({ height }) => `${height}px`};
 
   /* ensure it will always fit on mobile */
@@ -12306,12 +12358,12 @@ var WistiaLogoComponent = import_styled_components85.default.svg`
   ${({ $opticallyCentered, $iconOnly }) => {
   if ($opticallyCentered) {
     if ($iconOnly) {
-      return import_styled_components85.css`
+      return import_styled_components86.css`
           aspect-ratio: 1;
           padding: 11.85% 3.12% 13.91%;
         `;
     }
-    return import_styled_components85.css`
+    return import_styled_components86.css`
         aspect-ratio: 127 / 32;
       `;
   }
@@ -12371,6 +12423,257 @@ var WistiaLogo = ({
   return href !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime268.jsx)("a", { href, children: Logo }) : Logo;
 };
 WistiaLogo.displayName = "WistiaLogo";
+
+// src/components/Thumbnail/ThumbnailBadge.tsx
+var import_styled_components87 = __toESM(require("styled-components"));
+var import_type_guards48 = require("@wistia/type-guards");
+var import_jsx_runtime269 = require("react/jsx-runtime");
+var StyledThumbnailBadge = import_styled_components87.default.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__ */ (0, import_jsx_runtime269.jsxs)(StyledThumbnailBadge, { ...otherProps, children: [
+    (0, import_type_guards48.isNotNil)(icon) && icon,
+    /* @__PURE__ */ (0, import_jsx_runtime269.jsx)("span", { children: label })
+  ] });
+};
+ThumbnailBadge.displayName = "ThumbnailBadge";
+
+// src/components/Thumbnail/Thumbnail.tsx
+var import_react66 = require("react");
+var import_styled_components89 = __toESM(require("styled-components"));
+var import_type_guards50 = require("@wistia/type-guards");
+
+// src/private/helpers/getBackgroundGradient/getBackgroundGradient.ts
+var import_type_guards49 = require("@wistia/type-guards");
+var import_styled_components88 = require("styled-components");
+var gradients = {
+  defaultDarkOne: import_styled_components88.css`
+    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: import_styled_components88.css`
+    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: import_styled_components88.css`
+    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: import_styled_components88.css`
+    background-color: #ccd5ff;
+    background-image:
+      radial-gradient(ellipse at top, #ccd5ff, transparent),
+      radial-gradient(ellipse at bottom, #6b84ff, transparent);
+  `,
+  defaultMidOne: import_styled_components88.css`
+    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: import_styled_components88.css`
+    background-color: #6b84ff;
+    background-image:
+      radial-gradient(ellipse at top, #2949e5, transparent),
+      radial-gradient(ellipse at bottom, #ccd5ff, transparent);
+  `,
+  green: import_styled_components88.css`
+    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: import_styled_components88.css`
+    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: import_styled_components88.css`
+    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: import_styled_components88.css`
+    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: import_styled_components88.css`
+    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: import_styled_components88.css`
+    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: import_styled_components88.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_components88.css`
+    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: import_styled_components88.css`
+    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: import_styled_components88.css`
+    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 (0, import_type_guards49.isNotNil)(gradientName) ? gradients[gradientName] : gradients.defaultDarkOne;
+};
+
+// src/components/Thumbnail/Thumbnail.tsx
+var import_jsx_runtime270 = require("react/jsx-runtime");
+var WideThumbnailImage = import_styled_components89.default.img`
+  height: 100%;
+  object-fit: cover;
+  width: 100%;
+`;
+var SquareThumbnailImage = import_styled_components89.default.img`
+  backdrop-filter: blur(8px);
+  object-fit: contain;
+  width: 100%;
+`;
+var ThumbnailImage = ({ thumbnailImageType, thumbnailUrl }) => {
+  if (thumbnailImageType === "wide") {
+    return /* @__PURE__ */ (0, import_jsx_runtime270.jsx)(
+      WideThumbnailImage,
+      {
+        alt: "",
+        src: thumbnailUrl
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime270.jsx)(
+    SquareThumbnailImage,
+    {
+      alt: "",
+      src: thumbnailUrl
+    }
+  );
+};
+var StyledThumbnail = import_styled_components89.default.div`
+  ${({ $gradientBackground }) => getBackgroundGradient($gradientBackground)};
+  aspect-ratio: 16 / 9;
+  background: ${({ $backgroundUrl }) => (0, import_type_guards50.isNotNil)($backgroundUrl) ? `url('${$backgroundUrl}') center / cover` : void 0};
+  border-radius: 4px;
+  display: flex;
+  overflow: hidden;
+  position: relative;
+  width: ${({ $width }) => $width};
+`;
+var Thumbnail = (0, import_react66.forwardRef)(
+  ({
+    gradientBackground = "defaultMidOne",
+    thumbnailImageType = "square",
+    thumbnailUrl,
+    width = "100%",
+    children,
+    ...otherProps
+  }, ref) => {
+    const backgroundUrl = thumbnailImageType === "square" && (0, import_type_guards50.isNotNil)(thumbnailUrl) ? thumbnailUrl : void 0;
+    return /* @__PURE__ */ (0, import_jsx_runtime270.jsxs)(
+      StyledThumbnail,
+      {
+        ref,
+        $backgroundUrl: backgroundUrl,
+        $gradientBackground: gradientBackground,
+        $width: width,
+        ...otherProps,
+        children: [
+          (0, import_type_guards50.isNotNil)(children) && children,
+          (0, import_type_guards50.isNotNil)(thumbnailUrl) && /* @__PURE__ */ (0, import_jsx_runtime270.jsx)(
+            ThumbnailImage,
+            {
+              thumbnailImageType,
+              thumbnailUrl
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Thumbnail.displayName = "Thumbnail";
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   ActionButton,
@@ -12444,6 +12747,8 @@ WistiaLogo.displayName = "WistiaLogo";
   Tabs,
   Tag,
   Text,
+  Thumbnail,
+  ThumbnailBadge,
   Tooltip,
   UIProvider,
   WistiaLogo,