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

package/src/selfie/cameraButton.tsx

@@ -1,35 +0,0 @@
-import type { FC } from 'preact/compat';
-import './cameraButton.css';
-
-export const CameraButton: FC = () => {
-  return (
-    <div class="IncodeCameraButton">
-      <svg
-        width="64"
-        height="64"
-        viewBox="0 0 64 64"
-        fill="none"
-        xmlns="http://www.w3.org/2000/svg"
-        aria-hidden="true"
-      >
-        <path
-          d="M0 32C0 14.3269 14.3269 0 32 0C49.6731 0 64 14.3269 64 32C64 49.6731 49.6731 64 32 64C14.3269 64 0 49.6731 0 32Z"
-          class="IncodeCameraButtonBackground"
-        />
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M41.872 28.9792C41.872 29.6692 41.312 30.2292 40.622 30.2292C39.932 30.2292 39.372 29.6692 39.372 28.9792C39.372 28.2892 39.932 27.6808 40.622 27.6808C41.312 27.6808 41.872 28.1908 41.872 28.8808V28.9792ZM31.9987 40.7475C28.467 40.7475 25.5937 37.8742 25.5937 34.3425C25.5937 30.8108 28.467 27.9375 31.9987 27.9375C35.5303 27.9375 38.4037 30.8108 38.4037 34.3425C38.4037 37.8742 35.5303 40.7475 31.9987 40.7475ZM41.9287 23.4192C41.3237 23.3958 40.7603 23.1425 40.3553 22.7192C40.282 22.6375 39.9853 22.2692 39.2937 20.9725C38.4987 19.4858 36.9587 18.5625 35.2753 18.5625H28.7553C27.0987 18.5625 25.5703 19.4642 24.7703 20.9142C24.042 22.2325 23.7403 22.6208 23.6587 22.7108C23.2403 23.1475 22.677 23.4025 22.1037 23.4275C18.8337 23.4275 16.172 26.0875 16.167 29.3575V38.7608C16.167 42.9942 19.612 46.4392 23.8437 46.4392H40.157C44.3903 46.4392 47.8337 42.9942 47.8337 38.7608V29.3542C47.8337 26.0808 45.1703 23.4192 41.9287 23.4192Z"
-          class="IncodeCameraButtonPath"
-        />
-
-        <path
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M31.9987 30.4375C29.8454 30.4375 28.0938 32.1892 28.0938 34.3425C28.0938 36.4958 29.8454 38.2475 31.9987 38.2475C34.152 38.2475 35.9037 36.4958 35.9037 34.3425C35.9037 32.1892 34.152 30.4375 31.9987 30.4375Z"
-          class="IncodeCameraButtonPath"
-        />
-      </svg>
-    </div>
-  );
-};

package/src/selfie/capture.css

@@ -1,57 +0,0 @@
-@reference "../styles/tailwind.css";
-
-.IncodeCaptureContainer {
-  @apply flex flex-col items-center justify-start h-full relative overflow-hidden flex-1;
-  .IncodeCaptureFrame {
-    @apply w-full max-w-[335px] rounded-full aspect-square relative border-12 border-transparent;
-  }
-
-  .IncodeCaptureVideoWrapper {
-    @apply w-[calc(100%-24px)] h-[calc(100%-24px)] rounded-full overflow-hidden top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 flex items-center justify-center bg-white absolute;
-  }
-
-  .IncodeCaptureVideo {
-    @apply h-full w-full absolute z-50;
-  }
-
-  .IncodeCaptureVideoElement {
-    @apply w-full h-full object-cover absolute;
-    transform: scaleX(-1);
-  }
-}
-
-.IncodeCaptureUploadingPage {
-  .IncodeCaptureUploadingContainer {
-    @apply flex flex-col flex-1;
-    animation: fadeInScale 0.4s ease-out;
-  }
-
-  .IncodeCaptureUploadingTitle {
-    @apply text-2xl font-bold text-center tracking-[-1px] leading-[125%] text-text-body-primary;
-  }
-
-  .IncodeCaptureUploadingPrimaryIcon {
-    @apply fill-spinner-surface-primary;
-  }
-
-  .IncodeCaptureUploadingSecondaryIcon {
-    @apply fill-spinner-surface-secondary;
-  }
-
-  @keyframes fadeInScale {
-    from {
-      opacity: 0;
-      transform: scale(0.95);
-    }
-    to {
-      opacity: 1;
-      transform: scale(1);
-    }
-  }
-}
-
-.IncodeCaptureSuccessPage {
-  .IncodeCaptureSuccessContainer {
-    @apply flex flex-col items-center flex-1;
-  }
-}

package/src/selfie/capture.tsx

@@ -1,232 +0,0 @@
-import type { SelfieManager, SelfieState } from '@incodetech/core/selfie';
-import type { FC } from 'preact/compat';
-import { useEffect, useRef, useState } from 'preact/hooks';
-import { useTranslation } from '@/i18n/useTranslation';
-import { Button } from '@/shared/button/button';
-import { SuccessIcon } from '@/shared/icons/successIcon';
-import { LoadingIcon } from '@/shared/loader/loadingIcon';
-import { Page } from '@/shared/page/page';
-import { Spacer } from '@/shared/spacer/spacer';
-import { Title } from '@/shared/title/title';
-import { ErrorModal } from './errorModal';
-import { FaceOutline } from './faceOutline';
-import { type BorderState, LoadingBorder } from './loadingBorder';
-import { ManualCaptureButton } from './manualCaptureButton';
-import { Notification } from './notification';
-import './capture.css';
-
-type CaptureState = Extract<SelfieState, { status: 'capture' }>;
-
-type CaptureProps = {
-  manager: SelfieManager;
-  state: CaptureState;
-  onFinish: () => void;
-};
-
-export const Capture: FC<CaptureProps> = ({ manager, state, onFinish }) => {
-  const {
-    captureStatus,
-    stream,
-    detectionStatus,
-    attemptsRemaining,
-    uploadError,
-  } = state;
-  const [isManualCapturing, setIsManualCapturing] = useState(false);
-  const { t } = useTranslation();
-
-  if (captureStatus === 'initializing') {
-    return (
-      <Page
-        className="IncodeCaptureInitializingPage"
-        title="Initializing Camera"
-        subtitle="Please wait..."
-      >
-        <div
-          style={{
-            display: 'flex',
-            justifyContent: 'center',
-            marginTop: 'auto',
-          }}
-        >
-          <Button isLoading>Initializing...</Button>
-        </div>
-      </Page>
-    );
-  }
-
-  if (captureStatus === 'detecting') {
-    if (detectionStatus === 'offline') {
-      return (
-        <Page>
-          <div class="flex flex-col items-center justify-center h-full">
-            <p class="text-text-body-primary">No internet connection</p>
-          </div>
-        </Page>
-      );
-    }
-
-    const getBorderState = (): BorderState => {
-      if (isManualCapturing) {
-        return 'capturing';
-      }
-      if (detectionStatus === 'detecting') {
-        return 'idle';
-      }
-      if (detectionStatus === 'getReady') {
-        return 'loading';
-      }
-      if (detectionStatus === 'success') {
-        return 'success';
-      }
-      if (detectionStatus === 'error') {
-        return 'error';
-      }
-      return 'idle';
-    };
-
-    return (
-      <Page data-testid="capture-container">
-        <Spacer size={48} />
-        <div class="IncodeCaptureContainer">
-          <LoadingBorder borderState={getBorderState()} />
-          <div class="IncodeCaptureFrame">
-            <div class="IncodeCaptureVideoWrapper">
-              {stream ? (
-                <>
-                  <Video stream={stream} />
-                  <div class="IncodeCaptureVideo">
-                    <FaceOutline />
-                  </div>
-                </>
-              ) : null}
-            </div>
-          </div>
-
-          <Spacer size={48} />
-          {detectionStatus ? (
-            <>
-              <Notification detectionState={detectionStatus} />
-              <Spacer size={24} />
-            </>
-          ) : null}
-          {detectionStatus === 'manualCapture' ? (
-            <ManualCaptureButton
-              onClick={() => {
-                setIsManualCapturing(true);
-                manager.capture();
-              }}
-              disabled={isManualCapturing}
-            />
-          ) : null}
-        </div>
-        {uploadError ? (
-          <ErrorModal
-            error={uploadError}
-            attemptsRemaining={attemptsRemaining}
-            onTryAgain={() => {
-              manager.retryCapture();
-              setIsManualCapturing(false);
-            }}
-            onContinue={onFinish}
-          />
-        ) : null}
-      </Page>
-    );
-  }
-
-  if (captureStatus === 'capturing') {
-    return (
-      <Page
-        className="IncodeCaptureCapturingPage"
-        title="Capturing"
-        subtitle="Taking photo..."
-      >
-        <div
-          style={{
-            display: 'flex',
-            justifyContent: 'center',
-            marginTop: 'auto',
-          }}
-        >
-          <Button isLoading>Capturing...</Button>
-        </div>
-      </Page>
-    );
-  }
-
-  if (captureStatus === 'uploading') {
-    return <UploadingState />;
-  }
-
-  if (captureStatus === 'uploadError') {
-    return (
-      <ErrorModal
-        error={uploadError}
-        attemptsRemaining={attemptsRemaining}
-        onTryAgain={() => {
-          manager.retryCapture();
-          setIsManualCapturing(false);
-        }}
-        onContinue={onFinish}
-      />
-    );
-  }
-
-  if (captureStatus === 'success') {
-    return (
-      <Page className="IncodeCaptureSuccessPage">
-        <div class="IncodeCaptureSuccessContainer">
-          <Spacer size={160} />
-          <SuccessIcon size={64} />
-          <Spacer size={16} />
-          <Title>{t('idv2.capture.processing.success')}</Title>
-        </div>
-      </Page>
-    );
-  }
-
-  return null;
-};
-
-type VideoProps = {
-  stream: MediaStream;
-};
-
-const Video: FC<VideoProps> = ({ stream }) => {
-  const ref = useRef<HTMLVideoElement | null>(null);
-
-  useEffect(() => {
-    if (ref.current && stream) {
-      ref.current.srcObject = stream;
-    }
-  }, [stream]);
-
-  return (
-    <video
-      ref={ref}
-      autoplay
-      playsInline
-      muted
-      class="IncodeCaptureVideoElement"
-    />
-  );
-};
-
-const UploadingState: FC = () => {
-  const { t } = useTranslation();
-
-  return (
-    <Page className="IncodeCaptureUploadingPage">
-      <div class="IncodeCaptureUploadingContainer">
-        <Spacer size={160} />
-        <div class="IncodeCaptureUploadingIconContainer">
-          <LoadingIcon size={64} />
-        </div>
-        <Spacer size={16} />
-        <h2 class="IncodeCaptureUploadingTitle">
-          {t('idv2.capture.processing.uploading')}
-        </h2>
-      </div>
-    </Page>
-  );
-};

package/src/selfie/errorModal.tsx

@@ -1,218 +0,0 @@
-import type { FC } from 'preact/compat';
-import { useTranslation } from '@/i18n';
-import { NoMoreAttemptsModal } from './noMoreAttemptsModal';
-import { RetryErrorModal } from './retryErrorModal';
-
-type FaceErrorCode =
-  | 'LIVENESS_ERROR'
-  | 'BRIGHTNESS_ERROR'
-  | 'LENSES_ERROR'
-  | 'MASK_ERROR'
-  | 'CLOSED_EYES_ERROR'
-  | 'HEAD_COVER_ERROR'
-  | 'SERVER_ERROR'
-  | 'FACE_NOT_FOUND'
-  | 'MULTIPLE_FACES'
-  | 'TOO_BLURRY_ERROR'
-  | 'TOO_DARK_ERROR'
-  | 'USER_IS_NOT_RECOGNIZED'
-  | 'SPOOF_ATTEMPT_DETECTED'
-  | 'FACE_TOO_DARK'
-  | 'LENSES_DETECTED'
-  | 'FACE_MASK_DETECTED'
-  | 'CLOSED_EYES_DETECTED'
-  | 'HEAD_COVER_DETECTED'
-  | 'FACE_CROPPING_FAILED'
-  | 'FACE_TOO_SMALL'
-  | 'FACE_TOO_BLURRY'
-  | 'BAD_PHOTO_QUALITY'
-  | 'PROCESSING_ERROR'
-  | 'BAD_REQUEST'
-  | 'NONEXISTENT_CUSTOMER'
-  | 'HINT_NOT_PROVIDED'
-  | 'SELFIE_IMAGE_LOW_QUALITY';
-
-const defaultError = {
-  title: 'Something went wrong',
-  description: 'Please try again later',
-};
-
-const errorContent: Partial<
-  Record<FaceErrorCode, { title: string; description: string }>
-> = {
-  MASK_ERROR: {
-    title: 'notifications.mask',
-    description: 'notifications.maskDescription',
-  },
-  BRIGHTNESS_ERROR: {
-    title: 'notifications.brightness',
-    description: 'notifications.brightnessDescription',
-  },
-  LIVENESS_ERROR: {
-    title: 'notifications.spoof',
-    description: 'notifications.spoofDescription',
-  },
-  CLOSED_EYES_ERROR: {
-    title: 'notifications.closedEyes',
-    description: 'notifications.closedEyesDescription',
-  },
-  HEAD_COVER_ERROR: {
-    title: 'notifications.removeHeadwear',
-    description: 'notifications.removeHeadwearDescription',
-  },
-  LENSES_ERROR: {
-    title: 'notifications.lenses',
-    description: 'notifications.lensesDescription',
-  },
-  FACE_NOT_FOUND: {
-    title: 'notifications.faceNotFound',
-    description: 'notifications.faceNotFoundDescription',
-  },
-  MULTIPLE_FACES: {
-    title: 'notifications.multiple',
-    description: 'notifications.multipleDescription',
-  },
-  TOO_BLURRY_ERROR: defaultError,
-  TOO_DARK_ERROR: defaultError,
-  SERVER_ERROR: defaultError,
-  FACE_CROPPING_FAILED: defaultError,
-  FACE_TOO_SMALL: defaultError,
-  PROCESSING_ERROR: defaultError,
-  BAD_REQUEST: defaultError,
-  USER_IS_NOT_RECOGNIZED: {
-    title: 'notifications.accessDenied',
-    description: 'notifications.accessDeniedDescription',
-  },
-  SPOOF_ATTEMPT_DETECTED: {
-    title: 'notifications.spoof',
-    description: 'notifications.spoofDescription',
-  },
-  FACE_TOO_DARK: {
-    title: 'notifications.brightness',
-    description: 'notifications.brightnessDescription',
-  },
-  LENSES_DETECTED: {
-    title: 'notifications.lenses',
-    description: 'notifications.lensesDescription',
-  },
-  FACE_MASK_DETECTED: {
-    title: 'notifications.mask',
-    description: 'notifications.maskDescription',
-  },
-  CLOSED_EYES_DETECTED: {
-    title: 'notifications.closedEyes',
-    description: 'notifications.closedEyesDescription',
-  },
-  HEAD_COVER_DETECTED: {
-    title: 'notifications.removeHeadwear',
-    description: 'notifications.removeHeadwearDescription',
-  },
-  FACE_TOO_BLURRY: {
-    title: 'notifications.spoof',
-    description: 'notifications.spoofDescription',
-  },
-  BAD_PHOTO_QUALITY: {
-    title: 'notifications.lowQualityImage',
-    description: 'notifications.lowQualityImageDescription',
-  },
-  NONEXISTENT_CUSTOMER: {
-    title: 'notifications.nonexistentCustomer',
-    description: 'notifications.nonexistentCustomerDescription',
-  },
-  HINT_NOT_PROVIDED: {
-    title: 'notifications.hintNotProvided',
-    description: 'notifications.hintNotProvidedDescription',
-  },
-  SELFIE_IMAGE_LOW_QUALITY: {
-    title: 'notifications.selfieImageLowQuality',
-    description: 'notifications.selfieImageLowQualityDescription',
-  },
-};
-
-type ErrorModalProps = {
-  error: string | null | undefined;
-  attemptsRemaining: number;
-  onTryAgain: () => void;
-  onContinue: () => void;
-};
-
-const ERROR_CODES: FaceErrorCode[] = [
-  'LIVENESS_ERROR',
-  'BRIGHTNESS_ERROR',
-  'LENSES_ERROR',
-  'MASK_ERROR',
-  'CLOSED_EYES_ERROR',
-  'HEAD_COVER_ERROR',
-  'SERVER_ERROR',
-  'FACE_NOT_FOUND',
-  'MULTIPLE_FACES',
-  'TOO_BLURRY_ERROR',
-  'TOO_DARK_ERROR',
-  'USER_IS_NOT_RECOGNIZED',
-  'SPOOF_ATTEMPT_DETECTED',
-  'FACE_TOO_DARK',
-  'LENSES_DETECTED',
-  'FACE_MASK_DETECTED',
-  'CLOSED_EYES_DETECTED',
-  'HEAD_COVER_DETECTED',
-  'FACE_CROPPING_FAILED',
-  'FACE_TOO_SMALL',
-  'FACE_TOO_BLURRY',
-  'BAD_PHOTO_QUALITY',
-  'PROCESSING_ERROR',
-  'BAD_REQUEST',
-  'NONEXISTENT_CUSTOMER',
-  'HINT_NOT_PROVIDED',
-  'SELFIE_IMAGE_LOW_QUALITY',
-];
-
-const parseErrorCode = (error: string): FaceErrorCode | null => {
-  const upperError = error.toUpperCase();
-
-  if (upperError.includes('HTTP 400') || upperError.includes('BAD_REQUEST')) {
-    return 'BAD_REQUEST';
-  }
-
-  if (upperError.includes('HTTP 500') || upperError.includes('SERVER_ERROR')) {
-    return 'SERVER_ERROR';
-  }
-
-  for (const code of ERROR_CODES) {
-    if (upperError.includes(code)) {
-      return code;
-    }
-  }
-
-  return null;
-};
-
-export const ErrorModal: FC<ErrorModalProps> = ({
-  error,
-  attemptsRemaining,
-  onTryAgain,
-  onContinue,
-}) => {
-  const { t } = useTranslation();
-
-  if (!error) return null;
-
-  const parsedCode = parseErrorCode(error);
-  const errorCode = parsedCode ?? (error as FaceErrorCode);
-  const { title, description } = errorContent[errorCode] ?? defaultError;
-  const noMoreAttempts = attemptsRemaining <= 0;
-
-  const titleText = t(title) ?? title;
-
-  if (noMoreAttempts) {
-    return <NoMoreAttemptsModal title={titleText} onContinue={onContinue} />;
-  }
-
-  return (
-    <RetryErrorModal
-      title={titleText}
-      description={description}
-      attemptsRemaining={attemptsRemaining}
-      onTryAgain={onTryAgain}
-    />
-  );
-};

package/src/selfie/errorModalContent.css

@@ -1,33 +0,0 @@
-@reference "../styles/tailwind.css";
-
-.IncodeErrorModalContent {
-  @apply fixed inset-0 z-50 flex items-center justify-center bg-white left-0 right-0 top-0 bottom-0 h-full w-full;
-
-  .IncodeErrorModalContentContainer {
-    @apply flex flex-col items-center justify-center h-full w-full min-w-[320px] px-16;
-  }
-
-  .IncodeErrorModalContentSpacer {
-    @apply flex-1;
-  }
-
-  .IncodeErrorModalContentIconContainer {
-    @apply flex flex-col items-center flex-1 justify-center;
-  }
-
-  .IncodeErrorModalContentTitle {
-    @apply text-2xl font-bold text-center leading-[114%] tracking-[-0.5px] text-text-body-primary;
-  }
-
-  .IncodeErrorModalContentDescription {
-    @apply text-base text-center text-text-body-secondary font-medium leading-[114%] tracking-[-0.5px];
-  }
-
-  .IncodeErrorModalContentAttemptsContainer {
-    @apply flex flex-col items-center w-full;
-  }
-
-  .IncodeErrorModalContentAttemptsText {
-    @apply text-lg text-center text-text-body-secondary font-medium leading-[114%] tracking-[-0.5px];
-  }
-}

package/src/selfie/errorModalContent.tsx

@@ -1,44 +0,0 @@
-import type { ComponentChildren } from 'preact';
-import { Button } from '@/shared/button/button';
-import { Page } from '@/shared/page/page';
-import { Spacer } from '@/shared/spacer/spacer';
-import './errorModalContent.css';
-
-type ErrorModalContentProps = {
-  title: string;
-  description: string;
-  attemptsText: string;
-  buttonText: string;
-  icon: ComponentChildren;
-  onButtonClick: () => void;
-};
-
-export const ErrorModalContent = ({
-  title,
-  description,
-  attemptsText,
-  buttonText,
-  icon,
-  onButtonClick,
-}: ErrorModalContentProps) => {
-  return (
-    <div class="IncodeErrorModalContent">
-      <Page data-testid="face-capture-error-modal">
-        <div class="IncodeErrorModalContentContainer">
-          <div class="IncodeErrorModalContentIconContainer">
-            {icon}
-            <Spacer size={24} />
-            <h2 class="IncodeErrorModalContentTitle">{title}</h2>
-            <Spacer size={16} />
-            <p class="IncodeErrorModalContentDescription">{description}</p>
-          </div>
-          <div class="IncodeErrorModalContentAttemptsContainer">
-            <p class="IncodeErrorModalContentAttemptsText">{attemptsText}</p>
-            <Spacer size={24} />
-            <Button onClick={onButtonClick}>{buttonText}</Button>
-          </div>
-        </div>
-      </Page>
-    </div>
-  );
-};

package/src/selfie/faceOutline.css

@@ -1,5 +0,0 @@
-@reference "../styles/tailwind.css";
-
-.IncodeFaceOutline {
-  @apply h-full;
-}

package/src/selfie/faceOutline.tsx

@@ -1,22 +0,0 @@
-import type { FC } from 'preact/compat';
-import './faceOutline.css';
-
-export const FaceOutline: FC = () => {
-  return (
-    <svg
-      width="292"
-      height="272"
-      viewBox="0 0 292 272"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      class="IncodeFaceOutline"
-    >
-      <title>Outline</title>
-      <path
-        opacity="0.8"
-        d="M145.633 8.0625C115.606 8.06268 85.6206 26.5984 76.9712 54.293L76.771 54.9492C70.4539 76.1063 75.0139 100.802 76.8687 110.58L77.3628 113.188L75.1528 114.656C66.1187 120.66 63.5861 124.089 62.8472 126.92C62.4669 128.377 62.4644 130.035 62.8003 132.412C63.1635 134.983 63.7533 137.484 64.4233 141.347L64.5142 141.841C65.5056 146.956 68.1062 152.133 71.2749 156.618C74.5527 161.257 78.2056 164.826 80.7349 166.584L82.4517 167.777V169.869C82.4517 177.866 85.3476 186.144 89.6763 194.128C93.9906 202.085 99.5748 209.473 104.623 215.646L105.526 216.751V218.178C105.526 220.891 105.68 223.73 105.801 226.9C105.92 230.011 106.003 233.347 105.828 236.771C105.475 243.652 104.077 251.044 99.7446 258.227C91.1977 272.397 72.1081 284.401 31.8677 291.776L29.936 292.124C-41.1597 304.684 -61.4563 361.617 -63.2153 392.062H145.633V400.062H-71.3638L-71.3462 396.044C-71.2048 364.597 -50.9804 298.295 28.5444 284.246L30.4448 283.904C69.9919 276.654 86.1642 265.253 92.894 254.095C96.3216 248.412 97.5261 242.442 97.8374 236.362C97.9939 233.307 97.9241 230.262 97.8071 227.206C97.7111 224.697 97.5799 222.105 97.5396 219.615C92.5931 213.5 87.048 206.064 82.644 197.941C78.308 189.944 74.9442 181.04 74.5024 171.896C71.3932 169.387 67.8531 165.638 64.7417 161.234C61.1656 156.173 57.9337 149.942 56.6587 143.353L56.5415 142.714C55.9864 139.514 55.2491 136.155 54.8784 133.531C54.4806 130.715 54.3377 127.843 55.106 124.899C56.5344 119.427 60.7885 114.886 68.5259 109.489C66.4692 98.2995 62.7062 74.0938 69.106 52.6602L69.3345 51.9092C79.2266 20.2173 112.853 0.0626788 145.633 0.0625V8.0625ZM145.635 0.0625C178.415 0.0625 212.042 20.2172 221.934 51.9092L222.163 52.6602C228.562 74.0938 224.799 98.2996 222.743 109.489C230.48 114.886 234.734 119.427 236.163 124.899C236.931 127.843 236.788 130.715 236.39 133.531C236.019 136.155 235.282 139.514 234.727 142.714L234.61 143.353C233.335 149.942 230.103 156.173 226.527 161.234C223.415 165.638 219.875 169.387 216.766 171.896C216.324 181.04 212.961 189.944 208.625 197.941C204.221 206.064 198.676 213.5 193.729 219.615C193.689 222.105 193.557 224.697 193.461 227.206C193.344 230.262 193.275 233.307 193.431 236.362C193.742 242.442 194.947 248.412 198.375 254.095C205.104 265.253 221.277 276.654 260.824 283.904L262.724 284.246C342.249 298.294 362.473 364.597 362.615 396.044L362.632 400.062H145.635V392.062H354.484C352.725 361.616 332.429 304.683 261.333 292.124L259.401 291.776C219.161 284.401 200.071 272.397 191.524 258.227C187.192 251.044 185.793 243.652 185.441 236.771C185.266 233.347 185.348 230.011 185.467 226.9C185.589 223.73 185.743 220.891 185.743 218.178V216.751L186.646 215.646C191.694 209.473 197.278 202.085 201.592 194.128C205.921 186.144 208.817 177.866 208.817 169.869V167.777L210.534 166.584C213.063 164.826 216.716 161.257 219.994 156.618C223.162 152.133 225.763 146.956 226.754 141.841L226.845 141.347C227.515 137.484 228.105 134.983 228.468 132.412C228.804 130.034 228.802 128.377 228.421 126.92C227.682 124.089 225.15 120.66 216.116 114.656L213.906 113.188L214.4 110.58C216.255 100.802 220.815 76.1064 214.498 54.9492L214.297 54.293C205.648 26.5983 175.662 8.0625 145.635 8.0625V0.0625Z"
-        fill="white"
-      />
-    </svg>
-  );
-};

package/src/selfie/loadingBorder.css

@@ -1,12 +0,0 @@
-@reference "../styles/tailwind.css";
-
-.IncodeLoadingBorder {
-  @apply absolute w-full max-w-[335px] aspect-square;
-  &.IncodeLoadingBorderSpinning {
-    @apply animate-spin;
-  }
-
-  .IncodeLoadingBorderPath {
-    transition: all 1s ease-in-out;
-  }
-}