@box/blueprint-web 12.103.3 → 12.104.1
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.
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
import '../index.css';
|
|
2
|
-
var styles = {"avatar":"bp_avatar_module_avatar--
|
|
2
|
+
var styles = {"avatar":"bp_avatar_module_avatar--59b07","small":"bp_avatar_module_small--59b07","length-1":"bp_avatar_module_length-1--59b07","text":"bp_avatar_module_text--59b07","length-2":"bp_avatar_module_length-2--59b07","medium":"bp_avatar_module_medium--59b07","large":"bp_avatar_module_large--59b07","length-3":"bp_avatar_module_length-3--59b07","length-4":"bp_avatar_module_length-4--59b07","xlarge":"bp_avatar_module_xlarge--59b07","xxlarge":"bp_avatar_module_xxlarge--59b07","badge":"bp_avatar_module_badge--59b07","image":"bp_avatar_module_image--59b07","loading":"bp_avatar_module_loading--59b07","anonymousAvatar":"bp_avatar_module_anonymousAvatar--59b07","iconContainer":"bp_avatar_module_iconContainer--59b07"};
|
|
3
3
|
|
|
4
4
|
export { styles as default };
|
|
@@ -7,6 +7,7 @@ import noop from 'lodash/noop';
|
|
|
7
7
|
import { DropdownMenu } from '../primitives/dropdown-menu/index.js';
|
|
8
8
|
import { IconButton } from '../primitives/icon-button/icon-button.js';
|
|
9
9
|
import { Text } from '../text/text.js';
|
|
10
|
+
import { useBreakpoint, Breakpoint } from '../utils/useBreakpoint.js';
|
|
10
11
|
import { PageLink } from './page-link.js';
|
|
11
12
|
import styles from './breadcrumb.module.js';
|
|
12
13
|
import { getSeparatorSize } from './utils.js';
|
|
@@ -19,6 +20,7 @@ const Breadcrumb = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
19
20
|
rootIconAriaLabel,
|
|
20
21
|
rootIconVariant,
|
|
21
22
|
isInteractive = true,
|
|
23
|
+
isResponsiveEnabled,
|
|
22
24
|
size = 'medium',
|
|
23
25
|
truncationMethod = 'ellipsis',
|
|
24
26
|
onPageLinkClick = noop,
|
|
@@ -27,9 +29,15 @@ const Breadcrumb = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
27
29
|
const handlePageLinkClick = useCallback(crumbId => () => {
|
|
28
30
|
onPageLinkClick(crumbId);
|
|
29
31
|
}, [onPageLinkClick]);
|
|
32
|
+
// Responsive detection: mobile/tablet takes priority over consumer-controlled truncationMethod
|
|
33
|
+
const breakpoint = useBreakpoint();
|
|
34
|
+
const isMobile = isResponsiveEnabled || breakpoint <= Breakpoint.Medium;
|
|
30
35
|
// If there are more than 7 crumbs, break up crumbs into first link, ellipsis icon button, and current page ancestor
|
|
31
36
|
const shouldTruncateCrumbs = crumbs?.length > 7;
|
|
32
|
-
const shouldUseEllipsisTruncation = truncationMethod === 'ellipsis' && shouldTruncateCrumbs && crumbs;
|
|
37
|
+
const shouldUseEllipsisTruncation = !isMobile && truncationMethod === 'ellipsis' && shouldTruncateCrumbs && crumbs;
|
|
38
|
+
// Get the current page (last crumb) and all ancestors (all crumbs except last)
|
|
39
|
+
const currentPage = crumbs?.[crumbs.length - 1];
|
|
40
|
+
const ancestorCrumbs = crumbs?.slice(0, -1);
|
|
33
41
|
return jsx("nav", {
|
|
34
42
|
ref: forwardedRef,
|
|
35
43
|
"aria-label": breadcrumbAriaLabel,
|
|
@@ -37,7 +45,7 @@ const Breadcrumb = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
37
45
|
...rest,
|
|
38
46
|
children: jsxs("ol", {
|
|
39
47
|
className: styles.breadcrumb,
|
|
40
|
-
children: [rootIconVariant && jsxs("li", {
|
|
48
|
+
children: [!isMobile && rootIconVariant && jsxs("li", {
|
|
41
49
|
className: styles.pageLink,
|
|
42
50
|
children: [rootIconVariant === 'home' ? jsx(Home, {
|
|
43
51
|
"aria-label": rootIconAriaLabel
|
|
@@ -48,6 +56,38 @@ const Breadcrumb = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
48
56
|
role: "presentation",
|
|
49
57
|
width: getSeparatorSize(size)
|
|
50
58
|
})]
|
|
59
|
+
}), isMobile && crumbs && currentPage && jsxs(Fragment, {
|
|
60
|
+
children: [jsxs("li", {
|
|
61
|
+
className: styles.pageLink,
|
|
62
|
+
children: [jsxs(DropdownMenu.Root, {
|
|
63
|
+
children: [jsx(DropdownMenu.Trigger, {
|
|
64
|
+
children: jsx(IconButton, {
|
|
65
|
+
"aria-label": truncatedLinksIconAriaLabel,
|
|
66
|
+
icon: FolderTree,
|
|
67
|
+
size: "small"
|
|
68
|
+
})
|
|
69
|
+
}), jsx(DropdownMenu.Content, {
|
|
70
|
+
align: "start",
|
|
71
|
+
children: ancestorCrumbs?.map(crumb => jsx(DropdownMenu.Item, {
|
|
72
|
+
onSelect: handlePageLinkClick(crumb.id),
|
|
73
|
+
children: jsx(Text, {
|
|
74
|
+
as: "span",
|
|
75
|
+
children: crumb.name
|
|
76
|
+
})
|
|
77
|
+
}, crumb.id))
|
|
78
|
+
})]
|
|
79
|
+
}), jsx(PointerRight, {
|
|
80
|
+
height: getSeparatorSize(size),
|
|
81
|
+
role: "presentation",
|
|
82
|
+
width: getSeparatorSize(size)
|
|
83
|
+
})]
|
|
84
|
+
}), jsx(PageLink, {
|
|
85
|
+
crumb: currentPage,
|
|
86
|
+
isInteractive: isInteractive,
|
|
87
|
+
isLast: true,
|
|
88
|
+
onPageLinkClick: onPageLinkClick,
|
|
89
|
+
size: size
|
|
90
|
+
})]
|
|
51
91
|
}), shouldUseEllipsisTruncation && jsxs(Fragment, {
|
|
52
92
|
children: [jsx(PageLink, {
|
|
53
93
|
crumb: crumbs[0],
|
|
@@ -61,7 +101,6 @@ const Breadcrumb = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
61
101
|
children: [jsx(DropdownMenu.Trigger, {
|
|
62
102
|
children: jsx(IconButton, {
|
|
63
103
|
"aria-label": truncatedLinksIconAriaLabel,
|
|
64
|
-
className: styles.iconButtonInline,
|
|
65
104
|
icon: Ellipsis,
|
|
66
105
|
size: "small"
|
|
67
106
|
})
|
|
@@ -89,13 +128,13 @@ const Breadcrumb = /*#__PURE__*/forwardRef((props, forwardedRef) => {
|
|
|
89
128
|
onPageLinkClick: onPageLinkClick,
|
|
90
129
|
size: size
|
|
91
130
|
}), jsx(PageLink, {
|
|
92
|
-
crumb:
|
|
131
|
+
crumb: currentPage,
|
|
93
132
|
isInteractive: isInteractive,
|
|
94
133
|
isLast: true,
|
|
95
134
|
onPageLinkClick: onPageLinkClick,
|
|
96
135
|
size: size
|
|
97
136
|
})]
|
|
98
|
-
}), !shouldUseEllipsisTruncation && crumbs?.map((crumb, index) => {
|
|
137
|
+
}), !isMobile && !shouldUseEllipsisTruncation && crumbs?.map((crumb, index) => {
|
|
99
138
|
return jsx(PageLink, {
|
|
100
139
|
crumb: crumb,
|
|
101
140
|
isInteractive: isInteractive,
|
|
@@ -15,6 +15,8 @@ export type BreadcrumbProps = {
|
|
|
15
15
|
crumbs: Crumb[];
|
|
16
16
|
/** Controls whether individual crumbs (items) and icons are interactive, or clickable. */
|
|
17
17
|
isInteractive?: boolean;
|
|
18
|
+
/** Forces responsive view regardless of viewport size. Useful for testing. */
|
|
19
|
+
isResponsiveEnabled?: boolean;
|
|
18
20
|
/** Callback for breadcrumb click. Used to trigger navigation to the clicked folder. */
|
|
19
21
|
onPageLinkClick?: (id: string) => void;
|
|
20
22
|
/** Controls the height and width of icons and crumbs. */
|
package/dist/lib-esm/index.css
CHANGED
|
@@ -1431,7 +1431,7 @@
|
|
|
1431
1431
|
.bp_accordion_module_accordionTrigger--d80a5[data-state=open] .bp_accordion_module_accordionTriggerIcon--d80a5{
|
|
1432
1432
|
transform:var(--accordion-trigger-icon-transform-expanded);
|
|
1433
1433
|
}
|
|
1434
|
-
.bp_avatar_module_avatar--
|
|
1434
|
+
.bp_avatar_module_avatar--59b07[data-modern=false]{
|
|
1435
1435
|
--avatar-background-color:var(--gray-10);
|
|
1436
1436
|
--avatar-small-width:var(--size-6);
|
|
1437
1437
|
--avatar-small-height:var(--size-6);
|
|
@@ -1452,7 +1452,7 @@
|
|
|
1452
1452
|
text-decoration:var(--body-default-bold-text-decoration);
|
|
1453
1453
|
text-transform:var(--body-default-bold-text-case);
|
|
1454
1454
|
}
|
|
1455
|
-
.bp_avatar_module_avatar--
|
|
1455
|
+
.bp_avatar_module_avatar--59b07[data-modern=false].bp_avatar_module_medium--59b07 .bp_avatar_module_text--59b07,.bp_avatar_module_avatar--59b07[data-modern=false].bp_avatar_module_small--59b07 .bp_avatar_module_length-1--59b07.bp_avatar_module_text--59b07,.bp_avatar_module_avatar--59b07[data-modern=false].bp_avatar_module_small--59b07 .bp_avatar_module_length-2--59b07.bp_avatar_module_text--59b07{
|
|
1456
1456
|
font-family:var(--label-bold-font-family);
|
|
1457
1457
|
font-size:var(--label-bold-font-size);
|
|
1458
1458
|
font-weight:var(--label-bold-font-weight);
|
|
@@ -1462,10 +1462,10 @@
|
|
|
1462
1462
|
text-decoration:var(--label-bold-text-decoration);
|
|
1463
1463
|
text-transform:var(--label-bold-text-case);
|
|
1464
1464
|
}
|
|
1465
|
-
.bp_avatar_module_avatar--
|
|
1465
|
+
.bp_avatar_module_avatar--59b07[data-modern=false].bp_avatar_module_large--59b07 .bp_avatar_module_text--59b07{
|
|
1466
1466
|
font-size:.5rem;
|
|
1467
1467
|
}
|
|
1468
|
-
.bp_avatar_module_avatar--
|
|
1468
|
+
.bp_avatar_module_avatar--59b07[data-modern=false].bp_avatar_module_large--59b07 .bp_avatar_module_length-1--59b07.bp_avatar_module_text--59b07,.bp_avatar_module_avatar--59b07[data-modern=false].bp_avatar_module_large--59b07 .bp_avatar_module_length-2--59b07.bp_avatar_module_text--59b07{
|
|
1469
1469
|
font-family:var(--body-default-bold-font-family);
|
|
1470
1470
|
font-size:var(--body-default-bold-font-size);
|
|
1471
1471
|
font-weight:var(--body-default-bold-font-weight);
|
|
@@ -1475,10 +1475,10 @@
|
|
|
1475
1475
|
text-decoration:var(--body-default-bold-text-decoration);
|
|
1476
1476
|
text-transform:var(--body-default-bold-text-case);
|
|
1477
1477
|
}
|
|
1478
|
-
.bp_avatar_module_avatar--
|
|
1478
|
+
.bp_avatar_module_avatar--59b07[data-modern=false].bp_avatar_module_large--59b07 .bp_avatar_module_length-3--59b07.bp_avatar_module_text--59b07{
|
|
1479
1479
|
font-size:.6875rem;
|
|
1480
1480
|
}
|
|
1481
|
-
.bp_avatar_module_avatar--
|
|
1481
|
+
.bp_avatar_module_avatar--59b07[data-modern=false].bp_avatar_module_large--59b07 .bp_avatar_module_length-4--59b07.bp_avatar_module_text--59b07{
|
|
1482
1482
|
font-family:var(--label-bold-font-family);
|
|
1483
1483
|
font-size:var(--label-bold-font-size);
|
|
1484
1484
|
font-weight:var(--label-bold-font-weight);
|
|
@@ -1488,7 +1488,7 @@
|
|
|
1488
1488
|
text-decoration:var(--label-bold-text-decoration);
|
|
1489
1489
|
text-transform:var(--label-bold-text-case);
|
|
1490
1490
|
}
|
|
1491
|
-
.bp_avatar_module_avatar--
|
|
1491
|
+
.bp_avatar_module_avatar--59b07[data-modern=false].bp_avatar_module_xlarge--59b07 .bp_avatar_module_length-1--59b07.bp_avatar_module_text--59b07,.bp_avatar_module_avatar--59b07[data-modern=false].bp_avatar_module_xlarge--59b07 .bp_avatar_module_length-2--59b07.bp_avatar_module_text--59b07{
|
|
1492
1492
|
font-family:var(--title-x-large-font-family);
|
|
1493
1493
|
font-size:var(--title-x-large-font-size);
|
|
1494
1494
|
font-weight:var(--title-x-large-font-weight);
|
|
@@ -1499,7 +1499,7 @@
|
|
|
1499
1499
|
text-transform:var(--title-x-large-text-case);
|
|
1500
1500
|
}
|
|
1501
1501
|
|
|
1502
|
-
.bp_avatar_module_avatar--
|
|
1502
|
+
.bp_avatar_module_avatar--59b07[data-modern=true]{
|
|
1503
1503
|
--avatar-background-color:var(--bp-gray-10);
|
|
1504
1504
|
--avatar-small-width:var(--bp-size-060);
|
|
1505
1505
|
--avatar-small-height:var(--bp-size-060);
|
|
@@ -1518,7 +1518,7 @@
|
|
|
1518
1518
|
letter-spacing:var(--bp-font-letter-spacing-01);
|
|
1519
1519
|
line-height:var(--bp-font-line-height-04);
|
|
1520
1520
|
}
|
|
1521
|
-
.bp_avatar_module_avatar--
|
|
1521
|
+
.bp_avatar_module_avatar--59b07[data-modern=true].bp_avatar_module_medium--59b07 .bp_avatar_module_text--59b07,.bp_avatar_module_avatar--59b07[data-modern=true].bp_avatar_module_small--59b07 .bp_avatar_module_length-1--59b07.bp_avatar_module_text--59b07,.bp_avatar_module_avatar--59b07[data-modern=true].bp_avatar_module_small--59b07 .bp_avatar_module_length-2--59b07.bp_avatar_module_text--59b07{
|
|
1522
1522
|
font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
|
|
1523
1523
|
font-size:var(--bp-font-size-02);
|
|
1524
1524
|
font-style:normal;
|
|
@@ -1526,7 +1526,7 @@
|
|
|
1526
1526
|
letter-spacing:var(--bp-font-letter-spacing-02);
|
|
1527
1527
|
line-height:var(--bp-font-line-height-03);
|
|
1528
1528
|
}
|
|
1529
|
-
.bp_avatar_module_avatar--
|
|
1529
|
+
.bp_avatar_module_avatar--59b07[data-modern=true].bp_avatar_module_large--59b07 .bp_avatar_module_length-1--59b07.bp_avatar_module_text--59b07,.bp_avatar_module_avatar--59b07[data-modern=true].bp_avatar_module_large--59b07 .bp_avatar_module_length-2--59b07.bp_avatar_module_text--59b07{
|
|
1530
1530
|
font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
|
|
1531
1531
|
font-size:var(--bp-font-size-05);
|
|
1532
1532
|
font-style:normal;
|
|
@@ -1534,10 +1534,10 @@
|
|
|
1534
1534
|
letter-spacing:var(--bp-font-letter-spacing-01);
|
|
1535
1535
|
line-height:var(--bp-font-line-height-04);
|
|
1536
1536
|
}
|
|
1537
|
-
.bp_avatar_module_avatar--
|
|
1537
|
+
.bp_avatar_module_avatar--59b07[data-modern=true].bp_avatar_module_large--59b07 .bp_avatar_module_length-3--59b07.bp_avatar_module_text--59b07{
|
|
1538
1538
|
font-size:.6875rem;
|
|
1539
1539
|
}
|
|
1540
|
-
.bp_avatar_module_avatar--
|
|
1540
|
+
.bp_avatar_module_avatar--59b07[data-modern=true].bp_avatar_module_large--59b07 .bp_avatar_module_length-4--59b07.bp_avatar_module_text--59b07{
|
|
1541
1541
|
font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
|
|
1542
1542
|
font-size:var(--bp-font-size-02);
|
|
1543
1543
|
font-style:normal;
|
|
@@ -1545,7 +1545,7 @@
|
|
|
1545
1545
|
letter-spacing:var(--bp-font-letter-spacing-02);
|
|
1546
1546
|
line-height:var(--bp-font-line-height-03);
|
|
1547
1547
|
}
|
|
1548
|
-
.bp_avatar_module_avatar--
|
|
1548
|
+
.bp_avatar_module_avatar--59b07[data-modern=true].bp_avatar_module_xlarge--59b07 .bp_avatar_module_length-1--59b07.bp_avatar_module_text--59b07,.bp_avatar_module_avatar--59b07[data-modern=true].bp_avatar_module_xlarge--59b07 .bp_avatar_module_length-2--59b07.bp_avatar_module_text--59b07{
|
|
1549
1549
|
font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
|
|
1550
1550
|
font-size:var(--bp-font-size-10);
|
|
1551
1551
|
font-style:normal;
|
|
@@ -1554,17 +1554,18 @@
|
|
|
1554
1554
|
line-height:var(--bp-font-line-height-06);
|
|
1555
1555
|
}
|
|
1556
1556
|
|
|
1557
|
-
.bp_avatar_module_avatar--
|
|
1557
|
+
.bp_avatar_module_avatar--59b07{
|
|
1558
1558
|
all:unset;
|
|
1559
1559
|
align-items:center;
|
|
1560
1560
|
background-color:var(--avatar-background-color);
|
|
1561
1561
|
border-radius:50%;
|
|
1562
1562
|
box-sizing:border-box;
|
|
1563
1563
|
display:flex;
|
|
1564
|
+
flex-shrink:0;
|
|
1564
1565
|
justify-content:center;
|
|
1565
1566
|
position:relative;
|
|
1566
1567
|
}
|
|
1567
|
-
.bp_avatar_module_avatar--
|
|
1568
|
+
.bp_avatar_module_avatar--59b07 .bp_avatar_module_text--59b07{
|
|
1568
1569
|
align-items:center;
|
|
1569
1570
|
border-radius:50%;
|
|
1570
1571
|
display:flex;
|
|
@@ -1572,91 +1573,91 @@
|
|
|
1572
1573
|
justify-content:center;
|
|
1573
1574
|
width:100%;
|
|
1574
1575
|
}
|
|
1575
|
-
.bp_avatar_module_avatar--
|
|
1576
|
+
.bp_avatar_module_avatar--59b07.bp_avatar_module_small--59b07{
|
|
1576
1577
|
height:var(--avatar-small-height);
|
|
1577
1578
|
width:var(--avatar-small-width);
|
|
1578
1579
|
}
|
|
1579
|
-
.bp_avatar_module_avatar--
|
|
1580
|
+
.bp_avatar_module_avatar--59b07.bp_avatar_module_small--59b07 .bp_avatar_module_text--59b07{
|
|
1580
1581
|
font-size:.5rem;
|
|
1581
1582
|
}
|
|
1582
|
-
.bp_avatar_module_avatar--
|
|
1583
|
+
.bp_avatar_module_avatar--59b07.bp_avatar_module_medium--59b07{
|
|
1583
1584
|
height:var(--avatar-medium-height);
|
|
1584
1585
|
width:var(--avatar-medium-width);
|
|
1585
1586
|
}
|
|
1586
|
-
.bp_avatar_module_avatar--
|
|
1587
|
+
.bp_avatar_module_avatar--59b07.bp_avatar_module_medium--59b07 .bp_avatar_module_length-1--59b07.bp_avatar_module_text--59b07,.bp_avatar_module_avatar--59b07.bp_avatar_module_medium--59b07 .bp_avatar_module_length-2--59b07.bp_avatar_module_text--59b07{
|
|
1587
1588
|
font-size:.8125rem;
|
|
1588
1589
|
}
|
|
1589
|
-
.bp_avatar_module_avatar--
|
|
1590
|
+
.bp_avatar_module_avatar--59b07.bp_avatar_module_large--59b07{
|
|
1590
1591
|
height:var(--avatar-large-height);
|
|
1591
1592
|
width:var(--avatar-large-width);
|
|
1592
1593
|
}
|
|
1593
|
-
.bp_avatar_module_avatar--
|
|
1594
|
+
.bp_avatar_module_avatar--59b07.bp_avatar_module_large--59b07 .bp_avatar_module_text--59b07{
|
|
1594
1595
|
font-size:.5rem;
|
|
1595
1596
|
}
|
|
1596
|
-
.bp_avatar_module_avatar--
|
|
1597
|
+
.bp_avatar_module_avatar--59b07.bp_avatar_module_large--59b07 .bp_avatar_module_length-3--59b07.bp_avatar_module_text--59b07{
|
|
1597
1598
|
font-size:.6875rem;
|
|
1598
1599
|
}
|
|
1599
|
-
.bp_avatar_module_avatar--
|
|
1600
|
+
.bp_avatar_module_avatar--59b07.bp_avatar_module_xlarge--59b07{
|
|
1600
1601
|
height:var(--avatar-xlarge-height);
|
|
1601
1602
|
width:var(--avatar-xlarge-width);
|
|
1602
1603
|
}
|
|
1603
|
-
.bp_avatar_module_avatar--
|
|
1604
|
+
.bp_avatar_module_avatar--59b07.bp_avatar_module_xlarge--59b07 .bp_avatar_module_text--59b07{
|
|
1604
1605
|
font-size:1rem;
|
|
1605
1606
|
}
|
|
1606
|
-
.bp_avatar_module_avatar--
|
|
1607
|
+
.bp_avatar_module_avatar--59b07.bp_avatar_module_xxlarge--59b07{
|
|
1607
1608
|
height:var(--avatar-xxlarge-height);
|
|
1608
1609
|
width:var(--avatar-xxlarge-width);
|
|
1609
1610
|
}
|
|
1610
|
-
.bp_avatar_module_avatar--
|
|
1611
|
+
.bp_avatar_module_avatar--59b07.bp_avatar_module_xxlarge--59b07 .bp_avatar_module_text--59b07{
|
|
1611
1612
|
font-size:1.25rem;
|
|
1612
1613
|
}
|
|
1613
|
-
.bp_avatar_module_avatar--
|
|
1614
|
+
.bp_avatar_module_avatar--59b07.bp_avatar_module_xxlarge--59b07 .bp_avatar_module_length-1--59b07.bp_avatar_module_text--59b07,.bp_avatar_module_avatar--59b07.bp_avatar_module_xxlarge--59b07 .bp_avatar_module_length-2--59b07.bp_avatar_module_text--59b07{
|
|
1614
1615
|
font-size:2rem;
|
|
1615
1616
|
}
|
|
1616
|
-
.bp_avatar_module_avatar--
|
|
1617
|
+
.bp_avatar_module_avatar--59b07.bp_avatar_module_xxlarge--59b07 .bp_avatar_module_badge--59b07{
|
|
1617
1618
|
right:-.375rem;
|
|
1618
1619
|
}
|
|
1619
|
-
.bp_avatar_module_avatar--
|
|
1620
|
+
.bp_avatar_module_avatar--59b07 .bp_avatar_module_image--59b07{
|
|
1620
1621
|
border-radius:50%;
|
|
1621
1622
|
height:100%;
|
|
1622
1623
|
object-fit:cover;
|
|
1623
1624
|
width:100%;
|
|
1624
1625
|
}
|
|
1625
|
-
.bp_avatar_module_avatar--
|
|
1626
|
+
.bp_avatar_module_avatar--59b07 .bp_avatar_module_image--59b07.bp_avatar_module_loading--59b07{
|
|
1626
1627
|
height:0;
|
|
1627
1628
|
width:0;
|
|
1628
1629
|
}
|
|
1629
1630
|
|
|
1630
|
-
.bp_avatar_module_anonymousAvatar--
|
|
1631
|
+
.bp_avatar_module_anonymousAvatar--59b07,.bp_avatar_module_iconContainer--59b07{
|
|
1631
1632
|
align-items:center;
|
|
1632
1633
|
display:flex;
|
|
1633
1634
|
justify-content:center;
|
|
1634
1635
|
}
|
|
1635
1636
|
|
|
1636
|
-
.bp_avatar_module_iconContainer--
|
|
1637
|
+
.bp_avatar_module_iconContainer--59b07{
|
|
1637
1638
|
border-radius:50%;
|
|
1638
1639
|
height:100%;
|
|
1639
1640
|
width:100%;
|
|
1640
1641
|
}
|
|
1641
1642
|
|
|
1642
|
-
[data-button-wrapper]:hover .bp_avatar_module_avatar--
|
|
1643
|
+
[data-button-wrapper]:hover .bp_avatar_module_avatar--59b07[data-modern=false]{
|
|
1643
1644
|
box-shadow:0 0 0 0 var(--background-background), 0 0 0 var(--border-3) var(--border-avatar-border-hover);
|
|
1644
1645
|
cursor:pointer;
|
|
1645
1646
|
}
|
|
1646
|
-
[data-button-wrapper]:hover .bp_avatar_module_avatar--
|
|
1647
|
+
[data-button-wrapper]:hover .bp_avatar_module_avatar--59b07[data-modern=true]{
|
|
1647
1648
|
box-shadow:0 0 0 0 var(--background-background), 0 0 0 var(--border-3) var(--bp-border-avatar-border-hover);
|
|
1648
1649
|
cursor:pointer;
|
|
1649
1650
|
}
|
|
1650
|
-
[data-button-wrapper]:active .bp_avatar_module_avatar--
|
|
1651
|
+
[data-button-wrapper]:active .bp_avatar_module_avatar--59b07[data-modern=false]{
|
|
1651
1652
|
box-shadow:0 0 0 0 var(--background-background), 0 0 0 var(--border-3) var(--border-avatar-border-pressed);
|
|
1652
1653
|
}
|
|
1653
|
-
[data-button-wrapper]:active .bp_avatar_module_avatar--
|
|
1654
|
+
[data-button-wrapper]:active .bp_avatar_module_avatar--59b07[data-modern=true]{
|
|
1654
1655
|
box-shadow:0 0 0 0 var(--background-background), 0 0 0 var(--border-3) var(--bp-border-avatar-border-pressed);
|
|
1655
1656
|
}
|
|
1656
|
-
[data-button-wrapper][data-focus-visible] .bp_avatar_module_avatar--
|
|
1657
|
+
[data-button-wrapper][data-focus-visible] .bp_avatar_module_avatar--59b07[data-modern=false]{
|
|
1657
1658
|
box-shadow:0 0 0 var(--border-1, 1px) var(--background-background), 0 0 0 var(--border-3) var(--outline-focus-on-light);
|
|
1658
1659
|
}
|
|
1659
|
-
[data-button-wrapper][data-focus-visible] .bp_avatar_module_avatar--
|
|
1660
|
+
[data-button-wrapper][data-focus-visible] .bp_avatar_module_avatar--59b07[data-modern=true]{
|
|
1660
1661
|
box-shadow:0 0 0 var(--border-1, 1px) var(--background-background), 0 0 0 var(--border-3) var(--bp-outline-focus-on-light);
|
|
1661
1662
|
}
|
|
1662
1663
|
.bp_tooltip_module_content--c9ac1[data-modern=false]{
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@box/blueprint-web",
|
|
3
|
-
"version": "12.
|
|
3
|
+
"version": "12.104.1",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE",
|
|
6
6
|
"publishConfig": {
|
|
@@ -47,7 +47,7 @@
|
|
|
47
47
|
"dependencies": {
|
|
48
48
|
"@ariakit/react": "0.4.15",
|
|
49
49
|
"@ariakit/react-core": "0.4.15",
|
|
50
|
-
"@box/blueprint-web-assets": "^4.
|
|
50
|
+
"@box/blueprint-web-assets": "^4.87.0",
|
|
51
51
|
"@internationalized/date": "^3.7.0",
|
|
52
52
|
"@radix-ui/react-accordion": "1.1.2",
|
|
53
53
|
"@radix-ui/react-checkbox": "1.0.4",
|
|
@@ -77,7 +77,7 @@
|
|
|
77
77
|
"type-fest": "^3.2.0"
|
|
78
78
|
},
|
|
79
79
|
"devDependencies": {
|
|
80
|
-
"@box/storybook-utils": "^0.14.
|
|
80
|
+
"@box/storybook-utils": "^0.14.27",
|
|
81
81
|
"@types/react": "^18.0.0",
|
|
82
82
|
"@types/react-dom": "^18.0.0",
|
|
83
83
|
"react": "^18.3.0",
|