@cal.macconnachie/web-components 2.4.12 → 2.4.13

package/dist/index.js

@@ -35,7 +35,7 @@ const ls = (r) => new Dr(typeof r == "string" ? r : r + "", void 0, Mt), B = (r,
   for (const i of e.cssRules) t += i.cssText;
   return ls(t);
 })(r) : r;
-const { is: ds, defineProperty: hs, getOwnPropertyDescriptor: ps, getOwnPropertyNames: us, getOwnPropertySymbols: gs, getPrototypeOf: fs } = Object, ut = globalThis, rr = ut.trustedTypes, ms = rr ? rr.emptyScript : "", bs = ut.reactiveElementPolyfillSupport, Ue = (r, e) => r, dt = { toAttribute(r, e) {
+const { is: ds, defineProperty: hs, getOwnPropertyDescriptor: ps, getOwnPropertyNames: us, getOwnPropertySymbols: fs, getPrototypeOf: gs } = Object, ut = globalThis, rr = ut.trustedTypes, ms = rr ? rr.emptyScript : "", bs = ut.reactiveElementPolyfillSupport, Ue = (r, e) => r, dt = { toAttribute(r, e) {
   switch (e) {
     case Boolean:
       r = r ? ms : null;
@@ -94,13 +94,13 @@ let Se = class extends HTMLElement {
   }
   static _$Ei() {
     if (this.hasOwnProperty(Ue("elementProperties"))) return;
-    const e = fs(this);
+    const e = gs(this);
     e.finalize(), e.l !== void 0 && (this.l = [...e.l]), this.elementProperties = new Map(e.elementProperties);
   }
   static finalize() {
     if (this.hasOwnProperty(Ue("finalized"))) return;
     if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(Ue("properties"))) {
-      const t = this.properties, i = [...us(t), ...gs(t)];
+      const t = this.properties, i = [...us(t), ...fs(t)];
       for (const s of i) this.createProperty(s, t[s]);
     }
     const e = this[Symbol.metadata];
@@ -248,8 +248,8 @@ let Se = class extends HTMLElement {
 };
 Se.elementStyles = [], Se.shadowRootOptions = { mode: "open" }, Se[Ue("elementProperties")] = /* @__PURE__ */ new Map(), Se[Ue("finalized")] = /* @__PURE__ */ new Map(), bs?.({ ReactiveElement: Se }), (ut.reactiveElementVersions ??= []).push("2.1.1");
 const Lt = globalThis, ht = Lt.trustedTypes, ir = ht ? ht.createPolicy("lit-html", { createHTML: (r) => r }) : void 0, Pr = "$lit$", he = `lit$${Math.random().toFixed(9).slice(2)}$`, Or = "?" + he, vs = `<${Or}>`, we = document, Fe = () => we.createComment(""), He = (r) => r === null || typeof r != "object" && typeof r != "function", Bt = Array.isArray, ys = (r) => Bt(r) || typeof r?.[Symbol.iterator] == "function", St = `[ 	
-\f\r]`, Le = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, or = /-->/g, ar = />/g, fe = RegExp(`>|${St}(?:([^\\s"'>=/]+)(${St}*=${St}*(?:[^ 	
-\f\r"'\`<>=]|("|')|))|$)`, "g"), nr = /'/g, lr = /"/g, Rr = /^(?:script|style|textarea|title)$/i, ws = (r) => (e, ...t) => ({ _$litType$: r, strings: e, values: t }), f = ws(1), ae = Symbol.for("lit-noChange"), k = Symbol.for("lit-nothing"), cr = /* @__PURE__ */ new WeakMap(), be = we.createTreeWalker(we, 129);
+\f\r]`, Le = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, or = /-->/g, ar = />/g, ge = RegExp(`>|${St}(?:([^\\s"'>=/]+)(${St}*=${St}*(?:[^ 	
+\f\r"'\`<>=]|("|')|))|$)`, "g"), nr = /'/g, lr = /"/g, Rr = /^(?:script|style|textarea|title)$/i, ws = (r) => (e, ...t) => ({ _$litType$: r, strings: e, values: t }), g = ws(1), ae = Symbol.for("lit-noChange"), k = Symbol.for("lit-nothing"), cr = /* @__PURE__ */ new WeakMap(), be = we.createTreeWalker(we, 129);
 function zr(r, e) {
   if (!Bt(r) || !r.hasOwnProperty("raw")) throw Error("invalid template strings array");
   return ir !== void 0 ? ir.createHTML(e) : e;
@@ -260,8 +260,8 @@ const xs = (r, e) => {
   for (let n = 0; n < t; n++) {
     const l = r[n];
     let h, c, p = -1, b = 0;
-    for (; b < l.length && (a.lastIndex = b, c = a.exec(l), c !== null); ) b = a.lastIndex, a === Le ? c[1] === "!--" ? a = or : c[1] !== void 0 ? a = ar : c[2] !== void 0 ? (Rr.test(c[2]) && (s = RegExp("</" + c[2], "g")), a = fe) : c[3] !== void 0 && (a = fe) : a === fe ? c[0] === ">" ? (a = s ?? Le, p = -1) : c[1] === void 0 ? p = -2 : (p = a.lastIndex - c[2].length, h = c[1], a = c[3] === void 0 ? fe : c[3] === '"' ? lr : nr) : a === lr || a === nr ? a = fe : a === or || a === ar ? a = Le : (a = fe, s = void 0);
-    const y = a === fe && r[n + 1].startsWith("/>") ? " " : "";
+    for (; b < l.length && (a.lastIndex = b, c = a.exec(l), c !== null); ) b = a.lastIndex, a === Le ? c[1] === "!--" ? a = or : c[1] !== void 0 ? a = ar : c[2] !== void 0 ? (Rr.test(c[2]) && (s = RegExp("</" + c[2], "g")), a = ge) : c[3] !== void 0 && (a = ge) : a === ge ? c[0] === ">" ? (a = s ?? Le, p = -1) : c[1] === void 0 ? p = -2 : (p = a.lastIndex - c[2].length, h = c[1], a = c[3] === void 0 ? ge : c[3] === '"' ? lr : nr) : a === lr || a === nr ? a = ge : a === or || a === ar ? a = Le : (a = ge, s = void 0);
+    const y = a === ge && r[n + 1].startsWith("/>") ? " " : "";
     o += a === Le ? l + vs : p >= 0 ? (i.push(h), l.slice(0, p) + Pr + l.slice(p) + he + y) : l + he + (p === -2 ? n : y);
   }
   return [zr(r, o + (r[t] || "<?>") + (e === 2 ? "</svg>" : e === 3 ? "</math>" : "")), i];
@@ -279,8 +279,8 @@ class je {
     for (; (s = be.nextNode()) !== null && l.length < n; ) {
       if (s.nodeType === 1) {
         if (s.hasAttributes()) for (const p of s.getAttributeNames()) if (p.endsWith(Pr)) {
-          const b = c[a++], y = s.getAttribute(p).split(he), g = /([.?@])?(.*)/.exec(b);
-          l.push({ type: 1, index: o, name: g[2], strings: y, ctor: g[1] === "." ? ks : g[1] === "?" ? Ss : g[1] === "@" ? _s : gt }), s.removeAttribute(p);
+          const b = c[a++], y = s.getAttribute(p).split(he), f = /([.?@])?(.*)/.exec(b);
+          l.push({ type: 1, index: o, name: f[2], strings: y, ctor: f[1] === "." ? ks : f[1] === "?" ? Ss : f[1] === "@" ? _s : ft }), s.removeAttribute(p);
         } else p.startsWith(he) && (l.push({ type: 6, index: o }), s.removeAttribute(p));
         if (Rr.test(s.tagName)) {
           const p = s.textContent.split(he), b = p.length - 1;
@@ -396,7 +396,7 @@ class Ae {
     this._$AM === void 0 && (this._$Cv = e, this._$AP?.(e));
   }
 }
-class gt {
+class ft {
   get tagName() {
     return this.element.tagName;
   }
@@ -421,7 +421,7 @@ class gt {
     e === k ? this.element.removeAttribute(this.name) : this.element.setAttribute(this.name, e ?? "");
   }
 }
-class ks extends gt {
+class ks extends ft {
   constructor() {
     super(...arguments), this.type = 3;
   }
@@ -429,7 +429,7 @@ class ks extends gt {
     this.element[this.name] = e === k ? void 0 : e;
   }
 }
-class Ss extends gt {
+class Ss extends ft {
   constructor() {
     super(...arguments), this.type = 4;
   }
@@ -437,7 +437,7 @@ class Ss extends gt {
     this.element.toggleAttribute(this.name, !!e && e !== k);
   }
 }
-class _s extends gt {
+class _s extends ft {
   constructor(e, t, i, s, o) {
     super(e, t, i, s, o), this.type = 5;
   }
@@ -601,14 +601,14 @@ const hr = (r, e, t) => {
     const s = Ls(r), { values: o, keys: a } = this.dt(e, t, i);
     if (!Array.isArray(s)) return this.ut = a, o;
     const n = this.ut ??= [], l = [];
-    let h, c, p = 0, b = s.length - 1, y = 0, g = o.length - 1;
-    for (; p <= b && y <= g; ) if (s[p] === null) p++;
+    let h, c, p = 0, b = s.length - 1, y = 0, f = o.length - 1;
+    for (; p <= b && y <= f; ) if (s[p] === null) p++;
     else if (s[b] === null) b--;
     else if (n[p] === a[y]) l[y] = me(s[p], o[y]), p++, y++;
-    else if (n[b] === a[g]) l[g] = me(s[b], o[g]), b--, g--;
-    else if (n[p] === a[g]) l[g] = me(s[p], o[g]), Be(r, l[g + 1], s[p]), p++, g--;
+    else if (n[b] === a[f]) l[f] = me(s[b], o[f]), b--, f--;
+    else if (n[p] === a[f]) l[f] = me(s[p], o[f]), Be(r, l[f + 1], s[p]), p++, f--;
     else if (n[b] === a[y]) l[y] = me(s[b], o[y]), Be(r, s[p], s[b]), b--, y++;
-    else if (h === void 0 && (h = hr(a, y, g), c = hr(n, p, b)), h.has(n[p])) if (h.has(n[b])) {
+    else if (h === void 0 && (h = hr(a, y, f), c = hr(n, p, b)), h.has(n[p])) if (h.has(n[b])) {
       const v = c.get(a[y]), m = v !== void 0 ? s[v] : null;
       if (m === null) {
         const x = Be(r, s[p]);
@@ -617,8 +617,8 @@ const hr = (r, e, t) => {
       y++;
     } else _t(s[b]), b--;
     else _t(s[p]), p++;
-    for (; y <= g; ) {
-      const v = Be(r, l[g + 1]);
+    for (; y <= f; ) {
+      const v = Be(r, l[f + 1]);
       me(v, o[y]), l[y++] = v;
     }
     for (; p <= b; ) {
@@ -689,7 +689,7 @@ const P = ({
       password: p,
       accessToken: b,
       refreshToken: y,
-      idToken: g
+      idToken: f
     }) => {
       const v = await fetch(`${r}${e.login}`, {
         method: "POST",
@@ -702,7 +702,7 @@ const P = ({
           password: p,
           accessToken: b,
           refreshToken: y,
-          idToken: g
+          idToken: f
         })
       });
       if (!v.ok) {
@@ -775,7 +775,7 @@ const P = ({
       password: p,
       phone_number: b,
       family_name: y,
-      given_name: g,
+      given_name: f,
       code: v
     }) => {
       const m = await fetch(`${r}${e.register}`, {
@@ -789,7 +789,7 @@ const P = ({
           password: p,
           phone_number: b,
           family_name: y,
-          given_name: g,
+          given_name: f,
           code: v
         })
       });
@@ -834,8 +834,8 @@ const P = ({
         })
       });
       if (!y.ok) {
-        const g = await y.json();
-        throw new Error(g.message || g.error || "Failed to reset password");
+        const f = await y.json();
+        throw new Error(f.message || f.error || "Failed to reset password");
       }
       return y.json();
     }
@@ -898,7 +898,7 @@ const P = ({
   }, y = async () => {
     const x = await b();
     window.location.href = x;
-  }, g = (x) => {
+  }, f = (x) => {
     const _ = sessionStorage.getItem("oauth_state");
     return sessionStorage.removeItem("oauth_state"), _ === x;
   }, v = () => {
@@ -908,7 +908,7 @@ const P = ({
   return {
     redirectToGoogleAuth: p,
     redirectToAppleAuth: y,
-    validateState: g,
+    validateState: f,
     getCodeVerifier: v,
     exchangeCodeForTokens: async (x) => {
       const _ = v();
@@ -1362,8 +1362,8 @@ class A extends R {
     }
   }
   render() {
-    return this.isLoading && this.hasHandledOAuthCallback ? f`
-        ${this.logoUrl.length > 0 ? f`
+    return this.isLoading && this.hasHandledOAuthCallback ? g`
+        ${this.logoUrl.length > 0 ? g`
               <header class="modal-header">
                 <div class="auth-header">
                 <img
@@ -1393,9 +1393,9 @@ class A extends R {
             ${this.renderAlerts()}
           </div>
         </div>
-      ` : this.isLoggedIn ? f`
+      ` : this.isLoggedIn ? g`
         <!-- Header -->
-        ${this.logoUrl.length > 0 ? f`
+        ${this.logoUrl.length > 0 ? g`
               <header class="modal-header">
                 <div class="auth-header">
                 <img
@@ -1425,9 +1425,9 @@ class A extends R {
             ${this.renderAlerts()}
           </div>
         </div>
-      ` : f`
+      ` : g`
       <!-- 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" ? g`
             <header class="modal-header">
 
                 <div class="auth-header">
@@ -1461,7 +1461,7 @@ class A extends R {
   }
   renderFormContent() {
     if (this.resetStep === "none" && (!this.mode || this.mode === "signin" || this.signupStep === "form"))
-      return f`
+      return g`
         <!-- Email -->
         <base-input
           id="email-input"
@@ -1487,7 +1487,7 @@ class A extends R {
           @input=${(e) => this.password = e.detail.value}
         ></base-input>
 
-        ${this.mode === "signin" && this.error ? f`
+        ${this.mode === "signin" && this.error ? g`
               <div class="forgot-row">
                 <button type="button" class="text-btn" @click=${this.startReset}>
                   Forgot your password?
@@ -1495,7 +1495,7 @@ class A extends R {
               </div>
             ` : k}
 
-        ${this.mode === "signup" ? f`
+        ${this.mode === "signup" ? g`
               <!-- Confirm Password -->
               <base-input
                 type="password"
@@ -1534,14 +1534,14 @@ class A extends R {
             ` : k}
       `;
     if (this.mode === "signup" && this.signupStep === "otp")
-      return f`
+      return g`
         <div class="otp-section">
           <label class="otp-label">Enter 6-digit code</label>
           <div class="otp-inputs" role="group" aria-label="One time code">
             ${pr(
         Array.from({ length: 6 }, (e, t) => t),
         (e) => e,
-        (e) => f`
+        (e) => g`
                 <input
                   class="otp-input signup-otp-input ${this.errors.signup_otp ? "otp-input--error" : ""}"
                   type="text"
@@ -1558,7 +1558,7 @@ class A extends R {
               `
       )}
           </div>
-          ${this.errors.signup_otp ? f`<p class="otp-error">${this.errors.signup_otp}</p>` : k}
+          ${this.errors.signup_otp ? g`<p class="otp-error">${this.errors.signup_otp}</p>` : k}
         </div>
         <div class="forgot-row">
           <button type="button" class="text-btn" @click=${this.backToSignupForm}>
@@ -1567,7 +1567,7 @@ class A extends R {
         </div>
       `;
     if (this.resetStep === "request")
-      return f`
+      return g`
         <base-input
           id="email-input"
           type="email"
@@ -1587,7 +1587,7 @@ class A extends R {
       `;
     if (this.resetStep === "confirm") {
       const e = this.otpDigits.every((t) => /^\d$/.test(t));
-      return f`
+      return g`
         <base-input
           type="email"
           label="Email Address"
@@ -1605,7 +1605,7 @@ class A extends R {
             ${pr(
         Array.from({ length: 6 }, (t, i) => i),
         (t) => t,
-        (t) => f`
+        (t) => g`
                 <input
                   class="otp-input reset-otp-input ${this.errors.otp ? "otp-input--error" : ""}"
                   type="text"
@@ -1622,10 +1622,10 @@ class A extends R {
               `
       )}
           </div>
-          ${this.errors.otp ? f`<p class="otp-error">${this.errors.otp}</p>` : k}
+          ${this.errors.otp ? g`<p class="otp-error">${this.errors.otp}</p>` : k}
         </div>
 
-        ${e ? f`
+        ${e ? g`
               <div class="new-password-fields">
                 <base-input
                   type="password"
@@ -1662,7 +1662,7 @@ class A extends R {
   }
   renderActions() {
     if (this.resetStep === "request")
-      return f`
+      return g`
         <base-button
           type="submit"
           variant="primary"
@@ -1675,7 +1675,7 @@ class A extends R {
         </base-button>
       `;
     if (this.resetStep === "confirm")
-      return this.otpDigits.every((t) => /^\d$/.test(t)) ? f`
+      return this.otpDigits.every((t) => /^\d$/.test(t)) ? g`
           <base-button
             type="submit"
             variant="primary"
@@ -1689,7 +1689,7 @@ class A extends R {
         ` : k;
     if (this.mode === "signup" && this.signupStep === "otp") {
       const e = this.signupOtpDigits.every((t) => /^\d$/.test(t));
-      return f`
+      return g`
         <base-button
           type="submit"
           variant="primary"
@@ -1702,7 +1702,7 @@ class A extends R {
         </base-button>
       `;
     }
-    return f`
+    return g`
       <base-button
         type="submit"
         variant="primary"
@@ -1714,7 +1714,7 @@ class A extends R {
         ${this.isLoading ? "Loading..." : this.mode === "signup" ? "Continue" : "Sign In"}
       </base-button>
 
-      ${this.isOAuthConfigured() && this.mode === "signin" ? f`
+      ${this.isOAuthConfigured() && this.mode === "signin" ? g`
             <div class="button-row">
               <button
                 type="button"
@@ -1738,8 +1738,8 @@ class A extends R {
     `;
   }
   renderAlerts() {
-    return f`
-      ${this.notice ? f`
+    return g`
+      ${this.notice ? g`
             <div class="alert alert--success">
               ${this.notice}
               <button class="alert-close" @click=${() => this.notice = ""} aria-label="Dismiss">
@@ -1747,7 +1747,7 @@ class A extends R {
               </button>
             </div>
           ` : k}
-      ${this.error && !this.isLoading ? f`
+      ${this.error && !this.isLoading ? g`
             <div class="alert alert--error">
               ${this.error}
               <button class="alert-close" @click=${() => this.error = ""} aria-label="Dismiss">
@@ -1758,7 +1758,7 @@ class A extends R {
     `;
   }
   renderFooter() {
-    return this.isLoggedIn ? k : this.resetStep === "none" && (!this.mode || this.mode === "signin" || this.signupStep === "form") ? this.disableSignup ? k : f`
+    return this.isLoggedIn ? k : this.resetStep === "none" && (!this.mode || this.mode === "signin" || this.signupStep === "form") ? this.disableSignup ? k : g`
         <div class="auth-footer">
           <p class="toggle-text">
             ${this.mode === "signup" ? "Already have an account?" : "Don't have an account?"}
@@ -1767,7 +1767,7 @@ class A extends R {
             ${this.mode === "signup" ? "Sign In" : "Sign Up"}
           </button>
         </div>
-      ` : f`
+      ` : g`
       <div class="auth-footer">
         <p class="toggle-text">
           Having trouble? Email
@@ -1777,7 +1777,7 @@ class A extends R {
     `;
   }
   renderGoogleIcon() {
-    return f`
+    return g`
       <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>
@@ -1787,7 +1787,7 @@ class A extends R {
     `;
   }
   renderAppleIcon() {
-    return f`
+    return g`
       <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>
@@ -2623,7 +2623,7 @@ class pe extends R {
       "base-button--loading": this.loading,
       [`base-button--hover-${this.hover}`]: !!this.hover
     };
-    return f`
+    return g`
       <button
         class=${S(e)}
         type=${this.type}
@@ -2633,7 +2633,7 @@ class pe extends R {
           <span class=${S({ "button-text": !0, hidden: this.loading })}>
             <slot></slot>
           </span>
-          ${this.loading ? f`
+          ${this.loading ? g`
                 <span class="loading-container">
                   <slot name="loading">
                     <svg viewBox="0 0 40 40" xmlns="http://www.w3.org/2000/svg">
@@ -2909,9 +2909,9 @@ class Ee extends R {
       [`base-card--padding-${this.padding}`]: !0,
       "base-card--hoverable": this.hoverable,
       "base-card--expandable": this.expandable
-    }, t = f`
+    }, t = g`
       <div class=${S(e)}>
-        ${this.expandable && !this.isExpanded ? f`
+        ${this.expandable && !this.isExpanded ? g`
               <button
                 class="expand-btn"
                 aria-label="Expand card"
@@ -2925,7 +2925,7 @@ class Ee extends R {
         <slot></slot>
       </div>
     `;
-    return this.isExpanded ? f`
+    return this.isExpanded ? g`
         <div class="expanded-overlay" @click=${this.handleOverlayClick}>
           <div class="expanded-card">
             ${t}
@@ -3561,12 +3561,12 @@ class D extends R {
       "date-display--empty": !this.value,
       "date-disabled": this.disabled
     };
-    return f`
+    return g`
       <div class="date-picker-group">
-        ${this.label ? f`
+        ${this.label ? g`
               <label for=${this.inputId} class="date-picker-label">
                 ${this.label}
-                ${this.required ? f`<span class="required-indicator" aria-label="required">*</span>` : ""}
+                ${this.required ? g`<span class="required-indicator" aria-label="required">*</span>` : ""}
               </label>
             ` : ""}
 
@@ -3590,7 +3590,7 @@ class D extends R {
             <base-icon name="calendar-day" size="20px"></base-icon>
           </div>
 
-          ${this.isOpen ? f`
+          ${this.isOpen ? g`
                 <div class="calendar-overlay" @click=${this.closeCalendar}></div>
                 <div
                   class=${S({
@@ -3601,12 +3601,12 @@ class D extends R {
                   role="dialog"
                   aria-label="Choose date"
                 >
-                  ${this.showMonthPicker ? f`
+                  ${this.showMonthPicker ? g`
                         <div class="picker-overlay">
                           <div class="month-picker-container">
                             <div class="month-picker-grid">
                               ${this.monthNames.map(
-      (s, o) => f`
+      (s, o) => g`
                                   <div
                                     class=${S({
         "month-item": !0,
@@ -3621,7 +3621,7 @@ class D extends R {
                             </div>
                           </div>
                         </div>
-                      ` : this.showYearPicker ? f`
+                      ` : this.showYearPicker ? g`
                           <div class="picker-overlay">
                             <div class="year-picker-container">
                               <div class="year-picker-header">
@@ -3645,7 +3645,7 @@ class D extends R {
                               </div>
                               <div class="year-picker-grid">
                                 ${this.yearRange.map(
-      (s) => f`
+      (s) => g`
                                     <div
                                       class=${S({
         "year-item": !0,
@@ -3660,7 +3660,7 @@ class D extends R {
                               </div>
                             </div>
                           </div>
-                        ` : f`
+                        ` : g`
                           <div class="calendar-header">
                             <button
                               type="button"
@@ -3689,12 +3689,12 @@ class D extends R {
                           </div>
 
                           <div class="calendar-weekdays">
-                            ${this.weekDays.map((s) => f`<div class="calendar-weekday">${s}</div>`)}
+                            ${this.weekDays.map((s) => g`<div class="calendar-weekday">${s}</div>`)}
                           </div>
 
                           <div class="calendar-days">
                             ${this.calendarDays.map(
-      (s) => s ? f`
+      (s) => s ? g`
                                       <div
                                         class=${S({
         "calendar-day": !0,
@@ -3706,7 +3706,7 @@ class D extends R {
                                       >
                                         ${s}
                                       </div>
-                                    ` : f`<div class="calendar-day day-empty"></div>`
+                                    ` : g`<div class="calendar-day day-empty"></div>`
     )}
                           </div>
 
@@ -3724,11 +3724,11 @@ class D extends R {
               ` : ""}
         </div>
 
-        ${e ? f`
+        ${e ? g`
               <div id="${this.inputId}-error" class="date-picker-error" role="alert">
                 ${this.error}
               </div>
-            ` : this.hint ? f` <div class="date-picker-hint">${this.hint}</div> ` : ""}
+            ` : this.hint ? g` <div class="date-picker-hint">${this.hint}</div> ` : ""}
       </div>
     `;
   }
@@ -4131,12 +4131,12 @@ class I extends R {
       "time-display--empty": !this.value,
       "time-disabled": this.disabled
     };
-    return f`
+    return g`
       <div class="time-picker-group">
-        ${this.label ? f`
+        ${this.label ? g`
               <label for=${this.inputId} class="time-picker-label">
                 ${this.label}
-                ${this.required ? f`<span class="required-indicator" aria-label="required">*</span>` : ""}
+                ${this.required ? g`<span class="required-indicator" aria-label="required">*</span>` : ""}
               </label>
             ` : ""}
 
@@ -4166,7 +4166,7 @@ class I extends R {
             </svg>
           </div>
 
-          ${this.isOpen ? f`
+          ${this.isOpen ? g`
                 <div class="time-overlay" @click=${this.closeTimePicker}></div>
                 <div
                   class=${S({
@@ -4182,7 +4182,7 @@ class I extends R {
                       <div class="time-column-label">Hour</div>
                       <div class="time-scroll">
                         ${this.hours.map(
-      (s) => f`
+      (s) => g`
                             <div
                               class=${S({
         "time-option": !0,
@@ -4201,7 +4201,7 @@ class I extends R {
                       <div class="time-column-label">Minute</div>
                       <div class="time-scroll">
                         ${this.minutes.map(
-      (s) => f`
+      (s) => g`
                             <div
                               class=${S({
         "time-option": !0,
@@ -4216,12 +4216,12 @@ class I extends R {
                       </div>
                     </div>
 
-                    ${this.format === "12" ? f`
+                    ${this.format === "12" ? g`
                           <div class="time-column">
                             <div class="time-column-label">Period</div>
                             <div class="time-scroll">
                               ${["AM", "PM"].map(
-      (s) => f`
+      (s) => g`
                                   <div
                                     class=${S({
         "time-option": !0,
@@ -4247,11 +4247,11 @@ class I extends R {
               ` : ""}
         </div>
 
-        ${e ? f`
+        ${e ? g`
               <div id="${this.inputId}-error" class="time-picker-error" role="alert">
                 ${this.error}
               </div>
-            ` : this.hint ? f` <div class="time-picker-hint">${this.hint}</div> ` : ""}
+            ` : this.hint ? g` <div class="time-picker-hint">${this.hint}</div> ` : ""}
       </div>
     `;
   }
@@ -4501,12 +4501,12 @@ class q extends R {
       "datetime-pickers--error": e,
       "datetime-pickers--disabled": this.disabled
     };
-    return f`
+    return g`
       <div class="datetime-picker-group">
-        ${this.label ? f`
+        ${this.label ? g`
               <label for=${this.inputId} class="datetime-picker-label">
                 ${this.label}
-                ${this.required ? f`<span class="required-indicator" aria-label="required">*</span>` : ""}
+                ${this.required ? g`<span class="required-indicator" aria-label="required">*</span>` : ""}
               </label>
             ` : ""}
 
@@ -4546,11 +4546,11 @@ class q extends R {
           </div>
         </div>
 
-        ${e ? f`
+        ${e ? g`
               <div id="${this.inputId}-error" class="datetime-picker-error" role="alert">
                 ${this.error}
               </div>
-            ` : this.hint ? f` <div class="datetime-picker-hint">${this.hint}</div> ` : ""}
+            ` : this.hint ? g` <div class="datetime-picker-hint">${this.hint}</div> ` : ""}
       </div>
     `;
   }
@@ -4662,16 +4662,16 @@ class j extends R {
       let l;
       e < 0 ? l = o + n : l = o - n;
       let h = this.currentDetentIndex;
-      const c = 0.5, p = 1, b = this.isClosable(), y = s[0], g = this.currentDetentIndex === 0;
+      const c = 0.5, p = 1, b = this.isClosable(), y = s[0], f = this.currentDetentIndex === 0;
       if (i > c && Math.abs(e) > 30)
-        e > 0 ? b ? i > p && g && e > 50 || l < y * 0.8 ? h = -1 : h = Math.max(0, this.currentDetentIndex - 1) : h = Math.max(0, this.currentDetentIndex - 1) : h = Math.min(s.length - 1, this.currentDetentIndex + 1);
+        e > 0 ? b ? i > p && f && e > 50 || l < y * 0.8 ? h = -1 : h = Math.max(0, this.currentDetentIndex - 1) : h = Math.max(0, this.currentDetentIndex - 1) : h = Math.min(s.length - 1, this.currentDetentIndex + 1);
       else {
         let _ = 0, C = Math.abs(l - s[0]);
         for (let T = 1; T < s.length; T++) {
           const N = Math.abs(l - s[T]);
           N < C && (C = N, _ = T);
         }
-        h = _, b && (g && l < y * 0.7 || l < y - 5) && (h = -1);
+        h = _, b && (f && l < y * 0.7 || l < y - 5) && (h = -1);
       }
       const v = h < 0, m = this.modalContainer, x = v ? 0 : s[h];
       if (m.style.transition = "none", e < 0) {
@@ -4819,7 +4819,7 @@ class j extends R {
       "modal-container--dragging": this.isDragging,
       [`modal-container--${this.size}`]: !0
     }, i = this.getCurrentDetentHeight(), s = this.getActiveDetents(), o = this.isClosable() || s.length > 1;
-    return f`
+    return g`
       <!-- Drawer Overlay -->
       <div
         class=${S(e)}
@@ -4832,7 +4832,7 @@ class j extends R {
           aria-modal="true"
         >
           <!-- Drawer Handle -->
-          ${o ? f`
+          ${o ? g`
             <div
               class="drawer-handle"
               @click=${this.handleHandleClick}
@@ -5211,7 +5211,7 @@ const ii = `<?xml version="1.0" encoding="UTF-8"?>
   <path class="cls-1" d="M28.72,29.53l-.06-10.01c0-1.1-.9-1.99-2-1.99h-.01c-1.1,0-2,.91-1.99,2.01l.06,9.81c-4.04.77-7.11,4.33-7.11,8.59s3.12,7.88,7.21,8.61l.15,23.93c0,1.1.9,1.99,2,1.99h.01c1.1,0,1.99-.91,1.99-2.01l-.15-24.12c3.64-1.07,6.28-4.44,6.28-8.39s-2.68-7.38-6.38-8.41ZM26.68,42.68c-.11,0-.22.02-.33.02-2.61,0-4.74-2.13-4.74-4.75s2.13-4.75,4.74-4.75h.04c.08,0,.15.01.23.02,2.51.13,4.48,2.21,4.48,4.73s-1.94,4.57-4.42,4.73Z"/>
   <path class="cls-1" d="M47.24,49.24l-.18-29.72c0-1.1-.9-1.99-2-1.99h-.01c-1.1,0-2,.91-1.99,2.01l.18,29.84c-3.74,1.01-6.45,4.4-6.45,8.44s2.76,7.5,6.55,8.46l.03,4.19c0,1.1.9,1.99,2,1.99h.01c1.1,0,1.99-.91,1.99-2.01l-.03-4.07c3.96-.83,6.95-4.35,6.95-8.56s-3.04-7.79-7.05-8.58ZM45.53,62.57s-.09,0-.13,0c-2.58-.08-4.6-2.16-4.6-4.74s2-4.63,4.54-4.74c.04,0,.16,0,.21,0,2.62,0,4.75,2.13,4.75,4.75s-2.12,4.74-4.76,4.75Z"/>
   <path class="cls-1" d="M72.4,35.93c0-4.18-2.95-7.68-6.87-8.54l-.05-7.87c0-1.1-.9-1.99-2-1.99h-.01c-1.1,0-1.99.91-1.99,2.01l.05,7.91c-3.8.95-6.63,4.41-6.63,8.48s2.87,7.57,6.73,8.5l.15,26.04c0,1.1.9,1.99,2,1.99h.01c1.1,0,1.99-.91,1.99-2.01l-.15-26c3.87-.9,6.77-4.37,6.77-8.52ZM63.63,40.68c-2.61-.01-4.73-2.14-4.73-4.75s2.09-4.71,4.67-4.74c.05,0,.11,0,.16,0,2.58.04,4.67,2.16,4.67,4.75s-2.13,4.75-4.77,4.75Z"/>
-</svg>`, gi = `<?xml version="1.0" encoding="UTF-8"?>
+</svg>`, fi = `<?xml version="1.0" encoding="UTF-8"?>
 <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 90">
   <defs>
     <style>
@@ -5221,7 +5221,7 @@ const ii = `<?xml version="1.0" encoding="UTF-8"?>
     </style>
   </defs>
   <path class="cls-1" d="M66.9,75.38h-10.67c-2.06,0-3.74-1.68-3.74-3.74v-13.62c0-1.6-1.3-2.91-2.91-2.91h-8.19c-1.6,0-2.91,1.31-2.91,2.91v13.62c0,2.06-1.68,3.74-3.74,3.74h-10.67c-1.92,0-3.48-1.56-3.48-3.48v-28.1h-5.25c-1.01,0-1.92-.6-2.3-1.54s-.17-2,.54-2.72l29.45-29.45c.66-.66,1.53-1.02,2.46-1.02h.02c.93,0,1.8.37,2.45,1.03l29.43,29.43c.72.72.93,1.78.54,2.72s-1.29,1.54-2.3,1.54h-5.25v28.1c0,1.92-1.56,3.48-3.48,3.48ZM56.49,71.38h9.89v-29.58c0-1.1.9-2,2-2h3.61l-26.51-26.51-26.51,26.51h3.61c1.1,0,2,.9,2,2v29.58h9.89v-13.36c0-3.81,3.1-6.91,6.91-6.91h8.19c3.81,0,6.91,3.1,6.91,6.91v13.36ZM74.57,42.37h0,0ZM45.12,12.93h0s0,0,0,0Z"/>
-</svg>`, fi = `<?xml version="1.0" encoding="UTF-8"?>
+</svg>`, gi = `<?xml version="1.0" encoding="UTF-8"?>
 <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 90 90">
   <defs>
     <style>
@@ -5355,7 +5355,7 @@ class Tt extends Ft {
 }
 Tt.directiveName = "unsafeHTML", Tt.resultType = 1;
 const Ir = qt(Tt);
-var Ci = Object.defineProperty, ft = (r, e, t, i) => {
+var Ci = Object.defineProperty, gt = (r, e, t, i) => {
   for (var s = void 0, o = r.length - 1, a; o >= 0; o--)
     (a = r[o]) && (s = a(e, t, s) || s);
   return s && Ci(e, t, s), s;
@@ -5371,8 +5371,8 @@ const Ai = /* @__PURE__ */ Object.assign({
   "../../public/icons/external-link.svg": hi,
   "../../public/icons/file-cabinet.svg": pi,
   "../../public/icons/filters.svg": ui,
-  "../../public/icons/house.svg": gi,
-  "../../public/icons/moon.svg": fi,
+  "../../public/icons/house.svg": fi,
+  "../../public/icons/moon.svg": gi,
   "../../public/icons/open-email.svg": mi,
   "../../public/icons/paperclip.svg": bi,
   "../../public/icons/reply.svg": vi,
@@ -5436,7 +5436,7 @@ class Te extends R {
     }
   }
   render() {
-    return f`
+    return g`
       <div
         style="
           --icon-size: ${this.size};
@@ -5447,16 +5447,16 @@ class Te extends R {
     `;
   }
 }
-ft([
+gt([
   u({ type: String })
 ], Te.prototype, "name");
-ft([
+gt([
   u({ type: String })
 ], Te.prototype, "size");
-ft([
+gt([
   u({ type: String })
 ], Te.prototype, "color");
-ft([
+gt([
   w()
 ], Te.prototype, "svgContent");
 var Ti = Object.defineProperty, ee = (r, e, t, i) => {
@@ -5651,12 +5651,12 @@ class G extends R {
       "base-input--error": e,
       "base-input--disabled": this.disabled
     };
-    return f`
+    return g`
       <div class="input-group">
-        ${this.label ? f`
+        ${this.label ? g`
               <label for=${this.inputId} class="input-label">
                 ${this.label}
-                ${this.required ? f`<span class="required-indicator" aria-label="required">*</span>` : ""}
+                ${this.required ? g`<span class="required-indicator" aria-label="required">*</span>` : ""}
               </label>
             ` : ""}
 
@@ -5682,11 +5682,11 @@ class G extends R {
           </div>
         </div>
 
-        ${e ? f`
+        ${e ? g`
               <div id="${this.inputId}-error" class="input-error" role="alert">
                 ${this.error}
               </div>
-            ` : this.hint ? f` <div class="input-hint">${this.hint}</div> ` : ""}
+            ` : this.hint ? g` <div class="input-hint">${this.hint}</div> ` : ""}
       </div>
     `;
   }
@@ -5748,7 +5748,7 @@ class Ze extends R {
       display: flex;
       flex-direction: column;
       width: 100%;
-      background-color: var(--color-bg-primary);
+      background-color: inherit;
     }
 
     /* Variants */
@@ -5760,6 +5760,7 @@ class Ze extends R {
       border: 1px solid var(--color-border);
       border-radius: var(--radius-lg);
       overflow: hidden;
+      gap: 0;
     }
 
     .base-list--divided {
@@ -5770,27 +5771,15 @@ class Ze extends R {
       border-bottom: 1px solid var(--color-border);
     }
 
-    /* Size variants - affects spacing between items */
-    .base-list--sm {
-      gap: var(--space-1);
-    }
-
+    /* Size variants - affects spacing between items for default variant only */
     .base-list--sm.base-list--default {
       gap: var(--space-1);
     }
 
-    .base-list--md {
-      gap: var(--space-2);
-    }
-
     .base-list--md.base-list--default {
       gap: var(--space-2);
     }
 
-    .base-list--lg {
-      gap: var(--space-3);
-    }
-
     .base-list--lg.base-list--default {
       gap: var(--space-3);
     }
@@ -5818,7 +5807,7 @@ class Ze extends R {
       [`base-list--${this.variant}`]: !0,
       "base-list--interactive": this.interactive
     };
-    return f`
+    return g`
       <div class=${S(e)} role=${this.role}>
         <slot></slot>
       </div>
@@ -5927,7 +5916,6 @@ class ie extends R {
       transition: all var(--transition-fast);
       pointer-events: none;
       z-index: 2;
-      background: linear-gradient(to right, transparent, var(--color-bg-primary) 20%);
       padding-left: var(--space-8);
     }
 
@@ -5987,7 +5975,7 @@ class ie extends R {
       width: 100%;
       font-family: var(--font-family-sans);
       color: var(--color-text-primary);
-      background-color: var(--color-bg-primary);
+      background-color: inherit;
       border: none;
       text-align: left;
       box-sizing: border-box;
@@ -6112,9 +6100,9 @@ class ie extends R {
       "base-list-item--selected": this.selected,
       "base-list-item--swiping": this.isDragging
     };
-    return f`
+    return g`
       <div class="list-item-wrapper">
-        ${this.leftSwipeAction ? f`
+        ${this.leftSwipeAction ? g`
               <div class="swipe-actions swipe-actions--left">
                 <button
                   class="swipe-action-button"
@@ -6126,12 +6114,12 @@ class ie extends R {
                     size="24px"
                     color="white"
                   ></base-icon>
-                  ${this.leftSwipeAction.label ? f`<span>${this.leftSwipeAction.label}</span>` : ""}
+                  ${this.leftSwipeAction.label ? g`<span>${this.leftSwipeAction.label}</span>` : ""}
                 </button>
               </div>
             ` : ""}
 
-        ${this.rightSwipeAction ? f`
+        ${this.rightSwipeAction ? g`
               <div class="swipe-actions swipe-actions--right">
                 <button
                   class="swipe-action-button"
@@ -6143,15 +6131,15 @@ class ie extends R {
                     size="24px"
                     color="white"
                   ></base-icon>
-                  ${this.rightSwipeAction.label ? f`<span>${this.rightSwipeAction.label}</span>` : ""}
+                  ${this.rightSwipeAction.label ? g`<span>${this.rightSwipeAction.label}</span>` : ""}
                 </button>
               </div>
             ` : ""}
 
         <!-- Desktop hover actions -->
-        ${this.leftSwipeAction || this.rightSwipeAction ? f`
+        ${this.leftSwipeAction || this.rightSwipeAction ? g`
               <div class="desktop-actions">
-                ${this.leftSwipeAction ? f`
+                ${this.leftSwipeAction ? g`
                       <button
                         class="desktop-action-button"
                         style="background-color: ${this.leftSwipeAction.color || "var(--color-success)"}"
@@ -6168,7 +6156,7 @@ class ie extends R {
                         ></base-icon>
                       </button>
                     ` : ""}
-                ${this.rightSwipeAction ? f`
+                ${this.rightSwipeAction ? g`
                       <button
                         class="desktop-action-button"
                         style="background-color: ${this.rightSwipeAction.color || "var(--color-error)"}"
@@ -6601,12 +6589,12 @@ class M extends R {
       "select-input--visible": this.searchable && this.isOpen,
       "select-disabled": this.disabled
     };
-    return f`
+    return g`
       <div class="select-group">
-        ${this.label ? f`
+        ${this.label ? g`
               <label for=${this.selectId} class="select-label">
                 ${this.label}
-                ${this.required ? f`<span class="required-indicator" aria-label="required">*</span>` : ""}
+                ${this.required ? g`<span class="required-indicator" aria-label="required">*</span>` : ""}
               </label>
             ` : ""}
 
@@ -6648,7 +6636,7 @@ class M extends R {
             </svg>
           </div>
 
-          ${this.isOpen ? f`
+          ${this.isOpen ? g`
                 <div class="dropdown-overlay" @click=${this.closeDropdown}></div>
                 <div
                   class=${S({
@@ -6658,8 +6646,8 @@ class M extends R {
     })}
                   role="listbox"
                 >
-                  ${this.filteredOptions.length === 0 ? f` <div class="dropdown-no-results">No options found</div> ` : this.filteredOptions.map(
-      (o, a) => f`
+                  ${this.filteredOptions.length === 0 ? g` <div class="dropdown-no-results">No options found</div> ` : this.filteredOptions.map(
+      (o, a) => g`
                           <div
                             class=${S({
         "dropdown-option": !0,
@@ -6678,11 +6666,11 @@ class M extends R {
               ` : ""}
         </div>
 
-        ${e ? f`
+        ${e ? g`
               <div id="${this.selectId}-error" class="select-error" role="alert">
                 ${this.error}
               </div>
-            ` : this.hint ? f` <div class="select-hint">${this.hint}</div> ` : ""}
+            ` : this.hint ? g` <div class="select-hint">${this.hint}</div> ` : ""}
 
         <!-- Hidden slot for option elements -->
         <slot @slotchange=${this.parseSlottedOptions}></slot>
@@ -6803,7 +6791,7 @@ class De extends R {
     );
   }
   render() {
-    return f`
+    return g`
       <div
         class="base-tab"
         id="tabpanel-${this.id}"
@@ -7418,7 +7406,7 @@ class oe extends R {
       "tab-button": !0,
       "tab-button--active": i
     };
-    return f`
+    return g`
       <button
         role="tab"
         aria-selected=${i}
@@ -7429,9 +7417,9 @@ class oe extends R {
         @click=${() => this.handleTabClick(e.id)}
         @keydown=${(a) => this.handleKeyDown(a, t)}
       >
-        ${e.icon ? f`<span class="tab-icon">${Ir(e.icon)}</span>` : k}
-        ${s || this.variant !== "sidebar" || this.isMobile ? f`<span class="tab-label">${e.label}</span>` : k}
-        ${e.badge !== void 0 && e.badge > 0 && (s || this.variant !== "sidebar" || this.isMobile) ? f`<span class="tab-badge">${e.badge}</span>` : k}
+        ${e.icon ? g`<span class="tab-icon">${Ir(e.icon)}</span>` : k}
+        ${s || this.variant !== "sidebar" || this.isMobile ? g`<span class="tab-label">${e.label}</span>` : k}
+        ${e.badge !== void 0 && e.badge > 0 && (s || this.variant !== "sidebar" || this.isMobile) ? g`<span class="tab-badge">${e.badge}</span>` : k}
       </button>
     `;
   }
@@ -7446,9 +7434,9 @@ class oe extends R {
       "sidebar-toggle": !0,
       "sidebar-toggle--hidden": this.forceExpanded
     };
-    return f`
+    return g`
       <div class=${S(e)} role="tablist" aria-label=${this.ariaLabel}>
-        ${this.variant === "sidebar" ? f`
+        ${this.variant === "sidebar" ? g`
               <div class=${S(i)}>
                 <!-- Sidebar Header -->
                 <div class="sidebar-header">
@@ -7478,7 +7466,7 @@ class oe extends R {
                   <slot name="sidebar-footer"></slot>
                 </div>
               </div>
-            ` : f`
+            ` : g`
               <div class="tabs-header">
                 ${this.tabs.map((o, a) => this.renderTabButton(o, a))}
               </div>
@@ -7743,12 +7731,12 @@ class K extends R {
       "character-count--warning": s && !o,
       "character-count--error": o
     };
-    return f`
+    return g`
       <div class="textarea-group">
-        ${this.label ? f`
+        ${this.label ? g`
               <label for=${this.textareaId} class="textarea-label">
                 ${this.label}
-                ${this.required ? f`<span class="required-indicator" aria-label="required">*</span>` : ""}
+                ${this.required ? g`<span class="required-indicator" aria-label="required">*</span>` : ""}
               </label>
             ` : ""}
 
@@ -7769,18 +7757,18 @@ class K extends R {
             @focus=${this.handleFocus}
           ></textarea>
 
-          ${i ? f`
+          ${i ? g`
                 <div class=${S(n)}>
                   ${t}${this.maxlength ? ` / ${this.maxlength}` : ""}
                 </div>
               ` : ""}
         </div>
 
-        ${e ? f`
+        ${e ? g`
               <div id="${this.textareaId}-error" class="textarea-error" role="alert">
                 ${this.error}
               </div>
-            ` : this.hint ? f` <div class="textarea-hint">${this.hint}</div> ` : ""}
+            ` : this.hint ? g` <div class="textarea-hint">${this.hint}</div> ` : ""}
       </div>
     `;
   }
@@ -8235,13 +8223,13 @@ class Pe extends R {
   `;
   }
   render() {
-    return f`
+    return g`
       <div class="toast-container ${this.variant}">
-        ${this.dismiss !== "manual" ? f`
+        ${this.dismiss !== "manual" ? g`
             <div class="toast-progress"></div>
           ` : ""}
         <slot></slot>
-        ${this.dismiss === "manual" ? f`
+        ${this.dismiss === "manual" ? g`
             <button
               class="toast-dismiss-btn ${this.variant}"
               aria-label="Dismiss toast"
@@ -8481,7 +8469,7 @@ class Oe extends R {
       "quantity-input": !0,
       [`quantity-input--${this.size}`]: !0
     };
-    return f`
+    return g`
       <div class=${S(e)}>
         <button
           type="button"
@@ -8594,7 +8582,7 @@ class Re extends R {
   }
   render() {
     const e = (this.currentTheme + 1) % this.themes.length, t = this.themes[e], i = `Switch to ${t?.theme ?? "next"} theme`;
-    return f`
+    return g`
       <button
         class="theme-toggle ${this.getSizeClass()} ${this.getVariantClass()}"
         @click=${this.toggleTheme}
@@ -8844,11 +8832,11 @@ function Dt() {
 }
 const po = (r, e, t, { allOwnKeys: i } = {}) => (Qe(e, (s, o) => {
   t && Y(s) ? r[o] = Br(s, t) : r[o] = s;
-}, { allOwnKeys: i }), r), uo = (r) => (r.charCodeAt(0) === 65279 && (r = r.slice(1)), r), go = (r, e, t, i) => {
+}, { allOwnKeys: i }), r), uo = (r) => (r.charCodeAt(0) === 65279 && (r = r.slice(1)), r), fo = (r, e, t, i) => {
   r.prototype = Object.create(e.prototype, i), r.prototype.constructor = r, Object.defineProperty(r, "super", {
     value: e.prototype
   }), t && Object.assign(r.prototype, t);
-}, fo = (r, e, t, i) => {
+}, go = (r, e, t, i) => {
   let s, o, a;
   const n = {};
   if (e = e || {}, r == null) return e;
@@ -8979,8 +8967,8 @@ const To = (r) => {
   extend: po,
   trim: ho,
   stripBOM: uo,
-  inherits: go,
-  toFlatObject: fo,
+  inherits: fo,
+  toFlatObject: go,
   kindOf: vt,
   kindOfTest: te,
   endsWith: mo,
@@ -9067,7 +9055,7 @@ function Pt(r) {
 function Wr(r) {
   return d.endsWith(r, "[]") ? r.slice(0, -2) : r;
 }
-function gr(r, e, t) {
+function fr(r, e, t) {
   return r ? r.concat(e).map(function(s, o) {
     return s = Wr(s), !t && o ? "[" + s + "]" : s;
   }).join(t ? "." : "") : e;
@@ -9091,42 +9079,42 @@ function wt(r, e, t) {
   const i = t.metaTokens, s = t.visitor || c, o = t.dots, a = t.indexes, l = (t.Blob || typeof Blob < "u" && Blob) && d.isSpecCompliantForm(e);
   if (!d.isFunction(s))
     throw new TypeError("visitor must be a function");
-  function h(g) {
-    if (g === null) return "";
-    if (d.isDate(g))
-      return g.toISOString();
-    if (d.isBoolean(g))
-      return g.toString();
-    if (!l && d.isBlob(g))
+  function h(f) {
+    if (f === null) return "";
+    if (d.isDate(f))
+      return f.toISOString();
+    if (d.isBoolean(f))
+      return f.toString();
+    if (!l && d.isBlob(f))
       throw new $("Blob is not supported. Use a Buffer instead.");
-    return d.isArrayBuffer(g) || d.isTypedArray(g) ? l && typeof Blob == "function" ? new Blob([g]) : Buffer.from(g) : g;
+    return d.isArrayBuffer(f) || d.isTypedArray(f) ? l && typeof Blob == "function" ? new Blob([f]) : Buffer.from(f) : f;
   }
-  function c(g, v, m) {
-    let x = g;
-    if (g && !m && typeof g == "object") {
+  function c(f, v, m) {
+    let x = f;
+    if (f && !m && typeof f == "object") {
       if (d.endsWith(v, "{}"))
-        v = i ? v : v.slice(0, -2), g = JSON.stringify(g);
-      else if (d.isArray(g) && Mo(g) || (d.isFileList(g) || d.endsWith(v, "[]")) && (x = d.toArray(g)))
+        v = i ? v : v.slice(0, -2), f = JSON.stringify(f);
+      else if (d.isArray(f) && Mo(f) || (d.isFileList(f) || d.endsWith(v, "[]")) && (x = d.toArray(f)))
         return v = Wr(v), x.forEach(function(C, T) {
           !(d.isUndefined(C) || C === null) && e.append(
             // eslint-disable-next-line no-nested-ternary
-            a === !0 ? gr([v], T, o) : a === null ? v : v + "[]",
+            a === !0 ? fr([v], T, o) : a === null ? v : v + "[]",
             h(C)
           );
         }), !1;
     }
-    return Pt(g) ? !0 : (e.append(gr(m, v, o), h(g)), !1);
+    return Pt(f) ? !0 : (e.append(fr(m, v, o), h(f)), !1);
   }
   const p = [], b = Object.assign(Io, {
     defaultVisitor: c,
     convertValue: h,
     isVisitable: Pt
   });
-  function y(g, v) {
-    if (!d.isUndefined(g)) {
-      if (p.indexOf(g) !== -1)
+  function y(f, v) {
+    if (!d.isUndefined(f)) {
+      if (p.indexOf(f) !== -1)
         throw Error("Circular reference detected in " + v.join("."));
-      p.push(g), d.forEach(g, function(x, _) {
+      p.push(f), d.forEach(f, function(x, _) {
         (!(d.isUndefined(x) || x === null) && s.call(
           e,
           x,
@@ -9141,7 +9129,7 @@ function wt(r, e, t) {
     throw new TypeError("data must be an object");
   return y(r), e;
 }
-function fr(r) {
+function gr(r) {
   const e = {
     "!": "%21",
     "'": "%27",
@@ -9164,8 +9152,8 @@ Kr.append = function(e, t) {
 };
 Kr.toString = function(e) {
   const t = e ? function(i) {
-    return e.call(this, i, fr);
-  } : fr;
+    return e.call(this, i, gr);
+  } : gr;
   return this._pairs.map(function(s) {
     return t(s[0]) + "=" + t(s[1]);
   }, "").join("&");
@@ -9798,9 +9786,9 @@ const rs = (r) => {
     const s = rs(r);
     let o = s.data;
     const a = W.from(s.headers).normalize();
-    let { responseType: n, onUploadProgress: l, onDownloadProgress: h } = s, c, p, b, y, g;
+    let { responseType: n, onUploadProgress: l, onDownloadProgress: h } = s, c, p, b, y, f;
     function v() {
-      y && y(), g && g(), s.cancelToken && s.cancelToken.unsubscribe(c), s.signal && s.signal.removeEventListener("abort", c);
+      y && y(), f && f(), s.cancelToken && s.cancelToken.unsubscribe(c), s.signal && s.signal.removeEventListener("abort", c);
     }
     let m = new XMLHttpRequest();
     m.open(s.method.toUpperCase(), s.url, !0), m.timeout = s.timeout;
@@ -9841,7 +9829,7 @@ const rs = (r) => {
       )), m = null;
     }, o === void 0 && a.setContentType(null), "setRequestHeader" in m && d.forEach(a.toJSON(), function(T, N) {
       m.setRequestHeader(N, T);
-    }), d.isUndefined(s.withCredentials) || (m.withCredentials = !!s.withCredentials), n && n !== "json" && (m.responseType = s.responseType), h && ([b, g] = pt(h, !0), m.addEventListener("progress", b)), l && m.upload && ([p, y] = pt(l), m.upload.addEventListener("progress", p), m.upload.addEventListener("loadend", y)), (s.cancelToken || s.signal) && (c = (C) => {
+    }), d.isUndefined(s.withCredentials) || (m.withCredentials = !!s.withCredentials), n && n !== "json" && (m.responseType = s.responseType), h && ([b, f] = pt(h, !0), m.addEventListener("progress", b)), l && m.upload && ([p, y] = pt(l), m.upload.addEventListener("progress", p), m.upload.addEventListener("loadend", y)), (s.cancelToken || s.signal) && (c = (C) => {
       m && (i(!C || C.type ? new Me(null, r, m) : C), m.abort(), m = null);
     }, s.cancelToken && s.cancelToken.subscribe(c), s.signal && (s.signal.aborted ? c() : s.signal.addEventListener("abort", c)));
     const _ = ra(s.url);
@@ -9884,9 +9872,9 @@ const rs = (r) => {
   for (; i < t; )
     s = i + e, yield r.slice(i, s), i = s;
 }, ua = async function* (r, e) {
-  for await (const t of ga(r))
+  for await (const t of fa(r))
     yield* pa(t, e);
-}, ga = async function* (r) {
+}, fa = async function* (r) {
   if (r[Symbol.asyncIterator]) {
     yield* r;
     return;
@@ -9931,7 +9919,7 @@ const rs = (r) => {
   }, {
     highWaterMark: 2
   });
-}, $r = 64 * 1024, { isFunction: ot } = d, fa = (({ Request: r, Response: e }) => ({
+}, $r = 64 * 1024, { isFunction: ot } = d, ga = (({ Request: r, Response: e }) => ({
   Request: r,
   Response: e
 }))(d.global), {
@@ -9946,50 +9934,50 @@ const rs = (r) => {
 }, ma = (r) => {
   r = d.merge.call({
     skipUndefined: !0
-  }, fa, r);
+  }, ga, r);
   const { fetch: e, Request: t, Response: i } = r, s = e ? ot(e) : typeof fetch == "function", o = ot(t), a = ot(i);
   if (!s)
     return !1;
-  const n = s && ot(kr), l = s && (typeof Sr == "function" ? /* @__PURE__ */ ((g) => (v) => g.encode(v))(new Sr()) : async (g) => new Uint8Array(await new t(g).arrayBuffer())), h = o && n && _r(() => {
-    let g = !1;
+  const n = s && ot(kr), l = s && (typeof Sr == "function" ? /* @__PURE__ */ ((f) => (v) => f.encode(v))(new Sr()) : async (f) => new Uint8Array(await new t(f).arrayBuffer())), h = o && n && _r(() => {
+    let f = !1;
     const v = new t(F.origin, {
       body: new kr(),
       method: "POST",
       get duplex() {
-        return g = !0, "half";
+        return f = !0, "half";
       }
     }).headers.has("Content-Type");
-    return g && !v;
+    return f && !v;
   }), c = a && n && _r(() => d.isReadableStream(new i("").body)), p = {
-    stream: c && ((g) => g.body)
+    stream: c && ((f) => f.body)
   };
-  s && ["text", "arrayBuffer", "blob", "formData", "stream"].forEach((g) => {
-    !p[g] && (p[g] = (v, m) => {
-      let x = v && v[g];
+  s && ["text", "arrayBuffer", "blob", "formData", "stream"].forEach((f) => {
+    !p[f] && (p[f] = (v, m) => {
+      let x = v && v[f];
       if (x)
         return x.call(v);
-      throw new $(`Response type '${g}' is not supported`, $.ERR_NOT_SUPPORT, m);
+      throw new $(`Response type '${f}' is not supported`, $.ERR_NOT_SUPPORT, m);
     });
   });
-  const b = async (g) => {
-    if (g == null)
+  const b = async (f) => {
+    if (f == null)
       return 0;
-    if (d.isBlob(g))
-      return g.size;
-    if (d.isSpecCompliantForm(g))
+    if (d.isBlob(f))
+      return f.size;
+    if (d.isSpecCompliantForm(f))
       return (await new t(F.origin, {
         method: "POST",
-        body: g
+        body: f
       }).arrayBuffer()).byteLength;
-    if (d.isArrayBufferView(g) || d.isArrayBuffer(g))
-      return g.byteLength;
-    if (d.isURLSearchParams(g) && (g = g + ""), d.isString(g))
-      return (await l(g)).byteLength;
-  }, y = async (g, v) => {
-    const m = d.toFiniteNumber(g.getContentLength());
+    if (d.isArrayBufferView(f) || d.isArrayBuffer(f))
+      return f.byteLength;
+    if (d.isURLSearchParams(f) && (f = f + ""), d.isString(f))
+      return (await l(f)).byteLength;
+  }, y = async (f, v) => {
+    const m = d.toFiniteNumber(f.getContentLength());
     return m ?? b(v);
   };
-  return async (g) => {
+  return async (f) => {
     let {
       url: v,
       method: m,
@@ -10003,10 +9991,10 @@ const rs = (r) => {
       headers: $t,
       withCredentials: tt = "same-origin",
       fetchOptions: Wt
-    } = rs(g), Kt = e || fetch;
+    } = rs(f), Kt = e || fetch;
     X = X ? (X + "").toLowerCase() : "text";
     let rt = ha([_, C && C.toAbortSignal()], T), Ie = null;
-    const ge = rt && rt.unsubscribe && (() => {
+    const fe = rt && rt.unsubscribe && (() => {
       rt.unsubscribe();
     });
     let Xt;
@@ -10038,7 +10026,7 @@ const rs = (r) => {
       Ie = o && new t(v, Jt);
       let ce = await (o ? Kt(Ie, Wt) : Kt(v, Jt));
       const Gt = c && (X === "stream" || X === "response");
-      if (c && (N || Gt && ge)) {
+      if (c && (N || Gt && fe)) {
         const de = {};
         ["status", "statusText", "headers"].forEach((Qt) => {
           de[Qt] = ce[Qt];
@@ -10049,30 +10037,30 @@ const rs = (r) => {
         ) || [];
         ce = new i(
           xr(ce.body, $r, kt, () => {
-            st && st(), ge && ge();
+            st && st(), fe && fe();
           }),
           de
         );
       }
       X = X || "text";
-      let ns = await p[d.findKey(p, X) || "text"](ce, g);
-      return !Gt && ge && ge(), await new Promise((de, ke) => {
+      let ns = await p[d.findKey(p, X) || "text"](ce, f);
+      return !Gt && fe && fe(), await new Promise((de, ke) => {
         es(de, ke, {
           data: ns,
           headers: W.from(ce.headers),
           status: ce.status,
           statusText: ce.statusText,
-          config: g,
+          config: f,
           request: Ie
         });
       });
     } catch (re) {
-      throw ge && ge(), re && re.name === "TypeError" && /Load failed|fetch/i.test(re.message) ? Object.assign(
-        new $("Network Error", $.ERR_NETWORK, g, Ie),
+      throw fe && fe(), re && re.name === "TypeError" && /Load failed|fetch/i.test(re.message) ? Object.assign(
+        new $("Network Error", $.ERR_NETWORK, f, Ie),
         {
           cause: re.cause || re
         }
-      ) : $.from(re, re && re.code, g, Ie);
+      ) : $.from(re, re && re.code, f, Ie);
     }
   };
 }, ba = /* @__PURE__ */ new Map(), ss = (r) => {
@@ -10265,8 +10253,8 @@ class ye {
     );
     o && d.forEach(
       ["delete", "get", "head", "post", "put", "patch", "common"],
-      (g) => {
-        delete o[g];
+      (f) => {
+        delete o[f];
       }
     ), t.headers = W.concat(a, o);
     const n = [];
@@ -10280,17 +10268,17 @@ class ye {
     });
     let c, p = 0, b;
     if (!l) {
-      const g = [Ar.bind(this), void 0];
-      for (g.unshift(...n), g.push(...h), b = g.length, c = Promise.resolve(t); p < b; )
-        c = c.then(g[p++], g[p++]);
+      const f = [Ar.bind(this), void 0];
+      for (f.unshift(...n), f.push(...h), b = f.length, c = Promise.resolve(t); p < b; )
+        c = c.then(f[p++], f[p++]);
       return c;
     }
     b = n.length;
     let y = t;
     for (; p < b; ) {
-      const g = n[p++], v = n[p++];
+      const f = n[p++], v = n[p++];
       try {
-        y = g(y);
+        y = f(y);
       } catch (m) {
         v.call(this, m);
         break;
@@ -10298,8 +10286,8 @@ class ye {
     }
     try {
       c = Ar.call(this, y);
-    } catch (g) {
-      return Promise.reject(g);
+    } catch (f) {
+      return Promise.reject(f);
     }
     for (p = 0, b = h.length; p < b; )
       c = c.then(h[p++], h[p++]);