@cal.macconnachie/web-components 0.0.9 → 0.0.11

package/README.md

@@ -34,14 +34,14 @@ Then create a type declaration file for TypeScript support:
 
 ```typescript
 // src/types/auth.d.ts
-export interface CalsAuth extends HTMLElement {
+export interface Auth extends HTMLElement {
   openModal(): void;
   logout(): void;
 }
 
 declare global {
   interface HTMLElementTagNameMap {
-    'auth': CalsAuth;
+    'auth': Auth;
   }
 }
 ```
@@ -57,9 +57,9 @@ Now you can use it with full type safety in your components:
 
 <script setup lang="ts">
 import { ref } from 'vue';
-import type { CalsAuth } from '@/types/auth';
+import type { Auth } from '@/types/auth';
 
-const authRef = ref<CalsAuth>();
+const authRef = ref<Auth>();
 
 const openAuth = () => {
   authRef.value?.openModal();
@@ -70,10 +70,10 @@ const openAuth = () => {
 **React:**
 ```tsx
 import { useRef } from 'react';
-import type { CalsAuth } from '@/types/auth';
+import type { Auth } from '@/types/auth';
 
 function App() {
-  const authRef = useRef<CalsAuth>(null);
+  const authRef = useRef<Auth>(null);
 
   return (
     <>
@@ -112,9 +112,9 @@ document.getElementById('logout-auth')?.addEventListener('click', () => {
 
 TypeScript:
 ```typescript
-import type { CalsAuth } from 'https://cdn.cals-api.com/components/auth.js';
+import type { Auth } from 'https://cdn.cals-api.com/components/auth.js';
 
-const auth = document.querySelector<CalsAuth>('auth');
+const auth = document.querySelector<Auth>('auth');
 
 document.getElementById('open-auth')?.addEventListener('click', () => {
   auth?.openModal();

package/dist/components/auth.js

@@ -249,7 +249,7 @@ let U = class extends HTMLElement {
 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), x = Symbol.for("lit-noChange"), g = Symbol.for("lit-nothing"), gt = /* @__PURE__ */ new WeakMap(), O = D.createTreeWalker(D, 129);
+\f\r"'\`<>=]|("|')|))|$)`, "g"), pt = /'/g, ut = /"/g, At = /^(?:script|style|textarea|title)$/i, jt = (e) => (t, ...s) => ({ _$litType$: e, strings: t, values: s }), y = jt(1), x = Symbol.for("lit-noChange"), g = Symbol.for("lit-nothing"), gt = /* @__PURE__ */ new WeakMap(), O = D.createTreeWalker(D, 129);
 function _t(e, t) {
   if (!et(e) || !e.hasOwnProperty("raw")) throw Error("invalid template strings array");
   return ht !== void 0 ? ht.createHTML(t) : t;
@@ -1461,7 +1461,7 @@ const yt = (e, t, s) => {
         transition: none !important;
       }
     }`;
-var pe = Object.defineProperty, ue = Object.getOwnPropertyDescriptor, y = (e, t, s, i) => {
+var pe = Object.defineProperty, ue = Object.getOwnPropertyDescriptor, f = (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;
@@ -1479,7 +1479,7 @@ const ge = [
 ];
 let m = class extends H {
   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.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) => {
+    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(() => {
@@ -1536,7 +1536,7 @@ let m = class extends H {
   connectedCallback() {
     super.connectedCallback(), window.addEventListener("keyup", this.boundKeyHandler);
     const e = this.cookies.getAuthToken("AUTH_TOKEN"), t = this.cookies.getAuthToken("REFRESH_TOKEN");
-    this.isLoggedIn = !!(e && t), this.mode = this.initialMode, this.hasApiBaseUrl() || (this.error = this.baseUrlErrorMessage), this.handleOAuthCallbackIfPresent();
+    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();
@@ -1545,7 +1545,7 @@ let m = class extends H {
     this.open && (this.isVisible = !0);
   }
   updated(e) {
-    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(() => {
+    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(() => {
       this.emailInput?.focus();
     }, 100)) : this.isVisible && this.handleClose()), e.has("isVisible") && (this.isVisible ? (this.lockBodyScroll(), this.cleanupInlineStyles()) : (this.unlockBodyScroll(), this.resetState()));
   }
@@ -1564,7 +1564,7 @@ let m = class extends H {
     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;
   }
   toggleMode() {
-    this.resetStep === "none" && (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 = ["", "", "", "", "", ""]));
+    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 = ["", "", "", "", "", ""])));
   }
   startReset() {
     this.mode = "signin", this.resetStep = "request", this.error = "", this.notice = "", this.errors = {}, this.password = "", this.newPassword = "", this.confirmPassword = "";
@@ -1898,7 +1898,7 @@ let m = class extends H {
       "modal-container--dragging": this.isDragging,
       [`modal-container--${this.size}`]: !0
     };
-    return f`
+    return y`
       <!-- Modal/Drawer -->
       <div
         class=${mt(e)}
@@ -1938,8 +1938,8 @@ let m = class extends H {
   renderContent() {
     if (!this.hasApiBaseUrl()) {
       const e = this.baseUrlErrorMessage;
-      return f`
-        ${this.logoUrl.length > 0 ? f`
+      return y`
+        ${this.logoUrl.length > 0 ? y`
               <header class="modal-header">
                 <div class="auth-header">
                 <img
@@ -1962,9 +1962,9 @@ let m = class extends H {
         </div>
       `;
     }
-    return this.isLoggedIn ? f`
+    return this.isLoggedIn ? y`
         <!-- Header -->
-        ${this.logoUrl.length > 0 ? f`
+        ${this.logoUrl.length > 0 ? y`
               <header class="modal-header">
                 <div class="auth-header">
                 <img
@@ -1987,9 +1987,9 @@ let m = class extends H {
             ${this.renderAlerts()}
           </div>
         </div>
-      ` : f`
+      ` : y`
       <!-- 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" ? y`
             <header class="modal-header">
 
                 <div class="auth-header">
@@ -2023,7 +2023,7 @@ let m = class extends H {
   }
   renderFormContent() {
     if (this.resetStep === "none" && (!this.mode || this.mode === "signin" || this.signupStep === "form"))
-      return f`
+      return y`
         <!-- Email -->
         <label class="field">
           <span class="field-label">Email Address</span>
@@ -2037,7 +2037,7 @@ let m = class extends H {
             required
             autocomplete="email"
           />
-          ${this.errors.email ? f`<span class="field-error">${this.errors.email}</span>` : g}
+          ${this.errors.email ? y`<span class="field-error">${this.errors.email}</span>` : g}
         </label>
 
         <!-- Password -->
@@ -2052,10 +2052,10 @@ let m = class extends H {
             required
             autocomplete=${this.mode === "signup" ? "new-password" : "current-password"}
           />
-          ${this.errors.password ? f`<span class="field-error">${this.errors.password}</span>` : g}
+          ${this.errors.password ? y`<span class="field-error">${this.errors.password}</span>` : g}
         </label>
 
-        ${this.mode === "signin" && this.error ? f`
+        ${this.mode === "signin" && this.error ? y`
               <div class="forgot-row">
                 <button type="button" class="text-btn" @click=${this.startReset}>
                   Forgot your password?
@@ -2063,7 +2063,7 @@ let m = class extends H {
               </div>
             ` : g}
 
-        ${this.mode === "signup" ? f`
+        ${this.mode === "signup" ? y`
               <!-- Confirm Password -->
               <label class="field">
                 <span class="field-label">Confirm Password</span>
@@ -2076,7 +2076,7 @@ let m = class extends H {
                   required
                   autocomplete="new-password"
                 />
-                ${this.errors.confirm_password ? f`<span class="field-error">${this.errors.confirm_password}</span>` : g}
+                ${this.errors.confirm_password ? y`<span class="field-error">${this.errors.confirm_password}</span>` : g}
               </label>
 
               <!-- First Name -->
@@ -2091,7 +2091,7 @@ let m = class extends H {
                   required
                   autocomplete="given-name"
                 />
-                ${this.errors.givenName ? f`<span class="field-error">${this.errors.givenName}</span>` : g}
+                ${this.errors.givenName ? y`<span class="field-error">${this.errors.givenName}</span>` : g}
               </label>
 
               <!-- Last Name -->
@@ -2106,19 +2106,19 @@ let m = class extends H {
                   required
                   autocomplete="family-name"
                 />
-                ${this.errors.familyName ? f`<span class="field-error">${this.errors.familyName}</span>` : g}
+                ${this.errors.familyName ? y`<span class="field-error">${this.errors.familyName}</span>` : g}
               </label>
             ` : g}
       `;
     if (this.mode === "signup" && this.signupStep === "otp")
-      return f`
+      return y`
         <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(
         Array.from({ length: 6 }, (e, t) => t),
         (e) => e,
-        (e) => f`
+        (e) => y`
                 <input
                   class="otp-input signup-otp-input ${this.errors.signup_otp ? "otp-input--error" : ""}"
                   type="text"
@@ -2135,7 +2135,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 ? y`<p class="otp-error">${this.errors.signup_otp}</p>` : g}
         </div>
         <div class="forgot-row">
           <button type="button" class="text-btn" @click=${this.backToSignupForm}>
@@ -2144,7 +2144,7 @@ let m = class extends H {
         </div>
       `;
     if (this.resetStep === "request")
-      return f`
+      return y`
         <label class="field">
           <span class="field-label">Email Address</span>
           <input
@@ -2157,7 +2157,7 @@ let m = class extends H {
             required
             autocomplete="email"
           />
-          ${this.errors.email ? f`<span class="field-error">${this.errors.email}</span>` : g}
+          ${this.errors.email ? y`<span class="field-error">${this.errors.email}</span>` : g}
         </label>
         <div class="forgot-row">
           <button type="button" class="text-btn" @click=${this.cancelReset}>
@@ -2167,7 +2167,7 @@ let m = class extends H {
       `;
     if (this.resetStep === "confirm") {
       const e = this.otpDigits.every((t) => /^\d$/.test(t));
-      return f`
+      return y`
         <label class="field">
           <span class="field-label">Email Address</span>
           <input
@@ -2179,7 +2179,7 @@ let m = class extends H {
             required
             autocomplete="email"
           />
-          ${this.errors.email ? f`<span class="field-error">${this.errors.email}</span>` : g}
+          ${this.errors.email ? y`<span class="field-error">${this.errors.email}</span>` : g}
         </label>
 
         <div class="otp-section">
@@ -2188,7 +2188,7 @@ let m = class extends H {
             ${$t(
         Array.from({ length: 6 }, (t, s) => s),
         (t) => t,
-        (t) => f`
+        (t) => y`
                 <input
                   class="otp-input reset-otp-input ${this.errors.otp ? "otp-input--error" : ""}"
                   type="text"
@@ -2205,10 +2205,10 @@ let m = class extends H {
               `
       )}
           </div>
-          ${this.errors.otp ? f`<p class="otp-error">${this.errors.otp}</p>` : g}
+          ${this.errors.otp ? y`<p class="otp-error">${this.errors.otp}</p>` : g}
         </div>
 
-        ${e ? f`
+        ${e ? y`
               <div class="new-password-fields">
                 <label class="field">
                   <span class="field-label">New Password</span>
@@ -2221,7 +2221,7 @@ let m = class extends H {
                     required
                     autocomplete="new-password"
                   />
-                  ${this.errors.new_password ? f`<span class="field-error">${this.errors.new_password}</span>` : g}
+                  ${this.errors.new_password ? y`<span class="field-error">${this.errors.new_password}</span>` : g}
                 </label>
 
                 <label class="field">
@@ -2235,7 +2235,7 @@ let m = class extends H {
                     required
                     autocomplete="new-password"
                   />
-                  ${this.errors.confirm_password ? f`<span class="field-error">${this.errors.confirm_password}</span>` : g}
+                  ${this.errors.confirm_password ? y`<span class="field-error">${this.errors.confirm_password}</span>` : g}
                 </label>
               </div>
             ` : g}
@@ -2251,31 +2251,31 @@ let m = class extends H {
   }
   renderActions() {
     if (this.resetStep === "request")
-      return f`
+      return y`
         <button type="submit" class="cta" ?disabled=${this.isLoading}>
           ${this.isLoading ? "Sending..." : "Send Reset Code"}
         </button>
       `;
     if (this.resetStep === "confirm")
-      return this.otpDigits.every((t) => /^\d$/.test(t)) ? f`
+      return this.otpDigits.every((t) => /^\d$/.test(t)) ? y`
           <button type="submit" class="cta" ?disabled=${this.isLoading}>
             ${this.isLoading ? "Resetting..." : "Reset Password"}
           </button>
         ` : g;
     if (this.mode === "signup" && this.signupStep === "otp") {
       const e = this.signupOtpDigits.every((t) => /^\d$/.test(t));
-      return f`
+      return y`
         <button type="submit" class="cta" ?disabled=${!e || this.isLoading}>
           ${this.isLoading ? "Completing..." : "Complete Registration"}
         </button>
       `;
     }
-    return f`
+    return y`
       <button type="submit" class="cta" ?disabled=${this.isLoading}>
         ${this.isLoading ? "Loading..." : this.mode === "signup" ? "Continue" : "Sign In"}
       </button>
 
-      ${this.isOAuthConfigured() && this.mode === "signin" ? f`
+      ${this.isOAuthConfigured() && this.mode === "signin" ? y`
             <div class="button-row">
               <button
                 type="button"
@@ -2299,8 +2299,8 @@ let m = class extends H {
     `;
   }
   renderAlerts() {
-    return f`
-      ${this.notice ? f`
+    return y`
+      ${this.notice ? y`
             <div class="alert alert--success">
               ${this.notice}
               <button class="alert-close" @click=${() => this.notice = ""} aria-label="Dismiss">
@@ -2308,7 +2308,7 @@ let m = class extends H {
               </button>
             </div>
           ` : g}
-      ${this.error ? f`
+      ${this.error ? y`
             <div class="alert alert--error">
               ${this.error}
               <button class="alert-close" @click=${() => this.error = ""} aria-label="Dismiss">
@@ -2319,7 +2319,7 @@ let m = class extends H {
     `;
   }
   renderFooter() {
-    return this.isLoggedIn ? g : this.resetStep === "none" && (!this.mode || this.mode === "signin" || this.signupStep === "form") ? f`
+    return this.isLoggedIn ? g : this.resetStep === "none" && (!this.mode || this.mode === "signin" || this.signupStep === "form") ? this.disableSignup ? g : y`
         <div class="auth-footer">
           <p class="toggle-text">
             ${this.mode === "signup" ? "Already have an account?" : "Don't have an account?"}
@@ -2328,7 +2328,7 @@ let m = class extends H {
             ${this.mode === "signup" ? "Sign In" : "Sign Up"}
           </button>
         </div>
-      ` : f`
+      ` : y`
       <div class="auth-footer">
         <p class="toggle-text">
           Having trouble? Email
@@ -2338,7 +2338,7 @@ let m = class extends H {
     `;
   }
   renderGoogleIcon() {
-    return f`
+    return y`
       <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>
@@ -2348,7 +2348,7 @@ let m = class extends H {
     `;
   }
   renderAppleIcon() {
-    return f`
+    return y`
       <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>
@@ -2388,123 +2388,126 @@ let m = class extends H {
   }
 };
 m.styles = de();
-y([
+f([
   S({ type: Boolean, reflect: !0 })
 ], m.prototype, "open", 2);
-y([
+f([
   S({ type: String, attribute: "initial-mode" })
 ], m.prototype, "initialMode", 2);
-y([
+f([
   S({ type: String, attribute: "logo-url" })
 ], m.prototype, "logoUrl", 2);
-y([
+f([
   S({ type: String, attribute: "api-domain" })
 ], m.prototype, "baseUrl", 2);
-y([
+f([
   S({ type: String, attribute: "oauth-domain" })
 ], m.prototype, "oauthDomain", 2);
-y([
+f([
   S({ type: String, attribute: "oauth-region" })
 ], m.prototype, "oauthRegion", 2);
-y([
+f([
   S({ type: String, attribute: "oauth-user-pool-id" })
 ], m.prototype, "oauthUserPoolId", 2);
-y([
+f([
   S({ type: String, attribute: "oauth-client-id" })
 ], m.prototype, "oauthClientId", 2);
-y([
+f([
   S({ type: String, attribute: "oauth-redirect-uri" })
 ], m.prototype, "oauthRedirectUri", 2);
-y([
+f([
   S({ type: String, attribute: "oauth-spa-domain" })
 ], m.prototype, "oauthSpaDomain", 2);
-y([
+f([
   S({ type: String, attribute: "size" })
 ], m.prototype, "size", 2);
-y([
+f([
   S({ type: String, attribute: "data-theme", reflect: !0 })
 ], m.prototype, "theme", 2);
-y([
+f([
+  S({ type: Boolean, attribute: "disable-signup" })
+], m.prototype, "disableSignup", 2);
+f([
   b()
 ], m.prototype, "mode", 2);
-y([
+f([
   b()
 ], m.prototype, "resetStep", 2);
-y([
+f([
   b()
 ], m.prototype, "signupStep", 2);
-y([
+f([
   b()
 ], m.prototype, "isLoading", 2);
-y([
+f([
   b()
 ], m.prototype, "isClosing", 2);
-y([
+f([
   b()
 ], m.prototype, "isVisible", 2);
-y([
+f([
   b()
 ], m.prototype, "isLoggedIn", 2);
-y([
+f([
   b()
 ], m.prototype, "email", 2);
-y([
+f([
   b()
 ], m.prototype, "password", 2);
-y([
+f([
   b()
 ], m.prototype, "givenName", 2);
-y([
+f([
   b()
 ], m.prototype, "familyName", 2);
-y([
+f([
   b()
 ], m.prototype, "newPassword", 2);
-y([
+f([
   b()
 ], m.prototype, "confirmPassword", 2);
-y([
+f([
   b()
 ], m.prototype, "notice", 2);
-y([
+f([
   b()
 ], m.prototype, "error", 2);
-y([
+f([
   b()
 ], m.prototype, "errors", 2);
-y([
+f([
   b()
 ], m.prototype, "otpDigits", 2);
-y([
+f([
   b()
 ], m.prototype, "signupOtpDigits", 2);
-y([
+f([
   b()
 ], m.prototype, "isDragging", 2);
-y([
+f([
   b()
 ], m.prototype, "dragStartY", 2);
-y([
+f([
   b()
 ], m.prototype, "dragCurrentY", 2);
-y([
+f([
   b()
 ], m.prototype, "dragStartTime", 2);
-y([
+f([
   b()
 ], m.prototype, "lastDragEndTime", 2);
-y([
+f([
   it(".modal-container")
 ], m.prototype, "modalContainer", 2);
-y([
+f([
   it("#email-input")
 ], m.prototype, "emailInput", 2);
-y([
+f([
   it(".modal-body")
 ], m.prototype, "modalBody", 2);
-m = y([
+m = f([
   Zt("auth")
 ], m);
 export {
-  m as CalsAuth
+  m as Auth
 };

package/dist/components/index.d.ts

@@ -1,12 +1,18 @@
+import { AxiosInstance } from 'axios';
 import { CSSResult } from 'lit';
 import { LitElement } from 'lit';
 import { nothing } from 'lit';
 import { PropertyValues } from 'lit';
 import { TemplateResult } from 'lit-html';
 
-declare type AuthMode = 'signin' | 'signup';
+export declare const apiClient: ({ baseUrl, apiBaseUrl }: ApiClientConfig) => AxiosInstance;
 
-export declare class CalsAuth extends LitElement {
+declare interface ApiClientConfig {
+    baseUrl: string;
+    apiBaseUrl?: string;
+}
+
+export declare class Auth extends LitElement {
     open: boolean;
     initialMode: AuthMode;
     logoUrl: string;
@@ -19,6 +25,7 @@ export declare class CalsAuth extends LitElement {
     oauthSpaDomain: string;
     size: 'sm' | 'md' | 'lg';
     theme: 'light' | 'dark';
+    disableSignup: boolean;
     private mode;
     private resetStep;
     private signupStep;
@@ -110,7 +117,15 @@ export declare class CalsAuth extends LitElement {
     static styles: CSSResult;
 }
 
-export declare class CalsThemeToggle extends LitElement {
+declare type AuthMode = 'signin' | 'signup';
+
+export declare class AuthRefreshError extends Error {
+    constructor(message?: string);
+}
+
+export declare const createApiClient: ({ baseUrl, apiBaseUrl }: ApiClientConfig) => AxiosInstance;
+
+export declare class ThemeToggle extends LitElement {
     theme: 'light' | 'dark';
     storageKey: string;
     size: 'sm' | 'md' | 'lg';

package/dist/components/theme-toggle.js

@@ -752,5 +752,5 @@ g = E([
   Ut("cals-theme-toggle")
 ], g);
 export {
-  g as CalsThemeToggle
+  g as ThemeToggle
 };