@incodetech/web 2.0.0-alpha.2 → 2.0.0-alpha.4

package/src/shared/otpInput/otpInput.test.tsx

@@ -1,356 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/preact';
-import { beforeEach, describe, expect, it, vi } from 'vitest';
-import { OtpInput } from './otpInput';
-
-describe('OtpInput', () => {
-  const defaultProps = {
-    resendTimer: 0,
-    canResend: true,
-    onSubmit: vi.fn(),
-    onResend: vi.fn(),
-    onBack: vi.fn(),
-  };
-
-  beforeEach(() => {
-    vi.clearAllMocks();
-  });
-
-  describe('Rendering', () => {
-    it('renders 6 input boxes', () => {
-      render(<OtpInput {...defaultProps} />);
-
-      const inputs = screen.getAllByRole('textbox');
-      expect(inputs.length).toBe(6);
-    });
-
-    it('renders Continue button', () => {
-      render(<OtpInput {...defaultProps} />);
-
-      expect(screen.getByTestId('otp-submit')).toBeTruthy();
-      expect(screen.getByText('Continue')).toBeTruthy();
-    });
-
-    it('renders resend and change phone links when canResend is true', () => {
-      render(<OtpInput {...defaultProps} canResend />);
-
-      expect(screen.getByText('Resend code')).toBeTruthy();
-      expect(screen.getByText('change phone number')).toBeTruthy();
-    });
-
-    it('renders timer when resendTimer > 0', () => {
-      render(<OtpInput {...defaultProps} resendTimer={30} canResend={false} />);
-
-      expect(screen.getByTestId('otp-timer')).toBeTruthy();
-      expect(screen.getByText(/Resend code in/)).toBeTruthy();
-    });
-  });
-
-  describe('Input behavior', () => {
-    it('auto-focuses first input on mount', () => {
-      render(<OtpInput {...defaultProps} />);
-
-      const inputs = screen.getAllByRole('textbox');
-      expect(document.activeElement).toBe(inputs[0]);
-    });
-
-    it('accepts single digit/character per box', () => {
-      render(<OtpInput {...defaultProps} />);
-
-      const input = screen.getByTestId('otp-input-0') as HTMLInputElement;
-      fireEvent.input(input, { target: { value: 'A' } });
-
-      expect(input.value).toBe('A');
-    });
-
-    it('converts input to uppercase', () => {
-      render(<OtpInput {...defaultProps} />);
-
-      const input = screen.getByTestId('otp-input-0') as HTMLInputElement;
-      fireEvent.input(input, { target: { value: 'a' } });
-
-      expect(input.value).toBe('A');
-    });
-
-    it('allows alphanumeric characters', () => {
-      render(<OtpInput {...defaultProps} />);
-
-      const input = screen.getByTestId('otp-input-0') as HTMLInputElement;
-
-      // Test letter
-      fireEvent.input(input, { target: { value: 'H' } });
-      expect(input.value).toBe('H');
-
-      // Test number
-      const input2 = screen.getByTestId('otp-input-1') as HTMLInputElement;
-      fireEvent.input(input2, { target: { value: '3' } });
-      expect(input2.value).toBe('3');
-    });
-
-    it('blocks non-alphanumeric characters', () => {
-      render(<OtpInput {...defaultProps} />);
-
-      const input = screen.getByTestId('otp-input-0') as HTMLInputElement;
-
-      fireEvent.keyDown(input, { key: '!' });
-
-      expect(input.value).toBe('');
-    });
-
-    it('auto-advances to next input after entering character', () => {
-      render(<OtpInput {...defaultProps} />);
-
-      const input0 = screen.getByTestId('otp-input-0') as HTMLInputElement;
-      const input1 = screen.getByTestId('otp-input-1') as HTMLInputElement;
-
-      fireEvent.input(input0, { target: { value: 'A' } });
-
-      expect(document.activeElement).toBe(input1);
-    });
-
-    it('moves focus back on backspace when current box is empty', () => {
-      render(<OtpInput {...defaultProps} />);
-
-      const input0 = screen.getByTestId('otp-input-0') as HTMLInputElement;
-      const input1 = screen.getByTestId('otp-input-1') as HTMLInputElement;
-
-      // Fill first input and move to second
-      fireEvent.input(input0, { target: { value: 'A' } });
-
-      // Press backspace on empty second input
-      fireEvent.keyDown(input1, { key: 'Backspace' });
-
-      expect(document.activeElement).toBe(input0);
-    });
-
-    it('clears previous box on backspace navigation', () => {
-      render(<OtpInput {...defaultProps} />);
-
-      const input0 = screen.getByTestId('otp-input-0') as HTMLInputElement;
-      const input1 = screen.getByTestId('otp-input-1') as HTMLInputElement;
-
-      fireEvent.input(input0, { target: { value: 'A' } });
-      fireEvent.keyDown(input1, { key: 'Backspace' });
-
-      expect(input0.value).toBe('');
-    });
-
-    it('supports arrow key navigation', () => {
-      render(<OtpInput {...defaultProps} />);
-
-      const input0 = screen.getByTestId('otp-input-0');
-      const input1 = screen.getByTestId('otp-input-1');
-      const input2 = screen.getByTestId('otp-input-2');
-
-      input1.focus();
-
-      fireEvent.keyDown(input1, { key: 'ArrowLeft' });
-      expect(document.activeElement).toBe(input0);
-
-      input1.focus();
-      fireEvent.keyDown(input1, { key: 'ArrowRight' });
-      expect(document.activeElement).toBe(input2);
-    });
-  });
-
-  describe('Paste handling', () => {
-    it('handles paste of full OTP code', () => {
-      render(<OtpInput {...defaultProps} />);
-
-      const input0 = screen.getByTestId('otp-input-0') as HTMLInputElement;
-
-      fireEvent.paste(input0, {
-        clipboardData: { getData: () => 'ABC123' },
-      });
-
-      expect(screen.getByTestId('otp-input-0')).toHaveProperty('value', 'A');
-      expect(screen.getByTestId('otp-input-1')).toHaveProperty('value', 'B');
-      expect(screen.getByTestId('otp-input-2')).toHaveProperty('value', 'C');
-      expect(screen.getByTestId('otp-input-3')).toHaveProperty('value', '1');
-      expect(screen.getByTestId('otp-input-4')).toHaveProperty('value', '2');
-      expect(screen.getByTestId('otp-input-5')).toHaveProperty('value', '3');
-    });
-
-    it('filters non-alphanumeric from pasted content', () => {
-      render(<OtpInput {...defaultProps} />);
-
-      const input0 = screen.getByTestId('otp-input-0') as HTMLInputElement;
-
-      fireEvent.paste(input0, {
-        clipboardData: { getData: () => 'AB-12-34' },
-      });
-
-      expect(screen.getByTestId('otp-input-0')).toHaveProperty('value', 'A');
-      expect(screen.getByTestId('otp-input-1')).toHaveProperty('value', 'B');
-      expect(screen.getByTestId('otp-input-2')).toHaveProperty('value', '1');
-      expect(screen.getByTestId('otp-input-3')).toHaveProperty('value', '2');
-      expect(screen.getByTestId('otp-input-4')).toHaveProperty('value', '3');
-      expect(screen.getByTestId('otp-input-5')).toHaveProperty('value', '4');
-    });
-
-    it('handles partial paste', () => {
-      render(<OtpInput {...defaultProps} />);
-
-      const input2 = screen.getByTestId('otp-input-2') as HTMLInputElement;
-      input2.focus();
-
-      fireEvent.paste(input2, {
-        clipboardData: { getData: () => 'XYZ' },
-      });
-
-      expect(screen.getByTestId('otp-input-2')).toHaveProperty('value', 'X');
-      expect(screen.getByTestId('otp-input-3')).toHaveProperty('value', 'Y');
-      expect(screen.getByTestId('otp-input-4')).toHaveProperty('value', 'Z');
-    });
-  });
-
-  describe('Submit behavior', () => {
-    it('Continue button is disabled when OTP is incomplete', () => {
-      render(<OtpInput {...defaultProps} />);
-
-      const button = screen.getByTestId('otp-submit');
-      expect(button.hasAttribute('disabled')).toBe(true);
-    });
-
-    it('Continue button is enabled when all 6 characters are entered', () => {
-      render(<OtpInput {...defaultProps} />);
-
-      // Fill all inputs
-      for (let i = 0; i < 6; i++) {
-        const input = screen.getByTestId(`otp-input-${i}`) as HTMLInputElement;
-        fireEvent.input(input, { target: { value: String(i) } });
-      }
-
-      const button = screen.getByTestId('otp-submit');
-      expect(button.hasAttribute('disabled')).toBe(false);
-    });
-
-    it('calls onSubmit when Continue is clicked with complete OTP', () => {
-      const onSubmit = vi.fn();
-      render(<OtpInput {...defaultProps} onSubmit={onSubmit} />);
-
-      // Fill all inputs
-      const chars = 'HH36LP';
-      for (let i = 0; i < 6; i++) {
-        const input = screen.getByTestId(`otp-input-${i}`) as HTMLInputElement;
-        fireEvent.input(input, { target: { value: chars[i] } });
-      }
-
-      const button = screen.getByTestId('otp-submit');
-      fireEvent.click(button);
-
-      expect(onSubmit).toHaveBeenCalledWith('HH36LP');
-    });
-  });
-
-  describe('Resend behavior', () => {
-    it('calls onResend when resend link is clicked', () => {
-      const onResend = vi.fn();
-      render(<OtpInput {...defaultProps} onResend={onResend} canResend />);
-
-      const resendLink = screen.getByText('Resend code');
-      fireEvent.click(resendLink);
-
-      expect(onResend).toHaveBeenCalled();
-    });
-
-    it('formats timer correctly', () => {
-      render(<OtpInput {...defaultProps} resendTimer={90} canResend={false} />);
-
-      expect(screen.getByText(/1:30/)).toBeTruthy();
-    });
-
-    it('shows timer as 0:30 for 30 seconds', () => {
-      render(<OtpInput {...defaultProps} resendTimer={30} canResend={false} />);
-
-      expect(screen.getByText(/0:30/)).toBeTruthy();
-    });
-  });
-
-  describe('Back behavior', () => {
-    it('calls onBack when change phone number link is clicked', () => {
-      const onBack = vi.fn();
-      render(<OtpInput {...defaultProps} onBack={onBack} canResend />);
-
-      const backLink = screen.getByText('change phone number');
-      fireEvent.click(backLink);
-
-      expect(onBack).toHaveBeenCalled();
-    });
-  });
-
-  describe('Error handling', () => {
-    it('displays error message when error prop is set', () => {
-      render(<OtpInput {...defaultProps} error="Invalid OTP code" />);
-
-      expect(screen.getByTestId('otp-error')).toBeTruthy();
-      expect(screen.getByText('Invalid OTP code')).toBeTruthy();
-    });
-
-    it('clears inputs when error occurs', () => {
-      const { rerender } = render(<OtpInput {...defaultProps} />);
-
-      // Fill inputs
-      for (let i = 0; i < 6; i++) {
-        const input = screen.getByTestId(`otp-input-${i}`) as HTMLInputElement;
-        fireEvent.input(input, { target: { value: String(i) } });
-      }
-
-      // Rerender with error
-      rerender(<OtpInput {...defaultProps} error="Invalid code" />);
-
-      // Inputs should be cleared
-      for (let i = 0; i < 6; i++) {
-        const input = screen.getByTestId(`otp-input-${i}`) as HTMLInputElement;
-        expect(input.value).toBe('');
-      }
-    });
-
-    it('focuses first input after error', async () => {
-      const { rerender } = render(<OtpInput {...defaultProps} />);
-
-      // Fill inputs
-      for (let i = 0; i < 6; i++) {
-        const input = screen.getByTestId(`otp-input-${i}`) as HTMLInputElement;
-        fireEvent.input(input, { target: { value: String(i) } });
-      }
-
-      // Rerender with error
-      rerender(<OtpInput {...defaultProps} error="Invalid code" />);
-
-      // Wait for focus to be set
-      await vi.waitFor(() => {
-        const input0 = screen.getByTestId('otp-input-0');
-        expect(document.activeElement).toBe(input0);
-      });
-    });
-
-    it('shows error styling on input boxes', () => {
-      const { container } = render(
-        <OtpInput {...defaultProps} error="Invalid code" />,
-      );
-
-      const errorBoxes = container.querySelector('.IncodeOtpInputBoxesError');
-      expect(errorBoxes).toBeTruthy();
-    });
-  });
-
-  describe('Accessibility', () => {
-    it('each input has aria-label', () => {
-      render(<OtpInput {...defaultProps} />);
-
-      for (let i = 0; i < 6; i++) {
-        const input = screen.getByTestId(`otp-input-${i}`);
-        expect(input.getAttribute('aria-label')).toBeTruthy();
-      }
-    });
-
-    it('inputs have appropriate attributes', () => {
-      render(<OtpInput {...defaultProps} />);
-
-      const input = screen.getByTestId('otp-input-0');
-      expect(input.getAttribute('inputMode')).toBe('text');
-      expect(input.getAttribute('maxLength')).toBe('1');
-      expect(input.getAttribute('autocomplete')).toBe('one-time-code');
-    });
-  });
-});

package/src/shared/otpInput/otpInput.tsx

@@ -1,241 +0,0 @@
-import type { FC } from 'preact/compat';
-import { useEffect, useRef, useState } from 'preact/hooks';
-import { Button } from '../button/button';
-import { Spacer } from '../spacer/spacer';
-import './otpInput.css';
-
-const OTP_LENGTH = 6;
-
-export type OtpInputProps = {
-  resendTimer: number;
-  canResend: boolean;
-  error?: string;
-  onSubmit: (code: string) => void;
-  onResend: () => void;
-  onBack: () => void;
-  /**
-   * Custom text for the back link (e.g., "change email address").
-   * Defaults to "change phone number" if not provided.
-   */
-  backLinkText?: string;
-  /** Whether the inputs and buttons should be disabled */
-  disabled?: boolean;
-  /** Whether the submit button should show loading state */
-  isLoading?: boolean;
-};
-
-export const OtpInput: FC<OtpInputProps> = ({
-  resendTimer,
-  canResend,
-  error,
-  onSubmit,
-  onResend,
-  onBack,
-  backLinkText = 'change phone number',
-  disabled = false,
-  isLoading = false,
-}) => {
-  const [digits, setDigits] = useState<string[]>(Array(OTP_LENGTH).fill(''));
-  const inputRefs = useRef<(HTMLInputElement | null)[]>([]);
-
-  // Auto-focus first input on mount
-  useEffect(() => {
-    inputRefs.current[0]?.focus();
-  }, []);
-
-  // Clear OTP and refocus when error occurs
-  useEffect(() => {
-    if (error) {
-      setDigits(Array(OTP_LENGTH).fill(''));
-      // Focus first input after clearing
-      setTimeout(() => {
-        inputRefs.current[0]?.focus();
-      }, 0);
-    }
-  }, [error]);
-
-  const handleChange = (index: number, e: Event) => {
-    const target = e.target as HTMLInputElement;
-    // Allow alphanumeric characters, convert to uppercase
-    let value = target.value.replace(/[^a-zA-Z0-9]/g, '').toUpperCase();
-
-    // Only take first character if multiple entered
-    if (value.length > 1) {
-      value = value.charAt(0);
-    }
-
-    const newDigits = [...digits];
-    newDigits[index] = value;
-    setDigits(newDigits);
-
-    // Auto-advance to next input
-    if (value && index < OTP_LENGTH - 1) {
-      inputRefs.current[index + 1]?.focus();
-    }
-  };
-
-  const handleKeyDown = (index: number, e: KeyboardEvent) => {
-    const target = e.target as HTMLInputElement;
-
-    // Allow: backspace, delete, tab, escape, enter, arrows
-    const allowedKeys = [
-      'Backspace',
-      'Delete',
-      'Tab',
-      'Escape',
-      'Enter',
-      'ArrowLeft',
-      'ArrowRight',
-      'ArrowUp',
-      'ArrowDown',
-    ];
-
-    // Block non-alphanumeric keys (except allowed control keys)
-    if (
-      !allowedKeys.includes(e.key) &&
-      !/^[a-zA-Z0-9]$/.test(e.key) &&
-      !e.ctrlKey &&
-      !e.metaKey
-    ) {
-      e.preventDefault();
-      return;
-    }
-
-    if (e.key === 'Backspace') {
-      if (!target.value && index > 0) {
-        // Move to previous input if current is empty
-        inputRefs.current[index - 1]?.focus();
-        const newDigits = [...digits];
-        newDigits[index - 1] = '';
-        setDigits(newDigits);
-      }
-    } else if (e.key === 'ArrowLeft' && index > 0) {
-      inputRefs.current[index - 1]?.focus();
-    } else if (e.key === 'ArrowRight' && index < OTP_LENGTH - 1) {
-      inputRefs.current[index + 1]?.focus();
-    }
-  };
-
-  const handlePaste = (index: number, e: ClipboardEvent) => {
-    e.preventDefault();
-    const pastedData = e.clipboardData?.getData('text') || '';
-    // Allow alphanumeric, convert to uppercase
-    const pastedChars = pastedData
-      .replace(/[^a-zA-Z0-9]/g, '')
-      .toUpperCase()
-      .slice(0, OTP_LENGTH);
-
-    if (pastedChars) {
-      const newDigits = [...digits];
-      for (let i = 0; i < pastedChars.length && index + i < OTP_LENGTH; i++) {
-        newDigits[index + i] = pastedChars[i];
-      }
-      setDigits(newDigits);
-
-      // Focus the next empty input or last input
-      const nextIndex = Math.min(index + pastedChars.length, OTP_LENGTH - 1);
-      inputRefs.current[nextIndex]?.focus();
-    }
-  };
-
-  const handleFocus = (e: FocusEvent) => {
-    const target = e.target as HTMLInputElement;
-    target.select();
-  };
-
-  const formatTimer = (seconds: number) => {
-    const mins = Math.floor(seconds / 60);
-    const secs = seconds % 60;
-    return `${mins}:${secs.toString().padStart(2, '0')}`;
-  };
-
-  return (
-    <div class="IncodeOtpInput">
-      <div class="IncodeOtpInputContainer">
-        <div
-          class={`IncodeOtpInputBoxes ${error ? 'IncodeOtpInputBoxesError' : ''}`}
-        >
-          {digits.map((digit, index) => (
-            <input
-              key={index}
-              type="text"
-              inputMode="text"
-              maxLength={1}
-              value={digit}
-              onInput={(e) => handleChange(index, e)}
-              onKeyDown={(e) => handleKeyDown(index, e)}
-              onPaste={(e) => handlePaste(index, e)}
-              onFocus={handleFocus}
-              ref={(el) => {
-                inputRefs.current[index] = el;
-              }}
-              class="IncodeOtpInputBox"
-              autocomplete="one-time-code"
-              data-testid={`otp-input-${index}`}
-              aria-label={`Character ${index + 1} of ${OTP_LENGTH}`}
-              disabled={disabled || isLoading}
-            />
-          ))}
-        </div>
-
-        {error && (
-          <>
-            <Spacer size={8} />
-            <p class="IncodeOtpInputError" data-testid="otp-error">
-              {error}
-            </p>
-          </>
-        )}
-      </div>
-
-      <Spacer />
-
-      <Button
-        onClick={() => {
-          const code = digits.join('');
-          if (code.length === OTP_LENGTH) {
-            onSubmit(code);
-          }
-        }}
-        disabled={digits.join('').length < OTP_LENGTH}
-        isLoading={isLoading}
-        data-testid="otp-submit"
-      >
-        Continue
-      </Button>
-
-      <Spacer size={16} />
-
-      <div class="IncodeOtpInputActions">
-        {canResend && !isLoading ? (
-          <p class="IncodeOtpInputResendText" data-testid="otp-resend-section">
-            Didn't get it?{' '}
-            <button
-              type="button"
-              class="IncodeOtpInputLink"
-              onClick={onResend}
-              disabled={disabled || isLoading}
-              data-testid="otp-resend"
-            >
-              Resend code
-            </button>
-            {' or '}
-            <button
-              type="button"
-              class="IncodeOtpInputLink"
-              onClick={onBack}
-              disabled={disabled || isLoading}
-              data-testid="otp-back"
-            >
-              {backLinkText}
-            </button>
-          </p>
-        ) : !isLoading ? (
-          <p class="IncodeOtpInputTimer" data-testid="otp-timer">
-            Resend code in {formatTimer(resendTimer)}
-          </p>
-        ) : null}
-      </div>
-    </div>
-  );
-};

package/src/shared/page/incode-logo.svg

@@ -1,3 +0,0 @@
-<svg width="76" height="20" viewBox="0 0 76 20" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M40.1687 6.01811C42.2312 6.01811 43.7927 6.59655 44.8446 7.76024C45.8919 8.91831 46.4126 10.5865 46.4126 12.7583C46.4126 14.93 45.8748 16.6105 44.794 17.7944C43.7102 18.9815 42.1729 19.5735 40.1937 19.5735C38.1479 19.5735 36.5973 18.99 35.5546 17.8187L35.4273 17.6701C34.4729 16.5101 33.9984 14.871 33.9984 12.7583C33.9984 8.28671 36.0703 6.01811 40.1687 6.01811ZM69.1127 6.01781C71.1144 6.01781 72.5953 6.66904 73.5373 7.97333C74.4288 9.2077 74.8837 10.9053 74.9066 13.0629L74.9058 13.5242H66.1149C66.2174 14.6334 66.5602 15.4734 67.141 16.0538C67.7488 16.662 68.6195 16.9679 69.7639 16.9679C70.5188 16.9679 71.2373 16.8742 71.921 16.6862C72.6048 16.4995 73.2105 16.2581 73.735 15.9646L73.9814 15.8267V18.666L73.8821 18.7093C72.5607 19.286 71.0464 19.5732 69.3379 19.5732C67.4088 19.5732 65.8853 18.986 64.7769 17.8093C63.6699 16.6348 63.1183 14.9722 63.1183 12.833C63.1183 10.6451 63.6389 8.96055 64.6862 7.78517C65.7359 6.60632 67.2157 6.01781 69.1127 6.01781ZM60.3976 1.06738V16.3832C60.3976 17.0998 60.0996 17.7092 59.5124 18.198C58.9425 18.6724 58.2282 19.0207 57.3718 19.2435C56.5257 19.4635 55.6531 19.5731 54.7534 19.5731C52.9298 19.5731 51.4237 19.056 50.2406 18.0202C49.0485 16.9752 48.4588 15.1678 48.4588 12.6072C48.4588 10.5545 48.9627 8.9421 49.9753 7.77411C50.9938 6.60175 52.4982 6.01774 54.4782 6.01774C54.9416 6.01774 55.4735 6.07665 56.0742 6.19449C56.582 6.296 57.0453 6.43849 57.4648 6.62252V1.06738H60.3976ZM27.911 6.04223C29.2828 6.04223 30.5881 6.29619 31.8264 6.80393L31.9291 6.84604V9.55797L31.6992 9.46109C30.4503 8.93473 29.3127 8.67257 28.2863 8.67257C27.0102 8.67257 26.0684 8.98809 25.4521 9.61162C24.8366 10.2352 24.5242 11.2397 24.5242 12.6331C24.5242 14.0959 24.8298 15.1535 25.4314 15.8092C26.029 16.4619 27.002 16.7923 28.3613 16.7923C29.4706 16.7923 30.589 16.5234 31.7164 15.9842L31.9534 15.8708V18.5903L31.8552 18.634C30.6349 19.1773 29.3283 19.4483 27.936 19.4483C26.2154 19.4483 24.7637 18.9753 23.5868 18.0285L23.4123 17.8829L23.2796 17.7636C22.1516 16.7067 21.5914 15.0592 21.5914 12.8332C21.5914 10.4557 22.186 8.72379 23.3849 7.64725C24.5757 6.57726 26.0871 6.04223 27.911 6.04223ZM4.11045 6.39262L4.13613 19.1987H1.15293V6.39262H4.11045ZM13.5766 6.0423C15.365 6.0423 16.6948 6.41948 17.5636 7.18368C18.4372 7.95269 18.8706 9.13902 18.8706 10.7331V19.1984H15.9127V11.0838C15.9127 9.42945 14.9988 8.62337 13.1013 8.62337C12.3086 8.62337 11.5458 8.73548 10.8133 8.95959L10.5401 9.04888V19.1984H7.58147V7.40579L7.67177 7.35974C8.43481 6.97061 9.36013 6.65415 10.4506 6.40815L10.8116 6.33134C11.7692 6.13867 12.6905 6.0423 13.5766 6.0423ZM40.1687 8.5477C39.0014 8.5477 38.1814 8.89722 37.6896 9.59114C37.1869 10.3012 36.932 11.3564 36.932 12.7583C36.932 14.1602 37.1948 15.223 37.7142 15.9499C38.2224 16.6613 39.0345 17.0182 40.1687 17.0182C42.3685 17.0182 43.4555 15.6249 43.4555 12.7583C43.4555 11.325 43.1888 10.2632 42.6636 9.57056C42.1472 8.89036 41.3203 8.5477 40.1687 8.5477ZM54.8535 8.59807C52.5835 8.59807 51.4659 9.9271 51.4659 12.6579C51.4659 14.0276 51.7253 15.0917 52.2391 15.8527C52.7378 16.5945 53.6185 16.9678 54.9035 16.9678C55.6556 16.9678 56.2834 16.8792 56.7876 16.7028C57.2156 16.553 57.4279 16.378 57.4604 16.186L57.4648 16.1332V9.25404L57.2778 9.15611C56.9611 8.99923 56.6189 8.87406 56.2512 8.78123C55.7705 8.65917 55.3045 8.59807 54.8535 8.59807ZM69.0377 8.49888C68.192 8.49888 67.5412 8.71795 67.0743 9.15366C66.6631 9.5374 66.3731 10.1684 66.2101 11.0498L66.1771 11.2425H71.8784L71.8489 11.0453C71.7111 10.208 71.4421 9.58986 71.0461 9.18626C70.5969 8.72981 69.9303 8.49888 69.0377 8.49888ZM4.21085 1.94156V4.64764H1.07715V1.94156H4.21085Z" fill="#006AFF"/>
-</svg>

package/src/shared/page/page.css

@@ -1,47 +0,0 @@
-@reference "../../styles/tailwind.css";
-
-.IncodePageContainer {
-  @apply flex h-full w-full bg-surface-neutral-0;
-
-  .IncodePageInner {
-    @apply flex flex-col flex-1 h-full w-full m-auto px-24;
-  }
-
-  @media screen and (min-width: 767px) {
-    .IncodePageInner {
-      @apply w-[800px] h-[840px] m-auto;
-    }
-  }
-
-  .IncodePageHeader {
-    @apply flex flex-col items-center justify-center px-8 min-h-[44px] h-[44px] w-full relative;
-  }
-
-  .IncodePageLogo {
-    @apply max-h-full;
-  }
-
-  .IncodePageTitleContainer {
-    @apply my-0 mx-auto;
-  }
-
-  .IncodePageTitle {
-    @apply text-2xl font-bold text-center tracking-[-1px] leading-[125%] text-text-body-primary;
-  }
-
-  .IncodePageSubtitle {
-    @apply text-base text-center text-text-body-secondary leading-[114%] tracking-[-0.5px] font-medium;
-  }
-
-  .IncodePageContent {
-    @apply flex flex-1 flex-col;
-  }
-
-  .IncodePageFooter {
-    @apply flex justify-center items-center pt-8 pb-12;
-  }
-
-  .IncodePageFooterInner {
-    @apply max-h-40;
-  }
-}