@pelican-identity/react 2.0.9 → 2.0.10

package/dist/index.mjs

@@ -1,5 +1,5 @@
 import { useEffect, useState, useRef, useCallback } from 'react';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { PelicanAuthentication } from '@pelican-identity/auth-core';
 
 // src/components/PelicanAuth.tsx
@@ -253,134 +253,469 @@ var PelicanAuth = (config) => {
       start();
     }
   }, [config.continuousMode]);
-  return /* @__PURE__ */ jsxs("section", { children: [
-    /* @__PURE__ */ jsx(
-      "div",
-      {
-        style: {
-          maxWidth: "275px",
-          justifyContent: "space-between",
-          alignItems: "center",
-          width: "100%"
-        },
-        children: !config.continuousMode && /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              width: "100%",
-              display: "flex",
-              justifyContent: "space-between",
-              alignItems: "center"
-            },
-            children: [
-              /* @__PURE__ */ jsx(
-                "button",
-                {
-                  type: "button",
-                  style: {
-                    border: "none",
-                    background: "transparent",
-                    cursor: "pointer"
-                  },
-                  onClick: () => {
-                    start();
-                  },
-                  disabled: config.continuousMode,
-                  children: config.buttonComponent ? config.buttonComponent : /* @__PURE__ */ jsx(
-                    PelicanButton_default,
-                    {
-                      authType: config.authType,
-                      text: config.buttonText
-                    }
-                  )
-                }
-              ),
-              state !== "idle" && /* @__PURE__ */ jsx(
-                "button",
-                {
-                  onClick: () => {
-                    stop();
-                    config.onClose?.();
-                  },
-                  className: "close-button",
-                  "aria-label": "Close",
-                  type: "button",
-                  children: /* @__PURE__ */ jsx(
-                    "svg",
-                    {
-                      className: "close-icon",
-                      fill: "#fff",
-                      stroke: "#fff",
-                      viewBox: "0 0 24 24",
-                      role: "img",
-                      "aria-label": "close icon",
-                      children: /* @__PURE__ */ jsx(
-                        "path",
-                        {
-                          strokeLinecap: "round",
-                          strokeLinejoin: "round",
-                          strokeWidth: 4,
-                          d: "M6 18L18 6M6 6l12 12"
-                        }
-                      )
-                    }
-                  )
-                }
-              )
-            ]
-          }
-        )
-      }
-    ),
-    state !== "idle" && /* @__PURE__ */ jsxs("div", { className: "auth-container", children: [
-      successMessage && /* @__PURE__ */ jsxs("div", { className: "success-message", style: { textAlign: "center" }, children: [
-        successMessage,
-        config.continuousMode && /* @__PURE__ */ jsx(
-          "p",
-          {
-            style: {
-              fontSize: "0.8rem",
-              marginTop: "0.5rem",
-              color: "#f3f3f3",
-              textAlign: "center"
-            },
-            children: "Preparing next session..."
-          }
-        )
-      ] }),
-      error && state === "error" && /* @__PURE__ */ jsx("div", { className: "error-wrapper", children: /* @__PURE__ */ jsx("p", { className: "error-message", children: error.message }) }),
-      isProcessing ? /* @__PURE__ */ jsxs("div", { className: "content-wrapper", children: [
-        /* @__PURE__ */ jsx("h2", { className: "main-heading", children: "one sec..." }),
-        /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: "loader",
-            style: { margin: "1rem auto", width: "252px" }
-          }
-        )
-      ] }) : /* @__PURE__ */ jsx("div", { className: "content-wrapper", children: state === "awaiting-pair" && !successMessage && /* @__PURE__ */ jsxs("div", { className: "unpaired-container", children: [
-        !deeplink && !config.forceQRCode && /* @__PURE__ */ jsx("h2", { className: "main-heading", children: "Open Pelican Vault" }),
-        !config.forceQRCode && deeplink ? /* @__PURE__ */ jsxs("div", { className: "mobile-auth-container", children: [
-          /* @__PURE__ */ jsx("div", { className: "logo-container", children: /* @__PURE__ */ jsx(
-            "img",
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("style", { children: `@keyframes fadeUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes successPulse {
+  0%,
+  100% {
+    transform: scale(1);
+    opacity: 1;
+  }
+  50% {
+    transform: scale(1.05);
+    opacity: 0.9;
+  }
+}
+
+.auth-container {
+  width: 300px;
+  max-width: fit-content;
+  padding: 1rem;
+  margin-top: 0.3rem;
+  position: relative;
+  animation: fadeUp 0.5s ease-out;
+  background-color: #fcfcfc;
+  border-radius: 2.5rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+  min-height: 320px;
+}
+.js-auth-container {
+  width: 300px;
+  max-width: fit-content;
+  padding: 1rem;
+  margin-top: 0.3rem;
+  position: relative;
+  background-color: #fcfcfc;
+  border-radius: 2.5rem;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  align-items: center;
+  gap: 1rem;
+  min-height: 320px;
+}
+
+.close-button {
+  background-color: #2b2b2bff;
+  border: none;
+  cursor: pointer;
+  transition: opacity 0.2s;
+  height: 1.5rem;
+  width: 1.5rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+}
+
+.close-button:hover {
+  opacity: 0.6;
+}
+
+.close-icon {
+  width: 1.5rem;
+  height: 1.5rem;
+  fill: #000000;
+}
+
+.retry-container {
+  text-align: center;
+  padding: 3rem 0;
+}
+
+.retry-container > div:first-child {
+  margin-bottom: 1rem;
+}
+
+.retry-text {
+  font-size: 1.125rem;
+  font-family: Onest, system-ui, Avenir, Helvetica, Arial, sans-serif;
+}
+
+.content-wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 2rem;
+}
+
+.unpaired-container {
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+}
+
+.main-heading {
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: #585858;
+  font-family: Onest, system-ui, Avenir, Helvetica, Arial, sans-serif;
+}
+
+@media (min-width: 768px) {
+  .main-heading {
+    font-size: 1rem;
+    font-family: Onest, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  }
+}
+
+@media (min-width: 1024px) {
+  .main-heading {
+    font-size: 1rem;
+    font-family: Onest, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  }
+}
+
+.mobile-auth-container {
+  display: flex;
+  flex-direction: column;
+  gap: 0.7rem;
+  width: 253px;
+}
+
+.logo-container {
+  display: flex;
+  justify-content: center;
+  padding: 2rem 0;
+}
+
+.open-app-link {
+  display: inline-block;
+  padding: 0.75rem 2rem;
+  background-color: #2b2b2bff;
+  width: fit-content;
+  align-self: center;
+
+  border-radius: 18px;
+  color: #fff;
+  font-weight: 600;
+  font-size: 1rem;
+  text-decoration: none;
+  transition: background-color 0.2s;
+  font-family: Onest, system-ui, Avenir, Helvetica, Arial, sans-serif;
+}
+
+.open-app-link:hover {
+  background-color: rgba(217, 235, 27, 0.9);
+  color: #000;
+}
+
+.helper-text {
+  font-size: 0.75rem;
+  color: #6b7280;
+  font-family: Onest, system-ui, Avenir, Helvetica, Arial, sans-serif;
+}
+
+.qr-container {
+  display: flex;
+  justify-content: center;
+}
+
+.qr-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  border-radius: 2rem;
+  background-color: #fff;
+  padding: 0.2rem;
+  height: 244px;
+  width: 244px;
+}
+
+.qr-image {
+  height: 90%;
+  width: 90%;
+}
+
+.loader-container {
+  display: flex;
+  justify-content: center;
+}
+
+.instruction-text {
+  font-size: 0.875rem;
+  color: #9ca3af;
+  font-family: Onest, system-ui, Avenir, Helvetica, Arial, sans-serif;
+}
+
+.paired-container {
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  max-width: 250px;
+}
+
+.paired-heading {
+  font-size: 1rem;
+  font-weight: 800;
+  font-family: Onest, system-ui, Avenir, Helvetica, Arial, sans-serif;
+}
+
+@media (min-width: 768px) {
+  .paired-heading {
+    font-size: 1rem;
+    font-family: Onest, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  }
+}
+
+.success-message {
+  background-color: #121212;
+  color: #d9eb1b;
+  padding: 0.5rem 1rem;
+  border-radius: 1.3rem;
+  font-weight: 700;
+  font-size: 1rem;
+  animation: successPulse 0.2s ease-in-out;
+  margin: 0.5rem 0;
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  width: 300px;
+  max-width: fit-content;
+}
+
+.auto-renew-badge {
+  display: inline-block;
+  background-color: rgba(217, 235, 27, 0.2);
+  border: 1px solid #d9eb1b;
+  color: #d9eb1b;
+  padding: 0.25rem 0.75rem;
+  border-radius: 9999px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  margin-top: 0.5rem;
+}
+
+.error-wrapper {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  border-radius: 1.5rem;
+  border: 1px solid rgb(255, 236, 236);
+  background-color: rgb(255, 255, 255);
+  width: 250px;
+  height: 80px;
+}
+
+.error-message {
+  font-size: 0.75rem;
+  font-weight: 400;
+  color: rgb(255, 139, 139);
+  font-family: Onest, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  max-width: 70%;
+}
+
+.loader {
+  width: 48px;
+  height: 48px;
+  position: relative;
+}
+.loader::before,
+.loader::after {
+  content: "";
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  width: 48em;
+  height: 48em;
+  background-image: radial-gradient(circle 10px, #585858 100%, transparent 0),
+    radial-gradient(circle 10px, #585858 100%, transparent 0),
+    radial-gradient(circle 10px, #585858 100%, transparent 0),
+    radial-gradient(circle 10px, #585858 100%, transparent 0),
+    radial-gradient(circle 10px, #585858 100%, transparent 0),
+    radial-gradient(circle 10px, #585858 100%, transparent 0),
+    radial-gradient(circle 10px, #585858 100%, transparent 0),
+    radial-gradient(circle 10px, #585858 100%, transparent 0),
+    radial-gradient(circle 10px, #585858 100%, transparent 0);
+  background-position: 0em -18em, 0em 18em, 18em 0em, -18em 0em, 13em -13em,
+    -13em -13em, 13em 13em, -13em 13em;
+  background-repeat: no-repeat;
+  font-size: 0.5px;
+  border-radius: 50%;
+  animation: blast 1s ease-in infinite;
+}
+.loader::after {
+  font-size: 1px;
+  background: #585858;
+  animation: bounce 1s ease-in infinite;
+}
+
+@keyframes bounce {
+  0%,
+  100% {
+    font-size: 0.75px;
+  }
+  50% {
+    font-size: 1.5px;
+  }
+}
+@keyframes blast {
+  0%,
+  40% {
+    font-size: 0.5px;
+  }
+  70% {
+    opacity: 1;
+    font-size: 4px;
+  }
+  100% {
+    font-size: 6px;
+    opacity: 0;
+  }
+}
+` }),
+    /* @__PURE__ */ jsxs("section", { children: [
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            maxWidth: "275px",
+            justifyContent: "space-between",
+            alignItems: "center",
+            width: "100%"
+          },
+          children: !config.continuousMode && /* @__PURE__ */ jsxs(
+            "div",
+            {
+              style: {
+                width: "100%",
+                display: "flex",
+                justifyContent: "space-between",
+                alignItems: "center"
+              },
+              children: [
+                /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    type: "button",
+                    style: {
+                      border: "none",
+                      background: "transparent",
+                      cursor: "pointer"
+                    },
+                    onClick: () => {
+                      start();
+                    },
+                    disabled: config.continuousMode,
+                    children: config.buttonComponent ? config.buttonComponent : /* @__PURE__ */ jsx(
+                      PelicanButton_default,
+                      {
+                        authType: config.authType,
+                        text: config.buttonText
+                      }
+                    )
+                  }
+                ),
+                state !== "idle" && /* @__PURE__ */ jsx(
+                  "button",
+                  {
+                    onClick: () => {
+                      stop();
+                      config.onClose?.();
+                    },
+                    className: "close-button",
+                    "aria-label": "Close",
+                    type: "button",
+                    children: /* @__PURE__ */ jsx(
+                      "svg",
+                      {
+                        className: "close-icon",
+                        fill: "#fff",
+                        stroke: "#fff",
+                        viewBox: "0 0 24 24",
+                        role: "img",
+                        "aria-label": "close icon",
+                        children: /* @__PURE__ */ jsx(
+                          "path",
+                          {
+                            strokeLinecap: "round",
+                            strokeLinejoin: "round",
+                            strokeWidth: 4,
+                            d: "M6 18L18 6M6 6l12 12"
+                          }
+                        )
+                      }
+                    )
+                  }
+                )
+              ]
+            }
+          )
+        }
+      ),
+      state !== "idle" && /* @__PURE__ */ jsxs("div", { className: "auth-container", children: [
+        successMessage && /* @__PURE__ */ jsxs("div", { className: "success-message", style: { textAlign: "center" }, children: [
+          successMessage,
+          config.continuousMode && /* @__PURE__ */ jsx(
+            "p",
             {
-              src: "https://res.cloudinary.com/de0jr8mcm/image/upload/v1765904735/pelican/pelican_icon_r9ghqw.png ",
-              alt: "Pelican Logo",
-              style: { width: "80px", height: "80px" }
+              style: {
+                fontSize: "0.8rem",
+                marginTop: "0.5rem",
+                color: "#f3f3f3",
+                textAlign: "center"
+              },
+              children: "Preparing next session..."
             }
-          ) }),
-          /* @__PURE__ */ jsx("a", { href: deeplink, className: "open-app-link", children: "Open Pelican Vault" }),
-          /* @__PURE__ */ jsxs("p", { className: "helper-text", children: [
-            "Open the app to",
-            " ",
-            config.authType === "login" ? "login" : config.authType === "signup" ? "signup" : config.authType === "id-verification" ? "verify identity" : "authenticate"
-          ] })
-        ] }) : config.forceQRCode && qr && state === "awaiting-pair" || !config.forceQRCode && qr && state === "awaiting-pair" ? /* @__PURE__ */ jsx("div", { className: "qr-container", children: /* @__PURE__ */ jsxs("div", { className: "qr-wrapper", children: [
-          qr && /* @__PURE__ */ jsx("img", { src: qr, alt: "QR Code", className: "qr-image" }),
-          !qr && /* @__PURE__ */ jsx("span", { className: "loader" })
-        ] }) }) : /* @__PURE__ */ jsx("div", { className: "loader-container", children: /* @__PURE__ */ jsx("span", { className: "loader" }) })
-      ] }) }),
-      /* @__PURE__ */ jsx(StoreIcons_default, {})
+          )
+        ] }),
+        error && state === "error" && /* @__PURE__ */ jsx("div", { className: "error-wrapper", children: /* @__PURE__ */ jsx("p", { className: "error-message", children: error.message }) }),
+        isProcessing ? /* @__PURE__ */ jsxs("div", { className: "content-wrapper", children: [
+          /* @__PURE__ */ jsx("h2", { className: "main-heading", children: "one sec..." }),
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: "loader",
+              style: { margin: "1rem auto", width: "252px" }
+            }
+          )
+        ] }) : /* @__PURE__ */ jsx("div", { className: "content-wrapper", children: state === "awaiting-pair" && !successMessage && /* @__PURE__ */ jsxs("div", { className: "unpaired-container", children: [
+          !deeplink && !config.forceQRCode && /* @__PURE__ */ jsx("h2", { className: "main-heading", children: "Open Pelican Vault" }),
+          !config.forceQRCode && deeplink ? /* @__PURE__ */ jsxs("div", { className: "mobile-auth-container", children: [
+            /* @__PURE__ */ jsx("div", { className: "logo-container", children: /* @__PURE__ */ jsx(
+              "img",
+              {
+                src: "https://res.cloudinary.com/de0jr8mcm/image/upload/v1765904735/pelican/pelican_icon_r9ghqw.png ",
+                alt: "Pelican Logo",
+                style: { width: "80px", height: "80px" }
+              }
+            ) }),
+            /* @__PURE__ */ jsx("a", { href: deeplink, className: "open-app-link", children: "Open Pelican Vault" }),
+            /* @__PURE__ */ jsxs("p", { className: "helper-text", children: [
+              "Open the app to",
+              " ",
+              config.authType === "login" ? "login" : config.authType === "signup" ? "signup" : config.authType === "id-verification" ? "verify identity" : "authenticate"
+            ] })
+          ] }) : config.forceQRCode && qr && state === "awaiting-pair" || !config.forceQRCode && qr && state === "awaiting-pair" ? /* @__PURE__ */ jsx("div", { className: "qr-container", children: /* @__PURE__ */ jsxs("div", { className: "qr-wrapper", children: [
+            qr && /* @__PURE__ */ jsx("img", { src: qr, alt: "QR Code", className: "qr-image" }),
+            !qr && /* @__PURE__ */ jsx("span", { className: "loader" })
+          ] }) }) : /* @__PURE__ */ jsx("div", { className: "loader-container", children: /* @__PURE__ */ jsx("span", { className: "loader" }) })
+        ] }) }),
+        /* @__PURE__ */ jsx(StoreIcons_default, {})
+      ] })
     ] })
   ] });
 };