@box/blueprint-web 5.31.3

package/lib-esm/util-components/base-grid-list-item/base-grid-list-item-thumbnail.js

@@ -0,0 +1,30 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { Ghost } from '../../ghost/ghost.js';
+import { useBaseGridListItemContext } from './base-grid-list-item.js';
+import styles from './base-grid-list-item.module.js';
+
+const BaseGridListThumbnail = /*#__PURE__*/forwardRef(function BaseGridListThumbnail(props, forwardedRef) {
+  const {
+    children,
+    className,
+    ...rest
+  } = props;
+  const {
+    loading
+  } = useBaseGridListItemContext();
+  return jsx("div", {
+    ...rest,
+    ref: forwardedRef,
+    className: clsx(styles.thumbnail, {
+      [styles.loading]: loading
+    }, className),
+    children: loading ? jsx(Ghost, {
+      borderRadius: "0.5rem",
+      height: "100%"
+    }) : children
+  });
+});
+
+export { BaseGridListThumbnail };

package/lib-esm/util-components/base-grid-list-item/base-grid-list-item.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { type BaseGridListItemContextType } from './types';
+export declare const useBaseGridListItemContext: () => BaseGridListItemContextType;
+export declare const BaseGridListItem: import("react").ForwardRefExoticComponent<import("react-aria-components").ItemProps<object> & Omit<BaseGridListItemContextType, "isItemInteracted" | "setIsItemInteracted"> & import("react").RefAttributes<HTMLDivElement>>;

package/lib-esm/util-components/base-grid-list-item/base-grid-list-item.js

@@ -0,0 +1,70 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import noop from 'lodash/noop';
+import { forwardRef, useState, useMemo, createContext, useContext } from 'react';
+import { Item } from 'react-aria-components';
+import { useDebounce } from '../../utils/use-debounce.js';
+import { useBaseGridListContext } from './base-grid-list.js';
+import styles from './base-grid-list-item.module.js';
+
+const BaseGridListItemContext = /*#__PURE__*/createContext({
+  loading: false,
+  pinned: false,
+  pinAriaLabel: undefined,
+  setIsItemInteracted: noop,
+  isItemInteracted: false
+});
+const useBaseGridListItemContext = () => {
+  return useContext(BaseGridListItemContext);
+};
+const BaseGridListItem = /*#__PURE__*/forwardRef(function BaseGridListItem(props, forwardedRef) {
+  const {
+    children,
+    className,
+    loading = false,
+    pinned = false,
+    pinAriaLabel,
+    ...rest
+  } = props;
+  const {
+    layout
+  } = useBaseGridListContext();
+  const textValue = typeof rest.textValue === 'string' ? rest.textValue : undefined;
+  const [isItemInteracted, setIsItemInteracted] = useState(false);
+  // Use debounce with a small delay to make sure there is style flashing finishing interaction (e.g closing dropdown)
+  const debouncedIsItemInteracted = useDebounce(isItemInteracted, 50);
+  const context = useMemo(() => ({
+    loading,
+    pinned,
+    pinAriaLabel,
+    isItemInteracted,
+    setIsItemInteracted
+  }), [loading, pinned, pinAriaLabel, isItemInteracted]);
+  let layoutStyle;
+  switch (layout) {
+    case 'list':
+      layoutStyle = styles.largeListItem;
+      break;
+    case 'grid':
+      layoutStyle = styles.gridListItem;
+      break;
+    case 'small-list':
+      layoutStyle = styles.smallListItem;
+  }
+  return jsx(Item, {
+    ...rest,
+    ref: forwardedRef,
+    className: clsx(layoutStyle, {
+      [styles.loading]: loading
+    }, {
+      [styles.isItemInteracted]: isItemInteracted || debouncedIsItemInteracted
+    }, className),
+    textValue: textValue,
+    children: jsx(BaseGridListItemContext.Provider, {
+      value: context,
+      children: children
+    })
+  });
+});
+
+export { BaseGridListItem, useBaseGridListItemContext };

package/lib-esm/util-components/base-grid-list-item/base-grid-list-item.module.js

@@ -0,0 +1,4 @@
+import '../../index.css';
+var styles = {"smallList":"base-grid-list-item-module_smallList__8lWoC","smallListItem":"base-grid-list-item-module_smallListItem__MAhGw","loading":"base-grid-list-item-module_loading__u4wHh","thumbnail":"base-grid-list-item-module_thumbnail__hzNRu","header":"base-grid-list-item-module_header__8Cd7A","subtitle":"base-grid-list-item-module_subtitle__NKkK0","largeList":"base-grid-list-item-module_largeList__RTycT","largeListItem":"base-grid-list-item-module_largeListItem__ikeWj","actions":"base-grid-list-item-module_actions__tlu5J","selection":"base-grid-list-item-module_selection__hs7YE","fade":"base-grid-list-item-module_fade__iMTDj","inner":"base-grid-list-item-module_inner__rLb2D","actionsCheckboxWrapper":"base-grid-list-item-module_actionsCheckboxWrapper__51sTV","description":"base-grid-list-item-module_description__peDK8","snippet":"base-grid-list-item-module_snippet__DyZBh","snippetContent":"base-grid-list-item-module_snippetContent__98AuK","react-aria-DropIndicator":"base-grid-list-item-module_react-aria-DropIndicator__KtS-o","gridList":"base-grid-list-item-module_gridList__9TIux","gridListItem":"base-grid-list-item-module_gridListItem__CIHkV","statusPin":"base-grid-list-item-module_statusPin__UPlTb","isItemInteracted":"base-grid-list-item-module_isItemInteracted__FbAYE","tooltipContent":"base-grid-list-item-module_tooltipContent__8oeUV","tooltipArrow":"base-grid-list-item-module_tooltipArrow__xIXK-"};
+
+export { styles as default };

package/lib-esm/util-components/base-grid-list-item/base-grid-list.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { type BaseGridListProps } from './types';
+export declare const useBaseGridListContext: () => BaseGridListProps;
+export declare const BaseGridList: import("react").ForwardRefExoticComponent<import("react-aria-components").GridListProps<BaseGridListProps> & {
+    layout: "grid" | "list" | "small-list";
+} & import("react").RefAttributes<HTMLDivElement>>;

package/lib-esm/util-components/base-grid-list-item/base-grid-list.js

@@ -0,0 +1,62 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import noop from 'lodash/noop';
+import { forwardRef, useMemo, createContext, useContext } from 'react';
+import { GridList } from 'react-aria-components';
+import { isCtrlKeyPressed } from '../../utils/keyboardUtils.js';
+import styles from './base-grid-list-item.module.js';
+
+const BaseGridListContext = /*#__PURE__*/createContext({
+  layout: 'grid'
+});
+const useBaseGridListContext = () => {
+  return useContext(BaseGridListContext);
+};
+// We don't want to propagate normal keys since they will be used for typeahead.
+// DSYS-706
+const SPECIAL_KEYS = new Set(['ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight', 'Home', 'End', 'PageDown', 'PageUp', 'a', 'Tab', 'Escape', ' ', 'Enter']);
+const stopPropagationForNonSpecialKeys = e => {
+  if (!SPECIAL_KEYS.has(e.key) || e.key === 'a' && !isCtrlKeyPressed(e)) {
+    e.stopPropagation();
+  }
+};
+const BaseGridList = /*#__PURE__*/forwardRef(function BaseGridList(props, forwardedRef) {
+  const {
+    children,
+    onAction,
+    className,
+    layout,
+    ...rest
+  } = props;
+  const context = useMemo(() => ({
+    selectionMode: rest.selectionMode,
+    selectionBehavior: rest.selectionBehavior,
+    layout
+  }), [rest.selectionMode, rest.selectionBehavior, layout]);
+  let layoutStyle;
+  switch (layout) {
+    case 'list':
+      layoutStyle = styles.largeList;
+      break;
+    case 'grid':
+      layoutStyle = styles.gridList;
+      break;
+    case 'small-list':
+      layoutStyle = styles.smallList;
+  }
+  return jsx("div", {
+    onKeyDownCapture: stopPropagationForNonSpecialKeys,
+    children: jsx(BaseGridListContext.Provider, {
+      value: context,
+      children: jsx(GridList, {
+        ...rest,
+        ref: forwardedRef,
+        className: clsx(layoutStyle, className),
+        onAction: onAction || noop,
+        children: children
+      })
+    })
+  });
+});
+
+export { BaseGridList, useBaseGridListContext };

package/lib-esm/util-components/base-grid-list-item/index.d.ts

@@ -0,0 +1,41 @@
+/// <reference types="react" />
+/**
+ * Base Grid List can be used for showcasing various types of files in Box.
+ *
+ * It's based on GridList from react-aria-components with exposed subcomponents for easier styling.
+ */
+export declare const BaseGridList: import("react").ForwardRefExoticComponent<import("react-aria-components").GridListProps<import("./types").BaseGridListProps> & {
+    layout: "grid" | "list" | "small-list";
+} & import("react").RefAttributes<HTMLDivElement>> & {
+    /**
+     * An individual item in the list.
+     */
+    Item: import("react").ForwardRefExoticComponent<import("react-aria-components").ItemProps<object> & Omit<import("./types").BaseGridListItemContextType, "isItemInteracted" | "setIsItemInteracted"> & import("react").RefAttributes<HTMLDivElement>>;
+    /**
+     * Styled wrapper over and image or icon.
+     */
+    Thumbnail: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+        ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+    }, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    /**
+     * Styled wrapper over the title of an item and potential Status components.
+     */
+    Header: import("react").ForwardRefExoticComponent<Omit<import("./types").BaseGridListHeaderProps, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+    /**
+     * Styled wrapper over the subtitle of an item.
+     */
+    Subtitle: import("react").ForwardRefExoticComponent<Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+        ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
+    }, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
+    /**
+     * Styled wrapper over the actions of an item.
+     * If `selectionMode` is passed, a checkbox will be rendered as well.
+     */
+    Actions: import("react").ForwardRefExoticComponent<Omit<import("./types").BaseGridListActionsProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    /**
+     * Styled wrapper over an icon button.
+     * Ensures proper behaviour when used in a grid list item.
+     */
+    ActionIconButton: import("react").ForwardRefExoticComponent<Omit<import("../../..").IconButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+};
+export type { BaseGridListActionIconButtonProps, BaseGridListActionsProps, BaseGridListDescriptionProps, BaseGridListHeaderProps, BaseGridListItemProps, BaseGridListProps, BaseGridListSubtitleProps, BaseGridListThumbnailProps, } from './types';

package/lib-esm/util-components/base-grid-list-item/index.js

@@ -0,0 +1,42 @@
+import { BaseGridList as BaseGridList$1 } from './base-grid-list.js';
+import { BaseGridListItem } from './base-grid-list-item.js';
+import { BaseGridListActions, BaseGridListActionIconButton } from './base-grid-list-item-actions.js';
+import { BaseGridListHeader } from './base-grid-list-item-header.js';
+import { BaseGridListSubtitle } from './base-grid-list-item-subtitle.js';
+import { BaseGridListThumbnail } from './base-grid-list-item-thumbnail.js';
+
+/**
+ * Base Grid List can be used for showcasing various types of files in Box.
+ *
+ * It's based on GridList from react-aria-components with exposed subcomponents for easier styling.
+ */
+const BaseGridList = Object.assign(BaseGridList$1, {
+  /**
+   * An individual item in the list.
+   */
+  Item: BaseGridListItem,
+  /**
+   * Styled wrapper over and image or icon.
+   */
+  Thumbnail: BaseGridListThumbnail,
+  /**
+   * Styled wrapper over the title of an item and potential Status components.
+   */
+  Header: BaseGridListHeader,
+  /**
+   * Styled wrapper over the subtitle of an item.
+   */
+  Subtitle: BaseGridListSubtitle,
+  /**
+   * Styled wrapper over the actions of an item.
+   * If `selectionMode` is passed, a checkbox will be rendered as well.
+   */
+  Actions: BaseGridListActions,
+  /**
+   * Styled wrapper over an icon button.
+   * Ensures proper behaviour when used in a grid list item.
+   */
+  ActionIconButton: BaseGridListActionIconButton
+});
+
+export { BaseGridList };

package/lib-esm/util-components/base-grid-list-item/types.d.ts

@@ -0,0 +1,32 @@
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
+import { type GridListProps as RAGridListProps, type ItemProps } from 'react-aria-components';
+import { type IconButtonProps } from '../../primitives/icon-button';
+import { type Modify } from '../../types/modify';
+type BaseGridListLayoutProp = {
+    layout: 'grid' | 'list' | 'small-list';
+};
+export declare enum ListLayout {
+    GRID = "Grid List",
+    LARGE_LIST = "Large List",
+    SMALL_LIST = "Small List"
+}
+export type BaseGridListHeaderProps = ComponentPropsWithRef<'span'> & {
+    textValue?: string;
+};
+export type BaseGridListThumbnailProps = ComponentPropsWithRef<'div'>;
+export type BaseGridListSubtitleProps = ComponentPropsWithRef<'span'>;
+export type BaseGridListDescriptionProps = ComponentPropsWithRef<'p'>;
+export type BaseGridListActionsProps = Modify<ComponentPropsWithRef<'div'>, {
+    children: ReactNode | ((setIsInteracted: (open: boolean) => void) => ReactNode);
+}>;
+export type BaseGridListActionIconButtonProps = IconButtonProps;
+export type BaseGridListProps = RAGridListProps<BaseGridListProps> & BaseGridListLayoutProp;
+export type BaseGridListItemContextType = {
+    loading?: boolean;
+    pinned?: boolean;
+    pinAriaLabel?: string;
+    isItemInteracted: boolean;
+    setIsItemInteracted: (isInteracted: boolean) => void;
+};
+export type BaseGridListItemProps = ItemProps & Omit<BaseGridListItemContextType, 'isItemInteracted' | 'setIsItemInteracted'>;
+export {};

package/lib-esm/util-components/base-grid-list-item/utils/rac-button.d.ts

@@ -0,0 +1,12 @@
+import { type ComponentProps } from 'react';
+import { type ButtonProps } from 'react-aria-components';
+/**
+ * RAC Button customized based on https://react-spectrum.adobe.com/react-aria/Button.html#hooks
+ *
+ * Extras:
+ *  - Merge passed `onPointerDown` with RAC's pointerDown. Order is important. This is for handling the component being wrapped with Dropdown.Trigger,
+ *    while still responding to clicks.
+ */
+export declare const RACButton: import("react").ForwardRefExoticComponent<ButtonProps & {
+    onPointerDown: ComponentProps<'button'>['onPointerDown'];
+} & import("react").RefAttributes<HTMLButtonElement>>;

package/lib-esm/util-components/base-grid-list-item/utils/rac-button.js

@@ -0,0 +1,34 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { useButton, mergeProps } from 'react-aria';
+import { useContextProps, ButtonContext } from 'react-aria-components';
+
+/**
+ * RAC Button customized based on https://react-spectrum.adobe.com/react-aria/Button.html#hooks
+ *
+ * Extras:
+ *  - Merge passed `onPointerDown` with RAC's pointerDown. Order is important. This is for handling the component being wrapped with Dropdown.Trigger,
+ *    while still responding to clicks.
+ */
+const RACButton = /*#__PURE__*/forwardRef((props, ref) => {
+  // Merge the local props and ref with the ones provided via context.
+  [props, ref] = useContextProps(props, ref, ButtonContext);
+  const {
+    buttonProps
+  } = useButton(props, ref);
+  const pointerDownProps = mergeProps({
+    onPointerDown: props.onPointerDown
+  }, {
+    onPointerDown: buttonProps.onPointerDown
+  });
+  return jsx("button", {
+    ...buttonProps,
+    ...pointerDownProps,
+    ref: ref,
+    className: props.className,
+    type: "button",
+    children: props.children
+  });
+});
+
+export { RACButton };

package/lib-esm/util-components/base-grid-list-item/utils/rac-tooltip.d.ts

@@ -0,0 +1,7 @@
+import { type ReactNode } from 'react';
+import { type TooltipProps } from 'react-aria-components';
+interface RATooltipProps extends Omit<TooltipProps, 'children'> {
+    children: ReactNode;
+}
+export declare const RACTooltip: ({ children, ...props }: RATooltipProps) => JSX.Element;
+export {};

package/lib-esm/util-components/base-grid-list-item/utils/rac-tooltip.js

@@ -0,0 +1,30 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { Tooltip, OverlayArrow } from 'react-aria-components';
+import styles from '../base-grid-list-item.module.js';
+
+const RACTooltip = ({
+  children,
+  ...props
+}) => {
+  return jsxs(Tooltip, {
+    className: clsx(styles.tooltipContent),
+    offset: 3,
+    placement: "bottom",
+    ...props,
+    children: [jsx(OverlayArrow, {
+      className: styles.tooltipArrow,
+      children: jsx("svg", {
+        fill: "none",
+        viewBox: "0 0 16 8",
+        xmlns: "http://www.w3.org/2000/svg",
+        children: jsx("path", {
+          d: "m8.5 0-8 8h16l-8-8Z",
+          fill: "var(--gray-80)"
+        })
+      })
+    }), children]
+  });
+};
+
+export { RACTooltip };

package/lib-esm/util-components/focus-trap/focus-trap.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { type FocusTrapProps } from './types';
+export declare const FocusTrap: ({ containerRef, children, customInitialFocus }: FocusTrapProps) => JSX.Element;

package/lib-esm/util-components/focus-trap/index.d.ts

@@ -0,0 +1 @@
+export { FocusTrap } from './focus-trap';

package/lib-esm/util-components/focus-trap/types.d.ts

@@ -0,0 +1,8 @@
+import { type MutableRefObject } from 'react';
+export type FocusTrapProps = {
+    children: React.ReactNode;
+    /** Reference to the container element */
+    containerRef: MutableRefObject<HTMLDivElement | null>;
+    /** Function to set the focus to a desired element when the focus trap is activated */
+    customInitialFocus?: (tabbableEls: (HTMLElement | SVGElement)[]) => void;
+};

package/lib-esm/util-components/interactive-icon/index.d.ts

@@ -0,0 +1 @@
+export * from './interactive-icon';

package/lib-esm/util-components/interactive-icon/interactive-icon.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { type InteractiveIconProps } from './types';
+export declare const InteractiveIcon: import("react").ForwardRefExoticComponent<InteractiveIconProps & import("react").RefAttributes<HTMLButtonElement>>;
+export default InteractiveIcon;

package/lib-esm/util-components/interactive-icon/interactive-icon.js

@@ -0,0 +1,24 @@
+import { jsx } from 'react/jsx-runtime';
+import { BoxBlue100 } from '@box/blueprint-web-assets/tokens/tokens';
+import { forwardRef, createElement } from 'react';
+import styles from './interactive-icon.module.js';
+
+const InteractiveIcon = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    icon,
+    ...rest
+  } = props;
+  return jsx("button", {
+    ...rest,
+    ref: forwardedRef,
+    className: styles.interactiveIcon,
+    type: "button",
+    children: /*#__PURE__*/createElement(icon, {
+      color: BoxBlue100,
+      role: 'presentation'
+    })
+  });
+});
+InteractiveIcon.displayName = 'InteractiveIcon';
+
+export { InteractiveIcon, InteractiveIcon as default };

package/lib-esm/util-components/interactive-icon/interactive-icon.module.js

@@ -0,0 +1,4 @@
+import '../../index.css';
+var styles = {"interactiveIcon":"interactive-icon-module_interactiveIcon__5Qesf"};
+
+export { styles as default };

package/lib-esm/util-components/interactive-icon/types.d.ts

@@ -0,0 +1,9 @@
+import { type FunctionComponent, type HTMLAttributes, type MouseEventHandler, type PropsWithChildren, type SVGProps } from 'react';
+export interface InteractiveIconProps extends HTMLAttributes<HTMLButtonElement> {
+    /** aria-label for the badge button */
+    ['aria-label']: string;
+    /** Icon that will be rendered */
+    icon: FunctionComponent<PropsWithChildren<SVGProps<SVGSVGElement>>>;
+    /** The onClick event occurs when the user clicks on the icon */
+    onClick?: MouseEventHandler<HTMLButtonElement>;
+}

package/lib-esm/util-components/legend/index.d.ts

@@ -0,0 +1 @@
+export * from './legend';

package/lib-esm/util-components/legend/legend.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { type LegendProps } from './types';
+export declare function Legend(props: LegendProps): JSX.Element;
+export default Legend;

package/lib-esm/util-components/legend/legend.js

@@ -0,0 +1,31 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { clsx } from 'clsx';
+import { TextWithInfoBadge } from '../text-with-info-badge/text-with-info-badge.js';
+import styles from './legend.module.js';
+
+function Legend(props) {
+  const {
+    header,
+    infoText,
+    infoBadgeAriaLabel,
+    children,
+    gap = 'default',
+    className,
+    ...rest
+  } = props;
+  return jsxs("fieldset", {
+    ...rest,
+    className: clsx(styles.fieldset, styles[gap], className),
+    children: [jsx("legend", {
+      className: styles.legend,
+      children: jsx(TextWithInfoBadge, {
+        className: styles.legendText,
+        infoBadgeAriaLabel: infoBadgeAriaLabel,
+        infoText: infoText,
+        children: header
+      })
+    }), children]
+  });
+}
+
+export { Legend, Legend as default };

package/lib-esm/util-components/legend/legend.module.js

@@ -0,0 +1,4 @@
+import '../../index.css';
+var styles = {"legendText":"legend-module_legendText__ZG9zM","fieldset":"legend-module_fieldset__un9cX","legend":"legend-module_legend__3ZLQx","wide":"legend-module_wide__xdpFM"};
+
+export { styles as default };

package/lib-esm/util-components/legend/types.d.ts

@@ -0,0 +1,18 @@
+import { type HTMLAttributes, type ReactNode } from 'react';
+import { type RequireAllOrNone } from 'type-fest';
+import { type StyledText } from '../../utils/commonTypes';
+type Info = {
+    /** Additional text to aid in use. It will appear inside info icon tooltip. */
+    infoText?: StyledText;
+    /** aria-label for the label badge button */
+    infoBadgeAriaLabel?: string;
+};
+export type LegendProps = {
+    /** The header for legend */
+    header: string;
+    /** One or more children */
+    children: ReactNode;
+    /** Gap between children */
+    gap?: 'default' | 'wide';
+} & RequireAllOrNone<Info, keyof Info> & HTMLAttributes<HTMLFieldSetElement>;
+export {};

package/lib-esm/util-components/list-checkbox/index.d.ts

@@ -0,0 +1 @@
+export { ListCheckbox } from './list-checkbox';

package/lib-esm/util-components/list-checkbox/list-checkbox.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { type CheckboxProps } from 'react-aria-components';
+/**
+ * Based on React Aria Components `Checkbox`
+ *
+ * Used in Collection RAC components like GridList and Table.
+ *
+ * @see https://react-spectrum.adobe.com/react-aria/Checkbox.html
+ */
+export declare const ListCheckbox: import("react").ForwardRefExoticComponent<CheckboxProps & import("react").RefAttributes<HTMLInputElement>>;

package/lib-esm/util-components/list-checkbox/list-checkbox.js

@@ -0,0 +1,36 @@
+import { jsx } from 'react/jsx-runtime';
+import { Checkmark } from '@box/blueprint-web-assets/icons/Fill';
+import { IconIconOnDark, Size3 } from '@box/blueprint-web-assets/tokens/tokens';
+import clsx from 'clsx';
+import { forwardRef } from 'react';
+import { Checkbox } from 'react-aria-components';
+import styles from './list-checkbox.module.js';
+
+/**
+ * Based on React Aria Components `Checkbox`
+ *
+ * Used in Collection RAC components like GridList and Table.
+ *
+ * @see https://react-spectrum.adobe.com/react-aria/Checkbox.html
+ */
+const ListCheckbox = /*#__PURE__*/forwardRef((props, ref) => {
+  return jsx("div", {
+    className: clsx(styles.selection, props.className),
+    children: jsx(Checkbox, {
+      ...props,
+      ref: ref,
+      className: styles.checkbox,
+      slot: "selection",
+      children: ({
+        isSelected
+      }) => isSelected && jsx(Checkmark, {
+        "aria-hidden": "true",
+        color: IconIconOnDark,
+        height: Size3,
+        width: Size3
+      })
+    })
+  });
+});
+
+export { ListCheckbox };

package/lib-esm/util-components/list-checkbox/list-checkbox.module.js

@@ -0,0 +1,4 @@
+import '../../index.css';
+var styles = {"selection":"list-checkbox-module_selection__lvYI0","checkbox":"list-checkbox-module_checkbox__ju9Tk"};
+
+export { styles as default };

package/lib-esm/util-components/menu-item-sections/menu-item-sections.d.ts

@@ -0,0 +1,19 @@
+/// <reference types="react" />
+export interface MenuItemSideContentProps extends React.ComponentProps<'div'> {
+    /** The content to display in the section. */
+    children: React.ReactNode;
+}
+export interface MenuItemMainContentProps extends Omit<React.ComponentProps<'div'>, 'children'> {
+    /** The label for the checkbox button. */
+    label: string;
+    /** Additional text to aid in use. */
+    description?: string;
+}
+/**
+ * Container for side content of menu item.
+ */
+export declare const MenuItemSideContent: ({ children, className, ...rest }: MenuItemSideContentProps) => JSX.Element;
+/**
+ * Text contents of an Item.
+ */
+export declare const MenuItemMainContent: ({ className, label, description, ...rest }: MenuItemMainContentProps) => JSX.Element;

package/lib-esm/util-components/menu-item-sections/menu-item-sections.js

@@ -0,0 +1,43 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import styles from './menu-item-sections.module.js';
+
+/**
+ * Container for side content of menu item.
+ */
+const MenuItemSideContent = ({
+  children,
+  className,
+  ...rest
+}) => {
+  return jsx("div", {
+    ...rest,
+    className: clsx(styles.menuItemSideContent, {
+      [styles.textOnLightSecondary]: typeof children === 'string'
+    }, className),
+    children: children
+  });
+};
+/**
+ * Text contents of an Item.
+ */
+const MenuItemMainContent = ({
+  className,
+  label,
+  description,
+  ...rest
+}) => jsxs("div", {
+  ...rest,
+  className: clsx(styles.menuItemMainContent, className),
+  children: [jsx("span", {
+    className: clsx(styles.label, {
+      [styles.bold]: Boolean(description)
+    }),
+    children: label
+  }), description ? jsx("span", {
+    className: styles.description,
+    children: description
+  }) : null]
+});
+
+export { MenuItemMainContent, MenuItemSideContent };