@cal.macconnachie/web-components 0.0.16 → 0.0.18

package/dist/components/auth.js

@@ -1,5 +1,5 @@
 const z = globalThis, Z = z.ShadowRoot && (z.ShadyCSS === void 0 || z.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, Q = Symbol(), ot = /* @__PURE__ */ new WeakMap();
-let $t = class {
+let wt = class {
   constructor(t, s, i) {
     if (this._$cssResult$ = !0, i !== Q) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
     this.cssText = t, this.t = s;
@@ -17,13 +17,13 @@ let $t = class {
     return this.cssText;
   }
 };
-const xt = (e) => new $t(typeof e == "string" ? e : e + "", void 0, Q), Et = (e, ...t) => {
+const xt = (e) => new wt(typeof e == "string" ? e : e + "", void 0, Q), Et = (e, ...t) => {
   const s = e.length === 1 ? e[0] : t.reduce(((i, r, o) => i + ((a) => {
     if (a._$cssResult$ === !0) return a.cssText;
     if (typeof a == "number") return a;
     throw Error("Value passed to 'css' function must be a 'css' function result: " + a + ". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.");
   })(r) + e[o + 1]), e[0]);
-  return new $t(s, e, Q);
+  return new wt(s, e, Q);
 }, Tt = (e, t) => {
   if (Z) e.adoptedStyleSheets = t.map(((s) => s instanceof CSSStyleSheet ? s : s.styleSheet));
   else for (const s of t) {
@@ -35,7 +35,7 @@ const xt = (e) => new $t(typeof e == "string" ? e : e + "", void 0, Q), Et = (e,
   for (const i of t.cssRules) s += i.cssText;
   return xt(s);
 })(e) : e;
-const { is: Pt, defineProperty: Ot, getOwnPropertyDescriptor: Dt, getOwnPropertyNames: Ut, getOwnPropertySymbols: Rt, getPrototypeOf: It } = Object, F = globalThis, nt = F.trustedTypes, Nt = nt ? nt.emptyScript : "", Lt = F.reactiveElementPolyfillSupport, M = (e, t) => e, Y = { toAttribute(e, t) {
+const { is: Pt, defineProperty: Ot, getOwnPropertyDescriptor: Dt, getOwnPropertyNames: Ut, getOwnPropertySymbols: Rt, getPrototypeOf: It } = Object, F = globalThis, nt = F.trustedTypes, Nt = nt ? nt.emptyScript : "", Lt = F.reactiveElementPolyfillSupport, H = (e, t) => e, Y = { toAttribute(e, t) {
   switch (t) {
     case Boolean:
       e = e ? Nt : null;
@@ -93,13 +93,13 @@ let U = class extends HTMLElement {
     return this.elementProperties.get(t) ?? lt;
   }
   static _$Ei() {
-    if (this.hasOwnProperty(M("elementProperties"))) return;
+    if (this.hasOwnProperty(H("elementProperties"))) return;
     const t = It(this);
     t.finalize(), t.l !== void 0 && (this.l = [...t.l]), this.elementProperties = new Map(t.elementProperties);
   }
   static finalize() {
-    if (this.hasOwnProperty(M("finalized"))) return;
-    if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(M("properties"))) {
+    if (this.hasOwnProperty(H("finalized"))) return;
+    if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(H("properties"))) {
       const s = this.properties, i = [...Ut(s), ...Rt(s)];
       for (const r of i) this.createProperty(r, s[r]);
     }
@@ -246,10 +246,10 @@ let U = class extends HTMLElement {
   firstUpdated(t) {
   }
 };
-U.elementStyles = [], U.shadowRootOptions = { mode: "open" }, U[M("elementProperties")] = /* @__PURE__ */ new Map(), U[M("finalized")] = /* @__PURE__ */ new Map(), Lt?.({ ReactiveElement: U }), (F.reactiveElementVersions ??= []).push("2.1.1");
-const tt = globalThis, K = tt.trustedTypes, ht = K ? K.createPolicy("lit-html", { createHTML: (e) => e }) : void 0, bt = "$lit$", C = `lit$${Math.random().toFixed(9).slice(2)}$`, vt = "?" + C, Mt = `<${vt}>`, D = document, j = () => D.createComment(""), q = (e) => e === null || typeof e != "object" && typeof e != "function", et = Array.isArray, Ht = (e) => et(e) || typeof e?.[Symbol.iterator] == "function", W = `[ 	
+U.elementStyles = [], U.shadowRootOptions = { mode: "open" }, U[H("elementProperties")] = /* @__PURE__ */ new Map(), U[H("finalized")] = /* @__PURE__ */ new Map(), Lt?.({ ReactiveElement: U }), (F.reactiveElementVersions ??= []).push("2.1.1");
+const tt = globalThis, K = tt.trustedTypes, ht = K ? K.createPolicy("lit-html", { createHTML: (e) => e }) : void 0, bt = "$lit$", C = `lit$${Math.random().toFixed(9).slice(2)}$`, vt = "?" + C, Ht = `<${vt}>`, D = document, j = () => D.createComment(""), q = (e) => e === null || typeof e != "object" && typeof e != "function", et = Array.isArray, Mt = (e) => et(e) || typeof e?.[Symbol.iterator] == "function", W = `[ 	
 \f\r]`, N = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, ct = /-->/g, dt = />/g, T = RegExp(`>|${W}(?:([^\\s"'>=/]+)(${W}*=${W}*(?:[^ 	
-\f\r"'\`<>=]|("|')|))|$)`, "g"), pt = /'/g, ut = /"/g, At = /^(?:script|style|textarea|title)$/i, jt = (e) => (t, ...s) => ({ _$litType$: e, strings: t, values: s }), y = jt(1), x = Symbol.for("lit-noChange"), g = Symbol.for("lit-nothing"), gt = /* @__PURE__ */ new WeakMap(), O = D.createTreeWalker(D, 129);
+\f\r"'\`<>=]|("|')|))|$)`, "g"), pt = /'/g, ut = /"/g, At = /^(?:script|style|textarea|title)$/i, jt = (e) => (t, ...s) => ({ _$litType$: e, strings: t, values: s }), f = jt(1), x = Symbol.for("lit-noChange"), g = Symbol.for("lit-nothing"), gt = /* @__PURE__ */ new WeakMap(), O = D.createTreeWalker(D, 129);
 function _t(e, t) {
   if (!et(e) || !e.hasOwnProperty("raw")) throw Error("invalid template strings array");
   return ht !== void 0 ? ht.createHTML(t) : t;
@@ -262,7 +262,7 @@ const qt = (e, t) => {
     let h, d, l = -1, p = 0;
     for (; p < n.length && (a.lastIndex = p, d = a.exec(n), d !== null); ) p = a.lastIndex, a === N ? d[1] === "!--" ? a = ct : d[1] !== void 0 ? a = dt : d[2] !== void 0 ? (At.test(d[2]) && (r = RegExp("</" + d[2], "g")), a = T) : d[3] !== void 0 && (a = T) : a === T ? d[0] === ">" ? (a = r ?? N, l = -1) : d[1] === void 0 ? l = -2 : (l = a.lastIndex - d[2].length, h = d[1], a = d[3] === void 0 ? T : d[3] === '"' ? ut : pt) : a === ut || a === pt ? a = T : a === ct || a === dt ? a = N : (a = T, r = void 0);
     const u = a === T && e[c + 1].startsWith("/>") ? " " : "";
-    o += a === N ? n + Mt : l >= 0 ? (i.push(h), n.slice(0, l) + bt + n.slice(l) + C + u) : n + C + (l === -2 ? c : u);
+    o += a === N ? n + Ht : l >= 0 ? (i.push(h), n.slice(0, l) + bt + n.slice(l) + C + u) : n + C + (l === -2 ? c : u);
   }
   return [_t(e, o + (e[s] || "<?>") + (t === 2 ? "</svg>" : t === 3 ? "</math>" : "")), i];
 };
@@ -279,8 +279,8 @@ class B {
     for (; (r = O.nextNode()) !== null && n.length < c; ) {
       if (r.nodeType === 1) {
         if (r.hasAttributes()) for (const l of r.getAttributeNames()) if (l.endsWith(bt)) {
-          const p = d[a++], u = r.getAttribute(l).split(C), w = /([.?@])?(.*)/.exec(p);
-          n.push({ type: 1, index: o, name: w[2], strings: u, ctor: w[1] === "." ? zt : w[1] === "?" ? Yt : w[1] === "@" ? Kt : V }), r.removeAttribute(l);
+          const p = d[a++], u = r.getAttribute(l).split(C), $ = /([.?@])?(.*)/.exec(p);
+          n.push({ type: 1, index: o, name: $[2], strings: u, ctor: $[1] === "." ? zt : $[1] === "?" ? Yt : $[1] === "@" ? Kt : V }), r.removeAttribute(l);
         } else l.startsWith(C) && (n.push({ type: 6, index: o }), r.removeAttribute(l));
         if (At.test(r.tagName)) {
           const l = r.textContent.split(C), p = l.length - 1;
@@ -356,7 +356,7 @@ class I {
     return this._$AB;
   }
   _$AI(t, s = this) {
-    t = R(this, t, s), q(t) ? t === g || t == null || t === "" ? (this._$AH !== g && this._$AR(), this._$AH = g) : t !== this._$AH && t !== x && this._(t) : t._$litType$ !== void 0 ? this.$(t) : t.nodeType !== void 0 ? this.T(t) : Ht(t) ? this.k(t) : this._(t);
+    t = R(this, t, s), q(t) ? t === g || t == null || t === "" ? (this._$AH !== g && this._$AR(), this._$AH = g) : t !== this._$AH && t !== x && this._(t) : t._$litType$ !== void 0 ? this.$(t) : t.nodeType !== void 0 ? this.T(t) : Mt(t) ? this.k(t) : this._(t);
   }
   O(t) {
     return this._$AA.parentNode.insertBefore(t, this._$AB);
@@ -473,7 +473,7 @@ const Gt = (e, t, s) => {
   return r._$AI(e), r;
 };
 const st = globalThis;
-let H = class extends U {
+let M = class extends U {
   constructor() {
     super(...arguments), this.renderOptions = { host: this }, this._$Do = void 0;
   }
@@ -495,9 +495,9 @@ let H = class extends U {
     return x;
   }
 };
-H._$litElement$ = !0, H.finalized = !0, st.litElementHydrateSupport?.({ LitElement: H });
+M._$litElement$ = !0, M.finalized = !0, st.litElementHydrateSupport?.({ LitElement: M });
 const Jt = st.litElementPolyfillSupport;
-Jt?.({ LitElement: H });
+Jt?.({ LitElement: M });
 (st.litElementVersions ??= []).push("4.2.1");
 const Zt = (e) => (t, s) => {
   s !== void 0 ? s.addInitializer((() => {
@@ -609,7 +609,7 @@ const yt = (e, t, s) => {
   const i = /* @__PURE__ */ new Map();
   for (let r = t; r <= s; r++) i.set(e[r], r);
   return i;
-}, wt = kt(class extends Ct {
+}, $t = kt(class extends Ct {
   constructor(e) {
     if (super(e), e.type !== St.CHILD) throw Error("repeat() can only be used in text expressions");
   }
@@ -628,24 +628,24 @@ const yt = (e, t, s) => {
     const r = re(e), { values: o, keys: a } = this.dt(t, s, i);
     if (!Array.isArray(r)) return this.ut = a, o;
     const c = this.ut ??= [], n = [];
-    let h, d, l = 0, p = r.length - 1, u = 0, w = o.length - 1;
-    for (; l <= p && u <= w; ) if (r[l] === null) l++;
+    let h, d, l = 0, p = r.length - 1, u = 0, $ = o.length - 1;
+    for (; l <= p && u <= $; ) if (r[l] === null) l++;
     else if (r[p] === null) p--;
     else if (c[l] === a[u]) n[u] = P(r[l], o[u]), l++, u++;
-    else if (c[p] === a[w]) n[w] = P(r[p], o[w]), p--, w--;
-    else if (c[l] === a[w]) n[w] = P(r[l], o[w]), L(e, n[w + 1], r[l]), l++, w--;
+    else if (c[p] === a[$]) n[$] = P(r[p], o[$]), p--, $--;
+    else if (c[l] === a[$]) n[$] = P(r[l], o[$]), L(e, n[$ + 1], r[l]), l++, $--;
     else if (c[p] === a[u]) n[u] = P(r[p], o[u]), L(e, r[l], r[p]), p--, u++;
-    else if (h === void 0 && (h = yt(a, u, w), d = yt(c, l, p)), h.has(c[l])) if (h.has(c[p])) {
+    else if (h === void 0 && (h = yt(a, u, $), d = yt(c, l, p)), h.has(c[l])) if (h.has(c[p])) {
       const v = d.get(a[u]), A = v !== void 0 ? r[v] : null;
       if (A === null) {
-        const $ = L(e, r[l]);
-        P($, o[u]), n[u] = $;
+        const w = L(e, r[l]);
+        P(w, o[u]), n[u] = w;
       } else n[u] = P(A, o[u]), L(e, r[l], A), r[v] = null;
       u++;
     } else G(r[p]), p--;
     else G(r[l]), l++;
-    for (; u <= w; ) {
-      const v = L(e, n[w + 1]);
+    for (; u <= $; ) {
+      const v = L(e, n[$ + 1]);
       P(v, o[u]), n[u++] = v;
     }
     for (; l <= p; ) {
@@ -674,7 +674,7 @@ const yt = (e, t, s) => {
       refreshToken: p,
       idToken: u
     }) => {
-      const w = await fetch(`${e}${t.login}`, {
+      const $ = await fetch(`${e}${t.login}`, {
         method: "POST",
         headers: {
           "Content-Type": "application/json"
@@ -687,11 +687,11 @@ const yt = (e, t, s) => {
           idToken: u
         })
       });
-      if (!w.ok) {
-        const v = await w.json();
+      if (!$.ok) {
+        const v = await $.json();
         throw new Error(v.message || v.error || "Login failed");
       }
-      return w.json();
+      return $.json();
     },
     logout: async ({
       accessToken: h,
@@ -753,7 +753,7 @@ const yt = (e, t, s) => {
       phone_number: l,
       family_name: p,
       given_name: u,
-      code: w
+      code: $
     }) => {
       const v = await fetch(`${e}${t.register}`, {
         method: "POST",
@@ -766,7 +766,7 @@ const yt = (e, t, s) => {
           phone_number: l,
           family_name: p,
           given_name: u,
-          code: w
+          code: $
         })
       });
       if (!v.ok) {
@@ -830,11 +830,11 @@ const yt = (e, t, s) => {
       maxAge: l,
       path: p = "/",
       secure: u = window.location.protocol === "https:",
-      sameSite: w = "lax",
+      sameSite: $ = "lax",
       domain: v
     } = d;
     let A = `${encodeURIComponent(n)}=${encodeURIComponent(h)}`;
-    l !== void 0 && (A += `; Max-Age=${l}`), A += `; Path=${p}`, u && (A += "; Secure"), A += `; SameSite=${w}`, v && (A += `; Domain=${v}`), document.cookie = A;
+    l !== void 0 && (A += `; Max-Age=${l}`), A += `; Path=${p}`, u && (A += "; Secure"), A += `; SameSite=${$}`, v && (A += `; Domain=${v}`), document.cookie = A;
   }, t = (n) => {
     const h = encodeURIComponent(n) + "=", d = document.cookie.split(";");
     for (let l = 0; l < d.length; l++) {
@@ -882,20 +882,20 @@ const yt = (e, t, s) => {
     domain: e,
     clientId: i,
     redirectUri: he(r)
-  }, a = ($) => {
-    const _ = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-._~", k = new Uint8Array($);
+  }, a = (w) => {
+    const _ = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-._~", k = new Uint8Array(w);
     return crypto.getRandomValues(k), Array.from(k).map((E) => _[E % _.length]).join("");
-  }, c = async ($) => {
-    const k = new TextEncoder().encode($), E = await crypto.subtle.digest("SHA-256", k);
+  }, c = async (w) => {
+    const k = new TextEncoder().encode(w), E = await crypto.subtle.digest("SHA-256", k);
     return btoa(String.fromCharCode(...new Uint8Array(E))).replace(/\+/g, "-").replace(/\//g, "_").replace(/=/g, "");
   }, n = async () => {
-    const $ = a(128), _ = await c($);
-    return sessionStorage.setItem("pkce_code_verifier", $), { codeVerifier: $, codeChallenge: _ };
+    const w = a(128), _ = await c(w);
+    return sessionStorage.setItem("pkce_code_verifier", w), { codeVerifier: w, codeChallenge: _ };
   }, h = () => {
-    const $ = a(32);
-    return sessionStorage.setItem("oauth_state", $), $;
+    const w = a(32);
+    return sessionStorage.setItem("oauth_state", w), w;
   }, d = async () => {
-    const { codeChallenge: $ } = await n(), _ = h(), k = new URLSearchParams({
+    const { codeChallenge: w } = await n(), _ = h(), k = new URLSearchParams({
       response_type: "code",
       client_id: o.clientId,
       redirect_uri: o.redirectUri,
@@ -903,15 +903,15 @@ const yt = (e, t, s) => {
       scope: "openid email profile",
       state: _,
       code_challenge_method: "S256",
-      code_challenge: $,
+      code_challenge: w,
       prompt: "select_account"
     });
     return `${o.domain}/oauth2/authorize?${k.toString()}`;
   }, l = async () => {
-    const $ = await d();
-    window.location.href = $;
+    const w = await d();
+    window.location.href = w;
   }, p = async () => {
-    const { codeChallenge: $ } = await n(), _ = h(), k = new URLSearchParams({
+    const { codeChallenge: w } = await n(), _ = h(), k = new URLSearchParams({
       response_type: "code",
       client_id: o.clientId,
       redirect_uri: o.redirectUri,
@@ -919,32 +919,32 @@ const yt = (e, t, s) => {
       scope: "openid email profile",
       state: _,
       code_challenge_method: "S256",
-      code_challenge: $
+      code_challenge: w
     });
     return `${o.domain}/oauth2/authorize?${k.toString()}`;
   }, u = async () => {
-    const $ = await p();
-    window.location.href = $;
-  }, w = ($) => {
+    const w = await p();
+    window.location.href = w;
+  }, $ = (w) => {
     const _ = sessionStorage.getItem("oauth_state");
-    return sessionStorage.removeItem("oauth_state"), _ === $;
+    return sessionStorage.removeItem("oauth_state"), _ === w;
   }, v = () => {
-    const $ = sessionStorage.getItem("pkce_code_verifier");
-    return sessionStorage.removeItem("pkce_code_verifier"), $;
+    const w = sessionStorage.getItem("pkce_code_verifier");
+    return sessionStorage.removeItem("pkce_code_verifier"), w;
   };
   return {
     redirectToGoogleAuth: l,
     redirectToAppleAuth: u,
-    validateState: w,
+    validateState: $,
     getCodeVerifier: v,
-    exchangeCodeForTokens: async ($) => {
+    exchangeCodeForTokens: async (w) => {
       const _ = v();
       if (!_)
         throw new Error("PKCE code verifier not found. Please restart the authentication flow.");
       const k = new URLSearchParams({
         grant_type: "authorization_code",
         client_id: o.clientId,
-        code: $,
+        code: w,
         redirect_uri: o.redirectUri,
         code_verifier: _
       }), E = await fetch(`${o.domain}/oauth2/token`, {
@@ -1461,7 +1461,7 @@ const yt = (e, t, s) => {
         transition: none !important;
       }
     }`;
-var pe = Object.defineProperty, ue = Object.getOwnPropertyDescriptor, f = (e, t, s, i) => {
+var pe = Object.defineProperty, ue = Object.getOwnPropertyDescriptor, y = (e, t, s, i) => {
   for (var r = i > 1 ? void 0 : i ? ue(t, s) : t, o = e.length - 1, a; o >= 0; o--)
     (a = e[o]) && (r = (i ? a(t, s, r) : a(r)) || r);
   return i && r && pe(t, s, r), r;
@@ -1477,7 +1477,7 @@ const ge = [
   "token_type",
   "expires_in"
 ];
-let m = class extends H {
+let m = class extends M {
   constructor() {
     super(...arguments), this.open = !1, this.initialMode = "signin", this.logoUrl = "", this.baseUrl = "", this.oauthDomain = "", this.oauthRegion = "", this.oauthUserPoolId = "", this.oauthClientId = "", this.oauthRedirectUri = "", this.oauthSpaDomain = "", this.size = "sm", this.theme = "light", this.disableSignup = !1, this.mode = "signin", this.resetStep = "none", this.signupStep = "form", this.isLoading = !1, this.isClosing = !1, this.isVisible = !1, this.isLoggedIn = !1, this.email = "", this.password = "", this.givenName = "", this.familyName = "", this.newPassword = "", this.confirmPassword = "", this.notice = "", this.error = "", this.errors = {}, this.otpDigits = ["", "", "", "", "", ""], this.signupOtpDigits = ["", "", "", "", "", ""], this.isDragging = !1, this.dragStartY = 0, this.dragCurrentY = 0, this.dragStartTime = 0, this.lastDragEndTime = 0, this.cookies = ne(), this.scrollPosition = 0, this.transitionDuration = 300, this.hasHandledOAuthCallback = !1, this.boundKeyHandler = (e) => {
       e.key === "Escape" && this.isVisible && this.handleClose();
@@ -1790,7 +1790,7 @@ let m = class extends H {
     }), await this.handleSignIn();
   }
   isUserLoggedIn() {
-    return this.isLoggedIn;
+    return this.isLoggedIn || !!this.cookies.getAuthToken("ACCESS_TOKEN") && !!this.cookies.getAuthToken("REFRESH_TOKEN") && !!this.cookies.getAuthToken("AUTH_TOKEN");
   }
   async logout() {
     const e = this.cookies.getAuthToken("ACCESS_TOKEN"), t = this.cookies.getAuthToken("AUTH_TOKEN"), s = this.cookies.getAuthToken("REFRESH_TOKEN");
@@ -1909,7 +1909,7 @@ let m = class extends H {
       "modal-container--dragging": this.isDragging,
       [`modal-container--${this.size}`]: !0
     };
-    return y`
+    return f`
       <!-- Modal/Drawer -->
       <div
         class=${mt(e)}
@@ -1949,8 +1949,8 @@ let m = class extends H {
   renderContent() {
     if (!this.hasApiBaseUrl()) {
       const e = this.baseUrlErrorMessage;
-      return y`
-        ${this.logoUrl.length > 0 ? y`
+      return f`
+        ${this.logoUrl.length > 0 ? f`
               <header class="modal-header">
                 <div class="auth-header">
                 <img
@@ -1973,9 +1973,34 @@ let m = class extends H {
         </div>
       `;
     }
-    return this.isLoggedIn ? y`
+    return this.isLoading && this.hasHandledOAuthCallback ? f`
+        ${this.logoUrl.length > 0 ? f`
+              <header class="modal-header">
+                <div class="auth-header">
+                <img
+                  src="${this.logoUrl}"
+                  width="48"
+                  height="48"
+                  alt="Logo"
+                  class="auth-logo"
+                />
+                </div>
+              </header>
+            ` : g}
+
+        <div class="modal-body">
+          <div class="auth-form">
+            <div class="form-actions">
+              <button type="button" class="cta" disabled>
+                Signing in...
+              </button>
+            </div>
+            ${this.renderAlerts()}
+          </div>
+        </div>
+      ` : this.isLoggedIn ? f`
         <!-- Header -->
-        ${this.logoUrl.length > 0 ? y`
+        ${this.logoUrl.length > 0 ? f`
               <header class="modal-header">
                 <div class="auth-header">
                 <img
@@ -1998,9 +2023,9 @@ let m = class extends H {
             ${this.renderAlerts()}
           </div>
         </div>
-      ` : y`
+      ` : f`
       <!-- Header -->
-      ${(!this.mode || this.resetStep === "none") && this.logoUrl.length > 0 && this.mode === "signin" ? y`
+      ${(!this.mode || this.resetStep === "none") && this.logoUrl.length > 0 && this.mode === "signin" ? f`
             <header class="modal-header">
 
                 <div class="auth-header">
@@ -2034,7 +2059,7 @@ let m = class extends H {
   }
   renderFormContent() {
     if (this.resetStep === "none" && (!this.mode || this.mode === "signin" || this.signupStep === "form"))
-      return y`
+      return f`
         <!-- Email -->
         <label class="field">
           <span class="field-label">Email Address</span>
@@ -2048,7 +2073,7 @@ let m = class extends H {
             required
             autocomplete="email"
           />
-          ${this.errors.email ? y`<span class="field-error">${this.errors.email}</span>` : g}
+          ${this.errors.email ? f`<span class="field-error">${this.errors.email}</span>` : g}
         </label>
 
         <!-- Password -->
@@ -2063,10 +2088,10 @@ let m = class extends H {
             required
             autocomplete=${this.mode === "signup" ? "new-password" : "current-password"}
           />
-          ${this.errors.password ? y`<span class="field-error">${this.errors.password}</span>` : g}
+          ${this.errors.password ? f`<span class="field-error">${this.errors.password}</span>` : g}
         </label>
 
-        ${this.mode === "signin" && this.error ? y`
+        ${this.mode === "signin" && this.error ? f`
               <div class="forgot-row">
                 <button type="button" class="text-btn" @click=${this.startReset}>
                   Forgot your password?
@@ -2074,7 +2099,7 @@ let m = class extends H {
               </div>
             ` : g}
 
-        ${this.mode === "signup" ? y`
+        ${this.mode === "signup" ? f`
               <!-- Confirm Password -->
               <label class="field">
                 <span class="field-label">Confirm Password</span>
@@ -2087,7 +2112,7 @@ let m = class extends H {
                   required
                   autocomplete="new-password"
                 />
-                ${this.errors.confirm_password ? y`<span class="field-error">${this.errors.confirm_password}</span>` : g}
+                ${this.errors.confirm_password ? f`<span class="field-error">${this.errors.confirm_password}</span>` : g}
               </label>
 
               <!-- First Name -->
@@ -2102,7 +2127,7 @@ let m = class extends H {
                   required
                   autocomplete="given-name"
                 />
-                ${this.errors.givenName ? y`<span class="field-error">${this.errors.givenName}</span>` : g}
+                ${this.errors.givenName ? f`<span class="field-error">${this.errors.givenName}</span>` : g}
               </label>
 
               <!-- Last Name -->
@@ -2117,19 +2142,19 @@ let m = class extends H {
                   required
                   autocomplete="family-name"
                 />
-                ${this.errors.familyName ? y`<span class="field-error">${this.errors.familyName}</span>` : g}
+                ${this.errors.familyName ? f`<span class="field-error">${this.errors.familyName}</span>` : g}
               </label>
             ` : g}
       `;
     if (this.mode === "signup" && this.signupStep === "otp")
-      return y`
+      return f`
         <div class="otp-section">
           <label class="otp-label">Enter 6-digit code</label>
           <div class="otp-inputs" role="group" aria-label="One time code">
-            ${wt(
+            ${$t(
         Array.from({ length: 6 }, (e, t) => t),
         (e) => e,
-        (e) => y`
+        (e) => f`
                 <input
                   class="otp-input signup-otp-input ${this.errors.signup_otp ? "otp-input--error" : ""}"
                   type="text"
@@ -2146,7 +2171,7 @@ let m = class extends H {
               `
       )}
           </div>
-          ${this.errors.signup_otp ? y`<p class="otp-error">${this.errors.signup_otp}</p>` : g}
+          ${this.errors.signup_otp ? f`<p class="otp-error">${this.errors.signup_otp}</p>` : g}
         </div>
         <div class="forgot-row">
           <button type="button" class="text-btn" @click=${this.backToSignupForm}>
@@ -2155,7 +2180,7 @@ let m = class extends H {
         </div>
       `;
     if (this.resetStep === "request")
-      return y`
+      return f`
         <label class="field">
           <span class="field-label">Email Address</span>
           <input
@@ -2168,7 +2193,7 @@ let m = class extends H {
             required
             autocomplete="email"
           />
-          ${this.errors.email ? y`<span class="field-error">${this.errors.email}</span>` : g}
+          ${this.errors.email ? f`<span class="field-error">${this.errors.email}</span>` : g}
         </label>
         <div class="forgot-row">
           <button type="button" class="text-btn" @click=${this.cancelReset}>
@@ -2178,7 +2203,7 @@ let m = class extends H {
       `;
     if (this.resetStep === "confirm") {
       const e = this.otpDigits.every((t) => /^\d$/.test(t));
-      return y`
+      return f`
         <label class="field">
           <span class="field-label">Email Address</span>
           <input
@@ -2190,16 +2215,16 @@ let m = class extends H {
             required
             autocomplete="email"
           />
-          ${this.errors.email ? y`<span class="field-error">${this.errors.email}</span>` : g}
+          ${this.errors.email ? f`<span class="field-error">${this.errors.email}</span>` : g}
         </label>
 
         <div class="otp-section">
           <label class="otp-label">Enter 6-digit code</label>
           <div class="otp-inputs" role="group" aria-label="One time code">
-            ${wt(
+            ${$t(
         Array.from({ length: 6 }, (t, s) => s),
         (t) => t,
-        (t) => y`
+        (t) => f`
                 <input
                   class="otp-input reset-otp-input ${this.errors.otp ? "otp-input--error" : ""}"
                   type="text"
@@ -2216,10 +2241,10 @@ let m = class extends H {
               `
       )}
           </div>
-          ${this.errors.otp ? y`<p class="otp-error">${this.errors.otp}</p>` : g}
+          ${this.errors.otp ? f`<p class="otp-error">${this.errors.otp}</p>` : g}
         </div>
 
-        ${e ? y`
+        ${e ? f`
               <div class="new-password-fields">
                 <label class="field">
                   <span class="field-label">New Password</span>
@@ -2232,7 +2257,7 @@ let m = class extends H {
                     required
                     autocomplete="new-password"
                   />
-                  ${this.errors.new_password ? y`<span class="field-error">${this.errors.new_password}</span>` : g}
+                  ${this.errors.new_password ? f`<span class="field-error">${this.errors.new_password}</span>` : g}
                 </label>
 
                 <label class="field">
@@ -2246,7 +2271,7 @@ let m = class extends H {
                     required
                     autocomplete="new-password"
                   />
-                  ${this.errors.confirm_password ? y`<span class="field-error">${this.errors.confirm_password}</span>` : g}
+                  ${this.errors.confirm_password ? f`<span class="field-error">${this.errors.confirm_password}</span>` : g}
                 </label>
               </div>
             ` : g}
@@ -2262,31 +2287,31 @@ let m = class extends H {
   }
   renderActions() {
     if (this.resetStep === "request")
-      return y`
+      return f`
         <button type="submit" class="cta" ?disabled=${this.isLoading}>
           ${this.isLoading ? "Sending..." : "Send Reset Code"}
         </button>
       `;
     if (this.resetStep === "confirm")
-      return this.otpDigits.every((t) => /^\d$/.test(t)) ? y`
+      return this.otpDigits.every((t) => /^\d$/.test(t)) ? f`
           <button type="submit" class="cta" ?disabled=${this.isLoading}>
             ${this.isLoading ? "Resetting..." : "Reset Password"}
           </button>
         ` : g;
     if (this.mode === "signup" && this.signupStep === "otp") {
       const e = this.signupOtpDigits.every((t) => /^\d$/.test(t));
-      return y`
+      return f`
         <button type="submit" class="cta" ?disabled=${!e || this.isLoading}>
           ${this.isLoading ? "Completing..." : "Complete Registration"}
         </button>
       `;
     }
-    return y`
+    return f`
       <button type="submit" class="cta" ?disabled=${this.isLoading}>
         ${this.isLoading ? "Loading..." : this.mode === "signup" ? "Continue" : "Sign In"}
       </button>
 
-      ${this.isOAuthConfigured() && this.mode === "signin" ? y`
+      ${this.isOAuthConfigured() && this.mode === "signin" ? f`
             <div class="button-row">
               <button
                 type="button"
@@ -2310,8 +2335,8 @@ let m = class extends H {
     `;
   }
   renderAlerts() {
-    return y`
-      ${this.notice ? y`
+    return f`
+      ${this.notice ? f`
             <div class="alert alert--success">
               ${this.notice}
               <button class="alert-close" @click=${() => this.notice = ""} aria-label="Dismiss">
@@ -2319,7 +2344,7 @@ let m = class extends H {
               </button>
             </div>
           ` : g}
-      ${this.error ? y`
+      ${this.error ? f`
             <div class="alert alert--error">
               ${this.error}
               <button class="alert-close" @click=${() => this.error = ""} aria-label="Dismiss">
@@ -2330,7 +2355,7 @@ let m = class extends H {
     `;
   }
   renderFooter() {
-    return this.isLoggedIn ? g : this.resetStep === "none" && (!this.mode || this.mode === "signin" || this.signupStep === "form") ? this.disableSignup ? g : y`
+    return this.isLoggedIn ? g : this.resetStep === "none" && (!this.mode || this.mode === "signin" || this.signupStep === "form") ? this.disableSignup ? g : f`
         <div class="auth-footer">
           <p class="toggle-text">
             ${this.mode === "signup" ? "Already have an account?" : "Don't have an account?"}
@@ -2339,7 +2364,7 @@ let m = class extends H {
             ${this.mode === "signup" ? "Sign In" : "Sign Up"}
           </button>
         </div>
-      ` : y`
+      ` : f`
       <div class="auth-footer">
         <p class="toggle-text">
           Having trouble? Email
@@ -2349,7 +2374,7 @@ let m = class extends H {
     `;
   }
   renderGoogleIcon() {
-    return y`
+    return f`
       <svg viewBox="-0.5 0 48 48" width="18" height="18" fill="none">
         <path d="M9.82727273,24 C9.82727273,22.4757333 10.0804318,21.0144 10.5322727,19.6437333 L2.62345455,13.6042667 C1.08206818,16.7338667 0.213636364,20.2602667 0.213636364,24 C0.213636364,27.7365333 1.081,31.2608 2.62025,34.3882667 L10.5247955,28.3370667 C10.0772273,26.9728 9.82727273,25.5168 9.82727273,24" fill="#FBBC05"></path>
         <path d="M23.7136364,10.1333333 C27.025,10.1333333 30.0159091,11.3066667 32.3659091,13.2266667 L39.2022727,6.4 C35.0363636,2.77333333 29.6954545,0.533333333 23.7136364,0.533333333 C14.4268636,0.533333333 6.44540909,5.84426667 2.62345455,13.6042667 L10.5322727,19.6437333 C12.3545909,14.112 17.5491591,10.1333333 23.7136364,10.1333333" fill="#EB4335"></path>
@@ -2359,7 +2384,7 @@ let m = class extends H {
     `;
   }
   renderAppleIcon() {
-    return y`
+    return f`
       <svg viewBox="-3.5 0 48 48" width="18" height="18" class="apple-icon">
         <path d="M231.174735,567.792499 C232.740177,565.771699 233.926883,562.915484 233.497649,560 C230.939077,560.177808 227.948466,561.814769 226.203475,563.948463 C224.612784,565.88177 223.305444,568.757742 223.816036,571.549042 C226.613071,571.636535 229.499881,569.960061 231.174735,567.792499 L231.174735,567.792499 Z M245,595.217241 C243.880625,597.712195 243.341978,598.827022 241.899976,601.03692 C239.888467,604.121745 237.052156,607.962958 233.53412,607.991182 C230.411652,608.02505 229.606488,605.94498 225.367451,605.970382 C221.128414,605.99296 220.244696,608.030695 217.116618,607.999649 C213.601387,607.968603 210.913765,604.502761 208.902256,601.417937 C203.27452,592.79849 202.68257,582.680377 206.152914,577.298162 C208.621711,573.476705 212.515678,571.241407 216.173986,571.241407 C219.89682,571.241407 222.239372,573.296075 225.322563,573.296075 C228.313175,573.296075 230.133913,571.235762 234.440281,571.235762 C237.700215,571.235762 241.153726,573.022307 243.611302,576.10431 C235.554045,580.546683 236.85858,592.121127 245,595.217241 L245,595.217241 Z" transform="translate(-204.000000, -560.000000)" fill="#0b0b0a"></path>
       </svg>
@@ -2399,124 +2424,124 @@ let m = class extends H {
   }
 };
 m.styles = de();
-f([
+y([
   S({ type: Boolean, reflect: !0 })
 ], m.prototype, "open", 2);
-f([
+y([
   S({ type: String, attribute: "initial-mode" })
 ], m.prototype, "initialMode", 2);
-f([
+y([
   S({ type: String, attribute: "logo-url" })
 ], m.prototype, "logoUrl", 2);
-f([
+y([
   S({ type: String, attribute: "api-domain" })
 ], m.prototype, "baseUrl", 2);
-f([
+y([
   S({ type: String, attribute: "oauth-domain" })
 ], m.prototype, "oauthDomain", 2);
-f([
+y([
   S({ type: String, attribute: "oauth-region" })
 ], m.prototype, "oauthRegion", 2);
-f([
+y([
   S({ type: String, attribute: "oauth-user-pool-id" })
 ], m.prototype, "oauthUserPoolId", 2);
-f([
+y([
   S({ type: String, attribute: "oauth-client-id" })
 ], m.prototype, "oauthClientId", 2);
-f([
+y([
   S({ type: String, attribute: "oauth-redirect-uri" })
 ], m.prototype, "oauthRedirectUri", 2);
-f([
+y([
   S({ type: String, attribute: "oauth-spa-domain" })
 ], m.prototype, "oauthSpaDomain", 2);
-f([
+y([
   S({ type: String, attribute: "size" })
 ], m.prototype, "size", 2);
-f([
+y([
   S({ type: String, attribute: "data-theme", reflect: !0 })
 ], m.prototype, "theme", 2);
-f([
+y([
   S({ type: Boolean, attribute: "disable-signup" })
 ], m.prototype, "disableSignup", 2);
-f([
+y([
   b()
 ], m.prototype, "mode", 2);
-f([
+y([
   b()
 ], m.prototype, "resetStep", 2);
-f([
+y([
   b()
 ], m.prototype, "signupStep", 2);
-f([
+y([
   b()
 ], m.prototype, "isLoading", 2);
-f([
+y([
   b()
 ], m.prototype, "isClosing", 2);
-f([
+y([
   b()
 ], m.prototype, "isVisible", 2);
-f([
+y([
   b()
 ], m.prototype, "isLoggedIn", 2);
-f([
+y([
   b()
 ], m.prototype, "email", 2);
-f([
+y([
   b()
 ], m.prototype, "password", 2);
-f([
+y([
   b()
 ], m.prototype, "givenName", 2);
-f([
+y([
   b()
 ], m.prototype, "familyName", 2);
-f([
+y([
   b()
 ], m.prototype, "newPassword", 2);
-f([
+y([
   b()
 ], m.prototype, "confirmPassword", 2);
-f([
+y([
   b()
 ], m.prototype, "notice", 2);
-f([
+y([
   b()
 ], m.prototype, "error", 2);
-f([
+y([
   b()
 ], m.prototype, "errors", 2);
-f([
+y([
   b()
 ], m.prototype, "otpDigits", 2);
-f([
+y([
   b()
 ], m.prototype, "signupOtpDigits", 2);
-f([
+y([
   b()
 ], m.prototype, "isDragging", 2);
-f([
+y([
   b()
 ], m.prototype, "dragStartY", 2);
-f([
+y([
   b()
 ], m.prototype, "dragCurrentY", 2);
-f([
+y([
   b()
 ], m.prototype, "dragStartTime", 2);
-f([
+y([
   b()
 ], m.prototype, "lastDragEndTime", 2);
-f([
+y([
   it(".modal-container")
 ], m.prototype, "modalContainer", 2);
-f([
+y([
   it("#email-input")
 ], m.prototype, "emailInput", 2);
-f([
+y([
   it(".modal-body")
 ], m.prototype, "modalBody", 2);
-m = f([
+m = y([
   Zt("auth-drawer")
 ], m);
 export {