@box/blueprint-web 5.31.3

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

@@ -0,0 +1,54 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Button } from '@ariakit/react';
+import clsx from 'clsx';
+import { forwardRef, createElement } from 'react';
+import { LoadingIndicator } from '../loading-indicator/loading-indicator.js';
+import { getButtonOptions } from '../utils/getButtonOptions.js';
+import styles from './text-button.module.js';
+
+const TextButton = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+    children,
+    loading,
+    loadingAriaLabel,
+    icon,
+    inheritFont,
+    className,
+    ...rest
+  } = getButtonOptions(props);
+  const iconsSize = `0.875${inheritFont ? 'em' : 'rem'}`;
+  return jsxs(Button, {
+    ...rest,
+    ref: ref,
+    className: clsx(styles.textButton, {
+      [styles.visuallyHidden]: loading,
+      [styles.isIconButton]: Boolean(icon),
+      [styles.isFontInherited]: inheritFont
+    }, className),
+    children: [jsx("span", {
+      className: clsx({
+        [styles.hideTextContent]: loading
+      }),
+      children: children
+    }), icon ? jsx("span", {
+      className: clsx(styles.icon, {
+        [styles.loading]: loading
+      }),
+      children: /*#__PURE__*/createElement(icon, {
+        width: iconsSize,
+        height: iconsSize,
+        role: 'presentation',
+        color: loading ? 'transparent' : 'currentColor'
+      })
+    }) : null, loading && loadingAriaLabel ? jsx(LoadingIndicator, {
+      "aria-label": loadingAriaLabel,
+      className: clsx({
+        [styles.scaleLoader]: inheritFont
+      }),
+      variant: "default"
+    }) : null]
+  });
+});
+TextButton.displayName = 'TextButton';
+
+export { TextButton, TextButton as default };

package/lib-esm/text-button/text-button.module.js

@@ -0,0 +1,4 @@
+import '../index.css';
+var styles = {"textButton":"text-button-module_textButton__blsjh","isFontInherited":"text-button-module_isFontInherited__u4x-A","isIconButton":"text-button-module_isIconButton__dVwfW","scaleLoader":"text-button-module_scaleLoader__0X9D9","icon":"text-button-module_icon__Q2v9Y","hideTextContent":"text-button-module_hideTextContent__Z1-NE","visuallyHidden":"text-button-module_visuallyHidden__4MN5j"};
+
+export { styles as default };

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

@@ -0,0 +1,25 @@
+import { type ButtonProps as AriakitButtonProps } from '@ariakit/react';
+import { type FunctionComponent, type PropsWithChildren, type SVGProps } from 'react';
+import { type RequireAllOrNone } from 'type-fest';
+type Loading = {
+    /** Whether the button is loading. */
+    loading?: boolean;
+    /** The aria-label for the loading indicator. */
+    loadingAriaLabel?: string;
+};
+export interface TextButtonBase extends AriakitButtonProps {
+    /** Text content to display in the button. */
+    children: string | string[];
+    /** Icon that will be placed after the children text. */
+    icon?: FunctionComponent<PropsWithChildren<SVGProps<SVGSVGElement>>>;
+    /**
+     * Controls whether text inside the button inherits font properties from parent or uses default style.
+     *
+     * Useful when Button is within the block of the text, to apply the same style for whole content.
+     *
+     * When property is falsy, button uses default style.
+     * */
+    inheritFont?: boolean;
+}
+export type TextButtonProps = TextButtonBase & RequireAllOrNone<Loading, keyof Loading>;
+export {};

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

@@ -0,0 +1,2 @@
+export { Tooltip, TooltipProvider } from './tooltip';
+export { type TooltipProps, type TooltipProviderProps } from './types';

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

@@ -0,0 +1,16 @@
+import React from 'react';
+import { type TooltipProps, type TooltipProviderProps, type TooltipTriggerProps } from './types';
+/**
+ * A component used to wrap any other component, giving it a Tooltip on hover.
+ *
+ * * [Radix-UI link](https://www.radix-ui.com/docs/primitives/components/tooltip)
+ *
+ * **IMPORTANT (1)**: Must be placed inside a single <b>TooltipProvider</b> component provided by the app, see [issue on github](https://github.com/radix-ui/primitives/issues/1712) and [radix docs](https://www.radix-ui.com/docs/primitives/components/tooltip#provider).
+ *
+ * **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 Tooltip: (props: TooltipProps) => JSX.Element;
+export declare const ContainerContext: React.Context<HTMLElement | null | undefined>;
+export declare const TooltipProvider: (props: TooltipProviderProps) => JSX.Element;
+export declare const TooltipTrigger: React.ForwardRefExoticComponent<TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>>;

package/lib-esm/tooltip/tooltip.js

@@ -0,0 +1,128 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import * as RadixTooltip from '@radix-ui/react-tooltip';
+import clsx from 'clsx';
+import React__default, { useContext } from 'react';
+import { useForkRef } from '../utils/useForkRef.js';
+import { useIsTriggerInteractive } from '../utils/useIsTriggerInteractive.js';
+import styles from './tooltip.module.js';
+
+/**
+ * A component used to wrap any other component, giving it a Tooltip on hover.
+ *
+ * * [Radix-UI link](https://www.radix-ui.com/docs/primitives/components/tooltip)
+ *
+ * **IMPORTANT (1)**: Must be placed inside a single <b>TooltipProvider</b> component provided by the app, see [issue on github](https://github.com/radix-ui/primitives/issues/1712) and [radix docs](https://www.radix-ui.com/docs/primitives/components/tooltip#provider).
+ *
+ * **IMPORTANT (2)**: Must wrap interactive component/element (such as: HTMLInputElement, HTMLAnchorElement,  HTMLTextAreaElement, etc. [list of focusable elements](https://allyjs.io/data-tables/focusable.html))
+ *
+ */
+const Tooltip = props => {
+  const {
+    children,
+    content,
+    onOpenChange,
+    open,
+    defaultOpen,
+    forceMount,
+    ...contentProps
+  } = props;
+  const container = useContext(ContainerContext);
+  return jsxs(RadixTooltip.Root, {
+    defaultOpen: defaultOpen,
+    onOpenChange: onOpenChange,
+    open: open,
+    children: [jsx(TooltipTrigger, {
+      open: open,
+      children: children
+    }), jsx(RadixTooltip.Portal, {
+      container: container,
+      forceMount: forceMount,
+      children: jsx(Content, {
+        ...contentProps,
+        children: content
+      })
+    })]
+  });
+};
+const ContainerContext = /*#__PURE__*/React__default.createContext(null);
+const TooltipProvider = props => {
+  const {
+    children,
+    container,
+    disableHoverableContent
+  } = props;
+  return jsx(ContainerContext.Provider, {
+    value: container,
+    children: jsx(RadixTooltip.Provider, {
+      delayDuration: 300,
+      disableHoverableContent: disableHoverableContent,
+      children: children
+    })
+  });
+};
+const Trigger = /*#__PURE__*/React__default.forwardRef(function Trigger(props, ref) {
+  return jsx(RadixTooltip.Trigger, {
+    ref: ref,
+    asChild: true,
+    children: props.children
+  });
+});
+/**
+ *  Trigger component with interactivity check.
+ *  Encapsulation in separate component is a workaround which allows to render hooks
+ *  responsible for check only when it's specifically needed, without breaking rule of hooks
+ *  by calling them conditionally.
+ */
+const TriggerWithInteractivityCheck = /*#__PURE__*/React__default.forwardRef(function TriggerWithInteractivityCheck(props, ref) {
+  const triggerRef = useIsTriggerInteractive();
+  return jsx(Trigger, {
+    ref: useForkRef(triggerRef, ref),
+    children: props.children
+  });
+});
+const TooltipTrigger = /*#__PURE__*/React__default.forwardRef(({
+  children,
+  open
+}, ref) => {
+  // in dev environment, if Tooltip open state is not explicitly controlled by user, check if it's used with interactive element
+  if (process.env.NODE_ENV !== 'production' && open === undefined) {
+    return jsx(TriggerWithInteractivityCheck, {
+      ref: ref,
+      children: children
+    });
+  }
+  return jsx(Trigger, {
+    ref: ref,
+    children: children
+  });
+});
+const Arrow = /*#__PURE__*/React__default.forwardRef(function Arrow({
+  variant
+}, ref) {
+  return jsx("div", {
+    ref: ref,
+    className: clsx(styles.arrow, styles[variant])
+  });
+});
+const Content = /*#__PURE__*/React__default.forwardRef(function Content(props, ref) {
+  const {
+    children,
+    variant = 'standard',
+    className,
+    ...rest
+  } = props;
+  return jsxs(RadixTooltip.Content, {
+    ...rest,
+    ref: ref,
+    className: clsx(styles.content, styles[variant], className),
+    sideOffset: 3,
+    children: [children, jsx(RadixTooltip.Arrow, {
+      asChild: true,
+      children: jsx(Arrow, {
+        variant: variant
+      })
+    })]
+  });
+});
+
+export { ContainerContext, Tooltip, TooltipProvider, TooltipTrigger };

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

@@ -0,0 +1,4 @@
+import '../index.css';
+var styles = {"content":"tooltip-module_content__P0LlT","standard":"tooltip-module_standard__JMlLn","error":"tooltip-module_error__uLcZa","arrow":"tooltip-module_arrow__zubRP"};
+
+export { styles as default };

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

@@ -0,0 +1,41 @@
+import type * as RadixTooltip from '@radix-ui/react-tooltip';
+import type React from 'react';
+export type TooltipVariant = 'standard' | 'error';
+export interface TooltipContentProps extends RadixTooltip.TooltipContentProps {
+    variant?: TooltipVariant;
+}
+export interface PropsOnlyChildren {
+    children?: React.ReactNode;
+}
+export interface TooltipProps extends Omit<React.ComponentProps<typeof RadixTooltip.TooltipContent>, 'content'> {
+    /** The anchor for the tooltip. */
+    children: React.ReactNode;
+    /** The content of the tooltip. */
+    content: React.ReactNode;
+    /** The visual style of the button. */
+    variant?: TooltipVariant;
+    /** Event handler called when the open state of the tooltip changes. */
+    onOpenChange?: RadixTooltip.TooltipProps['onOpenChange'];
+    /** The controlled open state of the tooltip. Must be used in conjunction with onOpenChange. */
+    open?: RadixTooltip.TooltipProps['open'];
+    /** The open state of the tooltip when it is initially rendered. Use when you do not need to control its open state. */
+    defaultOpen?: RadixTooltip.TooltipProps['defaultOpen'];
+    /** Used to force mounting when more control is needed. */
+    forceMount?: RadixTooltip.TooltipPortalProps['forceMount'];
+}
+export interface TooltipProviderProps {
+    /** The rest of the application */
+    children: React.ReactNode;
+    /** The container on which the tooltip should be mounted. */
+    container?: RadixTooltip.TooltipPortalProps['container'];
+    /** Prevents tooltip content from remaining open when hovering. Disabling this has accessibility consequences. */
+    disableHoverableContent?: boolean;
+}
+export interface ArrowProps {
+    variant: TooltipVariant;
+}
+export interface TooltipTriggerProps {
+    children?: React.ReactNode;
+    /** The controlled open state of the tooltip. */
+    open?: TooltipProps['open'];
+}

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

@@ -0,0 +1 @@
+export { TriggerButton, type TriggerButtonProps } from './trigger-button';

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

@@ -0,0 +1,50 @@
+/// <reference types="react" />
+import { type BaseButtonIconProps, type BaseButtonProps } from '../primitives/base-button';
+export type TriggerButtonProps = BaseButtonProps & {
+    /** Trigger button label */
+    label?: string;
+    /** Icon to show up at the start of the trigger button */
+    startIcon?: BaseButtonIconProps['icon'];
+    /** Direction of caret icon */
+    caretDirection: 'up' | 'down';
+};
+/**
+ * The TriggerButton is a stylized button that has an optional start icon, optional label, and a caret as the end icon.
+ * Caret direction can be changed from up to down. This component will most likely be used to trigger a dropdown.
+ */
+export declare const TriggerButton: 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;
+}> & {
+    /** Trigger button label */
+    label?: string | undefined;
+    /** Icon to show up at the start of the trigger button */
+    startIcon?: import("react").FunctionComponent<import("react").PropsWithChildren<import("react").SVGProps<SVGSVGElement>>> | undefined;
+    /** Direction of caret icon */
+    caretDirection: 'up' | 'down';
+}, "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;
+}> & {
+    /** Trigger button label */
+    label?: string | undefined;
+    /** Icon to show up at the start of the trigger button */
+    startIcon?: import("react").FunctionComponent<import("react").PropsWithChildren<import("react").SVGProps<SVGSVGElement>>> | undefined;
+    /** Direction of caret icon */
+    caretDirection: 'up' | 'down';
+}, "ref">) & import("react").RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,41 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { CaretUp, CaretDown } from '@box/blueprint-web-assets/icons/Fill';
+import { forwardRef } from 'react';
+import { BaseButton } from '../primitives/base-button/index.js';
+
+const buttonSizeToStartIconSizeMap = {
+  small: 16,
+  large: 24
+};
+/**
+ * The TriggerButton is a stylized button that has an optional start icon, optional label, and a caret as the end icon.
+ * Caret direction can be changed from up to down. This component will most likely be used to trigger a dropdown.
+ */
+const TriggerButton = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    caretDirection,
+    label,
+    startIcon,
+    size = 'small',
+    ...rest
+  } = props;
+  const startIconSize = buttonSizeToStartIconSizeMap[size];
+  return jsxs(BaseButton, {
+    ref: forwardedRef,
+    size: size,
+    ...rest,
+    children: [startIcon && jsx(BaseButton.Icon, {
+      icon: startIcon,
+      iconProps: {
+        height: startIconSize,
+        width: startIconSize
+      }
+    }), label && jsx(BaseButton.Label, {
+      children: label
+    }), jsx(BaseButton.Icon, {
+      icon: caretDirection === 'up' ? CaretUp : CaretDown
+    })]
+  });
+});
+
+export { TriggerButton };

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

@@ -0,0 +1 @@
+export type Modify<T, R> = Omit<T, keyof R> & R;

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { type BaseGridListActionsProps } from './types';
+export declare const BaseGridListActionIconButton: import("react").ForwardRefExoticComponent<Omit<import("../../primitives/icon-button").IconButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const BaseGridListActions: import("react").ForwardRefExoticComponent<Omit<BaseGridListActionsProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,132 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { Pin } from '@box/blueprint-web-assets/icons/Fill';
+import clsx from 'clsx';
+import { forwardRef, useCallback, useRef } from 'react';
+import { mergeProps } from 'react-aria';
+import { TooltipTrigger } from 'react-aria-components';
+import { IconButton } from '../../primitives/icon-button/icon-button.js';
+import { Status } from '../../status/status.js';
+import { useForkRef } from '../../utils/useForkRef.js';
+import { ListCheckbox } from '../list-checkbox/list-checkbox.js';
+import { useBaseGridListContext } from './base-grid-list.js';
+import { useBaseGridListItemContext } from './base-grid-list-item.js';
+import styles from './base-grid-list-item.module.js';
+import { RACButton } from './utils/rac-button.js';
+import { RACTooltip } from './utils/rac-tooltip.js';
+
+const LargeListActions = ({
+  children,
+  selectionEnabled
+}) => {
+  return jsxs(Fragment, {
+    children: [jsx("div", {
+      className: styles.fade
+    }), jsxs("div", {
+      className: styles.actionsCheckboxWrapper,
+      children: [jsx("div", {
+        className: styles.inner,
+        children: children
+      }), selectionEnabled && jsx(ListCheckbox, {
+        className: styles.selection
+      })]
+    })]
+  });
+};
+const GridListActions = ({
+  children,
+  selectionEnabled
+}) => {
+  return jsxs(Fragment, {
+    children: [selectionEnabled && jsx(ListCheckbox, {
+      className: styles.selection
+    }), jsx("div", {
+      className: styles.inner,
+      children: children
+    })]
+  });
+};
+const BaseGridListActionIconButton = /*#__PURE__*/forwardRef(function BaseGridListActionIconButton(props, forwardedRef) {
+  // DOM props are e.g handlers passed from DropdownTrigger
+  const {
+    onClick,
+    ...domProps
+  } = props;
+  const render = useCallback(ariakitProps => {
+    const {
+      onKeyUp,
+      onKeyDown,
+      onClick: _onClick,
+      ...ariakitRest
+    } = ariakitProps;
+    const finalProps = mergeProps(ariakitRest, {
+      onPress: onClick
+    });
+    return jsxs(TooltipTrigger, {
+      closeDelay: 0,
+      delay: 300,
+      children: [jsx(RACButton, {
+        ...finalProps,
+        // Handle opening of potential dropdown. This is passed by DropdownTrigger
+        onKeyDown: domProps.onKeyDown,
+        onPointerDown: domProps.onPointerDown
+      }), jsx(RACTooltip, {
+        children: ariakitProps['aria-label']
+      })]
+    });
+  }, [domProps.onKeyDown, domProps.onPointerDown, onClick]);
+  return jsx(IconButton, {
+    ...props,
+    ref: forwardedRef,
+    render: render,
+    size: "small"
+  });
+});
+const BaseGridListActions = /*#__PURE__*/forwardRef(function BaseGridListActions(props, forwardedRef) {
+  const {
+    layout,
+    selectionMode
+  } = useBaseGridListContext();
+  const {
+    children,
+    className,
+    ...rest
+  } = props;
+  const {
+    loading,
+    pinned,
+    pinAriaLabel,
+    setIsItemInteracted
+  } = useBaseGridListItemContext();
+  const divRef = useRef(null);
+  const forkRef = useForkRef(divRef, forwardedRef);
+  if (loading) {
+    return null;
+  }
+  const isList = layout === 'list';
+  const isSelectionEnabled = selectionMode === 'multiple';
+  const isRenderPropUsed = typeof children === 'function';
+  return jsxs(Fragment, {
+    children: [jsx("div", {
+      ...rest,
+      ref: forkRef,
+      className: clsx(styles.actions, className),
+      children: isList ? jsx(LargeListActions, {
+        selectionEnabled: isSelectionEnabled,
+        children: isRenderPropUsed ? children(setIsItemInteracted) : children
+      }) : jsx(GridListActions, {
+        selectionEnabled: isSelectionEnabled,
+        children: isRenderPropUsed ? children(setIsItemInteracted) : children
+      })
+    }), pinned && jsx(Status, {
+      "aria-label": pinAriaLabel,
+      className: styles.statusPin,
+      colorIndex: 0,
+      hideText: true,
+      icon: Pin,
+      iconPosition: "left",
+      text: ""
+    })]
+  });
+});
+
+export { BaseGridListActionIconButton, BaseGridListActions };

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

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

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

@@ -0,0 +1,57 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { forwardRef, useRef, Fragment } from 'react';
+import { Ghost } from '../../ghost/ghost.js';
+import { useForkRef } from '../../utils/useForkRef.js';
+import { useFullTextTooltip } from '../../utils/useFullTextTooltip.js';
+import { useBaseGridListContext } from './base-grid-list.js';
+import { useBaseGridListItemContext } from './base-grid-list-item.js';
+import styles from './base-grid-list-item.module.js';
+
+const BaseGridListHeader = /*#__PURE__*/forwardRef(function BaseGridListHeader(props, forwardedRef) {
+  const {
+    children,
+    className,
+    textValue,
+    ...rest
+  } = props;
+  const ref = useRef(null);
+  const {
+    Wrapper,
+    wrapperProps
+  } = useFullTextTooltip({
+    ref,
+    children,
+    textValue
+  });
+  const {
+    loading
+  } = useBaseGridListItemContext();
+  const {
+    layout
+  } = useBaseGridListContext();
+  const isLargeItem = layout === 'list';
+  const isSmallListItem = layout === 'small-list';
+  const LoadingWrapper = loading ? Fragment : Wrapper;
+  return (
+    // @ts-expect-error Fix this type error
+    jsx(LoadingWrapper, {
+      ...wrapperProps,
+      children: jsx("span", {
+        ...rest,
+        ref: useForkRef(ref, forwardedRef),
+        className: clsx(styles.header, {
+          [styles.loading]: loading
+        }, className),
+        children: loading ? jsx(Ghost, {
+          borderRadius: isSmallListItem ? '2rem' : '0rem',
+          height: isSmallListItem ? '0.75rem' : '1.25rem',
+          variant: "rectangle",
+          width: isLargeItem ? '80%' : '100%'
+        }) : children
+      })
+    })
+  );
+});
+
+export { BaseGridListHeader };

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const BaseGridListSubtitle: 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>>;

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

@@ -0,0 +1,58 @@
+import { jsx } from 'react/jsx-runtime';
+import clsx from 'clsx';
+import { forwardRef, useRef, Fragment } from 'react';
+import { Ghost } from '../../ghost/ghost.js';
+import { useForkRef } from '../../utils/useForkRef.js';
+import { useFullTextTooltip } from '../../utils/useFullTextTooltip.js';
+import { useBaseGridListContext } from './base-grid-list.js';
+import { useBaseGridListItemContext } from './base-grid-list-item.js';
+import styles from './base-grid-list-item.module.js';
+
+const BaseGridListSubtitle = /*#__PURE__*/forwardRef(function BaseGridListSubtitle(props, forwardedRef) {
+  const {
+    children,
+    className,
+    ...rest
+  } = props;
+  const ref = useRef(null);
+  const {
+    Wrapper,
+    wrapperProps
+  } = useFullTextTooltip({
+    ref,
+    children
+  });
+  const {
+    loading
+  } = useBaseGridListItemContext();
+  const {
+    layout
+  } = useBaseGridListContext();
+  const LoadingWrapper = loading ? Fragment : Wrapper;
+  const isGridItem = layout === 'grid';
+  const isSmallListItem = layout === 'small-list';
+  const forkRef = useForkRef(ref, forwardedRef);
+  if (isSmallListItem && loading) {
+    // no loading state for small list item subtitle
+    return null;
+  }
+  return (
+    // @ts-expect-error Fix this type error
+    jsx(LoadingWrapper, {
+      ...wrapperProps,
+      children: jsx("span", {
+        ...rest,
+        ref: forkRef,
+        className: clsx(styles.subtitle, {
+          [styles.loading]: loading
+        }, className),
+        children: loading ? jsx(Ghost, {
+          variant: "rectangle",
+          width: isGridItem ? '80%' : '95%'
+        }) : children
+      })
+    })
+  );
+});
+
+export { BaseGridListSubtitle };

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

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+export declare const BaseGridListThumbnail: 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>>;