@spear-ai/spectral 1.4.4 → 1.4.6

package/dist/Alert/AlertBase.d.ts

@@ -1,6 +1,6 @@
 import { VariantProps } from 'class-variance-authority';
 import { HTMLAttributes, ReactNode } from 'react';
-declare const titleIconColors: {
+declare const variantColors: {
     success: string;
     warning: string;
     danger: string;
@@ -11,9 +11,11 @@ export declare const AlertBase: import('react').ForwardRefExoticComponent<HTMLAt
     variant?: "default" | "success" | "warning" | "danger" | "info" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string> & import('react').RefAttributes<HTMLDivElement>>;
 export declare const AlertTitle: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLHeadingElement> & {
-    variant: keyof typeof titleIconColors;
+    variant: keyof typeof variantColors;
+} & import('react').RefAttributes<HTMLParagraphElement>>;
+export declare const AlertDescription: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & {
+    variant: keyof typeof variantColors;
 } & import('react').RefAttributes<HTMLParagraphElement>>;
-export declare const AlertDescription: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & import('react').RefAttributes<HTMLParagraphElement>>;
 type AlertPortalProps = {
     children: ReactNode;
     container?: Element | DocumentFragment;

package/dist/Alert/AlertBase.js

@@ -1,46 +1,46 @@
 "use client";
 import "../styles/main.css";
-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 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
+import { jsx as s } from "react/jsx-runtime";
+import { cn as l } from "../utils/twUtils.js";
+import { c as o } from "../index-D29mdTf5.js";
+import { forwardRef as i, useState as d, useEffect as c } from "react";
+import { createPortal as f } from "react-dom";
+const g = o(
+  `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 [&>svg]items-start 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`,
   {
     variants: {
       variant: {
-        default: "bg-alert-bg text-alert-text border-alert-border",
-        success: "bg-alert-success-bg border-alert-success-border [&>svg]:!text-alert-success-text [&>svg]items-start",
-        warning: "bg-alert-warning-bg border-alert-warning-border [&>svg]:!text-alert-warning-text [&_[data-slot='alert-title']]:!text-alert-warning-text",
-        danger: "bg-alert-danger-bg border-alert-danger-border [&>svg]:!text-alert-danger-text [&_[data-slot='alert-title']]:!text-alert-danger-text",
-        info: "bg-alert-info-bg border-alert-info-border [&>svg]:!text-alert-info-text [&_[data-slot='alert-title']]:!text-alert-info-text"
+        default: "bg-alert-bg border-alert-border",
+        success: "bg-alert-success-bg border-alert-success-border",
+        warning: "bg-alert-warning-bg border-alert-warning-border",
+        danger: "bg-alert-danger-bg border-alert-danger-border",
+        info: "bg-alert-info-bg border-alert-info-border"
       }
     },
     defaultVariants: {
       variant: "default"
     }
   }
-), x = {
-  success: "text-alert-success-text",
-  warning: "text-alert-warning-text",
-  danger: "text-alert-danger-text",
-  info: "text-alert-info-text",
-  default: "text-alert-text"
-}, f = i(({ className: t, variant: e, ...a }, r) => /* @__PURE__ */ l("div", { className: s(g({ variant: e }), t), "data-slot": "alert", "data-testid": "spectral-alert", ref: r, role: "alert", ...a }));
-f.displayName = "AlertBase";
-const m = i(({ className: t, variant: e, ...a }, r) => /* @__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: r, ...a }));
-m.displayName = "AlertTitle";
-const u = i(({ className: t, ...e }, a) => /* @__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: a, ...e }));
-u.displayName = "AlertDescription";
-function A({ children: t, container: e }) {
-  const [a, r] = o(!1);
-  return d(() => (r(!0), () => r(!1)), []), a ? c(t, e ?? document.body) : null;
+), n = {
+  success: "text-alert-success-text [&_p]:!text-alert-success-text",
+  warning: "text-alert-warning-text [&_p]:!text-alert-warning-text",
+  danger: "text-alert-danger-text [&_p]:!text-alert-danger-text",
+  info: "text-alert-info-text [&_p]:!text-alert-info-text",
+  default: "text-alert-text [&_p]:!text-alert-text"
+}, m = i(({ className: e, variant: r, ...a }, t) => /* @__PURE__ */ s("div", { className: l(g({ variant: r }), e), "data-slot": "alert", "data-testid": "spectral-alert", ref: t, role: "alert", ...a }));
+m.displayName = "AlertBase";
+const x = i(({ className: e, variant: r, ...a }, t) => /* @__PURE__ */ s("div", { className: l(n[r], "col-start-2 line-clamp-1 min-h-4 font-semibold text-base tracking-tight h-6 flex items-center", e), "data-slot": "alert-title", "data-testid": "spectral-alert-title", ref: t, ...a }));
+x.displayName = "AlertTitle";
+const p = i(({ className: e, variant: r, ...a }, t) => /* @__PURE__ */ s("div", { className: l(n[r], "col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed", e), "data-slot": "alert-description", "data-testid": "spectral-alert-description", ref: t, ...a }));
+p.displayName = "AlertDescription";
+function _({ children: e, container: r }) {
+  const [a, t] = d(!1);
+  return c(() => (t(!0), () => t(!1)), []), a ? f(e, r ?? document.body) : null;
 }
 export {
-  f as AlertBase,
-  u as AlertDescription,
-  A as AlertPortal,
-  m as AlertTitle
+  m as AlertBase,
+  p as AlertDescription,
+  _ as AlertPortal,
+  x as AlertTitle
 };

package/dist/Alert.js

@@ -1,7 +1,7 @@
 "use client";
 import "./styles/main.css";
 import { jsx as t, jsxs as m } from "react/jsx-runtime";
-import { AlertPortal as y, AlertBase as h, AlertTitle as v, AlertDescription as A } from "./Alert/AlertBase.js";
+import { AlertPortal as y, AlertBase as h, AlertTitle as A, AlertDescription as v } from "./Alert/AlertBase.js";
 import "./Icons/AnalyzeIcon.js";
 import "./Icons/AnnotationsIcon.js";
 import "./Icons/ApprovedIcon.js";
@@ -61,34 +61,34 @@ import "./Icons/ZoomXIcon.js";
 import "./Icons/ZoomYIcon.js";
 import { cn as g } from "./utils/twUtils.js";
 import { useRef as R, useEffect as T } from "react";
-const Vt = ({ id: n, description: a, onClose: s, icon: l, title: c, className: d, variant: o = "default" }) => {
-  const r = R(null), u = l || {
+const Vt = ({ id: n, description: s, onClose: a, icon: l, title: c, className: d, variant: r = "default" }) => {
+  const o = R(null), u = l || {
     info: /* @__PURE__ */ t(E, {}),
     success: /* @__PURE__ */ t(w, {}),
     warning: /* @__PURE__ */ t(N, {}),
     danger: /* @__PURE__ */ t(b, {}),
     default: null
-  }[o];
+  }[r];
   T(() => {
     const e = (p) => {
-      p.key === "Escape" && r.current && (p.preventDefault(), i());
+      p.key === "Escape" && o.current && (p.preventDefault(), i());
     };
     return document.addEventListener("keydown", e), () => {
       document.removeEventListener("keydown", e);
     };
   }, []);
   const i = () => {
-    r.current && (r.current.style.opacity = "0", setTimeout(() => {
-      r.current && (r.current.style.display = "none"), s?.();
+    o.current && (o.current.style.opacity = "0", setTimeout(() => {
+      o.current && (o.current.style.display = "none"), a?.();
     }, 300));
   }, f = () => {
     i();
-  }, I = (/* @__PURE__ */ new Set(["danger", "warning"])).has(o) ? "assertive" : "polite";
-  return /* @__PURE__ */ t(y, { children: /* @__PURE__ */ m(h, { "aria-live": I, className: g("alert-wrapper transition-opacity duration-300", d), "data-slot": "alert", "data-variant": o, id: n, ref: r, variant: o, children: [
+  }, I = (/* @__PURE__ */ new Set(["danger", "warning"])).has(r) ? "assertive" : "polite";
+  return /* @__PURE__ */ t(y, { children: /* @__PURE__ */ m(h, { "aria-live": I, className: g("alert-wrapper transition-opacity duration-300", d), "data-slot": "alert", "data-variant": r, id: n, ref: o, variant: r, children: [
     u,
     /* @__PURE__ */ m("div", { className: "content-wrapper", children: [
-      /* @__PURE__ */ t(v, { "data-slot": "alert-title", variant: o, children: c }),
-      /* @__PURE__ */ t(A, { "data-slot": "alert-description", children: a })
+      /* @__PURE__ */ t(A, { "data-slot": "alert-title", variant: r, children: c }),
+      /* @__PURE__ */ t(v, { "data-slot": "alert-description", variant: r, children: s })
     ] }),
     /* @__PURE__ */ t(
       C,

package/dist/Avatar.js

@@ -2,26 +2,26 @@
 import "./styles/main.css";
 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";
+import { useState as g, useEffect as v, isValidElement as w, cloneElement as p } from "react";
 const y = {
   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"
+  sm: "text-xs",
+  md: "text-base",
+  lg: "text-xl"
 }, b = {
   sm: 24,
   md: 32,
   lg: 40
 }, j = (l) => {
-  const i = l.trim();
-  if (!i) return "?";
-  const t = i.split(/\s+/).filter(Boolean);
+  const o = l.trim();
+  if (!o) return "?";
+  const t = o.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");
+}, k = ({ alt: l, className: o, icon: t, imageSource: a, fallback: i, size: n = "md", userFullName: c }) => {
+  const [m, d] = g("loading");
   v(() => {
     if (!a) return;
     d("loading");
@@ -32,7 +32,7 @@ const y = {
   }, [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) });
+      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 font-stretch-condensed", 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) ? (() => {
@@ -41,18 +41,18 @@ const y = {
           "aria-hidden": "true"
         };
         if (t.type.displayName?.includes("Icon") ?? !1) {
-          const g = {
+          const x = {
             ...u,
             size: e
           };
-          return p(t, g);
+          return p(t, x);
         }
         return p(t, u);
       })() : t });
     }
-    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 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" && i ? /* @__PURE__ */ r("span", { className: "flex items-center justify-center w-full h-full", "data-testid": "spectral-avatar-img-error-fallback", children: i }) : i ? /* @__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: i }) : /* @__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__ */ 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() });
+  return /* @__PURE__ */ r("div", { className: s("relative inline-flex items-center justify-center overflow-hidden rounded-full shrink-0 bg-level-two", y[n], o), "data-slot": "avatar", "data-testid": "spectral-avatar", children: h() });
 };
 export {
   k as Avatar

package/dist/Button.js

@@ -5,13 +5,7 @@ import { ErrorMessage as y } from "./utils/formFieldUtils.js";
 import { cn as u } from "./utils/twUtils.js";
 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.
- */
+import { c as N } from "./createLucideIcon-D4r5Phnh.js";
 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

package/dist/ButtonGroup/ButtonGroupButton.js

@@ -6,7 +6,7 @@ import { c } from "../index-D29mdTf5.js";
 import "react";
 const l = c(
   `inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-[var(--radius,0.375rem)] text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none
-  [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-accent focus-visible:outline-offset-2 focus-visible:outline-2 focus-visitble:outline-accent
+  [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-accent focus-visible:outline-offset-2 focus-visible:outline-2 focus-visible:outline-accent
   aria-invalid:ring-destructive/20 aria-invalid:border-destructive bg-level-one text-text-primary hover:bg-level-two cursor-pointer active:text-accent`,
   {
     variants: {

package/dist/Dialog.js

@@ -3,19 +3,19 @@ import { jsx as o, Fragment as n } from "react/jsx-runtime";
 import { DialogBase as g, DialogCloseBase as c, DialogContentBase as f, DialogDescriptionBase as u, DialogFooterBase as m, DialogHeaderBase as p, DialogOverlayBase as D, DialogPortalBase as x, DialogTitleBase as T, DialogTriggerBase as B } from "./Dialog/DialogBase.js";
 import { cn as l } from "./utils/twUtils.js";
 import "react";
-function h({ ...a }) {
+function v({ ...a }) {
   return /* @__PURE__ */ o(g, { "data-slot": "dialog", "data-testid": "spectral-dialog", ...a });
 }
-function v({ dataTestId: a, ...t }) {
-  return /* @__PURE__ */ o(B, { asChild: !0, "data-slot": "dialog-trigger", dataTestId: a || "dialog-trigger", ...t });
+function w({ dataTestId: a, ...t }) {
+  return /* @__PURE__ */ o(B, { "data-slot": "dialog-trigger", dataTestId: a || "dialog-trigger", ...t });
 }
-function w({ ...a }) {
+function h({ ...a }) {
   return /* @__PURE__ */ o(x, { "data-slot": "dialog-portal", "data-testid": "dialog-portal", ...a });
 }
-function C({ dataTestId: a, ...t }) {
+function z({ dataTestId: a, ...t }) {
   return /* @__PURE__ */ o(c, { "data-slot": "dialog-close", dataTestId: a || "dialog-close", ...t });
 }
-function z({ className: a, dataTestId: t, ...e }) {
+function C({ className: a, dataTestId: t, ...e }) {
   return /* @__PURE__ */ o(
     D,
     {
@@ -65,14 +65,14 @@ function P({ className: a, dataTestId: t, ...e }) {
   return /* @__PURE__ */ o(u, { className: l("text-muted-foreground text-sm", a), "data-slot": "dialog-description", dataTestId: t || "dialog-description", ...e });
 }
 export {
-  h as Dialog,
-  C as DialogClose,
+  v as Dialog,
+  z as DialogClose,
   F as DialogContent,
   P as DialogDescription,
   H as DialogFooter,
   j as DialogHeader,
-  z as DialogOverlay,
-  w as DialogPortal,
+  C as DialogOverlay,
+  h as DialogPortal,
   O as DialogTitle,
-  v as DialogTrigger
+  w as DialogTrigger
 };

package/dist/Drawer.d.ts

@@ -1,13 +1,16 @@
 import { ReactNode } from 'react';
 export type DrawerProps = {
     children?: ReactNode;
+    defaultOpen?: boolean;
     description?: string;
     direction?: 'left' | 'right' | 'top' | 'bottom';
+    dismissible?: boolean;
+    modal?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    open?: boolean;
     size?: string;
     title?: string;
     trigger: ReactNode;
-    open?: boolean;
-    onOpenChange?: (open: boolean) => void;
 };
-export declare const Drawer: ({ trigger, title, description, children, direction, size }: DrawerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Drawer: ({ children, defaultOpen, description, direction, dismissible, modal, onOpenChange, open, size, title, trigger }: DrawerProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Drawer.d.ts.map

package/dist/Drawer.js

@@ -1,9 +1,9 @@
 import "./styles/main.css";
 import { jsx as t, jsxs as s } from "react/jsx-runtime";
-import { SpectralProvider as x } from "./SpectralProvider.js";
+import { SpectralProvider as f } from "./SpectralProvider.js";
 import { D as e } from "./index-CAKA12cC.js";
-const b = ({ trigger: d, title: o, description: i, children: c, direction: l = "right", size: r = "380px" }) => {
-  const a = "!font-sans fixed", p = {
+const u = ({ children: d, defaultOpen: o = !1, description: i, direction: l = "right", dismissible: c = !0, modal: p = !0, onOpenChange: n, open: m, size: r = "380px", title: x, trigger: h }) => {
+  const a = "!font-sans fixed", w = {
     left: {
       className: `${a} top-0 bottom-0 left-0 shadow-[20px_0_20px_rgba(0,0,0,0.4)]`,
       style: { width: r }
@@ -20,20 +20,20 @@ const b = ({ trigger: d, title: o, description: i, children: c, direction: l = "
       className: `${a} bottom-0 left-0 right-0 shadow-[0_-20px_20px_rgba(0,0,0,0.4)]`,
       style: { height: r }
     }
-  }, { className: n, style: m } = p[l];
-  return /* @__PURE__ */ t(x, { children: /* @__PURE__ */ s(e.Root, { direction: l, "data-testid": "spectral-drawer", children: [
-    /* @__PURE__ */ t(e.Trigger, { asChild: !0, "data-testid": "spectral-drawer-trigger", children: d }),
+  }, { className: g, style: b } = w[l];
+  return /* @__PURE__ */ t(f, { children: /* @__PURE__ */ s(e.Root, { defaultOpen: o, dismissible: c, open: m, onOpenChange: n, direction: l, modal: p, "data-testid": "spectral-drawer", children: [
+    /* @__PURE__ */ t(e.Trigger, { asChild: !0, "data-testid": "spectral-drawer-trigger", children: h }),
     /* @__PURE__ */ s(e.Portal, { children: [
       /* @__PURE__ */ t(e.Overlay, { className: "fixed inset-0 bg-transparent", "data-testid": "spectral-drawer-overlay" }),
-      /* @__PURE__ */ t(e.Content, { asChild: !0, className: `bg-drawer-bg z-10 flex flex-col outline-none [&_*]:box-border ${n}`, style: m, "data-testid": "spectral-drawer-content", children: /* @__PURE__ */ s("div", { children: [
+      /* @__PURE__ */ t(e.Content, { asChild: !0, className: `bg-drawer-bg z-10 flex flex-col outline-none [&_*]:box-border ${g}`, style: b, "data-testid": "spectral-drawer-content", children: /* @__PURE__ */ s("div", { children: [
         /* @__PURE__ */ t(e.Close, {}),
-        /* @__PURE__ */ t(e.Title, { className: "text-text-primary px-3 pt-4 text-lg font-medium", "data-testid": "spectral-drawer-title", children: o }),
+        /* @__PURE__ */ t(e.Title, { className: "text-text-primary px-3 pt-4 text-lg font-medium", "data-testid": "spectral-drawer-title", children: x }),
         /* @__PURE__ */ t(e.Description, { className: "!text-text-secondary mb-2 px-3 !text-xs uppercase", "data-testid": "spectral-drawer-description", children: i }),
-        /* @__PURE__ */ t("div", { className: "py-2 px-3 min-w-0 w-auto overflow-hidden [&>*]:min-w-0 [&_*]:min-w-0", "data-testid": "spectral-drawer-body", children: c })
+        /* @__PURE__ */ t("div", { className: "py-2 px-3 min-w-0 w-auto overflow-hidden [&>*]:min-w-0 [&_*]:min-w-0", "data-testid": "spectral-drawer-body", children: d })
       ] }) })
     ] })
   ] }) });
 };
 export {
-  b as Drawer
+  u as Drawer
 };

package/dist/InputOTP.js

@@ -280,6 +280,7 @@ const St = ht({}), Pt = ht(null), Ct = () => {
         onChange: E,
         onComplete: A,
         onPaste: I,
+        pasteTransformer: (l) => l.replaceAll("-", ""),
         pushPasswordManagerStrategy: "none",
         ref: g,
         role: "textbox",

package/dist/MultiSelect/MultiSelectBase.js

@@ -61,13 +61,7 @@ import "../Icons/ZoomYIcon.js";
 import { ErrorMessage as me } from "../utils/formFieldUtils.js";
 import { cn as f } from "../utils/twUtils.js";
 import { forwardRef as be, useId as fe, useState as L, useRef as _, useMemo as T, useCallback as b, useEffect as ge } from "react";
-import { c as he } 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.
- */
+import { c as he } from "../createLucideIcon-D4r5Phnh.js";
 const xe = [
   ["path", { d: "m21 21-4.34-4.34", key: "14j7rj" }],
   ["circle", { cx: "11", cy: "11", r: "8", key: "4ej97u" }]

package/dist/RadioGroup.js

@@ -432,7 +432,7 @@ const B = he(
       "data-testid": "spectral-radio-group-item",
       className: F(
         "relative aspect-square h-4.5 w-4.5 rounded-full border-2 border-border-subtle bg-radio-bg ring-black transition-colors cursor-pointer",
-        "hover:border-radio-border--hover focus-visible:ring-1 focus-visible:ring-offset-2",
+        "hover:border-radio-border--hover focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-accent",
         "[&[data-state=checked]]:border-radio-border--selected [&[data-state=checked]]:bg-radio-bg",
         o && A,
         r

package/dist/Select.d.ts

@@ -3,7 +3,7 @@ import { ComponentPropsWithoutRef, ReactNode } from 'react';
 type SelectOption = BaseOption;
 type Align = 'start' | 'center' | 'end';
 type Side = 'top' | 'bottom' | 'left' | 'right';
-export interface SelectProps extends Omit<ComponentPropsWithoutRef<'button'>, 'value' | 'onChange'>, BaseFormFieldProps {
+export interface SelectProps extends Omit<ComponentPropsWithoutRef<'button'>, 'value' | 'onChange' | 'aria-disabled' | 'aria-invalid' | 'aria-required' | 'aria-describedby' | 'aria-label'>, BaseFormFieldProps {
     defaultValue?: string;
     emptyMessage?: ReactNode;
     id?: string;

package/dist/Select.js

@@ -1,6 +1,6 @@
 "use client";
 import "./styles/main.css";
-import { jsxs as r, jsx as e, Fragment as v } from "react/jsx-runtime";
+import { jsxs as r, jsx as t, Fragment as S } from "react/jsx-runtime";
 import "./Icons/AnalyzeIcon.js";
 import "./Icons/AnnotationsIcon.js";
 import "./Icons/ApprovedIcon.js";
@@ -8,7 +8,7 @@ import "./Icons/CalendarIcon.js";
 import "./Icons/CheckCircleIcon.js";
 import "./Icons/CheckSquareIcon.js";
 import { CheckmarkIcon as Q } from "./Icons/CheckmarkIcon.js";
-import { ChevronDownIcon as n } from "./Icons/ChevronDownIcon.js";
+import { ChevronDownIcon as c } from "./Icons/ChevronDownIcon.js";
 import "./Icons/ChevronUpIcon.js";
 import "./Icons/ClockIcon.js";
 import "./Icons/CloseCircleIcon.js";
@@ -59,11 +59,11 @@ import "./Icons/ZoomAllIcon.js";
 import "./Icons/ZoomXIcon.js";
 import "./Icons/ZoomYIcon.js";
 import { Label as C } from "./Label.js";
-import { R as X, T as Y, f as Z, e as _, C as $, c as ee, V as te, S as re, d as I, G as ae, I as ie, b as oe, a as se } from "./index-CevVJ05e.js";
-import { useFormFieldId as le, useFormFieldState as de, getAriaProps as me, getErrorMessageId as ne, groupOptions as pe, getFormFieldCSSProperties as ce, getStateClasses as ue, getTriggerClasses as he, ErrorMessage as ge, LoadingState as fe, EmptyState as be, getOptionClasses as xe } from "./utils/formFieldUtils.js";
-import { cn as o } from "./utils/twUtils.js";
-import { forwardRef as ye, useState as Ne } from "react";
-const Se = ye(
+import { R as X, T as Y, f as Z, e as _, C as $, c as tt, V as et, S as rt, d as I, G as at, I as st, b as it, a as ot } from "./index-CevVJ05e.js";
+import { useFormFieldId as lt, useFormFieldState as dt, getAriaProps as mt, getErrorMessageId as ct, groupOptions as pt, getFormFieldCSSProperties as nt, getStateClasses as ut, getTriggerClasses as ht, ErrorMessage as gt, LoadingState as bt, EmptyState as ft, getOptionClasses as xt } from "./utils/formFieldUtils.js";
+import { cn as i } from "./utils/twUtils.js";
+import { forwardRef as yt, useState as Nt } from "react";
+const vt = yt(
   ({
     align: w = "start",
     alignOffset: z = 0,
@@ -73,76 +73,76 @@ const Se = ye(
     emptyMessage: k = "No options found",
     errorMessage: p,
     id: L,
-    label: s,
-    labelClassName: c,
+    label: l,
+    labelClassName: n,
     loadingMessage: T = "Loading…",
     name: u,
     onChange: V,
     options: h = [],
-    placeholder: D = "Select an option",
-    position: E = "popper",
-    side: P = "bottom",
-    sideOffset: R = 4,
+    placeholder: q = "Select an option",
+    position: D = "popper",
+    side: E = "bottom",
+    sideOffset: P = 4,
     state: a = "default",
     value: g,
-    "aria-label": q,
+    "aria-label": R,
     "aria-describedby": B,
-    ...l
+    ...o
   }, G) => {
-    const [f, M] = Ne(!1), i = le(L, u), b = ne(i), { isDisabled: d, isLoading: x, isInvalid: A } = de(l.disabled, a), H = me(a, b, B), { groups: y, ungrouped: N } = pe(h), U = () => {
+    const [b, M] = Nt(!1), s = lt(L, u), f = ct(s), { isDisabled: d, isLoading: x, isInvalid: A } = dt(o.disabled, a), H = mt(a, B, o.required, f), { groups: y, ungrouped: N } = pt(h), U = () => {
       if (x)
-        return /* @__PURE__ */ e(fe, { message: T });
+        return /* @__PURE__ */ t(bt, { "data-testid": "spectral-select-loading", message: T });
       if (h.length === 0)
-        return /* @__PURE__ */ e(be, { message: k });
-      const S = (t) => {
-        const m = g === t.value;
-        return /* @__PURE__ */ r(ie, { className: o(xe(!!t.disabled, !1, m), "relative flex w-full cursor-pointer items-center"), disabled: t.disabled, value: t.value, children: [
-          /* @__PURE__ */ e(oe, { className: "block truncate", children: t.label }),
-          /* @__PURE__ */ e(se, { asChild: !0, children: /* @__PURE__ */ e("span", { className: "absolute right-2 flex h-4 w-4 items-center justify-center", children: /* @__PURE__ */ e(Q, { size: 16 }) }) })
-        ] }, t.value);
+        return /* @__PURE__ */ t(ft, { "data-testid": "spectral-select-empty", message: k });
+      const v = (e) => {
+        const m = g === e.value;
+        return /* @__PURE__ */ r(st, { className: i(xt(!!e.disabled, !1, m), "relative flex w-full cursor-pointer items-center"), "data-testid": "spectral-select-item", disabled: e.disabled, value: e.value, children: [
+          /* @__PURE__ */ t(it, { "data-testid": "spectral-select-item-text", className: "block truncate", children: e.label }),
+          /* @__PURE__ */ t(ot, { "data-testid": "spectral-select-item-selected-indicator", asChild: !0, children: /* @__PURE__ */ t("span", { className: "absolute right-2 flex h-4 w-4 items-center justify-center", children: /* @__PURE__ */ t(Q, { size: 16 }) }) })
+        ] }, e.value);
       };
-      return /* @__PURE__ */ r(v, { children: [
-        N.length > 0 && /* @__PURE__ */ r(v, { children: [
-          N.map(S),
-          Object.keys(y).length > 0 && /* @__PURE__ */ e(I, { className: "-mx-1 my-1 h-px bg-border-secondary" })
+      return /* @__PURE__ */ r(S, { children: [
+        N.length > 0 && /* @__PURE__ */ r(S, { children: [
+          N.map(v),
+          Object.keys(y).length > 0 && /* @__PURE__ */ t(I, { className: "-mx-1 my-1 h-px bg-border-secondary", "data-testid": "spectral-select-separator" })
         ] }),
-        Object.entries(y).map(([t, m], J) => /* @__PURE__ */ r(ae, { children: [
-          J > 0 && /* @__PURE__ */ e(I, { className: "-mx-1 my-1 h-px bg-border-secondary" }),
-          /* @__PURE__ */ e(C, { htmlFor: i, className: o("px-2 py-1.5 text-base font-semibold text-text-primary", c), children: t }),
-          m.map((K) => S(K))
-        ] }, t))
+        Object.entries(y).map(([e, m], J) => /* @__PURE__ */ r(at, { "data-testid": "spectral-select-group", children: [
+          J > 0 && /* @__PURE__ */ t(I, { className: "-mx-1 my-1 h-px bg-border-secondary", "data-testid": "spectral-select-group-separator" }),
+          /* @__PURE__ */ t(C, { "data-testid": "spectral-select-group-label", htmlFor: s, className: i("px-2 py-1.5 text-base font-semibold text-text-primary", n), children: e }),
+          m.map((K) => v(K))
+        ] }, e))
       ] });
     };
-    return /* @__PURE__ */ r("div", { className: "w-full", "data-testid": "spectral-select-wrapper", children: [
-      s && /* @__PURE__ */ e(C, { "data-testid": "spectral-select-label", htmlFor: i, className: o("block mb-4 text-text-primary", c, d && "text-text-secondary"), children: s }),
-      /* @__PURE__ */ r(X, { "data-testid": "spectral-select", defaultValue: j, disabled: d, name: u, onOpenChange: M, onValueChange: V, open: f, required: l.required, value: g, children: [
-        /* @__PURE__ */ e(
+    return /* @__PURE__ */ r("div", { className: "w-full", children: [
+      l && /* @__PURE__ */ t(C, { "data-testid": "spectral-select-label", htmlFor: s, className: i("block mb-4 text-text-primary", n, d && "text-text-secondary"), children: l }),
+      /* @__PURE__ */ r(X, { "data-testid": "spectral-select", defaultValue: j, disabled: d, name: u, onOpenChange: M, onValueChange: V, open: b, required: o.required, value: g, children: [
+        /* @__PURE__ */ t(
           Y,
           {
-            "aria-controls": i,
-            "aria-expanded": f,
-            "aria-label": q || s,
+            "aria-controls": s,
+            "aria-expanded": b,
+            "aria-label": R || l,
             asChild: !0,
-            className: o(he(!1, a), ue(a), F),
+            className: i(ht(!1, a), ut(a), F),
             "data-slot": "select-trigger",
             "data-state": a,
             "data-testid": "spectral-select-trigger",
-            id: i,
+            id: s,
             ref: G,
             role: "combobox",
-            style: ce(),
+            style: nt(),
             ...H,
-            ...l,
+            ...o,
             children: /* @__PURE__ */ r("button", { type: "button", disabled: d, children: [
-              /* @__PURE__ */ e(Z, { placeholder: D, className: "block truncate" }),
-              /* @__PURE__ */ e(_, { asChild: !0, children: /* @__PURE__ */ e("div", { className: "flex items-center", children: x ? /* @__PURE__ */ e(W, { size: 20 }) : /* @__PURE__ */ e(n, { className: "transition-transform duration-200 data-[state=open]:rotate-180", size: 20 }) }) })
+              /* @__PURE__ */ t(Z, { placeholder: q, className: "block truncate", "data-testid": "spectral-select-value" }),
+              /* @__PURE__ */ t(_, { asChild: !0, children: /* @__PURE__ */ t("div", { className: "flex items-center", children: x ? /* @__PURE__ */ t(W, { size: 20 }) : /* @__PURE__ */ t(c, { className: "transition-transform duration-200 data-[state=open]:rotate-180", size: 20 }) }) })
             ] })
           }
         ),
-        /* @__PURE__ */ e($, { align: w, alignOffset: z, "data-slot": "select-content", "data-testid": "spectral-select-content", asChild: !0, collisionPadding: O, position: E, side: P, sideOffset: R, children: /* @__PURE__ */ r(
+        /* @__PURE__ */ t($, { align: w, alignOffset: z, "data-slot": "select-content", "data-testid": "spectral-select-content", asChild: !0, collisionPadding: O, position: D, side: E, sideOffset: P, children: /* @__PURE__ */ r(
           "div",
           {
-            className: o(
+            className: i(
               "z-50 rounded-lg border border-input-border bg-input-bg shadow-md",
               "data-[state=open]:animate-in data-[state=closed]:animate-out",
               "data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
@@ -159,18 +159,18 @@ const Se = ye(
               width: "var(--radix-select-trigger-width)"
             },
             children: [
-              /* @__PURE__ */ e(ee, { className: "flex cursor-default items-center justify-center py-1", children: /* @__PURE__ */ e(n, { className: "rotate-180", size: 18 }) }),
-              /* @__PURE__ */ e(te, { asChild: !0, children: /* @__PURE__ */ e("div", { className: "p-1 max-h-96", style: { position: "relative", overflow: "hidden auto" }, children: U() }) }),
-              /* @__PURE__ */ e(re, { className: "flex cursor-default items-center justify-center py-1", children: /* @__PURE__ */ e(n, { size: 18 }) })
+              /* @__PURE__ */ t(tt, { className: "flex cursor-default items-center justify-center py-1", "data-testid": "spectral-select-scroll-up-button", children: /* @__PURE__ */ t(c, { className: "rotate-180", size: 18 }) }),
+              /* @__PURE__ */ t(et, { asChild: !0, children: /* @__PURE__ */ t("div", { className: "p-1 max-h-96", "data-testid": "spectral-select-items", style: { position: "relative", overflow: "hidden auto" }, children: U() }) }),
+              /* @__PURE__ */ t(rt, { className: "flex cursor-default items-center justify-center py-1", "data-testid": "spectral-select-scroll-down-button", children: /* @__PURE__ */ t(c, { size: 18 }) })
             ]
           }
         ) })
       ] }),
-      A && p && /* @__PURE__ */ e(ge, { "data-testid": "spectral-select-error-message", id: b, message: p })
+      A && p && /* @__PURE__ */ t(gt, { "data-testid": "spectral-select-error-message", id: f, message: p })
     ] });
   }
 );
-Se.displayName = "Select";
+vt.displayName = "Select";
 export {
-  Se as Select
+  vt as Select
 };