@spear-ai/spectral 1.6.17 → 1.7.0

package/dist/Alert/AlertBase.js

@@ -68,12 +68,12 @@ import "../Icons/ZoomAllIcon.js";
 import "../Icons/ZoomXIcon.js";
 import "../Icons/ZoomYIcon.js";
 import { cn as a } from "../utils/twUtils.js";
-import { c as p } from "../index-D29mdTf5.js";
-import { useState as m, useEffect as n } from "react";
+import { c as m } from "../index-D29mdTf5.js";
+import { useState as p, useEffect as n } from "react";
 import { createPortal as d } from "react-dom";
-const c = p(
+const c = m(
   `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 flex-col gap-y-1
-  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`,
+  transform transition-all duration-300 ease-in-out translate-y-0 opacity-100 scale-100 motion-safe:animate-in motion-safe:slide-in-from-top-full motion-safe:fade-in motion-safe:duration-300`,
   {
     variants: {
       variant: {
@@ -102,48 +102,48 @@ const c = p(
 }) => /* @__PURE__ */ i("div", { className: a(c({ variant: e }), r), "data-slot": "alert", "data-testid": "spectral-alert", ref: t, role: "alert", ...o });
 f.displayName = "AlertBase";
 const u = ({
-  ref: t,
-  className: r,
+  className: t,
+  ref: r,
   ...e
-}) => /* @__PURE__ */ i("div", { className: a("flex items-center gap-2 [&>svg]:size-6 [&>svg]:shrink-0", r), "data-slot": "alert-header", ref: t, ...e });
+}) => /* @__PURE__ */ i("div", { className: a("flex items-center gap-2 [&>svg]:size-6 [&>svg]:shrink-0", t), "data-slot": "alert-header", ref: r, ...e });
 u.displayName = "AlertHeader";
 const x = ({
-  ref: t,
-  className: r,
+  className: t,
+  ref: r,
   variant: e,
   ...o
-}) => /* @__PURE__ */ i("div", { className: a(l[e], "line-clamp-1 flex-1 text-base font-semibold tracking-tight", r), "data-slot": "alert-title", "data-testid": "spectral-alert-title", ref: t, ...o });
+}) => /* @__PURE__ */ i("div", { className: a(l[e], "line-clamp-1 flex-1 text-base font-semibold tracking-tight", t), "data-slot": "alert-title", "data-testid": "spectral-alert-title", ref: r, ...o });
 x.displayName = "AlertTitle";
 const g = ({
-  ref: t,
-  className: r,
+  className: t,
+  ref: r,
   variant: e,
   ...o
-}) => /* @__PURE__ */ i("div", { className: a(l[e], "grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed", r), "data-slot": "alert-description", "data-testid": "spectral-alert-description", ref: t, ...o });
+}) => /* @__PURE__ */ i("div", { className: a(l[e], "grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed", t), "data-slot": "alert-description", "data-testid": "spectral-alert-description", ref: r, ...o });
 g.displayName = "AlertDescription";
 const b = ({
-  ref: t,
-  className: r,
+  className: t,
+  ref: r,
   variant: e,
   ...o
 }) => /* @__PURE__ */ i(
   s,
   {
     "aria-label": "Close alert",
-    className: a(l[e], "focus-visible:outline-text-secondary shrink-0 cursor-pointer rounded outline-transparent focus-visible:outline-1 focus-visible:outline-offset-1", r),
+    className: a(l[e], "focus-visible:outline-text-secondary shrink-0 cursor-pointer rounded outline-transparent focus-visible:outline-1 focus-visible:outline-offset-1", t),
     "data-slot": "close-icon",
     "data-testid": "spectral-alert-close-button",
-    ref: t,
+    ref: r,
     size: 20,
     tabIndex: 0,
     ...o
   }
 );
 b.displayName = "AlertCloseButton";
-function Vt({ children: t, container: r }) {
-  const [e, o] = m(!1);
+const Vt = ({ children: t, container: r }) => {
+  const [e, o] = p(!1);
   return n(() => (o(!0), () => o(!1)), []), e ? d(t, r ?? document.body) : null;
-}
+};
 export {
   f as AlertBase,
   b as AlertCloseButton,

package/dist/Alert.d.ts

@@ -1,12 +1,12 @@
 import { ReactNode } from 'react';
 export interface AlertProps {
-    onClose?: () => void;
     className?: string;
     description: string | ReactNode | undefined;
     icon?: ReactNode;
     id: string | undefined;
+    onClose?: () => void;
     title: string | undefined;
     variant?: 'default' | 'info' | 'success' | 'warning' | 'danger';
 }
-export declare const Alert: ({ id, description, onClose, icon, title, className, variant }: AlertProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Alert: ({ className, description, icon, id, onClose, title, variant }: AlertProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Alert.d.ts.map

package/dist/Alert.js

@@ -1,7 +1,7 @@
 "use client";
 import "./styles/main.css";
-import { jsx as t, jsxs as a } from "react/jsx-runtime";
-import { AlertPortal as x, AlertBase as y, AlertHeader as I, AlertTitle as N, AlertCloseButton as h, AlertDescription as w } from "./Alert/AlertBase.js";
+import { jsx as t, jsxs as l } from "react/jsx-runtime";
+import { AlertPortal as y, AlertBase as I, AlertHeader as N, AlertTitle as h, AlertCloseButton as w, AlertDescription as g } from "./Alert/AlertBase.js";
 import "./Icons/AnalyzeIcon.js";
 import "./Icons/AnnotationsIcon.js";
 import "./Icons/ApprovedIcon.js";
@@ -9,12 +9,12 @@ import "./Icons/ArrowDownIcon.js";
 import "./Icons/ArrowUpIcon.js";
 import "./Icons/CalendarIcon.js";
 import "./Icons/CheckCircleIcon.js";
-import { CheckSquareIcon as g } from "./Icons/CheckSquareIcon.js";
+import { CheckSquareIcon as E } from "./Icons/CheckSquareIcon.js";
 import "./Icons/CheckmarkIcon.js";
 import "./Icons/ChevronDownIcon.js";
 import "./Icons/ChevronUpIcon.js";
 import "./Icons/ClockIcon.js";
-import { CloseCircleIcon as E } from "./Icons/CloseCircleIcon.js";
+import { CloseCircleIcon as k } from "./Icons/CloseCircleIcon.js";
 import "./Icons/CloseIcon.js";
 import "./Icons/DashboardIcon.js";
 import "./Icons/DatabaseIcon.js";
@@ -69,39 +69,39 @@ import "./Icons/ZoomAllIcon.js";
 import "./Icons/ZoomXIcon.js";
 import "./Icons/ZoomYIcon.js";
 import { cn as T } from "./utils/twUtils.js";
-import { useRef as k, useEffect as v } from "react";
-const Jt = ({ id: s, description: i, onClose: l, icon: c, title: d, className: f, variant: r = "default" }) => {
-  const o = k(null), e = c || {
+import { useRef as v, useCallback as s, useEffect as S } from "react";
+const Ot = ({ className: c, description: e, icon: d, id: u, onClose: m, title: f, variant: r = "default" }) => {
+  const o = v(null), p = d ?? {
     info: /* @__PURE__ */ t(C, { className: "text-alert-info-text" }),
-    success: /* @__PURE__ */ t(g, { className: "text-alert-success-text" }),
+    success: /* @__PURE__ */ t(E, { className: "text-alert-success-text" }),
     warning: /* @__PURE__ */ t(R, { className: "text-alert-warning-text" }),
-    danger: /* @__PURE__ */ t(E, { className: "text-alert-danger-text" }),
+    danger: /* @__PURE__ */ t(k, { className: "text-alert-danger-text" }),
     default: null
-  }[r];
-  v(() => {
-    const p = (n) => {
-      n.key === "Escape" && o.current && (n.preventDefault(), m());
-    };
-    return document.addEventListener("keydown", p), () => {
-      document.removeEventListener("keydown", p);
-    };
-  }, []);
-  const m = () => {
+  }[r], i = s(() => {
     o.current && (o.current.style.opacity = "0", setTimeout(() => {
-      o.current && (o.current.style.display = "none"), l?.();
+      o.current && (o.current.style.display = "none"), m?.();
     }, 300));
-  }, u = () => {
-    m();
-  }, A = (/* @__PURE__ */ new Set(["danger", "warning"])).has(r) ? "assertive" : "polite";
-  return /* @__PURE__ */ t(x, { children: /* @__PURE__ */ a(y, { "aria-live": A, className: T("alert-wrapper transition-opacity duration-300", f), "data-slot": "alert", "data-variant": r, id: s, ref: o, variant: r, children: [
-    /* @__PURE__ */ a(I, { children: [
-      e,
-      /* @__PURE__ */ t(N, { variant: r, children: d }),
-      /* @__PURE__ */ t(h, { onClick: u, variant: r })
+  }, [m]);
+  S(() => {
+    const n = (a) => {
+      a.key === "Escape" && o.current && (a.preventDefault(), i());
+    };
+    return document.addEventListener("keydown", n), () => {
+      document.removeEventListener("keydown", n);
+    };
+  }, [i]);
+  const A = s(() => {
+    i();
+  }, [i]), x = (/* @__PURE__ */ new Set(["danger", "warning"])).has(r) ? "assertive" : "polite";
+  return /* @__PURE__ */ t(y, { children: /* @__PURE__ */ l(I, { "aria-live": x, className: T("alert-wrapper transition-opacity duration-300", c), "data-slot": "alert", "data-variant": r, id: u, ref: o, variant: r, children: [
+    /* @__PURE__ */ l(N, { children: [
+      p,
+      /* @__PURE__ */ t(h, { variant: r, children: f }),
+      /* @__PURE__ */ t(w, { onClick: A, variant: r })
     ] }),
-    i && /* @__PURE__ */ t(w, { className: e ? "ml-8" : void 0, variant: r, children: i })
+    e && /* @__PURE__ */ t(g, { className: p ? "ml-8" : void 0, variant: r, children: e })
   ] }) });
 };
 export {
-  Jt as Alert
+  Ot as Alert
 };

package/dist/Avatar.d.ts

@@ -4,11 +4,11 @@ export interface AvatarProps {
     alt?: string;
     className?: string;
     fallback?: ReactNode | string;
-    imageSource?: string;
     icon?: ReactElement;
+    imageSource?: string;
     size?: AvatarSize;
     userFullName?: string;
 }
-export declare const Avatar: ({ alt, className, icon, imageSource, fallback, size, userFullName }: AvatarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Avatar: ({ alt, className, fallback, icon, imageSource, size, userFullName }: AvatarProps) => import("react/jsx-runtime").JSX.Element;
 export {};
 //# sourceMappingURL=Avatar.d.ts.map

package/dist/Avatar.js

@@ -16,44 +16,52 @@ const j = {
   sm: 24,
   md: 32,
   lg: 40
-}, N = (s) => {
-  const n = s.trim();
-  if (!n) return "?";
-  const t = n.split(/\s+/).filter(Boolean);
+}, N = (n) => {
+  const l = n.trim();
+  if (!l) return "?";
+  const t = l.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: s, className: n, icon: t, imageSource: r, fallback: l, size: i = "md", userFullName: c }) => {
+}, k = ({ alt: n, className: l, fallback: t, icon: r, imageSource: a, size: i = "md", userFullName: c }) => {
   const [d, f] = v("loading");
   w(() => {
-    if (!r) return;
+    if (!a) return;
     f("loading");
-    const a = new Image();
-    return a.src = r, a.onload = () => f("loaded"), a.onerror = () => f("error"), () => {
-      a.onload = null, a.onerror = null;
+    const s = new Image();
+    return s.src = a, s.onload = () => f("loaded"), s.onerror = () => f("error"), () => {
+      s.onload = null, s.onerror = null;
     };
-  }, [r]);
+  }, [a]);
   const h = () => {
     if (c)
-      return /* @__PURE__ */ e("span", { "aria-label": `${c} avatar`, className: o("text-text-primary flex h-full w-full items-center justify-center font-bold tracking-tighter font-stretch-condensed", p[i]), "data-testid": "spectral-avatar-initials", children: N(c) });
-    if (t) {
-      const a = I[i];
-      return /* @__PURE__ */ e("span", { className: "flex h-full w-full items-center justify-center", children: y(t) ? (() => {
+      return /* @__PURE__ */ e(
+        "span",
+        {
+          "aria-label": c + " avatar",
+          className: o("text-text-primary flex h-full w-full items-center justify-center font-bold tracking-tighter font-stretch-condensed", p[i]),
+          "data-testid": "spectral-avatar-initials",
+          children: N(c)
+        }
+      );
+    if (r) {
+      const s = I[i];
+      return /* @__PURE__ */ e("span", { className: "flex h-full w-full items-center justify-center", children: y(r) ? (() => {
         const m = {
-          className: o("shrink-0", t.props.className),
+          className: o("shrink-0", r.props.className),
           "aria-hidden": "true"
         };
-        if (t.type.displayName?.includes("Icon") ?? !1) {
+        if (r.type.displayName?.includes("Icon") ?? !1) {
           const x = {
             ...m,
-            size: a
+            size: s
           };
-          return u(t, x);
+          return u(r, x);
         }
-        return u(t, m);
-      })() : t });
+        return u(r, m);
+      })() : r });
     }
-    return r && d === "loaded" ? /* @__PURE__ */ e("img", { alt: s || "Avatar", "aria-label": s || "Avatar", className: "absolute inset-0 h-full w-full rounded-full object-cover", "data-testid": "spectral-avatar-image", role: "img", src: r }) : r && d === "error" && l ? /* @__PURE__ */ e("span", { className: "flex h-full w-full items-center justify-center", "data-testid": "spectral-avatar-img-error-fallback", children: l }) : l ? /* @__PURE__ */ e("span", { className: o("text-text-primary flex h-full w-full items-center justify-center", p[i]), "data-testid": "spectral-avatar-fallback", children: l }) : r && d === "loading" ? /* @__PURE__ */ e("span", { className: "flex h-full w-full animate-pulse items-center justify-center", "data-testid": "spectral-avatar-loading" }) : /* @__PURE__ */ e(g, {});
+    return a && d === "loaded" ? /* @__PURE__ */ e("img", { alt: n ?? "Avatar", "aria-label": n ?? "Avatar", className: "absolute inset-0 h-full w-full rounded-full object-cover", "data-testid": "spectral-avatar-image", role: "img", src: a }) : a && d === "error" && t ? /* @__PURE__ */ e("span", { className: "flex h-full w-full items-center justify-center", "data-testid": "spectral-avatar-img-error-fallback", children: t }) : t ? /* @__PURE__ */ e("span", { className: o("text-text-primary flex h-full w-full items-center justify-center", p[i]), "data-testid": "spectral-avatar-fallback", children: t }) : a && d === "loading" ? /* @__PURE__ */ e("span", { className: "flex h-full w-full items-center justify-center motion-safe:animate-pulse", "data-testid": "spectral-avatar-loading" }) : /* @__PURE__ */ e(g, {});
   };
-  return /* @__PURE__ */ e("div", { className: o("bg-level-two relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full", j[i], n), "data-slot": "avatar", "data-testid": "spectral-avatar", children: h() });
+  return /* @__PURE__ */ e("div", { className: o("bg-level-two relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full", j[i], l), "data-slot": "avatar", "data-testid": "spectral-avatar", children: h() });
 };
 export {
   k as Avatar

package/dist/Badge.d.ts

@@ -6,7 +6,7 @@ export type BadgeProps = ComponentProps<'span'> & VariantProps<typeof badgeVaria
 declare const badgeVariants: (props?: ({
     variant?: "default" | "secondary" | "destructive" | "outline" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
-export declare const Badge: ({ className, variant, asChild, ...props }: ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
+export declare const Badge: ({ asChild, className, variant, ...props }: ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
     asChild?: boolean;
 }) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/Badge.js

@@ -3,6 +3,7 @@ import { jsx as i } from "react/jsx-runtime";
 import { Slot as o } from "./primitives/slot.js";
 import { cn as d } from "./utils/twUtils.js";
 import { c as n } from "./index-D29mdTf5.js";
+import "react";
 const g = n(
   `inline-flex items-center justify-center rounded-sm px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none
   focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-danger-200 aria-invalid:border-danger-200
@@ -20,7 +21,7 @@ const g = n(
       variant: "default"
     }
   }
-), m = ({ className: e, variant: r, asChild: a = !1, ...t }) => /* @__PURE__ */ i(a ? o : "span", { "data-slot": "badge", "data-testid": "spectral-badge", className: d(g({ variant: r }), e), ...t });
+), l = ({ asChild: e = !1, className: r, variant: a, ...t }) => /* @__PURE__ */ i(e ? o : "span", { className: d(g({ variant: a }), r), "data-slot": "badge", "data-testid": "spectral-badge", ...t });
 export {
-  m as Badge
+  l as Badge
 };

package/dist/Button.d.ts

@@ -7,12 +7,12 @@ declare const buttonVariants: (props?: ({
     state?: "default" | "error" | "loading" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export interface ButtonProps extends AsChildProp, Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'>, VariantProps<typeof buttonVariants> {
+    dataTestId?: string;
     disabled?: boolean;
     endIcon?: ReactNode;
     errorMessage?: string | ReactNode;
-    onClick?: (event: MouseEvent<HTMLElement>) => void;
-    dataTestId?: string;
     label?: string;
+    onClick?: (event: MouseEvent<HTMLElement>) => void;
     size?: 'small' | 'default' | 'fullWidth';
     startIcon?: ReactNode;
     state?: 'default' | 'error' | 'loading';
@@ -20,7 +20,7 @@ export interface ButtonProps extends AsChildProp, Omit<ButtonHTMLAttributes<HTML
     variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'unstyled';
 }
 export declare const Button: {
-    ({ ref, asChild, className, dataTestId, disabled, endIcon, errorMessage, label, onClick, size, startIcon, state, type, variant, children, ...props }: ButtonProps & {
+    ({ asChild, children, className, dataTestId, disabled, endIcon, errorMessage, label, onClick, ref, size, startIcon, state, type, variant, ...props }: ButtonProps & {
         ref?: Ref<HTMLButtonElement>;
     }): import("react/jsx-runtime").JSX.Element;
     displayName: string;

package/dist/Button.js

@@ -1,13 +1,78 @@
 "use client";
 import "./styles/main.css";
-import { jsxs as g, jsx as n, Fragment as k } from "react/jsx-runtime";
-import { Slot as z } from "./primitives/slot.js";
-import { ErrorMessage as B } from "./utils/formFieldUtils.js";
-import { cn as a } from "./utils/twUtils.js";
-import { c as E } from "./index-D29mdTf5.js";
-import { isValidElement as V, Children as D } from "react";
-import { c as L } from "./createLucideIcon-D4r5Phnh.js";
-const S = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]], q = L("loader-circle", S), A = E(
+import { jsxs as g, jsx as n, Fragment as z } from "react/jsx-runtime";
+import "./Icons/AnalyzeIcon.js";
+import "./Icons/AnnotationsIcon.js";
+import "./Icons/ApprovedIcon.js";
+import "./Icons/ArrowDownIcon.js";
+import "./Icons/ArrowUpIcon.js";
+import "./Icons/CalendarIcon.js";
+import "./Icons/CheckCircleIcon.js";
+import "./Icons/CheckSquareIcon.js";
+import "./Icons/CheckmarkIcon.js";
+import "./Icons/ChevronDownIcon.js";
+import "./Icons/ChevronUpIcon.js";
+import "./Icons/ClockIcon.js";
+import "./Icons/CloseCircleIcon.js";
+import "./Icons/CloseIcon.js";
+import "./Icons/DashboardIcon.js";
+import "./Icons/DatabaseIcon.js";
+import "./Icons/DeleteIcon.js";
+import "./Icons/DurationIcon.js";
+import "./Icons/EditIcon.js";
+import "./Icons/EmailIcon.js";
+import "./Icons/EraserIcon.js";
+import "./Icons/ErrorIcon.js";
+import "./Icons/EyeClosedIcon.js";
+import "./Icons/EyeClosedIcon2.js";
+import "./Icons/EyeOpenIcon.js";
+import "./Icons/GoToFirstIcon.js";
+import "./Icons/GoToLastIcon.js";
+import "./Icons/HarmonicCursorsIcon.js";
+import "./Icons/InfoIcon.js";
+import "./Icons/KeyboardIcon.js";
+import "./Icons/LabelIcon.js";
+import "./Icons/LassoIcon.js";
+import "./Icons/LineToolIcon.js";
+import "./Icons/LineToolIcon2.js";
+import "./Icons/LiveViewIcon.js";
+import { LoaderIcon as B } from "./Icons/LoaderIcon.js";
+import "./Icons/LocationIcon.js";
+import "./Icons/LogoutIcon.js";
+import "./Icons/MeasureIcon.js";
+import "./Icons/MessagesIcon.js";
+import "./Icons/MetadataIcon.js";
+import "./Icons/MinusIcon.js";
+import "./Icons/OntologyIcon.js";
+import "./Icons/PanelIconClose.js";
+import "./Icons/PanelIconOpen.js";
+import "./Icons/PlayIcon.js";
+import "./Icons/PlusIcon.js";
+import "./Icons/ResetIcon.js";
+import "./Icons/ReviewedIcon.js";
+import "./Icons/ScissorsIcon.js";
+import "./Icons/SearchIcon.js";
+import "./Icons/SettingsIcon.js";
+import "./Icons/SortAscendingIcon.js";
+import "./Icons/SortAtoZIcon.js";
+import "./Icons/SortDescendingIcon.js";
+import "./Icons/SortZtoAIcon.js";
+import "./Icons/StackIcon.js";
+import "./Icons/StarIcon.js";
+import "./Icons/TrashIcon.js";
+import "./Icons/UndoIcon.js";
+import "./Icons/User2Icon.js";
+import "./Icons/UserIcon.js";
+import "./Icons/WarningIcon.js";
+import "./Icons/ZoomAllIcon.js";
+import "./Icons/ZoomXIcon.js";
+import "./Icons/ZoomYIcon.js";
+import { Slot as E } from "./primitives/slot.js";
+import { ErrorMessage as V } from "./utils/formFieldUtils.js";
+import { cn as i } from "./utils/twUtils.js";
+import { c as _ } from "./index-D29mdTf5.js";
+import { isValidElement as D, Children as S } from "react";
+const q = _(
   `
     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 disabled:pointer-events-none
@@ -41,25 +106,25 @@ const S = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]], q = L
       size: "default"
     }
   }
-), F = ({
-  ref: x,
-  asChild: h = !1,
-  className: v,
-  dataTestId: m,
+), A = ({
+  asChild: c = !1,
+  children: a,
+  className: x,
+  dataTestId: v,
   disabled: r,
   endIcon: b,
-  errorMessage: s,
-  label: y,
-  onClick: f,
-  size: d,
-  startIcon: u,
-  state: e,
+  errorMessage: d,
+  label: h,
+  onClick: y,
+  ref: f,
+  size: s,
+  startIcon: p,
+  state: o,
   type: w = "button",
-  variant: o = "primary",
-  children: i,
+  variant: e = "primary",
   ...C
 }) => {
-  const l = {
+  const u = {
     error: {
       primary: "bg-button-danger border-button-danger text-text-primary hover:bg-button-danger--hover hover:text-text-primary",
       secondary: "bg-button-danger border-button-danger text-text-primary hover:bg-button-danger--hover hover:text-text-primary",
@@ -74,44 +139,41 @@ const S = [["path", { d: "M21 12a9 9 0 1 1-6.219-8.56", key: "13zald" }]], q = L
       ghost: "bg-transparent text-button-ghost-text--disabled pointer-events-none",
       unstyled: "bg-transparent opacity-50 pointer-events-none"
     }
-  }, N = a(A({ variant: o, state: e, size: d }), e === "error" && l.error[o], e === "loading" && l.loading[o], v), t = h && V(i) && D.count(i) === 1, p = t ? void 0 : i ?? y;
-  if (!t && !p)
+  }, N = i(q({ variant: e, state: o, size: s }), o === "error" && u.error[e], o === "loading" && u.loading[e], x), t = c && D(a) && S.count(a) === 1, l = t ? void 0 : a ?? h;
+  if (!t && !l)
     throw new Error("Button requires either `label` or `children`");
-  const j = (c) => {
-    r && (c.preventDefault(), c.stopPropagation());
-  }, _ = t ? z : "button";
-  return /* @__PURE__ */ g("div", { className: a("flex flex-col justify-items-center", d), children: [
+  const j = (m) => {
+    r && (m.preventDefault(), m.stopPropagation());
+  }, k = t ? E : "button";
+  return /* @__PURE__ */ g("div", { className: i("flex flex-col justify-items-center", s), children: [
     /* @__PURE__ */ n(
-      _,
+      k,
       {
         "aria-disabled": r,
-        className: a(N, t && "no-underline! before:content-none after:content-none", t && r && "pointer-events-none opacity-50"),
-        "data-spectral": "button",
-        "data-spectral-variant": o,
-        "data-spectral-size": d ?? "default",
-        "data-spectral-state": e ?? "default",
+        className: i(N, t && "no-underline! before:content-none after:content-none", t && r && "pointer-events-none opacity-50"),
         "data-as-child": t ? "true" : void 0,
-        "data-state": e,
-        "data-testid": m || `spectral-button-${o}`,
+        "data-state": o,
+        "data-testid": v ?? `spectral-button-${e}`,
+        "data-variant": e,
         disabled: t ? void 0 : r,
+        onClick: y,
         onClickCapture: t ? j : void 0,
-        onClick: f,
-        ref: x,
+        ref: f,
         tabIndex: t && r ? -1 : void 0,
         type: t ? void 0 : w,
         ...C,
-        children: t ? i : /* @__PURE__ */ g(k, { children: [
-          u && /* @__PURE__ */ n("span", { className: a("flex", o !== "unstyled" && "pr-1"), "aria-hidden": !0, "data-testid": "spectral-button-start-icon", children: u }),
-          e === "loading" && /* @__PURE__ */ n(q, { className: "ml-2 animate-spin", size: 16 }),
-          p,
-          b && e !== "loading" && /* @__PURE__ */ n("span", { className: a("flex", o !== "unstyled" && "pl-2"), "aria-hidden": !0, "data-testid": "spectral-button-end-icon", children: b })
+        children: t ? a : /* @__PURE__ */ g(z, { children: [
+          p && /* @__PURE__ */ n("span", { className: i("flex", e !== "unstyled" && "pr-1"), "aria-hidden": !0, "data-testid": "spectral-button-start-icon", children: p }),
+          o === "loading" && /* @__PURE__ */ n(B, { className: "ml-2 motion-safe:animate-spin", size: 16 }),
+          l,
+          b && o !== "loading" && /* @__PURE__ */ n("span", { className: i("flex", e !== "unstyled" && "pl-2"), "aria-hidden": !0, "data-testid": "spectral-button-end-icon", children: b })
         ] })
       }
     ),
-    e === "error" && s && /* @__PURE__ */ n(B, { message: s, dataTestId: "spectral-button-error-message", id: "button-error" })
+    o === "error" && d && /* @__PURE__ */ n(V, { message: d, dataTestId: "spectral-button-error-message", id: "button-error" })
   ] });
 };
-F.displayName = "Button";
+A.displayName = "Button";
 export {
-  F as Button
+  A as Button
 };

package/dist/ButtonGroup/ButtonGroupButton.d.ts

@@ -5,7 +5,7 @@ export declare const buttonVariants: (props?: ({
     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> & {
+    ({ asChild, className, size, variant, ...props }: ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
         asChild?: boolean;
     }): import("react/jsx-runtime").JSX.Element;
     displayName: string;

package/dist/ButtonGroup/ButtonGroupButton.js

@@ -29,12 +29,12 @@ const c = l(
     }
   }
 ), u = ({
-  className: i,
-  variant: t,
-  size: e,
-  asChild: o = !1,
+  asChild: i = !1,
+  className: o,
+  size: t,
+  variant: e,
   ...s
-}) => /* @__PURE__ */ n(o ? a : "button", { "data-slot": "button-group-item", "data-variant": t, "data-size": e, className: r(c({ variant: t, size: e, className: i })), ...s });
+}) => /* @__PURE__ */ n(i ? a : "button", { className: r(c({ variant: e, size: t, className: o })), "data-size": t, "data-slot": "button-group-item", "data-variant": e, ...s });
 u.displayName = "ButtonGroupButton";
 export {
   u as ButtonGroupButton,

package/dist/ButtonGroup.d.ts

@@ -6,21 +6,21 @@ export declare const buttonGroupVariants: (props?: ({
     orientation?: "horizontal" | "vertical" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export declare const ButtonGroup: {
-    ({ className, orientation, variant, size, children, ...props }: ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants> & {
-        variant?: "default" | "outline";
+    ({ children, className, orientation, size, variant, ...props }: ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants> & {
         size?: "md" | "sm" | "lg" | "icon-md" | "icon-sm" | "icon-lg";
+        variant?: "default" | "outline";
     }): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export declare const ButtonGroupItem: {
-    ({ children, className, size, variant, asChild, ...props }: ComponentProps<"button"> & {
+    ({ asChild, children, className, size, variant, ...props }: ComponentProps<"button"> & {
+        asChild?: boolean;
         size?: "sm" | "md" | "lg" | "icon-sm" | "icon-md" | "icon-lg";
         variant?: "default" | "outline";
-        asChild?: boolean;
     }): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
-export declare const ButtonGroupText: ({ className, asChild, ...props }: ComponentProps<"div"> & {
+export declare const ButtonGroupText: ({ asChild, className, ...props }: ComponentProps<"div"> & {
     asChild?: boolean;
 }) => import("react/jsx-runtime").JSX.Element;
 export declare const ButtonGroupSeparator: {