@box/blueprint-web 12.47.0 → 12.48.1

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

@@ -2,6 +2,8 @@ import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { SelectItemCheck, SelectItem, ComboboxItem, useComboboxStore, useSelectStore, PopoverAnchor, Combobox as Combobox$1, ComboboxCancel, SelectList, ComboboxPopover } from '@ariakit/react';
 import { SelectRenderer } from '@ariakit/react-core/select/select-renderer';
 import { Checkmark, XMark } from '@box/blueprint-web-assets/icons/Fill';
+import { CheckmarkCircle } from '@box/blueprint-web-assets/icons/Medium';
+import { bpSize050 } from '@box/blueprint-web-assets/tokens/tokens';
 import clsx from 'clsx';
 import React__default, { forwardRef, useMemo, useRef, useCallback, useEffect } from 'react';
 import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
@@ -449,6 +451,9 @@ const RootInner = ({
 };
 const Root = /*#__PURE__*/forwardRef(RootInner);
 const Indicator = /*#__PURE__*/forwardRef((_, ref) => {
+  const {
+    enableModernizedComponents
+  } = useBlueprintModernization();
   return jsx(SelectItemCheck, {
     ref: ref,
     className: styles.indicator,
@@ -457,7 +462,11 @@ const Indicator = /*#__PURE__*/forwardRef((_, ref) => {
       width: 'none',
       height: 'none'
     },
-    children: jsx(Checkmark, {
+    children: enableModernizedComponents ? jsx(CheckmarkCircle, {
+      className: styles.indicatorIcon,
+      height: bpSize050,
+      width: bpSize050
+    }) : jsx(Checkmark, {
       className: styles.indicatorIcon
     })
   });

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

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"container":"bp_combobox_module_container--1857e","popover":"bp_combobox_module_popover--1857e","disabled":"bp_combobox_module_disabled--1857e","label":"bp_combobox_module_label--1857e","hiddenLabel":"bp_combobox_module_hiddenLabel--1857e","comboboxContainer":"bp_combobox_module_comboboxContainer--1857e","withComboboxButtons":"bp_combobox_module_withComboboxButtons--1857e","error":"bp_combobox_module_error--1857e","textInputWrapper":"bp_combobox_module_textInputWrapper--1857e","textInput":"bp_combobox_module_textInput--1857e","errorIcon":"bp_combobox_module_errorIcon--1857e","comboboxButtons":"bp_combobox_module_comboboxButtons--1857e","withChips":"bp_combobox_module_withChips--1857e","inlineError":"bp_combobox_module_inlineError--1857e","option":"bp_combobox_module_option--1857e","indicator":"bp_combobox_module_indicator--1857e","indicatorIcon":"bp_combobox_module_indicatorIcon--1857e","optionWithIndicator":"bp_combobox_module_optionWithIndicator--1857e","loadingIndicator":"bp_combobox_module_loadingIndicator--1857e","noResultOption":"bp_combobox_module_noResultOption--1857e"};
+var styles = {"container":"bp_combobox_module_container--2cc49","popover":"bp_combobox_module_popover--2cc49","disabled":"bp_combobox_module_disabled--2cc49","label":"bp_combobox_module_label--2cc49","hiddenLabel":"bp_combobox_module_hiddenLabel--2cc49","comboboxContainer":"bp_combobox_module_comboboxContainer--2cc49","withComboboxButtons":"bp_combobox_module_withComboboxButtons--2cc49","error":"bp_combobox_module_error--2cc49","textInputWrapper":"bp_combobox_module_textInputWrapper--2cc49","textInput":"bp_combobox_module_textInput--2cc49","errorIcon":"bp_combobox_module_errorIcon--2cc49","comboboxButtons":"bp_combobox_module_comboboxButtons--2cc49","withChips":"bp_combobox_module_withChips--2cc49","inlineError":"bp_combobox_module_inlineError--2cc49","option":"bp_combobox_module_option--2cc49","indicator":"bp_combobox_module_indicator--2cc49","indicatorIcon":"bp_combobox_module_indicatorIcon--2cc49","optionWithIndicator":"bp_combobox_module_optionWithIndicator--2cc49","loadingIndicator":"bp_combobox_module_loadingIndicator--2cc49","noResultOption":"bp_combobox_module_noResultOption--2cc49"};
 
 export { styles as default };

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]{
@@ -2184,7 +2213,7 @@
   margin-block-start:var(--text-area-container-row-gap);
 }
 
-.bp_combobox_module_container--1857e[data-modern=false]{
+.bp_combobox_module_container--2cc49[data-modern=false]{
   --max-lines:3;
   --input-height:var(--space-5);
   --chip-height:var(--space-7);
@@ -2239,7 +2268,7 @@
   --combobox-button-spacing:var(--space-2);
 }
 
-.bp_combobox_module_container--1857e[data-modern=true]{
+.bp_combobox_module_container--2cc49[data-modern=true]{
   --max-lines:3;
   --bp-innershadow-01:var(--innershadow-1);
   --bp-input-height:var(--bp-space-050);
@@ -2300,7 +2329,7 @@
   --combobox-button-spacing:var(--bp-space-020);
 }
 
-.bp_combobox_module_popover--1857e[data-modern=false]{
+.bp_combobox_module_popover--2cc49[data-modern=false]{
   --option-height:2.25rem;
   --dropdown-max-height:12.5rem;
   --combobox-popover-max-height:min(
@@ -2330,9 +2359,10 @@
   --combobox-option-with-indicator-padding-inline:var(--space-10) var(--space-2);
   --combobox-loading-indicator-position:unset;
   --combobox-no-result-option-color:var(--text-text-on-light);
+  --combobox-popover-backdrop-filter:;
 }
 
-.bp_combobox_module_popover--1857e[data-modern=true]{
+.bp_combobox_module_popover--2cc49[data-modern=true]{
   --option-height:2.25rem;
   --dropdown-max-height:12.5rem;
   --bp-dropshadow-03:var(--dropshadow-3);
@@ -2340,7 +2370,7 @@
           var(--popover-available-height, var(--option-height)),
           var(--dropdown-max-height)
       );
-  --combobox-popover-background-color:var(--bp-surface-menu-surface);
+  --combobox-popover-background-color:var(--bp-surface-menu-surface-dropdown);
   --combobox-popover-border:var(--bp-border-01) solid var(--bp-border-menu-border);
   --combobox-popover-border-radius:var(--bp-radius-10);
   --combobox-popover-padding-block:var(--bp-space-030);
@@ -2363,9 +2393,10 @@
   --combobox-option-with-indicator-padding-inline:var(--bp-space-100) var(--bp-space-020);
   --combobox-loading-indicator-position:unset;
   --combobox-no-result-option-color:var(--bp-text-text-on-light);
+  --combobox-popover-backdrop-filter:blur(16px);
 }
 
-.bp_combobox_module_container--1857e{
+.bp_combobox_module_container--2cc49{
   display:flex;
   flex-direction:column;
   font-family:var(--body-default-font-family);
@@ -2377,10 +2408,10 @@
           text-decoration:var(--body-default-text-decoration);
   text-transform:var(--body-default-text-case);
 }
-.bp_combobox_module_container--1857e.bp_combobox_module_disabled--1857e{
+.bp_combobox_module_container--2cc49.bp_combobox_module_disabled--2cc49{
   opacity:60%;
 }
-.bp_combobox_module_container--1857e .bp_combobox_module_label--1857e{
+.bp_combobox_module_container--2cc49 .bp_combobox_module_label--2cc49{
   color:var(--combobox-label-color);
   flex:0 0 fit-content;
   font-family:var(--body-default-bold-font-family);
@@ -2393,10 +2424,10 @@
           text-decoration:var(--body-default-bold-text-decoration);
   text-transform:var(--body-default-bold-text-case);
 }
-.bp_combobox_module_container--1857e .bp_combobox_module_label--1857e:not(.bp_combobox_module_hiddenLabel--1857e){
+.bp_combobox_module_container--2cc49 .bp_combobox_module_label--2cc49:not(.bp_combobox_module_hiddenLabel--2cc49){
   margin-block-end:var(--combobox-label-margin-block-end);
 }
-.bp_combobox_module_container--1857e .bp_combobox_module_comboboxContainer--1857e{
+.bp_combobox_module_container--2cc49 .bp_combobox_module_comboboxContainer--2cc49{
   background-color:var(--combobox-container-background-color);
   border-bottom:var(--combobox-container-border-bottom-width) solid var(--combobox-container-border-color);
   border-left:var(--combobox-container-border-left-width) solid var(--combobox-container-border-color);
@@ -2413,15 +2444,15 @@
   padding-inline:var(--combobox-container-padding-inline);
   position:relative;
 }
-.bp_combobox_module_container--1857e .bp_combobox_module_comboboxContainer--1857e.bp_combobox_module_withComboboxButtons--1857e{
+.bp_combobox_module_container--2cc49 .bp_combobox_module_comboboxContainer--2cc49.bp_combobox_module_withComboboxButtons--2cc49{
   padding-inline-end:var(--combobox-container-padding-inline-end-with-buttons);
 }
-.bp_combobox_module_container--1857e .bp_combobox_module_comboboxContainer--1857e:not(:disabled):has(input:focus){
+.bp_combobox_module_container--2cc49 .bp_combobox_module_comboboxContainer--2cc49:not(:disabled):has(input:focus){
   background-color:var(--combobox-container-focus-background-color);
   border:var(--combobox-container-focus-border);
   padding-block:var(--combobox-container-focus-padding-block);
 }
-.bp_combobox_module_container--1857e .bp_combobox_module_comboboxContainer--1857e:not(:disabled).bp_combobox_module_error--1857e,.bp_combobox_module_container--1857e .bp_combobox_module_comboboxContainer--1857e:not(:disabled):has([aria-invalid=true]){
+.bp_combobox_module_container--2cc49 .bp_combobox_module_comboboxContainer--2cc49:not(:disabled).bp_combobox_module_error--2cc49,.bp_combobox_module_container--2cc49 .bp_combobox_module_comboboxContainer--2cc49:not(:disabled):has([aria-invalid=true]){
   background-color:var(--combobox-container-error-background-color);
   border-bottom:var(--combobox-container-error-border-bottom-width) solid var(--combobox-container-error-border-color);
   border-left:var(--combobox-container-error-border-left-width) solid var(--combobox-container-error-border-color);
@@ -2429,13 +2460,13 @@
   border-top:var(--combobox-container-error-border-top-width) solid var(--combobox-container-error-border-color);
   padding-block:var(--combobox-container-error-padding-block);
 }
-.bp_combobox_module_container--1857e .bp_combobox_module_comboboxContainer--1857e .bp_combobox_module_textInputWrapper--1857e{
+.bp_combobox_module_container--2cc49 .bp_combobox_module_comboboxContainer--2cc49 .bp_combobox_module_textInputWrapper--2cc49{
   align-items:center;
   display:flex;
   flex:content;
   gap:var(--combobox-text-input-wrapper-gap);
 }
-.bp_combobox_module_container--1857e .bp_combobox_module_comboboxContainer--1857e .bp_combobox_module_textInputWrapper--1857e .bp_combobox_module_textInput--1857e{
+.bp_combobox_module_container--2cc49 .bp_combobox_module_comboboxContainer--2cc49 .bp_combobox_module_textInputWrapper--2cc49 .bp_combobox_module_textInput--2cc49{
   background-color:var(--combobox-text-input-background-color);
   border:none;
   color:var(--combobox-text-input-color);
@@ -2452,31 +2483,32 @@
   text-transform:var(--body-default-text-case);
   width:100%;
 }
-.bp_combobox_module_container--1857e .bp_combobox_module_comboboxContainer--1857e .bp_combobox_module_textInputWrapper--1857e .bp_combobox_module_errorIcon--1857e path{
+.bp_combobox_module_container--2cc49 .bp_combobox_module_comboboxContainer--2cc49 .bp_combobox_module_textInputWrapper--2cc49 .bp_combobox_module_errorIcon--2cc49 path{
   fill:var(--combobox-error-icon-fill);
 }
-.bp_combobox_module_container--1857e .bp_combobox_module_comboboxContainer--1857e .bp_combobox_module_textInputWrapper--1857e .bp_combobox_module_comboboxButtons--1857e{
+.bp_combobox_module_container--2cc49 .bp_combobox_module_comboboxContainer--2cc49 .bp_combobox_module_textInputWrapper--2cc49 .bp_combobox_module_comboboxButtons--2cc49{
   align-items:center;
   display:flex;
   position:absolute;
   right:var(--combobox-button-spacing);
   top:var(--combobox-button-spacing);
 }
-.bp_combobox_module_container--1857e .bp_combobox_module_comboboxContainer--1857e.bp_combobox_module_withChips--1857e{
+.bp_combobox_module_container--2cc49 .bp_combobox_module_comboboxContainer--2cc49.bp_combobox_module_withChips--2cc49{
   max-height:var(--combobox-container-with-chips-max-height);
   padding-block:var(--combobox-container-with-chips-padding-block);
 }
-.bp_combobox_module_container--1857e .bp_combobox_module_comboboxContainer--1857e.bp_combobox_module_withChips--1857e:not(:disabled).bp_combobox_module_error--1857e{
+.bp_combobox_module_container--2cc49 .bp_combobox_module_comboboxContainer--2cc49.bp_combobox_module_withChips--2cc49:not(:disabled).bp_combobox_module_error--2cc49{
   padding-block:var(--combobox-container-with-chips-error-padding-block);
 }
-.bp_combobox_module_container--1857e .bp_combobox_module_comboboxContainer--1857e.bp_combobox_module_withChips--1857e:not(:disabled):has(input:focus){
+.bp_combobox_module_container--2cc49 .bp_combobox_module_comboboxContainer--2cc49.bp_combobox_module_withChips--2cc49:not(:disabled):has(input:focus){
   padding-block:var(--combobox-container-with-chips-focus-padding-block);
 }
-.bp_combobox_module_container--1857e .bp_combobox_module_inlineError--1857e{
+.bp_combobox_module_container--2cc49 .bp_combobox_module_inlineError--2cc49{
   margin-block-start:var(--combobox-inline-error-margin-block-start);
 }
 
-.bp_combobox_module_popover--1857e{
+.bp_combobox_module_popover--2cc49{
+  backdrop-filter:var(--combobox-popover-backdrop-filter);
   background-color:var(--combobox-popover-background-color);
   border:var(--combobox-popover-border);
   border-radius:var(--combobox-popover-border-radius);
@@ -2495,7 +2527,7 @@
   text-transform:var(--body-default-text-case);
   z-index:var(--z-index-popover);
 }
-.bp_combobox_module_popover--1857e .bp_combobox_module_option--1857e{
+.bp_combobox_module_popover--2cc49 .bp_combobox_module_option--2cc49{
   border:var(--combobox-option-border);
   border-radius:var(--combobox-option-border-radius);
   box-sizing:border-box;
@@ -2509,21 +2541,21 @@
           user-select:none;
   width:100%;
 }
-.bp_combobox_module_popover--1857e .bp_combobox_module_option--1857e[aria-disabled]{
+.bp_combobox_module_popover--2cc49 .bp_combobox_module_option--2cc49[aria-disabled]{
   opacity:var(--combobox-option-disabled-opacity);
 }
-.bp_combobox_module_popover--1857e .bp_combobox_module_option--1857e[data-active-item]:not([aria-disabled]){
+.bp_combobox_module_popover--2cc49 .bp_combobox_module_option--2cc49[data-active-item]:not([aria-disabled]){
   background-color:var(--combobox-option-active-background-color);
   border:var(--combobox-option-active-border);
 }
-.bp_combobox_module_popover--1857e .bp_combobox_module_option--1857e:active{
+.bp_combobox_module_popover--2cc49 .bp_combobox_module_option--2cc49:active{
   background-color:var(--combobox-option-hover-background-color);
   border:var(--combobox-option-border);
 }
-.bp_combobox_module_popover--1857e .bp_combobox_module_option--1857e:hover{
+.bp_combobox_module_popover--2cc49 .bp_combobox_module_option--2cc49:hover{
   background-color:var(--combobox-option-hover-background-color);
 }
-.bp_combobox_module_popover--1857e .bp_combobox_module_option--1857e .bp_combobox_module_indicator--1857e{
+.bp_combobox_module_popover--2cc49 .bp_combobox_module_option--2cc49 .bp_combobox_module_indicator--2cc49{
   align-items:center;
   display:flex;
   height:var(--combobox-option-indicator-height);
@@ -2532,16 +2564,16 @@
   position:absolute;
   top:var(--combobox-option-indicator-top);
 }
-.bp_combobox_module_popover--1857e .bp_combobox_module_option--1857e .bp_combobox_module_indicator--1857e .bp_combobox_module_indicatorIcon--1857e path{
+.bp_combobox_module_popover--2cc49 .bp_combobox_module_option--2cc49 .bp_combobox_module_indicator--2cc49 .bp_combobox_module_indicatorIcon--2cc49 path{
   fill:var(--combobox-option-indicator-icon-fill);
 }
-.bp_combobox_module_popover--1857e .bp_combobox_module_optionWithIndicator--1857e{
+.bp_combobox_module_popover--2cc49 .bp_combobox_module_optionWithIndicator--2cc49{
   padding-inline:var(--combobox-option-with-indicator-padding-inline);
 }
-.bp_combobox_module_popover--1857e .bp_combobox_module_loadingIndicator--1857e{
+.bp_combobox_module_popover--2cc49 .bp_combobox_module_loadingIndicator--2cc49{
   position:var(--combobox-loading-indicator-position);
 }
-.bp_combobox_module_popover--1857e .bp_combobox_module_noResultOption--1857e{
+.bp_combobox_module_popover--2cc49 .bp_combobox_module_noResultOption--2cc49{
   color:var(--combobox-no-result-option-color);
   -webkit-user-select:none;
           user-select:none;
@@ -6090,65 +6122,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 +6269,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 +6323,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 +6339,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 +6379,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.1",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {