@wistia/ui 0.6.42 → 0.6.43-beta.093c5cd5.2322c72

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.6.42
+ * @license @wistia/ui v0.6.43-beta.093c5cd5.2322c72
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -2363,11 +2363,11 @@ var EllipsisComponent = import_styled_components13.default.span`
   return void 0;
 }}
 `;
-var Ellipsis = ({ children, lines, ...otherProps }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+var Ellipsis = ({ children, lines, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
   EllipsisComponent,
   {
     $lines: lines,
-    ...otherProps,
+    ...props,
     children
   }
 );
@@ -6934,7 +6934,7 @@ var Icon = ({
   size = "lg",
   style,
   type,
-  ...otherProps
+  ...props
 }) => {
   const responsiveSize = useResponsiveProp(size);
   if ((0, import_type_guards13.isNil)(type)) {
@@ -6966,7 +6966,7 @@ var Icon = ({
       viewBox: "0 0 24 24",
       width: `${iconSizeMap[responsiveSize]}px`,
       xmlns: "http://www.w3.org/2000/svg",
-      ...otherProps,
+      ...props,
       color: iconColor
     }
   );
@@ -7414,13 +7414,13 @@ var ColorSchemeWrapper = ({
   __nav = false,
   colorScheme = "inherit",
   children,
-  ...otherProps
+  ...props
 }) => /* @__PURE__ */ (0, import_jsx_runtime195.jsx)(
   StyledColorSchemeWrapper,
   {
     $colorScheme: colorScheme,
     $nav: __nav,
-    ...otherProps,
+    ...props,
     children
   }
 );
@@ -7513,7 +7513,7 @@ var Avatar = ({
   name,
   size = "md",
   onImageLoad,
-  ...otherProps
+  ...props
 }) => {
   const [imageLoadState, setImageLoadState] = (0, import_react18.useState)("loading");
   (0, import_react18.useEffect)(() => {
@@ -7533,7 +7533,7 @@ var Avatar = ({
   return /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(
     AvatarWrapper,
     {
-      ...otherProps,
+      ...props,
       $maxHeight: avatarSize,
       children: showInitials ? /* @__PURE__ */ (0, import_jsx_runtime196.jsx)(
         InitialsContainer,
@@ -7583,13 +7583,13 @@ var StyledBadge = import_styled_components24.default.div`
   }
 `;
 var Badge = (0, import_react19.forwardRef)(
-  ({ colorScheme = "inherit", label, icon, ...otherProps }, ref) => {
+  ({ colorScheme = "inherit", label, icon, ...props }, ref) => {
     const hasIcon = (0, import_type_guards18.isNotNil)(icon);
     return /* @__PURE__ */ (0, import_jsx_runtime197.jsxs)(
       StyledBadge,
       {
         ref,
-        ...otherProps,
+        ...props,
         $colorScheme: colorScheme,
         $hasIcon: hasIcon,
         children: [
@@ -7749,7 +7749,7 @@ var BoxComponent = (0, import_react20.forwardRef)(
     width,
     wrapItems = false,
     flexMode,
-    ...otherProps
+    ...props
   }, ref) => {
     if ((0, import_type_guards19.isNotUndefined)(height)) {
       if (fill === true || fill === "vertical") {
@@ -7793,7 +7793,7 @@ var BoxComponent = (0, import_react20.forwardRef)(
         $width: width,
         $wrapItems: wrapItems,
         as: renderAs ?? DEFAULT_ELEMENT,
-        ...otherProps,
+        ...props,
         children: wrapChildren(children)
       }
     );
@@ -7930,7 +7930,7 @@ var ButtonGroup = ({
   align = "left",
   fullWidth = false,
   collapseOnSmallScreens = true,
-  ...otherProps
+  ...props
 }) => {
   if ((0, import_type_guards20.isNil)(children)) {
     return null;
@@ -7941,7 +7941,7 @@ var ButtonGroup = ({
       $align: align,
       $collapse: collapseOnSmallScreens,
       $fullWidth: fullWidth,
-      ...otherProps,
+      ...props,
       children
     }
   );
@@ -8093,13 +8093,13 @@ var ScreenReaderOnly = ({
   text,
   children,
   focusable = false,
-  ...otherProps
+  ...props
 }) => {
   const accessibleText = (0, import_type_guards22.isNotNil)(text) ? text : children;
   if (focusable) {
-    return /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(VisuallyHiddenButFocusable, { ...otherProps, children: accessibleText });
+    return /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(VisuallyHiddenButFocusable, { ...props, children: accessibleText });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(VisuallyHidden, { ...otherProps, children: accessibleText });
+  return /* @__PURE__ */ (0, import_jsx_runtime205.jsx)(VisuallyHidden, { ...props, children: accessibleText });
 };
 ScreenReaderOnly.displayName = "ScreenReaderOnly";
 
@@ -8503,7 +8503,7 @@ var HeadingComponent = (0, import_react26.forwardRef)(
     preventUserSelect = false,
     variant = "heading1",
     renderAs,
-    ...otherProps
+    ...props
   }, ref) => /* @__PURE__ */ (0, import_jsx_runtime211.jsx)(
     StyledHeading,
     {
@@ -8516,7 +8516,7 @@ var HeadingComponent = (0, import_react26.forwardRef)(
       $preventUserSelect: preventUserSelect,
       $variant: variant,
       as: renderAs ?? variantElementMap[variant],
-      ...otherProps
+      ...props
     }
   )
 );
@@ -8834,7 +8834,7 @@ var TextComponent = (0, import_react27.forwardRef)(
     prominence = "primary",
     variant = "body2",
     renderAs,
-    ...otherProps
+    ...props
   }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(
       StyledText,
@@ -8849,7 +8849,7 @@ var TextComponent = (0, import_react27.forwardRef)(
         $prominence: prominence,
         $variant: variant,
         as: renderAs ?? variantElementMap2[variant],
-        ...otherProps
+        ...props
       }
     );
   }
@@ -8921,17 +8921,14 @@ var DividerComponent = import_styled_components42.default.div`
   }
 }}
 `;
-var Divider = ({
-  orientation = "horizontal",
-  ...otherProps
-}) => {
+var Divider = ({ orientation = "horizontal", ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime216.jsx)(
     DividerComponent,
     {
       $orientation: orientation,
       "aria-orientation": orientation,
       role: "separator",
-      ...otherProps
+      ...props
     }
   );
 };
@@ -9061,6 +9058,7 @@ var inputCssVariables = import_styled_components44.css`
   --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-color-text: var(--wui-color-text);
   --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);
@@ -9085,7 +9083,7 @@ var inputStyles = import_styled_components45.css`
     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);
+    color: var(--wui-input-color-text);
 
     &::placeholder {
       color: var(--wui-input-placeholder);
@@ -9646,12 +9644,12 @@ var Label = ({
   htmlFor,
   required = false,
   screenReaderOnly = false,
-  ...otherProps
+  ...props
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(
     StyledLabel3,
     {
-      ...otherProps,
+      ...props,
       $disabled: disabled,
       $required: required,
       $screenReaderOnly: screenReaderOnly,
@@ -9951,7 +9949,7 @@ var Image = ({
   fit: objFit,
   loading = "lazy",
   position: objPosition,
-  ...otherProps
+  ...props
 }) => /* @__PURE__ */ (0, import_jsx_runtime229.jsx)(
   StyledImage,
   {
@@ -9962,7 +9960,7 @@ var Image = ({
     alt,
     loading,
     src,
-    ...otherProps
+    ...props
   }
 );
 Image.displayName = "Image";
@@ -10642,7 +10640,7 @@ var StyledModalContent = (0, import_styled_components61.default)(import_react_di
   }
 `;
 var ModalContent = (0, import_react45.forwardRef)(
-  ({ fullHeight, width, children, ...otherProps }, ref) => {
+  ({ fullHeight, width, children, ...props }, ref) => {
     useFocusRestore();
     return /* @__PURE__ */ (0, import_jsx_runtime241.jsx)(
       StyledModalContent,
@@ -10651,7 +10649,7 @@ var ModalContent = (0, import_react45.forwardRef)(
         $fullHeight: fullHeight,
         $width: width,
         "aria-describedby": void 0,
-        ...otherProps,
+        ...props,
         children
       }
     );
@@ -11384,9 +11382,9 @@ var StyledTrigger = (0, import_styled_components70.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);
+  color: var(--wui-input-color-text);
 
   > span {
     white-space: nowrap;
@@ -11408,7 +11406,7 @@ var StyledTrigger = (0, import_styled_components70.default)(import_react_select.
     background-color: var(--wui-color-bg-surface-disabled);
   }
 
-  [data-placeholder] {
+  &[data-placeholder] {
     color: var(--wui-input-placeholder);
   }
 `;
@@ -11454,13 +11452,7 @@ var Select = (0, import_react54.forwardRef)(
               $fullWidth: responsiveFullWidth,
               ...props,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(
-                  import_react_select.Value,
-                  {
-                    "data-placeholder": placeholder,
-                    placeholder
-                  }
-                ),
+                /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(import_react_select.Value, { placeholder }),
                 /* @__PURE__ */ (0, import_jsx_runtime251.jsx)(
                   Icon,
                   {
@@ -11487,6 +11479,7 @@ Select.displayName = "Select";
 var import_react_select2 = require("@radix-ui/react-select");
 var import_react55 = require("react");
 var import_styled_components71 = __toESM(require("styled-components"));
+var import_type_guards43 = require("@wistia/type-guards");
 var import_jsx_runtime252 = require("react/jsx-runtime");
 var StyledItem = (0, import_styled_components71.default)(import_react_select2.Item)`
   ${variantStyleMap2.body3};
@@ -11516,21 +11509,24 @@ var StyledIconContainer = import_styled_components71.default.span`
   width: 12px;
 `;
 var SelectOption = (0, import_react55.forwardRef)(
-  ({ children, ...props }, forwardedRef) => {
+  ({ children, selectedDisplayValue, ...props }, forwardedRef) => {
     return /* @__PURE__ */ (0, import_jsx_runtime252.jsxs)(
       StyledItem,
       {
         ...props,
         ref: forwardedRef,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(StyledIconContainer, { children: /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(import_react_select2.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(StyledIconContainer, { "data-indicator": true, children: /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(import_react_select2.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(
             Icon,
             {
               size: "sm",
               type: "checkmark"
             }
           ) }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(import_react_select2.ItemText, { children })
+          (0, import_type_guards43.isNotNil)(selectedDisplayValue) ? /* @__PURE__ */ (0, import_jsx_runtime252.jsxs)("div", { children: [
+            children,
+            /* @__PURE__ */ (0, import_jsx_runtime252.jsx)("div", { style: { display: "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(import_react_select2.ItemText, { children: selectedDisplayValue }) })
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(import_react_select2.ItemText, { children })
         ]
       }
     );
@@ -11562,7 +11558,7 @@ var SelectOptionGroup = ({ children, label, ...props }) => {
 // src/components/Switch/Switch.tsx
 var import_react56 = require("react");
 var import_styled_components73 = __toESM(require("styled-components"));
-var import_type_guards43 = require("@wistia/type-guards");
+var import_type_guards44 = require("@wistia/type-guards");
 var import_jsx_runtime254 = require("react/jsx-runtime");
 var sizeSmall3 = import_styled_components73.css`
   --wui-size-small-width: 24px;
@@ -11681,7 +11677,7 @@ var Switch = (0, import_react56.forwardRef)(
     ...props
   }, ref) => {
     const generatedId = (0, import_react56.useId)();
-    const computedId = (0, import_type_guards43.isNonEmptyString)(id) ? id : `wistia-ui-switch-${generatedId}`;
+    const computedId = (0, import_type_guards44.isNonEmptyString)(id) ? id : `wistia-ui-switch-${generatedId}`;
     return /* @__PURE__ */ (0, import_jsx_runtime254.jsxs)(StyledSwitchWrapper, { $disabled: disabled, children: [
       /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(
         StyledHiddenSwitchInput,
@@ -11828,7 +11824,7 @@ var TableRow = ({ children, ...props }) => {
 // src/components/Tabs/Tabs.tsx
 var import_react63 = require("react");
 var import_react_tabs4 = require("@radix-ui/react-tabs");
-var import_type_guards45 = require("@wistia/type-guards");
+var import_type_guards46 = require("@wistia/type-guards");
 var import_styled_components84 = __toESM(require("styled-components"));
 
 // src/components/Tabs/TabPanel.tsx
@@ -11884,7 +11880,7 @@ TabList.displayName = "TabList";
 var import_react60 = require("react");
 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");
+var import_type_guards45 = require("@wistia/type-guards");
 
 // src/components/Tabs/useTabsValue.tsx
 var import_react59 = require("react");
@@ -11942,8 +11938,8 @@ var TabItem = (0, import_react60.forwardRef)(
       StyledTabItem,
       {
         ref: combinedRef,
-        $hasLabel: (0, import_type_guards44.isNotNil)(label),
-        "aria-label": (0, import_type_guards44.isNotNil)(label) ? void 0 : ariaLabel,
+        $hasLabel: (0, import_type_guards45.isNotNil)(label),
+        "aria-label": (0, import_type_guards45.isNotNil)(label) ? void 0 : ariaLabel,
         disabled,
         value,
         children: [
@@ -12040,7 +12036,7 @@ var Tabs = (0, import_react63.forwardRef)(
     selectedValue,
     onSelectedValueChange,
     stickyHeaders = true,
-    ...otherProps
+    ...props
   }, ref) => {
     const tabItems = extractTabItems(children);
     const [internalSelectedValue, setInternalSelectedValue] = (0, import_react63.useState)(defaultSelectedValue);
@@ -12055,7 +12051,7 @@ var Tabs = (0, import_react63.forwardRef)(
         ref,
         $stickyHeaders: stickyHeaders,
         activationMode: "automatic",
-        ...otherProps,
+        ...props,
         ...modeProps,
         children: /* @__PURE__ */ (0, import_jsx_runtime265.jsx)(TabsValueProvider, { value: currentValue, children: /* @__PURE__ */ (0, import_jsx_runtime265.jsxs)(SelectedItemMeasurementsProvider, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime265.jsxs)(
@@ -12073,7 +12069,7 @@ var Tabs = (0, import_react63.forwardRef)(
                     label,
                     "aria-label": ariaLabelForTab
                   } = tab.props;
-                  if ((0, import_type_guards45.isNil)(icon)) {
+                  if ((0, import_type_guards46.isNil)(icon)) {
                     return /* @__PURE__ */ (0, import_jsx_runtime265.jsx)(
                       TabItem,
                       {
@@ -12084,7 +12080,7 @@ var Tabs = (0, import_react63.forwardRef)(
                       value
                     );
                   }
-                  if ((0, import_type_guards45.isNotNil)(label)) {
+                  if ((0, import_type_guards46.isNotNil)(label)) {
                     return /* @__PURE__ */ (0, import_jsx_runtime265.jsx)(
                       TabItem,
                       {
@@ -12096,7 +12092,7 @@ var Tabs = (0, import_react63.forwardRef)(
                       value
                     );
                   }
-                  if ((0, import_type_guards45.isNotNil)(ariaLabelForTab)) {
+                  if ((0, import_type_guards46.isNotNil)(ariaLabelForTab)) {
                     return /* @__PURE__ */ (0, import_jsx_runtime265.jsx)(
                       TabItem,
                       {
@@ -12139,7 +12135,7 @@ Tab.displayName = "Tab";
 // src/components/Tag/Tag.tsx
 var import_react65 = require("react");
 var import_styled_components85 = __toESM(require("styled-components"));
-var import_type_guards46 = require("@wistia/type-guards");
+var import_type_guards47 = require("@wistia/type-guards");
 var import_jsx_runtime267 = require("react/jsx-runtime");
 var TagLabel = import_styled_components85.default.a`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
@@ -12224,10 +12220,10 @@ var StyledTag = import_styled_components85.default.div`
   }
 `;
 var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
-  if ((0, import_type_guards46.isNil)(onClickRemove)) {
+  if ((0, import_type_guards47.isNil)(onClickRemove)) {
     return null;
   }
-  if ((0, import_type_guards46.isNil)(onClickRemoveLabel)) {
+  if ((0, import_type_guards47.isNil)(onClickRemoveLabel)) {
     throw new Error(
       "for accessibility, onClickRemoveLabel must be provided if onClickRemove is provided"
     );
@@ -12255,23 +12251,15 @@ var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
   ] });
 };
 var Tag = (0, import_react65.forwardRef)(
-  ({
-    onClickRemove,
-    colorScheme = "inherit",
-    href,
-    icon,
-    label,
-    onClickRemoveLabel,
-    ...otherProps
-  }, ref) => {
-    const hasIcon = (0, import_type_guards46.isNotNil)(icon);
-    const labelProps = (0, import_type_guards46.isNotNil)(href) && (0, import_type_guards46.isNonEmptyString)(href) ? { href, as: "a" } : { as: "span" };
+  ({ onClickRemove, colorScheme = "inherit", href, icon, label, onClickRemoveLabel, ...props }, ref) => {
+    const hasIcon = (0, import_type_guards47.isNotNil)(icon);
+    const labelProps = (0, import_type_guards47.isNotNil)(href) && (0, import_type_guards47.isNonEmptyString)(href) ? { href, as: "a" } : { as: "span" };
     return /* @__PURE__ */ (0, import_jsx_runtime267.jsxs)(
       StyledTag,
       {
         ref,
         $colorScheme: colorScheme,
-        ...otherProps,
+        ...props,
         children: [
           /* @__PURE__ */ (0, import_jsx_runtime267.jsxs)(
             TagLabel,
@@ -12301,7 +12289,7 @@ Tag.displayName = "Tag";
 
 // src/components/WistiaLogo/WistiaLogo.tsx
 var import_styled_components86 = __toESM(require("styled-components"));
-var import_type_guards47 = require("@wistia/type-guards");
+var import_type_guards48 = require("@wistia/type-guards");
 var import_jsx_runtime268 = require("react/jsx-runtime");
 var renderBrandmark = (brandmarkColor, iconOnly) => {
   if (iconOnly) {
@@ -12379,7 +12367,7 @@ var WistiaLogo = ({
   opticallyCentered = false,
   title = "Wistia Logo",
   variant = "standard",
-  ...otherProps
+  ...props
 }) => {
   const primaryColor = "#2949e5";
   const darkColor = "#000934";
@@ -12411,10 +12399,10 @@ var WistiaLogo = ({
       role: "img",
       viewBox: computedViewBox(iconOnly),
       xmlns: "http://www.w3.org/2000/svg",
-      ...otherProps,
+      ...props,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime268.jsx)("title", { children: title }),
-        (0, import_type_guards47.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime268.jsx)("desc", { children: description }) : null,
+        (0, import_type_guards48.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime268.jsx)("desc", { children: description }) : null,
         renderBrandmark(brandmarkColor, iconOnly),
         renderLogotype(logotypeColor, iconOnly)
       ]
@@ -12426,7 +12414,7 @@ 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_type_guards49 = require("@wistia/type-guards");
 var import_jsx_runtime269 = require("react/jsx-runtime");
 var StyledThumbnailBadge = import_styled_components87.default.div`
   align-items: center;
@@ -12452,13 +12440,9 @@ var StyledThumbnailBadge = import_styled_components87.default.div`
     }
   }
 `;
-var ThumbnailBadge = ({
-  icon,
-  label,
-  ...otherProps
-}) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime269.jsxs)(StyledThumbnailBadge, { ...otherProps, children: [
-    (0, import_type_guards48.isNotNil)(icon) && icon,
+var ThumbnailBadge = ({ icon, label, ...props }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime269.jsxs)(StyledThumbnailBadge, { ...props, children: [
+    (0, import_type_guards49.isNotNil)(icon) && icon,
     /* @__PURE__ */ (0, import_jsx_runtime269.jsx)("span", { children: label })
   ] });
 };
@@ -12467,10 +12451,10 @@ 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");
+var import_type_guards51 = require("@wistia/type-guards");
 
 // src/private/helpers/getBackgroundGradient/getBackgroundGradient.ts
-var import_type_guards49 = require("@wistia/type-guards");
+var import_type_guards50 = require("@wistia/type-guards");
 var import_styled_components88 = require("styled-components");
 var gradients = {
   defaultDarkOne: import_styled_components88.css`
@@ -12598,7 +12582,7 @@ var gradients = {
 };
 var gradientMap = Object.keys(gradients);
 var getBackgroundGradient = (gradientName = void 0) => {
-  return (0, import_type_guards49.isNotNil)(gradientName) ? gradients[gradientName] : gradients.defaultDarkOne;
+  return (0, import_type_guards50.isNotNil)(gradientName) ? gradients[gradientName] : gradients.defaultDarkOne;
 };
 
 // src/components/Thumbnail/Thumbnail.tsx
@@ -12632,10 +12616,15 @@ var ThumbnailImage = ({ thumbnailImageType, thumbnailUrl }) => {
   );
 };
 var StyledThumbnail = import_styled_components89.default.div`
-  ${({ $gradientBackground }) => getBackgroundGradient($gradientBackground)};
+  background-image: ${({ $backgroundUrl }) => (0, import_type_guards51.isNotNil)($backgroundUrl) ? `url('${$backgroundUrl}')` : void 0};
+  ${({ $backgroundUrl, $gradientBackground }) => (
+  // if we don't have $backgroundUrl show a gradient
+  (0, import_type_guards51.isNil)($backgroundUrl) ? getBackgroundGradient($gradientBackground) : void 0
+)};
+  background-position: center center;
+  background-size: cover;
   aspect-ratio: 16 / 9;
-  background: ${({ $backgroundUrl }) => (0, import_type_guards50.isNotNil)($backgroundUrl) ? `url('${$backgroundUrl}') center / cover` : void 0};
-  border-radius: 4px;
+  border-radius: var(--wui-border-radius-01);
   display: flex;
   overflow: hidden;
   position: relative;
@@ -12648,9 +12637,9 @@ var Thumbnail = (0, import_react66.forwardRef)(
     thumbnailUrl,
     width = "100%",
     children,
-    ...otherProps
+    ...props
   }, ref) => {
-    const backgroundUrl = thumbnailImageType === "square" && (0, import_type_guards50.isNotNil)(thumbnailUrl) ? thumbnailUrl : void 0;
+    const backgroundUrl = thumbnailImageType === "square" && (0, import_type_guards51.isNotNil)(thumbnailUrl) ? thumbnailUrl : void 0;
     return /* @__PURE__ */ (0, import_jsx_runtime270.jsxs)(
       StyledThumbnail,
       {
@@ -12658,16 +12647,16 @@ var Thumbnail = (0, import_react66.forwardRef)(
         $backgroundUrl: backgroundUrl,
         $gradientBackground: gradientBackground,
         $width: width,
-        ...otherProps,
+        ...props,
         children: [
-          (0, import_type_guards50.isNotNil)(children) && children,
-          (0, import_type_guards50.isNotNil)(thumbnailUrl) && /* @__PURE__ */ (0, import_jsx_runtime270.jsx)(
+          (0, import_type_guards51.isNotNil)(children) ? children : null,
+          (0, import_type_guards51.isNotNil)(thumbnailUrl) ? /* @__PURE__ */ (0, import_jsx_runtime270.jsx)(
             ThumbnailImage,
             {
               thumbnailImageType,
               thumbnailUrl
             }
-          )
+          ) : null
         ]
       }
     );