@umituz/web-dashboard 6.0.0 → 6.1.0

package/src/domains/onboarding/components/hooks/useOnboardingProgress.test.tsx

@@ -0,0 +1,150 @@
+import { describe, it, expect, beforeEach } from 'vitest';
+import { act, renderHook } from '@testing-library/react';
+import { useOnboardingProgress } from './useOnboardingProgress';
+import { defaultStorageKey } from '../../utils/default-storage-key';
+import type { OnboardingScreen } from '../../types/screens';
+
+function makeScreens(count: number): OnboardingScreen[] {
+  return Array.from({ length: count }, (_, i) => ({
+    id: `s${i}`,
+    type: 'welcome',
+    title: `Step ${i}`,
+  }));
+}
+
+beforeEach(() => {
+  window.localStorage.clear();
+});
+
+describe('useOnboardingProgress — state machine (§1.1, §1.2)', () => {
+  it('starts on the first screen', () => {
+    const { result } = renderHook(() =>
+      useOnboardingProgress({ screens: makeScreens(3) }),
+    );
+    expect(result.current.currentStep).toBe(0);
+    expect(result.current.isFirst).toBe(true);
+    expect(result.current.isLast).toBe(false);
+    expect(result.current.isFinished).toBe(false);
+    expect(result.current.totalSteps).toBe(3);
+  });
+
+  it('advances, records completion, and collects data', () => {
+    const { result } = renderHook(() =>
+      useOnboardingProgress({ screens: makeScreens(3), ephemeral: true }),
+    );
+    act(() => result.current.next({ selected: ['x'] }));
+    expect(result.current.currentStep).toBe(1);
+    expect(result.current.completedSteps).toEqual(['s0']);
+    expect(result.current.collected).toEqual({ s0: { selected: ['x'] } });
+    expect(result.current.isFirst).toBe(false);
+  });
+
+  it('retreats with prev and stops at the first screen', () => {
+    const { result } = renderHook(() =>
+      useOnboardingProgress({ screens: makeScreens(3), ephemeral: true }),
+    );
+    act(() => result.current.next());
+    act(() => result.current.next());
+    act(() => result.current.prev());
+    expect(result.current.currentStep).toBe(1);
+    act(() => result.current.prev());
+    act(() => result.current.prev()); // below zero — must clamp
+    expect(result.current.currentStep).toBe(0);
+  });
+
+  it('finish() marks the flow finished and returns a result', () => {
+    const { result } = renderHook(() =>
+      useOnboardingProgress({ screens: makeScreens(2), ephemeral: true }),
+    );
+    act(() => result.current.next());
+    let returned: ReturnType<typeof result.current.finish> | undefined;
+    act(() => {
+      returned = result.current.finish({ final: true });
+    });
+    expect(result.current.isFinished).toBe(true);
+    expect(result.current.result).not.toBeNull();
+    expect(result.current.result?.durationMs).toBeGreaterThanOrEqual(0);
+    expect(returned?.collected).toEqual({ s1: { final: true } });
+  });
+
+  it('next() on the last screen finishes the flow', () => {
+    const { result } = renderHook(() =>
+      useOnboardingProgress({ screens: makeScreens(2), ephemeral: true }),
+    );
+    act(() => result.current.next());
+    act(() => result.current.next()); // last screen -> finish
+    expect(result.current.isFinished).toBe(true);
+    expect(result.current.completedSteps).toEqual(['s0', 's1']);
+  });
+
+  it('reset() rewinds and clears stored progress (§16.1)', () => {
+    const { result } = renderHook(() =>
+      useOnboardingProgress({ screens: makeScreens(3), storageKey: 'k' }),
+    );
+    act(() => result.current.next({ selected: ['x'] }));
+    expect(JSON.parse(localStorage.getItem('k') ?? '{}').currentStep).toBe(1);
+    act(() => result.current.reset());
+    expect(result.current.currentStep).toBe(0);
+    expect(result.current.completedSteps).toEqual([]);
+    expect(result.current.collected).toEqual({});
+    // The stale checkpoint is gone; the persist effect re-saves a fresh one.
+    const stored = JSON.parse(localStorage.getItem('k') ?? 'null');
+    expect(stored).not.toBeNull();
+    expect(stored.currentStep).toBe(0);
+    expect(stored.completedSteps).toEqual([]);
+  });
+
+  it('goTo() clamps out-of-range indices', () => {
+    const { result } = renderHook(() =>
+      useOnboardingProgress({ screens: makeScreens(3), ephemeral: true }),
+    );
+    act(() => result.current.goTo(99));
+    expect(result.current.currentStep).toBe(2);
+    act(() => result.current.goTo(-5));
+    expect(result.current.currentStep).toBe(0);
+  });
+});
+
+describe('useOnboardingProgress — persistence (§1.4, §1.5, §1.6)', () => {
+  it('persists after each transition and rehydrates on a fresh mount', () => {
+    const screens = makeScreens(4);
+    const first = renderHook(() => useOnboardingProgress({ screens, storageKey: 'resume' }));
+    act(() => first.result.current.next({ selected: ['a'] }));
+    act(() => first.result.current.next());
+    first.unmount();
+    expect(JSON.parse(localStorage.getItem('resume') ?? '{}').currentStep).toBe(2);
+
+    const second = renderHook(() => useOnboardingProgress({ screens, storageKey: 'resume' }));
+    expect(second.result.current.currentStep).toBe(2);
+    expect(second.result.current.collected).toEqual({ s0: { selected: ['a'] } });
+    second.unmount();
+  });
+
+  it('never touches storage in ephemeral mode', () => {
+    const { result } = renderHook(() =>
+      useOnboardingProgress({ screens: makeScreens(2), ephemeral: true }),
+    );
+    act(() => result.current.next());
+    expect(localStorage.getItem(defaultStorageKey)).toBeNull();
+  });
+
+  it('rehydration past the end of a shortened flow starts fresh', () => {
+    // Progress stored for 4 screens; the app now ships 2. currentStep=3 is
+    // out of bounds and must not be restored.
+    localStorage.setItem(
+      'short',
+      JSON.stringify({
+        version: 1,
+        currentStep: 3,
+        completedSteps: ['s0', 's1', 's2'],
+        collected: {},
+        startedAt: new Date().toISOString(),
+        lastUpdated: new Date().toISOString(),
+      }),
+    );
+    const { result } = renderHook(() =>
+      useOnboardingProgress({ screens: makeScreens(2), storageKey: 'short' }),
+    );
+    expect(result.current.currentStep).toBe(0);
+  });
+});

package/src/domains/onboarding/components/hooks/useOnboardingProgress.ts

@@ -0,0 +1,260 @@
+import { useCallback, useEffect, useMemo, useReducer } from 'react';
+import type { OnboardingScreen } from '../../types/screens';
+import type { OnboardingResult } from '../../types/config';
+import {
+  advanceStepIndex,
+  clampStepIndex,
+  retreatStepIndex,
+} from '../../calc/step-index-clamp';
+import {
+  computeProgressFraction,
+  computeRemainingSteps,
+} from '../../calc/progress-percentage';
+import {
+  buildOnboardingResult,
+  clearOnboardingProgress,
+  loadOnboardingProgress,
+  saveOnboardingProgress,
+} from '../../utils/local-storage-bridge';
+
+interface ProgressState {
+  currentStep: number;
+  totalSteps: number;
+  completedSteps: ReadonlyArray<string>;
+  collected: Record<string, unknown>;
+  startedAt: Date;
+  lastUpdated: Date;
+  finishedAt: Date | null;
+}
+
+type ProgressAction =
+  | { type: 'next'; currentScreen: OnboardingScreen; data?: unknown }
+  | { type: 'previous' }
+  | { type: 'goto'; index: number }
+  | { type: 'reset' }
+  | { type: 'finish'; currentScreen: OnboardingScreen; data?: unknown }
+  | { type: 'hydrate'; state: ProgressState };
+
+function reducer(state: ProgressState, action: ProgressAction): ProgressState {
+  switch (action.type) {
+    case 'next': {
+      const completed = state.completedSteps.includes(action.currentScreen.id)
+        ? state.completedSteps
+        : [...state.completedSteps, action.currentScreen.id];
+      const collected =
+        action.data !== undefined
+          ? { ...state.collected, [action.currentScreen.id]: action.data }
+          : state.collected;
+      return {
+        ...state,
+        currentStep: advanceStepIndex(state.currentStep, state.totalSteps),
+        completedSteps: completed,
+        collected,
+        lastUpdated: new Date(),
+      };
+    }
+    case 'previous':
+      return { ...state, currentStep: retreatStepIndex(state.currentStep), lastUpdated: new Date() };
+    case 'goto':
+      return {
+        ...state,
+        currentStep: clampStepIndex(action.index, state.totalSteps),
+        lastUpdated: new Date(),
+      };
+    case 'finish': {
+      const completed = state.completedSteps.includes(action.currentScreen.id)
+        ? state.completedSteps
+        : [...state.completedSteps, action.currentScreen.id];
+      const collected =
+        action.data !== undefined
+          ? { ...state.collected, [action.currentScreen.id]: action.data }
+          : state.collected;
+      return {
+        ...state,
+        completedSteps: completed,
+        collected,
+        finishedAt: new Date(),
+        lastUpdated: new Date(),
+      };
+    }
+    case 'reset':
+      return {
+        ...state,
+        currentStep: 0,
+        completedSteps: [],
+        collected: {},
+        finishedAt: null,
+        lastUpdated: new Date(),
+        startedAt: new Date(),
+      };
+    case 'hydrate':
+      return action.state;
+    default:
+      return state;
+  }
+}
+
+interface UseOnboardingProgressOptions {
+  screens: ReadonlyArray<OnboardingScreen>;
+  storageKey?: string;
+  /** Disable persistence (e.g. tests, ephemeral previews). */
+  ephemeral?: boolean;
+}
+
+export interface UseOnboardingProgressReturn {
+  currentStep: number;
+  totalSteps: number;
+  progress: number; // 0..1
+  completedSteps: ReadonlyArray<string>;
+  collected: Record<string, unknown>;
+  remainingSteps: number;
+  isFirst: boolean;
+  isLast: boolean;
+  isFinished: boolean;
+  /** When the current run started (restored from storage on rehydration). */
+  startedAt: Date;
+  next: (data?: unknown) => void;
+  prev: () => void;
+  goTo: (index: number) => void;
+  reset: () => void;
+  finish: (data?: unknown) => OnboardingResult;
+  result: OnboardingResult | null;
+}
+
+/**
+ * Owns the state machine for an onboarding flow.
+ * Single responsibility: step transitions, persistence, completion.
+ * Math is delegated to `src/calc/`; storage I/O to `src/utils/local-storage-bridge`.
+ */
+export function useOnboardingProgress(
+  options: UseOnboardingProgressOptions,
+): UseOnboardingProgressReturn {
+  const { screens, storageKey, ephemeral = false } = options;
+  const totalSteps = screens.length;
+
+  const initialState = useMemo<ProgressState>(() => {
+    const now = new Date();
+    if (!ephemeral) {
+      const restored = loadOnboardingProgress(storageKey);
+      if (restored && restored.currentStep < totalSteps) {
+        return {
+          currentStep: restored.currentStep,
+          totalSteps,
+          completedSteps: restored.completedSteps,
+          collected: restored.collected,
+          startedAt: restored.startedAt,
+          lastUpdated: restored.lastUpdated,
+          finishedAt: null,
+        };
+      }
+    }
+    return {
+      currentStep: 0,
+      totalSteps,
+      completedSteps: [],
+      collected: {},
+      startedAt: now,
+      lastUpdated: now,
+      finishedAt: null,
+    };
+    // useReducer reads `initialState` only on mount, so this is effectively mount-only.
+    // We recompute if the screen set actually changes (different totalSteps).
+  }, [totalSteps, storageKey, ephemeral]);
+
+  const [state, dispatch] = useReducer(reducer, initialState);
+
+  // Persist whenever the state changes.
+  useEffect(() => {
+    if (ephemeral) return;
+    saveOnboardingProgress(storageKey, {
+      currentStep: state.currentStep,
+      completedSteps: state.completedSteps,
+      collected: state.collected,
+      startedAt: state.startedAt,
+      lastUpdated: state.lastUpdated,
+    });
+  }, [
+    ephemeral,
+    storageKey,
+    state.currentStep,
+    state.completedSteps,
+    state.collected,
+    state.startedAt,
+    state.lastUpdated,
+  ]);
+
+  const next = useCallback(
+    (data?: unknown) => {
+      const currentScreen = screens[state.currentStep];
+      if (!currentScreen) return;
+      if (state.currentStep === state.totalSteps - 1) {
+        dispatch({ type: 'finish', currentScreen, data });
+      } else {
+        dispatch({ type: 'next', currentScreen, data });
+      }
+    },
+    [screens, state.currentStep, state.totalSteps],
+  );
+
+  const prev = useCallback(() => dispatch({ type: 'previous' }), []);
+  const goTo = useCallback((index: number) => dispatch({ type: 'goto', index }), []);
+  const reset = useCallback(() => {
+    if (!ephemeral) clearOnboardingProgress(storageKey);
+    dispatch({ type: 'reset' });
+  }, [ephemeral, storageKey]);
+
+  const finish = useCallback(
+    (data?: unknown) => {
+      const currentScreen = screens[state.currentStep];
+      if (currentScreen) dispatch({ type: 'finish', currentScreen, data });
+      const finishedAt = new Date();
+      return buildOnboardingResult({
+        completedSteps:
+          currentScreen && !state.completedSteps.includes(currentScreen.id)
+            ? [...state.completedSteps, currentScreen.id]
+            : state.completedSteps,
+        collected:
+          currentScreen && data !== undefined
+            ? { ...state.collected, [currentScreen.id]: data }
+            : state.collected,
+        startedAt: state.startedAt,
+        finishedAt,
+      });
+    },
+    [screens, state.currentStep, state.completedSteps, state.collected, state.startedAt],
+  );
+
+  const progress = computeProgressFraction(state.currentStep, state.totalSteps);
+  const remainingSteps = computeRemainingSteps(state.currentStep, state.totalSteps);
+  const isFirst = state.currentStep === 0;
+  const isLast = state.currentStep === state.totalSteps - 1;
+  const isFinished = state.finishedAt !== null;
+  const result =
+    state.finishedAt !== null
+      ? buildOnboardingResult({
+          completedSteps: state.completedSteps,
+          collected: state.collected,
+          startedAt: state.startedAt,
+          finishedAt: state.finishedAt,
+        })
+      : null;
+
+  return {
+    currentStep: state.currentStep,
+    totalSteps,
+    progress,
+    completedSteps: state.completedSteps,
+    collected: state.collected,
+    remainingSteps,
+    isFirst,
+    isLast,
+    isFinished,
+    startedAt: state.startedAt,
+    next,
+    prev,
+    goTo,
+    reset,
+    finish,
+    result,
+  };
+}

package/src/domains/onboarding/components/hooks/usePermissionPriming.ts

@@ -0,0 +1,52 @@
+import { useCallback, useEffect, useState } from 'react';
+import type { PermissionStatus, PermissionType } from '../../types/screens';
+import {
+  isPermissionDecided,
+  isPermissionUnsupported,
+} from '../../predicates/permission-granted';
+import { queryPermissionStatus, requestPermission } from '../../utils/permission-bridge';
+
+export interface UsePermissionPrimingReturn {
+  status: PermissionStatus;
+  isRequesting: boolean;
+  requestPermission: () => Promise<PermissionStatus>;
+  reset: () => void;
+}
+
+/**
+ * Owns permission state for a single permission type.
+ * Single responsibility: query + request lifecycle, no UI.
+ *
+ * The `requestPermission` callback is a no-op (returns the current status)
+ * once the permission has been decided or the runtime reports no support.
+ */
+export function usePermissionPriming(permission: PermissionType): UsePermissionPrimingReturn {
+  const [status, setStatus] = useState<PermissionStatus>('prompt');
+  const [isRequesting, setIsRequesting] = useState(false);
+
+  useEffect(() => {
+    let cancelled = false;
+    queryPermissionStatus(permission).then((initial) => {
+      if (!cancelled) setStatus(initial);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [permission]);
+
+  const request = useCallback(async (): Promise<PermissionStatus> => {
+    if (isPermissionDecided(status) || isPermissionUnsupported(status)) return status;
+    setIsRequesting(true);
+    try {
+      const next = await requestPermission(permission);
+      setStatus(next);
+      return next;
+    } finally {
+      setIsRequesting(false);
+    }
+  }, [permission, status]);
+
+  const reset = useCallback(() => setStatus('prompt'), []);
+
+  return { status, isRequesting, requestPermission: request, reset };
+}

package/src/domains/onboarding/components/hooks/useReducedMotion.ts

@@ -0,0 +1,24 @@
+import { useEffect, useState } from 'react';
+
+/**
+ * Detects the user's `prefers-reduced-motion` setting.
+ * Single responsibility: surface the OS-level preference to consumers so
+ * motion-heavy UI (Framer Motion, transitions) can opt out for accessibility.
+ */
+export function useReducedMotion(): boolean {
+  const getInitial = (): boolean => {
+    if (typeof window === 'undefined' || !window.matchMedia) return false;
+    return window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+  };
+  const [reduced, setReduced] = useState<boolean>(getInitial);
+
+  useEffect(() => {
+    if (typeof window === 'undefined' || !window.matchMedia) return;
+    const mql = window.matchMedia('(prefers-reduced-motion: reduce)');
+    const handler = (e: MediaQueryListEvent) => setReduced(e.matches);
+    mql.addEventListener('change', handler);
+    return () => mql.removeEventListener('change', handler);
+  }, []);
+
+  return reduced;
+}

package/src/domains/onboarding/components/screens/AccountGateScreen.tsx

@@ -0,0 +1,89 @@
+import { useState } from 'react';
+import { PrimaryButton } from '../shared/PrimaryButton';
+import {
+  accountGateAllowsSkip,
+  hasOnSignIn,
+} from '../../predicates/has-handler';
+import { useOnboardingIntl } from '../OnboardingIntl';
+import type { AccountGateScreenConfig, SignInMethod } from '../../types/screens';
+import type { OnboardingLabels } from '../../types/config';
+
+export interface AccountGateScreenProps {
+  config: AccountGateScreenConfig;
+  onNext: (data: { signedIn: boolean; method?: SignInMethod }) => void;
+}
+
+function methodLabel(method: SignInMethod, labels: OnboardingLabels): string {
+  switch (method) {
+    case 'email':
+      return labels.continueWithEmail;
+    case 'google':
+      return labels.continueWithGoogle;
+    case 'apple':
+      return labels.continueWithApple;
+    case 'github':
+      return labels.continueWithGitHub;
+  }
+}
+
+export function AccountGateScreen({ config, onNext }: AccountGateScreenProps) {
+  const { labels } = useOnboardingIntl();
+  const [busy, setBusy] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+
+  // Step lifecycle analytics (`onboarding_step_completed`) are owned by the
+  // orchestrator — the screen stays presentation-only.
+
+  async function handleSignIn(method: SignInMethod) {
+    setBusy(true);
+    setError(null);
+    try {
+      const result = await config.onSignIn(method);
+      onNext(result);
+    } catch (e) {
+      const message = e instanceof Error ? e.message : labels.signInFailed;
+      setError(message);
+    } finally {
+      setBusy(false);
+    }
+  }
+
+  return (
+    <div className="flex flex-1 flex-col items-center justify-center gap-6 text-center">
+      {config.title && (
+        <h2 className="text-3xl font-bold text-[rgb(var(--uob-text-primary))]">{config.title}</h2>
+      )}
+      {config.subtitle && (
+        <p className="text-base text-[rgb(var(--uob-text-muted))]">{config.subtitle}</p>
+      )}
+      {error && (
+        <p
+          role="alert"
+          className="w-full rounded-md border border-[rgb(var(--uob-error))] bg-[rgb(var(--uob-error))]/10 p-3 text-sm text-[rgb(var(--uob-error))]"
+        >
+          {error}
+        </p>
+      )}
+      <div className="flex w-full flex-col gap-3">
+        {config.signInMethod && hasOnSignIn(config) && (
+          <PrimaryButton
+            onClick={() => handleSignIn(config.signInMethod as SignInMethod)}
+            loading={busy}
+          >
+            {methodLabel(config.signInMethod, labels)}
+          </PrimaryButton>
+        )}
+        {accountGateAllowsSkip(config) && (
+          <button
+            type="button"
+            disabled={busy}
+            onClick={() => onNext({ signedIn: false })}
+            className="text-sm font-semibold text-[rgb(var(--uob-text-muted))] underline-offset-4 hover:underline disabled:opacity-50"
+          >
+            {config.skipText ?? labels.skipForNow}
+          </button>
+        )}
+      </div>
+    </div>
+  );
+}

package/src/domains/onboarding/components/screens/AppDemoScreen.tsx

@@ -0,0 +1,39 @@
+import { useState } from 'react';
+import { PrimaryButton } from '../shared/PrimaryButton';
+import { useOnboardingIntl } from '../OnboardingIntl';
+import type { AppDemoScreenConfig } from '../../types/screens';
+
+export interface AppDemoScreenProps {
+  config: AppDemoScreenConfig;
+  onNext: (data: { result: unknown }) => void;
+}
+
+export function AppDemoScreen({ config, onNext }: AppDemoScreenProps) {
+  const { labels } = useOnboardingIntl();
+  const [result, setResult] = useState<unknown>(null);
+  // The demo component is a consumer-supplied component reference held in config —
+  // aliasing it here is a lookup, not creation.
+  const Demo = config.demo.component;
+
+  return (
+    <div className="flex flex-1 flex-col gap-6">
+      {config.title && (
+        <h2 className="text-2xl font-semibold text-[rgb(var(--uob-text-primary))] sm:text-3xl">
+          {config.title}
+        </h2>
+      )}
+      <div className="rounded-2xl border border-[rgb(var(--uob-border))] bg-[rgb(var(--uob-surface-muted))] p-4">
+        <Demo
+          {...((config.demo.props ?? {}) as Record<string, unknown>)}
+          onSave={(value: unknown) => {
+            setResult(value);
+            config.demo.onSave(value);
+          }}
+        />
+      </div>
+      <PrimaryButton onClick={() => onNext({ result })} disabled={result === null}>
+        {config.cta ?? labels.continueWithResult}
+      </PrimaryButton>
+    </div>
+  );
+}

package/src/domains/onboarding/components/screens/ComparisonScreen.tsx

@@ -0,0 +1,59 @@
+import { Check, X } from 'lucide-react';
+import { PrimaryButton } from '../shared/PrimaryButton';
+import { cn } from '../../theme/cn';
+import { useOnboardingIntl } from '../OnboardingIntl';
+import type { ComparisonScreenConfig } from '../../types/screens';
+
+export interface ComparisonScreenProps {
+  config: ComparisonScreenConfig;
+  onNext: () => void;
+}
+
+export function ComparisonScreen({ config, onNext }: ComparisonScreenProps) {
+  const { labels } = useOnboardingIntl();
+  return (
+    <div className="flex flex-1 flex-col gap-6">
+      {config.title && (
+        <h2 className="text-2xl font-semibold text-[rgb(var(--uob-text-primary))] sm:text-3xl">
+          {config.title}
+        </h2>
+      )}
+      <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+        <ComparisonColumn heading={labels.withoutUs} items={config.before} tone="negative" />
+        <ComparisonColumn heading={labels.withUs} items={config.after} tone="positive" />
+      </div>
+      <PrimaryButton onClick={onNext}>{config.cta ?? labels.continueAction}</PrimaryButton>
+    </div>
+  );
+}
+
+interface ComparisonColumnProps {
+  heading: string;
+  items: ReadonlyArray<string>;
+  tone: 'positive' | 'negative';
+}
+
+function ComparisonColumn({ heading, items, tone }: ComparisonColumnProps) {
+  const Icon = tone === 'positive' ? Check : X;
+  const colorClass =
+    tone === 'positive'
+      ? 'border-[rgb(var(--uob-success))] bg-[rgb(var(--uob-surface))]'
+      : 'border-[rgb(var(--uob-error))] bg-[rgb(var(--uob-surface))]';
+  const iconColor =
+    tone === 'positive'
+      ? 'text-[rgb(var(--uob-success))]'
+      : 'text-[rgb(var(--uob-error))]';
+  return (
+    <div className={cn('flex flex-col gap-3 rounded-2xl border p-5', colorClass)}>
+      <h3 className="text-lg font-semibold text-[rgb(var(--uob-text-primary))]">{heading}</h3>
+      <ul className="flex flex-col gap-2">
+        {items.map((item) => (
+          <li key={item} className="flex items-start gap-2 text-sm text-[rgb(var(--uob-text-primary))]">
+            <Icon className={cn('mt-0.5 h-4 w-4 shrink-0', iconColor)} aria-hidden="true" />
+            <span>{item}</span>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}