@wistia/ui 0.6.45-beta.e259c017.064d232 → 0.6.45

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.6.45-beta.e259c017.064d232
+ * @license @wistia/ui v0.6.45
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -118,6 +118,8 @@ __export(index_exports, {
   colorSchemeOptions: () => colorSchemeOptions,
   copyToClipboard: () => copyToClipboard,
   dateTime: () => dateTime,
+  ellipsisFlexParentStyle: () => ellipsisFlexParentStyle,
+  ellipsisStyle: () => ellipsisStyle,
   iconSizeMap: () => iconSizeMap,
   mergeRefs: () => mergeRefs,
   mq: () => mq,
@@ -2107,10 +2109,6 @@ 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.
@@ -2135,7 +2133,8 @@ var useEvent = (eventName, eventHandler, eventTarget = window, eventOptions = {}
       if (savedEventHandler.current !== void 0) {
         return savedEventHandler.current(event);
       }
-      return noOpFn;
+      return () => {
+      };
     };
     target.addEventListener(eventName, eventListener, savedEventOptions.current);
     return () => {
@@ -2209,7 +2208,8 @@ var useLockBodyScroll = (locked) => {
         document.body.style.overflow = originalStyle;
       };
     }
-    return noOpFn;
+    return () => {
+    };
   }, [locked]);
 };
 
@@ -2346,12 +2346,6 @@ 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;
 `;
@@ -2360,8 +2354,10 @@ var EllipsisComponent = import_styled_components13.default.span`
   ${({ $lines }) => {
   if ((0, import_type_guards9.isNotNil)($lines)) {
     return import_styled_components13.css`
-        ${lineClampStyle};
+        -webkit-box-orient: vertical;
         -webkit-line-clamp: ${$lines};
+        display: -webkit-box;
+        white-space: initial;
       `;
   }
   return void 0;
@@ -8480,12 +8476,11 @@ var CollapsibleContent = ({ clamp, children }) => {
 
 // src/components/DataCards/DataCard.tsx
 var import_styled_components39 = __toESM(require("styled-components"));
-var import_type_guards29 = require("@wistia/type-guards");
+var import_type_guards28 = 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);
@@ -8547,18 +8542,7 @@ var StyledHeading = import_styled_components38.default.div`
   line-height: var(--line-height);
   color: var(--wui-color-text);
   ${({ $variant }) => variantStyleMap[$variant]}
-  ${({ $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;
-}}
+  ${({ $ellipsis }) => $ellipsis && ellipsisStyle};
   ${({ $inline }) => $inline && import_styled_components38.css`
       display: inline-block;
     `}
@@ -8587,9 +8571,9 @@ var HeadingComponent = (0, import_react26.forwardRef)(
     align = "left",
     colorScheme = "inherit",
     disabled = false,
+    ellipsis = false,
     inline = false,
     preventUserSelect = false,
-    truncate,
     variant = "heading1",
     renderAs,
     ...props
@@ -8600,9 +8584,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
@@ -8701,8 +8685,8 @@ var DataCard = ({
           children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime213.jsx)(StyledLoadingValue, {}) : value
         }
       ),
-      (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 })
+      (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 })
     ]
   }
 );
@@ -8748,7 +8732,6 @@ 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,
@@ -8892,16 +8875,7 @@ var StyledText = import_styled_components41.default.div`
   font-style: normal;
   margin: 0;
   ${({ $variant }) => variantStyleMap2[$variant]}
-  ${({ $truncate }) => {
-  if ((0, import_type_guards30.isNotNil)($truncate)) {
-    return import_styled_components41.css`
-        ${ellipsisStyle};
-        ${lineClampStyle};
-        -webkit-line-clamp: ${$truncate};
-      `;
-  }
-  return void 0;
-}}
+  ${({ $ellipsis }) => $ellipsis && ellipsisStyle};
   ${({ $inline }) => $inline && import_styled_components41.css`
       display: inline-block;
     `}
@@ -8927,10 +8901,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
@@ -8942,10 +8916,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
@@ -9146,7 +9120,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_guards31 = require("@wistia/type-guards");
+var import_type_guards29 = require("@wistia/type-guards");
 
 // src/css/sharedStyles/inputCssVariables.ts
 var import_styled_components45 = require("styled-components");
@@ -9284,27 +9258,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_guards31.isNotNil)(externalRef) && (0, import_type_guards31.isRecord)(externalRef) && "current" in externalRef ? externalRef : internalRef
+      (0, import_type_guards29.isNotNil)(externalRef) && (0, import_type_guards29.isRecord)(externalRef) && "current" in externalRef ? externalRef : internalRef
     );
     let leftIconToDisplay = leftIcon;
-    if ((0, import_type_guards31.isNil)(leftIcon) && type === "search") {
+    if ((0, import_type_guards29.isNil)(leftIcon) && type === "search") {
       leftIconToDisplay = /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(Icon, { type: "search" });
     }
-    if ((0, import_type_guards31.isNotNil)(leftIconToDisplay)) {
+    if ((0, import_type_guards29.isNotNil)(leftIconToDisplay)) {
       leftIconToDisplay = (0, import_react28.cloneElement)(leftIconToDisplay, {
         size: "md",
         className: "wui-input-left-icon"
       });
     }
     let rightIconToDisplay = rightIcon;
-    if ((0, import_type_guards31.isNotNil)(rightIconToDisplay)) {
+    if ((0, import_type_guards29.isNotNil)(rightIconToDisplay)) {
       rightIconToDisplay = (0, import_react28.cloneElement)(rightIconToDisplay, {
         size: "md",
         className: "wui-input-right-icon"
       });
     }
     const handleFocus2 = (event) => {
-      if ((0, import_type_guards31.isNotNil)(props.onFocus)) {
+      if ((0, import_type_guards29.isNotNil)(props.onFocus)) {
         props.onFocus(event);
       }
       if (autoSelect && isValidRef(ref) && "current" in ref) {
@@ -9485,7 +9459,7 @@ var EditableHeading = ({
 // src/components/Form/Form.tsx
 var import_react31 = require("react");
 var import_styled_components49 = __toESM(require("styled-components"));
-var import_type_guards32 = require("@wistia/type-guards");
+var import_type_guards30 = require("@wistia/type-guards");
 
 // src/components/Stack/Stack.tsx
 var import_react30 = require("react");
@@ -9551,7 +9525,7 @@ var FormComponent = ({
   const id = props.id ?? autoId;
   const handleValidate = (nextFormData) => {
     const nextData = Object.fromEntries(nextFormData.entries());
-    if ((0, import_type_guards32.isUndefined)(validate)) {
+    if ((0, import_type_guards30.isUndefined)(validate)) {
       return {};
     }
     return validate(nextData);
@@ -9561,7 +9535,7 @@ var FormComponent = ({
       props.onBlur(event);
     }
     const formData = new FormData(event.currentTarget);
-    if ((0, import_type_guards32.isNotUndefined)(validate)) {
+    if ((0, import_type_guards30.isNotUndefined)(validate)) {
       handleValidate(formData);
     }
   };
@@ -9658,7 +9632,7 @@ var useFormState = (action, initialData = {}) => {
 
 // src/components/Form/FormErrorSummary.tsx
 var import_react33 = require("react");
-var import_type_guards33 = require("@wistia/type-guards");
+var import_type_guards31 = 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);
@@ -9672,8 +9646,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_guards33.isNotUndefined)(error)).map(
-      ([name, error]) => (0, import_type_guards33.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_guards31.isNotUndefined)(error)).map(
+      ([name, error]) => (0, import_type_guards31.isArray)(error) ? error.map((err) => /* @__PURE__ */ (0, import_jsx_runtime223.jsx)(
         ErrorItem,
         {
           error: err,
@@ -9697,7 +9671,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_guards34 = require("@wistia/type-guards");
+var import_type_guards32 = require("@wistia/type-guards");
 
 // src/components/Label/Label.tsx
 var import_styled_components50 = __toESM(require("styled-components"));
@@ -9857,7 +9831,7 @@ var StyledErrorList = import_styled_components52.default.ul`
   gap: var(--wui-space-01);
 `;
 var ErrorMessages = ({ errors, id }) => {
-  const isMultipleErrors = (0, import_type_guards34.isArray)(errors);
+  const isMultipleErrors = (0, import_type_guards32.isArray)(errors);
   return isMultipleErrors ? /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(StyledErrorList, { children: errors.map((error, index) => /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(
     Text,
     {
@@ -9907,19 +9881,19 @@ var FormField = ({
     "aria-describedby": ariaDescribedby,
     ...props
   };
-  if ((0, import_type_guards34.isUndefined)(value) && (0, import_type_guards34.isNotUndefined)(defaultValue)) {
+  if ((0, import_type_guards32.isUndefined)(value) && (0, import_type_guards32.isNotUndefined)(defaultValue)) {
     childProps = {
       ...childProps,
       defaultValue
     };
   }
-  if ((0, import_type_guards34.isNotNil)(checkboxGroup)) {
-    const computedName = (0, import_type_guards34.isNotNil)(checkboxGroup.name) ? `${checkboxGroup.name}[${name}]` : name;
+  if ((0, import_type_guards32.isNotNil)(checkboxGroup)) {
+    const computedName = (0, import_type_guards32.isNotNil)(checkboxGroup.name) ? `${checkboxGroup.name}[${name}]` : name;
     const handleChange = (event) => {
-      if ((0, import_type_guards34.isNotUndefined)(props.onChange)) {
+      if ((0, import_type_guards32.isNotUndefined)(props.onChange)) {
         props.onChange(event);
       }
-      if ((0, import_type_guards34.isNotUndefined)(checkboxGroup.onChange)) {
+      if ((0, import_type_guards32.isNotUndefined)(checkboxGroup.onChange)) {
         checkboxGroup.onChange(event);
       }
     };
@@ -9927,7 +9901,7 @@ var FormField = ({
       ...childProps,
       name: computedName,
       onChange: handleChange,
-      "aria-invalid": (0, import_type_guards34.isNotNil)(error)
+      "aria-invalid": (0, import_type_guards32.isNotNil)(error)
     };
   }
   import_react36.Children.only(children);
@@ -9938,9 +9912,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_guards34.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(FormControlLabelDescription, { id: descriptionId, children: description }) : null,
+        (0, import_type_guards32.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime227.jsx)(FormControlLabelDescription, { id: descriptionId, children: description }) : null,
         (0, import_react36.cloneElement)(children, childProps),
-        (0, import_type_guards34.isNotNil)(computedError) ? /* @__PURE__ */ (0, import_jsx_runtime227.jsxs)(import_jsx_runtime227.Fragment, { children: [
+        (0, import_type_guards32.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,
@@ -10018,7 +9992,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_guards35 = require("@wistia/type-guards");
+var import_type_guards33 = require("@wistia/type-guards");
 var import_react40 = require("react");
 
 // src/components/Menu/MenuContext.tsx
@@ -10130,7 +10104,7 @@ var Menu = ({
 }) => {
   const contextValue = (0, import_react40.useMemo)(() => ({ compact }), [compact]);
   let controlProps = {
-    ...(0, import_type_guards35.isNotNil)(onOpenChange) && (0, import_type_guards35.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {}
+    ...(0, import_type_guards33.isNotNil)(onOpenChange) && (0, import_type_guards33.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {}
   };
   if (disabled) {
     controlProps = {
@@ -10144,7 +10118,7 @@ var Menu = ({
       modal: false,
       ...controlProps,
       children: [
-        /* @__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)(
+        /* @__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)(
           Button,
           {
             "aria-expanded": isOpen,
@@ -10205,12 +10179,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_guards37 = require("@wistia/type-guards");
+var import_type_guards35 = 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_guards36 = require("@wistia/type-guards");
+var import_type_guards34 = require("@wistia/type-guards");
 var import_jsx_runtime232 = require("react/jsx-runtime");
 var StyledButton3 = (0, import_styled_components56.default)(Button)`
   ${({ colorScheme }) => getColorScheme(colorScheme)};
@@ -10288,7 +10262,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_guards36.isNotUndefined)(colorScheme)) {
+    if ((0, import_type_guards34.isNotUndefined)(colorScheme)) {
       console.warn("colorScheme prop is ignored when appearance is dangerous");
     }
     colorScheme = "error";
@@ -10318,7 +10292,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_guards36.isNotNil)(badge) || (0, import_type_guards36.isNotNil)(command) ? /* @__PURE__ */ (0, import_jsx_runtime232.jsx)(StyledBadgeContainer, { children: badge ?? command }) : null,
+        (0, import_type_guards34.isNotNil)(badge) || (0, import_type_guards34.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
       ]
     }
@@ -10386,7 +10360,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_guards37.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime234.jsx)(MenuItemDescription, { children: description }) : null
+      (0, import_type_guards35.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: [
@@ -10566,7 +10540,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_guards39 = require("@wistia/type-guards");
+var import_type_guards37 = require("@wistia/type-guards");
 
 // src/components/Modal/ModalHeader.tsx
 var import_styled_components60 = __toESM(require("styled-components"));
@@ -10629,7 +10603,7 @@ var import_react_dialog3 = require("@radix-ui/react-dialog");
 
 // src/private/hooks/useFocusRestore/useFocusRestore.ts
 var import_react44 = require("react");
-var import_type_guards38 = require("@wistia/type-guards");
+var import_type_guards36 = require("@wistia/type-guards");
 var useFocusRestore = () => {
   const previouslyFocusedRef = (0, import_react44.useRef)(null);
   (0, import_react44.useEffect)(() => {
@@ -10637,7 +10611,7 @@ var useFocusRestore = () => {
   }, []);
   (0, import_react44.useEffect)(() => {
     return () => {
-      if ((0, import_type_guards38.isNotNil)(previouslyFocusedRef.current)) {
+      if ((0, import_type_guards36.isNotNil)(previouslyFocusedRef.current)) {
         setTimeout(() => {
           previouslyFocusedRef.current?.focus();
         }, 0);
@@ -10784,7 +10758,7 @@ var Modal = (0, import_react47.forwardRef)(
       import_react_dialog4.Root,
       {
         onOpenChange: (open2) => {
-          if (!open2 && (0, import_type_guards39.isNotNil)(onRequestClose)) {
+          if (!open2 && (0, import_type_guards37.isNotNil)(onRequestClose)) {
             onRequestClose();
           }
         },
@@ -10797,7 +10771,7 @@ var Modal = (0, import_react47.forwardRef)(
               ref,
               fullHeight,
               onOpenAutoFocus: (event) => {
-                if ((0, import_type_guards39.isNotNil)(initialFocusRef) && initialFocusRef.current) {
+                if ((0, import_type_guards37.isNotNil)(initialFocusRef) && initialFocusRef.current) {
                   event.preventDefault();
                   requestAnimationFrame(() => {
                     initialFocusRef.current?.focus();
@@ -10831,9 +10805,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_guards40 = require("@wistia/type-guards");
+var import_type_guards38 = require("@wistia/type-guards");
 var getControlProps = (isOpen, onOpenChange) => {
-  return (0, import_type_guards40.isNotNil)(onOpenChange) && (0, import_type_guards40.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {};
+  return (0, import_type_guards38.isNotNil)(onOpenChange) && (0, import_type_guards38.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {};
 };
 
 // src/components/Popover/Popover.tsx
@@ -10901,7 +10875,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_guards41 = require("@wistia/type-guards");
+var import_type_guards39 = require("@wistia/type-guards");
 var import_jsx_runtime245 = require("react/jsx-runtime");
 var ProgressBarWrapper = import_styled_components65.default.div`
   --progress-bar-height: 8px;
@@ -10956,7 +10930,7 @@ var ProgressBar = ({
   ...props
 }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime245.jsxs)(ProgressBarWrapper, { children: [
-    (0, import_type_guards41.isNotNil)(labelLeft) ? /* @__PURE__ */ (0, import_jsx_runtime245.jsx)(ProgressBarLabel, { children: labelLeft }) : null,
+    (0, import_type_guards39.isNotNil)(labelLeft) ? /* @__PURE__ */ (0, import_jsx_runtime245.jsx)(ProgressBarLabel, { children: labelLeft }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime245.jsx)(
       StyledProgressBar,
       {
@@ -10972,7 +10946,7 @@ var ProgressBar = ({
         )
       }
     ),
-    (0, import_type_guards41.isNotNil)(labelRight) ? /* @__PURE__ */ (0, import_jsx_runtime245.jsx)(ProgressBarLabel, { children: labelRight }) : null
+    (0, import_type_guards39.isNotNil)(labelRight) ? /* @__PURE__ */ (0, import_jsx_runtime245.jsx)(ProgressBarLabel, { children: labelRight }) : null
   ] });
 };
 ProgressBar.displayName = "ProgressBar";
@@ -10980,7 +10954,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_guards42 = require("@wistia/type-guards");
+var import_type_guards40 = require("@wistia/type-guards");
 var import_jsx_runtime246 = require("react/jsx-runtime");
 var RadioIcon = () => /* @__PURE__ */ (0, import_jsx_runtime246.jsx)(
   "svg",
@@ -11097,7 +11071,7 @@ var Radio = (0, import_react48.forwardRef)(
     ...props
   }, ref) => {
     const generatedId = (0, import_react48.useId)();
-    const computedId = (0, import_type_guards42.isNonEmptyString)(id) ? id : `wistia-ui-radio-${generatedId}`;
+    const computedId = (0, import_type_guards40.isNonEmptyString)(id) ? id : `wistia-ui-radio-${generatedId}`;
     return /* @__PURE__ */ (0, import_jsx_runtime246.jsxs)(
       StyledRadioWrapper,
       {
@@ -11149,7 +11123,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_guards43 = require("@wistia/type-guards");
+var import_type_guards41 = require("@wistia/type-guards");
 
 // src/components/SegmentedControl/useSelectedItemMeasurements.tsx
 var import_react49 = require("react");
@@ -11260,7 +11234,7 @@ var SegmentedControl = (0, import_react52.forwardRef)(
     onSelectedValueChange,
     ...props
   }, ref) => {
-    if ((0, import_type_guards43.isNil)(children)) {
+    if ((0, import_type_guards41.isNil)(children)) {
       return null;
     }
     return /* @__PURE__ */ (0, import_jsx_runtime249.jsx)(
@@ -11289,7 +11263,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_guards44 = require("@wistia/type-guards");
+var import_type_guards42 = 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 */
@@ -11396,8 +11370,8 @@ var SegmentedControlItem = (0, import_react53.forwardRef)(
       StyledSegmentedControlItem,
       {
         ref: combinedRef,
-        $hasLabel: (0, import_type_guards44.isNotNil)(label),
-        "aria-label": (0, import_type_guards44.isNotNil)(label) ? void 0 : ariaLabel,
+        $hasLabel: (0, import_type_guards42.isNotNil)(label),
+        "aria-label": (0, import_type_guards42.isNotNil)(label) ? void 0 : ariaLabel,
         disabled,
         onClick: handleClick,
         value,
@@ -11529,7 +11503,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_guards45 = require("@wistia/type-guards");
+var import_type_guards43 = 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};
@@ -11573,7 +11547,7 @@ var SelectOption = (0, import_react55.forwardRef)(
               type: "checkmark"
             }
           ) }) }),
-          (0, import_type_guards45.isNotNil)(selectedDisplayValue) ? /* @__PURE__ */ (0, import_jsx_runtime252.jsxs)("div", { children: [
+          (0, import_type_guards43.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 })
@@ -11608,7 +11582,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_guards46 = require("@wistia/type-guards");
+var import_type_guards44 = require("@wistia/type-guards");
 var import_jsx_runtime254 = require("react/jsx-runtime");
 var sizeSmall3 = import_styled_components73.css`
   --wui-size-small-width: 24px;
@@ -11727,7 +11701,7 @@ var Switch = (0, import_react56.forwardRef)(
     ...props
   }, ref) => {
     const generatedId = (0, import_react56.useId)();
-    const computedId = (0, import_type_guards46.isNonEmptyString)(id) ? id : `wistia-ui-switch-${generatedId}`;
+    const computedId = (0, import_type_guards44.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,
@@ -11874,7 +11848,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_guards48 = require("@wistia/type-guards");
+var import_type_guards46 = require("@wistia/type-guards");
 var import_styled_components84 = __toESM(require("styled-components"));
 
 // src/components/Tabs/TabPanel.tsx
@@ -11930,7 +11904,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_guards47 = require("@wistia/type-guards");
+var import_type_guards45 = require("@wistia/type-guards");
 
 // src/components/Tabs/useTabsValue.tsx
 var import_react59 = require("react");
@@ -11988,8 +11962,8 @@ var TabItem = (0, import_react60.forwardRef)(
       StyledTabItem,
       {
         ref: combinedRef,
-        $hasLabel: (0, import_type_guards47.isNotNil)(label),
-        "aria-label": (0, import_type_guards47.isNotNil)(label) ? void 0 : ariaLabel,
+        $hasLabel: (0, import_type_guards45.isNotNil)(label),
+        "aria-label": (0, import_type_guards45.isNotNil)(label) ? void 0 : ariaLabel,
         disabled,
         value,
         children: [
@@ -12119,7 +12093,7 @@ var Tabs = (0, import_react63.forwardRef)(
                     label,
                     "aria-label": ariaLabelForTab
                   } = tab.props;
-                  if ((0, import_type_guards48.isNil)(icon)) {
+                  if ((0, import_type_guards46.isNil)(icon)) {
                     return /* @__PURE__ */ (0, import_jsx_runtime265.jsx)(
                       TabItem,
                       {
@@ -12130,7 +12104,7 @@ var Tabs = (0, import_react63.forwardRef)(
                       value
                     );
                   }
-                  if ((0, import_type_guards48.isNotNil)(label)) {
+                  if ((0, import_type_guards46.isNotNil)(label)) {
                     return /* @__PURE__ */ (0, import_jsx_runtime265.jsx)(
                       TabItem,
                       {
@@ -12142,7 +12116,7 @@ var Tabs = (0, import_react63.forwardRef)(
                       value
                     );
                   }
-                  if ((0, import_type_guards48.isNotNil)(ariaLabelForTab)) {
+                  if ((0, import_type_guards46.isNotNil)(ariaLabelForTab)) {
                     return /* @__PURE__ */ (0, import_jsx_runtime265.jsx)(
                       TabItem,
                       {
@@ -12185,7 +12159,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_guards49 = require("@wistia/type-guards");
+var import_type_guards47 = require("@wistia/type-guards");
 var import_jsx_runtime267 = require("react/jsx-runtime");
 var TagLabel = import_styled_components85.default.a`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
@@ -12270,10 +12244,10 @@ var StyledTag = import_styled_components85.default.div`
   }
 `;
 var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
-  if ((0, import_type_guards49.isNil)(onClickRemove)) {
+  if ((0, import_type_guards47.isNil)(onClickRemove)) {
     return null;
   }
-  if ((0, import_type_guards49.isNil)(onClickRemoveLabel)) {
+  if ((0, import_type_guards47.isNil)(onClickRemoveLabel)) {
     throw new Error(
       "for accessibility, onClickRemoveLabel must be provided if onClickRemove is provided"
     );
@@ -12302,8 +12276,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_guards49.isNotNil)(icon);
-    const labelProps = (0, import_type_guards49.isNotNil)(href) && (0, import_type_guards49.isNonEmptyString)(href) ? { href, as: "a" } : { as: "span" };
+    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" };
     return /* @__PURE__ */ (0, import_jsx_runtime267.jsxs)(
       StyledTag,
       {
@@ -12339,7 +12313,7 @@ Tag.displayName = "Tag";
 
 // src/components/WistiaLogo/WistiaLogo.tsx
 var import_styled_components86 = __toESM(require("styled-components"));
-var import_type_guards50 = require("@wistia/type-guards");
+var import_type_guards48 = require("@wistia/type-guards");
 var import_jsx_runtime268 = require("react/jsx-runtime");
 var renderBrandmark = (brandmarkColor, iconOnly) => {
   if (iconOnly) {
@@ -12452,7 +12426,7 @@ var WistiaLogo = ({
       ...props,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime268.jsx)("title", { children: title }),
-        (0, import_type_guards50.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime268.jsx)("desc", { children: description }) : null,
+        (0, import_type_guards48.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime268.jsx)("desc", { children: description }) : null,
         renderBrandmark(brandmarkColor, iconOnly),
         renderLogotype(logotypeColor, iconOnly)
       ]
@@ -12464,7 +12438,7 @@ WistiaLogo.displayName = "WistiaLogo";
 
 // src/components/Thumbnail/ThumbnailBadge.tsx
 var import_styled_components87 = __toESM(require("styled-components"));
-var import_type_guards51 = require("@wistia/type-guards");
+var import_type_guards49 = require("@wistia/type-guards");
 var import_jsx_runtime269 = require("react/jsx-runtime");
 var StyledThumbnailBadge = import_styled_components87.default.div`
   align-items: center;
@@ -12492,7 +12466,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_guards51.isNotNil)(icon) && icon,
+    (0, import_type_guards49.isNotNil)(icon) && icon,
     /* @__PURE__ */ (0, import_jsx_runtime269.jsx)("span", { children: label })
   ] });
 };
@@ -12501,10 +12475,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_guards53 = require("@wistia/type-guards");
+var import_type_guards51 = require("@wistia/type-guards");
 
 // src/private/helpers/getBackgroundGradient/getBackgroundGradient.ts
-var import_type_guards52 = require("@wistia/type-guards");
+var import_type_guards50 = require("@wistia/type-guards");
 var import_styled_components88 = require("styled-components");
 var gradients = {
   defaultDarkOne: import_styled_components88.css`
@@ -12632,7 +12606,7 @@ var gradients = {
 };
 var gradientMap = Object.keys(gradients);
 var getBackgroundGradient = (gradientName = void 0) => {
-  return (0, import_type_guards52.isNotNil)(gradientName) ? gradients[gradientName] : gradients.defaultDarkOne;
+  return (0, import_type_guards50.isNotNil)(gradientName) ? gradients[gradientName] : gradients.defaultDarkOne;
 };
 
 // src/components/Thumbnail/Thumbnail.tsx
@@ -12666,10 +12640,10 @@ var ThumbnailImage = ({ thumbnailImageType, thumbnailUrl }) => {
   );
 };
 var StyledThumbnail = import_styled_components89.default.div`
-  background-image: ${({ $backgroundUrl }) => (0, import_type_guards53.isNotNil)($backgroundUrl) ? `url('${$backgroundUrl}')` : void 0};
+  background-image: ${({ $backgroundUrl }) => (0, import_type_guards51.isNotNil)($backgroundUrl) ? `url('${$backgroundUrl}')` : void 0};
   ${({ $backgroundUrl, $gradientBackground }) => (
   // if we don't have $backgroundUrl show a gradient
-  (0, import_type_guards53.isNil)($backgroundUrl) ? getBackgroundGradient($gradientBackground) : void 0
+  (0, import_type_guards51.isNil)($backgroundUrl) ? getBackgroundGradient($gradientBackground) : void 0
 )};
   background-position: center center;
   background-size: cover;
@@ -12689,7 +12663,7 @@ var Thumbnail = (0, import_react66.forwardRef)(
     children,
     ...props
   }, ref) => {
-    const backgroundUrl = thumbnailImageType === "square" && (0, import_type_guards53.isNotNil)(thumbnailUrl) ? thumbnailUrl : void 0;
+    const backgroundUrl = thumbnailImageType === "square" && (0, import_type_guards51.isNotNil)(thumbnailUrl) ? thumbnailUrl : void 0;
     return /* @__PURE__ */ (0, import_jsx_runtime270.jsxs)(
       StyledThumbnail,
       {
@@ -12699,8 +12673,8 @@ var Thumbnail = (0, import_react66.forwardRef)(
         $width: width,
         ...props,
         children: [
-          (0, import_type_guards53.isNotNil)(children) ? children : null,
-          (0, import_type_guards53.isNotNil)(thumbnailUrl) ? /* @__PURE__ */ (0, import_jsx_runtime270.jsx)(
+          (0, import_type_guards51.isNotNil)(children) ? children : null,
+          (0, import_type_guards51.isNotNil)(thumbnailUrl) ? /* @__PURE__ */ (0, import_jsx_runtime270.jsx)(
             ThumbnailImage,
             {
               thumbnailImageType,
@@ -12794,6 +12768,8 @@ Thumbnail.displayName = "Thumbnail";
   colorSchemeOptions,
   copyToClipboard,
   dateTime,
+  ellipsisFlexParentStyle,
+  ellipsisStyle,
   iconSizeMap,
   mergeRefs,
   mq,