@box/blueprint-web 16.20.7 → 17.0.1

package/dist/lib-esm/primitives/menu-combobox/menu-combobox-search.js

@@ -1,10 +1,9 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { Combobox } from '@ariakit/react';
-import { Search as Search$1 } from '@box/blueprint-web-assets/icons/Fill';
+import '@box/blueprint-web-assets/icons/Fill';
 import { Search } from '@box/blueprint-web-assets/icons/Medium';
 import clsx from 'clsx';
 import { forwardRef } from 'react';
-import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
 import { useMenuComboboxContext } from './menu-combobox-context.js';
 import styles from './menu-combobox.module.js';
 
@@ -19,10 +18,7 @@ const MenuComboboxSearch = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {
     searchPlaceholder: rootSearchPlaceholder
   } = useMenuComboboxContext();
-  const {
-    enableModernizedComponents
-  } = useBlueprintModernization();
-  const SearchIcon = enableModernizedComponents ? Search : Search$1;
+  const SearchIcon = Search ;
   const resolvedPlaceholder = placeholder ?? rootSearchPlaceholder;
   return jsxs("span", {
     className: styles.searchWrapper,
@@ -34,7 +30,7 @@ const MenuComboboxSearch = /*#__PURE__*/forwardRef((props, forwardedRef) => {
       "aria-label": ariaLabel,
       autoSelect: true,
       ...rest,
-      className: clsx(styles.search, enableModernizedComponents && styles.searchModern, className),
+      className: clsx(styles.search, styles.searchModern, className),
       placeholder: resolvedPlaceholder
     })]
   });

package/dist/lib-esm/primitives/notification/private-notification-element.js

@@ -1,43 +1,14 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { XMark as XMark$1 } from '@box/blueprint-web-assets/icons/Fill';
-import { AlertTriangle as AlertTriangle$1, InfoBadge, CheckmarkBadge, AlertBadge } from '@box/blueprint-web-assets/icons/Line';
+import '@box/blueprint-web-assets/icons/Fill';
+import '@box/blueprint-web-assets/icons/Line';
 import { XMark, AlertTriangle, InformationCircle, CheckmarkCircle, AlertCircle } from '@box/blueprint-web-assets/icons/Medium';
-import { bpIconIconOnLight, bpSize050, Size5 } from '@box/blueprint-web-assets/tokens/tokens';
+import { bpIconIconOnLight, bpSize050 } from '@box/blueprint-web-assets/tokens/tokens';
 import * as Toast from '@radix-ui/react-toast';
 import clsx from 'clsx';
 import { useMemo } from 'react';
-import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
 import { IconButton } from '../icon-button/icon-button.js';
 import styles from './notification.module.js';
 
-const createLegacyIconProps = iconLabel => ({
-  className: styles.typeIcon,
-  'aria-label': iconLabel,
-  width: Size5,
-  height: Size5
-});
-const getLegacyIcon = (iconLabel, variant) => {
-  const props = createLegacyIconProps(iconLabel);
-  switch (variant) {
-    case 'error':
-      return jsx(AlertBadge, {
-        ...props
-      });
-    case 'success':
-      return jsx(CheckmarkBadge, {
-        ...props
-      });
-    case 'info':
-      return jsx(InfoBadge, {
-        ...props
-      });
-    case 'warning':
-      return jsx(AlertTriangle$1, {
-        ...props
-      });
-  }
-  return null;
-};
 const createIconProps = iconLabel => ({
   className: styles.typeIcon,
   'aria-label': iconLabel,
@@ -87,14 +58,12 @@ function PrivateNotificationElement(props) {
     children,
     ...rest
   } = props;
-  const {
-    enableModernizedComponents
-  } = useBlueprintModernization();
-  const iconComponent = useMemo(() => enableModernizedComponents ? getIcon(typeIconAriaLabel, variant) : getLegacyIcon(typeIconAriaLabel, variant), [typeIconAriaLabel, variant, enableModernizedComponents]);
+  const enableModernizedComponents = true;
+  const iconComponent = useMemo(() => getIcon(typeIconAriaLabel, variant) , [typeIconAriaLabel, variant, enableModernizedComponents]);
   return jsx(Toast.Root, {
     ...rest,
     className: clsx(styles.root, styles[variant]),
-    "data-modern": enableModernizedComponents ? 'true' : 'false',
+    "data-modern": 'true' ,
     onOpenChange: onClose,
     open: open,
     type: sensitivity,
@@ -126,7 +95,7 @@ function PrivateNotificationElement(props) {
           children: jsx(IconButton, {
             "aria-label": closeButtonAriaLabel,
             className: styles.closeButton,
-            icon: enableModernizedComponents ? XMark : XMark$1,
+            icon: XMark ,
             onClick: onClose
           })
         })
@@ -135,4 +104,4 @@ function PrivateNotificationElement(props) {
   });
 }
 
-export { PrivateNotificationElement, createIconProps, createLegacyIconProps, getIcon };
+export { PrivateNotificationElement, createIconProps, getIcon };

package/dist/lib-esm/primitives/page-header/page-header.js

@@ -1,7 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { forwardRef, createElement } from 'react';
-import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
 import { usePageStoreRef } from '../../page/page-context.js';
 import styles from './page-header.module.js';
 
@@ -14,9 +13,7 @@ const PageHeaderRoot = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     sticky = true,
     ...rest
   } = props;
-  const {
-    enableModernizedComponents
-  } = useBlueprintModernization();
+  const enableModernizedComponents = true;
   return /*#__PURE__*/createElement(as, {
     ...rest,
     ref: forwardedRef,

package/dist/lib-esm/primitives/popover/popover-content-container.js

@@ -4,7 +4,6 @@ import * as RadixPopover from '@radix-ui/react-popover';
 import clsx from 'clsx';
 import { forwardRef, useContext, useState, useMemo, useCallback } from 'react';
 import { useBlueprintConfiguration } from '../../blueprint-configuration-context/useBlueprintConfiguration.js';
-import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
 import { Card } from '../../card/card.js';
 import { useBreakpoint, Breakpoint } from '../../utils/useBreakpoint.js';
 import { useContentSizeObserver } from '../../utils/useContentSizeObserver.js';
@@ -35,9 +34,6 @@ const PopoverContentContainer = /*#__PURE__*/forwardRef((props, forwardedRef) =>
   const {
     isInteractionDisabled
   } = useContext(PopoverModalityContext);
-  const {
-    enableModernizedComponents
-  } = useBlueprintModernization();
   const {
     componentsWithAnimationEnabled
   } = useBlueprintConfiguration();
@@ -68,7 +64,7 @@ const PopoverContentContainer = /*#__PURE__*/forwardRef((props, forwardedRef) =>
           [styles.accessibilitySmallBreakpoint]: accessibilitySmallBreakpoint
         }, className),
         collisionPadding: collisionPadding,
-        "data-modern": enableModernizedComponents ? 'true' : 'false',
+        "data-modern": 'true' ,
         "data-bp-animated": isAnimationEnabled ? 'true' : 'false',
         onOpenAutoFocus: handleOpenAutoFocus,
         children: jsx(PopoverOverflowContext.Provider, {

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

@@ -1,10 +1,9 @@
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { CompositeItem, Button } from '@ariakit/react';
-import { Gray05, bpSize060, bpSize040, Size6, Size4, BrandDocgenPrimary, BrandFormsPrimary, BrandSignPrimary, BrandBoxPrimary, bpIconIconOnLight, Grimace100, GreenLight100, DarkBlue100, BoxBlue100, Gray100 } from '@box/blueprint-web-assets/tokens/tokens';
+import { Gray05, bpSize060, bpSize040, BrandDocgenPrimary, BrandFormsPrimary, BrandSignPrimary, BrandBoxPrimary, bpIconIconOnLight } from '@box/blueprint-web-assets/tokens/tokens';
 import clsx from 'clsx';
 import Color from 'color';
 import { forwardRef, createElement } from 'react';
-import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
 import { Ghost } from '../../ghost/ghost.js';
 import { Text } from '../../text/text.js';
 import { Tooltip } from '../../tooltip/tooltip.js';
@@ -38,9 +37,6 @@ const SelectMenuGridOption = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     disabled,
     ...restProps
   } = props;
-  const {
-    enableModernizedComponents
-  } = useBlueprintModernization();
   const isWithLabel = variant === 'labeled';
   const isButtonDisabled = disabled || loading;
   const isButtonActive = !disabled && !loading && active;
@@ -73,7 +69,7 @@ const SelectMenuGridOption = /*#__PURE__*/forwardRef((props, forwardedRef) => {
         [styles.active]: isButtonActive,
         [styles.dragging]: isButtonDragged
       }),
-      "data-modern": enableModernizedComponents ? 'true' : 'false',
+      "data-modern": 'true' ,
       disabled: isButtonDisabled,
       children: [variant === 'colorCircle' && jsx(ColorSwatch, {
         color: color || '',
@@ -91,7 +87,7 @@ const SelectMenuGridOption = /*#__PURE__*/forwardRef((props, forwardedRef) => {
       [styles.withLabel]: isWithLabel,
       [styles['withLabel--default']]: isWithLabel && props.size === 'default'
     }),
-    "data-modern": enableModernizedComponents ? 'true' : 'false',
+    "data-modern": 'true' ,
     role: "gridcell",
     children: [shouldShowTooltip && jsx(Tooltip, {
       "aria-hidden": true,
@@ -140,13 +136,6 @@ const Icon = ({
     })
   });
 };
-const iconColor = {
-  default: Gray100,
-  box: BoxBlue100,
-  sign: DarkBlue100,
-  forms: GreenLight100,
-  docgen: Grimace100
-};
 const iconColorModern = {
   default: bpIconIconOnLight,
   box: BrandBoxPrimary,
@@ -154,10 +143,6 @@ const iconColorModern = {
   forms: BrandFormsPrimary,
   docgen: BrandDocgenPrimary
 };
-const iconSize = {
-  default: Size4,
-  large: Size6
-};
 const iconSizeModern = {
   default: bpSize040,
   large: bpSize060
@@ -169,13 +154,10 @@ const ItemWithLabel = ({
   description,
   icon
 }) => {
-  const {
-    enableModernizedComponents
-  } = useBlueprintModernization();
   const iconElement = /*#__PURE__*/createElement(icon, {
-    color: enableModernizedComponents ? iconColorModern[colorVariant] : iconColor[colorVariant],
-    width: enableModernizedComponents ? iconSizeModern[size] : iconSize[size],
-    height: enableModernizedComponents ? iconSizeModern[size] : iconSize[size],
+    color: iconColorModern[colorVariant] ,
+    width: iconSizeModern[size] ,
+    height: iconSizeModern[size] ,
     role: 'presentation'
   });
   return jsxs(Fragment, {

package/dist/lib-esm/primitives/tabs/tab-list.js

@@ -2,7 +2,6 @@ import { jsx } from 'react/jsx-runtime';
 import { TabList as TabList$1 } from '@ariakit/react';
 import clsx from 'clsx';
 import { forwardRef } from 'react';
-import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
 import styles from './tabs.module.js';
 import { useTabs } from './use-tabs.js';
 
@@ -14,20 +13,17 @@ const TabList = /*#__PURE__*/forwardRef(function TabList(props, ref) {
     ...rest
   } = props;
   const tab = useTabs();
-  const {
-    enableModernizedComponents
-  } = useBlueprintModernization();
   if (!tab) {
     throw new Error('TabList must be wrapped in a Tabs component');
   }
   return jsx("div", {
     className: clsx(styles.tabsListContainer, containerClassname),
-    "data-modern": enableModernizedComponents ? 'true' : 'false',
+    "data-modern": 'true' ,
     children: jsx(TabList$1, {
       ...rest,
       ref: ref,
       className: clsx(variant === 'contentSwitcher' ? styles.contentSwitchTabList : styles.tabList, className),
-      "data-modern": enableModernizedComponents ? 'true' : 'false',
+      "data-modern": 'true' ,
       store: tab
     })
   });

package/dist/lib-esm/progress-bar/progress-bar.js

@@ -1,7 +1,6 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { ProgressBar as ProgressBar$1 } from 'react-aria-components';
-import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 import { useUniqueId } from '../utils/useUniqueId.js';
 import styles from './progress-bar.module.js';
 
@@ -13,9 +12,6 @@ function ProgressBar({
   ...rest
 }) {
   const resolvedLabelId = useUniqueId('progress-bar-label-', !labelId) || labelId;
-  const {
-    enableModernizedComponents
-  } = useBlueprintModernization();
   return jsxs(Fragment, {
     children: [label && jsx("div", {
       className: "label",
@@ -26,7 +22,7 @@ function ProgressBar({
       "aria-label": ariaLabel,
       "aria-labelledby": label ? resolvedLabelId : undefined,
       className: clsx(styles.reactAriaProgressBar, className),
-      "data-modern": enableModernizedComponents ? 'true' : 'false',
+      "data-modern": 'true' ,
       children: ({
         percentage
       }) => {

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

@@ -2,7 +2,6 @@ import { jsx } from 'react/jsx-runtime';
 import * as RadixRadioGroup from '@radix-ui/react-radio-group';
 import clsx from 'clsx';
 import { forwardRef } from 'react';
-import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 import styles from './radio-group.module.js';
 
 const RadioGroup = /*#__PURE__*/forwardRef((props, ref) => {
@@ -17,16 +16,13 @@ const RadioGroup = /*#__PURE__*/forwardRef((props, ref) => {
     orientation,
     ...rest
   } = props;
-  const {
-    enableModernizedComponents
-  } = useBlueprintModernization();
   return jsx(RadixRadioGroup.Root, {
     ...rest,
     ref: ref,
     className: clsx([styles.root], {
       [styles.horizontal]: orientation === 'horizontal'
     }, className),
-    "data-modern": enableModernizedComponents ? 'true' : 'false',
+    "data-modern": 'true' ,
     defaultValue: defaultValue,
     loop: loop,
     name: name,

package/dist/lib-esm/radio-tiles/radio-tiles-option.js

@@ -3,7 +3,6 @@ import clsx from 'clsx';
 import React__default, { useRef } from 'react';
 import { Text } from '../text/text.js';
 import { useRadioTilesContext } from './radio-tiles.context.js';
-import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 import { useFullTextTooltip } from '../utils/useFullTextTooltip.js';
 import { VisuallyHidden } from '../visually-hidden/visually-hidden.js';
 import styles from './radio-tiles-option.module.js';
@@ -45,16 +44,13 @@ const RadioTilesOption = function RadioTilesOption({
     [styles.checked]: isSelected,
     [styles.disabled]: isDisabled
   }, className);
-  const {
-    enableModernizedComponents
-  } = useBlueprintModernization();
   return (
     // @ts-expect-error Fix this type error - DSYS-1597
     jsx(Tooltip, {
       ...wrapperProps,
       children: jsx("div", {
         className: radioTileClassNames,
-        "data-modern": enableModernizedComponents ? 'true' : 'false',
+        "data-modern": 'true' ,
         "data-target-id": dataTargetId,
         children: jsxs("label", {
           className: clsx({

package/dist/lib-esm/radio-tiles/radio-tiles.js

@@ -1,7 +1,6 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { useMemo } from 'react';
-import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 import { InlineError } from '../primitives/inline-error/inline-error.js';
 import { useUniqueId } from '../utils/useUniqueId.js';
 import { RadioTilesOption } from './radio-tiles-option.js';
@@ -28,9 +27,6 @@ const RadioTilesRoot = ({
     [styles.hasColumns]: Number(columns) > 0,
     [variant === 'compact' ? styles.compact : styles.default]: true
   }, className);
-  const {
-    enableModernizedComponents
-  } = useBlueprintModernization();
   const hasError = !!error && !disabled;
   const inlineErrorId = useUniqueId('inline-error-');
   const contextValue = useMemo(() => ({
@@ -43,7 +39,7 @@ const RadioTilesRoot = ({
     value: contextValue,
     children: jsxs("div", {
       className: styles.container,
-      "data-modern": enableModernizedComponents ? 'true' : 'false',
+      "data-modern": 'true' ,
       children: [jsx("div", {
         "aria-describedby": hasError ? inlineErrorId : undefined,
         "aria-invalid": hasError || undefined,

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

@@ -1,10 +1,9 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { Search as Search$1 } from '@box/blueprint-web-assets/icons/Fill';
+import '@box/blueprint-web-assets/icons/Fill';
 import { Search } from '@box/blueprint-web-assets/icons/Medium';
 import { IconCtaIcon, IconIconOnLightSecondary } from '@box/blueprint-web-assets/tokens/tokens';
 import clsx from 'clsx';
 import { forwardRef, Children, useMemo, cloneElement } from 'react';
-import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
 import { IconButton } from '../../primitives/icon-button/icon-button.js';
 import { Tooltip } from '../../tooltip/tooltip.js';
 import { switchCase } from '../../utils/switchCase.js';
@@ -30,9 +29,7 @@ const SearchInputControlled = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     variant,
     ...rest
   } = props;
-  const {
-    enableModernizedComponents
-  } = useBlueprintModernization();
+  const enableModernizedComponents = true;
   const handleIEMComposition = e => {
     if (e.nativeEvent.isComposing) {
       e.preventDefault();
@@ -81,11 +78,11 @@ const SearchInputControlled = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const CustomStartIconComponent = useMemo(() => startIcon && /*#__PURE__*/cloneElement(startIcon, {
     className: clsx(startIcon.props?.className, styles.searchIcon, isGlobal && styles.global)
   }), [startIcon, isGlobal]);
-  const Search$2 = useMemo(() => enableModernizedComponents ? Search : Search$1, [enableModernizedComponents]);
+  const Search$1 = useMemo(() => Search , [enableModernizedComponents]);
   return jsxs("div", {
     className: clsx(styles.search, disabled && styles.disabled, className),
-    "data-modern": enableModernizedComponents ? 'true' : 'false',
-    children: [startIcon ? CustomStartIconComponent : jsx(Search$2, {
+    "data-modern": 'true' ,
+    children: [startIcon ? CustomStartIconComponent : jsx(Search$1, {
       "aria-hidden": "true",
       className: clsx(styles.searchIcon, isGlobal && styles.global),
       color: IconIconOnLightSecondary

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

@@ -1,10 +1,9 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { Search as Search$1, XMark as XMark$1 } from '@box/blueprint-web-assets/icons/Fill';
+import { XMark as XMark$1 } from '@box/blueprint-web-assets/icons/Fill';
 import { Search, XMark } from '@box/blueprint-web-assets/icons/Medium';
 import { IconIconOnLightSecondary, IconCtaIcon } from '@box/blueprint-web-assets/tokens/tokens';
 import clsx from 'clsx';
 import { forwardRef, useState, useCallback, Children } from 'react';
-import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 import { IconButton } from '../primitives/icon-button/icon-button.js';
 import { switchCase } from '../utils/switchCase.js';
 import styles from './search.module.js';
@@ -77,9 +76,7 @@ const SearchInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     variant,
     ...rest
   } = props;
-  const {
-    enableModernizedComponents
-  } = useBlueprintModernization();
+  const enableModernizedComponents = true;
   const [searchInputValue, setSearchInputValue] = useState(defaultValue);
   const updateSearchValue = useCallback(value => {
     setSearchInputValue(value);
@@ -104,12 +101,12 @@ const SearchInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   };
   const isGlobal = variant === 'global';
   const showActionButton = Children.count(children) > 0;
-  const Search$2 = enableModernizedComponents ? Search : Search$1;
+  const Search$1 = Search ;
   const ClearIcon = useCallback(() => getClearIcon(isGlobal, enableModernizedComponents)(), [isGlobal, enableModernizedComponents]);
   return jsxs("div", {
     className: clsx(styles.search, disabled && styles.disabled, className),
-    "data-modern": enableModernizedComponents ? 'true' : 'false',
-    children: [jsx(Search$2, {
+    "data-modern": 'true' ,
+    children: [jsx(Search$1, {
       "aria-hidden": "true",
       className: clsx(styles.searchIcon, isGlobal && styles.global),
       color: IconIconOnLightSecondary

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

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from 'react/jsx-runtime';
-import { PencilCrossed as PencilCrossed$1, Caret, Checkmark } from '@box/blueprint-web-assets/icons/Fill';
+import { Checkmark } from '@box/blueprint-web-assets/icons/Fill';
 import { PencilCrossed, ChevronDown } from '@box/blueprint-web-assets/icons/Medium';
 import { bpSize030, bpIconIconOnLight } from '@box/blueprint-web-assets/tokens/tokens';
 import * as ScrollArea from '@radix-ui/react-scroll-area';
@@ -9,7 +9,6 @@ import { forwardRef, useEffect, useCallback, useLayoutEffect } 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 { InlineError } from '../primitives/inline-error/inline-error.js';
 import { Text } from '../text/text.js';
 import { useLabelable } from '../util-components/labelable/useLabelable.js';
@@ -59,9 +58,6 @@ const Root = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     onChange: onValueChangeProp
   });
   const selectId = useUniqueId('select-', !id) || id || 'default-select-id';
-  const {
-    enableModernizedComponents
-  } = useBlueprintModernization();
   const {
     componentsWithAnimationEnabled
   } = useBlueprintConfiguration();
@@ -108,12 +104,12 @@ const Root = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   });
   const icon = (() => {
     if (readonly) {
-      const PencilCrossedIcon = enableModernizedComponents ? PencilCrossed : PencilCrossed$1;
+      const PencilCrossedIcon = PencilCrossed ;
       return jsx(PencilCrossedIcon, {
         className: styles.iconPencilCrossed
       });
     }
-    if (enableModernizedComponents) {
+    {
       return jsx(ChevronDown, {
         className: styles.iconCaret,
         color: bpIconIconOnLight,
@@ -121,16 +117,13 @@ const Root = /*#__PURE__*/forwardRef((props, forwardedRef) => {
         width: bpSize030
       });
     }
-    return jsx(Caret, {
-      className: styles.iconCaret
-    });
   })();
   return jsxs("div", {
     className: clsx(styles.container, {
       [styles.disabled]: disabled
     }, className),
     "data-bp-animated": isAnimationEnabled ? 'true' : 'false',
-    "data-modern": enableModernizedComponents ? 'true' : 'false',
+    "data-modern": 'true' ,
     children: [jsx(Label, {
       className: styles.label,
       hideLabel: hideLabel
@@ -227,9 +220,6 @@ const Content = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     onAnimationEnd: onAnimationEndProp,
     ...contentProps
   } = props;
-  const {
-    enableModernizedComponents
-  } = useBlueprintModernization();
   const {
     completeExit,
     hasExitStyles,
@@ -248,7 +238,7 @@ const Content = /*#__PURE__*/forwardRef((props, forwardedRef) => {
       className: clsx(styles.content, className),
       "data-bp-animated": isAnimationEnabled ? 'true' : 'false',
       "data-bp-exiting": hasExitStyles ? 'true' : 'false',
-      "data-modern": enableModernizedComponents ? 'true' : 'false',
+      "data-modern": 'true' ,
       onAnimationEnd: composeEventHandlers(onAnimationEndProp, handleExitAnimationEvent, {
         checkForDefaultPrevented: false
       }),

package/dist/lib-esm/side-panel/side-panel-close.js

@@ -1,9 +1,8 @@
 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 { forwardRef, useMemo } from 'react';
-import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 import { IconButton } from '../primitives/icon-button/icon-button.js';
 import { useBreakpoint, Breakpoint } from '../utils/useBreakpoint.js';
 import styles from './side-panel.module.js';
@@ -21,12 +20,10 @@ const SidePanelClose = /*#__PURE__*/forwardRef(({
 }, forwardedRef) => {
   const breakpoint = useBreakpoint();
   const smallBreakpointActive = breakpoint === Breakpoint.Small;
-  const {
-    enableModernizedComponents
-  } = useBlueprintModernization();
+  const enableModernizedComponents = true;
   const finalProps = smallBreakpointActive ? smallViewportProps : {};
   const closeIcon = useMemo(() => {
-    return enableModernizedComponents ? XMark : XMark$1;
+    return XMark ;
   }, [enableModernizedComponents]);
   return jsx(RadixDialog.Close, {
     ref: forwardedRef,

package/dist/lib-esm/side-panel/side-panel-content.js

@@ -3,7 +3,6 @@ import * as RadixDialog from '@radix-ui/react-dialog';
 import { FocusScope } from '@radix-ui/react-focus-scope';
 import { clsx } from 'clsx';
 import { forwardRef, useCallback } from 'react';
-import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 import styles from './side-panel.module.js';
 import { useVariant } from './variant-context.js';
 
@@ -25,9 +24,6 @@ const SidePanelContent = /*#__PURE__*/forwardRef(({
       event.preventDefault();
     }
   }, [isInteractiveOverlayVariant]);
-  const {
-    enableModernizedComponents
-  } = useBlueprintModernization();
   return jsx(FocusScope, {
     trapped: !isInteractiveOverlayVariant,
     children: jsx(RadixDialog.Content, {
@@ -41,7 +37,7 @@ const SidePanelContent = /*#__PURE__*/forwardRef(({
         [styles.dropShadowContent]: variant === 'dropShadowOverlay',
         [styles.overlayContent]: isOverlayVariant
       }, className),
-      "data-modern": enableModernizedComponents ? 'true' : 'false',
+      "data-modern": 'true' ,
       onInteractOutside: handleInteractOutside,
       children: children
     })
@@ -55,13 +51,10 @@ const SidePanelPersistentContent = /*#__PURE__*/forwardRef(({
   className,
   ...props
 }, forwardedRef) => {
-  const {
-    enableModernizedComponents
-  } = useBlueprintModernization();
   return jsx("div", {
     ref: forwardedRef,
     className: clsx(styles.content, styles.contentNormal, styles.persistentContent, className),
-    "data-modern": enableModernizedComponents ? 'true' : 'false',
+    "data-modern": 'true' ,
     ...props,
     children: children
   });

package/dist/lib-esm/side-panel/side-panel-overlay.js

@@ -2,7 +2,6 @@ import { jsx } from 'react/jsx-runtime';
 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 styles from './side-panel.module.js';
 import { useVariant } from './variant-context.js';
 
@@ -17,9 +16,6 @@ const SidePanelOverlay = /*#__PURE__*/forwardRef(({
   ...props
 }, forwardedRef) => {
   const variant = useVariant();
-  const {
-    enableModernizedComponents
-  } = useBlueprintModernization();
   return jsx(RadixDialog.Portal, {
     container: container,
     children: variant === 'interactiveOverlay' ? children : jsx(RadixDialog.Overlay, {
@@ -27,7 +23,7 @@ const SidePanelOverlay = /*#__PURE__*/forwardRef(({
       className: clsx(styles.overlay, {
         [styles.dropShadowOverlay]: variant === 'dropShadowOverlay'
       }, className),
-      "data-modern": enableModernizedComponents ? 'true' : 'false',
+      "data-modern": 'true' ,
       ...props,
       children: children
     })

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

@@ -1,6 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
-import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 import { BaseGridList } from '../util-components/base-grid-list-item/base-grid-list.js';
 
 const SmallList = /*#__PURE__*/forwardRef(function SmallList(props, forwardedRef) {
@@ -8,13 +7,10 @@ const SmallList = /*#__PURE__*/forwardRef(function SmallList(props, forwardedRef
     children,
     ...rest
   } = props;
-  const {
-    enableModernizedComponents
-  } = useBlueprintModernization();
   return jsx(BaseGridList, {
     ...rest,
     ref: forwardedRef,
-    "data-modern": enableModernizedComponents ? 'true' : 'false',
+    "data-modern": 'true' ,
     layoutStyle: "small-list",
     children: children
   });