@incodetech/web 2.0.0-alpha.1

package/src/flow/flowCompleted.tsx

@@ -0,0 +1,121 @@
+import type { FC } from 'preact/compat';
+import { useEffect } from 'preact/hooks';
+import register from 'preact-custom-element';
+import { useTranslation } from '../i18n';
+import './flowCompleted.css';
+
+export type FlowCompletedProps = {
+  title?: string;
+  message?: string;
+  redirectionUrl?: string;
+  action?: 'approved' | 'rejected' | 'none';
+  scoreStatus?:
+    | 'OK'
+    | 'WARN'
+    | 'MANUAL_OK'
+    | 'FAIL'
+    | 'UNKNOWN'
+    | 'MANUAL_FAIL';
+  redirectDelay?: number;
+  disableRedirect?: boolean;
+  redirectOriginOnly?: boolean;
+  flowId?: string;
+  interviewId?: string;
+};
+
+const sleep = (ms: number) => new Promise((resolve) => setTimeout(resolve, ms));
+
+const getUrlWithQueryParam = (
+  link: string,
+  flowId?: string,
+  interviewId?: string,
+) => {
+  try {
+    const url = new URL(link);
+    if (flowId) {
+      url.searchParams.set('flowId', flowId);
+    }
+    if (interviewId && window.location.origin !== url.origin) {
+      url.searchParams.set('interviewId', interviewId);
+    }
+    return url.toString();
+  } catch (_error) {
+    const params = new URLSearchParams();
+    if (flowId) params.set('flowId', flowId);
+    if (interviewId) params.set('interviewId', interviewId);
+    const queryString = params.toString();
+    return queryString ? `${link}?${queryString}` : link;
+  }
+};
+
+export const FlowCompleted: FC<FlowCompletedProps> = ({
+  title,
+  message,
+  redirectionUrl,
+  redirectDelay = 3000,
+  disableRedirect = false,
+  redirectOriginOnly = false,
+  flowId,
+  interviewId,
+}) => {
+  const { t } = useTranslation();
+  const displayTitle = title || t('verificationComplete.title');
+  const displayMessage = message || t('verificationComplete.message');
+
+  useEffect(() => {
+    const handleRedirect = async () => {
+      if (disableRedirect || !redirectionUrl) return;
+
+      const query = new URLSearchParams(window.location.search);
+      if (redirectOriginOnly && query.get('isRedirect') === 'true') {
+        return;
+      }
+
+      await sleep(redirectDelay);
+      const redirectUrl = getUrlWithQueryParam(
+        redirectionUrl,
+        flowId,
+        interviewId,
+      );
+      window.location.href = redirectUrl;
+    };
+
+    handleRedirect();
+  }, [
+    redirectionUrl,
+    redirectDelay,
+    disableRedirect,
+    redirectOriginOnly,
+    flowId,
+    interviewId,
+  ]);
+
+  return (
+    <section class="IncodeFlowCompleted" aria-live="assertive">
+      {displayTitle ? (
+        <h1 class="IncodeFlowCompletedTitle">{displayTitle}</h1>
+      ) : null}
+      {displayMessage ? (
+        <p class="IncodeFlowCompletedSubtitle">{displayMessage}</p>
+      ) : null}
+    </section>
+  );
+};
+
+register(
+  FlowCompleted,
+  'incode-flow-completed',
+  [
+    'title',
+    'message',
+    'redirectionUrl',
+    'action',
+    'scoreStatus',
+    'redirectDelay',
+    'disableRedirect',
+    'redirectOriginOnly',
+    'flowId',
+    'interviewId',
+  ],
+  { shadow: false },
+);

package/src/flow/flowInit.test.ts

@@ -0,0 +1,264 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest';
+
+const mockSetup = vi.fn().mockResolvedValue(undefined);
+vi.mock('../setup', () => ({
+  setup: (...args: unknown[]) => mockSetup(...args),
+}));
+
+const mockFetchAndApplyTheme = vi.fn();
+vi.mock('../styles/fetchTheme', () => ({
+  fetchAndApplyTheme: () => mockFetchAndApplyTheme(),
+}));
+
+const mockSetUiConfig = vi.fn();
+vi.mock('../shared/uiConfig/uiConfig', () => ({
+  setUiConfig: (...args: unknown[]) => mockSetUiConfig(...args),
+}));
+
+const mockWarmupWasm = vi.fn().mockResolvedValue(undefined);
+vi.mock('@incodetech/core', () => ({
+  warmupWasm: (...args: unknown[]) => mockWarmupWasm(...args),
+}));
+
+const mockFlowManager = {
+  load: vi.fn(),
+  getState: vi.fn(() => ({ status: 'idle' })),
+  subscribe: vi.fn(() => vi.fn()),
+  stop: vi.fn(),
+};
+
+vi.mock('@incodetech/core/flow', () => ({
+  createOrchestratedFlowManager: vi.fn(() => mockFlowManager),
+  getRequiredWasmPipelines: vi.fn(() => ['selfie']),
+}));
+
+vi.mock('@incodetech/core/email', () => ({
+  emailMachine: {},
+}));
+
+vi.mock('@incodetech/core/phone', () => ({
+  phoneMachine: {},
+}));
+
+vi.mock('@incodetech/core/selfie', () => ({
+  selfieMachine: {},
+}));
+
+import {
+  createFlowManager,
+  fetchTheme,
+  LAZY_UI_MODULES,
+  preloadFirstModule,
+  setupSDK,
+  warmupWasmIfNeeded,
+} from './flowInit';
+
+describe('flowInit', () => {
+  beforeEach(() => {
+    vi.clearAllMocks();
+    mockWarmupWasm.mockResolvedValue(undefined);
+    mockSetup.mockResolvedValue(undefined);
+  });
+
+  afterEach(() => {
+    vi.resetAllMocks();
+  });
+
+  describe('createFlowManager', () => {
+    it('should create a flow manager', () => {
+      const manager = createFlowManager();
+      expect(manager).toBeDefined();
+      expect(manager.load).toBeDefined();
+      expect(manager.getState).toBeDefined();
+    });
+  });
+
+  describe('setupSDK', () => {
+    it('should call setup with correct options', async () => {
+      await setupSDK({
+        apiURL: 'https://api.example.com',
+        token: 'test-token',
+        lang: 'es',
+      });
+
+      expect(mockSetup).toHaveBeenCalledWith({
+        apiURL: 'https://api.example.com',
+        token: 'test-token',
+        i18n: { lang: 'es' },
+      });
+    });
+
+    it('should default lang to en', async () => {
+      await setupSDK({
+        apiURL: 'https://api.example.com',
+        token: 'test-token',
+      });
+
+      expect(mockSetup).toHaveBeenCalledWith({
+        apiURL: 'https://api.example.com',
+        token: 'test-token',
+        i18n: { lang: 'en' },
+      });
+    });
+  });
+
+  describe('fetchTheme', () => {
+    it('should return theme and uiConfig on success', async () => {
+      const mockTheme = {
+        logo: 'https://example.com/logo.png',
+        hideFooterBranding: true,
+        main: '#000000',
+      };
+      mockFetchAndApplyTheme.mockResolvedValueOnce(mockTheme);
+
+      const result = await fetchTheme();
+
+      expect(result.theme).toEqual(mockTheme);
+      expect(result.uiConfig).toEqual({
+        logoSrc: 'https://example.com/logo.png',
+        hideFooterBranding: true,
+      });
+      expect(mockSetUiConfig).toHaveBeenCalledWith({
+        logoSrc: 'https://example.com/logo.png',
+        hideFooterBranding: true,
+      });
+    });
+
+    it('should return empty object on error', async () => {
+      mockFetchAndApplyTheme.mockRejectedValueOnce(new Error('Theme error'));
+
+      const result = await fetchTheme();
+
+      expect(result).toEqual({});
+    });
+  });
+
+  describe('warmupWasmIfNeeded', () => {
+    it('should call warmupWasm when pipelines are required', () => {
+      const managerState = {
+        status: 'ready' as const,
+        flow: { flowId: 'test', name: 'Test', flowModules: [] },
+        steps: ['SELFIE'],
+        currentStepIndex: 0,
+        currentStep: 'SELFIE',
+        config: {},
+        moduleState: null,
+      };
+
+      const wasmConfig = {
+        wasmPath: 'https://example.com/wasm',
+        wasmSimdPath: 'https://example.com/wasm-simd',
+        glueCodePath: 'https://example.com/glue.js',
+        modelsBasePath: 'https://example.com/models',
+      };
+
+      warmupWasmIfNeeded(managerState, wasmConfig);
+
+      expect(mockWarmupWasm).toHaveBeenCalledWith({
+        ...wasmConfig,
+        pipelines: ['selfie'],
+      });
+    });
+
+    it('should log error when warmupWasm fails', async () => {
+      const consoleSpy = vi
+        .spyOn(console, 'error')
+        .mockImplementation(() => {});
+      mockWarmupWasm.mockRejectedValueOnce(new Error('WASM load failed'));
+
+      const managerState = {
+        status: 'ready' as const,
+        flow: { flowId: 'test', name: 'Test', flowModules: [] },
+        steps: ['SELFIE'],
+        currentStepIndex: 0,
+        currentStep: 'SELFIE',
+        config: {},
+        moduleState: null,
+      };
+
+      const wasmConfig = {
+        wasmPath: 'https://example.com/wasm',
+        wasmSimdPath: 'https://example.com/wasm-simd',
+        glueCodePath: 'https://example.com/glue.js',
+        modelsBasePath: 'https://example.com/models',
+      };
+
+      warmupWasmIfNeeded(managerState, wasmConfig);
+
+      await new Promise((resolve) => setTimeout(resolve, 0));
+
+      expect(consoleSpy).toHaveBeenCalledWith(
+        'WASM warmup failed:',
+        expect.any(Error),
+      );
+
+      consoleSpy.mockRestore();
+    });
+
+    it('should not call warmupWasm when no pipelines are required', async () => {
+      const { getRequiredWasmPipelines } = await import(
+        '@incodetech/core/flow'
+      );
+      vi.mocked(getRequiredWasmPipelines).mockReturnValueOnce([]);
+
+      const managerState = {
+        status: 'ready' as const,
+        flow: { flowId: 'test', name: 'Test', flowModules: [] },
+        steps: ['PHONE'],
+        currentStepIndex: 0,
+        currentStep: 'PHONE',
+        config: {},
+        moduleState: null,
+      };
+
+      const wasmConfig = {
+        wasmPath: 'https://example.com/wasm',
+        wasmSimdPath: 'https://example.com/wasm-simd',
+        glueCodePath: 'https://example.com/glue.js',
+        modelsBasePath: 'https://example.com/models',
+      };
+
+      warmupWasmIfNeeded(managerState, wasmConfig);
+
+      expect(mockWarmupWasm).not.toHaveBeenCalled();
+    });
+  });
+
+  describe('preloadFirstModule', () => {
+    it('should call loader for the current step', async () => {
+      const managerState = {
+        status: 'ready' as const,
+        flow: { flowId: 'test', name: 'Test', flowModules: [] },
+        steps: ['PHONE'],
+        currentStepIndex: 0,
+        currentStep: 'PHONE',
+        config: {},
+        moduleState: null,
+      };
+
+      preloadFirstModule(managerState);
+    });
+
+    it('should not throw for unsupported module', () => {
+      const managerState = {
+        status: 'ready' as const,
+        flow: { flowId: 'test', name: 'Test', flowModules: [] },
+        steps: ['UNKNOWN_MODULE'],
+        currentStepIndex: 0,
+        currentStep: 'UNKNOWN_MODULE',
+        config: {},
+        moduleState: null,
+      };
+
+      expect(() => preloadFirstModule(managerState)).not.toThrow();
+    });
+  });
+
+  describe('LAZY_UI_MODULES', () => {
+    it('should have loaders for PHONE, EMAIL, and SELFIE', () => {
+      expect(LAZY_UI_MODULES.PHONE).toBeDefined();
+      expect(LAZY_UI_MODULES.EMAIL).toBeDefined();
+      expect(LAZY_UI_MODULES.SELFIE).toBeDefined();
+    });
+  });
+});

package/src/flow/flowInit.ts

@@ -0,0 +1,94 @@
+import type { WasmConfig } from '@incodetech/core';
+import { warmupWasm } from '@incodetech/core';
+import { emailMachine } from '@incodetech/core/email';
+import {
+  createOrchestratedFlowManager,
+  getRequiredWasmPipelines,
+  type OrchestratedFlowReadyState,
+} from '@incodetech/core/flow';
+import { phoneMachine } from '@incodetech/core/phone';
+import { selfieMachine } from '@incodetech/core/selfie';
+import { setup } from '../setup';
+import type { UiConfig } from '../shared/uiConfig/uiConfig';
+import { setUiConfig } from '../shared/uiConfig/uiConfig';
+import { fetchAndApplyTheme } from '../styles/fetchTheme';
+import type { ThemeConfig } from '../styles/themeTypes';
+
+export const LAZY_UI_MODULES = {
+  PHONE: () => import('../phone/phone').then((m) => m.Phone),
+  EMAIL: () => import('../email/email').then((m) => m.Email),
+  SELFIE: () => import('../selfie/selfie').then((m) => m.Selfie),
+};
+
+export function createFlowManager() {
+  return createOrchestratedFlowManager({
+    modules: {
+      PHONE: phoneMachine,
+      EMAIL: emailMachine,
+      SELFIE: selfieMachine,
+    },
+  });
+}
+
+type SetupSDKOptions = {
+  apiURL: string;
+  token: string;
+  lang?: string;
+};
+
+export async function setupSDK(options: SetupSDKOptions): Promise<void> {
+  await setup({
+    apiURL: options.apiURL,
+    token: options.token,
+    i18n: { lang: options.lang ?? 'en' },
+  });
+}
+
+type FetchThemeResult = {
+  theme?: ThemeConfig;
+  uiConfig?: UiConfig;
+};
+
+export async function fetchTheme(): Promise<FetchThemeResult> {
+  try {
+    const theme = await fetchAndApplyTheme();
+    const uiConfig: UiConfig = {
+      logoSrc: theme.logo,
+      hideFooterBranding: theme.hideFooterBranding,
+    };
+    setUiConfig(uiConfig);
+    return { theme, uiConfig };
+  } catch (themeError) {
+    console.warn('Failed to fetch dashboard theme:', themeError);
+    return {};
+  }
+}
+
+export function warmupWasmIfNeeded(
+  managerState: OrchestratedFlowReadyState,
+  wasmConfig: WasmConfig,
+): void {
+  const requiredPipelines = getRequiredWasmPipelines(managerState.flow);
+  if (requiredPipelines.length > 0) {
+    warmupWasm({
+      ...wasmConfig,
+      pipelines: requiredPipelines,
+    }).catch((error) => {
+      console.error('WASM warmup failed:', error);
+    });
+  }
+}
+
+export function preloadFirstModule(
+  managerState: OrchestratedFlowReadyState,
+): void {
+  const firstStep = managerState.currentStep;
+  if (firstStep) {
+    const loader = LAZY_UI_MODULES[firstStep as keyof typeof LAZY_UI_MODULES];
+    if (loader) {
+      loader().catch(() => {
+        // Ignore errors - module will load when needed
+      });
+    }
+  }
+}

package/src/flow/flowStart.css

@@ -0,0 +1,58 @@
+@reference "../styles/tailwind.css";
+
+.IncodeFlowStart {
+  @apply flex flex-col items-center justify-center h-full w-full;
+  @apply pt-20 px-24 pb-32;
+}
+
+.IncodeFlowStartContent {
+  @apply flex flex-col items-center justify-between;
+  height: 100%;
+  width: 100%;
+  text-align: center;
+}
+
+.IncodeFlowStartCenterSection {
+  @apply flex flex-col items-center justify-center;
+  flex: 1;
+  width: 100%;
+}
+
+.IncodeFlowStartLogoContainer {
+  @apply flex items-center justify-center;
+  min-width: 100px;
+  max-height: 250px;
+}
+
+.IncodeFlowStartLogo {
+  width: 260px;
+  max-width: 100%;
+  max-height: 100%;
+  height: auto;
+  object-fit: contain;
+}
+
+@media screen and (max-width: 767px) {
+  .IncodeFlowStartLogo {
+    width: 200px;
+  }
+}
+
+.IncodeFlowStartSubtitle {
+  font-size: 1.5rem;
+  line-height: 1.37;
+  color: #20263d;
+  margin-top: 10px;
+  font-weight: bold;
+  text-align: center;
+}
+
+.IncodeFlowStartButton {
+  margin-top: auto;
+}
+
+@media screen and (min-width: 992px) {
+  .IncodeFlowStart {
+    padding: 5% 20% 15% 20%;
+  }
+}

package/src/flow/flowStart.test.tsx

@@ -0,0 +1,49 @@
+import { fireEvent, render, screen } from '@testing-library/preact';
+import { describe, expect, it, vi } from 'vitest';
+import { FlowStart } from './flowStart';
+
+describe('FlowStart', () => {
+  it('should render with default logo and subtitle', () => {
+    const onStart = vi.fn();
+    render(<FlowStart onStart={onStart} />);
+
+    expect(screen.getByText('Demo App')).toBeTruthy();
+    expect(screen.getByRole('img')).toBeTruthy();
+    expect(screen.getByTestId('flow-start-button')).toBeTruthy();
+  });
+
+  it('should render with custom logo URL', () => {
+    const onStart = vi.fn();
+    render(
+      <FlowStart onStart={onStart} logoUrl="https://example.com/logo.png" />,
+    );
+
+    const img = screen.getByRole('img') as HTMLImageElement;
+    expect(img.src).toBe('https://example.com/logo.png');
+  });
+
+  it('should render with custom subtitle', () => {
+    const onStart = vi.fn();
+    render(<FlowStart onStart={onStart} subtitle="Custom Subtitle" />);
+
+    expect(screen.getByText('Custom Subtitle')).toBeTruthy();
+  });
+
+  it('should call onStart when button is clicked', () => {
+    const onStart = vi.fn();
+    render(<FlowStart onStart={onStart} />);
+
+    fireEvent.click(screen.getByTestId('flow-start-button'));
+
+    expect(onStart).toHaveBeenCalledTimes(1);
+  });
+
+  it('should have accessible section with aria-live', () => {
+    const onStart = vi.fn();
+    const { container } = render(<FlowStart onStart={onStart} />);
+
+    const section = container.querySelector('section');
+    expect(section?.getAttribute('aria-live')).toBe('polite');
+    expect(section?.classList.contains('IncodeFlowStart')).toBe(true);
+  });
+});

package/src/flow/flowStart.tsx

@@ -0,0 +1,41 @@
+import type { FC } from 'preact/compat';
+import { useTranslation } from '../i18n';
+import { Button } from '../shared/button/button';
+import incodeLogo from './incode-logo.svg';
+import './flowStart.css';
+
+export type FlowStartProps = {
+  logoUrl?: string;
+  subtitle?: string;
+  onStart: () => void;
+};
+
+export const FlowStart: FC<FlowStartProps> = ({
+  logoUrl,
+  subtitle,
+  onStart,
+}) => {
+  const { t } = useTranslation();
+  const displaySubtitle = subtitle || 'Demo App';
+  const displayLogo = logoUrl || incodeLogo;
+
+  return (
+    <section class="IncodeFlowStart" aria-live="polite">
+      <div class="IncodeFlowStartContent">
+        <div class="IncodeFlowStartCenterSection">
+          <div class="IncodeFlowStartLogoContainer">
+            <img src={displayLogo} alt="Logo" class="IncodeFlowStartLogo" />
+          </div>
+          <h2 class="IncodeFlowStartSubtitle">{displaySubtitle}</h2>
+        </div>
+        <Button
+          onClick={onStart}
+          class="IncodeFlowStartButton"
+          data-testid="flow-start-button"
+        >
+          {t('home.start')}
+        </Button>
+      </div>
+    </section>
+  );
+};

package/src/flow/incode-logo.svg

@@ -0,0 +1,8 @@
+<svg width="187" height="51" viewBox="0 0 187 51" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M168.419 47.1851C165.3 47.1851 162.576 46.5612 160.247 45.3136C157.918 44.0243 156.109 42.1528 154.819 39.699C153.53 37.2452 152.885 34.2924 152.885 30.8405C152.885 25.3507 154.195 21.171 156.816 18.3013C159.477 15.39 163.2 13.9344 167.982 13.9344C171.434 13.9344 174.2 14.683 176.279 16.1802C178.4 17.6774 179.939 19.8193 180.896 22.6058C181.894 25.3507 182.372 28.6362 182.331 32.4625H158.001L157.377 27.0974H176.03L174.533 29.3433C174.449 26.0577 173.867 23.7079 172.786 22.2939C171.746 20.8382 170.062 20.1104 167.733 20.1104C166.319 20.1104 165.071 20.4431 163.99 21.1086C162.95 21.7324 162.139 22.7929 161.557 24.2901C161.016 25.7874 160.746 27.846 160.746 30.4662C160.746 33.7101 161.515 36.2055 163.054 37.9522C164.593 39.6574 166.943 40.51 170.103 40.51C171.393 40.51 172.62 40.3852 173.784 40.1357C174.99 39.8446 176.092 39.5118 177.09 39.1375C178.13 38.7632 179.004 38.4097 179.711 38.077V45.064C178.255 45.6879 176.591 46.1869 174.72 46.5612C172.89 46.9771 170.79 47.1851 168.419 47.1851Z" fill="#006AFF"/>
+<path d="M133.067 47.1851C130.905 47.1851 128.846 46.9355 126.891 46.4365C124.937 45.9374 123.211 45.064 121.713 43.8163C120.216 42.5687 119.031 40.8427 118.158 38.6385C117.326 36.4342 116.91 33.627 116.91 30.2166C116.91 25.1843 118.137 21.2125 120.59 18.3013C123.044 15.39 126.767 13.9344 131.757 13.9344C132.464 13.9344 133.379 14.0176 134.502 14.1839C135.625 14.3503 136.769 14.6414 137.933 15.0573C139.139 15.4316 140.179 16.0347 141.052 16.8665L139.306 19.3618V1.76953H147.104V38.888C147.104 40.302 146.688 41.5289 145.856 42.5687C145.066 43.6084 143.984 44.4818 142.612 45.1888C141.24 45.8542 139.722 46.3533 138.058 46.686C136.394 47.0187 134.731 47.1851 133.067 47.1851ZM133.317 40.4476C135.022 40.4476 136.436 40.2397 137.559 39.8238C138.723 39.4079 139.306 38.8048 139.306 38.0146V22.0443C138.391 21.5037 137.413 21.1086 136.374 20.859C135.334 20.6095 134.336 20.4847 133.379 20.4847C131.466 20.4847 129.886 20.8382 128.638 21.5453C127.39 22.2107 126.455 23.292 125.831 24.7892C125.207 26.2448 124.895 28.1164 124.895 30.4038C124.895 32.4001 125.145 34.1468 125.644 35.644C126.143 37.1413 126.995 38.3265 128.201 39.1999C129.449 40.0317 131.154 40.4476 133.317 40.4476Z" fill="#006AFF"/>
+<path d="M97.1975 47.1851C92.0404 47.1851 88.1726 45.7502 85.5941 42.8806C83.0155 40.0109 81.7262 35.8728 81.7262 30.4662C81.7262 24.6852 83.0363 20.4847 85.6564 17.8646C88.3182 15.2445 92.1444 13.9344 97.1351 13.9344C100.629 13.9344 103.54 14.5583 105.869 15.8059C108.198 17.012 109.924 18.8419 111.047 21.2957C112.211 23.7495 112.793 26.8063 112.793 30.4662C112.793 35.8728 111.442 40.0109 108.739 42.8806C106.077 45.7502 102.23 47.1851 97.1975 47.1851ZM97.1975 40.6971C99.0274 40.6971 100.504 40.2812 101.627 39.4495C102.791 38.6177 103.644 37.4532 104.184 35.956C104.725 34.4171 104.995 32.5872 104.995 30.4662C104.995 28.0956 104.704 26.1617 104.122 24.6645C103.581 23.1672 102.729 22.0651 101.564 21.3581C100.441 20.6511 98.9858 20.2976 97.1975 20.2976C95.3675 20.2976 93.8911 20.6719 92.7682 21.4205C91.6453 22.1691 90.8135 23.292 90.2729 24.7892C89.7738 26.2864 89.5242 28.1788 89.5242 30.4662C89.5242 33.7933 90.1273 36.3303 91.3334 38.077C92.5395 39.8238 94.4942 40.6971 97.1975 40.6971Z" fill="#006AFF"/>
+<path d="M67.8132 46.9355C65.7337 46.9355 63.7374 46.6444 61.8243 46.0622C59.9112 45.4799 58.206 44.5442 56.7088 43.2549C55.2116 41.9656 54.0263 40.302 53.1529 38.2642C52.2795 36.2263 51.8429 33.7517 51.8429 30.8405C51.8429 27.8044 52.2588 25.2259 53.0905 23.1049C53.9223 20.9838 55.066 19.2578 56.5217 17.927C57.9773 16.5545 59.6617 15.5772 61.5748 14.9949C63.5295 14.3711 65.5881 14.0592 67.7508 14.0592C69.4143 14.0592 71.1195 14.2255 72.8663 14.5583C74.613 14.891 76.1726 15.3692 77.5451 15.9931V22.8553C76.131 22.2315 74.717 21.7324 73.3029 21.3581C71.8889 20.9422 70.4333 20.7343 68.9361 20.7343C66.0248 20.7343 63.7582 21.4621 62.1362 22.9177C60.5142 24.3733 59.7032 26.7647 59.7032 30.0919C59.7032 33.5022 60.4311 36.0391 61.8867 37.7027C63.3839 39.3663 65.8377 40.1981 69.248 40.1981C70.7868 40.1981 72.284 39.9693 73.7396 39.5118C75.1953 39.0128 76.4845 38.4721 77.6075 37.8899V44.8145C76.1518 45.5215 74.6338 46.0414 73.0534 46.3741C71.473 46.7484 69.7263 46.9355 67.8132 46.9355Z" fill="#006AFF"/>
+<path d="M17.5517 17.4279C18.425 17.012 19.4648 16.5961 20.6709 16.1802C21.8769 15.7643 23.187 15.4108 24.601 15.1197C26.0151 14.787 27.4291 14.5375 28.8432 14.3711C30.2988 14.1631 31.6712 14.0592 32.9605 14.0592C35.8717 14.0592 38.2839 14.4543 40.197 15.2445C42.1517 15.9931 43.6074 17.1992 44.5639 18.8627C45.5621 20.4847 46.0611 22.6266 46.0611 25.2883V46.2493H38.2008V26.6607C38.2008 25.8705 38.0968 25.1219 37.8888 24.4149C37.6809 23.6663 37.3274 23.0217 36.8283 22.481C36.3292 21.8988 35.643 21.4621 34.7696 21.171C33.8963 20.8382 32.7733 20.6719 31.4009 20.6719C30.3612 20.6719 29.3006 20.7759 28.2193 20.9838C27.138 21.1917 26.223 21.4621 25.4744 21.7948V46.2493H17.5517V17.4279Z" fill="#006AFF"/>
+<path d="M1.92836 46.2493V15.1197H9.85113L9.91351 46.2493H1.92836ZM1.74121 10.129V3.64105H10.0383V10.129H1.74121Z" fill="#006AFF"/>
+</svg>

package/src/flow/index.ts

@@ -0,0 +1,7 @@
+export type { IncodeFlowProps, SpinnerConfig } from './flow';
+export { IncodeFlow, preloadIncodeFlow } from './flow';
+export type { FlowCompletedProps } from './flowCompleted';
+export { FlowCompleted } from './flowCompleted';
+export type { FlowStartProps } from './flowStart';
+export { FlowStart } from './flowStart';
+export type { PreloadHandle } from './preloadFlow';