@wistia/ui 0.6.40-beta.71f114cd.1eae331 → 0.6.40-beta.91143d9b.2ec9fa4

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.6.40-beta.71f114cd.1eae331
+ * @license @wistia/ui v0.6.40-beta.91143d9b.2ec9fa4
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -110,8 +110,6 @@ __export(index_exports, {
   Tabs: () => Tabs,
   Tag: () => Tag,
   Text: () => Text,
-  Thumbnail: () => Thumbnail,
-  ThumbnailBadge: () => ThumbnailBadge,
   Tooltip: () => Tooltip,
   UIProvider: () => UIProvider,
   WistiaLogo: () => WistiaLogo,
@@ -12382,257 +12380,6 @@ 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_guards48 = 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_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_components88 = __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_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_guards49.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_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,
@@ -12706,8 +12453,6 @@ Thumbnail.displayName = "Thumbnail";
   Tabs,
   Tag,
   Text,
-  Thumbnail,
-  ThumbnailBadge,
   Tooltip,
   UIProvider,
   WistiaLogo,