@box/blueprint-web 12.59.4 → 12.60.0

package/dist/lib-esm/index.css

@@ -10831,152 +10831,291 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   --z-index-card-tooltip:2147483647;
 }
 
-.bp_toolbar_module_toolbarRoot--b3c70{
-  background:var(--surface-surface);
-  border:var(--border-1) solid var(--border-card-border);
-  border-radius:var(--radius-4);
-  box-shadow:var(--dropshadow-3);
-  padding:calc(var(--space-1) - var(--border-1));
+.bp_toolbar_module_dropdownIndicator--73857.bp_toolbar_module_invertCaret--73857{
+  transform:rotate(.5turn);
 }
 
-.bp_toolbar_module_scrollButtonWrapper--b3c70,.bp_toolbar_module_toolbarRoot--b3c70{
+.bp_toolbar_module_toolbarRoot--73857[data-modern=false]{
+  --toolbar-root-gap:var(--space-1);
+  --toolbar-root-padding:calc(var(--space-1) - var(--border-1));
+  --toolbar-root-background:var(--surface-surface);
+  --toolbar-root-border:var(--border-1) solid var(--border-card-border);
+  --toolbar-root-border-radius:var(--radius-4);
+  --toolbar-root-box-shadow:var(--dropshadow-3);
+  --toolbar-scroll-button-gap:var(--space-1);
+  --toolbar-scrollable-children-gap:var(--space-1);
+  --toolbar-scrollable-children-padding:calc(var(--space-1) - var(--border-1));
+  --toolbar-scrollable-children-scroll-padding:calc(var(--space-1) - var(--border-1));
+  --toolbar-separator-height:var(--size-6);
+  --toolbar-separator-background:var(--border-divider-border);
+  --toolbar-separator-border-radius:var(--radius-2);
+}
+
+.bp_toolbar_module_toolbarRoot--73857[data-modern=true]{
+  --box-shadow:0 4px 12px 0 #0000001a;
+  --toolbar-root-gap:var(--bp-space-010);
+  --toolbar-root-padding:var(--bp-space-010);
+  --toolbar-root-background:var(--bp-surface-toolbar-surface);
+  --toolbar-root-border:var(--bp-border-01) solid var(--bp-border-toolbar-border);
+  --toolbar-root-border-radius:var(--bp-radius-10);
+  --toolbar-root-box-shadow:var(--box-shadow);
+  --toolbar-scroll-button-gap:var(--bp-space-010);
+  --toolbar-scrollable-children-gap:var(--bp-space-010);
+  --toolbar-scrollable-children-padding:var(--bp-space-010);
+  --toolbar-scrollable-children-scroll-padding:var(--bp-space-010);
+  --toolbar-separator-height:var(--bp-size-060);
+  --toolbar-separator-background:var(--bp-border-divider-border);
+  --toolbar-separator-border-radius:var(--bp-radius-03);
+  --toolbar-toggle-group-gap:var(--bp-space-010);
+}
+.bp_toolbar_module_toolbarRoot--73857[data-modern=true].bp_toolbar_module_ScrollableToolbarWithReducedPadding--73857{
+  --toolbar-root-padding:0;
+}
+
+.bp_toolbar_module_toolbarItem--73857[data-modern=false]{
+  --toolbar-item-min-width:var(--size-8);
+  --toolbar-item-min-height:var(--size-8);
+  --toolbar-item-text-indent:var(--space-1);
+  --toolbar-item-background:var(--surface-toggle-surface);
+  --toolbar-item-border:var(--border-1) solid #0000;
+  --toolbar-item-border-radius:var(--radius-2);
+  --toolbar-item-padding-inline:calc(var(--space-1) - var(--border-1));
+  --toolbar-item-off-hover-background:var(--surface-toggle-surface-hover);
+  --toolbar-item-off-hover-border:var(--border-1) solid var(--surface-toggle-surface-hover);
+  --toolbar-item-focus-outline:var(--outline-focus-on-light);
+  --toolbar-item-disabled-opacity:.3;
+  --toolbar-toggle-on-pressed-border:none;
+  --toolbar-toggle-on-pressed-background:var(--surface-toggle-surface-pressed);
+  --toolbar-toggle-icon-fill:var(--icon-icon-on-dark);
+  --toolbar-toggle-on-hover-background:var(--surface-toggle-surface-on-hover);
+  --toolbar-toggle-on-hover-border:var(--border-1) solid var(--surface-toggle-surface-on-hover);
+  --toolbar-icon-width:var(--size-5);
+  --toolbar-icon-height:var(--size-5);
+  --toolbar-text-toggle-color:var(--text-text-on-light);
+  --toolbar-text-toggle-off-border:var(--border-1) solid var(--border-toggletext-border-off);
+  --toolbar-text-toggle-padding-inline:var(--space-2);
+  --toolbar-text-toggle-hover-background:var(--surface-toggle-surface-off-hover);
+  --toolbar-text-toggle-hover-border-color:var(--border-toggletext-border-off-hover);
+  --toolbar-text-toggle-active-background:var(--surface-toggle-surface-off-pressed);
+  --toolbar-text-toggle-active-border-color:var(--border-toggletext-border-off-pressed);
+  --toolbar-text-toggle-checked-color:var(--text-toggletext-text);
+  --toolbar-text-toggle-checked-background:var(--surface-toggletext-surface-on);
+  --toolbar-text-toggle-checked-border:var(--border-1) solid var(--border-toggletext-border-on);
+  --toolbar-text-toggle-checked-hover-background:var(--surface-toggletext-surface-on-hover);
+  --toolbar-text-toggle-checked-hover-border-color:var(--border-toggletext-border-on-hover);
+  --toolbar-text-toggle-checked-active-background:var(--surface-toggletext-surface-on-pressed);
+  --toolbar-text-toggle-checked-active-border-color:var(--border-toggletext-border-on-pressed);
+  --trigger-button-hover-opacity:.7;
+}
+
+.bp_toolbar_module_toolbarItem--73857[data-modern=true]{
+  --toolbar-item-min-width:var(--bp-size-080);
+  --toolbar-item-min-height:var(--bp-size-080);
+  --toolbar-item-text-indent:var(--bp-space-010);
+  --toolbar-item-background:var(--bp-surface-toggle-surface);
+  --toolbar-item-border:var(--bp-border-01) solid #0000;
+  --toolbar-item-border-radius:var(--bp-radius-10);
+  --toolbar-item-padding-inline:calc(var(--bp-space-010) - var(--bp-border-01));
+  --toolbar-item-off-hover-background:var(--bp-surface-toggle-surface-hover);
+  --toolbar-item-off-hover-border:var(--bp-border-01) solid var(--bp-surface-toggle-surface-hover);
+  --toolbar-item-focus-outline:var(--bp-outline-focus-on-light);
+  --toolbar-item-disabled-opacity:.3;
+  --toolbar-toggle-on-pressed-border:var(--bp-border-01) solid var(--bp-border-toggle-border-on);
+  --toolbar-toggle-on-pressed-background:var(--bp-surface-toggle-surface-on);
+  --toolbar-toggle-icon-fill:var(--bp-icon-icon-blue);
+  --toolbar-toggle-on-hover-background:var(--bp-surface-toggle-surface-on-hover);
+  --toolbar-toggle-on-hover-border:var(--bp-border-01) solid var(--bp-border-toggle-border-on);
+  --toolbar-icon-width:var(--bp-size-050);
+  --toolbar-icon-height:var(--bp-size-050);
+  --toolbar-text-toggle-color:var(--bp-text-text-on-light);
+  --toolbar-text-toggle-off-border:var(--bp-border-01) solid var(--bp-border-toggle-text-border-off);
+  --toolbar-text-toggle-padding-inline:var(--bp-space-020);
+  --toolbar-text-toggle-hover-background:var(--bp-surface-toggle-surface-off-hover);
+  --toolbar-text-toggle-hover-border-color:var(--bp-border-toggle-text-border-off-hover);
+  --toolbar-text-toggle-active-background:var(--bp-surface-toggle-text-surface-off-pressed);
+  --toolbar-text-toggle-active-border-color:var(--bp-border-toggle-text-border-off-pressed);
+  --toolbar-text-toggle-checked-color:var(--bp-text-toggle-text-text);
+  --toolbar-text-toggle-checked-background:var(--bp-surface-toggle-text-surface-on);
+  --toolbar-text-toggle-checked-border:var(--bp-border-01) solid var(--bp-border-toggle-text-border-on);
+  --toolbar-text-toggle-checked-hover-background:var(--bp-surface-toggle-text-surface-on-hover);
+  --toolbar-text-toggle-checked-hover-border-color:var(--bp-border-toggle-text-border-on-hover);
+  --toolbar-text-toggle-checked-active-background:var(--bp-surface-toggle-text-surface-on-pressed);
+  --toolbar-text-toggle-checked-active-border-color:var(--bp-border-toggle-text-border-on-pressed);
+  --trigger-button-hover-opacity:.65;
+  --trigger-button-active-opacity:.8;
+}
+.bp_toolbar_module_toolbarItem--73857[data-modern=true]:active,.bp_toolbar_module_toolbarItem--73857[data-modern=true][data-active]{
+  background:var(--bp-surface-toggle-surface-off-pressed);
+  border:var(--bp-border-01) solid var(--bp-border-toggle-border-off);
+}
+.bp_toolbar_module_toolbarItem--73857[data-modern=true][data-state=on]:active,.bp_toolbar_module_toolbarItem--73857[data-modern=true][data-state=on][data-active]{
+  background:var(--bp-surface-toggle-surface-on-pressed);
+  border:var(--bp-border-01) solid var(--bp-border-toggle-border-on);
+}
+.bp_toolbar_module_toolbarItem--73857[data-modern=true][data-state=on]:hover .bp_toolbar_module_dropdownIndicator--73857{
+  transform:rotate(1turn);
+}
+.bp_toolbar_module_toolbarItem--73857[data-modern=true].bp_toolbar_module_triggerButtonSelectedWithColor--73857:active,.bp_toolbar_module_toolbarItem--73857[data-modern=true].bp_toolbar_module_triggerButtonSelectedWithColor--73857[data-active]{
+  background-color:var(--toolbar-button-color);
+  opacity:var(--trigger-button-active-opacity);
+}
+.bp_toolbar_module_toolbarItem--73857[data-modern=true].bp_toolbar_module_triggerButtonSelectedWithColor--73857[data-state=on]:hover{
+  background-color:var(--toolbar-button-color);
+  border-color:var(--toolbar-button-color);
+  opacity:var(--trigger-button-hover-opacity);
+}
+
+.bp_toolbar_module_toggleGroup--73857[data-modern=false]{
+  --toolbar-toggle-group-gap:var(--space-1);
+}
+
+.bp_toolbar_module_toggleGroup--73857[data-modern=true]{
+  --toolbar-toggle-group-gap:var(--bp-space-010);
+}
+
+.bp_toolbar_module_toolbarRoot--73857{
   align-items:center;
+  background:var(--toolbar-root-background);
+  border:var(--toolbar-root-border);
+  border-radius:var(--toolbar-root-border-radius);
+  box-shadow:var(--toolbar-root-box-shadow);
   display:flex;
-  gap:var(--space-1);
+  gap:var(--toolbar-root-gap);
+  padding:var(--toolbar-root-padding);
+}
+
+.bp_toolbar_module_scrollButtonWrapper--73857{
+  align-items:center;
+  display:flex;
+  gap:var(--toolbar-scroll-button-gap);
 }
-.bp_toolbar_module_scrollButtonWrapper--b3c70.bp_toolbar_module_hidden--b3c70{
+.bp_toolbar_module_scrollButtonWrapper--73857.bp_toolbar_module_hidden--73857{
   display:none;
 }
 
-.bp_toolbar_module_scrollableChildrenWrapper--b3c70{
+.bp_toolbar_module_scrollableChildrenWrapper--73857{
   -ms-overflow-style:none;
   align-items:center;
   display:flex;
   flex-grow:1;
-  gap:var(--space-1);
+  gap:var(--toolbar-scrollable-children-gap);
   overflow-x:auto;
-  padding:calc(var(--space-1) - var(--border-1));
+  padding:var(--toolbar-scrollable-children-padding);
   scroll-behavior:smooth;
-  scroll-padding:calc(var(--space-1) - var(--border-1));
+  scroll-padding:var(--toolbar-scrollable-children-scroll-padding);
   scrollbar-width:none;
   white-space:nowrap;
 }
-.bp_toolbar_module_scrollableChildrenWrapper--b3c70::-webkit-scrollbar{
+.bp_toolbar_module_scrollableChildrenWrapper--73857::-webkit-scrollbar{
   display:none;
 }
-.bp_toolbar_module_scrollableChildrenWrapper--b3c70 > *{
+.bp_toolbar_module_scrollableChildrenWrapper--73857 > *{
   flex:none;
 }
 
-.bp_toolbar_module_separator--b3c70{
-  background-color:var(--border-divider-border);
-  border-radius:var(--radius-2);
-  height:var(--size-6);
+.bp_toolbar_module_separator--73857{
+  background-color:var(--toolbar-separator-background);
+  border-radius:var(--toolbar-separator-border-radius);
+  height:var(--toolbar-separator-height);
   width:1px;
 }
 
-.bp_toolbar_module_toggleGroup--b3c70{
+.bp_toolbar_module_toggleGroup--73857{
   display:flex;
-  gap:var(--space-1);
+  gap:var(--toolbar-toggle-group-gap);
 }
 
-.bp_toolbar_module_toolbarItem--b3c70{
-  --toolbar-item-hover-opacity:.3;
+.bp_toolbar_module_toolbarItem--73857{
   align-items:center;
-  background:var(--toolbar-button-color, var(--surface-toggle-surface));
-  border:var(--border-1) solid #0000;
-  border-radius:var(--radius-2);
+  background:var(--toolbar-button-color, var(--toolbar-item-background));
+  border:var(--toolbar-item-border);
+  border-radius:var(--toolbar-item-border-radius);
   cursor:pointer;
   display:flex;
-  gap:var(--space-1);
+  gap:var(--toolbar-scroll-button-gap);
   justify-content:center;
-  min-height:var(--size-8);
-  min-width:var(--size-8);
+  min-height:var(--toolbar-item-min-height);
+  min-width:var(--toolbar-item-min-width);
   outline:none;
-  padding-inline:calc(var(--space-1) - var(--border-1));
-  text-indent:var(--space-1);
+  padding-inline:var(--toolbar-item-padding-inline);
+  text-indent:var(--toolbar-item-text-indent);
   -webkit-user-select:none;
           user-select:none;
 }
-.bp_toolbar_module_toolbarItem--b3c70[data-disabled]{
-  background:var(--surface-toggle-surface);
-  opacity:var(--toolbar-item-hover-opacity);
+.bp_toolbar_module_toolbarItem--73857[data-disabled]{
+  background:var(--toolbar-item-background);
+  opacity:var(--toolbar-item-disabled-opacity);
   pointer-events:none;
 }
-.bp_toolbar_module_toolbarItem--b3c70:not([data-disabled]):focus-visible{
-  box-shadow:0 0 0 var(--border-1, 1px) var(--background-background), 0 0 0 var(--border-3) var(--outline-focus-on-light);
+.bp_toolbar_module_toolbarItem--73857:not([data-disabled]):focus-visible{
+  box-shadow:0 0 0 var(--border-1, 1px) var(--background-background), 0 0 0 var(--border-3) var(--toolbar-item-focus-outline);
 }
-.bp_toolbar_module_toolbarItem--b3c70:not([data-disabled]):hover{
-  background:var(--toolbar-button-color, var(--surface-toggle-surface-hover));
-  border:var(--border-1) solid var(--toolbar-button-color, var(--surface-toggle-surface-hover));
+.bp_toolbar_module_toolbarItem--73857:not([data-disabled]):hover{
+  background:var(--toolbar-button-color, var(--toolbar-item-off-hover-background));
+  border:var(--toolbar-item-off-hover-border);
 }
 
-.bp_toolbar_module_toolbarToggle--b3c70[data-state=on]{
-  background:var(--surface-toggle-surface-pressed);
+.bp_toolbar_module_toolbarToggle--73857[data-state=on]{
+  background:var(--toolbar-toggle-on-pressed-background);
+  border:var(--toolbar-toggle-on-pressed-border);
 }
-.bp_toolbar_module_toolbarToggle--b3c70[data-state=on] svg *{
-  fill:var(--icon-icon-on-dark);
+.bp_toolbar_module_toolbarToggle--73857[data-state=on] svg *{
+  fill:var(--toolbar-toggle-icon-fill);
 }
-.bp_toolbar_module_toolbarToggle--b3c70[data-state=on]:not([data-disabled]):hover{
-  background:var(--surface-toggle-surface-on-hover);
-  border:var(--border-1) solid var(--surface-toggle-surface-on-hover);
+.bp_toolbar_module_toolbarToggle--73857[data-state=on]:not([data-disabled]):hover{
+  background:var(--toolbar-toggle-on-hover-background);
+  border:var(--toolbar-toggle-on-hover-border);
 }
-
-.bp_toolbar_module_dropdownIndicator--b3c70.bp_toolbar_module_invertCaret--b3c70{
-  transform:rotate(.5turn);
-}
-
-.bp_toolbar_module_triggerButtonSelectedWithColor--b3c70{
-  --trigger-button-hover-opacity:.7;
-}
-.bp_toolbar_module_triggerButtonSelectedWithColor--b3c70[data-state=on] .bp_toolbar_module_dropdownIndicator--b3c70 path{
+.bp_toolbar_module_triggerButtonSelectedWithColor--73857[data-state=on] .bp_toolbar_module_dropdownIndicator--73857 path{
   fill:var(--icon-icon-on-light);
 }
-.bp_toolbar_module_triggerButtonSelectedWithColor--b3c70[data-state=on]:hover{
+.bp_toolbar_module_triggerButtonSelectedWithColor--73857[data-state=on]:hover{
+  background-color:var(--toolbar-button-color);
+  border-color:var(--toolbar-button-color);
   opacity:var(--trigger-button-hover-opacity);
 }
 
-.bp_toolbar_module_toolbarIcon--b3c70{
+.bp_toolbar_module_toolbarIcon--73857{
   align-items:center;
   display:flex;
-  height:var(--size-5);
+  height:var(--toolbar-icon-height);
   justify-content:center;
-  width:var(--size-5);
+  width:var(--toolbar-icon-width);
 }
 
-.bp_toolbar_module_toolbarTextToggleItem--b3c70{
-  border:var(--border-1) solid var(--border-toggletext-border-off);
-  color:var(--text-text-on-light);
+.bp_toolbar_module_toolbarTextToggleItem--73857{
+  border:var(--toolbar-text-toggle-off-border);
+  color:var(--toolbar-text-toggle-color);
   font-family:var(--body-default-font-family);
   font-size:var(--body-default-font-size);
   font-weight:var(--body-default-font-weight);
   letter-spacing:var(--body-default-letter-spacing);
   line-height:var(--body-default-line-height);
-  padding-inline:var(--space-2);
+  padding-inline:var(--toolbar-text-toggle-padding-inline);
   -webkit-text-decoration:var(--body-default-text-decoration);
           text-decoration:var(--body-default-text-decoration);
   text-indent:unset;
   text-transform:var(--body-default-text-case);
   white-space:nowrap;
 }
-.bp_toolbar_module_toolbarTextToggleItem--b3c70:hover{
-  background:var(--surface-toggle-surface-off-hover);
-  border-color:var(--border-toggletext-border-off-hover);
+.bp_toolbar_module_toolbarTextToggleItem--73857:hover{
+  background:var(--toolbar-text-toggle-hover-background);
+  border-color:var(--toolbar-text-toggle-hover-border-color);
 }
-.bp_toolbar_module_toolbarTextToggleItem--b3c70:active{
-  background:var(--surface-toggle-surface-off-pressed);
-  border-color:var(--border-toggletext-border-off-pressed);
+.bp_toolbar_module_toolbarTextToggleItem--73857:active{
+  background:var(--toolbar-text-toggle-active-background);
+  border-color:var(--toolbar-text-toggle-active-border-color);
 }
-.bp_toolbar_module_toolbarTextToggleItem--b3c70[aria-checked=true]{
-  background:var(--surface-toggletext-surface-on);
-  border:var(--border-1) solid var(--border-toggletext-border-on);
-  color:var(--text-toggletext-text);
+.bp_toolbar_module_toolbarTextToggleItem--73857[aria-checked=true]{
+  background:var(--toolbar-text-toggle-checked-background);
+  border:var(--toolbar-text-toggle-checked-border);
+  color:var(--toolbar-text-toggle-checked-color);
 }
-.bp_toolbar_module_toolbarTextToggleItem--b3c70[aria-checked=true]:hover{
-  background:var(--surface-toggletext-surface-on-hover);
-  border-color:var(--border-toggletext-border-on-hover);
+.bp_toolbar_module_toolbarTextToggleItem--73857[aria-checked=true]:hover{
+  background:var(--toolbar-text-toggle-checked-hover-background);
+  border-color:var(--toolbar-text-toggle-checked-hover-border-color);
 }
-.bp_toolbar_module_toolbarTextToggleItem--b3c70[aria-checked=true]:active{
-  background:var(--surface-toggletext-surface-on-pressed);
-  border-color:var(--border-toggletext-border-on-pressed);
+.bp_toolbar_module_toolbarTextToggleItem--73857[aria-checked=true]:active{
+  background:var(--toolbar-text-toggle-checked-active-background);
+  border-color:var(--toolbar-text-toggle-checked-active-border-color);
 }

package/dist/lib-esm/toolbar/toolbar-button.js

@@ -2,6 +2,7 @@ import { jsx } from 'react/jsx-runtime';
 import * as ToolbarPrimitive from '@radix-ui/react-toolbar';
 import clsx from 'clsx';
 import { forwardRef } from 'react';
+import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 import styles from './toolbar.module.js';
 
 const ToolbarButton = /*#__PURE__*/forwardRef((props, forwardedRef) => {
@@ -12,10 +13,14 @@ const ToolbarButton = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     className,
     ...rest
   } = props;
+  const {
+    enableModernizedComponents
+  } = useBlueprintModernization();
   return jsx(ToolbarPrimitive.Button, {
     ...rest,
     ref: forwardedRef,
     className: clsx(styles.toolbarItem, className),
+    "data-modern": enableModernizedComponents,
     style: {
       '--toolbar-button-color': backgroundColor,
       ...style

package/dist/lib-esm/toolbar/toolbar-dropdown-indicator.js

@@ -1,8 +1,9 @@
 import { jsx } from 'react/jsx-runtime';
-import { Caret } from '@box/blueprint-web-assets/icons/Fill';
+import { ChevronDown, Caret } from '@box/blueprint-web-assets/icons/Fill';
 import { Size2 } from '@box/blueprint-web-assets/tokens/tokens';
 import clsx from 'clsx';
-import { forwardRef } from 'react';
+import { forwardRef, useMemo } from 'react';
+import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 import styles from './toolbar.module.js';
 
 const ToolbarDropdownIndicator = /*#__PURE__*/forwardRef(({
@@ -10,7 +11,11 @@ const ToolbarDropdownIndicator = /*#__PURE__*/forwardRef(({
   className,
   color
 }, forwardedRef) => {
-  return jsx(Caret, {
+  const {
+    enableModernizedComponents
+  } = useBlueprintModernization();
+  const Icon = useMemo(() => enableModernizedComponents ? ChevronDown : Caret, [enableModernizedComponents]);
+  return jsx(Icon, {
     ref: forwardedRef,
     className: clsx({
       [styles.invertCaret]: direction === 'up'

package/dist/lib-esm/toolbar/toolbar-root.js

@@ -2,6 +2,7 @@ import { jsx } from 'react/jsx-runtime';
 import * as ToolbarPrimitive from '@radix-ui/react-toolbar';
 import clsx from 'clsx';
 import { forwardRef } from 'react';
+import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 import { ToolbarScrollableContainer } from './toolbar-scrollable-container.js';
 import styles from './toolbar.module.js';
 import { HorizontalScrollProvider } from './utils/horizontal-scroll-context.js';
@@ -13,6 +14,9 @@ const ToolbarRoot = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     scrollable,
     ...rest
   } = props;
+  const {
+    enableModernizedComponents
+  } = useBlueprintModernization();
   if (scrollable) {
     const {
       ariaLabelNextButton,
@@ -23,7 +27,10 @@ const ToolbarRoot = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     return jsx(ToolbarPrimitive.Root, {
       ...rest,
       ref: forwardedRef,
-      className: clsx(styles.toolbarRoot, className),
+      className: clsx(styles.toolbarRoot, {
+        [styles.ScrollableToolbarWithReducedPadding]: enableModernizedComponents
+      }, className),
+      "data-modern": enableModernizedComponents,
       style: {
         maxWidth
       },
@@ -41,6 +48,7 @@ const ToolbarRoot = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     ...rest,
     ref: forwardedRef,
     className: clsx(styles.toolbarRoot, className),
+    "data-modern": enableModernizedComponents,
     children: children
   });
 });

package/dist/lib-esm/toolbar/toolbar-text-toggle-item.js

@@ -2,6 +2,7 @@ import { jsx } from 'react/jsx-runtime';
 import * as ToolbarPrimitive from '@radix-ui/react-toolbar';
 import clsx from 'clsx';
 import { forwardRef } from 'react';
+import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 import styles from './toolbar.module.js';
 
 const ToolbarTextToggleItem = /*#__PURE__*/forwardRef((props, forwardedRef) => {
@@ -9,10 +10,14 @@ const ToolbarTextToggleItem = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     children,
     ...rest
   } = props;
+  const {
+    enableModernizedComponents
+  } = useBlueprintModernization();
   return jsx(ToolbarPrimitive.ToggleItem, {
     ...rest,
     ref: forwardedRef,
     className: clsx(styles.toolbarItem, styles.toolbarTextToggleItem),
+    "data-modern": enableModernizedComponents,
     children: children
   });
 });

package/dist/lib-esm/toolbar/toolbar-toggle-group.js

@@ -2,6 +2,7 @@ import { jsx } from 'react/jsx-runtime';
 import * as ToolbarPrimitive from '@radix-ui/react-toolbar';
 import clsx from 'clsx';
 import { forwardRef } from 'react';
+import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 import styles from './toolbar.module.js';
 
 const ToolbarToggleGroup = /*#__PURE__*/forwardRef((props, forwardedRef) => {
@@ -10,10 +11,14 @@ const ToolbarToggleGroup = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     className,
     ...rest
   } = props;
+  const {
+    enableModernizedComponents
+  } = useBlueprintModernization();
   return jsx(ToolbarPrimitive.ToggleGroup, {
     ...rest,
     ref: forwardedRef,
     className: clsx(styles.toggleGroup, className),
+    "data-modern": enableModernizedComponents,
     children: children
   });
 });

package/dist/lib-esm/toolbar/toolbar-toggle-item.js

@@ -3,6 +3,7 @@ import { Size5, IconIconOnLight } from '@box/blueprint-web-assets/tokens/tokens'
 import * as ToolbarPrimitive from '@radix-ui/react-toolbar';
 import clsx from 'clsx';
 import { forwardRef, createElement } from 'react';
+import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 import styles from './toolbar.module.js';
 
 const ToolbarToggleItem = /*#__PURE__*/forwardRef((props, forwardedRef) => {
@@ -12,10 +13,14 @@ const ToolbarToggleItem = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     color = IconIconOnLight,
     ...rest
   } = props;
+  const {
+    enableModernizedComponents
+  } = useBlueprintModernization();
   return jsxs(ToolbarPrimitive.ToggleItem, {
     ...rest,
     ref: forwardedRef,
     className: clsx(styles.toolbarItem, styles.toolbarToggle),
+    "data-modern": enableModernizedComponents,
     children: [children, /*#__PURE__*/createElement(icon, {
       height: Size5,
       width: Size5,

package/dist/lib-esm/toolbar/toolbar.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"toolbarRoot":"bp_toolbar_module_toolbarRoot--b3c70","scrollButtonWrapper":"bp_toolbar_module_scrollButtonWrapper--b3c70","hidden":"bp_toolbar_module_hidden--b3c70","scrollableChildrenWrapper":"bp_toolbar_module_scrollableChildrenWrapper--b3c70","separator":"bp_toolbar_module_separator--b3c70","toggleGroup":"bp_toolbar_module_toggleGroup--b3c70","toolbarItem":"bp_toolbar_module_toolbarItem--b3c70","toolbarToggle":"bp_toolbar_module_toolbarToggle--b3c70","dropdownIndicator":"bp_toolbar_module_dropdownIndicator--b3c70","invertCaret":"bp_toolbar_module_invertCaret--b3c70","triggerButtonSelectedWithColor":"bp_toolbar_module_triggerButtonSelectedWithColor--b3c70","toolbarIcon":"bp_toolbar_module_toolbarIcon--b3c70","toolbarTextToggleItem":"bp_toolbar_module_toolbarTextToggleItem--b3c70"};
+var styles = {"dropdownIndicator":"bp_toolbar_module_dropdownIndicator--73857","invertCaret":"bp_toolbar_module_invertCaret--73857","toolbarRoot":"bp_toolbar_module_toolbarRoot--73857","ScrollableToolbarWithReducedPadding":"bp_toolbar_module_ScrollableToolbarWithReducedPadding--73857","toolbarItem":"bp_toolbar_module_toolbarItem--73857","triggerButtonSelectedWithColor":"bp_toolbar_module_triggerButtonSelectedWithColor--73857","toggleGroup":"bp_toolbar_module_toggleGroup--73857","scrollButtonWrapper":"bp_toolbar_module_scrollButtonWrapper--73857","hidden":"bp_toolbar_module_hidden--73857","scrollableChildrenWrapper":"bp_toolbar_module_scrollableChildrenWrapper--73857","separator":"bp_toolbar_module_separator--73857","toolbarToggle":"bp_toolbar_module_toolbarToggle--73857","toolbarIcon":"bp_toolbar_module_toolbarIcon--73857","toolbarTextToggleItem":"bp_toolbar_module_toolbarTextToggleItem--73857"};
 
 export { styles as default };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "12.59.4",
+    "version": "12.60.0",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {