@smileid/web-components 2.0.2 → 10.0.0

package/{src → lib}/components/selfie/src/SelfieCaptureScreens.js

@@ -1,6 +1,6 @@
-import './selfie-capture';
 import './selfie-capture-instructions';
 import './selfie-capture-review';
+import './selfie-capture-wrapper/index.ts';
 import SmartCamera from '../../../domain/camera/src/SmartCamera';
 import styles from '../../../styles/src/styles';
 import packageJson from '../../../../package.json';
@@ -37,10 +37,76 @@ async function getPermissions(captureScreen, facingMode = 'user') {
   }
 }
 
+const cropImageFromDataUri = (
+  dataUri,
+  cropPercentX = 0,
+  cropPercentY = 0,
+  quality = 0.9,
+) =>
+  new Promise((resolve, reject) => {
+    if (!dataUri || typeof dataUri !== 'string') {
+      reject(new Error('Invalid data URI provided'));
+      return;
+    }
+
+    if (
+      cropPercentX < 0 ||
+      cropPercentX >= 99 ||
+      cropPercentY < 0 ||
+      cropPercentY >= 99
+    ) {
+      reject(new Error('Crop percentages must be between 0 and 99'));
+      return;
+    }
+
+    const img = new Image();
+
+    img.onload = () => {
+      try {
+        const canvas = document.createElement('canvas');
+        const ctx = canvas.getContext('2d');
+
+        const originalWidth = img.width;
+        const originalHeight = img.height;
+        const cropAmountX = (originalWidth * cropPercentX) / 100;
+        const cropAmountY = (originalHeight * cropPercentY) / 100;
+
+        const newWidth = originalWidth - cropAmountX * 2;
+        const newHeight = originalHeight - cropAmountY * 2;
+        canvas.width = newWidth;
+        canvas.height = newHeight;
+
+        ctx.drawImage(
+          img,
+          cropAmountX,
+          cropAmountY,
+          newWidth,
+          newHeight,
+          0,
+          0,
+          newWidth,
+          newHeight,
+        );
+
+        const croppedDataUri = canvas.toDataURL('image/jpeg', quality);
+        resolve(croppedDataUri);
+      } catch (error) {
+        reject(new Error(`Failed to process image: ${error.message}`));
+      }
+    };
+
+    img.onerror = () => {
+      reject(new Error('Failed to load image from data URI'));
+    };
+
+    img.src = dataUri;
+  });
+
 class SelfieCaptureScreens extends HTMLElement {
   constructor() {
     super();
     this.activeScreen = null;
+    this._remountKey = 0; // Counter for forcing wrapper remounts
     smartCameraWeb?.dispatchEvent(new CustomEvent('metadata.initialize'));
   }
 
@@ -49,7 +115,7 @@ class SelfieCaptureScreens extends HTMLElement {
             ${styles(this.themeColor)}
             <div>
               <selfie-capture-instructions theme-color='${this.themeColor}' ${this.showNavigation} ${this.hideAttribution} ${this.hideBack} hidden></selfie-capture-instructions>
-              <selfie-capture theme-color='${this.themeColor}' ${this.showNavigation} ${this.allowAgentMode} ${this.allowAgentModeTests} ${this.hideAttribution} ${this.disableImageTests} hidden></selfie-capture>
+              <selfie-capture-wrapper theme-color='${this.themeColor}' ${this.showNavigation} ${this.allowAgentMode} ${this.allowAgentModeTests} ${this.hideAttribution} ${this.disableImageTests} key="${this._remountKey}" start-countdown="false" hidden></selfie-capture-wrapper>
               <selfie-capture-review theme-color='${this.themeColor}' ${this.showNavigation} ${this.hideAttribution} hidden></selfie-capture-review>
             </div>
         `;
@@ -60,9 +126,8 @@ class SelfieCaptureScreens extends HTMLElement {
         libraryVersion: COMPONENTS_VERSION,
       },
     };
-
     this.selfieInstruction = this.querySelector('selfie-capture-instructions');
-    this.selfieCapture = this.querySelector('selfie-capture');
+    this.selfieCapture = this.querySelector('selfie-capture-wrapper');
     this.selfieReview = this.querySelector('selfie-capture-review');
 
     if (this.hideInstructions && !this.hasAttribute('hidden')) {
@@ -124,27 +189,8 @@ class SelfieCaptureScreens extends HTMLElement {
         this.handleBackEvents();
       },
     );
-
-    this.selfieCapture.addEventListener('selfie-capture.cancelled', () => {
-      this.selfieCapture.reset();
-      SmartCamera.stopMedia();
-      if (this.hideInstructions) {
-        this.handleBackEvents();
-        return;
-      }
-
-      this.setActiveScreen(this.selfieInstruction);
-    });
-
-    this.selfieCapture.addEventListener('selfie-capture.publish', (event) => {
-      smartCameraWeb?.dispatchEvent(
-        new CustomEvent('metadata.selfie-capture-end'),
-      );
-      this.selfieReview.setAttribute('data-image', event.detail.referenceImage);
-      this._data.images = event.detail.images;
-      SmartCamera.stopMedia();
-      this.setActiveScreen(this.selfieReview);
-    });
+    // Setup selfie-wrapper event listeners
+    this.setupSelfieWrapperEventListeners();
 
     this.selfieReview.addEventListener(
       'selfie-capture-review.rejected',
@@ -154,6 +200,10 @@ class SelfieCaptureScreens extends HTMLElement {
         );
         this.selfieReview.removeAttribute('data-image');
         this._data.images = [];
+
+        // Force remount by incrementing key
+        this.forceWrapperRemount();
+
         if (this.hideInstructions) {
           this.setActiveScreen(this.selfieCapture);
           await getPermissions(this.selfieCapture, this.getAgentMode());
@@ -182,6 +232,113 @@ class SelfieCaptureScreens extends HTMLElement {
     );
   }
 
+  // Force remount of selfie-capture-wrapper component for clean state
+  forceWrapperRemount() {
+    this._remountKey++;
+    const container = this.querySelector('div');
+    const oldSelfieCapture = this.selfieCapture;
+
+    // Create new selfie-capture-wrapper element with same attributes
+    const newSelfieCapture = document.createElement('selfie-capture-wrapper');
+    newSelfieCapture.setAttribute('theme-color', this.themeColor);
+    newSelfieCapture.setAttribute('key', this._remountKey.toString());
+    newSelfieCapture.setAttribute('start-countdown', 'false');
+
+    // Copy all the correct attributes based on the getter logic
+    const showNav = this.hasAttribute('show-navigation');
+    const allowAgent = this.getAttribute('allow-agent-mode') === 'true';
+    const allowAgentTests = this.hasAttribute('show-agent-mode-for-tests');
+    const hideAttr = this.hasAttribute('hide-attribution');
+    const disableTests = this.hasAttribute('disable-image-tests');
+
+    if (showNav) newSelfieCapture.setAttribute('show-navigation', '');
+    if (allowAgent) newSelfieCapture.setAttribute('allow-agent-mode', 'true');
+    if (allowAgentTests)
+      newSelfieCapture.setAttribute('show-agent-mode-for-tests', '');
+    if (hideAttr) newSelfieCapture.setAttribute('hide-attribution', '');
+    if (disableTests) newSelfieCapture.setAttribute('disable-image-tests', '');
+    newSelfieCapture.setAttribute('hidden', '');
+
+    // Replace old element with new one
+    container.replaceChild(newSelfieCapture, oldSelfieCapture);
+
+    // Update reference
+    this.selfieCapture = newSelfieCapture;
+
+    // Re-add event listeners for the new element
+    this.setupSelfieWrapperEventListeners();
+  }
+
+  // Override setActiveScreen to enable countdown when selfie-capture is active
+  setActiveScreen(screen) {
+    this.activeScreen?.setAttribute('hidden', '');
+    screen.removeAttribute('hidden');
+    this.activeScreen = screen;
+
+    // If activating selfie-capture-wrapper, enable the countdown and ensure permissions
+    if (screen === this.selfieCapture) {
+      screen.setAttribute('start-countdown', 'true');
+      getPermissions(this.selfieCapture, this.getAgentMode());
+    } else if (this.selfieCapture) {
+      // Disable countdown when not on capture screen
+      this.selfieCapture.setAttribute('start-countdown', 'false');
+    }
+  }
+
+  setupSelfieWrapperEventListeners() {
+    window.addEventListener('selfie-capture.cancelled', () => {
+      SmartCamera.stopMedia();
+
+      // Force remount of selfie-capture-wrapper for clean state on next visit
+      this.forceWrapperRemount();
+
+      if (this.hideInstructions) {
+        this.handleBackEvents();
+        return;
+      }
+
+      this.setActiveScreen(this.selfieInstruction);
+    });
+
+    // Add specific close event handler for selfie-capture-wrapper
+    window.addEventListener('selfie-capture.close', () => {
+      SmartCamera.stopMedia();
+
+      // Force remount of selfie-capture-wrapper for clean state on next visit
+      this.forceWrapperRemount();
+
+      this.handleCloseEvent();
+    });
+
+    window.addEventListener('selfie-capture.publish', async (event) => {
+      smartCameraWeb?.dispatchEvent(
+        new CustomEvent('metadata.selfie-capture-end'),
+      );
+      this.selfieReview.setAttribute(
+        'data-image',
+        await cropImageFromDataUri(event.detail.referenceImage, 20, 20),
+      );
+      this._data.images = event.detail.images;
+      SmartCamera.stopMedia();
+      this.setActiveScreen(this.selfieReview);
+    });
+
+    // Also listen for the publish event on the parent SelfieCaptureScreens element
+    // in case smartselfie-capture dispatches it there
+    this.addEventListener('selfie-capture.publish', async (event) => {
+      smartCameraWeb?.dispatchEvent(
+        new CustomEvent('metadata.selfie-capture-end'),
+      );
+      this.selfieReview.setAttribute(
+        'data-image',
+        await cropImageFromDataUri(event.detail.referenceImage, 20, 20),
+      );
+      this._data.images = event.detail.images;
+      SmartCamera.stopMedia();
+      this.setActiveScreen(this.selfieReview);
+    });
+  }
+
   _publishSelectedImages() {
     this.dispatchEvent(
       new CustomEvent('selfie-capture-screens.publish', { detail: this._data }),
@@ -193,7 +350,7 @@ class SelfieCaptureScreens extends HTMLElement {
   }
 
   get hideAttribution() {
-    return this.hasAttribute('hide-attribution') ? 'hide-attribution' : '';
+    return this.hasAttribute('hide-attribution') ? 'hide-attribution=""' : '';
   }
 
   get hideBackOfId() {
@@ -201,7 +358,7 @@ class SelfieCaptureScreens extends HTMLElement {
   }
 
   get showNavigation() {
-    return this.hasAttribute('show-navigation') ? 'show-navigation' : '';
+    return this.hasAttribute('show-navigation') ? 'show-navigation=""' : '';
   }
 
   get inAgentMode() {
@@ -209,25 +366,25 @@ class SelfieCaptureScreens extends HTMLElement {
   }
 
   get allowAgentMode() {
-    return this.inAgentMode ? "allow-agent-mode='true'" : '';
+    return this.inAgentMode ? 'allow-agent-mode="true"' : '';
   }
 
   get allowAgentModeTests() {
     return this.hasAttribute('show-agent-mode-for-tests')
-      ? 'show-agent-mode-for-tests'
+      ? 'show-agent-mode-for-tests=""'
       : '';
   }
 
   get hideBack() {
     return this.hasAttribute('hide-back-to-host') ||
       this.hasAttribute('hide-back')
-      ? 'hide-back'
+      ? 'hide-back=""'
       : '';
   }
 
   get disableImageTests() {
     return this.hasAttribute('disable-image-tests')
-      ? 'disable-image-tests'
+      ? 'disable-image-tests=""'
       : '';
   }
 
@@ -235,12 +392,6 @@ class SelfieCaptureScreens extends HTMLElement {
     return this.getAttribute('theme-color') || '#001096';
   }
 
-  setActiveScreen(screen) {
-    this.activeScreen?.setAttribute('hidden', '');
-    screen.removeAttribute('hidden');
-    this.activeScreen = screen;
-  }
-
   handleBackEvents() {
     this.dispatchEvent(new CustomEvent('selfie-capture-screens.cancelled'));
   }

package/{src → lib}/components/selfie/src/index.js

@@ -1,5 +1,3 @@
 import SelfieCaptureScreens from './SelfieCaptureScreens';
-import SelfieCapture from './selfie-capture/SelfieCapture';
 
 export default SelfieCaptureScreens;
-export { SelfieCapture };

package/{src → lib}/components/selfie/src/selfie-capture/SelfieCapture.js

@@ -358,7 +358,7 @@ function templateString() {
     left: 50%;
     min-width: auto;
     position: absolute;
-    top: calc(50% - 3px);
+    top: 50%;
     transform: translateX(-50%) translateY(50%);
   }
 
@@ -381,7 +381,7 @@ function templateString() {
   }
 
   .video-container video {
-    min-height: 100%;
+    height: 150%;
     transform: scaleX(-1) translateX(50%) translateY(-50%);
   }
 
@@ -520,7 +520,7 @@ function templateString() {
       <div class='video-container'>
         <div class='video'>
         </div>
-        <svg id="image-outline" width="215" height="245" viewBox="0 0 215 245" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <svg id="image-outline" width="215" height="245" viewBox="0 0 215 245" fill="none" xmlns="http://www.w3.org/2000/svg" style="position: relative;">
           <path d="M210.981 122.838C210.981 188.699 164.248 241.268 107.55 241.268C50.853 241.268 4.12018 188.699 4.12018 122.838C4.12018 56.9763 50.853 4.40771 107.55 4.40771C164.248 4.40771 210.981 56.9763 210.981 122.838Z" stroke="${this.themeColor}" stroke-width="7.13965"/>
         </svg>
         <div id="smile-cta-box">

package/{src → lib}/components/selfie/src/selfie-capture-review/SelfieCaptureReview.js

@@ -126,13 +126,6 @@ function templateString() {
         z-index: 1;
         block-size: 100%;
       }
-    
-      .selfie-container,
-      .selfie-review-container.landscape {
-        height: auto;
-        clip-path: inset(15% 20% 20% 20% round 10px);
-        overflow: hidden;
-      }
 
       .selfie-container img {
         background-color: black;

package/lib/components/selfie/src/selfie-capture-wrapper/SelfieCaptureWrapper.tsx

@@ -0,0 +1,227 @@
+import { useState, useEffect } from 'preact/hooks';
+import { IconLoader2 } from '@tabler/icons-preact';
+import register from 'preact-custom-element';
+import type { FunctionComponent } from 'preact';
+
+import { getBoolProp } from '@/utils/props';
+import SmartSelfieCapture from '../smartselfie-capture/SmartSelfieCapture';
+import '../selfie-capture/SelfieCapture';
+import { getMediapipeInstance } from '../smartselfie-capture/utils/mediapipeManager';
+
+declare const h: any;
+
+interface Props {
+  timeout?: number;
+  interval?: number;
+  duration?: number;
+  'theme-color'?: string;
+  'show-navigation'?: string | boolean;
+  'allow-agent-mode'?: string | boolean;
+  'show-agent-mode-for-tests'?: string | boolean;
+  'hide-attribution'?: string | boolean;
+  'disable-image-tests'?: string | boolean;
+  key?: string;
+  'start-countdown'?: string | boolean;
+  hidden?: string | boolean;
+}
+
+const SelfieCaptureWrapper: FunctionComponent<Props> = ({
+  timeout = 10000,
+  'start-countdown': startCountdownProp = false,
+  hidden: hiddenProp = false,
+  ...props
+}) => {
+  const hidden = getBoolProp(hiddenProp);
+  const startCountdown = getBoolProp(startCountdownProp);
+  const [mediapipeReady, setMediapipeReady] = useState(false);
+  const [loadingProgress, setLoadingProgress] = useState(0);
+  const [initialSessionCompleted, setInitialSessionCompleted] = useState(false);
+  const [mediapipeLoading, setMediapipeLoading] = useState(false);
+  const [usingSelfieCapture, setUsingSelfieCapture] = useState(false);
+
+  useEffect(() => {
+    if (mediapipeReady || mediapipeLoading) return;
+
+    const loadMediapipe = async () => {
+      setMediapipeLoading(true);
+      try {
+        await getMediapipeInstance();
+        setMediapipeReady(true);
+      } catch (error) {
+        console.error('Failed to load Mediapipe:', error);
+      }
+      setMediapipeLoading(false);
+    };
+
+    loadMediapipe();
+  }, [mediapipeReady, mediapipeLoading]);
+
+  useEffect(() => {
+    if (hidden || !startCountdown || mediapipeReady) return undefined;
+
+    const timer = setInterval(() => {
+      setLoadingProgress((prev: number) => Math.min(prev + 1, 100));
+    }, timeout / 100);
+
+    return () => {
+      clearInterval(timer);
+    };
+  }, [hidden, startCountdown, timeout, mediapipeReady]);
+
+  useEffect(() => {
+    if (hidden || mediapipeReady || loadingProgress < 100) return undefined;
+
+    const setupEventForwarding = () => {
+      const selfieCapture = document.querySelector('selfie-capture');
+      if (
+        selfieCapture &&
+        !selfieCapture.hasAttribute('data-backup-events-setup')
+      ) {
+        selfieCapture.setAttribute('data-backup-events-setup', 'true');
+
+        const forwardEvent = (event: Event) => {
+          const customEvent = event as CustomEvent;
+          window.dispatchEvent(
+            new CustomEvent(customEvent.type, {
+              detail: customEvent.detail,
+              bubbles: true,
+            }),
+          );
+        };
+
+        selfieCapture.addEventListener('selfie-capture.publish', forwardEvent);
+        selfieCapture.addEventListener(
+          'selfie-capture.cancelled',
+          forwardEvent,
+        );
+        selfieCapture.addEventListener('selfie-capture.close', forwardEvent);
+
+        return () => {
+          selfieCapture.removeEventListener(
+            'selfie-capture.publish',
+            forwardEvent,
+          );
+          selfieCapture.removeEventListener(
+            'selfie-capture.cancelled',
+            forwardEvent,
+          );
+          selfieCapture.removeEventListener(
+            'selfie-capture.close',
+            forwardEvent,
+          );
+        };
+      }
+      return undefined;
+    };
+
+    const timeoutId = setTimeout(setupEventForwarding, 200);
+    return () => {
+      clearTimeout(timeoutId);
+    };
+  }, [hidden, mediapipeReady, loadingProgress]);
+
+  if (hidden) {
+    return null;
+  }
+
+  // on retakes, prefer SmartSelfieCapture if Mediapipe is ready
+  if (initialSessionCompleted && mediapipeReady && !usingSelfieCapture) {
+    return <SmartSelfieCapture {...props} />;
+  }
+
+  // use SmartSelfieCapture if mediapipe loads
+  if (!initialSessionCompleted && mediapipeReady && !usingSelfieCapture) {
+    return <SmartSelfieCapture {...props} />;
+  }
+
+  if (loadingProgress >= 100) {
+    if (!usingSelfieCapture) {
+      setUsingSelfieCapture(true);
+    }
+
+    const propsWithoutHidden = { ...props };
+    delete (propsWithoutHidden as any).hidden;
+
+    const selfieCapture = h('selfie-capture', {
+      ...propsWithoutHidden,
+      ref: (el: HTMLElement) => {
+        if (el && !el.hasAttribute('data-events-setup')) {
+          el.setAttribute('data-events-setup', 'true');
+
+          const forwardEvent = (event: Event) => {
+            const customEvent = event as CustomEvent;
+
+            if (
+              customEvent.type === 'selfie-capture.publish' ||
+              customEvent.type === 'selfie-capture.cancelled' ||
+              customEvent.type === 'selfie-capture.close'
+            ) {
+              setInitialSessionCompleted(true);
+            }
+
+            window.dispatchEvent(
+              new CustomEvent(customEvent.type, {
+                detail: customEvent.detail,
+                bubbles: true,
+              }),
+            );
+          };
+
+          el.addEventListener('selfie-capture.publish', forwardEvent);
+          el.addEventListener('selfie-capture.cancelled', forwardEvent);
+          el.addEventListener('selfie-capture.close', forwardEvent);
+        }
+      },
+    });
+
+    return selfieCapture;
+  }
+
+  return (
+    <div style={{ textAlign: 'center', marginTop: '20%' }}>
+      <div
+        style={{
+          marginBottom: '16px',
+          display: 'flex',
+          justifyContent: 'center',
+        }}
+      >
+        <IconLoader2
+          size={48}
+          style={{ animation: 'spin 1s linear infinite' }}
+        />
+      </div>
+      <p>Loading... {loadingProgress}%</p>
+      <style>{`
+        @keyframes spin {
+          from { transform: rotate(0deg); }
+          to { transform: rotate(360deg); }
+        }
+      `}</style>
+    </div>
+  );
+};
+
+if (!customElements.get('selfie-capture-wrapper')) {
+  register(
+    SelfieCaptureWrapper,
+    'selfie-capture-wrapper',
+    [
+      'timeout',
+      'interval',
+      'duration',
+      'theme-color',
+      'show-navigation',
+      'allow-agent-mode',
+      'show-agent-mode-for-tests',
+      'hide-attribution',
+      'disable-image-tests',
+      'key',
+      'start-countdown',
+      'hidden',
+    ],
+    { shadow: true },
+  );
+}
+
+export default SelfieCaptureWrapper;

package/lib/components/selfie/src/selfie-capture-wrapper/index.ts

@@ -0,0 +1 @@
+export { default as SelfieCaptureWrapper } from './SelfieCaptureWrapper';

package/lib/components/selfie/src/smartselfie-capture/OvalProgress.tsx

@@ -0,0 +1,81 @@
+import { useEffect, useRef } from 'preact/hooks';
+
+interface OvalProgressProps {
+  progress: number;
+  duration?: number;
+  themeColor?: string;
+}
+
+const OvalProgress = ({
+  progress,
+  duration = 1000,
+  themeColor = '#001096',
+}: OvalProgressProps) => {
+  const pathRef = useRef<SVGPathElement>(null);
+  const prevProgress = useRef(progress);
+
+  useEffect(() => {
+    const path = pathRef.current;
+    if (!path) return;
+
+    const pathLength = path.getTotalLength();
+    path.style.opacity = progress > 0 ? '1' : '0';
+    const fromOffset = pathLength * (1 - prevProgress.current);
+    const toOffset = pathLength * (1 - progress);
+
+    // If no change, skip
+    if (fromOffset === toOffset) return;
+
+    path.style.transition = 'none';
+    path.style.strokeDasharray = `${pathLength} ${pathLength}`;
+    path.style.strokeDashoffset = `${fromOffset}`;
+
+    // Force style flush
+    path.getBoundingClientRect();
+
+    path.style.transition = `stroke-dashoffset ${duration}ms ease-out`;
+    path.style.strokeDashoffset = `${toOffset}`;
+
+    prevProgress.current = progress;
+  }, [progress, duration]);
+
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        top: '0',
+        left: '0',
+        width: '100%',
+        height: '100%',
+        pointerEvents: 'none',
+      }}
+    >
+      <svg
+        viewBox="0 0 285 380"
+        preserveAspectRatio="xMidYMid meet"
+        style={{ width: '100%', height: '100%' }}
+      >
+        {/* id is referenced by parent */}
+        <clipPath id="selfie-clip-path" clipPathUnits="objectBoundingBox">
+          <path d="M0.085 0.382 C0.087 0.357 0.092 0.294 0.131 0.236 C0.200 0.133 0.340 0.063 0.501 0.063 C0.730 0.063 0.915 0.205 0.915 0.382 C0.915 0.424 0.899 0.513 0.891 0.549 C0.882 0.588 0.871 0.626 0.857 0.664 C0.792 0.825 0.639 0.937 0.501 0.937 C0.314 0.937 0.182 0.755 0.144 0.666 C0.126 0.624 0.110 0.557 0.107 0.547 C0.092 0.485 0.081 0.439 0.085 0.382 Z" />
+        </clipPath>
+        <path
+          d="M142.693 24C208.319 24 261 77.97 261 145.008C261 160.97 256.319 194.788 254.129 208.356C251.64 223.188 248.348 237.875 244.27 252.35C225.747 313.203 182.328 356 142.693 356C89.414 356 51.871 286.667 41.016 252.948C35.937 236.987 31.356 211.748 30.559 207.857C26.277 184.114 22.991 166.556 24.285 145.008C24.883 135.631 26.277 111.789 37.431 89.742C57.049 50.636 96.983 24 142.693 24Z"
+          stroke={themeColor}
+          fill="none"
+          style={{ strokeWidth: '8' }}
+        />
+        <path
+          ref={pathRef}
+          d="M142.693 24C208.319 24 261 77.97 261 145.008C261 160.97 256.319 194.788 254.129 208.356C251.64 223.188 248.348 237.875 244.27 252.35C225.747 313.203 182.328 356 142.693 356C89.414 356 51.871 286.667 41.016 252.948C35.937 236.987 31.356 211.748 30.559 207.857C26.277 184.114 22.991 166.556 24.285 145.008C24.883 135.631 26.277 111.789 37.431 89.742C57.049 50.636 96.983 24 142.693 24Z"
+          stroke="#22c55e"
+          style={{ strokeWidth: '8' }}
+          fill="none"
+          strokeLinecap="round"
+        />
+      </svg>
+    </div>
+  );
+};
+
+export default OvalProgress;