@wistia/ui 0.6.40 → 0.6.41-beta.303ca968.b880931

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.6.40
+ * @license @wistia/ui v0.6.41-beta.303ca968.b880931
  *
  * 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,
@@ -10754,10 +10756,12 @@ var StyledContent2 = (0, import_styled_components63.default)(import_react_popove
   ${({ $unstyled }) => !$unstyled && import_styled_components63.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 +10775,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 +10793,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,
@@ -11436,6 +11447,7 @@ Select.displayName = "Select";
 var import_react_select2 = require("@radix-ui/react-select");
 var import_react55 = require("react");
 var import_styled_components70 = __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_components70.default)(import_react_select2.Item)`
   ${variantStyleMap2.body3};
@@ -11464,21 +11476,24 @@ var StyledIconContainer = import_styled_components70.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 })
         ]
       }
     );
@@ -11510,7 +11525,7 @@ 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_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_components72.css`
   --wui-size-small-width: 24px;
@@ -11629,7 +11644,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,
@@ -11776,7 +11791,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_components83 = __toESM(require("styled-components"));
 
 // src/components/Tabs/TabPanel.tsx
@@ -11832,7 +11847,7 @@ TabList.displayName = "TabList";
 var import_react60 = require("react");
 var import_styled_components81 = __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");
@@ -11890,8 +11905,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: [
@@ -12021,7 +12036,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,
                       {
@@ -12032,7 +12047,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,
                       {
@@ -12044,7 +12059,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,
                       {
@@ -12087,7 +12102,7 @@ Tab.displayName = "Tab";
 // src/components/Tag/Tag.tsx
 var import_react65 = require("react");
 var import_styled_components84 = __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_components84.default.a`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
@@ -12172,10 +12187,10 @@ var StyledTag = import_styled_components84.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"
     );
@@ -12212,8 +12227,8 @@ var Tag = (0, import_react65.forwardRef)(
     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" };
+    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,
       {
@@ -12249,7 +12264,7 @@ Tag.displayName = "Tag";
 
 // src/components/WistiaLogo/WistiaLogo.tsx
 var import_styled_components85 = __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) {
@@ -12362,7 +12377,7 @@ var WistiaLogo = ({
       ...otherProps,
       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)
       ]
@@ -12371,6 +12386,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_components86 = __toESM(require("styled-components"));
+var import_type_guards49 = require("@wistia/type-guards");
+var import_jsx_runtime269 = require("react/jsx-runtime");
+var StyledThumbnailBadge = import_styled_components86.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_guards49.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_components88 = __toESM(require("styled-components"));
+var import_type_guards51 = require("@wistia/type-guards");
+
+// src/private/helpers/getBackgroundGradient/getBackgroundGradient.ts
+var import_type_guards50 = require("@wistia/type-guards");
+var import_styled_components87 = require("styled-components");
+var gradients = {
+  defaultDarkOne: import_styled_components87.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_components87.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_components87.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_components87.css`
+    background-color: #ccd5ff;
+    background-image:
+      radial-gradient(ellipse at top, #ccd5ff, transparent),
+      radial-gradient(ellipse at bottom, #6b84ff, transparent);
+  `,
+  defaultMidOne: import_styled_components87.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_components87.css`
+    background-color: #6b84ff;
+    background-image:
+      radial-gradient(ellipse at top, #2949e5, transparent),
+      radial-gradient(ellipse at bottom, #ccd5ff, transparent);
+  `,
+  green: import_styled_components87.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_components87.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_components87.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_components87.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_components87.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_components87.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_components87.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_components87.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_components87.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_components87.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_guards50.isNotNil)(gradientName) ? gradients[gradientName] : gradients.defaultDarkOne;
+};
+
+// src/components/Thumbnail/Thumbnail.tsx
+var import_jsx_runtime270 = require("react/jsx-runtime");
+var WideThumbnailImage = import_styled_components88.default.img`
+  height: 100%;
+  object-fit: cover;
+  width: 100%;
+`;
+var SquareThumbnailImage = import_styled_components88.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_components88.default.div`
+  ${({ $gradientBackground }) => getBackgroundGradient($gradientBackground)};
+  aspect-ratio: 16 / 9;
+  background: ${({ $backgroundUrl }) => (0, import_type_guards51.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_guards51.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_guards51.isNotNil)(children) && children,
+          (0, import_type_guards51.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 +12710,8 @@ WistiaLogo.displayName = "WistiaLogo";
   Tabs,
   Tag,
   Text,
+  Thumbnail,
+  ThumbnailBadge,
   Tooltip,
   UIProvider,
   WistiaLogo,