@box/blueprint-web 18.7.1 → 18.8.0

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

@@ -0,0 +1,2 @@
+import { type AvatarGroupProps } from './types';
+export declare const AvatarGroup: import("react").ForwardRefExoticComponent<AvatarGroupProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/lib-esm/avatar/avatar-group/avatar-group.js

@@ -0,0 +1,156 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { bpGray10 } from '@box/blueprint-web-assets/tokens/tokens';
+import clsx from 'clsx';
+import { forwardRef, Children, cloneElement, isValidElement } from 'react';
+import '../../blueprint-configuration-context/blueprint-configuration-context.js';
+import '../../blueprint-configuration-context/consts.js';
+import { useBlueprintConfiguration } from '../../blueprint-configuration-context/useBlueprintConfiguration.js';
+import { Focusable } from '../../focusable/focusable.js';
+import { useTravelTooltip, TravelTooltipBubble } from '../../tooltip/travel-tooltip.js';
+import { composeEventHandlers } from '../../utils/composeEventHandlers.js';
+import { useForkRef } from '../../utils/useForkRef.js';
+import { useUniqueId } from '../../utils/useUniqueId.js';
+import { Avatar } from '../avatar.js';
+import styles from './avatar-group.module.js';
+import { useAvatarGroupHover } from './use-avatar-group-hover.js';
+import { getAvatarGroupVisibility } from './utils.js';
+
+const overflowColor = bpGray10;
+function isAvatarElement(child) {
+  return /*#__PURE__*/isValidElement(child) && child.type === Avatar;
+}
+const AvatarGroup = /*#__PURE__*/forwardRef((props, forwardedRef) => {
+  const {
+    children,
+    className,
+    getTooltipContent,
+    max,
+    overflowLabel,
+    overlap,
+    ringColor,
+    size,
+    style,
+    onMouseLeave,
+    onPointerLeave,
+    onBlur,
+    ...rest
+  } = props;
+  const {
+    componentsWithAnimationEnabled
+  } = useBlueprintConfiguration();
+  const isAnimationEnabled = componentsWithAnimationEnabled.includes('AvatarGroup');
+  const {
+    groupRef: hoverGroupRef,
+    onGroupLeave,
+    onItemEnter
+  } = useAvatarGroupHover(isAnimationEnabled);
+  const {
+    activeTrigger,
+    groupRef: travelGroupRef,
+    hideFocusIfLeavingGroup,
+    hidePointerIfLeavingGroup,
+    label,
+    showForFocus,
+    showForPointer,
+    textRef,
+    tooltipRef
+  } = useTravelTooltip();
+  const ref = useForkRef(useForkRef(hoverGroupRef, travelGroupRef), forwardedRef);
+  const tooltipId = useUniqueId('avatar-group-tooltip');
+  const avatars = Children.toArray(children).filter(isAvatarElement);
+  const {
+    visibleCount,
+    overflowCount
+  } = getAvatarGroupVisibility(avatars.length, max);
+  const visibleAvatars = avatars.slice(0, visibleCount);
+  const hasTooltips = Boolean(getTooltipContent || overflowLabel);
+  const customProperties = {
+    ...(overlap ? {
+      '--avatar-group-overlap': overlap
+    } : {}),
+    ...(ringColor ? {
+      '--avatar-group-ring-color': ringColor
+    } : {})
+  };
+  const leaveFromPointer = event => {
+    if (hidePointerIfLeavingGroup(event)) {
+      onGroupLeave();
+    }
+  };
+  const leaveFromFocus = event => {
+    if (hideFocusIfLeavingGroup(event)) {
+      onGroupLeave();
+    }
+  };
+  const activateItem = (index, trigger, tooltip, show) => {
+    onItemEnter(index);
+    if (tooltip) {
+      show(trigger, tooltip);
+    }
+  };
+  return jsxs("div", {
+    ...rest,
+    ref: ref,
+    className: clsx(styles.avatarGroup, className),
+    "data-bp-animated": isAnimationEnabled ? 'true' : 'false',
+    onBlur: composeEventHandlers(onBlur, leaveFromFocus),
+    onMouseLeave: onMouseLeave,
+    onPointerLeave: composeEventHandlers(onPointerLeave, leaveFromPointer),
+    role: "group",
+    style: overlap || ringColor || style ? {
+      ...customProperties,
+      ...style
+    } : undefined,
+    children: [visibleAvatars.map((child, index) => {
+      const tooltip = getTooltipContent?.(child.props.text, index);
+      return jsx(Focusable, {
+        "aria-describedby": tooltip ? tooltipId : undefined,
+        focusable: Boolean(tooltip),
+        // eslint-disable-next-line react/jsx-no-bind
+        onFocusVisible: event => activateItem(index, event.currentTarget, tooltip, showForFocus),
+        // eslint-disable-next-line react/jsx-no-bind
+        onPointerEnter: event => activateItem(index, event.currentTarget, tooltip, showForPointer),
+        children: jsx("div", {
+          className: styles.item,
+          "data-avatar-group-item": "",
+          children: jsx("div", {
+            className: styles.itemMotion,
+            children: size ? /*#__PURE__*/cloneElement(child, {
+              size
+            }) : child
+          })
+        })
+      }, child.key ?? index);
+    }), overflowCount > 0 && jsx(Focusable, {
+      "aria-describedby": overflowLabel ? tooltipId : undefined,
+      "aria-label": overflowLabel,
+      focusable: Boolean(overflowLabel),
+      // eslint-disable-next-line react/jsx-no-bind
+      onFocusVisible: event => activateItem(visibleAvatars.length, event.currentTarget, overflowLabel, showForFocus),
+      // eslint-disable-next-line react/jsx-no-bind
+      onPointerEnter: event => activateItem(visibleAvatars.length, event.currentTarget, overflowLabel, showForPointer),
+      children: jsx("div", {
+        className: styles.item,
+        "data-avatar-group-item": "",
+        children: jsx("div", {
+          className: styles.itemMotion,
+          children: jsx(Avatar, {
+            color: overflowColor,
+            size: size,
+            text: `+${overflowCount}`
+          })
+        })
+      })
+    }), hasTooltips ? jsx(TravelTooltipBubble, {
+      animated: isAnimationEnabled,
+      id: tooltipId,
+      label: label,
+      show: Boolean(activeTrigger),
+      textRef: textRef,
+      tooltipRef: tooltipRef
+    }) : null]
+  });
+});
+AvatarGroup.displayName = 'AvatarGroup';
+
+export { AvatarGroup };

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

@@ -0,0 +1,4 @@
+import '../../index.css';
+var styles = {"avatarGroup":"bp_avatar_group_module_avatarGroup--c775b","item":"bp_avatar_group_module_item--c775b","itemMotion":"bp_avatar_group_module_itemMotion--c775b"};
+
+export { styles as default };

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

@@ -0,0 +1,27 @@
+import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
+import { type AvatarSize } from '../types';
+export interface AvatarGroupProps extends Omit<ComponentPropsWithoutRef<'div'>, 'role'> {
+    /**
+     * Avatar children to display. Compose with `<Avatar>` nodes — the group clones
+     * them to apply `size` and the overlap/ring treatment.
+     */
+    children?: ReactNode;
+    /** Maximum number of avatars shown before an overflow `+N` avatar is rendered. */
+    max?: number;
+    /** Size passed through to each Avatar, including the overflow avatar. */
+    size?: AvatarSize;
+    /**
+     * Overlap distance between adjacent avatars as a CSS length.
+     * @default `--bp-space-020` (8px).
+     */
+    overlap?: string;
+    /**
+     * Ring colour around each avatar as a CSS color.
+     * @default `--bp-gray-white`.
+     */
+    ringColor?: string;
+    /** Accessible label for the overflow avatar. */
+    overflowLabel?: string;
+    /** Tooltip label for a visible avatar. Omit to skip tooltips. */
+    getTooltipContent?(text: string | undefined, index: number): string | undefined;
+}

package/dist/lib-esm/avatar/avatar-group/use-avatar-group-hover.d.ts

@@ -0,0 +1,6 @@
+export declare function applyAvatarGroupHover(items: HTMLElement[], activeIndex: number | null): void;
+export declare function useAvatarGroupHover(enabled: boolean): {
+    groupRef: import("react").RefObject<HTMLDivElement>;
+    onGroupLeave: () => void;
+    onItemEnter: (index: number) => void;
+};

package/dist/lib-esm/avatar/avatar-group/use-avatar-group-hover.js

@@ -0,0 +1,61 @@
+import { useRef, useCallback } from 'react';
+
+// Transitions.dev avatar hover. Lift is negative so the active item rises.
+const LIFT = -4;
+const SCALE = 1.05;
+// TODO(ewang): confirm duration — 200/140 has no --bp-duration-* pair (medium=150, long=300)
+const DUR_IN = '200ms';
+const DUR_OUT = '140ms';
+// TODO(ewang): confirm curve — Transitions.dev 0.22,1,0.36,1 vs --bp-curve-large-on
+const EASE_IN = 'cubic-bezier(0.22, 1, 0.36, 1)';
+// Leave is a plain ease-out — no spring overshoot.
+const EASE_OUT = 'cubic-bezier(0.4, 0, 0.2, 1)';
+function applyAvatarGroupHover(items, activeIndex) {
+  const isLeaving = activeIndex === null;
+  const ease = isLeaving ? EASE_OUT : EASE_IN;
+  const duration = isLeaving ? DUR_OUT : DUR_IN;
+  items.forEach(item => {
+    item.style.transitionDuration = duration;
+    item.style.transitionTimingFunction = ease;
+  });
+  items.forEach((item, index) => {
+    if (activeIndex === null) {
+      item.style.setProperty('--shift', '0px');
+      item.style.setProperty('--scale-active', '1');
+      item.style.zIndex = '';
+      return;
+    }
+    const isActive = index === activeIndex;
+    item.style.setProperty('--shift', isActive ? `${LIFT}px` : '0px');
+    item.style.setProperty('--scale-active', isActive ? String(SCALE) : '1');
+    item.style.zIndex = isActive ? '3' : '';
+  });
+}
+function useAvatarGroupHover(enabled) {
+  const groupRef = useRef(null);
+  const getItems = useCallback(() => {
+    if (!groupRef.current) {
+      return [];
+    }
+    return [...groupRef.current.querySelectorAll('[data-avatar-group-item]')];
+  }, []);
+  const onItemEnter = useCallback(index => {
+    if (!enabled) {
+      return;
+    }
+    applyAvatarGroupHover(getItems(), index);
+  }, [enabled, getItems]);
+  const onGroupLeave = useCallback(() => {
+    if (!enabled) {
+      return;
+    }
+    applyAvatarGroupHover(getItems(), null);
+  }, [enabled, getItems]);
+  return {
+    groupRef,
+    onGroupLeave,
+    onItemEnter
+  };
+}
+
+export { applyAvatarGroupHover, useAvatarGroupHover };

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

@@ -0,0 +1,5 @@
+export type AvatarGroupVisibility = {
+    visibleCount: number;
+    overflowCount: number;
+};
+export declare function getAvatarGroupVisibility(totalCount: number, max?: number): AvatarGroupVisibility;

package/dist/lib-esm/avatar/avatar-group/utils.js

@@ -0,0 +1,31 @@
+/**
+ * Splits a group of avatars into the number shown and the leftover overflow count
+ * rendered as a `+N` avatar.
+ *
+ * `max` is the visible count before overflow. When omitted, every avatar is shown.
+ */
+function getVisibleCountForMax(totalCount, max) {
+  if (max === Number.POSITIVE_INFINITY) {
+    return totalCount;
+  }
+  if (!Number.isFinite(max)) {
+    return 0;
+  }
+  const normalizedMax = Math.max(0, Math.trunc(max));
+  return Math.min(totalCount, normalizedMax);
+}
+function getAvatarGroupVisibility(totalCount, max) {
+  if (max === undefined) {
+    return {
+      visibleCount: totalCount,
+      overflowCount: 0
+    };
+  }
+  const visibleCount = getVisibleCountForMax(totalCount, max);
+  return {
+    visibleCount,
+    overflowCount: totalCount - visibleCount
+  };
+}
+
+export { getAvatarGroupVisibility };

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

@@ -1,4 +1,4 @@
 import '../index.css';
-var styles = {"avatar":"bp_avatar_module_avatar--ed504","text":"bp_avatar_module_text--ed504","xsmall":"bp_avatar_module_xsmall--ed504","length-1":"bp_avatar_module_length-1--ed504","length-2":"bp_avatar_module_length-2--ed504","small":"bp_avatar_module_small--ed504","medium":"bp_avatar_module_medium--ed504","large":"bp_avatar_module_large--ed504","length-3":"bp_avatar_module_length-3--ed504","length-4":"bp_avatar_module_length-4--ed504","xlarge":"bp_avatar_module_xlarge--ed504","xxlarge":"bp_avatar_module_xxlarge--ed504","badge":"bp_avatar_module_badge--ed504","image":"bp_avatar_module_image--ed504","loading":"bp_avatar_module_loading--ed504","anonymousAvatar":"bp_avatar_module_anonymousAvatar--ed504","iconContainer":"bp_avatar_module_iconContainer--ed504"};
+var styles = {"avatar":"bp_avatar_module_avatar--42c50","text":"bp_avatar_module_text--42c50","xsmall":"bp_avatar_module_xsmall--42c50","length-1":"bp_avatar_module_length-1--42c50","length-2":"bp_avatar_module_length-2--42c50","small":"bp_avatar_module_small--42c50","medium":"bp_avatar_module_medium--42c50","large":"bp_avatar_module_large--42c50","length-3":"bp_avatar_module_length-3--42c50","length-4":"bp_avatar_module_length-4--42c50","xlarge":"bp_avatar_module_xlarge--42c50","xxlarge":"bp_avatar_module_xxlarge--42c50","badge":"bp_avatar_module_badge--42c50","image":"bp_avatar_module_image--42c50","loading":"bp_avatar_module_loading--42c50","anonymousAvatar":"bp_avatar_module_anonymousAvatar--42c50","iconContainer":"bp_avatar_module_iconContainer--42c50"};
 
 export { styles as default };

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

@@ -1,2 +1,4 @@
 export { Avatar } from './avatar';
+export { AvatarGroup } from './avatar-group/avatar-group';
+export { type AvatarGroupProps } from './avatar-group/types';
 export { type AvatarProps } from './types';

package/dist/lib-esm/components.css

@@ -2160,7 +2160,7 @@
   background-color:initial;
   border:none;
 }
-.bp_avatar_module_avatar--ed504{
+.bp_avatar_module_avatar--42c50{
   --avatar-line-height:1;
   all:unset;
   align-items:center;
@@ -2178,7 +2178,7 @@
   line-height:var(--bp-font-line-height-04);
   position:relative;
 }
-:where(body.is-inter-font) .bp_avatar_module_avatar--ed504{
+:where(body.is-inter-font) .bp_avatar_module_avatar--42c50{
   font-family:"Inter Variable", -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:.875rem;
   font-style:normal;
@@ -2189,10 +2189,10 @@
   text-transform:none;
 }
 
-.bp_avatar_module_avatar--ed504{
+.bp_avatar_module_avatar--42c50{
   line-height:var(--avatar-line-height);
 }
-.bp_avatar_module_avatar--ed504 .bp_avatar_module_text--ed504{
+.bp_avatar_module_avatar--42c50 .bp_avatar_module_text--42c50{
   align-items:center;
   border-radius:50%;
   display:flex;
@@ -2200,14 +2200,14 @@
   justify-content:center;
   width:100%;
 }
-.bp_avatar_module_avatar--ed504.bp_avatar_module_xsmall--ed504{
+.bp_avatar_module_avatar--42c50.bp_avatar_module_xsmall--42c50{
   height:var(--bp-size-050);
   width:var(--bp-size-050);
 }
-.bp_avatar_module_avatar--ed504.bp_avatar_module_xsmall--ed504 .bp_avatar_module_text--ed504{
+.bp_avatar_module_avatar--42c50.bp_avatar_module_xsmall--42c50 .bp_avatar_module_text--42c50{
   font-size:.375rem;
 }
-.bp_avatar_module_avatar--ed504.bp_avatar_module_xsmall--ed504 .bp_avatar_module_length-1--ed504.bp_avatar_module_text--ed504,.bp_avatar_module_avatar--ed504.bp_avatar_module_xsmall--ed504 .bp_avatar_module_length-2--ed504.bp_avatar_module_text--ed504{
+.bp_avatar_module_avatar--42c50.bp_avatar_module_xsmall--42c50 .bp_avatar_module_length-1--42c50.bp_avatar_module_text--42c50,.bp_avatar_module_avatar--42c50.bp_avatar_module_xsmall--42c50 .bp_avatar_module_length-2--42c50.bp_avatar_module_text--42c50{
   font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:var(--bp-font-size-02);
   font-style:normal;
@@ -2215,7 +2215,7 @@
   letter-spacing:var(--bp-font-letter-spacing-02);
   line-height:var(--bp-font-line-height-03);
 }
-:where(body.is-inter-font) .bp_avatar_module_avatar--ed504.bp_avatar_module_xsmall--ed504 .bp_avatar_module_length-1--ed504.bp_avatar_module_text--ed504,:where(body.is-inter-font) .bp_avatar_module_avatar--ed504.bp_avatar_module_xsmall--ed504 .bp_avatar_module_length-2--ed504.bp_avatar_module_text--ed504{
+:where(body.is-inter-font) .bp_avatar_module_avatar--42c50.bp_avatar_module_xsmall--42c50 .bp_avatar_module_length-1--42c50.bp_avatar_module_text--42c50,:where(body.is-inter-font) .bp_avatar_module_avatar--42c50.bp_avatar_module_xsmall--42c50 .bp_avatar_module_length-2--42c50.bp_avatar_module_text--42c50{
   font-family:"Inter Variable", -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:.625rem;
   font-style:normal;
@@ -2226,17 +2226,17 @@
   text-transform:none;
 }
 
-.bp_avatar_module_avatar--ed504.bp_avatar_module_xsmall--ed504 .bp_avatar_module_length-1--ed504.bp_avatar_module_text--ed504,.bp_avatar_module_avatar--ed504.bp_avatar_module_xsmall--ed504 .bp_avatar_module_length-2--ed504.bp_avatar_module_text--ed504{
+.bp_avatar_module_avatar--42c50.bp_avatar_module_xsmall--42c50 .bp_avatar_module_length-1--42c50.bp_avatar_module_text--42c50,.bp_avatar_module_avatar--42c50.bp_avatar_module_xsmall--42c50 .bp_avatar_module_length-2--42c50.bp_avatar_module_text--42c50{
   line-height:var(--avatar-line-height);
 }
-.bp_avatar_module_avatar--ed504.bp_avatar_module_small--ed504{
+.bp_avatar_module_avatar--42c50.bp_avatar_module_small--42c50{
   height:var(--bp-size-060);
   width:var(--bp-size-060);
 }
-.bp_avatar_module_avatar--ed504.bp_avatar_module_small--ed504 .bp_avatar_module_text--ed504{
+.bp_avatar_module_avatar--42c50.bp_avatar_module_small--42c50 .bp_avatar_module_text--42c50{
   font-size:.5rem;
 }
-.bp_avatar_module_avatar--ed504.bp_avatar_module_small--ed504 .bp_avatar_module_length-1--ed504.bp_avatar_module_text--ed504,.bp_avatar_module_avatar--ed504.bp_avatar_module_small--ed504 .bp_avatar_module_length-2--ed504.bp_avatar_module_text--ed504{
+.bp_avatar_module_avatar--42c50.bp_avatar_module_small--42c50 .bp_avatar_module_length-1--42c50.bp_avatar_module_text--42c50,.bp_avatar_module_avatar--42c50.bp_avatar_module_small--42c50 .bp_avatar_module_length-2--42c50.bp_avatar_module_text--42c50{
   font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:var(--bp-font-size-02);
   font-style:normal;
@@ -2244,7 +2244,7 @@
   letter-spacing:var(--bp-font-letter-spacing-02);
   line-height:var(--bp-font-line-height-03);
 }
-:where(body.is-inter-font) .bp_avatar_module_avatar--ed504.bp_avatar_module_small--ed504 .bp_avatar_module_length-1--ed504.bp_avatar_module_text--ed504,:where(body.is-inter-font) .bp_avatar_module_avatar--ed504.bp_avatar_module_small--ed504 .bp_avatar_module_length-2--ed504.bp_avatar_module_text--ed504{
+:where(body.is-inter-font) .bp_avatar_module_avatar--42c50.bp_avatar_module_small--42c50 .bp_avatar_module_length-1--42c50.bp_avatar_module_text--42c50,:where(body.is-inter-font) .bp_avatar_module_avatar--42c50.bp_avatar_module_small--42c50 .bp_avatar_module_length-2--42c50.bp_avatar_module_text--42c50{
   font-family:"Inter Variable", -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:.625rem;
   font-style:normal;
@@ -2255,14 +2255,14 @@
   text-transform:none;
 }
 
-.bp_avatar_module_avatar--ed504.bp_avatar_module_small--ed504 .bp_avatar_module_length-1--ed504.bp_avatar_module_text--ed504,.bp_avatar_module_avatar--ed504.bp_avatar_module_small--ed504 .bp_avatar_module_length-2--ed504.bp_avatar_module_text--ed504{
+.bp_avatar_module_avatar--42c50.bp_avatar_module_small--42c50 .bp_avatar_module_length-1--42c50.bp_avatar_module_text--42c50,.bp_avatar_module_avatar--42c50.bp_avatar_module_small--42c50 .bp_avatar_module_length-2--42c50.bp_avatar_module_text--42c50{
   line-height:var(--avatar-line-height);
 }
-.bp_avatar_module_avatar--ed504.bp_avatar_module_medium--ed504{
+.bp_avatar_module_avatar--42c50.bp_avatar_module_medium--42c50{
   height:var(--bp-size-070);
   width:var(--bp-size-070);
 }
-.bp_avatar_module_avatar--ed504.bp_avatar_module_medium--ed504 .bp_avatar_module_text--ed504{
+.bp_avatar_module_avatar--42c50.bp_avatar_module_medium--42c50 .bp_avatar_module_text--42c50{
   font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:var(--bp-font-size-02);
   font-style:normal;
@@ -2270,7 +2270,7 @@
   letter-spacing:var(--bp-font-letter-spacing-02);
   line-height:var(--bp-font-line-height-03);
 }
-:where(body.is-inter-font) .bp_avatar_module_avatar--ed504.bp_avatar_module_medium--ed504 .bp_avatar_module_text--ed504{
+:where(body.is-inter-font) .bp_avatar_module_avatar--42c50.bp_avatar_module_medium--42c50 .bp_avatar_module_text--42c50{
   font-family:"Inter Variable", -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:.625rem;
   font-style:normal;
@@ -2281,20 +2281,20 @@
   text-transform:none;
 }
 
-.bp_avatar_module_avatar--ed504.bp_avatar_module_medium--ed504 .bp_avatar_module_text--ed504{
+.bp_avatar_module_avatar--42c50.bp_avatar_module_medium--42c50 .bp_avatar_module_text--42c50{
   line-height:var(--avatar-line-height);
 }
-.bp_avatar_module_avatar--ed504.bp_avatar_module_medium--ed504 .bp_avatar_module_length-1--ed504.bp_avatar_module_text--ed504,.bp_avatar_module_avatar--ed504.bp_avatar_module_medium--ed504 .bp_avatar_module_length-2--ed504.bp_avatar_module_text--ed504{
+.bp_avatar_module_avatar--42c50.bp_avatar_module_medium--42c50 .bp_avatar_module_length-1--42c50.bp_avatar_module_text--42c50,.bp_avatar_module_avatar--42c50.bp_avatar_module_medium--42c50 .bp_avatar_module_length-2--42c50.bp_avatar_module_text--42c50{
   font-size:.8125rem;
 }
-.bp_avatar_module_avatar--ed504.bp_avatar_module_large--ed504{
+.bp_avatar_module_avatar--42c50.bp_avatar_module_large--42c50{
   height:var(--bp-size-080);
   width:var(--bp-size-080);
 }
-.bp_avatar_module_avatar--ed504.bp_avatar_module_large--ed504 .bp_avatar_module_text--ed504{
+.bp_avatar_module_avatar--42c50.bp_avatar_module_large--42c50 .bp_avatar_module_text--42c50{
   font-size:.5rem;
 }
-.bp_avatar_module_avatar--ed504.bp_avatar_module_large--ed504 .bp_avatar_module_length-1--ed504.bp_avatar_module_text--ed504,.bp_avatar_module_avatar--ed504.bp_avatar_module_large--ed504 .bp_avatar_module_length-2--ed504.bp_avatar_module_text--ed504{
+.bp_avatar_module_avatar--42c50.bp_avatar_module_large--42c50 .bp_avatar_module_length-1--42c50.bp_avatar_module_text--42c50,.bp_avatar_module_avatar--42c50.bp_avatar_module_large--42c50 .bp_avatar_module_length-2--42c50.bp_avatar_module_text--42c50{
   font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:var(--bp-font-size-05);
   font-style:normal;
@@ -2302,7 +2302,7 @@
   letter-spacing:var(--bp-font-letter-spacing-01);
   line-height:var(--bp-font-line-height-04);
 }
-:where(body.is-inter-font) .bp_avatar_module_avatar--ed504.bp_avatar_module_large--ed504 .bp_avatar_module_length-1--ed504.bp_avatar_module_text--ed504,:where(body.is-inter-font) .bp_avatar_module_avatar--ed504.bp_avatar_module_large--ed504 .bp_avatar_module_length-2--ed504.bp_avatar_module_text--ed504{
+:where(body.is-inter-font) .bp_avatar_module_avatar--42c50.bp_avatar_module_large--42c50 .bp_avatar_module_length-1--42c50.bp_avatar_module_text--42c50,:where(body.is-inter-font) .bp_avatar_module_avatar--42c50.bp_avatar_module_large--42c50 .bp_avatar_module_length-2--42c50.bp_avatar_module_text--42c50{
   font-family:"Inter Variable", -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:.875rem;
   font-style:normal;
@@ -2313,14 +2313,14 @@
   text-transform:none;
 }
 
-.bp_avatar_module_avatar--ed504.bp_avatar_module_large--ed504 .bp_avatar_module_length-1--ed504.bp_avatar_module_text--ed504,.bp_avatar_module_avatar--ed504.bp_avatar_module_large--ed504 .bp_avatar_module_length-2--ed504.bp_avatar_module_text--ed504{
+.bp_avatar_module_avatar--42c50.bp_avatar_module_large--42c50 .bp_avatar_module_length-1--42c50.bp_avatar_module_text--42c50,.bp_avatar_module_avatar--42c50.bp_avatar_module_large--42c50 .bp_avatar_module_length-2--42c50.bp_avatar_module_text--42c50{
   line-height:var(--avatar-line-height);
 }
-.bp_avatar_module_avatar--ed504.bp_avatar_module_large--ed504 .bp_avatar_module_length-3--ed504.bp_avatar_module_text--ed504{
+.bp_avatar_module_avatar--42c50.bp_avatar_module_large--42c50 .bp_avatar_module_length-3--42c50.bp_avatar_module_text--42c50{
   font-size:.6875rem;
   line-height:var(--avatar-line-height);
 }
-.bp_avatar_module_avatar--ed504.bp_avatar_module_large--ed504 .bp_avatar_module_length-4--ed504.bp_avatar_module_text--ed504{
+.bp_avatar_module_avatar--42c50.bp_avatar_module_large--42c50 .bp_avatar_module_length-4--42c50.bp_avatar_module_text--42c50{
   font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:var(--bp-font-size-02);
   font-style:normal;
@@ -2328,7 +2328,7 @@
   letter-spacing:var(--bp-font-letter-spacing-02);
   line-height:var(--bp-font-line-height-03);
 }
-:where(body.is-inter-font) .bp_avatar_module_avatar--ed504.bp_avatar_module_large--ed504 .bp_avatar_module_length-4--ed504.bp_avatar_module_text--ed504{
+:where(body.is-inter-font) .bp_avatar_module_avatar--42c50.bp_avatar_module_large--42c50 .bp_avatar_module_length-4--42c50.bp_avatar_module_text--42c50{
   font-family:"Inter Variable", -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:.625rem;
   font-style:normal;
@@ -2339,17 +2339,17 @@
   text-transform:none;
 }
 
-.bp_avatar_module_avatar--ed504.bp_avatar_module_large--ed504 .bp_avatar_module_length-4--ed504.bp_avatar_module_text--ed504{
+.bp_avatar_module_avatar--42c50.bp_avatar_module_large--42c50 .bp_avatar_module_length-4--42c50.bp_avatar_module_text--42c50{
   line-height:var(--avatar-line-height);
 }
-.bp_avatar_module_avatar--ed504.bp_avatar_module_xlarge--ed504{
+.bp_avatar_module_avatar--42c50.bp_avatar_module_xlarge--42c50{
   height:var(--bp-size-110);
   width:var(--bp-size-110);
 }
-.bp_avatar_module_avatar--ed504.bp_avatar_module_xlarge--ed504 .bp_avatar_module_text--ed504{
+.bp_avatar_module_avatar--42c50.bp_avatar_module_xlarge--42c50 .bp_avatar_module_text--42c50{
   font-size:1rem;
 }
-.bp_avatar_module_avatar--ed504.bp_avatar_module_xlarge--ed504 .bp_avatar_module_length-1--ed504.bp_avatar_module_text--ed504,.bp_avatar_module_avatar--ed504.bp_avatar_module_xlarge--ed504 .bp_avatar_module_length-2--ed504.bp_avatar_module_text--ed504{
+.bp_avatar_module_avatar--42c50.bp_avatar_module_xlarge--42c50 .bp_avatar_module_length-1--42c50.bp_avatar_module_text--42c50,.bp_avatar_module_avatar--42c50.bp_avatar_module_xlarge--42c50 .bp_avatar_module_length-2--42c50.bp_avatar_module_text--42c50{
   font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:var(--bp-font-size-10);
   font-style:normal;
@@ -2357,7 +2357,7 @@
   letter-spacing:var(--bp-font-letter-spacing-01);
   line-height:var(--bp-font-line-height-06);
 }
-:where(body.is-inter-font) .bp_avatar_module_avatar--ed504.bp_avatar_module_xlarge--ed504 .bp_avatar_module_length-1--ed504.bp_avatar_module_text--ed504,:where(body.is-inter-font) .bp_avatar_module_avatar--ed504.bp_avatar_module_xlarge--ed504 .bp_avatar_module_length-2--ed504.bp_avatar_module_text--ed504{
+:where(body.is-inter-font) .bp_avatar_module_avatar--42c50.bp_avatar_module_xlarge--42c50 .bp_avatar_module_length-1--42c50.bp_avatar_module_text--42c50,:where(body.is-inter-font) .bp_avatar_module_avatar--42c50.bp_avatar_module_xlarge--42c50 .bp_avatar_module_length-2--42c50.bp_avatar_module_text--42c50{
   font-family:"Inter Variable", -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:1.3125rem;
   font-style:normal;
@@ -2368,56 +2368,180 @@
   text-transform:none;
 }
 
-.bp_avatar_module_avatar--ed504.bp_avatar_module_xlarge--ed504 .bp_avatar_module_length-1--ed504.bp_avatar_module_text--ed504,.bp_avatar_module_avatar--ed504.bp_avatar_module_xlarge--ed504 .bp_avatar_module_length-2--ed504.bp_avatar_module_text--ed504{
+.bp_avatar_module_avatar--42c50.bp_avatar_module_xlarge--42c50 .bp_avatar_module_length-1--42c50.bp_avatar_module_text--42c50,.bp_avatar_module_avatar--42c50.bp_avatar_module_xlarge--42c50 .bp_avatar_module_length-2--42c50.bp_avatar_module_text--42c50{
   line-height:var(--avatar-line-height);
 }
-.bp_avatar_module_avatar--ed504.bp_avatar_module_xxlarge--ed504{
+.bp_avatar_module_avatar--42c50.bp_avatar_module_xxlarge--42c50{
   height:var(--bp-size-200);
   line-height:var(--avatar-line-height);
   width:var(--bp-size-200);
 }
-.bp_avatar_module_avatar--ed504.bp_avatar_module_xxlarge--ed504 .bp_avatar_module_text--ed504{
+.bp_avatar_module_avatar--42c50.bp_avatar_module_xxlarge--42c50 .bp_avatar_module_text--42c50{
   font-size:1.25rem;
 }
-.bp_avatar_module_avatar--ed504.bp_avatar_module_xxlarge--ed504 .bp_avatar_module_length-1--ed504.bp_avatar_module_text--ed504,.bp_avatar_module_avatar--ed504.bp_avatar_module_xxlarge--ed504 .bp_avatar_module_length-2--ed504.bp_avatar_module_text--ed504{
+.bp_avatar_module_avatar--42c50.bp_avatar_module_xxlarge--42c50 .bp_avatar_module_length-1--42c50.bp_avatar_module_text--42c50,.bp_avatar_module_avatar--42c50.bp_avatar_module_xxlarge--42c50 .bp_avatar_module_length-2--42c50.bp_avatar_module_text--42c50{
   font-size:2rem;
 }
-.bp_avatar_module_avatar--ed504.bp_avatar_module_xxlarge--ed504 .bp_avatar_module_badge--ed504{
+.bp_avatar_module_avatar--42c50.bp_avatar_module_xxlarge--42c50 .bp_avatar_module_badge--42c50{
   right:-.375rem;
 }
-.bp_avatar_module_avatar--ed504 .bp_avatar_module_image--ed504{
+.bp_avatar_module_avatar--42c50 .bp_avatar_module_image--42c50{
   border-radius:50%;
   height:100%;
   object-fit:cover;
   width:100%;
 }
-.bp_avatar_module_avatar--ed504 .bp_avatar_module_image--ed504.bp_avatar_module_loading--ed504{
+.bp_avatar_module_avatar--42c50 .bp_avatar_module_image--42c50.bp_avatar_module_loading--42c50{
   height:0;
   width:0;
 }
 
-.bp_avatar_module_anonymousAvatar--ed504,.bp_avatar_module_iconContainer--ed504{
+.bp_avatar_module_anonymousAvatar--42c50,.bp_avatar_module_iconContainer--42c50{
   align-items:center;
   display:flex;
   justify-content:center;
 }
 
-.bp_avatar_module_iconContainer--ed504{
+.bp_avatar_module_iconContainer--42c50{
   border-radius:50%;
   height:100%;
   width:100%;
 }
 
-[data-button-wrapper]:hover .bp_avatar_module_avatar--ed504{
+[data-button-wrapper]:hover .bp_avatar_module_avatar--42c50{
   box-shadow:0 0 0 0 var(--background-background), 0 0 0 var(--border-3) var(--bp-border-avatar-border-hover);
   cursor:pointer;
 }
-[data-button-wrapper]:active .bp_avatar_module_avatar--ed504{
+[data-button-wrapper]:active .bp_avatar_module_avatar--42c50{
   box-shadow:0 0 0 0 var(--background-background), 0 0 0 var(--border-3) var(--bp-border-avatar-border-pressed);
 }
-[data-button-wrapper][data-focus-visible] .bp_avatar_module_avatar--ed504{
+
+[data-avatar-group-item][data-focus-visible] .bp_avatar_module_avatar--42c50,[data-button-wrapper][data-focus-visible] .bp_avatar_module_avatar--42c50{
   box-shadow:0 0 0 var(--border-1, 1px) var(--background-background), 0 0 0 var(--border-3) var(--bp-outline-focus-on-light);
 }
+.bp_travel_tooltip_module_tooltip--37a55{
+  --travel-tooltip-x:0px;
+  --travel-tooltip-appear-delay:400ms;
+  align-items:center;
+  backdrop-filter:blur(16px);
+  background-color:var(--bp-surface-tooltip-surface);
+  border:var(--bp-border-01) solid var(--bp-border-tooltip-border);
+  border-radius:var(--bp-radius-04);
+  bottom:calc(100% + var(--travel-tooltip-gap, var(--bp-space-020)));
+  box-shadow:var(--dropshadow-3);
+  box-sizing:border-box;
+  color:var(--bp-text-text-on-dark);
+  display:inline-flex;
+  font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
+  font-size:var(--bp-font-size-05);
+  font-style:normal;
+  font-weight:var(--bp-font-weight-regular);
+  justify-content:center;
+  left:0;
+  letter-spacing:var(--bp-font-letter-spacing-01);
+  line-height:var(--bp-font-line-height-04);
+  opacity:0;
+  overflow:hidden;
+  padding:var(--bp-space-020) var(--bp-space-030);
+  pointer-events:none;
+  position:absolute;
+  scale:var(--bp-scale-small);
+  transform-origin:50% 100%;
+  translate:var(--travel-tooltip-x) 0;
+  white-space:nowrap;
+  width:0;
+  z-index:var(--z-index-tooltip);
+}
+:where(body.is-inter-font) .bp_travel_tooltip_module_tooltip--37a55{
+  font-family:"Inter Variable", -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
+  font-size:.875rem;
+  font-style:normal;
+  font-weight:450;
+  letter-spacing:.00625rem;
+  line-height:1.375rem;
+  text-decoration:none;
+  text-transform:none;
+}
+
+.bp_travel_tooltip_module_tooltip--37a55{
+  transition:none;
+}
+
+.bp_travel_tooltip_module_tooltip--37a55[data-show=true][data-bp-animated=true]{
+  opacity:var(--bp-opacity-visible);
+  scale:1;
+  transition:opacity var(--bp-duration-medium) var(--bp-curve-medium-on) var(--travel-tooltip-appear-delay), scale var(--bp-duration-medium) var(--bp-curve-medium-on) var(--travel-tooltip-appear-delay), translate var(--bp-duration-medium) var(--bp-curve-medium-on), width var(--bp-duration-medium) var(--bp-curve-medium-on);
+}
+
+.bp_travel_tooltip_module_tooltip--37a55[data-show=true][data-bp-animated=false]{
+  opacity:var(--bp-opacity-visible);
+  scale:1;
+}
+
+.bp_travel_tooltip_module_text--37a55{
+  white-space:nowrap;
+}
+
+@media (prefers-reduced-motion: reduce){
+  .bp_travel_tooltip_module_tooltip--37a55[data-show=true][data-bp-animated=true]{
+    transition:none;
+  }
+}
+.bp_avatar_group_module_avatarGroup--c775b{
+  --avatar-group-overlap:var(--bp-space-020, 0.5rem);
+  --avatar-group-ring-color:var(--bp-gray-white, #fff);
+  --avatar-group-ring-width:var(--bp-border-03, 0.1875rem);
+  --avatar-group-dur:200ms;
+  --avatar-group-ease-in:cubic-bezier(0.22, 1, 0.36, 1);
+  align-items:center;
+  display:inline-flex;
+  flex-direction:row;
+  isolation:isolate;
+  position:relative;
+}
+.bp_avatar_group_module_avatarGroup--c775b:has([data-focus-visible]){
+  --travel-tooltip-gap:calc(var(--bp-space-020, 0.5rem) + var(--bp-border-03, 0.1875rem));
+}
+
+.bp_avatar_group_module_item--c775b{
+  border-radius:50%;
+  display:flex;
+  flex-shrink:0;
+  position:relative;
+  z-index:0;
+}
+.bp_avatar_group_module_item--c775b,.bp_avatar_group_module_item--c775b *{
+  cursor:pointer;
+  -webkit-user-select:none;
+          user-select:none;
+}
+.bp_avatar_group_module_item--c775b:not(:first-child){
+  margin-inline-start:calc(var(--avatar-group-overlap)*-1);
+}
+.bp_avatar_group_module_item--c775b:focus,.bp_avatar_group_module_item--c775b:focus-visible{
+  outline:none;
+}
+
+.bp_avatar_group_module_itemMotion--c775b{
+  border-radius:50%;
+  box-shadow:0 0 0 var(--avatar-group-ring-width) var(--avatar-group-ring-color);
+  display:flex;
+}
+
+.bp_avatar_group_module_avatarGroup--c775b[data-bp-animated=true] .bp_avatar_group_module_itemMotion--c775b{
+  pointer-events:none;
+  transform:translateY(var(--shift, 0)) scale(var(--scale-active, 1));
+  transform-origin:center;
+  transition:transform var(--avatar-group-dur) var(--avatar-group-ease-in);
+  will-change:transform;
+}
+
+@media (prefers-reduced-motion: reduce){
+  .bp_avatar_group_module_avatarGroup--c775b[data-bp-animated=true] .bp_avatar_group_module_itemMotion--c775b{
+    transform:none;
+    transition:none;
+  }
+}
 .bp_base_badge_module_badgeContainer--cc070{
   display:inline-flex;
   position:relative;

package/dist/lib-esm/index.css

@@ -2160,7 +2160,7 @@
   background-color:initial;
   border:none;
 }
-.bp_avatar_module_avatar--ed504{
+.bp_avatar_module_avatar--42c50{
   --avatar-line-height:1;
   all:unset;
   align-items:center;
@@ -2178,7 +2178,7 @@
   line-height:var(--bp-font-line-height-04);
   position:relative;
 }
-:where(body.is-inter-font) .bp_avatar_module_avatar--ed504{
+:where(body.is-inter-font) .bp_avatar_module_avatar--42c50{
   font-family:"Inter Variable", -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:.875rem;
   font-style:normal;
@@ -2189,10 +2189,10 @@
   text-transform:none;
 }
 
-.bp_avatar_module_avatar--ed504{
+.bp_avatar_module_avatar--42c50{
   line-height:var(--avatar-line-height);
 }
-.bp_avatar_module_avatar--ed504 .bp_avatar_module_text--ed504{
+.bp_avatar_module_avatar--42c50 .bp_avatar_module_text--42c50{
   align-items:center;
   border-radius:50%;
   display:flex;
@@ -2200,14 +2200,14 @@
   justify-content:center;
   width:100%;
 }
-.bp_avatar_module_avatar--ed504.bp_avatar_module_xsmall--ed504{
+.bp_avatar_module_avatar--42c50.bp_avatar_module_xsmall--42c50{
   height:var(--bp-size-050);
   width:var(--bp-size-050);
 }
-.bp_avatar_module_avatar--ed504.bp_avatar_module_xsmall--ed504 .bp_avatar_module_text--ed504{
+.bp_avatar_module_avatar--42c50.bp_avatar_module_xsmall--42c50 .bp_avatar_module_text--42c50{
   font-size:.375rem;
 }
-.bp_avatar_module_avatar--ed504.bp_avatar_module_xsmall--ed504 .bp_avatar_module_length-1--ed504.bp_avatar_module_text--ed504,.bp_avatar_module_avatar--ed504.bp_avatar_module_xsmall--ed504 .bp_avatar_module_length-2--ed504.bp_avatar_module_text--ed504{
+.bp_avatar_module_avatar--42c50.bp_avatar_module_xsmall--42c50 .bp_avatar_module_length-1--42c50.bp_avatar_module_text--42c50,.bp_avatar_module_avatar--42c50.bp_avatar_module_xsmall--42c50 .bp_avatar_module_length-2--42c50.bp_avatar_module_text--42c50{
   font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:var(--bp-font-size-02);
   font-style:normal;
@@ -2215,7 +2215,7 @@
   letter-spacing:var(--bp-font-letter-spacing-02);
   line-height:var(--bp-font-line-height-03);
 }
-:where(body.is-inter-font) .bp_avatar_module_avatar--ed504.bp_avatar_module_xsmall--ed504 .bp_avatar_module_length-1--ed504.bp_avatar_module_text--ed504,:where(body.is-inter-font) .bp_avatar_module_avatar--ed504.bp_avatar_module_xsmall--ed504 .bp_avatar_module_length-2--ed504.bp_avatar_module_text--ed504{
+:where(body.is-inter-font) .bp_avatar_module_avatar--42c50.bp_avatar_module_xsmall--42c50 .bp_avatar_module_length-1--42c50.bp_avatar_module_text--42c50,:where(body.is-inter-font) .bp_avatar_module_avatar--42c50.bp_avatar_module_xsmall--42c50 .bp_avatar_module_length-2--42c50.bp_avatar_module_text--42c50{
   font-family:"Inter Variable", -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:.625rem;
   font-style:normal;
@@ -2226,17 +2226,17 @@
   text-transform:none;
 }
 
-.bp_avatar_module_avatar--ed504.bp_avatar_module_xsmall--ed504 .bp_avatar_module_length-1--ed504.bp_avatar_module_text--ed504,.bp_avatar_module_avatar--ed504.bp_avatar_module_xsmall--ed504 .bp_avatar_module_length-2--ed504.bp_avatar_module_text--ed504{
+.bp_avatar_module_avatar--42c50.bp_avatar_module_xsmall--42c50 .bp_avatar_module_length-1--42c50.bp_avatar_module_text--42c50,.bp_avatar_module_avatar--42c50.bp_avatar_module_xsmall--42c50 .bp_avatar_module_length-2--42c50.bp_avatar_module_text--42c50{
   line-height:var(--avatar-line-height);
 }
-.bp_avatar_module_avatar--ed504.bp_avatar_module_small--ed504{
+.bp_avatar_module_avatar--42c50.bp_avatar_module_small--42c50{
   height:var(--bp-size-060);
   width:var(--bp-size-060);
 }
-.bp_avatar_module_avatar--ed504.bp_avatar_module_small--ed504 .bp_avatar_module_text--ed504{
+.bp_avatar_module_avatar--42c50.bp_avatar_module_small--42c50 .bp_avatar_module_text--42c50{
   font-size:.5rem;
 }
-.bp_avatar_module_avatar--ed504.bp_avatar_module_small--ed504 .bp_avatar_module_length-1--ed504.bp_avatar_module_text--ed504,.bp_avatar_module_avatar--ed504.bp_avatar_module_small--ed504 .bp_avatar_module_length-2--ed504.bp_avatar_module_text--ed504{
+.bp_avatar_module_avatar--42c50.bp_avatar_module_small--42c50 .bp_avatar_module_length-1--42c50.bp_avatar_module_text--42c50,.bp_avatar_module_avatar--42c50.bp_avatar_module_small--42c50 .bp_avatar_module_length-2--42c50.bp_avatar_module_text--42c50{
   font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:var(--bp-font-size-02);
   font-style:normal;
@@ -2244,7 +2244,7 @@
   letter-spacing:var(--bp-font-letter-spacing-02);
   line-height:var(--bp-font-line-height-03);
 }
-:where(body.is-inter-font) .bp_avatar_module_avatar--ed504.bp_avatar_module_small--ed504 .bp_avatar_module_length-1--ed504.bp_avatar_module_text--ed504,:where(body.is-inter-font) .bp_avatar_module_avatar--ed504.bp_avatar_module_small--ed504 .bp_avatar_module_length-2--ed504.bp_avatar_module_text--ed504{
+:where(body.is-inter-font) .bp_avatar_module_avatar--42c50.bp_avatar_module_small--42c50 .bp_avatar_module_length-1--42c50.bp_avatar_module_text--42c50,:where(body.is-inter-font) .bp_avatar_module_avatar--42c50.bp_avatar_module_small--42c50 .bp_avatar_module_length-2--42c50.bp_avatar_module_text--42c50{
   font-family:"Inter Variable", -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:.625rem;
   font-style:normal;
@@ -2255,14 +2255,14 @@
   text-transform:none;
 }
 
-.bp_avatar_module_avatar--ed504.bp_avatar_module_small--ed504 .bp_avatar_module_length-1--ed504.bp_avatar_module_text--ed504,.bp_avatar_module_avatar--ed504.bp_avatar_module_small--ed504 .bp_avatar_module_length-2--ed504.bp_avatar_module_text--ed504{
+.bp_avatar_module_avatar--42c50.bp_avatar_module_small--42c50 .bp_avatar_module_length-1--42c50.bp_avatar_module_text--42c50,.bp_avatar_module_avatar--42c50.bp_avatar_module_small--42c50 .bp_avatar_module_length-2--42c50.bp_avatar_module_text--42c50{
   line-height:var(--avatar-line-height);
 }
-.bp_avatar_module_avatar--ed504.bp_avatar_module_medium--ed504{
+.bp_avatar_module_avatar--42c50.bp_avatar_module_medium--42c50{
   height:var(--bp-size-070);
   width:var(--bp-size-070);
 }
-.bp_avatar_module_avatar--ed504.bp_avatar_module_medium--ed504 .bp_avatar_module_text--ed504{
+.bp_avatar_module_avatar--42c50.bp_avatar_module_medium--42c50 .bp_avatar_module_text--42c50{
   font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:var(--bp-font-size-02);
   font-style:normal;
@@ -2270,7 +2270,7 @@
   letter-spacing:var(--bp-font-letter-spacing-02);
   line-height:var(--bp-font-line-height-03);
 }
-:where(body.is-inter-font) .bp_avatar_module_avatar--ed504.bp_avatar_module_medium--ed504 .bp_avatar_module_text--ed504{
+:where(body.is-inter-font) .bp_avatar_module_avatar--42c50.bp_avatar_module_medium--42c50 .bp_avatar_module_text--42c50{
   font-family:"Inter Variable", -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:.625rem;
   font-style:normal;
@@ -2281,20 +2281,20 @@
   text-transform:none;
 }
 
-.bp_avatar_module_avatar--ed504.bp_avatar_module_medium--ed504 .bp_avatar_module_text--ed504{
+.bp_avatar_module_avatar--42c50.bp_avatar_module_medium--42c50 .bp_avatar_module_text--42c50{
   line-height:var(--avatar-line-height);
 }
-.bp_avatar_module_avatar--ed504.bp_avatar_module_medium--ed504 .bp_avatar_module_length-1--ed504.bp_avatar_module_text--ed504,.bp_avatar_module_avatar--ed504.bp_avatar_module_medium--ed504 .bp_avatar_module_length-2--ed504.bp_avatar_module_text--ed504{
+.bp_avatar_module_avatar--42c50.bp_avatar_module_medium--42c50 .bp_avatar_module_length-1--42c50.bp_avatar_module_text--42c50,.bp_avatar_module_avatar--42c50.bp_avatar_module_medium--42c50 .bp_avatar_module_length-2--42c50.bp_avatar_module_text--42c50{
   font-size:.8125rem;
 }
-.bp_avatar_module_avatar--ed504.bp_avatar_module_large--ed504{
+.bp_avatar_module_avatar--42c50.bp_avatar_module_large--42c50{
   height:var(--bp-size-080);
   width:var(--bp-size-080);
 }
-.bp_avatar_module_avatar--ed504.bp_avatar_module_large--ed504 .bp_avatar_module_text--ed504{
+.bp_avatar_module_avatar--42c50.bp_avatar_module_large--42c50 .bp_avatar_module_text--42c50{
   font-size:.5rem;
 }
-.bp_avatar_module_avatar--ed504.bp_avatar_module_large--ed504 .bp_avatar_module_length-1--ed504.bp_avatar_module_text--ed504,.bp_avatar_module_avatar--ed504.bp_avatar_module_large--ed504 .bp_avatar_module_length-2--ed504.bp_avatar_module_text--ed504{
+.bp_avatar_module_avatar--42c50.bp_avatar_module_large--42c50 .bp_avatar_module_length-1--42c50.bp_avatar_module_text--42c50,.bp_avatar_module_avatar--42c50.bp_avatar_module_large--42c50 .bp_avatar_module_length-2--42c50.bp_avatar_module_text--42c50{
   font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:var(--bp-font-size-05);
   font-style:normal;
@@ -2302,7 +2302,7 @@
   letter-spacing:var(--bp-font-letter-spacing-01);
   line-height:var(--bp-font-line-height-04);
 }
-:where(body.is-inter-font) .bp_avatar_module_avatar--ed504.bp_avatar_module_large--ed504 .bp_avatar_module_length-1--ed504.bp_avatar_module_text--ed504,:where(body.is-inter-font) .bp_avatar_module_avatar--ed504.bp_avatar_module_large--ed504 .bp_avatar_module_length-2--ed504.bp_avatar_module_text--ed504{
+:where(body.is-inter-font) .bp_avatar_module_avatar--42c50.bp_avatar_module_large--42c50 .bp_avatar_module_length-1--42c50.bp_avatar_module_text--42c50,:where(body.is-inter-font) .bp_avatar_module_avatar--42c50.bp_avatar_module_large--42c50 .bp_avatar_module_length-2--42c50.bp_avatar_module_text--42c50{
   font-family:"Inter Variable", -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:.875rem;
   font-style:normal;
@@ -2313,14 +2313,14 @@
   text-transform:none;
 }
 
-.bp_avatar_module_avatar--ed504.bp_avatar_module_large--ed504 .bp_avatar_module_length-1--ed504.bp_avatar_module_text--ed504,.bp_avatar_module_avatar--ed504.bp_avatar_module_large--ed504 .bp_avatar_module_length-2--ed504.bp_avatar_module_text--ed504{
+.bp_avatar_module_avatar--42c50.bp_avatar_module_large--42c50 .bp_avatar_module_length-1--42c50.bp_avatar_module_text--42c50,.bp_avatar_module_avatar--42c50.bp_avatar_module_large--42c50 .bp_avatar_module_length-2--42c50.bp_avatar_module_text--42c50{
   line-height:var(--avatar-line-height);
 }
-.bp_avatar_module_avatar--ed504.bp_avatar_module_large--ed504 .bp_avatar_module_length-3--ed504.bp_avatar_module_text--ed504{
+.bp_avatar_module_avatar--42c50.bp_avatar_module_large--42c50 .bp_avatar_module_length-3--42c50.bp_avatar_module_text--42c50{
   font-size:.6875rem;
   line-height:var(--avatar-line-height);
 }
-.bp_avatar_module_avatar--ed504.bp_avatar_module_large--ed504 .bp_avatar_module_length-4--ed504.bp_avatar_module_text--ed504{
+.bp_avatar_module_avatar--42c50.bp_avatar_module_large--42c50 .bp_avatar_module_length-4--42c50.bp_avatar_module_text--42c50{
   font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:var(--bp-font-size-02);
   font-style:normal;
@@ -2328,7 +2328,7 @@
   letter-spacing:var(--bp-font-letter-spacing-02);
   line-height:var(--bp-font-line-height-03);
 }
-:where(body.is-inter-font) .bp_avatar_module_avatar--ed504.bp_avatar_module_large--ed504 .bp_avatar_module_length-4--ed504.bp_avatar_module_text--ed504{
+:where(body.is-inter-font) .bp_avatar_module_avatar--42c50.bp_avatar_module_large--42c50 .bp_avatar_module_length-4--42c50.bp_avatar_module_text--42c50{
   font-family:"Inter Variable", -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:.625rem;
   font-style:normal;
@@ -2339,17 +2339,17 @@
   text-transform:none;
 }
 
-.bp_avatar_module_avatar--ed504.bp_avatar_module_large--ed504 .bp_avatar_module_length-4--ed504.bp_avatar_module_text--ed504{
+.bp_avatar_module_avatar--42c50.bp_avatar_module_large--42c50 .bp_avatar_module_length-4--42c50.bp_avatar_module_text--42c50{
   line-height:var(--avatar-line-height);
 }
-.bp_avatar_module_avatar--ed504.bp_avatar_module_xlarge--ed504{
+.bp_avatar_module_avatar--42c50.bp_avatar_module_xlarge--42c50{
   height:var(--bp-size-110);
   width:var(--bp-size-110);
 }
-.bp_avatar_module_avatar--ed504.bp_avatar_module_xlarge--ed504 .bp_avatar_module_text--ed504{
+.bp_avatar_module_avatar--42c50.bp_avatar_module_xlarge--42c50 .bp_avatar_module_text--42c50{
   font-size:1rem;
 }
-.bp_avatar_module_avatar--ed504.bp_avatar_module_xlarge--ed504 .bp_avatar_module_length-1--ed504.bp_avatar_module_text--ed504,.bp_avatar_module_avatar--ed504.bp_avatar_module_xlarge--ed504 .bp_avatar_module_length-2--ed504.bp_avatar_module_text--ed504{
+.bp_avatar_module_avatar--42c50.bp_avatar_module_xlarge--42c50 .bp_avatar_module_length-1--42c50.bp_avatar_module_text--42c50,.bp_avatar_module_avatar--42c50.bp_avatar_module_xlarge--42c50 .bp_avatar_module_length-2--42c50.bp_avatar_module_text--42c50{
   font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:var(--bp-font-size-10);
   font-style:normal;
@@ -2357,7 +2357,7 @@
   letter-spacing:var(--bp-font-letter-spacing-01);
   line-height:var(--bp-font-line-height-06);
 }
-:where(body.is-inter-font) .bp_avatar_module_avatar--ed504.bp_avatar_module_xlarge--ed504 .bp_avatar_module_length-1--ed504.bp_avatar_module_text--ed504,:where(body.is-inter-font) .bp_avatar_module_avatar--ed504.bp_avatar_module_xlarge--ed504 .bp_avatar_module_length-2--ed504.bp_avatar_module_text--ed504{
+:where(body.is-inter-font) .bp_avatar_module_avatar--42c50.bp_avatar_module_xlarge--42c50 .bp_avatar_module_length-1--42c50.bp_avatar_module_text--42c50,:where(body.is-inter-font) .bp_avatar_module_avatar--42c50.bp_avatar_module_xlarge--42c50 .bp_avatar_module_length-2--42c50.bp_avatar_module_text--42c50{
   font-family:"Inter Variable", -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
   font-size:1.3125rem;
   font-style:normal;
@@ -2368,56 +2368,180 @@
   text-transform:none;
 }
 
-.bp_avatar_module_avatar--ed504.bp_avatar_module_xlarge--ed504 .bp_avatar_module_length-1--ed504.bp_avatar_module_text--ed504,.bp_avatar_module_avatar--ed504.bp_avatar_module_xlarge--ed504 .bp_avatar_module_length-2--ed504.bp_avatar_module_text--ed504{
+.bp_avatar_module_avatar--42c50.bp_avatar_module_xlarge--42c50 .bp_avatar_module_length-1--42c50.bp_avatar_module_text--42c50,.bp_avatar_module_avatar--42c50.bp_avatar_module_xlarge--42c50 .bp_avatar_module_length-2--42c50.bp_avatar_module_text--42c50{
   line-height:var(--avatar-line-height);
 }
-.bp_avatar_module_avatar--ed504.bp_avatar_module_xxlarge--ed504{
+.bp_avatar_module_avatar--42c50.bp_avatar_module_xxlarge--42c50{
   height:var(--bp-size-200);
   line-height:var(--avatar-line-height);
   width:var(--bp-size-200);
 }
-.bp_avatar_module_avatar--ed504.bp_avatar_module_xxlarge--ed504 .bp_avatar_module_text--ed504{
+.bp_avatar_module_avatar--42c50.bp_avatar_module_xxlarge--42c50 .bp_avatar_module_text--42c50{
   font-size:1.25rem;
 }
-.bp_avatar_module_avatar--ed504.bp_avatar_module_xxlarge--ed504 .bp_avatar_module_length-1--ed504.bp_avatar_module_text--ed504,.bp_avatar_module_avatar--ed504.bp_avatar_module_xxlarge--ed504 .bp_avatar_module_length-2--ed504.bp_avatar_module_text--ed504{
+.bp_avatar_module_avatar--42c50.bp_avatar_module_xxlarge--42c50 .bp_avatar_module_length-1--42c50.bp_avatar_module_text--42c50,.bp_avatar_module_avatar--42c50.bp_avatar_module_xxlarge--42c50 .bp_avatar_module_length-2--42c50.bp_avatar_module_text--42c50{
   font-size:2rem;
 }
-.bp_avatar_module_avatar--ed504.bp_avatar_module_xxlarge--ed504 .bp_avatar_module_badge--ed504{
+.bp_avatar_module_avatar--42c50.bp_avatar_module_xxlarge--42c50 .bp_avatar_module_badge--42c50{
   right:-.375rem;
 }
-.bp_avatar_module_avatar--ed504 .bp_avatar_module_image--ed504{
+.bp_avatar_module_avatar--42c50 .bp_avatar_module_image--42c50{
   border-radius:50%;
   height:100%;
   object-fit:cover;
   width:100%;
 }
-.bp_avatar_module_avatar--ed504 .bp_avatar_module_image--ed504.bp_avatar_module_loading--ed504{
+.bp_avatar_module_avatar--42c50 .bp_avatar_module_image--42c50.bp_avatar_module_loading--42c50{
   height:0;
   width:0;
 }
 
-.bp_avatar_module_anonymousAvatar--ed504,.bp_avatar_module_iconContainer--ed504{
+.bp_avatar_module_anonymousAvatar--42c50,.bp_avatar_module_iconContainer--42c50{
   align-items:center;
   display:flex;
   justify-content:center;
 }
 
-.bp_avatar_module_iconContainer--ed504{
+.bp_avatar_module_iconContainer--42c50{
   border-radius:50%;
   height:100%;
   width:100%;
 }
 
-[data-button-wrapper]:hover .bp_avatar_module_avatar--ed504{
+[data-button-wrapper]:hover .bp_avatar_module_avatar--42c50{
   box-shadow:0 0 0 0 var(--background-background), 0 0 0 var(--border-3) var(--bp-border-avatar-border-hover);
   cursor:pointer;
 }
-[data-button-wrapper]:active .bp_avatar_module_avatar--ed504{
+[data-button-wrapper]:active .bp_avatar_module_avatar--42c50{
   box-shadow:0 0 0 0 var(--background-background), 0 0 0 var(--border-3) var(--bp-border-avatar-border-pressed);
 }
-[data-button-wrapper][data-focus-visible] .bp_avatar_module_avatar--ed504{
+
+[data-avatar-group-item][data-focus-visible] .bp_avatar_module_avatar--42c50,[data-button-wrapper][data-focus-visible] .bp_avatar_module_avatar--42c50{
   box-shadow:0 0 0 var(--border-1, 1px) var(--background-background), 0 0 0 var(--border-3) var(--bp-outline-focus-on-light);
 }
+.bp_travel_tooltip_module_tooltip--37a55{
+  --travel-tooltip-x:0px;
+  --travel-tooltip-appear-delay:400ms;
+  align-items:center;
+  backdrop-filter:blur(16px);
+  background-color:var(--bp-surface-tooltip-surface);
+  border:var(--bp-border-01) solid var(--bp-border-tooltip-border);
+  border-radius:var(--bp-radius-04);
+  bottom:calc(100% + var(--travel-tooltip-gap, var(--bp-space-020)));
+  box-shadow:var(--dropshadow-3);
+  box-sizing:border-box;
+  color:var(--bp-text-text-on-dark);
+  display:inline-flex;
+  font-family:var(--bp-font-font-family), -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
+  font-size:var(--bp-font-size-05);
+  font-style:normal;
+  font-weight:var(--bp-font-weight-regular);
+  justify-content:center;
+  left:0;
+  letter-spacing:var(--bp-font-letter-spacing-01);
+  line-height:var(--bp-font-line-height-04);
+  opacity:0;
+  overflow:hidden;
+  padding:var(--bp-space-020) var(--bp-space-030);
+  pointer-events:none;
+  position:absolute;
+  scale:var(--bp-scale-small);
+  transform-origin:50% 100%;
+  translate:var(--travel-tooltip-x) 0;
+  white-space:nowrap;
+  width:0;
+  z-index:var(--z-index-tooltip);
+}
+:where(body.is-inter-font) .bp_travel_tooltip_module_tooltip--37a55{
+  font-family:"Inter Variable", -apple-system, BlinkMacSystemFont, "San Francisco", "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
+  font-size:.875rem;
+  font-style:normal;
+  font-weight:450;
+  letter-spacing:.00625rem;
+  line-height:1.375rem;
+  text-decoration:none;
+  text-transform:none;
+}
+
+.bp_travel_tooltip_module_tooltip--37a55{
+  transition:none;
+}
+
+.bp_travel_tooltip_module_tooltip--37a55[data-show=true][data-bp-animated=true]{
+  opacity:var(--bp-opacity-visible);
+  scale:1;
+  transition:opacity var(--bp-duration-medium) var(--bp-curve-medium-on) var(--travel-tooltip-appear-delay), scale var(--bp-duration-medium) var(--bp-curve-medium-on) var(--travel-tooltip-appear-delay), translate var(--bp-duration-medium) var(--bp-curve-medium-on), width var(--bp-duration-medium) var(--bp-curve-medium-on);
+}
+
+.bp_travel_tooltip_module_tooltip--37a55[data-show=true][data-bp-animated=false]{
+  opacity:var(--bp-opacity-visible);
+  scale:1;
+}
+
+.bp_travel_tooltip_module_text--37a55{
+  white-space:nowrap;
+}
+
+@media (prefers-reduced-motion: reduce){
+  .bp_travel_tooltip_module_tooltip--37a55[data-show=true][data-bp-animated=true]{
+    transition:none;
+  }
+}
+.bp_avatar_group_module_avatarGroup--c775b{
+  --avatar-group-overlap:var(--bp-space-020, 0.5rem);
+  --avatar-group-ring-color:var(--bp-gray-white, #fff);
+  --avatar-group-ring-width:var(--bp-border-03, 0.1875rem);
+  --avatar-group-dur:200ms;
+  --avatar-group-ease-in:cubic-bezier(0.22, 1, 0.36, 1);
+  align-items:center;
+  display:inline-flex;
+  flex-direction:row;
+  isolation:isolate;
+  position:relative;
+}
+.bp_avatar_group_module_avatarGroup--c775b:has([data-focus-visible]){
+  --travel-tooltip-gap:calc(var(--bp-space-020, 0.5rem) + var(--bp-border-03, 0.1875rem));
+}
+
+.bp_avatar_group_module_item--c775b{
+  border-radius:50%;
+  display:flex;
+  flex-shrink:0;
+  position:relative;
+  z-index:0;
+}
+.bp_avatar_group_module_item--c775b,.bp_avatar_group_module_item--c775b *{
+  cursor:pointer;
+  -webkit-user-select:none;
+          user-select:none;
+}
+.bp_avatar_group_module_item--c775b:not(:first-child){
+  margin-inline-start:calc(var(--avatar-group-overlap)*-1);
+}
+.bp_avatar_group_module_item--c775b:focus,.bp_avatar_group_module_item--c775b:focus-visible{
+  outline:none;
+}
+
+.bp_avatar_group_module_itemMotion--c775b{
+  border-radius:50%;
+  box-shadow:0 0 0 var(--avatar-group-ring-width) var(--avatar-group-ring-color);
+  display:flex;
+}
+
+.bp_avatar_group_module_avatarGroup--c775b[data-bp-animated=true] .bp_avatar_group_module_itemMotion--c775b{
+  pointer-events:none;
+  transform:translateY(var(--shift, 0)) scale(var(--scale-active, 1));
+  transform-origin:center;
+  transition:transform var(--avatar-group-dur) var(--avatar-group-ease-in);
+  will-change:transform;
+}
+
+@media (prefers-reduced-motion: reduce){
+  .bp_avatar_group_module_avatarGroup--c775b[data-bp-animated=true] .bp_avatar_group_module_itemMotion--c775b{
+    transform:none;
+    transition:none;
+  }
+}
 .bp_base_badge_module_badgeContainer--cc070{
   display:inline-flex;
   position:relative;

package/dist/lib-esm/index.js

@@ -1,6 +1,7 @@
 export { Accordion } from './accordion/accordion.js';
 export { ActionableInlineNotice } from './actionable-inline-notice/index.js';
 export { Avatar } from './avatar/avatar.js';
+export { AvatarGroup } from './avatar/avatar-group/avatar-group.js';
 export { IconBadge } from './badge/icon-badge.js';
 export { NumericBadge } from './badge/numeric-badge.js';
 export { StatusBadge } from './badge/status-badge.js';

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

@@ -0,0 +1,20 @@
+import { type FocusEvent, type PointerEvent, type RefObject } from 'react';
+export declare function useTravelTooltip(): {
+    activeTrigger: HTMLElement | null;
+    groupRef: RefObject<HTMLElement>;
+    hideFocusIfLeavingGroup: (event: FocusEvent<HTMLElement>) => boolean;
+    hidePointerIfLeavingGroup: (event: PointerEvent<HTMLElement>) => boolean;
+    label: string;
+    showForFocus: (trigger: HTMLElement, nextLabel?: string) => void;
+    showForPointer: (trigger: HTMLElement, nextLabel?: string) => void;
+    textRef: RefObject<HTMLSpanElement>;
+    tooltipRef: RefObject<HTMLSpanElement>;
+};
+export declare function TravelTooltipBubble({ animated, id, label, show, textRef, tooltipRef, }: {
+    animated: boolean;
+    id: string;
+    label: string;
+    show: boolean;
+    textRef: RefObject<HTMLSpanElement>;
+    tooltipRef: RefObject<HTMLSpanElement>;
+}): import("react/jsx-runtime").JSX.Element;

package/dist/lib-esm/tooltip/travel-tooltip.js

@@ -0,0 +1,100 @@
+import { jsx } from 'react/jsx-runtime';
+import { useRef, useState, useLayoutEffect } from 'react';
+import styles from './travel-tooltip.module.js';
+
+const arm = (trigger, nextLabel) => ({
+  element: trigger,
+  label: nextLabel ?? trigger.dataset.tooltip ?? ''
+});
+const leftTheGroup = event => {
+  const next = event.relatedTarget;
+  return !(next instanceof Node && event.currentTarget.contains(next));
+};
+function useTravelTooltip() {
+  const groupRef = useRef(null);
+  const tooltipRef = useRef(null);
+  const textRef = useRef(null);
+  const [hovered, setHovered] = useState(null);
+  const [focused, setFocused] = useState(null);
+  const [leader, setLeader] = useState('pointer');
+  // Latest modality leads. The other keeps the bubble open after that one leaves the group.
+  const leading = leader === 'pointer' ? hovered : focused;
+  const trailing = leader === 'pointer' ? focused : hovered;
+  const active = leading ?? trailing;
+  const activeTrigger = active?.element ?? null;
+  const label = active?.label ?? '';
+  useLayoutEffect(() => {
+    const group = groupRef.current;
+    const tooltip = tooltipRef.current;
+    const text = textRef.current;
+    if (!activeTrigger || !group || !tooltip || !text) {
+      return;
+    }
+    const groupBox = group.getBoundingClientRect();
+    const triggerBox = activeTrigger.getBoundingClientRect();
+    const computed = getComputedStyle(tooltip);
+    const pad = Number.parseFloat(computed.paddingLeft) + Number.parseFloat(computed.paddingRight);
+    const width = Math.ceil(text.scrollWidth + pad);
+    const x = triggerBox.left - groupBox.left + triggerBox.width / 2 - width / 2;
+    tooltip.style.setProperty('--travel-tooltip-x', `${x}px`);
+    tooltip.style.width = `${width}px`;
+  }, [activeTrigger, label]);
+  const showForPointer = (trigger, nextLabel) => {
+    setHovered(arm(trigger, nextLabel));
+    setLeader('pointer');
+  };
+  const showForFocus = (trigger, nextLabel) => {
+    setFocused(arm(trigger, nextLabel));
+    setLeader('focus');
+  };
+  const hidePointerIfLeavingGroup = event => {
+    if (!leftTheGroup(event)) {
+      return false;
+    }
+    setHovered(null);
+    return true;
+  };
+  const hideFocusIfLeavingGroup = event => {
+    if (!leftTheGroup(event)) {
+      return false;
+    }
+    setFocused(null);
+    return true;
+  };
+  return {
+    activeTrigger,
+    groupRef,
+    hideFocusIfLeavingGroup,
+    hidePointerIfLeavingGroup,
+    label,
+    showForFocus,
+    showForPointer,
+    textRef,
+    tooltipRef
+  };
+}
+function TravelTooltipBubble({
+  animated,
+  id,
+  label,
+  show,
+  textRef,
+  tooltipRef
+}) {
+  return jsx("span", {
+    ref: tooltipRef,
+    "aria-hidden": show ? 'false' : 'true',
+    className: styles.tooltip,
+    "data-bp-animated": animated ? 'true' : 'false',
+    "data-show": show ? 'true' : 'false',
+    id: id,
+    role: "tooltip",
+    children: jsx("span", {
+      ref: textRef,
+      className: styles.text,
+      children: label
+    })
+  });
+}
+
+export { TravelTooltipBubble, useTravelTooltip };

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

@@ -0,0 +1,4 @@
+import '../index.css';
+var styles = {"tooltip":"bp_travel_tooltip_module_tooltip--37a55","text":"bp_travel_tooltip_module_text--37a55"};
+
+export { styles as default };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@box/blueprint-web",
-    "version": "18.7.1",
+    "version": "18.8.0",
     "type": "module",
     "license": "SEE LICENSE IN LICENSE",
     "publishConfig": {
@@ -55,7 +55,7 @@
     "dependencies": {
         "@ariakit/react": "0.4.21",
         "@ariakit/react-core": "0.4.21",
-        "@box/blueprint-web-assets": "^5.13.6",
+        "@box/blueprint-web-assets": "^5.13.7",
         "@internationalized/date": "^3.12.0",
         "@radix-ui/react-accordion": "1.1.2",
         "@radix-ui/react-checkbox": "1.0.4",
@@ -85,7 +85,7 @@
     "devDependencies": {
         "@box/box-test-client": "^3.2.7",
         "@box/playwright-utils": "^2.8.5",
-        "@box/storybook-utils": "^1.4.25",
+        "@box/storybook-utils": "^1.4.26",
         "@figma/code-connect": "1.4.4",
         "@playwright/test": "1.46.1",
         "@types/js-yaml": "^4.0.9",