@box/blueprint-web 16.20.7 → 17.0.1

package/dist/lib-esm/icon-dual-state-button/icon-dual-state-button.js

@@ -3,7 +3,6 @@ import { Button } from '@ariakit/react';
 import { IconIconBlue, Size6, Size5, Size4, IconIconOnLightSecondary } from '@box/blueprint-web-assets/tokens/tokens';
 import clsx from 'clsx';
 import { forwardRef, createElement } from 'react';
-import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 import { composeEventHandlers } from '../utils/composeEventHandlers.js';
 import { useControllableState } from '../utils/useControllableState.js';
 import styles from './icon-dual-state-button.module.js';
@@ -37,9 +36,6 @@ const IconDualStateButton = /*#__PURE__*/forwardRef(({
     onChange: onPressedChange,
     defaultProp: defaultPressed
   });
-  const {
-    enableModernizedComponents
-  } = useBlueprintModernization();
   const iconSize = buttonSizeToIconSize[size];
   return jsx(Button, {
     ...rest,
@@ -49,7 +45,7 @@ const IconDualStateButton = /*#__PURE__*/forwardRef(({
       [styles.pressed]: pressed
     }),
     "data-disabled": disabled ? '' : undefined,
-    "data-modern": enableModernizedComponents ? 'true' : 'false',
+    "data-modern": 'true' ,
     "data-state": pressed ? 'on' : 'off',
     disabled: disabled,
     onClick: composeEventHandlers(onClick, () => {

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

@@ -1,16 +1,10 @@
 import { jsx } from 'react/jsx-runtime';
-import { bpSize060, bpSize050, bpSize040, Size6, Size5, Size4 } from '@box/blueprint-web-assets/tokens/tokens';
+import { bpSize060, bpSize050, bpSize040 } from '@box/blueprint-web-assets/tokens/tokens';
 import clsx from 'clsx';
 import { forwardRef, createElement } from 'react';
-import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 import { BaseToggleButton } from '../util-components/base-toggle-button/base-toggle-button.js';
 import styles from './icon-toggle-button.module.js';
 
-const iconSizeMap = {
-  'x-small': Size4,
-  small: Size5,
-  medium: Size6
-};
 const iconSizeMapModern = {
   'x-small': bpSize040,
   small: bpSize050,
@@ -23,22 +17,19 @@ const IconToggleButton = /*#__PURE__*/forwardRef(({
   size = 'medium',
   ...rest
 }, ref) => {
-  const {
-    enableModernizedComponents
-  } = useBlueprintModernization();
   return jsx(BaseToggleButton, {
     ...rest,
     ref: ref,
     className: clsx(styles.iconToggleButton, styles[variant], styles[size], className),
-    "data-modern": enableModernizedComponents ? 'true' : 'false',
+    "data-modern": 'true' ,
     children: /*#__PURE__*/createElement(icon, {
       className: styles.icon,
-      height: enableModernizedComponents ? iconSizeMapModern[size] : iconSizeMap[size],
-      width: enableModernizedComponents ? iconSizeMapModern[size] : iconSizeMap[size],
+      height: iconSizeMapModern[size] ,
+      width: iconSizeMapModern[size] ,
       role: 'presentation'
     })
   });
 });
 IconToggleButton.displayName = 'IconToggleButton';
 
-export { IconToggleButton, iconSizeMap, iconSizeMapModern };
+export { IconToggleButton, iconSizeMapModern };

package/dist/lib-esm/index.css

@@ -6950,55 +6950,56 @@
   overflow:auto;
 }
 
-.bp_data_table_module_dataTableWrapper--9a3ae{
+.bp_data_table_module_dataTableWrapper--c7392{
   --border-radius-datatable:0;
   --outline-offset-focus-and-selected-row-datatable:-0.25rem;
   --outline-select-color-datatable:#0000;
   --sticky-element-z-index:2;
   height:100%;
   overflow:auto;
+  padding-block-end:var(--bp-space-020, .5rem);
   scroll-padding:60px 100px;
   width:100%;
 }
-.bp_data_table_module_dataTableWrapper--9a3ae [data-modern=false]{
+.bp_data_table_module_dataTableWrapper--c7392 [data-modern=false]{
   --border-radius-hover-datatable:var(--radius-4);
 }
-.bp_data_table_module_dataTableWrapper--9a3ae [data-modern=true]{
+.bp_data_table_module_dataTableWrapper--c7392 [data-modern=true]{
   --border-radius-hover-datatable:var(--bp-radius-08, 1rem);
 }
-.bp_data_table_module_dataTableWrapper--9a3ae table tbody > tr[data-hovered]{
+.bp_data_table_module_dataTableWrapper--c7392 table tbody > tr[data-hovered]{
   --list-item-border-radius:var(--border-radius-hover-datatable);
   --list-item-row-border-radius:var(--list-item-border-radius);
   --list-item-first-column-item-radius:var(--list-item-border-radius) 0 0 var(--list-item-border-radius);
   --list-item-last-column-item-radius:0 var(--list-item-border-radius) var(--list-item-border-radius) 0;
 }
-.bp_data_table_module_dataTableWrapper--9a3ae.bp_data_table_module_isScrolledX--9a3ae table tbody > tr[data-hovered][data-focus-visible]{
+.bp_data_table_module_dataTableWrapper--c7392.bp_data_table_module_isScrolledX--c7392 table tbody > tr[data-hovered][data-focus-visible]{
   --list-item-border-radius:0;
   --list-item-row-border-radius:0;
   --list-item-first-column-item-radius:0;
   --list-item-last-column-item-radius:0;
 }
-.bp_data_table_module_dataTableWrapper--9a3ae table > thead > tr{
+.bp_data_table_module_dataTableWrapper--c7392 table > thead > tr{
   background:var(--gray-white);
   position:sticky;
   top:0;
   z-index:var(--sticky-element-z-index);
 }
-.bp_data_table_module_dataTableWrapper--9a3ae table > thead > tr th:first-child{
+.bp_data_table_module_dataTableWrapper--c7392 table > thead > tr th:first-child{
   background:inherit;
   height:100%;
   left:0;
   position:sticky;
   z-index:var(--sticky-element-z-index);
 }
-.bp_data_table_module_dataTableWrapper--9a3ae table > thead > tr th:first-child[data-focus-visible]{
+.bp_data_table_module_dataTableWrapper--c7392 table > thead > tr th:first-child[data-focus-visible]{
   position:sticky;
   z-index:var(--sticky-element-z-index);
 }
-.bp_data_table_module_dataTableWrapper--9a3ae table tbody > tr{
+.bp_data_table_module_dataTableWrapper--c7392 table tbody > tr{
   --is-row-focused:0;
 }
-.bp_data_table_module_dataTableWrapper--9a3ae table tbody > tr > td [data-actionswrapper]::after{
+.bp_data_table_module_dataTableWrapper--c7392 table tbody > tr > td [data-actionswrapper]::after{
   background:inherit;
   content:"";
   display:block;
@@ -7008,18 +7009,18 @@
   width:100%;
   z-index:-1;
 }
-.bp_data_table_module_dataTableWrapper--9a3ae table tbody > tr[data-focus-visible]{
+.bp_data_table_module_dataTableWrapper--c7392 table tbody > tr[data-focus-visible]{
   --outline-offset-focus-cell:var(--outline-offset-focus-row);
   --is-row-focused:1;
 }
-.bp_data_table_module_dataTableWrapper--9a3ae table tbody > tr[data-focus-visible][aria-selected=true]{
+.bp_data_table_module_dataTableWrapper--c7392 table tbody > tr[data-focus-visible][aria-selected=true]{
   --outline-offset-focus-cell:var(--outline-offset-focus-and-selected-row);
 }
 
-.bp_data_table_module_isScrolledX--9a3ae table > thead > tr > th:first-child{
+.bp_data_table_module_isScrolledX--c7392 table > thead > tr > th:first-child{
   overflow:visible;
 }
-.bp_data_table_module_isScrolledX--9a3ae table > thead > tr > th:first-child::after{
+.bp_data_table_module_isScrolledX--c7392 table > thead > tr > th:first-child::after{
   background:inherit;
   border-right:1px solid var(--border-divider-border);
   box-shadow:10px 0 7px -4px var(--item-background);
@@ -7033,7 +7034,7 @@
   z-index:-1;
 }
 
-.bp_data_table_module_hideActionWrapperRight--9a3ae table tbody > tr > td [data-actionswrapper]::after{
+.bp_data_table_module_hideActionWrapperRight--c7392 table tbody > tr > td [data-actionswrapper]::after{
   display:none;
 }
 .bp_list_checkbox_module_selection--711bf[data-modern=false]{

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

@@ -1,7 +1,6 @@
 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) => {
@@ -11,12 +10,9 @@ 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 ? 'true' : 'false',
+    "data-modern": 'true' ,
     ...rest,
     ref: ref
   });

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

@@ -3,7 +3,6 @@ import { XMark } from '@box/blueprint-web-assets/icons/Fill';
 import { Size4 } from '@box/blueprint-web-assets/tokens/tokens';
 import clsx from 'clsx';
 import React__default, { forwardRef } from 'react';
-import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 import { Text } from '../text/text.js';
 import styles from './input-chip.module.js';
 
@@ -26,9 +25,7 @@ const InputChip = /*#__PURE__*/forwardRef((props, ref) => {
     onDelete,
     ...buttonProps
   } = props;
-  const {
-    enableModernizedComponents
-  } = useBlueprintModernization();
+  const enableModernizedComponents = true;
   // Clone avatar element to override its props
   const withSmallAvatarSize = element => {
     const cloneAvatarWithSmallSize = el => /*#__PURE__*/React__default.cloneElement(el, {
@@ -66,7 +63,7 @@ const InputChip = /*#__PURE__*/forwardRef((props, ref) => {
     ref: ref,
     "aria-invalid": hasError,
     className: containerClassName,
-    "data-modern": enableModernizedComponents ? 'true' : 'false',
+    "data-modern": 'true' ,
     onKeyDown: handleKeyDown,
     type: "button",
     children: [avatar, jsx(Text, {

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

@@ -1,12 +1,11 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { ArrowUp as ArrowUp$1, ArrowDown as ArrowDown$1 } from '@box/blueprint-web-assets/icons/Fill';
+import '@box/blueprint-web-assets/icons/Fill';
 import { ArrowUp, ArrowDown } from '@box/blueprint-web-assets/icons/Medium';
-import { bpSize040, Size4, bpTextTextOnLight, TextTextOnLight } from '@box/blueprint-web-assets/tokens/tokens';
+import { bpSize040, bpTextTextOnLight } from '@box/blueprint-web-assets/tokens/tokens';
 import clsx from 'clsx';
 import { forwardRef } from 'react';
 import { useFocusRing } from 'react-aria';
 import { Column as Column$1, ColumnResizer } from 'react-aria-components';
-import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 import { Focusable } from '../focusable/focusable.js';
 import { useBreakpoint, Breakpoint } from '../utils/useBreakpoint.js';
 import { VisuallyHidden } from '../visually-hidden/visually-hidden.js';
@@ -17,28 +16,20 @@ function SortingArrowIcon({
   visibility = 'visible',
   direction
 }) {
-  const {
-    enableModernizedComponents
-  } = useBlueprintModernization();
   const props = {
-    color: enableModernizedComponents ? bpTextTextOnLight : TextTextOnLight,
-    height: enableModernizedComponents ? bpSize040 : Size4,
+    color: bpTextTextOnLight ,
+    height: bpSize040 ,
     role: 'presentation',
     visibility,
-    width: enableModernizedComponents ? bpSize040 : Size4
+    width: bpSize040 
   };
-  if (enableModernizedComponents) {
+  {
     return direction === 'up' ? jsx(ArrowUp, {
       ...props
     }) : jsx(ArrowDown, {
       ...props
     });
   }
-  return direction === 'up' ? jsx(ArrowUp$1, {
-    ...props
-  }) : jsx(ArrowDown$1, {
-    ...props
-  });
 }
 function SortIndicator({
   direction

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

@@ -2,7 +2,6 @@ import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { forwardRef } from 'react';
 import { TableHeader } from 'react-aria-components';
-import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 import styles from './main.module.js';
 
 const TableHeaderInner = (props, ref) => {
@@ -12,14 +11,11 @@ const TableHeaderInner = (props, ref) => {
     className,
     ...rest
   } = props;
-  const {
-    enableModernizedComponents
-  } = useBlueprintModernization();
   return jsx(TableHeader, {
     ...rest,
     ref: ref,
     className: clsx(styles.tableHeader, className),
-    "data-modern": enableModernizedComponents ? 'true' : 'false',
+    "data-modern": 'true' ,
     children: children
   });
 };

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

@@ -3,7 +3,6 @@ import { forwardRef, useRef } from 'react';
 import { ResizableTableContainer, Table as Table$1 } from 'react-aria-components';
 import clsx from 'clsx';
 import { noop } from '../utils/noop.js';
-import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 import styles from './main.module.js';
 import { ColumnVisibilityProvider, useColumnVisibilityContext } from './utils/column-visibility-context/columnVisibilityContext.js';
 import { TableSortingProvider, useTableSortingContext } from './utils/table-sorting-context/tableSortingContext.js';
@@ -28,9 +27,7 @@ const Table = /*#__PURE__*/forwardRef((props, ref) => {
   } = props;
   const resizableContainerRef = useRef(null);
   const dropdownHeaderContainerRef = useRef(null);
-  const {
-    enableModernizedComponents
-  } = useBlueprintModernization();
+  const enableModernizedComponents = true;
   return jsx(TableSortingProvider, {
     defaultSortDescriptor: defaultSortDescriptor,
     dropdownHeaderContainerRef: dropdownHeaderContainerRef,

package/dist/lib-esm/loading-indicator/loading-indicator.js

@@ -1,7 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { clsx } from 'clsx';
-import 'react';
-import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 import styles from './loading-indicator.module.js';
 
 function LoadingIndicator(props) {
@@ -13,15 +11,12 @@ function LoadingIndicator(props) {
     className = '',
     ...rest
   } = props;
-  const {
-    enableModernizedComponents
-  } = useBlueprintModernization();
   return jsxs("div", {
     ...rest,
     "aria-label": ariaLabel,
     "aria-live": ariaLive,
     className: clsx(styles.crawler, styles[variant], styles[size], className),
-    "data-modern": enableModernizedComponents ? 'true' : 'false',
+    "data-modern": 'true' ,
     role: "status",
     children: [jsx("div", {
       className: styles.segment

package/dist/lib-esm/modal/modal-close.js

@@ -1,10 +1,9 @@
 import { jsx } from 'react/jsx-runtime';
-import { XMark as XMark$1 } from '@box/blueprint-web-assets/icons/Fill';
+import '@box/blueprint-web-assets/icons/Fill';
 import { XMark } from '@box/blueprint-web-assets/icons/Medium';
 import * as RadixDialog from '@radix-ui/react-dialog';
 import clsx from 'clsx';
 import { forwardRef } from 'react';
-import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 import { IconButton } from '../primitives/icon-button/icon-button.js';
 import { useMedia } from '../utils/useMedia.js';
 import styles from './modal.module.js';
@@ -23,10 +22,7 @@ const ModalClose = /*#__PURE__*/forwardRef(({
   variant = 'default',
   ...rest
 }, forwardedRef) => {
-  const {
-    enableModernizedComponents
-  } = useBlueprintModernization();
-  const defaultIcon = enableModernizedComponents ? XMark : XMark$1;
+  const defaultIcon = XMark ;
   // Change IconButton size for Mobile (only when IconButton size is large)
   // TODO: change to media query tokens
   const breakpoint = 459;

package/dist/lib-esm/modal/modal-content.js

@@ -5,7 +5,6 @@ import { forwardRef } from 'react';
 import '../blueprint-configuration-context/blueprint-configuration-context.js';
 import '../blueprint-configuration-context/consts.js';
 import { useBlueprintConfiguration } from '../blueprint-configuration-context/useBlueprintConfiguration.js';
-import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 import styles from './modal.module.js';
 
 /**
@@ -20,9 +19,6 @@ const ModalContent = /*#__PURE__*/forwardRef(({
   size,
   ...props
 }, forwardedRef) => {
-  const {
-    enableModernizedComponents
-  } = useBlueprintModernization();
   const {
     componentsWithAnimationEnabled
   } = useBlueprintConfiguration();
@@ -32,7 +28,7 @@ const ModalContent = /*#__PURE__*/forwardRef(({
     children: jsx(RadixDialog.Overlay, {
       className: styles.overlay,
       "data-bp-animated": isAnimationEnabled ? 'true' : 'false',
-      "data-modern": enableModernizedComponents ? 'true' : 'false',
+      "data-modern": 'true' ,
       children: jsx(RadixDialog.Content, {
         ...props,
         ref: forwardedRef,

package/dist/lib-esm/navigation-menu/navigation-menu-content.js

@@ -1,7 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
 import { useBlueprintConfiguration } from '../blueprint-configuration-context/useBlueprintConfiguration.js';
-import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 import { DropdownMenu } from '../primitives/dropdown-menu/index.js';
 
 /**
@@ -12,9 +11,6 @@ const NavigationMenuContent = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     children,
     ...rest
   } = props;
-  const {
-    enableModernizedComponents
-  } = useBlueprintModernization();
   const {
     componentsWithAnimationEnabled
   } = useBlueprintConfiguration();
@@ -23,7 +19,7 @@ const NavigationMenuContent = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     ...rest,
     ref: forwardedRef,
     "data-bp-animated": isAnimationEnabled ? 'true' : 'false',
-    "data-modern": enableModernizedComponents ? 'true' : 'false',
+    "data-modern": 'true' ,
     children: children
   });
 });

package/dist/lib-esm/navigation-menu/navigation-menu-link.js

@@ -2,7 +2,6 @@ import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { forwardRef } from 'react';
 import { Link } from '../primitives/link/link.js';
-import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 import styles from './navigation-menu.module.js';
 
 /**
@@ -13,14 +12,11 @@ const NavigationMenuLink = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     children,
     ...rest
   } = props;
-  const {
-    enableModernizedComponents
-  } = useBlueprintModernization();
   return jsx(Link, {
     ...rest,
     ref: forwardedRef,
     className: clsx([styles.link, styles.ellipsis]),
-    "data-modern": enableModernizedComponents ? 'true' : 'false',
+    "data-modern": 'true' ,
     inheritFont: true,
     variant: "standalone",
     children: children

package/dist/lib-esm/page/page-root.js

@@ -1,7 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { forwardRef, useEffect, Children, isValidElement } from 'react';
-import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 import { useBreakpoint, Breakpoint } from '../utils/useBreakpoint.js';
 import { useRefWithEffect as useRefWithEffectMemoized } from '../utils/useRefWithEffect.js';
 import { PageProvider, usePageStore } from './page-context.js';
@@ -57,9 +56,6 @@ const PageLayout = /*#__PURE__*/forwardRef(({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
   const Slots = getChildrenForLandmarks(children);
-  const {
-    enableModernizedComponents
-  } = useBlueprintModernization();
   return jsxs("div", {
     ...rest,
     ref: setRefs,
@@ -68,7 +64,7 @@ const PageLayout = /*#__PURE__*/forwardRef(({
       [styles.pageNavigationXXLargeCollapsed]: xxLargeBreakpointActive && !navigationExpanded,
       [styles.pageMediumOrLessViewport]: breakpoint <= Breakpoint.Medium
     }, className),
-    "data-modern": enableModernizedComponents ? 'true' : 'false',
+    "data-modern": 'true' ,
     children: [Slots.Navigation, jsxs("div", {
       className: styles.pageBody,
       children: [Slots.SidePanel, jsxs("div", {

package/dist/lib-esm/primitives/base-button/base-button-icon.js

@@ -1,7 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { forwardRef, useCallback, createElement } from 'react';
-import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
 import { useBaseButtonContext } from './base-button-context.js';
 import styles from './base-button.module.js';
 import { buttonVariantToIconColorMap, getIconSize } from './utils.js';
@@ -19,9 +18,7 @@ const BaseButtonIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     buttonType,
     ariaLabel
   } = useBaseButtonContext();
-  const {
-    enableModernizedComponents
-  } = useBlueprintModernization();
+  const enableModernizedComponents = true;
   const isIconOnly = buttonType === 'icon-only';
   const renderIcon = useCallback(() => {
     if (!icon) {

package/dist/lib-esm/primitives/base-button/base-button.js

@@ -5,7 +5,6 @@ import { forwardRef, useRef, useMemo } from 'react';
 import '../../blueprint-configuration-context/blueprint-configuration-context.js';
 import '../../blueprint-configuration-context/consts.js';
 import { useBlueprintConfiguration } from '../../blueprint-configuration-context/useBlueprintConfiguration.js';
-import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
 import { LoadingIndicator } from '../../loading-indicator/loading-indicator.js';
 import { getButtonOptions } from '../../utils/getButtonOptions.js';
 import { useForkRef } from '../../utils/useForkRef.js';
@@ -37,9 +36,6 @@ const BaseButton = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     ...rest
   } = getButtonOptions(props);
   const effectiveSize = size === 'x-small' && !VALID_X_SMALL_VARIANTS.includes(variant) ? 'small' : size;
-  const {
-    enableModernizedComponents
-  } = useBlueprintModernization();
   const {
     componentsWithAnimationEnabled
   } = useBlueprintConfiguration();
@@ -58,7 +54,7 @@ const BaseButton = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     ref: useForkRef(ref, forwardedRef),
     "aria-label": loading ? undefined : ariaLabel,
     className: getButtonClassName(variant, effectiveSize, buttonType, loading, className),
-    "data-modern": enableModernizedComponents ? 'true' : 'false',
+    "data-modern": 'true' ,
     "data-bp-animated": isAnimationEnabled ? 'true' : 'false',
     children: jsxs(BaseButtonContext.Provider, {
       value: context,

package/dist/lib-esm/primitives/base-inline-notice/base-inline-notice-icon.js

@@ -1,13 +1,8 @@
 import { jsx } from 'react/jsx-runtime';
-import { bpSize050, Size5, bpIconIconOnLightSecondary, bpIconIconOnLight, IconIconOnLightSecondary, IconIconOnLight } from '@box/blueprint-web-assets/tokens/tokens';
+import { bpSize050, bpIconIconOnLightSecondary, bpIconIconOnLight } from '@box/blueprint-web-assets/tokens/tokens';
 import { forwardRef, createElement } from 'react';
-import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
 import styles from './base-inline-notice.module.js';
 
-const IconColorMap = {
-  IconIconOnLight,
-  IconIconOnLightSecondary
-};
 const IconColorModernizedMap = {
   IconIconOnLight: bpIconIconOnLight,
   IconIconOnLightSecondary: bpIconIconOnLightSecondary
@@ -19,17 +14,14 @@ const BaseInlineNoticeIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     iconColor = 'IconIconOnLight',
     ...rest
   } = props;
-  const {
-    enableModernizedComponents
-  } = useBlueprintModernization();
   if (!icon) {
     return null;
   }
-  const color = enableModernizedComponents ? IconColorModernizedMap[iconColor] : IconColorMap[iconColor];
+  const color = IconColorModernizedMap[iconColor] ;
   const iconElement = /*#__PURE__*/createElement(icon, {
     color,
-    width: enableModernizedComponents ? bpSize050 : Size5,
-    height: enableModernizedComponents ? bpSize050 : Size5,
+    width: bpSize050 ,
+    height: bpSize050 ,
     'aria-label': iconAriaLabel
   });
   return jsx("span", {

package/dist/lib-esm/primitives/base-inline-notice/base-inline-notice.js

@@ -1,7 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { forwardRef } from 'react';
-import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
 import styles from './base-inline-notice.module.js';
 
 const BaseInlineNotice = /*#__PURE__*/forwardRef((props, forwardedRef) => {
@@ -12,15 +11,12 @@ const BaseInlineNotice = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     enableContainerQueryLayout = false,
     ...rest
   } = props;
-  const {
-    enableModernizedComponents
-  } = useBlueprintModernization();
   return jsx("div", {
     ...rest,
     ref: forwardedRef,
     className: clsx(styles.noticeWrapper, styles[backgroundColor], className),
     "data-container-query-layout": enableContainerQueryLayout ? 'true' : 'false',
-    "data-modern": enableModernizedComponents ? 'true' : 'false',
+    "data-modern": 'true' ,
     children: children
   });
 });

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

@@ -1,10 +1,9 @@
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
-import { AlertBadge } from '@box/blueprint-web-assets/icons/Fill';
+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';
 import { forwardRef, useState, useMemo, cloneElement } from 'react';
-import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
 import { Focusable } from '../../focusable/focusable.js';
 import { Text } from '../../text/text.js';
 import { Tooltip } from '../../tooltip/tooltip.js';
@@ -72,16 +71,13 @@ const BaseTextInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     className: clsx(endIcon.props?.className, styles.endIcon)
   }), [endIcon]);
   const Label = useLabelable(label, inputId, required);
-  const {
-    enableModernizedComponents
-  } = useBlueprintModernization();
   return jsxs("div", {
     className: clsx(styles.textInputContainerOuter, {
       [styles.disabled]: disabled,
       [styles.error]: shouldMarkError
     }, className),
     "data-bp-animated": animatedDataAttribute ?? 'false',
-    "data-modern": enableModernizedComponents ? 'true' : 'false',
+    "data-modern": 'true' ,
     children: [jsx(Label, {
       className: clsx([styles.label], {
         [styles.hidden]: hideLabel
@@ -117,11 +113,9 @@ const BaseTextInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
             ref: setValueUsing(setEndIconWidth),
             "aria-labelledby": inlineErrorId,
             className: clsx(styles.endIcon, styles.inlineErrorIcon),
-            children: enableModernizedComponents ? jsx(AlertCircle, {
-              color: IconIconErrorOnLight
-            }) : jsx(AlertBadge, {
+            children: jsx(AlertCircle, {
               color: IconIconErrorOnLight
-            })
+            }) 
           })
         }), jsx(VisuallyHidden, {
           id: inlineErrorId,