@zoreal/oauth2-react 0.1.11 → 0.2.5

package/dist/index.cjs

@@ -21,6 +21,8 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/index.ts
 var index_exports = {};
 __export(index_exports, {
+  DEFAULT_PAIRING_TIMEOUT_MS: () => DEFAULT_PAIRING_TIMEOUT_MS,
+  PairingModal: () => PairingModal,
   ZorealLogin: () => ZorealLogin,
   ZorealOAuthProvider: () => ZorealOAuthProvider,
   hasGrantedAllScopesZoreal: () => hasGrantedAllScopesZoreal,
@@ -33,32 +35,758 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/context.tsx
-var import_react = require("react");
+var import_react2 = require("react");
 
 // src/wire.ts
 var WIRE_VERSION = 1;
-var SDK_VERSION = "0.1.11";
+var SDK_VERSION = "0.2.5";
 var DEFAULT_ISSUER = "https://id.zoreal.com";
 var POLL_INTERVAL_MS = 2e3;
 var POLL_INTERVAL_ENROLLING_MS = 5e3;
 
-// src/context.tsx
+// src/PairingModal.tsx
+var import_react = require("react");
+var import_react_dom = require("react-dom");
+
+// src/mark.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
-var ZorealOAuthContext = (0, import_react.createContext)(null);
+var ZOREAL_BLUE = "#00b4d9";
+function ZorealMark({
+  size = 18,
+  brand = false,
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "svg",
+    {
+      width: size,
+      height: size,
+      viewBox: "8.4 7.4 62.2 62.2",
+      fill: brand ? ZOREAL_BLUE : "currentColor",
+      fillRule: "evenodd",
+      "aria-hidden": true,
+      focusable: "false",
+      className,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M56.1,32.9c.6-3.1-.8-6.4-3.7-8.1l-18-10.4,5.2-3,15.4,8.9c5.4,3.1,7.7,9.6,5.8,15.3-.3.8-.6,1.6-1.1,2.4-.4.7-.9,1.4-1.5,2.1-1.3,1.4-2.9,2.6-4.6,3.3-3.6,1.5-7.9,1.4-11.6-.7l-8.9-5.1c-2.9-1.7-6.5-1.3-8.9.8-.6.6-1.2,1.2-1.7,2-.5.8-.8,1.7-.9,2.5-.6,3.1.9,6.4,3.7,8.1l18,10.4-5.2,3-15.4-8.9c-5.4-3.1-7.7-9.6-5.8-15.3.2-.8.6-1.6,1-2.4.5-.7,1-1.4,1.5-2.1,1.3-1.4,2.9-2.6,4.7-3.3,3.6-1.6,7.8-1.4,11.5.6l8.9,5.2c3,1.7,6.6,1.3,8.9-.8.6-.6,1.2-1.2,1.7-2,.4-.8.7-1.7.9-2.5Z" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M68.7,44.2c-.7,1.2-2.3,1.7-3.5.9-1.3-.7-1.7-2.3-1-3.5.7-1.3,2.3-1.7,3.5-1,1.3.7,1.7,2.3,1,3.6Z" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M25.6,21.3c5.1-.8,10.4,0,15.3,2.9l1.2.7h0c1.2.7,1.6,2.3.9,3.5s-2.3,1.7-3.5.9l-1.2-.7c-4.2-2.4-9.1-3-13.5-1.9-1.6.4-3.1,1.1-4.5,1.9h0c-1.2.7-2.8.3-3.5-1-.7-1.2-.3-2.8.9-3.5,0,0,.1,0,.3-.1.3-.1.6-.4,1-.5,2.1-1.1,4.4-1.7,6.7-2.2Z" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M9.6,31.8c.7-1.2,2.4-1.6,3.5-.8,1.2.7,1.6,2.4.8,3.5-.8,1.2-2.4,1.6-3.6.8-1.2-.8-1.5-2.4-.7-3.5Z" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M46.2,30.3c.7-1.3,2.3-1.7,3.5-1,1.2.7,1.7,2.3.9,3.6-.7,1.2-2.3,1.7-3.5.9s-1.7-2.3-.9-3.5Z" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M52.1,54.5c-5,.9-10.4,0-15.3-2.8l-1.2-.7h0c-1.2-.7-1.7-2.3-.9-3.5s2.3-1.7,3.5-.9l1.2.7c4.3,2.4,9.1,3,13.6,1.9,1.6-.4,3.1-1.1,4.5-1.9h0c1.2-.7,2.8-.3,3.5.9.7,1.3.3,2.9-.9,3.6-.1,0-.2,0-.3,0-.4.2-.7.4-1.1.6-2.1,1-4.3,1.7-6.7,2.1Z" }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M31.4,45.6c-.7,1.2-2.3,1.7-3.5.9s-1.7-2.3-.9-3.5,2.3-1.7,3.5-.9,1.7,2.3.9,3.5Z" })
+      ]
+    }
+  );
+}
+
+// src/lockup.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function ZorealLockup({ height = 22, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+    "svg",
+    {
+      height,
+      width: height * (240 / 58.5),
+      viewBox: "0 0 240 58.5",
+      role: "img",
+      "aria-label": "ZOREAL",
+      focusable: "false",
+      className,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+          "path",
+          {
+            fill: "currentColor",
+            d: "M205,40.5h15.3v-3.5h-11.5v-18.4h-3.8v21.8ZM157,22.2v5.6h10.9v3.5h-10.9v5.8h12.5v3.5h-16.3v-21.8h16.2v3.5h-12.4ZM141.4,25.8c0,1.1-.4,2-1.2,2.7-.8.7-1.9,1-3.3,1h-5.6v-7.3h5.6c1.4,0,2.6.3,3.4.9.8.6,1.2,1.5,1.2,2.7ZM146,40.5l-5.9-8.3c.8-.2,1.4-.5,2.1-.9s1.2-.9,1.7-1.4c.4-.5.8-1.2,1.1-1.9s.4-1.5.4-2.4-.1-2-.5-2.9c-.4-.9-.9-1.6-1.7-2.2-.6-.6-1.5-1-2.5-1.4-1-.3-2.2-.4-3.4-.4h-9.8v21.8h3.8v-7.6h4.8l5.4,7.6h4.5ZM115.7,29.7c0,1.1-.1,2.1-.5,3s-.9,1.7-1.5,2.4-1.4,1.2-2.4,1.7c-.9.4-1.9.6-3,.6s-2.1-.1-3-.6-1.7-1-2.4-1.7-1.2-1.5-1.5-2.4-.5-1.9-.5-3,.1-2.1.5-3,.9-1.7,1.5-2.4,1.4-1.2,2.4-1.7c.9-.4,1.9-.6,3-.6s2.1.2,3,.6c.9.4,1.7,1,2.3,1.7.6.6,1.2,1.5,1.6,2.4s.5,1.9.5,3ZM119.7,29.6c0-1.5-.3-3-.8-4.4-.6-1.4-1.4-2.5-2.4-3.6-1-1-2.2-1.8-3.6-2.4-1.4-.6-3-.9-4.6-.9s-3.2.4-4.6.9c-1.4.6-2.7,1.4-3.7,2.4s-1.8,2.2-2.4,3.6c-.5,1.4-.8,2.8-.8,4.4s.3,3,.8,4.4c.6,1.4,1.4,2.5,2.4,3.6,1,1,2.2,1.8,3.6,2.4,1.4.6,3,.9,4.6.9s3.2-.4,4.6-.9c1.4-.6,2.6-1.4,3.7-2.4,1-1,1.8-2.2,2.4-3.6.5-1.4.8-2.9.8-4.4ZM86.1,22.1l-13,15.6v2.8h17.9v-3.4h-12.9l12.9-15.6v-2.8h-17.5v3.4h12.5ZM188.5,18.5h-3.5l-9.6,22h4c3.7-8.8,3.4-8,7.4-17.4,3.7,8.8,3.9,9.1,7.4,17.4h4l-9.6-22Z"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("g", { fill: ZOREAL_BLUE, fillRule: "evenodd", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M52,25.7c.4-2-.5-4.2-2.5-5.4l-11.8-6.8,3.4-2,10.1,5.9c3.6,2,5.1,6.3,3.8,10.1-.2.5-.4,1-.7,1.6-.3.5-.6.9-1,1.4-.9.9-1.9,1.7-3,2.2-2.4,1-5.2.9-7.6-.5l-5.9-3.4c-1.9-1.1-4.3-.9-5.9.5-.4.4-.8.8-1.1,1.3-.3.5-.5,1.1-.6,1.7-.4,2,.6,4.2,2.5,5.4l11.8,6.8-3.4,2-10.1-5.9c-3.6-2-5.1-6.3-3.8-10.1.1-.5.4-1,.7-1.6.3-.5.7-.9,1-1.4.9-.9,1.9-1.7,3.1-2.2,2.4-1,5.2-.9,7.6.4l5.9,3.4c1.9,1.1,4.3.9,5.9-.5.4-.4.8-.8,1.1-1.3.3-.5.5-1.1.6-1.7Z" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M60.3,33.1c-.5.8-1.5,1.1-2.3.6-.9-.5-1.1-1.5-.7-2.3.5-.9,1.5-1.1,2.3-.7.9.5,1.1,1.5.7,2.4Z" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M31.9,18c3.4-.5,6.9,0,10,1.9l.8.5h0c.8.5,1,1.5.6,2.3s-1.5,1.1-2.3.6l-.8-.5c-2.8-1.6-6-1.9-8.9-1.2-1,.3-2,.7-3,1.2h0c-.8.5-1.8.2-2.3-.7-.5-.8-.2-1.8.6-2.3,0,0,0,0,.2,0,.2,0,.4-.2.7-.3,1.4-.7,2.9-1.1,4.4-1.4Z" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M21.4,24.9c.5-.8,1.6-1,2.3-.5.8.5,1,1.6.5,2.3-.5.8-1.6,1-2.4.5-.8-.5-1-1.6-.5-2.3Z" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M45.5,23.9c.5-.9,1.5-1.1,2.3-.7.8.5,1.1,1.5.6,2.4-.5.8-1.5,1.1-2.3.6s-1.1-1.5-.6-2.3Z" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M49.4,39.9c-3.3.6-6.9,0-10-1.8l-.8-.5h0c-.8-.5-1.1-1.5-.6-2.3s1.5-1.1,2.3-.6l.8.5c2.8,1.6,6,1.9,9,1.2,1-.3,2-.7,3-1.2h0c.8-.5,1.8-.2,2.3.6.5.9.2,1.9-.6,2.4,0,0-.1,0-.2,0-.2.1-.5.3-.7.4-1.4.7-2.8,1.1-4.4,1.4Z" }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M35.8,34c-.5.8-1.5,1.1-2.3.6s-1.1-1.5-.6-2.3,1.5-1.1,2.3-.6,1.1,1.5.6,2.3Z" })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/i18n.ts
+var en = {
+  title: "Scan to sign in",
+  titleApprove: "Approve on your phone",
+  bodyScan: "Scan with your phone camera or the ZOREAL ID app.",
+  bodyApprove: "Approve the login in your ZOREAL ID app.",
+  bodyEnrolling: "Finish setting up ZOREAL ID on your phone, then approve the login.",
+  waiting: "Waiting for scan",
+  waitingApproval: "Waiting for approval",
+  expiresIn: "Expires in {time}",
+  secured: "Proof-of-Human verification by ZOREAL",
+  noIdTitle: "No ZOREAL ID yet?",
+  noIdBody: "Scan the same code to download the app and create one for free. It only takes a minute.",
+  cancel: "Cancel",
+  close: "Close",
+  qrAlt: "QR code to sign in with ZOREAL"
+};
+var TRANSLATIONS = {
+  en,
+  sv: {
+    title: "Skanna f\xF6r att logga in",
+    titleApprove: "Godk\xE4nn p\xE5 telefonen",
+    bodyScan: "Skanna med telefonens kamera eller ZOREAL ID-appen.",
+    bodyApprove: "Godk\xE4nn inloggningen i ZOREAL ID-appen.",
+    bodyEnrolling: "Slutf\xF6r konfigurationen av ZOREAL ID p\xE5 telefonen och godk\xE4nn sedan inloggningen.",
+    waiting: "V\xE4ntar p\xE5 skanning",
+    waitingApproval: "V\xE4ntar p\xE5 godk\xE4nnande",
+    expiresIn: "Upph\xF6r om {time}",
+    secured: "Proof-of-Human-verifiering av ZOREAL",
+    noIdTitle: "Har du inget ZOREAL ID?",
+    noIdBody: "Skanna samma kod f\xF6r att ladda ner appen och skapa ett gratis. Det tar bara en minut.",
+    cancel: "Avbryt",
+    close: "St\xE4ng",
+    qrAlt: "QR-kod f\xF6r att logga in med ZOREAL"
+  },
+  es: {
+    title: "Escanea para iniciar sesi\xF3n",
+    titleApprove: "Apru\xE9balo en tu tel\xE9fono",
+    bodyScan: "Escanea con la c\xE1mara de tu tel\xE9fono o con la app ZOREAL ID.",
+    bodyApprove: "Aprueba el inicio de sesi\xF3n en tu app ZOREAL ID.",
+    bodyEnrolling: "Termina de configurar ZOREAL ID en tu tel\xE9fono y luego aprueba el inicio de sesi\xF3n.",
+    waiting: "Esperando el escaneo",
+    waitingApproval: "Esperando aprobaci\xF3n",
+    expiresIn: "Caduca en {time}",
+    secured: "Verificaci\xF3n Proof-of-Human de ZOREAL",
+    noIdTitle: "\xBFA\xFAn no tienes ZOREAL ID?",
+    noIdBody: "Escanea el mismo c\xF3digo para descargar la app y crear una gratis. Solo toma un minuto.",
+    cancel: "Cancelar",
+    close: "Cerrar",
+    qrAlt: "C\xF3digo QR para iniciar sesi\xF3n con ZOREAL"
+  },
+  pt: {
+    title: "Digitalize para entrar",
+    titleApprove: "Aprove no seu telefone",
+    bodyScan: "Digitalize com a c\xE2mera do seu telefone ou com o app ZOREAL ID.",
+    bodyApprove: "Aprove o login no app ZOREAL ID.",
+    bodyEnrolling: "Termine de configurar o ZOREAL ID no seu telefone e depois aprove o login.",
+    waiting: "Aguardando digitaliza\xE7\xE3o",
+    waitingApproval: "Aguardando aprova\xE7\xE3o",
+    expiresIn: "Expira em {time}",
+    secured: "Verifica\xE7\xE3o Proof-of-Human da ZOREAL",
+    noIdTitle: "Ainda n\xE3o tem ZOREAL ID?",
+    noIdBody: "Digitalize o mesmo c\xF3digo para baixar o app e criar uma conta gr\xE1tis. Leva s\xF3 um minuto.",
+    cancel: "Cancelar",
+    close: "Fechar",
+    qrAlt: "C\xF3digo QR para entrar com ZOREAL"
+  },
+  fr: {
+    title: "Scannez pour vous connecter",
+    titleApprove: "Approuvez sur votre t\xE9l\xE9phone",
+    bodyScan: "Scannez avec l'appareil photo de votre t\xE9l\xE9phone ou l'app ZOREAL ID.",
+    bodyApprove: "Approuvez la connexion dans votre app ZOREAL ID.",
+    bodyEnrolling: "Terminez la configuration de ZOREAL ID sur votre t\xE9l\xE9phone, puis approuvez la connexion.",
+    waiting: "En attente du scan",
+    waitingApproval: "En attente d'approbation",
+    expiresIn: "Expire dans {time}",
+    secured: "V\xE9rification Proof-of-Human par ZOREAL",
+    noIdTitle: "Pas encore de ZOREAL ID ?",
+    noIdBody: "Scannez le m\xEAme code pour t\xE9l\xE9charger l'app et en cr\xE9er un gratuitement. Cela prend une minute.",
+    cancel: "Annuler",
+    close: "Fermer",
+    qrAlt: "Code QR pour se connecter avec ZOREAL"
+  },
+  de: {
+    title: "Zum Anmelden scannen",
+    titleApprove: "Auf dem Handy best\xE4tigen",
+    bodyScan: "Mit der Handykamera oder der ZOREAL ID App scannen.",
+    bodyApprove: "Anmeldung in der ZOREAL ID App best\xE4tigen.",
+    bodyEnrolling: "ZOREAL ID auf dem Handy fertig einrichten und dann die Anmeldung best\xE4tigen.",
+    waiting: "Warten auf Scan",
+    waitingApproval: "Warten auf Best\xE4tigung",
+    expiresIn: "L\xE4uft ab in {time}",
+    secured: "Proof-of-Human-Verifizierung von ZOREAL",
+    noIdTitle: "Noch keine ZOREAL ID?",
+    noIdBody: "Denselben Code scannen, um die App zu laden und kostenlos eine zu erstellen. Dauert nur eine Minute.",
+    cancel: "Abbrechen",
+    close: "Schlie\xDFen",
+    qrAlt: "QR-Code f\xFCr die Anmeldung mit ZOREAL"
+  },
+  ru: {
+    title: "\u041E\u0442\u0441\u043A\u0430\u043D\u0438\u0440\u0443\u0439\u0442\u0435, \u0447\u0442\u043E\u0431\u044B \u0432\u043E\u0439\u0442\u0438",
+    titleApprove: "\u041F\u043E\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u0435 \u043D\u0430 \u0442\u0435\u043B\u0435\u0444\u043E\u043D\u0435",
+    bodyScan: "\u041E\u0442\u0441\u043A\u0430\u043D\u0438\u0440\u0443\u0439\u0442\u0435 \u043A\u0430\u043C\u0435\u0440\u043E\u0439 \u0442\u0435\u043B\u0435\u0444\u043E\u043D\u0430 \u0438\u043B\u0438 \u0447\u0435\u0440\u0435\u0437 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0435 ZOREAL ID.",
+    bodyApprove: "\u041F\u043E\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u0435 \u0432\u0445\u043E\u0434 \u0432 \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0438 ZOREAL ID.",
+    bodyEnrolling: "\u0417\u0430\u0432\u0435\u0440\u0448\u0438\u0442\u0435 \u043D\u0430\u0441\u0442\u0440\u043E\u0439\u043A\u0443 ZOREAL ID \u043D\u0430 \u0442\u0435\u043B\u0435\u0444\u043E\u043D\u0435, \u0437\u0430\u0442\u0435\u043C \u043F\u043E\u0434\u0442\u0432\u0435\u0440\u0434\u0438\u0442\u0435 \u0432\u0445\u043E\u0434.",
+    waiting: "\u041E\u0436\u0438\u0434\u0430\u043D\u0438\u0435 \u0441\u043A\u0430\u043D\u0438\u0440\u043E\u0432\u0430\u043D\u0438\u044F",
+    waitingApproval: "\u041E\u0436\u0438\u0434\u0430\u043D\u0438\u0435 \u043F\u043E\u0434\u0442\u0432\u0435\u0440\u0436\u0434\u0435\u043D\u0438\u044F",
+    expiresIn: "\u0418\u0441\u0442\u0435\u043A\u0430\u0435\u0442 \u0447\u0435\u0440\u0435\u0437 {time}",
+    secured: "\u041F\u0440\u043E\u0432\u0435\u0440\u043A\u0430 Proof-of-Human \u043E\u0442 ZOREAL",
+    noIdTitle: "\u0415\u0449\u0451 \u043D\u0435\u0442 ZOREAL ID?",
+    noIdBody: "\u041E\u0442\u0441\u043A\u0430\u043D\u0438\u0440\u0443\u0439\u0442\u0435 \u0442\u043E\u0442 \u0436\u0435 \u043A\u043E\u0434, \u0447\u0442\u043E\u0431\u044B \u0441\u043A\u0430\u0447\u0430\u0442\u044C \u043F\u0440\u0438\u043B\u043E\u0436\u0435\u043D\u0438\u0435 \u0438 \u0441\u043E\u0437\u0434\u0430\u0442\u044C \u0435\u0433\u043E \u0431\u0435\u0441\u043F\u043B\u0430\u0442\u043D\u043E. \u042D\u0442\u043E \u0437\u0430\u0439\u043C\u0451\u0442 \u043C\u0438\u043D\u0443\u0442\u0443.",
+    cancel: "\u041E\u0442\u043C\u0435\u043D\u0430",
+    close: "\u0417\u0430\u043A\u0440\u044B\u0442\u044C",
+    qrAlt: "QR-\u043A\u043E\u0434 \u0434\u043B\u044F \u0432\u0445\u043E\u0434\u0430 \u0447\u0435\u0440\u0435\u0437 ZOREAL"
+  },
+  ja: {
+    title: "\u30B9\u30AD\u30E3\u30F3\u3057\u3066\u30ED\u30B0\u30A4\u30F3",
+    titleApprove: "\u30B9\u30DE\u30FC\u30C8\u30D5\u30A9\u30F3\u3067\u627F\u8A8D",
+    bodyScan: "\u30B9\u30DE\u30FC\u30C8\u30D5\u30A9\u30F3\u306E\u30AB\u30E1\u30E9\u307E\u305F\u306FZOREAL ID\u30A2\u30D7\u30EA\u3067\u30B9\u30AD\u30E3\u30F3\u3057\u3066\u304F\u3060\u3055\u3044\u3002",
+    bodyApprove: "ZOREAL ID\u30A2\u30D7\u30EA\u3067\u30ED\u30B0\u30A4\u30F3\u3092\u627F\u8A8D\u3057\u3066\u304F\u3060\u3055\u3044\u3002",
+    bodyEnrolling: "\u30B9\u30DE\u30FC\u30C8\u30D5\u30A9\u30F3\u3067ZOREAL ID\u306E\u8A2D\u5B9A\u3092\u5B8C\u4E86\u3057\u3001\u30ED\u30B0\u30A4\u30F3\u3092\u627F\u8A8D\u3057\u3066\u304F\u3060\u3055\u3044\u3002",
+    waiting: "\u30B9\u30AD\u30E3\u30F3\u5F85\u3061",
+    waitingApproval: "\u627F\u8A8D\u5F85\u3061",
+    expiresIn: "\u6709\u52B9\u671F\u9650\u307E\u3067 {time}",
+    secured: "ZOREAL\u306B\u3088\u308BProof-of-Human\u8A8D\u8A3C",
+    noIdTitle: "ZOREAL ID\u3092\u304A\u6301\u3061\u3067\u306A\u3044\u3067\u3059\u304B\uFF1F",
+    noIdBody: "\u540C\u3058\u30B3\u30FC\u30C9\u3092\u30B9\u30AD\u30E3\u30F3\u3057\u3066\u30A2\u30D7\u30EA\u3092\u30C0\u30A6\u30F3\u30ED\u30FC\u30C9\u3057\u3001\u7121\u6599\u3067\u4F5C\u6210\u3067\u304D\u307E\u3059\u30021\u5206\u307B\u3069\u3067\u5B8C\u4E86\u3057\u307E\u3059\u3002",
+    cancel: "\u30AD\u30E3\u30F3\u30BB\u30EB",
+    close: "\u9589\u3058\u308B",
+    qrAlt: "ZOREAL\u3067\u30ED\u30B0\u30A4\u30F3\u3059\u308B\u305F\u3081\u306EQR\u30B3\u30FC\u30C9"
+  },
+  hi: {
+    title: "\u0938\u093E\u0907\u0928 \u0907\u0928 \u0915\u0930\u0928\u0947 \u0915\u0947 \u0932\u093F\u090F \u0938\u094D\u0915\u0948\u0928 \u0915\u0930\u0947\u0902",
+    titleApprove: "\u0905\u092A\u0928\u0947 \u092B\u094B\u0928 \u092A\u0930 \u0938\u094D\u0935\u0940\u0915\u0943\u0924 \u0915\u0930\u0947\u0902",
+    bodyScan: "\u0905\u092A\u0928\u0947 \u092B\u094B\u0928 \u0915\u0947 \u0915\u0948\u092E\u0930\u0947 \u092F\u093E ZOREAL ID \u0910\u092A \u0938\u0947 \u0938\u094D\u0915\u0948\u0928 \u0915\u0930\u0947\u0902\u0964",
+    bodyApprove: "\u0905\u092A\u0928\u0947 ZOREAL ID \u0910\u092A \u092E\u0947\u0902 \u0932\u0949\u0917\u093F\u0928 \u0938\u094D\u0935\u0940\u0915\u0943\u0924 \u0915\u0930\u0947\u0902\u0964",
+    bodyEnrolling: "\u0905\u092A\u0928\u0947 \u092B\u094B\u0928 \u092A\u0930 ZOREAL ID \u0938\u0947\u091F\u0905\u092A \u092A\u0942\u0930\u093E \u0915\u0930\u0947\u0902, \u092B\u093F\u0930 \u0932\u0949\u0917\u093F\u0928 \u0938\u094D\u0935\u0940\u0915\u0943\u0924 \u0915\u0930\u0947\u0902\u0964",
+    waiting: "\u0938\u094D\u0915\u0948\u0928 \u0915\u0940 \u092A\u094D\u0930\u0924\u0940\u0915\u094D\u0937\u093E \u0939\u0948",
+    waitingApproval: "\u0938\u094D\u0935\u0940\u0915\u0943\u0924\u093F \u0915\u0940 \u092A\u094D\u0930\u0924\u0940\u0915\u094D\u0937\u093E \u0939\u0948",
+    expiresIn: "{time} \u092E\u0947\u0902 \u0938\u092E\u093E\u092A\u094D\u0924",
+    secured: "ZOREAL \u0926\u094D\u0935\u093E\u0930\u093E Proof-of-Human \u0938\u0924\u094D\u092F\u093E\u092A\u0928",
+    noIdTitle: "\u0905\u092D\u0940 \u0924\u0915 ZOREAL ID \u0928\u0939\u0940\u0902 \u0939\u0948?",
+    noIdBody: "\u0910\u092A \u0921\u093E\u0909\u0928\u0932\u094B\u0921 \u0915\u0930\u0928\u0947 \u0914\u0930 \u092E\u0941\u092B\u094D\u0924 \u092E\u0947\u0902 \u090F\u0915 \u092C\u0928\u093E\u0928\u0947 \u0915\u0947 \u0932\u093F\u090F \u0935\u0939\u0940 \u0915\u094B\u0921 \u0938\u094D\u0915\u0948\u0928 \u0915\u0930\u0947\u0902\u0964 \u0907\u0938\u092E\u0947\u0902 \u092C\u0938 \u090F\u0915 \u092E\u093F\u0928\u091F \u0932\u0917\u0924\u093E \u0939\u0948\u0964",
+    cancel: "\u0930\u0926\u094D\u0926 \u0915\u0930\u0947\u0902",
+    close: "\u092C\u0902\u0926 \u0915\u0930\u0947\u0902",
+    qrAlt: "ZOREAL \u0938\u0947 \u0938\u093E\u0907\u0928 \u0907\u0928 \u0915\u0930\u0928\u0947 \u0915\u0947 \u0932\u093F\u090F QR \u0915\u094B\u0921"
+  },
+  zhs: {
+    title: "\u626B\u7801\u767B\u5F55",
+    titleApprove: "\u5728\u624B\u673A\u4E0A\u6279\u51C6",
+    bodyScan: "\u4F7F\u7528\u624B\u673A\u76F8\u673A\u6216 ZOREAL ID \u5E94\u7528\u626B\u63CF\u3002",
+    bodyApprove: "\u8BF7\u5728 ZOREAL ID \u5E94\u7528\u4E2D\u6279\u51C6\u767B\u5F55\u3002",
+    bodyEnrolling: "\u8BF7\u5728\u624B\u673A\u4E0A\u5B8C\u6210 ZOREAL ID \u8BBE\u7F6E\uFF0C\u7136\u540E\u6279\u51C6\u767B\u5F55\u3002",
+    waiting: "\u7B49\u5F85\u626B\u63CF",
+    waitingApproval: "\u7B49\u5F85\u6279\u51C6",
+    expiresIn: "{time} \u540E\u5931\u6548",
+    secured: "\u7531 ZOREAL \u63D0\u4F9B\u7684 Proof-of-Human \u9A8C\u8BC1",
+    noIdTitle: "\u8FD8\u6CA1\u6709 ZOREAL ID\uFF1F",
+    noIdBody: "\u626B\u63CF\u540C\u4E00\u4E2A\u4E8C\u7EF4\u7801\u5373\u53EF\u4E0B\u8F7D\u5E94\u7528\u5E76\u514D\u8D39\u521B\u5EFA\uFF0C\u53EA\u9700\u4E00\u5206\u949F\u3002",
+    cancel: "\u53D6\u6D88",
+    close: "\u5173\u95ED",
+    qrAlt: "\u4F7F\u7528 ZOREAL \u767B\u5F55\u7684\u4E8C\u7EF4\u7801"
+  },
+  zht: {
+    title: "\u6383\u78BC\u767B\u5165",
+    titleApprove: "\u5728\u624B\u6A5F\u4E0A\u6838\u51C6",
+    bodyScan: "\u4F7F\u7528\u624B\u6A5F\u76F8\u6A5F\u6216 ZOREAL ID \u61C9\u7528\u7A0B\u5F0F\u6383\u63CF\u3002",
+    bodyApprove: "\u8ACB\u5728 ZOREAL ID \u61C9\u7528\u7A0B\u5F0F\u4E2D\u6838\u51C6\u767B\u5165\u3002",
+    bodyEnrolling: "\u8ACB\u5728\u624B\u6A5F\u4E0A\u5B8C\u6210 ZOREAL ID \u8A2D\u5B9A\uFF0C\u7136\u5F8C\u6838\u51C6\u767B\u5165\u3002",
+    waiting: "\u7B49\u5F85\u6383\u63CF",
+    waitingApproval: "\u7B49\u5F85\u6838\u51C6",
+    expiresIn: "{time} \u5F8C\u5931\u6548",
+    secured: "\u7531 ZOREAL \u63D0\u4F9B\u7684 Proof-of-Human \u9A57\u8B49",
+    noIdTitle: "\u9084\u6C92\u6709 ZOREAL ID\uFF1F",
+    noIdBody: "\u6383\u63CF\u540C\u4E00\u500B QR code \u5373\u53EF\u4E0B\u8F09\u61C9\u7528\u7A0B\u5F0F\u4E26\u514D\u8CBB\u5EFA\u7ACB\uFF0C\u53EA\u9700\u4E00\u5206\u9418\u3002",
+    cancel: "\u53D6\u6D88",
+    close: "\u95DC\u9589",
+    qrAlt: "\u4F7F\u7528 ZOREAL \u767B\u5165\u7684 QR code"
+  },
+  ar: {
+    title: "\u0627\u0645\u0633\u062D \u0644\u062A\u0633\u062C\u064A\u0644 \u0627\u0644\u062F\u062E\u0648\u0644",
+    titleApprove: "\u0648\u0627\u0641\u0642 \u0639\u0644\u0649 \u0647\u0627\u062A\u0641\u0643",
+    bodyScan: "\u0627\u0645\u0633\u062D \u0628\u0627\u0633\u062A\u062E\u062F\u0627\u0645 \u0643\u0627\u0645\u064A\u0631\u0627 \u0647\u0627\u062A\u0641\u0643 \u0623\u0648 \u062A\u0637\u0628\u064A\u0642 ZOREAL ID.",
+    bodyApprove: "\u0648\u0627\u0641\u0642 \u0639\u0644\u0649 \u062A\u0633\u062C\u064A\u0644 \u0627\u0644\u062F\u062E\u0648\u0644 \u0641\u064A \u062A\u0637\u0628\u064A\u0642 ZOREAL ID.",
+    bodyEnrolling: "\u0623\u0643\u0645\u0644 \u0625\u0639\u062F\u0627\u062F ZOREAL ID \u0639\u0644\u0649 \u0647\u0627\u062A\u0641\u0643\u060C \u062B\u0645 \u0648\u0627\u0641\u0642 \u0639\u0644\u0649 \u062A\u0633\u062C\u064A\u0644 \u0627\u0644\u062F\u062E\u0648\u0644.",
+    waiting: "\u0641\u064A \u0627\u0646\u062A\u0638\u0627\u0631 \u0627\u0644\u0645\u0633\u062D",
+    waitingApproval: "\u0641\u064A \u0627\u0646\u062A\u0638\u0627\u0631 \u0627\u0644\u0645\u0648\u0627\u0641\u0642\u0629",
+    expiresIn: "\u062A\u0646\u062A\u0647\u064A \u0627\u0644\u0635\u0644\u0627\u062D\u064A\u0629 \u062E\u0644\u0627\u0644 {time}",
+    secured: "\u0627\u0644\u062A\u062D\u0642\u0642 \u0645\u0646 Proof-of-Human \u0628\u0648\u0627\u0633\u0637\u0629 ZOREAL",
+    noIdTitle: "\u0644\u064A\u0633 \u0644\u062F\u064A\u0643 ZOREAL ID \u0628\u0639\u062F\u061F",
+    noIdBody: "\u0627\u0645\u0633\u062D \u0627\u0644\u0631\u0645\u0632 \u0646\u0641\u0633\u0647 \u0644\u062A\u0646\u0632\u064A\u0644 \u0627\u0644\u062A\u0637\u0628\u064A\u0642 \u0648\u0625\u0646\u0634\u0627\u0621 \u062D\u0633\u0627\u0628 \u0645\u062C\u0627\u0646\u064A. \u064A\u0633\u062A\u063A\u0631\u0642 \u0627\u0644\u0623\u0645\u0631 \u062F\u0642\u064A\u0642\u0629 \u0648\u0627\u062D\u062F\u0629 \u0641\u0642\u0637.",
+    cancel: "\u0625\u0644\u063A\u0627\u0621",
+    close: "\u0625\u063A\u0644\u0627\u0642",
+    qrAlt: "\u0631\u0645\u0632 QR \u0644\u062A\u0633\u062C\u064A\u0644 \u0627\u0644\u062F\u062E\u0648\u0644 \u0628\u0627\u0633\u062A\u062E\u062F\u0627\u0645 ZOREAL"
+  },
+  ko: {
+    title: "\uC2A4\uCE94\uD558\uC5EC \uB85C\uADF8\uC778",
+    titleApprove: "\uD734\uB300\uD3F0\uC5D0\uC11C \uC2B9\uC778",
+    bodyScan: "\uD734\uB300\uD3F0 \uCE74\uBA54\uB77C \uB610\uB294 ZOREAL ID \uC571\uC73C\uB85C \uC2A4\uCE94\uD558\uC138\uC694.",
+    bodyApprove: "ZOREAL ID \uC571\uC5D0\uC11C \uB85C\uADF8\uC778\uC744 \uC2B9\uC778\uD558\uC138\uC694.",
+    bodyEnrolling: "\uD734\uB300\uD3F0\uC5D0\uC11C ZOREAL ID \uC124\uC815\uC744 \uC644\uB8CC\uD55C \uD6C4 \uB85C\uADF8\uC778\uC744 \uC2B9\uC778\uD558\uC138\uC694.",
+    waiting: "\uC2A4\uCE94 \uB300\uAE30 \uC911",
+    waitingApproval: "\uC2B9\uC778 \uB300\uAE30 \uC911",
+    expiresIn: "{time} \uD6C4 \uB9CC\uB8CC",
+    secured: "ZOREAL\uC758 Proof-of-Human \uC778\uC99D",
+    noIdTitle: "\uC544\uC9C1 ZOREAL ID\uAC00 \uC5C6\uC73C\uC2E0\uAC00\uC694?",
+    noIdBody: "\uAC19\uC740 \uCF54\uB4DC\uB97C \uC2A4\uCE94\uD574 \uC571\uC744 \uB0B4\uB824\uBC1B\uACE0 \uBB34\uB8CC\uB85C \uB9CC\uB4DC\uC138\uC694. 1\uBD84\uC774\uBA74 \uB429\uB2C8\uB2E4.",
+    cancel: "\uCDE8\uC18C",
+    close: "\uB2EB\uAE30",
+    qrAlt: "ZOREAL\uB85C \uB85C\uADF8\uC778\uD558\uAE30 \uC704\uD55C QR \uCF54\uB4DC"
+  }
+};
+var RTL = /* @__PURE__ */ new Set(["ar", "he", "fa", "ur"]);
+function lookup(locale) {
+  const tag = locale.toLowerCase().replace(/_/g, "-");
+  const primary = tag.split("-")[0];
+  if (primary === "zh") {
+    const simplified = /(^|-)(hans|cn|sg|my)(-|$)/.test(tag);
+    return TRANSLATIONS[simplified ? "zhs" : "zht"];
+  }
+  return TRANSLATIONS[tag] ?? TRANSLATIONS[primary];
+}
+function browserLocales() {
+  if (typeof navigator === "undefined") return [];
+  const nav = navigator;
+  if (nav.languages && nav.languages.length) return [...nav.languages];
+  return nav.language ? [nav.language] : [];
+}
+function strings(locale) {
+  if (locale) return lookup(locale) ?? en;
+  for (const candidate of browserLocales()) {
+    const hit = lookup(candidate);
+    if (hit) return hit;
+  }
+  return en;
+}
+function isRtl(locale) {
+  const tag = locale ?? browserLocales()[0];
+  if (!tag) return false;
+  return RTL.has(tag.toLowerCase().replace(/_/g, "-").split("-")[0]);
+}
+function interpolate(template, time) {
+  return template.replace("{time}", time);
+}
+
+// src/styles.ts
+var PREFIX = "zrl";
+var cx = (name) => `${PREFIX}-${name}`;
+var STYLE_ELEMENT_ID = "zoreal-pairing-styles";
+var LIGHT = `
+  --zrl-scrim: rgba(16, 18, 27, 0.45);
+  --zrl-surface: #ffffff;
+  --zrl-surface-sunken: #f6f7f9;
+  --zrl-ink: #16181c;
+  --zrl-ink-soft: #4a4f57;
+  --zrl-ink-mute: #6b7078;
+  --zrl-line: #e4e6ea;
+  --zrl-line-soft: #eef0f3;
+  --zrl-accent: #00b4d9;
+  --zrl-accent-soft: #dcf3fa;
+  --zrl-accent-ink: #04698a;
+  --zrl-urgent: #b4761a;
+  --zrl-qr-bg: #ffffff;
+  --zrl-shadow: 0 1px 2px rgba(16, 18, 27, 0.06), 0 20px 50px -12px rgba(16, 18, 27, 0.3);
+  --zrl-ring: rgba(16, 18, 27, 0.07);
+`;
+var DARK = `
+  --zrl-scrim: rgba(0, 0, 0, 0.62);
+  --zrl-surface: #17191d;
+  --zrl-surface-sunken: #1f2226;
+  --zrl-ink: #f4f5f7;
+  --zrl-ink-soft: #b3b8c0;
+  --zrl-ink-mute: #8b9199;
+  --zrl-line: #2c3036;
+  --zrl-line-soft: #24272c;
+  --zrl-accent: #34c9e8;
+  --zrl-accent-soft: #0d3b47;
+  --zrl-accent-ink: #7fdcf0;
+  --zrl-urgent: #e0a952;
+  /* The QR well stays white in dark mode on purpose: a scanner needs the
+     quiet-zone contrast, and an inverted QR fails on a good number of phone
+     cameras. It reads as a deliberate light panel, not a theming miss. */
+  --zrl-qr-bg: #ffffff;
+  --zrl-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 20px 50px -12px rgba(0, 0, 0, 0.65);
+  --zrl-ring: rgba(255, 255, 255, 0.1);
+`;
+var CSS = `
+.${PREFIX}-root { ${LIGHT} }
+.${PREFIX}-root[data-theme="dark"] { ${DARK} }
+@media (prefers-color-scheme: dark) {
+  .${PREFIX}-root[data-theme="auto"] { ${DARK} }
+}
+
+.${PREFIX}-scrim {
+  position: fixed;
+  inset: 0;
+  z-index: 2147483000;
+  display: grid;
+  place-items: center;
+  overflow-y: auto;
+  padding: 16px;
+  background: var(--zrl-scrim);
+  backdrop-filter: blur(3px);
+  -webkit-backdrop-filter: blur(3px);
+  font-family: inherit;
+  animation: ${PREFIX}-fade 200ms ease-out both;
+}
+
+.${PREFIX}-card {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 380px;
+  border-radius: 16px;
+  background: var(--zrl-surface);
+  color: var(--zrl-ink);
+  box-shadow: var(--zrl-shadow);
+  outline: 1px solid var(--zrl-ring);
+  outline-offset: -1px;
+  text-align: center;
+  animation: ${PREFIX}-rise 300ms cubic-bezier(0.23, 1, 0.32, 1) both;
+}
+
+.${PREFIX}-body { padding: 28px 24px 20px; }
+
+.${PREFIX}-lockup { display: block; margin: 0 auto; color: var(--zrl-ink); }
+
+.${PREFIX}-title {
+  margin: 18px 0 0;
+  font-size: 18px;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+  line-height: 1.3;
+  color: var(--zrl-ink);
+}
+
+.${PREFIX}-body-text {
+  margin: 6px auto 0;
+  max-width: 30ch;
+  font-size: 14px;
+  line-height: 1.55;
+  color: var(--zrl-ink-soft);
+}
+
+.${PREFIX}-qr-well {
+  position: relative;
+  display: grid;
+  place-items: center;
+  box-sizing: border-box;
+  width: 204px;
+  height: 204px;
+  margin: 20px auto 0;
+  padding: 12px;
+  border: 1px solid var(--zrl-line);
+  border-radius: 16px;
+  background: var(--zrl-qr-bg);
+}
+
+.${PREFIX}-qr {
+  display: block;
+  width: 100%;
+  height: 100%;
+  border-radius: 8px;
+  transition: filter 300ms cubic-bezier(0.23, 1, 0.32, 1),
+    opacity 300ms cubic-bezier(0.23, 1, 0.32, 1),
+    transform 300ms cubic-bezier(0.23, 1, 0.32, 1);
+}
+
+/* Once the code is claimed the QR is spent. Blurring it out rather than
+   swapping it keeps one object on screen through the state change, so the eye
+   reads a transformation instead of two things trading places. */
+.${PREFIX}-qr[data-spent="true"] { opacity: 0.2; filter: blur(3px); transform: scale(0.96); }
+
+.${PREFIX}-qr-overlay {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-items: center;
+  animation: ${PREFIX}-fade 200ms ease-out both;
+}
+
+.${PREFIX}-qr-badge {
+  display: grid;
+  place-items: center;
+  width: 56px;
+  height: 56px;
+  border-radius: 999px;
+  background: var(--zrl-accent-soft);
+  color: var(--zrl-accent-ink);
+}
+
+.${PREFIX}-status {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  margin-top: 20px;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--zrl-ink);
+}
+
+.${PREFIX}-dot { position: relative; display: grid; place-items: center; width: 8px; height: 8px; }
+.${PREFIX}-dot i {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  border-radius: 999px;
+  background: var(--zrl-accent);
+  font-style: normal;
+}
+.${PREFIX}-dot i:first-child { animation: ${PREFIX}-ping 1.8s cubic-bezier(0.23, 1, 0.32, 1) infinite; }
+
+.${PREFIX}-timer {
+  margin: 4px 0 0;
+  font-size: 12px;
+  font-variant-numeric: tabular-nums;
+  color: var(--zrl-ink-mute);
+  transition: color 200ms ease-out;
+}
+.${PREFIX}-timer[data-urgent="true"] { color: var(--zrl-urgent); }
+
+.${PREFIX}-help {
+  padding: 14px 24px;
+  border-top: 1px solid var(--zrl-line-soft);
+  background: var(--zrl-surface-sunken);
+  border-radius: 0;
+}
+.${PREFIX}-help-title { margin: 0; font-size: 12px; font-weight: 600; color: var(--zrl-ink); }
+.${PREFIX}-help-body {
+  margin: 4px auto 0;
+  max-width: 34ch;
+  font-size: 12px;
+  line-height: 1.55;
+  color: var(--zrl-ink-soft);
+}
+
+.${PREFIX}-footer { padding: 12px; border-top: 1px solid var(--zrl-line-soft); }
+
+.${PREFIX}-cancel {
+  display: block;
+  width: 100%;
+  padding: 10px;
+  border: 0;
+  border-radius: 12px;
+  background: transparent;
+  font: inherit;
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--zrl-ink-soft);
+  cursor: pointer;
+  transition: background-color 150ms ease-out, color 150ms ease-out, transform 150ms ease-out;
+}
+.${PREFIX}-cancel:hover { background: var(--zrl-surface-sunken); color: var(--zrl-ink); }
+.${PREFIX}-cancel:active { transform: scale(0.99); }
+
+.${PREFIX}-secured {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  margin: 6px 0 0;
+  font-size: 12px;
+  color: var(--zrl-ink-mute);
+}
+
+.${PREFIX}-close {
+  position: absolute;
+  top: 12px;
+  inset-inline-end: 12px;
+  display: grid;
+  place-items: center;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--zrl-ink-mute);
+  cursor: pointer;
+  transition: background-color 150ms ease-out, color 150ms ease-out, transform 150ms ease-out;
+}
+.${PREFIX}-close:hover { background: var(--zrl-surface-sunken); color: var(--zrl-ink); }
+.${PREFIX}-close:active { transform: scale(0.95); }
+
+.${PREFIX}-card :focus-visible {
+  outline: 2px solid var(--zrl-accent);
+  outline-offset: 2px;
+}
+
+@keyframes ${PREFIX}-fade { from { opacity: 0 } to { opacity: 1 } }
+@keyframes ${PREFIX}-rise {
+  from { opacity: 0; transform: translateY(10px) scale(0.98) }
+  to { opacity: 1; transform: none }
+}
+@keyframes ${PREFIX}-ping {
+  0% { transform: scale(1); opacity: 0.5 }
+  70%, 100% { transform: scale(2.6); opacity: 0 }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .${PREFIX}-scrim,
+  .${PREFIX}-card,
+  .${PREFIX}-qr-overlay { animation: none }
+  .${PREFIX}-dot i:first-child { animation: none; opacity: 0.35 }
+  .${PREFIX}-qr,
+  .${PREFIX}-cancel,
+  .${PREFIX}-close,
+  .${PREFIX}-timer { transition: none }
+}
+`;
+function ensureStyles() {
+  if (typeof document === "undefined") return;
+  if (document.getElementById(STYLE_ELEMENT_ID)) return;
+  const el = document.createElement("style");
+  el.id = STYLE_ELEMENT_ID;
+  el.textContent = CSS;
+  document.head.appendChild(el);
+}
+
+// src/PairingModal.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var DEFAULT_PAIRING_TIMEOUT_MS = 12e4;
+var URGENT_SECONDS = 20;
+function mmss(totalSeconds) {
+  const m = Math.floor(totalSeconds / 60);
+  const s = totalSeconds % 60;
+  return `${m}:${String(s).padStart(2, "0")}`;
+}
+var IconClose = () => /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", "aria-hidden": true, focusable: "false", children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M18 6 6 18M6 6l12 12" }) });
+var IconPhone = () => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, focusable: "false", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("rect", { x: "6", y: "2", width: "12", height: "20", rx: "2.5" }),
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M11 18.5h2" })
+] });
+var IconShield = () => /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("svg", { width: "13", height: "13", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, focusable: "false", children: [
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z" }),
+  /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m9 12 2 2 4-4" })
+] });
+function PairingModal({
+  state,
+  qrUrl,
+  onCancel,
+  locale,
+  theme = "auto",
+  timeoutMs = DEFAULT_PAIRING_TIMEOUT_MS
+}) {
+  const t = strings(locale);
+  const titleId = (0, import_react.useId)();
+  const closeRef = (0, import_react.useRef)(null);
+  const deadlineRef = (0, import_react.useRef)(0);
+  const [remaining, setRemaining] = (0, import_react.useState)(Math.round(timeoutMs / 1e3));
+  const settled = state.status === "claimed" || state.status === "enrolling";
+  const onCancelRef = (0, import_react.useRef)(onCancel);
+  onCancelRef.current = onCancel;
+  (0, import_react.useEffect)(() => {
+    ensureStyles();
+  }, []);
+  (0, import_react.useEffect)(() => {
+    const serverMs = typeof state.expiresIn === "number" ? state.expiresIn * 1e3 : Infinity;
+    deadlineRef.current = Date.now() + Math.min(timeoutMs, serverMs);
+    setRemaining(Math.round(Math.min(timeoutMs, serverMs) / 1e3));
+    const id = setInterval(() => {
+      const left = Math.max(0, Math.ceil((deadlineRef.current - Date.now()) / 1e3));
+      setRemaining(left);
+      if (left === 0) {
+        clearInterval(id);
+        onCancelRef.current();
+      }
+    }, 1e3);
+    return () => clearInterval(id);
+  }, [timeoutMs]);
+  (0, import_react.useEffect)(() => {
+    const onKey = (e) => {
+      if (e.key === "Escape") onCancelRef.current();
+    };
+    document.addEventListener("keydown", onKey);
+    const previous = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    closeRef.current?.focus();
+    return () => {
+      document.removeEventListener("keydown", onKey);
+      document.body.style.overflow = previous;
+    };
+  }, []);
+  if (typeof document === "undefined") return null;
+  const body = state.status === "enrolling" ? t.bodyEnrolling : settled ? t.bodyApprove : t.bodyScan;
+  return (0, import_react_dom.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: `${cx("root")} ${cx("scrim")}`, "data-theme": theme, onClick: onCancel, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
+      "div",
+      {
+        className: cx("card"),
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": titleId,
+        dir: isRtl(locale) ? "rtl" : "ltr",
+        onClick: (e) => e.stopPropagation(),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { ref: closeRef, type: "button", className: cx("close"), "aria-label": t.close, onClick: onCancel, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IconClose, {}) }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: cx("body"), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(ZorealLockup, { height: 44, className: cx("lockup") }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h2", { id: titleId, className: cx("title"), children: settled ? t.titleApprove : t.title }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: cx("body-text"), children: body }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: cx("qr-well"), children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("img", { className: cx("qr"), "data-spent": settled, src: qrUrl, alt: t.qrAlt, width: 180, height: 180 }),
+              settled && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: cx("qr-overlay"), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: cx("qr-badge"), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IconPhone, {}) }) })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: cx("status"), children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("span", { className: cx("dot"), children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("i", {}),
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("i", {})
+              ] }),
+              settled ? t.waitingApproval : t.waiting
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: cx("timer"), "data-urgent": remaining <= URGENT_SECONDS, children: interpolate(t.expiresIn, mmss(remaining)) })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: cx("help"), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: cx("help-title"), children: t.noIdTitle }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { className: cx("help-body"), children: t.noIdBody })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: cx("footer"), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("button", { type: "button", className: cx("cancel"), onClick: onCancel, children: t.cancel }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("p", { className: cx("secured"), children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(IconShield, {}),
+              t.secured
+            ] })
+          ] })
+        ]
+      }
+    ) }),
+    document.body
+  );
+}
+
+// src/context.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var ZorealOAuthContext = (0, import_react2.createContext)(null);
+var PairingHostContext = (0, import_react2.createContext)(null);
+function useZorealPairingHost() {
+  return (0, import_react2.useContext)(PairingHostContext);
+}
 function ZorealOAuthProvider({
   clientId,
   issuer = DEFAULT_ISSUER,
   locale,
+  theme = "auto",
+  pairingUI = "modal",
+  pairingTimeoutMs,
   children
 }) {
-  const value = (0, import_react.useMemo)(
+  const [pairing, setPairing] = (0, import_react2.useState)(null);
+  const value = (0, import_react2.useMemo)(
     () => ({ clientId, issuer: issuer.replace(/\/$/, ""), locale }),
     [clientId, issuer, locale]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ZorealOAuthContext.Provider, { value, children });
+  const host = pairingUI === "modal" ? setPairing : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(ZorealOAuthContext.Provider, { value, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(PairingHostContext.Provider, { value: host, children: [
+    children,
+    pairing && /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      PairingModal,
+      {
+        state: pairing.state,
+        qrUrl: pairing.qrUrl,
+        onCancel: pairing.cancel,
+        locale,
+        theme,
+        timeoutMs: pairingTimeoutMs
+      }
+    )
+  ] }) });
 }
 function useZorealOAuth() {
-  const ctx = (0, import_react.useContext)(ZorealOAuthContext);
+  const ctx = (0, import_react2.useContext)(ZorealOAuthContext);
   if (!ctx) {
     throw new Error(
       "useZorealOAuth must be used inside <ZorealOAuthProvider clientId=...>. Wrap your app (or the part that logs in) in the provider."
@@ -68,10 +796,10 @@ function useZorealOAuth() {
 }
 
 // src/ZorealLogin.tsx
-var import_react3 = require("react");
+var import_react4 = require("react");
 
 // src/useZorealLogin.ts
-var import_react2 = require("react");
+var import_react3 = require("react");
 
 // src/jwt.ts
 function unsafeClaims(idToken) {
@@ -225,12 +953,21 @@ function generateState() {
 // src/useZorealLogin.ts
 function useZorealFlow(options) {
   const { clientId, issuer, locale } = useZorealOAuth();
-  const [pairing, setPairing] = (0, import_react2.useState)(null);
-  const abortRef = (0, import_react2.useRef)(null);
-  const optionsRef = (0, import_react2.useRef)(options);
+  const [pairing, setPairing] = (0, import_react3.useState)(null);
+  const publish = useZorealPairingHost();
+  const publishRef = (0, import_react3.useRef)(publish);
+  publishRef.current = publish;
+  const abortRef = (0, import_react3.useRef)(null);
+  const optionsRef = (0, import_react3.useRef)(options);
   optionsRef.current = options;
-  (0, import_react2.useEffect)(() => () => abortRef.current?.abort(), []);
-  const login = (0, import_react2.useCallback)(() => {
+  (0, import_react3.useEffect)(
+    () => () => {
+      abortRef.current?.abort();
+      publishRef.current?.(null);
+    },
+    []
+  );
+  const login = (0, import_react3.useCallback)(() => {
     const opts = optionsRef.current;
     const run = async () => {
       abortRef.current?.abort();
@@ -264,6 +1001,7 @@ function useZorealFlow(options) {
           const cancel = () => {
             controller.abort();
             setPairing(null);
+            publishRef.current?.(null);
           };
           const surface = {
             pairUrl: started.pair_url,
@@ -280,6 +1018,9 @@ function useZorealFlow(options) {
             cancel
           };
           setPairing(active);
+          if (!useAppLink) {
+            publishRef.current?.({ state: active.state, qrUrl: surface.qrUrl, cancel });
+          }
           opts.onPairingStateChange?.(active.state);
           if (useAppLink) {
             window.location.assign(started.pair_url);
@@ -292,12 +1033,16 @@ function useZorealFlow(options) {
               setPairing(
                 (p) => p && p.requestId === started.request_id ? { ...p, state: enriched } : p
               );
+              if (!useAppLink) {
+                publishRef.current?.({ state: enriched, qrUrl: surface.qrUrl, cancel });
+              }
               opts.onPairingStateChange?.(enriched);
             },
             controller.signal
           );
         }
         setPairing(null);
+        publishRef.current?.(null);
         if (flow === "auth-code") {
           opts.onCode?.({
             code,
@@ -323,6 +1068,7 @@ function useZorealFlow(options) {
         opts.onCredential?.(response);
       } catch (e) {
         setPairing(null);
+        publishRef.current?.(null);
         if (e instanceof DOMException && e.name === "AbortError") return;
         if (e instanceof FlowAbandonedError) {
           opts.onNonOAuthError?.(e.reason);
@@ -358,7 +1104,7 @@ function useZorealLogin(options) {
 }
 
 // src/ZorealLogin.tsx
-var import_jsx_runtime2 = require("react/jsx-runtime");
+var import_jsx_runtime5 = require("react/jsx-runtime");
 var TEXTS = {
   continue_with: "Continue with ZOREAL",
   signin_with: "Sign in with ZOREAL",
@@ -370,80 +1116,6 @@ var SIZES = {
   medium: { height: 38, font: 14, pad: 16 },
   small: { height: 32, font: 12, pad: 12 }
 };
-var Mark = ({ size }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-  "svg",
-  {
-    width: size,
-    height: size,
-    viewBox: "8.4 7.4 62.2 62.2",
-    fill: "currentColor",
-    fillRule: "evenodd",
-    "aria-hidden": true,
-    focusable: "false",
-    children: [
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M56.1,32.9c.6-3.1-.8-6.4-3.7-8.1l-18-10.4,5.2-3,15.4,8.9c5.4,3.1,7.7,9.6,5.8,15.3-.3.8-.6,1.6-1.1,2.4-.4.7-.9,1.4-1.5,2.1-1.3,1.4-2.9,2.6-4.6,3.3-3.6,1.5-7.9,1.4-11.6-.7l-8.9-5.1c-2.9-1.7-6.5-1.3-8.9.8-.6.6-1.2,1.2-1.7,2-.5.8-.8,1.7-.9,2.5-.6,3.1.9,6.4,3.7,8.1l18,10.4-5.2,3-15.4-8.9c-5.4-3.1-7.7-9.6-5.8-15.3.2-.8.6-1.6,1-2.4.5-.7,1-1.4,1.5-2.1,1.3-1.4,2.9-2.6,4.7-3.3,3.6-1.6,7.8-1.4,11.5.6l8.9,5.2c3,1.7,6.6,1.3,8.9-.8.6-.6,1.2-1.2,1.7-2,.4-.8.7-1.7.9-2.5Z" }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M68.7,44.2c-.7,1.2-2.3,1.7-3.5.9-1.3-.7-1.7-2.3-1-3.5.7-1.3,2.3-1.7,3.5-1,1.3.7,1.7,2.3,1,3.6Z" }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M25.6,21.3c5.1-.8,10.4,0,15.3,2.9l1.2.7h0c1.2.7,1.6,2.3.9,3.5s-2.3,1.7-3.5.9l-1.2-.7c-4.2-2.4-9.1-3-13.5-1.9-1.6.4-3.1,1.1-4.5,1.9h0c-1.2.7-2.8.3-3.5-1-.7-1.2-.3-2.8.9-3.5,0,0,.1,0,.3-.1.3-.1.6-.4,1-.5,2.1-1.1,4.4-1.7,6.7-2.2Z" }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M9.6,31.8c.7-1.2,2.4-1.6,3.5-.8,1.2.7,1.6,2.4.8,3.5-.8,1.2-2.4,1.6-3.6.8-1.2-.8-1.5-2.4-.7-3.5Z" }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M46.2,30.3c.7-1.3,2.3-1.7,3.5-1,1.2.7,1.7,2.3.9,3.6-.7,1.2-2.3,1.7-3.5.9s-1.7-2.3-.9-3.5Z" }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M52.1,54.5c-5,.9-10.4,0-15.3-2.8l-1.2-.7h0c-1.2-.7-1.7-2.3-.9-3.5s2.3-1.7,3.5-.9l1.2.7c4.3,2.4,9.1,3,13.6,1.9,1.6-.4,3.1-1.1,4.5-1.9h0c1.2-.7,2.8-.3,3.5.9.7,1.3.3,2.9-.9,3.6-.1,0-.2,0-.3,0-.4.2-.7.4-1.1.6-2.1,1-4.3,1.7-6.7,2.1Z" }),
-      /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "M31.4,45.6c-.7,1.2-2.3,1.7-3.5.9s-1.7-2.3-.9-3.5,2.3-1.7,3.5-.9,1.7,2.3.9,3.5Z" })
-    ]
-  }
-);
-var PairingPanel = ({ pairing }) => {
-  const { status } = pairing.state;
-  const line = status === "claimed" ? "Approve the login in your ZOREAL ID app." : status === "enrolling" ? "Finishing enrolment. This screen will continue by itself." : pairing.appLink ? "Continue in the ZOREAL ID app, then return to this tab." : "Scan with your phone camera or the ZOREAL ID app.";
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-    "div",
-    {
-      role: "dialog",
-      "aria-label": "Log in with ZOREAL",
-      style: {
-        marginTop: 8,
-        padding: 16,
-        width: 232,
-        borderRadius: 12,
-        border: "1px solid rgba(128,128,128,0.35)",
-        background: "Canvas",
-        color: "CanvasText",
-        textAlign: "center",
-        fontFamily: "inherit"
-      },
-      children: [
-        !pairing.appLink && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-          "img",
-          {
-            src: pairing.qrUrl,
-            alt: `QR code for ${pairing.pairUrl}`,
-            width: 200,
-            height: 200,
-            style: { display: "block", margin: "0 auto", borderRadius: 8 }
-          }
-        ),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { style: { margin: "10px 0 0", fontSize: 12, lineHeight: 1.5 }, children: line }),
-        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-          "button",
-          {
-            type: "button",
-            onClick: pairing.cancel,
-            style: {
-              marginTop: 10,
-              border: "none",
-              background: "none",
-              color: "inherit",
-              opacity: 0.6,
-              fontSize: 12,
-              cursor: "pointer",
-              textDecoration: "underline"
-            },
-            children: "Cancel"
-          }
-        )
-      ]
-    }
-  );
-};
 function ZorealLogin(props) {
   const {
     onSuccess,
@@ -459,7 +1131,7 @@ function ZorealLogin(props) {
     click_listener,
     ...request
   } = props;
-  const { login, internals } = useZorealFlow({
+  const { login } = useZorealFlow({
     ...request,
     flow: "browser-direct",
     onCredential: onSuccess,
@@ -467,7 +1139,7 @@ function ZorealLogin(props) {
     onNonOAuthError: (e) => onError?.(e)
   });
   const s = SIZES[size];
-  const style = (0, import_react3.useMemo)(
+  const style = (0, import_react4.useMemo)(
     () => ({
       display: "inline-flex",
       alignItems: "center",
@@ -485,28 +1157,25 @@ function ZorealLogin(props) {
     }),
     [logo_alignment, s, shape, theme, width]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { ...containerProps, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
-      "button",
-      {
-        type: "button",
-        style,
-        onClick: () => {
-          click_listener?.();
-          login();
-        },
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Mark, { size: Math.round(s.font * 1.25) }),
-          type === "standard" && TEXTS[text]
-        ]
-      }
-    ),
-    internals.pairing && !internals.pairing.appLink && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(PairingPanel, { pairing: internals.pairing })
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { ...containerProps, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    "button",
+    {
+      type: "button",
+      style,
+      onClick: () => {
+        click_listener?.();
+        login();
+      },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ZorealMark, { size: Math.round(s.font * 1.25) }),
+        type === "standard" && TEXTS[text]
+      ]
+    }
+  ) });
 }
 
 // src/useZorealAutoLogin.ts
-var import_react4 = require("react");
+var import_react5 = require("react");
 function useZorealAutoLogin(options) {
   const { login } = useZorealFlow({
     flow: "browser-direct",
@@ -523,8 +1192,8 @@ function useZorealAutoLogin(options) {
     },
     onNonOAuthError: (e) => options.onError?.(e)
   });
-  const fired = (0, import_react4.useRef)(false);
-  (0, import_react4.useEffect)(() => {
+  const fired = (0, import_react5.useRef)(false);
+  (0, import_react5.useEffect)(() => {
     if (options.disabled || fired.current) return;
     fired.current = true;
     login();
@@ -546,6 +1215,8 @@ function hasGrantedAnyScopeZoreal(response, firstScope, ...restScopes) {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  DEFAULT_PAIRING_TIMEOUT_MS,
+  PairingModal,
   ZorealLogin,
   ZorealOAuthProvider,
   hasGrantedAllScopesZoreal,