@box/blueprint-web 12.57.1 → 12.59.0

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

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"card":"bp_card_module_card--c1a2b","dropshadow-1":"bp_card_module_dropshadow-1--c1a2b","dropshadow-3":"bp_card_module_dropshadow-3--c1a2b"};
+var styles = {"card":"bp_card_module_card--28a0a","dropshadow-1":"bp_card_module_dropshadow-1--28a0a","dropshadow-3":"bp_card_module_dropshadow-3--28a0a"};
 
 export { styles as default };

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

@@ -40,6 +40,7 @@ const RootInner = ({
     ...rest
   } = props;
   const {
+    selectOnEnterOrTab = false,
     disabled = false,
     required = false,
     className,
@@ -136,18 +137,24 @@ const RootInner = ({
     }
     return getSelectedOptionValues(valueProp);
   }, [getSelectedOptionValues, valueProp]);
-  const setValue = newSelectedValue => {
+  const setValue = useCallback((nextSelectedValue, isSelectedFromEnter) => {
     if (!onValueChange) {
       return;
     }
     let selectedOption;
-    if (Array.isArray(newSelectedValue)) {
-      selectedOption = newSelectedValue.map(newValue => getOptionFromValue(newValue, options));
+    if (Array.isArray(nextSelectedValue)) {
+      if (isSelectedFromEnter) {
+        selectedOption = nextSelectedValue.map(value => ({
+          value
+        }));
+      } else {
+        selectedOption = nextSelectedValue.map(nextValue => getOptionFromValue(nextValue, options));
+      }
     } else {
-      selectedOption = getOptionFromValue(newSelectedValue, options);
+      selectedOption = getOptionFromValue(nextSelectedValue, options);
     }
     onValueChange(selectedOption);
-  };
+  }, [onValueChange, options]);
   const selectStore = useSelectStore({
     combobox: comboboxStore,
     defaultValue: getDefaultValue(),
@@ -255,33 +262,50 @@ const RootInner = ({
       return prev;
     });
   }, [selectStore, focusInput]);
+  const handleSelectOnEnterOrTab = useCallback(() => {
+    const currentValues = Array.isArray(selectedValue) ? selectedValue : [];
+    const nextValue = inputValue.trim();
+    // Check if value already exists to avoid duplicates
+    if (!currentValues.includes(nextValue)) {
+      const nextValues = [...currentValues, nextValue];
+      setValue(nextValues, true);
+    }
+  }, [selectedValue, inputValue, setValue]);
+  const handleEscape = useCallback(() => {
+    if (isOpen) {
+      setOpen(false);
+    } else if (clearOnEscape) {
+      setInputValue('');
+      resetSelectedValue();
+    }
+  }, [isOpen, clearOnEscape, setOpen, setInputValue, resetSelectedValue]);
   const handleKeyDown = useCallback(event => {
     // Close menu
     if (event.key === 'Enter' || event.key === 'Tab') {
       if (event.nativeEvent.isComposing) {
         return;
       }
+      // We only want to select the input value directly if
+      // the user press enter or tab
+      // and selectOnEnterOrTab is true
+      // and the input value is not empty
+      // and the input value is not already selected
+      if (selectOnEnterOrTab && inputValue.trim()) {
+        handleSelectOnEnterOrTab();
+      }
       setOpen(false);
       return;
     }
     // Close menu or clear input
     if (event.key === 'Escape') {
-      if (isOpen) {
-        setOpen(false);
-      } else {
-        if (!clearOnEscape) {
-          return;
-        }
-        setInputValue('');
-        resetSelectedValue();
-      }
+      handleEscape();
     }
     if (event.key === 'Backspace') {
       if (deleteChipOnBackspace && multiselect && !inputValue && selectedValue.length) {
         removeMultiSelectInputChip(selectedValue[selectedValue.length - 1]);
       }
     }
-  }, [clearOnEscape, removeMultiSelectInputChip, deleteChipOnBackspace, isOpen, resetSelectedValue, setInputValue, setOpen, inputValue, multiselect, selectedValue]);
+  }, [deleteChipOnBackspace, handleEscape, handleSelectOnEnterOrTab, inputValue, multiselect, removeMultiSelectInputChip, selectedValue, selectOnEnterOrTab, setOpen]);
   // Reset input on blur
   const handleOnBlur = useCallback(() => {
     if (!clearOnBlur || isOpen) {

package/dist/lib-esm/combobox/types.d.ts

@@ -230,6 +230,13 @@ export interface ComboboxBaseProps<Multiple extends boolean, FreeInput extends b
      * @default false
      */
     displaySingleSelectionAsChip?: boolean;
+    /**
+     * If `true`, the combobox input will select the input value when the user presses enter or tab.
+     * This prop only works on multi-select combobox at the moment.
+     *
+     * @default false
+     */
+    selectOnEnterOrTab?: boolean;
 }
 export type ComboboxTextArea = Pick<TextAreaProps, 'maxRows' | 'minRows' | 'maxLength' | 'aria-describedby'> & {
     as: 'textarea';

package/dist/lib-esm/index.css

@@ -1471,7 +1471,7 @@
 .bp_button_wrapper_module_buttonWrapper--b0897{
   all:unset;
 }
-.bp_card_module_card--c1a2b[data-modern=true]{
+.bp_card_module_card--28a0a[data-modern=true]{
   --bp-card-dropshadow-1:var(--dropshadow-1);
   --bp-card-dropshadow-3:var(--dropshadow-3);
   --card-radius:var(--bp-radius-10);
@@ -1480,30 +1480,30 @@
   --card-border:var(--bp-border-01) solid var(--bp-border-card-border);
   --card-dropshadow-1:var(--bp-card-dropshadow-1);
   --card-dropshadow-3:var(--bp-card-dropshadow-3);
-  --card-backdrop-filter:none;
+  --card-backdrop-filter:blur(16px);
 }
 
-.bp_card_module_card--c1a2b[data-modern=false]{
+.bp_card_module_card--28a0a[data-modern=false]{
   --card-padding:var(--space-4);
   --card-background:var(--surface-card-surface);
   --card-border:var(--border-1) solid var(--border-card-border);
   --card-radius:var(--radius-4);
   --card-dropshadow-1:var(--dropshadow-1);
   --card-dropshadow-3:var(--dropshadow-3);
-  --card-backdrop-filter:blur(16px);
+  --card-backdrop-filter:none;
 }
 
-.bp_card_module_card--c1a2b{
+.bp_card_module_card--28a0a{
   backdrop-filter:var(--card-backdrop-filter);
   background:var(--card-background);
   border:var(--card-border);
   border-radius:var(--card-radius);
   padding:var(--card-padding);
 }
-.bp_card_module_card--c1a2b.bp_card_module_dropshadow-1--c1a2b{
+.bp_card_module_card--28a0a.bp_card_module_dropshadow-1--28a0a{
   box-shadow:var(--card-dropshadow-1);
 }
-.bp_card_module_card--c1a2b.bp_card_module_dropshadow-3--c1a2b{
+.bp_card_module_card--28a0a.bp_card_module_dropshadow-3--28a0a{
   box-shadow:var(--card-dropshadow-3);
 }
 
@@ -5775,21 +5775,33 @@
   height:var(--icon-toogle-button-xsmall-size);
   width:var(--icon-toogle-button-xsmall-size);
 }
-table.bp_inline_table_module_inlineTable--7cffa{
-  background:var(--gray-white);
-  border:var(--border-1) solid var(--gray-10);
+table.bp_inline_table_module_inlineTable--14908[data-modern=false]{
+  --table-background:var(--gray-white);
+  --table-border:var(--border-1) solid var(--gray-10);
+  --table-border-radius:var(--radius-2);
+  --table-th-color:var(--text-text-on-light-secondary);
+  --table-cell-height:var(--size-12);
+  --table-action-cell-padding-block-start:var(--space-2);
+  --table-action-cell-padding-block-end:var(--space-2);
+  --table-cell-padding-inline-start:var(--space-5);
+  --table-cell-padding-inline-end:var(--space-5);
+  --table-cell-border:var(--border-1) solid var(--gray-10);
+}
+
+table.bp_inline_table_module_inlineTable--14908{
+  background:var(--table-background);
+  border:var(--table-border);
   border-collapse:initial;
-  border-color:var(--border-card-border);
-  border-radius:var(--radius-2);
+  border-radius:var(--table-border-radius);
   border-spacing:0;
 }
-table.bp_inline_table_module_inlineTable--7cffa.bp_inline_table_module_borderHidden--7cffa{
+table.bp_inline_table_module_inlineTable--14908.bp_inline_table_module_borderHidden--14908{
   border:none;
 }
-table.bp_inline_table_module_inlineTable--7cffa.bp_inline_table_module_fullSpan--7cffa{
+table.bp_inline_table_module_inlineTable--14908.bp_inline_table_module_fullSpan--14908{
   width:100%;
 }
-table.bp_inline_table_module_inlineTable--7cffa td{
+table.bp_inline_table_module_inlineTable--14908 td{
   font-family:var(--body-default-font-family);
   font-size:var(--body-default-font-size);
   font-weight:var(--body-default-font-weight);
@@ -5799,13 +5811,13 @@ table.bp_inline_table_module_inlineTable--7cffa td{
           text-decoration:var(--body-default-text-decoration);
   text-transform:var(--body-default-text-case);
 }
-table.bp_inline_table_module_inlineTable--7cffa td.bp_inline_table_module_actionCell--7cffa{
-  padding-block-end:var(--space-2);
-  padding-block-start:var(--space-2);
+table.bp_inline_table_module_inlineTable--14908 td.bp_inline_table_module_actionCell--14908{
+  padding-block-end:var(--table-action-cell-padding-block-end);
+  padding-block-start:var(--table-action-cell-padding-block-start);
 }
-table.bp_inline_table_module_inlineTable--7cffa th{
-  border-bottom:var(--border-1) solid var(--gray-10);
-  color:var(--text-text-on-light-secondary);
+table.bp_inline_table_module_inlineTable--14908 th{
+  border-bottom:var(--table-cell-border);
+  color:var(--table-th-color);
   font-family:var(--caption-default-font-family);
   font-size:var(--caption-default-font-size);
   font-weight:var(--caption-default-font-weight);
@@ -5816,17 +5828,40 @@ table.bp_inline_table_module_inlineTable--7cffa th{
   text-transform:var(--caption-default-text-case);
   text-transform:uppercase;
 }
-table.bp_inline_table_module_inlineTable--7cffa td,table.bp_inline_table_module_inlineTable--7cffa th{
-  height:var(--size-12);
+table.bp_inline_table_module_inlineTable--14908 td,table.bp_inline_table_module_inlineTable--14908 th{
+  height:var(--table-cell-height);
+}
+table.bp_inline_table_module_inlineTable--14908 td:first-child,table.bp_inline_table_module_inlineTable--14908 th:first-child{
+  padding-inline-start:var(--table-cell-padding-inline-start);
+}
+table.bp_inline_table_module_inlineTable--14908 td:last-child,table.bp_inline_table_module_inlineTable--14908 td:not(:only-child),table.bp_inline_table_module_inlineTable--14908 th:last-child,table.bp_inline_table_module_inlineTable--14908 th:not(:only-child){
+  padding-inline-end:var(--table-cell-padding-inline-end);
 }
-table.bp_inline_table_module_inlineTable--7cffa td:first-child,table.bp_inline_table_module_inlineTable--7cffa th:first-child{
-  padding-inline-start:var(--space-5);
+table.bp_inline_table_module_inlineTable--14908 tr:not(:last-child) td{
+  border-block-end:var(--table-cell-border);
 }
-table.bp_inline_table_module_inlineTable--7cffa td:last-child,table.bp_inline_table_module_inlineTable--7cffa td:not(:only-child),table.bp_inline_table_module_inlineTable--7cffa th:last-child,table.bp_inline_table_module_inlineTable--7cffa th:not(:only-child){
-  padding-inline-end:var(--space-5);
+
+table.bp_inline_table_module_inlineTable--14908[data-modern=true]{
+  --table-background:var(--bp-surface-inline-table-surface);
+  --table-border:var(--bp-border-01) solid var(--bp-border-inline-table-border);
+  --table-border-radius:var(--bp-radius-06);
+  --table-th-color:var(--bp-text-text-on-light-secondary);
+  --table-cell-height:var(--bp-size-120);
+  --table-action-cell-padding-block-start:var(--bp-space-020);
+  --table-cell-padding-inline-default:var(--bp-space-020);
+  --table-action-cell-padding-block-end:var(--bp-space-020);
+  --table-cell-padding-inline-start:var(--bp-space-050);
+  --table-cell-padding-inline-end:var(--bp-space-050);
+  --table-cell-border:var(--bp-border-01) solid var(--bp-border-divider-border);
+}
+table.bp_inline_table_module_inlineTable--14908[data-modern=true] td,table.bp_inline_table_module_inlineTable--14908[data-modern=true] th{
+  padding-inline:var(--table-cell-padding-inline-default);
 }
-table.bp_inline_table_module_inlineTable--7cffa tr:not(:last-child) td{
-  border-block-end:var(--border-1) solid var(--gray-10);
+table.bp_inline_table_module_inlineTable--14908[data-modern=true] td:first-child,table.bp_inline_table_module_inlineTable--14908[data-modern=true] th:first-child{
+  padding-inline-start:var(--table-cell-padding-inline-start);
+}
+table.bp_inline_table_module_inlineTable--14908[data-modern=true] td:last-child,table.bp_inline_table_module_inlineTable--14908[data-modern=true] th:last-child{
+  padding-inline-end:var(--table-cell-padding-inline-end);
 }
 .bp_search_term_string_module_searchTerm--28ab8{
   background-color:var(--surface-text-highlight-surface);
@@ -7784,10 +7819,38 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
 .bp_radio_group_module_radioButton--ed12f:not([data-disabled]):focus-visible[data-state=checked] .bp_radio_group_module_indicator--ed12f,.bp_radio_group_module_radioButton--ed12f:not([data-disabled]):hover[data-state=checked] .bp_radio_group_module_indicator--ed12f{
   background-color:var(--surface-radio-surface-selected-hover);
 }
-.bp_radio_tiles_option_module_radioTileOption--36d8a{
-  background-color:var(--surface-radiotile-surface);
-  border:var(--border-1) solid var(--border-radiotile-border);
-  border-radius:var(--radius-3);
+.bp_radio_tiles_option_module_radioTileOption--de970[data-modern=false]{
+  --radio-tile-background:var(--surface-radiotile-surface);
+  --radio-tile-border:var(--border-1) solid var(--border-radiotile-border);
+  --radio-tile-border-radius:var(--radius-3);
+  --radio-tile-icon-color:var(--icon-icon-on-light-secondary);
+  --radio-tile-checked-background:var(--surface-radiotile-surface-selected);
+  --radio-tile-checked-box-shadow:0 0 0 var(--border-2) var(--border-radiotile-border-selected);
+  --radio-tile-hover-background:var(--surface-radiotile-surface-hover);
+  --radio-tile-hover-border:var(--border-1) solid var(--border-radiotile-border-hover);
+  --radio-tile-focus-outline:var(--border-2) solid var(--border-input-border-focus);
+  --radio-tile-focus-outline-offset:var(--border-2);
+  --radio-tile-checked-focus-outline-offset:var(--border-3);
+}
+
+.bp_radio_tiles_option_module_radioTileOption--de970[data-modern=true]{
+  --radio-tile-background:var(--bp-surface-radio-tile-surface);
+  --radio-tile-border:var(--bp-border-01) solid var(--bp-border-radio-tile-border);
+  --radio-tile-border-radius:var(--bp-radius-06);
+  --radio-tile-icon-color:var(--bp-icon-icon-on-light-secondary);
+  --radio-tile-checked-background:var(--bp-surface-radio-tile-surface-selected);
+  --radio-tile-checked-box-shadow:0 0 0 var(--bp-border-02) var(--bp-border-radio-tile-border-selected);
+  --radio-tile-hover-background:var(--bp-surface-radio-tile-surface-hover);
+  --radio-tile-hover-border:var(--bp-border-01) solid var(--bp-border-radio-tile-border-hover);
+  --radio-tile-focus-outline:var(--bp-border-02) solid var(--bp-outline-focus-on-light);
+  --radio-tile-focus-outline-offset:var(--bp-border-02);
+  --radio-tile-checked-focus-outline-offset:var(--bp-border-03);
+}
+
+.bp_radio_tiles_option_module_radioTileOption--de970{
+  background-color:var(--radio-tile-background);
+  border:var(--radio-tile-border);
+  border-radius:var(--radio-tile-border-radius);
   box-sizing:border-box;
   cursor:pointer;
   display:inline-flex;
@@ -7800,35 +7863,35 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   -webkit-user-select:none;
           user-select:none;
 }
-.bp_radio_tiles_option_module_radioTileOption--36d8a .bp_radio_tiles_option_module_icon--36d8a{
+.bp_radio_tiles_option_module_radioTileOption--de970 .bp_radio_tiles_option_module_icon--de970{
   display:inline-flex;
 }
-.bp_radio_tiles_option_module_radioTileOption--36d8a .bp_radio_tiles_option_module_icon--36d8a > svg > path{
-  fill:var(--icon-icon-on-light-secondary);
+.bp_radio_tiles_option_module_radioTileOption--de970 .bp_radio_tiles_option_module_icon--de970 > svg > path{
+  fill:var(--radio-tile-icon-color);
 }
-.bp_radio_tiles_option_module_radioTileOption--36d8a.bp_radio_tiles_option_module_disabled--36d8a{
+.bp_radio_tiles_option_module_radioTileOption--de970.bp_radio_tiles_option_module_disabled--de970{
   opacity:.6;
 }
-.bp_radio_tiles_option_module_radioTileOption--36d8a:has(:focus-visible){
-  outline:2px solid var(--border-input-border-focus);
-  outline-offset:var(--border-2);
+.bp_radio_tiles_option_module_radioTileOption--de970:has(:focus-visible){
+  outline:var(--radio-tile-focus-outline);
+  outline-offset:var(--radio-tile-focus-outline-offset);
 }
-.bp_radio_tiles_option_module_radioTileOption--36d8a.bp_radio_tiles_option_module_checked--36d8a{
-  background-color:var(--surface-radiotile-surface-selected);
+.bp_radio_tiles_option_module_radioTileOption--de970.bp_radio_tiles_option_module_checked--de970{
+  background-color:var(--radio-tile-checked-background);
   border-color:#0000;
-  box-shadow:0 0 0 2px var(--border-radiotile-border-selected);
+  box-shadow:var(--radio-tile-checked-box-shadow);
 }
-.bp_radio_tiles_option_module_radioTileOption--36d8a.bp_radio_tiles_option_module_checked--36d8a:focus-within{
-  outline-offset:var(--border-3);
+.bp_radio_tiles_option_module_radioTileOption--de970.bp_radio_tiles_option_module_checked--de970:focus-within{
+  outline-offset:var(--radio-tile-checked-focus-outline-offset);
 }
-.bp_radio_tiles_option_module_radioTileOption--36d8a.bp_radio_tiles_option_module_checked--36d8a .bp_radio_tiles_option_module_icon--36d8a > svg > path{
+.bp_radio_tiles_option_module_radioTileOption--de970.bp_radio_tiles_option_module_checked--de970 .bp_radio_tiles_option_module_icon--de970 > svg > path{
   fill:var(--icon-icon-blue);
 }
-.bp_radio_tiles_option_module_radioTileOption--36d8a:hover:not(.bp_radio_tiles_option_module_disabled--36d8a, .bp_radio_tiles_option_module_checked--36d8a){
-  background-color:var(--surface-radiotile-surface-hover);
-  border:var(--border-1) solid var(--border-radiotile-border-hover);
+.bp_radio_tiles_option_module_radioTileOption--de970:hover:not(.bp_radio_tiles_option_module_disabled--de970, .bp_radio_tiles_option_module_checked--de970){
+  background-color:var(--radio-tile-hover-background);
+  border:var(--radio-tile-hover-border);
 }
-.bp_radio_tiles_option_module_radioTileOption--36d8a > label{
+.bp_radio_tiles_option_module_radioTileOption--de970 > label{
   align-items:center;
   box-sizing:border-box;
   cursor:inherit;
@@ -7840,7 +7903,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   width:100%;
 }
 
-.bp_radio_tiles_option_module_radioTileLabel--36d8a{
+.bp_radio_tiles_option_module_radioTileLabel--de970{
   max-width:100%;
   overflow:hidden;
   text-align:center;

package/dist/lib-esm/inline-table/inline-table.js

@@ -1,6 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import React__default from 'react';
+import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 import styles from './inline-table.module.js';
 
 const Table = /*#__PURE__*/React__default.forwardRef((props, ref) => {
@@ -10,8 +11,12 @@ const Table = /*#__PURE__*/React__default.forwardRef((props, ref) => {
     className,
     ...rest
   } = props;
+  const {
+    enableModernizedComponents
+  } = useBlueprintModernization();
   return jsx("table", {
     className: clsx(hideBorder && styles.borderHidden, fullSpan && styles.fullSpan, styles.inlineTable, className),
+    "data-modern": enableModernizedComponents,
     ...rest,
     ref: ref
   });

package/dist/lib-esm/inline-table/inline-table.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"inlineTable":"bp_inline_table_module_inlineTable--7cffa","borderHidden":"bp_inline_table_module_borderHidden--7cffa","fullSpan":"bp_inline_table_module_fullSpan--7cffa","actionCell":"bp_inline_table_module_actionCell--7cffa"};
+var styles = {"inlineTable":"bp_inline_table_module_inlineTable--14908","borderHidden":"bp_inline_table_module_borderHidden--14908","fullSpan":"bp_inline_table_module_fullSpan--14908","actionCell":"bp_inline_table_module_actionCell--14908"};
 
 export { styles as default };

package/dist/lib-esm/radio-tiles/radio-tiles-option.js

@@ -1,11 +1,12 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import React__default, { useRef } from 'react';
 import clsx from 'clsx';
+import React__default, { useRef } from 'react';
 import { Text } from '../text/text.js';
 import { useRadioTilesContext } from './radio-tiles.context.js';
-import styles from './radio-tiles-option.module.js';
+import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 import { useFullTextTooltip } from '../utils/useFullTextTooltip.js';
 import { VisuallyHidden } from '../visually-hidden/visually-hidden.js';
+import styles from './radio-tiles-option.module.js';
 
 const RadioTilesOption = function RadioTilesOption({
   children,
@@ -43,12 +44,16 @@ const RadioTilesOption = function RadioTilesOption({
     [styles.checked]: isSelected,
     [styles.disabled]: isDisabled
   }, className);
+  const {
+    enableModernizedComponents
+  } = useBlueprintModernization();
   return (
     // @ts-expect-error Fix this type error - DSYS-1597
     jsx(Tooltip, {
       ...wrapperProps,
       children: jsx("div", {
         className: radioTileClassNames,
+        "data-modern": enableModernizedComponents,
         children: jsxs("label", {
           children: [jsx(VisuallyHidden, {
             children: jsx("input", {

package/dist/lib-esm/radio-tiles/radio-tiles-option.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"radioTileOption":"bp_radio_tiles_option_module_radioTileOption--36d8a","icon":"bp_radio_tiles_option_module_icon--36d8a","disabled":"bp_radio_tiles_option_module_disabled--36d8a","checked":"bp_radio_tiles_option_module_checked--36d8a","radioTileLabel":"bp_radio_tiles_option_module_radioTileLabel--36d8a"};
+var styles = {"radioTileOption":"bp_radio_tiles_option_module_radioTileOption--de970","icon":"bp_radio_tiles_option_module_icon--de970","disabled":"bp_radio_tiles_option_module_disabled--de970","checked":"bp_radio_tiles_option_module_checked--de970","radioTileLabel":"bp_radio_tiles_option_module_radioTileLabel--de970"};
 
 export { styles as default };

package/dist/lib-esm/radio-tiles/radio-tiles.js

@@ -1,6 +1,7 @@
 import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useMemo } from 'react';
+import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 import { RadioTilesOption } from './radio-tiles-option.js';
 import { RadioTilesContext } from './radio-tiles.context.js';
 import styles from './radio-tiles.module.js';
@@ -24,6 +25,9 @@ const RadioTilesRoot = ({
     [styles.hasColumns]: Number(columns) > 0,
     [variant === 'compact' ? styles.compact : styles.default]: true
   }, className);
+  const {
+    enableModernizedComponents
+  } = useBlueprintModernization();
   const contextValue = useMemo(() => ({
     name,
     selectedValue: value,
@@ -36,6 +40,7 @@ const RadioTilesRoot = ({
       "aria-label": ariaLabel,
       "aria-labelledby": ariaLabelledBy,
       className: containerClassNames,
+      "data-modern": enableModernizedComponents,
       role: "radiogroup",
       style: containerStyles,
       children: children

package/package.json

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