@wistia/ui 0.13.3 → 0.13.4-beta.055fd582.3ad4a4e

package/dist/index.mjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.13.3
+ * @license @wistia/ui v0.13.4-beta.055fd582.3ad4a4e
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -2617,7 +2617,7 @@ var Ellipsis = ({ children, lines, ...props }) => /* @__PURE__ */ jsx4(
     children
   }
 );
-Ellipsis.displayName = "Ellipsis";
+Ellipsis.displayName = "Ellipsis_UI";
 
 // src/private/helpers/getColorScheme/getColorScheme.ts
 import { css as css14 } from "styled-components";
@@ -7068,7 +7068,7 @@ var Icon = ({
     }
   );
 };
-Icon.displayName = "Icon";
+Icon.displayName = "Icon_UI";
 
 // src/components/Link/Link.tsx
 import { forwardRef } from "react";
@@ -7208,7 +7208,7 @@ var Link = forwardRef(
     return null;
   }
 );
-Link.displayName = "Link";
+Link.displayName = "Link_UI";
 
 // src/components/Button/Button.tsx
 import { Fragment, jsx as jsx197, jsxs as jsxs9 } from "react/jsx-runtime";
@@ -7350,7 +7350,7 @@ var Button = forwardRef2(
     );
   }
 );
-Button.displayName = "Button";
+Button.displayName = "Button_UI";
 
 // src/components/ActionButton/ActionButton.tsx
 import { jsx as jsx198, jsxs as jsxs10 } from "react/jsx-runtime";
@@ -7490,7 +7490,7 @@ var ActionButton = forwardRef3(
     );
   }
 );
-ActionButton.displayName = "ActionButton";
+ActionButton.displayName = "ActionButton_UI";
 
 // src/components/Avatar/Avatar.tsx
 import { useState as useState9, useMemo as useMemo4, useEffect as useEffect7 } from "react";
@@ -7562,7 +7562,7 @@ var Image = ({
     ...props
   }
 );
-Image.displayName = "Image";
+Image.displayName = "Image_UI";
 
 // src/components/ColorSchemeWrapper/ColorSchemeWrapper.tsx
 import styled8 from "styled-components";
@@ -7605,7 +7605,7 @@ var ColorSchemeWrapper = ({
     children
   }
 );
-ColorSchemeWrapper.displayName = "ColorSchemeWrapper";
+ColorSchemeWrapper.displayName = "ColorSchemeWrapper_UI";
 
 // src/components/Avatar/Avatar.tsx
 import { jsx as jsx201, jsxs as jsxs11 } from "react/jsx-runtime";
@@ -7742,7 +7742,7 @@ var Avatar = ({
     }
   );
 };
-Avatar.displayName = "Avatar";
+Avatar.displayName = "Avatar_UI";
 
 // src/components/Badge/Badge.tsx
 import { forwardRef as forwardRef4 } from "react";
@@ -7793,7 +7793,7 @@ var Badge = forwardRef4(
     );
   }
 );
-Badge.displayName = "Badge";
+Badge.displayName = "Badge_UI";
 
 // src/components/Banner/Banner.tsx
 import { useEffect as useEffect8, useState as useState10, useMemo as useMemo5 } from "react";
@@ -7985,7 +7985,7 @@ var BoxComponent = forwardRef5(
     );
   }
 );
-BoxComponent.displayName = "Box";
+BoxComponent.displayName = "Box_UI";
 var Box = makePolymorphic(BoxComponent);
 
 // src/components/Heading/Heading.tsx
@@ -8124,7 +8124,7 @@ var HeadingComponent = forwardRef6(
     }
   )
 );
-HeadingComponent.displayName = "Heading";
+HeadingComponent.displayName = "Heading_UI";
 var Heading = makePolymorphic(HeadingComponent);
 
 // src/components/Text/Text.tsx
@@ -8334,7 +8334,7 @@ var TextComponent = forwardRef7(
     );
   }
 );
-TextComponent.displayName = "Text";
+TextComponent.displayName = "Text_UI";
 var Text = makePolymorphic(TextComponent);
 
 // src/components/ButtonGroup/ButtonGroup.tsx
@@ -8414,7 +8414,7 @@ var ButtonGroup = ({
     }
   );
 };
-ButtonGroup.displayName = "ButtonGroup";
+ButtonGroup.displayName = "ButtonGroup_UI";
 
 // src/components/IconButton/IconButton.tsx
 import { Children, cloneElement as cloneElement2, forwardRef as forwardRef8 } from "react";
@@ -8452,7 +8452,7 @@ var IconButton = forwardRef8(
     );
   }
 );
-IconButton.displayName = "IconButton";
+IconButton.displayName = "IconButton_UI";
 
 // src/components/Banner/Banner.tsx
 import { jsx as jsx208, jsxs as jsxs13 } from "react/jsx-runtime";
@@ -8628,7 +8628,7 @@ var Banner = ({
     }
   );
 };
-Banner.displayName = "Banner";
+Banner.displayName = "Banner_UI";
 
 // src/components/Breadcrumbs/Breadcrumbs.tsx
 import { Children as Children2 } from "react";
@@ -8676,7 +8676,7 @@ var Breadcrumbs = ({ children, ...props }) => {
     )
   ] });
 };
-Breadcrumbs.displayName = "Breadcrumbs";
+Breadcrumbs.displayName = "Breadcrumbs_UI";
 
 // src/components/Breadcrumbs/Breadcrumb.tsx
 import styled18 from "styled-components";
@@ -8769,7 +8769,7 @@ var Card = ({
     children
   }
 );
-Card.displayName = "Card";
+Card.displayName = "Card_UI";
 
 // src/components/Center/Center.tsx
 import { forwardRef as forwardRef9 } from "react";
@@ -8800,7 +8800,7 @@ var Center = forwardRef9(
     }
   )
 );
-Center.displayName = "Center";
+Center.displayName = "Center_UI";
 
 // src/components/Checkbox/Checkbox.tsx
 import { forwardRef as forwardRef12, useId as useId2 } from "react";
@@ -8867,7 +8867,7 @@ var ScreenReaderOnly = ({
   }
   return /* @__PURE__ */ jsx214(VisuallyHidden, { ...props, children: accessibleText });
 };
-ScreenReaderOnly.displayName = "ScreenReaderOnly";
+ScreenReaderOnly.displayName = "ScreenReaderOnly_UI";
 
 // src/private/components/FormControlLabel/FormControlLabel.tsx
 import { jsx as jsx215, jsxs as jsxs16 } from "react/jsx-runtime";
@@ -8965,7 +8965,7 @@ var StackComponent = forwardRef10(
     );
   }
 );
-StackComponent.displayName = "Stack";
+StackComponent.displayName = "Stack_UI";
 var Stack = makePolymorphic(StackComponent);
 
 // src/components/FormGroup/FormGroup.tsx
@@ -9029,7 +9029,7 @@ var FormGroup = ({
     }
   );
 };
-FormGroup.displayName = "FormGroup";
+FormGroup.displayName = "FormGroup_UI";
 
 // src/components/Form/Form.tsx
 import { forwardRef as forwardRef11, useRef as useRef8, useMemo as useMemo6, createContext as createContext3, useState as useState11, useId } from "react";
@@ -9176,7 +9176,7 @@ var CheckboxGroup = ({
   }, [name, derivedValue, onChange]);
   return /* @__PURE__ */ jsx219(CheckboxGroupContext.Provider, { value: context, children: /* @__PURE__ */ jsx219(FormGroup, { ...props, children }) });
 };
-CheckboxGroup.displayName = "CheckboxGroup";
+CheckboxGroup.displayName = "CheckboxGroup_UI";
 
 // src/components/Checkbox/Checkbox.tsx
 import { jsx as jsx220, jsxs as jsxs18 } from "react/jsx-runtime";
@@ -9340,7 +9340,7 @@ var Checkbox = forwardRef12(
     ] });
   }
 );
-Checkbox.displayName = "Checkbox";
+Checkbox.displayName = "Checkbox_UI";
 
 // src/components/ClickRegion/ClickRegion.tsx
 import { Children as Children3, cloneElement as cloneElement3, useCallback as useCallback8, useEffect as useEffect9 } from "react";
@@ -9383,7 +9383,7 @@ var ClickRegion = ({ children, targetRef }) => {
     onClick: handleClick
   });
 };
-ClickRegion.displayName = "ClickRegion";
+ClickRegion.displayName = "ClickRegion_UI";
 
 // src/components/Collapsible/Collapsible.tsx
 import { Root as CollapsibleRoot } from "@radix-ui/react-collapsible";
@@ -9408,7 +9408,7 @@ var Collapsible = ({
   };
   return /* @__PURE__ */ jsx221(StyledRoot, { ...controlProps, children });
 };
-Collapsible.displayName = "Collapsible";
+Collapsible.displayName = "Collapsible_UI";
 
 // src/components/Collapsible/CollapsibleTrigger.tsx
 import { Children as Children4 } from "react";
@@ -9461,7 +9461,7 @@ var CollapsibleTriggerIcon = ({ type, ...props }) => {
     }
   );
 };
-CollapsibleTriggerIcon.displayName = "CollapsibleTriggerIcon";
+CollapsibleTriggerIcon.displayName = "CollapsibleTriggerIcon_UI";
 
 // src/components/Collapsible/CollapsibleContent.tsx
 import styled30 from "styled-components";
@@ -10050,7 +10050,7 @@ var ColorGrid = ({ children }) => {
     }
   );
 };
-ColorGrid.displayName = "ColorGrid";
+ColorGrid.displayName = "ColorGrid_UI";
 
 // src/components/ColorPicker/ColorGridOption.tsx
 import styled34 from "styled-components";
@@ -10266,7 +10266,7 @@ var Tooltip = ({
     }
   );
 };
-Tooltip.displayName = "Tooltip";
+Tooltip.displayName = "Tooltip_UI";
 
 // src/components/ColorPicker/ColorGridOption.tsx
 import { jsx as jsx229 } from "react/jsx-runtime";
@@ -10309,7 +10309,7 @@ var ColorGridOption = ({ value, name }) => {
     }
   );
 };
-ColorGridOption.displayName = "ColorGridOption";
+ColorGridOption.displayName = "ColorGridOption_UI";
 
 // src/components/ColorPicker/ColorList.tsx
 import { useCallback as useCallback11 } from "react";
@@ -10343,7 +10343,7 @@ var ColorList = ({ children }) => {
     }
   );
 };
-ColorList.displayName = "ColorList";
+ColorList.displayName = "ColorList_UI";
 
 // src/components/ColorPicker/ColorListGroup.tsx
 import styled36 from "styled-components";
@@ -10373,7 +10373,7 @@ var ColorListGroup = ({ label, children }) => {
     }
   );
 };
-ColorListGroup.displayName = "ColorListGroup";
+ColorListGroup.displayName = "ColorListGroup_UI";
 
 // src/components/ColorPicker/ColorListOption.tsx
 import styled37 from "styled-components";
@@ -10468,7 +10468,7 @@ var ColorListOption = ({ value, name }) => {
     }
   );
 };
-ColorListOption.displayName = "ColorListOption";
+ColorListOption.displayName = "ColorListOption_UI";
 
 // src/components/ColorPicker/ColorPicker.tsx
 import { Root as PopoverRoot } from "@radix-ui/react-popover";
@@ -10493,7 +10493,7 @@ var ColorPicker = ({
     }
   ) });
 };
-ColorPicker.displayName = "ColorPicker";
+ColorPicker.displayName = "ColorPicker_UI";
 
 // src/components/ColorPicker/ColorPickerPopoverContent.tsx
 import { Content as PopoverContent, Portal as PopoverPortal } from "@radix-ui/react-popover";
@@ -10522,7 +10522,7 @@ var ColorPickerPopoverContent = ({
     }
   ) });
 };
-ColorPickerPopoverContent.displayName = "ColorPickerPopoverContent";
+ColorPickerPopoverContent.displayName = "ColorPickerPopoverContent_UI";
 
 // src/components/ColorPicker/ColorPickerSection.tsx
 import styled39 from "styled-components";
@@ -10533,7 +10533,7 @@ var Container5 = styled39.div`
 var ColorPickerSection = ({ children }) => {
   return /* @__PURE__ */ jsx236(Container5, { children: /* @__PURE__ */ jsx236(Stack, { children }) });
 };
-ColorPickerSection.displayName = "ColorPickerSection";
+ColorPickerSection.displayName = "ColorPickerSection_UI";
 
 // src/components/ColorPicker/ColorPickerTrigger.tsx
 import { forwardRef as forwardRef13 } from "react";
@@ -10546,7 +10546,7 @@ var ValueSwatch = () => {
   const { valueAsHex } = useColorPickerState();
   return /* @__PURE__ */ jsx237(ColorSwatch, { value: valueAsHex });
 };
-ValueSwatch.displayName = "ValueSwatch";
+ValueSwatch.displayName = "ValueSwatch_UI";
 
 // src/components/ColorPicker/ValueNameOrHexCode.tsx
 import { jsx as jsx238 } from "react/jsx-runtime";
@@ -10554,7 +10554,7 @@ var ValueNameOrHexCode = () => {
   const { valueAsHex } = useColorPickerState();
   return /* @__PURE__ */ jsx238(ColorNameOrHexCode, { hexCode: valueAsHex });
 };
-ValueNameOrHexCode.displayName = "ValueNameOrHexCode";
+ValueNameOrHexCode.displayName = "ValueNameOrHexCode_UI";
 
 // src/components/ColorPicker/ColorPickerTrigger.tsx
 import { jsx as jsx239, jsxs as jsxs25 } from "react/jsx-runtime";
@@ -10594,7 +10594,7 @@ var ColorPickerTrigger = forwardRef13(
     );
   }
 );
-ColorPickerTrigger.displayName = "ColorPickerTrigger";
+ColorPickerTrigger.displayName = "ColorPickerTrigger_UI";
 
 // src/components/ColorPicker/ContrastIndicator.tsx
 import styled41 from "styled-components";
@@ -10815,7 +10815,7 @@ var Switch = forwardRef14(
     ] });
   }
 );
-Switch.displayName = "Switch";
+Switch.displayName = "Switch_UI";
 
 // src/components/ColorPicker/ContrastEnforcerSwitch.tsx
 import { jsx as jsx242 } from "react/jsx-runtime";
@@ -10878,7 +10878,7 @@ var ContrastControls = () => {
     /* @__PURE__ */ jsx244(ContrastEnforcerSwitch, {})
   ] });
 };
-ContrastControls.displayName = "ContrastControls";
+ContrastControls.displayName = "ContrastControls_UI";
 
 // src/components/ColorPicker/HexColorInput.tsx
 import { useCallback as useCallback13, useEffect as useEffect11, useRef as useRef10, useState as useState12 } from "react";
@@ -11088,7 +11088,7 @@ var Input = forwardRef15(
     );
   }
 );
-Input.displayName = "Input";
+Input.displayName = "Input_UI";
 
 // src/components/ColorPicker/HexColorInput.tsx
 import { jsx as jsx246 } from "react/jsx-runtime";
@@ -11251,7 +11251,7 @@ var HexColorInput = ({ autoFocus = true }) => {
     }
   );
 };
-HexColorInput.displayName = "HexColorInput";
+HexColorInput.displayName = "HexColorInput_UI";
 
 // src/components/ColorPicker/HueSlider.tsx
 import { useCallback as useCallback14, useMemo as useMemo9 } from "react";
@@ -11392,7 +11392,7 @@ var HueSlider = () => {
     /* @__PURE__ */ jsx248(HSVHueCanvas, { hsv: valueAsHsv })
   ] });
 };
-HueSlider.displayName = "HueSlider";
+HueSlider.displayName = "HueSlider_UI";
 
 // src/components/ColorPicker/SaturationAndValuePicker.tsx
 import { useCallback as useCallback15, useEffect as useEffect14, useLayoutEffect as useLayoutEffect4, useMemo as useMemo10, useRef as useRef13, useState as useState13 } from "react";
@@ -11764,7 +11764,7 @@ var SaturationAndValuePicker = ({
     )
   );
 };
-SaturationAndValuePicker.displayName = "SaturationAndValuePicker";
+SaturationAndValuePicker.displayName = "SaturationAndValuePicker_UI";
 
 // src/components/Combobox/Combobox.tsx
 import * as Ariakit from "@ariakit/react";
@@ -11933,7 +11933,7 @@ var Tag = forwardRef16(
     );
   }
 );
-Tag.displayName = "Tag";
+Tag.displayName = "Tag_UI";
 
 // src/components/Combobox/Combobox.tsx
 import { jsx as jsx252, jsxs as jsxs33 } from "react/jsx-runtime";
@@ -12184,7 +12184,7 @@ var Combobox2 = ({
 // src/components/DataCards/DataCard.tsx
 import { useRef as useRef15 } from "react";
 import styled50, { keyframes as keyframes2 } from "styled-components";
-import { isNotNil as isNotNil20, isNotNull } from "@wistia/type-guards";
+import { isNotNil as isNotNil20 } from "@wistia/type-guards";
 import { jsx as jsx253, jsxs as jsxs34 } from "react/jsx-runtime";
 var StyledDataCard = styled50.div`
   display: grid;
@@ -12199,6 +12199,11 @@ var StyledDataCard = styled50.div`
   position: relative;
   transition: background var(--wui-motion-duration-01) var(--wui-motion-ease);
 
+  &:has([data-wui-data-card-subtitle]) {
+    grid-template-areas: 'label slot' 'value value' 'subtitle subtitle';
+    grid-template-rows: auto auto auto;
+  }
+
   &[data-click-region] {
     [data-wui-data-card-hover-icon] {
       opacity: 0;
@@ -12285,6 +12290,9 @@ var StyledDataCardTrendContainer = styled50.div`
   bottom: var(--wui-space-01);
   right: var(--wui-space-01);
 `;
+var StyledSubtitle = styled50(Text)`
+  grid-area: subtitle;
+`;
 var DataCardInner = ({
   label,
   value,
@@ -12292,6 +12300,7 @@ var DataCardInner = ({
   colorScheme = "inherit",
   isLoading = false,
   trend,
+  subtitle,
   ...props
 }) => /* @__PURE__ */ jsxs34(
   StyledDataCard,
@@ -12315,8 +12324,16 @@ var DataCardInner = ({
           children: isLoading ? /* @__PURE__ */ jsx253(StyledLoadingValue, {}) : value
         }
       ),
-      isNotNull(upperRightSlot) && !isLoading && /* @__PURE__ */ jsx253(StyledSlot, { children: upperRightSlot }),
-      isNotNull(trend) && !isLoading && /* @__PURE__ */ jsx253(StyledDataCardTrendContainer, { children: trend })
+      isNotNil20(upperRightSlot) && !isLoading && /* @__PURE__ */ jsx253(StyledSlot, { children: upperRightSlot }),
+      isNotNil20(subtitle) && !isLoading && /* @__PURE__ */ jsx253(
+        StyledSubtitle,
+        {
+          "data-wui-data-card-subtitle": true,
+          variant: "label4",
+          children: subtitle
+        }
+      ),
+      isNotNil20(trend) && !isLoading && /* @__PURE__ */ jsx253(StyledDataCardTrendContainer, { children: trend })
     ]
   }
 );
@@ -12340,6 +12357,7 @@ var DataCard = (props) => {
           {
             ref,
             ...isNotNil20(props.beforeAction) ? { beforeAction: props.beforeAction } : {},
+            ...isNotNil20(props.reloadDocument) ? { reloadDocument: props.reloadDocument } : {},
             disabled: props.disabled ?? false,
             href: props.href,
             onClick: props.onClick,
@@ -12352,7 +12370,7 @@ var DataCard = (props) => {
   }
   return /* @__PURE__ */ jsx253(DataCardInner, { ...props });
 };
-DataCard.displayName = "DataCard";
+DataCard.displayName = "DataCard_UI";
 
 // src/components/DataCards/DataCards.tsx
 import styled51 from "styled-components";
@@ -12377,6 +12395,7 @@ var DataCards = ({
       ...props,
       $cardMaxWidth: cardMaxWidth,
       $colorScheme: colorScheme,
+      alignItems: "stretch",
       direction: "row",
       fill: "horizontal",
       gap: "space-02",
@@ -12386,7 +12405,7 @@ var DataCards = ({
     }
   );
 };
-DataCards.displayName = "DataCards";
+DataCards.displayName = "DataCards_UI";
 
 // src/components/DataCards/DataCardTrend.tsx
 import styled52 from "styled-components";
@@ -12464,7 +12483,7 @@ var Divider = ({ orientation = "horizontal", ...props }) => {
     }
   );
 };
-Divider.displayName = "Divider";
+Divider.displayName = "Divider_UI";
 
 // src/components/EditableHeading/EditableHeading.tsx
 import styled54, { css as css30 } from "styled-components";
@@ -12738,7 +12757,7 @@ var Label = ({
     }
   );
 };
-Label.displayName = "Label";
+Label.displayName = "Label_UI";
 
 // src/components/FormField/FormField.tsx
 import { Fragment as Fragment7, jsx as jsx260, jsxs as jsxs38 } from "react/jsx-runtime";
@@ -12896,7 +12915,7 @@ var FormField = ({
     }
   );
 };
-FormField.displayName = "FormField";
+FormField.displayName = "FormField_UI";
 
 // src/components/FormGroup/RadioGroup.tsx
 import { createContext as createContext6, useMemo as useMemo12, useContext as useContext7 } from "react";
@@ -12923,7 +12942,7 @@ var RadioGroup = ({
   }, [name, derivedValue, onChange]);
   return /* @__PURE__ */ jsx261(RadioGroupContext.Provider, { value: context, children: /* @__PURE__ */ jsx261(FormGroup, { ...props, children }) });
 };
-RadioGroup.displayName = "RadioGroup";
+RadioGroup.displayName = "RadioGroup_UI";
 
 // src/components/Grid/Grid.tsx
 import { forwardRef as forwardRef17 } from "react";
@@ -12993,7 +13012,7 @@ var GridComponent = forwardRef17(
     );
   }
 );
-GridComponent.displayName = "Grid";
+GridComponent.displayName = "Grid_UI";
 var Grid = makePolymorphic(GridComponent);
 
 // src/components/InputClickToCopy/InputClickToCopy.tsx
@@ -13058,7 +13077,7 @@ var InputClickToCopy = forwardRef18(
     );
   }
 );
-InputClickToCopy.displayName = "InputClickToCopy";
+InputClickToCopy.displayName = "InputClickToCopy_UI";
 
 // src/components/KeyboardShortcut/KeyboardShortcut.tsx
 import styled59 from "styled-components";
@@ -13167,7 +13186,7 @@ var KeyboardShortcut = ({
     ]
   }
 );
-KeyboardShortcut.displayName = "KeyboardShortcut";
+KeyboardShortcut.displayName = "KeyboardShortcut_UI";
 
 // src/components/List/List.tsx
 import { isNotNil as isNotNil23 } from "@wistia/type-guards";
@@ -13186,7 +13205,7 @@ var ListItem = ({ children }) => {
   }
   return /* @__PURE__ */ jsx265(ListItemComponent, { children });
 };
-ListItem.displayName = "ListItem";
+ListItem.displayName = "ListItem_UI";
 
 // src/components/List/List.tsx
 import { jsx as jsx266, jsxs as jsxs40 } from "react/jsx-runtime";
@@ -13325,7 +13344,7 @@ var List = ({
   }
   return null;
 };
-List.displayName = "List";
+List.displayName = "List_UI";
 
 // src/components/Menu/Menu.tsx
 import { forwardRef as forwardRef19, useMemo as useMemo13 } from "react";
@@ -13495,8 +13514,8 @@ var Menu = forwardRef19(
     ) });
   }
 );
-Menu.displayName = "Menu";
-Menu.displayName = "Menu";
+Menu.displayName = "Menu_UI";
+Menu.displayName = "Menu_UI";
 
 // src/components/Menu/MenuLabel.tsx
 import styled63 from "styled-components";
@@ -13523,7 +13542,7 @@ var MenuLabel = ({ children, ...props }) => {
     }
   );
 };
-MenuLabel.displayName = "MenuLabel";
+MenuLabel.displayName = "MenuLabel_UI";
 
 // src/components/Menu/SubMenu.tsx
 import { useState as useState18 } from "react";
@@ -13655,7 +13674,7 @@ var MenuItemButton = forwardRef20(({ children, appearance, command, icon, ...pro
     }
   );
 });
-MenuItemButton.displayName = "MenuItemButton";
+MenuItemButton.displayName = "MenuItemButton_UI";
 
 // src/components/Menu/MenuItemLabelDescription.tsx
 import styled65 from "styled-components";
@@ -13742,7 +13761,7 @@ var SubMenu = ({
     /* @__PURE__ */ jsx271(StyledMobileSubMenuItems, { children: isExpanded ? children : null })
   ] });
 };
-SubMenu.displayName = "SubMenu";
+SubMenu.displayName = "SubMenu_UI";
 
 // src/components/Menu/MenuItem.tsx
 import { forwardRef as forwardRef21 } from "react";
@@ -13767,7 +13786,7 @@ var MenuItem = forwardRef21(
     );
   }
 );
-MenuItem.displayName = "MenuItem";
+MenuItem.displayName = "MenuItem_UI";
 
 // src/components/Menu/MenuRadioGroup.tsx
 import {
@@ -13777,7 +13796,7 @@ import { jsx as jsx273 } from "react/jsx-runtime";
 var MenuRadioGroup = ({ children, ...props }) => {
   return /* @__PURE__ */ jsx273(DropdownMenuRadioGroup, { ...props, children });
 };
-MenuRadioGroup.displayName = "MenuRadioGroup";
+MenuRadioGroup.displayName = "MenuRadioGroup_UI";
 
 // src/components/Menu/RadioMenuItem.tsx
 import {
@@ -13814,7 +13833,7 @@ var RadioMenuItem = ({
     }
   );
 };
-RadioMenuItem.displayName = "RadioMenuItem";
+RadioMenuItem.displayName = "RadioMenuItem_UI";
 
 // src/components/Menu/CheckboxMenuItem.tsx
 import {
@@ -13902,7 +13921,7 @@ var CheckboxMenuItem = ({
     }
   );
 };
-CheckboxMenuItem.displayName = "CheckboxMenuItem";
+CheckboxMenuItem.displayName = "CheckboxMenuItem_UI";
 
 // src/components/Menu/FilterMenu.tsx
 import { Children as Children7, forwardRef as forwardRef22 } from "react";
@@ -14004,7 +14023,7 @@ var FilterMenu = forwardRef22(
     );
   }
 );
-FilterMenu.displayName = "FilterMenu";
+FilterMenu.displayName = "FilterMenu_UI";
 
 // src/components/Modal/Modal.tsx
 import { forwardRef as forwardRef24 } from "react";
@@ -14333,7 +14352,7 @@ var Modal = forwardRef24(
     );
   }
 );
-Modal.displayName = "Modal";
+Modal.displayName = "Modal_UI";
 
 // src/components/Popover/Popover.tsx
 import { Root as Root2, Trigger as Trigger2, Portal, Content as Content2, Close } from "@radix-ui/react-popover";
@@ -14423,7 +14442,7 @@ var PopoverArrow = ({ isAnimated }) => {
     }
   ) });
 };
-PopoverArrow.displayName = "PopoverArrow";
+PopoverArrow.displayName = "PopoverArrow_UI";
 
 // src/components/Popover/Popover.tsx
 import { jsx as jsx282, jsxs as jsxs49 } from "react/jsx-runtime";
@@ -14492,7 +14511,7 @@ var Popover2 = ({
     ) })
   ] });
 };
-Popover2.displayName = "Popover";
+Popover2.displayName = "Popover_UI";
 
 // src/components/ProgressBar/ProgressBar.tsx
 import styled74 from "styled-components";
@@ -14571,7 +14590,7 @@ var ProgressBar = ({
     isNotNil31(labelRight) ? /* @__PURE__ */ jsx283(ProgressBarLabel, { children: labelRight }) : null
   ] });
 };
-ProgressBar.displayName = "ProgressBar";
+ProgressBar.displayName = "ProgressBar_UI";
 
 // src/components/Radio/Radio.tsx
 import { forwardRef as forwardRef25, useId as useId4 } from "react";
@@ -14746,7 +14765,7 @@ var Radio = forwardRef25(
     );
   }
 );
-Radio.displayName = "Radio";
+Radio.displayName = "Radio_UI";
 
 // src/components/RadioCard/RadioCard.tsx
 import { forwardRef as forwardRef27 } from "react";
@@ -14910,7 +14929,7 @@ var RadioCardRoot = forwardRef26(
     );
   }
 );
-RadioCardRoot.displayName = "RadioCardRoot";
+RadioCardRoot.displayName = "RadioCardRoot_UI";
 
 // src/components/RadioCard/RadioCardDefaultLayout.tsx
 import styled78 from "styled-components";
@@ -14964,7 +14983,7 @@ var RadioCardIndicator = styled77.div`
     --wui-radio-card-indicator-background-color: var(--wui-color-bg-surface-disabled);
   }
 `;
-RadioCardIndicator.displayName = "RadioCardIndicator";
+RadioCardIndicator.displayName = "RadioCardIndicator_UI";
 
 // src/components/RadioCard/RadioCardDefaultLayout.tsx
 import { jsx as jsx286, jsxs as jsxs53 } from "react/jsx-runtime";
@@ -15012,7 +15031,7 @@ var RadioCardDefaultLayout = ({
     ] })
   ] });
 };
-RadioCardDefaultLayout.displayName = "RadioCardDefaultLayout";
+RadioCardDefaultLayout.displayName = "RadioCardDefaultLayout_UI";
 
 // src/components/RadioCard/RadioCard.tsx
 import { jsx as jsx287 } from "react/jsx-runtime";
@@ -15036,7 +15055,7 @@ var RadioCard = forwardRef27(
     );
   }
 );
-RadioCard.displayName = "RadioCard";
+RadioCard.displayName = "RadioCard_UI";
 
 // src/components/RadioCard/RadioCardImage.tsx
 import { forwardRef as forwardRef28 } from "react";
@@ -15064,7 +15083,7 @@ var RadioCardImage = forwardRef28(
     );
   }
 );
-RadioCardImage.displayName = "RadioCardImage";
+RadioCardImage.displayName = "RadioCardImage_UI";
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 import { forwardRef as forwardRef29 } from "react";
@@ -15201,7 +15220,7 @@ var SegmentedControl = forwardRef29(
     );
   }
 );
-SegmentedControl.displayName = "SegmentedControl";
+SegmentedControl.displayName = "SegmentedControl_UI";
 
 // src/components/SegmentedControl/SegmentedControlItem.tsx
 import { forwardRef as forwardRef30, useEffect as useEffect18, useRef as useRef19 } from "react";
@@ -15335,7 +15354,7 @@ var SegmentedControlItem = forwardRef30(
     );
   }
 );
-SegmentedControlItem.displayName = "SegmentedControlItem";
+SegmentedControlItem.displayName = "SegmentedControlItem_UI";
 
 // src/components/Select/Select.tsx
 import {
@@ -15458,7 +15477,7 @@ var Select = forwardRef31(
     );
   }
 );
-Select.displayName = "Select";
+Select.displayName = "Select_UI";
 
 // src/components/Select/SelectOption.tsx
 import { Item, ItemText, ItemIndicator } from "@radix-ui/react-select";
@@ -15517,7 +15536,7 @@ var SelectOption = forwardRef32(
     );
   }
 );
-SelectOption.displayName = "SelectOption";
+SelectOption.displayName = "SelectOption_UI";
 
 // src/components/Select/SelectOptionGroup.tsx
 import { Group, Label as Label3 } from "@radix-ui/react-select";
@@ -15670,7 +15689,7 @@ var Slider = ({
     }
   );
 };
-Slider.displayName = "Slider";
+Slider.displayName = "Slider_UI";
 
 // src/components/Table/Table.tsx
 import styled86, { css as css43 } from "styled-components";
@@ -15831,7 +15850,7 @@ var Tabs = ({
   }
   return /* @__PURE__ */ jsx302(RadixTabsRoot, { ...rootProps, children: /* @__PURE__ */ jsx302(TabsValueProvider, { value: value ?? defaultValue, children: /* @__PURE__ */ jsx302(SelectedItemStyleProvider, { children }) }) });
 };
-Tabs.displayName = "Tabs";
+Tabs.displayName = "Tabs_UI";
 
 // src/components/Tabs/TabsContent.tsx
 import { Content as RadixTabsContent } from "@radix-ui/react-tabs";
@@ -15839,7 +15858,7 @@ import { jsx as jsx303 } from "react/jsx-runtime";
 var TabsContent = ({ children, value }) => {
   return /* @__PURE__ */ jsx303(RadixTabsContent, { value, children });
 };
-TabsContent.displayName = "TabsContent";
+TabsContent.displayName = "TabsContent_UI";
 
 // src/components/Tabs/TabsList.tsx
 import { List as RadixTabList } from "@radix-ui/react-tabs";
@@ -15891,7 +15910,7 @@ var TabsList = ({ children, fullWidth = true, ...props }) => {
     }
   );
 };
-TabsList.displayName = "TabsList";
+TabsList.displayName = "TabsList_UI";
 
 // src/components/Tabs/TabsTrigger.tsx
 import { forwardRef as forwardRef33, useEffect as useEffect19, useRef as useRef20 } from "react";
@@ -15958,7 +15977,7 @@ var TabsTrigger = forwardRef33(
     );
   }
 );
-TabsTrigger.displayName = "TabsTrigger";
+TabsTrigger.displayName = "TabsTrigger_UI";
 
 // src/components/Thumbnail/ThumbnailBadge.tsx
 import styled95 from "styled-components";
@@ -15994,7 +16013,7 @@ var ThumbnailBadge = ({ icon, label, ...props }) => {
     /* @__PURE__ */ jsx306("span", { children: label })
   ] });
 };
-ThumbnailBadge.displayName = "ThumbnailBadge";
+ThumbnailBadge.displayName = "ThumbnailBadge_UI";
 
 // src/components/Thumbnail/Thumbnail.tsx
 import { forwardRef as forwardRef34, useState as useState21, useRef as useRef21, useCallback as useCallback18, useMemo as useMemo15 } from "react";
@@ -16437,7 +16456,7 @@ var Thumbnail = forwardRef34(
     );
   }
 );
-Thumbnail.displayName = "Thumbnail";
+Thumbnail.displayName = "Thumbnail_UI";
 
 // src/components/ThumbnailCollage/ThumbnailCollage.tsx
 import React2 from "react";
@@ -16669,7 +16688,7 @@ var WistiaLogo = ({
   );
   return href !== void 0 ? /* @__PURE__ */ jsx310("a", { href, children: Logo }) : Logo;
 };
-WistiaLogo.displayName = "WistiaLogo";
+WistiaLogo.displayName = "WistiaLogo_UI";
 
 // src/components/InputPassword/InputPassword.tsx
 import styled100 from "styled-components";
@@ -16716,7 +16735,7 @@ var InputPassword = forwardRef35(
     );
   }
 );
-InputPassword.displayName = "InputPassword";
+InputPassword.displayName = "InputPassword_UI";
 
 // src/components/ContextMenu/ContextMenu.tsx
 import { useEffect as useEffect20, useState as useState23 } from "react";