@box/blueprint-web 7.36.3 → 8.1.1

package/lib-esm/index.css

@@ -314,7 +314,7 @@
   }
 }
 
-.bp_base_button_module_button--ef8c5{
+.bp_base_button_module_button--fe56c{
   border-radius:var(--radius-2);
   cursor:pointer;
   font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
@@ -330,95 +330,95 @@
           user-select:none;
   white-space:nowrap;
 }
-.bp_base_button_module_button--ef8c5,.bp_base_button_module_button--ef8c5 .bp_base_button_module_icon--ef8c5{
+.bp_base_button_module_button--fe56c,.bp_base_button_module_button--fe56c .bp_base_button_module_icon--fe56c{
   align-items:center;
   display:flex;
 }
-.bp_base_button_module_button--ef8c5:not(:disabled)[data-focus-visible]{
-  box-shadow:0 0 0 .0625rem #fff,0 0 0 .1875rem #2486fc;
+.bp_base_button_module_button--fe56c:not(:disabled)[data-focus-visible]{
+  box-shadow:0 0 0 var(--border-1, 1px) var(--background-background), 0 0 0 var(--border-3) #2486fc;
 }
-.bp_base_button_module_button--ef8c5:disabled{
+.bp_base_button_module_button--fe56c:disabled{
   opacity:.3;
 }
-.bp_base_button_module_button--ef8c5.bp_base_button_module_primary--ef8c5{
+.bp_base_button_module_button--fe56c.bp_base_button_module_primary--fe56c{
   background:var(--surface-surface-brand);
   border:var(--border-1) solid var(--surface-surface-brand);
   color:var(--text-text-brand-on-color);
 }
-.bp_base_button_module_button--ef8c5.bp_base_button_module_primary--ef8c5:disabled{
+.bp_base_button_module_button--fe56c.bp_base_button_module_primary--fe56c:disabled{
   background:var(--surface-surface-brand-disabled);
 }
-.bp_base_button_module_button--ef8c5.bp_base_button_module_primary--ef8c5:not(:disabled):hover,.bp_base_button_module_button--ef8c5.bp_base_button_module_primary--ef8c5:not(:disabled)[data-focus-visible]{
+.bp_base_button_module_button--fe56c.bp_base_button_module_primary--fe56c:not(:disabled):hover,.bp_base_button_module_button--fe56c.bp_base_button_module_primary--fe56c:not(:disabled)[data-focus-visible]{
   background:var(--surface-surface-brand-hover);
   border:var(--border-1) solid var(--surface-surface-brand-hover);
 }
-.bp_base_button_module_button--ef8c5.bp_base_button_module_primary--ef8c5:not(:disabled):active{
+.bp_base_button_module_button--fe56c.bp_base_button_module_primary--fe56c:not(:disabled):active{
   background:var(--surface-surface-brand-pressed);
   border:var(--border-1) solid var(--surface-surface-brand-pressed);
 }
-.bp_base_button_module_button--ef8c5.bp_base_button_module_secondary--ef8c5{
+.bp_base_button_module_button--fe56c.bp_base_button_module_secondary--fe56c{
   background:var(--surface-cta-surface-secondary);
   border:var(--border-1) solid var(--border-cta-border-secondary);
   color:var(--text-text-on-light);
 }
-.bp_base_button_module_button--ef8c5.bp_base_button_module_secondary--ef8c5:not(:disabled):hover,.bp_base_button_module_button--ef8c5.bp_base_button_module_secondary--ef8c5:not(:disabled)[data-focus-visible]{
+.bp_base_button_module_button--fe56c.bp_base_button_module_secondary--fe56c:not(:disabled):hover,.bp_base_button_module_button--fe56c.bp_base_button_module_secondary--fe56c:not(:disabled)[data-focus-visible]{
   background:var(--surface-cta-surface-secondary-hover);
   border:var(--border-1) solid var(--border-cta-border-secondary-hover);
 }
-.bp_base_button_module_button--ef8c5.bp_base_button_module_secondary--ef8c5:not(:disabled):active{
+.bp_base_button_module_button--fe56c.bp_base_button_module_secondary--fe56c:not(:disabled):active{
   background:var(--surface-cta-surface-secondary-pressed);
   border:var(--border-1) solid var(--border-cta-border-secondary-pressed);
 }
-.bp_base_button_module_button--ef8c5.bp_base_button_module_tertiary--ef8c5{
+.bp_base_button_module_button--fe56c.bp_base_button_module_tertiary--fe56c{
   background:var(--surface-cta-surface-tertiary);
   border:var(--border-1) solid #0000;
   color:var(--text-cta-link);
 }
-.bp_base_button_module_button--ef8c5.bp_base_button_module_tertiary--ef8c5:not(:disabled):hover,.bp_base_button_module_button--ef8c5.bp_base_button_module_tertiary--ef8c5:not(:disabled)[data-focus-visible]{
+.bp_base_button_module_button--fe56c.bp_base_button_module_tertiary--fe56c:not(:disabled):hover,.bp_base_button_module_button--fe56c.bp_base_button_module_tertiary--fe56c:not(:disabled)[data-focus-visible]{
   background:var(--surface-cta-surface-tertiary-hover);
 }
-.bp_base_button_module_button--ef8c5.bp_base_button_module_tertiary--ef8c5:not(:disabled):active{
+.bp_base_button_module_button--fe56c.bp_base_button_module_tertiary--fe56c:not(:disabled):active{
   background:var(--surface-cta-surface-tertiary-pressed);
 }
-.bp_base_button_module_button--ef8c5.bp_base_button_module_outline--ef8c5{
+.bp_base_button_module_button--fe56c.bp_base_button_module_outline--fe56c{
   background:#0000;
   border:var(--border-1) solid var(--border-cta-border-outline);
   color:var(--text-text-on-light);
 }
-.bp_base_button_module_button--ef8c5.bp_base_button_module_outline--ef8c5:not(:disabled):hover,.bp_base_button_module_button--ef8c5.bp_base_button_module_outline--ef8c5:not(:disabled)[data-focus-visible]{
+.bp_base_button_module_button--fe56c.bp_base_button_module_outline--fe56c:not(:disabled):hover,.bp_base_button_module_button--fe56c.bp_base_button_module_outline--fe56c:not(:disabled)[data-focus-visible]{
   background:var(--surface-cta-surface-outline-hover);
   border:var(--border-1) solid var(--border-cta-border-outline-hover);
 }
-.bp_base_button_module_button--ef8c5.bp_base_button_module_outline--ef8c5:not(:disabled):active{
+.bp_base_button_module_button--fe56c.bp_base_button_module_outline--fe56c:not(:disabled):active{
   background:var(--surface-cta-surface-outline-pressed);
   border:var(--border-1) solid var(--border-cta-border-outline-pressed);
 }
-.bp_base_button_module_button--ef8c5.bp_base_button_module_small--ef8c5{
+.bp_base_button_module_button--fe56c.bp_base_button_module_small--fe56c{
   gap:var(--space-1);
   min-height:var(--size-8);
   padding:0 var(--size-4);
 }
-.bp_base_button_module_button--ef8c5.bp_base_button_module_small--ef8c5.bp_base_button_module_isIconButton--ef8c5{
+.bp_base_button_module_button--fe56c.bp_base_button_module_small--fe56c.bp_base_button_module_isIconButton--fe56c{
   height:var(--size-8);
   min-height:unset;
   padding:0 calc((var(--size-8) - var(--size-4))/2);
   width:var(--size-8);
 }
-.bp_base_button_module_button--ef8c5.bp_base_button_module_large--ef8c5{
+.bp_base_button_module_button--fe56c.bp_base_button_module_large--fe56c{
   gap:var(--space-2);
   min-height:var(--size-10);
   padding:0 var(--size-4);
 }
-.bp_base_button_module_button--ef8c5.bp_base_button_module_large--ef8c5.bp_base_button_module_isIconButton--ef8c5{
+.bp_base_button_module_button--fe56c.bp_base_button_module_large--fe56c.bp_base_button_module_isIconButton--fe56c{
   height:var(--size-10);
   padding:0 calc((var(--size-10) - var(--size-5))/2);
   width:var(--size-10);
 }
-.bp_base_button_module_button--ef8c5.bp_base_button_module_hide--ef8c5{
+.bp_base_button_module_button--fe56c.bp_base_button_module_hide--fe56c{
   pointer-events:none;
   position:relative;
 }
-.bp_base_button_module_button--ef8c5.bp_base_button_module_hide--ef8c5 span{
+.bp_base_button_module_button--fe56c.bp_base_button_module_hide--fe56c span{
   color:#0000;
   opacity:0;
 }
@@ -4081,7 +4081,7 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
 .bp_base_text_input_module_inlineError--4b0e7{
   margin-block-start:var(--space-2);
 }
-.bp_chip_module_chip--7e663{
+.bp_chip_module_chip--d387b{
   align-items:center;
   border:none;
   border-radius:var(--radius-half);
@@ -4098,19 +4098,23 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   text-decoration:none;
   text-transform:none;
 }
-.bp_chip_module_chip--7e663 .bp_chip_module_labelText--7e663:first-child{
+.bp_chip_module_chip--d387b .bp_chip_module_labelText--d387b:first-child{
   margin-inline-start:var(--space-4);
 }
-.bp_chip_module_chip--7e663 .bp_chip_module_labelText--7e663:last-child{
+.bp_chip_module_chip--d387b .bp_chip_module_labelText--d387b:last-child{
   margin-inline-end:var(--space-4);
 }
-.bp_chip_module_chip--7e663 .bp_chip_module_chipStatus--7e663:first-child,.bp_chip_module_chip--7e663 svg:first-child{
+.bp_chip_module_chip--d387b .bp_chip_module_chipStatus--d387b:first-child,.bp_chip_module_chip--d387b svg:first-child{
   margin-inline-start:var(--space-2);
 }
-.bp_chip_module_chip--7e663 .bp_chip_module_chipStatus--7e663:last-child,.bp_chip_module_chip--7e663 svg:last-child{
+.bp_chip_module_chip--d387b .bp_chip_module_chipStatus--d387b:last-child,.bp_chip_module_chip--d387b svg:last-child{
   margin-inline-end:var(--space-2);
 }
-.bp_chip_module_chip--7e663 .bp_chip_module_chipStatus--7e663{
+.bp_chip_module_chip--d387b:disabled{
+  cursor:default;
+  pointer-events:none;
+}
+.bp_chip_module_chip--d387b .bp_chip_module_chipStatus--d387b{
   align-items:center;
   background-color:var(--gray-10);
   border-radius:var(--radius-half);
@@ -4129,10 +4133,10 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   text-decoration:none;
   text-transform:none;
 }
-.bp_chip_module_chip--7e663 .bp_chip_module_labelText--7e663{
+.bp_chip_module_chip--d387b .bp_chip_module_labelText--d387b{
   white-space:nowrap;
 }
-.bp_chip_module_chip--7e663.bp_chip_module_chipButton--7e663{
+.bp_chip_module_chip--d387b.bp_chip_module_chipButton--d387b{
   background-color:var(--surface-chip-button-surface);
   font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:.875rem;
@@ -4142,50 +4146,50 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   text-decoration:none;
   text-transform:none;
 }
-.bp_chip_module_chip--7e663.bp_chip_module_chipButton--7e663:focus-visible{
+.bp_chip_module_chip--d387b.bp_chip_module_chipButton--d387b:focus-visible{
   box-shadow:0 0 0 var(--border-2) var(--outline-focus-on-light);
   outline:none;
   overflow:visible;
 }
-.bp_chip_module_chip--7e663.bp_chip_module_chipButton--7e663 .bp_chip_module_chipStatus--7e663{
+.bp_chip_module_chip--d387b.bp_chip_module_chipButton--d387b .bp_chip_module_chipStatus--d387b{
   background-color:var(--box-blue-100);
   color:var(--text-text-on-dark);
 }
-.bp_chip_module_chip--7e663.bp_chip_module_chipButton--7e663:focus-visible,.bp_chip_module_chip--7e663.bp_chip_module_chipButton--7e663[data-active-item]{
+.bp_chip_module_chip--d387b.bp_chip_module_chipButton--d387b:focus-visible,.bp_chip_module_chip--d387b.bp_chip_module_chipButton--d387b[data-active-item]{
   box-shadow:0 0 0 var(--border-2) var(--outline-focus-on-light);
   outline:none;
 }
-.bp_chip_module_chip--7e663.bp_chip_module_chipButton--7e663:disabled{
+.bp_chip_module_chip--d387b.bp_chip_module_chipButton--d387b:disabled{
   pointer-events:none;
 }
-.bp_chip_module_chip--7e663.bp_chip_module_chipButton--7e663:disabled .bp_chip_module_chipStatus--7e663{
+.bp_chip_module_chip--d387b.bp_chip_module_chipButton--d387b:disabled .bp_chip_module_chipStatus--d387b{
   opacity:.4;
 }
-.bp_chip_module_chip--7e663.bp_chip_module_chipButton--7e663:hover:enabled{
+.bp_chip_module_chip--d387b.bp_chip_module_chipButton--d387b:hover:enabled{
   background-color:var(--surface-chip-button-surface-hover);
 }
-.bp_chip_module_chip--7e663.bp_chip_module_singleSelectChip--7e663{
+.bp_chip_module_chip--d387b.bp_chip_module_singleSelectChip--d387b{
   background-color:var(--surface-filterchip-surface-single);
 }
-.bp_chip_module_chip--7e663.bp_chip_module_singleSelectChip--7e663[data-state=on]{
+.bp_chip_module_chip--d387b.bp_chip_module_singleSelectChip--d387b[data-state=on]{
   background-color:var(--surface-filterchip-surface-single-on);
   color:var(--text-text-on-dark);
 }
-.bp_chip_module_chip--7e663.bp_chip_module_singleSelectChip--7e663[data-state=on]:hover{
+.bp_chip_module_chip--d387b.bp_chip_module_singleSelectChip--d387b[data-state=on]:hover{
   background-color:var(--surface-filterchip-surface-single-on-hover);
 }
-.bp_chip_module_chip--7e663.bp_chip_module_singleSelectChip--7e663[data-state=on] .bp_chip_module_chipStatus--7e663{
+.bp_chip_module_chip--d387b.bp_chip_module_singleSelectChip--d387b[data-state=on] .bp_chip_module_chipStatus--d387b{
   color:var(--text-text-on-light);
 }
-.bp_chip_module_chip--7e663.bp_chip_module_singleSelectChip--7e663:focus-visible,.bp_chip_module_chip--7e663.bp_chip_module_singleSelectChip--7e663[data-active-item]{
+.bp_chip_module_chip--d387b.bp_chip_module_singleSelectChip--d387b:focus-visible,.bp_chip_module_chip--d387b.bp_chip_module_singleSelectChip--d387b[data-active-item]{
   box-shadow:0 0 0 var(--border-2) var(--outline-focus-on-light);
   outline:var(--border-1) solid var(--gray-white);
   outline-offset:calc(var(--border-1)*-1);
 }
-.bp_chip_module_chip--7e663.bp_chip_module_singleSelectChip--7e663:hover:not([data-state=on]){
+.bp_chip_module_chip--d387b.bp_chip_module_singleSelectChip--d387b:hover:not([data-state=on]){
   background-color:var(--surface-filterchip-surface-single-hover);
 }
-.bp_chip_module_chip--7e663.bp_chip_module_multiSelectChip--7e663{
+.bp_chip_module_chip--d387b.bp_chip_module_multiSelectChip--d387b{
   background-color:var(--surface-filterchip-surface-multi);
   border:var(--border-1) solid var(--surface-filterchip-surface-multi);
   font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
@@ -4196,10 +4200,10 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   text-decoration:none;
   text-transform:none;
 }
-.bp_chip_module_chip--7e663.bp_chip_module_multiSelectChip--7e663 path{
+.bp_chip_module_chip--d387b.bp_chip_module_multiSelectChip--d387b path{
   fill:var(--icon-icon-on-light);
 }
-.bp_chip_module_chip--7e663.bp_chip_module_multiSelectChip--7e663[data-state=on]{
+.bp_chip_module_chip--d387b.bp_chip_module_multiSelectChip--d387b[data-state=on]{
   background-color:var(--surface-filterchip-surface-multi-on);
   border:var(--border-1) solid var(--border-filterchip-border-multi-on);
   color:var(--text-cta-link);
@@ -4211,32 +4215,32 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   text-decoration:none;
   text-transform:none;
 }
-.bp_chip_module_chip--7e663.bp_chip_module_multiSelectChip--7e663[data-state=on] path{
+.bp_chip_module_chip--d387b.bp_chip_module_multiSelectChip--d387b[data-state=on] path{
   fill:var(--text-cta-link);
 }
-.bp_chip_module_chip--7e663.bp_chip_module_multiSelectChip--7e663[data-state=on]:hover{
+.bp_chip_module_chip--d387b.bp_chip_module_multiSelectChip--d387b[data-state=on]:hover{
   background-color:var(--surface-filterchip-surface-multi-on-hover);
 }
-.bp_chip_module_chip--7e663.bp_chip_module_multiSelectChip--7e663[data-state=on]:focus-visible,.bp_chip_module_chip--7e663.bp_chip_module_multiSelectChip--7e663[data-state=on][data-active-item]{
+.bp_chip_module_chip--d387b.bp_chip_module_multiSelectChip--d387b[data-state=on]:focus-visible,.bp_chip_module_chip--d387b.bp_chip_module_multiSelectChip--d387b[data-state=on][data-active-item]{
   border:var(--border-1) solid var(--gray-white);
   box-shadow:0 0 0 var(--border-2) var(--outline-focus-on-light);
   outline:var(--border-1) solid var(--border-filterchip-border-multi-on);
   outline-offset:calc(var(--border-2)*-1);
 }
-.bp_chip_module_chip--7e663.bp_chip_module_multiSelectChip--7e663[data-state=on] .bp_chip_module_chipStatus--7e663{
+.bp_chip_module_chip--d387b.bp_chip_module_multiSelectChip--d387b[data-state=on] .bp_chip_module_chipStatus--d387b{
   background-color:var(--box-blue-100);
   color:var(--text-text-on-dark);
 }
-.bp_chip_module_chip--7e663.bp_chip_module_multiSelectChip--7e663:focus-visible:not([data-state=on]),.bp_chip_module_chip--7e663.bp_chip_module_multiSelectChip--7e663[data-active-item]:not([data-state=on]){
+.bp_chip_module_chip--d387b.bp_chip_module_multiSelectChip--d387b:focus-visible:not([data-state=on]),.bp_chip_module_chip--d387b.bp_chip_module_multiSelectChip--d387b[data-active-item]:not([data-state=on]){
   box-shadow:0 0 0 var(--border-2) var(--outline-focus-on-light);
   outline:var(--border-1) solid var(--gray-white);
   outline-offset:calc(var(--border-1)*-1);
 }
-.bp_chip_module_chip--7e663.bp_chip_module_multiSelectChip--7e663:hover:not([data-state=on]){
+.bp_chip_module_chip--d387b.bp_chip_module_multiSelectChip--d387b:hover:not([data-state=on]){
   background-color:var(--surface-filterchip-surface-multi-hover);
   border:var(--border-1) solid var(--surface-filterchip-surface-multi-hover);
 }
-.bp_chip_module_chip--7e663.bp_chip_module_multiSelectChip--7e663 span::before{
+.bp_chip_module_chip--d387b.bp_chip_module_multiSelectChip--d387b span::before{
   content:attr(data-text);
   display:block;
   font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
@@ -4251,20 +4255,20 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   visibility:hidden;
 }
 
-.bp_chip_module_chipsGroup--7e663{
+.bp_chip_module_chipsGroup--d387b{
   display:flex;
   flex-wrap:wrap;
   gap:var(--space-2);
 }
 @media (max-width: 767px){
-  .bp_chip_module_chipsGroup--7e663{
+  .bp_chip_module_chipsGroup--d387b{
     -ms-overflow-style:none;
     flex-wrap:nowrap;
     overflow-x:scroll;
     padding:var(--space-05);
     scrollbar-width:none;
   }
-  .bp_chip_module_chipsGroup--7e663::-webkit-scrollbar{
+  .bp_chip_module_chipsGroup--d387b::-webkit-scrollbar{
     display:none;
   }
 }
@@ -4309,7 +4313,7 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   background-color:var(--surface-menu-surface-focus);
 }
 
-.bp_notification_module_viewport--c5cdd{
+.bp_notification_module_viewport--dba95{
   all:unset;
   align-items:center;
   display:flex;
@@ -4322,7 +4326,7 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   z-index:2147483647;
 }
 
-.bp_notification_module_root--c5cdd{
+.bp_notification_module_root--dba95{
   border:var(--border-2) solid;
   border-radius:var(--radius-3);
   display:flex;
@@ -4330,26 +4334,26 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   width:max-content;
 }
 @media (width > 374px){
-  .bp_notification_module_root--c5cdd{
+  .bp_notification_module_root--dba95{
     max-width:343px;
   }
 }
 @media (width > 767px){
-  .bp_notification_module_root--c5cdd{
+  .bp_notification_module_root--dba95{
     max-width:728px;
   }
 }
 @media (width > 1023px){
-  .bp_notification_module_root--c5cdd{
+  .bp_notification_module_root--dba95{
     max-width:848px;
   }
 }
 @media (width > 1219px){
-  .bp_notification_module_root--c5cdd{
+  .bp_notification_module_root--dba95{
     max-width:896px;
   }
 }
-.bp_notification_module_root--c5cdd .bp_notification_module_container--c5cdd{
+.bp_notification_module_root--dba95 .bp_notification_module_container--dba95{
   align-items:flex-start;
   box-shadow:var(--dropshadow-3);
   display:flex;
@@ -4358,11 +4362,11 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   width:100%;
 }
 @media (width > 767px){
-  .bp_notification_module_root--c5cdd .bp_notification_module_container--c5cdd{
+  .bp_notification_module_root--dba95 .bp_notification_module_container--dba95{
     align-items:center;
   }
 }
-.bp_notification_module_root--c5cdd .bp_notification_module_mobileContainer--c5cdd{
+.bp_notification_module_root--dba95 .bp_notification_module_mobileContainer--dba95{
   align-items:left;
   display:flex;
   flex-direction:column;
@@ -4370,46 +4374,46 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   width:100%;
 }
 @media (width > 767px){
-  .bp_notification_module_root--c5cdd .bp_notification_module_mobileContainer--c5cdd{
+  .bp_notification_module_root--dba95 .bp_notification_module_mobileContainer--dba95{
     align-items:center;
     flex-direction:row;
   }
 }
-.bp_notification_module_root--c5cdd .bp_notification_module_withButtons--c5cdd{
+.bp_notification_module_root--dba95 .bp_notification_module_withButtons--dba95{
   gap:var(--space-3);
 }
-.bp_notification_module_root--c5cdd.bp_notification_module_info--c5cdd{
+.bp_notification_module_root--dba95.bp_notification_module_info--dba95{
   background:var(--surface-message-surface-info);
   border-color:var(--border-message-border-info);
 }
-.bp_notification_module_root--c5cdd.bp_notification_module_success--c5cdd{
+.bp_notification_module_root--dba95.bp_notification_module_success--dba95{
   background:var(--surface-message-surface-success);
   border-color:var(--border-message-border-success);
 }
-.bp_notification_module_root--c5cdd.bp_notification_module_warning--c5cdd{
+.bp_notification_module_root--dba95.bp_notification_module_warning--dba95{
   background:var(--surface-message-surface-warning);
   border-color:var(--border-message-border-warning);
 }
-.bp_notification_module_root--c5cdd.bp_notification_module_error--c5cdd{
+.bp_notification_module_root--dba95.bp_notification_module_error--dba95{
   background:var(--surface-message-surface-error);
   border-color:var(--border-message-border-error);
 }
-.bp_notification_module_root--c5cdd:focus-visible{
-  box-shadow:0 0 0 .0625rem #fff,0 0 0 .1875rem #2486fc;
+.bp_notification_module_root--dba95:focus-visible{
+  box-shadow:0 0 0 var(--border-1, 1px) var(--background-background), 0 0 0 var(--border-3) #2486fc;
   outline:none;
 }
-.bp_notification_module_root--c5cdd .bp_notification_module_typeIconContainer--c5cdd{
+.bp_notification_module_root--dba95 .bp_notification_module_typeIconContainer--dba95{
   align-items:center;
   display:flex;
   height:var(--size-8);
   justify-content:center;
   width:var(--size-8);
 }
-.bp_notification_module_root--c5cdd .bp_notification_module_typeIconContainer--c5cdd .bp_notification_module_typeIcon--c5cdd{
+.bp_notification_module_root--dba95 .bp_notification_module_typeIconContainer--dba95 .bp_notification_module_typeIcon--dba95{
   flex-shrink:0;
   margin-left:var(--space-4);
 }
-.bp_notification_module_root--c5cdd .bp_notification_module_text--c5cdd{
+.bp_notification_module_root--dba95 .bp_notification_module_text--dba95{
   align-items:center;
   color:var(--text-text-on-light);
   display:flex;
@@ -4423,34 +4427,34 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   text-decoration:none;
   text-transform:none;
 }
-.bp_notification_module_root--c5cdd .bp_notification_module_text--c5cdd > div{
+.bp_notification_module_root--dba95 .bp_notification_module_text--dba95 > div{
   overflow:hidden;
   overflow-wrap:break-word;
 }
-.bp_notification_module_root--c5cdd .bp_notification_module_contentButtonSection--c5cdd{
+.bp_notification_module_root--dba95 .bp_notification_module_contentButtonSection--dba95{
   display:flex;
   gap:var(--space-3);
   margin-left:0;
 }
 @media (width > 767px){
-  .bp_notification_module_root--c5cdd .bp_notification_module_contentButtonSection--c5cdd{
+  .bp_notification_module_root--dba95 .bp_notification_module_contentButtonSection--dba95{
     margin-left:auto;
   }
 }
-.bp_notification_module_root--c5cdd .bp_notification_module_contentButtonSection--c5cdd .bp_notification_module_contentButtons--c5cdd{
+.bp_notification_module_root--dba95 .bp_notification_module_contentButtonSection--dba95 .bp_notification_module_contentButtons--dba95{
   display:flex;
   gap:var(--space-3);
 }
-.bp_notification_module_root--c5cdd .bp_notification_module_closeButtonSection--c5cdd{
+.bp_notification_module_root--dba95 .bp_notification_module_closeButtonSection--dba95{
   display:flex;
   gap:var(--space-3);
   margin-left:auto;
   margin-right:var(--space-4);
 }
-.bp_notification_module_root--c5cdd .bp_notification_module_closeButtonSection--c5cdd .bp_notification_module_closeButton--c5cdd{
+.bp_notification_module_root--dba95 .bp_notification_module_closeButtonSection--dba95 .bp_notification_module_closeButton--dba95{
   align-self:center;
 }
-.bp_notification_module_root--c5cdd .bp_notification_module_closeButtonSection--c5cdd .bp_notification_module_closeButton--c5cdd svg *{
+.bp_notification_module_root--dba95 .bp_notification_module_closeButtonSection--dba95 .bp_notification_module_closeButton--dba95 svg *{
   fill:currentColor;
 }
 
@@ -4776,7 +4780,7 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   opacity:.5;
 }
 
-.bp_radio_group_module_root--4f293{
+.bp_radio_group_module_root--365a1{
   display:flex;
   flex-direction:column;
   font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
@@ -4789,31 +4793,31 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   text-transform:none;
 }
 
-.bp_radio_group_module_horizontal--4f293{
+.bp_radio_group_module_horizontal--365a1{
   flex-direction:row;
   gap:1.625rem;
 }
 
-.bp_radio_group_module_radioOption--4f293{
+.bp_radio_group_module_radioOption--365a1{
   display:flex;
   flex-direction:column;
 }
-.bp_radio_group_module_radioOption--4f293 .bp_radio_group_module_label--4f293{
+.bp_radio_group_module_radioOption--365a1 .bp_radio_group_module_label--365a1{
   align-items:flex-start;
   cursor:pointer;
   display:inline-flex;
   gap:var(--size-3);
   line-height:var(--body-default-line-height);
 }
-.bp_radio_group_module_radioOption--4f293 .bp_radio_group_module_description--4f293{
+.bp_radio_group_module_radioOption--365a1 .bp_radio_group_module_description--365a1{
   padding-left:calc(var(--size-4) + var(--size-3));
 }
-.bp_radio_group_module_radioOption--4f293.bp_radio_group_module_disabled--4f293 .bp_radio_group_module_label--4f293{
+.bp_radio_group_module_radioOption--365a1.bp_radio_group_module_disabled--365a1 .bp_radio_group_module_label--365a1{
   color:var(--text-text-on-light-secondary);
   cursor:default;
 }
 
-.bp_radio_group_module_radioButton--4f293{
+.bp_radio_group_module_radioButton--365a1{
   all:unset;
   align-items:center;
   background-color:var(--surface-radio-surface);
@@ -4827,33 +4831,33 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   margin:calc((var(--body-default-line-height) - var(--size-4))/2) 0 0 0;
   width:var(--size-4);
 }
-.bp_radio_group_module_radioButton--4f293 .bp_radio_group_module_indicator--4f293{
+.bp_radio_group_module_radioButton--365a1 .bp_radio_group_module_indicator--365a1{
   background-color:var(--surface-radio-surface-selected);
   border-radius:50%;
   height:var(--size-2);
   transition:transform .1s;
   width:var(--size-2);
 }
-.bp_radio_group_module_radioButton--4f293:focus-visible{
-  box-shadow:0 0 0 .0625rem #fff,0 0 0 .1875rem #2486fc;
+.bp_radio_group_module_radioButton--365a1:focus-visible{
+  box-shadow:0 0 0 var(--border-1, 1px) var(--background-background), 0 0 0 var(--border-3) #2486fc;
 }
-.bp_radio_group_module_radioButton--4f293[data-disabled]{
+.bp_radio_group_module_radioButton--365a1[data-disabled]{
   opacity:60%;
 }
-.bp_radio_group_module_radioButton--4f293[data-state=unchecked]{
+.bp_radio_group_module_radioButton--365a1[data-state=unchecked]{
   background-color:var(--surface-radio-surface);
   border:var(--border-2) solid var(--border-radio-border);
 }
-.bp_radio_group_module_radioButton--4f293[data-state=unchecked] .bp_radio_group_module_indicator--4f293{
+.bp_radio_group_module_radioButton--365a1[data-state=unchecked] .bp_radio_group_module_indicator--365a1{
   transform:scale(0);
 }
-.bp_radio_group_module_radioButton--4f293:not([data-disabled]):focus-visible,.bp_radio_group_module_radioButton--4f293:not([data-disabled]):hover{
+.bp_radio_group_module_radioButton--365a1:not([data-disabled]):focus-visible,.bp_radio_group_module_radioButton--365a1:not([data-disabled]):hover{
   border:var(--border-2) solid var(--border-radio-border-hover);
 }
-.bp_radio_group_module_radioButton--4f293:not([data-disabled]):focus-visible[data-state=checked],.bp_radio_group_module_radioButton--4f293:not([data-disabled]):hover[data-state=checked]{
+.bp_radio_group_module_radioButton--365a1:not([data-disabled]):focus-visible[data-state=checked],.bp_radio_group_module_radioButton--365a1:not([data-disabled]):hover[data-state=checked]{
   border:var(--border-2) solid var(--border-radio-border-selected-hover);
 }
-.bp_radio_group_module_radioButton--4f293:not([data-disabled]):focus-visible[data-state=checked] .bp_radio_group_module_indicator--4f293,.bp_radio_group_module_radioButton--4f293:not([data-disabled]):hover[data-state=checked] .bp_radio_group_module_indicator--4f293{
+.bp_radio_group_module_radioButton--365a1:not([data-disabled]):focus-visible[data-state=checked] .bp_radio_group_module_indicator--365a1,.bp_radio_group_module_radioButton--365a1:not([data-disabled]):hover[data-state=checked] .bp_radio_group_module_indicator--365a1{
   background-color:var(--surface-radio-surface-selected-hover);
 }
 
@@ -5427,7 +5431,7 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   min-width:160px;
 }
 
-.bp_switch_module_option--fe734{
+.bp_switch_module_option--c716c{
   display:flex;
   flex-direction:column;
   font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
@@ -5438,26 +5442,26 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   text-decoration:none;
   text-transform:none;
 }
-.bp_switch_module_option--fe734 .bp_switch_module_label--fe734{
+.bp_switch_module_option--c716c .bp_switch_module_label--c716c{
   cursor:pointer;
   display:inline-flex;
   flex-direction:row;
   width:-moz-fit-content;
   width:fit-content;
 }
-.bp_switch_module_option--fe734 .bp_switch_module_label--fe734.bp_switch_module_rightAlign--fe734{
+.bp_switch_module_option--c716c .bp_switch_module_label--c716c.bp_switch_module_rightAlign--c716c{
   flex-direction:row-reverse;
   justify-content:space-between;
   width:unset;
 }
-.bp_switch_module_option--fe734 .bp_switch_module_description--fe734{
+.bp_switch_module_option--c716c .bp_switch_module_description--c716c{
   margin-left:3.25rem;
 }
-.bp_switch_module_option--fe734 .bp_switch_module_description--fe734.bp_switch_module_rightAlign--fe734{
+.bp_switch_module_option--c716c .bp_switch_module_description--c716c.bp_switch_module_rightAlign--c716c{
   margin-left:unset;
   margin-right:3.25rem;
 }
-.bp_switch_module_option--fe734 .bp_switch_module_switch--fe734{
+.bp_switch_module_option--c716c .bp_switch_module_switch--c716c{
   all:unset;
   align-items:center;
   background-color:#d3d3d3;
@@ -5471,17 +5475,17 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   width:2.5rem;
   will-change:transition;
 }
-.bp_switch_module_option--fe734 .bp_switch_module_switch--fe734.bp_switch_module_rightAlign--fe734{
+.bp_switch_module_option--c716c .bp_switch_module_switch--c716c.bp_switch_module_rightAlign--c716c{
   margin-left:2.5rem;
   margin-right:unset;
 }
-.bp_switch_module_option--fe734 .bp_switch_module_switch--fe734:focus-visible{
-  box-shadow:0 0 0 .0625rem #fff,0 0 0 .1875rem #2486fc;
+.bp_switch_module_option--c716c .bp_switch_module_switch--c716c:focus-visible{
+  box-shadow:0 0 0 var(--border-1, 1px) var(--background-background), 0 0 0 var(--border-3) #2486fc;
 }
-.bp_switch_module_option--fe734 .bp_switch_module_switch--fe734[data-state=checked]{
+.bp_switch_module_option--c716c .bp_switch_module_switch--c716c[data-state=checked]{
   background-color:#0061d5;
 }
-.bp_switch_module_option--fe734 .bp_switch_module_thumb--fe734{
+.bp_switch_module_option--c716c .bp_switch_module_thumb--c716c{
   background-color:#fff;
   border:.0625rem solid #bcbcbc;
   border-radius:2.5rem;
@@ -5493,13 +5497,13 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   width:1.25rem;
   will-change:transform;
 }
-.bp_switch_module_option--fe734 .bp_switch_module_thumb--fe734[data-state=checked]{
+.bp_switch_module_option--c716c .bp_switch_module_thumb--c716c[data-state=checked]{
   transform:translateX(1.25rem);
 }
-.bp_switch_module_option--fe734.bp_switch_module_disabled--fe734 .bp_switch_module_label--fe734{
+.bp_switch_module_option--c716c.bp_switch_module_disabled--c716c .bp_switch_module_label--c716c{
   cursor:default;
 }
-.bp_switch_module_option--fe734.bp_switch_module_disabled--fe734 .bp_switch_module_switch--fe734{
+.bp_switch_module_option--c716c.bp_switch_module_disabled--c716c .bp_switch_module_switch--c716c{
   opacity:60%;
 }
 
@@ -5570,7 +5574,7 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   padding-inline-end:1.875rem;
 }
 
-.bp_text_toggle_button_module_textToggleButton--de041{
+.bp_text_toggle_button_module_textToggleButton--dcf05{
   background:var(--surface-toggle-surface);
   border:var(--border-1) solid var(--border-toggletext-border-off);
   border-radius:var(--radius-2);
@@ -5590,33 +5594,33 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
           user-select:none;
   white-space:nowrap;
 }
-.bp_text_toggle_button_module_textToggleButton--de041:disabled,.bp_text_toggle_button_module_textToggleButton--de041[aria-disabled]{
+.bp_text_toggle_button_module_textToggleButton--dcf05:disabled,.bp_text_toggle_button_module_textToggleButton--dcf05[aria-disabled]{
   opacity:.3;
   pointer-events:none;
 }
-.bp_text_toggle_button_module_textToggleButton--de041:hover{
+.bp_text_toggle_button_module_textToggleButton--dcf05:hover{
   background:var(--surface-toggle-surface-off-hover);
   border-color:var(--border-toggletext-border-off-hover);
 }
-.bp_text_toggle_button_module_textToggleButton--de041:focus,.bp_text_toggle_button_module_textToggleButton--de041[data-focus-visible]{
-  box-shadow:0 0 0 .0625rem #fff,0 0 0 .1875rem #2486fc;
+.bp_text_toggle_button_module_textToggleButton--dcf05:focus,.bp_text_toggle_button_module_textToggleButton--dcf05[data-focus-visible]{
+  box-shadow:0 0 0 var(--border-1, 1px) var(--background-background), 0 0 0 var(--border-3) #2486fc;
 }
-.bp_text_toggle_button_module_textToggleButton--de041:active,.bp_text_toggle_button_module_textToggleButton--de041[data-active]{
+.bp_text_toggle_button_module_textToggleButton--dcf05:active,.bp_text_toggle_button_module_textToggleButton--dcf05[data-active]{
   background:var(--surface-toggle-surface-off-pressed);
   border-color:var(--border-toggletext-border-off-pressed);
 }
-.bp_text_toggle_button_module_textToggleButton--de041[aria-pressed=true]{
+.bp_text_toggle_button_module_textToggleButton--dcf05[aria-pressed=true]{
   background:var(--surface-toggletext-surface-on);
   border:var(--border-1) solid var(--border-toggletext-border-on);
 }
-.bp_text_toggle_button_module_textToggleButton--de041[aria-pressed=true]:hover{
+.bp_text_toggle_button_module_textToggleButton--dcf05[aria-pressed=true]:hover{
   background:var(--surface-toggletext-surface-on-hover);
   border-color:var(--border-toggletext-border-on-hover);
 }
-.bp_text_toggle_button_module_textToggleButton--de041[aria-pressed=true]:focus,.bp_text_toggle_button_module_textToggleButton--de041[aria-pressed=true][data-focus-visible]{
-  box-shadow:0 0 0 .0625rem #fff,0 0 0 .1875rem #2486fc;
+.bp_text_toggle_button_module_textToggleButton--dcf05[aria-pressed=true]:focus,.bp_text_toggle_button_module_textToggleButton--dcf05[aria-pressed=true][data-focus-visible]{
+  box-shadow:0 0 0 var(--border-1, 1px) var(--background-background), 0 0 0 var(--border-3) #2486fc;
 }
-.bp_text_toggle_button_module_textToggleButton--de041[aria-pressed=true]:active,.bp_text_toggle_button_module_textToggleButton--de041[aria-pressed=true][data-active]{
+.bp_text_toggle_button_module_textToggleButton--dcf05[aria-pressed=true]:active,.bp_text_toggle_button_module_textToggleButton--dcf05[aria-pressed=true][data-active]{
   background:var(--surface-toggletext-surface-on-pressed);
   border-color:var(--border-toggletext-border-on-pressed);
 }
@@ -6372,7 +6376,7 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   --z-index-card-tooltip:2147483647;
 }
 
-.bp_toolbar_module_toolbarRoot--0fa7a{
+.bp_toolbar_module_toolbarRoot--8c4b3{
   align-items:center;
   background:var(--surface-surface);
   border:var(--border-1) solid var(--border-card-border);
@@ -6383,19 +6387,19 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   padding:calc(var(--space-1) - var(--border-1));
 }
 
-.bp_toolbar_module_separator--0fa7a{
+.bp_toolbar_module_separator--8c4b3{
   background-color:var(--border-divider-border);
   border-radius:var(--radius-2);
   height:var(--size-6);
   width:1px;
 }
 
-.bp_toolbar_module_toggleGroup--0fa7a{
+.bp_toolbar_module_toggleGroup--8c4b3{
   display:flex;
   gap:var(--space-1);
 }
 
-.bp_toolbar_module_toolbarItem--0fa7a{
+.bp_toolbar_module_toolbarItem--8c4b3{
   --toolbar-item-hover-opacity:0.3;
   align-items:center;
   background:var(--toolbar-button-color, var(--surface-toggle-surface));
@@ -6413,45 +6417,45 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   -webkit-user-select:none;
           user-select:none;
 }
-.bp_toolbar_module_toolbarItem--0fa7a[data-disabled]{
+.bp_toolbar_module_toolbarItem--8c4b3[data-disabled]{
   background:var(--surface-toggle-surface);
   opacity:var(--toolbar-item-hover-opacity);
   pointer-events:none;
 }
-.bp_toolbar_module_toolbarItem--0fa7a:not([data-disabled]):focus-visible{
-  box-shadow:0 0 0 .0625rem #fff,0 0 0 .1875rem #2486fc;
+.bp_toolbar_module_toolbarItem--8c4b3:not([data-disabled]):focus-visible{
+  box-shadow:0 0 0 var(--border-1, 1px) var(--background-background), 0 0 0 var(--border-3) #2486fc;
 }
-.bp_toolbar_module_toolbarItem--0fa7a:not([data-disabled]):hover{
+.bp_toolbar_module_toolbarItem--8c4b3:not([data-disabled]):hover{
   background:var(--toolbar-button-color, var(--surface-toggle-surface-hover));
   border:var(--border-1) solid var(--toolbar-button-color, var(--surface-toggle-surface-hover));
 }
 
-.bp_toolbar_module_toolbarToggle--0fa7a[data-state=on]{
+.bp_toolbar_module_toolbarToggle--8c4b3[data-state=on]{
   background:var(--surface-toggle-surface-pressed);
 }
-.bp_toolbar_module_toolbarToggle--0fa7a[data-state=on] svg *{
+.bp_toolbar_module_toolbarToggle--8c4b3[data-state=on] svg *{
   fill:var(--icon-icon-on-dark);
 }
-.bp_toolbar_module_toolbarToggle--0fa7a[data-state=on]:not([data-disabled]):hover{
+.bp_toolbar_module_toolbarToggle--8c4b3[data-state=on]:not([data-disabled]):hover{
   background:var(--surface-toggle-surface-on-hover);
   border:var(--border-1) solid var(--surface-toggle-surface-on-hover);
 }
 
-.bp_toolbar_module_dropdownIndicator--0fa7a.bp_toolbar_module_invertCaret--0fa7a{
+.bp_toolbar_module_dropdownIndicator--8c4b3.bp_toolbar_module_invertCaret--8c4b3{
   transform:rotate(.5turn);
 }
 
-.bp_toolbar_module_triggerButtonSelectedWithColor--0fa7a{
+.bp_toolbar_module_triggerButtonSelectedWithColor--8c4b3{
   --trigger-button-hover-opacity:0.7;
 }
-.bp_toolbar_module_triggerButtonSelectedWithColor--0fa7a[data-state=on] .bp_toolbar_module_dropdownIndicator--0fa7a path{
+.bp_toolbar_module_triggerButtonSelectedWithColor--8c4b3[data-state=on] .bp_toolbar_module_dropdownIndicator--8c4b3 path{
   fill:var(--icon-icon-on-light);
 }
-.bp_toolbar_module_triggerButtonSelectedWithColor--0fa7a[data-state=on]:hover{
+.bp_toolbar_module_triggerButtonSelectedWithColor--8c4b3[data-state=on]:hover{
   opacity:var(--trigger-button-hover-opacity);
 }
 
-.bp_toolbar_module_toolbarIcon--0fa7a{
+.bp_toolbar_module_toolbarIcon--8c4b3{
   align-items:center;
   display:flex;
   height:var(--size-5);

package/lib-esm/modal/modal-scrollable-container.js

@@ -1,8 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import { clsx } from 'clsx';
-import { forwardRef, useRef } from 'react';
+import { forwardRef, useCallback } from 'react';
 import { useScrollContext } from '../utils/scroll-context.js';
-import { useForkRef } from '../utils/useForkRef.js';
 import styles from './modal.module.js';
 
 /**
@@ -16,12 +15,23 @@ const ModalScrollableContainer = /*#__PURE__*/forwardRef(({
   ...rest
 }, forwardedRef) => {
   const {
-    onScroll
+    onScroll,
+    onAttach
   } = useScrollContext();
-  const scrollableContainerRef = useRef(null);
+  const onMountRef = useCallback(node => {
+    onAttach(node);
+    if (!forwardedRef) {
+      return;
+    }
+    if (typeof forwardedRef === 'function') {
+      forwardedRef(node);
+    } else {
+      forwardedRef.current = node;
+    }
+  }, [forwardedRef, onAttach]);
   return jsx("div", {
     ...rest,
-    ref: useForkRef(scrollableContainerRef, forwardedRef),
+    ref: onMountRef,
     className: clsx(styles.scrollableContainer, className),
     "data-testid": dataTestId,
     onScroll: event => {

package/lib-esm/page/index.d.ts

@@ -3,6 +3,15 @@ export { usePage } from './page-context';
 export * from './types';
 export declare const Page: import("react").ForwardRefExoticComponent<import("./types").PageProps & import("react").RefAttributes<HTMLDivElement>> & {
     Navigation: import("react").ForwardRefExoticComponent<import("./types").PageNavigationProps & import("react").RefAttributes<HTMLDivElement>>;
-    GlobalHeader: import("react").ForwardRefExoticComponent<import("./types").GlobalHeaderProps & import("react").RefAttributes<HTMLDivElement>>;
+    /**
+     * Top level  landmark placed at the top of the page.
+     * Contains two subcomponents for contents:
+     * - PageGlobalHeader.SearchContainer
+     * - PageGlobalHeader.SideContentContainer
+     */
+    GlobalHeader: import("react").ForwardRefExoticComponent<import("./types").GlobalHeaderProps & import("react").RefAttributes<HTMLDivElement>> & {
+        SearchContainer: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+        SideContentContainer: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+    };
     Content: import("react").ForwardRefExoticComponent<import("./types").PageContentProps & import("react").RefAttributes<HTMLDivElement>>;
 };

package/lib-esm/page/page-global-header-search-container.d.ts

@@ -0,0 +1,2 @@
+import { type HTMLAttributes } from 'react';
+export declare const SearchContainer: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

package/lib-esm/page/page-global-header-side-content-container.d.ts

@@ -0,0 +1,2 @@
+import { type HTMLAttributes } from 'react';
+export declare const SideContentContainer: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

package/lib-esm/page/page-global-header.d.ts

@@ -1,3 +1,13 @@
 /// <reference types="react" />
 import { type GlobalHeaderProps } from './types';
 export declare const PageGlobalHeader: import("react").ForwardRefExoticComponent<GlobalHeaderProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const GlobalHeader: import("react").ForwardRefExoticComponent<GlobalHeaderProps & import("react").RefAttributes<HTMLDivElement>> & {
+    /**
+     * Container for components related to global search.
+     */
+    SearchContainer: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+    /**
+     * Container for all components excluding ones related to global search.
+     */
+    SideContentContainer: import("react").ForwardRefExoticComponent<import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+};

package/lib-esm/primitives/base-button/base-button.module.js

@@ -1,4 +1,4 @@
 import '../../index.css';
-var styles = {"button":"bp_base_button_module_button--ef8c5","icon":"bp_base_button_module_icon--ef8c5","primary":"bp_base_button_module_primary--ef8c5","secondary":"bp_base_button_module_secondary--ef8c5","tertiary":"bp_base_button_module_tertiary--ef8c5","outline":"bp_base_button_module_outline--ef8c5","small":"bp_base_button_module_small--ef8c5","isIconButton":"bp_base_button_module_isIconButton--ef8c5","large":"bp_base_button_module_large--ef8c5","hide":"bp_base_button_module_hide--ef8c5"};
+var styles = {"button":"bp_base_button_module_button--fe56c","icon":"bp_base_button_module_icon--fe56c","primary":"bp_base_button_module_primary--fe56c","secondary":"bp_base_button_module_secondary--fe56c","tertiary":"bp_base_button_module_tertiary--fe56c","outline":"bp_base_button_module_outline--fe56c","small":"bp_base_button_module_small--fe56c","isIconButton":"bp_base_button_module_isIconButton--fe56c","large":"bp_base_button_module_large--fe56c","hide":"bp_base_button_module_hide--fe56c"};
 
 export { styles as default };

package/lib-esm/primitives/chips/chip.module.js

@@ -1,4 +1,4 @@
 import '../../index.css';
-var styles = {"chip":"bp_chip_module_chip--7e663","labelText":"bp_chip_module_labelText--7e663","chipStatus":"bp_chip_module_chipStatus--7e663","chipButton":"bp_chip_module_chipButton--7e663","singleSelectChip":"bp_chip_module_singleSelectChip--7e663","multiSelectChip":"bp_chip_module_multiSelectChip--7e663","chipsGroup":"bp_chip_module_chipsGroup--7e663"};
+var styles = {"chip":"bp_chip_module_chip--d387b","labelText":"bp_chip_module_labelText--d387b","chipStatus":"bp_chip_module_chipStatus--d387b","chipButton":"bp_chip_module_chipButton--d387b","singleSelectChip":"bp_chip_module_singleSelectChip--d387b","multiSelectChip":"bp_chip_module_multiSelectChip--d387b","chipsGroup":"bp_chip_module_chipsGroup--d387b"};
 
 export { styles as default };

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

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

package/lib-esm/radio-group/radio-group.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"root":"bp_radio_group_module_root--4f293","horizontal":"bp_radio_group_module_horizontal--4f293","radioOption":"bp_radio_group_module_radioOption--4f293","label":"bp_radio_group_module_label--4f293","description":"bp_radio_group_module_description--4f293","disabled":"bp_radio_group_module_disabled--4f293","radioButton":"bp_radio_group_module_radioButton--4f293","indicator":"bp_radio_group_module_indicator--4f293"};
+var styles = {"root":"bp_radio_group_module_root--365a1","horizontal":"bp_radio_group_module_horizontal--365a1","radioOption":"bp_radio_group_module_radioOption--365a1","label":"bp_radio_group_module_label--365a1","description":"bp_radio_group_module_description--365a1","disabled":"bp_radio_group_module_disabled--365a1","radioButton":"bp_radio_group_module_radioButton--365a1","indicator":"bp_radio_group_module_indicator--365a1"};
 
 export { styles as default };

package/lib-esm/side-panel/side-panel-content.js

@@ -1,8 +1,8 @@
 import { jsx } from 'react/jsx-runtime';
 import * as RadixDialog from '@radix-ui/react-dialog';
+import { FocusScope } from '@radix-ui/react-focus-scope';
 import { clsx } from 'clsx';
 import { forwardRef, useCallback } from 'react';
-import { FocusScope } from '@radix-ui/react-focus-scope';
 import styles from './side-panel.module.js';
 import { useVariant } from './variant-context.js';
 

package/lib-esm/side-panel/side-panel-trigger.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { type SidePanelTriggerProps } from './types';
+/**
+ * Wrapper component for an interactive element that's responsible for opening SidePanel.
+ */
+export declare const SidePanelTrigger: import("react").ForwardRefExoticComponent<SidePanelTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;

package/lib-esm/side-panel/side-panel-trigger.js

@@ -0,0 +1,18 @@
+import { jsx } from 'react/jsx-runtime';
+import * as RadixDialog from '@radix-ui/react-dialog';
+import { forwardRef } from 'react';
+
+/**
+ * Wrapper component for an interactive element that's responsible for opening SidePanel.
+ */
+const SidePanelTrigger = /*#__PURE__*/forwardRef(function SidePanelTrigger({
+  children
+}, forwardedRef) {
+  return jsx(RadixDialog.Trigger, {
+    ref: forwardedRef,
+    asChild: true,
+    children: children
+  });
+});
+
+export { SidePanelTrigger };

package/lib-esm/side-panel/side-panel.d.ts

@@ -22,6 +22,7 @@ export declare const SidePanel: ((props: SidePanelProps) => import("react/jsx-ru
         }, "ref">) & import("react").RefAttributes<HTMLButtonElement>>;
     };
     Header: import("react").ForwardRefExoticComponent<Omit<import("./types").SidePanelHeaderProps, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
-    ScrollableContainer: import("react").ForwardRefExoticComponent<Omit<import("./types").SidePanelScrollableContainerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
     Overlay: import("react").ForwardRefExoticComponent<Omit<import("./types").SidePanelOverlayComponentProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    ScrollableContainer: import("react").ForwardRefExoticComponent<Omit<import("./types").SidePanelScrollableContainerProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Trigger: import("react").ForwardRefExoticComponent<import("./types").SidePanelTriggerProps & import("react").RefAttributes<HTMLButtonElement>>;
 };

package/lib-esm/side-panel/side-panel.js

@@ -7,6 +7,7 @@ import { SidePanelFooter } from './side-panel-footer.js';
 import { SidePanelHeader } from './side-panel-header.js';
 import { SidePanelOverlay } from './side-panel-overlay.js';
 import { SidePanelScrollableContainer } from './side-panel-scrollable-container.js';
+import { SidePanelTrigger } from './side-panel-trigger.js';
 import { VariantProvider } from './variant-context.js';
 
 const Root = props => {
@@ -45,8 +46,9 @@ const SidePanel = Object.assign(Root, {
   Content: SidePanelContent,
   Footer: SidePanelFooter,
   Header: SidePanelHeader,
+  Overlay: SidePanelOverlay,
   ScrollableContainer: SidePanelScrollableContainer,
-  Overlay: SidePanelOverlay
+  Trigger: SidePanelTrigger
 });
 
 export { SidePanel };

package/lib-esm/side-panel/types.d.ts

@@ -1,5 +1,5 @@
 import { type DialogContentProps, type DialogPortalProps, type DialogProps } from '@radix-ui/react-dialog';
-import { type ComponentPropsWithRef, type FunctionComponent, type PropsWithChildren, type ReactNode, type SVGProps } from 'react';
+import { type ComponentPropsWithRef, type FunctionComponent, type PropsWithChildren, type ReactElement, type ReactNode, type SVGProps } from 'react';
 /**
  * 'persistent' - side panel is displayed inline with the page content
  *
@@ -32,6 +32,9 @@ export interface SidePanelCloseProps {
     /** Custom icon for Close element */
     icon?: FunctionComponent<PropsWithChildren<SVGProps<SVGSVGElement>>>;
 }
+export interface SidePanelTriggerProps {
+    children: ReactElement;
+}
 export interface SidePanelScrollableContainerProps extends ComponentPropsWithRef<'div'> {
     /** Content of the ScrollableContainer element */
     children: ReactNode;

package/lib-esm/switch/switch.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"option":"bp_switch_module_option--fe734","label":"bp_switch_module_label--fe734","rightAlign":"bp_switch_module_rightAlign--fe734","description":"bp_switch_module_description--fe734","switch":"bp_switch_module_switch--fe734","thumb":"bp_switch_module_thumb--fe734","disabled":"bp_switch_module_disabled--fe734"};
+var styles = {"option":"bp_switch_module_option--c716c","label":"bp_switch_module_label--c716c","rightAlign":"bp_switch_module_rightAlign--c716c","description":"bp_switch_module_description--c716c","switch":"bp_switch_module_switch--c716c","thumb":"bp_switch_module_thumb--c716c","disabled":"bp_switch_module_disabled--c716c"};
 
 export { styles as default };

package/lib-esm/text/text.js

@@ -17,5 +17,6 @@ const Text = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     className: clsx(styles.textReset, styles.breakWord, styles[variant], styles[color], className)
   }, children);
 });
+Text.displayName = 'Text';
 
 export { Text };

package/lib-esm/text-toggle-button/text-toggle-button.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"textToggleButton":"bp_text_toggle_button_module_textToggleButton--de041"};
+var styles = {"textToggleButton":"bp_text_toggle_button_module_textToggleButton--dcf05"};
 
 export { styles as default };

package/lib-esm/toolbar/toolbar.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"toolbarRoot":"bp_toolbar_module_toolbarRoot--0fa7a","separator":"bp_toolbar_module_separator--0fa7a","toggleGroup":"bp_toolbar_module_toggleGroup--0fa7a","toolbarItem":"bp_toolbar_module_toolbarItem--0fa7a","toolbarToggle":"bp_toolbar_module_toolbarToggle--0fa7a","dropdownIndicator":"bp_toolbar_module_dropdownIndicator--0fa7a","invertCaret":"bp_toolbar_module_invertCaret--0fa7a","triggerButtonSelectedWithColor":"bp_toolbar_module_triggerButtonSelectedWithColor--0fa7a","toolbarIcon":"bp_toolbar_module_toolbarIcon--0fa7a"};
+var styles = {"toolbarRoot":"bp_toolbar_module_toolbarRoot--8c4b3","separator":"bp_toolbar_module_separator--8c4b3","toggleGroup":"bp_toolbar_module_toggleGroup--8c4b3","toolbarItem":"bp_toolbar_module_toolbarItem--8c4b3","toolbarToggle":"bp_toolbar_module_toolbarToggle--8c4b3","dropdownIndicator":"bp_toolbar_module_dropdownIndicator--8c4b3","invertCaret":"bp_toolbar_module_invertCaret--8c4b3","triggerButtonSelectedWithColor":"bp_toolbar_module_triggerButtonSelectedWithColor--8c4b3","toolbarIcon":"bp_toolbar_module_toolbarIcon--8c4b3"};
 
 export { styles as default };

package/lib-esm/utils/createSetRefWithCallback.d.ts

@@ -1,2 +1,10 @@
-import { type ForwardedRef } from 'react';
-export declare function createSetRefWithCallback<T>(forwardedRef: ForwardedRef<T>, callback?: (node: T | null) => void): (node: T | null) => void;
+import { type ForwardedRef, type RefCallback } from 'react';
+/**
+ * Returns function that sets ref and invokes provided ref callback function.
+ */
+export declare function createSetRefWithCallback<T>(forwardedRef: ForwardedRef<T>, callback?: RefCallback<T>): (node: T | null) => void;
+/**
+ * Memoized version of createSetRefWithCallback.
+ * Returns function that sets ref and invokes provided ref callback function.
+ */
+export declare function useCreateSetRefWithCallbackMemo<T>(forwardedRef: ForwardedRef<T>, callback?: RefCallback<T>): (node: T | null) => void;

package/lib-esm/utils/scroll-context.d.ts

@@ -3,6 +3,7 @@ interface ScrollContextType {
     isScrolledUnderHeader: boolean;
     isScrolledUnderFooter: boolean;
     onScroll: (event: UIEvent<HTMLDivElement>) => void;
+    onAttach: (node: HTMLDivElement | null) => void;
 }
 export declare const ScrollProvider: ({ children }: {
     children: React.ReactNode;

package/lib-esm/utils/scroll-context.js

@@ -5,7 +5,8 @@ import { useState, useCallback, useMemo, useContext, createContext } from 'react
 const ScrollContext = /*#__PURE__*/createContext({
   isScrolledUnderFooter: false,
   isScrolledUnderHeader: false,
-  onScroll: noop
+  onScroll: noop,
+  onAttach: noop
 });
 const ScrollProvider = ({
   children
@@ -22,11 +23,18 @@ const ScrollProvider = ({
     const scrolledToBottom = scroll >= scrollHeight - offsetHeight;
     setScrolledUnderFooter(!scrolledToBottom);
   }, []);
+  const onAttach = useCallback(element => {
+    if (element) {
+      setScrolledUnderFooter(element.scrollHeight > element.offsetHeight);
+      setScrolledUnderHeader(element.scrollTop > 0);
+    }
+  }, []);
   const value = useMemo(() => ({
     isScrolledUnderFooter,
     isScrolledUnderHeader,
-    onScroll
-  }), [isScrolledUnderFooter, isScrolledUnderHeader, onScroll]);
+    onScroll,
+    onAttach
+  }), [isScrolledUnderFooter, isScrolledUnderHeader, onScroll, onAttach]);
   return jsx(ScrollContext.Provider, {
     value: value,
     children: children

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "7.36.3",
+    "version": "8.1.1",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
@@ -63,7 +63,7 @@
         "react-stately": "^3.31.1",
         "tsx": "^4.16.5"
     },
-    "gitHead": "cb9d1103ad345206637fdc35e1650751ae752a0a",
+    "gitHead": "b2737e017afef7990166091b1ca1e8aa245ca20a",
     "module": "lib-esm/index.js",
     "main": "lib-esm/index.js",
     "exports": {