@box/blueprint-web 7.28.0 → 7.29.0

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

@@ -4,27 +4,27 @@ export declare const Avatar: import("react").ForwardRefExoticComponent<(Omit<Omi
 } & {
     anonymous?: boolean | undefined;
     children?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
-    size?: "small" | "medium" | "large" | "xlarge" | undefined;
+    size?: "small" | "medium" | "large" | "xlarge" | "xxlarge" | undefined;
     text?: string | undefined;
 } & 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").RefObject<HTMLImageElement> | null | undefined;
 } & {
     anonymous?: boolean | undefined;
     children?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
-    size?: "small" | "medium" | "large" | "xlarge" | undefined;
+    size?: "small" | "medium" | "large" | "xlarge" | "xxlarge" | undefined;
     text?: string | undefined;
 } & 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").RefObject<HTMLImageElement> | null | undefined;
 } & {
     anonymous?: boolean | undefined;
     children?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
-    size?: "small" | "medium" | "large" | "xlarge" | undefined;
+    size?: "small" | "medium" | "large" | "xlarge" | "xxlarge" | undefined;
     text?: string | undefined;
 } & 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").RefObject<HTMLImageElement> | null | undefined;
 } & {
     anonymous?: boolean | undefined;
     children?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
-    size?: "small" | "medium" | "large" | "xlarge" | undefined;
+    size?: "small" | "medium" | "large" | "xlarge" | "xxlarge" | undefined;
     text?: string | undefined;
 } & 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>>;

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

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

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

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

package/lib-esm/avatar/consts.js

@@ -1,16 +1,18 @@
-import { BoxBlue50, DarkBlue50, Yellow50, GreenLight50, Yellorange50, LightBlue50, WatermelonRed50, PurpleRain50, Orange50, Grimace50, Size3, Size4, Size5, Size7, Size2 } from '@box/blueprint-web-assets/tokens/tokens';
+import { BoxBlue50, DarkBlue50, Yellow50, GreenLight50, Yellorange50, LightBlue50, WatermelonRed50, PurpleRain50, Orange50, Grimace50, Size3, Size4, Size5, Size7, Size9, Size2, Size6 } from '@box/blueprint-web-assets/tokens/tokens';
 
 const anonymousAvatarIconSizes = {
   small: Size3,
   medium: Size4,
   large: Size5,
-  xlarge: Size7
+  xlarge: Size7,
+  xxlarge: Size9
 };
 const badgeSizes = {
   small: Size2,
   medium: Size3,
   large: Size3,
-  xlarge: Size4
+  xlarge: Size4,
+  xxlarge: Size6
 };
 const colorsMap = {
   BoxBlue50,

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

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

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

@@ -145,7 +145,8 @@ const badgeSizeToIconSize = {
   small: '6px',
   medium: '9px',
   large: '10px',
-  xlarge: '14px'
+  xlarge: '14px',
+  xxlarge: '18px'
 };
 const IconBadge = props => {
   const {

package/lib-esm/badge/types.d.ts

@@ -1,5 +1,5 @@
 import type React from 'react';
-export declare const BadgeSizes: readonly ["small", "medium", "large", "xlarge"];
+export declare const BadgeSizes: readonly ["small", "medium", "large", "xlarge", "xxlarge"];
 export interface BadgeProps {
     /** Accepts exactly a single child component. Badge will be displayed over the child. */
     children: React.ReactElement;

package/lib-esm/index.css

@@ -662,7 +662,7 @@
   text-transform:none;
 }
 
-.bp_avatar_module_avatar--26d6a{
+.bp_avatar_module_avatar--53a65{
   all:unset;
   align-items:center;
   background-color:var(--gray-10);
@@ -678,7 +678,7 @@
   text-decoration:none;
   text-transform:none;
 }
-.bp_avatar_module_avatar--26d6a .bp_avatar_module_badge--26d6a{
+.bp_avatar_module_avatar--53a65 .bp_avatar_module_badge--53a65{
   background-color:var(--gray-white);
   border:var(--border-2) solid var(--gray-white);
   border-radius:50%;
@@ -686,7 +686,7 @@
   display:flex;
   position:absolute;
 }
-.bp_avatar_module_avatar--26d6a .bp_avatar_module_text--26d6a{
+.bp_avatar_module_avatar--53a65 .bp_avatar_module_text--53a65{
   align-items:center;
   border-radius:50%;
   display:flex;
@@ -694,14 +694,14 @@
   justify-content:center;
   width:100%;
 }
-.bp_avatar_module_avatar--26d6a.bp_avatar_module_small--26d6a{
+.bp_avatar_module_avatar--53a65.bp_avatar_module_small--53a65{
   height:var(--size-6);
   width:var(--size-6);
 }
-.bp_avatar_module_avatar--26d6a.bp_avatar_module_small--26d6a .bp_avatar_module_text--26d6a{
+.bp_avatar_module_avatar--53a65.bp_avatar_module_small--53a65 .bp_avatar_module_text--53a65{
   font-size:.5rem;
 }
-.bp_avatar_module_avatar--26d6a.bp_avatar_module_small--26d6a .bp_avatar_module_length-1--26d6a.bp_avatar_module_text--26d6a,.bp_avatar_module_avatar--26d6a.bp_avatar_module_small--26d6a .bp_avatar_module_length-2--26d6a.bp_avatar_module_text--26d6a{
+.bp_avatar_module_avatar--53a65.bp_avatar_module_small--53a65 .bp_avatar_module_length-1--53a65.bp_avatar_module_text--53a65,.bp_avatar_module_avatar--53a65.bp_avatar_module_small--53a65 .bp_avatar_module_length-2--53a65.bp_avatar_module_text--53a65{
   font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:.625rem;
   font-weight:700;
@@ -710,14 +710,14 @@
   text-decoration:none;
   text-transform:none;
 }
-.bp_avatar_module_avatar--26d6a.bp_avatar_module_small--26d6a .bp_avatar_module_badge--26d6a{
+.bp_avatar_module_avatar--53a65.bp_avatar_module_small--53a65 .bp_avatar_module_badge--53a65{
   right:-.25rem;
 }
-.bp_avatar_module_avatar--26d6a.bp_avatar_module_medium--26d6a{
+.bp_avatar_module_avatar--53a65.bp_avatar_module_medium--53a65{
   height:var(--size-7);
   width:var(--size-7);
 }
-.bp_avatar_module_avatar--26d6a.bp_avatar_module_medium--26d6a .bp_avatar_module_text--26d6a{
+.bp_avatar_module_avatar--53a65.bp_avatar_module_medium--53a65 .bp_avatar_module_text--53a65{
   font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:.625rem;
   font-weight:700;
@@ -726,20 +726,20 @@
   text-decoration:none;
   text-transform:none;
 }
-.bp_avatar_module_avatar--26d6a.bp_avatar_module_medium--26d6a .bp_avatar_module_length-1--26d6a.bp_avatar_module_text--26d6a,.bp_avatar_module_avatar--26d6a.bp_avatar_module_medium--26d6a .bp_avatar_module_length-2--26d6a.bp_avatar_module_text--26d6a{
+.bp_avatar_module_avatar--53a65.bp_avatar_module_medium--53a65 .bp_avatar_module_length-1--53a65.bp_avatar_module_text--53a65,.bp_avatar_module_avatar--53a65.bp_avatar_module_medium--53a65 .bp_avatar_module_length-2--53a65.bp_avatar_module_text--53a65{
   font-size:.8125rem;
 }
-.bp_avatar_module_avatar--26d6a.bp_avatar_module_medium--26d6a .bp_avatar_module_badge--26d6a{
+.bp_avatar_module_avatar--53a65.bp_avatar_module_medium--53a65 .bp_avatar_module_badge--53a65{
   right:-.375rem;
 }
-.bp_avatar_module_avatar--26d6a.bp_avatar_module_large--26d6a{
+.bp_avatar_module_avatar--53a65.bp_avatar_module_large--53a65{
   height:var(--size-8);
   width:var(--size-8);
 }
-.bp_avatar_module_avatar--26d6a.bp_avatar_module_large--26d6a .bp_avatar_module_text--26d6a{
+.bp_avatar_module_avatar--53a65.bp_avatar_module_large--53a65 .bp_avatar_module_text--53a65{
   font-size:.5rem;
 }
-.bp_avatar_module_avatar--26d6a.bp_avatar_module_large--26d6a .bp_avatar_module_length-1--26d6a.bp_avatar_module_text--26d6a,.bp_avatar_module_avatar--26d6a.bp_avatar_module_large--26d6a .bp_avatar_module_length-2--26d6a.bp_avatar_module_text--26d6a{
+.bp_avatar_module_avatar--53a65.bp_avatar_module_large--53a65 .bp_avatar_module_length-1--53a65.bp_avatar_module_text--53a65,.bp_avatar_module_avatar--53a65.bp_avatar_module_large--53a65 .bp_avatar_module_length-2--53a65.bp_avatar_module_text--53a65{
   font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:.875rem;
   font-weight:700;
@@ -748,10 +748,10 @@
   text-decoration:none;
   text-transform:none;
 }
-.bp_avatar_module_avatar--26d6a.bp_avatar_module_large--26d6a .bp_avatar_module_length-3--26d6a.bp_avatar_module_text--26d6a{
+.bp_avatar_module_avatar--53a65.bp_avatar_module_large--53a65 .bp_avatar_module_length-3--53a65.bp_avatar_module_text--53a65{
   font-size:.6875rem;
 }
-.bp_avatar_module_avatar--26d6a.bp_avatar_module_large--26d6a .bp_avatar_module_length-4--26d6a.bp_avatar_module_text--26d6a{
+.bp_avatar_module_avatar--53a65.bp_avatar_module_large--53a65 .bp_avatar_module_length-4--53a65.bp_avatar_module_text--53a65{
   font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:.625rem;
   font-weight:700;
@@ -760,17 +760,17 @@
   text-decoration:none;
   text-transform:none;
 }
-.bp_avatar_module_avatar--26d6a.bp_avatar_module_large--26d6a .bp_avatar_module_badge--26d6a{
+.bp_avatar_module_avatar--53a65.bp_avatar_module_large--53a65 .bp_avatar_module_badge--53a65{
   right:-.25rem;
 }
-.bp_avatar_module_avatar--26d6a.bp_avatar_module_xlarge--26d6a{
+.bp_avatar_module_avatar--53a65.bp_avatar_module_xlarge--53a65{
   height:var(--size-11);
   width:var(--size-11);
 }
-.bp_avatar_module_avatar--26d6a.bp_avatar_module_xlarge--26d6a .bp_avatar_module_text--26d6a{
+.bp_avatar_module_avatar--53a65.bp_avatar_module_xlarge--53a65 .bp_avatar_module_text--53a65{
   font-size:1rem;
 }
-.bp_avatar_module_avatar--26d6a.bp_avatar_module_xlarge--26d6a .bp_avatar_module_length-1--26d6a.bp_avatar_module_text--26d6a,.bp_avatar_module_avatar--26d6a.bp_avatar_module_xlarge--26d6a .bp_avatar_module_length-2--26d6a.bp_avatar_module_text--26d6a{
+.bp_avatar_module_avatar--53a65.bp_avatar_module_xlarge--53a65 .bp_avatar_module_length-1--53a65.bp_avatar_module_text--53a65,.bp_avatar_module_avatar--53a65.bp_avatar_module_xlarge--53a65 .bp_avatar_module_length-2--53a65.bp_avatar_module_text--53a65{
   font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:1.3125rem;
   font-weight:700;
@@ -779,32 +779,45 @@
   text-decoration:none;
   text-transform:none;
 }
-.bp_avatar_module_avatar--26d6a.bp_avatar_module_xlarge--26d6a .bp_avatar_module_badge--26d6a{
+.bp_avatar_module_avatar--53a65.bp_avatar_module_xlarge--53a65 .bp_avatar_module_badge--53a65{
   right:-.375rem;
 }
-.bp_avatar_module_avatar--26d6a .bp_avatar_module_image--26d6a{
+.bp_avatar_module_avatar--53a65.bp_avatar_module_xxlarge--53a65{
+  height:var(--size-20);
+  width:var(--size-20);
+}
+.bp_avatar_module_avatar--53a65.bp_avatar_module_xxlarge--53a65 .bp_avatar_module_text--53a65{
+  font-size:1.25rem;
+}
+.bp_avatar_module_avatar--53a65.bp_avatar_module_xxlarge--53a65 .bp_avatar_module_length-1--53a65.bp_avatar_module_text--53a65,.bp_avatar_module_avatar--53a65.bp_avatar_module_xxlarge--53a65 .bp_avatar_module_length-2--53a65.bp_avatar_module_text--53a65{
+  font-size:2rem;
+}
+.bp_avatar_module_avatar--53a65.bp_avatar_module_xxlarge--53a65 .bp_avatar_module_badge--53a65{
+  right:-.375rem;
+}
+.bp_avatar_module_avatar--53a65 .bp_avatar_module_image--53a65{
   border-radius:50%;
   height:100%;
   object-fit:cover;
   width:100%;
 }
-.bp_avatar_module_avatar--26d6a .bp_avatar_module_image--26d6a.bp_avatar_module_loading--26d6a{
+.bp_avatar_module_avatar--53a65 .bp_avatar_module_image--53a65.bp_avatar_module_loading--53a65{
   height:0;
   width:0;
 }
 
-.bp_avatar_module_anonymousAvatar--26d6a{
+.bp_avatar_module_anonymousAvatar--53a65{
   align-items:center;
   display:flex;
   justify-content:center;
 }
 
-.bp_base_badge_module_badgeContainer--74d5f{
+.bp_base_badge_module_badgeContainer--bad0b{
   display:inline-flex;
   position:relative;
 }
 
-.bp_base_badge_module_badge--74d5f{
+.bp_base_badge_module_badge--bad0b{
   align-items:center;
   border:var(--border-2) solid var(--border-badge-border);
   border-radius:2rem;
@@ -816,56 +829,66 @@
           user-select:none;
 }
 
-.bp_base_badge_module_smallSizeBadge--74d5f{
+.bp_base_badge_module_smallSizeBadge--bad0b{
   height:var(--size-2);
   min-width:var(--size-2);
 }
 
-.bp_base_badge_module_mediumSizeBadge--74d5f{
+.bp_base_badge_module_mediumSizeBadge--bad0b{
   height:var(--size-3);
   min-width:var(--size-3);
 }
 
-.bp_base_badge_module_largeSizeBadge--74d5f{
+.bp_base_badge_module_largeSizeBadge--bad0b{
   height:var(--size-4);
   min-width:var(--size-4);
 }
 
-.bp_base_badge_module_xlargeSizeBadge--74d5f{
+.bp_base_badge_module_xlargeSizeBadge--bad0b{
   height:var(--size-5);
   min-width:var(--size-5);
 }
 
-.bp_base_badge_module_iconBadge--74d5f{
+.bp_base_badge_module_xxlargeSizeBadge--bad0b{
+  height:var(--size-6);
+  min-width:var(--size-6);
+}
+
+.bp_base_badge_module_iconBadge--bad0b{
   bottom:-5%;
   right:-5%;
 }
 
-.bp_base_badge_module_statusBadge--74d5f{
+.bp_base_badge_module_statusBadge--bad0b{
   bottom:-20%;
   right:-20%;
 }
 
-.bp_base_badge_module_statusBadge--74d5f.bp_base_badge_module_largeSizeBadge--74d5f{
+.bp_base_badge_module_statusBadge--bad0b.bp_base_badge_module_largeSizeBadge--bad0b{
   bottom:-22%;
   right:-22%;
 }
 
-.bp_base_badge_module_statusBadge--74d5f.bp_base_badge_module_xlargeSizeBadge--74d5f{
+.bp_base_badge_module_statusBadge--bad0b.bp_base_badge_module_xlargeSizeBadge--bad0b{
   bottom:-15%;
   right:-15%;
 }
 
-.bp_base_badge_module_numericBadge--74d5f{
+.bp_base_badge_module_statusBadge--bad0b.bp_base_badge_module_xxlargeSizeBadge--bad0b{
+  bottom:-4%;
+  right:-4%;
+}
+
+.bp_base_badge_module_numericBadge--bad0b{
   left:60%;
   top:0;
 }
 
-.bp_base_badge_module_numericBadgeSingleDigit--74d5f{
+.bp_base_badge_module_numericBadgeSingleDigit--bad0b{
   padding:1px;
 }
 
-.bp_base_badge_module_numericBadgeMoreDigits--74d5f{
+.bp_base_badge_module_numericBadgeMoreDigits--bad0b{
   padding:1px 3px;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "7.28.0",
+    "version": "7.29.0",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
@@ -63,7 +63,7 @@
         "react-stately": "^3.31.1",
         "tsx": "^4.16.5"
     },
-    "gitHead": "835475acd8803db00eb4cc44be3abe67304a53fc",
+    "gitHead": "68124cafde2004371a00564cb10446f0d1021880",
     "module": "lib-esm/index.js",
     "main": "lib-esm/index.js",
     "exports": {