@wistia/ui 0.4.5 → 0.4.6-beta.12aa477c.cc6313b

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.4.5
+ * @license @wistia/ui v0.4.6-beta.12aa477c.cc6313b
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -1545,10 +1545,18 @@ var useActiveMq = () => {
 };
 
 // src/hooks/useKey/useKey.ts
-import { useMemo as useMemo2 } from "react";
+import { useCallback as useCallback3 } from "react";
 
 // src/private/hooks/useEvent/useEvent.ts
 import { useEffect as useEffect2, useRef as useRef2 } from "react";
+
+// src/private/helpers/isObjectRef/isObjectRef.ts
+import { isNotNil, isRecord } from "@wistia/type-guards";
+var isObjectRef = (value) => {
+  return isNotNil(value) && isRecord(value) && "current" in value;
+};
+
+// 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.
   // eslint-disable-next-line @typescript-eslint/strict-boolean-expressions
@@ -1564,7 +1572,8 @@ var useEvent = (eventName, eventHandler, eventTarget = window, eventOptions = {}
     savedEventOptions.current = eventOptions;
   }, [eventOptions]);
   useEffect2(() => {
-    if (!eventName || !isEventTargetSupported(eventTarget)) {
+    const target = isObjectRef(eventTarget) ? eventTarget.current : eventTarget;
+    if (!eventName || !isEventTargetSupported(target)) {
       return;
     }
     const eventListener = (event) => {
@@ -1574,39 +1583,36 @@ var useEvent = (eventName, eventHandler, eventTarget = window, eventOptions = {}
       return () => {
       };
     };
-    eventTarget.addEventListener(eventName, eventListener, savedEventOptions.current);
+    target.addEventListener(eventName, eventListener, savedEventOptions.current);
     return () => {
-      eventTarget.removeEventListener(eventName, eventListener, savedEventOptions.current);
+      target.removeEventListener(eventName, eventListener, savedEventOptions.current);
     };
   }, [eventName, eventTarget, savedEventOptions]);
 };
 
 // src/hooks/useKey/useKey.ts
-var createKeyPredicate = (keyFilter) => {
-  if (typeof keyFilter === "function") {
-    return keyFilter;
-  }
-  if (typeof keyFilter === "string") {
-    return (event) => event.key === keyFilter;
-  }
-  if (keyFilter !== null && keyFilter !== void 0 && !!keyFilter) {
-    return () => true;
-  }
-  return () => false;
-};
-var useKey = (key, eventHandler, options = {}, dependencies = [key]) => {
-  const { eventName = "keydown", eventTarget, eventOptions } = options;
-  const memoizedEventHandler = useMemo2(() => {
-    const predicate = createKeyPredicate(key);
-    return (handlerEvent) => {
+var useKey = (key, eventHandler, { eventName = "keydown", eventTarget, eventOptions } = {}) => {
+  const memoizedEventHandler = useCallback3(
+    (handlerEvent) => {
       if (["INPUT", "TEXTAREA", "SELECT"].includes(document.activeElement?.nodeName ?? "") || document.activeElement?.isContentEditable) {
         return;
       }
-      if (predicate(handlerEvent)) {
-        return eventHandler(handlerEvent);
+      let matchesKey = false;
+      if (typeof key === "function") {
+        matchesKey = key(handlerEvent);
+      } else if (typeof key === "string") {
+        matchesKey = handlerEvent.key === key;
+      } else if (key) {
+        matchesKey = true;
+      } else {
+        matchesKey = false;
+      }
+      if (matchesKey) {
+        eventHandler(handlerEvent);
       }
-    };
-  }, dependencies);
+    },
+    [key, eventHandler]
+  );
   useEvent(eventName, memoizedEventHandler, eventTarget, eventOptions);
 };
 
@@ -1622,16 +1628,16 @@ var useAriaLive = () => {
 };
 
 // src/hooks/useToast/useToast.tsx
-import { useCallback as useCallback3 } from "react";
+import { useCallback as useCallback4 } from "react";
 import { toast as sonnerToast } from "sonner";
 
 // src/private/components/Toast/Toast.tsx
 import { cloneElement, isValidElement } from "react";
 import styled2 from "styled-components";
-import { isNotNil as isNotNil2 } from "@wistia/type-guards";
+import { isNotNil as isNotNil3 } from "@wistia/type-guards";
 
 // src/components/Ellipsis/Ellipsis.tsx
-import { isNotNil } from "@wistia/type-guards";
+import { isNotNil as isNotNil2 } from "@wistia/type-guards";
 import styled, { css as css10 } from "styled-components";
 import { jsx as jsx4 } from "react/jsx-runtime";
 var ellipsisStyle = css10`
@@ -1663,7 +1669,7 @@ var ellipsisFlexParentStyle = css10`
 var EllipsisComponent = styled.div`
   ${ellipsisStyle};
   ${({ $lines }) => {
-  if (isNotNil($lines)) {
+  if (isNotNil2($lines)) {
     return css10`
         -webkit-box-orient: vertical;
         -webkit-line-clamp: ${$lines};
@@ -1847,7 +1853,7 @@ var StyledToast = styled2.div`
   }
 `;
 var Action = ({ actionButton }) => {
-  if (isNotNil2(actionButton) && isValidElement(actionButton)) {
+  if (isNotNil3(actionButton) && isValidElement(actionButton)) {
     return /* @__PURE__ */ jsx5(ActionWrapper, { children: cloneElement(actionButton, {
       variant: "soft",
       // force Button variant
@@ -1871,7 +1877,7 @@ var Toast = ({
       $colorScheme: colorScheme,
       children: [
         /* @__PURE__ */ jsxs2(MessageWrapper, { children: [
-          isNotNil2(icon) ? icon : null,
+          isNotNil3(icon) ? icon : null,
           /* @__PURE__ */ jsx5(Message, { lines: 3, children: message })
         ] }),
         /* @__PURE__ */ jsx5(Action, { actionButton: action })
@@ -1884,7 +1890,7 @@ Toast.displayName = "Toast";
 // src/hooks/useToast/useToast.tsx
 import { jsx as jsx6 } from "react/jsx-runtime";
 var useToast = () => {
-  return useCallback3(
+  return useCallback4(
     ({ message, action, colorScheme, icon, position = "bottom-left", duration = 3e3 }) => {
       sonnerToast.custom(
         () => {
@@ -1912,7 +1918,7 @@ import styled6, { css as css14 } from "styled-components";
 // src/components/Button/Button.tsx
 import { forwardRef as forwardRef2 } from "react";
 import styled5 from "styled-components";
-import { isNotNil as isNotNil4, isNotUndefined as isNotUndefined3 } from "@wistia/type-guards";
+import { isNotNil as isNotNil5, isNotUndefined as isNotUndefined3 } from "@wistia/type-guards";
 
 // src/css/buttonResetCss.tsx
 import { css as css12 } from "styled-components";
@@ -5276,15 +5282,15 @@ var iconMap = {
 };
 
 // src/private/hooks/useResponsiveProp/useResponsiveProp.ts
-import { isNotUndefined, isRecord, isUndefined } from "@wistia/type-guards";
-import { useMemo as useMemo3 } from "react";
+import { isNotUndefined, isRecord as isRecord2, isUndefined } from "@wistia/type-guards";
+import { useMemo as useMemo2 } from "react";
 var isResponsiveObject = (values) => {
   return typeof values === "object" && values !== null && !Array.isArray(values) && "base" in values;
 };
 var useResponsiveProp = (values) => {
   const activeMediaQueries = useActiveMq();
-  return useMemo3(() => {
-    if (isRecord(values) && isResponsiveObject(values)) {
+  return useMemo2(() => {
+    if (isRecord2(values) && isResponsiveObject(values)) {
       const mq2 = activeMediaQueries.find((key) => key in values);
       return isNotUndefined(mq2) && isNotUndefined(values[mq2]) ? values[mq2] : values.base;
     }
@@ -5351,7 +5357,7 @@ Icon.displayName = "Icon";
 
 // src/components/Link/Link.tsx
 import { forwardRef } from "react";
-import { isNil as isNil4, isNotNil as isNotNil3, isNotUndefined as isNotUndefined2, isUndefined as isUndefined2 } from "@wistia/type-guards";
+import { isNil as isNil4, isNotNil as isNotNil4, isNotUndefined as isNotUndefined2, isUndefined as isUndefined2 } from "@wistia/type-guards";
 import styled4 from "styled-components";
 import { Link as RouterLink, useInRouterContext } from "react-router-dom";
 import { jsx as jsx161 } from "react/jsx-runtime";
@@ -5402,7 +5408,7 @@ var Link = forwardRef(
         } finally {
           if (routingCallback !== null) {
             routingCallback();
-          } else if (isNotNil3(to)) {
+          } else if (isNotNil4(to)) {
             window.location.assign(to);
           } else {
           }
@@ -5502,8 +5508,8 @@ var ButtonContent = ({
     /* @__PURE__ */ jsxs5(
       StyledButtonContent,
       {
-        $hasLeftIcon: isNotNil4(leftIcon),
-        $hasRightIcon: isNotNil4(rightIcon),
+        $hasLeftIcon: isNotNil5(leftIcon),
+        $hasRightIcon: isNotNil5(rightIcon),
         $isLoading: isLoading,
         children: [
           leftIcon ?? null,
@@ -5571,7 +5577,7 @@ var Button = forwardRef2(
         event.preventDefault();
         return;
       }
-      if (isNotNil4(onClick)) {
+      if (isNotNil5(onClick)) {
         onClick(event);
       }
     };
@@ -5731,7 +5737,7 @@ var ActionButton = forwardRef3(
 ActionButton.displayName = "ActionButton";
 
 // src/components/Avatar/Avatar.tsx
-import { useState as useState4, useMemo as useMemo4 } from "react";
+import { useState as useState4, useMemo as useMemo3, useEffect as useEffect3 } from "react";
 import { isNil as isNil6 } from "@wistia/type-guards";
 import styled8 from "styled-components";
 
@@ -5863,6 +5869,9 @@ var Avatar = ({
   ...otherProps
 }) => {
   const [imageLoadState, setImageLoadState] = useState4(null);
+  useEffect3(() => {
+    setImageLoadState(null);
+  }, [imageUrl]);
   const handleImageLoad = () => {
     setImageLoadState("loaded");
     onImageLoad?.("image");
@@ -5872,7 +5881,7 @@ var Avatar = ({
     onImageLoad?.("initials");
   };
   const avatarSize = heightAndWidth ?? avatarSizeMap[size];
-  const avatarColor = useMemo4(() => chooseColorScheme(name), [name]);
+  const avatarColor = useMemo3(() => chooseColorScheme(name), [name]);
   const showInitials = isNil6(imageUrl) || imageLoadState === "error";
   return /* @__PURE__ */ jsx165(
     AvatarWrapper,
@@ -5904,7 +5913,7 @@ Avatar.displayName = "Avatar";
 // src/components/Badge/Badge.tsx
 import { forwardRef as forwardRef4 } from "react";
 import styled9 from "styled-components";
-import { isNotNil as isNotNil5 } from "@wistia/type-guards";
+import { isNotNil as isNotNil6 } from "@wistia/type-guards";
 import { jsx as jsx166, jsxs as jsxs7 } from "react/jsx-runtime";
 var StyledBadge = styled9.div`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
@@ -5928,7 +5937,7 @@ var StyledBadge = styled9.div`
 `;
 var Badge = forwardRef4(
   ({ colorScheme = "inherit", label, icon, ...otherProps }, ref) => {
-    const hasIcon = isNotNil5(icon);
+    const hasIcon = isNotNil6(icon);
     return /* @__PURE__ */ jsxs7(
       StyledBadge,
       {
@@ -5949,12 +5958,12 @@ Badge.displayName = "Badge";
 // src/components/Box/Box.tsx
 import { Children, cloneElement as cloneElement2 } from "react";
 import styled10 from "styled-components";
-import { isNotNil as isNotNil6, isNil as isNil7, isRecord as isRecord2 } from "@wistia/type-guards";
+import { isNotNil as isNotNil7, isNil as isNil7, isRecord as isRecord3 } from "@wistia/type-guards";
 import { jsx as jsx167 } from "react/jsx-runtime";
 var isDev = process.env["NODE_ENV"] === "development" || process.env["NODE_ENV"] === "test";
 var getGapStyle = (gap) => {
-  if (isNotNil6(gap)) {
-    if (isRecord2(gap)) {
+  if (isNotNil7(gap)) {
+    if (isRecord3(gap)) {
       return Object.entries(gap).map(([key, value]) => {
         return `${key}-gap: var(--wui-${value})};`;
       }).join("");
@@ -5997,22 +6006,22 @@ var BoxComponent = styled10.div`
   align-content: ${({ $alignContent }) => $alignContent};
   align-items: ${({ $alignItems }) => $alignItems};
   align-self: ${({ $alignSelf }) => $alignSelf ?? null};
-  display: ${({ $inline }) => isNotNil6($inline) && $inline ? "inline-flex" : "flex"};
-  flex-basis: ${({ $basis }) => isNotNil6($basis) ? $basis : null};
+  display: ${({ $inline }) => isNotNil7($inline) && $inline ? "inline-flex" : "flex"};
+  flex-basis: ${({ $basis }) => isNotNil7($basis) ? $basis : null};
   flex-direction: ${({ $flexDirection }) => $flexDirection};
   ${({ $fillBox: fill }) => getFillStyle(fill)};
   ${({ $fillViewport }) => getFillViewportStyle($fillViewport)};
 
   /* Box children styles */
-  flex-grow: ${({ $grow }) => isNotNil6($grow) ? $grow : null};
-  flex-shrink: ${({ $shrink }) => isNotNil6($shrink) ? $shrink : null};
+  flex-grow: ${({ $grow }) => isNotNil7($grow) ? $grow : null};
+  flex-shrink: ${({ $shrink }) => isNotNil7($shrink) ? $shrink : null};
   flex-wrap: ${({ $wrapItems }) => $wrapItems ? "wrap" : "nowrap"};
   ${({ $gap }) => getGapStyle($gap)};
   justify-content: ${({ $justifyContent }) => $justifyContent};
-  order: ${({ $order }) => isNotNil6($order) ? $order : null};
+  order: ${({ $order }) => isNotNil7($order) ? $order : null};
 `;
 var wrapChildren = (children) => {
-  if (isNotNil6(children)) {
+  if (isNotNil7(children)) {
     if (typeof children === "object" && isDev) {
       return Children.map(children, (child) => {
         if (isNil7(child)) return null;
@@ -6098,11 +6107,12 @@ Breadcrumbs.displayName = "Breadcrumbs";
 
 // src/components/Breadcrumbs/Breadcrumb.tsx
 import { Fragment as Fragment2, jsx as jsx169, jsxs as jsxs8 } from "react/jsx-runtime";
-var Breadcrumb = ({ icon, href, children }) => {
+var Breadcrumb = ({ icon, href, children, ...props }) => {
   return /* @__PURE__ */ jsxs8(Fragment2, { children: [
     /* @__PURE__ */ jsx169(
       Button,
       {
+        ...props,
         href,
         leftIcon: icon,
         variant: "ghost",
@@ -6618,7 +6628,7 @@ var Divider = ({
 Divider.displayName = "Divider";
 
 // src/components/Form/Form.tsx
-import { forwardRef as forwardRef8, useRef as useRef3, useMemo as useMemo5, createContext as createContext2, useState as useState5, useId as useId2 } from "react";
+import { forwardRef as forwardRef8, useRef as useRef3, useMemo as useMemo4, createContext as createContext2, useState as useState5, useId as useId2 } from "react";
 import styled20 from "styled-components";
 import { isNotUndefined as isNotUndefined4, isUndefined as isUndefined3 } from "@wistia/type-guards";
 
@@ -6712,7 +6722,7 @@ var FormComponent = ({ children, action, values = {}, validate, fullWidth = fals
       void action(null);
     }
   };
-  const context = useMemo5(() => {
+  const context = useMemo4(() => {
     return {
       values,
       errors,
@@ -6743,12 +6753,12 @@ FormComponent.displayName = "Form";
 var Form = forwardRef8(FormComponent);
 
 // src/components/Form/useFormState.tsx
-import { useCallback as useCallback4, useState as useState6 } from "react";
+import { useCallback as useCallback5, useState as useState6 } from "react";
 var useFormState = (action, initialData = {}) => {
   const [data, setData] = useState6(initialData);
   const [isPending, setIsPending] = useState6(false);
   const [error, setError] = useState6(null);
-  const formAction = useCallback4(
+  const formAction = useCallback5(
     async (nextFormData) => {
       if (nextFormData === null) {
         setData(initialData);
@@ -6819,7 +6829,7 @@ var FormErrorSummary = ({ description }) => {
 // src/components/FormField/FormField.tsx
 import { Children as Children2, cloneElement as cloneElement3, useContext as useContext3 } from "react";
 import styled23 from "styled-components";
-import { isArray as isArray2, isNotNil as isNotNil7, isNotUndefined as isNotUndefined6, isUndefined as isUndefined4 } from "@wistia/type-guards";
+import { isArray as isArray2, isNotNil as isNotNil8, isNotUndefined as isNotUndefined6, isUndefined as isUndefined4 } from "@wistia/type-guards";
 
 // src/components/Text/Text.tsx
 import { forwardRef as forwardRef9 } from "react";
@@ -6999,7 +7009,7 @@ TextComponent.displayName = "Text";
 var Text = makePolymorphic(TextComponent);
 
 // src/components/FormGroup/CheckboxGroup.tsx
-import { createContext as createContext3, useMemo as useMemo6 } from "react";
+import { createContext as createContext3, useMemo as useMemo5 } from "react";
 
 // src/components/FormGroup/FormGroup.tsx
 import styled22 from "styled-components";
@@ -7045,7 +7055,7 @@ var CheckboxGroup = ({
   value,
   ...props
 }) => {
-  const context = useMemo6(() => {
+  const context = useMemo5(() => {
     return {
       name,
       onChange
@@ -7123,8 +7133,8 @@ var FormField = ({
       defaultValue
     };
   }
-  if (isNotNil7(checkboxGroup)) {
-    const computedName = isNotNil7(checkboxGroup.name) ? `${checkboxGroup.name}[${name}]` : name;
+  if (isNotNil8(checkboxGroup)) {
+    const computedName = isNotNil8(checkboxGroup.name) ? `${checkboxGroup.name}[${name}]` : name;
     const handleChange = (event) => {
       if (isNotUndefined6(props.onChange)) {
         props.onChange(event);
@@ -7137,15 +7147,15 @@ var FormField = ({
       ...childProps,
       name: computedName,
       onChange: handleChange,
-      "aria-invalid": isNotNil7(error),
-      "aria-describedby": isNotNil7(error) ? `${id}-error` : void 0
+      "aria-invalid": isNotNil8(error),
+      "aria-describedby": isNotNil8(error) ? `${id}-error` : void 0
     };
   }
   Children2.only(children);
   return /* @__PURE__ */ jsxs12(StyledFormField, { ...props, children: [
     !isInlineLabel && /* @__PURE__ */ jsx183(Label, { htmlFor: id, children: label }),
     cloneElement3(children, childProps),
-    isNotNil7(computedError) ? /* @__PURE__ */ jsx183(
+    isNotNil8(computedError) ? /* @__PURE__ */ jsx183(
       ErrorMessages,
       {
         errors: computedError,
@@ -7157,7 +7167,7 @@ var FormField = ({
 FormField.displayName = "FormField";
 
 // src/components/FormGroup/RadioGroup.tsx
-import { createContext as createContext4, useMemo as useMemo7 } from "react";
+import { createContext as createContext4, useMemo as useMemo6 } from "react";
 import { jsx as jsx184 } from "react/jsx-runtime";
 var RadioGroupContext = createContext4(null);
 var RadioGroup = ({
@@ -7167,7 +7177,7 @@ var RadioGroup = ({
   value,
   ...props
 }) => {
-  const context = useMemo7(() => {
+  const context = useMemo6(() => {
     return {
       name,
       onChange
@@ -7218,7 +7228,7 @@ IconButton.displayName = "IconButton";
 // src/components/Input/Input.tsx
 import { forwardRef as forwardRef11, cloneElement as cloneElement5, useRef as useRef6 } from "react";
 import styled25, { css as css19 } from "styled-components";
-import { isNil as isNil10, isNotNil as isNotNil8 } from "@wistia/type-guards";
+import { isNil as isNil10, isNotNil as isNotNil9 } from "@wistia/type-guards";
 import { jsx as jsx186, jsxs as jsxs13 } from "react/jsx-runtime";
 var inputStyles = css19`
   --wui-input-color-bg: var(--wui-color-bg-surface);
@@ -7306,7 +7316,7 @@ var StyledInputContainer = styled25.div`
   }
 `;
 var isValidRef = (ref) => {
-  return typeof ref === "object" && ref !== null && "current" in ref && isNotNil8(ref.current);
+  return typeof ref === "object" && ref !== null && "current" in ref && isNotNil9(ref.current);
 };
 var Input = forwardRef11(
   ({
@@ -7324,21 +7334,21 @@ var Input = forwardRef11(
     if (isNil10(leftIcon) && type === "search") {
       leftIconToDisplay = /* @__PURE__ */ jsx186(Icon, { type: "search" });
     }
-    if (isNotNil8(leftIconToDisplay)) {
+    if (isNotNil9(leftIconToDisplay)) {
       leftIconToDisplay = cloneElement5(leftIconToDisplay, {
         size: "md",
         className: "wui-input-left-icon"
       });
     }
     let rightIconToDisplay = rightIcon;
-    if (isNotNil8(rightIconToDisplay)) {
+    if (isNotNil9(rightIconToDisplay)) {
       rightIconToDisplay = cloneElement5(rightIconToDisplay, {
         size: "md",
         className: "wui-input-right-icon"
       });
     }
     const handleFocus = (event) => {
-      if (isNotNil8(props.onFocus)) {
+      if (isNotNil9(props.onFocus)) {
         props.onFocus(event);
       }
       if (autoSelect && ref && "current" in ref) {
@@ -7386,7 +7396,7 @@ import {
   DropdownMenuPortal,
   DropdownMenuContent
 } from "@radix-ui/react-dropdown-menu";
-import { isNotNil as isNotNil9, isNotUndefined as isNotUndefined7 } from "@wistia/type-guards";
+import { isNotNil as isNotNil10, isNotUndefined as isNotUndefined7 } from "@wistia/type-guards";
 import { jsx as jsx187, jsxs as jsxs14 } from "react/jsx-runtime";
 var open = keyframes`
   from {
@@ -7487,7 +7497,7 @@ var Menu = ({
   ...props
 }) => {
   let controlProps = {
-    ...isNotNil9(onOpenChange) && isNotNil9(isOpen) ? { open: isOpen, onOpenChange } : {}
+    ...isNotNil10(onOpenChange) && isNotNil10(isOpen) ? { open: isOpen, onOpenChange } : {}
   };
   if (disabled) {
     controlProps = {
@@ -7569,12 +7579,12 @@ import {
   DropdownMenuSubTrigger,
   DropdownMenuItem
 } from "@radix-ui/react-dropdown-menu";
-import { isNotNil as isNotNil11 } from "@wistia/type-guards";
+import { isNotNil as isNotNil12 } from "@wistia/type-guards";
 
 // src/components/Menu/MenuItemButton.tsx
 import { forwardRef as forwardRef12 } from "react";
 import styled28 from "styled-components";
-import { isNotNil as isNotNil10, isNotUndefined as isNotUndefined8 } from "@wistia/type-guards";
+import { isNotNil as isNotNil11, isNotUndefined as isNotUndefined8 } from "@wistia/type-guards";
 import { jsx as jsx189, jsxs as jsxs15 } from "react/jsx-runtime";
 var StyledButton3 = styled28(Button)`
   ${({ colorScheme }) => getColorScheme(colorScheme)};
@@ -7677,7 +7687,7 @@ var MenuItemButton = forwardRef12(({ children, appearance, command, icon, ...pro
       children: [
         props.leftIcon ? /* @__PURE__ */ jsx189(StyledLeftIconContainer, { children: props.leftIcon }) : null,
         /* @__PURE__ */ jsx189(StyledLabelAndDescriptionContainer, { children }),
-        isNotNil10(badge) || isNotNil10(command) ? /* @__PURE__ */ jsx189(StyledBadgeContainer, { children: badge ?? command }) : null,
+        isNotNil11(badge) || isNotNil11(command) ? /* @__PURE__ */ jsx189(StyledBadgeContainer, { children: badge ?? command }) : null,
         props.rightIcon ? /* @__PURE__ */ jsx189(StyledRightIconContainer, { children: props.rightIcon }) : null
       ]
     }
@@ -7744,7 +7754,7 @@ var SubMenu = ({
   return isSmAndUp ? /* @__PURE__ */ jsxs16(DropdownMenuSub, { onOpenChange, children: [
     /* @__PURE__ */ jsxs16(SubMenuTrigger, { ...props, children: [
       /* @__PURE__ */ jsx191(MenuItemLabel, { children: label }),
-      isNotNil11(description) ? /* @__PURE__ */ jsx191(MenuItemDescription, { children: description }) : null
+      isNotNil12(description) ? /* @__PURE__ */ jsx191(MenuItemDescription, { children: description }) : null
     ] }),
     /* @__PURE__ */ jsx191(DropdownMenuPortal2, { children: /* @__PURE__ */ jsx191(SubMenuContent, { children }) })
   ] }) : /* @__PURE__ */ jsxs16(DropdownMenuGroup, { children: [
@@ -7931,7 +7941,7 @@ CheckboxMenuItem.displayName = "CheckboxMenuItem";
 import { forwardRef as forwardRef16 } from "react";
 import styled36 from "styled-components";
 import { Root as DialogRoot, Portal as DialogPortal } from "@radix-ui/react-dialog";
-import { isNotNil as isNotNil14 } from "@wistia/type-guards";
+import { isNotNil as isNotNil15 } from "@wistia/type-guards";
 
 // src/components/Modal/ModalHeader.tsx
 import styled33 from "styled-components";
@@ -7958,7 +7968,7 @@ var ModalCloseButton = () => {
 
 // src/components/ScreenReaderOnly/ScreenReaderOnly.tsx
 import styled32 from "styled-components";
-import { isNotNil as isNotNil12 } from "@wistia/type-guards";
+import { isNotNil as isNotNil13 } from "@wistia/type-guards";
 import { jsx as jsx197 } from "react/jsx-runtime";
 var VisuallyHidden = styled32.div({ ...visuallyHiddenStyle });
 var VisuallyHiddenButFocusable = styled32.div({
@@ -7970,7 +7980,7 @@ var ScreenReaderOnly = ({
   focusable = false,
   ...otherProps
 }) => {
-  const accessibleText = isNotNil12(text) ? text : children;
+  const accessibleText = isNotNil13(text) ? text : children;
   if (focusable) {
     return /* @__PURE__ */ jsx197(VisuallyHiddenButFocusable, { ...otherProps, children: accessibleText });
   }
@@ -8016,16 +8026,16 @@ import styled34 from "styled-components";
 import { Content as DialogContent } from "@radix-ui/react-dialog";
 
 // src/private/hooks/useFocusRestore/useFocusRestore.ts
-import { useRef as useRef7, useEffect as useEffect3 } from "react";
-import { isNotNil as isNotNil13 } from "@wistia/type-guards";
+import { useRef as useRef7, useEffect as useEffect4 } from "react";
+import { isNotNil as isNotNil14 } from "@wistia/type-guards";
 var useFocusRestore = () => {
   const previouslyFocusedRef = useRef7(null);
-  useEffect3(() => {
+  useEffect4(() => {
     previouslyFocusedRef.current = document.activeElement;
   }, []);
-  useEffect3(() => {
+  useEffect4(() => {
     return () => {
-      if (isNotNil13(previouslyFocusedRef.current)) {
+      if (isNotNil14(previouslyFocusedRef.current)) {
         setTimeout(() => {
           previouslyFocusedRef.current?.focus();
         }, 0);
@@ -8169,7 +8179,7 @@ var Modal = forwardRef16(
       DialogRoot,
       {
         onOpenChange: (open2) => {
-          if (!open2 && isNotNil14(onRequestClose)) {
+          if (!open2 && isNotNil15(onRequestClose)) {
             onRequestClose();
           }
         },
@@ -8183,7 +8193,7 @@ var Modal = forwardRef16(
               "aria-describedby": void 0,
               fullHeight,
               onOpenAutoFocus: (event) => {
-                if (isNotNil14(initialFocusRef) && initialFocusRef.current) {
+                if (isNotNil15(initialFocusRef) && initialFocusRef.current) {
                   event.preventDefault();
                   requestAnimationFrame(() => {
                     initialFocusRef.current?.focus();
@@ -8345,7 +8355,7 @@ Radio.displayName = "Radio";
 // src/components/Tag/Tag.tsx
 import { forwardRef as forwardRef18 } from "react";
 import styled38 from "styled-components";
-import { isNil as isNil11, isNotNil as isNotNil15, isNonEmptyString as isNonEmptyString4 } from "@wistia/type-guards";
+import { isNil as isNil11, isNotNil as isNotNil16, isNonEmptyString as isNonEmptyString4 } from "@wistia/type-guards";
 import { Fragment as Fragment3, jsx as jsx203, jsxs as jsxs22 } from "react/jsx-runtime";
 var TagLabel = styled38.a`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
@@ -8451,7 +8461,7 @@ var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
 };
 var Tag = forwardRef18(
   ({ onClickRemove, colorScheme = "inherit", href, label, onClickRemoveLabel, ...otherProps }, ref) => {
-    const labelProps = isNotNil15(href) && isNonEmptyString4(href) ? { href, as: "a" } : { as: "span" };
+    const labelProps = isNotNil16(href) && isNonEmptyString4(href) ? { href, as: "a" } : { as: "span" };
     return /* @__PURE__ */ jsxs22(
       StyledTag,
       {
@@ -8595,7 +8605,7 @@ Tooltip.displayName = "Tooltip";
 
 // src/components/WistiaLogo/WistiaLogo.tsx
 import styled40 from "styled-components";
-import { isNotNil as isNotNil16 } from "@wistia/type-guards";
+import { isNotNil as isNotNil17 } from "@wistia/type-guards";
 import { jsx as jsx205, jsxs as jsxs24 } from "react/jsx-runtime";
 var renderBrandmark = (brandmarkColor, iconOnly) => {
   if (iconOnly) {
@@ -8689,7 +8699,7 @@ var WistiaLogo = ({
       ...otherProps,
       children: [
         /* @__PURE__ */ jsx205("title", { children: title }),
-        isNotNil16(description) ? /* @__PURE__ */ jsx205("desc", { children: description }) : null,
+        isNotNil17(description) ? /* @__PURE__ */ jsx205("desc", { children: description }) : null,
         renderBrandmark(brandmarkColor, iconOnly),
         renderLogotype(logotypeColor, iconOnly)
       ]