@worldcoin/idkit 1.0.0-alpha.7 → 1.1.0

package/build/{chunk-NDPS4MUA.js → chunk-JCPD6J62.js}

@@ -36,7 +36,6 @@ var useIDKitStore = createWithEqualityFn()(
     verification_level: DEFAULT_VERIFICATION_LEVEL,
     open: false,
     result: null,
-    theme: "light",
     errorTitle: "",
     errorDetail: "",
     autoClose: true,
@@ -86,16 +85,14 @@ var useIDKitStore = createWithEqualityFn()(
       action_description,
       bridge_url,
       autoClose,
-      theme,
       advanced
     }, source) => {
       set({
-        theme,
         signal,
         action,
-        autoClose,
         bridge_url,
         action_description,
+        autoClose: autoClose ?? true,
         app_id: advanced?.self_hosted ? SELF_HOSTED_APP_ID : app_id,
         verification_level: verification_level ?? DEFAULT_VERIFICATION_LEVEL
       });
@@ -111,7 +108,7 @@ var useIDKitStore = createWithEqualityFn()(
         () => {
           set({ stage: "SUCCESS" /* SUCCESS */, result });
           if (get().autoClose)
-            setTimeout(() => get().onOpenChange(false), 1e3);
+            setTimeout(() => get().onOpenChange(false), 2500);
         },
         (response) => {
           let errorMessage = void 0;

package/build/{config-6a355d3b.d.ts → config-71e4be16.d.ts}

@@ -17,8 +17,6 @@ declare enum ConfigSource {
 type WidgetConfig = {
     /** Whether to automatically close the widget after a successful verification. Defaults to `false`. */
     autoClose?: boolean;
-    /** The theme to apply to the widget's UI. Defaults to `light`. */
-    theme?: 'dark' | 'light';
     /** Function to trigger when verification is successful. Should receive a single parameter of type `ISuccessResult` which contains the proof details. */
     onSuccess: CallbackFn<ISuccessResult>;
     /** Called after the proof is returned from the World App, but before showing the success screen. Throwing in this screen will show the user a custom error. Used to perform additional validation when needed. */
@@ -41,4 +39,4 @@ type WidgetProps = Config & {
     }) => JSX.Element;
 };
 
-export { Config as C, IDKITStage as I, WidgetProps as W, WidgetConfig as a, ConfigSource as b, CallbackFn as c };
+export { Config as C, IDKITStage as I, WidgetProps as W, ConfigSource as a, CallbackFn as b };

package/build/index.d.ts

@@ -1,10 +1,7 @@
-import { C as Config, W as WidgetProps, a as WidgetConfig } from './config-6a355d3b.js';
-import { MotionProps } from 'framer-motion';
+import { C as Config, W as WidgetProps } from './config-71e4be16.js';
 import * as react from 'react';
-import { FC, ButtonHTMLAttributes } from 'react';
+export { IErrorState, ISuccessResult, VerificationLevel } from '@worldcoin/idkit-core';
 export { solidityEncode } from '@worldcoin/idkit-core/hashing';
-import { IDKitConfig } from '@worldcoin/idkit-core';
-export { CredentialType, IErrorState, ISuccessResult, VerificationLevel } from '@worldcoin/idkit-core';
 
 type HookConfig = Partial<Pick<Config, 'handleVerify' | 'onSuccess'>>;
 declare const useIDKit: ({ handleVerify, onSuccess }?: HookConfig) => {
@@ -12,20 +9,6 @@ declare const useIDKit: ({ handleVerify, onSuccess }?: HookConfig) => {
     setOpen: (open: boolean) => void;
 };
 
-type Props$1 = ButtonHTMLAttributes<HTMLButtonElement> & MotionProps & {
-    theme?: 'dark' | 'light';
-};
-declare const SignInButton: FC<Props$1>;
-
 declare const _default: react.NamedExoticComponent<WidgetProps>;
 
-type Props = Omit<WidgetConfig, 'autoClose' | 'handleVerify'> & Pick<IDKitConfig, 'app_id'> & {
-    nonce?: string;
-    onSuccess: (jwt: string) => void;
-    children?: ({ open }: {
-        open: () => void;
-    }) => JSX.Element;
-};
-declare const SignInWithWorldID: FC<Props>;
-
-export { Config, _default as IDKitWidget, SignInButton, SignInWithWorldID, WidgetProps, useIDKit };
+export { Config, _default as IDKitWidget, WidgetProps, useIDKit };

package/build/index.js

@@ -2,7 +2,7 @@ import {
   QRCode_default,
   __,
   idkit_default
-} from "./chunk-NDPS4MUA.js";
+} from "./chunk-JCPD6J62.js";
 
 // src/hooks/useIDKit.ts
 import { useEffect } from "react";
@@ -24,72 +24,6 @@ var useIDKit = ({ handleVerify, onSuccess } = {}) => {
 };
 var useIDKit_default = useIDKit;
 
-// src/components/SignInButton.tsx
-import { motion } from "framer-motion";
-
-// src/components/Icons/WorldcoinIcon.tsx
-import { jsx } from "react/jsx-runtime";
-var WorldcoinIcon = (props) => /* @__PURE__ */ jsx("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 33 32", children: /* @__PURE__ */ jsx(
-  "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"
-  }
-) });
-var WorldcoinIcon_default = WorldcoinIcon;
-
-// src/components/SignInButton.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
-var SignInButton = ({ style, theme = "light", ...props }) => /* @__PURE__ */ jsx2(
-  motion.button,
-  {
-    whileTap: { scale: 0.98 },
-    whileHover: { scale: 1.02 },
-    style: {
-      overflow: "hidden",
-      borderStyle: "none",
-      display: "relative",
-      padding: "1.5rem 6rem",
-      borderRadius: "0.75rem",
-      borderColor: "rgba(255, 255, 255, 0.1)",
-      borderWidth: theme == "dark" ? "1px" : "0px",
-      ...style
-    },
-    ...props,
-    children: /* @__PURE__ */ jsx2(
-      "div",
-      {
-        style: {
-          zIndex: 10,
-          inset: "1px",
-          display: "grid",
-          cursor: "pointer",
-          placeItems: "center",
-          position: "absolute",
-          borderRadius: "0.75rem",
-          backgroundColor: theme == "dark" ? "#000" : "#f2f5f9"
-        },
-        children: /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center" }, children: [
-          /* @__PURE__ */ jsx2(WorldcoinIcon_default, { style: { height: "1rem", width: "1rem" } }),
-          /* @__PURE__ */ jsx2(
-            "span",
-            {
-              style: {
-                marginLeft: "1rem",
-                fontSize: "0.875rem",
-                lineHeight: "1.25rem",
-                fontFamily: "Rubik, ui-sans-serif, system-ui, -apple-system, sans-serif"
-              },
-              children: __("Sign in with World ID")
-            }
-          )
-        ] })
-      }
-    )
-  }
-);
-var SignInButton_default = SignInButton;
-
 // src/components/IDKitWidget/index.tsx
 import { memo as memo2 } from "react";
 
@@ -773,6 +707,9 @@ select{
 .-mt-\\[2px\\]{
   margin-top: -2px;
 }
+.mb-10{
+  margin-bottom: 40px;
+}
 .mb-12{
   margin-bottom: 48px;
 }
@@ -806,9 +743,6 @@ select{
 .inline-flex{
   display: inline-flex;
 }
-.grid{
-  display: grid;
-}
 .hidden{
   display: none;
 }
@@ -842,12 +776,12 @@ select{
 .h-\\[244px\\]{
   height: 244px;
 }
-.min-h-\\[35rem\\]{
-  min-height: 35rem;
-}
 .min-h-full{
   min-height: 100%;
 }
+.min-h-screen{
+  min-height: 100vh;
+}
 .w-12{
   width: 48px;
 }
@@ -945,6 +879,11 @@ select{
   margin-right: calc(12px * var(--tw-space-x-reverse));
   margin-left: calc(12px * calc(1 - var(--tw-space-x-reverse)));
 }
+.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-x-6 > :not([hidden]) ~ :not([hidden]){
   --tw-space-x-reverse: 0;
   margin-right: calc(24px * var(--tw-space-x-reverse));
@@ -993,10 +932,6 @@ select{
 .rounded-md{
   border-radius: 0.375rem;
 }
-.rounded-t-2xl{
-  border-top-left-radius: 1rem;
-  border-top-right-radius: 1rem;
-}
 .border{
   border-width: 1px;
 }
@@ -1046,6 +981,9 @@ select{
 .p-2{
   padding: 8px;
 }
+.p-4{
+  padding: 16px;
+}
 .p-7{
   padding: 28px;
 }
@@ -1108,6 +1046,10 @@ select{
   font-size: 14px;
   line-height: 20px;
 }
+.text-xs{
+  font-size: 12px;
+  line-height: 16px;
+}
 .font-bold{
   font-weight: 700;
 }
@@ -1147,6 +1089,10 @@ select{
   --tw-text-opacity: 1;
   color: rgb(112 134 143 / var(--tw-text-opacity));
 }
+.text-9ba3ae{
+  --tw-text-opacity: 1;
+  color: rgb(155 163 174 / var(--tw-text-opacity));
+}
 .text-9eafc0{
   --tw-text-opacity: 1;
   color: rgb(158 175 192 / var(--tw-text-opacity));
@@ -1298,6 +1244,9 @@ input[type='number']::-webkit-inner-spin-button,
   .md\\:hidden{
     display: none;
   }
+  .md\\:min-h-\\[35rem\\]{
+    min-height: 35rem;
+  }
   .md\\:max-w-md{
     max-width: 448px;
   }
@@ -1307,6 +1256,9 @@ input[type='number']::-webkit-inner-spin-button,
   .md\\:overflow-y-auto{
     overflow-y: auto;
   }
+  .md\\:rounded-2xl{
+    border-radius: 1rem;
+  }
   .md\\:rounded-b-2xl{
     border-bottom-right-radius: 1rem;
     border-bottom-left-radius: 1rem;
@@ -1318,16 +1270,16 @@ input[type='number']::-webkit-inner-spin-button,
 `;
 
 // src/components/Styles.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
-var Styles = () => /* @__PURE__ */ jsx3("style", { children: styles_default });
+import { jsx } from "react/jsx-runtime";
+var Styles = () => /* @__PURE__ */ jsx("style", { children: styles_default });
 var Styles_default = Styles;
 
 // src/components/IDKitWidget/BaseWidget.tsx
 import { shallow as shallow2 } from "zustand/shallow";
 
 // src/components/Icons/XMarkIcon.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
-var XMarkIcon = (props) => /* @__PURE__ */ jsx4("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx4(
+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(
   "path",
   {
     strokeWidth: "1.5",
@@ -1340,14 +1292,14 @@ var XMarkIcon = (props) => /* @__PURE__ */ jsx4("svg", { ...props, xmlns: "http:
 var XMarkIcon_default = XMarkIcon;
 
 // src/components/Icons/ErrorIcon.tsx
-import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
-var ErrorIcon = (props) => /* @__PURE__ */ jsxs2("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 100 100", children: [
-  /* @__PURE__ */ jsx5("circle", { cx: "50", cy: "50", r: "49.375", fill: "url(#a)", fillOpacity: ".65", stroke: "url(#b)", strokeWidth: "1.25" }),
-  /* @__PURE__ */ jsxs2("g", { filter: "url(#c)", children: [
-    /* @__PURE__ */ jsx5("circle", { cx: "50", cy: "50", r: "35", fill: "#fff" }),
-    /* @__PURE__ */ jsx5("circle", { cx: "50", cy: "50", r: "34.432", stroke: "#FFC9AD", strokeWidth: "1.136" })
+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__ */ jsx5(
+  /* @__PURE__ */ jsx3(
     "path",
     {
       stroke: "#FF4732",
@@ -1357,16 +1309,16 @@ var ErrorIcon = (props) => /* @__PURE__ */ jsxs2("svg", { ...props, xmlns: "http
       d: "m57.5 42.5-15 14.999m15 .001-15-14.999"
     }
   ),
-  /* @__PURE__ */ jsxs2("defs", { children: [
-    /* @__PURE__ */ jsxs2("linearGradient", { id: "a", x1: "50", x2: "50", y1: "0", y2: "100", gradientUnits: "userSpaceOnUse", children: [
-      /* @__PURE__ */ jsx5("stop", { stopColor: "#FFA483" }),
-      /* @__PURE__ */ jsx5("stop", { offset: "1", stopColor: "#FFA483", stopOpacity: "0" })
+  /* @__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__ */ jsxs2("linearGradient", { id: "b", x1: "50", x2: "50", y1: "0", y2: "100", gradientUnits: "userSpaceOnUse", children: [
-      /* @__PURE__ */ jsx5("stop", { stopColor: "#FFA483" }),
-      /* @__PURE__ */ jsx5("stop", { offset: ".713", 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__ */ jsxs2(
+    /* @__PURE__ */ jsxs(
       "filter",
       {
         id: "c",
@@ -1377,13 +1329,13 @@ var ErrorIcon = (props) => /* @__PURE__ */ jsxs2("svg", { ...props, xmlns: "http
         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.788235 0 0 0 0 0.678431 0 0 0 0.45 0" }),
-          /* @__PURE__ */ jsx5("feBlend", { in2: "BackgroundImageFix", result: "effect1_dropShadow_39_740" }),
-          /* @__PURE__ */ jsx5("feBlend", { in: "SourceGraphic", in2: "effect1_dropShadow_39_740", result: "shape" })
+          /* @__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" })
         ]
       }
     )
@@ -1395,8 +1347,8 @@ var ErrorIcon_default = ErrorIcon;
 import { AppErrorCodes } from "@worldcoin/idkit-core";
 
 // src/components/Icons/ReloadIcon.tsx
-import { jsx as jsx6 } from "react/jsx-runtime";
-var ReloadIcon = (props) => /* @__PURE__ */ jsx6("svg", { width: "20", height: "20", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsx6(
+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",
@@ -1408,16 +1360,79 @@ var ReloadIcon = (props) => /* @__PURE__ */ jsx6("svg", { width: "20", height: "
 ) });
 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" })
+  ] }),
+  /* @__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"
+    }
+  ),
+  /* @__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",
+      {
+        id: "warning-c",
+        width: "77.5",
+        height: "77.5",
+        x: "11.25",
+        y: "13.125",
+        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" })
+        ]
+      }
+    )
+  ] })
+] });
+var WarningIcon_default = WarningIcon;
+
 // src/components/IDKitWidget/States/ErrorState.tsx
-import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
 var getParams = ({ retryFlow, errorState }) => ({ retryFlow, errorState });
 var ERROR_TITLES = {
   [AppErrorCodes.GenericError]: __("Something went wrong"),
-  [AppErrorCodes.FailedByHostApp]: __("Verification Declined")
+  [AppErrorCodes.FailedByHostApp]: __("Verification Declined"),
+  [AppErrorCodes.VerificationRejected]: __("Request cancelled")
 };
 var ERROR_MESSAGES = {
   [AppErrorCodes.ConnectionFailed]: __("Connection to your wallet failed. Please try again."),
-  [AppErrorCodes.VerificationRejected]: __("You rejected the verification request."),
+  [AppErrorCodes.VerificationRejected]: __("You\u2019ve cancelled the request in World App."),
   [AppErrorCodes.MaxVerificationsReached]: __(
     "You have already verified the maximum number of times for this action."
   ),
@@ -1432,26 +1447,26 @@ var ERROR_MESSAGES = {
   [AppErrorCodes.InclusionProofPending]: __(
     "Your identity is still being registered. Please wait a few minutes and try again."
   ),
-  [AppErrorCodes.FailedByHostApp]: __("Verification failed by the app. Please contact the app owner for details."),
+  [AppErrorCodes.GenericError]: __("Something unexpected went wrong. Please try again."),
   [AppErrorCodes.UnexpectedResponse]: __("Unexpected response from your wallet. Please try again."),
-  [AppErrorCodes.GenericError]: __("Something unexpected went wrong. Please try again.")
+  [AppErrorCodes.FailedByHostApp]: __("Verification failed by the app. Please contact the app owner for details.")
 };
 var ErrorState = () => {
   const { retryFlow, errorState } = idkit_default(getParams);
   return /* @__PURE__ */ jsxs3("div", { className: "space-y-8", children: [
-    /* @__PURE__ */ jsx7("div", { className: "-mt-5 flex items-center justify-center", children: /* @__PURE__ */ jsx7(ErrorIcon_default, { className: "w-24" }) }),
+    /* @__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__ */ jsxs3("div", { children: [
-      /* @__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-[14rem] text-center text-657080", children: errorState?.message || ERROR_MESSAGES[errorState?.code ?? AppErrorCodes.GenericError] })
+      /* @__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-[14rem] text-center text-657080", children: errorState?.message || ERROR_MESSAGES[errorState?.code ?? AppErrorCodes.GenericError] })
     ] }),
-    /* @__PURE__ */ jsx7("div", { className: "flex justify-center", children: /* @__PURE__ */ jsxs3(
+    /* @__PURE__ */ jsx6("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__ */ jsx7(ReloadIcon_default, { className: "mr-1.5 h-5 w-5" }),
+          /* @__PURE__ */ jsx6(ReloadIcon_default, { className: "mr-1.5 h-5 w-5" }),
           __("Try Again")
         ]
       }
@@ -1467,11 +1482,11 @@ import * as Toast from "@radix-ui/react-toast";
 var verified_default = "./verified-O6D4JQCX.webp";
 
 // src/components/WorldIDIcon.tsx
-import { Fragment, jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx7, jsxs as jsxs4 } from "react/jsx-runtime";
 var WorldIDIcon = ({ border, size = "sm", ...props }) => {
   const heightWidth = size === "md" ? 36 : 24;
   return /* @__PURE__ */ jsxs4(Fragment, { children: [
-    border && /* @__PURE__ */ jsx8(
+    border && /* @__PURE__ */ jsx7(
       "svg",
       {
         className: classNames(
@@ -1481,17 +1496,17 @@ var WorldIDIcon = ({ border, size = "sm", ...props }) => {
         xmlns: "http://www.w3.org/2000/svg",
         fill: "currentColor",
         viewBox: "0 0 26 26",
-        children: /* @__PURE__ */ jsx8("path", { d: "M8.382 2.244a6.938 6.938 0 0 1 9.236 0l1.626 1.451c.346.308.722.581 1.122.815l1.882 1.098a6.937 6.937 0 0 1 2.854 8.784l-.877 1.995c-.187.424-.33.866-.428 1.319l-.463 2.129a6.938 6.938 0 0 1-7.473 5.429l-2.168-.218a6.934 6.934 0 0 0-1.386 0l-2.168.218a6.938 6.938 0 0 1-7.473-5.429l-.463-2.13a6.937 6.937 0 0 0-.428-1.318l-.877-1.995a6.938 6.938 0 0 1 2.854-8.784L5.634 4.51c.4-.234.776-.507 1.122-.815l1.626-1.45Z" })
+        children: /* @__PURE__ */ jsx7("path", { d: "M8.382 2.244a6.938 6.938 0 0 1 9.236 0l1.626 1.451c.346.308.722.581 1.122.815l1.882 1.098a6.937 6.937 0 0 1 2.854 8.784l-.877 1.995c-.187.424-.33.866-.428 1.319l-.463 2.129a6.938 6.938 0 0 1-7.473 5.429l-2.168-.218a6.934 6.934 0 0 0-1.386 0l-2.168.218a6.938 6.938 0 0 1-7.473-5.429l-.463-2.13a6.937 6.937 0 0 0-.428-1.318l-.877-1.995a6.938 6.938 0 0 1 2.854-8.784L5.634 4.51c.4-.234.776-.507 1.122-.815l1.626-1.45Z" })
       }
     ),
-    /* @__PURE__ */ jsx8("img", { src: verified_default, ...props, alt: "Verified", width: heightWidth, height: heightWidth })
+    /* @__PURE__ */ jsx7("img", { src: verified_default, ...props, alt: "Verified", width: heightWidth, height: heightWidth })
   ] });
 };
 var WorldIDIcon_default = WorldIDIcon;
 
 // src/components/Icons/InfoIcon.tsx
-import { jsx as jsx9 } from "react/jsx-runtime";
-var InfoIcon = (props) => /* @__PURE__ */ jsx9("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 16 16", children: /* @__PURE__ */ jsx9(
+import { jsx as jsx8 } from "react/jsx-runtime";
+var InfoIcon = (props) => /* @__PURE__ */ jsx8("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 16 16", children: /* @__PURE__ */ jsx8(
   "path",
   {
     fill: "currentColor",
@@ -1503,20 +1518,20 @@ var InfoIcon = (props) => /* @__PURE__ */ jsx9("svg", { ...props, xmlns: "http:/
 var InfoIcon_default = InfoIcon;
 
 // src/components/IDKitWidget/States/PrivacyState.tsx
-import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
 var PrivacyState = () => {
   return /* @__PURE__ */ jsxs5("div", { className: "-mt-6 flex flex-col items-center justify-center space-y-6 font-sans text-sm", children: [
-    /* @__PURE__ */ jsx10(WorldIDIcon_default, { className: "h-12 w-12" }),
-    /* @__PURE__ */ jsx10("p", { className: "text-center text-2xl font-semibold dark:text-white", children: __("Privacy preserving to the core.") }),
+    /* @__PURE__ */ jsx9(WorldIDIcon_default, { className: "h-12 w-12" }),
+    /* @__PURE__ */ jsx9("p", { className: "text-center text-2xl font-semibold dark:text-white", children: __("Privacy preserving to the core.") }),
     /* @__PURE__ */ jsxs5("ul", { className: "text-9eafc0 mb-6 list-disc space-y-3 px-12 dark:text-white", children: [
-      /* @__PURE__ */ jsx10("li", { className: "text-left", children: __(
+      /* @__PURE__ */ jsx9("li", { className: "text-left", children: __(
         "World ID uses Zero-Knowledge Proofs to make it cryptographically impossible to track persons across applications."
       ) }),
-      /* @__PURE__ */ jsx10("li", { className: "text-left", children: __("Orb biometrics analyzed by the Orb are not stored.") }),
+      /* @__PURE__ */ jsx9("li", { className: "text-left", children: __("Orb biometrics analyzed by the Orb are not stored.") }),
       /* @__PURE__ */ jsxs5("li", { className: "text-left ", children: [
         __("Code and hardware are open source or source available on"),
         " ",
-        /* @__PURE__ */ jsx10(
+        /* @__PURE__ */ jsx9(
           "a",
           {
             href: "https://github.com/worldcoin/idkit-js",
@@ -1530,17 +1545,17 @@ var PrivacyState = () => {
       ] })
     ] }),
     /* @__PURE__ */ jsxs5("div", { className: "text-9eafc0 dark:text-9eafc0 -ml-4 flex items-center space-x-3", children: [
-      /* @__PURE__ */ jsx10(InfoIcon_default, { className: "h-4 w-4 " }),
-      /* @__PURE__ */ jsx10("p", { className: "whitespace-nowrap text-sm font-medium", children: __("Biometrics are never shared.") })
+      /* @__PURE__ */ jsx9(InfoIcon_default, { className: "h-4 w-4 " }),
+      /* @__PURE__ */ jsx9("p", { className: "whitespace-nowrap text-sm font-medium", children: __("Biometrics are never shared.") })
     ] })
   ] });
 };
 var PrivacyState_default = PrivacyState;
 
 // src/components/Icons/CheckIcon.tsx
-import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
 var CheckIcon = (props) => /* @__PURE__ */ jsxs6("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 100 100", ...props, children: [
-  /* @__PURE__ */ jsx11(
+  /* @__PURE__ */ jsx10(
     "circle",
     {
       cx: "50",
@@ -1553,10 +1568,10 @@ var CheckIcon = (props) => /* @__PURE__ */ jsxs6("svg", { xmlns: "http://www.w3.
     }
   ),
   /* @__PURE__ */ jsxs6("g", { filter: "url(#success-c)", children: [
-    /* @__PURE__ */ jsx11("circle", { cx: "50", cy: "50", r: "35", fill: "#fff" }),
-    /* @__PURE__ */ jsx11("circle", { cx: "50", cy: "50", r: "34.432", stroke: "#CCEBCC", strokeWidth: "1.136" })
+    /* @__PURE__ */ jsx10("circle", { cx: "50", cy: "50", r: "35", fill: "#fff" }),
+    /* @__PURE__ */ jsx10("circle", { cx: "50", cy: "50", r: "34.432", stroke: "#CCEBCC", strokeWidth: "1.136" })
   ] }),
-  /* @__PURE__ */ jsx11(
+  /* @__PURE__ */ jsx10(
     "path",
     {
       stroke: "#090",
@@ -1568,12 +1583,12 @@ var CheckIcon = (props) => /* @__PURE__ */ jsxs6("svg", { xmlns: "http://www.w3.
   ),
   /* @__PURE__ */ jsxs6("defs", { children: [
     /* @__PURE__ */ jsxs6("linearGradient", { id: "success-a", x1: "50", x2: "50", y1: "0", y2: "100", gradientUnits: "userSpaceOnUse", children: [
-      /* @__PURE__ */ jsx11("stop", { stopColor: "#99D699" }),
-      /* @__PURE__ */ jsx11("stop", { offset: "1", stopColor: "#99D699", stopOpacity: "0" })
+      /* @__PURE__ */ jsx10("stop", { stopColor: "#99D699" }),
+      /* @__PURE__ */ jsx10("stop", { offset: "1", stopColor: "#99D699", stopOpacity: "0" })
     ] }),
     /* @__PURE__ */ jsxs6("linearGradient", { id: "success-b", x1: "50", x2: "50", y1: "0", y2: "100", gradientUnits: "userSpaceOnUse", children: [
-      /* @__PURE__ */ jsx11("stop", { stopColor: "#99D699" }),
-      /* @__PURE__ */ jsx11("stop", { offset: ".713", stopColor: "#99D699", stopOpacity: "0" })
+      /* @__PURE__ */ jsx10("stop", { stopColor: "#99D699" }),
+      /* @__PURE__ */ jsx10("stop", { offset: ".713", stopColor: "#99D699", stopOpacity: "0" })
     ] }),
     /* @__PURE__ */ jsxs6(
       "filter",
@@ -1586,13 +1601,13 @@ var CheckIcon = (props) => /* @__PURE__ */ jsxs6("svg", { xmlns: "http://www.w3.
         colorInterpolationFilters: "sRGB",
         filterUnits: "userSpaceOnUse",
         children: [
-          /* @__PURE__ */ jsx11("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
-          /* @__PURE__ */ jsx11("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__ */ jsx11("feOffset", { dy: "1.875" }),
-          /* @__PURE__ */ jsx11("feGaussianBlur", { stdDeviation: "1.875" }),
-          /* @__PURE__ */ jsx11("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__ */ jsx11("feBlend", { in2: "BackgroundImageFix", result: "effect1_dropShadow_39_712" }),
-          /* @__PURE__ */ jsx11("feBlend", { in: "SourceGraphic", in2: "effect1_dropShadow_39_712", result: "shape" })
+          /* @__PURE__ */ jsx10("feFlood", { floodOpacity: "0", result: "BackgroundImageFix" }),
+          /* @__PURE__ */ jsx10("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__ */ jsx10("feOffset", { dy: "1.875" }),
+          /* @__PURE__ */ jsx10("feGaussianBlur", { stdDeviation: "1.875" }),
+          /* @__PURE__ */ jsx10("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__ */ jsx10("feBlend", { in2: "BackgroundImageFix", result: "effect1_dropShadow_39_712" }),
+          /* @__PURE__ */ jsx10("feBlend", { in: "SourceGraphic", in2: "effect1_dropShadow_39_712", result: "shape" })
         ]
       }
     )
@@ -1601,13 +1616,13 @@ var CheckIcon = (props) => /* @__PURE__ */ jsxs6("svg", { xmlns: "http://www.w3.
 var CheckIcon_default = CheckIcon;
 
 // src/components/IDKitWidget/States/SuccessState.tsx
-import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
 var SuccessState = () => {
   return /* @__PURE__ */ jsxs7("div", { className: "space-y-6", children: [
-    /* @__PURE__ */ jsx12("div", { className: "-mt-5 flex items-center justify-center", children: /* @__PURE__ */ jsx12(CheckIcon_default, { className: "w-24 text-white" }) }),
+    /* @__PURE__ */ jsx11("div", { className: "-mt-5 flex items-center justify-center", children: /* @__PURE__ */ jsx11(CheckIcon_default, { className: "w-24 text-white" }) }),
     /* @__PURE__ */ jsxs7("div", { children: [
-      /* @__PURE__ */ jsx12("p", { className: "text-center text-2xl font-semibold text-gray-900 dark:text-white", children: __("Successfully verified") }),
-      /* @__PURE__ */ jsx12("p", { className: "text-657080 mt-2 max-w-[14rem] text-center text-lg", children: __("Your World ID verification was successful") })
+      /* @__PURE__ */ jsx11("p", { className: "text-center text-2xl font-semibold text-gray-900 dark:text-white", children: __("Successfully verified") }),
+      /* @__PURE__ */ jsx11("p", { className: "text-657080 mt-2 max-w-[14rem] text-center text-lg", children: __("Your World ID verification was successful") })
     ] })
   ] });
 };
@@ -1616,7 +1631,18 @@ 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 { AnimatePresence, motion as motion2 } from "framer-motion";
+import { AnimatePresence, motion } from "framer-motion";
+
+// src/components/Icons/WorldcoinIcon.tsx
+import { jsx as jsx12 } from "react/jsx-runtime";
+var WorldcoinIcon = (props) => /* @__PURE__ */ jsx12("svg", { ...props, xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 33 32", children: /* @__PURE__ */ jsx12(
+  "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"
+  }
+) });
+var WorldcoinIcon_default = WorldcoinIcon;
 
 // src/components/Icons/QRPlaceholderIcon.tsx
 import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
@@ -1741,9 +1767,52 @@ var QRState = ({ qrData, showQR, setShowQR }) => {
     setTimeout(() => setCopiedLink(false), 2e3);
   }, [qrData]);
   return /* @__PURE__ */ jsxs9(Fragment2, { children: [
+    /* @__PURE__ */ jsxs9("div", { className: "mb-10 space-y-4 md:hidden", children: [
+      /* @__PURE__ */ jsxs9(
+        motion.a,
+        {
+          href: qrData ?? "",
+          whileTap: { scale: 0.95 },
+          whileHover: { scale: 1.05 },
+          transition: { layout: { duration: 0.15 } },
+          layoutId: media == "desktop" ? void 0 : "worldid-button",
+          className: classNames(
+            "flex w-full space-x-2 items-center px-4 py-4 border border-transparent font-medium rounded-2xl shadow-sm",
+            "bg-0d151d dark:bg-white text-white dark:text-0d151d"
+          ),
+          children: [
+            /* @__PURE__ */ jsx14(WorldcoinIcon_default, { className: "h-5 w-5" }),
+            /* @__PURE__ */ jsx14(
+              motion.span,
+              {
+                className: "flex-1 text-center",
+                transition: { layout: { duration: 0.15 } },
+                layoutId: media == "desktop" ? void 0 : "worldid-text",
+                children: __("Open Worldcoin App")
+              }
+            )
+          ]
+        }
+      ),
+      /* @__PURE__ */ jsxs9("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsxs9("div", { className: "flex items-center space-x-4 ", children: [
+          /* @__PURE__ */ jsx14("hr", { className: "flex-1" }),
+          /* @__PURE__ */ jsx14("span", { className: "text-xs font-medium text-9ba3ae", children: "or" }),
+          /* @__PURE__ */ jsx14("hr", { className: "flex-1" })
+        ] }),
+        /* @__PURE__ */ jsx14(
+          motion.button,
+          {
+            className: "w-full rounded-2xl border border-ebecef p-4 text-lg font-medium text-3c424b",
+            onClick: () => setShowQR((state) => !state),
+            children: showQR ? __("Hide QR Code") : __("Display QR Code")
+          }
+        )
+      ] })
+    ] }),
     (media == "desktop" || showQR) && /* @__PURE__ */ jsxs9(Fragment2, { children: [
       /* @__PURE__ */ jsx14(AnimatePresence, { children: copiedLink && /* @__PURE__ */ jsx14(
-        motion2.div,
+        motion.div,
         {
           className: "text-sm text-9eafc0",
           initial: "hidden",
@@ -1783,41 +1852,6 @@ var QRState = ({ qrData, showQR, setShowQR }) => {
         // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
         /* @__PURE__ */ jsx14("div", { onClick: copyLink, className: "cursor-pointer", children: /* @__PURE__ */ jsx14(QRCode_default, { data: qrData, size: 244 }) })
       ) : /* @__PURE__ */ jsx14("div", { className: "flex h-[244px] w-[244px] items-center justify-center", children: /* @__PURE__ */ jsx14(QRPlaceholderIcon_default, { className: "h-[244px] w-[244px] animate-pulse" }) }) }) })
-    ] }),
-    /* @__PURE__ */ jsxs9("div", { className: "space-y-4", children: [
-      /* @__PURE__ */ jsxs9(
-        motion2.a,
-        {
-          href: qrData ?? "",
-          whileTap: { scale: 0.95 },
-          whileHover: { scale: 1.05 },
-          transition: { layout: { duration: 0.15 } },
-          layoutId: media == "desktop" ? void 0 : "worldid-button",
-          className: classNames(
-            "flex w-full space-x-2 items-center px-4 py-4 border border-transparent font-medium rounded-2xl shadow-sm",
-            "bg-0d151d dark:bg-white text-white dark:text-0d151d md:hidden"
-          ),
-          children: [
-            /* @__PURE__ */ jsx14(WorldcoinIcon_default, { className: "h-5 w-5" }),
-            /* @__PURE__ */ jsx14(
-              motion2.span,
-              {
-                className: "flex-1 text-center",
-                transition: { layout: { duration: 0.15 } },
-                layoutId: media == "desktop" ? void 0 : "worldid-text",
-                children: __("Open Worldcoin App")
-              }
-            )
-          ]
-        }
-      ),
-      /* @__PURE__ */ jsxs9("div", { className: "space-x-2 md:hidden", children: [
-        /* @__PURE__ */ jsx14(motion2.button, { className: "text-sm text-9eafc0", onClick: () => setShowQR((state) => !state), children: showQR ? __("Hide QR Code") : __("Show QR Code instead") }),
-        showQR && /* @__PURE__ */ jsxs9(Fragment2, { children: [
-          /* @__PURE__ */ jsx14("span", { className: "text-9eafc0", children: "\xB7" }),
-          /* @__PURE__ */ jsx14("button", { className: "text-sm dark:text-white", onClick: copyLink, children: copiedLink ? __("Copied!") : __("Copy QR Code") })
-        ] })
-      ] })
     ] })
   ] });
 };
@@ -1893,7 +1927,6 @@ var getOptions = (store) => ({
   action_description: store.action_description
 });
 var WorldIDState = () => {
-  const media = useMedia_default();
   const [showQR, setShowQR] = useState3(false);
   const {
     app_id,
@@ -1921,7 +1954,7 @@ var WorldIDState = () => {
       setErrorState({ code: errorCode ?? AppErrorCodes2.GenericError });
     }
     if (result) {
-      if (verification_level == VerificationLevel.Orb && result.verification_level == VerificationLevel.Lite) {
+      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."
         );
@@ -1961,7 +1994,7 @@ var WorldIDState_default = WorldIDState;
 // src/components/IDKitWidget/BaseWidget.tsx
 import * as Dialog from "@radix-ui/react-dialog";
 import { Fragment as Fragment3, useEffect as useEffect5, useMemo } from "react";
-import { AnimatePresence as AnimatePresence2, motion as motion3 } from "framer-motion";
+import { AnimatePresence as AnimatePresence2, motion as motion2 } from "framer-motion";
 
 // src/components/Icons/ArrowLongLeftIcon.tsx
 import { jsx as jsx17 } from "react/jsx-runtime";
@@ -1992,9 +2025,8 @@ var HostAppVerificationState_default = memo(HostAppVerificationState);
 
 // src/components/IDKitWidget/BaseWidget.tsx
 import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
-var getParams2 = ({ open, processing, onOpenChange, stage, setStage, theme, computed, setOptions }) => ({
+var getParams2 = ({ open, processing, onOpenChange, stage, setStage, computed, setOptions }) => ({
   stage,
-  theme,
   setStage,
   processing,
   setOptions,
@@ -2003,17 +2035,8 @@ var getParams2 = ({ open, processing, onOpenChange, stage, setStage, theme, comp
   canGoBack: computed.canGoBack(stage)
 });
 var IDKitWidget = ({ children, ...config }) => {
-  const {
-    isOpen,
-    onOpenChange,
-    processing,
-    stage,
-    setStage,
-    canGoBack,
-    setOptions,
-    theme: _theme
-  } = idkit_default(getParams2, shallow2);
   const media = useMedia_default();
+  const { isOpen, onOpenChange, stage, setStage, canGoBack, setOptions } = idkit_default(getParams2, shallow2);
   useEffect5(() => {
     setOptions(config, "props" /* PROPS */);
   }, [config, setOptions]);
@@ -2037,85 +2060,78 @@ var IDKitWidget = ({ children, ...config }) => {
     children?.({ open: () => onOpenChange(true) }),
     /* @__PURE__ */ jsx19(Dialog.Portal, { forceMount: true, children: /* @__PURE__ */ jsx19(Fragment3, { children: /* @__PURE__ */ jsx19(AnimatePresence2, { children: isOpen && /* @__PURE__ */ jsxs13(root.div, { mode: "open", id: "idkit-widget", children: [
       /* @__PURE__ */ jsx19(Styles_default, {}),
-      /* @__PURE__ */ jsxs13(
-        "div",
-        {
-          id: "modal",
-          className: classNames(_theme == "dark" && "dark", "fixed z-10 font-sans"),
-          children: [
-            /* @__PURE__ */ jsx19(Dialog.Overlay, { asChild: true, children: /* @__PURE__ */ jsx19(
-              motion3.div,
-              {
-                initial: { opacity: 0 },
-                animate: { opacity: 1 },
-                exit: { opacity: 0 },
-                className: "fixed inset-0 bg-black/50 backdrop-blur-lg"
-              }
-            ) }),
-            /* @__PURE__ */ jsx19("div", { className: "fixed inset-0 z-10 overflow-y-hidden md:overflow-y-auto", children: /* @__PURE__ */ jsx19("div", { className: "flex min-h-full items-end justify-center text-center md:items-center md:p-4", children: /* @__PURE__ */ jsx19(Dialog.Content, { asChild: true, children: /* @__PURE__ */ jsx19(
-              motion3.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-[35rem] w-full flex-col rounded-t-2xl bg-white pt-6 shadow focus:outline-none focus-visible:ring focus-visible:ring-purple-500/75 dark:bg-0d151d md:max-w-md md:rounded-b-2xl",
-                children: /* @__PURE__ */ jsxs13(Toast.Provider, { children: [
-                  /* @__PURE__ */ jsx19(Toast.Viewport, { className: "flex justify-center" }),
-                  /* @__PURE__ */ jsxs13("div", { className: "mx-6 mb-12 flex items-center justify-between", children: [
-                    /* @__PURE__ */ jsx19(
-                      "button",
-                      {
-                        onClick: () => setStage("WORLD_ID" /* WORLD_ID */),
-                        disabled: !canGoBack,
-                        className: classNames(
-                          !canGoBack && "invisible pointer-events-none",
-                          "dark:bg-d3dfea/15 flex h-8 w-8 items-center justify-center rounded-full bg-gray-100 dark:text-white"
-                        ),
-                        children: /* @__PURE__ */ jsx19(ArrowLongLeftIcon_default, { className: "w-4" })
-                      }
-                    ),
-                    /* @__PURE__ */ jsx19(Dialog.Close, { className: "flex items-center justify-center rounded-full dark:text-white", children: /* @__PURE__ */ jsx19(XMarkIcon_default, { className: "h-5 w-5" }) })
-                  ] }),
-                  /* @__PURE__ */ jsx19("div", { className: "relative mx-6 mb-6 flex flex-1 flex-col items-center justify-center", children: /* @__PURE__ */ jsx19(StageContent, {}) }),
-                  /* @__PURE__ */ jsxs13("div", { className: "flex items-center justify-between border-t border-f5f5f7 p-7 md:rounded-b-2xl", children: [
-                    /* @__PURE__ */ jsxs13(
-                      "a",
-                      {
-                        href: "https://worldcoin.org/world-id",
-                        target: "_blank",
-                        rel: "noreferrer",
-                        className: "flex items-center gap-1 text-sm text-9eafc0",
-                        children: [
-                          /* @__PURE__ */ jsx19(WorldcoinIcon_default, { className: "w-4 text-9eafc0 dark:text-white" }),
-                          /* @__PURE__ */ jsx19("span", { children: __("Powered by Worldcoin") })
-                        ]
-                      }
+      /* @__PURE__ */ jsxs13("div", { id: "modal", className: "fixed z-10 font-sans", children: [
+        /* @__PURE__ */ jsx19(Dialog.Overlay, { asChild: true, children: /* @__PURE__ */ jsx19(
+          motion2.div,
+          {
+            initial: { opacity: 0 },
+            animate: { opacity: 1 },
+            exit: { opacity: 0 },
+            className: "fixed inset-0 bg-black/50 backdrop-blur-lg"
+          }
+        ) }),
+        /* @__PURE__ */ jsx19("div", { className: "fixed inset-0 z-10 overflow-y-hidden md:overflow-y-auto", children: /* @__PURE__ */ jsx19("div", { className: "flex min-h-full items-end justify-center text-center md:items-center md:p-4", children: /* @__PURE__ */ jsx19(Dialog.Content, { asChild: true, children: /* @__PURE__ */ jsx19(
+          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__ */ jsxs13(Toast.Provider, { children: [
+              /* @__PURE__ */ jsx19(Toast.Viewport, { className: "flex justify-center" }),
+              /* @__PURE__ */ jsxs13("div", { className: "mx-6 mb-12 flex items-center justify-between", children: [
+                /* @__PURE__ */ jsx19(
+                  "button",
+                  {
+                    onClick: () => setStage("WORLD_ID" /* WORLD_ID */),
+                    disabled: !canGoBack,
+                    className: classNames(
+                      !canGoBack && "invisible pointer-events-none",
+                      "dark:bg-d3dfea/15 flex h-8 w-8 items-center justify-center rounded-full bg-gray-100 dark:text-white"
                     ),
-                    /* @__PURE__ */ jsx19(
-                      "a",
-                      {
-                        href: "https://developer.worldcoin.org/privacy-statement",
-                        target: "_blank",
-                        rel: "noreferrer",
-                        className: "text-sm text-9eafc0 hover:underline",
-                        children: __("Terms & Privacy")
-                      }
-                    )
-                  ] })
-                ] })
-              }
-            ) }) }) })
-          ]
-        }
-      )
+                    children: /* @__PURE__ */ jsx19(ArrowLongLeftIcon_default, { className: "w-4" })
+                  }
+                ),
+                /* @__PURE__ */ jsx19(Dialog.Close, { className: "flex items-center justify-center rounded-full dark:text-white", children: /* @__PURE__ */ jsx19(XMarkIcon_default, { className: "h-5 w-5" }) })
+              ] }),
+              /* @__PURE__ */ jsx19("div", { className: "relative mx-6 mb-6 flex flex-1 flex-col items-center justify-center", children: /* @__PURE__ */ jsx19(StageContent, {}) }),
+              /* @__PURE__ */ jsxs13("div", { className: "flex items-center justify-between border-t border-f5f5f7 p-7 md:rounded-b-2xl", children: [
+                /* @__PURE__ */ jsxs13(
+                  "a",
+                  {
+                    href: "https://worldcoin.org/world-id",
+                    target: "_blank",
+                    rel: "noreferrer",
+                    className: "flex items-center gap-1 text-sm text-9eafc0",
+                    children: [
+                      /* @__PURE__ */ jsx19(WorldcoinIcon_default, { className: "w-4 text-9eafc0 dark:text-white" }),
+                      /* @__PURE__ */ jsx19("span", { children: __("Powered by Worldcoin") })
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsx19(
+                  "a",
+                  {
+                    href: "https://developer.worldcoin.org/privacy-statement",
+                    target: "_blank",
+                    rel: "noreferrer",
+                    className: "text-sm text-9eafc0 hover:underline",
+                    children: __("Terms & Privacy")
+                  }
+                )
+              ] })
+            ] })
+          }
+        ) }) }) })
+      ] })
     ] }) }) }) })
   ] });
 };
@@ -2125,66 +2141,10 @@ var BaseWidget_default = IDKitWidget;
 var IDKitWidget_default = memo2(BaseWidget_default);
 
 // src/index.ts
+import { VerificationLevel as VerificationLevel2 } from "@worldcoin/idkit-core";
 import { solidityEncode } from "@worldcoin/idkit-core/hashing";
-
-// src/components/SignInWithWorldID.tsx
-import { useMemo as useMemo2 } from "react";
-import { useState as useState4 } from "react";
-import { useCallback as useCallback2 } from "react";
-import { jsx as jsx20 } from "react/jsx-runtime";
-var SignInWithWorldID = ({ onSuccess, app_id, nonce, theme, children, ...props }) => {
-  const [token, setToken] = useState4("");
-  const signal = useMemo2(() => {
-    if (nonce)
-      return nonce;
-    return Date.now().toString();
-  }, [nonce]);
-  const handleVerify = useCallback2(
-    async (proof) => {
-      const response = await fetch("https://developer.worldcoin.org/api/v1/oidc/authorize", {
-        method: "POST",
-        headers: {
-          "Content-Type": "application/json"
-        },
-        body: JSON.stringify({ ...proof, app_id, nonce: signal, response_type: "id_token" })
-      });
-      if (!response.ok) {
-        if (response.status != 400) {
-          throw new Error("Something went wrong when verifying your identity. Please try again.");
-        }
-        const error = await response.json();
-        throw new Error(error.message);
-      }
-      const { jwt } = await response.json();
-      setToken(jwt);
-    },
-    [app_id, signal]
-  );
-  const onIDKitSuccess = useCallback2(() => void onSuccess(token), [onSuccess, token]);
-  return /* @__PURE__ */ jsx20(
-    IDKitWidget_default,
-    {
-      ...props,
-      action: "",
-      autoClose: true,
-      theme,
-      app_id,
-      signal,
-      onSuccess: onIDKitSuccess,
-      handleVerify,
-      children: children ?? (({ open }) => /* @__PURE__ */ jsx20(SignInButton_default, { onClick: open, theme }))
-    }
-  );
-};
-var SignInWithWorldID_default = SignInWithWorldID;
-
-// src/index.ts
-import { CredentialType, VerificationLevel as VerificationLevel2 } from "@worldcoin/idkit-core";
 export {
-  CredentialType,
   IDKitWidget_default as IDKitWidget,
-  SignInButton_default as SignInButton,
-  SignInWithWorldID_default as SignInWithWorldID,
   VerificationLevel2 as VerificationLevel,
   solidityEncode,
   useIDKit_default as useIDKit

package/build/internal.d.ts

@@ -1,7 +1,7 @@
 import * as react from 'react';
 import * as zustand_traditional from 'zustand/traditional';
 import * as zustand from 'zustand';
-import { I as IDKITStage, C as Config, b as ConfigSource, c as CallbackFn } from './config-6a355d3b.js';
+import { I as IDKITStage, a as ConfigSource, b as CallbackFn, C as Config } from './config-71e4be16.js';
 import { IDKitConfig, ISuccessResult, IErrorState } from '@worldcoin/idkit-core';
 
 type CleanWord<T> = T extends `${string}${' ' | ',' | '!' | '?' | '.' | '`'}${string}` ? never : T extends '' ? never : T;
@@ -31,7 +31,6 @@ type IDKitStore = {
     stage: IDKITStage;
     autoClose: boolean;
     processing: boolean;
-    theme: Config['theme'];
     result: ISuccessResult | null;
     errorState: IErrorState | null;
     errorCallbacks: Record<ConfigSource, CallbackFn<IErrorState> | undefined> | Record<string, never>;

package/build/internal.js

@@ -3,7 +3,7 @@ import {
   QRCode_default,
   __,
   idkit_default
-} from "./chunk-NDPS4MUA.js";
+} from "./chunk-JCPD6J62.js";
 export {
   ConfigSource,
   QRCode_default as QRCode,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@worldcoin/idkit",
-  "version": "1.0.0-alpha.7",
+  "version": "1.1.0",
   "homepage": "https://docs.worldcoin.org/id/idkit",
   "license": "MIT",
   "private": false,
@@ -64,7 +64,7 @@
     "qrcode": "^1.5.1",
     "react-shadow": "^19.1.0",
     "zustand": "^4.3.3",
-    "@worldcoin/idkit-core": "1.0.0-alpha.7"
+    "@worldcoin/idkit-core": "1.1.0"
   },
   "devDependencies": {
     "@types/node": "18.11.9",

package/src/index.ts

@@ -1,11 +1,9 @@
 import useIDKit from './hooks/useIDKit'
-import SignInButton from './components/SignInButton'
 import IDKitWidget from '@/components/IDKitWidget/index'
 import type { WidgetProps, Config } from '@/types/config'
+import { VerificationLevel } from '@worldcoin/idkit-core'
 import { solidityEncode } from '@worldcoin/idkit-core/hashing'
-import SignInWithWorldID from './components/SignInWithWorldID'
 import type { ISuccessResult, IErrorState } from '@worldcoin/idkit-core'
-import { CredentialType, VerificationLevel } from '@worldcoin/idkit-core'
 
-export { IDKitWidget, useIDKit, solidityEncode, SignInWithWorldID, CredentialType, SignInButton, VerificationLevel }
+export { IDKitWidget, useIDKit, solidityEncode, VerificationLevel }
 export type { ISuccessResult, IErrorState, Config, WidgetProps }