@box/blueprint-web 12.99.1 → 12.100.1

package/dist/lib-esm/index.css

@@ -1829,7 +1829,7 @@
 .bp_base_badge_module_numericBadgeMoreDigits--e8606{
   padding:1px 3px;
 }
-.bp_dropdown_menu_module_content--1c802[data-modern=false]{
+.bp_dropdown_menu_module_content--fc1b6[data-modern=false]{
   --dropdown-menu-radius:var(--radius-3);
   --dropdown-menu-padding:var(--space-3);
   --dropdown-menu-text-color:var(--text-text-on-light);
@@ -1841,6 +1841,7 @@
   --dropdown-menu-item-background-focus:var(--surface-menu-surface-hover);
   --dropdown-menu-item-border-focus:var(--border-2) solid var(--outline-focus-on-light);
   --dropdown-menu-item-border-active:var(--border-2) solid #0000;
+  --dropdown-menu-item-border-hover:var(--border-2) solid #0000;
   --dropdown-menu-item-background-active:var(--surface-menu-surface-hover);
   --dropdown-menu-item-background-selected:var(--surface-menu-surface-hover);
   --dropdown-menu-item-padding:var(--space-2);
@@ -1870,7 +1871,7 @@
   text-transform:var(--body-default-text-case);
 }
 
-.bp_dropdown_menu_module_content--1c802[data-modern=true]{
+.bp_dropdown_menu_module_content--fc1b6[data-modern=true]{
   --dropdown-menu-radius:var(--bp-radius-10);
   --dropdown-menu-padding:var(--bp-space-030);
   --dropdown-menu-text-color:var(--bp-text-text-on-light);
@@ -1882,6 +1883,7 @@
   --dropdown-menu-item-background-focus:var(--bp-surface-menu-item-surface-hover);
   --dropdown-menu-item-border-focus:var(--bp-border-02) solid var(--bp-outline-focus-on-light);
   --dropdown-menu-item-border-active:var(--bp-border-02) solid #0000;
+  --dropdown-menu-item-border-hover:var(--bp-border-02) solid #0000;
   --dropdown-menu-item-background-active:var(--bp-surface-menu-item-surface-hover);
   --dropdown-menu-item-background-selected:var(--bp-surface-menu-item-surface-hover);
   --dropdown-menu-item-padding:var(--bp-space-020);
@@ -1909,7 +1911,7 @@
   line-height:var(--bp-font-line-height-04);
 }
 
-.bp_dropdown_menu_module_content--1c802{
+.bp_dropdown_menu_module_content--fc1b6{
   backdrop-filter:var(--dropdown-menu-backdrop-filter);
   background-color:var(--dropdown-menu-background);
   border:var(--dropdown-menu-border);
@@ -1924,7 +1926,7 @@
   padding:var(--dropdown-menu-padding);
   z-index:2147483647;
 }
-.bp_dropdown_menu_module_content--1c802[data-menu-fullscreen=true]{
+.bp_dropdown_menu_module_content--fc1b6[data-menu-fullscreen=true]{
   border:unset;
   border-radius:unset;
   display:flex;
@@ -1937,27 +1939,27 @@
   position:relative;
   width:100vw;
 }
-.bp_dropdown_menu_module_content--1c802[data-menu-fullscreen=true] .bp_dropdown_menu_module_fullScreenContent--1c802{
+.bp_dropdown_menu_module_content--fc1b6[data-menu-fullscreen=true] .bp_dropdown_menu_module_fullScreenContent--fc1b6{
   overflow-y:auto;
   padding:var(--dropdown-menu-full-screen-padding);
 }
-.bp_dropdown_menu_module_content--1c802 .bp_dropdown_menu_module_subheader--1c802{
+.bp_dropdown_menu_module_content--fc1b6 .bp_dropdown_menu_module_subheader--fc1b6{
   padding:var(--dropdown-menu-subheader-padding);
 }
-.bp_dropdown_menu_module_content--1c802 .bp_dropdown_menu_module_subheader--1c802.bp_dropdown_menu_module_uppercased--1c802{
+.bp_dropdown_menu_module_content--fc1b6 .bp_dropdown_menu_module_subheader--fc1b6.bp_dropdown_menu_module_uppercased--fc1b6{
   text-transform:uppercase;
 }
-.bp_dropdown_menu_module_content--1c802 .bp_dropdown_menu_module_dropdownMenuItemSeparator--1c802{
+.bp_dropdown_menu_module_content--fc1b6 .bp_dropdown_menu_module_dropdownMenuItemSeparator--fc1b6{
   margin-block:var(--dropdown-menu-separator-margin);
 }
 
-.bp_dropdown_menu_module_ellipsis--1c802{
+.bp_dropdown_menu_module_ellipsis--fc1b6{
   overflow:hidden;
   text-overflow:ellipsis;
   white-space:nowrap;
 }
 
-.bp_dropdown_menu_module_checkmark--1c802{
+.bp_dropdown_menu_module_checkmark--fc1b6{
   align-items:center;
   display:inline-flex;
   justify-content:center;
@@ -1965,7 +1967,7 @@
   position:absolute;
 }
 
-.bp_dropdown_menu_module_item--1c802,.bp_dropdown_menu_module_subMenuTrigger--1c802{
+.bp_dropdown_menu_module_item--fc1b6,.bp_dropdown_menu_module_subMenuTrigger--fc1b6{
   align-items:center;
   border:var(--dropdown-menu-item-border);
   border-radius:var(--dropdown-menu-item-radius);
@@ -1978,61 +1980,65 @@
   -webkit-user-select:none;
           user-select:none;
 }
-.bp_dropdown_menu_module_item--1c802[data-disabled],.bp_dropdown_menu_module_subMenuTrigger--1c802[data-disabled]{
+.bp_dropdown_menu_module_item--fc1b6[data-disabled],.bp_dropdown_menu_module_subMenuTrigger--fc1b6[data-disabled]{
   opacity:60%;
   pointer-events:none;
 }
-.bp_dropdown_menu_module_item--1c802[data-highlighted],.bp_dropdown_menu_module_subMenuTrigger--1c802[data-highlighted]{
+.bp_dropdown_menu_module_item--fc1b6[data-highlighted],.bp_dropdown_menu_module_subMenuTrigger--fc1b6[data-highlighted]{
   background-color:var(--dropdown-menu-item-background-focus);
   border:var(--dropdown-menu-item-border-focus);
 }
-.bp_dropdown_menu_module_item--1c802:active,.bp_dropdown_menu_module_subMenuTrigger--1c802:active{
+.bp_dropdown_menu_module_item--fc1b6[data-state=open][data-highlighted],.bp_dropdown_menu_module_subMenuTrigger--fc1b6[data-state=open][data-highlighted]{
+  border:var(--dropdown-menu-item-border);
+}
+.bp_dropdown_menu_module_item--fc1b6:active,.bp_dropdown_menu_module_subMenuTrigger--fc1b6:active{
   background-color:var(--dropdown-menu-item-background-active);
   border:var(--dropdown-menu-item-border-active);
 }
-.bp_dropdown_menu_module_item--1c802[data-state=open],.bp_dropdown_menu_module_subMenuTrigger--1c802[data-state=open]{
+.bp_dropdown_menu_module_item--fc1b6[data-state=open],.bp_dropdown_menu_module_subMenuTrigger--fc1b6[data-state=open]{
   background-color:var(--dropdown-menu-item-background-selected);
 }
-.bp_dropdown_menu_module_item--1c802:hover,.bp_dropdown_menu_module_subMenuTrigger--1c802:hover{
+.bp_dropdown_menu_module_item--fc1b6:hover,.bp_dropdown_menu_module_subMenuTrigger--fc1b6:hover{
   background-color:var(--dropdown-menu-item-background-hover);
+  border:var(--dropdown-menu-item-border-hover);
 }
-.bp_dropdown_menu_module_item--1c802.bp_dropdown_menu_module_radioItem--1c802,.bp_dropdown_menu_module_subMenuTrigger--1c802.bp_dropdown_menu_module_radioItem--1c802{
+.bp_dropdown_menu_module_item--fc1b6.bp_dropdown_menu_module_radioItem--fc1b6,.bp_dropdown_menu_module_subMenuTrigger--fc1b6.bp_dropdown_menu_module_radioItem--fc1b6{
   padding:.4375rem .5rem .4375rem calc(var(--space-2) + var(--space-4) + var(--space-4));
 }
-.bp_dropdown_menu_module_item--1c802.bp_dropdown_menu_module_radioItem--1c802 .bp_dropdown_menu_module_radioItemMediumSpacing--1c802,.bp_dropdown_menu_module_subMenuTrigger--1c802.bp_dropdown_menu_module_radioItem--1c802 .bp_dropdown_menu_module_radioItemMediumSpacing--1c802{
+.bp_dropdown_menu_module_item--fc1b6.bp_dropdown_menu_module_radioItem--fc1b6 .bp_dropdown_menu_module_radioItemMediumSpacing--fc1b6,.bp_dropdown_menu_module_subMenuTrigger--fc1b6.bp_dropdown_menu_module_radioItem--fc1b6 .bp_dropdown_menu_module_radioItemMediumSpacing--fc1b6{
   padding-inline-start:var(--dropdown-menu-radio-item-medium-padding-start);
 }
-.bp_dropdown_menu_module_item--1c802.bp_dropdown_menu_module_checkboxItem--1c802,.bp_dropdown_menu_module_subMenuTrigger--1c802.bp_dropdown_menu_module_checkboxItem--1c802{
+.bp_dropdown_menu_module_item--fc1b6.bp_dropdown_menu_module_checkboxItem--fc1b6,.bp_dropdown_menu_module_subMenuTrigger--fc1b6.bp_dropdown_menu_module_checkboxItem--fc1b6{
   padding:.4375rem .5rem .4375rem calc(var(--space-2) + var(--space-4) + var(--space-4));
 }
-.bp_dropdown_menu_module_item--1c802.bp_dropdown_menu_module_checkboxItem--1c802 .bp_dropdown_menu_module_checkboxItemMediumSpacing--1c802,.bp_dropdown_menu_module_subMenuTrigger--1c802.bp_dropdown_menu_module_checkboxItem--1c802 .bp_dropdown_menu_module_checkboxItemMediumSpacing--1c802{
+.bp_dropdown_menu_module_item--fc1b6.bp_dropdown_menu_module_checkboxItem--fc1b6 .bp_dropdown_menu_module_checkboxItemMediumSpacing--fc1b6,.bp_dropdown_menu_module_subMenuTrigger--fc1b6.bp_dropdown_menu_module_checkboxItem--fc1b6 .bp_dropdown_menu_module_checkboxItemMediumSpacing--fc1b6{
   padding-inline-start:var(--dropdown-menu-checkbox-item-medium-padding-start);
 }
-.bp_dropdown_menu_module_item--1c802 .bp_dropdown_menu_module_mediumItemLayout--1c802,.bp_dropdown_menu_module_subMenuTrigger--1c802 .bp_dropdown_menu_module_mediumItemLayout--1c802{
+.bp_dropdown_menu_module_item--fc1b6 .bp_dropdown_menu_module_mediumItemLayout--fc1b6,.bp_dropdown_menu_module_subMenuTrigger--fc1b6 .bp_dropdown_menu_module_mediumItemLayout--fc1b6{
   gap:var(--dropdown-menu-medium-item-layout-gap);
   justify-content:space-between;
   overflow:hidden;
 }
-.bp_dropdown_menu_module_item--1c802 .bp_dropdown_menu_module_startElement--1c802,.bp_dropdown_menu_module_subMenuTrigger--1c802 .bp_dropdown_menu_module_startElement--1c802{
+.bp_dropdown_menu_module_item--fc1b6 .bp_dropdown_menu_module_startElement--fc1b6,.bp_dropdown_menu_module_subMenuTrigger--fc1b6 .bp_dropdown_menu_module_startElement--fc1b6{
   align-items:center;
   display:flex;
 }
-.bp_dropdown_menu_module_item--1c802 .bp_dropdown_menu_module_menuItemMainContent--1c802,.bp_dropdown_menu_module_subMenuTrigger--1c802 .bp_dropdown_menu_module_menuItemMainContent--1c802{
+.bp_dropdown_menu_module_item--fc1b6 .bp_dropdown_menu_module_menuItemMainContent--fc1b6,.bp_dropdown_menu_module_subMenuTrigger--fc1b6 .bp_dropdown_menu_module_menuItemMainContent--fc1b6{
   flex-grow:1;
 }
-.bp_dropdown_menu_module_item--1c802 .bp_dropdown_menu_module_endElement--1c802,.bp_dropdown_menu_module_subMenuTrigger--1c802 .bp_dropdown_menu_module_endElement--1c802{
+.bp_dropdown_menu_module_item--fc1b6 .bp_dropdown_menu_module_endElement--fc1b6,.bp_dropdown_menu_module_subMenuTrigger--fc1b6 .bp_dropdown_menu_module_endElement--fc1b6{
   align-items:center;
   color:var(--dropdown-menu-end-element-color);
   display:flex;
 }
-.bp_dropdown_menu_module_item--1c802:has(.bp_dropdown_menu_module_ellipsis--1c802){
+.bp_dropdown_menu_module_item--fc1b6:has(.bp_dropdown_menu_module_ellipsis--fc1b6){
   border-radius:var(--dropdown-menu-item-radius);
 }
-.bp_dropdown_menu_module_item--1c802:has(.bp_dropdown_menu_module_mediumItemLayout--1c802){
+.bp_dropdown_menu_module_item--fc1b6:has(.bp_dropdown_menu_module_mediumItemLayout--fc1b6){
   border-radius:var(--dropdown-menu-medium-item-radius);
 }
 
-.bp_dropdown_menu_module_menuHeader--1c802{
+.bp_dropdown_menu_module_menuHeader--fc1b6{
   align-items:center;
   box-shadow:var(--dropdown-menu-header-shadow);
   display:grid;
@@ -2042,15 +2048,15 @@
   padding:var(--dropdown-menu-header-padding);
 }
 
-.bp_dropdown_menu_module_headerTextContent--1c802{
+.bp_dropdown_menu_module_headerTextContent--fc1b6{
   display:grid;
 }
 
-.bp_dropdown_menu_module_submenuCloseButton--1c802{
+.bp_dropdown_menu_module_submenuCloseButton--fc1b6{
   grid-area:submenu-close;
 }
 
-.bp_dropdown_menu_module_menuCloseButton--1c802{
+.bp_dropdown_menu_module_menuCloseButton--fc1b6{
   grid-area:close;
 }
 .bp_icon_button_module_iconButton--06ef3[data-modern=false]{
@@ -6977,7 +6983,7 @@ table.bp_inline_table_module_inlineTable--17192[data-modern=true] td:last-child,
   display:inline;
 }
 
-.bp_modal_module_overlay--c23ce[data-modern=false]{
+.bp_modal_module_overlay--86b04[data-modern=false]{
   --modal-body-text-color:var(--text-text-on-light);
   --modal-overlay-background:var(--overlay-modal-overlay);
   --modal-content-background:var(--gray-white);
@@ -7018,7 +7024,7 @@ table.bp_inline_table_module_inlineTable--17192[data-modern=true] td:last-child,
   --modal-loading-animation:var(--animation-duration-2) cubic-bezier(.25, .46, .45, .94);
 }
 
-.bp_modal_module_overlay--c23ce[data-modern=true]{
+.bp_modal_module_overlay--86b04[data-modern=true]{
   --modal-overlay-background:var(--bp-overlay-modal-overlay);
   --modal-content-background:var(--bp-surface-modal-surface);
   --modal-min-width-non-fullscreen:calc(460px - var(--bp-space-080)*2);
@@ -7027,6 +7033,9 @@ table.bp_inline_table_module_inlineTable--17192[data-modern=true] td:last-child,
   --modal-max-width-medium:540px;
   --modal-max-width-large:620px;
   --modal-max-width-xlarge:768px;
+  --modal-max-width-loading:var(--modal-min-width-non-fullscreen);
+  --modal-max-height-loading:min(300px, var(--modal-max-height-non-fullscreen));
+  --modal-loading-height:148px;
   --modal-margin:0 var(--bp-space-080);
   --modal-border-radius:var(--bp-radius-16);
   --modal-body-text-color:var(--bp-text-text-on-light);
@@ -7056,7 +7065,7 @@ table.bp_inline_table_module_inlineTable--17192[data-modern=true] td:last-child,
   --modal-loading-animation:var(--animation-duration-2) cubic-bezier(.25, .46, .45, .94);
 }
 
-.bp_modal_module_overlay--c23ce{
+.bp_modal_module_overlay--86b04{
   background-color:var(--modal-overlay-background);
   bottom:0;
   display:grid;
@@ -7068,15 +7077,15 @@ table.bp_inline_table_module_inlineTable--17192[data-modern=true] td:last-child,
   z-index:370;
 }
 @media (width > 459px){
-  .bp_modal_module_overlay--c23ce{
+  .bp_modal_module_overlay--86b04{
     place-items:center;
   }
 }
 
-.bp_modal_module_headerDividerLine--c23ce{
+.bp_modal_module_headerDividerLine--86b04{
   position:relative;
 }
-.bp_modal_module_headerDividerLine--c23ce::after{
+.bp_modal_module_headerDividerLine--86b04::after{
   border-bottom:var(--modal-divider-line-border);
   bottom:0;
   content:"";
@@ -7085,16 +7094,16 @@ table.bp_inline_table_module_inlineTable--17192[data-modern=true] td:last-child,
   right:var(--modal-divider-line-offset-right);
 }
 @media (width > 459px){
-  .bp_modal_module_headerDividerLine--c23ce::after{
+  .bp_modal_module_headerDividerLine--86b04::after{
     left:var(--modal-divider-line-offset-left-non-fullscreen);
     right:var(--modal-divider-line-offset-right-non-fullscreen);
   }
 }
 
-.bp_modal_module_footerDividerLine--c23ce{
+.bp_modal_module_footerDividerLine--86b04{
   position:relative;
 }
-.bp_modal_module_footerDividerLine--c23ce::before{
+.bp_modal_module_footerDividerLine--86b04::before{
   border-bottom:var(--modal-divider-line-border);
   content:"";
   left:var(--modal-divider-line-offset-left);
@@ -7103,14 +7112,14 @@ table.bp_inline_table_module_inlineTable--17192[data-modern=true] td:last-child,
   top:0;
 }
 @media (width > 459px){
-  .bp_modal_module_footerDividerLine--c23ce::before{
+  .bp_modal_module_footerDividerLine--86b04::before{
     left:var(--modal-divider-line-offset-left-non-fullscreen);
     right:var(--modal-divider-line-offset-right-non-fullscreen);
   }
 }
 
-.bp_modal_module_content--c23ce{
-  animation:bp_modal_module_popup_bounce_in--c23ce var(--animation-duration-3);
+.bp_modal_module_content--86b04{
+  animation:bp_modal_module_popup_bounce_in--86b04 var(--animation-duration-3);
   background-color:var(--modal-content-background);
   display:flex;
   flex-direction:column;
@@ -7119,12 +7128,12 @@ table.bp_inline_table_module_inlineTable--17192[data-modern=true] td:last-child,
   position:relative;
 }
 @media (width > 374px){
-  .bp_modal_module_content--c23ce{
+  .bp_modal_module_content--86b04{
     overflow:hidden;
   }
 }
 @media (width > 459px){
-  .bp_modal_module_content--c23ce{
+  .bp_modal_module_content--86b04{
     border-radius:var(--modal-border-radius);
     height:auto;
     margin:var(--modal-margin);
@@ -7132,77 +7141,77 @@ table.bp_inline_table_module_inlineTable--17192[data-modern=true] td:last-child,
     min-width:var(--modal-min-width-non-fullscreen);
     transition:max-width var(--modal-loading-animation), max-height var(--modal-loading-animation);
   }
-  .bp_modal_module_content--c23ce.bp_modal_module_smallSizeModal--c23ce{
+  .bp_modal_module_content--86b04.bp_modal_module_smallSizeModal--86b04{
     max-width:var(--modal-max-width-small);
   }
-  .bp_modal_module_content--c23ce.bp_modal_module_mediumSizeModal--c23ce{
+  .bp_modal_module_content--86b04.bp_modal_module_mediumSizeModal--86b04{
     max-width:var(--modal-max-width-medium);
   }
-  .bp_modal_module_content--c23ce.bp_modal_module_largeSizeModal--c23ce{
+  .bp_modal_module_content--86b04.bp_modal_module_largeSizeModal--86b04{
     max-width:var(--modal-max-width-large);
   }
-  .bp_modal_module_content--c23ce.bp_modal_module_xlargeSizeModal--c23ce{
+  .bp_modal_module_content--86b04.bp_modal_module_xlargeSizeModal--86b04{
     max-width:var(--modal-max-width-xlarge);
   }
 }
-.bp_modal_module_content--c23ce:has(.bp_modal_module_loadingContainerActive--c23ce) .bp_modal_module_footerDividerLine--c23ce::before,.bp_modal_module_content--c23ce:has(.bp_modal_module_loadingContainerActive--c23ce) .bp_modal_module_headerDividerLine--c23ce::after{
+.bp_modal_module_content--86b04:has(.bp_modal_module_loadingContainerActive--86b04) .bp_modal_module_footerDividerLine--86b04::before,.bp_modal_module_content--86b04:has(.bp_modal_module_loadingContainerActive--86b04) .bp_modal_module_headerDividerLine--86b04::after{
   display:none;
 }
 @media (width > 459px){
-  .bp_modal_module_content--c23ce:has(.bp_modal_module_loadingContainerActive--c23ce){
+  .bp_modal_module_content--86b04:has(.bp_modal_module_loadingContainerActive--86b04){
     max-height:var(--modal-max-height-loading);
     max-width:var(--modal-max-width-loading);
   }
 }
 
-.bp_modal_module_scrollableContainer--c23ce{
+.bp_modal_module_scrollableContainer--86b04{
   flex-grow:1;
 }
 @media (width > 374px){
-  .bp_modal_module_scrollableContainer--c23ce{
+  .bp_modal_module_scrollableContainer--86b04{
     overflow-y:auto;
   }
 }
 
-.bp_modal_module_content--c23ce .bp_modal_module_close--c23ce{
+.bp_modal_module_content--86b04 .bp_modal_module_close--86b04{
   color:var(--modal-close-button-color);
   position:fixed;
   right:var(--modal-close-button-offset-right);
   top:var(--modal-close-button-offset-top);
 }
 @media (width > 374px){
-  .bp_modal_module_content--c23ce .bp_modal_module_close--c23ce{
+  .bp_modal_module_content--86b04 .bp_modal_module_close--86b04{
     position:absolute;
   }
 }
 
-.bp_modal_module_close--c23ce.bp_modal_module_onColor--c23ce{
+.bp_modal_module_close--86b04.bp_modal_module_onColor--86b04{
   background-color:var(--modal-close-button-on-color-background);
 }
-.bp_modal_module_close--c23ce.bp_modal_module_onColor--c23ce:hover{
+.bp_modal_module_close--86b04.bp_modal_module_onColor--86b04:hover{
   background-color:var(--modal-close-button-on-color-background-hover);
 }
-.bp_modal_module_close--c23ce.bp_modal_module_onColor--c23ce:active{
+.bp_modal_module_close--86b04.bp_modal_module_onColor--86b04:active{
   background-color:var(--modal-close-button-on-color-background-pressed);
 }
 
-.bp_modal_module_content--c23ce .bp_modal_module_backButton--c23ce{
+.bp_modal_module_content--86b04 .bp_modal_module_backButton--86b04{
   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--c23ce .bp_modal_module_backButton--c23ce{
+  .bp_modal_module_content--86b04 .bp_modal_module_backButton--86b04{
     height:var(--modal-back-button-size-non-fullscreen);
     width:var(--modal-back-button-size-non-fullscreen);
   }
 }
 
-.bp_modal_module_modalHeader--c23ce{
+.bp_modal_module_modalHeader--86b04{
   display:flex;
 }
 
-.bp_modal_module_modalTitle--c23ce{
+.bp_modal_module_modalTitle--86b04{
   display:flex;
   flex-direction:column;
   gap:var(--modal-title-gap);
@@ -7210,78 +7219,83 @@ table.bp_inline_table_module_inlineTable--17192[data-modern=true] td:last-child,
   padding:var(--modal-title-padding);
 }
 @media (width > 459px){
-  .bp_modal_module_modalTitle--c23ce{
+  .bp_modal_module_modalTitle--86b04{
     padding:var(--modal-title-padding-non-fullscreen);
   }
 }
 
-.bp_modal_module_body--c23ce{
+.bp_modal_module_body--86b04{
   color:var(--modal-body-text-color);
   padding:var(--modal-body-padding-fullscreen);
 }
 @media (width > 459px){
-  .bp_modal_module_body--c23ce{
+  .bp_modal_module_body--86b04{
     padding:var(--modal-body-padding-non-fullscreen);
   }
 }
 
-.bp_modal_module_footer--c23ce{
+.bp_modal_module_footer--86b04{
   display:flex;
   justify-content:flex-end;
   padding:var(--modal-footer-padding);
 }
 @media (width > 459px){
-  .bp_modal_module_footer--c23ce{
+  .bp_modal_module_footer--86b04{
     padding:var(--modal-footer-padding-non-fullscreen);
   }
 }
 
-.bp_modal_module_footerButton--c23ce + .bp_modal_module_footerButton--c23ce{
+.bp_modal_module_footerButton--86b04 + .bp_modal_module_footerButton--86b04{
   margin-inline-start:var(--modal-footer-button-margin-inline-start);
 }
 
-.bp_modal_module_loadingContainer--c23ce{
+.bp_modal_module_loadingContainer--86b04{
   display:flex;
-  min-height:0;
+  flex-direction:column;
+  flex-grow:1;
   position:relative;
-  transition:height var(--modal-loading-animation);
+}
+@media (width > 374px){
+  .bp_modal_module_loadingContainer--86b04{
+    min-height:0;
+  }
 }
 
-.bp_modal_module_loadingContainerActive--c23ce{
-  height:var(--modal-loading-height);
+.bp_modal_module_loadingContainerActive--86b04{
   overflow:hidden;
 }
 
-.bp_modal_module_loading--c23ce{
+.bp_modal_module_loading--86b04{
   align-items:center;
   display:flex;
 }
 
-.bp_modal_module_loadingContainerActive--c23ce .bp_modal_module_loading--c23ce{
-  height:var(--modal-loading-height);
-}
-
-.bp_modal_module_loadingOverlay--c23ce{
+.bp_modal_module_loadingOverlay--86b04{
   background-color:var(--modal-content-background);
   bottom:0;
   left:0;
-  min-height:var(--modal-loading-height);
   position:absolute;
   right:0;
   top:0;
   z-index:1;
 }
 
-.bp_modal_module_loadingContent--c23ce{
+.bp_modal_module_loadingContent--86b04{
   display:flex;
+  flex-direction:column;
   visibility:hidden;
 }
+@media (width > 374px){
+  .bp_modal_module_loadingContent--86b04{
+    min-height:0;
+  }
+}
 
-.bp_modal_module_loadingContentVisible--c23ce{
+.bp_modal_module_loadingContentVisible--86b04{
   visibility:visible;
 }
 
-@keyframes bp_modal_module_popup_bounce_in--c23ce{
+@keyframes bp_modal_module_popup_bounce_in--86b04{
   0%{
     transform:scale3d(.1, .1, 1);
   }

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

@@ -2,6 +2,7 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, useState, useEffect } from 'react';
 import { clsx } from 'clsx';
 import { LoadingIndicator } from '../loading-indicator/loading-indicator.js';
+import { useMedia } from '../utils/useMedia.js';
 import { MODAL_LOADING_ANIMATION_DURATION } from './constants.js';
 import styles from './modal.module.js';
 
@@ -18,6 +19,7 @@ const ModalLoading = /*#__PURE__*/forwardRef(({
   children,
   ...rest
 }, forwardedRef) => {
+  const isAboveModalFullscreen = useMedia('(width > 459px)');
   const [loadingState, setLoadingState] = useState(isLoading ? LoadingState.Loading : LoadingState.ShowingContent);
   useEffect(() => {
     if (isLoading) {
@@ -25,7 +27,12 @@ const ModalLoading = /*#__PURE__*/forwardRef(({
       setLoadingState(LoadingState.Loading);
       return undefined;
     }
-    // Start animating when loading completes
+    // Skip animation below fullscreen breakpoint (mobile)
+    if (!isAboveModalFullscreen) {
+      setLoadingState(LoadingState.ShowingContent);
+      return undefined;
+    }
+    // Start animating when loading completes (for larger screens)
     setLoadingState(LoadingState.Animating);
     // Show content after modal resize completes
     const showTimer = setTimeout(() => {
@@ -34,7 +41,7 @@ const ModalLoading = /*#__PURE__*/forwardRef(({
     return () => {
       clearTimeout(showTimer);
     };
-  }, [isLoading]);
+  }, [isLoading, isAboveModalFullscreen]);
   const shouldShowLoading = loadingState === LoadingState.Loading;
   const shouldShowContent = loadingState === LoadingState.ShowingContent;
   return jsxs("div", {
@@ -46,6 +53,7 @@ const ModalLoading = /*#__PURE__*/forwardRef(({
       className: clsx(styles.loadingContent, {
         [styles.loadingContentVisible]: shouldShowContent
       }),
+      "data-testid": "modal-loading-content",
       children: children
     }), shouldShowLoading && jsx("div", {
       ...rest,

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

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"overlay":"bp_modal_module_overlay--c23ce","headerDividerLine":"bp_modal_module_headerDividerLine--c23ce","footerDividerLine":"bp_modal_module_footerDividerLine--c23ce","content":"bp_modal_module_content--c23ce","popup_bounce_in":"bp_modal_module_popup_bounce_in--c23ce","smallSizeModal":"bp_modal_module_smallSizeModal--c23ce","mediumSizeModal":"bp_modal_module_mediumSizeModal--c23ce","largeSizeModal":"bp_modal_module_largeSizeModal--c23ce","xlargeSizeModal":"bp_modal_module_xlargeSizeModal--c23ce","loadingContainerActive":"bp_modal_module_loadingContainerActive--c23ce","scrollableContainer":"bp_modal_module_scrollableContainer--c23ce","close":"bp_modal_module_close--c23ce","onColor":"bp_modal_module_onColor--c23ce","backButton":"bp_modal_module_backButton--c23ce","modalHeader":"bp_modal_module_modalHeader--c23ce","modalTitle":"bp_modal_module_modalTitle--c23ce","body":"bp_modal_module_body--c23ce","footer":"bp_modal_module_footer--c23ce","footerButton":"bp_modal_module_footerButton--c23ce","loadingContainer":"bp_modal_module_loadingContainer--c23ce","loading":"bp_modal_module_loading--c23ce","loadingOverlay":"bp_modal_module_loadingOverlay--c23ce","loadingContent":"bp_modal_module_loadingContent--c23ce","loadingContentVisible":"bp_modal_module_loadingContentVisible--c23ce"};
+var styles = {"overlay":"bp_modal_module_overlay--86b04","headerDividerLine":"bp_modal_module_headerDividerLine--86b04","footerDividerLine":"bp_modal_module_footerDividerLine--86b04","content":"bp_modal_module_content--86b04","popup_bounce_in":"bp_modal_module_popup_bounce_in--86b04","smallSizeModal":"bp_modal_module_smallSizeModal--86b04","mediumSizeModal":"bp_modal_module_mediumSizeModal--86b04","largeSizeModal":"bp_modal_module_largeSizeModal--86b04","xlargeSizeModal":"bp_modal_module_xlargeSizeModal--86b04","loadingContainerActive":"bp_modal_module_loadingContainerActive--86b04","scrollableContainer":"bp_modal_module_scrollableContainer--86b04","close":"bp_modal_module_close--86b04","onColor":"bp_modal_module_onColor--86b04","backButton":"bp_modal_module_backButton--86b04","modalHeader":"bp_modal_module_modalHeader--86b04","modalTitle":"bp_modal_module_modalTitle--86b04","body":"bp_modal_module_body--86b04","footer":"bp_modal_module_footer--86b04","footerButton":"bp_modal_module_footerButton--86b04","loadingContainer":"bp_modal_module_loadingContainer--86b04","loading":"bp_modal_module_loading--86b04","loadingOverlay":"bp_modal_module_loadingOverlay--86b04","loadingContent":"bp_modal_module_loadingContent--86b04","loadingContentVisible":"bp_modal_module_loadingContentVisible--86b04"};
 
 export { styles as default };

package/dist/lib-esm/primitives/dropdown-menu/dropdown-menu-checkbox-item.js

@@ -3,9 +3,8 @@ import { Checkmark } from '@box/blueprint-web-assets/icons/Fill';
 import { bpIconIconOnLight, Gray100 } from '@box/blueprint-web-assets/tokens/tokens';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import clsx from 'clsx';
-import { forwardRef, useCallback } from 'react';
+import { forwardRef } from 'react';
 import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
-import { composeEventHandlers } from '../../utils/composeEventHandlers.js';
 import styles from './dropdown-menu.module.js';
 import { useMenuItemVariant } from './menu-item-variant-context.js';
 
@@ -28,13 +27,10 @@ const DropdownMenuCheckboxItem = /*#__PURE__*/forwardRef((props, forwardedRef) =
   const isSizeSmall = internalSize === 'small';
   const checkmarkSize = isSizeSmall ? '1rem' : '2rem';
   const checkmarkColor = enableModernizedComponents ? bpIconIconOnLight : Gray100;
-  const preventDefault = useCallback(event => event.preventDefault(), []);
   return jsxs(DropdownMenuPrimitive.CheckboxItem, {
     ...rest,
     ref: forwardedRef,
     className: clsx(styles.item, styles.checkboxItem, className),
-    onPointerLeave: composeEventHandlers(props.onPointerLeave, preventDefault),
-    onPointerMove: composeEventHandlers(props.onPointerMove, preventDefault),
     children: [jsx(DropdownMenuPrimitive.ItemIndicator, {
       className: styles.checkmark,
       children: jsx(Checkmark, {

package/dist/lib-esm/primitives/dropdown-menu/dropdown-menu-item.js

@@ -27,8 +27,6 @@ const DropdownMenuItemBase = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     ...rest,
     ref: forwardedRef,
     className: clsx(styles.item, sizeStyles, className),
-    onPointerLeave: composeEventHandlers(props.onPointerLeave, preventDefault),
-    onPointerMove: composeEventHandlers(props.onPointerMove, preventDefault),
     // If click starts at trigger button, and ends on the item, it should not trigger the item.
     // Note: this also has a side effect of not allowing to start click and end on a different time.
     // TODO: see if possible to make https://github.com/radix-ui/primitives/blob/b32a93318cdfce383c2eec095710d35ffbd33a1c/packages/react/menu/src/Menu.tsx#L646

package/dist/lib-esm/primitives/dropdown-menu/dropdown-menu-radio-select-item.js

@@ -3,9 +3,8 @@ import { Checkmark } from '@box/blueprint-web-assets/icons/Fill';
 import { bpIconIconOnLight, Gray100 } from '@box/blueprint-web-assets/tokens/tokens';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 import clsx from 'clsx';
-import { forwardRef, useCallback } from 'react';
+import { forwardRef } from 'react';
 import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
-import { composeEventHandlers } from '../../utils/composeEventHandlers.js';
 import styles from './dropdown-menu.module.js';
 import { useMenuItemVariant } from './menu-item-variant-context.js';
 
@@ -28,13 +27,10 @@ const DropdownMenuRadioSelectItem = /*#__PURE__*/forwardRef((props, forwardedRef
   const isSizeSmall = internalSize === 'small';
   const checkmarkSize = isSizeSmall ? '1rem' : '2rem';
   const checkmarkColor = enableModernizedComponents ? bpIconIconOnLight : Gray100;
-  const preventDefault = useCallback(event => event.preventDefault(), []);
   return jsxs(DropdownMenuPrimitive.RadioItem, {
     ...rest,
     ref: forwardedRef,
     className: clsx(styles.item, styles.radioItem),
-    onPointerLeave: composeEventHandlers(props.onPointerLeave, preventDefault),
-    onPointerMove: composeEventHandlers(props.onPointerMove, preventDefault),
     value: value,
     children: [jsx(DropdownMenuPrimitive.ItemIndicator, {
       className: styles.checkmark,

package/dist/lib-esm/primitives/dropdown-menu/dropdown-menu-sub-menu-root.js

@@ -1,17 +1,10 @@
 import { jsx } from 'react/jsx-runtime';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
-import noop from 'lodash/noop';
-import { useContext, useCallback, createContext } from 'react';
+import 'lodash/noop';
+import { useCallback } from 'react';
 import { useControllableState } from '../../utils/useControllableState.js';
 import { SubMenuMenuProvider } from '../menu-utils/responsiveness/SubMenuContext.js';
 
-const ResponsiveSubmenuContext = /*#__PURE__*/createContext({
-  open: false,
-  setOpen: noop
-});
-const useResponsiveSubmenuContext = () => {
-  return useContext(ResponsiveSubmenuContext);
-};
 /**
  * Based on Radix-UI Sub
  * @see https://www.radix-ui.com/docs/primitives/components/dropdown-menu#sub
@@ -45,4 +38,4 @@ const DropdownMenuSubMenuRoot = props => {
 };
 DropdownMenuSubMenuRoot.displayName = 'DropdownMenuSubMenuRoot';
 
-export { DropdownMenuSubMenuRoot, useResponsiveSubmenuContext };
+export { DropdownMenuSubMenuRoot };

package/dist/lib-esm/primitives/dropdown-menu/dropdown-menu-sub-menu-trigger.js

@@ -1,12 +1,9 @@
 import { jsx } from 'react/jsx-runtime';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
-import { forwardRef, useEffect, useCallback } from 'react';
+import { forwardRef, useCallback } from 'react';
 import { MenuItemSideContent, MenuItemMainContent } from '../../util-components/menu-item-sections/menu-item-sections.js';
 import { composeEventHandlers } from '../../utils/composeEventHandlers.js';
-import { useForkRef } from '../../utils/useForkRef.js';
-import { useSubMenuFocus } from '../../utils/useSubMenuFocus.hook.js';
 import { useFullScreenDropdownMenu } from '../menu-utils/responsiveness/FullScreenDropdownMenuContext.js';
-import { useResponsiveSubmenuContext } from './dropdown-menu-sub-menu-root.js';
 import styles from './dropdown-menu.module.js';
 
 const DropdownMenuSubMenuTriggerRoot = /*#__PURE__*/forwardRef((props, forwardedRef) => {
@@ -14,28 +11,17 @@ const DropdownMenuSubMenuTriggerRoot = /*#__PURE__*/forwardRef((props, forwarded
     children,
     ...rest
   } = props;
-  const [localRef, setRefFocusNoop] = useSubMenuFocus();
-  const {
-    open
-  } = useResponsiveSubmenuContext();
   const {
     isMenuFullScreenEnabled
   } = useFullScreenDropdownMenu();
-  useEffect(() => {
-    if (!open) {
-      localRef.current?.focus();
-    }
-  }, [localRef, open]);
   const handleOnPointerMove = useCallback(e => {
-    setRefFocusNoop();
-    //  we should call prevent default so hover doesn't trigger submenu, which is confusing on full screen.
     if (isMenuFullScreenEnabled) {
       e.preventDefault();
     }
-  }, [isMenuFullScreenEnabled, setRefFocusNoop]);
+  }, [isMenuFullScreenEnabled]);
   return jsx(DropdownMenuPrimitive.SubTrigger, {
     ...rest,
-    ref: useForkRef(localRef, forwardedRef),
+    ref: forwardedRef,
     className: styles.item,
     onPointerMove: composeEventHandlers(props.onPointerMove, handleOnPointerMove),
     children: children

package/dist/lib-esm/primitives/dropdown-menu/dropdown-menu.module.js

@@ -1,4 +1,4 @@
 import '../../index.css';
-var styles = {"content":"bp_dropdown_menu_module_content--1c802","fullScreenContent":"bp_dropdown_menu_module_fullScreenContent--1c802","subheader":"bp_dropdown_menu_module_subheader--1c802","uppercased":"bp_dropdown_menu_module_uppercased--1c802","dropdownMenuItemSeparator":"bp_dropdown_menu_module_dropdownMenuItemSeparator--1c802","ellipsis":"bp_dropdown_menu_module_ellipsis--1c802","checkmark":"bp_dropdown_menu_module_checkmark--1c802","item":"bp_dropdown_menu_module_item--1c802","subMenuTrigger":"bp_dropdown_menu_module_subMenuTrigger--1c802","radioItem":"bp_dropdown_menu_module_radioItem--1c802","radioItemMediumSpacing":"bp_dropdown_menu_module_radioItemMediumSpacing--1c802","checkboxItem":"bp_dropdown_menu_module_checkboxItem--1c802","checkboxItemMediumSpacing":"bp_dropdown_menu_module_checkboxItemMediumSpacing--1c802","mediumItemLayout":"bp_dropdown_menu_module_mediumItemLayout--1c802","startElement":"bp_dropdown_menu_module_startElement--1c802","menuItemMainContent":"bp_dropdown_menu_module_menuItemMainContent--1c802","endElement":"bp_dropdown_menu_module_endElement--1c802","menuHeader":"bp_dropdown_menu_module_menuHeader--1c802","headerTextContent":"bp_dropdown_menu_module_headerTextContent--1c802","submenuCloseButton":"bp_dropdown_menu_module_submenuCloseButton--1c802","menuCloseButton":"bp_dropdown_menu_module_menuCloseButton--1c802"};
+var styles = {"content":"bp_dropdown_menu_module_content--fc1b6","fullScreenContent":"bp_dropdown_menu_module_fullScreenContent--fc1b6","subheader":"bp_dropdown_menu_module_subheader--fc1b6","uppercased":"bp_dropdown_menu_module_uppercased--fc1b6","dropdownMenuItemSeparator":"bp_dropdown_menu_module_dropdownMenuItemSeparator--fc1b6","ellipsis":"bp_dropdown_menu_module_ellipsis--fc1b6","checkmark":"bp_dropdown_menu_module_checkmark--fc1b6","item":"bp_dropdown_menu_module_item--fc1b6","subMenuTrigger":"bp_dropdown_menu_module_subMenuTrigger--fc1b6","radioItem":"bp_dropdown_menu_module_radioItem--fc1b6","radioItemMediumSpacing":"bp_dropdown_menu_module_radioItemMediumSpacing--fc1b6","checkboxItem":"bp_dropdown_menu_module_checkboxItem--fc1b6","checkboxItemMediumSpacing":"bp_dropdown_menu_module_checkboxItemMediumSpacing--fc1b6","mediumItemLayout":"bp_dropdown_menu_module_mediumItemLayout--fc1b6","startElement":"bp_dropdown_menu_module_startElement--fc1b6","menuItemMainContent":"bp_dropdown_menu_module_menuItemMainContent--fc1b6","endElement":"bp_dropdown_menu_module_endElement--fc1b6","menuHeader":"bp_dropdown_menu_module_menuHeader--fc1b6","headerTextContent":"bp_dropdown_menu_module_headerTextContent--fc1b6","submenuCloseButton":"bp_dropdown_menu_module_submenuCloseButton--fc1b6","menuCloseButton":"bp_dropdown_menu_module_menuCloseButton--fc1b6"};
 
 export { styles as default };

package/package.json

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