@box/blueprint-web 16.20.7 → 17.0.0

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

@@ -1,10 +1,9 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { PointerChevron } from '@box/blueprint-web-assets/icons/Fill';
+import '@box/blueprint-web-assets/icons/Fill';
 import { ChevronRight } from '@box/blueprint-web-assets/icons/Medium';
 import * as RadixAccordion from '@radix-ui/react-accordion';
 import clsx from 'clsx';
 import { useRef } from 'react';
-import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 import { Ghost } from '../ghost/ghost.js';
 import { InlineNotice } from '../inline-notice/inline-notice.js';
 import { AccordionItemHeader, AccordionActionSlot } from './accordion-item-header.js';
@@ -21,12 +20,9 @@ import styles from './accordion.module.js';
  * </Accordion>
  */
 const Root = props => {
-  const {
-    enableModernizedComponents
-  } = useBlueprintModernization();
   return jsx(RadixAccordion.Root, {
     ...props,
-    className: enableModernizedComponents ? styles.accordion : ''
+    className: styles.accordion 
   });
 };
 const Item = props => {
@@ -38,15 +34,12 @@ const Item = props => {
     ...rest
   } = props;
   const accordionItemClasses = clsx(styles.accordionItem, className);
-  const {
-    enableModernizedComponents
-  } = useBlueprintModernization();
   const triggerRef = useRef(null);
   if (loading) {
     return jsx("div", {
       ...rest,
       className: accordionItemClasses,
-      "data-modern": enableModernizedComponents ? 'true' : 'false',
+      "data-modern": 'true' ,
       children: jsx("button", {
         "aria-label": loadingAriaLabel,
         className: styles.accordionTrigger,
@@ -62,7 +55,7 @@ const Item = props => {
     return jsx("div", {
       ...rest,
       className: accordionItemClasses,
-      "data-modern": enableModernizedComponents ? 'true' : 'false',
+      "data-modern": 'true' ,
       children: jsx("div", {
         className: clsx({
           [styles.accordionFixedContent]: Boolean(children)
@@ -89,15 +82,11 @@ const Item = props => {
     highlighted,
     ...itemRest
   } = props;
-  const chevronIcon = enableModernizedComponents ? jsx(ChevronRight, {
+  const chevronIcon = jsx(ChevronRight, {
     "aria-hidden": "true",
     className: styles.accordionTriggerIcon,
     color: "var(--bp-icon-icon-on-light-secondary)"
-  }) : jsx(PointerChevron, {
-    "aria-hidden": "true",
-    className: styles.accordionTriggerIcon,
-    color: "var(--bp-gray-100)"
-  });
+  }) ;
   const handleChevronClick = () => {
     triggerRef.current?.click();
   };
@@ -106,7 +95,7 @@ const Item = props => {
     className: clsx(accordionItemClasses, {
       [styles.highlighted]: highlighted
     }),
-    "data-modern": enableModernizedComponents ? 'true' : 'false',
+    "data-modern": 'true' ,
     children: [jsx(RadixAccordion.Header, {
       asChild: true,
       children: jsxs("div", {

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

@@ -3,7 +3,6 @@ import { Avatar as Avatar$1 } from '@box/blueprint-web-assets/icons/Line';
 import { GrayBlack } from '@box/blueprint-web-assets/tokens/tokens';
 import clsx from 'clsx';
 import React__default, { forwardRef, useState, useEffect } from 'react';
-import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 import { getContrastTextColor } from '../utils/getContrastTextColor.js';
 import styles from './avatar.module.js';
 import { colors, iconSizes } from './consts.js';
@@ -23,9 +22,6 @@ const Avatar = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     text,
     ...rest
   } = props;
-  const {
-    enableModernizedComponents
-  } = useBlueprintModernization();
   const [imageIsLoaded, setImageIsLoaded] = useState(false);
   const [imageHasError, setImageHasError] = useState(false);
   useEffect(() => {
@@ -87,7 +83,7 @@ const Avatar = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   });
   return jsx("div", {
     className: clsx(styles.avatar, styles[size], className),
-    "data-modern": enableModernizedComponents ? 'true' : 'false',
+    "data-modern": 'true' ,
     children: avatarContents
   });
 });

package/dist/lib-esm/blueprint-modernization-context/blueprint-modernization-context.d.ts

@@ -1,9 +1,28 @@
 import { type ReactNode } from 'react';
+/**
+ * @deprecated Modernized Blueprint UI is always on. Blueprint components no longer read this context.
+ * The API remains for consumer compatibility and will be removed in Q3FY27.
+ */
 export interface BlueprintModernizationContextValue {
+    /**
+     * @deprecated Ignored by Blueprint components — modern UI is always on. Will be removed in Q3FY27.
+     */
     enableModernizedComponents: boolean;
 }
+/**
+ * @deprecated Modernized Blueprint UI is always on. Blueprint components no longer read this context.
+ * The API remains for consumer compatibility and will be removed in Q3FY27.
+ */
 export declare const BlueprintModernizationContext: import("react").Context<BlueprintModernizationContextValue>;
+/**
+ * @deprecated Modernized Blueprint UI is always on. Blueprint components ignore `enableModernizedComponents`.
+ * Will be removed in Q3FY27.
+ */
 export declare const BlueprintModernizationProvider: ({ children, enableModernizedComponents, }: {
     children: ReactNode;
-    enableModernizedComponents: boolean;
+    /**
+     * @deprecated Ignored by Blueprint components — modern UI is always on. Optional for TypeScript
+     * compatibility; will be removed in Q3FY27.
+     */
+    enableModernizedComponents?: boolean;
 }) => import("react/jsx-runtime").JSX.Element;

package/dist/lib-esm/blueprint-modernization-context/blueprint-modernization-context.js

@@ -1,12 +1,20 @@
 import { jsx } from 'react/jsx-runtime';
 import { createContext, useMemo } from 'react';
 
+/**
+ * @deprecated Modernized Blueprint UI is always on. Blueprint components no longer read this context.
+ * The API remains for consumer compatibility and will be removed in Q3FY27.
+ */
 const BlueprintModernizationContext = /*#__PURE__*/createContext({
-  enableModernizedComponents: false
+  enableModernizedComponents: true
 });
+/**
+ * @deprecated Modernized Blueprint UI is always on. Blueprint components ignore `enableModernizedComponents`.
+ * Will be removed in Q3FY27.
+ */
 const BlueprintModernizationProvider = ({
   children,
-  enableModernizedComponents
+  enableModernizedComponents = true
 }) => {
   const value = useMemo(() => ({
     enableModernizedComponents

package/dist/lib-esm/blueprint-modernization-context/index.d.ts

@@ -1,3 +1,7 @@
+/**
+ * @deprecated Modernized Blueprint UI is always on. This module remains for consumer compatibility
+ * and will be removed in Q3FY27. See LEGACY_REMOVAL_PLAN.md.
+ */
 export { BlueprintModernizationContext, BlueprintModernizationProvider, type BlueprintModernizationContextValue, } from './blueprint-modernization-context';
 export { BLUEPRINT_UPLIFT_FEATURE_FLAG } from './consts';
 export { useBlueprintModernization } from './useBlueprintModernization';

package/dist/lib-esm/blueprint-modernization-context/useBlueprintModernization.d.ts

@@ -1 +1,5 @@
+/**
+ * @deprecated Modernized Blueprint UI is always on. Blueprint components no longer use this hook.
+ * The API remains for consumer compatibility and will be removed in Q3FY27.
+ */
 export declare const useBlueprintModernization: () => import("./blueprint-modernization-context").BlueprintModernizationContextValue;

package/dist/lib-esm/blueprint-modernization-context/useBlueprintModernization.js

@@ -1,6 +1,10 @@
 import { useContext } from 'react';
 import { BlueprintModernizationContext } from './blueprint-modernization-context.js';
 
+/**
+ * @deprecated Modernized Blueprint UI is always on. Blueprint components no longer use this hook.
+ * The API remains for consumer compatibility and will be removed in Q3FY27.
+ */
 const useBlueprintModernization = () => {
   const context = useContext(BlueprintModernizationContext);
   if (context === undefined) {

package/dist/lib-esm/card/card.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 './card.module.js';
 
 /**
@@ -14,14 +13,11 @@ const Card = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     elevation: elevationToken,
     ...rest
   } = props;
-  const {
-    enableModernizedComponents
-  } = useBlueprintModernization();
   return jsx("div", {
     ...rest,
     ref: forwardedRef,
     className: clsx(styles.card, elevationToken && styles[elevationToken], className),
-    "data-modern": enableModernizedComponents ? 'true' : 'false',
+    "data-modern": 'true' ,
     children: children
   });
 });

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

@@ -5,7 +5,6 @@ import { forwardRef, useRef, useLayoutEffect, useCallback } 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 { Card } from '../card/card.js';
 import { composeEventHandlers } from '../utils/composeEventHandlers.js';
 import styles from './card-tooltip.module.js';
@@ -50,9 +49,6 @@ const CardTooltip = /*#__PURE__*/forwardRef((props, ref) => {
   const mounted = Ariakit.useStoreState(tooltipStore, 'mounted');
   const isOpen = Ariakit.useStoreState(tooltipStore, 'open');
   const focusTimeout = useRef(0);
-  const {
-    enableModernizedComponents
-  } = useBlueprintModernization();
   const {
     componentsWithAnimationEnabled
   } = useBlueprintConfiguration();
@@ -118,7 +114,7 @@ const CardTooltip = /*#__PURE__*/forwardRef((props, ref) => {
       ref: ref,
       className: clsx(styles.content, className),
       "data-bp-animated": isAnimationEnabled ? 'true' : 'false',
-      "data-modern": enableModernizedComponents ? 'true' : 'false',
+      "data-modern": 'true' ,
       "data-side": side,
       fitViewport: true,
       gutter: 4,

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

@@ -7,7 +7,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 { TextWithInfoBadge } from '../util-components/text-with-info-badge/text-with-info-badge.js';
 import { useUniqueId } from '../utils/useUniqueId.js';
 import styles from './checkbox.module.js';
@@ -31,9 +30,6 @@ const CheckboxItem = /*#__PURE__*/forwardRef((props, ref) => {
     ...rest
   } = props;
   const descriptionId = useUniqueId('description-', !!description);
-  const {
-    enableModernizedComponents
-  } = useBlueprintModernization();
   const {
     componentsWithAnimationEnabled
   } = useBlueprintConfiguration();
@@ -43,7 +39,7 @@ const CheckboxItem = /*#__PURE__*/forwardRef((props, ref) => {
       [styles.disabled]: disabled
     }, className),
     "data-bp-animated": isAnimationEnabled ? 'true' : 'false',
-    "data-modern": enableModernizedComponents ? 'true' : 'false',
+    "data-modern": 'true' ,
     children: [jsxs("label", {
       className: styles.label,
       "data-target-id": dataTargetId,

package/dist/lib-esm/collapsible/collapsible-section.js

@@ -1,11 +1,10 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { PointerChevronDown, PointerChevronUp } from '@box/blueprint-web-assets/icons/Fill';
+import '@box/blueprint-web-assets/icons/Fill';
 import { ChevronDown, ChevronUp, ChevronRight } from '@box/blueprint-web-assets/icons/Medium';
 import { Size4 } from '@box/blueprint-web-assets/tokens/tokens';
 import * as Collapsible from '@radix-ui/react-collapsible';
 import clsx from 'clsx';
 import { forwardRef, useState, useEffect, useCallback, useMemo } from 'react';
-import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 import { IconButton } from '../primitives/icon-button/icon-button.js';
 import { Slot } from '../primitives/slot.js';
 import { useNamedSlots } from '../utils/useNamedSlots.hook.js';
@@ -22,9 +21,7 @@ const CollapsibleSectionImpl = /*#__PURE__*/forwardRef((props, forwardedRef) =>
     variant = 'default',
     ...rest
   } = props;
-  const {
-    enableModernizedComponents
-  } = useBlueprintModernization();
+  const enableModernizedComponents = true;
   const [collapsibleSectionOpen, setCollapsibleSectionOpen] = useState(open);
   const [headerSlot, contentSlot, actionSlot] = useNamedSlots(children, ['header', 'content', 'action']);
   useEffect(() => {
@@ -35,9 +32,9 @@ const CollapsibleSectionImpl = /*#__PURE__*/forwardRef((props, forwardedRef) =>
     onOpenChange?.(isOpen);
   }, [onOpenChange]);
   const icon = useMemo(() => ({
-    up: enableModernizedComponents ? ChevronUp : PointerChevronUp,
-    down: enableModernizedComponents ? ChevronDown : PointerChevronDown,
-    size: enableModernizedComponents ? 'large' : 'x-small'
+    up: ChevronUp ,
+    down: ChevronDown ,
+    size: 'large' 
   }), [enableModernizedComponents]);
   const BorderlessIcon = useMemo(() => collapsibleSectionOpen ? ChevronDown : ChevronRight, [collapsibleSectionOpen]);
   const iconAriaLabel = useMemo(() => collapsibleSectionOpen ? closeSectionButtonAriaLabel : openSectionButtonAriaLabel, [collapsibleSectionOpen, closeSectionButtonAriaLabel, openSectionButtonAriaLabel]);
@@ -52,7 +49,7 @@ const CollapsibleSectionImpl = /*#__PURE__*/forwardRef((props, forwardedRef) =>
     ...rest,
     ref: forwardedRef,
     className: clsx(styles.collapsibleSection, className),
-    "data-modern": enableModernizedComponents ? 'true' : 'false',
+    "data-modern": 'true' ,
     "data-variant": variant,
     onOpenChange: onCollapsibleOpenChanged,
     open: collapsibleSectionOpen,

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

@@ -1,12 +1,11 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { SelectItemCheck, SelectItem, ComboboxItem, useComboboxStore, useSelectStore, PopoverAnchor, Combobox as Combobox$1, ComboboxCancel, SelectList, ComboboxPopover } from '@ariakit/react';
 import { SelectRenderer } from '@ariakit/react-core/select/select-renderer';
-import { Checkmark, AlertBadge, XMark as XMark$1 } from '@box/blueprint-web-assets/icons/Fill';
+import { Checkmark } from '@box/blueprint-web-assets/icons/Fill';
 import { AlertCircle, XMark } from '@box/blueprint-web-assets/icons/Medium';
-import { bpIconIconOnLight, IconIconOnLight, IconIconErrorOnLight } from '@box/blueprint-web-assets/tokens/tokens';
+import { bpIconIconOnLight, IconIconErrorOnLight } from '@box/blueprint-web-assets/tokens/tokens';
 import clsx from 'clsx';
 import React__default, { forwardRef, useMemo, useRef, useCallback, useEffect } from 'react';
-import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 import { Focusable } from '../focusable/focusable.js';
 import { InputChip } from '../input-chip/input-chip.js';
 import { LoadingIndicator } from '../loading-indicator/loading-indicator.js';
@@ -101,9 +100,6 @@ const RootInner = ({
     getPopoverRef?.(node);
   }, [getPopoverRef]);
   const hasError = !!error && !disabled;
-  const {
-    enableModernizedComponents
-  } = useBlueprintModernization();
   const comboboxStore = useComboboxStore({
     // Input state
     defaultValue: defaultInputValue,
@@ -340,7 +336,7 @@ const RootInner = ({
   const showComboboxCancelButton = clearButtonAriaLabel && (inputValue.length > 0 || (Array.isArray(selectedValue) ? selectedValue.length > 0 : !!selectedValue));
   const showSingleSelectChip = displaySingleSelectionAsChip && !Array.isArray(selectedValue) && !!selectedValue;
   const showInlineError = errorVariant === 'inline' && hasError;
-  const InlineErrorIcon = enableModernizedComponents ? AlertCircle : AlertBadge;
+  const InlineErrorIcon = AlertCircle ;
   const Label = useLabelable(label, comboboxId, required);
   const inlineErrorId = useUniqueId('inline-error-');
   const ariaDescribedBy = clsx(rest['aria-describedby'], {
@@ -421,7 +417,7 @@ const RootInner = ({
                     children: jsx(InlineErrorIcon, {
                       className: styles.inlineErrorIcon,
                       color: IconIconErrorOnLight,
-                      "data-testid": enableModernizedComponents ? 'combobox-inline-error-icon-modern' : 'combobox-inline-error-icon-legacy'
+                      "data-testid": 'combobox-inline-error-icon-modern' 
                     })
                   })
                 }), jsx(VisuallyHidden, {
@@ -434,7 +430,7 @@ const RootInner = ({
                 render: cancelProps => jsx(IconButton, {
                   ...cancelProps,
                   "aria-label": clearButtonAriaLabel,
-                  icon: enableModernizedComponents ? XMark : XMark$1,
+                  icon: XMark ,
                   size: "x-small"
                 }),
                 store: comboboxStore
@@ -484,12 +480,12 @@ const RootInner = ({
     className: clsx(styles.container, {
       [styles.disabled]: disabled
     }, className),
-    "data-modern": enableModernizedComponents ? 'true' : 'false',
+    "data-modern": 'true' ,
     children: [inputComponent, showLoading || filteredOptions.length > 0 || filteredOptions.length <= 0 && noResultMessage ? jsx(ComboboxPopover, {
       ref: popoverRefCallback,
       "aria-labelledby": comboboxId,
       className: clsx(styles.popover, popoverClassName),
-      "data-modern": enableModernizedComponents ? 'true' : 'false',
+      "data-modern": 'true' ,
       fitViewport: true,
       gutter: 8,
       hideOnEscape: hideOnEscape,
@@ -518,10 +514,7 @@ const RootInner = ({
 };
 const Root = /*#__PURE__*/forwardRef(RootInner);
 const Indicator = /*#__PURE__*/forwardRef((_, ref) => {
-  const {
-    enableModernizedComponents
-  } = useBlueprintModernization();
-  const iconColor = enableModernizedComponents ? bpIconIconOnLight : IconIconOnLight;
+  const iconColor = bpIconIconOnLight ;
   return jsx(SelectItemCheck, {
     ref: ref,
     className: styles.indicator,

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

@@ -1,7 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { forwardRef } from 'react';
-import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 import { InlineError } from '../primitives/inline-error/inline-error.js';
 import { useLabelable } from '../util-components/labelable/useLabelable.js';
 import { ComboboxGroupCombobox, ComboboxGroupComboboxSingleSelect } from './combobox-group-combobox.js';
@@ -22,9 +21,6 @@ const Root = /*#__PURE__*/forwardRef(({
     isDisabled,
     subcomponentId
   } = useComboboxGroupContext();
-  const {
-    enableModernizedComponents
-  } = useBlueprintModernization();
   const selectHasError = !!errors.select;
   const comboboxHasError = !!errors.combobox;
   const Label = useLabelable(label, subcomponentId);
@@ -34,7 +30,7 @@ const Root = /*#__PURE__*/forwardRef(({
     className: clsx(styles.container, {
       [styles.disabled]: isDisabled
     }),
-    "data-modern": enableModernizedComponents ? 'true' : 'false',
+    "data-modern": 'true' ,
     children: [jsx(Label, {
       className: styles.label,
       hideLabel: hideLabel

package/dist/lib-esm/content-card/content-card-body.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 { Text } from '../text/text.js';
 import styles from './content-card.module.js';
 
@@ -11,11 +10,8 @@ const ContentCardBody = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     children,
     ...rest
   } = props;
-  const {
-    enableModernizedComponents
-  } = useBlueprintModernization();
-  const variant = enableModernizedComponents ? 'bodySmall' : 'bodyDefault';
-  const color = enableModernizedComponents ? 'textOnLightSecondary' : 'textOnLightDefault';
+  const variant = 'bodySmall' ;
+  const color = 'textOnLightSecondary' ;
   return jsx("div", {
     className: clsx(styles.cardBody, className),
     children: jsx(Text, {

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

@@ -1,7 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Size14, Size1, Size6, Size4, Size18, Size5 } from '@box/blueprint-web-assets/tokens/tokens';
 import clsx from 'clsx';
-import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 import { Ghost } from '../ghost/ghost.js';
 import { ContentCardBody } from './content-card-body.js';
 import { ContentCardFooter } from './content-card-footer.js';
@@ -10,12 +9,9 @@ import { ContentCardTitle } from './content-card-title.js';
 import styles from './content-card.module.js';
 
 const GhostContentCard = () => {
-  const {
-    enableModernizedComponents
-  } = useBlueprintModernization();
   return jsxs("div", {
     className: styles.ghostCard,
-    "data-modern": enableModernizedComponents ? 'true' : 'false',
+    "data-modern": 'true' ,
     "data-testid": "ghost-content-card",
     children: [jsx(Ghost, {
       borderRadius: Size1,
@@ -66,9 +62,6 @@ const ContentCardComponent = ({
   onSelect,
   ...rest
 }) => {
-  const {
-    enableModernizedComponents
-  } = useBlueprintModernization();
   const handleKeyDown = event => {
     if (event.key === 'Enter') {
       onSelect(event);
@@ -80,7 +73,7 @@ const ContentCardComponent = ({
   return jsx("div", {
     ...rest,
     className: clsx(styles.card, className),
-    "data-modern": enableModernizedComponents ? 'true' : 'false',
+    "data-modern": 'true' ,
     onClick: onSelect,
     onKeyDown: handleKeyDown,
     role: "link",

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

@@ -5,7 +5,6 @@ import * as RadixPopover from '@radix-ui/react-popover';
 import clsx from 'clsx';
 import { forwardRef, useState, useEffect, useRef, useCallback } from 'react';
 import { DatePicker as DatePicker$1, Group, DateInput, DateSegment, Button } from 'react-aria-components';
-import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 import { Calendar as Calendar$1 } from '../primitives/calendar/calendar.js';
 import '@internationalized/date';
 import { IconButton } from '../primitives/icon-button/icon-button.js';
@@ -49,9 +48,6 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     previousMonthAriaLabel,
     ...rest
   } = props;
-  const {
-    enableModernizedComponents
-  } = useBlueprintModernization();
   const [internalValue, setInternalValue] = useState(defaultValue);
   useEffect(() => {
     if (value !== undefined) {
@@ -152,7 +148,7 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
       className: clsx(styles.datePicker, {
         [styles.disabled]: isDisabled
       }, className),
-      "data-modern": enableModernizedComponents ? 'true' : 'false',
+      "data-modern": 'true' ,
       isDisabled: isDisabled,
       isInvalid: hasError,
       onChange: onDatePickerValueChanged,

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

@@ -1,6 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
-import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 import styles from './ghost.module.js';
 
 /**
@@ -22,9 +21,7 @@ const Ghost = ({
   style = {},
   ...rest
 }) => {
-  const {
-    enableModernizedComponents
-  } = useBlueprintModernization();
+  const enableModernizedComponents = true;
   return jsx("span", {
     className: clsx(className, styles.ghost, {
       [styles[variant]]: !!variant

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/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, {