@box/blueprint-web 12.57.1 → 12.58.0

package/dist/lib-esm/index.css

@@ -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--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 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--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 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 tr:not(:last-child) td{
-  border-block-end:var(--border-1) solid var(--gray-10);
+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--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--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.58.0",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {