@box/blueprint-web 5.31.3

package/lib-esm/basics/button/button.d.ts

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+export declare const Button: 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 | string[] | undefined;
+    icon?: import("react").FunctionComponent<import("react").PropsWithChildren<import("react").SVGProps<SVGSVGElement>>> | 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 | string[] | undefined;
+    icon?: import("react").FunctionComponent<import("react").PropsWithChildren<import("react").SVGProps<SVGSVGElement>>> | undefined;
+}, "ref">) & import("react").RefAttributes<HTMLButtonElement>>;
+export default Button;

package/lib-esm/basics/button/button.js

@@ -0,0 +1,23 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { BaseButton } from '../../primitives/base-button/index.js';
+
+const Button = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    children,
+    icon,
+    ...rest
+  } = props;
+  return jsxs(BaseButton, {
+    ref: forwardedRef,
+    ...rest,
+    children: [children ? jsx(BaseButton.Label, {
+      children: children
+    }) : null, icon ? jsx(BaseButton.Icon, {
+      icon: icon
+    }) : null]
+  });
+});
+Button.displayName = 'Button';
+
+export { Button, Button as default };

package/lib-esm/basics/button/index.d.ts

@@ -0,0 +1,2 @@
+export { Button } from './button';
+export { type ButtonProps } from './types';

package/lib-esm/basics/button/types.d.ts

@@ -0,0 +1,8 @@
+import { type FunctionComponent, type PropsWithChildren, type SVGProps } from 'react';
+import { type BaseButtonProps } from '../../primitives/base-button';
+export type ButtonProps = BaseButtonProps & {
+    children?: string | string[];
+    /** Icon that will be placed after the children text.
+     * <b>Note:</b> When creating an icon-only button aria-label must also be provided. */
+    icon?: FunctionComponent<PropsWithChildren<SVGProps<SVGSVGElement>>>;
+};

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

@@ -0,0 +1,15 @@
+/// <reference types="react" />
+import * as Collapsible from '@radix-ui/react-collapsible';
+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>> & {
+    Slot: (props: {
+        name: CollapsibleSectionSlotName;
+        children: JSX.Element | null;
+    }) => JSX.Element | null;
+};
+export {};

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

@@ -0,0 +1,62 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { PointerChevronDown, PointerChevronUp } from '@box/blueprint-web-assets/icons/Fill';
+import * as Collapsible from '@radix-ui/react-collapsible';
+import clsx from 'clsx';
+import { forwardRef, useState, useEffect, useCallback } from 'react';
+import { IconButton } from '../../primitives/icon-button/icon-button.js';
+import { Slot } from '../../primitives/slot.js';
+import { useNamedSlots } from '../../utils/useNamedSlots.hook.js';
+import styles from './collapsible-section.module.js';
+
+const CollapsibleSectionImpl = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    className,
+    open,
+    closeSectionButtonAriaLabel,
+    openSectionButtonAriaLabel,
+    onOpenChange,
+    children,
+    ...rest
+  } = props;
+  const [collapsibleSectionOpen, setCollapsibleSectionOpen] = useState(open);
+  const [headerSlot, contentSlot] = useNamedSlots(children, ['header', 'content']);
+  useEffect(() => {
+    setCollapsibleSectionOpen(open);
+  }, [open]);
+  const onCollapsibleOpenChanged = useCallback(isOpen => {
+    setCollapsibleSectionOpen(isOpen);
+    onOpenChange?.(isOpen);
+  }, [onOpenChange]);
+  return jsxs(Collapsible.Root, {
+    ...rest,
+    ref: forwardedRef,
+    className: clsx(styles.collapsibleSection, className),
+    onOpenChange: onCollapsibleOpenChanged,
+    open: collapsibleSectionOpen,
+    children: [jsx(Collapsible.Trigger, {
+      asChild: true,
+      children: jsxs("div", {
+        className: styles.collapsibleSectionHeader,
+        role: "button",
+        children: [headerSlot?.props.children, jsx(IconButton, {
+          "aria-label": collapsibleSectionOpen ? closeSectionButtonAriaLabel : openSectionButtonAriaLabel,
+          className: styles.collapsibleSectionHeaderArrow,
+          icon: collapsibleSectionOpen ? PointerChevronDown : PointerChevronUp,
+          size: "x-small",
+          type: "button"
+        })]
+      })
+    }), jsx(Collapsible.Content, {
+      className: styles.collapsibleSectionContent,
+      children: jsx("div", {
+        className: styles.collapsibleSectionBody,
+        children: contentSlot?.props.children
+      })
+    })]
+  });
+});
+const CollapsibleSection = Object.assign(CollapsibleSectionImpl, {
+  Slot: Slot
+});
+
+export { CollapsibleSection };

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

@@ -0,0 +1,4 @@
+import '../../index.css';
+var styles = {"collapsibleSection":"collapsible-section-module_collapsibleSection__pClaL","collapsibleSectionHeader":"collapsible-section-module_collapsibleSectionHeader__ydzjv","collapsibleSectionHeaderArrow":"collapsible-section-module_collapsibleSectionHeaderArrow__X75G0","collapsibleSectionContent":"collapsible-section-module_collapsibleSectionContent__WTRNq","slideDown":"collapsible-section-module_slideDown__MI-4I","slideUp":"collapsible-section-module_slideUp__UCv4C","collapsibleSectionBody":"collapsible-section-module_collapsibleSectionBody__UvdKa"};
+
+export { styles as default };

package/lib-esm/basics/collapsible/index.d.ts

@@ -0,0 +1,2 @@
+export { CollapsibleSection } from './collapsible-section';
+export type { CollapsibleSectionProps } from './types';

package/lib-esm/basics/collapsible/types.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { type CollapsibleProps as RadixCollapsibleSectionProps } from '@radix-ui/react-collapsible';
+export type CollapsibleSectionProps = RadixCollapsibleSectionProps & React.ComponentPropsWithRef<'div'> & {
+    /**
+     * Aria label for button opening CollapsibleSection
+     */
+    openSectionButtonAriaLabel: string;
+    /**
+     * Aria label for button closing CollapsibleSection
+     */
+    closeSectionButtonAriaLabel: string;
+};

package/lib-esm/basics/date-picker/date-picker.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { type DateValue } from 'react-aria-components';
+export declare const DatePicker: import("react").ForwardRefExoticComponent<Omit<import("./types").DatePickerPropsBase, "onChange"> & {
+    onChange: (value: DateValue | null) => void;
+} & import("../../primitives/calendar/types").CalendarBase & import("react").RefAttributes<HTMLDivElement>>;

package/lib-esm/basics/date-picker/date-picker.js

@@ -0,0 +1,200 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Calendar, XMark } from '@box/blueprint-web-assets/icons/Fill';
+import { Gray65, Size4 } from '@box/blueprint-web-assets/tokens/tokens';
+import * as RadixPopover from '@radix-ui/react-popover';
+import clsx from 'clsx';
+import { forwardRef, useState, useRef, useCallback } from 'react';
+import { DatePicker as DatePicker$1, Label, Group, DateInput, DateSegment, Button } from 'react-aria-components';
+import { Calendar as Calendar$1 } from '../../primitives/calendar/calendar.js';
+import '@internationalized/date';
+import { IconButton } from '../../primitives/icon-button/icon-button.js';
+import { InlineError } from '../../primitives/inline-error/inline-error.js';
+import styles from './date-picker.module.js';
+
+const XMarkIcon = label => () => jsx(XMark, {
+  "aria-label": label,
+  color: Gray65,
+  height: Size4,
+  width: Size4
+});
+const DatePicker = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    className,
+    onChange,
+    value,
+    label,
+    openCalendarDropdownAriaLabel,
+    clearDatePickerAriaLabel,
+    error,
+    defaultOpen,
+    isDisabled,
+    calendarAriaLabel,
+    nextMonthAriaLabel,
+    previousMonthAriaLabel,
+    ...rest
+  } = props;
+  const [selectedDate, setSelectedDate] = useState(value);
+  const [isCalendarOpen, setIsCalendarOpen] = useState(defaultOpen || false);
+  const firstDateSegmentRef = useRef(null);
+  const calendarButtonRef = useRef(null);
+  const shouldFocusStayInInput = useRef(false);
+  const onDatePickerValueChanged = useCallback(newValue => {
+    setSelectedDate(newValue);
+    onChange?.(newValue);
+  }, [setSelectedDate, onChange]);
+  const onClearInputButtonClicked = useCallback(() => {
+    setSelectedDate(null);
+    onChange?.(null);
+    firstDateSegmentRef.current?.focus();
+  }, [onChange]);
+  const onCalendarDateSelect = useCallback(e => {
+    onDatePickerValueChanged(e);
+    setIsCalendarOpen(false);
+  }, [onDatePickerValueChanged]);
+  const onSubmitKeyPress = (key, callback) => {
+    const submitKeys = [' ', 'Enter'];
+    if (submitKeys.includes(key)) {
+      callback();
+    }
+  };
+  const onInputWhiteSpaceClick = useCallback(() => {
+    setIsCalendarOpen(true);
+    shouldFocusStayInInput.current = true;
+  }, []);
+  const onDateSegmentClick = useCallback(() => {
+    setIsCalendarOpen(true);
+    shouldFocusStayInInput.current = true;
+  }, []);
+  const onKeyUp = useCallback(({
+    key
+  }) => {
+    onSubmitKeyPress(key, () => {
+      onClearInputButtonClicked();
+      firstDateSegmentRef.current?.focus();
+    });
+  }, [onClearInputButtonClicked]);
+  const onKeyUpButton = useCallback(({
+    key
+  }) => {
+    onSubmitKeyPress(key, () => {
+      setIsCalendarOpen(!isCalendarOpen);
+      shouldFocusStayInInput.current = false;
+    });
+  }, [isCalendarOpen]);
+  const onPress = useCallback(() => {
+    shouldFocusStayInInput.current = false;
+  }, []);
+  const hasError = !!error && !isDisabled;
+  const calendarKey = `${selectedDate?.day}/${selectedDate?.month}/${selectedDate?.year}${selectedDate?.era}`;
+  const onOpenAutoFocus = useCallback(e => {
+    if (shouldFocusStayInInput.current) {
+      e.preventDefault();
+    }
+  }, []);
+  const onFocusOutside = useCallback(e => {
+    const wasCalendarButtonPressed = calendarButtonRef.current && calendarButtonRef.current.contains(e.target);
+    if (!wasCalendarButtonPressed) {
+      e.preventDefault();
+    }
+  }, []);
+  return jsx(RadixPopover.Root, {
+    onOpenChange: setIsCalendarOpen,
+    open: isCalendarOpen,
+    children: jsxs(DatePicker$1, {
+      ...rest,
+      ref: forwardedRef,
+      className: clsx(styles.datePicker, {
+        [styles.disabled]: isDisabled
+      }, className),
+      isDisabled: isDisabled,
+      onChange: onDatePickerValueChanged,
+      value: selectedDate,
+      children: [jsx(Label, {
+        className: clsx(styles.label, {
+          [styles.disabled]: isDisabled
+        }),
+        children: label
+      }), jsx(RadixPopover.Anchor, {
+        asChild: true,
+        children: jsxs(Group, {
+          className: clsx(styles.group),
+          onClick: onInputWhiteSpaceClick,
+          onMouseUp: onDateSegmentClick,
+          children: [jsx("div", {
+            className: clsx(styles.groupContainer, {
+              [styles.error]: hasError
+            }),
+            children: jsx(DateInput, {
+              className: clsx(styles.groupContainerInput),
+              children: segment => jsx(DateSegment, {
+                ref: node => {
+                  if (!firstDateSegmentRef.current) {
+                    firstDateSegmentRef.current = node;
+                  }
+                },
+                className: styles.groupContainerInputSegment,
+                segment: segment
+              })
+            })
+          }), selectedDate && jsx(IconButton, {
+            "aria-label": clearDatePickerAriaLabel,
+            className: clsx(styles.button, styles.clear),
+            disabled: isDisabled,
+            icon: XMarkIcon(clearDatePickerAriaLabel),
+            onClick: onClearInputButtonClicked,
+            // onKeyDown overwrites handler which manages arrow navigation within group
+            // use onKeyUp instead
+            onKeyUp: onKeyUp,
+            size: "x-small"
+          }), jsx(RadixPopover.Trigger, {
+            asChild: true,
+            children: jsx(Button, {
+              ref: calendarButtonRef,
+              "aria-label": openCalendarDropdownAriaLabel,
+              className: styles.button,
+              isDisabled: isDisabled,
+              // onKeyDown breaks arrow navigation within group
+              // onPress doesn't work with Popover.Trigger - onKeyUp is the only option
+              onKeyUp: onKeyUpButton,
+              onPress: onPress,
+              children: jsx(Calendar, {
+                "aria-label": openCalendarDropdownAriaLabel,
+                color: Gray65,
+                height: Size4,
+                width: Size4
+              })
+            })
+          })]
+        })
+      }), jsx(RadixPopover.Portal, {
+        children: jsx(RadixPopover.Content, {
+          align: "start",
+          className: styles.datePickerPopoverContent,
+          onFocusOutside: onFocusOutside,
+          onOpenAutoFocus: onOpenAutoFocus,
+          sideOffset: 8,
+          children: jsx(Calendar$1, {
+            autoFocus: !shouldFocusStayInInput.current,
+            calendarAriaLabel: calendarAriaLabel,
+            isDateUnavailable: rest.isDateUnavailable,
+            isDisabled: isDisabled,
+            isInvalid: rest.isInvalid,
+            isReadOnly: rest.isReadOnly,
+            maxValue: rest.maxValue,
+            minValue: rest.minValue,
+            nextMonthAriaLabel: nextMonthAriaLabel,
+            onChange: onCalendarDateSelect,
+            previousMonthAriaLabel: previousMonthAriaLabel,
+            value: selectedDate
+          }, calendarKey)
+        })
+      }), jsx(InlineError, {
+        className: styles.inlineError,
+        children: error
+      })]
+    })
+  });
+});
+DatePicker.displayName = 'DatePicker';
+
+export { DatePicker };

package/lib-esm/basics/date-picker/date-picker.module.js

@@ -0,0 +1,4 @@
+import '../../index.css';
+var styles = {"datePicker":"date-picker-module_datePicker__fIcNd","disabled":"date-picker-module_disabled__H4Kok","label":"date-picker-module_label__wAUcl","group":"date-picker-module_group__-g-aa","groupContainer":"date-picker-module_groupContainer__-JgF6","error":"date-picker-module_error__GK2m4","groupContainerInput":"date-picker-module_groupContainerInput__HbKsW","groupContainerInputSegment":"date-picker-module_groupContainerInputSegment__lf6no","button":"date-picker-module_button__e-L-7","clear":"date-picker-module_clear__OPop5","popover":"date-picker-module_popover__Ns5Dn","slide":"date-picker-module_slide__QDXUd","popoverContent":"date-picker-module_popoverContent__5IN0I","inlineError":"date-picker-module_inlineError__wUIDM"};
+
+export { styles as default };

package/lib-esm/basics/date-picker/index.d.ts

@@ -0,0 +1,2 @@
+export { DatePicker } from './date-picker';
+export { type DatePickerProps } from './types';

package/lib-esm/basics/date-picker/types.d.ts

@@ -0,0 +1,32 @@
+/// <reference types="react" />
+import { type DatePickerProps as RACDatePickerProps, type DateValue } from 'react-aria-components';
+import { type CalendarBase } from '../../primitives/calendar/types';
+import { type Modify } from '../../types/modify';
+export interface DatePickerPropsBase extends Omit<RACDatePickerProps<DateValue>, 'children'> {
+    /**
+     * Label displayed above date-picker input
+     */
+    label: string;
+    /**
+     * Aria label for button opening calendar in DatePicker
+     */
+    openCalendarDropdownAriaLabel: string;
+    /**
+     * Aria label for button clearing DatePicker input
+     */
+    clearDatePickerAriaLabel: string;
+    /**
+     * The content of the error message.
+     */
+    error?: React.ReactNode;
+    /**
+     * controls whether calendar dialog is initially opened
+     */
+    defaultOpen?: boolean;
+}
+export type DatePickerProps = Modify<DatePickerPropsBase, {
+    /**
+     * Callback invoked once DatePicker value changes
+     */
+    onChange: (value: DateValue | null) => void;
+}> & CalendarBase;

package/lib-esm/basics/grid-list-item/grid-list.d.ts

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

package/lib-esm/basics/grid-list-item/grid-list.js

@@ -0,0 +1,18 @@
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { BaseGridList } from '../../util-components/base-grid-list-item/base-grid-list.js';
+
+const GridList = /*#__PURE__*/forwardRef(function GridList(props, forwardedRef) {
+  const {
+    children,
+    ...rest
+  } = props;
+  return jsx(BaseGridList, {
+    ...rest,
+    ref: forwardedRef,
+    layout: "grid",
+    children: children
+  });
+});
+
+export { GridList };

package/lib-esm/basics/grid-list-item/index.d.ts

@@ -0,0 +1,74 @@
+/// <reference types="react" />
+/**
+ * Grid List can be used for showcasing various types of files in Box
+ *
+ * It consists of multiple subcomponents that allow you to compose it however you need.
+ *
+ * @example
+        <GridList>
+            <GridList.Item textValue="Title Placeholder">
+                <GridList.Thumbnail>
+                    <img/>
+                </GridList.Thumbnail>
+                
+                <GridList.Header>
+                    Title Placeholder
+                </GridList.Header>
+                
+                <GridList.Subtitle>
+                    Subtitle Placeholder
+                </GridList.Subtitle>
+                
+                <GridList.Actions>
+                    <GridList.ActionIconButton
+                        aria-label="comments inside item"
+                        icon={Ellipsis}
+                        onClick={e => console.log('first button clicked')}
+                    />
+                    <GridList.ActionIconButton
+                        aria-label="copy item link"
+                        icon={Link}
+                        onClick={e => console.log('link clicked')}
+                    />
+                    <GridList.ActionIconButton
+                        aria-label="share this item"
+                        icon={ArrowArchedRight}
+                        onClick={() => console.log('share clicked')}
+                    />
+                </GridList.Actions>
+            </GridList.Item>
+        </GridList>
+ */
+export declare const GridList: import("react").ForwardRefExoticComponent<import("./types").GridListProps & import("react").RefAttributes<HTMLDivElement>> & {
+    /**
+     * An individual item in the list.
+     */
+    Item: import("react").ForwardRefExoticComponent<import("react-aria-components").ItemProps<object> & Omit<import("../../util-components/base-grid-list-item/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("../../util-components/base-grid-list-item").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("../../util-components/base-grid-list-item").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 { GridListActionIconButtonProps, GridListActionsProps, GridListDescriptionProps, GridListHeaderProps, GridListItemProps, GridListProps, GridListSubtitleProps, GridListThumbnailProps, } from './types';

package/lib-esm/basics/grid-list-item/index.js

@@ -0,0 +1,73 @@
+import { BaseGridList } from '../../util-components/base-grid-list-item/index.js';
+import { GridList as GridList$1 } from './grid-list.js';
+
+/**
+ * Grid List can be used for showcasing various types of files in Box
+ *
+ * It consists of multiple subcomponents that allow you to compose it however you need.
+ *
+ * @example
+        <GridList>
+            <GridList.Item textValue="Title Placeholder">
+                <GridList.Thumbnail>
+                    <img/>
+                </GridList.Thumbnail>
+                
+                <GridList.Header>
+                    Title Placeholder
+                </GridList.Header>
+                
+                <GridList.Subtitle>
+                    Subtitle Placeholder
+                </GridList.Subtitle>
+                
+                <GridList.Actions>
+                    <GridList.ActionIconButton
+                        aria-label="comments inside item"
+                        icon={Ellipsis}
+                        onClick={e => console.log('first button clicked')}
+                    />
+                    <GridList.ActionIconButton
+                        aria-label="copy item link"
+                        icon={Link}
+                        onClick={e => console.log('link clicked')}
+                    />
+                    <GridList.ActionIconButton
+                        aria-label="share this item"
+                        icon={ArrowArchedRight}
+                        onClick={() => console.log('share clicked')}
+                    />
+                </GridList.Actions>
+            </GridList.Item>
+        </GridList>
+ */
+const GridList = Object.assign(GridList$1, {
+  /**
+   * An individual item in the list.
+   */
+  Item: BaseGridList.Item,
+  /**
+   * Styled wrapper over and image or icon.
+   */
+  Thumbnail: BaseGridList.Thumbnail,
+  /**
+   * Styled wrapper over the title of an item and potential Status components.
+   */
+  Header: BaseGridList.Header,
+  /**
+   * Styled wrapper over the subtitle of an item.
+   */
+  Subtitle: BaseGridList.Subtitle,
+  /**
+   * Styled wrapper over the actions of an item.
+   * If `selectionMode` is passed, a checkbox will be rendered as well.
+   */
+  Actions: BaseGridList.Actions,
+  /**
+   * Styled wrapper over an icon button.
+   * Ensures proper behaviour when used in a grid list item.
+   */
+  ActionIconButton: BaseGridList.ActionIconButton
+});
+
+export { GridList };

package/lib-esm/basics/grid-list-item/types.d.ts

@@ -0,0 +1,10 @@
+import { type RequireAllOrNone } from 'type-fest';
+import { type BaseGridListActionIconButtonProps, type BaseGridListActionsProps, type BaseGridListDescriptionProps, type BaseGridListHeaderProps, type BaseGridListItemProps, type BaseGridListProps, type BaseGridListSubtitleProps, type BaseGridListThumbnailProps } from '../../util-components/base-grid-list-item';
+export type GridListHeaderProps = BaseGridListHeaderProps;
+export type GridListThumbnailProps = BaseGridListThumbnailProps;
+export type GridListSubtitleProps = BaseGridListSubtitleProps;
+export type GridListDescriptionProps = BaseGridListDescriptionProps;
+export type GridListActionsProps = BaseGridListActionsProps;
+export type GridListActionIconButtonProps = BaseGridListActionIconButtonProps;
+export type GridListProps = Omit<BaseGridListProps, 'layout'>;
+export type GridListItemProps = RequireAllOrNone<BaseGridListItemProps, 'pinned' | 'pinAriaLabel'>;