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

package/dist/index.cjs

@@ -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.
  *
@@ -250,17 +250,6 @@ var globalStyleAdjustmentsCss = import_styled_components.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,
@@ -11300,7 +11289,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 +11312,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();
         });
@@ -16384,12 +16373,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,
@@ -16400,6 +16393,7 @@ var ThumbnailStoryboardViewer = ({
   frameCount,
   percent,
   targetWidth = 200,
+  targetHeight,
   targetAspectRatio,
   scaleFactor = 1,
   framesPerRow = 10,
@@ -16408,10 +16402,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,
@@ -16431,7 +16426,9 @@ var ThumbnailStoryboardViewer = ({
     framesPerRow,
     coverProps.width,
     coverProps.height,
-    scaleFactor
+    scaleFactor,
+    frameCount,
+    calculatedHeight
   );
   const scaleFactorFromAspectRatioFit = coverProps.height / frameHeight;
   const scaledStoryboardWidth = storyboardWidth * scaleFactorFromAspectRatioFit * scaleFactor;