@duyluonganduin/acl-web-components 0.0.61 → 0.0.63

package/dist/{anduin-table-D6X8sSGF.js → anduin-table-DGYFCUkj.js}

@@ -45,10 +45,10 @@ const n3 = (r) => new o3(typeof r == "string" ? r : r + "", void 0, j5), g = (r,
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const { is: A3, defineProperty: D3, getOwnPropertyDescriptor: P3, getOwnPropertyNames: B3, getOwnPropertySymbols: F3, getPrototypeOf: I3 } = Object, u1 = globalThis, V4 = u1.trustedTypes, O3 = V4 ? V4.emptyScript : "", Y2 = u1.reactiveElementPolyfillSupport, s2 = (r, e) => r, E2 = { toAttribute(r, e) {
+const { is: A3, defineProperty: D3, getOwnPropertyDescriptor: P3, getOwnPropertyNames: B3, getOwnPropertySymbols: F3, getPrototypeOf: O3 } = Object, u1 = globalThis, V4 = u1.trustedTypes, I3 = V4 ? V4.emptyScript : "", Y2 = u1.reactiveElementPolyfillSupport, a2 = (r, e) => r, E2 = { toAttribute(r, e) {
   switch (e) {
     case Boolean:
-      r = r ? O3 : null;
+      r = r ? I3 : null;
       break;
     case Object:
     case Array:
@@ -75,7 +75,7 @@ const { is: A3, defineProperty: D3, getOwnPropertyDescriptor: P3, getOwnProperty
   return t;
 } }, U5 = (r, e) => !A3(r, e), x4 = { attribute: !0, type: String, converter: E2, reflect: !1, useDefault: !1, hasChanged: U5 };
 Symbol.metadata ?? (Symbol.metadata = Symbol("metadata")), u1.litPropertyMetadata ?? (u1.litPropertyMetadata = /* @__PURE__ */ new WeakMap());
-let I1 = class extends HTMLElement {
+let O1 = class extends HTMLElement {
   static addInitializer(e) {
     this._$Ei(), (this.l ?? (this.l = [])).push(e);
   }
@@ -103,13 +103,13 @@ let I1 = class extends HTMLElement {
     return this.elementProperties.get(e) ?? x4;
   }
   static _$Ei() {
-    if (this.hasOwnProperty(s2("elementProperties"))) return;
-    const e = I3(this);
+    if (this.hasOwnProperty(a2("elementProperties"))) return;
+    const e = O3(this);
     e.finalize(), e.l !== void 0 && (this.l = [...e.l]), this.elementProperties = new Map(e.elementProperties);
   }
   static finalize() {
-    if (this.hasOwnProperty(s2("finalized"))) return;
-    if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(s2("properties"))) {
+    if (this.hasOwnProperty(a2("finalized"))) return;
+    if (this.finalized = !0, this._$Ei(), this.hasOwnProperty(a2("properties"))) {
       const t = this.properties, o = [...B3(t), ...F3(t)];
       for (const i of o) this.createProperty(i, t[i]);
     }
@@ -278,15 +278,15 @@ let I1 = class extends HTMLElement {
   firstUpdated(e) {
   }
 };
-I1.elementStyles = [], I1.shadowRootOptions = { mode: "open" }, I1[s2("elementProperties")] = /* @__PURE__ */ new Map(), I1[s2("finalized")] = /* @__PURE__ */ new Map(), Y2 == null || Y2({ ReactiveElement: I1 }), (u1.reactiveElementVersions ?? (u1.reactiveElementVersions = [])).push("2.1.2");
+O1.elementStyles = [], O1.shadowRootOptions = { mode: "open" }, O1[a2("elementProperties")] = /* @__PURE__ */ new Map(), O1[a2("finalized")] = /* @__PURE__ */ new Map(), Y2 == null || Y2({ ReactiveElement: O1 }), (u1.reactiveElementVersions ?? (u1.reactiveElementVersions = [])).push("2.1.2");
 /**
  * @license
  * Copyright 2017 Google LLC
  * SPDX-License-Identifier: BSD-3-Clause
  */
-const a2 = globalThis, M4 = (r) => r, z2 = a2.trustedTypes, w4 = z2 ? z2.createPolicy("lit-html", { createHTML: (r) => r }) : void 0, r3 = "$lit$", h1 = `lit$${Math.random().toFixed(9).slice(2)}$`, l3 = "?" + h1, T3 = `<${l3}>`, k1 = document, c2 = () => k1.createComment(""), C2 = (r) => r === null || typeof r != "object" && typeof r != "function", G5 = Array.isArray, N3 = (r) => G5(r) || typeof (r == null ? void 0 : r[Symbol.iterator]) == "function", q2 = `[ 	
+const s2 = globalThis, M4 = (r) => r, z2 = s2.trustedTypes, w4 = z2 ? z2.createPolicy("lit-html", { createHTML: (r) => r }) : void 0, r3 = "$lit$", h1 = `lit$${Math.random().toFixed(9).slice(2)}$`, l3 = "?" + h1, T3 = `<${l3}>`, k1 = document, c2 = () => k1.createComment(""), C2 = (r) => r === null || typeof r != "object" && typeof r != "function", G5 = Array.isArray, N3 = (r) => G5(r) || typeof (r == null ? void 0 : r[Symbol.iterator]) == "function", q2 = `[ 	
 \f\r]`, e2 = /<(?:(!--|\/[^a-zA-Z])|(\/?[a-zA-Z][^>\s]*)|(\/?$))/g, Z4 = /-->/g, k4 = />/g, V1 = RegExp(`>|${q2}(?:([^\\s"'>=/]+)(${q2}*=${q2}*(?:[^ 	
-\f\r"'\`<>=]|("|')|))|$)`, "g"), R4 = /'/g, $4 = /"/g, s3 = /^(?:script|style|textarea|title)$/i, a3 = (r) => (e, ...t) => ({ _$litType$: r, strings: e, values: t }), a = a3(1), p2 = a3(2), R1 = Symbol.for("lit-noChange"), p = Symbol.for("lit-nothing"), E4 = /* @__PURE__ */ new WeakMap(), M1 = k1.createTreeWalker(k1, 129);
+\f\r"'\`<>=]|("|')|))|$)`, "g"), R4 = /'/g, $4 = /"/g, a3 = /^(?:script|style|textarea|title)$/i, s3 = (r) => (e, ...t) => ({ _$litType$: r, strings: e, values: t }), s = s3(1), p2 = s3(2), R1 = Symbol.for("lit-noChange"), p = Symbol.for("lit-nothing"), E4 = /* @__PURE__ */ new WeakMap(), M1 = k1.createTreeWalker(k1, 129);
 function d3(r, e) {
   if (!G5(r) || !r.hasOwnProperty("raw")) throw Error("invalid template strings array");
   return w4 !== void 0 ? w4.createHTML(e) : e;
@@ -297,7 +297,7 @@ const j3 = (r, e) => {
   for (let d = 0; d < t; d++) {
     const c = r[d];
     let C, h, f = -1, y = 0;
-    for (; y < c.length && (l.lastIndex = y, h = l.exec(c), h !== null); ) y = l.lastIndex, l === e2 ? h[1] === "!--" ? l = Z4 : h[1] !== void 0 ? l = k4 : h[2] !== void 0 ? (s3.test(h[2]) && (i = RegExp("</" + h[2], "g")), l = V1) : h[3] !== void 0 && (l = V1) : l === V1 ? h[0] === ">" ? (l = i ?? e2, f = -1) : h[1] === void 0 ? f = -2 : (f = l.lastIndex - h[2].length, C = h[1], l = h[3] === void 0 ? V1 : h[3] === '"' ? $4 : R4) : l === $4 || l === R4 ? l = V1 : l === Z4 || l === k4 ? l = e2 : (l = V1, i = void 0);
+    for (; y < c.length && (l.lastIndex = y, h = l.exec(c), h !== null); ) y = l.lastIndex, l === e2 ? h[1] === "!--" ? l = Z4 : h[1] !== void 0 ? l = k4 : h[2] !== void 0 ? (a3.test(h[2]) && (i = RegExp("</" + h[2], "g")), l = V1) : h[3] !== void 0 && (l = V1) : l === V1 ? h[0] === ">" ? (l = i ?? e2, f = -1) : h[1] === void 0 ? f = -2 : (f = l.lastIndex - h[2].length, C = h[1], l = h[3] === void 0 ? V1 : h[3] === '"' ? $4 : R4) : l === $4 || l === R4 ? l = V1 : l === Z4 || l === k4 ? l = e2 : (l = V1, i = void 0);
     const b = l === V1 && r[d + 1].startsWith("/>") ? " " : "";
     n += l === e2 ? c + T3 : f >= 0 ? (o.push(C), c.slice(0, f) + r3 + c.slice(f) + h1 + b) : c + h1 + (f === -2 ? d : b);
   }
@@ -319,7 +319,7 @@ class h2 {
           const y = h[l++], b = i.getAttribute(f).split(h1), V = /([.?@])?(.*)/.exec(y);
           c.push({ type: 1, index: n, name: V[2], strings: b, ctor: V[1] === "." ? G3 : V[1] === "?" ? K3 : V[1] === "@" ? W3 : K2 }), i.removeAttribute(f);
         } else f.startsWith(h1) && (c.push({ type: 6, index: n }), i.removeAttribute(f));
-        if (s3.test(i.tagName)) {
+        if (a3.test(i.tagName)) {
           const f = i.textContent.split(h1), y = f.length - 1;
           if (y > 0) {
             i.textContent = z2 ? z2.emptyScript : "";
@@ -504,8 +504,8 @@ class Y3 {
     T1(this, e);
   }
 }
-const X2 = a2.litHtmlPolyfillSupport;
-X2 == null || X2(h2, k2), (a2.litHtmlVersions ?? (a2.litHtmlVersions = [])).push("3.3.2");
+const X2 = s2.litHtmlPolyfillSupport;
+X2 == null || X2(h2, k2), (s2.litHtmlVersions ?? (s2.litHtmlVersions = [])).push("3.3.2");
 const q3 = (r, e, t) => {
   const o = (t == null ? void 0 : t.renderBefore) ?? e;
   let i = o._$litPart$;
@@ -521,7 +521,7 @@ const q3 = (r, e, t) => {
  * SPDX-License-Identifier: BSD-3-Clause
  */
 const Z1 = globalThis;
-let u = class extends I1 {
+let u = class extends O1 {
   constructor() {
     super(...arguments), this.renderOptions = { host: this }, this._$Do = void 0;
   }
@@ -577,7 +577,7 @@ const X3 = { attribute: !0, type: String, converter: E2, reflect: !1, hasChanged
   }
   throw Error("Unsupported decorator location: " + o);
 };
-function s(r) {
+function a(r) {
   return (e, t) => typeof t == "object" ? J3(r, e, t) : ((o, i, n) => {
     const l = i.hasOwnProperty(n);
     return i.constructor.createProperty(n, o), l ? Object.getOwnPropertyDescriptor(i, n) : void 0;
@@ -589,7 +589,7 @@ function s(r) {
  * SPDX-License-Identifier: BSD-3-Clause
  */
 function m(r) {
-  return s({ ...r, state: !0, attribute: !1 });
+  return a({ ...r, state: !0, attribute: !1 });
 }
 /**
  * @license
@@ -682,10 +682,10 @@ X5.styles = g`
   `;
 let u2 = X5;
 c3([
-  s()
+  a()
 ], u2.prototype, "size");
 c3([
-  s()
+  a()
 ], u2.prototype, "percent");
 customElements.get("anduin-spinner") || customElements.define("anduin-spinner", u2);
 var t7 = Object.defineProperty, C3 = (r, e, t, o) => {
@@ -755,10 +755,10 @@ J5.styles = g`
   `;
 let g2 = J5;
 C3([
-  s({ reflect: !0 })
+  a({ reflect: !0 })
 ], g2.prototype, "size");
 C3([
-  s({ reflect: !0 })
+  a({ reflect: !0 })
 ], g2.prototype, "color");
 customElements.get("anduin-sparkle-spinner") || customElements.define("anduin-sparkle-spinner", g2);
 var o7 = Object.defineProperty, K5 = (r, e, t, o) => {
@@ -809,7 +809,7 @@ const p3 = [
     originY: 39.0175,
     delay: -0.97
   }
-], S4 = 20, A4 = 5, n7 = 900, r7 = 160, D4 = 2, l7 = "cubic-bezier(0.22, 0.61, 0.36, 1)", Q2 = 180, o2 = "ai-spinner--loading", n2 = "ai-spinner--settling", w1 = "ai-spinner__segment", s7 = p3.map(
+], S4 = 20, A4 = 5, n7 = 900, r7 = 160, D4 = 2, l7 = "cubic-bezier(0.22, 0.61, 0.36, 1)", Q2 = 180, o2 = "ai-spinner--loading", n2 = "ai-spinner--settling", w1 = "ai-spinner__segment", a7 = p3.map(
   (r) => `
     .${w1}--${r.index} {
       transform-origin: ${r.originX}px ${r.originY}px;
@@ -827,7 +827,7 @@ const p3 = [
   }
   render() {
     const e = this.size > 0 ? this.size : S4;
-    return a`
+    return s`
       <div class="ai-spinner">
         <svg
           class="ai-spinner__logo"
@@ -958,7 +958,7 @@ Q5.styles = g`
       animation: ai-spinner-pulse 1.52s linear infinite;
     }
 
-    ${n3(s7)}
+    ${n3(a7)}
 
     @keyframes ai-spinner-spin {
       to {
@@ -999,10 +999,10 @@ Q5.styles = g`
   `;
 let N1 = Q5;
 K5([
-  s({ reflect: !0 })
+  a({ reflect: !0 })
 ], N1.prototype, "state");
 K5([
-  s({ type: Number, reflect: !0 })
+  a({ type: Number, reflect: !0 })
 ], N1.prototype, "size");
 K5([
   k(".ai-spinner")
@@ -1370,10 +1370,10 @@ const P4 = {
   zoomOut: [{ d: "M4.5 6.25C4.08579 6.25 3.75 6.58579 3.75 7C3.75 7.41421 4.08579 7.75 4.5 7.75H9.5C9.91421 7.75 10.25 7.41421 10.25 7C10.25 6.58579 9.91421 6.25 9.5 6.25H4.5ZM7 14C8.57591 14 10.0302 13.4792 11.2001 12.6004C11.2281 12.6376 11.259 12.6733 11.2929 12.7071L14.2929 15.7071C14.6834 16.0976 15.3166 16.0976 15.7071 15.7071C16.0976 15.3166 16.0976 14.6834 15.7071 14.2929L12.7071 11.2929C12.6733 11.259 12.6376 11.2281 12.6004 11.2001C13.4792 10.0302 14 8.57591 14 7C14 3.13401 10.866 0 7 0C3.13401 0 0 3.13401 0 7C0 10.866 3.13401 14 7 14ZM7 12.5C10.0376 12.5 12.5 10.0376 12.5 7C12.5 3.96243 10.0376 1.5 7 1.5C3.96243 1.5 1.5 3.96243 1.5 7C1.5 10.0376 3.96243 12.5 7 12.5Z", fillRule: "evenodd", clipRule: "evenodd" }],
   zz: [{ d: "M9.75 1.02686C9.33579 1.02686 9 1.36264 9 1.77686C9 2.19107 9.33579 2.52686 9.75 2.52686H12.8186L9.13336 7.84995C8.97457 8.07931 8.9562 8.37784 9.08567 8.62494C9.21513 8.87203 9.47104 9.02686 9.75 9.02686H14.25C14.6642 9.02686 15 8.69107 15 8.27686C15 7.86264 14.6642 7.52686 14.25 7.52686H11.1814L14.8666 2.20376C15.0254 1.97441 15.0438 1.67587 14.9143 1.42878C14.7849 1.18168 14.529 1.02686 14.25 1.02686H9.75ZM1.75 7.02686C1.33579 7.02686 1 7.36264 1 7.77686C1 8.19107 1.33579 8.52686 1.75 8.52686H4.81858L1.13336 13.8499C0.974572 14.0793 0.956201 14.3778 1.08567 14.6249C1.21513 14.872 1.47104 15.0269 1.75 15.0269H6.25C6.66422 15.0269 7 14.6911 7 14.2769C7 13.8626 6.66422 13.5269 6.25 13.5269H3.18143L6.86665 8.20376C7.02543 7.97441 7.0438 7.67587 6.91434 7.42878C6.78487 7.18168 6.52896 7.02686 6.25 7.02686H1.75Z", fillRule: "evenodd", clipRule: "evenodd" }]
 };
-var a7 = Object.defineProperty, h3 = (r, e, t, o) => {
+var s7 = Object.defineProperty, h3 = (r, e, t, o) => {
   for (var i = void 0, n = r.length - 1, l; n >= 0; n--)
     (l = r[n]) && (i = l(e, t, i) || i);
-  return i && a7(e, t, i), i;
+  return i && s7(e, t, i), i;
 };
 const ee = class ee extends u {
   constructor() {
@@ -1409,10 +1409,10 @@ ee.styles = g`
   `;
 let f2 = ee;
 h3([
-  s()
+  a()
 ], f2.prototype, "name");
 h3([
-  s({ type: Number })
+  a({ type: Number })
 ], f2.prototype, "size");
 customElements.get("anduin-icon") || customElements.define("anduin-icon", f2);
 var d7 = Object.defineProperty, c7 = (r, e, t, o) => {
@@ -1467,13 +1467,13 @@ const te = class te extends u {
   }
   render() {
     const e = g3(this.variant);
-    return a`<div class="badge ${e}" part="badge"><slot></slot></div>`;
+    return s`<div class="badge ${e}" part="badge"><slot></slot></div>`;
   }
 };
 te.styles = [u3];
 let S2 = te;
 c7([
-  s()
+  a()
 ], S2.prototype, "variant");
 customElements.get("anduin-badge") || customElements.define("anduin-badge", S2);
 var C7 = Object.defineProperty, f3 = (r, e, t, o) => {
@@ -1495,19 +1495,19 @@ const ie = class ie extends u {
       t ? "badge--hidden" : "",
       o ? "badge--square" : ""
     ].filter(Boolean).join(" ");
-    return a`<div class="${i}" part="badge">${this.formatCount(this.count)}</div>`;
+    return s`<div class="${i}" part="badge">${this.formatCount(this.count)}</div>`;
   }
 };
 ie.styles = [u3];
 let v2 = ie;
 f3([
-  s()
+  a()
 ], v2.prototype, "variant");
 f3([
-  s({ type: Number })
+  a({ type: Number })
 ], v2.prototype, "count");
 customElements.get("anduin-badge-count") || customElements.define("anduin-badge-count", v2);
-var p7 = Object.defineProperty, B = (r, e, t, o) => {
+var p7 = Object.defineProperty, F = (r, e, t, o) => {
   for (var i = void 0, n = r.length - 1, l; n >= 0; n--)
     (l = r[n]) && (i = l(e, t, i) || i);
   return i && p7(e, t, i), i;
@@ -1549,15 +1549,15 @@ const oe = class oe extends u {
       this.loading ? "button--loading" : "",
       this.selected ? "button--selected" : "",
       this.iconOnly && this.appearance !== "text" && !this.fullWidth ? "button--icon-only" : ""
-    ].filter(Boolean).join(" "), i = a`
+    ].filter(Boolean).join(" "), i = s`
       <div class="button__content button__content--${t}">
-        ${this.startIcon ? a`<anduin-icon name="${this.startIcon}" size="${this.iconSize()}"></anduin-icon>` : p}
+        ${this.startIcon ? s`<anduin-icon name="${this.startIcon}" size="${this.iconSize()}"></anduin-icon>` : p}
         <slot @slotchange=${this.onSlotChange}></slot>
-        ${this.endIcon ? a`<anduin-icon name="${this.endIcon}" size="${this.iconSize()}"></anduin-icon>` : p}
+        ${this.endIcon ? s`<anduin-icon name="${this.endIcon}" size="${this.iconSize()}"></anduin-icon>` : p}
       </div>
-      ${this.loading && this.appearance !== "text" ? a`<div class="button__loading"><anduin-spinner size="small"></anduin-spinner></div>` : p}
+      ${this.loading && this.appearance !== "text" ? s`<div class="button__loading"><anduin-spinner size="small"></anduin-spinner></div>` : p}
     `;
-    return this.href ? a`
+    return this.href ? s`
         <a
           class="${o}"
           href="${this.disabled ? "" : this.href}"
@@ -1566,7 +1566,7 @@ const oe = class oe extends u {
           download="${this.download || p}"
           aria-label="${this.label || p}"
         >${i}</a>
-      ` : a`
+      ` : s`
       <button
         type="button"
         class="${o}"
@@ -1689,53 +1689,53 @@ oe.styles = g`
     .button--icon-only.button--medium { width: 32px; min-width: 32px; padding-left: 0; padding-right: 0; }
     .button--icon-only.button--large { width: 40px; min-width: 40px; padding-left: 0; padding-right: 0; }
   `;
-let R = oe;
-B([
+let $ = oe;
+F([
   m()
-], R.prototype, "iconOnly");
-B([
-  s({ converter: (r) => r || "filled" })
-], R.prototype, "appearance");
-B([
-  s()
-], R.prototype, "variant");
-B([
-  s()
-], R.prototype, "size");
-B([
-  s({ type: Boolean })
-], R.prototype, "disabled");
-B([
-  s({ type: Boolean })
-], R.prototype, "loading");
-B([
-  s({ type: Boolean, attribute: "full-width", reflect: !0 })
-], R.prototype, "fullWidth");
-B([
-  s({ type: Boolean })
-], R.prototype, "pill");
-B([
-  s({ type: Boolean })
-], R.prototype, "selected");
-B([
-  s()
-], R.prototype, "href");
-B([
-  s({ type: Boolean, attribute: "open-new-tab" })
-], R.prototype, "openNewTab");
-B([
-  s()
-], R.prototype, "download");
-B([
-  s({ attribute: "start-icon" })
-], R.prototype, "startIcon");
-B([
-  s({ attribute: "end-icon" })
-], R.prototype, "endIcon");
-B([
-  s()
-], R.prototype, "label");
-customElements.get("anduin-button") || customElements.define("anduin-button", R);
+], $.prototype, "iconOnly");
+F([
+  a({ converter: (r) => r || "filled" })
+], $.prototype, "appearance");
+F([
+  a()
+], $.prototype, "variant");
+F([
+  a()
+], $.prototype, "size");
+F([
+  a({ type: Boolean })
+], $.prototype, "disabled");
+F([
+  a({ type: Boolean })
+], $.prototype, "loading");
+F([
+  a({ type: Boolean, attribute: "full-width", reflect: !0 })
+], $.prototype, "fullWidth");
+F([
+  a({ type: Boolean })
+], $.prototype, "pill");
+F([
+  a({ type: Boolean })
+], $.prototype, "selected");
+F([
+  a()
+], $.prototype, "href");
+F([
+  a({ type: Boolean, attribute: "open-new-tab" })
+], $.prototype, "openNewTab");
+F([
+  a()
+], $.prototype, "download");
+F([
+  a({ attribute: "start-icon" })
+], $.prototype, "startIcon");
+F([
+  a({ attribute: "end-icon" })
+], $.prototype, "endIcon");
+F([
+  a()
+], $.prototype, "label");
+customElements.get("anduin-button") || customElements.define("anduin-button", $);
 var u7 = Object.defineProperty, g7 = (r, e, t, o) => {
   for (var i = void 0, n = r.length - 1, l; n >= 0; n--)
     (l = r[n]) && (i = l(e, t, i) || i);
@@ -1746,7 +1746,7 @@ const ne = class ne extends u {
     super(...arguments), this.variant = "gray";
   }
   render() {
-    return a`
+    return s`
       <div class="callout callout--${this.variant}" part="callout">
         <slot name="icon"></slot>
         <div><slot></slot></div>
@@ -1768,7 +1768,7 @@ ne.styles = g`
   `;
 let A2 = ne;
 g7([
-  s()
+  a()
 ], A2.prototype, "variant");
 customElements.get("anduin-callout") || customElements.define("anduin-callout", A2);
 var f7 = Object.defineProperty, v3 = (r, e, t, o) => {
@@ -1794,17 +1794,17 @@ const re = class re extends u {
     });
   }
   render() {
-    return this.direction === "vertical" ? this.hasContent ? a`
+    return this.direction === "vertical" ? this.hasContent ? s`
             <div class="divider--vertical">
               <div class="divider__line--vertical"></div>
               <div><slot @slotchange=${this.onSlotChange}></slot></div>
               <div class="divider__line--vertical"></div>
-            </div>` : a`<div class="divider--vertical divider--vertical-empty"><slot @slotchange=${this.onSlotChange}></slot></div>` : this.hasContent ? a`
+            </div>` : s`<div class="divider--vertical divider--vertical-empty"><slot @slotchange=${this.onSlotChange}></slot></div>` : this.hasContent ? s`
             <div class="divider--horizontal">
               <div class="divider__line--horizontal"></div>
               <div><slot @slotchange=${this.onSlotChange}></slot></div>
               <div class="divider__line--horizontal"></div>
-            </div>` : a`<div class="divider--horizontal divider--horizontal-empty"><slot @slotchange=${this.onSlotChange}></slot></div>`;
+            </div>` : s`<div class="divider--horizontal divider--horizontal-empty"><slot @slotchange=${this.onSlotChange}></slot></div>`;
   }
 };
 re.styles = g`
@@ -1819,7 +1819,7 @@ re.styles = g`
   `;
 let m2 = re;
 v3([
-  s({ reflect: !0 })
+  a({ reflect: !0 })
 ], m2.prototype, "direction");
 v3([
   m()
@@ -1835,7 +1835,7 @@ const le = class le extends u {
     super(...arguments), this.variant = "gray";
   }
   render() {
-    return a`<div class="dot dot--${this.variant}" part="dot"></div>`;
+    return s`<div class="dot dot--${this.variant}" part="dot"></div>`;
   }
 };
 le.styles = g`
@@ -1849,7 +1849,7 @@ le.styles = g`
   `;
 let D2 = le;
 m7([
-  s()
+  a()
 ], D2.prototype, "variant");
 customElements.get("anduin-dot") || customElements.define("anduin-dot", D2);
 var b7 = Object.defineProperty, m3 = (r, e, t, o) => {
@@ -1857,7 +1857,7 @@ var b7 = Object.defineProperty, m3 = (r, e, t, o) => {
     (l = r[n]) && (i = l(e, t, i) || i);
   return i && b7(e, t, i), i;
 };
-const se = class se extends u {
+const ae = class ae extends u {
   constructor() {
     super(...arguments), this.percent = "", this.height = "medium";
   }
@@ -1865,7 +1865,7 @@ const se = class se extends u {
     const e = this.height === "large" ? 8 : 3, t = this.percent === "" || this.percent === null;
     let o = "";
     const i = ["progress__fill"];
-    return t ? i.push("progress__fill--indeterminate") : o = `width: ${Math.max(0, Math.min(1, parseFloat(this.percent) || 0)) * 100}%;`, a`
+    return t ? i.push("progress__fill--indeterminate") : o = `width: ${Math.max(0, Math.min(1, parseFloat(this.percent) || 0)) * 100}%;`, s`
       <div class="progress" style="height: ${e}px;" part="progress">
         <div class="${i.join(" ")}" style="${o}"></div>
         <div class="progress__background"></div>
@@ -1873,7 +1873,7 @@ const se = class se extends u {
     `;
   }
 };
-se.styles = g`
+ae.styles = g`
     :host { display: block; font-family: var(--font-sans); }
     .progress { overflow-x: hidden; position: relative; border-radius: 9999px; }
     .progress__fill {
@@ -1889,12 +1889,12 @@ se.styles = g`
       to { transform: translateX(330%); }
     }
   `;
-let b2 = se;
+let b2 = ae;
 m3([
-  s()
+  a()
 ], b2.prototype, "percent");
 m3([
-  s()
+  a()
 ], b2.prototype, "height");
 customElements.get("anduin-progress") || customElements.define("anduin-progress", b2);
 var y7 = Object.defineProperty, q1 = (r, e, t, o) => {
@@ -1902,7 +1902,7 @@ var y7 = Object.defineProperty, q1 = (r, e, t, o) => {
     (l = r[n]) && (i = l(e, t, i) || i);
   return i && y7(e, t, i), i;
 };
-const ae = class ae extends u {
+const se = class se extends u {
   constructor() {
     super(...arguments), this.effect = "pulse", this.shape = "rectangle", this.height = "", this.width = "100%", this.duration = 1500, this.fontSize = "";
   }
@@ -1914,14 +1914,14 @@ const ae = class ae extends u {
       this.shape === "rectangle" ? "skeleton--rectangle" : "",
       this.shape === "text" && this.fontSize ? "skeleton--text" : ""
     ].filter(Boolean).join(" "), t = this.shape === "text" && this.fontSize ? `--anduin-skeleton-font-size: ${this.fontSize};` : "", o = `${this.height ? `height: ${this.height};` : ""} width: ${this.width};`, i = this.effect === "pulse" ? `animation: skeleton-pulse ${this.duration}ms ease-in-out infinite;` : "";
-    return a`
+    return s`
       <div class="${e}" style="${t} ${o} ${i}" part="skeleton">
-        ${this.effect === "wave" ? a`<div class="skeleton__wave" style="animation: skeleton-wave ${this.duration}ms linear infinite;"></div>` : ""}
+        ${this.effect === "wave" ? s`<div class="skeleton__wave" style="animation: skeleton-wave ${this.duration}ms linear infinite;"></div>` : ""}
       </div>
     `;
   }
 };
-ae.styles = g`
+se.styles = g`
     :host { display: block; height: 100%; font-family: var(--font-sans); }
     .skeleton { background-color: var(--color-gray-3); position: relative; overflow: hidden; }
     .skeleton--circle { border-radius: 9999px; }
@@ -1940,24 +1940,24 @@ ae.styles = g`
       0% { transform: translateX(-100%); } 100% { transform: translateX(100%); }
     }
   `;
-let r1 = ae;
+let r1 = se;
 q1([
-  s()
+  a()
 ], r1.prototype, "effect");
 q1([
-  s()
+  a()
 ], r1.prototype, "shape");
 q1([
-  s()
+  a()
 ], r1.prototype, "height");
 q1([
-  s()
+  a()
 ], r1.prototype, "width");
 q1([
-  s({ type: Number })
+  a({ type: Number })
 ], r1.prototype, "duration");
 q1([
-  s({ attribute: "font-size" })
+  a({ attribute: "font-size" })
 ], r1.prototype, "fontSize");
 customElements.get("anduin-skeleton") || customElements.define("anduin-skeleton", r1);
 var H7 = Object.defineProperty, _7 = (r, e, t, o) => {
@@ -1970,7 +1970,7 @@ const de = class de extends u {
     super(...arguments), this.height = "256px";
   }
   render() {
-    return a`
+    return s`
       <div class="loading-state" style="height: ${this.height};" part="loading-state">
         <div class="loading-state__indicator">
           <anduin-spinner size="large"></anduin-spinner>
@@ -1988,7 +1988,7 @@ de.styles = g`
   `;
 let P2 = de;
 _7([
-  s()
+  a()
 ], P2.prototype, "height");
 customElements.get("anduin-loading-state") || customElements.define("anduin-loading-state", P2);
 var L7 = Object.defineProperty, W5 = (r, e, t, o) => {
@@ -2012,7 +2012,7 @@ const b3 = "anduin-field:label-click", f1 = "anduin-field:label-click-coordinate
   }
   render() {
     const e = this.orientation === "horizontal";
-    return a`
+    return s`
       <div class="field ${e ? "field--horizontal" : "field--vertical"}" part="field">
         <slot></slot>
       </div>
@@ -2027,7 +2027,7 @@ ce.styles = g`
   `;
 let B2 = ce;
 W5([
-  s()
+  a()
 ], B2.prototype, "orientation");
 const Ce = class Ce extends u {
   constructor() {
@@ -2044,14 +2044,14 @@ const Ce = class Ce extends u {
     })));
   }
   render() {
-    return a`
+    return s`
       <label
         class="field-label"
         part="label"
         for=${this.htmlfor || ""}
         @click=${this.onLabelClick}
       >
-        <slot></slot>${this.required ? a`<span class="field-label__required"> *</span>` : ""}
+        <slot></slot>${this.required ? s`<span class="field-label__required"> *</span>` : ""}
       </label>
     `;
   }
@@ -2063,24 +2063,24 @@ Ce.styles = g`
   `;
 let y2 = Ce;
 W5([
-  s()
+  a()
 ], y2.prototype, "htmlfor");
 W5([
-  s({ type: Boolean })
+  a({ type: Boolean })
 ], y2.prototype, "required");
 const pe = class pe extends u {
   render() {
-    return a`<div class="field-description" part="description"><slot></slot></div>`;
+    return s`<div class="field-description" part="description"><slot></slot></div>`;
   }
 };
 pe.styles = g`
     :host { display: inline-block; font-family: var(--font-sans); }
     .field-description { display: block; line-height: 16px; font-size: 11px; color: var(--color-gray-7); }
   `;
-let a5 = pe;
+let s5 = pe;
 const he = class he extends u {
   render() {
-    return a`<div class="field-error" part="error"><slot></slot></div>`;
+    return s`<div class="field-error" part="error"><slot></slot></div>`;
   }
 };
 he.styles = g`
@@ -2090,7 +2090,7 @@ he.styles = g`
 let d5 = he;
 const ue = class ue extends u {
   render() {
-    return a`<div class="field-group" part="group"><slot></slot></div>`;
+    return s`<div class="field-group" part="group"><slot></slot></div>`;
   }
 };
 ue.styles = g`
@@ -2100,7 +2100,7 @@ ue.styles = g`
 let c5 = ue;
 customElements.get("anduin-field") || customElements.define("anduin-field", B2);
 customElements.get("anduin-field-label") || customElements.define("anduin-field-label", y2);
-customElements.get("anduin-field-description") || customElements.define("anduin-field-description", a5);
+customElements.get("anduin-field-description") || customElements.define("anduin-field-description", s5);
 customElements.get("anduin-field-error") || customElements.define("anduin-field-error", d5);
 customElements.get("anduin-field-group") || customElements.define("anduin-field-group", c5);
 var V7 = Object.defineProperty, R2 = (r, e, t, o) => {
@@ -2138,7 +2138,7 @@ const x7 = "anduin-checkbox:change", ge = class ge extends u {
       this.disabled && !this.indeterminate && !this.checked ? "checkbox__box--disabled" : "",
       !this.indeterminate && !this.checked && !this.readonly && !this.disabled ? "checkbox__box--unchecked" : ""
     ].filter(Boolean).join(" "), t = this.indeterminate ? "minusBold" : this.checked ? "checkBold" : "", o = !this.disabled && !this.readonly, i = o ? 0 : -1;
-    return a`
+    return s`
       <label class="${this.disabled ? "is-disabled" : ""}">
         <div
           class="checkbox ${o ? "checkbox--interactive" : ""} ${this.disabled ? "checkbox--disabled" : ""}"
@@ -2154,7 +2154,7 @@ const x7 = "anduin-checkbox:change", ge = class ge extends u {
           />
           <div class="${e}" tabindex="${i}"></div>
           <div class="checkbox__icon ${this.indeterminate || this.checked ? "checkbox__icon--visible" : ""}">
-            ${t ? a`<anduin-icon name="${t}" size="16"></anduin-icon>` : p}
+            ${t ? s`<anduin-icon name="${t}" size="16"></anduin-icon>` : p}
           </div>
         </div>
         <span class="checkbox__label"><slot></slot></span>
@@ -2202,19 +2202,19 @@ ge.styles = g`
   `;
 let v1 = ge;
 R2([
-  s({ type: Boolean })
+  a({ type: Boolean })
 ], v1.prototype, "checked");
 R2([
-  s({ type: Boolean })
+  a({ type: Boolean })
 ], v1.prototype, "disabled");
 R2([
-  s({ type: Boolean })
+  a({ type: Boolean })
 ], v1.prototype, "indeterminate");
 R2([
-  s({ type: Boolean })
+  a({ type: Boolean })
 ], v1.prototype, "readonly");
 R2([
-  s()
+  a()
 ], v1.prototype, "inputid");
 customElements.get("anduin-checkbox") || customElements.define("anduin-checkbox", v1);
 var M7 = Object.defineProperty, Y = (r, e, t, o) => {
@@ -2280,9 +2280,9 @@ const B4 = "anduin-input:change", w7 = "anduin-input:clear", j2 = class j2 exten
   }
   render() {
     const e = this.size === "small" ? "input--small" : this.size === "large" ? "input--large" : "input--default", t = this.status ? `input--${this.status}` : "", o = !!this.startIcon, i = !!this.endIcon || this.clearable && !!this.value, n = this.clearable && !!this.value && !this.disabled && !this.readonly, l = this.size === "small" ? "12" : this.size === "large" ? "20" : "16", d = this.size === "small" ? "10" : this.size === "large" ? "16" : "14";
-    return a`
+    return s`
       <div class="input-wrapper">
-        ${o ? a`
+        ${o ? s`
           <span class="input__start">
             <anduin-icon name=${this.startIcon} size=${l}></anduin-icon>
           </span>
@@ -2304,14 +2304,14 @@ const B4 = "anduin-input:change", w7 = "anduin-input:clear", j2 = class j2 exten
           @input=${this.onInput}
         />
 
-        ${i ? a`
+        ${i ? s`
           <span class="input__end">
-            ${n ? a`
+            ${n ? s`
               <button class="input__clear" type="button" @click=${this.onClear} aria-label="Clear">
                 <anduin-icon name="cross" size=${d}></anduin-icon>
               </button>
             ` : p}
-            ${this.endIcon ? a`
+            ${this.endIcon ? s`
               <anduin-icon name=${this.endIcon} size=${l}></anduin-icon>
             ` : p}
           </span>
@@ -2374,41 +2374,41 @@ j2.shadowRootOptions = { ...u.shadowRootOptions, delegatesFocus: !0 }, j2.styles
     }
     .input__clear:hover { color: var(--color-gray-7); }
   `;
-let I = j2;
+let O = j2;
 Y([
-  s()
-], I.prototype, "value");
+  a()
+], O.prototype, "value");
 Y([
-  s()
-], I.prototype, "size");
+  a()
+], O.prototype, "size");
 Y([
-  s({ type: Boolean })
-], I.prototype, "disabled");
+  a({ type: Boolean })
+], O.prototype, "disabled");
 Y([
-  s({ type: Boolean })
-], I.prototype, "readonly");
+  a({ type: Boolean })
+], O.prototype, "readonly");
 Y([
-  s()
-], I.prototype, "placeholder");
+  a()
+], O.prototype, "placeholder");
 Y([
-  s()
-], I.prototype, "inputid");
+  a()
+], O.prototype, "inputid");
 Y([
-  s()
-], I.prototype, "status");
+  a()
+], O.prototype, "status");
 Y([
-  s({ attribute: "start-icon" })
-], I.prototype, "startIcon");
+  a({ attribute: "start-icon" })
+], O.prototype, "startIcon");
 Y([
-  s({ attribute: "end-icon" })
-], I.prototype, "endIcon");
+  a({ attribute: "end-icon" })
+], O.prototype, "endIcon");
 Y([
-  s({ type: Boolean })
-], I.prototype, "clearable");
+  a({ type: Boolean })
+], O.prototype, "clearable");
 Y([
   k("input")
-], I.prototype, "inputEl");
-customElements.get("anduin-input") || customElements.define("anduin-input", I);
+], O.prototype, "inputEl");
+customElements.get("anduin-input") || customElements.define("anduin-input", O);
 var Z7 = Object.defineProperty, y3 = (r, e, t, o) => {
   for (var i = void 0, n = r.length - 1, l; n >= 0; n--)
     (l = r[n]) && (i = l(e, t, i) || i);
@@ -2458,20 +2458,20 @@ function F4(r, e, t, o, i) {
       return { left: 0, top: 0 };
   }
 }
-function I4(r, e) {
+function O4(r, e) {
   return e.right >= r.left && e.left <= r.right && e.top <= r.bottom && e.bottom >= r.top;
 }
-function O4(r, e) {
+function I4(r, e) {
   const t = Math.max(r.left, e.left), o = Math.max(r.top, e.top), i = Math.min(r.right, e.right), n = Math.min(r.bottom, e.bottom);
   return i < t || n < o ? 0 : (i - t) * (n - o);
 }
 function R7(r, e, t, o = 8) {
   const i = window.innerWidth, n = window.innerHeight, l = { left: 0, top: 0, right: i, bottom: n }, d = e.width, c = e.height;
-  if (!I4(
+  if (!O4(
     { left: r.left, top: r.top, right: r.right, bottom: r.bottom },
     l
   )) return null;
-  const C = F4(r, d, c, t, o), h = k7.map((b) => ({ p: b, off: F4(r, d, c, b, o) })).filter(({ off: b }) => I4({ left: b.left, top: b.top, right: b.left + d, bottom: b.top + c }, l));
+  const C = F4(r, d, c, t, o), h = k7.map((b) => ({ p: b, off: F4(r, d, c, b, o) })).filter(({ off: b }) => O4({ left: b.left, top: b.top, right: b.left + d, bottom: b.top + c }, l));
   if (h.length === 0)
     return {
       placement: t,
@@ -2479,7 +2479,7 @@ function R7(r, e, t, o = 8) {
       top: Math.round(Math.min(Math.max(C.top, 0), n - c))
     };
   h.sort((b, V) => {
-    const _ = { left: b.off.left, top: b.off.top, right: b.off.left + d, bottom: b.off.top + c }, v = { left: V.off.left, top: V.off.top, right: V.off.left + d, bottom: V.off.top + c }, x = O4(_, l), M = O4(v, l);
+    const _ = { left: b.off.left, top: b.off.top, right: b.off.left + d, bottom: b.off.top + c }, v = { left: V.off.left, top: V.off.top, right: V.off.left + d, bottom: V.off.top + c }, x = I4(_, l), M = I4(v, l);
     if (M !== x) return M - x;
     const D = Math.abs(b.off.left - C.left) + Math.abs(b.off.top - C.top), K = Math.abs(V.off.left - C.left) + Math.abs(V.off.top - C.top);
     return D - K;
@@ -2561,7 +2561,7 @@ const fe = class fe extends u {
     this.dispatchEvent(new CustomEvent(x3, { detail: e, bubbles: !1, composed: !1 }));
   }
   render() {
-    return a`<div class="tooltip-root" part="tooltip"><slot></slot></div>`;
+    return s`<div class="tooltip-root" part="tooltip"><slot></slot></div>`;
   }
 };
 fe.styles = g`
@@ -2577,10 +2577,10 @@ fe.styles = g`
   `;
 let H2 = fe;
 y3([
-  s({ type: Boolean })
+  a({ type: Boolean })
 ], H2.prototype, "disabled");
 y3([
-  s()
+  a()
 ], H2.prototype, "placement");
 const ve = class ve extends u {
   firstUpdated() {
@@ -2593,7 +2593,7 @@ const ve = class ve extends u {
     });
   }
   render() {
-    return a`<span class="tooltip-trigger" part="tooltip-trigger"><slot></slot></span>`;
+    return s`<span class="tooltip-trigger" part="tooltip-trigger"><slot></slot></span>`;
   }
 };
 ve.styles = g`
@@ -2662,7 +2662,7 @@ const me = class me extends u {
     this.popupEl && (this.popupEl.remove(), this.popupEl = null, this.dispatchEvent(new CustomEvent(V3, { bubbles: !0, composed: !0 }))), this.cleanupGraceAreaListeners();
   }
   render() {
-    return a`<div class="tooltip-content-wrapper"></div>`;
+    return s`<div class="tooltip-content-wrapper"></div>`;
   }
 };
 me.styles = g`
@@ -2693,14 +2693,14 @@ let h5 = me;
 customElements.get("anduin-tooltip") || customElements.define("anduin-tooltip", H2);
 customElements.get("anduin-tooltip-trigger") || customElements.define("anduin-tooltip-trigger", p5);
 customElements.get("anduin-tooltip-content") || customElements.define("anduin-tooltip-content", h5);
-var E7 = Object.defineProperty, F = (r, e, t, o) => {
+var E7 = Object.defineProperty, B = (r, e, t, o) => {
   for (var i = void 0, n = r.length - 1, l; n >= 0; n--)
     (l = r[n]) && (i = l(e, t, i) || i);
   return i && E7(e, t, i), i;
 };
 const z7 = "anduin-inline-edit:save", S7 = "anduin-inline-edit:cancel", A7 = "anduin-inline-edit:edit", be = class be extends u {
   constructor() {
-    super(...arguments), this.value = "", this.placeholder = "", this.size = "medium", this.mode = "view", this.disabled = !1, this.clickToEdit = !1, this.editLabel = "Edit", this._editing = !1, this._draft = "", this._error = "", this._hasSlotted = !1, this._openWidth = 0;
+    super(...arguments), this.value = "", this.placeholder = "", this.size = "medium", this.mode = "view", this.disabled = !1, this.clickToEdit = !1, this.hideSwitcher = !1, this.editLabel = "Edit", this._editing = !1, this._draft = "", this._error = "", this._hasSlotted = !1, this._openWidth = 0;
   }
   /** Whether the element is in edit mode. Also reflected as the `editing` attribute. */
   get editing() {
@@ -2775,14 +2775,14 @@ const z7 = "anduin-inline-edit:save", S7 = "anduin-inline-edit:cancel", A7 = "an
   }
   _renderView() {
     const e = !this.value, t = this.clickToEdit && !this.disabled;
-    return a`
+    return s`
       <div class="view" part="view">
         <span
           class="text ${t ? "text--clickable" : ""} ${e && !this._hasSlotted ? "text--placeholder" : ""}"
           part="text"
           @click=${this._onTextClick}
         >${this._hasSlotted ? p : e ? this.placeholder : this.value}<slot @slotchange=${this._onSlotChange}></slot></span>
-        ${this.disabled ? p : a`
+        ${this.disabled || this.hideSwitcher ? p : s`
           <anduin-tooltip class="switcher" part="switcher">
             <anduin-tooltip-trigger>
               <anduin-button
@@ -2801,7 +2801,7 @@ const z7 = "anduin-inline-edit:save", S7 = "anduin-inline-edit:cancel", A7 = "an
   }
   _renderEdit() {
     const e = this.size === "small" ? "small" : "medium", t = !!this._error, o = this.size === "small" ? 14 : 26, i = this._openWidth ? `max(8em, ${Math.ceil(this._openWidth) + o}px + 2ch)` : "12em";
-    return a`
+    return s`
       <div class="edit" part="edit">
         <input
           class="field field--${e} ${t ? "field--invalid" : ""}"
@@ -2903,53 +2903,56 @@ be.styles = g`
     .field--small  { min-height: 24px; padding-left: 6px;  padding-right: 6px; }
     .field--medium { min-height: 32px; padding-left: 12px; padding-right: 12px; }
   `;
-let $ = be;
-F([
-  s()
-], $.prototype, "value");
-F([
-  s()
-], $.prototype, "placeholder");
-F([
-  s()
-], $.prototype, "size");
-F([
-  s()
-], $.prototype, "mode");
-F([
-  s({ type: Boolean, reflect: !0 })
-], $.prototype, "disabled");
-F([
-  s({ type: Boolean, attribute: "click-to-edit", reflect: !0 })
-], $.prototype, "clickToEdit");
-F([
-  s({ attribute: "edit-label" })
-], $.prototype, "editLabel");
-F([
-  s({ attribute: !1 })
-], $.prototype, "validate");
-F([
+let R = be;
+B([
+  a()
+], R.prototype, "value");
+B([
+  a()
+], R.prototype, "placeholder");
+B([
+  a()
+], R.prototype, "size");
+B([
+  a()
+], R.prototype, "mode");
+B([
+  a({ type: Boolean, reflect: !0 })
+], R.prototype, "disabled");
+B([
+  a({ type: Boolean, attribute: "click-to-edit", reflect: !0 })
+], R.prototype, "clickToEdit");
+B([
+  a({ type: Boolean, attribute: "hide-switcher", reflect: !0 })
+], R.prototype, "hideSwitcher");
+B([
+  a({ attribute: "edit-label" })
+], R.prototype, "editLabel");
+B([
+  a({ attribute: !1 })
+], R.prototype, "validate");
+B([
   m()
-], $.prototype, "_editing");
-F([
+], R.prototype, "_editing");
+B([
   m()
-], $.prototype, "_draft");
-F([
+], R.prototype, "_draft");
+B([
   m()
-], $.prototype, "_error");
-F([
+], R.prototype, "_error");
+B([
   m()
-], $.prototype, "_hasSlotted");
-F([
+], R.prototype, "_hasSlotted");
+B([
   m()
-], $.prototype, "_openWidth");
-F([
+], R.prototype, "_openWidth");
+B([
   k(".field")
-], $.prototype, "_field");
-F([
+], R.prototype, "_field");
+B([
   k(".text")
-], $.prototype, "_text");
-customElements.get("anduin-inline-edit") || customElements.define("anduin-inline-edit", $);
+], R.prototype, "_text");
+customElements.get("anduin-inline-edit") || customElements.define("anduin-inline-edit", R);
 var D7 = Object.defineProperty, _1 = (r, e, t, o) => {
   for (var i = void 0, n = r.length - 1, l; n >= 0; n--)
     (l = r[n]) && (i = l(e, t, i) || i);
@@ -2998,7 +3001,7 @@ const P7 = "anduin-textarea:change", U2 = class U2 extends u {
   }
   render() {
     const e = this.status ? `textarea--${this.status}` : "";
-    return a`
+    return s`
       <textarea
         class="textarea
           ${this.disabled ? "textarea--disabled" : ""}
@@ -3034,25 +3037,25 @@ U2.shadowRootOptions = { ...u.shadowRootOptions, delegatesFocus: !0 }, U2.styles
   `;
 let W = U2;
 _1([
-  s()
+  a()
 ], W.prototype, "value");
 _1([
-  s({ type: Boolean })
+  a({ type: Boolean })
 ], W.prototype, "disabled");
 _1([
-  s({ type: Boolean })
+  a({ type: Boolean })
 ], W.prototype, "readonly");
 _1([
-  s()
+  a()
 ], W.prototype, "placeholder");
 _1([
-  s()
+  a()
 ], W.prototype, "inputid");
 _1([
-  s({ type: Number })
+  a({ type: Number })
 ], W.prototype, "rows");
 _1([
-  s()
+  a()
 ], W.prototype, "status");
 _1([
   k("textarea")
@@ -3087,7 +3090,7 @@ const M3 = "anduin-tab:trigger-click", W2 = "anduin-tab:value-changed", F7 = "an
     this.dispatchEvent(new CustomEvent(W2, { detail: e, bubbles: !1, composed: !1 }));
   }
   render() {
-    return a`<div class="tabs" part="tabs"><slot></slot></div>`;
+    return s`<div class="tabs" part="tabs"><slot></slot></div>`;
   }
 };
 ye.styles = g`
@@ -3098,13 +3101,13 @@ ye.styles = g`
   `;
 let j1 = ye;
 U([
-  s({ attribute: "default-value" })
+  a({ attribute: "default-value" })
 ], j1.prototype, "defaultValue");
 U([
-  s()
+  a()
 ], j1.prototype, "value");
 U([
-  s({ type: Boolean, reflect: !0 })
+  a({ type: Boolean, reflect: !0 })
 ], j1.prototype, "fill");
 const He = class He extends u {
   constructor() {
@@ -3142,7 +3145,7 @@ const He = class He extends u {
     }
   }
   render() {
-    return a`
+    return s`
       <div class="tabs-list tabs-list--${this.alignment}" role="tablist" aria-orientation="horizontal" part="tabs-list">
         <slot></slot>
         <div class="tabs-list__indicator"></div>
@@ -3169,7 +3172,7 @@ He.styles = g`
   `;
 let _2 = He;
 U([
-  s()
+  a()
 ], _2.prototype, "alignment");
 U([
   k(".tabs-list__indicator")
@@ -3190,7 +3193,7 @@ const _e = class _e extends u {
     this.dispatchEvent(new CustomEvent(M3, { detail: this.value, bubbles: !0, composed: !0 }));
   }
   render() {
-    return a`
+    return s`
       <button
         class="tab-trigger ${this.isActive ? "tab-trigger--active" : "tab-trigger--normal"}"
         role="tab"
@@ -3200,9 +3203,9 @@ const _e = class _e extends u {
         @click=${this.onClick}
       >
         <div class="tab-trigger__content">
-          ${this.startIcon ? a`<anduin-icon name="${this.startIcon}" size="16"></anduin-icon>` : p}
+          ${this.startIcon ? s`<anduin-icon name="${this.startIcon}" size="16"></anduin-icon>` : p}
           <slot></slot>
-          ${this.showBadge ? a`<span class="tab-trigger__badge">${this.badgeCount}</span>` : p}
+          ${this.showBadge ? s`<span class="tab-trigger__badge">${this.badgeCount}</span>` : p}
         </div>
       </button>
     `;
@@ -3233,19 +3236,19 @@ _e.styles = g`
   `;
 let l1 = _e;
 U([
-  s({ reflect: !0 })
+  a({ reflect: !0 })
 ], l1.prototype, "value");
 U([
-  s({ attribute: "start-icon" })
+  a({ attribute: "start-icon" })
 ], l1.prototype, "startIcon");
 U([
-  s({ type: Boolean })
+  a({ type: Boolean })
 ], l1.prototype, "disabled");
 U([
-  s({ type: Boolean, attribute: "show-badge" })
+  a({ type: Boolean, attribute: "show-badge" })
 ], l1.prototype, "showBadge");
 U([
-  s({ attribute: "badge-count" })
+  a({ attribute: "badge-count" })
 ], l1.prototype, "badgeCount");
 U([
   m()
@@ -3266,7 +3269,7 @@ const Le = class Le extends u {
     e.has("isActive") && this.toggleAttribute("active", this.isActive);
   }
   render() {
-    return a`
+    return s`
       <div class="tab-content" role="tabpanel" tabindex="0" part="tab-content">
         <slot></slot>
       </div>
@@ -3280,7 +3283,7 @@ Le.styles = g`
   `;
 let L2 = Le;
 U([
-  s()
+  a()
 ], L2.prototype, "value");
 U([
   m()
@@ -3289,12 +3292,12 @@ customElements.get("anduin-tabs") || customElements.define("anduin-tabs", j1);
 customElements.get("anduin-tabs-list") || customElements.define("anduin-tabs-list", _2);
 customElements.get("anduin-tab-trigger") || customElements.define("anduin-tab-trigger", l1);
 customElements.get("anduin-tab-content") || customElements.define("anduin-tab-content", L2);
-var I7 = Object.defineProperty, q5 = (r, e, t, o) => {
+var O7 = Object.defineProperty, q5 = (r, e, t, o) => {
   for (var i = void 0, n = r.length - 1, l; n >= 0; n--)
     (l = r[n]) && (i = l(e, t, i) || i);
-  return i && I7(e, t, i), i;
+  return i && O7(e, t, i), i;
 };
-const O7 = "anduin-tag-close:click", T7 = {
+const I7 = "anduin-tag-close:click", T7 = {
   gray: "tag--light-gray",
   primary: "tag--light-primary",
   success: "tag--light-success",
@@ -3350,9 +3353,9 @@ const O7 = "anduin-tag-close:click", T7 = {
   }
   render() {
     const e = T7[this.variant] || "tag--light-gray", t = N7[this.variant] || "tag__icon--light-gray";
-    return a`
+    return s`
       <div class="tag ${e} ${this.disabled ? "tag--disabled" : ""}" part="tag">
-        ${this.icon ? a`<anduin-icon name="${this.icon}" size="12" class="tag__icon ${t}"></anduin-icon>` : p}
+        ${this.icon ? s`<anduin-icon name="${this.icon}" size="12" class="tag__icon ${t}"></anduin-icon>` : p}
         <div class="tag__label"><slot></slot></div>
         <slot name="closeButton" class="tag__close"></slot>
       </div>
@@ -3409,20 +3412,20 @@ Ve.styles = g`
   `;
 let U1 = Ve;
 q5([
-  s()
+  a()
 ], U1.prototype, "variant");
 q5([
-  s()
+  a()
 ], U1.prototype, "icon");
 q5([
-  s({ type: Boolean })
+  a({ type: Boolean })
 ], U1.prototype, "disabled");
 const xe = class xe extends u {
   onClick() {
-    this.dispatchEvent(new CustomEvent(O7, { bubbles: !0, composed: !0 }));
+    this.dispatchEvent(new CustomEvent(I7, { bubbles: !0, composed: !0 }));
   }
   render() {
-    return a`
+    return s`
       <button class="tag-close__button" part="tag-close" @click=${this.onClick}>
         <anduin-icon name="crossSmall" size="12"></anduin-icon>
       </button>
@@ -3442,7 +3445,7 @@ xe.styles = g`
 let u5 = xe;
 customElements.get("anduin-tag") || customElements.define("anduin-tag", U1);
 customElements.get("anduin-tag-close") || customElements.define("anduin-tag-close", u5);
-var j7 = Object.defineProperty, O = (r, e, t, o) => {
+var j7 = Object.defineProperty, I = (r, e, t, o) => {
   for (var i = void 0, n = r.length - 1, l; n >= 0; n--)
     (l = r[n]) && (i = l(e, t, i) || i);
   return i && j7(e, t, i), i;
@@ -3493,7 +3496,7 @@ const U7 = "anduin-toggle-group:change", G7 = "anduin-toggle-group-item:change",
       t.selected = e.includes(t.value), t.groupSize = this.size, t.groupVariant = this.variant, t.groupMode = this.mode;
   }
   render() {
-    return a`
+    return s`
       <div class="toggle-group toggle-group--${this.size} ${this.gap ? "toggle-group--gap" : ""}" role="group" part="toggle-group">
         <slot @slotchange=${this.syncItems}></slot>
       </div>
@@ -3535,25 +3538,25 @@ Me.styles = g`
     .toggle-group--gap ::slotted(anduin-toggle-group-item) { --toggle-group-item-radius: 4px; --toggle-group-item-border-left: 1px; }
   `;
 let X = Me;
-O([
-  s()
+I([
+  a()
 ], X.prototype, "mode");
-O([
-  s({ attribute: "default-value" })
+I([
+  a({ attribute: "default-value" })
 ], X.prototype, "defaultValue");
-O([
-  s()
+I([
+  a()
 ], X.prototype, "value");
-O([
-  s()
+I([
+  a()
 ], X.prototype, "size");
-O([
-  s()
+I([
+  a()
 ], X.prototype, "variant");
-O([
-  s({ type: Boolean })
+I([
+  a({ type: Boolean })
 ], X.prototype, "gap");
-O([
+I([
   m()
 ], X.prototype, "internalValue");
 const we = class we extends u {
@@ -3589,7 +3592,7 @@ const we = class we extends u {
       this.disabled ? "toggle-item--disabled" : "",
       `toggle-item--variant-${this.groupVariant}`
     ].filter(Boolean).join(" ");
-    return a`
+    return s`
       <button
         type="button"
         class="${e}"
@@ -3599,7 +3602,7 @@ const we = class we extends u {
         @click=${this.onClick}
       >
         <div class="toggle-item__content">
-          ${this.startIcon ? a`<div class="toggle-item__icon"><anduin-icon name="${this.startIcon}" size="${this.groupSize === "small" ? 12 : 16}"></anduin-icon></div>` : p}
+          ${this.startIcon ? s`<div class="toggle-item__icon"><anduin-icon name="${this.startIcon}" size="${this.groupSize === "small" ? 12 : 16}"></anduin-icon></div>` : p}
           <slot></slot>
         </div>
       </button>
@@ -3643,26 +3646,26 @@ we.styles = g`
     .toggle-item--variant-primary.toggle-item--selected .toggle-item__icon { color: var(--color-primary-4); }
   `;
 let J = we;
-O([
-  s({ reflect: !0 })
+I([
+  a({ reflect: !0 })
 ], J.prototype, "value");
-O([
-  s({ attribute: "start-icon" })
+I([
+  a({ attribute: "start-icon" })
 ], J.prototype, "startIcon");
-O([
-  s({ type: Boolean })
+I([
+  a({ type: Boolean })
 ], J.prototype, "disabled");
-O([
-  s({ attribute: !1 })
+I([
+  a({ attribute: !1 })
 ], J.prototype, "selected");
-O([
-  s({ attribute: !1 })
+I([
+  a({ attribute: !1 })
 ], J.prototype, "groupSize");
-O([
-  s({ attribute: !1 })
+I([
+  a({ attribute: !1 })
 ], J.prototype, "groupVariant");
-O([
-  s({ attribute: !1 })
+I([
+  a({ attribute: !1 })
 ], J.prototype, "groupMode");
 function e5(r) {
   return r.split(" ").map((e) => e.trim()).filter(Boolean);
@@ -3679,7 +3682,7 @@ const X7 = "anduin-well-close:click", Ze = class Ze extends u {
     super(...arguments), this.variant = "gray";
   }
   render() {
-    return a`
+    return s`
       <div class="well well--${this.variant}" part="well">
         <slot
           name="icon"
@@ -3771,7 +3774,7 @@ Ze.styles = g`
   `;
 let F2 = Ze;
 q7([
-  s()
+  a()
 ], F2.prototype, "variant");
 const ke = class ke extends u {
   onClick() {
@@ -3780,7 +3783,7 @@ const ke = class ke extends u {
     );
   }
   render() {
-    return a`
+    return s`
       <button
         class="well-close__button"
         part="well-close"
@@ -3880,7 +3883,7 @@ const v5 = "anduin-popover:close", m5 = "anduin-popover:open-change", Re = class
     K === "start" ? f = o.left : K === "end" ? f = o.right - l.width : f = o.left + o.width / 2 - l.width / 2, f = Math.max(h, Math.min(f, c - l.width - h)), y = Math.max(h, Math.min(y, C - l.height - h)), t.style.transform = `translate(${Math.round(f - n.left)}px, ${Math.round(y - n.top)}px)`, t.dataset.side = b;
   }
   render() {
-    return a`
+    return s`
       <div class="popover__trigger" @click=${this._onTriggerClick} part="trigger">
         <slot name="trigger"></slot>
       </div>
@@ -3947,13 +3950,13 @@ Re.styles = g`
   `;
 let Q = Re;
 E1([
-  s({ type: Boolean, reflect: !0 })
+  a({ type: Boolean, reflect: !0 })
 ], Q.prototype, "open");
 E1([
-  s()
+  a()
 ], Q.prototype, "placement");
 E1([
-  s({ type: Boolean, attribute: "full-width", reflect: !0 })
+  a({ type: Boolean, attribute: "full-width", reflect: !0 })
 ], Q.prototype, "fullWidth");
 E1([
   m()
@@ -3973,7 +3976,7 @@ const $e = class $e extends u {
     this.dispatchEvent(new CustomEvent(v5, { bubbles: !0, composed: !0 }));
   }
   render() {
-    return a`<span @click=${this._onClick}><slot></slot></span>`;
+    return s`<span @click=${this._onClick}><slot></slot></span>`;
   }
 };
 $e.styles = g`:host { display: contents; }`;
@@ -4038,7 +4041,7 @@ const y5 = "anduin-menu-item:click", Ee = class Ee extends u {
     t.style.transform = `translate(${Math.round(c - n.left)}px, ${Math.round(C - n.top)}px)`, t.dataset.side = h;
   }
   render() {
-    return a`
+    return s`
       <div class="menu__trigger" @click=${this._onTriggerClick} part="trigger">
         <slot name="trigger"></slot>
       </div>
@@ -4095,10 +4098,10 @@ Ee.styles = g`
   `;
 let $1 = Ee;
 z1([
-  s({ type: Boolean, reflect: !0 })
+  a({ type: Boolean, reflect: !0 })
 ], $1.prototype, "open");
 z1([
-  s()
+  a()
 ], $1.prototype, "placement");
 z1([
   k(".menu__trigger")
@@ -4114,7 +4117,7 @@ const ze = class ze extends u {
     this.dispatchEvent(new CustomEvent(y5, { bubbles: !0, composed: !0 }));
   }
   render() {
-    return a`
+    return s`
       <button
         class="menu-item ${this.variant === "danger" ? "menu-item--danger" : ""}"
         role="menuitem"
@@ -4122,7 +4125,7 @@ const ze = class ze extends u {
         part="menu-item"
         @click=${this._onClick}
       >
-        ${this.icon ? a`<anduin-icon name="${this.icon}" size="16"></anduin-icon>` : p}
+        ${this.icon ? s`<anduin-icon name="${this.icon}" size="16"></anduin-icon>` : p}
         <span class="menu-item__label"><slot></slot></span>
       </button>
     `;
@@ -4160,13 +4163,13 @@ ze.styles = g`
   `;
 let G1 = ze;
 z1([
-  s()
+  a()
 ], G1.prototype, "icon");
 z1([
-  s()
+  a()
 ], G1.prototype, "variant");
 z1([
-  s({ type: Boolean })
+  a({ type: Boolean })
 ], G1.prototype, "disabled");
 customElements.get("anduin-menu") || customElements.define("anduin-menu", $1);
 customElements.get("anduin-menu-item") || customElements.define("anduin-menu-item", G1);
@@ -4226,7 +4229,7 @@ const L1 = (g1 = class extends u {
   }
   render() {
     const e = this._leaving, t = this.fullscreen;
-    return a`
+    return s`
       <div
         class=${`overlay${e ? " is-leaving" : ""}`}
         @click=${this.onOverlayClick}
@@ -4238,10 +4241,10 @@ const L1 = (g1 = class extends u {
           aria-modal="true"
           aria-labelledby="modal-title"
         >
-          ${this.hideHeader ? p : a` <div class="header">
+          ${this.hideHeader ? p : s` <div class="header">
                 <div class="header-slot">
                   <slot name="header">
-                    ${this.heading ? a`<span id="modal-title" class="title"
+                    ${this.heading ? s`<span id="modal-title" class="title"
                           >${this.heading}</span
                         >` : p}
                   </slot>
@@ -4259,7 +4262,7 @@ const L1 = (g1 = class extends u {
           <div class="body">
             <slot></slot>
           </div>
-          ${this.hideFooter ? p : a`<div class="footer"><slot name="footer"></slot></div>`}
+          ${this.hideFooter ? p : s`<div class="footer"><slot name="footer"></slot></div>`}
         </div>
       </div>
     `;
@@ -4458,22 +4461,22 @@ const L1 = (g1 = class extends u {
   "1160"
 ]), g1);
 S1([
-  s({ type: Boolean, reflect: !0 })
+  a({ type: Boolean, reflect: !0 })
 ], L1.prototype, "open");
 S1([
-  s()
+  a()
 ], L1.prototype, "heading");
 S1([
-  s({ type: Boolean, attribute: "hide-header" })
+  a({ type: Boolean, attribute: "hide-header" })
 ], L1.prototype, "hideHeader");
 S1([
-  s({ type: Boolean, attribute: "hide-footer" })
+  a({ type: Boolean, attribute: "hide-footer" })
 ], L1.prototype, "hideFooter");
 S1([
-  s({ attribute: "max-width" })
+  a({ attribute: "max-width" })
 ], L1.prototype, "maxWidth");
 S1([
-  s({ type: Boolean })
+  a({ type: Boolean })
 ], L1.prototype, "fullscreen");
 S1([
   m()
@@ -4531,7 +4534,7 @@ const H5 = "anduin-radio:change", rt = "anduin-radio-group:change", Se = class S
       !this.checked && this.disabled ? "radio__circle--disabled" : "",
       !this.checked && !this.readonly && !this.disabled ? "radio__circle--unchecked" : ""
     ].filter(Boolean).join(" ");
-    return a`
+    return s`
       <label class="${this.disabled ? "is-disabled" : ""}">
         <div
           class="radio ${e ? "radio--interactive" : ""} ${this.disabled ? "radio--disabled" : ""}"
@@ -4626,26 +4629,26 @@ Se.styles = g`
       transform: scale(1);
     }
   `;
-let s1 = Se;
+let a1 = Se;
 d1([
-  s({ type: Boolean })
-], s1.prototype, "checked");
+  a({ type: Boolean })
+], a1.prototype, "checked");
 d1([
-  s({ type: Boolean })
-], s1.prototype, "disabled");
+  a({ type: Boolean })
+], a1.prototype, "disabled");
 d1([
-  s({ type: Boolean })
-], s1.prototype, "readonly");
+  a({ type: Boolean })
+], a1.prototype, "readonly");
 d1([
-  s()
-], s1.prototype, "value");
+  a()
+], a1.prototype, "value");
 d1([
-  s()
-], s1.prototype, "name");
+  a()
+], a1.prototype, "name");
 d1([
-  s()
-], s1.prototype, "inputid");
-customElements.get("anduin-radio") || customElements.define("anduin-radio", s1);
+  a()
+], a1.prototype, "inputid");
+customElements.get("anduin-radio") || customElements.define("anduin-radio", a1);
 const Ae = class Ae extends u {
   constructor() {
     super(...arguments), this.value = "", this.name = "", this.orientation = "vertical", this._onRadioChange = (e) => {
@@ -4667,7 +4670,7 @@ const Ae = class Ae extends u {
     super.disconnectedCallback(), this.removeEventListener(H5, this._onRadioChange);
   }
   render() {
-    return a`
+    return s`
       <div class="group group--${this.orientation}" role="radiogroup" part="group">
         <slot></slot>
       </div>
@@ -4686,13 +4689,13 @@ Ae.styles = g`
   `;
 let K1 = Ae;
 d1([
-  s()
+  a()
 ], K1.prototype, "value");
 d1([
-  s()
+  a()
 ], K1.prototype, "name");
 d1([
-  s()
+  a()
 ], K1.prototype, "orientation");
 customElements.get("anduin-radio-group") || customElements.define("anduin-radio-group", K1);
 var lt = Object.defineProperty, A1 = (r, e, t, o) => {
@@ -4710,12 +4713,12 @@ const j4 = [
   { bg: "#F97066", text: "#ffffff" },
   { bg: "#7A5AF8", text: "#ffffff" }
 ];
-function st(r) {
+function at(r) {
   let e = 0;
   for (let t = 0; t < r.length; t++) e = e * 31 + r.charCodeAt(t) >>> 0;
   return j4[e % j4.length];
 }
-function at(r, e = 2) {
+function st(r, e = 2) {
   var i;
   const t = r.trim().split(/\s+/), o = ((i = t[0]) == null ? void 0 : i[0]) ?? "";
   return e < 2 || t.length === 1 ? o.toUpperCase() : (o + (t[t.length - 1][0] ?? "")).toUpperCase();
@@ -4731,8 +4734,8 @@ const De = class De extends u {
     return this.size <= 16 ? 10 : this.size <= 20 ? 12 : this.size <= 24 ? 14 : 18;
   }
   render() {
-    const e = !!this.src && !this._imgError, t = this.name || this.icon ? st(this.name || this.icon) : { bg: "#F2F4F7", text: "#667085" }, o = this.name ? at(this.name, this.size <= 20 ? 1 : 2) : "";
-    return a`
+    const e = !!this.src && !this._imgError, t = this.name || this.icon ? at(this.name || this.icon) : { bg: "#F2F4F7", text: "#667085" }, o = this.name ? st(this.name, this.size <= 20 ? 1 : 2) : "";
+    return s`
       <div
         class="avatar avatar--${this.shape} avatar--${this.size}"
         style=${e ? "" : `background:${t.bg}`}
@@ -4740,7 +4743,7 @@ const De = class De extends u {
         role="img"
         part="avatar"
       >
-        ${e ? a`<img src=${this.src} alt=${this.alt || this.name} @error=${this._onImgError} />` : this.icon ? a`<span style="color:${t.text};width:100%;height:100%;display:flex;align-items:center;justify-content:center"><anduin-icon name=${this.icon} size=${this._iconSize()}></anduin-icon></span>` : o ? a`<span style="color:${t.text};background:${t.bg};width:100%;height:100%;display:flex;align-items:center;justify-content:center">${o}</span>` : a`<span style="color:#98A2B3;background:#F2F4F7;width:100%;height:100%;display:flex;align-items:center;justify-content:center">
+        ${e ? s`<img src=${this.src} alt=${this.alt || this.name} @error=${this._onImgError} />` : this.icon ? s`<span style="color:${t.text};width:100%;height:100%;display:flex;align-items:center;justify-content:center"><anduin-icon name=${this.icon} size=${this._iconSize()}></anduin-icon></span>` : o ? s`<span style="color:${t.text};background:${t.bg};width:100%;height:100%;display:flex;align-items:center;justify-content:center">${o}</span>` : s`<span style="color:#98A2B3;background:#F2F4F7;width:100%;height:100%;display:flex;align-items:center;justify-content:center">
                   <svg width="60%" height="60%" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                     <path d="M8 8C9.93 8 11.5 6.43 11.5 4.5S9.93 1 8 1 4.5 2.57 4.5 4.5 6.07 8 8 8zm0 1.5C5.66 9.5 1 10.67 1 13v1h14v-1c0-2.33-4.66-3.5-7-3.5z" fill="currentColor"/>
                   </svg>
@@ -4780,22 +4783,22 @@ De.styles = g`
   `;
 let e1 = De;
 A1([
-  s()
+  a()
 ], e1.prototype, "src");
 A1([
-  s({ reflect: !0 })
+  a({ reflect: !0 })
 ], e1.prototype, "name");
 A1([
-  s()
+  a()
 ], e1.prototype, "alt");
 A1([
-  s()
+  a()
 ], e1.prototype, "icon");
 A1([
-  s({ type: Number })
+  a({ type: Number })
 ], e1.prototype, "size");
 A1([
-  s()
+  a()
 ], e1.prototype, "shape");
 A1([
   m()
@@ -5115,7 +5118,7 @@ const Pe = class Pe extends u {
   }
   render() {
     const e = gt(this.type, this.size);
-    return e ? a`
+    return e ? s`
       <svg
         width=${this.size}
         height=${this.size}
@@ -5136,10 +5139,10 @@ Pe.styles = g`
   `;
 let V2 = Pe;
 Z3([
-  s()
+  a()
 ], V2.prototype, "type");
 Z3([
-  s({ type: Number })
+  a({ type: Number })
 ], V2.prototype, "size");
 customElements.get("anduin-file-icon") || customElements.define("anduin-file-icon", V2);
 var vt = Object.defineProperty, D1 = (r, e, t, o) => {
@@ -5174,7 +5177,7 @@ const U4 = {
   }
   render() {
     const e = U4[this.variant] ?? U4.gray;
-    return a`
+    return s`
       <div
         class="toast toast--${this.variant} ${this._dismissing ? "toast--dismissing" : ""}"
         part="toast"
@@ -5185,8 +5188,8 @@ const U4 = {
           <anduin-icon name=${e} size="16"></anduin-icon>
         </div>
         <div class="toast__body">
-          ${this.heading ? a`<div class="toast__title">${this.heading}</div>` : ""}
-          ${this.description ? a`<div class="toast__description">${this.description}</div>` : a`<div class="toast__description"><slot></slot></div>`}
+          ${this.heading ? s`<div class="toast__title">${this.heading}</div>` : ""}
+          ${this.description ? s`<div class="toast__description">${this.description}</div>` : s`<div class="toast__description"><slot></slot></div>`}
         </div>
         <button
           class="toast__close"
@@ -5329,13 +5332,13 @@ Be.styles = g`
   `;
 let m1 = Be;
 D1([
-  s()
+  a()
 ], m1.prototype, "variant");
 D1([
-  s()
+  a()
 ], m1.prototype, "heading");
 D1([
-  s()
+  a()
 ], m1.prototype, "description");
 D1([
   m()
@@ -5371,10 +5374,10 @@ const Fe = class Fe extends u {
     e.stopPropagation(), this._removeById(t);
   }
   render() {
-    return a`
+    return s`
       <div class="toaster toaster--${this.position}" part="toaster">
         ${this._toasts.map(
-      ({ id: e, opts: t }) => a`
+      ({ id: e, opts: t }) => s`
             <anduin-toast
               data-id=${e}
               variant=${t.variant ?? "gray"}
@@ -5437,7 +5440,7 @@ Fe.styles = g`
   `;
 let x2 = Fe;
 D1([
-  s()
+  a()
 ], x2.prototype, "position");
 D1([
   m()
@@ -5473,7 +5476,7 @@ var yt = Object.defineProperty, k3 = (r, e, t, o) => {
     (l = r[n]) && (i = l(e, t, i) || i);
   return i && yt(e, t, i), i;
 };
-const Ht = "anduin-switcher:change", Ie = class Ie extends u {
+const Ht = "anduin-switcher:change", Oe = class Oe extends u {
   constructor() {
     super(...arguments), this.checked = !1, this.disabled = !1;
   }
@@ -5485,7 +5488,7 @@ const Ht = "anduin-switcher:change", Ie = class Ie extends u {
     }));
   }
   render() {
-    return a`
+    return s`
       <label class="${this.disabled ? "is-disabled" : ""}">
         <div class="track${this.checked ? " track--checked" : ""}" part="track">
           <input
@@ -5502,7 +5505,7 @@ const Ht = "anduin-switcher:change", Ie = class Ie extends u {
     `;
   }
 };
-Ie.styles = g`
+Oe.styles = g`
     :host { display: inline-flex; font-family: var(--font-sans); }
 
     label {
@@ -5566,12 +5569,12 @@ Ie.styles = g`
       line-height: 20px;
     }
   `;
-let M2 = Ie;
+let M2 = Oe;
 k3([
-  s({ type: Boolean })
+  a({ type: Boolean })
 ], M2.prototype, "checked");
 k3([
-  s({ type: Boolean })
+  a({ type: Boolean })
 ], M2.prototype, "disabled");
 customElements.get("anduin-switcher") || customElements.define("anduin-switcher", M2);
 var _t = Object.defineProperty, E = (r, e, t, o) => {
@@ -5579,7 +5582,7 @@ var _t = Object.defineProperty, E = (r, e, t, o) => {
     (l = r[n]) && (i = l(e, t, i) || i);
   return i && _t(e, t, i), i;
 };
-const G4 = "anduin-dropdown:change", Oe = class Oe extends u {
+const G4 = "anduin-dropdown:change", Ie = class Ie extends u {
   constructor() {
     super(...arguments), this.value = "", this.placeholder = "Select...", this.options = [], this.icon = "", this.searchable = !0, this.disabled = !1, this.placement = "bottom-start", this.appearance = "filled", this.variant = "gray0", this.size = "default", this.fullWidth = !1, this.clearable = !0, this._open = !1, this._query = "", this._activeIndex = -1, this._onOutsideClick = (e) => {
       var t;
@@ -5673,7 +5676,7 @@ const G4 = "anduin-dropdown:change", Oe = class Oe extends u {
   }
   render() {
     const e = this.options.find((l) => l.value === this.value), t = (e == null ? void 0 : e.label) ?? "", o = e ? e.icon ?? "" : this.icon, i = this._filteredOptions, n = this.clearable && !!this.value && !this.disabled;
-    return a`
+    return s`
       <button
         class="trigger trigger--${this.appearance} trigger--${this.variant}${this.size === "small" ? " trigger--small" : ""}${this.value ? " has-value" : ""}"
         part="trigger"
@@ -5683,13 +5686,13 @@ const G4 = "anduin-dropdown:change", Oe = class Oe extends u {
         @click=${this._onTriggerClick}
         @keydown=${this._onKeyDown}
       >
-        ${o && t ? a`<anduin-icon name="${o}" size="16"></anduin-icon>` : p}
+        ${o && t ? s`<anduin-icon name="${o}" size="16"></anduin-icon>` : p}
         <span class="trigger__label${t ? "" : " trigger__label--placeholder"}">${t || this.placeholder}</span>
         <span class="trigger__caret${n ? " trigger__caret--clearable" : ""}">
           <span class="trigger__chevron">
             <anduin-icon name="caretDown" size="16"></anduin-icon>
           </span>
-          ${n ? a`
+          ${n ? s`
             <span class="trigger__clear" @click=${this._onClear}>
               <anduin-icon name="crossSmall" size="16"></anduin-icon>
             </span>
@@ -5699,7 +5702,7 @@ const G4 = "anduin-dropdown:change", Oe = class Oe extends u {
 
       <div class="panel${this._open ? " panel--open" : ""}" part="panel" @keydown=${this._onKeyDown}>
         <div class="panel__inner" role="listbox">
-          ${this.searchable ? a`
+          ${this.searchable ? s`
             <div class="search-wrap">
               <anduin-input
                 placeholder="Search ..."
@@ -5711,7 +5714,7 @@ const G4 = "anduin-dropdown:change", Oe = class Oe extends u {
             </div>
           ` : p}
           <div class="options">
-            ${i.length ? i.map((l, d) => a`
+            ${i.length ? i.map((l, d) => s`
                   <div
                     class="option${l.disabled ? " option--disabled" : ""}${l.description ? " option--described" : ""}${d === this._activeIndex ? " option--active" : ""}"
                     role="option"
@@ -5723,22 +5726,22 @@ const G4 = "anduin-dropdown:change", Oe = class Oe extends u {
     }}
                   >
                     <span class="option__check">
-                      ${l.value === this.value ? a`<anduin-icon name="checkSmall" size="16"></anduin-icon>` : p}
+                      ${l.value === this.value ? s`<anduin-icon name="checkSmall" size="16"></anduin-icon>` : p}
                     </span>
-                    ${l.icon ? a`<anduin-icon name="${l.icon}" size="16"></anduin-icon>` : p}
-                    ${l.description ? a`<span class="option__text">
+                    ${l.icon ? s`<anduin-icon name="${l.icon}" size="16"></anduin-icon>` : p}
+                    ${l.description ? s`<span class="option__text">
                           <span class="option__label">${l.label}</span>
                           <span class="option__description" part="option-description">${l.description}</span>
-                        </span>` : a`<span class="option__label">${l.label}</span>`}
+                        </span>` : s`<span class="option__label">${l.label}</span>`}
                   </div>
-                `) : a`<div class="empty">No results</div>`}
+                `) : s`<div class="empty">No results</div>`}
           </div>
         </div>
       </div>
     `;
   }
 };
-Oe.styles = g`
+Ie.styles = g`
     :host { display: inline-block; font-family: var(--font-sans); }
     :host([full-width]) { display: block; width: 100%; }
     :host([full-width]) .trigger { width: 100%; }
@@ -5837,7 +5840,18 @@ Oe.styles = g`
     }
     .trigger--small { height: 24px; padding: 0 6px 0 8px; font-size: 11px; font-weight: 500; }
 
-    .trigger__chevron { display: flex; transition: opacity 100ms; color: var(--color-gray-7, #344054); }
+    /* Caret and × take the trigger's ink (0.0.62). Both used to be pinned to
+       gray (caret gray-7, × gray-6), which matched only outlined/plain gray9:
+       an outlined primary dropdown drew blue text and a blue border around a
+       gray caret, and a filled primary one a gray caret on blue — so a filter
+       switched to variant="primary" to show it is active looked half-styled.
+       currentColor makes every variant's caret match its own label — the gray
+       ones included. A first cut kept gray0/gray9 pinned to gray-7 so they
+       would look exactly as before, but that preserved two bugs: filled gray9
+       drew a gray-7 caret on its gray-7 fill (invisible), and filled gray0 a
+       gray-7 caret beside gray-8 text. Outlined/plain gray9 are unchanged in
+       practice, since their text is gray-7 already. */
+    .trigger__chevron { display: flex; transition: opacity 100ms; color: currentColor; }
     .trigger__clear {
       position: absolute;
       inset: 0;
@@ -5846,11 +5860,28 @@ Oe.styles = g`
       justify-content: center;
       opacity: 0;
       transition: opacity 100ms;
-      color: var(--color-gray-6, #667085);
+      color: currentColor;
       border-radius: 3px;
     }
-    .trigger__clear:hover { color: var(--color-gray-9, #101828); background-color: var(--color-gray-3); }
-    .trigger__clear:active { background-color: var(--color-gray-4); }
+    /* Hover/press plate on a coloured trigger: a tint of the ink itself, so it
+       is a lighter blue under a white × on filled primary and a pale blue under
+       a blue × on outlined primary. The gray variants' fixed gray-3 plate would
+       put a white × on near-white on every filled variant. */
+    .trigger__clear:hover  { background-color: color-mix(in srgb, currentColor 16%, transparent); }
+    .trigger__clear:active { background-color: color-mix(in srgb, currentColor 24%, transparent); }
+    /* The × on the light-surface gray triggers keeps the subdued gray-6 at rest
+       and gray-9 on a gray-3 plate when hovered, as before. Not filled gray9:
+       its fill is gray-7, so a gray-6 × was as invisible there as the old
+       caret; it takes currentColor (white) and the tint plate above. */
+    .trigger--gray0 .trigger__clear,
+    .trigger--outlined.trigger--gray9 .trigger__clear,
+    .trigger--plain.trigger--gray9 .trigger__clear { color: var(--color-gray-6, #667085); }
+    .trigger--gray0 .trigger__clear:hover,
+    .trigger--outlined.trigger--gray9 .trigger__clear:hover,
+    .trigger--plain.trigger--gray9 .trigger__clear:hover { color: var(--color-gray-9, #101828); background-color: var(--color-gray-3); }
+    .trigger--gray0 .trigger__clear:active,
+    .trigger--outlined.trigger--gray9 .trigger__clear:active,
+    .trigger--plain.trigger--gray9 .trigger__clear:active { background-color: var(--color-gray-4); }
     /* Scoped to --clearable so the chevron only fades when there is a × to
        reveal: unscoped, it fades out to show a × that is not there and the caret
        is simply gone while hovered. --clearable is set under exactly the
@@ -5955,42 +5986,42 @@ Oe.styles = g`
       text-align: center;
     }
   `;
-let w = Oe;
+let w = Ie;
 E([
-  s()
+  a()
 ], w.prototype, "value");
 E([
-  s()
+  a()
 ], w.prototype, "placeholder");
 E([
-  s({ attribute: !1 })
+  a({ attribute: !1 })
 ], w.prototype, "options");
 E([
-  s()
+  a()
 ], w.prototype, "icon");
 E([
-  s({ type: Boolean })
+  a({ type: Boolean })
 ], w.prototype, "searchable");
 E([
-  s({ type: Boolean })
+  a({ type: Boolean })
 ], w.prototype, "disabled");
 E([
-  s()
+  a()
 ], w.prototype, "placement");
 E([
-  s()
+  a()
 ], w.prototype, "appearance");
 E([
-  s()
+  a()
 ], w.prototype, "variant");
 E([
-  s()
+  a()
 ], w.prototype, "size");
 E([
-  s({ type: Boolean, attribute: "full-width", reflect: !0 })
+  a({ type: Boolean, attribute: "full-width", reflect: !0 })
 ], w.prototype, "fullWidth");
 E([
-  s({ converter: (r) => r !== "false" })
+  a({ converter: (r) => r !== "false" })
 ], w.prototype, "clearable");
 E([
   m()
@@ -6073,8 +6104,8 @@ const l2 = "anduin-close", r5 = "anduin-after-close", Vt = 300, K4 = 250, xt = /
   }
   render() {
     const e = this._leaving;
-    return a`
-      ${this.allowInteractOutside ? p : a`<div class="backdrop" @click=${this._onBackdropClick}></div>`}
+    return s`
+      ${this.allowInteractOutside ? p : s`<div class="backdrop" @click=${this._onBackdropClick}></div>`}
       <div
         class=${`drawer${e ? " is-leaving" : ""}`}
         style="width: ${this._width}px"
@@ -6089,9 +6120,9 @@ const l2 = "anduin-close", r5 = "anduin-after-close", Vt = 300, K4 = 250, xt = /
           @pointerup=${this._onResizeEnd}
           @pointercancel=${this._onResizeEnd}
         ></div>
-        ${this.hideHeader ? p : a` <div class="header">
+        ${this.hideHeader ? p : s` <div class="header">
               <slot name="header">
-                ${this.heading ? a`<span id="drawer-title" class="title"
+                ${this.heading ? s`<span id="drawer-title" class="title"
                       >${this.heading}</span
                     >` : p}
               </slot>
@@ -6107,7 +6138,7 @@ const l2 = "anduin-close", r5 = "anduin-after-close", Vt = 300, K4 = 250, xt = /
         <div class="body">
           <slot></slot>
         </div>
-        ${this.hideFooter ? p : a`<div class="footer"><slot name="footer"></slot></div>`}
+        ${this.hideFooter ? p : s`<div class="footer"><slot name="footer"></slot></div>`}
       </div>
     `;
   }
@@ -6276,25 +6307,25 @@ Te.styles = g`
   `;
 let G = Te;
 c1([
-  s({ type: Boolean, reflect: !0 })
+  a({ type: Boolean, reflect: !0 })
 ], G.prototype, "open");
 c1([
-  s()
+  a()
 ], G.prototype, "heading");
 c1([
-  s({ type: Boolean, attribute: "hide-header" })
+  a({ type: Boolean, attribute: "hide-header" })
 ], G.prototype, "hideHeader");
 c1([
-  s({ type: Boolean, attribute: "hide-footer" })
+  a({ type: Boolean, attribute: "hide-footer" })
 ], G.prototype, "hideFooter");
 c1([
-  s({ attribute: "default-width" })
+  a({ attribute: "default-width" })
 ], G.prototype, "defaultWidth");
 c1([
-  s({ reflect: !0 })
+  a({ reflect: !0 })
 ], G.prototype, "placement");
 c1([
-  s({ type: Boolean, attribute: "allow-interact-outside" })
+  a({ type: Boolean, attribute: "allow-interact-outside" })
 ], G.prototype, "allowInteractOutside");
 c1([
   m()
@@ -6429,9 +6460,9 @@ const l5 = "anduin-suggestion:change", Zt = "anduin-suggestion:select", kt = "an
   }
   render() {
     const e = this.size === "small" ? "input--small" : this.size === "large" ? "input--large" : "input--default", t = this.status ? `input--${this.status}` : "", o = !!this.startIcon, i = !!this.endIcon || this.clearable && !!this.value, n = this.clearable && !!this.value && !this.disabled && !this.readonly, l = this.size === "small" ? "12" : this.size === "large" ? "20" : "16", d = this.size === "small" ? "10" : this.size === "large" ? "16" : "14", c = this._filteredSuggestions, C = this._open && (!this.hideWhenEmpty || c.length > 0);
-    return a`
+    return s`
       <div class="input-wrapper">
-        ${o ? a`
+        ${o ? s`
           <span class="input__start">
             <anduin-icon name=${this.startIcon} size=${l}></anduin-icon>
           </span>
@@ -6458,14 +6489,14 @@ const l5 = "anduin-suggestion:change", Zt = "anduin-suggestion:select", kt = "an
           @keydown=${this._onKeyDown}
         />
 
-        ${i ? a`
+        ${i ? s`
           <span class="input__end">
-            ${n ? a`
+            ${n ? s`
               <button class="input__clear" type="button" @click=${this._onClear} aria-label="Clear">
                 <anduin-icon name="cross" size=${d}></anduin-icon>
               </button>
             ` : p}
-            ${this.endIcon ? a`
+            ${this.endIcon ? s`
               <anduin-icon name=${this.endIcon} size=${l}></anduin-icon>
             ` : p}
           </span>
@@ -6475,7 +6506,7 @@ const l5 = "anduin-suggestion:change", Zt = "anduin-suggestion:select", kt = "an
       <div class="panel${C ? " panel--open" : ""}" part="panel">
         <div class="panel__inner" role="listbox">
           <div class="options">
-            ${c.length ? c.map((h, f) => a`
+            ${c.length ? c.map((h, f) => s`
                   <div
                     class="option${f === this._activeIndex ? " option--active" : ""}"
                     role="option"
@@ -6487,10 +6518,10 @@ const l5 = "anduin-suggestion:change", Zt = "anduin-suggestion:select", kt = "an
       y.preventDefault(), this._selectSuggestion(h);
     }}
                   >
-                    ${h.icon ? a`<anduin-icon name=${h.icon} size="16"></anduin-icon>` : p}
+                    ${h.icon ? s`<anduin-icon name=${h.icon} size="16"></anduin-icon>` : p}
                     <span class="option__label">${h.label ?? h.value}</span>
                   </div>
-                `) : a`<div class="empty">${this.emptyText}</div>`}
+                `) : s`<div class="empty">${this.emptyText}</div>`}
           </div>
         </div>
       </div>
@@ -6612,46 +6643,46 @@ Ne.styles = g`
   `;
 let Z = Ne;
 z([
-  s()
+  a()
 ], Z.prototype, "value");
 z([
-  s()
+  a()
 ], Z.prototype, "size");
 z([
-  s({ type: Boolean })
+  a({ type: Boolean })
 ], Z.prototype, "disabled");
 z([
-  s({ type: Boolean })
+  a({ type: Boolean })
 ], Z.prototype, "readonly");
 z([
-  s()
+  a()
 ], Z.prototype, "placeholder");
 z([
-  s()
+  a()
 ], Z.prototype, "inputid");
 z([
-  s()
+  a()
 ], Z.prototype, "status");
 z([
-  s({ attribute: "start-icon" })
+  a({ attribute: "start-icon" })
 ], Z.prototype, "startIcon");
 z([
-  s({ attribute: "end-icon" })
+  a({ attribute: "end-icon" })
 ], Z.prototype, "endIcon");
 z([
-  s({ type: Boolean })
+  a({ type: Boolean })
 ], Z.prototype, "clearable");
 z([
-  s({ attribute: !1 })
+  a({ attribute: !1 })
 ], Z.prototype, "suggestions");
 z([
-  s({ type: Boolean })
+  a({ type: Boolean })
 ], Z.prototype, "filter");
 z([
-  s({ type: Boolean, attribute: "hide-when-empty" })
+  a({ type: Boolean, attribute: "hide-when-empty" })
 ], Z.prototype, "hideWhenEmpty");
 z([
-  s({ attribute: "empty-text" })
+  a({ attribute: "empty-text" })
 ], Z.prototype, "emptyText");
 z([
   m()
@@ -6707,7 +6738,7 @@ const $t = "anduin-navigation:change", V5 = "anduin-navigation-item:item-click",
       t.selected = t.value === e, t.theme = this.theme;
   }
   render() {
-    return a`
+    return s`
       <div class="navigation navigation--${this.alignment}" role="navigation" part="navigation">
         <slot @slotchange=${this.syncItems}></slot>
       </div>
@@ -6759,16 +6790,16 @@ je.styles = g`
   `;
 let b1 = je;
 q([
-  s({ attribute: "default-value" })
+  a({ attribute: "default-value" })
 ], b1.prototype, "defaultValue");
 q([
-  s()
+  a()
 ], b1.prototype, "value");
 q([
-  s({ reflect: !0 })
+  a({ reflect: !0 })
 ], b1.prototype, "theme");
 q([
-  s()
+  a()
 ], b1.prototype, "alignment");
 q([
   m()
@@ -6796,11 +6827,11 @@ const Ue = class Ue extends u {
       "nav-item",
       this.selected ? "nav-item--active" : "",
       this.disabled ? "nav-item--disabled" : ""
-    ].filter(Boolean).join(" "), t = a`
-      ${this.startIcon ? a`<span class="nav-item__icon"><anduin-icon name="${this.startIcon}" size="16"></anduin-icon></span>` : p}
+    ].filter(Boolean).join(" "), t = s`
+      ${this.startIcon ? s`<span class="nav-item__icon"><anduin-icon name="${this.startIcon}" size="16"></anduin-icon></span>` : p}
       <slot></slot>
     `;
-    return this.href ? a`
+    return this.href ? s`
           <a
             class="${e}"
             href="${this.href}"
@@ -6808,7 +6839,7 @@ const Ue = class Ue extends u {
             aria-current="${this.selected ? "page" : "false"}"
             @click=${this.onClick}
           >${t}</a>
-        ` : a`
+        ` : s`
           <button
             type="button"
             class="${e}"
@@ -6865,27 +6896,27 @@ Ue.styles = g`
     }
     .nav-item__icon { display: flex; }
   `;
-let a1 = Ue;
+let s1 = Ue;
 q([
-  s()
-], a1.prototype, "value");
+  a()
+], s1.prototype, "value");
 q([
-  s({ attribute: "start-icon" })
-], a1.prototype, "startIcon");
+  a({ attribute: "start-icon" })
+], s1.prototype, "startIcon");
 q([
-  s()
-], a1.prototype, "href");
+  a()
+], s1.prototype, "href");
 q([
-  s({ type: Boolean })
-], a1.prototype, "disabled");
+  a({ type: Boolean })
+], s1.prototype, "disabled");
 q([
-  s({ attribute: !1 })
-], a1.prototype, "selected");
+  a({ attribute: !1 })
+], s1.prototype, "selected");
 q([
-  s({ attribute: !1 })
-], a1.prototype, "theme");
+  a({ attribute: !1 })
+], s1.prototype, "theme");
 customElements.get("anduin-navigation") || customElements.define("anduin-navigation", b1);
-customElements.get("anduin-navigation-item") || customElements.define("anduin-navigation-item", a1);
+customElements.get("anduin-navigation-item") || customElements.define("anduin-navigation-item", s1);
 var Et = Object.defineProperty, P1 = (r, e, t, o) => {
   for (var i = void 0, n = r.length - 1, l; n >= 0; n--)
     (l = r[n]) && (i = l(e, t, i) || i);
@@ -6932,7 +6963,7 @@ const Ge = class Ge extends u {
     t.forEach((i, n) => i.setGrow(o[n] / e * 100));
   }
   render() {
-    return a`
+    return s`
       <div class="panel-group ${this.isVertical ? "panel-group--vertical" : ""}" part="panel-group">
         <slot></slot>
       </div>
@@ -6947,10 +6978,10 @@ Ge.styles = g`
     }
     .panel-group--vertical { flex-direction: column; }
   `;
-let I2 = Ge;
+let O2 = Ge;
 P1([
-  s({ reflect: !0 })
-], I2.prototype, "orientation");
+  a({ reflect: !0 })
+], O2.prototype, "orientation");
 const Ke = class Ke extends u {
   constructor() {
     super(...arguments), this.defaultSize = "", this.minSize = "", this.maxSize = "", this.applied = !1;
@@ -6980,7 +7011,7 @@ const Ke = class Ke extends u {
     return Y4(this.maxSize, e, e);
   }
   render() {
-    return a`<div class="panel" part="panel"><slot></slot></div>`;
+    return s`<div class="panel" part="panel"><slot></slot></div>`;
   }
 };
 Ke.styles = g`
@@ -6989,13 +7020,13 @@ Ke.styles = g`
   `;
 let W1 = Ke;
 P1([
-  s({ attribute: "default-size" })
+  a({ attribute: "default-size" })
 ], W1.prototype, "defaultSize");
 P1([
-  s({ attribute: "min-size" })
+  a({ attribute: "min-size" })
 ], W1.prototype, "minSize");
 P1([
-  s({ attribute: "max-size" })
+  a({ attribute: "max-size" })
 ], W1.prototype, "maxSize");
 const We = class We extends u {
   constructor() {
@@ -7086,9 +7117,9 @@ const We = class We extends u {
       this.groupVertical ? "handle--vertical" : "",
       this.dragging ? "handle--dragging" : ""
     ].filter(Boolean).join(" ");
-    return a`
+    return s`
       <div class="${e}" part="handle">
-        ${this.withHandle ? a`<div class="handle__grip" part="grip"><anduin-icon name="ellipsisVertical" size="12" aria-label="Drag"></anduin-icon></div>` : p}
+        ${this.withHandle ? s`<div class="handle__grip" part="grip"><anduin-icon name="ellipsisVertical" size="12" aria-label="Drag"></anduin-icon></div>` : p}
       </div>
     `;
   }
@@ -7116,7 +7147,7 @@ We.styles = g`
   `;
 let Y1 = We;
 P1([
-  s({ type: Boolean, attribute: "with-handle" })
+  a({ type: Boolean, attribute: "with-handle" })
 ], Y1.prototype, "withHandle");
 P1([
   m()
@@ -7124,7 +7155,7 @@ P1([
 P1([
   m()
 ], Y1.prototype, "dragging");
-customElements.get("anduin-resizable-panel-group") || customElements.define("anduin-resizable-panel-group", I2);
+customElements.get("anduin-resizable-panel-group") || customElements.define("anduin-resizable-panel-group", O2);
 customElements.get("anduin-resizable-panel") || customElements.define("anduin-resizable-panel", W1);
 customElements.get("anduin-resizable-handle") || customElements.define("anduin-resizable-handle", Y1);
 var St = Object.defineProperty, X1 = (r, e, t, o) => {
@@ -7211,7 +7242,7 @@ const Ye = class Ye extends u {
     const e = this.count;
     if (e < 2) return p;
     const t = this.selection, o = this.buildItems();
-    return a`
+    return s`
       <div class="pagination">
         <div class="pagination__indicator"></div>
         <slot name="start" @slotchange=${this.onSlotChange}></slot>
@@ -7239,7 +7270,7 @@ const Ye = class Ye extends u {
   renderItem(e, t) {
     if (e.type === "page") {
       const n = e.page === t;
-      return a`
+      return s`
         <button
           class="pagination__button ${n ? "pagination__button--active" : ""}"
           aria-current=${n ? "page" : p}
@@ -7249,7 +7280,7 @@ const Ye = class Ye extends u {
       `;
     }
     const { pages: o } = e, i = o.length > 1 ? `Pages ${o[0]} to ${o[o.length - 1]}` : `Page ${o[0]}`;
-    return a`
+    return s`
       <anduin-menu placement="bottom">
         <anduin-button
           slot="trigger"
@@ -7259,7 +7290,7 @@ const Ye = class Ye extends u {
           label=${i}
         ></anduin-button>
         <div class="pagination__ellipsis-list">
-          ${o.map((n) => a`
+          ${o.map((n) => s`
             <anduin-menu-item @click=${() => this.goTo(n)}>${n}</anduin-menu-item>
           `)}
         </div>
@@ -7332,13 +7363,13 @@ Ye.styles = g`
   `;
 let y1 = Ye;
 X1([
-  s({ type: Number, attribute: "number-of-pages", reflect: !0 })
+  a({ type: Number, attribute: "number-of-pages", reflect: !0 })
 ], y1.prototype, "numberOfPages");
 X1([
-  s({ type: Number, attribute: "default-value" })
+  a({ type: Number, attribute: "default-value" })
 ], y1.prototype, "defaultValue");
 X1([
-  s({ type: Number })
+  a({ type: Number })
 ], y1.prototype, "value");
 X1([
   m()
@@ -7360,7 +7391,7 @@ const qe = class qe extends u {
     super.connectedCallback(), this.getAttribute("slot") || this.setAttribute("slot", this.target === "first" ? "start" : "end");
   }
   render() {
-    return a`
+    return s`
       <anduin-button
         appearance="plain"
         size="medium"
@@ -7377,7 +7408,7 @@ qe.styles = g`
   `;
 let w2 = qe;
 X1([
-  s({ type: Boolean })
+  a({ type: Boolean })
 ], w2.prototype, "disabled");
 class Dt extends w2 {
   constructor() {
@@ -7394,7 +7425,7 @@ customElements.get("anduin-pagination-first-page") || customElements.define("and
 customElements.get("anduin-pagination-last-page") || customElements.define("anduin-pagination-last-page", Pt);
 const Xe = class Xe extends u {
   render() {
-    return a`<div class="timeline"><slot></slot></div>`;
+    return s`<div class="timeline"><slot></slot></div>`;
   }
 };
 Xe.styles = g`
@@ -7414,7 +7445,7 @@ Xe.styles = g`
 let M5 = Xe;
 const Je = class Je extends u {
   render() {
-    return a`
+    return s`
       <div class="item">
         <div class="item__rail"><div class="item__dot"></div></div>
         <div class="item__content"><slot></slot></div>
@@ -7515,7 +7546,7 @@ Je.styles = g`
 let w5 = Je;
 const Qe = class Qe extends u {
   render() {
-    return a`<div class="date"><slot></slot></div>`;
+    return s`<div class="date"><slot></slot></div>`;
   }
 };
 Qe.styles = g`
@@ -7533,7 +7564,7 @@ Qe.styles = g`
 let Z5 = Qe;
 const e4 = class e4 extends u {
   render() {
-    return a`<div class="title"><slot></slot></div>`;
+    return s`<div class="title"><slot></slot></div>`;
   }
 };
 e4.styles = g`
@@ -7545,7 +7576,7 @@ e4.styles = g`
 let k5 = e4;
 const t4 = class t4 extends u {
   render() {
-    return a`<div class="group__items"><slot></slot></div>`;
+    return s`<div class="group__items"><slot></slot></div>`;
   }
 };
 t4.styles = g`
@@ -7570,7 +7601,7 @@ t4.styles = g`
 let R5 = t4;
 const i4 = class i4 extends u {
   render() {
-    return a`<div class="label-center"><div class="label-pill"><slot></slot></div></div>`;
+    return s`<div class="label-center"><div class="label-pill"><slot></slot></div></div>`;
   }
 };
 i4.styles = g`
@@ -7648,7 +7679,7 @@ const Ft = "anduin-sidebar:select", o4 = class o4 extends u {
     super.connectedCallback(), this.hasAttribute("role") || this.setAttribute("role", "navigation");
   }
   render() {
-    return a`<div class="sidebar" part="sidebar"><slot></slot></div>`;
+    return s`<div class="sidebar" part="sidebar"><slot></slot></div>`;
   }
 };
 o4.styles = g`
@@ -7669,7 +7700,7 @@ o4.styles = g`
 let E5 = o4;
 const n4 = class n4 extends u {
   render() {
-    return a`<div class="sidebar-content" part="content"><slot></slot></div>`;
+    return s`<div class="sidebar-content" part="content"><slot></slot></div>`;
   }
 };
 n4.styles = g`
@@ -7693,7 +7724,7 @@ const r4 = class r4 extends u {
     super(...arguments), this.divider = !1;
   }
   render() {
-    return a`<div class="sidebar-header" part="header"><slot></slot></div>`;
+    return s`<div class="sidebar-header" part="header"><slot></slot></div>`;
   }
 };
 r4.styles = g`
@@ -7707,16 +7738,16 @@ r4.styles = g`
       border-bottom: 1px solid var(--color-gray-3);
     }
   `;
-let O2 = r4;
+let I2 = r4;
 B1([
-  s({ type: Boolean, reflect: !0 })
-], O2.prototype, "divider");
+  a({ type: Boolean, reflect: !0 })
+], I2.prototype, "divider");
 const l4 = class l4 extends u {
   constructor() {
     super(...arguments), this.divider = !1;
   }
   render() {
-    return a`<div class="sidebar-footer" part="footer"><slot></slot></div>`;
+    return s`<div class="sidebar-footer" part="footer"><slot></slot></div>`;
   }
 };
 l4.styles = g`
@@ -7732,14 +7763,14 @@ l4.styles = g`
   `;
 let T2 = l4;
 B1([
-  s({ type: Boolean, reflect: !0 })
+  a({ type: Boolean, reflect: !0 })
 ], T2.prototype, "divider");
-const s4 = class s4 extends u {
+const a4 = class a4 extends u {
   render() {
-    return a`<div class="sidebar-group" part="group" role="group"><slot></slot></div>`;
+    return s`<div class="sidebar-group" part="group" role="group"><slot></slot></div>`;
   }
 };
-s4.styles = g`
+a4.styles = g`
     :host {
       display: block;
     }
@@ -7749,10 +7780,10 @@ s4.styles = g`
       gap: 4px;
     }
   `;
-let S5 = s4;
-const a4 = class a4 extends u {
+let S5 = a4;
+const s4 = class s4 extends u {
   render() {
-    return a`
+    return s`
       <div class="sidebar-group-label" part="group-label">
         <span class="sidebar-group-label__text"><slot></slot></span>
         <slot name="badge" class="sidebar-group-label__badge"></slot>
@@ -7761,7 +7792,7 @@ const a4 = class a4 extends u {
     `;
   }
 };
-a4.styles = g`
+s4.styles = g`
     :host {
       display: block;
     }
@@ -7793,10 +7824,10 @@ a4.styles = g`
       padding-right: 6px;
     }
   `;
-let A5 = a4;
+let A5 = s4;
 const d4 = class d4 extends u {
   render() {
-    return a`<div class="sidebar-menu" part="menu"><slot></slot></div>`;
+    return s`<div class="sidebar-menu" part="menu"><slot></slot></div>`;
   }
 };
 d4.styles = g`
@@ -7832,11 +7863,11 @@ const c4 = class c4 extends u {
     ].filter(Boolean).join(" "), t = [
       "sidebar-menu-item",
       this.disabled ? "sidebar-menu-item--disabled" : ""
-    ].filter(Boolean).join(" "), o = a`
-      ${this.startIcon ? a`<anduin-icon class="sidebar-menu-item__icon" name="${this.startIcon}" size="16"></anduin-icon>` : p}
+    ].filter(Boolean).join(" "), o = s`
+      ${this.startIcon ? s`<anduin-icon class="sidebar-menu-item__icon" name="${this.startIcon}" size="16"></anduin-icon>` : p}
       <span class="sidebar-menu-item__label"><slot></slot></span>
       <slot name="badge" class="sidebar-menu-item__badge"></slot>
-    `, i = this.href ? a`
+    `, i = this.href ? s`
           <a
             class="${t}"
             part="menu-item"
@@ -7848,7 +7879,7 @@ const c4 = class c4 extends u {
             tabindex="${this.disabled ? "-1" : "0"}"
             @click=${this.onClick}
           >${o}</a>
-        ` : a`
+        ` : s`
           <button
             type="button"
             class="${t}"
@@ -7858,7 +7889,7 @@ const c4 = class c4 extends u {
             @click=${this.onClick}
           >${o}</button>
         `;
-    return a`
+    return s`
       <div class="${e}">
         ${i}
         <slot name="action" class="sidebar-menu-item__action"></slot>
@@ -7951,26 +7982,26 @@ c4.styles = g`
   `;
 let H1 = c4;
 B1([
-  s({ attribute: "start-icon" })
+  a({ attribute: "start-icon" })
 ], H1.prototype, "startIcon");
 B1([
-  s({ type: Boolean, reflect: !0 })
+  a({ type: Boolean, reflect: !0 })
 ], H1.prototype, "selected");
 B1([
-  s({ type: Boolean, reflect: !0 })
+  a({ type: Boolean, reflect: !0 })
 ], H1.prototype, "disabled");
 B1([
-  s()
+  a()
 ], H1.prototype, "href");
 B1([
-  s({ type: Boolean, attribute: "open-new-tab" })
+  a({ type: Boolean, attribute: "open-new-tab" })
 ], H1.prototype, "openNewTab");
 const C4 = class C4 extends u {
   connectedCallback() {
     super.connectedCallback(), this.hasAttribute("slot") || this.setAttribute("slot", "action");
   }
   render() {
-    return a`<div class="sidebar-action" part="action"><slot></slot></div>`;
+    return s`<div class="sidebar-action" part="action"><slot></slot></div>`;
   }
 };
 C4.styles = g`
@@ -7989,7 +8020,7 @@ const p4 = class p4 extends u {
     super.connectedCallback(), this.hasAttribute("slot") || this.setAttribute("slot", "badge");
   }
   render() {
-    return a`<div class="sidebar-badge" part="badge"><slot></slot></div>`;
+    return s`<div class="sidebar-badge" part="badge"><slot></slot></div>`;
   }
 };
 p4.styles = g`
@@ -8008,7 +8039,7 @@ const h4 = class h4 extends u {
     super.connectedCallback(), this.hasAttribute("role") || this.setAttribute("role", "separator");
   }
   render() {
-    return a`<div class="sidebar-separator" part="separator"></div>`;
+    return s`<div class="sidebar-separator" part="separator"></div>`;
   }
 };
 h4.styles = g`
@@ -8023,7 +8054,7 @@ h4.styles = g`
 let F5 = h4;
 customElements.get("anduin-sidebar") || customElements.define("anduin-sidebar", E5);
 customElements.get("anduin-sidebar-content") || customElements.define("anduin-sidebar-content", z5);
-customElements.get("anduin-sidebar-header") || customElements.define("anduin-sidebar-header", O2);
+customElements.get("anduin-sidebar-header") || customElements.define("anduin-sidebar-header", I2);
 customElements.get("anduin-sidebar-footer") || customElements.define("anduin-sidebar-footer", T2);
 customElements.get("anduin-sidebar-group") || customElements.define("anduin-sidebar-group", S5);
 customElements.get("anduin-sidebar-group-label") || customElements.define("anduin-sidebar-group-label", A5);
@@ -8043,7 +8074,7 @@ function x1(r) {
   const e = (t) => String(t).padStart(2, "0");
   return `${r.getFullYear()}-${e(r.getMonth() + 1)}-${e(r.getDate())}`;
 }
-function O1() {
+function I1() {
   const r = /* @__PURE__ */ new Date();
   return new Date(r.getFullYear(), r.getMonth(), r.getDate());
 }
@@ -8051,15 +8082,15 @@ function p1(r, e) {
   const t = r.getFullYear(), o = r.getMonth() + e, i = new Date(t, o + 1, 0).getDate();
   return new Date(t, o, Math.min(r.getDate(), i));
 }
-function It(r, e) {
+function Ot(r, e) {
   return new Date(r, e + 1, 0).getDate();
 }
-var Ot = Object.defineProperty, i1 = (r, e, t, o) => {
+var It = Object.defineProperty, i1 = (r, e, t, o) => {
   for (var i = void 0, n = r.length - 1, l; n >= 0; n--)
     (l = r[n]) && (i = l(e, t, i) || i);
-  return i && Ot(e, t, i), i;
+  return i && It(e, t, i), i;
 };
-const Z2 = "anduin-calendar:change", I5 = "anduin-calendar:day-hover", q4 = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], X4 = [
+const Z2 = "anduin-calendar:change", O5 = "anduin-calendar:day-hover", q4 = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], X4 = [
   "January",
   "February",
   "March",
@@ -8082,7 +8113,7 @@ function Nt(r) {
 }
 const u4 = class u4 extends u {
   constructor() {
-    super(...arguments), this.value = "", this.minDate = "", this.maxDate = "", this.rangeStart = "", this.rangeEnd = "", this.rangeMode = !1, this._viewMonth = O1().getMonth(), this._viewYear = O1().getFullYear(), this._focus = "", this._openSelect = null, this._viewSeeded = !1, this._pendingFocus = !1, this._onOutsideClick = (e) => {
+    super(...arguments), this.value = "", this.minDate = "", this.maxDate = "", this.rangeStart = "", this.rangeEnd = "", this.rangeMode = !1, this._viewMonth = I1().getMonth(), this._viewYear = I1().getFullYear(), this._focus = "", this._openSelect = null, this._viewSeeded = !1, this._pendingFocus = !1, this._onOutsideClick = (e) => {
       this._openSelect && !e.composedPath().includes(this) && (this._openSelect = null);
     };
   }
@@ -8098,7 +8129,7 @@ const u4 = class u4 extends u {
       if (t)
         this._viewYear = t.getFullYear(), this._viewMonth = t.getMonth(), this._viewSeeded = !0;
       else if (!this._viewSeeded) {
-        const o = O1();
+        const o = I1();
         this._viewYear = o.getFullYear(), this._viewMonth = o.getMonth();
       }
     }
@@ -8180,7 +8211,7 @@ const u4 = class u4 extends u {
     this.value = t, this._focus = t, this.dispatchEvent(new CustomEvent(Z2, { detail: t, bubbles: !0, composed: !0 }));
   }
   _emitHover(e) {
-    this.dispatchEvent(new CustomEvent(I5, { detail: e, bubbles: !0, composed: !0 }));
+    this.dispatchEvent(new CustomEvent(O5, { detail: e, bubbles: !0, composed: !0 }));
   }
   /** The day that owns `tabindex="0"` when nothing has been focused yet. */
   _defaultFocusDate() {
@@ -8190,7 +8221,7 @@ const u4 = class u4 extends u {
     const t = P(this.value);
     if (t && t.getMonth() === this._viewMonth && t.getFullYear() === this._viewYear)
       return t;
-    const o = O1();
+    const o = I1();
     return o.getMonth() === this._viewMonth && o.getFullYear() === this._viewYear ? o : this._clamp(new Date(this._viewYear, this._viewMonth, 1));
   }
   // ── Month / year pickers ────────────────────────────────────────
@@ -8208,7 +8239,7 @@ const u4 = class u4 extends u {
   }
   _renderSelect(e, t, o, i, n) {
     const l = this._openSelect === e;
-    return a`
+    return s`
       <div class="calendar__select">
         <anduin-button
           appearance="text"
@@ -8221,9 +8252,9 @@ const u4 = class u4 extends u {
       this._openSelect = l ? null : e;
     }}
         >${t}</anduin-button>
-        ${l ? a`
+        ${l ? s`
               <div class="calendar__listbox" role="listbox" aria-label="${o}">
-                ${i.map((d) => a`
+                ${i.map((d) => s`
                   <button
                     type="button"
                     class="calendar__option${d.selected ? " calendar__option--selected" : ""}"
@@ -8239,7 +8270,7 @@ const u4 = class u4 extends u {
   }
   // ── Render ──────────────────────────────────────────────────────
   render() {
-    const e = x1(O1()), t = P(this.value), o = P(this.rangeStart), i = P(this.rangeEnd), n = this.rangeMode || !!(o || i), l = x1(this._defaultFocusDate()), d = new Date(this._viewYear, this._viewMonth, 1), c = new Date(this._viewYear, this._viewMonth + 1, 0).getDate(), C = d.getDay(), h = [
+    const e = x1(I1()), t = P(this.value), o = P(this.rangeStart), i = P(this.rangeEnd), n = this.rangeMode || !!(o || i), l = x1(this._defaultFocusDate()), d = new Date(this._viewYear, this._viewMonth, 1), c = new Date(this._viewYear, this._viewMonth + 1, 0).getDate(), C = d.getDay(), h = [
       ...Array.from({ length: C }, () => null),
       ...Array.from({ length: c }, (_, v) => v + 1)
     ];
@@ -8251,7 +8282,7 @@ const u4 = class u4 extends u {
       const _ = this._max;
       return _ ? new Date(this._viewYear, this._viewMonth + 1, 1).getTime() > _.getTime() : !1;
     })();
-    return a`
+    return s`
       <div class="calendar" part="calendar">
         <div class="calendar__header" part="header">
           <anduin-button
@@ -8299,16 +8330,16 @@ const u4 = class u4 extends u {
         >
           <thead aria-hidden="true">
             <tr>
-              ${Tt.map((_, v) => a`
+              ${Tt.map((_, v) => s`
                 <th class="calendar__day-header" aria-label="${J4[v]}">${_}</th>
               `)}
             </tr>
           </thead>
           <tbody>
-            ${f.map((_) => a`
+            ${f.map((_) => s`
               <tr>
                 ${_.map((v) => {
-      if (v === null) return a`<td class="calendar__day-cell"></td>`;
+      if (v === null) return s`<td class="calendar__day-cell"></td>`;
       const x = new Date(this._viewYear, this._viewMonth, v), M = x1(x), D = x.getTime(), K = this._isDisabled(x), Q1 = !!o && D === o.getTime(), o1 = !!i && D === i.getTime(), y4 = !!o && !!i && D > o.getTime() && D < i.getTime(), H4 = !n && !!t && D === t.getTime(), E3 = [
         "calendar__day-cell",
         y4 ? "calendar__day-cell--in-range" : "",
@@ -8325,7 +8356,7 @@ const u4 = class u4 extends u {
         y4 ? "calendar__day-button--in-range" : "",
         K ? "calendar__day-button--disabled" : ""
       ].filter(Boolean).join(" ");
-      return a`
+      return s`
                     <td
                       class="${E3}"
                       role="gridcell"
@@ -8453,22 +8484,22 @@ u4.styles = g`
   `;
 let j = u4;
 i1([
-  s({ reflect: !0 })
+  a({ reflect: !0 })
 ], j.prototype, "value");
 i1([
-  s({ attribute: "min-date" })
+  a({ attribute: "min-date" })
 ], j.prototype, "minDate");
 i1([
-  s({ attribute: "max-date" })
+  a({ attribute: "max-date" })
 ], j.prototype, "maxDate");
 i1([
-  s({ attribute: "range-start" })
+  a({ attribute: "range-start" })
 ], j.prototype, "rangeStart");
 i1([
-  s({ attribute: "range-end" })
+  a({ attribute: "range-end" })
 ], j.prototype, "rangeEnd");
 i1([
-  s({ type: Boolean, attribute: "range-mode" })
+  a({ type: Boolean, attribute: "range-mode" })
 ], j.prototype, "rangeMode");
 i1([
   m()
@@ -8509,10 +8540,10 @@ const Ut = "anduin-date-range:change", g4 = class g4 extends u {
     };
   }
   connectedCallback() {
-    super.connectedCallback(), this.addEventListener(Z2, this._onCalendarChange), this.addEventListener(I5, this._onCalendarHover);
+    super.connectedCallback(), this.addEventListener(Z2, this._onCalendarChange), this.addEventListener(O5, this._onCalendarHover);
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this.removeEventListener(Z2, this._onCalendarChange), this.removeEventListener(I5, this._onCalendarHover);
+    super.disconnectedCallback(), this.removeEventListener(Z2, this._onCalendarChange), this.removeEventListener(O5, this._onCalendarHover);
   }
   updated() {
     this._sync();
@@ -8540,7 +8571,7 @@ const Ut = "anduin-date-range:change", g4 = class g4 extends u {
   /** Which month each panel opens on: the start date on the left, the month
    *  after it on the right. Falls back to today when there's no range yet. */
   _panelValue(e) {
-    const t = P(this.startDate) ?? O1();
+    const t = P(this.startDate) ?? I1();
     return x1(e === "start" ? t : p1(t, 1));
   }
   /** The range the calendars should paint — the live preview while selecting,
@@ -8556,7 +8587,7 @@ const Ut = "anduin-date-range:change", g4 = class g4 extends u {
     return !o || !i ? [e, t] : o.getTime() <= i.getTime() ? [e, t] : [t, e];
   }
   render() {
-    return a`<div class="date-range" part="date-range"><slot></slot></div>`;
+    return s`<div class="date-range" part="date-range"><slot></slot></div>`;
   }
 };
 g4.styles = g`
@@ -8564,16 +8595,16 @@ g4.styles = g`
   `;
 let t1 = g4;
 J1([
-  s({ attribute: "start-date", reflect: !0 })
+  a({ attribute: "start-date", reflect: !0 })
 ], t1.prototype, "startDate");
 J1([
-  s({ attribute: "end-date", reflect: !0 })
+  a({ attribute: "end-date", reflect: !0 })
 ], t1.prototype, "endDate");
 J1([
-  s({ attribute: "min-date" })
+  a({ attribute: "min-date" })
 ], t1.prototype, "minDate");
 J1([
-  s({ attribute: "max-date" })
+  a({ attribute: "max-date" })
 ], t1.prototype, "maxDate");
 J1([
   m()
@@ -8607,7 +8638,7 @@ const f4 = class f4 extends u {
     return null;
   }
   render() {
-    return a`<anduin-calendar part="calendar" range-mode></anduin-calendar>`;
+    return s`<anduin-calendar part="calendar" range-mode></anduin-calendar>`;
   }
 };
 f4.styles = g`
@@ -8626,7 +8657,7 @@ class Kt extends N2 {
 }
 const v4 = class v4 extends u {
   render() {
-    return a`
+    return s`
       <div class="date-range-default" part="layout">
         <anduin-date-range-start part="start"></anduin-date-range-start>
         <anduin-date-range-end part="end"></anduin-date-range-end>
@@ -8639,9 +8670,9 @@ v4.styles = g`
 
     .date-range-default { display: flex; flex-direction: row; gap: 16px; }
   `;
-let O5 = v4;
+let I5 = v4;
 customElements.get("anduin-date-range") || customElements.define("anduin-date-range", t1);
-customElements.get("anduin-date-range-default") || customElements.define("anduin-date-range-default", O5);
+customElements.get("anduin-date-range-default") || customElements.define("anduin-date-range-default", I5);
 customElements.get("anduin-date-range-start") || customElements.define("anduin-date-range-start", Gt);
 customElements.get("anduin-date-range-end") || customElements.define("anduin-date-range-end", Kt);
 var Wt = Object.defineProperty, T = (r, e, t, o) => {
@@ -8667,7 +8698,7 @@ function Yt(r) {
   }
   return e;
 }
-function s5(r) {
+function a5(r) {
   return r.type === "year" ? 10 ** r.length - 1 : r.length === 1 ? 9 : r.type === "month" ? 12 : 31;
 }
 const i2 = 1, G2 = class G2 extends u {
@@ -8741,7 +8772,7 @@ const i2 = 1, G2 = class G2 extends u {
     if (!t && !o) return e;
     const i = this._indexOfType("month"), n = this._indexOfType("day"), l = this._indexOfType("year");
     if (i < 0 || n < 0 || l < 0) return e;
-    const d = Number(e[l]), c = Number(e[i]), C = Number(e[n]), h = Math.min(C, It(d, c - 1)), f = new Date(d, c - 1, h), y = t && f.getTime() < t.getTime() ? t : o && f.getTime() > o.getTime() ? o : null;
+    const d = Number(e[l]), c = Number(e[i]), C = Number(e[n]), h = Math.min(C, Ot(d, c - 1)), f = new Date(d, c - 1, h), y = t && f.getTime() < t.getTime() ? t : o && f.getTime() > o.getTime() ? o : null;
     if (!y) {
       if (h === C) return e;
       const V = [...e];
@@ -8780,7 +8811,7 @@ const i2 = 1, G2 = class G2 extends u {
   _writeSegment(e, t) {
     const o = this._segments[e];
     if (!o) return;
-    const i = Math.min(Math.max(Number(t), i2), s5(o)), n = [...this._digits];
+    const i = Math.min(Math.max(Number(t), i2), a5(o)), n = [...this._digits];
     n[e] = String(i).padStart(o.length, "0"), this._buffer = "", this._setDigits(n);
   }
   /** Commit any half-typed digits so they aren't stranded on blur or navigation. */
@@ -8799,7 +8830,7 @@ const i2 = 1, G2 = class G2 extends u {
       return;
     }
     const l = Number(i.padEnd(o.length, "0")), d = Number(i.padEnd(o.length, "9"));
-    if (l > s5(o) || d < i2) {
+    if (l > a5(o) || d < i2) {
       this._commitBuffer(t, i, !0);
       return;
     }
@@ -8808,7 +8839,7 @@ const i2 = 1, G2 = class G2 extends u {
   _step(e) {
     const t = this._active, o = this._segments[t];
     if (!o) return;
-    const i = s5(o), n = this._digits[t];
+    const i = a5(o), n = this._digits[t];
     let l;
     n === null ? l = e > 0 ? i2 : i : (l = Number(n) + e, l > i && (l = i2), l < i2 && (l = i));
     const d = [...this._digits];
@@ -8857,9 +8888,9 @@ const i2 = 1, G2 = class G2 extends u {
       this.readonly ? "date-input--readonly" : "",
       this.status ? `date-input--${this.status}` : ""
     ].filter(Boolean).join(" "), i = this.size === "small" ? "12" : "16";
-    return a`
+    return s`
       <div class="${t}" part="container">
-        ${e ? a`<span class="date-input__icon" part="icon">
+        ${e ? s`<span class="date-input__icon" part="icon">
               <anduin-icon name="${this.startIcon}" size="${i}"></anduin-icon>
             </span>` : p}
         <input
@@ -8939,34 +8970,34 @@ G2.shadowRootOptions = { ...u.shadowRootOptions, delegatesFocus: !0 }, G2.styles
   `;
 let S = G2;
 T([
-  s()
+  a()
 ], S.prototype, "format");
 T([
-  s()
+  a()
 ], S.prototype, "value");
 T([
-  s()
+  a()
 ], S.prototype, "size");
 T([
-  s({ type: Boolean })
+  a({ type: Boolean })
 ], S.prototype, "disabled");
 T([
-  s({ type: Boolean })
+  a({ type: Boolean })
 ], S.prototype, "readonly");
 T([
-  s()
+  a()
 ], S.prototype, "status");
 T([
-  s({ attribute: "start-icon" })
+  a({ attribute: "start-icon" })
 ], S.prototype, "startIcon");
 T([
-  s({ attribute: "min-date" })
+  a({ attribute: "min-date" })
 ], S.prototype, "minDate");
 T([
-  s({ attribute: "max-date" })
+  a({ attribute: "max-date" })
 ], S.prototype, "maxDate");
 T([
-  s()
+  a()
 ], S.prototype, "inputid");
 T([
   m()
@@ -9071,7 +9102,7 @@ const m4 = class m4 extends u {
     }));
   }
   render() {
-    return a`
+    return s`
       <div class="datepicker" part="datepicker">
         <anduin-popover full-width placement=${this.placement}>
           <anduin-date-input
@@ -9091,7 +9122,7 @@ const m4 = class m4 extends u {
           ></anduin-date-input>
 
           <div class="datepicker__panel" part="panel">
-            ${this._open ? a`<anduin-calendar
+            ${this._open ? s`<anduin-calendar
                   part="calendar"
                   min-date=${this.minDate}
                   max-date=${this.maxDate}
@@ -9116,37 +9147,37 @@ m4.styles = g`
   `;
 let A = m4;
 N([
-  s()
+  a()
 ], A.prototype, "format");
 N([
-  s()
+  a()
 ], A.prototype, "value");
 N([
-  s()
+  a()
 ], A.prototype, "size");
 N([
-  s({ type: Boolean })
+  a({ type: Boolean })
 ], A.prototype, "disabled");
 N([
-  s({ type: Boolean })
+  a({ type: Boolean })
 ], A.prototype, "readonly");
 N([
-  s()
+  a()
 ], A.prototype, "status");
 N([
-  s({ attribute: "start-icon" })
+  a({ attribute: "start-icon" })
 ], A.prototype, "startIcon");
 N([
-  s({ attribute: "min-date" })
+  a({ attribute: "min-date" })
 ], A.prototype, "minDate");
 N([
-  s({ attribute: "max-date" })
+  a({ attribute: "max-date" })
 ], A.prototype, "maxDate");
 N([
-  s()
+  a()
 ], A.prototype, "placement");
 N([
-  s()
+  a()
 ], A.prototype, "inputid");
 N([
   m()
@@ -9163,7 +9194,7 @@ var e0 = Object.defineProperty, L = (r, e, t, o) => {
     (l = r[n]) && (i = l(e, t, i) || i);
   return i && e0(e, t, i), i;
 };
-const t0 = "anduin-table:sort", i0 = "anduin-table:column-click", o0 = "anduin-table:row-click", n0 = "anduin-table:selection-change", r0 = "anduin-table:cell-context-menu", l0 = "anduin-table:row-expand", s0 = "anduin-table:row-collapse", a0 = "anduin-table:group-toggle", e3 = "anduin-table:column-resize", t3 = 40, n1 = (r) => r.type === "selection", C1 = (r, e) => {
+const t0 = "anduin-table:sort", i0 = "anduin-table:column-click", o0 = "anduin-table:row-click", n0 = "anduin-table:selection-change", r0 = "anduin-table:cell-context-menu", l0 = "anduin-table:row-expand", a0 = "anduin-table:row-collapse", s0 = "anduin-table:group-toggle", e3 = "anduin-table:column-resize", t3 = 40, n1 = (r) => r.type === "selection", C1 = (r, e) => {
   if (!e) return;
   let t = r;
   for (const o of e.split(".")) {
@@ -9350,13 +9381,13 @@ const t0 = "anduin-table:sort", i0 = "anduin-table:column-click", o0 = "anduin-t
   toggleTreeRow(e) {
     const t = !e.expanded, o = new Set(this.expandedKeys);
     t ? o.add(e.key) : o.delete(e.key), this.expandedKeys = o, this.dispatchEvent(new CustomEvent(
-      t ? l0 : s0,
+      t ? l0 : a0,
       { detail: { data: e.data, key: e.key, expanded: t }, bubbles: !0, composed: !0 }
     ));
   }
   toggleGroup(e) {
     const t = !e.expanded, o = new Set(this.collapsedGroups);
-    t ? o.delete(e.key) : o.add(e.key), this.collapsedGroups = o, this.dispatchEvent(new CustomEvent(a0, {
+    t ? o.delete(e.key) : o.add(e.key), this.collapsedGroups = o, this.dispatchEvent(new CustomEvent(s0, {
       detail: { value: e.value, rows: e.rows, expanded: t },
       bubbles: !0,
       composed: !0
@@ -9573,7 +9604,7 @@ const t0 = "anduin-table:sort", i0 = "anduin-table:column-click", o0 = "anduin-t
     ].filter(Boolean).join(" "), d = this.cellStyle(e, t), c = e.headerAlign ?? e.align ?? this.columnAlign, C = [
       "table__header-inner",
       c !== "left" ? `table__header-inner--${c}` : ""
-    ].filter(Boolean).join(" "), h = this.columnKey(e, t), f = this.isColumnResizable(e) ? a`
+    ].filter(Boolean).join(" "), h = this.columnKey(e, t), f = this.isColumnResizable(e) ? s`
           <span
             class="table__resize-handle ${this.resizingKey === h ? "table__resize-handle--active" : ""}"
             part="resize-handle"
@@ -9593,7 +9624,7 @@ const t0 = "anduin-table:sort", i0 = "anduin-table:column-click", o0 = "anduin-t
         areAllRowsSelected: D,
         hasSelectedRow: M > 0,
         onChange: (o1) => this.toggleAllRows(o1)
-      }) : a`
+      }) : s`
             <anduin-checkbox
               .checked=${D}
               .indeterminate=${K}
@@ -9603,7 +9634,7 @@ const t0 = "anduin-table:sort", i0 = "anduin-table:column-click", o0 = "anduin-t
       }}
             ></anduin-checkbox>
           `;
-      return a`
+      return s`
         <th
           class="${l}"
           part="header-cell"
@@ -9613,14 +9644,14 @@ const t0 = "anduin-table:sort", i0 = "anduin-table:column-click", o0 = "anduin-t
         ><div class="${C}">${Q1}</div>${f}</th>
       `;
     }
-    const y = this.sortField === e.field, b = y ? this.sortDirection : null, V = e.renderHeader ? e.renderHeader({ column: e, sortDirection: b }) : a`<span class="table__header-text">${e.title ?? ""}</span>`, _ = e.isSortable ? a`
+    const y = this.sortField === e.field, b = y ? this.sortDirection : null, V = e.renderHeader ? e.renderHeader({ column: e, sortDirection: b }) : s`<span class="table__header-text">${e.title ?? ""}</span>`, _ = e.isSortable ? s`
           <anduin-icon
             class="table__sort-icon ${y ? "table__sort-icon--active" : ""}"
             name="${b === "desc" ? "caretDown" : "caretUp"}"
             size="16"
           ></anduin-icon>
         ` : p;
-    return a`
+    return s`
       <th
         class="${l}"
         part="header-cell"
@@ -9647,7 +9678,7 @@ const t0 = "anduin-table:sort", i0 = "anduin-table:column-click", o0 = "anduin-t
       this.sizingClass(o, i)
     ].filter(Boolean).join(" "), C = this.cellStyle(o, i);
     if (n1(o)) {
-      const V = this.renderSelectedKeys.has(e.key), _ = this.rowIsDisabled(e.data), v = (M) => this.setRowSelected(e, M), x = o.renderCell ? o.renderCell({ data: e.data, isChecked: V, isDisabled: _, onChange: v }) : a`
+      const V = this.renderSelectedKeys.has(e.key), _ = this.rowIsDisabled(e.data), v = (M) => this.setRowSelected(e, M), x = o.renderCell ? o.renderCell({ data: e.data, isChecked: V, isDisabled: _, onChange: v }) : s`
             <anduin-checkbox
               .checked=${V}
               .disabled=${_}
@@ -9657,7 +9688,7 @@ const t0 = "anduin-table:sort", i0 = "anduin-table:column-click", o0 = "anduin-t
       }}
             ></anduin-checkbox>
           `;
-      return a`
+      return s`
         <td
           class="${c}"
           part="cell"
@@ -9667,9 +9698,9 @@ const t0 = "anduin-table:sort", i0 = "anduin-table:column-click", o0 = "anduin-t
         >${x}</td>
       `;
     }
-    const h = C1(e.data, o.field), f = o.renderCell ? o.renderCell({ data: e.data, value: h, rowIndex: t, column: o }) : h == null ? p : String(h), b = this.dataTree && i === this.firstDataColumnIndex ? a`
+    const h = C1(e.data, o.field), f = o.renderCell ? o.renderCell({ data: e.data, value: h, rowIndex: t, column: o }) : h == null ? p : String(h), b = this.dataTree && i === this.firstDataColumnIndex ? s`
           <div class="table__tree-cell" style="padding-left:${e.depth * this.treeChildIndent}px">
-            ${e.hasChildren ? a`
+            ${e.hasChildren ? s`
                   <button
                     class="table__tree-toggle"
                     type="button"
@@ -9684,11 +9715,11 @@ const t0 = "anduin-table:sort", i0 = "anduin-table:column-click", o0 = "anduin-t
                       size="16"
                     ></anduin-icon>
                   </button>
-                ` : a`<span class="table__tree-spacer"></span>`}
+                ` : s`<span class="table__tree-spacer"></span>`}
             <span>${f}</span>
           </div>
         ` : f;
-    return a`
+    return s`
       <td
         class="${c}"
         part="cell"
@@ -9709,7 +9740,7 @@ const t0 = "anduin-table:sort", i0 = "anduin-table:column-click", o0 = "anduin-t
       o ? "table__row--selected" : "",
       n
     ].filter(Boolean).join(" ");
-    return a`
+    return s`
       <tr
         class="${l}"
         part="${n ? `row ${n}` : "row"}"
@@ -9720,16 +9751,16 @@ const t0 = "anduin-table:sort", i0 = "anduin-table:column-click", o0 = "anduin-t
         @mouseenter=${() => this.onRowMouseEnter(e)}
       >
         ${this.columns.map((d, c) => this.renderCell(e, t, d, c))}
-        ${this.layout === "fit-data-fill" ? a`<td class="table__cell" style="width:100%"></td>` : p}
+        ${this.layout === "fit-data-fill" ? s`<td class="table__cell" style="width:100%"></td>` : p}
       </tr>
     `;
   }
   renderGroupRow(e) {
-    const t = this.renderGroupHeader ? this.renderGroupHeader(e.value, e.rows.length, e.rows) : a`
+    const t = this.renderGroupHeader ? this.renderGroupHeader(e.value, e.rows.length, e.rows) : s`
           <span>${String(e.value)}</span>
           <span class="table__group-count">${e.rows.length}</span>
         `;
-    return a`
+    return s`
       <tr class="table__group-row" part="group-row">
         <td class="table__group-cell" colspan="${this.columnCount}">
           <button
@@ -9752,7 +9783,7 @@ const t0 = "anduin-table:sort", i0 = "anduin-table:column-click", o0 = "anduin-t
     return this.columns.length + (this.layout === "fit-data-fill" ? 1 : 0);
   }
   renderPlaceholder() {
-    return a`
+    return s`
       <tr>
         <td class="table__placeholder-cell" part="placeholder" colspan="${this.columnCount}">
           <slot name="empty">No data to display</slot>
@@ -9775,32 +9806,32 @@ const t0 = "anduin-table:sort", i0 = "anduin-table:column-click", o0 = "anduin-t
       const h = Math.ceil((this.viewportHeight || 400) / this.rowHeight), f = Math.max(0, Math.floor(this.virtualScrollTop / this.rowHeight) - 6), y = Math.min(e.length, f + h + 12);
       n = e.slice(f, y), l = f * this.rowHeight, d = (e.length - y) * this.rowHeight, c = f;
     }
-    return a`
+    return s`
       <div class="${i}" part="table" style="${t}">
         <div class="table__scroll" part="scroll" @scroll=${this.onScroll}>
           <table
             class="table__el table__el--${this.layout}"
             style="${o ? `min-width:${o}px` : ""}"
           >
-            ${this.hideHeader ? p : a`
+            ${this.hideHeader ? p : s`
                   <thead part="header">
                     <tr class="table__header-row" part="header-row">
                       ${this.columns.map((C, h) => this.renderHeaderCell(C, h))}
-                      ${this.layout === "fit-data-fill" ? a`<th class="table__header-cell" style="width:100%"></th>` : p}
+                      ${this.layout === "fit-data-fill" ? s`<th class="table__header-cell" style="width:100%"></th>` : p}
                     </tr>
                   </thead>
                 `}
             <tbody part="body">
               ${e.length === 0 ? this.renderPlaceholder() : p}
-              ${l > 0 ? a`<tr style="height:${l}px" aria-hidden="true"><td colspan="${this.columnCount}"></td></tr>` : p}
+              ${l > 0 ? s`<tr style="height:${l}px" aria-hidden="true"><td colspan="${this.columnCount}"></td></tr>` : p}
               ${n.map(
       (C, h) => C.kind === "group" ? this.renderGroupRow(C) : this.renderRow(C, c + h)
     )}
-              ${d > 0 ? a`<tr style="height:${d}px" aria-hidden="true"><td colspan="${this.columnCount}"></td></tr>` : p}
+              ${d > 0 ? s`<tr style="height:${d}px" aria-hidden="true"><td colspan="${this.columnCount}"></td></tr>` : p}
             </tbody>
           </table>
         </div>
-        ${this.loading ? a`
+        ${this.loading ? s`
               <div class="table__loading" part="loading">
                 <slot name="loading"><anduin-spinner size="medium"></anduin-spinner></slot>
               </div>
@@ -10177,85 +10208,85 @@ b4.styles = g`
   `;
 let H = b4;
 L([
-  s({ attribute: !1 })
+  a({ attribute: !1 })
 ], H.prototype, "columns");
 L([
-  s({ attribute: !1 })
+  a({ attribute: !1 })
 ], H.prototype, "data");
 L([
-  s({ reflect: !0 })
+  a({ reflect: !0 })
 ], H.prototype, "layout");
 L([
-  s({ attribute: "render-mode", reflect: !0 })
+  a({ attribute: "render-mode", reflect: !0 })
 ], H.prototype, "renderMode");
 L([
-  s({ type: Number, attribute: "row-height" })
+  a({ type: Number, attribute: "row-height" })
 ], H.prototype, "rowHeight");
 L([
-  s()
+  a()
 ], H.prototype, "height");
 L([
-  s({ attribute: "max-height" })
+  a({ attribute: "max-height" })
 ], H.prototype, "maxHeight");
 L([
-  s({ attribute: "min-height" })
+  a({ attribute: "min-height" })
 ], H.prototype, "minHeight");
 L([
-  s({
+  a({
     attribute: "resizable-columns",
     converter: (r) => r !== "false"
   })
 ], H.prototype, "resizableColumns");
 L([
-  s({ type: Boolean, attribute: "hide-header", reflect: !0 })
+  a({ type: Boolean, attribute: "hide-header", reflect: !0 })
 ], H.prototype, "hideHeader");
 L([
-  s({ type: Boolean, reflect: !0 })
+  a({ type: Boolean, reflect: !0 })
 ], H.prototype, "loading");
 L([
-  s({ reflect: !0 })
+  a({ reflect: !0 })
 ], H.prototype, "selectable");
 L([
-  s({ attribute: "index-column" })
+  a({ attribute: "index-column" })
 ], H.prototype, "indexColumn");
 L([
-  s({ attribute: "column-align" })
+  a({ attribute: "column-align" })
 ], H.prototype, "columnAlign");
 L([
-  s({ attribute: "column-vertical-align" })
+  a({ attribute: "column-vertical-align" })
 ], H.prototype, "columnVerticalAlign");
 L([
-  s({ attribute: "sort-field" })
+  a({ attribute: "sort-field" })
 ], H.prototype, "sortField");
 L([
-  s({ attribute: "sort-direction" })
+  a({ attribute: "sort-direction" })
 ], H.prototype, "sortDirection");
 L([
-  s({ type: Boolean, attribute: "data-tree", reflect: !0 })
+  a({ type: Boolean, attribute: "data-tree", reflect: !0 })
 ], H.prototype, "dataTree");
 L([
-  s({ attribute: "tree-children-field" })
+  a({ attribute: "tree-children-field" })
 ], H.prototype, "treeChildrenField");
 L([
-  s({ type: Number, attribute: "tree-child-indent" })
+  a({ type: Number, attribute: "tree-child-indent" })
 ], H.prototype, "treeChildIndent");
 L([
-  s({ attribute: "group-by" })
+  a({ attribute: "group-by" })
 ], H.prototype, "groupBy");
 L([
-  s({ attribute: !1 })
+  a({ attribute: !1 })
 ], H.prototype, "selectedRows");
 L([
-  s({ attribute: !1 })
+  a({ attribute: !1 })
 ], H.prototype, "isRowDisabled");
 L([
-  s({ attribute: !1 })
+  a({ attribute: !1 })
 ], H.prototype, "onStartExpanded");
 L([
-  s({ attribute: !1 })
+  a({ attribute: !1 })
 ], H.prototype, "rowClass");
 L([
-  s({ attribute: !1 })
+  a({ attribute: !1 })
 ], H.prototype, "renderGroupHeader");
 L([
   m()
@@ -10285,26 +10316,26 @@ customElements.get("anduin-table") || customElements.define("anduin-table", H);
 export {
   A5 as $,
   N1 as A,
-  $ as B,
-  I as C,
+  R as B,
+  O as C,
   P2 as D,
   $1 as E,
   G1 as F,
   it as G,
   ot as H,
   b1 as I,
-  a1 as J,
+  s1 as J,
   y1 as K,
   Dt as L,
   Pt as M,
   Q as N,
   b5 as O,
   b2 as P,
-  s1 as Q,
+  a1 as Q,
   K1 as R,
   Y1 as S,
   W1 as T,
-  I2 as U,
+  O2 as U,
   E5 as V,
   P5 as W,
   B5 as X,
@@ -10313,7 +10344,7 @@ export {
   S5 as _,
   e1 as a,
   l5 as a$,
-  O2 as a0,
+  I2 as a0,
   D5 as a1,
   H1 as a2,
   F5 as a3,
@@ -10374,7 +10405,7 @@ export {
   f5 as av,
   u3 as aw,
   Z2 as ax,
-  I5 as ay,
+  O5 as ay,
   x7 as az,
   S2 as b,
   kt as b0,
@@ -10383,16 +10414,16 @@ export {
   r0 as b3,
   i0 as b4,
   e3 as b5,
-  a0 as b6,
+  s0 as b6,
   o0 as b7,
-  s0 as b8,
+  a0 as b8,
   l0 as b9,
   n0 as ba,
   t0 as bb,
   F7 as bc,
   M3 as bd,
   W2 as be,
-  O7 as bf,
+  I7 as bf,
   P7 as bg,
   U7 as bh,
   G7 as bi,
@@ -10411,17 +10442,17 @@ export {
   g3 as bv,
   P as bw,
   gt as bx,
-  O1 as by,
+  I1 as by,
   h0 as bz,
   v2 as c,
-  R as d,
+  $ as d,
   j as e,
   A2 as f,
   v1 as g,
   S as h,
   A as i,
   t1 as j,
-  O5 as k,
+  I5 as k,
   Kt as l,
   N2 as m,
   Gt as n,
@@ -10431,7 +10462,7 @@ export {
   Mt as r,
   w as s,
   B2 as t,
-  a5 as u,
+  s5 as u,
   d5 as v,
   c5 as w,
   y2 as x,