@box/blueprint-web 17.19.1 → 17.20.0

package/dist/lib-esm/input-chip/input-chip.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { XMark } from '@box/blueprint-web-assets/icons/Fill';
-import { Size4 } from '@box/blueprint-web-assets/tokens/tokens';
+import { XMark } from '@box/blueprint-web-assets/icons/Medium';
+import { bpSize040 } from '@box/blueprint-web-assets/tokens/tokens';
 import clsx from 'clsx';
 import React__default, { forwardRef, useMemo, useCallback } from 'react';
 import { Text } from '../text/text.js';
@@ -32,7 +32,6 @@ const InputChip = /*#__PURE__*/forwardRef((props, ref) => {
     tabIndex: tabIndexProp,
     ...buttonProps
   } = props;
-  const enableModernizedComponents = true;
   const content = useMemo(() => ({
     avatar: avatarProp,
     label,
@@ -51,9 +50,7 @@ const InputChip = /*#__PURE__*/forwardRef((props, ref) => {
   const withSmallAvatarSize = element => {
     const cloneAvatarWithSmallSize = el => /*#__PURE__*/React__default.cloneElement(el, {
       ...el.props,
-      className: clsx(el.props.className, styles.avatar, {
-        [styles.modern]: enableModernizedComponents
-      }),
+      className: clsx(el.props.className, styles.avatar),
       size: 'small',
       'aria-hidden': 'true'
     });
@@ -88,7 +85,7 @@ const InputChip = /*#__PURE__*/forwardRef((props, ref) => {
   };
   const hasError = chipVariant === 'error';
   const variantClass = getVariantClass(chipVariant);
-  const containerClassName = clsx(styles.container, variantClass, avatar && styles.avatarContainer, canDelete && styles.deleteButton, !canDelete && enableModernizedComponents && styles.noDeleteButton, className);
+  const containerClassName = clsx(styles.container, variantClass, avatar && styles.avatarContainer, canDelete && styles.deleteButton, !canDelete && styles.noDeleteButton, className);
   return /* eslint-disable-next-line jsx-a11y/role-supports-aria-props */jsxs("button", {
     ...buttonProps,
     ref: ref,
@@ -96,7 +93,6 @@ const InputChip = /*#__PURE__*/forwardRef((props, ref) => {
     "aria-invalid": hasError,
     className: containerClassName,
     "data-bp-animated": isAnimationEnabled ? 'true' : 'false',
-    "data-modern": 'true' ,
     "data-state": presence.presenceState,
     onAnimationEnd: handleAnimationEnd,
     onKeyDown: handleKeyDown,
@@ -114,8 +110,8 @@ const InputChip = /*#__PURE__*/forwardRef((props, ref) => {
       children: jsx(XMark, {
         "aria-hidden": true,
         "data-testid": "delete-icon",
-        height: Size4,
-        width: Size4
+        height: bpSize040,
+        width: bpSize040
       })
     }))]
   });

package/dist/lib-esm/input-chip/input-chip.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"container":"bp_input_chip_module_container--cd126","avatarContainer":"bp_input_chip_module_avatarContainer--cd126","deleteButton":"bp_input_chip_module_deleteButton--cd126","noDeleteButton":"bp_input_chip_module_noDeleteButton--cd126","error":"bp_input_chip_module_error--cd126","deleteIcon":"bp_input_chip_module_deleteIcon--cd126","label":"bp_input_chip_module_label--cd126","variable":"bp_input_chip_module_variable--cd126","avatar":"bp_input_chip_module_avatar--cd126","modern":"bp_input_chip_module_modern--cd126"};
+var styles = {"container":"bp_input_chip_module_container--caf48","avatarContainer":"bp_input_chip_module_avatarContainer--caf48","deleteButton":"bp_input_chip_module_deleteButton--caf48","noDeleteButton":"bp_input_chip_module_noDeleteButton--caf48","error":"bp_input_chip_module_error--caf48","deleteIcon":"bp_input_chip_module_deleteIcon--caf48","label":"bp_input_chip_module_label--caf48","variable":"bp_input_chip_module_variable--caf48","avatar":"bp_input_chip_module_avatar--caf48"};
 
 export { styles as default };

package/dist/lib-esm/password-input/password-input.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { Hidden, Visible } from '@box/blueprint-web-assets/icons/Line';
+import { EyeCrossed, Eye } from '@box/blueprint-web-assets/icons/Medium';
 import clsx from 'clsx';
 import { forwardRef, useRef, useState, useCallback } from 'react';
 import '../blueprint-configuration-context/blueprint-configuration-context.js';
@@ -49,7 +49,7 @@ const PasswordInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
       "aria-label": iconButtonAriaLabel,
       className: styles.iconButton,
       disabled: props.disabled,
-      icon: passwordVisibleFinal ? Hidden : Visible,
+      icon: passwordVisibleFinal ? EyeCrossed : Eye,
       onClick: toggleVisibility,
       size: "small"
     }),

package/dist/lib-esm/primitives/calendar/calendar.js

@@ -1,10 +1,9 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import '@box/blueprint-web-assets/icons/Fill';
 import { ChevronLeft, ChevronRight } from '@box/blueprint-web-assets/icons/Medium';
 import { Gray65 } from '@box/blueprint-web-assets/tokens/tokens';
 import { isSameDay, today, getLocalTimeZone } from '@internationalized/date';
 import { clsx } from 'clsx';
-import { forwardRef, useMemo, useRef, useEffect } from 'react';
+import { forwardRef, useRef, useEffect } from 'react';
 import { Calendar as Calendar$1, Button, Heading, CalendarGrid, CalendarGridHeader, CalendarHeaderCell, CalendarGridBody, CalendarCell } from 'react-aria-components';
 import styles from './calendar.module.js';
 
@@ -62,15 +61,11 @@ const Calendar = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     nextMonthAriaLabel,
     ...rest
   } = props;
-  const enableModernizedComponents = true;
-  const ChevronLeftIcon = useMemo(() => ChevronLeft , [enableModernizedComponents]);
-  const ChevronRightIcon = useMemo(() => ChevronRight , [enableModernizedComponents]);
   return jsxs(Calendar$1, {
     ...rest,
     ref: forwardedRef,
     "aria-label": calendarAriaLabel,
     className: clsx(styles.calendar, className),
-    "data-modern": 'true' ,
     children: [jsxs("header", {
       className: styles.calendarHeader,
       children: [jsx(Button, {
@@ -78,7 +73,7 @@ const Calendar = /*#__PURE__*/forwardRef((props, forwardedRef) => {
         className: styles.calendarHeaderButton,
         onPressStart: continuePropagation,
         slot: "previous",
-        children: jsx(ChevronLeftIcon, {
+        children: jsx(ChevronLeft, {
           "aria-label": previousMonthAriaLabel,
           color: Gray65
         })
@@ -89,7 +84,7 @@ const Calendar = /*#__PURE__*/forwardRef((props, forwardedRef) => {
         className: styles.calendarHeaderButton,
         onPressStart: continuePropagation,
         slot: "next",
-        children: jsx(ChevronRightIcon, {
+        children: jsx(ChevronRight, {
           "aria-label": nextMonthAriaLabel,
           color: Gray65
         })

package/dist/lib-esm/primitives/calendar/calendar.module.js

@@ -1,4 +1,4 @@
 import '../../index.css';
-var styles = {"calendar":"bp_calendar_module_calendar--74524","calendarHeaderCell":"bp_calendar_module_calendarHeaderCell--74524","calendarHeaderHeading":"bp_calendar_module_calendarHeaderHeading--74524","calendarCell":"bp_calendar_module_calendarCell--74524","today":"bp_calendar_module_today--74524","calendarHeader":"bp_calendar_module_calendarHeader--74524","calendarHeaderButton":"bp_calendar_module_calendarHeaderButton--74524","calendarGrid":"bp_calendar_module_calendarGrid--74524"};
+var styles = {"calendar":"bp_calendar_module_calendar--1b820","calendarGrid":"bp_calendar_module_calendarGrid--1b820","calendarHeaderCell":"bp_calendar_module_calendarHeaderCell--1b820","calendarHeader":"bp_calendar_module_calendarHeader--1b820","calendarHeaderHeading":"bp_calendar_module_calendarHeaderHeading--1b820","calendarHeaderButton":"bp_calendar_module_calendarHeaderButton--1b820","calendarCell":"bp_calendar_module_calendarCell--1b820","today":"bp_calendar_module_today--1b820"};
 
 export { styles as default };

package/dist/lib-esm/primitives/chips/chip-dropdown-indicator.js

@@ -1,14 +1,14 @@
 import { jsx } from 'react/jsx-runtime';
-import { Caret } from '@box/blueprint-web-assets/icons/Fill';
-import { Size3 } from '@box/blueprint-web-assets/tokens/tokens';
+import { ChevronDown } from '@box/blueprint-web-assets/icons/Medium';
+import { bpSize030 } from '@box/blueprint-web-assets/tokens/tokens';
 import { forwardRef } from 'react';
 
 const ChipDropdownIndicator = /*#__PURE__*/forwardRef((_, forwardedRef) => {
-  return jsx(Caret, {
+  return jsx(ChevronDown, {
     ref: forwardedRef,
-    height: Size3,
+    height: bpSize030,
     role: "presentation",
-    width: Size3
+    width: bpSize030
   });
 });
 

package/dist/lib-esm/primitives/chips/chip.js

@@ -14,7 +14,6 @@ const Chip = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     ...rest,
     ref: forwardedRef,
     className: clsx(styles.chip, className),
-    "data-modern": 'true' ,
     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--e6fd2","chipButton":"bp_chip_module_chipButton--e6fd2","multiSelectChip":"bp_chip_module_multiSelectChip--e6fd2","chipStatus":"bp_chip_module_chipStatus--e6fd2","labelText":"bp_chip_module_labelText--e6fd2","singleSelectChip":"bp_chip_module_singleSelectChip--e6fd2","chipsGroup":"bp_chip_module_chipsGroup--e6fd2"};
+var styles = {"chip":"bp_chip_module_chip--ad68d","labelText":"bp_chip_module_labelText--ad68d","chipStatus":"bp_chip_module_chipStatus--ad68d","chipButton":"bp_chip_module_chipButton--ad68d","singleSelectChip":"bp_chip_module_singleSelectChip--ad68d","multiSelectChip":"bp_chip_module_multiSelectChip--ad68d","chipsGroup":"bp_chip_module_chipsGroup--ad68d"};
 
 export { styles as default };

package/dist/lib-esm/primitives/chips/chips-group.js

@@ -15,7 +15,6 @@ const ChipsGroup = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     ...rest,
     ref: forwardedRef,
     className: clsx([styles.chipsGroup, className]),
-    "data-modern": 'true' ,
     children: children
   });
 });

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

@@ -22,7 +22,6 @@ const RadioGroup = /*#__PURE__*/forwardRef((props, ref) => {
     className: clsx([styles.root], {
       [styles.horizontal]: orientation === 'horizontal'
     }, className),
-    "data-modern": 'true' ,
     defaultValue: defaultValue,
     loop: loop,
     name: name,

package/dist/lib-esm/radio-group/radio-group.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"root":"bp_radio_group_module_root--c45d0","horizontal":"bp_radio_group_module_horizontal--c45d0","radioOption":"bp_radio_group_module_radioOption--c45d0","label":"bp_radio_group_module_label--c45d0","description":"bp_radio_group_module_description--c45d0","disabled":"bp_radio_group_module_disabled--c45d0","radioButton":"bp_radio_group_module_radioButton--c45d0","indicator":"bp_radio_group_module_indicator--c45d0"};
+var styles = {"root":"bp_radio_group_module_root--8c22a","horizontal":"bp_radio_group_module_horizontal--8c22a","radioOption":"bp_radio_group_module_radioOption--8c22a","label":"bp_radio_group_module_label--8c22a","description":"bp_radio_group_module_description--8c22a","disabled":"bp_radio_group_module_disabled--8c22a","radioButton":"bp_radio_group_module_radioButton--8c22a","indicator":"bp_radio_group_module_indicator--8c22a"};
 
 export { styles as default };

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

@@ -50,7 +50,6 @@ const RadioTilesOption = function RadioTilesOption({
       ...wrapperProps,
       children: jsx("div", {
         className: radioTileClassNames,
-        "data-modern": 'true' ,
         "data-target-id": dataTargetId,
         children: jsxs("label", {
           className: clsx({

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--8a512","icon":"bp_radio_tiles_option_module_icon--8a512","disabled":"bp_radio_tiles_option_module_disabled--8a512","checked":"bp_radio_tiles_option_module_checked--8a512","iconOnly":"bp_radio_tiles_option_module_iconOnly--8a512","labelOnly":"bp_radio_tiles_option_module_labelOnly--8a512","radioTileLabel":"bp_radio_tiles_option_module_radioTileLabel--8a512"};
+var styles = {"radioTileOption":"bp_radio_tiles_option_module_radioTileOption--d5939","icon":"bp_radio_tiles_option_module_icon--d5939","disabled":"bp_radio_tiles_option_module_disabled--d5939","checked":"bp_radio_tiles_option_module_checked--d5939","iconOnly":"bp_radio_tiles_option_module_iconOnly--d5939","labelOnly":"bp_radio_tiles_option_module_labelOnly--d5939","radioTileLabel":"bp_radio_tiles_option_module_radioTileLabel--d5939"};
 
 export { styles as default };

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

@@ -39,7 +39,6 @@ const RadioTilesRoot = ({
     value: contextValue,
     children: jsxs("div", {
       className: styles.container,
-      "data-modern": 'true' ,
       children: [jsx("div", {
         "aria-describedby": hasError ? inlineErrorId : undefined,
         "aria-invalid": hasError || undefined,

package/dist/lib-esm/time-picker/time-picker.js

@@ -1,5 +1,4 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import '@box/blueprint-web-assets/icons/Fill';
 import { Clock, XMark } from '@box/blueprint-web-assets/icons/Medium';
 import { bpSize040, bpGray65 } from '@box/blueprint-web-assets/tokens/tokens';
 import clsx from 'clsx';
@@ -12,7 +11,7 @@ import { useControllableState } from '../utils/useControllableState.js';
 import { useUniqueId } from '../utils/useUniqueId.js';
 import styles from './time-picker.module.js';
 
-const ClearIconModern = label => () => jsx(XMark, {
+const ClearIcon = label => () => jsx(XMark, {
   "aria-label": label,
   color: bpGray65,
   height: bpSize040,
@@ -64,7 +63,6 @@ const TimePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     className: clsx(styles.timePicker, {
       [styles.disabled]: isDisabled
     }, className),
-    "data-modern": 'true' ,
     isDisabled: isDisabled,
     isInvalid: hasError,
     onChange: setTimeValue,
@@ -95,7 +93,7 @@ const TimePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
         "aria-label": clearTimePickerAriaLabel,
         className: styles.clearButton,
         disabled: isDisabled,
-        icon: ClearIconModern(clearTimePickerAriaLabel) ,
+        icon: ClearIcon(clearTimePickerAriaLabel),
         onClick: handleClearInputButtonClicked,
         onKeyDownCapture: handleClearButtonKeypress,
         size: "x-small"
@@ -105,7 +103,7 @@ const TimePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
         color: bpGray65,
         height: bpSize040,
         width: bpSize040
-      }) ]
+      })]
     }), jsx(InlineError, {
       className: styles.inlineError,
       id: inlineErrorId,

package/dist/lib-esm/time-picker/time-picker.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"timePicker":"bp_time_picker_module_timePicker--3d8a3","label":"bp_time_picker_module_label--3d8a3","group":"bp_time_picker_module_group--3d8a3","disabled":"bp_time_picker_module_disabled--3d8a3","error":"bp_time_picker_module_error--3d8a3","timeInput":"bp_time_picker_module_timeInput--3d8a3","timeInputSegment":"bp_time_picker_module_timeInputSegment--3d8a3","clearButton":"bp_time_picker_module_clearButton--3d8a3","clockIcon":"bp_time_picker_module_clockIcon--3d8a3","inlineError":"bp_time_picker_module_inlineError--3d8a3"};
+var styles = {"timePicker":"bp_time_picker_module_timePicker--96cfe","disabled":"bp_time_picker_module_disabled--96cfe","label":"bp_time_picker_module_label--96cfe","group":"bp_time_picker_module_group--96cfe","error":"bp_time_picker_module_error--96cfe","timeInput":"bp_time_picker_module_timeInput--96cfe","timeInputSegment":"bp_time_picker_module_timeInputSegment--96cfe","clearButton":"bp_time_picker_module_clearButton--96cfe","clockIcon":"bp_time_picker_module_clockIcon--96cfe","inlineError":"bp_time_picker_module_inlineError--96cfe"};
 
 export { styles as default };

package/dist/lib-esm/util-components/legend/legend.js

@@ -17,7 +17,6 @@ function Legend(props) {
   return jsxs("fieldset", {
     ...rest,
     className: clsx(styles.fieldset, styles[gap], className),
-    "data-modern": 'true' ,
     children: [shouldRenderHeader ? jsx("legend", {
       className: styles.legendContainer,
       children: jsx(TextWithInfoBadge, {

package/dist/lib-esm/util-components/legend/legend.module.js

@@ -1,4 +1,4 @@
 import '../../index.css';
-var styles = {"legendContainer":"bp_legend_module_legendContainer--8a810","fieldset":"bp_legend_module_fieldset--8a810","legend":"bp_legend_module_legend--8a810","wide":"bp_legend_module_wide--8a810"};
+var styles = {"legendContainer":"bp_legend_module_legendContainer--c8a96","fieldset":"bp_legend_module_fieldset--c8a96","legend":"bp_legend_module_legend--c8a96","wide":"bp_legend_module_wide--c8a96"};
 
 export { styles as default };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "17.19.1",
+    "version": "17.20.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.11.4",
+        "@box/blueprint-web-assets": "^5.11.6",
         "@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.3.4",
+        "@box/storybook-utils": "^1.4.1",
         "@figma/code-connect": "1.4.4",
         "@playwright/test": "1.46.1",
         "@types/js-yaml": "^4.0.9",