@box/blueprint-web 12.59.4 → 12.60.1

package/dist/lib-esm/index.css

@@ -2974,7 +2974,7 @@
   --blueprint-select-border-error-left-width:none;
 }
 
-.bp_select_module_container--9a5e8[data-modern=false]{
+.bp_select_module_container--e4f69[data-modern=false]{
   --select-gap:var(--space-2);
   --select-label-color:var(--text-text-on-light);
   --select-trigger-btn-gap:var(--space-2);
@@ -3004,7 +3004,7 @@
   --select-trigger-btn-pencil-height:var(--size-4);
 }
 
-.bp_select_module_container--9a5e8[data-modern=true]{
+.bp_select_module_container--e4f69[data-modern=true]{
   --select-gap:var(--bp-space-020);
   --select-label-color:var(--bp-text-text-on-light);
   --select-trigger-btn-gap:var(--bp-space-020);
@@ -3034,7 +3034,7 @@
   --select-trigger-btn-pencil-height:var(--bp-size-040);
 }
 
-.bp_select_module_container--9a5e8{
+.bp_select_module_container--e4f69{
   display:flex;
   flex-direction:column;
   font-family:var(--body-default-font-family);
@@ -3047,10 +3047,10 @@
           text-decoration:var(--body-default-text-decoration);
   text-transform:var(--body-default-text-case);
 }
-.bp_select_module_container--9a5e8.bp_select_module_disabled--9a5e8{
+.bp_select_module_container--e4f69.bp_select_module_disabled--e4f69{
   opacity:60%;
 }
-.bp_select_module_container--9a5e8 .bp_select_module_label--9a5e8{
+.bp_select_module_container--e4f69 .bp_select_module_label--e4f69{
   color:var(--select-label-color);
   flex:0 0 fit-content;
   font-family:var(--body-default-bold-font-family);
@@ -3063,7 +3063,7 @@
           text-decoration:var(--body-default-bold-text-decoration);
   text-transform:var(--body-default-bold-text-case);
 }
-.bp_select_module_container--9a5e8 .bp_select_module_triggerBtn--9a5e8{
+.bp_select_module_container--e4f69 .bp_select_module_triggerBtn--e4f69{
   align-items:center;
   background-color:var(--select-trigger-btn-bg-color);
   border-bottom:var(--select-trigger-btn-border-bottom);
@@ -3092,58 +3092,58 @@
   text-transform:var(--body-default-text-case);
   width:100%;
 }
-.bp_select_module_container--9a5e8 .bp_select_module_triggerBtn--9a5e8 span:first-child{
+.bp_select_module_container--e4f69 .bp_select_module_triggerBtn--e4f69 span:first-child{
   overflow:hidden;
   text-overflow:ellipsis;
   white-space:nowrap;
 }
-.bp_select_module_container--9a5e8 .bp_select_module_triggerBtn--9a5e8:disabled{
+.bp_select_module_container--e4f69 .bp_select_module_triggerBtn--e4f69:disabled{
   cursor:default;
 }
-.bp_select_module_container--9a5e8 .bp_select_module_triggerBtn--9a5e8.bp_select_module_readonly--9a5e8:not(:disabled){
+.bp_select_module_container--e4f69 .bp_select_module_triggerBtn--e4f69.bp_select_module_readonly--e4f69:not(:disabled){
   background-color:var(--gray-02);
   box-shadow:none;
   color:var(--text-text-on-light-secondary);
   cursor:default;
 }
-.bp_select_module_container--9a5e8 .bp_select_module_triggerBtn--9a5e8:not(.bp_select_module_readonly--9a5e8):not(:disabled).bp_select_module_error--9a5e8,.bp_select_module_container--9a5e8 .bp_select_module_triggerBtn--9a5e8:not(.bp_select_module_readonly--9a5e8):not(:disabled)[aria-invalid=true]{
+.bp_select_module_container--e4f69 .bp_select_module_triggerBtn--e4f69:not(.bp_select_module_readonly--e4f69):not(:disabled).bp_select_module_error--e4f69,.bp_select_module_container--e4f69 .bp_select_module_triggerBtn--e4f69:not(.bp_select_module_readonly--e4f69):not(:disabled)[aria-invalid=true]{
   background-color:var(----select-trigger-btn-error-bg-color);
   border-bottom:var(--select-trigger-btn-error-border-bottom);
   border-left:var(--select-trigger-btn-error-border-left);
   border-right:var(--select-trigger-btn-error-border-right);
   border-top:var(--select-trigger-btn-error-border-top);
 }
-.bp_select_module_container--9a5e8 .bp_select_module_triggerBtn--9a5e8:not(.bp_select_module_readonly--9a5e8):focus,.bp_select_module_container--9a5e8 .bp_select_module_triggerBtn--9a5e8:not(.bp_select_module_readonly--9a5e8):not(:disabled).bp_select_module_error--9a5e8:focus,.bp_select_module_container--9a5e8 .bp_select_module_triggerBtn--9a5e8:not(.bp_select_module_readonly--9a5e8):not(:disabled)[aria-invalid=true]:focus{
+.bp_select_module_container--e4f69 .bp_select_module_triggerBtn--e4f69:not(.bp_select_module_readonly--e4f69):focus,.bp_select_module_container--e4f69 .bp_select_module_triggerBtn--e4f69:not(.bp_select_module_readonly--e4f69):not(:disabled).bp_select_module_error--e4f69:focus,.bp_select_module_container--e4f69 .bp_select_module_triggerBtn--e4f69:not(.bp_select_module_readonly--e4f69):not(:disabled)[aria-invalid=true]:focus{
   background-color:var(--select-trigger-btn-focus-bg-color);
   border:var(--select-trigger-btn-focus-border);
 }
-.bp_select_module_container--9a5e8 .bp_select_module_triggerBtn--9a5e8:not(.bp_select_module_readonly--9a5e8):not(:disabled):not(:focus):not(.bp_select_module_error--9a5e8):not([aria-invalid]):hover{
+.bp_select_module_container--e4f69 .bp_select_module_triggerBtn--e4f69:not(.bp_select_module_readonly--e4f69):not(:disabled):not(:focus):not(.bp_select_module_error--e4f69):not([aria-invalid]):hover{
   background-color:var(--select-trigger-btn-hover-bg-color);
   border-color:var(--select-trigger-btn-hover-border-color);
 }
-.bp_select_module_container--9a5e8 .bp_select_module_triggerBtn--9a5e8 .bp_select_module_iconWrapper--9a5e8{
+.bp_select_module_container--e4f69 .bp_select_module_triggerBtn--e4f69 .bp_select_module_iconWrapper--e4f69{
   flex-shrink:0;
   -webkit-user-select:none;
           user-select:none;
 }
-.bp_select_module_container--9a5e8 .bp_select_module_triggerBtn--9a5e8 .bp_select_module_iconCaret--9a5e8{
+.bp_select_module_container--e4f69 .bp_select_module_triggerBtn--e4f69 .bp_select_module_iconCaret--e4f69{
   display:block;
   height:var(--select-trigger-btn-caret-height);
   width:var(--select-trigger-btn-caret-width);
 }
-.bp_select_module_container--9a5e8 .bp_select_module_triggerBtn--9a5e8 .bp_select_module_iconCaret--9a5e8 path{
+.bp_select_module_container--e4f69 .bp_select_module_triggerBtn--e4f69 .bp_select_module_iconCaret--e4f69 path{
   fill:var(--select-trigger-btn-caret-color);
 }
-.bp_select_module_container--9a5e8 .bp_select_module_triggerBtn--9a5e8 .bp_select_module_iconPencilCrossed--9a5e8{
+.bp_select_module_container--e4f69 .bp_select_module_triggerBtn--e4f69 .bp_select_module_iconPencilCrossed--e4f69{
   display:block;
   height:var(--select-trigger-btn-pencil-height);
   width:var(--select-trigger-btn-pencil-width);
 }
-.bp_select_module_container--9a5e8 .bp_select_module_triggerBtn--9a5e8[data-state=open] .bp_select_module_icon--9a5e8{
+.bp_select_module_container--e4f69 .bp_select_module_triggerBtn--e4f69[data-state=open] .bp_select_module_icon--e4f69{
   transform:rotate(180deg);
 }
 
-.bp_select_module_content--9a5e8[data-modern=false]{
+.bp_select_module_content--e4f69[data-modern=false]{
   --select-content-bg-color:var(--surface-menu-surface);
   --select-content-backdrop-filter:none;
   --select-content-border:var(--border-1) solid var(--border-card-border);
@@ -3169,7 +3169,7 @@
   --select-content-viewport-option-separator-margin-block:var(--space-2);
 }
 
-.bp_select_module_content--9a5e8[data-modern=true]{
+.bp_select_module_content--e4f69[data-modern=true]{
   --select-content-bg-color:var(--bp-surface-menu-surface-dropdown);
   --select-content-backdrop-filter:blur(16px);
   --select-content-border:var(--bp-border-01) solid var(--bp-border-card-border);
@@ -3195,7 +3195,7 @@
   --select-content-viewport-option-separator-margin-block:var(--bp-space-020);
 }
 
-.bp_select_module_content--9a5e8{
+.bp_select_module_content--e4f69{
   backdrop-filter:var(--select-content-backdrop-filter);
   background-color:var(--select-content-bg-color);
   border:var(--select-content-border);
@@ -3215,11 +3215,11 @@
   text-transform:var(--body-default-text-case);
   z-index:380;
 }
-.bp_select_module_content--9a5e8 .bp_select_module_viewport--9a5e8{
+.bp_select_module_content--e4f69 .bp_select_module_viewport--e4f69{
   padding-block:var(--select-content-viewport-padding-block);
   padding-inline:var(--select-content-viewport-padding-inline);
 }
-.bp_select_module_content--9a5e8 .bp_select_module_viewport--9a5e8 .bp_select_module_option--9a5e8{
+.bp_select_module_content--e4f69 .bp_select_module_viewport--e4f69 .bp_select_module_option--e4f69{
   border:var(--select-content-viewport-option-border);
   border-radius:var(--select-content-viewport-option-border-radius);
   cursor:pointer;
@@ -3234,29 +3234,29 @@
   -webkit-user-select:none;
           user-select:none;
 }
-.bp_select_module_content--9a5e8 .bp_select_module_viewport--9a5e8 .bp_select_module_option--9a5e8[data-disabled]{
+.bp_select_module_content--e4f69 .bp_select_module_viewport--e4f69 .bp_select_module_option--e4f69[data-disabled]{
   opacity:60%;
   pointer-events:none;
 }
-.bp_select_module_content--9a5e8 .bp_select_module_viewport--9a5e8 .bp_select_module_option--9a5e8[data-highlighted]{
+.bp_select_module_content--e4f69 .bp_select_module_viewport--e4f69 .bp_select_module_option--e4f69[data-highlighted]{
   background-color:var(--select-content-viewport-option-focus-bg-color);
   border:var(--select-content-viewport-option-focus-border);
 }
-.bp_select_module_content--9a5e8 .bp_select_module_viewport--9a5e8 .bp_select_module_option--9a5e8:active{
+.bp_select_module_content--e4f69 .bp_select_module_viewport--e4f69 .bp_select_module_option--e4f69:active{
   background-color:var(--select-content-viewport-option-active-bg-color);
   border:var(--select-content-viewport-option-active-border);
 }
-.bp_select_module_content--9a5e8 .bp_select_module_viewport--9a5e8 .bp_select_module_option--9a5e8:hover{
+.bp_select_module_content--e4f69 .bp_select_module_viewport--e4f69 .bp_select_module_option--e4f69:hover{
   background-color:var(--select-content-viewport-option-hover-bg-color);
 }
-.bp_select_module_content--9a5e8 .bp_select_module_viewport--9a5e8 .bp_select_module_option--9a5e8 span:first-child{
+.bp_select_module_content--e4f69 .bp_select_module_viewport--e4f69 .bp_select_module_option--e4f69 span:first-child{
   overflow:hidden;
   overflow-wrap:break-word;
 }
-.bp_select_module_content--9a5e8 .bp_select_module_viewport--9a5e8 .bp_select_module_option--9a5e8 .bp_select_module_secondaryText--9a5e8{
+.bp_select_module_content--e4f69 .bp_select_module_viewport--e4f69 .bp_select_module_option--e4f69 .bp_select_module_secondaryText--e4f69{
   color:var(--select-content-viewport-option-secondary-text-color);
 }
-.bp_select_module_content--9a5e8 .bp_select_module_viewport--9a5e8 .bp_select_module_option--9a5e8 .bp_select_module_indicator--9a5e8{
+.bp_select_module_content--e4f69 .bp_select_module_viewport--e4f69 .bp_select_module_option--e4f69 .bp_select_module_indicator--e4f69{
   align-items:center;
   display:flex;
   height:var(--select-content-viewport-option-indicator-height);
@@ -3265,14 +3265,14 @@
   position:absolute;
   top:0;
 }
-.bp_select_module_content--9a5e8 .bp_select_module_viewport--9a5e8 .bp_select_module_option--9a5e8 .bp_select_module_indicator--9a5e8 path{
+.bp_select_module_content--e4f69 .bp_select_module_viewport--e4f69 .bp_select_module_option--e4f69 .bp_select_module_indicator--e4f69 path{
   fill:var(--select-content-viewport-option-indicator-color);
 }
-.bp_select_module_content--9a5e8 .bp_select_module_viewport--9a5e8 .bp_select_module_separator--9a5e8{
-  background-color:var(--select-content-bg-color-viewport-option-separator-bg-color);
+.bp_select_module_content--e4f69 .bp_select_module_viewport--e4f69 .bp_select_module_separator--e4f69{
+  background-color:var(--select-content-viewport-option-separator-bg-color);
   flex-shrink:0;
-  height:var(--select-content-bg-color-viewport-option-separator-height);
-  margin-block:var(--select-content-bg-color-viewport-option-separator-margin-block);
+  height:var(--select-content-viewport-option-separator-height);
+  margin-block:var(--select-content-viewport-option-separator-margin-block);
 }
 
 .bp_content_card_module_card--adb8d{
@@ -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/select/select.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"container":"bp_select_module_container--9a5e8","disabled":"bp_select_module_disabled--9a5e8","label":"bp_select_module_label--9a5e8","triggerBtn":"bp_select_module_triggerBtn--9a5e8","readonly":"bp_select_module_readonly--9a5e8","error":"bp_select_module_error--9a5e8","iconWrapper":"bp_select_module_iconWrapper--9a5e8","iconCaret":"bp_select_module_iconCaret--9a5e8","iconPencilCrossed":"bp_select_module_iconPencilCrossed--9a5e8","icon":"bp_select_module_icon--9a5e8","content":"bp_select_module_content--9a5e8","viewport":"bp_select_module_viewport--9a5e8","option":"bp_select_module_option--9a5e8","secondaryText":"bp_select_module_secondaryText--9a5e8","indicator":"bp_select_module_indicator--9a5e8","separator":"bp_select_module_separator--9a5e8"};
+var styles = {"container":"bp_select_module_container--e4f69","disabled":"bp_select_module_disabled--e4f69","label":"bp_select_module_label--e4f69","triggerBtn":"bp_select_module_triggerBtn--e4f69","readonly":"bp_select_module_readonly--e4f69","error":"bp_select_module_error--e4f69","iconWrapper":"bp_select_module_iconWrapper--e4f69","iconCaret":"bp_select_module_iconCaret--e4f69","iconPencilCrossed":"bp_select_module_iconPencilCrossed--e4f69","icon":"bp_select_module_icon--e4f69","content":"bp_select_module_content--e4f69","viewport":"bp_select_module_viewport--e4f69","option":"bp_select_module_option--e4f69","secondaryText":"bp_select_module_secondaryText--e4f69","indicator":"bp_select_module_indicator--e4f69","separator":"bp_select_module_separator--e4f69"};
 
 export { styles as default };

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.1",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {