@wistia/ui 0.18.4-beta.a529e874.9a0f097 → 0.18.5-beta.381ae596.eae34a3
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 +9 -13
- 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 +9 -13
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.d.mts
CHANGED
|
@@ -633,7 +633,7 @@ type BannerProps = ComponentPropsWithoutRef<'div'> & {
|
|
|
633
633
|
/**
|
|
634
634
|
* Controls the visual prominence of the banner
|
|
635
635
|
*/
|
|
636
|
-
prominence?: '
|
|
636
|
+
prominence?: 'primary' | 'secondary';
|
|
637
637
|
colorScheme?: ColorSchemeTypes;
|
|
638
638
|
/**
|
|
639
639
|
* Optional image element to display in the banner
|
|
@@ -950,7 +950,7 @@ type CardProps = BoxProps & ComponentPropsWithoutRef<'div'> & {
|
|
|
950
950
|
/**
|
|
951
951
|
* Specifies the background and border color of the card.
|
|
952
952
|
*/
|
|
953
|
-
prominence?: '
|
|
953
|
+
prominence?: 'primary' | 'secondary' | 'tertiary';
|
|
954
954
|
/**
|
|
955
955
|
* Determines the color scheme for the card and its children.
|
|
956
956
|
*/
|
package/dist/index.d.ts
CHANGED
|
@@ -633,7 +633,7 @@ type BannerProps = ComponentPropsWithoutRef<'div'> & {
|
|
|
633
633
|
/**
|
|
634
634
|
* Controls the visual prominence of the banner
|
|
635
635
|
*/
|
|
636
|
-
prominence?: '
|
|
636
|
+
prominence?: 'primary' | 'secondary';
|
|
637
637
|
colorScheme?: ColorSchemeTypes;
|
|
638
638
|
/**
|
|
639
639
|
* Optional image element to display in the banner
|
|
@@ -950,7 +950,7 @@ type CardProps = BoxProps & ComponentPropsWithoutRef<'div'> & {
|
|
|
950
950
|
/**
|
|
951
951
|
* Specifies the background and border color of the card.
|
|
952
952
|
*/
|
|
953
|
-
prominence?: '
|
|
953
|
+
prominence?: 'primary' | 'secondary' | 'tertiary';
|
|
954
954
|
/**
|
|
955
955
|
* Determines the color scheme for the card and its children.
|
|
956
956
|
*/
|
package/dist/index.mjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
|
|
2
2
|
/*
|
|
3
|
-
* @license @wistia/ui v0.18.
|
|
3
|
+
* @license @wistia/ui v0.18.5-beta.381ae596.eae34a3
|
|
4
4
|
*
|
|
5
5
|
* Copyright (c) 2024-2025, Wistia, Inc. and its affiliates.
|
|
6
6
|
*
|
|
@@ -9067,7 +9067,7 @@ var Banner = ({
|
|
|
9067
9067
|
onClose,
|
|
9068
9068
|
orientation = "horizontal",
|
|
9069
9069
|
primaryAction,
|
|
9070
|
-
prominence = "
|
|
9070
|
+
prominence = "primary",
|
|
9071
9071
|
secondaryAction,
|
|
9072
9072
|
...props
|
|
9073
9073
|
}) => {
|
|
@@ -9092,10 +9092,10 @@ var Banner = ({
|
|
|
9092
9092
|
const hasActions = isNotNil13(primaryAction) || isNotNil13(secondaryAction);
|
|
9093
9093
|
const contentDirection = useMemo5(() => {
|
|
9094
9094
|
if (orientation === "horizontal" && !hasActions) return "row";
|
|
9095
|
-
return !shouldShowImage && prominence === "
|
|
9095
|
+
return !shouldShowImage && prominence === "primary" && !isSmallContainer && !isVerticalLayout ? "row" : "column";
|
|
9096
9096
|
}, [orientation, shouldShowImage, prominence, isSmallContainer, isVerticalLayout, hasActions]);
|
|
9097
|
-
const headingVariant = isSmallContainer || prominence === "
|
|
9098
|
-
const textVariant = prominence === "
|
|
9097
|
+
const headingVariant = isSmallContainer || prominence === "primary" ? "heading5" : "heading3";
|
|
9098
|
+
const textVariant = prominence === "primary" || isSmallContainer ? "body3" : "body2";
|
|
9099
9099
|
const buttonSize = isSmallContainer ? "sm" : "md";
|
|
9100
9100
|
return /* @__PURE__ */ jsxs13(
|
|
9101
9101
|
StyledBanner,
|
|
@@ -9360,7 +9360,7 @@ var StyledCard = styled20(Box)`
|
|
|
9360
9360
|
width: ${({ $width }) => $width};
|
|
9361
9361
|
`;
|
|
9362
9362
|
var prominenceMap = {
|
|
9363
|
-
|
|
9363
|
+
primary: {
|
|
9364
9364
|
backgroundColor: "var(--wui-color-bg-surface)",
|
|
9365
9365
|
borderColor: "var(--wui-color-border)"
|
|
9366
9366
|
},
|
|
@@ -13591,7 +13591,7 @@ var FilterMenu = forwardRef20(
|
|
|
13591
13591
|
border: false,
|
|
13592
13592
|
borderRadius: "border-radius-02",
|
|
13593
13593
|
paddingSize: "space-01",
|
|
13594
|
-
prominence: "
|
|
13594
|
+
prominence: "primary",
|
|
13595
13595
|
style: {
|
|
13596
13596
|
position: "absolute",
|
|
13597
13597
|
top: 0,
|
|
@@ -13646,7 +13646,7 @@ var FilterMenu = forwardRef20(
|
|
|
13646
13646
|
border: false,
|
|
13647
13647
|
borderRadius: "border-radius-02",
|
|
13648
13648
|
paddingSize: "space-01",
|
|
13649
|
-
prominence: "
|
|
13649
|
+
prominence: "primary",
|
|
13650
13650
|
style: {
|
|
13651
13651
|
position: "absolute",
|
|
13652
13652
|
bottom: 0,
|
|
@@ -18037,11 +18037,7 @@ var StyledThumbnail = styled107.div`
|
|
|
18037
18037
|
width: 100%;
|
|
18038
18038
|
overflow: hidden;
|
|
18039
18039
|
position: relative;
|
|
18040
|
-
|
|
18041
|
-
&,
|
|
18042
|
-
img {
|
|
18043
|
-
border-radius: clamp(var(--wui-border-radius-01), 8cqh, var(--wui-border-radius-05));
|
|
18044
|
-
}
|
|
18040
|
+
border-radius: clamp(var(--wui-border-radius-01), 8cqh, var(--wui-border-radius-05));
|
|
18045
18041
|
|
|
18046
18042
|
@container (min-width: 200px) {
|
|
18047
18043
|
--wui-thumbnail-badge-offset: var(--wui-space-02);
|