@smileid/web-components 11.4.5 → 11.6.0

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

@@ -0,0 +1,3 @@
+<svg width="245" height="328" viewBox="0 0 245 328" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M122.5 1C156.164 1 186.562 19.3464 208.509 48.8516C230.456 78.3568 244 119.071 244 164C244 208.929 230.456 249.643 208.509 279.148C186.562 308.654 156.164 327 122.5 327C88.836 327 58.438 308.654 36.4912 279.148C14.5444 249.643 1 208.929 1 164C1 119.071 14.5444 78.3568 36.4912 48.8516C58.438 19.3464 88.836 1 122.5 1Z" stroke="#C4C4C4" stroke-width="2"/>
+</svg>

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

@@ -0,0 +1,69 @@
+<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_9295)">
+<g clip-path="url(#clip0_6_9295)">
+<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_9295)">
+<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="#848282"/>
+<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"/>
+<path d="M26.1612 35.0191C25.5397 34.8303 24.6695 35.1915 24.7811 36.3849C24.8745 37.3846 25.313 38.2932 26.3866 38.0268C26.9201 37.8944 26.79 37.3091 26.7396 36.5572C26.6892 35.8052 26.7826 35.208 26.1612 35.0191Z" fill="#2D2A29"/>
+<path d="M26.1612 35.0191C25.5397 34.8303 24.6695 35.1915 24.7811 36.3849C24.8745 37.3846 25.313 38.2932 26.3866 38.0268" fill="white"/>
+<path d="M26.1612 35.0191C25.5397 34.8303 24.6695 35.1915 24.7811 36.3849C24.8745 37.3846 25.313 38.2932 26.3866 38.0268" stroke="#1F1C1C" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M35.3777 34.987C35.9979 34.7938 36.8706 35.1489 36.7673 36.3431C36.6809 37.3434 36.2487 38.2551 35.1734 37.9962C34.6389 37.8675 34.765 37.2813 34.8101 36.529C34.8552 35.7768 34.7576 35.1802 35.3777 34.987Z" fill="#2D2A29"/>
+<path d="M35.3777 34.987C35.9979 34.7938 36.8706 35.1489 36.7673 36.3431C36.6809 37.3434 36.2487 38.2551 35.1734 37.9962" fill="white"/>
+<path d="M35.3777 34.987C35.9979 34.7938 36.8706 35.1489 36.7673 36.3431C36.6809 37.3434 36.2487 38.2551 35.1734 37.9962" stroke="#1F1C1C" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M30.7029 29.2139C25.2108 29.209 26.0415 34.507 26.1182 35.9632C26.1949 37.4194 26.9017 42.2239 30.6294 42.3465C34.5695 42.476 35.3164 37.5547 35.4062 35.9308C35.4961 34.3068 36.1469 29.2187 30.7029 29.2139Z" fill="white"/>
+<path d="M30.7029 29.2139C25.2108 29.209 26.0415 34.507 26.1182 35.9632C26.1949 37.4194 26.9017 42.2239 30.6294 42.3465C34.5695 42.476 35.3164 37.5547 35.4062 35.9308C35.4961 34.3068 36.1469 29.2187 30.7029 29.2139Z" stroke="#1F1C1C" stroke-width="0.5"/>
+<path d="M28.7001 35.1184C28.9472 35.1176 29.1487 35.3817 29.1499 35.7078C29.151 36.034 28.9513 36.2995 28.7043 36.3003C28.4572 36.3012 28.2556 36.0371 28.2545 35.7109C28.2534 35.3848 28.4531 35.1193 28.7001 35.1184Z" fill="#1F1C1C"/>
+<path d="M32.8784 35.1038C33.1254 35.103 33.327 35.3671 33.3281 35.6932C33.3292 36.0194 33.1296 36.2849 32.8825 36.2857C32.6354 36.2866 32.4339 36.0225 32.4327 35.6964C32.4316 35.3702 32.6313 35.1047 32.8784 35.1038Z" fill="#1F1C1C"/>
+<path d="M27.9345 34.769C28.1722 34.4339 28.8224 34.3181 29.0972 34.3649" stroke="#1F1C1C" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M33.5932 34.7492C33.3532 34.4158 32.7022 34.3046 32.4278 34.3533" stroke="#1F1C1C" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M31.0595 35.6713C31.0595 35.6713 31.1124 37.1515 31.0297 37.3786C30.9469 37.6057 30.6248 37.6785 30.5651 37.6787" stroke="#1F1C1C" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M30.3555 39.7499C30.528 39.8119 30.9882 39.8119 31.1741 39.7499" stroke="#1F1C1C" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M29.5518 39.0201C29.5518 39.0201 29.8063 39.1345 30.7227 39.1304C31.7227 39.126 32.066 39.0233 32.066 39.0233C32.066 39.0233 31.5524 39.0994 30.7227 39.104C29.997 39.1078 29.5518 39.0201 29.5518 39.0201Z" fill="white"/>
+<path d="M29.5518 39.0201C29.5518 39.0201 29.8063 39.1345 30.7227 39.1304C31.7227 39.126 32.066 39.0233 32.066 39.0233C32.066 39.0233 31.5524 39.0994 30.7227 39.104C29.997 39.1078 29.5518 39.0201 29.5518 39.0201Z" stroke="#1F1C1C" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M13.2099 37.2291C12.2247 36.9297 10.8452 37.5023 11.0222 39.3941C11.1703 40.9788 11.8654 42.4192 13.5672 41.9969C14.4129 41.787 14.2067 40.8592 14.1268 39.6672C14.0469 38.4752 14.195 37.5284 13.2099 37.2291Z" fill="#2D2A29"/>
+<path d="M13.2099 37.2291C12.2247 36.9297 10.8452 37.5023 11.0222 39.3941C11.1703 40.9788 11.8654 42.4192 13.5672 41.9969" fill="white"/>
+<path d="M13.2099 37.2291C12.2247 36.9297 10.8452 37.5023 11.0222 39.3941C11.1703 40.9788 11.8654 42.4192 13.5672 41.9969" stroke="#1F1C1C" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M27.8199 37.1781C28.803 36.8719 30.1865 37.4348 30.0227 39.3278C29.8857 40.9135 29.2006 42.3587 27.496 41.9483C26.6488 41.7443 26.8485 40.8151 26.9201 39.6225C26.9916 38.43 26.8369 37.4843 27.8199 37.1781Z" fill="#2D2A29"/>
+<path d="M27.8199 37.1781C28.803 36.8719 30.1865 37.4348 30.0227 39.3278C29.8857 40.9135 29.2006 42.3587 27.496 41.9483" fill="white"/>
+<path d="M27.8199 37.1781C28.803 36.8719 30.1865 37.4348 30.0227 39.3278C29.8857 40.9135 29.2006 42.3587 27.496 41.9483" stroke="#1F1C1C" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M20.4093 28.0265C11.7033 28.0187 13.0201 36.4171 13.1417 38.7255C13.2633 41.0339 14.3837 48.65 20.2927 48.8442C26.5387 49.0495 27.7226 41.2484 27.865 38.6741C28.0075 36.0998 29.0391 28.0342 20.4093 28.0265Z" fill="white"/>
+<path d="M20.4093 28.0265C11.7033 28.0187 13.0201 36.4171 13.1417 38.7255C13.2633 41.0339 14.3837 48.65 20.2927 48.8442C26.5387 49.0495 27.7226 41.2484 27.865 38.6741C28.0075 36.0998 29.0391 28.0342 20.4093 28.0265Z" stroke="#1F1C1C" stroke-width="0.5"/>
+<path d="M17.2341 37.3864C17.6258 37.3851 17.9452 37.8037 17.947 38.3207C17.9488 38.8377 17.6323 39.2586 17.2406 39.26C16.849 39.2613 16.5295 38.8427 16.5277 38.3257C16.5259 37.8087 16.8424 37.3878 17.2341 37.3864Z" fill="#1F1C1C"/>
+<path d="M23.8576 37.3633C24.2493 37.3619 24.5688 37.7806 24.5706 38.2976C24.5724 38.8146 24.2558 39.2355 23.8642 39.2368C23.4725 39.2382 23.153 38.8196 23.1512 38.3026C23.1494 37.7855 23.466 37.3647 23.8576 37.3633Z" fill="#1F1C1C"/>
+<path d="M16.0213 36.8325C16.3981 36.3013 17.4288 36.1178 17.8643 36.192" stroke="#1F1C1C" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M24.9915 36.8012C24.611 36.2726 23.5791 36.0964 23.1441 36.1736" stroke="#1F1C1C" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M20.975 38.2628C20.975 38.2628 21.0589 40.6092 20.9277 40.9692C20.7965 41.3292 20.2859 41.4446 20.1913 41.4449" stroke="#1F1C1C" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M19.8584 44.7282C20.132 44.8265 20.8614 44.8265 21.156 44.7282" stroke="#1F1C1C" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18.5845 43.5715C18.5845 43.5715 18.988 43.7528 20.4407 43.7463C22.0258 43.7393 22.57 43.5764 22.57 43.5764C22.57 43.5764 21.7558 43.6972 20.4407 43.7043C19.2903 43.7104 18.5845 43.5715 18.5845 43.5715Z" fill="white"/>
+<path d="M18.5845 43.5715C18.5845 43.5715 18.988 43.7528 20.4407 43.7463C22.0258 43.7393 22.57 43.5764 22.57 43.5764C22.57 43.5764 21.7558 43.6972 20.4407 43.7043C19.2903 43.7104 18.5845 43.5715 18.5845 43.5715Z" stroke="#1F1C1C" stroke-width="0.5" stroke-linecap="round" stroke-linejoin="round"/>
+</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_9295" 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_9295"/>
+<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_9295" result="effect2_dropShadow_6_9295"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_6_9295" result="shape"/>
+</filter>
+<clipPath id="clip0_6_9295">
+<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_9295">
+<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/person.svg

@@ -0,0 +1,6 @@
+<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="M17.5259 12.481C15.9716 11.7663 13.9456 11.7261 11.82 12.5305C7.95534 13.9929 5.10325 17.7391 5.02148 21.2369L6.00759 21.685C6.08937 18.1872 8.94146 14.441 12.8062 12.9785C14.9317 12.1742 16.9577 12.2144 18.512 12.9291L17.5259 12.481Z" fill="#5E646E"/>
+<path d="M7.10258 21.3367L19.9414 16.368C20.3486 16.2104 20.7391 16.0061 21.1011 15.7685C20.1269 12.7384 16.5834 11.4886 12.7121 12.9869C8.8407 14.4851 5.98575 18.2111 5.90651 21.6489C6.29418 21.5964 6.69541 21.4943 7.10581 21.3355" fill="#2D2B2A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.1918 10.6578C9.35637 10.2783 8.77166 9.53851 8.63569 8.52842C8.36375 6.50823 9.98974 4.17197 12.2676 3.31002C13.4065 2.87904 14.4927 2.89827 15.3281 3.27776L16.8982 3.99116C16.0627 3.61167 14.9765 3.59244 13.8376 4.02342C11.5598 4.88537 9.93376 7.22163 10.2057 9.24182C10.3417 10.2519 10.9264 10.9917 11.7618 11.3712L10.1918 10.6578Z" fill="#2D2B2A"/>
+<path d="M13.5061 3.72185C15.9636 2.77078 18.197 3.74443 18.4949 5.89664C18.7927 8.04884 17.0421 10.5644 14.5846 11.5154C12.1271 12.4665 9.89368 11.4928 9.59587 9.34063C9.29805 7.18842 11.0487 4.67292 13.5061 3.72185Z" fill="#F9F0E7"/>
+</svg>

package/lib/components/selfie/src/enhanced-smartselfie-capture/assets/phone.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.076L9.82031 11.583L10.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.1575C10.9696 14.0608 12.3778 16.3257 13.7094 17.5344C13.9837 17.7837 14.2892 17.8556 14.5129 17.6934L13.8151 18.2004C13.5914 18.3625 13.2859 18.2907 13.0116 18.0414C11.68 16.8327 10.2718 14.5678 9.66527 12.6645C9.52489 12.2239 9.56924 11.7927 9.82025 11.5829L10.5181 11.0759Z" fill="#2D2B2A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.5127 17.6931C14.5404 17.6731 14.5668 17.6494 14.5917 17.6222L15.408 16.732C15.4331 16.7047 15.4598 16.6807 15.4878 16.6602L14.79 17.1672C14.762 17.1877 14.7353 17.2116 14.7102 17.239L13.8939 18.1291C13.869 18.1564 13.8426 18.18 13.8149 18.2001L14.5127 17.6931Z" fill="#2D2B2A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.4878 16.6604C15.6931 16.51 15.9684 16.5435 16.223 16.7578L18.6869 18.836C19.0169 19.1147 19.2004 19.6137 19.1281 20.0374L18.6364 22.9129C18.6015 23.117 18.5171 23.2708 18.3935 23.3618L17.6957 23.8688C17.8193 23.7778 17.9037 23.624 17.9386 23.4199L18.4303 20.5444C18.5026 20.1207 18.3191 19.6216 17.9891 19.343L15.5252 17.2648C15.2706 17.0505 14.9953 17.017 14.79 17.1674L15.4878 16.6604Z" fill="#2D2B2A"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.3943 23.3616C18.3307 23.4086 18.2566 23.4388 18.1735 23.4508C18.1328 23.4562 18.0902 23.4588 18.0447 23.458C12.7802 23.3492 5.59157 11.7986 6.8411 5.45554C6.85204 5.40145 6.8648 5.35028 6.87938 5.30282C6.92584 5.15547 7.0004 5.04379 7.09708 4.97263L6.39928 5.47961C6.3026 5.55077 6.22804 5.66245 6.18158 5.80981C6.167 5.85726 6.15423 5.90843 6.14329 5.96253C4.89377 12.3056 12.0824 23.8562 17.3469 23.965C17.3924 23.9657 17.435 23.9632 17.4757 23.9577C17.5588 23.9458 17.6329 23.9155 17.6965 23.8686L18.3943 23.3616Z" 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/poor-lighting.svg

@@ -0,0 +1,53 @@
+<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_9517)">
+<g clip-path="url(#clip0_6_9517)">
+<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_9517)">
+<rect width="73" height="41" transform="matrix(0 -1 1 0 3 75)" 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.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"/>
+<path d="M23.9049 13C32.6828 13 39.8098 22.693 39.8098 34.6314C39.8098 46.5697 32.6828 56.2627 23.9049 56.2627C15.127 56.2627 8 46.5697 8 34.6314C8 22.693 15.127 13 23.9049 13Z" fill="#0D0D0D" fill-opacity="0.7" stroke="#EF4343" stroke-width="0.5"/>
+</g>
+<rect x="11" y="63" width="25" height="6" rx="3" fill="#848282"/>
+</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_9517" 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_9517"/>
+<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_9517" result="effect2_dropShadow_6_9517"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect2_dropShadow_6_9517" result="shape"/>
+</filter>
+<clipPath id="clip0_6_9517">
+<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_9517">
+<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/components/ActiveLivenessOverlay.tsx

@@ -0,0 +1,226 @@
+import { useEffect, useRef, useState } from 'preact/hooks';
+import type { FunctionComponent } from 'preact';
+// dotLottie-web renders .lottie packages onto a <canvas>. The animation
+// payloads are base64-inlined at build time (see vite.config.ts) so the
+// distributable bundle remains a single file and no sibling asset hosting
+// is required of consumers.
+import { DotLottie } from '@lottiefiles/dotlottie-web';
+import type { HeadPoseDirection } from '../utils/faceDetection';
+import activeLivenessSrc from '../assets/active_liveness_animation.lottie';
+import tooDarkSrc from '../assets/too_dark_animation.lottie';
+import deviceOrientationSrc from '../assets/device_orientation.lottie';
+
+interface ActiveLivenessOverlayProps {
+  /** Currently required pose (drives which segment plays). */
+  pose: HeadPoseDirection | null;
+  /**
+   * The user's currently classified head pose. When this matches the
+   * required `pose`, the overlay tints green to confirm the turn was
+   * successful. The animation itself keeps playing as normal.
+   */
+  currentPose?: HeadPoseDirection | null;
+  /** When true, swap to the "too dark" animation to prompt better lighting. */
+  isTooDark?: boolean;
+  /**
+   * When true, swap to the "rotate device" animation. Takes precedence over
+   * `isTooDark` and `pose` because the user can't make progress on any other
+   * check until they rotate the device back to portrait.
+   */
+  isLandscape?: boolean;
+}
+
+/**
+ * Per-pose frame ranges split by match state. The bundled .lottie was
+ * authored with two sibling layers for each direction — `arrow N` (gray)
+ * and `arrow - green N` — staggered so the green takes over later in the
+ * segment. We exploit that by scrubbing to the gray-only sub-range while
+ * the user is still being prompted (`pending`) and jumping to the
+ * green-only sub-range the moment the user's head pose matches the
+ * required direction (`matched`). This keeps the head/circle base art in
+ * its native colours and avoids tinting the whole canvas via CSS filters.
+ *
+ * Source ranges (layer ip/op from the lottie JSON):
+ *   left  – gray  1-112 | green  42-106
+ *   right – gray 139-183 | green 180-241
+ *   up    – gray 277-321 | green 318-380
+ *
+ * The user-facing selfie preview is mirrored, so the on-screen arrows
+ * automatically appear flipped relative to the prompt label — no extra
+ * direction mapping needed here.
+ */
+const POSE_FRAME_RANGES: Record<
+  HeadPoseDirection,
+  { pending: [number, number]; matched: [number, number] }
+> = {
+  left: { pending: [1, 41], matched: [42, 106] },
+  right: { pending: [139, 179], matched: [180, 241] },
+  up: { pending: [277, 317], matched: [318, 380] },
+};
+
+/**
+ * Translucent face overlay shown during Enhanced SmartSelfie capture.
+ *
+ * - Anchored to the centre of the camera oval.
+ * - 75% opacity so the user's actual face remains visible underneath.
+ * - Plays the segment matching the currently-required head pose; segments
+ *   loop until the pose changes.
+ */
+export const ActiveLivenessOverlay: FunctionComponent<
+  ActiveLivenessOverlayProps
+> = ({ pose, currentPose = null, isTooDark = false, isLandscape = false }) => {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const animRef = useRef<DotLottie | null>(null);
+  // Track which .lottie source is currently loaded so we only rebuild the
+  // player when actually switching between the pose and too-dark variants.
+  const loadedVariantRef = useRef<'pose' | 'too-dark' | 'orientation' | null>(
+    null,
+  );
+  // Lottie pose arrows were authored at a snappy pace; played at native
+  // speed they feel hectic and the segment cuts on pose change read as
+  // hard jumps. A small slowdown calms both.
+  const PLAYBACK_SPEED = 0.6;
+  // Brief fade applied to the canvas around a segment swap so the playhead
+  // jump (setSegment is instantaneous) reads as a crossfade rather than a
+  // hard cut. Matched should keep the user's attention, so the fade is
+  // short.
+  const SEGMENT_FADE_MS = 180;
+  const [fading, setFading] = useState(false);
+  // Tracks the segment inputs we last applied so we can skip the fade on
+  // the initial mount (the player is already showing the right segment)
+  // and on no-op re-renders where neither pose nor matched changed.
+  const lastAppliedRef = useRef<{
+    pose: HeadPoseDirection | null;
+    matched: boolean;
+  } | null>(null);
+
+  // Green tint applies only when the user's live head pose matches the
+  // required prompt — reserved for an actual successful turn, not for the
+  // canned guidance loop.
+  const matched = !!pose && !!currentPose && pose === currentPose;
+
+  useEffect(() => {
+    if (!canvasRef.current) return undefined;
+
+    const variant: 'pose' | 'too-dark' | 'orientation' = (() => {
+      if (isLandscape) return 'orientation';
+      if (isTooDark) return 'too-dark';
+      return 'pose';
+    })();
+    if (loadedVariantRef.current === variant && animRef.current) {
+      return undefined;
+    }
+
+    if (animRef.current) {
+      animRef.current.destroy();
+      animRef.current = null;
+    }
+
+    // Initial segment for the freshly-built player. `pose` uses the prompt
+    // range (gray sub-range, since a fresh build can't yet be `matched`);
+    // `too-dark` and `orientation` play their full timeline as a single
+    // looping animation.
+    const initialSegment = (() => {
+      if (variant === 'pose' && pose) return POSE_FRAME_RANGES[pose].pending;
+      return undefined;
+    })();
+    const src = (() => {
+      if (variant === 'orientation') return deviceOrientationSrc;
+      if (variant === 'too-dark') return tooDarkSrc;
+      return activeLivenessSrc;
+    })();
+    const anim = new DotLottie({
+      canvas: canvasRef.current,
+      src,
+      loop: true,
+      autoplay: true,
+      speed: PLAYBACK_SPEED,
+      ...(initialSegment ? { segment: initialSegment } : {}),
+      renderConfig: { autoResize: true },
+    });
+    animRef.current = anim;
+    loadedVariantRef.current = variant;
+    // Player just rebuilt with its initial segment — clear the applied
+    // record so the segment-change effect treats the next dep evaluation
+    // as the first one and doesn't trigger a redundant fade.
+    lastAppliedRef.current = null;
+
+    return () => {
+      anim.destroy();
+      animRef.current = null;
+      loadedVariantRef.current = null;
+    };
+  }, [isTooDark, isLandscape]);
+
+  useEffect(() => {
+    const anim = animRef.current;
+    if (!anim || isTooDark || isLandscape) return undefined;
+
+    const prev = lastAppliedRef.current;
+    const isFirst = prev === null;
+    const unchanged =
+      !isFirst && prev.pose === pose && prev.matched === matched;
+    if (unchanged) return undefined;
+
+    // First time we see this player: it was built with the right initial
+    // segment already, so just record state and don't trigger a fade.
+    if (isFirst) {
+      lastAppliedRef.current = { pose, matched };
+      return undefined;
+    }
+
+    // Real transition — fade out, swap segment at the bottom of the
+    // fade, then fade back in. This hides the playhead jump that
+    // setSegment causes.
+    setFading(true);
+    const t = window.setTimeout(() => {
+      if (pose) {
+        const ranges = POSE_FRAME_RANGES[pose];
+        const [start, end] = matched ? ranges.matched : ranges.pending;
+        anim.setSegment(start, end);
+        anim.play();
+      } else {
+        anim.resetSegment();
+        anim.play();
+      }
+      lastAppliedRef.current = { pose, matched };
+      setFading(false);
+    }, SEGMENT_FADE_MS);
+    return () => window.clearTimeout(t);
+  }, [pose, matched, isTooDark, isLandscape]);
+
+  return (
+    <>
+      <canvas
+        ref={canvasRef}
+        className={`active-liveness-overlay${fading ? ' is-fading' : ''}`}
+        aria-hidden="true"
+      />
+      <style>{`
+        .active-liveness-overlay {
+          position: absolute;
+          top: 50%;
+          left: 50%;
+          transform: translate(-50%, -50%);
+          width: 90%;
+          aspect-ratio: 1;
+          pointer-events: none;
+          opacity: 0.75;
+          z-index: 2;
+          /* Canvas elements default to inline; force block so width/height
+             driven by CSS apply cleanly. */
+          display: block;
+          transition: opacity ${SEGMENT_FADE_MS}ms ease;
+          /* No colour filters: the lottie asset already paints arrows in
+             their correct colours (gray during the pending sub-range,
+             green during the matched sub-range). The face/circle base art
+             keeps its native palette. */
+        }
+        .active-liveness-overlay.is-fading {
+          opacity: 0;
+        }
+      `}</style>
+    </>
+  );
+};
+
+export default ActiveLivenessOverlay;

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

@@ -0,0 +1,38 @@
+import type { FunctionComponent } from 'preact';
+
+interface AlertDisplayProps {
+  alertTitle: string;
+  themeColor?: string;
+}
+
+export const AlertDisplay: FunctionComponent<AlertDisplayProps> = ({
+  alertTitle,
+  themeColor = '#151F72',
+}) =>
+  alertTitle ? (
+    <>
+      <div className="alert-message">
+        <div className="alert-title" style={{ color: themeColor }}>
+          {alertTitle}
+        </div>
+      </div>
+
+      <style>{`
+        .alert-message {
+          margin-top: clamp(12px, 2.5dvh, 24px);
+          padding: 0 16px;
+          text-align: center;
+          width: 100%;
+        }
+
+        .alert-title {
+          font-family: "DM Sans", system-ui, sans-serif;
+          font-size: 14px;
+          font-style: normal;
+          font-weight: 700;
+          line-height: 20px;
+          text-align: center;
+        }
+      `}</style>
+    </>
+  ) : null;

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

@@ -0,0 +1,45 @@
+import type { FunctionComponent } from 'preact';
+import { useEffect, useRef } from 'preact/hooks';
+
+interface BackNavigationProps {
+  onBack: () => void;
+  themeColor?: string;
+}
+
+/**
+ * Thin Preact wrapper around <smileid-navigation hide-close> that bridges
+ * the element's custom `navigation.back` event to a Preact callback prop.
+ * Kept in ESS so callers don't have to think about the underlying element.
+ */
+export const BackNavigation: FunctionComponent<BackNavigationProps> = ({
+  onBack,
+  themeColor,
+}) => {
+  const ref = useRef<HTMLElement | null>(null);
+
+  useEffect(() => {
+    const el = ref.current;
+    if (!el) return undefined;
+    const handler = () => onBack();
+    el.addEventListener('navigation.back', handler);
+    return () => el.removeEventListener('navigation.back', handler);
+  }, [onBack]);
+
+  return (
+    // @ts-expect-error custom element
+    <smileid-navigation
+      ref={ref}
+      hide-close=""
+      theme-color={themeColor || undefined}
+      class="ess-back-navigation"
+      style={{
+        // Match the ESS design: solid dark circle with a white arrow,
+        // overriding Navigation's default translucent grey pill.
+        '--smileid-navigation-button-bg': '#1f1f1f',
+        '--smileid-navigation-icon-color': '#FFFFFF',
+      }}
+    />
+  );
+};
+
+export default BackNavigation;

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

@@ -0,0 +1,96 @@
+import type { ComponentChildren, FunctionComponent, Ref } from 'preact';
+import OvalProgress from '../OvalProgress';
+
+interface CameraPreviewProps {
+  videoRef: Ref<HTMLVideoElement>;
+  canvasRef: Ref<HTMLCanvasElement>;
+  facingMode: 'user' | 'environment';
+  themeColor: string;
+  /** Optional overlay rendered inside the video container (e.g. active-liveness face animation). */
+  overlay?: ComponentChildren;
+  /** Optional override for the oval border colour (used to signal error states). */
+  borderColor?: string;
+  /** Highlight the offending side of the oval when a quality check fails. */
+  errorSide?: 'top' | 'right' | 'bottom' | 'left' | 'all' | null;
+}
+
+export const CameraPreview: FunctionComponent<CameraPreviewProps> = ({
+  videoRef,
+  canvasRef,
+  facingMode,
+  overlay,
+  borderColor,
+  errorSide = null,
+}) => (
+  <>
+    <div className="camera-preview-container">
+      <div className="video-wrapper">
+        <div className="video-container">
+          <video
+            ref={videoRef}
+            autoPlay
+            playsInline
+            muted
+            className={`camera-video ${facingMode === 'user' ? 'mirror' : ''}`}
+          />
+          <canvas
+            ref={canvasRef}
+            className={`camera-canvas ${facingMode === 'user' ? 'mirror' : ''}`}
+          />
+          {overlay}
+        </div>
+      </div>
+      <OvalProgress borderColor={borderColor} errorSide={errorSide} />
+    </div>
+
+    <style>{`
+      .camera-preview-container {
+        position: relative;
+        width: auto;
+        height: clamp(220px, 42dvh, 418px);
+        aspect-ratio: 311 / 418;
+        max-width: 100%;
+        margin: 0 auto;
+        flex-shrink: 1;
+        min-height: 0;
+      }
+
+      .video-wrapper {
+        width: 100%;
+        height: 100%;
+        margin: 0 auto;
+        position: relative;
+        border: 2px solid #C4C4C4;
+        border-radius: 50%;
+        overflow: hidden;
+        background: #F5F7FA;
+        box-sizing: border-box;
+      }
+
+      .video-container {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+      }
+
+      .camera-video,
+      .camera-canvas {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+      }
+
+      .camera-video.mirror,
+      .camera-canvas.mirror {
+        transform: translate(-50%, -50%) scaleX(-1);
+      }
+
+      .camera-canvas {
+        pointer-events: none;
+      }
+    `}</style>
+  </>
+);