@box/blueprint-web 12.35.0 → 12.37.0

package/dist/lib-esm/avatar/avatar.d.ts

@@ -1,25 +1,30 @@
-export declare const Avatar: import("react").ForwardRefExoticComponent<(Omit<Omit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref"> & {
-    ref?: ((instance: HTMLImageElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLImageElement> | null | undefined;
+import React from 'react';
+export declare const Avatar: React.ForwardRefExoticComponent<(Omit<Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref"> & {
+    ref?: ((instance: HTMLImageElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLImageElement> | null | undefined;
 } & {
     anonymous?: boolean;
     size?: import("./types").AvatarSize;
     text?: string;
-} & Required<Pick<import("./types").Image, keyof import("./types").Image>> & Omit<import("./types").Image, keyof import("./types").Image> & Required<Pick<import("./types").WithColor, "color">> & Partial<Record<"colorIndex", never>> & Omit<import("./types").WithColor, keyof import("./types").WithColor>, "ref"> | Omit<Omit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref"> & {
-    ref?: ((instance: HTMLImageElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLImageElement> | null | undefined;
+    icon?: React.ReactElement<React.SVGProps<SVGSVGElement>>;
+} & Required<Pick<import("./types").Image, keyof import("./types").Image>> & Omit<import("./types").Image, keyof import("./types").Image> & Required<Pick<import("./types").WithColor, "color">> & Partial<Record<"colorIndex", never>> & Omit<import("./types").WithColor, keyof import("./types").WithColor>, "ref"> | Omit<Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref"> & {
+    ref?: ((instance: HTMLImageElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLImageElement> | null | undefined;
 } & {
     anonymous?: boolean;
     size?: import("./types").AvatarSize;
     text?: string;
-} & Required<Pick<import("./types").Image, keyof import("./types").Image>> & Omit<import("./types").Image, keyof import("./types").Image> & Required<Pick<import("./types").WithColor, "colorIndex">> & Partial<Record<"color", never>> & Omit<import("./types").WithColor, keyof import("./types").WithColor>, "ref"> | Omit<Omit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref"> & {
-    ref?: ((instance: HTMLImageElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLImageElement> | null | undefined;
+    icon?: React.ReactElement<React.SVGProps<SVGSVGElement>>;
+} & Required<Pick<import("./types").Image, keyof import("./types").Image>> & Omit<import("./types").Image, keyof import("./types").Image> & Required<Pick<import("./types").WithColor, "colorIndex">> & Partial<Record<"color", never>> & Omit<import("./types").WithColor, keyof import("./types").WithColor>, "ref"> | Omit<Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref"> & {
+    ref?: ((instance: HTMLImageElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLImageElement> | null | undefined;
 } & {
     anonymous?: boolean;
     size?: import("./types").AvatarSize;
     text?: string;
-} & Partial<Record<keyof import("./types").Image, never>> & Omit<import("./types").Image, keyof import("./types").Image> & Required<Pick<import("./types").WithColor, "color">> & Partial<Record<"colorIndex", never>> & Omit<import("./types").WithColor, keyof import("./types").WithColor>, "ref"> | Omit<Omit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref"> & {
-    ref?: ((instance: HTMLImageElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLImageElement> | null | undefined;
+    icon?: React.ReactElement<React.SVGProps<SVGSVGElement>>;
+} & Partial<Record<keyof import("./types").Image, never>> & Omit<import("./types").Image, keyof import("./types").Image> & Required<Pick<import("./types").WithColor, "color">> & Partial<Record<"colorIndex", never>> & Omit<import("./types").WithColor, keyof import("./types").WithColor>, "ref"> | Omit<Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref"> & {
+    ref?: ((instance: HTMLImageElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLImageElement> | null | undefined;
 } & {
     anonymous?: boolean;
     size?: import("./types").AvatarSize;
     text?: string;
-} & Partial<Record<keyof import("./types").Image, never>> & Omit<import("./types").Image, keyof import("./types").Image> & Required<Pick<import("./types").WithColor, "colorIndex">> & Partial<Record<"color", never>> & Omit<import("./types").WithColor, keyof import("./types").WithColor>, "ref">) & import("react").RefAttributes<HTMLImageElement>>;
+    icon?: React.ReactElement<React.SVGProps<SVGSVGElement>>;
+} & Partial<Record<keyof import("./types").Image, never>> & Omit<import("./types").Image, keyof import("./types").Image> & Required<Pick<import("./types").WithColor, "colorIndex">> & Partial<Record<"color", never>> & Omit<import("./types").WithColor, keyof import("./types").WithColor>, "ref">) & React.RefAttributes<HTMLImageElement>>;

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

@@ -2,9 +2,9 @@ import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { Avatar as Avatar$1 } from '@box/blueprint-web-assets/icons/Line';
 import { GrayBlack } from '@box/blueprint-web-assets/tokens/tokens';
 import clsx from 'clsx';
-import { forwardRef, useState, useEffect } from 'react';
+import React__default, { forwardRef, useState, useEffect } from 'react';
 import styles from './avatar.module.js';
-import { colors, anonymousAvatarIconSizes } from './consts.js';
+import { colors, iconSizes } from './consts.js';
 
 const Avatar = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {
@@ -13,6 +13,7 @@ const Avatar = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     className,
     color,
     colorIndex,
+    icon,
     loading = 'lazy',
     onLoad,
     src,
@@ -27,13 +28,24 @@ const Avatar = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     setImageHasError(false);
   }, [src]);
   const backgroundColor = color || colors[(colorIndex || 0) % colors.length];
-  const anonymousAvatarIconSize = anonymousAvatarIconSizes[size];
-  const imageIsLoading = !!src && !imageIsLoaded;
-  const shouldShowText = !anonymous && text && !imageIsLoaded;
-  const shouldShowAnonymousAvatar = anonymous || imageIsLoading && !text;
+  const iconSize = iconSizes[size];
+  const imageIsLoading = !!src && !icon && !imageIsLoaded;
+  const shouldShowIcon = !anonymous && icon && (!src || !imageIsLoaded);
+  const shouldShowText = !anonymous && !icon && text && !imageIsLoaded;
+  const shouldShowAnonymousAvatar = anonymous || imageIsLoading && !text && !icon;
   const shouldShowImage = !anonymous && src && !imageHasError;
   const avatarContents = jsxs(Fragment, {
-    children: [shouldShowText && jsx("div", {
+    children: [shouldShowIcon && jsx("div", {
+      className: styles.iconContainer,
+      style: {
+        backgroundColor
+      },
+      children: /*#__PURE__*/React__default.cloneElement(icon, {
+        width: iconSize,
+        height: iconSize,
+        role: 'presentation'
+      })
+    }), shouldShowText && jsx("div", {
       className: clsx(styles.text, styles[`length-${text.length}`]),
       style: {
         backgroundColor
@@ -43,9 +55,9 @@ const Avatar = /*#__PURE__*/forwardRef((props, forwardedRef) => {
       className: styles.anonymousAvatar,
       children: jsx(Avatar$1, {
         color: GrayBlack,
-        height: anonymousAvatarIconSize,
+        height: iconSize,
         role: "presentation",
-        width: anonymousAvatarIconSize
+        width: iconSize
       })
     }), shouldShowImage && jsx("img", {
       ...rest,

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

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"avatar":"bp_avatar_module_avatar--94734","text":"bp_avatar_module_text--94734","small":"bp_avatar_module_small--94734","length-1":"bp_avatar_module_length-1--94734","length-2":"bp_avatar_module_length-2--94734","medium":"bp_avatar_module_medium--94734","large":"bp_avatar_module_large--94734","length-3":"bp_avatar_module_length-3--94734","length-4":"bp_avatar_module_length-4--94734","xlarge":"bp_avatar_module_xlarge--94734","xxlarge":"bp_avatar_module_xxlarge--94734","badge":"bp_avatar_module_badge--94734","image":"bp_avatar_module_image--94734","loading":"bp_avatar_module_loading--94734","anonymousAvatar":"bp_avatar_module_anonymousAvatar--94734"};
+var styles = {"avatar":"bp_avatar_module_avatar--af6ca","text":"bp_avatar_module_text--af6ca","small":"bp_avatar_module_small--af6ca","length-1":"bp_avatar_module_length-1--af6ca","length-2":"bp_avatar_module_length-2--af6ca","medium":"bp_avatar_module_medium--af6ca","large":"bp_avatar_module_large--af6ca","length-3":"bp_avatar_module_length-3--af6ca","length-4":"bp_avatar_module_length-4--af6ca","xlarge":"bp_avatar_module_xlarge--af6ca","xxlarge":"bp_avatar_module_xxlarge--af6ca","badge":"bp_avatar_module_badge--af6ca","image":"bp_avatar_module_image--af6ca","loading":"bp_avatar_module_loading--af6ca","anonymousAvatar":"bp_avatar_module_anonymousAvatar--af6ca","iconContainer":"bp_avatar_module_iconContainer--af6ca"};
 
 export { styles as default };

package/dist/lib-esm/avatar/consts.d.ts

@@ -1,5 +1,5 @@
 import { type AvatarSize, type Color } from './types';
-export declare const anonymousAvatarIconSizes: Record<AvatarSize, string>;
+export declare const iconSizes: Record<AvatarSize, string>;
 export declare const AvatarSizes: readonly ["small", "medium", "large", "xlarge", "xxlarge"];
 export declare const colorsMap: Record<string, Color>;
 export declare const colors: string[];

package/dist/lib-esm/avatar/consts.js

@@ -1,6 +1,6 @@
 import { Size3, Size4, Size5, Size7, Size9, BoxBlue50, DarkBlue50, Yellow50, GreenLight50, Yellorange50, LightBlue50, WatermelonRed50, PurpleRain50, Orange50, Grimace50 } from '@box/blueprint-web-assets/tokens/tokens';
 
-const anonymousAvatarIconSizes = {
+const iconSizes = {
   small: Size3,
   medium: Size4,
   large: Size5,
@@ -21,4 +21,4 @@ const colorsMap = {
 };
 const colors = Object.values(colorsMap);
 
-export { anonymousAvatarIconSizes, colors, colorsMap };
+export { colors, colorsMap, iconSizes };

package/dist/lib-esm/avatar/types.d.ts

@@ -1,20 +1,22 @@
 import { type BoxBlue50, type DarkBlue50, type GreenLight50, type Grimace50, type LightBlue50, type Orange50, type PurpleRain50, type WatermelonRed50, type Yellorange50, type Yellow50 } from '@box/blueprint-web-assets/tokens/tokens';
+import { type ReactElement, type SVGProps } from 'react';
 import { type RequireAllOrNone, type RequireExactlyOne } from 'type-fest';
 import { type AvatarSizes } from './consts';
 export type AvatarSize = (typeof AvatarSizes)[number];
 export type Color = typeof BoxBlue50 | typeof DarkBlue50 | typeof Yellow50 | typeof GreenLight50 | typeof Yellorange50 | typeof LightBlue50 | typeof WatermelonRed50 | typeof PurpleRain50 | typeof Orange50 | typeof Grimace50;
 export interface Image {
-    /** The image to display. When the image is loading or if it fails to load, the fallback is displayed.
-     * The fallback is the text. If the text is not provided, the fallback is the anonymous user image.
+    /** The image to display. When the image is loading or if it fails to load, fallbacks are displayed in order:
+     * icon (if provided) → text (if provided) → anonymous user image.
+     * The icon serves as the primary fallback while the image is loading.
      */
     src?: string;
     /** The alt text for the image */
     alt?: string;
 }
 export interface WithColor {
-    /** The color of the avatar background when displaying the letter or the number */
+    /** The color of the avatar background when displaying the icon, letter or the number */
     color?: Color;
-    /** The index of the color  of the avatar background when displaying the letter or the number.
+    /** The index of the color  of the avatar background when displaying the icon, letter or the number.
      * A convenience replacement for the color prop to facilitate providing a hash of the user data.
      * It is ignored when the color prop is provided. */
     colorIndex?: number;
@@ -28,4 +30,8 @@ export type AvatarProps = React.ComponentPropsWithRef<'img'> & {
      *  Numbers can be formatted with formatNumber() that is exposed along with the Avatar component.
      */
     text?: string;
+    /** The icon element to display. Will not be displayed if the src prop is provided and the image is successfully loaded.
+     * Example: <Avatar icon={<AvatarTwo />} />
+     */
+    icon?: ReactElement<SVGProps<SVGSVGElement>>;
 } & RequireAllOrNone<Image, keyof Image> & RequireExactlyOne<WithColor, keyof WithColor>;

package/dist/lib-esm/index.css

@@ -907,7 +907,7 @@
   transform:rotate(180deg);
 }
 
-.bp_avatar_module_avatar--94734{
+.bp_avatar_module_avatar--af6ca{
   all:unset;
   align-items:center;
   background-color:var(--gray-10);
@@ -925,7 +925,7 @@
           text-decoration:var(--body-default-bold-text-decoration);
   text-transform:var(--body-default-bold-text-case);
 }
-.bp_avatar_module_avatar--94734 .bp_avatar_module_text--94734{
+.bp_avatar_module_avatar--af6ca .bp_avatar_module_text--af6ca{
   align-items:center;
   border-radius:50%;
   display:flex;
@@ -933,14 +933,14 @@
   justify-content:center;
   width:100%;
 }
-.bp_avatar_module_avatar--94734.bp_avatar_module_small--94734{
+.bp_avatar_module_avatar--af6ca.bp_avatar_module_small--af6ca{
   height:var(--size-6);
   width:var(--size-6);
 }
-.bp_avatar_module_avatar--94734.bp_avatar_module_small--94734 .bp_avatar_module_text--94734{
+.bp_avatar_module_avatar--af6ca.bp_avatar_module_small--af6ca .bp_avatar_module_text--af6ca{
   font-size:.5rem;
 }
-.bp_avatar_module_avatar--94734.bp_avatar_module_small--94734 .bp_avatar_module_length-1--94734.bp_avatar_module_text--94734,.bp_avatar_module_avatar--94734.bp_avatar_module_small--94734 .bp_avatar_module_length-2--94734.bp_avatar_module_text--94734{
+.bp_avatar_module_avatar--af6ca.bp_avatar_module_small--af6ca .bp_avatar_module_length-1--af6ca.bp_avatar_module_text--af6ca,.bp_avatar_module_avatar--af6ca.bp_avatar_module_small--af6ca .bp_avatar_module_length-2--af6ca.bp_avatar_module_text--af6ca{
   font-family:var(--label-bold-font-family);
   font-size:var(--label-bold-font-size);
   font-weight:var(--label-bold-font-weight);
@@ -950,11 +950,11 @@
           text-decoration:var(--label-bold-text-decoration);
   text-transform:var(--label-bold-text-case);
 }
-.bp_avatar_module_avatar--94734.bp_avatar_module_medium--94734{
+.bp_avatar_module_avatar--af6ca.bp_avatar_module_medium--af6ca{
   height:var(--size-7);
   width:var(--size-7);
 }
-.bp_avatar_module_avatar--94734.bp_avatar_module_medium--94734 .bp_avatar_module_text--94734{
+.bp_avatar_module_avatar--af6ca.bp_avatar_module_medium--af6ca .bp_avatar_module_text--af6ca{
   font-family:var(--label-bold-font-family);
   font-size:var(--label-bold-font-size);
   font-weight:var(--label-bold-font-weight);
@@ -964,17 +964,17 @@
           text-decoration:var(--label-bold-text-decoration);
   text-transform:var(--label-bold-text-case);
 }
-.bp_avatar_module_avatar--94734.bp_avatar_module_medium--94734 .bp_avatar_module_length-1--94734.bp_avatar_module_text--94734,.bp_avatar_module_avatar--94734.bp_avatar_module_medium--94734 .bp_avatar_module_length-2--94734.bp_avatar_module_text--94734{
+.bp_avatar_module_avatar--af6ca.bp_avatar_module_medium--af6ca .bp_avatar_module_length-1--af6ca.bp_avatar_module_text--af6ca,.bp_avatar_module_avatar--af6ca.bp_avatar_module_medium--af6ca .bp_avatar_module_length-2--af6ca.bp_avatar_module_text--af6ca{
   font-size:.8125rem;
 }
-.bp_avatar_module_avatar--94734.bp_avatar_module_large--94734{
+.bp_avatar_module_avatar--af6ca.bp_avatar_module_large--af6ca{
   height:var(--size-8);
   width:var(--size-8);
 }
-.bp_avatar_module_avatar--94734.bp_avatar_module_large--94734 .bp_avatar_module_text--94734{
+.bp_avatar_module_avatar--af6ca.bp_avatar_module_large--af6ca .bp_avatar_module_text--af6ca{
   font-size:.5rem;
 }
-.bp_avatar_module_avatar--94734.bp_avatar_module_large--94734 .bp_avatar_module_length-1--94734.bp_avatar_module_text--94734,.bp_avatar_module_avatar--94734.bp_avatar_module_large--94734 .bp_avatar_module_length-2--94734.bp_avatar_module_text--94734{
+.bp_avatar_module_avatar--af6ca.bp_avatar_module_large--af6ca .bp_avatar_module_length-1--af6ca.bp_avatar_module_text--af6ca,.bp_avatar_module_avatar--af6ca.bp_avatar_module_large--af6ca .bp_avatar_module_length-2--af6ca.bp_avatar_module_text--af6ca{
   font-family:var(--body-default-bold-font-family);
   font-size:var(--body-default-bold-font-size);
   font-weight:var(--body-default-bold-font-weight);
@@ -984,10 +984,10 @@
           text-decoration:var(--body-default-bold-text-decoration);
   text-transform:var(--body-default-bold-text-case);
 }
-.bp_avatar_module_avatar--94734.bp_avatar_module_large--94734 .bp_avatar_module_length-3--94734.bp_avatar_module_text--94734{
+.bp_avatar_module_avatar--af6ca.bp_avatar_module_large--af6ca .bp_avatar_module_length-3--af6ca.bp_avatar_module_text--af6ca{
   font-size:.6875rem;
 }
-.bp_avatar_module_avatar--94734.bp_avatar_module_large--94734 .bp_avatar_module_length-4--94734.bp_avatar_module_text--94734{
+.bp_avatar_module_avatar--af6ca.bp_avatar_module_large--af6ca .bp_avatar_module_length-4--af6ca.bp_avatar_module_text--af6ca{
   font-family:var(--label-bold-font-family);
   font-size:var(--label-bold-font-size);
   font-weight:var(--label-bold-font-weight);
@@ -997,14 +997,14 @@
           text-decoration:var(--label-bold-text-decoration);
   text-transform:var(--label-bold-text-case);
 }
-.bp_avatar_module_avatar--94734.bp_avatar_module_xlarge--94734{
+.bp_avatar_module_avatar--af6ca.bp_avatar_module_xlarge--af6ca{
   height:var(--size-11);
   width:var(--size-11);
 }
-.bp_avatar_module_avatar--94734.bp_avatar_module_xlarge--94734 .bp_avatar_module_text--94734{
+.bp_avatar_module_avatar--af6ca.bp_avatar_module_xlarge--af6ca .bp_avatar_module_text--af6ca{
   font-size:1rem;
 }
-.bp_avatar_module_avatar--94734.bp_avatar_module_xlarge--94734 .bp_avatar_module_length-1--94734.bp_avatar_module_text--94734,.bp_avatar_module_avatar--94734.bp_avatar_module_xlarge--94734 .bp_avatar_module_length-2--94734.bp_avatar_module_text--94734{
+.bp_avatar_module_avatar--af6ca.bp_avatar_module_xlarge--af6ca .bp_avatar_module_length-1--af6ca.bp_avatar_module_text--af6ca,.bp_avatar_module_avatar--af6ca.bp_avatar_module_xlarge--af6ca .bp_avatar_module_length-2--af6ca.bp_avatar_module_text--af6ca{
   font-family:var(--title-x-large-font-family);
   font-size:var(--title-x-large-font-size);
   font-weight:var(--title-x-large-font-weight);
@@ -1014,46 +1014,52 @@
           text-decoration:var(--title-x-large-text-decoration);
   text-transform:var(--title-x-large-text-case);
 }
-.bp_avatar_module_avatar--94734.bp_avatar_module_xxlarge--94734{
+.bp_avatar_module_avatar--af6ca.bp_avatar_module_xxlarge--af6ca{
   height:var(--size-20);
   width:var(--size-20);
 }
-.bp_avatar_module_avatar--94734.bp_avatar_module_xxlarge--94734 .bp_avatar_module_text--94734{
+.bp_avatar_module_avatar--af6ca.bp_avatar_module_xxlarge--af6ca .bp_avatar_module_text--af6ca{
   font-size:1.25rem;
 }
-.bp_avatar_module_avatar--94734.bp_avatar_module_xxlarge--94734 .bp_avatar_module_length-1--94734.bp_avatar_module_text--94734,.bp_avatar_module_avatar--94734.bp_avatar_module_xxlarge--94734 .bp_avatar_module_length-2--94734.bp_avatar_module_text--94734{
+.bp_avatar_module_avatar--af6ca.bp_avatar_module_xxlarge--af6ca .bp_avatar_module_length-1--af6ca.bp_avatar_module_text--af6ca,.bp_avatar_module_avatar--af6ca.bp_avatar_module_xxlarge--af6ca .bp_avatar_module_length-2--af6ca.bp_avatar_module_text--af6ca{
   font-size:2rem;
 }
-.bp_avatar_module_avatar--94734.bp_avatar_module_xxlarge--94734 .bp_avatar_module_badge--94734{
+.bp_avatar_module_avatar--af6ca.bp_avatar_module_xxlarge--af6ca .bp_avatar_module_badge--af6ca{
   right:-.375rem;
 }
-.bp_avatar_module_avatar--94734 .bp_avatar_module_image--94734{
+.bp_avatar_module_avatar--af6ca .bp_avatar_module_image--af6ca{
   border-radius:50%;
   height:100%;
   object-fit:cover;
   width:100%;
 }
-.bp_avatar_module_avatar--94734 .bp_avatar_module_image--94734.bp_avatar_module_loading--94734{
+.bp_avatar_module_avatar--af6ca .bp_avatar_module_image--af6ca.bp_avatar_module_loading--af6ca{
   height:0;
   width:0;
 }
 
-.bp_avatar_module_anonymousAvatar--94734{
+.bp_avatar_module_anonymousAvatar--af6ca,.bp_avatar_module_iconContainer--af6ca{
   align-items:center;
   display:flex;
   justify-content:center;
 }
 
-[data-button-wrapper]:hover .bp_avatar_module_avatar--94734{
+.bp_avatar_module_iconContainer--af6ca{
+  border-radius:50%;
+  height:100%;
+  width:100%;
+}
+
+[data-button-wrapper]:hover .bp_avatar_module_avatar--af6ca{
   box-shadow:0 0 0 0 var(--background-background), 0 0 0 var(--border-3) var(--border-avatar-border-hover);
   cursor:pointer;
 }
 
-[data-button-wrapper]:active .bp_avatar_module_avatar--94734{
+[data-button-wrapper]:active .bp_avatar_module_avatar--af6ca{
   box-shadow:0 0 0 0 var(--background-background), 0 0 0 var(--border-3) var(--border-avatar-border-pressed);
 }
 
-[data-button-wrapper][data-focus-visible] .bp_avatar_module_avatar--94734{
+[data-button-wrapper][data-focus-visible] .bp_avatar_module_avatar--af6ca{
   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--5b8ee[data-modern=false]{
@@ -5186,8 +5192,16 @@ table.bp_inline_table_module_inlineTable--7cffa tr:not(:last-child) td{
     transform:scaleX(1);
   }
 }
-.bp_navigation_menu_module_link--2613d.bp_navigation_menu_module_link--2613d{
-  color:var(--text-text-on-light);
+.bp_navigation_menu_module_link--a2f10[data-modern=false]{
+  --navigation-menu-link-text-color:var(--text-text-on-light);
+}
+
+.bp_navigation_menu_module_link--a2f10[data-modern=true]{
+  --navigation-menu-link-text-color:var(--bp-text-text-on-light);
+}
+
+.bp_navigation_menu_module_link--a2f10.bp_navigation_menu_module_link--a2f10{
+  color:var(--navigation-menu-link-text-color);
   font-family:var(--body-default-font-family);
   font-size:var(--body-default-font-size);
   font-weight:var(--body-default-font-weight);
@@ -5197,16 +5211,16 @@ table.bp_inline_table_module_inlineTable--7cffa tr:not(:last-child) td{
           text-decoration:var(--body-default-text-decoration);
   text-transform:var(--body-default-text-case);
 }
-.bp_navigation_menu_module_link--2613d.bp_navigation_menu_module_link--2613d:hover{
-  color:var(--text-text-on-light);
+.bp_navigation_menu_module_link--a2f10.bp_navigation_menu_module_link--a2f10:hover{
+  color:var(--navigation-menu-link-text-color);
 }
-.bp_navigation_menu_module_link--2613d.bp_navigation_menu_module_link--2613d.bp_navigation_menu_module_ellipsis--2613d{
+.bp_navigation_menu_module_link--a2f10.bp_navigation_menu_module_link--a2f10.bp_navigation_menu_module_ellipsis--a2f10{
   overflow:hidden;
   text-overflow:ellipsis;
   white-space:nowrap;
 }
 
-.bp_navigation_menu_module_navigationMenuSeparator--2613d{
+.bp_navigation_menu_module_navigationMenuSeparator--a2f10{
   margin-block:var(--space-2);
 }
 .bp_page_module_page--41d33{

package/dist/lib-esm/navigation-menu/navigation-menu-content.js

@@ -1,5 +1,6 @@
 import { jsx } from 'react/jsx-runtime';
 import { forwardRef } from 'react';
+import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 import { DropdownMenu } from '../primitives/dropdown-menu/index.js';
 
 /**
@@ -10,9 +11,13 @@ const NavigationMenuContent = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     children,
     ...rest
   } = props;
+  const {
+    enableModernizedComponents
+  } = useBlueprintModernization();
   return jsx(DropdownMenu.Content, {
     ...rest,
     ref: forwardedRef,
+    "data-modern": enableModernizedComponents,
     children: children
   });
 });

package/dist/lib-esm/navigation-menu/navigation-menu-link.js

@@ -2,6 +2,7 @@ import { jsx } from 'react/jsx-runtime';
 import clsx from 'clsx';
 import { forwardRef } from 'react';
 import { Link } from '../primitives/link/link.js';
+import { useBlueprintModernization } from '../blueprint-modernization-context/useBlueprintModernization.js';
 import styles from './navigation-menu.module.js';
 
 /**
@@ -12,10 +13,14 @@ const NavigationMenuLink = /*#__PURE__*/forwardRef((props, forwardedRef) => {
     children,
     ...rest
   } = props;
+  const {
+    enableModernizedComponents
+  } = useBlueprintModernization();
   return jsx(Link, {
     ...rest,
     ref: forwardedRef,
     className: clsx([styles.link, styles.ellipsis]),
+    "data-modern": enableModernizedComponents,
     children: children
   });
 });

package/dist/lib-esm/navigation-menu/navigation-menu.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"link":"bp_navigation_menu_module_link--2613d","ellipsis":"bp_navigation_menu_module_ellipsis--2613d","navigationMenuSeparator":"bp_navigation_menu_module_navigationMenuSeparator--2613d"};
+var styles = {"link":"bp_navigation_menu_module_link--a2f10","ellipsis":"bp_navigation_menu_module_ellipsis--a2f10","navigationMenuSeparator":"bp_navigation_menu_module_navigationMenuSeparator--a2f10"};
 
 export { styles as default };

package/package.json

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