@box/blueprint-web 11.12.0 → 12.0.0

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

@@ -2,28 +2,24 @@ export declare const Avatar: import("react").ForwardRefExoticComponent<(Omit<Omi
     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;
 } & {
     anonymous?: boolean;
-    children?: import("react").ReactElement;
     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;
 } & {
     anonymous?: boolean;
-    children?: import("react").ReactElement;
     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;
 } & {
     anonymous?: boolean;
-    children?: import("react").ReactElement;
     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;
 } & {
     anonymous?: boolean;
-    children?: import("react").ReactElement;
     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>>;

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

@@ -2,15 +2,14 @@ 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, Children, cloneElement } from 'react';
+import { forwardRef, useState, useEffect } from 'react';
 import styles from './avatar.module.js';
-import { colors, anonymousAvatarIconSizes, badgeSizes } from './consts.js';
+import { colors, anonymousAvatarIconSizes } from './consts.js';
 
 const Avatar = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {
     alt,
     anonymous,
-    children,
     className,
     color,
     colorIndex,
@@ -29,12 +28,6 @@ const Avatar = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   }, [src]);
   const backgroundColor = color || colors[(colorIndex || 0) % colors.length];
   const anonymousAvatarIconSize = anonymousAvatarIconSizes[size];
-  const child = children && Children.only(children);
-  const badgeSize = badgeSizes[size];
-  const badge = child && /*#__PURE__*/cloneElement(child, {
-    height: badgeSize,
-    width: badgeSize
-  });
   const imageIsLoading = !!src && !imageIsLoaded;
   const shouldShowText = !anonymous && text && !imageIsLoaded;
   const shouldShowAnonymousAvatar = anonymous || imageIsLoading && !text;
@@ -70,9 +63,6 @@ const Avatar = /*#__PURE__*/forwardRef((props, forwardedRef) => {
         onLoad?.(event);
       },
       src: src
-    }), badge && jsx("div", {
-      className: styles.badge,
-      children: badge
     })]
   });
   return jsx("div", {

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

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

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

@@ -1,6 +1,5 @@
 import { type AvatarSize, type Color } from './types';
 export declare const anonymousAvatarIconSizes: Record<AvatarSize, string>;
 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/dist/lib-esm/avatar/consts.js

@@ -1,4 +1,4 @@
-import { Size3, Size4, Size5, Size7, Size9, BoxBlue50, DarkBlue50, Yellow50, GreenLight50, Yellorange50, LightBlue50, WatermelonRed50, PurpleRain50, Orange50, Grimace50, Size2, Size6 } from '@box/blueprint-web-assets/tokens/tokens';
+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 = {
   small: Size3,
@@ -7,13 +7,6 @@ const anonymousAvatarIconSizes = {
   xlarge: Size7,
   xxlarge: Size9
 };
-const badgeSizes = {
-  small: Size2,
-  medium: Size3,
-  large: Size3,
-  xlarge: Size4,
-  xxlarge: Size6
-};
 const colorsMap = {
   BoxBlue50,
   DarkBlue50,
@@ -28,4 +21,4 @@ const colorsMap = {
 };
 const colors = Object.values(colorsMap);
 
-export { anonymousAvatarIconSizes, badgeSizes, colors, colorsMap };
+export { anonymousAvatarIconSizes, colors, colorsMap };

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

@@ -1,5 +1,4 @@
 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 } from 'react';
 import { type RequireAllOrNone, type RequireExactlyOne } from 'type-fest';
 import { type AvatarSizes } from './consts';
 export type AvatarSize = (typeof AvatarSizes)[number];
@@ -23,10 +22,6 @@ export interface WithColor {
 export type AvatarProps = React.ComponentPropsWithRef<'img'> & {
     /** Whether to display the anonymous user image */
     anonymous?: boolean;
-    /** The badge element. This prop will be removed in a future major release. Please use IconBadge or StatusBadge components instead.
-     * @deprecated
-     */
-    children?: ReactElement;
     /** The size of the avatar */
     size?: AvatarSize;
     /** The text to display, e.g. the user initial or the number of users editing the document.

package/dist/lib-esm/index.css

@@ -120,52 +120,56 @@
   }
 }
 
-.bp_loading_indicator_module_crawler--0e876{
+.bp_loading_indicator_module_crawler--2f1df{
+  align-items:center;
+  display:flex;
+  height:1.5rem;
+  justify-content:center;
   left:0;
   margin:0 auto;
   position:absolute;
   right:0;
   white-space:nowrap;
-  width:.625rem;
+  width:1.5rem;
 }
-.bp_loading_indicator_module_crawler--0e876 .bp_loading_indicator_module_segment--0e876{
+.bp_loading_indicator_module_crawler--2f1df .bp_loading_indicator_module_segment--2f1df{
   border-radius:.375rem;
   display:inline-block;
   height:.625rem;
   width:.125rem;
 }
-.bp_loading_indicator_module_crawler--0e876.bp_loading_indicator_module_small--0e876{
-  transform:scale(.7);
+.bp_loading_indicator_module_crawler--2f1df.bp_loading_indicator_module_small--2f1df{
+  transform:scale(.6667);
 }
-.bp_loading_indicator_module_crawler--0e876.bp_loading_indicator_module_large--0e876{
-  transform:scale(1.5);
+.bp_loading_indicator_module_crawler--2f1df.bp_loading_indicator_module_large--2f1df{
+  transform:scale(1.3334);
 }
-.bp_loading_indicator_module_crawler--0e876.bp_loading_indicator_module_x-large--0e876{
+.bp_loading_indicator_module_crawler--2f1df.bp_loading_indicator_module_x-large--2f1df{
   transform:scale(2);
 }
-.bp_loading_indicator_module_crawler--0e876.bp_loading_indicator_module_default--0e876 .bp_loading_indicator_module_segment--0e876{
-  animation:bp_loading_indicator_module_segment-transform--0e876 .66s ease-in-out infinite,bp_loading_indicator_module_segment-default--0e876 .66s ease-in-out infinite;
+.bp_loading_indicator_module_crawler--2f1df.bp_loading_indicator_module_default--2f1df .bp_loading_indicator_module_segment--2f1df{
+  animation:bp_loading_indicator_module_segment-transform--2f1df .66s ease-in-out infinite,bp_loading_indicator_module_segment-default--2f1df .66s ease-in-out infinite;
 }
-.bp_loading_indicator_module_crawler--0e876.bp_loading_indicator_module_dark--0e876 .bp_loading_indicator_module_segment--0e876{
-  animation:bp_loading_indicator_module_segment-transform--0e876 .66s ease-in-out infinite,bp_loading_indicator_module_segment-dark--0e876 .66s ease-in-out infinite;
+.bp_loading_indicator_module_crawler--2f1df.bp_loading_indicator_module_dark--2f1df .bp_loading_indicator_module_segment--2f1df{
+  animation:bp_loading_indicator_module_segment-transform--2f1df .66s ease-in-out infinite,bp_loading_indicator_module_segment-dark--2f1df .66s ease-in-out infinite;
 }
-.bp_loading_indicator_module_crawler--0e876.bp_loading_indicator_module_light--0e876 .bp_loading_indicator_module_segment--0e876{
-  animation:bp_loading_indicator_module_segment-transform--0e876 .66s ease-in-out infinite,bp_loading_indicator_module_segment-light--0e876 .66s ease-in-out infinite;
+.bp_loading_indicator_module_crawler--2f1df.bp_loading_indicator_module_light--2f1df .bp_loading_indicator_module_segment--2f1df{
+  animation:bp_loading_indicator_module_segment-transform--2f1df .66s ease-in-out infinite,bp_loading_indicator_module_segment-light--2f1df .66s ease-in-out infinite;
   background-color:var(--gray-white);
 }
 
-.bp_loading_indicator_module_crawler--0e876 .bp_loading_indicator_module_segment--0e876:nth-child(2){
+.bp_loading_indicator_module_crawler--2f1df .bp_loading_indicator_module_segment--2f1df:nth-child(2){
   animation-delay:.1s;
   margin-left:.125rem;
 }
 
-.bp_loading_indicator_module_crawler--0e876 .bp_loading_indicator_module_segment--0e876:last-child{
+.bp_loading_indicator_module_crawler--2f1df .bp_loading_indicator_module_segment--2f1df:last-child{
   animation-delay:.2s;
   left:.5rem;
   margin-left:.125rem;
 }
 
-@keyframes bp_loading_indicator_module_segment-transform--0e876{
+@keyframes bp_loading_indicator_module_segment-transform--2f1df{
   0%,100%,80%{
     transform:scaleY(1.2);
   }
@@ -173,7 +177,7 @@
     transform:scaleY(1.6);
   }
 }
-@keyframes bp_loading_indicator_module_segment-dark--0e876{
+@keyframes bp_loading_indicator_module_segment-dark--2f1df{
   0%,100%,80%{
     background-color:var(--gray-30);
   }
@@ -181,7 +185,7 @@
     background-color:var(--gray-black);
   }
 }
-@keyframes bp_loading_indicator_module_segment-default--0e876{
+@keyframes bp_loading_indicator_module_segment-default--2f1df{
   0%,100%,80%{
     background-color:var(--box-blue-30);
   }
@@ -189,7 +193,7 @@
     background-color:var(--box-blue-100);
   }
 }
-@keyframes bp_loading_indicator_module_segment-light--0e876{
+@keyframes bp_loading_indicator_module_segment-light--2f1df{
   0%,100%,80%{
     opacity:.3;
   }
@@ -735,7 +739,7 @@
   transform:rotate(180deg);
 }
 
-.bp_avatar_module_avatar--b2c43{
+.bp_avatar_module_avatar--05bbb{
   all:unset;
   align-items:center;
   background-color:var(--gray-10);
@@ -753,15 +757,7 @@
           text-decoration:var(--body-default-bold-text-decoration);
   text-transform:var(--body-default-bold-text-case);
 }
-.bp_avatar_module_avatar--b2c43 .bp_avatar_module_badge--b2c43{
-  background-color:var(--gray-white);
-  border:var(--border-2) solid var(--gray-white);
-  border-radius:50%;
-  bottom:-.125rem;
-  display:flex;
-  position:absolute;
-}
-.bp_avatar_module_avatar--b2c43 .bp_avatar_module_text--b2c43{
+.bp_avatar_module_avatar--05bbb .bp_avatar_module_text--05bbb{
   align-items:center;
   border-radius:50%;
   display:flex;
@@ -769,14 +765,14 @@
   justify-content:center;
   width:100%;
 }
-.bp_avatar_module_avatar--b2c43.bp_avatar_module_small--b2c43{
+.bp_avatar_module_avatar--05bbb.bp_avatar_module_small--05bbb{
   height:var(--size-6);
   width:var(--size-6);
 }
-.bp_avatar_module_avatar--b2c43.bp_avatar_module_small--b2c43 .bp_avatar_module_text--b2c43{
+.bp_avatar_module_avatar--05bbb.bp_avatar_module_small--05bbb .bp_avatar_module_text--05bbb{
   font-size:.5rem;
 }
-.bp_avatar_module_avatar--b2c43.bp_avatar_module_small--b2c43 .bp_avatar_module_length-1--b2c43.bp_avatar_module_text--b2c43,.bp_avatar_module_avatar--b2c43.bp_avatar_module_small--b2c43 .bp_avatar_module_length-2--b2c43.bp_avatar_module_text--b2c43{
+.bp_avatar_module_avatar--05bbb.bp_avatar_module_small--05bbb .bp_avatar_module_length-1--05bbb.bp_avatar_module_text--05bbb,.bp_avatar_module_avatar--05bbb.bp_avatar_module_small--05bbb .bp_avatar_module_length-2--05bbb.bp_avatar_module_text--05bbb{
   font-family:var(--label-bold-font-family);
   font-size:var(--label-bold-font-size);
   font-weight:var(--label-bold-font-weight);
@@ -786,14 +782,11 @@
           text-decoration:var(--label-bold-text-decoration);
   text-transform:var(--label-bold-text-case);
 }
-.bp_avatar_module_avatar--b2c43.bp_avatar_module_small--b2c43 .bp_avatar_module_badge--b2c43{
-  right:-.25rem;
-}
-.bp_avatar_module_avatar--b2c43.bp_avatar_module_medium--b2c43{
+.bp_avatar_module_avatar--05bbb.bp_avatar_module_medium--05bbb{
   height:var(--size-7);
   width:var(--size-7);
 }
-.bp_avatar_module_avatar--b2c43.bp_avatar_module_medium--b2c43 .bp_avatar_module_text--b2c43{
+.bp_avatar_module_avatar--05bbb.bp_avatar_module_medium--05bbb .bp_avatar_module_text--05bbb{
   font-family:var(--label-bold-font-family);
   font-size:var(--label-bold-font-size);
   font-weight:var(--label-bold-font-weight);
@@ -803,20 +796,17 @@
           text-decoration:var(--label-bold-text-decoration);
   text-transform:var(--label-bold-text-case);
 }
-.bp_avatar_module_avatar--b2c43.bp_avatar_module_medium--b2c43 .bp_avatar_module_length-1--b2c43.bp_avatar_module_text--b2c43,.bp_avatar_module_avatar--b2c43.bp_avatar_module_medium--b2c43 .bp_avatar_module_length-2--b2c43.bp_avatar_module_text--b2c43{
+.bp_avatar_module_avatar--05bbb.bp_avatar_module_medium--05bbb .bp_avatar_module_length-1--05bbb.bp_avatar_module_text--05bbb,.bp_avatar_module_avatar--05bbb.bp_avatar_module_medium--05bbb .bp_avatar_module_length-2--05bbb.bp_avatar_module_text--05bbb{
   font-size:.8125rem;
 }
-.bp_avatar_module_avatar--b2c43.bp_avatar_module_medium--b2c43 .bp_avatar_module_badge--b2c43{
-  right:-.375rem;
-}
-.bp_avatar_module_avatar--b2c43.bp_avatar_module_large--b2c43{
+.bp_avatar_module_avatar--05bbb.bp_avatar_module_large--05bbb{
   height:var(--size-8);
   width:var(--size-8);
 }
-.bp_avatar_module_avatar--b2c43.bp_avatar_module_large--b2c43 .bp_avatar_module_text--b2c43{
+.bp_avatar_module_avatar--05bbb.bp_avatar_module_large--05bbb .bp_avatar_module_text--05bbb{
   font-size:.5rem;
 }
-.bp_avatar_module_avatar--b2c43.bp_avatar_module_large--b2c43 .bp_avatar_module_length-1--b2c43.bp_avatar_module_text--b2c43,.bp_avatar_module_avatar--b2c43.bp_avatar_module_large--b2c43 .bp_avatar_module_length-2--b2c43.bp_avatar_module_text--b2c43{
+.bp_avatar_module_avatar--05bbb.bp_avatar_module_large--05bbb .bp_avatar_module_length-1--05bbb.bp_avatar_module_text--05bbb,.bp_avatar_module_avatar--05bbb.bp_avatar_module_large--05bbb .bp_avatar_module_length-2--05bbb.bp_avatar_module_text--05bbb{
   font-family:var(--body-default-bold-font-family);
   font-size:var(--body-default-bold-font-size);
   font-weight:var(--body-default-bold-font-weight);
@@ -826,10 +816,10 @@
           text-decoration:var(--body-default-bold-text-decoration);
   text-transform:var(--body-default-bold-text-case);
 }
-.bp_avatar_module_avatar--b2c43.bp_avatar_module_large--b2c43 .bp_avatar_module_length-3--b2c43.bp_avatar_module_text--b2c43{
+.bp_avatar_module_avatar--05bbb.bp_avatar_module_large--05bbb .bp_avatar_module_length-3--05bbb.bp_avatar_module_text--05bbb{
   font-size:.6875rem;
 }
-.bp_avatar_module_avatar--b2c43.bp_avatar_module_large--b2c43 .bp_avatar_module_length-4--b2c43.bp_avatar_module_text--b2c43{
+.bp_avatar_module_avatar--05bbb.bp_avatar_module_large--05bbb .bp_avatar_module_length-4--05bbb.bp_avatar_module_text--05bbb{
   font-family:var(--label-bold-font-family);
   font-size:var(--label-bold-font-size);
   font-weight:var(--label-bold-font-weight);
@@ -839,17 +829,14 @@
           text-decoration:var(--label-bold-text-decoration);
   text-transform:var(--label-bold-text-case);
 }
-.bp_avatar_module_avatar--b2c43.bp_avatar_module_large--b2c43 .bp_avatar_module_badge--b2c43{
-  right:-.25rem;
-}
-.bp_avatar_module_avatar--b2c43.bp_avatar_module_xlarge--b2c43{
+.bp_avatar_module_avatar--05bbb.bp_avatar_module_xlarge--05bbb{
   height:var(--size-11);
   width:var(--size-11);
 }
-.bp_avatar_module_avatar--b2c43.bp_avatar_module_xlarge--b2c43 .bp_avatar_module_text--b2c43{
+.bp_avatar_module_avatar--05bbb.bp_avatar_module_xlarge--05bbb .bp_avatar_module_text--05bbb{
   font-size:1rem;
 }
-.bp_avatar_module_avatar--b2c43.bp_avatar_module_xlarge--b2c43 .bp_avatar_module_length-1--b2c43.bp_avatar_module_text--b2c43,.bp_avatar_module_avatar--b2c43.bp_avatar_module_xlarge--b2c43 .bp_avatar_module_length-2--b2c43.bp_avatar_module_text--b2c43{
+.bp_avatar_module_avatar--05bbb.bp_avatar_module_xlarge--05bbb .bp_avatar_module_length-1--05bbb.bp_avatar_module_text--05bbb,.bp_avatar_module_avatar--05bbb.bp_avatar_module_xlarge--05bbb .bp_avatar_module_length-2--05bbb.bp_avatar_module_text--05bbb{
   font-family:var(--title-x-large-font-family);
   font-size:var(--title-x-large-font-size);
   font-weight:var(--title-x-large-font-weight);
@@ -859,49 +846,46 @@
           text-decoration:var(--title-x-large-text-decoration);
   text-transform:var(--title-x-large-text-case);
 }
-.bp_avatar_module_avatar--b2c43.bp_avatar_module_xlarge--b2c43 .bp_avatar_module_badge--b2c43{
-  right:-.375rem;
-}
-.bp_avatar_module_avatar--b2c43.bp_avatar_module_xxlarge--b2c43{
+.bp_avatar_module_avatar--05bbb.bp_avatar_module_xxlarge--05bbb{
   height:var(--size-20);
   width:var(--size-20);
 }
-.bp_avatar_module_avatar--b2c43.bp_avatar_module_xxlarge--b2c43 .bp_avatar_module_text--b2c43{
+.bp_avatar_module_avatar--05bbb.bp_avatar_module_xxlarge--05bbb .bp_avatar_module_text--05bbb{
   font-size:1.25rem;
 }
-.bp_avatar_module_avatar--b2c43.bp_avatar_module_xxlarge--b2c43 .bp_avatar_module_length-1--b2c43.bp_avatar_module_text--b2c43,.bp_avatar_module_avatar--b2c43.bp_avatar_module_xxlarge--b2c43 .bp_avatar_module_length-2--b2c43.bp_avatar_module_text--b2c43{
+.bp_avatar_module_avatar--05bbb.bp_avatar_module_xxlarge--05bbb .bp_avatar_module_length-1--05bbb.bp_avatar_module_text--05bbb,.bp_avatar_module_avatar--05bbb.bp_avatar_module_xxlarge--05bbb .bp_avatar_module_length-2--05bbb.bp_avatar_module_text--05bbb{
   font-size:2rem;
 }
-.bp_avatar_module_avatar--b2c43.bp_avatar_module_xxlarge--b2c43 .bp_avatar_module_badge--b2c43{
+.bp_avatar_module_avatar--05bbb.bp_avatar_module_xxlarge--05bbb .bp_avatar_module_badge--05bbb{
   right:-.375rem;
 }
-.bp_avatar_module_avatar--b2c43 .bp_avatar_module_image--b2c43{
+.bp_avatar_module_avatar--05bbb .bp_avatar_module_image--05bbb{
   border-radius:50%;
   height:100%;
   object-fit:cover;
   width:100%;
 }
-.bp_avatar_module_avatar--b2c43 .bp_avatar_module_image--b2c43.bp_avatar_module_loading--b2c43{
+.bp_avatar_module_avatar--05bbb .bp_avatar_module_image--05bbb.bp_avatar_module_loading--05bbb{
   height:0;
   width:0;
 }
 
-.bp_avatar_module_anonymousAvatar--b2c43{
+.bp_avatar_module_anonymousAvatar--05bbb{
   align-items:center;
   display:flex;
   justify-content:center;
 }
 
-[data-button-wrapper]:hover .bp_avatar_module_avatar--b2c43{
+[data-button-wrapper]:hover .bp_avatar_module_avatar--05bbb{
   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--b2c43{
+[data-button-wrapper]:active .bp_avatar_module_avatar--05bbb{
   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--b2c43{
+[data-button-wrapper][data-focus-visible] .bp_avatar_module_avatar--05bbb{
   box-shadow:0 0 0 var(--border-1, 1px) var(--background-background), 0 0 0 var(--border-3) var(--outline-focus-on-light);
 }
 
@@ -4377,7 +4361,7 @@ table.bp_inline_table_module_inlineTable--7cffa tr:not(:last-child) td{
   display:inline;
 }
 
-.bp_modal_module_overlay--9041f{
+.bp_modal_module_overlay--eb249{
   background-color:var(--black-opacity-80);
   bottom:0;
   display:grid;
@@ -4389,76 +4373,95 @@ table.bp_inline_table_module_inlineTable--7cffa tr:not(:last-child) td{
   z-index:370;
 }
 @media (width > 459px){
-  .bp_modal_module_overlay--9041f{
+  .bp_modal_module_overlay--eb249{
     place-items:center;
   }
 }
 
-.bp_modal_module_content--9041f{
-  animation:bp_modal_module_popup_bounce_in--9041f var(--animation-duration-3);
+.bp_modal_module_content--eb249{
+  animation:bp_modal_module_popup_bounce_in--eb249 var(--animation-duration-3);
   background-color:var(--gray-white);
   display:flex;
   flex-direction:column;
   height:100vh;
-  overflow:hidden;
+  overflow-y:auto;
   position:relative;
 }
+@media (width > 374px){
+  .bp_modal_module_content--eb249{
+    overflow:hidden;
+  }
+}
 @media (width > 459px){
-  .bp_modal_module_content--9041f{
+  .bp_modal_module_content--eb249{
     border-radius:var(--radius-4);
     height:auto;
     margin:0 var(--space-8);
     max-height:calc(100vh - var(--space-8)*2);
     min-width:calc(460px - var(--space-8)*2);
   }
-  .bp_modal_module_content--9041f.bp_modal_module_smallSizeModal--9041f{
+  .bp_modal_module_content--eb249.bp_modal_module_smallSizeModal--eb249{
     max-width:460px;
   }
-  .bp_modal_module_content--9041f.bp_modal_module_mediumSizeModal--9041f{
+  .bp_modal_module_content--eb249.bp_modal_module_mediumSizeModal--eb249{
     max-width:540px;
   }
-  .bp_modal_module_content--9041f.bp_modal_module_largeSizeModal--9041f{
+  .bp_modal_module_content--eb249.bp_modal_module_largeSizeModal--eb249{
     max-width:620px;
   }
-  .bp_modal_module_content--9041f.bp_modal_module_xlargeSizeModal--9041f{
+  .bp_modal_module_content--eb249.bp_modal_module_xlargeSizeModal--eb249{
     max-width:768px;
   }
 }
 
-.bp_modal_module_content--9041f .bp_modal_module_close--9041f{
+.bp_modal_module_scrollableContainer--eb249{
+  flex-grow:1;
+}
+@media (width > 374px){
+  .bp_modal_module_scrollableContainer--eb249{
+    overflow-y:auto;
+  }
+}
+
+.bp_modal_module_content--eb249 .bp_modal_module_close--eb249{
   color:var(--gray-65);
-  position:absolute;
+  position:fixed;
   right:var(--space-4);
   top:var(--space-4);
 }
+@media (width > 374px){
+  .bp_modal_module_content--eb249 .bp_modal_module_close--eb249{
+    position:absolute;
+  }
+}
 
-.bp_modal_module_close--9041f.bp_modal_module_onColor--9041f{
+.bp_modal_module_close--eb249.bp_modal_module_onColor--eb249{
   background-color:var(--surface-cta-surface-tertiary);
 }
-.bp_modal_module_close--9041f.bp_modal_module_onColor--9041f:hover{
+.bp_modal_module_close--eb249.bp_modal_module_onColor--eb249:hover{
   background-color:var(--surface-cta-surface-icon-hover);
 }
-.bp_modal_module_close--9041f.bp_modal_module_onColor--9041f:active{
+.bp_modal_module_close--eb249.bp_modal_module_onColor--eb249:active{
   background-color:var(--surface-cta-surface-icon-pressed);
 }
 
-.bp_modal_module_content--9041f .bp_modal_module_backButton--9041f{
+.bp_modal_module_content--eb249 .bp_modal_module_backButton--eb249{
   color:var(--gray-65);
   margin-block-start:var(--space-4);
   margin-inline-start:var(--space-4);
 }
 @media (width > 459px){
-  .bp_modal_module_content--9041f .bp_modal_module_backButton--9041f{
+  .bp_modal_module_content--eb249 .bp_modal_module_backButton--eb249{
     height:var(--size-10);
     width:var(--size-10);
   }
 }
 
-.bp_modal_module_modalHeader--9041f{
+.bp_modal_module_modalHeader--eb249{
   display:flex;
 }
 
-.bp_modal_module_modalTitle--9041f{
+.bp_modal_module_modalTitle--eb249{
   display:flex;
   flex-direction:column;
   gap:var(--space-2);
@@ -4466,29 +4469,24 @@ table.bp_inline_table_module_inlineTable--7cffa tr:not(:last-child) td{
   padding:var(--space-5) var(--space-12) var(--space-5) var(--space-4);
 }
 @media (width > 459px){
-  .bp_modal_module_modalTitle--9041f{
+  .bp_modal_module_modalTitle--eb249{
     padding:var(--space-6) var(--space-16) var(--space-6) var(--space-6);
   }
 }
 
-.bp_modal_module_body--9041f{
+.bp_modal_module_body--eb249{
   padding:var(--space-6) var(--space-4) var(--space-4);
 }
 @media (width > 459px){
-  .bp_modal_module_body--9041f{
+  .bp_modal_module_body--eb249{
     padding:var(--space-6) var(--space-6) var(--space-4);
   }
 }
 
-.bp_modal_module_scrollableContainer--9041f{
-  flex-grow:1;
-  overflow-y:auto;
-}
-
-.bp_modal_module_headerDividerLine--9041f{
+.bp_modal_module_headerDividerLine--eb249{
   position:relative;
 }
-.bp_modal_module_headerDividerLine--9041f::after{
+.bp_modal_module_headerDividerLine--eb249::after{
   border-bottom:var(--border-1) solid var(--border-divider-border);
   bottom:0;
   content:"";
@@ -4497,16 +4495,16 @@ table.bp_inline_table_module_inlineTable--7cffa tr:not(:last-child) td{
   right:var(--space-4);
 }
 @media (width > 459px){
-  .bp_modal_module_headerDividerLine--9041f::after{
+  .bp_modal_module_headerDividerLine--eb249::after{
     left:var(--space-6);
     right:var(--space-6);
   }
 }
 
-.bp_modal_module_footerDividerLine--9041f{
+.bp_modal_module_footerDividerLine--eb249{
   position:relative;
 }
-.bp_modal_module_footerDividerLine--9041f::before{
+.bp_modal_module_footerDividerLine--eb249::before{
   border-bottom:var(--border-1) solid var(--border-divider-border);
   content:"";
   left:var(--space-4);
@@ -4515,28 +4513,28 @@ table.bp_inline_table_module_inlineTable--7cffa tr:not(:last-child) td{
   top:0;
 }
 @media (width > 459px){
-  .bp_modal_module_footerDividerLine--9041f::before{
+  .bp_modal_module_footerDividerLine--eb249::before{
     left:var(--space-6);
     right:var(--space-6);
   }
 }
 
-.bp_modal_module_footer--9041f{
+.bp_modal_module_footer--eb249{
   display:flex;
   justify-content:flex-end;
   padding:var(--space-4);
 }
 @media (width > 459px){
-  .bp_modal_module_footer--9041f{
+  .bp_modal_module_footer--eb249{
     padding:var(--space-6);
   }
 }
 
-.bp_modal_module_footerButton--9041f + .bp_modal_module_footerButton--9041f{
+.bp_modal_module_footerButton--eb249 + .bp_modal_module_footerButton--eb249{
   margin-inline-start:var(--space-3);
 }
 
-@keyframes bp_modal_module_popup_bounce_in--9041f{
+@keyframes bp_modal_module_popup_bounce_in--eb249{
   0%{
     transform:scale3d(.1, .1, 1);
   }
@@ -6097,7 +6095,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   transform:translateY(-50%);
 }
 
-.bp_side_panel_module_content--43761{
+.bp_side_panel_module_content--bbdff{
   background-color:var(--gray-white);
   border-inline-start:var(--border-1) solid var(--border-divider-border);
   display:flex;
@@ -6107,14 +6105,15 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   margin-inline-start:auto;
   max-width:100%;
   min-width:100%;
-  overflow:hidden;
+  overflow-y:auto;
 }
-@media only screen and (width > 374px){
-  .bp_side_panel_module_content--43761{
+@media (width > 374px){
+  .bp_side_panel_module_content--bbdff{
     min-width:320px;
+    overflow:hidden;
   }
 }
-.bp_side_panel_module_content--43761 .bp_side_panel_module_header--43761{
+.bp_side_panel_module_content--bbdff .bp_side_panel_module_header--bbdff{
   align-items:center;
   background-color:var(--surface-surface);
   border-bottom:var(--border-1) solid var(--border-divider-border);
@@ -6126,62 +6125,77 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   transition-timing-function:cubic-bezier(0, 0, .6, 1);
   word-break:break-word;
 }
-.bp_side_panel_module_content--43761 .bp_side_panel_module_headerShadow--43761{
+.bp_side_panel_module_content--bbdff .bp_side_panel_module_headerShadow--bbdff{
   box-shadow:var(--dropshadow-3);
 }
 
-.bp_side_panel_module_persistentContent--43761{
+.bp_side_panel_module_scrollableContainer--bbdff{
+  flex-grow:1;
+}
+@media (width > 374px){
+  .bp_side_panel_module_scrollableContainer--bbdff{
+    overflow-y:auto;
+  }
+}
+
+.bp_side_panel_module_persistentContent--bbdff{
+  overflow:hidden;
   position:relative;
 }
+.bp_side_panel_module_persistentContent--bbdff .bp_side_panel_module_scrollableContainer--bbdff{
+  flex-grow:1;
+  overflow-y:auto;
+}
 
-.bp_side_panel_module_contentAnimatedSlideIn--43761{
+.bp_side_panel_module_contentAnimatedSlideIn--bbdff{
   animation-duration:.2s;
-  animation-name:bp_side_panel_module_slideIn--43761;
+  animation-name:bp_side_panel_module_slideIn--bbdff;
   animation-timing-function:cubic-bezier(0, 0, .6, 1);
 }
 
-.bp_side_panel_module_contentAnimatedSlideOut--43761[data-state=closed]{
+.bp_side_panel_module_contentAnimatedSlideOut--bbdff[data-state=closed]{
   animation-duration:.2s;
-  animation-name:bp_side_panel_module_slideOut--43761;
+  animation-name:bp_side_panel_module_slideOut--bbdff;
   animation-timing-function:cubic-bezier(0, 0, .6, 1);
 }
 
-.bp_side_panel_module_contentNormal--43761{
+.bp_side_panel_module_contentNormal--bbdff{
   width:360px;
 }
 
-.bp_side_panel_module_contentLarge--43761{
+.bp_side_panel_module_contentLarge--bbdff{
   width:420px;
 }
 
-.bp_side_panel_module_dropShadowContent--43761{
+.bp_side_panel_module_dropShadowContent--bbdff{
   box-shadow:var(--dropshadow-3);
 }
 
-.bp_side_panel_module_content--43761 .bp_side_panel_module_close--43761{
+.bp_side_panel_module_content--bbdff .bp_side_panel_module_close--bbdff{
   color:var(--gray-65);
-  position:absolute;
+  position:fixed;
   right:var(--space-4);
-  top:var(--space-5);
+  top:var(--space-4);
 }
-@media only screen and (width < 374px){
-  .bp_side_panel_module_content--43761 .bp_side_panel_module_close--43761{
-    top:var(--space-4);
+@media (width > 374px){
+  .bp_side_panel_module_content--bbdff .bp_side_panel_module_close--bbdff{
+    position:absolute;
+    top:var(--space-5);
   }
 }
 
-.bp_side_panel_module_overlayContent--43761{
+.bp_side_panel_module_overlayContent--bbdff{
   box-shadow:var(--dropshadow-3);
   position:fixed;
   right:0;
   top:0;
   z-index:300;
 }
-.bp_side_panel_module_overlayContent--43761 .bp_side_panel_module_header--43761{
+.bp_side_panel_module_overlayContent--bbdff .bp_side_panel_module_header--bbdff{
   padding:var(--space-5) var(--space-14) var(--space-5) var(--space-4);
 }
 
-.bp_side_panel_module_overlay--43761{
+.bp_side_panel_module_overlay--bbdff{
   background-color:var(--black-opacity-80);
   bottom:0;
   display:flex;
@@ -6192,20 +6206,15 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   top:0;
   z-index:300;
 }
-.bp_side_panel_module_overlay--43761 .bp_side_panel_module_content--43761 .bp_side_panel_module_header--43761{
+.bp_side_panel_module_overlay--bbdff .bp_side_panel_module_content--bbdff .bp_side_panel_module_header--bbdff{
   padding:var(--space-6) var(--space-14) var(--space-6) var(--space-4);
 }
 
-.bp_side_panel_module_dropShadowOverlay--43761{
+.bp_side_panel_module_dropShadowOverlay--bbdff{
   background-color:initial;
 }
 
-.bp_side_panel_module_scrollableContainer--43761{
-  flex-grow:1;
-  overflow-y:auto;
-}
-
-.bp_side_panel_module_footer--43761{
+.bp_side_panel_module_footer--bbdff{
   background-color:var(--surface-surface);
   display:flex;
   justify-content:flex-end;
@@ -6215,19 +6224,19 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
   transition-timing-function:cubic-bezier(0, 0, .6, 1);
 }
 
-.bp_side_panel_module_footerShadow--43761{
+.bp_side_panel_module_footerShadow--bbdff{
   box-shadow:var(--dropshadow-3-inverse);
 }
 
-.bp_side_panel_module_footerButton--43761{
+.bp_side_panel_module_footerButton--bbdff{
   margin-inline-start:var(--space-2);
 }
 
-.bp_side_panel_module_footerButton--43761 + .bp_side_panel_module_footerButton--43761{
+.bp_side_panel_module_footerButton--bbdff + .bp_side_panel_module_footerButton--bbdff{
   margin-inline-start:var(--space-3);
 }
 
-@keyframes bp_side_panel_module_slideIn--43761{
+@keyframes bp_side_panel_module_slideIn--bbdff{
   from{
     inset-inline-end:-100%;
   }
@@ -6235,7 +6244,7 @@ div[data-radix-popper-content-wrapper]:has([role=menu]):has([data-state=open]):h
     inset-inline-end:0;
   }
 }
-@keyframes bp_side_panel_module_slideOut--43761{
+@keyframes bp_side_panel_module_slideOut--bbdff{
   from{
     inset-inline-end:0;
   }

package/dist/lib-esm/input-chip/input-chip.js

@@ -17,11 +17,26 @@ const InputChip = /*#__PURE__*/forwardRef((props, ref) => {
     ...buttonProps
   } = props;
   // Clone avatar element to override its props
-  const avatar = avatarProp ? /*#__PURE__*/React__default.cloneElement(avatarProp, {
-    className: clsx(avatarProp.props.className, styles.avatar),
-    size: 'small',
-    'aria-hidden': 'true'
-  }) : null;
+  const withSmallAvatarSize = element => {
+    const cloneAvatarWithSmallSize = el => /*#__PURE__*/React__default.cloneElement(el, {
+      ...el.props,
+      className: clsx(el.props.className, styles.avatar),
+      size: 'small',
+      'aria-hidden': 'true'
+    });
+    // If the avatar is wrapped by an IconBadge, apply size to both the IconBadge and the Avatar
+    if (/*#__PURE__*/React__default.isValidElement(element.props.children)) {
+      const adaptedChild = cloneAvatarWithSmallSize(element.props.children);
+      return /*#__PURE__*/React__default.cloneElement(element, {
+        ...element.props,
+        size: 'small',
+        children: adaptedChild
+      });
+    }
+    // Avatar without an IconBadge, apply size directly to the Avatar
+    return cloneAvatarWithSmallSize(element);
+  };
+  const avatar = avatarProp ? withSmallAvatarSize(avatarProp) : null;
   const handleKeyDown = event => {
     if (onDelete && DELETE_TRIGGER_KEYS.includes(event.code)) {
       onDelete();

package/dist/lib-esm/loading-indicator/loading-indicator.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"crawler":"bp_loading_indicator_module_crawler--0e876","segment":"bp_loading_indicator_module_segment--0e876","small":"bp_loading_indicator_module_small--0e876","large":"bp_loading_indicator_module_large--0e876","x-large":"bp_loading_indicator_module_x-large--0e876","default":"bp_loading_indicator_module_default--0e876","segment-transform":"bp_loading_indicator_module_segment-transform--0e876","segment-default":"bp_loading_indicator_module_segment-default--0e876","dark":"bp_loading_indicator_module_dark--0e876","segment-dark":"bp_loading_indicator_module_segment-dark--0e876","light":"bp_loading_indicator_module_light--0e876","segment-light":"bp_loading_indicator_module_segment-light--0e876"};
+var styles = {"crawler":"bp_loading_indicator_module_crawler--2f1df","segment":"bp_loading_indicator_module_segment--2f1df","small":"bp_loading_indicator_module_small--2f1df","large":"bp_loading_indicator_module_large--2f1df","x-large":"bp_loading_indicator_module_x-large--2f1df","default":"bp_loading_indicator_module_default--2f1df","segment-transform":"bp_loading_indicator_module_segment-transform--2f1df","segment-default":"bp_loading_indicator_module_segment-default--2f1df","dark":"bp_loading_indicator_module_dark--2f1df","segment-dark":"bp_loading_indicator_module_segment-dark--2f1df","light":"bp_loading_indicator_module_light--2f1df","segment-light":"bp_loading_indicator_module_segment-light--2f1df"};
 
 export { styles as default };

package/dist/lib-esm/modal/modal-close.js

@@ -7,6 +7,9 @@ import { IconButton } from '../primitives/icon-button/icon-button.js';
 import { useMedia } from '../utils/useMedia.js';
 import styles from './modal.module.js';
 
+const smallViewportProps = {
+  variant: 'small-utility'
+};
 /**
  * The button that closes the modal.
  */
@@ -22,10 +25,7 @@ const ModalClose = /*#__PURE__*/forwardRef(({
   // TODO: change to media query tokens
   const breakpoint = 459;
   const isMobile = useMedia(`(max-width: ${breakpoint}px)`);
-  let iconButtonSize = size;
-  if (size === 'large' && isMobile) {
-    iconButtonSize = 'small';
-  }
+  const finalProps = isMobile ? smallViewportProps : {};
   return jsx(RadixDialog.Close, {
     ref: forwardedRef,
     "aria-label": ariaLabel,
@@ -34,10 +34,11 @@ const ModalClose = /*#__PURE__*/forwardRef(({
       ...rest,
       "aria-label": ariaLabel,
       className: clsx(styles.close, {
-        [styles.onColor]: variant === 'onColor'
+        [styles.onColor]: variant === 'onColor' && !isMobile
       }, className),
       icon: icon,
-      size: iconButtonSize
+      size: size,
+      ...finalProps
     })
   });
 });

package/dist/lib-esm/modal/modal-content.d.ts

@@ -4,4 +4,6 @@ import * as RadixDialog from '@radix-ui/react-dialog';
  */
 export declare const ModalContent: import("react").ForwardRefExoticComponent<RadixDialog.DialogContentProps & Pick<RadixDialog.DialogPortalProps, "container"> & {
     size: "small" | "medium" | "large" | "xlarge";
+} & {
+    'data-testid'?: string;
 } & import("react").RefAttributes<HTMLDivElement>>;

package/dist/lib-esm/modal/modal-content.js

@@ -12,6 +12,7 @@ const ModalContent = /*#__PURE__*/forwardRef(({
   children,
   container,
   className,
+  'data-testid': dataTestId = 'modal-content-container',
   size,
   ...props
 }, forwardedRef) => jsx(RadixDialog.Portal, {
@@ -23,6 +24,7 @@ const ModalContent = /*#__PURE__*/forwardRef(({
       ref: forwardedRef,
       asChild: asChild,
       className: clsx(styles.content, styles[`${size}SizeModal`], className),
+      "data-testid": dataTestId,
       children: children
     })
   })

package/dist/lib-esm/modal/modal-scrollable-container.js

@@ -13,7 +13,7 @@ import styles from './modal.module.js';
 const ModalScrollableContainer = /*#__PURE__*/forwardRef(({
   children,
   className,
-  'data-testid': dataTestId = 'modal-container',
+  'data-testid': dataTestId = 'modal-scrollable-container',
   ...rest
 }, forwardedRef) => {
   const {

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

@@ -27,6 +27,8 @@ export declare const Modal: (({ children, modal, ...props }: ModalProps) => impo
     Close: import("react").ForwardRefExoticComponent<import("./types").ModalCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
     Content: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogContentProps & Pick<import("@radix-ui/react-dialog").DialogPortalProps, "container"> & {
         size: "small" | "medium" | "large" | "xlarge";
+    } & {
+        'data-testid'?: string;
     } & import("react").RefAttributes<HTMLDivElement>>;
     Footer: import("react").ForwardRefExoticComponent<import("./types").ModalFooterProps & 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> & {

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

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"overlay":"bp_modal_module_overlay--9041f","content":"bp_modal_module_content--9041f","popup_bounce_in":"bp_modal_module_popup_bounce_in--9041f","smallSizeModal":"bp_modal_module_smallSizeModal--9041f","mediumSizeModal":"bp_modal_module_mediumSizeModal--9041f","largeSizeModal":"bp_modal_module_largeSizeModal--9041f","xlargeSizeModal":"bp_modal_module_xlargeSizeModal--9041f","close":"bp_modal_module_close--9041f","onColor":"bp_modal_module_onColor--9041f","backButton":"bp_modal_module_backButton--9041f","modalHeader":"bp_modal_module_modalHeader--9041f","modalTitle":"bp_modal_module_modalTitle--9041f","body":"bp_modal_module_body--9041f","scrollableContainer":"bp_modal_module_scrollableContainer--9041f","headerDividerLine":"bp_modal_module_headerDividerLine--9041f","footerDividerLine":"bp_modal_module_footerDividerLine--9041f","footer":"bp_modal_module_footer--9041f","footerButton":"bp_modal_module_footerButton--9041f"};
+var styles = {"overlay":"bp_modal_module_overlay--eb249","content":"bp_modal_module_content--eb249","popup_bounce_in":"bp_modal_module_popup_bounce_in--eb249","smallSizeModal":"bp_modal_module_smallSizeModal--eb249","mediumSizeModal":"bp_modal_module_mediumSizeModal--eb249","largeSizeModal":"bp_modal_module_largeSizeModal--eb249","xlargeSizeModal":"bp_modal_module_xlargeSizeModal--eb249","scrollableContainer":"bp_modal_module_scrollableContainer--eb249","close":"bp_modal_module_close--eb249","onColor":"bp_modal_module_onColor--eb249","backButton":"bp_modal_module_backButton--eb249","modalHeader":"bp_modal_module_modalHeader--eb249","modalTitle":"bp_modal_module_modalTitle--eb249","body":"bp_modal_module_body--eb249","headerDividerLine":"bp_modal_module_headerDividerLine--eb249","footerDividerLine":"bp_modal_module_footerDividerLine--eb249","footer":"bp_modal_module_footer--eb249","footerButton":"bp_modal_module_footerButton--eb249"};
 
 export { styles as default };

package/dist/lib-esm/primitives/base-text-input/base-text-input.js

@@ -64,17 +64,17 @@ const BaseTextInput = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   }), [endIcon]);
   const Label = useLabelable(label, inputId, required);
   return jsxs("div", {
-    className: clsx([styles.textInputContainerOuter], {
+    className: clsx(styles.textInputContainerOuter, {
       [styles.disabled]: disabled,
       [styles.error]: shouldMarkError
-    }),
+    }, className),
     children: [jsx(Label, {
       className: clsx([styles.label], {
         [styles.hidden]: hideLabel
       }),
       hideLabel: hideLabel
     }), jsxs("div", {
-      className: clsx([styles.textInputContainer], className),
+      className: styles.textInputContainer,
       style: {
         '--end-icon-width': endIconWidth ? `${endIconWidth}px` : '0px',
         '--start-icon-width': startIconWidth ? `${startIconWidth}px` : '0px'

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

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

package/package.json

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