@box/blueprint-web 17.11.3 → 17.11.5

package/dist/lib-esm/components.css

@@ -12394,7 +12394,9 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
 .bp_menu_combobox_module_menuCloseButton--88105{
   grid-area:close;
 }
-.bp_notification_module_viewport--c9108{
+
+.bp_notification_module_viewport--3428d{
+  --notification-width:35rem;
   --notification-viewport-space:var(--space-4);
   --notification-viewport-item-spacing:var(--space-3);
   all:unset;
@@ -12409,10 +12411,11 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   z-index:var(--z-index-notification);
 }
 
-.bp_notification_module_root--c9108[data-modern=false]{
+.bp_notification_module_root--3428d[data-modern=false]{
   --notification-padding-vertical:var(--space-3);
   --notification-padding-horizontal:var(--space-4);
   --notification-item-spacing:var(--space-3);
+  --notification-item-row-spacing:var(--space-4);
   --notification-radius:var(--radius-3);
   --notification-border:var(--border-2);
   --notification-shadow:var(--dropshadow-3);
@@ -12430,7 +12433,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   --notification-icon-size:var(--size-8);
   --notification-icon-margin:0.375rem;
 }
-.bp_notification_module_root--c9108[data-modern=false] .bp_notification_module_text--c9108{
+.bp_notification_module_root--3428d[data-modern=false] .bp_notification_module_text--3428d{
   font-family:var(--body-default-bold-font-family);
   font-size:var(--body-default-bold-font-size);
   font-weight:var(--body-default-bold-font-weight);
@@ -12440,10 +12443,11 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   text-transform:var(--body-default-bold-text-case);
 }
 
-.bp_notification_module_root--c9108[data-modern=true]{
+.bp_notification_module_root--3428d[data-modern=true]{
   --notification-padding-vertical:var(--bp-space-030);
   --notification-padding-horizontal:var(--bp-space-040);
   --notification-item-spacing:var(--bp-space-030);
+  --notification-item-row-spacing:var(--bp-space-040);
   --notification-radius:var(--bp-radius-16);
   --notification-border:var(--bp-border-02);
   --notification-shadow:var(--dropshadow-3);
@@ -12463,7 +12467,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   --notification-icon-size:var(--bp-size-080);
   --notification-icon-margin:0.375rem;
 }
-.bp_notification_module_root--c9108[data-modern=true] .bp_notification_module_text--c9108{
+.bp_notification_module_root--3428d[data-modern=true] .bp_notification_module_text--3428d{
   font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:var(--bp-font-size-05);
   font-style:normal;
@@ -12471,7 +12475,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   letter-spacing:var(--bp-font-letter-spacing-01);
   line-height:var(--bp-font-line-height-04);
 }
-:where(body.is-inter-font) .bp_notification_module_root--c9108[data-modern=true] .bp_notification_module_text--c9108{
+:where(body.is-inter-font) .bp_notification_module_root--3428d[data-modern=true] .bp_notification_module_text--3428d{
   font-family:"Inter Variable", -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:.875rem;
   font-style:normal;
@@ -12482,145 +12486,115 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   text-transform:none;
 }
 
-.bp_notification_module_root--c9108[data-modern=true].bp_notification_module_info--c9108{
+.bp_notification_module_root--3428d[data-modern=true].bp_notification_module_info--3428d{
   background:linear-gradient(0deg, var(--notification-background-info) 0, var(--notification-background-info) 100%), var(--notification-background-overlay);
 }
-.bp_notification_module_root--c9108[data-modern=true].bp_notification_module_success--c9108{
+.bp_notification_module_root--3428d[data-modern=true].bp_notification_module_success--3428d{
   background:linear-gradient(0deg, var(--notification-background-success) 0, var(--notification-background-success) 100%), var(--notification-background-overlay);
 }
-.bp_notification_module_root--c9108[data-modern=true].bp_notification_module_warning--c9108{
+.bp_notification_module_root--3428d[data-modern=true].bp_notification_module_warning--3428d{
   background:linear-gradient(0deg, var(--notification-background-warning) 0, var(--notification-background-warning) 100%), var(--notification-background-overlay);
 }
-.bp_notification_module_root--c9108[data-modern=true].bp_notification_module_error--c9108{
+.bp_notification_module_root--3428d[data-modern=true].bp_notification_module_error--3428d{
   background:linear-gradient(0deg, var(--notification-background-error) 0, var(--notification-background-error) 100%), var(--notification-background-overlay);
 }
 
-.bp_notification_module_root--c9108{
+.bp_notification_module_root--3428d{
   backdrop-filter:blur(var(--notification-background-blur));
   border:var(--notification-border) solid;
   border-radius:var(--notification-radius);
   box-shadow:var(--notification-shadow);
+  box-sizing:border-box;
   display:flex;
-  max-width:288px;
+  max-width:min(var(--notification-width), 100vw - var(--bp-space-040, var(--space-4)) * 2);
   padding:var(--notification-padding-vertical) var(--notification-padding-horizontal);
-  width:max-content;
-}
-@media (width > 374px){
-  .bp_notification_module_root--c9108{
-    max-width:343px;
-  }
+  width:min(var(--notification-width), 100vw - var(--bp-space-040, var(--space-4)) * 2);
 }
-@media (width > 767px){
-  .bp_notification_module_root--c9108{
-    max-width:728px;
-  }
-}
-@media (width > 1023px){
-  .bp_notification_module_root--c9108{
-    max-width:848px;
-  }
-}
-@media (width > 1219px){
-  .bp_notification_module_root--c9108{
-    max-width:896px;
-  }
-}
-.bp_notification_module_root--c9108 .bp_notification_module_container--c9108{
+.bp_notification_module_root--3428d .bp_notification_module_container--3428d{
   align-items:flex-start;
   display:flex;
   gap:var(--notification-item-spacing);
+  min-width:0;
   width:100%;
 }
-@media (width > 767px){
-  .bp_notification_module_root--c9108 .bp_notification_module_container--c9108{
-    align-items:center;
-  }
-}
-.bp_notification_module_root--c9108 .bp_notification_module_mobileContainer--c9108{
-  align-items:left;
+.bp_notification_module_root--3428d .bp_notification_module_messageRow--3428d{
+  align-items:center;
   display:flex;
-  flex-direction:column;
+  flex:1 1 auto;
+  flex-wrap:wrap;
+  min-width:0;
   overflow:hidden;
   width:100%;
 }
-@media (width > 767px){
-  .bp_notification_module_root--c9108 .bp_notification_module_mobileContainer--c9108{
-    align-items:center;
-    flex-direction:row;
-  }
+.bp_notification_module_root--3428d .bp_notification_module_withButtons--3428d{
+  gap:var(--notification-item-row-spacing) var(--notification-item-spacing);
 }
-.bp_notification_module_root--c9108 .bp_notification_module_withButtons--c9108{
-  gap:var(--notification-item-spacing);
-}
-.bp_notification_module_root--c9108.bp_notification_module_info--c9108{
+.bp_notification_module_root--3428d.bp_notification_module_info--3428d{
   background:var(--notification-background-info);
   border-color:var(--notification-border-color-info);
 }
-.bp_notification_module_root--c9108.bp_notification_module_success--c9108{
+.bp_notification_module_root--3428d.bp_notification_module_success--3428d{
   background:var(--notification-background-success);
   border-color:var(--notification-border-color-success);
 }
-.bp_notification_module_root--c9108.bp_notification_module_warning--c9108{
+.bp_notification_module_root--3428d.bp_notification_module_warning--3428d{
   background:var(--notification-background-warning);
   border-color:var(--notification-border-color-warning);
 }
-.bp_notification_module_root--c9108.bp_notification_module_error--c9108{
+.bp_notification_module_root--3428d.bp_notification_module_error--3428d{
   background:var(--notification-background-error);
   border-color:var(--notification-border-color-error);
 }
-.bp_notification_module_root--c9108:focus-visible{
+.bp_notification_module_root--3428d: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--c9108 .bp_notification_module_typeIconContainer--c9108{
+.bp_notification_module_root--3428d .bp_notification_module_typeIconContainer--3428d{
   align-items:center;
   display:flex;
   height:var(--notification-icon-size);
   justify-content:center;
   width:var(--notification-icon-size);
 }
-.bp_notification_module_root--c9108 .bp_notification_module_typeIconContainer--c9108 .bp_notification_module_typeIcon--c9108{
+.bp_notification_module_root--3428d .bp_notification_module_typeIconContainer--3428d .bp_notification_module_typeIcon--3428d{
   flex-shrink:0;
   margin:var(--notification-icon-margin);
 }
-.bp_notification_module_root--c9108 .bp_notification_module_text--c9108{
+.bp_notification_module_root--3428d .bp_notification_module_text--3428d{
   align-items:center;
   color:var(--notification-text-color);
   display:flex;
+  flex:1 1 auto;
   gap:var(--notification-item-spacing);
   min-height:var(--notification-text-container-height);
+  min-width:0;
   overflow:hidden;
 }
-.bp_notification_module_root--c9108 .bp_notification_module_text--c9108 > div{
+.bp_notification_module_root--3428d .bp_notification_module_text--3428d > div{
   overflow:hidden;
   overflow-wrap:break-word;
 }
-.bp_notification_module_root--c9108 .bp_notification_module_contentButtonSection--c9108{
+.bp_notification_module_root--3428d .bp_notification_module_contentButtonSection--3428d{
   display:flex;
+  flex:0 0 auto;
   gap:var(--notification-item-spacing);
-  margin-left:0;
-}
-@media (width > 767px){
-  .bp_notification_module_root--c9108 .bp_notification_module_contentButtonSection--c9108{
-    margin-left:auto;
-  }
 }
-.bp_notification_module_root--c9108 .bp_notification_module_contentButtonSection--c9108 .bp_notification_module_contentButtons--c9108{
+.bp_notification_module_root--3428d .bp_notification_module_contentButtonSection--3428d .bp_notification_module_contentButtons--3428d{
   display:flex;
   gap:var(--notification-item-spacing);
 }
-.bp_notification_module_root--c9108 .bp_notification_module_contentButtonSection--c9108 .bp_notification_module_contentButtons--c9108 a,.bp_notification_module_root--c9108 .bp_notification_module_contentButtonSection--c9108 .bp_notification_module_contentButtons--c9108 button{
+.bp_notification_module_root--3428d .bp_notification_module_contentButtonSection--3428d .bp_notification_module_contentButtons--3428d a,.bp_notification_module_root--3428d .bp_notification_module_contentButtonSection--3428d .bp_notification_module_contentButtons--3428d button{
   cursor:pointer;
 }
-.bp_notification_module_root--c9108 .bp_notification_module_closeButtonSection--c9108{
+.bp_notification_module_root--3428d .bp_notification_module_closeButtonSection--3428d{
   display:flex;
   gap:var(--notification-item-spacing);
   margin-left:auto;
 }
-.bp_notification_module_root--c9108 .bp_notification_module_closeButtonSection--c9108 .bp_notification_module_closeButton--c9108{
+.bp_notification_module_root--3428d .bp_notification_module_closeButtonSection--3428d .bp_notification_module_closeButton--3428d{
   align-self:center;
 }
-.bp_notification_module_root--c9108 .bp_notification_module_closeButtonSection--c9108 .bp_notification_module_closeButton--c9108 svg *{
+.bp_notification_module_root--3428d .bp_notification_module_closeButtonSection--3428d .bp_notification_module_closeButton--3428d svg *{
   fill:currentcolor;
 }
 .bp_popover_module_popoverContentContainer--6fc5b .bp_popover_module_popoverCard--6fc5b .bp_popover_module_popoverMainContent--6fc5b,.bp_popover_module_popoverContentContainer--6fc5b.bp_popover_module_accessibilitySmallBreakpoint--6fc5b .bp_popover_module_popoverCard--6fc5b .bp_popover_module_popoverScrollContainer--6fc5b{

package/dist/lib-esm/index.css

@@ -12394,7 +12394,9 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
 .bp_menu_combobox_module_menuCloseButton--88105{
   grid-area:close;
 }
-.bp_notification_module_viewport--c9108{
+
+.bp_notification_module_viewport--3428d{
+  --notification-width:35rem;
   --notification-viewport-space:var(--space-4);
   --notification-viewport-item-spacing:var(--space-3);
   all:unset;
@@ -12409,10 +12411,11 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   z-index:var(--z-index-notification);
 }
 
-.bp_notification_module_root--c9108[data-modern=false]{
+.bp_notification_module_root--3428d[data-modern=false]{
   --notification-padding-vertical:var(--space-3);
   --notification-padding-horizontal:var(--space-4);
   --notification-item-spacing:var(--space-3);
+  --notification-item-row-spacing:var(--space-4);
   --notification-radius:var(--radius-3);
   --notification-border:var(--border-2);
   --notification-shadow:var(--dropshadow-3);
@@ -12430,7 +12433,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   --notification-icon-size:var(--size-8);
   --notification-icon-margin:0.375rem;
 }
-.bp_notification_module_root--c9108[data-modern=false] .bp_notification_module_text--c9108{
+.bp_notification_module_root--3428d[data-modern=false] .bp_notification_module_text--3428d{
   font-family:var(--body-default-bold-font-family);
   font-size:var(--body-default-bold-font-size);
   font-weight:var(--body-default-bold-font-weight);
@@ -12440,10 +12443,11 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   text-transform:var(--body-default-bold-text-case);
 }
 
-.bp_notification_module_root--c9108[data-modern=true]{
+.bp_notification_module_root--3428d[data-modern=true]{
   --notification-padding-vertical:var(--bp-space-030);
   --notification-padding-horizontal:var(--bp-space-040);
   --notification-item-spacing:var(--bp-space-030);
+  --notification-item-row-spacing:var(--bp-space-040);
   --notification-radius:var(--bp-radius-16);
   --notification-border:var(--bp-border-02);
   --notification-shadow:var(--dropshadow-3);
@@ -12463,7 +12467,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   --notification-icon-size:var(--bp-size-080);
   --notification-icon-margin:0.375rem;
 }
-.bp_notification_module_root--c9108[data-modern=true] .bp_notification_module_text--c9108{
+.bp_notification_module_root--3428d[data-modern=true] .bp_notification_module_text--3428d{
   font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:var(--bp-font-size-05);
   font-style:normal;
@@ -12471,7 +12475,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   letter-spacing:var(--bp-font-letter-spacing-01);
   line-height:var(--bp-font-line-height-04);
 }
-:where(body.is-inter-font) .bp_notification_module_root--c9108[data-modern=true] .bp_notification_module_text--c9108{
+:where(body.is-inter-font) .bp_notification_module_root--3428d[data-modern=true] .bp_notification_module_text--3428d{
   font-family:"Inter Variable", -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:.875rem;
   font-style:normal;
@@ -12482,145 +12486,115 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   text-transform:none;
 }
 
-.bp_notification_module_root--c9108[data-modern=true].bp_notification_module_info--c9108{
+.bp_notification_module_root--3428d[data-modern=true].bp_notification_module_info--3428d{
   background:linear-gradient(0deg, var(--notification-background-info) 0, var(--notification-background-info) 100%), var(--notification-background-overlay);
 }
-.bp_notification_module_root--c9108[data-modern=true].bp_notification_module_success--c9108{
+.bp_notification_module_root--3428d[data-modern=true].bp_notification_module_success--3428d{
   background:linear-gradient(0deg, var(--notification-background-success) 0, var(--notification-background-success) 100%), var(--notification-background-overlay);
 }
-.bp_notification_module_root--c9108[data-modern=true].bp_notification_module_warning--c9108{
+.bp_notification_module_root--3428d[data-modern=true].bp_notification_module_warning--3428d{
   background:linear-gradient(0deg, var(--notification-background-warning) 0, var(--notification-background-warning) 100%), var(--notification-background-overlay);
 }
-.bp_notification_module_root--c9108[data-modern=true].bp_notification_module_error--c9108{
+.bp_notification_module_root--3428d[data-modern=true].bp_notification_module_error--3428d{
   background:linear-gradient(0deg, var(--notification-background-error) 0, var(--notification-background-error) 100%), var(--notification-background-overlay);
 }
 
-.bp_notification_module_root--c9108{
+.bp_notification_module_root--3428d{
   backdrop-filter:blur(var(--notification-background-blur));
   border:var(--notification-border) solid;
   border-radius:var(--notification-radius);
   box-shadow:var(--notification-shadow);
+  box-sizing:border-box;
   display:flex;
-  max-width:288px;
+  max-width:min(var(--notification-width), 100vw - var(--bp-space-040, var(--space-4)) * 2);
   padding:var(--notification-padding-vertical) var(--notification-padding-horizontal);
-  width:max-content;
-}
-@media (width > 374px){
-  .bp_notification_module_root--c9108{
-    max-width:343px;
-  }
+  width:min(var(--notification-width), 100vw - var(--bp-space-040, var(--space-4)) * 2);
 }
-@media (width > 767px){
-  .bp_notification_module_root--c9108{
-    max-width:728px;
-  }
-}
-@media (width > 1023px){
-  .bp_notification_module_root--c9108{
-    max-width:848px;
-  }
-}
-@media (width > 1219px){
-  .bp_notification_module_root--c9108{
-    max-width:896px;
-  }
-}
-.bp_notification_module_root--c9108 .bp_notification_module_container--c9108{
+.bp_notification_module_root--3428d .bp_notification_module_container--3428d{
   align-items:flex-start;
   display:flex;
   gap:var(--notification-item-spacing);
+  min-width:0;
   width:100%;
 }
-@media (width > 767px){
-  .bp_notification_module_root--c9108 .bp_notification_module_container--c9108{
-    align-items:center;
-  }
-}
-.bp_notification_module_root--c9108 .bp_notification_module_mobileContainer--c9108{
-  align-items:left;
+.bp_notification_module_root--3428d .bp_notification_module_messageRow--3428d{
+  align-items:center;
   display:flex;
-  flex-direction:column;
+  flex:1 1 auto;
+  flex-wrap:wrap;
+  min-width:0;
   overflow:hidden;
   width:100%;
 }
-@media (width > 767px){
-  .bp_notification_module_root--c9108 .bp_notification_module_mobileContainer--c9108{
-    align-items:center;
-    flex-direction:row;
-  }
+.bp_notification_module_root--3428d .bp_notification_module_withButtons--3428d{
+  gap:var(--notification-item-row-spacing) var(--notification-item-spacing);
 }
-.bp_notification_module_root--c9108 .bp_notification_module_withButtons--c9108{
-  gap:var(--notification-item-spacing);
-}
-.bp_notification_module_root--c9108.bp_notification_module_info--c9108{
+.bp_notification_module_root--3428d.bp_notification_module_info--3428d{
   background:var(--notification-background-info);
   border-color:var(--notification-border-color-info);
 }
-.bp_notification_module_root--c9108.bp_notification_module_success--c9108{
+.bp_notification_module_root--3428d.bp_notification_module_success--3428d{
   background:var(--notification-background-success);
   border-color:var(--notification-border-color-success);
 }
-.bp_notification_module_root--c9108.bp_notification_module_warning--c9108{
+.bp_notification_module_root--3428d.bp_notification_module_warning--3428d{
   background:var(--notification-background-warning);
   border-color:var(--notification-border-color-warning);
 }
-.bp_notification_module_root--c9108.bp_notification_module_error--c9108{
+.bp_notification_module_root--3428d.bp_notification_module_error--3428d{
   background:var(--notification-background-error);
   border-color:var(--notification-border-color-error);
 }
-.bp_notification_module_root--c9108:focus-visible{
+.bp_notification_module_root--3428d: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--c9108 .bp_notification_module_typeIconContainer--c9108{
+.bp_notification_module_root--3428d .bp_notification_module_typeIconContainer--3428d{
   align-items:center;
   display:flex;
   height:var(--notification-icon-size);
   justify-content:center;
   width:var(--notification-icon-size);
 }
-.bp_notification_module_root--c9108 .bp_notification_module_typeIconContainer--c9108 .bp_notification_module_typeIcon--c9108{
+.bp_notification_module_root--3428d .bp_notification_module_typeIconContainer--3428d .bp_notification_module_typeIcon--3428d{
   flex-shrink:0;
   margin:var(--notification-icon-margin);
 }
-.bp_notification_module_root--c9108 .bp_notification_module_text--c9108{
+.bp_notification_module_root--3428d .bp_notification_module_text--3428d{
   align-items:center;
   color:var(--notification-text-color);
   display:flex;
+  flex:1 1 auto;
   gap:var(--notification-item-spacing);
   min-height:var(--notification-text-container-height);
+  min-width:0;
   overflow:hidden;
 }
-.bp_notification_module_root--c9108 .bp_notification_module_text--c9108 > div{
+.bp_notification_module_root--3428d .bp_notification_module_text--3428d > div{
   overflow:hidden;
   overflow-wrap:break-word;
 }
-.bp_notification_module_root--c9108 .bp_notification_module_contentButtonSection--c9108{
+.bp_notification_module_root--3428d .bp_notification_module_contentButtonSection--3428d{
   display:flex;
+  flex:0 0 auto;
   gap:var(--notification-item-spacing);
-  margin-left:0;
-}
-@media (width > 767px){
-  .bp_notification_module_root--c9108 .bp_notification_module_contentButtonSection--c9108{
-    margin-left:auto;
-  }
 }
-.bp_notification_module_root--c9108 .bp_notification_module_contentButtonSection--c9108 .bp_notification_module_contentButtons--c9108{
+.bp_notification_module_root--3428d .bp_notification_module_contentButtonSection--3428d .bp_notification_module_contentButtons--3428d{
   display:flex;
   gap:var(--notification-item-spacing);
 }
-.bp_notification_module_root--c9108 .bp_notification_module_contentButtonSection--c9108 .bp_notification_module_contentButtons--c9108 a,.bp_notification_module_root--c9108 .bp_notification_module_contentButtonSection--c9108 .bp_notification_module_contentButtons--c9108 button{
+.bp_notification_module_root--3428d .bp_notification_module_contentButtonSection--3428d .bp_notification_module_contentButtons--3428d a,.bp_notification_module_root--3428d .bp_notification_module_contentButtonSection--3428d .bp_notification_module_contentButtons--3428d button{
   cursor:pointer;
 }
-.bp_notification_module_root--c9108 .bp_notification_module_closeButtonSection--c9108{
+.bp_notification_module_root--3428d .bp_notification_module_closeButtonSection--3428d{
   display:flex;
   gap:var(--notification-item-spacing);
   margin-left:auto;
 }
-.bp_notification_module_root--c9108 .bp_notification_module_closeButtonSection--c9108 .bp_notification_module_closeButton--c9108{
+.bp_notification_module_root--3428d .bp_notification_module_closeButtonSection--3428d .bp_notification_module_closeButton--3428d{
   align-self:center;
 }
-.bp_notification_module_root--c9108 .bp_notification_module_closeButtonSection--c9108 .bp_notification_module_closeButton--c9108 svg *{
+.bp_notification_module_root--3428d .bp_notification_module_closeButtonSection--3428d .bp_notification_module_closeButton--3428d svg *{
   fill:currentcolor;
 }
 .bp_popover_module_popoverContentContainer--6fc5b .bp_popover_module_popoverCard--6fc5b .bp_popover_module_popoverMainContent--6fc5b,.bp_popover_module_popoverContentContainer--6fc5b.bp_popover_module_accessibilitySmallBreakpoint--6fc5b .bp_popover_module_popoverCard--6fc5b .bp_popover_module_popoverScrollContainer--6fc5b{

package/dist/lib-esm/index.js

@@ -119,6 +119,7 @@ export { useFullTextTooltip } from './utils/useFullTextTooltip.js';
 export { useIsEllipsized } from './utils/useIsEllipsized.js';
 export { getUniqueId, useUniqueId } from './utils/useUniqueId.js';
 export { VisuallyHidden } from './visually-hidden/visually-hidden.js';
+export { NOTIFICATION_COPY_MAX_LENGTH, truncateNotificationCopy } from './primitives/notification/truncate-notification-copy.js';
 export { PageGlobalHeaderSearchContainerPortal, PageHeaderEndElementsPortal, PageHeaderStartElementsPortal, PageSidePanelPortal, PageSubNavigationPortal } from './page/page-portal.js';
 export { useMainSectionSidebar, usePageNavigation, useSidePanel } from './page/page-context.js';
 export { useNotification } from './primitives/notification/notification-provider.js';

package/dist/lib-esm/primitives/notification/index.d.ts

@@ -1,6 +1,7 @@
 export { type NotificationButtonProps } from './notification-button';
 export { useNotification, type NotificationProviderProps } from './notification-provider';
 export { type NotificationViewportProps } from './notification.viewport';
+export { NOTIFICATION_COPY_MAX_LENGTH, truncateNotificationCopy } from './truncate-notification-copy';
 export declare const Notification: {
     Provider: import("react").FC<import("react").PropsWithChildren<import("@radix-ui/react-toast").ToastProviderProps>>;
     Button: {

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

@@ -4,6 +4,7 @@ import * as React from 'react';
 import { useState, useContext } from 'react';
 import { deepMerge } from '../../utils/deepMerge.js';
 import { getUniqueId } from '../../utils/useUniqueId.js';
+import { truncateNotificationCopy } from './truncate-notification-copy.js';
 
 const DEFAULT_NOTIFICATION_DELAY = 5000;
 const NotificationContext = /*#__PURE__*/React.createContext(null);
@@ -52,7 +53,7 @@ const NotificationProvider = props => {
       closeButtonAriaLabel,
       onClose: onClose(notificationId),
       sensitivity,
-      styledText,
+      styledText: truncateNotificationCopy(styledText),
       typeIconAriaLabel,
       variant
     };
@@ -77,8 +78,12 @@ const NotificationProvider = props => {
       if (oldNotificationProps === undefined) {
         return oldValue;
       }
+      const nextProps = newProps.styledText === undefined ? newProps : {
+        ...newProps,
+        styledText: truncateNotificationCopy(newProps.styledText)
+      };
       const newNotifications = new Map(oldValue);
-      newNotifications.set(id, deepMerge(oldNotificationProps, newProps));
+      newNotifications.set(id, deepMerge(oldNotificationProps, nextProps));
       return newNotifications;
     });
   }, []);

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

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

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

@@ -14,7 +14,11 @@ export interface PrivateNotificationElementProps extends ToastProps {
     typeIconAriaLabel: string;
     /** Aria label for the close button */
     closeButtonAriaLabel: string;
-    /** The main text of the notification. */
+    /**
+     * The main text of the notification.
+     * String copy is limited to 280 characters (`NOTIFICATION_COPY_MAX_LENGTH`); longer strings are truncated.
+     * React-node copy is not character-counted.
+     */
     styledText: StyledText;
     /** What to do on close. This is provided by addNotification by default */
     onClose?: () => void;

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

@@ -8,6 +8,7 @@ import clsx from 'clsx';
 import { useMemo } from 'react';
 import { IconButton } from '../icon-button/icon-button.js';
 import styles from './notification.module.js';
+import { truncateNotificationCopy } from './truncate-notification-copy.js';
 
 const createIconProps = iconLabel => ({
   className: styles.typeIcon,
@@ -73,13 +74,13 @@ function PrivateNotificationElement(props) {
         className: styles.typeIconContainer,
         children: iconComponent
       }), jsxs("div", {
-        className: clsx(styles.mobileContainer, {
+        className: clsx(styles.messageRow, {
           [styles.withButtons]: children
         }),
         children: [jsx("div", {
           className: styles.text,
           children: jsx(Toast.Description, {
-            children: styledText
+            children: truncateNotificationCopy(styledText)
           })
         }), jsx("div", {
           className: styles.contentButtonSection,

package/dist/lib-esm/primitives/notification/truncate-notification-copy.d.ts

@@ -0,0 +1,8 @@
+import { type StyledText } from '../../utils/commonTypes';
+/** Maximum character length for string `styledText` on a notification. */
+export declare const NOTIFICATION_COPY_MAX_LENGTH = 280;
+/**
+ * Truncates string notification copy to {@link NOTIFICATION_COPY_MAX_LENGTH}.
+ * Non-string `styledText` (React nodes) is returned unchanged — this does not walk children.
+ */
+export declare const truncateNotificationCopy: (copy: StyledText) => StyledText;

package/dist/lib-esm/primitives/notification/truncate-notification-copy.js

@@ -0,0 +1,14 @@
+/** Maximum character length for string `styledText` on a notification. */
+const NOTIFICATION_COPY_MAX_LENGTH = 280;
+/**
+ * Truncates string notification copy to {@link NOTIFICATION_COPY_MAX_LENGTH}.
+ * Non-string `styledText` (React nodes) is returned unchanged — this does not walk children.
+ */
+const truncateNotificationCopy = copy => {
+  if (typeof copy !== 'string' || copy.length <= NOTIFICATION_COPY_MAX_LENGTH) {
+    return copy;
+  }
+  return copy.slice(0, NOTIFICATION_COPY_MAX_LENGTH);
+};
+
+export { NOTIFICATION_COPY_MAX_LENGTH, truncateNotificationCopy };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "17.11.3",
+    "version": "17.11.5",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
@@ -55,7 +55,7 @@
     "dependencies": {
         "@ariakit/react": "0.4.21",
         "@ariakit/react-core": "0.4.21",
-        "@box/blueprint-web-assets": "^5.10.10",
+        "@box/blueprint-web-assets": "^5.10.12",
         "@internationalized/date": "^3.12.0",
         "@radix-ui/react-accordion": "1.1.2",
         "@radix-ui/react-checkbox": "1.0.4",
@@ -86,7 +86,7 @@
     "devDependencies": {
         "@box/box-test-client": "^3.2.7",
         "@box/playwright-utils": "^2.8.5",
-        "@box/storybook-utils": "^1.2.54",
+        "@box/storybook-utils": "^1.2.56",
         "@figma/code-connect": "1.4.4",
         "@playwright/test": "1.46.1",
         "@types/js-yaml": "^4.0.9",