@smileid/web-components 11.4.4 → 11.5.0

package/lib/components/selfie/src/enhanced-smartselfie-capture/EnhancedSmartSelfieConsent.tsx

@@ -0,0 +1,71 @@
+import register from 'preact-custom-element';
+import type { FunctionComponent } from 'preact';
+
+import { getBoolProp } from '../../../../utils/props';
+import { ConsentView } from './components/ConsentView';
+
+import '../../../attribution/PoweredBySmileId';
+
+interface Props {
+  'theme-color'?: string;
+  'hide-attribution'?: string | boolean;
+  'partner-name'?: string;
+  'partner-logo'?: string;
+  'policy-url'?: string;
+}
+
+/**
+ * Standalone Enhanced SmartSelfie consent screen. Hosted as its own custom
+ * element so partner integrations (and the embed product scripts) can mount
+ * the new consent UX independently of `<enhanced-smartselfie-capture>`.
+ *
+ * Events:
+ *   - `enhanced-smart-selfie-consent.granted` \u2014 user accepted.
+ *   - `enhanced-smart-selfie-consent.denied`  \u2014 user declined.
+ */
+const EnhancedSmartSelfieConsent: FunctionComponent<Props> = ({
+  'theme-color': themeColor = '#001096',
+  'hide-attribution': hideAttributionProp = false,
+  'partner-name': partnerName,
+  'partner-logo': partnerLogo,
+  'policy-url': policyUrl,
+}) => {
+  const hideAttribution = getBoolProp(hideAttributionProp);
+
+  return (
+    <ConsentView
+      themeColor={themeColor}
+      hideAttribution={hideAttribution}
+      partnerName={partnerName}
+      partnerLogo={partnerLogo}
+      policyUrl={policyUrl}
+      onGranted={() => {
+        window.dispatchEvent(
+          new CustomEvent('enhanced-smart-selfie-consent.granted'),
+        );
+      }}
+      onDenied={() => {
+        window.dispatchEvent(
+          new CustomEvent('enhanced-smart-selfie-consent.denied'),
+        );
+      }}
+    />
+  );
+};
+
+if (!customElements.get('enhanced-smart-selfie-consent')) {
+  register(
+    EnhancedSmartSelfieConsent,
+    'enhanced-smart-selfie-consent',
+    [
+      'theme-color',
+      'hide-attribution',
+      'partner-name',
+      'partner-logo',
+      'policy-url',
+    ],
+    { shadow: true },
+  );
+}
+
+export default EnhancedSmartSelfieConsent;

package/lib/components/selfie/src/enhanced-smartselfie-capture/EnhancedSmartSelfieSubmission.tsx

@@ -0,0 +1,181 @@
+import { useState, useEffect } from 'preact/hooks';
+import register from 'preact-custom-element';
+import type { FunctionComponent } from 'preact';
+
+import { getBoolProp } from '../../../../utils/props';
+import { t } from '../../../../domain/localisation';
+import {
+  SubmissionView,
+  type SubmissionViewMode,
+} from './components/SubmissionView';
+
+import '../../../attribution/PoweredBySmileId';
+
+interface Props {
+  'theme-color'?: string;
+  'hide-attribution'?: string | boolean;
+  /** Captured selfie data URI shown inside the oval. */
+  'image-src'?: string;
+  /** When true, the image is mirrored (user-facing camera). */
+  mirror?: string | boolean;
+  /** Initial submission state. Can be overridden at runtime via attribute or event. */
+  'submission-state'?: SubmissionViewMode;
+  /** Optional supporting copy under the title. */
+  'submission-message'?: string;
+  /**
+   * When set, the failure card uses a localised reason message instead of
+   * the supplied submission-message. Currently the only recognised value is
+   * `active_liveness_timed_out`.
+   */
+  'failure-reason'?: string;
+}
+
+/**
+ * Convert an internal forced-failure reason code into the message we render
+ * under the "Submission Failed" title. Returns `undefined` for unknown
+ * reasons so callers can fall back to whatever the host supplied.
+ */
+const failureReasonToMessage = (
+  reason: string | undefined,
+): string | undefined => {
+  switch (reason) {
+    case 'active_liveness_timed_out':
+      return t('selfie.ess.failure.sessionTimedOut');
+    default:
+      return undefined;
+  }
+};
+
+/**
+ * Standalone post-capture submission UI for Enhanced SmartSelfie flows
+ * where the partner takes the captured selfie, uploads it, and wants to
+ * show submitting / success / failure cards in our visual language.
+ *
+ * Used today by SmartSelfie Auth, where the host script knows the upload
+ * outcome and drives this element accordingly. KYC / DV / EDV products
+ * skip it entirely and route the user into their next form step.
+ *
+ * Drive it via either:
+ *   - attribute updates: `submission-state="submitting|success|error"`,
+ *     `submission-message`, `failure-reason`
+ *   - or window events:
+ *     `enhanced-smart-selfie-submission.set-state`
+ *       detail: { state, message?, failureReason? }
+ *
+ * Emits:
+ *   - `enhanced-smart-selfie-submission.continue` (detail: { success })
+ *     when the user taps Continue on the success/error card.
+ *   - `enhanced-smart-selfie-submission.exit` when the user taps Exit on
+ *     the failure card.
+ */
+const EnhancedSmartSelfieSubmission: FunctionComponent<Props> = ({
+  'theme-color': themeColor = '#001096',
+  'hide-attribution': hideAttributionProp = false,
+  'image-src': imageSrc = '',
+  mirror: mirrorProp = false,
+  'submission-state': submissionStateProp = 'submitting',
+  'submission-message': submissionMessage,
+  'failure-reason': failureReason,
+}) => {
+  const hideAttribution = getBoolProp(hideAttributionProp);
+  const mirror = getBoolProp(mirrorProp);
+
+  const [state, setState] = useState<SubmissionViewMode>(submissionStateProp);
+  const [message, setMessage] = useState<string | undefined>(submissionMessage);
+  const [reason, setReason] = useState<string | undefined>(failureReason);
+
+  // Sync attribute changes from the host through to local state so partners
+  // can update the card by setAttribute alone (no event required).
+  useEffect(() => {
+    setState(submissionStateProp);
+  }, [submissionStateProp]);
+  useEffect(() => {
+    setMessage(submissionMessage);
+  }, [submissionMessage]);
+  useEffect(() => {
+    setReason(failureReason);
+  }, [failureReason]);
+
+  // Event-driven path: avoids partners having to reach into the shadow DOM
+  // to flip attributes. Detail mirrors the attribute names.
+  useEffect(() => {
+    const handler = (e: Event) => {
+      const ce = e as CustomEvent<{
+        state?: SubmissionViewMode;
+        message?: string;
+        failureReason?: string;
+      }>;
+      if (ce.detail?.state) setState(ce.detail.state);
+      if (ce.detail?.message !== undefined) setMessage(ce.detail.message);
+      if (ce.detail?.failureReason !== undefined) {
+        setReason(ce.detail.failureReason);
+      }
+    };
+    window.addEventListener(
+      'enhanced-smart-selfie-submission.set-state',
+      handler,
+    );
+    return () => {
+      window.removeEventListener(
+        'enhanced-smart-selfie-submission.set-state',
+        handler,
+      );
+    };
+  }, []);
+
+  const success = state === 'success';
+  const isResolved = success || state === 'error';
+  const resolvedMessage = !success
+    ? (failureReasonToMessage(reason) ?? message)
+    : message;
+
+  return (
+    <SubmissionView
+      imageSrc={imageSrc}
+      mirror={mirror}
+      themeColor={themeColor}
+      hideAttribution={hideAttribution}
+      mode={state}
+      message={resolvedMessage}
+      onContinue={
+        isResolved
+          ? () => {
+              window.dispatchEvent(
+                new CustomEvent('enhanced-smart-selfie-submission.continue', {
+                  detail: { success },
+                }),
+              );
+            }
+          : undefined
+      }
+      onExit={
+        state === 'error'
+          ? () => {
+              window.dispatchEvent(
+                new CustomEvent('enhanced-smart-selfie-submission.exit'),
+              );
+            }
+          : undefined
+      }
+    />
+  );
+};
+
+if (!customElements.get('enhanced-smart-selfie-submission')) {
+  register(
+    EnhancedSmartSelfieSubmission,
+    'enhanced-smart-selfie-submission',
+    [
+      'theme-color',
+      'hide-attribution',
+      'image-src',
+      'mirror',
+      'submission-state',
+      'submission-message',
+      'failure-reason',
+    ],
+    { shadow: true },
+  );
+}
+
+export default EnhancedSmartSelfieSubmission;

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

@@ -0,0 +1,87 @@
+import type { FunctionComponent } from 'preact';
+
+interface OvalProgressProps {
+  /**
+   * Colour of the static oval border. Defaults to the neutral grey used in the
+   * Enhanced SmartSelfie design; callers can pass an error tint (e.g. red)
+   * when a quality check fails (too dark, too blurry, no face, etc.).
+   */
+  borderColor?: string;
+  /**
+   * When set to a side, render a coloured arc over that quarter of the oval
+   * to highlight which side of the frame the user needs to fix. Use 'all' to
+   * tint the whole border (e.g. too-close, too-far, too-dark).
+   */
+  errorSide?: 'top' | 'right' | 'bottom' | 'left' | 'all' | null;
+  /** Colour of the error arc / full border. Defaults to red. */
+  errorColor?: string;
+}
+
+// Pre-computed end-points for each side-arc on the 311×418 ellipse
+// (cx=155.5, cy=209, rx=153.5, ry=207). Each "side" is the 90° arc centred on
+// that compass point, i.e. top spans the upper quadrant between the
+// 45°/135° parametric angles. Drawing each side as its own <path> avoids the
+// rendering artefacts of the previous stroke-dash trick (round end-caps on a
+// thicker stroke produced visible bulges where the highlight met the base
+// border).
+const SIDE_ARCS: Record<'top' | 'right' | 'bottom' | 'left', string> = {
+  // 135° → 45°, sweeping clockwise across the top.
+  top: 'M 46.95 62.63 A 153.5 207 0 0 1 264.05 62.63',
+  // 45° → -45°, clockwise down the right side.
+  right: 'M 264.05 62.63 A 153.5 207 0 0 1 264.05 355.37',
+  // -45° → -135°, clockwise across the bottom.
+  bottom: 'M 264.05 355.37 A 153.5 207 0 0 1 46.95 355.37',
+  // -135° → 135°, clockwise up the left side.
+  left: 'M 46.95 355.37 A 153.5 207 0 0 1 46.95 62.63',
+};
+
+const OvalProgress: FunctionComponent<OvalProgressProps> = ({
+  borderColor = '#C4C4C4',
+  errorSide = null,
+  errorColor = '#EF4343',
+}) => (
+  <div
+    style={{
+      position: 'absolute',
+      top: '0',
+      left: '0',
+      width: '100%',
+      height: '100%',
+      pointerEvents: 'none',
+    }}
+  >
+    <svg
+      viewBox="0 0 311 418"
+      preserveAspectRatio="xMidYMid meet"
+      style={{ width: '100%', height: '100%' }}
+    >
+      {/*
+        Base ellipse border. Authored as a single closed path (rather than
+        <ellipse>) so the shape definition lives next to the side-arc paths
+        below and any future tweaks stay co-located.
+        cx=155.5 cy=209 rx=153.5 ry=207 — i.e. a 311×418 ellipse inset by the
+        2px stroke so the border sits inside the wrapper bounds.
+      */}
+      <path
+        d="M 155.5 2 A 153.5 207 0 0 1 309 209 A 153.5 207 0 0 1 155.5 416 A 153.5 207 0 0 1 2 209 A 153.5 207 0 0 1 155.5 2 Z"
+        stroke={errorSide === 'all' ? errorColor : borderColor}
+        fill="none"
+        style={{ strokeWidth: '4', transition: 'stroke 200ms ease-out' }}
+      />
+      {errorSide && errorSide !== 'all' && (
+        <path
+          d={SIDE_ARCS[errorSide]}
+          stroke={errorColor}
+          fill="none"
+          strokeLinecap="butt"
+          style={{
+            strokeWidth: '4',
+            transition: 'stroke 200ms ease-out',
+          }}
+        />
+      )}
+    </svg>
+  </div>
+);
+
+export default OvalProgress;

package/lib/components/selfie/src/enhanced-smartselfie-capture/assets/Icon.svg

@@ -0,0 +1,8 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.4194 10.3225L10.5181 11.0759L9.82031 11.5829L10.7216 10.8295L11.4194 10.3225Z" fill="#2D2B2A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.5181 11.0759C10.267 11.2857 10.2227 11.717 10.3631 12.1576C10.9696 14.0608 12.3778 16.3257 13.7094 17.5344C13.9837 17.7837 14.2892 17.8556 14.5129 17.6935L13.8151 18.2005C13.5914 18.3626 13.2859 18.2907 13.0116 18.0414C11.68 16.8327 10.2718 14.5678 9.66527 12.6645C9.52489 12.224 9.56924 11.7927 9.82025 11.5829L10.5181 11.0759Z" fill="#2D2B2A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.5127 17.6932C14.5404 17.6731 14.5668 17.6495 14.5917 17.6222L15.408 16.7321C15.4331 16.7047 15.4598 16.6808 15.4878 16.6603L14.79 17.1673C14.762 17.1878 14.7353 17.2117 14.7102 17.239L13.8939 18.1292C13.869 18.1565 13.8426 18.1801 13.8149 18.2001L14.5127 17.6932Z" fill="#2D2B2A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.4878 16.6605C15.6931 16.5101 15.9684 16.5435 16.223 16.7579L18.6869 18.8361C19.0169 19.1147 19.2004 19.6138 19.1281 20.0375L18.6364 22.913C18.6015 23.1171 18.5171 23.2708 18.3935 23.3619L17.6957 23.8689C17.8193 23.7778 17.9037 23.6241 17.9386 23.42L18.4303 20.5444C18.5026 20.1208 18.3191 19.6217 17.9891 19.3431L15.5252 17.2649C15.2706 17.0505 14.9953 17.0171 14.79 17.1674L15.4878 16.6605Z" fill="#2D2B2A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.3943 23.3617C18.3307 23.4086 18.2566 23.4388 18.1735 23.4508C18.1328 23.4563 18.0902 23.4588 18.0447 23.458C12.7802 23.3492 5.59157 11.7987 6.8411 5.45557C6.85204 5.40148 6.8648 5.35031 6.87938 5.30285C6.92584 5.1555 7.0004 5.04382 7.09708 4.97266L6.39928 5.47964C6.3026 5.5508 6.22804 5.66248 6.18158 5.80984C6.167 5.85729 6.15423 5.90846 6.14329 5.96256C4.89377 12.3056 12.0824 23.8562 17.3469 23.965C17.3924 23.9658 17.435 23.9633 17.4757 23.9578C17.5588 23.9458 17.6329 23.9156 17.6965 23.8687L18.3943 23.3617Z" fill="#F9F0E7"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.84053 5.456C6.85147 5.4019 6.86423 5.35074 6.87882 5.30328C6.96816 5.0199 7.16143 4.86846 7.41608 4.88341L9.78396 5.02251C10.1328 5.04315 10.4756 5.3898 10.6093 5.85628L11.606 9.33848C11.7233 9.74744 11.651 10.129 11.4195 10.3226L10.5181 11.076C10.2671 11.2858 10.2228 11.717 10.3632 12.1577C10.9697 14.0609 12.3779 16.3258 13.7095 17.5345C14.0177 17.8146 14.3653 17.8707 14.592 17.6226L15.4082 16.7325C15.6179 16.5045 15.9339 16.5145 16.2232 16.7581L18.6871 18.8363C19.0171 19.115 19.2007 19.614 19.1284 20.0377L18.6367 22.9132C18.5838 23.2224 18.4173 23.4161 18.1729 23.4512C18.1322 23.4567 18.0897 23.4592 18.0441 23.4584C12.7796 23.3497 5.59101 11.7991 6.84053 5.456Z" fill="#2D2B2A"/>
+</svg>

package/lib/components/selfie/src/enhanced-smartselfie-capture/assets/accessories.svg

@@ -0,0 +1,77 @@
+<svg width="47" height="79" viewBox="0 0 47 79" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_dd_6_9135)">
+<g clip-path="url(#clip0_6_9135)">
+<path d="M7 75C4.79086 75 3 73.2091 3 71L3 6C3 3.79086 4.79086 2 7 2H40C42.2091 2 44 3.79086 44 6V71C44 73.2091 42.2091 75 40 75H7Z" fill="white" fill-opacity="0.01" shape-rendering="crispEdges"/>
+<g clip-path="url(#clip1_6_9135)">
+<rect width="73" height="41" transform="matrix(0 -1 1 0 3 75)" fill="white"/>
+</g>
+<rect x="11" y="63" width="25" height="6" rx="3" fill="#848282"/>
+<mask id="mask0_6_9135" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="-4" y="8" width="56" height="54">
+<path d="M51.0264 8.25V61.6221H-3.75V8.25H51.0264Z" fill="white" stroke="white" stroke-width="0.5"/>
+</mask>
+<g mask="url(#mask0_6_9135)">
+<path d="M23.5338 13.3046C32.3117 13.3046 39.4387 22.9976 39.4387 34.9359C39.4387 46.8743 32.3117 56.5673 23.5338 56.5673C14.7559 56.5673 7.62891 46.8743 7.62891 34.9359C7.62891 22.9976 14.7559 13.3046 23.5338 13.3046Z" stroke="#EF4343" stroke-width="0.5"/>
+</g>
+<mask id="mask1_6_9135" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="3" y="9" width="41" height="52">
+<path d="M44 8.99994H3V60.8159H44V8.99994Z" fill="white"/>
+</mask>
+<g mask="url(#mask1_6_9135)">
+<path d="M12.8166 32.7658C11.4254 32.3431 9.47724 33.1516 9.72709 35.8233C9.93631 38.0612 10.9179 40.0953 13.3212 39.499C14.5155 39.2025 14.2242 37.8923 14.1115 36.2089C13.9987 34.5256 14.2078 33.1886 12.8166 32.7658Z" fill="#2D2A29"/>
+<path d="M12.8166 32.7658C11.4254 32.3431 9.47724 33.1516 9.72709 35.8233C9.93631 38.0612 10.9179 40.0953 13.3212 39.499" fill="white"/>
+<path d="M12.8166 32.7658C11.4254 32.3431 9.47724 33.1516 9.72709 35.8233C9.93631 38.0612 10.9179 40.0953 13.3212 39.499" stroke="#1F1C1C" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M33.4488 32.694C34.837 32.2616 36.7908 33.0565 36.5596 35.7299C36.366 37.9691 35.3986 40.0101 32.9912 39.4305C31.7949 39.1424 32.077 37.8302 32.178 36.1461C32.279 34.462 32.0606 33.1265 33.4488 32.694Z" fill="#2D2A29"/>
+<path d="M33.4488 32.694C34.837 32.2616 36.7908 33.0565 36.5596 35.7299C36.366 37.9691 35.3986 40.0101 32.9912 39.4305" fill="white"/>
+<path d="M33.4488 32.694C34.837 32.2616 36.7908 33.0565 36.5596 35.7299C36.366 37.9691 35.3986 40.0101 32.9912 39.4305" stroke="#1F1C1C" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M22.9836 19.7699C10.6889 19.759 12.5485 31.6191 12.7202 34.8791C12.892 38.139 14.4742 48.8946 22.819 49.1688C31.6395 49.4587 33.3115 38.4419 33.5126 34.8065C33.7137 31.1711 35.1706 19.7808 22.9836 19.7699Z" fill="white"/>
+<path d="M22.9836 19.7699C10.6889 19.759 12.5485 31.6191 12.7202 34.8791C12.892 38.139 14.4742 48.8946 22.819 49.1688C31.6395 49.4587 33.3115 38.4419 33.5126 34.8065C33.7137 31.1711 35.1706 19.7808 22.9836 19.7699Z" stroke="#1F1C1C" stroke-width="0.5"/>
+<path d="M18.5002 32.9882C19.0534 32.9863 19.5045 33.5775 19.5071 34.3076C19.5096 35.0377 19.0626 35.6321 18.5095 35.634C17.9564 35.6359 17.5052 35.0447 17.5027 34.3146C17.5001 33.5845 17.9471 32.9901 18.5002 32.9882Z" fill="#1F1C1C"/>
+<path d="M27.8543 32.9556C28.4074 32.9537 28.8585 33.5449 28.8611 34.275C28.8636 35.0051 28.4166 35.5995 27.8635 35.6014C27.3104 35.6034 26.8592 35.0121 26.8567 34.282C26.8541 33.5519 27.3011 32.9575 27.8543 32.9556Z" fill="#1F1C1C"/>
+<path d="M16.7869 32.2059C17.319 31.4557 18.7745 31.1967 19.3896 31.3014" stroke="#1F1C1C" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M29.4544 32.1618C28.917 31.4153 27.4597 31.1664 26.8454 31.2755" stroke="#1F1C1C" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M23.7821 34.2257C23.7821 34.2257 23.9006 37.5393 23.7153 38.0477C23.53 38.5561 22.809 38.719 22.6753 38.7195" stroke="#1F1C1C" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M22.2061 43.3561C22.5924 43.495 23.6224 43.495 24.0386 43.3561" stroke="#1F1C1C" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M20.4067 41.7226C20.4067 41.7226 20.9766 41.9787 23.0281 41.9695C25.2666 41.9597 26.0352 41.7296 26.0352 41.7296C26.0352 41.7296 24.8853 41.9001 23.0281 41.9102C21.4035 41.9188 20.4067 41.7226 20.4067 41.7226Z" fill="white"/>
+<path d="M20.4067 41.7226C20.4067 41.7226 20.9766 41.9787 23.0281 41.9695C25.2666 41.9597 26.0352 41.7296 26.0352 41.7296C26.0352 41.7296 24.8853 41.9001 23.0281 41.9102C21.4035 41.9188 20.4067 41.7226 20.4067 41.7226Z" stroke="#1F1C1C" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M14.7529 37.8635C14.7529 37.8635 13.7216 37.769 12.1802 31.7942" stroke="#1F1C1C" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M31.9355 37.8037C31.9355 37.8037 33.1531 35.1909 34.0523 31.9394" stroke="#1F1C1C" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M30.1131 44.7719C32.8699 42.1709 32.6121 41.0965 33.3281 39.0691" stroke="#1F1C1C" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.9583 44.3053C12.9669 41.7936 13.5822 41.0725 12.9102 39.1367" stroke="#1F1C1C" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M23.5395 35.7791C22.209 35.8127 20.8818 36.8009 19.8988 36.9489C18.9158 37.097 14.2002 36.9399 14.2002 36.9399C14.2002 36.9399 14.8418 38.8845 14.5395 43.456C14.947 44.1777 18.2676 49.5368 23.7893 49.3449C29.3426 49.1519 30.0401 45.5982 31.7525 43.445C31.4236 40.033 32.4235 36.7895 32.4235 36.7895C32.4235 36.7895 27.9696 37.0075 27.1879 36.8367C26.4063 36.6659 24.87 35.7456 23.5395 35.7791Z" fill="#8C8686"/>
+<path d="M23.5395 35.7791C22.209 35.8127 20.8818 36.8009 19.8988 36.9489C18.9158 37.097 14.2002 36.9399 14.2002 36.9399C14.2002 36.9399 14.8418 38.8845 14.5395 43.456C14.947 44.1777 18.2676 49.5368 23.7893 49.3449C29.3426 49.1519 30.0401 45.5982 31.7525 43.445C31.4236 40.033 32.4235 36.7895 32.4235 36.7895C32.4235 36.7895 27.9696 37.0075 27.1879 36.8367C26.4063 36.6659 24.87 35.7456 23.5395 35.7791Z" stroke="#1F1C1C" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M15.9506 41.186C15.9506 41.186 20.9811 40.4164 23.2088 40.4954C25.2934 40.5693 28.8217 40.8229 30.0955 41.1077" stroke="#1F1C1C" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16.7091 43.0347C16.7091 43.0347 20.4734 44.1497 23.1346 44.1114C25.2202 44.0815 28.5125 43.4274 29.5233 42.961" stroke="#1F1C1C" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M16.8896 44.9433C16.8896 44.9433 20.1057 46.4363 23.2297 46.3964C25.3155 46.3699 28.3463 45.424 29.3571 44.9576" stroke="#1F1C1C" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M24.4977 33.6644C23.735 33.2493 22.1671 33.3089 21.8622 33.6667" stroke="#1F1C1C" stroke-width="0.5"/>
+<path d="M20.3603 31.5591C19.1688 31.1374 15.5236 31.2855 13.8285 31.6531C13.3137 31.7646 12.2788 32.0196 12.2788 32.0196C12.2788 32.0196 12.1192 32.3118 12.3143 32.4721C12.5095 32.6324 12.9966 32.9201 13.0624 33.0813C13.1282 33.2426 13.2715 35.2465 13.3093 36.0224C13.347 36.7983 13.9747 38.7019 17.3064 38.808C22.1564 38.9624 21.9392 34.8696 21.9937 33.9244C22.0514 32.9215 21.1222 31.8285 20.3603 31.5591Z" fill="#1F1C1C"/>
+<path d="M20.3603 31.5591C19.1688 31.1374 15.5236 31.2855 13.8285 31.6531C13.3137 31.7646 12.2788 32.0196 12.2788 32.0196C12.2788 32.0196 12.1192 32.3118 12.3143 32.4721C12.5095 32.6324 12.9966 32.9201 13.0624 33.0813C13.1282 33.2426 13.2715 35.2465 13.3093 36.0224C13.347 36.7983 13.9747 38.7019 17.3064 38.808C22.1564 38.9624 21.9392 34.8696 21.9937 33.9244C22.0514 32.9215 21.1222 31.8285 20.3603 31.5591Z" stroke="#1F1C1C" stroke-width="0.5"/>
+<path d="M25.8574 31.5207C27.0429 31.0824 30.6898 31.1796 32.3898 31.5235C32.9062 31.6277 33.9445 31.8683 33.9445 31.8683C33.9445 31.8683 34.1082 32.1582 33.9153 32.3213C33.7224 32.4843 33.2394 32.7787 33.1759 32.9409C33.1123 33.103 32.997 35.1088 32.9701 35.8851C32.9431 36.6614 32.342 38.5736 29.0122 38.7262C24.1648 38.9484 24.3248 34.853 24.2572 33.9086C24.1855 32.9066 25.0993 31.8007 25.8574 31.5207Z" fill="#1F1C1C"/>
+<path d="M25.8574 31.5207C27.0429 31.0824 30.6898 31.1796 32.3898 31.5235C32.9062 31.6277 33.9445 31.8683 33.9445 31.8683C33.9445 31.8683 34.1082 32.1582 33.9153 32.3213C33.7224 32.4843 33.2394 32.7787 33.1759 32.9409C33.1123 33.103 32.997 35.1088 32.9701 35.8851C32.9431 36.6614 32.342 38.5736 29.0122 38.7262C24.1648 38.9484 24.3248 34.853 24.2572 33.9086C24.1855 32.9066 25.0993 31.8007 25.8574 31.5207Z" stroke="#1F1C1C" stroke-width="0.5"/>
+</g>
+</g>
+<path d="M3.5 71L3.5 6C3.5 4.06701 5.067 2.5 7 2.5H40C41.933 2.5 43.5 4.06701 43.5 6V71C43.5 72.933 41.933 74.5 40 74.5H7C5.067 74.5 3.5 72.933 3.5 71Z" stroke="#E2E8F0" shape-rendering="crispEdges"/>
+</g>
+<defs>
+<filter id="filter0_dd_6_9135" x="0" y="0" width="47" height="79" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_6_9135"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="1.5"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_6_9135" result="effect2_dropShadow_6_9135"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_6_9135" result="shape"/>
+</filter>
+<clipPath id="clip0_6_9135">
+<path d="M7 75C4.79086 75 3 73.2091 3 71L3 6C3 3.79086 4.79086 2 7 2H40C42.2091 2 44 3.79086 44 6V71C44 73.2091 42.2091 75 40 75H7Z" fill="white"/>
+</clipPath>
+<clipPath id="clip1_6_9135">
+<rect width="73" height="41" fill="white" transform="matrix(0 -1 1 0 3 75)"/>
+</clipPath>
+</defs>
+</svg>

package/lib/components/selfie/src/enhanced-smartselfie-capture/assets/device.svg

@@ -0,0 +1,12 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_6_10552)">
+<path d="M13.1334 3.01682C14.246 2.88289 15.487 3.60614 15.9063 4.6341L21.8612 19.2264C22.1385 19.9095 21.9864 20.5524 21.5265 20.9509L21.3168 21.3024C21.0632 21.7478 20.5898 22.0525 19.9777 22.1261L12.9306 22.9833C11.7436 23.1273 10.4282 22.3605 9.97846 21.2623L4.15205 6.98133C3.92548 6.4255 3.9593 5.87636 4.2163 5.44441L4.73029 4.58053L4.75396 4.59392C4.98391 4.22225 5.39646 3.95772 5.94427 3.89076L13.1334 3.01682Z" fill="#2D2B2A"/>
+<path d="M6.4552 4.15515L13.3941 3.31135C14.3207 3.19751 15.3554 3.80357 15.7071 4.66076L21.564 19.0154C21.9123 19.8725 21.4456 20.6594 20.5191 20.7733L13.5801 21.6171C12.6536 21.7309 11.6188 21.1248 11.2671 20.2677L5.4103 5.90971C5.062 5.05252 5.52865 4.26565 6.4552 4.1518V4.15515Z" fill="#F9F0E7"/>
+<path d="M10.5198 4.19878C10.7971 4.1519 11.1116 4.31598 11.2266 4.57046C11.3415 4.82493 11.2097 5.06937 10.9324 5.11624C10.6551 5.16312 10.3406 4.99905 10.2256 4.74457C10.1107 4.49009 10.2425 4.24566 10.5198 4.19878Z" fill="#2D2B2A"/>
+</g>
+<defs>
+<clipPath id="clip0_6_10552">
+<rect width="18" height="20" fill="white" transform="translate(4 3)"/>
+</clipPath>
+</defs>
+</svg>

package/lib/components/selfie/src/enhanced-smartselfie-capture/assets/good.svg

@@ -0,0 +1,52 @@
+<svg width="47" height="79" viewBox="0 0 47 79" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_dd_6_8979)">
+<g clip-path="url(#clip0_6_8979)">
+<path d="M7 75C4.79086 75 3 73.2091 3 71L3 6C3 3.79086 4.79086 2 7 2H40C42.2091 2 44 3.79086 44 6V71C44 73.2091 42.2091 75 40 75H7Z" fill="white" fill-opacity="0.01" shape-rendering="crispEdges"/>
+<g clip-path="url(#clip1_6_8979)">
+<rect width="73" height="41" transform="matrix(0 -1 1 0 3 75)" fill="white"/>
+<rect x="11" y="63" width="25" height="6" rx="3" fill="#151F72"/>
+</g>
+<path d="M13.1627 34.2082C11.7528 33.7797 9.7785 34.5992 10.0317 37.3067C10.2437 39.5746 11.2385 41.636 13.674 41.0316C14.8844 40.7312 14.5892 39.4034 14.4749 37.6975C14.3606 35.9916 14.5726 34.6366 13.1627 34.2082Z" fill="#2D2A29"/>
+<path d="M13.1627 34.2082C11.7528 33.7797 9.7785 34.5992 10.0317 37.3067C10.2437 39.5746 11.2385 41.636 13.674 41.0316" fill="white"/>
+<path d="M13.1627 34.2082C11.7528 33.7797 9.7785 34.5992 10.0317 37.3067C10.2437 39.5746 11.2385 41.636 13.674 41.0316" stroke="#1F1C1C" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M34.0715 34.1352C35.4783 33.6969 37.4583 34.5025 37.224 37.2118C37.0278 39.481 36.0474 41.5494 33.6078 40.962C32.3953 40.6701 32.6813 39.3402 32.7836 37.6335C32.886 35.9269 32.6646 34.5734 34.0715 34.1352Z" fill="#2D2A29"/>
+<path d="M34.0715 34.1352C35.4783 33.6969 37.4583 34.5025 37.224 37.2118C37.0278 39.481 36.0474 41.5494 33.6078 40.962" fill="white"/>
+<path d="M34.0715 34.1352C35.4783 33.6969 37.4583 34.5025 37.224 37.2118C37.0278 39.481 36.0474 41.5494 33.6078 40.962" stroke="#1F1C1C" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M23.4663 21.0379C11.0066 21.0268 12.8912 33.0461 13.0652 36.3497C13.2392 39.6534 14.8428 50.5533 23.2995 50.8312C32.2383 51.125 33.9327 39.9604 34.1366 36.2762C34.3404 32.592 35.8168 21.0489 23.4663 21.0379Z" fill="white"/>
+<path d="M23.4663 21.0379C11.0066 21.0268 12.8912 33.0461 13.0652 36.3497C13.2392 39.6534 14.8428 50.5533 23.2995 50.8312C32.2383 51.125 33.9327 39.9604 34.1366 36.2762C34.3404 32.592 35.8168 21.0489 23.4663 21.0379Z" stroke="#1F1C1C" stroke-width="0.5"/>
+<path d="M18.9219 34.4335C19.4824 34.4316 19.9396 35.0307 19.9422 35.7706C19.9448 36.5105 19.4918 37.1129 18.9313 37.1148C18.3707 37.1168 17.9135 36.5176 17.9109 35.7777C17.9083 35.0378 18.3614 34.4355 18.9219 34.4335Z" fill="#1F1C1C"/>
+<path d="M28.4014 34.4002C28.9619 34.3982 29.4191 34.9974 29.4217 35.7373C29.4243 36.4772 28.9713 37.0796 28.4108 37.0815C27.8502 37.0835 27.393 36.4843 27.3904 35.7444C27.3878 35.0045 27.8409 34.4022 28.4014 34.4002Z" fill="#1F1C1C"/>
+<path d="M17.1864 33.6408C17.7256 32.8805 19.2007 32.618 19.824 32.7241" stroke="#1F1C1C" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M30.0238 33.5958C29.4792 32.8393 28.0023 32.5871 27.3798 32.6976" stroke="#1F1C1C" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M24.2757 35.6876C24.2757 35.6876 24.3958 39.0457 24.208 39.5609C24.0202 40.0762 23.2895 40.2412 23.1541 40.2417" stroke="#1F1C1C" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M22.6777 44.9406C23.0693 45.0812 24.1131 45.0812 24.5348 44.9406" stroke="#1F1C1C" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M20.8545 43.285C20.8545 43.285 21.432 43.5445 23.511 43.5352C25.7796 43.5252 26.5584 43.292 26.5584 43.292C26.5584 43.292 25.3932 43.4648 23.511 43.4751C21.8646 43.4838 20.8545 43.285 20.8545 43.285Z" fill="white"/>
+<path d="M20.8545 43.285C20.8545 43.285 21.432 43.5445 23.511 43.5352C25.7796 43.5252 26.5584 43.292 26.5584 43.292C26.5584 43.292 25.3932 43.4648 23.511 43.4751C21.8646 43.4838 20.8545 43.285 20.8545 43.285Z" stroke="#1F1C1C" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+<path d="M3.5 71L3.5 6C3.5 4.06701 5.067 2.5 7 2.5H40C41.933 2.5 43.5 4.06701 43.5 6V71C43.5 72.933 41.933 74.5 40 74.5H7C5.067 74.5 3.5 72.933 3.5 71Z" stroke="#E2E8F0" shape-rendering="crispEdges"/>
+</g>
+<defs>
+<filter id="filter0_dd_6_8979" x="0" y="0" width="47" height="79" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="1"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.06 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_6_8979"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="1.5"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
+<feBlend mode="normal" in2="effect1_dropShadow_6_8979" result="effect2_dropShadow_6_8979"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_6_8979" result="shape"/>
+</filter>
+<clipPath id="clip0_6_8979">
+<path d="M7 75C4.79086 75 3 73.2091 3 71L3 6C3 3.79086 4.79086 2 7 2H40C42.2091 2 44 3.79086 44 6V71C44 73.2091 42.2091 75 40 75H7Z" fill="white"/>
+</clipPath>
+<clipPath id="clip1_6_8979">
+<rect width="73" height="41" fill="white" transform="matrix(0 -1 1 0 3 75)"/>
+</clipPath>
+</defs>
+</svg>

package/lib/components/selfie/src/enhanced-smartselfie-capture/assets/id-card.svg

@@ -0,0 +1,9 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M23.4618 17.2262C23.3143 17.5288 23.0317 17.7644 22.6519 17.8591L9.40388 21.1622C8.65906 21.3479 7.82217 20.9215 7.5346 20.2098L4.72841 13.2642C4.5875 12.9155 4.60465 12.5629 4.74641 12.2722L4.11541 13.5106C3.97365 13.8013 3.95651 14.1539 4.09741 14.5026L6.9036 21.4482C7.19117 22.16 8.02806 22.5864 8.77288 22.4007L22.0209 19.0976C22.4007 19.0029 22.6833 18.7672 22.8308 18.4646L23.4618 17.2262Z" fill="#2D2B2A"/>
+<rect width="16.4333" height="10.2708" rx="2" transform="matrix(0.970296 -0.241922 0.374607 0.927184 4.20703 11.9756)" fill="#F9F0E7"/>
+<rect width="6.41953" height="0.855937" rx="0.427968" transform="matrix(0.970296 -0.241922 0.374607 0.927184 14.332 12.5962)" fill="#21232C"/>
+<rect width="4.81464" height="0.855937" rx="0.427968" transform="matrix(0.970296 -0.241922 0.374607 0.927184 15.1343 14.58)" fill="#21232C"/>
+<rect width="3.20976" height="0.855937" rx="0.427968" transform="matrix(0.970296 -0.241922 0.374607 0.927184 15.9355 16.5642)" fill="#21232C"/>
+<path opacity="0.4" d="M8.78244 12.9326C9.84186 12.6685 11.0321 13.2748 11.441 14.287C11.85 15.2991 11.3227 16.3337 10.2633 16.5978C9.20385 16.862 8.01361 16.2556 7.60467 15.2435C7.19574 14.2313 7.72302 13.1968 8.78244 12.9326Z" fill="#5E646E"/>
+<path d="M8.7181 19.2375L13.4634 18.0543C13.6139 18.0168 13.7525 17.9596 13.8758 17.8874C13.1496 16.6203 11.5582 15.903 10.1273 16.2597C8.69646 16.6165 7.92295 17.9234 8.25984 19.2877C8.4136 19.2908 8.56761 19.275 8.7193 19.2372" fill="#2D2B2A"/>
+</svg>