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

package/dist/index.cjs

@@ -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.
  *
@@ -13039,6 +13039,7 @@ var Combobox2 = ({
 // src/components/ContextMenu/ContextMenu.tsx
 var import_type_guards43 = require("@wistia/type-guards");
 var import_react61 = require("react");
+var import_react_dom = require("react-dom");
 
 // src/components/Menu/Menu.tsx
 var import_react_dropdown_menu = require("@radix-ui/react-dropdown-menu");
@@ -13708,7 +13709,8 @@ var ContextMenu = ({
   triggerRef,
   children,
   side = "bottom",
-  onRequestClose = () => null
+  onRequestClose = () => null,
+  compact = false
 }) => {
   const [isRightClicked, setIsRightClicked] = (0, import_react61.useState)(false);
   const [menuPosition, setMenuPosition] = (0, import_react61.useState)(position ?? { x: 0, y: 0 });
@@ -13728,9 +13730,13 @@ var ContextMenu = ({
     return () => null;
   }, [position, triggerRef]);
   const isOpen = (0, import_type_guards43.isNotNil)(position) || isRightClicked;
-  return isOpen ? /* @__PURE__ */ (0, import_jsx_runtime267.jsx)(
+  if (!isOpen) {
+    return null;
+  }
+  const menu = /* @__PURE__ */ (0, import_jsx_runtime267.jsx)(
     Menu,
     {
+      compact,
       isOpen,
       onOpenChange: (next) => {
         setIsRightClicked(next);
@@ -13756,7 +13762,11 @@ var ContextMenu = ({
       ),
       children
     }
-  ) : null;
+  );
+  if ((0, import_type_guards43.isNotNil)(triggerRef)) {
+    return (0, import_react_dom.createPortal)(menu, document.body);
+  }
+  return menu;
 };
 
 // src/components/DataCards/DataCard.tsx
@@ -14927,6 +14937,7 @@ var FormField = ({
   label,
   labelPosition,
   name,
+  required = false,
   value,
   ...props
 }) => {
@@ -14976,7 +14987,14 @@ var FormField = ({
       ...props,
       "data-label-position": labelPosition ?? formState.labelPosition,
       children: [
-        !isIntegratedLabel && /* @__PURE__ */ (0, import_jsx_runtime283.jsx)(Label, { htmlFor: computedId, children: label }),
+        !isIntegratedLabel && /* @__PURE__ */ (0, import_jsx_runtime283.jsx)(
+          Label,
+          {
+            htmlFor: computedId,
+            required,
+            children: label
+          }
+        ),
         (0, import_type_guards49.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime283.jsx)(FormControlLabelDescription, { id: descriptionId, children: description }) : null,
         (0, import_react73.cloneElement)(children, childProps),
         (0, import_type_guards49.isNotNil)(computedError) ? /* @__PURE__ */ (0, import_jsx_runtime283.jsxs)(import_jsx_runtime283.Fragment, { children: [
@@ -15506,7 +15524,7 @@ Mark.displayName = "Mark_UI";
 var import_react80 = require("react");
 var import_styled_components97 = __toESM(require("styled-components"));
 var import_react_dialog5 = require("@radix-ui/react-dialog");
-var import_type_guards57 = require("@wistia/type-guards");
+var import_type_guards58 = require("@wistia/type-guards");
 
 // src/components/Modal/ModalHeader.tsx
 var import_styled_components94 = __toESM(require("styled-components"));
@@ -15582,6 +15600,7 @@ var ModalHeader = ({
 var import_react79 = require("react");
 var import_styled_components95 = __toESM(require("styled-components"));
 var import_react_dialog3 = require("@radix-ui/react-dialog");
+var import_type_guards57 = require("@wistia/type-guards");
 
 // src/private/hooks/useFocusRestore/useFocusRestore.ts
 var import_react78 = require("react");
@@ -15719,9 +15738,14 @@ var StyledModalContent = (0, import_styled_components95.default)(import_react_di
     position: fixed;
     top: unset;
     left: unset;
-    width: ${({ $width }) => $width ?? DEFAULT_MODAL_WIDTH};
+    width: ${({ $width, $maxWidth }) => {
+  if ((0, import_type_guards57.isNotNil)($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);
@@ -15730,12 +15754,13 @@ var StyledModalContent = (0, import_styled_components95.default)(import_react_di
   }
 `;
 var ModalContent = (0, import_react79.forwardRef)(
-  ({ width, positionVariant = "fixed-top", children, ...props }, ref) => {
+  ({ width, positionVariant = "fixed-top", maxWidth, children, ...props }, ref) => {
     useFocusRestore();
     return /* @__PURE__ */ (0, import_jsx_runtime294.jsx)(
       StyledModalContent,
       {
         ref,
+        $maxWidth: maxWidth,
         $positionVariant: positionVariant,
         $width: width,
         "aria-describedby": void 0,
@@ -15805,6 +15830,7 @@ var Modal = (0, import_react80.forwardRef)(
     hideTitle = false,
     initialFocusRef,
     isOpen,
+    maxWidth,
     onRequestClose,
     positionVariant = "centered",
     title,
@@ -15815,7 +15841,7 @@ var Modal = (0, import_react80.forwardRef)(
       import_react_dialog5.Root,
       {
         onOpenChange: (open2) => {
-          if (!open2 && (0, import_type_guards57.isNotNil)(onRequestClose)) {
+          if (!open2 && (0, import_type_guards58.isNotNil)(onRequestClose)) {
             onRequestClose();
           }
         },
@@ -15826,8 +15852,9 @@ var Modal = (0, import_react80.forwardRef)(
             ModalContent,
             {
               ref,
+              maxWidth,
               onOpenAutoFocus: (event) => {
-                if ((0, import_type_guards57.isNotNil)(initialFocusRef) && initialFocusRef.current) {
+                if ((0, import_type_guards58.isNotNil)(initialFocusRef) && initialFocusRef.current) {
                   event.preventDefault();
                   requestAnimationFrame(() => {
                     initialFocusRef.current?.focus();
@@ -15839,7 +15866,7 @@ var Modal = (0, import_react80.forwardRef)(
               ...props,
               children: [
                 /* @__PURE__ */ (0, import_jsx_runtime295.jsx)(ModalScrollArea, { children: /* @__PURE__ */ (0, import_jsx_runtime295.jsx)(ModalBody, { children }) }),
-                (0, import_type_guards57.isNotNil)(footer) ? /* @__PURE__ */ (0, import_jsx_runtime295.jsx)(ModalFooter, { children: footer }) : null,
+                (0, import_type_guards58.isNotNil)(footer) ? /* @__PURE__ */ (0, import_jsx_runtime295.jsx)(ModalFooter, { children: footer }) : null,
                 hideCloseButton && hideTitle ? null : /* @__PURE__ */ (0, import_jsx_runtime295.jsx)(
                   ModalHeader,
                   {
@@ -15885,9 +15912,9 @@ var import_react_popover5 = require("@radix-ui/react-popover");
 var import_styled_components99 = __toESM(require("styled-components"));
 
 // src/private/helpers/getControls/getControlProps.tsx
-var import_type_guards58 = require("@wistia/type-guards");
+var import_type_guards59 = require("@wistia/type-guards");
 var getControlProps = (isOpen, onOpenChange) => {
-  return (0, import_type_guards58.isNotNil)(onOpenChange) && (0, import_type_guards58.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {};
+  return (0, import_type_guards59.isNotNil)(onOpenChange) && (0, import_type_guards59.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {};
 };
 
 // src/components/Popover/PopoverArrow.tsx
@@ -16043,7 +16070,7 @@ Popover.displayName = "Popover_UI";
 // src/components/ProgressBar/ProgressBar.tsx
 var import_styled_components100 = __toESM(require("styled-components"));
 var import_react_progress = require("@radix-ui/react-progress");
-var import_type_guards59 = require("@wistia/type-guards");
+var import_type_guards60 = require("@wistia/type-guards");
 var import_jsx_runtime299 = require("react/jsx-runtime");
 var ProgressBarWrapper = import_styled_components100.default.div`
   --progress-bar-height: 8px;
@@ -16099,7 +16126,7 @@ var ProgressBar = ({
   ...props
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime299.jsxs)(ProgressBarWrapper, { children: [
-    (0, import_type_guards59.isNotNil)(labelLeft) ? /* @__PURE__ */ (0, import_jsx_runtime299.jsx)(ProgressBarLabel, { children: labelLeft }) : null,
+    (0, import_type_guards60.isNotNil)(labelLeft) ? /* @__PURE__ */ (0, import_jsx_runtime299.jsx)(ProgressBarLabel, { children: labelLeft }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime299.jsx)(
       StyledProgressBar,
       {
@@ -16117,13 +16144,13 @@ var ProgressBar = ({
         )
       }
     ),
-    (0, import_type_guards59.isNotNil)(labelRight) ? /* @__PURE__ */ (0, import_jsx_runtime299.jsx)(ProgressBarLabel, { children: labelRight }) : null
+    (0, import_type_guards60.isNotNil)(labelRight) ? /* @__PURE__ */ (0, import_jsx_runtime299.jsx)(ProgressBarLabel, { children: labelRight }) : null
   ] });
 };
 ProgressBar.displayName = "ProgressBar_UI";
 
 // src/components/Radio/Radio.tsx
-var import_type_guards60 = require("@wistia/type-guards");
+var import_type_guards61 = require("@wistia/type-guards");
 var import_react81 = require("react");
 var import_styled_components101 = __toESM(require("styled-components"));
 var import_jsx_runtime300 = require("react/jsx-runtime");
@@ -16223,14 +16250,14 @@ var Radio = (0, import_react81.forwardRef)(
     ...props
   }, ref) => {
     const generatedId = (0, import_react81.useId)();
-    const computedId = (0, import_type_guards60.isNonEmptyString)(id) ? id : `wistia-ui-radio-${generatedId}`;
+    const computedId = (0, import_type_guards61.isNonEmptyString)(id) ? id : `wistia-ui-radio-${generatedId}`;
     const radioGroupContext = useRadioGroup();
     const contextName = radioGroupContext?.name;
     const contextOnChange = radioGroupContext?.onChange;
     const contextValue = radioGroupContext?.value;
     const radioName = name ?? contextName;
     const handleOnChange = onChange ?? contextOnChange;
-    const isChecked = (0, import_type_guards60.isNotUndefined)(value) && (0, import_type_guards60.isNotUndefined)(contextValue) ? contextValue === value : checked;
+    const isChecked = (0, import_type_guards61.isNotUndefined)(value) && (0, import_type_guards61.isNotUndefined)(contextValue) ? contextValue === value : checked;
     return /* @__PURE__ */ (0, import_jsx_runtime300.jsxs)(
       StyledRadioWrapper,
       {
@@ -16277,7 +16304,7 @@ var import_react83 = require("react");
 // src/components/RadioCard/RadioCardRoot.tsx
 var import_react82 = require("react");
 var import_styled_components102 = __toESM(require("styled-components"));
-var import_type_guards61 = require("@wistia/type-guards");
+var import_type_guards62 = require("@wistia/type-guards");
 var import_jsx_runtime301 = require("react/jsx-runtime");
 var checkedStyles = import_styled_components102.css`
   --wui-radio-card-border-color: var(--wui-color-focus-ring);
@@ -16399,14 +16426,14 @@ var RadioCardRoot = (0, import_react82.forwardRef)(
     ...props
   }, ref) => {
     const generatedId = (0, import_react82.useId)();
-    const computedId = (0, import_type_guards61.isNonEmptyString)(id) ? id : `wistia-ui-radio-${generatedId}`;
+    const computedId = (0, import_type_guards62.isNonEmptyString)(id) ? id : `wistia-ui-radio-${generatedId}`;
     const radioGroupContext = useRadioGroup();
     const contextName = radioGroupContext?.name;
     const contextOnChange = radioGroupContext?.onChange;
     const contextValue = radioGroupContext?.value;
     const radioName = name ?? contextName;
     const handleOnChange = onChange ?? contextOnChange;
-    const isChecked = (0, import_type_guards61.isNotUndefined)(value) && (0, import_type_guards61.isNotUndefined)(contextValue) ? contextValue === value : checked;
+    const isChecked = (0, import_type_guards62.isNotUndefined)(value) && (0, import_type_guards62.isNotUndefined)(contextValue) ? contextValue === value : checked;
     return /* @__PURE__ */ (0, import_jsx_runtime301.jsxs)(
       StyledCard2,
       {
@@ -16438,7 +16465,7 @@ RadioCardRoot.displayName = "RadioCardRoot_UI";
 
 // src/components/RadioCard/RadioCardDefaultLayout.tsx
 var import_styled_components104 = __toESM(require("styled-components"));
-var import_type_guards62 = require("@wistia/type-guards");
+var import_type_guards63 = require("@wistia/type-guards");
 
 // src/components/RadioCard/RadioCardIndicator.tsx
 var import_styled_components103 = __toESM(require("styled-components"));
@@ -16512,17 +16539,17 @@ var RadioCardDefaultLayout = ({
   showIndicator = true
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime302.jsxs)(StyledCardContent, { children: [
-    showIndicator ? /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(StyledIndicatorContainer, { $hasIcon: (0, import_type_guards62.isNotNil)(icon), children: /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(RadioCardIndicator, { "data-testid": "wui-radio-card-indicator" }) }) : null,
+    showIndicator ? /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(StyledIndicatorContainer, { $hasIcon: (0, import_type_guards63.isNotNil)(icon), children: /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(RadioCardIndicator, { "data-testid": "wui-radio-card-indicator" }) }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime302.jsxs)(Stack, { gap: "space-02", children: [
-      (0, import_type_guards62.isNotNil)(icon) && /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(StyledCardIcon, { "data-wui-radio-card-icon": true, children: icon }),
+      (0, import_type_guards63.isNotNil)(icon) && /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(StyledCardIcon, { "data-wui-radio-card-icon": true, children: icon }),
       /* @__PURE__ */ (0, import_jsx_runtime302.jsxs)(
         Stack,
         {
           gap: "space-01",
-          style: (0, import_type_guards62.isNotNil)(icon) ? { paddingLeft: 2 } : void 0,
+          style: (0, import_type_guards63.isNotNil)(icon) ? { paddingLeft: 2 } : void 0,
           children: [
-            (0, import_type_guards62.isNotNil)(label) && /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(Text, { variant: "label3", children: /* @__PURE__ */ (0, import_jsx_runtime302.jsx)("strong", { children: label }) }),
-            (0, import_type_guards62.isNotNil)(description) && /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(
+            (0, import_type_guards63.isNotNil)(label) && /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(Text, { variant: "label3", children: /* @__PURE__ */ (0, import_jsx_runtime302.jsx)("strong", { children: label }) }),
+            (0, import_type_guards63.isNotNil)(description) && /* @__PURE__ */ (0, import_jsx_runtime302.jsx)(
               Text,
               {
                 prominence: "secondary",
@@ -16705,7 +16732,7 @@ ScrollArea.displayName = "ScrollArea_UI";
 var import_react88 = require("react");
 var import_styled_components108 = __toESM(require("styled-components"));
 var import_react_toggle_group3 = require("@radix-ui/react-toggle-group");
-var import_type_guards64 = require("@wistia/type-guards");
+var import_type_guards65 = require("@wistia/type-guards");
 
 // src/components/SegmentedControl/useSelectedItemStyle.tsx
 var import_react86 = require("react");
@@ -16742,7 +16769,7 @@ var useSelectedItemStyle = () => {
 
 // src/components/SegmentedControl/SelectedItemIndicator.tsx
 var import_styled_components107 = __toESM(require("styled-components"));
-var import_type_guards63 = require("@wistia/type-guards");
+var import_type_guards64 = require("@wistia/type-guards");
 
 // src/components/SegmentedControl/useSegmentedControlValue.tsx
 var import_react87 = require("react");
@@ -16776,7 +16803,7 @@ var SelectedItemIndicatorDiv = import_styled_components107.default.div`
 var SelectedItemIndicator = () => {
   const selectedValue = useSegmentedControlValue();
   const { selectedItemIndicatorStyle } = useSelectedItemStyle();
-  if (!selectedValue || (0, import_type_guards63.isUndefined)(selectedItemIndicatorStyle)) {
+  if (!selectedValue || (0, import_type_guards64.isUndefined)(selectedItemIndicatorStyle)) {
     return null;
   }
   return /* @__PURE__ */ (0, import_jsx_runtime307.jsx)(
@@ -16813,7 +16840,7 @@ var SegmentedControl = (0, import_react88.forwardRef)(
     onSelectedValueChange,
     ...props
   }, ref) => {
-    if ((0, import_type_guards64.isNil)(children)) {
+    if ((0, import_type_guards65.isNil)(children)) {
       return null;
     }
     return /* @__PURE__ */ (0, import_jsx_runtime308.jsx)(
@@ -16842,7 +16869,7 @@ SegmentedControl.displayName = "SegmentedControl_UI";
 var import_react89 = require("react");
 var import_styled_components109 = __toESM(require("styled-components"));
 var import_react_toggle_group4 = require("@radix-ui/react-toggle-group");
-var import_type_guards65 = require("@wistia/type-guards");
+var import_type_guards66 = require("@wistia/type-guards");
 var import_jsx_runtime309 = require("react/jsx-runtime");
 var segmentedControlItemStyles = import_styled_components109.css`
   all: unset; /* ToggleGroupItem is a button element */
@@ -16958,8 +16985,8 @@ var SegmentedControlItem = (0, import_react89.forwardRef)(
       {
         ref: combinedRef,
         ...otherProps,
-        $hasLabel: (0, import_type_guards65.isNotNil)(label),
-        "aria-label": (0, import_type_guards65.isNotNil)(label) ? void 0 : ariaLabel,
+        $hasLabel: (0, import_type_guards66.isNotNil)(label),
+        "aria-label": (0, import_type_guards66.isNotNil)(label) ? void 0 : ariaLabel,
         disabled,
         onClick: handleClick,
         value,
@@ -17124,7 +17151,7 @@ Select.displayName = "Select_UI";
 var import_react_select2 = require("@radix-ui/react-select");
 var import_react91 = require("react");
 var import_styled_components111 = __toESM(require("styled-components"));
-var import_type_guards66 = require("@wistia/type-guards");
+var import_type_guards67 = require("@wistia/type-guards");
 var import_jsx_runtime311 = require("react/jsx-runtime");
 var StyledItem = (0, import_styled_components111.default)(import_react_select2.Item)`
   ${getTypographicStyles("label3")}
@@ -17161,7 +17188,7 @@ var SelectOption = (0, import_react91.forwardRef)(
         ref: forwardedRef,
         $checkmarkVerticalAlign: checkmarkVerticalAlign,
         children: [
-          (0, import_type_guards66.isNotNil)(selectedDisplayValue) ? /* @__PURE__ */ (0, import_jsx_runtime311.jsxs)("div", { children: [
+          (0, import_type_guards67.isNotNil)(selectedDisplayValue) ? /* @__PURE__ */ (0, import_jsx_runtime311.jsxs)("div", { children: [
             children,
             /* @__PURE__ */ (0, import_jsx_runtime311.jsx)("div", { style: { display: "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(import_react_select2.ItemText, { children: selectedDisplayValue }) })
           ] }) : /* @__PURE__ */ (0, import_jsx_runtime311.jsx)(import_react_select2.ItemText, { children }),
@@ -17203,7 +17230,7 @@ var SelectOptionGroup = ({ children, label, ...props }) => {
 // src/components/Slider/Slider.tsx
 var import_react_slider2 = require("@radix-ui/react-slider");
 var import_styled_components113 = __toESM(require("styled-components"));
-var import_type_guards67 = require("@wistia/type-guards");
+var import_type_guards68 = require("@wistia/type-guards");
 var import_jsx_runtime313 = require("react/jsx-runtime");
 var SliderContainer = import_styled_components113.default.div`
   --wui-slider-track-color: var(--wui-gray-6);
@@ -17282,7 +17309,7 @@ var Slider = ({
   "data-testid": dataTestId = "ui-slider",
   ...otherProps
 }) => {
-  if (!((0, import_type_guards67.isNonEmptyString)(ariaLabel) || (0, import_type_guards67.isNonEmptyString)(ariaLabelledby))) {
+  if (!((0, import_type_guards68.isNonEmptyString)(ariaLabel) || (0, import_type_guards68.isNonEmptyString)(ariaLabelledby))) {
     throw new Error(
       "UI Slider: Sliders should have an accessible name. Add a label using the aria-label or aria-labelledby prop."
     );
@@ -17444,7 +17471,7 @@ var TableRow = ({ children, ...props }) => {
 // src/components/Tabs/Tabs.tsx
 var import_react_tabs = require("@radix-ui/react-tabs");
 var import_react98 = require("react");
-var import_type_guards68 = require("@wistia/type-guards");
+var import_type_guards69 = require("@wistia/type-guards");
 
 // src/components/Tabs/useTabsValue.tsx
 var import_react97 = require("react");
@@ -17481,10 +17508,10 @@ var Tabs = ({
     ...props,
     onValueChange
   };
-  if ((0, import_type_guards68.isNotNil)(value)) {
+  if ((0, import_type_guards69.isNotNil)(value)) {
     rootProps.value = value;
   }
-  if ((0, import_type_guards68.isNotNil)(defaultValue)) {
+  if ((0, import_type_guards69.isNotNil)(defaultValue)) {
     rootProps.defaultValue = defaultValue;
   }
   return /* @__PURE__ */ (0, import_jsx_runtime320.jsx)(import_react_tabs.Root, { ...rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime320.jsx)(TabsValueProvider, { value: value ?? defaultValue, children: /* @__PURE__ */ (0, import_jsx_runtime320.jsx)(SelectedItemStyleProvider, { children }) }) });
@@ -17504,7 +17531,7 @@ var import_react_tabs3 = require("@radix-ui/react-tabs");
 var import_styled_components121 = __toESM(require("styled-components"));
 
 // src/components/Tabs/SelectedTabIndicator.tsx
-var import_type_guards69 = require("@wistia/type-guards");
+var import_type_guards70 = require("@wistia/type-guards");
 
 // src/components/Tabs/TabsSelectedItemIndicatorDiv.tsx
 var import_styled_components120 = __toESM(require("styled-components"));
@@ -17519,7 +17546,7 @@ var import_jsx_runtime322 = require("react/jsx-runtime");
 var SelectedTabIndicator = () => {
   const { selectedItemIndicatorStyle } = useSelectedItemStyle();
   const selectedValue = useTabsValue();
-  if (selectedValue == null || (0, import_type_guards69.isUndefined)(selectedItemIndicatorStyle)) {
+  if (selectedValue == null || (0, import_type_guards70.isUndefined)(selectedItemIndicatorStyle)) {
     return null;
   }
   return /* @__PURE__ */ (0, import_jsx_runtime322.jsx)(
@@ -17553,7 +17580,7 @@ TabsList.displayName = "TabsList_UI";
 
 // src/components/Tabs/TabsTrigger.tsx
 var import_react99 = require("react");
-var import_type_guards70 = require("@wistia/type-guards");
+var import_type_guards71 = require("@wistia/type-guards");
 
 // src/components/Tabs/StyledRadixTabsTrigger.tsx
 var import_styled_components122 = __toESM(require("styled-components"));
@@ -17604,8 +17631,8 @@ var TabsTrigger = (0, import_react99.forwardRef)(
       {
         ...otherProps,
         ref: combinedRef,
-        $hasLabel: (0, import_type_guards70.isNotNil)(label),
-        "aria-label": (0, import_type_guards70.isNotNil)(label) ? void 0 : ariaLabel,
+        $hasLabel: (0, import_type_guards71.isNotNil)(label),
+        "aria-label": (0, import_type_guards71.isNotNil)(label) ? void 0 : ariaLabel,
         disabled,
         value,
         children: [
@@ -17620,7 +17647,7 @@ TabsTrigger.displayName = "TabsTrigger_UI";
 
 // src/components/Thumbnail/ThumbnailBadge.tsx
 var import_styled_components123 = __toESM(require("styled-components"));
-var import_type_guards71 = require("@wistia/type-guards");
+var import_type_guards72 = require("@wistia/type-guards");
 var import_jsx_runtime325 = require("react/jsx-runtime");
 var StyledThumbnailBadge = import_styled_components123.default.div`
   align-items: center;
@@ -17649,7 +17676,7 @@ var StyledThumbnailBadge = import_styled_components123.default.div`
 `;
 var ThumbnailBadge = ({ icon, label, ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime325.jsxs)(StyledThumbnailBadge, { ...props, children: [
-    (0, import_type_guards71.isNotNil)(icon) && icon,
+    (0, import_type_guards72.isNotNil)(icon) && icon,
     /* @__PURE__ */ (0, import_jsx_runtime325.jsx)("span", { children: label })
   ] });
 };
@@ -17658,10 +17685,10 @@ ThumbnailBadge.displayName = "ThumbnailBadge_UI";
 // src/components/Thumbnail/Thumbnail.tsx
 var import_react100 = require("react");
 var import_styled_components126 = __toESM(require("styled-components"));
-var import_type_guards74 = require("@wistia/type-guards");
+var import_type_guards75 = require("@wistia/type-guards");
 
 // src/private/helpers/getBackgroundGradient/getBackgroundGradient.ts
-var import_type_guards72 = require("@wistia/type-guards");
+var import_type_guards73 = require("@wistia/type-guards");
 var import_styled_components124 = require("styled-components");
 var gradients = {
   defaultDarkOne: import_styled_components124.css`
@@ -17789,12 +17816,12 @@ var gradients = {
 };
 var gradientMap = Object.keys(gradients);
 var getBackgroundGradient = (gradientName = void 0) => {
-  return (0, import_type_guards72.isNotNil)(gradientName) ? gradients[gradientName] : gradients.defaultDarkOne;
+  return (0, import_type_guards73.isNotNil)(gradientName) ? gradients[gradientName] : gradients.defaultDarkOne;
 };
 
 // src/components/Thumbnail/ThumbnailStoryboardViewer.tsx
 var import_styled_components125 = __toESM(require("styled-components"));
-var import_type_guards73 = require("@wistia/type-guards");
+var import_type_guards74 = require("@wistia/type-guards");
 var import_jsx_runtime326 = require("react/jsx-runtime");
 var ScrubLine = import_styled_components125.default.div`
   position: absolute;
@@ -17888,8 +17915,8 @@ var ThumbnailStoryboardViewer = ({
   );
   const backgroundSize = `${scaledStoryboardWidth}px ${scaledStoryboardHeight}px`;
   const backgroundImage = `url(${storyboardUrl})`;
-  const showScrubLine = (0, import_type_guards73.isNotNil)(cursorPosition);
-  const scrubLinePosition = (0, import_type_guards73.isNotNil)(cursorPosition) ? `${cursorPosition - 1}px` : "0";
+  const showScrubLine = (0, import_type_guards74.isNotNil)(cursorPosition);
+  const scrubLinePosition = (0, import_type_guards74.isNotNil)(cursorPosition) ? `${cursorPosition - 1}px` : "0";
   const viewerStyles = {
     position: "relative",
     overflow: "hidden",
@@ -17960,10 +17987,10 @@ var ThumbnailImage = ({ thumbnailImageType, thumbnailUrl }) => {
   );
 };
 var StyledThumbnail = import_styled_components126.default.div`
-  background-image: ${({ $backgroundUrl }) => (0, import_type_guards74.isNotNil)($backgroundUrl) ? `url('${$backgroundUrl}')` : void 0};
+  background-image: ${({ $backgroundUrl }) => (0, import_type_guards75.isNotNil)($backgroundUrl) ? `url('${$backgroundUrl}')` : void 0};
   ${({ $backgroundUrl, $gradientBackground }) => (
   // if we don't have $backgroundUrl show a gradient
-  (0, import_type_guards74.isNil)($backgroundUrl) ? getBackgroundGradient($gradientBackground) : void 0
+  (0, import_type_guards75.isNil)($backgroundUrl) ? getBackgroundGradient($gradientBackground) : void 0
 )};
   background-position: center center;
   background-size: cover;
@@ -17995,7 +18022,7 @@ var StoryboardRenderer = ({
     frameCount,
     aspectRatio
   } = storyboard;
-  const targetWidth = (0, import_type_guards74.isString)(width) ? parseInt(width, 10) : Number(width);
+  const targetWidth = (0, import_type_guards75.isString)(width) ? parseInt(width, 10) : Number(width);
   const effectiveCursorPosition = isStoryboardReady ? cursorPosition : null;
   return /* @__PURE__ */ (0, import_jsx_runtime327.jsx)(
     ThumbnailStoryboardViewer,
@@ -18039,10 +18066,10 @@ var Thumbnail = (0, import_react100.forwardRef)(
     const storyboardElementRef = (0, import_react100.useRef)(null);
     const [cursorPosition, setCursorPosition] = (0, import_react100.useState)(null);
     const backgroundUrl = (0, import_react100.useMemo)(
-      () => thumbnailImageType === "square" && (0, import_type_guards74.isNotNil)(thumbnailUrl) ? thumbnailUrl : void 0,
+      () => thumbnailImageType === "square" && (0, import_type_guards75.isNotNil)(thumbnailUrl) ? thumbnailUrl : void 0,
       [thumbnailImageType, thumbnailUrl]
     );
-    const isScrubbable = (0, import_type_guards74.isNotNil)(storyboard);
+    const isScrubbable = (0, import_type_guards75.isNotNil)(storyboard);
     const trackStoryboardLoadStatus = (0, import_react100.useCallback)(() => {
       if (storyboardElementRef.current || !storyboard) {
         return storyboardElementRef.current;
@@ -18072,7 +18099,7 @@ var Thumbnail = (0, import_react100.forwardRef)(
       setCursorPosition(null);
     }, [isScrubbable]);
     const shouldRenderStoryboard = (0, import_react100.useMemo)(() => {
-      if ((0, import_type_guards74.isNil)(storyboard) || (0, import_type_guards74.isUndefined)(height) || (0, import_type_guards74.isEmptyString)(height)) {
+      if ((0, import_type_guards75.isNil)(storyboard) || (0, import_type_guards75.isUndefined)(height) || (0, import_type_guards75.isEmptyString)(height)) {
         return false;
       }
       return isScrubbable && isMouseOver && isStoryboardReady;
@@ -18089,7 +18116,7 @@ var Thumbnail = (0, import_react100.forwardRef)(
           width
         }
       );
-    } else if ((0, import_type_guards74.isNotNil)(thumbnailUrl)) {
+    } else if ((0, import_type_guards75.isNotNil)(thumbnailUrl)) {
       thumbnailContent = /* @__PURE__ */ (0, import_jsx_runtime327.jsx)(
         ThumbnailImage,
         {
@@ -18114,7 +18141,7 @@ var Thumbnail = (0, import_react100.forwardRef)(
         onMouseOut: handleMouseOut,
         role: "presentation",
         children: [
-          (0, import_type_guards74.isNotNil)(children) ? children : null,
+          (0, import_type_guards75.isNotNil)(children) ? children : null,
           thumbnailContent
         ]
       }
@@ -18126,7 +18153,7 @@ Thumbnail.displayName = "Thumbnail_UI";
 // src/components/ThumbnailCollage/ThumbnailCollage.tsx
 var import_react101 = __toESM(require("react"));
 var import_styled_components127 = __toESM(require("styled-components"));
-var import_type_guards75 = require("@wistia/type-guards");
+var import_type_guards76 = require("@wistia/type-guards");
 var import_jsx_runtime328 = (
   // ThumbnailCollage will fallback to a Thumbnail with a gradient background if no children are provided
   require("react/jsx-runtime")
@@ -18206,7 +18233,7 @@ var ThumbnailCollage = ({
 }) => {
   const thumbnailArray = import_react101.default.Children.toArray(children);
   const truncatedThumbnails = thumbnailArray.slice(0, 3);
-  const thumbnails = (0, import_type_guards75.isNonEmptyArray)(thumbnailArray) ? truncatedThumbnails.map((child) => {
+  const thumbnails = (0, import_type_guards76.isNonEmptyArray)(thumbnailArray) ? truncatedThumbnails.map((child) => {
     return import_react101.default.cloneElement(child, {
       ...child.props,
       children: void 0
@@ -18234,7 +18261,7 @@ var ThumbnailCollage = ({
 
 // src/components/WistiaLogo/WistiaLogo.tsx
 var import_styled_components128 = __toESM(require("styled-components"));
-var import_type_guards76 = require("@wistia/type-guards");
+var import_type_guards77 = require("@wistia/type-guards");
 var import_jsx_runtime329 = require("react/jsx-runtime");
 var renderBrandmark = (brandmarkColor, iconOnly) => {
   if (iconOnly) {
@@ -18347,7 +18374,7 @@ var WistiaLogo = ({
       ...props,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime329.jsx)("title", { children: title }),
-        (0, import_type_guards76.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime329.jsx)("desc", { children: description }) : null,
+        (0, import_type_guards77.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime329.jsx)("desc", { children: description }) : null,
         renderBrandmark(brandmarkColor, iconOnly),
         renderLogotype(logotypeColor, iconOnly)
       ]
@@ -18359,7 +18386,7 @@ WistiaLogo.displayName = "WistiaLogo_UI";
 
 // src/components/SplitButton/SplitButton.tsx
 var import_styled_components129 = __toESM(require("styled-components"));
-var import_type_guards77 = require("@wistia/type-guards");
+var import_type_guards78 = require("@wistia/type-guards");
 var import_react102 = require("react");
 var import_jsx_runtime330 = require("react/jsx-runtime");
 var StyledSplitButton = import_styled_components129.default.span`
@@ -18406,7 +18433,7 @@ var SplitButton = ({
         children
       }
     ),
-    (0, import_type_guards77.isNotNil)(menuItems) && /* @__PURE__ */ (0, import_jsx_runtime330.jsx)(
+    (0, import_type_guards78.isNotNil)(menuItems) && /* @__PURE__ */ (0, import_jsx_runtime330.jsx)(
       Menu,
       {
         ...menuProps,
@@ -18425,7 +18452,7 @@ var SplitButton = ({
         children: menuItems
       }
     ),
-    (0, import_type_guards77.isNotNil)(secondaryAction) && (0, import_react102.cloneElement)(secondaryAction, { disabled, size, unstyled, variant, colorScheme })
+    (0, import_type_guards78.isNotNil)(secondaryAction) && (0, import_react102.cloneElement)(secondaryAction, { disabled, size, unstyled, variant, colorScheme })
   ] });
 };
 SplitButton.displayName = "SplitButton_UI";