@wistia/ui 0.14.18 → 0.14.19-beta.458638b3.28f2f7e

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.14.18
+ * @license @wistia/ui v0.14.19-beta.458638b3.28f2f7e
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -11300,7 +11300,7 @@ var Input = (0, import_react47.forwardRef)(
     rightIcon,
     ...props
   }, externalRef) => {
-    const internalRef = (0, import_react47.useRef)();
+    const internalRef = (0, import_react47.useRef)(null);
     const ref = (0, import_type_guards35.isNotNil)(externalRef) && (0, import_type_guards35.isRecord)(externalRef) && "current" in externalRef ? externalRef : internalRef;
     let leftIconToDisplay = leftIcon;
     if ((0, import_type_guards35.isNil)(leftIcon) && type === "search") {
@@ -11323,7 +11323,7 @@ var Input = (0, import_react47.forwardRef)(
       if ((0, import_type_guards35.isNotNil)(props.onFocus)) {
         props.onFocus(event);
       }
-      if (autoSelect && isValidRef(ref) && "current" in ref) {
+      if (autoSelect && type !== "multiline" && ref.current instanceof HTMLInputElement) {
         requestAnimationFrame(() => {
           ref.current?.select();
         });
@@ -16400,6 +16400,7 @@ var ThumbnailStoryboardViewer = ({
   frameCount,
   percent,
   targetWidth = 200,
+  targetHeight,
   targetAspectRatio,
   scaleFactor = 1,
   framesPerRow = 10,
@@ -16408,10 +16409,11 @@ var ThumbnailStoryboardViewer = ({
 }) => {
   const originalAspectRatio = frameWidth / frameHeight;
   const effectiveTargetAspectRatio = targetAspectRatio ?? originalAspectRatio;
-  const targetHeight = targetWidth / effectiveTargetAspectRatio;
+  const calculatedHeight = targetWidth / effectiveTargetAspectRatio;
+  const finalHeight = targetHeight ?? calculatedHeight;
   const viewerDimensions = {
     viewerWidth: targetWidth,
-    viewerHeight: targetHeight
+    viewerHeight: finalHeight
   };
   const { scaledHeight, scaledWidth } = getScaledDimensions(
     originalAspectRatio,
@@ -16426,13 +16428,19 @@ var ThumbnailStoryboardViewer = ({
     scaledHeight
   );
   const frameIndex = Math.floor(percent * frameCount);
-  const backgroundPosition = getFramePosition(
+  const framePosition = getFramePosition(
     frameIndex,
     framesPerRow,
     coverProps.width,
     coverProps.height,
     scaleFactor
   );
+  const rows = Math.ceil(frameCount / framesPerRow);
+  const frameHeightInStoryboard = coverProps.height / rows;
+  const verticalCenterOffset = (calculatedHeight - frameHeightInStoryboard) / 2;
+  const [x, y] = framePosition.split(" ");
+  const adjustedY = `calc(${y} - ${verticalCenterOffset}px)`;
+  const backgroundPosition = `${x} ${adjustedY}`;
   const scaleFactorFromAspectRatioFit = coverProps.height / frameHeight;
   const scaledStoryboardWidth = storyboardWidth * scaleFactorFromAspectRatioFit * scaleFactor;
   const scaledStoryboardHeight = Math.floor(