@cal.macconnachie/web-components 0.0.20 → 1.0.1

package/dist/components/{auth.js → auth-form.js}

@@ -1,15 +1,15 @@
-const z = globalThis, Z = z.ShadowRoot && (z.ShadyCSS === void 0 || z.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, Q = Symbol(), ot = /* @__PURE__ */ new WeakMap();
-let wt = class {
-  constructor(t, s, i) {
-    if (this._$cssResult$ = !0, i !== Q) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
+const B = globalThis, Z = B.ShadowRoot && (B.ShadyCSS === void 0 || B.ShadyCSS.nativeShadow) && "adoptedStyleSheets" in Document.prototype && "replace" in CSSStyleSheet.prototype, Q = Symbol(), ot = /* @__PURE__ */ new WeakMap();
+let $t = class {
+  constructor(t, s, r) {
+    if (this._$cssResult$ = !0, r !== Q) throw Error("CSSResult is not constructable. Use `unsafeCSS` or `css` instead.");
     this.cssText = t, this.t = s;
   }
   get styleSheet() {
     let t = this.o;
     const s = this.t;
     if (Z && t === void 0) {
-      const i = s !== void 0 && s.length === 1;
-      i && (t = ot.get(s)), t === void 0 && ((this.o = t = new CSSStyleSheet()).replaceSync(this.cssText), i && ot.set(s, t));
+      const r = s !== void 0 && s.length === 1;
+      r && (t = ot.get(s)), t === void 0 && ((this.o = t = new CSSStyleSheet()).replaceSync(this.cssText), r && ot.set(s, t));
     }
     return t;
   }
@@ -17,28 +17,28 @@ let wt = class {
     return this.cssText;
   }
 };
-const Et = (e) => new wt(typeof e == "string" ? e : e + "", void 0, Q), xt = (e, ...t) => {
-  const s = e.length === 1 ? e[0] : t.reduce(((i, r, o) => i + ((a) => {
+const St = (e) => new $t(typeof e == "string" ? e : e + "", void 0, Q), kt = (e, ...t) => {
+  const s = e.length === 1 ? e[0] : t.reduce(((r, i, o) => r + ((a) => {
     if (a._$cssResult$ === !0) return a.cssText;
     if (typeof a == "number") return a;
     throw Error("Value passed to 'css' function must be a 'css' function result: " + a + ". Use 'unsafeCSS' to pass non-literal values, but take care to ensure page security.");
-  })(r) + e[o + 1]), e[0]);
-  return new wt(s, e, Q);
-}, Tt = (e, t) => {
+  })(i) + e[o + 1]), e[0]);
+  return new $t(s, e, Q);
+}, Et = (e, t) => {
   if (Z) e.adoptedStyleSheets = t.map(((s) => s instanceof CSSStyleSheet ? s : s.styleSheet));
   else for (const s of t) {
-    const i = document.createElement("style"), r = z.litNonce;
-    r !== void 0 && i.setAttribute("nonce", r), i.textContent = s.cssText, e.appendChild(i);
+    const r = document.createElement("style"), i = B.litNonce;
+    i !== void 0 && r.setAttribute("nonce", i), r.textContent = s.cssText, e.appendChild(r);
   }
 }, at = Z ? (e) => e : (e) => e instanceof CSSStyleSheet ? ((t) => {
   let s = "";
-  for (const i of t.cssRules) s += i.cssText;
-  return Et(s);
+  for (const r of t.cssRules) s += r.cssText;
+  return St(s);
 })(e) : e;
-const { is: Pt, defineProperty: Ot, getOwnPropertyDescriptor: Dt, getOwnPropertyNames: Ut, getOwnPropertySymbols: Rt, getPrototypeOf: It } = Object, F = globalThis, nt = F.trustedTypes, Nt = nt ? nt.emptyScript : "", Lt = F.reactiveElementPolyfillSupport, M = (e, t) => e, Y = { toAttribute(e, t) {
+const { is: xt, defineProperty: Ct, getOwnPropertyDescriptor: Tt, getOwnPropertyNames: Pt, getOwnPropertySymbols: Ot, getPrototypeOf: Ut } = Object, W = globalThis, nt = W.trustedTypes, Rt = nt ? nt.emptyScript : "", Dt = W.reactiveElementPolyfillSupport, M = (e, t) => e, K = { toAttribute(e, t) {
   switch (t) {
     case Boolean:
-      e = e ? Nt : null;
+      e = e ? Rt : null;
       break;
     case Object:
     case Array:
@@ -63,9 +63,9 @@ const { is: Pt, defineProperty: Ot, getOwnPropertyDescriptor: Dt, getOwnProperty
       }
   }
   return s;
-} }, X = (e, t) => !Pt(e, t), lt = { attribute: !0, type: String, converter: Y, reflect: !1, useDefault: !1, hasChanged: X };
-Symbol.metadata ??= Symbol("metadata"), F.litPropertyMetadata ??= /* @__PURE__ */ new WeakMap();
-let U = class extends HTMLElement {
+} }, X = (e, t) => !xt(e, t), lt = { attribute: !0, type: String, converter: K, reflect: !1, useDefault: !1, hasChanged: X };
+Symbol.metadata ??= Symbol("metadata"), W.litPropertyMetadata ??= /* @__PURE__ */ new WeakMap();
+let R = class extends HTMLElement {
   static addInitializer(t) {
     this._$Ei(), (this.l ??= []).push(t);
   }
@@ -74,19 +74,19 @@ let U = class extends HTMLElement {
   }
   static createProperty(t, s = lt) {
     if (s.state && (s.attribute = !1), this._$Ei(), this.prototype.hasOwnProperty(t) && ((s = Object.create(s)).wrapped = !0), this.elementProperties.set(t, s), !s.noAccessor) {
-      const i = Symbol(), r = this.getPropertyDescriptor(t, i, s);
-      r !== void 0 && Ot(this.prototype, t, r);
+      const r = Symbol(), i = this.getPropertyDescriptor(t, r, s);
+      i !== void 0 && Ct(this.prototype, t, i);
     }
   }
-  static getPropertyDescriptor(t, s, i) {
-    const { get: r, set: o } = Dt(this.prototype, t) ?? { get() {
+  static getPropertyDescriptor(t, s, r) {
+    const { get: i, set: o } = Tt(this.prototype, t) ?? { get() {
       return this[s];
     }, set(a) {
       this[s] = a;
     } };
-    return { get: r, set(a) {
-      const c = r?.call(this);
-      o?.call(this, a), this.requestUpdate(t, c, i);
+    return { get: i, set(a) {
+      const p = i?.call(this);
+      o?.call(this, a), this.requestUpdate(t, p, r);
     }, configurable: !0, enumerable: !0 };
   }
   static getPropertyOptions(t) {
@@ -94,38 +94,38 @@ let U = class extends HTMLElement {
   }
   static _$Ei() {
     if (this.hasOwnProperty(M("elementProperties"))) return;
-    const t = It(this);
+    const t = Ut(this);
     t.finalize(), t.l !== void 0 && (this.l = [...t.l]), this.elementProperties = new Map(t.elementProperties);
   }
   static finalize() {
     if (this.hasOwnProperty(M("finalized"))) return;
     if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(M("properties"))) {
-      const s = this.properties, i = [...Ut(s), ...Rt(s)];
-      for (const r of i) this.createProperty(r, s[r]);
+      const s = this.properties, r = [...Pt(s), ...Ot(s)];
+      for (const i of r) this.createProperty(i, s[i]);
     }
     const t = this[Symbol.metadata];
     if (t !== null) {
       const s = litPropertyMetadata.get(t);
-      if (s !== void 0) for (const [i, r] of s) this.elementProperties.set(i, r);
+      if (s !== void 0) for (const [r, i] of s) this.elementProperties.set(r, i);
     }
     this._$Eh = /* @__PURE__ */ new Map();
-    for (const [s, i] of this.elementProperties) {
-      const r = this._$Eu(s, i);
-      r !== void 0 && this._$Eh.set(r, s);
+    for (const [s, r] of this.elementProperties) {
+      const i = this._$Eu(s, r);
+      i !== void 0 && this._$Eh.set(i, s);
     }
     this.elementStyles = this.finalizeStyles(this.styles);
   }
   static finalizeStyles(t) {
     const s = [];
     if (Array.isArray(t)) {
-      const i = new Set(t.flat(1 / 0).reverse());
-      for (const r of i) s.unshift(at(r));
+      const r = new Set(t.flat(1 / 0).reverse());
+      for (const i of r) s.unshift(at(i));
     } else t !== void 0 && s.push(at(t));
     return s;
   }
   static _$Eu(t, s) {
-    const i = s.attribute;
-    return i === !1 ? void 0 : typeof i == "string" ? i : typeof t == "string" ? t.toLowerCase() : void 0;
+    const r = s.attribute;
+    return r === !1 ? void 0 : typeof r == "string" ? r : typeof t == "string" ? t.toLowerCase() : void 0;
   }
   constructor() {
     super(), this._$Ep = void 0, this.isUpdatePending = !1, this.hasUpdated = !1, this._$Em = null, this._$Ev();
@@ -141,12 +141,12 @@ let U = class extends HTMLElement {
   }
   _$E_() {
     const t = /* @__PURE__ */ new Map(), s = this.constructor.elementProperties;
-    for (const i of s.keys()) this.hasOwnProperty(i) && (t.set(i, this[i]), delete this[i]);
+    for (const r of s.keys()) this.hasOwnProperty(r) && (t.set(r, this[r]), delete this[r]);
     t.size > 0 && (this._$Ep = t);
   }
   createRenderRoot() {
     const t = this.shadowRoot ?? this.attachShadow(this.constructor.shadowRootOptions);
-    return Tt(t, this.constructor.elementStyles), t;
+    return Et(t, this.constructor.elementStyles), t;
   }
   connectedCallback() {
     this.renderRoot ??= this.createRenderRoot(), this.enableUpdating(!0), this._$EO?.forEach(((t) => t.hostConnected?.()));
@@ -156,35 +156,35 @@ let U = class extends HTMLElement {
   disconnectedCallback() {
     this._$EO?.forEach(((t) => t.hostDisconnected?.()));
   }
-  attributeChangedCallback(t, s, i) {
-    this._$AK(t, i);
+  attributeChangedCallback(t, s, r) {
+    this._$AK(t, r);
   }
   _$ET(t, s) {
-    const i = this.constructor.elementProperties.get(t), r = this.constructor._$Eu(t, i);
-    if (r !== void 0 && i.reflect === !0) {
-      const o = (i.converter?.toAttribute !== void 0 ? i.converter : Y).toAttribute(s, i.type);
-      this._$Em = t, o == null ? this.removeAttribute(r) : this.setAttribute(r, o), this._$Em = null;
+    const r = this.constructor.elementProperties.get(t), i = this.constructor._$Eu(t, r);
+    if (i !== void 0 && r.reflect === !0) {
+      const o = (r.converter?.toAttribute !== void 0 ? r.converter : K).toAttribute(s, r.type);
+      this._$Em = t, o == null ? this.removeAttribute(i) : this.setAttribute(i, o), this._$Em = null;
     }
   }
   _$AK(t, s) {
-    const i = this.constructor, r = i._$Eh.get(t);
-    if (r !== void 0 && this._$Em !== r) {
-      const o = i.getPropertyOptions(r), a = typeof o.converter == "function" ? { fromAttribute: o.converter } : o.converter?.fromAttribute !== void 0 ? o.converter : Y;
-      this._$Em = r;
-      const c = a.fromAttribute(s, o.type);
-      this[r] = c ?? this._$Ej?.get(r) ?? c, this._$Em = null;
+    const r = this.constructor, i = r._$Eh.get(t);
+    if (i !== void 0 && this._$Em !== i) {
+      const o = r.getPropertyOptions(i), a = typeof o.converter == "function" ? { fromAttribute: o.converter } : o.converter?.fromAttribute !== void 0 ? o.converter : K;
+      this._$Em = i;
+      const p = a.fromAttribute(s, o.type);
+      this[i] = p ?? this._$Ej?.get(i) ?? p, this._$Em = null;
     }
   }
-  requestUpdate(t, s, i) {
+  requestUpdate(t, s, r) {
     if (t !== void 0) {
-      const r = this.constructor, o = this[t];
-      if (i ??= r.getPropertyOptions(t), !((i.hasChanged ?? X)(o, s) || i.useDefault && i.reflect && o === this._$Ej?.get(t) && !this.hasAttribute(r._$Eu(t, i)))) return;
-      this.C(t, s, i);
+      const i = this.constructor, o = this[t];
+      if (r ??= i.getPropertyOptions(t), !((r.hasChanged ?? X)(o, s) || r.useDefault && r.reflect && o === this._$Ej?.get(t) && !this.hasAttribute(i._$Eu(t, r)))) return;
+      this.C(t, s, r);
     }
     this.isUpdatePending === !1 && (this._$ES = this._$EP());
   }
-  C(t, s, { useDefault: i, reflect: r, wrapped: o }, a) {
-    i && !(this._$Ej ??= /* @__PURE__ */ new Map()).has(t) && (this._$Ej.set(t, a ?? s ?? this[t]), o !== !0 || a !== void 0) || (this._$AL.has(t) || (this.hasUpdated || i || (s = void 0), this._$AL.set(t, s)), r === !0 && this._$Em !== t && (this._$Eq ??= /* @__PURE__ */ new Set()).add(t));
+  C(t, s, { useDefault: r, reflect: i, wrapped: o }, a) {
+    r && !(this._$Ej ??= /* @__PURE__ */ new Map()).has(t) && (this._$Ej.set(t, a ?? s ?? this[t]), o !== !0 || a !== void 0) || (this._$AL.has(t) || (this.hasUpdated || r || (s = void 0), this._$AL.set(t, s)), i === !0 && this._$Em !== t && (this._$Eq ??= /* @__PURE__ */ new Set()).add(t));
   }
   async _$EP() {
     this.isUpdatePending = !0;
@@ -203,21 +203,21 @@ let U = class extends HTMLElement {
     if (!this.isUpdatePending) return;
     if (!this.hasUpdated) {
       if (this.renderRoot ??= this.createRenderRoot(), this._$Ep) {
-        for (const [r, o] of this._$Ep) this[r] = o;
+        for (const [i, o] of this._$Ep) this[i] = o;
         this._$Ep = void 0;
       }
-      const i = this.constructor.elementProperties;
-      if (i.size > 0) for (const [r, o] of i) {
-        const { wrapped: a } = o, c = this[r];
-        a !== !0 || this._$AL.has(r) || c === void 0 || this.C(r, void 0, o, c);
+      const r = this.constructor.elementProperties;
+      if (r.size > 0) for (const [i, o] of r) {
+        const { wrapped: a } = o, p = this[i];
+        a !== !0 || this._$AL.has(i) || p === void 0 || this.C(i, void 0, o, p);
       }
     }
     let t = !1;
     const s = this._$AL;
     try {
-      t = this.shouldUpdate(s), t ? (this.willUpdate(s), this._$EO?.forEach(((i) => i.hostUpdate?.())), this.update(s)) : this._$EM();
-    } catch (i) {
-      throw t = !1, this._$EM(), i;
+      t = this.shouldUpdate(s), t ? (this.willUpdate(s), this._$EO?.forEach(((r) => r.hostUpdate?.())), this.update(s)) : this._$EM();
+    } catch (r) {
+      throw t = !1, this._$EM(), r;
     }
     t && this._$AE(s);
   }
@@ -246,70 +246,70 @@ let U = class extends HTMLElement {
   firstUpdated(t) {
   }
 };
-U.elementStyles = [], U.shadowRootOptions = { mode: "open" }, U[M("elementProperties")] = /* @__PURE__ */ new Map(), U[M("finalized")] = /* @__PURE__ */ new Map(), Lt?.({ ReactiveElement: U }), (F.reactiveElementVersions ??= []).push("2.1.1");
-const tt = globalThis, K = tt.trustedTypes, ht = K ? K.createPolicy("lit-html", { createHTML: (e) => e }) : void 0, bt = "$lit$", C = `lit$${Math.random().toFixed(9).slice(2)}$`, vt = "?" + C, Mt = `<${vt}>`, D = document, j = () => D.createComment(""), q = (e) => e === null || typeof e != "object" && typeof e != "function", et = Array.isArray, Ht = (e) => et(e) || typeof e?.[Symbol.iterator] == "function", W = `[ 	
-\f\r]`, N = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, ct = /-->/g, dt = />/g, T = RegExp(`>|${W}(?:([^\\s"'>=/]+)(${W}*=${W}*(?:[^ 	
-\f\r"'\`<>=]|("|')|))|$)`, "g"), pt = /'/g, ut = /"/g, At = /^(?:script|style|textarea|title)$/i, jt = (e) => (t, ...s) => ({ _$litType$: e, strings: t, values: s }), f = jt(1), E = Symbol.for("lit-noChange"), g = Symbol.for("lit-nothing"), gt = /* @__PURE__ */ new WeakMap(), O = D.createTreeWalker(D, 129);
-function _t(e, t) {
+R.elementStyles = [], R.shadowRootOptions = { mode: "open" }, R[M("elementProperties")] = /* @__PURE__ */ new Map(), R[M("finalized")] = /* @__PURE__ */ new Map(), Dt?.({ ReactiveElement: R }), (W.reactiveElementVersions ??= []).push("2.1.1");
+const tt = globalThis, F = tt.trustedTypes, ht = F ? F.createPolicy("lit-html", { createHTML: (e) => e }) : void 0, bt = "$lit$", E = `lit$${Math.random().toFixed(9).slice(2)}$`, wt = "?" + E, It = `<${wt}>`, O = document, j = () => O.createComment(""), q = (e) => e === null || typeof e != "object" && typeof e != "function", et = Array.isArray, Nt = (e) => et(e) || typeof e?.[Symbol.iterator] == "function", G = `[ 	
+\f\r]`, N = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, ct = /-->/g, dt = />/g, C = RegExp(`>|${G}(?:([^\\s"'>=/]+)(${G}*=${G}*(?:[^ 	
+\f\r"'\`<>=]|("|')|))|$)`, "g"), pt = /'/g, ut = /"/g, vt = /^(?:script|style|textarea|title)$/i, Lt = (e) => (t, ...s) => ({ _$litType$: e, strings: t, values: s }), m = Lt(1), U = Symbol.for("lit-noChange"), g = Symbol.for("lit-nothing"), gt = /* @__PURE__ */ new WeakMap(), P = O.createTreeWalker(O, 129);
+function At(e, t) {
   if (!et(e) || !e.hasOwnProperty("raw")) throw Error("invalid template strings array");
   return ht !== void 0 ? ht.createHTML(t) : t;
 }
-const qt = (e, t) => {
-  const s = e.length - 1, i = [];
-  let r, o = t === 2 ? "<svg>" : t === 3 ? "<math>" : "", a = N;
-  for (let c = 0; c < s; c++) {
-    const n = e[c];
-    let h, d, l = -1, p = 0;
-    for (; p < n.length && (a.lastIndex = p, d = a.exec(n), d !== null); ) p = a.lastIndex, a === N ? d[1] === "!--" ? a = ct : d[1] !== void 0 ? a = dt : d[2] !== void 0 ? (At.test(d[2]) && (r = RegExp("</" + d[2], "g")), a = T) : d[3] !== void 0 && (a = T) : a === T ? d[0] === ">" ? (a = r ?? N, l = -1) : d[1] === void 0 ? l = -2 : (l = a.lastIndex - d[2].length, h = d[1], a = d[3] === void 0 ? T : d[3] === '"' ? ut : pt) : a === ut || a === pt ? a = T : a === ct || a === dt ? a = N : (a = T, r = void 0);
-    const u = a === T && e[c + 1].startsWith("/>") ? " " : "";
-    o += a === N ? n + Mt : l >= 0 ? (i.push(h), n.slice(0, l) + bt + n.slice(l) + C + u) : n + C + (l === -2 ? c : u);
-  }
-  return [_t(e, o + (e[s] || "<?>") + (t === 2 ? "</svg>" : t === 3 ? "</math>" : "")), i];
+const Mt = (e, t) => {
+  const s = e.length - 1, r = [];
+  let i, o = t === 2 ? "<svg>" : t === 3 ? "<math>" : "", a = N;
+  for (let p = 0; p < s; p++) {
+    const n = e[p];
+    let h, c, l = -1, d = 0;
+    for (; d < n.length && (a.lastIndex = d, c = a.exec(n), c !== null); ) d = a.lastIndex, a === N ? c[1] === "!--" ? a = ct : c[1] !== void 0 ? a = dt : c[2] !== void 0 ? (vt.test(c[2]) && (i = RegExp("</" + c[2], "g")), a = C) : c[3] !== void 0 && (a = C) : a === C ? c[0] === ">" ? (a = i ?? N, l = -1) : c[1] === void 0 ? l = -2 : (l = a.lastIndex - c[2].length, h = c[1], a = c[3] === void 0 ? C : c[3] === '"' ? ut : pt) : a === ut || a === pt ? a = C : a === ct || a === dt ? a = N : (a = C, i = void 0);
+    const u = a === C && e[p + 1].startsWith("/>") ? " " : "";
+    o += a === N ? n + It : l >= 0 ? (r.push(h), n.slice(0, l) + bt + n.slice(l) + E + u) : n + E + (l === -2 ? p : u);
+  }
+  return [At(e, o + (e[s] || "<?>") + (t === 2 ? "</svg>" : t === 3 ? "</math>" : "")), r];
 };
-class B {
-  constructor({ strings: t, _$litType$: s }, i) {
-    let r;
+class z {
+  constructor({ strings: t, _$litType$: s }, r) {
+    let i;
     this.parts = [];
     let o = 0, a = 0;
-    const c = t.length - 1, n = this.parts, [h, d] = qt(t, s);
-    if (this.el = B.createElement(h, i), O.currentNode = this.el.content, s === 2 || s === 3) {
+    const p = t.length - 1, n = this.parts, [h, c] = Mt(t, s);
+    if (this.el = z.createElement(h, r), P.currentNode = this.el.content, s === 2 || s === 3) {
       const l = this.el.content.firstChild;
       l.replaceWith(...l.childNodes);
     }
-    for (; (r = O.nextNode()) !== null && n.length < c; ) {
-      if (r.nodeType === 1) {
-        if (r.hasAttributes()) for (const l of r.getAttributeNames()) if (l.endsWith(bt)) {
-          const p = d[a++], u = r.getAttribute(l).split(C), $ = /([.?@])?(.*)/.exec(p);
-          n.push({ type: 1, index: o, name: $[2], strings: u, ctor: $[1] === "." ? zt : $[1] === "?" ? Yt : $[1] === "@" ? Kt : V }), r.removeAttribute(l);
-        } else l.startsWith(C) && (n.push({ type: 6, index: o }), r.removeAttribute(l));
-        if (At.test(r.tagName)) {
-          const l = r.textContent.split(C), p = l.length - 1;
-          if (p > 0) {
-            r.textContent = K ? K.emptyScript : "";
-            for (let u = 0; u < p; u++) r.append(l[u], j()), O.nextNode(), n.push({ type: 2, index: ++o });
-            r.append(l[p], j());
+    for (; (i = P.nextNode()) !== null && n.length < p; ) {
+      if (i.nodeType === 1) {
+        if (i.hasAttributes()) for (const l of i.getAttributeNames()) if (l.endsWith(bt)) {
+          const d = c[a++], u = i.getAttribute(l).split(E), f = /([.?@])?(.*)/.exec(d);
+          n.push({ type: 1, index: o, name: f[2], strings: u, ctor: f[1] === "." ? jt : f[1] === "?" ? qt : f[1] === "@" ? zt : V }), i.removeAttribute(l);
+        } else l.startsWith(E) && (n.push({ type: 6, index: o }), i.removeAttribute(l));
+        if (vt.test(i.tagName)) {
+          const l = i.textContent.split(E), d = l.length - 1;
+          if (d > 0) {
+            i.textContent = F ? F.emptyScript : "";
+            for (let u = 0; u < d; u++) i.append(l[u], j()), P.nextNode(), n.push({ type: 2, index: ++o });
+            i.append(l[d], j());
           }
         }
-      } else if (r.nodeType === 8) if (r.data === vt) n.push({ type: 2, index: o });
+      } else if (i.nodeType === 8) if (i.data === wt) n.push({ type: 2, index: o });
       else {
         let l = -1;
-        for (; (l = r.data.indexOf(C, l + 1)) !== -1; ) n.push({ type: 7, index: o }), l += C.length - 1;
+        for (; (l = i.data.indexOf(E, l + 1)) !== -1; ) n.push({ type: 7, index: o }), l += E.length - 1;
       }
       o++;
     }
   }
   static createElement(t, s) {
-    const i = D.createElement("template");
-    return i.innerHTML = t, i;
+    const r = O.createElement("template");
+    return r.innerHTML = t, r;
   }
 }
-function R(e, t, s = e, i) {
-  if (t === E) return t;
-  let r = i !== void 0 ? s._$Co?.[i] : s._$Cl;
+function D(e, t, s = e, r) {
+  if (t === U) return t;
+  let i = r !== void 0 ? s._$Co?.[r] : s._$Cl;
   const o = q(t) ? void 0 : t._$litDirective$;
-  return r?.constructor !== o && (r?._$AO?.(!1), o === void 0 ? r = void 0 : (r = new o(e), r._$AT(e, s, i)), i !== void 0 ? (s._$Co ??= [])[i] = r : s._$Cl = r), r !== void 0 && (t = R(e, r._$AS(e, t.values), r, i)), t;
+  return i?.constructor !== o && (i?._$AO?.(!1), o === void 0 ? i = void 0 : (i = new o(e), i._$AT(e, s, r)), r !== void 0 ? (s._$Co ??= [])[r] = i : s._$Cl = i), i !== void 0 && (t = D(e, i._$AS(e, t.values), i, r)), t;
 }
-let Bt = class {
+let Ht = class {
   constructor(t, s) {
     this._$AV = [], this._$AN = void 0, this._$AD = t, this._$AM = s;
   }
@@ -320,29 +320,29 @@ let Bt = class {
     return this._$AM._$AU;
   }
   u(t) {
-    const { el: { content: s }, parts: i } = this._$AD, r = (t?.creationScope ?? D).importNode(s, !0);
-    O.currentNode = r;
-    let o = O.nextNode(), a = 0, c = 0, n = i[0];
+    const { el: { content: s }, parts: r } = this._$AD, i = (t?.creationScope ?? O).importNode(s, !0);
+    P.currentNode = i;
+    let o = P.nextNode(), a = 0, p = 0, n = r[0];
     for (; n !== void 0; ) {
       if (a === n.index) {
         let h;
-        n.type === 2 ? h = new I(o, o.nextSibling, this, t) : n.type === 1 ? h = new n.ctor(o, n.name, n.strings, this, t) : n.type === 6 && (h = new Ft(o, this, t)), this._$AV.push(h), n = i[++c];
+        n.type === 2 ? h = new I(o, o.nextSibling, this, t) : n.type === 1 ? h = new n.ctor(o, n.name, n.strings, this, t) : n.type === 6 && (h = new Bt(o, this, t)), this._$AV.push(h), n = r[++p];
       }
-      a !== n?.index && (o = O.nextNode(), a++);
+      a !== n?.index && (o = P.nextNode(), a++);
     }
-    return O.currentNode = D, r;
+    return P.currentNode = O, i;
   }
   p(t) {
     let s = 0;
-    for (const i of this._$AV) i !== void 0 && (i.strings !== void 0 ? (i._$AI(t, i, s), s += i.strings.length - 2) : i._$AI(t[s])), s++;
+    for (const r of this._$AV) r !== void 0 && (r.strings !== void 0 ? (r._$AI(t, r, s), s += r.strings.length - 2) : r._$AI(t[s])), s++;
   }
 };
 class I {
   get _$AU() {
     return this._$AM?._$AU ?? this._$Cv;
   }
-  constructor(t, s, i, r) {
-    this.type = 2, this._$AH = g, this._$AN = void 0, this._$AA = t, this._$AB = s, this._$AM = i, this.options = r, this._$Cv = r?.isConnected ?? !0;
+  constructor(t, s, r, i) {
+    this.type = 2, this._$AH = g, this._$AN = void 0, this._$AA = t, this._$AB = s, this._$AM = r, this.options = i, this._$Cv = i?.isConnected ?? !0;
   }
   get parentNode() {
     let t = this._$AA.parentNode;
@@ -356,7 +356,7 @@ class I {
     return this._$AB;
   }
   _$AI(t, s = this) {
-    t = R(this, t, s), q(t) ? t === g || t == null || t === "" ? (this._$AH !== g && this._$AR(), this._$AH = g) : t !== this._$AH && t !== E && this._(t) : t._$litType$ !== void 0 ? this.$(t) : t.nodeType !== void 0 ? this.T(t) : Ht(t) ? this.k(t) : this._(t);
+    t = D(this, t, s), q(t) ? t === g || t == null || t === "" ? (this._$AH !== g && this._$AR(), this._$AH = g) : t !== this._$AH && t !== U && this._(t) : t._$litType$ !== void 0 ? this.$(t) : t.nodeType !== void 0 ? this.T(t) : Nt(t) ? this.k(t) : this._(t);
   }
   O(t) {
     return this._$AA.parentNode.insertBefore(t, this._$AB);
@@ -365,31 +365,31 @@ class I {
     this._$AH !== t && (this._$AR(), this._$AH = this.O(t));
   }
   _(t) {
-    this._$AH !== g && q(this._$AH) ? this._$AA.nextSibling.data = t : this.T(D.createTextNode(t)), this._$AH = t;
+    this._$AH !== g && q(this._$AH) ? this._$AA.nextSibling.data = t : this.T(O.createTextNode(t)), this._$AH = t;
   }
   $(t) {
-    const { values: s, _$litType$: i } = t, r = typeof i == "number" ? this._$AC(t) : (i.el === void 0 && (i.el = B.createElement(_t(i.h, i.h[0]), this.options)), i);
-    if (this._$AH?._$AD === r) this._$AH.p(s);
+    const { values: s, _$litType$: r } = t, i = typeof r == "number" ? this._$AC(t) : (r.el === void 0 && (r.el = z.createElement(At(r.h, r.h[0]), this.options)), r);
+    if (this._$AH?._$AD === i) this._$AH.p(s);
     else {
-      const o = new Bt(r, this), a = o.u(this.options);
+      const o = new Ht(i, this), a = o.u(this.options);
       o.p(s), this.T(a), this._$AH = o;
     }
   }
   _$AC(t) {
     let s = gt.get(t.strings);
-    return s === void 0 && gt.set(t.strings, s = new B(t)), s;
+    return s === void 0 && gt.set(t.strings, s = new z(t)), s;
   }
   k(t) {
     et(this._$AH) || (this._$AH = [], this._$AR());
     const s = this._$AH;
-    let i, r = 0;
-    for (const o of t) r === s.length ? s.push(i = new I(this.O(j()), this.O(j()), this, this.options)) : i = s[r], i._$AI(o), r++;
-    r < s.length && (this._$AR(i && i._$AB.nextSibling, r), s.length = r);
+    let r, i = 0;
+    for (const o of t) i === s.length ? s.push(r = new I(this.O(j()), this.O(j()), this, this.options)) : r = s[i], r._$AI(o), i++;
+    i < s.length && (this._$AR(r && r._$AB.nextSibling, i), s.length = i);
   }
   _$AR(t = this._$AA.nextSibling, s) {
     for (this._$AP?.(!1, !0, s); t !== this._$AB; ) {
-      const i = t.nextSibling;
-      t.remove(), t = i;
+      const r = t.nextSibling;
+      t.remove(), t = r;
     }
   }
   setConnected(t) {
@@ -403,25 +403,25 @@ class V {
   get _$AU() {
     return this._$AM._$AU;
   }
-  constructor(t, s, i, r, o) {
-    this.type = 1, this._$AH = g, this._$AN = void 0, this.element = t, this.name = s, this._$AM = r, this.options = o, i.length > 2 || i[0] !== "" || i[1] !== "" ? (this._$AH = Array(i.length - 1).fill(new String()), this.strings = i) : this._$AH = g;
+  constructor(t, s, r, i, o) {
+    this.type = 1, this._$AH = g, this._$AN = void 0, this.element = t, this.name = s, this._$AM = i, this.options = o, r.length > 2 || r[0] !== "" || r[1] !== "" ? (this._$AH = Array(r.length - 1).fill(new String()), this.strings = r) : this._$AH = g;
   }
-  _$AI(t, s = this, i, r) {
+  _$AI(t, s = this, r, i) {
     const o = this.strings;
     let a = !1;
-    if (o === void 0) t = R(this, t, s, 0), a = !q(t) || t !== this._$AH && t !== E, a && (this._$AH = t);
+    if (o === void 0) t = D(this, t, s, 0), a = !q(t) || t !== this._$AH && t !== U, a && (this._$AH = t);
     else {
-      const c = t;
+      const p = t;
       let n, h;
-      for (t = o[0], n = 0; n < o.length - 1; n++) h = R(this, c[i + n], s, n), h === E && (h = this._$AH[n]), a ||= !q(h) || h !== this._$AH[n], h === g ? t = g : t !== g && (t += (h ?? "") + o[n + 1]), this._$AH[n] = h;
+      for (t = o[0], n = 0; n < o.length - 1; n++) h = D(this, p[r + n], s, n), h === U && (h = this._$AH[n]), a ||= !q(h) || h !== this._$AH[n], h === g ? t = g : t !== g && (t += (h ?? "") + o[n + 1]), this._$AH[n] = h;
     }
-    a && !r && this.j(t);
+    a && !i && this.j(t);
   }
   j(t) {
     t === g ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, t ?? "");
   }
 }
-class zt extends V {
+class jt extends V {
   constructor() {
     super(...arguments), this.type = 3;
   }
@@ -429,7 +429,7 @@ class zt extends V {
     this.element[this.name] = t === g ? void 0 : t;
   }
 }
-class Yt extends V {
+class qt extends V {
   constructor() {
     super(...arguments), this.type = 4;
   }
@@ -437,43 +437,43 @@ class Yt extends V {
     this.element.toggleAttribute(this.name, !!t && t !== g);
   }
 }
-class Kt extends V {
-  constructor(t, s, i, r, o) {
-    super(t, s, i, r, o), this.type = 5;
+class zt extends V {
+  constructor(t, s, r, i, o) {
+    super(t, s, r, i, o), this.type = 5;
   }
   _$AI(t, s = this) {
-    if ((t = R(this, t, s, 0) ?? g) === E) return;
-    const i = this._$AH, r = t === g && i !== g || t.capture !== i.capture || t.once !== i.once || t.passive !== i.passive, o = t !== g && (i === g || r);
-    r && this.element.removeEventListener(this.name, this, i), o && this.element.addEventListener(this.name, this, t), this._$AH = t;
+    if ((t = D(this, t, s, 0) ?? g) === U) return;
+    const r = this._$AH, i = t === g && r !== g || t.capture !== r.capture || t.once !== r.once || t.passive !== r.passive, o = t !== g && (r === g || i);
+    i && this.element.removeEventListener(this.name, this, r), o && this.element.addEventListener(this.name, this, t), this._$AH = t;
   }
   handleEvent(t) {
     typeof this._$AH == "function" ? this._$AH.call(this.options?.host ?? this.element, t) : this._$AH.handleEvent(t);
   }
 }
-class Ft {
-  constructor(t, s, i) {
-    this.element = t, this.type = 6, this._$AN = void 0, this._$AM = s, this.options = i;
+class Bt {
+  constructor(t, s, r) {
+    this.element = t, this.type = 6, this._$AN = void 0, this._$AM = s, this.options = r;
   }
   get _$AU() {
     return this._$AM._$AU;
   }
   _$AI(t) {
-    R(this, t);
+    D(this, t);
   }
 }
-const Vt = { I }, Wt = tt.litHtmlPolyfillSupport;
-Wt?.(B, I), (tt.litHtmlVersions ??= []).push("3.3.1");
-const Gt = (e, t, s) => {
-  const i = s?.renderBefore ?? t;
-  let r = i._$litPart$;
-  if (r === void 0) {
+const Kt = { I }, Ft = tt.litHtmlPolyfillSupport;
+Ft?.(z, I), (tt.litHtmlVersions ??= []).push("3.3.1");
+const Wt = (e, t, s) => {
+  const r = s?.renderBefore ?? t;
+  let i = r._$litPart$;
+  if (i === void 0) {
     const o = s?.renderBefore ?? null;
-    i._$litPart$ = r = new I(t.insertBefore(j(), o), o, void 0, s ?? {});
+    r._$litPart$ = i = new I(t.insertBefore(j(), o), o, void 0, s ?? {});
   }
-  return r._$AI(e), r;
+  return i._$AI(e), i;
 };
 const st = globalThis;
-let H = class extends U {
+let H = class extends R {
   constructor() {
     super(...arguments), this.renderOptions = { host: this }, this._$Do = void 0;
   }
@@ -483,7 +483,7 @@ let H = class extends U {
   }
   update(t) {
     const s = this.render();
-    this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(t), this._$Do = Gt(s, this.renderRoot, this.renderOptions);
+    this.hasUpdated || (this.renderOptions.isConnected = this.isConnected), super.update(t), this._$Do = Wt(s, this.renderRoot, this.renderOptions);
   }
   connectedCallback() {
     super.connectedCallback(), this._$Do?.setConnected(!0);
@@ -492,66 +492,66 @@ let H = class extends U {
     super.disconnectedCallback(), this._$Do?.setConnected(!1);
   }
   render() {
-    return E;
+    return U;
   }
 };
 H._$litElement$ = !0, H.finalized = !0, st.litElementHydrateSupport?.({ LitElement: H });
-const Jt = st.litElementPolyfillSupport;
-Jt?.({ LitElement: H });
+const Vt = st.litElementPolyfillSupport;
+Vt?.({ LitElement: H });
 (st.litElementVersions ??= []).push("4.2.1");
-const Zt = (e) => (t, s) => {
+const Gt = (e) => (t, s) => {
   s !== void 0 ? s.addInitializer((() => {
     customElements.define(e, t);
   })) : customElements.define(e, t);
 };
-const Qt = { attribute: !0, type: String, converter: Y, reflect: !1, hasChanged: X }, Xt = (e = Qt, t, s) => {
-  const { kind: i, metadata: r } = s;
-  let o = globalThis.litPropertyMetadata.get(r);
-  if (o === void 0 && globalThis.litPropertyMetadata.set(r, o = /* @__PURE__ */ new Map()), i === "setter" && ((e = Object.create(e)).wrapped = !0), o.set(s.name, e), i === "accessor") {
+const Jt = { attribute: !0, type: String, converter: K, reflect: !1, hasChanged: X }, Yt = (e = Jt, t, s) => {
+  const { kind: r, metadata: i } = s;
+  let o = globalThis.litPropertyMetadata.get(i);
+  if (o === void 0 && globalThis.litPropertyMetadata.set(i, o = /* @__PURE__ */ new Map()), r === "setter" && ((e = Object.create(e)).wrapped = !0), o.set(s.name, e), r === "accessor") {
     const { name: a } = s;
-    return { set(c) {
+    return { set(p) {
       const n = t.get.call(this);
-      t.set.call(this, c), this.requestUpdate(a, n, e);
-    }, init(c) {
-      return c !== void 0 && this.C(a, void 0, e, c), c;
+      t.set.call(this, p), this.requestUpdate(a, n, e);
+    }, init(p) {
+      return p !== void 0 && this.C(a, void 0, e, p), p;
     } };
   }
-  if (i === "setter") {
+  if (r === "setter") {
     const { name: a } = s;
-    return function(c) {
+    return function(p) {
       const n = this[a];
-      t.call(this, c), this.requestUpdate(a, n, e);
+      t.call(this, p), this.requestUpdate(a, n, e);
     };
   }
-  throw Error("Unsupported decorator location: " + i);
+  throw Error("Unsupported decorator location: " + r);
 };
 function S(e) {
-  return (t, s) => typeof s == "object" ? Xt(e, t, s) : ((i, r, o) => {
-    const a = r.hasOwnProperty(o);
-    return r.constructor.createProperty(o, i), a ? Object.getOwnPropertyDescriptor(r, o) : void 0;
+  return (t, s) => typeof s == "object" ? Yt(e, t, s) : ((r, i, o) => {
+    const a = i.hasOwnProperty(o);
+    return i.constructor.createProperty(o, r), a ? Object.getOwnPropertyDescriptor(i, o) : void 0;
   })(e, t, s);
 }
-function b(e) {
+function v(e) {
   return S({ ...e, state: !0, attribute: !1 });
 }
-const te = (e, t, s) => (s.configurable = !0, s.enumerable = !0, Reflect.decorate && typeof t != "object" && Object.defineProperty(e, t, s), s);
-function it(e, t) {
-  return (s, i, r) => {
+const Zt = (e, t, s) => (s.configurable = !0, s.enumerable = !0, Reflect.decorate && typeof t != "object" && Object.defineProperty(e, t, s), s);
+function Qt(e, t) {
+  return (s, r, i) => {
     const o = (a) => a.renderRoot?.querySelector(e) ?? null;
-    return te(s, i, { get() {
+    return Zt(s, r, { get() {
       return o(this);
     } });
   };
 }
-const St = { ATTRIBUTE: 1, CHILD: 2 }, kt = (e) => (...t) => ({ _$litDirective$: e, values: t });
-class Ct {
+const Xt = { CHILD: 2 }, te = (e) => (...t) => ({ _$litDirective$: e, values: t });
+class ee {
   constructor(t) {
   }
   get _$AU() {
     return this._$AM._$AU;
   }
-  _$AT(t, s, i) {
-    this._$Ct = t, this._$AM = s, this._$Ci = i;
+  _$AT(t, s, r) {
+    this._$Ct = t, this._$AM = s, this._$Ci = r;
   }
   _$AS(t, s) {
     return this.update(t, s);
@@ -560,101 +560,117 @@ class Ct {
     return this.render(...s);
   }
 }
-const mt = kt(class extends Ct {
-  constructor(e) {
-    if (super(e), e.type !== St.ATTRIBUTE || e.name !== "class" || e.strings?.length > 2) throw Error("`classMap()` can only be used in the `class` attribute and must be the only part in the attribute.");
-  }
-  render(e) {
-    return " " + Object.keys(e).filter(((t) => e[t])).join(" ") + " ";
-  }
-  update(e, [t]) {
-    if (this.st === void 0) {
-      this.st = /* @__PURE__ */ new Set(), e.strings !== void 0 && (this.nt = new Set(e.strings.join(" ").split(/\s/).filter(((i) => i !== ""))));
-      for (const i in t) t[i] && !this.nt?.has(i) && this.st.add(i);
-      return this.render(t);
-    }
-    const s = e.element.classList;
-    for (const i of this.st) i in t || (s.remove(i), this.st.delete(i));
-    for (const i in t) {
-      const r = !!t[i];
-      r === this.st.has(i) || this.nt?.has(i) || (r ? (s.add(i), this.st.add(i)) : (s.remove(i), this.st.delete(i)));
-    }
-    return E;
-  }
-});
-const { I: ee } = Vt, ft = () => document.createComment(""), L = (e, t, s) => {
-  const i = e._$AA.parentNode, r = t === void 0 ? e._$AB : t._$AA;
+const { I: se } = Kt, mt = () => document.createComment(""), L = (e, t, s) => {
+  const r = e._$AA.parentNode, i = t === void 0 ? e._$AB : t._$AA;
   if (s === void 0) {
-    const o = i.insertBefore(ft(), r), a = i.insertBefore(ft(), r);
-    s = new ee(o, a, e, e.options);
+    const o = r.insertBefore(mt(), i), a = r.insertBefore(mt(), i);
+    s = new se(o, a, e, e.options);
   } else {
-    const o = s._$AB.nextSibling, a = s._$AM, c = a !== e;
-    if (c) {
+    const o = s._$AB.nextSibling, a = s._$AM, p = a !== e;
+    if (p) {
       let n;
       s._$AQ?.(e), s._$AM = e, s._$AP !== void 0 && (n = e._$AU) !== a._$AU && s._$AP(n);
     }
-    if (o !== r || c) {
+    if (o !== i || p) {
       let n = s._$AA;
       for (; n !== o; ) {
         const h = n.nextSibling;
-        i.insertBefore(n, r), n = h;
+        r.insertBefore(n, i), n = h;
       }
     }
   }
   return s;
-}, P = (e, t, s = e) => (e._$AI(t, s), e), se = {}, ie = (e, t = se) => e._$AH = t, re = (e) => e._$AH, G = (e) => {
+}, T = (e, t, s = e) => (e._$AI(t, s), e), ie = {}, re = (e, t = ie) => e._$AH = t, oe = (e) => e._$AH, J = (e) => {
   e._$AR(), e._$AA.remove();
 };
-const yt = (e, t, s) => {
-  const i = /* @__PURE__ */ new Map();
-  for (let r = t; r <= s; r++) i.set(e[r], r);
-  return i;
-}, $t = kt(class extends Ct {
+const ft = (e, t, s) => {
+  const r = /* @__PURE__ */ new Map();
+  for (let i = t; i <= s; i++) r.set(e[i], i);
+  return r;
+}, yt = te(class extends ee {
   constructor(e) {
-    if (super(e), e.type !== St.CHILD) throw Error("repeat() can only be used in text expressions");
+    if (super(e), e.type !== Xt.CHILD) throw Error("repeat() can only be used in text expressions");
   }
   dt(e, t, s) {
-    let i;
-    s === void 0 ? s = t : t !== void 0 && (i = t);
-    const r = [], o = [];
+    let r;
+    s === void 0 ? s = t : t !== void 0 && (r = t);
+    const i = [], o = [];
     let a = 0;
-    for (const c of e) r[a] = i ? i(c, a) : a, o[a] = s(c, a), a++;
-    return { values: o, keys: r };
+    for (const p of e) i[a] = r ? r(p, a) : a, o[a] = s(p, a), a++;
+    return { values: o, keys: i };
   }
   render(e, t, s) {
     return this.dt(e, t, s).values;
   }
-  update(e, [t, s, i]) {
-    const r = re(e), { values: o, keys: a } = this.dt(t, s, i);
-    if (!Array.isArray(r)) return this.ut = a, o;
-    const c = this.ut ??= [], n = [];
-    let h, d, l = 0, p = r.length - 1, u = 0, $ = o.length - 1;
-    for (; l <= p && u <= $; ) if (r[l] === null) l++;
-    else if (r[p] === null) p--;
-    else if (c[l] === a[u]) n[u] = P(r[l], o[u]), l++, u++;
-    else if (c[p] === a[$]) n[$] = P(r[p], o[$]), p--, $--;
-    else if (c[l] === a[$]) n[$] = P(r[l], o[$]), L(e, n[$ + 1], r[l]), l++, $--;
-    else if (c[p] === a[u]) n[u] = P(r[p], o[u]), L(e, r[l], r[p]), p--, u++;
-    else if (h === void 0 && (h = yt(a, u, $), d = yt(c, l, p)), h.has(c[l])) if (h.has(c[p])) {
-      const v = d.get(a[u]), A = v !== void 0 ? r[v] : null;
+  update(e, [t, s, r]) {
+    const i = oe(e), { values: o, keys: a } = this.dt(t, s, r);
+    if (!Array.isArray(i)) return this.ut = a, o;
+    const p = this.ut ??= [], n = [];
+    let h, c, l = 0, d = i.length - 1, u = 0, f = o.length - 1;
+    for (; l <= d && u <= f; ) if (i[l] === null) l++;
+    else if (i[d] === null) d--;
+    else if (p[l] === a[u]) n[u] = T(i[l], o[u]), l++, u++;
+    else if (p[d] === a[f]) n[f] = T(i[d], o[f]), d--, f--;
+    else if (p[l] === a[f]) n[f] = T(i[l], o[f]), L(e, n[f + 1], i[l]), l++, f--;
+    else if (p[d] === a[u]) n[u] = T(i[d], o[u]), L(e, i[l], i[d]), d--, u++;
+    else if (h === void 0 && (h = ft(a, u, f), c = ft(p, l, d)), h.has(p[l])) if (h.has(p[d])) {
+      const w = c.get(a[u]), A = w !== void 0 ? i[w] : null;
       if (A === null) {
-        const w = L(e, r[l]);
-        P(w, o[u]), n[u] = w;
-      } else n[u] = P(A, o[u]), L(e, r[l], A), r[v] = null;
+        const b = L(e, i[l]);
+        T(b, o[u]), n[u] = b;
+      } else n[u] = T(A, o[u]), L(e, i[l], A), i[w] = null;
       u++;
-    } else G(r[p]), p--;
-    else G(r[l]), l++;
-    for (; u <= $; ) {
-      const v = L(e, n[$ + 1]);
-      P(v, o[u]), n[u++] = v;
+    } else J(i[d]), d--;
+    else J(i[l]), l++;
+    for (; u <= f; ) {
+      const w = L(e, n[f + 1]);
+      T(w, o[u]), n[u++] = w;
     }
-    for (; l <= p; ) {
-      const v = r[l++];
-      v !== null && G(v);
+    for (; l <= d; ) {
+      const w = i[l++];
+      w !== null && J(w);
     }
-    return this.ut = a, ie(e, n), E;
+    return this.ut = a, re(e, n), U;
+  }
+});
+var ae = Object.defineProperty, _t = (e, t, s, r) => {
+  for (var i = void 0, o = e.length - 1, a; o >= 0; o--)
+    (a = e[o]) && (i = a(t, s, i) || i);
+  return i && ae(t, s, i), i;
+};
+class it extends H {
+  constructor() {
+    super(...arguments), this.theme = "light", this.storageKey = "theme-preference", this.boundThemeChangeHandler = this.handleGlobalThemeChange.bind(this);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    const t = document.documentElement.getAttribute("data-theme"), s = localStorage.getItem(this.storageKey), r = window.matchMedia("(prefers-color-scheme: dark)").matches;
+    t ? this.theme = t : s ? (this.theme = s, this.applyTheme()) : r ? (this.theme = "dark", this.applyTheme()) : this.applyTheme(), window.addEventListener("theme-changed", this.boundThemeChangeHandler);
+  }
+  disconnectedCallback() {
+    window.removeEventListener("theme-changed", this.boundThemeChangeHandler), super.disconnectedCallback();
+  }
+  handleGlobalThemeChange(t) {
+    const s = t;
+    s.target !== this && s.detail.theme !== this.theme && (this.theme = s.detail.theme);
+  }
+  applyTheme() {
+    document.documentElement.setAttribute("data-theme", this.theme), localStorage.setItem(this.storageKey, this.theme), this.dispatchEvent(
+      new CustomEvent("theme-changed", {
+        detail: { theme: this.theme },
+        bubbles: !0,
+        composed: !0
+      })
+    );
   }
-}), oe = ({
+}
+_t([
+  S({ type: String, attribute: "data-theme", reflect: !0 })
+], it.prototype, "theme");
+_t([
+  S({ type: String, attribute: "storage-key" })
+], it.prototype, "storageKey");
+const ne = ({
   baseUrl: e
 }) => {
   const t = {
@@ -669,36 +685,36 @@ const yt = (e, t, s) => {
   return {
     login: async ({
       email: h,
-      password: d,
+      password: c,
       accessToken: l,
-      refreshToken: p,
+      refreshToken: d,
       idToken: u
     }) => {
-      const $ = await fetch(`${e}${t.login}`, {
+      const f = await fetch(`${e}${t.login}`, {
         method: "POST",
         headers: {
           "Content-Type": "application/json"
         },
         body: JSON.stringify({
           email: h,
-          password: d,
+          password: c,
           accessToken: l,
-          refreshToken: p,
+          refreshToken: d,
           idToken: u
         })
       });
-      if (!$.ok) {
-        const v = await $.json();
-        throw new Error(v.message || v.error || "Login failed");
+      if (!f.ok) {
+        const w = await f.json();
+        throw new Error(w.message || w.error || "Login failed");
       }
-      return $.json();
+      return f.json();
     },
     logout: async ({
       accessToken: h,
-      refreshToken: d,
+      refreshToken: c,
       authToken: l
     }) => {
-      const p = await fetch(`${e}${t.logout}`, {
+      const d = await fetch(`${e}${t.logout}`, {
         method: "POST",
         headers: {
           "Content-Type": "application/json",
@@ -706,17 +722,17 @@ const yt = (e, t, s) => {
         },
         body: JSON.stringify({
           accessToken: h,
-          refreshToken: d
+          refreshToken: c
         })
       });
-      if (!p.ok) {
-        const u = await p.json();
+      if (!d.ok) {
+        const u = await d.json();
         throw new Error(u.message || u.error || "Logout failed");
       }
-      return p.json();
+      return d.json();
     },
     refresh: async ({ refreshToken: h }) => {
-      const d = await fetch(`${e}${t.refresh}`, {
+      const c = await fetch(`${e}${t.refresh}`, {
         method: "POST",
         headers: {
           "Content-Type": "application/json"
@@ -725,14 +741,14 @@ const yt = (e, t, s) => {
           refreshToken: h
         })
       });
-      if (!d.ok) {
-        const l = await d.json();
+      if (!c.ok) {
+        const l = await c.json();
         throw new Error(l.message || l.error || "Failed to refresh token");
       }
-      return d.json();
+      return c.json();
     },
     requestRegisterOtp: async ({ email: h }) => {
-      const d = await fetch(`${e}${t.requestRegisterOtp}`, {
+      const c = await fetch(`${e}${t.requestRegisterOtp}`, {
         method: "POST",
         headers: {
           "Content-Type": "application/json"
@@ -741,42 +757,42 @@ const yt = (e, t, s) => {
           email: h
         })
       });
-      if (!d.ok) {
-        const l = await d.json();
+      if (!c.ok) {
+        const l = await c.json();
         throw new Error(l.message || l.error || "Failed to request OTP");
       }
-      return d.json();
+      return c.json();
     },
     register: async ({
       email: h,
-      password: d,
+      password: c,
       phone_number: l,
-      family_name: p,
+      family_name: d,
       given_name: u,
-      code: $
+      code: f
     }) => {
-      const v = await fetch(`${e}${t.register}`, {
+      const w = await fetch(`${e}${t.register}`, {
         method: "POST",
         headers: {
           "Content-Type": "application/json"
         },
         body: JSON.stringify({
           email: h,
-          password: d,
+          password: c,
           phone_number: l,
-          family_name: p,
+          family_name: d,
           given_name: u,
-          code: $
+          code: f
         })
       });
-      if (!v.ok) {
-        const A = await v.json();
+      if (!w.ok) {
+        const A = await w.json();
         throw new Error(A.message || A.error || "Registration failed");
       }
-      return v.json();
+      return w.json();
     },
     requestResetPassword: async ({ email: h }) => {
-      const d = await fetch(`${e}${t.requestResetPassword}`, {
+      const c = await fetch(`${e}${t.requestResetPassword}`, {
         method: "POST",
         headers: {
           "Content-Type": "application/json"
@@ -785,64 +801,64 @@ const yt = (e, t, s) => {
           email: h
         })
       });
-      if (!d.ok) {
-        const l = await d.json();
+      if (!c.ok) {
+        const l = await c.json();
         throw new Error(l.message || l.error || "Failed to request password reset");
       }
-      return d.json();
+      return c.json();
     },
     resetPassword: async ({
       email: h,
-      otp: d,
+      otp: c,
       newPassword: l
     }) => {
-      const p = await fetch(`${e}${t.resetPassword}`, {
+      const d = await fetch(`${e}${t.resetPassword}`, {
         method: "POST",
         headers: {
           "Content-Type": "application/json"
         },
         body: JSON.stringify({
           email: h,
-          otp: d,
+          otp: c,
           newPassword: l
         })
       });
-      if (!p.ok) {
-        const u = await p.json();
+      if (!d.ok) {
+        const u = await d.json();
         throw new Error(u.message || u.error || "Failed to reset password");
       }
-      return p.json();
+      return d.json();
     }
   };
-}, J = {
+}, Y = {
   AUTH_TOKEN: "authToken",
   ACCESS_TOKEN: "accessToken",
   REFRESH_TOKEN: "refreshToken"
-}, ae = {
+}, le = {
   maxAge: 3600 * 24 * 7,
   // 7 days
   secure: !0,
   sameSite: "lax",
   path: "/"
-}, ne = () => {
-  const e = (n, h, d = {}) => {
+}, he = () => {
+  const e = (n, h, c = {}) => {
     const {
       maxAge: l,
-      path: p = "/",
+      path: d = "/",
       secure: u = window.location.protocol === "https:",
-      sameSite: $ = "lax",
-      domain: v
-    } = d;
+      sameSite: f = "lax",
+      domain: w
+    } = c;
     let A = `${encodeURIComponent(n)}=${encodeURIComponent(h)}`;
-    l !== void 0 && (A += `; Max-Age=${l}`), A += `; Path=${p}`, u && (A += "; Secure"), A += `; SameSite=${$}`, v && (A += `; Domain=${v}`), document.cookie = A;
+    l !== void 0 && (A += `; Max-Age=${l}`), A += `; Path=${d}`, u && (A += "; Secure"), A += `; SameSite=${f}`, w && (A += `; Domain=${w}`), document.cookie = A;
   }, t = (n) => {
-    const h = encodeURIComponent(n) + "=", d = document.cookie.split(";");
-    for (let l = 0; l < d.length; l++) {
-      let p = d[l];
-      for (; p.charAt(0) === " "; )
-        p = p.substring(1);
-      if (p.indexOf(h) === 0)
-        return decodeURIComponent(p.substring(h.length));
+    const h = encodeURIComponent(n) + "=", c = document.cookie.split(";");
+    for (let l = 0; l < c.length; l++) {
+      let d = c[l];
+      for (; d.charAt(0) === " "; )
+        d = d.substring(1);
+      if (d.indexOf(h) === 0)
+        return decodeURIComponent(d.substring(h.length));
     }
     return null;
   }, s = (n, h = {}) => {
@@ -850,52 +866,52 @@ const yt = (e, t, s) => {
       ...h,
       maxAge: -1
     });
-  }, i = (n) => t(n) !== null, r = (n, h) => {
-    e(J[n], h, ae);
-  }, o = (n) => t(J[n]), a = (n) => {
-    s(J[n]);
+  }, r = (n) => t(n) !== null, i = (n, h) => {
+    e(Y[n], h, le);
+  }, o = (n) => t(Y[n]), a = (n) => {
+    s(Y[n]);
   };
   return {
     setCookie: e,
     getCookie: t,
     removeCookie: s,
-    hasCookie: i,
-    setAuthToken: r,
+    hasCookie: r,
+    setAuthToken: i,
     getAuthToken: o,
     removeAuthToken: a,
     clearAllAuthTokens: () => {
       a("AUTH_TOKEN"), a("ACCESS_TOKEN"), a("REFRESH_TOKEN");
     }
   };
-}, le = ["code", "state", "error", "error_description"], he = (e) => {
+}, ce = ["code", "state", "error", "error_description"], de = (e) => {
   if (e) return e;
   const t = new URL(window.location.href);
-  return le.forEach((s) => t.searchParams.delete(s)), t.toString();
-}, ce = ({
+  return ce.forEach((s) => t.searchParams.delete(s)), t.toString();
+}, pe = ({
   domain: e,
   cognitoRegion: t,
   userPoolId: s,
-  clientId: i,
-  redirectUri: r
+  clientId: r,
+  redirectUri: i
 }) => {
   const o = {
     domain: e,
-    clientId: i,
-    redirectUri: he(r)
-  }, a = (w) => {
-    const _ = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-._~", k = new Uint8Array(w);
+    clientId: r,
+    redirectUri: de(i)
+  }, a = (b) => {
+    const _ = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-._~", k = new Uint8Array(b);
     return crypto.getRandomValues(k), Array.from(k).map((x) => _[x % _.length]).join("");
-  }, c = async (w) => {
-    const k = new TextEncoder().encode(w), x = await crypto.subtle.digest("SHA-256", k);
+  }, p = async (b) => {
+    const k = new TextEncoder().encode(b), x = await crypto.subtle.digest("SHA-256", k);
     return btoa(String.fromCharCode(...new Uint8Array(x))).replace(/\+/g, "-").replace(/\//g, "_").replace(/=/g, "");
   }, n = async () => {
-    const w = a(128), _ = await c(w);
-    return sessionStorage.setItem("pkce_code_verifier", w), { codeVerifier: w, codeChallenge: _ };
+    const b = a(128), _ = await p(b);
+    return sessionStorage.setItem("pkce_code_verifier", b), { codeVerifier: b, codeChallenge: _ };
   }, h = () => {
-    const w = a(32);
-    return sessionStorage.setItem("oauth_state", w), w;
-  }, d = async () => {
-    const { codeChallenge: w } = await n(), _ = h(), k = new URLSearchParams({
+    const b = a(32);
+    return sessionStorage.setItem("oauth_state", b), b;
+  }, c = async () => {
+    const { codeChallenge: b } = await n(), _ = h(), k = new URLSearchParams({
       response_type: "code",
       client_id: o.clientId,
       redirect_uri: o.redirectUri,
@@ -903,15 +919,15 @@ const yt = (e, t, s) => {
       scope: "openid email profile",
       state: _,
       code_challenge_method: "S256",
-      code_challenge: w,
+      code_challenge: b,
       prompt: "select_account"
     });
     return `${o.domain}/oauth2/authorize?${k.toString()}`;
   }, l = async () => {
-    const w = await d();
-    window.location.href = w;
-  }, p = async () => {
-    const { codeChallenge: w } = await n(), _ = h(), k = new URLSearchParams({
+    const b = await c();
+    window.location.href = b;
+  }, d = async () => {
+    const { codeChallenge: b } = await n(), _ = h(), k = new URLSearchParams({
       response_type: "code",
       client_id: o.clientId,
       redirect_uri: o.redirectUri,
@@ -919,32 +935,32 @@ const yt = (e, t, s) => {
       scope: "openid email profile",
       state: _,
       code_challenge_method: "S256",
-      code_challenge: w
+      code_challenge: b
     });
     return `${o.domain}/oauth2/authorize?${k.toString()}`;
   }, u = async () => {
-    const w = await p();
-    window.location.href = w;
-  }, $ = (w) => {
+    const b = await d();
+    window.location.href = b;
+  }, f = (b) => {
     const _ = sessionStorage.getItem("oauth_state");
-    return sessionStorage.removeItem("oauth_state"), _ === w;
-  }, v = () => {
-    const w = sessionStorage.getItem("pkce_code_verifier");
-    return sessionStorage.removeItem("pkce_code_verifier"), w;
+    return sessionStorage.removeItem("oauth_state"), _ === b;
+  }, w = () => {
+    const b = sessionStorage.getItem("pkce_code_verifier");
+    return sessionStorage.removeItem("pkce_code_verifier"), b;
   };
   return {
     redirectToGoogleAuth: l,
     redirectToAppleAuth: u,
-    validateState: $,
-    getCodeVerifier: v,
-    exchangeCodeForTokens: async (w) => {
-      const _ = v();
+    validateState: f,
+    getCodeVerifier: w,
+    exchangeCodeForTokens: async (b) => {
+      const _ = w();
       if (!_)
         throw new Error("PKCE code verifier not found. Please restart the authentication flow.");
       const k = new URLSearchParams({
         grant_type: "authorization_code",
         client_id: o.clientId,
-        code: w,
+        code: b,
         redirect_uri: o.redirectUri,
         code_verifier: _
       }), x = await fetch(`${o.domain}/oauth2/token`, {
@@ -961,7 +977,7 @@ const yt = (e, t, s) => {
       return x.json();
     }
   };
-}, de = () => xt`
+}, ue = () => kt`
     :host {
       display: inline-block;
       font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
@@ -1461,12 +1477,12 @@ const yt = (e, t, s) => {
         transition: none !important;
       }
     }`;
-var pe = Object.defineProperty, ue = Object.getOwnPropertyDescriptor, y = (e, t, s, i) => {
-  for (var r = i > 1 ? void 0 : i ? ue(t, s) : t, o = e.length - 1, a; o >= 0; o--)
-    (a = e[o]) && (r = (i ? a(t, s, r) : a(r)) || r);
-  return i && r && pe(t, s, r), r;
+var ge = Object.defineProperty, me = Object.getOwnPropertyDescriptor, $ = (e, t, s, r) => {
+  for (var i = r > 1 ? void 0 : r ? me(t, s) : t, o = e.length - 1, a; o >= 0; o--)
+    (a = e[o]) && (i = (r ? a(t, s, i) : a(i)) || i);
+  return r && i && ge(t, s, i), i;
 };
-const ge = [
+const fe = [
   "code",
   "state",
   "error",
@@ -1477,45 +1493,9 @@ const ge = [
   "token_type",
   "expires_in"
 ];
-let m = class extends H {
+let y = class extends it {
   constructor() {
-    super(...arguments), this.open = !1, this.initialMode = "signin", this.logoUrl = "", this.baseUrl = "", this.oauthDomain = "", this.oauthRegion = "", this.oauthUserPoolId = "", this.oauthClientId = "", this.oauthRedirectUri = "", this.oauthSpaDomain = "", this.size = "sm", this.theme = "light", this.disableSignup = !1, this.mode = "signin", this.resetStep = "none", this.signupStep = "form", this.isLoading = !1, this.isClosing = !1, this.isVisible = !1, this.isLoggedIn = !1, this.email = "", this.password = "", this.givenName = "", this.familyName = "", this.newPassword = "", this.confirmPassword = "", this.notice = "", this.error = "", this.errors = {}, this.otpDigits = ["", "", "", "", "", ""], this.signupOtpDigits = ["", "", "", "", "", ""], this.isDragging = !1, this.dragStartY = 0, this.dragCurrentY = 0, this.dragStartTime = 0, this.lastDragEndTime = 0, this.cookies = ne(), this.scrollPosition = 0, this.transitionDuration = 300, this.hasHandledOAuthCallback = !1, this.boundKeyHandler = (e) => {
-      e.key === "Escape" && this.isVisible && this.handleClose();
-    }, this.baseUrlErrorMessage = "Authentication service is not configured correctly. Please add an API domain or contact support.", this.handleClose = () => {
-      this.isClosing || !this.isVisible || (this.cleanupInlineStyles(), this.isDragging = !1, this.dragStartY = 0, this.dragCurrentY = 0, this.dragStartTime = 0, this.isClosing = !0, setTimeout(() => {
-        this.isClosing = !1, this.isVisible = !1, this.open = !1;
-      }, this.transitionDuration));
-    }, this.handleOverlayClick = () => {
-      this.handleClose();
-    }, this.handleDragStart = (e) => {
-      if (!this.modalContainer || this.modalBody && this.modalBody.scrollTop > 0)
-        return;
-      const t = e.target;
-      !(t.classList.contains("drawer-handle") || t.classList.contains("drawer-handle-bar") || t.closest(".drawer-handle")) && this.modalBody && this.modalBody.scrollTop > 0 || (this.modalContainer.style.transition = "", this.modalContainer.style.transform = "", this.isDragging = !0, this.dragStartTime = Date.now(), e instanceof TouchEvent ? (this.dragStartY = e.touches[0].clientY, this.dragCurrentY = e.touches[0].clientY) : (this.dragStartY = e.clientY, this.dragCurrentY = e.clientY));
-    }, this.handleDragMove = (e) => {
-      if (!this.isDragging || !this.modalContainer) return;
-      e instanceof TouchEvent ? this.dragCurrentY = e.touches[0].clientY : this.dragCurrentY = e.clientY;
-      const t = this.dragCurrentY - this.dragStartY;
-      t > 0 && (e.preventDefault(), this.modalContainer.style.transform = `translateY(${t}px)`, this.modalContainer.style.transition = "none");
-    }, this.handleDragEnd = () => {
-      if (!this.isDragging || !this.modalContainer) return;
-      const e = Math.max(0, this.dragCurrentY - this.dragStartY);
-      e > 5 && (this.lastDragEndTime = Date.now());
-      const t = Date.now() - this.dragStartTime, s = e / t, i = this.modalContainer.offsetHeight, r = Math.max(150, i * 0.3), a = e > r || s > 0.5;
-      this.isDragging = !1;
-      const c = this.modalContainer, n = a ? i + i * 0.1 : 0;
-      c.style.transition = "none", c.style.transform = `translateY(${e}px)`, requestAnimationFrame(() => {
-        c.style.transition = `transform ${this.transitionDuration}ms cubic-bezier(0.4, 0, 0.2, 1)`, c.style.transform = `translateY(${n}px)`;
-      }), setTimeout(() => {
-        this.dragStartY = 0, this.dragCurrentY = 0, this.dragStartTime = 0, a ? (this.isVisible = !1, this.open = !1) : this.modalContainer && (this.modalContainer.style.transition = "", this.modalContainer.style.transform = "");
-      }, this.transitionDuration);
-    }, this.handleHandleClick = (e) => {
-      if (Date.now() - this.lastDragEndTime < 200) {
-        e.preventDefault(), e.stopPropagation();
-        return;
-      }
-      this.handleClose();
-    };
+    super(...arguments), this.initialMode = "signin", this.logoUrl = "", this.baseUrl = "", this.oauthDomain = "", this.oauthRegion = "", this.oauthUserPoolId = "", this.oauthClientId = "", this.oauthRedirectUri = "", this.oauthSpaDomain = "", this.disableSignup = !1, this.mode = "signin", this.resetStep = "none", this.signupStep = "form", this.isLoading = !1, this.isLoggedIn = !1, this.email = "", this.password = "", this.givenName = "", this.familyName = "", this.newPassword = "", this.confirmPassword = "", this.notice = "", this.error = "", this.errors = {}, this.otpDigits = ["", "", "", "", "", ""], this.signupOtpDigits = ["", "", "", "", "", ""], this.cookies = he(), this.hasHandledOAuthCallback = !1, this.baseUrlErrorMessage = "Authentication service is not configured correctly. Please add an API domain or contact support.";
   }
   hasApiBaseUrl() {
     return this.baseUrl.trim().length > 0;
@@ -1523,45 +1503,31 @@ let m = class extends H {
   getNormalizedBaseUrl() {
     const e = this.baseUrl.trim();
     if (!e) return "";
-    const t = e.endsWith("/") ? e : `${e}/`;
-    return t.startsWith("http://") || t.startsWith("https://") ? t : `https://${t}`;
+    const t = e.startsWith("http://") || e.startsWith("https://") ? e : `https://${e}`;
+    return t.endsWith("/") ? t : `${t}/`;
   }
   getApiService() {
     if (!this.hasApiBaseUrl())
       throw new Error("API domain is not set");
-    return this.apiService || (this.apiService = oe({
+    return this.apiService || (this.apiService = ne({
       baseUrl: this.getNormalizedBaseUrl()
     })), this.apiService;
   }
   connectedCallback() {
-    super.connectedCallback(), window.addEventListener("keyup", this.boundKeyHandler);
+    super.connectedCallback();
     const e = this.cookies.getAuthToken("AUTH_TOKEN"), t = this.cookies.getAuthToken("REFRESH_TOKEN");
     this.isLoggedIn = !!(e && t), this.mode = this.disableSignup && this.initialMode === "signup" ? "signin" : this.initialMode, this.hasApiBaseUrl() || (this.error = this.baseUrlErrorMessage), this.handleOAuthCallbackIfPresent();
   }
-  disconnectedCallback() {
-    window.removeEventListener("keyup", this.boundKeyHandler), this.unlockBodyScroll(), super.disconnectedCallback();
-  }
   firstUpdated() {
-    this.open && (this.isVisible = !0);
-  }
-  updated(e) {
-    e.has("disableSignup") && this.disableSignup && this.mode === "signup" && (this.mode = "signin", this.signupStep = "form"), e.has("baseUrl") && (this.apiService = void 0, this.hasApiBaseUrl() ? (this.error === this.baseUrlErrorMessage && (this.error = ""), this.hasHandledOAuthCallback || this.handleOAuthCallbackIfPresent()) : this.error = this.baseUrlErrorMessage), (e.has("oauthDomain") || e.has("oauthRegion") || e.has("oauthUserPoolId") || e.has("oauthClientId") || e.has("oauthRedirectUri")) && (this.oauthService = void 0, this.handleOAuthCallbackIfPresent()), e.has("open") && (this.open ? (this.isVisible = !0, this.lockBodyScroll(), setTimeout(() => {
+    setTimeout(() => {
       this.emailInput?.focus();
-    }, 100)) : this.isVisible && this.handleClose()), e.has("isVisible") && (this.isVisible ? (this.lockBodyScroll(), this.cleanupInlineStyles()) : (this.unlockBodyScroll(), this.resetState()));
-  }
-  lockBodyScroll() {
-    this.scrollPosition = window.scrollY, document.body.classList.add("modal-open"), document.body.style.top = `-${this.scrollPosition}px`;
-  }
-  unlockBodyScroll() {
-    document.body.classList.remove("modal-open"), document.body.style.top = "", window.scrollTo(0, this.scrollPosition);
+    }, 100);
   }
-  cleanupInlineStyles() {
-    setTimeout(() => {
-      this.modalContainer && (this.modalContainer.style.transition = "", this.modalContainer.style.transform = "");
-    }, 0);
+  updated(e) {
+    e.has("disableSignup") && this.disableSignup && this.mode === "signup" && (this.mode = "signin", this.signupStep = "form"), e.has("baseUrl") && (this.apiService = void 0, this.hasApiBaseUrl() ? (this.error === this.baseUrlErrorMessage && (this.error = ""), this.hasHandledOAuthCallback || this.handleOAuthCallbackIfPresent()) : this.error = this.baseUrlErrorMessage), (e.has("oauthDomain") || e.has("oauthRegion") || e.has("oauthUserPoolId") || e.has("oauthClientId") || e.has("oauthRedirectUri")) && (this.oauthService = void 0, this.handleOAuthCallbackIfPresent());
   }
   resetState() {
-    this.isDragging = !1, this.lastDragEndTime = 0, this.dragStartY = 0, this.dragCurrentY = 0, this.dragStartTime = 0, this.error = "", this.notice = "", this.errors = {}, this.email = "", this.password = "", this.givenName = "", this.familyName = "", this.newPassword = "", this.confirmPassword = "", this.otpDigits = ["", "", "", "", "", ""], this.signupOtpDigits = ["", "", "", "", "", ""], this.resetStep = "none", this.signupStep = "form", this.mode = this.initialMode;
+    this.error = "", this.notice = "", this.errors = {}, this.email = "", this.password = "", this.givenName = "", this.familyName = "", this.newPassword = "", this.confirmPassword = "", this.otpDigits = ["", "", "", "", "", ""], this.signupOtpDigits = ["", "", "", "", "", ""], this.resetStep = "none", this.signupStep = "form", this.mode = this.initialMode;
   }
   toggleMode() {
     this.resetStep === "none" && (this.disableSignup && this.mode === "signin" || (this.mode = this.mode === "signin" ? "signup" : "signin", this.signupStep = "form", this.error = "", this.notice = "", this.errors = {}, this.confirmPassword = "", this.mode === "signin" && (this.givenName = "", this.familyName = "", this.signupOtpDigits = ["", "", "", "", "", ""])));
@@ -1587,8 +1553,8 @@ let m = class extends H {
       else if (this.password.length < 8)
         e.password = "Password must be at least 8 characters";
       else if (this.mode === "signup") {
-        const t = /[A-Z]/.test(this.password), s = /[a-z]/.test(this.password), i = /[0-9]/.test(this.password);
-        (!t || !s || !i) && (e.password = "Password must contain uppercase, lowercase, and number");
+        const t = /[A-Z]/.test(this.password), s = /[a-z]/.test(this.password), r = /[0-9]/.test(this.password);
+        (!t || !s || !r) && (e.password = "Password must contain uppercase, lowercase, and number");
       }
     }
     if (this.mode === "signup" && this.resetStep === "none" && this.signupStep === "form" && (this.givenName.trim() ? /^[a-zA-Z\s-']+$/.test(this.givenName.trim()) || (e.givenName = "Invalid first name") : e.givenName = "First name is required", this.familyName.trim() ? /^[a-zA-Z\s-']+$/.test(this.familyName.trim()) || (e.familyName = "Invalid last name") : e.familyName = "Last name is required", this.confirmPassword ? this.password !== this.confirmPassword && (e.confirm_password = "Passwords must match") : e.confirm_password = "Please confirm your password"), this.signupStep === "otp") {
@@ -1603,8 +1569,8 @@ let m = class extends H {
         else if (this.newPassword.length < 8)
           e.new_password = "Password must be at least 8 characters";
         else {
-          const s = /[A-Z]/.test(this.newPassword), i = /[a-z]/.test(this.newPassword), r = /[0-9]/.test(this.newPassword);
-          (!s || !i || !r) && (e.new_password = "Password must contain uppercase, lowercase, and number");
+          const s = /[A-Z]/.test(this.newPassword), r = /[a-z]/.test(this.newPassword), i = /[0-9]/.test(this.newPassword);
+          (!s || !r || !i) && (e.new_password = "Password must contain uppercase, lowercase, and number");
         }
         this.confirmPassword ? this.newPassword !== this.confirmPassword && (e.confirm_password = "Passwords must match") : e.confirm_password = "Please confirm your password";
       }
@@ -1662,8 +1628,8 @@ let m = class extends H {
       }
     }
   }
-  setAuthTokens(e, t, s, i) {
-    this.cookies.setAuthToken("ACCESS_TOKEN", e), this.cookies.setAuthToken("AUTH_TOKEN", t), this.cookies.setAuthToken("REFRESH_TOKEN", s), this.cookies.setCookie("USER_EMAIL", i.email), this.isLoggedIn = !0, this.dispatchEvent(
+  setAuthTokens(e, t, s, r) {
+    this.cookies.setAuthToken("ACCESS_TOKEN", e), this.cookies.setAuthToken("AUTH_TOKEN", t), this.cookies.setAuthToken("REFRESH_TOKEN", s), this.cookies.setCookie("USER_EMAIL", r.email), this.isLoggedIn = !0, this.dispatchEvent(
       new CustomEvent("auth-success", {
         bubbles: !0,
         composed: !0
@@ -1674,8 +1640,8 @@ let m = class extends H {
     const e = {
       email: this.email.trim(),
       password: this.password
-    }, { accessToken: t, idToken: s, refreshToken: i, user: r } = await this.getApiService().login(e);
-    this.setAuthTokens(t, s, i, r), this.handleClose();
+    }, { accessToken: t, idToken: s, refreshToken: r, user: i } = await this.getApiService().login(e);
+    this.setAuthTokens(t, s, r, i);
   }
   isOAuthConfigured() {
     return [this.oauthDomain, this.oauthRegion, this.oauthUserPoolId, this.oauthClientId].every(
@@ -1687,7 +1653,7 @@ let m = class extends H {
       return null;
     if (!this.oauthService) {
       const e = this.oauthRedirectUri?.trim() ? this.oauthRedirectUri.trim() : void 0;
-      this.oauthService = ce({
+      this.oauthService = pe({
         domain: this.oauthDomain.trim(),
         cognitoRegion: this.oauthRegion.trim(),
         userPoolId: this.oauthUserPoolId.trim(),
@@ -1700,32 +1666,32 @@ let m = class extends H {
   stripOAuthParamsFromUrl() {
     const e = new URL(window.location.href);
     let t = !1;
-    for (const s of ge)
+    for (const s of fe)
       e.searchParams.has(s) && (e.searchParams.delete(s), t = !0);
     if (t) {
-      const s = e.searchParams.toString(), i = `${e.pathname}${s ? `?${s}` : ""}${e.hash}`;
-      window.history.replaceState({}, document.title, i);
+      const s = e.searchParams.toString(), r = `${e.pathname}${s ? `?${s}` : ""}${e.hash}`;
+      window.history.replaceState({}, document.title, r);
     }
   }
   async handleOAuthCallbackIfPresent() {
-    const e = new URLSearchParams(window.location.search), t = e.get("access_token"), s = e.get("id_token"), i = e.get("refresh_token"), r = e.get("code"), o = e.get("state"), a = e.get("error"), c = e.get("error_description");
-    if ((t || s || r || a) && !this.hasHandledOAuthCallback) {
+    const e = new URLSearchParams(window.location.search), t = e.get("access_token"), s = e.get("id_token"), r = e.get("refresh_token"), i = e.get("code"), o = e.get("state"), a = e.get("error"), p = e.get("error_description");
+    if ((t || s || i || a) && !this.hasHandledOAuthCallback) {
       if (!this.hasApiBaseUrl()) {
         this.error = this.baseUrlErrorMessage;
         return;
       }
-      this.open = !0, this.isVisible = !0, this.hasHandledOAuthCallback = !0, this.isLoading = !0, this.error = "";
+      this.hasHandledOAuthCallback = !0, this.isLoading = !0, this.error = "";
       try {
         if (a)
-          throw new Error(c || `OAuth error: ${a}`);
-        if (t && s && i) {
-          const { accessToken: h, idToken: d, refreshToken: l, user: p } = await this.getApiService().login({
+          throw new Error(p || `OAuth error: ${a}`);
+        if (t && s && r) {
+          const { accessToken: h, idToken: c, refreshToken: l, user: d } = await this.getApiService().login({
             accessToken: t,
-            refreshToken: i,
+            refreshToken: r,
             idToken: s
           });
-          this.setAuthTokens(h, d, l ?? i, p), this.handleClose();
-        } else if (r && o) {
+          this.setAuthTokens(h, c, l ?? r, d);
+        } else if (i && o) {
           if (!this.isOAuthConfigured())
             throw new Error("OAuth is not configured correctly. Please try again later.");
           const h = this.getOAuthService();
@@ -1733,12 +1699,12 @@ let m = class extends H {
             throw new Error("OAuth is not configured correctly. Please try again later.");
           if (!h.validateState(o))
             throw new Error("Invalid state parameter. Please try signing in again.");
-          const d = await h.exchangeCodeForTokens(r), { accessToken: l, idToken: p, refreshToken: u, user: $ } = await this.getApiService().login({
-            accessToken: d.access_token,
-            refreshToken: d.refresh_token,
-            idToken: d.id_token
+          const c = await h.exchangeCodeForTokens(i), { accessToken: l, idToken: d, refreshToken: u, user: f } = await this.getApiService().login({
+            accessToken: c.access_token,
+            refreshToken: c.refresh_token,
+            idToken: c.id_token
           });
-          this.setAuthTokens(l, p, u ?? d.refresh_token, $), this.handleClose();
+          this.setAuthTokens(l, d, u ?? c.refresh_token, f);
         } else
           throw new Error("Missing required OAuth parameters");
       } catch (h) {
@@ -1801,17 +1767,17 @@ let m = class extends H {
         this.error = this.baseUrlErrorMessage;
         return;
       }
-      const i = this.getApiService(), {
-        redirectUrl: r,
+      const r = this.getApiService(), {
+        redirectUrl: i,
         requiresRedirect: o
-      } = await i.logout({
+      } = await r.logout({
         accessToken: e,
         refreshToken: s,
         authToken: t
       });
-      if (o && r) {
+      if (o && i) {
         const a = window.location.host;
-        new URL(r).host !== a ? window.open(r, "newWindow", "width=400,height=500,resizable=yes,scrollbars=yes,status=yes") : window.location.href = r;
+        new URL(i).host !== a ? window.open(i, "newWindow", "width=400,height=500,resizable=yes,scrollbars=yes,status=yes") : window.location.href = i;
       }
     } catch {
     } finally {
@@ -1827,7 +1793,7 @@ let m = class extends H {
   }
   handleOAuthSignIn(e) {
     if (this.oauthSpaDomain?.trim()) {
-      const t = this.oauthSpaDomain.trim(), s = t.startsWith("http://") || t.startsWith("https://") ? t : `https://${t}`, i = s.endsWith("/") ? s.slice(0, -1) : s, r = window.location.href, o = `${i}?return_url=${encodeURIComponent(r)}&provider=${e}&theme=${this.theme}`;
+      const t = this.oauthSpaDomain.trim(), s = t.startsWith("http://") || t.startsWith("https://") ? t : `https://${t}`, r = s.endsWith("/") ? s.slice(0, -1) : s, i = window.location.href, o = `${r}?return_url=${encodeURIComponent(i)}&provider=${e}&theme=${this.theme}`;
       window.location.href = o;
       return;
     }
@@ -1835,122 +1801,72 @@ let m = class extends H {
   }
   // OTP input handlers
   handleOtpInput(e, t, s) {
-    const i = t.target, r = i.value.replace(/\D/g, "");
-    if (!r) {
+    const r = t.target, i = r.value.replace(/\D/g, "");
+    if (!i) {
       s ? (this.signupOtpDigits[e] = "", this.signupOtpDigits = [...this.signupOtpDigits]) : (this.otpDigits[e] = "", this.otpDigits = [...this.otpDigits]);
       return;
     }
-    const o = r[r.length - 1];
+    const o = i[i.length - 1];
     if (s ? (this.signupOtpDigits[e] = o, this.signupOtpDigits = [...this.signupOtpDigits]) : (this.otpDigits[e] = o, this.otpDigits = [...this.otpDigits]), e < 5) {
       const a = this.shadowRoot?.querySelector(
         `${s ? ".signup-otp-input" : ".reset-otp-input"}[data-index="${e + 1}"]`
       );
       a?.focus(), a?.select();
     } else
-      i.blur();
+      r.blur();
   }
   handleOtpKeydown(e, t, s) {
-    const i = s ? this.signupOtpDigits : this.otpDigits;
+    const r = s ? this.signupOtpDigits : this.otpDigits;
     if (t.key === "Backspace") {
-      if (i[e]) {
+      if (r[e]) {
         s ? (this.signupOtpDigits[e] = "", this.signupOtpDigits = [...this.signupOtpDigits]) : (this.otpDigits[e] = "", this.otpDigits = [...this.otpDigits]);
         return;
       }
       if (e > 0) {
-        const r = this.shadowRoot?.querySelector(
+        const i = this.shadowRoot?.querySelector(
           `${s ? ".signup-otp-input" : ".reset-otp-input"}[data-index="${e - 1}"]`
         );
-        r?.focus(), r?.select(), s ? (this.signupOtpDigits[e - 1] = "", this.signupOtpDigits = [...this.signupOtpDigits]) : (this.otpDigits[e - 1] = "", this.otpDigits = [...this.otpDigits]);
+        i?.focus(), i?.select(), s ? (this.signupOtpDigits[e - 1] = "", this.signupOtpDigits = [...this.signupOtpDigits]) : (this.otpDigits[e - 1] = "", this.otpDigits = [...this.otpDigits]);
       }
     }
     if (t.key === "ArrowLeft" && e > 0) {
-      const r = this.shadowRoot?.querySelector(
+      const i = this.shadowRoot?.querySelector(
         `${s ? ".signup-otp-input" : ".reset-otp-input"}[data-index="${e - 1}"]`
       );
-      r?.focus(), r?.select(), t.preventDefault();
+      i?.focus(), i?.select(), t.preventDefault();
     }
     if (t.key === "ArrowRight" && e < 5) {
-      const r = this.shadowRoot?.querySelector(
+      const i = this.shadowRoot?.querySelector(
         `${s ? ".signup-otp-input" : ".reset-otp-input"}[data-index="${e + 1}"]`
       );
-      r?.focus(), r?.select(), t.preventDefault();
+      i?.focus(), i?.select(), t.preventDefault();
     }
     t.key.length === 1 && /\D/.test(t.key) && t.preventDefault();
   }
   handleOtpPaste(e, t) {
-    const i = (e.clipboardData?.getData("text") || "").replace(/\D/g, "").slice(0, 6).split("");
-    if (i.length === 0) return;
+    const r = (e.clipboardData?.getData("text") || "").replace(/\D/g, "").slice(0, 6).split("");
+    if (r.length === 0) return;
     e.preventDefault();
     for (let o = 0; o < 6; o++)
-      t ? this.signupOtpDigits[o] = i[o] || "" : this.otpDigits[o] = i[o] || "";
+      t ? this.signupOtpDigits[o] = r[o] || "" : this.otpDigits[o] = r[o] || "";
     t ? this.signupOtpDigits = [...this.signupOtpDigits] : this.otpDigits = [...this.otpDigits];
-    const r = (t ? this.signupOtpDigits : this.otpDigits).findIndex((o) => !o);
-    if (r === -1)
+    const i = (t ? this.signupOtpDigits : this.otpDigits).findIndex((o) => !o);
+    if (i === -1)
       this.shadowRoot?.querySelector(
         `${t ? ".signup-otp-input" : ".reset-otp-input"}[data-index="5"]`
       )?.blur();
     else {
       const o = this.shadowRoot?.querySelector(
-        `${t ? ".signup-otp-input" : ".reset-otp-input"}[data-index="${r}"]`
+        `${t ? ".signup-otp-input" : ".reset-otp-input"}[data-index="${i}"]`
       );
       o?.focus(), o?.select();
     }
   }
   render() {
-    if (!this.isVisible)
-      return g;
-    const e = {
-      "modal-overlay": !0,
-      "modal-overlay--closing": this.isClosing
-    }, t = {
-      "modal-container": !0,
-      "modal-container--drawer": !0,
-      "modal-container--closing": this.isClosing,
-      "modal-container--dragging": this.isDragging,
-      [`modal-container--${this.size}`]: !0
-    };
-    return f`
-      <!-- Modal/Drawer -->
-      <div
-        class=${mt(e)}
-        @click=${this.handleOverlayClick}
-        @touchstart=${this.handleDragStart}
-        @touchmove=${this.handleDragMove}
-        @touchend=${this.handleDragEnd}
-        @mousedown=${this.handleDragStart}
-      >
-        <div
-          class=${mt(t)}
-          @click=${(s) => s.stopPropagation()}
-          role="dialog"
-          aria-modal="true"
-          @mousemove=${this.handleDragMove}
-          @mouseup=${this.handleDragEnd}
-        >
-          <!-- Drawer Handle -->
-          <div
-            class="drawer-handle"
-            @click=${this.handleHandleClick}
-            role="button"
-            tabindex="0"
-            aria-label="Close drawer"
-          >
-            <div class="drawer-handle-bar"></div>
-          </div>
-
-          <!-- Drawer Content Wrapper -->
-          <div class="drawer-content drawer-content--${this.size}">
-            ${this.renderContent()}
-          </div>
-        </div>
-      </div>
-    `;
-  }
-  renderContent() {
     if (!this.hasApiBaseUrl()) {
       const e = this.baseUrlErrorMessage;
-      return f`
-        ${this.logoUrl.length > 0 ? f`
+      return m`
+        ${this.logoUrl.length > 0 ? m`
               <header class="modal-header">
                 <div class="auth-header">
                 <img
@@ -1973,8 +1889,8 @@ let m = class extends H {
         </div>
       `;
     }
-    return this.isLoading && this.hasHandledOAuthCallback ? f`
-        ${this.logoUrl.length > 0 ? f`
+    return this.isLoading && this.hasHandledOAuthCallback ? m`
+        ${this.logoUrl.length > 0 ? m`
               <header class="modal-header">
                 <div class="auth-header">
                 <img
@@ -1991,16 +1907,22 @@ let m = class extends H {
         <div class="modal-body">
           <div class="auth-form">
             <div class="form-actions">
-              <button type="button" class="cta" disabled>
+              <base-button
+                type="button"
+                variant="primary"
+                full-width
+                loading
+                disabled
+              >
                 Signing in...
-              </button>
+              </base-button>
             </div>
             ${this.renderAlerts()}
           </div>
         </div>
-      ` : this.isLoggedIn ? f`
+      ` : this.isLoggedIn ? m`
         <!-- Header -->
-        ${this.logoUrl.length > 0 ? f`
+        ${this.logoUrl.length > 0 ? m`
               <header class="modal-header">
                 <div class="auth-header">
                 <img
@@ -2018,14 +1940,21 @@ let m = class extends H {
         <div class="modal-body">
           <div class="auth-form">
             <div class="form-actions">
-              <button type="button" class="cta" @click=${this.logout}>Logout</button>
+              <base-button
+                type="button"
+                variant="primary"
+                full-width
+                @click=${this.logout}
+              >
+                Logout
+              </base-button>
             </div>
             ${this.renderAlerts()}
           </div>
         </div>
-      ` : f`
+      ` : m`
       <!-- Header -->
-      ${(!this.mode || this.resetStep === "none") && this.logoUrl.length > 0 && this.mode === "signin" ? f`
+      ${(!this.mode || this.resetStep === "none") && this.logoUrl.length > 0 && this.mode === "signin" ? m`
             <header class="modal-header">
 
                 <div class="auth-header">
@@ -2059,39 +1988,33 @@ let m = class extends H {
   }
   renderFormContent() {
     if (this.resetStep === "none" && (!this.mode || this.mode === "signin" || this.signupStep === "form"))
-      return f`
+      return m`
         <!-- Email -->
-        <label class="field">
-          <span class="field-label">Email Address</span>
-          <input
-            id="email-input"
-            type="email"
-            class="field-input ${this.errors.email ? "field-input--error" : ""}"
-            placeholder="Enter your email"
-            .value=${this.email}
-            @input=${(e) => this.email = e.target.value}
-            required
-            autocomplete="email"
-          />
-          ${this.errors.email ? f`<span class="field-error">${this.errors.email}</span>` : g}
-        </label>
+        <base-input
+          id="email-input"
+          type="email"
+          label="Email Address"
+          placeholder="Enter your email"
+          .value=${this.email}
+          .error=${this.errors.email}
+          ?required=${!0}
+          autocomplete="email"
+          @input=${(e) => this.email = e.detail.value}
+        ></base-input>
 
         <!-- Password -->
-        <label class="field">
-          <span class="field-label">Password</span>
-          <input
-            type="password"
-            class="field-input ${this.errors.password ? "field-input--error" : ""}"
-            placeholder="Enter your password"
-            .value=${this.password}
-            @input=${(e) => this.password = e.target.value}
-            required
-            autocomplete=${this.mode === "signup" ? "new-password" : "current-password"}
-          />
-          ${this.errors.password ? f`<span class="field-error">${this.errors.password}</span>` : g}
-        </label>
-
-        ${this.mode === "signin" && this.error ? f`
+        <base-input
+          type="password"
+          label="Password"
+          placeholder="Enter your password"
+          .value=${this.password}
+          .error=${this.errors.password}
+          ?required=${!0}
+          autocomplete=${this.mode === "signup" ? "new-password" : "current-password"}
+          @input=${(e) => this.password = e.detail.value}
+        ></base-input>
+
+        ${this.mode === "signin" && this.error ? m`
               <div class="forgot-row">
                 <button type="button" class="text-btn" @click=${this.startReset}>
                   Forgot your password?
@@ -2099,62 +2022,53 @@ let m = class extends H {
               </div>
             ` : g}
 
-        ${this.mode === "signup" ? f`
+        ${this.mode === "signup" ? m`
               <!-- Confirm Password -->
-              <label class="field">
-                <span class="field-label">Confirm Password</span>
-                <input
-                  type="password"
-                  class="field-input ${this.errors.confirm_password ? "field-input--error" : ""}"
-                  placeholder="Re-enter your password"
-                  .value=${this.confirmPassword}
-                  @input=${(e) => this.confirmPassword = e.target.value}
-                  required
-                  autocomplete="new-password"
-                />
-                ${this.errors.confirm_password ? f`<span class="field-error">${this.errors.confirm_password}</span>` : g}
-              </label>
+              <base-input
+                type="password"
+                label="Confirm Password"
+                placeholder="Re-enter your password"
+                .value=${this.confirmPassword}
+                .error=${this.errors.confirm_password}
+                ?required=${!0}
+                autocomplete="new-password"
+                @input=${(e) => this.confirmPassword = e.detail.value}
+              ></base-input>
 
               <!-- First Name -->
-              <label class="field">
-                <span class="field-label">First Name</span>
-                <input
-                  type="text"
-                  class="field-input ${this.errors.givenName ? "field-input--error" : ""}"
-                  placeholder="Enter your first name"
-                  .value=${this.givenName}
-                  @input=${(e) => this.givenName = e.target.value}
-                  required
-                  autocomplete="given-name"
-                />
-                ${this.errors.givenName ? f`<span class="field-error">${this.errors.givenName}</span>` : g}
-              </label>
+              <base-input
+                type="text"
+                label="First Name"
+                placeholder="Enter your first name"
+                .value=${this.givenName}
+                .error=${this.errors.givenName}
+                ?required=${!0}
+                autocomplete="given-name"
+                @input=${(e) => this.givenName = e.detail.value}
+              ></base-input>
 
               <!-- Last Name -->
-              <label class="field">
-                <span class="field-label">Last Name</span>
-                <input
-                  type="text"
-                  class="field-input ${this.errors.familyName ? "field-input--error" : ""}"
-                  placeholder="Enter your last name"
-                  .value=${this.familyName}
-                  @input=${(e) => this.familyName = e.target.value}
-                  required
-                  autocomplete="family-name"
-                />
-                ${this.errors.familyName ? f`<span class="field-error">${this.errors.familyName}</span>` : g}
-              </label>
+              <base-input
+                type="text"
+                label="Last Name"
+                placeholder="Enter your last name"
+                .value=${this.familyName}
+                .error=${this.errors.familyName}
+                ?required=${!0}
+                autocomplete="family-name"
+                @input=${(e) => this.familyName = e.detail.value}
+              ></base-input>
             ` : g}
       `;
     if (this.mode === "signup" && this.signupStep === "otp")
-      return f`
+      return m`
         <div class="otp-section">
           <label class="otp-label">Enter 6-digit code</label>
           <div class="otp-inputs" role="group" aria-label="One time code">
-            ${$t(
+            ${yt(
         Array.from({ length: 6 }, (e, t) => t),
         (e) => e,
-        (e) => f`
+        (e) => m`
                 <input
                   class="otp-input signup-otp-input ${this.errors.signup_otp ? "otp-input--error" : ""}"
                   type="text"
@@ -2171,7 +2085,7 @@ let m = class extends H {
               `
       )}
           </div>
-          ${this.errors.signup_otp ? f`<p class="otp-error">${this.errors.signup_otp}</p>` : g}
+          ${this.errors.signup_otp ? m`<p class="otp-error">${this.errors.signup_otp}</p>` : g}
         </div>
         <div class="forgot-row">
           <button type="button" class="text-btn" @click=${this.backToSignupForm}>
@@ -2180,21 +2094,18 @@ let m = class extends H {
         </div>
       `;
     if (this.resetStep === "request")
-      return f`
-        <label class="field">
-          <span class="field-label">Email Address</span>
-          <input
-            id="email-input"
-            type="email"
-            class="field-input ${this.errors.email ? "field-input--error" : ""}"
-            placeholder="Enter your email"
-            .value=${this.email}
-            @input=${(e) => this.email = e.target.value}
-            required
-            autocomplete="email"
-          />
-          ${this.errors.email ? f`<span class="field-error">${this.errors.email}</span>` : g}
-        </label>
+      return m`
+        <base-input
+          id="email-input"
+          type="email"
+          label="Email Address"
+          placeholder="Enter your email"
+          .value=${this.email}
+          .error=${this.errors.email}
+          ?required=${!0}
+          autocomplete="email"
+          @input=${(e) => this.email = e.detail.value}
+        ></base-input>
         <div class="forgot-row">
           <button type="button" class="text-btn" @click=${this.cancelReset}>
             Back to Sign In
@@ -2203,28 +2114,25 @@ let m = class extends H {
       `;
     if (this.resetStep === "confirm") {
       const e = this.otpDigits.every((t) => /^\d$/.test(t));
-      return f`
-        <label class="field">
-          <span class="field-label">Email Address</span>
-          <input
-            type="email"
-            class="field-input ${this.errors.email ? "field-input--error" : ""}"
-            placeholder="Enter your email"
-            .value=${this.email}
-            @input=${(t) => this.email = t.target.value}
-            required
-            autocomplete="email"
-          />
-          ${this.errors.email ? f`<span class="field-error">${this.errors.email}</span>` : g}
-        </label>
+      return m`
+        <base-input
+          type="email"
+          label="Email Address"
+          placeholder="Enter your email"
+          .value=${this.email}
+          .error=${this.errors.email}
+          ?required=${!0}
+          autocomplete="email"
+          @input=${(t) => this.email = t.detail.value}
+        ></base-input>
 
         <div class="otp-section">
           <label class="otp-label">Enter 6-digit code</label>
           <div class="otp-inputs" role="group" aria-label="One time code">
-            ${$t(
+            ${yt(
         Array.from({ length: 6 }, (t, s) => s),
         (t) => t,
-        (t) => f`
+        (t) => m`
                 <input
                   class="otp-input reset-otp-input ${this.errors.otp ? "otp-input--error" : ""}"
                   type="text"
@@ -2241,38 +2149,32 @@ let m = class extends H {
               `
       )}
           </div>
-          ${this.errors.otp ? f`<p class="otp-error">${this.errors.otp}</p>` : g}
+          ${this.errors.otp ? m`<p class="otp-error">${this.errors.otp}</p>` : g}
         </div>
 
-        ${e ? f`
+        ${e ? m`
               <div class="new-password-fields">
-                <label class="field">
-                  <span class="field-label">New Password</span>
-                  <input
-                    type="password"
-                    class="field-input ${this.errors.new_password ? "field-input--error" : ""}"
-                    placeholder="Enter your new password"
-                    .value=${this.newPassword}
-                    @input=${(t) => this.newPassword = t.target.value}
-                    required
-                    autocomplete="new-password"
-                  />
-                  ${this.errors.new_password ? f`<span class="field-error">${this.errors.new_password}</span>` : g}
-                </label>
-
-                <label class="field">
-                  <span class="field-label">Confirm New Password</span>
-                  <input
-                    type="password"
-                    class="field-input ${this.errors.confirm_password ? "field-input--error" : ""}"
-                    placeholder="Re-enter your new password"
-                    .value=${this.confirmPassword}
-                    @input=${(t) => this.confirmPassword = t.target.value}
-                    required
-                    autocomplete="new-password"
-                  />
-                  ${this.errors.confirm_password ? f`<span class="field-error">${this.errors.confirm_password}</span>` : g}
-                </label>
+                <base-input
+                  type="password"
+                  label="New Password"
+                  placeholder="Enter your new password"
+                  .value=${this.newPassword}
+                  .error=${this.errors.new_password}
+                  ?required=${!0}
+                  autocomplete="new-password"
+                  @input=${(t) => this.newPassword = t.detail.value}
+                ></base-input>
+
+                <base-input
+                  type="password"
+                  label="Confirm New Password"
+                  placeholder="Re-enter your new password"
+                  .value=${this.confirmPassword}
+                  .error=${this.errors.confirm_password}
+                  ?required=${!0}
+                  autocomplete="new-password"
+                  @input=${(t) => this.confirmPassword = t.detail.value}
+                ></base-input>
               </div>
             ` : g}
 
@@ -2287,31 +2189,55 @@ let m = class extends H {
   }
   renderActions() {
     if (this.resetStep === "request")
-      return f`
-        <button type="submit" class="cta" ?disabled=${this.isLoading}>
+      return m`
+        <base-button
+          type="submit"
+          variant="primary"
+          full-width
+          ?loading=${this.isLoading}
+          ?disabled=${this.isLoading}
+        >
           ${this.isLoading ? "Sending..." : "Send Reset Code"}
-        </button>
+        </base-button>
       `;
     if (this.resetStep === "confirm")
-      return this.otpDigits.every((t) => /^\d$/.test(t)) ? f`
-          <button type="submit" class="cta" ?disabled=${this.isLoading}>
+      return this.otpDigits.every((t) => /^\d$/.test(t)) ? m`
+          <base-button
+            type="submit"
+            variant="primary"
+            full-width
+            ?loading=${this.isLoading}
+            ?disabled=${this.isLoading}
+          >
             ${this.isLoading ? "Resetting..." : "Reset Password"}
-          </button>
+          </base-button>
         ` : g;
     if (this.mode === "signup" && this.signupStep === "otp") {
       const e = this.signupOtpDigits.every((t) => /^\d$/.test(t));
-      return f`
-        <button type="submit" class="cta" ?disabled=${!e || this.isLoading}>
+      return m`
+        <base-button
+          type="submit"
+          variant="primary"
+          full-width
+          ?loading=${this.isLoading}
+          ?disabled=${!e || this.isLoading}
+        >
           ${this.isLoading ? "Completing..." : "Complete Registration"}
-        </button>
+        </base-button>
       `;
     }
-    return f`
-      <button type="submit" class="cta" ?disabled=${this.isLoading}>
+    return m`
+      <base-button
+        type="submit"
+        variant="primary"
+        full-width
+        ?loading=${this.isLoading}
+        ?disabled=${this.isLoading}
+      >
         ${this.isLoading ? "Loading..." : this.mode === "signup" ? "Continue" : "Sign In"}
-      </button>
+      </base-button>
 
-      ${this.isOAuthConfigured() && this.mode === "signin" ? f`
+      ${this.isOAuthConfigured() && this.mode === "signin" ? m`
             <div class="button-row">
               <button
                 type="button"
@@ -2335,8 +2261,8 @@ let m = class extends H {
     `;
   }
   renderAlerts() {
-    return f`
-      ${this.notice ? f`
+    return m`
+      ${this.notice ? m`
             <div class="alert alert--success">
               ${this.notice}
               <button class="alert-close" @click=${() => this.notice = ""} aria-label="Dismiss">
@@ -2344,7 +2270,7 @@ let m = class extends H {
               </button>
             </div>
           ` : g}
-      ${this.error ? f`
+      ${this.error ? m`
             <div class="alert alert--error">
               ${this.error}
               <button class="alert-close" @click=${() => this.error = ""} aria-label="Dismiss">
@@ -2355,7 +2281,7 @@ let m = class extends H {
     `;
   }
   renderFooter() {
-    return this.isLoggedIn ? g : this.resetStep === "none" && (!this.mode || this.mode === "signin" || this.signupStep === "form") ? this.disableSignup ? g : f`
+    return this.isLoggedIn ? g : this.resetStep === "none" && (!this.mode || this.mode === "signin" || this.signupStep === "form") ? this.disableSignup ? g : m`
         <div class="auth-footer">
           <p class="toggle-text">
             ${this.mode === "signup" ? "Already have an account?" : "Don't have an account?"}
@@ -2364,7 +2290,7 @@ let m = class extends H {
             ${this.mode === "signup" ? "Sign In" : "Sign Up"}
           </button>
         </div>
-      ` : f`
+      ` : m`
       <div class="auth-footer">
         <p class="toggle-text">
           Having trouble? Email
@@ -2374,7 +2300,7 @@ let m = class extends H {
     `;
   }
   renderGoogleIcon() {
-    return f`
+    return m`
       <svg viewBox="-0.5 0 48 48" width="18" height="18" fill="none">
         <path d="M9.82727273,24 C9.82727273,22.4757333 10.0804318,21.0144 10.5322727,19.6437333 L2.62345455,13.6042667 C1.08206818,16.7338667 0.213636364,20.2602667 0.213636364,24 C0.213636364,27.7365333 1.081,31.2608 2.62025,34.3882667 L10.5247955,28.3370667 C10.0772273,26.9728 9.82727273,25.5168 9.82727273,24" fill="#FBBC05"></path>
         <path d="M23.7136364,10.1333333 C27.025,10.1333333 30.0159091,11.3066667 32.3659091,13.2266667 L39.2022727,6.4 C35.0363636,2.77333333 29.6954545,0.533333333 23.7136364,0.533333333 C14.4268636,0.533333333 6.44540909,5.84426667 2.62345455,13.6042667 L10.5322727,19.6437333 C12.3545909,14.112 17.5491591,10.1333333 23.7136364,10.1333333" fill="#EB4335"></path>
@@ -2384,7 +2310,7 @@ let m = class extends H {
     `;
   }
   renderAppleIcon() {
-    return f`
+    return m`
       <svg viewBox="-3.5 0 48 48" width="18" height="18" class="apple-icon">
         <path d="M231.174735,567.792499 C232.740177,565.771699 233.926883,562.915484 233.497649,560 C230.939077,560.177808 227.948466,561.814769 226.203475,563.948463 C224.612784,565.88177 223.305444,568.757742 223.816036,571.549042 C226.613071,571.636535 229.499881,569.960061 231.174735,567.792499 L231.174735,567.792499 Z M245,595.217241 C243.880625,597.712195 243.341978,598.827022 241.899976,601.03692 C239.888467,604.121745 237.052156,607.962958 233.53412,607.991182 C230.411652,608.02505 229.606488,605.94498 225.367451,605.970382 C221.128414,605.99296 220.244696,608.030695 217.116618,607.999649 C213.601387,607.968603 210.913765,604.502761 208.902256,601.417937 C203.27452,592.79849 202.68257,582.680377 206.152914,577.298162 C208.621711,573.476705 212.515678,571.241407 216.173986,571.241407 C219.89682,571.241407 222.239372,573.296075 225.322563,573.296075 C228.313175,573.296075 230.133913,571.235762 234.440281,571.235762 C237.700215,571.235762 241.153726,573.022307 243.611302,576.10431 C235.554045,580.546683 236.85858,592.121127 245,595.217241 L245,595.217241 Z" transform="translate(-204.000000, -560.000000)" fill="#0b0b0a"></path>
       </svg>
@@ -2397,12 +2323,6 @@ let m = class extends H {
   setNotice(e) {
     this.notice = e;
   }
-  closeModal() {
-    this.handleClose();
-  }
-  openModal() {
-    this.open = !0, this.isVisible = !0;
-  }
   async refresh() {
     try {
       if (!this.hasApiBaseUrl()) {
@@ -2414,10 +2334,10 @@ let m = class extends H {
         this.cookies.clearAllAuthTokens(), this.isLoggedIn = !1;
         return;
       }
-      const { accessToken: i, idToken: r, refreshToken: o } = await this.getApiService().refresh({
+      const { accessToken: r, idToken: i, refreshToken: o } = await this.getApiService().refresh({
         refreshToken: e
       });
-      this.cookies.setAuthToken("ACCESS_TOKEN", i), this.cookies.setAuthToken("AUTH_TOKEN", r), this.cookies.setAuthToken("REFRESH_TOKEN", o ?? e);
+      this.cookies.setAuthToken("ACCESS_TOKEN", r), this.cookies.setAuthToken("AUTH_TOKEN", i), this.cookies.setAuthToken("REFRESH_TOKEN", o ?? e);
     } catch {
       this.cookies.clearAllAuthTokens(), this.isLoggedIn = !1;
     }
@@ -2426,127 +2346,91 @@ let m = class extends H {
     return this.cookies.getCookie("USER_EMAIL") || null;
   }
 };
-m.styles = de();
-y([
-  S({ type: Boolean, reflect: !0 })
-], m.prototype, "open", 2);
-y([
+y.styles = ue();
+$([
   S({ type: String, attribute: "initial-mode" })
-], m.prototype, "initialMode", 2);
-y([
+], y.prototype, "initialMode", 2);
+$([
   S({ type: String, attribute: "logo-url" })
-], m.prototype, "logoUrl", 2);
-y([
+], y.prototype, "logoUrl", 2);
+$([
   S({ type: String, attribute: "api-domain" })
-], m.prototype, "baseUrl", 2);
-y([
+], y.prototype, "baseUrl", 2);
+$([
   S({ type: String, attribute: "oauth-domain" })
-], m.prototype, "oauthDomain", 2);
-y([
+], y.prototype, "oauthDomain", 2);
+$([
   S({ type: String, attribute: "oauth-region" })
-], m.prototype, "oauthRegion", 2);
-y([
+], y.prototype, "oauthRegion", 2);
+$([
   S({ type: String, attribute: "oauth-user-pool-id" })
-], m.prototype, "oauthUserPoolId", 2);
-y([
+], y.prototype, "oauthUserPoolId", 2);
+$([
   S({ type: String, attribute: "oauth-client-id" })
-], m.prototype, "oauthClientId", 2);
-y([
+], y.prototype, "oauthClientId", 2);
+$([
   S({ type: String, attribute: "oauth-redirect-uri" })
-], m.prototype, "oauthRedirectUri", 2);
-y([
+], y.prototype, "oauthRedirectUri", 2);
+$([
   S({ type: String, attribute: "oauth-spa-domain" })
-], m.prototype, "oauthSpaDomain", 2);
-y([
-  S({ type: String, attribute: "size" })
-], m.prototype, "size", 2);
-y([
-  S({ type: String, attribute: "data-theme", reflect: !0 })
-], m.prototype, "theme", 2);
-y([
+], y.prototype, "oauthSpaDomain", 2);
+$([
   S({ type: Boolean, attribute: "disable-signup" })
-], m.prototype, "disableSignup", 2);
-y([
-  b()
-], m.prototype, "mode", 2);
-y([
-  b()
-], m.prototype, "resetStep", 2);
-y([
-  b()
-], m.prototype, "signupStep", 2);
-y([
-  b()
-], m.prototype, "isLoading", 2);
-y([
-  b()
-], m.prototype, "isClosing", 2);
-y([
-  b()
-], m.prototype, "isVisible", 2);
-y([
-  b()
-], m.prototype, "isLoggedIn", 2);
-y([
-  b()
-], m.prototype, "email", 2);
-y([
-  b()
-], m.prototype, "password", 2);
-y([
-  b()
-], m.prototype, "givenName", 2);
-y([
-  b()
-], m.prototype, "familyName", 2);
-y([
-  b()
-], m.prototype, "newPassword", 2);
-y([
-  b()
-], m.prototype, "confirmPassword", 2);
-y([
-  b()
-], m.prototype, "notice", 2);
-y([
-  b()
-], m.prototype, "error", 2);
-y([
-  b()
-], m.prototype, "errors", 2);
-y([
-  b()
-], m.prototype, "otpDigits", 2);
-y([
-  b()
-], m.prototype, "signupOtpDigits", 2);
-y([
-  b()
-], m.prototype, "isDragging", 2);
-y([
-  b()
-], m.prototype, "dragStartY", 2);
-y([
-  b()
-], m.prototype, "dragCurrentY", 2);
-y([
-  b()
-], m.prototype, "dragStartTime", 2);
-y([
-  b()
-], m.prototype, "lastDragEndTime", 2);
-y([
-  it(".modal-container")
-], m.prototype, "modalContainer", 2);
-y([
-  it("#email-input")
-], m.prototype, "emailInput", 2);
-y([
-  it(".modal-body")
-], m.prototype, "modalBody", 2);
-m = y([
-  Zt("auth-drawer")
-], m);
+], y.prototype, "disableSignup", 2);
+$([
+  v()
+], y.prototype, "mode", 2);
+$([
+  v()
+], y.prototype, "resetStep", 2);
+$([
+  v()
+], y.prototype, "signupStep", 2);
+$([
+  v()
+], y.prototype, "isLoading", 2);
+$([
+  v()
+], y.prototype, "isLoggedIn", 2);
+$([
+  v()
+], y.prototype, "email", 2);
+$([
+  v()
+], y.prototype, "password", 2);
+$([
+  v()
+], y.prototype, "givenName", 2);
+$([
+  v()
+], y.prototype, "familyName", 2);
+$([
+  v()
+], y.prototype, "newPassword", 2);
+$([
+  v()
+], y.prototype, "confirmPassword", 2);
+$([
+  v()
+], y.prototype, "notice", 2);
+$([
+  v()
+], y.prototype, "error", 2);
+$([
+  v()
+], y.prototype, "errors", 2);
+$([
+  v()
+], y.prototype, "otpDigits", 2);
+$([
+  v()
+], y.prototype, "signupOtpDigits", 2);
+$([
+  Qt("#email-input")
+], y.prototype, "emailInput", 2);
+y = $([
+  Gt("auth-form")
+], y);
 export {
-  m as Auth
+  y as AuthForm
 };