@alishenriques/design-system 0.4.0 → 0.4.2

package/dist/design-system.css

@@ -1 +1 @@
-:root{--ds-color-bg: #0b0b0f;--ds-color-bg-raised: #131318;--ds-color-fg: #f4f1ea;--ds-color-muted: #9a958c;--ds-color-accent: #c8ff00;--ds-color-accent-ink: #111111;--ds-color-accent-soft: rgba(200, 255, 0, .1);--ds-color-border: rgba(244, 241, 234, .1);--ds-color-border-strong: rgba(244, 241, 234, .16);--ds-radius-sm: 8px;--ds-radius-md: 16px;--ds-space-1: .25rem;--ds-space-2: .5rem;--ds-space-3: .75rem;--ds-space-4: 1rem;--ds-space-5: 1.5rem;--ds-space-6: 2rem;--ds-space-8: 3rem;--ds-font-sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;--ds-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;--ds-font-display: "Archivo", system-ui, -apple-system, sans-serif;--ds-motion-fast: .18s cubic-bezier(.22, 1, .36, 1)}.ds-dot-grid{background-image:radial-gradient(circle at 1px 1px,var(--ds-color-border-strong) 1px,transparent 0);background-size:22px 22px}._trigger_e3bgf_1{display:inline-flex;padding:0;border:2px solid var(--ds-color-accent);border-radius:50%;overflow:hidden;cursor:pointer;background:var(--ds-color-bg-raised);transition:transform var(--ds-motion-fast),box-shadow var(--ds-motion-fast)}._trigger_e3bgf_1:hover,._trigger_e3bgf_1:focus-visible{transform:scale(1.03);outline:none;box-shadow:0 0 0 4px var(--ds-color-accent-soft)}._image_e3bgf_19{width:100%;height:100%;object-fit:cover;display:block}._backdrop_e3bgf_26{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:24px;background:#0b0b0fb8;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);opacity:0;transition:opacity .22s ease-out}._backdropVisible_e3bgf_48{opacity:1}._frame_e3bgf_55{position:relative;opacity:0;transition:opacity .26s ease-out}._frameVisible_e3bgf_61{opacity:1}._circle_e3bgf_53{position:absolute;inset:0;border-radius:50%;overflow:hidden;border:3px solid var(--ds-color-accent);box-shadow:0 20px 60px #00000080;transform:scale(.85);transition:transform .26s cubic-bezier(.22,1,.36,1)}._frameVisible_e3bgf_61 ._circle_e3bgf_53{transform:scale(1)}._expandedImage_e3bgf_80{width:100%;height:100%;object-fit:cover;display:block}._closeButton_e3bgf_87{position:absolute;top:-10px;right:-10px;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--ds-color-border-strong);background:var(--ds-color-bg-raised);color:var(--ds-color-fg);font-size:20px;line-height:1;cursor:pointer;transition:border-color var(--ds-motion-fast),color var(--ds-motion-fast)}._closeButton_e3bgf_87:hover,._closeButton_e3bgf_87:focus-visible{border-color:var(--ds-color-accent);color:var(--ds-color-accent);outline:none}@media(prefers-reduced-motion:reduce){._backdrop_e3bgf_26,._frame_e3bgf_55,._circle_e3bgf_53{transition:none}}._button_1jhtl_1{display:inline-flex;align-items:center;justify-content:center;gap:var(--ds-space-2);border:0;border-radius:var(--ds-radius-sm);padding:var(--ds-space-3) var(--ds-space-4);font-family:var(--ds-font-sans);font-weight:600;letter-spacing:.01em;cursor:pointer;transition:transform var(--ds-motion-fast),background-color var(--ds-motion-fast),box-shadow var(--ds-motion-fast)}._button_1jhtl_1:hover{transform:translateY(-1px)}._button_1jhtl_1:active{transform:translateY(0)}._button_1jhtl_1:disabled{cursor:not-allowed;opacity:.5;transform:none}._primary_1jhtl_33{background:var(--ds-color-accent);color:var(--ds-color-accent-ink);box-shadow:0 0 0 0 transparent}._primary_1jhtl_33:hover:not(:disabled){box-shadow:0 8px 24px color-mix(in srgb,var(--ds-color-accent) 35%,transparent)}._ghost_1jhtl_43{background:transparent;color:var(--ds-color-fg);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ds-color-fg) 22%,transparent)}._trigger_10bud_1{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--ds-color-border-strong);background:var(--ds-color-bg-raised);color:var(--ds-color-muted);padding:7px 12px;border-radius:8px;cursor:pointer;font-family:var(--ds-font-mono);font-size:12px;white-space:nowrap;transition:color var(--ds-motion-fast),border-color var(--ds-motion-fast)}._trigger_10bud_1:hover,._trigger_10bud_1:focus-visible{color:var(--ds-color-fg);border-color:var(--ds-color-accent)}._kbd_10bud_23{background:var(--ds-color-bg);border:1px solid var(--ds-color-border-strong);border-radius:4px;padding:1px 5px;font-family:var(--ds-font-mono)}._backdrop_10bud_31{position:fixed;inset:0;background:#0b0b0fb3;display:flex;align-items:flex-start;justify-content:center;padding:14vh 16px 16px;z-index:100}._dialog_10bud_42{width:100%;max-width:520px;background:var(--ds-color-bg-raised);border:1px solid var(--ds-color-border-strong);border-radius:12px;overflow:hidden;font-family:var(--ds-font-mono);box-shadow:0 20px 60px #00000080}._input_10bud_53{width:100%;background:transparent;border:0;border-bottom:1px solid var(--ds-color-border);color:var(--ds-color-fg);padding:16px 18px;font-family:var(--ds-font-mono);font-size:14px;outline:none}._input_10bud_53::placeholder{color:var(--ds-color-muted)}._list_10bud_69{list-style:none;margin:0;padding:8px;max-height:280px;overflow:auto}._list_10bud_69 a{display:flex;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:8px;text-decoration:none;color:var(--ds-color-fg);font-size:13px}._list_10bud_69 a:hover,._list_10bud_69 a:focus-visible{background:var(--ds-color-accent-soft);color:var(--ds-color-accent)}._list_10bud_69 small{color:var(--ds-color-muted);font-size:11px}._eyebrow_1a4gy_1{margin:0;font-family:var(--ds-font-mono);font-weight:500;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ds-color-muted)}._loadingLabel_1yug9_1{display:flex;align-items:center;justify-content:center;gap:4px;font-family:var(--ds-font-mono);text-transform:lowercase}._cursor_1yug9_10{display:inline-block;width:7px;height:14px;background:var(--ds-color-accent);animation:_blink_1yug9_1 1s step-end infinite}@media(prefers-reduced-motion:reduce){._cursor_1yug9_10{animation:none}}@keyframes _blink_1yug9_1{50%{opacity:0}}._panel_m16j3_1{position:relative;border:1px solid var(--ds-color-border);border-radius:var(--ds-radius-md);background:var(--ds-color-bg-raised);padding:clamp(28px,5vw,64px)}._list_27va3_1{display:flex;flex-wrap:wrap;gap:var(--ds-space-2);margin:0;padding:0;list-style:none;font-family:var(--ds-font-mono);font-size:12px}._step_27va3_12{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--ds-color-border-strong);border-radius:6px;padding:6px 10px;color:var(--ds-color-muted)}._step_27va3_12 b{color:var(--ds-color-accent);font-weight:600}._grid_94gwu_1{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin:0;background:var(--ds-color-border);border:1px solid var(--ds-color-border);border-radius:10px;overflow:hidden}._cell_94gwu_12{background:var(--ds-color-bg-raised);padding:var(--ds-space-4);display:flex;flex-direction:column-reverse}._value_94gwu_19{margin:0;font-family:var(--ds-font-mono);font-weight:700;font-size:22px;color:var(--ds-color-fg);font-variant-numeric:tabular-nums}._label_94gwu_28{font-family:var(--ds-font-mono);font-size:11px;color:var(--ds-color-muted);text-transform:uppercase;letter-spacing:.04em}._list_17qxg_1{display:flex;flex-wrap:wrap;gap:var(--ds-space-2);margin:0;padding:0;list-style:none}._tag_17qxg_10{font-family:var(--ds-font-mono);font-size:12px;color:var(--ds-color-fg);border:1px solid var(--ds-color-border-strong);border-radius:999px;padding:6px 12px}._prompt_vxkw7_1{margin:0;display:flex;align-items:center;gap:2px;font-family:var(--ds-font-mono);font-size:13px;color:var(--ds-color-accent)}._path_vxkw7_11{color:var(--ds-color-muted)}._cursor_vxkw7_15{display:inline-block;width:7px;height:15px;margin-left:2px;background:var(--ds-color-accent);animation:_blink_vxkw7_1 1.1s step-end infinite}@media(prefers-reduced-motion:reduce){._cursor_vxkw7_15{animation:none;opacity:.7}}@keyframes _blink_vxkw7_1{50%{opacity:0}}
+:root{--ds-color-bg: #0b0b0f;--ds-color-bg-raised: #131318;--ds-color-fg: #f4f1ea;--ds-color-muted: #9a958c;--ds-color-accent: #c8ff00;--ds-color-accent-ink: #111111;--ds-color-accent-soft: rgba(200, 255, 0, .1);--ds-color-border: rgba(244, 241, 234, .1);--ds-color-border-strong: rgba(244, 241, 234, .16);--ds-radius-sm: 8px;--ds-radius-md: 16px;--ds-space-1: .25rem;--ds-space-2: .5rem;--ds-space-3: .75rem;--ds-space-4: 1rem;--ds-space-5: 1.5rem;--ds-space-6: 2rem;--ds-space-8: 3rem;--ds-font-sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;--ds-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;--ds-font-display: "Archivo", system-ui, -apple-system, sans-serif;--ds-motion-fast: .18s cubic-bezier(.22, 1, .36, 1)}.ds-dot-grid{background-image:radial-gradient(circle at 1px 1px,var(--ds-color-border-strong) 1px,transparent 0);background-size:22px 22px}._trigger_e3bgf_1{display:inline-flex;padding:0;border:2px solid var(--ds-color-accent);border-radius:50%;overflow:hidden;cursor:pointer;background:var(--ds-color-bg-raised);transition:transform var(--ds-motion-fast),box-shadow var(--ds-motion-fast)}._trigger_e3bgf_1:hover,._trigger_e3bgf_1:focus-visible{transform:scale(1.03);outline:none;box-shadow:0 0 0 4px var(--ds-color-accent-soft)}._image_e3bgf_19{width:100%;height:100%;object-fit:cover;display:block}._backdrop_e3bgf_26{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:24px;background:#0b0b0fb8;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);opacity:0;transition:opacity .22s ease-out}._backdropVisible_e3bgf_48{opacity:1}._frame_e3bgf_55{position:relative;opacity:0;transition:opacity .26s ease-out}._frameVisible_e3bgf_61{opacity:1}._circle_e3bgf_53{position:absolute;inset:0;border-radius:50%;overflow:hidden;border:3px solid var(--ds-color-accent);box-shadow:0 20px 60px #00000080;transform:scale(.85);transition:transform .26s cubic-bezier(.22,1,.36,1)}._frameVisible_e3bgf_61 ._circle_e3bgf_53{transform:scale(1)}._expandedImage_e3bgf_80{width:100%;height:100%;object-fit:cover;display:block}._closeButton_e3bgf_87{position:absolute;top:-10px;right:-10px;display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;border:1px solid var(--ds-color-border-strong);background:var(--ds-color-bg-raised);color:var(--ds-color-fg);font-size:20px;line-height:1;cursor:pointer;transition:border-color var(--ds-motion-fast),color var(--ds-motion-fast)}._closeButton_e3bgf_87:hover,._closeButton_e3bgf_87:focus-visible{border-color:var(--ds-color-accent);color:var(--ds-color-accent);outline:none}@media(prefers-reduced-motion:reduce){._backdrop_e3bgf_26,._frame_e3bgf_55,._circle_e3bgf_53{transition:none}}._button_1jhtl_1{display:inline-flex;align-items:center;justify-content:center;gap:var(--ds-space-2);border:0;border-radius:var(--ds-radius-sm);padding:var(--ds-space-3) var(--ds-space-4);font-family:var(--ds-font-sans);font-weight:600;letter-spacing:.01em;cursor:pointer;transition:transform var(--ds-motion-fast),background-color var(--ds-motion-fast),box-shadow var(--ds-motion-fast)}._button_1jhtl_1:hover{transform:translateY(-1px)}._button_1jhtl_1:active{transform:translateY(0)}._button_1jhtl_1:disabled{cursor:not-allowed;opacity:.5;transform:none}._primary_1jhtl_33{background:var(--ds-color-accent);color:var(--ds-color-accent-ink);box-shadow:0 0 0 0 transparent}._primary_1jhtl_33:hover:not(:disabled){box-shadow:0 8px 24px color-mix(in srgb,var(--ds-color-accent) 35%,transparent)}._ghost_1jhtl_43{background:transparent;color:var(--ds-color-fg);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ds-color-fg) 22%,transparent)}._trigger_10bud_1{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--ds-color-border-strong);background:var(--ds-color-bg-raised);color:var(--ds-color-muted);padding:7px 12px;border-radius:8px;cursor:pointer;font-family:var(--ds-font-mono);font-size:12px;white-space:nowrap;transition:color var(--ds-motion-fast),border-color var(--ds-motion-fast)}._trigger_10bud_1:hover,._trigger_10bud_1:focus-visible{color:var(--ds-color-fg);border-color:var(--ds-color-accent)}._kbd_10bud_23{background:var(--ds-color-bg);border:1px solid var(--ds-color-border-strong);border-radius:4px;padding:1px 5px;font-family:var(--ds-font-mono)}._backdrop_10bud_31{position:fixed;inset:0;background:#0b0b0fb3;display:flex;align-items:flex-start;justify-content:center;padding:14vh 16px 16px;z-index:100}._dialog_10bud_42{width:100%;max-width:520px;background:var(--ds-color-bg-raised);border:1px solid var(--ds-color-border-strong);border-radius:12px;overflow:hidden;font-family:var(--ds-font-mono);box-shadow:0 20px 60px #00000080}._input_10bud_53{width:100%;background:transparent;border:0;border-bottom:1px solid var(--ds-color-border);color:var(--ds-color-fg);padding:16px 18px;font-family:var(--ds-font-mono);font-size:14px;outline:none}._input_10bud_53::placeholder{color:var(--ds-color-muted)}._list_10bud_69{list-style:none;margin:0;padding:8px;max-height:280px;overflow:auto}._list_10bud_69 a{display:flex;justify-content:space-between;gap:10px;padding:10px 12px;border-radius:8px;text-decoration:none;color:var(--ds-color-fg);font-size:13px}._list_10bud_69 a:hover,._list_10bud_69 a:focus-visible{background:var(--ds-color-accent-soft);color:var(--ds-color-accent)}._list_10bud_69 small{color:var(--ds-color-muted);font-size:11px}._eyebrow_1a4gy_1{margin:0;font-family:var(--ds-font-mono);font-weight:500;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--ds-color-muted)}._loadingLabel_1yug9_1{display:flex;align-items:center;justify-content:center;gap:4px;font-family:var(--ds-font-mono);text-transform:lowercase}._cursor_1yug9_10{display:inline-block;width:7px;height:14px;background:var(--ds-color-accent);animation:_blink_1yug9_1 1s step-end infinite}@media(prefers-reduced-motion:reduce){._cursor_1yug9_10{animation:none}}@keyframes _blink_1yug9_1{50%{opacity:0}}._panel_m16j3_1{position:relative;border:1px solid var(--ds-color-border);border-radius:var(--ds-radius-md);background:var(--ds-color-bg-raised);padding:clamp(28px,5vw,64px)}._list_27va3_1{display:flex;flex-wrap:wrap;gap:var(--ds-space-2);margin:0;padding:0;list-style:none;font-family:var(--ds-font-mono);font-size:12px}._step_27va3_12{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--ds-color-border-strong);border-radius:6px;padding:6px 10px;color:var(--ds-color-muted)}._step_27va3_12 b{color:var(--ds-color-accent);font-weight:600}._quote_1og2n_1{display:flex;align-items:flex-start;gap:var(--ds-space-3);margin:0;border-left:3px solid var(--ds-color-accent);border-radius:0 var(--ds-radius-sm) var(--ds-radius-sm) 0;background:var(--ds-color-accent-soft);padding:var(--ds-space-4) var(--ds-space-5)}._marker_1og2n_12{flex-shrink:0;font-family:var(--ds-font-mono);font-weight:600;color:var(--ds-color-accent)}._text_1og2n_19{margin:0;font-family:var(--ds-font-mono);font-size:15px;line-height:1.6;color:var(--ds-color-fg)}._cursor_1og2n_27{display:inline-block;width:8px;height:15px;margin-left:4px;vertical-align:text-bottom;background:var(--ds-color-accent);animation:_blink_1og2n_1 1s step-end infinite}@media(prefers-reduced-motion:reduce){._cursor_1og2n_27{animation:none}}@keyframes _blink_1og2n_1{50%{opacity:0}}._grid_94gwu_1{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;margin:0;background:var(--ds-color-border);border:1px solid var(--ds-color-border);border-radius:10px;overflow:hidden}._cell_94gwu_12{background:var(--ds-color-bg-raised);padding:var(--ds-space-4);display:flex;flex-direction:column-reverse}._value_94gwu_19{margin:0;font-family:var(--ds-font-mono);font-weight:700;font-size:22px;color:var(--ds-color-fg);font-variant-numeric:tabular-nums}._label_94gwu_28{font-family:var(--ds-font-mono);font-size:11px;color:var(--ds-color-muted);text-transform:uppercase;letter-spacing:.04em}._list_17qxg_1{display:flex;flex-wrap:wrap;gap:var(--ds-space-2);margin:0;padding:0;list-style:none}._tag_17qxg_10{font-family:var(--ds-font-mono);font-size:12px;color:var(--ds-color-fg);border:1px solid var(--ds-color-border-strong);border-radius:999px;padding:6px 12px}._prompt_vxkw7_1{margin:0;display:flex;align-items:center;gap:2px;font-family:var(--ds-font-mono);font-size:13px;color:var(--ds-color-accent)}._path_vxkw7_11{color:var(--ds-color-muted)}._cursor_vxkw7_15{display:inline-block;width:7px;height:15px;margin-left:2px;background:var(--ds-color-accent);animation:_blink_vxkw7_1 1.1s step-end infinite}@media(prefers-reduced-motion:reduce){._cursor_vxkw7_15{animation:none;opacity:.7}}@keyframes _blink_vxkw7_1{50%{opacity:0}}

package/dist/index.d.ts

@@ -12,6 +12,8 @@ export { Panel } from './components/Panel';
 export type { PanelProps } from './components/Panel';
 export { PipelineBadges } from './components/PipelineBadges';
 export type { PipelineBadgesProps, PipelineStep } from './components/PipelineBadges';
+export { Quote } from './components/Quote';
+export type { QuoteProps } from './components/Quote';
 export { StatGrid } from './components/StatGrid';
 export type { Stat, StatGridProps } from './components/StatGrid';
 export { TagList } from './components/TagList';

package/dist/index.js

@@ -1,49 +1,49 @@
 "use client";
-import { jsxs as r, Fragment as E, jsx as e } from "react/jsx-runtime";
-import { useState as k, useEffect as B, useRef as D } from "react";
-const T = "_trigger_e3bgf_1", A = "_image_e3bgf_19", I = "_backdrop_e3bgf_26", S = "_backdropVisible_e3bgf_48", F = "_frame_e3bgf_55", K = "_frameVisible_e3bgf_61", q = "_circle_e3bgf_53", P = "_expandedImage_e3bgf_80", O = "_closeButton_e3bgf_87", d = {
+import { jsxs as r, Fragment as L, jsx as e } from "react/jsx-runtime";
+import { useState as v, useEffect as $, useRef as D } from "react";
+const T = "_trigger_e3bgf_1", A = "_image_e3bgf_19", I = "_backdrop_e3bgf_26", S = "_backdropVisible_e3bgf_48", F = "_frame_e3bgf_55", K = "_frameVisible_e3bgf_61", P = "_circle_e3bgf_53", O = "_expandedImage_e3bgf_80", Q = "_closeButton_e3bgf_87", d = {
   trigger: T,
   image: A,
   backdrop: I,
   backdropVisible: S,
   frame: F,
   frameVisible: K,
-  circle: q,
-  expandedImage: P,
-  closeButton: O
+  circle: P,
+  expandedImage: O,
+  closeButton: Q
 }, R = 96, U = "min(70vw, 60vh, 440px)";
-function he({
+function we({
   src: t,
-  alt: a,
-  size: l = R,
+  alt: o,
+  size: a = R,
   expandedSize: n = U,
   objectPosition: s = "center",
   closeLabel: c = "Close",
   className: m,
   ...i
 }) {
-  const [u, b] = k(!1), [f, h] = k(!1);
-  B(() => {
+  const [u, b] = v(!1), [f, h] = v(!1);
+  $(() => {
     if (!u) return;
-    function p(V) {
+    function g(V) {
       V.key === "Escape" && b(!1);
     }
-    document.addEventListener("keydown", p);
-    const N = document.body.style.overflow;
+    document.addEventListener("keydown", g);
+    const w = document.body.style.overflow;
     document.body.style.overflow = "hidden";
-    const L = requestAnimationFrame(() => h(!0));
+    const q = requestAnimationFrame(() => h(!0));
     return () => {
-      document.removeEventListener("keydown", p), document.body.style.overflow = N, cancelAnimationFrame(L), h(!1);
+      document.removeEventListener("keydown", g), document.body.style.overflow = w, cancelAnimationFrame(q), h(!1);
     };
   }, [u]);
-  const v = [d.trigger, m].filter(Boolean).join(" "), o = [d.frame, f && d.frameVisible].filter(Boolean).join(" "), _ = [d.backdrop, f && d.backdropVisible].filter(Boolean).join(" ");
-  return /* @__PURE__ */ r(E, { children: [
+  const N = [d.trigger, m].filter(Boolean).join(" "), l = [d.frame, f && d.frameVisible].filter(Boolean).join(" "), _ = [d.backdrop, f && d.backdropVisible].filter(Boolean).join(" ");
+  return /* @__PURE__ */ r(L, { children: [
     /* @__PURE__ */ e(
       "button",
       {
         type: "button",
-        className: v,
-        style: { width: l, height: l },
+        className: N,
+        style: { width: a, height: a },
         onClick: () => b(!0),
         "aria-haspopup": "dialog",
         ...i,
@@ -51,7 +51,7 @@ function he({
           "img",
           {
             src: t,
-            alt: a,
+            alt: o,
             className: d.image,
             style: { objectPosition: s },
             loading: "lazy"
@@ -59,20 +59,20 @@ function he({
         )
       }
     ),
-    u && /* @__PURE__ */ e("div", { className: _, onClick: (p) => p.target === p.currentTarget && b(!1), children: /* @__PURE__ */ r(
+    u && /* @__PURE__ */ e("div", { className: _, onClick: (g) => g.target === g.currentTarget && b(!1), children: /* @__PURE__ */ r(
       "div",
       {
-        className: o,
+        className: l,
         style: { width: n, height: n },
         role: "dialog",
         "aria-modal": "true",
-        "aria-label": a,
+        "aria-label": o,
         children: [
           /* @__PURE__ */ e("div", { className: d.circle, children: /* @__PURE__ */ e(
             "img",
             {
               src: t,
-              alt: a,
+              alt: o,
               className: d.expandedImage,
               style: { objectPosition: s }
             }
@@ -92,95 +92,95 @@ function he({
     ) })
   ] });
 }
-const Z = "_button_1jhtl_1", G = "_primary_1jhtl_33", Q = "_ghost_1jhtl_43", C = {
+const Z = "_button_1jhtl_1", G = "_primary_1jhtl_33", X = "_ghost_1jhtl_43", C = {
   button: Z,
   primary: G,
-  ghost: Q
+  ghost: X
 };
-function ye({
+function Be({
   children: t,
-  variant: a = "primary",
-  type: l = "button",
+  variant: o = "primary",
+  type: a = "button",
   className: n,
   ...s
 }) {
-  const c = [C.button, C[a], n].filter(Boolean).join(" ");
-  return /* @__PURE__ */ e("button", { type: l, className: c, "data-variant": a, ...s, children: t });
+  const c = [C.button, C[o], n].filter(Boolean).join(" ");
+  return /* @__PURE__ */ e("button", { type: a, className: c, "data-variant": o, ...s, children: t });
 }
-const X = "_trigger_10bud_1", H = "_kbd_10bud_23", J = "_backdrop_10bud_31", M = "_dialog_10bud_42", W = "_input_10bud_53", Y = "_list_10bud_69", g = {
-  trigger: X,
-  kbd: H,
-  backdrop: J,
-  dialog: M,
-  input: W,
-  list: Y
+const H = "_trigger_10bud_1", J = "_kbd_10bud_23", M = "_backdrop_10bud_31", W = "_dialog_10bud_42", Y = "_input_10bud_53", z = "_list_10bud_69", p = {
+  trigger: H,
+  kbd: J,
+  backdrop: M,
+  dialog: W,
+  input: Y,
+  list: z
 };
-function ke({
+function $e({
   items: t,
-  triggerLabel: a = "Search",
-  placeholder: l = "Type a command or search…",
+  triggerLabel: o = "Search",
+  placeholder: a = "Type a command or search…",
   label: n = "Command palette",
   className: s,
   ...c
 }) {
-  const [m, i] = k(!1), [u, b] = k(""), f = D(null);
-  B(() => {
+  const [m, i] = v(!1), [u, b] = v(""), f = D(null);
+  $(() => {
     m && f.current?.focus();
-  }, [m]), B(() => {
-    function o(_) {
+  }, [m]), $(() => {
+    function l(_) {
       if ((_.metaKey || _.ctrlKey) && _.key.toLowerCase() === "k") {
-        _.preventDefault(), i((N) => !N);
+        _.preventDefault(), i((w) => !w);
         return;
       }
       _.key === "Escape" && i(!1);
     }
-    return document.addEventListener("keydown", o), () => document.removeEventListener("keydown", o);
+    return document.addEventListener("keydown", l), () => document.removeEventListener("keydown", l);
   }, []);
-  const h = t.filter((o) => `${o.label} ${o.hint ?? ""}`.toLowerCase().includes(u.trim().toLowerCase())), v = [g.trigger, s].filter(Boolean).join(" ");
-  return /* @__PURE__ */ r(E, { children: [
-    /* @__PURE__ */ r("button", { type: "button", className: v, onClick: () => i(!0), ...c, children: [
-      /* @__PURE__ */ e("span", { children: a }),
-      /* @__PURE__ */ e("kbd", { className: g.kbd, children: "⌘K" })
+  const h = t.filter((l) => `${l.label} ${l.hint ?? ""}`.toLowerCase().includes(u.trim().toLowerCase())), N = [p.trigger, s].filter(Boolean).join(" ");
+  return /* @__PURE__ */ r(L, { children: [
+    /* @__PURE__ */ r("button", { type: "button", className: N, onClick: () => i(!0), ...c, children: [
+      /* @__PURE__ */ e("span", { children: o }),
+      /* @__PURE__ */ e("kbd", { className: p.kbd, children: "⌘K" })
     ] }),
-    m && /* @__PURE__ */ e("div", { className: g.backdrop, onClick: (o) => o.target === o.currentTarget && i(!1), children: /* @__PURE__ */ r("div", { className: g.dialog, role: "dialog", "aria-modal": "true", "aria-label": n, children: [
+    m && /* @__PURE__ */ e("div", { className: p.backdrop, onClick: (l) => l.target === l.currentTarget && i(!1), children: /* @__PURE__ */ r("div", { className: p.dialog, role: "dialog", "aria-modal": "true", "aria-label": n, children: [
       /* @__PURE__ */ e(
         "input",
         {
           ref: f,
           type: "text",
-          className: g.input,
-          placeholder: l,
+          className: p.input,
+          placeholder: a,
           value: u,
-          onChange: (o) => b(o.target.value),
+          onChange: (l) => b(l.target.value),
           autoComplete: "off"
         }
       ),
-      /* @__PURE__ */ e("ul", { className: g.list, children: h.map((o) => (
+      /* @__PURE__ */ e("ul", { className: p.list, children: h.map((l) => (
         // Keyed by href, not label: two items can share a label (e.g.
         // a nav link and a more specific shortcut to the same topic).
-        /* @__PURE__ */ e("li", { children: /* @__PURE__ */ r("a", { href: o.href, onClick: () => i(!1), children: [
-          /* @__PURE__ */ e("span", { children: o.label }),
-          o.hint && /* @__PURE__ */ e("small", { children: o.hint })
-        ] }) }, o.href)
+        /* @__PURE__ */ e("li", { children: /* @__PURE__ */ r("a", { href: l.href, onClick: () => i(!1), children: [
+          /* @__PURE__ */ e("span", { children: l.label }),
+          l.hint && /* @__PURE__ */ e("small", { children: l.hint })
+        ] }) }, l.href)
       )) })
     ] }) })
   ] });
 }
-const z = "_eyebrow_1a4gy_1", ee = {
-  eyebrow: z
+const ee = "_eyebrow_1a4gy_1", te = {
+  eyebrow: ee
 };
-function ve({ children: t, className: a, ...l }) {
-  const n = [ee.eyebrow, a].filter(Boolean).join(" ");
-  return /* @__PURE__ */ e("p", { className: n, ...l, children: t });
+function Ce({ children: t, className: o, ...a }) {
+  const n = [te.eyebrow, o].filter(Boolean).join(" ");
+  return /* @__PURE__ */ e("p", { className: n, ...a, children: t });
 }
-const te = "_loadingLabel_1yug9_1", se = "_cursor_1yug9_10", $ = {
-  loadingLabel: te,
-  cursor: se
+const se = "_loadingLabel_1yug9_1", oe = "_cursor_1yug9_10", j = {
+  loadingLabel: se,
+  cursor: oe
 };
-function Ne({
+function je({
   isLoading: t,
-  loadingText: a,
-  children: l,
+  loadingText: o,
+  children: a,
   className: n,
   style: s,
   disabled: c,
@@ -202,81 +202,98 @@ function Ne({
       disabled: !!c || t,
       "aria-busy": t || void 0,
       ...i,
-      children: t ? /* @__PURE__ */ r("span", { className: $.loadingLabel, children: [
+      children: t ? /* @__PURE__ */ r("span", { className: j.loadingLabel, children: [
         /* @__PURE__ */ e("span", { "aria-hidden": "true", children: "$" }),
-        a,
-        /* @__PURE__ */ e("span", { "aria-hidden": "true", className: $.cursor })
-      ] }) : l
+        o,
+        /* @__PURE__ */ e("span", { "aria-hidden": "true", className: j.cursor })
+      ] }) : a
     }
   );
 }
-const ae = "_panel_m16j3_1", le = {
+const ae = "_panel_m16j3_1", ne = {
   panel: ae
 };
-function we({ children: t, dots: a = !1, className: l, ...n }) {
-  const s = [le.panel, a && "ds-dot-grid", l].filter(Boolean).join(" ");
+function xe({ children: t, dots: o = !1, className: a, ...n }) {
+  const s = [ne.panel, o && "ds-dot-grid", a].filter(Boolean).join(" ");
   return /* @__PURE__ */ e("div", { className: s, ...n, children: t });
 }
-const ne = "_list_27va3_1", oe = "_step_27va3_12", j = {
-  list: ne,
-  step: oe
+const le = "_list_27va3_1", re = "_step_27va3_12", x = {
+  list: le,
+  step: re
 };
-function Be({ steps: t, className: a, ...l }) {
-  const n = [j.list, a].filter(Boolean).join(" ");
-  return /* @__PURE__ */ e("ul", { className: n, ...l, children: t.map((s) => /* @__PURE__ */ r("li", { className: j.step, children: [
+function Ee({ steps: t, className: o, ...a }) {
+  const n = [x.list, o].filter(Boolean).join(" ");
+  return /* @__PURE__ */ e("ul", { className: n, ...a, children: t.map((s) => /* @__PURE__ */ r("li", { className: x.step, children: [
     s.label,
     " ",
     /* @__PURE__ */ e("b", { children: s.value })
   ] }, s.label)) });
 }
-const re = "_grid_94gwu_1", ce = "_cell_94gwu_12", ie = "_value_94gwu_19", de = "_label_94gwu_28", y = {
-  grid: re,
-  cell: ce,
-  value: ie,
-  label: de
+const ce = "_quote_1og2n_1", ie = "_marker_1og2n_12", de = "_text_1og2n_19", ue = "_cursor_1og2n_27", y = {
+  quote: ce,
+  marker: ie,
+  text: de,
+  cursor: ue
 };
-function Ce({ stats: t, className: a, ...l }) {
-  const n = [y.grid, a].filter(Boolean).join(" ");
-  return /* @__PURE__ */ e("dl", { className: n, ...l, children: t.map((s) => /* @__PURE__ */ r("div", { className: y.cell, children: [
-    /* @__PURE__ */ e("dd", { className: y.value, children: s.value }),
-    /* @__PURE__ */ e("dt", { className: y.label, children: s.label })
+function Le({ children: t, marker: o = "#", cursor: a = !0, className: n, ...s }) {
+  const c = [y.quote, n].filter(Boolean).join(" ");
+  return /* @__PURE__ */ r("blockquote", { className: c, ...s, children: [
+    /* @__PURE__ */ e("span", { className: y.marker, "aria-hidden": "true", children: o }),
+    /* @__PURE__ */ r("p", { className: y.text, children: [
+      t,
+      a && /* @__PURE__ */ e("span", { className: y.cursor, "aria-hidden": "true" })
+    ] })
+  ] });
+}
+const _e = "_grid_94gwu_1", me = "_cell_94gwu_12", be = "_value_94gwu_19", ge = "_label_94gwu_28", k = {
+  grid: _e,
+  cell: me,
+  value: be,
+  label: ge
+};
+function qe({ stats: t, className: o, ...a }) {
+  const n = [k.grid, o].filter(Boolean).join(" ");
+  return /* @__PURE__ */ e("dl", { className: n, ...a, children: t.map((s) => /* @__PURE__ */ r("div", { className: k.cell, children: [
+    /* @__PURE__ */ e("dd", { className: k.value, children: s.value }),
+    /* @__PURE__ */ e("dt", { className: k.label, children: s.label })
   ] }, s.label)) });
 }
-const ue = "_list_17qxg_1", _e = "_tag_17qxg_10", x = {
-  list: ue,
-  tag: _e
+const pe = "_list_17qxg_1", fe = "_tag_17qxg_10", E = {
+  list: pe,
+  tag: fe
 };
-function $e({ tags: t, className: a, ...l }) {
-  const n = [x.list, a].filter(Boolean).join(" ");
-  return /* @__PURE__ */ e("ul", { className: n, ...l, children: t.map((s) => /* @__PURE__ */ e("li", { className: x.tag, children: s }, s)) });
+function Ve({ tags: t, className: o, ...a }) {
+  const n = [E.list, o].filter(Boolean).join(" ");
+  return /* @__PURE__ */ e("ul", { className: n, ...a, children: t.map((s) => /* @__PURE__ */ e("li", { className: E.tag, children: s }, s)) });
 }
-const me = "_prompt_vxkw7_1", be = "_path_vxkw7_11", pe = "_cursor_vxkw7_15", w = {
-  prompt: me,
-  path: be,
-  cursor: pe
+const he = "_prompt_vxkw7_1", ye = "_path_vxkw7_11", ke = "_cursor_vxkw7_15", B = {
+  prompt: he,
+  path: ye,
+  cursor: ke
 };
-function je({ user: t, host: a, command: l, className: n, ...s }) {
-  const c = [w.prompt, n].filter(Boolean).join(" ");
+function De({ user: t, host: o, command: a, className: n, ...s }) {
+  const c = [B.prompt, n].filter(Boolean).join(" ");
   return /* @__PURE__ */ r("p", { className: c, ...s, children: [
-    /* @__PURE__ */ r("span", { className: w.path, children: [
+    /* @__PURE__ */ r("span", { className: B.path, children: [
       t,
       "@",
-      a
+      o
     ] }),
     " ~$ ",
-    l,
-    /* @__PURE__ */ e("span", { className: w.cursor, "aria-hidden": "true" })
+    a,
+    /* @__PURE__ */ e("span", { className: B.cursor, "aria-hidden": "true" })
   ] });
 }
 export {
-  he as Avatar,
-  ye as Button,
-  ke as CommandPalette,
-  ve as Eyebrow,
-  Ne as LoadingButton,
-  we as Panel,
-  Be as PipelineBadges,
-  Ce as StatGrid,
-  $e as TagList,
-  je as TerminalPrompt
+  we as Avatar,
+  Be as Button,
+  $e as CommandPalette,
+  Ce as Eyebrow,
+  je as LoadingButton,
+  xe as Panel,
+  Ee as PipelineBadges,
+  Le as Quote,
+  qe as StatGrid,
+  Ve as TagList,
+  De as TerminalPrompt
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alishenriques/design-system",
-  "version": "0.4.0",
+  "version": "0.4.2",
   "description": "Isolated design system for Alis portfolio and future products",
   "type": "module",
   "main": "./dist/index.js",
@@ -25,7 +25,8 @@
     "lint": "eslint src",
     "typecheck": "tsc --noEmit",
     "test": "vitest run",
-    "test:watch": "vitest"
+    "test:watch": "vitest",
+    "prepack": "yarn build"
   },
   "peerDependencies": {
     "react": "^19.0.0",