@worldcoin/idkit 2.2.1 → 2.3.0

package/build/index.js

@@ -2,7 +2,7 @@ import {
   QRCode_default,
   __,
   idkit_default
-} from "./chunk-5OWPJUHG.js";
+} from "./chunk-3HCETHXP.js";
 
 // src/hooks/useIDKit.ts
 import { useEffect } from "react";
@@ -25,9 +25,6 @@ var useIDKit_default = useIDKit;
 // src/components/IDKitWidget/index.tsx
 import { memo } from "react";
 
-// src/components/IDKitWidget/BaseWidget.tsx
-import root from "react-shadow";
-
 // src/hooks/useMedia.ts
 import { useEffect as useEffect2, useState } from "react";
 var useMedia = () => {
@@ -55,13 +52,78 @@ var useMedia_default = useMedia;
 import { createPortal } from "react-dom";
 
 // src/styles/styles.css
-var styles_default = `/* TODO: Use an alternative to avoid the extra request to Google (e.g. hosting ourselves, or local file)  */
-@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;600;700&family=Sora:wght@600&display=swap');
-/* ! tailwindcss v3.4.4 | MIT License | https://tailwindcss.com  */
+var styles_default = `/* Remote TWK Lausanne font definitions */
+@font-face {
+  font-family: 'TWK Lausanne';
+  src: url('https://world-id-assets.com/fonts/TWKLausanne-200.woff2') format('woff2');
+  font-weight: 200;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'TWK Lausanne';
+  src: url('https://world-id-assets.com/fonts/TWKLausanne-300.woff2') format('woff2');
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'TWK Lausanne';
+  src: url('https://world-id-assets.com/fonts/TWKLausanne-350.woff2') format('woff2');
+  font-weight: 350;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'TWK Lausanne';
+  src: url('https://world-id-assets.com/fonts/TWKLausanne-400.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'TWK Lausanne';
+  src: url('https://world-id-assets.com/fonts/TWKLausanne-450.woff2') format('woff2');
+  font-weight: 450;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'TWK Lausanne';
+  src: url('https://world-id-assets.com/fonts/TWKLausanne-500.woff2') format('woff2');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'TWK Lausanne';
+  src: url('https://world-id-assets.com/fonts/TWKLausanne-550.woff2') format('woff2');
+  font-weight: 550;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'TWK Lausanne';
+  src: url('https://world-id-assets.com/fonts/TWKLausanne-600.woff2') format('woff2');
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* ! tailwindcss v3.4.4 | MIT License | https://tailwindcss.com */
+
 /*
 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
 */
+
 *,
 ::before,
 ::after {
@@ -70,10 +132,12 @@ var styles_default = `/* TODO: Use an alternative to avoid the extra request to
   border-style: solid; /* 2 */
   border-color: #e5e7eb; /* 2 */
 }
+
 ::before,
 ::after {
   --tw-content: '';
 }
+
 /*
 1. Use a consistent sensible line-height in all browsers.
 2. Prevent adjustments of font size after orientation changes in iOS.
@@ -83,6 +147,7 @@ var styles_default = `/* TODO: Use an alternative to avoid the extra request to
 6. Use the user's configured \`sans\` font-variation-settings by default.
 7. Disable tap highlights on iOS
 */
+
 html,
 :host {
   line-height: 1.5; /* 1 */
@@ -90,39 +155,47 @@ html,
   -moz-tab-size: 4; /* 3 */
   -o-tab-size: 4;
      tab-size: 4; /* 3 */
-  font-family: Rubik, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
+  font-family: TWK Lausanne, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
   font-feature-settings: normal; /* 5 */
   font-variation-settings: normal; /* 6 */
   -webkit-tap-highlight-color: transparent; /* 7 */
 }
+
 /*
 1. Remove the margin in all browsers.
 2. Inherit line-height from \`html\` so users can set them as a class directly on the \`html\` element.
 */
+
 body {
   margin: 0; /* 1 */
   line-height: inherit; /* 2 */
 }
+
 /*
 1. Add the correct height in Firefox.
 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
 3. Ensure horizontal rules are visible by default.
 */
+
 hr {
   height: 0; /* 1 */
   color: inherit; /* 2 */
   border-top-width: 1px; /* 3 */
 }
+
 /*
 Add the correct text decoration in Chrome, Edge, and Safari.
 */
+
 abbr:where([title]) {
   -webkit-text-decoration: underline dotted;
           text-decoration: underline dotted;
 }
+
 /*
 Remove the default font size and weight for headings.
 */
+
 h1,
 h2,
 h3,
@@ -132,26 +205,32 @@ h6 {
   font-size: inherit;
   font-weight: inherit;
 }
+
 /*
 Reset links to optimize for opt-in styling instead of opt-out.
 */
+
 a {
   color: inherit;
   text-decoration: inherit;
 }
+
 /*
 Add the correct font weight in Edge and Safari.
 */
+
 b,
 strong {
   font-weight: bolder;
 }
+
 /*
 1. Use the user's configured \`mono\` font-family by default.
 2. Use the user's configured \`mono\` font-feature-settings by default.
 3. Use the user's configured \`mono\` font-variation-settings by default.
 4. Correct the odd \`em\` font sizing in all browsers.
 */
+
 code,
 kbd,
 samp,
@@ -161,15 +240,19 @@ pre {
   font-variation-settings: normal; /* 3 */
   font-size: 1em; /* 4 */
 }
+
 /*
 Add the correct font size in all browsers.
 */
+
 small {
   font-size: 80%;
 }
+
 /*
 Prevent \`sub\` and \`sup\` elements from affecting the line height in all browsers.
 */
+
 sub,
 sup {
   font-size: 75%;
@@ -177,27 +260,33 @@ sup {
   position: relative;
   vertical-align: baseline;
 }
+
 sub {
   bottom: -0.25em;
 }
+
 sup {
   top: -0.5em;
 }
+
 /*
 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
 3. Remove gaps between table borders by default.
 */
+
 table {
   text-indent: 0; /* 1 */
   border-color: inherit; /* 2 */
   border-collapse: collapse; /* 3 */
 }
+
 /*
 1. Change the font styles in all browsers.
 2. Remove the margin in Firefox and Safari.
 3. Remove default padding in all browsers.
 */
+
 button,
 input,
 optgroup,
@@ -214,17 +303,21 @@ textarea {
   margin: 0; /* 2 */
   padding: 0; /* 3 */
 }
+
 /*
 Remove the inheritance of text transform in Edge and Firefox.
 */
+
 button,
 select {
   text-transform: none;
 }
+
 /*
 1. Correct the inability to style clickable types in iOS and Safari.
 2. Remove default button styles.
 */
+
 button,
 input:where([type='button']),
 input:where([type='reset']),
@@ -233,62 +326,80 @@ input:where([type='submit']) {
   background-color: transparent; /* 2 */
   background-image: none; /* 2 */
 }
+
 /*
 Use the modern Firefox focus style for all focusable elements.
 */
+
 :-moz-focusring {
   outline: auto;
 }
+
 /*
 Remove the additional \`:invalid\` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
 */
+
 :-moz-ui-invalid {
   box-shadow: none;
 }
+
 /*
 Add the correct vertical alignment in Chrome and Firefox.
 */
+
 progress {
   vertical-align: baseline;
 }
+
 /*
 Correct the cursor style of increment and decrement buttons in Safari.
 */
+
 ::-webkit-inner-spin-button,
 ::-webkit-outer-spin-button {
   height: auto;
 }
+
 /*
 1. Correct the odd appearance in Chrome and Safari.
 2. Correct the outline style in Safari.
 */
+
 [type='search'] {
   -webkit-appearance: textfield; /* 1 */
   outline-offset: -2px; /* 2 */
 }
+
 /*
 Remove the inner padding in Chrome and Safari on macOS.
 */
+
 ::-webkit-search-decoration {
   -webkit-appearance: none;
 }
+
 /*
 1. Correct the inability to style clickable types in iOS and Safari.
 2. Change font properties to \`inherit\` in Safari.
 */
+
 ::-webkit-file-upload-button {
   -webkit-appearance: button; /* 1 */
   font: inherit; /* 2 */
 }
+
 /*
 Add the correct display in Chrome and Safari.
 */
+
 summary {
   display: list-item;
 }
+
 /*
 Removes the default spacing and border for appropriate elements.
 */
+
 blockquote,
 dl,
 dd,
@@ -304,13 +415,16 @@ p,
 pre {
   margin: 0;
 }
+
 fieldset {
   margin: 0;
   padding: 0;
 }
+
 legend {
   padding: 0;
 }
+
 ol,
 ul,
 menu {
@@ -318,49 +432,62 @@ menu {
   margin: 0;
   padding: 0;
 }
+
 /*
 Reset default styling for dialogs.
 */
+
 dialog {
   padding: 0;
 }
+
 /*
 Prevent resizing textareas horizontally by default.
 */
+
 textarea {
   resize: vertical;
 }
+
 /*
 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
 2. Set the default placeholder color to the user's configured gray 400 color.
 */
+
 input::-moz-placeholder, textarea::-moz-placeholder {
   opacity: 1; /* 1 */
   color: #9ca3af; /* 2 */
 }
+
 input::placeholder,
 textarea::placeholder {
   opacity: 1; /* 1 */
   color: #9ca3af; /* 2 */
 }
+
 /*
 Set the default cursor for buttons.
 */
+
 button,
 [role="button"] {
   cursor: pointer;
 }
+
 /*
 Make sure disabled buttons don't get the pointer cursor.
 */
+
 :disabled {
   cursor: default;
 }
+
 /*
 1. Make replaced elements \`display: block\` by default. (https://github.com/mozdevs/cssremedy/issues/14)
 2. Add \`vertical-align: middle\` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
    This can trigger a poorly considered lint error in some tools but is included by design.
 */
+
 img,
 svg,
 video,
@@ -372,19 +499,24 @@ object {
   display: block; /* 1 */
   vertical-align: middle; /* 2 */
 }
+
 /*
 Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
 */
+
 img,
 video {
   max-width: 100%;
   height: auto;
 }
+
 /* Make elements with the HTML hidden attribute stay hidden by default */
+
 [hidden] {
   display: none;
 }
-[type='text'],input:where(:not([type])),[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select{
+
+[type='text'],input:where(:not([type])),[type='email'],[type='url'],[type='password'],[type='number'],[type='date'],[type='datetime-local'],[type='month'],[type='search'],[type='tel'],[type='time'],[type='week'],[multiple],textarea,select {
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
@@ -400,7 +532,8 @@ video {
   line-height: 1.5rem;
   --tw-shadow: 0 0 #0000;
 }
-[type='text']:focus, input:where(:not([type])):focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus{
+
+[type='text']:focus, input:where(:not([type])):focus, [type='email']:focus, [type='url']:focus, [type='password']:focus, [type='number']:focus, [type='date']:focus, [type='datetime-local']:focus, [type='month']:focus, [type='search']:focus, [type='tel']:focus, [type='time']:focus, [type='week']:focus, [multiple]:focus, textarea:focus, select:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
   --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
@@ -412,29 +545,36 @@ video {
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
   border-color: #2563eb;
 }
-input::-moz-placeholder, textarea::-moz-placeholder{
+
+input::-moz-placeholder, textarea::-moz-placeholder {
   color: #6b7280;
   opacity: 1;
 }
-input::placeholder,textarea::placeholder{
+
+input::placeholder,textarea::placeholder {
   color: #6b7280;
   opacity: 1;
 }
-::-webkit-datetime-edit-fields-wrapper{
+
+::-webkit-datetime-edit-fields-wrapper {
   padding: 0;
 }
-::-webkit-date-and-time-value{
+
+::-webkit-date-and-time-value {
   min-height: 1.5em;
   text-align: inherit;
 }
-::-webkit-datetime-edit{
+
+::-webkit-datetime-edit {
   display: inline-flex;
 }
-::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field{
+
+::-webkit-datetime-edit,::-webkit-datetime-edit-year-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-meridiem-field {
   padding-top: 0;
   padding-bottom: 0;
 }
-select{
+
+select {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
   background-position: right 0.5rem center;
   background-repeat: no-repeat;
@@ -443,7 +583,8 @@ select{
   -webkit-print-color-adjust: exact;
           print-color-adjust: exact;
 }
-[multiple],[size]:where(select:not([size="1"])){
+
+[multiple],[size]:where(select:not([size="1"])) {
   background-image: initial;
   background-position: initial;
   background-repeat: unset;
@@ -452,7 +593,8 @@ select{
   -webkit-print-color-adjust: unset;
           print-color-adjust: unset;
 }
-[type='checkbox'],[type='radio']{
+
+[type='checkbox'],[type='radio'] {
   -webkit-appearance: none;
      -moz-appearance: none;
           appearance: none;
@@ -474,13 +616,16 @@ select{
   border-width: 1px;
   --tw-shadow: 0 0 #0000;
 }
-[type='checkbox']{
+
+[type='checkbox'] {
   border-radius: 0px;
 }
-[type='radio']{
+
+[type='radio'] {
   border-radius: 100%;
 }
-[type='checkbox']:focus,[type='radio']:focus{
+
+[type='checkbox']:focus,[type='radio']:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
   --tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
@@ -491,38 +636,45 @@ select{
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
 }
-[type='checkbox']:checked,[type='radio']:checked{
+
+[type='checkbox']:checked,[type='radio']:checked {
   border-color: transparent;
   background-color: currentColor;
   background-size: 100% 100%;
   background-position: center;
   background-repeat: no-repeat;
 }
-[type='checkbox']:checked{
+
+[type='checkbox']:checked {
   background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
 }
-@media (forced-colors: active) {
-  [type='checkbox']:checked{
+
+@media (forced-colors: active)  {
+  [type='checkbox']:checked {
     -webkit-appearance: auto;
        -moz-appearance: auto;
             appearance: auto;
   }
 }
-[type='radio']:checked{
+
+[type='radio']:checked {
   background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3ccircle cx='8' cy='8' r='3'/%3e%3c/svg%3e");
 }
-@media (forced-colors: active) {
-  [type='radio']:checked{
+
+@media (forced-colors: active)  {
+  [type='radio']:checked {
     -webkit-appearance: auto;
        -moz-appearance: auto;
             appearance: auto;
   }
 }
-[type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus{
+
+[type='checkbox']:checked:hover,[type='checkbox']:checked:focus,[type='radio']:checked:hover,[type='radio']:checked:focus {
   border-color: transparent;
   background-color: currentColor;
 }
-[type='checkbox']:indeterminate{
+
+[type='checkbox']:indeterminate {
   background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 16 16'%3e%3cpath stroke='white' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8h8'/%3e%3c/svg%3e");
   border-color: transparent;
   background-color: currentColor;
@@ -530,18 +682,21 @@ select{
   background-position: center;
   background-repeat: no-repeat;
 }
-@media (forced-colors: active) {
-  [type='checkbox']:indeterminate{
+
+@media (forced-colors: active)  {
+  [type='checkbox']:indeterminate {
     -webkit-appearance: auto;
        -moz-appearance: auto;
             appearance: auto;
   }
 }
-[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus{
+
+[type='checkbox']:indeterminate:hover,[type='checkbox']:indeterminate:focus {
   border-color: transparent;
   background-color: currentColor;
 }
-[type='file']{
+
+[type='file'] {
   background: unset;
   border-color: inherit;
   border-width: 0;
@@ -550,11 +705,13 @@ select{
   font-size: unset;
   line-height: inherit;
 }
-[type='file']:focus{
+
+[type='file']:focus {
   outline: 1px solid ButtonText;
   outline: 1px auto -webkit-focus-ring-color;
 }
-*, ::before, ::after{
+
+*, ::before, ::after {
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
   --tw-translate-x: 0;
@@ -607,7 +764,8 @@ select{
   --tw-contain-paint:  ;
   --tw-contain-style:  ;
 }
-::backdrop{
+
+::backdrop {
   --tw-border-spacing-x: 0;
   --tw-border-spacing-y: 0;
   --tw-translate-x: 0;
@@ -660,523 +818,525 @@ select{
   --tw-contain-paint:  ;
   --tw-contain-style:  ;
 }
-.container{
+.container {
   width: 100%;
 }
-@media (min-width: 414px){
-  .container{
+@media (min-width: 414px) {
+  .container {
     max-width: 414px;
   }
 }
-@media (min-width: 640px){
-  .container{
+@media (min-width: 640px) {
+  .container {
     max-width: 640px;
   }
 }
-@media (min-width: 768px){
-  .container{
+@media (min-width: 768px) {
+  .container {
     max-width: 768px;
   }
 }
-@media (min-width: 1024px){
-  .container{
+@media (min-width: 1024px) {
+  .container {
     max-width: 1024px;
   }
 }
-@media (min-width: 1280px){
-  .container{
+@media (min-width: 1280px) {
+  .container {
     max-width: 1280px;
   }
 }
-@media (min-width: 1536px){
-  .container{
+@media (min-width: 1536px) {
+  .container {
     max-width: 1536px;
   }
 }
-.visible{
+.visible {
   visibility: visible;
 }
-.fixed{
+.fixed {
   position: fixed;
 }
-.absolute{
+.absolute {
   position: absolute;
 }
-.relative{
+.relative {
   position: relative;
 }
-.inset-0{
+.inset-0 {
   inset: 0;
 }
-.z-50{
+.z-50 {
   z-index: 50;
 }
-.z-\\[9999\\]{
+.z-\\[9999\\] {
   z-index: 9999;
 }
-.mx-6{
+.mx-6 {
   margin-left: 24px;
   margin-right: 24px;
 }
-.mx-auto{
+.mx-auto {
   margin-left: auto;
   margin-right: auto;
 }
-.-mt-5{
+.-mt-5 {
   margin-top: -20px;
 }
-.-mt-6{
+.-mt-6 {
   margin-top: -24px;
 }
-.mb-10{
+.mb-10 {
   margin-bottom: 40px;
 }
-.mb-12{
-  margin-bottom: 48px;
-}
-.mb-3{
+.mb-3 {
   margin-bottom: 12px;
 }
-.mb-4{
+.mb-4 {
   margin-bottom: 16px;
 }
-.mb-6{
+.mb-6 {
   margin-bottom: 24px;
 }
-.mr-1{
-  margin-right: 4px;
-}
-.mr-1\\.5{
-  margin-right: 6px;
-}
-.mt-2{
+.mt-2 {
   margin-top: 8px;
 }
-.mt-3{
+.mt-3 {
   margin-top: 12px;
 }
-.mt-4{
+.mt-4 {
   margin-top: 16px;
 }
-.inline{
+.inline {
   display: inline;
 }
-.flex{
+.flex {
   display: flex;
 }
-.inline-flex{
+.inline-flex {
   display: inline-flex;
 }
-.hidden{
+.hidden {
   display: none;
 }
-.size-11{
-  width: 44px;
-  height: 44px;
+.size-14 {
+  width: 56px;
+  height: 56px;
 }
-.size-24{
+.size-24 {
   width: 96px;
   height: 96px;
 }
-.size-5{
+.size-4 {
+  width: 16px;
+  height: 16px;
+}
+.size-5 {
   width: 20px;
   height: 20px;
 }
-.size-6{
+.size-6 {
   width: 24px;
   height: 24px;
 }
-.size-\\[244px\\]{
-  width: 244px;
-  height: 244px;
+.size-8 {
+  width: 32px;
+  height: 32px;
 }
-.h-10{
-  height: 40px;
+.size-\\[200px\\] {
+  width: 200px;
+  height: 200px;
 }
-.min-h-full{
+.min-h-full {
   min-height: 100%;
 }
-.min-h-screen{
+.min-h-screen {
   min-height: 100vh;
 }
-.w-24{
+.w-24 {
   width: 96px;
 }
-.w-full{
+.w-full {
   width: 100%;
 }
-.max-w-\\[224px\\]{
+.max-w-\\[224px\\] {
   max-width: 224px;
 }
-.flex-1{
+.max-w-\\[260px\\] {
+  max-width: 260px;
+}
+.flex-1 {
   flex: 1 1 0%;
 }
-@keyframes pulse{
-  50%{
+@keyframes pulse {
+  50% {
     opacity: .5;
   }
 }
-.animate-pulse{
+.animate-pulse {
   animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
-@keyframes spin{
-  to{
+@keyframes spin {
+  to {
     transform: rotate(360deg);
   }
 }
-.animate-spin{
+.animate-spin {
   animation: spin 1s linear infinite;
 }
-.cursor-pointer{
+.cursor-pointer {
   cursor: pointer;
 }
-.flex-col{
+.flex-col {
   flex-direction: column;
 }
-.items-end{
+.items-end {
   align-items: flex-end;
 }
-.items-center{
+.items-center {
   align-items: center;
 }
-.justify-center{
-  justify-content: center;
+.justify-end {
+  justify-content: flex-end;
 }
-.justify-between{
-  justify-content: space-between;
+.justify-center {
+  justify-content: center;
 }
-.space-x-2 > :not([hidden]) ~ :not([hidden]){
+.space-x-2 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(8px * var(--tw-space-x-reverse));
   margin-left: calc(8px * calc(1 - var(--tw-space-x-reverse)));
 }
-.space-x-4 > :not([hidden]) ~ :not([hidden]){
+.space-x-4 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-x-reverse: 0;
   margin-right: calc(16px * var(--tw-space-x-reverse));
   margin-left: calc(16px * calc(1 - var(--tw-space-x-reverse)));
 }
-.space-y-10 > :not([hidden]) ~ :not([hidden]){
+.space-y-10 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(40px * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(40px * var(--tw-space-y-reverse));
 }
-.space-y-4 > :not([hidden]) ~ :not([hidden]){
+.space-y-4 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(16px * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(16px * var(--tw-space-y-reverse));
 }
-.space-y-5 > :not([hidden]) ~ :not([hidden]){
+.space-y-5 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(20px * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(20px * var(--tw-space-y-reverse));
 }
-.space-y-6 > :not([hidden]) ~ :not([hidden]){
+.space-y-6 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(24px * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(24px * var(--tw-space-y-reverse));
 }
-.space-y-8 > :not([hidden]) ~ :not([hidden]){
+.space-y-8 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(32px * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(32px * var(--tw-space-y-reverse));
 }
-.overflow-y-hidden{
+.overflow-y-hidden {
   overflow-y: hidden;
 }
-.rounded-2xl{
+.rounded-2xl {
   border-radius: 1rem;
 }
-.rounded-full{
+.rounded-full {
   border-radius: 9999px;
 }
-.rounded-lg{
+.rounded-lg {
   border-radius: 0.5rem;
 }
-.border{
+.border {
   border-width: 1px;
 }
-.border-t{
+.border-\\[1\\.2px\\] {
+  border-width: 1.2px;
+}
+.border-t {
   border-top-width: 1px;
 }
-.border-ebecef{
+.border-solid {
+  border-style: solid;
+}
+.border-\\[\\#EBECEF\\] {
   --tw-border-opacity: 1;
   border-color: rgb(235 236 239 / var(--tw-border-opacity));
 }
-.border-f1f5f8{
+.border-ebecef {
+  --tw-border-opacity: 1;
+  border-color: rgb(235 236 239 / var(--tw-border-opacity));
+}
+.border-f1f5f8 {
   --tw-border-opacity: 1;
   border-color: rgb(241 245 248 / var(--tw-border-opacity));
 }
-.border-f5f5f7{
+.border-f5f5f7 {
   --tw-border-opacity: 1;
   border-color: rgb(245 245 247 / var(--tw-border-opacity));
 }
-.border-transparent{
+.border-transparent {
   border-color: transparent;
 }
-.bg-0d151d{
+.bg-0d151d {
   --tw-bg-opacity: 1;
   background-color: rgb(13 21 29 / var(--tw-bg-opacity));
 }
-.bg-black\\/50{
+.bg-black\\/50 {
   background-color: rgb(0 0 0 / 0.5);
 }
-.bg-transparent{
+.bg-transparent {
   background-color: transparent;
 }
-.bg-white{
+.bg-white {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
-.p-2{
-  padding: 8px;
+.p-3 {
+  padding: 12px;
 }
-.p-4{
+.p-4 {
   padding: 16px;
 }
-.p-7{
+.p-7 {
   padding: 28px;
 }
-.px-2{
+.px-2 {
   padding-left: 8px;
   padding-right: 8px;
 }
-.px-8{
+.px-8 {
   padding-left: 32px;
   padding-right: 32px;
 }
-.py-1{
+.py-1 {
   padding-top: 4px;
   padding-bottom: 4px;
 }
-.py-3{
+.py-3 {
   padding-top: 12px;
   padding-bottom: 12px;
 }
-.pt-6{
+.pt-6 {
   padding-top: 24px;
 }
-.text-center{
+.text-center {
   text-align: center;
 }
-.font-sans{
-  font-family: Rubik, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+.font-sans {
+  font-family: TWK Lausanne, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
 }
-.font-sora{
-  font-family: Sora, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-}
-.text-2xl{
+.text-2xl {
   font-size: 24px;
   line-height: 32px;
 }
-.text-lg{
+.text-lg {
   font-size: 18px;
   line-height: 28px;
 }
-.text-sm{
+.text-sm {
   font-size: 14px;
   line-height: 20px;
 }
-.text-xs{
+.text-xs {
   font-size: 12px;
   line-height: 16px;
 }
-.font-bold{
-  font-weight: 700;
+.font-light {
+  font-weight: 300;
 }
-.font-medium{
+.font-medium {
   font-weight: 500;
 }
-.font-semibold{
+.font-semibold {
   font-weight: 600;
 }
-.text-0d151d{
+.text-0d151d {
   --tw-text-opacity: 1;
   color: rgb(13 21 29 / var(--tw-text-opacity));
 }
-.text-29343f{
+.text-29343f {
   --tw-text-opacity: 1;
   color: rgb(41 52 63 / var(--tw-text-opacity));
 }
-.text-3c424b{
+.text-3c424b {
   --tw-text-opacity: 1;
   color: rgb(60 66 75 / var(--tw-text-opacity));
 }
-.text-657080{
+.text-657080 {
   --tw-text-opacity: 1;
   color: rgb(101 112 128 / var(--tw-text-opacity));
 }
-.text-70868f{
+.text-70868f {
   --tw-text-opacity: 1;
   color: rgb(112 134 143 / var(--tw-text-opacity));
 }
-.text-9ba3ae{
+.text-9ba3ae {
   --tw-text-opacity: 1;
   color: rgb(155 163 174 / var(--tw-text-opacity));
 }
-.text-9eafc0{
+.text-9eafc0 {
   --tw-text-opacity: 1;
   color: rgb(158 175 192 / var(--tw-text-opacity));
 }
-.text-black{
+.text-black {
   --tw-text-opacity: 1;
   color: rgb(0 0 0 / var(--tw-text-opacity));
 }
-.text-gray-900{
+.text-gray-900 {
   --tw-text-opacity: 1;
   color: rgb(17 24 39 / var(--tw-text-opacity));
 }
-.text-red-500{
-  --tw-text-opacity: 1;
-  color: rgb(239 68 68 / var(--tw-text-opacity));
-}
-.text-white{
+.text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
-.opacity-40{
+.opacity-40 {
   opacity: 0.4;
 }
-.shadow{
+.shadow {
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
-.shadow-sm{
+.shadow-sm {
   --tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
-.blur-lg{
+.blur-lg {
   --tw-blur: blur(16px);
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
-.filter{
+.filter {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
-.backdrop-blur-lg{
+.backdrop-blur-lg {
   --tw-backdrop-blur: blur(16px);
   -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
           backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
 }
-.transition{
+.transition {
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
   transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
   transition-duration: 150ms;
 }
-.duration-300{
+.duration-300 {
   transition-duration: 300ms;
 }
-.duration-500{
+.duration-500 {
   transition-duration: 500ms;
 }
-.ease-in-out{
+.ease-in-out {
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
 }
 input[type='number']::-webkit-inner-spin-button,
-	input[type='number']::-webkit-outer-spin-button{
+	input[type='number']::-webkit-outer-spin-button {
   -webkit-appearance: none;
           appearance: none;
 }
-.hover\\:underline:hover{
+.hover\\:underline:hover {
   text-decoration-line: underline;
 }
-.hover\\:shadow:hover{
+.hover\\:shadow:hover {
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
-.focus\\:outline-none:focus{
+.focus\\:outline-none:focus {
   outline: 2px solid transparent;
   outline-offset: 2px;
 }
-.focus\\:ring-2:focus{
+.focus\\:ring-2:focus {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
-.focus\\:ring-indigo-500:focus{
+.focus\\:ring-indigo-500:focus {
   --tw-ring-opacity: 1;
   --tw-ring-color: rgb(99 102 241 / var(--tw-ring-opacity));
 }
-.focus\\:ring-offset-2:focus{
+.focus\\:ring-offset-2:focus {
   --tw-ring-offset-width: 2px;
 }
-.focus-visible\\:ring:focus-visible{
+.focus-visible\\:ring:focus-visible {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
-.focus-visible\\:ring-purple-500\\/75:focus-visible{
+.focus-visible\\:ring-purple-500\\/75:focus-visible {
   --tw-ring-color: rgb(168 85 247 / 0.75);
 }
-.disabled\\:cursor-not-allowed:disabled{
+.disabled\\:cursor-not-allowed:disabled {
   cursor: not-allowed;
 }
-.disabled\\:opacity-40:disabled{
+.disabled\\:opacity-40:disabled {
   opacity: 0.4;
 }
-@media (prefers-reduced-motion: reduce){
-  @keyframes spin{
-    to{
+@media (prefers-reduced-motion: reduce) {
+  @keyframes spin {
+    to {
       transform: rotate(360deg);
     }
   }
-  .motion-reduce\\:animate-\\[spin_1\\.5s_linear_infinite\\]{
+  .motion-reduce\\:animate-\\[spin_1\\.5s_linear_infinite\\] {
     animation: spin 1.5s linear infinite;
   }
 }
-.dark\\:border-f1f5f8\\/10:is(.dark *){
+.dark\\:border-f1f5f8\\/10:is(.dark *) {
   border-color: rgb(241 245 248 / 0.1);
 }
-.dark\\:bg-0d151d:is(.dark *){
+.dark\\:bg-0d151d:is(.dark *) {
   --tw-bg-opacity: 1;
   background-color: rgb(13 21 29 / var(--tw-bg-opacity));
 }
-.dark\\:bg-white:is(.dark *){
+.dark\\:bg-white:is(.dark *) {
   --tw-bg-opacity: 1;
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
-.dark\\:text-0d151d:is(.dark *){
+.dark\\:text-0d151d:is(.dark *) {
   --tw-text-opacity: 1;
   color: rgb(13 21 29 / var(--tw-text-opacity));
 }
-.dark\\:text-9eafc0:is(.dark *){
+.dark\\:text-9eafc0:is(.dark *) {
   --tw-text-opacity: 1;
   color: rgb(158 175 192 / var(--tw-text-opacity));
 }
-.dark\\:text-white:is(.dark *){
+.dark\\:text-white:is(.dark *) {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
-@media (min-width: 768px){
-  .md\\:mt-2{
+@media (min-width: 768px) {
+  .md\\:mt-2 {
     margin-top: 8px;
   }
-  .md\\:hidden{
+  .md\\:hidden {
     display: none;
   }
-  .md\\:min-h-\\[35rem\\]{
+  .md\\:min-h-\\[35rem\\] {
     min-height: 35rem;
   }
-  .md\\:max-w-md{
+  .md\\:max-w-md {
     max-width: 448px;
   }
-  .md\\:items-center{
+  .md\\:items-center {
     align-items: center;
   }
-  .md\\:overflow-y-auto{
+  .md\\:overflow-y-auto {
     overflow-y: auto;
   }
-  .md\\:rounded-2xl{
-    border-radius: 1rem;
+  .md\\:rounded-\\[24px\\] {
+    border-radius: 24px;
   }
-  .md\\:rounded-b-2xl{
+  .md\\:rounded-b-2xl {
     border-bottom-right-radius: 1rem;
     border-bottom-left-radius: 1rem;
   }
-  .md\\:p-4{
+  .md\\:p-4 {
     padding: 16px;
   }
 }
@@ -1187,12 +1347,30 @@ import { jsx } from "react/jsx-runtime";
 var Styles = () => /* @__PURE__ */ jsx("style", { children: styles_default });
 var Styles_default = Styles;
 
+// src/components/IDKitWidget/ShadowHost.tsx
+import ReactDOM from "react-dom";
+import { useState as useState2, useCallback } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var ShadowHost = ({ id, children, mode = "open", delegatesFocus = false }) => {
+  const [shadowRoot, setShadowRoot] = useState2(null);
+  const hostRef = useCallback(
+    (node) => {
+      if (node) {
+        const root = node.shadowRoot ?? node.attachShadow({ mode, delegatesFocus });
+        setShadowRoot(root);
+      }
+    },
+    [mode, delegatesFocus]
+  );
+  return /* @__PURE__ */ jsx2("div", { ref: hostRef, id, children: shadowRoot && ReactDOM.createPortal(children, shadowRoot) });
+};
+
 // src/components/IDKitWidget/BaseWidget.tsx
 import { shallow as shallow2 } from "zustand/shallow";
 
 // src/components/Icons/XMarkIcon.tsx
-import { jsx as jsx2 } from "react/jsx-runtime";
-var XMarkIcon = (props) => /* @__PURE__ */ jsx2("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx2(
+import { jsx as jsx3 } from "react/jsx-runtime";
+var XMarkIcon = (props) => /* @__PURE__ */ jsx3("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx3(
   "path",
   {
     strokeWidth: "1.5",
@@ -1220,51 +1398,51 @@ function clsx() {
 }
 var clsx_default = clsx;
 
+// src/components/IDKitWidget/States/ErrorState.tsx
+import { useEffect as useEffect4 } from "react";
+
 // src/components/Icons/ErrorIcon.tsx
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
-var ErrorIcon = (props) => /* @__PURE__ */ jsxs("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 100 100", children: [
-  /* @__PURE__ */ jsx3("circle", { cx: "50", cy: "50", r: "49.375", fill: "url(#a)", fillOpacity: ".65", stroke: "url(#b)", strokeWidth: "1.25" }),
-  /* @__PURE__ */ jsxs("g", { filter: "url(#c)", children: [
-    /* @__PURE__ */ jsx3("circle", { cx: "50", cy: "50", r: "35", fill: "#fff" }),
-    /* @__PURE__ */ jsx3("circle", { cx: "50", cy: "50", r: "34.432", stroke: "#FFC9AD", strokeWidth: "1.136" })
-  ] }),
-  /* @__PURE__ */ jsx3(
+import { jsx as jsx4, jsxs } from "react/jsx-runtime";
+var ErrorIcon = (props) => /* @__PURE__ */ jsxs("svg", { width: "88", height: "88", viewBox: "0 0 88 88", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+  /* @__PURE__ */ jsx4("rect", { width: "88", height: "88", rx: "44", fill: "#9BA3AE" }),
+  /* @__PURE__ */ jsx4("rect", { opacity: "0.2", width: "88", height: "88", rx: "44", fill: "url(#paint0_radial_117706_3198)" }),
+  /* @__PURE__ */ jsx4("rect", { x: "0.5", y: "0.5", width: "87", height: "87", rx: "43.5", stroke: "url(#paint1_linear_117706_3198)" }),
+  /* @__PURE__ */ jsx4(
     "path",
     {
-      stroke: "#FF4732",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: "3.75",
-      d: "m57.5 42.5-15 14.999m15 .001-15-14.999"
+      d: "M33.0146 53.9853L43.4999 43.5M53.9851 33.0147L43.4999 43.5M43.4999 43.5L33.0146 33.0147M43.4999 43.5L53.9851 53.9853",
+      stroke: "white",
+      strokeWidth: "3"
     }
   ),
   /* @__PURE__ */ jsxs("defs", { children: [
-    /* @__PURE__ */ jsxs("linearGradient", { id: "a", x1: "50", x2: "50", y1: "0", y2: "100", gradientUnits: "userSpaceOnUse", children: [
-      /* @__PURE__ */ jsx3("stop", { stopColor: "#FFA483" }),
-      /* @__PURE__ */ jsx3("stop", { offset: "1", stopColor: "#FFA483", stopOpacity: "0" })
-    ] }),
-    /* @__PURE__ */ jsxs("linearGradient", { id: "b", x1: "50", x2: "50", y1: "0", y2: "100", gradientUnits: "userSpaceOnUse", children: [
-      /* @__PURE__ */ jsx3("stop", { stopColor: "#FFA483" }),
-      /* @__PURE__ */ jsx3("stop", { offset: ".713", stopColor: "#FFA483", stopOpacity: "0" })
-    ] }),
     /* @__PURE__ */ jsxs(
-      "filter",
+      "radialGradient",
+      {
+        id: "paint0_radial_117706_3198",
+        cx: "0",
+        cy: "0",
+        r: "1",
+        gradientUnits: "userSpaceOnUse",
+        gradientTransform: "translate(20 -1.6729e-06) rotate(63.4349) scale(98.387 97.9627)",
+        children: [
+          /* @__PURE__ */ jsx4("stop", { stopColor: "white" }),
+          /* @__PURE__ */ jsx4("stop", { offset: "1", stopColor: "white", stopOpacity: "0" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "linearGradient",
       {
-        id: "c",
-        width: "77.5",
-        height: "77.5",
-        x: "11.25",
-        y: "13.125",
-        colorInterpolationFilters: "sRGB",
-        filterUnits: "userSpaceOnUse",
+        id: "paint1_linear_117706_3198",
+        x1: "44",
+        y1: "0",
+        x2: "44",
+        y2: "88",
+        gradientUnits: "userSpaceOnUse",
         children: [
-          /* @__PURE__ */ jsx3("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
-          /* @__PURE__ */ jsx3("feColorMatrix", { in: "SourceAlpha", result: "hardAlpha", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" }),
-          /* @__PURE__ */ jsx3("feOffset", { dy: "1.875" }),
-          /* @__PURE__ */ jsx3("feGaussianBlur", { stdDeviation: "1.875" }),
-          /* @__PURE__ */ jsx3("feColorMatrix", { values: "0 0 0 0 1 0 0 0 0 0.788235 0 0 0 0 0.678431 0 0 0 0.45 0" }),
-          /* @__PURE__ */ jsx3("feBlend", { in2: "BackgroundImageFix", result: "effect1_dropShadow_39_740" }),
-          /* @__PURE__ */ jsx3("feBlend", { in: "SourceGraphic", in2: "effect1_dropShadow_39_740", result: "shape" })
+          /* @__PURE__ */ jsx4("stop", { stopColor: "white", stopOpacity: "0.3" }),
+          /* @__PURE__ */ jsx4("stop", { offset: "1", stopColor: "white", stopOpacity: "0" })
         ]
       }
     )
@@ -1275,75 +1453,47 @@ var ErrorIcon_default = ErrorIcon;
 // src/components/IDKitWidget/States/ErrorState.tsx
 import { AppErrorCodes } from "@worldcoin/idkit-core";
 
-// src/components/Icons/ReloadIcon.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
-var ReloadIcon = (props) => /* @__PURE__ */ jsx4("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsx4(
-  "path",
-  {
-    d: "M12.3809 1.6665L13.3626 4.24214C12.3754 3.66434 11.2263 3.33317 9.99992 3.33317C6.31802 3.33317 3.33325 6.31794 3.33325 9.99984C3.33325 11.2141 3.6579 12.3526 4.22513 13.3332M7.61897 18.3332L6.63719 15.7575C7.62438 16.3353 8.77348 16.6665 9.99992 16.6665C13.6818 16.6665 16.6666 13.6817 16.6666 9.99984C16.6666 8.78555 16.3419 7.64708 15.7747 6.6665",
-    stroke: "#3C424B",
-    strokeWidth: "1.5",
-    strokeLinecap: "round",
-    strokeLinejoin: "round"
-  }
-) });
-var ReloadIcon_default = ReloadIcon;
-
 // src/components/Icons/WarningIcon.tsx
 import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
-var WarningIcon = (props) => /* @__PURE__ */ jsxs2("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 100 100", ...props, children: [
-  /* @__PURE__ */ jsx5(
-    "circle",
-    {
-      cx: "50",
-      cy: "50",
-      r: "49.375",
-      fill: "url(#warning-a)",
-      fillOpacity: ".65",
-      stroke: "url(#warning-b)",
-      strokeWidth: "1.25"
-    }
-  ),
-  /* @__PURE__ */ jsxs2("g", { filter: "url(#warning-c)", children: [
-    /* @__PURE__ */ jsx5("circle", { cx: "50", cy: "50", r: "35", fill: "#fff" }),
-    /* @__PURE__ */ jsx5("circle", { cx: "50", cy: "50", r: "34.432", stroke: "#FFE999", strokeWidth: "1.136" })
-  ] }),
+var WarningIcon = (props) => /* @__PURE__ */ jsxs2("svg", { width: "88", height: "88", viewBox: "0 0 88 88", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+  /* @__PURE__ */ jsx5("rect", { width: "88", height: "88", rx: "44", fill: "#FFAE00" }),
+  /* @__PURE__ */ jsx5("rect", { opacity: "0.2", width: "88", height: "88", rx: "44", fill: "url(#paint0_radial_117706_3182)" }),
+  /* @__PURE__ */ jsx5("rect", { x: "0.5", y: "0.5", width: "87", height: "87", rx: "43.5", stroke: "url(#paint1_linear_117706_3182)" }),
   /* @__PURE__ */ jsx5(
     "path",
     {
-      fill: "#FFB200",
-      fillRule: "evenodd",
-      d: "M47.46 40.207c1.107-1.943 3.973-1.943 5.08 0l9.59 16.834c1.076 1.888-.324 4.209-2.54 4.209H40.41c-2.216 0-3.616-2.32-2.54-4.21l9.59-16.833Zm3.79 16.043a1.25 1.25 0 1 1-2.5 0 1.25 1.25 0 0 1 2.5 0Zm-.313-10a.937.937 0 1 0-1.875 0v6.25a.938.938 0 0 0 1.875 0v-6.25Z",
-      clipRule: "evenodd"
+      d: "M64.1707 59.5415H22.8298L43.4998 22.3354L64.1707 59.5415ZM42.1208 51.3003L42.1218 54.0503H44.8992L44.8982 51.3003H42.1208ZM42.1248 46.7085H44.8748V36.6255H42.1248V46.7085Z",
+      fill: "white"
     }
   ),
   /* @__PURE__ */ jsxs2("defs", { children: [
-    /* @__PURE__ */ jsxs2("linearGradient", { id: "warning-a", x1: "50", x2: "50", y1: "0", y2: "100", gradientUnits: "userSpaceOnUse", children: [
-      /* @__PURE__ */ jsx5("stop", { stopColor: "#FFDA66" }),
-      /* @__PURE__ */ jsx5("stop", { offset: "1", stopColor: "#FFDA66", stopOpacity: "0" })
-    ] }),
-    /* @__PURE__ */ jsxs2("linearGradient", { id: "warning-b", x1: "50", x2: "50", y1: "0", y2: "100", gradientUnits: "userSpaceOnUse", children: [
-      /* @__PURE__ */ jsx5("stop", { stopColor: "#FFDA66" }),
-      /* @__PURE__ */ jsx5("stop", { offset: ".713", stopColor: "#FFDA66", stopOpacity: "0" })
-    ] }),
     /* @__PURE__ */ jsxs2(
-      "filter",
+      "radialGradient",
+      {
+        id: "paint0_radial_117706_3182",
+        cx: "0",
+        cy: "0",
+        r: "1",
+        gradientUnits: "userSpaceOnUse",
+        gradientTransform: "translate(20 -1.6729e-06) rotate(63.4349) scale(98.387 97.9627)",
+        children: [
+          /* @__PURE__ */ jsx5("stop", { stopColor: "white" }),
+          /* @__PURE__ */ jsx5("stop", { offset: "1", stopColor: "white", stopOpacity: "0" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs2(
+      "linearGradient",
       {
-        id: "warning-c",
-        width: "77.5",
-        height: "77.5",
-        x: "11.25",
-        y: "13.125",
-        colorInterpolationFilters: "sRGB",
-        filterUnits: "userSpaceOnUse",
+        id: "paint1_linear_117706_3182",
+        x1: "44",
+        y1: "0",
+        x2: "44",
+        y2: "88",
+        gradientUnits: "userSpaceOnUse",
         children: [
-          /* @__PURE__ */ jsx5("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
-          /* @__PURE__ */ jsx5("feColorMatrix", { in: "SourceAlpha", result: "hardAlpha", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" }),
-          /* @__PURE__ */ jsx5("feOffset", { dy: "1.875" }),
-          /* @__PURE__ */ jsx5("feGaussianBlur", { stdDeviation: "1.875" }),
-          /* @__PURE__ */ jsx5("feColorMatrix", { values: "0 0 0 0 1 0 0 0 0 0.913725 0 0 0 0 0.6 0 0 0 0.45 0" }),
-          /* @__PURE__ */ jsx5("feBlend", { in2: "BackgroundImageFix", result: "effect1_dropShadow_39_758" }),
-          /* @__PURE__ */ jsx5("feBlend", { in: "SourceGraphic", in2: "effect1_dropShadow_39_758", result: "shape" })
+          /* @__PURE__ */ jsx5("stop", { stopColor: "white", stopOpacity: "0.3" }),
+          /* @__PURE__ */ jsx5("stop", { offset: "1", stopColor: "white", stopOpacity: "0" })
         ]
       }
     )
@@ -1366,39 +1516,35 @@ var ERROR_MESSAGES = {
     "You have already verified the maximum number of times for this action."
   ),
   [AppErrorCodes.CredentialUnavailable]: __("It seems you do not have the verification level required by this app."),
-  [AppErrorCodes.MalformedRequest]: __(
-    "There was a problem with this request. Please try again or contact the app owner."
-  ),
   [AppErrorCodes.InvalidNetwork]: __(
     "Invalid network. If you are the app owner, visit docs.world.org/test for details."
   ),
-  [AppErrorCodes.InclusionProofFailed]: __("There was an issue fetching your credential. Please try again."),
   [AppErrorCodes.InclusionProofPending]: __(
     "Your identity is still being registered. Please wait a few minutes and try again."
   ),
-  [AppErrorCodes.GenericError]: __("Something unexpected went wrong. Please try again."),
-  [AppErrorCodes.UnexpectedResponse]: __("Unexpected response from your wallet. Please try again."),
-  [AppErrorCodes.FailedByHostApp]: __("Verification failed by the app. Please contact the app owner for details.")
+  [AppErrorCodes.GenericError]: __("We couldn't complete your request. Please try again.")
 };
 var ErrorState = (props) => {
   const { retryFlow, errorState } = idkit_default(getParams);
   const { show_modal } = props;
+  useEffect4(() => {
+    if (errorState) {
+      console.error(`Error state: `, errorState);
+    }
+  }, [errorState]);
   return /* @__PURE__ */ jsxs3("div", { className: "space-y-8", children: [
     /* @__PURE__ */ jsx6("div", { className: clsx_default("flex items-center justify-center", show_modal ? "-mt-5" : ""), children: errorState?.code == AppErrorCodes.VerificationRejected ? /* @__PURE__ */ jsx6(WarningIcon_default, { className: "w-24" }) : /* @__PURE__ */ jsx6(ErrorIcon_default, { className: "w-24" }) }),
     /* @__PURE__ */ jsxs3("div", { children: [
       /* @__PURE__ */ jsx6("p", { className: "text-center text-2xl font-semibold text-gray-900 dark:text-white", children: (errorState?.code && ERROR_TITLES[errorState.code]) ?? ERROR_TITLES[AppErrorCodes.GenericError] }),
-      /* @__PURE__ */ jsx6("p", { className: "mx-auto mt-2 max-w-[224px] text-center text-657080", children: errorState?.message ?? ERROR_MESSAGES[errorState?.code ?? AppErrorCodes.GenericError] })
+      /* @__PURE__ */ jsx6("p", { className: "mx-auto mt-2 max-w-[224px] text-center text-657080", children: (errorState?.code && ERROR_MESSAGES[errorState.code]) ?? ERROR_MESSAGES[AppErrorCodes.GenericError] })
     ] }),
-    /* @__PURE__ */ jsx6("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxs3(
+    /* @__PURE__ */ jsx6("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx6(
       "button",
       {
         type: "button",
         onClick: retryFlow,
-        className: "inline-flex items-center rounded-lg border border-ebecef bg-transparent px-8 py-3 font-medium text-3c424b shadow-sm transition duration-300 hover:shadow focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-40",
-        children: [
-          /* @__PURE__ */ jsx6(ReloadIcon_default, { className: "mr-1.5 size-5" }),
-          __("Try Again")
-        ]
+        className: "inline-flex items-center rounded-full border-[1.2px] border-ebecef bg-transparent px-8 py-3 font-semibold text-gray-900 shadow-sm transition duration-300 hover:shadow focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-40",
+        children: __("Try Again")
       }
     ) })
   ] });
@@ -1410,60 +1556,39 @@ import * as Toast from "@radix-ui/react-toast";
 
 // src/components/Icons/CheckIcon.tsx
 import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
-var CheckIcon = (props) => /* @__PURE__ */ jsxs4("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 100 100", ...props, children: [
-  /* @__PURE__ */ jsx7(
-    "circle",
-    {
-      cx: "50",
-      cy: "50",
-      r: "49.375",
-      fill: "url(#success-a)",
-      fillOpacity: ".65",
-      stroke: "url(#success-b)",
-      strokeWidth: "1.25"
-    }
-  ),
-  /* @__PURE__ */ jsxs4("g", { filter: "url(#success-c)", children: [
-    /* @__PURE__ */ jsx7("circle", { cx: "50", cy: "50", r: "35", fill: "#fff" }),
-    /* @__PURE__ */ jsx7("circle", { cx: "50", cy: "50", r: "34.432", stroke: "#CCEBCC", strokeWidth: "1.136" })
-  ] }),
-  /* @__PURE__ */ jsx7(
-    "path",
-    {
-      stroke: "#090",
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      strokeWidth: "3.75",
-      d: "m41.25 52.5 4.375 4.375 13.125-13.75"
-    }
-  ),
+var CheckIcon = (props) => /* @__PURE__ */ jsxs4("svg", { width: "88", height: "88", viewBox: "0 0 88 88", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+  /* @__PURE__ */ jsx7("rect", { width: "88", height: "88", rx: "44", fill: "#00C230" }),
+  /* @__PURE__ */ jsx7("rect", { opacity: "0.2", width: "88", height: "88", rx: "44", fill: "url(#paint0_radial_117706_3174)" }),
+  /* @__PURE__ */ jsx7("rect", { x: "0.5", y: "0.5", width: "87", height: "87", rx: "43.5", stroke: "url(#paint1_linear_117706_3174)" }),
+  /* @__PURE__ */ jsx7("path", { d: "M29.5 45.5L37.5 53.5L57.5 33.5", stroke: "white", strokeWidth: "3" }),
   /* @__PURE__ */ jsxs4("defs", { children: [
-    /* @__PURE__ */ jsxs4("linearGradient", { id: "success-a", x1: "50", x2: "50", y1: "0", y2: "100", gradientUnits: "userSpaceOnUse", children: [
-      /* @__PURE__ */ jsx7("stop", { stopColor: "#99D699" }),
-      /* @__PURE__ */ jsx7("stop", { offset: "1", stopColor: "#99D699", stopOpacity: "0" })
-    ] }),
-    /* @__PURE__ */ jsxs4("linearGradient", { id: "success-b", x1: "50", x2: "50", y1: "0", y2: "100", gradientUnits: "userSpaceOnUse", children: [
-      /* @__PURE__ */ jsx7("stop", { stopColor: "#99D699" }),
-      /* @__PURE__ */ jsx7("stop", { offset: ".713", stopColor: "#99D699", stopOpacity: "0" })
-    ] }),
     /* @__PURE__ */ jsxs4(
-      "filter",
+      "radialGradient",
       {
-        id: "success-c",
-        width: "77.5",
-        height: "77.5",
-        x: "11.25",
-        y: "13.125",
-        colorInterpolationFilters: "sRGB",
-        filterUnits: "userSpaceOnUse",
+        id: "paint0_radial_117706_3174",
+        cx: "0",
+        cy: "0",
+        r: "1",
+        gradientUnits: "userSpaceOnUse",
+        gradientTransform: "translate(20 -1.6729e-06) rotate(63.4349) scale(98.387 97.9627)",
         children: [
-          /* @__PURE__ */ jsx7("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
-          /* @__PURE__ */ jsx7("feColorMatrix", { in: "SourceAlpha", result: "hardAlpha", values: "0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" }),
-          /* @__PURE__ */ jsx7("feOffset", { dy: "1.875" }),
-          /* @__PURE__ */ jsx7("feGaussianBlur", { stdDeviation: "1.875" }),
-          /* @__PURE__ */ jsx7("feColorMatrix", { values: "0 0 0 0 0.8 0 0 0 0 0.921569 0 0 0 0 0.8 0 0 0 0.45 0" }),
-          /* @__PURE__ */ jsx7("feBlend", { in2: "BackgroundImageFix", result: "effect1_dropShadow_39_712" }),
-          /* @__PURE__ */ jsx7("feBlend", { in: "SourceGraphic", in2: "effect1_dropShadow_39_712", result: "shape" })
+          /* @__PURE__ */ jsx7("stop", { stopColor: "white" }),
+          /* @__PURE__ */ jsx7("stop", { offset: "1", stopColor: "white", stopOpacity: "0" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs4(
+      "linearGradient",
+      {
+        id: "paint1_linear_117706_3174",
+        x1: "44",
+        y1: "0",
+        x2: "44",
+        y2: "88",
+        gradientUnits: "userSpaceOnUse",
+        children: [
+          /* @__PURE__ */ jsx7("stop", { stopColor: "white", stopOpacity: "0.3" }),
+          /* @__PURE__ */ jsx7("stop", { offset: "1", stopColor: "white", stopOpacity: "0" })
         ]
       }
     )
@@ -1477,8 +1602,8 @@ var SuccessState = (props) => {
   return /* @__PURE__ */ jsxs5("div", { className: "space-y-6", children: [
     /* @__PURE__ */ jsx8("div", { className: clsx_default("flex items-center justify-center", props.show_modal ? "-mt-5" : ""), children: /* @__PURE__ */ jsx8(CheckIcon_default, { className: "w-24 text-white" }) }),
     /* @__PURE__ */ jsxs5("div", { children: [
-      /* @__PURE__ */ jsx8("p", { className: "text-center text-2xl font-semibold text-gray-900 dark:text-white", children: __("Successfully verified") }),
-      /* @__PURE__ */ jsx8("p", { className: "mx-auto mt-2 max-w-[224px] text-center text-lg text-657080", children: __("Your World ID verification was successful") })
+      /* @__PURE__ */ jsx8("p", { className: "text-center text-2xl font-semibold text-gray-900 dark:text-white", children: __("All set!") }),
+      /* @__PURE__ */ jsx8("p", { className: "mx-auto mt-2 max-w-[260px] text-center text-lg text-657080", children: __("Your World ID is now connected") })
     ] })
   ] });
 };
@@ -1486,16 +1611,16 @@ var SuccessState_default = SuccessState;
 
 // src/components/IDKitWidget/States/WorldID/QRState.tsx
 import copy from "copy-to-clipboard";
-import { useCallback, useState as useState2 } from "react";
+import { useCallback as useCallback2, useState as useState3 } from "react";
 import { AnimatePresence, motion } from "framer-motion";
 
 // src/components/Icons/WorldcoinIcon.tsx
 import { jsx as jsx9 } from "react/jsx-runtime";
-var WorldcoinIcon = (props) => /* @__PURE__ */ jsx9("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 33 32", children: /* @__PURE__ */ jsx9(
+var WorldcoinIcon = (props) => /* @__PURE__ */ jsx9("svg", { xmlns: "http://www.w3.org/2000/svg", width: "32", height: "32", viewBox: "0 0 32 32", fill: "none", ...props, children: /* @__PURE__ */ jsx9(
   "path",
   {
-    fill: "currentColor",
-    d: "M30.7195 9.77312C29.9097 7.87434 28.7647 6.17103 27.2845 4.6911C25.8044 3.21117 24.1288 2.06632 22.2298 1.25654C20.247 0.418848 18.1525 0 16.0021 0C13.8238 0 11.7293 0.418848 9.7744 1.25654C7.87537 2.06632 6.17184 3.21117 4.69171 4.6911C3.21159 6.17103 2.06659 7.87434 1.25671 9.77312C0.418903 11.7277 0 13.822 0 16C0 18.1501 0.418903 20.2443 1.25671 22.2269C2.06659 24.1257 3.21159 25.829 4.69171 27.3089C6.17184 28.7888 7.87537 29.9337 9.7744 30.7155C11.7572 31.5532 13.8517 31.9721 16.0021 31.9721C18.1525 31.9721 20.247 31.5532 22.2298 30.7155C24.1288 29.9058 25.8323 28.7609 27.3125 27.281C28.7926 25.801 29.9376 24.0977 30.7475 22.1989C31.5853 20.2164 32.0042 18.1222 32.0042 15.9721C32.0042 13.822 31.5574 11.7277 30.7195 9.77312ZM10.696 14.4921C11.3383 11.9232 13.6842 10.0524 16.4489 10.0524H27.5638C28.2899 11.4206 28.7367 12.9284 28.9043 14.4921H10.696ZM28.9043 17.5079C28.7367 19.0716 28.262 20.5794 27.5638 21.9476H16.4489C13.6842 21.9476 11.3662 20.0489 10.696 17.5079H28.9043ZM6.81415 6.81326C9.27172 4.35602 12.5392 3.01571 16.0021 3.01571C19.465 3.01571 22.7325 4.35602 25.19 6.81326C25.2738 6.89703 25.3297 6.95288 25.4134 7.03665H16.4489C14.0472 7.03665 11.8131 7.95811 10.1095 9.66143C8.76903 11.0017 7.9033 12.6771 7.62403 14.4921H3.09988C3.435 11.5881 4.71964 8.9075 6.81415 6.81326ZM16.0021 28.9843C12.5392 28.9843 9.27172 27.644 6.81415 25.1867C4.71964 23.0925 3.435 20.3839 3.09988 17.5079H7.62403C7.93123 19.3229 8.79696 20.9983 10.1095 22.3386C11.8131 24.0419 14.0472 24.9633 16.4489 24.9633H25.4134C25.3297 25.0471 25.2738 25.103 25.19 25.1867C22.7325 27.644 19.465 28.9843 16.0021 28.9843Z"
+    d: "M30.7367 9.77239C29.9301 7.86586 28.7772 6.15721 27.3084 4.68831C25.8397 3.21941 24.1275 2.06636 22.225 1.2596C20.2502 0.422405 18.1574 0 15.9962 0C13.8388 0 11.7422 0.422405 9.76742 1.2596C7.86112 2.06636 6.15268 3.21941 4.68395 4.68831C3.21522 6.15721 2.06231 7.86966 1.25565 9.77239C0.422354 11.7436 0 13.8404 0 15.9981C0 18.1558 0.422354 20.2526 1.25945 22.2276C2.06611 24.1341 3.21903 25.8428 4.68775 27.3117C6.15648 28.7806 7.86873 29.9336 9.77122 30.7404C11.746 31.5738 13.8388 32 16 32C18.1574 32 20.254 31.5776 22.2288 30.7404C24.1351 29.9336 25.8435 28.7806 27.3122 27.3117C28.781 25.8428 29.9339 24.1303 30.7405 22.2276C31.5738 20.2526 32 18.1596 32 15.9981C31.9962 13.8404 31.57 11.7436 30.7367 9.77239ZM10.6844 14.4949C11.3503 11.9377 13.679 10.0464 16.4452 10.0464H27.552C28.2673 11.4278 28.7239 12.9309 28.9027 14.4949H10.6844ZM28.9027 17.5012C28.7239 19.0653 28.2635 20.5684 27.552 21.9498H16.4452C13.6828 21.9498 11.3541 20.0585 10.6844 17.5012H28.9027ZM6.81094 6.81175C9.26516 4.35724 12.526 3.0063 15.9962 3.0063C19.4663 3.0063 22.7272 4.35724 25.1815 6.81175C25.2576 6.88786 25.3298 6.96397 25.4021 7.04008H16.4452C14.0518 7.04008 11.8031 7.97241 10.1099 9.66583C8.77812 10.9977 7.91819 12.6759 7.60999 14.4988H3.09346C3.42449 11.5952 4.71439 8.90855 6.81094 6.81175ZM15.9962 28.9937C12.526 28.9937 9.26516 27.6428 6.81094 25.1883C4.71439 23.0915 3.42449 20.4048 3.09346 17.5051H7.60999C7.91439 19.3279 8.77812 21.0061 10.1099 22.338C11.8031 24.0314 14.0518 24.9637 16.4452 24.9637H25.4059C25.3337 25.0398 25.2576 25.1159 25.1853 25.1921C22.731 27.639 19.4663 28.9937 15.9962 28.9937Z",
+    fill: "currentColor"
   }
 ) });
 var WorldcoinIcon_default = WorldcoinIcon;
@@ -1616,8 +1741,8 @@ var QRPlaceholderIcon_default = QRPlaceholderIcon;
 import { Fragment, jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
 var QRState = ({ qrData, showQR, setShowQR }) => {
   const media = useMedia_default();
-  const [copiedLink, setCopiedLink] = useState2(false);
-  const copyLink = useCallback(() => {
+  const [copiedLink, setCopiedLink] = useState3(false);
+  const copyLink = useCallback2(() => {
     copy(qrData ?? "");
     setCopiedLink(true);
     setTimeout(() => setCopiedLink(false), 2e3);
@@ -1705,10 +1830,10 @@ var QRState = ({ qrData, showQR, setShowQR }) => {
         },
         "copied"
       ) }),
-      /* @__PURE__ */ jsx11("div", { className: "relative inline-flex items-center justify-center rounded-2xl border border-f1f5f8 p-2 dark:border-f1f5f8/10", children: /* @__PURE__ */ jsx11("div", { className: "text-29343f dark:text-white", children: qrData ? (
+      /* @__PURE__ */ jsx11("div", { className: "relative inline-flex items-center justify-center rounded-2xl border border-f1f5f8 p-3 dark:border-f1f5f8/10", children: /* @__PURE__ */ jsx11("div", { className: "text-29343f dark:text-white", children: qrData ? (
         // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
-        /* @__PURE__ */ jsx11("div", { onClick: copyLink, className: "cursor-pointer", children: /* @__PURE__ */ jsx11(QRCode_default, { data: qrData, size: 244 }) })
-      ) : /* @__PURE__ */ jsx11("div", { className: "flex size-[244px] items-center justify-center", children: /* @__PURE__ */ jsx11(QRPlaceholderIcon_default, { className: "size-[244px] animate-pulse" }) }) }) })
+        /* @__PURE__ */ jsx11("div", { onClick: copyLink, className: "cursor-pointer", children: /* @__PURE__ */ jsx11(QRCode_default, { data: qrData, size: 200 }) })
+      ) : /* @__PURE__ */ jsx11("div", { className: "flex size-[200px] items-center justify-center", children: /* @__PURE__ */ jsx11(QRPlaceholderIcon_default, { className: "size-[200px] animate-pulse" }) }) }) })
     ] })
   ] });
 };
@@ -1716,15 +1841,15 @@ var QRState_default = QRState;
 
 // src/components/IDKitWidget/States/WorldIDState.tsx
 import { shallow } from "zustand/shallow";
-import { useEffect as useEffect4, useState as useState3 } from "react";
+import { useEffect as useEffect6, useState as useState4 } from "react";
 
 // src/services/wld-bridge.ts
-import { useEffect as useEffect3, useRef } from "react";
+import { useEffect as useEffect5, useRef as useRef2 } from "react";
 import { useWorldBridgeStore } from "@worldcoin/idkit-core";
 var useWorldBridge = (app_id, action, signal, bridge_url, verification_level, action_description, partner) => {
-  const ref_verification_level = useRef(verification_level);
+  const ref_verification_level = useRef2(verification_level);
   const { reset, result, connectorURI, createClient, pollForUpdates, verificationState, errorCode } = useWorldBridgeStore();
-  useEffect3(() => {
+  useEffect5(() => {
     if (!connectorURI) {
       void createClient({
         app_id,
@@ -1747,7 +1872,7 @@ var useWorldBridge = (app_id, action, signal, bridge_url, verification_level, ac
     connectorURI,
     partner
   ]);
-  useEffect3(() => {
+  useEffect5(() => {
     if (!connectorURI || result || errorCode) return;
     const interval = setInterval(() => void pollForUpdates(), 3e3);
     return () => clearInterval(interval);
@@ -1796,7 +1921,7 @@ var getOptions = (store) => ({
 });
 var WorldIDState = (props) => {
   const media = useMedia_default();
-  const [showQR, setShowQR] = useState3(false);
+  const [showQR, setShowQR] = useState4(false);
   const {
     app_id,
     action,
@@ -1818,8 +1943,8 @@ var WorldIDState = (props) => {
     action_description,
     partner
   );
-  useEffect4(() => reset, [reset]);
-  useEffect4(() => {
+  useEffect6(() => reset, [reset]);
+  useEffect6(() => {
     if (verificationState === VerificationState.Failed) {
       setStage("ERROR" /* ERROR */);
       setErrorState({ code: errorCode ?? AppErrorCodes2.GenericError });
@@ -1844,22 +1969,16 @@ var WorldIDState = (props) => {
       ),
       children: [
         /* @__PURE__ */ jsxs9("div", { className: clsx_default(!show_modal ? "hidden" : ""), children: [
-          /* @__PURE__ */ jsx13("div", { className: "mb-4 flex items-center justify-center", children: /* @__PURE__ */ jsx13(WorldcoinIcon_default, { className: "h-10 text-0d151d dark:text-white" }) }),
-          /* @__PURE__ */ jsx13("p", { className: "font-sora text-2xl font-semibold text-gray-900 dark:text-white", children: __("Verify with World ID") }),
-          /* @__PURE__ */ jsxs9("p", { className: clsx_default("mt-3 text-657080 dark:text-9eafc0 md:mt-2", { hidden: media === "mobile" }), children: [
-            "Use your camera to scan the QR code. ",
-            /* @__PURE__ */ jsx13("br", {}),
-            " ",
-            /* @__PURE__ */ jsx13("span", { className: "text-red-500", children: "Keep this window open after scanning." })
-          ] })
+          /* @__PURE__ */ jsx13("div", { className: "mb-4 flex items-center justify-center", children: /* @__PURE__ */ jsx13("div", { className: "flex size-14 items-center justify-center rounded-full border-[1.2px] border-solid border-[#EBECEF]", children: /* @__PURE__ */ jsx13(WorldcoinIcon_default, { className: "size-8 text-0d151d dark:text-white" }) }) }),
+          /* @__PURE__ */ jsx13("p", { className: "text-2xl font-semibold text-gray-900 dark:text-white", children: __("Connect your World ID") }),
+          /* @__PURE__ */ jsx13("p", { className: clsx_default("mt-3 text-657080 dark:text-9eafc0 md:mt-2", { hidden: media === "mobile" }), children: __("Use phone camera to scan the QR code") })
         ] }),
         /* @__PURE__ */ jsxs9("div", { className: "relative w-full", children: [
           verificationState === VerificationState.WaitingForApp && /* @__PURE__ */ jsxs9("div", { className: "absolute inset-0 flex flex-col items-center justify-center space-y-6", children: [
             /* @__PURE__ */ jsx13(LoadingIcon_default, { className: "size-6" }),
             /* @__PURE__ */ jsxs9("div", { children: [
-              /* @__PURE__ */ jsx13("p", { className: "font-bold text-657080", children: "Verifying" }),
-              /* @__PURE__ */ jsx13("p", { className: "text-sm text-657080", children: "Please continue in app" }),
-              /* @__PURE__ */ jsx13("p", { className: clsx_default(show_modal ? "" : "hidden", "mt-2 text-sm font-bold text-red-500"), children: "Don't close this window" })
+              /* @__PURE__ */ jsx13("p", { className: "font-medium text-657080", children: __("Connecting...") }),
+              /* @__PURE__ */ jsx13("p", { className: "text-sm font-light text-657080", children: __("Please continue in app") })
             ] })
           ] }),
           /* @__PURE__ */ jsx13(
@@ -1881,7 +2000,7 @@ var WorldIDState_default = WorldIDState;
 
 // src/components/IDKitWidget/BaseWidget.tsx
 import * as Dialog from "@radix-ui/react-dialog";
-import { Fragment as Fragment2, useEffect as useEffect5, useMemo } from "react";
+import { Fragment as Fragment2, useEffect as useEffect7, useMemo } from "react";
 import { AnimatePresence as AnimatePresence2, motion as motion2 } from "framer-motion";
 
 // src/components/IDKitWidget/States/HostAppVerificationState.tsx
@@ -1896,11 +2015,12 @@ var HostAppVerificationState_default = HostAppVerificationState;
 
 // src/components/IDKitWidget/BaseWidget.tsx
 import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
-var getParams2 = ({ open, processing, onOpenChange, stage, setStage, setOptions }) => ({
+var getParams2 = ({ open, processing, onOpenChange, stage, setStage, setOptions, setErrorState }) => ({
   stage,
   setStage,
   processing,
   setOptions,
+  setErrorState,
   isOpen: open,
   onOpenChange
 });
@@ -1912,8 +2032,8 @@ var IDKitWidget = ({
   ...config
 }) => {
   const media = useMedia_default();
-  const { isOpen, onOpenChange, stage, setOptions } = idkit_default(getParams2, shallow2);
-  useEffect5(() => {
+  const { isOpen, onOpenChange, stage, setStage, setOptions, setErrorState } = idkit_default(getParams2, shallow2);
+  useEffect7(() => {
     if (config.action === "") {
       throw new Error(__("Action cannot be an empty string."));
     }
@@ -1933,7 +2053,7 @@ var IDKitWidget = ({
         throw new Error(__("Invalid IDKitStage :stage.", { stage }));
     }
   }, [stage, show_modal]);
-  const widgetContent = /* @__PURE__ */ jsxs11(root.div, { mode: "open", id: "idkit-widget", children: [
+  const widgetContent = /* @__PURE__ */ jsxs11(ShadowHost, { mode: "open", id: "idkit-widget", children: [
     /* @__PURE__ */ jsx15(Styles_default, {}),
     /* @__PURE__ */ jsxs11(Toast.Provider, { children: [
       /* @__PURE__ */ jsx15(Toast.Viewport, { className: "flex justify-center" }),
@@ -1961,7 +2081,7 @@ var IDKitWidget = ({
   };
   return /* @__PURE__ */ jsxs11(Dialog.Root, { open: isOpen, onOpenChange, children: [
     children?.({ open: () => onOpenChange(true) }),
-    /* @__PURE__ */ jsx15(Dialog.Portal, { forceMount: true, children: /* @__PURE__ */ jsx15(Fragment2, { children: /* @__PURE__ */ jsx15(AnimatePresence2, { children: isOpen && /* @__PURE__ */ jsxs11(root.div, { mode: "open", id: "idkit-widget", children: [
+    /* @__PURE__ */ jsx15(Dialog.Portal, { forceMount: true, children: /* @__PURE__ */ jsx15(Fragment2, { children: /* @__PURE__ */ jsx15(AnimatePresence2, { children: isOpen && /* @__PURE__ */ jsxs11(ShadowHost, { mode: "open", id: "idkit-widget", children: [
       /* @__PURE__ */ jsx15(Styles_default, {}),
       /* @__PURE__ */ jsxs11("div", { id: "modal", className: "fixed z-[9999] font-sans", children: [
         /* @__PURE__ */ jsx15(Dialog.Overlay, { asChild: true, children: /* @__PURE__ */ jsx15(
@@ -1995,10 +2115,10 @@ var IDKitWidget = ({
                     animateMob: { translateY: 0 }
                   },
                   transition: { layout: { duration: 0.15 } },
-                  className: "relative z-50 flex min-h-screen w-full flex-col bg-white pt-6 shadow focus:outline-none focus-visible:ring focus-visible:ring-purple-500/75 dark:bg-0d151d md:min-h-[35rem] md:max-w-md md:rounded-2xl",
+                  className: "relative z-50 flex min-h-screen w-full flex-col bg-white pt-6 shadow focus:outline-none focus-visible:ring focus-visible:ring-purple-500/75 dark:bg-0d151d md:min-h-[35rem] md:max-w-md md:rounded-[24px]",
                   children: /* @__PURE__ */ jsxs11(Toast.Provider, { children: [
                     /* @__PURE__ */ jsx15(Toast.Viewport, { className: "flex justify-center" }),
-                    /* @__PURE__ */ jsx15("div", { className: "mx-6 mb-12 flex items-center justify-between", children: /* @__PURE__ */ jsx15(Dialog.Close, { className: "flex size-11 items-center justify-center rounded-full text-black dark:text-white", children: /* @__PURE__ */ jsx15(XMarkIcon_default, { className: "size-5" }) }) }),
+                    /* @__PURE__ */ jsx15("div", { className: "mx-6 flex items-center justify-end", children: /* @__PURE__ */ jsx15(Dialog.Close, { className: "flex size-8 items-center justify-center rounded-full border-[1.2px] border-solid border-[#EBECEF] text-black dark:text-white", children: /* @__PURE__ */ jsx15(XMarkIcon_default, { className: "size-4" }) }) }),
                     /* @__PURE__ */ jsx15("div", { className: "relative mx-6 mb-6 flex flex-1 flex-col items-center justify-center", children: StageContent }),
                     /* @__PURE__ */ jsx15("div", { className: "flex items-center justify-center border-t border-f5f5f7 p-7 md:rounded-b-2xl", children: /* @__PURE__ */ jsx15(
                       "a",
@@ -2031,7 +2151,7 @@ import { verifyCloudProof } from "@worldcoin/idkit-core/backend";
 import { VerificationLevel as VerificationLevel2, VerificationState as VerificationState3 } from "@worldcoin/idkit-core";
 
 // src/hooks/useSession.ts
-import { useEffect as useEffect6 } from "react";
+import { useEffect as useEffect8 } from "react";
 import { useShallow } from "zustand/react/shallow";
 import { VerificationState as VerificationState2 } from "@worldcoin/idkit-core";
 import { useWorldBridgeStore as useWorldBridgeStore2 } from "@worldcoin/idkit-core";
@@ -2048,12 +2168,12 @@ function useSession(config) {
       errorCode: state.errorCode
     }))
   );
-  useEffect6(() => {
+  useEffect8(() => {
     if (verificationState === VerificationState2.PreparingClient && !connectorURI) {
       void createClient(config);
     }
   }, [verificationState, connectorURI, createClient, config]);
-  useEffect6(() => {
+  useEffect8(() => {
     if (TERMINAL_STATES.includes(verificationState)) return;
     const interval = setInterval(() => {
       void pollForUpdates();