@box/blueprint-web 6.34.1 → 6.35.0

package/lib-esm/index.css

@@ -3943,7 +3943,7 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   background-color:var(--surface-menu-surface-focus);
 }
 
-.bp_notification_module_viewport--eadf7{
+.bp_notification_module_viewport--f8f52{
   all:unset;
   align-items:center;
   display:flex;
@@ -3956,46 +3956,93 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   z-index:2147483647;
 }
 
-.bp_notification_module_root--eadf7{
+.bp_notification_module_root--f8f52{
   border:var(--border-2) solid;
   border-radius:var(--radius-3);
   display:flex;
-  max-width:586px;
-  width:calc(100vw - var(--space-4)*2);
+  max-width:288px;
 }
-.bp_notification_module_root--eadf7 .bp_notification_module_container--eadf7{
-  align-items:center;
+@media (width > 374px){
+  .bp_notification_module_root--f8f52{
+    max-width:343px;
+  }
+}
+@media (width > 767px){
+  .bp_notification_module_root--f8f52{
+    max-width:728px;
+  }
+}
+@media (width > 1023px){
+  .bp_notification_module_root--f8f52{
+    max-width:848px;
+  }
+}
+@media (width > 1439px){
+  .bp_notification_module_root--f8f52{
+    max-width:896px;
+  }
+}
+.bp_notification_module_root--f8f52 .bp_notification_module_container--f8f52{
+  align-items:flex-start;
   box-shadow:var(--dropshadow-3);
   display:flex;
   gap:var(--space-3);
   padding:var(--space-3) 0;
   width:100%;
 }
-.bp_notification_module_root--eadf7.bp_notification_module_info--eadf7{
+@media (width > 767px){
+  .bp_notification_module_root--f8f52 .bp_notification_module_container--f8f52{
+    align-items:center;
+  }
+}
+.bp_notification_module_root--f8f52 .bp_notification_module_mobileContainer--f8f52{
+  align-items:left;
+  display:flex;
+  flex-direction:column;
+  overflow:hidden;
+  width:100%;
+}
+@media (width > 767px){
+  .bp_notification_module_root--f8f52 .bp_notification_module_mobileContainer--f8f52{
+    align-items:center;
+    flex-direction:row;
+  }
+}
+.bp_notification_module_root--f8f52 .bp_notification_module_withButtons--f8f52{
+  gap:var(--space-3);
+}
+.bp_notification_module_root--f8f52.bp_notification_module_info--f8f52{
   background:var(--surface-message-surface-info);
   border-color:var(--border-message-border-info);
 }
-.bp_notification_module_root--eadf7.bp_notification_module_success--eadf7{
+.bp_notification_module_root--f8f52.bp_notification_module_success--f8f52{
   background:var(--surface-message-surface-success);
   border-color:var(--border-message-border-success);
 }
-.bp_notification_module_root--eadf7.bp_notification_module_warning--eadf7{
+.bp_notification_module_root--f8f52.bp_notification_module_warning--f8f52{
   background:var(--surface-message-surface-warning);
   border-color:var(--border-message-border-warning);
 }
-.bp_notification_module_root--eadf7.bp_notification_module_error--eadf7{
+.bp_notification_module_root--f8f52.bp_notification_module_error--f8f52{
   background:var(--surface-message-surface-error);
   border-color:var(--border-message-border-error);
 }
-.bp_notification_module_root--eadf7:focus-visible{
+.bp_notification_module_root--f8f52:focus-visible{
   box-shadow:0 0 0 .0625rem #fff,0 0 0 .1875rem #2486fc;
   outline:none;
 }
-.bp_notification_module_root--eadf7 .bp_notification_module_typeIcon--eadf7{
+.bp_notification_module_root--f8f52 .bp_notification_module_typeIconContainer--f8f52{
+  align-items:center;
+  display:flex;
+  height:var(--size-8);
+  justify-content:center;
+  width:var(--size-8);
+}
+.bp_notification_module_root--f8f52 .bp_notification_module_typeIconContainer--f8f52 .bp_notification_module_typeIcon--f8f52{
   flex-shrink:0;
   margin-left:var(--space-4);
 }
-.bp_notification_module_root--eadf7 .bp_notification_module_text--eadf7{
+.bp_notification_module_root--f8f52 .bp_notification_module_text--f8f52{
   align-items:center;
   color:var(--text-text-on-light);
   display:flex;
@@ -4009,24 +4056,34 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   text-decoration:none;
   text-transform:none;
 }
-.bp_notification_module_root--eadf7 .bp_notification_module_text--eadf7 > div{
+.bp_notification_module_root--f8f52 .bp_notification_module_text--f8f52 > div{
   overflow:hidden;
   overflow-wrap:break-word;
 }
-.bp_notification_module_root--eadf7 .bp_notification_module_buttonSection--eadf7{
+.bp_notification_module_root--f8f52 .bp_notification_module_contentButtonSection--f8f52{
   display:flex;
   gap:var(--space-3);
-  margin-left:auto;
-  margin-right:var(--space-4);
+  margin-left:0;
 }
-.bp_notification_module_root--eadf7 .bp_notification_module_buttonSection--eadf7 .bp_notification_module_contentButtons--eadf7{
+@media (width > 767px){
+  .bp_notification_module_root--f8f52 .bp_notification_module_contentButtonSection--f8f52{
+    margin-left:auto;
+  }
+}
+.bp_notification_module_root--f8f52 .bp_notification_module_contentButtonSection--f8f52 .bp_notification_module_contentButtons--f8f52{
   display:flex;
   gap:var(--space-3);
 }
-.bp_notification_module_root--eadf7 .bp_notification_module_buttonSection--eadf7 .bp_notification_module_closeButton--eadf7{
+.bp_notification_module_root--f8f52 .bp_notification_module_closeButtonSection--f8f52{
+  display:flex;
+  gap:var(--space-3);
+  margin-left:auto;
+  margin-right:var(--space-4);
+}
+.bp_notification_module_root--f8f52 .bp_notification_module_closeButtonSection--f8f52 .bp_notification_module_closeButton--f8f52{
   align-self:center;
 }
-.bp_notification_module_root--eadf7 .bp_notification_module_buttonSection--eadf7 .bp_notification_module_closeButton--eadf7 svg *{
+.bp_notification_module_root--f8f52 .bp_notification_module_closeButtonSection--f8f52 .bp_notification_module_closeButton--f8f52 svg *{
   fill:currentColor;
 }
 

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

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

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

@@ -64,17 +64,28 @@ function PrivateNotificationElement(props) {
     type: sensitivity,
     children: jsxs("div", {
       className: styles.container,
-      children: [jsxs("div", {
-        className: styles.text,
-        children: [iconComponent, jsx(Toast.Description, {
-          children: styledText
-        })]
+      children: [jsx("div", {
+        className: styles.typeIconContainer,
+        children: iconComponent
       }), jsxs("div", {
-        className: styles.buttonSection,
+        className: clsx(styles.mobileContainer, {
+          [styles.withButtons]: children
+        }),
         children: [jsx("div", {
-          className: styles.contentButtons,
-          children: children
-        }), jsx(Toast.Close, {
+          className: styles.text,
+          children: jsx(Toast.Description, {
+            children: styledText
+          })
+        }), jsx("div", {
+          className: styles.contentButtonSection,
+          children: jsx("div", {
+            className: styles.contentButtons,
+            children: children
+          })
+        })]
+      }), jsx("div", {
+        className: styles.closeButtonSection,
+        children: jsx(Toast.Close, {
           asChild: true,
           children: jsx(IconButton, {
             "aria-label": closeButtonAriaLabel,
@@ -82,7 +93,7 @@ function PrivateNotificationElement(props) {
             icon: XMark,
             onClick: onClose
           })
-        })]
+        })
       })]
     })
   });

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "6.34.1",
+    "version": "6.35.0",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
         "access": "public",
@@ -57,7 +57,7 @@
     "devDependencies": {
         "@box/storybook-utils": "^0.0.7"
     },
-    "gitHead": "7ebd0c7feebd598c62187db4ee6519c056f745bf",
+    "gitHead": "9dbc491ca505db4f3aa557f3de0b2b0610945048",
     "module": "lib-esm/index.js",
     "main": "lib-esm/index.js",
     "exports": {