xertica-ui 2.7.0 → 2.9.6

package/components/brand/isotype/isotype-mini.mdx

@@ -0,0 +1,61 @@
+import { Meta, Title, Subtitle, Description } from '@storybook/addon-docs/blocks';
+
+<Meta title="Brand/Isotype/Mini" />
+
+<Title>Isotype Mini</Title>
+<Subtitle>Third mark in the Xertica isotipos series — a compact 3x3 grid.</Subtitle>
+
+---
+
+## Overview
+
+`IsotypeMini` renders a 3x3 grid of fixed brand colors that reads as a single composed image — a more compact sibling of the 4x4 `Isotype`, for spots where a full-size mark doesn't fit (e.g. beside a page title). It's built the same way as `Isotype`: one generic renderer over a pattern registry, so new 3x3 isotypes join the series as pure data, not new components.
+
+```tsx
+import { IsotypeMini } from 'xertica-ui/brand';
+
+<IsotypeMini className="w-14" />
+```
+
+---
+
+## Props
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `pattern` | `IsotypeMiniPatternId` | `'core'` | Which registered pattern to render. |
+| `variantSeed` | `number` | — | Deterministically blanks one cell for decorative variation. Omit for the pure, fully-filled base pattern. |
+| `className` | `string` | — | Additional classes on the root grid container — use for sizing (`w-14`, `w-64`, etc). `aspect-square` is built in. |
+| `aria-label` | `string` | — | Omit for decorative use (root gets `aria-hidden`); set it to render as `role="img"` instead. |
+
+---
+
+## Patterns
+
+Today the registry (`ISOTYPE_MINI_PATTERNS` in `mini-patterns.ts`) has one entry, `'core'`, reusing the exact same brand colors as the main `Isotype` grid (`ISOTYPE_COLORS` in `patterns.ts`). Add new 3x3 isotypes to the series by adding a new entry there and widening `IsotypeMiniPatternId` — `IsotypeMini.tsx` itself never needs to change.
+
+## Variants
+
+Passing `variantSeed` calls the pure, deterministic `getIsotypeMiniVariant(pattern, seed)` internally — the same `(pattern, seed)` pair always blanks the same cell. Unlike `Isotype`, the base `'core'` pattern has no inherent blank cell, so `variantSeed` always removes exactly one cell. Use it for decorative, repeated placements (e.g. a gallery of instances); canonical brand-mark spots should use the plain base pattern with no seed.
+
+```tsx
+// Canonical brand-mark placement — pure base pattern, all 9 cells filled
+<IsotypeMini />
+
+// Decorative variation — exactly one cell missing
+<IsotypeMini variantSeed={3} />
+
+// Precomputing a batch of variants (e.g. a thumbnail sheet)
+import { getIsotypeMiniVariant } from 'xertica-ui/brand';
+const variants = Array.from({ length: 8 }, (_, seed) => getIsotypeMiniVariant('core', seed));
+```
+
+---
+
+## AI Best Practices
+
+> [!IMPORTANT]
+> - **Colors are fixed brand hex values, not theme tokens** — reuses `ISOTYPE_COLORS` from `patterns.ts` verbatim; never replace with CSS custom properties.
+> - **No gaps or per-cell borders** — cells must render flush against each other so the grid reads as a single composed image.
+> - **New 3x3 isotypes are data, not components** — add patterns via `ISOTYPE_MINI_PATTERNS`/`IsotypeMiniPatternId` in `mini-patterns.ts`.
+> - **`variantSeed` is for decorative use only** — canonical placements (page headers, nav) should render the base pattern.

package/components/brand/isotype/isotype-mini.stories.tsx

@@ -0,0 +1,75 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { IsotypeMini } from './IsotypeMini';
+import { ISOTYPE_MINI_PATTERN_IDS } from './mini-patterns';
+import React from 'react';
+
+const meta: Meta<typeof IsotypeMini> = {
+  title: 'Brand/Isotype/Mini',
+  component: IsotypeMini,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    pattern: {
+      control: 'select',
+      options: ISOTYPE_MINI_PATTERN_IDS,
+    },
+    variantSeed: {
+      control: 'number',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof IsotypeMini>;
+
+export const Base: Story = {
+  args: {
+    pattern: 'core',
+    className: 'w-64',
+  },
+};
+
+export const Variant: Story = {
+  args: {
+    pattern: 'core',
+    variantSeed: 3,
+    className: 'w-64',
+  },
+};
+
+export const VariantGallery: Story = {
+  render: () => (
+    <div className="grid grid-cols-3 gap-4 p-6">
+      <IsotypeMini pattern="core" className="w-24" />
+      {Array.from({ length: 8 }, (_, seed) => (
+        <IsotypeMini key={seed} pattern="core" variantSeed={seed} className="w-24" />
+      ))}
+    </div>
+  ),
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex flex-col items-start gap-6 p-6">
+      <IsotypeMini className="w-16" />
+      <IsotypeMini className="w-32" />
+      <IsotypeMini className="w-64" />
+      <IsotypeMini className="w-96" />
+    </div>
+  ),
+};
+
+export const OnDark: Story = {
+  args: {
+    pattern: 'core',
+    className: 'w-64',
+  },
+  decorators: [
+    Story => (
+      <div className="rounded-xl bg-slate-950 p-8">
+        <Story />
+      </div>
+    ),
+  ],
+};

package/components/brand/isotype/isotype-mini.test.tsx

@@ -0,0 +1,45 @@
+import { render } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { IsotypeMini } from './IsotypeMini';
+import { getIsotypeMiniVariant } from './mini-patterns';
+import React from 'react';
+
+function countTransparentCells(container: HTMLElement): number {
+  const cells = Array.from(container.firstChild!.childNodes) as HTMLElement[];
+  return cells.filter(cell => !cell.style.backgroundColor).length;
+}
+
+function getCellColors(container: HTMLElement): string[] {
+  return Array.from(container.firstChild!.childNodes).map(
+    node => (node as HTMLElement).style.backgroundColor
+  );
+}
+
+describe('IsotypeMini', () => {
+  it('renders 9 cells with no blanks in the base pattern', () => {
+    const { container } = render(<IsotypeMini />);
+    const cells = container.firstChild!.childNodes;
+    expect(cells).toHaveLength(9);
+    expect(countTransparentCells(container)).toBe(0);
+  });
+
+  it('renders exactly 1 blank when a variantSeed is given', () => {
+    const { container } = render(<IsotypeMini variantSeed={3} />);
+    expect(countTransparentCells(container)).toBe(1);
+  });
+
+  it('getIsotypeMiniVariant is deterministic for the same seed', () => {
+    expect(getIsotypeMiniVariant('core', 5)).toEqual(getIsotypeMiniVariant('core', 5));
+  });
+
+  it('passes className through to the root', () => {
+    const { container } = render(<IsotypeMini className="w-64" />);
+    expect((container.firstChild as HTMLElement).className).toContain('w-64');
+  });
+
+  it('defaults to the core pattern', () => {
+    const { container: defaultContainer } = render(<IsotypeMini />);
+    const { container: explicitContainer } = render(<IsotypeMini pattern="core" />);
+    expect(getCellColors(defaultContainer)).toEqual(getCellColors(explicitContainer));
+  });
+});

package/components/brand/isotype/isotype-twist.test.tsx

@@ -0,0 +1,71 @@
+import { render } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { IsotypeTwist } from './IsotypeTwist';
+import { ISOTYPE_TWIST_VARIANTS, ISOTYPE_TWIST_VARIANT_IDS } from './twist-variants';
+import { ISOTYPE_COLORS } from './patterns';
+import React from 'react';
+
+describe('IsotypeTwist', () => {
+  it('renders two paths', () => {
+    const { container } = render(<IsotypeTwist />);
+    expect(container.querySelectorAll('path')).toHaveLength(2);
+  });
+
+  it('defaults to the magenta-blue variant', () => {
+    const { container } = render(<IsotypeTwist />);
+    const paths = container.querySelectorAll('path');
+    const [backKey, frontKey] = ISOTYPE_TWIST_VARIANTS['magenta-blue'];
+    expect(paths[0].getAttribute('fill')).toBe(ISOTYPE_COLORS[backKey]);
+    expect(paths[1].getAttribute('fill')).toBe(ISOTYPE_COLORS[frontKey]);
+  });
+
+  it('renders every registered variant with the right fill colors', () => {
+    for (const variant of ISOTYPE_TWIST_VARIANT_IDS) {
+      const { container } = render(<IsotypeTwist variant={variant} />);
+      const paths = container.querySelectorAll('path');
+      const [backKey, frontKey] = ISOTYPE_TWIST_VARIANTS[variant];
+      expect(paths[0].getAttribute('fill')).toBe(ISOTYPE_COLORS[backKey]);
+      expect(paths[1].getAttribute('fill')).toBe(ISOTYPE_COLORS[frontKey]);
+    }
+  });
+
+  it('passes className through to the root', () => {
+    const { container } = render(<IsotypeTwist className="w-64" />);
+    expect((container.firstChild as HTMLElement).className).toContain('w-64');
+  });
+
+  it('is decorative by default (aria-hidden, no role)', () => {
+    const { container } = render(<IsotypeTwist />);
+    const root = container.firstChild as HTMLElement;
+    expect(root.getAttribute('aria-hidden')).toBe('true');
+    expect(root.getAttribute('role')).toBeNull();
+  });
+
+  it('renders as an image with a label when aria-label is set', () => {
+    const { container } = render(<IsotypeTwist aria-label="Xertica isotype" />);
+    const root = container.firstChild as HTMLElement;
+    expect(root.getAttribute('role')).toBe('img');
+    expect(root.getAttribute('aria-label')).toBe('Xertica isotype');
+    expect(root.getAttribute('aria-hidden')).toBeNull();
+  });
+
+  it('uses a 0 0 800 694 viewBox', () => {
+    const { container } = render(<IsotypeTwist />);
+    expect(container.querySelector('svg')!.getAttribute('viewBox')).toBe('0 0 800 694');
+  });
+
+  it('renders both shapes fully opaque and blends their intersection via mix-blend-mode on the front shape', () => {
+    const { container } = render(<IsotypeTwist />);
+    const [back, front] = Array.from(container.querySelectorAll('path'));
+
+    expect(back.getAttribute('opacity')).toBeNull();
+    expect(front.getAttribute('opacity')).toBeNull();
+    expect(front.style.mixBlendMode).toBeTruthy();
+    expect(front.style.mixBlendMode).not.toBe('normal');
+  });
+
+  it('isolates the blend mode to the two shapes via the root isolate class', () => {
+    const { container } = render(<IsotypeTwist />);
+    expect((container.firstChild as HTMLElement).className).toContain('isolate');
+  });
+});

package/components/brand/isotype/isotype.mdx

@@ -0,0 +1,61 @@
+import { Meta, Title, Subtitle, Description } from '@storybook/addon-docs/blocks';
+
+<Meta title="Brand/Isotype" />
+
+<Title>Isotype</Title>
+<Subtitle>First mark in a growing series of modular 4x4 Xertica isotypes.</Subtitle>
+
+---
+
+## Overview
+
+`Isotype` renders a 4x4 grid of fixed brand colors that reads as a single composed image — a reusable visual mark for use standalone or alongside other Design System elements. It's built as one generic renderer over a pattern registry, so new isotypes join the series as pure data, not new components.
+
+```tsx
+import { Isotype } from 'xertica-ui/brand';
+
+<Isotype className="w-64" />
+```
+
+---
+
+## Props
+
+| Prop | Type | Default | Description |
+|---|---|---|---|
+| `pattern` | `IsotypePatternId` | `'core'` | Which registered pattern to render. |
+| `variantSeed` | `number` | — | Deterministically blanks one extra cell (beyond the pattern's own blank cell) for decorative variation. Omit for the pure base pattern. |
+| `className` | `string` | — | Additional classes on the root grid container — use for sizing (`w-64`, `max-w-md`, etc). `aspect-square` is built in. |
+| `aria-label` | `string` | — | Omit for decorative use (root gets `aria-hidden`); set it to render as `role="img"` instead. |
+
+---
+
+## Patterns
+
+Today the registry (`ISOTYPE_PATTERNS` in `patterns.ts`) has one entry, `'core'`. Add new isotypes to the series by adding a new entry there and widening `IsotypePatternId` — `Isotype.tsx` itself never needs to change.
+
+## Variants
+
+Passing `variantSeed` calls the pure, deterministic `getIsotypeVariant(pattern, seed)` internally — the same `(pattern, seed)` pair always blanks the same extra cell, so it's safe across server/client renders. Use it for decorative, repeated placements (e.g. a gallery of instances); canonical brand-mark spots should use the plain base pattern with no seed.
+
+```tsx
+// Canonical brand-mark placement — pure base pattern
+<Isotype />
+
+// Decorative variation
+<Isotype variantSeed={3} />
+
+// Precomputing a batch of variants (e.g. a thumbnail sheet)
+import { getIsotypeVariant } from 'xertica-ui/brand';
+const variants = Array.from({ length: 8 }, (_, seed) => getIsotypeVariant('core', seed));
+```
+
+---
+
+## AI Best Practices
+
+> [!IMPORTANT]
+> - **Colors are fixed brand hex values, not theme tokens** — the isotype is a brand identity mark and must not reskin when the active color theme changes. Never replace `ISOTYPE_COLORS` with CSS custom properties.
+> - **No gaps or per-cell borders** — cells must render flush against each other so the grid reads as a single composed image.
+> - **New isotypes are data, not components** — add patterns via `ISOTYPE_PATTERNS`/`IsotypePatternId` in `patterns.ts`.
+> - **`variantSeed` is for decorative use only** — canonical placements (Hero, nav, etc.) should render the base pattern.

package/components/brand/isotype/isotype.stories.tsx

@@ -0,0 +1,74 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Isotype } from './Isotype';
+import { ISOTYPE_PATTERN_IDS } from './patterns';
+import React from 'react';
+
+const meta: Meta<typeof Isotype> = {
+  title: 'Brand/Isotype',
+  component: Isotype,
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    pattern: {
+      control: 'select',
+      options: ISOTYPE_PATTERN_IDS,
+    },
+    variantSeed: {
+      control: 'number',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Isotype>;
+
+export const Base: Story = {
+  args: {
+    pattern: 'core',
+    className: 'w-64',
+  },
+};
+
+export const Variant: Story = {
+  args: {
+    pattern: 'core',
+    variantSeed: 3,
+    className: 'w-64',
+  },
+};
+
+export const VariantGallery: Story = {
+  render: () => (
+    <div className="grid grid-cols-4 gap-4 p-6">
+      {Array.from({ length: 8 }, (_, seed) => (
+        <Isotype key={seed} pattern="core" variantSeed={seed} className="w-24" />
+      ))}
+    </div>
+  ),
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex flex-col items-start gap-6 p-6">
+      <Isotype className="w-16" />
+      <Isotype className="w-32" />
+      <Isotype className="w-64" />
+      <Isotype className="w-96" />
+    </div>
+  ),
+};
+
+export const OnDark: Story = {
+  args: {
+    pattern: 'core',
+    className: 'w-64',
+  },
+  decorators: [
+    Story => (
+      <div className="rounded-xl bg-slate-950 p-8">
+        <Story />
+      </div>
+    ),
+  ],
+};

package/components/brand/isotype/isotype.test.tsx

@@ -0,0 +1,41 @@
+import { render } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { Isotype } from './Isotype';
+import { getIsotypeVariant, ISOTYPE_PATTERNS } from './patterns';
+import React from 'react';
+
+function countTransparentCells(container: HTMLElement): number {
+  const cells = Array.from(container.firstChild!.childNodes) as HTMLElement[];
+  return cells.filter(cell => !cell.style.backgroundColor).length;
+}
+
+describe('Isotype', () => {
+  it('renders 16 cells with exactly 1 blank in the base pattern', () => {
+    const { container } = render(<Isotype />);
+    const cells = container.firstChild!.childNodes;
+    expect(cells).toHaveLength(16);
+    expect(countTransparentCells(container)).toBe(1);
+  });
+
+  it('renders exactly 2 blanks when a variantSeed is given', () => {
+    const { container } = render(<Isotype variantSeed={3} />);
+    expect(countTransparentCells(container)).toBe(2);
+  });
+
+  it('getIsotypeVariant is deterministic for the same seed', () => {
+    expect(getIsotypeVariant('core', 5)).toEqual(getIsotypeVariant('core', 5));
+  });
+
+  it('passes className through to the root', () => {
+    const { container } = render(<Isotype className="w-64" />);
+    expect((container.firstChild as HTMLElement).className).toContain('w-64');
+  });
+
+  it('defaults to the core pattern', () => {
+    const { container } = render(<Isotype />);
+    const cells = Array.from(container.firstChild!.childNodes) as HTMLElement[];
+    const colors = cells.map(cell => cell.style.backgroundColor || 'blank');
+    const expectedBlankIndex = ISOTYPE_PATTERNS.core.indexOf('blank');
+    expect(colors[expectedBlankIndex]).toBe('blank');
+  });
+});

package/components/brand/isotype/mini-patterns.ts

@@ -0,0 +1,50 @@
+import { mulberry32, type IsotypeCell } from './patterns';
+
+/** Row-major 3x3 grid (9 cells) — a tuple so every pattern is guaranteed complete at compile time. */
+export type IsotypeMiniPattern = readonly [
+  IsotypeCell,
+  IsotypeCell,
+  IsotypeCell,
+  IsotypeCell,
+  IsotypeCell,
+  IsotypeCell,
+  IsotypeCell,
+  IsotypeCell,
+  IsotypeCell,
+];
+
+/** Widen this union as new 3x3 isotypes join the series. */
+export type IsotypeMiniPatternId = 'core';
+
+export const ISOTYPE_MINI_PATTERNS: Record<IsotypeMiniPatternId, IsotypeMiniPattern> = {
+  core: [
+    'purple', 'blue', 'blue',
+    'magenta', 'yellow', 'green',
+    'magenta', 'red', 'brown',
+  ],
+};
+
+export const ISOTYPE_MINI_PATTERN_IDS = Object.keys(
+  ISOTYPE_MINI_PATTERNS
+) as IsotypeMiniPatternId[];
+
+/**
+ * Returns a copy of the given pattern with exactly one cell (chosen
+ * deterministically from `seed`) swapped to `'blank'`. Pure — the same
+ * `(patternId, seed)` pair always returns the same result. Unlike
+ * `getIsotypeVariant`, the mini patterns have no inherent blank cell, so
+ * every cell is a candidate.
+ */
+export function getIsotypeMiniVariant(
+  patternId: IsotypeMiniPatternId,
+  seed: number
+): IsotypeMiniPattern {
+  const base = ISOTYPE_MINI_PATTERNS[patternId];
+  const candidateIndices = base.reduce<number[]>(
+    (acc, cell, i) => (cell === 'blank' ? acc : [...acc, i]),
+    []
+  );
+  const rng = mulberry32(seed);
+  const chosen = candidateIndices[Math.floor(rng() * candidateIndices.length)];
+  return base.map((cell, i) => (i === chosen ? 'blank' : cell)) as unknown as IsotypeMiniPattern;
+}

package/components/brand/isotype/patterns.ts

@@ -0,0 +1,83 @@
+/** A single color role in the fixed isotype brand palette, or an empty cell. */
+export type IsotypeColorKey = 'purple' | 'blue' | 'magenta' | 'yellow' | 'green' | 'red' | 'brown';
+
+export type IsotypeCell = IsotypeColorKey | 'blank';
+
+/** Row-major 4x4 grid (16 cells) — a tuple so every pattern is guaranteed complete at compile time. */
+export type IsotypePattern = readonly [
+  IsotypeCell,
+  IsotypeCell,
+  IsotypeCell,
+  IsotypeCell,
+  IsotypeCell,
+  IsotypeCell,
+  IsotypeCell,
+  IsotypeCell,
+  IsotypeCell,
+  IsotypeCell,
+  IsotypeCell,
+  IsotypeCell,
+  IsotypeCell,
+  IsotypeCell,
+  IsotypeCell,
+  IsotypeCell,
+];
+
+/**
+ * Fixed Xertica brand hex values for the `xertica` theme, provided directly
+ * by design. These are intentionally NOT CSS custom properties — an isotype
+ * is a brand identity mark, like a logo, and must not reskin when the
+ * active UI theme changes.
+ */
+export const ISOTYPE_COLORS: Record<IsotypeColorKey, string> = {
+  purple: '#5A4A96',
+  blue: '#1899AF',
+  magenta: '#C45BAA',
+  yellow: '#FAF338',
+  green: '#2E8B5A',
+  red: '#DE5B48',
+  brown: '#2A2415',
+};
+
+/** Widen this union as new isotypes join the series. */
+export type IsotypePatternId = 'core';
+
+export const ISOTYPE_PATTERNS: Record<IsotypePatternId, IsotypePattern> = {
+  core: [
+    'purple', 'blue', 'blue', 'blue',
+    'magenta', 'blank', 'yellow', 'green',
+    'magenta', 'yellow', 'yellow', 'green',
+    'magenta', 'red', 'red', 'brown',
+  ],
+};
+
+export const ISOTYPE_PATTERN_IDS = Object.keys(ISOTYPE_PATTERNS) as IsotypePatternId[];
+
+/** Deterministic PRNG (mulberry32) — the same seed always produces the same sequence. */
+export function mulberry32(seed: number): () => number {
+  let a = seed >>> 0;
+  return () => {
+    a |= 0;
+    a = (a + 0x6d2b79f5) | 0;
+    let t = Math.imul(a ^ (a >>> 15), 1 | a);
+    t = (t + Math.imul(t ^ (t >>> 7), 61 | t)) ^ t;
+    return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+  };
+}
+
+/**
+ * Returns a copy of the given pattern with exactly one additional non-blank
+ * cell (chosen deterministically from `seed`) swapped to `'blank'`. Pure —
+ * the same `(patternId, seed)` pair always returns the same result, and a
+ * cell that's already blank in the base pattern is never re-chosen.
+ */
+export function getIsotypeVariant(patternId: IsotypePatternId, seed: number): IsotypePattern {
+  const base = ISOTYPE_PATTERNS[patternId];
+  const candidateIndices = base.reduce<number[]>(
+    (acc, cell, i) => (cell === 'blank' ? acc : [...acc, i]),
+    []
+  );
+  const rng = mulberry32(seed);
+  const chosen = candidateIndices[Math.floor(rng() * candidateIndices.length)];
+  return base.map((cell, i) => (i === chosen ? 'blank' : cell)) as unknown as IsotypePattern;
+}

package/components/brand/isotype/twist-variants.ts

@@ -0,0 +1,20 @@
+import type { IsotypeColorKey } from './patterns';
+
+/**
+ * Ordered `[back, front]` color pair for `IsotypeTwist`. The front (second)
+ * color is painted on top and dominates the intersection blend produced by
+ * `mix-blend-mode` — the blended color is never hardcoded, only derived.
+ */
+export type IsotypeTwistPair = readonly [IsotypeColorKey, IsotypeColorKey];
+
+/** Only these two brand color pairs are in rotation — widen deliberately, not speculatively. */
+export type IsotypeTwistVariantId = 'magenta-blue' | 'blue-red';
+
+export const ISOTYPE_TWIST_VARIANTS: Record<IsotypeTwistVariantId, IsotypeTwistPair> = {
+  'magenta-blue': ['magenta', 'blue'],
+  'blue-red': ['blue', 'red'],
+};
+
+export const ISOTYPE_TWIST_VARIANT_IDS = Object.keys(
+  ISOTYPE_TWIST_VARIANTS
+) as IsotypeTwistVariantId[];

package/components/pages/forgot-password-page/ForgotPasswordPage.tsx

@@ -13,8 +13,8 @@ import { useTranslation } from 'react-i18next';
  *
  * @description
  * A screen that allows users to request a password reset link via email.
- * Includes a hero image side-panel (desktop) and alternative social login
- * options similar to the main Login page.
+ * Includes the shared brand isotype side-panel (desktop) and alternative
+ * social login options similar to the main Login page.
  *
  * @ai-rules
  * 1. Navigation: Successfully submitting the email triggers a navigation to `/verify-email`.
@@ -44,10 +44,7 @@ export function ForgotPasswordPage() {
   };
 
   return (
-    <AuthPageShell
-      imageSrc="https://images.unsplash.com/photo-1557804506-669a67965ba0?w=1200&h=800&fit=crop&auto=format"
-      imageAlt={t('forgotPassword.heroImageAlt')}
-    >
+    <AuthPageShell leftPanel="isotype">
       <div className="text-center">
         <div className="flex items-center justify-center mb-4">
           <XerticaLogo className="h-12 w-auto text-primary dark:text-foreground" variant="theme" />

package/components/pages/index.ts

@@ -1,6 +1,7 @@
 export * from './forgot-password-page';
 export * from './home-content';
 export * from './home-page';
+export * from './landing-page';
 export * from './login-page';
 export * from './reset-password-page';
 export * from './template-content';