@wistia/ui 0.13.4-beta.cf4f4132.b08e3e1 → 0.13.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.cjs CHANGED
@@ -1,6 +1,6 @@
1
1
 
2
2
  /*
3
- * @license @wistia/ui v0.13.4-beta.cf4f4132.b08e3e1
3
+ * @license @wistia/ui v0.13.4
4
4
  *
5
5
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
6
6
  *
@@ -2776,7 +2776,7 @@ var Ellipsis = ({ children, lines, ...props }) => /* @__PURE__ */ (0, import_jsx
2776
2776
  children
2777
2777
  }
2778
2778
  );
2779
- Ellipsis.displayName = "Ellipsis_UI";
2779
+ Ellipsis.displayName = "Ellipsis";
2780
2780
 
2781
2781
  // src/private/helpers/getColorScheme/getColorScheme.ts
2782
2782
  var import_styled_components15 = require("styled-components");
@@ -7227,7 +7227,7 @@ var Icon = ({
7227
7227
  }
7228
7228
  );
7229
7229
  };
7230
- Icon.displayName = "Icon_UI";
7230
+ Icon.displayName = "Icon";
7231
7231
 
7232
7232
  // src/components/Link/Link.tsx
7233
7233
  var import_react22 = require("react");
@@ -7367,7 +7367,7 @@ var Link = (0, import_react22.forwardRef)(
7367
7367
  return null;
7368
7368
  }
7369
7369
  );
7370
- Link.displayName = "Link_UI";
7370
+ Link.displayName = "Link";
7371
7371
 
7372
7372
  // src/components/Button/Button.tsx
7373
7373
  var import_jsx_runtime197 = require("react/jsx-runtime");
@@ -7509,7 +7509,7 @@ var Button = (0, import_react23.forwardRef)(
7509
7509
  );
7510
7510
  }
7511
7511
  );
7512
- Button.displayName = "Button_UI";
7512
+ Button.displayName = "Button";
7513
7513
 
7514
7514
  // src/components/ActionButton/ActionButton.tsx
7515
7515
  var import_jsx_runtime198 = require("react/jsx-runtime");
@@ -7649,7 +7649,7 @@ var ActionButton = (0, import_react24.forwardRef)(
7649
7649
  );
7650
7650
  }
7651
7651
  );
7652
- ActionButton.displayName = "ActionButton_UI";
7652
+ ActionButton.displayName = "ActionButton";
7653
7653
 
7654
7654
  // src/components/Avatar/Avatar.tsx
7655
7655
  var import_react25 = require("react");
@@ -7721,7 +7721,7 @@ var Image = ({
7721
7721
  ...props
7722
7722
  }
7723
7723
  );
7724
- Image.displayName = "Image_UI";
7724
+ Image.displayName = "Image";
7725
7725
 
7726
7726
  // src/components/ColorSchemeWrapper/ColorSchemeWrapper.tsx
7727
7727
  var import_styled_components24 = __toESM(require("styled-components"));
@@ -7764,7 +7764,7 @@ var ColorSchemeWrapper = ({
7764
7764
  children
7765
7765
  }
7766
7766
  );
7767
- ColorSchemeWrapper.displayName = "ColorSchemeWrapper_UI";
7767
+ ColorSchemeWrapper.displayName = "ColorSchemeWrapper";
7768
7768
 
7769
7769
  // src/components/Avatar/Avatar.tsx
7770
7770
  var import_jsx_runtime201 = require("react/jsx-runtime");
@@ -7901,7 +7901,7 @@ var Avatar = ({
7901
7901
  }
7902
7902
  );
7903
7903
  };
7904
- Avatar.displayName = "Avatar_UI";
7904
+ Avatar.displayName = "Avatar";
7905
7905
 
7906
7906
  // src/components/Badge/Badge.tsx
7907
7907
  var import_react26 = require("react");
@@ -7952,7 +7952,7 @@ var Badge = (0, import_react26.forwardRef)(
7952
7952
  );
7953
7953
  }
7954
7954
  );
7955
- Badge.displayName = "Badge_UI";
7955
+ Badge.displayName = "Badge";
7956
7956
 
7957
7957
  // src/components/Banner/Banner.tsx
7958
7958
  var import_react31 = require("react");
@@ -8144,7 +8144,7 @@ var BoxComponent = (0, import_react27.forwardRef)(
8144
8144
  );
8145
8145
  }
8146
8146
  );
8147
- BoxComponent.displayName = "Box_UI";
8147
+ BoxComponent.displayName = "Box";
8148
8148
  var Box = makePolymorphic(BoxComponent);
8149
8149
 
8150
8150
  // src/components/Heading/Heading.tsx
@@ -8283,7 +8283,7 @@ var HeadingComponent = (0, import_react28.forwardRef)(
8283
8283
  }
8284
8284
  )
8285
8285
  );
8286
- HeadingComponent.displayName = "Heading_UI";
8286
+ HeadingComponent.displayName = "Heading";
8287
8287
  var Heading = makePolymorphic(HeadingComponent);
8288
8288
 
8289
8289
  // src/components/Text/Text.tsx
@@ -8493,7 +8493,7 @@ var TextComponent = (0, import_react29.forwardRef)(
8493
8493
  );
8494
8494
  }
8495
8495
  );
8496
- TextComponent.displayName = "Text_UI";
8496
+ TextComponent.displayName = "Text";
8497
8497
  var Text = makePolymorphic(TextComponent);
8498
8498
 
8499
8499
  // src/components/ButtonGroup/ButtonGroup.tsx
@@ -8573,7 +8573,7 @@ var ButtonGroup = ({
8573
8573
  }
8574
8574
  );
8575
8575
  };
8576
- ButtonGroup.displayName = "ButtonGroup_UI";
8576
+ ButtonGroup.displayName = "ButtonGroup";
8577
8577
 
8578
8578
  // src/components/IconButton/IconButton.tsx
8579
8579
  var import_react30 = require("react");
@@ -8611,7 +8611,7 @@ var IconButton = (0, import_react30.forwardRef)(
8611
8611
  );
8612
8612
  }
8613
8613
  );
8614
- IconButton.displayName = "IconButton_UI";
8614
+ IconButton.displayName = "IconButton";
8615
8615
 
8616
8616
  // src/components/Banner/Banner.tsx
8617
8617
  var import_jsx_runtime208 = require("react/jsx-runtime");
@@ -8787,7 +8787,7 @@ var Banner = ({
8787
8787
  }
8788
8788
  );
8789
8789
  };
8790
- Banner.displayName = "Banner_UI";
8790
+ Banner.displayName = "Banner";
8791
8791
 
8792
8792
  // src/components/Breadcrumbs/Breadcrumbs.tsx
8793
8793
  var import_react32 = require("react");
@@ -8835,7 +8835,7 @@ var Breadcrumbs = ({ children, ...props }) => {
8835
8835
  )
8836
8836
  ] });
8837
8837
  };
8838
- Breadcrumbs.displayName = "Breadcrumbs_UI";
8838
+ Breadcrumbs.displayName = "Breadcrumbs";
8839
8839
 
8840
8840
  // src/components/Breadcrumbs/Breadcrumb.tsx
8841
8841
  var import_styled_components34 = __toESM(require("styled-components"));
@@ -8928,7 +8928,7 @@ var Card = ({
8928
8928
  children
8929
8929
  }
8930
8930
  );
8931
- Card.displayName = "Card_UI";
8931
+ Card.displayName = "Card";
8932
8932
 
8933
8933
  // src/components/Center/Center.tsx
8934
8934
  var import_react33 = require("react");
@@ -8959,7 +8959,7 @@ var Center = (0, import_react33.forwardRef)(
8959
8959
  }
8960
8960
  )
8961
8961
  );
8962
- Center.displayName = "Center_UI";
8962
+ Center.displayName = "Center";
8963
8963
 
8964
8964
  // src/components/Checkbox/Checkbox.tsx
8965
8965
  var import_react38 = require("react");
@@ -9026,7 +9026,7 @@ var ScreenReaderOnly = ({
9026
9026
  }
9027
9027
  return /* @__PURE__ */ (0, import_jsx_runtime214.jsx)(VisuallyHidden, { ...props, children: accessibleText });
9028
9028
  };
9029
- ScreenReaderOnly.displayName = "ScreenReaderOnly_UI";
9029
+ ScreenReaderOnly.displayName = "ScreenReaderOnly";
9030
9030
 
9031
9031
  // src/private/components/FormControlLabel/FormControlLabel.tsx
9032
9032
  var import_jsx_runtime215 = require("react/jsx-runtime");
@@ -9124,7 +9124,7 @@ var StackComponent = (0, import_react34.forwardRef)(
9124
9124
  );
9125
9125
  }
9126
9126
  );
9127
- StackComponent.displayName = "Stack_UI";
9127
+ StackComponent.displayName = "Stack";
9128
9128
  var Stack = makePolymorphic(StackComponent);
9129
9129
 
9130
9130
  // src/components/FormGroup/FormGroup.tsx
@@ -9188,7 +9188,7 @@ var FormGroup = ({
9188
9188
  }
9189
9189
  );
9190
9190
  };
9191
- FormGroup.displayName = "FormGroup_UI";
9191
+ FormGroup.displayName = "FormGroup";
9192
9192
 
9193
9193
  // src/components/Form/Form.tsx
9194
9194
  var import_react36 = require("react");
@@ -9335,7 +9335,7 @@ var CheckboxGroup = ({
9335
9335
  }, [name, derivedValue, onChange]);
9336
9336
  return /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(CheckboxGroupContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime219.jsx)(FormGroup, { ...props, children }) });
9337
9337
  };
9338
- CheckboxGroup.displayName = "CheckboxGroup_UI";
9338
+ CheckboxGroup.displayName = "CheckboxGroup";
9339
9339
 
9340
9340
  // src/components/Checkbox/Checkbox.tsx
9341
9341
  var import_jsx_runtime220 = require("react/jsx-runtime");
@@ -9499,7 +9499,7 @@ var Checkbox = (0, import_react38.forwardRef)(
9499
9499
  ] });
9500
9500
  }
9501
9501
  );
9502
- Checkbox.displayName = "Checkbox_UI";
9502
+ Checkbox.displayName = "Checkbox";
9503
9503
 
9504
9504
  // src/components/ClickRegion/ClickRegion.tsx
9505
9505
  var import_react39 = require("react");
@@ -9542,7 +9542,7 @@ var ClickRegion = ({ children, targetRef }) => {
9542
9542
  onClick: handleClick
9543
9543
  });
9544
9544
  };
9545
- ClickRegion.displayName = "ClickRegion_UI";
9545
+ ClickRegion.displayName = "ClickRegion";
9546
9546
 
9547
9547
  // src/components/Collapsible/Collapsible.tsx
9548
9548
  var import_react_collapsible = require("@radix-ui/react-collapsible");
@@ -9567,7 +9567,7 @@ var Collapsible = ({
9567
9567
  };
9568
9568
  return /* @__PURE__ */ (0, import_jsx_runtime221.jsx)(StyledRoot, { ...controlProps, children });
9569
9569
  };
9570
- Collapsible.displayName = "Collapsible_UI";
9570
+ Collapsible.displayName = "Collapsible";
9571
9571
 
9572
9572
  // src/components/Collapsible/CollapsibleTrigger.tsx
9573
9573
  var import_react40 = require("react");
@@ -9620,7 +9620,7 @@ var CollapsibleTriggerIcon = ({ type, ...props }) => {
9620
9620
  }
9621
9621
  );
9622
9622
  };
9623
- CollapsibleTriggerIcon.displayName = "CollapsibleTriggerIcon_UI";
9623
+ CollapsibleTriggerIcon.displayName = "CollapsibleTriggerIcon";
9624
9624
 
9625
9625
  // src/components/Collapsible/CollapsibleContent.tsx
9626
9626
  var import_styled_components46 = __toESM(require("styled-components"));
@@ -10201,7 +10201,7 @@ var ColorGrid = ({ children }) => {
10201
10201
  }
10202
10202
  );
10203
10203
  };
10204
- ColorGrid.displayName = "ColorGrid_UI";
10204
+ ColorGrid.displayName = "ColorGrid";
10205
10205
 
10206
10206
  // src/components/ColorPicker/ColorGridOption.tsx
10207
10207
  var import_styled_components50 = __toESM(require("styled-components"));
@@ -10411,7 +10411,7 @@ var Tooltip = ({
10411
10411
  }
10412
10412
  );
10413
10413
  };
10414
- Tooltip.displayName = "Tooltip_UI";
10414
+ Tooltip.displayName = "Tooltip";
10415
10415
 
10416
10416
  // src/components/ColorPicker/ColorGridOption.tsx
10417
10417
  var import_jsx_runtime229 = require("react/jsx-runtime");
@@ -10454,7 +10454,7 @@ var ColorGridOption = ({ value, name }) => {
10454
10454
  }
10455
10455
  );
10456
10456
  };
10457
- ColorGridOption.displayName = "ColorGridOption_UI";
10457
+ ColorGridOption.displayName = "ColorGridOption";
10458
10458
 
10459
10459
  // src/components/ColorPicker/ColorList.tsx
10460
10460
  var import_react43 = require("react");
@@ -10488,7 +10488,7 @@ var ColorList = ({ children }) => {
10488
10488
  }
10489
10489
  );
10490
10490
  };
10491
- ColorList.displayName = "ColorList_UI";
10491
+ ColorList.displayName = "ColorList";
10492
10492
 
10493
10493
  // src/components/ColorPicker/ColorListGroup.tsx
10494
10494
  var import_styled_components52 = __toESM(require("styled-components"));
@@ -10518,7 +10518,7 @@ var ColorListGroup = ({ label, children }) => {
10518
10518
  }
10519
10519
  );
10520
10520
  };
10521
- ColorListGroup.displayName = "ColorListGroup_UI";
10521
+ ColorListGroup.displayName = "ColorListGroup";
10522
10522
 
10523
10523
  // src/components/ColorPicker/ColorListOption.tsx
10524
10524
  var import_styled_components53 = __toESM(require("styled-components"));
@@ -10613,7 +10613,7 @@ var ColorListOption = ({ value, name }) => {
10613
10613
  }
10614
10614
  );
10615
10615
  };
10616
- ColorListOption.displayName = "ColorListOption_UI";
10616
+ ColorListOption.displayName = "ColorListOption";
10617
10617
 
10618
10618
  // src/components/ColorPicker/ColorPicker.tsx
10619
10619
  var import_react_popover = require("@radix-ui/react-popover");
@@ -10638,7 +10638,7 @@ var ColorPicker = ({
10638
10638
  }
10639
10639
  ) });
10640
10640
  };
10641
- ColorPicker.displayName = "ColorPicker_UI";
10641
+ ColorPicker.displayName = "ColorPicker";
10642
10642
 
10643
10643
  // src/components/ColorPicker/ColorPickerPopoverContent.tsx
10644
10644
  var import_react_popover2 = require("@radix-ui/react-popover");
@@ -10667,7 +10667,7 @@ var ColorPickerPopoverContent = ({
10667
10667
  }
10668
10668
  ) });
10669
10669
  };
10670
- ColorPickerPopoverContent.displayName = "ColorPickerPopoverContent_UI";
10670
+ ColorPickerPopoverContent.displayName = "ColorPickerPopoverContent";
10671
10671
 
10672
10672
  // src/components/ColorPicker/ColorPickerSection.tsx
10673
10673
  var import_styled_components55 = __toESM(require("styled-components"));
@@ -10678,7 +10678,7 @@ var Container5 = import_styled_components55.default.div`
10678
10678
  var ColorPickerSection = ({ children }) => {
10679
10679
  return /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(Container5, { children: /* @__PURE__ */ (0, import_jsx_runtime236.jsx)(Stack, { children }) });
10680
10680
  };
10681
- ColorPickerSection.displayName = "ColorPickerSection_UI";
10681
+ ColorPickerSection.displayName = "ColorPickerSection";
10682
10682
 
10683
10683
  // src/components/ColorPicker/ColorPickerTrigger.tsx
10684
10684
  var import_react44 = require("react");
@@ -10691,7 +10691,7 @@ var ValueSwatch = () => {
10691
10691
  const { valueAsHex } = useColorPickerState();
10692
10692
  return /* @__PURE__ */ (0, import_jsx_runtime237.jsx)(ColorSwatch, { value: valueAsHex });
10693
10693
  };
10694
- ValueSwatch.displayName = "ValueSwatch_UI";
10694
+ ValueSwatch.displayName = "ValueSwatch";
10695
10695
 
10696
10696
  // src/components/ColorPicker/ValueNameOrHexCode.tsx
10697
10697
  var import_jsx_runtime238 = require("react/jsx-runtime");
@@ -10699,7 +10699,7 @@ var ValueNameOrHexCode = () => {
10699
10699
  const { valueAsHex } = useColorPickerState();
10700
10700
  return /* @__PURE__ */ (0, import_jsx_runtime238.jsx)(ColorNameOrHexCode, { hexCode: valueAsHex });
10701
10701
  };
10702
- ValueNameOrHexCode.displayName = "ValueNameOrHexCode_UI";
10702
+ ValueNameOrHexCode.displayName = "ValueNameOrHexCode";
10703
10703
 
10704
10704
  // src/components/ColorPicker/ColorPickerTrigger.tsx
10705
10705
  var import_jsx_runtime239 = require("react/jsx-runtime");
@@ -10739,7 +10739,7 @@ var ColorPickerTrigger = (0, import_react44.forwardRef)(
10739
10739
  );
10740
10740
  }
10741
10741
  );
10742
- ColorPickerTrigger.displayName = "ColorPickerTrigger_UI";
10742
+ ColorPickerTrigger.displayName = "ColorPickerTrigger";
10743
10743
 
10744
10744
  // src/components/ColorPicker/ContrastIndicator.tsx
10745
10745
  var import_styled_components57 = __toESM(require("styled-components"));
@@ -10960,7 +10960,7 @@ var Switch = (0, import_react45.forwardRef)(
10960
10960
  ] });
10961
10961
  }
10962
10962
  );
10963
- Switch.displayName = "Switch_UI";
10963
+ Switch.displayName = "Switch";
10964
10964
 
10965
10965
  // src/components/ColorPicker/ContrastEnforcerSwitch.tsx
10966
10966
  var import_jsx_runtime242 = require("react/jsx-runtime");
@@ -11023,7 +11023,7 @@ var ContrastControls = () => {
11023
11023
  /* @__PURE__ */ (0, import_jsx_runtime244.jsx)(ContrastEnforcerSwitch, {})
11024
11024
  ] });
11025
11025
  };
11026
- ContrastControls.displayName = "ContrastControls_UI";
11026
+ ContrastControls.displayName = "ContrastControls";
11027
11027
 
11028
11028
  // src/components/ColorPicker/HexColorInput.tsx
11029
11029
  var import_react48 = require("react");
@@ -11233,7 +11233,7 @@ var Input = (0, import_react47.forwardRef)(
11233
11233
  );
11234
11234
  }
11235
11235
  );
11236
- Input.displayName = "Input_UI";
11236
+ Input.displayName = "Input";
11237
11237
 
11238
11238
  // src/components/ColorPicker/HexColorInput.tsx
11239
11239
  var import_jsx_runtime246 = require("react/jsx-runtime");
@@ -11396,7 +11396,7 @@ var HexColorInput = ({ autoFocus = true }) => {
11396
11396
  }
11397
11397
  );
11398
11398
  };
11399
- HexColorInput.displayName = "HexColorInput_UI";
11399
+ HexColorInput.displayName = "HexColorInput";
11400
11400
 
11401
11401
  // src/components/ColorPicker/HueSlider.tsx
11402
11402
  var import_react50 = require("react");
@@ -11533,7 +11533,7 @@ var HueSlider = () => {
11533
11533
  /* @__PURE__ */ (0, import_jsx_runtime248.jsx)(HSVHueCanvas, { hsv: valueAsHsv })
11534
11534
  ] });
11535
11535
  };
11536
- HueSlider.displayName = "HueSlider_UI";
11536
+ HueSlider.displayName = "HueSlider";
11537
11537
 
11538
11538
  // src/components/ColorPicker/SaturationAndValuePicker.tsx
11539
11539
  var import_react52 = require("react");
@@ -11905,7 +11905,7 @@ var SaturationAndValuePicker = ({
11905
11905
  )
11906
11906
  );
11907
11907
  };
11908
- SaturationAndValuePicker.displayName = "SaturationAndValuePicker_UI";
11908
+ SaturationAndValuePicker.displayName = "SaturationAndValuePicker";
11909
11909
 
11910
11910
  // src/components/Combobox/Combobox.tsx
11911
11911
  var Ariakit = __toESM(require("@ariakit/react"));
@@ -12066,7 +12066,7 @@ var Tag = (0, import_react53.forwardRef)(
12066
12066
  );
12067
12067
  }
12068
12068
  );
12069
- Tag.displayName = "Tag_UI";
12069
+ Tag.displayName = "Tag";
12070
12070
 
12071
12071
  // src/components/Combobox/Combobox.tsx
12072
12072
  var import_jsx_runtime252 = require("react/jsx-runtime");
@@ -12332,11 +12332,6 @@ var StyledDataCard = import_styled_components67.default.div`
12332
12332
  position: relative;
12333
12333
  transition: background var(--wui-motion-duration-01) var(--wui-motion-ease);
12334
12334
 
12335
- &:has([data-wui-data-card-subtitle]) {
12336
- grid-template-areas: 'label slot' 'value value' 'subtitle subtitle';
12337
- grid-template-rows: auto auto auto;
12338
- }
12339
-
12340
12335
  &[data-click-region] {
12341
12336
  [data-wui-data-card-hover-icon] {
12342
12337
  opacity: 0;
@@ -12423,9 +12418,6 @@ var StyledDataCardTrendContainer = import_styled_components67.default.div`
12423
12418
  bottom: var(--wui-space-01);
12424
12419
  right: var(--wui-space-01);
12425
12420
  `;
12426
- var StyledSubtitle = (0, import_styled_components67.default)(Text)`
12427
- grid-area: subtitle;
12428
- `;
12429
12421
  var DataCardInner = ({
12430
12422
  label,
12431
12423
  value,
@@ -12433,7 +12425,6 @@ var DataCardInner = ({
12433
12425
  colorScheme = "inherit",
12434
12426
  isLoading = false,
12435
12427
  trend,
12436
- subtitle,
12437
12428
  ...props
12438
12429
  }) => /* @__PURE__ */ (0, import_jsx_runtime253.jsxs)(
12439
12430
  StyledDataCard,
@@ -12457,16 +12448,8 @@ var DataCardInner = ({
12457
12448
  children: isLoading ? /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(StyledLoadingValue, {}) : value
12458
12449
  }
12459
12450
  ),
12460
- (0, import_type_guards37.isNotNil)(upperRightSlot) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(StyledSlot, { children: upperRightSlot }),
12461
- (0, import_type_guards37.isNotNil)(subtitle) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(
12462
- StyledSubtitle,
12463
- {
12464
- "data-wui-data-card-subtitle": true,
12465
- variant: "label4",
12466
- children: subtitle
12467
- }
12468
- ),
12469
- (0, import_type_guards37.isNotNil)(trend) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(StyledDataCardTrendContainer, { children: trend })
12451
+ (0, import_type_guards37.isNotNull)(upperRightSlot) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(StyledSlot, { children: upperRightSlot }),
12452
+ (0, import_type_guards37.isNotNull)(trend) && !isLoading && /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(StyledDataCardTrendContainer, { children: trend })
12470
12453
  ]
12471
12454
  }
12472
12455
  );
@@ -12503,7 +12486,7 @@ var DataCard = (props) => {
12503
12486
  }
12504
12487
  return /* @__PURE__ */ (0, import_jsx_runtime253.jsx)(DataCardInner, { ...props });
12505
12488
  };
12506
- DataCard.displayName = "DataCard_UI";
12489
+ DataCard.displayName = "DataCard";
12507
12490
 
12508
12491
  // src/components/DataCards/DataCards.tsx
12509
12492
  var import_styled_components68 = __toESM(require("styled-components"));
@@ -12528,7 +12511,6 @@ var DataCards = ({
12528
12511
  ...props,
12529
12512
  $cardMaxWidth: cardMaxWidth,
12530
12513
  $colorScheme: colorScheme,
12531
- alignItems: "stretch",
12532
12514
  direction: "row",
12533
12515
  fill: "horizontal",
12534
12516
  gap: "space-02",
@@ -12538,7 +12520,7 @@ var DataCards = ({
12538
12520
  }
12539
12521
  );
12540
12522
  };
12541
- DataCards.displayName = "DataCards_UI";
12523
+ DataCards.displayName = "DataCards";
12542
12524
 
12543
12525
  // src/components/DataCards/DataCardTrend.tsx
12544
12526
  var import_styled_components69 = __toESM(require("styled-components"));
@@ -12616,7 +12598,7 @@ var Divider = ({ orientation = "horizontal", ...props }) => {
12616
12598
  }
12617
12599
  );
12618
12600
  };
12619
- Divider.displayName = "Divider_UI";
12601
+ Divider.displayName = "Divider";
12620
12602
 
12621
12603
  // src/components/EditableHeading/EditableHeading.tsx
12622
12604
  var import_styled_components71 = __toESM(require("styled-components"));
@@ -12890,7 +12872,7 @@ var Label = ({
12890
12872
  }
12891
12873
  );
12892
12874
  };
12893
- Label.displayName = "Label_UI";
12875
+ Label.displayName = "Label";
12894
12876
 
12895
12877
  // src/components/FormField/FormField.tsx
12896
12878
  var import_jsx_runtime260 = require("react/jsx-runtime");
@@ -13048,7 +13030,7 @@ var FormField = ({
13048
13030
  }
13049
13031
  );
13050
13032
  };
13051
- FormField.displayName = "FormField_UI";
13033
+ FormField.displayName = "FormField";
13052
13034
 
13053
13035
  // src/components/FormGroup/RadioGroup.tsx
13054
13036
  var import_react60 = require("react");
@@ -13075,7 +13057,7 @@ var RadioGroup = ({
13075
13057
  }, [name, derivedValue, onChange]);
13076
13058
  return /* @__PURE__ */ (0, import_jsx_runtime261.jsx)(RadioGroupContext.Provider, { value: context, children: /* @__PURE__ */ (0, import_jsx_runtime261.jsx)(FormGroup, { ...props, children }) });
13077
13059
  };
13078
- RadioGroup.displayName = "RadioGroup_UI";
13060
+ RadioGroup.displayName = "RadioGroup";
13079
13061
 
13080
13062
  // src/components/Grid/Grid.tsx
13081
13063
  var import_react61 = require("react");
@@ -13145,7 +13127,7 @@ var GridComponent = (0, import_react61.forwardRef)(
13145
13127
  );
13146
13128
  }
13147
13129
  );
13148
- GridComponent.displayName = "Grid_UI";
13130
+ GridComponent.displayName = "Grid";
13149
13131
  var Grid = makePolymorphic(GridComponent);
13150
13132
 
13151
13133
  // src/components/InputClickToCopy/InputClickToCopy.tsx
@@ -13210,7 +13192,7 @@ var InputClickToCopy = (0, import_react62.forwardRef)(
13210
13192
  );
13211
13193
  }
13212
13194
  );
13213
- InputClickToCopy.displayName = "InputClickToCopy_UI";
13195
+ InputClickToCopy.displayName = "InputClickToCopy";
13214
13196
 
13215
13197
  // src/components/KeyboardShortcut/KeyboardShortcut.tsx
13216
13198
  var import_styled_components76 = __toESM(require("styled-components"));
@@ -13319,7 +13301,7 @@ var KeyboardShortcut = ({
13319
13301
  ]
13320
13302
  }
13321
13303
  );
13322
- KeyboardShortcut.displayName = "KeyboardShortcut_UI";
13304
+ KeyboardShortcut.displayName = "KeyboardShortcut";
13323
13305
 
13324
13306
  // src/components/List/List.tsx
13325
13307
  var import_type_guards44 = require("@wistia/type-guards");
@@ -13338,7 +13320,7 @@ var ListItem = ({ children }) => {
13338
13320
  }
13339
13321
  return /* @__PURE__ */ (0, import_jsx_runtime265.jsx)(ListItemComponent, { children });
13340
13322
  };
13341
- ListItem.displayName = "ListItem_UI";
13323
+ ListItem.displayName = "ListItem";
13342
13324
 
13343
13325
  // src/components/List/List.tsx
13344
13326
  var import_jsx_runtime266 = require("react/jsx-runtime");
@@ -13477,7 +13459,7 @@ var List = ({
13477
13459
  }
13478
13460
  return null;
13479
13461
  };
13480
- List.displayName = "List_UI";
13462
+ List.displayName = "List";
13481
13463
 
13482
13464
  // src/components/Menu/Menu.tsx
13483
13465
  var import_react64 = require("react");
@@ -13642,8 +13624,8 @@ var Menu = (0, import_react64.forwardRef)(
13642
13624
  ) });
13643
13625
  }
13644
13626
  );
13645
- Menu.displayName = "Menu_UI";
13646
- Menu.displayName = "Menu_UI";
13627
+ Menu.displayName = "Menu";
13628
+ Menu.displayName = "Menu";
13647
13629
 
13648
13630
  // src/components/Menu/MenuLabel.tsx
13649
13631
  var import_styled_components80 = __toESM(require("styled-components"));
@@ -13670,7 +13652,7 @@ var MenuLabel = ({ children, ...props }) => {
13670
13652
  }
13671
13653
  );
13672
13654
  };
13673
- MenuLabel.displayName = "MenuLabel_UI";
13655
+ MenuLabel.displayName = "MenuLabel";
13674
13656
 
13675
13657
  // src/components/Menu/SubMenu.tsx
13676
13658
  var import_react66 = require("react");
@@ -13795,7 +13777,7 @@ var MenuItemButton = (0, import_react65.forwardRef)(({ children, appearance, com
13795
13777
  }
13796
13778
  );
13797
13779
  });
13798
- MenuItemButton.displayName = "MenuItemButton_UI";
13780
+ MenuItemButton.displayName = "MenuItemButton";
13799
13781
 
13800
13782
  // src/components/Menu/MenuItemLabelDescription.tsx
13801
13783
  var import_styled_components82 = __toESM(require("styled-components"));
@@ -13882,7 +13864,7 @@ var SubMenu = ({
13882
13864
  /* @__PURE__ */ (0, import_jsx_runtime271.jsx)(StyledMobileSubMenuItems, { children: isExpanded ? children : null })
13883
13865
  ] });
13884
13866
  };
13885
- SubMenu.displayName = "SubMenu_UI";
13867
+ SubMenu.displayName = "SubMenu";
13886
13868
 
13887
13869
  // src/components/Menu/MenuItem.tsx
13888
13870
  var import_react67 = require("react");
@@ -13907,7 +13889,7 @@ var MenuItem = (0, import_react67.forwardRef)(
13907
13889
  );
13908
13890
  }
13909
13891
  );
13910
- MenuItem.displayName = "MenuItem_UI";
13892
+ MenuItem.displayName = "MenuItem";
13911
13893
 
13912
13894
  // src/components/Menu/MenuRadioGroup.tsx
13913
13895
  var import_react_dropdown_menu5 = require("@radix-ui/react-dropdown-menu");
@@ -13915,7 +13897,7 @@ var import_jsx_runtime273 = require("react/jsx-runtime");
13915
13897
  var MenuRadioGroup = ({ children, ...props }) => {
13916
13898
  return /* @__PURE__ */ (0, import_jsx_runtime273.jsx)(import_react_dropdown_menu5.DropdownMenuRadioGroup, { ...props, children });
13917
13899
  };
13918
- MenuRadioGroup.displayName = "MenuRadioGroup_UI";
13900
+ MenuRadioGroup.displayName = "MenuRadioGroup";
13919
13901
 
13920
13902
  // src/components/Menu/RadioMenuItem.tsx
13921
13903
  var import_react_dropdown_menu6 = require("@radix-ui/react-dropdown-menu");
@@ -13949,7 +13931,7 @@ var RadioMenuItem = ({
13949
13931
  }
13950
13932
  );
13951
13933
  };
13952
- RadioMenuItem.displayName = "RadioMenuItem_UI";
13934
+ RadioMenuItem.displayName = "RadioMenuItem";
13953
13935
 
13954
13936
  // src/components/Menu/CheckboxMenuItem.tsx
13955
13937
  var import_react_dropdown_menu7 = require("@radix-ui/react-dropdown-menu");
@@ -14034,7 +14016,7 @@ var CheckboxMenuItem = ({
14034
14016
  }
14035
14017
  );
14036
14018
  };
14037
- CheckboxMenuItem.displayName = "CheckboxMenuItem_UI";
14019
+ CheckboxMenuItem.displayName = "CheckboxMenuItem";
14038
14020
 
14039
14021
  // src/components/Menu/FilterMenu.tsx
14040
14022
  var import_react68 = require("react");
@@ -14136,7 +14118,7 @@ var FilterMenu = (0, import_react68.forwardRef)(
14136
14118
  );
14137
14119
  }
14138
14120
  );
14139
- FilterMenu.displayName = "FilterMenu_UI";
14121
+ FilterMenu.displayName = "FilterMenu";
14140
14122
 
14141
14123
  // src/components/Modal/Modal.tsx
14142
14124
  var import_react71 = require("react");
@@ -14465,7 +14447,7 @@ var Modal = (0, import_react71.forwardRef)(
14465
14447
  );
14466
14448
  }
14467
14449
  );
14468
- Modal.displayName = "Modal_UI";
14450
+ Modal.displayName = "Modal";
14469
14451
 
14470
14452
  // src/components/Popover/Popover.tsx
14471
14453
  var import_react_popover5 = require("@radix-ui/react-popover");
@@ -14555,7 +14537,7 @@ var PopoverArrow = ({ isAnimated }) => {
14555
14537
  }
14556
14538
  ) });
14557
14539
  };
14558
- PopoverArrow.displayName = "PopoverArrow_UI";
14540
+ PopoverArrow.displayName = "PopoverArrow";
14559
14541
 
14560
14542
  // src/components/Popover/Popover.tsx
14561
14543
  var import_jsx_runtime282 = require("react/jsx-runtime");
@@ -14624,7 +14606,7 @@ var Popover2 = ({
14624
14606
  ) })
14625
14607
  ] });
14626
14608
  };
14627
- Popover2.displayName = "Popover_UI";
14609
+ Popover2.displayName = "Popover";
14628
14610
 
14629
14611
  // src/components/ProgressBar/ProgressBar.tsx
14630
14612
  var import_styled_components91 = __toESM(require("styled-components"));
@@ -14703,7 +14685,7 @@ var ProgressBar = ({
14703
14685
  (0, import_type_guards52.isNotNil)(labelRight) ? /* @__PURE__ */ (0, import_jsx_runtime283.jsx)(ProgressBarLabel, { children: labelRight }) : null
14704
14686
  ] });
14705
14687
  };
14706
- ProgressBar.displayName = "ProgressBar_UI";
14688
+ ProgressBar.displayName = "ProgressBar";
14707
14689
 
14708
14690
  // src/components/Radio/Radio.tsx
14709
14691
  var import_react72 = require("react");
@@ -14878,7 +14860,7 @@ var Radio = (0, import_react72.forwardRef)(
14878
14860
  );
14879
14861
  }
14880
14862
  );
14881
- Radio.displayName = "Radio_UI";
14863
+ Radio.displayName = "Radio";
14882
14864
 
14883
14865
  // src/components/RadioCard/RadioCard.tsx
14884
14866
  var import_react74 = require("react");
@@ -15042,7 +15024,7 @@ var RadioCardRoot = (0, import_react73.forwardRef)(
15042
15024
  );
15043
15025
  }
15044
15026
  );
15045
- RadioCardRoot.displayName = "RadioCardRoot_UI";
15027
+ RadioCardRoot.displayName = "RadioCardRoot";
15046
15028
 
15047
15029
  // src/components/RadioCard/RadioCardDefaultLayout.tsx
15048
15030
  var import_styled_components95 = __toESM(require("styled-components"));
@@ -15096,7 +15078,7 @@ var RadioCardIndicator = import_styled_components94.default.div`
15096
15078
  --wui-radio-card-indicator-background-color: var(--wui-color-bg-surface-disabled);
15097
15079
  }
15098
15080
  `;
15099
- RadioCardIndicator.displayName = "RadioCardIndicator_UI";
15081
+ RadioCardIndicator.displayName = "RadioCardIndicator";
15100
15082
 
15101
15083
  // src/components/RadioCard/RadioCardDefaultLayout.tsx
15102
15084
  var import_jsx_runtime286 = require("react/jsx-runtime");
@@ -15144,7 +15126,7 @@ var RadioCardDefaultLayout = ({
15144
15126
  ] })
15145
15127
  ] });
15146
15128
  };
15147
- RadioCardDefaultLayout.displayName = "RadioCardDefaultLayout_UI";
15129
+ RadioCardDefaultLayout.displayName = "RadioCardDefaultLayout";
15148
15130
 
15149
15131
  // src/components/RadioCard/RadioCard.tsx
15150
15132
  var import_jsx_runtime287 = require("react/jsx-runtime");
@@ -15168,7 +15150,7 @@ var RadioCard = (0, import_react74.forwardRef)(
15168
15150
  );
15169
15151
  }
15170
15152
  );
15171
- RadioCard.displayName = "RadioCard_UI";
15153
+ RadioCard.displayName = "RadioCard";
15172
15154
 
15173
15155
  // src/components/RadioCard/RadioCardImage.tsx
15174
15156
  var import_react75 = require("react");
@@ -15196,7 +15178,7 @@ var RadioCardImage = (0, import_react75.forwardRef)(
15196
15178
  );
15197
15179
  }
15198
15180
  );
15199
- RadioCardImage.displayName = "RadioCardImage_UI";
15181
+ RadioCardImage.displayName = "RadioCardImage";
15200
15182
 
15201
15183
  // src/components/SegmentedControl/SegmentedControl.tsx
15202
15184
  var import_react78 = require("react");
@@ -15333,7 +15315,7 @@ var SegmentedControl = (0, import_react78.forwardRef)(
15333
15315
  );
15334
15316
  }
15335
15317
  );
15336
- SegmentedControl.displayName = "SegmentedControl_UI";
15318
+ SegmentedControl.displayName = "SegmentedControl";
15337
15319
 
15338
15320
  // src/components/SegmentedControl/SegmentedControlItem.tsx
15339
15321
  var import_react79 = require("react");
@@ -15467,7 +15449,7 @@ var SegmentedControlItem = (0, import_react79.forwardRef)(
15467
15449
  );
15468
15450
  }
15469
15451
  );
15470
- SegmentedControlItem.displayName = "SegmentedControlItem_UI";
15452
+ SegmentedControlItem.displayName = "SegmentedControlItem";
15471
15453
 
15472
15454
  // src/components/Select/Select.tsx
15473
15455
  var import_react_select = require("@radix-ui/react-select");
@@ -15581,7 +15563,7 @@ var Select = (0, import_react80.forwardRef)(
15581
15563
  );
15582
15564
  }
15583
15565
  );
15584
- Select.displayName = "Select_UI";
15566
+ Select.displayName = "Select";
15585
15567
 
15586
15568
  // src/components/Select/SelectOption.tsx
15587
15569
  var import_react_select2 = require("@radix-ui/react-select");
@@ -15640,7 +15622,7 @@ var SelectOption = (0, import_react81.forwardRef)(
15640
15622
  );
15641
15623
  }
15642
15624
  );
15643
- SelectOption.displayName = "SelectOption_UI";
15625
+ SelectOption.displayName = "SelectOption";
15644
15626
 
15645
15627
  // src/components/Select/SelectOptionGroup.tsx
15646
15628
  var import_react_select3 = require("@radix-ui/react-select");
@@ -15788,7 +15770,7 @@ var Slider = ({
15788
15770
  }
15789
15771
  );
15790
15772
  };
15791
- Slider.displayName = "Slider_UI";
15773
+ Slider.displayName = "Slider";
15792
15774
 
15793
15775
  // src/components/Table/Table.tsx
15794
15776
  var import_styled_components103 = __toESM(require("styled-components"));
@@ -15949,7 +15931,7 @@ var Tabs = ({
15949
15931
  }
15950
15932
  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 }) }) });
15951
15933
  };
15952
- Tabs.displayName = "Tabs_UI";
15934
+ Tabs.displayName = "Tabs";
15953
15935
 
15954
15936
  // src/components/Tabs/TabsContent.tsx
15955
15937
  var import_react_tabs2 = require("@radix-ui/react-tabs");
@@ -15957,7 +15939,7 @@ var import_jsx_runtime304 = require("react/jsx-runtime");
15957
15939
  var TabsContent = ({ children, value }) => {
15958
15940
  return /* @__PURE__ */ (0, import_jsx_runtime304.jsx)(import_react_tabs2.Content, { value, children });
15959
15941
  };
15960
- TabsContent.displayName = "TabsContent_UI";
15942
+ TabsContent.displayName = "TabsContent";
15961
15943
 
15962
15944
  // src/components/Tabs/TabsList.tsx
15963
15945
  var import_react_tabs3 = require("@radix-ui/react-tabs");
@@ -16009,7 +15991,7 @@ var TabsList = ({ children, fullWidth = true, ...props }) => {
16009
15991
  }
16010
15992
  );
16011
15993
  };
16012
- TabsList.displayName = "TabsList_UI";
15994
+ TabsList.displayName = "TabsList";
16013
15995
 
16014
15996
  // src/components/Tabs/TabsTrigger.tsx
16015
15997
  var import_react86 = require("react");
@@ -16076,7 +16058,7 @@ var TabsTrigger = (0, import_react86.forwardRef)(
16076
16058
  );
16077
16059
  }
16078
16060
  );
16079
- TabsTrigger.displayName = "TabsTrigger_UI";
16061
+ TabsTrigger.displayName = "TabsTrigger";
16080
16062
 
16081
16063
  // src/components/Thumbnail/ThumbnailBadge.tsx
16082
16064
  var import_styled_components112 = __toESM(require("styled-components"));
@@ -16112,7 +16094,7 @@ var ThumbnailBadge = ({ icon, label, ...props }) => {
16112
16094
  /* @__PURE__ */ (0, import_jsx_runtime308.jsx)("span", { children: label })
16113
16095
  ] });
16114
16096
  };
16115
- ThumbnailBadge.displayName = "ThumbnailBadge_UI";
16097
+ ThumbnailBadge.displayName = "ThumbnailBadge";
16116
16098
 
16117
16099
  // src/components/Thumbnail/Thumbnail.tsx
16118
16100
  var import_react87 = require("react");
@@ -16555,7 +16537,7 @@ var Thumbnail = (0, import_react87.forwardRef)(
16555
16537
  );
16556
16538
  }
16557
16539
  );
16558
- Thumbnail.displayName = "Thumbnail_UI";
16540
+ Thumbnail.displayName = "Thumbnail";
16559
16541
 
16560
16542
  // src/components/ThumbnailCollage/ThumbnailCollage.tsx
16561
16543
  var import_react88 = __toESM(require("react"));
@@ -16789,7 +16771,7 @@ var WistiaLogo = ({
16789
16771
  );
16790
16772
  return href !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime312.jsx)("a", { href, children: Logo }) : Logo;
16791
16773
  };
16792
- WistiaLogo.displayName = "WistiaLogo_UI";
16774
+ WistiaLogo.displayName = "WistiaLogo";
16793
16775
 
16794
16776
  // src/components/InputPassword/InputPassword.tsx
16795
16777
  var import_styled_components118 = __toESM(require("styled-components"));
@@ -16836,7 +16818,7 @@ var InputPassword = (0, import_react89.forwardRef)(
16836
16818
  );
16837
16819
  }
16838
16820
  );
16839
- InputPassword.displayName = "InputPassword_UI";
16821
+ InputPassword.displayName = "InputPassword";
16840
16822
 
16841
16823
  // src/components/ContextMenu/ContextMenu.tsx
16842
16824
  var import_react90 = require("react");