@eocrm/design-system 0.0.0-stage → 0.6.17

package/src/components/Badge/Badge.module.scss

@@ -0,0 +1,124 @@
+@use './Badge.tokens';
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--badge-gap);
+  border-radius: var(--badge-radius);
+  font-size: var(--badge-font-size);
+  font-weight: var(--badge-font-weight);
+  letter-spacing: var(--badge-letter-spacing);
+  text-transform: uppercase;
+  white-space: nowrap;
+  line-height: var(--badge-line-height);
+}
+
+// Sizes — vertical padding is asymmetric (0 top, var(--badge-optical-offset-bottom)
+// bottom) so the visible glyphs center optically. See the token definition for
+// the reasoning.
+.sm {
+  height: var(--badge-height-sm);
+  padding: 0 var(--badge-padding-x-sm) var(--badge-optical-offset-bottom);
+  text-transform: none;
+  letter-spacing: normal;
+}
+
+.md {
+  height: var(--badge-height-md);
+  padding: 0 var(--badge-padding-x-md) var(--badge-optical-offset-bottom);
+}
+
+.neutral {
+  background: var(--badge-bg-neutral);
+  color: var(--badge-fg-neutral);
+}
+
+.info {
+  background: var(--badge-bg-info);
+  color: var(--badge-fg-info);
+}
+
+.success {
+  background: var(--badge-bg-success);
+  color: var(--badge-fg-success);
+}
+
+.warning {
+  background: var(--badge-bg-warning);
+  color: var(--badge-fg-warning);
+}
+
+.danger {
+  background: var(--badge-bg-danger);
+  color: var(--badge-fg-danger);
+}
+
+.purple {
+  background: var(--badge-bg-purple);
+  color: var(--badge-fg-purple);
+}
+
+// align="middle" — center the badge on the surrounding LINE BOX instead of
+// riding the text baseline. For badges inside a heading line (Title /
+// PageHeader.Title), where baseline riding looks sunken next to large text.
+.alignMiddle {
+  vertical-align: middle;
+}
+
+.dot {
+  width: var(--size-badge-dot);
+  height: var(--size-badge-dot);
+  border-radius: var(--radius-full);
+  background: currentColor;
+  flex-shrink: 0;
+}
+
+// Stripe variant — rectangular block with a tone-colored left stripe + tinted body.
+// Rules come AFTER the filled tone rules so .stripe.* overrides .filled tone backgrounds.
+.stripe {
+  border-radius: var(--badge-radius);
+  text-transform: none;
+  letter-spacing: normal;
+  font-weight: var(--badge-stripe-font-weight);
+
+  // Reserve transparent border-left so toggling tone doesn't shift layout.
+  border-left: var(--badge-stripe-border-width) solid transparent;
+  padding-left: var(--badge-stripe-padding-left);
+}
+
+// Stripe + tone overrides — specificity 0,2,0 beats the plain tone rules (0,1,0).
+.stripe.neutral {
+  background: var(--badge-stripe-bg-neutral);
+  color: var(--badge-stripe-fg-neutral);
+  border-left-color: var(--badge-stripe-border-color-neutral);
+}
+
+.stripe.info {
+  background: var(--badge-stripe-bg-info);
+  color: var(--badge-stripe-fg-info);
+  border-left-color: var(--badge-stripe-border-color-info);
+}
+
+.stripe.success {
+  background: var(--badge-stripe-bg-success);
+  color: var(--badge-stripe-fg-success);
+  border-left-color: var(--badge-stripe-border-color-success);
+}
+
+.stripe.warning {
+  background: var(--badge-stripe-bg-warning);
+  color: var(--badge-stripe-fg-warning);
+  border-left-color: var(--badge-stripe-border-color-warning);
+}
+
+.stripe.danger {
+  background: var(--badge-stripe-bg-danger);
+  color: var(--badge-stripe-fg-danger);
+  border-left-color: var(--badge-stripe-border-color-danger);
+}
+
+.stripe.purple {
+  background: var(--badge-stripe-bg-purple);
+  color: var(--badge-stripe-fg-purple);
+  border-left-color: var(--badge-stripe-border-color-purple);
+}

package/src/components/Badge/Badge.tokens.scss

@@ -0,0 +1,74 @@
+// Badge.tokens.scss — React-owned component tokens for <Badge>.
+:root {
+  --badge-bg-danger: var(--color-tone-danger-bg);
+  --badge-bg-info: var(--color-tone-info-bg);
+  --badge-bg-neutral: var(--color-tone-neutral-bg);
+  --badge-bg-purple: var(--color-tone-purple-bg);
+  --badge-bg-success: var(--color-tone-success-bg);
+  --badge-bg-warning: var(--color-tone-warning-bg);
+  --badge-fg-danger: var(--color-tone-danger-fg);
+  --badge-fg-info: var(--color-tone-info-fg);
+  --badge-fg-neutral: var(--color-tone-neutral-fg);
+  --badge-fg-purple: var(--color-tone-purple-fg);
+  --badge-fg-success: var(--color-tone-success-fg);
+  --badge-fg-warning: var(--color-tone-warning-fg);
+
+  --badge-radius: var(--radius-sm);
+  --badge-font-size: var(--font-size-xs);
+  --badge-font-weight: var(--font-weight-semibold);
+  --badge-letter-spacing: var(--letter-spacing-caps);
+  --badge-line-height: var(--line-height-none);
+  --badge-gap: var(--space-1);
+
+  --badge-height-sm: var(--size-badge-sm);
+  --badge-height-md: var(--size-badge);
+  --badge-padding-x-sm: var(--space-1);
+  --badge-padding-x-md: var(--space-2);
+  --badge-optical-offset-bottom: 1px;
+
+  --badge-stripe-border-width: var(--border-width-strong);
+  --badge-stripe-font-weight: var(--font-weight-medium);
+  --badge-stripe-padding-left: var(--space-2);
+
+  --badge-stripe-bg-neutral: var(--color-bg-muted);
+  --badge-stripe-fg-neutral: var(--color-fg);
+  --badge-stripe-border-color-neutral: var(--color-fg-muted);
+  --badge-stripe-bg-info: var(--color-info-bg-subtle);
+  --badge-stripe-fg-info: var(--color-info);
+  --badge-stripe-border-color-info: var(--color-info);
+  --badge-stripe-bg-success: var(--color-success-bg-subtle);
+  --badge-stripe-fg-success: var(--color-success);
+  --badge-stripe-border-color-success: var(--color-success);
+  --badge-stripe-bg-warning: var(--color-warning-bg-subtle);
+
+  // warning uses --color-warning-strong, not --color-warning, which measures
+  // @contrast --color-warning on --color-bg = 2.14:1 light
+  // @contrast --color-warning-strong on --color-bg = 5.95:1 light
+  // @contrast --color-warning on --color-warning-bg-subtle = 2.01:1 light
+  // @contrast --color-warning-strong on --color-warning-bg-subtle = 5.61:1 light
+  // 2.01:1 on the light tint (and 2.14:1 as a border on --color-bg), below WCAG AA
+  // for text and below 1.4.11's 3:1 for a graphical object. The strong variant
+  // clears both. Dark is unaffected — the two resolve to the same value there.
+  --badge-stripe-fg-warning: var(--color-warning-strong);
+  --badge-stripe-border-color-warning: var(--color-warning-strong);
+  --badge-stripe-bg-danger: var(--color-danger-bg-subtle);
+  --badge-stripe-fg-danger: var(--color-danger);
+  --badge-stripe-border-color-danger: var(--color-danger);
+  --badge-stripe-bg-purple: var(--badge-bg-purple);
+  --badge-stripe-fg-purple: var(--badge-fg-purple);
+  --badge-stripe-border-color-purple: var(--badge-fg-purple);
+
+  // Deprecated public compatibility names.
+  --color-badge-danger-bg: var(--badge-bg-danger);
+  --color-badge-danger-fg: var(--badge-fg-danger);
+  --color-badge-info-bg: var(--badge-bg-info);
+  --color-badge-info-fg: var(--badge-fg-info);
+  --color-badge-neutral-bg: var(--badge-bg-neutral);
+  --color-badge-neutral-fg: var(--badge-fg-neutral);
+  --color-badge-purple-bg: var(--badge-bg-purple);
+  --color-badge-purple-fg: var(--badge-fg-purple);
+  --color-badge-success-bg: var(--badge-bg-success);
+  --color-badge-success-fg: var(--badge-fg-success);
+  --color-badge-warning-bg: var(--badge-bg-warning);
+  --color-badge-warning-fg: var(--badge-fg-warning);
+}

package/src/components/Badge/Badge.tsx

@@ -0,0 +1,164 @@
+import { forwardRef, type CSSProperties, type HTMLAttributes } from 'react';
+import clsx from 'clsx';
+import { type PaletteColor } from '../../palette';
+import styles from './Badge.module.scss';
+
+/** Semantic tone. Use consistently across pages — `success` should never mean "bad". */
+export type BadgeTone = 'neutral' | 'info' | 'success' | 'warning' | 'danger' | 'purple';
+
+/**
+ * Visual variant.
+ * - `'filled'` (default) — solid tone-tinted pill. The standard "loud status" look.
+ * - `'stripe'` — rectangular block with a tone-colored left stripe + soft tinted body.
+ *   Use for category markers or sidebar labels where pill emphasis is too loud.
+ */
+export type BadgeVariant = 'filled' | 'stripe';
+
+/**
+ * Pill height. See BadgeProps#size for when to use each. Intentionally only
+ * two heights — a 40px badge would be Button-shaped. If you need something
+ * larger, use `<Button>` or rethink the layout.
+ */
+export type BadgeSize = 'sm' | 'md';
+
+/** Position of the optional status dot relative to the badge content. */
+export type BadgeDot = 'start' | 'end';
+
+/** Vertical alignment of the Badge on the surrounding line box. */
+export type BadgeAlign = 'baseline' | 'middle';
+
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
+  /**
+   * Semantic tone.
+   * - `neutral` (default) — generic tag, no semantic meaning.
+   * - `info` — new / in-progress / informational states ("Lead", "Pipeline 2026").
+   * - `success` — positive states ("Active", "Won", "Healthy").
+   * - `warning` — at-risk / pending states ("Renewal due", "Pending review").
+   * - `danger` — negative states ("Churned", "Lost", "Blocked").
+   * - `purple` — special / highlighted categories ("Enterprise", "VIP").
+   */
+  tone?: BadgeTone;
+  /**
+   * Pill height and emphasis.
+   * - `md` (20px, default) — the standard "loud label" pill. Uppercase, tracked,
+   *   semibold. Reads as a deliberate status marker.
+   * - `sm` (16px) — quieter inline tag for tight table cells, compact toolbars,
+   *   or anywhere a 20px uppercase pill visually crowds adjacent text. Drops
+   *   the uppercase transform and caps tracking so it sits next to body copy
+   *   without shouting; case is preserved as-typed (write `Active`, get
+   *   `Active`). Same 11px size and semibold weight as `md`.
+   */
+  size?: BadgeSize;
+  /**
+   * Render a small filled circle in the badge's text color alongside the
+   * content. Useful when the dot is the primary status signal and the label
+   * is supporting context ("● Active", "Failed ●").
+   * - `start` — dot before the content.
+   * - `end` — dot after the content.
+   *
+   * Omit for no dot. The dot is purely decorative (`aria-hidden`) — the badge
+   * text remains the accessible label.
+   */
+  dot?: BadgeDot;
+  /**
+   * Visual variant.
+   * - `'filled'` (default) — solid tone-tinted pill. The standard "loud status" look.
+   * - `'stripe'` — rectangular block with a tone-colored left stripe + soft tinted body.
+   *   Use for category markers or sidebar labels where pill emphasis is too loud.
+   */
+  variant?: BadgeVariant;
+  /**
+   * Optional categorical palette color. When set, takes precedence over
+   * `tone`: the badge fills with the matching `--color-palette-<name>-bg/fg`
+   * tokens. Use for non-semantic categorical labels (e.g., audit event
+   * namespaces, tag colors) where the 6 semantic tones aren't enough.
+   *
+   * Both filled and stripe variants are supported; for stripe the
+   * left-border picks up the palette `fg` token.
+   */
+  color?: PaletteColor;
+  /**
+   * Vertical alignment within the surrounding line of text.
+   * - `baseline` (default) — rides the text baseline; right for body-size text.
+   * - `middle` — centers the badge on the line box; use for a badge inside a
+   *   heading line (`<Title>` / `<PageHeader.Title>`), where baseline riding
+   *   makes the badge look sunken next to large text.
+   */
+  align?: BadgeAlign;
+}
+
+const toneClass: Record<BadgeTone, string> = {
+  neutral: styles.neutral,
+  info: styles.info,
+  success: styles.success,
+  warning: styles.warning,
+  danger: styles.danger,
+  purple: styles.purple,
+};
+
+const sizeClass: Record<BadgeSize, string> = {
+  sm: styles.sm,
+  md: styles.md,
+};
+
+/**
+ * Small inline pill for status, category, or count.
+ * @see docs/components/Badge.md
+ */
+export const Badge = forwardRef<HTMLSpanElement, BadgeProps>(function Badge(
+  {
+    tone = 'neutral',
+    size = 'md',
+    dot,
+    variant = 'filled',
+    color,
+    align = 'baseline',
+    className,
+    children,
+    style,
+    ...props
+  },
+  ref,
+) {
+  // When a palette color is set, inject inline bg/fg/border-left-color
+  // values that override the tone class's CSS rules (inline beats class
+  // by specificity). When color is undefined, the tone class wins
+  // unchanged — defaults are byte-identical to today.
+  const colorStyle: CSSProperties | undefined = color
+    ? variant === 'stripe'
+      ? {
+          background: `var(--color-palette-${color}-bg)`,
+          color: `var(--color-palette-${color}-fg)`,
+          borderLeftColor: `var(--color-palette-${color}-fg)`,
+        }
+      : {
+          background: `var(--color-palette-${color}-bg)`,
+          color: `var(--color-palette-${color}-fg)`,
+        }
+    : undefined;
+
+  // Merge consumer-supplied style on top of the palette style so consumer
+  // overrides still win.
+  const mergedStyle = colorStyle || style ? { ...colorStyle, ...style } : undefined;
+
+  // {...props} last so consumer overrides win (Pattern A).
+  return (
+    <span
+      ref={ref}
+      className={clsx(
+        styles.badge,
+        toneClass[tone],
+        sizeClass[size],
+        variant === 'stripe' && styles.stripe,
+        align === 'middle' && styles.alignMiddle,
+        className,
+      )}
+      style={mergedStyle}
+      {...props}
+    >
+      {dot === 'start' && <span aria-hidden="true" className={styles.dot} />}
+      {children}
+      {dot === 'end' && <span aria-hidden="true" className={styles.dot} />}
+    </span>
+  );
+});

package/src/components/Badge/index.ts

@@ -0,0 +1,2 @@
+export { Badge } from './Badge';
+export type { BadgeProps, BadgeTone, BadgeSize, BadgeDot, BadgeVariant, BadgeAlign } from './Badge';

package/src/components/Banner/Banner.module.scss

@@ -0,0 +1,73 @@
+@use './Banner.tokens';
+
+// Full-width bar: no radius, bottom rule only. Single flex-wrap row so the
+// action + × drop below the text when the slot is narrow — no breakpoint.
+.banner {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  align-items: flex-start;
+  gap: var(--banner-row-gap) var(--banner-gap);
+  width: 100%;
+  padding: var(--banner-padding-y) var(--banner-padding-x);
+  background: var(--banner-bg-info);
+  border-bottom: var(--banner-border-width) solid var(--banner-rule-info);
+  color: var(--banner-fg);
+  font-size: var(--banner-font-size);
+  line-height: 1.5;
+}
+
+.banner[data-tone='success'] {
+  background: var(--banner-bg-success);
+  border-bottom-color: var(--banner-rule-success);
+}
+
+.banner[data-tone='warning'] {
+  background: var(--banner-bg-warning);
+  border-bottom-color: var(--banner-rule-warning);
+}
+
+.banner[data-tone='danger'] {
+  background: var(--banner-bg-danger);
+  border-bottom-color: var(--banner-rule-danger);
+}
+
+.icon {
+  display: flex;
+  flex: none;
+  align-items: center;
+  min-height: var(--banner-row-height);
+  color: var(--banner-icon-info);
+}
+
+.banner[data-tone='success'] .icon {
+  color: var(--banner-icon-success);
+}
+
+.banner[data-tone='warning'] .icon {
+  color: var(--banner-icon-warning);
+}
+
+.banner[data-tone='danger'] .icon {
+  color: var(--banner-icon-danger);
+}
+
+// Internal row distribution (not the component's own placement): the text
+// takes the free space and wraps; below --banner-text-min-width the action
+// and × move onto their own line.
+.text {
+  flex: 1 1 var(--banner-text-min-width);
+  min-width: 0;
+  padding-block: var(--banner-text-padding-y);
+}
+
+.title {
+  font-weight: var(--banner-title-font-weight);
+}
+
+.action {
+  display: flex;
+  flex: none;
+  align-items: center;
+  min-height: var(--banner-row-height);
+}

package/src/components/Banner/Banner.tokens.scss

@@ -0,0 +1,51 @@
+@use '../TopBar/TopBar.tokens';
+
+// Banner.tokens.scss — Component-scoped tokens for <Banner>: the full-width
+// app/system message bar mounted in AppLayout's `banner` / `contextBanner`
+// slots. Per-tone tinted background + rule/icon colour, shared shape and type.
+:root {
+  --banner-fg: var(--color-fg);
+  --banner-padding-y: var(--space-2);
+
+  // Matches TopBar's inline padding, so in the `contextBanner` slot the icon
+  // lines up with TopBar content. In the full-width `banner` slot it shares the
+  // TopBar's inline padding but spans the sidebar too.
+  --banner-padding-x: var(--topbar-padding-x);
+  --banner-gap: var(--space-3);
+  --banner-row-gap: var(--space-1);
+  --banner-border-width: var(--border-width);
+  --banner-font-size: var(--font-size-sm);
+  --banner-title-font-weight: var(--font-weight-semibold);
+
+  // First-row height: the tallest single-row item (the xs × button), never less
+  // than one text line. Icon, action and × centre in this box; the text block is
+  // padded to match, so on a wrapped message they all sit on the FIRST line.
+  // Keep the 1.5 in sync with `.banner` line-height.
+  --banner-row-height: max(calc(var(--banner-font-size) * 1.5), var(--size-xs));
+  --banner-text-padding-y: calc((var(--banner-row-height) - var(--banner-font-size) * 1.5) / 2);
+
+  // Below this width the text block stops sharing its row and the action/×
+  // wrap onto their own line (flex-wrap, no breakpoint).
+  --banner-text-min-width: 12rem;
+
+  --banner-bg-info: var(--color-info-bg-subtle);
+  --banner-rule-info: var(--color-info);
+  --banner-icon-info: var(--color-info);
+
+  --banner-bg-success: var(--color-success-bg-subtle);
+  --banner-rule-success: var(--color-success);
+  --banner-icon-success: var(--color-success);
+
+  --banner-bg-warning: var(--color-warning-bg-subtle);
+
+  // @contrast --color-warning on --color-warning-bg-subtle = 2.01:1 light
+  // @contrast --color-warning-strong on --color-warning-bg-subtle = 5.61:1 light
+  // warning uses --color-warning-strong, not --color-warning: 2.01:1 is below the
+  // 3:1 WCAG 1.4.11 minimum for the icon and rule. Dark is unaffected.
+  --banner-rule-warning: var(--color-warning-strong);
+  --banner-icon-warning: var(--color-warning-strong);
+
+  --banner-bg-danger: var(--color-danger-bg-subtle);
+  --banner-rule-danger: var(--color-danger);
+  --banner-icon-danger: var(--color-danger);
+}

package/src/components/Banner/Banner.tsx

@@ -0,0 +1,138 @@
+import { forwardRef, type HTMLAttributes, type ReactNode } from 'react';
+import { AlertTriangle, CheckCircle2, Info, X, XCircle } from 'lucide-react';
+import clsx from 'clsx';
+import { Button } from '../Button';
+import { VisuallyHidden } from '../VisuallyHidden';
+import { useTranslation } from '../../i18n/useTranslation';
+import styles from './Banner.module.scss';
+
+/**
+ * Tone — drives the tinted background, bottom rule, icon colour, default icon,
+ * the visually hidden spoken prefix, and (with `live`) the ARIA role.
+ *
+ * - `'info'` — blue. Advance notice ("Maintenance on Saturday 22:00").
+ * - `'success'` — green. A resolved system condition ("Email sending restored").
+ * - `'warning'` — amber. Imminent or degrading ("Read-only in 30 minutes").
+ * - `'danger'` — red. Something is broken or blocked now ("Email sending
+ *   suspended"). With `live`, uses `role="alert"`. Note: this is `danger`, not
+ *   Alert's `error`.
+ */
+export type BannerTone = 'info' | 'success' | 'warning' | 'danger';
+
+export interface BannerProps extends Omit<HTMLAttributes<HTMLDivElement>, 'role' | 'title'> {
+  /**
+   * Tone. Defaults to `'info'`. `info` — advance notice; `success` — condition
+   * resolved; `warning` — imminent or degrading; `danger` — broken or blocked
+   * now. See `BannerTone`.
+   */
+  tone?: BannerTone;
+
+  /**
+   * Optional bold lead-in, rendered INLINE before `children` in the same text
+   * flow ("**Scheduled maintenance** Sat 22:00–23:00."). Keep it short — the
+   * banner is one line on desktop.
+   *
+   * Collapses the native HTML `title` (tooltip) attribute.
+   */
+  title?: ReactNode;
+
+  /** Message text. Wraps with the title. Keep to one sentence. */
+  children?: ReactNode;
+
+  /**
+   * Override the tone's default icon (any ReactNode, typically a 16px lucide
+   * icon with `aria-hidden`). `null` hides it.
+   *
+   * Defaults: `info` → `Info`, `success` → `CheckCircle2`,
+   * `warning` → `AlertTriangle`, `danger` → `XCircle`.
+   */
+  icon?: ReactNode | null;
+
+  /**
+   * One action pinned to the end of the row — typically a `<Link>` ("Details")
+   * or a `<Button size="xs">` ("Review bounces"). Banner doesn't lay out
+   * multiple actions; pass one.
+   */
+  action?: ReactNode;
+
+  /**
+   * Whether the Banner is a live region. Defaults to `false`: `role="note"`,
+   * right for a banner that is present when the app loads.
+   *
+   * Pass `live` for a banner that APPEARS mid-session. Caveat: a mid-session
+   * Banner mounts together with its text, and a `role="status"` region that
+   * mounts with its text is not reliably announced. Only `tone="danger"` +
+   * `live` (`role="alert"`) is announced on insertion. For a must-hear
+   * non-danger message, pair the banner with a `<LiveRegion>` or a toast.
+   *
+   * Decide it at mount — flipping it on a mounted Banner announces nothing.
+   * @default false
+   */
+  live?: boolean;
+
+  /**
+   * Called when the × is clicked. When set, the × renders. **Controlled** —
+   * Banner keeps no hidden state and persists nothing; the app decides what
+   * "dismissed" means (per session, per incident, per user) and stops
+   * rendering it.
+   */
+  onDismiss?: () => void;
+}
+
+const DEFAULT_ICONS: Record<BannerTone, ReactNode> = {
+  info: <Info size={16} aria-hidden="true" />,
+  success: <CheckCircle2 size={16} aria-hidden="true" />,
+  warning: <AlertTriangle size={16} aria-hidden="true" />,
+  danger: <XCircle size={16} aria-hidden="true" />,
+};
+
+/**
+ * Full-width system / app message bar for `<AppLayout>`'s `banner` and `contextBanner` slots.
+ * @see docs/components/Banner.md
+ */
+export const Banner = forwardRef<HTMLDivElement, BannerProps>(function Banner(
+  { tone = 'info', title, children, icon, action, live = false, onDismiss, className, ...props },
+  ref,
+) {
+  const t = useTranslation();
+  const role = !live ? 'note' : tone === 'danger' ? 'alert' : 'status';
+  const renderedIcon = icon === null ? null : (icon ?? DEFAULT_ICONS[tone]);
+  const hasTitle = title != null && title !== false && title !== '';
+  const hasAction = action != null && action !== false && action !== '';
+  const hasChildren = children != null && children !== false && children !== '';
+
+  return (
+    <div
+      ref={ref}
+      {...props}
+      // {...props} first so role / data-tone (the ARIA contract) win.
+      role={role}
+      data-tone={tone}
+      className={clsx(styles.banner, className)}
+    >
+      {renderedIcon && (
+        <span className={styles.icon} aria-hidden="true">
+          {renderedIcon}
+        </span>
+      )}
+      <div className={styles.text}>
+        <VisuallyHidden>{`${t(`banner.tone.${tone}`)}: `}</VisuallyHidden>
+        {hasTitle && <strong className={styles.title}>{title}</strong>}
+        {hasTitle && hasChildren && ' '}
+        {children}
+      </div>
+      {hasAction && <div className={styles.action}>{action}</div>}
+      {onDismiss && (
+        <Button
+          variant="ghost"
+          size="xs"
+          iconOnly
+          aria-label={t('banner.dismiss')}
+          onClick={onDismiss}
+        >
+          <X size={14} aria-hidden="true" />
+        </Button>
+      )}
+    </div>
+  );
+});

package/src/components/Banner/index.ts

@@ -0,0 +1,2 @@
+export { Banner } from './Banner';
+export type { BannerProps, BannerTone } from './Banner';

package/src/components/BrandIcon/BrandIcon.module.scss

@@ -0,0 +1,5 @@
+.icon {
+  display: inline-block;
+  vertical-align: middle;
+  flex: none;
+}