@wistia/ui 0.14.18 → 0.14.19-beta.08cecd35.021a981

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.14.18
+ * @license @wistia/ui v0.14.19-beta.08cecd35.021a981
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -76,17 +76,6 @@ var globalStyleAdjustmentsCss = css`
     list-style: none;
   }
 
-  /* Set shorter line heights on headings and interactive elements */
-  h1,
-  h2,
-  h3,
-  h4,
-  button,
-  input,
-  label {
-    line-height: 1.1;
-  }
-
   /* Balance text wrapping on headings */
 
   /* h1,
@@ -11141,7 +11130,7 @@ var Input = forwardRef15(
     rightIcon,
     ...props
   }, externalRef) => {
-    const internalRef = useRef9();
+    const internalRef = useRef9(null);
     const ref = isNotNil18(externalRef) && isRecord4(externalRef) && "current" in externalRef ? externalRef : internalRef;
     let leftIconToDisplay = leftIcon;
     if (isNil13(leftIcon) && type === "search") {
@@ -11164,7 +11153,7 @@ var Input = forwardRef15(
       if (isNotNil18(props.onFocus)) {
         props.onFocus(event);
       }
-      if (autoSelect && isValidRef(ref) && "current" in ref) {
+      if (autoSelect && type !== "multiline" && ref.current instanceof HTMLInputElement) {
         requestAnimationFrame(() => {
           ref.current?.select();
         });
@@ -16271,12 +16260,16 @@ var getCoverProps = (viewerWidth, viewerHeight, scaledWidth, scaledHeight) => {
     left
   };
 };
-var getFramePosition = (frameIndex, framesPerRow, width, height, scaleFactor) => {
+var getFramePosition = (frameIndex, framesPerRow, width, height, scaleFactor, frameCount, targetHeight) => {
   const col = frameIndex % framesPerRow;
   const row = Math.floor(frameIndex / framesPerRow);
   const imageX = -width * col * scaleFactor;
   const imageY = -height * row * scaleFactor;
-  return `${imageX}px ${imageY}px`;
+  const rows = Math.ceil(frameCount / framesPerRow);
+  const frameHeightInStoryboard = height / rows;
+  const verticalCenterOffset = (targetHeight - frameHeightInStoryboard) / 2;
+  const adjustedY = imageY - verticalCenterOffset;
+  return `${imageX}px ${adjustedY}px`;
 };
 var ThumbnailStoryboardViewer = ({
   storyboardUrl,
@@ -16287,6 +16280,7 @@ var ThumbnailStoryboardViewer = ({
   frameCount,
   percent,
   targetWidth = 200,
+  targetHeight,
   targetAspectRatio,
   scaleFactor = 1,
   framesPerRow = 10,
@@ -16295,10 +16289,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,
@@ -16318,7 +16313,9 @@ var ThumbnailStoryboardViewer = ({
     framesPerRow,
     coverProps.width,
     coverProps.height,
-    scaleFactor
+    scaleFactor,
+    frameCount,
+    calculatedHeight
   );
   const scaleFactorFromAspectRatioFit = coverProps.height / frameHeight;
   const scaledStoryboardWidth = storyboardWidth * scaleFactorFromAspectRatioFit * scaleFactor;