@spear-ai/spectral 1.4.2 → 1.4.3

package/dist/Accordion.d.ts

@@ -2,29 +2,29 @@ import { ForwardRefExoticComponent, ReactNode, RefAttributes } from 'react';
 import * as AccordionPrimitive from '@radix-ui/react-accordion';
 export type AutoScrollBehavior = 'never' | 'mobile' | 'always';
 type BaseAccordionProps = {
-    children?: ReactNode;
     autoScroll?: AutoScrollBehavior;
+    children?: ReactNode;
     scrollPadding?: number;
     variant?: 'default' | 'contained' | 'separated';
 };
 export type AccordionSingleProps = BaseAccordionProps & {
-    type: 'single';
-    value?: string;
+    collapsible?: boolean;
     defaultValue?: string;
     onValueChange?: (value: string) => void;
-    collapsible?: boolean;
+    type: 'single';
+    value?: string;
 };
 export type AccordionMultipleProps = BaseAccordionProps & {
-    type: 'multiple';
-    value?: string[];
     defaultValue?: string[];
     onValueChange?: (value: string[]) => void;
+    type: 'multiple';
+    value?: string[];
 };
 export type AccordionProps = AccordionSingleProps | AccordionMultipleProps;
 export type AccordionComponent = ForwardRefExoticComponent<AccordionProps & RefAttributes<HTMLDivElement>> & {
+    Content: typeof AccordionContent;
     Item: typeof AccordionItem;
     Trigger: typeof AccordionTrigger;
-    Content: typeof AccordionContent;
 };
 export declare const Accordion: ForwardRefExoticComponent<AccordionProps & RefAttributes<HTMLDivElement>>;
 export declare const AccordionItem: ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & RefAttributes<HTMLDivElement>, "ref"> & RefAttributes<HTMLDivElement>>;

package/dist/Accordion.js

@@ -60,7 +60,7 @@ import "./Icons/ZoomXIcon.js";
 import "./Icons/ZoomYIcon.js";
 import { useAccordionAutoScroll as ue } from "./hooks/useAccordionAutoScroll.js";
 import * as u from "react";
-import m, { createContext as fe, forwardRef as w, Children as ve, isValidElement as Ce, cloneElement as be, useContext as ge, useRef as Ae, useCallback as he } from "react";
+import m, { createContext as fe, forwardRef as w, Children as ve, isValidElement as Ce, cloneElement as ge, useContext as be, useRef as Ae, useCallback as he } from "react";
 import { c as z, u as V, P as R, b as B, a as U, d as xe } from "./index-BhufZRa2.js";
 import { c as Ie, u as Re } from "./index-UEFPWH8U.js";
 import { P as ye } from "./index-6Abv_Flm.js";
@@ -74,8 +74,8 @@ var P = "Collapsible", [Ne, J] = z(P), [we, $] = Ne(P), Y = u.forwardRef(
       defaultOpen: r,
       disabled: n,
       onOpenChange: c,
-      ...l
-    } = e, [s, p] = V({
+      ...s
+    } = e, [l, p] = V({
       prop: t,
       defaultProp: r ?? !1,
       onChange: c,
@@ -87,14 +87,14 @@ var P = "Collapsible", [Ne, J] = z(P), [we, $] = Ne(P), Y = u.forwardRef(
         scope: o,
         disabled: n,
         contentId: q(),
-        open: s,
+        open: l,
         onOpenToggle: u.useCallback(() => p((f) => !f), [p]),
         children: /* @__PURE__ */ i(
           R.div,
           {
-            "data-state": L(s),
+            "data-state": L(l),
             "data-disabled": n ? "" : void 0,
-            ...l,
+            ...s,
             ref: a
           }
         )
@@ -131,7 +131,7 @@ var H = "CollapsibleContent", X = u.forwardRef(
 );
 X.displayName = H;
 var _e = u.forwardRef((e, a) => {
-  const { __scopeCollapsible: o, present: t, children: r, ...n } = e, c = $(H, o), [l, s] = u.useState(t), p = u.useRef(null), f = U(a, p), v = u.useRef(0), x = v.current, b = u.useRef(0), y = b.current, g = c.open || l, A = u.useRef(g), h = u.useRef(void 0);
+  const { __scopeCollapsible: o, present: t, children: r, ...n } = e, c = $(H, o), [s, l] = u.useState(t), p = u.useRef(null), f = U(a, p), v = u.useRef(0), x = v.current, g = u.useRef(0), y = g.current, b = c.open || s, A = u.useRef(b), h = u.useRef(void 0);
   return u.useEffect(() => {
     const d = requestAnimationFrame(() => A.current = !1);
     return () => cancelAnimationFrame(d);
@@ -143,7 +143,7 @@ var _e = u.forwardRef((e, a) => {
         animationName: d.style.animationName
       }, d.style.transitionDuration = "0s", d.style.animationName = "none";
       const I = d.getBoundingClientRect();
-      v.current = I.height, b.current = I.width, A.current || (d.style.transitionDuration = h.current.transitionDuration, d.style.animationName = h.current.animationName), s(t);
+      v.current = I.height, g.current = I.width, A.current || (d.style.transitionDuration = h.current.transitionDuration, d.style.animationName = h.current.animationName), l(t);
     }
   }, [c.open, t]), /* @__PURE__ */ i(
     R.div,
@@ -151,7 +151,7 @@ var _e = u.forwardRef((e, a) => {
       "data-state": L(c.open),
       "data-disabled": c.disabled ? "" : void 0,
       id: c.contentId,
-      hidden: !g,
+      hidden: !b,
       ...n,
       ref: f,
       style: {
@@ -159,7 +159,7 @@ var _e = u.forwardRef((e, a) => {
         "--radix-collapsible-content-width": y ? `${y}px` : void 0,
         ...e.style
       },
-      children: g && r
+      children: b && r
     }
   );
 });
@@ -188,7 +188,7 @@ var [ee, De] = E(C), [oe, Me] = E(
       },
       collapsible: n = !1,
       ...c
-    } = e, [l, s] = V({
+    } = e, [s, l] = V({
       prop: o,
       defaultProp: t ?? "",
       onChange: r,
@@ -198,9 +198,9 @@ var [ee, De] = E(C), [oe, Me] = E(
       ee,
       {
         scope: e.__scopeAccordion,
-        value: m.useMemo(() => l ? [l] : [], [l]),
-        onItemOpen: s,
-        onItemClose: m.useCallback(() => n && s(""), [n, s]),
+        value: m.useMemo(() => s ? [s] : [], [s]),
+        onItemOpen: l,
+        onItemClose: m.useCallback(() => n && l(""), [n, l]),
         children: /* @__PURE__ */ i(oe, { scope: e.__scopeAccordion, collapsible: n, children: /* @__PURE__ */ i(te, { ...c, ref: a }) })
       }
     );
@@ -212,42 +212,42 @@ var [ee, De] = E(C), [oe, Me] = E(
     onValueChange: r = () => {
     },
     ...n
-  } = e, [c, l] = V({
+  } = e, [c, s] = V({
     prop: o,
     defaultProp: t ?? [],
     onChange: r,
     caller: C
-  }), s = m.useCallback(
-    (f) => l((v = []) => [...v, f]),
-    [l]
+  }), l = m.useCallback(
+    (f) => s((v = []) => [...v, f]),
+    [s]
   ), p = m.useCallback(
-    (f) => l((v = []) => v.filter((x) => x !== f)),
-    [l]
+    (f) => s((v = []) => v.filter((x) => x !== f)),
+    [s]
   );
   return /* @__PURE__ */ i(
     ee,
     {
       scope: e.__scopeAccordion,
       value: c,
-      onItemOpen: s,
+      onItemOpen: l,
       onItemClose: p,
       children: /* @__PURE__ */ i(oe, { scope: e.__scopeAccordion, collapsible: !0, children: /* @__PURE__ */ i(te, { ...n, ref: a }) })
     }
   );
 }), [He, S] = E(C), te = m.forwardRef(
   (e, a) => {
-    const { __scopeAccordion: o, disabled: t, dir: r, orientation: n = "vertical", ...c } = e, l = m.useRef(null), s = U(l, a), p = Te(o), v = Re(r) === "ltr", x = B(e.onKeyDown, (b) => {
-      if (!Oe.includes(b.key)) return;
-      const y = b.target, g = p().filter((D) => !D.ref.current?.disabled), A = g.findIndex((D) => D.ref.current === y), h = g.length;
+    const { __scopeAccordion: o, disabled: t, dir: r, orientation: n = "vertical", ...c } = e, s = m.useRef(null), l = U(s, a), p = Te(o), v = Re(r) === "ltr", x = B(e.onKeyDown, (g) => {
+      if (!Oe.includes(g.key)) return;
+      const y = g.target, b = p().filter((D) => !D.ref.current?.disabled), A = b.findIndex((D) => D.ref.current === y), h = b.length;
       if (A === -1) return;
-      b.preventDefault();
+      g.preventDefault();
       let d = A;
       const I = 0, O = h - 1, T = () => {
         d = A + 1, d > O && (d = I);
       }, k = () => {
         d = A - 1, d < I && (d = O);
       };
-      switch (b.key) {
+      switch (g.key) {
         case "Home":
           d = I;
           break;
@@ -268,7 +268,7 @@ var [ee, De] = E(C), [oe, Me] = E(
           break;
       }
       const pe = d % h;
-      g[pe].ref.current?.focus();
+      b[pe].ref.current?.focus();
     });
     return /* @__PURE__ */ i(
       He,
@@ -282,7 +282,7 @@ var [ee, De] = E(C), [oe, Me] = E(
           {
             ...c,
             "data-orientation": n,
-            ref: s,
+            ref: l,
             onKeyDown: t ? void 0 : x
           }
         ) })
@@ -291,20 +291,20 @@ var [ee, De] = E(C), [oe, Me] = E(
   }
 ), N = "AccordionItem", [Le, j] = E(N), re = m.forwardRef(
   (e, a) => {
-    const { __scopeAccordion: o, value: t, ...r } = e, n = S(N, o), c = De(N, o), l = K(o), s = q(), p = t && c.value.includes(t) || !1, f = n.disabled || e.disabled;
+    const { __scopeAccordion: o, value: t, ...r } = e, n = S(N, o), c = De(N, o), s = K(o), l = q(), p = t && c.value.includes(t) || !1, f = n.disabled || e.disabled;
     return /* @__PURE__ */ i(
       Le,
       {
         scope: o,
         open: p,
         disabled: f,
-        triggerId: s,
+        triggerId: l,
         children: /* @__PURE__ */ i(
           Pe,
           {
             "data-orientation": n.orientation,
-            "data-state": se(p),
-            ...l,
+            "data-state": le(p),
+            ...s,
             ...r,
             ref: a,
             disabled: f,
@@ -326,7 +326,7 @@ var ne = "AccordionHeader", ae = m.forwardRef(
       R.h3,
       {
         "data-orientation": r.orientation,
-        "data-state": se(n.open),
+        "data-state": le(n.open),
         "data-disabled": n.disabled ? "" : void 0,
         ...t,
         ref: a
@@ -337,14 +337,14 @@ var ne = "AccordionHeader", ae = m.forwardRef(
 ae.displayName = ne;
 var M = "AccordionTrigger", ie = m.forwardRef(
   (e, a) => {
-    const { __scopeAccordion: o, ...t } = e, r = S(C, o), n = j(M, o), c = Me(M, o), l = K(o);
+    const { __scopeAccordion: o, ...t } = e, r = S(C, o), n = j(M, o), c = Me(M, o), s = K(o);
     return /* @__PURE__ */ i(G.ItemSlot, { scope: o, children: /* @__PURE__ */ i(
       Ee,
       {
         "aria-disabled": n.open && !c.collapsible || void 0,
         "data-orientation": r.orientation,
         id: n.triggerId,
-        ...l,
+        ...s,
         ...t,
         ref: a
       }
@@ -352,7 +352,7 @@ var M = "AccordionTrigger", ie = m.forwardRef(
   }
 );
 ie.displayName = M;
-var ce = "AccordionContent", le = m.forwardRef(
+var ce = "AccordionContent", se = m.forwardRef(
   (e, a) => {
     const { __scopeAccordion: o, ...t } = e, r = S(C, o), n = j(ce, o), c = K(o);
     return /* @__PURE__ */ i(
@@ -373,11 +373,11 @@ var ce = "AccordionContent", le = m.forwardRef(
     );
   }
 );
-le.displayName = ce;
-function se(e) {
+se.displayName = ce;
+function le(e) {
   return e ? "open" : "closed";
 }
-var Ge = Z, Ke = re, je = ae, Fe = ie, ze = le;
+var Ge = Z, Ke = re, je = ae, Fe = ie, ze = se;
 const Be = {
   default: "shadow-none",
   contained: "rounded-md border border-level-four",
@@ -387,45 +387,47 @@ const Be = {
   contained: "last:border-b-0",
   separated: "rounded-md"
 }, de = fe({ variant: "default" }), qe = w(({ variant: e = "default", ...a }, o) => {
-  const { autoScroll: t = "never", scrollPadding: r = -20, children: n, ...c } = a, l = {
+  const { autoScroll: t = "never", scrollPadding: r = -20, children: n, ...c } = a, s = {
     autoScroll: t,
     scrollPadding: r
-  }, s = {
+  }, l = {
     ...c,
     ref: o
   };
   return /* @__PURE__ */ i(de.Provider, { value: { variant: e }, children: /* @__PURE__ */ i(
     Ge,
     {
-      ...s,
+      ...l,
       "data-slot": "accordion",
-      "data-scroll-options": JSON.stringify(l),
+      "data-testid": "spectral-accordion",
+      "data-scroll-options": JSON.stringify(s),
       "data-auto-scroll": t,
       "data-scroll-padding": r,
       ...a.type === "single" ? { collapsible: !0 } : {},
       className: _("flex flex-col accordion-wrapper", Be[e]),
-      children: ve.map(n, (p) => Ce(p) ? be(p, { variant: e }) : p)
+      children: ve.map(n, (p) => Ce(p) ? ge(p, { variant: e }) : p)
     }
   ) });
 });
 qe.displayName = "Accordion";
 const Je = w(({ className: e, ...a }, o) => {
-  const { variant: t = "default" } = ge(de);
-  return /* @__PURE__ */ i(Ke, { ref: o, "data-slot": "accordion-item", className: _("w-full border-b border-level-four p-4", Ue[t], e), ...a });
+  const { variant: t = "default" } = be(de);
+  return /* @__PURE__ */ i(Ke, { ref: o, "data-slot": "accordion-item", "data-testid": "spectral-accordion-item", className: _("w-full border-b border-level-four p-4", Ue[t], e), ...a });
 });
 Je.displayName = "AccordionItem";
 const Ye = w(({ className: e, title: a, subtitle: o, ...t }, r) => {
-  const n = Ae(null), c = ue(n), l = he(
-    (s) => {
-      typeof r == "function" ? r(s) : r && (r.current = s), n.current = s;
+  const n = Ae(null), c = ue(n), s = he(
+    (l) => {
+      typeof r == "function" ? r(l) : r && (r.current = l), n.current = l;
     },
     [r]
   );
   return /* @__PURE__ */ i(je, { className: "m-0 flex", children: /* @__PURE__ */ F(
     Fe,
     {
-      ref: l,
+      ref: s,
       "data-slot": "accordion-trigger",
+      "data-testid": "spectral-accordion-trigger",
       className: _("flex flex-1 items-center justify-between text-sm font-normal text-text-primary transition-all hover:no-underline", "disabled:cursor-not-allowed [&[data-state=open]>svg]:rotate-180", e),
       onClick: c,
       ...t,
@@ -440,7 +442,7 @@ const Ye = w(({ className: e, title: a, subtitle: o, ...t }, r) => {
   ) });
 });
 Ye.displayName = "AccordionTrigger";
-const Qe = w(({ className: e, children: a, ...o }, t) => /* @__PURE__ */ i(ze, { ref: t, "data-slot": "accordion-content", className: _("overflow-hidden pt-4 text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down", e), ...o, children: /* @__PURE__ */ i("div", { className: "px-1 pb-4 pt-0", "data-slot": "accordion-content-inner", children: a }) }));
+const Qe = w(({ className: e, children: a, ...o }, t) => /* @__PURE__ */ i(ze, { ref: t, "data-slot": "accordion-content", "data-testid": "spectral-accordion-content", className: _("overflow-hidden pt-4 text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down", e), ...o, children: /* @__PURE__ */ i("div", { className: "px-1 pb-4 pt-0", "data-slot": "accordion-content-inner", children: a }) }));
 Qe.displayName = "AccordionContent";
 export {
   qe as Accordion,

package/dist/Alert/AlertBase.js

@@ -4,8 +4,8 @@ import { jsx as l } from "react/jsx-runtime";
 import { cn as s } from "../utils/twUtils.js";
 import { c as n } from "../index-D29mdTf5.js";
 import { forwardRef as i, useState as o, useEffect as d } from "react";
-import { createPortal as g } from "react-dom";
-const c = n(
+import { createPortal as c } from "react-dom";
+const g = n(
   `fixed top-2 left-1/2 -translate-x-1/2 z-50 w-full max-w-md rounded-md border px-4 py-3 text-sm flex has-[>svg]:grid-cols-[6_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-2 gap-y-0.5
   items-start [&>svg]:size-6 [&>svg]:translate-y-0.5 transform transition-all duration-300 ease-in-out translate-y-0 opacity-100 scale-100 animate-in slide-in-from-top-full fade-in duration-300`,
   {
@@ -28,15 +28,15 @@ const c = n(
   danger: "text-alert-danger-text",
   info: "text-alert-info-text",
   default: "text-alert-text"
-}, f = i(({ className: t, variant: e, ...r }, a) => /* @__PURE__ */ l("div", { "data-slot": "alert", role: "alert", className: s(c({ variant: e }), t), ref: a, ...r }));
+}, f = i(({ className: t, variant: e, ...r }, a) => /* @__PURE__ */ l("div", { className: s(g({ variant: e }), t), "data-slot": "alert", ref: a, role: "alert", ...r }));
 f.displayName = "AlertBase";
-const m = i(({ className: t, variant: e, ...r }, a) => /* @__PURE__ */ l("div", { "data-slot": "alert-title", ref: a, className: s(x[e], "col-start-2 line-clamp-1 min-h-4 font-semibold text-base tracking-tight h-6 flex items-center", t), ...r }));
+const m = i(({ className: t, variant: e, ...r }, a) => /* @__PURE__ */ l("div", { className: s(x[e], "col-start-2 line-clamp-1 min-h-4 font-semibold text-base tracking-tight h-6 flex items-center", t), "data-slot": "alert-title", "data-testid": "spectral-alert-title", ref: a, ...r }));
 m.displayName = "AlertTitle";
-const u = i(({ className: t, ...e }, r) => /* @__PURE__ */ l("div", { "data-slot": "alert-description", className: s("text-primary-inverse col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed", t), ref: r, ...e }));
+const u = i(({ className: t, ...e }, r) => /* @__PURE__ */ l("div", { className: s("text-primary-inverse col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed", t), "data-slot": "alert-description", "data-testid": "spectral-alert-description", ref: r, ...e }));
 u.displayName = "AlertDescription";
 function A({ children: t, container: e }) {
   const [r, a] = o(!1);
-  return d(() => (a(!0), () => a(!1)), []), r ? g(t, e ?? document.body) : null;
+  return d(() => (a(!0), () => a(!1)), []), r ? c(t, e ?? document.body) : null;
 }
 export {
   f as AlertBase,

package/dist/Alert.js

@@ -96,7 +96,7 @@ const Vt = ({ id: n, description: a, onClose: s, icon: l, title: c, className: d
         "aria-label": "Close alert",
         className: "close-icon-wrapper absolute right-2 top-2 cursor-pointer focus-visible:outline-1 outline-transparent focus-visible:outline-text-secondary focus-visible:outline-offset-1 rounded",
         "data-slot": "close-icon",
-        "data-testid": "alert-close-button",
+        "data-testid": "spectral-alert-close-button",
         onClick: f,
         size: 20,
         tabIndex: 0

package/dist/Avatar.d.ts

@@ -1,5 +1,5 @@
 import { ReactElement, ReactNode } from 'react';
-type AvatarSize = 'small' | 'medium' | 'large';
+type AvatarSize = 'sm' | 'md' | 'lg';
 export interface AvatarProps {
     userFullName?: string;
     imageSource?: string;
@@ -9,6 +9,6 @@ export interface AvatarProps {
     className?: string;
     alt?: string;
 }
-export declare const Avatar: ({ userFullName, imageSource, icon, fallback, size, className, alt }: AvatarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Avatar: ({ alt, className, icon, imageSource, fallback, size, userFullName }: AvatarProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=Avatar.d.ts.map

package/dist/Avatar.js

@@ -1,59 +1,59 @@
 "use client";
 import "./styles/main.css";
-import { jsx as n } from "react/jsx-runtime";
-import { cn as i } from "./utils/twUtils.js";
-import { useState as x, useEffect as g, isValidElement as w, cloneElement as u } from "react";
+import { jsx as r } from "react/jsx-runtime";
+import { cn as s } from "./utils/twUtils.js";
+import { useState as x, useEffect as v, isValidElement as w, cloneElement as p } from "react";
 const y = {
-  small: "h-8 w-8",
-  medium: "h-10 w-10",
-  large: "h-12 w-12"
-}, v = {
-  small: "text-sm",
-  medium: "text-lg",
-  large: "text-2xl"
-}, j = {
-  small: 24,
-  medium: 32,
-  large: 40
-}, N = (l) => {
-  const t = l.trim();
-  if (!t) return "?";
-  const e = t.split(/\s+/).filter(Boolean);
-  return e.length === 0 ? "?" : e.length === 1 ? e[0].charAt(0).toUpperCase() : (e[0].charAt(0) + e[e.length - 1].charAt(0)).toUpperCase();
-}, E = ({ userFullName: l, imageSource: t, icon: e, fallback: s, size: a = "medium", className: d, alt: c }) => {
-  const [f, o] = x("loading");
-  g(() => {
-    if (!t) return;
-    o("loading");
-    const r = new Image();
-    return r.src = t, r.onload = () => o("loaded"), r.onerror = () => o("error"), () => {
-      r.onload = null, r.onerror = null;
+  sm: "h-8 w-8",
+  md: "h-10 w-10",
+  lg: "h-12 w-12"
+}, f = {
+  sm: "text-sm",
+  md: "text-lg",
+  lg: "text-2xl"
+}, b = {
+  sm: 24,
+  md: 32,
+  lg: 40
+}, j = (l) => {
+  const i = l.trim();
+  if (!i) return "?";
+  const t = i.split(/\s+/).filter(Boolean);
+  return t.length === 0 ? "?" : t.length === 1 ? t[0].charAt(0).toUpperCase() : (t[0].charAt(0) + t[t.length - 1].charAt(0)).toUpperCase();
+}, k = ({ alt: l, className: i, icon: t, imageSource: a, fallback: o, size: n = "md", userFullName: c }) => {
+  const [m, d] = x("loading");
+  v(() => {
+    if (!a) return;
+    d("loading");
+    const e = new Image();
+    return e.src = a, e.onload = () => d("loaded"), e.onerror = () => d("error"), () => {
+      e.onload = null, e.onerror = null;
     };
-  }, [t]);
-  const p = () => {
-    if (l)
-      return /* @__PURE__ */ n("span", { className: i("flex items-center justify-center w-full h-full font-bold text-text-primary tracking-tighter", v[a]), "aria-label": `${l} avatar`, children: N(l) });
-    if (e) {
-      const r = j[a];
-      return /* @__PURE__ */ n("span", { className: "flex items-center justify-center w-full h-full", children: w(e) ? (() => {
-        const m = {
-          className: i("shrink-0", e.props.className),
+  }, [a]);
+  const h = () => {
+    if (c)
+      return /* @__PURE__ */ r("span", { "aria-label": `${c} avatar`, className: s("flex items-center justify-center w-full h-full font-bold text-text-primary tracking-tighter", f[n]), "data-testid": "spectral-avatar-initials", children: j(c) });
+    if (t) {
+      const e = b[n];
+      return /* @__PURE__ */ r("span", { className: "flex items-center justify-center w-full h-full", children: w(t) ? (() => {
+        const u = {
+          className: s("shrink-0", t.props.className),
           "aria-hidden": "true"
         };
-        if (e.type.displayName?.includes("Icon") ?? !1) {
-          const h = {
-            ...m,
-            size: r
+        if (t.type.displayName?.includes("Icon") ?? !1) {
+          const g = {
+            ...u,
+            size: e
           };
-          return u(e, h);
+          return p(t, g);
         }
-        return u(e, m);
-      })() : e });
+        return p(t, u);
+      })() : t });
     }
-    return t && f === "loaded" ? /* @__PURE__ */ n("img", { src: t, "aria-label": c || "Avatar", alt: c || "Avatar", className: "absolute inset-0 w-full h-full object-cover rounded-full" }) : t && f === "error" && s ? /* @__PURE__ */ n("span", { className: "flex items-center justify-center w-full h-full", children: s }) : s ? /* @__PURE__ */ n("span", { className: "flex items-center justify-center w-full h-full text-text-primary", children: s }) : /* @__PURE__ */ n("span", { className: "flex items-center justify-center w-full h-full font-bold border-2 border-danger-300 text-danger-300 rounded-full", children: "?" });
+    return a && m === "loaded" ? /* @__PURE__ */ r("img", { alt: l || "Avatar", "aria-label": l || "Avatar", className: "absolute inset-0 w-full h-full object-cover rounded-full", "data-testid": "spectral-avatar-image", role: "img", src: a }) : a && m === "error" && o ? /* @__PURE__ */ r("span", { className: "flex items-center justify-center w-full h-full", "data-testid": "spectral-avatar-img-error-fallback", children: o }) : o ? /* @__PURE__ */ r("span", { className: s("flex items-center justify-center w-full h-full text-text-primary", f[n]), "data-testid": "spectral-avatar-fallback", children: o }) : /* @__PURE__ */ r("span", { className: s("flex items-center justify-center w-full h-full font-bold border-2 border-danger-400 text-danger-400 rounded-full font-bold", f[n]), "data-testid": "spectral-avatar-last-resort", children: "?" });
   };
-  return /* @__PURE__ */ n("span", { className: i("relative inline-flex items-center justify-center overflow-hidden rounded-full shrink-0 bg-level-two", y[a], d), "data-slot": "avatar", children: p() });
+  return /* @__PURE__ */ r("div", { className: s("relative inline-flex items-center justify-center overflow-hidden rounded-full shrink-0 bg-level-two", y[n], i), "data-slot": "avatar", "data-testid": "spectral-avatar", children: h() });
 };
 export {
-  E as Avatar
+  k as Avatar
 };

package/dist/Badge.js

@@ -1,6 +1,6 @@
 import "./styles/main.css";
-import { jsx as o } from "react/jsx-runtime";
-import { Slot as i } from "./primitives/slot.js";
+import { jsx as i } from "react/jsx-runtime";
+import { Slot as o } from "./primitives/slot.js";
 import { cn as n } from "./utils/twUtils.js";
 import { c as d } from "./index-D29mdTf5.js";
 const s = d(
@@ -20,7 +20,7 @@ const s = d(
       variant: "default"
     }
   }
-), m = ({ className: e, variant: r, asChild: a = !1, ...t }) => /* @__PURE__ */ o(a ? i : "span", { "data-slot": "badge", className: n(s({ variant: r }), e), ...t });
+), m = ({ className: e, variant: r, asChild: a = !1, ...t }) => /* @__PURE__ */ i(a ? o : "span", { "data-slot": "badge", "data-testid": "spectral-badge", className: n(s({ variant: r }), e), ...t });
 export {
   m as Badge
 };

package/dist/Button.js

@@ -1,11 +1,18 @@
 "use client";
 import "./styles/main.css";
 import { jsxs as s, jsx as o } from "react/jsx-runtime";
+import { ErrorMessage as y } from "./utils/formFieldUtils.js";
 import { cn as u } from "./utils/twUtils.js";
-import { c as y } from "./index-D29mdTf5.js";
-import { forwardRef as h } from "react";
-import { L as f } from "./loader-circle-CdRVlFhN.js";
-const N = y(
+import { c as h } from "./index-D29mdTf5.js";
+import { forwardRef as f } from "react";
+import { c as N } from "./createLucideIcon-B_8CJpcQ.js";
+/**
+ * @license lucide-react v0.546.0 - ISC
+ *
+ * This source code is licensed under the ISC license.
+ * See the LICENSE file in the root directory of this source tree.
+ */
+const w = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]], _ = N("loader-circle", w), j = h(
   `
     !font-sans flex relative items-center justify-center gap-2 whitespace-nowrap transition-colors cursor-pointer rounded-lg border font-semibold focus:outline-none focus:outline-none
     focus-visible:outline-1 focus-visible:outline-offset-2 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0
@@ -38,7 +45,7 @@ const N = y(
       size: "default"
     }
   }
-), w = h(({ className: l, dataTestId: g, disabled: n, endIcon: b, errorMessage: d, label: c, size: r, startIcon: a, state: t, type: p = "button", variant: e, ...x }, v) => {
+), z = f(({ className: l, dataTestId: c, disabled: n, endIcon: b, errorMessage: d, label: g, size: r, startIcon: a, state: t, type: p = "button", variant: e, ...x }, m) => {
   const i = {
     error: {
       primary: "bg-button-danger border-button-danger text-button-primary-text pointer-events-none",
@@ -54,18 +61,18 @@ const N = y(
       ghost: "bg-transparent text-button-ghost-text--disabled pointer-events-none",
       card: "bg-button-card-bg--disabled border-button-card-border--disabled text-button-card-text--disabled pointer-events-none"
     }
-  }, m = u(N({ variant: e, state: t, size: r }), t === "error" && i.error[e || "primary"], t === "loading" && i.loading[e || "primary"], r, l);
+  }, v = u(j({ variant: e, state: t, size: r }), t === "error" && i.error[e || "primary"], t === "loading" && i.loading[e || "primary"], r, l);
   return /* @__PURE__ */ s("div", { className: u("flex flex-col justify-items-center", r), children: [
-    /* @__PURE__ */ s("button", { "aria-disabled": n, className: m, "data-state": t, "data-testid": g || `button-${e}`, disabled: n, ref: v, type: p, ...x, children: [
+    /* @__PURE__ */ s("button", { "aria-disabled": n, className: v, "data-state": t, "data-testid": c || `spectral-button-${e}`, disabled: n, ref: m, type: p, ...x, children: [
       a && /* @__PURE__ */ o("span", { className: "flex pr-2", "aria-hidden": !0, children: a }),
-      t === "loading" && /* @__PURE__ */ o(f, { className: "ml-2 animate-spin", size: 16 }),
+      t === "loading" && /* @__PURE__ */ o(_, { className: "ml-2 animate-spin", size: 16 }),
       b && t !== "loading" && /* @__PURE__ */ o("span", { className: "flex pl-2", "aria-hidden": !0, children: b }),
-      c
+      g
     ] }),
-    t === "error" && d && /* @__PURE__ */ o("p", { className: "text-danger-100 mt-2 text-xs", role: "alert", "aria-live": "assertive", children: d })
+    t === "error" && d && /* @__PURE__ */ o(y, { message: d, dataTestId: "spectral-button-error-message", id: "button-error" })
   ] });
 });
-w.displayName = "Button";
+z.displayName = "Button";
 export {
-  w as Button
+  z as Button
 };

package/dist/ButtonGroup/ButtonGroupButton.d.ts

@@ -2,7 +2,7 @@ import { VariantProps } from 'class-variance-authority';
 import { ComponentProps } from 'react';
 export declare const buttonVariants: (props?: ({
     variant?: "default" | "outline" | null | undefined;
-    size?: "default" | "icon" | "sm" | "lg" | "icon-sm" | "icon-lg" | null | undefined;
+    size?: "sm" | "md" | "lg" | "icon-md" | "icon-sm" | "icon-lg" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export declare const ButtonGroupButton: {
     ({ className, variant, size, asChild, ...props }: ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {