@wistia/ui 0.13.3-beta.5d0cf359.76cb65f → 0.13.4-beta.055fd582.3ad4a4e

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.13.3-beta.5d0cf359.76cb65f
+ * @license @wistia/ui v0.13.4-beta.055fd582.3ad4a4e
  *
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
  *
@@ -2776,7 +2776,7 @@ var Ellipsis = ({ children, lines, ...props }) => /* @__PURE__ */ (0, import_jsx
     children
   }
 );
-Ellipsis.displayName = "Ellipsis";
+Ellipsis.displayName = "Ellipsis_UI";
 
 // src/private/helpers/getColorScheme/getColorScheme.ts
 var import_styled_components15 = require("styled-components");
@@ -7227,7 +7227,7 @@ var Icon = ({
     }
   );
 };
-Icon.displayName = "Icon";
+Icon.displayName = "Icon_UI";
 
 // src/components/Link/Link.tsx
 var import_react22 = require("react");
@@ -7367,7 +7367,7 @@ var Link = (0, import_react22.forwardRef)(
     return null;
   }
 );
-Link.displayName = "Link";
+Link.displayName = "Link_UI";
 
 // src/components/Button/Button.tsx
 var import_jsx_runtime197 = require("react/jsx-runtime");
@@ -7509,7 +7509,7 @@ var Button = (0, import_react23.forwardRef)(
     );
   }
 );
-Button.displayName = "Button";
+Button.displayName = "Button_UI";
 
 // src/components/ActionButton/ActionButton.tsx
 var import_jsx_runtime198 = require("react/jsx-runtime");
@@ -7649,7 +7649,7 @@ var ActionButton = (0, import_react24.forwardRef)(
     );
   }
 );
-ActionButton.displayName = "ActionButton";
+ActionButton.displayName = "ActionButton_UI";
 
 // src/components/Avatar/Avatar.tsx
 var import_react25 = require("react");
@@ -7721,7 +7721,7 @@ var Image = ({
     ...props
   }
 );
-Image.displayName = "Image";
+Image.displayName = "Image_UI";
 
 // src/components/ColorSchemeWrapper/ColorSchemeWrapper.tsx
 var import_styled_components24 = __toESM(require("styled-components"));
@@ -7764,7 +7764,7 @@ var ColorSchemeWrapper = ({
     children
   }
 );
-ColorSchemeWrapper.displayName = "ColorSchemeWrapper";
+ColorSchemeWrapper.displayName = "ColorSchemeWrapper_UI";
 
 // src/components/Avatar/Avatar.tsx
 var import_jsx_runtime201 = require("react/jsx-runtime");
@@ -7901,7 +7901,7 @@ var Avatar = ({
     }
   );
 };
-Avatar.displayName = "Avatar";
+Avatar.displayName = "Avatar_UI";
 
 // src/components/Badge/Badge.tsx
 var import_react26 = require("react");
@@ -7952,7 +7952,7 @@ var Badge = (0, import_react26.forwardRef)(
     );
   }
 );
-Badge.displayName = "Badge";
+Badge.displayName = "Badge_UI";
 
 // src/components/Banner/Banner.tsx
 var import_react31 = require("react");
@@ -8144,7 +8144,7 @@ var BoxComponent = (0, import_react27.forwardRef)(
     );
   }
 );
-BoxComponent.displayName = "Box";
+BoxComponent.displayName = "Box_UI";
 var Box = makePolymorphic(BoxComponent);
 
 // src/components/Heading/Heading.tsx
@@ -8283,7 +8283,7 @@ var HeadingComponent = (0, import_react28.forwardRef)(
     }
   )
 );
-HeadingComponent.displayName = "Heading";
+HeadingComponent.displayName = "Heading_UI";
 var Heading = makePolymorphic(HeadingComponent);
 
 // src/components/Text/Text.tsx
@@ -8493,7 +8493,7 @@ var TextComponent = (0, import_react29.forwardRef)(
     );
   }
 );
-TextComponent.displayName = "Text";
+TextComponent.displayName = "Text_UI";
 var Text = makePolymorphic(TextComponent);
 
 // src/components/ButtonGroup/ButtonGroup.tsx
@@ -8573,7 +8573,7 @@ var ButtonGroup = ({
     }
   );
 };
-ButtonGroup.displayName = "ButtonGroup";
+ButtonGroup.displayName = "ButtonGroup_UI";
 
 // src/components/IconButton/IconButton.tsx
 var import_react30 = require("react");
@@ -8611,7 +8611,7 @@ var IconButton = (0, import_react30.forwardRef)(
     );
   }
 );
-IconButton.displayName = "IconButton";
+IconButton.displayName = "IconButton_UI";
 
 // src/components/Banner/Banner.tsx
 var import_jsx_runtime208 = require("react/jsx-runtime");
@@ -8787,7 +8787,7 @@ var Banner = ({
     }
   );
 };
-Banner.displayName = "Banner";
+Banner.displayName = "Banner_UI";
 
 // src/components/Breadcrumbs/Breadcrumbs.tsx
 var import_react32 = require("react");
@@ -8835,7 +8835,7 @@ var Breadcrumbs = ({ children, ...props }) => {
     )
   ] });
 };
-Breadcrumbs.displayName = "Breadcrumbs";
+Breadcrumbs.displayName = "Breadcrumbs_UI";
 
 // src/components/Breadcrumbs/Breadcrumb.tsx
 var import_styled_components34 = __toESM(require("styled-components"));
@@ -8928,7 +8928,7 @@ var Card = ({
     children
   }
 );
-Card.displayName = "Card";
+Card.displayName = "Card_UI";
 
 // src/components/Center/Center.tsx
 var import_react33 = require("react");
@@ -8959,7 +8959,7 @@ var Center = (0, import_react33.forwardRef)(
     }
   )
 );
-Center.displayName = "Center";
+Center.displayName = "Center_UI";
 
 // src/components/Checkbox/Checkbox.tsx
 var import_react38 = require("react");
@@ -9026,7 +9026,7 @@ var ScreenReaderOnly = ({
   }
   return /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(VisuallyHidden, { ...props, children: accessibleText });
 };
-ScreenReaderOnly.displayName = "ScreenReaderOnly";
+ScreenReaderOnly.displayName = "ScreenReaderOnly_UI";
 
 // src/private/components/FormControlLabel/FormControlLabel.tsx
 var import_jsx_runtime215 = require("react/jsx-runtime");
@@ -9124,7 +9124,7 @@ var StackComponent = (0, import_react34.forwardRef)(
     );
   }
 );
-StackComponent.displayName = "Stack";
+StackComponent.displayName = "Stack_UI";
 var Stack = makePolymorphic(StackComponent);
 
 // src/components/FormGroup/FormGroup.tsx
@@ -9188,7 +9188,7 @@ var FormGroup = ({
     }
   );
 };
-FormGroup.displayName = "FormGroup";
+FormGroup.displayName = "FormGroup_UI";
 
 // src/components/Form/Form.tsx
 var import_react36 = require("react");
@@ -9335,7 +9335,7 @@ var CheckboxGroup = ({
   }, [name, derivedValue, onChange]);
   return /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(CheckboxGroupContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(FormGroup, { ...props, children }) });
 };
-CheckboxGroup.displayName = "CheckboxGroup";
+CheckboxGroup.displayName = "CheckboxGroup_UI";
 
 // src/components/Checkbox/Checkbox.tsx
 var import_jsx_runtime220 = require("react/jsx-runtime");
@@ -9499,7 +9499,7 @@ var Checkbox = (0, import_react38.forwardRef)(
     ] });
   }
 );
-Checkbox.displayName = "Checkbox";
+Checkbox.displayName = "Checkbox_UI";
 
 // src/components/ClickRegion/ClickRegion.tsx
 var import_react39 = require("react");
@@ -9542,7 +9542,7 @@ var ClickRegion = ({ children, targetRef }) => {
     onClick: handleClick
   });
 };
-ClickRegion.displayName = "ClickRegion";
+ClickRegion.displayName = "ClickRegion_UI";
 
 // src/components/Collapsible/Collapsible.tsx
 var import_react_collapsible = require("@radix-ui/react-collapsible");
@@ -9567,7 +9567,7 @@ var Collapsible = ({
   };
   return /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(StyledRoot, { ...controlProps, children });
 };
-Collapsible.displayName = "Collapsible";
+Collapsible.displayName = "Collapsible_UI";
 
 // src/components/Collapsible/CollapsibleTrigger.tsx
 var import_react40 = require("react");
@@ -9620,7 +9620,7 @@ var CollapsibleTriggerIcon = ({ type, ...props }) => {
     }
   );
 };
-CollapsibleTriggerIcon.displayName = "CollapsibleTriggerIcon";
+CollapsibleTriggerIcon.displayName = "CollapsibleTriggerIcon_UI";
 
 // src/components/Collapsible/CollapsibleContent.tsx
 var import_styled_components46 = __toESM(require("styled-components"));
@@ -10201,7 +10201,7 @@ var ColorGrid = ({ children }) => {
     }
   );
 };
-ColorGrid.displayName = "ColorGrid";
+ColorGrid.displayName = "ColorGrid_UI";
 
 // src/components/ColorPicker/ColorGridOption.tsx
 var import_styled_components50 = __toESM(require("styled-components"));
@@ -10411,7 +10411,7 @@ var Tooltip = ({
     }
   );
 };
-Tooltip.displayName = "Tooltip";
+Tooltip.displayName = "Tooltip_UI";
 
 // src/components/ColorPicker/ColorGridOption.tsx
 var import_jsx_runtime229 = require("react/jsx-runtime");
@@ -10454,7 +10454,7 @@ var ColorGridOption = ({ value, name }) => {
     }
   );
 };
-ColorGridOption.displayName = "ColorGridOption";
+ColorGridOption.displayName = "ColorGridOption_UI";
 
 // src/components/ColorPicker/ColorList.tsx
 var import_react43 = require("react");
@@ -10488,7 +10488,7 @@ var ColorList = ({ children }) => {
     }
   );
 };
-ColorList.displayName = "ColorList";
+ColorList.displayName = "ColorList_UI";
 
 // src/components/ColorPicker/ColorListGroup.tsx
 var import_styled_components52 = __toESM(require("styled-components"));
@@ -10518,7 +10518,7 @@ var ColorListGroup = ({ label, children }) => {
     }
   );
 };
-ColorListGroup.displayName = "ColorListGroup";
+ColorListGroup.displayName = "ColorListGroup_UI";
 
 // src/components/ColorPicker/ColorListOption.tsx
 var import_styled_components53 = __toESM(require("styled-components"));
@@ -10613,7 +10613,7 @@ var ColorListOption = ({ value, name }) => {
     }
   );
 };
-ColorListOption.displayName = "ColorListOption";
+ColorListOption.displayName = "ColorListOption_UI";
 
 // src/components/ColorPicker/ColorPicker.tsx
 var import_react_popover = require("@radix-ui/react-popover");
@@ -10638,7 +10638,7 @@ var ColorPicker = ({
     }
   ) });
 };
-ColorPicker.displayName = "ColorPicker";
+ColorPicker.displayName = "ColorPicker_UI";
 
 // src/components/ColorPicker/ColorPickerPopoverContent.tsx
 var import_react_popover2 = require("@radix-ui/react-popover");
@@ -10667,7 +10667,7 @@ var ColorPickerPopoverContent = ({
     }
   ) });
 };
-ColorPickerPopoverContent.displayName = "ColorPickerPopoverContent";
+ColorPickerPopoverContent.displayName = "ColorPickerPopoverContent_UI";
 
 // src/components/ColorPicker/ColorPickerSection.tsx
 var import_styled_components55 = __toESM(require("styled-components"));
@@ -10678,7 +10678,7 @@ var Container5 = import_styled_components55.default.div`
 var ColorPickerSection = ({ children }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(Container5, { children: /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(Stack, { children }) });
 };
-ColorPickerSection.displayName = "ColorPickerSection";
+ColorPickerSection.displayName = "ColorPickerSection_UI";
 
 // src/components/ColorPicker/ColorPickerTrigger.tsx
 var import_react44 = require("react");
@@ -10691,7 +10691,7 @@ var ValueSwatch = () => {
   const { valueAsHex } = useColorPickerState();
   return /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(ColorSwatch, { value: valueAsHex });
 };
-ValueSwatch.displayName = "ValueSwatch";
+ValueSwatch.displayName = "ValueSwatch_UI";
 
 // src/components/ColorPicker/ValueNameOrHexCode.tsx
 var import_jsx_runtime238 = require("react/jsx-runtime");
@@ -10699,7 +10699,7 @@ var ValueNameOrHexCode = () => {
   const { valueAsHex } = useColorPickerState();
   return /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(ColorNameOrHexCode, { hexCode: valueAsHex });
 };
-ValueNameOrHexCode.displayName = "ValueNameOrHexCode";
+ValueNameOrHexCode.displayName = "ValueNameOrHexCode_UI";
 
 // src/components/ColorPicker/ColorPickerTrigger.tsx
 var import_jsx_runtime239 = require("react/jsx-runtime");
@@ -10739,7 +10739,7 @@ var ColorPickerTrigger = (0, import_react44.forwardRef)(
     );
   }
 );
-ColorPickerTrigger.displayName = "ColorPickerTrigger";
+ColorPickerTrigger.displayName = "ColorPickerTrigger_UI";
 
 // src/components/ColorPicker/ContrastIndicator.tsx
 var import_styled_components57 = __toESM(require("styled-components"));
@@ -10960,7 +10960,7 @@ var Switch = (0, import_react45.forwardRef)(
     ] });
   }
 );
-Switch.displayName = "Switch";
+Switch.displayName = "Switch_UI";
 
 // src/components/ColorPicker/ContrastEnforcerSwitch.tsx
 var import_jsx_runtime242 = require("react/jsx-runtime");
@@ -11023,7 +11023,7 @@ var ContrastControls = () => {
     /* @__PURE__ */ (0, import_jsx_runtime244.jsx)(ContrastEnforcerSwitch, {})
   ] });
 };
-ContrastControls.displayName = "ContrastControls";
+ContrastControls.displayName = "ContrastControls_UI";
 
 // src/components/ColorPicker/HexColorInput.tsx
 var import_react48 = require("react");
@@ -11233,7 +11233,7 @@ var Input = (0, import_react47.forwardRef)(
     );
   }
 );
-Input.displayName = "Input";
+Input.displayName = "Input_UI";
 
 // src/components/ColorPicker/HexColorInput.tsx
 var import_jsx_runtime246 = require("react/jsx-runtime");
@@ -11396,7 +11396,7 @@ var HexColorInput = ({ autoFocus = true }) => {
     }
   );
 };
-HexColorInput.displayName = "HexColorInput";
+HexColorInput.displayName = "HexColorInput_UI";
 
 // src/components/ColorPicker/HueSlider.tsx
 var import_react50 = require("react");
@@ -11533,7 +11533,7 @@ var HueSlider = () => {
     /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(HSVHueCanvas, { hsv: valueAsHsv })
   ] });
 };
-HueSlider.displayName = "HueSlider";
+HueSlider.displayName = "HueSlider_UI";
 
 // src/components/ColorPicker/SaturationAndValuePicker.tsx
 var import_react52 = require("react");
@@ -11905,7 +11905,7 @@ var SaturationAndValuePicker = ({
     )
   );
 };
-SaturationAndValuePicker.displayName = "SaturationAndValuePicker";
+SaturationAndValuePicker.displayName = "SaturationAndValuePicker_UI";
 
 // src/components/Combobox/Combobox.tsx
 var Ariakit = __toESM(require("@ariakit/react"));
@@ -12066,7 +12066,7 @@ var Tag = (0, import_react53.forwardRef)(
     );
   }
 );
-Tag.displayName = "Tag";
+Tag.displayName = "Tag_UI";
 
 // src/components/Combobox/Combobox.tsx
 var import_jsx_runtime252 = require("react/jsx-runtime");
@@ -12332,6 +12332,11 @@ var StyledDataCard = import_styled_components67.default.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;
@@ -12418,6 +12423,9 @@ var StyledDataCardTrendContainer = import_styled_components67.default.div`
   bottom: var(--wui-space-01);
   right: var(--wui-space-01);
 `;
+var StyledSubtitle = (0, import_styled_components67.default)(Text)`
+  grid-area: subtitle;
+`;
 var DataCardInner = ({
   label,
   value,
@@ -12425,6 +12433,7 @@ var DataCardInner = ({
   colorScheme = "inherit",
   isLoading = false,
   trend,
+  subtitle,
   ...props
 }) => /* @__PURE__ */ (0, import_jsx_runtime253.jsxs)(
   StyledDataCard,
@@ -12448,8 +12457,16 @@ var DataCardInner = ({
           children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(StyledLoadingValue, {}) : value
         }
       ),
-      (0, import_type_guards37.isNotNull)(upperRightSlot) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(StyledSlot, { children: upperRightSlot }),
-      (0, import_type_guards37.isNotNull)(trend) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(StyledDataCardTrendContainer, { children: trend })
+      (0, import_type_guards37.isNotNil)(upperRightSlot) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(StyledSlot, { children: upperRightSlot }),
+      (0, import_type_guards37.isNotNil)(subtitle) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(
+        StyledSubtitle,
+        {
+          "data-wui-data-card-subtitle": true,
+          variant: "label4",
+          children: subtitle
+        }
+      ),
+      (0, import_type_guards37.isNotNil)(trend) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(StyledDataCardTrendContainer, { children: trend })
     ]
   }
 );
@@ -12486,7 +12503,7 @@ var DataCard = (props) => {
   }
   return /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(DataCardInner, { ...props });
 };
-DataCard.displayName = "DataCard";
+DataCard.displayName = "DataCard_UI";
 
 // src/components/DataCards/DataCards.tsx
 var import_styled_components68 = __toESM(require("styled-components"));
@@ -12511,6 +12528,7 @@ var DataCards = ({
       ...props,
       $cardMaxWidth: cardMaxWidth,
       $colorScheme: colorScheme,
+      alignItems: "stretch",
       direction: "row",
       fill: "horizontal",
       gap: "space-02",
@@ -12520,7 +12538,7 @@ var DataCards = ({
     }
   );
 };
-DataCards.displayName = "DataCards";
+DataCards.displayName = "DataCards_UI";
 
 // src/components/DataCards/DataCardTrend.tsx
 var import_styled_components69 = __toESM(require("styled-components"));
@@ -12598,7 +12616,7 @@ var Divider = ({ orientation = "horizontal", ...props }) => {
     }
   );
 };
-Divider.displayName = "Divider";
+Divider.displayName = "Divider_UI";
 
 // src/components/EditableHeading/EditableHeading.tsx
 var import_styled_components71 = __toESM(require("styled-components"));
@@ -12872,7 +12890,7 @@ var Label = ({
     }
   );
 };
-Label.displayName = "Label";
+Label.displayName = "Label_UI";
 
 // src/components/FormField/FormField.tsx
 var import_jsx_runtime260 = require("react/jsx-runtime");
@@ -13030,7 +13048,7 @@ var FormField = ({
     }
   );
 };
-FormField.displayName = "FormField";
+FormField.displayName = "FormField_UI";
 
 // src/components/FormGroup/RadioGroup.tsx
 var import_react60 = require("react");
@@ -13057,7 +13075,7 @@ var RadioGroup = ({
   }, [name, derivedValue, onChange]);
   return /* @__PURE__ */ (0, import_jsx_runtime261.jsx)(RadioGroupContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime261.jsx)(FormGroup, { ...props, children }) });
 };
-RadioGroup.displayName = "RadioGroup";
+RadioGroup.displayName = "RadioGroup_UI";
 
 // src/components/Grid/Grid.tsx
 var import_react61 = require("react");
@@ -13127,7 +13145,7 @@ var GridComponent = (0, import_react61.forwardRef)(
     );
   }
 );
-GridComponent.displayName = "Grid";
+GridComponent.displayName = "Grid_UI";
 var Grid = makePolymorphic(GridComponent);
 
 // src/components/InputClickToCopy/InputClickToCopy.tsx
@@ -13192,7 +13210,7 @@ var InputClickToCopy = (0, import_react62.forwardRef)(
     );
   }
 );
-InputClickToCopy.displayName = "InputClickToCopy";
+InputClickToCopy.displayName = "InputClickToCopy_UI";
 
 // src/components/KeyboardShortcut/KeyboardShortcut.tsx
 var import_styled_components76 = __toESM(require("styled-components"));
@@ -13301,7 +13319,7 @@ var KeyboardShortcut = ({
     ]
   }
 );
-KeyboardShortcut.displayName = "KeyboardShortcut";
+KeyboardShortcut.displayName = "KeyboardShortcut_UI";
 
 // src/components/List/List.tsx
 var import_type_guards44 = require("@wistia/type-guards");
@@ -13320,7 +13338,7 @@ var ListItem = ({ children }) => {
   }
   return /* @__PURE__ */ (0, import_jsx_runtime265.jsx)(ListItemComponent, { children });
 };
-ListItem.displayName = "ListItem";
+ListItem.displayName = "ListItem_UI";
 
 // src/components/List/List.tsx
 var import_jsx_runtime266 = require("react/jsx-runtime");
@@ -13459,7 +13477,7 @@ var List = ({
   }
   return null;
 };
-List.displayName = "List";
+List.displayName = "List_UI";
 
 // src/components/Menu/Menu.tsx
 var import_react64 = require("react");
@@ -13624,8 +13642,8 @@ var Menu = (0, import_react64.forwardRef)(
     ) });
   }
 );
-Menu.displayName = "Menu";
-Menu.displayName = "Menu";
+Menu.displayName = "Menu_UI";
+Menu.displayName = "Menu_UI";
 
 // src/components/Menu/MenuLabel.tsx
 var import_styled_components80 = __toESM(require("styled-components"));
@@ -13652,7 +13670,7 @@ var MenuLabel = ({ children, ...props }) => {
     }
   );
 };
-MenuLabel.displayName = "MenuLabel";
+MenuLabel.displayName = "MenuLabel_UI";
 
 // src/components/Menu/SubMenu.tsx
 var import_react66 = require("react");
@@ -13777,7 +13795,7 @@ var MenuItemButton = (0, import_react65.forwardRef)(({ children, appearance, com
     }
   );
 });
-MenuItemButton.displayName = "MenuItemButton";
+MenuItemButton.displayName = "MenuItemButton_UI";
 
 // src/components/Menu/MenuItemLabelDescription.tsx
 var import_styled_components82 = __toESM(require("styled-components"));
@@ -13864,7 +13882,7 @@ var SubMenu = ({
     /* @__PURE__ */ (0, import_jsx_runtime271.jsx)(StyledMobileSubMenuItems, { children: isExpanded ? children : null })
   ] });
 };
-SubMenu.displayName = "SubMenu";
+SubMenu.displayName = "SubMenu_UI";
 
 // src/components/Menu/MenuItem.tsx
 var import_react67 = require("react");
@@ -13889,7 +13907,7 @@ var MenuItem = (0, import_react67.forwardRef)(
     );
   }
 );
-MenuItem.displayName = "MenuItem";
+MenuItem.displayName = "MenuItem_UI";
 
 // src/components/Menu/MenuRadioGroup.tsx
 var import_react_dropdown_menu5 = require("@radix-ui/react-dropdown-menu");
@@ -13897,7 +13915,7 @@ var import_jsx_runtime273 = require("react/jsx-runtime");
 var MenuRadioGroup = ({ children, ...props }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime273.jsx)(import_react_dropdown_menu5.DropdownMenuRadioGroup, { ...props, children });
 };
-MenuRadioGroup.displayName = "MenuRadioGroup";
+MenuRadioGroup.displayName = "MenuRadioGroup_UI";
 
 // src/components/Menu/RadioMenuItem.tsx
 var import_react_dropdown_menu6 = require("@radix-ui/react-dropdown-menu");
@@ -13931,7 +13949,7 @@ var RadioMenuItem = ({
     }
   );
 };
-RadioMenuItem.displayName = "RadioMenuItem";
+RadioMenuItem.displayName = "RadioMenuItem_UI";
 
 // src/components/Menu/CheckboxMenuItem.tsx
 var import_react_dropdown_menu7 = require("@radix-ui/react-dropdown-menu");
@@ -14016,7 +14034,7 @@ var CheckboxMenuItem = ({
     }
   );
 };
-CheckboxMenuItem.displayName = "CheckboxMenuItem";
+CheckboxMenuItem.displayName = "CheckboxMenuItem_UI";
 
 // src/components/Menu/FilterMenu.tsx
 var import_react68 = require("react");
@@ -14118,7 +14136,7 @@ var FilterMenu = (0, import_react68.forwardRef)(
     );
   }
 );
-FilterMenu.displayName = "FilterMenu";
+FilterMenu.displayName = "FilterMenu_UI";
 
 // src/components/Modal/Modal.tsx
 var import_react71 = require("react");
@@ -14447,7 +14465,7 @@ var Modal = (0, import_react71.forwardRef)(
     );
   }
 );
-Modal.displayName = "Modal";
+Modal.displayName = "Modal_UI";
 
 // src/components/Popover/Popover.tsx
 var import_react_popover5 = require("@radix-ui/react-popover");
@@ -14537,7 +14555,7 @@ var PopoverArrow = ({ isAnimated }) => {
     }
   ) });
 };
-PopoverArrow.displayName = "PopoverArrow";
+PopoverArrow.displayName = "PopoverArrow_UI";
 
 // src/components/Popover/Popover.tsx
 var import_jsx_runtime282 = require("react/jsx-runtime");
@@ -14606,7 +14624,7 @@ var Popover2 = ({
     ) })
   ] });
 };
-Popover2.displayName = "Popover";
+Popover2.displayName = "Popover_UI";
 
 // src/components/ProgressBar/ProgressBar.tsx
 var import_styled_components91 = __toESM(require("styled-components"));
@@ -14685,7 +14703,7 @@ var ProgressBar = ({
     (0, import_type_guards52.isNotNil)(labelRight) ? /* @__PURE__ */ (0, import_jsx_runtime283.jsx)(ProgressBarLabel, { children: labelRight }) : null
   ] });
 };
-ProgressBar.displayName = "ProgressBar";
+ProgressBar.displayName = "ProgressBar_UI";
 
 // src/components/Radio/Radio.tsx
 var import_react72 = require("react");
@@ -14860,7 +14878,7 @@ var Radio = (0, import_react72.forwardRef)(
     );
   }
 );
-Radio.displayName = "Radio";
+Radio.displayName = "Radio_UI";
 
 // src/components/RadioCard/RadioCard.tsx
 var import_react74 = require("react");
@@ -15024,7 +15042,7 @@ var RadioCardRoot = (0, import_react73.forwardRef)(
     );
   }
 );
-RadioCardRoot.displayName = "RadioCardRoot";
+RadioCardRoot.displayName = "RadioCardRoot_UI";
 
 // src/components/RadioCard/RadioCardDefaultLayout.tsx
 var import_styled_components95 = __toESM(require("styled-components"));
@@ -15078,7 +15096,7 @@ var RadioCardIndicator = import_styled_components94.default.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
 var import_jsx_runtime286 = require("react/jsx-runtime");
@@ -15126,7 +15144,7 @@ var RadioCardDefaultLayout = ({
     ] })
   ] });
 };
-RadioCardDefaultLayout.displayName = "RadioCardDefaultLayout";
+RadioCardDefaultLayout.displayName = "RadioCardDefaultLayout_UI";
 
 // src/components/RadioCard/RadioCard.tsx
 var import_jsx_runtime287 = require("react/jsx-runtime");
@@ -15150,7 +15168,7 @@ var RadioCard = (0, import_react74.forwardRef)(
     );
   }
 );
-RadioCard.displayName = "RadioCard";
+RadioCard.displayName = "RadioCard_UI";
 
 // src/components/RadioCard/RadioCardImage.tsx
 var import_react75 = require("react");
@@ -15178,7 +15196,7 @@ var RadioCardImage = (0, import_react75.forwardRef)(
     );
   }
 );
-RadioCardImage.displayName = "RadioCardImage";
+RadioCardImage.displayName = "RadioCardImage_UI";
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 var import_react78 = require("react");
@@ -15315,7 +15333,7 @@ var SegmentedControl = (0, import_react78.forwardRef)(
     );
   }
 );
-SegmentedControl.displayName = "SegmentedControl";
+SegmentedControl.displayName = "SegmentedControl_UI";
 
 // src/components/SegmentedControl/SegmentedControlItem.tsx
 var import_react79 = require("react");
@@ -15449,7 +15467,7 @@ var SegmentedControlItem = (0, import_react79.forwardRef)(
     );
   }
 );
-SegmentedControlItem.displayName = "SegmentedControlItem";
+SegmentedControlItem.displayName = "SegmentedControlItem_UI";
 
 // src/components/Select/Select.tsx
 var import_react_select = require("@radix-ui/react-select");
@@ -15563,7 +15581,7 @@ var Select = (0, import_react80.forwardRef)(
     );
   }
 );
-Select.displayName = "Select";
+Select.displayName = "Select_UI";
 
 // src/components/Select/SelectOption.tsx
 var import_react_select2 = require("@radix-ui/react-select");
@@ -15622,7 +15640,7 @@ var SelectOption = (0, import_react81.forwardRef)(
     );
   }
 );
-SelectOption.displayName = "SelectOption";
+SelectOption.displayName = "SelectOption_UI";
 
 // src/components/Select/SelectOptionGroup.tsx
 var import_react_select3 = require("@radix-ui/react-select");
@@ -15770,7 +15788,7 @@ var Slider = ({
     }
   );
 };
-Slider.displayName = "Slider";
+Slider.displayName = "Slider_UI";
 
 // src/components/Table/Table.tsx
 var import_styled_components103 = __toESM(require("styled-components"));
@@ -15931,7 +15949,7 @@ var Tabs = ({
   }
   return /* @__PURE__ */ (0, import_jsx_runtime303.jsx)(import_react_tabs.Root, { ...rootProps, children: /* @__PURE__ */ (0, import_jsx_runtime303.jsx)(TabsValueProvider, { value: value ?? defaultValue, children: /* @__PURE__ */ (0, import_jsx_runtime303.jsx)(SelectedItemStyleProvider, { children }) }) });
 };
-Tabs.displayName = "Tabs";
+Tabs.displayName = "Tabs_UI";
 
 // src/components/Tabs/TabsContent.tsx
 var import_react_tabs2 = require("@radix-ui/react-tabs");
@@ -15939,7 +15957,7 @@ var import_jsx_runtime304 = require("react/jsx-runtime");
 var TabsContent = ({ children, value }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime304.jsx)(import_react_tabs2.Content, { value, children });
 };
-TabsContent.displayName = "TabsContent";
+TabsContent.displayName = "TabsContent_UI";
 
 // src/components/Tabs/TabsList.tsx
 var import_react_tabs3 = require("@radix-ui/react-tabs");
@@ -15991,7 +16009,7 @@ var TabsList = ({ children, fullWidth = true, ...props }) => {
     }
   );
 };
-TabsList.displayName = "TabsList";
+TabsList.displayName = "TabsList_UI";
 
 // src/components/Tabs/TabsTrigger.tsx
 var import_react86 = require("react");
@@ -16058,7 +16076,7 @@ var TabsTrigger = (0, import_react86.forwardRef)(
     );
   }
 );
-TabsTrigger.displayName = "TabsTrigger";
+TabsTrigger.displayName = "TabsTrigger_UI";
 
 // src/components/Thumbnail/ThumbnailBadge.tsx
 var import_styled_components112 = __toESM(require("styled-components"));
@@ -16094,7 +16112,7 @@ var ThumbnailBadge = ({ icon, label, ...props }) => {
     /* @__PURE__ */ (0, import_jsx_runtime308.jsx)("span", { children: label })
   ] });
 };
-ThumbnailBadge.displayName = "ThumbnailBadge";
+ThumbnailBadge.displayName = "ThumbnailBadge_UI";
 
 // src/components/Thumbnail/Thumbnail.tsx
 var import_react87 = require("react");
@@ -16537,7 +16555,7 @@ var Thumbnail = (0, import_react87.forwardRef)(
     );
   }
 );
-Thumbnail.displayName = "Thumbnail";
+Thumbnail.displayName = "Thumbnail_UI";
 
 // src/components/ThumbnailCollage/ThumbnailCollage.tsx
 var import_react88 = __toESM(require("react"));
@@ -16771,7 +16789,7 @@ var WistiaLogo = ({
   );
   return href !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime312.jsx)("a", { href, children: Logo }) : Logo;
 };
-WistiaLogo.displayName = "WistiaLogo";
+WistiaLogo.displayName = "WistiaLogo_UI";
 
 // src/components/InputPassword/InputPassword.tsx
 var import_styled_components118 = __toESM(require("styled-components"));
@@ -16818,7 +16836,7 @@ var InputPassword = (0, import_react89.forwardRef)(
     );
   }
 );
-InputPassword.displayName = "InputPassword";
+InputPassword.displayName = "InputPassword_UI";
 
 // src/components/ContextMenu/ContextMenu.tsx
 var import_react90 = require("react");