@authbridge/web-sdk 1.2.2

package/dist/decline.svg

@@ -0,0 +1,19 @@
+<svg width="215" height="215" viewBox="0 0 215 215" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_f_1132_8691)">
+<rect x="40" y="40" width="135" height="135" rx="67.5" fill="black" fill-opacity="0.5"/>
+</g>
+<rect x="70" y="69" width="75" height="76" rx="37.5" fill="url(#paint0_linear_1132_8691)"/>
+<path d="M99 115L115 99" stroke="white" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M99 99L115 115" stroke="white" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<defs>
+<filter id="filter0_f_1132_8691" x="0" y="0" width="215" height="215" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="20" result="effect1_foregroundBlur_1132_8691"/>
+</filter>
+<linearGradient id="paint0_linear_1132_8691" x1="107.5" y1="69" x2="107.5" y2="145" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FF3636"/>
+<stop offset="1" stop-color="#FF3636" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>

package/dist/dev.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=dev.d.ts.map

package/dist/dev.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"dev.d.ts","sourceRoot":"","sources":["../src/dev.ts"],"names":[],"mappings":""}

package/dist/document-photo-back-start.svg

@@ -0,0 +1,37 @@
+<svg width="375" height="240" viewBox="0 0 375 240" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="54.3759" y="60.9601" width="194" height="136.821" rx="16.3368" fill="var(--secondary-color)" fill-opacity="0.4"/>
+<rect x="54.3759" y="54.9601" width="194" height="136.821" rx="16.3368" fill="white"/>
+<rect x="55.3969" y="55.9811" width="191.958" height="134.779" rx="15.3158" fill="url(#paint0_linear_1247_9821)" stroke="var(--secondary-color)" stroke-width="2.04211"/>
+<path opacity="0.2" d="M161 86.5H186" stroke="var(--secondary-color)" stroke-width="8.5278" stroke-linecap="round" stroke-linejoin="round"/>
+<path opacity="0.2" d="M161 104.5H214" stroke="var(--secondary-color)" stroke-width="8.5278" stroke-linecap="round" stroke-linejoin="round"/>
+<path opacity="0.2" d="M160.565 121.869H191.197" stroke="var(--secondary-color)" stroke-width="8.5278" stroke-linecap="round" stroke-linejoin="round"/>
+<path opacity="0.2" d="M161 139.5H197" stroke="var(--secondary-color)" stroke-width="8.5278" stroke-linecap="round" stroke-linejoin="round"/>
+<path opacity="0.2" d="M87 86.5H122" stroke="var(--secondary-color)" stroke-width="8.5278" stroke-linecap="round" stroke-linejoin="round"/>
+<path opacity="0.2" d="M87 104.5H105" stroke="var(--secondary-color)" stroke-width="8.5278" stroke-linecap="round" stroke-linejoin="round"/>
+<path opacity="0.2" d="M87.0001 121.869H117.632" stroke="var(--secondary-color)" stroke-width="8.5278" stroke-linecap="round" stroke-linejoin="round"/>
+<path opacity="0.2" d="M88 139.5H103" stroke="var(--secondary-color)" stroke-width="8.5278" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M62 160.5L246 160.5L246 175.5C246 183.232 239.732 189.5 232 189.5L76 189.5C68.268 189.5 62 183.232 62 175.5L62 160.5Z" fill="var(--primary-color)" fill-opacity="0.4"/>
+<g filter="url(#filter0_b_1247_9821)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M375 0H0V240H375V0ZM185.895 229.151C246.335 229.151 295.332 180.154 295.332 119.713C295.332 59.2724 246.335 10.2755 185.895 10.2755C125.454 10.2755 76.4569 59.2724 76.4569 119.713C76.4569 180.154 125.454 229.151 185.895 229.151Z" fill="black" fill-opacity="0.52"/>
+</g>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M186 231.5C247.856 231.5 298 181.356 298 119.5C298 57.6441 247.856 7.5 186 7.5C124.144 7.5 74 57.6441 74 119.5C74 181.356 124.144 231.5 186 231.5ZM185.895 229.444C246.497 229.444 295.625 180.316 295.625 119.713C295.625 59.1104 246.497 9.98216 185.895 9.98216C125.292 9.98216 76.1636 59.1104 76.1636 119.713C76.1636 180.316 125.292 229.444 185.895 229.444Z" fill="white" fill-opacity="0.2"/>
+<path d="M254.5 151.5C267.553 151.5 279.728 149.747 290 146.718" stroke="url(#paint1_linear_1247_9821)" stroke-width="3"/>
+<circle cx="185.895" cy="119.713" r="108.508" stroke="white" stroke-width="1.86"/>
+<path d="M213.5 96.0913L230.303 100.292L225.539 83.6393L213.5 96.0913ZM254.5 91C272.695 91 289.094 94.4411 300.889 99.9392C312.806 105.494 319.5 112.869 319.5 120.5H322.5C322.5 111.01 314.308 102.885 302.156 97.2202C289.883 91.4985 273.032 88 254.5 88V91ZM226.796 93.8444C235.202 92.0211 244.589 91 254.5 91V88C244.388 88 234.786 89.0415 226.16 90.9126L226.796 93.8444ZM319.5 120.5C319.5 125.325 316.849 130.036 311.808 134.299C306.769 138.56 299.472 142.25 290.56 144.983L291.44 147.851C300.599 145.043 308.301 141.193 313.745 136.59C319.186 131.989 322.5 126.513 322.5 120.5H319.5Z" fill="white"/>
+<defs>
+<filter id="filter0_b_1247_9821" x="-14" y="-14" width="403" height="268" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feGaussianBlur in="BackgroundImageFix" stdDeviation="7"/>
+<feComposite in2="SourceAlpha" operator="in" result="effect1_backgroundBlur_1247_9821"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_backgroundBlur_1247_9821" result="shape"/>
+</filter>
+<linearGradient id="paint0_linear_1247_9821" x1="151.376" y1="54.9601" x2="151.376" y2="191.781" gradientUnits="userSpaceOnUse">
+<stop stop-color="var(--primary-color)"/>
+<stop offset="1" stop-color="var(--secondary-color)" stop-opacity="0.2"/>
+</linearGradient>
+<linearGradient id="paint1_linear_1247_9821" x1="255.5" y1="151.5" x2="289.5" y2="146.5" gradientUnits="userSpaceOnUse">
+<stop stop-color="white"/>
+<stop offset="1"/>
+</linearGradient>
+</defs>
+</svg>

package/dist/final.svg

@@ -0,0 +1,10 @@
+<svg width="135" height="135" viewBox="0 0 135 135" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="30" y="29" width="75" height="76" rx="37.5" fill="url(#paint0_linear_1132_8656)"/>
+<path d="M55 67.5L64.375 77L80 58" stroke="white" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+<defs>
+<linearGradient id="paint0_linear_1132_8656" x1="67.5" y1="29" x2="67.5" y2="105" gradientUnits="userSpaceOnUse">
+<stop stop-color="#36FFAB"/>
+<stop offset="1" stop-color="#00FF75" stop-opacity="0"/>
+</linearGradient>
+</defs>
+</svg>

package/dist/images/authbridge-icon.svg

@@ -0,0 +1,5 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <!-- Simplified AuthBridge "A" logo mark -->
+  <path d="M12 2L3 22H7L9 17H15L17 22H21L12 2Z" fill="currentColor"/>
+  <path d="M10 14L12 8L14 14H10Z" fill="white"/>
+</svg>

package/dist/images/back-white.svg

@@ -0,0 +1,3 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M18 6 L10 14 L18 22" stroke="white" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/images/back.svg

@@ -0,0 +1,3 @@
+<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M18 6 L10 14 L18 22" stroke="#1E293B" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/images/close.svg

@@ -0,0 +1,4 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M4 4 L14 14" stroke="#1E293B" stroke-width="2" stroke-linecap="round"/>
+  <path d="M14 4 L4 14" stroke="#1E293B" stroke-width="2" stroke-linecap="round"/>
+</svg>

package/dist/images/decline.svg

@@ -0,0 +1,5 @@
+<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="40" cy="40" r="38" fill="#EF4444"/>
+  <path d="M28 28 L52 52" stroke="white" stroke-width="6" stroke-linecap="round"/>
+  <path d="M52 28 L28 52" stroke="white" stroke-width="6" stroke-linecap="round"/>
+</svg>

package/dist/images/document-photo-back-start.svg

@@ -0,0 +1,95 @@
+<svg width="260" height="212" viewBox="0 0 260 212" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <!-- Background gradient -->
+  <defs>
+    <linearGradient id="cardGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#F8FAFC"/>
+      <stop offset="100%" style="stop-color:#E2E8F0"/>
+    </linearGradient>
+    <linearGradient id="stripeGradient" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" style="stop-color:#1E293B"/>
+      <stop offset="100%" style="stop-color:#334155"/>
+    </linearGradient>
+  </defs>
+
+  <!-- ID Card Back - Realistic Omang style -->
+  <g transform="translate(30, 20)">
+    <!-- Card shadow -->
+    <rect x="4" y="4" width="196" height="124" rx="8" fill="#94A3B8" opacity="0.3"/>
+
+    <!-- Card body -->
+    <rect x="0" y="0" width="196" height="124" rx="8" fill="url(#cardGradient)" stroke="#CBD5E1" stroke-width="1"/>
+
+    <!-- Magnetic stripe -->
+    <rect x="0" y="16" width="196" height="28" fill="url(#stripeGradient)"/>
+
+    <!-- Signature strip -->
+    <rect x="12" y="56" width="120" height="24" rx="2" fill="#FFFFFF" stroke="#E2E8F0" stroke-width="1"/>
+    <text x="18" y="72" font-family="Avenir, sans-serif" font-size="8" fill="#94A3B8" font-style="italic">Signature</text>
+
+    <!-- Barcode area -->
+    <rect x="12" y="92" width="172" height="20" rx="2" fill="#FFFFFF"/>
+    <!-- Barcode lines -->
+    <g fill="#1E293B">
+      <rect x="16" y="96" width="2" height="12"/>
+      <rect x="20" y="96" width="1" height="12"/>
+      <rect x="23" y="96" width="3" height="12"/>
+      <rect x="28" y="96" width="1" height="12"/>
+      <rect x="31" y="96" width="2" height="12"/>
+      <rect x="35" y="96" width="1" height="12"/>
+      <rect x="38" y="96" width="3" height="12"/>
+      <rect x="43" y="96" width="2" height="12"/>
+      <rect x="47" y="96" width="1" height="12"/>
+      <rect x="50" y="96" width="2" height="12"/>
+      <rect x="54" y="96" width="3" height="12"/>
+      <rect x="59" y="96" width="1" height="12"/>
+      <rect x="62" y="96" width="2" height="12"/>
+      <rect x="66" y="96" width="1" height="12"/>
+      <rect x="69" y="96" width="3" height="12"/>
+      <rect x="74" y="96" width="2" height="12"/>
+      <rect x="78" y="96" width="1" height="12"/>
+      <rect x="81" y="96" width="2" height="12"/>
+      <rect x="85" y="96" width="3" height="12"/>
+      <rect x="90" y="96" width="1" height="12"/>
+      <rect x="93" y="96" width="2" height="12"/>
+      <rect x="97" y="96" width="1" height="12"/>
+      <rect x="100" y="96" width="3" height="12"/>
+      <rect x="105" y="96" width="2" height="12"/>
+      <rect x="109" y="96" width="1" height="12"/>
+      <rect x="112" y="96" width="2" height="12"/>
+      <rect x="116" y="96" width="3" height="12"/>
+      <rect x="121" y="96" width="1" height="12"/>
+      <rect x="124" y="96" width="2" height="12"/>
+      <rect x="128" y="96" width="1" height="12"/>
+      <rect x="131" y="96" width="3" height="12"/>
+      <rect x="136" y="96" width="2" height="12"/>
+      <rect x="140" y="96" width="1" height="12"/>
+      <rect x="143" y="96" width="2" height="12"/>
+      <rect x="147" y="96" width="3" height="12"/>
+      <rect x="152" y="96" width="1" height="12"/>
+      <rect x="155" y="96" width="2" height="12"/>
+      <rect x="159" y="96" width="1" height="12"/>
+      <rect x="162" y="96" width="3" height="12"/>
+      <rect x="167" y="96" width="2" height="12"/>
+      <rect x="171" y="96" width="1" height="12"/>
+      <rect x="174" y="96" width="2" height="12"/>
+      <rect x="178" y="96" width="2" height="12"/>
+    </g>
+
+    <!-- MRZ-style text area -->
+    <text x="144" y="68" font-family="monospace" font-size="6" fill="#64748B">BWA</text>
+    <text x="144" y="78" font-family="monospace" font-size="6" fill="#64748B">OMANG</text>
+  </g>
+
+  <!-- Flip arrow indicator -->
+  <g transform="translate(130, 160)">
+    <!-- Circular arrow showing flip action -->
+    <circle cx="0" cy="16" r="20" fill="#7C3AED" opacity="0.1"/>
+    <path d="M-12 16 C-12 6, 0 2, 10 8" stroke="#7C3AED" stroke-width="2.5" fill="none" stroke-linecap="round"/>
+    <path d="M6 4 L10 8 L5 11" stroke="#7C3AED" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M12 16 C12 26, 0 30, -10 24" stroke="#7C3AED" stroke-width="2.5" fill="none" stroke-linecap="round"/>
+    <path d="M-6 28 L-10 24 L-5 21" stroke="#7C3AED" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
+  </g>
+
+  <!-- "BACK" label -->
+  <text x="130" y="205" font-family="Avenir, sans-serif" font-size="11" fill="#64748B" text-anchor="middle" font-weight="500">Flip to back side</text>
+</svg>

package/dist/images/drivers-licence-back.svg

@@ -0,0 +1,100 @@
+<svg width="260" height="212" viewBox="0 0 260 212" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <defs>
+    <linearGradient id="licenceGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#FEF3C7"/>
+      <stop offset="100%" style="stop-color:#FDE68A"/>
+    </linearGradient>
+    <linearGradient id="licenceStripe" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" style="stop-color:#92400E"/>
+      <stop offset="100%" style="stop-color:#B45309"/>
+    </linearGradient>
+  </defs>
+
+  <!-- Driver's Licence Back -->
+  <g transform="translate(30, 20)">
+    <!-- Card shadow -->
+    <rect x="4" y="4" width="196" height="124" rx="8" fill="#94A3B8" opacity="0.3"/>
+
+    <!-- Card body - yellowish like Botswana licence -->
+    <rect x="0" y="0" width="196" height="124" rx="8" fill="url(#licenceGradient)" stroke="#D97706" stroke-width="1"/>
+
+    <!-- Header stripe -->
+    <rect x="0" y="0" width="196" height="24" rx="8 8 0 0" fill="url(#licenceStripe)"/>
+    <text x="98" y="16" font-family="Avenir, sans-serif" font-size="10" fill="#FEF3C7" text-anchor="middle" font-weight="600">DRIVER'S LICENCE</text>
+
+    <!-- Vehicle categories section -->
+    <rect x="12" y="32" width="172" height="40" rx="4" fill="#FFFBEB" stroke="#F59E0B" stroke-width="1"/>
+    <text x="20" y="46" font-family="Avenir, sans-serif" font-size="8" fill="#92400E" font-weight="600">VEHICLE CATEGORIES</text>
+
+    <!-- Category boxes -->
+    <g transform="translate(20, 52)">
+      <rect x="0" y="0" width="24" height="16" rx="2" fill="#FEF3C7" stroke="#D97706"/>
+      <text x="12" y="11" font-family="monospace" font-size="8" fill="#92400E" text-anchor="middle">A</text>
+
+      <rect x="28" y="0" width="24" height="16" rx="2" fill="#FEF3C7" stroke="#D97706"/>
+      <text x="40" y="11" font-family="monospace" font-size="8" fill="#92400E" text-anchor="middle">B</text>
+
+      <rect x="56" y="0" width="24" height="16" rx="2" fill="#10B981" stroke="#059669"/>
+      <text x="68" y="11" font-family="monospace" font-size="8" fill="#fff" text-anchor="middle">C</text>
+
+      <rect x="84" y="0" width="24" height="16" rx="2" fill="#FEF3C7" stroke="#D97706"/>
+      <text x="96" y="11" font-family="monospace" font-size="8" fill="#92400E" text-anchor="middle">D</text>
+
+      <rect x="112" y="0" width="24" height="16" rx="2" fill="#FEF3C7" stroke="#D97706"/>
+      <text x="124" y="11" font-family="monospace" font-size="8" fill="#92400E" text-anchor="middle">E</text>
+    </g>
+
+    <!-- Restrictions/Endorsements -->
+    <text x="12" y="86" font-family="Avenir, sans-serif" font-size="7" fill="#92400E">RESTRICTIONS: NONE</text>
+    <text x="12" y="96" font-family="Avenir, sans-serif" font-size="7" fill="#92400E">ENDORSEMENTS: —</text>
+
+    <!-- Barcode -->
+    <rect x="12" y="104" width="120" height="14" rx="2" fill="#FFFBEB"/>
+    <g fill="#92400E">
+      <rect x="16" y="107" width="2" height="8"/>
+      <rect x="20" y="107" width="1" height="8"/>
+      <rect x="23" y="107" width="3" height="8"/>
+      <rect x="28" y="107" width="1" height="8"/>
+      <rect x="31" y="107" width="2" height="8"/>
+      <rect x="35" y="107" width="1" height="8"/>
+      <rect x="38" y="107" width="3" height="8"/>
+      <rect x="43" y="107" width="2" height="8"/>
+      <rect x="47" y="107" width="1" height="8"/>
+      <rect x="50" y="107" width="2" height="8"/>
+      <rect x="54" y="107" width="3" height="8"/>
+      <rect x="59" y="107" width="1" height="8"/>
+      <rect x="62" y="107" width="2" height="8"/>
+      <rect x="66" y="107" width="1" height="8"/>
+      <rect x="69" y="107" width="3" height="8"/>
+      <rect x="74" y="107" width="2" height="8"/>
+      <rect x="78" y="107" width="1" height="8"/>
+      <rect x="81" y="107" width="2" height="8"/>
+      <rect x="85" y="107" width="3" height="8"/>
+      <rect x="90" y="107" width="1" height="8"/>
+      <rect x="93" y="107" width="2" height="8"/>
+      <rect x="97" y="107" width="1" height="8"/>
+      <rect x="100" y="107" width="3" height="8"/>
+      <rect x="105" y="107" width="2" height="8"/>
+      <rect x="109" y="107" width="1" height="8"/>
+      <rect x="112" y="107" width="2" height="8"/>
+      <rect x="116" y="107" width="3" height="8"/>
+      <rect x="121" y="107" width="1" height="8"/>
+      <rect x="124" y="107" width="2" height="8"/>
+    </g>
+
+    <!-- Issue info -->
+    <text x="140" y="110" font-family="monospace" font-size="6" fill="#92400E">DTRS</text>
+    <text x="140" y="118" font-family="monospace" font-size="6" fill="#92400E">BWA</text>
+  </g>
+
+  <!-- Flip arrow indicator -->
+  <g transform="translate(130, 160)">
+    <circle cx="0" cy="16" r="20" fill="#D97706" opacity="0.1"/>
+    <path d="M-12 16 C-12 6, 0 2, 10 8" stroke="#D97706" stroke-width="2.5" fill="none" stroke-linecap="round"/>
+    <path d="M6 4 L10 8 L5 11" stroke="#D97706" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
+    <path d="M12 16 C12 26, 0 30, -10 24" stroke="#D97706" stroke-width="2.5" fill="none" stroke-linecap="round"/>
+    <path d="M-6 28 L-10 24 L-5 21" stroke="#D97706" stroke-width="2.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>
+  </g>
+
+  <text x="130" y="205" font-family="Avenir, sans-serif" font-size="11" fill="#64748B" text-anchor="middle" font-weight="500">Flip to back side</text>
+</svg>

package/dist/images/final.svg

@@ -0,0 +1,4 @@
+<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="40" cy="40" r="38" fill="#10B981"/>
+  <path d="M24 40 L34 50 L56 28" stroke="white" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/images/resubmit.svg

@@ -0,0 +1,5 @@
+<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="40" cy="40" r="38" fill="#F59E0B"/>
+  <path d="M40 20 L40 44" stroke="white" stroke-width="6" stroke-linecap="round"/>
+  <circle cx="40" cy="56" r="4" fill="white"/>
+</svg>

package/dist/images/selfie-start.svg

@@ -0,0 +1,26 @@
+<svg width="300" height="300" viewBox="0 0 300 300" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <!-- Phone outline -->
+  <rect x="85" y="30" width="130" height="240" rx="20" fill="#F8FAFC" stroke="#E2E8F0" stroke-width="2"/>
+
+  <!-- Screen -->
+  <rect x="95" y="50" width="110" height="180" rx="4" fill="#1E293B"/>
+
+  <!-- Face silhouette in screen -->
+  <ellipse cx="150" cy="120" rx="35" ry="45" fill="#64748B"/>
+
+  <!-- Face guide circle -->
+  <circle cx="150" cy="120" r="55" stroke="#7C3AED" stroke-width="3" stroke-dasharray="8 4"/>
+
+  <!-- Shoulders -->
+  <path d="M100 200 Q150 170 200 200" stroke="#64748B" stroke-width="20" stroke-linecap="round" fill="none"/>
+
+  <!-- Camera dot -->
+  <circle cx="150" cy="40" r="4" fill="#64748B"/>
+
+  <!-- Home button -->
+  <circle cx="150" cy="250" r="10" stroke="#CBD5E1" stroke-width="2" fill="none"/>
+
+  <!-- Checkmark badge -->
+  <circle cx="220" cy="80" r="24" fill="#10B981"/>
+  <path d="M208 80 L216 88 L232 72" stroke="white" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/dist/images/welcome.svg

@@ -0,0 +1,70 @@
+<svg width="280" height="220" viewBox="0 0 280 220" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <!-- Background glow -->
+  <defs>
+    <linearGradient id="passportGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#7C3AED;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#5B21B6;stop-opacity:1" />
+    </linearGradient>
+    <linearGradient id="cardGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" style="stop-color:#FFFFFF;stop-opacity:1" />
+      <stop offset="100%" style="stop-color:#F1F5F9;stop-opacity:1" />
+    </linearGradient>
+    <filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
+      <feDropShadow dx="0" dy="4" stdDeviation="8" flood-color="#7C3AED" flood-opacity="0.2"/>
+    </filter>
+    <filter id="cardShadow" x="-20%" y="-20%" width="140%" height="140%">
+      <feDropShadow dx="0" dy="4" stdDeviation="6" flood-color="#000000" flood-opacity="0.1"/>
+    </filter>
+  </defs>
+
+  <!-- Passport (back, tilted left) -->
+  <g transform="translate(50, 40) rotate(-8)">
+    <rect x="0" y="0" width="100" height="140" rx="8" fill="url(#passportGradient)" filter="url(#shadow)"/>
+    <!-- Passport globe icon -->
+    <circle cx="50" cy="55" r="25" stroke="#FFFFFF" stroke-width="2" fill="none" opacity="0.9"/>
+    <ellipse cx="50" cy="55" rx="10" ry="25" stroke="#FFFFFF" stroke-width="1.5" fill="none" opacity="0.7"/>
+    <line x1="25" y1="55" x2="75" y2="55" stroke="#FFFFFF" stroke-width="1.5" opacity="0.7"/>
+    <line x1="50" y1="30" x2="50" y2="80" stroke="#FFFFFF" stroke-width="1.5" opacity="0.7"/>
+    <!-- Passport text lines -->
+    <rect x="20" y="95" width="60" height="4" rx="2" fill="#FFFFFF" opacity="0.6"/>
+    <rect x="25" y="105" width="50" height="3" rx="1.5" fill="#FFFFFF" opacity="0.4"/>
+    <rect x="30" y="115" width="40" height="3" rx="1.5" fill="#FFFFFF" opacity="0.3"/>
+  </g>
+
+  <!-- ID Card (front, tilted right) -->
+  <g transform="translate(120, 70) rotate(5)">
+    <rect x="0" y="0" width="130" height="85" rx="8" fill="url(#cardGradient)" filter="url(#cardShadow)" stroke="#E2E8F0" stroke-width="1"/>
+    <!-- Photo placeholder -->
+    <rect x="12" y="15" width="35" height="45" rx="4" fill="#E2E8F0"/>
+    <circle cx="29.5" cy="30" r="10" fill="#CBD5E1"/>
+    <ellipse cx="29.5" cy="50" rx="12" ry="8" fill="#CBD5E1"/>
+    <!-- Text lines -->
+    <rect x="55" y="18" width="60" height="5" rx="2" fill="#64748B"/>
+    <rect x="55" y="28" width="50" height="4" rx="2" fill="#94A3B8"/>
+    <rect x="55" y="38" width="55" height="4" rx="2" fill="#94A3B8"/>
+    <rect x="55" y="48" width="40" height="4" rx="2" fill="#CBD5E1"/>
+    <!-- Barcode -->
+    <rect x="12" y="68" width="106" height="8" rx="2" fill="#E2E8F0"/>
+    <rect x="14" y="70" width="2" height="4" fill="#64748B"/>
+    <rect x="18" y="70" width="1" height="4" fill="#64748B"/>
+    <rect x="21" y="70" width="3" height="4" fill="#64748B"/>
+    <rect x="26" y="70" width="1" height="4" fill="#64748B"/>
+    <rect x="29" y="70" width="2" height="4" fill="#64748B"/>
+    <rect x="33" y="70" width="1" height="4" fill="#64748B"/>
+    <rect x="36" y="70" width="3" height="4" fill="#64748B"/>
+    <rect x="41" y="70" width="2" height="4" fill="#64748B"/>
+    <rect x="45" y="70" width="1" height="4" fill="#64748B"/>
+    <rect x="48" y="70" width="2" height="4" fill="#64748B"/>
+    <rect x="52" y="70" width="3" height="4" fill="#64748B"/>
+    <rect x="57" y="70" width="1" height="4" fill="#64748B"/>
+    <rect x="60" y="70" width="2" height="4" fill="#64748B"/>
+  </g>
+
+  <!-- Checkmark badge -->
+  <g transform="translate(200, 45)">
+    <circle cx="22" cy="22" r="22" fill="#10B981" filter="url(#shadow)"/>
+    <circle cx="22" cy="22" r="18" fill="#10B981"/>
+    <!-- Checkmark -->
+    <path d="M14 22 L19 27 L30 16" stroke="#FFFFFF" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" fill="none"/>
+  </g>
+</svg>

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export * from './main'
+export {}