@duyluonganduin/acl-web-components 0.0.20 → 0.0.22

package/dist/acl-web-components.js

@@ -1,5 +1,5 @@
-import { A as c, a as r, b as i, c as l, d as e, e as t, f as p, g as d, h as g, i as u, j as x, k as A, l as h, m as k, n as E, o as m, p as T, q as C, r as _, s as O, t as y, u as I, v as L, w as N, x as S, y as G, z as D, B as w, C as R, D as P, E as b, F as f, G as U, H, I as B, J as F, K as M, L as z, M as v, N as V, O as W, P as K, Q as X, R as Y, S as j, T as q, U as J, V as Q, W as Z, X as $, Y as aa, Z as oa, _ as na, $ as sa, a0 as ca, a1 as ra, a2 as ia, a3 as la, a4 as ea, a5 as ta, a6 as pa, a7 as da, a8 as ga, a9 as ua, aa as xa, ab as Aa, ac as ha, ad as ka, ae as Ea, af as ma, ag as Ta, ah as Ca, ai as _a, aj as Oa, ak as ya, al as Ia, am as La, an as Na, ao as Sa, ap as Ga, aq as Da, ar as wa } from "./anduin-suggestion-CQiYXOwe.js";
-const o = ':root{--color-gray-0: oklch(1 0 0);--color-gray-1: oklch(.9846 .0017 247.84);--color-gray-2: oklch(.9515 .0046 258.32);--color-gray-3: oklch(.9336 .0058 264.53);--color-gray-4: oklch(.8618 .0141 258.35);--color-gray-5: oklch(.7073 .0268 263.28);--color-gray-6: oklch(.6528 .0316 266.24);--color-gray-7: oklch(.5371 .0337 264.24);--color-gray-8: oklch(.3544 .0326 260.94);--color-gray-9: oklch(.2776 .0341 255.81);--color-danger-1: oklch(.9437 .0174 17.47);--color-danger-2: oklch(.8643 .0573 18.32);--color-danger-3: oklch(.712 .1517 21.64);--color-danger-4: oklch(.5948 .2165 26.91);--color-danger-5: oklch(.531 .2147 28.91);--color-primary-1: oklch(.9474 .0256 221.57);--color-primary-2: oklch(.8652 .066 236.86);--color-primary-3: oklch(.7219 .1335 240.15);--color-primary-4: oklch(.5679 .1784 254.76);--color-primary-5: oklch(.4682 .1548 255.23);--color-success-1: oklch(.9276 .0541 150.91);--color-success-2: oklch(.8592 .1078 149.75);--color-success-3: oklch(.6953 .1711 149.14);--color-success-4: oklch(.6149 .1634 148.21);--color-success-5: oklch(.5075 .136 146.46);--color-warning-1: oklch(.9549 .0496 88.08);--color-warning-2: oklch(.912 .0811 83.56);--color-warning-3: oklch(.8282 .1628 78.73);--color-warning-4: oklch(.7325 .1512 75.97);--color-warning-5: oklch(.5329 .1098 82);--color-semantic-gray-0: oklch(1 0 0);--color-semantic-gray-1: oklch(.9846 .0017 247.84);--color-semantic-gray-2: oklch(.9515 .0046 258.32);--color-semantic-gray-3: oklch(.9336 .0058 264.53);--color-semantic-gray-4: oklch(.8618 .0141 258.35);--color-semantic-gray-5: oklch(.7073 .0268 263.28);--color-semantic-gray-6: oklch(.6528 .0316 266.24);--color-semantic-gray-7: oklch(.5371 .0337 264.24);--color-semantic-gray-8: oklch(.3544 .0326 260.94);--color-semantic-gray-9: oklch(.2776 .0341 255.81);--color-semantic-danger-1: oklch(.9437 .0174 17.47);--color-semantic-danger-2: oklch(.8643 .0573 18.32);--color-semantic-danger-3: oklch(.712 .1517 21.64);--color-semantic-danger-4: oklch(.5948 .2165 26.91);--color-semantic-danger-5: oklch(.531 .2147 28.91);--color-semantic-primary-1: oklch(.9474 .0256 221.57);--color-semantic-primary-2: oklch(.8652 .066 236.86);--color-semantic-primary-3: oklch(.7219 .1335 240.15);--color-semantic-primary-4: oklch(.5679 .1784 254.76);--color-semantic-primary-5: oklch(.4682 .1548 255.23);--color-semantic-success-1: oklch(.9276 .0541 150.91);--color-semantic-success-2: oklch(.8592 .1078 149.75);--color-semantic-success-3: oklch(.6953 .1711 149.14);--color-semantic-success-4: oklch(.6149 .1634 148.21);--color-semantic-success-5: oklch(.5075 .136 146.46);--color-semantic-warning-1: oklch(.9549 .0496 88.08);--color-semantic-warning-2: oklch(.912 .0811 83.56);--color-semantic-warning-3: oklch(.8282 .1628 78.73);--color-semantic-warning-4: oklch(.7325 .1512 75.97);--color-semantic-warning-5: oklch(.5329 .1098 82);--color-white: var(--color-gray-0);--font-sans: system-ui, -apple-system, Roboto, Oxygen, Cantarell, Ubuntu, "Segoe UI", sans-serif;--font-mono: monospace;--text-9: 9px;--text-10: 10px;--text-11: 11px;--text-13: 13px;--text-15: 15px;--text-17: 17px;--text-20: 20px;--text-23: 23px;--text-26: 26px;--text-30: 30px;--text-35: 35px;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--leading-16: 16px;--leading-20: 20px;--leading-24: 24px;--leading-28: 28px;--leading-32: 32px;--leading-40: 40px;--leading-44: 44px;--leading-r1p5: 1.5;--radius-0: 0;--radius-2: 2px;--radius-3: 3px;--radius-4: 4px;--radius-6: 6px;--radius-8: 8px;--radius-12: 12px;--radius-16: 16px;--radius-20: 20px;--radius-24: 24px;--radius-full: 9999px;--shadow-1: 0px 1px 2px rgba(29, 41, 57, .07);--shadow-2: 0px 1px 2px rgba(29, 41, 57, .04), 0px 2px 8px rgba(29, 41, 57, .08);--shadow-3: 0px 2px 8px rgba(29, 41, 57, .08), 0px 8px 24px rgba(29, 41, 57, .12);--shadow-4: 0px 4px 8px rgba(29, 41, 57, .08), 0px 16px 48px rgba(29, 41, 57, .16);--spacing-px: 1px;--spacing-0: 0;--spacing-2: 2px;--spacing-4: 4px;--spacing-6: 6px;--spacing-8: 8px;--spacing-12: 12px;--spacing-16: 16px;--spacing-20: 20px;--spacing-24: 24px;--spacing-28: 28px;--spacing-32: 32px;--spacing-40: 40px;--spacing-48: 48px;--spacing-56: 56px;--spacing-64: 64px;--spacing-128: 128px;--spacing-256: 256px;--z-0: 0;--z-1: 1;--z-2: 2;--z-3: 3;--z-4: 4;--z-5: 5;--z-999: 999;--z-9999: 9999}body{font-family:var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:var(--text-13)}';
+import { A as c, a as r, b as i, c as l, d as e, e as t, f as p, g as d, h as g, i as u, j as x, k as A, l as h, m as k, n as E, o as m, p as T, q as C, r as _, s as O, t as y, u as I, v as L, w as N, x as S, y as G, z as D, B as w, C as R, D as P, E as b, F as f, G as U, H, I as B, J as F, K as M, L as z, M as v, N as V, O as W, P as K, Q as X, R as Y, S as j, T as q, U as J, V as Q, W as Z, X as $, Y as aa, Z as oa, _ as na, $ as sa, a0 as ca, a1 as ra, a2 as ia, a3 as la, a4 as ea, a5 as ta, a6 as pa, a7 as da, a8 as ga, a9 as ua, aa as xa, ab as Aa, ac as ha, ad as ka, ae as Ea, af as ma, ag as Ta, ah as Ca, ai as _a, aj as Oa, ak as ya, al as Ia, am as La, an as Na, ao as Sa, ap as Ga, aq as Da, ar as wa } from "./anduin-suggestion-CQz20-Zh.js";
+const o = ':root{--color-gray-0: oklch(1 0 0);--color-gray-1: oklch(.9846 .0017 247.84);--color-gray-2: oklch(.9515 .0046 258.32);--color-gray-3: oklch(.9336 .0058 264.53);--color-gray-4: oklch(.8618 .0141 258.35);--color-gray-5: oklch(.7073 .0268 263.28);--color-gray-6: oklch(.6528 .0316 266.24);--color-gray-7: oklch(.5371 .0337 264.24);--color-gray-8: oklch(.3544 .0326 260.94);--color-gray-9: oklch(.2776 .0341 255.81);--color-danger-1: oklch(.9437 .0174 17.47);--color-danger-2: oklch(.8643 .0573 18.32);--color-danger-3: oklch(.712 .1517 21.64);--color-danger-4: oklch(.5948 .2165 26.91);--color-danger-5: oklch(.531 .2147 28.91);--color-primary-1: oklch(.9474 .0256 221.57);--color-primary-2: oklch(.8652 .066 236.86);--color-primary-3: oklch(.7219 .1335 240.15);--color-primary-4: oklch(.5679 .1784 254.76);--color-primary-5: oklch(.4682 .1548 255.23);--color-success-1: oklch(.9276 .0541 150.91);--color-success-2: oklch(.8592 .1078 149.75);--color-success-3: oklch(.6953 .1711 149.14);--color-success-4: oklch(.6149 .1634 148.21);--color-success-5: oklch(.5075 .136 146.46);--color-warning-1: oklch(.9549 .0496 88.08);--color-warning-2: oklch(.912 .0811 83.56);--color-warning-3: oklch(.8282 .1628 78.73);--color-warning-4: oklch(.7325 .1512 75.97);--color-warning-5: oklch(.5329 .1098 82);--color-semantic-gray-0: oklch(1 0 0);--color-semantic-gray-1: oklch(.9846 .0017 247.84);--color-semantic-gray-2: oklch(.9515 .0046 258.32);--color-semantic-gray-3: oklch(.9336 .0058 264.53);--color-semantic-gray-4: oklch(.8618 .0141 258.35);--color-semantic-gray-5: oklch(.7073 .0268 263.28);--color-semantic-gray-6: oklch(.6528 .0316 266.24);--color-semantic-gray-7: oklch(.5371 .0337 264.24);--color-semantic-gray-8: oklch(.3544 .0326 260.94);--color-semantic-gray-9: oklch(.2776 .0341 255.81);--color-semantic-danger-1: oklch(.9437 .0174 17.47);--color-semantic-danger-2: oklch(.8643 .0573 18.32);--color-semantic-danger-3: oklch(.712 .1517 21.64);--color-semantic-danger-4: oklch(.5948 .2165 26.91);--color-semantic-danger-5: oklch(.531 .2147 28.91);--color-semantic-primary-1: oklch(.9474 .0256 221.57);--color-semantic-primary-2: oklch(.8652 .066 236.86);--color-semantic-primary-3: oklch(.7219 .1335 240.15);--color-semantic-primary-4: oklch(.5679 .1784 254.76);--color-semantic-primary-5: oklch(.4682 .1548 255.23);--color-semantic-success-1: oklch(.9276 .0541 150.91);--color-semantic-success-2: oklch(.8592 .1078 149.75);--color-semantic-success-3: oklch(.6953 .1711 149.14);--color-semantic-success-4: oklch(.6149 .1634 148.21);--color-semantic-success-5: oklch(.5075 .136 146.46);--color-semantic-warning-1: oklch(.9549 .0496 88.08);--color-semantic-warning-2: oklch(.912 .0811 83.56);--color-semantic-warning-3: oklch(.8282 .1628 78.73);--color-semantic-warning-4: oklch(.7325 .1512 75.97);--color-semantic-warning-5: oklch(.5329 .1098 82);--color-white: var(--color-gray-0);--font-sans: system-ui, -apple-system, Roboto, Oxygen, Cantarell, Ubuntu, "Segoe UI", sans-serif;--font-mono: monospace;--text-9: 9px;--text-10: 10px;--text-11: 11px;--text-12: 12px;--text-13: 13px;--text-15: 15px;--text-17: 17px;--text-20: 20px;--text-23: 23px;--text-26: 26px;--text-30: 30px;--text-35: 35px;--font-weight-normal: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--leading-16: 16px;--leading-20: 20px;--leading-24: 24px;--leading-28: 28px;--leading-32: 32px;--leading-40: 40px;--leading-44: 44px;--leading-r1p5: 1.5;--radius-0: 0;--radius-2: 2px;--radius-3: 3px;--radius-4: 4px;--radius-6: 6px;--radius-8: 8px;--radius-12: 12px;--radius-16: 16px;--radius-20: 20px;--radius-24: 24px;--radius-full: 9999px;--shadow-1: 0px 1px 2px rgba(29, 41, 57, .07);--shadow-2: 0px 1px 2px rgba(29, 41, 57, .04), 0px 2px 8px rgba(29, 41, 57, .08);--shadow-3: 0px 2px 8px rgba(29, 41, 57, .08), 0px 8px 24px rgba(29, 41, 57, .12);--shadow-4: 0px 4px 8px rgba(29, 41, 57, .08), 0px 16px 48px rgba(29, 41, 57, .16);--spacing-px: 1px;--spacing-0: 0;--spacing-2: 2px;--spacing-4: 4px;--spacing-6: 6px;--spacing-8: 8px;--spacing-12: 12px;--spacing-16: 16px;--spacing-20: 20px;--spacing-24: 24px;--spacing-28: 28px;--spacing-32: 32px;--spacing-40: 40px;--spacing-48: 48px;--spacing-56: 56px;--spacing-64: 64px;--spacing-128: 128px;--spacing-256: 256px;--z-0: 0;--z-1: 1;--z-2: 2;--z-3: 3;--z-4: 4;--z-5: 5;--z-999: 999;--z-9999: 9999}body{font-family:var(--font-sans);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:var(--text-13)}';
 if (typeof document < "u" && !document.getElementById("acl-tokens")) {
   const a = document.createElement("style");
   a.id = "acl-tokens", a.textContent = o, document.head.appendChild(a);

package/dist/{anduin-suggestion-CQiYXOwe.js → anduin-suggestion-CQz20-Zh.js}

@@ -3281,12 +3281,22 @@ const G = (j = class extends h {
       const t = this.maxWidth, i = j._PRESETS.has(t) ? `${t}px` : t;
       this.style.setProperty("--_modal-width", i);
     }
-    e.has("open") && (this.open ? (this._leaving = !1, this.classList.add("is-shown")) : this.classList.contains("is-shown") && (this._leaving = !0, setTimeout(() => {
-      this._leaving = !1, this.classList.remove("is-shown"), this.dispatchEvent(new CustomEvent(h3, { bubbles: !0, composed: !0 }));
-    }, Math.max(t2, A5))));
+    e.has("open") && (this.open ? (this._leaving = !1, this.classList.add("is-shown")) : this.classList.contains("is-shown") && (this._leaving = !0, setTimeout(
+      () => {
+        this._leaving = !1, this.classList.remove("is-shown"), this.dispatchEvent(
+          new CustomEvent(h3, {
+            bubbles: !0,
+            composed: !0
+          })
+        );
+      },
+      Math.max(t2, A5)
+    )));
   }
   dispatch(e) {
-    this.dispatchEvent(new CustomEvent(e, { bubbles: !0, composed: !0 }));
+    this.dispatchEvent(
+      new CustomEvent(e, { bubbles: !0, composed: !0 })
+    );
   }
   onOverlayClick() {
     this.dispatch(f1);
@@ -3303,26 +3313,35 @@ const G = (j = class extends h {
   render() {
     const e = this._leaving, t = this.fullscreen;
     return s`
-      <div class=${`overlay${e ? " is-leaving" : ""}`} @click=${this.onOverlayClick}></div>
+      <div
+        class=${`overlay${e ? " is-leaving" : ""}`}
+        @click=${this.onOverlayClick}
+      ></div>
       <div class=${`modal-wrapper${t ? " modal-wrapper--fullscreen" : ""}`}>
-        <div class=${`modal${t ? " modal--fullscreen" : ""}${e ? " is-leaving" : ""}`} role="dialog" aria-modal="true" aria-labelledby="modal-title">
-          ${this.hideHeader ? c : s`
-          <div class="header">
-            <div class="header-slot">
-              <slot name="header">
-                ${this.heading ? s`<span id="modal-title" class="title">${this.heading}</span>` : c}
-              </slot>
-            </div>
-            <span class="header-sep"></span>
-            <anduin-button
-              appearance="plain"
-              variant="gray9"
-              size="medium"
-              label="Close"
-              start-icon="cross"
-              @click=${this.onClose}
-            ></anduin-button>
-          </div>`}
+        <div
+          class=${`modal${t ? " modal--fullscreen" : ""}${e ? " is-leaving" : ""}`}
+          role="dialog"
+          aria-modal="true"
+          aria-labelledby="modal-title"
+        >
+          ${this.hideHeader ? c : s` <div class="header">
+                <div class="header-slot">
+                  <slot name="header">
+                    ${this.heading ? s`<span id="modal-title" class="title"
+                          >${this.heading}</span
+                        >` : c}
+                  </slot>
+                </div>
+                <span class="header-sep"></span>
+                <anduin-button
+                  appearance="plain"
+                  variant="gray9"
+                  size="medium"
+                  label="Close"
+                  start-icon="cross"
+                  @click=${this.onClose}
+                ></anduin-button>
+              </div>`}
           <div class="body">
             <slot></slot>
           </div>
@@ -3343,38 +3362,72 @@ const G = (j = class extends h {
       z-index: var(--z-modal, 1000);
     }
     @keyframes overlayIn {
-      from { opacity: 0; }
-      to   { opacity: 1; }
+      from {
+        opacity: 0;
+      }
+      to {
+        opacity: 1;
+      }
     }
     @keyframes overlayOut {
-      from { opacity: 1; }
-      to   { opacity: 0; }
+      from {
+        opacity: 1;
+      }
+      to {
+        opacity: 0;
+      }
     }
     @keyframes modalIn {
-      from { opacity: 0; transform: translateY(12px); }
-      to   { opacity: 1; transform: translateY(0); }
+      from {
+        opacity: 0;
+        transform: translateY(12px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
     }
     @keyframes modalOut {
-      from { opacity: 1; transform: translateY(0); }
-      to   { opacity: 0; transform: translateY(12px); }
+      from {
+        opacity: 1;
+        transform: translateY(0);
+      }
+      to {
+        opacity: 0;
+        transform: translateY(12px);
+      }
     }
     @keyframes modalFullscreenIn {
-      from { opacity: 0; transform: translateY(24px); }
-      to   { opacity: 1; transform: translateY(0); }
+      from {
+        opacity: 0;
+        transform: translateY(24px);
+      }
+      to {
+        opacity: 1;
+        transform: translateY(0);
+      }
     }
     @keyframes modalFullscreenOut {
-      from { opacity: 1; transform: translateY(0); }
-      to   { opacity: 0; transform: translateY(24px); }
+      from {
+        opacity: 1;
+        transform: translateY(0);
+      }
+      to {
+        opacity: 0;
+        transform: translateY(24px);
+      }
     }
     .overlay {
       position: absolute;
       inset: 0;
       background: rgba(50, 60, 77, 0.6);
       cursor: default;
-      animation: overlayIn ${e2}ms cubic-bezier(0.2, 0, 0, 1) forwards;
+      animation: overlayIn ${e2}ms cubic-bezier(0.2, 0, 0, 1)
+        forwards;
     }
     .overlay.is-leaving {
-      animation: overlayOut ${A5}ms cubic-bezier(0.3, 0, 0.8, 0.15) forwards;
+      animation: overlayOut ${A5}ms
+        cubic-bezier(0.3, 0, 0.8, 0.15) forwards;
     }
     .modal-wrapper {
       position: absolute;
@@ -3395,12 +3448,16 @@ const G = (j = class extends h {
       display: flex;
       flex-direction: column;
       max-height: calc(100vh - 64px);
-      box-shadow: 0 8px 24px 0 rgba(29, 41, 57, 0.12), 0 2px 8px 0 rgba(29, 41, 57, 0.08);
+      box-shadow:
+        0 8px 24px 0 rgba(29, 41, 57, 0.12),
+        0 2px 8px 0 rgba(29, 41, 57, 0.08);
       flex-shrink: 0;
-      animation: modalIn ${e2}ms cubic-bezier(0.05, 0.7, 0.1, 1) forwards;
+      animation: modalIn ${e2}ms cubic-bezier(0.05, 0.7, 0.1, 1)
+        forwards;
     }
     .modal.is-leaving {
-      animation: modalOut ${t2}ms cubic-bezier(0.3, 0, 0.8, 0.15) forwards;
+      animation: modalOut ${t2}ms
+        cubic-bezier(0.3, 0, 0.8, 0.15) forwards;
     }
     .modal-wrapper--fullscreen {
       padding: 0;
@@ -3429,10 +3486,12 @@ const G = (j = class extends h {
       max-height: 100%;
       height: 100%;
       box-shadow: none;
-      animation: modalFullscreenIn ${e2}ms cubic-bezier(0.05, 0.7, 0.1, 1) forwards;
+      animation: modalFullscreenIn ${e2}ms
+        cubic-bezier(0.05, 0.7, 0.1, 1) forwards;
     }
     .modal--fullscreen.is-leaving {
-      animation: modalFullscreenOut ${t2}ms cubic-bezier(0.3, 0, 0.8, 0.15) forwards;
+      animation: modalFullscreenOut ${t2}ms
+        cubic-bezier(0.3, 0, 0.8, 0.15) forwards;
     }
     .header {
       flex-shrink: 0;
@@ -3440,15 +3499,19 @@ const G = (j = class extends h {
       align-items: flex-start;
       padding: 20px 28px;
     }
-    .header-slot { flex: 1; min-width: 0; }
-    .header-sep { display: none; }
+    .header-slot {
+      flex: 1;
+      min-width: 0;
+    }
+    .header-sep {
+      display: none;
+    }
     .title {
       flex: 1;
       font-size: 20px;
-      font-weight: 590;
+      font-weight: 600;
       line-height: 32px;
-      color: #323c4d;
-      letter-spacing: -0.46px;
+      color: var(--color-gray-8, #323c4d);
       font-family: var(--font-sans);
       margin: 0;
     }
@@ -3473,7 +3536,13 @@ const G = (j = class extends h {
       padding: 16px 24px;
       border-top: 1px solid var(--color-gray-3, #e4e7ec);
     }
-  `, j._PRESETS = /* @__PURE__ */ new Set(["480", "600", "720", "960", "1160"]), j);
+  `, j._PRESETS = /* @__PURE__ */ new Set([
+  "480",
+  "600",
+  "720",
+  "960",
+  "1160"
+]), j);
 r1([
   C({ type: Boolean, reflect: !0 })
 ], G.prototype, "open");
@@ -3500,7 +3569,9 @@ customElements.get("anduin-modal") || customElements.define("anduin-modal", v3);
 class g3 extends HTMLElement {
   constructor() {
     super(...arguments), this._onClick = () => {
-      this.dispatchEvent(new CustomEvent(f1, { bubbles: !0, composed: !0 }));
+      this.dispatchEvent(
+        new CustomEvent(f1, { bubbles: !0, composed: !0 })
+      );
     };
   }
   connectedCallback() {
@@ -4208,7 +4279,7 @@ const z5 = {
           aria-label="Dismiss"
           @click=${this._onClose}
         >
-          <anduin-icon name="cross" size="14"></anduin-icon>
+          <anduin-icon name="crossSmall" size="16"></anduin-icon>
         </button>
       </div>
     `;
@@ -4235,9 +4306,9 @@ c5.styles = g`
     .toast {
       display: flex;
       align-items: flex-start;
-      gap: 10px;
-      padding: 12px;
-      border-radius: 8px;
+      gap: 8px;
+      padding: 4px;
+      border-radius: 12px;
       box-shadow: var(
         --shadow-4,
         0px 4px 8px rgba(29, 41, 57, 0.08),
@@ -4259,10 +4330,9 @@ c5.styles = g`
       transform: translateX(-12px) scale(0.97);
     }
 
-    /* Dark gray9 background for all variants */
+    /* Light surface for all variants */
     .toast {
-      background: var(--color-gray-9, #101828);
-      border: 1px solid var(--color-gray-8, #1d2939);
+      background: var(--color-gray-0, #ffffff);
     }
 
     .toast__icon {
@@ -4270,22 +4340,29 @@ c5.styles = g`
       display: flex;
       align-items: center;
       justify-content: center;
-      margin-top: 2px;
+      align-self: stretch;
+      padding: 12px;
+      border-radius: 8px;
     }
     .toast__icon--gray {
-      color: var(--color-gray-4, #98a2b3);
+      color: var(--color-gray-6, #475467);
+      background: var(--color-gray-2, #eaecf0);
     }
     .toast__icon--primary {
-      color: var(--color-primary-3, #8098f9);
+      color: var(--color-primary-4, #444ce7);
+      background: var(--color-primary-1, #eef4ff);
     }
     .toast__icon--success {
-      color: var(--color-success-3, #47cd89);
+      color: var(--color-success-4, #17b26a);
+      background: var(--color-success-1, #dcfae6);
     }
     .toast__icon--warning {
-      color: var(--color-warning-3, #fdb022);
+      color: var(--color-warning-4, #dc6803);
+      background: var(--color-warning-1, #fef0c7);
     }
     .toast__icon--danger {
-      color: var(--color-danger-3, #f97066);
+      color: var(--color-danger-4, #d92d20);
+      background: var(--color-danger-1, #fee4e2);
     }
 
     .toast__body {
@@ -4293,20 +4370,23 @@ c5.styles = g`
       min-width: 0;
       display: flex;
       flex-direction: column;
-      gap: 2px;
+      padding-top: 2px;
+      padding-bottom: 2px;
+      align-self: stretch;
+      justify-content: center;
     }
 
     .toast__title {
       font-size: var(--text-13, 13px);
       font-weight: 500;
-      color: var(--color-gray-0, #ffffff);
+      color: var(--color-gray-9, #101828);
       line-height: 20px;
     }
 
     .toast__description {
-      font-size: var(--text-13, 13px);
+      font-size: var(--text-12, 12px);
       font-weight: 400;
-      color: var(--color-gray-4, #98a2b3);
+      color: var(--color-gray-7, #344054);
       line-height: 20px;
     }
 
@@ -4320,17 +4400,17 @@ c5.styles = g`
       background: none;
       border: none;
       cursor: pointer;
-      border-radius: 4px;
+      border-radius: 8px;
       padding: 0;
-      color: var(--color-gray-5, #667085);
-      margin-top: -2px;
+      color: var(--color-gray-6, #475467);
     }
+
     .toast__close:hover {
-      background: var(--color-gray-8, #1d2939);
-      color: var(--color-gray-2, #eaecf0);
+      background: var(--color-gray-2, #eaecf0);
+      color: var(--color-gray-9, #101828);
     }
     .toast__close:active {
-      background: var(--color-gray-7, #344054);
+      background: var(--color-gray-3, #d0d5dd);
     }
   `;
 let q = c5;
@@ -4957,7 +5037,10 @@ const V2 = "anduin-close", F3 = "anduin-after-close", P3 = 300, F5 = 250, O3 = /
     }, this._onResizeMove = (e) => {
       var r;
       if (!this._resizing) return;
-      const t = this._startX - e.clientX, i = Math.max(200, Math.min(window.innerWidth * 0.9, this._startWidth + t));
+      const t = this._startX - e.clientX, i = Math.max(
+        200,
+        Math.min(window.innerWidth * 0.9, this._startWidth + t)
+      );
       this._width = Math.round(i);
       const o = (r = this.shadowRoot) == null ? void 0 : r.querySelector(".drawer");
       o && (o.style.width = `${this._width}px`);
@@ -4970,11 +5053,18 @@ const V2 = "anduin-close", F3 = "anduin-after-close", P3 = 300, F5 = 250, O3 = /
   }
   updated(e) {
     e.has("open") && (this.open ? (this._leaving = !1, this.classList.add("is-shown")) : this.classList.contains("is-shown") && (this._leaving = !0, setTimeout(() => {
-      this._leaving = !1, this.classList.remove("is-shown"), this.dispatchEvent(new CustomEvent(F3, { bubbles: !0, composed: !0 }));
+      this._leaving = !1, this.classList.remove("is-shown"), this.dispatchEvent(
+        new CustomEvent(F3, {
+          bubbles: !0,
+          composed: !0
+        })
+      );
     }, F5)));
   }
   _dispatch(e) {
-    this.dispatchEvent(new CustomEvent(e, { bubbles: !0, composed: !0 }));
+    this.dispatchEvent(
+      new CustomEvent(e, { bubbles: !0, composed: !0 })
+    );
   }
   _onClose() {
     this._dispatch(V2);
@@ -5000,20 +5090,21 @@ const V2 = "anduin-close", F3 = "anduin-after-close", P3 = 300, F5 = 250, O3 = /
           @pointerup=${this._onResizeEnd}
           @pointercancel=${this._onResizeEnd}
         ></div>
-        ${this.hideHeader ? c : s`
-        <div class="header">
-          <slot name="header">
-            ${this.heading ? s`<span id="drawer-title" class="title">${this.heading}</span>` : c}
-          </slot>
-          <anduin-button
-            appearance="plain"
-            variant="gray9"
-            size="medium"
-            label="Close"
-            start-icon="cross"
-            @click=${this._onClose}
-          ></anduin-button>
-        </div>`}
+        ${this.hideHeader ? c : s` <div class="header">
+              <slot name="header">
+                ${this.heading ? s`<span id="drawer-title" class="title"
+                      >${this.heading}</span
+                    >` : c}
+              </slot>
+              <anduin-button
+                appearance="plain"
+                variant="gray9"
+                size="medium"
+                label="Close"
+                start-icon="cross"
+                @click=${this._onClose}
+              ></anduin-button>
+            </div>`}
         <div class="body">
           <slot></slot>
         </div>
@@ -5036,12 +5127,20 @@ v5.styles = g`
       pointer-events: none;
     }
     @keyframes drawerIn {
-      from { transform: translateX(100%); }
-      to   { transform: translateX(0); }
+      from {
+        transform: translateX(100%);
+      }
+      to {
+        transform: translateX(0);
+      }
     }
     @keyframes drawerOut {
-      from { transform: translateX(0); }
-      to   { transform: translateX(100%); }
+      from {
+        transform: translateX(0);
+      }
+      to {
+        transform: translateX(100%);
+      }
     }
     /* Transparent backdrop — only rendered when dismiss-on-outside-click is set */
     .backdrop {
@@ -5058,14 +5157,18 @@ v5.styles = g`
       display: flex;
       flex-direction: column;
       background: #fff;
-      box-shadow: -8px 0 24px 0 rgba(29, 41, 57, 0.12), -2px 0 8px 0 rgba(29, 41, 57, 0.08);
-      animation: drawerIn ${P3}ms cubic-bezier(0.05, 0.7, 0.1, 1) forwards;
+      box-shadow:
+        -8px 0 24px 0 rgba(29, 41, 57, 0.12),
+        -2px 0 8px 0 rgba(29, 41, 57, 0.08);
+      animation: drawerIn ${P3}ms cubic-bezier(0.05, 0.7, 0.1, 1)
+        forwards;
       min-width: 200px;
       max-width: 90vw;
       pointer-events: auto;
     }
     .drawer.is-leaving {
-      animation: drawerOut ${F5}ms cubic-bezier(0.3, 0, 0.8, 0.15) forwards;
+      animation: drawerOut ${F5}ms
+        cubic-bezier(0.3, 0, 0.8, 0.15) forwards;
     }
     @media (max-width: 640px) {
       .drawer {
@@ -5077,7 +5180,9 @@ v5.styles = g`
         max-width: 100%;
         min-width: unset;
       }
-      .resize-handle { display: none; }
+      .resize-handle {
+        display: none;
+      }
     }
     .resize-handle {
       position: absolute;
@@ -5103,10 +5208,9 @@ v5.styles = g`
     .title {
       flex: 1;
       font-size: 16px;
-      font-weight: 590;
+      font-weight: 600;
       line-height: 24px;
-      color: #323c4d;
-      letter-spacing: -0.2px;
+      color: var(--color-gray-8, #323c4d);
       font-family: var(--font-sans);
       margin: 0;
     }
@@ -5114,7 +5218,8 @@ v5.styles = g`
       flex: 1;
       overflow-y: auto;
       min-height: 0;
-      padding: 16px;
+
+      color: var(--color-gray-8, #323c4d);
     }
     .footer {
       flex-shrink: 0;
@@ -5155,7 +5260,9 @@ customElements.get("anduin-drawer") || customElements.define("anduin-drawer", E)
 class D3 extends HTMLElement {
   constructor() {
     super(...arguments), this._onClick = () => {
-      this.dispatchEvent(new CustomEvent(V2, { bubbles: !0, composed: !0 }));
+      this.dispatchEvent(
+        new CustomEvent(V2, { bubbles: !0, composed: !0 })
+      );
     };
   }
   connectedCallback() {