@box/blueprint-web 17.15.4 → 17.17.0

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

@@ -12,7 +12,6 @@ const Table = /*#__PURE__*/React__default.forwardRef((props, ref) => {
   } = props;
   return jsx("table", {
     className: clsx(hideBorder && styles.borderHidden, fullSpan && styles.fullSpan, styles.inlineTable, className),
-    "data-modern": 'true' ,
     ...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--12cec","borderHidden":"bp_inline_table_module_borderHidden--12cec","fullSpan":"bp_inline_table_module_fullSpan--12cec","actionCell":"bp_inline_table_module_actionCell--12cec"};
+var styles = {"inlineTable":"bp_inline_table_module_inlineTable--f26a1","borderHidden":"bp_inline_table_module_borderHidden--f26a1","fullSpan":"bp_inline_table_module_fullSpan--f26a1","actionCell":"bp_inline_table_module_actionCell--f26a1"};
 
 export { styles as default };

package/dist/lib-esm/list-item/main.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"tableSortingContainer":"bp_main_module_tableSortingContainer--4cb60","resizableTableContainer":"bp_main_module_resizableTableContainer--4cb60","resizableTable":"bp_main_module_resizableTable--4cb60","tableHeader":"bp_main_module_tableHeader--4cb60","column":"bp_main_module_column--4cb60","columnNameWrapper":"bp_main_module_columnNameWrapper--4cb60","columnName":"bp_main_module_columnName--4cb60","focusVisible":"bp_main_module_focusVisible--4cb60","sorted":"bp_main_module_sorted--4cb60","sortingFlexWrapper":"bp_main_module_sortingFlexWrapper--4cb60","columnResizer":"bp_main_module_columnResizer--4cb60","dropdownHeaderContainer":"bp_main_module_dropdownHeaderContainer--4cb60","droppableColumn":"bp_main_module_droppableColumn--4cb60","actionColumn":"bp_main_module_actionColumn--4cb60","hiddenColumn":"bp_main_module_hiddenColumn--4cb60","tableBody":"bp_main_module_tableBody--4cb60","row":"bp_main_module_row--4cb60","cell":"bp_main_module_cell--4cb60","actionsWrapper":"bp_main_module_actionsWrapper--4cb60","actionChildren":"bp_main_module_actionChildren--4cb60","actions":"bp_main_module_actions--4cb60","alwaysShowSelection":"bp_main_module_alwaysShowSelection--4cb60","isCellHidden":"bp_main_module_isCellHidden--4cb60"};
+var styles = {"tableSortingContainer":"bp_main_module_tableSortingContainer--c1b8c","resizableTableContainer":"bp_main_module_resizableTableContainer--c1b8c","resizableTable":"bp_main_module_resizableTable--c1b8c","tableHeader":"bp_main_module_tableHeader--c1b8c","column":"bp_main_module_column--c1b8c","columnNameWrapper":"bp_main_module_columnNameWrapper--c1b8c","columnName":"bp_main_module_columnName--c1b8c","focusVisible":"bp_main_module_focusVisible--c1b8c","sorted":"bp_main_module_sorted--c1b8c","sortingFlexWrapper":"bp_main_module_sortingFlexWrapper--c1b8c","columnResizer":"bp_main_module_columnResizer--c1b8c","dropdownHeaderContainer":"bp_main_module_dropdownHeaderContainer--c1b8c","droppableColumn":"bp_main_module_droppableColumn--c1b8c","actionColumn":"bp_main_module_actionColumn--c1b8c","hiddenColumn":"bp_main_module_hiddenColumn--c1b8c","tableBody":"bp_main_module_tableBody--c1b8c","row":"bp_main_module_row--c1b8c","cell":"bp_main_module_cell--c1b8c","actionsWrapper":"bp_main_module_actionsWrapper--c1b8c","actionChildren":"bp_main_module_actionChildren--c1b8c","actions":"bp_main_module_actions--c1b8c","alwaysShowSelection":"bp_main_module_alwaysShowSelection--c1b8c","isCellHidden":"bp_main_module_isCellHidden--c1b8c"};
 
 export { styles as default };

package/dist/lib-esm/list-item/table-column.js

@@ -1,5 +1,4 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import '@box/blueprint-web-assets/icons/Fill';
 import { ArrowUp, ArrowDown } from '@box/blueprint-web-assets/icons/Medium';
 import { bpSize040, bpTextTextOnLight } from '@box/blueprint-web-assets/tokens/tokens';
 import clsx from 'clsx';
@@ -17,19 +16,17 @@ function SortingArrowIcon({
   direction
 }) {
   const props = {
-    color: bpTextTextOnLight ,
-    height: bpSize040 ,
+    color: bpTextTextOnLight,
+    height: bpSize040,
     role: 'presentation',
     visibility,
-    width: bpSize040 
+    width: bpSize040
   };
-  {
-    return direction === 'up' ? jsx(ArrowUp, {
-      ...props
-    }) : jsx(ArrowDown, {
-      ...props
-    });
-  }
+  return direction === 'up' ? jsx(ArrowUp, {
+    ...props
+  }) : jsx(ArrowDown, {
+    ...props
+  });
 }
 function SortIndicator({
   direction

package/dist/lib-esm/list-item/table-header-default.js

@@ -15,7 +15,6 @@ const TableHeaderInner = (props, ref) => {
     ...rest,
     ref: ref,
     className: clsx(styles.tableHeader, className),
-    "data-modern": 'true' ,
     children: children
   });
 };

package/dist/lib-esm/list-item/table.js

@@ -29,7 +29,6 @@ const Table = /*#__PURE__*/forwardRef((props, ref) => {
   } = props;
   const resizableContainerRef = useRef(null);
   const dropdownHeaderContainerRef = useRef(null);
-  const enableModernizedComponents = true;
   return jsx(CustomTableOptionsProvider, {
     selectionVisibility: selectionVisibility,
     children: jsx(TableSortingProvider, {
@@ -49,7 +48,6 @@ const Table = /*#__PURE__*/forwardRef((props, ref) => {
           children: jsx(ResizableTableContainer, {
             ref: resizableContainerRef,
             className: styles.resizableTableContainer,
-            "data-modern": enableModernizedComponents,
             ...resizableTableContainerProps,
             children: jsx(TableInner, {
               ref: ref,

package/dist/lib-esm/primitives/select-menu-grid/select-menu-grid-option.js

@@ -1,6 +1,6 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { CompositeItem, Button } from '@ariakit/react';
-import { Gray05, bpSize060, bpSize040, BrandDocgenPrimary, BrandFormsPrimary, BrandSignPrimary, BrandBoxPrimary, bpIconIconOnLight } from '@box/blueprint-web-assets/tokens/tokens';
+import { Gray05, bpSize050, bpSize040, BrandDocgenPrimary, BrandFormsPrimary, BrandSignPrimary, BrandBoxPrimary, bpIconIconOnLight } from '@box/blueprint-web-assets/tokens/tokens';
 import clsx from 'clsx';
 import Color from 'color';
 import { forwardRef, createElement } from 'react';
@@ -38,6 +38,7 @@ const SelectMenuGridOption = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     ...restProps
   } = props;
   const isWithLabel = variant === 'labeled';
+  const labeledSize = isWithLabel ? props.size : undefined;
   const isButtonDisabled = disabled || loading;
   const isButtonActive = !disabled && !loading && active;
   const isButtonDragged = isWithLabel && !isButtonDisabled && props.draggable && props.dragging;
@@ -65,6 +66,7 @@ const SelectMenuGridOption = /*#__PURE__*/forwardRef((props, forwardedRef) => {
       "aria-label": loading ? loadingAriaLabel : ariaLabel,
       className: clsx(styles.optionButton, className, {
         [styles.labeled]: isWithLabel,
+        [styles['labeled--large']]: labeledSize === 'large',
         [styles.loading]: loading,
         [styles.active]: isButtonActive,
         [styles.dragging]: isButtonDragged
@@ -145,7 +147,7 @@ const iconColorModern = {
 };
 const iconSizeModern = {
   default: bpSize040,
-  large: bpSize060
+  large: bpSize050
 };
 const ItemWithLabel = ({
   size,
@@ -171,7 +173,7 @@ const ItemWithLabel = ({
       children: [jsx(Text, {
         as: "span",
         className: clsx(styles.text, styles[`text--${size}`]),
-        variant: size === 'default' ? 'caption' : 'bodyDefaultBold',
+        variant: size === 'default' ? 'bodySmall' : 'bodyDefaultBold',
         children: label
       }), description && jsx(Text, {
         as: "span",

package/dist/lib-esm/primitives/select-menu-grid/select-menu-grid-option.module.js

@@ -1,4 +1,4 @@
 import '../../index.css';
-var styles = {"buttonWrapper":"bp_select_menu_grid_option_module_buttonWrapper--38455","withLabel":"bp_select_menu_grid_option_module_withLabel--38455","withLabel--default":"bp_select_menu_grid_option_module_withLabel--default--38455","optionButton":"bp_select_menu_grid_option_module_optionButton--38455","labeled":"bp_select_menu_grid_option_module_labeled--38455","labelContent":"bp_select_menu_grid_option_module_labelContent--38455","labelContent--withDescription":"bp_select_menu_grid_option_module_labelContent--withDescription--38455","text":"bp_select_menu_grid_option_module_text--38455","text--large":"bp_select_menu_grid_option_module_text--large--38455","text--default":"bp_select_menu_grid_option_module_text--default--38455","description":"bp_select_menu_grid_option_module_description--38455","iconContainer":"bp_select_menu_grid_option_module_iconContainer--38455","iconContainer--size-default":"bp_select_menu_grid_option_module_iconContainer--size-default--38455","iconContainer--size-large":"bp_select_menu_grid_option_module_iconContainer--size-large--38455","iconContainer--default":"bp_select_menu_grid_option_module_iconContainer--default--38455","iconContainer--box":"bp_select_menu_grid_option_module_iconContainer--box--38455","iconContainer--docgen":"bp_select_menu_grid_option_module_iconContainer--docgen--38455","iconContainer--forms":"bp_select_menu_grid_option_module_iconContainer--forms--38455","iconContainer--sign":"bp_select_menu_grid_option_module_iconContainer--sign--38455","active":"bp_select_menu_grid_option_module_active--38455","dragging":"bp_select_menu_grid_option_module_dragging--38455","disabled":"bp_select_menu_grid_option_module_disabled--38455","square":"bp_select_menu_grid_option_module_square--38455","outlineHost":"bp_select_menu_grid_option_module_outlineHost--38455","circle":"bp_select_menu_grid_option_module_circle--38455","loading":"bp_select_menu_grid_option_module_loading--38455","color":"bp_select_menu_grid_option_module_color--38455","strikeThrough":"bp_select_menu_grid_option_module_strikeThrough--38455"};
+var styles = {"buttonWrapper":"bp_select_menu_grid_option_module_buttonWrapper--7314c","withLabel":"bp_select_menu_grid_option_module_withLabel--7314c","withLabel--default":"bp_select_menu_grid_option_module_withLabel--default--7314c","optionButton":"bp_select_menu_grid_option_module_optionButton--7314c","labeled":"bp_select_menu_grid_option_module_labeled--7314c","labelContent":"bp_select_menu_grid_option_module_labelContent--7314c","labelContent--withDescription":"bp_select_menu_grid_option_module_labelContent--withDescription--7314c","text":"bp_select_menu_grid_option_module_text--7314c","text--large":"bp_select_menu_grid_option_module_text--large--7314c","text--default":"bp_select_menu_grid_option_module_text--default--7314c","description":"bp_select_menu_grid_option_module_description--7314c","iconContainer":"bp_select_menu_grid_option_module_iconContainer--7314c","iconContainer--size-default":"bp_select_menu_grid_option_module_iconContainer--size-default--7314c","iconContainer--size-large":"bp_select_menu_grid_option_module_iconContainer--size-large--7314c","iconContainer--default":"bp_select_menu_grid_option_module_iconContainer--default--7314c","iconContainer--box":"bp_select_menu_grid_option_module_iconContainer--box--7314c","iconContainer--docgen":"bp_select_menu_grid_option_module_iconContainer--docgen--7314c","iconContainer--forms":"bp_select_menu_grid_option_module_iconContainer--forms--7314c","iconContainer--sign":"bp_select_menu_grid_option_module_iconContainer--sign--7314c","active":"bp_select_menu_grid_option_module_active--7314c","dragging":"bp_select_menu_grid_option_module_dragging--7314c","labeled--large":"bp_select_menu_grid_option_module_labeled--large--7314c","disabled":"bp_select_menu_grid_option_module_disabled--7314c","square":"bp_select_menu_grid_option_module_square--7314c","outlineHost":"bp_select_menu_grid_option_module_outlineHost--7314c","circle":"bp_select_menu_grid_option_module_circle--7314c","loading":"bp_select_menu_grid_option_module_loading--7314c","color":"bp_select_menu_grid_option_module_color--7314c","strikeThrough":"bp_select_menu_grid_option_module_strikeThrough--7314c"};
 
 export { styles as default };

package/dist/lib-esm/small-list-item/small-list.js

@@ -10,7 +10,6 @@ const SmallList = /*#__PURE__*/forwardRef(function SmallList(props, forwardedRef
   return jsx(BaseGridList, {
     ...rest,
     ref: forwardedRef,
-    "data-modern": 'true' ,
     layoutStyle: "small-list",
     children: children
   });

package/dist/lib-esm/util-components/base-grid-list-item/base-grid-list-item.module.js

@@ -1,4 +1,4 @@
 import '../../index.css';
-var styles = {"smallList":"bp_base_grid_list_item_module_smallList--e6f7b","smallListItem":"bp_base_grid_list_item_module_smallListItem--e6f7b","header":"bp_base_grid_list_item_module_header--e6f7b","subtitle":"bp_base_grid_list_item_module_subtitle--e6f7b","loading":"bp_base_grid_list_item_module_loading--e6f7b","thumbnail":"bp_base_grid_list_item_module_thumbnail--e6f7b","thumbnailContent":"bp_base_grid_list_item_module_thumbnailContent--e6f7b","actions":"bp_base_grid_list_item_module_actions--e6f7b","selection":"bp_base_grid_list_item_module_selection--e6f7b","inner":"bp_base_grid_list_item_module_inner--e6f7b","actionsCheckboxWrapper":"bp_base_grid_list_item_module_actionsCheckboxWrapper--e6f7b","largeList":"bp_base_grid_list_item_module_largeList--e6f7b","largeListItem":"bp_base_grid_list_item_module_largeListItem--e6f7b","fade":"bp_base_grid_list_item_module_fade--e6f7b","description":"bp_base_grid_list_item_module_description--e6f7b","snippet":"bp_base_grid_list_item_module_snippet--e6f7b","snippetContent":"bp_base_grid_list_item_module_snippetContent--e6f7b","gridList":"bp_base_grid_list_item_module_gridList--e6f7b","gridListItem":"bp_base_grid_list_item_module_gridListItem--e6f7b","statusPin":"bp_base_grid_list_item_module_statusPin--e6f7b","isItemInteracted":"bp_base_grid_list_item_module_isItemInteracted--e6f7b","tooltipContent":"bp_base_grid_list_item_module_tooltipContent--e6f7b","tooltipArrow":"bp_base_grid_list_item_module_tooltipArrow--e6f7b","gridListV2":"bp_base_grid_list_item_module_gridListV2--e6f7b","gridListV2Item":"bp_base_grid_list_item_module_gridListV2Item--e6f7b","noActions":"bp_base_grid_list_item_module_noActions--e6f7b","thumbnailBadges":"bp_base_grid_list_item_module_thumbnailBadges--e6f7b","statusBadge":"bp_base_grid_list_item_module_statusBadge--e6f7b","fileTypePill":"bp_base_grid_list_item_module_fileTypePill--e6f7b","textCentered":"bp_base_grid_list_item_module_textCentered--e6f7b","innerCentered":"bp_base_grid_list_item_module_innerCentered--e6f7b","gridListV2Small":"bp_base_grid_list_item_module_gridListV2Small--e6f7b","gridListV2XSmall":"bp_base_grid_list_item_module_gridListV2XSmall--e6f7b","gridListV2XSmallBordered":"bp_base_grid_list_item_module_gridListV2XSmallBordered--e6f7b","gridV2ClickShield":"bp_base_grid_list_item_module_gridV2ClickShield--e6f7b","listV2ClickShield":"bp_base_grid_list_item_module_listV2ClickShield--e6f7b","listV2":"bp_base_grid_list_item_module_listV2--e6f7b","listV2Item":"bp_base_grid_list_item_module_listV2Item--e6f7b","listV2Divider":"bp_base_grid_list_item_module_listV2Divider--e6f7b","content":"bp_base_grid_list_item_module_content--e6f7b","staticList":"bp_base_grid_list_item_module_staticList--e6f7b","staticListItem":"bp_base_grid_list_item_module_staticListItem--e6f7b"};
+var styles = {"smallList":"bp_base_grid_list_item_module_smallList--1c940","smallListItem":"bp_base_grid_list_item_module_smallListItem--1c940","loading":"bp_base_grid_list_item_module_loading--1c940","thumbnail":"bp_base_grid_list_item_module_thumbnail--1c940","thumbnailContent":"bp_base_grid_list_item_module_thumbnailContent--1c940","header":"bp_base_grid_list_item_module_header--1c940","subtitle":"bp_base_grid_list_item_module_subtitle--1c940","actions":"bp_base_grid_list_item_module_actions--1c940","selection":"bp_base_grid_list_item_module_selection--1c940","inner":"bp_base_grid_list_item_module_inner--1c940","actionsCheckboxWrapper":"bp_base_grid_list_item_module_actionsCheckboxWrapper--1c940","largeList":"bp_base_grid_list_item_module_largeList--1c940","largeListItem":"bp_base_grid_list_item_module_largeListItem--1c940","fade":"bp_base_grid_list_item_module_fade--1c940","description":"bp_base_grid_list_item_module_description--1c940","snippet":"bp_base_grid_list_item_module_snippet--1c940","snippetContent":"bp_base_grid_list_item_module_snippetContent--1c940","gridList":"bp_base_grid_list_item_module_gridList--1c940","gridListItem":"bp_base_grid_list_item_module_gridListItem--1c940","statusPin":"bp_base_grid_list_item_module_statusPin--1c940","isItemInteracted":"bp_base_grid_list_item_module_isItemInteracted--1c940","tooltipContent":"bp_base_grid_list_item_module_tooltipContent--1c940","tooltipArrow":"bp_base_grid_list_item_module_tooltipArrow--1c940","gridListV2":"bp_base_grid_list_item_module_gridListV2--1c940","gridListV2Item":"bp_base_grid_list_item_module_gridListV2Item--1c940","noActions":"bp_base_grid_list_item_module_noActions--1c940","thumbnailBadges":"bp_base_grid_list_item_module_thumbnailBadges--1c940","statusBadge":"bp_base_grid_list_item_module_statusBadge--1c940","fileTypePill":"bp_base_grid_list_item_module_fileTypePill--1c940","textCentered":"bp_base_grid_list_item_module_textCentered--1c940","innerCentered":"bp_base_grid_list_item_module_innerCentered--1c940","gridListV2Small":"bp_base_grid_list_item_module_gridListV2Small--1c940","gridListV2XSmall":"bp_base_grid_list_item_module_gridListV2XSmall--1c940","gridListV2XSmallBordered":"bp_base_grid_list_item_module_gridListV2XSmallBordered--1c940","gridV2ClickShield":"bp_base_grid_list_item_module_gridV2ClickShield--1c940","listV2ClickShield":"bp_base_grid_list_item_module_listV2ClickShield--1c940","listV2":"bp_base_grid_list_item_module_listV2--1c940","listV2Item":"bp_base_grid_list_item_module_listV2Item--1c940","listV2Divider":"bp_base_grid_list_item_module_listV2Divider--1c940","content":"bp_base_grid_list_item_module_content--1c940","staticList":"bp_base_grid_list_item_module_staticList--1c940","staticListItem":"bp_base_grid_list_item_module_staticListItem--1c940"};
 
 export { styles as default };

package/dist/lib-esm/util-components/base-grid-list-item/base-grid-list.js

@@ -106,7 +106,6 @@ const BaseGridList = /*#__PURE__*/forwardRef(function BaseGridList(props, forwar
         ...rest,
         ref: forwardedRef,
         className: clsx(layoutStyleClass, variantClass, className),
-        "data-modern": 'true' ,
         layout: layoutFinal,
         ...(ownsAction ? {} : {
           onAction: handleOnAction

package/dist/lib-esm/util-components/base-grid-list-item/utils/rac-tooltip.js

@@ -1,6 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { useMemo } from 'react';
 import { Tooltip, OverlayArrow } from 'react-aria-components';
 import styles from '../base-grid-list-item.module.js';
 
@@ -8,11 +7,8 @@ const RACTooltip = ({
   children,
   ...props
 }) => {
-  const enableModernizedComponents = true;
-  const fill = useMemo(() => 'var(--bp-gray-100)' , [enableModernizedComponents]);
   return jsxs(Tooltip, {
     className: clsx(styles.tooltipContent),
-    "data-modern": 'true' ,
     offset: 3,
     placement: "bottom",
     ...props,
@@ -24,7 +20,7 @@ const RACTooltip = ({
         xmlns: "http://www.w3.org/2000/svg",
         children: jsx("path", {
           d: "m8.5 0-8 8h16l-8-8Z",
-          fill: fill
+          fill: "var(--bp-gray-100)"
         })
       })
     }), children]

package/dist/lib-esm/util-components/list-checkbox/list-checkbox.js

@@ -16,7 +16,6 @@ import styles from './list-checkbox.module.js';
 const ListCheckbox = /*#__PURE__*/forwardRef((props, ref) => {
   return jsx("div", {
     className: clsx(styles.selection, props.className),
-    "data-modern": 'true' ,
     children: jsx(Checkbox, {
       ...props,
       ref: ref,

package/dist/lib-esm/util-components/list-checkbox/list-checkbox.module.js

@@ -1,4 +1,4 @@
 import '../../index.css';
-var styles = {"selection":"bp_list_checkbox_module_selection--711bf","checkbox":"bp_list_checkbox_module_checkbox--711bf"};
+var styles = {"selection":"bp_list_checkbox_module_selection--6d182","checkbox":"bp_list_checkbox_module_checkbox--6d182"};
 
 export { styles as default };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "17.15.4",
+    "version": "17.17.0",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
@@ -55,7 +55,7 @@
     "dependencies": {
         "@ariakit/react": "0.4.21",
         "@ariakit/react-core": "0.4.21",
-        "@box/blueprint-web-assets": "^5.10.26",
+        "@box/blueprint-web-assets": "^5.10.28",
         "@internationalized/date": "^3.12.0",
         "@radix-ui/react-accordion": "1.1.2",
         "@radix-ui/react-checkbox": "1.0.4",
@@ -86,7 +86,7 @@
     "devDependencies": {
         "@box/box-test-client": "^3.2.7",
         "@box/playwright-utils": "^2.8.5",
-        "@box/storybook-utils": "^1.2.70",
+        "@box/storybook-utils": "^1.2.72",
         "@figma/code-connect": "1.4.4",
         "@playwright/test": "1.46.1",
         "@types/js-yaml": "^4.0.9",