@wistia/ui 0.15.13 → 0.15.14-beta.50e89a95.396fb5b

package/dist/index.d.mts

@@ -1634,6 +1634,10 @@ declare const Combobox: ({ placeholder, value, onChange, searchValue, onSearchVa
 type ContextMenuProps = {
     children: ReactNode;
     onRequestClose?: () => void;
+    /**
+     * If the menu is compact
+     */
+    compact?: boolean;
 } & ({
     position: {
         x: number;
@@ -1652,7 +1656,7 @@ type ContextMenuProps = {
  * 1. By providing a `triggerRef`, which will render the menu when the referenced element is right-clicked.
  * 2. By providing a `position` prop, which will render the menu at the specified coordinates.
  */
-declare const ContextMenu: ({ position, triggerRef, children, side, onRequestClose, }: ContextMenuProps) => react_jsx_runtime.JSX.Element | null;
+declare const ContextMenu: ({ position, triggerRef, children, side, onRequestClose, compact, }: ContextMenuProps) => react_jsx_runtime.JSX.Element | null;
 
 type DataCardProps = ComponentPropsWithoutRef<'div'> & Partial<Pick<ButtonAsLinkProps, 'beforeAction' | 'disabled' | 'href' | 'onClick' | 'type'>> & {
     /**
@@ -2369,6 +2373,10 @@ type FormFieldProps = ComponentPropsWithoutRef<'div'> & {
      * The name attribute of the field. It will map to the form data passed into `useFormState`.
      */
     name: string;
+    /**
+     * Use if label describes a required form component
+     */
+    required?: boolean;
     /**
      * A value that overrides the basic value. This should pair with `onChange`.
      */
@@ -2382,7 +2390,7 @@ type FormFieldProps = ComponentPropsWithoutRef<'div'> & {
  * FormField is a compound component that combines a label, form control, and optional description and error message.
  */
 declare const FormField: {
-    ({ children, description, error, id, label, labelPosition, name, value, ...props }: FormFieldProps): JSX$1.Element;
+    ({ children, description, error, id, label, labelPosition, name, required, value, ...props }: FormFieldProps): JSX$1.Element;
     displayName: string;
 };
 
@@ -3075,6 +3083,10 @@ type ModalProps = ComponentPropsWithoutRef<'div'> & {
      * Determines if the title is visible
      */
     hideTitle?: boolean;
+    /**
+     * The maximum width the modal can be
+     */
+    maxWidth?: string;
     /**
      * When the Modal is dismissed, this function will be called. You'll typically want to set the
      * state of `isOpen` to false here
@@ -3123,6 +3135,10 @@ declare const Modal: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProp
      * Determines if the title is visible
      */
     hideTitle?: boolean;
+    /**
+     * The maximum width the modal can be
+     */
+    maxWidth?: string;
     /**
      * When the Modal is dismissed, this function will be called. You'll typically want to set the
      * state of `isOpen` to false here

package/dist/index.d.ts

@@ -1634,6 +1634,10 @@ declare const Combobox: ({ placeholder, value, onChange, searchValue, onSearchVa
 type ContextMenuProps = {
     children: ReactNode;
     onRequestClose?: () => void;
+    /**
+     * If the menu is compact
+     */
+    compact?: boolean;
 } & ({
     position: {
         x: number;
@@ -1652,7 +1656,7 @@ type ContextMenuProps = {
  * 1. By providing a `triggerRef`, which will render the menu when the referenced element is right-clicked.
  * 2. By providing a `position` prop, which will render the menu at the specified coordinates.
  */
-declare const ContextMenu: ({ position, triggerRef, children, side, onRequestClose, }: ContextMenuProps) => react_jsx_runtime.JSX.Element | null;
+declare const ContextMenu: ({ position, triggerRef, children, side, onRequestClose, compact, }: ContextMenuProps) => react_jsx_runtime.JSX.Element | null;
 
 type DataCardProps = ComponentPropsWithoutRef<'div'> & Partial<Pick<ButtonAsLinkProps, 'beforeAction' | 'disabled' | 'href' | 'onClick' | 'type'>> & {
     /**
@@ -2369,6 +2373,10 @@ type FormFieldProps = ComponentPropsWithoutRef<'div'> & {
      * The name attribute of the field. It will map to the form data passed into `useFormState`.
      */
     name: string;
+    /**
+     * Use if label describes a required form component
+     */
+    required?: boolean;
     /**
      * A value that overrides the basic value. This should pair with `onChange`.
      */
@@ -2382,7 +2390,7 @@ type FormFieldProps = ComponentPropsWithoutRef<'div'> & {
  * FormField is a compound component that combines a label, form control, and optional description and error message.
  */
 declare const FormField: {
-    ({ children, description, error, id, label, labelPosition, name, value, ...props }: FormFieldProps): JSX$1.Element;
+    ({ children, description, error, id, label, labelPosition, name, required, value, ...props }: FormFieldProps): JSX$1.Element;
     displayName: string;
 };
 
@@ -3075,6 +3083,10 @@ type ModalProps = ComponentPropsWithoutRef<'div'> & {
      * Determines if the title is visible
      */
     hideTitle?: boolean;
+    /**
+     * The maximum width the modal can be
+     */
+    maxWidth?: string;
     /**
      * When the Modal is dismissed, this function will be called. You'll typically want to set the
      * state of `isOpen` to false here
@@ -3123,6 +3135,10 @@ declare const Modal: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProp
      * Determines if the title is visible
      */
     hideTitle?: boolean;
+    /**
+     * The maximum width the modal can be
+     */
+    maxWidth?: string;
     /**
      * When the Modal is dismissed, this function will be called. You'll typically want to set the
      * state of `isOpen` to false here

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.15.13
+ * @license @wistia/ui v0.15.14-beta.50e89a95.396fb5b
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -12877,6 +12877,7 @@ var Combobox2 = ({
 // src/components/ContextMenu/ContextMenu.tsx
 import { isNil as isNil16, isNotNil as isNotNil24 } from "@wistia/type-guards";
 import { useEffect as useEffect16, useState as useState17 } from "react";
+import { createPortal } from "react-dom";
 
 // src/components/Menu/Menu.tsx
 import {
@@ -13558,7 +13559,8 @@ var ContextMenu = ({
   triggerRef,
   children,
   side = "bottom",
-  onRequestClose = () => null
+  onRequestClose = () => null,
+  compact = false
 }) => {
   const [isRightClicked, setIsRightClicked] = useState17(false);
   const [menuPosition, setMenuPosition] = useState17(position ?? { x: 0, y: 0 });
@@ -13578,9 +13580,13 @@ var ContextMenu = ({
     return () => null;
   }, [position, triggerRef]);
   const isOpen = isNotNil24(position) || isRightClicked;
-  return isOpen ? /* @__PURE__ */ jsx267(
+  if (!isOpen) {
+    return null;
+  }
+  const menu = /* @__PURE__ */ jsx267(
     Menu,
     {
+      compact,
       isOpen,
       onOpenChange: (next) => {
         setIsRightClicked(next);
@@ -13606,7 +13612,11 @@ var ContextMenu = ({
       ),
       children
     }
-  ) : null;
+  );
+  if (isNotNil24(triggerRef)) {
+    return createPortal(menu, document.body);
+  }
+  return menu;
 };
 
 // src/components/DataCards/DataCard.tsx
@@ -14777,6 +14787,7 @@ var FormField = ({
   label,
   labelPosition,
   name,
+  required = false,
   value,
   ...props
 }) => {
@@ -14826,7 +14837,14 @@ var FormField = ({
       ...props,
       "data-label-position": labelPosition ?? formState.labelPosition,
       children: [
-        !isIntegratedLabel && /* @__PURE__ */ jsx283(Label, { htmlFor: computedId, children: label }),
+        !isIntegratedLabel && /* @__PURE__ */ jsx283(
+          Label,
+          {
+            htmlFor: computedId,
+            required,
+            children: label
+          }
+        ),
         isNotNil28(description) ? /* @__PURE__ */ jsx283(FormControlLabelDescription, { id: descriptionId, children: description }) : null,
         cloneElement8(children, childProps),
         isNotNil28(computedError) ? /* @__PURE__ */ jsxs46(Fragment9, { children: [
@@ -15356,7 +15374,7 @@ Mark.displayName = "Mark_UI";
 import { forwardRef as forwardRef26 } from "react";
 import styled78 from "styled-components";
 import { Root as DialogRoot, Portal as DialogPortal } from "@radix-ui/react-dialog";
-import { isNotNil as isNotNil32 } from "@wistia/type-guards";
+import { isNotNil as isNotNil33 } from "@wistia/type-guards";
 
 // src/components/Modal/ModalHeader.tsx
 import styled75 from "styled-components";
@@ -15432,6 +15450,7 @@ var ModalHeader = ({
 import { forwardRef as forwardRef25 } from "react";
 import styled76, { css as css38, keyframes as keyframes4 } from "styled-components";
 import { Content as DialogContent } from "@radix-ui/react-dialog";
+import { isNotNil as isNotNil32 } from "@wistia/type-guards";
 
 // src/private/hooks/useFocusRestore/useFocusRestore.ts
 import { useRef as useRef20, useEffect as useEffect19 } from "react";
@@ -15569,9 +15588,14 @@ var StyledModalContent = styled76(DialogContent)`
     position: fixed;
     top: unset;
     left: unset;
-    width: ${({ $width }) => $width ?? DEFAULT_MODAL_WIDTH};
+    width: ${({ $width, $maxWidth }) => {
+  if (isNotNil32($maxWidth)) {
+    return "auto";
+  }
+  return $width ?? DEFAULT_MODAL_WIDTH;
+}};
     min-width: ${({ $width }) => $width ?? DEFAULT_MODAL_WIDTH};
-    max-width: var(--wui-modal-max-width);
+    max-width: ${({ $maxWidth }) => $maxWidth ?? "var(--wui-modal-max-width)"};
     border-radius: var(--wui-border-radius-03);
     animation-duration: var(--wui-motion-duration-03);
     animation-timing-function: var(--wui-motion-ease-out);
@@ -15580,12 +15604,13 @@ var StyledModalContent = styled76(DialogContent)`
   }
 `;
 var ModalContent = forwardRef25(
-  ({ width, positionVariant = "fixed-top", children, ...props }, ref) => {
+  ({ width, positionVariant = "fixed-top", maxWidth, children, ...props }, ref) => {
     useFocusRestore();
     return /* @__PURE__ */ jsx294(
       StyledModalContent,
       {
         ref,
+        $maxWidth: maxWidth,
         $positionVariant: positionVariant,
         $width: width,
         "aria-describedby": void 0,
@@ -15655,6 +15680,7 @@ var Modal = forwardRef26(
     hideTitle = false,
     initialFocusRef,
     isOpen,
+    maxWidth,
     onRequestClose,
     positionVariant = "centered",
     title,
@@ -15665,7 +15691,7 @@ var Modal = forwardRef26(
       DialogRoot,
       {
         onOpenChange: (open2) => {
-          if (!open2 && isNotNil32(onRequestClose)) {
+          if (!open2 && isNotNil33(onRequestClose)) {
             onRequestClose();
           }
         },
@@ -15676,8 +15702,9 @@ var Modal = forwardRef26(
             ModalContent,
             {
               ref,
+              maxWidth,
               onOpenAutoFocus: (event) => {
-                if (isNotNil32(initialFocusRef) && initialFocusRef.current) {
+                if (isNotNil33(initialFocusRef) && initialFocusRef.current) {
                   event.preventDefault();
                   requestAnimationFrame(() => {
                     initialFocusRef.current?.focus();
@@ -15689,7 +15716,7 @@ var Modal = forwardRef26(
               ...props,
               children: [
                 /* @__PURE__ */ jsx295(ModalScrollArea, { children: /* @__PURE__ */ jsx295(ModalBody, { children }) }),
-                isNotNil32(footer) ? /* @__PURE__ */ jsx295(ModalFooter, { children: footer }) : null,
+                isNotNil33(footer) ? /* @__PURE__ */ jsx295(ModalFooter, { children: footer }) : null,
                 hideCloseButton && hideTitle ? null : /* @__PURE__ */ jsx295(
                   ModalHeader,
                   {
@@ -15735,9 +15762,9 @@ import { Root as Root2, Trigger as Trigger2, Portal, Content as Content2, Close
 import styled80, { css as css40 } from "styled-components";
 
 // src/private/helpers/getControls/getControlProps.tsx
-import { isNotNil as isNotNil33 } from "@wistia/type-guards";
+import { isNotNil as isNotNil34 } from "@wistia/type-guards";
 var getControlProps = (isOpen, onOpenChange) => {
-  return isNotNil33(onOpenChange) && isNotNil33(isOpen) ? { open: isOpen, onOpenChange } : {};
+  return isNotNil34(onOpenChange) && isNotNil34(isOpen) ? { open: isOpen, onOpenChange } : {};
 };
 
 // src/components/Popover/PopoverArrow.tsx
@@ -15893,7 +15920,7 @@ Popover.displayName = "Popover_UI";
 // src/components/ProgressBar/ProgressBar.tsx
 import styled81 from "styled-components";
 import { Root as ProgressRoot, Indicator as ProgressIndicator } from "@radix-ui/react-progress";
-import { isNotNil as isNotNil34 } from "@wistia/type-guards";
+import { isNotNil as isNotNil35 } from "@wistia/type-guards";
 import { jsx as jsx299, jsxs as jsxs54 } from "react/jsx-runtime";
 var ProgressBarWrapper = styled81.div`
   --progress-bar-height: 8px;
@@ -15949,7 +15976,7 @@ var ProgressBar = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsxs54(ProgressBarWrapper, { children: [
-    isNotNil34(labelLeft) ? /* @__PURE__ */ jsx299(ProgressBarLabel, { children: labelLeft }) : null,
+    isNotNil35(labelLeft) ? /* @__PURE__ */ jsx299(ProgressBarLabel, { children: labelLeft }) : null,
     /* @__PURE__ */ jsx299(
       StyledProgressBar,
       {
@@ -15967,7 +15994,7 @@ var ProgressBar = ({
         )
       }
     ),
-    isNotNil34(labelRight) ? /* @__PURE__ */ jsx299(ProgressBarLabel, { children: labelRight }) : null
+    isNotNil35(labelRight) ? /* @__PURE__ */ jsx299(ProgressBarLabel, { children: labelRight }) : null
   ] });
 };
 ProgressBar.displayName = "ProgressBar_UI";
@@ -16288,7 +16315,7 @@ RadioCardRoot.displayName = "RadioCardRoot_UI";
 
 // src/components/RadioCard/RadioCardDefaultLayout.tsx
 import styled85 from "styled-components";
-import { isNotNil as isNotNil35 } from "@wistia/type-guards";
+import { isNotNil as isNotNil36 } from "@wistia/type-guards";
 
 // src/components/RadioCard/RadioCardIndicator.tsx
 import styled84 from "styled-components";
@@ -16362,17 +16389,17 @@ var RadioCardDefaultLayout = ({
   showIndicator = true
 }) => {
   return /* @__PURE__ */ jsxs57(StyledCardContent, { children: [
-    showIndicator ? /* @__PURE__ */ jsx302(StyledIndicatorContainer, { $hasIcon: isNotNil35(icon), children: /* @__PURE__ */ jsx302(RadioCardIndicator, { "data-testid": "wui-radio-card-indicator" }) }) : null,
+    showIndicator ? /* @__PURE__ */ jsx302(StyledIndicatorContainer, { $hasIcon: isNotNil36(icon), children: /* @__PURE__ */ jsx302(RadioCardIndicator, { "data-testid": "wui-radio-card-indicator" }) }) : null,
     /* @__PURE__ */ jsxs57(Stack, { gap: "space-02", children: [
-      isNotNil35(icon) && /* @__PURE__ */ jsx302(StyledCardIcon, { "data-wui-radio-card-icon": true, children: icon }),
+      isNotNil36(icon) && /* @__PURE__ */ jsx302(StyledCardIcon, { "data-wui-radio-card-icon": true, children: icon }),
       /* @__PURE__ */ jsxs57(
         Stack,
         {
           gap: "space-01",
-          style: isNotNil35(icon) ? { paddingLeft: 2 } : void 0,
+          style: isNotNil36(icon) ? { paddingLeft: 2 } : void 0,
           children: [
-            isNotNil35(label) && /* @__PURE__ */ jsx302(Text, { variant: "label3", children: /* @__PURE__ */ jsx302("strong", { children: label }) }),
-            isNotNil35(description) && /* @__PURE__ */ jsx302(
+            isNotNil36(label) && /* @__PURE__ */ jsx302(Text, { variant: "label3", children: /* @__PURE__ */ jsx302("strong", { children: label }) }),
+            isNotNil36(description) && /* @__PURE__ */ jsx302(
               Text,
               {
                 prominence: "secondary",
@@ -16692,7 +16719,7 @@ SegmentedControl.displayName = "SegmentedControl_UI";
 import { forwardRef as forwardRef33, useEffect as useEffect21, useRef as useRef22 } from "react";
 import styled90, { css as css45 } from "styled-components";
 import { Item as ToggleGroupItem2 } from "@radix-ui/react-toggle-group";
-import { isNotNil as isNotNil36 } from "@wistia/type-guards";
+import { isNotNil as isNotNil37 } from "@wistia/type-guards";
 import { jsxs as jsxs60 } from "react/jsx-runtime";
 var segmentedControlItemStyles = css45`
   all: unset; /* ToggleGroupItem is a button element */
@@ -16808,8 +16835,8 @@ var SegmentedControlItem = forwardRef33(
       {
         ref: combinedRef,
         ...otherProps,
-        $hasLabel: isNotNil36(label),
-        "aria-label": isNotNil36(label) ? void 0 : ariaLabel,
+        $hasLabel: isNotNil37(label),
+        "aria-label": isNotNil37(label) ? void 0 : ariaLabel,
         disabled,
         onClick: handleClick,
         value,
@@ -16983,7 +17010,7 @@ Select.displayName = "Select_UI";
 import { Item, ItemText, ItemIndicator } from "@radix-ui/react-select";
 import { forwardRef as forwardRef35 } from "react";
 import styled92 from "styled-components";
-import { isNotNil as isNotNil37 } from "@wistia/type-guards";
+import { isNotNil as isNotNil38 } from "@wistia/type-guards";
 import { jsx as jsx310, jsxs as jsxs62 } from "react/jsx-runtime";
 var StyledItem = styled92(Item)`
   ${getTypographicStyles("label3")}
@@ -17020,7 +17047,7 @@ var SelectOption = forwardRef35(
         ref: forwardedRef,
         $checkmarkVerticalAlign: checkmarkVerticalAlign,
         children: [
-          isNotNil37(selectedDisplayValue) ? /* @__PURE__ */ jsxs62("div", { children: [
+          isNotNil38(selectedDisplayValue) ? /* @__PURE__ */ jsxs62("div", { children: [
             children,
             /* @__PURE__ */ jsx310("div", { style: { display: "none" }, children: /* @__PURE__ */ jsx310(ItemText, { children: selectedDisplayValue }) })
           ] }) : /* @__PURE__ */ jsx310(ItemText, { children }),
@@ -17308,7 +17335,7 @@ var TableRow = ({ children, ...props }) => {
 // src/components/Tabs/Tabs.tsx
 import { Root as RadixTabsRoot } from "@radix-ui/react-tabs";
 import { useCallback as useCallback19, useState as useState25 } from "react";
-import { isNotNil as isNotNil38 } from "@wistia/type-guards";
+import { isNotNil as isNotNil39 } from "@wistia/type-guards";
 
 // src/components/Tabs/useTabsValue.tsx
 import { createContext as createContext12, useContext as useContext18 } from "react";
@@ -17345,10 +17372,10 @@ var Tabs = ({
     ...props,
     onValueChange
   };
-  if (isNotNil38(value)) {
+  if (isNotNil39(value)) {
     rootProps.value = value;
   }
-  if (isNotNil38(defaultValue)) {
+  if (isNotNil39(defaultValue)) {
     rootProps.defaultValue = defaultValue;
   }
   return /* @__PURE__ */ jsx319(RadixTabsRoot, { ...rootProps, children: /* @__PURE__ */ jsx319(TabsValueProvider, { value: value ?? defaultValue, children: /* @__PURE__ */ jsx319(SelectedItemStyleProvider, { children }) }) });
@@ -17417,7 +17444,7 @@ TabsList.displayName = "TabsList_UI";
 
 // src/components/Tabs/TabsTrigger.tsx
 import { forwardRef as forwardRef36, useEffect as useEffect22, useRef as useRef23 } from "react";
-import { isNotNil as isNotNil39 } from "@wistia/type-guards";
+import { isNotNil as isNotNil40 } from "@wistia/type-guards";
 
 // src/components/Tabs/StyledRadixTabsTrigger.tsx
 import styled103 from "styled-components";
@@ -17468,8 +17495,8 @@ var TabsTrigger = forwardRef36(
       {
         ...otherProps,
         ref: combinedRef,
-        $hasLabel: isNotNil39(label),
-        "aria-label": isNotNil39(label) ? void 0 : ariaLabel,
+        $hasLabel: isNotNil40(label),
+        "aria-label": isNotNil40(label) ? void 0 : ariaLabel,
         disabled,
         value,
         children: [
@@ -17484,7 +17511,7 @@ TabsTrigger.displayName = "TabsTrigger_UI";
 
 // src/components/Thumbnail/ThumbnailBadge.tsx
 import styled104 from "styled-components";
-import { isNotNil as isNotNil40 } from "@wistia/type-guards";
+import { isNotNil as isNotNil41 } from "@wistia/type-guards";
 import { jsx as jsx323, jsxs as jsxs67 } from "react/jsx-runtime";
 var StyledThumbnailBadge = styled104.div`
   align-items: center;
@@ -17513,7 +17540,7 @@ var StyledThumbnailBadge = styled104.div`
 `;
 var ThumbnailBadge = ({ icon, label, ...props }) => {
   return /* @__PURE__ */ jsxs67(StyledThumbnailBadge, { ...props, children: [
-    isNotNil40(icon) && icon,
+    isNotNil41(icon) && icon,
     /* @__PURE__ */ jsx323("span", { children: label })
   ] });
 };
@@ -17522,10 +17549,10 @@ ThumbnailBadge.displayName = "ThumbnailBadge_UI";
 // src/components/Thumbnail/Thumbnail.tsx
 import { forwardRef as forwardRef37, useState as useState26, useRef as useRef24, useCallback as useCallback20, useMemo as useMemo17 } from "react";
 import styled106 from "styled-components";
-import { isNil as isNil19, isNotNil as isNotNil43, isUndefined as isUndefined7, isEmptyString as isEmptyString2, isString as isString4 } from "@wistia/type-guards";
+import { isNil as isNil19, isNotNil as isNotNil44, isUndefined as isUndefined7, isEmptyString as isEmptyString2, isString as isString4 } from "@wistia/type-guards";
 
 // src/private/helpers/getBackgroundGradient/getBackgroundGradient.ts
-import { isNotNil as isNotNil41 } from "@wistia/type-guards";
+import { isNotNil as isNotNil42 } from "@wistia/type-guards";
 import { css as css49 } from "styled-components";
 var gradients = {
   defaultDarkOne: css49`
@@ -17653,12 +17680,12 @@ var gradients = {
 };
 var gradientMap = Object.keys(gradients);
 var getBackgroundGradient = (gradientName = void 0) => {
-  return isNotNil41(gradientName) ? gradients[gradientName] : gradients.defaultDarkOne;
+  return isNotNil42(gradientName) ? gradients[gradientName] : gradients.defaultDarkOne;
 };
 
 // src/components/Thumbnail/ThumbnailStoryboardViewer.tsx
 import styled105 from "styled-components";
-import { isNotNil as isNotNil42 } from "@wistia/type-guards";
+import { isNotNil as isNotNil43 } from "@wistia/type-guards";
 import { jsx as jsx324, jsxs as jsxs68 } from "react/jsx-runtime";
 var ScrubLine = styled105.div`
   position: absolute;
@@ -17752,8 +17779,8 @@ var ThumbnailStoryboardViewer = ({
   );
   const backgroundSize = `${scaledStoryboardWidth}px ${scaledStoryboardHeight}px`;
   const backgroundImage = `url(${storyboardUrl})`;
-  const showScrubLine = isNotNil42(cursorPosition);
-  const scrubLinePosition = isNotNil42(cursorPosition) ? `${cursorPosition - 1}px` : "0";
+  const showScrubLine = isNotNil43(cursorPosition);
+  const scrubLinePosition = isNotNil43(cursorPosition) ? `${cursorPosition - 1}px` : "0";
   const viewerStyles = {
     position: "relative",
     overflow: "hidden",
@@ -17824,7 +17851,7 @@ var ThumbnailImage = ({ thumbnailImageType, thumbnailUrl }) => {
   );
 };
 var StyledThumbnail = styled106.div`
-  background-image: ${({ $backgroundUrl }) => isNotNil43($backgroundUrl) ? `url('${$backgroundUrl}')` : void 0};
+  background-image: ${({ $backgroundUrl }) => isNotNil44($backgroundUrl) ? `url('${$backgroundUrl}')` : void 0};
   ${({ $backgroundUrl, $gradientBackground }) => (
   // if we don't have $backgroundUrl show a gradient
   isNil19($backgroundUrl) ? getBackgroundGradient($gradientBackground) : void 0
@@ -17903,10 +17930,10 @@ var Thumbnail = forwardRef37(
     const storyboardElementRef = useRef24(null);
     const [cursorPosition, setCursorPosition] = useState26(null);
     const backgroundUrl = useMemo17(
-      () => thumbnailImageType === "square" && isNotNil43(thumbnailUrl) ? thumbnailUrl : void 0,
+      () => thumbnailImageType === "square" && isNotNil44(thumbnailUrl) ? thumbnailUrl : void 0,
       [thumbnailImageType, thumbnailUrl]
     );
-    const isScrubbable = isNotNil43(storyboard);
+    const isScrubbable = isNotNil44(storyboard);
     const trackStoryboardLoadStatus = useCallback20(() => {
       if (storyboardElementRef.current || !storyboard) {
         return storyboardElementRef.current;
@@ -17953,7 +17980,7 @@ var Thumbnail = forwardRef37(
           width
         }
       );
-    } else if (isNotNil43(thumbnailUrl)) {
+    } else if (isNotNil44(thumbnailUrl)) {
       thumbnailContent = /* @__PURE__ */ jsx325(
         ThumbnailImage,
         {
@@ -17978,7 +18005,7 @@ var Thumbnail = forwardRef37(
         onMouseOut: handleMouseOut,
         role: "presentation",
         children: [
-          isNotNil43(children) ? children : null,
+          isNotNil44(children) ? children : null,
           thumbnailContent
         ]
       }
@@ -18096,7 +18123,7 @@ var ThumbnailCollage = ({
 
 // src/components/WistiaLogo/WistiaLogo.tsx
 import styled108, { css as css50 } from "styled-components";
-import { isNotNil as isNotNil44 } from "@wistia/type-guards";
+import { isNotNil as isNotNil45 } from "@wistia/type-guards";
 import { jsx as jsx327, jsxs as jsxs70 } from "react/jsx-runtime";
 var renderBrandmark = (brandmarkColor, iconOnly) => {
   if (iconOnly) {
@@ -18209,7 +18236,7 @@ var WistiaLogo = ({
       ...props,
       children: [
         /* @__PURE__ */ jsx327("title", { children: title }),
-        isNotNil44(description) ? /* @__PURE__ */ jsx327("desc", { children: description }) : null,
+        isNotNil45(description) ? /* @__PURE__ */ jsx327("desc", { children: description }) : null,
         renderBrandmark(brandmarkColor, iconOnly),
         renderLogotype(logotypeColor, iconOnly)
       ]
@@ -18221,7 +18248,7 @@ WistiaLogo.displayName = "WistiaLogo_UI";
 
 // src/components/SplitButton/SplitButton.tsx
 import styled109 from "styled-components";
-import { isNotNil as isNotNil45 } from "@wistia/type-guards";
+import { isNotNil as isNotNil46 } from "@wistia/type-guards";
 import { cloneElement as cloneElement9 } from "react";
 import { jsx as jsx328, jsxs as jsxs71 } from "react/jsx-runtime";
 var StyledSplitButton = styled109.span`
@@ -18268,7 +18295,7 @@ var SplitButton = ({
         children
       }
     ),
-    isNotNil45(menuItems) && /* @__PURE__ */ jsx328(
+    isNotNil46(menuItems) && /* @__PURE__ */ jsx328(
       Menu,
       {
         ...menuProps,
@@ -18287,7 +18314,7 @@ var SplitButton = ({
         children: menuItems
       }
     ),
-    isNotNil45(secondaryAction) && cloneElement9(secondaryAction, { disabled, size, unstyled, variant, colorScheme })
+    isNotNil46(secondaryAction) && cloneElement9(secondaryAction, { disabled, size, unstyled, variant, colorScheme })
   ] });
 };
 SplitButton.displayName = "SplitButton_UI";