@wral/studio.mods.auth 0.3.7 → 1.0.1

package/dist/auth.es.js

@@ -1,310 +1,241 @@
-var fe = Object.defineProperty;
-var me = (o, t, e) => t in o ? fe(o, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[t] = e;
-var E = (o, t, e) => me(o, typeof t != "symbol" ? t + "" : t, e);
-function mt(o) {
-  return {
-    // Underlying mechanism to use the REST URLs directly.
-    api: (t, e) => O(o, t, e),
-    mintToken: ({ username: t, password: e }) => ge({ config: o, username: t, password: e }),
-    refreshToken: ({ token: t }) => ve({ config: o, token: t }),
-    pubkey: () => ye({ config: o }),
-    updatePassword: ({ token: t, currentPassword: e, newPassword: r }) => we({ config: o, token: t, currentPassword: e, newPassword: r }),
-    triggerResetPassword: ({ username: t }) => _e({ config: o, username: t }),
-    confirmResetPassword: ({ username: t, newPassword: e, confirmationCode: r }) => $e({ config: o, username: t, newPassword: e, confirmationCode: r })
+import { getToken as G } from "./lib.es.js";
+function be(s, e) {
+  var o, i;
+  const r = e.element.attributes;
+  return console.log(r), {
+    api: r.api.value || ve("auth:api is required"),
+    forceLogin: r["force-login"] !== void 0,
+    // TODO: handle false
+    storageKey: (o = r["storage-key"]) == null ? void 0 : o.value,
+    mount: ((i = r.path) == null ? void 0 : i.value) || "/auth",
+    toolkit: s
   };
 }
-function ge({ config: o, username: t, password: e }) {
-  return O(o, "/v1/user/login", {
-    method: "POST",
-    body: {
-      username: t,
-      password: e
-    }
-  });
-}
-function ve({ config: o, token: t }) {
-  return O(o, "/v1/refresh", {
-    method: "POST",
-    body: {
-      token: t
-    }
-  });
-}
-function ye({ config: o }) {
-  return O(o, "/v1/pubkey", {
-    method: "GET"
-  });
-}
-function we({ config: o, token: t, currentPassword: e, newPassword: r }) {
-  return O(o, "/v1/user/password", {
-    method: "PUT",
-    body: {
-      currentPassword: e,
-      newPassword: r
-    },
-    headers: {
-      Authorization: `Bearer ${t}`
-    }
-  });
-}
-function _e({ config: o, username: t }) {
-  return O(o, "/v1/user/password/reset", {
-    method: "POST",
-    body: {
-      username: t
-    }
-  });
-}
-function $e({ config: o, username: t, newPassword: e, confirmationCode: r }) {
-  return O(o, "/v1/user/password/reset/confirm", {
-    method: "POST",
-    body: {
-      username: t,
-      newPassword: e,
-      confirmationCode: r
-    }
-  });
+function ve(s) {
+  throw new Error(s);
 }
-async function O(o, t, e) {
-  var c;
-  const r = o.baseUrl.endsWith("/") ? o.baseUrl : `${o.baseUrl}/`, s = t.startsWith("/") ? t.substring(1) : t, i = new URL(s, r), d = Object.assign({}, e, {
-    headers: Object.assign({}, {
-      "Content-Type": "application/json"
-    }, e == null ? void 0 : e.headers),
-    body: e != null && e.body ? JSON.stringify(e.body) : void 0
-  }), l = await fetch(i.toString(), d);
-  if (!l.ok) {
-    const b = new Error("API request failed.");
-    if (b.status = l.status, b.statusText = l.statusText, b.url = i.toString(), b.headers = l.headers, b.bodyUsed = l.bodyUsed, (c = l.headers.get("Content-Type")) != null && c.includes("application/json"))
-      try {
-        b.body = await l.json();
-      } catch {
-        b.body = "Failed to parse response body.";
-      }
-    throw b;
-  }
-  if (l.status !== 204)
-    return await l.json();
+function k(s, ...e) {
+  return (...t) => s(...e, ...t);
 }
 /**
  * @license
  * Copyright 2019 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const rt = globalThis, xt = rt.ShadowRoot && (rt.ShadyCSS === void 0 || rt.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, kt = Symbol(), Ut = /* @__PURE__ */ new WeakMap();
-let Jt = class {
-  constructor(t, e, r) {
-    if (this._$cssResult$ = !0, r !== kt) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
-    this.cssText = t, this.t = e;
+const F = globalThis, K = 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 {
+  constructor(e, t, r) {
+    if (this._$cssResult$ = !0, r !== Q) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
+    this.cssText = e, this.t = t;
   }
   get styleSheet() {
-    let t = this.o;
-    const e = this.t;
-    if (xt && t === void 0) {
-      const r = e !== void 0 && e.length === 1;
-      r && (t = Ut.get(e)), t === void 0 && ((this.o = t = new CSSStyleSheet()).replaceSync(this.cssText), r && Ut.set(e, t));
+    let e = this.o;
+    const t = this.t;
+    if (K && e === void 0) {
+      const r = t !== void 0 && t.length === 1;
+      r && (e = Z.get(t)), e === void 0 && ((this.o = e = new CSSStyleSheet()).replaceSync(this.cssText), r && Z.set(t, e));
     }
-    return t;
+    return e;
   }
   toString() {
     return this.cssText;
   }
 };
-const xe = (o) => new Jt(typeof o == "string" ? o : o + "", void 0, kt), $ = (o, ...t) => {
-  const e = o.length === 1 ? o[0] : t.reduce((r, s, i) => r + ((n) => {
+const _e = (s) => new ce(typeof s == "string" ? s : s + "", void 0, Q), q = (s, ...e) => {
+  const t = s.length === 1 ? s[0] : e.reduce((r, o, i) => r + ((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.");
-  })(s) + o[i + 1], o[0]);
-  return new Jt(e, o, kt);
-}, ke = (o, t) => {
-  if (xt) o.adoptedStyleSheets = t.map((e) => e instanceof CSSStyleSheet ? e : e.styleSheet);
-  else for (const e of t) {
-    const r = document.createElement("style"), s = rt.litNonce;
-    s !== void 0 && r.setAttribute("nonce", s), r.textContent = e.cssText, o.appendChild(r);
-  }
-}, Lt = xt ? (o) => o : (o) => o instanceof CSSStyleSheet ? ((t) => {
-  let e = "";
-  for (const r of t.cssRules) e += r.cssText;
-  return xe(e);
-})(o) : o;
+  })(o) + s[i + 1], s[0]);
+  return new ce(t, s, Q);
+}, Ae = (s, e) => {
+  if (K) s.adoptedStyleSheets = e.map((t) => t instanceof CSSStyleSheet ? t : t.styleSheet);
+  else for (const t of e) {
+    const r = document.createElement("style"), o = F.litNonce;
+    o !== void 0 && r.setAttribute("nonce", o), r.textContent = t.cssText, s.appendChild(r);
+  }
+}, X = K ? (s) => s : (s) => s instanceof CSSStyleSheet ? ((e) => {
+  let t = "";
+  for (const r of e.cssRules) t += r.cssText;
+  return _e(t);
+})(s) : s;
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const { is: Ce, defineProperty: Ae, getOwnPropertyDescriptor: Se, getOwnPropertyNames: Ee, getOwnPropertySymbols: Pe, getPrototypeOf: Te } = Object, A = globalThis, Ot = A.trustedTypes, ze = Ot ? Ot.emptyScript : "", lt = A.reactiveElementPolyfillSupport, q = (o, t) => o, R = { toAttribute(o, t) {
-  switch (t) {
+const { is: Ee, defineProperty: Pe, getOwnPropertyDescriptor: Se, getOwnPropertyNames: Ce, getOwnPropertySymbols: xe, getPrototypeOf: ke } = Object, $ = globalThis, ee = $.trustedTypes, Te = ee ? ee.emptyScript : "", z = $.reactiveElementPolyfillSupport, U = (s, e) => s, V = { toAttribute(s, e) {
+  switch (e) {
     case Boolean:
-      o = o ? ze : null;
+      s = s ? Te : null;
       break;
     case Object:
     case Array:
-      o = o == null ? o : JSON.stringify(o);
+      s = s == null ? s : JSON.stringify(s);
   }
-  return o;
-}, fromAttribute(o, t) {
-  let e = o;
-  switch (t) {
+  return s;
+}, fromAttribute(s, e) {
+  let t = s;
+  switch (e) {
     case Boolean:
-      e = o !== null;
+      t = s !== null;
       break;
     case Number:
-      e = o === null ? null : Number(o);
+      t = s === null ? null : Number(s);
       break;
     case Object:
     case Array:
       try {
-        e = JSON.parse(o);
+        t = JSON.parse(s);
       } catch {
-        e = null;
+        t = null;
       }
   }
-  return e;
-} }, Ct = (o, t) => !Ce(o, t), It = { attribute: !0, type: String, converter: R, reflect: !1, hasChanged: Ct };
-Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), A.litPropertyMetadata ?? (A.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
-class I extends HTMLElement {
-  static addInitializer(t) {
-    this._$Ei(), (this.l ?? (this.l = [])).push(t);
+  return t;
+} }, de = (s, e) => !Ee(s, e), te = { attribute: !0, type: String, converter: V, reflect: !1, hasChanged: de };
+Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), $.litPropertyMetadata ?? ($.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
+class P 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(t, e = It) {
-    if (e.state && (e.attribute = !1), this._$Ei(), this.elementProperties.set(t, e), !e.noAccessor) {
-      const r = Symbol(), s = this.getPropertyDescriptor(t, r, e);
-      s !== void 0 && Ae(this.prototype, t, s);
+  static createProperty(e, t = te) {
+    if (t.state && (t.attribute = !1), this._$Ei(), this.elementProperties.set(e, t), !t.noAccessor) {
+      const r = Symbol(), o = this.getPropertyDescriptor(e, r, t);
+      o !== void 0 && Pe(this.prototype, e, o);
     }
   }
-  static getPropertyDescriptor(t, e, r) {
-    const { get: s, set: i } = Se(this.prototype, t) ?? { get() {
-      return this[e];
+  static getPropertyDescriptor(e, t, r) {
+    const { get: o, set: i } = Se(this.prototype, e) ?? { get() {
+      return this[t];
     }, set(n) {
-      this[e] = n;
+      this[t] = n;
     } };
     return { get() {
-      return s == null ? void 0 : s.call(this);
+      return o == null ? void 0 : o.call(this);
     }, set(n) {
-      const d = s == null ? void 0 : s.call(this);
-      i.call(this, n), this.requestUpdate(t, d, r);
+      const l = o == null ? void 0 : o.call(this);
+      i.call(this, n), this.requestUpdate(e, l, r);
     }, configurable: !0, enumerable: !0 };
   }
-  static getPropertyOptions(t) {
-    return this.elementProperties.get(t) ?? It;
+  static getPropertyOptions(e) {
+    return this.elementProperties.get(e) ?? te;
   }
   static _$Ei() {
-    if (this.hasOwnProperty(q("elementProperties"))) return;
-    const t = Te(this);
-    t.finalize(), t.l !== void 0 && (this.l = [...t.l]), this.elementProperties = new Map(t.elementProperties);
+    if (this.hasOwnProperty(U("elementProperties"))) return;
+    const e = ke(this);
+    e.finalize(), e.l !== void 0 && (this.l = [...e.l]), this.elementProperties = new Map(e.elementProperties);
   }
   static finalize() {
-    if (this.hasOwnProperty(q("finalized"))) return;
-    if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(q("properties"))) {
-      const e = this.properties, r = [...Ee(e), ...Pe(e)];
-      for (const s of r) this.createProperty(s, e[s]);
+    if (this.hasOwnProperty(U("finalized"))) return;
+    if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(U("properties"))) {
+      const t = this.properties, r = [...Ce(t), ...xe(t)];
+      for (const o of r) this.createProperty(o, t[o]);
     }
-    const t = this[Symbol.metadata];
-    if (t !== null) {
-      const e = litPropertyMetadata.get(t);
-      if (e !== void 0) for (const [r, s] of e) this.elementProperties.set(r, s);
+    const e = this[Symbol.metadata];
+    if (e !== null) {
+      const t = litPropertyMetadata.get(e);
+      if (t !== void 0) for (const [r, o] of t) this.elementProperties.set(r, o);
     }
     this._$Eh = /* @__PURE__ */ new Map();
-    for (const [e, r] of this.elementProperties) {
-      const s = this._$Eu(e, r);
-      s !== void 0 && this._$Eh.set(s, e);
+    for (const [t, r] of this.elementProperties) {
+      const o = this._$Eu(t, r);
+      o !== void 0 && this._$Eh.set(o, t);
     }
     this.elementStyles = this.finalizeStyles(this.styles);
   }
-  static finalizeStyles(t) {
-    const e = [];
-    if (Array.isArray(t)) {
-      const r = new Set(t.flat(1 / 0).reverse());
-      for (const s of r) e.unshift(Lt(s));
-    } else t !== void 0 && e.push(Lt(t));
-    return e;
+  static finalizeStyles(e) {
+    const t = [];
+    if (Array.isArray(e)) {
+      const r = new Set(e.flat(1 / 0).reverse());
+      for (const o of r) t.unshift(X(o));
+    } else e !== void 0 && t.push(X(e));
+    return t;
   }
-  static _$Eu(t, e) {
-    const r = e.attribute;
-    return r === !1 ? void 0 : typeof r == "string" ? r : typeof t == "string" ? t.toLowerCase() : void 0;
+  static _$Eu(e, t) {
+    const r = t.attribute;
+    return r === !1 ? void 0 : typeof r == "string" ? r : typeof e == "string" ? e.toLowerCase() : void 0;
   }
   constructor() {
     super(), this._$Ep = void 0, this.isUpdatePending = !1, this.hasUpdated = !1, this._$Em = null, this._$Ev();
   }
   _$Ev() {
-    var t;
-    this._$ES = new Promise((e) => this.enableUpdating = e), this._$AL = /* @__PURE__ */ new Map(), this._$E_(), this.requestUpdate(), (t = this.constructor.l) == null || t.forEach((e) => e(this));
-  }
-  addController(t) {
     var e;
-    (this._$EO ?? (this._$EO = /* @__PURE__ */ new Set())).add(t), this.renderRoot !== void 0 && this.isConnected && ((e = t.hostConnected) == null || e.call(t));
+    this._$ES = new Promise((t) => this.enableUpdating = t), this._$AL = /* @__PURE__ */ new Map(), this._$E_(), this.requestUpdate(), (e = this.constructor.l) == null || e.forEach((t) => t(this));
   }
-  removeController(t) {
-    var e;
-    (e = this._$EO) == null || e.delete(t);
+  addController(e) {
+    var t;
+    (this._$EO ?? (this._$EO = /* @__PURE__ */ new Set())).add(e), this.renderRoot !== void 0 && this.isConnected && ((t = e.hostConnected) == null || t.call(e));
+  }
+  removeController(e) {
+    var t;
+    (t = this._$EO) == null || t.delete(e);
   }
   _$E_() {
-    const t = /* @__PURE__ */ new Map(), e = this.constructor.elementProperties;
-    for (const r of e.keys()) this.hasOwnProperty(r) && (t.set(r, this[r]), delete this[r]);
-    t.size > 0 && (this._$Ep = t);
+    const e = /* @__PURE__ */ new Map(), t = this.constructor.elementProperties;
+    for (const r of t.keys()) this.hasOwnProperty(r) && (e.set(r, this[r]), delete this[r]);
+    e.size > 0 && (this._$Ep = e);
   }
   createRenderRoot() {
-    const t = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
-    return ke(t, this.constructor.elementStyles), t;
+    const e = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
+    return Ae(e, this.constructor.elementStyles), e;
   }
   connectedCallback() {
-    var t;
-    this.renderRoot ?? (this.renderRoot = this.createRenderRoot()), this.enableUpdating(!0), (t = this._$EO) == null || t.forEach((e) => {
+    var e;
+    this.renderRoot ?? (this.renderRoot = this.createRenderRoot()), this.enableUpdating(!0), (e = this._$EO) == null || e.forEach((t) => {
       var r;
-      return (r = e.hostConnected) == null ? void 0 : r.call(e);
+      return (r = t.hostConnected) == null ? void 0 : r.call(t);
     });
   }
-  enableUpdating(t) {
+  enableUpdating(e) {
   }
   disconnectedCallback() {
-    var t;
-    (t = this._$EO) == null || t.forEach((e) => {
+    var e;
+    (e = this._$EO) == null || e.forEach((t) => {
       var r;
-      return (r = e.hostDisconnected) == null ? void 0 : r.call(e);
+      return (r = t.hostDisconnected) == null ? void 0 : r.call(t);
     });
   }
-  attributeChangedCallback(t, e, r) {
-    this._$AK(t, r);
+  attributeChangedCallback(e, t, r) {
+    this._$AK(e, r);
   }
-  _$EC(t, e) {
+  _$EC(e, t) {
     var i;
-    const r = this.constructor.elementProperties.get(t), s = this.constructor._$Eu(t, r);
-    if (s !== void 0 && r.reflect === !0) {
-      const n = (((i = r.converter) == null ? void 0 : i.toAttribute) !== void 0 ? r.converter : R).toAttribute(e, r.type);
-      this._$Em = t, n == null ? this.removeAttribute(s) : this.setAttribute(s, n), this._$Em = null;
+    const r = this.constructor.elementProperties.get(e), o = this.constructor._$Eu(e, r);
+    if (o !== void 0 && r.reflect === !0) {
+      const n = (((i = r.converter) == null ? void 0 : i.toAttribute) !== void 0 ? r.converter : V).toAttribute(t, r.type);
+      this._$Em = e, n == null ? this.removeAttribute(o) : this.setAttribute(o, n), this._$Em = null;
     }
   }
-  _$AK(t, e) {
+  _$AK(e, t) {
     var i;
-    const r = this.constructor, s = r._$Eh.get(t);
-    if (s !== void 0 && this._$Em !== s) {
-      const n = r.getPropertyOptions(s), d = typeof n.converter == "function" ? { fromAttribute: n.converter } : ((i = n.converter) == null ? void 0 : i.fromAttribute) !== void 0 ? n.converter : R;
-      this._$Em = s, this[s] = d.fromAttribute(e, n.type), this._$Em = null;
+    const r = this.constructor, o = r._$Eh.get(e);
+    if (o !== void 0 && this._$Em !== o) {
+      const n = r.getPropertyOptions(o), l = typeof n.converter == "function" ? { fromAttribute: n.converter } : ((i = n.converter) == null ? void 0 : i.fromAttribute) !== void 0 ? n.converter : V;
+      this._$Em = o, this[o] = l.fromAttribute(t, n.type), this._$Em = null;
     }
   }
-  requestUpdate(t, e, r) {
-    if (t !== void 0) {
-      if (r ?? (r = this.constructor.getPropertyOptions(t)), !(r.hasChanged ?? Ct)(this[t], e)) return;
-      this.P(t, e, r);
+  requestUpdate(e, t, r) {
+    if (e !== void 0) {
+      if (r ?? (r = this.constructor.getPropertyOptions(e)), !(r.hasChanged ?? de)(this[e], t)) return;
+      this.P(e, t, r);
     }
     this.isUpdatePending === !1 && (this._$ES = this._$ET());
   }
-  P(t, e, r) {
-    this._$AL.has(t) || this._$AL.set(t, e), r.reflect === !0 && this._$Em !== t && (this._$Ej ?? (this._$Ej = /* @__PURE__ */ new Set())).add(t);
+  P(e, t, r) {
+    this._$AL.has(e) || this._$AL.set(e, t), r.reflect === !0 && this._$Em !== e && (this._$Ej ?? (this._$Ej = /* @__PURE__ */ new Set())).add(e);
   }
   async _$ET() {
     this.isUpdatePending = !0;
     try {
       await this._$ES;
-    } catch (e) {
-      Promise.reject(e);
+    } catch (t) {
+      Promise.reject(t);
     }
-    const t = this.scheduleUpdate();
-    return t != null && await t, !this.isUpdatePending;
+    const e = this.scheduleUpdate();
+    return e != null && await e, !this.isUpdatePending;
   }
   scheduleUpdate() {
     return this.performUpdate();
@@ -317,29 +248,29 @@ class I extends HTMLElement {
         for (const [i, n] of this._$Ep) this[i] = n;
         this._$Ep = void 0;
       }
-      const s = this.constructor.elementProperties;
-      if (s.size > 0) for (const [i, n] of s) n.wrapped !== !0 || this._$AL.has(i) || this[i] === void 0 || this.P(i, this[i], n);
+      const o = this.constructor.elementProperties;
+      if (o.size > 0) for (const [i, n] of o) n.wrapped !== !0 || this._$AL.has(i) || this[i] === void 0 || this.P(i, this[i], n);
     }
-    let t = !1;
-    const e = this._$AL;
+    let e = !1;
+    const t = this._$AL;
     try {
-      t = this.shouldUpdate(e), t ? (this.willUpdate(e), (r = this._$EO) == null || r.forEach((s) => {
+      e = this.shouldUpdate(t), e ? (this.willUpdate(t), (r = this._$EO) == null || r.forEach((o) => {
         var i;
-        return (i = s.hostUpdate) == null ? void 0 : i.call(s);
-      }), this.update(e)) : this._$EU();
-    } catch (s) {
-      throw t = !1, this._$EU(), s;
+        return (i = o.hostUpdate) == null ? void 0 : i.call(o);
+      }), this.update(t)) : this._$EU();
+    } catch (o) {
+      throw e = !1, this._$EU(), o;
     }
-    t && this._$AE(e);
+    e && this._$AE(t);
   }
-  willUpdate(t) {
+  willUpdate(e) {
   }
-  _$AE(t) {
-    var e;
-    (e = this._$EO) == null || e.forEach((r) => {
-      var s;
-      return (s = r.hostUpdated) == null ? void 0 : s.call(r);
-    }), this.hasUpdated || (this.hasUpdated = !0, this.firstUpdated(t)), this.updated(t);
+  _$AE(e) {
+    var t;
+    (t = this._$EO) == null || t.forEach((r) => {
+      var o;
+      return (o = r.hostUpdated) == null ? void 0 : o.call(r);
+    }), this.hasUpdated || (this.hasUpdated = !0, this.firstUpdated(e)), this.updated(e);
   }
   _$EU() {
     this._$AL = /* @__PURE__ */ new Map(), this.isUpdatePending = !1;
@@ -350,89 +281,89 @@ class I extends HTMLElement {
   getUpdateComplete() {
     return this._$ES;
   }
-  shouldUpdate(t) {
+  shouldUpdate(e) {
     return !0;
   }
-  update(t) {
-    this._$Ej && (this._$Ej = this._$Ej.forEach((e) => this._$EC(e, this[e]))), this._$EU();
+  update(e) {
+    this._$Ej && (this._$Ej = this._$Ej.forEach((t) => this._$EC(t, this[t]))), this._$EU();
   }
-  updated(t) {
+  updated(e) {
   }
-  firstUpdated(t) {
+  firstUpdated(e) {
   }
 }
-I.elementStyles = [], I.shadowRootOptions = { mode: "open" }, I[q("elementProperties")] = /* @__PURE__ */ new Map(), I[q("finalized")] = /* @__PURE__ */ new Map(), lt == null || lt({ ReactiveElement: I }), (A.reactiveElementVersions ?? (A.reactiveElementVersions = [])).push("2.0.4");
+P.elementStyles = [], P.shadowRootOptions = { mode: "open" }, P[U("elementProperties")] = /* @__PURE__ */ new Map(), P[U("finalized")] = /* @__PURE__ */ new Map(), z == null || z({ ReactiveElement: P }), ($.reactiveElementVersions ?? ($.reactiveElementVersions = [])).push("2.0.4");
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const W = globalThis, st = W.trustedTypes, Vt = st ? st.createPolicy("lit-html", { createHTML: (o) => o }) : void 0, Gt = "$lit$", C = `lit$${Math.random().toFixed(9).slice(2)}$`, Qt = "?" + C, Ue = `<${Qt}>`, L = document, Z = () => L.createComment(""), Y = (o) => o === null || typeof o != "object" && typeof o != "function", At = Array.isArray, Le = (o) => At(o) || typeof (o == null ? void 0 : o[Symbol.iterator]) == "function", ut = `[ 	
-\f\r]`, N = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, Rt = /-->/g, Bt = />/g, P = RegExp(`>|${ut}(?:([^\\s"'>=/]+)(${ut}*=${ut}*(?:[^ 	
-\f\r"'\`<>=]|("|')|))|$)`, "g"), Mt = /'/g, Nt = /"/g, Xt = /^(?:script|style|textarea|title)$/i, Oe = (o) => (t, ...e) => ({ _$litType$: o, strings: t, values: e }), v = Oe(1), w = Symbol.for("lit-noChange"), g = Symbol.for("lit-nothing"), Dt = /* @__PURE__ */ new WeakMap(), U = L.createTreeWalker(L, 129);
-function te(o, t) {
-  if (!At(o) || !o.hasOwnProperty("raw")) throw Error("invalid template strings array");
-  return Vt !== void 0 ? Vt.createHTML(t) : t;
+const R = globalThis, M = R.trustedTypes, re = M ? M.createPolicy("lit-html", { createHTML: (s) => s }) : void 0, he = "$lit$", w = `lit$${Math.random().toFixed(9).slice(2)}$`, ue = "?" + w, Ue = `<${ue}>`, A = document, O = () => A.createComment(""), N = (s) => s === null || typeof s != "object" && typeof s != "function", J = Array.isArray, Re = (s) => J(s) || typeof (s == null ? void 0 : s[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, Oe = (s) => (e, ...t) => ({ _$litType$: s, strings: e, values: t }), c = Oe(1), S = Symbol.for("lit-noChange"), p = Symbol.for("lit-nothing"), ae = /* @__PURE__ */ new WeakMap(), _ = A.createTreeWalker(A, 129);
+function me(s, e) {
+  if (!J(s) || !s.hasOwnProperty("raw")) throw Error("invalid template strings array");
+  return re !== void 0 ? re.createHTML(e) : e;
 }
-const Ie = (o, t) => {
-  const e = o.length - 1, r = [];
-  let s, i = t === 2 ? "<svg>" : t === 3 ? "<math>" : "", n = N;
-  for (let d = 0; d < e; d++) {
-    const l = o[d];
-    let c, b, p = -1, _ = 0;
-    for (; _ < l.length && (n.lastIndex = _, b = n.exec(l), b !== null); ) _ = n.lastIndex, n === N ? b[1] === "!--" ? n = Rt : b[1] !== void 0 ? n = Bt : b[2] !== void 0 ? (Xt.test(b[2]) && (s = RegExp("</" + b[2], "g")), n = P) : b[3] !== void 0 && (n = P) : n === P ? b[0] === ">" ? (n = s ?? N, p = -1) : b[1] === void 0 ? p = -2 : (p = n.lastIndex - b[2].length, c = b[1], n = b[3] === void 0 ? P : b[3] === '"' ? Nt : Mt) : n === Nt || n === Mt ? n = P : n === Rt || n === Bt ? n = N : (n = P, s = void 0);
-    const y = n === P && o[d + 1].startsWith("/>") ? " " : "";
-    i += n === N ? l + Ue : p >= 0 ? (r.push(c), l.slice(0, p) + Gt + l.slice(p) + C + y) : l + C + (p === -2 ? d : y);
-  }
-  return [te(o, i + (o[e] || "<?>") + (t === 2 ? "</svg>" : t === 3 ? "</math>" : "")), r];
+const Ne = (s, e) => {
+  const t = s.length - 1, r = [];
+  let o, i = e === 2 ? "<svg>" : e === 3 ? "<math>" : "", n = T;
+  for (let l = 0; l < t; l++) {
+    const a = s[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 && s[l + 1].startsWith("/>") ? " " : "";
+    i += n === T ? a + Ue : h >= 0 ? (r.push(u), a.slice(0, h) + he + a.slice(h) + w + f) : a + w + (h === -2 ? l : f);
+  }
+  return [me(s, i + (s[t] || "<?>") + (e === 2 ? "</svg>" : e === 3 ? "</math>" : "")), r];
 };
-class J {
-  constructor({ strings: t, _$litType$: e }, r) {
-    let s;
+class H {
+  constructor({ strings: e, _$litType$: t }, r) {
+    let o;
     this.parts = [];
     let i = 0, n = 0;
-    const d = t.length - 1, l = this.parts, [c, b] = Ie(t, e);
-    if (this.el = J.createElement(c, r), U.currentNode = this.el.content, e === 2 || e === 3) {
-      const p = this.el.content.firstChild;
-      p.replaceWith(...p.childNodes);
+    const l = e.length - 1, a = this.parts, [u, d] = Ne(e, t);
+    if (this.el = H.createElement(u, r), _.currentNode = this.el.content, t === 2 || t === 3) {
+      const h = this.el.content.firstChild;
+      h.replaceWith(...h.childNodes);
     }
-    for (; (s = U.nextNode()) !== null && l.length < d; ) {
-      if (s.nodeType === 1) {
-        if (s.hasAttributes()) for (const p of s.getAttributeNames()) if (p.endsWith(Gt)) {
-          const _ = b[n++], y = s.getAttribute(p).split(C), tt = /([.?@])?(.*)/.exec(_);
-          l.push({ type: 1, index: i, name: tt[2], strings: y, ctor: tt[1] === "." ? Re : tt[1] === "?" ? Be : tt[1] === "@" ? Me : nt }), s.removeAttribute(p);
-        } else p.startsWith(C) && (l.push({ type: 6, index: i }), s.removeAttribute(p));
-        if (Xt.test(s.tagName)) {
-          const p = s.textContent.split(C), _ = p.length - 1;
-          if (_ > 0) {
-            s.textContent = st ? st.emptyScript : "";
-            for (let y = 0; y < _; y++) s.append(p[y], Z()), U.nextNode(), l.push({ type: 2, index: ++i });
-            s.append(p[_], Z());
+    for (; (o = _.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(w), L = /([.?@])?(.*)/.exec(m);
+          a.push({ type: 1, index: i, name: L[2], strings: f, ctor: L[1] === "." ? qe : L[1] === "?" ? De : L[1] === "@" ? Le : I }), o.removeAttribute(h);
+        } else h.startsWith(w) && (a.push({ type: 6, index: i }), o.removeAttribute(h));
+        if (pe.test(o.tagName)) {
+          const h = o.textContent.split(w), m = h.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());
           }
         }
-      } else if (s.nodeType === 8) if (s.data === Qt) l.push({ type: 2, index: i });
+      } else if (o.nodeType === 8) if (o.data === ue) a.push({ type: 2, index: i });
       else {
-        let p = -1;
-        for (; (p = s.data.indexOf(C, p + 1)) !== -1; ) l.push({ type: 7, index: i }), p += C.length - 1;
+        let h = -1;
+        for (; (h = o.data.indexOf(w, h + 1)) !== -1; ) a.push({ type: 7, index: i }), h += w.length - 1;
       }
       i++;
     }
   }
-  static createElement(t, e) {
-    const r = L.createElement("template");
-    return r.innerHTML = t, r;
+  static createElement(e, t) {
+    const r = A.createElement("template");
+    return r.innerHTML = e, r;
   }
 }
-function B(o, t, e = o, r) {
-  var n, d;
-  if (t === w) return t;
-  let s = r !== void 0 ? (n = e.o) == null ? void 0 : n[r] : e.l;
-  const i = Y(t) ? void 0 : t._$litDirective$;
-  return (s == null ? void 0 : s.constructor) !== i && ((d = s == null ? void 0 : s._$AO) == null || d.call(s, !1), i === void 0 ? s = void 0 : (s = new i(o), s._$AT(o, e, r)), r !== void 0 ? (e.o ?? (e.o = []))[r] = s : e.l = s), s !== void 0 && (t = B(o, s._$AS(o, t.values), s, r)), t;
+function C(s, e, t = s, r) {
+  var n, l;
+  if (e === S) return e;
+  let o = r !== void 0 ? (n = t._$Co) == null ? void 0 : n[r] : 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(s), o._$AT(s, t, r)), r !== void 0 ? (t._$Co ?? (t._$Co = []))[r] = o : t._$Cl = o), o !== void 0 && (e = C(s, o._$AS(s, e.values), o, r)), e;
 }
-class Ve {
-  constructor(t, e) {
-    this._$AV = [], this._$AN = void 0, this._$AD = t, this._$AM = e;
+class He {
+  constructor(e, t) {
+    this._$AV = [], this._$AN = void 0, this._$AD = e, this._$AM = t;
   }
   get parentNode() {
     return this._$AM.parentNode;
@@ -440,36 +371,36 @@ class Ve {
   get _$AU() {
     return this._$AM._$AU;
   }
-  u(t) {
-    const { el: { content: e }, parts: r } = this._$AD, s = ((t == null ? void 0 : t.creationScope) ?? L).importNode(e, !0);
-    U.currentNode = s;
-    let i = U.nextNode(), n = 0, d = 0, l = r[0];
-    for (; l !== void 0; ) {
-      if (n === l.index) {
-        let c;
-        l.type === 2 ? c = new G(i, i.nextSibling, this, t) : l.type === 1 ? c = new l.ctor(i, l.name, l.strings, this, t) : l.type === 6 && (c = new Ne(i, this, t)), this._$AV.push(c), l = r[++d];
+  u(e) {
+    const { el: { content: t }, parts: r } = this._$AD, o = ((e == null ? void 0 : e.creationScope) ?? A).importNode(t, !0);
+    _.currentNode = o;
+    let i = _.nextNode(), n = 0, l = 0, a = r[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 Fe(i, this, e)), this._$AV.push(u), a = r[++l];
       }
-      n !== (l == null ? void 0 : l.index) && (i = U.nextNode(), n++);
+      n !== (a == null ? void 0 : a.index) && (i = _.nextNode(), n++);
     }
-    return U.currentNode = L, s;
+    return _.currentNode = A, o;
   }
-  p(t) {
-    let e = 0;
-    for (const r of this._$AV) r !== void 0 && (r.strings !== void 0 ? (r._$AI(t, r, e), e += r.strings.length - 2) : r._$AI(t[e])), e++;
+  p(e) {
+    let t = 0;
+    for (const r of this._$AV) r !== void 0 && (r.strings !== void 0 ? (r._$AI(e, r, t), t += r.strings.length - 2) : r._$AI(e[t])), t++;
   }
 }
-class G {
+class D {
   get _$AU() {
-    var t;
-    return ((t = this._$AM) == null ? void 0 : t._$AU) ?? this.v;
+    var e;
+    return ((e = this._$AM) == null ? void 0 : e._$AU) ?? this._$Cv;
   }
-  constructor(t, e, r, s) {
-    this.type = 2, this._$AH = g, this._$AN = void 0, this._$AA = t, this._$AB = e, this._$AM = r, this.options = s, this.v = (s == null ? void 0 : s.isConnected) ?? !0;
+  constructor(e, t, r, o) {
+    this.type = 2, this._$AH = p, this._$AN = void 0, this._$AA = e, this._$AB = t, this._$AM = r, this.options = o, this._$Cv = (o == null ? void 0 : o.isConnected) ?? !0;
   }
   get parentNode() {
-    let t = this._$AA.parentNode;
-    const e = this._$AM;
-    return e !== void 0 && (t == null ? void 0 : t.nodeType) === 11 && (t = e.parentNode), t;
+    let e = this._$AA.parentNode;
+    const t = this._$AM;
+    return t !== void 0 && (e == null ? void 0 : e.nodeType) === 11 && (e = t.parentNode), e;
   }
   get startNode() {
     return this._$AA;
@@ -477,2903 +408,971 @@ class G {
   get endNode() {
     return this._$AB;
   }
-  _$AI(t, e = this) {
-    t = B(this, t, e), Y(t) ? t === g || t == null || t === "" ? (this._$AH !== g && this._$AR(), this._$AH = g) : t !== this._$AH && t !== w && this._(t) : t._$litType$ !== void 0 ? this.$(t) : t.nodeType !== void 0 ? this.T(t) : Le(t) ? this.k(t) : this._(t);
+  _$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) : Re(e) ? this.k(e) : this._(e);
   }
-  O(t) {
-    return this._$AA.parentNode.insertBefore(t, this._$AB);
+  O(e) {
+    return this._$AA.parentNode.insertBefore(e, this._$AB);
   }
-  T(t) {
-    this._$AH !== t && (this._$AR(), this._$AH = this.O(t));
+  T(e) {
+    this._$AH !== e && (this._$AR(), this._$AH = this.O(e));
   }
-  _(t) {
-    this._$AH !== g && Y(this._$AH) ? this._$AA.nextSibling.data = t : this.T(L.createTextNode(t)), this._$AH = t;
+  _(e) {
+    this._$AH !== p && N(this._$AH) ? this._$AA.nextSibling.data = e : this.T(A.createTextNode(e)), this._$AH = e;
   }
-  $(t) {
+  $(e) {
     var i;
-    const { values: e, _$litType$: r } = t, s = typeof r == "number" ? this._$AC(t) : (r.el === void 0 && (r.el = J.createElement(te(r.h, r.h[0]), this.options)), r);
-    if (((i = this._$AH) == null ? void 0 : i._$AD) === s) this._$AH.p(e);
+    const { values: t, _$litType$: r } = e, o = typeof r == "number" ? this._$AC(e) : (r.el === void 0 && (r.el = H.createElement(me(r.h, r.h[0]), this.options)), r);
+    if (((i = this._$AH) == null ? void 0 : i._$AD) === o) this._$AH.p(t);
     else {
-      const n = new Ve(s, this), d = n.u(this.options);
-      n.p(e), this.T(d), this._$AH = n;
+      const n = new He(o, this), l = n.u(this.options);
+      n.p(t), this.T(l), this._$AH = n;
     }
   }
-  _$AC(t) {
-    let e = Dt.get(t.strings);
-    return e === void 0 && Dt.set(t.strings, e = new J(t)), e;
+  _$AC(e) {
+    let t = ae.get(e.strings);
+    return t === void 0 && ae.set(e.strings, t = new H(e)), t;
   }
-  k(t) {
-    At(this._$AH) || (this._$AH = [], this._$AR());
-    const e = this._$AH;
-    let r, s = 0;
-    for (const i of t) s === e.length ? e.push(r = new G(this.O(Z()), this.O(Z()), this, this.options)) : r = e[s], r._$AI(i), s++;
-    s < e.length && (this._$AR(r && r._$AB.nextSibling, s), e.length = s);
+  k(e) {
+    J(this._$AH) || (this._$AH = [], this._$AR());
+    const t = this._$AH;
+    let r, o = 0;
+    for (const i of e) o === t.length ? t.push(r = new D(this.O(O()), this.O(O()), this, this.options)) : r = t[o], r._$AI(i), o++;
+    o < t.length && (this._$AR(r && r._$AB.nextSibling, o), t.length = o);
   }
-  _$AR(t = this._$AA.nextSibling, e) {
+  _$AR(e = this._$AA.nextSibling, t) {
     var r;
-    for ((r = this._$AP) == null ? void 0 : r.call(this, !1, !0, e); t && t !== this._$AB; ) {
-      const s = t.nextSibling;
-      t.remove(), t = s;
+    for ((r = this._$AP) == null ? void 0 : r.call(this, !1, !0, t); e && e !== this._$AB; ) {
+      const o = e.nextSibling;
+      e.remove(), e = o;
     }
   }
-  setConnected(t) {
-    var e;
-    this._$AM === void 0 && (this.v = t, (e = this._$AP) == null || e.call(this, t));
+  setConnected(e) {
+    var t;
+    this._$AM === void 0 && (this._$Cv = e, (t = this._$AP) == null || t.call(this, e));
   }
 }
-class nt {
+class I {
   get tagName() {
     return this.element.tagName;
   }
   get _$AU() {
     return this._$AM._$AU;
   }
-  constructor(t, e, r, s, i) {
-    this.type = 1, this._$AH = g, this._$AN = void 0, this.element = t, this.name = e, this._$AM = s, this.options = i, r.length > 2 || r[0] !== "" || r[1] !== "" ? (this._$AH = Array(r.length - 1).fill(new String()), this.strings = r) : this._$AH = g;
+  constructor(e, t, r, o, i) {
+    this.type = 1, this._$AH = p, this._$AN = void 0, this.element = e, this.name = t, this._$AM = o, this.options = i, r.length > 2 || r[0] !== "" || r[1] !== "" ? (this._$AH = Array(r.length - 1).fill(new String()), this.strings = r) : this._$AH = p;
   }
-  _$AI(t, e = this, r, s) {
+  _$AI(e, t = this, r, o) {
     const i = this.strings;
     let n = !1;
-    if (i === void 0) t = B(this, t, e, 0), n = !Y(t) || t !== this._$AH && t !== w, n && (this._$AH = t);
+    if (i === void 0) e = C(this, e, t, 0), n = !N(e) || e !== this._$AH && e !== S, n && (this._$AH = e);
     else {
-      const d = t;
-      let l, c;
-      for (t = i[0], l = 0; l < i.length - 1; l++) c = B(this, d[r + l], e, l), c === w && (c = this._$AH[l]), n || (n = !Y(c) || c !== this._$AH[l]), c === g ? t = g : t !== g && (t += (c ?? "") + i[l + 1]), this._$AH[l] = c;
+      const l = e;
+      let a, u;
+      for (e = i[0], a = 0; a < i.length - 1; a++) u = C(this, l[r + 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;
     }
-    n && !s && this.j(t);
+    n && !o && this.j(e);
   }
-  j(t) {
-    t === g ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, t ?? "");
+  j(e) {
+    e === p ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, e ?? "");
   }
 }
-class Re extends nt {
+class qe extends I {
   constructor() {
     super(...arguments), this.type = 3;
   }
-  j(t) {
-    this.element[this.name] = t === g ? void 0 : t;
+  j(e) {
+    this.element[this.name] = e === p ? void 0 : e;
   }
 }
-class Be extends nt {
+class De extends I {
   constructor() {
     super(...arguments), this.type = 4;
   }
-  j(t) {
-    this.element.toggleAttribute(this.name, !!t && t !== g);
+  j(e) {
+    this.element.toggleAttribute(this.name, !!e && e !== p);
   }
 }
-class Me extends nt {
-  constructor(t, e, r, s, i) {
-    super(t, e, r, s, i), this.type = 5;
+class Le extends I {
+  constructor(e, t, r, o, i) {
+    super(e, t, r, o, i), this.type = 5;
   }
-  _$AI(t, e = this) {
-    if ((t = B(this, t, e, 0) ?? g) === w) return;
-    const r = this._$AH, s = t === g && r !== g || t.capture !== r.capture || t.once !== r.once || t.passive !== r.passive, i = t !== g && (r === g || s);
-    s && this.element.removeEventListener(this.name, this, r), i && this.element.addEventListener(this.name, this, t), this._$AH = t;
+  _$AI(e, t = this) {
+    if ((e = C(this, e, t, 0) ?? p) === S) return;
+    const r = this._$AH, o = e === p && r !== p || e.capture !== r.capture || e.once !== r.once || e.passive !== r.passive, i = e !== p && (r === p || o);
+    o && this.element.removeEventListener(this.name, this, r), i && this.element.addEventListener(this.name, this, e), this._$AH = e;
   }
-  handleEvent(t) {
-    var e;
-    typeof this._$AH == "function" ? this._$AH.call(((e = this.options) == null ? void 0 : e.host) ?? this.element, t) : this._$AH.handleEvent(t);
+  handleEvent(e) {
+    var t;
+    typeof this._$AH == "function" ? this._$AH.call(((t = this.options) == null ? void 0 : t.host) ?? this.element, e) : this._$AH.handleEvent(e);
   }
 }
-class Ne {
-  constructor(t, e, r) {
-    this.element = t, this.type = 6, this._$AN = void 0, this._$AM = e, this.options = r;
+class Fe {
+  constructor(e, t, r) {
+    this.element = e, this.type = 6, this._$AN = void 0, this._$AM = t, this.options = r;
   }
   get _$AU() {
     return this._$AM._$AU;
   }
-  _$AI(t) {
-    B(this, t);
+  _$AI(e) {
+    C(this, e);
   }
 }
-const dt = W.litHtmlPolyfillSupport;
-dt == null || dt(J, G), (W.litHtmlVersions ?? (W.litHtmlVersions = [])).push("3.2.0");
-const De = (o, t, e) => {
-  const r = (e == null ? void 0 : e.renderBefore) ?? t;
-  let s = r._$litPart$;
-  if (s === void 0) {
-    const i = (e == null ? void 0 : e.renderBefore) ?? null;
-    r._$litPart$ = s = new G(t.insertBefore(Z(), i), i, void 0, e ?? {});
-  }
-  return s._$AI(o), s;
+const W = R.litHtmlPolyfillSupport;
+W == null || W(H, D), (R.litHtmlVersions ?? (R.litHtmlVersions = [])).push("3.2.1");
+const Me = (s, e, t) => {
+  const r = (t == null ? void 0 : t.renderBefore) ?? e;
+  let o = r._$litPart$;
+  if (o === void 0) {
+    const i = (t == null ? void 0 : t.renderBefore) ?? null;
+    r._$litPart$ = o = new D(e.insertBefore(O(), i), i, void 0, t ?? {});
+  }
+  return o._$AI(s), o;
 };
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-class S extends I {
+class b extends P {
   constructor() {
-    super(...arguments), this.renderOptions = { host: this }, this.o = void 0;
+    super(...arguments), this.renderOptions = { host: this }, this._$Do = void 0;
   }
   createRenderRoot() {
-    var e;
-    const t = super.createRenderRoot();
-    return (e = this.renderOptions).renderBefore ?? (e.renderBefore = t.firstChild), t;
+    var t;
+    const e = super.createRenderRoot();
+    return (t = this.renderOptions).renderBefore ?? (t.renderBefore = e.firstChild), e;
   }
-  update(t) {
-    const e = this.render();
-    this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(t), this.o = De(e, this.renderRoot, this.renderOptions);
+  update(e) {
+    const t = this.render();
+    this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(e), this._$Do = Me(t, this.renderRoot, this.renderOptions);
   }
   connectedCallback() {
-    var t;
-    super.connectedCallback(), (t = this.o) == null || t.setConnected(!0);
+    var e;
+    super.connectedCallback(), (e = this._$Do) == null || e.setConnected(!0);
   }
   disconnectedCallback() {
-    var t;
-    super.disconnectedCallback(), (t = this.o) == null || t.setConnected(!1);
+    var e;
+    super.disconnectedCallback(), (e = this._$Do) == null || e.setConnected(!1);
   }
   render() {
-    return w;
+    return S;
   }
 }
-var Yt;
-S._$litElement$ = !0, S.finalized = !0, (Yt = globalThis.litElementHydrateSupport) == null || Yt.call(globalThis, { LitElement: S });
-const ct = globalThis.litElementPolyfillSupport;
-ct == null || ct({ LitElement: S });
-(globalThis.litElementVersions ?? (globalThis.litElementVersions = [])).push("4.1.0");
-var Fe = $`
-  :host {
-    --border-color: var(--sl-color-neutral-200);
-    --border-radius: var(--sl-border-radius-medium);
-    --border-width: 1px;
-    --padding: var(--sl-spacing-large);
-
-    display: inline-block;
-  }
-
-  .card {
-    display: flex;
-    flex-direction: column;
-    background-color: var(--sl-panel-background-color);
-    box-shadow: var(--sl-shadow-x-small);
-    border: solid var(--border-width) var(--border-color);
-    border-radius: var(--border-radius);
-  }
-
-  .card__image {
-    display: flex;
-    border-top-left-radius: var(--border-radius);
-    border-top-right-radius: var(--border-radius);
-    margin: calc(-1 * var(--border-width));
-    overflow: hidden;
-  }
-
-  .card__image::slotted(img) {
-    display: block;
-    width: 100%;
-  }
-
-  .card:not(.card--has-image) .card__image {
-    display: none;
-  }
-
-  .card__header {
-    display: block;
-    border-bottom: solid var(--border-width) var(--border-color);
-    padding: calc(var(--padding) / 2) var(--padding);
-  }
-
-  .card:not(.card--has-header) .card__header {
-    display: none;
-  }
-
-  .card:not(.card--has-image) .card__header {
-    border-top-left-radius: var(--border-radius);
-    border-top-right-radius: var(--border-radius);
-  }
-
-  .card__body {
-    display: block;
-    padding: var(--padding);
-  }
-
-  .card--has-footer .card__footer {
-    display: block;
-    border-top: solid var(--border-width) var(--border-color);
-    padding: var(--padding);
-  }
-
-  .card:not(.card--has-footer) .card__footer {
-    display: none;
-  }
-`, St = class {
-  constructor(o, ...t) {
-    this.slotNames = [], this.handleSlotChange = (e) => {
-      const r = e.target;
-      (this.slotNames.includes("[default]") && !r.name || r.name && this.slotNames.includes(r.name)) && this.host.requestUpdate();
-    }, (this.host = o).addController(this), this.slotNames = t;
-  }
-  hasDefaultSlot() {
-    return [...this.host.childNodes].some((o) => {
-      if (o.nodeType === o.TEXT_NODE && o.textContent.trim() !== "")
-        return !0;
-      if (o.nodeType === o.ELEMENT_NODE) {
-        const t = o;
-        if (t.tagName.toLowerCase() === "sl-visually-hidden")
-          return !1;
-        if (!t.hasAttribute("slot"))
-          return !0;
-      }
-      return !1;
-    });
-  }
-  hasNamedSlot(o) {
-    return this.host.querySelector(`:scope > [slot="${o}"]`) !== null;
-  }
-  test(o) {
-    return o === "[default]" ? this.hasDefaultSlot() : this.hasNamedSlot(o);
-  }
-  hostConnected() {
-    this.host.shadowRoot.addEventListener("slotchange", this.handleSlotChange);
-  }
-  hostDisconnected() {
-    this.host.shadowRoot.removeEventListener("slotchange", this.handleSlotChange);
-  }
-}, Q = $`
-  :host {
-    box-sizing: border-box;
-  }
-
-  :host *,
-  :host *::before,
-  :host *::after {
-    box-sizing: inherit;
-  }
-
-  [hidden] {
-    display: none !important;
-  }
-`, ee = Object.defineProperty, He = Object.defineProperties, je = Object.getOwnPropertyDescriptor, qe = Object.getOwnPropertyDescriptors, Ft = Object.getOwnPropertySymbols, We = Object.prototype.hasOwnProperty, Ke = Object.prototype.propertyIsEnumerable, Ht = (o, t, e) => t in o ? ee(o, t, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[t] = e, X = (o, t) => {
-  for (var e in t || (t = {}))
-    We.call(t, e) && Ht(o, e, t[e]);
-  if (Ft)
-    for (var e of Ft(t))
-      Ke.call(t, e) && Ht(o, e, t[e]);
-  return o;
-}, oe = (o, t) => He(o, qe(t)), a = (o, t, e, r) => {
-  for (var s = r > 1 ? void 0 : r ? je(t, e) : t, i = o.length - 1, n; i >= 0; i--)
-    (n = o[i]) && (s = (r ? n(t, e, s) : n(s)) || s);
-  return r && s && ee(t, e, s), s;
-};
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const Ze = { attribute: !0, type: String, converter: R, reflect: !1, hasChanged: Ct }, Ye = (o = Ze, t, e) => {
-  const { kind: r, metadata: s } = e;
-  let i = globalThis.litPropertyMetadata.get(s);
-  if (i === void 0 && globalThis.litPropertyMetadata.set(s, i = /* @__PURE__ */ new Map()), i.set(e.name, o), r === "accessor") {
-    const { name: n } = e;
-    return { set(d) {
-      const l = t.get.call(this);
-      t.set.call(this, d), this.requestUpdate(n, l, o);
-    }, init(d) {
-      return d !== void 0 && this.P(n, void 0, o), d;
-    } };
-  }
-  if (r === "setter") {
-    const { name: n } = e;
-    return function(d) {
-      const l = this[n];
-      t.call(this, d), this.requestUpdate(n, l, o);
-    };
-  }
-  throw Error("Unsupported decorator location: " + r);
-};
-function u(o) {
-  return (t, e) => typeof e == "object" ? Ye(o, t, e) : ((r, s, i) => {
-    const n = s.hasOwnProperty(i);
-    return s.constructor.createProperty(i, n ? { ...r, wrapped: !0 } : r), n ? Object.getOwnPropertyDescriptor(s, i) : void 0;
-  })(o, t, e);
+var le;
+b._$litElement$ = !0, b.finalized = !0, (le = globalThis.litElementHydrateSupport) == null || le.call(globalThis, { LitElement: b });
+const B = globalThis.litElementPolyfillSupport;
+B == null || B({ LitElement: b });
+(globalThis.litElementVersions ?? (globalThis.litElementVersions = [])).push("4.1.1");
+function x(s) {
+  return {
+    // Underlying mechanism to use the REST URLs directly.
+    api: (e, t) => E(s, e, t),
+    mintToken: ({ username: e, password: t }) => Ie({ config: s, username: e, password: t }),
+    refreshToken: ({ token: e }) => ze({ config: s, token: e }),
+    pubkey: () => je({ config: s }),
+    updatePassword: ({ token: e, currentPassword: t, newPassword: r }) => We({ config: s, token: e, currentPassword: t, newPassword: r }),
+    triggerResetPassword: ({ username: e }) => Be({ config: s, username: e }),
+    confirmResetPassword: ({ username: e, newPassword: t, confirmationCode: r }) => Ge({ config: s, username: e, newPassword: t, confirmationCode: r })
+  };
 }
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-function at(o) {
-  return u({ ...o, state: !0, attribute: !1 });
+function Ie({ config: s, username: e, password: t }) {
+  return E(s, "/v1/user/login", {
+    method: "POST",
+    body: {
+      username: e,
+      password: t
+    }
+  });
 }
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const Je = (o, t, e) => (e.configurable = !0, e.enumerable = !0, Reflect.decorate && typeof t != "object" && Object.defineProperty(o, t, e), e);
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-function re(o, t) {
-  return (e, r, s) => {
-    const i = (n) => {
-      var d;
-      return ((d = n.renderRoot) == null ? void 0 : d.querySelector(o)) ?? null;
-    };
-    return Je(e, r, { get() {
-      return i(this);
-    } });
-  };
+function ze({ config: s, token: e }) {
+  return E(s, "/v1/refresh", {
+    method: "POST",
+    body: {
+      token: e
+    }
+  });
 }
-var k = class extends S {
-  constructor() {
-    super(), Object.entries(this.constructor.dependencies).forEach(([o, t]) => {
-      this.constructor.define(o, t);
-    });
-  }
-  emit(o, t) {
-    const e = new CustomEvent(o, X({
-      bubbles: !0,
-      cancelable: !1,
-      composed: !0,
-      detail: {}
-    }, t));
-    return this.dispatchEvent(e), e;
-  }
-  /* eslint-enable */
-  static define(o, t = this, e = {}) {
-    const r = customElements.get(o);
-    if (!r) {
+function je({ config: s }) {
+  return E(s, "/v1/pubkey", {
+    method: "GET"
+  });
+}
+function We({ config: s, token: e, currentPassword: t, newPassword: r }) {
+  return E(s, "/v1/user/password", {
+    method: "PUT",
+    body: {
+      currentPassword: t,
+      newPassword: r
+    },
+    headers: {
+      Authorization: `Bearer ${e}`
+    }
+  });
+}
+function Be({ config: s, username: e }) {
+  return E(s, "/v1/user/password/reset", {
+    method: "POST",
+    body: {
+      username: e
+    }
+  });
+}
+function Ge({ config: s, username: e, newPassword: t, confirmationCode: r }) {
+  return E(s, "/v1/user/password/reset/confirm", {
+    method: "POST",
+    body: {
+      username: e,
+      newPassword: t,
+      confirmationCode: r
+    }
+  });
+}
+async function E(s, e, t) {
+  var u;
+  const r = s.baseUrl.endsWith("/") ? s.baseUrl : `${s.baseUrl}/`, o = e.startsWith("/") ? e.substring(1) : e, i = new URL(o, r), l = Object.assign({}, t, {
+    headers: Object.assign({}, {
+      "Content-Type": "application/json"
+    }, t == null ? void 0 : t.headers),
+    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"))
       try {
-        customElements.define(o, t, e);
+        d.body = await a.json();
       } catch {
-        customElements.define(o, class extends t {
-        }, e);
+        d.body = "Failed to parse response body.";
       }
-      return;
-    }
-    let s = " (unknown version)", i = s;
-    "version" in t && t.version && (s = " v" + t.version), "version" in r && r.version && (i = " v" + r.version), !(s && i && s === i) && console.warn(
-      `Attempted to register <${o}>${s}, but <${o}>${i} has already been registered.`
-    );
-  }
-};
-k.version = "2.16.0";
-k.dependencies = {};
-a([
-  u()
-], k.prototype, "dir", 2);
-a([
-  u()
-], k.prototype, "lang", 2);
-/**
- * @license
- * Copyright 2017 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const T = { ATTRIBUTE: 1, CHILD: 2, PROPERTY: 3, BOOLEAN_ATTRIBUTE: 4, EVENT: 5, ELEMENT: 6 }, se = (o) => (...t) => ({ _$litDirective$: o, values: t });
-class ie {
-  constructor(t) {
-  }
-  get _$AU() {
-    return this._$AM._$AU;
-  }
-  _$AT(t, e, r) {
-    this.t = t, this._$AM = e, this.i = r;
+    throw d;
   }
-  _$AS(t, e) {
-    return this.update(t, e);
+  if (a.status !== 204)
+    return await a.json();
+}
+function fe({ api: s }, e) {
+  const t = x({
+    baseUrl: s
+  });
+  return console.log("sending credentials to API", s), t.mintToken(e);
+}
+const g = Object.freeze({
+  REQUEST: "request",
+  CONFIRM: "confirm",
+  FINISHED: "finished"
+});
+class Ve extends b {
+  static get properties() {
+    return {
+      api: { type: String, attribute: "api" },
+      confirmation: { type: "String", attribute: "confirmation" }
+    };
   }
-  update(t, e) {
-    return this.render(...e);
+  static get styles() {
+    return q`
+			:host {
+				display: block;
+				font-family: Arial, sans-serif;
+			}
+			form input[type="text"],
+			form 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);
+			}
+			form 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;
+				display: block;
+				margin: var(--spacing-md, 1rem) auto;
+				cursor: pointer;
+			}
+			form label {
+				font-size: 14px;
+				color: var(--color-gray-9, #333);
+				font-weight: bold;
+				margin-bottom: var(--spacing-sm, 0.5rem);
+			}
+			.error {
+				color: var(--color-danger, red);
+				font-size: 12px;
+			}
+		`;
   }
-}
-/**
- * @license
- * Copyright 2018 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const it = se(class extends ie {
-  constructor(o) {
-    var t;
-    if (super(o), o.type !== T.ATTRIBUTE || o.name !== "class" || ((t = o.strings) == null ? void 0 : t.length) > 2) throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.");
+  constructor() {
+    super(), this.errors = {}, this.stage = g.REQUEST;
   }
-  render(o) {
-    return " " + Object.keys(o).filter((t) => o[t]).join(" ") + " ";
+  connectedCallback() {
+    console.log("[auth]", "[forgot-password]", { confirmation: this.confirmation }), super.connectedCallback(), this.confirmation && this.stage !== g.FINISHED && (this.stage = g.CONFIRM), 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;
+    }).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.";
+    }).finally(() => {
+      this.requestUpdate();
+    });
   }
-  update(o, [t]) {
-    var r, s;
-    if (this.st === void 0) {
-      this.st = /* @__PURE__ */ new Set(), o.strings !== void 0 && (this.nt = new Set(o.strings.join(" ").split(/\s/).filter((i) => i !== "")));
-      for (const i in t) t[i] && !((r = this.nt) != null && r.has(i)) && this.st.add(i);
-      return this.render(t);
+  handleSubmitConfirm(e) {
+    e.preventDefault();
+    const t = e.target.password.value, r = e.target["confirm-password"].value;
+    if (t !== r) {
+      this.errors["confirm-password"] = "Passwords do not match.", this.requestUpdate();
+      return;
     }
-    const e = o.element.classList;
-    for (const i of this.st) i in t || (e.remove(i), this.st.delete(i));
-    for (const i in t) {
-      const n = !!t[i];
-      n === this.st.has(i) || (s = this.nt) != null && s.has(i) || (n ? (e.add(i), this.st.add(i)) : (e.remove(i), this.st.delete(i)));
+    const o = this.confirmation || e.target.confirmation.value;
+    if (!o) {
+      this.errors.general = "Confirmation code is required.", this.requestUpdate();
+      return;
     }
-    return w;
-  }
-});
-var ne = class extends k {
-  constructor() {
-    super(...arguments), this.hasSlotController = new St(this, "footer", "header", "image");
+    x({
+      baseUrl: this.api
+    }).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.";
+    }).finally(() => {
+      this.requestUpdate();
+    });
   }
   render() {
-    return v`
-      <div
-        part="base"
-        class=${it({
-      card: !0,
-      "card--has-footer": this.hasSlotController.test("footer"),
-      "card--has-image": this.hasSlotController.test("image"),
-      "card--has-header": this.hasSlotController.test("header")
-    })}
-      >
-        <slot name="image" part="image" class="card__image"></slot>
-        <slot name="header" part="header" class="card__header"></slot>
-        <slot part="body" class="card__body"></slot>
-        <slot name="footer" part="footer" class="card__footer"></slot>
-      </div>
-    `;
-  }
-};
-ne.styles = [Q, Fe];
-ne.define("sl-card");
-var Ge = $`
-  :host {
-    display: block;
+    switch (this.stage) {
+      case g.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:
+      default:
+        return this.renderRequestForm();
+    }
   }
-
-  .input {
-    flex: 1 1 auto;
-    display: inline-flex;
-    align-items: stretch;
-    justify-content: start;
-    position: relative;
-    width: 100%;
-    font-family: var(--sl-input-font-family);
-    font-weight: var(--sl-input-font-weight);
-    letter-spacing: var(--sl-input-letter-spacing);
-    vertical-align: middle;
-    overflow: hidden;
-    cursor: text;
-    transition:
-      var(--sl-transition-fast) color,
-      var(--sl-transition-fast) border,
-      var(--sl-transition-fast) box-shadow,
-      var(--sl-transition-fast) background-color;
+  renderRequestForm() {
+    return c`<form @submit=${this.handleSubmitRequest}>
+			<label for="username">Username/Email</label>
+			<input
+				type="text"
+				name="username"
+				placeholder="Email or Username"
+				required
+			/>
+			<p class="error">${this.errors.general}</p>
+			<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>
+
+			${this.confirmation ? "" : c`<label for="confirmation">Confirmation Code</label>
+			<input
+				type="text"
+				name="confirmation"
+				placeholder="Confirmation Code"
+				required
+			/>`}
+
+			<label for="password">New Password</label>
+			<input
+				type="password"
+				name="password"
+				placeholder="Password"
+				required
+			/>
+			${this.errors.password ? c`<p class="error">${this.errors.password}</p>` : ""}
+			
+			<label for="confirm-password">Confirm Password</label>
+			<input
+				type="password"
+				name="confirm-password"
+				placeholder="Confirm Password"
+				required
+			/>
+			${this.errors["confirm-password"] ? c`<p class="error">${this.errors["confirm-password"]}</p>` : ""}
+
+			${this.errors.general ? c`<p class="error">${this.errors.general}</p>` : ""}
+			<input type="submit" value="Reset Password" />
+		</form>`;
   }
-
-  /* Standard inputs */
-  .input--standard {
-    background-color: var(--sl-input-background-color);
-    border: solid var(--sl-input-border-width) var(--sl-input-border-color);
+}
+class y extends b {
+  static get properties() {
+    return {
+      api: { type: String, attribute: "api" }
+    };
   }
-
-  .input--standard:hover:not(.input--disabled) {
-    background-color: var(--sl-input-background-color-hover);
-    border-color: var(--sl-input-border-color-hover);
+  static get styles() {
+    return q`
+			:host {
+				display: block;
+				font-family: Arial, sans-serif;
+			}
+			.login-form {
+				background-color: var(--color-gray-0, #fff);
+				padding: var(--spacing-xl, 3rem);
+				border-radius: var(--radius-md, 5px);
+				box-shadow: var(--drop-shadow-md, none);
+			}
+			form input[type="text"],
+			form 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);
+			}
+			form 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;
+				display: block;
+				margin: var(--spacing-md, 1rem) auto;
+				cursor: pointer;
+			}
+			form label {
+				font-size: 14px;
+				color: var(--color-gray-9, #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;
+			}
+			.error {
+				color: var(--color-error, red);
+				font-size: 12px;
+				margin-top: var(--spacing-sm, 0.5rem);
+			}
+			.header {
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+			}
+			.header .intro {
+				width: 200px;
+				margin-bottom: 0;
+				color: var(--color-gray-3);
+			}
+			.header .brand {
+				font-size: 32px;
+				min-width: 200px;
+				margin-bottom: var(--spacing-lg, 2rem);
+			}
+			.header .brand em {
+				text-transform: uppercase;
+				font-weight: bold;
+				font-style: normal;
+			}
+		`;
+  }
+  static get states() {
+    return {
+      DEFAULT: "DEFAULT",
+      FORGOT: "FORGOT",
+      CHALLENGE_CHANGE_PW: "CHALLENGE_CHANGE_PW"
+    };
   }
-
-  .input--standard.input--focused:not(.input--disabled) {
-    background-color: var(--sl-input-background-color-focus);
-    border-color: var(--sl-input-border-color-focus);
-    box-shadow: 0 0 0 var(--sl-focus-ring-width) var(--sl-input-focus-ring-color);
+  constructor() {
+    super(), this.formState = y.states.DEFAULT, this.username = "", this.password = "", this.token = void 0, this.errors = [];
+  }
+  onSubmit(e) {
+    e.preventDefault();
+    const t = e.explicitOriginalTarget.parentElement;
+    console.log(t);
+    const r = new FormData(t).entries().reduce((o, [i, n]) => (o[i] = n, o), {});
+    fe(this, r).then(({ token: o, challenge: i }) => {
+      if (i && i.name === "NEW_PASSWORD_REQUIRED") {
+        this.token = o, this.username = r.username, this.password = r.password, this.setState(y.states.CHALLENGE_CHANGE_PW);
+        return;
+      }
+      this.dispatchEvent(new CustomEvent("login-success", {
+        detail: { token: o }
+      }));
+    }).catch((o) => {
+      console.log(o), this.errors = [o.message], this.requestUpdate();
+    });
   }
-
-  .input--standard.input--focused:not(.input--disabled) .input__control {
-    color: var(--sl-input-color-focus);
+  onSubmitChangePasswordChallenge(e) {
+    e.preventDefault();
+    const t = e.explicitOriginalTarget, r = new FormData(t).entries().reduce((l, [a, u]) => (l[a] = u, l), {}), o = r.password, i = r["confirm-password"];
+    if (o !== i) {
+      this.errors = ["Passwords do not match."], this.requestUpdate();
+      return;
+    }
+    x({
+      baseUrl: this.api
+    }).updatePassword({
+      token: this.token,
+      currentPassword: this.password,
+      newPassword: o
+    }).then(() => {
+      this.dispatchEvent(new CustomEvent("login-success", {
+        detail: { token: this.token }
+      }));
+    }).catch((l) => {
+      console.log(l), this.errors = [l.message], this.requestUpdate();
+    });
   }
-
-  .input--standard.input--disabled {
-    background-color: var(--sl-input-background-color-disabled);
-    border-color: var(--sl-input-border-color-disabled);
-    opacity: 0.5;
-    cursor: not-allowed;
+  setState(e) {
+    e !== this.formState && (this.formState = e, this.errors = [], this.requestUpdate());
   }
-
-  .input--standard.input--disabled .input__control {
-    color: var(--sl-input-color-disabled);
+  render() {
+    return c`<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() : ""}
+		</div>`;
   }
-
-  .input--standard.input--disabled .input__control::placeholder {
-    color: var(--sl-input-placeholder-color-disabled);
+  /**
+   * 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>
+		</div>`;
   }
-
-  /* Filled inputs */
-  .input--filled {
-    border: none;
-    background-color: var(--sl-input-filled-background-color);
-    color: var(--sl-input-color);
+  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} />
+
+				</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>
+				<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) => c`<p class="error">${e}</p>`) : ""}
+				<input type="submit" value="Change Password" />
+			</form>
+		`;
   }
-
-  .input--filled:hover:not(.input--disabled) {
-    background-color: var(--sl-input-filled-background-color-hover);
+}
+customElements.define("auth-login-form", y);
+customElements.define("auth-forgot-password-form", Ve);
+function Ke() {
+  return function(s) {
+    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;
+			}
+		`;
+    return c`
+			<style>${e}</style>
+			<div class="login-layout">
+				${s.main}
+			</div>
+		`;
+  };
+}
+function Qe(s) {
+  return JSON.parse(window.atob(s.split(".")[1].replace(/-/g, "+").replace(/_/g, "/")));
+}
+function Je(s, e = 300, t = Date.now()) {
+  return Qe(s).exp * 1e3 - e < t;
+}
+function ge(s) {
+  return (s.startsWith("/") ? s : `/${s}`).replace(/\/{2,}/g, "/").replace(new RegExp("(?<=.)\\/$"), "");
+}
+function ye(s, e, t) {
+  const r = Ze(s, t);
+  e.pushState(t, t.title, r), s.requestRender(t);
+}
+function Ye(s, e) {
+  const { mount: t } = s.config, { history: r } = s.config.toolkit.element.ownerDocument.defaultView;
+  return e.startsWith(t) ? {
+    path: ge(e.slice(t.length)),
+    push: (o) => ye(s, r, o)
+  } : null;
+}
+function Ze(s, e) {
+  const { mount: t } = s.config;
+  return ge(`${t}/${e.path}`);
+}
+function Xe(s, 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 et(s, e) {
+  return c`
+		<auth-change-password-form .auth=${e}></auth-change-password-form>
+	`;
+}
+class tt 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 }
+    };
   }
-
-  .input--filled.input--focused:not(.input--disabled) {
-    background-color: var(--sl-input-filled-background-color-focus);
-    outline: var(--sl-focus-ring);
-    outline-offset: var(--sl-focus-ring-offset);
+  constructor() {
+    super(), this.errors = {}, this.success = null;
   }
-
-  .input--filled.input--disabled {
-    background-color: var(--sl-input-filled-background-color-disabled);
-    opacity: 0.5;
-    cursor: not-allowed;
+  connectedCallback() {
+    super.connectedCallback(), G(this);
   }
-
-  .input__control {
-    flex: 1 1 auto;
-    font-family: inherit;
-    font-size: inherit;
-    font-weight: inherit;
-    min-width: 0;
-    height: 100%;
-    color: var(--sl-input-color);
-    border: none;
-    background: inherit;
-    box-shadow: none;
-    padding: 0;
-    margin: 0;
-    cursor: inherit;
-    -webkit-appearance: none;
+  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 G(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((r) => {
+      this.errors.submit = r.message, this.requestUpdate();
+    });
   }
-
-  .input__control::-webkit-search-decoration,
-  .input__control::-webkit-search-cancel-button,
-  .input__control::-webkit-search-results-button,
-  .input__control::-webkit-search-results-decoration {
-    -webkit-appearance: none;
+  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>
+		`;
   }
+}
+customElements.get("auth-change-password-form") || customElements.define("auth-change-password-form", tt);
+const rt = [
+  { path: "/", render: Xe },
+  { path: "/change-password", render: et }
+];
+function st(s, e) {
+  const { path: t } = s, r = rt.find((o) => o.path === t);
+  if (r)
+    return r.render(s, e);
+}
+const ot = q`
+	:host {
 
-  .input__control:-webkit-autofill,
-  .input__control:-webkit-autofill:hover,
-  .input__control:-webkit-autofill:focus,
-  .input__control:-webkit-autofill:active {
-    box-shadow: 0 0 0 var(--sl-input-height-large) var(--sl-input-background-color-hover) inset !important;
-    -webkit-text-fill-color: var(--sl-color-primary-500);
-    caret-color: var(--sl-input-color);
+	}
+`;
+class it extends b {
+  static get styles() {
+    return [ot];
+  }
+  static get properties() {
+    return {
+      state: { type: Object },
+      auth: { type: Object }
+    };
   }
-
-  .input--filled .input__control:-webkit-autofill,
-  .input--filled .input__control:-webkit-autofill:hover,
-  .input--filled .input__control:-webkit-autofill:focus,
-  .input--filled .input__control:-webkit-autofill:active {
-    box-shadow: 0 0 0 var(--sl-input-height-large) var(--sl-input-filled-background-color) inset !important;
+  render() {
+    const { state: e, auth: t } = this;
+    return st(e, t);
   }
-
-  .input__control::placeholder {
-    color: var(--sl-input-placeholder-color);
-    user-select: none;
-    -webkit-user-select: none;
-  }
-
-  .input:hover:not(.input--disabled) .input__control {
-    color: var(--sl-input-color-hover);
-  }
-
-  .input__control:focus {
-    outline: none;
-  }
-
-  .input__prefix,
-  .input__suffix {
-    display: inline-flex;
-    flex: 0 0 auto;
-    align-items: center;
-    cursor: default;
-  }
-
-  .input__prefix ::slotted(sl-icon),
-  .input__suffix ::slotted(sl-icon) {
-    color: var(--sl-input-icon-color);
-  }
-
-  /*
-   * Size modifiers
-   */
-
-  .input--small {
-    border-radius: var(--sl-input-border-radius-small);
-    font-size: var(--sl-input-font-size-small);
-    height: var(--sl-input-height-small);
-  }
-
-  .input--small .input__control {
-    height: calc(var(--sl-input-height-small) - var(--sl-input-border-width) * 2);
-    padding: 0 var(--sl-input-spacing-small);
-  }
-
-  .input--small .input__clear,
-  .input--small .input__password-toggle {
-    width: calc(1em + var(--sl-input-spacing-small) * 2);
-  }
-
-  .input--small .input__prefix ::slotted(*) {
-    margin-inline-start: var(--sl-input-spacing-small);
-  }
-
-  .input--small .input__suffix ::slotted(*) {
-    margin-inline-end: var(--sl-input-spacing-small);
-  }
-
-  .input--medium {
-    border-radius: var(--sl-input-border-radius-medium);
-    font-size: var(--sl-input-font-size-medium);
-    height: var(--sl-input-height-medium);
-  }
-
-  .input--medium .input__control {
-    height: calc(var(--sl-input-height-medium) - var(--sl-input-border-width) * 2);
-    padding: 0 var(--sl-input-spacing-medium);
-  }
-
-  .input--medium .input__clear,
-  .input--medium .input__password-toggle {
-    width: calc(1em + var(--sl-input-spacing-medium) * 2);
-  }
-
-  .input--medium .input__prefix ::slotted(*) {
-    margin-inline-start: var(--sl-input-spacing-medium);
-  }
-
-  .input--medium .input__suffix ::slotted(*) {
-    margin-inline-end: var(--sl-input-spacing-medium);
-  }
-
-  .input--large {
-    border-radius: var(--sl-input-border-radius-large);
-    font-size: var(--sl-input-font-size-large);
-    height: var(--sl-input-height-large);
-  }
-
-  .input--large .input__control {
-    height: calc(var(--sl-input-height-large) - var(--sl-input-border-width) * 2);
-    padding: 0 var(--sl-input-spacing-large);
-  }
-
-  .input--large .input__clear,
-  .input--large .input__password-toggle {
-    width: calc(1em + var(--sl-input-spacing-large) * 2);
-  }
-
-  .input--large .input__prefix ::slotted(*) {
-    margin-inline-start: var(--sl-input-spacing-large);
-  }
-
-  .input--large .input__suffix ::slotted(*) {
-    margin-inline-end: var(--sl-input-spacing-large);
-  }
-
-  /*
-   * Pill modifier
-   */
-
-  .input--pill.input--small {
-    border-radius: var(--sl-input-height-small);
-  }
-
-  .input--pill.input--medium {
-    border-radius: var(--sl-input-height-medium);
-  }
-
-  .input--pill.input--large {
-    border-radius: var(--sl-input-height-large);
-  }
-
-  /*
-   * Clearable + Password Toggle
-   */
-
-  .input__clear,
-  .input__password-toggle {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    font-size: inherit;
-    color: var(--sl-input-icon-color);
-    border: none;
-    background: none;
-    padding: 0;
-    transition: var(--sl-transition-fast) color;
-    cursor: pointer;
-  }
-
-  .input__clear:hover,
-  .input__password-toggle:hover {
-    color: var(--sl-input-icon-color-hover);
-  }
-
-  .input__clear:focus,
-  .input__password-toggle:focus {
-    outline: none;
-  }
-
-  /* Don't show the browser's password toggle in Edge */
-  ::-ms-reveal {
-    display: none;
-  }
-
-  /* Hide the built-in number spinner */
-  .input--no-spin-buttons input[type='number']::-webkit-outer-spin-button,
-  .input--no-spin-buttons input[type='number']::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    display: none;
-  }
-
-  .input--no-spin-buttons input[type='number'] {
-    -moz-appearance: textfield;
-  }
-`, Qe = (o = "value") => (t, e) => {
-  const r = t.constructor, s = r.prototype.attributeChangedCallback;
-  r.prototype.attributeChangedCallback = function(i, n, d) {
-    var l;
-    const c = r.getPropertyOptions(o), b = typeof c.attribute == "string" ? c.attribute : o;
-    if (i === b) {
-      const p = c.converter || R, y = (typeof p == "function" ? p : (l = p == null ? void 0 : p.fromAttribute) != null ? l : R.fromAttribute)(d, c.type);
-      this[o] !== y && (this[e] = y);
-    }
-    s.call(this, i, n, d);
+}
+customElements.get("auth-app") || customElements.define("auth-app", it);
+function nt(s) {
+  const e = {
+    config: s,
+    log: (...t) => console.log("[auth]", ...t)
   };
-}, Xe = $`
-  .form-control .form-control__label {
-    display: none;
-  }
-
-  .form-control .form-control__help-text {
-    display: none;
-  }
-
-  /* Label */
-  .form-control--has-label .form-control__label {
-    display: inline-block;
-    color: var(--sl-input-label-color);
-    margin-bottom: var(--sl-spacing-3x-small);
-  }
-
-  .form-control--has-label.form-control--small .form-control__label {
-    font-size: var(--sl-input-label-font-size-small);
-  }
-
-  .form-control--has-label.form-control--medium .form-control__label {
-    font-size: var(--sl-input-label-font-size-medium);
-  }
-
-  .form-control--has-label.form-control--large .form-control__label {
-    font-size: var(--sl-input-label-font-size-large);
-  }
-
-  :host([required]) .form-control--has-label .form-control__label::after {
-    content: var(--sl-input-required-content);
-    margin-inline-start: var(--sl-input-required-content-offset);
-    color: var(--sl-input-required-content-color);
-  }
-
-  /* Help text */
-  .form-control--has-help-text .form-control__help-text {
-    display: block;
-    color: var(--sl-input-help-text-color);
-    margin-top: var(--sl-spacing-3x-small);
-  }
-
-  .form-control--has-help-text.form-control--small .form-control__help-text {
-    font-size: var(--sl-input-help-text-font-size-small);
-  }
-
-  .form-control--has-help-text.form-control--medium .form-control__help-text {
-    font-size: var(--sl-input-help-text-font-size-medium);
-  }
-
-  .form-control--has-help-text.form-control--large .form-control__help-text {
-    font-size: var(--sl-input-help-text-font-size-large);
-  }
-
-  .form-control--has-help-text.form-control--radio-group .form-control__help-text {
-    margin-top: var(--sl-spacing-2x-small);
-  }
-`, D = /* @__PURE__ */ new WeakMap(), F = /* @__PURE__ */ new WeakMap(), H = /* @__PURE__ */ new WeakMap(), ht = /* @__PURE__ */ new WeakSet(), et = /* @__PURE__ */ new WeakMap(), ae = class {
-  constructor(o, t) {
-    this.handleFormData = (e) => {
-      const r = this.options.disabled(this.host), s = this.options.name(this.host), i = this.options.value(this.host), n = this.host.tagName.toLowerCase() === "sl-button";
-      this.host.isConnected && !r && !n && typeof s == "string" && s.length > 0 && typeof i < "u" && (Array.isArray(i) ? i.forEach((d) => {
-        e.formData.append(s, d.toString());
-      }) : e.formData.append(s, i.toString()));
-    }, this.handleFormSubmit = (e) => {
-      var r;
-      const s = this.options.disabled(this.host), i = this.options.reportValidity;
-      this.form && !this.form.noValidate && ((r = D.get(this.form)) == null || r.forEach((n) => {
-        this.setUserInteracted(n, !0);
-      })), this.form && !this.form.noValidate && !s && !i(this.host) && (e.preventDefault(), e.stopImmediatePropagation());
-    }, this.handleFormReset = () => {
-      this.options.setValue(this.host, this.options.defaultValue(this.host)), this.setUserInteracted(this.host, !1), et.set(this.host, []);
-    }, this.handleInteraction = (e) => {
-      const r = et.get(this.host);
-      r.includes(e.type) || r.push(e.type), r.length === this.options.assumeInteractionOn.length && this.setUserInteracted(this.host, !0);
-    }, this.checkFormValidity = () => {
-      if (this.form && !this.form.noValidate) {
-        const e = this.form.querySelectorAll("*");
-        for (const r of e)
-          if (typeof r.checkValidity == "function" && !r.checkValidity())
-            return !1;
+  return e.mount = k(at, e), e.handleTokenRequest = ct(e), e.handleDestroyAuth = dt(e), e.presentLoginForm = k(ht, e), e.getToken = k($e, e), e.saveToken = k(ut, e), e.getFreshToken = k(pt, e), e.requestRender = (t) => we(e, t), e;
+}
+function at(s) {
+  const e = s.config.toolkit.element.ownerDocument.defaultView;
+  [
+    {
+      type: "action:register",
+      detail: {
+        actionType: "auth:requestToken",
+        handler: s.handleTokenRequest,
+        modName: "auth"
       }
-      return !0;
-    }, this.reportFormValidity = () => {
-      if (this.form && !this.form.noValidate) {
-        const e = this.form.querySelectorAll("*");
-        for (const r of e)
-          if (typeof r.reportValidity == "function" && !r.reportValidity())
-            return !1;
+    },
+    {
+      type: "action:register",
+      detail: {
+        actionType: "auth:destroy",
+        handler: s.handleDestroyAuth,
+        modName: "auth"
+      }
+    },
+    {
+      type: "layout:register",
+      detail: {
+        name: "auth:login",
+        slots: ["main"],
+        templateFn: Ke()
       }
-      return !0;
-    }, (this.host = o).addController(this), this.options = X({
-      form: (e) => {
-        const r = e.form;
-        if (r) {
-          const i = e.getRootNode().querySelector(`#${r}`);
-          if (i)
-            return i;
-        }
-        return e.closest("form");
-      },
-      name: (e) => e.name,
-      value: (e) => e.value,
-      defaultValue: (e) => e.defaultValue,
-      disabled: (e) => {
-        var r;
-        return (r = e.disabled) != null ? r : !1;
-      },
-      reportValidity: (e) => typeof e.reportValidity == "function" ? e.reportValidity() : !0,
-      checkValidity: (e) => typeof e.checkValidity == "function" ? e.checkValidity() : !0,
-      setValue: (e, r) => e.value = r,
-      assumeInteractionOn: ["sl-input"]
-    }, t);
-  }
-  hostConnected() {
-    const o = this.options.form(this.host);
-    o && this.attachForm(o), et.set(this.host, []), this.options.assumeInteractionOn.forEach((t) => {
-      this.host.addEventListener(t, this.handleInteraction);
-    });
-  }
-  hostDisconnected() {
-    this.detachForm(), et.delete(this.host), this.options.assumeInteractionOn.forEach((o) => {
-      this.host.removeEventListener(o, this.handleInteraction);
-    });
-  }
-  hostUpdated() {
-    const o = this.options.form(this.host);
-    o || this.detachForm(), o && this.form !== o && (this.detachForm(), this.attachForm(o)), this.host.hasUpdated && this.setValidity(this.host.validity.valid);
-  }
-  attachForm(o) {
-    o ? (this.form = o, D.has(this.form) ? D.get(this.form).add(this.host) : D.set(this.form, /* @__PURE__ */ new Set([this.host])), this.form.addEventListener("formdata", this.handleFormData), this.form.addEventListener("submit", this.handleFormSubmit), this.form.addEventListener("reset", this.handleFormReset), F.has(this.form) || (F.set(this.form, this.form.reportValidity), this.form.reportValidity = () => this.reportFormValidity()), H.has(this.form) || (H.set(this.form, this.form.checkValidity), this.form.checkValidity = () => this.checkFormValidity())) : this.form = void 0;
-  }
-  detachForm() {
-    if (!this.form)
-      return;
-    const o = D.get(this.form);
-    o && (o.delete(this.host), o.size <= 0 && (this.form.removeEventListener("formdata", this.handleFormData), this.form.removeEventListener("submit", this.handleFormSubmit), this.form.removeEventListener("reset", this.handleFormReset), F.has(this.form) && (this.form.reportValidity = F.get(this.form), F.delete(this.form)), H.has(this.form) && (this.form.checkValidity = H.get(this.form), H.delete(this.form)), this.form = void 0));
-  }
-  setUserInteracted(o, t) {
-    t ? ht.add(o) : ht.delete(o), o.requestUpdate();
-  }
-  doAction(o, t) {
-    if (this.form) {
-      const e = document.createElement("button");
-      e.type = o, e.style.position = "absolute", e.style.width = "0", e.style.height = "0", e.style.clipPath = "inset(50%)", e.style.overflow = "hidden", e.style.whiteSpace = "nowrap", t && (e.name = t.name, e.value = t.value, ["formaction", "formenctype", "formmethod", "formnovalidate", "formtarget"].forEach((r) => {
-        t.hasAttribute(r) && e.setAttribute(r, t.getAttribute(r));
-      })), this.form.append(e), e.click(), e.remove();
     }
-  }
-  /** Returns the associated `<form>` element, if one exists. */
-  getForm() {
-    var o;
-    return (o = this.form) != null ? o : null;
-  }
-  /** Resets the form, restoring all the control to their default value */
-  reset(o) {
-    this.doAction("reset", o);
-  }
-  /** Submits the form, triggering validation and form data injection. */
-  submit(o) {
-    this.doAction("submit", o);
-  }
-  /**
-   * Synchronously sets the form control's validity. Call this when you know the future validity but need to update
-   * the host element immediately, i.e. before Lit updates the component in the next update.
-   */
-  setValidity(o) {
-    const t = this.host, e = !!ht.has(t), r = !!t.required;
-    t.toggleAttribute("data-required", r), t.toggleAttribute("data-optional", !r), t.toggleAttribute("data-invalid", !o), t.toggleAttribute("data-valid", o), t.toggleAttribute("data-user-invalid", !o && e), t.toggleAttribute("data-user-valid", o && e);
-  }
-  /**
-   * Updates the form control's validity based on the current value of `host.validity.valid`. Call this when anything
-   * that affects constraint validation changes so the component receives the correct validity states.
-   */
-  updateValidity() {
-    const o = this.host;
-    this.setValidity(o.validity.valid);
-  }
-  /**
-   * Dispatches a non-bubbling, cancelable custom event of type `sl-invalid`.
-   * If the `sl-invalid` event will be cancelled then the original `invalid`
-   * event (which may have been passed as argument) will also be cancelled.
-   * If no original `invalid` event has been passed then the `sl-invalid`
-   * event will be cancelled before being dispatched.
-   */
-  emitInvalidEvent(o) {
-    const t = new CustomEvent("sl-invalid", {
-      bubbles: !1,
-      composed: !1,
-      cancelable: !0,
-      detail: {}
-    });
-    o || t.preventDefault(), this.host.dispatchEvent(t) || o == null || o.preventDefault();
-  }
-}, Et = Object.freeze({
-  badInput: !1,
-  customError: !1,
-  patternMismatch: !1,
-  rangeOverflow: !1,
-  rangeUnderflow: !1,
-  stepMismatch: !1,
-  tooLong: !1,
-  tooShort: !1,
-  typeMismatch: !1,
-  valid: !0,
-  valueMissing: !1
-});
-Object.freeze(oe(X({}, Et), {
-  valid: !1,
-  valueMissing: !0
-}));
-Object.freeze(oe(X({}, Et), {
-  valid: !1,
-  customError: !0
-}));
-const gt = /* @__PURE__ */ new Set(), V = /* @__PURE__ */ new Map();
-let z, Pt = "ltr", Tt = "en";
-const le = typeof MutationObserver < "u" && typeof document < "u" && typeof document.documentElement < "u";
-if (le) {
-  const o = new MutationObserver(de);
-  Pt = document.documentElement.dir || "ltr", Tt = document.documentElement.lang || navigator.language, o.observe(document.documentElement, {
-    attributes: !0,
-    attributeFilter: ["dir", "lang"]
-  });
-}
-function ue(...o) {
-  o.map((t) => {
-    const e = t.$code.toLowerCase();
-    V.has(e) ? V.set(e, Object.assign(Object.assign({}, V.get(e)), t)) : V.set(e, t), z || (z = t);
-  }), de();
-}
-function de() {
-  le && (Pt = document.documentElement.dir || "ltr", Tt = document.documentElement.lang || navigator.language), [...gt.keys()].map((o) => {
-    typeof o.requestUpdate == "function" && o.requestUpdate();
-  });
-}
-let to = class {
-  constructor(t) {
-    this.host = t, this.host.addController(this);
-  }
-  hostConnected() {
-    gt.add(this.host);
-  }
-  hostDisconnected() {
-    gt.delete(this.host);
-  }
-  dir() {
-    return `${this.host.dir || Pt}`.toLowerCase();
-  }
-  lang() {
-    return `${this.host.lang || Tt}`.toLowerCase();
-  }
-  getTranslationData(t) {
-    var e, r;
-    const s = new Intl.Locale(t.replace(/_/g, "-")), i = s == null ? void 0 : s.language.toLowerCase(), n = (r = (e = s == null ? void 0 : s.region) === null || e === void 0 ? void 0 : e.toLowerCase()) !== null && r !== void 0 ? r : "", d = V.get(`${i}-${n}`), l = V.get(i);
-    return { locale: s, language: i, region: n, primary: d, secondary: l };
-  }
-  exists(t, e) {
-    var r;
-    const { primary: s, secondary: i } = this.getTranslationData((r = e.lang) !== null && r !== void 0 ? r : this.lang());
-    return e = Object.assign({ includeFallback: !1 }, e), !!(s && s[t] || i && i[t] || e.includeFallback && z && z[t]);
-  }
-  term(t, ...e) {
-    const { primary: r, secondary: s } = this.getTranslationData(this.lang());
-    let i;
-    if (r && r[t])
-      i = r[t];
-    else if (s && s[t])
-      i = s[t];
-    else if (z && z[t])
-      i = z[t];
-    else
-      return console.error(`No translation found for: ${String(t)}`), String(t);
-    return typeof i == "function" ? i(...e) : i;
-  }
-  date(t, e) {
-    return t = new Date(t), new Intl.DateTimeFormat(this.lang(), e).format(t);
-  }
-  number(t, e) {
-    return t = Number(t), isNaN(t) ? "" : new Intl.NumberFormat(this.lang(), e).format(t);
-  }
-  relativeTime(t, e, r) {
-    return new Intl.RelativeTimeFormat(this.lang(), r).format(t, e);
-  }
-};
-var ce = {
-  $code: "en",
-  $name: "English",
-  $dir: "ltr",
-  carousel: "Carousel",
-  clearEntry: "Clear entry",
-  close: "Close",
-  copied: "Copied",
-  copy: "Copy",
-  currentValue: "Current value",
-  error: "Error",
-  goToSlide: (o, t) => `Go to slide ${o} of ${t}`,
-  hidePassword: "Hide password",
-  loading: "Loading",
-  nextSlide: "Next slide",
-  numOptionsSelected: (o) => o === 0 ? "No options selected" : o === 1 ? "1 option selected" : `${o} options selected`,
-  previousSlide: "Previous slide",
-  progress: "Progress",
-  remove: "Remove",
-  resize: "Resize",
-  scrollToEnd: "Scroll to end",
-  scrollToStart: "Scroll to start",
-  selectAColorFromTheScreen: "Select a color from the screen",
-  showPassword: "Show password",
-  slideNum: (o) => `Slide ${o}`,
-  toggleColorFormat: "Toggle color format"
-};
-ue(ce);
-var eo = ce, zt = class extends to {
-};
-ue(eo);
-var vt = "";
-function jt(o) {
-  vt = o;
+  ].forEach((t) => s.config.toolkit.dispatchAction(t)), e.addEventListener("popstate", lt(s));
 }
-function oo(o = "") {
-  if (!vt) {
-    const t = [...document.getElementsByTagName("script")], e = t.find((r) => r.hasAttribute("data-shoelace"));
-    if (e)
-      jt(e.getAttribute("data-shoelace"));
-    else {
-      const r = t.find((i) => /shoelace(\.min)?\.js($|\?)/.test(i.src) || /shoelace-autoloader(\.min)?\.js($|\?)/.test(i.src));
-      let s = "";
-      r && (s = r.getAttribute("src")), jt(s.split("/").slice(0, -1).join("/"));
+function we(s, e) {
+  const t = s.config.toolkit.element.ownerDocument.defaultView;
+  let r = e;
+  r || (r = Ye(s, t.location.pathname)), r && s.config.toolkit.dispatchAction({
+    type: "layout:slot:replace",
+    detail: {
+      layout: "menu-main-task-layout",
+      slot: "main",
+      content: c`<auth-app .state=${r} .auth=${s}></auth-app>`
     }
-  }
-  return vt.replace(/\/$/, "") + (o ? `/${o.replace(/^\//, "")}` : "");
-}
-var ro = {
-  name: "default",
-  resolver: (o) => oo(`assets/icons/${o}.svg`)
-}, so = ro, qt = {
-  caret: `
-    <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-      <polyline points="6 9 12 15 18 9"></polyline>
-    </svg>
-  `,
-  check: `
-    <svg part="checked-icon" class="checkbox__icon" viewBox="0 0 16 16">
-      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
-        <g stroke="currentColor">
-          <g transform="translate(3.428571, 3.428571)">
-            <path d="M0,5.71428571 L3.42857143,9.14285714"></path>
-            <path d="M9.14285714,0 L3.42857143,9.14285714"></path>
-          </g>
-        </g>
-      </g>
-    </svg>
-  `,
-  "chevron-down": `
-    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-down" viewBox="0 0 16 16">
-      <path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/>
-    </svg>
-  `,
-  "chevron-left": `
-    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-left" viewBox="0 0 16 16">
-      <path fill-rule="evenodd" d="M11.354 1.646a.5.5 0 0 1 0 .708L5.707 8l5.647 5.646a.5.5 0 0 1-.708.708l-6-6a.5.5 0 0 1 0-.708l6-6a.5.5 0 0 1 .708 0z"/>
-    </svg>
-  `,
-  "chevron-right": `
-    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
-      <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z"/>
-    </svg>
-  `,
-  copy: `
-    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-copy" viewBox="0 0 16 16">
-      <path fill-rule="evenodd" d="M4 2a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V2Zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H6ZM2 5a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8a1 1 0 0 0 1-1v-1h1v1a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h1v1H2Z"/>
-    </svg>
-  `,
-  eye: `
-    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye" viewBox="0 0 16 16">
-      <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/>
-      <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/>
-    </svg>
-  `,
-  "eye-slash": `
-    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eye-slash" viewBox="0 0 16 16">
-      <path d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7.028 7.028 0 0 0-2.79.588l.77.771A5.944 5.944 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.134 13.134 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755-.165.165-.337.328-.517.486l.708.709z"/>
-      <path d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829l.822.822zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829z"/>
-      <path d="M3.35 5.47c-.18.16-.353.322-.518.487A13.134 13.134 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7.029 7.029 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12-.708.708z"/>
-    </svg>
-  `,
-  eyedropper: `
-    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-eyedropper" viewBox="0 0 16 16">
-      <path d="M13.354.646a1.207 1.207 0 0 0-1.708 0L8.5 3.793l-.646-.647a.5.5 0 1 0-.708.708L8.293 5l-7.147 7.146A.5.5 0 0 0 1 12.5v1.793l-.854.853a.5.5 0 1 0 .708.707L1.707 15H3.5a.5.5 0 0 0 .354-.146L11 7.707l1.146 1.147a.5.5 0 0 0 .708-.708l-.647-.646 3.147-3.146a1.207 1.207 0 0 0 0-1.708l-2-2zM2 12.707l7-7L10.293 7l-7 7H2v-1.293z"></path>
-    </svg>
-  `,
-  "grip-vertical": `
-    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-grip-vertical" viewBox="0 0 16 16">
-      <path d="M7 2a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zM7 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zM7 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm-3 3a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm-3 3a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm3 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"></path>
-    </svg>
-  `,
-  indeterminate: `
-    <svg part="indeterminate-icon" class="checkbox__icon" viewBox="0 0 16 16">
-      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linecap="round">
-        <g stroke="currentColor" stroke-width="2">
-          <g transform="translate(2.285714, 6.857143)">
-            <path d="M10.2857143,1.14285714 L1.14285714,1.14285714"></path>
-          </g>
-        </g>
-      </g>
-    </svg>
-  `,
-  "person-fill": `
-    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-person-fill" viewBox="0 0 16 16">
-      <path d="M3 14s-1 0-1-1 1-4 6-4 6 3 6 4-1 1-1 1H3zm5-6a3 3 0 1 0 0-6 3 3 0 0 0 0 6z"/>
-    </svg>
-  `,
-  "play-fill": `
-    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-play-fill" viewBox="0 0 16 16">
-      <path d="m11.596 8.697-6.363 3.692c-.54.313-1.233-.066-1.233-.697V4.308c0-.63.692-1.01 1.233-.696l6.363 3.692a.802.802 0 0 1 0 1.393z"></path>
-    </svg>
-  `,
-  "pause-fill": `
-    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pause-fill" viewBox="0 0 16 16">
-      <path d="M5.5 3.5A1.5 1.5 0 0 1 7 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5zm5 0A1.5 1.5 0 0 1 12 5v6a1.5 1.5 0 0 1-3 0V5a1.5 1.5 0 0 1 1.5-1.5z"></path>
-    </svg>
-  `,
-  radio: `
-    <svg part="checked-icon" class="radio__icon" viewBox="0 0 16 16">
-      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g fill="currentColor">
-          <circle cx="8" cy="8" r="3.42857143"></circle>
-        </g>
-      </g>
-    </svg>
-  `,
-  "star-fill": `
-    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star-fill" viewBox="0 0 16 16">
-      <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
-    </svg>
-  `,
-  "x-lg": `
-    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg" viewBox="0 0 16 16">
-      <path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z"/>
-    </svg>
-  `,
-  "x-circle-fill": `
-    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-circle-fill" viewBox="0 0 16 16">
-      <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zM5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293 5.354 4.646z"></path>
-    </svg>
-  `
-}, io = {
-  name: "system",
-  resolver: (o) => o in qt ? `data:image/svg+xml,${encodeURIComponent(qt[o])}` : ""
-}, no = io, ao = [so, no], yt = [];
-function lo(o) {
-  yt.push(o);
-}
-function uo(o) {
-  yt = yt.filter((t) => t !== o);
-}
-function Wt(o) {
-  return ao.find((t) => t.name === o);
+  });
 }
-var co = $`
-  :host {
-    display: inline-block;
-    width: 1em;
-    height: 1em;
-    box-sizing: content-box !important;
-  }
-
-  svg {
-    display: block;
-    height: 100%;
-    width: 100%;
-  }
-`;
-function M(o, t) {
-  const e = X({
-    waitUntilFirstUpdate: !1
-  }, t);
-  return (r, s) => {
-    const { update: i } = r, n = Array.isArray(o) ? o : [o];
-    r.update = function(d) {
-      n.forEach((l) => {
-        const c = l;
-        if (d.has(c)) {
-          const b = d.get(c), p = this[c];
-          b !== p && (!e.waitUntilFirstUpdate || this.hasUpdated) && this[s](b, p);
-        }
-      }), i.call(this, d);
-    };
+function lt(s) {
+  return (e) => {
+    s.log("onpopstate", e), we(s);
   };
 }
-/**
- * @license
- * Copyright 2020 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const ho = (o, t) => (o == null ? void 0 : o._$litType$) !== void 0, po = (o) => o.strings === void 0, bo = {}, fo = (o, t = bo) => o._$AH = t;
-var j = Symbol(), ot = Symbol(), pt, bt = /* @__PURE__ */ new Map(), x = class extends k {
-  constructor() {
-    super(...arguments), this.initialRender = !1, this.svg = null, this.label = "", this.library = "default";
-  }
-  /** Given a URL, this function returns the resulting SVG element or an appropriate error symbol. */
-  async resolveIcon(o, t) {
-    var e;
-    let r;
-    if (t != null && t.spriteSheet) {
-      this.svg = v`<svg part="svg">
-        <use part="use" href="${o}"></use>
-      </svg>`, await this.updateComplete;
-      const s = this.shadowRoot.querySelector("[part='svg']");
-      return typeof t.mutator == "function" && t.mutator(s), this.svg;
-    }
-    try {
-      if (r = await fetch(o, { mode: "cors" }), !r.ok)
-        return r.status === 410 ? j : ot;
-    } catch {
-      return ot;
-    }
+function ct(s) {
+  let e = [], t = !1;
+  const r = (o) => {
+    e.forEach((i) => {
+      i(o);
+    }), e = [];
+  };
+  return async ({ callback: o }) => {
+    let i;
     try {
-      const s = document.createElement("div");
-      s.innerHTML = await r.text();
-      const i = s.firstElementChild;
-      if (((e = i == null ? void 0 : i.tagName) == null ? void 0 : e.toLowerCase()) !== "svg")
-        return j;
-      pt || (pt = new DOMParser());
-      const d = pt.parseFromString(i.outerHTML, "text/html").body.querySelector("svg");
-      return d ? (d.part.add("svg"), document.adoptNode(d)) : j;
-    } catch {
-      return j;
-    }
-  }
-  connectedCallback() {
-    super.connectedCallback(), lo(this);
-  }
-  firstUpdated() {
-    this.initialRender = !0, this.setIcon();
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), uo(this);
-  }
-  getIconSource() {
-    const o = Wt(this.library);
-    return this.name && o ? {
-      url: o.resolver(this.name),
-      fromLibrary: !0
-    } : {
-      url: this.src,
-      fromLibrary: !1
-    };
-  }
-  handleLabelChange() {
-    typeof this.label == "string" && this.label.length > 0 ? (this.setAttribute("role", "img"), this.setAttribute("aria-label", this.label), this.removeAttribute("aria-hidden")) : (this.removeAttribute("role"), this.removeAttribute("aria-label"), this.setAttribute("aria-hidden", "true"));
-  }
-  async setIcon() {
-    var o;
-    const { url: t, fromLibrary: e } = this.getIconSource(), r = e ? Wt(this.library) : void 0;
-    if (!t) {
-      this.svg = null;
-      return;
-    }
-    let s = bt.get(t);
-    if (s || (s = this.resolveIcon(t, r), bt.set(t, s)), !this.initialRender)
-      return;
-    const i = await s;
-    if (i === ot && bt.delete(t), t === this.getIconSource().url) {
-      if (ho(i)) {
-        this.svg = i;
-        return;
-      }
-      switch (i) {
-        case ot:
-        case j:
-          this.svg = null, this.emit("sl-error");
-          break;
-        default:
-          this.svg = i.cloneNode(!0), (o = r == null ? void 0 : r.mutator) == null || o.call(r, this.svg), this.emit("sl-load");
-      }
+      i = await s.getFreshToken(), o(i);
+    } catch (n) {
+      e.push(o), t || (s.presentLoginForm({ onLogin: r }), t = !0), s.log(n);
     }
-  }
-  render() {
-    return this.svg;
-  }
-};
-x.styles = [Q, co];
-a([
-  at()
-], x.prototype, "svg", 2);
-a([
-  u({ reflect: !0 })
-], x.prototype, "name", 2);
-a([
-  u()
-], x.prototype, "src", 2);
-a([
-  u()
-], x.prototype, "label", 2);
-a([
-  u({ reflect: !0 })
-], x.prototype, "library", 2);
-a([
-  M("label")
-], x.prototype, "handleLabelChange", 1);
-a([
-  M(["name", "src", "library"])
-], x.prototype, "setIcon", 1);
-/**
- * @license
- * Copyright 2018 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const m = (o) => o ?? g;
-/**
- * @license
- * Copyright 2020 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const mo = se(class extends ie {
-  constructor(o) {
-    if (super(o), o.type !== T.PROPERTY && o.type !== T.ATTRIBUTE && o.type !== T.BOOLEAN_ATTRIBUTE) throw Error("The `live` directive is not allowed on child or event bindings");
-    if (!po(o)) throw Error("`live` bindings can only contain a single expression");
-  }
-  render(o) {
-    return o;
-  }
-  update(o, [t]) {
-    if (t === w || t === g) return t;
-    const e = o.element, r = o.name;
-    if (o.type === T.PROPERTY) {
-      if (t === e[r]) return w;
-    } else if (o.type === T.BOOLEAN_ATTRIBUTE) {
-      if (!!t === e.hasAttribute(r)) return w;
-    } else if (o.type === T.ATTRIBUTE && e.getAttribute(r) === t + "") return w;
-    return fo(o), t;
-  }
-});
-var h = class extends k {
-  constructor() {
-    super(...arguments), this.formControlController = new ae(this, {
-      assumeInteractionOn: ["sl-blur", "sl-input"]
-    }), this.hasSlotController = new St(this, "help-text", "label"), this.localize = new zt(this), this.hasFocus = !1, this.title = "", this.__numberInput = Object.assign(document.createElement("input"), { type: "number" }), this.__dateInput = Object.assign(document.createElement("input"), { type: "date" }), this.type = "text", this.name = "", this.value = "", this.defaultValue = "", this.size = "medium", this.filled = !1, this.pill = !1, this.label = "", this.helpText = "", this.clearable = !1, this.disabled = !1, this.placeholder = "", this.readonly = !1, this.passwordToggle = !1, this.passwordVisible = !1, this.noSpinButtons = !1, this.form = "", this.required = !1, this.spellcheck = !0;
-  }
-  //
-  // NOTE: We use an in-memory input for these getters/setters instead of the one in the template because the properties
-  // can be set before the component is rendered.
-  //
-  /**
-   * Gets or sets the current value as a `Date` object. Returns `null` if the value can't be converted. This will use the native `<input type="{{type}}">` implementation and may result in an error.
-   */
-  get valueAsDate() {
-    var o;
-    return this.__dateInput.type = this.type, this.__dateInput.value = this.value, ((o = this.input) == null ? void 0 : o.valueAsDate) || this.__dateInput.valueAsDate;
-  }
-  set valueAsDate(o) {
-    this.__dateInput.type = this.type, this.__dateInput.valueAsDate = o, this.value = this.__dateInput.value;
-  }
-  /** Gets or sets the current value as a number. Returns `NaN` if the value can't be converted. */
-  get valueAsNumber() {
-    var o;
-    return this.__numberInput.value = this.value, ((o = this.input) == null ? void 0 : o.valueAsNumber) || this.__numberInput.valueAsNumber;
-  }
-  set valueAsNumber(o) {
-    this.__numberInput.valueAsNumber = o, this.value = this.__numberInput.value;
-  }
-  /** Gets the validity state object */
-  get validity() {
-    return this.input.validity;
-  }
-  /** Gets the validation message */
-  get validationMessage() {
-    return this.input.validationMessage;
-  }
-  firstUpdated() {
-    this.formControlController.updateValidity();
-  }
-  handleBlur() {
-    this.hasFocus = !1, this.emit("sl-blur");
-  }
-  handleChange() {
-    this.value = this.input.value, this.emit("sl-change");
-  }
-  handleClearClick(o) {
-    o.preventDefault(), this.value !== "" && (this.value = "", this.emit("sl-clear"), this.emit("sl-input"), this.emit("sl-change")), this.input.focus();
-  }
-  handleFocus() {
-    this.hasFocus = !0, this.emit("sl-focus");
-  }
-  handleInput() {
-    this.value = this.input.value, this.formControlController.updateValidity(), this.emit("sl-input");
-  }
-  handleInvalid(o) {
-    this.formControlController.setValidity(!1), this.formControlController.emitInvalidEvent(o);
-  }
-  handleKeyDown(o) {
-    const t = o.metaKey || o.ctrlKey || o.shiftKey || o.altKey;
-    o.key === "Enter" && !t && setTimeout(() => {
-      !o.defaultPrevented && !o.isComposing && this.formControlController.submit();
+  };
+}
+function dt(s) {
+  return () => {
+    const e = Y(s);
+    window.localStorage.removeItem(e), s.config.toolkit.dispatchAction({
+      type: "layout:pop"
     });
-  }
-  handlePasswordToggle() {
-    this.passwordVisible = !this.passwordVisible;
-  }
-  handleDisabledChange() {
-    this.formControlController.setValidity(this.disabled);
-  }
-  handleStepChange() {
-    this.input.step = String(this.step), this.formControlController.updateValidity();
-  }
-  async handleValueChange() {
-    await this.updateComplete, this.formControlController.updateValidity();
-  }
-  /** Sets focus on the input. */
-  focus(o) {
-    this.input.focus(o);
-  }
-  /** Removes focus from the input. */
-  blur() {
-    this.input.blur();
-  }
-  /** Selects all the text in the input. */
-  select() {
-    this.input.select();
-  }
-  /** Sets the start and end positions of the text selection (0-based). */
-  setSelectionRange(o, t, e = "none") {
-    this.input.setSelectionRange(o, t, e);
-  }
-  /** Replaces a range of text with a new string. */
-  setRangeText(o, t, e, r = "preserve") {
-    const s = t ?? this.input.selectionStart, i = e ?? this.input.selectionEnd;
-    this.input.setRangeText(o, s, i, r), this.value !== this.input.value && (this.value = this.input.value);
-  }
-  /** Displays the browser picker for an input element (only works if the browser supports it for the input type). */
-  showPicker() {
-    "showPicker" in HTMLInputElement.prototype && this.input.showPicker();
-  }
-  /** Increments the value of a numeric input type by the value of the step attribute. */
-  stepUp() {
-    this.input.stepUp(), this.value !== this.input.value && (this.value = this.input.value);
-  }
-  /** Decrements the value of a numeric input type by the value of the step attribute. */
-  stepDown() {
-    this.input.stepDown(), this.value !== this.input.value && (this.value = this.input.value);
-  }
-  /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
-  checkValidity() {
-    return this.input.checkValidity();
-  }
-  /** Gets the associated form, if one exists. */
-  getForm() {
-    return this.formControlController.getForm();
-  }
-  /** Checks for validity and shows the browser's validation message if the control is invalid. */
-  reportValidity() {
-    return this.input.reportValidity();
-  }
-  /** Sets a custom validation message. Pass an empty string to restore validity. */
-  setCustomValidity(o) {
-    this.input.setCustomValidity(o), this.formControlController.updateValidity();
-  }
-  render() {
-    const o = this.hasSlotController.test("label"), t = this.hasSlotController.test("help-text"), e = this.label ? !0 : !!o, r = this.helpText ? !0 : !!t, i = this.clearable && !this.disabled && !this.readonly && (typeof this.value == "number" || this.value.length > 0);
-    return v`
-      <div
-        part="form-control"
-        class=${it({
-      "form-control": !0,
-      "form-control--small": this.size === "small",
-      "form-control--medium": this.size === "medium",
-      "form-control--large": this.size === "large",
-      "form-control--has-label": e,
-      "form-control--has-help-text": r
-    })}
-      >
-        <label
-          part="form-control-label"
-          class="form-control__label"
-          for="input"
-          aria-hidden=${e ? "false" : "true"}
-        >
-          <slot name="label">${this.label}</slot>
-        </label>
-
-        <div part="form-control-input" class="form-control-input">
-          <div
-            part="base"
-            class=${it({
-      input: !0,
-      // Sizes
-      "input--small": this.size === "small",
-      "input--medium": this.size === "medium",
-      "input--large": this.size === "large",
-      // States
-      "input--pill": this.pill,
-      "input--standard": !this.filled,
-      "input--filled": this.filled,
-      "input--disabled": this.disabled,
-      "input--focused": this.hasFocus,
-      "input--empty": !this.value,
-      "input--no-spin-buttons": this.noSpinButtons
-    })}
-          >
-            <span part="prefix" class="input__prefix">
-              <slot name="prefix"></slot>
-            </span>
-
-            <input
-              part="input"
-              id="input"
-              class="input__control"
-              type=${this.type === "password" && this.passwordVisible ? "text" : this.type}
-              title=${this.title}
-              name=${m(this.name)}
-              ?disabled=${this.disabled}
-              ?readonly=${this.readonly}
-              ?required=${this.required}
-              placeholder=${m(this.placeholder)}
-              minlength=${m(this.minlength)}
-              maxlength=${m(this.maxlength)}
-              min=${m(this.min)}
-              max=${m(this.max)}
-              step=${m(this.step)}
-              .value=${mo(this.value)}
-              autocapitalize=${m(this.autocapitalize)}
-              autocomplete=${m(this.autocomplete)}
-              autocorrect=${m(this.autocorrect)}
-              ?autofocus=${this.autofocus}
-              spellcheck=${this.spellcheck}
-              pattern=${m(this.pattern)}
-              enterkeyhint=${m(this.enterkeyhint)}
-              inputmode=${m(this.inputmode)}
-              aria-describedby="help-text"
-              @change=${this.handleChange}
-              @input=${this.handleInput}
-              @invalid=${this.handleInvalid}
-              @keydown=${this.handleKeyDown}
-              @focus=${this.handleFocus}
-              @blur=${this.handleBlur}
-            />
-
-            ${i ? v`
-                  <button
-                    part="clear-button"
-                    class="input__clear"
-                    type="button"
-                    aria-label=${this.localize.term("clearEntry")}
-                    @click=${this.handleClearClick}
-                    tabindex="-1"
-                  >
-                    <slot name="clear-icon">
-                      <sl-icon name="x-circle-fill" library="system"></sl-icon>
-                    </slot>
-                  </button>
-                ` : ""}
-            ${this.passwordToggle && !this.disabled ? v`
-                  <button
-                    part="password-toggle-button"
-                    class="input__password-toggle"
-                    type="button"
-                    aria-label=${this.localize.term(this.passwordVisible ? "hidePassword" : "showPassword")}
-                    @click=${this.handlePasswordToggle}
-                    tabindex="-1"
-                  >
-                    ${this.passwordVisible ? v`
-                          <slot name="show-password-icon">
-                            <sl-icon name="eye-slash" library="system"></sl-icon>
-                          </slot>
-                        ` : v`
-                          <slot name="hide-password-icon">
-                            <sl-icon name="eye" library="system"></sl-icon>
-                          </slot>
-                        `}
-                  </button>
-                ` : ""}
-
-            <span part="suffix" class="input__suffix">
-              <slot name="suffix"></slot>
-            </span>
-          </div>
-        </div>
-
-        <div
-          part="form-control-help-text"
-          id="help-text"
-          class="form-control__help-text"
-          aria-hidden=${r ? "false" : "true"}
-        >
-          <slot name="help-text">${this.helpText}</slot>
-        </div>
-      </div>
-    `;
-  }
-};
-h.styles = [Q, Xe, Ge];
-h.dependencies = { "sl-icon": x };
-a([
-  re(".input__control")
-], h.prototype, "input", 2);
-a([
-  at()
-], h.prototype, "hasFocus", 2);
-a([
-  u()
-], h.prototype, "title", 2);
-a([
-  u({ reflect: !0 })
-], h.prototype, "type", 2);
-a([
-  u()
-], h.prototype, "name", 2);
-a([
-  u()
-], h.prototype, "value", 2);
-a([
-  Qe()
-], h.prototype, "defaultValue", 2);
-a([
-  u({ reflect: !0 })
-], h.prototype, "size", 2);
-a([
-  u({ type: Boolean, reflect: !0 })
-], h.prototype, "filled", 2);
-a([
-  u({ type: Boolean, reflect: !0 })
-], h.prototype, "pill", 2);
-a([
-  u()
-], h.prototype, "label", 2);
-a([
-  u({ attribute: "help-text" })
-], h.prototype, "helpText", 2);
-a([
-  u({ type: Boolean })
-], h.prototype, "clearable", 2);
-a([
-  u({ type: Boolean, reflect: !0 })
-], h.prototype, "disabled", 2);
-a([
-  u()
-], h.prototype, "placeholder", 2);
-a([
-  u({ type: Boolean, reflect: !0 })
-], h.prototype, "readonly", 2);
-a([
-  u({ attribute: "password-toggle", type: Boolean })
-], h.prototype, "passwordToggle", 2);
-a([
-  u({ attribute: "password-visible", type: Boolean })
-], h.prototype, "passwordVisible", 2);
-a([
-  u({ attribute: "no-spin-buttons", type: Boolean })
-], h.prototype, "noSpinButtons", 2);
-a([
-  u({ reflect: !0 })
-], h.prototype, "form", 2);
-a([
-  u({ type: Boolean, reflect: !0 })
-], h.prototype, "required", 2);
-a([
-  u()
-], h.prototype, "pattern", 2);
-a([
-  u({ type: Number })
-], h.prototype, "minlength", 2);
-a([
-  u({ type: Number })
-], h.prototype, "maxlength", 2);
-a([
-  u()
-], h.prototype, "min", 2);
-a([
-  u()
-], h.prototype, "max", 2);
-a([
-  u()
-], h.prototype, "step", 2);
-a([
-  u()
-], h.prototype, "autocapitalize", 2);
-a([
-  u()
-], h.prototype, "autocorrect", 2);
-a([
-  u()
-], h.prototype, "autocomplete", 2);
-a([
-  u({ type: Boolean })
-], h.prototype, "autofocus", 2);
-a([
-  u()
-], h.prototype, "enterkeyhint", 2);
-a([
-  u({
-    type: Boolean,
-    converter: {
-      // Allow "true|false" attribute values but keep the property boolean
-      fromAttribute: (o) => !(!o || o === "false"),
-      toAttribute: (o) => o ? "true" : "false"
-    }
-  })
-], h.prototype, "spellcheck", 2);
-a([
-  u()
-], h.prototype, "inputmode", 2);
-a([
-  M("disabled", { waitUntilFirstUpdate: !0 })
-], h.prototype, "handleDisabledChange", 1);
-a([
-  M("step", { waitUntilFirstUpdate: !0 })
-], h.prototype, "handleStepChange", 1);
-a([
-  M("value", { waitUntilFirstUpdate: !0 })
-], h.prototype, "handleValueChange", 1);
-h.define("sl-input");
-var go = $`
-  :host {
-    --track-width: 2px;
-    --track-color: rgb(128 128 128 / 25%);
-    --indicator-color: var(--sl-color-primary-600);
-    --speed: 2s;
-
-    display: inline-flex;
-    width: 1em;
-    height: 1em;
-    flex: none;
-  }
-
-  .spinner {
-    flex: 1 1 auto;
-    height: 100%;
-    width: 100%;
-  }
-
-  .spinner__track,
-  .spinner__indicator {
-    fill: none;
-    stroke-width: var(--track-width);
-    r: calc(0.5em - var(--track-width) / 2);
-    cx: 0.5em;
-    cy: 0.5em;
-    transform-origin: 50% 50%;
-  }
-
-  .spinner__track {
-    stroke: var(--track-color);
-    transform-origin: 0% 0%;
-  }
-
-  .spinner__indicator {
-    stroke: var(--indicator-color);
-    stroke-linecap: round;
-    stroke-dasharray: 150% 75%;
-    animation: spin var(--speed) linear infinite;
-  }
-
-  @keyframes spin {
-    0% {
-      transform: rotate(0deg);
-      stroke-dasharray: 0.05em, 3em;
-    }
-
-    50% {
-      transform: rotate(450deg);
-      stroke-dasharray: 1.375em, 1.375em;
+  };
+}
+function ht(s, { onLogin: e }) {
+  const { toolkit: t } = s.config, o = new URLSearchParams(
+    t.element.ownerDocument.defaultView.location.search
+  ).get("password_reset_confirmation"), i = (n) => {
+    s.log("login success", { event: n });
+    const { token: l } = n.detail;
+    s.log("Login form dismissed", { args: [l] }), t.dispatchAction({
+      type: "layout:pop"
+    }), s.saveToken({ token: l }), e({ token: l });
+  };
+  t.dispatchAction({
+    type: "layout:push",
+    detail: {
+      layout: "auth:login"
     }
-
-    100% {
-      transform: rotate(1080deg);
-      stroke-dasharray: 0.05em, 3em;
+  }), t.dispatchAction({
+    type: "layout:slot:push",
+    detail: {
+      layout: "auth:login",
+      slot: "main",
+      content: c`<auth-login-form
+				api=${s.config.api}
+				confirmation="${o}"
+				@login-success=${i}>
+			</auth-login-form>`
     }
-  }
-`, he = class extends k {
-  constructor() {
-    super(...arguments), this.localize = new zt(this);
-  }
-  render() {
-    return v`
-      <svg part="base" class="spinner" role="progressbar" aria-label=${this.localize.term("loading")}>
-        <circle class="spinner__track"></circle>
-        <circle class="spinner__indicator"></circle>
-      </svg>
-    `;
-  }
-};
-he.styles = [Q, go];
-var vo = $`
-  :host {
-    display: inline-block;
-    position: relative;
-    width: auto;
-    cursor: pointer;
-  }
-
-  .button {
-    display: inline-flex;
-    align-items: stretch;
-    justify-content: center;
-    width: 100%;
-    border-style: solid;
-    border-width: var(--sl-input-border-width);
-    font-family: var(--sl-input-font-family);
-    font-weight: var(--sl-font-weight-semibold);
-    text-decoration: none;
-    user-select: none;
-    -webkit-user-select: none;
-    white-space: nowrap;
-    vertical-align: middle;
-    padding: 0;
-    transition:
-      var(--sl-transition-x-fast) background-color,
-      var(--sl-transition-x-fast) color,
-      var(--sl-transition-x-fast) border,
-      var(--sl-transition-x-fast) box-shadow;
-    cursor: inherit;
-  }
-
-  .button::-moz-focus-inner {
-    border: 0;
-  }
-
-  .button:focus {
-    outline: none;
-  }
-
-  .button:focus-visible {
-    outline: var(--sl-focus-ring);
-    outline-offset: var(--sl-focus-ring-offset);
-  }
-
-  .button--disabled {
-    opacity: 0.5;
-    cursor: not-allowed;
-  }
-
-  /* When disabled, prevent mouse events from bubbling up from children */
-  .button--disabled * {
-    pointer-events: none;
-  }
-
-  .button__prefix,
-  .button__suffix {
-    flex: 0 0 auto;
-    display: flex;
-    align-items: center;
-    pointer-events: none;
-  }
-
-  .button__label {
-    display: inline-block;
-  }
-
-  .button__label::slotted(sl-icon) {
-    vertical-align: -2px;
-  }
-
-  /*
-   * Standard buttons
-   */
-
-  /* Default */
-  .button--standard.button--default {
-    background-color: var(--sl-color-neutral-0);
-    border-color: var(--sl-input-border-color);
-    color: var(--sl-color-neutral-700);
-  }
-
-  .button--standard.button--default:hover:not(.button--disabled) {
-    background-color: var(--sl-color-primary-50);
-    border-color: var(--sl-color-primary-300);
-    color: var(--sl-color-primary-700);
-  }
-
-  .button--standard.button--default:active:not(.button--disabled) {
-    background-color: var(--sl-color-primary-100);
-    border-color: var(--sl-color-primary-400);
-    color: var(--sl-color-primary-700);
-  }
-
-  /* Primary */
-  .button--standard.button--primary {
-    background-color: var(--sl-color-primary-600);
-    border-color: var(--sl-color-primary-600);
-    color: var(--sl-color-neutral-0);
-  }
-
-  .button--standard.button--primary:hover:not(.button--disabled) {
-    background-color: var(--sl-color-primary-500);
-    border-color: var(--sl-color-primary-500);
-    color: var(--sl-color-neutral-0);
-  }
-
-  .button--standard.button--primary:active:not(.button--disabled) {
-    background-color: var(--sl-color-primary-600);
-    border-color: var(--sl-color-primary-600);
-    color: var(--sl-color-neutral-0);
-  }
-
-  /* Success */
-  .button--standard.button--success {
-    background-color: var(--sl-color-success-600);
-    border-color: var(--sl-color-success-600);
-    color: var(--sl-color-neutral-0);
-  }
-
-  .button--standard.button--success:hover:not(.button--disabled) {
-    background-color: var(--sl-color-success-500);
-    border-color: var(--sl-color-success-500);
-    color: var(--sl-color-neutral-0);
-  }
-
-  .button--standard.button--success:active:not(.button--disabled) {
-    background-color: var(--sl-color-success-600);
-    border-color: var(--sl-color-success-600);
-    color: var(--sl-color-neutral-0);
-  }
-
-  /* Neutral */
-  .button--standard.button--neutral {
-    background-color: var(--sl-color-neutral-600);
-    border-color: var(--sl-color-neutral-600);
-    color: var(--sl-color-neutral-0);
-  }
-
-  .button--standard.button--neutral:hover:not(.button--disabled) {
-    background-color: var(--sl-color-neutral-500);
-    border-color: var(--sl-color-neutral-500);
-    color: var(--sl-color-neutral-0);
-  }
-
-  .button--standard.button--neutral:active:not(.button--disabled) {
-    background-color: var(--sl-color-neutral-600);
-    border-color: var(--sl-color-neutral-600);
-    color: var(--sl-color-neutral-0);
-  }
-
-  /* Warning */
-  .button--standard.button--warning {
-    background-color: var(--sl-color-warning-600);
-    border-color: var(--sl-color-warning-600);
-    color: var(--sl-color-neutral-0);
-  }
-  .button--standard.button--warning:hover:not(.button--disabled) {
-    background-color: var(--sl-color-warning-500);
-    border-color: var(--sl-color-warning-500);
-    color: var(--sl-color-neutral-0);
-  }
-
-  .button--standard.button--warning:active:not(.button--disabled) {
-    background-color: var(--sl-color-warning-600);
-    border-color: var(--sl-color-warning-600);
-    color: var(--sl-color-neutral-0);
-  }
-
-  /* Danger */
-  .button--standard.button--danger {
-    background-color: var(--sl-color-danger-600);
-    border-color: var(--sl-color-danger-600);
-    color: var(--sl-color-neutral-0);
-  }
-
-  .button--standard.button--danger:hover:not(.button--disabled) {
-    background-color: var(--sl-color-danger-500);
-    border-color: var(--sl-color-danger-500);
-    color: var(--sl-color-neutral-0);
-  }
-
-  .button--standard.button--danger:active:not(.button--disabled) {
-    background-color: var(--sl-color-danger-600);
-    border-color: var(--sl-color-danger-600);
-    color: var(--sl-color-neutral-0);
-  }
-
-  /*
-   * Outline buttons
-   */
-
-  .button--outline {
-    background: none;
-    border: solid 1px;
-  }
-
-  /* Default */
-  .button--outline.button--default {
-    border-color: var(--sl-input-border-color);
-    color: var(--sl-color-neutral-700);
-  }
-
-  .button--outline.button--default:hover:not(.button--disabled),
-  .button--outline.button--default.button--checked:not(.button--disabled) {
-    border-color: var(--sl-color-primary-600);
-    background-color: var(--sl-color-primary-600);
-    color: var(--sl-color-neutral-0);
-  }
-
-  .button--outline.button--default:active:not(.button--disabled) {
-    border-color: var(--sl-color-primary-700);
-    background-color: var(--sl-color-primary-700);
-    color: var(--sl-color-neutral-0);
-  }
-
-  /* Primary */
-  .button--outline.button--primary {
-    border-color: var(--sl-color-primary-600);
-    color: var(--sl-color-primary-600);
-  }
-
-  .button--outline.button--primary:hover:not(.button--disabled),
-  .button--outline.button--primary.button--checked:not(.button--disabled) {
-    background-color: var(--sl-color-primary-600);
-    color: var(--sl-color-neutral-0);
-  }
-
-  .button--outline.button--primary:active:not(.button--disabled) {
-    border-color: var(--sl-color-primary-700);
-    background-color: var(--sl-color-primary-700);
-    color: var(--sl-color-neutral-0);
-  }
-
-  /* Success */
-  .button--outline.button--success {
-    border-color: var(--sl-color-success-600);
-    color: var(--sl-color-success-600);
-  }
-
-  .button--outline.button--success:hover:not(.button--disabled),
-  .button--outline.button--success.button--checked:not(.button--disabled) {
-    background-color: var(--sl-color-success-600);
-    color: var(--sl-color-neutral-0);
-  }
-
-  .button--outline.button--success:active:not(.button--disabled) {
-    border-color: var(--sl-color-success-700);
-    background-color: var(--sl-color-success-700);
-    color: var(--sl-color-neutral-0);
-  }
-
-  /* Neutral */
-  .button--outline.button--neutral {
-    border-color: var(--sl-color-neutral-600);
-    color: var(--sl-color-neutral-600);
-  }
-
-  .button--outline.button--neutral:hover:not(.button--disabled),
-  .button--outline.button--neutral.button--checked:not(.button--disabled) {
-    background-color: var(--sl-color-neutral-600);
-    color: var(--sl-color-neutral-0);
-  }
-
-  .button--outline.button--neutral:active:not(.button--disabled) {
-    border-color: var(--sl-color-neutral-700);
-    background-color: var(--sl-color-neutral-700);
-    color: var(--sl-color-neutral-0);
-  }
-
-  /* Warning */
-  .button--outline.button--warning {
-    border-color: var(--sl-color-warning-600);
-    color: var(--sl-color-warning-600);
-  }
-
-  .button--outline.button--warning:hover:not(.button--disabled),
-  .button--outline.button--warning.button--checked:not(.button--disabled) {
-    background-color: var(--sl-color-warning-600);
-    color: var(--sl-color-neutral-0);
-  }
-
-  .button--outline.button--warning:active:not(.button--disabled) {
-    border-color: var(--sl-color-warning-700);
-    background-color: var(--sl-color-warning-700);
-    color: var(--sl-color-neutral-0);
-  }
-
-  /* Danger */
-  .button--outline.button--danger {
-    border-color: var(--sl-color-danger-600);
-    color: var(--sl-color-danger-600);
-  }
-
-  .button--outline.button--danger:hover:not(.button--disabled),
-  .button--outline.button--danger.button--checked:not(.button--disabled) {
-    background-color: var(--sl-color-danger-600);
-    color: var(--sl-color-neutral-0);
-  }
-
-  .button--outline.button--danger:active:not(.button--disabled) {
-    border-color: var(--sl-color-danger-700);
-    background-color: var(--sl-color-danger-700);
-    color: var(--sl-color-neutral-0);
-  }
-
-  @media (forced-colors: active) {
-    .button.button--outline.button--checked:not(.button--disabled) {
-      outline: solid 2px transparent;
-    }
-  }
-
-  /*
-   * Text buttons
-   */
-
-  .button--text {
-    background-color: transparent;
-    border-color: transparent;
-    color: var(--sl-color-primary-600);
-  }
-
-  .button--text:hover:not(.button--disabled) {
-    background-color: transparent;
-    border-color: transparent;
-    color: var(--sl-color-primary-500);
-  }
-
-  .button--text:focus-visible:not(.button--disabled) {
-    background-color: transparent;
-    border-color: transparent;
-    color: var(--sl-color-primary-500);
-  }
-
-  .button--text:active:not(.button--disabled) {
-    background-color: transparent;
-    border-color: transparent;
-    color: var(--sl-color-primary-700);
-  }
-
-  /*
-   * Size modifiers
-   */
-
-  .button--small {
-    height: auto;
-    min-height: var(--sl-input-height-small);
-    font-size: var(--sl-button-font-size-small);
-    line-height: calc(var(--sl-input-height-small) - var(--sl-input-border-width) * 2);
-    border-radius: var(--sl-input-border-radius-small);
-  }
-
-  .button--medium {
-    height: auto;
-    min-height: var(--sl-input-height-medium);
-    font-size: var(--sl-button-font-size-medium);
-    line-height: calc(var(--sl-input-height-medium) - var(--sl-input-border-width) * 2);
-    border-radius: var(--sl-input-border-radius-medium);
-  }
-
-  .button--large {
-    height: auto;
-    min-height: var(--sl-input-height-large);
-    font-size: var(--sl-button-font-size-large);
-    line-height: calc(var(--sl-input-height-large) - var(--sl-input-border-width) * 2);
-    border-radius: var(--sl-input-border-radius-large);
-  }
-
-  /*
-   * Pill modifier
-   */
-
-  .button--pill.button--small {
-    border-radius: var(--sl-input-height-small);
-  }
-
-  .button--pill.button--medium {
-    border-radius: var(--sl-input-height-medium);
-  }
-
-  .button--pill.button--large {
-    border-radius: var(--sl-input-height-large);
-  }
-
-  /*
-   * Circle modifier
-   */
-
-  .button--circle {
-    padding-left: 0;
-    padding-right: 0;
-  }
-
-  .button--circle.button--small {
-    width: var(--sl-input-height-small);
-    border-radius: 50%;
-  }
-
-  .button--circle.button--medium {
-    width: var(--sl-input-height-medium);
-    border-radius: 50%;
-  }
-
-  .button--circle.button--large {
-    width: var(--sl-input-height-large);
-    border-radius: 50%;
-  }
-
-  .button--circle .button__prefix,
-  .button--circle .button__suffix,
-  .button--circle .button__caret {
-    display: none;
-  }
-
-  /*
-   * Caret modifier
-   */
-
-  .button--caret .button__suffix {
-    display: none;
-  }
-
-  .button--caret .button__caret {
-    height: auto;
-  }
-
-  /*
-   * Loading modifier
-   */
-
-  .button--loading {
-    position: relative;
-    cursor: wait;
-  }
-
-  .button--loading .button__prefix,
-  .button--loading .button__label,
-  .button--loading .button__suffix,
-  .button--loading .button__caret {
-    visibility: hidden;
-  }
-
-  .button--loading sl-spinner {
-    --indicator-color: currentColor;
-    position: absolute;
-    font-size: 1em;
-    height: 1em;
-    width: 1em;
-    top: calc(50% - 0.5em);
-    left: calc(50% - 0.5em);
-  }
-
-  /*
-   * Badges
-   */
-
-  .button ::slotted(sl-badge) {
-    position: absolute;
-    top: 0;
-    right: 0;
-    translate: 50% -50%;
-    pointer-events: none;
-  }
-
-  .button--rtl ::slotted(sl-badge) {
-    right: auto;
-    left: 0;
-    translate: -50% -50%;
-  }
-
-  /*
-   * Button spacing
-   */
-
-  .button--has-label.button--small .button__label {
-    padding: 0 var(--sl-spacing-small);
-  }
-
-  .button--has-label.button--medium .button__label {
-    padding: 0 var(--sl-spacing-medium);
-  }
-
-  .button--has-label.button--large .button__label {
-    padding: 0 var(--sl-spacing-large);
-  }
-
-  .button--has-prefix.button--small {
-    padding-inline-start: var(--sl-spacing-x-small);
-  }
-
-  .button--has-prefix.button--small .button__label {
-    padding-inline-start: var(--sl-spacing-x-small);
-  }
-
-  .button--has-prefix.button--medium {
-    padding-inline-start: var(--sl-spacing-small);
-  }
-
-  .button--has-prefix.button--medium .button__label {
-    padding-inline-start: var(--sl-spacing-small);
-  }
-
-  .button--has-prefix.button--large {
-    padding-inline-start: var(--sl-spacing-small);
-  }
-
-  .button--has-prefix.button--large .button__label {
-    padding-inline-start: var(--sl-spacing-small);
-  }
-
-  .button--has-suffix.button--small,
-  .button--caret.button--small {
-    padding-inline-end: var(--sl-spacing-x-small);
-  }
-
-  .button--has-suffix.button--small .button__label,
-  .button--caret.button--small .button__label {
-    padding-inline-end: var(--sl-spacing-x-small);
-  }
-
-  .button--has-suffix.button--medium,
-  .button--caret.button--medium {
-    padding-inline-end: var(--sl-spacing-small);
-  }
-
-  .button--has-suffix.button--medium .button__label,
-  .button--caret.button--medium .button__label {
-    padding-inline-end: var(--sl-spacing-small);
-  }
-
-  .button--has-suffix.button--large,
-  .button--caret.button--large {
-    padding-inline-end: var(--sl-spacing-small);
-  }
-
-  .button--has-suffix.button--large .button__label,
-  .button--caret.button--large .button__label {
-    padding-inline-end: var(--sl-spacing-small);
-  }
-
-  /*
-   * Button groups support a variety of button types (e.g. buttons with tooltips, buttons as dropdown triggers, etc.).
-   * This means buttons aren't always direct descendants of the button group, thus we can't target them with the
-   * ::slotted selector. To work around this, the button group component does some magic to add these special classes to
-   * buttons and we style them here instead.
-   */
-
-  :host([data-sl-button-group__button--first]:not([data-sl-button-group__button--last])) .button {
-    border-start-end-radius: 0;
-    border-end-end-radius: 0;
-  }
-
-  :host([data-sl-button-group__button--inner]) .button {
-    border-radius: 0;
-  }
-
-  :host([data-sl-button-group__button--last]:not([data-sl-button-group__button--first])) .button {
-    border-start-start-radius: 0;
-    border-end-start-radius: 0;
-  }
-
-  /* All except the first */
-  :host([data-sl-button-group__button]:not([data-sl-button-group__button--first])) {
-    margin-inline-start: calc(-1 * var(--sl-input-border-width));
-  }
-
-  /* Add a visual separator between solid buttons */
-  :host(
-      [data-sl-button-group__button]:not(
-          [data-sl-button-group__button--first],
-          [data-sl-button-group__button--radio],
-          [variant='default']
-        ):not(:hover)
-    )
-    .button:after {
-    content: '';
-    position: absolute;
-    top: 0;
-    inset-inline-start: 0;
-    bottom: 0;
-    border-left: solid 1px rgb(128 128 128 / 33%);
-    mix-blend-mode: multiply;
-  }
-
-  /* Bump hovered, focused, and checked buttons up so their focus ring isn't clipped */
-  :host([data-sl-button-group__button--hover]) {
-    z-index: 1;
-  }
-
-  /* Focus and checked are always on top */
-  :host([data-sl-button-group__button--focus]),
-  :host([data-sl-button-group__button][checked]) {
-    z-index: 2;
-  }
-`;
-/**
- * @license
- * Copyright 2020 Google LLC
- * SPDX-License-Identifier: BSD-3-Clause
- */
-const pe = Symbol.for(""), yo = (o) => {
-  if ((o == null ? void 0 : o.r) === pe) return o == null ? void 0 : o._$litStatic$;
-}, Kt = (o, ...t) => ({ _$litStatic$: t.reduce((e, r, s) => e + ((i) => {
-  if (i._$litStatic$ !== void 0) return i._$litStatic$;
-  throw Error(`Value passed to 'literal' function must be a 'literal' result: ${i}. Use 'unsafeStatic' to pass non-literal values, but
-            take care to ensure page security.`);
-})(r) + o[s + 1], o[0]), r: pe }), Zt = /* @__PURE__ */ new Map(), wo = (o) => (t, ...e) => {
-  const r = e.length;
-  let s, i;
-  const n = [], d = [];
-  let l, c = 0, b = !1;
-  for (; c < r; ) {
-    for (l = t[c]; c < r && (i = e[c], (s = yo(i)) !== void 0); ) l += s + t[++c], b = !0;
-    c !== r && d.push(i), n.push(l), c++;
-  }
-  if (c === r && n.push(t[r]), b) {
-    const p = n.join("$$lit$$");
-    (t = Zt.get(p)) === void 0 && (n.raw = n, Zt.set(p, t = n)), e = d;
-  }
-  return o(t, ...e);
-}, ft = wo(v);
-var f = class extends k {
-  constructor() {
-    super(...arguments), this.formControlController = new ae(this, {
-      assumeInteractionOn: ["click"]
-    }), this.hasSlotController = new St(this, "[default]", "prefix", "suffix"), this.localize = new zt(this), this.hasFocus = !1, this.invalid = !1, this.title = "", this.variant = "default", this.size = "medium", this.caret = !1, this.disabled = !1, this.loading = !1, this.outline = !1, this.pill = !1, this.circle = !1, this.type = "button", this.name = "", this.value = "", this.href = "", this.rel = "noreferrer noopener";
-  }
-  /** Gets the validity state object */
-  get validity() {
-    return this.isButton() ? this.button.validity : Et;
-  }
-  /** Gets the validation message */
-  get validationMessage() {
-    return this.isButton() ? this.button.validationMessage : "";
-  }
-  firstUpdated() {
-    this.isButton() && this.formControlController.updateValidity();
-  }
-  handleBlur() {
-    this.hasFocus = !1, this.emit("sl-blur");
-  }
-  handleFocus() {
-    this.hasFocus = !0, this.emit("sl-focus");
-  }
-  handleClick() {
-    this.type === "submit" && this.formControlController.submit(this), this.type === "reset" && this.formControlController.reset(this);
-  }
-  handleInvalid(o) {
-    this.formControlController.setValidity(!1), this.formControlController.emitInvalidEvent(o);
-  }
-  isButton() {
-    return !this.href;
-  }
-  isLink() {
-    return !!this.href;
-  }
-  handleDisabledChange() {
-    this.isButton() && this.formControlController.setValidity(this.disabled);
-  }
-  /** Simulates a click on the button. */
-  click() {
-    this.button.click();
-  }
-  /** Sets focus on the button. */
-  focus(o) {
-    this.button.focus(o);
-  }
-  /** Removes focus from the button. */
-  blur() {
-    this.button.blur();
-  }
-  /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
-  checkValidity() {
-    return this.isButton() ? this.button.checkValidity() : !0;
-  }
-  /** Gets the associated form, if one exists. */
-  getForm() {
-    return this.formControlController.getForm();
-  }
-  /** Checks for validity and shows the browser's validation message if the control is invalid. */
-  reportValidity() {
-    return this.isButton() ? this.button.reportValidity() : !0;
-  }
-  /** Sets a custom validation message. Pass an empty string to restore validity. */
-  setCustomValidity(o) {
-    this.isButton() && (this.button.setCustomValidity(o), this.formControlController.updateValidity());
-  }
-  render() {
-    const o = this.isLink(), t = o ? Kt`a` : Kt`button`;
-    return ft`
-      <${t}
-        part="base"
-        class=${it({
-      button: !0,
-      "button--default": this.variant === "default",
-      "button--primary": this.variant === "primary",
-      "button--success": this.variant === "success",
-      "button--neutral": this.variant === "neutral",
-      "button--warning": this.variant === "warning",
-      "button--danger": this.variant === "danger",
-      "button--text": this.variant === "text",
-      "button--small": this.size === "small",
-      "button--medium": this.size === "medium",
-      "button--large": this.size === "large",
-      "button--caret": this.caret,
-      "button--circle": this.circle,
-      "button--disabled": this.disabled,
-      "button--focused": this.hasFocus,
-      "button--loading": this.loading,
-      "button--standard": !this.outline,
-      "button--outline": this.outline,
-      "button--pill": this.pill,
-      "button--rtl": this.localize.dir() === "rtl",
-      "button--has-label": this.hasSlotController.test("[default]"),
-      "button--has-prefix": this.hasSlotController.test("prefix"),
-      "button--has-suffix": this.hasSlotController.test("suffix")
-    })}
-        ?disabled=${m(o ? void 0 : this.disabled)}
-        type=${m(o ? void 0 : this.type)}
-        title=${this.title}
-        name=${m(o ? void 0 : this.name)}
-        value=${m(o ? void 0 : this.value)}
-        href=${m(o ? this.href : void 0)}
-        target=${m(o ? this.target : void 0)}
-        download=${m(o ? this.download : void 0)}
-        rel=${m(o ? this.rel : void 0)}
-        role=${m(o ? void 0 : "button")}
-        aria-disabled=${this.disabled ? "true" : "false"}
-        tabindex=${this.disabled ? "-1" : "0"}
-        @blur=${this.handleBlur}
-        @focus=${this.handleFocus}
-        @invalid=${this.isButton() ? this.handleInvalid : null}
-        @click=${this.handleClick}
-      >
-        <slot name="prefix" part="prefix" class="button__prefix"></slot>
-        <slot part="label" class="button__label"></slot>
-        <slot name="suffix" part="suffix" class="button__suffix"></slot>
-        ${this.caret ? ft` <sl-icon part="caret" class="button__caret" library="system" name="caret"></sl-icon> ` : ""}
-        ${this.loading ? ft`<sl-spinner part="spinner"></sl-spinner>` : ""}
-      </${t}>
-    `;
-  }
-};
-f.styles = [Q, vo];
-f.dependencies = {
-  "sl-icon": x,
-  "sl-spinner": he
-};
-a([
-  re(".button")
-], f.prototype, "button", 2);
-a([
-  at()
-], f.prototype, "hasFocus", 2);
-a([
-  at()
-], f.prototype, "invalid", 2);
-a([
-  u()
-], f.prototype, "title", 2);
-a([
-  u({ reflect: !0 })
-], f.prototype, "variant", 2);
-a([
-  u({ reflect: !0 })
-], f.prototype, "size", 2);
-a([
-  u({ type: Boolean, reflect: !0 })
-], f.prototype, "caret", 2);
-a([
-  u({ type: Boolean, reflect: !0 })
-], f.prototype, "disabled", 2);
-a([
-  u({ type: Boolean, reflect: !0 })
-], f.prototype, "loading", 2);
-a([
-  u({ type: Boolean, reflect: !0 })
-], f.prototype, "outline", 2);
-a([
-  u({ type: Boolean, reflect: !0 })
-], f.prototype, "pill", 2);
-a([
-  u({ type: Boolean, reflect: !0 })
-], f.prototype, "circle", 2);
-a([
-  u()
-], f.prototype, "type", 2);
-a([
-  u()
-], f.prototype, "name", 2);
-a([
-  u()
-], f.prototype, "value", 2);
-a([
-  u()
-], f.prototype, "href", 2);
-a([
-  u()
-], f.prototype, "target", 2);
-a([
-  u()
-], f.prototype, "rel", 2);
-a([
-  u()
-], f.prototype, "download", 2);
-a([
-  u()
-], f.prototype, "form", 2);
-a([
-  u({ attribute: "formaction" })
-], f.prototype, "formAction", 2);
-a([
-  u({ attribute: "formenctype" })
-], f.prototype, "formEnctype", 2);
-a([
-  u({ attribute: "formmethod" })
-], f.prototype, "formMethod", 2);
-a([
-  u({ attribute: "formnovalidate", type: Boolean })
-], f.prototype, "formNoValidate", 2);
-a([
-  u({ attribute: "formtarget" })
-], f.prototype, "formTarget", 2);
-a([
-  M("disabled", { waitUntilFirstUpdate: !0 })
-], f.prototype, "handleDisabledChange", 1);
-f.define("sl-button");
-class wt extends S {
-  constructor() {
-    super(), this.username = "", this.password = "", this.disabled = !1;
-  }
-  handleSubmit(t) {
-    t.preventDefault(), this.dispatchEvent(
-      new CustomEvent("login-attempt", {
-        detail: {
-          username: this.username,
-          password: this.password
-        },
-        bubbles: !0,
-        composed: !0
-      })
-    );
-  }
-  handleInputChange(t) {
-    const { name: e, value: r } = t.target;
-    this[e] = r;
-  }
-  render() {
-    return v`
-      <sl-card>
-        <form @submit="${this.handleSubmit}">
-          <sl-input 
-            name="username"
-            placeholder="Username or Email" 
-            .value="${this.username}" 
-            autocomplete="username"
-            @sl-change="${this.handleInputChange}">
-          </sl-input>
-          <sl-input 
-            type="password" 
-            name="password"
-            placeholder="Password"
-            .value="${this.password}"
-            autocomplete="current-password"
-            @sl-change="${this.handleInputChange}">
-          </sl-input>
-          <sl-button type="submit" ?disabled="${this.disabled}">Login</sl-button>
-        </form>
-      </sl-card>
-    `;
-  }
-}
-E(wt, "styles", $`
-    :host {
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      height: 100vh;
-      box-sizing: border-box;
-    }
-    sl-card {
-      width: 300px;
-      --padding: var(--sl-card-padding);
-      --background-color: var(--sl-card-background-color);
-      --border-radius: var(--sl-card-border-radius);
-      --box-shadow: var(--sl-card-shadow);
-    }
-    sl-input, sl-button {
-      width: 100%;
-      margin-bottom: 10px;
-    }
-  `), E(wt, "properties", {
-  username: { type: String },
-  password: { type: String },
-  disabled: { type: Boolean, reflect: !0 }
-});
-customElements.define("studio-login", wt);
-class _t extends S {
-  constructor() {
-    super(), this.currentPassword = "", this.newPassword = "", this.confirmPassword = "";
-  }
-  render() {
-    return v`
-      <form @submit="${this.handleSubmit}">
-        <input type="password" name="currentPassword" 
-          autocomplete="current-password"
-          placeholder="Current Password"
-          .value="${this.currentPassword}"
-          @input="${this.updateProperty("currentPassword")}"
-        >
-        <input type="password" name="newPassword"
-          placeholder="New Password"
-          .value="${this.newPassword}"
-          @input="${this.updateProperty("newPassword")}"
-        >
-        <input type="password" name="confirmPassword"
-          placeholder="Confirm New Password"
-          .value="${this.confirmPassword}"
-          @input="${this.updateProperty("confirmPassword")}"
-        >
-        <button type="submit">Change Password</button>
-      </form>
-    `;
-  }
-  updateProperty(t) {
-    return (e) => {
-      this[t] = e.target.value;
-    };
-  }
-  handleSubmit(t) {
-    t.preventDefault(), this.newPassword === this.confirmPassword ? this.dispatchEvent(new CustomEvent("change-password", {
-      detail: {
-        currentPassword: this.currentPassword,
-        newPassword: this.newPassword
-      }
-    })) : alert("The new passwords do not match.");
-  }
-}
-E(_t, "styles", $`
-    :host {
-      display: block;
-      box-sizing: border-box;
-    }
-    input, button {
-      width: 100%;
-      margin-bottom: 10px;
-      padding: 8px;
-      box-sizing: border-box;
-    }
-  `), E(_t, "properties", {
-  currentPassword: { type: String },
-  newPassword: { type: String },
-  confirmPassword: { type: String }
-});
-customElements.define("studio-change-password", _t);
-class $t extends S {
-  constructor() {
-    super(), this.apibaseurl = "", this.error = "", this.isAwaiting = !1, this.lastResult = void 0, this.forceChangePassword = !1, this.handleLogin = this.handleLogin.bind(this), this.handleLoginResult = this.handleLoginResult.bind(this), this.handleLoginError = this.handleLoginError.bind(this), this.renderPasswordChangeForm = this.renderPasswordChangeForm.bind(this);
-  }
-  handleLogin(t) {
-    this.isAwaiting = !0;
-    const { username: e, password: r } = t.detail, s = mt({ baseUrl: this.apibaseurl });
-    this.requestUpdate(), s.mintToken({ username: e, password: r }).then(this.handleLoginResult).catch(this.handleLoginError);
-  }
-  handleLoginResult(t) {
-    var e;
-    this.error = "", this.isAwaiting = !1, this.lastResult = t, ((e = t.challenge) == null ? void 0 : e.name) === "NEW_PASSWORD_REQUIRED" ? (this.forceChangePassword = !0, this.error = "You must set a new password to continue.") : this.dispatchEvent(new CustomEvent("login-success", { detail: t })), this.requestUpdate();
-  }
-  handleLoginError(t) {
-    var e, r;
-    console.error("Error logging in:", t), this.error = ((r = (e = t == null ? void 0 : t.body) == null ? void 0 : e.error) == null ? void 0 : r.message) || "Invalid username or password", this.isAwaiting = !1, this.requestUpdate();
-  }
-  handleChangePassword(t) {
-    const { currentPassword: e, newPassword: r } = t.detail, { token: s } = this.lastResult, i = mt({ baseUrl: this.apibaseurl });
-    this.requestUpdate(), i.updatePassword({ token: s, currentPassword: e, newPassword: r }).then(() => {
-      this.forceChangePassword = !1, this.error = "Login with your new password.", this.isAwaiting = !1, this.requestUpdate();
-    }).catch((n) => {
-      var d, l;
-      this.error = ((l = (d = n == null ? void 0 : n.body) == null ? void 0 : d.error) == null ? void 0 : l.message) || n.message, this.isAwaiting = !1, this.requestUpdate();
-    });
-  }
-  renderPasswordChangeForm() {
-    return v`
-      <div>
-      ${this.error ? v`<div class="error">${this.error}</div>` : null}
-      <studio-change-password @change-password=${this.handleChangePassword}>
-      </studio-change-password>
-      </div>
-    `;
-  }
-  renderLoginForm() {
-    return v`
-        ${this.error ? v`<div class="error">${this.error}</div>` : null}
-        <studio-login
-          @login-attempt=${this.handleLogin}
-          ?disabled=${this.isAwaiting}
-        ></studio-login>
-    `;
-  }
-  render() {
-    return this.forceChangePassword ? this.renderPasswordChangeForm() : this.renderLoginForm();
-  }
-}
-E($t, "properties", {
-  apibaseurl: { type: String },
-  error: { type: String }
-}), E($t, "styles", $`
-    :host {
-      display: block;
-      max-width: 400px;
-      margin: 0 auto;
-    }
-  `);
-window.customElements.define("mod-auth-login-form", $t);
-function be({ studio: o, config: t }) {
-  return new Promise((e, r) => {
-    let s = window.sessionStorage.getItem(K());
-    if (s) {
-      ko(s) ? _o({ studio: o, config: t, token: s }).then(e).catch((l) => {
-        console.error("Failed to refresh token:", l), window.sessionStorage.removeItem(K()), be({ studio: o, config: t }).then(e).catch(r);
-      }) : e(s);
-      return;
-    }
-    const i = (l) => (window.sessionStorage.setItem(K(), l), l);
-    let n;
-    const d = (l) => {
-      const { token: c } = l.detail;
-      i(c), e(c), o.pub("system::workspace", "dismiss", n);
-    };
-    n = v`<mod-auth-login-form
-      id="login"
-      apibaseurl=${t.apibaseurl}
-      @login-success=${d}></mod-auth-login-form>`, o.pub("system::workspace", "present", n);
   });
 }
-async function _o({ studio: o, config: t, token: e }) {
-  const r = t.apibaseurl, s = mt({ baseUrl: r }), { token: i } = await s.refreshToken({ token: e });
-  return window.sessionStorage.setItem(K(), i), i;
-}
-function $o({ studio: o }) {
-  window.sessionStorage.removeItem(K());
+function ut(s, { token: e }) {
+  s.log("saving token", { args: [e] });
+  const t = Y(s);
+  window.localStorage.setItem(t, e);
 }
-function xo(o) {
-  return JSON.parse(window.atob(o.split(".")[1].replace(/-/g, "+").replace(/_/g, "/")));
+function $e(s) {
+  const e = Y(s);
+  return window.localStorage.getItem(e);
 }
-function ko(o, t = 300, e = Date.now()) {
-  return xo(o).exp * 1e3 - t < e;
+async function pt(s) {
+  const e = $e(s);
+  if (!e || e.length < 1)
+    throw new Error("No token found");
+  return Je(e) ? (s.log("refreshing token", { args: [e] }), await x({
+    baseUrl: s.config.api
+  }).refreshToken({ token: e }).then(({ token: r }) => r)) : e;
 }
-function K() {
-  return "studio.wral::auth_token";
+function Y({ storageKey: s = "token" }) {
+  return s;
 }
-function Eo(o, t) {
-  o.sub("studio.wral::mod-auth", "token-request", ({ state: e }) => {
-    const { callback: r } = e.value;
-    r ? be({ studio: o, config: t }).then((s) => r(s)).catch((s) => r(null, s)) : console.warn("No token callback defined");
-  }), o.sub("studio.wral::mod-auth", "logout", () => {
-    $o({ studio: o });
+function gt(s, e) {
+  const t = be(s, e), r = nt(t);
+  r.mount(), r.requestRender(), t.forceLogin && G(s.element).then((o) => {
+    r.log("You have logged in successfully!", o);
   });
 }
 export {
-  Eo as init
+  gt as init
 };