@wistia/ui 0.8.25 → 0.8.26-beta.0dc49b0d.eceffc5

package/dist/index.d.mts

@@ -1668,7 +1668,7 @@ declare const Icon: {
 
 type IconButtonProps = {
     /**
-     * Accessible text for screen readers. Also shows up in a tooltip unless `disableTooltip` is true.
+     * Accessible text for screen readers.
      */
     label: string;
     /**
@@ -1682,7 +1682,7 @@ type IconButtonProps = {
  */
 declare const IconButton: react.ForwardRefExoticComponent<(Omit<{
     /**
-     * Accessible text for screen readers. Also shows up in a tooltip unless `disableTooltip` is true.
+     * Accessible text for screen readers.
      */
     label: string;
     /**
@@ -1691,7 +1691,7 @@ declare const IconButton: react.ForwardRefExoticComponent<(Omit<{
     children: JSX.Element;
 } & Omit<ButtonAsButtonProps, "leftIcon" | "rightIcon" | "fullWidth">, "ref"> | Omit<{
     /**
-     * Accessible text for screen readers. Also shows up in a tooltip unless `disableTooltip` is true.
+     * Accessible text for screen readers.
      */
     label: string;
     /**
@@ -2242,9 +2242,9 @@ declare const MenuItemLabel: ({ children }: MenuItemLabelProps) => react_jsx_run
 declare const MenuItemDescription: ({ children }: MenuItemDescriptionProps) => react_jsx_runtime.JSX.Element;
 
 type MenuRadioGroupProps = DropdownMenuRadioGroupProps & {
-    /** The label for the radio group  */
-    label: ReactNode;
-    /** The radio items */
+    /**
+     * The radio items
+     */
     children: ReactNode | ReactNode[];
     /**
      * @ignore
@@ -2252,7 +2252,7 @@ type MenuRadioGroupProps = DropdownMenuRadioGroupProps & {
     asChild?: never;
 };
 declare const MenuRadioGroup: {
-    ({ children, label, ...props }: MenuRadioGroupProps): react_jsx_runtime.JSX.Element;
+    ({ children, ...props }: MenuRadioGroupProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 

package/dist/index.d.ts

@@ -1668,7 +1668,7 @@ declare const Icon: {
 
 type IconButtonProps = {
     /**
-     * Accessible text for screen readers. Also shows up in a tooltip unless `disableTooltip` is true.
+     * Accessible text for screen readers.
      */
     label: string;
     /**
@@ -1682,7 +1682,7 @@ type IconButtonProps = {
  */
 declare const IconButton: react.ForwardRefExoticComponent<(Omit<{
     /**
-     * Accessible text for screen readers. Also shows up in a tooltip unless `disableTooltip` is true.
+     * Accessible text for screen readers.
      */
     label: string;
     /**
@@ -1691,7 +1691,7 @@ declare const IconButton: react.ForwardRefExoticComponent<(Omit<{
     children: JSX.Element;
 } & Omit<ButtonAsButtonProps, "leftIcon" | "rightIcon" | "fullWidth">, "ref"> | Omit<{
     /**
-     * Accessible text for screen readers. Also shows up in a tooltip unless `disableTooltip` is true.
+     * Accessible text for screen readers.
      */
     label: string;
     /**
@@ -2242,9 +2242,9 @@ declare const MenuItemLabel: ({ children }: MenuItemLabelProps) => react_jsx_run
 declare const MenuItemDescription: ({ children }: MenuItemDescriptionProps) => react_jsx_runtime.JSX.Element;
 
 type MenuRadioGroupProps = DropdownMenuRadioGroupProps & {
-    /** The label for the radio group  */
-    label: ReactNode;
-    /** The radio items */
+    /**
+     * The radio items
+     */
     children: ReactNode | ReactNode[];
     /**
      * @ignore
@@ -2252,7 +2252,7 @@ type MenuRadioGroupProps = DropdownMenuRadioGroupProps & {
     asChild?: never;
 };
 declare const MenuRadioGroup: {
-    ({ children, label, ...props }: MenuRadioGroupProps): react_jsx_runtime.JSX.Element;
+    ({ children, ...props }: MenuRadioGroupProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.8.25
+ * @license @wistia/ui v0.8.26-beta.0dc49b0d.eceffc5
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -8369,6 +8369,11 @@ Checkbox.displayName = "Checkbox";
 
 // src/components/ClickRegion/ClickRegion.tsx
 import { Children as Children3, cloneElement as cloneElement3, useCallback as useCallback8, useEffect as useEffect8 } from "react";
+var isClickableElement = (element) => {
+  if (!element) return false;
+  const el = element;
+  return el.closest("button") !== null || el.closest("a") !== null || el.closest("input") !== null || el.closest("select") !== null || el.closest("textarea") !== null || el.closest("label") !== null || el.closest("[data-wui-faux-input]") !== null;
+};
 var ClickRegion = ({ children, targetRef }) => {
   useEffect8(() => {
     if (targetRef.current && targetRef.current.tagName === "A") {
@@ -8381,7 +8386,10 @@ var ClickRegion = ({ children, targetRef }) => {
   const handleClick = useCallback8(
     (event) => {
       const node = targetRef.current;
-      if (event.target instanceof HTMLAnchorElement && !event.target.hasAttribute("data-click-region-target-link") || event.target instanceof HTMLButtonElement && !event.target.hasAttribute("data-click-region-target-button")) {
+      if (event.target === node) {
+        return;
+      }
+      if (isClickableElement(event.target) && event.target !== node) {
         event.stopPropagation();
         return;
       }
@@ -10365,6 +10373,7 @@ var Menu = ({
             ...props,
             $compact: compact,
             align,
+            collisionPadding: 8,
             sideOffset: 6,
             onFocusOutside: (event) => {
               event.preventDefault();
@@ -10653,12 +10662,9 @@ MenuItem.displayName = "MenuItem";
 import {
   DropdownMenuRadioGroup
 } from "@radix-ui/react-dropdown-menu";
-import { jsx as jsx238, jsxs as jsxs29 } from "react/jsx-runtime";
-var MenuRadioGroup = ({ children, label, ...props }) => {
-  return /* @__PURE__ */ jsxs29(DropdownMenuRadioGroup, { ...props, children: [
-    /* @__PURE__ */ jsx238(MenuLabel, { children: label }),
-    children
-  ] });
+import { jsx as jsx238 } from "react/jsx-runtime";
+var MenuRadioGroup = ({ children, ...props }) => {
+  return /* @__PURE__ */ jsx238(DropdownMenuRadioGroup, { ...props, children });
 };
 MenuRadioGroup.displayName = "MenuRadioGroup";
 
@@ -10705,9 +10711,9 @@ import {
   DropdownMenuItemIndicator as DropdownMenuItemIndicator2
 } from "@radix-ui/react-dropdown-menu";
 import { isNotNil as isNotNil22 } from "@wistia/type-guards";
-import { jsx as jsx240, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx240, jsxs as jsxs29 } from "react/jsx-runtime";
 var CheckboxIndicator = ({ checked, ...props }) => {
-  return checked ? /* @__PURE__ */ jsxs30(
+  return checked ? /* @__PURE__ */ jsxs29(
     "svg",
     {
       ...props,
@@ -10733,7 +10739,7 @@ var CheckboxIndicator = ({ checked, ...props }) => {
         )
       ]
     }
-  ) : /* @__PURE__ */ jsxs30(
+  ) : /* @__PURE__ */ jsxs29(
     "svg",
     {
       ...props,
@@ -10817,7 +10823,7 @@ var ModalCloseButton = () => {
 };
 
 // src/components/Modal/ModalHeader.tsx
-import { jsx as jsx242, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx242, jsxs as jsxs30 } from "react/jsx-runtime";
 var Header = styled46.header`
   display: flex;
   order: 1;
@@ -10841,7 +10847,7 @@ var ModalHeader = ({
   hideCloseButton
 }) => {
   const TitleComponent = hideTitle ? /* @__PURE__ */ jsx242(ScreenReaderOnly, { children: /* @__PURE__ */ jsx242(Title, { children: title }) }) : /* @__PURE__ */ jsx242(Title, { children: title });
-  return /* @__PURE__ */ jsxs31(Header, { $hideTitle: hideTitle, children: [
+  return /* @__PURE__ */ jsxs30(Header, { $hideTitle: hideTitle, children: [
     TitleComponent,
     hideCloseButton ? null : /* @__PURE__ */ jsx242(ModalCloseButton, {})
   ] });
@@ -11026,7 +11032,7 @@ var Backdrop = forwardRef18(
 Backdrop.displayName = "Backdrop";
 
 // src/components/Modal/Modal.tsx
-import { jsx as jsx245, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx245, jsxs as jsxs31 } from "react/jsx-runtime";
 var DEFAULT_MODAL_WIDTH = "532px";
 var ModalBody = styled49.div`
   flex-direction: column;
@@ -11058,9 +11064,9 @@ var Modal = forwardRef19(
           }
         },
         open: isOpen,
-        children: /* @__PURE__ */ jsxs32(DialogPortal, { children: [
+        children: /* @__PURE__ */ jsxs31(DialogPortal, { children: [
           /* @__PURE__ */ jsx245(Backdrop, {}),
-          /* @__PURE__ */ jsxs32(
+          /* @__PURE__ */ jsxs31(
             ModalContent,
             {
               ref,
@@ -11110,7 +11116,7 @@ var getControlProps = (isOpen, onOpenChange) => {
 // src/components/Popover/PopoverArrow.tsx
 import { PopoverArrow as RadixPopoverArrow } from "@radix-ui/react-popover";
 import styled50, { css as css31, keyframes as keyframes4 } from "styled-components";
-import { jsx as jsx246, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx246, jsxs as jsxs32 } from "react/jsx-runtime";
 var StyledPath = styled50.path`
   fill: var(--wui-color-border-secondary);
 `;
@@ -11149,7 +11155,7 @@ var StyledCircle = styled50.circle`
   }
 `;
 var PopoverArrow = ({ isAnimated }) => {
-  return /* @__PURE__ */ jsx246(RadixPopoverArrow, { asChild: true, children: /* @__PURE__ */ jsxs33(
+  return /* @__PURE__ */ jsx246(RadixPopoverArrow, { asChild: true, children: /* @__PURE__ */ jsxs32(
     "svg",
     {
       fill: "none",
@@ -11188,7 +11194,7 @@ var PopoverArrow = ({ isAnimated }) => {
 PopoverArrow.displayName = "PopoverArrow";
 
 // src/components/Popover/Popover.tsx
-import { jsx as jsx247, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx247, jsxs as jsxs33 } from "react/jsx-runtime";
 var StyledContent2 = styled51(Content2)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   ${({ $unstyled }) => !$unstyled && css32`
@@ -11227,9 +11233,9 @@ var Popover = ({
     "--wui-popover-max-width": maxWidth,
     "--wui-popover-max-height": maxHeight
   };
-  return /* @__PURE__ */ jsxs34(Root, { ...getControlProps(isOpen, onOpenChange), children: [
+  return /* @__PURE__ */ jsxs33(Root, { ...getControlProps(isOpen, onOpenChange), children: [
     /* @__PURE__ */ jsx247(Trigger2, { asChild: true, children: trigger }),
-    /* @__PURE__ */ jsx247(Portal, { children: /* @__PURE__ */ jsxs34(
+    /* @__PURE__ */ jsx247(Portal, { children: /* @__PURE__ */ jsxs33(
       StyledContent2,
       {
         $colorScheme: colorScheme,
@@ -11260,7 +11266,7 @@ Popover.displayName = "Popover";
 import styled52 from "styled-components";
 import { Root as ProgressRoot, Indicator as ProgressIndicator } from "@radix-ui/react-progress";
 import { isNotNil as isNotNil26 } from "@wistia/type-guards";
-import { jsx as jsx248, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx248, jsxs as jsxs34 } from "react/jsx-runtime";
 var ProgressBarWrapper = styled52.div`
   --progress-bar-height: 8px;
   --progress-bar-indicator-color: var(--wui-color-bg-fill);
@@ -11313,7 +11319,7 @@ var ProgressBar = ({
   labelRight,
   ...props
 }) => {
-  return /* @__PURE__ */ jsxs35(ProgressBarWrapper, { children: [
+  return /* @__PURE__ */ jsxs34(ProgressBarWrapper, { children: [
     isNotNil26(labelLeft) ? /* @__PURE__ */ jsx248(ProgressBarLabel, { children: labelLeft }) : null,
     /* @__PURE__ */ jsx248(
       StyledProgressBar,
@@ -11339,7 +11345,7 @@ ProgressBar.displayName = "ProgressBar";
 import { forwardRef as forwardRef20, useId as useId3 } from "react";
 import styled53, { css as css33 } from "styled-components";
 import { isNonEmptyString as isNonEmptyString3 } from "@wistia/type-guards";
-import { jsx as jsx249, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx249, jsxs as jsxs35 } from "react/jsx-runtime";
 var RadioIcon = () => /* @__PURE__ */ jsx249(
   "svg",
   {
@@ -11456,7 +11462,7 @@ var Radio = forwardRef20(
   }, ref) => {
     const generatedId = useId3();
     const computedId = isNonEmptyString3(id) ? id : `wistia-ui-radio-${generatedId}`;
-    return /* @__PURE__ */ jsxs36(
+    return /* @__PURE__ */ jsxs35(
       StyledRadioWrapper,
       {
         $disabled: disabled,
@@ -11583,7 +11589,7 @@ var SelectedItemIndicator = () => {
 };
 
 // src/components/SegmentedControl/SegmentedControl.tsx
-import { jsx as jsx252, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx252, jsxs as jsxs36 } from "react/jsx-runtime";
 var segmentedControlStyles = css34`
   display: inline-flex;
   background-color: var(--wui-color-bg-surface-secondary);
@@ -11622,7 +11628,7 @@ var SegmentedControl = forwardRef21(
         type: "single",
         value: selectedValue,
         ...props,
-        children: /* @__PURE__ */ jsx252(SegmentedControlValueProvider, { value: selectedValue, children: /* @__PURE__ */ jsxs37(SelectedItemStyleProvider, { children: [
+        children: /* @__PURE__ */ jsx252(SegmentedControlValueProvider, { value: selectedValue, children: /* @__PURE__ */ jsxs36(SelectedItemStyleProvider, { children: [
           /* @__PURE__ */ jsx252(SelectedItemIndicator, {}),
           children
         ] }) })
@@ -11637,7 +11643,7 @@ import { forwardRef as forwardRef22, useEffect as useEffect11, useRef as useRef1
 import styled56, { css as css35 } from "styled-components";
 import { Item as ToggleGroupItem } from "@radix-ui/react-toggle-group";
 import { isNotNil as isNotNil27 } from "@wistia/type-guards";
-import { jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsxs as jsxs37 } from "react/jsx-runtime";
 var segmentedControlItemStyles = css35`
   all: unset; /* ToggleGroupItem is a button element */
   align-items: center;
@@ -11739,7 +11745,7 @@ var SegmentedControlItem = forwardRef22(
         resizeObserver.disconnect();
       };
     }, [selectedValue, setSelectedItemMeasurements, value]);
-    return /* @__PURE__ */ jsxs38(
+    return /* @__PURE__ */ jsxs37(
       StyledSegmentedControlItem,
       {
         ref: combinedRef,
@@ -11771,7 +11777,7 @@ import {
 } from "@radix-ui/react-select";
 import { forwardRef as forwardRef23 } from "react";
 import styled57 from "styled-components";
-import { jsx as jsx253, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx253, jsxs as jsxs38 } from "react/jsx-runtime";
 var StyledTrigger = styled57(Trigger3)`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   ${inputCssVariables};
@@ -11844,13 +11850,13 @@ var Select = forwardRef23(
     ...props
   }, forwardedRef) => {
     const responsiveFullWidth = useResponsiveProp(fullWidth);
-    return /* @__PURE__ */ jsxs39(
+    return /* @__PURE__ */ jsxs38(
       Root2,
       {
         ...props,
         onValueChange: onChange,
         children: [
-          /* @__PURE__ */ jsxs39(
+          /* @__PURE__ */ jsxs38(
             StyledTrigger,
             {
               ref: forwardedRef,
@@ -11869,7 +11875,7 @@ var Select = forwardRef23(
               ]
             }
           ),
-          /* @__PURE__ */ jsx253(Portal2, { children: /* @__PURE__ */ jsxs39(StyledContent3, { position: "popper", children: [
+          /* @__PURE__ */ jsx253(Portal2, { children: /* @__PURE__ */ jsxs38(StyledContent3, { position: "popper", children: [
             /* @__PURE__ */ jsx253(ScrollUpButton, { children: /* @__PURE__ */ jsx253(Icon, { type: "caret-up" }) }),
             /* @__PURE__ */ jsx253(Viewport, { children }),
             /* @__PURE__ */ jsx253(ScrollDownButton, { children: /* @__PURE__ */ jsx253(Icon, { type: "caret-down" }) })
@@ -11886,7 +11892,7 @@ import { Item, ItemText, ItemIndicator } from "@radix-ui/react-select";
 import { forwardRef as forwardRef24 } from "react";
 import styled58 from "styled-components";
 import { isNotNil as isNotNil28 } from "@wistia/type-guards";
-import { jsx as jsx254, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx254, jsxs as jsxs39 } from "react/jsx-runtime";
 var StyledItem = styled58(Item)`
   ${variantStyleMap2.body3};
   display: flex;
@@ -11916,7 +11922,7 @@ var StyledIconContainer = styled58.span`
 `;
 var SelectOption = forwardRef24(
   ({ children, selectedDisplayValue, ...props }, forwardedRef) => {
-    return /* @__PURE__ */ jsxs40(
+    return /* @__PURE__ */ jsxs39(
       StyledItem,
       {
         ...props,
@@ -11929,7 +11935,7 @@ var SelectOption = forwardRef24(
               type: "checkmark"
             }
           ) }) }),
-          isNotNil28(selectedDisplayValue) ? /* @__PURE__ */ jsxs40("div", { children: [
+          isNotNil28(selectedDisplayValue) ? /* @__PURE__ */ jsxs39("div", { children: [
             children,
             /* @__PURE__ */ jsx254("div", { style: { display: "none" }, children: /* @__PURE__ */ jsx254(ItemText, { children: selectedDisplayValue }) })
           ] }) : /* @__PURE__ */ jsx254(ItemText, { children })
@@ -11943,12 +11949,12 @@ SelectOption.displayName = "SelectOption";
 // src/components/Select/SelectOptionGroup.tsx
 import { Group, Label as Label3 } from "@radix-ui/react-select";
 import styled59 from "styled-components";
-import { jsx as jsx255, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx255, jsxs as jsxs40 } from "react/jsx-runtime";
 var StyledLabel4 = styled59(Label3)`
   padding: var(--wui-select-option-padding);
 `;
 var SelectOptionGroup = ({ children, label, ...props }) => {
-  return /* @__PURE__ */ jsxs41(Group, { ...props, children: [
+  return /* @__PURE__ */ jsxs40(Group, { ...props, children: [
     /* @__PURE__ */ jsx255(StyledLabel4, { children: /* @__PURE__ */ jsx255(
       Text,
       {
@@ -11965,7 +11971,7 @@ var SelectOptionGroup = ({ children, label, ...props }) => {
 import { forwardRef as forwardRef25, useId as useId4 } from "react";
 import styled60, { css as css36 } from "styled-components";
 import { isNonEmptyString as isNonEmptyString4 } from "@wistia/type-guards";
-import { jsx as jsx256, jsxs as jsxs42 } from "react/jsx-runtime";
+import { jsx as jsx256, jsxs as jsxs41 } from "react/jsx-runtime";
 var sizeSmall3 = css36`
   --wui-size-small-width: 24px;
   --wui-size-small-height: 14px;
@@ -12084,7 +12090,7 @@ var Switch = forwardRef25(
   }, ref) => {
     const generatedId = useId4();
     const computedId = isNonEmptyString4(id) ? id : `wistia-ui-switch-${generatedId}`;
-    return /* @__PURE__ */ jsxs42(StyledSwitchWrapper, { $disabled: disabled, children: [
+    return /* @__PURE__ */ jsxs41(StyledSwitchWrapper, { $disabled: disabled, children: [
       /* @__PURE__ */ jsx256(
         StyledHiddenSwitchInput,
         {
@@ -12309,7 +12315,7 @@ var useTabsValue = () => {
 };
 
 // src/components/Tabs/TabItem.tsx
-import { jsxs as jsxs43 } from "react/jsx-runtime";
+import { jsxs as jsxs42 } from "react/jsx-runtime";
 var StyledTabItem = styled69(RadixTab)`
   ${segmentedControlItemStyles}
 
@@ -12348,7 +12354,7 @@ var TabItem = forwardRef26(
         resizeObserver.disconnect();
       };
     }, [selectedValue, setSelectedItemMeasurements, value]);
-    return /* @__PURE__ */ jsxs43(
+    return /* @__PURE__ */ jsxs42(
       StyledTabItem,
       {
         ref: combinedRef,
@@ -12406,7 +12412,7 @@ var SelectedItemIndicator2 = () => {
 };
 
 // src/components/Tabs/Tabs.tsx
-import { jsx as jsx266, jsxs as jsxs44 } from "react/jsx-runtime";
+import { jsx as jsx266, jsxs as jsxs43 } from "react/jsx-runtime";
 var TabsContainer = styled71.div`
   display: flex;
   flex-direction: column;
@@ -12449,8 +12455,8 @@ var Tabs = forwardRef27(
         activationMode: "automatic",
         ...props,
         ...modeProps,
-        children: /* @__PURE__ */ jsx266(TabsValueProvider, { value: currentValue, children: /* @__PURE__ */ jsxs44(SelectedItemStyleProvider, { children: [
-          /* @__PURE__ */ jsxs44(
+        children: /* @__PURE__ */ jsx266(TabsValueProvider, { value: currentValue, children: /* @__PURE__ */ jsxs43(SelectedItemStyleProvider, { children: [
+          /* @__PURE__ */ jsxs43(
             TabList,
             {
               ariaLabel,
@@ -12532,7 +12538,7 @@ Tab.displayName = "Tab";
 import { forwardRef as forwardRef29 } from "react";
 import styled72 from "styled-components";
 import { isNil as isNil16, isNotNil as isNotNil31, isNonEmptyString as isNonEmptyString5 } from "@wistia/type-guards";
-import { Fragment as Fragment8, jsx as jsx268, jsxs as jsxs45 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx268, jsxs as jsxs44 } from "react/jsx-runtime";
 var TagLabel = styled72.a`
   ${({ $colorScheme }) => getColorScheme($colorScheme)};
   font-size: var(--wui-typography-label-4-size);
@@ -12624,9 +12630,9 @@ var RemoveButton = ({ onClickRemove, onClickRemoveLabel, colorScheme }) => {
       "for accessibility, onClickRemoveLabel must be provided if onClickRemove is provided"
     );
   }
-  return /* @__PURE__ */ jsxs45(Fragment8, { children: [
+  return /* @__PURE__ */ jsxs44(Fragment8, { children: [
     /* @__PURE__ */ jsx268(TagDivider, { $colorScheme: colorScheme }),
-    /* @__PURE__ */ jsxs45(
+    /* @__PURE__ */ jsxs44(
       StyledRemoveButton,
       {
         $colorScheme: colorScheme,
@@ -12650,14 +12656,14 @@ var Tag = forwardRef29(
   ({ onClickRemove, colorScheme = "inherit", href, icon, label, onClickRemoveLabel, ...props }, ref) => {
     const hasIcon = isNotNil31(icon);
     const labelProps = isNotNil31(href) && isNonEmptyString5(href) ? { href, as: "a" } : { as: "span" };
-    return /* @__PURE__ */ jsxs45(
+    return /* @__PURE__ */ jsxs44(
       StyledTag,
       {
         ref,
         $colorScheme: colorScheme,
         ...props,
         children: [
-          /* @__PURE__ */ jsxs45(
+          /* @__PURE__ */ jsxs44(
             TagLabel,
             {
               ...labelProps,
@@ -12686,7 +12692,7 @@ Tag.displayName = "Tag";
 // src/components/Thumbnail/ThumbnailBadge.tsx
 import styled73 from "styled-components";
 import { isNotNil as isNotNil32 } from "@wistia/type-guards";
-import { jsx as jsx269, jsxs as jsxs46 } from "react/jsx-runtime";
+import { jsx as jsx269, jsxs as jsxs45 } from "react/jsx-runtime";
 var StyledThumbnailBadge = styled73.div`
   align-items: center;
   background-color: rgb(0 0 0 / 50%);
@@ -12712,7 +12718,7 @@ var StyledThumbnailBadge = styled73.div`
   }
 `;
 var ThumbnailBadge = ({ icon, label, ...props }) => {
-  return /* @__PURE__ */ jsxs46(StyledThumbnailBadge, { ...props, children: [
+  return /* @__PURE__ */ jsxs45(StyledThumbnailBadge, { ...props, children: [
     isNotNil32(icon) && icon,
     /* @__PURE__ */ jsx269("span", { children: label })
   ] });
@@ -12857,7 +12863,7 @@ var getBackgroundGradient = (gradientName = void 0) => {
 };
 
 // src/components/Thumbnail/Thumbnail.tsx
-import { jsx as jsx270, jsxs as jsxs47 } from "react/jsx-runtime";
+import { jsx as jsx270, jsxs as jsxs46 } from "react/jsx-runtime";
 var WideThumbnailImage = styled74.img`
   height: 100%;
   object-fit: cover;
@@ -12917,7 +12923,7 @@ var Thumbnail = forwardRef30(
     ...props
   }, ref) => {
     const backgroundUrl = thumbnailImageType === "square" && isNotNil34(thumbnailUrl) ? thumbnailUrl : void 0;
-    return /* @__PURE__ */ jsxs47(
+    return /* @__PURE__ */ jsxs46(
       StyledThumbnail,
       {
         ref,
@@ -13052,7 +13058,7 @@ var ThumbnailCollage = ({
 // src/components/WistiaLogo/WistiaLogo.tsx
 import styled76, { css as css40 } from "styled-components";
 import { isNotNil as isNotNil35 } from "@wistia/type-guards";
-import { jsx as jsx272, jsxs as jsxs48 } from "react/jsx-runtime";
+import { jsx as jsx272, jsxs as jsxs47 } from "react/jsx-runtime";
 var renderBrandmark = (brandmarkColor, iconOnly) => {
   if (iconOnly) {
     return /* @__PURE__ */ jsx272(
@@ -13150,7 +13156,7 @@ var WistiaLogo = ({
   };
   const brandmarkColor = VARIANT_COLORS[variant].brandmark;
   const logotypeColor = VARIANT_COLORS[variant].logotype;
-  const Logo = /* @__PURE__ */ jsxs48(
+  const Logo = /* @__PURE__ */ jsxs47(
     WistiaLogoComponent,
     {
       $hoverColor: hoverColor,