@wistia/ui 0.13.0 → 0.13.1-beta.dfa62396.22fa8d9

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.13.0
+ * @license @wistia/ui v0.13.1-beta.dfa62396.22fa8d9
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -8793,7 +8793,7 @@ Center.displayName = "Center";
 // src/components/Checkbox/Checkbox.tsx
 import { forwardRef as forwardRef12, useId as useId2 } from "react";
 import styled27, { css as css25 } from "styled-components";
-import { isNonEmptyString as isNonEmptyString2, isNotUndefined as isNotUndefined7 } from "@wistia/type-guards";
+import { isNonEmptyString as isNonEmptyString3, isNotUndefined as isNotUndefined7 } from "@wistia/type-guards";
 
 // src/private/components/FormControlLabel/FormControlLabel.tsx
 import styled23, { css as css24 } from "styled-components";
@@ -8922,6 +8922,7 @@ import { isArray } from "@wistia/type-guards";
 // src/components/FormGroup/FormGroup.tsx
 import styled25 from "styled-components";
 import { useRef as useRef7 } from "react";
+import { isNonEmptyString as isNonEmptyString2, isNotNil as isNotNil16 } from "@wistia/type-guards";
 
 // src/components/Stack/Stack.tsx
 import { forwardRef as forwardRef10 } from "react";
@@ -8959,12 +8960,31 @@ var Stack = makePolymorphic(StackComponent);
 import { jsx as jsx217, jsxs as jsxs17 } from "react/jsx-runtime";
 var StyledFieldset = styled25.fieldset`
   border: 0;
+
+  /* * {
+    outline: 1px solid red;
+  } */
 `;
 var StyledLegend = styled25.legend`
+  padding-inline: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--wui-space-01);
   margin-bottom: var(--wui-space-02);
+
+  &:has([data-wui-form-group-description]) {
+    margin-bottom: var(--wui-space-01);
+  }
 `;
-var FormGroup = ({ children, label, ...props }) => {
+var FormGroup = ({
+  children,
+  label,
+  description,
+  ...props
+}) => {
   const ref = useRef7(null);
+  const hasLabel = isNotNil16(label) && isNonEmptyString2(label);
+  const hasDescription = isNotNil16(description) && isNonEmptyString2(description);
   return /* @__PURE__ */ jsxs17(
     Stack,
     {
@@ -8972,14 +8992,26 @@ var FormGroup = ({ children, label, ...props }) => {
       ref,
       renderAs: StyledFieldset,
       children: [
-        /* @__PURE__ */ jsx217(
+        hasLabel || hasDescription ? /* @__PURE__ */ jsxs17(
           Heading,
           {
             renderAs: StyledLegend,
             variant: "heading5",
-            children: label
+            children: [
+              hasLabel ? label : null,
+              hasDescription ? /* @__PURE__ */ jsx217(
+                Text,
+                {
+                  "data-wui-form-group-description": true,
+                  prominence: "secondary",
+                  renderAs: "span",
+                  variant: "body4",
+                  children: description
+                }
+              ) : null
+            ]
           }
-        ),
+        ) : null,
         children
       ]
     }
@@ -9250,7 +9282,7 @@ var Checkbox = forwardRef12(
     ...props
   }, ref) => {
     const generatedId = useId2();
-    const computedId = isNonEmptyString2(id) ? id : `wistia-ui-checkbox-${generatedId}`;
+    const computedId = isNonEmptyString3(id) ? id : `wistia-ui-checkbox-${generatedId}`;
     const checkboxGroupContext = useCheckboxGroup();
     const contextName = checkboxGroupContext?.name;
     const contextOnChange = checkboxGroupContext?.onChange;
@@ -9343,7 +9375,7 @@ ClickRegion.displayName = "ClickRegion";
 
 // src/components/Collapsible/Collapsible.tsx
 import { Root as CollapsibleRoot } from "@radix-ui/react-collapsible";
-import { isNotNil as isNotNil16 } from "@wistia/type-guards";
+import { isNotNil as isNotNil17 } from "@wistia/type-guards";
 import styled28 from "styled-components";
 import { jsx as jsx221 } from "react/jsx-runtime";
 var StyledRoot = styled28(CollapsibleRoot)`
@@ -9360,7 +9392,7 @@ var Collapsible = ({
   onOpenChange
 }) => {
   const controlProps = {
-    ...isNotNil16(onOpenChange) && isNotNil16(isOpen) ? { open: isOpen, onOpenChange } : {}
+    ...isNotNil17(onOpenChange) && isNotNil17(isOpen) ? { open: isOpen, onOpenChange } : {}
   };
   return /* @__PURE__ */ jsx221(StyledRoot, { ...controlProps, children });
 };
@@ -9461,7 +9493,7 @@ import styled32 from "styled-components";
 // src/components/Tag/Tag.tsx
 import { forwardRef as forwardRef13 } from "react";
 import styled31 from "styled-components";
-import { isNil as isNil13, isNotNil as isNotNil17, isNonEmptyString as isNonEmptyString3 } from "@wistia/type-guards";
+import { isNil as isNil13, isNotNil as isNotNil18, isNonEmptyString as isNonEmptyString4 } from "@wistia/type-guards";
 import { Fragment as Fragment5, jsx as jsx225, jsxs as jsxs20 } from "react/jsx-runtime";
 var TagLabel = styled31.a`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
@@ -9578,8 +9610,8 @@ var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
 };
 var Tag = forwardRef13(
   ({ onClickRemove, colorScheme = "inherit", href, icon, label, onClickRemoveLabel, ...props }, ref) => {
-    const hasIcon = isNotNil17(icon);
-    const labelProps = isNotNil17(href) && isNonEmptyString3(href) ? { href, as: "a" } : { as: "span" };
+    const hasIcon = isNotNil18(icon);
+    const labelProps = isNotNil18(href) && isNonEmptyString4(href) ? { href, as: "a" } : { as: "span" };
     return /* @__PURE__ */ jsxs20(
       StyledTag,
       {
@@ -9889,7 +9921,7 @@ var Combobox2 = ({
 // src/components/DataCards/DataCard.tsx
 import { useRef as useRef10 } from "react";
 import styled33, { keyframes } from "styled-components";
-import { isNotNil as isNotNil18, isNotNull } from "@wistia/type-guards";
+import { isNotNil as isNotNil19, isNotNull } from "@wistia/type-guards";
 import { jsx as jsx227, jsxs as jsxs22 } from "react/jsx-runtime";
 var StyledDataCard = styled33.div`
   display: grid;
@@ -10034,7 +10066,7 @@ var DataCardArrowIcon = /* @__PURE__ */ jsx227(
 );
 var DataCard = (props) => {
   const ref = useRef10(null);
-  if (isNotNil18(props.href) || isNotNil18(props.onClick)) {
+  if (isNotNil19(props.href) || isNotNil19(props.onClick)) {
     return /* @__PURE__ */ jsx227(ClickRegion, { targetRef: ref, children: /* @__PURE__ */ jsx227(
       DataCardInner,
       {
@@ -10044,7 +10076,7 @@ var DataCard = (props) => {
           Button,
           {
             ref,
-            ...isNotNil18(props.beforeAction) ? { beforeAction: props.beforeAction } : {},
+            ...isNotNil19(props.beforeAction) ? { beforeAction: props.beforeAction } : {},
             disabled: props.disabled ?? false,
             href: props.href,
             onClick: props.onClick,
@@ -10333,7 +10365,7 @@ Tooltip.displayName = "Tooltip";
 // src/components/Input/Input.tsx
 import { forwardRef as forwardRef14, cloneElement as cloneElement4, useRef as useRef11 } from "react";
 import styled38, { css as css28 } from "styled-components";
-import { isNil as isNil14, isNotNil as isNotNil19, isRecord as isRecord4 } from "@wistia/type-guards";
+import { isNil as isNil14, isNotNil as isNotNil20, isRecord as isRecord4 } from "@wistia/type-guards";
 import { jsx as jsx232, jsxs as jsxs25 } from "react/jsx-runtime";
 var inputStyles = css28`
   ${inputCss}
@@ -10450,27 +10482,27 @@ var Input = forwardRef14(
     const internalRef = useRef11();
     const ref = (
       // eslint-disable-next-line react-compiler/react-compiler
-      isNotNil19(externalRef) && isRecord4(externalRef) && "current" in externalRef ? externalRef : internalRef
+      isNotNil20(externalRef) && isRecord4(externalRef) && "current" in externalRef ? externalRef : internalRef
     );
     let leftIconToDisplay = leftIcon;
     if (isNil14(leftIcon) && type === "search") {
       leftIconToDisplay = /* @__PURE__ */ jsx232(Icon, { type: "search" });
     }
-    if (isNotNil19(leftIconToDisplay)) {
+    if (isNotNil20(leftIconToDisplay)) {
       leftIconToDisplay = cloneElement4(leftIconToDisplay, {
         size: "md",
         className: "wui-input-left-icon"
       });
     }
     let rightIconToDisplay = rightIcon;
-    if (isNotNil19(rightIconToDisplay)) {
+    if (isNotNil20(rightIconToDisplay)) {
       rightIconToDisplay = cloneElement4(rightIconToDisplay, {
         size: "md",
         className: "wui-input-right-icon"
       });
     }
     const handleFocus2 = (event) => {
-      if (isNotNil19(props.onFocus)) {
+      if (isNotNil20(props.onFocus)) {
         props.onFocus(event);
       }
       if (autoSelect && isValidRef(ref) && "current" in ref) {
@@ -10518,11 +10550,13 @@ var StyledInput = styled39(Input)`
   }
 
   && {
-    --wui-input-font-size: var(--wui-typography-heading-1-size);
-    --wui-input-font-weight: var(--wui-typography-heading-1-weight);
-    --wui-input-line-height: var(--wui-typography-heading-1-line-height);
+    ${({ $variant }) => variantStyleMap[$variant]}
+    /* The input font styles (edit mode) needs the same font styles as Heading */
+    --wui-input-font-size: var(--font-size);
+    --wui-input-font-weight: var(--font-weight);
+    --wui-input-line-height: var(--line-height);
 
-    font-family: var(--wui-typography-heading-1-family);
+    font-family: var(--font-family);
     width: 100%;
     padding: var(--wui-space-02);
     border: none;
@@ -10554,6 +10588,7 @@ var EditableHeading = ({
   onEditingChange,
   tooltipText = "Click to edit title",
   ariaLabel = "Edit title",
+  variant = "heading1",
   __forceEditing = false,
   editingDisabled = false
 }) => {
@@ -10600,7 +10635,7 @@ var EditableHeading = ({
       ref: headingRef,
       $editingDisabled: editingDisabled,
       onClick: () => handleSetEditing(true),
-      variant: "heading1",
+      variant,
       children: value
     }
   );
@@ -10612,6 +10647,7 @@ var EditableHeading = ({
       StyledInput,
       {
         $height: headingHeight,
+        $variant: variant,
         autoFocus: true,
         fullWidth: true,
         onBlur: handleFinishEditing,
@@ -10716,7 +10752,7 @@ var FormErrorSummary = ({ description }) => {
 // src/components/FormField/FormField.tsx
 import { Children as Children6, cloneElement as cloneElement5, useContext as useContext5 } from "react";
 import styled41 from "styled-components";
-import { isArray as isArray3, isNotNil as isNotNil20, isNotUndefined as isNotUndefined10, isUndefined as isUndefined4 } from "@wistia/type-guards";
+import { isArray as isArray3, isNotNil as isNotNil21, isNotUndefined as isNotUndefined10, isUndefined as isUndefined4 } from "@wistia/type-guards";
 
 // src/components/Label/Label.tsx
 import styled40, { css as css30 } from "styled-components";
@@ -10893,8 +10929,8 @@ var FormField = ({
       defaultValue
     };
   }
-  if (isNotNil20(checkboxGroup)) {
-    const computedName = isNotNil20(checkboxGroup.name) ? `${checkboxGroup.name}[${name}]` : name;
+  if (isNotNil21(checkboxGroup)) {
+    const computedName = isNotNil21(checkboxGroup.name) ? `${checkboxGroup.name}[${name}]` : name;
     const handleChange = (event) => {
       if (isNotUndefined10(props.onChange)) {
         props.onChange(event);
@@ -10907,7 +10943,7 @@ var FormField = ({
       ...childProps,
       name: computedName,
       onChange: handleChange,
-      "aria-invalid": isNotNil20(error)
+      "aria-invalid": isNotNil21(error)
     };
   }
   Children6.only(children);
@@ -10918,9 +10954,9 @@ var FormField = ({
       "data-label-position": labelPosition ?? formState.labelPosition,
       children: [
         !isIntegratedLabel && /* @__PURE__ */ jsx236(Label, { htmlFor: computedId, children: label }),
-        isNotNil20(description) ? /* @__PURE__ */ jsx236(FormControlLabelDescription, { id: descriptionId, children: description }) : null,
+        isNotNil21(description) ? /* @__PURE__ */ jsx236(FormControlLabelDescription, { id: descriptionId, children: description }) : null,
         cloneElement5(children, childProps),
-        isNotNil20(computedError) ? /* @__PURE__ */ jsxs28(Fragment7, { children: [
+        isNotNil21(computedError) ? /* @__PURE__ */ jsxs28(Fragment7, { children: [
           /* @__PURE__ */ jsx236("div", {}),
           /* @__PURE__ */ jsx236(
             ErrorMessages,
@@ -11100,7 +11136,7 @@ InputClickToCopy.displayName = "InputClickToCopy";
 
 // src/components/KeyboardShortcut/KeyboardShortcut.tsx
 import styled44 from "styled-components";
-import { isNotNil as isNotNil21 } from "@wistia/type-guards";
+import { isNotNil as isNotNil22 } from "@wistia/type-guards";
 import { jsx as jsx240, jsxs as jsxs29 } from "react/jsx-runtime";
 var StyledKeyboardShortcut = styled44.div`
   align-items: center;
@@ -11194,7 +11230,7 @@ var KeyboardShortcut = ({
     $fullWidth: fullWidth,
     ...otherProps,
     children: [
-      isNotNil21(label) && /* @__PURE__ */ jsx240(Label2, { children: label }),
+      isNotNil22(label) && /* @__PURE__ */ jsx240(Label2, { children: label }),
       /* @__PURE__ */ jsx240(KeysContainer, { children: (Array.isArray(keyboardKeys) ? keyboardKeys : [keyboardKeys]).map((keyboardKey, index) => /* @__PURE__ */ jsx240(
         StyledKey,
         {
@@ -11208,7 +11244,7 @@ var KeyboardShortcut = ({
 KeyboardShortcut.displayName = "KeyboardShortcut";
 
 // src/components/List/List.tsx
-import { isNotNil as isNotNil22 } from "@wistia/type-guards";
+import { isNotNil as isNotNil23 } from "@wistia/type-guards";
 import styled46, { css as css32 } from "styled-components";
 
 // src/components/List/ListItem.tsx
@@ -11349,13 +11385,13 @@ var List = ({
   ...otherProps
 }) => {
   const listVariant = variant ?? "bullets";
-  if (isNotNil22(children)) {
+  if (isNotNil23(children)) {
     if (Array.isArray(children) && !children.length) {
       return null;
     }
     return renderListComponent(children, listVariant, otherProps);
   }
-  if (isNotNil22(items)) {
+  if (isNotNil23(items)) {
     if (!items.length) {
       return null;
     }
@@ -11374,7 +11410,7 @@ import {
   DropdownMenuPortal,
   DropdownMenuContent
 } from "@radix-ui/react-dropdown-menu";
-import { isNotNil as isNotNil23, isNotUndefined as isNotUndefined11 } from "@wistia/type-guards";
+import { isNotNil as isNotNil24, isNotUndefined as isNotUndefined11 } from "@wistia/type-guards";
 
 // src/components/Menu/MenuContext.tsx
 import { createContext as createContext6, useContext as useContext7 } from "react";
@@ -11487,7 +11523,7 @@ var Menu = forwardRef17(
   }, ref) => {
     const contextValue = useMemo10(() => ({ compact }), [compact]);
     let controlProps = {
-      ...isNotNil23(onOpenChange) && isNotNil23(isOpen) ? { open: isOpen, onOpenChange } : {}
+      ...isNotNil24(onOpenChange) && isNotNil24(isOpen) ? { open: isOpen, onOpenChange } : {}
     };
     if (disabled) {
       controlProps = {
@@ -11520,10 +11556,11 @@ var Menu = forwardRef17(
               $compact: compact,
               align,
               collisionPadding: 8,
-              sideOffset: 6,
               onFocusOutside: (event) => {
                 event.preventDefault();
               },
+              side: "bottom",
+              sideOffset: 6,
               children
             }
           ) })
@@ -11573,12 +11610,12 @@ import {
   DropdownMenuSubTrigger,
   DropdownMenuItem
 } from "@radix-ui/react-dropdown-menu";
-import { isNotNil as isNotNil25 } from "@wistia/type-guards";
+import { isNotNil as isNotNil26 } from "@wistia/type-guards";
 
 // src/components/Menu/MenuItemButton.tsx
 import { forwardRef as forwardRef18 } from "react";
 import styled49 from "styled-components";
-import { isNotNil as isNotNil24, isNotUndefined as isNotUndefined12 } from "@wistia/type-guards";
+import { isNotNil as isNotNil25, isNotUndefined as isNotUndefined12 } from "@wistia/type-guards";
 import { jsx as jsx245, jsxs as jsxs32 } from "react/jsx-runtime";
 var StyledButton3 = styled49(Button)`
   ${({ colorScheme }) => getColorScheme(colorScheme)};
@@ -11686,7 +11723,7 @@ var MenuItemButton = forwardRef18(({ children, appearance, command, icon, ...pro
       children: [
         props.leftIcon ? /* @__PURE__ */ jsx245(StyledLeftIconContainer, { children: props.leftIcon }) : null,
         /* @__PURE__ */ jsx245(StyledLabelAndDescriptionContainer, { children }),
-        isNotNil24(badge) || isNotNil24(command) ? /* @__PURE__ */ jsx245(StyledBadgeContainer, { children: badge ?? command }) : null,
+        isNotNil25(badge) || isNotNil25(command) ? /* @__PURE__ */ jsx245(StyledBadgeContainer, { children: badge ?? command }) : null,
         props.rightIcon ? /* @__PURE__ */ jsx245(StyledRightIconContainer, { children: props.rightIcon }) : null
       ]
     }
@@ -11758,7 +11795,7 @@ var SubMenu = ({
   return isSmAndUp ? /* @__PURE__ */ jsxs33(DropdownMenuSub, { onOpenChange, children: [
     /* @__PURE__ */ jsxs33(SubMenuTrigger, { ...props, children: [
       /* @__PURE__ */ jsx247(MenuItemLabel, { children: label }),
-      isNotNil25(description) ? /* @__PURE__ */ jsx247(MenuItemDescription, { children: description }) : null
+      isNotNil26(description) ? /* @__PURE__ */ jsx247(MenuItemDescription, { children: description }) : null
     ] }),
     /* @__PURE__ */ jsx247(DropdownMenuPortal2, { children: /* @__PURE__ */ jsx247(SubMenuContent, { $compact: compact, children }) })
   ] }) : /* @__PURE__ */ jsxs33(DropdownMenuGroup, { children: [
@@ -11858,7 +11895,7 @@ import {
   DropdownMenuCheckboxItem,
   DropdownMenuItemIndicator as DropdownMenuItemIndicator2
 } from "@radix-ui/react-dropdown-menu";
-import { isNotNil as isNotNil26 } from "@wistia/type-guards";
+import { isNotNil as isNotNil27 } from "@wistia/type-guards";
 import { jsx as jsx251, jsxs as jsxs34 } from "react/jsx-runtime";
 var CheckboxIndicator = ({ checked, ...props }) => {
   return checked ? /* @__PURE__ */ jsxs34(
@@ -11932,8 +11969,8 @@ var CheckboxMenuItem = ({
         MenuItemButton,
         {
           ...props,
-          leftIcon: isNotNil26(props.icon) ? props.icon : /* @__PURE__ */ jsx251(CheckboxIndicator, { checked }),
-          rightIcon: isNotNil26(props.icon) ? /* @__PURE__ */ jsx251(DropdownMenuItemIndicator2, { children: /* @__PURE__ */ jsx251(Icon, { type: "checkmark" }) }) : void 0
+          leftIcon: isNotNil27(props.icon) ? props.icon : /* @__PURE__ */ jsx251(CheckboxIndicator, { checked }),
+          rightIcon: isNotNil27(props.icon) ? /* @__PURE__ */ jsx251(DropdownMenuItemIndicator2, { children: /* @__PURE__ */ jsx251(Icon, { type: "checkmark" }) }) : void 0
         }
       )
     }
@@ -12047,7 +12084,7 @@ FilterMenu.displayName = "FilterMenu";
 import { forwardRef as forwardRef22 } from "react";
 import styled56 from "styled-components";
 import { Root as DialogRoot, Portal as DialogPortal } from "@radix-ui/react-dialog";
-import { isNotNil as isNotNil28 } from "@wistia/type-guards";
+import { isNotNil as isNotNil29 } from "@wistia/type-guards";
 
 // src/components/Modal/ModalHeader.tsx
 import styled53 from "styled-components";
@@ -12110,7 +12147,7 @@ import { Content as DialogContent } from "@radix-ui/react-dialog";
 
 // src/private/hooks/useFocusRestore/useFocusRestore.ts
 import { useRef as useRef14, useEffect as useEffect12 } from "react";
-import { isNotNil as isNotNil27 } from "@wistia/type-guards";
+import { isNotNil as isNotNil28 } from "@wistia/type-guards";
 var useFocusRestore = () => {
   const previouslyFocusedRef = useRef14(null);
   useEffect12(() => {
@@ -12118,7 +12155,7 @@ var useFocusRestore = () => {
   }, []);
   useEffect12(() => {
     return () => {
-      if (isNotNil27(previouslyFocusedRef.current)) {
+      if (isNotNil28(previouslyFocusedRef.current)) {
         setTimeout(() => {
           previouslyFocusedRef.current?.focus();
         }, 0);
@@ -12330,7 +12367,7 @@ var Modal = forwardRef22(
       DialogRoot,
       {
         onOpenChange: (open2) => {
-          if (!open2 && isNotNil28(onRequestClose)) {
+          if (!open2 && isNotNil29(onRequestClose)) {
             onRequestClose();
           }
         },
@@ -12342,7 +12379,7 @@ var Modal = forwardRef22(
             {
               ref,
               onOpenAutoFocus: (event) => {
-                if (isNotNil28(initialFocusRef) && initialFocusRef.current) {
+                if (isNotNil29(initialFocusRef) && initialFocusRef.current) {
                   event.preventDefault();
                   requestAnimationFrame(() => {
                     initialFocusRef.current?.focus();
@@ -12377,9 +12414,9 @@ import { Root, Trigger as Trigger2, Portal, Content as Content2, Close } from "@
 import styled58, { css as css36 } from "styled-components";
 
 // src/private/helpers/getControls/getControlProps.tsx
-import { isNotNil as isNotNil29 } from "@wistia/type-guards";
+import { isNotNil as isNotNil30 } from "@wistia/type-guards";
 var getControlProps = (isOpen, onOpenChange) => {
-  return isNotNil29(onOpenChange) && isNotNil29(isOpen) ? { open: isOpen, onOpenChange } : {};
+  return isNotNil30(onOpenChange) && isNotNil30(isOpen) ? { open: isOpen, onOpenChange } : {};
 };
 
 // src/components/Popover/PopoverArrow.tsx
@@ -12534,7 +12571,7 @@ Popover2.displayName = "Popover";
 // src/components/ProgressBar/ProgressBar.tsx
 import styled59 from "styled-components";
 import { Root as ProgressRoot, Indicator as ProgressIndicator } from "@radix-ui/react-progress";
-import { isNotNil as isNotNil30 } from "@wistia/type-guards";
+import { isNotNil as isNotNil31 } from "@wistia/type-guards";
 import { jsx as jsx259, jsxs as jsxs40 } from "react/jsx-runtime";
 var ProgressBarWrapper = styled59.div`
   --progress-bar-height: 8px;
@@ -12589,7 +12626,7 @@ var ProgressBar = ({
   ...props
 }) => {
   return /* @__PURE__ */ jsxs40(ProgressBarWrapper, { children: [
-    isNotNil30(labelLeft) ? /* @__PURE__ */ jsx259(ProgressBarLabel, { children: labelLeft }) : null,
+    isNotNil31(labelLeft) ? /* @__PURE__ */ jsx259(ProgressBarLabel, { children: labelLeft }) : null,
     /* @__PURE__ */ jsx259(
       StyledProgressBar,
       {
@@ -12605,7 +12642,7 @@ var ProgressBar = ({
         )
       }
     ),
-    isNotNil30(labelRight) ? /* @__PURE__ */ jsx259(ProgressBarLabel, { children: labelRight }) : null
+    isNotNil31(labelRight) ? /* @__PURE__ */ jsx259(ProgressBarLabel, { children: labelRight }) : null
   ] });
 };
 ProgressBar.displayName = "ProgressBar";
@@ -12613,7 +12650,7 @@ ProgressBar.displayName = "ProgressBar";
 // src/components/Radio/Radio.tsx
 import { forwardRef as forwardRef23, useId as useId3 } from "react";
 import styled60, { css as css37 } from "styled-components";
-import { isNonEmptyString as isNonEmptyString4, isNotUndefined as isNotUndefined13 } from "@wistia/type-guards";
+import { isNonEmptyString as isNonEmptyString5, isNotUndefined as isNotUndefined13 } from "@wistia/type-guards";
 import { jsx as jsx260, jsxs as jsxs41 } from "react/jsx-runtime";
 var RadioIcon = () => /* @__PURE__ */ jsx260(
   "svg",
@@ -12730,7 +12767,7 @@ var Radio = forwardRef23(
     ...props
   }, ref) => {
     const generatedId = useId3();
-    const computedId = isNonEmptyString4(id) ? id : `wistia-ui-radio-${generatedId}`;
+    const computedId = isNonEmptyString5(id) ? id : `wistia-ui-radio-${generatedId}`;
     const radioGroupContext = useRadioGroup();
     const contextName = radioGroupContext?.name;
     const contextOnChange = radioGroupContext?.onChange;
@@ -12791,7 +12828,7 @@ import { forwardRef as forwardRef25 } from "react";
 // src/components/RadioCard/RadioCardRoot.tsx
 import { forwardRef as forwardRef24, useId as useId4 } from "react";
 import styled61, { css as css38 } from "styled-components";
-import { isNonEmptyString as isNonEmptyString5, isNotUndefined as isNotUndefined14 } from "@wistia/type-guards";
+import { isNonEmptyString as isNonEmptyString6, isNotUndefined as isNotUndefined14 } from "@wistia/type-guards";
 import { jsx as jsx261, jsxs as jsxs42 } from "react/jsx-runtime";
 var checkedStyles = css38`
   --wui-radio-card-border-color: var(--wui-color-focus-ring);
@@ -12912,7 +12949,7 @@ var RadioCardRoot = forwardRef24(
     ...props
   }, ref) => {
     const generatedId = useId4();
-    const computedId = isNonEmptyString5(id) ? id : `wistia-ui-radio-${generatedId}`;
+    const computedId = isNonEmptyString6(id) ? id : `wistia-ui-radio-${generatedId}`;
     const radioGroupContext = useRadioGroup();
     const contextName = radioGroupContext?.name;
     const contextOnChange = radioGroupContext?.onChange;
@@ -12951,7 +12988,7 @@ RadioCardRoot.displayName = "RadioCardRoot";
 
 // src/components/RadioCard/RadioCardDefaultLayout.tsx
 import styled63 from "styled-components";
-import { isNotNil as isNotNil31 } from "@wistia/type-guards";
+import { isNotNil as isNotNil32 } from "@wistia/type-guards";
 
 // src/components/RadioCard/RadioCardIndicator.tsx
 import styled62 from "styled-components";
@@ -13025,17 +13062,17 @@ var RadioCardDefaultLayout = ({
   showIndicator = true
 }) => {
   return /* @__PURE__ */ jsxs43(StyledCardContent, { children: [
-    showIndicator ? /* @__PURE__ */ jsx262(StyledIndicatorContainer, { $hasIcon: isNotNil31(icon), children: /* @__PURE__ */ jsx262(RadioCardIndicator, { "data-testid": "wui-radio-card-indicator" }) }) : null,
+    showIndicator ? /* @__PURE__ */ jsx262(StyledIndicatorContainer, { $hasIcon: isNotNil32(icon), children: /* @__PURE__ */ jsx262(RadioCardIndicator, { "data-testid": "wui-radio-card-indicator" }) }) : null,
     /* @__PURE__ */ jsxs43(Stack, { gap: "space-02", children: [
-      isNotNil31(icon) && /* @__PURE__ */ jsx262(StyledCardIcon, { "data-wui-radio-card-icon": true, children: icon }),
+      isNotNil32(icon) && /* @__PURE__ */ jsx262(StyledCardIcon, { "data-wui-radio-card-icon": true, children: icon }),
       /* @__PURE__ */ jsxs43(
         Stack,
         {
           gap: "space-01",
-          style: isNotNil31(icon) ? { paddingLeft: 2 } : void 0,
+          style: isNotNil32(icon) ? { paddingLeft: 2 } : void 0,
           children: [
             /* @__PURE__ */ jsx262(Text, { variant: "label3", children: /* @__PURE__ */ jsx262("strong", { children: label }) }),
-            isNotNil31(description) && /* @__PURE__ */ jsx262(
+            isNotNil32(description) && /* @__PURE__ */ jsx262(
               Text,
               {
                 prominence: "secondary",
@@ -13244,7 +13281,7 @@ SegmentedControl.displayName = "SegmentedControl";
 import { forwardRef as forwardRef28, useEffect as useEffect13, useRef as useRef15 } from "react";
 import styled66, { css as css41 } from "styled-components";
 import { Item as ToggleGroupItem } from "@radix-ui/react-toggle-group";
-import { isNotNil as isNotNil32 } from "@wistia/type-guards";
+import { isNotNil as isNotNil33 } from "@wistia/type-guards";
 import { jsxs as jsxs45 } from "react/jsx-runtime";
 var segmentedControlItemStyles = css41`
   all: unset; /* ToggleGroupItem is a button element */
@@ -13359,8 +13396,8 @@ var SegmentedControlItem = forwardRef28(
       {
         ref: combinedRef,
         ...otherProps,
-        $hasLabel: isNotNil32(label),
-        "aria-label": isNotNil32(label) ? void 0 : ariaLabel,
+        $hasLabel: isNotNil33(label),
+        "aria-label": isNotNil33(label) ? void 0 : ariaLabel,
         disabled,
         onClick: handleClick,
         value,
@@ -13501,7 +13538,7 @@ Select.displayName = "Select";
 import { Item, ItemText, ItemIndicator } from "@radix-ui/react-select";
 import { forwardRef as forwardRef30 } from "react";
 import styled68 from "styled-components";
-import { isNotNil as isNotNil33 } from "@wistia/type-guards";
+import { isNotNil as isNotNil34 } from "@wistia/type-guards";
 import { jsx as jsx269, jsxs as jsxs47 } from "react/jsx-runtime";
 var StyledItem = styled68(Item)`
   ${variantStyleMap2.body3};
@@ -13545,7 +13582,7 @@ var SelectOption = forwardRef30(
               type: "checkmark"
             }
           ) }) }),
-          isNotNil33(selectedDisplayValue) ? /* @__PURE__ */ jsxs47("div", { children: [
+          isNotNil34(selectedDisplayValue) ? /* @__PURE__ */ jsxs47("div", { children: [
             children,
             /* @__PURE__ */ jsx269("div", { style: { display: "none" }, children: /* @__PURE__ */ jsx269(ItemText, { children: selectedDisplayValue }) })
           ] }) : /* @__PURE__ */ jsx269(ItemText, { children })
@@ -13585,7 +13622,7 @@ import {
   Thumb as RadixSliderThumb
 } from "@radix-ui/react-slider";
 import styled70 from "styled-components";
-import { isNonEmptyString as isNonEmptyString6 } from "@wistia/type-guards";
+import { isNonEmptyString as isNonEmptyString7 } from "@wistia/type-guards";
 import { jsx as jsx271, jsxs as jsxs49 } from "react/jsx-runtime";
 var SliderContainer = styled70.div`
   --wui-slider-track-color: var(--wui-gray-6);
@@ -13664,7 +13701,7 @@ var Slider = ({
   "data-testid": dataTestId = "ui-slider",
   ...otherProps
 }) => {
-  if (!(isNonEmptyString6(ariaLabel) || isNonEmptyString6(ariaLabelledby))) {
+  if (!(isNonEmptyString7(ariaLabel) || isNonEmptyString7(ariaLabelledby))) {
     throw new Error(
       "UI Slider: Sliders should have an accessible name. Add a label using the aria-label or aria-labelledby prop."
     );
@@ -13712,7 +13749,7 @@ Slider.displayName = "Slider";
 // src/components/Switch/Switch.tsx
 import { forwardRef as forwardRef31, useId as useId5 } from "react";
 import styled71, { css as css42 } from "styled-components";
-import { isNonEmptyString as isNonEmptyString7 } from "@wistia/type-guards";
+import { isNonEmptyString as isNonEmptyString8 } from "@wistia/type-guards";
 import { jsx as jsx272, jsxs as jsxs50 } from "react/jsx-runtime";
 var sizeSmall3 = css42`
   --wui-size-small-width: 24px;
@@ -13832,7 +13869,7 @@ var Switch = forwardRef31(
     ...props
   }, ref) => {
     const generatedId = useId5();
-    const computedId = isNonEmptyString7(id) ? id : `wistia-ui-switch-${generatedId}`;
+    const computedId = isNonEmptyString8(id) ? id : `wistia-ui-switch-${generatedId}`;
     return /* @__PURE__ */ jsxs50(StyledSwitchWrapper, { $disabled: disabled, children: [
       /* @__PURE__ */ jsx272(
         StyledHiddenSwitchInput,
@@ -13988,7 +14025,7 @@ var TableRow = ({ children, ...props }) => {
 // src/components/Tabs/Tabs.tsx
 import { Root as RadixTabsRoot } from "@radix-ui/react-tabs";
 import { useCallback as useCallback10, useState as useState18 } from "react";
-import { isNotNil as isNotNil34 } from "@wistia/type-guards";
+import { isNotNil as isNotNil35 } from "@wistia/type-guards";
 
 // src/components/Tabs/useTabsValue.tsx
 import { createContext as createContext10, useContext as useContext11 } from "react";
@@ -14025,10 +14062,10 @@ var Tabs = ({
     ...props,
     onValueChange
   };
-  if (isNotNil34(value)) {
+  if (isNotNil35(value)) {
     rootProps.value = value;
   }
-  if (isNotNil34(defaultValue)) {
+  if (isNotNil35(defaultValue)) {
     rootProps.defaultValue = defaultValue;
   }
   return /* @__PURE__ */ jsx279(RadixTabsRoot, { ...rootProps, children: /* @__PURE__ */ jsx279(TabsValueProvider, { value: value ?? defaultValue, children: /* @__PURE__ */ jsx279(SelectedItemStyleProvider, { children }) }) });
@@ -14097,7 +14134,7 @@ TabsList.displayName = "TabsList";
 
 // src/components/Tabs/TabsTrigger.tsx
 import { forwardRef as forwardRef32, useEffect as useEffect14, useRef as useRef16 } from "react";
-import { isNotNil as isNotNil35 } from "@wistia/type-guards";
+import { isNotNil as isNotNil36 } from "@wistia/type-guards";
 
 // src/components/Tabs/StyledRadixTabsTrigger.tsx
 import styled80 from "styled-components";
@@ -14148,8 +14185,8 @@ var TabsTrigger = forwardRef32(
       {
         ...otherProps,
         ref: combinedRef,
-        $hasLabel: isNotNil35(label),
-        "aria-label": isNotNil35(label) ? void 0 : ariaLabel,
+        $hasLabel: isNotNil36(label),
+        "aria-label": isNotNil36(label) ? void 0 : ariaLabel,
         disabled,
         value,
         children: [
@@ -14164,7 +14201,7 @@ TabsTrigger.displayName = "TabsTrigger";
 
 // src/components/Thumbnail/ThumbnailBadge.tsx
 import styled81 from "styled-components";
-import { isNotNil as isNotNil36 } from "@wistia/type-guards";
+import { isNotNil as isNotNil37 } from "@wistia/type-guards";
 import { jsx as jsx283, jsxs as jsxs53 } from "react/jsx-runtime";
 var StyledThumbnailBadge = styled81.div`
   align-items: center;
@@ -14192,7 +14229,7 @@ var StyledThumbnailBadge = styled81.div`
 `;
 var ThumbnailBadge = ({ icon, label, ...props }) => {
   return /* @__PURE__ */ jsxs53(StyledThumbnailBadge, { ...props, children: [
-    isNotNil36(icon) && icon,
+    isNotNil37(icon) && icon,
     /* @__PURE__ */ jsx283("span", { children: label })
   ] });
 };
@@ -14201,10 +14238,10 @@ ThumbnailBadge.displayName = "ThumbnailBadge";
 // src/components/Thumbnail/Thumbnail.tsx
 import { forwardRef as forwardRef33, useState as useState19, useRef as useRef17, useCallback as useCallback11, useMemo as useMemo12 } from "react";
 import styled83 from "styled-components";
-import { isNil as isNil17, isNotNil as isNotNil39, isUndefined as isUndefined7, isEmptyString as isEmptyString2, isString as isString2 } from "@wistia/type-guards";
+import { isNil as isNil17, isNotNil as isNotNil40, isUndefined as isUndefined7, isEmptyString as isEmptyString2, isString as isString2 } from "@wistia/type-guards";
 
 // src/private/helpers/getBackgroundGradient/getBackgroundGradient.ts
-import { isNotNil as isNotNil37 } from "@wistia/type-guards";
+import { isNotNil as isNotNil38 } from "@wistia/type-guards";
 import { css as css45 } from "styled-components";
 var gradients = {
   defaultDarkOne: css45`
@@ -14332,12 +14369,12 @@ var gradients = {
 };
 var gradientMap = Object.keys(gradients);
 var getBackgroundGradient = (gradientName = void 0) => {
-  return isNotNil37(gradientName) ? gradients[gradientName] : gradients.defaultDarkOne;
+  return isNotNil38(gradientName) ? gradients[gradientName] : gradients.defaultDarkOne;
 };
 
 // src/components/Thumbnail/ThumbnailStoryboardViewer.tsx
 import styled82 from "styled-components";
-import { isNotNil as isNotNil38 } from "@wistia/type-guards";
+import { isNotNil as isNotNil39 } from "@wistia/type-guards";
 import { jsx as jsx284, jsxs as jsxs54 } from "react/jsx-runtime";
 var ScrubLine = styled82.div`
   position: absolute;
@@ -14423,8 +14460,8 @@ var ThumbnailStoryboardViewer = ({
   );
   const backgroundSize = `${scaledStoryboardWidth}px ${scaledStoryboardHeight}px`;
   const backgroundImage = `url(${storyboardUrl})`;
-  const showScrubLine = isNotNil38(cursorPosition);
-  const scrubLinePosition = isNotNil38(cursorPosition) ? `${cursorPosition - 1}px` : "0";
+  const showScrubLine = isNotNil39(cursorPosition);
+  const scrubLinePosition = isNotNil39(cursorPosition) ? `${cursorPosition - 1}px` : "0";
   const viewerStyles = {
     position: "relative",
     overflow: "hidden",
@@ -14495,7 +14532,7 @@ var ThumbnailImage = ({ thumbnailImageType, thumbnailUrl }) => {
   );
 };
 var StyledThumbnail = styled83.div`
-  background-image: ${({ $backgroundUrl }) => isNotNil39($backgroundUrl) ? `url('${$backgroundUrl}')` : void 0};
+  background-image: ${({ $backgroundUrl }) => isNotNil40($backgroundUrl) ? `url('${$backgroundUrl}')` : void 0};
   ${({ $backgroundUrl, $gradientBackground }) => (
   // if we don't have $backgroundUrl show a gradient
   isNil17($backgroundUrl) ? getBackgroundGradient($gradientBackground) : void 0
@@ -14540,10 +14577,10 @@ var Thumbnail = forwardRef33(
     const storyboardElementRef = useRef17(null);
     const [cursorPosition, setCursorPosition] = useState19(null);
     const backgroundUrl = useMemo12(
-      () => thumbnailImageType === "square" && isNotNil39(thumbnailUrl) ? thumbnailUrl : void 0,
+      () => thumbnailImageType === "square" && isNotNil40(thumbnailUrl) ? thumbnailUrl : void 0,
       [thumbnailImageType, thumbnailUrl]
     );
-    const isScrubbable = isNotNil39(storyboard);
+    const isScrubbable = isNotNil40(storyboard);
     const trackStoryboardLoadStatus = useCallback11(() => {
       if (storyboardElementRef.current || !storyboard) {
         return storyboardElementRef.current;
@@ -14607,7 +14644,7 @@ var Thumbnail = forwardRef33(
     let thumbnailContent = null;
     if (shouldRenderStoryboard) {
       thumbnailContent = renderStoryboard();
-    } else if (isNotNil39(thumbnailUrl)) {
+    } else if (isNotNil40(thumbnailUrl)) {
       thumbnailContent = /* @__PURE__ */ jsx285(
         ThumbnailImage,
         {
@@ -14632,7 +14669,7 @@ var Thumbnail = forwardRef33(
         onMouseOut: handleMouseOut,
         role: "presentation",
         children: [
-          isNotNil39(children) ? children : null,
+          isNotNil40(children) ? children : null,
           thumbnailContent
         ]
       }
@@ -14750,7 +14787,7 @@ var ThumbnailCollage = ({
 
 // src/components/WistiaLogo/WistiaLogo.tsx
 import styled85, { css as css46 } from "styled-components";
-import { isNotNil as isNotNil40 } from "@wistia/type-guards";
+import { isNotNil as isNotNil41 } from "@wistia/type-guards";
 import { jsx as jsx287, jsxs as jsxs56 } from "react/jsx-runtime";
 var renderBrandmark = (brandmarkColor, iconOnly) => {
   if (iconOnly) {
@@ -14863,7 +14900,7 @@ var WistiaLogo = ({
       ...props,
       children: [
         /* @__PURE__ */ jsx287("title", { children: title }),
-        isNotNil40(description) ? /* @__PURE__ */ jsx287("desc", { children: description }) : null,
+        isNotNil41(description) ? /* @__PURE__ */ jsx287("desc", { children: description }) : null,
         renderBrandmark(brandmarkColor, iconOnly),
         renderLogotype(logotypeColor, iconOnly)
       ]
@@ -14919,6 +14956,65 @@ var InputPassword = forwardRef34(
   }
 );
 InputPassword.displayName = "InputPassword";
+
+// src/components/ContextMenu/ContextMenu.tsx
+import { useEffect as useEffect15, useState as useState21 } from "react";
+import { isNil as isNil18, isNotNil as isNotNil42 } from "@wistia/type-guards";
+import { jsx as jsx289 } from "react/jsx-runtime";
+var ContextMenu = ({
+  position,
+  triggerRef,
+  children,
+  onRequestClose = () => null
+}) => {
+  const [isRightClicked, setIsRightClicked] = useState21(false);
+  const [menuPosition, setMenuPosition] = useState21(position ?? { x: 0, y: 0 });
+  useEffect15(() => {
+    if (isNil18(position)) {
+      const onContextMenu = (event) => {
+        event.preventDefault();
+        setMenuPosition({ x: event.clientX, y: event.clientY });
+        setIsRightClicked(true);
+      };
+      const triggerEl = triggerRef?.current;
+      triggerEl?.addEventListener("contextmenu", onContextMenu);
+      return () => {
+        triggerEl?.removeEventListener("contextmenu", onContextMenu);
+      };
+    }
+    return () => null;
+  }, [position, triggerRef]);
+  const isOpen = isNotNil42(position) || isRightClicked;
+  return isOpen ? /* @__PURE__ */ jsx289(
+    Menu,
+    {
+      avoidCollisions: false,
+      isOpen,
+      onOpenChange: (next) => {
+        setIsRightClicked(next);
+        if (!next) {
+          onRequestClose();
+        }
+      },
+      trigger: /* @__PURE__ */ jsx289(
+        "button",
+        {
+          "aria-label": "context menu",
+          style: {
+            width: "1px",
+            height: "1px",
+            all: "unset",
+            position: "fixed",
+            top: menuPosition.y,
+            left: menuPosition.x
+          },
+          type: "button"
+        }
+      ),
+      children
+    }
+  ) : null;
+};
 export {
   ActionButton,
   Avatar,
@@ -14942,6 +15038,7 @@ export {
   ColorSchemeWrapper,
   Combobox2 as Combobox,
   ComboboxOption,
+  ContextMenu,
   DataCard,
   DataCardTrend,
   DataCards,