@box/blueprint-web 12.13.1 → 12.15.0

package/dist/lib-esm/card/card.js

@@ -1,6 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { forwardRef } from 'react';
+import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 import styles from './card.module.js';
 
 /**
@@ -13,10 +14,14 @@ const Card = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     elevation: elevationToken,
     ...rest
   } = props;
+  const {
+    enableModernizedComponents
+  } = useBlueprintModernization();
   return jsx("div", {
     ...rest,
     ref: forwardedRef,
     className: clsx(styles.card, elevationToken && styles[elevationToken], className),
+    "data-modern": enableModernizedComponents,
     children: children
   });
 });

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

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"card":"bp_card_module_card--558da","dropshadow-1":"bp_card_module_dropshadow-1--558da","dropshadow-3":"bp_card_module_dropshadow-3--558da"};
+var styles = {"card":"bp_card_module_card--c61ad","dropshadow-1":"bp_card_module_dropshadow-1--c61ad","dropshadow-3":"bp_card_module_dropshadow-3--c61ad"};
 
 export { styles as default };

package/dist/lib-esm/index.css

@@ -1101,17 +1101,37 @@
 .bp_button_wrapper_module_buttonWrapper--b0897{
   all:unset;
 }
-.bp_card_module_card--558da{
-  background:var(--surface-card-surface);
-  border:var(--border-1) solid var(--border-card-border);
-  border-radius:var(--radius-4);
-  padding:var(--space-4);
+.bp_card_module_card--c61ad[data-modern=true]{
+  --bp-card-dropshadow-1:var(--dropshadow-1);
+  --bp-card-dropshadow-3:var(--dropshadow-3);
+  --card-radius:var(--bp-radius-10);
+  --card-padding:var(--bp-space-060);
+  --card-background:var(--bp-surface-card-surface);
+  --card-border:var(--bp-border-01) solid var(--bp-border-card-border);
+  --card-dropshadow-1:var(--bp-card-dropshadow-1);
+  --card-dropshadow-3:var(--bp-card-dropshadow-3);
 }
-.bp_card_module_card--558da.bp_card_module_dropshadow-1--558da{
-  box-shadow:var(--dropshadow-1);
+
+.bp_card_module_card--c61ad[data-modern=false]{
+  --card-padding:var(--space-4);
+  --card-background:var(--surface-card-surface);
+  --card-border:var(--border-1) solid var(--border-card-border);
+  --card-radius:var(--radius-4);
+  --card-dropshadow-1:var(--dropshadow-1);
+  --card-dropshadow-3:var(--dropshadow-3);
 }
-.bp_card_module_card--558da.bp_card_module_dropshadow-3--558da{
-  box-shadow:var(--dropshadow-3);
+
+.bp_card_module_card--c61ad{
+  background:var(--card-background);
+  border:var(--card-border);
+  border-radius:var(--card-radius);
+  padding:var(--card-padding);
+}
+.bp_card_module_card--c61ad.bp_card_module_dropshadow-1--c61ad{
+  box-shadow:var(--card-dropshadow-1);
+}
+.bp_card_module_card--c61ad.bp_card_module_dropshadow-3--c61ad{
+  box-shadow:var(--card-dropshadow-3);
 }
 
 .bp_card_tooltip_module_content--efa88{
@@ -1747,76 +1767,145 @@
   flex-grow:0;
   flex-shrink:0;
 }
+.bp_labelable_module_required--25dbc{
+  align-items:center;
+  display:inline-flex;
+  gap:var(--space-1);
+}
+.bp_labelable_module_required--25dbc::before{
+  color:var(--icon-icon-required-on-light);
+  content:"*";
+  font-family:monospace;
+  transform:scale(1.2);
+}
 
-.bp_text_area_autosize_module_textArea--d9d31{
-  background:var(--surface-input-surface);
+.bp_text_area_autosize_module_textArea--4fa6a[data-modern=false]{
+  --text-area-text-color:var(--text-text-on-light);
+  --text-area-inner-shadow:var(--innershadow-1);
+  --text-area-background-color:var(--surface-input-surface);
+  --text-area-padding-inline:var(--space-3);
+  --text-area-padding-block:0.625rem;
+  --text-area-placeholder-color:var(--text-text-on-light-secondary);
+  --text-area-error-background-color:var(--surface-input-surface-error);
+  --text-area-error-background-focus:var(--surface-input-surface-focus);
+  --text-area-error-background-hover:var(--surface-input-surface-hover);
+  --text-area-icon-padding:1.875rem;
+}
+
+.bp_text_area_autosize_module_textArea--4fa6a[data-modern=true]{
+  --text-area-inner-shadow:var(--innershadow-1);
+  --text-area-text-color:var(--bp-text-text-on-light);
+  --text-area-background-color:var(--bp-surface-input-surface);
+  --text-area-padding-inline:var(--bp-size-030);
+  --text-area-padding-block:0.625rem;
+  --text-area-placeholder-color:var(--bp-text-text-on-light-secondary);
+  --text-area-error-background-color:var(--bp-surface-input-surface-error);
+  --text-area-error-background-focus:var(--bp-surface-input-surface-focus);
+  --text-area-error-background-hover:var(--bp-surface-input-surface-hover);
+  --text-area-icon-padding:1.875rem;
+}
+
+.bp_text_area_autosize_module_textArea--4fa6a{
+  background:var(--text-area-background-color);
   border:none;
-  box-shadow:var(--innershadow-1);
-  color:var(--text-text-on-light);
+  box-shadow:var(--text-area-inner-shadow);
+  color:var(--text-area-text-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);
   margin:0;
-  padding-block:.625rem;
-  padding-inline:var(--space-3);
+  padding-block:var(--text-area-padding-block);
+  padding-inline:var(--text-area-padding-inline);
   resize:none;
   -webkit-text-decoration:var(--body-default-text-decoration);
           text-decoration:var(--body-default-text-decoration);
   text-transform:var(--body-default-text-case);
   width:100%;
 }
-.bp_text_area_autosize_module_textArea--d9d31::placeholder{
-  color:var(--text-text-on-light-secondary);
+.bp_text_area_autosize_module_textArea--4fa6a::placeholder{
+  color:var(--text-area-placeholder-color);
   opacity:1;
 }
-.bp_text_area_autosize_module_textArea--d9d31.bp_text_area_autosize_module_error--d9d31{
-  background:var(--surface-input-surface-error);
+.bp_text_area_autosize_module_textArea--4fa6a.bp_text_area_autosize_module_error--4fa6a{
+  background:var(--text-area-error-background-color);
   outline:0;
 }
-.bp_text_area_autosize_module_textArea--d9d31:focus{
+.bp_text_area_autosize_module_textArea--4fa6a:focus{
   border:none;
 }
-.bp_text_area_autosize_module_textArea--d9d31:hover{
-  box-shadow:var(--innershadow-1);
+.bp_text_area_autosize_module_textArea--4fa6a:hover{
+  box-shadow:var(--text-area-inner-shadow);
 }
-.bp_text_area_autosize_module_textArea--d9d31:focus-visible{
-  background:var(--surface-input-surface-focus);
+.bp_text_area_autosize_module_textArea--4fa6a:focus-visible{
+  background:var(--text-area-error-background-focus);
   outline:0;
 }
-.bp_text_area_autosize_module_textArea--d9d31:disabled{
-  background:var(--surface-input-surface);
+.bp_text_area_autosize_module_textArea--4fa6a:disabled{
+  background:var(--text-area-background-color);
   border:none;
-  box-shadow:var(--innershadow-1);
-  color:var(--text-text-on-light);
+  box-shadow:var(--text-area-inner-shadow);
+  color:var(--text-area-text-color);
 }
-.bp_text_area_autosize_module_textArea--d9d31:not(:disabled):not(:focus-visible):not(.bp_text_area_autosize_module_error--d9d31):hover{
-  background:var(--surface-input-surface-hover);
+.bp_text_area_autosize_module_textArea--4fa6a:not(:disabled):not(:focus-visible):not(.bp_text_area_autosize_module_error--4fa6a):hover{
+  background:var(--text-area-error-background-hover);
 }
-.bp_text_area_autosize_module_textArea--d9d31.bp_text_area_autosize_module_loading--d9d31{
-  padding-inline-end:1.875rem;
+.bp_text_area_autosize_module_textArea--4fa6a.bp_text_area_autosize_module_loading--4fa6a{
+  padding-inline-end:var(--text-area-icon-padding);
 }
 
-.bp_text_area_autosize_module_loadingIndicator--d9d31{
+.bp_text_area_autosize_module_loadingIndicator--4fa6a[data-modern=false]{
+  --text-area-loading-indicator-width:var(--size-6);
+  --text-area-loading-indicator-height:var(--size-6);
+}
+
+.bp_text_area_autosize_module_loadingIndicator--4fa6a[data-modern=true]{
+  --text-area-loading-indicator-width:var(--bp-size-060);
+  --text-area-loading-indicator-height:var(--bp-size-060);
+}
+
+.bp_text_area_autosize_module_loadingIndicator--4fa6a{
   bottom:.375rem;
   display:inline-block;
-  height:var(--size-6);
+  height:var(--text-area-loading-indicator-height);
   left:unset;
   position:absolute;
   right:0;
-  width:var(--size-6);
+  width:var(--text-area-loading-indicator-width);
 }
 
-.bp_text_area_autosize_module_border--d9d31{
-  border-radius:var(--radius-2);
-  box-shadow:0 0 0 var(--border-1) var(--border-input-border);
+.bp_text_area_autosize_module_border--4fa6a[data-modern=false]{
+  --text-area-radius:var(--radius-2);
+  --text-area-border-width:var(--border-1);
+  --text-area-shadow-color:var(--border-input-border);
+}
+
+.bp_text_area_autosize_module_border--4fa6a[data-modern=true]{
+  --text-area-radius:var(--bp-radius-06);
+  --text-area-border-width:var(--bp-border-01);
+  --text-area-shadow-color:var(--bp-border-input-border);
+}
+
+.bp_text_area_autosize_module_border--4fa6a{
+  border-radius:var(--text-area-radius);
+  box-shadow:0 0 0 var(--text-area-border-width) var(--text-area-shadow-color);
   display:flex;
   overflow:hidden;
   transform:translateZ(0);
 }
 
-.bp_text_area_module_textAreaContainer--7227f{
+.bp_text_area_module_textAreaContainer--bf753[data-modern=false]{
+  --text-area-container-row-gap:var(--space-2);
+  --text-area-container-label-color:var(--text-text-on-light);
+}
+
+.bp_text_area_module_textAreaContainer--bf753[data-modern=true]{
+  --text-area-container-row-gap:var(--bp-size-020);
+  --text-area-container-label-color:var(--bp-text-text-on-light);
+}
+
+.bp_text_area_module_textAreaContainer--bf753{
   display:flex;
   flex-direction:column;
   font-family:var(--body-default-font-family);
@@ -1829,8 +1918,8 @@
           text-decoration:var(--body-default-text-decoration);
   text-transform:var(--body-default-text-case);
 }
-.bp_text_area_module_textAreaContainer--7227f .bp_text_area_module_label--7227f{
-  color:var(--text-text-on-light);
+.bp_text_area_module_textAreaContainer--bf753 .bp_text_area_module_label--bf753{
+  color:var(--text-area-container-label-color);
   flex:0 0 fit-content;
   font-family:var(--body-default-bold-font-family);
   font-size:var(--body-default-bold-font-size);
@@ -1843,25 +1932,14 @@
   width:-moz-fit-content;
   width:fit-content;
 }
-.bp_text_area_module_textAreaContainer--7227f .bp_text_area_module_label--7227f:not(.bp_text_area_module_hidden--7227f){
-  margin-block-end:var(--space-2);
+.bp_text_area_module_textAreaContainer--bf753 .bp_text_area_module_label--bf753:not(.bp_text_area_module_hidden--bf753){
+  margin-block-end:var(--text-area-container-row-gap);
 }
-.bp_text_area_module_textAreaContainer--7227f.bp_text_area_module_disabled--7227f{
+.bp_text_area_module_textAreaContainer--bf753.bp_text_area_module_disabled--bf753{
   opacity:60%;
 }
-.bp_text_area_module_textAreaContainer--7227f .bp_text_area_module_inlineError--7227f{
-  margin-block-start:var(--space-2);
-}
-.bp_labelable_module_required--25dbc{
-  align-items:center;
-  display:inline-flex;
-  gap:var(--space-1);
-}
-.bp_labelable_module_required--25dbc::before{
-  color:var(--icon-icon-required-on-light);
-  content:"*";
-  font-family:monospace;
-  transform:scale(1.2);
+.bp_text_area_module_textAreaContainer--bf753 .bp_text_area_module_inlineError--bf753{
+  margin-block-start:var(--text-area-container-row-gap);
 }
 
 .bp_combobox_module_container--d598b{
@@ -5350,60 +5428,119 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   white-space:nowrap;
 }
 
-.bp_notification_module_viewport--0bfb0{
+.bp_notification_module_viewport--bc071{
+  --notification-viewport-space:var(--space-4);
+  --notification-viewport-item-spacing:var(--space-3);
   all:unset;
   align-items:center;
   display:flex;
   flex-direction:column;
-  gap:var(--space-3);
+  gap:var(--notification-viewport-item-spacing);
   left:50%;
   position:fixed;
-  top:var(--space-4);
+  top:var(--notification-viewport-space);
   transform:translate(-50%);
   z-index:2147483647;
 }
 
-.bp_notification_module_root--0bfb0{
-  border:var(--border-2) solid;
-  border-radius:var(--radius-3);
+.bp_notification_module_root--bc071[data-modern=false]{
+  --notification-padding-vertical:var(--space-3);
+  --notification-padding-horizontal:var(--space-4);
+  --notification-item-spacing:var(--space-3);
+  --notification-radius:var(--radius-3);
+  --notification-border:var(--border-2);
+  --notification-shadow:var(--dropshadow-3);
+  --notification-background-info:var(--surface-message-surface-info);
+  --notification-background-success:var(--surface-message-surface-success);
+  --notification-background-warning:var(--surface-message-surface-warning);
+  --notification-background-error:var(--surface-message-surface-error);
+  --notification-background-blur:none;
+  --notification-border-color-info:var(--border-message-border-info);
+  --notification-border-color-success:var(--border-message-border-success);
+  --notification-border-color-warning:var(--border-message-border-warning);
+  --notification-border-color-error:var(--border-message-border-error);
+  --notification-text-color:var(--text-text-on-light);
+  --notification-text-container-height:var(--space-8);
+  --notification-icon-size:var(--size-8);
+}
+
+.bp_notification_module_root--bc071[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-radius:var(--bp-radius-16);
+  --notification-border:var(--bp-border-02);
+  --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-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-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);
+}
+.bp_notification_module_root--bc071[data-modern=true].bp_notification_module_info--bc071{
+  background:linear-gradient(0deg, var(--notification-background-info) 0, var(--notification-background-info) 100%), var(--notification-background-overlay);
+}
+.bp_notification_module_root--bc071[data-modern=true].bp_notification_module_success--bc071{
+  background:linear-gradient(0deg, var(--notification-background-success) 0, var(--notification-background-success) 100%), var(--notification-background-overlay);
+}
+.bp_notification_module_root--bc071[data-modern=true].bp_notification_module_warning--bc071{
+  background:linear-gradient(0deg, var(--notification-background-warning) 0, var(--notification-background-warning) 100%), var(--notification-background-overlay);
+}
+.bp_notification_module_root--bc071[data-modern=true].bp_notification_module_error--bc071{
+  background:linear-gradient(0deg, var(--notification-background-error) 0, var(--notification-background-error) 100%), var(--notification-background-overlay);
+}
+
+.bp_notification_module_root--bc071{
+  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;
   width:max-content;
 }
 @media (width > 374px){
-  .bp_notification_module_root--0bfb0{
+  .bp_notification_module_root--bc071{
     max-width:343px;
   }
 }
 @media (width > 767px){
-  .bp_notification_module_root--0bfb0{
+  .bp_notification_module_root--bc071{
     max-width:728px;
   }
 }
 @media (width > 1023px){
-  .bp_notification_module_root--0bfb0{
+  .bp_notification_module_root--bc071{
     max-width:848px;
   }
 }
 @media (width > 1219px){
-  .bp_notification_module_root--0bfb0{
+  .bp_notification_module_root--bc071{
     max-width:896px;
   }
 }
-.bp_notification_module_root--0bfb0 .bp_notification_module_container--0bfb0{
+.bp_notification_module_root--bc071 .bp_notification_module_container--bc071{
   align-items:flex-start;
-  box-shadow:var(--dropshadow-3);
   display:flex;
-  gap:var(--space-3);
-  padding:var(--space-3) 0;
+  gap:var(--notification-item-spacing);
+  padding:var(--notification-padding-vertical) 0;
   width:100%;
 }
 @media (width > 767px){
-  .bp_notification_module_root--0bfb0 .bp_notification_module_container--0bfb0{
+  .bp_notification_module_root--bc071 .bp_notification_module_container--bc071{
     align-items:center;
   }
 }
-.bp_notification_module_root--0bfb0 .bp_notification_module_mobileContainer--0bfb0{
+.bp_notification_module_root--bc071 .bp_notification_module_mobileContainer--bc071{
   align-items:left;
   display:flex;
   flex-direction:column;
@@ -5411,88 +5548,89 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   width:100%;
 }
 @media (width > 767px){
-  .bp_notification_module_root--0bfb0 .bp_notification_module_mobileContainer--0bfb0{
+  .bp_notification_module_root--bc071 .bp_notification_module_mobileContainer--bc071{
     align-items:center;
     flex-direction:row;
   }
 }
-.bp_notification_module_root--0bfb0 .bp_notification_module_withButtons--0bfb0{
-  gap:var(--space-3);
+.bp_notification_module_root--bc071 .bp_notification_module_withButtons--bc071{
+  gap:var(--notification-item-spacing);
 }
-.bp_notification_module_root--0bfb0.bp_notification_module_info--0bfb0{
-  background:var(--surface-message-surface-info);
-  border-color:var(--border-message-border-info);
+.bp_notification_module_root--bc071.bp_notification_module_info--bc071{
+  background:var(--notification-background-info);
+  border-color:var(--notification-border-color-info);
 }
-.bp_notification_module_root--0bfb0.bp_notification_module_success--0bfb0{
-  background:var(--surface-message-surface-success);
-  border-color:var(--border-message-border-success);
+.bp_notification_module_root--bc071.bp_notification_module_success--bc071{
+  background:var(--notification-background-success);
+  border-color:var(--notification-border-color-success);
 }
-.bp_notification_module_root--0bfb0.bp_notification_module_warning--0bfb0{
-  background:var(--surface-message-surface-warning);
-  border-color:var(--border-message-border-warning);
+.bp_notification_module_root--bc071.bp_notification_module_warning--bc071{
+  background:var(--notification-background-warning);
+  border-color:var(--notification-border-color-warning);
 }
-.bp_notification_module_root--0bfb0.bp_notification_module_error--0bfb0{
-  background:var(--surface-message-surface-error);
-  border-color:var(--border-message-border-error);
+.bp_notification_module_root--bc071.bp_notification_module_error--bc071{
+  background:var(--notification-background-error);
+  border-color:var(--notification-border-color-error);
 }
-.bp_notification_module_root--0bfb0: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_notification_module_root--bc071: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--0bfb0 .bp_notification_module_typeIconContainer--0bfb0{
+.bp_notification_module_root--bc071 .bp_notification_module_typeIconContainer--bc071{
   align-items:center;
   display:flex;
-  height:var(--size-8);
+  height:var(--notification-icon-size);
   justify-content:center;
-  width:var(--size-8);
+  width:var(--notification-icon-size);
 }
-.bp_notification_module_root--0bfb0 .bp_notification_module_typeIconContainer--0bfb0 .bp_notification_module_typeIcon--0bfb0{
+.bp_notification_module_root--bc071 .bp_notification_module_typeIconContainer--bc071 .bp_notification_module_typeIcon--bc071{
   flex-shrink:0;
-  margin-left:var(--space-4);
+  margin-left:var(--notification-padding-horizontal);
 }
-.bp_notification_module_root--0bfb0 .bp_notification_module_text--0bfb0{
+.bp_notification_module_root--bc071 .bp_notification_module_text--bc071{
   align-items:center;
-  color:var(--text-text-on-light);
+  color:var(--notification-text-color);
   display:flex;
   font-family:var(--body-default-bold-font-family);
   font-size:var(--body-default-bold-font-size);
   font-weight:var(--body-default-bold-font-weight);
-  gap:var(--space-3);
+  gap:var(--notification-item-spacing);
   letter-spacing:var(--body-default-bold-letter-spacing);
   line-height:var(--body-default-bold-line-height);
+  min-height:var(--notification-text-container-height);
   overflow:hidden;
   -webkit-text-decoration:var(--body-default-bold-text-decoration);
           text-decoration:var(--body-default-bold-text-decoration);
   text-transform:var(--body-default-bold-text-case);
 }
-.bp_notification_module_root--0bfb0 .bp_notification_module_text--0bfb0 > div{
+.bp_notification_module_root--bc071 .bp_notification_module_text--bc071 > div{
   overflow:hidden;
   overflow-wrap:break-word;
 }
-.bp_notification_module_root--0bfb0 .bp_notification_module_contentButtonSection--0bfb0{
+.bp_notification_module_root--bc071 .bp_notification_module_contentButtonSection--bc071{
   display:flex;
-  gap:var(--space-3);
+  gap:var(--notification-item-spacing);
   margin-left:0;
 }
 @media (width > 767px){
-  .bp_notification_module_root--0bfb0 .bp_notification_module_contentButtonSection--0bfb0{
+  .bp_notification_module_root--bc071 .bp_notification_module_contentButtonSection--bc071{
     margin-left:auto;
   }
 }
-.bp_notification_module_root--0bfb0 .bp_notification_module_contentButtonSection--0bfb0 .bp_notification_module_contentButtons--0bfb0{
+.bp_notification_module_root--bc071 .bp_notification_module_contentButtonSection--bc071 .bp_notification_module_contentButtons--bc071{
   display:flex;
-  gap:var(--space-3);
+  gap:var(--notification-item-spacing);
 }
-.bp_notification_module_root--0bfb0 .bp_notification_module_closeButtonSection--0bfb0{
+.bp_notification_module_root--bc071 .bp_notification_module_closeButtonSection--bc071{
   display:flex;
-  gap:var(--space-3);
+  gap:var(--notification-item-spacing);
   margin-left:auto;
-  margin-right:var(--space-4);
+  margin-right:var(--notification-padding-horizontal);
 }
-.bp_notification_module_root--0bfb0 .bp_notification_module_closeButtonSection--0bfb0 .bp_notification_module_closeButton--0bfb0{
+.bp_notification_module_root--bc071 .bp_notification_module_closeButtonSection--bc071 .bp_notification_module_closeButton--bc071{
   align-self:center;
 }
-.bp_notification_module_root--0bfb0 .bp_notification_module_closeButtonSection--0bfb0 .bp_notification_module_closeButton--0bfb0 svg *{
+.bp_notification_module_root--bc071 .bp_notification_module_closeButtonSection--bc071 .bp_notification_module_closeButton--bc071 svg *{
   fill:currentColor;
 }
 

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

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

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

@@ -5,6 +5,7 @@ import { Size5 } from '@box/blueprint-web-assets/tokens/tokens';
 import * as Toast from '@radix-ui/react-toast';
 import clsx from 'clsx';
 import { useMemo } from 'react';
+import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
 import { IconButton } from '../icon-button/icon-button.js';
 import styles from './notification.module.js';
 
@@ -56,9 +57,13 @@ function PrivateNotificationElement(props) {
     ...rest
   } = props;
   const iconComponent = useMemo(() => getIcon(typeIconAriaLabel, variant), [typeIconAriaLabel, variant]);
+  const {
+    enableModernizedComponents
+  } = useBlueprintModernization();
   return jsx(Toast.Root, {
     ...rest,
     className: clsx(styles.root, styles[variant]),
+    "data-modern": enableModernizedComponents,
     onOpenChange: onClose,
     open: open,
     type: sensitivity,

package/dist/lib-esm/text-area/text-area-autosize/text-area-autosize.js

@@ -3,6 +3,7 @@ import { BorderInputBorderHover, Border1, BorderInputBorderFocus, Border2, Borde
 import clsx from 'clsx';
 import { forwardRef, useRef, useState, useCallback, useEffect } from 'react';
 import { flushSync } from 'react-dom';
+import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
 import { LoadingIndicator } from '../../loading-indicator/loading-indicator.js';
 import { debounce } from '../../utils/debounce.js';
 import { ownerWindow } from '../../utils/ownerWindow.js';
@@ -62,6 +63,9 @@ const TextAreaAutosize = /*#__PURE__*/forwardRef(function TextAreaAutosize(props
     onBlur,
     ...rest
   } = props;
+  const {
+    enableModernizedComponents
+  } = useBlueprintModernization();
   const {
     current: isControlled
   } = useRef(value != null);
@@ -274,6 +278,7 @@ const TextAreaAutosize = /*#__PURE__*/forwardRef(function TextAreaAutosize(props
   const shouldCompensateScrollbar = !state.overflow && !isScrollbarVisible && (hasError || isLoading);
   return jsxs("div", {
     className: styles.border,
+    "data-modern": enableModernizedComponents,
     onMouseEnter: handleHover,
     onMouseLeave: handleOnMouseOut,
     style: borderInlineStyle,
@@ -281,6 +286,7 @@ const TextAreaAutosize = /*#__PURE__*/forwardRef(function TextAreaAutosize(props
       ...rest,
       ref: handleRef,
       className: classNames,
+      "data-modern": enableModernizedComponents,
       onBlur: handleBlur,
       onChange: handleChange,
       onFocus: handleFocus,
@@ -311,6 +317,7 @@ const TextAreaAutosize = /*#__PURE__*/forwardRef(function TextAreaAutosize(props
     }), isLoading && jsx(LoadingIndicator, {
       "aria-label": loadingAriaLabel,
       className: styles.loadingIndicator,
+      "data-modern": enableModernizedComponents,
       onClick: focusTextArea,
       style: !state.overflow ? {
         right: '0.75rem'

package/dist/lib-esm/text-area/text-area-autosize/text-area-autosize.module.js

@@ -1,4 +1,4 @@
 import '../../index.css';
-var styles = {"textArea":"bp_text_area_autosize_module_textArea--d9d31","error":"bp_text_area_autosize_module_error--d9d31","loading":"bp_text_area_autosize_module_loading--d9d31","loadingIndicator":"bp_text_area_autosize_module_loadingIndicator--d9d31","border":"bp_text_area_autosize_module_border--d9d31"};
+var styles = {"textArea":"bp_text_area_autosize_module_textArea--4fa6a","error":"bp_text_area_autosize_module_error--4fa6a","loading":"bp_text_area_autosize_module_loading--4fa6a","loadingIndicator":"bp_text_area_autosize_module_loadingIndicator--4fa6a","border":"bp_text_area_autosize_module_border--4fa6a"};
 
 export { styles as default };

package/dist/lib-esm/text-area/text-area.js

@@ -1,11 +1,12 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { forwardRef } from 'react';
+import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 import { InlineError } from '../primitives/inline-error/inline-error.js';
+import { useLabelable } from '../util-components/labelable/useLabelable.js';
 import { useUniqueId } from '../utils/useUniqueId.js';
 import { TextAreaAutosize } from './text-area-autosize/text-area-autosize.js';
 import styles from './text-area.module.js';
-import { useLabelable } from '../util-components/labelable/useLabelable.js';
 
 const TextArea = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {
@@ -20,6 +21,9 @@ const TextArea = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     maxRows,
     ...rest
   } = props;
+  const {
+    enableModernizedComponents
+  } = useBlueprintModernization();
   const textAreaId = useUniqueId('text-area-');
   const inlineErrorId = useUniqueId('inline-error-');
   const hasError = !!error && !disabled;
@@ -32,6 +36,7 @@ const TextArea = /*#__PURE__*/forwardRef((props, forwardedRef) => {
       [styles.disabled]: disabled,
       [styles.error]: hasError
     }, className),
+    "data-modern": enableModernizedComponents,
     children: [jsx(Label, {
       className: clsx([styles.label], {
         [styles.hidden]: hideLabel

package/dist/lib-esm/text-area/text-area.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"textAreaContainer":"bp_text_area_module_textAreaContainer--7227f","label":"bp_text_area_module_label--7227f","hidden":"bp_text_area_module_hidden--7227f","disabled":"bp_text_area_module_disabled--7227f","inlineError":"bp_text_area_module_inlineError--7227f"};
+var styles = {"textAreaContainer":"bp_text_area_module_textAreaContainer--bf753","label":"bp_text_area_module_label--bf753","hidden":"bp_text_area_module_hidden--bf753","disabled":"bp_text_area_module_disabled--bf753","inlineError":"bp_text_area_module_inlineError--bf753"};
 
 export { styles as default };

package/package.json

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