@wistia/ui 0.18.5-beta.9ab561d6.6f99781 → 0.18.6

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.18.5-beta.9ab561d6.6f99781
3
+ * @license @wistia/ui v0.18.6
4
4
  *
5
5
  * Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
6
6
  *
@@ -9248,7 +9248,7 @@ var Banner = ({
9248
9248
  onClose,
9249
9249
  orientation = "horizontal",
9250
9250
  primaryAction,
9251
- prominence = "default",
9251
+ prominence = "primary",
9252
9252
  secondaryAction,
9253
9253
  ...props
9254
9254
  }) => {
@@ -9273,10 +9273,10 @@ var Banner = ({
9273
9273
  const hasActions = (0, import_type_guards25.isNotNil)(primaryAction) || (0, import_type_guards25.isNotNil)(secondaryAction);
9274
9274
  const contentDirection = (0, import_react31.useMemo)(() => {
9275
9275
  if (orientation === "horizontal" && !hasActions) return "row";
9276
- return !shouldShowImage && prominence === "default" && !isSmallContainer && !isVerticalLayout ? "row" : "column";
9276
+ return !shouldShowImage && prominence === "primary" && !isSmallContainer && !isVerticalLayout ? "row" : "column";
9277
9277
  }, [orientation, shouldShowImage, prominence, isSmallContainer, isVerticalLayout, hasActions]);
9278
- const headingVariant = isSmallContainer || prominence === "default" ? "heading5" : "heading3";
9279
- const textVariant = prominence === "default" || isSmallContainer ? "body3" : "body2";
9278
+ const headingVariant = isSmallContainer || prominence === "primary" ? "heading5" : "heading3";
9279
+ const textVariant = prominence === "primary" || isSmallContainer ? "body3" : "body2";
9280
9280
  const buttonSize = isSmallContainer ? "sm" : "md";
9281
9281
  return /* @__PURE__ */ (0, import_jsx_runtime211.jsxs)(
9282
9282
  StyledBanner,
@@ -9541,7 +9541,7 @@ var StyledCard = (0, import_styled_components37.styled)(Box)`
9541
9541
  width: ${({ $width }) => $width};
9542
9542
  `;
9543
9543
  var prominenceMap = {
9544
- default: {
9544
+ primary: {
9545
9545
  backgroundColor: "var(--wui-color-bg-surface)",
9546
9546
  borderColor: "var(--wui-color-border)"
9547
9547
  },
@@ -13742,7 +13742,7 @@ var FilterMenu = (0, import_react60.forwardRef)(
13742
13742
  border: false,
13743
13743
  borderRadius: "border-radius-02",
13744
13744
  paddingSize: "space-01",
13745
- prominence: "default",
13745
+ prominence: "primary",
13746
13746
  style: {
13747
13747
  position: "absolute",
13748
13748
  top: 0,
@@ -13797,7 +13797,7 @@ var FilterMenu = (0, import_react60.forwardRef)(
13797
13797
  border: false,
13798
13798
  borderRadius: "border-radius-02",
13799
13799
  paddingSize: "space-01",
13800
- prominence: "default",
13800
+ prominence: "primary",
13801
13801
  style: {
13802
13802
  position: "absolute",
13803
13803
  bottom: 0,
@@ -18155,11 +18155,6 @@ var StyledThumbnailContainer = import_styled_components127.styled.div`
18155
18155
  `;
18156
18156
  var StyledThumbnail = import_styled_components127.styled.div`
18157
18157
  --wui-thumbnail-badge-offset: var(--wui-space-01);
18158
- --wui-thumbnail-border-radius: clamp(
18159
- var(--wui-border-radius-01),
18160
- calc(8cqh - var(--wui-thumbnail-collage-padding, 0px)),
18161
- var(--wui-border-radius-05)
18162
- );
18163
18158
 
18164
18159
  background-image: ${({ $backgroundUrl }) => (0, import_type_guards74.isNotNil)($backgroundUrl) ? `url('${$backgroundUrl}')` : void 0};
18165
18160
  ${({ $backgroundUrl, $gradientBackground }) => (
@@ -18172,22 +18167,7 @@ var StyledThumbnail = import_styled_components127.styled.div`
18172
18167
  width: 100%;
18173
18168
  overflow: hidden;
18174
18169
  position: relative;
18175
- border-radius: var(--wui-thumbnail-border-radius);
18176
- box-shadow: inset 0 0 0 1px var(--wui-thumbnail-collage-border-color);
18177
-
18178
- &,
18179
- img,
18180
- &::after {
18181
- border-radius: var(--wui-thumbnail-border-radius);
18182
- }
18183
-
18184
- &::after {
18185
- content: '';
18186
- position: absolute;
18187
- inset: 0;
18188
- box-shadow: inset 0 0 0 1px var(--wui-thumbnail-collage-border-color);
18189
- border-radius: var(--wui-thumbnail-border-radius);
18190
- }
18170
+ border-radius: clamp(var(--wui-border-radius-01), 8cqh, var(--wui-border-radius-05));
18191
18171
 
18192
18172
  @container (min-width: 200px) {
18193
18173
  --wui-thumbnail-badge-offset: var(--wui-space-02);
@@ -18358,17 +18338,11 @@ var ThumbnailCollageContainer = import_styled_components128.styled.div`
18358
18338
  display: flex;
18359
18339
  `;
18360
18340
  var StyledThumbnailCollage = import_styled_components128.styled.div`
18361
- --wui-thumbnail-collage-border-color: rgba(0, 0, 0, 0.05);
18362
- --wui-thumbnail-collage-padding: var(--wui-space-01);
18363
- padding: var(--wui-thumbnail-collage-padding);
18364
- background-color: var(--wui-color-bg-surface-tertiary);
18365
- border-radius: clamp(var(--wui-border-radius-01), 8cqh, var(--wui-border-radius-05));
18366
18341
  display: grid;
18367
- gap: var(--wui-thumbnail-collage-padding);
18342
+ gap: var(--wui-space-01);
18368
18343
  width: 100%;
18369
18344
  grid-template-columns: 3fr 2fr;
18370
18345
  grid-template-rows: 1fr 1fr;
18371
- border: 1px solid var(--wui-thumbnail-collage-border-color);
18372
18346
 
18373
18347
  &:has(:nth-child(1)) {
18374
18348
  grid-template-areas:
@@ -18406,10 +18380,6 @@ var StyledThumbnailCollage = import_styled_components128.styled.div`
18406
18380
  height: 100%;
18407
18381
  width: 100%;
18408
18382
  }
18409
-
18410
- @container (min-width: 200px) {
18411
- --wui-thumbnail-collage-padding: var(--wui-space-02);
18412
- }
18413
18383
  `;
18414
18384
  var ThumbnailCollage = ({
18415
18385
  children = [],