@box/blueprint-web 12.87.0 → 12.88.0

package/dist/lib-esm/index.css

@@ -269,13 +269,13 @@
   }
 }
 
-.bp_base_button_module_button--72712[data-modern=true]{
+.bp_base_button_module_button--cc46d[data-modern=true]{
   --button-border-radius:var(--bp-radius-10);
 }
-.bp_base_button_module_button--72712[data-modern=true]:not(:disabled)[data-focus-visible]{
+.bp_base_button_module_button--cc46d[data-modern=true]:not(:disabled)[data-focus-visible]{
   box-shadow:0 0 0 var(--border-1, 1px) var(--background-background), 0 0 0 var(--border-3) var(--bp-outline-focus-on-light);
 }
-.bp_base_button_module_button--72712[data-modern=true].bp_base_button_module_primary--72712{
+.bp_base_button_module_button--cc46d[data-modern=true].bp_base_button_module_primary--cc46d{
   --button-color:var(--bp-text-text-on-dark);
   --button-background:var(--bp-surface-surface-brand);
   --button-border:var(--bp-border-01) solid var(--bp-surface-surface-brand);
@@ -284,7 +284,7 @@
   --button-active-background:var(--bp-surface-surface-brand-pressed);
   --button-active-border:var(--bp-border-01) solid var(--bp-surface-surface-brand-pressed);
 }
-.bp_base_button_module_button--72712[data-modern=true].bp_base_button_module_secondary--72712{
+.bp_base_button_module_button--cc46d[data-modern=true].bp_base_button_module_secondary--cc46d{
   --button-color:var(--bp-text-text-on-light);
   --button-background:var(--bp-surface-cta-surface-secondary);
   --button-border:var(--bp-border-01) solid var(--bp-border-cta-border-secondary);
@@ -294,14 +294,14 @@
   --button-active-border:var(--bp-border-01) solid var(--bp-border-cta-border-secondary);
   --button-backdrop-filter:blur(16px);
 }
-.bp_base_button_module_button--72712[data-modern=true].bp_base_button_module_tertiary--72712{
+.bp_base_button_module_button--cc46d[data-modern=true].bp_base_button_module_tertiary--cc46d{
   --button-color:var(--bp-text-cta-link);
   --button-background:var(--bp-surface-cta-surface-tertiary);
   --button-focus-or-hover-background:var(--bp-surface-cta-surface-tertiary-hover);
   --button-active-background:var(--bp-surface-cta-surface-tertiary-pressed);
   --button-backdrop-filter:blur(16px);
 }
-.bp_base_button_module_button--72712[data-modern=true].bp_base_button_module_outline--72712{
+.bp_base_button_module_button--cc46d[data-modern=true].bp_base_button_module_outline--cc46d{
   --button-color:var(--bp-text-text-on-light);
   --button-background:var(--bp-surface-cta-surface-secondary);
   --button-border:var(--bp-border-01) solid var(--bp-border-cta-border-high-contrast);
@@ -311,40 +311,42 @@
   --button-active-border:var(--bp-border-01) solid var(--bp-border-cta-border-high-contrast);
   --button-backdrop-filter:blur(16px);
 }
-.bp_base_button_module_button--72712[data-modern=true].bp_base_button_module_small--72712{
+.bp_base_button_module_button--cc46d[data-modern=true].bp_base_button_module_small--cc46d{
   --button-small-gap:var(--bp-space-010);
   --button-small-min-height:var(--bp-size-080);
   --button-small-padding:0 var(--bp-size-030);
 }
-.bp_base_button_module_button--72712[data-modern=true].bp_base_button_module_small--72712.bp_base_button_module_isIconButton--72712{
+.bp_base_button_module_button--cc46d[data-modern=true].bp_base_button_module_small--cc46d.bp_base_button_module_isIconButton--cc46d{
   --icon-button-small-width:var(--bp-size-080);
   --icon-button-small-height:var(--bp-size-080);
   --icon-button-small-padding:0 calc((var(--bp-size-080) - var(--bp-size-040))/2);
 }
-.bp_base_button_module_button--72712[data-modern=true].bp_base_button_module_small--72712.bp_base_button_module_isTextWithIconButton--72712{
+.bp_base_button_module_button--cc46d[data-modern=true].bp_base_button_module_small--cc46d.bp_base_button_module_isTextWithIconButton--cc46d{
   --button-small-padding:0 0.625rem 0 var(--bp-space-030);
 }
-.bp_base_button_module_button--72712[data-modern=true].bp_base_button_module_large--72712{
+.bp_base_button_module_button--cc46d[data-modern=true].bp_base_button_module_large--cc46d{
   --button-large-gap:var(--bp-space-020);
   --button-large-min-height:var(--bp-size-100);
   --button-large-padding:0 var(--bp-size-040);
+  --button-large-font-size:var(--body-large-bold-font-size);
+  --button-large-line-height:var(--body-large-bold-line-height);
 }
-.bp_base_button_module_button--72712[data-modern=true].bp_base_button_module_large--72712.bp_base_button_module_isIconButton--72712{
+.bp_base_button_module_button--cc46d[data-modern=true].bp_base_button_module_large--cc46d.bp_base_button_module_isIconButton--cc46d{
   --icon-button-large-width:var(--bp-size-100);
   --icon-button-large-height:var(--bp-size-100);
   --icon-button-large-padding:0 calc((var(--bp-size-100) - var(--bp-size-050))/2);
 }
-.bp_base_button_module_button--72712[data-modern=true].bp_base_button_module_large--72712.bp_base_button_module_isTextWithIconButton--72712{
+.bp_base_button_module_button--cc46d[data-modern=true].bp_base_button_module_large--cc46d.bp_base_button_module_isTextWithIconButton--cc46d{
   --button-large-padding:0 0.875rem 0 var(--bp-space-040);
 }
 
-.bp_base_button_module_button--72712[data-modern=false]{
+.bp_base_button_module_button--cc46d[data-modern=false]{
   --button-border-radius:var(--radius-2);
 }
-.bp_base_button_module_button--72712[data-modern=false]:not(:disabled)[data-focus-visible]{
+.bp_base_button_module_button--cc46d[data-modern=false]:not(:disabled)[data-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_base_button_module_button--72712[data-modern=false].bp_base_button_module_primary--72712{
+.bp_base_button_module_button--cc46d[data-modern=false].bp_base_button_module_primary--cc46d{
   --button-color:var(--text-text-brand-on-color);
   --button-background:var(--surface-surface-brand);
   --button-border:var(--border-1) solid var(--surface-surface-brand);
@@ -353,7 +355,7 @@
   --button-active-background:var(--surface-surface-brand-pressed);
   --button-active-border:var(--border-1) solid var(--surface-surface-brand-pressed);
 }
-.bp_base_button_module_button--72712[data-modern=false].bp_base_button_module_secondary--72712{
+.bp_base_button_module_button--cc46d[data-modern=false].bp_base_button_module_secondary--cc46d{
   --button-color:var(--text-text-on-light);
   --button-background:var(--surface-cta-surface-secondary);
   --button-border:var(--border-1) solid var(--border-cta-border-secondary);
@@ -363,7 +365,7 @@
   --button-active-border:var(--border-1) solid var(--border-cta-border-secondary-pressed);
   --button-backdrop-filter:none;
 }
-.bp_base_button_module_button--72712[data-modern=false].bp_base_button_module_tertiary--72712{
+.bp_base_button_module_button--cc46d[data-modern=false].bp_base_button_module_tertiary--cc46d{
   --button-color:var(--text-cta-link);
   --button-background:#0000;
   --button-border:var(--border-1) solid #0000;
@@ -371,7 +373,7 @@
   --button-active-background:var(--surface-cta-surface-tertiary-pressed);
   --button-backdrop-filter:none;
 }
-.bp_base_button_module_button--72712[data-modern=false].bp_base_button_module_outline--72712{
+.bp_base_button_module_button--cc46d[data-modern=false].bp_base_button_module_outline--cc46d{
   --button-color:var(--text-text-on-light);
   --button-background:var(--surface-cta-surface-outline);
   --button-border:var(--border-1) solid var(--border-cta-border-outline);
@@ -381,34 +383,36 @@
   --button-active-border:var(--border-1) solid var(--border-cta-border-outline-pressed);
   --button-backdrop-filter:none;
 }
-.bp_base_button_module_button--72712[data-modern=false].bp_base_button_module_small--72712{
+.bp_base_button_module_button--cc46d[data-modern=false].bp_base_button_module_small--cc46d{
   --button-small-gap:var(--space-1);
   --button-small-min-height:var(--size-8);
   --button-small-padding:0 var(--space-4);
 }
-.bp_base_button_module_button--72712[data-modern=false].bp_base_button_module_small--72712.bp_base_button_module_isIconButton--72712{
+.bp_base_button_module_button--cc46d[data-modern=false].bp_base_button_module_small--cc46d.bp_base_button_module_isIconButton--cc46d{
   --icon-button-small-width:var(--size-8);
   --icon-button-small-height:var(--size-8);
   --icon-button-small-padding:0 calc((var(--space-8) - var(--space-4))/2);
 }
-.bp_base_button_module_button--72712[data-modern=false].bp_base_button_module_small--72712.bp_base_button_module_isTextWithIconButton--72712{
+.bp_base_button_module_button--cc46d[data-modern=false].bp_base_button_module_small--cc46d.bp_base_button_module_isTextWithIconButton--cc46d{
   --button-small-padding:0 var(--space-3);
 }
-.bp_base_button_module_button--72712[data-modern=false].bp_base_button_module_large--72712{
+.bp_base_button_module_button--cc46d[data-modern=false].bp_base_button_module_large--cc46d{
   --button-large-gap:var(--space-2);
   --button-large-min-height:var(--size-10);
   --button-large-padding:0 var(--space-4);
+  --button-large-font-size:var(--body-default-bold-font-size);
+  --button-large-line-height:var(--body-default-bold-line-height);
 }
-.bp_base_button_module_button--72712[data-modern=false].bp_base_button_module_large--72712.bp_base_button_module_isIconButton--72712{
+.bp_base_button_module_button--cc46d[data-modern=false].bp_base_button_module_large--cc46d.bp_base_button_module_isIconButton--cc46d{
   --icon-button-large-width:var(--size-10);
   --icon-button-large-height:var(--size-10);
   --icon-button-large-padding:0 calc((var(--space-10) - var(--space-5))/2);
 }
-.bp_base_button_module_button--72712[data-modern=false].bp_base_button_module_large--72712.bp_base_button_module_isTextWithIconButton--72712{
+.bp_base_button_module_button--cc46d[data-modern=false].bp_base_button_module_large--cc46d.bp_base_button_module_isTextWithIconButton--cc46d{
   --button-large-padding:0 var(--space-4);
 }
 
-.bp_base_button_module_button--72712{
+.bp_base_button_module_button--cc46d{
   border-radius:var(--button-border-radius);
   cursor:pointer;
   font-family:var(--body-default-bold-font-family);
@@ -425,98 +429,100 @@
           user-select:none;
   white-space:nowrap;
 }
-.bp_base_button_module_button--72712,.bp_base_button_module_button--72712 .bp_base_button_module_icon--72712{
+.bp_base_button_module_button--cc46d,.bp_base_button_module_button--cc46d .bp_base_button_module_icon--cc46d{
   align-items:center;
   display:flex;
 }
-.bp_base_button_module_button--72712:disabled{
+.bp_base_button_module_button--cc46d:disabled{
   opacity:.3;
 }
-.bp_base_button_module_button--72712.bp_base_button_module_primary--72712{
+.bp_base_button_module_button--cc46d.bp_base_button_module_primary--cc46d{
   background:var(--button-background);
   border:var(--button-border);
   color:var(--button-color);
 }
-.bp_base_button_module_button--72712.bp_base_button_module_primary--72712:not(:disabled):hover,.bp_base_button_module_button--72712.bp_base_button_module_primary--72712:not(:disabled)[data-focus-visible]{
+.bp_base_button_module_button--cc46d.bp_base_button_module_primary--cc46d:not(:disabled):hover,.bp_base_button_module_button--cc46d.bp_base_button_module_primary--cc46d:not(:disabled)[data-focus-visible]{
   background:var(--button-focus-or-hover-background);
   border:var(--button-focus-or-hover-border);
 }
-.bp_base_button_module_button--72712.bp_base_button_module_primary--72712:not(:disabled):active{
+.bp_base_button_module_button--cc46d.bp_base_button_module_primary--cc46d:not(:disabled):active{
   background:var(--button-active-background);
   border:var(--button-active-border);
 }
-.bp_base_button_module_button--72712.bp_base_button_module_secondary--72712{
+.bp_base_button_module_button--cc46d.bp_base_button_module_secondary--cc46d{
   backdrop-filter:var(--button-backdrop-filter);
   background:var(--button-background);
   border:var(--button-border);
   color:var(--button-color);
 }
-.bp_base_button_module_button--72712.bp_base_button_module_secondary--72712:not(:disabled):hover,.bp_base_button_module_button--72712.bp_base_button_module_secondary--72712:not(:disabled)[data-focus-visible]{
+.bp_base_button_module_button--cc46d.bp_base_button_module_secondary--cc46d:not(:disabled):hover,.bp_base_button_module_button--cc46d.bp_base_button_module_secondary--cc46d:not(:disabled)[data-focus-visible]{
   background:var(--button-focus-or-hover-background);
   border:var(--button-focus-or-hover-border);
 }
-.bp_base_button_module_button--72712.bp_base_button_module_secondary--72712:not(:disabled):active{
+.bp_base_button_module_button--cc46d.bp_base_button_module_secondary--cc46d:not(:disabled):active{
   background:var(--button-active-background);
   border:var(--button-active-border);
 }
-.bp_base_button_module_button--72712.bp_base_button_module_tertiary--72712{
+.bp_base_button_module_button--cc46d.bp_base_button_module_tertiary--cc46d{
   backdrop-filter:var(--button-backdrop-filter);
   background:var(--button-background);
   border:var(--button-border);
   color:var(--button-color);
 }
-.bp_base_button_module_button--72712.bp_base_button_module_tertiary--72712:not(:disabled):hover,.bp_base_button_module_button--72712.bp_base_button_module_tertiary--72712:not(:disabled)[data-focus-visible]{
+.bp_base_button_module_button--cc46d.bp_base_button_module_tertiary--cc46d:not(:disabled):hover,.bp_base_button_module_button--cc46d.bp_base_button_module_tertiary--cc46d:not(:disabled)[data-focus-visible]{
   background:var(--button-focus-or-hover-background);
 }
-.bp_base_button_module_button--72712.bp_base_button_module_tertiary--72712:not(:disabled):active{
+.bp_base_button_module_button--cc46d.bp_base_button_module_tertiary--cc46d:not(:disabled):active{
   background:var(--button-active-background);
 }
-.bp_base_button_module_button--72712.bp_base_button_module_outline--72712{
+.bp_base_button_module_button--cc46d.bp_base_button_module_outline--cc46d{
   backdrop-filter:var(--button-backdrop-filter);
   background:var(--button-background);
   border:var(--button-border);
   color:var(--button-color);
 }
-.bp_base_button_module_button--72712.bp_base_button_module_outline--72712:not(:disabled):hover,.bp_base_button_module_button--72712.bp_base_button_module_outline--72712:not(:disabled)[data-focus-visible]{
+.bp_base_button_module_button--cc46d.bp_base_button_module_outline--cc46d:not(:disabled):hover,.bp_base_button_module_button--cc46d.bp_base_button_module_outline--cc46d:not(:disabled)[data-focus-visible]{
   background:var(--button-focus-or-hover-background);
   border:var(--button-focus-or-hover-border);
 }
-.bp_base_button_module_button--72712.bp_base_button_module_outline--72712:not(:disabled):active{
+.bp_base_button_module_button--cc46d.bp_base_button_module_outline--cc46d:not(:disabled):active{
   background:var(--button-active-background);
   border:var(--button-active-border);
 }
-.bp_base_button_module_button--72712.bp_base_button_module_small--72712{
+.bp_base_button_module_button--cc46d.bp_base_button_module_small--cc46d{
   gap:var(--button-small-gap);
   min-height:var(--button-small-min-height);
   padding:var(--button-small-padding);
 }
-.bp_base_button_module_button--72712.bp_base_button_module_small--72712.bp_base_button_module_isIconButton--72712{
+.bp_base_button_module_button--cc46d.bp_base_button_module_small--cc46d.bp_base_button_module_isIconButton--cc46d{
   height:var(--icon-button-small-height);
   min-height:unset;
   padding:var(--icon-button-small-padding);
   width:var(--icon-button-small-width);
 }
-.bp_base_button_module_button--72712.bp_base_button_module_small--72712.bp_base_button_module_isTextWithIconButton--72712{
+.bp_base_button_module_button--cc46d.bp_base_button_module_small--cc46d.bp_base_button_module_isTextWithIconButton--cc46d{
   padding:var(--button-small-padding);
 }
-.bp_base_button_module_button--72712.bp_base_button_module_large--72712{
+.bp_base_button_module_button--cc46d.bp_base_button_module_large--cc46d{
+  font-size:var(--button-large-font-size);
   gap:var(--button-large-gap);
+  line-height:var(--button-large-line-height);
   min-height:var(--button-large-min-height);
   padding:var(--button-large-padding);
 }
-.bp_base_button_module_button--72712.bp_base_button_module_large--72712.bp_base_button_module_isIconButton--72712{
+.bp_base_button_module_button--cc46d.bp_base_button_module_large--cc46d.bp_base_button_module_isIconButton--cc46d{
   height:var(--icon-button-large-height);
   padding:var(--icon-button-large-padding);
   width:var(--icon-button-large-width);
 }
-.bp_base_button_module_button--72712.bp_base_button_module_large--72712.bp_base_button_module_isTextWithIconButton--72712{
+.bp_base_button_module_button--cc46d.bp_base_button_module_large--cc46d.bp_base_button_module_isTextWithIconButton--cc46d{
   padding:var(--button-large-padding);
 }
-.bp_base_button_module_button--72712.bp_base_button_module_hide--72712{
+.bp_base_button_module_button--cc46d.bp_base_button_module_hide--cc46d{
   pointer-events:none;
   position:relative;
 }
-.bp_base_button_module_button--72712.bp_base_button_module_hide--72712 span{
+.bp_base_button_module_button--cc46d.bp_base_button_module_hide--cc46d span{
   color:#0000;
   opacity:0;
 }
@@ -7573,7 +7579,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   white-space:nowrap;
 }
 
-.bp_notification_module_viewport--055d9{
+.bp_notification_module_viewport--33c6e{
   --notification-viewport-space:var(--space-4);
   --notification-viewport-item-spacing:var(--space-3);
   all:unset;
@@ -7588,7 +7594,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   z-index:2147483647;
 }
 
-.bp_notification_module_root--055d9[data-modern=false]{
+.bp_notification_module_root--33c6e[data-modern=false]{
   --notification-padding-vertical:var(--space-3);
   --notification-padding-horizontal:var(--space-4);
   --notification-item-spacing:var(--space-3);
@@ -7607,9 +7613,10 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   --notification-text-color:var(--text-text-on-light);
   --notification-text-container-height:var(--space-8);
   --notification-icon-size:var(--size-8);
+  --notification-icon-margin:.375rem;
 }
 
-.bp_notification_module_root--055d9[data-modern=true]{
+.bp_notification_module_root--33c6e[data-modern=true]{
   --notification-padding-vertical:var(--bp-space-030);
   --notification-padding-horizontal:var(--bp-space-040);
   --notification-item-spacing:var(--bp-space-030);
@@ -7618,74 +7625,75 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   --notification-shadow:var(--dropshadow-3);
   --notification-background-info:var(--bp-light-blue-opacity-04);
   --notification-background-success:var(--bp-green-light-opacity-04);
-  --notification-background-warning:var(--bp-yellow-opacity-04);
+  --notification-background-warning:var(--bp-yellorange-opacity-04);
   --notification-background-error:var(--bp-watermelon-red-opacity-04);
   --notification-background-overlay:var(--bp-white-opacity-90);
   --notification-background-blur:16px;
-  --notification-border-color-info:var(--bp-light-blue-opacity-30);
-  --notification-border-color-success:var(--bp-green-light-opacity-30);
-  --notification-border-color-warning:var(--bp-yellow-opacity-30);
-  --notification-border-color-error:var(--bp-watermelon-red-opacity-30);
+  --notification-border-color-info:var(--bp-border-message-border-info-secondary);
+  --notification-border-color-success:var(--bp-border-message-border-success-secondary);
+  --notification-border-color-warning:var(--bp-border-message-border-warning-secondary);
+  --notification-border-color-error:var(--bp-border-message-border-error-secondary);
   --notification-outline-focus:var(--bp-outline-focus-on-light);
   --notification-text-color:var(--bp-text-text-on-light);
   --notification-text-container-height:var(--bp-space-080);
   --notification-icon-size:var(--bp-size-080);
+  --notification-icon-margin:.375rem;
 }
-.bp_notification_module_root--055d9[data-modern=true].bp_notification_module_info--055d9{
+.bp_notification_module_root--33c6e[data-modern=true].bp_notification_module_info--33c6e{
   background:linear-gradient(0deg, var(--notification-background-info) 0, var(--notification-background-info) 100%), var(--notification-background-overlay);
 }
-.bp_notification_module_root--055d9[data-modern=true].bp_notification_module_success--055d9{
+.bp_notification_module_root--33c6e[data-modern=true].bp_notification_module_success--33c6e{
   background:linear-gradient(0deg, var(--notification-background-success) 0, var(--notification-background-success) 100%), var(--notification-background-overlay);
 }
-.bp_notification_module_root--055d9[data-modern=true].bp_notification_module_warning--055d9{
+.bp_notification_module_root--33c6e[data-modern=true].bp_notification_module_warning--33c6e{
   background:linear-gradient(0deg, var(--notification-background-warning) 0, var(--notification-background-warning) 100%), var(--notification-background-overlay);
 }
-.bp_notification_module_root--055d9[data-modern=true].bp_notification_module_error--055d9{
+.bp_notification_module_root--33c6e[data-modern=true].bp_notification_module_error--33c6e{
   background:linear-gradient(0deg, var(--notification-background-error) 0, var(--notification-background-error) 100%), var(--notification-background-overlay);
 }
 
-.bp_notification_module_root--055d9{
+.bp_notification_module_root--33c6e{
   backdrop-filter:blur(var(--notification-background-blur));
   border:var(--notification-border) solid;
   border-radius:var(--notification-radius);
   box-shadow:var(--notification-shadow);
   display:flex;
   max-width:288px;
+  padding:var(--notification-padding-vertical) var(--notification-padding-horizontal);
   width:max-content;
 }
 @media (width > 374px){
-  .bp_notification_module_root--055d9{
+  .bp_notification_module_root--33c6e{
     max-width:343px;
   }
 }
 @media (width > 767px){
-  .bp_notification_module_root--055d9{
+  .bp_notification_module_root--33c6e{
     max-width:728px;
   }
 }
 @media (width > 1023px){
-  .bp_notification_module_root--055d9{
+  .bp_notification_module_root--33c6e{
     max-width:848px;
   }
 }
 @media (width > 1219px){
-  .bp_notification_module_root--055d9{
+  .bp_notification_module_root--33c6e{
     max-width:896px;
   }
 }
-.bp_notification_module_root--055d9 .bp_notification_module_container--055d9{
+.bp_notification_module_root--33c6e .bp_notification_module_container--33c6e{
   align-items:flex-start;
   display:flex;
   gap:var(--notification-item-spacing);
-  padding:var(--notification-padding-vertical) 0;
   width:100%;
 }
 @media (width > 767px){
-  .bp_notification_module_root--055d9 .bp_notification_module_container--055d9{
+  .bp_notification_module_root--33c6e .bp_notification_module_container--33c6e{
     align-items:center;
   }
 }
-.bp_notification_module_root--055d9 .bp_notification_module_mobileContainer--055d9{
+.bp_notification_module_root--33c6e .bp_notification_module_mobileContainer--33c6e{
   align-items:left;
   display:flex;
   flex-direction:column;
@@ -7693,46 +7701,46 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   width:100%;
 }
 @media (width > 767px){
-  .bp_notification_module_root--055d9 .bp_notification_module_mobileContainer--055d9{
+  .bp_notification_module_root--33c6e .bp_notification_module_mobileContainer--33c6e{
     align-items:center;
     flex-direction:row;
   }
 }
-.bp_notification_module_root--055d9 .bp_notification_module_withButtons--055d9{
+.bp_notification_module_root--33c6e .bp_notification_module_withButtons--33c6e{
   gap:var(--notification-item-spacing);
 }
-.bp_notification_module_root--055d9.bp_notification_module_info--055d9{
+.bp_notification_module_root--33c6e.bp_notification_module_info--33c6e{
   background:var(--notification-background-info);
   border-color:var(--notification-border-color-info);
 }
-.bp_notification_module_root--055d9.bp_notification_module_success--055d9{
+.bp_notification_module_root--33c6e.bp_notification_module_success--33c6e{
   background:var(--notification-background-success);
   border-color:var(--notification-border-color-success);
 }
-.bp_notification_module_root--055d9.bp_notification_module_warning--055d9{
+.bp_notification_module_root--33c6e.bp_notification_module_warning--33c6e{
   background:var(--notification-background-warning);
   border-color:var(--notification-border-color-warning);
 }
-.bp_notification_module_root--055d9.bp_notification_module_error--055d9{
+.bp_notification_module_root--33c6e.bp_notification_module_error--33c6e{
   background:var(--notification-background-error);
   border-color:var(--notification-border-color-error);
 }
-.bp_notification_module_root--055d9:focus-visible{
+.bp_notification_module_root--33c6e:focus-visible{
   box-shadow:0 0 0 var(--border-1, 1px) var(--background-background), 0 0 0 var(--border-3) var(--notification-outline-focus);
   outline:none;
 }
-.bp_notification_module_root--055d9 .bp_notification_module_typeIconContainer--055d9{
+.bp_notification_module_root--33c6e .bp_notification_module_typeIconContainer--33c6e{
   align-items:center;
   display:flex;
   height:var(--notification-icon-size);
   justify-content:center;
   width:var(--notification-icon-size);
 }
-.bp_notification_module_root--055d9 .bp_notification_module_typeIconContainer--055d9 .bp_notification_module_typeIcon--055d9{
+.bp_notification_module_root--33c6e .bp_notification_module_typeIconContainer--33c6e .bp_notification_module_typeIcon--33c6e{
   flex-shrink:0;
-  margin-left:var(--notification-padding-horizontal);
+  margin:var(--notification-icon-margin);
 }
-.bp_notification_module_root--055d9 .bp_notification_module_text--055d9{
+.bp_notification_module_root--33c6e .bp_notification_module_text--33c6e{
   align-items:center;
   color:var(--notification-text-color);
   display:flex;
@@ -7748,34 +7756,33 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
           text-decoration:var(--body-default-bold-text-decoration);
   text-transform:var(--body-default-bold-text-case);
 }
-.bp_notification_module_root--055d9 .bp_notification_module_text--055d9 > div{
+.bp_notification_module_root--33c6e .bp_notification_module_text--33c6e > div{
   overflow:hidden;
   overflow-wrap:break-word;
 }
-.bp_notification_module_root--055d9 .bp_notification_module_contentButtonSection--055d9{
+.bp_notification_module_root--33c6e .bp_notification_module_contentButtonSection--33c6e{
   display:flex;
   gap:var(--notification-item-spacing);
   margin-left:0;
 }
 @media (width > 767px){
-  .bp_notification_module_root--055d9 .bp_notification_module_contentButtonSection--055d9{
+  .bp_notification_module_root--33c6e .bp_notification_module_contentButtonSection--33c6e{
     margin-left:auto;
   }
 }
-.bp_notification_module_root--055d9 .bp_notification_module_contentButtonSection--055d9 .bp_notification_module_contentButtons--055d9{
+.bp_notification_module_root--33c6e .bp_notification_module_contentButtonSection--33c6e .bp_notification_module_contentButtons--33c6e{
   display:flex;
   gap:var(--notification-item-spacing);
 }
-.bp_notification_module_root--055d9 .bp_notification_module_closeButtonSection--055d9{
+.bp_notification_module_root--33c6e .bp_notification_module_closeButtonSection--33c6e{
   display:flex;
   gap:var(--notification-item-spacing);
   margin-left:auto;
-  margin-right:var(--notification-padding-horizontal);
 }
-.bp_notification_module_root--055d9 .bp_notification_module_closeButtonSection--055d9 .bp_notification_module_closeButton--055d9{
+.bp_notification_module_root--33c6e .bp_notification_module_closeButtonSection--33c6e .bp_notification_module_closeButton--33c6e{
   align-self:center;
 }
-.bp_notification_module_root--055d9 .bp_notification_module_closeButtonSection--055d9 .bp_notification_module_closeButton--055d9 svg *{
+.bp_notification_module_root--33c6e .bp_notification_module_closeButtonSection--33c6e .bp_notification_module_closeButton--33c6e svg *{
   fill:currentColor;
 }
 
@@ -9277,7 +9284,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
 .bp_trigger_button_module_triggerButton--5c49e.bp_trigger_button_module_large--5c49e.bp_trigger_button_module_startIcon--5c49e{
   padding-left:.625rem;
 }
-.bp_styles_module_splitButton--75e0b[data-modern=false]{
+.bp_styles_module_splitButton--92246[data-modern=false]{
   --split-button-left-width:100%;
   --split-button-left-gap-margin-inline-end:calc(var(--space-05)/2);
   --split-button-left-skip-right-border-border-inline-end-color:#0000;
@@ -9289,9 +9296,13 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   --split-button-right-svg-width:var(--size-3);
   --split-button-right-svg-height:var(--size-3);
   --split-button-right-element-border-color:var(--border-cta-border-secondary);
+  --split-button-right-element-secondary-background:var(--surface-cta-surface-secondary);
+  --split-button-right-element-secondary-focus-or-hover-background:var(--surface-cta-surface-secondary-hover);
+  --split-button-right-element-secondary-active-background:var(--surface-cta-surface-secondary-pressed);
+  --split-button-right-element-secondary-backdrop-filter:none;
 }
 
-.bp_styles_module_splitButton--75e0b[data-modern=true]{
+.bp_styles_module_splitButton--92246[data-modern=true]{
   --split-button-left-width:100%;
   --split-button-left-gap-margin-inline-end:calc(var(--bp-space-005)/2);
   --split-button-left-skip-right-border-border-inline-end-color:#0000;
@@ -9301,61 +9312,73 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   --split-button-right-svg-width:var(--bp-size-040);
   --split-button-right-svg-height:var(--bp-size-040);
   --split-button-right-element-border-color:var(--bp-border-cta-border-secondary);
+  --split-button-right-element-secondary-background:var(--bp-surface-cta-surface-secondary);
+  --split-button-right-element-secondary-focus-or-hover-background:var(--bp-surface-cta-surface-secondary-hover);
+  --split-button-right-element-secondary-active-background:var(--bp-surface-cta-surface-secondary-pressed);
+  --split-button-right-element-secondary-backdrop-filter:blur(16px);
 }
 
-.bp_styles_module_dropdown--75e0b[data-modern=false],.bp_styles_module_dropdown--75e0b[data-modern=true]{
+.bp_styles_module_dropdown--92246[data-modern=false],.bp_styles_module_dropdown--92246[data-modern=true]{
   --split-button-dropdown-min-width:160px;
 }
 
-.bp_styles_module_splitButton--75e0b{
+.bp_styles_module_splitButton--92246{
   display:inline-flex;
   position:relative;
 }
-.bp_styles_module_splitButton--75e0b .bp_styles_module_splitButtonLeft--75e0b{
+.bp_styles_module_splitButton--92246 .bp_styles_module_splitButtonLeft--92246{
   border-bottom-right-radius:0;
   border-top-right-radius:0;
   padding:var(--split-button-left-element-padding);
   width:var(--split-button-left-width);
 }
-.bp_styles_module_splitButton--75e0b .bp_styles_module_splitButtonLeft--75e0b.bp_styles_module_gap--75e0b{
+.bp_styles_module_splitButton--92246 .bp_styles_module_splitButtonLeft--92246.bp_styles_module_gap--92246{
   margin-inline-end:var(--split-button-left-gap-margin-inline-end);
 }
-.bp_styles_module_splitButton--75e0b .bp_styles_module_splitButtonLeft--75e0b:focus-visible{
+.bp_styles_module_splitButton--92246 .bp_styles_module_splitButtonLeft--92246:focus-visible{
   z-index:1;
 }
-.bp_styles_module_splitButton--75e0b .bp_styles_module_splitButtonLeft--75e0b.bp_styles_module_skipRightBorder--75e0b{
+.bp_styles_module_splitButton--92246 .bp_styles_module_splitButtonLeft--92246.bp_styles_module_skipRightBorder--92246{
   border-inline-end-color:var(--split-button-left-skip-right-border-border-inline-end-color) !important;
 }
-.bp_styles_module_splitButton--75e0b .bp_styles_module_splitButtonLeft--75e0b.bp_styles_module_skipRightBorder--75e0b:focus-visible{
+.bp_styles_module_splitButton--92246 .bp_styles_module_splitButtonLeft--92246.bp_styles_module_skipRightBorder--92246:focus-visible{
   border-inline-end-color:var(--split-button-left-skip-right-border-focus-visible-border-inline-end-color) !important;
 }
-.bp_styles_module_splitButton--75e0b .bp_styles_module_loadingButton--75e0b{
+.bp_styles_module_splitButton--92246 .bp_styles_module_loadingButton--92246{
   width:100%;
 }
-.bp_styles_module_splitButton--75e0b .bp_styles_module_splitButtonRight--75e0b{
+.bp_styles_module_splitButton--92246 .bp_styles_module_splitButtonRight--92246{
   border-end-start-radius:0;
   border-start-start-radius:0;
   padding:var(--split-button-right-element-padding) !important;
 }
-.bp_styles_module_splitButton--75e0b .bp_styles_module_splitButtonRight--75e0b svg{
+.bp_styles_module_splitButton--92246 .bp_styles_module_splitButtonRight--92246 svg{
   height:var(--split-button-right-svg-height);
   width:var(--split-button-right-svg-width);
 }
-.bp_styles_module_splitButton--75e0b .bp_styles_module_splitButtonRight--75e0b:focus-visible{
+.bp_styles_module_splitButton--92246 .bp_styles_module_splitButtonRight--92246:focus-visible{
   z-index:1;
 }
-.bp_styles_module_splitButton--75e0b .bp_styles_module_splitButtonRight--75e0b.bp_styles_module_secondary--75e0b,.bp_styles_module_splitButton--75e0b .bp_styles_module_splitButtonRight--75e0b.bp_styles_module_secondary--75e0b:active,.bp_styles_module_splitButton--75e0b .bp_styles_module_splitButtonRight--75e0b.bp_styles_module_secondary--75e0b:focus-visible,.bp_styles_module_splitButton--75e0b .bp_styles_module_splitButtonRight--75e0b.bp_styles_module_secondary--75e0b:hover{
+.bp_styles_module_splitButton--92246 .bp_styles_module_splitButtonRight--92246.bp_styles_module_secondary--92246{
+  backdrop-filter:var(--split-button-right-element-secondary-backdrop-filter);
+  background:var(--split-button-right-element-secondary-background);
   border-color:var(--split-button-right-element-border-color);
 }
+.bp_styles_module_splitButton--92246 .bp_styles_module_splitButtonRight--92246.bp_styles_module_secondary--92246:focus-visible,.bp_styles_module_splitButton--92246 .bp_styles_module_splitButtonRight--92246.bp_styles_module_secondary--92246:hover{
+  background:var(--split-button-right-element-secondary-focus-or-hover-background);
+}
+.bp_styles_module_splitButton--92246 .bp_styles_module_splitButtonRight--92246.bp_styles_module_secondary--92246:active{
+  background:var(--split-button-right-element-secondary-active-background);
+}
 
-.bp_styles_module_invisible--75e0b{
+.bp_styles_module_invisible--92246{
   left:0;
   position:absolute;
   top:0;
   visibility:hidden;
 }
 
-.bp_styles_module_dropdown--75e0b{
+.bp_styles_module_dropdown--92246{
   min-width:var(--split-button-dropdown-min-width);
 }
 

package/dist/lib-esm/primitives/base-button/base-button.module.js

@@ -1,4 +1,4 @@
 import '../../index.css';
-var styles = {"button":"bp_base_button_module_button--72712","primary":"bp_base_button_module_primary--72712","secondary":"bp_base_button_module_secondary--72712","tertiary":"bp_base_button_module_tertiary--72712","outline":"bp_base_button_module_outline--72712","small":"bp_base_button_module_small--72712","isIconButton":"bp_base_button_module_isIconButton--72712","isTextWithIconButton":"bp_base_button_module_isTextWithIconButton--72712","large":"bp_base_button_module_large--72712","icon":"bp_base_button_module_icon--72712","hide":"bp_base_button_module_hide--72712"};
+var styles = {"button":"bp_base_button_module_button--cc46d","primary":"bp_base_button_module_primary--cc46d","secondary":"bp_base_button_module_secondary--cc46d","tertiary":"bp_base_button_module_tertiary--cc46d","outline":"bp_base_button_module_outline--cc46d","small":"bp_base_button_module_small--cc46d","isIconButton":"bp_base_button_module_isIconButton--cc46d","isTextWithIconButton":"bp_base_button_module_isTextWithIconButton--cc46d","large":"bp_base_button_module_large--cc46d","icon":"bp_base_button_module_icon--cc46d","hide":"bp_base_button_module_hide--cc46d"};
 
 export { styles as default };

package/dist/lib-esm/primitives/notification/notification.module.js

@@ -1,4 +1,4 @@
 import '../../index.css';
-var styles = {"viewport":"bp_notification_module_viewport--055d9","root":"bp_notification_module_root--055d9","info":"bp_notification_module_info--055d9","success":"bp_notification_module_success--055d9","warning":"bp_notification_module_warning--055d9","error":"bp_notification_module_error--055d9","container":"bp_notification_module_container--055d9","mobileContainer":"bp_notification_module_mobileContainer--055d9","withButtons":"bp_notification_module_withButtons--055d9","typeIconContainer":"bp_notification_module_typeIconContainer--055d9","typeIcon":"bp_notification_module_typeIcon--055d9","text":"bp_notification_module_text--055d9","contentButtonSection":"bp_notification_module_contentButtonSection--055d9","contentButtons":"bp_notification_module_contentButtons--055d9","closeButtonSection":"bp_notification_module_closeButtonSection--055d9","closeButton":"bp_notification_module_closeButton--055d9"};
+var styles = {"viewport":"bp_notification_module_viewport--33c6e","root":"bp_notification_module_root--33c6e","info":"bp_notification_module_info--33c6e","success":"bp_notification_module_success--33c6e","warning":"bp_notification_module_warning--33c6e","error":"bp_notification_module_error--33c6e","container":"bp_notification_module_container--33c6e","mobileContainer":"bp_notification_module_mobileContainer--33c6e","withButtons":"bp_notification_module_withButtons--33c6e","typeIconContainer":"bp_notification_module_typeIconContainer--33c6e","typeIcon":"bp_notification_module_typeIcon--33c6e","text":"bp_notification_module_text--33c6e","contentButtonSection":"bp_notification_module_contentButtonSection--33c6e","contentButtons":"bp_notification_module_contentButtons--33c6e","closeButtonSection":"bp_notification_module_closeButtonSection--33c6e","closeButton":"bp_notification_module_closeButton--33c6e"};
 
 export { styles as default };

package/dist/lib-esm/primitives/notification/private-notification-element.d.ts

@@ -1,6 +1,7 @@
+import { AlertBadge } from '@box/blueprint-web-assets/icons/Line';
 import * as Toast from '@radix-ui/react-toast';
 import { type ToastProps } from '@radix-ui/react-toast';
-import { type ReactNode } from 'react';
+import { type ComponentProps, type ReactNode } from 'react';
 import { type StyledText } from '../../utils/commonTypes';
 export interface PrivateNotificationElementProps extends ToastProps {
     /** Governs the icon type and background color for the notification */
@@ -22,6 +23,9 @@ export interface PrivateNotificationElementProps extends ToastProps {
     /** This props should be Notification.Buttons only */
     children?: ReactNode;
 }
+export declare const createLegacyIconProps: (iconLabel: string) => ComponentProps<typeof AlertBadge>;
+export declare const createIconProps: (iconLabel: string) => ComponentProps<typeof AlertBadge>;
+export declare const getIcon: (iconLabel: string, variant: PrivateNotificationElementProps["variant"]) => ReactNode;
 /**
  * A base component mounted on a page when addNotification is invoked.
  *

package/dist/lib-esm/primitives/notification/private-notification-element.js

@@ -1,7 +1,8 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { XMark } from '@box/blueprint-web-assets/icons/Fill';
+import { XMark as XMark$1 } from '@box/blueprint-web-assets/icons/Fill';
 import { AlertTriangle, InfoBadge, CheckmarkBadge, AlertBadge } from '@box/blueprint-web-assets/icons/Line';
-import { Size5 } from '@box/blueprint-web-assets/tokens/tokens';
+import { XMark, AlertTriangle as AlertTriangle$1, InformationCircle, CheckmarkCircle, AlertCircle } from '@box/blueprint-web-assets/icons/Medium';
+import { Size5, bpSize050, bpIconIconOnLight } from '@box/blueprint-web-assets/tokens/tokens';
 import * as Toast from '@radix-ui/react-toast';
 import clsx from 'clsx';
 import { useMemo } from 'react';
@@ -9,13 +10,14 @@ import { useBlueprintModernization } from '../../blueprint-modernization-context
 import { IconButton } from '../icon-button/icon-button.js';
 import styles from './notification.module.js';
 
-const getIcon = (iconLabel, variant) => {
-  const props = {
-    className: styles.typeIcon,
-    'aria-label': iconLabel,
-    width: Size5,
-    height: Size5
-  };
+const createLegacyIconProps = iconLabel => ({
+  className: styles.typeIcon,
+  'aria-label': iconLabel,
+  width: Size5,
+  height: Size5
+});
+const getLegacyIcon = (iconLabel, variant) => {
+  const props = createLegacyIconProps(iconLabel);
   switch (variant) {
     case 'error':
       return jsx(AlertBadge, {
@@ -36,6 +38,35 @@ const getIcon = (iconLabel, variant) => {
   }
   return null;
 };
+const createIconProps = iconLabel => ({
+  className: styles.typeIcon,
+  'aria-label': iconLabel,
+  width: bpSize050,
+  height: bpSize050,
+  color: bpIconIconOnLight
+});
+const getIcon = (iconLabel, variant) => {
+  const props = createIconProps(iconLabel);
+  switch (variant) {
+    case 'error':
+      return jsx(AlertCircle, {
+        ...props
+      });
+    case 'success':
+      return jsx(CheckmarkCircle, {
+        ...props
+      });
+    case 'info':
+      return jsx(InformationCircle, {
+        ...props
+      });
+    case 'warning':
+      return jsx(AlertTriangle$1, {
+        ...props
+      });
+  }
+  return null;
+};
 /**
  * A base component mounted on a page when addNotification is invoked.
  *
@@ -56,10 +87,10 @@ function PrivateNotificationElement(props) {
     children,
     ...rest
   } = props;
-  const iconComponent = useMemo(() => getIcon(typeIconAriaLabel, variant), [typeIconAriaLabel, variant]);
   const {
     enableModernizedComponents
   } = useBlueprintModernization();
+  const iconComponent = useMemo(() => enableModernizedComponents ? getIcon(typeIconAriaLabel, variant) : getLegacyIcon(typeIconAriaLabel, variant), [typeIconAriaLabel, variant, enableModernizedComponents]);
   return jsx(Toast.Root, {
     ...rest,
     className: clsx(styles.root, styles[variant]),
@@ -95,7 +126,7 @@ function PrivateNotificationElement(props) {
           children: jsx(IconButton, {
             "aria-label": closeButtonAriaLabel,
             className: styles.closeButton,
-            icon: XMark,
+            icon: enableModernizedComponents ? XMark : XMark$1,
             onClick: onClose
           })
         })
@@ -104,4 +135,4 @@ function PrivateNotificationElement(props) {
   });
 }
 
-export { PrivateNotificationElement };
+export { PrivateNotificationElement, createIconProps, createLegacyIconProps, getIcon };

package/dist/lib-esm/split-button/styles.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"splitButton":"bp_styles_module_splitButton--75e0b","dropdown":"bp_styles_module_dropdown--75e0b","splitButtonLeft":"bp_styles_module_splitButtonLeft--75e0b","gap":"bp_styles_module_gap--75e0b","skipRightBorder":"bp_styles_module_skipRightBorder--75e0b","loadingButton":"bp_styles_module_loadingButton--75e0b","splitButtonRight":"bp_styles_module_splitButtonRight--75e0b","secondary":"bp_styles_module_secondary--75e0b","invisible":"bp_styles_module_invisible--75e0b"};
+var styles = {"splitButton":"bp_styles_module_splitButton--92246","dropdown":"bp_styles_module_dropdown--92246","splitButtonLeft":"bp_styles_module_splitButtonLeft--92246","gap":"bp_styles_module_gap--92246","skipRightBorder":"bp_styles_module_skipRightBorder--92246","loadingButton":"bp_styles_module_loadingButton--92246","splitButtonRight":"bp_styles_module_splitButtonRight--92246","secondary":"bp_styles_module_secondary--92246","invisible":"bp_styles_module_invisible--92246"};
 
 export { styles as default };

package/package.json

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