@box/blueprint-web 16.20.7 → 17.0.0

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

@@ -6,7 +6,6 @@ import { LoadingIndicator } from '../loading-indicator/loading-indicator.js';
 import { Text } from '../text/text.js';
 import { TooltipWrapper } from '../utils/TooltipWrapper.js';
 import { useBlueprintConfiguration } from '../blueprint-configuration-context/useBlueprintConfiguration.js';
-import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 import { getButtonOptions } from '../utils/getButtonOptions.js';
 import { useIsEllipsized } from '../utils/useIsEllipsized.js';
 import styles from './text-button.module.js';
@@ -25,9 +24,6 @@ const TextButton = /*#__PURE__*/forwardRef((props, ref) => {
     variant,
     ...rest
   } = getButtonOptions(props);
-  const {
-    enableModernizedComponents
-  } = useBlueprintModernization();
   const {
     componentsWithAnimationEnabled
   } = useBlueprintConfiguration();
@@ -37,7 +33,7 @@ const TextButton = /*#__PURE__*/forwardRef((props, ref) => {
     current: null
   });
   const iconsSize = `0.875${inheritFont ? 'em' : 'rem'}`;
-  const dataModernValue = enableModernizedComponents ? 'true' : 'false';
+  const dataModernValue = 'true' ;
   return jsx(TooltipWrapper, {
     tooltipContent: children,
     tooltipSide: tooltipSide,

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

@@ -1,12 +1,11 @@
 import { jsx } from 'react/jsx-runtime';
-import { PencilCrossed as PencilCrossed$1 } from '@box/blueprint-web-assets/icons/Fill';
+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';
 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 { BaseTextInput } from '../primitives/base-text-input/base-text-input.js';
 import { useForkRef } from '../utils/useForkRef.js';
@@ -21,9 +20,7 @@ const TextInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     loadingAriaLabel,
     ...rest
   } = props;
-  const {
-    enableModernizedComponents
-  } = useBlueprintModernization();
+  const enableModernizedComponents = true;
   const {
     componentsWithAnimationEnabled
   } = useBlueprintConfiguration();
@@ -49,7 +46,7 @@ const TextInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
       });
     }
     if (readOnly) {
-      const PencilCrossedIcon = enableModernizedComponents ? PencilCrossed : PencilCrossed$1;
+      const PencilCrossedIcon = PencilCrossed ;
       return jsx(PencilCrossedIcon, {
         onClick: focusInput,
         role: "presentation"

package/dist/lib-esm/text-toggle-button/text-toggle-button.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 { BaseToggleButton } from '../util-components/base-toggle-button/base-toggle-button.js';
 import styles from './text-toggle-button.module.js';
 
@@ -9,14 +8,11 @@ const TextToggleButton = /*#__PURE__*/forwardRef(({
   className,
   ...rest
 }, ref) => {
-  const {
-    enableModernizedComponents
-  } = useBlueprintModernization();
   return jsx(BaseToggleButton, {
     ...rest,
     ref: ref,
     className: clsx(styles.textToggleButton, className),
-    "data-modern": enableModernizedComponents ? 'true' : 'false'
+    "data-modern": 'true' 
   });
 });
 TextToggleButton.displayName = 'TextToggleButton';

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

@@ -1,11 +1,10 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { ClockBadge, XMark as XMark$1 } from '@box/blueprint-web-assets/icons/Fill';
+import '@box/blueprint-web-assets/icons/Fill';
 import { Clock, XMark } from '@box/blueprint-web-assets/icons/Medium';
-import { bpSize040, bpGray65, Size4, Gray65 } from '@box/blueprint-web-assets/tokens/tokens';
+import { bpSize040, bpGray65 } from '@box/blueprint-web-assets/tokens/tokens';
 import clsx from 'clsx';
 import { forwardRef, useRef, useCallback } from 'react';
 import { TimeField, DateInput, DateSegment } from 'react-aria-components';
-import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 import { IconButton } from '../primitives/icon-button/icon-button.js';
 import { InlineError } from '../primitives/inline-error/inline-error.js';
 import { useLabelable } from '../util-components/labelable/useLabelable.js';
@@ -13,12 +12,6 @@ import { useControllableState } from '../utils/useControllableState.js';
 import { useUniqueId } from '../utils/useUniqueId.js';
 import styles from './time-picker.module.js';
 
-const ClearIcon = label => () => jsx(XMark$1, {
-  "aria-label": label,
-  color: Gray65,
-  height: Size4,
-  width: Size4
-});
 const ClearIconModern = label => () => jsx(XMark, {
   "aria-label": label,
   color: bpGray65,
@@ -40,9 +33,6 @@ const TimePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     shouldForceLeadingZeros = true,
     ...rest
   } = props;
-  const {
-    enableModernizedComponents
-  } = useBlueprintModernization();
   // Component may be uncontrolled or controlled
   const [time, setTimeValue] = useControllableState({
     prop: value,
@@ -74,7 +64,7 @@ const TimePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     className: clsx(styles.timePicker, {
       [styles.disabled]: isDisabled
     }, className),
-    "data-modern": enableModernizedComponents ? 'true' : 'false',
+    "data-modern": 'true' ,
     isDisabled: isDisabled,
     isInvalid: hasError,
     onChange: setTimeValue,
@@ -105,23 +95,17 @@ const TimePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
         "aria-label": clearTimePickerAriaLabel,
         className: styles.clearButton,
         disabled: isDisabled,
-        icon: enableModernizedComponents ? ClearIconModern(clearTimePickerAriaLabel) : ClearIcon(clearTimePickerAriaLabel),
+        icon: ClearIconModern(clearTimePickerAriaLabel) ,
         onClick: handleClearInputButtonClicked,
         onKeyDownCapture: handleClearButtonKeypress,
         size: "x-small"
-      }), enableModernizedComponents ? jsx(Clock, {
+      }), jsx(Clock, {
         "aria-label": clockIconAriaLabel,
         className: styles.clockIcon,
         color: bpGray65,
         height: bpSize040,
         width: bpSize040
-      }) : jsx(ClockBadge, {
-        "aria-label": clockIconAriaLabel,
-        className: styles.clockIcon,
-        color: Gray65,
-        height: Size4,
-        width: Size4
-      })]
+      }) ]
     }), jsx(InlineError, {
       className: styles.inlineError,
       id: inlineErrorId,

package/dist/lib-esm/toolbar/toolbar-button.js

@@ -2,7 +2,6 @@ import { jsx } from 'react/jsx-runtime';
 import * as ToolbarPrimitive from '@radix-ui/react-toolbar';
 import clsx from 'clsx';
 import { forwardRef } from 'react';
-import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 import styles from './toolbar.module.js';
 
 const ToolbarButton = /*#__PURE__*/forwardRef((props, forwardedRef) => {
@@ -14,9 +13,6 @@ const ToolbarButton = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     disabled,
     ...rest
   } = props;
-  const {
-    enableModernizedComponents
-  } = useBlueprintModernization();
   return jsx(ToolbarPrimitive.Button, {
     ...rest,
     ref: forwardedRef,
@@ -24,7 +20,7 @@ const ToolbarButton = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     ...(disabled ? {
       'data-disabled': ''
     } : {}),
-    "data-modern": enableModernizedComponents ? 'true' : 'false',
+    "data-modern": 'true' ,
     disabled: disabled,
     style: {
       '--toolbar-button-color': backgroundColor,

package/dist/lib-esm/toolbar/toolbar-dropdown-indicator.js

@@ -1,9 +1,8 @@
 import { jsx } from 'react/jsx-runtime';
-import { ChevronDown, Caret } from '@box/blueprint-web-assets/icons/Fill';
+import { ChevronDown } from '@box/blueprint-web-assets/icons/Fill';
 import { Size2 } from '@box/blueprint-web-assets/tokens/tokens';
 import clsx from 'clsx';
 import { forwardRef, useMemo } from 'react';
-import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 import styles from './toolbar.module.js';
 
 const ToolbarDropdownIndicator = /*#__PURE__*/forwardRef(({
@@ -11,10 +10,8 @@ const ToolbarDropdownIndicator = /*#__PURE__*/forwardRef(({
   className,
   color
 }, forwardedRef) => {
-  const {
-    enableModernizedComponents
-  } = useBlueprintModernization();
-  const Icon = useMemo(() => enableModernizedComponents ? ChevronDown : Caret, [enableModernizedComponents]);
+  const enableModernizedComponents = true;
+  const Icon = useMemo(() => ChevronDown , [enableModernizedComponents]);
   return jsx(Icon, {
     ref: forwardedRef,
     className: clsx({

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

@@ -3,7 +3,6 @@ import { AlertCircle } from '@box/blueprint-web-assets/icons/Medium';
 import * as ToolbarPrimitive from '@radix-ui/react-toolbar';
 import clsx from 'clsx';
 import { forwardRef } from 'react';
-import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 import { composeToolbarInputKeyDownCapture } from './toolbar-input-keydown.js';
 import styles from './toolbar.module.js';
 
@@ -22,9 +21,6 @@ const ToolbarInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     type = 'text',
     ...rest
   } = props;
-  const {
-    enableModernizedComponents
-  } = useBlueprintModernization();
   const showError = error && !disabled;
   return jsxs("div", {
     className: styles.toolbarInputContainer,
@@ -36,7 +32,7 @@ const ToolbarInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
         ref: forwardedRef,
         type: type,
         className: clsx(styles.toolbarInput, showError && styles.toolbarInputError, className),
-        "data-modern": enableModernizedComponents ? 'true' : 'false',
+        "data-modern": 'true' ,
         disabled: disabled,
         "aria-invalid": showError || undefined,
         onKeyDown: onKeyDown,

package/dist/lib-esm/toolbar/toolbar-link.js

@@ -2,7 +2,6 @@ import { jsx } from 'react/jsx-runtime';
 import * as ToolbarPrimitive from '@radix-ui/react-toolbar';
 import clsx from 'clsx';
 import { forwardRef } from 'react';
-import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 import styles from './toolbar.module.js';
 
 const ToolbarLink = /*#__PURE__*/forwardRef((props, forwardedRef) => {
@@ -11,14 +10,11 @@ const ToolbarLink = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     className,
     ...rest
   } = props;
-  const {
-    enableModernizedComponents
-  } = useBlueprintModernization();
   return jsx(ToolbarPrimitive.Link, {
     ...rest,
     ref: forwardedRef,
     className: clsx(styles.toolbarItem, styles.toolbarLink, className),
-    "data-modern": enableModernizedComponents ? 'true' : 'false',
+    "data-modern": 'true' ,
     children: jsx("span", {
       className: styles.toolbarLinkText,
       children: children

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

@@ -2,7 +2,6 @@ import { jsx } from 'react/jsx-runtime';
 import * as ToolbarPrimitive from '@radix-ui/react-toolbar';
 import clsx from 'clsx';
 import { forwardRef } from 'react';
-import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 import { ToolbarScrollableContainer } from './toolbar-scrollable-container.js';
 import styles from './toolbar.module.js';
 import { HorizontalScrollProvider } from './utils/horizontal-scroll-context.js';
@@ -14,9 +13,7 @@ const ToolbarRoot = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     scrollable,
     ...rest
   } = props;
-  const {
-    enableModernizedComponents
-  } = useBlueprintModernization();
+  const enableModernizedComponents = true;
   if (scrollable) {
     const {
       ariaLabelNextButton,
@@ -30,7 +27,7 @@ const ToolbarRoot = /*#__PURE__*/forwardRef((props, forwardedRef) => {
       className: clsx(styles.toolbarRoot, {
         [styles.ScrollableToolbarWithReducedPadding]: enableModernizedComponents
       }, className),
-      "data-modern": enableModernizedComponents ? 'true' : 'false',
+      "data-modern": 'true' ,
       style: {
         maxWidth
       },
@@ -48,7 +45,7 @@ const ToolbarRoot = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     ...rest,
     ref: forwardedRef,
     className: clsx(styles.toolbarRoot, className),
-    "data-modern": enableModernizedComponents ? 'true' : 'false',
+    "data-modern": 'true' ,
     children: children
   });
 });

package/dist/lib-esm/toolbar/toolbar-text-toggle-item.js

@@ -2,7 +2,6 @@ import { jsx } from 'react/jsx-runtime';
 import * as ToolbarPrimitive from '@radix-ui/react-toolbar';
 import clsx from 'clsx';
 import { forwardRef } from 'react';
-import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 import styles from './toolbar.module.js';
 
 const ToolbarTextToggleItem = /*#__PURE__*/forwardRef((props, forwardedRef) => {
@@ -10,14 +9,11 @@ const ToolbarTextToggleItem = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     children,
     ...rest
   } = props;
-  const {
-    enableModernizedComponents
-  } = useBlueprintModernization();
   return jsx(ToolbarPrimitive.ToggleItem, {
     ...rest,
     ref: forwardedRef,
     className: clsx(styles.toolbarItem, styles.toolbarTextToggleItem),
-    "data-modern": enableModernizedComponents ? 'true' : 'false',
+    "data-modern": 'true' ,
     children: children
   });
 });

package/dist/lib-esm/toolbar/toolbar-toggle-group.js

@@ -2,7 +2,6 @@ import { jsx } from 'react/jsx-runtime';
 import * as ToolbarPrimitive from '@radix-ui/react-toolbar';
 import clsx from 'clsx';
 import { forwardRef } from 'react';
-import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 import styles from './toolbar.module.js';
 
 const ToolbarToggleGroup = /*#__PURE__*/forwardRef((props, forwardedRef) => {
@@ -11,14 +10,11 @@ const ToolbarToggleGroup = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     className,
     ...rest
   } = props;
-  const {
-    enableModernizedComponents
-  } = useBlueprintModernization();
   return jsx(ToolbarPrimitive.ToggleGroup, {
     ...rest,
     ref: forwardedRef,
     className: clsx(styles.toggleGroup, className),
-    "data-modern": enableModernizedComponents ? 'true' : 'false',
+    "data-modern": 'true' ,
     children: children
   });
 });

package/dist/lib-esm/toolbar/toolbar-toggle-item.js

@@ -3,7 +3,6 @@ import { IconIconOnLight, Size5 } from '@box/blueprint-web-assets/tokens/tokens'
 import * as ToolbarPrimitive from '@radix-ui/react-toolbar';
 import clsx from 'clsx';
 import { forwardRef, createElement } from 'react';
-import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 import styles from './toolbar.module.js';
 
 const ToolbarToggleItem = /*#__PURE__*/forwardRef((props, forwardedRef) => {
@@ -13,14 +12,11 @@ const ToolbarToggleItem = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     color = IconIconOnLight,
     ...rest
   } = props;
-  const {
-    enableModernizedComponents
-  } = useBlueprintModernization();
   return jsxs(ToolbarPrimitive.ToggleItem, {
     ...rest,
     ref: forwardedRef,
     className: clsx(styles.toolbarItem, styles.toolbarToggle),
-    "data-modern": enableModernizedComponents ? 'true' : 'false',
+    "data-modern": 'true' ,
     children: [children, /*#__PURE__*/createElement(icon, {
       height: Size5,
       width: Size5,

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

@@ -6,7 +6,6 @@ import React__default, { useContext } 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 './tooltip.module.js';
 
 /**
@@ -83,14 +82,6 @@ const TooltipTrigger = /*#__PURE__*/React__default.forwardRef(function TooltipTr
     children: props.children
   });
 });
-const Arrow = /*#__PURE__*/React__default.forwardRef(function Arrow({
-  variant
-}, ref) {
-  return jsx("div", {
-    ref: ref,
-    className: clsx(styles.arrow, styles[variant])
-  });
-});
 const Content = /*#__PURE__*/React__default.forwardRef(function Content(props, ref) {
   const {
     children,
@@ -99,22 +90,14 @@ const Content = /*#__PURE__*/React__default.forwardRef(function Content(props, r
     className,
     ...rest
   } = props;
-  const {
-    enableModernizedComponents
-  } = useBlueprintModernization();
   return jsxs(RadixTooltip.Content, {
     ...rest,
     ref: ref,
     className: clsx(styles.content, styles[variant], className),
     collisionPadding: collisionPadding,
-    "data-modern": enableModernizedComponents ? 'true' : 'false',
+    "data-modern": 'true' ,
     sideOffset: 3,
-    children: [children, !enableModernizedComponents && jsx(RadixTooltip.Arrow, {
-      asChild: true,
-      children: jsx(Arrow, {
-        variant: variant
-      })
-    })]
+    children: [children, false]
   });
 });
 

package/dist/lib-esm/trigger-button/trigger-button.js

@@ -1,12 +1,11 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { CaretUp, CaretDown } from '@box/blueprint-web-assets/icons/Fill';
+import '@box/blueprint-web-assets/icons/Fill';
 import { ChevronUp, ChevronDown } from '@box/blueprint-web-assets/icons/Medium';
 import clsx from 'clsx';
 import { forwardRef, useRef } 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 { BaseButton } from '../primitives/base-button/index.js';
 import { TooltipWrapper } from '../utils/TooltipWrapper.js';
 import { useIsEllipsized } from '../utils/useIsEllipsized.js';
@@ -37,9 +36,6 @@ const TriggerButton = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     loading
   } = rest;
   const startIconSize = buttonSizeToStartIconSizeMap[size];
-  const {
-    enableModernizedComponents
-  } = useBlueprintModernization();
   const {
     componentsWithAnimationEnabled
   } = useBlueprintConfiguration();
@@ -53,7 +49,7 @@ const TriggerButton = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     className: clsx(styles.triggerButton, styles[size], styles[variant], {
       [styles.startIcon]: !!startIcon
     }, className),
-    "data-modern": enableModernizedComponents ? 'true' : 'false',
+    "data-modern": 'true' ,
     size: baseButtonSize,
     variant: variant,
     ...rest,
@@ -74,13 +70,10 @@ const TriggerButton = /*#__PURE__*/forwardRef((props, forwardedRef) => {
         [styles.labelWrap]: overflow === 'wrap'
       }),
       children: label
-    }), enableModernizedComponents ? jsx(BaseButton.Icon, {
+    }), jsx(BaseButton.Icon, {
       className: styles.iconCaret,
       icon: caretDirection === 'up' ? ChevronUp : ChevronDown
-    }) : jsx(BaseButton.Icon, {
-      className: styles.iconCaret,
-      icon: caretDirection === 'up' ? CaretUp : CaretDown
-    })]
+    }) ]
   });
   return overflow === 'ellipsis' && !disabled && !loading ? jsx(TooltipWrapper, {
     tooltipContent: label,

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

@@ -3,7 +3,6 @@ import clsx from 'clsx';
 import { forwardRef, useMemo, createContext, useContext } from 'react';
 import { GridList } from 'react-aria-components';
 import { noop } from '../../utils/noop.js';
-import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
 import { isCtrlKeyPressed } from '../../utils/keyboardUtils.js';
 import styles from './base-grid-list-item.module.js';
 import { isGridV2SingleSelect, isGridListContentTarget, getGridListItemKeyFromTarget } from './grid-list-interaction-utils.js';
@@ -34,9 +33,6 @@ const BaseGridList = /*#__PURE__*/forwardRef(function BaseGridList(props, forwar
     variant = 'large',
     ...rest
   } = props;
-  const {
-    enableModernizedComponents
-  } = useBlueprintModernization();
   const handleOnAction = onAction || noop;
   // In grid-v2 single-select, React Aria must only ever select on press: passing it onAction would
   // make it treat rows as actionable and swallow the selection. Blueprint fires onAction itself,
@@ -110,7 +106,7 @@ const BaseGridList = /*#__PURE__*/forwardRef(function BaseGridList(props, forwar
         ...rest,
         ref: forwardedRef,
         className: clsx(layoutStyleClass, variantClass, className),
-        "data-modern": enableModernizedComponents ? 'true' : 'false',
+        "data-modern": 'true' ,
         layout: layoutFinal,
         ...(ownsAction ? {} : {
           onAction: handleOnAction

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

@@ -2,20 +2,17 @@ import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useMemo } from 'react';
 import { Tooltip, OverlayArrow } from 'react-aria-components';
-import { useBlueprintModernization } from '../../../blueprint-modernization-context/useBlueprintModernization.js';
 import styles from '../base-grid-list-item.module.js';
 
 const RACTooltip = ({
   children,
   ...props
 }) => {
-  const {
-    enableModernizedComponents
-  } = useBlueprintModernization();
-  const fill = useMemo(() => enableModernizedComponents ? 'var(--bp-gray-100)' : 'var(--gray-80)', [enableModernizedComponents]);
+  const enableModernizedComponents = true;
+  const fill = useMemo(() => 'var(--bp-gray-100)' , [enableModernizedComponents]);
   return jsxs(Tooltip, {
     className: clsx(styles.tooltipContent),
-    "data-modern": enableModernizedComponents ? 'true' : 'false',
+    "data-modern": 'true' ,
     offset: 3,
     placement: "bottom",
     ...props,

package/dist/lib-esm/util-components/legend/legend.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 { TextWithInfoBadge } from '../text-with-info-badge/text-with-info-badge.js';
 import styles from './legend.module.js';
 
@@ -16,13 +14,10 @@ function Legend(props) {
     ...rest
   } = props;
   const shouldRenderHeader = header || infoText && infoBadgeAriaLabel;
-  const {
-    enableModernizedComponents
-  } = useBlueprintModernization();
   return jsxs("fieldset", {
     ...rest,
     className: clsx(styles.fieldset, styles[gap], className),
-    "data-modern": enableModernizedComponents ? 'true' : 'false',
+    "data-modern": 'true' ,
     children: [shouldRenderHeader ? jsx("legend", {
       className: styles.legendContainer,
       children: jsx(TextWithInfoBadge, {

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

@@ -4,7 +4,6 @@ import { Size3, IconIconOnDark } from '@box/blueprint-web-assets/tokens/tokens';
 import clsx from 'clsx';
 import { forwardRef } from 'react';
 import { Checkbox } from 'react-aria-components';
-import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
 import styles from './list-checkbox.module.js';
 
 /**
@@ -15,12 +14,9 @@ import styles from './list-checkbox.module.js';
  * @see https://react-spectrum.adobe.com/react-aria/Checkbox.html
  */
 const ListCheckbox = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    enableModernizedComponents
-  } = useBlueprintModernization();
   return jsx("div", {
     className: clsx(styles.selection, props.className),
-    "data-modern": enableModernizedComponents ? 'true' : 'false',
+    "data-modern": 'true' ,
     children: jsx(Checkbox, {
       ...props,
       ref: ref,

package/dist/lib-esm/util-components/menu-item-sections/menu-item-sections.js

@@ -1,6 +1,5 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
 import styles from './menu-item-sections.module.js';
 
 /**
@@ -11,15 +10,12 @@ const MenuItemSideContent = ({
   className,
   ...rest
 }) => {
-  const {
-    enableModernizedComponents
-  } = useBlueprintModernization();
   return jsx("div", {
     ...rest,
     className: clsx(styles.menuItemSideContent, {
       [styles.textOnLightSecondary]: typeof children === 'string'
     }, className),
-    "data-modern": enableModernizedComponents ? 'true' : 'false',
+    "data-modern": 'true' ,
     children: children
   });
 };
@@ -32,13 +28,10 @@ const MenuItemMainContent = ({
   description,
   ...rest
 }) => {
-  const {
-    enableModernizedComponents
-  } = useBlueprintModernization();
   return jsxs("div", {
     ...rest,
     className: clsx(styles.menuItemMainContent, className),
-    "data-modern": enableModernizedComponents ? 'true' : 'false',
+    "data-modern": 'true' ,
     children: [jsx("span", {
       className: clsx(styles.label, {
         [styles.bold]: Boolean(description)

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

@@ -1,8 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { InfoBadge } from '@box/blueprint-web-assets/icons/Fill';
 import { clsx } from 'clsx';
-import 'react';
-import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
 import { Tooltip } from '../../tooltip/tooltip.js';
 import { InteractiveIcon } from '../interactive-icon/interactive-icon.js';
 import styles from './text-with-info-badge.module.js';
@@ -17,12 +15,9 @@ const TextWithInfoBadge = props => {
     variant = 'default',
     tooltipPosition = 'top'
   } = props;
-  const {
-    enableModernizedComponents
-  } = useBlueprintModernization();
   return jsxs("div", {
     className: clsx(styles.text, styles[variant], className),
-    "data-modern": enableModernizedComponents ? 'true' : 'false',
+    "data-modern": 'true' ,
     id: id,
     children: [children, infoText && infoBadgeAriaLabel && jsx("span", {
       className: styles.badgeContainer,

package/dist/lib-esm/utils/TooltipWrapper.d.ts

@@ -4,4 +4,4 @@ export declare const TooltipWrapper: ({ children, withTooltip, tooltipContent, t
     withTooltip: boolean;
     tooltipContent: TooltipProps["content"];
     tooltipSide?: TooltipProps["side"];
-}) => string | number | boolean | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+}) => string | number | boolean | import("react/jsx-runtime").JSX.Element | Iterable<import("react").ReactNode> | null | undefined;