@wral/studio.mods.auth 1.0.0 → 2.0.0

package/dist/auth.es.js

@@ -1,24 +1,21 @@
-import { getToken as Y } from "./lib.es.js";
-function k(r, ...e) {
-  return (...t) => r(...e, ...t);
-}
+import { getToken as fe } from "./lib.es.js";
 /**
  * @license
  * Copyright 2019 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const F = globalThis, V = F.ShadowRoot && (F.ShadyCSS === void 0 || F.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, Q = Symbol(), Z = /* @__PURE__ */ new WeakMap();
-let ce = class {
+const q = globalThis, G = q.ShadowRoot && (q.ShadyCSS === void 0 || q.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, V = Symbol(), K = /* @__PURE__ */ new WeakMap();
+let ae = class {
   constructor(e, t, s) {
-    if (this._$cssResult$ = !0, s !== Q) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
+    if (this._$cssResult$ = !0, s !== V) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
     this.cssText = e, this.t = t;
   }
   get styleSheet() {
     let e = this.o;
     const t = this.t;
-    if (V && e === void 0) {
+    if (G && e === void 0) {
       const s = t !== void 0 && t.length === 1;
-      s && (e = Z.get(t)), e === void 0 && ((this.o = e = new CSSStyleSheet()).replaceSync(this.cssText), s && Z.set(t, e));
+      s && (e = K.get(t)), e === void 0 && ((this.o = e = new CSSStyleSheet()).replaceSync(this.cssText), s && K.set(t, e));
     }
     return e;
   }
@@ -26,33 +23,33 @@ let ce = class {
     return this.cssText;
   }
 };
-const be = (r) => new ce(typeof r == "string" ? r : r + "", void 0, Q), q = (r, ...e) => {
+const ge = (r) => new ae(typeof r == "string" ? r : r + "", void 0, V), J = (r, ...e) => {
   const t = r.length === 1 ? r[0] : e.reduce((s, o, i) => s + ((n) => {
     if (n._$cssResult$ === !0) return n.cssText;
     if (typeof n == "number") return n;
     throw Error("Value passed to 'css' function must be a 'css' function result: " + n + ". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.");
   })(o) + r[i + 1], r[0]);
-  return new ce(t, r, Q);
-}, ve = (r, e) => {
-  if (V) r.adoptedStyleSheets = e.map((t) => t instanceof CSSStyleSheet ? t : t.styleSheet);
+  return new ae(t, r, V);
+}, $e = (r, e) => {
+  if (G) r.adoptedStyleSheets = e.map((t) => t instanceof CSSStyleSheet ? t : t.styleSheet);
   else for (const t of e) {
-    const s = document.createElement("style"), o = F.litNonce;
+    const s = document.createElement("style"), o = q.litNonce;
     o !== void 0 && s.setAttribute("nonce", o), s.textContent = t.cssText, r.appendChild(s);
   }
-}, X = V ? (r) => r : (r) => r instanceof CSSStyleSheet ? ((e) => {
+}, Y = G ? (r) => r : (r) => r instanceof CSSStyleSheet ? ((e) => {
   let t = "";
   for (const s of e.cssRules) t += s.cssText;
-  return be(t);
+  return ge(t);
 })(r) : r;
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const { is: _e, defineProperty: Ae, getOwnPropertyDescriptor: Ee, getOwnPropertyNames: Pe, getOwnPropertySymbols: Se, getPrototypeOf: Ce } = Object, w = globalThis, ee = w.trustedTypes, xe = ee ? ee.emptyScript : "", z = w.reactiveElementPolyfillSupport, U = (r, e) => r, G = { toAttribute(r, e) {
+const { is: ye, defineProperty: be, getOwnPropertyDescriptor: _e, getOwnPropertyNames: we, getOwnPropertySymbols: ve, getPrototypeOf: Ae } = Object, $ = globalThis, Z = $.trustedTypes, Ee = Z ? Z.emptyScript : "", I = $.reactiveElementPolyfillSupport, U = (r, e) => r, W = { toAttribute(r, e) {
   switch (e) {
     case Boolean:
-      r = r ? xe : null;
+      r = r ? Ee : null;
       break;
     case Object:
     case Array:
@@ -77,23 +74,23 @@ const { is: _e, defineProperty: Ae, getOwnPropertyDescriptor: Ee, getOwnProperty
       }
   }
   return t;
-} }, de = (r, e) => !_e(r, e), te = { attribute: !0, type: String, converter: G, reflect: !1, hasChanged: de };
-Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), w.litPropertyMetadata ?? (w.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
-class P extends HTMLElement {
+} }, le = (r, e) => !ye(r, e), X = { attribute: !0, type: String, converter: W, reflect: !1, hasChanged: le };
+Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), $.litPropertyMetadata ?? ($.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
+class S extends HTMLElement {
   static addInitializer(e) {
     this._$Ei(), (this.l ?? (this.l = [])).push(e);
   }
   static get observedAttributes() {
     return this.finalize(), this._$Eh && [...this._$Eh.keys()];
   }
-  static createProperty(e, t = te) {
+  static createProperty(e, t = X) {
     if (t.state && (t.attribute = !1), this._$Ei(), this.elementProperties.set(e, t), !t.noAccessor) {
       const s = Symbol(), o = this.getPropertyDescriptor(e, s, t);
-      o !== void 0 && Ae(this.prototype, e, o);
+      o !== void 0 && be(this.prototype, e, o);
     }
   }
   static getPropertyDescriptor(e, t, s) {
-    const { get: o, set: i } = Ee(this.prototype, e) ?? { get() {
+    const { get: o, set: i } = _e(this.prototype, e) ?? { get() {
       return this[t];
     }, set(n) {
       this[t] = n;
@@ -106,17 +103,17 @@ class P extends HTMLElement {
     }, configurable: !0, enumerable: !0 };
   }
   static getPropertyOptions(e) {
-    return this.elementProperties.get(e) ?? te;
+    return this.elementProperties.get(e) ?? X;
   }
   static _$Ei() {
     if (this.hasOwnProperty(U("elementProperties"))) return;
-    const e = Ce(this);
+    const e = Ae(this);
     e.finalize(), e.l !== void 0 && (this.l = [...e.l]), this.elementProperties = new Map(e.elementProperties);
   }
   static finalize() {
     if (this.hasOwnProperty(U("finalized"))) return;
     if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(U("properties"))) {
-      const t = this.properties, s = [...Pe(t), ...Se(t)];
+      const t = this.properties, s = [...we(t), ...ve(t)];
       for (const o of s) this.createProperty(o, t[o]);
     }
     const e = this[Symbol.metadata];
@@ -135,8 +132,8 @@ class P extends HTMLElement {
     const t = [];
     if (Array.isArray(e)) {
       const s = new Set(e.flat(1 / 0).reverse());
-      for (const o of s) t.unshift(X(o));
-    } else e !== void 0 && t.push(X(e));
+      for (const o of s) t.unshift(Y(o));
+    } else e !== void 0 && t.push(Y(e));
     return t;
   }
   static _$Eu(e, t) {
@@ -165,7 +162,7 @@ class P extends HTMLElement {
   }
   createRenderRoot() {
     const e = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
-    return ve(e, this.constructor.elementStyles), e;
+    return $e(e, this.constructor.elementStyles), e;
   }
   connectedCallback() {
     var e;
@@ -190,7 +187,7 @@ class P extends HTMLElement {
     var i;
     const s = this.constructor.elementProperties.get(e), o = this.constructor._$Eu(e, s);
     if (o !== void 0 && s.reflect === !0) {
-      const n = (((i = s.converter) == null ? void 0 : i.toAttribute) !== void 0 ? s.converter : G).toAttribute(t, s.type);
+      const n = (((i = s.converter) == null ? void 0 : i.toAttribute) !== void 0 ? s.converter : W).toAttribute(t, s.type);
       this._$Em = e, n == null ? this.removeAttribute(o) : this.setAttribute(o, n), this._$Em = null;
     }
   }
@@ -198,13 +195,13 @@ class P extends HTMLElement {
     var i;
     const s = this.constructor, o = s._$Eh.get(e);
     if (o !== void 0 && this._$Em !== o) {
-      const n = s.getPropertyOptions(o), l = typeof n.converter == "function" ? { fromAttribute: n.converter } : ((i = n.converter) == null ? void 0 : i.fromAttribute) !== void 0 ? n.converter : G;
+      const n = s.getPropertyOptions(o), l = typeof n.converter == "function" ? { fromAttribute: n.converter } : ((i = n.converter) == null ? void 0 : i.fromAttribute) !== void 0 ? n.converter : W;
       this._$Em = o, this[o] = l.fromAttribute(t, n.type), this._$Em = null;
     }
   }
   requestUpdate(e, t, s) {
     if (e !== void 0) {
-      if (s ?? (s = this.constructor.getPropertyOptions(e)), !(s.hasChanged ?? de)(this[e], t)) return;
+      if (s ?? (s = this.constructor.getPropertyOptions(e)), !(s.hasChanged ?? le)(this[e], t)) return;
       this.P(e, t, s);
     }
     this.isUpdatePending === !1 && (this._$ES = this._$ET());
@@ -277,59 +274,59 @@ class P extends HTMLElement {
   firstUpdated(e) {
   }
 }
-P.elementStyles = [], P.shadowRootOptions = { mode: "open" }, P[U("elementProperties")] = /* @__PURE__ */ new Map(), P[U("finalized")] = /* @__PURE__ */ new Map(), z == null || z({ ReactiveElement: P }), (w.reactiveElementVersions ?? (w.reactiveElementVersions = [])).push("2.0.4");
+S.elementStyles = [], S.shadowRootOptions = { mode: "open" }, S[U("elementProperties")] = /* @__PURE__ */ new Map(), S[U("finalized")] = /* @__PURE__ */ new Map(), I == null || I({ ReactiveElement: S }), ($.reactiveElementVersions ?? ($.reactiveElementVersions = [])).push("2.0.4");
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const R = globalThis, M = R.trustedTypes, re = M ? M.createPolicy("lit-html", { createHTML: (r) => r }) : void 0, he = "$lit$", $ = `lit$${Math.random().toFixed(9).slice(2)}$`, ue = "?" + $, ke = `<${ue}>`, A = document, O = () => A.createComment(""), N = (r) => r === null || typeof r != "object" && typeof r != "function", J = Array.isArray, Te = (r) => J(r) || typeof (r == null ? void 0 : r[Symbol.iterator]) == "function", j = `[ 	
-\f\r]`, T = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, se = /-->/g, oe = />/g, v = RegExp(`>|${j}(?:([^\\s"'>=/]+)(${j}*=${j}*(?:[^ 	
-\f\r"'\`<>=]|("|')|))|$)`, "g"), ie = /'/g, ne = /"/g, pe = /^(?:script|style|textarea|title)$/i, Ue = (r) => (e, ...t) => ({ _$litType$: r, strings: e, values: t }), c = Ue(1), S = Symbol.for("lit-noChange"), p = Symbol.for("lit-nothing"), ae = /* @__PURE__ */ new WeakMap(), _ = A.createTreeWalker(A, 129);
-function me(r, e) {
-  if (!J(r) || !r.hasOwnProperty("raw")) throw Error("invalid template strings array");
-  return re !== void 0 ? re.createHTML(e) : e;
+const T = globalThis, M = T.trustedTypes, ee = M ? M.createPolicy("lit-html", { createHTML: (r) => r }) : void 0, he = "$lit$", g = `lit$${Math.random().toFixed(9).slice(2)}$`, ce = "?" + g, Se = `<${ce}>`, A = document, k = () => A.createComment(""), O = (r) => r === null || typeof r != "object" && typeof r != "function", Q = Array.isArray, Ce = (r) => Q(r) || typeof (r == null ? void 0 : r[Symbol.iterator]) == "function", z = `[ 	
+\f\r]`, x = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, te = /-->/g, se = />/g, b = RegExp(`>|${z}(?:([^\\s"'>=/]+)(${z}*=${z}*(?:[^ 	
+\f\r"'\`<>=]|("|')|))|$)`, "g"), re = /'/g, oe = /"/g, de = /^(?:script|style|textarea|title)$/i, Pe = (r) => (e, ...t) => ({ _$litType$: r, strings: e, values: t }), p = Pe(1), C = Symbol.for("lit-noChange"), u = Symbol.for("lit-nothing"), ie = /* @__PURE__ */ new WeakMap(), w = A.createTreeWalker(A, 129);
+function ue(r, e) {
+  if (!Q(r) || !r.hasOwnProperty("raw")) throw Error("invalid template strings array");
+  return ee !== void 0 ? ee.createHTML(e) : e;
 }
-const Re = (r, e) => {
+const xe = (r, e) => {
   const t = r.length - 1, s = [];
-  let o, i = e === 2 ? "<svg>" : e === 3 ? "<math>" : "", n = T;
+  let o, i = e === 2 ? "<svg>" : e === 3 ? "<math>" : "", n = x;
   for (let l = 0; l < t; l++) {
     const a = r[l];
-    let u, d, h = -1, m = 0;
-    for (; m < a.length && (n.lastIndex = m, d = n.exec(a), d !== null); ) m = n.lastIndex, n === T ? d[1] === "!--" ? n = se : d[1] !== void 0 ? n = oe : d[2] !== void 0 ? (pe.test(d[2]) && (o = RegExp("</" + d[2], "g")), n = v) : d[3] !== void 0 && (n = v) : n === v ? d[0] === ">" ? (n = o ?? T, h = -1) : d[1] === void 0 ? h = -2 : (h = n.lastIndex - d[2].length, u = d[1], n = d[3] === void 0 ? v : d[3] === '"' ? ne : ie) : n === ne || n === ie ? n = v : n === se || n === oe ? n = T : (n = v, o = void 0);
-    const f = n === v && r[l + 1].startsWith("/>") ? " " : "";
-    i += n === T ? a + ke : h >= 0 ? (s.push(u), a.slice(0, h) + he + a.slice(h) + $ + f) : a + $ + (h === -2 ? l : f);
+    let d, h, c = -1, m = 0;
+    for (; m < a.length && (n.lastIndex = m, h = n.exec(a), h !== null); ) m = n.lastIndex, n === x ? h[1] === "!--" ? n = te : h[1] !== void 0 ? n = se : h[2] !== void 0 ? (de.test(h[2]) && (o = RegExp("</" + h[2], "g")), n = b) : h[3] !== void 0 && (n = b) : n === b ? h[0] === ">" ? (n = o ?? x, c = -1) : h[1] === void 0 ? c = -2 : (c = n.lastIndex - h[2].length, d = h[1], n = h[3] === void 0 ? b : h[3] === '"' ? oe : re) : n === oe || n === re ? n = b : n === te || n === se ? n = x : (n = b, o = void 0);
+    const f = n === b && r[l + 1].startsWith("/>") ? " " : "";
+    i += n === x ? a + Se : c >= 0 ? (s.push(d), a.slice(0, c) + he + a.slice(c) + g + f) : a + g + (c === -2 ? l : f);
   }
-  return [me(r, i + (r[t] || "<?>") + (e === 2 ? "</svg>" : e === 3 ? "</math>" : "")), s];
+  return [ue(r, i + (r[t] || "<?>") + (e === 2 ? "</svg>" : e === 3 ? "</math>" : "")), s];
 };
-class H {
+class R {
   constructor({ strings: e, _$litType$: t }, s) {
     let o;
     this.parts = [];
     let i = 0, n = 0;
-    const l = e.length - 1, a = this.parts, [u, d] = Re(e, t);
-    if (this.el = H.createElement(u, s), _.currentNode = this.el.content, t === 2 || t === 3) {
-      const h = this.el.content.firstChild;
-      h.replaceWith(...h.childNodes);
+    const l = e.length - 1, a = this.parts, [d, h] = xe(e, t);
+    if (this.el = R.createElement(d, s), w.currentNode = this.el.content, t === 2 || t === 3) {
+      const c = this.el.content.firstChild;
+      c.replaceWith(...c.childNodes);
     }
-    for (; (o = _.nextNode()) !== null && a.length < l; ) {
+    for (; (o = w.nextNode()) !== null && a.length < l; ) {
       if (o.nodeType === 1) {
-        if (o.hasAttributes()) for (const h of o.getAttributeNames()) if (h.endsWith(he)) {
-          const m = d[n++], f = o.getAttribute(h).split($), L = /([.?@])?(.*)/.exec(m);
-          a.push({ type: 1, index: i, name: L[2], strings: f, ctor: L[1] === "." ? Ne : L[1] === "?" ? He : L[1] === "@" ? qe : I }), o.removeAttribute(h);
-        } else h.startsWith($) && (a.push({ type: 6, index: i }), o.removeAttribute(h));
-        if (pe.test(o.tagName)) {
-          const h = o.textContent.split($), m = h.length - 1;
+        if (o.hasAttributes()) for (const c of o.getAttributeNames()) if (c.endsWith(he)) {
+          const m = h[n++], f = o.getAttribute(c).split(g), y = /([.?@])?(.*)/.exec(m);
+          a.push({ type: 1, index: i, name: y[2], strings: f, ctor: y[1] === "." ? Te : y[1] === "?" ? ke : y[1] === "@" ? Oe : D }), o.removeAttribute(c);
+        } else c.startsWith(g) && (a.push({ type: 6, index: i }), o.removeAttribute(c));
+        if (de.test(o.tagName)) {
+          const c = o.textContent.split(g), m = c.length - 1;
           if (m > 0) {
             o.textContent = M ? M.emptyScript : "";
-            for (let f = 0; f < m; f++) o.append(h[f], O()), _.nextNode(), a.push({ type: 2, index: ++i });
-            o.append(h[m], O());
+            for (let f = 0; f < m; f++) o.append(c[f], k()), w.nextNode(), a.push({ type: 2, index: ++i });
+            o.append(c[m], k());
           }
         }
-      } else if (o.nodeType === 8) if (o.data === ue) a.push({ type: 2, index: i });
+      } else if (o.nodeType === 8) if (o.data === ce) a.push({ type: 2, index: i });
       else {
-        let h = -1;
-        for (; (h = o.data.indexOf($, h + 1)) !== -1; ) a.push({ type: 7, index: i }), h += $.length - 1;
+        let c = -1;
+        for (; (c = o.data.indexOf(g, c + 1)) !== -1; ) a.push({ type: 7, index: i }), c += g.length - 1;
       }
       i++;
     }
@@ -339,14 +336,14 @@ class H {
     return s.innerHTML = e, s;
   }
 }
-function C(r, e, t = r, s) {
+function P(r, e, t = r, s) {
   var n, l;
-  if (e === S) return e;
+  if (e === C) return e;
   let o = s !== void 0 ? (n = t._$Co) == null ? void 0 : n[s] : t._$Cl;
-  const i = N(e) ? void 0 : e._$litDirective$;
-  return (o == null ? void 0 : o.constructor) !== i && ((l = o == null ? void 0 : o._$AO) == null || l.call(o, !1), i === void 0 ? o = void 0 : (o = new i(r), o._$AT(r, t, s)), s !== void 0 ? (t._$Co ?? (t._$Co = []))[s] = o : t._$Cl = o), o !== void 0 && (e = C(r, o._$AS(r, e.values), o, s)), e;
+  const i = O(e) ? void 0 : e._$litDirective$;
+  return (o == null ? void 0 : o.constructor) !== i && ((l = o == null ? void 0 : o._$AO) == null || l.call(o, !1), i === void 0 ? o = void 0 : (o = new i(r), o._$AT(r, t, s)), s !== void 0 ? (t._$Co ?? (t._$Co = []))[s] = o : t._$Cl = o), o !== void 0 && (e = P(r, o._$AS(r, e.values), o, s)), e;
 }
-class Oe {
+class Ue {
   constructor(e, t) {
     this._$AV = [], this._$AN = void 0, this._$AD = e, this._$AM = t;
   }
@@ -358,29 +355,29 @@ class Oe {
   }
   u(e) {
     const { el: { content: t }, parts: s } = this._$AD, o = ((e == null ? void 0 : e.creationScope) ?? A).importNode(t, !0);
-    _.currentNode = o;
-    let i = _.nextNode(), n = 0, l = 0, a = s[0];
+    w.currentNode = o;
+    let i = w.nextNode(), n = 0, l = 0, a = s[0];
     for (; a !== void 0; ) {
       if (n === a.index) {
-        let u;
-        a.type === 2 ? u = new D(i, i.nextSibling, this, e) : a.type === 1 ? u = new a.ctor(i, a.name, a.strings, this, e) : a.type === 6 && (u = new De(i, this, e)), this._$AV.push(u), a = s[++l];
+        let d;
+        a.type === 2 ? d = new H(i, i.nextSibling, this, e) : a.type === 1 ? d = new a.ctor(i, a.name, a.strings, this, e) : a.type === 6 && (d = new Re(i, this, e)), this._$AV.push(d), a = s[++l];
       }
-      n !== (a == null ? void 0 : a.index) && (i = _.nextNode(), n++);
+      n !== (a == null ? void 0 : a.index) && (i = w.nextNode(), n++);
     }
-    return _.currentNode = A, o;
+    return w.currentNode = A, o;
   }
   p(e) {
     let t = 0;
     for (const s of this._$AV) s !== void 0 && (s.strings !== void 0 ? (s._$AI(e, s, t), t += s.strings.length - 2) : s._$AI(e[t])), t++;
   }
 }
-class D {
+class H {
   get _$AU() {
     var e;
     return ((e = this._$AM) == null ? void 0 : e._$AU) ?? this._$Cv;
   }
   constructor(e, t, s, o) {
-    this.type = 2, this._$AH = p, this._$AN = void 0, this._$AA = e, this._$AB = t, this._$AM = s, this.options = o, this._$Cv = (o == null ? void 0 : o.isConnected) ?? !0;
+    this.type = 2, this._$AH = u, this._$AN = void 0, this._$AA = e, this._$AB = t, this._$AM = s, this.options = o, this._$Cv = (o == null ? void 0 : o.isConnected) ?? !0;
   }
   get parentNode() {
     let e = this._$AA.parentNode;
@@ -394,7 +391,7 @@ class D {
     return this._$AB;
   }
   _$AI(e, t = this) {
-    e = C(this, e, t), N(e) ? e === p || e == null || e === "" ? (this._$AH !== p && this._$AR(), this._$AH = p) : e !== this._$AH && e !== S && this._(e) : e._$litType$ !== void 0 ? this.$(e) : e.nodeType !== void 0 ? this.T(e) : Te(e) ? this.k(e) : this._(e);
+    e = P(this, e, t), O(e) ? e === u || e == null || e === "" ? (this._$AH !== u && this._$AR(), this._$AH = u) : e !== this._$AH && e !== C && this._(e) : e._$litType$ !== void 0 ? this.$(e) : e.nodeType !== void 0 ? this.T(e) : Ce(e) ? this.k(e) : this._(e);
   }
   O(e) {
     return this._$AA.parentNode.insertBefore(e, this._$AB);
@@ -403,26 +400,26 @@ class D {
     this._$AH !== e && (this._$AR(), this._$AH = this.O(e));
   }
   _(e) {
-    this._$AH !== p && N(this._$AH) ? this._$AA.nextSibling.data = e : this.T(A.createTextNode(e)), this._$AH = e;
+    this._$AH !== u && O(this._$AH) ? this._$AA.nextSibling.data = e : this.T(A.createTextNode(e)), this._$AH = e;
   }
   $(e) {
     var i;
-    const { values: t, _$litType$: s } = e, o = typeof s == "number" ? this._$AC(e) : (s.el === void 0 && (s.el = H.createElement(me(s.h, s.h[0]), this.options)), s);
+    const { values: t, _$litType$: s } = e, o = typeof s == "number" ? this._$AC(e) : (s.el === void 0 && (s.el = R.createElement(ue(s.h, s.h[0]), this.options)), s);
     if (((i = this._$AH) == null ? void 0 : i._$AD) === o) this._$AH.p(t);
     else {
-      const n = new Oe(o, this), l = n.u(this.options);
+      const n = new Ue(o, this), l = n.u(this.options);
       n.p(t), this.T(l), this._$AH = n;
     }
   }
   _$AC(e) {
-    let t = ae.get(e.strings);
-    return t === void 0 && ae.set(e.strings, t = new H(e)), t;
+    let t = ie.get(e.strings);
+    return t === void 0 && ie.set(e.strings, t = new R(e)), t;
   }
   k(e) {
-    J(this._$AH) || (this._$AH = [], this._$AR());
+    Q(this._$AH) || (this._$AH = [], this._$AR());
     const t = this._$AH;
     let s, o = 0;
-    for (const i of e) o === t.length ? t.push(s = new D(this.O(O()), this.O(O()), this, this.options)) : s = t[o], s._$AI(i), o++;
+    for (const i of e) o === t.length ? t.push(s = new H(this.O(k()), this.O(k()), this, this.options)) : s = t[o], s._$AI(i), o++;
     o < t.length && (this._$AR(s && s._$AB.nextSibling, o), t.length = o);
   }
   _$AR(e = this._$AA.nextSibling, t) {
@@ -437,7 +434,7 @@ class D {
     this._$AM === void 0 && (this._$Cv = e, (t = this._$AP) == null || t.call(this, e));
   }
 }
-class I {
+class D {
   get tagName() {
     return this.element.tagName;
   }
@@ -445,46 +442,46 @@ class I {
     return this._$AM._$AU;
   }
   constructor(e, t, s, o, i) {
-    this.type = 1, this._$AH = p, this._$AN = void 0, this.element = e, this.name = t, this._$AM = o, this.options = i, s.length > 2 || s[0] !== "" || s[1] !== "" ? (this._$AH = Array(s.length - 1).fill(new String()), this.strings = s) : this._$AH = p;
+    this.type = 1, this._$AH = u, this._$AN = void 0, this.element = e, this.name = t, this._$AM = o, this.options = i, s.length > 2 || s[0] !== "" || s[1] !== "" ? (this._$AH = Array(s.length - 1).fill(new String()), this.strings = s) : this._$AH = u;
   }
   _$AI(e, t = this, s, o) {
     const i = this.strings;
     let n = !1;
-    if (i === void 0) e = C(this, e, t, 0), n = !N(e) || e !== this._$AH && e !== S, n && (this._$AH = e);
+    if (i === void 0) e = P(this, e, t, 0), n = !O(e) || e !== this._$AH && e !== C, n && (this._$AH = e);
     else {
       const l = e;
-      let a, u;
-      for (e = i[0], a = 0; a < i.length - 1; a++) u = C(this, l[s + a], t, a), u === S && (u = this._$AH[a]), n || (n = !N(u) || u !== this._$AH[a]), u === p ? e = p : e !== p && (e += (u ?? "") + i[a + 1]), this._$AH[a] = u;
+      let a, d;
+      for (e = i[0], a = 0; a < i.length - 1; a++) d = P(this, l[s + a], t, a), d === C && (d = this._$AH[a]), n || (n = !O(d) || d !== this._$AH[a]), d === u ? e = u : e !== u && (e += (d ?? "") + i[a + 1]), this._$AH[a] = d;
     }
     n && !o && this.j(e);
   }
   j(e) {
-    e === p ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, e ?? "");
+    e === u ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, e ?? "");
   }
 }
-class Ne extends I {
+class Te extends D {
   constructor() {
     super(...arguments), this.type = 3;
   }
   j(e) {
-    this.element[this.name] = e === p ? void 0 : e;
+    this.element[this.name] = e === u ? void 0 : e;
   }
 }
-class He extends I {
+class ke extends D {
   constructor() {
     super(...arguments), this.type = 4;
   }
   j(e) {
-    this.element.toggleAttribute(this.name, !!e && e !== p);
+    this.element.toggleAttribute(this.name, !!e && e !== u);
   }
 }
-class qe extends I {
+class Oe extends D {
   constructor(e, t, s, o, i) {
     super(e, t, s, o, i), this.type = 5;
   }
   _$AI(e, t = this) {
-    if ((e = C(this, e, t, 0) ?? p) === S) return;
-    const s = this._$AH, o = e === p && s !== p || e.capture !== s.capture || e.once !== s.once || e.passive !== s.passive, i = e !== p && (s === p || o);
+    if ((e = P(this, e, t, 0) ?? u) === C) return;
+    const s = this._$AH, o = e === u && s !== u || e.capture !== s.capture || e.once !== s.once || e.passive !== s.passive, i = e !== u && (s === u || o);
     o && this.element.removeEventListener(this.name, this, s), i && this.element.addEventListener(this.name, this, e), this._$AH = e;
   }
   handleEvent(e) {
@@ -492,7 +489,7 @@ class qe extends I {
     typeof this._$AH == "function" ? this._$AH.call(((t = this.options) == null ? void 0 : t.host) ?? this.element, e) : this._$AH.handleEvent(e);
   }
 }
-class De {
+class Re {
   constructor(e, t, s) {
     this.element = e, this.type = 6, this._$AN = void 0, this._$AM = t, this.options = s;
   }
@@ -500,17 +497,17 @@ class De {
     return this._$AM._$AU;
   }
   _$AI(e) {
-    C(this, e);
+    P(this, e);
   }
 }
-const W = R.litHtmlPolyfillSupport;
-W == null || W(H, D), (R.litHtmlVersions ?? (R.litHtmlVersions = [])).push("3.2.1");
-const Le = (r, e, t) => {
+const j = T.litHtmlPolyfillSupport;
+j == null || j(R, H), (T.litHtmlVersions ?? (T.litHtmlVersions = [])).push("3.2.1");
+const Ne = (r, e, t) => {
   const s = (t == null ? void 0 : t.renderBefore) ?? e;
   let o = s._$litPart$;
   if (o === void 0) {
     const i = (t == null ? void 0 : t.renderBefore) ?? null;
-    s._$litPart$ = o = new D(e.insertBefore(O(), i), i, void 0, t ?? {});
+    s._$litPart$ = o = new H(e.insertBefore(k(), i), i, void 0, t ?? {});
   }
   return o._$AI(r), o;
 };
@@ -519,7 +516,7 @@ const Le = (r, e, t) => {
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-class b extends P {
+class v extends S {
   constructor() {
     super(...arguments), this.renderOptions = { host: this }, this._$Do = void 0;
   }
@@ -530,7 +527,7 @@ class b extends P {
   }
   update(e) {
     const t = this.render();
-    this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(e), this._$Do = Le(t, this.renderRoot, this.renderOptions);
+    this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(e), this._$Do = Ne(t, this.renderRoot, this.renderOptions);
   }
   connectedCallback() {
     var e;
@@ -541,24 +538,53 @@ class b extends P {
     super.disconnectedCallback(), (e = this._$Do) == null || e.setConnected(!1);
   }
   render() {
-    return S;
+    return C;
   }
 }
-var le;
-b._$litElement$ = !0, b.finalized = !0, (le = globalThis.litElementHydrateSupport) == null || le.call(globalThis, { LitElement: b });
+var ne;
+v._$litElement$ = !0, v.finalized = !0, (ne = globalThis.litElementHydrateSupport) == null || ne.call(globalThis, { LitElement: v });
 const B = globalThis.litElementPolyfillSupport;
-B == null || B({ LitElement: b });
+B == null || B({ LitElement: v });
 (globalThis.litElementVersions ?? (globalThis.litElementVersions = [])).push("4.1.1");
-function x(r) {
+class He extends v {
+  static get styles() {
+    return J`
+			.login-layout {
+				display: flex;
+				flex-direction: column;
+				gap: 1rem;
+				justify-content: center;
+				align-items: center;
+				min-height: 100vh;
+				background-color: var(--color-gray-100);
+			}
+			.login-layout > * {
+				max-width: 400px;
+			}
+		`;
+  }
+  render() {
+    return p`
+			<div class="login-layout">
+				<slot name="main"></slot>
+			</div>
+		`;
+  }
+}
+customElements.get("mod-auth-layout") === void 0 && customElements.define("mod-auth-layout", He);
+function Le() {
+  return p`<mod-auth-layout></mod-auth-layout>`;
+}
+function N(r) {
   return {
     // Underlying mechanism to use the REST URLs directly.
     api: (e, t) => E(r, e, t),
     mintToken: ({ username: e, password: t }) => Fe({ config: r, username: e, password: t }),
-    refreshToken: ({ token: e }) => Me({ config: r, token: e }),
-    pubkey: () => Ie({ config: r }),
-    updatePassword: ({ token: e, currentPassword: t, newPassword: s }) => ze({ config: r, token: e, currentPassword: t, newPassword: s }),
-    triggerResetPassword: ({ username: e }) => je({ config: r, username: e }),
-    confirmResetPassword: ({ username: e, newPassword: t, confirmationCode: s }) => We({ config: r, username: e, newPassword: t, confirmationCode: s })
+    refreshToken: ({ token: e }) => qe({ config: r, token: e }),
+    pubkey: () => Me({ config: r }),
+    updatePassword: ({ token: e, currentPassword: t, newPassword: s }) => De({ config: r, token: e, currentPassword: t, newPassword: s }),
+    triggerResetPassword: ({ username: e }) => Ie({ config: r, username: e }),
+    confirmResetPassword: ({ username: e, newPassword: t, confirmationCode: s }) => ze({ config: r, username: e, newPassword: t, confirmationCode: s })
   };
 }
 function Fe({ config: r, username: e, password: t }) {
@@ -570,7 +596,7 @@ function Fe({ config: r, username: e, password: t }) {
     }
   });
 }
-function Me({ config: r, token: e }) {
+function qe({ config: r, token: e }) {
   return E(r, "/v1/refresh", {
     method: "POST",
     body: {
@@ -578,12 +604,12 @@ function Me({ config: r, token: e }) {
     }
   });
 }
-function Ie({ config: r }) {
+function Me({ config: r }) {
   return E(r, "/v1/pubkey", {
     method: "GET"
   });
 }
-function ze({ config: r, token: e, currentPassword: t, newPassword: s }) {
+function De({ config: r, token: e, currentPassword: t, newPassword: s }) {
   return E(r, "/v1/user/password", {
     method: "PUT",
     body: {
@@ -595,7 +621,7 @@ function ze({ config: r, token: e, currentPassword: t, newPassword: s }) {
     }
   });
 }
-function je({ config: r, username: e }) {
+function Ie({ config: r, username: e }) {
   return E(r, "/v1/user/password/reset", {
     method: "POST",
     body: {
@@ -603,7 +629,7 @@ function je({ config: r, username: e }) {
     }
   });
 }
-function We({ config: r, username: e, newPassword: t, confirmationCode: s }) {
+function ze({ config: r, username: e, newPassword: t, confirmationCode: s }) {
   return E(r, "/v1/user/password/reset/confirm", {
     method: "POST",
     body: {
@@ -614,7 +640,7 @@ function We({ config: r, username: e, newPassword: t, confirmationCode: s }) {
   });
 }
 async function E(r, e, t) {
-  var u;
+  var d;
   const s = r.baseUrl.endsWith("/") ? r.baseUrl : `${r.baseUrl}/`, o = e.startsWith("/") ? e.substring(1) : e, i = new URL(o, s), l = Object.assign({}, t, {
     headers: Object.assign({}, {
       "Content-Type": "application/json"
@@ -622,41 +648,40 @@ async function E(r, e, t) {
     body: t != null && t.body ? JSON.stringify(t.body) : void 0
   }), a = await fetch(i.toString(), l);
   if (!a.ok) {
-    const d = new Error("API request failed.");
-    if (d.status = a.status, d.statusText = a.statusText, d.url = i.toString(), d.headers = a.headers, d.bodyUsed = a.bodyUsed, (u = a.headers.get("Content-Type")) != null && u.includes("application/json"))
+    const h = new Error("API request failed.");
+    if (h.status = a.status, h.statusText = a.statusText, h.url = i.toString(), h.headers = a.headers, h.bodyUsed = a.bodyUsed, (d = a.headers.get("Content-Type")) != null && d.includes("application/json"))
       try {
-        d.body = await a.json();
+        h.body = await a.json();
       } catch {
-        d.body = "Failed to parse response body.";
+        h.body = "Failed to parse response body.";
       }
-    throw d;
+    throw h;
   }
   if (a.status !== 204)
     return await a.json();
 }
-function fe({ api: r }, e) {
-  const t = x({
-    baseUrl: r
-  });
-  return console.log("sending credentials to API", r), t.mintToken(e);
-}
-const g = Object.freeze({
+const _ = Object.freeze({
   REQUEST: "request",
   CONFIRM: "confirm",
   FINISHED: "finished"
 });
-class Be extends b {
+class je extends v {
   static get properties() {
     return {
-      api: { type: String, attribute: "api" },
-      confirmation: { type: "String", attribute: "confirmation" }
+      api: { type: String }
     };
   }
   static get styles() {
-    return q`
+    return J`
 			:host {
-				display: block;
-				font-family: Arial, sans-serif;
+				display: flex;
+				flex-direction: column;
+				justify-content: center;
+				align-items: center;
+			}
+			form {
+				display: flex;
+				flex-direction: column;
 			}
 			form input[type="text"],
 			form input[type="password"] {
@@ -664,14 +689,14 @@ class Be extends b {
 				margin: 5px 0 15px 0;
 				padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
 				box-sizing: border-box;
-				border: 1px solid var(--color-gray-300, #ccc);
-				border-radius: var(--radius-sm, 5px);
-				color: var(--color-gray-9, #333);
-				background-color: var(--color-gray-0, transparent);
+				border: 1px solid var(--color-gray-300, #CCC);
+				border-radius: var(--radius-sm, 3px);
+				color: var(--color-gray-700, #333);
+				background-color: var(--color-gray-50, #FFF);
 			}
 			form input[type="submit"] {
-				background-color:var(--color-primary, inherit);
-				color: var(--color-gray-0, #fff);
+				background-color: var(--color-primary, inherit);
+				color: var(--color-gray-50, #fff);
 				border: none;
 				padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
 				border-radius: var(--radius-dynamic, 5px);
@@ -682,31 +707,32 @@ class Be extends b {
 			}
 			form label {
 				font-size: 14px;
-				color: var(--color-gray-9, #333);
+				color: var(--color-gray-700, #333);
 				font-weight: bold;
 				margin-bottom: var(--spacing-sm, 0.5rem);
 			}
 			.error {
 				color: var(--color-danger, red);
-				font-size: 12px;
+				font-size: 14px;
 			}
 		`;
   }
   constructor() {
-    super(), this.errors = {}, this.stage = g.REQUEST;
+    super(), this.errors = {}, this.stage = _.REQUEST;
   }
   connectedCallback() {
-    console.log("[auth]", "[forgot-password]", { confirmation: this.confirmation }), super.connectedCallback(), this.confirmation && this.stage !== g.FINISHED && (this.stage = g.CONFIRM), this.requestUpdate();
+    super.connectedCallback(), this.confirmToken && this.stage !== _.FINISHED && this.setStage(_.CONFIRM);
+  }
+  setStage(e) {
+    this.stage !== e && (this.stage = e, this.requestUpdate());
   }
   handleSubmitRequest(e) {
     e.preventDefault();
     const t = e.target.username.value;
-    this.username = t, x({
-      baseUrl: this.api
-    }).triggerResetPassword({ username: t }).then(() => {
-      console.log("[auth]", "triggered reset password for ", t), this.stage = g.CONFIRM;
+    this.username = t, N({ baseUrl: this.api }).triggerResetPassword({ username: t }).then(() => {
+      this.setStage(_.CONFIRM);
     }).catch((o) => {
-      console.error("[auth] error triggering reset password", o), this.errors.general = o.message || "Unable to send password reset request. Please try again later.";
+      this.errors.general = o.message || "Unable to send password reset request. Please try again later.";
     }).finally(() => {
       this.requestUpdate();
     });
@@ -715,48 +741,50 @@ class Be extends b {
     e.preventDefault();
     const t = e.target.password.value, s = e.target["confirm-password"].value;
     if (t !== s) {
-      this.errors["confirm-password"] = "Passwords do not match.", this.requestUpdate();
+      this.errors["confirm-password"] = "Passwords do not match", this.requestUpdate();
       return;
     }
-    const o = this.confirmation || e.target.confirmation.value;
+    const o = this.confirmToken || e.target.confirmation.value;
     if (!o) {
-      this.errors.general = "Confirmation code is required.", this.requestUpdate();
+      this.errors.general = "Confirmation code is required", this.requestUpdate();
       return;
     }
-    x({
+    const i = N({
       baseUrl: this.api
-    }).confirmResetPassword({
+    });
+    i.confirmResetPassword({
       username: this.username,
       newPassword: t,
       confirmationCode: o
-    }).then(() => fe(this, { username: this.username, password: t }).then(({ token: n }) => {
-      this.dispatchEvent(new CustomEvent("login-success", {
-        detail: { token: n },
-        composed: !0,
-        bubbles: !0
-      }));
-    })).catch((n) => {
-      console.error("[auth][forgot-password-form]", n), this.errors.general = "Unable to reset password. Please try again later.";
+    }).then(() => {
+      i.mintToken({ username: this.username, password: t }).then(({ token: n }) => {
+        this.dispatchEvent(new CustomEvent("login-success", {
+          detail: { token: n },
+          bubbles: !0,
+          composed: !0,
+          cancelable: !0
+        }));
+      });
+    }).catch((n) => {
+      this.errors.general = n.message || "Unable to send password reset request. Please try again later.";
     }).finally(() => {
       this.requestUpdate();
     });
   }
   render() {
     switch (this.stage) {
-      case g.CONFIRM:
+      case _.FINISHED:
+        return p`<p>Your password has been reset.</p>`;
+      case _.CONFIRM:
         return this.renderConfirmForm();
-      case g.FINISHED:
-        return c`<p>Your password has been reset.</p>`;
-      case g.REQUEST_SENT:
-        return c`<p>A email has been sent with instructions to finish
-				resetting your password.</p>`;
-      case g.REQUEST:
+      case _.REQUEST:
       default:
         return this.renderRequestForm();
     }
   }
   renderRequestForm() {
-    return c`<form @submit=${this.handleSubmitRequest}>
+    return p`<form @submit="${this.handleSubmitRequest}">
+		<p>Enter your username or email address to request a password reset.</p>
 			<label for="username">Username/Email</label>
 			<input
 				type="text"
@@ -765,20 +793,20 @@ class Be extends b {
 				required
 			/>
 			<p class="error">${this.errors.general}</p>
-			<input type="submit" value="Request password reset" />
+			<input type="submit" value="Request Password Reset" />
 		</form>`;
   }
   renderConfirmForm() {
-    return c`<form @submit=${this.handleSubmitConfirm}>
-			<p>You should have received a confirmation code to reset your password</p>
+    return p`<form @submit="${this.handleSubmitConfirm}">
+		<p>You should have received a confirmation code to reset your password.</p>
 
-			${this.confirmation ? "" : c`<label for="confirmation">Confirmation Code</label>
-			<input
-				type="text"
-				name="confirmation"
-				placeholder="Confirmation Code"
-				required
-			/>`}
+		${this.confirmToken ? "" : p`<label for="confirmation">Confirmation Code</label>
+				<input
+					type="text"
+					name="confirmation"
+					placeholder="Confirmation Code"
+					required
+				/>`}
 
 			<label for="password">New Password</label>
 			<input
@@ -787,8 +815,6 @@ class Be extends b {
 				placeholder="Password"
 				required
 			/>
-			${this.errors.password ? c`<p class="error">${this.errors.password}</p>` : ""}
-			
 			<label for="confirm-password">Confirm Password</label>
 			<input
 				type="password"
@@ -796,27 +822,28 @@ class Be extends b {
 				placeholder="Confirm Password"
 				required
 			/>
-			${this.errors["confirm-password"] ? c`<p class="error">${this.errors["confirm-password"]}</p>` : ""}
+			${this.errors["confirm-password"] ? p`<p class="error">${this.errors["confirm-password"]}</p>` : ""}
+
+			${this.errors.general ? p`<p class="error">${this.errors.general}</p>` : ""}
 
-			${this.errors.general ? c`<p class="error">${this.errors.general}</p>` : ""}
 			<input type="submit" value="Reset Password" />
 		</form>`;
   }
 }
-class y extends b {
+customElements.get("auth-forgot-password-form") || window.customElements.define("auth-forgot-password-form", je);
+class Be extends v {
   static get properties() {
     return {
       api: { type: String, attribute: "api" }
     };
   }
   static get styles() {
-    return q`
+    return J`
 			:host {
 				display: block;
-				font-family: Arial, sans-serif;
 			}
 			.login-form {
-				background-color: var(--color-gray-0, #fff);
+				background-color: var(--color-gray-50);
 				padding: var(--spacing-xl, 3rem);
 				border-radius: var(--radius-md, 5px);
 				box-shadow: var(--drop-shadow-md, none);
@@ -827,14 +854,14 @@ class y extends b {
 				margin: 5px 0 15px 0;
 				padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
 				box-sizing: border-box;
-				border: 1px solid var(--color-gray-300, #ccc);
-				border-radius: var(--radius-sm, 5px);
-				color: var(--color-gray-9, #333);
-				background-color: var(--color-gray-0, transparent);
+				border: 1px solid var(--color-gray-300, #CCC);
+				border-radius: var(--radius-sm, 3px);
+				color: var(--color-gray-700, #333);
+				background-color: var(--color-gray-100, #FFF);
 			}
 			form input[type="submit"] {
 				background-color: var(--color-primary, inherit);
-				color: var(--color-gray-0, #fff);
+				color: var(--color-gray-50, #fff);
 				border: none;
 				padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
 				border-radius: var(--radius-dynamic, 5px);
@@ -845,15 +872,15 @@ class y extends b {
 			}
 			form label {
 				font-size: 14px;
-				color: var(--color-gray-9, #333);
+				color: var(--color-gray-900, #333);
 				font-weight: bold;
 				margin-bottom: var(--spacing-sm, 0.5rem);
 			}
 			a.forgot {
 				color: var(--color-primary, inherit);
 				text-decoration: none;
-				font-size: 12px;
 				font-weight: bold;
+				font-size: 12px;
 			}
 			.error {
 				color: var(--color-error, red);
@@ -868,7 +895,7 @@ class y extends b {
 			.header .intro {
 				width: 200px;
 				margin-bottom: 0;
-				color: var(--color-gray-3);
+				color: var(--color-gray-300, #333);
 			}
 			.header .brand {
 				font-size: 32px;
@@ -890,478 +917,232 @@ class y extends b {
     };
   }
   constructor() {
-    super(), this.formState = y.states.DEFAULT, this.username = "", this.password = "", this.token = void 0, this.errors = [];
+    super(), this.formState = this.constructor.states.DEFAULT, this.errors = [], this.isBusy = !1;
+  }
+  login({ username: e, password: t }) {
+    return N({
+      baseUrl: this.api
+    }).mintToken({ username: e, password: t });
   }
-  onSubmit(e) {
+  emitLoginSuccess(e) {
+    this.dispatchEvent(new CustomEvent("login-success", {
+      detail: { token: e },
+      bubbles: !0,
+      composed: !0,
+      cancelable: !0
+    }));
+  }
+  handleSubmitLogin(e) {
     e.preventDefault();
-    const t = e.explicitOriginalTarget.parentElement;
-    console.log(t);
-    const s = new FormData(t).entries().reduce((o, [i, n]) => (o[i] = n, o), {});
-    fe(this, s).then(({ token: o, challenge: i }) => {
-      if (i && i.name === "NEW_PASSWORD_REQUIRED") {
-        this.token = o, this.username = s.username, this.password = s.password, this.setState(y.states.CHALLENGE_CHANGE_PW);
+    const t = e.explicitOriginalTarget.parentElement, s = new FormData(t).entries().reduce((o, [i, n]) => (o[i] = n, o), {});
+    this.isBusy = !0, this.errors = [], this.requestUpdate(), this.login(s).then(({ token: o, challenge: i }) => {
+      if ((i == null ? void 0 : i.name) === "NEW_PASSWORD_REQUIRED") {
+        this.token = o, this.username = s.username, this.password = s.password, this.setState(this.constructor.states.CHALLENGE_CHANGE_PW);
         return;
       }
-      this.dispatchEvent(new CustomEvent("login-success", {
-        detail: { token: o }
-      }));
+      this.emitLoginSuccess(o);
     }).catch((o) => {
-      console.log(o), this.errors = [o.message], this.requestUpdate();
+      console.error(o), this.errors = [o.message], this.requestUpdate();
     });
   }
   onSubmitChangePasswordChallenge(e) {
     e.preventDefault();
-    const t = e.explicitOriginalTarget, s = new FormData(t).entries().reduce((l, [a, u]) => (l[a] = u, l), {}), o = s.password, i = s["confirm-password"];
+    const t = e.explicitOriginalTarget.parentElement, s = new FormData(t).entries().reduce((l, [a, d]) => (l[a] = d, l), {}), o = s.password, i = s["confirm-password"];
     if (o !== i) {
-      this.errors = ["Passwords do not match."], this.requestUpdate();
+      this.errors = ["Passwords do not match"], this.requestUpdate();
       return;
     }
-    x({
+    N({
       baseUrl: this.api
     }).updatePassword({
       token: this.token,
       currentPassword: this.password,
       newPassword: o
     }).then(() => {
-      this.dispatchEvent(new CustomEvent("login-success", {
-        detail: { token: this.token }
-      }));
+      this.emitLoginSuccess(this.token);
     }).catch((l) => {
-      console.log(l), this.errors = [l.message], this.requestUpdate();
+      console.error(l), this.errors = [l.message], this.requestUpdate();
     });
   }
   setState(e) {
-    e !== this.formState && (this.formState = e, this.errors = [], this.requestUpdate());
+    this.formState = e, this.isBusy = !1, this.errors = [], this.requestUpdate();
   }
   render() {
-    return c`<div class="login-form">
+    return p`<div class="login-form">
 			${this.renderHeader()}
-		${this.formState === y.states.FORGOT ? this.renderForgotPasswordForm() : ""}
-		${this.formState === y.states.CHALLENGE_CHANGE_PW ? this.renderChangePasswordForm() : ""}
-		${this.formState === y.states.DEFAULT ? this.renderLoginForm() : ""}
+			${this.formState === this.constructor.states.DEFAULT ? this.renderLoginForm() : ""}
+			${this.formState === this.constructor.states.CHALLENGE_CHANGE_PW ? this.renderChangePasswordForm() : ""}
+			${this.formState === this.constructor.states.FORGOT ? this.renderForgotPasswordForm() : ""}
 		</div>`;
   }
-  /**
-   * TODO: accept the header as a slot
-   */
   renderHeader() {
-    return c`<div class="header">
-			<div class="intro">
-				Welcome to
-			</div>
-			<div class="brand">
-				<em>WRAL</em>.studio
-			</div>
+    return p`<div class="header">
+			<div class="intro">Welcome to</div>
+			<div class="brand"><em>WRAL</em>.studio</div>
 		</div>`;
   }
   renderLoginForm() {
-    return c`
-		<form>
-					<label for="username">User</label>
-					<input
-						type="text"
-						name="username"
-						placeholder="Email or Username"
-						required
-					/>
-
-					<label for="password">Password</label>
-					<input
-						type="password"
-						name="password"
-						placeholder="Password"
-						required
-					/>
-					<div>
-						<a href="#" class="forgot"
-							@click=${() => {
-      this.setState(y.states.FORGOT);
-    }}
-						>Forgot password</a>
-					</div>
-
-					${this.errors ? this.errors.map((e) => c`<p class="error">${e}</p>`) : ""}
-					<input type="submit" value="Log in" @click=${this.onSubmit} />
+    return p`
+			<form>
+				<label for="username">User</label>
+				<input
+					type="text"
+					name="username"
+					placeholder="Email or Username"
+					required
+				/>
 
-				</form>`;
-  }
-  renderForgotPasswordForm() {
-    return c`
-			<auth-forgot-password-form
-				api=${this.api}>
-			</auth-forgot-password-form>
-		`;
-  }
-  renderChangePasswordForm() {
-    return c`
-			<p>You have logged in successfully, but you must change your password.</p>
-			<form @submit=${this.onSubmitChangePasswordChallenge}>
-				<input type="hidden" name="username" value="${this.username}" />
-				<label for="password">New Password</label>
+				<label for="password">Password</label>
 				<input
 					type="password"
 					name="password"
 					placeholder="Password"
 					required
 				/>
-				<label for="confirm-password">Confirm Password</label>
-				<input
-					type="password"
-					name="confirm-password"
-					placeholder="Confirm Password"
-					required
+				<div>
+					<a href="#" class="forgot"
+						@click=${() => {
+      this.setState(this.constructor.states.FORGOT);
+    }}>Forgot password</a>
+				</div>
+				${this.errors ? this.errors.map((e) => p`<p class="error">${e}</p>`) : ""}
+
+				<input type="submit" value="Log in" @click=${this.handleSubmitLogin}
+					?disabled=${this.isBusy}
 				/>
-				${this.errors ? this.errors.map((e) => c`<p class="error">${e}</p>`) : ""}
-				<input type="submit" value="Change Password" />
 			</form>
 		`;
   }
-}
-customElements.define("auth-login-form", y);
-customElements.define("auth-forgot-password-form", Be);
-function Ge() {
-  return function(r) {
-    const e = q`
-			.login-layout {
-				display: flex;
-				flex-direction: column;
-				gap: 1rem;
-				justify-content: center;
-				align-items: center;
-				min-height: 100vh;
-				background-color: var(--color-gray-100, #f5f5f5);
-			}
-			.login-layout > * {
-				max-width: 400px;
-			}
+  renderForgotPasswordForm() {
+    return p`
+			<auth-forgot-password-form
+				api=${this.api}>
+			</auth-forgot-password-form>
 		`;
-    return c`
-			<style>${e}</style>
-			<div class="login-layout">
-				${r.main}
-			</div>
+  }
+  renderChangePasswordForm() {
+    return p`
+		<p>You have logged in successfully, but you must change your password.</p>
+		<form @submit="${this.onSubmitChangePasswordChallenge}">
+			<input type="hidden" name="username" value="${this.username}" />
+			<label for="password">New Password</label>
+			<input
+				type="password"
+				name="password"
+				placeholder="Password"
+				required
+			/>
+			<label for="confirm-password">Confirm Password</label>
+			<input
+				type="password"
+				name="confirm-password"
+				placeholder="Confirm Password"
+				required
+			/>
+			${this.errors ? this.errors.map((e) => p`<p class="error">${e}</p>`) : ""}
+			<input type="submit" value="Change Password" />
+		</form>
 		`;
-  };
-}
-function Ve(r) {
-  return JSON.parse(window.atob(r.split(".")[1].replace(/-/g, "+").replace(/_/g, "/")));
-}
-function Qe(r, e = 300, t = Date.now()) {
-  return Ve(r).exp * 1e3 - e < t;
-}
-function ge(r) {
-  return (r.startsWith("/") ? r : `/${r}`).replace(/\/{2,}/g, "/").replace(new RegExp("(?<=.)\\/$"), "");
-}
-function ye(r, e, t) {
-  const s = Ke(r, t);
-  e.pushState(t, t.title, s), r.requestRender(t);
-}
-function Je(r, e) {
-  const { mount: t } = r.config, { history: s } = r.config.toolkit.element.ownerDocument.defaultView;
-  return e.startsWith(t) ? {
-    path: ge(e.slice(t.length)),
-    push: (o) => ye(r, s, o)
-  } : null;
+  }
 }
-function Ke(r, e) {
-  const { mount: t } = r.config;
-  return ge(`${t}/${e.path}`);
+customElements.get("auth-login-form") || customElements.define("auth-login-form", Be);
+function We(r, e) {
+  return p`<auth-login-form slot="main"
+		api=${r == null ? void 0 : r.apiBaseUrl}
+		@login-success=${e}>
+	</auth-login-form>`;
 }
-function Ye(r, e) {
-  const { history: t } = e.config.toolkit.element.ownerDocument.defaultView;
-  return c`
-	<h1>Auth Dashboard</h1>
-	<ul>
-	<li><a href="#" @click=${((o, i) => () => {
-    ye(e, t, { path: o, title: i });
-  })("/change-password")}>Change Password</a></li>
-	<li><a href="#" @click=${e.handleDestroyAuth}>Logout</a></li>
-	</ul>
-	`;
+function Ge({ tokenKey: r }) {
+  return window.localStorage.getItem(r);
 }
-function Ze(r, e) {
-  return c`
-		<auth-change-password-form .auth=${e}></auth-change-password-form>
-	`;
+function Ve({ tokenKey: r }, e) {
+  window.localStorage.setItem(r, e);
 }
-class Xe extends b {
-  static get styles() {
-    return q`
-			:host {
-				color: var(--color-text);
-				display: block;
-				font-family: var(--font-body);
-			}
-			h1,h2,h3,h4,h5,h6,label { font-family: var(--font-heading) }
-			label {
-				display: block;
-				font-size: var(--font-size-base);
-				margin-top: var(--spacing-md, 0.5rem);
-			}
-			input[type="text"],
-			input[type="password"] {
-				width: 100%;
-				margin: 5px 0 15px 0;
-				padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
-				box-sizing: border-box;
-				border: 1px solid var(--color-gray-300, #ccc);
-				border-radius: var(--radius-sm, 5px);
-				color: var(--color-gray-9, #333);
-				background-color: var(--color-gray-0, transparent);
-			}
-			input[type="submit"] {
-				background-color: var(--color-primary, inherit);
-				color: var(--color-gray-0, #fff);
-				border: none;
-				padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
-				border-radius: var(--radius-dynamic, 5px);
-				width: 200px;
-				cursor: pointer;
-			}
-			.error {
-				color: var(--color-error);
-			}
-		`;
-  }
-  static get properties() {
-    return {
-      auth: { type: Object }
-    };
-  }
-  constructor() {
-    super(), this.errors = {}, this.success = null;
-  }
-  connectedCallback() {
-    super.connectedCallback(), Y(this);
-  }
-  async onSubmit(e) {
-    if (e.preventDefault(), e.target.newPassword.value !== e.target.confirmPassword.value) {
-      this.errors.confirmPassword = "Passwords do not match", this.requestUpdate();
-      return;
-    }
-    if (e.target.newPassword.value === e.target.currentPassword.value) {
-      this.errors.newPassword = "The new password is the same as your current password.", this.requestUpdate();
-      return;
-    }
-    await Y(this), await x({
-      baseUrl: this.auth.config.api
-    }).updatePassword({
-      currentPassword: e.target.currentPassword.value,
-      newPassword: e.target.newPassword.value
-    }).then(() => {
-      this.errors = {}, this.success = "Password changed.", this.requestUpdate();
-    }).catch((s) => {
-      this.errors.submit = s.message, this.requestUpdate();
-    });
-  }
-  render() {
-    return c`
-			<h1>Change your password</h1>
-			<p>Enter your current password and choose a new password.</p>
-			<form @submit=${this.onSubmit}>
-				<div class="field">
-					<label for="currentPassword">Current Password</label>
-					<input
-						type="password"
-						name="currentPassword"
-						placeholder="Current Password"
-						required
-					/>
-					${this.errors.currentPassword ? c`<p class="error">${this.errors.currentPassword}</p>` : ""}
-				</div>
-				<div class="field">
-					<label for="newPassword">New Password</label>
-					<input
-						type="password"
-						name="newPassword"
-						placeholder="New Password"
-						required
-					/>
-					${this.errors.newPassword ? c`<p class="error">${this.errors.newPassword}</p>` : ""}
-				</div>
-				<div class="field">
-					<label for="confirmPassword">Confirm Password</label>
-					<input
-						type="password"
-						name="confirmPassword"
-						placeholder="Confirm Password"
-						required
-					/>
-					${this.errors.confirmPassword ? c`<p class="error">${this.errors.confirmPassword}</p>` : ""}
-				</div>
-				<input type="submit" value="Change Password" />
-				${this.errors.submit ? c`<p class="error">${this.errors.submit}</p>` : ""}
-				${this.success ? c`<p class="success">${this.success}</p>` : ""}
-			</form>
-		`;
-  }
+function Je({ tokenKey: r }) {
+  window.localStorage.removeItem(r);
 }
-customElements.get("auth-change-password-form") || customElements.define("auth-change-password-form", Xe);
-const et = [
-  { path: "/", render: Ye },
-  { path: "/change-password", render: Ze }
-];
-function tt(r, e) {
-  const { path: t } = r, s = et.find((o) => o.path === t);
-  if (s)
-    return s.render(r, e);
+async function Qe(r) {
+  const e = Ge(r);
+  if (!e || e.length < 1)
+    throw new Error("No token found");
+  return Ke(e) ? await N({
+    baseUrl: r.apiBaseUrl
+  }).refreshToken({ token: e }).then(({ token: s }) => s) : e;
 }
-const rt = q`
-	:host {
-
-	}
-`;
-class st extends b {
-  static get styles() {
-    return [rt];
-  }
-  static get properties() {
-    return {
-      state: { type: Object },
-      auth: { type: Object }
-    };
-  }
-  render() {
-    const { state: e, auth: t } = this;
-    return tt(e, t);
-  }
+function Ke(r, e = 300, t = Date.now()) {
+  return Ye(r).exp * 1e3 - e < t;
 }
-customElements.get("auth-app") || customElements.define("auth-app", st);
-function pt(r) {
-  const e = {
-    config: r,
-    log: (...t) => console.log("[auth]", ...t)
-  };
-  return e.mount = k(ot, e), e.handleTokenRequest = nt(e), e.handleDestroyAuth = at(e), e.presentLoginForm = k(lt, e), e.getToken = k(we, e), e.saveToken = k(ct, e), e.getFreshToken = k(dt, e), e.requestRender = (t) => $e(e, t), e;
+function Ye(r) {
+  return JSON.parse(window.atob(r.split(".")[1].replace(/-/g, "+").replace(/_/g, "/")));
 }
-function ot(r) {
-  const e = r.config.toolkit.element.ownerDocument.defaultView;
-  [
-    {
-      type: "action:register",
-      detail: {
-        actionType: "auth:requestToken",
-        handler: r.handleTokenRequest,
-        modName: "auth"
-      }
+function ot(r, e) {
+  var n, l, a, d, h, c, m, f, y;
+  const t = "mod-auth", s = ((a = (l = (n = e == null ? void 0 : e.element) == null ? void 0 : n.attributes) == null ? void 0 : l.debug) == null ? void 0 : a.value) || !1, o = ((c = (h = (d = e == null ? void 0 : e.element) == null ? void 0 : d.attributes) == null ? void 0 : h["force-login"]) == null ? void 0 : c.value) || !1, i = {
+    modName: t,
+    toolkit: r,
+    apiBaseUrl: ((y = (f = (m = e == null ? void 0 : e.element) == null ? void 0 : m.attributes) == null ? void 0 : f.api) == null ? void 0 : y.value) || "https://api.wral.com/auth",
+    debug: s ? (...L) => console.log("[auth]", ...L) : () => {
     },
-    {
+    tokenKey: `${t}::token`,
+    callbacks: [],
+    isLoginPresent: !1
+  };
+  Object.entries({
+    "auth:requestToken": Ze,
+    "auth:destroy": Xe
+  }).forEach(([L, pe]) => {
+    const me = (...F) => i.debug("[action]", L, ...F);
+    r.dispatchAction({
       type: "action:register",
       detail: {
-        actionType: "auth:destroy",
-        handler: r.handleDestroyAuth,
-        modName: "auth"
-      }
-    },
-    {
-      type: "layout:register",
-      detail: {
-        name: "auth:login",
-        slots: ["main"],
-        templateFn: Ge()
+        actionType: L,
+        modName: t,
+        handler: (...F) => {
+          me("handler", ...F), pe(i, ...F);
+        }
       }
-    }
-  ].forEach((t) => r.config.toolkit.dispatchAction(t)), e.addEventListener("popstate", it(r));
-}
-function $e(r, e) {
-  const t = r.config.toolkit.element.ownerDocument.defaultView;
-  let s = e;
-  s || (s = Je(r, t.location.pathname)), s && r.config.toolkit.dispatchAction({
-    type: "layout:slot:replace",
+    });
+  }), r.dispatchAction({
+    type: "layout:register",
     detail: {
-      layout: "menu-main-task-layout",
-      slot: "main",
-      content: c`<auth-app .state=${s} .auth=${r}></auth-app>`
+      name: `${t}::auth-layout`,
+      templateFn: Le
     }
-  });
+  }), o && fe(e.element);
 }
-function it(r) {
-  return (e) => {
-    r.log("onpopstate", e), $e(r);
-  };
-}
-function nt(r) {
-  let e = [], t = !1;
-  const s = (o) => {
-    e.forEach((i) => {
-      i(o);
-    }), e = [];
-  };
-  return async ({ callback: o }) => {
-    let i;
-    try {
-      i = await r.getFreshToken(), o(i);
-    } catch (n) {
-      e.push(o), t || (r.presentLoginForm({ onLogin: s }), t = !0), r.log(n);
-    }
-  };
+async function Ze(r, e) {
+  const { callback: t } = e;
+  let s;
+  try {
+    s = await Qe(r), t(s);
+  } catch (o) {
+    console.log("Presenting login form to get a fresh token", o), r.callbacks.push(t), r.isLoginPresent || et(r);
+  }
 }
-function at(r) {
-  return () => {
-    const e = K(r);
-    window.localStorage.removeItem(e), r.config.toolkit.dispatchAction({
-      type: "layout:pop"
-    });
-  };
+function Xe(r) {
+  Je(r);
 }
-function lt(r, { onLogin: e }) {
-  const { toolkit: t } = r.config, o = new URLSearchParams(
-    t.element.ownerDocument.defaultView.location.search
-  ).get("password_reset_confirmation"), i = (n) => {
-    r.log("login success", { event: n });
-    const { token: l } = n.detail;
-    r.log("Login form dismissed", { args: [l] }), t.dispatchAction({
-      type: "layout:pop"
-    }), r.saveToken({ token: l }), e({ token: l });
-  };
-  t.dispatchAction({
+function et(r) {
+  r.isLoginPresent = !0, r.toolkit.dispatchAction({
     type: "layout:push",
     detail: {
-      layout: "auth:login"
+      name: `${r.modName}::auth-layout`
     }
-  }), t.dispatchAction({
-    type: "layout:slot:push",
+  }), r.toolkit.dispatchAction({
+    type: "layout:content:append",
     detail: {
-      layout: "auth:login",
-      slot: "main",
-      content: c`<auth-login-form
-				api=${r.config.api}
-				confirmation="${o}"
-				@login-success=${i}>
-			</auth-login-form>`
+      content: We(r, tt(r))
     }
   });
 }
-function ct(r, { token: e }) {
-  r.log("saving token", { args: [e] });
-  const t = K(r);
-  window.localStorage.setItem(t, e);
-}
-function we(r) {
-  const e = K(r);
-  return window.localStorage.getItem(e);
-}
-async function dt(r) {
-  const e = we(r);
-  if (!e || e.length < 1)
-    throw new Error("No token found");
-  return Qe(e) ? (r.log("refreshing token", { args: [e] }), await x({
-    baseUrl: r.config.api
-  }).refreshToken({ token: e }).then(({ token: s }) => s)) : e;
-}
-function K({ storageKey: r = "token" }) {
-  return r;
+function tt(r) {
+  return (e) => {
+    const { token: t } = e.detail;
+    Ve(r, t), r.callbacks.forEach((s) => s(t)), r.callbacks = [], r.isLoginPresent = !1, r.toolkit.dispatchAction({
+      type: "layout:pop"
+    });
+  };
 }
 export {
-  dt as getFreshToken,
-  we as getToken,
-  K as getTokenStorageKey,
-  it as historyStateHandler,
-  at as loginDestroyHandler,
-  pt as makeAuth,
-  ot as mount,
-  lt as presentLoginForm,
-  $e as renderApp,
-  ct as saveToken,
-  nt as tokenRequestHandler
+  ot as init
 };