@worldcoin/idkit 2.2.0 → 2.2.2

package/build/index.js

@@ -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 = () => {
@@ -1187,12 +1184,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",
@@ -1221,14 +1236,14 @@ function clsx() {
 var clsx_default = clsx;
 
 // src/components/Icons/ErrorIcon.tsx
-import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+import { jsx as jsx4, 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__ */ jsx4("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__ */ jsx4("circle", { cx: "50", cy: "50", r: "35", fill: "#fff" }),
+    /* @__PURE__ */ jsx4("circle", { cx: "50", cy: "50", r: "34.432", stroke: "#FFC9AD", strokeWidth: "1.136" })
   ] }),
-  /* @__PURE__ */ jsx3(
+  /* @__PURE__ */ jsx4(
     "path",
     {
       stroke: "#FF4732",
@@ -1240,12 +1255,12 @@ var ErrorIcon = (props) => /* @__PURE__ */ jsxs("svg", { ...props, xmlns: "http:
   ),
   /* @__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__ */ jsx4("stop", { stopColor: "#FFA483" }),
+      /* @__PURE__ */ jsx4("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__ */ jsx4("stop", { stopColor: "#FFA483" }),
+      /* @__PURE__ */ jsx4("stop", { offset: ".713", stopColor: "#FFA483", stopOpacity: "0" })
     ] }),
     /* @__PURE__ */ jsxs(
       "filter",
@@ -1258,13 +1273,13 @@ var ErrorIcon = (props) => /* @__PURE__ */ jsxs("svg", { ...props, xmlns: "http:
         colorInterpolationFilters: "sRGB",
         filterUnits: "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("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
+          /* @__PURE__ */ jsx4("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__ */ jsx4("feOffset", { dy: "1.875" }),
+          /* @__PURE__ */ jsx4("feGaussianBlur", { stdDeviation: "1.875" }),
+          /* @__PURE__ */ jsx4("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__ */ jsx4("feBlend", { in2: "BackgroundImageFix", result: "effect1_dropShadow_39_740" }),
+          /* @__PURE__ */ jsx4("feBlend", { in: "SourceGraphic", in2: "effect1_dropShadow_39_740", result: "shape" })
         ]
       }
     )
@@ -1276,8 +1291,8 @@ var ErrorIcon_default = ErrorIcon;
 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(
+import { jsx as jsx5 } from "react/jsx-runtime";
+var ReloadIcon = (props) => /* @__PURE__ */ jsx5("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsx5(
   "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",
@@ -1290,9 +1305,9 @@ var ReloadIcon = (props) => /* @__PURE__ */ jsx4("svg", { width: "20", height: "
 var ReloadIcon_default = ReloadIcon;
 
 // src/components/Icons/WarningIcon.tsx
-import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx as jsx6, 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(
+  /* @__PURE__ */ jsx6(
     "circle",
     {
       cx: "50",
@@ -1305,10 +1320,10 @@ var WarningIcon = (props) => /* @__PURE__ */ jsxs2("svg", { xmlns: "http://www.w
     }
   ),
   /* @__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" })
+    /* @__PURE__ */ jsx6("circle", { cx: "50", cy: "50", r: "35", fill: "#fff" }),
+    /* @__PURE__ */ jsx6("circle", { cx: "50", cy: "50", r: "34.432", stroke: "#FFE999", strokeWidth: "1.136" })
   ] }),
-  /* @__PURE__ */ jsx5(
+  /* @__PURE__ */ jsx6(
     "path",
     {
       fill: "#FFB200",
@@ -1319,12 +1334,12 @@ var WarningIcon = (props) => /* @__PURE__ */ jsxs2("svg", { xmlns: "http://www.w
   ),
   /* @__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__ */ jsx6("stop", { stopColor: "#FFDA66" }),
+      /* @__PURE__ */ jsx6("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__ */ jsx6("stop", { stopColor: "#FFDA66" }),
+      /* @__PURE__ */ jsx6("stop", { offset: ".713", stopColor: "#FFDA66", stopOpacity: "0" })
     ] }),
     /* @__PURE__ */ jsxs2(
       "filter",
@@ -1337,13 +1352,13 @@ var WarningIcon = (props) => /* @__PURE__ */ jsxs2("svg", { xmlns: "http://www.w
         colorInterpolationFilters: "sRGB",
         filterUnits: "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__ */ jsx6("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
+          /* @__PURE__ */ jsx6("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__ */ jsx6("feOffset", { dy: "1.875" }),
+          /* @__PURE__ */ jsx6("feGaussianBlur", { stdDeviation: "1.875" }),
+          /* @__PURE__ */ jsx6("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__ */ jsx6("feBlend", { in2: "BackgroundImageFix", result: "effect1_dropShadow_39_758" }),
+          /* @__PURE__ */ jsx6("feBlend", { in: "SourceGraphic", in2: "effect1_dropShadow_39_758", result: "shape" })
         ]
       }
     )
@@ -1352,7 +1367,7 @@ var WarningIcon = (props) => /* @__PURE__ */ jsxs2("svg", { xmlns: "http://www.w
 var WarningIcon_default = WarningIcon;
 
 // src/components/IDKitWidget/States/ErrorState.tsx
-import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
 var getParams = ({ retryFlow, errorState }) => ({ retryFlow, errorState });
 var ERROR_TITLES = {
   [AppErrorCodes.GenericError]: __("Something went wrong"),
@@ -1384,19 +1399,19 @@ var ErrorState = (props) => {
   const { retryFlow, errorState } = idkit_default(getParams);
   const { show_modal } = props;
   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__ */ jsx7("div", { className: clsx_default("flex items-center justify-center", show_modal ? "-mt-5" : ""), children: errorState?.code == AppErrorCodes.VerificationRejected ? /* @__PURE__ */ jsx7(WarningIcon_default, { className: "w-24" }) : /* @__PURE__ */ jsx7(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__ */ jsx7("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__ */ jsx7("p", { className: "mx-auto mt-2 max-w-[224px] text-center text-657080", children: errorState?.message ?? ERROR_MESSAGES[errorState?.code ?? AppErrorCodes.GenericError] })
     ] }),
-    /* @__PURE__ */ jsx6("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxs3(
+    /* @__PURE__ */ jsx7("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxs3(
       "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" }),
+          /* @__PURE__ */ jsx7(ReloadIcon_default, { className: "mr-1.5 size-5" }),
           __("Try Again")
         ]
       }
@@ -1409,9 +1424,9 @@ var ErrorState_default = ErrorState;
 import * as Toast from "@radix-ui/react-toast";
 
 // src/components/Icons/CheckIcon.tsx
-import { jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx8, 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(
+  /* @__PURE__ */ jsx8(
     "circle",
     {
       cx: "50",
@@ -1424,10 +1439,10 @@ var CheckIcon = (props) => /* @__PURE__ */ jsxs4("svg", { xmlns: "http://www.w3.
     }
   ),
   /* @__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__ */ jsx8("circle", { cx: "50", cy: "50", r: "35", fill: "#fff" }),
+    /* @__PURE__ */ jsx8("circle", { cx: "50", cy: "50", r: "34.432", stroke: "#CCEBCC", strokeWidth: "1.136" })
   ] }),
-  /* @__PURE__ */ jsx7(
+  /* @__PURE__ */ jsx8(
     "path",
     {
       stroke: "#090",
@@ -1439,12 +1454,12 @@ var CheckIcon = (props) => /* @__PURE__ */ jsxs4("svg", { xmlns: "http://www.w3.
   ),
   /* @__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__ */ jsx8("stop", { stopColor: "#99D699" }),
+      /* @__PURE__ */ jsx8("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__ */ jsx8("stop", { stopColor: "#99D699" }),
+      /* @__PURE__ */ jsx8("stop", { offset: ".713", stopColor: "#99D699", stopOpacity: "0" })
     ] }),
     /* @__PURE__ */ jsxs4(
       "filter",
@@ -1457,13 +1472,13 @@ var CheckIcon = (props) => /* @__PURE__ */ jsxs4("svg", { xmlns: "http://www.w3.
         colorInterpolationFilters: "sRGB",
         filterUnits: "userSpaceOnUse",
         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__ */ jsx8("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
+          /* @__PURE__ */ jsx8("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__ */ jsx8("feOffset", { dy: "1.875" }),
+          /* @__PURE__ */ jsx8("feGaussianBlur", { stdDeviation: "1.875" }),
+          /* @__PURE__ */ jsx8("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__ */ jsx8("feBlend", { in2: "BackgroundImageFix", result: "effect1_dropShadow_39_712" }),
+          /* @__PURE__ */ jsx8("feBlend", { in: "SourceGraphic", in2: "effect1_dropShadow_39_712", result: "shape" })
         ]
       }
     )
@@ -1472,13 +1487,13 @@ var CheckIcon = (props) => /* @__PURE__ */ jsxs4("svg", { xmlns: "http://www.w3.
 var CheckIcon_default = CheckIcon;
 
 // src/components/IDKitWidget/States/SuccessState.tsx
-import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 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__ */ jsx9("div", { className: clsx_default("flex items-center justify-center", props.show_modal ? "-mt-5" : ""), children: /* @__PURE__ */ jsx9(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__ */ jsx9("p", { className: "text-center text-2xl font-semibold text-gray-900 dark:text-white", children: __("Successfully verified") }),
+      /* @__PURE__ */ jsx9("p", { className: "mx-auto mt-2 max-w-[224px] text-center text-lg text-657080", children: __("Your World ID verification was successful") })
     ] })
   ] });
 };
@@ -1486,12 +1501,12 @@ 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(
+import { jsx as jsx10 } from "react/jsx-runtime";
+var WorldcoinIcon = (props) => /* @__PURE__ */ jsx10("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 33 32", children: /* @__PURE__ */ jsx10(
   "path",
   {
     fill: "currentColor",
@@ -1501,9 +1516,9 @@ var WorldcoinIcon = (props) => /* @__PURE__ */ jsx9("svg", { ...props, xmlns: "h
 var WorldcoinIcon_default = WorldcoinIcon;
 
 // src/components/Icons/QRPlaceholderIcon.tsx
-import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
 var QRPlaceholderIcon = (props) => /* @__PURE__ */ jsxs6("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 200 200", children: [
-  /* @__PURE__ */ jsx10(
+  /* @__PURE__ */ jsx11(
     "path",
     {
       fill: "#EBECEF",
@@ -1512,14 +1527,14 @@ var QRPlaceholderIcon = (props) => /* @__PURE__ */ jsxs6("svg", { ...props, xmln
       clipRule: "evenodd"
     }
   ),
-  /* @__PURE__ */ jsx10(
+  /* @__PURE__ */ jsx11(
     "path",
     {
       fill: "#EBECEF",
       d: "M197.026 200c.789 0 1.545-.309 2.103-.86.558-.55.871-1.297.871-2.076v-17.616c0-.778-.313-1.525-.871-2.076a2.996 2.996 0 0 0-2.103-.86h-5.948c-.789 0-1.545.31-2.103.86a2.918 2.918 0 0 0-.871 2.076v8.808h-11.897v-11.744h-11.896v-23.487h11.896v8.808c0 .778.314 1.525.872 2.076.557.55 1.314.86 2.102.86h5.949c.788 0 1.545-.31 2.103-.86a2.922 2.922 0 0 0 .871-2.076v-8.808h8.922c.789 0 1.545-.309 2.103-.86a2.916 2.916 0 0 0 .871-2.076v-5.872c0-.779-.313-1.525-.871-2.076a2.992 2.992 0 0 0-2.103-.86h-29.741c-.789 0-1.545.309-2.103.86a2.916 2.916 0 0 0-.871 2.076v8.808h-23.792v-11.744h8.922c.789 0 1.545-.309 2.103-.86.558-.55.871-1.297.871-2.076v-5.872c0-.778-.313-1.525-.871-2.076a2.996 2.996 0 0 0-2.103-.86h-5.948c-.789 0-1.546.31-2.103.86a2.918 2.918 0 0 0-.871 2.076v8.808H119.7c-.789 0-1.545.309-2.103.86a2.916 2.916 0 0 0-.871 2.076v5.872c0 .779.313 1.525.871 2.076.558.551 1.314.86 2.103.86h20.819v8.808c0 .778.313 1.525.871 2.076.557.55 1.314.86 2.103.86h8.922v8.808c0 .778.313 1.525.871 2.076.558.55 1.314.859 2.103.859h8.922v11.744h-20.818c-.789 0-1.546.31-2.103.86a2.916 2.916 0 0 0-.871 2.076v5.872c0 .779.313 1.526.871 2.076a2.99 2.99 0 0 0 2.103.86h17.844c.789 0 1.545-.309 2.103-.86.558-.55.871-1.297.871-2.076v-8.808h11.896v8.808c0 .779.314 1.526.872 2.076a2.99 2.99 0 0 0 2.102.86h17.845Z"
     }
   ),
-  /* @__PURE__ */ jsx10(
+  /* @__PURE__ */ jsx11(
     "path",
     {
       fill: "#EBECEF",
@@ -1528,14 +1543,14 @@ var QRPlaceholderIcon = (props) => /* @__PURE__ */ jsxs6("svg", { ...props, xmln
       clipRule: "evenodd"
     }
   ),
-  /* @__PURE__ */ jsx10(
+  /* @__PURE__ */ jsx11(
     "path",
     {
       fill: "#EBECEF",
       d: "M6.05 89.68A6.05 6.05 0 0 0 0 95.73v9.252a6.05 6.05 0 0 0 6.05 6.05h9.253a6.05 6.05 0 0 0 6.05-6.05V95.73c0-.678-.112-1.33-.318-1.94.445.105.908.16 1.385.16h27.758a6.05 6.05 0 0 0 6.05-6.05v-9.252a6.05 6.05 0 0 0-6.05-6.05H22.42a6.05 6.05 0 0 0-6.05 6.05V87.9c0 .678.112 1.33.317 1.939a6.065 6.065 0 0 0-1.385-.16H6.05Zm102.135-40.926a6.05 6.05 0 0 1 6.05-6.05h9.253a6.05 6.05 0 0 1 6.049 6.05v9.253a6.05 6.05 0 0 1-6.049 6.05h-9.253a6.05 6.05 0 0 1-6.05-6.05v-9.253ZM67.616 184.698a6.05 6.05 0 0 1 6.05-6.05h9.252c.678 0 1.33.111 1.939.317a6.064 6.064 0 0 1-.16-1.385v-9.253a6.05 6.05 0 0 1 6.05-6.049H100a6.05 6.05 0 0 1 6.05 6.049v9.253a6.05 6.05 0 0 1-6.05 6.05h-9.253c-.678 0-1.33-.112-1.938-.317.104.444.159.908.159 1.385v9.252a6.05 6.05 0 0 1-6.05 6.05h-9.253a6.05 6.05 0 0 1-6.05-6.05v-9.252Zm78.291-120.285a6.05 6.05 0 0 1 6.05-6.05h41.993a6.05 6.05 0 0 1 6.05 6.05v9.252a6.05 6.05 0 0 1-6.05 6.05h-41.993a6.05 6.05 0 0 1-6.05-6.05v-9.252ZM95.018 0a6.05 6.05 0 0 0-6.05 6.05v17.082a6.05 6.05 0 0 0 6.05 6.05h9.252a6.05 6.05 0 0 0 6.05-6.05V6.05A6.05 6.05 0 0 0 104.27 0h-9.252Z"
     }
   ),
-  /* @__PURE__ */ jsx10(
+  /* @__PURE__ */ jsx11(
     "path",
     {
       fill: "url(#a)",
@@ -1544,14 +1559,14 @@ var QRPlaceholderIcon = (props) => /* @__PURE__ */ jsxs6("svg", { ...props, xmln
       clipRule: "evenodd"
     }
   ),
-  /* @__PURE__ */ jsx10(
+  /* @__PURE__ */ jsx11(
     "path",
     {
       fill: "url(#a)",
       d: "M197.026 200c.789 0 1.545-.309 2.103-.86.558-.55.871-1.297.871-2.076v-17.616c0-.778-.313-1.525-.871-2.076a2.996 2.996 0 0 0-2.103-.86h-5.948c-.789 0-1.545.31-2.103.86a2.918 2.918 0 0 0-.871 2.076v8.808h-11.897v-11.744h-11.896v-23.487h11.896v8.808c0 .778.314 1.525.872 2.076.557.55 1.314.86 2.102.86h5.949c.788 0 1.545-.31 2.103-.86a2.922 2.922 0 0 0 .871-2.076v-8.808h8.922c.789 0 1.545-.309 2.103-.86a2.916 2.916 0 0 0 .871-2.076v-5.872c0-.779-.313-1.525-.871-2.076a2.992 2.992 0 0 0-2.103-.86h-29.741c-.789 0-1.545.309-2.103.86a2.916 2.916 0 0 0-.871 2.076v8.808h-23.792v-11.744h8.922c.789 0 1.545-.309 2.103-.86.558-.55.871-1.297.871-2.076v-5.872c0-.778-.313-1.525-.871-2.076a2.996 2.996 0 0 0-2.103-.86h-5.948c-.789 0-1.546.31-2.103.86a2.918 2.918 0 0 0-.871 2.076v8.808H119.7c-.789 0-1.545.309-2.103.86a2.916 2.916 0 0 0-.871 2.076v5.872c0 .779.313 1.525.871 2.076.558.551 1.314.86 2.103.86h20.819v8.808c0 .778.313 1.525.871 2.076.557.55 1.314.86 2.103.86h8.922v8.808c0 .778.313 1.525.871 2.076.558.55 1.314.859 2.103.859h8.922v11.744h-20.818c-.789 0-1.546.31-2.103.86a2.916 2.916 0 0 0-.871 2.076v5.872c0 .779.313 1.526.871 2.076a2.99 2.99 0 0 0 2.103.86h17.844c.789 0 1.545-.309 2.103-.86.558-.55.871-1.297.871-2.076v-8.808h11.896v8.808c0 .779.314 1.526.872 2.076a2.99 2.99 0 0 0 2.102.86h17.845Z"
     }
   ),
-  /* @__PURE__ */ jsx10(
+  /* @__PURE__ */ jsx11(
     "path",
     {
       fill: "url(#a)",
@@ -1560,7 +1575,7 @@ var QRPlaceholderIcon = (props) => /* @__PURE__ */ jsxs6("svg", { ...props, xmln
       clipRule: "evenodd"
     }
   ),
-  /* @__PURE__ */ jsx10(
+  /* @__PURE__ */ jsx11(
     "path",
     {
       fill: "url(#a)",
@@ -1569,55 +1584,55 @@ var QRPlaceholderIcon = (props) => /* @__PURE__ */ jsxs6("svg", { ...props, xmln
       clipRule: "evenodd"
     }
   ),
-  /* @__PURE__ */ jsx10(
+  /* @__PURE__ */ jsx11(
     "path",
     {
       fill: "url(#a)",
       d: "M6.05 89.68A6.05 6.05 0 0 0 0 95.73v9.252a6.05 6.05 0 0 0 6.05 6.05h9.253a6.05 6.05 0 0 0 6.05-6.05V95.73c0-.678-.112-1.33-.318-1.94.445.105.908.16 1.385.16h27.758a6.05 6.05 0 0 0 6.05-6.05v-9.252a6.05 6.05 0 0 0-6.05-6.05H22.42a6.05 6.05 0 0 0-6.05 6.05V87.9c0 .678.112 1.33.317 1.939a6.065 6.065 0 0 0-1.385-.16H6.05Z"
     }
   ),
-  /* @__PURE__ */ jsx10(
+  /* @__PURE__ */ jsx11(
     "path",
     {
       fill: "url(#a)",
       d: "M108.185 48.754a6.05 6.05 0 0 1 6.05-6.05h9.253a6.05 6.05 0 0 1 6.049 6.05v9.253a6.05 6.05 0 0 1-6.049 6.05h-9.253a6.05 6.05 0 0 1-6.05-6.05v-9.253Z"
     }
   ),
-  /* @__PURE__ */ jsx10(
+  /* @__PURE__ */ jsx11(
     "path",
     {
       fill: "url(#a)",
       d: "M67.616 184.698a6.05 6.05 0 0 1 6.05-6.05h9.252c.678 0 1.33.111 1.939.317a6.064 6.064 0 0 1-.16-1.385v-9.253a6.05 6.05 0 0 1 6.05-6.049H100a6.05 6.05 0 0 1 6.05 6.049v9.253a6.05 6.05 0 0 1-6.05 6.05h-9.253c-.678 0-1.33-.112-1.938-.317.104.444.159.908.159 1.385v9.252a6.05 6.05 0 0 1-6.05 6.05h-9.253a6.05 6.05 0 0 1-6.05-6.05v-9.252Z"
     }
   ),
-  /* @__PURE__ */ jsx10(
+  /* @__PURE__ */ jsx11(
     "path",
     {
       fill: "url(#a)",
       d: "M145.907 64.413a6.05 6.05 0 0 1 6.05-6.05h41.993a6.05 6.05 0 0 1 6.05 6.05v9.252a6.05 6.05 0 0 1-6.05 6.05h-41.993a6.05 6.05 0 0 1-6.05-6.05v-9.252Z"
     }
   ),
-  /* @__PURE__ */ jsx10(
+  /* @__PURE__ */ jsx11(
     "path",
     {
       fill: "url(#a)",
       d: "M95.018 0a6.05 6.05 0 0 0-6.05 6.05v17.082a6.05 6.05 0 0 0 6.05 6.05h9.252a6.05 6.05 0 0 0 6.05-6.05V6.05A6.05 6.05 0 0 0 104.27 0h-9.252Z"
     }
   ),
-  /* @__PURE__ */ jsx10("defs", { children: /* @__PURE__ */ jsxs6("linearGradient", { id: "a", x1: "0", x2: "200", y1: "0", y2: "200", gradientUnits: "userSpaceOnUse", children: [
-    /* @__PURE__ */ jsx10("stop", { offset: ".37", stopColor: "#fff", stopOpacity: "0" }),
-    /* @__PURE__ */ jsx10("stop", { offset: ".5", stopColor: "#fff", stopOpacity: ".85" }),
-    /* @__PURE__ */ jsx10("stop", { offset: ".63", stopColor: "#fff", stopOpacity: "0" })
+  /* @__PURE__ */ jsx11("defs", { children: /* @__PURE__ */ jsxs6("linearGradient", { id: "a", x1: "0", x2: "200", y1: "0", y2: "200", gradientUnits: "userSpaceOnUse", children: [
+    /* @__PURE__ */ jsx11("stop", { offset: ".37", stopColor: "#fff", stopOpacity: "0" }),
+    /* @__PURE__ */ jsx11("stop", { offset: ".5", stopColor: "#fff", stopOpacity: ".85" }),
+    /* @__PURE__ */ jsx11("stop", { offset: ".63", stopColor: "#fff", stopOpacity: "0" })
   ] }) })
 ] });
 var QRPlaceholderIcon_default = QRPlaceholderIcon;
 
 // src/components/IDKitWidget/States/WorldID/QRState.tsx
-import { Fragment, jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx12, 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);
@@ -1638,8 +1653,8 @@ var QRState = ({ qrData, showQR, setShowQR }) => {
             { hidden: showQR }
           ),
           children: [
-            /* @__PURE__ */ jsx11(WorldcoinIcon_default, { className: "size-5" }),
-            /* @__PURE__ */ jsx11(
+            /* @__PURE__ */ jsx12(WorldcoinIcon_default, { className: "size-5" }),
+            /* @__PURE__ */ jsx12(
               motion.span,
               {
                 className: "flex-1 text-center",
@@ -1653,11 +1668,11 @@ var QRState = ({ qrData, showQR, setShowQR }) => {
       ),
       /* @__PURE__ */ jsxs7("div", { className: clsx_default("mb-3", { "space-y-4": !showQR, hidden: media === "mobile" }), children: [
         /* @__PURE__ */ jsxs7("div", { className: clsx_default("flex items-center space-x-4 ", { hidden: showQR }), children: [
-          /* @__PURE__ */ jsx11("hr", { className: "flex-1" }),
-          /* @__PURE__ */ jsx11("span", { className: "text-xs font-medium text-9ba3ae", children: "or" }),
-          /* @__PURE__ */ jsx11("hr", { className: "flex-1" })
+          /* @__PURE__ */ jsx12("hr", { className: "flex-1" }),
+          /* @__PURE__ */ jsx12("span", { className: "text-xs font-medium text-9ba3ae", children: "or" }),
+          /* @__PURE__ */ jsx12("hr", { className: "flex-1" })
         ] }),
-        /* @__PURE__ */ jsx11(
+        /* @__PURE__ */ jsx12(
           motion.button,
           {
             className: "w-full rounded-2xl border border-ebecef p-4 text-lg font-medium text-3c424b",
@@ -1668,7 +1683,7 @@ var QRState = ({ qrData, showQR, setShowQR }) => {
       ] })
     ] }),
     (media == "desktop" || showQR) && /* @__PURE__ */ jsxs7(Fragment, { children: [
-      /* @__PURE__ */ jsx11(AnimatePresence, { children: copiedLink && /* @__PURE__ */ jsx11(
+      /* @__PURE__ */ jsx12(AnimatePresence, { children: copiedLink && /* @__PURE__ */ jsx12(
         motion.div,
         {
           className: "text-sm text-9eafc0",
@@ -1701,14 +1716,14 @@ var QRState = ({ qrData, showQR, setShowQR }) => {
               }
             }
           },
-          children: /* @__PURE__ */ jsx11("span", { className: "rounded-lg border border-f1f5f8 px-2 py-1 text-sm", children: __("QR Code copied") })
+          children: /* @__PURE__ */ jsx12("span", { className: "rounded-lg border border-f1f5f8 px-2 py-1 text-sm", children: __("QR Code copied") })
         },
         "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__ */ jsx12("div", { className: "relative inline-flex items-center justify-center rounded-2xl border border-f1f5f8 p-2 dark:border-f1f5f8/10", children: /* @__PURE__ */ jsx12("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__ */ jsx12("div", { onClick: copyLink, className: "cursor-pointer", children: /* @__PURE__ */ jsx12(QRCode_default, { data: qrData, size: 244 }) })
+      ) : /* @__PURE__ */ jsx12("div", { className: "flex size-[244px] items-center justify-center", children: /* @__PURE__ */ jsx12(QRPlaceholderIcon_default, { className: "size-[244px] animate-pulse" }) }) }) })
     ] })
   ] });
 };
@@ -1716,15 +1731,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 useEffect5, useState as useState4 } from "react";
 
 // src/services/wld-bridge.ts
-import { useEffect as useEffect3, useRef } from "react";
+import { useEffect as useEffect4, 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(() => {
+  useEffect4(() => {
     if (!connectorURI) {
       void createClient({
         app_id,
@@ -1747,7 +1762,7 @@ var useWorldBridge = (app_id, action, signal, bridge_url, verification_level, ac
     connectorURI,
     partner
   ]);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!connectorURI || result || errorCode) return;
     const interval = setInterval(() => void pollForUpdates(), 3e3);
     return () => clearInterval(interval);
@@ -1756,7 +1771,7 @@ var useWorldBridge = (app_id, action, signal, bridge_url, verification_level, ac
 };
 
 // src/components/Icons/LoadingIcon.tsx
-import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
 var LoadingIcon = ({ className, ...props }) => /* @__PURE__ */ jsxs8(
   "svg",
   {
@@ -1766,8 +1781,8 @@ var LoadingIcon = ({ className, ...props }) => /* @__PURE__ */ jsxs8(
     className: `animate-spin motion-reduce:animate-[spin_1.5s_linear_infinite] ${className}`,
     ...props,
     children: [
-      /* @__PURE__ */ jsx12("circle", { cx: "12", cy: "12", r: "10.75", stroke: "#191C20", strokeOpacity: ".16", strokeWidth: "2.5" }),
-      /* @__PURE__ */ jsx12(
+      /* @__PURE__ */ jsx13("circle", { cx: "12", cy: "12", r: "10.75", stroke: "#191C20", strokeOpacity: ".16", strokeWidth: "2.5" }),
+      /* @__PURE__ */ jsx13(
         "path",
         {
           fill: "#191C20",
@@ -1781,7 +1796,7 @@ var LoadingIcon_default = LoadingIcon;
 
 // src/components/IDKitWidget/States/WorldIDState.tsx
 import { AppErrorCodes as AppErrorCodes2, VerificationState, VerificationLevel } from "@worldcoin/idkit-core";
-import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
 var getOptions = (store) => ({
   signal: store.signal,
   app_id: store.app_id,
@@ -1796,7 +1811,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 +1833,8 @@ var WorldIDState = (props) => {
     action_description,
     partner
   );
-  useEffect4(() => reset, [reset]);
-  useEffect4(() => {
+  useEffect5(() => reset, [reset]);
+  useEffect5(() => {
     if (verificationState === VerificationState.Failed) {
       setStage("ERROR" /* ERROR */);
       setErrorState({ code: errorCode ?? AppErrorCodes2.GenericError });
@@ -1844,32 +1859,32 @@ 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__ */ jsx14("div", { className: "mb-4 flex items-center justify-center", children: /* @__PURE__ */ jsx14(WorldcoinIcon_default, { className: "h-10 text-0d151d dark:text-white" }) }),
+          /* @__PURE__ */ jsx14("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__ */ jsx14("br", {}),
             " ",
-            /* @__PURE__ */ jsx13("span", { className: "text-red-500", children: "Keep this window open after scanning." })
+            /* @__PURE__ */ jsx14("span", { className: "text-red-500", children: "Keep this window open after scanning." })
           ] })
         ] }),
         /* @__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__ */ jsx14(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__ */ jsx14("p", { className: "font-bold text-657080", children: "Verifying" }),
+              /* @__PURE__ */ jsx14("p", { className: "text-sm text-657080", children: "Please continue in app" }),
+              /* @__PURE__ */ jsx14("p", { className: clsx_default(show_modal ? "" : "hidden", "mt-2 text-sm font-bold text-red-500"), children: "Don't close this window" })
             ] })
           ] }),
-          /* @__PURE__ */ jsx13(
+          /* @__PURE__ */ jsx14(
             "div",
             {
               className: clsx_default(
                 "transition duration-500 ease-in-out",
                 verificationState === VerificationState.WaitingForApp && "opacity-40 blur-lg"
               ),
-              children: /* @__PURE__ */ jsx13("div", { className: "mx-auto", children: /* @__PURE__ */ jsx13(QRState_default, { showQR, setShowQR, qrData: connectorURI }) })
+              children: /* @__PURE__ */ jsx14("div", { className: "mx-auto", children: /* @__PURE__ */ jsx14(QRState_default, { showQR, setShowQR, qrData: connectorURI }) })
             }
           )
         ] })
@@ -1881,21 +1896,21 @@ 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 useEffect6, useMemo } from "react";
 import { AnimatePresence as AnimatePresence2, motion as motion2 } from "framer-motion";
 
 // src/components/IDKitWidget/States/HostAppVerificationState.tsx
-import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
 var HostAppVerificationState = () => {
   return /* @__PURE__ */ jsxs10("div", { className: "space-y-6", children: [
-    /* @__PURE__ */ jsx14("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx14(LoadingIcon_default, { className: "size-24" }) }),
-    /* @__PURE__ */ jsx14("div", { className: "mt-4 text-70868f", children: __("Transmitting verification to host app. Please wait...") })
+    /* @__PURE__ */ jsx15("div", { className: "flex justify-center", children: /* @__PURE__ */ jsx15(LoadingIcon_default, { className: "size-24" }) }),
+    /* @__PURE__ */ jsx15("div", { className: "mt-4 text-70868f", children: __("Transmitting verification to host app. Please wait...") })
   ] });
 };
 var HostAppVerificationState_default = HostAppVerificationState;
 
 // src/components/IDKitWidget/BaseWidget.tsx
-import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
 var getParams2 = ({ open, processing, onOpenChange, stage, setStage, setOptions }) => ({
   stage,
   setStage,
@@ -1913,7 +1928,7 @@ var IDKitWidget = ({
 }) => {
   const media = useMedia_default();
   const { isOpen, onOpenChange, stage, setOptions } = idkit_default(getParams2, shallow2);
-  useEffect5(() => {
+  useEffect6(() => {
     if (config.action === "") {
       throw new Error(__("Action cannot be an empty string."));
     }
@@ -1922,22 +1937,22 @@ var IDKitWidget = ({
   const StageContent = useMemo(() => {
     switch (stage) {
       case "WORLD_ID" /* WORLD_ID */:
-        return /* @__PURE__ */ jsx15(WorldIDState_default, { show_modal });
+        return /* @__PURE__ */ jsx16(WorldIDState_default, { show_modal });
       case "SUCCESS" /* SUCCESS */:
-        return /* @__PURE__ */ jsx15(SuccessState_default, {});
+        return /* @__PURE__ */ jsx16(SuccessState_default, {});
       case "ERROR" /* ERROR */:
-        return /* @__PURE__ */ jsx15(ErrorState_default, {});
+        return /* @__PURE__ */ jsx16(ErrorState_default, {});
       case "HOST_APP_VERIFICATION" /* HOST_APP_VERIFICATION */:
-        return /* @__PURE__ */ jsx15(HostAppVerificationState_default, {});
+        return /* @__PURE__ */ jsx16(HostAppVerificationState_default, {});
       default:
         throw new Error(__("Invalid IDKitStage :stage.", { stage }));
     }
   }, [stage, show_modal]);
-  const widgetContent = /* @__PURE__ */ jsxs11(root.div, { mode: "open", id: "idkit-widget", children: [
-    /* @__PURE__ */ jsx15(Styles_default, {}),
+  const widgetContent = /* @__PURE__ */ jsxs11(ShadowHost, { mode: "open", id: "idkit-widget", children: [
+    /* @__PURE__ */ jsx16(Styles_default, {}),
     /* @__PURE__ */ jsxs11(Toast.Provider, { children: [
-      /* @__PURE__ */ jsx15(Toast.Viewport, { className: "flex justify-center" }),
-      /* @__PURE__ */ jsx15(
+      /* @__PURE__ */ jsx16(Toast.Viewport, { className: "flex justify-center" }),
+      /* @__PURE__ */ jsx16(
         "div",
         {
           id: "widget-content-inline",
@@ -1961,10 +1976,10 @@ 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(Styles_default, {}),
+    /* @__PURE__ */ jsx16(Dialog.Portal, { forceMount: true, children: /* @__PURE__ */ jsx16(Fragment2, { children: /* @__PURE__ */ jsx16(AnimatePresence2, { children: isOpen && /* @__PURE__ */ jsxs11(ShadowHost, { mode: "open", id: "idkit-widget", children: [
+      /* @__PURE__ */ jsx16(Styles_default, {}),
       /* @__PURE__ */ jsxs11("div", { id: "modal", className: "fixed z-[9999] font-sans", children: [
-        /* @__PURE__ */ jsx15(Dialog.Overlay, { asChild: true, children: /* @__PURE__ */ jsx15(
+        /* @__PURE__ */ jsx16(Dialog.Overlay, { asChild: true, children: /* @__PURE__ */ jsx16(
           motion2.div,
           {
             initial: { opacity: 0 },
@@ -1973,15 +1988,15 @@ var IDKitWidget = ({
             className: "fixed inset-0 bg-black/50 backdrop-blur-lg"
           }
         ) }),
-        /* @__PURE__ */ jsx15("div", { className: "fixed inset-0 z-[9999] overflow-y-hidden md:overflow-y-auto", children: /* @__PURE__ */ jsxs11("div", { className: "flex min-h-full items-end justify-center text-center md:items-center md:p-4", children: [
-          /* @__PURE__ */ jsx15(Dialog.Title, {}),
-          /* @__PURE__ */ jsx15(
+        /* @__PURE__ */ jsx16("div", { className: "fixed inset-0 z-[9999] overflow-y-hidden md:overflow-y-auto", children: /* @__PURE__ */ jsxs11("div", { className: "flex min-h-full items-end justify-center text-center md:items-center md:p-4", children: [
+          /* @__PURE__ */ jsx16(Dialog.Title, {}),
+          /* @__PURE__ */ jsx16(
             Dialog.Content,
             {
               asChild: true,
               onPointerDownOutside: avoidDefaultDomBehavior,
               onInteractOutside: avoidDefaultDomBehavior,
-              children: /* @__PURE__ */ jsx15(
+              children: /* @__PURE__ */ jsx16(
                 motion2.div,
                 {
                   layout: media == "mobile" ? "position" : true,
@@ -1997,10 +2012,10 @@ var IDKitWidget = ({
                   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",
                   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: "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(
+                    /* @__PURE__ */ jsx16(Toast.Viewport, { className: "flex justify-center" }),
+                    /* @__PURE__ */ jsx16("div", { className: "mx-6 mb-12 flex items-center justify-between", children: /* @__PURE__ */ jsx16(Dialog.Close, { className: "flex size-11 items-center justify-center rounded-full text-black dark:text-white", children: /* @__PURE__ */ jsx16(XMarkIcon_default, { className: "size-5" }) }) }),
+                    /* @__PURE__ */ jsx16("div", { className: "relative mx-6 mb-6 flex flex-1 flex-col items-center justify-center", children: StageContent }),
+                    /* @__PURE__ */ jsx16("div", { className: "flex items-center justify-center border-t border-f5f5f7 p-7 md:rounded-b-2xl", children: /* @__PURE__ */ jsx16(
                       "a",
                       {
                         href: "https://developer.worldcoin.org/privacy-statement",
@@ -2031,7 +2046,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 useEffect7 } 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 +2063,12 @@ function useSession(config) {
       errorCode: state.errorCode
     }))
   );
-  useEffect6(() => {
+  useEffect7(() => {
     if (verificationState === VerificationState2.PreparingClient && !connectorURI) {
       void createClient(config);
     }
   }, [verificationState, connectorURI, createClient, config]);
-  useEffect6(() => {
+  useEffect7(() => {
     if (TERMINAL_STATES.includes(verificationState)) return;
     const interval = setInterval(() => {
       void pollForUpdates();