@box/blueprint-web 5.31.3

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

@@ -0,0 +1,20 @@
+/// <reference types="react" />
+import { type AccordionItemProps, type AccordionProps } from './types';
+/**
+ * The root component that contains all the parts of a accordion.
+ *
+ * @example
+ * <Accordion>
+ *  <Accordion.Item id="1" value="item-1" title="Item 1"><div>1st item</div></Accordion.Item>
+ *  <Accordion.Item id="2" value="item-2" title="Item 2"><div>2nd item</div></Accordion.Item>
+ *  <Accordion.Item id="3" value="item-3" title="Item 3"><div>3rd item </div></Accordion.Item>
+ * </Accordion>
+ */
+export declare const Root: (props: AccordionProps) => JSX.Element;
+export declare const Item: (props: AccordionItemProps) => JSX.Element;
+export declare const Accordion: ((props: AccordionProps) => JSX.Element) & {
+    /**
+     * The component that displays a Accordion item.
+     */
+    Item: (props: AccordionItemProps) => JSX.Element;
+};

package/lib-esm/accordion/accordion.js

@@ -0,0 +1,112 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { PointerChevron } from '@box/blueprint-web-assets/icons/Fill';
+import { SurfaceStatusSurfaceLightBlue } from '@box/blueprint-web-assets/tokens/tokens';
+import * as RadixAccordion from '@radix-ui/react-accordion';
+import clsx from 'clsx';
+import { Ghost } from '../ghost/ghost.js';
+import { Status } from '../status/status.js';
+import { isDefined } from '../utils/isDefined.js';
+import styles from './accordion.module.js';
+
+/**
+ * The root component that contains all the parts of a accordion.
+ *
+ * @example
+ * <Accordion>
+ *  <Accordion.Item id="1" value="item-1" title="Item 1"><div>1st item</div></Accordion.Item>
+ *  <Accordion.Item id="2" value="item-2" title="Item 2"><div>2nd item</div></Accordion.Item>
+ *  <Accordion.Item id="3" value="item-3" title="Item 3"><div>3rd item </div></Accordion.Item>
+ * </Accordion>
+ */
+const Root = props => {
+  return jsx(RadixAccordion.Root, {
+    ...props
+  });
+};
+const Item = props => {
+  const {
+    loading,
+    loadingAriaLabel,
+    id,
+    children,
+    className,
+    ...rest
+  } = props;
+  const accordionItemClasses = clsx(styles.accordionItem, className);
+  if (loading) {
+    return jsx("div", {
+      ...rest,
+      className: accordionItemClasses,
+      children: jsx("button", {
+        "aria-label": loadingAriaLabel,
+        className: styles.accordionTrigger,
+        disabled: true,
+        type: "button",
+        children: jsx(Ghost, {
+          variant: "rectangle"
+        })
+      })
+    });
+  }
+  if ('fixed' in props) {
+    return jsx("div", {
+      ...rest,
+      className: accordionItemClasses,
+      children: jsx("div", {
+        className: clsx({
+          [styles.accordionFixedContent]: Boolean(children)
+        }),
+        children: children
+      })
+    }, id);
+  }
+  // TODO: [DSYS-549] Refactor - spread props in a single place
+  const {
+    status,
+    title,
+    disabled,
+    ...itemRest
+  } = props;
+  return jsxs(RadixAccordion.Item, {
+    ...itemRest,
+    className: accordionItemClasses,
+    value: id,
+    children: [jsx(RadixAccordion.Header, {
+      asChild: true,
+      children: jsx(RadixAccordion.Trigger, {
+        className: styles.accordionTrigger,
+        disabled: disabled,
+        children: jsxs("h4", {
+          className: styles.accordionHeader,
+          children: [jsx("span", {
+            children: title
+          }), jsxs("div", {
+            className: styles.accordionHeaderTrigger,
+            children: [isDefined(status) && jsx(Status, {
+              className: styles.accordionStatus,
+              color: SurfaceStatusSurfaceLightBlue,
+              text: `${status}`
+            }), jsx(PointerChevron, {
+              "aria-hidden": "true",
+              className: styles.accordionTriggerIcon
+            })]
+          })]
+        })
+      })
+    }), jsx(RadixAccordion.Content, {
+      className: clsx(children && styles.accordionContent),
+      children: jsx("div", {
+        className: styles.accordionContentWrapper,
+        children: children
+      })
+    })]
+  }, id);
+};
+const Accordion = Object.assign(Root, {
+  /**
+   * The component that displays a Accordion item.
+   */
+  Item
+});
+
+export { Accordion, Item, Root };

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

@@ -0,0 +1,4 @@
+import '../index.css';
+var styles = {"accordionContent":"accordion-module_accordionContent__KFoGN","slideDown":"accordion-module_slideDown__Fx53W","slideUp":"accordion-module_slideUp__BVdEl","accordionContentWrapper":"accordion-module_accordionContentWrapper__msgJ-","accordionItem":"accordion-module_accordionItem__GAe-t","accordionFixedContent":"accordion-module_accordionFixedContent__RX-Rt","accordionHeader":"accordion-module_accordionHeader__yaoxJ","accordionHeaderTrigger":"accordion-module_accordionHeaderTrigger__QGvxX","accordionStatus":"accordion-module_accordionStatus__BLj91","accordionTrigger":"accordion-module_accordionTrigger__N0z-R","accordionTriggerIcon":"accordion-module_accordionTriggerIcon__jOsgi"};
+
+export { styles as default };

package/lib-esm/accordion/index.d.ts

@@ -0,0 +1,2 @@
+export { Accordion } from './accordion';
+export type { AccordionFixedItem, AccordionItem, AccordionProps, AccordionSectionItem } from './types';

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

@@ -0,0 +1,43 @@
+/// <reference types="react" />
+import { type AccordionItemProps as RadixAccordionItemProps, type AccordionMultipleProps, type AccordionSingleProps } from '@radix-ui/react-accordion';
+import { type RequireAllOrNone } from 'type-fest';
+type Loading = {
+    /** Loading state of the section. Loading sections are displaying a placeholder. When this is true `loadingAriaLabel` must also be provided. */
+    loading: boolean;
+    /** The aria-label for the ghost state. */
+    loadingAriaLabel: string;
+};
+export type AccordionBaseItem = {
+    /**
+     * Content of the accordion item that is displayed when the secton is expanded
+     */
+    id: string;
+    /**
+     * Content of the accordion item that is displayed when the secton is expanded
+     */
+    children?: React.ReactNode;
+} & RequireAllOrNone<Loading, keyof Loading>;
+/**
+ * Fixed sections are non-collapsible, have no title, only content, can't be disabled
+ */
+export type AccordionFixedItem = AccordionBaseItem & {
+    fixed: true;
+};
+export type AccordionSectionItem = AccordionBaseItem & Omit<RadixAccordionItemProps, 'id'> & {
+    /**
+     * Header text displayed
+     */
+    title: string;
+    /**
+     * Number displayed in a status pill next to the title
+     * */
+    status?: number;
+    /**
+     * Disabled state of the section.
+     */
+    disabled?: boolean;
+};
+export type AccordionItem = AccordionSectionItem | AccordionFixedItem;
+export type AccordionItemProps = AccordionItem & React.ComponentPropsWithRef<'div'>;
+export type AccordionProps = (AccordionSingleProps | AccordionMultipleProps) & React.ComponentPropsWithRef<'div'>;
+export {};

package/lib-esm/actionable-inline-notice/actionable-inline-notice.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { type ActionableInlineNoticeProps } from './types';
+export declare const ActionableInlineNotice: import("react").ForwardRefExoticComponent<ActionableInlineNoticeProps & import("react").RefAttributes<HTMLDivElement>>;

package/lib-esm/actionable-inline-notice/actionable-inline-notice.js

@@ -0,0 +1,34 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { BaseInlineNotice } from '../primitives/base-inline-notice/index.js';
+
+const ActionableInlineNotice = /*#__PURE__*/forwardRef(function ActionableInlineNotice(props, forwardedRef) {
+  const {
+    backgroundColor = 'backgroundBlue',
+    children,
+    icon,
+    iconAriaLabel,
+    text,
+    title
+  } = props;
+  return jsxs(BaseInlineNotice, {
+    ref: forwardedRef,
+    backgroundColor: backgroundColor,
+    children: [jsxs(BaseInlineNotice.ContentContainer, {
+      children: [icon && iconAriaLabel && jsx(BaseInlineNotice.Icon, {
+        icon: icon,
+        iconAriaLabel: iconAriaLabel
+      }), jsxs(BaseInlineNotice.Content, {
+        children: [title && jsx(BaseInlineNotice.Content.Title, {
+          children: title
+        }), jsx(BaseInlineNotice.Content.Body, {
+          children: text
+        })]
+      })]
+    }), jsx(BaseInlineNotice.Actions, {
+      children: children
+    })]
+  });
+});
+
+export { ActionableInlineNotice };

package/lib-esm/actionable-inline-notice/index.d.ts

@@ -0,0 +1,60 @@
+/// <reference types="react" />
+export declare const ActionableInlineNotice: import("react").ForwardRefExoticComponent<import("./types").ActionableInlineNoticeProps & import("react").RefAttributes<HTMLDivElement>> & {
+    PrimaryAction: import("react").ForwardRefExoticComponent<(Omit<import("../primitives/base-button").BaseButtonInterface & Required<Pick<{
+        loading?: boolean | undefined;
+        loadingAriaLabel?: string | undefined;
+    }, keyof {
+        loading?: boolean | undefined;
+        loadingAriaLabel?: string | undefined;
+    }>> & Omit<{
+        loading?: boolean | undefined;
+        loadingAriaLabel?: string | undefined;
+    }, keyof {
+        loading?: boolean | undefined;
+        loadingAriaLabel?: string | undefined;
+    }> & {
+        children: string;
+        className?: string | undefined;
+    }, "ref"> | Omit<import("../primitives/base-button").BaseButtonInterface & Partial<Record<keyof {
+        loading?: boolean | undefined;
+        loadingAriaLabel?: string | undefined;
+    }, never>> & Omit<{
+        loading?: boolean | undefined;
+        loadingAriaLabel?: string | undefined;
+    }, keyof {
+        loading?: boolean | undefined;
+        loadingAriaLabel?: string | undefined;
+    }> & {
+        children: string;
+        className?: string | undefined;
+    }, "ref">) & import("react").RefAttributes<HTMLButtonElement>>;
+    TertiaryAction: import("react").ForwardRefExoticComponent<(Omit<import("../primitives/base-button").BaseButtonInterface & Required<Pick<{
+        loading?: boolean | undefined;
+        loadingAriaLabel?: string | undefined;
+    }, keyof {
+        loading?: boolean | undefined;
+        loadingAriaLabel?: string | undefined;
+    }>> & Omit<{
+        loading?: boolean | undefined;
+        loadingAriaLabel?: string | undefined;
+    }, keyof {
+        loading?: boolean | undefined;
+        loadingAriaLabel?: string | undefined;
+    }> & {
+        children: string;
+        className?: string | undefined;
+    }, "ref"> | Omit<import("../primitives/base-button").BaseButtonInterface & Partial<Record<keyof {
+        loading?: boolean | undefined;
+        loadingAriaLabel?: string | undefined;
+    }, never>> & Omit<{
+        loading?: boolean | undefined;
+        loadingAriaLabel?: string | undefined;
+    }, keyof {
+        loading?: boolean | undefined;
+        loadingAriaLabel?: string | undefined;
+    }> & {
+        children: string;
+        className?: string | undefined;
+    }, "ref">) & import("react").RefAttributes<HTMLButtonElement>>;
+};
+export * from './types';

package/lib-esm/actionable-inline-notice/index.js

@@ -0,0 +1,9 @@
+import { PrimaryAction, TertiaryAction } from '../primitives/base-inline-notice/base-inline-notice-actions.js';
+import { ActionableInlineNotice as ActionableInlineNotice$1 } from './actionable-inline-notice.js';
+
+const ActionableInlineNotice = Object.assign(ActionableInlineNotice$1, {
+  PrimaryAction,
+  TertiaryAction
+});
+
+export { ActionableInlineNotice };

package/lib-esm/actionable-inline-notice/types.d.ts

@@ -0,0 +1,21 @@
+import { type ReactElement } from 'react';
+import { type RequireAllOrNone } from 'type-fest';
+import { type BaseInlineNoticeProps, type ButtonProps } from '../primitives/base-inline-notice';
+export type ActionableInlineNoticeProps = {
+    /** Governs background color for inline notice
+     * @default backgroundBlue
+     */
+    backgroundColor?: Extract<BaseInlineNoticeProps['backgroundColor'], 'backgroundBlue' | 'backgroundPurple'>;
+    /** Text for the body of the inline notice */
+    text: string;
+    /** Children buttons for the inline notice CTA. Specify either PrimaryAction OR both TertiaryAction and PrimaryAction. */
+    children: ReactElement<ButtonProps>;
+    /** Optional title for the inner text of the notice */
+    title?: string;
+} & RequireAllOrNone<Icon, keyof Icon>;
+export type Icon = {
+    /** Icon for notice */
+    icon: React.FunctionComponent<React.PropsWithChildren<React.SVGProps<SVGSVGElement>>>;
+    /** Icon aria label for notice when icon is provided */
+    iconAriaLabel: string;
+};

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

@@ -0,0 +1,109 @@
+/// <reference types="react" />
+export declare const Avatar: import("react").ForwardRefExoticComponent<(Omit<Omit<import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref"> & {
+    ref?: ((instance: HTMLImageElement | null) => void) | import("react").RefObject<HTMLImageElement> | null | undefined;
+} & {
+    anonymous?: boolean | undefined;
+    children?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | undefined;
+    size?: import("./types").Size | undefined;
+    text?: string | undefined;
+} & Required<Pick<{
+    src?: string | undefined;
+    alt?: string | undefined;
+}, keyof {
+    src?: string | undefined;
+    alt?: string | undefined;
+}>> & Omit<{
+    src?: string | undefined;
+    alt?: string | undefined;
+}, keyof {
+    src?: string | undefined;
+    alt?: string | undefined;
+}> & Required<Pick<{
+    color?: string | undefined;
+    colorIndex?: number | undefined;
+}, "color">> & Partial<Record<"colorIndex", never>> & Omit<{
+    color?: string | undefined;
+    colorIndex?: number | undefined;
+}, keyof {
+    color?: string | undefined;
+    colorIndex?: number | undefined;
+}>, "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?: import("./types").Size | undefined;
+    text?: string | undefined;
+} & Required<Pick<{
+    src?: string | undefined;
+    alt?: string | undefined;
+}, keyof {
+    src?: string | undefined;
+    alt?: string | undefined;
+}>> & Omit<{
+    src?: string | undefined;
+    alt?: string | undefined;
+}, keyof {
+    src?: string | undefined;
+    alt?: string | undefined;
+}> & Required<Pick<{
+    color?: string | undefined;
+    colorIndex?: number | undefined;
+}, "colorIndex">> & Partial<Record<"color", never>> & Omit<{
+    color?: string | undefined;
+    colorIndex?: number | undefined;
+}, keyof {
+    color?: string | undefined;
+    colorIndex?: number | undefined;
+}>, "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?: import("./types").Size | undefined;
+    text?: string | undefined;
+} & Partial<Record<keyof {
+    src?: string | undefined;
+    alt?: string | undefined;
+}, never>> & Omit<{
+    src?: string | undefined;
+    alt?: string | undefined;
+}, keyof {
+    src?: string | undefined;
+    alt?: string | undefined;
+}> & Required<Pick<{
+    color?: string | undefined;
+    colorIndex?: number | undefined;
+}, "color">> & Partial<Record<"colorIndex", never>> & Omit<{
+    color?: string | undefined;
+    colorIndex?: number | undefined;
+}, keyof {
+    color?: string | undefined;
+    colorIndex?: number | undefined;
+}>, "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?: import("./types").Size | undefined;
+    text?: string | undefined;
+} & Partial<Record<keyof {
+    src?: string | undefined;
+    alt?: string | undefined;
+}, never>> & Omit<{
+    src?: string | undefined;
+    alt?: string | undefined;
+}, keyof {
+    src?: string | undefined;
+    alt?: string | undefined;
+}> & Required<Pick<{
+    color?: string | undefined;
+    colorIndex?: number | undefined;
+}, "colorIndex">> & Partial<Record<"color", never>> & Omit<{
+    color?: string | undefined;
+    colorIndex?: number | undefined;
+}, keyof {
+    color?: string | undefined;
+    colorIndex?: number | undefined;
+}>, "ref">) & import("react").RefAttributes<HTMLImageElement>>;
+export default Avatar;

package/lib-esm/avatar/avatar.js

@@ -0,0 +1,127 @@
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
+import { AvatarBadge } from '@box/blueprint-web-assets/icons/Fill';
+import { Gray10, GrayBlack } from '@box/blueprint-web-assets/tokens/tokens';
+import clsx from 'clsx';
+import { forwardRef, useState, useEffect, Children, cloneElement } from 'react';
+import styles from './avatar.module.js';
+import { colors, anonymousAvatarSizes, badgeSizes } from './consts.js';
+
+/** This components serves the purpose of the underlay for AvatarBadge to make the transparent lines displayed in proper color. */
+function AnonymousAvatarIconBackground({
+  size
+}) {
+  return jsx("svg", {
+    className: styles.svg,
+    height: size,
+    role: "presentation",
+    viewBox: `0 0 ${size} ${size}`,
+    width: size,
+    children: jsx("circle", {
+      cx: `calc(${size} / 2)`,
+      cy: `calc(${size} / 2)`,
+      fill: GrayBlack,
+      r: `calc(${size} / 2 - 1px)`
+    })
+  });
+}
+function AnonymousAvatarIcon({
+  size
+}) {
+  return jsxs("div", {
+    className: styles.anonymousAvatar,
+    style: {
+      width: size,
+      height: size
+    },
+    children: [jsx(AnonymousAvatarIconBackground, {
+      size: size
+    }), jsx(AvatarBadge, {
+      className: styles.svg,
+      color: Gray10,
+      height: size,
+      role: "presentation",
+      width: size
+    })]
+  });
+}
+const Avatar = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    alt,
+    anonymous,
+    // 'aria-label': ariaLabel, disabled till we implement proper styles for clickable avatar
+    children,
+    className,
+    color,
+    colorIndex,
+    loading = 'lazy',
+    // onClick,
+    onLoad,
+    src,
+    size = 'large',
+    text,
+    ...rest
+  } = props;
+  const [imageIsLoaded, setImageIsLoaded] = useState(false);
+  useEffect(() => {
+    setImageIsLoaded(false);
+  }, [src]);
+  const backgroundColor = color || colors[(colorIndex || 0) % colors.length];
+  const anonymousAvatarSize = anonymousAvatarSizes[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;
+  const shouldShowImage = !anonymous && src;
+  const avatarContents = jsxs(Fragment, {
+    children: [shouldShowText && jsx("div", {
+      className: clsx(styles.text, styles[`length-${text.length}`]),
+      style: {
+        backgroundColor
+      },
+      children: text
+    }), shouldShowAnonymousAvatar && jsx(AnonymousAvatarIcon, {
+      size: anonymousAvatarSize
+    }), shouldShowImage && jsx("img", {
+      ...rest,
+      ref: forwardedRef,
+      alt: alt,
+      className: clsx(styles.image, {
+        [styles.loading]: imageIsLoading
+      }),
+      loading: loading,
+      onLoad: event => {
+        setImageIsLoaded(true);
+        onLoad?.(event);
+      },
+      src: src
+    }), badge && jsx("div", {
+      className: styles.badge,
+      children: badge
+    })]
+  });
+  // disabled till we implement proper styles for clickable avatar
+  // if (onClick) {
+  //     return (
+  //         <button
+  //             aria-label={ariaLabel}
+  //             className={className}
+  //             onClick={onClick}
+  //             type="button"
+  //         >
+  //             {avatarContents}
+  //         </button>
+  //     );
+  // }
+  return jsx("div", {
+    className: clsx(styles.avatar, styles[size], className),
+    children: avatarContents
+  });
+});
+Avatar.displayName = 'Avatar';
+
+export { Avatar, Avatar as default };

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

@@ -0,0 +1,4 @@
+import '../index.css';
+var styles = {"avatar":"avatar-module_avatar__rAG5F","badge":"avatar-module_badge__RYzyA","text":"avatar-module_text__jfYUy","small":"avatar-module_small__fHJyP","length-1":"avatar-module_length-1__wXxq7","length-2":"avatar-module_length-2__5LvKQ","medium":"avatar-module_medium__PXTvh","large":"avatar-module_large__iZJKW","length-3":"avatar-module_length-3__1-Ica","length-4":"avatar-module_length-4__0XGeM","xlarge":"avatar-module_xlarge__QAnxm","image":"avatar-module_image__pCMuB","loading":"avatar-module_loading__qXzH-","anonymousAvatar":"avatar-module_anonymousAvatar__-1tzk","svg":"avatar-module_svg__AuhV9"};
+
+export { styles as default };

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

@@ -0,0 +1,5 @@
+import { type Color, type Size } from './types';
+export declare const anonymousAvatarSizes: Record<Size, string>;
+export declare const badgeSizes: Record<Size, string>;
+export declare const colorsMap: Record<string, Color>;
+export declare const colors: string[];

package/lib-esm/avatar/consts.js

@@ -0,0 +1,29 @@
+import { BoxBlue50, DarkBlue50, Yellow50, GreenLight50, Yellorange50, LightBlue50, WatermelonRed50, PurpleRain50, Orange50, Grimace50, Size4, Size5, Size6, Size8, Size2, Size3 } from '@box/blueprint-web-assets/tokens/tokens';
+
+const anonymousAvatarSizes = {
+  small: Size4,
+  medium: Size5,
+  large: Size6,
+  xlarge: Size8
+};
+const badgeSizes = {
+  small: Size2,
+  medium: Size3,
+  large: Size3,
+  xlarge: Size4
+};
+const colorsMap = {
+  BoxBlue50,
+  DarkBlue50,
+  Yellow50,
+  GreenLight50,
+  Yellorange50,
+  LightBlue50,
+  WatermelonRed50,
+  PurpleRain50,
+  Orange50,
+  Grimace50
+};
+const colors = Object.values(colorsMap);
+
+export { anonymousAvatarSizes, badgeSizes, colors, colorsMap };

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

@@ -0,0 +1,2 @@
+export { Avatar } from './avatar';
+export { type AvatarProps } from './types';

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

@@ -0,0 +1,34 @@
+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';
+export type Size = 'small' | 'medium' | 'large' | 'xlarge';
+export type Color = typeof BoxBlue50 | typeof DarkBlue50 | typeof Yellow50 | typeof GreenLight50 | typeof Yellorange50 | typeof LightBlue50 | typeof WatermelonRed50 | typeof PurpleRain50 | typeof Orange50 | typeof Grimace50;
+type Image = {
+    /** The image to display. When the image is loading or if it fails to load, the fallback is displayed.
+     * The fallback is the text. If the text is not provided, the fallback is the anonymous user image.
+     */
+    src?: string;
+    /** The alt text for the image */
+    alt?: string;
+};
+type WithColor = {
+    /** The color of the avatar background when displaying the letter or the number */
+    color?: Color;
+    /** The index of the color  of the avatar background when displaying the letter or the number.
+     * A convenience replacement for the color prop to facilitate providing a hash of the user data.
+     * It is ignored when the color prop is provided. */
+    colorIndex?: number;
+};
+export type AvatarProps = React.ComponentPropsWithRef<'img'> & {
+    /** Whether to display the anonymous user image */
+    anonymous?: boolean;
+    /** The badge */
+    children?: ReactElement;
+    /** The size of the avatar */
+    size?: Size;
+    /** The text to display, e.g. the user initial or the number of users editing the document.
+     *  Numbers can be formatted with formatNumber() that is exposed along with the Avatar component.
+     */
+    text?: string;
+} & RequireAllOrNone<Image, keyof Image> & RequireExactlyOne<WithColor, keyof WithColor>;
+export {};

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

@@ -0,0 +1,3 @@
+/** Used for presentational puproses in storybook.
+ * It is not meant for production because it doesn't take i18n into account */
+export declare function formatNumber(input: number): string;