@eocrm/design-system 0.6.24 → 0.7.0

package/src/components/Masonry/Masonry.tsx

@@ -1,136 +0,0 @@
-import {
-  Children,
-  forwardRef,
-  isValidElement,
-  useCallback,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState,
-  type HTMLAttributes,
-  type ReactNode,
-} from 'react';
-import clsx from 'clsx';
-import { mergeRefs } from '../_internal/refs';
-import {
-  balanceColumns,
-  columnsForWidth,
-  distributionsEqual,
-  roundRobinColumns,
-} from './masonryUtils';
-import styles from './Masonry.module.scss';
-
-/** Gap between columns and between items. Same token scale as Grid/Stack. */
-export type MasonryGap = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';
-
-// Pixel value of each gap token (mirrors --space-1/2/3/4/6/8). Used only for
-// the responsive column-count math; the rendered gap uses the token classes.
-const GAP_PX: Record<MasonryGap, number> = { xs: 4, sm: 8, md: 12, lg: 16, xl: 24, '2xl': 32 };
-
-const gapClass: Record<MasonryGap, string> = {
-  xs: styles.gapXs,
-  sm: styles.gapSm,
-  md: styles.gapMd,
-  lg: styles.gapLg,
-  xl: styles.gapXl,
-  '2xl': styles.gap2xl,
-};
-
-interface MasonryBaseProps {
-  /** `xs`(4) / `sm`(8) / `md`(12, default) / `lg`(16) / `xl`(24) / `2xl`(32). */
-  gap?: MasonryGap;
-  children?: ReactNode;
-}
-interface MasonryFixedColumns extends MasonryBaseProps, HTMLAttributes<HTMLDivElement> {
-  /** Fixed number of columns. Mutually exclusive with `minColumnWidth`. */
-  columns: number;
-  minColumnWidth?: never;
-}
-interface MasonryResponsive extends MasonryBaseProps, HTMLAttributes<HTMLDivElement> {
-  /** Min column width (px) for a responsive column count. Default `'240px'`. */
-  minColumnWidth?: string;
-  columns?: never;
-}
-export type MasonryProps = MasonryFixedColumns | MasonryResponsive;
-
-/**
- * Height-balanced masonry layout: packs variable-height children into the shortest column.
- * @see docs/components/Masonry.md
- */
-export const Masonry = forwardRef<HTMLDivElement, MasonryProps>(function Masonry(
-  { gap = 'md', columns, minColumnWidth, className, children, ...rest },
-  ref,
-) {
-  const items = useMemo(() => Children.toArray(children).filter(isValidElement), [children]);
-  const itemCount = items.length;
-
-  const rootRef = useRef<HTMLDivElement | null>(null);
-  const cellRefs = useRef<Array<HTMLDivElement | null>>([]);
-
-  const parsedMinCol = minColumnWidth != null ? parseFloat(minColumnWidth) : NaN;
-  const minColPx = Number.isFinite(parsedMinCol) && parsedMinCol > 0 ? parsedMinCol : 240;
-  const fixedColumnCount = columns != null ? Math.max(1, Math.floor(columns)) : null;
-  const initialCount = fixedColumnCount ?? 1;
-
-  const [columnCount, setColumnCount] = useState(initialCount);
-  const [cols, setCols] = useState<number[][]>(() => roundRobinColumns(itemCount, initialCount));
-
-  const recompute = useCallback(() => {
-    const nextCount =
-      fixedColumnCount ?? columnsForWidth(rootRef.current?.offsetWidth ?? 0, minColPx, GAP_PX[gap]);
-    const heights = Array.from(
-      { length: itemCount },
-      (_, i) => cellRefs.current[i]?.getBoundingClientRect().height ?? 0,
-    );
-    // Before any real measurement (all heights 0 — e.g. unsized images mid-load),
-    // keep the round-robin distribution instead of collapsing into column 0.
-    const next =
-      itemCount > 0 && heights.every((h) => h === 0)
-        ? roundRobinColumns(itemCount, nextCount)
-        : balanceColumns(heights, nextCount);
-    setColumnCount((prev) => (prev === nextCount ? prev : nextCount));
-    setCols((prev) => (distributionsEqual(prev, next) ? prev : next));
-  }, [fixedColumnCount, minColPx, gap, itemCount]);
-
-  useLayoutEffect(() => {
-    recompute();
-    if (typeof ResizeObserver === 'undefined') return;
-    const ro = new ResizeObserver(() => recompute());
-    if (rootRef.current) ro.observe(rootRef.current);
-    for (let i = 0; i < itemCount; i++) {
-      const el = cellRefs.current[i];
-      if (el) ro.observe(el);
-    }
-    return () => ro.disconnect();
-  }, [recompute, itemCount]);
-
-  // Guard against a transient columnCount/distribution mismatch (the frame
-  // between the two setState calls): fall back to round-robin for that render.
-  const distribution =
-    cols.length === columnCount ? cols : roundRobinColumns(itemCount, columnCount);
-
-  return (
-    <div
-      // {...rest} last so consumer className overrides are still possible via className merge
-      ref={mergeRefs(ref, rootRef)}
-      className={clsx(styles.masonry, gapClass[gap], className)}
-      {...rest}
-    >
-      {distribution.map((indices, col) => (
-        <div key={col} className={clsx(styles.column, gapClass[gap])}>
-          {indices.map((i) => (
-            <div
-              key={i}
-              className={styles.cell}
-              ref={(el) => {
-                cellRefs.current[i] = el;
-              }}
-            >
-              {items[i]}
-            </div>
-          ))}
-        </div>
-      ))}
-    </div>
-  );
-});

package/src/components/Masonry/index.ts

@@ -1,2 +0,0 @@
-export { Masonry } from './Masonry';
-export type { MasonryProps, MasonryGap } from './Masonry';

package/src/components/Masonry/masonryUtils.ts

@@ -1,42 +0,0 @@
-/** Greedy shortest-column-first packing. Returns `columnCount` arrays of child indices. */
-export function balanceColumns(heights: number[], columnCount: number): number[][] {
-  const cols = Math.max(1, Math.floor(columnCount));
-  const out: number[][] = Array.from({ length: cols }, () => []);
-  const colHeights = new Array<number>(cols).fill(0);
-  heights.forEach((h, i) => {
-    let min = 0;
-    for (let c = 1; c < cols; c++) {
-      if (colHeights[c] < colHeights[min]) min = c;
-    }
-    out[min].push(i);
-    colHeights[min] += h;
-  });
-  return out;
-}
-
-/** How many columns of `minColumnPx` (+ `gapPx` between) fit in `width`. Never < 1. */
-export function columnsForWidth(width: number, minColumnPx: number, gapPx: number): number {
-  if (!Number.isFinite(width) || !Number.isFinite(minColumnPx) || width <= 0 || minColumnPx <= 0)
-    return 1;
-  return Math.max(1, Math.floor((width + gapPx) / (minColumnPx + gapPx)));
-}
-
-/** Index-order distribution across columns (the pre-measure / SSR first paint). */
-export function roundRobinColumns(itemCount: number, columnCount: number): number[][] {
-  const cols = Math.max(1, Math.floor(columnCount));
-  const out: number[][] = Array.from({ length: cols }, () => []);
-  for (let i = 0; i < itemCount; i++) out[i % cols].push(i);
-  return out;
-}
-
-/** Deep-equal two column distributions (used to skip no-op state updates). */
-export function distributionsEqual(a: number[][], b: number[][]): boolean {
-  if (a.length !== b.length) return false;
-  for (let c = 0; c < a.length; c++) {
-    if (a[c].length !== b[c].length) return false;
-    for (let i = 0; i < a[c].length; i++) {
-      if (a[c][i] !== b[c][i]) return false;
-    }
-  }
-  return true;
-}

package/src/components/MediaTile/MediaTile.module.scss

@@ -1,183 +0,0 @@
-@use './MediaTile.tokens';
-
-// Rule 4 note: the `position: relative/absolute` + `inset-*` + `flex` below are the
-// component's OWN internal overlay layout (the revealed bars and chips over the
-// media), not consumer-facing layout — the same overlay-child exception Image/Modal use.
-
-.root {
-  position: relative; // internal anchor for the selected ring (::after)
-  overflow: hidden;
-  display: block;
-}
-
-.placement-below {
-  display: flex;
-  flex-direction: column;
-  background: var(--mediatile-surface);
-  border: var(--mediatile-border-width) solid var(--mediatile-border);
-}
-
-// Inset ring on a last-in-tree positioned ::after, so it paints ABOVE the
-// positioned media (an outline on .root would sit under it). Never affects
-// layout, is not clipped by a scrolling grid parent, and ignores the pointer.
-.root[data-selected]::after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  box-shadow: inset 0 0 0 var(--mediatile-selected-ring-width) var(--mediatile-selected-ring);
-  pointer-events: none;
-}
-
-.radius-none {
-  border-radius: var(--mediatile-radius-none);
-}
-
-.radius-sm {
-  border-radius: var(--mediatile-radius-sm);
-}
-
-.radius-md {
-  border-radius: var(--mediatile-radius-md);
-}
-
-.radius-lg {
-  border-radius: var(--mediatile-radius-lg);
-}
-
-// Anchor for every overlay (bars, chips) — in both placements.
-.media {
-  position: relative;
-  display: block;
-}
-
-// Revealable overlays: the overlay-placement bars and the chips.
-.bar,
-.chip {
-  position: absolute;
-  opacity: var(--mediatile-opacity-hidden);
-  pointer-events: none;
-  transition: opacity var(--mediatile-reveal-transition);
-}
-
-.bar {
-  inset-inline: 0;
-  display: flex;
-  align-items: center;
-  gap: var(--mediatile-bar-gap);
-  padding: var(--mediatile-bar-padding);
-  color: var(--mediatile-fg);
-}
-
-.barTop {
-  inset-block-start: 0;
-  background: var(--mediatile-scrim-top);
-}
-
-.selectable .barTop {
-  padding-inline-start: var(--mediatile-select-clearance);
-}
-
-.barBottom {
-  inset-block-end: 0;
-  justify-content: center;
-  background: var(--mediatile-scrim-bottom);
-}
-
-// controls="bar": one full-width solid control strip across the top of the media.
-.controlBar {
-  inset-block-start: 0;
-  color: var(--mediatile-chip-fg);
-  background: var(--mediatile-chip-bg);
-  border-block-end: var(--mediatile-border-width) solid var(--mediatile-control-bar-divider);
-}
-
-// Pushes the actions to the end. Ignores the pointer so a click on the free space
-// lands on .controlBar itself (which toggles selection).
-.spacer {
-  flex: 1;
-  pointer-events: none;
-}
-
-.controlActions {
-  display: flex;
-  align-items: center;
-  gap: var(--mediatile-chip-gap);
-}
-
-.chip {
-  inset-block-start: var(--mediatile-chip-offset);
-  display: flex;
-  align-items: center;
-  gap: var(--mediatile-chip-gap);
-  padding: var(--mediatile-chip-padding);
-  color: var(--mediatile-chip-fg);
-  background: var(--mediatile-chip-bg);
-  border-radius: var(--mediatile-chip-radius);
-  box-shadow: var(--mediatile-chip-shadow);
-}
-
-.select {
-  inset-inline-start: var(--mediatile-chip-offset);
-}
-
-.actionsTop {
-  inset-inline-end: var(--mediatile-chip-offset);
-}
-
-// Reveal models — selected by the `reveal-*` modifier class on the root.
-// A checked checkbox (selected tile) always shows.
-.reveal-hover:hover :is(.bar, .chip),
-.reveal-hover:focus-within :is(.bar, .chip),
-.reveal-focus:focus-within :is(.bar, .chip),
-.reveal-visible :is(.bar, .chip),
-.root[data-selected] :is(.select, .controlBar) {
-  opacity: var(--mediatile-opacity-shown);
-  pointer-events: auto;
-}
-
-// Touch devices can't hover: 'hover' degrades to 'visible' so the controls are reachable.
-@media (hover: none) {
-  .reveal-hover :is(.bar, .chip) {
-    opacity: var(--mediatile-opacity-shown);
-    pointer-events: auto;
-  }
-}
-
-// captionPlacement="below": solid, always-visible caption bar.
-.caption {
-  display: flex;
-  align-items: center;
-  gap: var(--mediatile-bar-gap);
-  padding: var(--mediatile-bar-padding);
-  color: var(--mediatile-caption-fg);
-  background: var(--mediatile-caption-bg);
-}
-
-.title {
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  font-size: var(--mediatile-title-size);
-  font-weight: var(--mediatile-title-weight);
-}
-
-.meta {
-  flex: none;
-  font-size: var(--mediatile-meta-size);
-  opacity: var(--mediatile-meta-opacity);
-}
-
-.caption .meta {
-  color: var(--mediatile-caption-meta-fg);
-  opacity: var(--mediatile-opacity-shown);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .bar,
-  .chip {
-    transition: none;
-  }
-}

package/src/components/MediaTile/MediaTile.tokens.scss

@@ -1,60 +0,0 @@
-:root {
-  --mediatile-radius-none: 0;
-  --mediatile-radius-sm: var(--radius-sm);
-  --mediatile-radius-md: var(--radius-md);
-  --mediatile-radius-lg: var(--radius-lg);
-
-  // Semi-opaque slate scrim behind the bars (fades to transparent toward the center).
-  --mediatile-scrim: rgb(15 23 42 / 72%);
-  --mediatile-fg: var(--color-fg-on-overlay); // text/controls on the scrim
-
-  --mediatile-bar-gap: var(--space-2);
-  --mediatile-bar-padding: var(--space-2);
-  --mediatile-reveal-transition: var(--transition-fast);
-
-  --mediatile-title-size: var(--font-size-sm);
-  --mediatile-title-weight: var(--font-weight-semibold);
-  --mediatile-meta-size: var(--font-size-xs);
-  --mediatile-meta-opacity: var(--opacity-muted);
-
-  // Opacity states for the reveal animation.
-  --mediatile-opacity-hidden: var(--opacity-hidden);
-  --mediatile-opacity-shown: var(--opacity-visible);
-
-  // Gradient scrims for the top and bottom bars.
-  --mediatile-scrim-top: linear-gradient(to bottom, var(--mediatile-scrim), transparent);
-  --mediatile-scrim-bottom: linear-gradient(to top, var(--mediatile-scrim), transparent);
-
-  // captionPlacement="below": the tile reads as a card — surface + hairline border,
-  // and a solid caption bar in normal text colour under the media.
-  --mediatile-surface: var(--color-bg);
-  --mediatile-border: var(--color-border);
-  --mediatile-border-width: var(--border-width);
-  --mediatile-caption-bg: var(--color-bg);
-  --mediatile-caption-fg: var(--color-fg);
-  --mediatile-caption-meta-fg: var(--color-fg-muted);
-
-  // Surface-coloured chips over the media (selection checkbox, top-right actions),
-  // so the controls stay visible over any image, light or dark.
-  --mediatile-chip-bg: var(--color-bg);
-  --mediatile-chip-fg: var(--color-fg);
-  --mediatile-chip-radius: var(--radius-sm);
-  --mediatile-chip-padding: var(--space-1);
-  --mediatile-chip-gap: var(--space-1);
-  --mediatile-chip-offset: var(--space-2); // inset from the media's corner
-  --mediatile-chip-shadow: var(--shadow-sm);
-
-  // controls="bar": the strip uses the chip surface, with a hairline below it.
-  --mediatile-control-bar-divider: var(--color-border);
-
-  // Overlay placement + selectable: the top bar's inline-start padding clears the
-  // checkbox chip (offset + chip, i.e. md checkbox box + chip padding, + gap).
-  --mediatile-select-chip-size: calc(var(--size-checkbox-md) + 2 * var(--mediatile-chip-padding));
-  --mediatile-select-clearance: calc(
-    var(--mediatile-chip-offset) + var(--mediatile-select-chip-size) + var(--mediatile-bar-gap)
-  );
-
-  // Selected tile: inset accent ring (::after box-shadow, so it never affects layout).
-  --mediatile-selected-ring: var(--color-accent);
-  --mediatile-selected-ring-width: var(--border-width-emphasis);
-}

package/src/components/MediaTile/MediaTile.tsx

@@ -1,208 +0,0 @@
-import { forwardRef, type HTMLAttributes, type ReactNode, type SyntheticEvent } from 'react';
-import clsx from 'clsx';
-import { Checkbox } from '../Checkbox';
-import { useTranslation } from '../../i18n/useTranslation';
-import styles from './MediaTile.module.scss';
-
-/** When the overlay bars / controls reveal. */
-export type MediaTileReveal = 'hover' | 'focus' | 'visible';
-/** Corner rounding (clips the media). */
-export type MediaTileRadius = 'none' | 'sm' | 'md' | 'lg';
-/** Where `title` + `meta` render: over the media, or in a solid bar below it. */
-export type MediaTileCaptionPlacement = 'overlay' | 'below';
-/** How the selection checkbox + actions are presented in `captionPlacement="below"`. */
-export type MediaTileControls = 'chips' | 'bar';
-
-export interface MediaTileProps extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'title'> {
-  /** Tile body — full-bleed media (an `<Image>`, or a centered file-type icon). */
-  media: ReactNode;
-  /** Caption leading content (e.g. the file name). Truncates with an ellipsis. */
-  title?: ReactNode;
-  /** Caption trailing content (e.g. the file size). Sits at the end of the row. */
-  meta?: ReactNode;
-  /**
-   * Tile controls (e.g. preview / download / delete icon buttons). With
-   * `captionPlacement="overlay"` they sit in a centered bottom bar over a scrim;
-   * with `"below"` they sit in a top-right cluster over the media. Either way they
-   * follow `revealOn`. Clicks and keydowns on the controls inside don't bubble to the tile (in overlay placement a click on the bar's empty scrim still does; the below-placement chip swallows all clicks), so a
-   * tile `onClick` (e.g. open preview) never fires from an action.
-   */
-  actions?: ReactNode;
-  /**
-   * Where `title` + `meta` render. Default `'overlay'`.
-   * - `'overlay'` — a top bar over a gradient scrim on the media, revealed per `revealOn`.
-   *   Compact, but the name is hidden at rest for mouse users.
-   * - `'below'` — a solid bar under the media in normal text colour, ALWAYS visible
-   *   (not affected by `revealOn`). Use for file grids where the name must be readable.
-   */
-  captionPlacement?: MediaTileCaptionPlacement;
-  /**
-   * How the selection checkbox and `actions` are presented. Default `'chips'`.
-   * Only applies with `captionPlacement="below"`; ignored in overlay placement.
-   * - `'chips'` — two floating surface chips: checkbox top-left, actions top-right.
-   * - `'bar'` — one full-width solid bar across the top of the media (divider
-   *   below): checkbox at the start, actions at the end. Reads better over busy or
-   *   light images. Follows `revealOn`; the whole bar stays shown while selected.
-   *   When `selectable`, a click on the bar's free space toggles selection (a
-   *   pointer shortcut; the checkbox remains the keyboard control). Clicks and keys
-   *   anywhere in the bar never reach the tile `onClick` — the bar is a control
-   *   region, not the media.
-   */
-  controls?: MediaTileControls;
-  /**
-   * When the overlay bars, `actions` and the selection checkbox reveal. Default `'hover'`.
-   * - `'hover'` — on pointer hover OR keyboard focus-within (focus always included for a11y).
-   *   On touch devices (`(hover: none)`) it behaves like `'visible'`.
-   * - `'focus'` — only on focus-within (no mouse-over reveal).
-   * - `'visible'` — always shown.
-   *
-   * A checked selection checkbox is always shown regardless.
-   */
-  revealOn?: MediaTileReveal;
-  /** Corner rounding (clips the media). Default `'md'`. */
-  radius?: MediaTileRadius;
-  /**
-   * Render a selection checkbox top-left over the media. Default `false`.
-   * Only the checkbox toggles selection — clicking the tile does not (so a tile
-   * `onClick`, e.g. open preview, keeps working; checkbox clicks and keys don't bubble to it).
-   * With `revealOn="focus"` an unselected checkbox is hidden and ignores the
-   * pointer until focus-within, so mouse users can't reach it — pair
-   * `selectable` with `'hover'` or `'visible'`.
-   */
-  selectable?: boolean;
-  /** Controlled selected state (only used when `selectable`). Sets `data-selected` + an accent ring on the tile. Default `false`. */
-  selected?: boolean;
-  /** Fires with the next selected state when the checkbox is toggled. */
-  onSelectedChange?: (next: boolean) => void;
-  /**
-   * Accessible name of the selection checkbox, e.g. `"Select report.pdf"`.
-   * Defaults to the localized "Select {title}" when `title` is a string, else "Select".
-   */
-  selectLabel?: string;
-}
-
-// The tile's own onClick / onKeyDown (e.g. open preview) must not fire from its
-// controls: the checkbox chip and the actions container swallow both.
-const stop = (e: SyntheticEvent) => e.stopPropagation();
-// Overlay actions bar: stop only events from the controls inside it. The bar spans
-// the tile's full width, so a click on its empty scrim still reaches the tile.
-const stopFromChild = (e: SyntheticEvent) => {
-  if (e.target !== e.currentTarget) e.stopPropagation();
-};
-
-/**
- * Gallery / file-grid tile: full-bleed media with a title/meta caption, revealed actions and optional selection.
- * @see docs/components/MediaTile.md
- */
-// {...rest} last (Pattern A) so the consumer can add onClick / data-* to the tile.
-export const MediaTile = forwardRef<HTMLDivElement, MediaTileProps>(function MediaTile(
-  {
-    media,
-    title,
-    meta,
-    actions,
-    captionPlacement = 'overlay',
-    controls = 'chips',
-    revealOn = 'hover',
-    radius = 'md',
-    selectable = false,
-    selected = false,
-    onSelectedChange,
-    selectLabel,
-    className,
-    ...rest
-  },
-  ref,
-) {
-  const t = useTranslation();
-  const below = captionPlacement === 'below';
-  const bar = below && controls === 'bar';
-  const hasCaption = title != null || meta != null;
-  const isSelected = selectable && selected;
-  const checkbox = (
-    <Checkbox
-      checked={isSelected}
-      onChange={(next) => onSelectedChange?.(next)}
-      aria-label={
-        selectLabel ||
-        (typeof title === 'string' && title
-          ? t('mediaTile.selectNamed', { name: title })
-          : t('mediaTile.select'))
-      }
-    />
-  );
-  const caption = (
-    <>
-      {title != null && <span className={styles.title}>{title}</span>}
-      {meta != null && <span className={styles.meta}>{meta}</span>}
-    </>
-  );
-
-  return (
-    <div
-      ref={ref}
-      className={clsx(
-        styles.root,
-        below && styles['placement-below'],
-        styles[`radius-${radius}`],
-        styles[`reveal-${revealOn}`],
-        selectable && styles.selectable,
-        className,
-      )}
-      data-selected={isSelected || undefined}
-      {...rest}
-    >
-      <div className={styles.media}>
-        {media}
-
-        {!below && hasCaption && <div className={clsx(styles.bar, styles.barTop)}>{caption}</div>}
-
-        {bar ? (
-          (selectable || actions != null) && (
-            // One control region: nothing in it reaches the tile. A click on its
-            // free space toggles selection (the spacer ignores the pointer, so free
-            // space is always the bar itself).
-            <div
-              className={clsx(styles.bar, styles.controlBar)}
-              onClick={(e) => {
-                e.stopPropagation();
-                if (selectable && e.target === e.currentTarget) onSelectedChange?.(!isSelected);
-              }}
-              onKeyDown={stop}
-            >
-              {selectable && checkbox}
-              <span className={styles.spacer} />
-              {actions != null && <div className={styles.controlActions}>{actions}</div>}
-            </div>
-          )
-        ) : (
-          <>
-            {selectable && (
-              // Stops the checkbox's clicks (label + synthetic input click) and keys reaching the tile.
-              <div className={clsx(styles.chip, styles.select)} onClick={stop} onKeyDown={stop}>
-                {checkbox}
-              </div>
-            )}
-
-            {actions != null && (
-              <div
-                className={
-                  below ? clsx(styles.chip, styles.actionsTop) : clsx(styles.bar, styles.barBottom)
-                }
-                // Below: the chip is a visible pill — a misclick in its padding/gap is
-                // still "on the controls". Overlay: the bar spans the tile, so its empty
-                // scrim is the tile.
-                onClick={below ? stop : stopFromChild}
-                onKeyDown={below ? stop : stopFromChild}
-              >
-                {actions}
-              </div>
-            )}
-          </>
-        )}
-      </div>
-
-      {below && hasCaption && <div className={styles.caption}>{caption}</div>}
-    </div>
-  );
-});

package/src/components/MediaTile/index.ts

@@ -1,8 +0,0 @@
-export { MediaTile } from './MediaTile';
-export type {
-  MediaTileProps,
-  MediaTileReveal,
-  MediaTileRadius,
-  MediaTileCaptionPlacement,
-  MediaTileControls,
-} from './MediaTile';

package/src/components/Modal/Body.tsx

@@ -1,27 +0,0 @@
-import { forwardRef, type HTMLAttributes } from 'react';
-import clsx from 'clsx';
-import styles from './Modal.module.scss';
-
-export interface ModalBodyProps extends HTMLAttributes<HTMLDivElement> {
-  /** Override body's padding. Default 'default' (--space-4). 'none' for edge-to-edge content. */
-  padding?: 'default' | 'none';
-}
-
-/**
- * Scrollable content area between the Header and Footer; `padding="none"` for edge-to-edge content.
- * @see docs/components/Modal.md
- */
-export const Body = forwardRef<HTMLDivElement, ModalBodyProps>(function Body(
-  { padding = 'default', className, children, ...rest },
-  ref,
-) {
-  return (
-    <div
-      ref={ref}
-      className={clsx(styles.body, padding === 'none' && styles.bodyPaddingNone, className)}
-      {...rest}
-    >
-      {children}
-    </div>
-  );
-});