@box/blueprint-web 17.20.1 → 17.21.0

package/dist/lib-esm/primitives/base-text-input/base-text-input.js

@@ -1,5 +1,4 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import '@box/blueprint-web-assets/icons/Fill';
 import { AlertCircle } from '@box/blueprint-web-assets/icons/Medium';
 import { IconIconErrorOnLight } from '@box/blueprint-web-assets/tokens/tokens';
 import clsx from 'clsx';
@@ -77,7 +76,6 @@ const BaseTextInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
       [styles.error]: shouldMarkError
     }, className),
     "data-bp-animated": animatedDataAttribute ?? 'false',
-    "data-modern": 'true' ,
     children: [jsx(Label, {
       className: clsx([styles.label], {
         [styles.hidden]: hideLabel
@@ -115,7 +113,7 @@ const BaseTextInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
             className: clsx(styles.endIcon, styles.inlineErrorIcon),
             children: jsx(AlertCircle, {
               color: IconIconErrorOnLight
-            }) 
+            })
           })
         }), jsx(VisuallyHidden, {
           id: inlineErrorId,

package/dist/lib-esm/primitives/base-text-input/base-text-input.module.js

@@ -1,4 +1,4 @@
 import '../../index.css';
-var styles = {"textInputContainerOuter":"bp_base_text_input_module_textInputContainerOuter--5212e","label":"bp_base_text_input_module_label--5212e","textInputContainer":"bp_base_text_input_module_textInputContainer--5212e","textInput":"bp_base_text_input_module_textInput--5212e","hidden":"bp_base_text_input_module_hidden--5212e","error":"bp_base_text_input_module_error--5212e","readOnly":"bp_base_text_input_module_readOnly--5212e","endIcon":"bp_base_text_input_module_endIcon--5212e","startIcon":"bp_base_text_input_module_startIcon--5212e","inlineErrorIcon":"bp_base_text_input_module_inlineErrorIcon--5212e","disabled":"bp_base_text_input_module_disabled--5212e","inlineError":"bp_base_text_input_module_inlineError--5212e","subtext":"bp_base_text_input_module_subtext--5212e"};
+var styles = {"textInputContainerOuter":"bp_base_text_input_module_textInputContainerOuter--eee42","label":"bp_base_text_input_module_label--eee42","hidden":"bp_base_text_input_module_hidden--eee42","textInputContainer":"bp_base_text_input_module_textInputContainer--eee42","textInput":"bp_base_text_input_module_textInput--eee42","error":"bp_base_text_input_module_error--eee42","readOnly":"bp_base_text_input_module_readOnly--eee42","endIcon":"bp_base_text_input_module_endIcon--eee42","startIcon":"bp_base_text_input_module_startIcon--eee42","inlineErrorIcon":"bp_base_text_input_module_inlineErrorIcon--eee42","disabled":"bp_base_text_input_module_disabled--eee42","inlineError":"bp_base_text_input_module_inlineError--eee42","subtext":"bp_base_text_input_module_subtext--eee42"};
 
 export { styles as default };

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

@@ -71,7 +71,6 @@ const SelectMenuGridOption = /*#__PURE__*/forwardRef((props, forwardedRef) => {
         [styles.active]: isButtonActive,
         [styles.dragging]: isButtonDragged
       }),
-      "data-modern": 'true' ,
       disabled: isButtonDisabled,
       children: [variant === 'colorCircle' && jsx(ColorSwatch, {
         color: color || '',
@@ -89,7 +88,6 @@ const SelectMenuGridOption = /*#__PURE__*/forwardRef((props, forwardedRef) => {
       [styles.withLabel]: isWithLabel,
       [styles['withLabel--default']]: isWithLabel && props.size === 'default'
     }),
-    "data-modern": 'true' ,
     role: "gridcell",
     children: [shouldShowTooltip && jsx(Tooltip, {
       "aria-hidden": true,
@@ -138,14 +136,14 @@ const Icon = ({
     })
   });
 };
-const iconColorModern = {
+const iconColor = {
   default: bpIconIconOnLight,
   box: BrandBoxPrimary,
   sign: BrandSignPrimary,
   forms: BrandFormsPrimary,
   docgen: BrandDocgenPrimary
 };
-const iconSizeModern = {
+const iconSize = {
   default: bpSize040,
   large: bpSize050
 };
@@ -157,9 +155,9 @@ const ItemWithLabel = ({
   icon
 }) => {
   const iconElement = /*#__PURE__*/createElement(icon, {
-    color: iconColorModern[colorVariant] ,
-    width: iconSizeModern[size] ,
-    height: iconSizeModern[size] ,
+    color: iconColor[colorVariant],
+    width: iconSize[size],
+    height: iconSize[size],
     role: 'presentation'
   });
   return jsxs(Fragment, {

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--fd3e3","withLabel":"bp_select_menu_grid_option_module_withLabel--fd3e3","withLabel--default":"bp_select_menu_grid_option_module_withLabel--default--fd3e3","optionButton":"bp_select_menu_grid_option_module_optionButton--fd3e3","labeled":"bp_select_menu_grid_option_module_labeled--fd3e3","labelContent":"bp_select_menu_grid_option_module_labelContent--fd3e3","labelContent--withDescription":"bp_select_menu_grid_option_module_labelContent--withDescription--fd3e3","text":"bp_select_menu_grid_option_module_text--fd3e3","text--large":"bp_select_menu_grid_option_module_text--large--fd3e3","text--default":"bp_select_menu_grid_option_module_text--default--fd3e3","description":"bp_select_menu_grid_option_module_description--fd3e3","iconContainer":"bp_select_menu_grid_option_module_iconContainer--fd3e3","iconContainer--size-default":"bp_select_menu_grid_option_module_iconContainer--size-default--fd3e3","iconContainer--size-large":"bp_select_menu_grid_option_module_iconContainer--size-large--fd3e3","iconContainer--default":"bp_select_menu_grid_option_module_iconContainer--default--fd3e3","iconContainer--box":"bp_select_menu_grid_option_module_iconContainer--box--fd3e3","iconContainer--docgen":"bp_select_menu_grid_option_module_iconContainer--docgen--fd3e3","iconContainer--forms":"bp_select_menu_grid_option_module_iconContainer--forms--fd3e3","iconContainer--sign":"bp_select_menu_grid_option_module_iconContainer--sign--fd3e3","active":"bp_select_menu_grid_option_module_active--fd3e3","dragging":"bp_select_menu_grid_option_module_dragging--fd3e3","labeled--large":"bp_select_menu_grid_option_module_labeled--large--fd3e3","disabled":"bp_select_menu_grid_option_module_disabled--fd3e3","square":"bp_select_menu_grid_option_module_square--fd3e3","outlineHost":"bp_select_menu_grid_option_module_outlineHost--fd3e3","circle":"bp_select_menu_grid_option_module_circle--fd3e3","loading":"bp_select_menu_grid_option_module_loading--fd3e3","color":"bp_select_menu_grid_option_module_color--fd3e3","strikeThrough":"bp_select_menu_grid_option_module_strikeThrough--fd3e3"};
+var styles = {"buttonWrapper":"bp_select_menu_grid_option_module_buttonWrapper--84a39","withLabel":"bp_select_menu_grid_option_module_withLabel--84a39","withLabel--default":"bp_select_menu_grid_option_module_withLabel--default--84a39","optionButton":"bp_select_menu_grid_option_module_optionButton--84a39","labeled":"bp_select_menu_grid_option_module_labeled--84a39","labelContent":"bp_select_menu_grid_option_module_labelContent--84a39","labelContent--withDescription":"bp_select_menu_grid_option_module_labelContent--withDescription--84a39","text":"bp_select_menu_grid_option_module_text--84a39","text--large":"bp_select_menu_grid_option_module_text--large--84a39","text--default":"bp_select_menu_grid_option_module_text--default--84a39","description":"bp_select_menu_grid_option_module_description--84a39","iconContainer":"bp_select_menu_grid_option_module_iconContainer--84a39","iconContainer--size-default":"bp_select_menu_grid_option_module_iconContainer--size-default--84a39","iconContainer--size-large":"bp_select_menu_grid_option_module_iconContainer--size-large--84a39","iconContainer--default":"bp_select_menu_grid_option_module_iconContainer--default--84a39","iconContainer--box":"bp_select_menu_grid_option_module_iconContainer--box--84a39","iconContainer--docgen":"bp_select_menu_grid_option_module_iconContainer--docgen--84a39","iconContainer--forms":"bp_select_menu_grid_option_module_iconContainer--forms--84a39","iconContainer--sign":"bp_select_menu_grid_option_module_iconContainer--sign--84a39","active":"bp_select_menu_grid_option_module_active--84a39","dragging":"bp_select_menu_grid_option_module_dragging--84a39","labeled--large":"bp_select_menu_grid_option_module_labeled--large--84a39","disabled":"bp_select_menu_grid_option_module_disabled--84a39","square":"bp_select_menu_grid_option_module_square--84a39","outlineHost":"bp_select_menu_grid_option_module_outlineHost--84a39","circle":"bp_select_menu_grid_option_module_circle--84a39","loading":"bp_select_menu_grid_option_module_loading--84a39","color":"bp_select_menu_grid_option_module_color--84a39","strikeThrough":"bp_select_menu_grid_option_module_strikeThrough--84a39"};
 
 export { styles as default };

package/dist/lib-esm/search-input/search-input-controlled/search-input-controlled.js

@@ -1,5 +1,4 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
-import '@box/blueprint-web-assets/icons/Fill';
+import { jsxs, jsx } from 'react/jsx-runtime';
 import { Search } from '@box/blueprint-web-assets/icons/Medium';
 import { IconCtaIcon, IconIconOnLightSecondary } from '@box/blueprint-web-assets/tokens/tokens';
 import clsx from 'clsx';
@@ -29,7 +28,6 @@ const SearchInputControlled = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     variant,
     ...rest
   } = props;
-  const enableModernizedComponents = true;
   const handleIEMComposition = e => {
     if (e.nativeEvent.isComposing) {
       e.preventDefault();
@@ -67,22 +65,16 @@ const SearchInputControlled = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     'aria-label': searchInputClearAriaLabel,
     className: clsx(styles.clearSearchIcon, isGlobal && styles.global, isGlobal && !showActionButton && styles.withoutActionButton),
     color: IconCtaIcon,
-    icon: isGlobal ? () => jsx(AccessibleXMarkGlobal, {
-      enableModernizedComponents: enableModernizedComponents
-    }) : () => jsx(AccessibleXMark, {
-      enableModernizedComponents: enableModernizedComponents
-    }),
+    icon: isGlobal ? AccessibleXMarkGlobal : AccessibleXMark,
     onClick: onClearInput,
     size: 'x-small'
-  }), [isGlobal, onClearInput, searchInputClearAriaLabel, showActionButton, enableModernizedComponents]);
+  }), [isGlobal, onClearInput, searchInputClearAriaLabel, showActionButton]);
   const CustomStartIconComponent = useMemo(() => startIcon && /*#__PURE__*/cloneElement(startIcon, {
     className: clsx(startIcon.props?.className, styles.searchIcon, isGlobal && styles.global)
   }), [startIcon, isGlobal]);
-  const Search$1 = useMemo(() => Search , [enableModernizedComponents]);
   return jsxs("div", {
     className: clsx(styles.search, disabled && styles.disabled, className),
-    "data-modern": 'true' ,
-    children: [startIcon ? CustomStartIconComponent : jsx(Search$1, {
+    children: [startIcon ? CustomStartIconComponent : jsx(Search, {
       "aria-hidden": "true",
       className: clsx(styles.searchIcon, isGlobal && styles.global),
       color: IconIconOnLightSecondary

package/dist/lib-esm/search-input/search-input.d.ts

@@ -1,10 +1,6 @@
 import { type SearchInputProps } from './types';
-export declare const AccessibleXMark: ({ enableModernizedComponents }: {
-    enableModernizedComponents: boolean;
-}) => import("react/jsx-runtime").JSX.Element;
-export declare const AccessibleXMarkGlobal: ({ enableModernizedComponents }: {
-    enableModernizedComponents: boolean;
-}) => import("react/jsx-runtime").JSX.Element;
+export declare const AccessibleXMark: () => import("react/jsx-runtime").JSX.Element;
+export declare const AccessibleXMarkGlobal: () => import("react/jsx-runtime").JSX.Element;
 /**
  * @deprecated This uncontrolled version of SearchInput is deprecated.
  * Currently, we have two SearchInput components: SearchInput and SearchInput.Controlled. In the future, both will be deprecated and replaced

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

@@ -1,5 +1,4 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { XMark as XMark$1 } from '@box/blueprint-web-assets/icons/Fill';
 import { Search, XMark } from '@box/blueprint-web-assets/icons/Medium';
 import { IconIconOnLightSecondary, IconCtaIcon } from '@box/blueprint-web-assets/tokens/tokens';
 import clsx from 'clsx';
@@ -8,33 +7,23 @@ import { IconButton } from '../primitives/icon-button/icon-button.js';
 import { switchCase } from '../utils/switchCase.js';
 import styles from './search.module.js';
 
-const AccessibleXMark = ({
-  enableModernizedComponents
-}) => {
-  const XMark$2 = enableModernizedComponents ? XMark : XMark$1;
-  return jsx(XMark$2, {
+const AccessibleXMark = () => {
+  return jsx(XMark, {
     role: "presentation"
   });
 };
-const AccessibleXMarkGlobal = ({
-  enableModernizedComponents
-}) => {
-  const XMark$2 = enableModernizedComponents ? XMark : XMark$1;
-  return jsx(XMark$2, {
+const AccessibleXMarkGlobal = () => {
+  return jsx(XMark, {
     height: "1.25rem",
     role: "presentation",
     width: "1.25rem"
   });
 };
-const getClearIcon = (isGlobal, enableModernizedComponents) => {
+const getClearIcon = isGlobal => {
   if (isGlobal) {
-    return () => jsx(AccessibleXMarkGlobal, {
-      enableModernizedComponents: enableModernizedComponents
-    });
+    return AccessibleXMarkGlobal;
   }
-  return () => jsx(AccessibleXMark, {
-    enableModernizedComponents: enableModernizedComponents
-  });
+  return AccessibleXMark;
 };
 const handleEnterKey = (event, searchValue, onSubmit) => {
   event.preventDefault();
@@ -76,7 +65,6 @@ const SearchInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     variant,
     ...rest
   } = props;
-  const enableModernizedComponents = true;
   const [searchInputValue, setSearchInputValue] = useState(defaultValue);
   const updateSearchValue = useCallback(value => {
     setSearchInputValue(value);
@@ -101,12 +89,10 @@ const SearchInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   };
   const isGlobal = variant === 'global';
   const showActionButton = Children.count(children) > 0;
-  const Search$1 = Search ;
-  const ClearIcon = useCallback(() => getClearIcon(isGlobal, enableModernizedComponents)(), [isGlobal, enableModernizedComponents]);
+  const ClearIcon = useCallback(() => getClearIcon(isGlobal)(), [isGlobal]);
   return jsxs("div", {
     className: clsx(styles.search, disabled && styles.disabled, className),
-    "data-modern": 'true' ,
-    children: [jsx(Search$1, {
+    children: [jsx(Search, {
       "aria-hidden": "true",
       className: clsx(styles.searchIcon, isGlobal && styles.global),
       color: IconIconOnLightSecondary

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

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"search":"bp_search_module_search--2493a","searchInput":"bp_search_module_searchInput--2493a","disabled":"bp_search_module_disabled--2493a","searchIcon":"bp_search_module_searchIcon--2493a","global":"bp_search_module_global--2493a","withoutActionButton":"bp_search_module_withoutActionButton--2493a","withActionButton":"bp_search_module_withActionButton--2493a","clearSearchIcon":"bp_search_module_clearSearchIcon--2493a","actionButton":"bp_search_module_actionButton--2493a"};
+var styles = {"search":"bp_search_module_search--371c1","disabled":"bp_search_module_disabled--371c1","searchIcon":"bp_search_module_searchIcon--371c1","global":"bp_search_module_global--371c1","searchInput":"bp_search_module_searchInput--371c1","withoutActionButton":"bp_search_module_withoutActionButton--371c1","withActionButton":"bp_search_module_withActionButton--371c1","clearSearchIcon":"bp_search_module_clearSearchIcon--371c1","actionButton":"bp_search_module_actionButton--371c1"};
 
 export { styles as default };

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

@@ -1,6 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { Checkmark } from '@box/blueprint-web-assets/icons/Fill';
-import { PencilCrossed, ChevronDown } from '@box/blueprint-web-assets/icons/Medium';
+import { PencilCrossed, ChevronDown, Checkmark } from '@box/blueprint-web-assets/icons/Medium';
 import { bpSize030, bpIconIconOnLight } from '@box/blueprint-web-assets/tokens/tokens';
 import * as ScrollArea from '@radix-ui/react-scroll-area';
 import * as SelectPrimitive from '@radix-ui/react-select';
@@ -106,28 +105,19 @@ const Root = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const ariaDescribedBy = clsx(triggerProps['aria-describedby'], {
     [inlineErrorId]: hasError
   });
-  const icon = (() => {
-    if (readonly) {
-      const PencilCrossedIcon = PencilCrossed ;
-      return jsx(PencilCrossedIcon, {
-        className: styles.iconPencilCrossed
-      });
-    }
-    {
-      return jsx(ChevronDown, {
-        className: styles.iconCaret,
-        color: bpIconIconOnLight,
-        height: bpSize030,
-        width: bpSize030
-      });
-    }
-  })();
+  const icon = readonly ? jsx(PencilCrossed, {
+    className: styles.iconPencilCrossed
+  }) : jsx(ChevronDown, {
+    className: styles.iconCaret,
+    color: bpIconIconOnLight,
+    height: bpSize030,
+    width: bpSize030
+  });
   return jsxs("div", {
     className: clsx(styles.container, {
       [styles.disabled]: disabled
     }, className),
     "data-bp-animated": isAnimationEnabled ? 'true' : 'false',
-    "data-modern": 'true' ,
     children: [shouldShowInfoBadge ? jsx(TextWithInfoBadge, {
       infoBadgeAriaLabel: labelInfoBadgeAriaLabel,
       infoText: labelInfoText,
@@ -249,7 +239,6 @@ const Content = /*#__PURE__*/forwardRef((props, forwardedRef) => {
       className: clsx(styles.content, className),
       "data-bp-animated": isAnimationEnabled ? 'true' : 'false',
       "data-bp-exiting": hasExitStyles ? 'true' : 'false',
-      "data-modern": 'true' ,
       onAnimationEnd: composeEventHandlers(onAnimationEndProp, handleExitAnimationEvent, {
         checkForDefaultPrevented: false
       }),

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

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"container":"bp_select_module_container--907f0","label":"bp_select_module_label--907f0","triggerBtn":"bp_select_module_triggerBtn--907f0","ellipsis":"bp_select_module_ellipsis--907f0","disabled":"bp_select_module_disabled--907f0","triggerValue":"bp_select_module_triggerValue--907f0","triggerLeftElement":"bp_select_module_triggerLeftElement--907f0","readonly":"bp_select_module_readonly--907f0","error":"bp_select_module_error--907f0","iconWrapper":"bp_select_module_iconWrapper--907f0","iconCaret":"bp_select_module_iconCaret--907f0","iconPencilCrossed":"bp_select_module_iconPencilCrossed--907f0","content":"bp_select_module_content--907f0","viewport":"bp_select_module_viewport--907f0","option":"bp_select_module_option--907f0","secondaryText":"bp_select_module_secondaryText--907f0","textWrapper":"bp_select_module_textWrapper--907f0","leftElement":"bp_select_module_leftElement--907f0","hasLeftElement":"bp_select_module_hasLeftElement--907f0","indicator":"bp_select_module_indicator--907f0","separator":"bp_select_module_separator--907f0","withTruncatedText":"bp_select_module_withTruncatedText--907f0"};
+var styles = {"ellipsis":"bp_select_module_ellipsis--b5f00","container":"bp_select_module_container--b5f00","disabled":"bp_select_module_disabled--b5f00","label":"bp_select_module_label--b5f00","triggerBtn":"bp_select_module_triggerBtn--b5f00","triggerValue":"bp_select_module_triggerValue--b5f00","triggerLeftElement":"bp_select_module_triggerLeftElement--b5f00","readonly":"bp_select_module_readonly--b5f00","error":"bp_select_module_error--b5f00","iconWrapper":"bp_select_module_iconWrapper--b5f00","iconCaret":"bp_select_module_iconCaret--b5f00","iconPencilCrossed":"bp_select_module_iconPencilCrossed--b5f00","content":"bp_select_module_content--b5f00","viewport":"bp_select_module_viewport--b5f00","option":"bp_select_module_option--b5f00","secondaryText":"bp_select_module_secondaryText--b5f00","textWrapper":"bp_select_module_textWrapper--b5f00","leftElement":"bp_select_module_leftElement--b5f00","hasLeftElement":"bp_select_module_hasLeftElement--b5f00","indicator":"bp_select_module_indicator--b5f00","separator":"bp_select_module_separator--b5f00","withTruncatedText":"bp_select_module_withTruncatedText--b5f00"};
 
 export { styles as default };

package/dist/lib-esm/switch/switch-item.js

@@ -37,7 +37,6 @@ const Switch = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     className: clsx([styles.option], {
       [styles.disabled]: disabled
     }, className),
-    "data-modern": 'true' ,
     "data-bp-animated": isAnimationEnabled ? 'true' : 'false',
     children: [jsxs("label", {
       className: clsx(styles.label, {

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

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"option":"bp_switch_module_option--a5dd4","label":"bp_switch_module_label--a5dd4","rightAlign":"bp_switch_module_rightAlign--a5dd4","switch":"bp_switch_module_switch--a5dd4","description":"bp_switch_module_description--a5dd4","thumb":"bp_switch_module_thumb--a5dd4"};
+var styles = {"option":"bp_switch_module_option--8afb1","label":"bp_switch_module_label--8afb1","rightAlign":"bp_switch_module_rightAlign--8afb1","switch":"bp_switch_module_switch--8afb1","description":"bp_switch_module_description--8afb1","thumb":"bp_switch_module_thumb--8afb1"};
 
 export { styles as default };

package/dist/lib-esm/text-area/text-area-autosize/text-area-autosize.js

@@ -61,7 +61,6 @@ const TextAreaAutosize = /*#__PURE__*/forwardRef(function TextAreaAutosize(props
     'data-bp-animated': animatedDataAttribute,
     ...rest
   } = props;
-  const enableModernizedComponents = true;
   const {
     current: isControlled
   } = useRef(value != null);
@@ -233,10 +232,9 @@ const TextAreaAutosize = /*#__PURE__*/forwardRef(function TextAreaAutosize(props
     setIsScrollbarVisible(getScrollbarWidth() > 0);
   }, []);
   const classNames = clsx([styles.textArea], {
-    [styles.error]: hasError,
-    [styles.loading]: isLoading && !enableModernizedComponents
+    [styles.error]: hasError
   });
-  const shouldCompensateScrollbar = !state.overflow && !isScrollbarVisible && (hasError || isLoading && !enableModernizedComponents);
+  const shouldCompensateScrollbar = !state.overflow && !isScrollbarVisible && hasError;
   const endIcon = useMemo(() => {
     if (isLoading) {
       return jsx("div", {
@@ -254,7 +252,7 @@ const TextAreaAutosize = /*#__PURE__*/forwardRef(function TextAreaAutosize(props
       });
     }
     return null;
-  }, [enableModernizedComponents, isLoading, loadingAriaLabel, readOnly, focusTextArea]);
+  }, [isLoading, loadingAriaLabel, readOnly, focusTextArea]);
   const endIconComponent = useMemo(() => endIcon && /*#__PURE__*/cloneElement(endIcon, {
     ref: node => {
       if (node) {
@@ -266,7 +264,6 @@ const TextAreaAutosize = /*#__PURE__*/forwardRef(function TextAreaAutosize(props
   return jsxs("div", {
     className: clsx(styles.border, hasError && styles.hasError, readOnly && styles.readOnly, rest.disabled && styles.disabled),
     "data-bp-animated": animatedDataAttribute,
-    "data-modern": 'true' ,
     style: {
       '--end-icon-width': endIconWidth ? `${endIconWidth}px` : '0px'
     },
@@ -276,7 +273,6 @@ const TextAreaAutosize = /*#__PURE__*/forwardRef(function TextAreaAutosize(props
       className: clsx(classNames, {
         [styles.withEndIcon]: !!endIconComponent
       }, readOnly && styles.readOnly),
-      "data-modern": 'true' ,
       onBlur: onBlur,
       onChange: handleChange,
       onFocus: onFocus,
@@ -298,7 +294,6 @@ const TextAreaAutosize = /*#__PURE__*/forwardRef(function TextAreaAutosize(props
       ref: shadowRef,
       "aria-hidden": true,
       className: classNames,
-      "data-modern": 'true' ,
       readOnly: true,
       style: {
         ...hiddenTextAreaStyle.shadow,
@@ -306,7 +301,7 @@ const TextAreaAutosize = /*#__PURE__*/forwardRef(function TextAreaAutosize(props
         padding: 0
       },
       tabIndex: -1
-    }), !enableModernizedComponents, endIconComponent && jsx("div", {
+    }), endIconComponent && jsx("div", {
       className: styles.endIconWrap,
       children: endIconComponent
     })]

package/dist/lib-esm/text-area/text-area-autosize/text-area-autosize.module.js

@@ -1,4 +1,4 @@
 import '../../index.css';
-var styles = {"textArea":"bp_text_area_autosize_module_textArea--1195a","loading":"bp_text_area_autosize_module_loading--1195a","readOnly":"bp_text_area_autosize_module_readOnly--1195a","withEndIcon":"bp_text_area_autosize_module_withEndIcon--1195a","error":"bp_text_area_autosize_module_error--1195a","loadingIndicatorReset":"bp_text_area_autosize_module_loadingIndicatorReset--1195a","border":"bp_text_area_autosize_module_border--1195a","hasError":"bp_text_area_autosize_module_hasError--1195a","disabled":"bp_text_area_autosize_module_disabled--1195a","endIconWrap":"bp_text_area_autosize_module_endIconWrap--1195a","endIcon":"bp_text_area_autosize_module_endIcon--1195a"};
+var styles = {"textArea":"bp_text_area_autosize_module_textArea--341d4","withEndIcon":"bp_text_area_autosize_module_withEndIcon--341d4","error":"bp_text_area_autosize_module_error--341d4","readOnly":"bp_text_area_autosize_module_readOnly--341d4","loadingIndicatorReset":"bp_text_area_autosize_module_loadingIndicatorReset--341d4","border":"bp_text_area_autosize_module_border--341d4","hasError":"bp_text_area_autosize_module_hasError--341d4","disabled":"bp_text_area_autosize_module_disabled--341d4","endIconWrap":"bp_text_area_autosize_module_endIconWrap--341d4","endIcon":"bp_text_area_autosize_module_endIcon--341d4"};
 
 export { styles as default };

package/dist/lib-esm/text-area/text-area.js

@@ -39,7 +39,6 @@ const TextArea = /*#__PURE__*/forwardRef((props, forwardedRef) => {
       [styles.disabled]: disabled,
       [styles.error]: hasError
     }, className),
-    "data-modern": 'true' ,
     children: [jsx(Label, {
       className: clsx([styles.label], {
         [styles.hidden]: hideLabel

package/dist/lib-esm/text-area/text-area.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"textAreaContainer":"bp_text_area_module_textAreaContainer--44657","label":"bp_text_area_module_label--44657","hidden":"bp_text_area_module_hidden--44657","disabled":"bp_text_area_module_disabled--44657","inlineError":"bp_text_area_module_inlineError--44657"};
+var styles = {"textAreaContainer":"bp_text_area_module_textAreaContainer--a6410","label":"bp_text_area_module_label--a6410","hidden":"bp_text_area_module_hidden--a6410","disabled":"bp_text_area_module_disabled--a6410","inlineError":"bp_text_area_module_inlineError--a6410"};
 
 export { styles as default };

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

@@ -1,5 +1,4 @@
 import { jsx } from 'react/jsx-runtime';
-import '@box/blueprint-web-assets/icons/Fill';
 import { PencilCrossed } from '@box/blueprint-web-assets/icons/Medium';
 import clsx from 'clsx';
 import { forwardRef, useRef, useCallback, useMemo, cloneElement } from 'react';
@@ -20,7 +19,6 @@ const TextInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     loadingAriaLabel,
     ...rest
   } = props;
-  const enableModernizedComponents = true;
   const {
     componentsWithAnimationEnabled
   } = useBlueprintConfiguration();
@@ -46,14 +44,13 @@ const TextInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
       });
     }
     if (readOnly) {
-      const PencilCrossedIcon = PencilCrossed ;
-      return jsx(PencilCrossedIcon, {
+      return jsx(PencilCrossed, {
         onClick: focusInput,
         role: "presentation"
       });
     }
     return null;
-  }, [isLoading, endIcon, readOnly, loadingAriaLabel, focusInput, enableModernizedComponents]);
+  }, [isLoading, endIcon, readOnly, loadingAriaLabel, focusInput]);
   const startIconLocal = useMemo(() => {
     if (startIcon) {
       return /*#__PURE__*/cloneElement(startIcon, {

package/dist/lib-esm/text-toggle-button/text-toggle-button.js

@@ -11,8 +11,7 @@ const TextToggleButton = /*#__PURE__*/forwardRef(({
   return jsx(BaseToggleButton, {
     ...rest,
     ref: ref,
-    className: clsx(styles.textToggleButton, className),
-    "data-modern": 'true' 
+    className: clsx(styles.textToggleButton, className)
   });
 });
 TextToggleButton.displayName = 'TextToggleButton';

package/dist/lib-esm/text-toggle-button/text-toggle-button.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"textToggleButton":"bp_text_toggle_button_module_textToggleButton--e4c2c"};
+var styles = {"textToggleButton":"bp_text_toggle_button_module_textToggleButton--8e349"};
 
 export { styles as default };

package/dist/lib-esm/util-components/text-with-info-badge/text-with-info-badge.js

@@ -1,5 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { InfoBadge } from '@box/blueprint-web-assets/icons/Fill';
+import { InformationCircle } from '@box/blueprint-web-assets/icons/Medium';
 import { clsx } from 'clsx';
 import { Tooltip } from '../../tooltip/tooltip.js';
 import { InteractiveIcon } from '../interactive-icon/interactive-icon.js';
@@ -17,7 +17,6 @@ const TextWithInfoBadge = props => {
   } = props;
   return jsxs("div", {
     className: clsx(styles.text, styles[variant], className),
-    "data-modern": 'true' ,
     id: id,
     children: [children, infoText && infoBadgeAriaLabel && jsx("span", {
       className: styles.badgeContainer,
@@ -27,7 +26,7 @@ const TextWithInfoBadge = props => {
         children: jsx(InteractiveIcon, {
           "aria-label": infoBadgeAriaLabel,
           className: styles.badge,
-          icon: InfoBadge
+          icon: InformationCircle
         })
       })
     })]

package/dist/lib-esm/util-components/text-with-info-badge/text-with-info-badge.module.js

@@ -1,4 +1,4 @@
 import '../../index.css';
-var styles = {"text":"bp_text_with_info_badge_module_text--b3cdb","muted":"bp_text_with_info_badge_module_muted--b3cdb","badgeContainer":"bp_text_with_info_badge_module_badgeContainer--b3cdb","badge":"bp_text_with_info_badge_module_badge--b3cdb"};
+var styles = {"text":"bp_text_with_info_badge_module_text--40bc4","muted":"bp_text_with_info_badge_module_muted--40bc4","badgeContainer":"bp_text_with_info_badge_module_badgeContainer--40bc4","badge":"bp_text_with_info_badge_module_badge--40bc4"};
 
 export { styles as default };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "17.20.1",
+    "version": "17.21.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.7",
+        "@box/blueprint-web-assets": "^5.11.8",
         "@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.4.2",
+        "@box/storybook-utils": "^1.4.3",
         "@figma/code-connect": "1.4.4",
         "@playwright/test": "1.46.1",
         "@types/js-yaml": "^4.0.9",