@box/blueprint-web 16.20.7 → 17.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (103) hide show
  1. package/dist/lib-esm/accordion/accordion.js +7 -18
  2. package/dist/lib-esm/avatar/avatar.js +1 -5
  3. package/dist/lib-esm/blueprint-modernization-context/blueprint-modernization-context.d.ts +20 -1
  4. package/dist/lib-esm/blueprint-modernization-context/blueprint-modernization-context.js +10 -2
  5. package/dist/lib-esm/blueprint-modernization-context/index.d.ts +4 -0
  6. package/dist/lib-esm/blueprint-modernization-context/useBlueprintModernization.d.ts +4 -0
  7. package/dist/lib-esm/blueprint-modernization-context/useBlueprintModernization.js +4 -0
  8. package/dist/lib-esm/card/card.js +1 -5
  9. package/dist/lib-esm/card-tooltip/card-tooltip.js +1 -5
  10. package/dist/lib-esm/checkbox/checkbox-item.js +1 -5
  11. package/dist/lib-esm/collapsible/collapsible-section.js +6 -9
  12. package/dist/lib-esm/combobox/combobox.js +8 -15
  13. package/dist/lib-esm/combobox-group/combobox-group.js +1 -5
  14. package/dist/lib-esm/components.css +16 -15
  15. package/dist/lib-esm/content-card/content-card-body.js +2 -6
  16. package/dist/lib-esm/content-card/content-card.js +2 -9
  17. package/dist/lib-esm/data-table/data-table.module.js +1 -1
  18. package/dist/lib-esm/date-picker/date-picker.js +1 -5
  19. package/dist/lib-esm/ghost/ghost.js +1 -4
  20. package/dist/lib-esm/icon-dual-state-button/icon-dual-state-button.js +1 -5
  21. package/dist/lib-esm/icon-toggle-button/icon-toggle-button.js +5 -14
  22. package/dist/lib-esm/index.css +16 -15
  23. package/dist/lib-esm/inline-table/inline-table.js +1 -5
  24. package/dist/lib-esm/input-chip/input-chip.js +2 -5
  25. package/dist/lib-esm/list-item/table-column.js +6 -15
  26. package/dist/lib-esm/list-item/table-header-default.js +1 -5
  27. package/dist/lib-esm/list-item/table.js +1 -4
  28. package/dist/lib-esm/loading-indicator/loading-indicator.js +1 -6
  29. package/dist/lib-esm/modal/modal-close.js +2 -6
  30. package/dist/lib-esm/modal/modal-content.js +1 -5
  31. package/dist/lib-esm/navigation-menu/navigation-menu-content.js +1 -5
  32. package/dist/lib-esm/navigation-menu/navigation-menu-link.js +1 -5
  33. package/dist/lib-esm/page/page-root.js +1 -5
  34. package/dist/lib-esm/primitives/base-button/base-button-icon.js +1 -4
  35. package/dist/lib-esm/primitives/base-button/base-button.js +1 -5
  36. package/dist/lib-esm/primitives/base-inline-notice/base-inline-notice-icon.js +4 -12
  37. package/dist/lib-esm/primitives/base-inline-notice/base-inline-notice.js +1 -5
  38. package/dist/lib-esm/primitives/base-text-input/base-text-input.js +4 -10
  39. package/dist/lib-esm/primitives/calendar/calendar.js +5 -8
  40. package/dist/lib-esm/primitives/chips/chip.js +1 -5
  41. package/dist/lib-esm/primitives/chips/chips-group.js +1 -5
  42. package/dist/lib-esm/primitives/context-menu/context-menu-item.js +2 -6
  43. package/dist/lib-esm/primitives/context-menu/context-menu-menu-content.js +2 -6
  44. package/dist/lib-esm/primitives/context-menu/context-menu-menu-header.js +1 -5
  45. package/dist/lib-esm/primitives/context-menu/context-menu-sub-menu-content.js +2 -6
  46. package/dist/lib-esm/primitives/dropdown-menu/dropdown-menu-checkbox-item.js +6 -10
  47. package/dist/lib-esm/primitives/dropdown-menu/dropdown-menu-content.js +2 -6
  48. package/dist/lib-esm/primitives/dropdown-menu/dropdown-menu-header.js +4 -11
  49. package/dist/lib-esm/primitives/dropdown-menu/dropdown-menu-item.js +3 -7
  50. package/dist/lib-esm/primitives/dropdown-menu/dropdown-menu-radio-select-item.js +6 -10
  51. package/dist/lib-esm/primitives/dropdown-menu/dropdown-menu-sub-menu-content.js +2 -6
  52. package/dist/lib-esm/primitives/icon-button/icon-button.js +1 -5
  53. package/dist/lib-esm/primitives/inline-error/inline-error.js +3 -6
  54. package/dist/lib-esm/primitives/link/link.js +1 -5
  55. package/dist/lib-esm/primitives/menu-combobox/menu-combobox-content.js +1 -5
  56. package/dist/lib-esm/primitives/menu-combobox/menu-combobox-empty.js +1 -5
  57. package/dist/lib-esm/primitives/menu-combobox/menu-combobox-header.js +2 -6
  58. package/dist/lib-esm/primitives/menu-combobox/menu-combobox-search.js +3 -7
  59. package/dist/lib-esm/primitives/notification/private-notification-element.js +8 -39
  60. package/dist/lib-esm/primitives/page-header/page-header.js +1 -4
  61. package/dist/lib-esm/primitives/popover/popover-content-container.js +1 -5
  62. package/dist/lib-esm/primitives/select-menu-grid/select-menu-grid-option.js +6 -24
  63. package/dist/lib-esm/primitives/tabs/tab-list.js +2 -6
  64. package/dist/lib-esm/progress-bar/progress-bar.js +1 -5
  65. package/dist/lib-esm/radio-group/radio-group.js +1 -5
  66. package/dist/lib-esm/radio-tiles/radio-tiles-option.js +1 -5
  67. package/dist/lib-esm/radio-tiles/radio-tiles.js +1 -5
  68. package/dist/lib-esm/search-input/search-input-controlled/search-input-controlled.js +5 -8
  69. package/dist/lib-esm/search-input/search-input.js +5 -8
  70. package/dist/lib-esm/select/select.js +5 -15
  71. package/dist/lib-esm/side-panel/side-panel-close.js +3 -6
  72. package/dist/lib-esm/side-panel/side-panel-content.js +2 -9
  73. package/dist/lib-esm/side-panel/side-panel-overlay.js +1 -5
  74. package/dist/lib-esm/small-list-item/small-list.js +1 -5
  75. package/dist/lib-esm/split-button/split-button.js +2 -6
  76. package/dist/lib-esm/status/status.js +1 -5
  77. package/dist/lib-esm/switch/switch-item.js +1 -5
  78. package/dist/lib-esm/text/text.js +1 -5
  79. package/dist/lib-esm/text-area/text-area-autosize/text-area-autosize.js +5 -19
  80. package/dist/lib-esm/text-area/text-area-autosize/text-area-autosize.module.js +1 -1
  81. package/dist/lib-esm/text-area/text-area.js +1 -5
  82. package/dist/lib-esm/text-button/text-button.js +1 -5
  83. package/dist/lib-esm/text-input/text-input.js +3 -6
  84. package/dist/lib-esm/text-toggle-button/text-toggle-button.js +1 -5
  85. package/dist/lib-esm/time-picker/time-picker.js +6 -22
  86. package/dist/lib-esm/toolbar/toolbar-button.js +1 -5
  87. package/dist/lib-esm/toolbar/toolbar-dropdown-indicator.js +3 -6
  88. package/dist/lib-esm/toolbar/toolbar-input.js +1 -5
  89. package/dist/lib-esm/toolbar/toolbar-link.js +1 -5
  90. package/dist/lib-esm/toolbar/toolbar-root.js +3 -6
  91. package/dist/lib-esm/toolbar/toolbar-text-toggle-item.js +1 -5
  92. package/dist/lib-esm/toolbar/toolbar-toggle-group.js +1 -5
  93. package/dist/lib-esm/toolbar/toolbar-toggle-item.js +1 -5
  94. package/dist/lib-esm/tooltip/tooltip.js +2 -19
  95. package/dist/lib-esm/trigger-button/trigger-button.js +4 -11
  96. package/dist/lib-esm/util-components/base-grid-list-item/base-grid-list.js +1 -5
  97. package/dist/lib-esm/util-components/base-grid-list-item/utils/rac-tooltip.js +3 -6
  98. package/dist/lib-esm/util-components/legend/legend.js +1 -6
  99. package/dist/lib-esm/util-components/list-checkbox/list-checkbox.js +1 -5
  100. package/dist/lib-esm/util-components/menu-item-sections/menu-item-sections.js +2 -9
  101. package/dist/lib-esm/util-components/text-with-info-badge/text-with-info-badge.js +1 -6
  102. package/dist/lib-esm/utils/TooltipWrapper.d.ts +1 -1
  103. package/package.json +3 -3
@@ -1,10 +1,9 @@
1
1
  import { jsx, jsxs } from 'react/jsx-runtime';
2
- import { PointerChevron } from '@box/blueprint-web-assets/icons/Fill';
2
+ import '@box/blueprint-web-assets/icons/Fill';
3
3
  import { ChevronRight } from '@box/blueprint-web-assets/icons/Medium';
4
4
  import * as RadixAccordion from '@radix-ui/react-accordion';
5
5
  import clsx from 'clsx';
6
6
  import { useRef } from 'react';
7
- import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
8
7
  import { Ghost } from '../ghost/ghost.js';
9
8
  import { InlineNotice } from '../inline-notice/inline-notice.js';
10
9
  import { AccordionItemHeader, AccordionActionSlot } from './accordion-item-header.js';
@@ -21,12 +20,9 @@ import styles from './accordion.module.js';
21
20
  * </Accordion>
22
21
  */
23
22
  const Root = props => {
24
- const {
25
- enableModernizedComponents
26
- } = useBlueprintModernization();
27
23
  return jsx(RadixAccordion.Root, {
28
24
  ...props,
29
- className: enableModernizedComponents ? styles.accordion : ''
25
+ className: styles.accordion
30
26
  });
31
27
  };
32
28
  const Item = props => {
@@ -38,15 +34,12 @@ const Item = props => {
38
34
  ...rest
39
35
  } = props;
40
36
  const accordionItemClasses = clsx(styles.accordionItem, className);
41
- const {
42
- enableModernizedComponents
43
- } = useBlueprintModernization();
44
37
  const triggerRef = useRef(null);
45
38
  if (loading) {
46
39
  return jsx("div", {
47
40
  ...rest,
48
41
  className: accordionItemClasses,
49
- "data-modern": enableModernizedComponents ? 'true' : 'false',
42
+ "data-modern": 'true' ,
50
43
  children: jsx("button", {
51
44
  "aria-label": loadingAriaLabel,
52
45
  className: styles.accordionTrigger,
@@ -62,7 +55,7 @@ const Item = props => {
62
55
  return jsx("div", {
63
56
  ...rest,
64
57
  className: accordionItemClasses,
65
- "data-modern": enableModernizedComponents ? 'true' : 'false',
58
+ "data-modern": 'true' ,
66
59
  children: jsx("div", {
67
60
  className: clsx({
68
61
  [styles.accordionFixedContent]: Boolean(children)
@@ -89,15 +82,11 @@ const Item = props => {
89
82
  highlighted,
90
83
  ...itemRest
91
84
  } = props;
92
- const chevronIcon = enableModernizedComponents ? jsx(ChevronRight, {
85
+ const chevronIcon = jsx(ChevronRight, {
93
86
  "aria-hidden": "true",
94
87
  className: styles.accordionTriggerIcon,
95
88
  color: "var(--bp-icon-icon-on-light-secondary)"
96
- }) : jsx(PointerChevron, {
97
- "aria-hidden": "true",
98
- className: styles.accordionTriggerIcon,
99
- color: "var(--bp-gray-100)"
100
- });
89
+ }) ;
101
90
  const handleChevronClick = () => {
102
91
  triggerRef.current?.click();
103
92
  };
@@ -106,7 +95,7 @@ const Item = props => {
106
95
  className: clsx(accordionItemClasses, {
107
96
  [styles.highlighted]: highlighted
108
97
  }),
109
- "data-modern": enableModernizedComponents ? 'true' : 'false',
98
+ "data-modern": 'true' ,
110
99
  children: [jsx(RadixAccordion.Header, {
111
100
  asChild: true,
112
101
  children: jsxs("div", {
@@ -3,7 +3,6 @@ import { Avatar as Avatar$1 } from '@box/blueprint-web-assets/icons/Line';
3
3
  import { GrayBlack } from '@box/blueprint-web-assets/tokens/tokens';
4
4
  import clsx from 'clsx';
5
5
  import React__default, { forwardRef, useState, useEffect } from 'react';
6
- import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
7
6
  import { getContrastTextColor } from '../utils/getContrastTextColor.js';
8
7
  import styles from './avatar.module.js';
9
8
  import { colors, iconSizes } from './consts.js';
@@ -23,9 +22,6 @@ const Avatar = /*#__PURE__*/forwardRef((props, forwardedRef) => {
23
22
  text,
24
23
  ...rest
25
24
  } = props;
26
- const {
27
- enableModernizedComponents
28
- } = useBlueprintModernization();
29
25
  const [imageIsLoaded, setImageIsLoaded] = useState(false);
30
26
  const [imageHasError, setImageHasError] = useState(false);
31
27
  useEffect(() => {
@@ -87,7 +83,7 @@ const Avatar = /*#__PURE__*/forwardRef((props, forwardedRef) => {
87
83
  });
88
84
  return jsx("div", {
89
85
  className: clsx(styles.avatar, styles[size], className),
90
- "data-modern": enableModernizedComponents ? 'true' : 'false',
86
+ "data-modern": 'true' ,
91
87
  children: avatarContents
92
88
  });
93
89
  });
@@ -1,9 +1,28 @@
1
1
  import { type ReactNode } from 'react';
2
+ /**
3
+ * @deprecated Modernized Blueprint UI is always on. Blueprint components no longer read this context.
4
+ * The API remains for consumer compatibility and will be removed in Q3FY27.
5
+ */
2
6
  export interface BlueprintModernizationContextValue {
7
+ /**
8
+ * @deprecated Ignored by Blueprint components — modern UI is always on. Will be removed in Q3FY27.
9
+ */
3
10
  enableModernizedComponents: boolean;
4
11
  }
12
+ /**
13
+ * @deprecated Modernized Blueprint UI is always on. Blueprint components no longer read this context.
14
+ * The API remains for consumer compatibility and will be removed in Q3FY27.
15
+ */
5
16
  export declare const BlueprintModernizationContext: import("react").Context<BlueprintModernizationContextValue>;
17
+ /**
18
+ * @deprecated Modernized Blueprint UI is always on. Blueprint components ignore `enableModernizedComponents`.
19
+ * Will be removed in Q3FY27.
20
+ */
6
21
  export declare const BlueprintModernizationProvider: ({ children, enableModernizedComponents, }: {
7
22
  children: ReactNode;
8
- enableModernizedComponents: boolean;
23
+ /**
24
+ * @deprecated Ignored by Blueprint components — modern UI is always on. Optional for TypeScript
25
+ * compatibility; will be removed in Q3FY27.
26
+ */
27
+ enableModernizedComponents?: boolean;
9
28
  }) => import("react/jsx-runtime").JSX.Element;
@@ -1,12 +1,20 @@
1
1
  import { jsx } from 'react/jsx-runtime';
2
2
  import { createContext, useMemo } from 'react';
3
3
 
4
+ /**
5
+ * @deprecated Modernized Blueprint UI is always on. Blueprint components no longer read this context.
6
+ * The API remains for consumer compatibility and will be removed in Q3FY27.
7
+ */
4
8
  const BlueprintModernizationContext = /*#__PURE__*/createContext({
5
- enableModernizedComponents: false
9
+ enableModernizedComponents: true
6
10
  });
11
+ /**
12
+ * @deprecated Modernized Blueprint UI is always on. Blueprint components ignore `enableModernizedComponents`.
13
+ * Will be removed in Q3FY27.
14
+ */
7
15
  const BlueprintModernizationProvider = ({
8
16
  children,
9
- enableModernizedComponents
17
+ enableModernizedComponents = true
10
18
  }) => {
11
19
  const value = useMemo(() => ({
12
20
  enableModernizedComponents
@@ -1,3 +1,7 @@
1
+ /**
2
+ * @deprecated Modernized Blueprint UI is always on. This module remains for consumer compatibility
3
+ * and will be removed in Q3FY27. See LEGACY_REMOVAL_PLAN.md.
4
+ */
1
5
  export { BlueprintModernizationContext, BlueprintModernizationProvider, type BlueprintModernizationContextValue, } from './blueprint-modernization-context';
2
6
  export { BLUEPRINT_UPLIFT_FEATURE_FLAG } from './consts';
3
7
  export { useBlueprintModernization } from './useBlueprintModernization';
@@ -1 +1,5 @@
1
+ /**
2
+ * @deprecated Modernized Blueprint UI is always on. Blueprint components no longer use this hook.
3
+ * The API remains for consumer compatibility and will be removed in Q3FY27.
4
+ */
1
5
  export declare const useBlueprintModernization: () => import("./blueprint-modernization-context").BlueprintModernizationContextValue;
@@ -1,6 +1,10 @@
1
1
  import { useContext } from 'react';
2
2
  import { BlueprintModernizationContext } from './blueprint-modernization-context.js';
3
3
 
4
+ /**
5
+ * @deprecated Modernized Blueprint UI is always on. Blueprint components no longer use this hook.
6
+ * The API remains for consumer compatibility and will be removed in Q3FY27.
7
+ */
4
8
  const useBlueprintModernization = () => {
5
9
  const context = useContext(BlueprintModernizationContext);
6
10
  if (context === undefined) {
@@ -1,7 +1,6 @@
1
1
  import { jsx } from 'react/jsx-runtime';
2
2
  import clsx from 'clsx';
3
3
  import { forwardRef } from 'react';
4
- import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
5
4
  import styles from './card.module.js';
6
5
 
7
6
  /**
@@ -14,14 +13,11 @@ const Card = /*#__PURE__*/forwardRef((props, forwardedRef) => {
14
13
  elevation: elevationToken,
15
14
  ...rest
16
15
  } = props;
17
- const {
18
- enableModernizedComponents
19
- } = useBlueprintModernization();
20
16
  return jsx("div", {
21
17
  ...rest,
22
18
  ref: forwardedRef,
23
19
  className: clsx(styles.card, elevationToken && styles[elevationToken], className),
24
- "data-modern": enableModernizedComponents ? 'true' : 'false',
20
+ "data-modern": 'true' ,
25
21
  children: children
26
22
  });
27
23
  });
@@ -5,7 +5,6 @@ import { forwardRef, useRef, useLayoutEffect, useCallback } from 'react';
5
5
  import '../blueprint-configuration-context/blueprint-configuration-context.js';
6
6
  import '../blueprint-configuration-context/consts.js';
7
7
  import { useBlueprintConfiguration } from '../blueprint-configuration-context/useBlueprintConfiguration.js';
8
- import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
9
8
  import { Card } from '../card/card.js';
10
9
  import { composeEventHandlers } from '../utils/composeEventHandlers.js';
11
10
  import styles from './card-tooltip.module.js';
@@ -50,9 +49,6 @@ const CardTooltip = /*#__PURE__*/forwardRef((props, ref) => {
50
49
  const mounted = Ariakit.useStoreState(tooltipStore, 'mounted');
51
50
  const isOpen = Ariakit.useStoreState(tooltipStore, 'open');
52
51
  const focusTimeout = useRef(0);
53
- const {
54
- enableModernizedComponents
55
- } = useBlueprintModernization();
56
52
  const {
57
53
  componentsWithAnimationEnabled
58
54
  } = useBlueprintConfiguration();
@@ -118,7 +114,7 @@ const CardTooltip = /*#__PURE__*/forwardRef((props, ref) => {
118
114
  ref: ref,
119
115
  className: clsx(styles.content, className),
120
116
  "data-bp-animated": isAnimationEnabled ? 'true' : 'false',
121
- "data-modern": enableModernizedComponents ? 'true' : 'false',
117
+ "data-modern": 'true' ,
122
118
  "data-side": side,
123
119
  fitViewport: true,
124
120
  gutter: 4,
@@ -7,7 +7,6 @@ import { forwardRef } from 'react';
7
7
  import '../blueprint-configuration-context/blueprint-configuration-context.js';
8
8
  import '../blueprint-configuration-context/consts.js';
9
9
  import { useBlueprintConfiguration } from '../blueprint-configuration-context/useBlueprintConfiguration.js';
10
- import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
11
10
  import { TextWithInfoBadge } from '../util-components/text-with-info-badge/text-with-info-badge.js';
12
11
  import { useUniqueId } from '../utils/useUniqueId.js';
13
12
  import styles from './checkbox.module.js';
@@ -31,9 +30,6 @@ const CheckboxItem = /*#__PURE__*/forwardRef((props, ref) => {
31
30
  ...rest
32
31
  } = props;
33
32
  const descriptionId = useUniqueId('description-', !!description);
34
- const {
35
- enableModernizedComponents
36
- } = useBlueprintModernization();
37
33
  const {
38
34
  componentsWithAnimationEnabled
39
35
  } = useBlueprintConfiguration();
@@ -43,7 +39,7 @@ const CheckboxItem = /*#__PURE__*/forwardRef((props, ref) => {
43
39
  [styles.disabled]: disabled
44
40
  }, className),
45
41
  "data-bp-animated": isAnimationEnabled ? 'true' : 'false',
46
- "data-modern": enableModernizedComponents ? 'true' : 'false',
42
+ "data-modern": 'true' ,
47
43
  children: [jsxs("label", {
48
44
  className: styles.label,
49
45
  "data-target-id": dataTargetId,
@@ -1,11 +1,10 @@
1
1
  import { jsxs, jsx } from 'react/jsx-runtime';
2
- import { PointerChevronDown, PointerChevronUp } from '@box/blueprint-web-assets/icons/Fill';
2
+ import '@box/blueprint-web-assets/icons/Fill';
3
3
  import { ChevronDown, ChevronUp, ChevronRight } from '@box/blueprint-web-assets/icons/Medium';
4
4
  import { Size4 } from '@box/blueprint-web-assets/tokens/tokens';
5
5
  import * as Collapsible from '@radix-ui/react-collapsible';
6
6
  import clsx from 'clsx';
7
7
  import { forwardRef, useState, useEffect, useCallback, useMemo } from 'react';
8
- import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
9
8
  import { IconButton } from '../primitives/icon-button/icon-button.js';
10
9
  import { Slot } from '../primitives/slot.js';
11
10
  import { useNamedSlots } from '../utils/useNamedSlots.hook.js';
@@ -22,9 +21,7 @@ const CollapsibleSectionImpl = /*#__PURE__*/forwardRef((props, forwardedRef) =>
22
21
  variant = 'default',
23
22
  ...rest
24
23
  } = props;
25
- const {
26
- enableModernizedComponents
27
- } = useBlueprintModernization();
24
+ const enableModernizedComponents = true;
28
25
  const [collapsibleSectionOpen, setCollapsibleSectionOpen] = useState(open);
29
26
  const [headerSlot, contentSlot, actionSlot] = useNamedSlots(children, ['header', 'content', 'action']);
30
27
  useEffect(() => {
@@ -35,9 +32,9 @@ const CollapsibleSectionImpl = /*#__PURE__*/forwardRef((props, forwardedRef) =>
35
32
  onOpenChange?.(isOpen);
36
33
  }, [onOpenChange]);
37
34
  const icon = useMemo(() => ({
38
- up: enableModernizedComponents ? ChevronUp : PointerChevronUp,
39
- down: enableModernizedComponents ? ChevronDown : PointerChevronDown,
40
- size: enableModernizedComponents ? 'large' : 'x-small'
35
+ up: ChevronUp ,
36
+ down: ChevronDown ,
37
+ size: 'large'
41
38
  }), [enableModernizedComponents]);
42
39
  const BorderlessIcon = useMemo(() => collapsibleSectionOpen ? ChevronDown : ChevronRight, [collapsibleSectionOpen]);
43
40
  const iconAriaLabel = useMemo(() => collapsibleSectionOpen ? closeSectionButtonAriaLabel : openSectionButtonAriaLabel, [collapsibleSectionOpen, closeSectionButtonAriaLabel, openSectionButtonAriaLabel]);
@@ -52,7 +49,7 @@ const CollapsibleSectionImpl = /*#__PURE__*/forwardRef((props, forwardedRef) =>
52
49
  ...rest,
53
50
  ref: forwardedRef,
54
51
  className: clsx(styles.collapsibleSection, className),
55
- "data-modern": enableModernizedComponents ? 'true' : 'false',
52
+ "data-modern": 'true' ,
56
53
  "data-variant": variant,
57
54
  onOpenChange: onCollapsibleOpenChanged,
58
55
  open: collapsibleSectionOpen,
@@ -1,12 +1,11 @@
1
1
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
2
2
  import { SelectItemCheck, SelectItem, ComboboxItem, useComboboxStore, useSelectStore, PopoverAnchor, Combobox as Combobox$1, ComboboxCancel, SelectList, ComboboxPopover } from '@ariakit/react';
3
3
  import { SelectRenderer } from '@ariakit/react-core/select/select-renderer';
4
- import { Checkmark, AlertBadge, XMark as XMark$1 } from '@box/blueprint-web-assets/icons/Fill';
4
+ import { Checkmark } from '@box/blueprint-web-assets/icons/Fill';
5
5
  import { AlertCircle, XMark } from '@box/blueprint-web-assets/icons/Medium';
6
- import { bpIconIconOnLight, IconIconOnLight, IconIconErrorOnLight } from '@box/blueprint-web-assets/tokens/tokens';
6
+ import { bpIconIconOnLight, IconIconErrorOnLight } from '@box/blueprint-web-assets/tokens/tokens';
7
7
  import clsx from 'clsx';
8
8
  import React__default, { forwardRef, useMemo, useRef, useCallback, useEffect } from 'react';
9
- import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
10
9
  import { Focusable } from '../focusable/focusable.js';
11
10
  import { InputChip } from '../input-chip/input-chip.js';
12
11
  import { LoadingIndicator } from '../loading-indicator/loading-indicator.js';
@@ -101,9 +100,6 @@ const RootInner = ({
101
100
  getPopoverRef?.(node);
102
101
  }, [getPopoverRef]);
103
102
  const hasError = !!error && !disabled;
104
- const {
105
- enableModernizedComponents
106
- } = useBlueprintModernization();
107
103
  const comboboxStore = useComboboxStore({
108
104
  // Input state
109
105
  defaultValue: defaultInputValue,
@@ -340,7 +336,7 @@ const RootInner = ({
340
336
  const showComboboxCancelButton = clearButtonAriaLabel && (inputValue.length > 0 || (Array.isArray(selectedValue) ? selectedValue.length > 0 : !!selectedValue));
341
337
  const showSingleSelectChip = displaySingleSelectionAsChip && !Array.isArray(selectedValue) && !!selectedValue;
342
338
  const showInlineError = errorVariant === 'inline' && hasError;
343
- const InlineErrorIcon = enableModernizedComponents ? AlertCircle : AlertBadge;
339
+ const InlineErrorIcon = AlertCircle ;
344
340
  const Label = useLabelable(label, comboboxId, required);
345
341
  const inlineErrorId = useUniqueId('inline-error-');
346
342
  const ariaDescribedBy = clsx(rest['aria-describedby'], {
@@ -421,7 +417,7 @@ const RootInner = ({
421
417
  children: jsx(InlineErrorIcon, {
422
418
  className: styles.inlineErrorIcon,
423
419
  color: IconIconErrorOnLight,
424
- "data-testid": enableModernizedComponents ? 'combobox-inline-error-icon-modern' : 'combobox-inline-error-icon-legacy'
420
+ "data-testid": 'combobox-inline-error-icon-modern'
425
421
  })
426
422
  })
427
423
  }), jsx(VisuallyHidden, {
@@ -434,7 +430,7 @@ const RootInner = ({
434
430
  render: cancelProps => jsx(IconButton, {
435
431
  ...cancelProps,
436
432
  "aria-label": clearButtonAriaLabel,
437
- icon: enableModernizedComponents ? XMark : XMark$1,
433
+ icon: XMark ,
438
434
  size: "x-small"
439
435
  }),
440
436
  store: comboboxStore
@@ -484,12 +480,12 @@ const RootInner = ({
484
480
  className: clsx(styles.container, {
485
481
  [styles.disabled]: disabled
486
482
  }, className),
487
- "data-modern": enableModernizedComponents ? 'true' : 'false',
483
+ "data-modern": 'true' ,
488
484
  children: [inputComponent, showLoading || filteredOptions.length > 0 || filteredOptions.length <= 0 && noResultMessage ? jsx(ComboboxPopover, {
489
485
  ref: popoverRefCallback,
490
486
  "aria-labelledby": comboboxId,
491
487
  className: clsx(styles.popover, popoverClassName),
492
- "data-modern": enableModernizedComponents ? 'true' : 'false',
488
+ "data-modern": 'true' ,
493
489
  fitViewport: true,
494
490
  gutter: 8,
495
491
  hideOnEscape: hideOnEscape,
@@ -518,10 +514,7 @@ const RootInner = ({
518
514
  };
519
515
  const Root = /*#__PURE__*/forwardRef(RootInner);
520
516
  const Indicator = /*#__PURE__*/forwardRef((_, ref) => {
521
- const {
522
- enableModernizedComponents
523
- } = useBlueprintModernization();
524
- const iconColor = enableModernizedComponents ? bpIconIconOnLight : IconIconOnLight;
517
+ const iconColor = bpIconIconOnLight ;
525
518
  return jsx(SelectItemCheck, {
526
519
  ref: ref,
527
520
  className: styles.indicator,
@@ -1,7 +1,6 @@
1
1
  import { jsx, jsxs } from 'react/jsx-runtime';
2
2
  import clsx from 'clsx';
3
3
  import { forwardRef } from 'react';
4
- import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
5
4
  import { InlineError } from '../primitives/inline-error/inline-error.js';
6
5
  import { useLabelable } from '../util-components/labelable/useLabelable.js';
7
6
  import { ComboboxGroupCombobox, ComboboxGroupComboboxSingleSelect } from './combobox-group-combobox.js';
@@ -22,9 +21,6 @@ const Root = /*#__PURE__*/forwardRef(({
22
21
  isDisabled,
23
22
  subcomponentId
24
23
  } = useComboboxGroupContext();
25
- const {
26
- enableModernizedComponents
27
- } = useBlueprintModernization();
28
24
  const selectHasError = !!errors.select;
29
25
  const comboboxHasError = !!errors.combobox;
30
26
  const Label = useLabelable(label, subcomponentId);
@@ -34,7 +30,7 @@ const Root = /*#__PURE__*/forwardRef(({
34
30
  className: clsx(styles.container, {
35
31
  [styles.disabled]: isDisabled
36
32
  }),
37
- "data-modern": enableModernizedComponents ? 'true' : 'false',
33
+ "data-modern": 'true' ,
38
34
  children: [jsx(Label, {
39
35
  className: styles.label,
40
36
  hideLabel: hideLabel
@@ -6950,55 +6950,56 @@
6950
6950
  overflow:auto;
6951
6951
  }
6952
6952
 
6953
- .bp_data_table_module_dataTableWrapper--9a3ae{
6953
+ .bp_data_table_module_dataTableWrapper--c7392{
6954
6954
  --border-radius-datatable:0;
6955
6955
  --outline-offset-focus-and-selected-row-datatable:-0.25rem;
6956
6956
  --outline-select-color-datatable:#0000;
6957
6957
  --sticky-element-z-index:2;
6958
6958
  height:100%;
6959
6959
  overflow:auto;
6960
+ padding-block-end:var(--bp-space-020, .5rem);
6960
6961
  scroll-padding:60px 100px;
6961
6962
  width:100%;
6962
6963
  }
6963
- .bp_data_table_module_dataTableWrapper--9a3ae [data-modern=false]{
6964
+ .bp_data_table_module_dataTableWrapper--c7392 [data-modern=false]{
6964
6965
  --border-radius-hover-datatable:var(--radius-4);
6965
6966
  }
6966
- .bp_data_table_module_dataTableWrapper--9a3ae [data-modern=true]{
6967
+ .bp_data_table_module_dataTableWrapper--c7392 [data-modern=true]{
6967
6968
  --border-radius-hover-datatable:var(--bp-radius-08, 1rem);
6968
6969
  }
6969
- .bp_data_table_module_dataTableWrapper--9a3ae table tbody > tr[data-hovered]{
6970
+ .bp_data_table_module_dataTableWrapper--c7392 table tbody > tr[data-hovered]{
6970
6971
  --list-item-border-radius:var(--border-radius-hover-datatable);
6971
6972
  --list-item-row-border-radius:var(--list-item-border-radius);
6972
6973
  --list-item-first-column-item-radius:var(--list-item-border-radius) 0 0 var(--list-item-border-radius);
6973
6974
  --list-item-last-column-item-radius:0 var(--list-item-border-radius) var(--list-item-border-radius) 0;
6974
6975
  }
6975
- .bp_data_table_module_dataTableWrapper--9a3ae.bp_data_table_module_isScrolledX--9a3ae table tbody > tr[data-hovered][data-focus-visible]{
6976
+ .bp_data_table_module_dataTableWrapper--c7392.bp_data_table_module_isScrolledX--c7392 table tbody > tr[data-hovered][data-focus-visible]{
6976
6977
  --list-item-border-radius:0;
6977
6978
  --list-item-row-border-radius:0;
6978
6979
  --list-item-first-column-item-radius:0;
6979
6980
  --list-item-last-column-item-radius:0;
6980
6981
  }
6981
- .bp_data_table_module_dataTableWrapper--9a3ae table > thead > tr{
6982
+ .bp_data_table_module_dataTableWrapper--c7392 table > thead > tr{
6982
6983
  background:var(--gray-white);
6983
6984
  position:sticky;
6984
6985
  top:0;
6985
6986
  z-index:var(--sticky-element-z-index);
6986
6987
  }
6987
- .bp_data_table_module_dataTableWrapper--9a3ae table > thead > tr th:first-child{
6988
+ .bp_data_table_module_dataTableWrapper--c7392 table > thead > tr th:first-child{
6988
6989
  background:inherit;
6989
6990
  height:100%;
6990
6991
  left:0;
6991
6992
  position:sticky;
6992
6993
  z-index:var(--sticky-element-z-index);
6993
6994
  }
6994
- .bp_data_table_module_dataTableWrapper--9a3ae table > thead > tr th:first-child[data-focus-visible]{
6995
+ .bp_data_table_module_dataTableWrapper--c7392 table > thead > tr th:first-child[data-focus-visible]{
6995
6996
  position:sticky;
6996
6997
  z-index:var(--sticky-element-z-index);
6997
6998
  }
6998
- .bp_data_table_module_dataTableWrapper--9a3ae table tbody > tr{
6999
+ .bp_data_table_module_dataTableWrapper--c7392 table tbody > tr{
6999
7000
  --is-row-focused:0;
7000
7001
  }
7001
- .bp_data_table_module_dataTableWrapper--9a3ae table tbody > tr > td [data-actionswrapper]::after{
7002
+ .bp_data_table_module_dataTableWrapper--c7392 table tbody > tr > td [data-actionswrapper]::after{
7002
7003
  background:inherit;
7003
7004
  content:"";
7004
7005
  display:block;
@@ -7008,18 +7009,18 @@
7008
7009
  width:100%;
7009
7010
  z-index:-1;
7010
7011
  }
7011
- .bp_data_table_module_dataTableWrapper--9a3ae table tbody > tr[data-focus-visible]{
7012
+ .bp_data_table_module_dataTableWrapper--c7392 table tbody > tr[data-focus-visible]{
7012
7013
  --outline-offset-focus-cell:var(--outline-offset-focus-row);
7013
7014
  --is-row-focused:1;
7014
7015
  }
7015
- .bp_data_table_module_dataTableWrapper--9a3ae table tbody > tr[data-focus-visible][aria-selected=true]{
7016
+ .bp_data_table_module_dataTableWrapper--c7392 table tbody > tr[data-focus-visible][aria-selected=true]{
7016
7017
  --outline-offset-focus-cell:var(--outline-offset-focus-and-selected-row);
7017
7018
  }
7018
7019
 
7019
- .bp_data_table_module_isScrolledX--9a3ae table > thead > tr > th:first-child{
7020
+ .bp_data_table_module_isScrolledX--c7392 table > thead > tr > th:first-child{
7020
7021
  overflow:visible;
7021
7022
  }
7022
- .bp_data_table_module_isScrolledX--9a3ae table > thead > tr > th:first-child::after{
7023
+ .bp_data_table_module_isScrolledX--c7392 table > thead > tr > th:first-child::after{
7023
7024
  background:inherit;
7024
7025
  border-right:1px solid var(--border-divider-border);
7025
7026
  box-shadow:10px 0 7px -4px var(--item-background);
@@ -7033,7 +7034,7 @@
7033
7034
  z-index:-1;
7034
7035
  }
7035
7036
 
7036
- .bp_data_table_module_hideActionWrapperRight--9a3ae table tbody > tr > td [data-actionswrapper]::after{
7037
+ .bp_data_table_module_hideActionWrapperRight--c7392 table tbody > tr > td [data-actionswrapper]::after{
7037
7038
  display:none;
7038
7039
  }
7039
7040
  .bp_list_checkbox_module_selection--711bf[data-modern=false]{
@@ -1,7 +1,6 @@
1
1
  import { jsx } from 'react/jsx-runtime';
2
2
  import clsx from 'clsx';
3
3
  import { forwardRef } from 'react';
4
- import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
5
4
  import { Text } from '../text/text.js';
6
5
  import styles from './content-card.module.js';
7
6
 
@@ -11,11 +10,8 @@ const ContentCardBody = /*#__PURE__*/forwardRef((props, forwardedRef) => {
11
10
  children,
12
11
  ...rest
13
12
  } = props;
14
- const {
15
- enableModernizedComponents
16
- } = useBlueprintModernization();
17
- const variant = enableModernizedComponents ? 'bodySmall' : 'bodyDefault';
18
- const color = enableModernizedComponents ? 'textOnLightSecondary' : 'textOnLightDefault';
13
+ const variant = 'bodySmall' ;
14
+ const color = 'textOnLightSecondary' ;
19
15
  return jsx("div", {
20
16
  className: clsx(styles.cardBody, className),
21
17
  children: jsx(Text, {
@@ -1,7 +1,6 @@
1
1
  import { jsx, jsxs } from 'react/jsx-runtime';
2
2
  import { Size14, Size1, Size6, Size4, Size18, Size5 } from '@box/blueprint-web-assets/tokens/tokens';
3
3
  import clsx from 'clsx';
4
- import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
5
4
  import { Ghost } from '../ghost/ghost.js';
6
5
  import { ContentCardBody } from './content-card-body.js';
7
6
  import { ContentCardFooter } from './content-card-footer.js';
@@ -10,12 +9,9 @@ import { ContentCardTitle } from './content-card-title.js';
10
9
  import styles from './content-card.module.js';
11
10
 
12
11
  const GhostContentCard = () => {
13
- const {
14
- enableModernizedComponents
15
- } = useBlueprintModernization();
16
12
  return jsxs("div", {
17
13
  className: styles.ghostCard,
18
- "data-modern": enableModernizedComponents ? 'true' : 'false',
14
+ "data-modern": 'true' ,
19
15
  "data-testid": "ghost-content-card",
20
16
  children: [jsx(Ghost, {
21
17
  borderRadius: Size1,
@@ -66,9 +62,6 @@ const ContentCardComponent = ({
66
62
  onSelect,
67
63
  ...rest
68
64
  }) => {
69
- const {
70
- enableModernizedComponents
71
- } = useBlueprintModernization();
72
65
  const handleKeyDown = event => {
73
66
  if (event.key === 'Enter') {
74
67
  onSelect(event);
@@ -80,7 +73,7 @@ const ContentCardComponent = ({
80
73
  return jsx("div", {
81
74
  ...rest,
82
75
  className: clsx(styles.card, className),
83
- "data-modern": enableModernizedComponents ? 'true' : 'false',
76
+ "data-modern": 'true' ,
84
77
  onClick: onSelect,
85
78
  onKeyDown: handleKeyDown,
86
79
  role: "link",
@@ -1,4 +1,4 @@
1
1
  import '../index.css';
2
- var styles = {"dataTableWrapper":"bp_data_table_module_dataTableWrapper--9a3ae","isScrolledX":"bp_data_table_module_isScrolledX--9a3ae","hideActionWrapperRight":"bp_data_table_module_hideActionWrapperRight--9a3ae"};
2
+ var styles = {"dataTableWrapper":"bp_data_table_module_dataTableWrapper--c7392","isScrolledX":"bp_data_table_module_isScrolledX--c7392","hideActionWrapperRight":"bp_data_table_module_hideActionWrapperRight--c7392"};
3
3
 
4
4
  export { styles as default };
@@ -5,7 +5,6 @@ import * as RadixPopover from '@radix-ui/react-popover';
5
5
  import clsx from 'clsx';
6
6
  import { forwardRef, useState, useEffect, useRef, useCallback } from 'react';
7
7
  import { DatePicker as DatePicker$1, Group, DateInput, DateSegment, Button } from 'react-aria-components';
8
- import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
9
8
  import { Calendar as Calendar$1 } from '../primitives/calendar/calendar.js';
10
9
  import '@internationalized/date';
11
10
  import { IconButton } from '../primitives/icon-button/icon-button.js';
@@ -49,9 +48,6 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
49
48
  previousMonthAriaLabel,
50
49
  ...rest
51
50
  } = props;
52
- const {
53
- enableModernizedComponents
54
- } = useBlueprintModernization();
55
51
  const [internalValue, setInternalValue] = useState(defaultValue);
56
52
  useEffect(() => {
57
53
  if (value !== undefined) {
@@ -152,7 +148,7 @@ const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
152
148
  className: clsx(styles.datePicker, {
153
149
  [styles.disabled]: isDisabled
154
150
  }, className),
155
- "data-modern": enableModernizedComponents ? 'true' : 'false',
151
+ "data-modern": 'true' ,
156
152
  isDisabled: isDisabled,
157
153
  isInvalid: hasError,
158
154
  onChange: onDatePickerValueChanged,
@@ -1,6 +1,5 @@
1
1
  import { jsx } from 'react/jsx-runtime';
2
2
  import clsx from 'clsx';
3
- import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
4
3
  import styles from './ghost.module.js';
5
4
 
6
5
  /**
@@ -22,9 +21,7 @@ const Ghost = ({
22
21
  style = {},
23
22
  ...rest
24
23
  }) => {
25
- const {
26
- enableModernizedComponents
27
- } = useBlueprintModernization();
24
+ const enableModernizedComponents = true;
28
25
  return jsx("span", {
29
26
  className: clsx(className, styles.ghost, {
30
27
  [styles[variant]]: !!variant