@box/blueprint-web 12.43.0 → 12.44.1

package/dist/lib-esm/index.css

@@ -242,13 +242,13 @@
     opacity:1;
   }
 }
-.bp_base_button_module_button--d6857[data-modern=true]{
+.bp_base_button_module_button--77a2c[data-modern=true]{
   --button-border-radius:var(--bp-radius-10);
 }
-.bp_base_button_module_button--d6857[data-modern=true]:not(:disabled)[data-focus-visible]{
+.bp_base_button_module_button--77a2c[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--d6857[data-modern=true].bp_base_button_module_primary--d6857{
+.bp_base_button_module_button--77a2c[data-modern=true].bp_base_button_module_primary--77a2c{
   --button-color:var(--bp-text-text-brand-on-color);
   --button-background:var(--bp-surface-surface-brand);
   --button-border:var(--bp-border-01) solid var(--bp-surface-surface-brand);
@@ -258,7 +258,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--d6857[data-modern=true].bp_base_button_module_secondary--d6857{
+.bp_base_button_module_button--77a2c[data-modern=true].bp_base_button_module_secondary--77a2c{
   --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);
@@ -267,13 +267,13 @@
   --button-active-background:var(--bp-surface-cta-surface-secondary-pressed);
   --button-active-border:var(--bp-border-01) solid var(--bp-border-cta-border-secondary-pressed);
 }
-.bp_base_button_module_button--d6857[data-modern=true].bp_base_button_module_tertiary--d6857{
+.bp_base_button_module_button--77a2c[data-modern=true].bp_base_button_module_tertiary--77a2c{
   --button-color:var(--bp-text-cta-link);
-  --button-background:var(--bp-surface-cta-surface-tertiary);
+  --button-background:#0000;
   --button-focus-or-hover-background:var(--bp-surface-cta-surface-tertiary-hover);
   --button-active-background:var(--bp-surface-cta-surface-tertiary-pressed);
 }
-.bp_base_button_module_button--d6857[data-modern=true].bp_base_button_module_outline--d6857{
+.bp_base_button_module_button--77a2c[data-modern=true].bp_base_button_module_outline--77a2c{
   --button-color:var(--bp-text-text-on-light);
   --button-background:var(--bp-surface-cta-surface-outline);
   --button-border:var(--bp-border-01) solid var(--bp-border-cta-border-outline);
@@ -282,34 +282,34 @@
   --button-active-background:var(--bp-surface-cta-surface-outline-pressed);
   --button-active-border:var(--bp-border-01) solid var(--bp-border-cta-border-outline-pressed);
 }
-.bp_base_button_module_button--d6857[data-modern=true].bp_base_button_module_small--d6857{
+.bp_base_button_module_button--77a2c[data-modern=true].bp_base_button_module_small--77a2c{
   --button-small-gap:var(--bp-space-010);
   --button-small-min-height:var(--bp-size-080);
   --button-small-padding:0 var(--bp-size-040);
 }
-.bp_base_button_module_button--d6857[data-modern=true].bp_base_button_module_small--d6857.bp_base_button_module_isIconButton--d6857{
+.bp_base_button_module_button--77a2c[data-modern=true].bp_base_button_module_small--77a2c.bp_base_button_module_isIconButton--77a2c{
   --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--d6857[data-modern=true].bp_base_button_module_large--d6857{
+.bp_base_button_module_button--77a2c[data-modern=true].bp_base_button_module_large--77a2c{
   --button-large-gap:var(--bp-space-020);
   --button-large-min-height:var(--bp-size-100);
   --button-large-padding:0 var(--bp-size-040);
 }
-.bp_base_button_module_button--d6857[data-modern=true].bp_base_button_module_large--d6857.bp_base_button_module_isIconButton--d6857{
+.bp_base_button_module_button--77a2c[data-modern=true].bp_base_button_module_large--77a2c.bp_base_button_module_isIconButton--77a2c{
   --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--d6857[data-modern=false]{
+.bp_base_button_module_button--77a2c[data-modern=false]{
   --button-border-radius:var(--radius-2);
 }
-.bp_base_button_module_button--d6857[data-modern=false]:not(:disabled)[data-focus-visible]{
+.bp_base_button_module_button--77a2c[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--d6857[data-modern=false].bp_base_button_module_primary--d6857{
+.bp_base_button_module_button--77a2c[data-modern=false].bp_base_button_module_primary--77a2c{
   --button-color:var(--text-text-brand-on-color);
   --button-background:var(--surface-surface-brand);
   --button-border:var(--border-1) solid var(--surface-surface-brand);
@@ -319,7 +319,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--d6857[data-modern=false].bp_base_button_module_secondary--d6857{
+.bp_base_button_module_button--77a2c[data-modern=false].bp_base_button_module_secondary--77a2c{
   --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);
@@ -328,14 +328,14 @@
   --button-active-background:var(--surface-cta-surface-secondary-pressed);
   --button-active-border:var(--border-1) solid var(--border-cta-border-secondary-pressed);
 }
-.bp_base_button_module_button--d6857[data-modern=false].bp_base_button_module_tertiary--d6857{
+.bp_base_button_module_button--77a2c[data-modern=false].bp_base_button_module_tertiary--77a2c{
   --button-color:var(--text-cta-link);
   --button-background:#0000;
   --button-border:var(--border-1) solid #0000;
   --button-focus-or-hover-background:var(--surface-cta-surface-tertiary-hover);
   --button-active-background:var(--surface-cta-surface-tertiary-pressed);
 }
-.bp_base_button_module_button--d6857[data-modern=false].bp_base_button_module_outline--d6857{
+.bp_base_button_module_button--77a2c[data-modern=false].bp_base_button_module_outline--77a2c{
   --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);
@@ -344,28 +344,28 @@
   --button-active-background:var(--surface-cta-surface-outline-pressed);
   --button-active-border:var(--border-1) solid var(--border-cta-border-outline-pressed);
 }
-.bp_base_button_module_button--d6857[data-modern=false].bp_base_button_module_small--d6857{
+.bp_base_button_module_button--77a2c[data-modern=false].bp_base_button_module_small--77a2c{
   --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--d6857[data-modern=false].bp_base_button_module_small--d6857.bp_base_button_module_isIconButton--d6857{
+.bp_base_button_module_button--77a2c[data-modern=false].bp_base_button_module_small--77a2c.bp_base_button_module_isIconButton--77a2c{
   --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--d6857[data-modern=false].bp_base_button_module_large--d6857{
+.bp_base_button_module_button--77a2c[data-modern=false].bp_base_button_module_large--77a2c{
   --button-large-gap:var(--space-2);
   --button-large-min-height:var(--size-10);
   --button-large-padding:0 var(--space-4);
 }
-.bp_base_button_module_button--d6857[data-modern=false].bp_base_button_module_large--d6857.bp_base_button_module_isIconButton--d6857{
+.bp_base_button_module_button--77a2c[data-modern=false].bp_base_button_module_large--77a2c.bp_base_button_module_isIconButton--77a2c{
   --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--d6857{
+.bp_base_button_module_button--77a2c{
   border-radius:var(--button-border-radius);
   cursor:pointer;
   font-family:var(--body-default-bold-font-family);
@@ -382,92 +382,92 @@
           user-select:none;
   white-space:nowrap;
 }
-.bp_base_button_module_button--d6857,.bp_base_button_module_button--d6857 .bp_base_button_module_icon--d6857{
+.bp_base_button_module_button--77a2c,.bp_base_button_module_button--77a2c .bp_base_button_module_icon--77a2c{
   align-items:center;
   display:flex;
 }
-.bp_base_button_module_button--d6857:disabled{
+.bp_base_button_module_button--77a2c:disabled{
   opacity:.3;
 }
-.bp_base_button_module_button--d6857.bp_base_button_module_primary--d6857{
+.bp_base_button_module_button--77a2c.bp_base_button_module_primary--77a2c{
   background:var(--button-background);
   border:var(--button-border);
   color:var(--button-color);
 }
-.bp_base_button_module_button--d6857.bp_base_button_module_primary--d6857:disabled{
+.bp_base_button_module_button--77a2c.bp_base_button_module_primary--77a2c:disabled{
   background:var(--button-disabled-background);
 }
-.bp_base_button_module_button--d6857.bp_base_button_module_primary--d6857:not(:disabled):hover,.bp_base_button_module_button--d6857.bp_base_button_module_primary--d6857:not(:disabled)[data-focus-visible]{
+.bp_base_button_module_button--77a2c.bp_base_button_module_primary--77a2c:not(:disabled):hover,.bp_base_button_module_button--77a2c.bp_base_button_module_primary--77a2c:not(:disabled)[data-focus-visible]{
   background:var(--button-focus-or-hover-background);
   border:var(--button-focus-or-hover-border);
 }
-.bp_base_button_module_button--d6857.bp_base_button_module_primary--d6857:not(:disabled):active{
+.bp_base_button_module_button--77a2c.bp_base_button_module_primary--77a2c:not(:disabled):active{
   background:var(--button-active-background);
   border:var(--button-active-border);
 }
-.bp_base_button_module_button--d6857.bp_base_button_module_secondary--d6857{
+.bp_base_button_module_button--77a2c.bp_base_button_module_secondary--77a2c{
   background:var(--button-background);
   border:var(--button-border);
   color:var(--button-color);
 }
-.bp_base_button_module_button--d6857.bp_base_button_module_secondary--d6857:not(:disabled):hover,.bp_base_button_module_button--d6857.bp_base_button_module_secondary--d6857:not(:disabled)[data-focus-visible]{
+.bp_base_button_module_button--77a2c.bp_base_button_module_secondary--77a2c:not(:disabled):hover,.bp_base_button_module_button--77a2c.bp_base_button_module_secondary--77a2c:not(:disabled)[data-focus-visible]{
   background:var(--button-focus-or-hover-background);
   border:var(--button-focus-or-hover-border);
 }
-.bp_base_button_module_button--d6857.bp_base_button_module_secondary--d6857:not(:disabled):active{
+.bp_base_button_module_button--77a2c.bp_base_button_module_secondary--77a2c:not(:disabled):active{
   background:var(--button-active-background);
   border:var(--button-active-border);
 }
-.bp_base_button_module_button--d6857.bp_base_button_module_tertiary--d6857{
+.bp_base_button_module_button--77a2c.bp_base_button_module_tertiary--77a2c{
   background:var(--button-background);
   border:var(--button-border);
   color:var(--button-color);
 }
-.bp_base_button_module_button--d6857.bp_base_button_module_tertiary--d6857:not(:disabled):hover,.bp_base_button_module_button--d6857.bp_base_button_module_tertiary--d6857:not(:disabled)[data-focus-visible]{
+.bp_base_button_module_button--77a2c.bp_base_button_module_tertiary--77a2c:not(:disabled):hover,.bp_base_button_module_button--77a2c.bp_base_button_module_tertiary--77a2c:not(:disabled)[data-focus-visible]{
   background:var(--button-focus-or-hover-background);
 }
-.bp_base_button_module_button--d6857.bp_base_button_module_tertiary--d6857:not(:disabled):active{
+.bp_base_button_module_button--77a2c.bp_base_button_module_tertiary--77a2c:not(:disabled):active{
   background:var(--button-active-background);
 }
-.bp_base_button_module_button--d6857.bp_base_button_module_outline--d6857{
+.bp_base_button_module_button--77a2c.bp_base_button_module_outline--77a2c{
   background:var(--button-background);
   border:var(--button-border);
   color:var(--button-color);
 }
-.bp_base_button_module_button--d6857.bp_base_button_module_outline--d6857:not(:disabled):hover,.bp_base_button_module_button--d6857.bp_base_button_module_outline--d6857:not(:disabled)[data-focus-visible]{
+.bp_base_button_module_button--77a2c.bp_base_button_module_outline--77a2c:not(:disabled):hover,.bp_base_button_module_button--77a2c.bp_base_button_module_outline--77a2c:not(:disabled)[data-focus-visible]{
   background:var(--button-focus-or-hover-background);
   border:var(--button-focus-or-hover-border);
 }
-.bp_base_button_module_button--d6857.bp_base_button_module_outline--d6857:not(:disabled):active{
+.bp_base_button_module_button--77a2c.bp_base_button_module_outline--77a2c:not(:disabled):active{
   background:var(--button-active-background);
   border:var(--button-active-border);
 }
-.bp_base_button_module_button--d6857.bp_base_button_module_small--d6857{
+.bp_base_button_module_button--77a2c.bp_base_button_module_small--77a2c{
   gap:var(--button-small-gap);
   min-height:var(--button-small-min-height);
   padding:var(--button-small-padding);
 }
-.bp_base_button_module_button--d6857.bp_base_button_module_small--d6857.bp_base_button_module_isIconButton--d6857{
+.bp_base_button_module_button--77a2c.bp_base_button_module_small--77a2c.bp_base_button_module_isIconButton--77a2c{
   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--d6857.bp_base_button_module_large--d6857{
+.bp_base_button_module_button--77a2c.bp_base_button_module_large--77a2c{
   gap:var(--button-large-gap);
   min-height:var(--button-large-min-height);
   padding:var(--button-large-padding);
 }
-.bp_base_button_module_button--d6857.bp_base_button_module_large--d6857.bp_base_button_module_isIconButton--d6857{
+.bp_base_button_module_button--77a2c.bp_base_button_module_large--77a2c.bp_base_button_module_isIconButton--77a2c{
   height:var(--icon-button-large-height);
   padding:var(--icon-button-large-padding);
   width:var(--icon-button-large-width);
 }
-.bp_base_button_module_button--d6857.bp_base_button_module_hide--d6857{
+.bp_base_button_module_button--77a2c.bp_base_button_module_hide--77a2c{
   pointer-events:none;
   position:relative;
 }
-.bp_base_button_module_button--d6857.bp_base_button_module_hide--d6857 span{
+.bp_base_button_module_button--77a2c.bp_base_button_module_hide--77a2c span{
   color:#0000;
   opacity:0;
 }
@@ -5261,8 +5261,80 @@ table.bp_inline_table_module_inlineTable--7cffa tr:not(:last-child) td{
   display:inline;
 }
 
-.bp_modal_module_overlay--5457e{
-  background-color:var(--overlay-modal-overlay);
+.bp_modal_module_overlay--cf8d1[data-modern=false]{
+  --modal-overlay-background:var(--overlay-modal-overlay);
+  --modal-content-background:var(--gray-white);
+  --modal-min-width-non-fullscreen:calc(460px - var(--space-8)*2);
+  --modal-max-height-non-fullscreen:calc(100vh - var(--space-8)*2);
+  --modal-max-width-small:460px;
+  --modal-max-width-medium:540px;
+  --modal-max-width-large:620px;
+  --modal-max-width-xlarge:768px;
+  --modal-margin:0 var(--space-8);
+  --modal-border-radius:var(--radius-4);
+  --modal-close-button-color:var(--gray-65);
+  --modal-close-button-offset-top:var(--space-4);
+  --modal-close-button-offset-right:var(--space-4);
+  --modal-close-button-on-color-background:var(--surface-cta-surface-tertiary);
+  --modal-close-button-on-color-background-hover:var(--surface-cta-surface-icon-hover);
+  --modal-close-button-on-color-background-pressed:var(--surface-cta-surface-icon-pressed);
+  --modal-back-button-color:var(--gray-65);
+  --modal-back-button-margin-top-start:var(--space-4);
+  --modal-back-button-margin-inline-start:var(--space-4);
+  --modal-back-button-size-non-fullscreen:var(--size-10);
+  --modal-title-gap:var(--space-2);
+  --modal-title-padding:var(--space-5) var(--space-12) var(--space-5) var(--space-4);
+  --modal-title-padding-non-fullscreen:var(--space-6) var(--space-16) var(--space-6) var(--space-6);
+  --modal-body-padding:var(--space-6) var(--space-4) var(--space-4);
+  --modal-body-padding-non-fullscreen:var(--space-6) var(--space-6) var(--space-4);
+  --modal-divider-line-border:var(--border-1) solid var(--border-divider-border);
+  --modal-divider-line-offset-right:var(--space-4);
+  --modal-divider-line-offset-left:var(--space-4);
+  --modal-divider-line-offset-right-non-fullscreen:var(--space-6);
+  --modal-divider-line-offset-left-non-fullscreen:var(--space-6);
+  --modal-footer-padding:var(--space-4);
+  --modal-footer-padding-non-fullscreen:var(--space-6);
+  --modal-footer-button-margin-inline-start:var(--space-3);
+}
+
+.bp_modal_module_overlay--cf8d1[data-modern=true]{
+  --modal-overlay-background:var(--bp-overlay-modal-overlay);
+  --modal-content-background:var(--bp-gray-white);
+  --modal-min-width-non-fullscreen:calc(460px - var(--bp-space-080)*2);
+  --modal-max-height-non-fullscreen:calc(100vh - var(--bp-space-080)*2);
+  --modal-max-width-small:460px;
+  --modal-max-width-medium:540px;
+  --modal-max-width-large:620px;
+  --modal-max-width-xlarge:768px;
+  --modal-margin:0 var(--bp-space-080);
+  --modal-border-radius:var(--bp-radius-16);
+  --modal-close-button-color:var(--bp-icon-icon-on-light-secondary);
+  --modal-close-button-offset-top:var(--bp-space-040);
+  --modal-close-button-offset-right:var(--bp-space-040);
+  --modal-close-button-on-color-background:var(--bp-surface-cta-surface-tertiary);
+  --modal-close-button-on-color-background-hover:var(--bp-surface-cta-surface-icon-hover);
+  --modal-close-button-on-color-background-pressed:var(--bp-surface-cta-surface-icon-pressed);
+  --modal-back-button-color:var(--bp-icon-icon-on-light-secondary);
+  --modal-back-button-margin-top-start:var(--bp-space-040);
+  --modal-back-button-margin-inline-start:var(--bp-space-040);
+  --modal-back-button-size-non-fullscreen:var(--bp-size-100);
+  --modal-title-gap:var(--bp-space-020);
+  --modal-title-padding:var(--bp-space-050) var(--bp-space-120) var(--bp-space-050) var(--bp-space-040);
+  --modal-title-padding-non-fullscreen:var(--bp-space-060) var(--bp-space-160) var(--bp-space-060) var(--bp-space-060);
+  --modal-body-padding:var(--bp-space-060) var(--bp-space-040) var(--bp-space-040);
+  --modal-body-padding-non-fullscreen:var(--bp-space-060) var(--bp-space-060) var(--bp-space-040);
+  --modal-divider-line-border:var(--bp-border-01) solid var(--bp-border-divider-border);
+  --modal-divider-line-offset-right:var(--bp-space-040);
+  --modal-divider-line-offset-left:var(--bp-space-040);
+  --modal-divider-line-offset-right-non-fullscreen:var(--bp-space-060);
+  --modal-divider-line-offset-left-non-fullscreen:var(--bp-space-060);
+  --modal-footer-padding:var(--bp-space-040);
+  --modal-footer-padding-non-fullscreen:var(--bp-space-060);
+  --modal-footer-button-margin-inline-start:var(--bp-space-030);
+}
+
+.bp_modal_module_overlay--cf8d1{
+  background-color:var(--modal-overlay-background);
   bottom:0;
   display:grid;
   left:0;
@@ -5273,14 +5345,14 @@ table.bp_inline_table_module_inlineTable--7cffa tr:not(:last-child) td{
   z-index:370;
 }
 @media (width > 459px){
-  .bp_modal_module_overlay--5457e{
+  .bp_modal_module_overlay--cf8d1{
     place-items:center;
   }
 }
 
-.bp_modal_module_content--5457e{
-  animation:bp_modal_module_popup_bounce_in--5457e var(--animation-duration-3);
-  background-color:var(--gray-white);
+.bp_modal_module_content--cf8d1{
+  animation:bp_modal_module_popup_bounce_in--cf8d1 var(--animation-duration-3);
+  background-color:var(--modal-content-background);
   display:flex;
   flex-direction:column;
   height:100vh;
@@ -5288,153 +5360,153 @@ table.bp_inline_table_module_inlineTable--7cffa tr:not(:last-child) td{
   position:relative;
 }
 @media (width > 374px){
-  .bp_modal_module_content--5457e{
+  .bp_modal_module_content--cf8d1{
     overflow:hidden;
   }
 }
 @media (width > 459px){
-  .bp_modal_module_content--5457e{
-    border-radius:var(--radius-4);
+  .bp_modal_module_content--cf8d1{
+    border-radius:var(--modal-border-radius);
     height:auto;
-    margin:0 var(--space-8);
-    max-height:calc(100vh - var(--space-8)*2);
-    min-width:calc(460px - var(--space-8)*2);
+    margin:var(--modal-margin);
+    max-height:var(--modal-max-height-non-fullscreen);
+    min-width:var(--modal-min-width-non-fullscreen);
   }
-  .bp_modal_module_content--5457e.bp_modal_module_smallSizeModal--5457e{
-    max-width:460px;
+  .bp_modal_module_content--cf8d1.bp_modal_module_smallSizeModal--cf8d1{
+    max-width:var(--modal-max-width-small);
   }
-  .bp_modal_module_content--5457e.bp_modal_module_mediumSizeModal--5457e{
-    max-width:540px;
+  .bp_modal_module_content--cf8d1.bp_modal_module_mediumSizeModal--cf8d1{
+    max-width:var(--modal-max-width-medium);
   }
-  .bp_modal_module_content--5457e.bp_modal_module_largeSizeModal--5457e{
-    max-width:620px;
+  .bp_modal_module_content--cf8d1.bp_modal_module_largeSizeModal--cf8d1{
+    max-width:var(--modal-max-width-large);
   }
-  .bp_modal_module_content--5457e.bp_modal_module_xlargeSizeModal--5457e{
-    max-width:768px;
+  .bp_modal_module_content--cf8d1.bp_modal_module_xlargeSizeModal--cf8d1{
+    max-width:var(--modal-max-width-xlarge);
   }
 }
 
-.bp_modal_module_scrollableContainer--5457e{
+.bp_modal_module_scrollableContainer--cf8d1{
   flex-grow:1;
 }
 @media (width > 374px){
-  .bp_modal_module_scrollableContainer--5457e{
+  .bp_modal_module_scrollableContainer--cf8d1{
     overflow-y:auto;
   }
 }
 
-.bp_modal_module_content--5457e .bp_modal_module_close--5457e{
-  color:var(--gray-65);
+.bp_modal_module_content--cf8d1 .bp_modal_module_close--cf8d1{
+  color:var(--modal-close-button-color);
   position:fixed;
-  right:var(--space-4);
-  top:var(--space-4);
+  right:var(--modal-close-button-offset-right);
+  top:var(--modal-close-button-offset-top);
 }
 @media (width > 374px){
-  .bp_modal_module_content--5457e .bp_modal_module_close--5457e{
+  .bp_modal_module_content--cf8d1 .bp_modal_module_close--cf8d1{
     position:absolute;
   }
 }
 
-.bp_modal_module_close--5457e.bp_modal_module_onColor--5457e{
-  background-color:var(--surface-cta-surface-tertiary);
+.bp_modal_module_close--cf8d1.bp_modal_module_onColor--cf8d1{
+  background-color:var(--modal-close-button-on-color-background);
 }
-.bp_modal_module_close--5457e.bp_modal_module_onColor--5457e:hover{
-  background-color:var(--surface-cta-surface-icon-hover);
+.bp_modal_module_close--cf8d1.bp_modal_module_onColor--cf8d1:hover{
+  background-color:var(--modal-close-button-on-color-background-hover);
 }
-.bp_modal_module_close--5457e.bp_modal_module_onColor--5457e:active{
-  background-color:var(--surface-cta-surface-icon-pressed);
+.bp_modal_module_close--cf8d1.bp_modal_module_onColor--cf8d1:active{
+  background-color:var(--modal-close-button-on-color-background-pressed);
 }
 
-.bp_modal_module_content--5457e .bp_modal_module_backButton--5457e{
-  color:var(--gray-65);
-  margin-block-start:var(--space-4);
-  margin-inline-start:var(--space-4);
+.bp_modal_module_content--cf8d1 .bp_modal_module_backButton--cf8d1{
+  color:var(--modal-back-button-color);
+  margin-block-start:var(--modal-back-button-margin-top-start);
+  margin-inline-start:var(--modal-back-button-margin-inline-start);
 }
 @media (width > 459px){
-  .bp_modal_module_content--5457e .bp_modal_module_backButton--5457e{
-    height:var(--size-10);
-    width:var(--size-10);
+  .bp_modal_module_content--cf8d1 .bp_modal_module_backButton--cf8d1{
+    height:var(--modal-back-button-size-non-fullscreen);
+    width:var(--modal-back-button-size-non-fullscreen);
   }
 }
 
-.bp_modal_module_modalHeader--5457e{
+.bp_modal_module_modalHeader--cf8d1{
   display:flex;
 }
 
-.bp_modal_module_modalTitle--5457e{
+.bp_modal_module_modalTitle--cf8d1{
   display:flex;
   flex-direction:column;
-  gap:var(--space-2);
+  gap:var(--modal-title-gap);
   overflow:auto;
-  padding:var(--space-5) var(--space-12) var(--space-5) var(--space-4);
+  padding:var(--modal-title-padding);
 }
 @media (width > 459px){
-  .bp_modal_module_modalTitle--5457e{
-    padding:var(--space-6) var(--space-16) var(--space-6) var(--space-6);
+  .bp_modal_module_modalTitle--cf8d1{
+    padding:var(--modal-title-padding-non-fullscreen);
   }
 }
 
-.bp_modal_module_body--5457e{
-  padding:var(--space-6) var(--space-4) var(--space-4);
+.bp_modal_module_body--cf8d1{
+  padding:var(--modal-body-padding);
 }
 @media (width > 459px){
-  .bp_modal_module_body--5457e{
-    padding:var(--space-6) var(--space-6) var(--space-4);
+  .bp_modal_module_body--cf8d1{
+    padding:var(--modal-body-padding-non-fullscreen);
   }
 }
 
-.bp_modal_module_headerDividerLine--5457e{
+.bp_modal_module_headerDividerLine--cf8d1{
   position:relative;
 }
-.bp_modal_module_headerDividerLine--5457e::after{
-  border-bottom:var(--border-1) solid var(--border-divider-border);
+.bp_modal_module_headerDividerLine--cf8d1::after{
+  border-bottom:var(--modal-divider-line-border);
   bottom:0;
   content:"";
-  left:var(--space-4);
+  left:var(--modal-divider-line-offset-left);
   position:absolute;
-  right:var(--space-4);
+  right:var(--modal-divider-line-offset-right);
 }
 @media (width > 459px){
-  .bp_modal_module_headerDividerLine--5457e::after{
-    left:var(--space-6);
-    right:var(--space-6);
+  .bp_modal_module_headerDividerLine--cf8d1::after{
+    left:var(--modal-divider-line-offset-left-non-fullscreen);
+    right:var(--modal-divider-line-offset-right-non-fullscreen);
   }
 }
 
-.bp_modal_module_footerDividerLine--5457e{
+.bp_modal_module_footerDividerLine--cf8d1{
   position:relative;
 }
-.bp_modal_module_footerDividerLine--5457e::before{
-  border-bottom:var(--border-1) solid var(--border-divider-border);
+.bp_modal_module_footerDividerLine--cf8d1::before{
+  border-bottom:var(--modal-divider-line-border);
   content:"";
-  left:var(--space-4);
+  left:var(--modal-divider-line-offset-left);
   position:absolute;
-  right:var(--space-4);
+  right:var(--modal-divider-line-offset-right);
   top:0;
 }
 @media (width > 459px){
-  .bp_modal_module_footerDividerLine--5457e::before{
-    left:var(--space-6);
-    right:var(--space-6);
+  .bp_modal_module_footerDividerLine--cf8d1::before{
+    left:var(--modal-divider-line-offset-left-non-fullscreen);
+    right:var(--modal-divider-line-offset-right-non-fullscreen);
   }
 }
 
-.bp_modal_module_footer--5457e{
+.bp_modal_module_footer--cf8d1{
   display:flex;
   justify-content:flex-end;
-  padding:var(--space-4);
+  padding:var(--modal-footer-padding);
 }
 @media (width > 459px){
-  .bp_modal_module_footer--5457e{
-    padding:var(--space-6);
+  .bp_modal_module_footer--cf8d1{
+    padding:var(--modal-footer-padding-non-fullscreen);
   }
 }
 
-.bp_modal_module_footerButton--5457e + .bp_modal_module_footerButton--5457e{
-  margin-inline-start:var(--space-3);
+.bp_modal_module_footerButton--cf8d1 + .bp_modal_module_footerButton--cf8d1{
+  margin-inline-start:var(--modal-footer-button-margin-inline-start);
 }
 
-@keyframes bp_modal_module_popup_bounce_in--5457e{
+@keyframes bp_modal_module_popup_bounce_in--cf8d1{
   0%{
     transform:scale3d(.1, .1, 1);
   }

package/dist/lib-esm/modal/modal-content.js

@@ -2,6 +2,7 @@ import { jsx } from 'react/jsx-runtime';
 import * as RadixDialog from '@radix-ui/react-dialog';
 import clsx from 'clsx';
 import { forwardRef } from 'react';
+import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 import styles from './modal.module.js';
 
 /**
@@ -15,19 +16,25 @@ const ModalContent = /*#__PURE__*/forwardRef(({
   'data-testid': dataTestId = 'modal-content-container',
   size,
   ...props
-}, forwardedRef) => jsx(RadixDialog.Portal, {
-  container: container,
-  children: jsx(RadixDialog.Overlay, {
-    className: styles.overlay,
-    children: jsx(RadixDialog.Content, {
-      ...props,
-      ref: forwardedRef,
-      asChild: asChild,
-      className: clsx(styles.content, styles[`${size}SizeModal`], className),
-      "data-testid": dataTestId,
-      children: children
+}, forwardedRef) => {
+  const {
+    enableModernizedComponents
+  } = useBlueprintModernization();
+  return jsx(RadixDialog.Portal, {
+    container: container,
+    children: jsx(RadixDialog.Overlay, {
+      className: styles.overlay,
+      "data-modern": enableModernizedComponents,
+      children: jsx(RadixDialog.Content, {
+        ...props,
+        ref: forwardedRef,
+        asChild: asChild,
+        className: clsx(styles.content, styles[`${size}SizeModal`], className),
+        "data-testid": dataTestId,
+        children: children
+      })
     })
-  })
-}));
+  });
+});
 
 export { ModalContent };

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

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"overlay":"bp_modal_module_overlay--5457e","content":"bp_modal_module_content--5457e","popup_bounce_in":"bp_modal_module_popup_bounce_in--5457e","smallSizeModal":"bp_modal_module_smallSizeModal--5457e","mediumSizeModal":"bp_modal_module_mediumSizeModal--5457e","largeSizeModal":"bp_modal_module_largeSizeModal--5457e","xlargeSizeModal":"bp_modal_module_xlargeSizeModal--5457e","scrollableContainer":"bp_modal_module_scrollableContainer--5457e","close":"bp_modal_module_close--5457e","onColor":"bp_modal_module_onColor--5457e","backButton":"bp_modal_module_backButton--5457e","modalHeader":"bp_modal_module_modalHeader--5457e","modalTitle":"bp_modal_module_modalTitle--5457e","body":"bp_modal_module_body--5457e","headerDividerLine":"bp_modal_module_headerDividerLine--5457e","footerDividerLine":"bp_modal_module_footerDividerLine--5457e","footer":"bp_modal_module_footer--5457e","footerButton":"bp_modal_module_footerButton--5457e"};
+var styles = {"overlay":"bp_modal_module_overlay--cf8d1","content":"bp_modal_module_content--cf8d1","popup_bounce_in":"bp_modal_module_popup_bounce_in--cf8d1","smallSizeModal":"bp_modal_module_smallSizeModal--cf8d1","mediumSizeModal":"bp_modal_module_mediumSizeModal--cf8d1","largeSizeModal":"bp_modal_module_largeSizeModal--cf8d1","xlargeSizeModal":"bp_modal_module_xlargeSizeModal--cf8d1","scrollableContainer":"bp_modal_module_scrollableContainer--cf8d1","close":"bp_modal_module_close--cf8d1","onColor":"bp_modal_module_onColor--cf8d1","backButton":"bp_modal_module_backButton--cf8d1","modalHeader":"bp_modal_module_modalHeader--cf8d1","modalTitle":"bp_modal_module_modalTitle--cf8d1","body":"bp_modal_module_body--cf8d1","headerDividerLine":"bp_modal_module_headerDividerLine--cf8d1","footerDividerLine":"bp_modal_module_footerDividerLine--cf8d1","footer":"bp_modal_module_footer--cf8d1","footerButton":"bp_modal_module_footerButton--cf8d1"};
 
 export { styles as default };

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--d6857","primary":"bp_base_button_module_primary--d6857","secondary":"bp_base_button_module_secondary--d6857","tertiary":"bp_base_button_module_tertiary--d6857","outline":"bp_base_button_module_outline--d6857","small":"bp_base_button_module_small--d6857","isIconButton":"bp_base_button_module_isIconButton--d6857","large":"bp_base_button_module_large--d6857","icon":"bp_base_button_module_icon--d6857","hide":"bp_base_button_module_hide--d6857"};
+var styles = {"button":"bp_base_button_module_button--77a2c","primary":"bp_base_button_module_primary--77a2c","secondary":"bp_base_button_module_secondary--77a2c","tertiary":"bp_base_button_module_tertiary--77a2c","outline":"bp_base_button_module_outline--77a2c","small":"bp_base_button_module_small--77a2c","isIconButton":"bp_base_button_module_isIconButton--77a2c","large":"bp_base_button_module_large--77a2c","icon":"bp_base_button_module_icon--77a2c","hide":"bp_base_button_module_hide--77a2c"};
 
 export { styles as default };

package/package.json

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