@box/blueprint-web 12.21.0 → 12.23.0

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

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"card":"bp_card_module_card--c61ad","dropshadow-1":"bp_card_module_dropshadow-1--c61ad","dropshadow-3":"bp_card_module_dropshadow-3--c61ad"};
+var styles = {"card":"bp_card_module_card--6d119","dropshadow-1":"bp_card_module_dropshadow-1--6d119","dropshadow-3":"bp_card_module_dropshadow-3--6d119"};
 
 export { styles as default };

package/dist/lib-esm/icon-dual-state-button/icon-dual-state-button.js

@@ -3,6 +3,7 @@ import { Button } from '@ariakit/react';
 import { IconIconBlue, IconIconOnLightSecondary, Size4, Size5, Size6 } from '@box/blueprint-web-assets/tokens/tokens';
 import clsx from 'clsx';
 import { forwardRef, createElement } from 'react';
+import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 import { composeEventHandlers } from '../utils/composeEventHandlers.js';
 import { useControllableState } from '../utils/useControllableState.js';
 import styles from './icon-dual-state-button.module.js';
@@ -36,6 +37,9 @@ const IconDualStateButton = /*#__PURE__*/forwardRef(({
     onChange: onPressedChange,
     defaultProp: defaultPressed
   });
+  const {
+    enableModernizedComponents
+  } = useBlueprintModernization();
   const iconSize = buttonSizeToIconSize[size];
   return jsx(Button, {
     ...rest,
@@ -45,6 +49,7 @@ const IconDualStateButton = /*#__PURE__*/forwardRef(({
       [styles.pressed]: pressed
     }),
     "data-disabled": disabled ? '' : undefined,
+    "data-modern": enableModernizedComponents,
     "data-state": pressed ? 'on' : 'off',
     disabled: disabled,
     onClick: composeEventHandlers(onClick, () => {

package/dist/lib-esm/icon-dual-state-button/icon-dual-state-button.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"iconDualStateButton":"bp_icon_dual_state_button_module_iconDualStateButton--462b9","pressed":"bp_icon_dual_state_button_module_pressed--462b9","xsmallButton":"bp_icon_dual_state_button_module_xsmallButton--462b9","smallButton":"bp_icon_dual_state_button_module_smallButton--462b9"};
+var styles = {"iconDualStateButton":"bp_icon_dual_state_button_module_iconDualStateButton--ab460","pressed":"bp_icon_dual_state_button_module_pressed--ab460","xsmallButton":"bp_icon_dual_state_button_module_xsmallButton--ab460","smallButton":"bp_icon_dual_state_button_module_smallButton--ab460"};
 
 export { styles as default };

package/dist/lib-esm/index.css

@@ -1221,18 +1221,18 @@
 .bp_button_wrapper_module_buttonWrapper--b0897{
   all:unset;
 }
-.bp_card_module_card--c61ad[data-modern=true]{
+.bp_card_module_card--6d119[data-modern=true]{
   --bp-card-dropshadow-1:var(--dropshadow-1);
   --bp-card-dropshadow-3:var(--dropshadow-3);
   --card-radius:var(--bp-radius-10);
-  --card-padding:var(--bp-space-060);
+  --card-padding:var(--bp-space-040);
   --card-background:var(--bp-surface-card-surface);
   --card-border:var(--bp-border-01) solid var(--bp-border-card-border);
   --card-dropshadow-1:var(--bp-card-dropshadow-1);
   --card-dropshadow-3:var(--bp-card-dropshadow-3);
 }
 
-.bp_card_module_card--c61ad[data-modern=false]{
+.bp_card_module_card--6d119[data-modern=false]{
   --card-padding:var(--space-4);
   --card-background:var(--surface-card-surface);
   --card-border:var(--border-1) solid var(--border-card-border);
@@ -1241,16 +1241,16 @@
   --card-dropshadow-3:var(--dropshadow-3);
 }
 
-.bp_card_module_card--c61ad{
+.bp_card_module_card--6d119{
   background:var(--card-background);
   border:var(--card-border);
   border-radius:var(--card-radius);
   padding:var(--card-padding);
 }
-.bp_card_module_card--c61ad.bp_card_module_dropshadow-1--c61ad{
+.bp_card_module_card--6d119.bp_card_module_dropshadow-1--6d119{
   box-shadow:var(--card-dropshadow-1);
 }
-.bp_card_module_card--c61ad.bp_card_module_dropshadow-3--c61ad{
+.bp_card_module_card--6d119.bp_card_module_dropshadow-3--6d119{
   box-shadow:var(--card-dropshadow-3);
 }
 
@@ -4490,71 +4490,107 @@
   margin-block-start:var(--space-5);
   width:100%;
 }
-.bp_icon_dual_state_button_module_iconDualStateButton--462b9{
+.bp_icon_dual_state_button_module_iconDualStateButton--ab460[data-modern=false]{
+  --icon-dual-state-button-medium-size:var(--size-10);
+  --icon-dual-state-button-small-size:var(--size-8);
+  --icon-dual-state-button-xsmall-size:var(--size-6);
+  --icon-dual-state-button-padding:0;
+  --icon-dual-state-button-radius:var(--radius-1);
+  --icon-dual-state-button-off-background:#0000;
+  --icon-dual-state-button-off-background-hover:var(--surface-toggle-surface-off-hover);
+  --icon-dual-state-button-off-background-pressed:var(--surface-toggle-surface-off-pressed);
+  --icon-dual-state-button-focus-outline:var(--border-2) solid var(--outline-focus-on-light);
+  --icon-dual-state-button-on-background:var(--surface-toggle-surface-on);
+  --icon-dual-state-button-on-background-hover:var(--surface-toggle-surface-on-hover);
+  --icon-dual-state-button-on-background-pressed:var(--surface-toggle-surface-on-pressed);
+  --icon-dual-state-button-on-border:var(--border-1) solid var(--border-toggle-border-on);
+  --icon-dual-state-button-on-border-focus:var(--border-1) solid #fff;
+  --icon-dual-state-button-on-icon-color:var(--icon-icon-blue);
+}
+
+.bp_icon_dual_state_button_module_iconDualStateButton--ab460[data-modern=true]{
+  --icon-dual-state-button-medium-size:var(--bp-size-100);
+  --icon-dual-state-button-small-size:var(--bp-size-080);
+  --icon-dual-state-button-xsmall-size:var(--bp-size-060);
+  --icon-dual-state-button-padding:0;
+  --icon-dual-state-button-radius:var(--bp-radius-10);
+  --icon-dual-state-button-off-background:#0000;
+  --icon-dual-state-button-off-background-hover:var(--bp-surface-toggle-surface-off-hover);
+  --icon-dual-state-button-off-background-pressed:var(--bp-surface-toggle-surface-off-pressed);
+  --icon-dual-state-button-focus-outline:var(--bp-border-02) solid var(--bp-outline-focus-on-light);
+  --icon-dual-state-button-on-background:var(--bp-surface-toggle-surface-on);
+  --icon-dual-state-button-on-background-hover:var(--bp-surface-toggle-surface-on-hover);
+  --icon-dual-state-button-on-background-pressed:var(--bp-surface-toggle-surface-on-pressed);
+  --icon-dual-state-button-on-border:var(--bp-border-01) solid var(--bp-border-toggletext-border-on);
+  --icon-dual-state-button-on-border-focus:var(--bp-border-01) solid var(--bp-border-toggletext-border-off);
+  --icon-dual-state-button-on-icon-color:var(--bp-icon-icon-blue);
+}
+
+.bp_icon_dual_state_button_module_iconDualStateButton--ab460{
   align-items:center;
-  background-color:initial;
-  border-radius:var(--radius-1);
+  background-color:var(--icon-dual-state-button-off-background);
+  border-radius:var(--icon-dual-state-button-radius);
   border-style:none;
   cursor:pointer;
   display:flex;
   font-family:var(--body-default-font-family);
   font-size:var(--body-default-font-size);
   font-weight:var(--body-default-font-weight);
-  height:var(--size-10);
+  height:var(--icon-dual-state-button-medium-size);
   justify-content:center;
   letter-spacing:var(--body-default-letter-spacing);
   line-height:var(--body-default-line-height);
-  padding:0;
+  padding:var(--icon-dual-state-button-padding);
   -webkit-text-decoration:var(--body-default-text-decoration);
           text-decoration:var(--body-default-text-decoration);
   text-transform:var(--body-default-text-case);
-  width:var(--size-10);
+  width:var(--icon-dual-state-button-medium-size);
 }
-.bp_icon_dual_state_button_module_iconDualStateButton--462b9:disabled{
+.bp_icon_dual_state_button_module_iconDualStateButton--ab460:disabled{
   opacity:.3;
   pointer-events:none;
 }
-.bp_icon_dual_state_button_module_iconDualStateButton--462b9:hover{
-  background:var(--surface-toggle-surface-off-hover);
+.bp_icon_dual_state_button_module_iconDualStateButton--ab460:hover{
+  background:var(--icon-dual-state-button-off-background-hover);
 }
-.bp_icon_dual_state_button_module_iconDualStateButton--462b9:active{
-  background:var(--surface-toggle-surface-off-pressed);
+.bp_icon_dual_state_button_module_iconDualStateButton--ab460:active{
+  background:var(--icon-dual-state-button-off-background-pressed);
 }
-.bp_icon_dual_state_button_module_iconDualStateButton--462b9[data-focus-visible]{
-  background:var(--surface-toggle-surface-off-hover);
-  outline:var(--border-2) solid var(--outline-focus-on-light);
+.bp_icon_dual_state_button_module_iconDualStateButton--ab460[data-focus-visible]{
+  background:var(--icon-dual-state-button-off-background-hover);
+  outline:var(--icon-dual-state-button-focus-outline);
 }
-.bp_icon_dual_state_button_module_iconDualStateButton--462b9[data-focus-visible]:active{
-  background:var(--surface-toggle-surface-off-pressed);
+.bp_icon_dual_state_button_module_iconDualStateButton--ab460[data-focus-visible]:active{
+  background:var(--icon-dual-state-button-off-background-pressed);
 }
-.bp_icon_dual_state_button_module_iconDualStateButton--462b9.bp_icon_dual_state_button_module_pressed--462b9{
-  background:var(--surface-toggle-surface-on);
-  border:var(--border-1) solid var(--border-toggle-border-on);
-  color:var(--icon-icon-blue);
+.bp_icon_dual_state_button_module_iconDualStateButton--ab460.bp_icon_dual_state_button_module_pressed--ab460{
+  background:var(--icon-dual-state-button-on-background);
+  border:var(--icon-dual-state-button-on-border);
+  color:var(--icon-dual-state-button-on-icon-color);
 }
-.bp_icon_dual_state_button_module_iconDualStateButton--462b9.bp_icon_dual_state_button_module_pressed--462b9:hover{
-  background:var(--surface-toggle-surface-on-hover);
+.bp_icon_dual_state_button_module_iconDualStateButton--ab460.bp_icon_dual_state_button_module_pressed--ab460:hover{
+  background:var(--icon-dual-state-button-on-background-hover);
 }
-.bp_icon_dual_state_button_module_iconDualStateButton--462b9.bp_icon_dual_state_button_module_pressed--462b9:active{
-  background:var(--surface-toggle-surface-on-pressed);
+.bp_icon_dual_state_button_module_iconDualStateButton--ab460.bp_icon_dual_state_button_module_pressed--ab460:active{
+  background:var(--icon-dual-state-button-on-background-pressed);
 }
-.bp_icon_dual_state_button_module_iconDualStateButton--462b9.bp_icon_dual_state_button_module_pressed--462b9[data-focus-visible]{
-  background:var(--surface-toggle-surface-on-hover);
-  border:var(--border-1) solid #fff;
-  outline:var(--border-2) solid var(--outline-focus-on-light);
+.bp_icon_dual_state_button_module_iconDualStateButton--ab460.bp_icon_dual_state_button_module_pressed--ab460[data-focus-visible]{
+  background:var(--icon-dual-state-button-on-background-hover);
+  border:var(--icon-dual-state-button-on-border-focus);
+  outline:var(--icon-dual-state-button-focus-outline);
 }
-.bp_icon_dual_state_button_module_iconDualStateButton--462b9.bp_icon_dual_state_button_module_pressed--462b9[data-focus-visible]:active{
-  background:var(--surface-toggle-surface-on-pressed);
+.bp_icon_dual_state_button_module_iconDualStateButton--ab460.bp_icon_dual_state_button_module_pressed--ab460[data-focus-visible]:active{
+  background:var(--icon-dual-state-button-on-background-pressed);
 }
 
-.bp_icon_dual_state_button_module_xsmallButton--462b9{
-  height:var(--size-6);
-  width:var(--size-6);
+.bp_icon_dual_state_button_module_xsmallButton--ab460{
+  height:var(--icon-dual-state-button-xsmall-size);
+  width:var(--icon-dual-state-button-xsmall-size);
 }
 
-.bp_icon_dual_state_button_module_smallButton--462b9{
-  height:var(--size-8);
-  width:var(--size-8);
+.bp_icon_dual_state_button_module_smallButton--ab460{
+  height:var(--icon-dual-state-button-small-size);
+  width:var(--icon-dual-state-button-small-size);
 }
 .bp_icon_toggle_button_module_iconToggleButton--afa02[data-modern=false]{
   --icon-toggle-button-radius:var(--radius-2);
@@ -5865,54 +5901,106 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   fill:currentColor;
 }
 
-.bp_popover_module_popoverContentContainer--b3542 .bp_popover_module_popoverCard--b3542 .bp_popover_module_popoverMainContent--b3542,.bp_popover_module_popoverContentContainer--b3542.bp_popover_module_accessibilitySmallBreakpoint--b3542 .bp_popover_module_popoverCard--b3542 .bp_popover_module_popoverScrollContainer--b3542{
-  margin-inline-end:calc(var(--space-4)*-1);
-  mask-image:linear-gradient(to top, #0000, var(--gray-black)), linear-gradient(to left, #0000 var(--space-4), var(--gray-black) var(--space-4));
-  mask-position:left bottom;
-  mask-size:100% 20000px;
-  overflow-y:auto;
-  padding-right:var(--space-4);
-  transition:mask-position var(--animation-duration-3);
-}
-
-.bp_popover_module_popoverContentContainer--b3542{
+.bp_popover_module_popoverContentContainer--5e1df .bp_popover_module_popoverCard--5e1df .bp_popover_module_popoverMainContent--5e1df,.bp_popover_module_popoverContentContainer--5e1df.bp_popover_module_accessibilitySmallBreakpoint--5e1df .bp_popover_module_popoverCard--5e1df .bp_popover_module_popoverScrollContainer--5e1df{
+  margin-inline-end:var(--scroll-mask-margin-inline-end);
+  mask-image:var(--scroll-mask-mask-image);
+  mask-position:var(--scroll-mask-mask-position);
+  mask-size:var(--scroll-mask-mask-size);
+  overflow-y:var(--scroll-mask-overflow);
+  padding-right:var(--scroll-mask-padding-right);
+  transition:var(--scroll-mask-transition);
+}
+
+.bp_popover_module_popoverContentContainer--5e1df[data-modern=false]{
+  --scroll-mask-padding-right:var(--space-4);
+  --scroll-mask-overflow:auto;
+  --scroll-mask-transition:mask-position var(--animation-duration-3), -webkit-mask-position var(--animation-duration-3);
+  --scroll-mask-margin-inline-end:calc(var(--space-4)*-1);
+  --scroll-mask-mask-image:linear-gradient(to top, #0000, var(--gray-black)), linear-gradient(to left, #0000 var(--space-4), var(--gray-black) var(--space-4));
+  --scroll-mask-mask-size:100% 20000px;
+  --scroll-mask-mask-position:left bottom;
+  --popover-card-margin-block:var(--space-1);
+  --popover-card-box-shadow:var(--dropshadow-3);
+  --popover-main-content-inner-container-padding:var(--space-3);
+  --popover-scroll-container-small-breakpoint-max-height:min(
+          var(
+              --blueprint-web-popover-content-max-height,
+              calc(var(--radix-popover-content-available-height) - var(--space-12))
+          ),
+          calc(var(--radix-popover-content-available-height) - var(--space-12))
+      );
+  --popover-scroll-container-small-breakpoint-padding-block:var(--space-1);
+  --popover-footer-padding-block-start:var(--space-4);
+  --popover-footer-margin-inline:calc(var(--space-4)*-1);
+  --popover-footer-padding-inline:var(--space-4);
+  --popover-footer-border-top:var(--border-1) solid var(--border-card-border);
+}
+
+.bp_popover_module_popoverContentContainer--5e1df[data-modern=true]{
+  --bp-dropshadow-3:var(--dropshadow-3);
+  --bp-animation-duration-3:var(--animation-duration-3);
+  --scroll-mask-padding-right:var(--bp-space-040);
+  --scroll-mask-overflow:auto;
+  --scroll-mask-transition:mask-position var(--bp-animation-duration-3), -webkit-mask-position var(--bp-animation-duration-3);
+  --scroll-mask-margin-inline-end:calc(var(--bp-space-040)*-1);
+  --scroll-mask-mask-image:linear-gradient(to top, #0000, var(--bp-gray-black)), linear-gradient(to left, #0000 var(--bp-space-040), var(--bp-gray-black) var(--bp-space-040));
+  --scroll-mask-mask-size:100% 20000px;
+  --scroll-mask-mask-position:left bottom;
+  --popover-card-margin-block:var(--bp-space-010);
+  --popover-card-box-shadow:var(--bp-dropshadow-3);
+  --popover-main-content-inner-container-padding:var(--bp-space-030);
+  --popover-scroll-container-small-breakpoint-max-height:min(
+          var(
+              --blueprint-web-popover-content-max-height,
+              calc(var(--radix-popover-content-available-height) - var(--bp-space-120))
+          ),
+          calc(var(--radix-popover-content-available-height) - var(--bp-space-120))
+      );
+  --popover-scroll-container-small-breakpoint-padding-block:var(--bp-space-010);
+  --popover-footer-padding-block-start:var(--bp-space-040);
+  --popover-footer-margin-inline:calc(var(--bp-space-040)*-1);
+  --popover-footer-padding-inline:var(--bp-space-040);
+  --popover-footer-border-top:var(--bp-border-01) solid var(--bp-border-card-border);
+}
+
+.bp_popover_module_popoverContentContainer--5e1df{
   max-width:320px;
-  z-index:380;
+  z-index:var(--z-index-popover);
 }
-.bp_popover_module_popoverContentContainer--b3542 .bp_popover_module_popoverCard--b3542{
-  box-shadow:var(--dropshadow-3);
-  margin-block:var(--space-1);
+.bp_popover_module_popoverContentContainer--5e1df .bp_popover_module_popoverCard--5e1df{
+  box-shadow:var(--popover-card-box-shadow);
+  margin-block:var(--popover-card-margin-block);
 }
-.bp_popover_module_popoverContentContainer--b3542 .bp_popover_module_popoverCard--b3542 .bp_popover_module_popoverMainContent--b3542:hover{
+.bp_popover_module_popoverContentContainer--5e1df .bp_popover_module_popoverCard--5e1df .bp_popover_module_popoverMainContent--5e1df:hover{
   mask-position:left top;
 }
-.bp_popover_module_popoverContentContainer--b3542 .bp_popover_module_popoverCard--b3542 .bp_popover_module_popoverMainContent--b3542 .bp_popover_module_popoverMainContentOuterContainer--b3542{
+.bp_popover_module_popoverContentContainer--5e1df .bp_popover_module_popoverCard--5e1df .bp_popover_module_popoverMainContent--5e1df .bp_popover_module_popoverMainContentOuterContainer--5e1df{
   max-height:inherit;
 }
-.bp_popover_module_popoverContentContainer--b3542 .bp_popover_module_popoverCard--b3542 .bp_popover_module_popoverMainContent--b3542 .bp_popover_module_popoverMainContentOuterContainer--b3542 .bp_popover_module_popoverMainContentInnerContainerPadding--b3542{
-  padding-block-end:var(--space-3);
+.bp_popover_module_popoverContentContainer--5e1df .bp_popover_module_popoverCard--5e1df .bp_popover_module_popoverMainContent--5e1df .bp_popover_module_popoverMainContentOuterContainer--5e1df .bp_popover_module_popoverMainContentInnerContainerPadding--5e1df{
+  padding-block-end:var(--popover-main-content-inner-container-padding);
 }
-.bp_popover_module_popoverContentContainer--b3542.bp_popover_module_accessibilitySmallBreakpoint--b3542{
+.bp_popover_module_popoverContentContainer--5e1df.bp_popover_module_accessibilitySmallBreakpoint--5e1df{
   max-height:var(--radix-popover-content-available-height);
 }
-.bp_popover_module_popoverContentContainer--b3542.bp_popover_module_accessibilitySmallBreakpoint--b3542 .bp_popover_module_popoverCard--b3542 .bp_popover_module_popoverScrollContainer--b3542{
-  max-height:min(var(--blueprint-web-popover-content-max-height, calc(var(--radix-popover-content-available-height) - var(--space-12))), var(--radix-popover-content-available-height) - var(--space-12));
-  padding-block:var(--space-1);
+.bp_popover_module_popoverContentContainer--5e1df.bp_popover_module_accessibilitySmallBreakpoint--5e1df .bp_popover_module_popoverCard--5e1df .bp_popover_module_popoverScrollContainer--5e1df{
+  max-height:var(--popover-scroll-container-small-breakpoint-max-height);
+  padding-block:var(--popover-scroll-container-small-breakpoint-padding-block);
 }
-.bp_popover_module_popoverContentContainer--b3542.bp_popover_module_accessibilitySmallBreakpoint--b3542 .bp_popover_module_popoverCard--b3542 .bp_popover_module_popoverScrollContainer--b3542:hover{
+.bp_popover_module_popoverContentContainer--5e1df.bp_popover_module_accessibilitySmallBreakpoint--5e1df .bp_popover_module_popoverCard--5e1df .bp_popover_module_popoverScrollContainer--5e1df:hover{
   mask-position:left top;
 }
-.bp_popover_module_popoverContentContainer--b3542.bp_popover_module_accessibilitySmallBreakpoint--b3542 .bp_popover_module_popoverCard--b3542 .bp_popover_module_popoverScrollContainer--b3542 .bp_popover_module_popoverMainContent--b3542{
+.bp_popover_module_popoverContentContainer--5e1df.bp_popover_module_accessibilitySmallBreakpoint--5e1df .bp_popover_module_popoverCard--5e1df .bp_popover_module_popoverScrollContainer--5e1df .bp_popover_module_popoverMainContent--5e1df{
   max-height:-moz-fit-content;
   max-height:fit-content;
 }
-.bp_popover_module_popoverContentContainer--b3542 .bp_popover_module_popoverFooter--b3542{
-  margin-inline:calc(var(--space-4)*-1);
-  padding-block-start:var(--space-4);
-  padding-inline:var(--space-4);
+.bp_popover_module_popoverContentContainer--5e1df .bp_popover_module_popoverFooter--5e1df{
+  margin-inline:var(--popover-footer-margin-inline);
+  padding-block-start:var(--popover-footer-padding-block-start);
+  padding-inline:var(--popover-footer-padding-inline);
 }
-.bp_popover_module_popoverContentContainer--b3542 .bp_popover_module_popoverFooter--b3542.bp_popover_module_popoverFooterTopBorder--b3542{
-  border-top:var(--border-1) solid var(--border-card-border);
+.bp_popover_module_popoverContentContainer--5e1df .bp_popover_module_popoverFooter--5e1df.bp_popover_module_popoverFooterTopBorder--5e1df{
+  border-top:var(--popover-footer-border-top);
 }
 .bp_select_menu_grid_module_grid--6e766{
   display:flex;

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

@@ -3,6 +3,7 @@ import { Space4 } from '@box/blueprint-web-assets/tokens/tokens';
 import * as RadixPopover from '@radix-ui/react-popover';
 import clsx from 'clsx';
 import { forwardRef, useContext, useState, useMemo, useCallback } from 'react';
+import { useBlueprintModernization } from '../../blueprint-modernization-context/useBlueprintModernization.js';
 import { Card } from '../../card/card.js';
 import { useBreakpoint, Breakpoint } from '../../utils/useBreakpoint.js';
 import { focusRadioGroupFirstIfExists } from './popover-focus-utils.js';
@@ -29,6 +30,9 @@ const PopoverContentContainer = /*#__PURE__*/forwardRef((props, forwardedRef) =>
   const {
     isInteractionDisabled
   } = useContext(PopoverModalityContext);
+  const {
+    enableModernizedComponents
+  } = useBlueprintModernization();
   const accessibilitySmallBreakpoint = smallBreakpoint && isInteractionDisabled;
   const [isContentOverflowing, setIsContentOverflowing] = useState(false);
   const providerValue = useMemo(() => ({
@@ -56,6 +60,7 @@ const PopoverContentContainer = /*#__PURE__*/forwardRef((props, forwardedRef) =>
             [styles.accessibilitySmallBreakpoint]: accessibilitySmallBreakpoint
           }, className),
           collisionPadding: collisionPadding,
+          "data-modern": enableModernizedComponents,
           onOpenAutoFocus: handleOpenAutoFocus,
           children: jsx(Card, {
             className: styles.popoverCard,

package/dist/lib-esm/primitives/popover/popover.module.js

@@ -1,4 +1,4 @@
 import '../../index.css';
-var styles = {"popoverContentContainer":"bp_popover_module_popoverContentContainer--b3542","accessibilitySmallBreakpoint":"bp_popover_module_accessibilitySmallBreakpoint--b3542","popoverCard":"bp_popover_module_popoverCard--b3542","popoverScrollContainer":"bp_popover_module_popoverScrollContainer--b3542","popoverMainContent":"bp_popover_module_popoverMainContent--b3542","popoverMainContentOuterContainer":"bp_popover_module_popoverMainContentOuterContainer--b3542","popoverMainContentInnerContainerPadding":"bp_popover_module_popoverMainContentInnerContainerPadding--b3542","popoverFooter":"bp_popover_module_popoverFooter--b3542","popoverFooterTopBorder":"bp_popover_module_popoverFooterTopBorder--b3542"};
+var styles = {"popoverContentContainer":"bp_popover_module_popoverContentContainer--5e1df","accessibilitySmallBreakpoint":"bp_popover_module_accessibilitySmallBreakpoint--5e1df","popoverCard":"bp_popover_module_popoverCard--5e1df","popoverScrollContainer":"bp_popover_module_popoverScrollContainer--5e1df","popoverMainContent":"bp_popover_module_popoverMainContent--5e1df","popoverMainContentOuterContainer":"bp_popover_module_popoverMainContentOuterContainer--5e1df","popoverMainContentInnerContainerPadding":"bp_popover_module_popoverMainContentInnerContainerPadding--5e1df","popoverFooter":"bp_popover_module_popoverFooter--5e1df","popoverFooterTopBorder":"bp_popover_module_popoverFooterTopBorder--5e1df"};
 
 export { styles as default };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "12.21.0",
+    "version": "12.23.0",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {