@box/blueprint-web 16.20.6 → 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/branding-styles/utils/createTheme.d.ts

@@ -1,3 +1,8 @@
+/**
+ * Copied from https://github.com/box/box-ui-elements/blob/c7e1560c69bfe770945e30f359a42e9206f34a10/src/utils/createTheme.js
+ *
+ * TODO: Replace with Blueprint tokens
+ */
 export declare const THEME_VERY_DARK = "vDark";
 export declare const THEME_DARK = "dark";
 export declare const THEME_MID_DARK = "midDark";

package/dist/lib-esm/branding-styles/utils/createTheme.js

@@ -4,9 +4,11 @@ import { mapValues } from '../../utils/mapValues.js';
 import theme from './theme.js';
 import { white, black, bdlGray65, bdlGray80, bdlGray, bdlGray10, bdlGray50 } from './variables.js';
 
-// This is a CUSTOM BLUEPRINT copy of https://github.com/box/box-ui-elements/blob/master/src/utils/createTheme.js
-// Copied on Mar 5 2023
-// Latest commit c7e1560 on Mar 20, 2020
+/**
+ * Copied from https://github.com/box/box-ui-elements/blob/c7e1560c69bfe770945e30f359a42e9206f34a10/src/utils/createTheme.js
+ *
+ * TODO: Replace with Blueprint tokens
+ */
 /* ----------------- Theme ---------------------------*/
 const THEME_VERY_DARK = 'vDark';
 const THEME_DARK = 'dark';
@@ -107,7 +109,6 @@ function createTheme(colorKey) {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   const modifiedColors = {};
   for (const [key, value] of Object.entries(colorRangeConfig.modifiers)) {
-    // $FlowFixMe
     modifiedColors[key] = adjustLightness(colorKeyObj, value);
   }
   // If the color is too extreme on either end of the spectrum we need to change our rules.
@@ -148,11 +149,11 @@ function createTheme(colorKey) {
     buttonBorder: exceedsLightThreshold ? bdlGray : colorKeyHex,
     buttonBorderHover: exceedsLightThreshold ? bdlGray80 : hoverHex,
     buttonBorderActive: exceedsLightThreshold ? bdlGray65 : activeHex,
-    // ProgressBar overrides - CUSTOM BLUEPRINT value
+    // ProgressBar overrides
     progressBarBackground: null,
     // Scroll effect overrides for scrollable themed elements
     scrollShadowRgba,
-    // Divider - CUSTOM BLUEPRINT value
+    // Divider overrides
     dividerBackground: exceedsLightThreshold ? 'rgba(0, 0, 0, 0.1)' : 'rgba(232, 232, 232, 0.1)'
   };
   const isDefaultTheme = colorKeyHex === Color(theme.primary.background).hex();

package/dist/lib-esm/branding-styles/utils/theme.d.ts

@@ -1,3 +1,8 @@
+/**
+ * Copied from https://github.com/box/box-ui-elements/blob/830bf71bef5720a5e6ba128afa35152112674c17/src/styles/theme.js
+ *
+ * TODO: Replace with Blueprint tokens
+ */
 declare const theme: {
     base: {
         background: string;

package/dist/lib-esm/branding-styles/utils/theme.js

@@ -1,6 +1,10 @@
 import { bdlBoxBlue, bdlBoxBlue80, white, bdlGray40, bdlGray30, bdlGray10, bdlGray05, black, bdlGray, bdlGridUnitPx } from './variables.js';
 
-// Copy of https://github.com/box/box-ui-elements/blob/830bf71bef5720a5e6ba128afa35152112674c17/src/styles/theme.js
+/**
+ * Copied from https://github.com/box/box-ui-elements/blob/830bf71bef5720a5e6ba128afa35152112674c17/src/styles/theme.js
+ *
+ * TODO: Replace with Blueprint tokens
+ */
 const theme = {
   base: {
     background: white,

package/dist/lib-esm/branding-styles/utils/variables.d.ts

@@ -1,6 +1,10 @@
+/**
+ * Copied from https://github.com/box/box-ui-elements/blob/830bf71bef5720a5e6ba128afa35152112674c17/src/styles/variables.ts
+ *
+ * TODO: Replace with Blueprint tokens
+ */
 export declare const white = "#fff";
 export declare const black = "#000";
-export declare const countBadgeBackground = "#e9163c";
 export declare const bdlBoxBlue = "#0061d5";
 export declare const bdlBoxBlue80 = "#3381dd";
 export declare const bdlBoxBlue50 = "#7fb0ea";
@@ -75,43 +79,5 @@ export declare const bdlWatermelonRed20 = "#fbd7dd";
 export declare const bdlWatermelonRed10 = "#fdebee";
 export declare const bdlWatermelonRed05 = "#fef5f6";
 export declare const bdlWatermelonRed02 = "#fffbfc";
-export declare const bdlLineHeight = "20px";
-export declare const bdlFontSize = "13px";
-export declare const bdlFontSizeMinimum = "11px";
-export declare const bdlFontSizeDejaBlue = "14px";
-export declare const avatarColors: string[];
-export declare const modalDialogZIndex = "160";
-export declare const menuZIndex = "170";
-export declare const submenuZIndex = "171";
-export declare const overlayZIndex = "190";
-export declare const tooltipZIndex = "190";
-export declare const notificationsWrapperZIndex = "200";
-export declare const bdlBorderRadiusSize = "4px";
-export declare const bdlBorderRadiusSizeMed = "6px";
-export declare const bdlBorderRadiusSizeLarge = "8px";
-export declare const bdlBorderRadiusSizeXlarge = "12px";
-export declare const bdlHeaderBoxShadow: string[];
 export declare const bdlGridUnit = "4px";
 export declare const bdlGridUnitPx = "4";
-export declare const bdlHeaderHeight = "64px";
-export declare const bdlBtnBorderWidth = "1px";
-export declare const bdlBtnHeight = "32px";
-export declare const bdlBtnHeightLarge = "40px";
-export declare const bdlBtnIconSize = "20px";
-export declare const bdlBtnTextIconSize = "16px";
-export declare const bdlBtnPaddingHorizontal = "16px";
-export declare const bdlTransitionDurationBase = "0.15s";
-export declare const bdlTimingFunction: string[];
-export declare const sizeSmallMediumMin = "375px";
-export declare const sizeMediumMin = "461px";
-export declare const sizeLargeMin = "768px";
-export declare const sizeSmallMax = "374px";
-export declare const sizeSmallMediumMax = "460px";
-export declare const sizeMediumMax = "767px";
-export declare const sizeLargeMax = "1023px";
-export declare const sizeXlargeMax = "1219px";
-export declare const smallScreen = "(max-width: 374px)";
-export declare const smallMediumScreen = "(max-width: 460px)";
-export declare const mediumScreen = "(max-width: 767px)";
-export declare const largeScreen = "(max-width: 1023px)";
-export declare const xlargeScreen = "(max-width: 1219px)";

package/dist/lib-esm/branding-styles/utils/variables.js

@@ -1,5 +1,8 @@
-// Copy of https://github.com/box/box-ui-elements/blob/830bf71bef5720a5e6ba128afa35152112674c17/src/styles/variables.ts
-/* File auto-generated */
+/**
+ * Copied from https://github.com/box/box-ui-elements/blob/830bf71bef5720a5e6ba128afa35152112674c17/src/styles/variables.ts
+ *
+ * TODO: Replace with Blueprint tokens
+ */
 const white = '#fff'; // white
 const black = '#000'; // black
 const bdlBoxBlue = '#0061d5'; // bdl-box-blue
@@ -13,6 +16,5 @@ const bdlGray30 = '#bcbcbc'; // bdl-gray-30
 const bdlGray10 = '#e8e8e8'; // bdl-gray-10
 const bdlGray05 = '#f4f4f4'; // bdl-gray-05
 const bdlGridUnitPx = '4'; // bdl-grid-unit-px
- // xlarge-screen
 
 export { bdlBoxBlue, bdlBoxBlue80, bdlGray, bdlGray05, bdlGray10, bdlGray30, bdlGray40, bdlGray50, bdlGray65, bdlGray80, bdlGridUnitPx, black, white };

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