@box/blueprint-web 12.47.0 → 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]{
@@ -6090,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);
@@ -6158,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);
@@ -6213,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);
@@ -6229,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);
@@ -6270,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/package.json

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