@wistia/ui 0.9.3 → 0.9.4-beta.01ba1d3d.5954492

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.9.3
+ * @license @wistia/ui v0.9.4-beta.01ba1d3d.5954492
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -11875,7 +11875,7 @@ var StyledSegmentedControlItem = (0, import_styled_components73.default)(import_
   ${segmentedControlItemStyles}
 `;
 var SegmentedControlItem = (0, import_react60.forwardRef)(
-  ({ disabled, icon, label, "aria-label": ariaLabel, value }, forwardedRef) => {
+  ({ disabled, icon, label, "aria-label": ariaLabel, value, ...otherProps }, forwardedRef) => {
     const selectedValue = useSegmentedControlValue();
     const { setSelectedItemMeasurements } = useSelectedItemStyle();
     const buttonRef = (0, import_react60.useRef)(null);
@@ -11916,6 +11916,7 @@ var SegmentedControlItem = (0, import_react60.forwardRef)(
       StyledSegmentedControlItem,
       {
         ref: combinedRef,
+        ...otherProps,
         $hasLabel: (0, import_type_guards47.isNotNil)(label),
         "aria-label": (0, import_type_guards47.isNotNil)(label) ? void 0 : ariaLabel,
         disabled,
@@ -12885,8 +12886,8 @@ ThumbnailBadge.displayName = "ThumbnailBadge";
 
 // src/components/Thumbnail/Thumbnail.tsx
 var import_react72 = require("react");
-var import_styled_components92 = __toESM(require("styled-components"));
-var import_type_guards55 = require("@wistia/type-guards");
+var import_styled_components93 = __toESM(require("styled-components"));
+var import_type_guards56 = require("@wistia/type-guards");
 
 // src/private/helpers/getBackgroundGradient/getBackgroundGradient.ts
 var import_type_guards54 = require("@wistia/type-guards");
@@ -13021,7 +13022,17 @@ var getBackgroundGradient = (gradientName = void 0) => {
 };
 
 // src/components/Thumbnail/ThumbnailStoryboardViewer.tsx
+var import_styled_components92 = __toESM(require("styled-components"));
+var import_type_guards55 = require("@wistia/type-guards");
 var import_jsx_runtime272 = require("react/jsx-runtime");
+var ScrubLine = import_styled_components92.default.div`
+  position: absolute;
+  top: 0;
+  height: 100%;
+  width: 2px;
+  background-color: var(--wui-color-bg-fill);
+  z-index: 1;
+`;
 var getScaledDimensions = (originalAspectRatio, targetAspectRatio, viewerWidth, viewerHeight) => {
   let scaledHeight = viewerHeight;
   let scaledWidth = viewerWidth;
@@ -13061,7 +13072,7 @@ var ThumbnailStoryboardViewer = ({
   targetAspectRatio,
   scaleFactor = 1,
   framesPerRow = 10,
-  shouldLoadStoryboard = true,
+  cursorPosition,
   ...props
 }) => {
   const originalAspectRatio = frameWidth / frameHeight;
@@ -13097,7 +13108,9 @@ var ThumbnailStoryboardViewer = ({
     storyboardHeight * scaleFactorFromAspectRatioFit * scaleFactor
   );
   const backgroundSize = `${scaledStoryboardWidth}px ${scaledStoryboardHeight}px`;
-  const backgroundImage = shouldLoadStoryboard ? `url(${storyboardUrl})` : "";
+  const backgroundImage = `url(${storyboardUrl})`;
+  const showScrubLine = (0, import_type_guards55.isNotNil)(cursorPosition);
+  const scrubLinePosition = (0, import_type_guards55.isNotNil)(cursorPosition) ? `${cursorPosition - 1}px` : "0";
   const viewerStyles = {
     position: "relative",
     overflow: "hidden",
@@ -13114,24 +13127,34 @@ var ThumbnailStoryboardViewer = ({
     backgroundPosition,
     backgroundSize
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime272.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime272.jsxs)(
     "div",
     {
       ...props,
       style: viewerStyles,
-      children: /* @__PURE__ */ (0, import_jsx_runtime272.jsx)("div", { style: storyboardStyles })
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime272.jsx)("div", { style: storyboardStyles }),
+        showScrubLine ? /* @__PURE__ */ (0, import_jsx_runtime272.jsx)(
+          ScrubLine,
+          {
+            style: {
+              left: scrubLinePosition
+            }
+          }
+        ) : null
+      ]
     }
   );
 };
 
 // src/components/Thumbnail/Thumbnail.tsx
 var import_jsx_runtime273 = require("react/jsx-runtime");
-var WideThumbnailImage = import_styled_components92.default.img`
+var WideThumbnailImage = import_styled_components93.default.img`
   height: 100%;
   object-fit: cover;
   width: 100%;
 `;
-var SquareThumbnailImage = import_styled_components92.default.img`
+var SquareThumbnailImage = import_styled_components93.default.img`
   backdrop-filter: blur(8px);
   object-fit: contain;
   width: 100%;
@@ -13156,11 +13179,11 @@ var ThumbnailImage = ({ thumbnailImageType, thumbnailUrl }) => {
     }
   );
 };
-var StyledThumbnail = import_styled_components92.default.div`
-  background-image: ${({ $backgroundUrl }) => (0, import_type_guards55.isNotNil)($backgroundUrl) ? `url('${$backgroundUrl}')` : void 0};
+var StyledThumbnail = import_styled_components93.default.div`
+  background-image: ${({ $backgroundUrl }) => (0, import_type_guards56.isNotNil)($backgroundUrl) ? `url('${$backgroundUrl}')` : void 0};
   ${({ $backgroundUrl, $gradientBackground }) => (
   // if we don't have $backgroundUrl show a gradient
-  (0, import_type_guards55.isNil)($backgroundUrl) ? getBackgroundGradient($gradientBackground) : void 0
+  (0, import_type_guards56.isNil)($backgroundUrl) ? getBackgroundGradient($gradientBackground) : void 0
 )};
   background-position: center center;
   background-size: cover;
@@ -13169,7 +13192,7 @@ var StyledThumbnail = import_styled_components92.default.div`
   overflow: hidden;
   position: relative;
   width: ${({ $width }) => $width};
-  ${({ $isScrubbable }) => $isScrubbable && "cursor: ew-resize;"}
+  ${({ $isScrubbable }) => $isScrubbable && "cursor: pointer;"}
 
   &,
   img {
@@ -13200,11 +13223,12 @@ var Thumbnail = (0, import_react72.forwardRef)(
     const [isMouseOver, setIsMouseOver] = (0, import_react72.useState)(false);
     const [isStoryboardReady, setIsStoryboardReady] = (0, import_react72.useState)(false);
     const storyboardElementRef = (0, import_react72.useRef)(null);
+    const [cursorPosition, setCursorPosition] = (0, import_react72.useState)(null);
     const backgroundUrl = (0, import_react72.useMemo)(
-      () => thumbnailImageType === "square" && (0, import_type_guards55.isNotNil)(thumbnailUrl) ? thumbnailUrl : void 0,
+      () => thumbnailImageType === "square" && (0, import_type_guards56.isNotNil)(thumbnailUrl) ? thumbnailUrl : void 0,
       [thumbnailImageType, thumbnailUrl]
     );
-    const isScrubbable = (0, import_type_guards55.isNotNil)(storyboard);
+    const isScrubbable = (0, import_type_guards56.isNotNil)(storyboard);
     const trackStoryboardLoadStatus = (0, import_react72.useCallback)(() => {
       if (storyboardElementRef.current || !storyboard) {
         return storyboardElementRef.current;
@@ -13223,6 +13247,7 @@ var Thumbnail = (0, import_react72.forwardRef)(
         const newPercent = relMousePos.left / elem.clientWidth;
         trackStoryboardLoadStatus();
         setPercent(newPercent);
+        setCursorPosition(relMousePos.left);
         setIsMouseOver(true);
       },
       [isScrubbable, trackStoryboardLoadStatus]
@@ -13230,12 +13255,13 @@ var Thumbnail = (0, import_react72.forwardRef)(
     const handleMouseOut = (0, import_react72.useCallback)(() => {
       if (!isScrubbable) return;
       setIsMouseOver(false);
+      setCursorPosition(null);
     }, [isScrubbable]);
     const shouldRenderStoryboard = (0, import_react72.useMemo)(() => {
       return Boolean(isScrubbable && isMouseOver && isStoryboardReady);
     }, [isScrubbable, isMouseOver, isStoryboardReady]);
     const renderStoryboard = (0, import_react72.useCallback)(() => {
-      if (!storyboard || (0, import_type_guards55.isUndefined)(height) || (0, import_type_guards55.isEmptyString)(height)) return null;
+      if (!storyboard || (0, import_type_guards56.isUndefined)(height) || (0, import_type_guards56.isEmptyString)(height)) return null;
       const {
         url,
         width: sbWidth,
@@ -13245,10 +13271,12 @@ var Thumbnail = (0, import_react72.forwardRef)(
         frameCount,
         aspectRatio
       } = storyboard;
-      const targetWidth = (0, import_type_guards55.isString)(width) ? parseInt(width, 10) : Number(width);
+      const targetWidth = (0, import_type_guards56.isString)(width) ? parseInt(width, 10) : Number(width);
+      const effectiveCursorPosition = isStoryboardReady ? cursorPosition : null;
       return /* @__PURE__ */ (0, import_jsx_runtime273.jsx)(
         ThumbnailStoryboardViewer,
         {
+          cursorPosition: effectiveCursorPosition,
           frameCount,
           frameHeight,
           frameWidth,
@@ -13260,11 +13288,11 @@ var Thumbnail = (0, import_react72.forwardRef)(
           targetWidth
         }
       );
-    }, [storyboard, percent, width, height]);
+    }, [storyboard, percent, width, height, cursorPosition, isStoryboardReady]);
     let thumbnailContent = null;
     if (shouldRenderStoryboard) {
       thumbnailContent = renderStoryboard();
-    } else if ((0, import_type_guards55.isNotNil)(thumbnailUrl)) {
+    } else if ((0, import_type_guards56.isNotNil)(thumbnailUrl)) {
       thumbnailContent = /* @__PURE__ */ (0, import_jsx_runtime273.jsx)(
         ThumbnailImage,
         {
@@ -13289,7 +13317,7 @@ var Thumbnail = (0, import_react72.forwardRef)(
         onMouseOut: handleMouseOut,
         role: "presentation",
         children: [
-          (0, import_type_guards55.isNotNil)(children) ? children : null,
+          (0, import_type_guards56.isNotNil)(children) ? children : null,
           thumbnailContent
         ]
       }
@@ -13300,13 +13328,13 @@ Thumbnail.displayName = "Thumbnail";
 
 // src/components/ThumbnailCollage/ThumbnailCollage.tsx
 var import_react73 = __toESM(require("react"));
-var import_styled_components93 = __toESM(require("styled-components"));
-var import_type_guards56 = require("@wistia/type-guards");
+var import_styled_components94 = __toESM(require("styled-components"));
+var import_type_guards57 = require("@wistia/type-guards");
 var import_jsx_runtime274 = (
   // ThumbnailCollage will fallback to a Thumbnail with a gradient background if no children are provided
   require("react/jsx-runtime")
 );
-var StyledThumbnailCollage = import_styled_components93.default.div`
+var StyledThumbnailCollage = import_styled_components94.default.div`
   display: grid;
   gap: var(--wui-space-01);
   width: 100%;
@@ -13381,7 +13409,7 @@ var ThumbnailCollage = ({
 }) => {
   const thumbnailArray = import_react73.default.Children.toArray(children);
   const truncatedThumbnails = thumbnailArray.slice(0, 3);
-  const thumbnails = (0, import_type_guards56.isNonEmptyArray)(thumbnailArray) ? truncatedThumbnails.map((child) => {
+  const thumbnails = (0, import_type_guards57.isNonEmptyArray)(thumbnailArray) ? truncatedThumbnails.map((child) => {
     return import_react73.default.cloneElement(child, {
       ...child.props,
       children: void 0
@@ -13408,8 +13436,8 @@ var ThumbnailCollage = ({
 };
 
 // src/components/WistiaLogo/WistiaLogo.tsx
-var import_styled_components94 = __toESM(require("styled-components"));
-var import_type_guards57 = require("@wistia/type-guards");
+var import_styled_components95 = __toESM(require("styled-components"));
+var import_type_guards58 = require("@wistia/type-guards");
 var import_jsx_runtime275 = require("react/jsx-runtime");
 var renderBrandmark = (brandmarkColor, iconOnly) => {
   if (iconOnly) {
@@ -13450,7 +13478,7 @@ var computedViewBox = (iconOnly) => {
   }
   return "0 0 144 31.47";
 };
-var WistiaLogoComponent = import_styled_components94.default.svg`
+var WistiaLogoComponent = import_styled_components95.default.svg`
   height: ${({ height }) => `${height}px`};
 
   /* ensure it will always fit on mobile */
@@ -13466,12 +13494,12 @@ var WistiaLogoComponent = import_styled_components94.default.svg`
   ${({ $opticallyCentered, $iconOnly }) => {
   if ($opticallyCentered) {
     if ($iconOnly) {
-      return import_styled_components94.css`
+      return import_styled_components95.css`
           aspect-ratio: 1;
           padding: 11.85% 3.12% 13.91%;
         `;
     }
-    return import_styled_components94.css`
+    return import_styled_components95.css`
         aspect-ratio: 127 / 32;
       `;
   }
@@ -13522,7 +13550,7 @@ var WistiaLogo = ({
       ...props,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime275.jsx)("title", { children: title }),
-        (0, import_type_guards57.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime275.jsx)("desc", { children: description }) : null,
+        (0, import_type_guards58.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime275.jsx)("desc", { children: description }) : null,
         renderBrandmark(brandmarkColor, iconOnly),
         renderLogotype(logotypeColor, iconOnly)
       ]
@@ -13533,18 +13561,18 @@ var WistiaLogo = ({
 WistiaLogo.displayName = "WistiaLogo";
 
 // src/components/List/List.tsx
-var import_type_guards59 = require("@wistia/type-guards");
-var import_styled_components96 = __toESM(require("styled-components"));
+var import_type_guards60 = require("@wistia/type-guards");
+var import_styled_components97 = __toESM(require("styled-components"));
 
 // src/components/List/ListItem.tsx
-var import_styled_components95 = __toESM(require("styled-components"));
-var import_type_guards58 = require("@wistia/type-guards");
+var import_styled_components96 = __toESM(require("styled-components"));
+var import_type_guards59 = require("@wistia/type-guards");
 var import_jsx_runtime276 = require("react/jsx-runtime");
-var ListItemComponent = import_styled_components95.default.li`
+var ListItemComponent = import_styled_components96.default.li`
   margin-bottom: var(--wui-space-02);
 `;
 var ListItem = ({ children }) => {
-  if ((0, import_type_guards58.isNil)(children)) {
+  if ((0, import_type_guards59.isNil)(children)) {
     return null;
   }
   return /* @__PURE__ */ (0, import_jsx_runtime276.jsx)(ListItemComponent, { children });
@@ -13553,7 +13581,7 @@ ListItem.displayName = "ListItem";
 
 // src/components/List/List.tsx
 var import_jsx_runtime277 = require("react/jsx-runtime");
-var spacesStyle = import_styled_components96.css`
+var spacesStyle = import_styled_components97.css`
   overflow: hidden;
   padding-left: 0;
   vertical-align: bottom;
@@ -13575,7 +13603,7 @@ var spacesStyle = import_styled_components96.css`
     }
   }
 `;
-var commasStyle = import_styled_components96.css`
+var commasStyle = import_styled_components97.css`
   ${spacesStyle};
 
   li {
@@ -13585,7 +13613,7 @@ var commasStyle = import_styled_components96.css`
     }
   }
 `;
-var slashesStyle = import_styled_components96.css`
+var slashesStyle = import_styled_components97.css`
   ${spacesStyle};
 
   li {
@@ -13596,7 +13624,7 @@ var slashesStyle = import_styled_components96.css`
     }
   }
 `;
-var breadcrumbsStyle = import_styled_components96.css`
+var breadcrumbsStyle = import_styled_components97.css`
   ${spacesStyle};
 
   li {
@@ -13607,11 +13635,11 @@ var breadcrumbsStyle = import_styled_components96.css`
     }
   }
 `;
-var unbulletedStyle = import_styled_components96.css`
+var unbulletedStyle = import_styled_components97.css`
   list-style: none;
   padding-left: 0;
 `;
-var ListComponent = import_styled_components96.default.ul`
+var ListComponent = import_styled_components97.default.ul`
   list-style-position: outside;
   margin: 0 0 var(--wui-space-01);
   padding: 0 0 0 var(--wui-space-04);
@@ -13674,13 +13702,13 @@ var List = ({
   ...otherProps
 }) => {
   const listVariant = variant ?? "bullets";
-  if ((0, import_type_guards59.isNotNil)(children)) {
+  if ((0, import_type_guards60.isNotNil)(children)) {
     if (Array.isArray(children) && !children.length) {
       return null;
     }
     return renderListComponent(children, listVariant, otherProps);
   }
-  if ((0, import_type_guards59.isNotNil)(items)) {
+  if ((0, import_type_guards60.isNotNil)(items)) {
     if (!items.length) {
       return null;
     }