@wistia/ui 0.13.3 → 0.13.4-beta.05e3f566.3e9870f

package/dist/index.cjs

@@ -1,6 +1,6 @@
 
 /*
- * @license @wistia/ui v0.13.3
+ * @license @wistia/ui v0.13.4-beta.05e3f566.3e9870f
  *
  * 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");
@@ -12473,6 +12473,7 @@ var DataCard = (props) => {
           {
             ref,
             ...(0, import_type_guards37.isNotNil)(props.beforeAction) ? { beforeAction: props.beforeAction } : {},
+            ...(0, import_type_guards37.isNotNil)(props.reloadDocument) ? { reloadDocument: props.reloadDocument } : {},
             disabled: props.disabled ?? false,
             href: props.href,
             onClick: props.onClick,
@@ -12485,7 +12486,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"));
@@ -12519,7 +12520,7 @@ var DataCards = ({
     }
   );
 };
-DataCards.displayName = "DataCards";
+DataCards.displayName = "DataCards_UI";
 
 // src/components/DataCards/DataCardTrend.tsx
 var import_styled_components69 = __toESM(require("styled-components"));
@@ -12597,7 +12598,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"));
@@ -12871,7 +12872,7 @@ var Label = ({
     }
   );
 };
-Label.displayName = "Label";
+Label.displayName = "Label_UI";
 
 // src/components/FormField/FormField.tsx
 var import_jsx_runtime260 = require("react/jsx-runtime");
@@ -13029,7 +13030,7 @@ var FormField = ({
     }
   );
 };
-FormField.displayName = "FormField";
+FormField.displayName = "FormField_UI";
 
 // src/components/FormGroup/RadioGroup.tsx
 var import_react60 = require("react");
@@ -13056,7 +13057,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");
@@ -13064,49 +13065,52 @@ var import_styled_components74 = __toESM(require("styled-components"));
 var import_type_guards40 = require("@wistia/type-guards");
 var import_jsx_runtime262 = require("react/jsx-runtime");
 var DEFAULT_ELEMENT5 = "div";
+var getGridTemplateColumns = (maxColumns, minChildWidth, expandItems) => {
+  if (minChildWidth === "auto" && maxColumns === "auto") {
+    return import_styled_components74.css`
+      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+    `;
+  }
+  const gridMode = expandItems ? "auto-fit" : "auto-fill";
+  const minChildWidthValue = minChildWidth === "auto" ? 0 : minChildWidth;
+  if (maxColumns === "auto") {
+    return import_styled_components74.css`
+      grid-template-columns: repeat(${gridMode}, minmax(${minChildWidthValue}px, 1fr));
+    `;
+  }
+  return import_styled_components74.css`
+    /* Adapted from https://9elements.com/blog/building-a-rock-solid-auto-grid/ */
+    --wui-grid-total-column-gap-width: calc(${maxColumns - 1} * var(--wui-grid-column-gap));
+    --wui-grid-max-column-width: calc(
+      (100% - var(--wui-grid-total-column-gap-width)) / ${maxColumns}
+    );
+
+    grid-template-columns: repeat(
+      ${gridMode},
+      minmax(max(${minChildWidthValue}px, var(--wui-grid-max-column-width)), 1fr)
+    );
+  `;
+};
 var StyledGrid = import_styled_components74.default.div`
   --wui-grid-column-gap: ${({ $columnGap }) => `var(--wui-${$columnGap})`};
   --wui-grid-row-gap: ${({ $rowGap }) => `var(--wui-${$rowGap})`};
-  --wui-grid-min-column-size: ${({ $minChildWidth }) => $minChildWidth === "auto" ? "0" : `${$minChildWidth}px`};
-  --wui-grid-max-columns: ${({ $maxColumns }) => $maxColumns === "auto" ? "infinity" : $maxColumns};
-  --wui-grid-column-gap-count: calc(var(--wui-grid-max-columns) - 1);
-  --wui-grid-total-column-gap-width: calc(
-    var(--wui-grid-column-gap-count) * var(--wui-grid-column-gap)
-  );
-  --wui-grid-max-column-width: calc(
-    (100% - var(--wui-grid-total-column-gap-width)) / var(--wui-grid-max-columns)
-  );
 
   display: grid;
   gap: var(--wui-grid-column-gap) var(--wui-grid-row-gap);
   width: 100%;
 
-  ${({ $maxColumns, $minChildWidth }) => {
-  if ($maxColumns === "auto" && $minChildWidth === "auto") {
-    return import_styled_components74.css`
-        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
-      `;
-  }
-  if ($maxColumns !== "auto" && $minChildWidth === "auto") {
-    return import_styled_components74.css`
-        grid-template-columns: repeat(${$maxColumns}, minmax(0, 1fr));
-      `;
-  }
-  if ($maxColumns === "auto" && $minChildWidth !== "auto") {
-    return import_styled_components74.css`
-        grid-template-columns: repeat(auto-fit, minmax(${$minChildWidth}px, 1fr));
-      `;
-  }
-  return import_styled_components74.css`
-      grid-template-columns: repeat(
-        auto-fit,
-        minmax(max(var(--wui-grid-min-column-size), var(--wui-grid-max-column-width)), 1fr)
-      );
-    `;
-}}
+  ${({ $maxColumns, $minChildWidth, $expandItems }) => getGridTemplateColumns($maxColumns, $minChildWidth, $expandItems)}
 `;
 var GridComponent = (0, import_react61.forwardRef)(
-  ({ children, columns = "auto", minChildWidth = "auto", gap = "space-02", renderAs, ...props }, ref) => {
+  ({
+    children,
+    columns = "auto",
+    minChildWidth = "auto",
+    gap = "space-02",
+    expandItems = false,
+    renderAs,
+    ...props
+  }, ref) => {
     const responsiveGap = useResponsiveProp(gap);
     const { column, row } = (0, import_type_guards40.isRecord)(responsiveGap) ? responsiveGap : { column: responsiveGap, row: responsiveGap };
     const responsiveColumns = useResponsiveProp(columns);
@@ -13116,6 +13120,7 @@ var GridComponent = (0, import_react61.forwardRef)(
       {
         ref,
         $columnGap: column,
+        $expandItems: expandItems,
         $maxColumns: responsiveColumns,
         $minChildWidth: responsiveMinChildWidth,
         $rowGap: row,
@@ -13126,7 +13131,7 @@ var GridComponent = (0, import_react61.forwardRef)(
     );
   }
 );
-GridComponent.displayName = "Grid";
+GridComponent.displayName = "Grid_UI";
 var Grid = makePolymorphic(GridComponent);
 
 // src/components/InputClickToCopy/InputClickToCopy.tsx
@@ -13191,7 +13196,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"));
@@ -13300,7 +13305,7 @@ var KeyboardShortcut = ({
     ]
   }
 );
-KeyboardShortcut.displayName = "KeyboardShortcut";
+KeyboardShortcut.displayName = "KeyboardShortcut_UI";
 
 // src/components/List/List.tsx
 var import_type_guards44 = require("@wistia/type-guards");
@@ -13319,7 +13324,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");
@@ -13458,7 +13463,7 @@ var List = ({
   }
   return null;
 };
-List.displayName = "List";
+List.displayName = "List_UI";
 
 // src/components/Menu/Menu.tsx
 var import_react64 = require("react");
@@ -13623,8 +13628,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"));
@@ -13651,7 +13656,7 @@ var MenuLabel = ({ children, ...props }) => {
     }
   );
 };
-MenuLabel.displayName = "MenuLabel";
+MenuLabel.displayName = "MenuLabel_UI";
 
 // src/components/Menu/SubMenu.tsx
 var import_react66 = require("react");
@@ -13776,7 +13781,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"));
@@ -13863,7 +13868,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");
@@ -13888,7 +13893,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");
@@ -13896,7 +13901,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");
@@ -13930,7 +13935,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");
@@ -14015,7 +14020,7 @@ var CheckboxMenuItem = ({
     }
   );
 };
-CheckboxMenuItem.displayName = "CheckboxMenuItem";
+CheckboxMenuItem.displayName = "CheckboxMenuItem_UI";
 
 // src/components/Menu/FilterMenu.tsx
 var import_react68 = require("react");
@@ -14117,7 +14122,7 @@ var FilterMenu = (0, import_react68.forwardRef)(
     );
   }
 );
-FilterMenu.displayName = "FilterMenu";
+FilterMenu.displayName = "FilterMenu_UI";
 
 // src/components/Modal/Modal.tsx
 var import_react71 = require("react");
@@ -14446,7 +14451,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");
@@ -14536,7 +14541,7 @@ var PopoverArrow = ({ isAnimated }) => {
     }
   ) });
 };
-PopoverArrow.displayName = "PopoverArrow";
+PopoverArrow.displayName = "PopoverArrow_UI";
 
 // src/components/Popover/Popover.tsx
 var import_jsx_runtime282 = require("react/jsx-runtime");
@@ -14605,7 +14610,7 @@ var Popover2 = ({
     ) })
   ] });
 };
-Popover2.displayName = "Popover";
+Popover2.displayName = "Popover_UI";
 
 // src/components/ProgressBar/ProgressBar.tsx
 var import_styled_components91 = __toESM(require("styled-components"));
@@ -14684,7 +14689,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");
@@ -14859,7 +14864,7 @@ var Radio = (0, import_react72.forwardRef)(
     );
   }
 );
-Radio.displayName = "Radio";
+Radio.displayName = "Radio_UI";
 
 // src/components/RadioCard/RadioCard.tsx
 var import_react74 = require("react");
@@ -15023,7 +15028,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"));
@@ -15077,7 +15082,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");
@@ -15125,7 +15130,7 @@ var RadioCardDefaultLayout = ({
     ] })
   ] });
 };
-RadioCardDefaultLayout.displayName = "RadioCardDefaultLayout";
+RadioCardDefaultLayout.displayName = "RadioCardDefaultLayout_UI";
 
 // src/components/RadioCard/RadioCard.tsx
 var import_jsx_runtime287 = require("react/jsx-runtime");
@@ -15149,7 +15154,7 @@ var RadioCard = (0, import_react74.forwardRef)(
     );
   }
 );
-RadioCard.displayName = "RadioCard";
+RadioCard.displayName = "RadioCard_UI";
 
 // src/components/RadioCard/RadioCardImage.tsx
 var import_react75 = require("react");
@@ -15177,7 +15182,7 @@ var RadioCardImage = (0, import_react75.forwardRef)(
     );
   }
 );
-RadioCardImage.displayName = "RadioCardImage";
+RadioCardImage.displayName = "RadioCardImage_UI";
 
 // src/components/SegmentedControl/SegmentedControl.tsx
 var import_react78 = require("react");
@@ -15314,7 +15319,7 @@ var SegmentedControl = (0, import_react78.forwardRef)(
     );
   }
 );
-SegmentedControl.displayName = "SegmentedControl";
+SegmentedControl.displayName = "SegmentedControl_UI";
 
 // src/components/SegmentedControl/SegmentedControlItem.tsx
 var import_react79 = require("react");
@@ -15448,7 +15453,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");
@@ -15562,7 +15567,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");
@@ -15621,7 +15626,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");
@@ -15769,7 +15774,7 @@ var Slider = ({
     }
   );
 };
-Slider.displayName = "Slider";
+Slider.displayName = "Slider_UI";
 
 // src/components/Table/Table.tsx
 var import_styled_components103 = __toESM(require("styled-components"));
@@ -15930,7 +15935,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");
@@ -15938,7 +15943,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");
@@ -15990,7 +15995,7 @@ var TabsList = ({ children, fullWidth = true, ...props }) => {
     }
   );
 };
-TabsList.displayName = "TabsList";
+TabsList.displayName = "TabsList_UI";
 
 // src/components/Tabs/TabsTrigger.tsx
 var import_react86 = require("react");
@@ -16057,7 +16062,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"));
@@ -16093,7 +16098,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");
@@ -16536,7 +16541,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"));
@@ -16770,7 +16775,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"));
@@ -16817,7 +16822,7 @@ var InputPassword = (0, import_react89.forwardRef)(
     );
   }
 );
-InputPassword.displayName = "InputPassword";
+InputPassword.displayName = "InputPassword_UI";
 
 // src/components/ContextMenu/ContextMenu.tsx
 var import_react90 = require("react");