@wistia/ui 0.15.2-beta.bca1a865.2d7a120 → 0.15.2-beta.f16ddbc2.511b369

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.15.2-beta.bca1a865.2d7a120
+ * @license @wistia/ui v0.15.2-beta.f16ddbc2.511b369
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -2992,11 +2992,26 @@ var useForceUpdate = () => {
 var import_react11 = require("react");
 var useIsHovered = () => {
   const [isHovered, setIsHovered] = (0, import_react11.useState)(false);
-  const onFocus = () => setIsHovered(true);
-  const onMouseEnter = () => setIsHovered(true);
-  const onMouseMove = () => setIsHovered(true);
-  const onBlur = () => setIsHovered(false);
-  const onMouseLeave = () => setIsHovered(false);
+  const onFocus = (event) => {
+    if (event.target !== event.currentTarget) return;
+    setIsHovered(true);
+  };
+  const onMouseEnter = (event) => {
+    if (event.target !== event.currentTarget) return;
+    setIsHovered(true);
+  };
+  const onMouseMove = (event) => {
+    if (event.target !== event.currentTarget) return;
+    setIsHovered(true);
+  };
+  const onBlur = (event) => {
+    if (event.target !== event.currentTarget) return;
+    setIsHovered(false);
+  };
+  const onMouseLeave = (event) => {
+    if (event.target !== event.currentTarget) return;
+    setIsHovered(false);
+  };
   const hoverProps = {
     onFocus,
     onMouseEnter,
@@ -16498,7 +16513,7 @@ var Container10 = import_styled_components106.default.div`
   flex: 1 1 auto;
 `;
 var ScrollContainer = import_styled_components106.default.div`
-  overflow: auto;
+  overflow: ${({ $locked }) => $locked ? "hidden" : "auto"};
   height: 100%;
   width: 100%;
 `;
@@ -16538,7 +16553,7 @@ var ShadowAtRight = (0, import_styled_components106.default)(Shadow)`
   width: 0;
 `;
 var ScrollArea = (0, import_react85.forwardRef)(
-  ({ children, onScroll, style, ...props }, forwardedRef) => {
+  ({ children, onScroll, style, locked = false, ...props }, forwardedRef) => {
     const scrollContainerRefInternal = (0, import_react85.useRef)(null);
     const [shadowState, setShadowState] = (0, import_react85.useState)({
       canScrollUp: false,
@@ -16579,6 +16594,7 @@ var ScrollArea = (0, import_react85.forwardRef)(
         ScrollContainer,
         {
           ref: scrollContainerRef,
+          $locked: locked,
           onScroll: onScrollScrollContainer,
           ...props,
           children
@@ -17790,14 +17806,6 @@ var ThumbnailStoryboardViewer = ({
 
 // src/components/Thumbnail/Thumbnail.tsx
 var import_jsx_runtime325 = require("react/jsx-runtime");
-var WIDE_ASPECT_RATIO = 16 / 9;
-var SQUARE_ASPECT_RATIO = 1;
-var getAspectRatioValue = (aspectRatio) => {
-  if (aspectRatio === "square") {
-    return SQUARE_ASPECT_RATIO;
-  }
-  return WIDE_ASPECT_RATIO;
-};
 var WideThumbnailImage = import_styled_components126.default.img`
   height: 100%;
   object-fit: cover;
@@ -17836,7 +17844,7 @@ var StyledThumbnail = import_styled_components126.default.div`
 )};
   background-position: center center;
   background-size: cover;
-  aspect-ratio: ${({ $aspectRatio }) => $aspectRatio};
+  aspect-ratio: 16 / 9;
   display: flex;
   overflow: hidden;
   position: relative;
@@ -17845,10 +17853,7 @@ var StyledThumbnail = import_styled_components126.default.div`
 
   &,
   img {
-    border-radius: ${({ $aspectRatio }) => {
-  const heightPercentage = 8 / $aspectRatio;
-  return `calc(8% * (1 / ${$aspectRatio})) / ${heightPercentage}%`;
-}};
+    border-radius: calc(8% * (9 / 16)) / 8%;
   }
 `;
 var StoryboardRenderer = ({
@@ -17856,10 +17861,17 @@ var StoryboardRenderer = ({
   width,
   percent,
   cursorPosition,
-  isStoryboardReady,
-  aspectRatio
+  isStoryboardReady
 }) => {
-  const { url, width: sbWidth, height: sbHeight, frameHeight, frameWidth, frameCount } = storyboard;
+  const {
+    url,
+    width: sbWidth,
+    height: sbHeight,
+    frameHeight,
+    frameWidth,
+    frameCount,
+    aspectRatio
+  } = storyboard;
   const targetWidth = (0, import_type_guards73.isString)(width) ? parseInt(width, 10) : Number(width);
   const effectiveCursorPosition = isStoryboardReady ? cursorPosition : null;
   return /* @__PURE__ */ (0, import_jsx_runtime325.jsx)(
@@ -17873,7 +17885,7 @@ var StoryboardRenderer = ({
       storyboardHeight: sbHeight,
       storyboardUrl: url,
       storyboardWidth: sbWidth,
-      targetAspectRatio: getAspectRatioValue(aspectRatio),
+      targetAspectRatio: aspectRatio,
       targetWidth
     }
   );
@@ -17896,7 +17908,6 @@ var Thumbnail = (0, import_react100.forwardRef)(
     children,
     storyboard,
     height,
-    aspectRatio = "wide",
     ...props
   }, ref) => {
     const [percent, setPercent] = (0, import_react100.useState)(0);
@@ -17948,7 +17959,6 @@ var Thumbnail = (0, import_react100.forwardRef)(
       thumbnailContent = /* @__PURE__ */ (0, import_jsx_runtime325.jsx)(
         StoryboardRenderer,
         {
-          aspectRatio,
           cursorPosition,
           isStoryboardReady,
           percent,
@@ -17972,7 +17982,6 @@ var Thumbnail = (0, import_react100.forwardRef)(
       {
         ref,
         ...props,
-        $aspectRatio: getAspectRatioValue(aspectRatio),
         $backgroundUrl: backgroundUrl,
         $gradientBackground: gradientBackground,
         $isScrubbable: isScrubbable,