@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 +10 -40
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.mts +2 -2
- package/dist/index.d.ts +2 -2
- package/dist/index.mjs +10 -40
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.cjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
/*
|
|
3
|
-
* @license @wistia/ui v0.18.
|
|
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 = "
|
|
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 === "
|
|
9276
|
+
return !shouldShowImage && prominence === "primary" && !isSmallContainer && !isVerticalLayout ? "row" : "column";
|
|
9277
9277
|
}, [orientation, shouldShowImage, prominence, isSmallContainer, isVerticalLayout, hasActions]);
|
|
9278
|
-
const headingVariant = isSmallContainer || prominence === "
|
|
9279
|
-
const textVariant = prominence === "
|
|
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
|
-
|
|
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: "
|
|
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: "
|
|
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-
|
|
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-
|
|
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 = [],
|