@worldcoin/idkit 1.4.3 → 2.0.1

package/build/{config-Cp9MWjvm.d.ts → config-BRFx4nLT.d.ts}

@@ -36,6 +36,10 @@ type WidgetProps = Config & {
     children?: ({ open }: {
         open: () => void;
     }) => JSX.Element;
+    show_modal?: boolean;
+    /** Whether to disable the default modal behavior. Defaults to `false`. */
+    disable_default_modal_behavior?: boolean;
+    container_id?: string;
 };
 
 export { type Config as C, IDKITStage as I, type WidgetProps as W, ConfigSource as a, type CallbackFn as b };

package/build/index.d.ts

@@ -1,4 +1,4 @@
-import { C as Config, W as WidgetProps } from './config-Cp9MWjvm.js';
+import { C as Config, W as WidgetProps } from './config-BRFx4nLT.js';
 import * as react from 'react';
 export { IErrorState, ISuccessResult, VerificationLevel } from '@worldcoin/idkit-core';
 export { solidityEncode } from '@worldcoin/idkit-core/hashing';

package/build/index.js

@@ -23,7 +23,7 @@ var useIDKit = ({ handleVerify, onSuccess } = {}) => {
 var useIDKit_default = useIDKit;
 
 // src/components/IDKitWidget/index.tsx
-import { memo as memo2 } from "react";
+import { memo } from "react";
 
 // src/components/IDKitWidget/BaseWidget.tsx
 import root from "react-shadow";
@@ -31,7 +31,13 @@ import root from "react-shadow";
 // src/hooks/useMedia.ts
 import { useEffect as useEffect2, useState } from "react";
 var useMedia = () => {
-  const [media, setMedia] = useState("desktop");
+  const getInitialState = () => {
+    if (typeof window !== "undefined") {
+      return window.matchMedia("(max-width: 768px)").matches ? "mobile" : "desktop";
+    }
+    return "desktop";
+  };
+  const [media, setMedia] = useState(getInitialState());
   useEffect2(() => {
     const mql = window.matchMedia("(max-width: 768px)");
     const handleChange = (mql2) => setMedia(mql2.matches ? "mobile" : "desktop");
@@ -45,6 +51,9 @@ var useMedia = () => {
 };
 var useMedia_default = useMedia;
 
+// src/components/IDKitWidget/BaseWidget.tsx
+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');
@@ -651,6 +660,39 @@ select{
   --tw-contain-paint:  ;
   --tw-contain-style:  ;
 }
+.container{
+  width: 100%;
+}
+@media (min-width: 414px){
+  .container{
+    max-width: 414px;
+  }
+}
+@media (min-width: 640px){
+  .container{
+    max-width: 640px;
+  }
+}
+@media (min-width: 768px){
+  .container{
+    max-width: 768px;
+  }
+}
+@media (min-width: 1024px){
+  .container{
+    max-width: 1024px;
+  }
+}
+@media (min-width: 1280px){
+  .container{
+    max-width: 1280px;
+  }
+}
+@media (min-width: 1536px){
+  .container{
+    max-width: 1536px;
+  }
+}
 .visible{
   visibility: visible;
 }
@@ -666,12 +708,12 @@ select{
 .inset-0{
   inset: 0;
 }
-.z-10{
-  z-index: 10;
-}
 .z-50{
   z-index: 50;
 }
+.z-\\[9999\\]{
+  z-index: 9999;
+}
 .mx-6{
   margin-left: 24px;
   margin-right: 24px;
@@ -716,6 +758,9 @@ select{
 .mt-4{
   margin-top: 16px;
 }
+.inline{
+  display: inline;
+}
 .flex{
   display: flex;
 }
@@ -725,6 +770,14 @@ select{
 .hidden{
   display: none;
 }
+.size-11{
+  width: 44px;
+  height: 44px;
+}
+.size-24{
+  width: 96px;
+  height: 96px;
+}
 .size-5{
   width: 20px;
   height: 20px;
@@ -740,9 +793,6 @@ select{
 .h-10{
   height: 40px;
 }
-.h-24{
-  height: 96px;
-}
 .min-h-full{
   min-height: 100%;
 }
@@ -752,9 +802,6 @@ select{
 .w-24{
   width: 96px;
 }
-.w-4{
-  width: 16px;
-}
 .w-full{
   width: 100%;
 }
@@ -798,9 +845,6 @@ select{
 .justify-between{
   justify-content: space-between;
 }
-.gap-1{
-  gap: 4px;
-}
 .space-x-2 > :not([hidden]) ~ :not([hidden]){
   --tw-space-x-reverse: 0;
   margin-right: calc(8px * var(--tw-space-x-reverse));
@@ -981,6 +1025,10 @@ select{
   --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{
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity));
@@ -1156,6 +1204,22 @@ var XMarkIcon = (props) => /* @__PURE__ */ jsx2("svg", { ...props, xmlns: "http:
 ) });
 var XMarkIcon_default = XMarkIcon;
 
+// ../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
+function r(e) {
+  var t, f, n = "";
+  if ("string" == typeof e || "number" == typeof e) n += e;
+  else if ("object" == typeof e) if (Array.isArray(e)) {
+    var o = e.length;
+    for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
+  } else for (f in e) e[f] && (n && (n += " "), n += f);
+  return n;
+}
+function clsx() {
+  for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
+  return n;
+}
+var clsx_default = clsx;
+
 // 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: [
@@ -1316,10 +1380,11 @@ var ERROR_MESSAGES = {
   [AppErrorCodes.UnexpectedResponse]: __("Unexpected response from your wallet. Please try again."),
   [AppErrorCodes.FailedByHostApp]: __("Verification failed by the app. Please contact the app owner for details.")
 };
-var ErrorState = () => {
+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: "-mt-5 flex items-center justify-center", children: errorState?.code == AppErrorCodes.VerificationRejected ? /* @__PURE__ */ jsx6(WarningIcon_default, { className: "w-24" }) : /* @__PURE__ */ jsx6(ErrorIcon_default, { className: "w-24" }) }),
+    /* @__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] })
@@ -1408,9 +1473,9 @@ var CheckIcon_default = CheckIcon;
 
 // src/components/IDKitWidget/States/SuccessState.tsx
 import { jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
-var SuccessState = () => {
+var SuccessState = (props) => {
   return /* @__PURE__ */ jsxs5("div", { className: "space-y-6", children: [
-    /* @__PURE__ */ jsx8("div", { className: "-mt-5 flex items-center justify-center", children: /* @__PURE__ */ jsx8(CheckIcon_default, { className: "w-24 text-white" }) }),
+    /* @__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") })
@@ -1419,22 +1484,6 @@ var SuccessState = () => {
 };
 var SuccessState_default = SuccessState;
 
-// ../../node_modules/.pnpm/clsx@2.1.1/node_modules/clsx/dist/clsx.mjs
-function r(e) {
-  var t, f, n = "";
-  if ("string" == typeof e || "number" == typeof e) n += e;
-  else if ("object" == typeof e) if (Array.isArray(e)) {
-    var o = e.length;
-    for (t = 0; t < o; t++) e[t] && (f = r(e[t])) && (n && (n += " "), n += f);
-  } else for (f in e) e[f] && (n && (n += " "), n += f);
-  return n;
-}
-function clsx() {
-  for (var e, t, f = 0, n = "", o = arguments.length; f < o; f++) (e = arguments[f]) && (t = r(e)) && (n && (n += " "), n += t);
-  return n;
-}
-var clsx_default = clsx;
-
 // src/components/IDKitWidget/States/WorldID/QRState.tsx
 import copy from "copy-to-clipboard";
 import { useCallback, useState as useState2 } from "react";
@@ -1745,7 +1794,8 @@ var getOptions = (store) => ({
   action_description: store.action_description,
   partner: store.partner
 });
-var WorldIDState = () => {
+var WorldIDState = (props) => {
+  const media = useMedia_default();
   const [showQR, setShowQR] = useState3(false);
   const {
     app_id,
@@ -1775,10 +1825,8 @@ var WorldIDState = () => {
       setErrorState({ code: errorCode ?? AppErrorCodes2.GenericError });
     }
     if (result) {
-      if (verification_level == VerificationLevel.Orb && result.verification_level == VerificationLevel.Device) {
-        console.error(
-          "Credential type received from wallet does not match configured credential_types. This should only happen when manually selecting disallowed credentials in the Worldcoin Simulator."
-        );
+      if (verification_level === VerificationLevel.Orb && result.verification_level === VerificationLevel.Device) {
+        console.error("Credential type received from wallet does not match configured credential_types.");
         setStage("ERROR" /* ERROR */);
         setErrorState({ code: AppErrorCodes2.CredentialUnavailable });
         return;
@@ -1786,29 +1834,43 @@ var WorldIDState = () => {
       return handleVerify(result);
     }
   }, [result, handleVerify, verificationState, setStage, errorCode, setErrorState, verification_level]);
-  return /* @__PURE__ */ jsxs9("div", { className: clsx_default("-mt-6 space-y-5", { "space-y-10": !showQR }), children: [
-    /* @__PURE__ */ jsxs9("div", { 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: "text-center font-sora text-2xl font-semibold text-gray-900 dark:text-white", children: __("Verify with World ID") }),
-      /* @__PURE__ */ jsx13("p", { className: "mt-3 text-center text-657080 dark:text-9eafc0 md:mt-2", children: "Please use your World App to scan the QR code" })
-    ] }),
-    /* @__PURE__ */ jsxs9("div", { className: "relative", 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" })
+  const { show_modal } = props;
+  return /* @__PURE__ */ jsxs9(
+    "div",
+    {
+      className: clsx_default(
+        "flex flex-col items-center text-center",
+        show_modal ? showQR ? "-mt-6 space-y-5 " : "-mt-6 space-y-10 " : ""
+      ),
+      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__ */ jsx13("p", { className: clsx_default("mt-3 text-657080 dark:text-9eafc0 md:mt-2", { hidden: media === "mobile" }), children: "Please use your World App 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(
+            "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 }) })
+            }
+          )
         ] })
-      ] }),
-      /* @__PURE__ */ jsx13(
-        "div",
-        {
-          className: verificationState === VerificationState.WaitingForApp ? "opacity-40 blur-lg transition duration-500 ease-in-out" : "transition duration-500 ease-in-out",
-          children: /* @__PURE__ */ jsx13(QRState_default, { showQR, setShowQR, qrData: connectorURI })
-        }
-      )
-    ] })
-  ] });
+      ]
+    }
+  );
 };
 var WorldIDState_default = WorldIDState;
 
@@ -1818,15 +1880,14 @@ import { Fragment as Fragment2, useEffect as useEffect5, useMemo } from "react";
 import { AnimatePresence as AnimatePresence2, motion as motion2 } from "framer-motion";
 
 // src/components/IDKitWidget/States/HostAppVerificationState.tsx
-import { memo } from "react";
 import { jsx as jsx14, 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: "h-24 w-24" }) }),
+    /* @__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...") })
   ] });
 };
-var HostAppVerificationState_default = memo(HostAppVerificationState);
+var HostAppVerificationState_default = HostAppVerificationState;
 
 // src/components/IDKitWidget/BaseWidget.tsx
 import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
@@ -1838,7 +1899,13 @@ var getParams2 = ({ open, processing, onOpenChange, stage, setStage, setOptions
   isOpen: open,
   onOpenChange
 });
-var IDKitWidget = ({ children, ...config }) => {
+var IDKitWidget = ({
+  children,
+  show_modal = true,
+  container_id,
+  disable_default_modal_behavior = false,
+  ...config
+}) => {
   const media = useMedia_default();
   const { isOpen, onOpenChange, stage, setOptions } = idkit_default(getParams2, shallow2);
   useEffect5(() => {
@@ -1850,22 +1917,48 @@ var IDKitWidget = ({ children, ...config }) => {
   const StageContent = useMemo(() => {
     switch (stage) {
       case "WORLD_ID" /* WORLD_ID */:
-        return WorldIDState_default;
+        return /* @__PURE__ */ jsx15(WorldIDState_default, { show_modal });
       case "SUCCESS" /* SUCCESS */:
-        return SuccessState_default;
+        return /* @__PURE__ */ jsx15(SuccessState_default, {});
       case "ERROR" /* ERROR */:
-        return ErrorState_default;
+        return /* @__PURE__ */ jsx15(ErrorState_default, {});
       case "HOST_APP_VERIFICATION" /* HOST_APP_VERIFICATION */:
-        return HostAppVerificationState_default;
+        return /* @__PURE__ */ jsx15(HostAppVerificationState_default, {});
       default:
         throw new Error(__("Invalid IDKitStage :stage.", { stage }));
     }
-  }, [stage]);
+  }, [stage, show_modal]);
+  const widgetContent = /* @__PURE__ */ jsxs11(root.div, { mode: "open", id: "idkit-widget", children: [
+    /* @__PURE__ */ jsx15(Styles_default, {}),
+    /* @__PURE__ */ jsxs11(Toast.Provider, { children: [
+      /* @__PURE__ */ jsx15(Toast.Viewport, { className: "flex justify-center" }),
+      /* @__PURE__ */ jsx15(
+        "div",
+        {
+          id: "widget-content-inline",
+          className: "relative flex flex-col bg-white p-4 focus:outline-none dark:bg-0d151d",
+          children: StageContent
+        }
+      )
+    ] })
+  ] });
+  if (!show_modal && container_id) {
+    const containerElement = document.getElementById(container_id);
+    if (containerElement) {
+      return createPortal(widgetContent, containerElement);
+    }
+    console.warn(`Container element with id "${container_id}" not found. Rendering widget inline.`);
+  }
+  const avoidDefaultDomBehavior = (e) => {
+    if (disable_default_modal_behavior) {
+      e.preventDefault();
+    }
+  };
   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__ */ jsxs11("div", { id: "modal", className: "fixed z-10 font-sans", children: [
+      /* @__PURE__ */ jsxs11("div", { id: "modal", className: "fixed z-[9999] font-sans", children: [
         /* @__PURE__ */ jsx15(Dialog.Overlay, { asChild: true, children: /* @__PURE__ */ jsx15(
           motion2.div,
           {
@@ -1875,53 +1968,46 @@ var IDKitWidget = ({ children, ...config }) => {
             className: "fixed inset-0 bg-black/50 backdrop-blur-lg"
           }
         ) }),
-        /* @__PURE__ */ jsx15("div", { className: "fixed inset-0 z-10 overflow-y-hidden md:overflow-y-auto", children: /* @__PURE__ */ jsx15("div", { className: "flex min-h-full items-end justify-center text-center md:items-center md:p-4", children: /* @__PURE__ */ jsx15(Dialog.Content, { asChild: true, children: /* @__PURE__ */ jsx15(
-          motion2.div,
+        /* @__PURE__ */ jsx15("div", { className: "fixed inset-0 z-[9999] overflow-y-hidden md:overflow-y-auto", children: /* @__PURE__ */ jsx15("div", { className: "flex min-h-full items-end justify-center text-center md:items-center md:p-4", children: /* @__PURE__ */ jsx15(
+          Dialog.Content,
           {
-            layout: media == "mobile" ? "position" : true,
-            exit: media == "mobile" ? "initMob" : "init",
-            initial: media == "mobile" ? "initMob" : "init",
-            animate: media == "mobile" ? "animateMob" : "animate",
-            variants: {
-              init: { opacity: 0, scale: 0.9 },
-              initMob: { translateY: "100%" },
-              animate: { opacity: 1, scale: 1 },
-              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",
-            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 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: /* @__PURE__ */ jsx15(StageContent, {}) }),
-              /* @__PURE__ */ jsxs11("div", { className: "flex items-center justify-between border-t border-f5f5f7 p-7 md:rounded-b-2xl", children: [
-                /* @__PURE__ */ jsxs11(
-                  "a",
-                  {
-                    href: "https://world.org/world-id",
-                    target: "_blank",
-                    rel: "noreferrer",
-                    className: "flex items-center gap-1 text-sm text-9eafc0",
-                    children: [
-                      /* @__PURE__ */ jsx15(WorldcoinIcon_default, { className: "w-4 text-9eafc0 dark:text-white" }),
-                      /* @__PURE__ */ jsx15("span", { children: __("Powered by Worldcoin") })
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ jsx15(
-                  "a",
-                  {
-                    href: "https://developer.worldcoin.org/privacy-statement",
-                    target: "_blank",
-                    rel: "noreferrer",
-                    className: "text-sm text-9eafc0 hover:underline",
-                    children: __("Terms & Privacy")
-                  }
-                )
-              ] })
-            ] })
+            asChild: true,
+            onPointerDownOutside: avoidDefaultDomBehavior,
+            onInteractOutside: avoidDefaultDomBehavior,
+            children: /* @__PURE__ */ jsx15(
+              motion2.div,
+              {
+                layout: media == "mobile" ? "position" : true,
+                exit: media == "mobile" ? "initMob" : "init",
+                initial: media == "mobile" ? "initMob" : "init",
+                animate: media == "mobile" ? "animateMob" : "animate",
+                variants: {
+                  init: { opacity: 0, scale: 0.9 },
+                  initMob: { translateY: "100%" },
+                  animate: { opacity: 1, scale: 1 },
+                  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",
+                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(
+                    "a",
+                    {
+                      href: "https://developer.worldcoin.org/privacy-statement",
+                      target: "_blank",
+                      rel: "noreferrer",
+                      className: "text-sm text-657080 hover:underline",
+                      children: __("Terms & Privacy")
+                    }
+                  ) })
+                ] })
+              }
+            )
           }
-        ) }) }) })
+        ) }) })
       ] })
     ] }) }) }) })
   ] });
@@ -1929,7 +2015,7 @@ var IDKitWidget = ({ children, ...config }) => {
 var BaseWidget_default = IDKitWidget;
 
 // src/components/IDKitWidget/index.tsx
-var IDKitWidget_default = memo2(BaseWidget_default);
+var IDKitWidget_default = memo(BaseWidget_default);
 
 // src/index.ts
 import { VerificationLevel as VerificationLevel2 } from "@worldcoin/idkit-core";

package/build/internal.d.ts

@@ -1,7 +1,7 @@
 import * as react from 'react';
 import * as zustand_traditional from 'zustand/traditional';
 import * as zustand_vanilla from 'zustand/vanilla';
-import { I as IDKITStage, a as ConfigSource, b as CallbackFn, C as Config } from './config-Cp9MWjvm.js';
+import { I as IDKITStage, a as ConfigSource, b as CallbackFn, C as Config } from './config-BRFx4nLT.js';
 import { IDKitConfig, ISuccessResult, IErrorState } from '@worldcoin/idkit-core';
 
 type CleanWord<T> = T extends `${string}${' ' | ',' | '!' | '?' | '.' | '`'}${string}` ? never : T extends '' ? never : T;

package/package.json

@@ -6,9 +6,9 @@
     "copy-to-clipboard": "^3.3.3",
     "framer-motion": "^11.2.14",
     "qrcode": "^1.5.3",
-    "react-shadow": "^20.6.0",
+    "react-shadow": "^19.1.0",
     "zustand": "^4.5.4",
-    "@worldcoin/idkit-core": "1.4.3"
+    "@worldcoin/idkit-core": "2.0.1-rc.1"
   },
   "description": "The identity SDK. Privacy-preserving identity and proof of personhood with World ID.",
   "devDependencies": {
@@ -55,7 +55,7 @@
     "build",
     "README.md"
   ],
-  "homepage": "https://docs.world.org/id/idkit",
+  "homepage": "https://docs.worldcoin.org/id/idkit",
   "keywords": [
     "identity",
     "ID",
@@ -92,7 +92,7 @@
       ]
     }
   },
-  "version": "1.4.3",
+  "version": "2.0.1",
   "scripts": {
     "build": "npm run build:css && tsup",
     "build:css": "npx tailwindcss -i ./src/styles/styles.css -o ./build/index.css --minify",