@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--f9e00","small":"bp_avatar_module_small--f9e00","length-1":"bp_avatar_module_length-1--f9e00","text":"bp_avatar_module_text--f9e00","length-2":"bp_avatar_module_length-2--f9e00","medium":"bp_avatar_module_medium--f9e00","large":"bp_avatar_module_large--f9e00","length-3":"bp_avatar_module_length-3--f9e00","length-4":"bp_avatar_module_length-4--f9e00","xlarge":"bp_avatar_module_xlarge--f9e00","xxlarge":"bp_avatar_module_xxlarge--f9e00","badge":"bp_avatar_module_badge--f9e00","image":"bp_avatar_module_image--f9e00","loading":"bp_avatar_module_loading--f9e00","anonymousAvatar":"bp_avatar_module_anonymousAvatar--f9e00","iconContainer":"bp_avatar_module_iconContainer--f9e00"};
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: crumbs[crumbs.length - 1],
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. */
@@ -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--f9e00[data-modern=false]{
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--f9e00[data-modern=false].bp_avatar_module_medium--f9e00 .bp_avatar_module_text--f9e00,.bp_avatar_module_avatar--f9e00[data-modern=false].bp_avatar_module_small--f9e00 .bp_avatar_module_length-1--f9e00.bp_avatar_module_text--f9e00,.bp_avatar_module_avatar--f9e00[data-modern=false].bp_avatar_module_small--f9e00 .bp_avatar_module_length-2--f9e00.bp_avatar_module_text--f9e00{
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--f9e00[data-modern=false].bp_avatar_module_large--f9e00 .bp_avatar_module_text--f9e00{
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--f9e00[data-modern=false].bp_avatar_module_large--f9e00 .bp_avatar_module_length-1--f9e00.bp_avatar_module_text--f9e00,.bp_avatar_module_avatar--f9e00[data-modern=false].bp_avatar_module_large--f9e00 .bp_avatar_module_length-2--f9e00.bp_avatar_module_text--f9e00{
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--f9e00[data-modern=false].bp_avatar_module_large--f9e00 .bp_avatar_module_length-3--f9e00.bp_avatar_module_text--f9e00{
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--f9e00[data-modern=false].bp_avatar_module_large--f9e00 .bp_avatar_module_length-4--f9e00.bp_avatar_module_text--f9e00{
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--f9e00[data-modern=false].bp_avatar_module_xlarge--f9e00 .bp_avatar_module_length-1--f9e00.bp_avatar_module_text--f9e00,.bp_avatar_module_avatar--f9e00[data-modern=false].bp_avatar_module_xlarge--f9e00 .bp_avatar_module_length-2--f9e00.bp_avatar_module_text--f9e00{
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--f9e00[data-modern=true]{
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--f9e00[data-modern=true].bp_avatar_module_medium--f9e00 .bp_avatar_module_text--f9e00,.bp_avatar_module_avatar--f9e00[data-modern=true].bp_avatar_module_small--f9e00 .bp_avatar_module_length-1--f9e00.bp_avatar_module_text--f9e00,.bp_avatar_module_avatar--f9e00[data-modern=true].bp_avatar_module_small--f9e00 .bp_avatar_module_length-2--f9e00.bp_avatar_module_text--f9e00{
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--f9e00[data-modern=true].bp_avatar_module_large--f9e00 .bp_avatar_module_length-1--f9e00.bp_avatar_module_text--f9e00,.bp_avatar_module_avatar--f9e00[data-modern=true].bp_avatar_module_large--f9e00 .bp_avatar_module_length-2--f9e00.bp_avatar_module_text--f9e00{
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--f9e00[data-modern=true].bp_avatar_module_large--f9e00 .bp_avatar_module_length-3--f9e00.bp_avatar_module_text--f9e00{
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--f9e00[data-modern=true].bp_avatar_module_large--f9e00 .bp_avatar_module_length-4--f9e00.bp_avatar_module_text--f9e00{
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--f9e00[data-modern=true].bp_avatar_module_xlarge--f9e00 .bp_avatar_module_length-1--f9e00.bp_avatar_module_text--f9e00,.bp_avatar_module_avatar--f9e00[data-modern=true].bp_avatar_module_xlarge--f9e00 .bp_avatar_module_length-2--f9e00.bp_avatar_module_text--f9e00{
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--f9e00{
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--f9e00 .bp_avatar_module_text--f9e00{
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--f9e00.bp_avatar_module_small--f9e00{
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--f9e00.bp_avatar_module_small--f9e00 .bp_avatar_module_text--f9e00{
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--f9e00.bp_avatar_module_medium--f9e00{
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--f9e00.bp_avatar_module_medium--f9e00 .bp_avatar_module_length-1--f9e00.bp_avatar_module_text--f9e00,.bp_avatar_module_avatar--f9e00.bp_avatar_module_medium--f9e00 .bp_avatar_module_length-2--f9e00.bp_avatar_module_text--f9e00{
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--f9e00.bp_avatar_module_large--f9e00{
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--f9e00.bp_avatar_module_large--f9e00 .bp_avatar_module_text--f9e00{
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--f9e00.bp_avatar_module_large--f9e00 .bp_avatar_module_length-3--f9e00.bp_avatar_module_text--f9e00{
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--f9e00.bp_avatar_module_xlarge--f9e00{
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--f9e00.bp_avatar_module_xlarge--f9e00 .bp_avatar_module_text--f9e00{
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--f9e00.bp_avatar_module_xxlarge--f9e00{
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--f9e00.bp_avatar_module_xxlarge--f9e00 .bp_avatar_module_text--f9e00{
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--f9e00.bp_avatar_module_xxlarge--f9e00 .bp_avatar_module_length-1--f9e00.bp_avatar_module_text--f9e00,.bp_avatar_module_avatar--f9e00.bp_avatar_module_xxlarge--f9e00 .bp_avatar_module_length-2--f9e00.bp_avatar_module_text--f9e00{
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--f9e00.bp_avatar_module_xxlarge--f9e00 .bp_avatar_module_badge--f9e00{
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--f9e00 .bp_avatar_module_image--f9e00{
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--f9e00 .bp_avatar_module_image--f9e00.bp_avatar_module_loading--f9e00{
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--f9e00,.bp_avatar_module_iconContainer--f9e00{
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--f9e00{
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--f9e00[data-modern=false]{
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--f9e00[data-modern=true]{
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--f9e00[data-modern=false]{
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--f9e00[data-modern=true]{
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--f9e00[data-modern=false]{
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--f9e00[data-modern=true]{
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.103.3",
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.86.3",
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.24",
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",