@wistia/ui 0.6.45 → 0.7.0-beta.09ed20f2.84f70f9

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.6.45
+ * @license @wistia/ui v0.7.0-beta.09ed20f2.84f70f9
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -118,8 +118,6 @@ __export(index_exports, {
   colorSchemeOptions: () => colorSchemeOptions,
   copyToClipboard: () => copyToClipboard,
   dateTime: () => dateTime,
-  ellipsisFlexParentStyle: () => ellipsisFlexParentStyle,
-  ellipsisStyle: () => ellipsisStyle,
   iconSizeMap: () => iconSizeMap,
   mergeRefs: () => mergeRefs,
   mq: () => mq,
@@ -2109,6 +2107,10 @@ var isValidRef = (value) => {
   return (0, import_type_guards7.isNotNil)(value) && (0, import_type_guards7.isRecord)(value) && "current" in value;
 };
 
+// src/private/helpers/noOpFn/noOpFn.ts
+var noOpFn = () => {
+};
+
 // src/private/hooks/useEvent/useEvent.ts
 var isEventTargetSupported = (eventTarget) => (
   // @ts-expect-error the compiler thinks that addEventListener may not exist on eventTarget, but we still need to check it.
@@ -2133,8 +2135,7 @@ var useEvent = (eventName, eventHandler, eventTarget = window, eventOptions = {}
       if (savedEventHandler.current !== void 0) {
         return savedEventHandler.current(event);
       }
-      return () => {
-      };
+      return noOpFn;
     };
     target.addEventListener(eventName, eventListener, savedEventOptions.current);
     return () => {
@@ -2208,8 +2209,7 @@ var useLockBodyScroll = (locked) => {
         document.body.style.overflow = originalStyle;
       };
     }
-    return () => {
-    };
+    return noOpFn;
   }, [locked]);
 };
 
@@ -2346,6 +2346,12 @@ var ellipsisStyle = import_styled_components13.css`
     }
   }
 `;
+var lineClampStyle = import_styled_components13.css`
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 1;
+  display: -webkit-box !important;
+  white-space: initial;
+`;
 var ellipsisFlexParentStyle = import_styled_components13.css`
   min-width: 0;
 `;
@@ -2354,10 +2360,8 @@ var EllipsisComponent = import_styled_components13.default.span`
   ${({ $lines }) => {
   if ((0, import_type_guards9.isNotNil)($lines)) {
     return import_styled_components13.css`
-        -webkit-box-orient: vertical;
+        ${lineClampStyle};
         -webkit-line-clamp: ${$lines};
-        display: -webkit-box;
-        white-space: initial;
       `;
   }
   return void 0;
@@ -7028,7 +7032,7 @@ var Link = (0, import_react15.forwardRef)(
   }, ref) => {
     const inRouterContext = (0, import_react_router_dom.useInRouterContext)();
     const to = generateHref(props.href, type, disabled);
-    const handleClick = async (event, routingCallback = null) => {
+    const handleClick = async (event) => {
       if (disabled) {
         event.preventDefault();
       } else if (beforeAction) {
@@ -7040,11 +7044,9 @@ var Link = (0, import_react15.forwardRef)(
         } finally {
           if ((0, import_type_guards14.isFunction)(props.onClick)) {
             props.onClick(event);
-          } else if (routingCallback !== null) {
-            routingCallback();
-          } else if ((0, import_type_guards14.isNotNil)(to)) {
+          }
+          if (!inRouterContext && (0, import_type_guards14.isNotNil)(to)) {
             window.location.assign(to);
-          } else {
           }
         }
       } else if ((0, import_type_guards14.isFunction)(props.onClick)) {
@@ -8476,11 +8478,12 @@ var CollapsibleContent = ({ clamp, children }) => {
 
 // src/components/DataCards/DataCard.tsx
 var import_styled_components39 = __toESM(require("styled-components"));
-var import_type_guards28 = require("@wistia/type-guards");
+var import_type_guards29 = require("@wistia/type-guards");
 
 // src/components/Heading/Heading.tsx
 var import_react26 = require("react");
 var import_styled_components38 = __toESM(require("styled-components"));
+var import_type_guards28 = require("@wistia/type-guards");
 var import_jsx_runtime212 = require("react/jsx-runtime");
 var heroStyle = import_styled_components38.css`
   --font-family: var(--wui-typography-heading-hero-family);
@@ -8542,7 +8545,18 @@ var StyledHeading = import_styled_components38.default.div`
   line-height: var(--line-height);
   color: var(--wui-color-text);
   ${({ $variant }) => variantStyleMap[$variant]}
-  ${({ $ellipsis }) => $ellipsis && ellipsisStyle};
+  ${({ $truncate }) => {
+  if ((0, import_type_guards28.isNotNil)($truncate)) {
+    return import_styled_components38.css`
+        ${ellipsisStyle};
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: ${$truncate};
+        display: -webkit-box;
+        white-space: initial;
+      `;
+  }
+  return void 0;
+}}
   ${({ $inline }) => $inline && import_styled_components38.css`
       display: inline-block;
     `}
@@ -8571,9 +8585,9 @@ var HeadingComponent = (0, import_react26.forwardRef)(
     align = "left",
     colorScheme = "inherit",
     disabled = false,
-    ellipsis = false,
     inline = false,
     preventUserSelect = false,
+    truncate,
     variant = "heading1",
     renderAs,
     ...props
@@ -8584,9 +8598,9 @@ var HeadingComponent = (0, import_react26.forwardRef)(
       $align: align,
       $colorScheme: colorScheme,
       $disabled: disabled,
-      $ellipsis: ellipsis,
       $inline: inline,
       $preventUserSelect: preventUserSelect,
+      $truncate: truncate,
       $variant: variant,
       as: renderAs ?? variantElementMap[variant],
       ...props
@@ -8685,8 +8699,8 @@ var DataCard = ({
           children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(StyledLoadingValue, {}) : value
         }
       ),
-      (0, import_type_guards28.isNotNull)(upperRightSlot) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(StyledSlot, { children: upperRightSlot }),
-      (0, import_type_guards28.isNotNull)(trend) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(StyledDataCardTrendContainer, { children: trend })
+      (0, import_type_guards29.isNotNull)(upperRightSlot) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(StyledSlot, { children: upperRightSlot }),
+      (0, import_type_guards29.isNotNull)(trend) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(StyledDataCardTrendContainer, { children: trend })
     ]
   }
 );
@@ -8732,6 +8746,7 @@ var import_styled_components42 = __toESM(require("styled-components"));
 // src/components/Text/Text.tsx
 var import_react27 = require("react");
 var import_styled_components41 = __toESM(require("styled-components"));
+var import_type_guards30 = require("@wistia/type-guards");
 var import_jsx_runtime215 = require("react/jsx-runtime");
 var bodyBoldStyles = import_styled_components41.css`
   > strong,
@@ -8875,7 +8890,16 @@ var StyledText = import_styled_components41.default.div`
   font-style: normal;
   margin: 0;
   ${({ $variant }) => variantStyleMap2[$variant]}
-  ${({ $ellipsis }) => $ellipsis && ellipsisStyle};
+  ${({ $truncate }) => {
+  if ((0, import_type_guards30.isNotNil)($truncate)) {
+    return import_styled_components41.css`
+        ${ellipsisStyle};
+        ${lineClampStyle};
+        -webkit-line-clamp: ${$truncate};
+      `;
+  }
+  return void 0;
+}}
   ${({ $inline }) => $inline && import_styled_components41.css`
       display: inline-block;
     `}
@@ -8901,10 +8925,10 @@ var TextComponent = (0, import_react27.forwardRef)(
     align = "left",
     colorScheme = "inherit",
     disabled = false,
-    ellipsis = false,
     inline = false,
     preventUserSelect = false,
     prominence = "primary",
+    truncate,
     variant = "body2",
     renderAs,
     ...props
@@ -8916,10 +8940,10 @@ var TextComponent = (0, import_react27.forwardRef)(
         $align: align,
         $colorScheme: colorScheme,
         $disabled: disabled,
-        $ellipsis: ellipsis,
         $inline: inline,
         $preventUserSelect: preventUserSelect,
         $prominence: prominence,
+        $truncate: truncate,
         $variant: variant,
         as: renderAs ?? variantElementMap2[variant],
         ...props
@@ -9120,7 +9144,7 @@ Tooltip.displayName = "Tooltip";
 // src/components/Input/Input.tsx
 var import_react28 = require("react");
 var import_styled_components46 = __toESM(require("styled-components"));
-var import_type_guards29 = require("@wistia/type-guards");
+var import_type_guards31 = require("@wistia/type-guards");
 
 // src/css/sharedStyles/inputCssVariables.ts
 var import_styled_components45 = require("styled-components");
@@ -9258,27 +9282,27 @@ var Input = (0, import_react28.forwardRef)(
     const internalRef = (0, import_react28.useRef)();
     const ref = (
       // eslint-disable-next-line react-compiler/react-compiler
-      (0, import_type_guards29.isNotNil)(externalRef) && (0, import_type_guards29.isRecord)(externalRef) && "current" in externalRef ? externalRef : internalRef
+      (0, import_type_guards31.isNotNil)(externalRef) && (0, import_type_guards31.isRecord)(externalRef) && "current" in externalRef ? externalRef : internalRef
     );
     let leftIconToDisplay = leftIcon;
-    if ((0, import_type_guards29.isNil)(leftIcon) && type === "search") {
+    if ((0, import_type_guards31.isNil)(leftIcon) && type === "search") {
       leftIconToDisplay = /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(Icon, { type: "search" });
     }
-    if ((0, import_type_guards29.isNotNil)(leftIconToDisplay)) {
+    if ((0, import_type_guards31.isNotNil)(leftIconToDisplay)) {
       leftIconToDisplay = (0, import_react28.cloneElement)(leftIconToDisplay, {
         size: "md",
         className: "wui-input-left-icon"
       });
     }
     let rightIconToDisplay = rightIcon;
-    if ((0, import_type_guards29.isNotNil)(rightIconToDisplay)) {
+    if ((0, import_type_guards31.isNotNil)(rightIconToDisplay)) {
       rightIconToDisplay = (0, import_react28.cloneElement)(rightIconToDisplay, {
         size: "md",
         className: "wui-input-right-icon"
       });
     }
     const handleFocus2 = (event) => {
-      if ((0, import_type_guards29.isNotNil)(props.onFocus)) {
+      if ((0, import_type_guards31.isNotNil)(props.onFocus)) {
         props.onFocus(event);
       }
       if (autoSelect && isValidRef(ref) && "current" in ref) {
@@ -9459,7 +9483,7 @@ var EditableHeading = ({
 // src/components/Form/Form.tsx
 var import_react31 = require("react");
 var import_styled_components49 = __toESM(require("styled-components"));
-var import_type_guards30 = require("@wistia/type-guards");
+var import_type_guards32 = require("@wistia/type-guards");
 
 // src/components/Stack/Stack.tsx
 var import_react30 = require("react");
@@ -9525,7 +9549,7 @@ var FormComponent = ({
   const id = props.id ?? autoId;
   const handleValidate = (nextFormData) => {
     const nextData = Object.fromEntries(nextFormData.entries());
-    if ((0, import_type_guards30.isUndefined)(validate)) {
+    if ((0, import_type_guards32.isUndefined)(validate)) {
       return {};
     }
     return validate(nextData);
@@ -9535,7 +9559,7 @@ var FormComponent = ({
       props.onBlur(event);
     }
     const formData = new FormData(event.currentTarget);
-    if ((0, import_type_guards30.isNotUndefined)(validate)) {
+    if ((0, import_type_guards32.isNotUndefined)(validate)) {
       handleValidate(formData);
     }
   };
@@ -9632,7 +9656,7 @@ var useFormState = (action, initialData = {}) => {
 
 // src/components/Form/FormErrorSummary.tsx
 var import_react33 = require("react");
-var import_type_guards31 = require("@wistia/type-guards");
+var import_type_guards33 = require("@wistia/type-guards");
 var import_jsx_runtime223 = require("react/jsx-runtime");
 var ErrorItem = ({ name, error, formId }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime223.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(Link, { href: `#${formId}-${name}`, children: error }) }, name);
@@ -9646,8 +9670,8 @@ var FormErrorSummary = ({ description }) => {
   }
   return /* @__PURE__ */ (0, import_jsx_runtime223.jsxs)("div", { ref, children: [
     /* @__PURE__ */ (0, import_jsx_runtime223.jsx)("p", { children: description }),
-    /* @__PURE__ */ (0, import_jsx_runtime223.jsx)("ul", { children: Object.entries(errors).filter(([, error]) => (0, import_type_guards31.isNotUndefined)(error)).map(
-      ([name, error]) => (0, import_type_guards31.isArray)(error) ? error.map((err) => /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime223.jsx)("ul", { children: Object.entries(errors).filter(([, error]) => (0, import_type_guards33.isNotUndefined)(error)).map(
+      ([name, error]) => (0, import_type_guards33.isArray)(error) ? error.map((err) => /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(
         ErrorItem,
         {
           error: err,
@@ -9671,7 +9695,7 @@ var FormErrorSummary = ({ description }) => {
 // src/components/FormField/FormField.tsx
 var import_react36 = require("react");
 var import_styled_components52 = __toESM(require("styled-components"));
-var import_type_guards32 = require("@wistia/type-guards");
+var import_type_guards34 = require("@wistia/type-guards");
 
 // src/components/Label/Label.tsx
 var import_styled_components50 = __toESM(require("styled-components"));
@@ -9831,7 +9855,7 @@ var StyledErrorList = import_styled_components52.default.ul`
   gap: var(--wui-space-01);
 `;
 var ErrorMessages = ({ errors, id }) => {
-  const isMultipleErrors = (0, import_type_guards32.isArray)(errors);
+  const isMultipleErrors = (0, import_type_guards34.isArray)(errors);
   return isMultipleErrors ? /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(StyledErrorList, { children: errors.map((error, index) => /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(
     Text,
     {
@@ -9881,19 +9905,19 @@ var FormField = ({
     "aria-describedby": ariaDescribedby,
     ...props
   };
-  if ((0, import_type_guards32.isUndefined)(value) && (0, import_type_guards32.isNotUndefined)(defaultValue)) {
+  if ((0, import_type_guards34.isUndefined)(value) && (0, import_type_guards34.isNotUndefined)(defaultValue)) {
     childProps = {
       ...childProps,
       defaultValue
     };
   }
-  if ((0, import_type_guards32.isNotNil)(checkboxGroup)) {
-    const computedName = (0, import_type_guards32.isNotNil)(checkboxGroup.name) ? `${checkboxGroup.name}[${name}]` : name;
+  if ((0, import_type_guards34.isNotNil)(checkboxGroup)) {
+    const computedName = (0, import_type_guards34.isNotNil)(checkboxGroup.name) ? `${checkboxGroup.name}[${name}]` : name;
     const handleChange = (event) => {
-      if ((0, import_type_guards32.isNotUndefined)(props.onChange)) {
+      if ((0, import_type_guards34.isNotUndefined)(props.onChange)) {
         props.onChange(event);
       }
-      if ((0, import_type_guards32.isNotUndefined)(checkboxGroup.onChange)) {
+      if ((0, import_type_guards34.isNotUndefined)(checkboxGroup.onChange)) {
         checkboxGroup.onChange(event);
       }
     };
@@ -9901,7 +9925,7 @@ var FormField = ({
       ...childProps,
       name: computedName,
       onChange: handleChange,
-      "aria-invalid": (0, import_type_guards32.isNotNil)(error)
+      "aria-invalid": (0, import_type_guards34.isNotNil)(error)
     };
   }
   import_react36.Children.only(children);
@@ -9912,9 +9936,9 @@ var FormField = ({
       "data-label-position": labelPosition ?? formState.labelPosition,
       children: [
         !isIntegratedLabel && /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(Label, { htmlFor: computedId, children: label }),
-        (0, import_type_guards32.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(FormControlLabelDescription, { id: descriptionId, children: description }) : null,
+        (0, import_type_guards34.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(FormControlLabelDescription, { id: descriptionId, children: description }) : null,
         (0, import_react36.cloneElement)(children, childProps),
-        (0, import_type_guards32.isNotNil)(computedError) ? /* @__PURE__ */ (0, import_jsx_runtime227.jsxs)(import_jsx_runtime227.Fragment, { children: [
+        (0, import_type_guards34.isNotNil)(computedError) ? /* @__PURE__ */ (0, import_jsx_runtime227.jsxs)(import_jsx_runtime227.Fragment, { children: [
           /* @__PURE__ */ (0, import_jsx_runtime227.jsx)("div", {}),
           /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(
             ErrorMessages,
@@ -9992,7 +10016,7 @@ IconButton.displayName = "IconButton";
 // src/components/Menu/Menu.tsx
 var import_styled_components54 = __toESM(require("styled-components"));
 var import_react_dropdown_menu = require("@radix-ui/react-dropdown-menu");
-var import_type_guards33 = require("@wistia/type-guards");
+var import_type_guards35 = require("@wistia/type-guards");
 var import_react40 = require("react");
 
 // src/components/Menu/MenuContext.tsx
@@ -10104,7 +10128,7 @@ var Menu = ({
 }) => {
   const contextValue = (0, import_react40.useMemo)(() => ({ compact }), [compact]);
   let controlProps = {
-    ...(0, import_type_guards33.isNotNil)(onOpenChange) && (0, import_type_guards33.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {}
+    ...(0, import_type_guards35.isNotNil)(onOpenChange) && (0, import_type_guards35.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {}
   };
   if (disabled) {
     controlProps = {
@@ -10118,7 +10142,7 @@ var Menu = ({
       modal: false,
       ...controlProps,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(import_react_dropdown_menu.DropdownMenuTrigger, { asChild: true, children: (0, import_type_guards33.isNotUndefined)(trigger) ? trigger : /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(import_react_dropdown_menu.DropdownMenuTrigger, { asChild: true, children: (0, import_type_guards35.isNotUndefined)(trigger) ? trigger : /* @__PURE__ */ (0, import_jsx_runtime230.jsx)(
           Button,
           {
             "aria-expanded": isOpen,
@@ -10179,12 +10203,12 @@ MenuLabel.displayName = "MenuLabel";
 var import_react42 = require("react");
 var import_styled_components58 = __toESM(require("styled-components"));
 var import_react_dropdown_menu3 = require("@radix-ui/react-dropdown-menu");
-var import_type_guards35 = require("@wistia/type-guards");
+var import_type_guards37 = require("@wistia/type-guards");
 
 // src/components/Menu/MenuItemButton.tsx
 var import_react41 = require("react");
 var import_styled_components56 = __toESM(require("styled-components"));
-var import_type_guards34 = require("@wistia/type-guards");
+var import_type_guards36 = require("@wistia/type-guards");
 var import_jsx_runtime232 = require("react/jsx-runtime");
 var StyledButton3 = (0, import_styled_components56.default)(Button)`
   ${({ colorScheme }) => getColorScheme(colorScheme)};
@@ -10262,7 +10286,7 @@ var StyledBadgeContainer = import_styled_components56.default.div`
 var MenuItemButton = (0, import_react41.forwardRef)(({ children, appearance, command, icon, ...props }, ref) => {
   let { colorScheme, badge } = props;
   if (appearance === "dangerous") {
-    if ((0, import_type_guards34.isNotUndefined)(colorScheme)) {
+    if ((0, import_type_guards36.isNotUndefined)(colorScheme)) {
       console.warn("colorScheme prop is ignored when appearance is dangerous");
     }
     colorScheme = "error";
@@ -10292,7 +10316,7 @@ var MenuItemButton = (0, import_react41.forwardRef)(({ children, appearance, com
       children: [
         props.leftIcon ? /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(StyledLeftIconContainer, { children: props.leftIcon }) : null,
         /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(StyledLabelAndDescriptionContainer, { children }),
-        (0, import_type_guards34.isNotNil)(badge) || (0, import_type_guards34.isNotNil)(command) ? /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(StyledBadgeContainer, { children: badge ?? command }) : null,
+        (0, import_type_guards36.isNotNil)(badge) || (0, import_type_guards36.isNotNil)(command) ? /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(StyledBadgeContainer, { children: badge ?? command }) : null,
         props.rightIcon ? /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(StyledRightIconContainer, { children: props.rightIcon }) : null
       ]
     }
@@ -10360,7 +10384,7 @@ var SubMenu = ({
   return isSmAndUp ? /* @__PURE__ */ (0, import_jsx_runtime234.jsxs)(import_react_dropdown_menu3.DropdownMenuSub, { onOpenChange, children: [
     /* @__PURE__ */ (0, import_jsx_runtime234.jsxs)(SubMenuTrigger, { ...props, children: [
       /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(MenuItemLabel, { children: label }),
-      (0, import_type_guards35.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(MenuItemDescription, { children: description }) : null
+      (0, import_type_guards37.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(MenuItemDescription, { children: description }) : null
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(import_react_dropdown_menu3.DropdownMenuPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(SubMenuContent, { $compact: compact, children }) })
   ] }) : /* @__PURE__ */ (0, import_jsx_runtime234.jsxs)(import_react_dropdown_menu3.DropdownMenuGroup, { children: [
@@ -10540,7 +10564,7 @@ CheckboxMenuItem.displayName = "CheckboxMenuItem";
 var import_react47 = require("react");
 var import_styled_components63 = __toESM(require("styled-components"));
 var import_react_dialog4 = require("@radix-ui/react-dialog");
-var import_type_guards37 = require("@wistia/type-guards");
+var import_type_guards39 = require("@wistia/type-guards");
 
 // src/components/Modal/ModalHeader.tsx
 var import_styled_components60 = __toESM(require("styled-components"));
@@ -10603,7 +10627,7 @@ var import_react_dialog3 = require("@radix-ui/react-dialog");
 
 // src/private/hooks/useFocusRestore/useFocusRestore.ts
 var import_react44 = require("react");
-var import_type_guards36 = require("@wistia/type-guards");
+var import_type_guards38 = require("@wistia/type-guards");
 var useFocusRestore = () => {
   const previouslyFocusedRef = (0, import_react44.useRef)(null);
   (0, import_react44.useEffect)(() => {
@@ -10611,7 +10635,7 @@ var useFocusRestore = () => {
   }, []);
   (0, import_react44.useEffect)(() => {
     return () => {
-      if ((0, import_type_guards36.isNotNil)(previouslyFocusedRef.current)) {
+      if ((0, import_type_guards38.isNotNil)(previouslyFocusedRef.current)) {
         setTimeout(() => {
           previouslyFocusedRef.current?.focus();
         }, 0);
@@ -10758,7 +10782,7 @@ var Modal = (0, import_react47.forwardRef)(
       import_react_dialog4.Root,
       {
         onOpenChange: (open2) => {
-          if (!open2 && (0, import_type_guards37.isNotNil)(onRequestClose)) {
+          if (!open2 && (0, import_type_guards39.isNotNil)(onRequestClose)) {
             onRequestClose();
           }
         },
@@ -10771,7 +10795,7 @@ var Modal = (0, import_react47.forwardRef)(
               ref,
               fullHeight,
               onOpenAutoFocus: (event) => {
-                if ((0, import_type_guards37.isNotNil)(initialFocusRef) && initialFocusRef.current) {
+                if ((0, import_type_guards39.isNotNil)(initialFocusRef) && initialFocusRef.current) {
                   event.preventDefault();
                   requestAnimationFrame(() => {
                     initialFocusRef.current?.focus();
@@ -10805,9 +10829,9 @@ var import_react_popover = require("@radix-ui/react-popover");
 var import_styled_components64 = __toESM(require("styled-components"));
 
 // src/private/helpers/getControls/getControlProps.tsx
-var import_type_guards38 = require("@wistia/type-guards");
+var import_type_guards40 = require("@wistia/type-guards");
 var getControlProps = (isOpen, onOpenChange) => {
-  return (0, import_type_guards38.isNotNil)(onOpenChange) && (0, import_type_guards38.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {};
+  return (0, import_type_guards40.isNotNil)(onOpenChange) && (0, import_type_guards40.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {};
 };
 
 // src/components/Popover/Popover.tsx
@@ -10875,7 +10899,7 @@ Popover.displayName = "Popover";
 // src/components/ProgressBar/ProgressBar.tsx
 var import_styled_components65 = __toESM(require("styled-components"));
 var import_react_progress = require("@radix-ui/react-progress");
-var import_type_guards39 = require("@wistia/type-guards");
+var import_type_guards41 = require("@wistia/type-guards");
 var import_jsx_runtime245 = require("react/jsx-runtime");
 var ProgressBarWrapper = import_styled_components65.default.div`
   --progress-bar-height: 8px;
@@ -10930,7 +10954,7 @@ var ProgressBar = ({
   ...props
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime245.jsxs)(ProgressBarWrapper, { children: [
-    (0, import_type_guards39.isNotNil)(labelLeft) ? /* @__PURE__ */ (0, import_jsx_runtime245.jsx)(ProgressBarLabel, { children: labelLeft }) : null,
+    (0, import_type_guards41.isNotNil)(labelLeft) ? /* @__PURE__ */ (0, import_jsx_runtime245.jsx)(ProgressBarLabel, { children: labelLeft }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime245.jsx)(
       StyledProgressBar,
       {
@@ -10946,7 +10970,7 @@ var ProgressBar = ({
         )
       }
     ),
-    (0, import_type_guards39.isNotNil)(labelRight) ? /* @__PURE__ */ (0, import_jsx_runtime245.jsx)(ProgressBarLabel, { children: labelRight }) : null
+    (0, import_type_guards41.isNotNil)(labelRight) ? /* @__PURE__ */ (0, import_jsx_runtime245.jsx)(ProgressBarLabel, { children: labelRight }) : null
   ] });
 };
 ProgressBar.displayName = "ProgressBar";
@@ -10954,7 +10978,7 @@ ProgressBar.displayName = "ProgressBar";
 // src/components/Radio/Radio.tsx
 var import_react48 = require("react");
 var import_styled_components66 = __toESM(require("styled-components"));
-var import_type_guards40 = require("@wistia/type-guards");
+var import_type_guards42 = require("@wistia/type-guards");
 var import_jsx_runtime246 = require("react/jsx-runtime");
 var RadioIcon = () => /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(
   "svg",
@@ -11071,7 +11095,7 @@ var Radio = (0, import_react48.forwardRef)(
     ...props
   }, ref) => {
     const generatedId = (0, import_react48.useId)();
-    const computedId = (0, import_type_guards40.isNonEmptyString)(id) ? id : `wistia-ui-radio-${generatedId}`;
+    const computedId = (0, import_type_guards42.isNonEmptyString)(id) ? id : `wistia-ui-radio-${generatedId}`;
     return /* @__PURE__ */ (0, import_jsx_runtime246.jsxs)(
       StyledRadioWrapper,
       {
@@ -11123,7 +11147,7 @@ Radio.displayName = "Radio";
 var import_react52 = require("react");
 var import_styled_components68 = __toESM(require("styled-components"));
 var import_react_toggle_group = require("@radix-ui/react-toggle-group");
-var import_type_guards41 = require("@wistia/type-guards");
+var import_type_guards43 = require("@wistia/type-guards");
 
 // src/components/SegmentedControl/useSelectedItemMeasurements.tsx
 var import_react49 = require("react");
@@ -11234,7 +11258,7 @@ var SegmentedControl = (0, import_react52.forwardRef)(
     onSelectedValueChange,
     ...props
   }, ref) => {
-    if ((0, import_type_guards41.isNil)(children)) {
+    if ((0, import_type_guards43.isNil)(children)) {
       return null;
     }
     return /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(
@@ -11263,7 +11287,7 @@ SegmentedControl.displayName = "SegmentedControl";
 var import_react53 = require("react");
 var import_styled_components69 = __toESM(require("styled-components"));
 var import_react_toggle_group2 = require("@radix-ui/react-toggle-group");
-var import_type_guards42 = require("@wistia/type-guards");
+var import_type_guards44 = require("@wistia/type-guards");
 var import_jsx_runtime250 = require("react/jsx-runtime");
 var segmentedControlItemStyles = import_styled_components69.css`
   all: unset; /* ToggleGroupItem is a button element */
@@ -11370,8 +11394,8 @@ var SegmentedControlItem = (0, import_react53.forwardRef)(
       StyledSegmentedControlItem,
       {
         ref: combinedRef,
-        $hasLabel: (0, import_type_guards42.isNotNil)(label),
-        "aria-label": (0, import_type_guards42.isNotNil)(label) ? void 0 : ariaLabel,
+        $hasLabel: (0, import_type_guards44.isNotNil)(label),
+        "aria-label": (0, import_type_guards44.isNotNil)(label) ? void 0 : ariaLabel,
         disabled,
         onClick: handleClick,
         value,
@@ -11503,7 +11527,7 @@ Select.displayName = "Select";
 var import_react_select2 = require("@radix-ui/react-select");
 var import_react55 = require("react");
 var import_styled_components71 = __toESM(require("styled-components"));
-var import_type_guards43 = require("@wistia/type-guards");
+var import_type_guards45 = require("@wistia/type-guards");
 var import_jsx_runtime252 = require("react/jsx-runtime");
 var StyledItem = (0, import_styled_components71.default)(import_react_select2.Item)`
   ${variantStyleMap2.body3};
@@ -11547,7 +11571,7 @@ var SelectOption = (0, import_react55.forwardRef)(
               type: "checkmark"
             }
           ) }) }),
-          (0, import_type_guards43.isNotNil)(selectedDisplayValue) ? /* @__PURE__ */ (0, import_jsx_runtime252.jsxs)("div", { children: [
+          (0, import_type_guards45.isNotNil)(selectedDisplayValue) ? /* @__PURE__ */ (0, import_jsx_runtime252.jsxs)("div", { children: [
             children,
             /* @__PURE__ */ (0, import_jsx_runtime252.jsx)("div", { style: { display: "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(import_react_select2.ItemText, { children: selectedDisplayValue }) })
           ] }) : /* @__PURE__ */ (0, import_jsx_runtime252.jsx)(import_react_select2.ItemText, { children })
@@ -11582,7 +11606,7 @@ var SelectOptionGroup = ({ children, label, ...props }) => {
 // src/components/Switch/Switch.tsx
 var import_react56 = require("react");
 var import_styled_components73 = __toESM(require("styled-components"));
-var import_type_guards44 = require("@wistia/type-guards");
+var import_type_guards46 = require("@wistia/type-guards");
 var import_jsx_runtime254 = require("react/jsx-runtime");
 var sizeSmall3 = import_styled_components73.css`
   --wui-size-small-width: 24px;
@@ -11701,7 +11725,7 @@ var Switch = (0, import_react56.forwardRef)(
     ...props
   }, ref) => {
     const generatedId = (0, import_react56.useId)();
-    const computedId = (0, import_type_guards44.isNonEmptyString)(id) ? id : `wistia-ui-switch-${generatedId}`;
+    const computedId = (0, import_type_guards46.isNonEmptyString)(id) ? id : `wistia-ui-switch-${generatedId}`;
     return /* @__PURE__ */ (0, import_jsx_runtime254.jsxs)(StyledSwitchWrapper, { $disabled: disabled, children: [
       /* @__PURE__ */ (0, import_jsx_runtime254.jsx)(
         StyledHiddenSwitchInput,
@@ -11848,7 +11872,7 @@ var TableRow = ({ children, ...props }) => {
 // src/components/Tabs/Tabs.tsx
 var import_react63 = require("react");
 var import_react_tabs4 = require("@radix-ui/react-tabs");
-var import_type_guards46 = require("@wistia/type-guards");
+var import_type_guards48 = require("@wistia/type-guards");
 var import_styled_components84 = __toESM(require("styled-components"));
 
 // src/components/Tabs/TabPanel.tsx
@@ -11904,7 +11928,7 @@ TabList.displayName = "TabList";
 var import_react60 = require("react");
 var import_styled_components82 = __toESM(require("styled-components"));
 var import_react_tabs3 = require("@radix-ui/react-tabs");
-var import_type_guards45 = require("@wistia/type-guards");
+var import_type_guards47 = require("@wistia/type-guards");
 
 // src/components/Tabs/useTabsValue.tsx
 var import_react59 = require("react");
@@ -11962,8 +11986,8 @@ var TabItem = (0, import_react60.forwardRef)(
       StyledTabItem,
       {
         ref: combinedRef,
-        $hasLabel: (0, import_type_guards45.isNotNil)(label),
-        "aria-label": (0, import_type_guards45.isNotNil)(label) ? void 0 : ariaLabel,
+        $hasLabel: (0, import_type_guards47.isNotNil)(label),
+        "aria-label": (0, import_type_guards47.isNotNil)(label) ? void 0 : ariaLabel,
         disabled,
         value,
         children: [
@@ -12093,7 +12117,7 @@ var Tabs = (0, import_react63.forwardRef)(
                     label,
                     "aria-label": ariaLabelForTab
                   } = tab.props;
-                  if ((0, import_type_guards46.isNil)(icon)) {
+                  if ((0, import_type_guards48.isNil)(icon)) {
                     return /* @__PURE__ */ (0, import_jsx_runtime265.jsx)(
                       TabItem,
                       {
@@ -12104,7 +12128,7 @@ var Tabs = (0, import_react63.forwardRef)(
                       value
                     );
                   }
-                  if ((0, import_type_guards46.isNotNil)(label)) {
+                  if ((0, import_type_guards48.isNotNil)(label)) {
                     return /* @__PURE__ */ (0, import_jsx_runtime265.jsx)(
                       TabItem,
                       {
@@ -12116,7 +12140,7 @@ var Tabs = (0, import_react63.forwardRef)(
                       value
                     );
                   }
-                  if ((0, import_type_guards46.isNotNil)(ariaLabelForTab)) {
+                  if ((0, import_type_guards48.isNotNil)(ariaLabelForTab)) {
                     return /* @__PURE__ */ (0, import_jsx_runtime265.jsx)(
                       TabItem,
                       {
@@ -12159,7 +12183,7 @@ Tab.displayName = "Tab";
 // src/components/Tag/Tag.tsx
 var import_react65 = require("react");
 var import_styled_components85 = __toESM(require("styled-components"));
-var import_type_guards47 = require("@wistia/type-guards");
+var import_type_guards49 = require("@wistia/type-guards");
 var import_jsx_runtime267 = require("react/jsx-runtime");
 var TagLabel = import_styled_components85.default.a`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
@@ -12244,10 +12268,10 @@ var StyledTag = import_styled_components85.default.div`
   }
 `;
 var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
-  if ((0, import_type_guards47.isNil)(onClickRemove)) {
+  if ((0, import_type_guards49.isNil)(onClickRemove)) {
     return null;
   }
-  if ((0, import_type_guards47.isNil)(onClickRemoveLabel)) {
+  if ((0, import_type_guards49.isNil)(onClickRemoveLabel)) {
     throw new Error(
       "for accessibility, onClickRemoveLabel must be provided if onClickRemove is provided"
     );
@@ -12276,8 +12300,8 @@ var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
 };
 var Tag = (0, import_react65.forwardRef)(
   ({ onClickRemove, colorScheme = "inherit", href, icon, label, onClickRemoveLabel, ...props }, ref) => {
-    const hasIcon = (0, import_type_guards47.isNotNil)(icon);
-    const labelProps = (0, import_type_guards47.isNotNil)(href) && (0, import_type_guards47.isNonEmptyString)(href) ? { href, as: "a" } : { as: "span" };
+    const hasIcon = (0, import_type_guards49.isNotNil)(icon);
+    const labelProps = (0, import_type_guards49.isNotNil)(href) && (0, import_type_guards49.isNonEmptyString)(href) ? { href, as: "a" } : { as: "span" };
     return /* @__PURE__ */ (0, import_jsx_runtime267.jsxs)(
       StyledTag,
       {
@@ -12313,7 +12337,7 @@ Tag.displayName = "Tag";
 
 // src/components/WistiaLogo/WistiaLogo.tsx
 var import_styled_components86 = __toESM(require("styled-components"));
-var import_type_guards48 = require("@wistia/type-guards");
+var import_type_guards50 = require("@wistia/type-guards");
 var import_jsx_runtime268 = require("react/jsx-runtime");
 var renderBrandmark = (brandmarkColor, iconOnly) => {
   if (iconOnly) {
@@ -12426,7 +12450,7 @@ var WistiaLogo = ({
       ...props,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime268.jsx)("title", { children: title }),
-        (0, import_type_guards48.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime268.jsx)("desc", { children: description }) : null,
+        (0, import_type_guards50.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime268.jsx)("desc", { children: description }) : null,
         renderBrandmark(brandmarkColor, iconOnly),
         renderLogotype(logotypeColor, iconOnly)
       ]
@@ -12438,7 +12462,7 @@ WistiaLogo.displayName = "WistiaLogo";
 
 // src/components/Thumbnail/ThumbnailBadge.tsx
 var import_styled_components87 = __toESM(require("styled-components"));
-var import_type_guards49 = require("@wistia/type-guards");
+var import_type_guards51 = require("@wistia/type-guards");
 var import_jsx_runtime269 = require("react/jsx-runtime");
 var StyledThumbnailBadge = import_styled_components87.default.div`
   align-items: center;
@@ -12466,7 +12490,7 @@ var StyledThumbnailBadge = import_styled_components87.default.div`
 `;
 var ThumbnailBadge = ({ icon, label, ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime269.jsxs)(StyledThumbnailBadge, { ...props, children: [
-    (0, import_type_guards49.isNotNil)(icon) && icon,
+    (0, import_type_guards51.isNotNil)(icon) && icon,
     /* @__PURE__ */ (0, import_jsx_runtime269.jsx)("span", { children: label })
   ] });
 };
@@ -12475,10 +12499,10 @@ ThumbnailBadge.displayName = "ThumbnailBadge";
 // src/components/Thumbnail/Thumbnail.tsx
 var import_react66 = require("react");
 var import_styled_components89 = __toESM(require("styled-components"));
-var import_type_guards51 = require("@wistia/type-guards");
+var import_type_guards53 = require("@wistia/type-guards");
 
 // src/private/helpers/getBackgroundGradient/getBackgroundGradient.ts
-var import_type_guards50 = require("@wistia/type-guards");
+var import_type_guards52 = require("@wistia/type-guards");
 var import_styled_components88 = require("styled-components");
 var gradients = {
   defaultDarkOne: import_styled_components88.css`
@@ -12606,7 +12630,7 @@ var gradients = {
 };
 var gradientMap = Object.keys(gradients);
 var getBackgroundGradient = (gradientName = void 0) => {
-  return (0, import_type_guards50.isNotNil)(gradientName) ? gradients[gradientName] : gradients.defaultDarkOne;
+  return (0, import_type_guards52.isNotNil)(gradientName) ? gradients[gradientName] : gradients.defaultDarkOne;
 };
 
 // src/components/Thumbnail/Thumbnail.tsx
@@ -12640,10 +12664,10 @@ var ThumbnailImage = ({ thumbnailImageType, thumbnailUrl }) => {
   );
 };
 var StyledThumbnail = import_styled_components89.default.div`
-  background-image: ${({ $backgroundUrl }) => (0, import_type_guards51.isNotNil)($backgroundUrl) ? `url('${$backgroundUrl}')` : void 0};
+  background-image: ${({ $backgroundUrl }) => (0, import_type_guards53.isNotNil)($backgroundUrl) ? `url('${$backgroundUrl}')` : void 0};
   ${({ $backgroundUrl, $gradientBackground }) => (
   // if we don't have $backgroundUrl show a gradient
-  (0, import_type_guards51.isNil)($backgroundUrl) ? getBackgroundGradient($gradientBackground) : void 0
+  (0, import_type_guards53.isNil)($backgroundUrl) ? getBackgroundGradient($gradientBackground) : void 0
 )};
   background-position: center center;
   background-size: cover;
@@ -12663,7 +12687,7 @@ var Thumbnail = (0, import_react66.forwardRef)(
     children,
     ...props
   }, ref) => {
-    const backgroundUrl = thumbnailImageType === "square" && (0, import_type_guards51.isNotNil)(thumbnailUrl) ? thumbnailUrl : void 0;
+    const backgroundUrl = thumbnailImageType === "square" && (0, import_type_guards53.isNotNil)(thumbnailUrl) ? thumbnailUrl : void 0;
     return /* @__PURE__ */ (0, import_jsx_runtime270.jsxs)(
       StyledThumbnail,
       {
@@ -12673,8 +12697,8 @@ var Thumbnail = (0, import_react66.forwardRef)(
         $width: width,
         ...props,
         children: [
-          (0, import_type_guards51.isNotNil)(children) ? children : null,
-          (0, import_type_guards51.isNotNil)(thumbnailUrl) ? /* @__PURE__ */ (0, import_jsx_runtime270.jsx)(
+          (0, import_type_guards53.isNotNil)(children) ? children : null,
+          (0, import_type_guards53.isNotNil)(thumbnailUrl) ? /* @__PURE__ */ (0, import_jsx_runtime270.jsx)(
             ThumbnailImage,
             {
               thumbnailImageType,
@@ -12768,8 +12792,6 @@ Thumbnail.displayName = "Thumbnail";
   colorSchemeOptions,
   copyToClipboard,
   dateTime,
-  ellipsisFlexParentStyle,
-  ellipsisStyle,
   iconSizeMap,
   mergeRefs,
   mq,