@box/blueprint-web 12.5.1 → 12.7.0

package/dist/lib-esm/badge/base-badge.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"badgeContainer":"bp_base_badge_module_badgeContainer--d1b9b","badge":"bp_base_badge_module_badge--d1b9b","smallSizeBadge":"bp_base_badge_module_smallSizeBadge--d1b9b","mediumSizeBadge":"bp_base_badge_module_mediumSizeBadge--d1b9b","largeSizeBadge":"bp_base_badge_module_largeSizeBadge--d1b9b","xlargeSizeBadge":"bp_base_badge_module_xlargeSizeBadge--d1b9b","xxlargeSizeBadge":"bp_base_badge_module_xxlargeSizeBadge--d1b9b","iconBadge":"bp_base_badge_module_iconBadge--d1b9b","statusBadge":"bp_base_badge_module_statusBadge--d1b9b","numericBadge":"bp_base_badge_module_numericBadge--d1b9b","numericBadgeSingleDigit":"bp_base_badge_module_numericBadgeSingleDigit--d1b9b","numericBadgeMoreDigits":"bp_base_badge_module_numericBadgeMoreDigits--d1b9b"};
+var styles = {"badgeContainer":"bp_base_badge_module_badgeContainer--0697a","badge":"bp_base_badge_module_badge--0697a","smallSizeBadge":"bp_base_badge_module_smallSizeBadge--0697a","mediumSizeBadge":"bp_base_badge_module_mediumSizeBadge--0697a","largeSizeBadge":"bp_base_badge_module_largeSizeBadge--0697a","xlargeSizeBadge":"bp_base_badge_module_xlargeSizeBadge--0697a","xxlargeSizeBadge":"bp_base_badge_module_xxlargeSizeBadge--0697a","iconBadge":"bp_base_badge_module_iconBadge--0697a","interactiveWrapper":"bp_base_badge_module_interactiveWrapper--0697a","statusBadge":"bp_base_badge_module_statusBadge--0697a","numericBadge":"bp_base_badge_module_numericBadge--0697a","numericBadgeSingleDigit":"bp_base_badge_module_numericBadgeSingleDigit--0697a","numericBadgeMoreDigits":"bp_base_badge_module_numericBadgeMoreDigits--0697a"};
 
 export { styles as default };

package/dist/lib-esm/badge/icon-badge.d.ts

@@ -1,7 +1,16 @@
 import { type BadgeProps } from './types';
+export interface TooltipConfig {
+    tooltipContent: string | number;
+    tooltipSide?: 'top' | 'bottom' | 'left' | 'right';
+    tooltipAriaLabel?: string;
+}
 export interface IconBadgeProps extends BadgeProps {
     /** The variant of the icon badge. */
     variant: 'file-pdf' | 'file-docs' | 'file-sheets' | 'file-image' | 'file-canvas' | 'file-pages' | 'file-keynote' | 'file-boxnote' | 'file-video' | 'folder-external' | 'folder-shared' | 'action-relay' | 'action-mention' | 'action-task' | 'action-taskapproval' | 'action-annotation' | 'action-performed-completed' | 'action-performed-rejected' | 'collaborator-external' | 'collaborator-admin' | 'collaborator-coadmin' | 'content-pin' | 'content-collection' | 'content-offline' | 'content-progress' | 'alert-error' | 'status-pending';
+    /** Whether to show the tooltip when hovering over the badge. */
+    showTooltipOnBadge?: boolean;
+    /** The configuration for the tooltip, required if showTooltipOnBadge is true. */
+    tooltipConfig?: TooltipConfig;
 }
 export declare const IconBadgeVariants: Array<IconBadgeProps["variant"]>;
 export declare const IconBadge: (props: IconBadgeProps) => import("react/jsx-runtime").JSX.Element;

package/dist/lib-esm/badge/icon-badge.js

@@ -1,8 +1,11 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 import { FilePdf, FileDocs, FileSheets, FileImage, FileCanvas, FilePages, FileKeynote, FileBoxNote, FileVideo, FolderExternal, FolderShared, Relay, EllipsisBubble, Task, ApprovalTask, Annotation, Checkmark, XMark, GlobeBadge, Star, Pin, Arrow, CheckmarkUnderline, Loader, Alert } from '@box/blueprint-web-assets/icons/Fill';
 import { ClockBadge } from '@box/blueprint-web-assets/icons/Line';
 import { SurfaceBadgePdfSurface, GrayWhite, SurfaceBadgeDocsSurface, SurfaceBadgeSheetsSurface, SurfaceBadgeImageSurface, SurfaceBadgeCanvasSurface, SurfaceBadgePagesSurface, SurfaceBadgeKeynoteSurface, SurfaceBadgeBoxnoteSurface, Gray100, SurfaceBadgeVideoSurface, SurfaceBadgeFolderexternalSurface, SurfaceBadgeFoldersharedSurface, SurfaceBadgeRelaySurface, SurfaceBadgeMentionSurface, SurfaceBadgeTaskSurface, SurfaceBadgeTaskapprovalSurface, SurfaceBadgeAnnotationSurface, SurfaceBadgeCompletedSurface, SurfaceBadgeRejectedSurface, SurfaceBadgeExternalSurface, SurfaceBadgeAdminSurface, SurfaceBadgeCoadminSurface, SurfaceBadgePinSurface, Gray80, SurfaceBadgeCollectionSurface, SurfaceBadgeOfflineSurface, SurfaceBadgeProgressSurface, SurfaceBadgeErrorSurface, Yellorange50 } from '@box/blueprint-web-assets/tokens/tokens';
+import clsx from 'clsx';
+import mapValues from 'lodash/mapValues';
 import { createElement } from 'react';
+import { TooltipWrapper } from '../utils/TooltipWrapper.js';
 import { BaseBadge } from './base-badge.js';
 import styles from './base-badge.module.js';
 import { useSingleChildCheck } from './utils/useSingleChildCheck.js';
@@ -159,7 +162,9 @@ const IconBadge = props => {
     size,
     variant,
     children,
-    offset
+    offset,
+    showTooltipOnBadge,
+    tooltipConfig
   } = props;
   const {
     backgroundColor,
@@ -169,21 +174,46 @@ const IconBadge = props => {
   } = badgeVariantToIconProps[variant];
   const iconSize = badgeSizeToIconSize[size];
   useSingleChildCheck(children);
+  const offsetStyle = mapValues(offset, value => {
+    const num = Number(value);
+    return Number.isInteger(num) ? `${num - 1}px` : '0';
+  });
+  const badge = jsx(BaseBadge, {
+    backgroundColor: backgroundColor,
+    className: styles.iconBadge,
+    offset: showTooltipOnBadge ? undefined : offset,
+    size: size,
+    children: /*#__PURE__*/createElement(icon, {
+      color: iconColor,
+      height: iconSize,
+      width: iconSize,
+      role: 'presentation',
+      style: iconStyle || {}
+    })
+  });
+  if (showTooltipOnBadge && tooltipConfig) {
+    return jsxs("div", {
+      className: styles.badgeContainer,
+      children: [children, jsx(TooltipWrapper, {
+        tooltipContent: tooltipConfig.tooltipContent,
+        tooltipSide: tooltipConfig.tooltipSide,
+        withTooltip: showTooltipOnBadge,
+        children: jsx("div", {
+          "aria-label": tooltipConfig.tooltipAriaLabel,
+          className: clsx(styles.interactiveWrapper, styles[`${size}SizeBadge`]),
+          role: "button",
+          style: {
+            ...offsetStyle
+          },
+          tabIndex: 0,
+          children: badge
+        })
+      })]
+    });
+  }
   return jsxs("div", {
     className: styles.badgeContainer,
-    children: [children, jsx(BaseBadge, {
-      backgroundColor: backgroundColor,
-      className: styles.iconBadge,
-      offset: offset,
-      size: size,
-      children: /*#__PURE__*/createElement(icon, {
-        color: iconColor,
-        height: iconSize,
-        width: iconSize,
-        role: 'presentation',
-        style: iconStyle || {}
-      })
-    })]
+    children: [children, badge]
   });
 };
 

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

@@ -1,2 +1,2 @@
 import { type BrandingStylesProps } from './types';
-export declare const BrandingStyles: ({ brandColor }: BrandingStylesProps) => null;
+export declare const BrandingStyles: ({ brandColor, containerSelector }: BrandingStylesProps) => null;

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

@@ -1,9 +1,10 @@
 import { useCustomBranding } from './useCustomBranding.js';
 
 const BrandingStyles = ({
-  brandColor
+  brandColor,
+  containerSelector = ':root[lang]'
 }) => {
-  useCustomBranding(brandColor);
+  useCustomBranding(brandColor, containerSelector);
   return null;
 };
 

package/dist/lib-esm/branding-styles/types.d.ts

@@ -1,4 +1,6 @@
 export interface BrandingStylesProps {
     /** Color value used for generating theme color palette */
     brandColor: string;
+    /** CSS selector for the element where branding tokens will be attached - defaults to :root[lang] */
+    containerSelector?: string;
 }

package/dist/lib-esm/branding-styles/useCustomBranding.d.ts

@@ -1 +1,3 @@
-export declare const useCustomBranding: (brandColor: string) => void;
+import { createTheme } from './utils/createTheme';
+export declare const getBrandingTokensCssRule: (buieTheme: ReturnType<typeof createTheme>, isBrandingEnabled: boolean, containerSelector: string, tokenPrefix?: string) => string;
+export declare const useCustomBranding: (brandColor: string, containerSelector?: string) => void;

package/dist/lib-esm/branding-styles/useCustomBranding.js

@@ -1,8 +1,36 @@
-import { BoxBlue100, Gray65 } from '@box/blueprint-web-assets/tokens/tokens';
+import { Gray65, BoxBlue100 } from '@box/blueprint-web-assets/tokens/tokens';
 import { useEnhancedEffect } from '../utils/useEnhancedEffect.js';
 import { createTheme } from './utils/createTheme.js';
 
-const useCustomBranding = brandColor => {
+const getBrandingTokensCssRule = (buieTheme, isBrandingEnabled, containerSelector, tokenPrefix = '--') => {
+  return `
+    ${containerSelector} {
+        /* Button branding tokens */
+        ${tokenPrefix}text-text-brand-on-color: ${buieTheme.primary.buttonForeground};
+        ${tokenPrefix}surface-surface-brand: ${buieTheme.primary.buttonBackground};
+        ${tokenPrefix}surface-surface-brand-hover: ${buieTheme.primary.buttonBackgroundHover};
+        ${tokenPrefix}surface-surface-brand-pressed: ${buieTheme.primary.buttonBackgroundActive};
+        /* BUIE Theme has no token for disabled and busy button. Setting to default TODO: Confirm with designers */
+        ${tokenPrefix}surface-surface-brand-disabled: ${buieTheme.primary.buttonBackground};
+        ${tokenPrefix}surface-surface-brand-busy: ${buieTheme.primary.buttonBackground};
+
+        /* Nav branding tokens */
+        ${tokenPrefix}surface-nav-surface-brand-selected-focus: ${buieTheme.primary.backgroundActive};
+        ${tokenPrefix}surface-nav-surface-brand-selected: ${buieTheme.primary.backgroundActive};
+        ${tokenPrefix}surface-nav-surface-brand-focus: ${buieTheme.primary.backgroundActive};
+        ${tokenPrefix}surface-nav-surface-brand-hover: ${buieTheme.primary.backgroundHover};
+        ${tokenPrefix}surface-nav-surface-brand: ${buieTheme.primary.background};
+        ${tokenPrefix}surface-nav-surface-brand-foreground: ${buieTheme.primary.foreground};
+        ${tokenPrefix}surface-nav-surface-brand-divider: ${buieTheme.primary.dividerBackground};
+
+        /* Illustrations branding tokens */
+        ${tokenPrefix}surface-illustration-surface-box-neutral: ${isBrandingEnabled ? Gray65 : BoxBlue100};
+
+        /* Progress bar branding tokens */
+        ${tokenPrefix}surface-progress-bar-surface-brand-background: ${buieTheme.primary.progressBarBackground};
+    }`;
+};
+const useCustomBranding = (brandColor, containerSelector = ':root[lang]') => {
   useEnhancedEffect(() => {
     const buieTheme = createTheme(brandColor);
     const isBrandingEnabled = brandColor.toLowerCase() !== BoxBlue100.toLowerCase();
@@ -11,37 +39,13 @@ const useCustomBranding = brandColor => {
     // add data-blueprint property for debugging
     stylesheet.dataset.blueprint = '';
     document.head.appendChild(stylesheet);
-    stylesheet.sheet?.insertRule(
-    // "lang" attribute selector for increased specificity
-    `:root[lang] {
-                /* Button branding tokens */
-                --text-text-brand-on-color: ${buieTheme.primary.buttonForeground};
-                --surface-surface-brand: ${buieTheme.primary.buttonBackground};
-                --surface-surface-brand-hover: ${buieTheme.primary.buttonBackgroundHover};
-                --surface-surface-brand-pressed: ${buieTheme.primary.buttonBackgroundActive};
-                /* BUIE Theme has no token for disabled and busy button. Setting to default TODO: Confirm with designers */
-                --surface-surface-brand-disabled: ${buieTheme.primary.buttonBackground};
-                --surface-surface-brand-busy: ${buieTheme.primary.buttonBackground};
-
-                /* Nav branding tokens */
-                --surface-nav-surface-brand-selected-focus: ${buieTheme.primary.backgroundActive};
-                --surface-nav-surface-brand-selected: ${buieTheme.primary.backgroundActive};
-                --surface-nav-surface-brand-focus: ${buieTheme.primary.backgroundActive};
-                --surface-nav-surface-brand-hover: ${buieTheme.primary.backgroundHover};
-                --surface-nav-surface-brand: ${buieTheme.primary.background};
-                --surface-nav-surface-brand-foreground: ${buieTheme.primary.foreground};
-                --surface-nav-surface-brand-divider: ${buieTheme.primary.dividerBackground};
-
-                /* Illustrations branding tokens */
-                --surface-illustration-surface-box-neutral: ${isBrandingEnabled ? Gray65 : BoxBlue100};
-
-                /* Progress bar branding tokens */
-                --surface-progress-bar-surface-brand-background: ${buieTheme.primary.progressBarBackground};
-              }`, 0);
+    stylesheet.sheet?.insertRule(getBrandingTokensCssRule(buieTheme, isBrandingEnabled, containerSelector), 0);
+    // Blueprint 2.0 tokens
+    stylesheet.sheet?.insertRule(getBrandingTokensCssRule(buieTheme, isBrandingEnabled, containerSelector, '--bp-'), 0);
     return () => {
       document.head.removeChild(stylesheet);
     };
   }, [brandColor]);
 };
 
-export { useCustomBranding };
+export { getBrandingTokensCssRule, useCustomBranding };

package/dist/lib-esm/ellipsizable-text/ellipsizable-text.js

@@ -1,28 +1,10 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef, createRef } from 'react';
-import { Focusable } from '../focusable/focusable.js';
 import { Text } from '../text/text.js';
-import { Tooltip } from '../tooltip/tooltip.js';
+import { TooltipWrapper } from '../utils/TooltipWrapper.js';
 import { useForkRef } from '../utils/useForkRef.js';
 import { useIsEllipsized } from '../utils/useIsEllipsized.js';
 
-const Wrapper = ({
-  children,
-  withTooltip,
-  tooltipContent,
-  tooltipSide
-}) => {
-  if (withTooltip) {
-    return jsx(Tooltip, {
-      content: tooltipContent,
-      side: tooltipSide,
-      children: jsx(Focusable, {
-        children: children
-      })
-    });
-  }
-  return children;
-};
 const EllipsizableText = /*#__PURE__*/forwardRef(({
   children,
   lineClamp,
@@ -32,7 +14,7 @@ const EllipsizableText = /*#__PURE__*/forwardRef(({
 }, forwardedRef) => {
   const textRef = /*#__PURE__*/createRef();
   const isEllipsized = useIsEllipsized(textRef);
-  return jsx(Wrapper, {
+  return jsx(TooltipWrapper, {
     tooltipContent: children,
     tooltipSide: tooltipSide,
     withTooltip: isEllipsized,

package/dist/lib-esm/index.css

@@ -895,13 +895,63 @@
 [data-button-wrapper][data-focus-visible] .bp_avatar_module_avatar--e0424{
   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);
+  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);
+  position:relative;
+  -webkit-text-decoration:var(--body-default-text-decoration);
+          text-decoration:var(--body-default-text-decoration);
+  text-transform:var(--body-default-text-case);
+  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--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_arrow--db0b5{
+  border-left:8.7px solid #0000;
+  border-right:8.7px solid #0000;
+  border-top:8.7px solid var(--surface-tooltip-surface);
+  display:block;
+  height:0;
+  width:0;
+}
+.bp_tooltip_module_arrow--db0b5.bp_tooltip_module_error--db0b5{
+  border-top-color:var(--border-tooltip-border-error);
+}
+.bp_tooltip_module_arrow--db0b5.bp_tooltip_module_error--db0b5::after{
+  border-left:7.7px solid #0000;
+  border-right:7.7px solid #0000;
+  border-top:7.7px solid var(--surface-tooltip-surface-error);
+  content:"";
+  height:0;
+  left:1px;
+  position:absolute;
+  top:-.7px;
+  width:0;
+}
 
-.bp_base_badge_module_badgeContainer--d1b9b{
+.bp_base_badge_module_badgeContainer--0697a{
   display:inline-flex;
   position:relative;
 }
 
-.bp_base_badge_module_badge--d1b9b{
+.bp_base_badge_module_badge--0697a{
   align-items:center;
   border:var(--border-2) solid var(--border-badge-border);
   border-radius:var(--radius-half);
@@ -913,66 +963,98 @@
           user-select:none;
 }
 
-.bp_base_badge_module_smallSizeBadge--d1b9b{
+.bp_base_badge_module_smallSizeBadge--0697a{
   height:var(--size-2);
   min-width:var(--size-2);
 }
 
-.bp_base_badge_module_mediumSizeBadge--d1b9b{
+.bp_base_badge_module_mediumSizeBadge--0697a{
   height:var(--size-3);
   min-width:var(--size-3);
 }
 
-.bp_base_badge_module_largeSizeBadge--d1b9b{
+.bp_base_badge_module_largeSizeBadge--0697a{
   height:var(--size-4);
   min-width:var(--size-4);
 }
 
-.bp_base_badge_module_xlargeSizeBadge--d1b9b{
+.bp_base_badge_module_xlargeSizeBadge--0697a{
   height:var(--size-5);
   min-width:var(--size-5);
 }
 
-.bp_base_badge_module_xxlargeSizeBadge--d1b9b{
+.bp_base_badge_module_xxlargeSizeBadge--0697a{
   height:var(--size-6);
   min-width:var(--size-6);
 }
 
-.bp_base_badge_module_iconBadge--d1b9b{
+.bp_base_badge_module_iconBadge--0697a{
   bottom:-5%;
   right:-5%;
 }
 
-.bp_base_badge_module_statusBadge--d1b9b{
+.bp_base_badge_module_interactiveWrapper--0697a{
+  border:var(--border-2) solid #0000;
+  border-radius:50%;
+  bottom:calc(-5% - var(--border-2)/2);
+  outline-offset:var(--size-05);
+  position:absolute;
+  right:calc(-5% - var(--border-2)/2);
+}
+.bp_base_badge_module_interactiveWrapper--0697a.bp_base_badge_module_smallSizeBadge--0697a{
+  width:var(--size-2);
+}
+.bp_base_badge_module_interactiveWrapper--0697a.bp_base_badge_module_mediumSizeBadge--0697a{
+  width:var(--size-3);
+}
+.bp_base_badge_module_interactiveWrapper--0697a.bp_base_badge_module_largeSizeBadge--0697a{
+  width:var(--size-4);
+}
+.bp_base_badge_module_interactiveWrapper--0697a.bp_base_badge_module_xlargeSizeBadge--0697a{
+  width:var(--size-5);
+}
+.bp_base_badge_module_interactiveWrapper--0697a.bp_base_badge_module_xxlargeSizeBadge--0697a{
+  width:var(--size-6);
+}
+.bp_base_badge_module_interactiveWrapper--0697a::before{
+  content:"";
+  left:calc(var(--size-6)*-1/4);
+  min-height:var(--size-6);
+  min-width:var(--size-6);
+  position:absolute;
+  top:calc(var(--size-6)*-1/4);
+}
+
+.bp_base_badge_module_statusBadge--0697a{
   bottom:-20%;
   right:-20%;
 }
 
-.bp_base_badge_module_statusBadge--d1b9b.bp_base_badge_module_largeSizeBadge--d1b9b{
+.bp_base_badge_module_statusBadge--0697a.bp_base_badge_module_largeSizeBadge--0697a{
   bottom:-22%;
   right:-22%;
 }
 
-.bp_base_badge_module_statusBadge--d1b9b.bp_base_badge_module_xlargeSizeBadge--d1b9b{
+.bp_base_badge_module_statusBadge--0697a.bp_base_badge_module_xlargeSizeBadge--0697a{
   bottom:-15%;
   right:-15%;
 }
 
-.bp_base_badge_module_statusBadge--d1b9b.bp_base_badge_module_xxlargeSizeBadge--d1b9b{
+.bp_base_badge_module_statusBadge--0697a.bp_base_badge_module_xxlargeSizeBadge--0697a{
   bottom:-4%;
   right:-4%;
 }
 
-.bp_base_badge_module_numericBadge--d1b9b{
+.bp_base_badge_module_numericBadge--0697a{
   left:60%;
   top:0;
 }
 
-.bp_base_badge_module_numericBadgeSingleDigit--d1b9b{
+.bp_base_badge_module_numericBadgeSingleDigit--0697a{
   padding:1px;
 }
 
-.bp_base_badge_module_numericBadgeMoreDigits--d1b9b{
+.bp_base_badge_module_numericBadgeMoreDigits--0697a{
   padding:1px 3px;
 }
 .bp_button_wrapper_module_buttonWrapper--b0897{
@@ -990,56 +1072,6 @@
 .bp_card_module_card--558da.bp_card_module_dropshadow-3--558da{
   box-shadow:var(--dropshadow-3);
 }
-.bp_tooltip_module_content--db0b5{
-  border-radius:var(--radius-1);
-  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);
-  position:relative;
-  -webkit-text-decoration:var(--body-default-text-decoration);
-          text-decoration:var(--body-default-text-decoration);
-  text-transform:var(--body-default-text-case);
-  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--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_arrow--db0b5{
-  border-left:8.7px solid #0000;
-  border-right:8.7px solid #0000;
-  border-top:8.7px solid var(--surface-tooltip-surface);
-  display:block;
-  height:0;
-  width:0;
-}
-.bp_tooltip_module_arrow--db0b5.bp_tooltip_module_error--db0b5{
-  border-top-color:var(--border-tooltip-border-error);
-}
-.bp_tooltip_module_arrow--db0b5.bp_tooltip_module_error--db0b5::after{
-  border-left:7.7px solid #0000;
-  border-right:7.7px solid #0000;
-  border-top:7.7px solid var(--surface-tooltip-surface-error);
-  content:"";
-  height:0;
-  left:1px;
-  position:absolute;
-  top:-.7px;
-  width:0;
-}
 
 .bp_card_tooltip_module_content--065eb{
   animation-duration:.4s;

package/dist/lib-esm/index.js

@@ -7,7 +7,7 @@ export { StatusBadge } from './badge/status-badge.js';
 export { BlueprintModernizationProvider } from './blueprint-modernization-context/blueprint-modernization-context.js';
 export { useBlueprintModernization } from './blueprint-modernization-context/useBlueprintModernization.js';
 export { BrandingStyles } from './branding-styles/branding-styles.js';
-export { useCustomBranding } from './branding-styles/useCustomBranding.js';
+export { getBrandingTokensCssRule, useCustomBranding } from './branding-styles/useCustomBranding.js';
 export { Button } from './button/button.js';
 export { ButtonWrapper } from './button-wrapper/button-wrapper.js';
 export { Card } from './card/card.js';

package/dist/lib-esm/utils/TooltipWrapper.d.ts

@@ -0,0 +1,7 @@
+import { type TooltipProps } from '../tooltip';
+export declare const TooltipWrapper: ({ children, withTooltip, tooltipContent, tooltipSide, }: {
+    children: React.ReactNode;
+    withTooltip: boolean;
+    tooltipContent: TooltipProps["content"];
+    tooltipSide?: TooltipProps["side"];
+}) => string | number | boolean | Iterable<import("react").ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;

package/dist/lib-esm/utils/TooltipWrapper.js

@@ -0,0 +1,23 @@
+import { jsx } from 'react/jsx-runtime';
+import { Focusable } from '../focusable/focusable.js';
+import { Tooltip } from '../tooltip/tooltip.js';
+
+const TooltipWrapper = ({
+  children,
+  withTooltip,
+  tooltipContent,
+  tooltipSide
+}) => {
+  if (withTooltip) {
+    return jsx(Tooltip, {
+      content: tooltipContent,
+      side: tooltipSide,
+      children: jsx(Focusable, {
+        children: children
+      })
+    });
+  }
+  return children;
+};
+
+export { TooltipWrapper };

package/package.json

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