@box/blueprint-web 7.27.1 → 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;
 }
 
@@ -5121,7 +5144,7 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   margin-block:var(--space-2);
 }
 
-.bp_side_panel_module_content--26666{
+.bp_side_panel_module_content--c438f{
   background-color:var(--gray-white);
   border-inline-start:var(--border-1) solid var(--border-divider-border);
   display:flex;
@@ -5132,14 +5155,13 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   max-width:100%;
   min-width:320px;
   overflow:hidden;
-  width:360px;
 }
 @media only screen and (max-width: 374px){
-  .bp_side_panel_module_content--26666{
+  .bp_side_panel_module_content--c438f{
     min-width:100%;
   }
 }
-.bp_side_panel_module_content--26666 .bp_side_panel_module_header--26666{
+.bp_side_panel_module_content--c438f .bp_side_panel_module_header--c438f{
   align-items:center;
   background-color:var(--surface-surface);
   border-bottom:var(--border-1) solid var(--border-divider-border);
@@ -5154,60 +5176,68 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   transition-timing-function:cubic-bezier(0, 0, .6, 1);
   word-break:break-word;
 }
-.bp_side_panel_module_content--26666 .bp_side_panel_module_header--26666,.bp_side_panel_module_content--26666 .bp_side_panel_module_header--26666.bp_side_panel_module_headerMobile--26666{
+.bp_side_panel_module_content--c438f .bp_side_panel_module_header--c438f,.bp_side_panel_module_content--c438f .bp_side_panel_module_header--c438f.bp_side_panel_module_headerMobile--c438f{
   font-family:Lato, -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-weight:700;
   letter-spacing:.01875rem;
   text-decoration:none;
   text-transform:none;
 }
-.bp_side_panel_module_content--26666 .bp_side_panel_module_header--26666.bp_side_panel_module_headerMobile--26666{
+.bp_side_panel_module_content--c438f .bp_side_panel_module_header--c438f.bp_side_panel_module_headerMobile--c438f{
   font-size:.9375rem;
   line-height:1.25rem;
 }
-.bp_side_panel_module_content--26666 .bp_side_panel_module_headerShadow--26666{
+.bp_side_panel_module_content--c438f .bp_side_panel_module_headerShadow--c438f{
   box-shadow:var(--dropshadow-3);
 }
 
-.bp_side_panel_module_persistentContent--26666{
+.bp_side_panel_module_persistentContent--c438f{
   position:relative;
 }
 
-.bp_side_panel_module_contentAnimatedSlideIn--26666{
+.bp_side_panel_module_contentAnimatedSlideIn--c438f{
   animation-duration:.2s;
-  animation-name:bp_side_panel_module_slideIn--26666;
+  animation-name:bp_side_panel_module_slideIn--c438f;
   animation-timing-function:cubic-bezier(0, 0, .6, 1);
 }
 
-.bp_side_panel_module_contentAnimatedSlideOut--26666[data-state=closed]{
+.bp_side_panel_module_contentAnimatedSlideOut--c438f[data-state=closed]{
   animation-duration:.2s;
-  animation-name:bp_side_panel_module_slideOut--26666;
+  animation-name:bp_side_panel_module_slideOut--c438f;
   animation-timing-function:cubic-bezier(0, 0, .6, 1);
 }
 
-.bp_side_panel_module_dropShadowContent--26666{
+.bp_side_panel_module_contentNormal--c438f{
+  width:360px;
+}
+
+.bp_side_panel_module_contentLarge--c438f{
+  width:420px;
+}
+
+.bp_side_panel_module_dropShadowContent--c438f{
   box-shadow:var(--dropshadow-3);
 }
 
-.bp_side_panel_module_content--26666 .bp_side_panel_module_close--26666{
+.bp_side_panel_module_content--c438f .bp_side_panel_module_close--c438f{
   color:var(--gray-65);
   position:absolute;
   right:var(--space-4);
   top:var(--space-5);
 }
 
-.bp_side_panel_module_overlayContent--26666{
+.bp_side_panel_module_overlayContent--c438f{
   box-shadow:var(--dropshadow-3);
   position:fixed;
   right:0;
   top:0;
   z-index:300;
 }
-.bp_side_panel_module_overlayContent--26666 .bp_side_panel_module_header--26666{
+.bp_side_panel_module_overlayContent--c438f .bp_side_panel_module_header--c438f{
   padding:var(--space-6) var(--space-14) var(--space-6) var(--space-4);
 }
 
-.bp_side_panel_module_overlay--26666{
+.bp_side_panel_module_overlay--c438f{
   background-color:var(--black-opacity-80);
   bottom:0;
   display:flex;
@@ -5218,20 +5248,20 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   top:0;
   z-index:300;
 }
-.bp_side_panel_module_overlay--26666 .bp_side_panel_module_content--26666 .bp_side_panel_module_header--26666{
+.bp_side_panel_module_overlay--c438f .bp_side_panel_module_content--c438f .bp_side_panel_module_header--c438f{
   padding:var(--space-6) var(--space-14) var(--space-6) var(--space-4);
 }
 
-.bp_side_panel_module_dropShadowOverlay--26666{
+.bp_side_panel_module_dropShadowOverlay--c438f{
   background-color:initial;
 }
 
-.bp_side_panel_module_scrollableContainer--26666{
+.bp_side_panel_module_scrollableContainer--c438f{
   flex-grow:1;
   overflow-y:auto;
 }
 
-.bp_side_panel_module_footer--26666{
+.bp_side_panel_module_footer--c438f{
   background-color:var(--surface-surface);
   display:flex;
   justify-content:flex-end;
@@ -5241,19 +5271,19 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
   transition-timing-function:cubic-bezier(0, 0, .6, 1);
 }
 
-.bp_side_panel_module_footerShadow--26666{
+.bp_side_panel_module_footerShadow--c438f{
   box-shadow:var(--dropshadow-3-inverse);
 }
 
-.bp_side_panel_module_footerButton--26666{
+.bp_side_panel_module_footerButton--c438f{
   margin-inline-start:var(--space-2);
 }
 
-.bp_side_panel_module_footerButton--26666 + .bp_side_panel_module_footerButton--26666{
+.bp_side_panel_module_footerButton--c438f + .bp_side_panel_module_footerButton--c438f{
   margin-inline-start:var(--space-3);
 }
 
-@keyframes bp_side_panel_module_slideIn--26666{
+@keyframes bp_side_panel_module_slideIn--c438f{
   from{
     inset-inline-end:-100%;
   }
@@ -5261,7 +5291,7 @@ table.bp_inline_table_module_inlineTable--b023b tr:not(:last-child) td{
     inset-inline-end:0;
   }
 }
-@keyframes bp_side_panel_module_slideOut--26666{
+@keyframes bp_side_panel_module_slideOut--c438f{
   from{
     inset-inline-end:0;
   }

package/lib-esm/side-panel/side-panel-content.d.ts

@@ -3,7 +3,9 @@ import * as RadixDialog from '@radix-ui/react-dialog';
 /**
  * Contains content to be rendered in the open SidePanel in Overlay view.
  */
-export declare const SidePanelContent: import("react").ForwardRefExoticComponent<RadixDialog.DialogContentProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const SidePanelContent: import("react").ForwardRefExoticComponent<RadixDialog.DialogContentProps & {
+    size?: "medium" | "large" | undefined;
+} & import("react").RefAttributes<HTMLDivElement>>;
 /**
  * Contains content to be rendered in the open SidePanel in Persistent view.
  */

package/lib-esm/side-panel/side-panel-content.js

@@ -13,9 +13,11 @@ const SidePanelContent = /*#__PURE__*/forwardRef(({
   asChild = false,
   children,
   className,
+  size = 'medium',
   ...props
 }, forwardedRef) => {
   const variant = useVariant();
+  const isOverlayVariant = ['overlay', 'dropShadowOverlay', 'interactiveOverlay'].includes(variant);
   const isInteractiveOverlayVariant = variant === 'interactiveOverlay';
   const handleInteractOutside = useCallback(event => {
     if (isInteractiveOverlayVariant) {
@@ -29,9 +31,11 @@ const SidePanelContent = /*#__PURE__*/forwardRef(({
       ref: forwardedRef,
       asChild: asChild,
       className: clsx(styles.content, styles.contentAnimatedSlideIn, {
-        [styles.overlayContent]: variant !== 'persistent',
         [styles.contentAnimatedSlideOut]: isInteractiveOverlayVariant,
-        [styles.dropShadowContent]: variant === 'dropShadowOverlay'
+        [styles.contentLarge]: size === 'large',
+        [styles.contentNormal]: size === 'medium',
+        [styles.dropShadowContent]: variant === 'dropShadowOverlay',
+        [styles.overlayContent]: isOverlayVariant
       }, className),
       onInteractOutside: handleInteractOutside,
       children: children
@@ -47,7 +51,7 @@ const SidePanelPersistentContent = /*#__PURE__*/forwardRef(({
   ...props
 }, forwardedRef) => jsx("div", {
   ref: forwardedRef,
-  className: clsx(styles.content, styles.persistentContent, className),
+  className: clsx(styles.content, styles.contentNormal, styles.persistentContent, className),
   ...props,
   children: children
 }));

package/lib-esm/side-panel/side-panel.d.ts

@@ -2,7 +2,9 @@
 import { type SidePanelProps } from './types';
 export declare const SidePanel: ((props: SidePanelProps) => import("react/jsx-runtime").JSX.Element | null) & {
     Close: import("react").ForwardRefExoticComponent<import("./types").SidePanelCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
-    Content: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogContentProps & import("react").RefAttributes<HTMLDivElement>>;
+    Content: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogContentProps & {
+        size?: "medium" | "large" | undefined;
+    } & import("react").RefAttributes<HTMLDivElement>>;
     Footer: import("react").ForwardRefExoticComponent<Omit<import("./types").SidePanelFooterProps, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
         PrimaryButton: import("react").ForwardRefExoticComponent<(Omit<import("../primitives/base-button").BaseButtonInterface & Required<Pick<import("../primitives/base-button").Loading, keyof import("../primitives/base-button").Loading>> & Omit<import("../primitives/base-button").Loading, keyof import("../primitives/base-button").Loading> & {
             children?: string | string[] | undefined;

package/lib-esm/side-panel/side-panel.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"content":"bp_side_panel_module_content--26666","header":"bp_side_panel_module_header--26666","headerMobile":"bp_side_panel_module_headerMobile--26666","headerShadow":"bp_side_panel_module_headerShadow--26666","persistentContent":"bp_side_panel_module_persistentContent--26666","contentAnimatedSlideIn":"bp_side_panel_module_contentAnimatedSlideIn--26666","slideIn":"bp_side_panel_module_slideIn--26666","contentAnimatedSlideOut":"bp_side_panel_module_contentAnimatedSlideOut--26666","slideOut":"bp_side_panel_module_slideOut--26666","dropShadowContent":"bp_side_panel_module_dropShadowContent--26666","close":"bp_side_panel_module_close--26666","overlayContent":"bp_side_panel_module_overlayContent--26666","overlay":"bp_side_panel_module_overlay--26666","dropShadowOverlay":"bp_side_panel_module_dropShadowOverlay--26666","scrollableContainer":"bp_side_panel_module_scrollableContainer--26666","footer":"bp_side_panel_module_footer--26666","footerShadow":"bp_side_panel_module_footerShadow--26666","footerButton":"bp_side_panel_module_footerButton--26666"};
+var styles = {"content":"bp_side_panel_module_content--c438f","header":"bp_side_panel_module_header--c438f","headerMobile":"bp_side_panel_module_headerMobile--c438f","headerShadow":"bp_side_panel_module_headerShadow--c438f","persistentContent":"bp_side_panel_module_persistentContent--c438f","contentAnimatedSlideIn":"bp_side_panel_module_contentAnimatedSlideIn--c438f","slideIn":"bp_side_panel_module_slideIn--c438f","contentAnimatedSlideOut":"bp_side_panel_module_contentAnimatedSlideOut--c438f","slideOut":"bp_side_panel_module_slideOut--c438f","contentNormal":"bp_side_panel_module_contentNormal--c438f","contentLarge":"bp_side_panel_module_contentLarge--c438f","dropShadowContent":"bp_side_panel_module_dropShadowContent--c438f","close":"bp_side_panel_module_close--c438f","overlayContent":"bp_side_panel_module_overlayContent--c438f","overlay":"bp_side_panel_module_overlay--c438f","dropShadowOverlay":"bp_side_panel_module_dropShadowOverlay--c438f","scrollableContainer":"bp_side_panel_module_scrollableContainer--c438f","footer":"bp_side_panel_module_footer--c438f","footerShadow":"bp_side_panel_module_footerShadow--c438f","footerButton":"bp_side_panel_module_footerButton--c438f"};
 
 export { styles as default };

package/lib-esm/side-panel/types.d.ts

@@ -18,7 +18,13 @@ export type SidePanelPersistentProps = ComponentPropsWithRef<'div'> & {
 };
 export type SidePanelOverlayProps = DialogProps;
 export type SidePanelOverlayComponentProps = ComponentPropsWithRef<'div'> & Pick<DialogPortalProps, 'container'>;
-export type SidePanelContentProps = DialogContentProps;
+export type SidePanelContentProps = DialogContentProps & {
+    /**
+     * The size of the side panel content.
+     * @default "medium"
+     */
+    size?: 'medium' | 'large';
+};
 export type SidePanelPersistentContentProps = ComponentPropsWithRef<'div'>;
 export interface SidePanelCloseProps {
     /** The aria-label for the Close element */

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "7.27.1",
+    "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": "aa5870125c7788a07adcc307775630d30dcaee13",
+    "gitHead": "68124cafde2004371a00564cb10446f0d1021880",
     "module": "lib-esm/index.js",
     "main": "lib-esm/index.js",
     "exports": {