@box/blueprint-web 7.14.0 → 7.18.0

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

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { type AccordionItemProps, type AccordionProps } from './types';
 /**
  * The root component that contains all the parts of a accordion.
@@ -10,11 +9,11 @@ import { type AccordionItemProps, type AccordionProps } from './types';
  *  <Accordion.Item 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) & {
+export declare const Root: (props: AccordionProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Item: (props: AccordionItemProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Accordion: ((props: AccordionProps) => import("react/jsx-runtime").JSX.Element) & {
     /**
      * The component that displays a Accordion item.
      */
-    Item: (props: AccordionItemProps) => JSX.Element;
+    Item: (props: AccordionItemProps) => import("react/jsx-runtime").JSX.Element;
 };

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

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"accordionContent":"bp_accordion_module_accordionContent--a6e31","slideDown":"bp_accordion_module_slideDown--a6e31","slideUp":"bp_accordion_module_slideUp--a6e31","accordionContentWrapper":"bp_accordion_module_accordionContentWrapper--a6e31","accordionItem":"bp_accordion_module_accordionItem--a6e31","accordionFixedContent":"bp_accordion_module_accordionFixedContent--a6e31","accordionHeader":"bp_accordion_module_accordionHeader--a6e31","accordionHeaderTrigger":"bp_accordion_module_accordionHeaderTrigger--a6e31","accordionStatus":"bp_accordion_module_accordionStatus--a6e31","accordionTrigger":"bp_accordion_module_accordionTrigger--a6e31","accordionTriggerIcon":"bp_accordion_module_accordionTriggerIcon--a6e31"};
+var styles = {"accordionContent":"bp_accordion_module_accordionContent--53bdb","slideDown":"bp_accordion_module_slideDown--53bdb","slideUp":"bp_accordion_module_slideUp--53bdb","accordionContentWrapper":"bp_accordion_module_accordionContentWrapper--53bdb","accordionItem":"bp_accordion_module_accordionItem--53bdb","accordionFixedContent":"bp_accordion_module_accordionFixedContent--53bdb","accordionHeader":"bp_accordion_module_accordionHeader--53bdb","accordionHeaderTrigger":"bp_accordion_module_accordionHeaderTrigger--53bdb","accordionStatus":"bp_accordion_module_accordionStatus--53bdb","accordionTrigger":"bp_accordion_module_accordionTrigger--53bdb","accordionTriggerIcon":"bp_accordion_module_accordionTriggerIcon--53bdb"};
 
 export { styles as default };

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?: import("./types").Size | undefined;
+    size?: "small" | "medium" | "large" | "xlarge" | 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?: import("./types").Size | undefined;
+    size?: "small" | "medium" | "large" | "xlarge" | 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?: import("./types").Size | undefined;
+    size?: "small" | "medium" | "large" | "xlarge" | 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?: import("./types").Size | undefined;
+    size?: "small" | "medium" | "large" | "xlarge" | 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--8cb6e","badge":"bp_avatar_module_badge--8cb6e","text":"bp_avatar_module_text--8cb6e","small":"bp_avatar_module_small--8cb6e","length-1":"bp_avatar_module_length-1--8cb6e","length-2":"bp_avatar_module_length-2--8cb6e","medium":"bp_avatar_module_medium--8cb6e","large":"bp_avatar_module_large--8cb6e","length-3":"bp_avatar_module_length-3--8cb6e","length-4":"bp_avatar_module_length-4--8cb6e","xlarge":"bp_avatar_module_xlarge--8cb6e","image":"bp_avatar_module_image--8cb6e","loading":"bp_avatar_module_loading--8cb6e","anonymousAvatar":"bp_avatar_module_anonymousAvatar--8cb6e","svg":"bp_avatar_module_svg--8cb6e"};
+var styles = {"avatar":"bp_avatar_module_avatar--adfaf","badge":"bp_avatar_module_badge--adfaf","text":"bp_avatar_module_text--adfaf","small":"bp_avatar_module_small--adfaf","length-1":"bp_avatar_module_length-1--adfaf","length-2":"bp_avatar_module_length-2--adfaf","medium":"bp_avatar_module_medium--adfaf","large":"bp_avatar_module_large--adfaf","length-3":"bp_avatar_module_length-3--adfaf","length-4":"bp_avatar_module_length-4--adfaf","xlarge":"bp_avatar_module_xlarge--adfaf","image":"bp_avatar_module_image--adfaf","loading":"bp_avatar_module_loading--adfaf","anonymousAvatar":"bp_avatar_module_anonymousAvatar--adfaf","svg":"bp_avatar_module_svg--adfaf"};
 
 export { styles as default };

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

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

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

@@ -1,7 +1,8 @@
 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';
+import { type AvatarSizes } from './consts';
+export type AvatarSize = (typeof AvatarSizes)[number];
 export type Color = typeof BoxBlue50 | typeof DarkBlue50 | typeof Yellow50 | typeof GreenLight50 | typeof Yellorange50 | typeof LightBlue50 | typeof WatermelonRed50 | typeof PurpleRain50 | typeof Orange50 | typeof Grimace50;
 export interface Image {
     /** The image to display. When the image is loading or if it fails to load, the fallback is displayed.
@@ -22,10 +23,12 @@ export interface WithColor {
 export type AvatarProps = React.ComponentPropsWithRef<'img'> & {
     /** Whether to display the anonymous user image */
     anonymous?: boolean;
-    /** The badge */
+    /** 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?: Size;
+    size?: AvatarSize;
     /** 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.
      */

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

@@ -1,9 +1,10 @@
 /// <reference types="react" />
 import { type BadgeProps } from './types';
-export type BaseBadgeProps = BadgeProps & {
-    /** The color of the badge background */
+export type BaseBadgeProps = Omit<BadgeProps, 'children'> & {
+    /** The color of the badge background. */
     backgroundColor: string;
     className?: string;
+    /** The child element to display in the badge: string for NumericBadge and svg for IconBadge). */
+    children?: React.ReactElement;
 };
-export declare const BadgeSizes: readonly ["small", "medium", "large", "xlarge"];
-export declare const BaseBadge: ({ backgroundColor, className, children, size, offset }: BaseBadgeProps) => JSX.Element;
+export declare const BaseBadge: ({ backgroundColor, className, children, size, offset }: BaseBadgeProps) => import("react/jsx-runtime").JSX.Element;

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

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

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

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 import { type BadgeProps } from './types';
 export interface IconBadgeProps extends BadgeProps {
-    /** The variant of the icon badge */
+    /** The variant of the icon badge. */
     variant: 'file-pdf' | 'file-docs' | 'file-sheets' | 'file-image' | 'file-canvas' | 'file-pages' | 'file-keynote' | 'file-boxnote' | 'file-video' | 'folder-external' | 'folder-shared' | 'action-relay' | 'action-mention' | 'action-task' | 'action-taskapproval' | 'action-annotation' | 'action-performed-completed' | 'action-performed-rejected' | 'collaborator-external' | 'collaborator-admin' | 'collaborator-coadmin' | 'content-pin' | 'content-collection' | 'content-offline' | 'content-progress';
 }
 export declare const IconBadgeVariants: ("file-pdf" | "file-docs" | "file-sheets" | "file-image" | "file-canvas" | "file-pages" | "file-keynote" | "file-boxnote" | "file-video" | "folder-external" | "folder-shared" | "action-relay" | "action-mention" | "action-task" | "action-taskapproval" | "action-annotation" | "action-performed-completed" | "action-performed-rejected" | "collaborator-external" | "collaborator-admin" | "collaborator-coadmin" | "content-pin" | "content-collection" | "content-offline" | "content-progress")[];
-export declare const IconBadge: (props: IconBadgeProps) => JSX.Element;
+export declare const IconBadge: (props: IconBadgeProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,123 +1,124 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { FilePdf, FileDocs, FileSheets, FileImage, FileCanvas, FilePages, FileKeynote, FileBoxNote, FileVideo, FolderExternal, FolderShared, Relay, EllipsisBubble, Task, ApprovalTask, Annotation, Checkmark, XMark, GlobeBadge, Star, Pin, Arrow, CheckmarkUnderline, Loader } from '@box/blueprint-web-assets/icons/Fill';
-import { GrayWhite, GreenLight100, Orange100, Gray10, Gray100, Gray65, LightBlue100, LightBlue120, Yellorange100, WatermelonRed110, Gray50, DarkBlue100, PurpleRain100, Gray80 } from '@box/blueprint-web-assets/tokens/tokens';
-import { Children, createElement } from 'react';
+import { SurfaceBadgePdfSurface, GrayWhite, SurfaceBadgeDocsSurface, SurfaceBadgeSheetsSurface, SurfaceBadgeImageSurface, SurfaceBadgeCanvasSurface, SurfaceBadgePagesSurface, SurfaceBadgeKeynoteSurface, SurfaceBadgeBoxnoteSurface, Gray100, SurfaceBadgeVideoSurface, SurfaceBadgeFolderexternalSurface, SurfaceBadgeFoldersharedSurface, SurfaceBadgeRelaySurface, SurfaceBadgeMentionSurface, SurfaceBadgeTaskSurface, SurfaceBadgeTaskapprovalSurface, SurfaceBadgeAnnotationSurface, SurfaceBadgeCompletedSurface, SurfaceBadgeRejectedSurface, SurfaceBadgeExternalSurface, SurfaceBadgeAdminSurface, SurfaceBadgeCoadminSurface, SurfaceBadgePinSurface, Gray80, SurfaceBadgeCollectionSurface, SurfaceBadgeOfflineSurface, SurfaceBadgeProgressSurface } from '@box/blueprint-web-assets/tokens/tokens';
+import { createElement } from 'react';
 import { BaseBadge } from './base-badge.js';
 import styles from './base-badge.module.js';
+import { useSingleChildCheck } from './utils/useSingleChildCheck.js';
 
 const badgeVariantToIconProps = {
   'file-pdf': {
-    backgroundColor: '#D0021B',
+    backgroundColor: SurfaceBadgePdfSurface,
     icon: FilePdf,
     iconColor: GrayWhite
   },
   'file-docs': {
-    backgroundColor: '#4083F7',
+    backgroundColor: SurfaceBadgeDocsSurface,
     icon: FileDocs,
     iconColor: GrayWhite
   },
   'file-sheets': {
-    backgroundColor: '#21A464',
+    backgroundColor: SurfaceBadgeSheetsSurface,
     icon: FileSheets,
     iconColor: GrayWhite
   },
   'file-image': {
-    backgroundColor: GreenLight100,
+    backgroundColor: SurfaceBadgeImageSurface,
     icon: FileImage,
     iconColor: GrayWhite
   },
   'file-canvas': {
-    backgroundColor: Orange100,
+    backgroundColor: SurfaceBadgeCanvasSurface,
     icon: FileCanvas,
     iconColor: GrayWhite
   },
   'file-pages': {
-    backgroundColor: '#FF9500',
+    backgroundColor: SurfaceBadgePagesSurface,
     icon: FilePages,
     iconColor: GrayWhite
   },
   'file-keynote': {
-    backgroundColor: '#0A84FF',
+    backgroundColor: SurfaceBadgeKeynoteSurface,
     icon: FileKeynote,
     iconColor: GrayWhite
   },
   'file-boxnote': {
-    backgroundColor: Gray10,
+    backgroundColor: SurfaceBadgeBoxnoteSurface,
     icon: FileBoxNote,
     iconColor: Gray100
   },
   'file-video': {
-    backgroundColor: '#009AED',
+    backgroundColor: SurfaceBadgeVideoSurface,
     icon: FileVideo,
     iconColor: GrayWhite
   },
   'folder-external': {
-    backgroundColor: Gray65,
+    backgroundColor: SurfaceBadgeFolderexternalSurface,
     icon: FolderExternal,
     iconColor: GrayWhite
   },
   'folder-shared': {
-    backgroundColor: LightBlue100,
+    backgroundColor: SurfaceBadgeFoldersharedSurface,
     icon: FolderShared,
     iconColor: GrayWhite
   },
   'action-relay': {
-    backgroundColor: LightBlue120,
+    backgroundColor: SurfaceBadgeRelaySurface,
     icon: Relay,
     iconColor: GrayWhite
   },
   'action-mention': {
-    backgroundColor: LightBlue120,
+    backgroundColor: SurfaceBadgeMentionSurface,
     icon: EllipsisBubble,
     iconColor: GrayWhite
   },
   'action-task': {
-    backgroundColor: LightBlue100,
+    backgroundColor: SurfaceBadgeTaskSurface,
     icon: Task,
     iconColor: GrayWhite
   },
   'action-taskapproval': {
-    backgroundColor: LightBlue120,
+    backgroundColor: SurfaceBadgeTaskapprovalSurface,
     icon: ApprovalTask,
     iconColor: GrayWhite
   },
   'action-annotation': {
-    backgroundColor: Yellorange100,
+    backgroundColor: SurfaceBadgeAnnotationSurface,
     icon: Annotation,
     iconColor: GrayWhite
   },
   'action-performed-completed': {
-    backgroundColor: GreenLight100,
+    backgroundColor: SurfaceBadgeCompletedSurface,
     icon: Checkmark,
     iconColor: GrayWhite
   },
   'action-performed-rejected': {
-    backgroundColor: WatermelonRed110,
+    backgroundColor: SurfaceBadgeRejectedSurface,
     icon: XMark,
     iconColor: GrayWhite
   },
   'collaborator-external': {
-    backgroundColor: Gray50,
+    backgroundColor: SurfaceBadgeExternalSurface,
     icon: GlobeBadge,
     iconColor: GrayWhite
   },
   'collaborator-admin': {
-    backgroundColor: DarkBlue100,
+    backgroundColor: SurfaceBadgeAdminSurface,
     icon: Star,
     iconColor: GrayWhite
   },
   'collaborator-coadmin': {
-    backgroundColor: PurpleRain100,
+    backgroundColor: SurfaceBadgeCoadminSurface,
     icon: Star,
     iconColor: GrayWhite
   },
   'content-pin': {
-    backgroundColor: Gray10,
+    backgroundColor: SurfaceBadgePinSurface,
     icon: Pin,
     iconColor: Gray80
   },
   'content-collection': {
-    backgroundColor: Gray10,
+    backgroundColor: SurfaceBadgeCollectionSurface,
     icon: Arrow,
     iconColor: Gray80,
     iconStyle: {
@@ -125,12 +126,12 @@ const badgeVariantToIconProps = {
     }
   },
   'content-offline': {
-    backgroundColor: GreenLight100,
+    backgroundColor: SurfaceBadgeOfflineSurface,
     icon: CheckmarkUnderline,
     iconColor: GrayWhite
   },
   'content-progress': {
-    backgroundColor: Yellorange100,
+    backgroundColor: SurfaceBadgeProgressSurface,
     icon: Loader,
     iconColor: GrayWhite
   }
@@ -155,12 +156,7 @@ const IconBadge = props => {
     iconStyle
   } = badgeVariantToIconProps[variant];
   const iconSize = badgeSizeToIconSize[size];
-  if (Children.count(children) !== 1) {
-    if (process.env.NODE_ENV !== 'production') {
-      // eslint-disable-next-line no-console
-      console.error('IconBadge component requires exactly one child');
-    }
-  }
+  useSingleChildCheck(children);
   return jsxs("div", {
     className: styles.badgeContainer,
     children: [children, jsx(BaseBadge, {

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

@@ -1,7 +1,11 @@
 import React from 'react';
 import { type BadgeProps } from './types';
-export interface NumericBadgeProps extends Omit<BadgeProps, 'size'> {
-    /** The numeric value to inform users of the total count */
+export interface NumericBadgeProps extends Omit<BadgeProps, 'size' | 'children'> {
+    /** The numeric value to inform users of the total count. */
     value: string;
+    /** Accepts exactly a single child component. Badge will be displayed over the child. */
+    children?: React.ReactElement;
+    /** The render prop must be passed in the case of a deeply nested child (e.g., the child is wrapped by a tooltip). */
+    render?(ariaDescribedBy: string, ref?: React.Ref<unknown>): React.ReactElement;
 }
-export declare const NumericBadge: React.ForwardRefExoticComponent<NumericBadgeProps & React.RefAttributes<React.ReactNode>>;
+export declare const NumericBadge: React.ForwardRefExoticComponent<NumericBadgeProps & React.RefAttributes<unknown>>;

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

@@ -1,7 +1,7 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { WatermelonRed110 } from '@box/blueprint-web-assets/tokens/tokens';
 import clsx from 'clsx';
-import React__default, { forwardRef, Children } from 'react';
+import { forwardRef, Children, cloneElement } from 'react';
 import { Text } from '../text/text.js';
 import { useUniqueId } from '../utils/useUniqueId.js';
 import { BaseBadge } from './base-badge.js';
@@ -11,22 +11,25 @@ const NumericBadge = /*#__PURE__*/forwardRef((props, forwardedRef) => {
   const {
     value,
     children,
-    offset
+    offset,
+    render
   } = props;
   const valueId = useUniqueId('numeric-badge-value');
-  if (Children.count(children) !== 1) {
-    if (process.env.NODE_ENV !== 'production') {
-      // eslint-disable-next-line no-console
-      console.error('NumericBadge component requires exactly one child');
-    }
+  // In the case of a deeply nested child (e.g., the child is wrapped by a tooltip), the render prop must be passed instead of children to correctly apply aria-describedby.
+  let badgeChild;
+  if (render) {
+    const renderedChild = render(valueId, forwardedRef);
+    badgeChild = Children.only(renderedChild);
+  } else if (children) {
+    const firstChild = Children.only(children);
+    badgeChild = /*#__PURE__*/cloneElement(firstChild, {
+      ref: forwardedRef,
+      'aria-describedby': valueId
+    });
   }
-  const child = Children.only(children);
   return jsxs("div", {
     className: styles.badgeContainer,
-    children: [/*#__PURE__*/React__default.cloneElement(child, {
-      ref: forwardedRef,
-      'aria-describedby': valueId
-    }), jsx(BaseBadge, {
+    children: [badgeChild, jsx(BaseBadge, {
       backgroundColor: WatermelonRed110,
       className: clsx({
         [styles.numericBadge]: true,

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

@@ -1,8 +1,7 @@
-/// <reference types="react" />
 import { type BadgeProps } from './types';
+export declare const StatusBadgeVariants: readonly ["online"];
 export interface StatusBadgeProps extends BadgeProps {
-    /** The variant for the status */
-    variant: 'online';
+    /** The variant for the status. */
+    variant: (typeof StatusBadgeVariants)[number];
 }
-export declare const StatusBadgeVariants: "online"[];
-export declare const StatusBadge: (props: StatusBadgeProps) => JSX.Element;
+export declare const StatusBadge: (props: StatusBadgeProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,13 +1,12 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { GreenLight120 } from '@box/blueprint-web-assets/tokens/tokens';
-import { Children } from 'react';
+import { SurfaceBadgeOnlineSurface } from '@box/blueprint-web-assets/tokens/tokens';
 import { BaseBadge } from './base-badge.js';
 import styles from './base-badge.module.js';
+import { useSingleChildCheck } from './utils/useSingleChildCheck.js';
 
 const variantToBaseBadgeProp = {
   online: {
-    backgroundColor: GreenLight120,
-    children: null
+    backgroundColor: SurfaceBadgeOnlineSurface
   }
 };
 const StatusBadge = props => {
@@ -17,12 +16,7 @@ const StatusBadge = props => {
     children,
     offset
   } = props;
-  if (Children.count(children) !== 1) {
-    if (process.env.NODE_ENV !== 'production') {
-      // eslint-disable-next-line no-console
-      console.error('StatusBadge component requires exactly one child');
-    }
-  }
+  useSingleChildCheck(children);
   return jsxs("div", {
     className: styles.badgeContainer,
     children: [children, jsx(BaseBadge, {

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

@@ -1,9 +1,10 @@
-/// <reference types="react" />
+import type React from 'react';
+export declare const BadgeSizes: readonly ["small", "medium", "large", "xlarge"];
 export interface BadgeProps {
     /** Accepts exactly a single child component. Badge will be displayed over the child. */
-    children: React.ReactNode;
+    children: React.ReactElement;
     /** The size of the badge */
-    size: 'small' | 'medium' | 'large' | 'xlarge';
+    size: (typeof BadgeSizes)[number];
     /** The offset in pixels from the default position of the badge. Accepts positive and negative integers. */
     offset?: {
         top?: number;

package/lib-esm/badge/utils/useSingleChildCheck.d.ts

@@ -0,0 +1,2 @@
+import React from 'react';
+export declare const useSingleChildCheck: (children: React.ReactNode) => void;

package/lib-esm/badge/utils/useSingleChildCheck.js

@@ -0,0 +1,12 @@
+import React__default from 'react';
+
+const useSingleChildCheck = children => {
+  if (React__default.Children.count(children) !== 1) {
+    if (process.env.NODE_ENV !== 'production') {
+      // eslint-disable-next-line no-console
+      console.error('Component requires exactly one child');
+    }
+  }
+};
+
+export { useSingleChildCheck };

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

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"card":"bp_card_module_card--aac33","dropshadow-1":"bp_card_module_dropshadow-1--aac33","dropshadow-3":"bp_card_module_dropshadow-3--aac33"};
+var styles = {"card":"bp_card_module_card--4ccca","dropshadow-1":"bp_card_module_dropshadow-1--4ccca","dropshadow-3":"bp_card_module_dropshadow-3--4ccca"};
 
 export { styles as default };

package/lib-esm/card-tooltip/card-tooltip.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { type CardTooltipProps } from './types';
 /**
  * Temporary component that displays Card styled tooltip.
@@ -10,4 +9,4 @@ import { type CardTooltipProps } from './types';
  * **IMPORTANT (2)**: Must wrap interactive component/element (such as: HTMLInputElement, HTMLAnchorElement,  HTMLTextAreaElement, etc. [list of focusable elements](https://allyjs.io/data-tables/focusable.html))
  *
  */
-export declare const CardTooltip: (props: CardTooltipProps) => JSX.Element;
+export declare const CardTooltip: (props: CardTooltipProps) => import("react/jsx-runtime").JSX.Element;

package/lib-esm/card-tooltip/card-tooltip.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"content":"bp_card_tooltip_module_content--200fe","card":"bp_card_tooltip_module_card--200fe","slideDownAndFade":"bp_card_tooltip_module_slideDownAndFade--200fe","slideLeftAndFade":"bp_card_tooltip_module_slideLeftAndFade--200fe","slideUpAndFade":"bp_card_tooltip_module_slideUpAndFade--200fe","slideRightAndFade":"bp_card_tooltip_module_slideRightAndFade--200fe"};
+var styles = {"content":"bp_card_tooltip_module_content--61386","card":"bp_card_tooltip_module_card--61386","slideDownAndFade":"bp_card_tooltip_module_slideDownAndFade--61386","slideLeftAndFade":"bp_card_tooltip_module_slideLeftAndFade--61386","slideUpAndFade":"bp_card_tooltip_module_slideUpAndFade--61386","slideRightAndFade":"bp_card_tooltip_module_slideRightAndFade--61386"};
 
 export { styles as default };

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

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"option":"bp_checkbox_module_option--71f84","checkbox":"bp_checkbox_module_checkbox--71f84","indicator":"bp_checkbox_module_indicator--71f84","label":"bp_checkbox_module_label--71f84","description":"bp_checkbox_module_description--71f84","disabled":"bp_checkbox_module_disabled--71f84"};
+var styles = {"option":"bp_checkbox_module_option--bf663","checkbox":"bp_checkbox_module_checkbox--bf663","indicator":"bp_checkbox_module_indicator--bf663","label":"bp_checkbox_module_label--bf663","description":"bp_checkbox_module_description--bf663","disabled":"bp_checkbox_module_disabled--bf663"};
 
 export { styles as default };

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

@@ -2,13 +2,13 @@ import { type CheckboxProps } from '@radix-ui/react-checkbox';
 import { type ReactNode } from 'react';
 import { type RequireAllOrNone } from 'type-fest';
 import { type StyledText } from '../utils/commonTypes';
-interface DescriptionInfo {
+export interface DescriptionInfo {
     /** Additional text to aid in use. It will appear inside info icon tooltip in the description. */
     descriptionInfoText?: StyledText;
     /** aria-label for the description badge button. */
     descriptionInfoBadgeAriaLabel?: string;
 }
-interface LabelInfo {
+export interface LabelInfo {
     /** Additional text to aid in use. It will appear inside info icon tooltip in the label. */
     labelInfoText?: StyledText;
     /** aria-label for the label badge button. */
@@ -29,4 +29,3 @@ export type CheckboxItemProps = {
     /** Event handler called when the checked state of the checkbox changes. */
     onCheckedChange: (checked: CheckedState) => void;
 } & Omit<CheckboxProps, 'onCheckedChange'> & RequireAllOrNone<LabelInfo, keyof LabelInfo> & RequireAllOrNone<DescriptionInfo, keyof DescriptionInfo>;
-export {};

package/lib-esm/collapsible/collapsible-section.d.ts

@@ -1,12 +1,7 @@
 /// <reference types="react" />
-import * as Collapsible from '@radix-ui/react-collapsible';
+import { type CollapsibleSectionProps } from './types';
 type CollapsibleSectionSlotName = 'header' | 'content';
-export declare const CollapsibleSection: import("react").ForwardRefExoticComponent<Omit<Collapsible.CollapsibleProps & Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-} & {
-    openSectionButtonAriaLabel: string;
-    closeSectionButtonAriaLabel: string;
-}, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
+export declare const CollapsibleSection: import("react").ForwardRefExoticComponent<Omit<CollapsibleSectionProps, "ref"> & import("react").RefAttributes<HTMLDivElement>> & {
     Slot: (props: {
         name: CollapsibleSectionSlotName;
         children: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | null;

package/lib-esm/collapsible/collapsible-section.module.js

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"collapsibleSection":"bp_collapsible_section_module_collapsibleSection--f411c","collapsibleSectionHeader":"bp_collapsible_section_module_collapsibleSectionHeader--f411c","collapsibleSectionHeaderArrow":"bp_collapsible_section_module_collapsibleSectionHeaderArrow--f411c","collapsibleSectionContent":"bp_collapsible_section_module_collapsibleSectionContent--f411c","slideDown":"bp_collapsible_section_module_slideDown--f411c","slideUp":"bp_collapsible_section_module_slideUp--f411c","collapsibleSectionBody":"bp_collapsible_section_module_collapsibleSectionBody--f411c"};
+var styles = {"collapsibleSection":"bp_collapsible_section_module_collapsibleSection--9458c","collapsibleSectionHeader":"bp_collapsible_section_module_collapsibleSectionHeader--9458c","collapsibleSectionHeaderArrow":"bp_collapsible_section_module_collapsibleSectionHeaderArrow--9458c","collapsibleSectionContent":"bp_collapsible_section_module_collapsibleSectionContent--9458c","slideDown":"bp_collapsible_section_module_slideDown--9458c","slideUp":"bp_collapsible_section_module_slideUp--9458c","collapsibleSectionBody":"bp_collapsible_section_module_collapsibleSectionBody--9458c"};
 
 export { styles as default };

package/lib-esm/combobox/chips-group.d.ts

@@ -1,3 +1,2 @@
-/// <reference types="react" />
 import { type ChipGroupProps } from './chips-group.types';
-export declare const ChipsGroup: (props: ChipGroupProps) => JSX.Element;
+export declare const ChipsGroup: (props: ChipGroupProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,6 +1,6 @@
 import React, { type ForwardedRef } from 'react';
 import { type ComboboxOptionProps, type ComboboxProps, type OptionValue } from './types';
-declare const RootInner: <Multiple extends boolean, FreeInput extends boolean, T extends OptionValue>({ as, ...props }: ComboboxProps<Multiple, FreeInput, T>, ref: ForwardedRef<HTMLInputElement | HTMLTextAreaElement>) => JSX.Element;
+declare const RootInner: <Multiple extends boolean, FreeInput extends boolean, T extends OptionValue>({ as, ...props }: ComboboxProps<Multiple, FreeInput, T>, ref: ForwardedRef<HTMLInputElement | HTMLTextAreaElement>) => import("react/jsx-runtime").JSX.Element;
 export declare const Root: <Multiple extends boolean, FreeInput extends boolean, T extends OptionValue>(props: ComboboxProps<Multiple, FreeInput, T> & {
     ref?: React.ForwardedRef<HTMLInputElement> | undefined;
 }) => ReturnType<typeof RootInner>;

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

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"container":"bp_combobox_module_container--50e2a","disabled":"bp_combobox_module_disabled--50e2a","label":"bp_combobox_module_label--50e2a","hiddenLabel":"bp_combobox_module_hiddenLabel--50e2a","comboboxContainer":"bp_combobox_module_comboboxContainer--50e2a","error":"bp_combobox_module_error--50e2a","textInputWrapper":"bp_combobox_module_textInputWrapper--50e2a","textInput":"bp_combobox_module_textInput--50e2a","errorIcon":"bp_combobox_module_errorIcon--50e2a","withChipsGroup":"bp_combobox_module_withChipsGroup--50e2a","inlineError":"bp_combobox_module_inlineError--50e2a","popover":"bp_combobox_module_popover--50e2a","option":"bp_combobox_module_option--50e2a","indicator":"bp_combobox_module_indicator--50e2a","indicatorIcon":"bp_combobox_module_indicatorIcon--50e2a","optionWithIndicator":"bp_combobox_module_optionWithIndicator--50e2a","loadingIndicator":"bp_combobox_module_loadingIndicator--50e2a","noResultOption":"bp_combobox_module_noResultOption--50e2a"};
+var styles = {"container":"bp_combobox_module_container--65f3f","disabled":"bp_combobox_module_disabled--65f3f","label":"bp_combobox_module_label--65f3f","hiddenLabel":"bp_combobox_module_hiddenLabel--65f3f","comboboxContainer":"bp_combobox_module_comboboxContainer--65f3f","error":"bp_combobox_module_error--65f3f","textInputWrapper":"bp_combobox_module_textInputWrapper--65f3f","textInput":"bp_combobox_module_textInput--65f3f","errorIcon":"bp_combobox_module_errorIcon--65f3f","withChipsGroup":"bp_combobox_module_withChipsGroup--65f3f","inlineError":"bp_combobox_module_inlineError--65f3f","popover":"bp_combobox_module_popover--65f3f","option":"bp_combobox_module_option--65f3f","indicator":"bp_combobox_module_indicator--65f3f","indicatorIcon":"bp_combobox_module_indicatorIcon--65f3f","optionWithIndicator":"bp_combobox_module_optionWithIndicator--65f3f","loadingIndicator":"bp_combobox_module_loadingIndicator--65f3f","noResultOption":"bp_combobox_module_noResultOption--65f3f"};
 
 export { styles as default };

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

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { type SelectRendererProps } from '@ariakit/react-core/select/select-renderer';
 import { type SelectItemProps } from '@ariakit/react-core/select/select-item';
+import { type SelectRendererProps } from '@ariakit/react-core/select/select-renderer';
 import { type TextAreaProps } from '../text-area/types';
 export type OptionValue = {
     value: string;
@@ -183,7 +183,7 @@ export type ConditionalComboboxProps = ComboboxTextArea | {
     as: 'input';
 };
 export type ComboboxProps<Multiple extends boolean, FreeInput extends boolean, T extends OptionValue> = ComboboxBaseProps<Multiple, FreeInput, T> & ConditionalComboboxProps;
-export interface ComboboxOptionProps extends Pick<SelectItemProps, 'hideOnClick'> {
+export interface ComboboxOptionProps extends Pick<SelectItemProps, 'hideOnClick' | 'onClick'> {
     /**
      * The content to render for the combobox option.
      */

package/lib-esm/content-card/content-card-body.d.ts

@@ -1,3 +1,4 @@
 /// <reference types="react" />
 import { type ElementTypes } from '../text/types';
-export declare const ContentCardBody: import("react").ForwardRefExoticComponent<Omit<import("react").ClassAttributes<HTMLParagraphElement> & import("react").HTMLAttributes<HTMLParagraphElement>, "ref"> & import("react").RefAttributes<ElementTypes>>;
+import { type ContentCardBodyProps } from './types';
+export declare const ContentCardBody: import("react").ForwardRefExoticComponent<Omit<ContentCardBodyProps, "ref"> & import("react").RefAttributes<ElementTypes>>;