@box/blueprint-web 12.23.0 → 12.24.0

package/dist/lib-esm/index.css

@@ -1056,16 +1056,40 @@
 [data-button-wrapper][data-focus-visible] .bp_avatar_module_avatar--d2a1c{
   box-shadow:0 0 0 var(--border-1, 1px) var(--background-background), 0 0 0 var(--border-3) var(--outline-focus-on-light);
 }
-.bp_tooltip_module_content--db0b5{
-  border-radius:var(--radius-1);
+.bp_tooltip_module_content--5b8ee[data-modern=false]{
+  --tooltip-max-width:200px;
+  --tooltip-padding:var(--space-2) var(--space-3);
+  --tooltip-radius:var(--radius-1);
+  --tooltip-background:var(--surface-tooltip-surface);
+  --tooltip-background-error:var(--surface-tooltip-surface-error);
+  --tooltip-border:var(--border-1);
+  --tooltip-text-color:var(--text-text-on-dark);
+  --tooltip-text-color-error:var(--text-text-on-light);
+  --tooltip-border-error:var(--border-tooltip-border-error);
+}
+
+.bp_tooltip_module_content--5b8ee[data-modern=true]{
+  --tooltip-max-width:200px;
+  --tooltip-padding:var(--bp-space-020) var(--bp-space-030);
+  --tooltip-radius:var(--bp-radius-04);
+  --tooltip-background:var(--bp-surface-tooltip-surface);
+  --tooltip-background-error:var(--bp-surface-tooltip-surface-error);
+  --tooltip-border:var(--bp-border-01);
+  --tooltip-text-color:var(--bp-text-text-on-dark);
+  --tooltip-text-color-error:var(--bp-text-text-on-light);
+  --tooltip-border-error:var(--bp-border-tooltip-border-error);
+}
+
+.bp_tooltip_module_content--5b8ee{
+  border-radius:var(--tooltip-radius);
   box-sizing:border-box;
   font-family:var(--body-default-font-family);
   font-size:var(--body-default-font-size);
   font-weight:var(--body-default-font-weight);
   letter-spacing:var(--body-default-letter-spacing);
   line-height:var(--body-default-line-height);
-  max-width:200px;
-  padding:var(--space-2) var(--space-3);
+  max-width:var(--tooltip-max-width);
+  padding:var(--tooltip-padding);
   position:relative;
   -webkit-text-decoration:var(--body-default-text-decoration);
           text-decoration:var(--body-default-text-decoration);
@@ -1073,18 +1097,18 @@
   word-break:break-word;
   z-index:2147483647;
 }
-.bp_tooltip_module_content--db0b5.bp_tooltip_module_standard--db0b5{
-  background-color:var(--surface-tooltip-surface);
-  border:var(--border-1) solid var(--surface-tooltip-surface);
-  color:var(--text-text-on-dark);
+.bp_tooltip_module_content--5b8ee.bp_tooltip_module_standard--5b8ee{
+  background-color:var(--tooltip-background);
+  border:var(--tooltip-border) solid var(--tooltip-background);
+  color:var(--tooltip-text-color);
 }
-.bp_tooltip_module_content--db0b5.bp_tooltip_module_error--db0b5{
-  background-color:var(--surface-tooltip-surface-error);
-  border:var(--border-1) solid var(--border-tooltip-border-error);
-  color:var(--text-text-on-light);
+.bp_tooltip_module_content--5b8ee.bp_tooltip_module_error--5b8ee{
+  background-color:var(--tooltip-background-error);
+  border:var(--tooltip-border) solid var(--tooltip-border-error);
+  color:var(--tooltip-text-color-error);
 }
 
-.bp_tooltip_module_arrow--db0b5{
+.bp_tooltip_module_arrow--5b8ee{
   border-left:8.7px solid #0000;
   border-right:8.7px solid #0000;
   border-top:8.7px solid var(--surface-tooltip-surface);
@@ -1092,10 +1116,10 @@
   height:0;
   width:0;
 }
-.bp_tooltip_module_arrow--db0b5.bp_tooltip_module_error--db0b5{
+.bp_tooltip_module_arrow--5b8ee.bp_tooltip_module_error--5b8ee{
   border-top-color:var(--border-tooltip-border-error);
 }
-.bp_tooltip_module_arrow--db0b5.bp_tooltip_module_error--db0b5::after{
+.bp_tooltip_module_arrow--5b8ee.bp_tooltip_module_error--5b8ee::after{
   border-left:7.7px solid #0000;
   border-right:7.7px solid #0000;
   border-top:7.7px solid var(--surface-tooltip-surface-error);

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

@@ -3,6 +3,7 @@ import { Space4 } from '@box/blueprint-web-assets/tokens/px-tokens';
 import * as RadixTooltip from '@radix-ui/react-tooltip';
 import clsx from 'clsx';
 import React__default, { useContext } from 'react';
+import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 import { useForkRef } from '../utils/useForkRef.js';
 import { useIsTriggerInteractive } from '../utils/useIsTriggerInteractive.js';
 import styles from './tooltip.module.js';
@@ -117,13 +118,17 @@ const Content = /*#__PURE__*/React__default.forwardRef(function Content(props, r
     className,
     ...rest
   } = props;
+  const {
+    enableModernizedComponents
+  } = useBlueprintModernization();
   return jsxs(RadixTooltip.Content, {
     ...rest,
     ref: ref,
     className: clsx(styles.content, styles[variant], className),
     collisionPadding: collisionPadding,
+    "data-modern": enableModernizedComponents,
     sideOffset: 3,
-    children: [children, jsx(RadixTooltip.Arrow, {
+    children: [children, !enableModernizedComponents && jsx(RadixTooltip.Arrow, {
       asChild: true,
       children: jsx(Arrow, {
         variant: variant

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

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"content":"bp_tooltip_module_content--db0b5","standard":"bp_tooltip_module_standard--db0b5","error":"bp_tooltip_module_error--db0b5","arrow":"bp_tooltip_module_arrow--db0b5"};
+var styles = {"content":"bp_tooltip_module_content--5b8ee","standard":"bp_tooltip_module_standard--5b8ee","error":"bp_tooltip_module_error--5b8ee","arrow":"bp_tooltip_module_arrow--5b8ee"};
 
 export { styles as default };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "12.23.0",
+    "version": "12.24.0",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
@@ -47,7 +47,7 @@
     "dependencies": {
         "@ariakit/react": "0.4.15",
         "@ariakit/react-core": "0.4.15",
-        "@box/blueprint-web-assets": "^4.56.0",
+        "@box/blueprint-web-assets": "^4.56.6",
         "@internationalized/date": "^3.7.0",
         "@radix-ui/react-accordion": "1.1.2",
         "@radix-ui/react-checkbox": "1.0.4",
@@ -77,7 +77,7 @@
         "type-fest": "^3.2.0"
     },
     "devDependencies": {
-        "@box/storybook-utils": "^0.13.9",
+        "@box/storybook-utils": "^0.13.10",
         "@types/react": "^18.0.0",
         "@types/react-dom": "^18.0.0",
         "react": "^18.3.0",