@box/blueprint-web 12.46.1 → 12.48.0

package/dist/lib-esm/index.css

@@ -161,56 +161,85 @@
   }
 }
 
-.bp_loading_indicator_module_crawler--03792{
+.bp_loading_indicator_module_crawler--47d03[data-modern=false]{
+  --loading-indicator-medium-size:1.5rem;
+  --loading-indicator-segment-width:0.125rem;
+  --loading-indicator-segment-height:0.625rem;
+  --loading-indicator-segment-border-radius:0.375rem;
+  --loading-indicator-segment-margin-left:0.125rem;
+  --loading-indicator-segment-offset:0.5rem;
+  --loading-indicator-segment-default-background:var(--box-blue-100);
+  --loading-indicator-segment-default-background-opacity-30:var(--box-blue-30);
+  --loading-indicator-segment-dark-background:var(--gray-black);
+  --loading-indicator-segment-dark-background-opacity-30:var(--gray-30);
+  --loading-indicator-segment-light-background:var(--gray-white);
+  --loading-indicator-segment-light-background-opacity-30:var(--white-opacity-30);
+}
+
+.bp_loading_indicator_module_crawler--47d03[data-modern=true]{
+  --loading-indicator-medium-size:1.5rem;
+  --loading-indicator-segment-width:0.125rem;
+  --loading-indicator-segment-height:0.625rem;
+  --loading-indicator-segment-border-radius:var(--bp-radius-12);
+  --loading-indicator-segment-margin-left:0.125rem;
+  --loading-indicator-segment-offset:0.5rem;
+  --loading-indicator-segment-default-background:var(--bp-surface-loading-indicator-surface);
+  --loading-indicator-segment-default-background-opacity-30:var(--bp-surface-loading-indicator-surface-tertiary);
+  --loading-indicator-segment-dark-background:var(--bp-surface-loading-indicator-surface-on-light);
+  --loading-indicator-segment-dark-background-opacity-30:var(--bp-surface-loading-indicator-surface-on-light-tertiary);
+  --loading-indicator-segment-light-background:var(--bp-surface-loading-indicator-surface-on-dark);
+  --loading-indicator-segment-light-background-opacity-30:var(--bp-surface-loading-indicator-surface-on-dark-tertiary);
+}
+
+.bp_loading_indicator_module_crawler--47d03{
   align-items:center;
   display:flex;
-  height:1.5rem;
+  height:var(--loading-indicator-medium-size);
   justify-content:center;
   left:0;
   margin:0 auto;
   position:absolute;
   right:0;
   white-space:nowrap;
-  width:1.5rem;
+  width:var(--loading-indicator-medium-size);
 }
-.bp_loading_indicator_module_crawler--03792 .bp_loading_indicator_module_segment--03792{
-  border-radius:.375rem;
+.bp_loading_indicator_module_crawler--47d03 .bp_loading_indicator_module_segment--47d03{
+  border-radius:var(--loading-indicator-segment-border-radius);
   display:inline-block;
-  height:.625rem;
-  width:.125rem;
+  height:var(--loading-indicator-segment-height);
+  width:var(--loading-indicator-segment-width);
 }
-.bp_loading_indicator_module_crawler--03792.bp_loading_indicator_module_small--03792{
+.bp_loading_indicator_module_crawler--47d03.bp_loading_indicator_module_small--47d03{
   transform:scale(.6667);
 }
-.bp_loading_indicator_module_crawler--03792.bp_loading_indicator_module_large--03792{
+.bp_loading_indicator_module_crawler--47d03.bp_loading_indicator_module_large--47d03{
   transform:scale(1.3334);
 }
-.bp_loading_indicator_module_crawler--03792.bp_loading_indicator_module_x-large--03792{
+.bp_loading_indicator_module_crawler--47d03.bp_loading_indicator_module_x-large--47d03{
   transform:scale(2);
 }
-.bp_loading_indicator_module_crawler--03792.bp_loading_indicator_module_default--03792 .bp_loading_indicator_module_segment--03792{
-  animation:bp_loading_indicator_module_segment-transform--03792 .66s ease-in-out infinite,bp_loading_indicator_module_segment-default--03792 .66s ease-in-out infinite;
+.bp_loading_indicator_module_crawler--47d03.bp_loading_indicator_module_default--47d03 .bp_loading_indicator_module_segment--47d03{
+  animation:bp_loading_indicator_module_segment-transform--47d03 .66s ease-in-out infinite,bp_loading_indicator_module_segment-default--47d03 .66s ease-in-out infinite;
 }
-.bp_loading_indicator_module_crawler--03792.bp_loading_indicator_module_dark--03792 .bp_loading_indicator_module_segment--03792{
-  animation:bp_loading_indicator_module_segment-transform--03792 .66s ease-in-out infinite,bp_loading_indicator_module_segment-dark--03792 .66s ease-in-out infinite;
+.bp_loading_indicator_module_crawler--47d03.bp_loading_indicator_module_dark--47d03 .bp_loading_indicator_module_segment--47d03{
+  animation:bp_loading_indicator_module_segment-transform--47d03 .66s ease-in-out infinite,bp_loading_indicator_module_segment-dark--47d03 .66s ease-in-out infinite;
 }
-.bp_loading_indicator_module_crawler--03792.bp_loading_indicator_module_light--03792 .bp_loading_indicator_module_segment--03792{
-  animation:bp_loading_indicator_module_segment-transform--03792 .66s ease-in-out infinite,bp_loading_indicator_module_segment-light--03792 .66s ease-in-out infinite;
-  background-color:var(--gray-white);
+.bp_loading_indicator_module_crawler--47d03.bp_loading_indicator_module_light--47d03 .bp_loading_indicator_module_segment--47d03{
+  animation:bp_loading_indicator_module_segment-transform--47d03 .66s ease-in-out infinite,bp_loading_indicator_module_segment-light--47d03 .66s ease-in-out infinite;
 }
 
-.bp_loading_indicator_module_crawler--03792 .bp_loading_indicator_module_segment--03792:nth-child(2){
+.bp_loading_indicator_module_crawler--47d03 .bp_loading_indicator_module_segment--47d03:nth-child(2){
   animation-delay:.1s;
-  margin-left:.125rem;
+  margin-left:var(--loading-indicator-segment-margin-left);
 }
 
-.bp_loading_indicator_module_crawler--03792 .bp_loading_indicator_module_segment--03792:last-child{
+.bp_loading_indicator_module_crawler--47d03 .bp_loading_indicator_module_segment--47d03:last-child{
   animation-delay:.2s;
-  left:.5rem;
-  margin-left:.125rem;
+  left:var(--loading-indicator-segment-offset);
+  margin-left:var(--loading-indicator-segment-margin-left);
 }
 
-@keyframes bp_loading_indicator_module_segment-transform--03792{
+@keyframes bp_loading_indicator_module_segment-transform--47d03{
   0%,100%,80%{
     transform:scaleY(1.2);
   }
@@ -218,28 +247,28 @@
     transform:scaleY(1.6);
   }
 }
-@keyframes bp_loading_indicator_module_segment-dark--03792{
+@keyframes bp_loading_indicator_module_segment-dark--47d03{
   0%,100%,80%{
-    background-color:var(--gray-30);
+    background-color:var(--loading-indicator-segment-dark-background-opacity-30);
   }
   40%{
-    background-color:var(--gray-black);
+    background-color:var(--loading-indicator-segment-dark-background);
   }
 }
-@keyframes bp_loading_indicator_module_segment-default--03792{
-  0%,100%,80%{
-    background-color:var(--box-blue-30);
+@keyframes bp_loading_indicator_module_segment-default--47d03{
+  0%,100%{
+    background-color:var(--loading-indicator-segment-default-background-opacity-30);
   }
   40%{
-    background-color:var(--box-blue-100);
+    background-color:var(--loading-indicator-segment-default-background);
   }
 }
-@keyframes bp_loading_indicator_module_segment-light--03792{
+@keyframes bp_loading_indicator_module_segment-light--47d03{
   0%,100%,80%{
-    opacity:.3;
+    background-color:var(--loading-indicator-segment-light-background-opacity-30);
   }
   40%{
-    opacity:1;
+    background-color:var(--loading-indicator-segment-light-background);
   }
 }
 .bp_base_button_module_button--77a2c[data-modern=true]{
@@ -2631,24 +2660,84 @@
   --blueprint-select-border-error-left-width:none;
 }
 
-.bp_select_module_container--776e4{
+.bp_select_module_container--a39b9[data-modern=false]{
+  --select-gap:var(--space-2);
+  --select-label-color:var(--text-text-on-light);
+  --select-trigger-btn-gap:var(--space-2);
+  --select-trigger-btn-height:var(--size-10);
+  --select-trigger-btn-color:var(--text-text-on-light);
+  --select-trigger-btn-bg-color:var(--surface-dropdown-surface);
+  --select-trigger-btn-border-top:var(--blueprint-select-border-top-width, var(--border-1)) solid var(--border-dropdown-border);
+  --select-trigger-btn-border-right:var(--blueprint-select-border-right-width, var(--border-1)) solid var(--border-dropdown-border);
+  --select-trigger-btn-border-bottom:var(--blueprint-select-border-bottom-width, var(--border-1)) solid var(--border-dropdown-border);
+  --select-trigger-btn-border-left:var(--blueprint-select-border-left-width, var(--border-1)) solid var(--border-dropdown-border);
+  --select-trigger-btn-radius:var(--blueprint-select-trigger-radius, var(--radius-2));
+  --select-trigger-btn-box-shadow:var(--dropshadow-2);
+  --select-trigger-btn-padding-inline:var(--space-3);
+  --select-trigger-btn-error-bg-color:var(--surface-dropdown-surface-error);
+  --select-trigger-btn-focus-bg-color:var(--surface-dropdown-surface-error);
+  --select-trigger-btn-error-border-top:var(--blueprint-select-border-error-top-width, var(--border-2)) solid var(--border-dropdown-border-error);
+  --select-trigger-btn-error-border-right:var(--blueprint-select-border-error-right-width, var(--border-2)) solid var(--border-dropdown-border-error);
+  --select-trigger-btn-error-border-bottom:var(--blueprint-select-border-error-bottom-width, var(--border-2)) solid var(--border-dropdown-border-error);
+  --select-trigger-btn-error-border-left:var(--blueprint-select-border-error-left-width, var(--border-2)) solid var(--border-dropdown-border-error);
+  --select-trigger-btn-focus-border:var(--border-2) solid var(--outline-focus-on-light);
+  --select-trigger-btn-hover-bg-color:var(--surface-dropdown-surface-hover);
+  --select-trigger-btn-hover-border-color:var(--border-dropdown-border-hover);
+  --select-trigger-btn-caret-width:var(--size-2);
+  --select-trigger-btn-caret-height:var(--size-2);
+  --select-trigger-btn-caret-color:var(--icon-icon-on-light);
+  --select-trigger-btn-pencil-width:var(--size-4);
+  --select-trigger-btn-pencil-height:var(--size-4);
+}
+
+.bp_select_module_container--a39b9[data-modern=true]{
+  --select-gap:var(--bp-space-020);
+  --select-label-color:var(--bp-text-text-on-light);
+  --select-trigger-btn-gap:var(--bp-space-020);
+  --select-trigger-btn-height:var(--bp-size-100);
+  --select-trigger-btn-color:var(--bp-text-text-on-light);
+  --select-trigger-btn-bg-color:var(--bp-surface-dropdown-surface);
+  --select-trigger-btn-border-top:var(--blueprint-select-border-top-width, var(--bp-border-01)) solid var(--bp-border-dropdown-border);
+  --select-trigger-btn-border-right:var(--blueprint-select-border-right-width, var(--bp-border-01)) solid var(--bp-border-dropdown-border);
+  --select-trigger-btn-border-bottom:var(--blueprint-select-border-bottom-width, var(--bp-border-01)) solid var(--bp-border-dropdown-border);
+  --select-trigger-btn-border-left:var(--blueprint-select-border-left-width, var(--border-1)) solid var(--bp-border-dropdown-border);
+  --select-trigger-btn-radius:var(--blueprint-select-trigger-radius, var(--bp-radius-06));
+  --select-trigger-btn-box-shadow:var(--dropshadow-2);
+  --select-trigger-btn-padding-inline:var(--bp-space-030);
+  --select-trigger-btn-error-bg-color:var(--bp-surface-dropdown-surface-error);
+  --select-trigger-btn-focus-bg-color:var(--bp-surface-dropdown-surface-error-focus);
+  --select-trigger-btn-error-border-top:var(--blueprint-select-border-error-top-width, var(--bp-border-02)) solid var(--bp-border-dropdown-border-error);
+  --select-trigger-btn-error-border-right:var(--blueprint-select-border-error-right-width, var(--bp-border-02)) solid var(--bp-border-dropdown-border-error);
+  --select-trigger-btn-error-border-bottom:var(--blueprint-select-border-error-bottom-width, var(--bp-border-02)) solid var(--bp-border-dropdown-border-error);
+  --select-trigger-btn-error-border-left:var(--blueprint-select-border-error-left-width, var(--bp-border-02)) solid var(--bp-border-dropdown-border-error);
+  --select-trigger-btn-focus-border:var(--bp-border-02) solid var(--bp-outline-focus-on-light);
+  --select-trigger-btn-hover-bg-color:var(--bp-surface-dropdown-surface-hover);
+  --select-trigger-btn-hover-border-color:var(--bp-border-dropdown-border-hover);
+  --select-trigger-btn-caret-width:var(--bp-size-030);
+  --select-trigger-btn-caret-height:var(--bp-size-030);
+  --select-trigger-btn-caret-color:var(--bp-icon-icon-on-light);
+  --select-trigger-btn-pencil-width:var(--bp-size-040);
+  --select-trigger-btn-pencil-height:var(--bp-size-040);
+}
+
+.bp_select_module_container--a39b9{
   display:flex;
   flex-direction:column;
   font-family:var(--body-default-font-family);
   font-size:var(--body-default-font-size);
   font-weight:var(--body-default-font-weight);
-  gap:var(--space-2);
+  gap:var(--select-gap);
   letter-spacing:var(--body-default-letter-spacing);
   line-height:var(--body-default-line-height);
   -webkit-text-decoration:var(--body-default-text-decoration);
           text-decoration:var(--body-default-text-decoration);
   text-transform:var(--body-default-text-case);
 }
-.bp_select_module_container--776e4.bp_select_module_disabled--776e4{
+.bp_select_module_container--a39b9.bp_select_module_disabled--a39b9{
   opacity:60%;
 }
-.bp_select_module_container--776e4 .bp_select_module_label--776e4{
-  color:var(--text-text-on-light);
+.bp_select_module_container--a39b9 .bp_select_module_label--a39b9{
+  color:var(--select-label-color);
   flex:0 0 fit-content;
   font-family:var(--body-default-bold-font-family);
   font-size:var(--body-default-bold-font-size);
@@ -2660,90 +2749,143 @@
           text-decoration:var(--body-default-bold-text-decoration);
   text-transform:var(--body-default-bold-text-case);
 }
-.bp_select_module_container--776e4 .bp_select_module_triggerBtn--776e4{
+.bp_select_module_container--a39b9 .bp_select_module_triggerBtn--a39b9{
   align-items:center;
-  background-color:var(--surface-dropdown-surface);
-  border-bottom:var(--blueprint-select-border-bottom-width, var(--border-1)) solid var(--border-dropdown-border);
-  border-left:var(--blueprint-select-border-left-width, var(--border-1)) solid var(--border-dropdown-border);
-  border-radius:var(--blueprint-select-trigger-radius, var(--radius-2));
-  border-right:var(--blueprint-select-border-right-width, var(--border-1)) solid var(--border-dropdown-border);
-  border-top:var(--blueprint-select-border-top-width, var(--border-1)) solid var(--border-dropdown-border);
-  box-shadow:var(--dropshadow-2);
-  color:var(--text-text-on-light);
+  background-color:var(--select-trigger-btn-bg-color);
+  border-bottom:var(--select-trigger-btn-border-bottom);
+  border-left:var(--select-trigger-btn-border-left);
+  border-radius:var(--select-trigger-btn-radius);
+  border-right:var(--select-trigger-btn-border-right);
+  border-top:var(--select-trigger-btn-border-top);
+  box-shadow:var(--select-trigger-btn-box-shadow);
+  color:var(--select-trigger-btn-color);
   cursor:pointer;
   display:flex;
   font-family:var(--body-default-font-family);
   font-size:var(--body-default-font-size);
   font-weight:var(--body-default-font-weight);
-  gap:var(--space-2);
-  height:var(--size-10);
+  gap:var(--select-trigger-btn-gap);
+  height:var(--select-trigger-btn-height);
   justify-content:space-between;
   letter-spacing:var(--body-default-letter-spacing);
   line-height:var(--body-default-line-height);
   outline:none;
   padding-block:0;
-  padding-inline:var(--space-3);
+  padding-inline:var(--select-trigger-btn-padding-inline);
   text-align:start;
   -webkit-text-decoration:var(--body-default-text-decoration);
           text-decoration:var(--body-default-text-decoration);
   text-transform:var(--body-default-text-case);
   width:100%;
 }
-.bp_select_module_container--776e4 .bp_select_module_triggerBtn--776e4 span:first-child{
+.bp_select_module_container--a39b9 .bp_select_module_triggerBtn--a39b9 span:first-child{
   overflow:hidden;
   text-overflow:ellipsis;
   white-space:nowrap;
 }
-.bp_select_module_container--776e4 .bp_select_module_triggerBtn--776e4:disabled{
+.bp_select_module_container--a39b9 .bp_select_module_triggerBtn--a39b9:disabled{
   cursor:default;
 }
-.bp_select_module_container--776e4 .bp_select_module_triggerBtn--776e4.bp_select_module_readonly--776e4:not(:disabled){
+.bp_select_module_container--a39b9 .bp_select_module_triggerBtn--a39b9.bp_select_module_readonly--a39b9:not(:disabled){
   background-color:var(--gray-02);
   box-shadow:none;
   color:var(--text-text-on-light-secondary);
   cursor:default;
 }
-.bp_select_module_container--776e4 .bp_select_module_triggerBtn--776e4:not(.bp_select_module_readonly--776e4):not(:disabled).bp_select_module_error--776e4,.bp_select_module_container--776e4 .bp_select_module_triggerBtn--776e4:not(.bp_select_module_readonly--776e4):not(:disabled)[aria-invalid=true]{
-  background-color:var(--surface-dropdown-surface-error);
-  border-bottom:var(--blueprint-select-border-error-bottom-width, var(--border-2)) solid var(--border-dropdown-border-error);
-  border-left:var(--blueprint-select-border-error-left-width, var(--border-2)) solid var(--border-dropdown-border-error);
-  border-right:var(--blueprint-select-border-error-right-width, var(--border-2)) solid var(--border-dropdown-border-error);
-  border-top:var(--blueprint-select-border-error-top-width, var(--border-2)) solid var(--border-dropdown-border-error);
+.bp_select_module_container--a39b9 .bp_select_module_triggerBtn--a39b9:not(.bp_select_module_readonly--a39b9):not(:disabled).bp_select_module_error--a39b9,.bp_select_module_container--a39b9 .bp_select_module_triggerBtn--a39b9:not(.bp_select_module_readonly--a39b9):not(:disabled)[aria-invalid=true]{
+  background-color:var(----select-trigger-btn-error-bg-color);
+  border-bottom:var(--select-trigger-btn-error-border-bottom);
+  border-left:var(--select-trigger-btn-error-border-left);
+  border-right:var(--select-trigger-btn-error-border-right);
+  border-top:var(--select-trigger-btn-error-border-top);
 }
-.bp_select_module_container--776e4 .bp_select_module_triggerBtn--776e4:not(.bp_select_module_readonly--776e4):focus,.bp_select_module_container--776e4 .bp_select_module_triggerBtn--776e4:not(.bp_select_module_readonly--776e4):not(:disabled).bp_select_module_error--776e4:focus,.bp_select_module_container--776e4 .bp_select_module_triggerBtn--776e4:not(.bp_select_module_readonly--776e4):not(:disabled)[aria-invalid=true]:focus{
-  background-color:var(--surface-dropdown-surface-focus);
-  border:var(--border-2) solid var(--outline-focus-on-light);
+.bp_select_module_container--a39b9 .bp_select_module_triggerBtn--a39b9:not(.bp_select_module_readonly--a39b9):focus,.bp_select_module_container--a39b9 .bp_select_module_triggerBtn--a39b9:not(.bp_select_module_readonly--a39b9):not(:disabled).bp_select_module_error--a39b9:focus,.bp_select_module_container--a39b9 .bp_select_module_triggerBtn--a39b9:not(.bp_select_module_readonly--a39b9):not(:disabled)[aria-invalid=true]:focus{
+  background-color:var(--select-trigger-btn-focus-bg-color);
+  border:var(--select-trigger-btn-focus-border);
 }
-.bp_select_module_container--776e4 .bp_select_module_triggerBtn--776e4:not(.bp_select_module_readonly--776e4):not(:disabled):not(:focus):not(.bp_select_module_error--776e4):not([aria-invalid]):hover{
-  background-color:var(--surface-dropdown-surface-hover);
-  border-color:var(--border-dropdown-border-hover);
+.bp_select_module_container--a39b9 .bp_select_module_triggerBtn--a39b9:not(.bp_select_module_readonly--a39b9):not(:disabled):not(:focus):not(.bp_select_module_error--a39b9):not([aria-invalid]):hover{
+  background-color:var(--select-trigger-btn-hover-bg-color);
+  border-color:var(--select-trigger-btn-hover-border-color);
 }
-.bp_select_module_container--776e4 .bp_select_module_triggerBtn--776e4 .bp_select_module_iconWrapper--776e4{
+.bp_select_module_container--a39b9 .bp_select_module_triggerBtn--a39b9 .bp_select_module_iconWrapper--a39b9{
   flex-shrink:0;
   -webkit-user-select:none;
           user-select:none;
 }
-.bp_select_module_container--776e4 .bp_select_module_triggerBtn--776e4 .bp_select_module_iconCaret--776e4{
+.bp_select_module_container--a39b9 .bp_select_module_triggerBtn--a39b9 .bp_select_module_iconCaret--a39b9{
   display:block;
-  height:var(--size-2);
-  width:var(--size-2);
+  height:var(--select-trigger-btn-caret-height);
+  width:var(--select-trigger-btn-caret-width);
 }
-.bp_select_module_container--776e4 .bp_select_module_triggerBtn--776e4 .bp_select_module_iconCaret--776e4 path{
-  fill:var(--icon-icon-on-light);
+.bp_select_module_container--a39b9 .bp_select_module_triggerBtn--a39b9 .bp_select_module_iconCaret--a39b9 path{
+  fill:var(--select-trigger-btn-caret-color);
 }
-.bp_select_module_container--776e4 .bp_select_module_triggerBtn--776e4 .bp_select_module_iconPencilCrossed--776e4{
+.bp_select_module_container--a39b9 .bp_select_module_triggerBtn--a39b9 .bp_select_module_iconPencilCrossed--a39b9{
   display:block;
-  height:var(--size-4);
-  width:var(--size-4);
+  height:var(--select-trigger-btn-pencil-height);
+  width:var(--select-trigger-btn-pencil-width);
 }
-.bp_select_module_container--776e4 .bp_select_module_triggerBtn--776e4[data-state=open] .bp_select_module_icon--776e4{
+.bp_select_module_container--a39b9 .bp_select_module_triggerBtn--a39b9[data-state=open] .bp_select_module_icon--a39b9{
   transform:rotate(180deg);
 }
 
-.bp_select_module_content--776e4{
-  background-color:var(--surface-menu-surface);
-  border:var(--border-1) solid var(--border-card-border);
-  border-radius:var(--radius-3);
+.bp_select_module_content--a39b9[data-modern=false]{
+  --select-content-bg-color:var(--surface-menu-surface);
+  --select-content-backdrop-filter:none;
+  --select-content-border:var(--border-1) solid var(--border-card-border);
+  --select-content-border-radius:var(--radius-3);
+  --select-content-viewport-padding-block:var(--space-3);
+  --select-content-viewport-padding-inline:var(--space-3);
+  --select-content-viewport-option-gap:var(--space-2);
+  --select-content-viewport-option-border:var(--border-2) solid #0000;
+  --select-content-viewport-option-border-radius:var(--space-2);
+  --select-content-viewport-option-padding-block:var(--space-2);
+  --select-content-viewport-option-padding-inline:var(--space-10) var(--space-2);
+  --select-content-viewport-option-focus-bg-color:var(--surface-menu-surface-focus);
+  --select-content-viewport-option-focus-border:var(--border-2) solid var(--outline-focus-on-light);
+  --select-content-viewport-option-active-bg-color:var(--surface-menu-surface-hover);
+  --select-content-viewport-option-active-border:var(--border-2) solid #0000;
+  --select-content-viewport-option-hover-bg-color:var(--surface-menu-surface-hover);
+  --select-content-viewport-option-secondary-text-color:var(--text-text-on-light-secondary);
+  --select-content-viewport-option-indicator-left:var(--space-2);
+  --select-content-viewport-option-indicator-height:var(--size-9);
+  --select-content-viewport-option-indicator-color:var(--icon-icon-on-light);
+  --select-content-viewport-option-separator-height:var(--border-1);
+  --select-content-viewport-option-separator-bg-color:var(--border-divider-border);
+  --select-content-viewport-option-separator-margin-block:var(--space-2);
+}
+
+.bp_select_module_content--a39b9[data-modern=true]{
+  --select-content-bg-color:var(--bp-surface-menu-surface-dropdown);
+  --select-content-backdrop-filter:blur(16px);
+  --select-content-border:var(--bp-border-01) solid var(--bp-border-card-border);
+  --select-content-border-radius:var(--bp-radius-10);
+  --select-content-viewport-padding-block:var(--bp-space-030);
+  --select-content-viewport-padding-inline:var(--bp-space-030);
+  --select-content-viewport-option-gap:var(--bp-space-020);
+  --select-content-viewport-option-border:var(--bp-border-02) solid #0000;
+  --select-content-viewport-option-border-radius:var(--bp-radius-10);
+  --select-content-viewport-option-padding-block:var(--bp-space-020);
+  --select-content-viewport-option-padding-inline:var(--bp-space-100) var(--bp-space-020);
+  --select-content-viewport-option-focus-bg-color:var(--bp-surface-menu-item-surface-hover);
+  --select-content-viewport-option-focus-border:var(--bp-border-02) solid var(--bp-outline-focus-on-light);
+  --select-content-viewport-option-active-bg-color:var(--bp-surface-menu-item-surface-hover);
+  --select-content-viewport-option-active-border:var(--bp-border-02) solid #0000;
+  --select-content-viewport-option-hover-bg-color:var(--bp-surface-menu-item-surface-hover);
+  --select-content-viewport-option-secondary-text-color:var(--bp-text-text-on-light-secondary);
+  --select-content-viewport-option-indicator-left:var(--bp-space-020);
+  --select-content-viewport-option-indicator-height:var(--bp-size-090);
+  --select-content-viewport-option-indicator-color:var(--bp-icon-icon-on-light);
+  --select-content-viewport-option-separator-height:var(--bp-border-01);
+  --select-content-viewport-option-separator-bg-color:var(--bp-border-divider-border);
+  --select-content-viewport-option-separator-margin-block:var(--bp-space-020);
+}
+
+.bp_select_module_content--a39b9{
+  backdrop-filter:var(--select-content-backdrop-filter);
+  background-color:var(--select-content-bg-color);
+  border:var(--select-content-border);
+  border-radius:var(--select-content-border-radius);
   box-shadow:var(--dropshadow-3);
   font-family:var(--body-default-font-family);
   font-size:var(--body-default-font-size);
@@ -2759,64 +2901,64 @@
   text-transform:var(--body-default-text-case);
   z-index:380;
 }
-.bp_select_module_content--776e4 .bp_select_module_viewport--776e4{
-  padding-block:var(--space-3);
-  padding-inline:var(--space-3);
+.bp_select_module_content--a39b9 .bp_select_module_viewport--a39b9{
+  padding-block:var(--select-content-viewport-padding-block);
+  padding-inline:var(--select-content-viewport-padding-inline);
 }
-.bp_select_module_content--776e4 .bp_select_module_viewport--776e4 .bp_select_module_option--776e4{
-  border:var(--border-2) solid #0000;
-  border-radius:var(--radius-3);
+.bp_select_module_content--a39b9 .bp_select_module_viewport--a39b9 .bp_select_module_option--a39b9{
+  border:var(--select-content-viewport-option-border);
+  border-radius:var(--select-content-viewport-option-border-radius);
   cursor:pointer;
   display:flex;
   flex-wrap:wrap;
-  gap:var(--space-2);
+  gap:var(--select-content-viewport-option-gap);
   justify-content:space-between;
   outline:none;
-  padding-block:var(--space-2);
-  padding-inline:var(--space-10) var(--space-2);
+  padding-block:var(--select-content-viewport-option-padding-block);
+  padding-inline:var(--select-content-viewport-option-padding-inline);
   position:relative;
   -webkit-user-select:none;
           user-select:none;
 }
-.bp_select_module_content--776e4 .bp_select_module_viewport--776e4 .bp_select_module_option--776e4[data-disabled]{
+.bp_select_module_content--a39b9 .bp_select_module_viewport--a39b9 .bp_select_module_option--a39b9[data-disabled]{
   opacity:60%;
   pointer-events:none;
 }
-.bp_select_module_content--776e4 .bp_select_module_viewport--776e4 .bp_select_module_option--776e4[data-highlighted]{
-  background-color:var(--surface-menu-surface-focus);
-  border:var(--border-2) solid var(--outline-focus-on-light);
+.bp_select_module_content--a39b9 .bp_select_module_viewport--a39b9 .bp_select_module_option--a39b9[data-highlighted]{
+  background-color:var(--select-content-viewport-option-focus-bg-color);
+  border:var(--select-content-viewport-option-focus-border);
 }
-.bp_select_module_content--776e4 .bp_select_module_viewport--776e4 .bp_select_module_option--776e4:active{
-  background-color:var(--surface-menu-surface-hover);
-  border:var(--border-2) solid #0000;
+.bp_select_module_content--a39b9 .bp_select_module_viewport--a39b9 .bp_select_module_option--a39b9:active{
+  background-color:var(--select-content-viewport-option-active-bg-color);
+  border:var(--select-content-viewport-option-active-border);
 }
-.bp_select_module_content--776e4 .bp_select_module_viewport--776e4 .bp_select_module_option--776e4:hover{
-  background-color:var(--surface-menu-surface-hover);
+.bp_select_module_content--a39b9 .bp_select_module_viewport--a39b9 .bp_select_module_option--a39b9:hover{
+  background-color:var(--select-content-viewport-option-hover-bg-color);
 }
-.bp_select_module_content--776e4 .bp_select_module_viewport--776e4 .bp_select_module_option--776e4 span:first-child{
+.bp_select_module_content--a39b9 .bp_select_module_viewport--a39b9 .bp_select_module_option--a39b9 span:first-child{
   overflow:hidden;
   overflow-wrap:break-word;
 }
-.bp_select_module_content--776e4 .bp_select_module_viewport--776e4 .bp_select_module_option--776e4 .bp_select_module_secondaryText--776e4{
-  color:var(--text-text-on-light-secondary);
+.bp_select_module_content--a39b9 .bp_select_module_viewport--a39b9 .bp_select_module_option--a39b9 .bp_select_module_secondaryText--a39b9{
+  color:var(--select-content-viewport-option-secondary-text-color);
 }
-.bp_select_module_content--776e4 .bp_select_module_viewport--776e4 .bp_select_module_option--776e4 .bp_select_module_indicator--776e4{
+.bp_select_module_content--a39b9 .bp_select_module_viewport--a39b9 .bp_select_module_option--a39b9 .bp_select_module_indicator--a39b9{
   align-items:center;
   display:flex;
-  height:var(--size-9);
+  height:var(--select-content-viewport-option-indicator-height);
   justify-content:center;
-  left:var(--space-2);
+  left:var(--select-content-viewport-option-indicator-left);
   position:absolute;
   top:0;
 }
-.bp_select_module_content--776e4 .bp_select_module_viewport--776e4 .bp_select_module_option--776e4 .bp_select_module_indicator--776e4 path{
-  fill:var(--icon-icon-on-light);
+.bp_select_module_content--a39b9 .bp_select_module_viewport--a39b9 .bp_select_module_option--a39b9 .bp_select_module_indicator--a39b9 path{
+  fill:var(--select-content-viewport-option-indicator-color);
 }
-.bp_select_module_content--776e4 .bp_select_module_viewport--776e4 .bp_select_module_separator--776e4{
-  background-color:var(--border-divider-border);
+.bp_select_module_content--a39b9 .bp_select_module_viewport--a39b9 .bp_select_module_separator--a39b9{
+  background-color:var(--select-content-bg-color-viewport-option-separator-bg-color);
   flex-shrink:0;
-  height:var(--border-1);
-  margin-block:var(--space-2);
+  height:var(--select-content-bg-color-viewport-option-separator-height);
+  margin-block:var(--select-content-bg-color-viewport-option-separator-margin-block);
 }
 
 .bp_content_card_module_card--0a584{
@@ -5977,65 +6119,144 @@ table.bp_inline_table_module_inlineTable--7cffa tr:not(:last-child) td{
 .bp_base_text_input_module_textInputContainerOuter--74c72 .bp_base_text_input_module_inlineError--74c72,.bp_base_text_input_module_textInputContainerOuter--74c72 .bp_base_text_input_module_subtext--74c72{
   margin-block-start:var(--text-input-inline-error-subtext-block-margin);
 }
-.bp_chip_module_chip--96f83{
+.bp_chip_module_chip--d54cf[data-modern=false]{
+  --chip-gap:var(--space-2);
+  --chip-height:var(--size-8);
+  --chip-radius:var(--radius-half);
+  --chip-padding-inline:0;
+  --chip-label-inline-padding:var(--space-4);
+  --chip-item-inline-padding:var(--space-2);
+  --chip-status-gap:var(--space-2);
+  --chip-status-height:var(--size-5);
+  --chip-status-padding:var(--space-2);
+  --chip-status-background-default:var(--gray-10);
+  --chip-status-radius:var(--radius-half);
+  --chip-button-background:var(--surface-chip-button-surface);
+  --chip-button-background-hover:var(--surface-chip-button-surface-hover);
+  --chip-button-status-text-color:var(--text-text-on-dark);
+  --chip-button-status-background:var(--box-blue-100);
+  --chip-button-focus-box-shadow:0 0 0 var(--border-2) var(--outline-focus-on-light);
+  --chip-button-outline-width:var(--border-2);
+  --chip-button-outline-color:var(--outline-focus-on-light);
+  --chip-single-select-background:var(--surface-filterchip-surface-single);
+  --chip-single-select-background-hover:var(--surface-filterchip-surface-single-hover);
+  --chip-single-select-background-selected:var(--surface-filterchip-surface-single-on);
+  --chip-single-select-background-selected-hover:var(--surface-filterchip-surface-single-on-hover);
+  --chip-single-select-text-color-selected:var(--text-text-on-dark);
+  --chip-single-select-status-text-color-selected:var(--text-text-on-light);
+  --chip-multi-select-background:var(--surface-filterchip-surface-multi);
+  --chip-multi-select-background-hover:var(--surface-filterchip-surface-multi-hover);
+  --chip-multi-select-background-selected:var(--surface-filterchip-surface-multi-on);
+  --chip-multi-select-background-selected-hover:var(--surface-filterchip-surface-multi-on-hover);
+  --chip-multi-select-text-color-selected:var(--text-cta-link);
+  --chip-multi-select-status-text-color-selected:var(--text-text-on-dark);
+  --chip-multi-select-status-background-selected:var(--box-blue-100);
+  --chip-multi-select-icon-color:var(--icon-icon-on-light);
+  --chip-multi-select-border-selected:var(--border-1) solid var(--border-filterchip-border-multi-on);
+  --chip-multi-select-border-color-selected:var(--border-filterchip-border-multi-on);
+  --chip-multi-select-focus-border-selected:var(--border-1) solid var(--gray-white);
+}
+
+.bp_chip_module_chip--d54cf[data-modern=true]{
+  --chip-gap:var(--bp-space-020);
+  --chip-height:var(--bp-size-080);
+  --chip-radius:var(--bp-radius-16);
+  --chip-padding-inline:var(--bp-space-000);
+  --chip-label-inline-padding:var(--bp-space-040);
+  --chip-item-inline-padding:var(--bp-space-020);
+  --chip-status-gap:var(--bp-space-020);
+  --chip-status-height:var(--bp-size-050);
+  --chip-status-padding:var(--bp-space-020);
+  --chip-status-background-default:var(--bp-surface-status-surface-gray);
+  --chip-status-radius:var(--bp-radius-16);
+  --chip-button-background:var(--bp-surface-chip-button-surface);
+  --chip-button-background-hover:var(--bp-surface-chip-button-surface-hover);
+  --chip-button-status-text-color:var(--bp-text-text-on-dark);
+  --chip-button-status-background:var(--bp-surface-status-surface-boxblue);
+  --chip-button-focus-box-shadow:0 0 0 var(--bp-border-02) var(--bp-outline-focus-on-light);
+  --chip-button-outline-width:var(--bp-border-02);
+  --chip-button-outline-color:var(--bp-outline-focus-on-light);
+  --chip-single-select-background:var(--bp-surface-filter-chip-surface-single);
+  --chip-single-select-background-hover:var( --bp-surface-filter-chip-surface-single-hover);
+  --chip-single-select-background-selected:var(--bp-surface-filter-chip-surface-single-on);
+  --chip-single-select-background-selected-hover:var(--bp-surface-filter-chip-surface-single-on-hover);
+  --chip-single-select-text-color-selected:var(--bp-text-text-on-dark);
+  --chip-single-select-status-text-color-selected:var(--bp-text-text-on-light);
+  --chip-multi-select-background:var(--bp-surface-filter-chip-surface-multi);
+  --chip-multi-select-background-hover:var(--bp-surface-filter-chip-surface-multi-hover);
+  --chip-multi-select-background-selected:var(--bp-surface-filter-chip-surface-multi-on);
+  --chip-multi-select-background-selected-hover:var(--bp-surface-filter-chip-surface-multi-on-hover);
+  --chip-multi-select-text-color-selected:var(--bp-text-cta-link);
+  --chip-multi-select-status-text-color-selected:var(--bp-text-text-on-dark);
+  --chip-multi-select-status-background-selected:var(--bp-surface-status-surface-boxblue);
+  --chip-multi-select-icon-color:var(--bp-icon-icon-on-light);
+  --chip-multi-select-border-selected:var(--bp-border-01) solid var(--bp-border-filter-chip-border-multi-on);
+  --chip-multi-select-border-color-selected:var(--bp-border-filter-chip-border-multi-on);
+  --chip-multi-select-focus-border-selected:var(--bp-border-01) solid var(--bp-gray-white);
+}
+
+.bp_chip_module_chip--d54cf{
   align-items:center;
   border:none;
-  border-radius:var(--radius-half);
+  border-radius:var(--chip-radius);
   cursor:pointer;
   display:flex;
   font-family:var(--body-default-bold-font-family);
   font-size:var(--body-default-bold-font-size);
   font-weight:var(--body-default-bold-font-weight);
-  gap:var(--space-2);
-  height:var(--size-8);
+  gap:var(--chip-gap);
+  height:var(--chip-height);
   letter-spacing:var(--body-default-bold-letter-spacing);
   line-height:var(--body-default-bold-line-height);
-  padding-inline:0;
+  padding-inline:var(--chip-padding-inline);
   -webkit-text-decoration:var(--body-default-bold-text-decoration);
           text-decoration:var(--body-default-bold-text-decoration);
   text-transform:var(--body-default-bold-text-case);
 }
-.bp_chip_module_chip--96f83 .bp_chip_module_labelText--96f83:first-child{
-  margin-inline-start:var(--space-4);
+.bp_chip_module_chip--d54cf .bp_chip_module_labelText--d54cf:first-child{
+  margin-inline-start:var(--chip-label-inline-padding);
 }
-.bp_chip_module_chip--96f83 .bp_chip_module_labelText--96f83:last-child{
-  margin-inline-end:var(--space-4);
+.bp_chip_module_chip--d54cf .bp_chip_module_labelText--d54cf:last-child{
+  margin-inline-end:var(--chip-label-inline-padding);
 }
-.bp_chip_module_chip--96f83 .bp_chip_module_chipStatus--96f83:first-child,.bp_chip_module_chip--96f83 svg:first-child{
-  margin-inline-start:var(--space-2);
+.bp_chip_module_chip--d54cf .bp_chip_module_chipStatus--d54cf:first-child,.bp_chip_module_chip--d54cf svg:first-child{
+  margin-inline-start:var(--chip-item-inline-padding);
 }
-.bp_chip_module_chip--96f83 .bp_chip_module_chipStatus--96f83:last-child,.bp_chip_module_chip--96f83 svg:last-child{
-  margin-inline-end:var(--space-2);
+.bp_chip_module_chip--d54cf .bp_chip_module_chipStatus--d54cf:last-child,.bp_chip_module_chip--d54cf svg:last-child{
+  margin-inline-end:var(--chip-item-inline-padding);
 }
-.bp_chip_module_chip--96f83:disabled{
+.bp_chip_module_chip--d54cf:disabled{
   cursor:default;
   pointer-events:none;
 }
-.bp_chip_module_chip--96f83 .bp_chip_module_chipStatus--96f83{
+.bp_chip_module_chip--d54cf:disabled svg{
+  opacity:.4;
+}
+.bp_chip_module_chip--d54cf .bp_chip_module_chipStatus--d54cf{
   align-items:center;
-  background-color:var(--gray-10);
-  border-radius:var(--radius-half);
+  background-color:var(--chip-status-background-default);
+  border-radius:var(--chip-status-radius);
   box-sizing:border-box;
   display:flex;
   flex-grow:0;
   font-family:var(--label-bold-font-family);
   font-size:var(--label-bold-font-size);
   font-weight:var(--label-bold-font-weight);
-  gap:var(--space-2);
-  height:var(--size-5);
+  gap:var(--chip-status-gap);
+  height:var(--chip-status-height);
   justify-content:center;
   letter-spacing:var(--label-bold-letter-spacing);
   line-height:var(--label-bold-line-height);
-  padding:var(--space-2);
+  padding:var(--chip-status-padding);
   -webkit-text-decoration:var(--label-bold-text-decoration);
           text-decoration:var(--label-bold-text-decoration);
   text-transform:var(--label-bold-text-case);
 }
-.bp_chip_module_chip--96f83 .bp_chip_module_labelText--96f83{
+.bp_chip_module_chip--d54cf .bp_chip_module_labelText--d54cf{
   white-space:nowrap;
 }
-.bp_chip_module_chip--96f83.bp_chip_module_chipButton--96f83{
-  background-color:var(--surface-chip-button-surface);
+.bp_chip_module_chip--d54cf.bp_chip_module_chipButton--d54cf{
+  background-color:var(--chip-button-background);
   font-family:var(--body-default-font-family);
   font-size:var(--body-default-font-size);
   font-weight:var(--body-default-font-weight);
@@ -6045,52 +6266,51 @@ table.bp_inline_table_module_inlineTable--7cffa tr:not(:last-child) td{
           text-decoration:var(--body-default-text-decoration);
   text-transform:var(--body-default-text-case);
 }
-.bp_chip_module_chip--96f83.bp_chip_module_chipButton--96f83:focus-visible{
-  box-shadow:0 0 0 var(--border-2) var(--outline-focus-on-light);
+.bp_chip_module_chip--d54cf.bp_chip_module_chipButton--d54cf:focus-visible{
+  box-shadow:0 0 0 var(--chip-button-outline-width) var(--chip-button-outline-width);
   outline:none;
   overflow:visible;
 }
-.bp_chip_module_chip--96f83.bp_chip_module_chipButton--96f83 .bp_chip_module_chipStatus--96f83{
-  background-color:var(--box-blue-100);
-  color:var(--text-text-on-dark);
+.bp_chip_module_chip--d54cf.bp_chip_module_chipButton--d54cf .bp_chip_module_chipStatus--d54cf{
+  background-color:var(--chip-button-status-background);
+  color:var(--chip-button-status-text-color);
 }
-.bp_chip_module_chip--96f83.bp_chip_module_chipButton--96f83:focus-visible,.bp_chip_module_chip--96f83.bp_chip_module_chipButton--96f83[data-active-item]{
-  box-shadow:0 0 0 var(--border-2) var(--outline-focus-on-light);
+.bp_chip_module_chip--d54cf.bp_chip_module_chipButton--d54cf:focus-visible,.bp_chip_module_chip--d54cf.bp_chip_module_chipButton--d54cf[data-active-item]{
+  box-shadow:var(--chip-button-focus-box-shadow);
   outline:none;
 }
-.bp_chip_module_chip--96f83.bp_chip_module_chipButton--96f83:disabled{
+.bp_chip_module_chip--d54cf.bp_chip_module_chipButton--d54cf:disabled{
   pointer-events:none;
 }
-.bp_chip_module_chip--96f83.bp_chip_module_chipButton--96f83:disabled .bp_chip_module_chipStatus--96f83{
+.bp_chip_module_chip--d54cf.bp_chip_module_chipButton--d54cf:disabled .bp_chip_module_chipStatus--d54cf,.bp_chip_module_chip--d54cf.bp_chip_module_chipButton--d54cf:disabled svg{
   opacity:.4;
 }
-.bp_chip_module_chip--96f83.bp_chip_module_chipButton--96f83:hover:enabled{
-  background-color:var(--surface-chip-button-surface-hover);
+.bp_chip_module_chip--d54cf.bp_chip_module_chipButton--d54cf:hover:enabled{
+  background-color:var(--chip-button-background-hover);
 }
-.bp_chip_module_chip--96f83.bp_chip_module_singleSelectChip--96f83{
-  background-color:var(--surface-filterchip-surface-single);
+.bp_chip_module_chip--d54cf.bp_chip_module_singleSelectChip--d54cf{
+  background-color:var(--chip-single-select-background);
 }
-.bp_chip_module_chip--96f83.bp_chip_module_singleSelectChip--96f83[data-state=on]{
-  background-color:var(--surface-filterchip-surface-single-on);
-  color:var(--text-text-on-dark);
+.bp_chip_module_chip--d54cf.bp_chip_module_singleSelectChip--d54cf[data-state=on]{
+  background-color:var(--chip-single-select-background-selected);
+  color:var(--chip-single-select-text-color-selected);
 }
-.bp_chip_module_chip--96f83.bp_chip_module_singleSelectChip--96f83[data-state=on]:hover{
-  background-color:var(--surface-filterchip-surface-single-on-hover);
+.bp_chip_module_chip--d54cf.bp_chip_module_singleSelectChip--d54cf[data-state=on]:hover{
+  background-color:var(--chip-single-select-background-selected-hover);
 }
-.bp_chip_module_chip--96f83.bp_chip_module_singleSelectChip--96f83[data-state=on] .bp_chip_module_chipStatus--96f83{
-  color:var(--text-text-on-light);
+.bp_chip_module_chip--d54cf.bp_chip_module_singleSelectChip--d54cf[data-state=on] .bp_chip_module_chipStatus--d54cf{
+  color:var(--chip-single-select-status-text-color-selected);
 }
-.bp_chip_module_chip--96f83.bp_chip_module_singleSelectChip--96f83:focus-visible,.bp_chip_module_chip--96f83.bp_chip_module_singleSelectChip--96f83[data-active-item]{
+.bp_chip_module_chip--d54cf.bp_chip_module_singleSelectChip--d54cf:focus-visible,.bp_chip_module_chip--d54cf.bp_chip_module_singleSelectChip--d54cf[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--96f83.bp_chip_module_singleSelectChip--96f83:hover:not([data-state=on]){
-  background-color:var(--surface-filterchip-surface-single-hover);
+.bp_chip_module_chip--d54cf.bp_chip_module_singleSelectChip--d54cf:hover:not([data-state=on]){
+  background-color:var(--chip-single-select-background-hover);
 }
-.bp_chip_module_chip--96f83.bp_chip_module_multiSelectChip--96f83{
-  background-color:var(--surface-filterchip-surface-multi);
-  border:var(--border-1) solid var(--surface-filterchip-surface-multi);
+.bp_chip_module_chip--d54cf.bp_chip_module_multiSelectChip--d54cf{
+  background-color:var(--chip-multi-select-background);
   font-family:var(--body-default-font-family);
   font-size:var(--body-default-font-size);
   font-weight:var(--body-default-font-weight);
@@ -6100,13 +6320,13 @@ table.bp_inline_table_module_inlineTable--7cffa tr:not(:last-child) td{
           text-decoration:var(--body-default-text-decoration);
   text-transform:var(--body-default-text-case);
 }
-.bp_chip_module_chip--96f83.bp_chip_module_multiSelectChip--96f83 path{
-  fill:var(--icon-icon-on-light);
+.bp_chip_module_chip--d54cf.bp_chip_module_multiSelectChip--d54cf path{
+  fill:var(--chip-multi-select-icon-color);
 }
-.bp_chip_module_chip--96f83.bp_chip_module_multiSelectChip--96f83[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);
+.bp_chip_module_chip--d54cf.bp_chip_module_multiSelectChip--d54cf[data-state=on]{
+  background-color:var(--chip-multi-select-background-selected);
+  border:var(--chip-multi-select-border-selected);
+  color:var(--chip-multi-select-text-color-selected);
   font-family:var(--body-default-bold-font-family);
   font-size:var(--body-default-bold-font-size);
   font-weight:var(--body-default-bold-font-weight);
@@ -6116,32 +6336,31 @@ table.bp_inline_table_module_inlineTable--7cffa tr:not(:last-child) td{
           text-decoration:var(--body-default-bold-text-decoration);
   text-transform:var(--body-default-bold-text-case);
 }
-.bp_chip_module_chip--96f83.bp_chip_module_multiSelectChip--96f83[data-state=on] path{
-  fill:var(--text-cta-link);
+.bp_chip_module_chip--d54cf.bp_chip_module_multiSelectChip--d54cf[data-state=on] path{
+  fill:var(--chip-multi-select-text-color-selected);
 }
-.bp_chip_module_chip--96f83.bp_chip_module_multiSelectChip--96f83[data-state=on]:hover{
-  background-color:var(--surface-filterchip-surface-multi-on-hover);
+.bp_chip_module_chip--d54cf.bp_chip_module_multiSelectChip--d54cf[data-state=on]:hover{
+  background-color:var(--chip-multi-select-background-selected-hover);
 }
-.bp_chip_module_chip--96f83.bp_chip_module_multiSelectChip--96f83[data-state=on]:focus-visible,.bp_chip_module_chip--96f83.bp_chip_module_multiSelectChip--96f83[data-state=on][data-active-item]{
-  border:var(--border-1) solid var(--gray-white);
+.bp_chip_module_chip--d54cf.bp_chip_module_multiSelectChip--d54cf[data-state=on]:focus-visible,.bp_chip_module_chip--d54cf.bp_chip_module_multiSelectChip--d54cf[data-state=on][data-active-item]{
+  border:var(--chip-multi-select-focus-border-selected);
   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:var(--border-1) solid var(--chip-multi-select-border-color-selected);
   outline-offset:calc(var(--border-2)*-1);
 }
-.bp_chip_module_chip--96f83.bp_chip_module_multiSelectChip--96f83[data-state=on] .bp_chip_module_chipStatus--96f83{
-  background-color:var(--box-blue-100);
-  color:var(--text-text-on-dark);
+.bp_chip_module_chip--d54cf.bp_chip_module_multiSelectChip--d54cf[data-state=on] .bp_chip_module_chipStatus--d54cf{
+  background-color:var(--chip-multi-select-status-background-selected);
+  color:var(--chip-multi-select-status-text-color-selected);
 }
-.bp_chip_module_chip--96f83.bp_chip_module_multiSelectChip--96f83:focus-visible:not([data-state=on]),.bp_chip_module_chip--96f83.bp_chip_module_multiSelectChip--96f83[data-active-item]:not([data-state=on]){
+.bp_chip_module_chip--d54cf.bp_chip_module_multiSelectChip--d54cf:focus-visible:not([data-state=on]),.bp_chip_module_chip--d54cf.bp_chip_module_multiSelectChip--d54cf[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--96f83.bp_chip_module_multiSelectChip--96f83: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--d54cf.bp_chip_module_multiSelectChip--d54cf:hover:not([data-state=on]){
+  background-color:var(--chip-multi-select-background-hover);
 }
-.bp_chip_module_chip--96f83.bp_chip_module_multiSelectChip--96f83 span::before{
+.bp_chip_module_chip--d54cf.bp_chip_module_multiSelectChip--d54cf span::before{
   content:attr(data-text);
   display:block;
   font-family:var(--body-default-bold-font-family);
@@ -6157,20 +6376,30 @@ table.bp_inline_table_module_inlineTable--7cffa tr:not(:last-child) td{
   visibility:hidden;
 }
 
-.bp_chip_module_chipsGroup--96f83{
+.bp_chip_module_chipsGroup--d54cf[data-modern=false]{
+  --chips-group-gap:var(--space-2);
+  --chips-group-small-screen-padding:var(--space-5);
+}
+
+.bp_chip_module_chipsGroup--d54cf[data-modern=true]{
+  --chips-group-gap:var(--bp-space-020);
+  --chips-group-small-screen-padding:var(--bp-space-050);
+}
+
+.bp_chip_module_chipsGroup--d54cf{
   display:flex;
   flex-wrap:wrap;
-  gap:var(--space-2);
+  gap:var(--chips-group-gap);
 }
 @media (max-width: 767px){
-  .bp_chip_module_chipsGroup--96f83{
+  .bp_chip_module_chipsGroup--d54cf{
     -ms-overflow-style:none;
     flex-wrap:nowrap;
     overflow-x:scroll;
-    padding:var(--space-05);
+    padding:var(--chips-group-small-screen-padding);
     scrollbar-width:none;
   }
-  .bp_chip_module_chipsGroup--96f83::-webkit-scrollbar{
+  .bp_chip_module_chipsGroup--d54cf::-webkit-scrollbar{
     display:none;
   }
 }

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

@@ -1,5 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { clsx } from 'clsx';
+import 'react';
+import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 import styles from './loading-indicator.module.js';
 
 function LoadingIndicator(props) {
@@ -11,11 +13,15 @@ function LoadingIndicator(props) {
     className = '',
     ...rest
   } = props;
+  const {
+    enableModernizedComponents
+  } = useBlueprintModernization();
   return jsxs("div", {
     ...rest,
     "aria-label": ariaLabel,
     "aria-live": ariaLive,
     className: clsx(styles.crawler, styles[variant], styles[size], className),
+    "data-modern": enableModernizedComponents,
     role: "status",
     children: [jsx("div", {
       className: styles.segment

package/dist/lib-esm/loading-indicator/loading-indicator.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"crawler":"bp_loading_indicator_module_crawler--03792","segment":"bp_loading_indicator_module_segment--03792","small":"bp_loading_indicator_module_small--03792","large":"bp_loading_indicator_module_large--03792","x-large":"bp_loading_indicator_module_x-large--03792","default":"bp_loading_indicator_module_default--03792","segment-transform":"bp_loading_indicator_module_segment-transform--03792","segment-default":"bp_loading_indicator_module_segment-default--03792","dark":"bp_loading_indicator_module_dark--03792","segment-dark":"bp_loading_indicator_module_segment-dark--03792","light":"bp_loading_indicator_module_light--03792","segment-light":"bp_loading_indicator_module_segment-light--03792"};
+var styles = {"crawler":"bp_loading_indicator_module_crawler--47d03","segment":"bp_loading_indicator_module_segment--47d03","small":"bp_loading_indicator_module_small--47d03","large":"bp_loading_indicator_module_large--47d03","x-large":"bp_loading_indicator_module_x-large--47d03","default":"bp_loading_indicator_module_default--47d03","segment-transform":"bp_loading_indicator_module_segment-transform--47d03","segment-default":"bp_loading_indicator_module_segment-default--47d03","dark":"bp_loading_indicator_module_dark--47d03","segment-dark":"bp_loading_indicator_module_segment-dark--47d03","light":"bp_loading_indicator_module_light--47d03","segment-light":"bp_loading_indicator_module_segment-light--47d03"};
 
 export { styles as default };

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

@@ -2,6 +2,7 @@ import { jsx } from 'react/jsx-runtime';
 import * as ToggleGroup from '@radix-ui/react-toggle-group';
 import clsx from 'clsx';
 import { forwardRef } from 'react';
+import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
 import styles from './chip.module.js';
 
 const Chip = /*#__PURE__*/forwardRef((props, forwardedRef) => {
@@ -10,10 +11,14 @@ const Chip = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     children,
     ...rest
   } = props;
+  const {
+    enableModernizedComponents
+  } = useBlueprintModernization();
   return jsx(ToggleGroup.Item, {
     ...rest,
     ref: forwardedRef,
     className: clsx(styles.chip, className),
+    "data-modern": enableModernizedComponents,
     children: children
   });
 });

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

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

package/dist/lib-esm/primitives/chips/chips-group.js

@@ -2,6 +2,7 @@ import { jsx } from 'react/jsx-runtime';
 import * as ToggleGroup from '@radix-ui/react-toggle-group';
 import clsx from 'clsx';
 import { forwardRef } from 'react';
+import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
 import styles from './chip.module.js';
 
 /** Provides a container for Chips, this component handles keyboard navigation and chips selection state  */
@@ -11,10 +12,14 @@ const ChipsGroup = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     children,
     ...rest
   } = props;
+  const {
+    enableModernizedComponents
+  } = useBlueprintModernization();
   return jsx(ToggleGroup.Root, {
     ...rest,
     ref: forwardedRef,
     className: clsx([styles.chipsGroup, className]),
+    "data-modern": enableModernizedComponents,
     children: children
   });
 });

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

@@ -1,9 +1,12 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { PencilCrossed, Caret, Checkmark } from '@box/blueprint-web-assets/icons/Fill';
+import { CheckmarkCircle } from '@box/blueprint-web-assets/icons/Medium';
+import { Size5 } from '@box/blueprint-web-assets/tokens/px-tokens';
 import * as ScrollArea from '@radix-ui/react-scroll-area';
 import * as SelectPrimitive from '@radix-ui/react-select';
 import clsx from 'clsx';
 import { forwardRef, useCallback } from 'react';
+import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 import { InlineError } from '../primitives/inline-error/inline-error.js';
 import { Text } from '../text/text.js';
 import { useLabelable } from '../util-components/labelable/useLabelable.js';
@@ -66,10 +69,14 @@ const Root = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   }) : jsx(Caret, {
     className: styles.iconCaret
   });
+  const {
+    enableModernizedComponents
+  } = useBlueprintModernization();
   return jsxs("div", {
     className: clsx(styles.container, {
       [styles.disabled]: disabled
     }, className),
+    "data-modern": enableModernizedComponents,
     children: [jsx(Label, {
       className: styles.label,
       hideLabel: hideLabel
@@ -114,12 +121,16 @@ const Content = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     container,
     ...contentProps
   } = props;
+  const {
+    enableModernizedComponents
+  } = useBlueprintModernization();
   return jsx(SelectPrimitive.Portal, {
     container: container,
     children: jsx(SelectPrimitive.Content, {
       ...contentProps,
       ref: forwardedRef,
       className: clsx(styles.content, className),
+      "data-modern": enableModernizedComponents,
       position: "popper",
       sideOffset: 8,
       children: jsx(ScrollArea.Root, {
@@ -144,6 +155,9 @@ const Option = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   } = props;
   const onPointerLeave = useCallback(event => event.preventDefault(), []);
   const onPointerMove = useCallback(event => event.preventDefault(), []);
+  const {
+    enableModernizedComponents
+  } = useBlueprintModernization();
   return jsxs(SelectPrimitive.Item, {
     ...itemProps,
     ref: forwardedRef,
@@ -157,7 +171,10 @@ const Option = /*#__PURE__*/forwardRef((props, forwardedRef) => {
       children: secondaryText
     }), !itemProps.disabled && jsx(SelectPrimitive.ItemIndicator, {
       className: styles.indicator,
-      children: jsx(Checkmark, {})
+      children: enableModernizedComponents ? jsx(CheckmarkCircle, {
+        height: Size5,
+        width: Size5
+      }) : jsx(Checkmark, {})
     })]
   });
 });

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

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"container":"bp_select_module_container--776e4","disabled":"bp_select_module_disabled--776e4","label":"bp_select_module_label--776e4","triggerBtn":"bp_select_module_triggerBtn--776e4","readonly":"bp_select_module_readonly--776e4","error":"bp_select_module_error--776e4","iconWrapper":"bp_select_module_iconWrapper--776e4","iconCaret":"bp_select_module_iconCaret--776e4","iconPencilCrossed":"bp_select_module_iconPencilCrossed--776e4","icon":"bp_select_module_icon--776e4","content":"bp_select_module_content--776e4","viewport":"bp_select_module_viewport--776e4","option":"bp_select_module_option--776e4","secondaryText":"bp_select_module_secondaryText--776e4","indicator":"bp_select_module_indicator--776e4","separator":"bp_select_module_separator--776e4"};
+var styles = {"container":"bp_select_module_container--a39b9","disabled":"bp_select_module_disabled--a39b9","label":"bp_select_module_label--a39b9","triggerBtn":"bp_select_module_triggerBtn--a39b9","readonly":"bp_select_module_readonly--a39b9","error":"bp_select_module_error--a39b9","iconWrapper":"bp_select_module_iconWrapper--a39b9","iconCaret":"bp_select_module_iconCaret--a39b9","iconPencilCrossed":"bp_select_module_iconPencilCrossed--a39b9","icon":"bp_select_module_icon--a39b9","content":"bp_select_module_content--a39b9","viewport":"bp_select_module_viewport--a39b9","option":"bp_select_module_option--a39b9","secondaryText":"bp_select_module_secondaryText--a39b9","indicator":"bp_select_module_indicator--a39b9","separator":"bp_select_module_separator--a39b9"};
 
 export { styles as default };

package/package.json

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