@wistia/ui 0.19.3 → 0.19.4-beta.32a78d83.3ea9116

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.19.3
+ * @license @wistia/ui v0.19.4-beta.32a78d83.3ea9116
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -2526,7 +2526,9 @@ var differenceInCalendarDays = (dateLeft, dateRight) => {
 
 // src/helpers/dateTime/timeAgoString.ts
 var timeAgoString = (date, { nowAnchor = /* @__PURE__ */ new Date(), includeTime = true } = {}) => {
-  if (isInvalidDate(date)) return "";
+  if (isInvalidDate(date)) {
+    return "";
+  }
   const minutesAgo = (nowAnchor.valueOf() - date.valueOf()) / (secondsInMinute * milisecondsInSecond);
   const minutesAgoRounded = Math.round(minutesAgo);
   const differenceInDays = differenceInCalendarDays(nowAnchor, date);
@@ -8782,7 +8784,9 @@ var getFillViewportStyle = (fillViewport) => {
   return void 0;
 };
 var getFlexStyle = (flexMode) => {
-  if (!flexMode) return null;
+  if (!flexMode) {
+    return null;
+  }
   switch (flexMode) {
     // grows to fill space, won't shrink, starts at 0
     case "grow":
@@ -9509,13 +9513,19 @@ var Banner = ({
   const hasImage = (0, import_type_guards25.isNotNil)(image);
   const shouldShowImage = hasImage && (isVerticalLayout || width >= MIN_IMAGE_WIDTH);
   const iconPosition = (0, import_react31.useMemo)(() => {
-    if ((0, import_type_guards25.isNil)(icon)) return "none";
-    if (isSmallContainer) return shouldShowImage ? "inline" : "above";
+    if ((0, import_type_guards25.isNil)(icon)) {
+      return "none";
+    }
+    if (isSmallContainer) {
+      return shouldShowImage ? "inline" : "above";
+    }
     return prominence === "secondary" ? "inline" : "above";
   }, [icon, isSmallContainer, shouldShowImage, prominence]);
   const hasActions = (0, import_type_guards25.isNotNil)(primaryAction) || (0, import_type_guards25.isNotNil)(secondaryAction);
   const contentDirection = (0, import_react31.useMemo)(() => {
-    if (orientation === "horizontal" && !hasActions) return "row";
+    if (orientation === "horizontal" && !hasActions) {
+      return "row";
+    }
     return !shouldShowImage && prominence === "primary" && !isSmallContainer && !isVerticalLayout ? "row" : "column";
   }, [orientation, shouldShowImage, prominence, isSmallContainer, isVerticalLayout, hasActions]);
   const headingVariant = isSmallContainer || prominence === "primary" ? "heading5" : "heading3";
@@ -10259,8 +10269,12 @@ var sizeLarge = import_styled_components46.css`
   --wui-checkbox-icon-size: 11px;
 `;
 var getSizeCss = (size) => {
-  if (size === "sm") return sizeSmall;
-  if (size === "lg") return sizeLarge;
+  if (size === "sm") {
+    return sizeSmall;
+  }
+  if (size === "lg") {
+    return sizeLarge;
+  }
   return sizeMedium;
 };
 var StyledCheckboxWrapper = import_styled_components46.styled.div`
@@ -10405,7 +10419,9 @@ Checkbox.displayName = "Checkbox_UI";
 // src/components/ClickRegion/ClickRegion.tsx
 var import_react39 = require("react");
 var isClickableElement = (element) => {
-  if (!element) return false;
+  if (!element) {
+    return false;
+  }
   const el = element;
   return el.closest("button") !== null || el.closest("a") !== null || el.closest("input") !== null || el.closest("select") !== null || el.closest("textarea") !== null || el.closest("label") !== null || el.closest("[data-wui-faux-input]") !== null;
 };
@@ -14635,7 +14651,9 @@ var EditableHeading = ({
   const [headingHeight, setHeadingHeight] = (0, import_react63.useState)("60");
   const headingRef = (0, import_react63.useRef)(null);
   const handleSetEditing = (editing) => {
-    if (editingDisabled) return;
+    if (editingDisabled) {
+      return;
+    }
     if (editing && headingRef.current) {
       setHeadingHeight(`${headingRef.current.offsetHeight}`);
     }
@@ -14917,7 +14935,7 @@ var EditableTextDisplayComponent = (0, import_react65.forwardRef)(
     };
     const elementType = renderAs ?? getDefaultTypographicElement(typographicVariant);
     const displayText = value.length > 0 ? value : placeholder;
-    const isPlaceholderVisible = value.length === 0 && !!placeholder;
+    const isPlaceholderVisible = value.length === 0 && Boolean(placeholder);
     if (isEditing) {
       return null;
     }
@@ -15062,7 +15080,9 @@ var EditableTextInput = (props) => {
       }, 0);
     }
   };
-  if (!isEditing) return null;
+  if (!isEditing) {
+    return null;
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime289.jsx)(
     StyledInput2,
     {
@@ -15143,7 +15163,9 @@ var EditableTextSubmitButton = ({
     onClick: handleClick,
     "data-wui-editable-text-submit": true
   };
-  if (!isEditing) return null;
+  if (!isEditing) {
+    return null;
+  }
   return (0, import_react68.cloneElement)(onlyChild, triggerProps);
 };
 
@@ -15173,7 +15195,9 @@ var EditableTextCancelButton = ({
     onClick: handleClick,
     "data-wui-editable-text-cancel": true
   };
-  if (!isEditing) return null;
+  if (!isEditing) {
+    return null;
+  }
   return (0, import_react69.cloneElement)(onlyChild, triggerProps);
 };
 
@@ -15197,7 +15221,9 @@ var EditableTextTrigger = ({
     "data-wui-editable-text-trigger": true,
     ...props
   };
-  if (isEditing) return null;
+  if (isEditing) {
+    return null;
+  }
   return (0, import_react70.cloneElement)(onlyChild, triggerProps);
 };
 
@@ -16622,8 +16648,12 @@ var sizeLarge2 = import_styled_components103.css`
   --wui-radio-icon-size: 10px;
 `;
 var getSizeCss3 = (size) => {
-  if (size === "sm") return sizeSmall2;
-  if (size === "lg") return sizeLarge2;
+  if (size === "sm") {
+    return sizeSmall2;
+  }
+  if (size === "lg") {
+    return sizeLarge2;
+  }
   return sizeMedium2;
 };
 var StyledRadioWrapper = import_styled_components103.styled.div`
@@ -17515,7 +17545,6 @@ var StyledContent3 = (0, import_styled_components112.styled)(import_react_select
   --wui-select-option-bg-hover: var(--wui-color-bg-surface-hover);
 
   overflow: hidden;
-  transform: translateY(8px);
   background-color: var(--wui-select-content-bg);
   border: 1px solid var(--wui-select-content-border);
   border-radius: var(--wui-select-content-border-radius);
@@ -17580,23 +17609,30 @@ var Select = (0, import_react90.forwardRef)(
           ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime320.jsx)(import_react_select.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime320.jsxs)(StyledContent3, { position: "popper", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime320.jsx)(StyledScrollUpButton, { children: /* @__PURE__ */ (0, import_jsx_runtime320.jsx)(
-          Icon,
-          {
-            size: "sm",
-            type: "caret-up"
-          }
-        ) }),
-        /* @__PURE__ */ (0, import_jsx_runtime320.jsx)(import_react_select.Viewport, { children }),
-        /* @__PURE__ */ (0, import_jsx_runtime320.jsx)(StyledScrollDownButton, { children: /* @__PURE__ */ (0, import_jsx_runtime320.jsx)(
-          Icon,
-          {
-            size: "sm",
-            type: "caret-down"
-          }
-        ) })
-      ] }) })
+      /* @__PURE__ */ (0, import_jsx_runtime320.jsx)(import_react_select.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime320.jsxs)(
+        StyledContent3,
+        {
+          position: "popper",
+          sideOffset: 8,
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime320.jsx)(StyledScrollUpButton, { children: /* @__PURE__ */ (0, import_jsx_runtime320.jsx)(
+              Icon,
+              {
+                size: "sm",
+                type: "caret-up"
+              }
+            ) }),
+            /* @__PURE__ */ (0, import_jsx_runtime320.jsx)(import_react_select.Viewport, { children }),
+            /* @__PURE__ */ (0, import_jsx_runtime320.jsx)(StyledScrollDownButton, { children: /* @__PURE__ */ (0, import_jsx_runtime320.jsx)(
+              Icon,
+              {
+                size: "sm",
+                type: "caret-down"
+              }
+            ) })
+          ]
+        }
+      ) })
     ] });
   }
 );
@@ -18559,7 +18595,9 @@ var Thumbnail = (0, import_react97.forwardRef)(
     }, [storyboard]);
     const handleMouseMove = (0, import_react97.useCallback)(
       (mouseEvent) => {
-        if (!isScrubbable) return;
+        if (!isScrubbable) {
+          return;
+        }
         const elem = mouseEvent.currentTarget;
         const relMousePos = getRelativeMousePosition(elem, mouseEvent);
         const newPercent = relMousePos.left / elem.clientWidth;
@@ -18571,7 +18609,9 @@ var Thumbnail = (0, import_react97.forwardRef)(
       [isScrubbable, trackStoryboardLoadStatus]
     );
     const handleMouseOut = (0, import_react97.useCallback)(() => {
-      if (!isScrubbable) return;
+      if (!isScrubbable) {
+        return;
+      }
       setIsMouseOver(false);
       setCursorPosition(null);
     }, [isScrubbable]);