@wistia/ui 0.2.0 → 0.3.0

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.2.0
+ * @license @wistia/ui v0.3.0
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -5967,9 +5967,11 @@ var propsForFlexChildren = /* @__PURE__ */ new Set(["alignSelf", "basis", "grow"
 var getGapStyle = (gap) => {
   if ((0, import_type_guards14.isNotNil)(gap)) {
     if ((0, import_type_guards14.isRecord)(gap)) {
-      return Object.entries(gap).map(([key, value]) => `${key}-gap: ${value};`).join("");
+      return Object.entries(gap).map(([key, value]) => {
+        return `${key}-gap: var(--wui-${value})};`;
+      }).join("");
     }
-    return `gap: ${gap.toString()};`;
+    return `gap: var(--wui-${gap.toString()})};`;
   }
   return void 0;
 };
@@ -7296,10 +7298,10 @@ var close = import_styled_components37.keyframes`
 `;
 var menuContentCss = import_styled_components37.css`
   --menu-font-family: var(--wui-typography-family-default);
-  --menu-bg: var(--wui-color-bg-fill-white); /* TODO - Not sure what token to use for this */
+  --menu-bg: var(--wui-color-bg-surface);
   --menu-shadow: 0 0 64px 0 rgba(0 0 0 / 8%); /* TODO - Need a box-shadow token */
-  --menu-border-radius: var(--wui-border-radius-01);
-  --menu-padding: var(--wui-space-03);
+  --menu-border-radius: var(--wui-border-radius-02);
+  --menu-padding: var(--wui-space-02);
   --menu-min-width: 120px;
   --menu-max-width: 284px;
 
@@ -7315,6 +7317,7 @@ var menuContentCss = import_styled_components37.css`
   padding: var(--menu-padding);
   transform-origin: var(--radix-dropdown-menu-content-transform-origin);
   z-index: var(--wui-zindex-menu);
+  border: 1px solid var(--wui-color-border);
 
   &[data-state='closed'] {
     animation: ${close}; /* TODO - need easing tokens */
@@ -7332,12 +7335,35 @@ var menuContentCss = import_styled_components37.css`
     margin: var(--wui-space-02) 0;
   }
 `;
+var menuItemCss = import_styled_components37.css`
+  --menu-label-description-gap: var(--wui-space-01);
+  --menu-item-inner-gap: var(--wui-space-03);
+  --menu-item-left-icon-size: 24px;
+  --menu-item-right-icon-size: 16px;
+  --menu-item-padding: var(--wui-space-02);
+  --menu-label-font-size: var(--wui-typography-label-3-size);
+  --menu-label-font-weight: var(--wui-typography-label-3-weight);
+  --menu-label-line-height: var(--wui-typography-label-3-line-height);
+`;
+var compactMenuItemCss = import_styled_components37.css`
+  --menu-label-description-gap: 0;
+  --menu-item-inner-gap: var(--wui-space-02);
+  --menu-item-left-icon-size: 16px;
+  --menu-item-right-icon-size: 12px;
+  --menu-item-padding: 6px;
+  --menu-label-font-size: var(--wui-typography-label-4-size);
+  --menu-label-font-weight: var(--wui-typography-label-4-weight);
+  --menu-label-line-height: var(--wui-typography-label-4-line-height);
+`;
 var MenuContent = (0, import_styled_components37.default)(import_react_dropdown_menu.DropdownMenuContent)`
   ${menuContentCss}
+  ${({ $compact }) => $compact ? compactMenuItemCss : menuItemCss}
 `;
 var Menu = ({
   align = "start",
   children,
+  disabled = false,
+  compact = false,
   trigger,
   label,
   isOpen,
@@ -7346,16 +7372,26 @@ var Menu = ({
   onInteractOutside,
   ...props
 }) => {
+  let controlProps = {
+    ...(0, import_type_guards22.isNotNil)(onOpenChange) && (0, import_type_guards22.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {}
+  };
+  if (disabled) {
+    controlProps = {
+      open: false,
+      onOpenChange: () => null
+    };
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime184.jsxs)(
     import_react_dropdown_menu.DropdownMenu,
     {
       modal: false,
-      ...(0, import_type_guards22.isNotNil)(onOpenChange) && (0, import_type_guards22.isNotNil)(isOpen) ? { open: isOpen, onOpenChange } : {},
+      ...controlProps,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(import_react_dropdown_menu.DropdownMenuTrigger, { asChild: true, children: (0, import_type_guards22.isNotUndefined)(trigger) ? trigger : /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(
           Button,
           {
             "aria-expanded": isOpen,
+            disabled,
             forceState: isOpen ? "active" : void 0,
             rightIcon: /* @__PURE__ */ (0, import_jsx_runtime184.jsx)(Icon, { type: "caret-down" }),
             ...triggerProps,
@@ -7366,11 +7402,12 @@ var Menu = ({
           MenuContent,
           {
             ...props,
+            $compact: compact,
             align,
+            sideOffset: 6,
             onFocusOutside: (event) => {
               event.preventDefault();
             },
-            sideOffset: 6,
             children
           }
         ) })
@@ -7394,9 +7431,10 @@ var MenuLabel = ({ children, ...props }) => {
       asChild: true,
       ...props,
       children: /* @__PURE__ */ (0, import_jsx_runtime185.jsx)(
-        Text,
+        Heading,
         {
-          variant: "label3",
+          renderAs: "span",
+          variant: "heading6",
           ...props,
           children
         }
@@ -7410,6 +7448,7 @@ MenuLabel.displayName = "MenuLabel";
 var import_react28 = require("react");
 var import_styled_components41 = __toESM(require("styled-components"));
 var import_react_dropdown_menu3 = require("@radix-ui/react-dropdown-menu");
+var import_type_guards24 = require("@wistia/type-guards");
 
 // src/components/Menu/MenuItemButton.tsx
 var import_react27 = require("react");
@@ -7417,38 +7456,74 @@ var import_styled_components39 = __toESM(require("styled-components"));
 var import_type_guards23 = require("@wistia/type-guards");
 var import_jsx_runtime186 = require("react/jsx-runtime");
 var StyledButton3 = (0, import_styled_components39.default)(Button)`
-  --menu-item-border-radius: var(--wui-border-radius-01);
-  --menu-item-gap: var(--wui-space-01);
-  --menu-item-inner-gap: var(--wui-space-04);
-  --menu-item-disabled-bg: var(--wui-color-white);
+  ${({ colorScheme }) => getColorScheme(colorScheme)};
 
-  text-align: left;
-  align-items: left;
-  border-radius: var(--menu-item-border-radius);
   display: flex;
+  flex-direction: row;
+  gap: var(--menu-item-inner-gap);
+  padding: var(--menu-item-padding);
+  border-radius: var(--wui-border-radius-01);
+  text-align: left;
+  color: var(--wui-color-text);
+  font-size: var(--menu-label-font-size);
+  font-weight: var(--menu-label-font-weight);
+  line-height: var(--menu-label-line-height);
+
+  :active {
+    background-color: var(--wui-color-bg-surface-active);
+  }
+
+  &[data-highlighted] {
+    outline: none;
+    ${({ $isGated }) => $isGated && getColorScheme("purple")};
+    background-color: var(--wui-color-bg-surface-hover);
+  }
 
   &[aria-disabled='true'] {
-    background-color: var(--menu-item-disabled-bg);
+    --wui-color-text: var(--wui-color-text-disabled);
+    --wui-color-text-secondary: var(--wui-color-text-disabled);
+    --wui-color-icon: var(--wui-color-icon-disabled);
+
+    &[data-highlighted] {
+      background-color: transparent;
+    }
   }
 
-  ${({ $isGated }) => (0, import_type_guards23.isNotUndefined)($isGated) && $isGated ? `color: var(--wui-color-text);` : ""}
+  &[role='menuitemradio'] {
+    padding-left: var(--wui-space-04);
+  }
 `;
-var StyledMenuContent = import_styled_components39.default.div`
-  display: grid;
-  grid-template-areas:
-    'label badge'
-    'description badge';
-  grid-template-columns: 1fr auto;
-  position: relative;
-  align-content: center;
+var StyledLeftIconContainer = import_styled_components39.default.div`
+  height: var(--menu-item-left-icon-size);
+  width: var(--menu-item-left-icon-size);
+
+  svg {
+    height: var(--menu-item-left-icon-size);
+    width: var(--menu-item-left-icon-size);
+  }
+`;
+var StyledRightIconContainer = import_styled_components39.default.div`
+  height: var(--menu-item-right-icon-size);
+  width: var(--menu-item-right-icon-size);
+
+  svg {
+    height: var(--menu-item-right-icon-size);
+    width: var(--menu-item-right-icon-size);
+  }
+`;
+var StyledLabelAndDescriptionContainer = import_styled_components39.default.div`
+  display: flex;
+  flex-direction: column;
+  gap: var(--menu-label-description-gap);
+  flex-basis: 100%;
 `;
 var StyledBadgeContainer = import_styled_components39.default.div`
-  grid-area: badge;
   align-self: start;
   justify-self: end;
-  margin-left: var(--menu-item-inner-gap);
+  font-size: var(--wui-typography-label-4-size);
+  color: var(--wui-color-text-secondary);
 `;
-var MenuItemButton = (0, import_react27.forwardRef)(({ children, appearance, command, ...props }, ref) => {
+var MenuItemButton = (0, import_react27.forwardRef)(({ children, appearance, command, icon, ...props }, ref) => {
   let { colorScheme, badge } = props;
   if (appearance === "dangerous") {
     if ((0, import_type_guards23.isNotUndefined)(colorScheme)) {
@@ -7457,13 +7532,19 @@ var MenuItemButton = (0, import_react27.forwardRef)(({ children, appearance, com
     colorScheme = "error";
   }
   if (appearance === "gated") {
-    if ((0, import_type_guards23.isNotUndefined)(colorScheme)) {
-      console.warn("colorScheme prop is ignored when appearance is gated");
-    }
-    colorScheme = "purple";
-    badge = /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(Icon, { type: "sparkle" });
+    badge = /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(
+      Icon,
+      {
+        colorScheme: "purple",
+        style: {
+          height: "16px",
+          width: "16px"
+        },
+        type: "sparkle"
+      }
+    );
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime186.jsxs)(
     StyledButton3,
     {
       ...props,
@@ -7471,11 +7552,13 @@ var MenuItemButton = (0, import_react27.forwardRef)(({ children, appearance, com
       $isGated: appearance === "gated",
       colorScheme: colorScheme ?? "default",
       fullWidth: true,
-      variant: "ghost",
-      children: /* @__PURE__ */ (0, import_jsx_runtime186.jsxs)(StyledMenuContent, { children: [
-        children,
-        (0, import_type_guards23.isNotNil)(badge) || (0, import_type_guards23.isNotNil)(command) ? /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(StyledBadgeContainer, { children: badge ?? command }) : null
-      ] })
+      unstyled: true,
+      children: [
+        props.leftIcon ? /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(StyledLeftIconContainer, { children: props.leftIcon }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(StyledLabelAndDescriptionContainer, { children }),
+        (0, import_type_guards23.isNotNil)(badge) || (0, import_type_guards23.isNotNil)(command) ? /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(StyledBadgeContainer, { children: badge ?? command }) : null,
+        props.rightIcon ? /* @__PURE__ */ (0, import_jsx_runtime186.jsx)(StyledRightIconContainer, { children: props.rightIcon }) : null
+      ]
     }
   );
 });
@@ -7484,16 +7567,11 @@ MenuItemButton.displayName = "MenuItemButton";
 // src/components/Menu/MenuItemLabelDescription.tsx
 var import_styled_components40 = __toESM(require("styled-components"));
 var import_jsx_runtime187 = require("react/jsx-runtime");
-var StyledMenuItemLabel = (0, import_styled_components40.default)(Text).attrs({ variant: "label3" })`
-  grid-area: label;
-`;
+var StyledMenuItemLabel = import_styled_components40.default.span``;
 var StyledMenuItemDescription = (0, import_styled_components40.default)(Text).attrs({
-  variant: "label4",
+  variant: "body4",
   prominence: "secondary"
-})`
-  margin-top: var(--menu-item-gap);
-  grid-area: description;
-`;
+})``;
 var MenuItemLabel = ({ children }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime187.jsx)(StyledMenuItemLabel, { children });
 };
@@ -7519,7 +7597,7 @@ var StyledSubTrigger = (0, import_styled_components41.default)(import_react_drop
 
   &[data-state='open'],
   &[data-highlighted] {
-    background-color: var(--button-color-bg-hover);
+    background-color: var(--wui-color-bg-surface-hover);
   }
 `;
 var SubMenuTrigger = (props) => {
@@ -7545,7 +7623,7 @@ var SubMenu = ({
   return isSmAndUp ? /* @__PURE__ */ (0, import_jsx_runtime188.jsxs)(import_react_dropdown_menu3.DropdownMenuSub, { onOpenChange, children: [
     /* @__PURE__ */ (0, import_jsx_runtime188.jsxs)(SubMenuTrigger, { ...props, children: [
       /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(MenuItemLabel, { children: label }),
-      /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(MenuItemDescription, { children: description })
+      (0, import_type_guards24.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(MenuItemDescription, { children: description }) : null
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(import_react_dropdown_menu3.DropdownMenuPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime188.jsx)(SubMenuContent, { children }) })
   ] }) : /* @__PURE__ */ (0, import_jsx_runtime188.jsxs)(import_react_dropdown_menu3.DropdownMenuGroup, { children: [
@@ -7624,6 +7702,7 @@ var RadioMenuItem = ({
     import_react_dropdown_menu6.DropdownMenuRadioItem,
     {
       ...extraProps,
+      asChild: true,
       value,
       children: /* @__PURE__ */ (0, import_jsx_runtime191.jsx)(
         MenuItemButton,
@@ -7646,30 +7725,23 @@ var CheckboxIndicator2 = ({ checked, ...props }) => {
     {
       ...props,
       fill: "none",
-      height: "16",
-      viewBox: "0 0 16 16",
-      width: "16",
+      height: "24",
+      viewBox: "0 0 24 24",
+      width: "24",
       xmlns: "http://www.w3.org/2000/svg",
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
           "path",
           {
-            d: "M4 0.5H12C13.933 0.5 15.5 2.067 15.5 4V12C15.5 13.933 13.933 15.5 12 15.5H4C2.067 15.5 0.5 13.933 0.5 12V4C0.5 2.067 2.067 0.5 4 0.5Z",
-            fill: "#2949E5"
+            d: "m4 8c0-2.20914 1.79086-4 4-4h8c2.2091 0 4 1.79086 4 4v8c0 2.2091-1.7909 4-4 4h-8c-2.20914 0-4-1.7909-4-4z",
+            fill: "#2949e5"
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
           "path",
           {
-            d: "M4 0.5H12C13.933 0.5 15.5 2.067 15.5 4V12C15.5 13.933 13.933 15.5 12 15.5H4C2.067 15.5 0.5 13.933 0.5 12V4C0.5 2.067 2.067 0.5 4 0.5Z",
-            stroke: "#D9D9DE"
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
-          "path",
-          {
-            d: "M6.47275 11.1931L3.3775 8.08009C3.19155 7.89306 3.19155 7.58982 3.3775 7.40278L4.05092 6.72547C4.23688 6.53842 4.53841 6.53842 4.72436 6.72547L6.80947 8.82254L11.2755 4.33082C11.4615 4.1438 11.763 4.1438 11.949 4.33082L12.6224 5.00813C12.8083 5.19516 12.8083 5.4984 12.6224 5.68544L7.14618 11.1931C6.96021 11.3802 6.6587 11.3802 6.47275 11.1931Z",
-            fill: "white"
+            d: "m10.4728 15.1931-3.09523-3.1131c-.18596-.187-.18596-.4902 0-.6773l.67341-.6773c.18596-.187.48749-.187.67344 0l2.08508 2.0971 4.4661-4.49174c.1859-.18703.4875-.18703.6734 0l.6734.67731c.186.18703.186.49027 0 .67731l-5.4762 5.50772c-.1859.187-.4874.187-.6734 0z",
+            fill: "#fff"
           }
         )
       ]
@@ -7679,23 +7751,23 @@ var CheckboxIndicator2 = ({ checked, ...props }) => {
     {
       ...props,
       fill: "none",
-      height: "16",
-      viewBox: "0 0 16 16",
-      width: "16",
+      height: "24",
+      viewBox: "0 0 24 24",
+      width: "24",
       xmlns: "http://www.w3.org/2000/svg",
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
           "path",
           {
-            d: "M4 0.5H12C13.933 0.5 15.5 2.067 15.5 4V12C15.5 13.933 13.933 15.5 12 15.5H4C2.067 15.5 0.5 13.933 0.5 12V4C0.5 2.067 2.067 0.5 4 0.5Z",
-            fill: "#FCFCFD"
+            d: "m8 4.5h8c1.933 0 3.5 1.567 3.5 3.5v8c0 1.933-1.567 3.5-3.5 3.5h-8c-1.933 0-3.5-1.567-3.5-3.5v-8c0-1.933 1.567-3.5 3.5-3.5z",
+            fill: "#fcfcfd"
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
           "path",
           {
-            d: "M4 0.5H12C13.933 0.5 15.5 2.067 15.5 4V12C15.5 13.933 13.933 15.5 12 15.5H4C2.067 15.5 0.5 13.933 0.5 12V4C0.5 2.067 2.067 0.5 4 0.5Z",
-            stroke: "#D9D9DE"
+            d: "m8 4.5h8c1.933 0 3.5 1.567 3.5 3.5v8c0 1.933-1.567 3.5-3.5 3.5h-8c-1.933 0-3.5-1.567-3.5-3.5v-8c0-1.933 1.567-3.5 3.5-3.5z",
+            stroke: "#bbbbc4"
           }
         )
       ]
@@ -7711,6 +7783,7 @@ var CheckboxMenuItem = ({
   return /* @__PURE__ */ (0, import_jsx_runtime192.jsx)(
     import_react_dropdown_menu7.DropdownMenuCheckboxItem,
     {
+      asChild: true,
       checked,
       onCheckedChange,
       onSelect,
@@ -7730,7 +7803,7 @@ CheckboxMenuItem.displayName = "CheckboxMenuItem";
 var import_react33 = require("react");
 var import_styled_components47 = __toESM(require("styled-components"));
 var import_react_dialog4 = require("@radix-ui/react-dialog");
-var import_type_guards26 = require("@wistia/type-guards");
+var import_type_guards27 = require("@wistia/type-guards");
 
 // src/components/Modal/ModalHeader.tsx
 var import_styled_components44 = __toESM(require("styled-components"));
@@ -7757,7 +7830,7 @@ var ModalCloseButton = () => {
 
 // src/components/ScreenReaderOnly/ScreenReaderOnly.tsx
 var import_styled_components43 = __toESM(require("styled-components"));
-var import_type_guards24 = require("@wistia/type-guards");
+var import_type_guards25 = require("@wistia/type-guards");
 var import_jsx_runtime194 = require("react/jsx-runtime");
 var VisuallyHidden = import_styled_components43.default.div({ ...visuallyHiddenStyle });
 var VisuallyHiddenButFocusable = import_styled_components43.default.div({
@@ -7769,7 +7842,7 @@ var ScreenReaderOnly = ({
   focusable = false,
   ...otherProps
 }) => {
-  const accessibleText = (0, import_type_guards24.isNotNil)(text) ? text : children;
+  const accessibleText = (0, import_type_guards25.isNotNil)(text) ? text : children;
   if (focusable) {
     return /* @__PURE__ */ (0, import_jsx_runtime194.jsx)(VisuallyHiddenButFocusable, { ...otherProps, children: accessibleText });
   }
@@ -7816,7 +7889,7 @@ var import_react_dialog3 = require("@radix-ui/react-dialog");
 
 // src/private/hooks/useFocusRestore/useFocusRestore.ts
 var import_react30 = require("react");
-var import_type_guards25 = require("@wistia/type-guards");
+var import_type_guards26 = require("@wistia/type-guards");
 var useFocusRestore = () => {
   const previouslyFocusedRef = (0, import_react30.useRef)(null);
   (0, import_react30.useEffect)(() => {
@@ -7824,7 +7897,7 @@ var useFocusRestore = () => {
   }, []);
   (0, import_react30.useEffect)(() => {
     return () => {
-      if ((0, import_type_guards25.isNotNil)(previouslyFocusedRef.current)) {
+      if ((0, import_type_guards26.isNotNil)(previouslyFocusedRef.current)) {
         setTimeout(() => {
           previouslyFocusedRef.current?.focus();
         }, 0);
@@ -7968,7 +8041,7 @@ var Modal = (0, import_react33.forwardRef)(
       import_react_dialog4.Root,
       {
         onOpenChange: (open2) => {
-          if (!open2 && (0, import_type_guards26.isNotNil)(onRequestClose)) {
+          if (!open2 && (0, import_type_guards27.isNotNil)(onRequestClose)) {
             onRequestClose();
           }
         },
@@ -7982,7 +8055,7 @@ var Modal = (0, import_react33.forwardRef)(
               "aria-describedby": void 0,
               fullHeight,
               onOpenAutoFocus: (event) => {
-                if ((0, import_type_guards26.isNotNil)(initialFocusRef) && initialFocusRef.current) {
+                if ((0, import_type_guards27.isNotNil)(initialFocusRef) && initialFocusRef.current) {
                   event.preventDefault();
                   requestAnimationFrame(() => {
                     initialFocusRef.current?.focus();
@@ -8014,7 +8087,7 @@ Modal.displayName = "Modal";
 // src/components/Radio/Radio.tsx
 var import_react34 = require("react");
 var import_styled_components48 = __toESM(require("styled-components"));
-var import_type_guards27 = require("@wistia/type-guards");
+var import_type_guards28 = require("@wistia/type-guards");
 var import_jsx_runtime199 = require("react/jsx-runtime");
 var StyledLabelWrapper2 = import_styled_components48.default.div`
   display: flex;
@@ -8100,7 +8173,7 @@ var Radio = (0, import_react34.forwardRef)(
     ...otherProps
   }, ref) => {
     const generatedId = (0, import_react34.useId)();
-    const computedId = (0, import_type_guards27.isNonEmptyString)(id) ? id : `ui-radio-${generatedId}`;
+    const computedId = (0, import_type_guards28.isNonEmptyString)(id) ? id : `ui-radio-${generatedId}`;
     return /* @__PURE__ */ (0, import_jsx_runtime199.jsxs)(
       StyledRadioWrapper,
       {
@@ -8144,7 +8217,7 @@ Radio.displayName = "Radio";
 // src/components/Tag/Tag.tsx
 var import_react35 = require("react");
 var import_styled_components49 = __toESM(require("styled-components"));
-var import_type_guards28 = require("@wistia/type-guards");
+var import_type_guards29 = require("@wistia/type-guards");
 var import_jsx_runtime200 = require("react/jsx-runtime");
 var TagLabel = import_styled_components49.default.a`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
@@ -8218,10 +8291,10 @@ var StyledTag = import_styled_components49.default.div`
   overflow: hidden;
 `;
 var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
-  if ((0, import_type_guards28.isNil)(onClickRemove)) {
+  if ((0, import_type_guards29.isNil)(onClickRemove)) {
     return null;
   }
-  if ((0, import_type_guards28.isNil)(onClickRemoveLabel)) {
+  if ((0, import_type_guards29.isNil)(onClickRemoveLabel)) {
     throw new Error(
       "for accessibility, onClickRemoveLabel must be provided if onClickRemove is provided"
     );
@@ -8250,7 +8323,7 @@ var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
 };
 var Tag = (0, import_react35.forwardRef)(
   ({ onClickRemove, colorScheme = "inherit", href, label, onClickRemoveLabel, ...otherProps }, ref) => {
-    const labelProps = (0, import_type_guards28.isNotNil)(href) && (0, import_type_guards28.isNonEmptyString)(href) ? { href, as: "a" } : { as: "span" };
+    const labelProps = (0, import_type_guards29.isNotNil)(href) && (0, import_type_guards29.isNonEmptyString)(href) ? { href, as: "a" } : { as: "span" };
     return /* @__PURE__ */ (0, import_jsx_runtime200.jsxs)(
       StyledTag,
       {
@@ -8388,7 +8461,7 @@ Tooltip.displayName = "Tooltip";
 
 // src/components/WistiaLogo/WistiaLogo.tsx
 var import_styled_components51 = __toESM(require("styled-components"));
-var import_type_guards29 = require("@wistia/type-guards");
+var import_type_guards30 = require("@wistia/type-guards");
 var import_jsx_runtime202 = require("react/jsx-runtime");
 var renderBrandmark = (brandmarkColor, iconOnly) => {
   if (iconOnly) {
@@ -8482,7 +8555,7 @@ var WistiaLogo = ({
       ...otherProps,
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime202.jsx)("title", { children: title }),
-        (0, import_type_guards29.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime202.jsx)("desc", { children: description }) : null,
+        (0, import_type_guards30.isNotNil)(description) ? /* @__PURE__ */ (0, import_jsx_runtime202.jsx)("desc", { children: description }) : null,
         renderBrandmark(brandmarkColor, iconOnly),
         renderLogotype(logotypeColor, iconOnly)
       ]