@epilot/spark-ui 0.12.1 → 0.12.3

package/dist/components/accordion.cjs

@@ -4,8 +4,8 @@ const require_chunk = require("../chunk-DY84GLCh.cjs");
 const require_icons_material_symbol = require("../icons/material-symbol.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react);
-let react_jsx_runtime = require("react/jsx-runtime");
 let _base_ui_react_accordion = require("@base-ui/react/accordion");
+let react_jsx_runtime = require("react/jsx-runtime");
 let cnfast = require("cnfast");
 //#region src/components/accordion.tsx
 function Accordion({ className, variant = "soft", ...props }) {

package/dist/components/accordion.js

@@ -2,8 +2,8 @@
 import { cn } from "../utils/cn.js";
 import { MaterialSymbol } from "../icons/material-symbol.js";
 import "react";
-import { jsx, jsxs } from "react/jsx-runtime";
 import { Accordion as Accordion$1 } from "@base-ui/react/accordion";
+import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/accordion.tsx
 function Accordion({ className, variant = "soft", ...props }) {
 	return /* @__PURE__ */ jsx(Accordion$1.Root, {

package/dist/components/attachment.d.cts

@@ -7,7 +7,7 @@ import { useRender } from "@base-ui/react/use-render";
 
 //#region src/components/attachment.d.ts
 declare const attachmentVariants: (props?: ({
-  size?: "sm" | "default" | "xs" | null | undefined;
+  size?: "default" | "sm" | "xs" | null | undefined;
   orientation?: "horizontal" | "vertical" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Attachment({

package/dist/components/attachment.d.ts

@@ -7,7 +7,7 @@ import { useRender } from "@base-ui/react/use-render";
 
 //#region src/components/attachment.d.ts
 declare const attachmentVariants: (props?: ({
-  size?: "sm" | "default" | "xs" | null | undefined;
+  size?: "default" | "sm" | "xs" | null | undefined;
   orientation?: "horizontal" | "vertical" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Attachment({

package/dist/components/bubble.d.cts

@@ -10,7 +10,7 @@ declare function BubbleGroup({
   ...props
 }: React$1.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
 declare const bubbleVariants: (props?: ({
-  variant?: "ghost" | "outline" | "default" | "secondary" | "muted" | "tinted" | "destructive" | null | undefined;
+  variant?: "ghost" | "default" | "outline" | "secondary" | "muted" | "tinted" | "destructive" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Bubble({
   variant,

package/dist/components/bubble.d.ts

@@ -10,7 +10,7 @@ declare function BubbleGroup({
   ...props
 }: React$1.ComponentProps<'div'>): import("react/jsx-runtime").JSX.Element;
 declare const bubbleVariants: (props?: ({
-  variant?: "ghost" | "outline" | "default" | "secondary" | "muted" | "tinted" | "destructive" | null | undefined;
+  variant?: "ghost" | "default" | "outline" | "secondary" | "muted" | "tinted" | "destructive" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Bubble({
   variant,

package/dist/components/button.d.cts

@@ -7,7 +7,7 @@ import { VariantProps } from "class-variance-authority";
 
 //#region src/components/button.d.ts
 declare const buttonVariants: (props?: ({
-  variant?: "secondary" | "destructive" | "primary" | "tertiary" | "bare" | null | undefined;
+  variant?: "bare" | "secondary" | "destructive" | "primary" | "tertiary" | null | undefined;
   color?: "accent" | "neutral" | "danger" | null | undefined;
   size?: "small" | "default" | "icon" | "medium" | "icon-small" | "icon-medium" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/components/button.d.ts

@@ -7,7 +7,7 @@ import { VariantProps } from "class-variance-authority";
 
 //#region src/components/button.d.ts
 declare const buttonVariants: (props?: ({
-  variant?: "secondary" | "destructive" | "primary" | "tertiary" | "bare" | null | undefined;
+  variant?: "bare" | "secondary" | "destructive" | "primary" | "tertiary" | null | undefined;
   color?: "accent" | "neutral" | "danger" | null | undefined;
   size?: "small" | "default" | "icon" | "medium" | "icon-small" | "icon-medium" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/components/callout.cjs

@@ -9,12 +9,13 @@ let react_jsx_runtime = require("react/jsx-runtime");
 let class_variance_authority = require("class-variance-authority");
 let cnfast = require("cnfast");
 //#region src/components/callout.tsx
-const calloutVariants = (0, class_variance_authority.cva)("group/callout flex w-full items-start gap-2 rounded-lg px-4 py-3 text-sm transition-[color,background-color,opacity,scale] duration-150 ease-out motion-reduce:transition-none starting:scale-95 starting:opacity-0", {
+const calloutVariants = (0, class_variance_authority.cva)("group/callout flex w-full items-start gap-2 rounded-lg px-4 py-3 text-sm transition-colors duration-150 ease-out motion-reduce:transition-none", {
 	variants: { variant: {
 		error: "bg-base-error-soft text-error",
 		success: "bg-base-success-soft text-success",
 		warning: "bg-base-warning-soft text-warning",
-		info: "bg-base-info-soft text-info"
+		info: "bg-base-info-soft text-info",
+		neutral: "bg-base-gray-soft text-gray"
 	} },
 	defaultVariants: { variant: "info" }
 });
@@ -34,6 +35,10 @@ const CALLOUT_ICONS = {
 	info: {
 		name: "info",
 		className: "text-info-light"
+	},
+	neutral: {
+		name: "info",
+		className: "text-gray-light"
 	}
 };
 const CalloutTitle = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
@@ -51,7 +56,8 @@ const CALLOUT_ACTION_COLORS = {
 	error: "bg-base-error-soft text-error hover:bg-red-a4 focus-visible:bg-red-a4",
 	success: "bg-base-success-soft text-success hover:bg-green-a4 focus-visible:bg-green-a4",
 	warning: "bg-base-warning-soft text-warning hover:bg-orange-a4 focus-visible:bg-orange-a4",
-	info: "bg-base-info-soft text-info hover:bg-blue-a4 focus-visible:bg-blue-a4"
+	info: "bg-base-info-soft text-info hover:bg-blue-a4 focus-visible:bg-blue-a4",
+	neutral: "bg-base-gray-soft text-gray hover:bg-gray-a4 focus-visible:bg-gray-a4"
 };
 const CalloutAction = ({ className, align = "start", ...props }) => {
 	const calloutVariant = react.useContext(CalloutVariantContext);

package/dist/components/callout.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"callout.cjs","names":["React","Button","MaterialSymbol"],"sources":["../../src/components/callout.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\nimport {\n  MaterialSymbol,\n  type MaterialSymbolIconName,\n} from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\nimport { Button, type ButtonProps } from './button'\n\ntype CalloutVariant = 'error' | 'info' | 'success' | 'warning'\n\nconst calloutVariants = cva(\n  'group/callout flex w-full items-start gap-2 rounded-lg px-4 py-3 text-sm transition-[color,background-color,opacity,scale] duration-150 ease-out motion-reduce:transition-none starting:scale-95 starting:opacity-0',\n  {\n    variants: {\n      variant: {\n        error: 'bg-base-error-soft text-error',\n        success: 'bg-base-success-soft text-success',\n        warning: 'bg-base-warning-soft text-warning',\n        info: 'bg-base-info-soft text-info',\n      },\n    },\n    defaultVariants: {\n      variant: 'info',\n    },\n  },\n)\n\nconst CALLOUT_ICONS: Record<\n  CalloutVariant,\n  { name: MaterialSymbolIconName; className: string }\n> = {\n  error: { name: 'cancel', className: 'text-error-light' },\n  success: { name: 'check_circle', className: 'text-success-light' },\n  warning: { name: 'warning', className: 'text-warning-light' },\n  info: { name: 'info', className: 'text-info-light' },\n}\n\ninterface CalloutProps\n  extends\n    React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof calloutVariants> {\n  /** Overrides the variant's default icon; the variant's color is kept. `false` renders no icon. */\n  icon?: MaterialSymbolIconName | false\n}\n\nconst CalloutTitle = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => (\n  <span\n    data-slot=\"callout-title\"\n    className={cn('text-base leading-5 font-semibold', className)}\n    {...props}\n  />\n)\n\nconst CalloutDescription = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLParagraphElement>) => (\n  <p\n    data-slot=\"callout-description\"\n    className={cn('text-sm', className)}\n    {...props}\n  />\n)\n\nconst CalloutVariantContext = React.createContext<CalloutVariant>('info')\n\nconst CALLOUT_ACTION_COLORS: Record<CalloutVariant, string> = {\n  error:\n    'bg-base-error-soft text-error hover:bg-red-a4 focus-visible:bg-red-a4',\n  success:\n    'bg-base-success-soft text-success hover:bg-green-a4 focus-visible:bg-green-a4',\n  warning:\n    'bg-base-warning-soft text-warning hover:bg-orange-a4 focus-visible:bg-orange-a4',\n  info: 'bg-base-info-soft text-info hover:bg-blue-a4 focus-visible:bg-blue-a4',\n}\n\ntype CalloutActionType = Omit<ButtonProps, 'styleVariant' | 'color'> & {\n  align?: 'start' | 'end'\n}\n\nconst CalloutAction = ({\n  className,\n  align = 'start',\n  ...props\n}: CalloutActionType) => {\n  const calloutVariant = React.useContext(CalloutVariantContext)\n\n  return (\n    <Button\n      data-slot=\"callout-action\"\n      size=\"small\"\n      styleVariant=\"surface\"\n      color=\"neutral\"\n      className={cn(\n        'mt-2 w-fit',\n        { 'self-start': align === 'start', 'self-end': align === 'end' },\n        CALLOUT_ACTION_COLORS[calloutVariant],\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nconst Callout = ({\n  variant = 'info',\n  icon,\n  className,\n  children,\n  ...props\n}: CalloutProps) => {\n  const variantIcon = CALLOUT_ICONS[variant ?? 'info']\n\n  return (\n    <CalloutVariantContext.Provider value={variant ?? 'info'}>\n      <div\n        data-slot=\"callout\"\n        className={cn(calloutVariants({ variant }), className)}\n        {...props}\n      >\n        {icon !== false && (\n          <MaterialSymbol\n            className={cn(\n              'inline-flex shrink-0 items-center [--spark-icon-size:calc(20px*var(--spark-scaling,1))]',\n              variantIcon?.className,\n            )}\n            name={icon ?? variantIcon.name}\n          />\n        )}\n        <div className=\"flex w-full min-w-0 flex-col gap-1\">{children}</div>\n      </div>\n    </CalloutVariantContext.Provider>\n  )\n}\n\nexport {\n  Callout,\n  CalloutAction,\n  CalloutDescription,\n  CalloutTitle,\n  calloutVariants,\n}\nexport type { CalloutProps, CalloutVariant }\n"],"mappings":";;;;;;;;;;;AAWA,MAAM,mBAAA,GAAA,yBAAA,KACJ,uNACA;CACE,UAAU,EACR,SAAS;EACP,OAAO;EACP,SAAS;EACT,SAAS;EACT,MAAM;CACR,EACF;CACA,iBAAiB,EACf,SAAS,OACX;AACF,CACF;AAEA,MAAM,gBAGF;CACF,OAAO;EAAE,MAAM;EAAU,WAAW;CAAmB;CACvD,SAAS;EAAE,MAAM;EAAgB,WAAW;CAAqB;CACjE,SAAS;EAAE,MAAM;EAAW,WAAW;CAAqB;CAC5D,MAAM;EAAE,MAAM;EAAQ,WAAW;CAAkB;AACrD;AAUA,MAAM,gBAAgB,EACpB,WACA,GAAG,YAEH,iBAAA,GAAA,kBAAA,KAAC,QAAD;CACE,aAAU;CACV,YAAA,GAAA,OAAA,IAAc,qCAAqC,SAAS;CAC5D,GAAI;AACL,CAAA;AAGH,MAAM,sBAAsB,EAC1B,WACA,GAAG,YAEH,iBAAA,GAAA,kBAAA,KAAC,KAAD;CACE,aAAU;CACV,YAAA,GAAA,OAAA,IAAc,WAAW,SAAS;CAClC,GAAI;AACL,CAAA;AAGH,MAAM,wBAAwBA,MAAM,cAA8B,MAAM;AAExE,MAAM,wBAAwD;CAC5D,OACE;CACF,SACE;CACF,SACE;CACF,MAAM;AACR;AAMA,MAAM,iBAAiB,EACrB,WACA,QAAQ,SACR,GAAG,YACoB;CACvB,MAAM,iBAAiBA,MAAM,WAAW,qBAAqB;CAE7D,OACE,iBAAA,GAAA,kBAAA,KAACC,0BAAAA,QAAD;EACE,aAAU;EACV,MAAK;EACL,cAAa;EACb,OAAM;EACN,YAAA,GAAA,OAAA,IACE,cACA;GAAE,cAAc,UAAU;GAAS,YAAY,UAAU;EAAM,GAC/D,sBAAsB,iBACtB,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,WAAW,EACf,UAAU,QACV,MACA,WACA,UACA,GAAG,YACe;CAClB,MAAM,cAAc,cAAc,WAAW;CAE7C,OACE,iBAAA,GAAA,kBAAA,KAAC,sBAAsB,UAAvB;EAAgC,OAAO,WAAW;YAChD,iBAAA,GAAA,kBAAA,MAAC,OAAD;GACE,aAAU;GACV,YAAA,GAAA,OAAA,IAAc,gBAAgB,EAAE,QAAQ,CAAC,GAAG,SAAS;GACrD,GAAI;aAHN,CAKG,SAAS,SACR,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,gBAAD;IACE,YAAA,GAAA,OAAA,IACE,2FACA,aAAa,SACf;IACA,MAAM,QAAQ,YAAY;GAC3B,CAAA,GAEH,iBAAA,GAAA,kBAAA,KAAC,OAAD;IAAK,WAAU;IAAsC;GAAc,CAAA,CAChE;;CACyB,CAAA;AAEpC"}
+{"version":3,"file":"callout.cjs","names":["React","Button","MaterialSymbol"],"sources":["../../src/components/callout.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\nimport {\n  MaterialSymbol,\n  type MaterialSymbolIconName,\n} from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\nimport { Button, type ButtonProps } from './button'\n\ntype CalloutVariant = 'error' | 'info' | 'neutral' | 'success' | 'warning'\n\nconst calloutVariants = cva(\n  'group/callout flex w-full items-start gap-2 rounded-lg px-4 py-3 text-sm transition-colors duration-150 ease-out motion-reduce:transition-none',\n  {\n    variants: {\n      variant: {\n        error: 'bg-base-error-soft text-error',\n        success: 'bg-base-success-soft text-success',\n        warning: 'bg-base-warning-soft text-warning',\n        info: 'bg-base-info-soft text-info',\n        neutral: 'bg-base-gray-soft text-gray',\n      },\n    },\n    defaultVariants: {\n      variant: 'info',\n    },\n  },\n)\n\nconst CALLOUT_ICONS: Record<\n  CalloutVariant,\n  { name: MaterialSymbolIconName; className: string }\n> = {\n  error: { name: 'cancel', className: 'text-error-light' },\n  success: { name: 'check_circle', className: 'text-success-light' },\n  warning: { name: 'warning', className: 'text-warning-light' },\n  info: { name: 'info', className: 'text-info-light' },\n  // no severity to signal, so it borrows info's glyph — pass `icon` to change it\n  // or `icon={false}` for a bare panel.\n  neutral: { name: 'info', className: 'text-gray-light' },\n}\n\ninterface CalloutProps\n  extends\n    React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof calloutVariants> {\n  /** Overrides the variant's default icon; the variant's color is kept. `false` renders no icon. */\n  icon?: MaterialSymbolIconName | false\n}\n\nconst CalloutTitle = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => (\n  <span\n    data-slot=\"callout-title\"\n    className={cn('text-base leading-5 font-semibold', className)}\n    {...props}\n  />\n)\n\nconst CalloutDescription = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLParagraphElement>) => (\n  <p\n    data-slot=\"callout-description\"\n    className={cn('text-sm', className)}\n    {...props}\n  />\n)\n\nconst CalloutVariantContext = React.createContext<CalloutVariant>('info')\n\nconst CALLOUT_ACTION_COLORS: Record<CalloutVariant, string> = {\n  error:\n    'bg-base-error-soft text-error hover:bg-red-a4 focus-visible:bg-red-a4',\n  success:\n    'bg-base-success-soft text-success hover:bg-green-a4 focus-visible:bg-green-a4',\n  warning:\n    'bg-base-warning-soft text-warning hover:bg-orange-a4 focus-visible:bg-orange-a4',\n  info: 'bg-base-info-soft text-info hover:bg-blue-a4 focus-visible:bg-blue-a4',\n  neutral:\n    'bg-base-gray-soft text-gray hover:bg-gray-a4 focus-visible:bg-gray-a4',\n}\n\ntype CalloutActionType = Omit<ButtonProps, 'styleVariant' | 'color'> & {\n  align?: 'start' | 'end'\n}\n\nconst CalloutAction = ({\n  className,\n  align = 'start',\n  ...props\n}: CalloutActionType) => {\n  const calloutVariant = React.useContext(CalloutVariantContext)\n\n  return (\n    <Button\n      data-slot=\"callout-action\"\n      size=\"small\"\n      styleVariant=\"surface\"\n      color=\"neutral\"\n      className={cn(\n        'mt-2 w-fit',\n        { 'self-start': align === 'start', 'self-end': align === 'end' },\n        CALLOUT_ACTION_COLORS[calloutVariant],\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nconst Callout = ({\n  variant = 'info',\n  icon,\n  className,\n  children,\n  ...props\n}: CalloutProps) => {\n  const variantIcon = CALLOUT_ICONS[variant ?? 'info']\n\n  return (\n    <CalloutVariantContext.Provider value={variant ?? 'info'}>\n      <div\n        data-slot=\"callout\"\n        className={cn(calloutVariants({ variant }), className)}\n        {...props}\n      >\n        {icon !== false && (\n          <MaterialSymbol\n            className={cn(\n              'inline-flex shrink-0 items-center [--spark-icon-size:calc(20px*var(--spark-scaling,1))]',\n              variantIcon?.className,\n            )}\n            name={icon ?? variantIcon.name}\n          />\n        )}\n        <div className=\"flex w-full min-w-0 flex-col gap-1\">{children}</div>\n      </div>\n    </CalloutVariantContext.Provider>\n  )\n}\n\nexport {\n  Callout,\n  CalloutAction,\n  CalloutDescription,\n  CalloutTitle,\n  calloutVariants,\n}\nexport type { CalloutProps, CalloutVariant }\n"],"mappings":";;;;;;;;;;;AAWA,MAAM,mBAAA,GAAA,yBAAA,KACJ,kJACA;CACE,UAAU,EACR,SAAS;EACP,OAAO;EACP,SAAS;EACT,SAAS;EACT,MAAM;EACN,SAAS;CACX,EACF;CACA,iBAAiB,EACf,SAAS,OACX;AACF,CACF;AAEA,MAAM,gBAGF;CACF,OAAO;EAAE,MAAM;EAAU,WAAW;CAAmB;CACvD,SAAS;EAAE,MAAM;EAAgB,WAAW;CAAqB;CACjE,SAAS;EAAE,MAAM;EAAW,WAAW;CAAqB;CAC5D,MAAM;EAAE,MAAM;EAAQ,WAAW;CAAkB;CAGnD,SAAS;EAAE,MAAM;EAAQ,WAAW;CAAkB;AACxD;AAUA,MAAM,gBAAgB,EACpB,WACA,GAAG,YAEH,iBAAA,GAAA,kBAAA,KAAC,QAAD;CACE,aAAU;CACV,YAAA,GAAA,OAAA,IAAc,qCAAqC,SAAS;CAC5D,GAAI;AACL,CAAA;AAGH,MAAM,sBAAsB,EAC1B,WACA,GAAG,YAEH,iBAAA,GAAA,kBAAA,KAAC,KAAD;CACE,aAAU;CACV,YAAA,GAAA,OAAA,IAAc,WAAW,SAAS;CAClC,GAAI;AACL,CAAA;AAGH,MAAM,wBAAwBA,MAAM,cAA8B,MAAM;AAExE,MAAM,wBAAwD;CAC5D,OACE;CACF,SACE;CACF,SACE;CACF,MAAM;CACN,SACE;AACJ;AAMA,MAAM,iBAAiB,EACrB,WACA,QAAQ,SACR,GAAG,YACoB;CACvB,MAAM,iBAAiBA,MAAM,WAAW,qBAAqB;CAE7D,OACE,iBAAA,GAAA,kBAAA,KAACC,0BAAAA,QAAD;EACE,aAAU;EACV,MAAK;EACL,cAAa;EACb,OAAM;EACN,YAAA,GAAA,OAAA,IACE,cACA;GAAE,cAAc,UAAU;GAAS,YAAY,UAAU;EAAM,GAC/D,sBAAsB,iBACtB,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,WAAW,EACf,UAAU,QACV,MACA,WACA,UACA,GAAG,YACe;CAClB,MAAM,cAAc,cAAc,WAAW;CAE7C,OACE,iBAAA,GAAA,kBAAA,KAAC,sBAAsB,UAAvB;EAAgC,OAAO,WAAW;YAChD,iBAAA,GAAA,kBAAA,MAAC,OAAD;GACE,aAAU;GACV,YAAA,GAAA,OAAA,IAAc,gBAAgB,EAAE,QAAQ,CAAC,GAAG,SAAS;GACrD,GAAI;aAHN,CAKG,SAAS,SACR,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,gBAAD;IACE,YAAA,GAAA,OAAA,IACE,2FACA,aAAa,SACf;IACA,MAAM,QAAQ,YAAY;GAC3B,CAAA,GAEH,iBAAA,GAAA,kBAAA,KAAC,OAAD;IAAK,WAAU;IAAsC;GAAc,CAAA,CAChE;;CACyB,CAAA;AAEpC"}

package/dist/components/callout.d.cts

@@ -6,9 +6,9 @@ import * as React$1 from "react";
 import { VariantProps } from "class-variance-authority";
 
 //#region src/components/callout.d.ts
-type CalloutVariant = 'error' | 'info' | 'success' | 'warning';
+type CalloutVariant = 'error' | 'info' | 'neutral' | 'success' | 'warning';
 declare const calloutVariants: (props?: ({
-  variant?: "success" | "warning" | "error" | "info" | null | undefined;
+  variant?: "neutral" | "success" | "warning" | "info" | "error" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface CalloutProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof calloutVariants> {
   /** Overrides the variant's default icon; the variant's color is kept. `false` renders no icon. */

package/dist/components/callout.d.ts

@@ -6,9 +6,9 @@ import * as React$1 from "react";
 import { VariantProps } from "class-variance-authority";
 
 //#region src/components/callout.d.ts
-type CalloutVariant = 'error' | 'info' | 'success' | 'warning';
+type CalloutVariant = 'error' | 'info' | 'neutral' | 'success' | 'warning';
 declare const calloutVariants: (props?: ({
-  variant?: "success" | "warning" | "error" | "info" | null | undefined;
+  variant?: "neutral" | "success" | "warning" | "info" | "error" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 interface CalloutProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof calloutVariants> {
   /** Overrides the variant's default icon; the variant's color is kept. `false` renders no icon. */

package/dist/components/callout.js

@@ -6,12 +6,13 @@ import * as React$1 from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 //#region src/components/callout.tsx
-const calloutVariants = cva("group/callout flex w-full items-start gap-2 rounded-lg px-4 py-3 text-sm transition-[color,background-color,opacity,scale] duration-150 ease-out motion-reduce:transition-none starting:scale-95 starting:opacity-0", {
+const calloutVariants = cva("group/callout flex w-full items-start gap-2 rounded-lg px-4 py-3 text-sm transition-colors duration-150 ease-out motion-reduce:transition-none", {
 	variants: { variant: {
 		error: "bg-base-error-soft text-error",
 		success: "bg-base-success-soft text-success",
 		warning: "bg-base-warning-soft text-warning",
-		info: "bg-base-info-soft text-info"
+		info: "bg-base-info-soft text-info",
+		neutral: "bg-base-gray-soft text-gray"
 	} },
 	defaultVariants: { variant: "info" }
 });
@@ -31,6 +32,10 @@ const CALLOUT_ICONS = {
 	info: {
 		name: "info",
 		className: "text-info-light"
+	},
+	neutral: {
+		name: "info",
+		className: "text-gray-light"
 	}
 };
 const CalloutTitle = ({ className, ...props }) => /* @__PURE__ */ jsx("span", {
@@ -48,7 +53,8 @@ const CALLOUT_ACTION_COLORS = {
 	error: "bg-base-error-soft text-error hover:bg-red-a4 focus-visible:bg-red-a4",
 	success: "bg-base-success-soft text-success hover:bg-green-a4 focus-visible:bg-green-a4",
 	warning: "bg-base-warning-soft text-warning hover:bg-orange-a4 focus-visible:bg-orange-a4",
-	info: "bg-base-info-soft text-info hover:bg-blue-a4 focus-visible:bg-blue-a4"
+	info: "bg-base-info-soft text-info hover:bg-blue-a4 focus-visible:bg-blue-a4",
+	neutral: "bg-base-gray-soft text-gray hover:bg-gray-a4 focus-visible:bg-gray-a4"
 };
 const CalloutAction = ({ className, align = "start", ...props }) => {
 	const calloutVariant = React$1.useContext(CalloutVariantContext);

package/dist/components/callout.js.map

@@ -1 +1 @@
-{"version":3,"file":"callout.js","names":["React"],"sources":["../../src/components/callout.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\nimport {\n  MaterialSymbol,\n  type MaterialSymbolIconName,\n} from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\nimport { Button, type ButtonProps } from './button'\n\ntype CalloutVariant = 'error' | 'info' | 'success' | 'warning'\n\nconst calloutVariants = cva(\n  'group/callout flex w-full items-start gap-2 rounded-lg px-4 py-3 text-sm transition-[color,background-color,opacity,scale] duration-150 ease-out motion-reduce:transition-none starting:scale-95 starting:opacity-0',\n  {\n    variants: {\n      variant: {\n        error: 'bg-base-error-soft text-error',\n        success: 'bg-base-success-soft text-success',\n        warning: 'bg-base-warning-soft text-warning',\n        info: 'bg-base-info-soft text-info',\n      },\n    },\n    defaultVariants: {\n      variant: 'info',\n    },\n  },\n)\n\nconst CALLOUT_ICONS: Record<\n  CalloutVariant,\n  { name: MaterialSymbolIconName; className: string }\n> = {\n  error: { name: 'cancel', className: 'text-error-light' },\n  success: { name: 'check_circle', className: 'text-success-light' },\n  warning: { name: 'warning', className: 'text-warning-light' },\n  info: { name: 'info', className: 'text-info-light' },\n}\n\ninterface CalloutProps\n  extends\n    React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof calloutVariants> {\n  /** Overrides the variant's default icon; the variant's color is kept. `false` renders no icon. */\n  icon?: MaterialSymbolIconName | false\n}\n\nconst CalloutTitle = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => (\n  <span\n    data-slot=\"callout-title\"\n    className={cn('text-base leading-5 font-semibold', className)}\n    {...props}\n  />\n)\n\nconst CalloutDescription = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLParagraphElement>) => (\n  <p\n    data-slot=\"callout-description\"\n    className={cn('text-sm', className)}\n    {...props}\n  />\n)\n\nconst CalloutVariantContext = React.createContext<CalloutVariant>('info')\n\nconst CALLOUT_ACTION_COLORS: Record<CalloutVariant, string> = {\n  error:\n    'bg-base-error-soft text-error hover:bg-red-a4 focus-visible:bg-red-a4',\n  success:\n    'bg-base-success-soft text-success hover:bg-green-a4 focus-visible:bg-green-a4',\n  warning:\n    'bg-base-warning-soft text-warning hover:bg-orange-a4 focus-visible:bg-orange-a4',\n  info: 'bg-base-info-soft text-info hover:bg-blue-a4 focus-visible:bg-blue-a4',\n}\n\ntype CalloutActionType = Omit<ButtonProps, 'styleVariant' | 'color'> & {\n  align?: 'start' | 'end'\n}\n\nconst CalloutAction = ({\n  className,\n  align = 'start',\n  ...props\n}: CalloutActionType) => {\n  const calloutVariant = React.useContext(CalloutVariantContext)\n\n  return (\n    <Button\n      data-slot=\"callout-action\"\n      size=\"small\"\n      styleVariant=\"surface\"\n      color=\"neutral\"\n      className={cn(\n        'mt-2 w-fit',\n        { 'self-start': align === 'start', 'self-end': align === 'end' },\n        CALLOUT_ACTION_COLORS[calloutVariant],\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nconst Callout = ({\n  variant = 'info',\n  icon,\n  className,\n  children,\n  ...props\n}: CalloutProps) => {\n  const variantIcon = CALLOUT_ICONS[variant ?? 'info']\n\n  return (\n    <CalloutVariantContext.Provider value={variant ?? 'info'}>\n      <div\n        data-slot=\"callout\"\n        className={cn(calloutVariants({ variant }), className)}\n        {...props}\n      >\n        {icon !== false && (\n          <MaterialSymbol\n            className={cn(\n              'inline-flex shrink-0 items-center [--spark-icon-size:calc(20px*var(--spark-scaling,1))]',\n              variantIcon?.className,\n            )}\n            name={icon ?? variantIcon.name}\n          />\n        )}\n        <div className=\"flex w-full min-w-0 flex-col gap-1\">{children}</div>\n      </div>\n    </CalloutVariantContext.Provider>\n  )\n}\n\nexport {\n  Callout,\n  CalloutAction,\n  CalloutDescription,\n  CalloutTitle,\n  calloutVariants,\n}\nexport type { CalloutProps, CalloutVariant }\n"],"mappings":";;;;;;;;AAWA,MAAM,kBAAkB,IACtB,uNACA;CACE,UAAU,EACR,SAAS;EACP,OAAO;EACP,SAAS;EACT,SAAS;EACT,MAAM;CACR,EACF;CACA,iBAAiB,EACf,SAAS,OACX;AACF,CACF;AAEA,MAAM,gBAGF;CACF,OAAO;EAAE,MAAM;EAAU,WAAW;CAAmB;CACvD,SAAS;EAAE,MAAM;EAAgB,WAAW;CAAqB;CACjE,SAAS;EAAE,MAAM;EAAW,WAAW;CAAqB;CAC5D,MAAM;EAAE,MAAM;EAAQ,WAAW;CAAkB;AACrD;AAUA,MAAM,gBAAgB,EACpB,WACA,GAAG,YAEH,oBAAC,QAAD;CACE,aAAU;CACV,WAAW,GAAG,qCAAqC,SAAS;CAC5D,GAAI;AACL,CAAA;AAGH,MAAM,sBAAsB,EAC1B,WACA,GAAG,YAEH,oBAAC,KAAD;CACE,aAAU;CACV,WAAW,GAAG,WAAW,SAAS;CAClC,GAAI;AACL,CAAA;AAGH,MAAM,wBAAwBA,QAAM,cAA8B,MAAM;AAExE,MAAM,wBAAwD;CAC5D,OACE;CACF,SACE;CACF,SACE;CACF,MAAM;AACR;AAMA,MAAM,iBAAiB,EACrB,WACA,QAAQ,SACR,GAAG,YACoB;CACvB,MAAM,iBAAiBA,QAAM,WAAW,qBAAqB;CAE7D,OACE,oBAAC,QAAD;EACE,aAAU;EACV,MAAK;EACL,cAAa;EACb,OAAM;EACN,WAAW,GACT,cACA;GAAE,cAAc,UAAU;GAAS,YAAY,UAAU;EAAM,GAC/D,sBAAsB,iBACtB,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,WAAW,EACf,UAAU,QACV,MACA,WACA,UACA,GAAG,YACe;CAClB,MAAM,cAAc,cAAc,WAAW;CAE7C,OACE,oBAAC,sBAAsB,UAAvB;EAAgC,OAAO,WAAW;YAChD,qBAAC,OAAD;GACE,aAAU;GACV,WAAW,GAAG,gBAAgB,EAAE,QAAQ,CAAC,GAAG,SAAS;GACrD,GAAI;aAHN,CAKG,SAAS,SACR,oBAAC,gBAAD;IACE,WAAW,GACT,2FACA,aAAa,SACf;IACA,MAAM,QAAQ,YAAY;GAC3B,CAAA,GAEH,oBAAC,OAAD;IAAK,WAAU;IAAsC;GAAc,CAAA,CAChE;;CACyB,CAAA;AAEpC"}
+{"version":3,"file":"callout.js","names":["React"],"sources":["../../src/components/callout.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority'\nimport * as React from 'react'\nimport {\n  MaterialSymbol,\n  type MaterialSymbolIconName,\n} from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\nimport { Button, type ButtonProps } from './button'\n\ntype CalloutVariant = 'error' | 'info' | 'neutral' | 'success' | 'warning'\n\nconst calloutVariants = cva(\n  'group/callout flex w-full items-start gap-2 rounded-lg px-4 py-3 text-sm transition-colors duration-150 ease-out motion-reduce:transition-none',\n  {\n    variants: {\n      variant: {\n        error: 'bg-base-error-soft text-error',\n        success: 'bg-base-success-soft text-success',\n        warning: 'bg-base-warning-soft text-warning',\n        info: 'bg-base-info-soft text-info',\n        neutral: 'bg-base-gray-soft text-gray',\n      },\n    },\n    defaultVariants: {\n      variant: 'info',\n    },\n  },\n)\n\nconst CALLOUT_ICONS: Record<\n  CalloutVariant,\n  { name: MaterialSymbolIconName; className: string }\n> = {\n  error: { name: 'cancel', className: 'text-error-light' },\n  success: { name: 'check_circle', className: 'text-success-light' },\n  warning: { name: 'warning', className: 'text-warning-light' },\n  info: { name: 'info', className: 'text-info-light' },\n  // no severity to signal, so it borrows info's glyph — pass `icon` to change it\n  // or `icon={false}` for a bare panel.\n  neutral: { name: 'info', className: 'text-gray-light' },\n}\n\ninterface CalloutProps\n  extends\n    React.HTMLAttributes<HTMLDivElement>,\n    VariantProps<typeof calloutVariants> {\n  /** Overrides the variant's default icon; the variant's color is kept. `false` renders no icon. */\n  icon?: MaterialSymbolIconName | false\n}\n\nconst CalloutTitle = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLSpanElement>) => (\n  <span\n    data-slot=\"callout-title\"\n    className={cn('text-base leading-5 font-semibold', className)}\n    {...props}\n  />\n)\n\nconst CalloutDescription = ({\n  className,\n  ...props\n}: React.HTMLAttributes<HTMLParagraphElement>) => (\n  <p\n    data-slot=\"callout-description\"\n    className={cn('text-sm', className)}\n    {...props}\n  />\n)\n\nconst CalloutVariantContext = React.createContext<CalloutVariant>('info')\n\nconst CALLOUT_ACTION_COLORS: Record<CalloutVariant, string> = {\n  error:\n    'bg-base-error-soft text-error hover:bg-red-a4 focus-visible:bg-red-a4',\n  success:\n    'bg-base-success-soft text-success hover:bg-green-a4 focus-visible:bg-green-a4',\n  warning:\n    'bg-base-warning-soft text-warning hover:bg-orange-a4 focus-visible:bg-orange-a4',\n  info: 'bg-base-info-soft text-info hover:bg-blue-a4 focus-visible:bg-blue-a4',\n  neutral:\n    'bg-base-gray-soft text-gray hover:bg-gray-a4 focus-visible:bg-gray-a4',\n}\n\ntype CalloutActionType = Omit<ButtonProps, 'styleVariant' | 'color'> & {\n  align?: 'start' | 'end'\n}\n\nconst CalloutAction = ({\n  className,\n  align = 'start',\n  ...props\n}: CalloutActionType) => {\n  const calloutVariant = React.useContext(CalloutVariantContext)\n\n  return (\n    <Button\n      data-slot=\"callout-action\"\n      size=\"small\"\n      styleVariant=\"surface\"\n      color=\"neutral\"\n      className={cn(\n        'mt-2 w-fit',\n        { 'self-start': align === 'start', 'self-end': align === 'end' },\n        CALLOUT_ACTION_COLORS[calloutVariant],\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nconst Callout = ({\n  variant = 'info',\n  icon,\n  className,\n  children,\n  ...props\n}: CalloutProps) => {\n  const variantIcon = CALLOUT_ICONS[variant ?? 'info']\n\n  return (\n    <CalloutVariantContext.Provider value={variant ?? 'info'}>\n      <div\n        data-slot=\"callout\"\n        className={cn(calloutVariants({ variant }), className)}\n        {...props}\n      >\n        {icon !== false && (\n          <MaterialSymbol\n            className={cn(\n              'inline-flex shrink-0 items-center [--spark-icon-size:calc(20px*var(--spark-scaling,1))]',\n              variantIcon?.className,\n            )}\n            name={icon ?? variantIcon.name}\n          />\n        )}\n        <div className=\"flex w-full min-w-0 flex-col gap-1\">{children}</div>\n      </div>\n    </CalloutVariantContext.Provider>\n  )\n}\n\nexport {\n  Callout,\n  CalloutAction,\n  CalloutDescription,\n  CalloutTitle,\n  calloutVariants,\n}\nexport type { CalloutProps, CalloutVariant }\n"],"mappings":";;;;;;;;AAWA,MAAM,kBAAkB,IACtB,kJACA;CACE,UAAU,EACR,SAAS;EACP,OAAO;EACP,SAAS;EACT,SAAS;EACT,MAAM;EACN,SAAS;CACX,EACF;CACA,iBAAiB,EACf,SAAS,OACX;AACF,CACF;AAEA,MAAM,gBAGF;CACF,OAAO;EAAE,MAAM;EAAU,WAAW;CAAmB;CACvD,SAAS;EAAE,MAAM;EAAgB,WAAW;CAAqB;CACjE,SAAS;EAAE,MAAM;EAAW,WAAW;CAAqB;CAC5D,MAAM;EAAE,MAAM;EAAQ,WAAW;CAAkB;CAGnD,SAAS;EAAE,MAAM;EAAQ,WAAW;CAAkB;AACxD;AAUA,MAAM,gBAAgB,EACpB,WACA,GAAG,YAEH,oBAAC,QAAD;CACE,aAAU;CACV,WAAW,GAAG,qCAAqC,SAAS;CAC5D,GAAI;AACL,CAAA;AAGH,MAAM,sBAAsB,EAC1B,WACA,GAAG,YAEH,oBAAC,KAAD;CACE,aAAU;CACV,WAAW,GAAG,WAAW,SAAS;CAClC,GAAI;AACL,CAAA;AAGH,MAAM,wBAAwBA,QAAM,cAA8B,MAAM;AAExE,MAAM,wBAAwD;CAC5D,OACE;CACF,SACE;CACF,SACE;CACF,MAAM;CACN,SACE;AACJ;AAMA,MAAM,iBAAiB,EACrB,WACA,QAAQ,SACR,GAAG,YACoB;CACvB,MAAM,iBAAiBA,QAAM,WAAW,qBAAqB;CAE7D,OACE,oBAAC,QAAD;EACE,aAAU;EACV,MAAK;EACL,cAAa;EACb,OAAM;EACN,WAAW,GACT,cACA;GAAE,cAAc,UAAU;GAAS,YAAY,UAAU;EAAM,GAC/D,sBAAsB,iBACtB,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,WAAW,EACf,UAAU,QACV,MACA,WACA,UACA,GAAG,YACe;CAClB,MAAM,cAAc,cAAc,WAAW;CAE7C,OACE,oBAAC,sBAAsB,UAAvB;EAAgC,OAAO,WAAW;YAChD,qBAAC,OAAD;GACE,aAAU;GACV,WAAW,GAAG,gBAAgB,EAAE,QAAQ,CAAC,GAAG,SAAS;GACrD,GAAI;aAHN,CAKG,SAAS,SACR,oBAAC,gBAAD;IACE,WAAW,GACT,2FACA,aAAa,SACf;IACA,MAAM,QAAQ,YAAY;GAC3B,CAAA,GAEH,oBAAC,OAAD;IAAK,WAAU;IAAsC;GAAc,CAAA,CAChE;;CACyB,CAAA;AAEpC"}

package/dist/components/input-otp.cjs

@@ -1,7 +1,7 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_lib_input_box_variants = require("../lib/input-box-variants.cjs");
 const require_components_field = require("./field.cjs");
+const require_lib_input_box_variants = require("../lib/input-box-variants.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 let class_variance_authority = require("class-variance-authority");
 let _base_ui_react_otp_field = require("@base-ui/react/otp-field");

package/dist/components/input-otp.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "../utils/cn.js";
-import { GHOST_UNDERLINE, boxChrome } from "../lib/input-box-variants.js";
 import { useFieldControl } from "./field.js";
+import { GHOST_UNDERLINE, boxChrome } from "../lib/input-box-variants.js";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { OTPField } from "@base-ui/react/otp-field";

package/dist/components/input.cjs

@@ -1,8 +1,8 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-DY84GLCh.cjs");
-const require_lib_input_box_variants = require("../lib/input-box-variants.cjs");
 const require_components_field = require("./field.cjs");
+const require_lib_input_box_variants = require("../lib/input-box-variants.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");

package/dist/components/input.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "../utils/cn.js";
-import { GHOST_UNDERLINE, boxChrome } from "../lib/input-box-variants.js";
 import { useFieldControl } from "./field.js";
+import { GHOST_UNDERLINE, boxChrome } from "../lib/input-box-variants.js";
 import * as React$1 from "react";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";

package/dist/components/marker.d.cts

@@ -6,7 +6,7 @@ import { useRender } from "@base-ui/react/use-render";
 
 //#region src/components/marker.d.ts
 declare const markerVariants: (props?: ({
-  variant?: "separator" | "default" | "border" | null | undefined;
+  variant?: "default" | "separator" | "border" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Marker({
   className,

package/dist/components/marker.d.ts

@@ -6,7 +6,7 @@ import { useRender } from "@base-ui/react/use-render";
 
 //#region src/components/marker.d.ts
 declare const markerVariants: (props?: ({
-  variant?: "separator" | "default" | "border" | null | undefined;
+  variant?: "default" | "separator" | "border" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Marker({
   className,

package/dist/components/message-scroller.cjs

@@ -1,16 +1,33 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-DY84GLCh.cjs");
+const require_hooks_use_reduced_motion = require("../hooks/use-reduced-motion.cjs");
 const require_icons_material_symbol = require("../icons/material-symbol.cjs");
 const require_components_button = require("./button.cjs");
+const require_lib_message_animations = require("../lib/message-animations.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");
 let _shadcn_react_message_scroller = require("@shadcn/react/message-scroller");
+let motion_react = require("motion/react");
+let motion_react_m = require("motion/react-m");
 let cnfast = require("cnfast");
 //#region src/components/message-scroller.tsx
+const MessageScrollerAnimationReadyContext = react.createContext(false);
+const MotionMessageScrollerPrimitiveItem = (0, motion_react_m.create)(_shadcn_react_message_scroller.MessageScroller.Item);
 function MessageScrollerProvider(props) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_shadcn_react_message_scroller.MessageScroller.Provider, { ...props });
+	const [ready, setReady] = react.useState(false);
+	react.useEffect(() => {
+		setReady(true);
+	}, []);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(motion_react.LazyMotion, {
+		features: motion_react.domAnimation,
+		strict: true,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MessageScrollerAnimationReadyContext.Provider, {
+			value: ready,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_shadcn_react_message_scroller.MessageScroller.Provider, { ...props })
+		})
+	});
 }
 function MessageScroller({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_shadcn_react_message_scroller.MessageScroller.Root, {
@@ -22,7 +39,7 @@ function MessageScroller({ className, ...props }) {
 function MessageScrollerViewport({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_shadcn_react_message_scroller.MessageScroller.Viewport, {
 		"data-slot": "message-scroller-viewport",
-		className: (0, cnfast.cn)("size-full min-h-0 min-w-0 scroll-fade-b overflow-y-auto overscroll-contain contain-content [scrollbar-gutter:stable] [scrollbar-width:thin] data-autoscrolling:no-scrollbar", className),
+		className: (0, cnfast.cn)("size-full min-h-0 min-w-0 scroll-fade-b overflow-y-auto overscroll-contain contain-content [scrollbar-gutter:stable] [scrollbar-width:thin] focus-visible:ring-2 focus-visible:ring-spark-11 focus-visible:ring-offset-2 focus-visible:outline-hidden data-autoscrolling:no-scrollbar", className),
 		...props
 	});
 }
@@ -34,11 +51,18 @@ function MessageScrollerContent({ className, ...props }) {
 	});
 }
 function MessageScrollerItem({ className, scrollAnchor = false, ...props }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_shadcn_react_message_scroller.MessageScroller.Item, {
+	const ready = react.useContext(MessageScrollerAnimationReadyContext);
+	const shouldReduceMotion = require_hooks_use_reduced_motion.useReducedMotion();
+	const skipEntrance = !ready || shouldReduceMotion;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MotionMessageScrollerPrimitiveItem, {
+		...props,
 		"data-slot": "message-scroller-item",
 		scrollAnchor,
 		className: (0, cnfast.cn)("min-w-0 shrink-0 [contain-intrinsic-size:auto_10rem] [content-visibility:auto]", className),
-		...props
+		variants: require_lib_message_animations.MESSAGE_ANIMATIONS["slide-up"].variants,
+		initial: skipEntrance ? false : "initial",
+		animate: "animate",
+		exit: skipEntrance ? void 0 : "exit"
 	});
 }
 function MessageScrollerButton({ direction = "end", className, children, render, styleVariant = "surface", color = "neutral", size = "icon-small", ...props }) {

package/dist/components/message-scroller.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"message-scroller.cjs","names":["MessageScrollerPrimitive","Button","MaterialSymbol"],"sources":["../../src/components/message-scroller.tsx"],"sourcesContent":["import {\n  MessageScroller as MessageScrollerPrimitive,\n  useMessageScroller,\n  useMessageScrollerScrollable,\n  useMessageScrollerVisibility,\n} from '@shadcn/react/message-scroller'\nimport * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\nimport { Button, type ButtonProps } from './button'\n\nfunction MessageScrollerProvider(\n  props: React.ComponentProps<typeof MessageScrollerPrimitive.Provider>,\n) {\n  return <MessageScrollerPrimitive.Provider {...props} />\n}\n\nfunction MessageScroller({\n  className,\n  ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Root>) {\n  return (\n    <MessageScrollerPrimitive.Root\n      data-slot=\"message-scroller\"\n      className={cn(\n        'group/message-scroller relative flex size-full min-h-0 flex-col overflow-hidden',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MessageScrollerViewport({\n  className,\n  ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Viewport>) {\n  return (\n    <MessageScrollerPrimitive.Viewport\n      data-slot=\"message-scroller-viewport\"\n      // scroll-fade-b is a spark-adopted shadcn utility; scrollbar-width/gutter\n      // are arbitrary props (spark ships no scrollbar-* utilities) and the native\n      // bar collapses to no-scrollbar (spark util) while autoscrolling.\n      className={cn(\n        'size-full min-h-0 min-w-0 scroll-fade-b overflow-y-auto overscroll-contain contain-content [scrollbar-gutter:stable] [scrollbar-width:thin] data-autoscrolling:no-scrollbar',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MessageScrollerContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Content>) {\n  return (\n    <MessageScrollerPrimitive.Content\n      data-slot=\"message-scroller-content\"\n      className={cn('flex h-max min-h-full flex-col gap-8', className)}\n      {...props}\n    />\n  )\n}\n\nfunction MessageScrollerItem({\n  className,\n  scrollAnchor = false,\n  ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Item>) {\n  return (\n    <MessageScrollerPrimitive.Item\n      data-slot=\"message-scroller-item\"\n      scrollAnchor={scrollAnchor}\n      className={cn(\n        'min-w-0 shrink-0 [contain-intrinsic-size:auto_10rem] [content-visibility:auto]',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n// Renders a spark <Button> via `render`, so its `styleVariant`/`color`/`size`\n// recipe paints the chrome — we only add positioning + the enter/leave animation\n// keyed off the primitive's data-[active] state. Icon is a MaterialSymbol (spark's\n// icon set), pointing down for `end` and up for `start`.\nfunction MessageScrollerButton({\n  direction = 'end',\n  className,\n  children,\n  render,\n  styleVariant = 'surface',\n  color = 'neutral',\n  size = 'icon-small',\n  ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Button> &\n  Pick<ButtonProps, 'styleVariant' | 'color' | 'size'>) {\n  return (\n    <MessageScrollerPrimitive.Button\n      data-slot=\"message-scroller-button\"\n      data-direction={direction}\n      direction={direction}\n      className={cn(\n        'absolute inset-s-1/2 -translate-x-1/2 rounded-full transition-[translate,scale,opacity] duration-200 data-[active=false]:pointer-events-none data-[active=false]:scale-95 data-[active=false]:opacity-0 data-[active=false]:duration-400 data-[active=false]:ease-[cubic-bezier(0.7,0,0.84,0)] data-[active=true]:translate-y-0 data-[active=true]:scale-100 data-[active=true]:opacity-100 data-[active=true]:ease-[cubic-bezier(0.23,1,0.32,1)] data-[direction=end]:bottom-4 data-[direction=end]:data-[active=false]:translate-y-full data-[direction=start]:top-4 data-[direction=start]:data-[active=false]:-translate-y-full motion-reduce:transition-none rtl:translate-x-1/2',\n        className,\n      )}\n      render={\n        render ?? (\n          <Button styleVariant={styleVariant} color={color} size={size} />\n        )\n      }\n      {...props}\n    >\n      {children ?? (\n        <>\n          <MaterialSymbol\n            name={direction === 'end' ? 'arrow_downward' : 'arrow_upward'}\n          />\n          <span className=\"sr-only\">\n            {direction === 'end' ? 'Scroll to end' : 'Scroll to start'}\n          </span>\n        </>\n      )}\n    </MessageScrollerPrimitive.Button>\n  )\n}\n\nexport {\n  MessageScroller,\n  MessageScrollerButton,\n  MessageScrollerContent,\n  MessageScrollerItem,\n  MessageScrollerProvider,\n  MessageScrollerViewport,\n  useMessageScroller,\n  useMessageScrollerScrollable,\n  useMessageScrollerVisibility,\n}\n"],"mappings":";;;;;;;;;;;AAWA,SAAS,wBACP,OACA;CACA,OAAO,iBAAA,GAAA,kBAAA,KAACA,+BAAAA,gBAAyB,UAA1B,EAAmC,GAAI,MAAQ,CAAA;AACxD;AAEA,SAAS,gBAAgB,EACvB,WACA,GAAG,SAC0D;CAC7D,OACE,iBAAA,GAAA,kBAAA,KAACA,+BAAAA,gBAAyB,MAA1B;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IACE,mFACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,wBAAwB,EAC/B,WACA,GAAG,SAC8D;CACjE,OACE,iBAAA,GAAA,kBAAA,KAACA,+BAAAA,gBAAyB,UAA1B;EACE,aAAU;EAIV,YAAA,GAAA,OAAA,IACE,+KACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,uBAAuB,EAC9B,WACA,GAAG,SAC6D;CAChE,OACE,iBAAA,GAAA,kBAAA,KAACA,+BAAAA,gBAAyB,SAA1B;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IAAc,wCAAwC,SAAS;EAC/D,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,oBAAoB,EAC3B,WACA,eAAe,OACf,GAAG,SAC0D;CAC7D,OACE,iBAAA,GAAA,kBAAA,KAACA,+BAAAA,gBAAyB,MAA1B;EACE,aAAU;EACI;EACd,YAAA,GAAA,OAAA,IACE,kFACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAMA,SAAS,sBAAsB,EAC7B,YAAY,OACZ,WACA,UACA,QACA,eAAe,WACf,QAAQ,WACR,OAAO,cACP,GAAG,SAEmD;CACtD,OACE,iBAAA,GAAA,kBAAA,KAACA,+BAAAA,gBAAyB,QAA1B;EACE,aAAU;EACV,kBAAgB;EACL;EACX,YAAA,GAAA,OAAA,IACE,ypBACA,SACF;EACA,QACE,UACE,iBAAA,GAAA,kBAAA,KAACC,0BAAAA,QAAD;GAAsB;GAAqB;GAAa;EAAO,CAAA;EAGnE,GAAI;YAEH,YACC,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,gBAAD,EACE,MAAM,cAAc,QAAQ,mBAAmB,eAChD,CAAA,GACD,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAU;aACb,cAAc,QAAQ,kBAAkB;EACrC,CAAA,CACN,EAAA,CAAA;CAE2B,CAAA;AAErC"}
+{"version":3,"file":"message-scroller.cjs","names":["React","MessageScrollerPrimitive","LazyMotion","domAnimation","useReducedMotion","MESSAGE_ANIMATIONS","Button","MaterialSymbol"],"sources":["../../src/components/message-scroller.tsx"],"sourcesContent":["import {\n  MessageScroller as MessageScrollerPrimitive,\n  useMessageScroller,\n  useMessageScrollerScrollable,\n  useMessageScrollerVisibility,\n} from '@shadcn/react/message-scroller'\nimport { LazyMotion, domAnimation } from 'motion/react'\nimport { create } from 'motion/react-m'\nimport * as React from 'react'\nimport { useReducedMotion } from '../hooks/use-reduced-motion'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { MESSAGE_ANIMATIONS } from '../lib/message-animations'\nimport { cn } from '../utils/cn'\nimport { Button, type ButtonProps } from './button'\n\nconst MessageScrollerAnimationReadyContext = React.createContext(false)\n\ntype MessageScrollerItemProps = Omit<\n  React.ComponentProps<typeof MessageScrollerPrimitive.Item>,\n  | 'animate'\n  | 'exit'\n  | 'initial'\n  | 'variants'\n  | 'onAnimationStart'\n  | 'onDrag'\n  | 'onDragStart'\n  | 'onDragEnd'\n  | 'onDragTransitionEnd'\n>\n\nconst MotionMessageScrollerPrimitiveItem = create(MessageScrollerPrimitive.Item)\n\nfunction MessageScrollerProvider(\n  props: React.ComponentProps<typeof MessageScrollerPrimitive.Provider>,\n) {\n  const [ready, setReady] = React.useState(false)\n\n  React.useEffect(() => {\n    setReady(true)\n  }, [])\n\n  return (\n    <LazyMotion features={domAnimation} strict>\n      <MessageScrollerAnimationReadyContext.Provider value={ready}>\n        <MessageScrollerPrimitive.Provider {...props} />\n      </MessageScrollerAnimationReadyContext.Provider>\n    </LazyMotion>\n  )\n}\n\nfunction MessageScroller({\n  className,\n  ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Root>) {\n  return (\n    <MessageScrollerPrimitive.Root\n      data-slot=\"message-scroller\"\n      className={cn(\n        'group/message-scroller relative flex size-full min-h-0 flex-col overflow-hidden',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MessageScrollerViewport({\n  className,\n  ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Viewport>) {\n  return (\n    <MessageScrollerPrimitive.Viewport\n      data-slot=\"message-scroller-viewport\"\n      // scroll-fade-b is a spark-adopted shadcn utility; scrollbar-width/gutter\n      // are arbitrary props (spark ships no scrollbar-* utilities) and the native\n      // bar collapses to no-scrollbar (spark util) while autoscrolling.\n      className={cn(\n        'size-full min-h-0 min-w-0 scroll-fade-b overflow-y-auto overscroll-contain contain-content [scrollbar-gutter:stable] [scrollbar-width:thin] focus-visible:ring-2 focus-visible:ring-spark-11 focus-visible:ring-offset-2 focus-visible:outline-hidden data-autoscrolling:no-scrollbar',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MessageScrollerContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Content>) {\n  return (\n    <MessageScrollerPrimitive.Content\n      data-slot=\"message-scroller-content\"\n      className={cn('flex h-max min-h-full flex-col gap-8', className)}\n      {...props}\n    />\n  )\n}\n\nfunction MessageScrollerItem({\n  className,\n  scrollAnchor = false,\n  ...props\n}: MessageScrollerItemProps) {\n  const ready = React.useContext(MessageScrollerAnimationReadyContext)\n  const shouldReduceMotion = useReducedMotion()\n  const skipEntrance = !ready || shouldReduceMotion\n\n  return (\n    <MotionMessageScrollerPrimitiveItem\n      {...props}\n      data-slot=\"message-scroller-item\"\n      scrollAnchor={scrollAnchor}\n      className={cn(\n        'min-w-0 shrink-0 [contain-intrinsic-size:auto_10rem] [content-visibility:auto]',\n        className,\n      )}\n      variants={MESSAGE_ANIMATIONS['slide-up'].variants}\n      initial={skipEntrance ? false : 'initial'}\n      animate=\"animate\"\n      exit={skipEntrance ? undefined : 'exit'}\n    />\n  )\n}\n\n// Renders a spark <Button> via `render`, so its `styleVariant`/`color`/`size`\n// recipe paints the chrome — we only add positioning + the enter/leave animation\n// keyed off the primitive's data-[active] state. Icon is a MaterialSymbol (spark's\n// icon set), pointing down for `end` and up for `start`.\nfunction MessageScrollerButton({\n  direction = 'end',\n  className,\n  children,\n  render,\n  styleVariant = 'surface',\n  color = 'neutral',\n  size = 'icon-small',\n  ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Button> &\n  Pick<ButtonProps, 'styleVariant' | 'color' | 'size'>) {\n  return (\n    <MessageScrollerPrimitive.Button\n      data-slot=\"message-scroller-button\"\n      data-direction={direction}\n      direction={direction}\n      className={cn(\n        'absolute inset-s-1/2 -translate-x-1/2 rounded-full transition-[translate,scale,opacity] duration-200 data-[active=false]:pointer-events-none data-[active=false]:scale-95 data-[active=false]:opacity-0 data-[active=false]:duration-400 data-[active=false]:ease-[cubic-bezier(0.7,0,0.84,0)] data-[active=true]:translate-y-0 data-[active=true]:scale-100 data-[active=true]:opacity-100 data-[active=true]:ease-[cubic-bezier(0.23,1,0.32,1)] data-[direction=end]:bottom-4 data-[direction=end]:data-[active=false]:translate-y-full data-[direction=start]:top-4 data-[direction=start]:data-[active=false]:-translate-y-full motion-reduce:transition-none rtl:translate-x-1/2',\n        className,\n      )}\n      render={\n        render ?? (\n          <Button styleVariant={styleVariant} color={color} size={size} />\n        )\n      }\n      {...props}\n    >\n      {children ?? (\n        <>\n          <MaterialSymbol\n            name={direction === 'end' ? 'arrow_downward' : 'arrow_upward'}\n          />\n          <span className=\"sr-only\">\n            {direction === 'end' ? 'Scroll to end' : 'Scroll to start'}\n          </span>\n        </>\n      )}\n    </MessageScrollerPrimitive.Button>\n  )\n}\n\nexport {\n  MessageScroller,\n  MessageScrollerButton,\n  MessageScrollerContent,\n  MessageScrollerItem,\n  MessageScrollerProvider,\n  MessageScrollerViewport,\n  useMessageScroller,\n  useMessageScrollerScrollable,\n  useMessageScrollerVisibility,\n}\n"],"mappings":";;;;;;;;;;;;;;;AAeA,MAAM,uCAAuCA,MAAM,cAAc,KAAK;AAetE,MAAM,sCAAA,GAAA,eAAA,QAA4CC,+BAAAA,gBAAyB,IAAI;AAE/E,SAAS,wBACP,OACA;CACA,MAAM,CAAC,OAAO,YAAYD,MAAM,SAAS,KAAK;CAE9C,MAAM,gBAAgB;EACpB,SAAS,IAAI;CACf,GAAG,CAAC,CAAC;CAEL,OACE,iBAAA,GAAA,kBAAA,KAACE,aAAAA,YAAD;EAAY,UAAUC,aAAAA;EAAc,QAAA;YAClC,iBAAA,GAAA,kBAAA,KAAC,qCAAqC,UAAtC;GAA+C,OAAO;aACpD,iBAAA,GAAA,kBAAA,KAACF,+BAAAA,gBAAyB,UAA1B,EAAmC,GAAI,MAAQ,CAAA;EACF,CAAA;CACrC,CAAA;AAEhB;AAEA,SAAS,gBAAgB,EACvB,WACA,GAAG,SAC0D;CAC7D,OACE,iBAAA,GAAA,kBAAA,KAACA,+BAAAA,gBAAyB,MAA1B;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IACE,mFACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,wBAAwB,EAC/B,WACA,GAAG,SAC8D;CACjE,OACE,iBAAA,GAAA,kBAAA,KAACA,+BAAAA,gBAAyB,UAA1B;EACE,aAAU;EAIV,YAAA,GAAA,OAAA,IACE,yRACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,uBAAuB,EAC9B,WACA,GAAG,SAC6D;CAChE,OACE,iBAAA,GAAA,kBAAA,KAACA,+BAAAA,gBAAyB,SAA1B;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IAAc,wCAAwC,SAAS;EAC/D,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,oBAAoB,EAC3B,WACA,eAAe,OACf,GAAG,SACwB;CAC3B,MAAM,QAAQD,MAAM,WAAW,oCAAoC;CACnE,MAAM,qBAAqBI,iCAAAA,iBAAiB;CAC5C,MAAM,eAAe,CAAC,SAAS;CAE/B,OACE,iBAAA,GAAA,kBAAA,KAAC,oCAAD;EACE,GAAI;EACJ,aAAU;EACI;EACd,YAAA,GAAA,OAAA,IACE,kFACA,SACF;EACA,UAAUC,+BAAAA,mBAAmB,YAAY;EACzC,SAAS,eAAe,QAAQ;EAChC,SAAQ;EACR,MAAM,eAAe,KAAA,IAAY;CAClC,CAAA;AAEL;AAMA,SAAS,sBAAsB,EAC7B,YAAY,OACZ,WACA,UACA,QACA,eAAe,WACf,QAAQ,WACR,OAAO,cACP,GAAG,SAEmD;CACtD,OACE,iBAAA,GAAA,kBAAA,KAACJ,+BAAAA,gBAAyB,QAA1B;EACE,aAAU;EACV,kBAAgB;EACL;EACX,YAAA,GAAA,OAAA,IACE,ypBACA,SACF;EACA,QACE,UACE,iBAAA,GAAA,kBAAA,KAACK,0BAAAA,QAAD;GAAsB;GAAqB;GAAa;EAAO,CAAA;EAGnE,GAAI;YAEH,YACC,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,gBAAD,EACE,MAAM,cAAc,QAAQ,mBAAmB,eAChD,CAAA,GACD,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAU;aACb,cAAc,QAAQ,kBAAkB;EACrC,CAAA,CACN,EAAA,CAAA;CAE2B,CAAA;AAErC"}

package/dist/components/message-scroller.d.cts

@@ -5,6 +5,7 @@ import * as React$1 from "react";
 import { MessageScroller as MessageScroller$1, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility } from "@shadcn/react/message-scroller";
 
 //#region src/components/message-scroller.d.ts
+type MessageScrollerItemProps = Omit<React$1.ComponentProps<typeof MessageScroller$1.Item>, 'animate' | 'exit' | 'initial' | 'variants' | 'onAnimationStart' | 'onDrag' | 'onDragStart' | 'onDragEnd' | 'onDragTransitionEnd'>;
 declare function MessageScrollerProvider(props: React$1.ComponentProps<typeof MessageScroller$1.Provider>): import("react/jsx-runtime").JSX.Element;
 declare function MessageScroller({
   className,
@@ -22,7 +23,7 @@ declare function MessageScrollerItem({
   className,
   scrollAnchor,
   ...props
-}: React$1.ComponentProps<typeof MessageScroller$1.Item>): import("react/jsx-runtime").JSX.Element;
+}: MessageScrollerItemProps): import("react/jsx-runtime").JSX.Element;
 declare function MessageScrollerButton({
   direction,
   className,

package/dist/components/message-scroller.d.ts

@@ -5,6 +5,7 @@ import * as React$1 from "react";
 import { MessageScroller as MessageScroller$1, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility } from "@shadcn/react/message-scroller";
 
 //#region src/components/message-scroller.d.ts
+type MessageScrollerItemProps = Omit<React$1.ComponentProps<typeof MessageScroller$1.Item>, 'animate' | 'exit' | 'initial' | 'variants' | 'onAnimationStart' | 'onDrag' | 'onDragStart' | 'onDragEnd' | 'onDragTransitionEnd'>;
 declare function MessageScrollerProvider(props: React$1.ComponentProps<typeof MessageScroller$1.Provider>): import("react/jsx-runtime").JSX.Element;
 declare function MessageScroller({
   className,
@@ -22,7 +23,7 @@ declare function MessageScrollerItem({
   className,
   scrollAnchor,
   ...props
-}: React$1.ComponentProps<typeof MessageScroller$1.Item>): import("react/jsx-runtime").JSX.Element;
+}: MessageScrollerItemProps): import("react/jsx-runtime").JSX.Element;
 declare function MessageScrollerButton({
   direction,
   className,

package/dist/components/message-scroller.js

@@ -1,13 +1,30 @@
 "use client";
+import { useReducedMotion } from "../hooks/use-reduced-motion.js";
 import { cn } from "../utils/cn.js";
 import { MaterialSymbol } from "../icons/material-symbol.js";
 import { Button } from "./button.js";
-import "react";
+import { MESSAGE_ANIMATIONS } from "../lib/message-animations.js";
+import * as React$1 from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { MessageScroller as MessageScroller$1, useMessageScroller, useMessageScrollerScrollable, useMessageScrollerVisibility } from "@shadcn/react/message-scroller";
+import { LazyMotion, domAnimation } from "motion/react";
+import { create } from "motion/react-m";
 //#region src/components/message-scroller.tsx
+const MessageScrollerAnimationReadyContext = React$1.createContext(false);
+const MotionMessageScrollerPrimitiveItem = create(MessageScroller$1.Item);
 function MessageScrollerProvider(props) {
-	return /* @__PURE__ */ jsx(MessageScroller$1.Provider, { ...props });
+	const [ready, setReady] = React$1.useState(false);
+	React$1.useEffect(() => {
+		setReady(true);
+	}, []);
+	return /* @__PURE__ */ jsx(LazyMotion, {
+		features: domAnimation,
+		strict: true,
+		children: /* @__PURE__ */ jsx(MessageScrollerAnimationReadyContext.Provider, {
+			value: ready,
+			children: /* @__PURE__ */ jsx(MessageScroller$1.Provider, { ...props })
+		})
+	});
 }
 function MessageScroller({ className, ...props }) {
 	return /* @__PURE__ */ jsx(MessageScroller$1.Root, {
@@ -19,7 +36,7 @@ function MessageScroller({ className, ...props }) {
 function MessageScrollerViewport({ className, ...props }) {
 	return /* @__PURE__ */ jsx(MessageScroller$1.Viewport, {
 		"data-slot": "message-scroller-viewport",
-		className: cn("size-full min-h-0 min-w-0 scroll-fade-b overflow-y-auto overscroll-contain contain-content [scrollbar-gutter:stable] [scrollbar-width:thin] data-autoscrolling:no-scrollbar", className),
+		className: cn("size-full min-h-0 min-w-0 scroll-fade-b overflow-y-auto overscroll-contain contain-content [scrollbar-gutter:stable] [scrollbar-width:thin] focus-visible:ring-2 focus-visible:ring-spark-11 focus-visible:ring-offset-2 focus-visible:outline-hidden data-autoscrolling:no-scrollbar", className),
 		...props
 	});
 }
@@ -31,11 +48,18 @@ function MessageScrollerContent({ className, ...props }) {
 	});
 }
 function MessageScrollerItem({ className, scrollAnchor = false, ...props }) {
-	return /* @__PURE__ */ jsx(MessageScroller$1.Item, {
+	const ready = React$1.useContext(MessageScrollerAnimationReadyContext);
+	const shouldReduceMotion = useReducedMotion();
+	const skipEntrance = !ready || shouldReduceMotion;
+	return /* @__PURE__ */ jsx(MotionMessageScrollerPrimitiveItem, {
+		...props,
 		"data-slot": "message-scroller-item",
 		scrollAnchor,
 		className: cn("min-w-0 shrink-0 [contain-intrinsic-size:auto_10rem] [content-visibility:auto]", className),
-		...props
+		variants: MESSAGE_ANIMATIONS["slide-up"].variants,
+		initial: skipEntrance ? false : "initial",
+		animate: "animate",
+		exit: skipEntrance ? void 0 : "exit"
 	});
 }
 function MessageScrollerButton({ direction = "end", className, children, render, styleVariant = "surface", color = "neutral", size = "icon-small", ...props }) {

package/dist/components/message-scroller.js.map

@@ -1 +1 @@
-{"version":3,"file":"message-scroller.js","names":["MessageScrollerPrimitive"],"sources":["../../src/components/message-scroller.tsx"],"sourcesContent":["import {\n  MessageScroller as MessageScrollerPrimitive,\n  useMessageScroller,\n  useMessageScrollerScrollable,\n  useMessageScrollerVisibility,\n} from '@shadcn/react/message-scroller'\nimport * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\nimport { Button, type ButtonProps } from './button'\n\nfunction MessageScrollerProvider(\n  props: React.ComponentProps<typeof MessageScrollerPrimitive.Provider>,\n) {\n  return <MessageScrollerPrimitive.Provider {...props} />\n}\n\nfunction MessageScroller({\n  className,\n  ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Root>) {\n  return (\n    <MessageScrollerPrimitive.Root\n      data-slot=\"message-scroller\"\n      className={cn(\n        'group/message-scroller relative flex size-full min-h-0 flex-col overflow-hidden',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MessageScrollerViewport({\n  className,\n  ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Viewport>) {\n  return (\n    <MessageScrollerPrimitive.Viewport\n      data-slot=\"message-scroller-viewport\"\n      // scroll-fade-b is a spark-adopted shadcn utility; scrollbar-width/gutter\n      // are arbitrary props (spark ships no scrollbar-* utilities) and the native\n      // bar collapses to no-scrollbar (spark util) while autoscrolling.\n      className={cn(\n        'size-full min-h-0 min-w-0 scroll-fade-b overflow-y-auto overscroll-contain contain-content [scrollbar-gutter:stable] [scrollbar-width:thin] data-autoscrolling:no-scrollbar',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MessageScrollerContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Content>) {\n  return (\n    <MessageScrollerPrimitive.Content\n      data-slot=\"message-scroller-content\"\n      className={cn('flex h-max min-h-full flex-col gap-8', className)}\n      {...props}\n    />\n  )\n}\n\nfunction MessageScrollerItem({\n  className,\n  scrollAnchor = false,\n  ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Item>) {\n  return (\n    <MessageScrollerPrimitive.Item\n      data-slot=\"message-scroller-item\"\n      scrollAnchor={scrollAnchor}\n      className={cn(\n        'min-w-0 shrink-0 [contain-intrinsic-size:auto_10rem] [content-visibility:auto]',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\n// Renders a spark <Button> via `render`, so its `styleVariant`/`color`/`size`\n// recipe paints the chrome — we only add positioning + the enter/leave animation\n// keyed off the primitive's data-[active] state. Icon is a MaterialSymbol (spark's\n// icon set), pointing down for `end` and up for `start`.\nfunction MessageScrollerButton({\n  direction = 'end',\n  className,\n  children,\n  render,\n  styleVariant = 'surface',\n  color = 'neutral',\n  size = 'icon-small',\n  ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Button> &\n  Pick<ButtonProps, 'styleVariant' | 'color' | 'size'>) {\n  return (\n    <MessageScrollerPrimitive.Button\n      data-slot=\"message-scroller-button\"\n      data-direction={direction}\n      direction={direction}\n      className={cn(\n        'absolute inset-s-1/2 -translate-x-1/2 rounded-full transition-[translate,scale,opacity] duration-200 data-[active=false]:pointer-events-none data-[active=false]:scale-95 data-[active=false]:opacity-0 data-[active=false]:duration-400 data-[active=false]:ease-[cubic-bezier(0.7,0,0.84,0)] data-[active=true]:translate-y-0 data-[active=true]:scale-100 data-[active=true]:opacity-100 data-[active=true]:ease-[cubic-bezier(0.23,1,0.32,1)] data-[direction=end]:bottom-4 data-[direction=end]:data-[active=false]:translate-y-full data-[direction=start]:top-4 data-[direction=start]:data-[active=false]:-translate-y-full motion-reduce:transition-none rtl:translate-x-1/2',\n        className,\n      )}\n      render={\n        render ?? (\n          <Button styleVariant={styleVariant} color={color} size={size} />\n        )\n      }\n      {...props}\n    >\n      {children ?? (\n        <>\n          <MaterialSymbol\n            name={direction === 'end' ? 'arrow_downward' : 'arrow_upward'}\n          />\n          <span className=\"sr-only\">\n            {direction === 'end' ? 'Scroll to end' : 'Scroll to start'}\n          </span>\n        </>\n      )}\n    </MessageScrollerPrimitive.Button>\n  )\n}\n\nexport {\n  MessageScroller,\n  MessageScrollerButton,\n  MessageScrollerContent,\n  MessageScrollerItem,\n  MessageScrollerProvider,\n  MessageScrollerViewport,\n  useMessageScroller,\n  useMessageScrollerScrollable,\n  useMessageScrollerVisibility,\n}\n"],"mappings":";;;;;;;;AAWA,SAAS,wBACP,OACA;CACA,OAAO,oBAACA,kBAAyB,UAA1B,EAAmC,GAAI,MAAQ,CAAA;AACxD;AAEA,SAAS,gBAAgB,EACvB,WACA,GAAG,SAC0D;CAC7D,OACE,oBAACA,kBAAyB,MAA1B;EACE,aAAU;EACV,WAAW,GACT,mFACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,wBAAwB,EAC/B,WACA,GAAG,SAC8D;CACjE,OACE,oBAACA,kBAAyB,UAA1B;EACE,aAAU;EAIV,WAAW,GACT,+KACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,uBAAuB,EAC9B,WACA,GAAG,SAC6D;CAChE,OACE,oBAACA,kBAAyB,SAA1B;EACE,aAAU;EACV,WAAW,GAAG,wCAAwC,SAAS;EAC/D,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,oBAAoB,EAC3B,WACA,eAAe,OACf,GAAG,SAC0D;CAC7D,OACE,oBAACA,kBAAyB,MAA1B;EACE,aAAU;EACI;EACd,WAAW,GACT,kFACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAMA,SAAS,sBAAsB,EAC7B,YAAY,OACZ,WACA,UACA,QACA,eAAe,WACf,QAAQ,WACR,OAAO,cACP,GAAG,SAEmD;CACtD,OACE,oBAACA,kBAAyB,QAA1B;EACE,aAAU;EACV,kBAAgB;EACL;EACX,WAAW,GACT,ypBACA,SACF;EACA,QACE,UACE,oBAAC,QAAD;GAAsB;GAAqB;GAAa;EAAO,CAAA;EAGnE,GAAI;YAEH,YACC,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,gBAAD,EACE,MAAM,cAAc,QAAQ,mBAAmB,eAChD,CAAA,GACD,oBAAC,QAAD;GAAM,WAAU;aACb,cAAc,QAAQ,kBAAkB;EACrC,CAAA,CACN,EAAA,CAAA;CAE2B,CAAA;AAErC"}
+{"version":3,"file":"message-scroller.js","names":["React","MessageScrollerPrimitive"],"sources":["../../src/components/message-scroller.tsx"],"sourcesContent":["import {\n  MessageScroller as MessageScrollerPrimitive,\n  useMessageScroller,\n  useMessageScrollerScrollable,\n  useMessageScrollerVisibility,\n} from '@shadcn/react/message-scroller'\nimport { LazyMotion, domAnimation } from 'motion/react'\nimport { create } from 'motion/react-m'\nimport * as React from 'react'\nimport { useReducedMotion } from '../hooks/use-reduced-motion'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { MESSAGE_ANIMATIONS } from '../lib/message-animations'\nimport { cn } from '../utils/cn'\nimport { Button, type ButtonProps } from './button'\n\nconst MessageScrollerAnimationReadyContext = React.createContext(false)\n\ntype MessageScrollerItemProps = Omit<\n  React.ComponentProps<typeof MessageScrollerPrimitive.Item>,\n  | 'animate'\n  | 'exit'\n  | 'initial'\n  | 'variants'\n  | 'onAnimationStart'\n  | 'onDrag'\n  | 'onDragStart'\n  | 'onDragEnd'\n  | 'onDragTransitionEnd'\n>\n\nconst MotionMessageScrollerPrimitiveItem = create(MessageScrollerPrimitive.Item)\n\nfunction MessageScrollerProvider(\n  props: React.ComponentProps<typeof MessageScrollerPrimitive.Provider>,\n) {\n  const [ready, setReady] = React.useState(false)\n\n  React.useEffect(() => {\n    setReady(true)\n  }, [])\n\n  return (\n    <LazyMotion features={domAnimation} strict>\n      <MessageScrollerAnimationReadyContext.Provider value={ready}>\n        <MessageScrollerPrimitive.Provider {...props} />\n      </MessageScrollerAnimationReadyContext.Provider>\n    </LazyMotion>\n  )\n}\n\nfunction MessageScroller({\n  className,\n  ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Root>) {\n  return (\n    <MessageScrollerPrimitive.Root\n      data-slot=\"message-scroller\"\n      className={cn(\n        'group/message-scroller relative flex size-full min-h-0 flex-col overflow-hidden',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MessageScrollerViewport({\n  className,\n  ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Viewport>) {\n  return (\n    <MessageScrollerPrimitive.Viewport\n      data-slot=\"message-scroller-viewport\"\n      // scroll-fade-b is a spark-adopted shadcn utility; scrollbar-width/gutter\n      // are arbitrary props (spark ships no scrollbar-* utilities) and the native\n      // bar collapses to no-scrollbar (spark util) while autoscrolling.\n      className={cn(\n        'size-full min-h-0 min-w-0 scroll-fade-b overflow-y-auto overscroll-contain contain-content [scrollbar-gutter:stable] [scrollbar-width:thin] focus-visible:ring-2 focus-visible:ring-spark-11 focus-visible:ring-offset-2 focus-visible:outline-hidden data-autoscrolling:no-scrollbar',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction MessageScrollerContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Content>) {\n  return (\n    <MessageScrollerPrimitive.Content\n      data-slot=\"message-scroller-content\"\n      className={cn('flex h-max min-h-full flex-col gap-8', className)}\n      {...props}\n    />\n  )\n}\n\nfunction MessageScrollerItem({\n  className,\n  scrollAnchor = false,\n  ...props\n}: MessageScrollerItemProps) {\n  const ready = React.useContext(MessageScrollerAnimationReadyContext)\n  const shouldReduceMotion = useReducedMotion()\n  const skipEntrance = !ready || shouldReduceMotion\n\n  return (\n    <MotionMessageScrollerPrimitiveItem\n      {...props}\n      data-slot=\"message-scroller-item\"\n      scrollAnchor={scrollAnchor}\n      className={cn(\n        'min-w-0 shrink-0 [contain-intrinsic-size:auto_10rem] [content-visibility:auto]',\n        className,\n      )}\n      variants={MESSAGE_ANIMATIONS['slide-up'].variants}\n      initial={skipEntrance ? false : 'initial'}\n      animate=\"animate\"\n      exit={skipEntrance ? undefined : 'exit'}\n    />\n  )\n}\n\n// Renders a spark <Button> via `render`, so its `styleVariant`/`color`/`size`\n// recipe paints the chrome — we only add positioning + the enter/leave animation\n// keyed off the primitive's data-[active] state. Icon is a MaterialSymbol (spark's\n// icon set), pointing down for `end` and up for `start`.\nfunction MessageScrollerButton({\n  direction = 'end',\n  className,\n  children,\n  render,\n  styleVariant = 'surface',\n  color = 'neutral',\n  size = 'icon-small',\n  ...props\n}: React.ComponentProps<typeof MessageScrollerPrimitive.Button> &\n  Pick<ButtonProps, 'styleVariant' | 'color' | 'size'>) {\n  return (\n    <MessageScrollerPrimitive.Button\n      data-slot=\"message-scroller-button\"\n      data-direction={direction}\n      direction={direction}\n      className={cn(\n        'absolute inset-s-1/2 -translate-x-1/2 rounded-full transition-[translate,scale,opacity] duration-200 data-[active=false]:pointer-events-none data-[active=false]:scale-95 data-[active=false]:opacity-0 data-[active=false]:duration-400 data-[active=false]:ease-[cubic-bezier(0.7,0,0.84,0)] data-[active=true]:translate-y-0 data-[active=true]:scale-100 data-[active=true]:opacity-100 data-[active=true]:ease-[cubic-bezier(0.23,1,0.32,1)] data-[direction=end]:bottom-4 data-[direction=end]:data-[active=false]:translate-y-full data-[direction=start]:top-4 data-[direction=start]:data-[active=false]:-translate-y-full motion-reduce:transition-none rtl:translate-x-1/2',\n        className,\n      )}\n      render={\n        render ?? (\n          <Button styleVariant={styleVariant} color={color} size={size} />\n        )\n      }\n      {...props}\n    >\n      {children ?? (\n        <>\n          <MaterialSymbol\n            name={direction === 'end' ? 'arrow_downward' : 'arrow_upward'}\n          />\n          <span className=\"sr-only\">\n            {direction === 'end' ? 'Scroll to end' : 'Scroll to start'}\n          </span>\n        </>\n      )}\n    </MessageScrollerPrimitive.Button>\n  )\n}\n\nexport {\n  MessageScroller,\n  MessageScrollerButton,\n  MessageScrollerContent,\n  MessageScrollerItem,\n  MessageScrollerProvider,\n  MessageScrollerViewport,\n  useMessageScroller,\n  useMessageScrollerScrollable,\n  useMessageScrollerVisibility,\n}\n"],"mappings":";;;;;;;;;;;;AAeA,MAAM,uCAAuCA,QAAM,cAAc,KAAK;AAetE,MAAM,qCAAqC,OAAOC,kBAAyB,IAAI;AAE/E,SAAS,wBACP,OACA;CACA,MAAM,CAAC,OAAO,YAAYD,QAAM,SAAS,KAAK;CAE9C,QAAM,gBAAgB;EACpB,SAAS,IAAI;CACf,GAAG,CAAC,CAAC;CAEL,OACE,oBAAC,YAAD;EAAY,UAAU;EAAc,QAAA;YAClC,oBAAC,qCAAqC,UAAtC;GAA+C,OAAO;aACpD,oBAACC,kBAAyB,UAA1B,EAAmC,GAAI,MAAQ,CAAA;EACF,CAAA;CACrC,CAAA;AAEhB;AAEA,SAAS,gBAAgB,EACvB,WACA,GAAG,SAC0D;CAC7D,OACE,oBAACA,kBAAyB,MAA1B;EACE,aAAU;EACV,WAAW,GACT,mFACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,wBAAwB,EAC/B,WACA,GAAG,SAC8D;CACjE,OACE,oBAACA,kBAAyB,UAA1B;EACE,aAAU;EAIV,WAAW,GACT,yRACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,uBAAuB,EAC9B,WACA,GAAG,SAC6D;CAChE,OACE,oBAACA,kBAAyB,SAA1B;EACE,aAAU;EACV,WAAW,GAAG,wCAAwC,SAAS;EAC/D,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,oBAAoB,EAC3B,WACA,eAAe,OACf,GAAG,SACwB;CAC3B,MAAM,QAAQD,QAAM,WAAW,oCAAoC;CACnE,MAAM,qBAAqB,iBAAiB;CAC5C,MAAM,eAAe,CAAC,SAAS;CAE/B,OACE,oBAAC,oCAAD;EACE,GAAI;EACJ,aAAU;EACI;EACd,WAAW,GACT,kFACA,SACF;EACA,UAAU,mBAAmB,YAAY;EACzC,SAAS,eAAe,QAAQ;EAChC,SAAQ;EACR,MAAM,eAAe,KAAA,IAAY;CAClC,CAAA;AAEL;AAMA,SAAS,sBAAsB,EAC7B,YAAY,OACZ,WACA,UACA,QACA,eAAe,WACf,QAAQ,WACR,OAAO,cACP,GAAG,SAEmD;CACtD,OACE,oBAACC,kBAAyB,QAA1B;EACE,aAAU;EACV,kBAAgB;EACL;EACX,WAAW,GACT,ypBACA,SACF;EACA,QACE,UACE,oBAAC,QAAD;GAAsB;GAAqB;GAAa;EAAO,CAAA;EAGnE,GAAI;YAEH,YACC,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,gBAAD,EACE,MAAM,cAAc,QAAQ,mBAAmB,eAChD,CAAA,GACD,oBAAC,QAAD;GAAM,WAAU;aACb,cAAc,QAAQ,kBAAkB;EACrC,CAAA,CACN,EAAA,CAAA;CAE2B,CAAA;AAErC"}

package/dist/components/page-header.d.cts

@@ -6,7 +6,7 @@ import { useRender } from "@base-ui/react/use-render";
 
 //#region src/components/page-header.d.ts
 declare const PageHeader: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLElement> & React$1.RefAttributes<HTMLElement>>;
-declare const PageHeaderBackButton: React$1.ForwardRefExoticComponent<Omit<ButtonProps, "color" | "size" | "styleVariant"> & React$1.RefAttributes<HTMLButtonElement>>;
+declare const PageHeaderBackButton: React$1.ForwardRefExoticComponent<Omit<ButtonProps, "size" | "color" | "styleVariant"> & React$1.RefAttributes<HTMLButtonElement>>;
 declare const PageHeaderTitle: ({
   className,
   ...props

package/dist/components/page-header.d.ts

@@ -6,7 +6,7 @@ import { useRender } from "@base-ui/react/use-render";
 
 //#region src/components/page-header.d.ts
 declare const PageHeader: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLElement> & React$1.RefAttributes<HTMLElement>>;
-declare const PageHeaderBackButton: React$1.ForwardRefExoticComponent<Omit<ButtonProps, "color" | "size" | "styleVariant"> & React$1.RefAttributes<HTMLButtonElement>>;
+declare const PageHeaderBackButton: React$1.ForwardRefExoticComponent<Omit<ButtonProps, "size" | "color" | "styleVariant"> & React$1.RefAttributes<HTMLButtonElement>>;
 declare const PageHeaderTitle: ({
   className,
   ...props

package/dist/components/select.cjs

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-DY84GLCh.cjs");
 const require_icons_material_symbol = require("../icons/material-symbol.cjs");
-const require_lib_input_box_variants = require("../lib/input-box-variants.cjs");
 const require_components_field = require("./field.cjs");
+const require_lib_input_box_variants = require("../lib/input-box-variants.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");

package/dist/components/select.js

@@ -2,8 +2,8 @@
 "use client";
 import { cn } from "../utils/cn.js";
 import { MaterialSymbol } from "../icons/material-symbol.js";
-import { boxChrome } from "../lib/input-box-variants.js";
 import { useFieldControl } from "./field.js";
+import { boxChrome } from "../lib/input-box-variants.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Select as Select$1 } from "@base-ui/react/select";

package/dist/components/textarea.cjs

@@ -1,8 +1,8 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-DY84GLCh.cjs");
-const require_lib_input_box_variants = require("../lib/input-box-variants.cjs");
 const require_components_field = require("./field.cjs");
+const require_lib_input_box_variants = require("../lib/input-box-variants.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");

package/dist/components/textarea.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "../utils/cn.js";
-import { GHOST_UNDERLINE, boxChrome } from "../lib/input-box-variants.js";
 import { useFieldControl } from "./field.js";
+import { GHOST_UNDERLINE, boxChrome } from "../lib/input-box-variants.js";
 import * as React$1 from "react";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";

package/dist/icons/material-symbol.cjs

@@ -59,6 +59,7 @@ const materialSymbolIconNames = [
 	"open_in_new",
 	"payments",
 	"pending",
+	"photo_camera",
 	"power",
 	"search",
 	"power_settings_new",

package/dist/icons/material-symbol.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"material-symbol.cjs","names":[],"sources":["../../src/icons/material-symbol.tsx"],"sourcesContent":["import { cn } from '../utils/cn'\n\nexport const materialSymbolIconNames = [\n  'access_time',\n  'add',\n  'alarm',\n  'arrow_downward',\n  'arrow_upward',\n  'auto_awesome',\n  'bar_chart',\n  'battery_0_bar',\n  'battery_1_bar',\n  'battery_2_bar',\n  'battery_3_bar',\n  'battery_4_bar',\n  'battery_5_bar',\n  'battery_6_bar',\n  'battery_charging_20',\n  'battery_charging_30',\n  'battery_charging_50',\n  'battery_charging_60',\n  'battery_charging_80',\n  'battery_charging_90',\n  'battery_charging_full',\n  'battery_full',\n  'bolt',\n  'calendar_month',\n  'cancel',\n  'check',\n  'check_circle',\n  'chevron_left',\n  'chevron_right',\n  'circle',\n  'close',\n  'close_fullscreen',\n  'content_copy',\n  'dashboard_2',\n  'delete',\n  'dishwasher',\n  'drag_indicator',\n  'edit',\n  'edit_square',\n  'electric_bolt',\n  'electric_car',\n  'electrical_services',\n  'ev_station',\n  'expand_more',\n  'heat_pump',\n  'home',\n  'info',\n  'laundry',\n  'layers',\n  'local_fire_department',\n  'more_vert',\n  'open_in_full',\n  'open_in_new',\n  'payments',\n  'pending',\n  'power',\n  'search',\n  'power_settings_new',\n  'price_change',\n  'recycling',\n  'refresh',\n  'schedule',\n  'settings',\n  'solar_power',\n  'speed',\n  'sunny',\n  'partly_cloudy_day',\n  'cloudy',\n  'rainy',\n  'weather_snowy',\n  'swap_vert',\n  'thermostat',\n  'toggle_on',\n  'track_changes',\n  'trending_down',\n  'trending_up',\n  'tune',\n  'warning',\n  'wifi_off',\n] as const\n\nexport const materialSymbolIconNamesString = [...materialSymbolIconNames]\n  .sort()\n  .join(',')\nexport const materialSymbolIconNamesURL = `https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20,400,0,0&icon_names=${materialSymbolIconNamesString}&display=block`\n\nexport type MaterialSymbolIconName = (typeof materialSymbolIconNames)[number]\n\nexport type MaterialSymbolProps = {\n  name: MaterialSymbolIconName\n  className?: string\n}\n\nconst MaterialSymbol = ({ name, className }: MaterialSymbolProps) => {\n  if (!materialSymbolIconNames.includes(name)) {\n    console.warn(\n      `[MaterialSymbol] \"${name}\" isn't a recognized icon name — it will render as literal text, not an icon. See materialSymbolIconNames from '@epilot/spark-ui/icons' for the full set.`,\n    )\n  }\n\n  return (\n    <span\n      aria-hidden=\"true\"\n      className={cn(\n        // !important: the Google Fonts stylesheet is unlayered (24px) and beats every layered\n        // utility — callers size the icon via --spark-icon-size, not font-size classes\n        'material-symbols-rounded inline-block size-(length:--spark-icon-size,20px) shrink-0 overflow-hidden text-(length:--spark-icon-size,20px)! leading-none select-none',\n        className,\n      )}\n      translate=\"no\"\n    >\n      {name}\n    </span>\n  )\n}\nMaterialSymbol.displayName = 'MaterialSymbol'\n\nexport { MaterialSymbol }\n"],"mappings":";;;;;AAEA,MAAa,0BAA0B;CACrC;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,MAAa,gCAAgC,CAAC,GAAG,uBAAuB,EACrE,KAAK,EACL,KAAK,GAAG;AACX,MAAa,6BAA6B,+GAA+G,8BAA8B;AASvL,MAAM,kBAAkB,EAAE,MAAM,gBAAqC;CACnE,IAAI,CAAC,wBAAwB,SAAS,IAAI,GACxC,QAAQ,KACN,qBAAqB,KAAK,0JAC5B;CAGF,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EACE,eAAY;EACZ,YAAA,GAAA,OAAA,IAGE,sKACA,SACF;EACA,WAAU;YAET;CACG,CAAA;AAEV;AACA,eAAe,cAAc"}
+{"version":3,"file":"material-symbol.cjs","names":[],"sources":["../../src/icons/material-symbol.tsx"],"sourcesContent":["import { cn } from '../utils/cn'\n\nexport const materialSymbolIconNames = [\n  'access_time',\n  'add',\n  'alarm',\n  'arrow_downward',\n  'arrow_upward',\n  'auto_awesome',\n  'bar_chart',\n  'battery_0_bar',\n  'battery_1_bar',\n  'battery_2_bar',\n  'battery_3_bar',\n  'battery_4_bar',\n  'battery_5_bar',\n  'battery_6_bar',\n  'battery_charging_20',\n  'battery_charging_30',\n  'battery_charging_50',\n  'battery_charging_60',\n  'battery_charging_80',\n  'battery_charging_90',\n  'battery_charging_full',\n  'battery_full',\n  'bolt',\n  'calendar_month',\n  'cancel',\n  'check',\n  'check_circle',\n  'chevron_left',\n  'chevron_right',\n  'circle',\n  'close',\n  'close_fullscreen',\n  'content_copy',\n  'dashboard_2',\n  'delete',\n  'dishwasher',\n  'drag_indicator',\n  'edit',\n  'edit_square',\n  'electric_bolt',\n  'electric_car',\n  'electrical_services',\n  'ev_station',\n  'expand_more',\n  'heat_pump',\n  'home',\n  'info',\n  'laundry',\n  'layers',\n  'local_fire_department',\n  'more_vert',\n  'open_in_full',\n  'open_in_new',\n  'payments',\n  'pending',\n  'photo_camera',\n  'power',\n  'search',\n  'power_settings_new',\n  'price_change',\n  'recycling',\n  'refresh',\n  'schedule',\n  'settings',\n  'solar_power',\n  'speed',\n  'sunny',\n  'partly_cloudy_day',\n  'cloudy',\n  'rainy',\n  'weather_snowy',\n  'swap_vert',\n  'thermostat',\n  'toggle_on',\n  'track_changes',\n  'trending_down',\n  'trending_up',\n  'tune',\n  'warning',\n  'wifi_off',\n] as const\n\nexport const materialSymbolIconNamesString = [...materialSymbolIconNames]\n  .sort()\n  .join(',')\nexport const materialSymbolIconNamesURL = `https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20,400,0,0&icon_names=${materialSymbolIconNamesString}&display=block`\n\nexport type MaterialSymbolIconName = (typeof materialSymbolIconNames)[number]\n\nexport type MaterialSymbolProps = {\n  name: MaterialSymbolIconName\n  className?: string\n}\n\nconst MaterialSymbol = ({ name, className }: MaterialSymbolProps) => {\n  if (!materialSymbolIconNames.includes(name)) {\n    console.warn(\n      `[MaterialSymbol] \"${name}\" isn't a recognized icon name — it will render as literal text, not an icon. See materialSymbolIconNames from '@epilot/spark-ui/icons' for the full set.`,\n    )\n  }\n\n  return (\n    <span\n      aria-hidden=\"true\"\n      className={cn(\n        // !important: the Google Fonts stylesheet is unlayered (24px) and beats every layered\n        // utility — callers size the icon via --spark-icon-size, not font-size classes\n        'material-symbols-rounded inline-block size-(length:--spark-icon-size,20px) shrink-0 overflow-hidden text-(length:--spark-icon-size,20px)! leading-none select-none',\n        className,\n      )}\n      translate=\"no\"\n    >\n      {name}\n    </span>\n  )\n}\nMaterialSymbol.displayName = 'MaterialSymbol'\n\nexport { MaterialSymbol }\n"],"mappings":";;;;;AAEA,MAAa,0BAA0B;CACrC;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,MAAa,gCAAgC,CAAC,GAAG,uBAAuB,EACrE,KAAK,EACL,KAAK,GAAG;AACX,MAAa,6BAA6B,+GAA+G,8BAA8B;AASvL,MAAM,kBAAkB,EAAE,MAAM,gBAAqC;CACnE,IAAI,CAAC,wBAAwB,SAAS,IAAI,GACxC,QAAQ,KACN,qBAAqB,KAAK,0JAC5B;CAGF,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EACE,eAAY;EACZ,YAAA,GAAA,OAAA,IAGE,sKACA,SACF;EACA,WAAU;YAET;CACG,CAAA;AAEV;AACA,eAAe,cAAc"}

package/dist/icons/material-symbol.d.cts

@@ -1,7 +1,7 @@
 "use client";
 
 //#region src/icons/material-symbol.d.ts
-declare const materialSymbolIconNames: readonly ["access_time", "add", "alarm", "arrow_downward", "arrow_upward", "auto_awesome", "bar_chart", "battery_0_bar", "battery_1_bar", "battery_2_bar", "battery_3_bar", "battery_4_bar", "battery_5_bar", "battery_6_bar", "battery_charging_20", "battery_charging_30", "battery_charging_50", "battery_charging_60", "battery_charging_80", "battery_charging_90", "battery_charging_full", "battery_full", "bolt", "calendar_month", "cancel", "check", "check_circle", "chevron_left", "chevron_right", "circle", "close", "close_fullscreen", "content_copy", "dashboard_2", "delete", "dishwasher", "drag_indicator", "edit", "edit_square", "electric_bolt", "electric_car", "electrical_services", "ev_station", "expand_more", "heat_pump", "home", "info", "laundry", "layers", "local_fire_department", "more_vert", "open_in_full", "open_in_new", "payments", "pending", "power", "search", "power_settings_new", "price_change", "recycling", "refresh", "schedule", "settings", "solar_power", "speed", "sunny", "partly_cloudy_day", "cloudy", "rainy", "weather_snowy", "swap_vert", "thermostat", "toggle_on", "track_changes", "trending_down", "trending_up", "tune", "warning", "wifi_off"];
+declare const materialSymbolIconNames: readonly ["access_time", "add", "alarm", "arrow_downward", "arrow_upward", "auto_awesome", "bar_chart", "battery_0_bar", "battery_1_bar", "battery_2_bar", "battery_3_bar", "battery_4_bar", "battery_5_bar", "battery_6_bar", "battery_charging_20", "battery_charging_30", "battery_charging_50", "battery_charging_60", "battery_charging_80", "battery_charging_90", "battery_charging_full", "battery_full", "bolt", "calendar_month", "cancel", "check", "check_circle", "chevron_left", "chevron_right", "circle", "close", "close_fullscreen", "content_copy", "dashboard_2", "delete", "dishwasher", "drag_indicator", "edit", "edit_square", "electric_bolt", "electric_car", "electrical_services", "ev_station", "expand_more", "heat_pump", "home", "info", "laundry", "layers", "local_fire_department", "more_vert", "open_in_full", "open_in_new", "payments", "pending", "photo_camera", "power", "search", "power_settings_new", "price_change", "recycling", "refresh", "schedule", "settings", "solar_power", "speed", "sunny", "partly_cloudy_day", "cloudy", "rainy", "weather_snowy", "swap_vert", "thermostat", "toggle_on", "track_changes", "trending_down", "trending_up", "tune", "warning", "wifi_off"];
 declare const materialSymbolIconNamesString: string;
 declare const materialSymbolIconNamesURL: string;
 type MaterialSymbolIconName = (typeof materialSymbolIconNames)[number];

package/dist/icons/material-symbol.d.ts

@@ -1,7 +1,7 @@
 "use client";
 
 //#region src/icons/material-symbol.d.ts
-declare const materialSymbolIconNames: readonly ["access_time", "add", "alarm", "arrow_downward", "arrow_upward", "auto_awesome", "bar_chart", "battery_0_bar", "battery_1_bar", "battery_2_bar", "battery_3_bar", "battery_4_bar", "battery_5_bar", "battery_6_bar", "battery_charging_20", "battery_charging_30", "battery_charging_50", "battery_charging_60", "battery_charging_80", "battery_charging_90", "battery_charging_full", "battery_full", "bolt", "calendar_month", "cancel", "check", "check_circle", "chevron_left", "chevron_right", "circle", "close", "close_fullscreen", "content_copy", "dashboard_2", "delete", "dishwasher", "drag_indicator", "edit", "edit_square", "electric_bolt", "electric_car", "electrical_services", "ev_station", "expand_more", "heat_pump", "home", "info", "laundry", "layers", "local_fire_department", "more_vert", "open_in_full", "open_in_new", "payments", "pending", "power", "search", "power_settings_new", "price_change", "recycling", "refresh", "schedule", "settings", "solar_power", "speed", "sunny", "partly_cloudy_day", "cloudy", "rainy", "weather_snowy", "swap_vert", "thermostat", "toggle_on", "track_changes", "trending_down", "trending_up", "tune", "warning", "wifi_off"];
+declare const materialSymbolIconNames: readonly ["access_time", "add", "alarm", "arrow_downward", "arrow_upward", "auto_awesome", "bar_chart", "battery_0_bar", "battery_1_bar", "battery_2_bar", "battery_3_bar", "battery_4_bar", "battery_5_bar", "battery_6_bar", "battery_charging_20", "battery_charging_30", "battery_charging_50", "battery_charging_60", "battery_charging_80", "battery_charging_90", "battery_charging_full", "battery_full", "bolt", "calendar_month", "cancel", "check", "check_circle", "chevron_left", "chevron_right", "circle", "close", "close_fullscreen", "content_copy", "dashboard_2", "delete", "dishwasher", "drag_indicator", "edit", "edit_square", "electric_bolt", "electric_car", "electrical_services", "ev_station", "expand_more", "heat_pump", "home", "info", "laundry", "layers", "local_fire_department", "more_vert", "open_in_full", "open_in_new", "payments", "pending", "photo_camera", "power", "search", "power_settings_new", "price_change", "recycling", "refresh", "schedule", "settings", "solar_power", "speed", "sunny", "partly_cloudy_day", "cloudy", "rainy", "weather_snowy", "swap_vert", "thermostat", "toggle_on", "track_changes", "trending_down", "trending_up", "tune", "warning", "wifi_off"];
 declare const materialSymbolIconNamesString: string;
 declare const materialSymbolIconNamesURL: string;
 type MaterialSymbolIconName = (typeof materialSymbolIconNames)[number];

package/dist/icons/material-symbol.js

@@ -58,6 +58,7 @@ const materialSymbolIconNames = [
 	"open_in_new",
 	"payments",
 	"pending",
+	"photo_camera",
 	"power",
 	"search",
 	"power_settings_new",

package/dist/icons/material-symbol.js.map

@@ -1 +1 @@
-{"version":3,"file":"material-symbol.js","names":[],"sources":["../../src/icons/material-symbol.tsx"],"sourcesContent":["import { cn } from '../utils/cn'\n\nexport const materialSymbolIconNames = [\n  'access_time',\n  'add',\n  'alarm',\n  'arrow_downward',\n  'arrow_upward',\n  'auto_awesome',\n  'bar_chart',\n  'battery_0_bar',\n  'battery_1_bar',\n  'battery_2_bar',\n  'battery_3_bar',\n  'battery_4_bar',\n  'battery_5_bar',\n  'battery_6_bar',\n  'battery_charging_20',\n  'battery_charging_30',\n  'battery_charging_50',\n  'battery_charging_60',\n  'battery_charging_80',\n  'battery_charging_90',\n  'battery_charging_full',\n  'battery_full',\n  'bolt',\n  'calendar_month',\n  'cancel',\n  'check',\n  'check_circle',\n  'chevron_left',\n  'chevron_right',\n  'circle',\n  'close',\n  'close_fullscreen',\n  'content_copy',\n  'dashboard_2',\n  'delete',\n  'dishwasher',\n  'drag_indicator',\n  'edit',\n  'edit_square',\n  'electric_bolt',\n  'electric_car',\n  'electrical_services',\n  'ev_station',\n  'expand_more',\n  'heat_pump',\n  'home',\n  'info',\n  'laundry',\n  'layers',\n  'local_fire_department',\n  'more_vert',\n  'open_in_full',\n  'open_in_new',\n  'payments',\n  'pending',\n  'power',\n  'search',\n  'power_settings_new',\n  'price_change',\n  'recycling',\n  'refresh',\n  'schedule',\n  'settings',\n  'solar_power',\n  'speed',\n  'sunny',\n  'partly_cloudy_day',\n  'cloudy',\n  'rainy',\n  'weather_snowy',\n  'swap_vert',\n  'thermostat',\n  'toggle_on',\n  'track_changes',\n  'trending_down',\n  'trending_up',\n  'tune',\n  'warning',\n  'wifi_off',\n] as const\n\nexport const materialSymbolIconNamesString = [...materialSymbolIconNames]\n  .sort()\n  .join(',')\nexport const materialSymbolIconNamesURL = `https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20,400,0,0&icon_names=${materialSymbolIconNamesString}&display=block`\n\nexport type MaterialSymbolIconName = (typeof materialSymbolIconNames)[number]\n\nexport type MaterialSymbolProps = {\n  name: MaterialSymbolIconName\n  className?: string\n}\n\nconst MaterialSymbol = ({ name, className }: MaterialSymbolProps) => {\n  if (!materialSymbolIconNames.includes(name)) {\n    console.warn(\n      `[MaterialSymbol] \"${name}\" isn't a recognized icon name — it will render as literal text, not an icon. See materialSymbolIconNames from '@epilot/spark-ui/icons' for the full set.`,\n    )\n  }\n\n  return (\n    <span\n      aria-hidden=\"true\"\n      className={cn(\n        // !important: the Google Fonts stylesheet is unlayered (24px) and beats every layered\n        // utility — callers size the icon via --spark-icon-size, not font-size classes\n        'material-symbols-rounded inline-block size-(length:--spark-icon-size,20px) shrink-0 overflow-hidden text-(length:--spark-icon-size,20px)! leading-none select-none',\n        className,\n      )}\n      translate=\"no\"\n    >\n      {name}\n    </span>\n  )\n}\nMaterialSymbol.displayName = 'MaterialSymbol'\n\nexport { MaterialSymbol }\n"],"mappings":";;;;AAEA,MAAa,0BAA0B;CACrC;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,MAAa,gCAAgC,CAAC,GAAG,uBAAuB,EACrE,KAAK,EACL,KAAK,GAAG;AACX,MAAa,6BAA6B,+GAA+G,8BAA8B;AASvL,MAAM,kBAAkB,EAAE,MAAM,gBAAqC;CACnE,IAAI,CAAC,wBAAwB,SAAS,IAAI,GACxC,QAAQ,KACN,qBAAqB,KAAK,0JAC5B;CAGF,OACE,oBAAC,QAAD;EACE,eAAY;EACZ,WAAW,GAGT,sKACA,SACF;EACA,WAAU;YAET;CACG,CAAA;AAEV;AACA,eAAe,cAAc"}
+{"version":3,"file":"material-symbol.js","names":[],"sources":["../../src/icons/material-symbol.tsx"],"sourcesContent":["import { cn } from '../utils/cn'\n\nexport const materialSymbolIconNames = [\n  'access_time',\n  'add',\n  'alarm',\n  'arrow_downward',\n  'arrow_upward',\n  'auto_awesome',\n  'bar_chart',\n  'battery_0_bar',\n  'battery_1_bar',\n  'battery_2_bar',\n  'battery_3_bar',\n  'battery_4_bar',\n  'battery_5_bar',\n  'battery_6_bar',\n  'battery_charging_20',\n  'battery_charging_30',\n  'battery_charging_50',\n  'battery_charging_60',\n  'battery_charging_80',\n  'battery_charging_90',\n  'battery_charging_full',\n  'battery_full',\n  'bolt',\n  'calendar_month',\n  'cancel',\n  'check',\n  'check_circle',\n  'chevron_left',\n  'chevron_right',\n  'circle',\n  'close',\n  'close_fullscreen',\n  'content_copy',\n  'dashboard_2',\n  'delete',\n  'dishwasher',\n  'drag_indicator',\n  'edit',\n  'edit_square',\n  'electric_bolt',\n  'electric_car',\n  'electrical_services',\n  'ev_station',\n  'expand_more',\n  'heat_pump',\n  'home',\n  'info',\n  'laundry',\n  'layers',\n  'local_fire_department',\n  'more_vert',\n  'open_in_full',\n  'open_in_new',\n  'payments',\n  'pending',\n  'photo_camera',\n  'power',\n  'search',\n  'power_settings_new',\n  'price_change',\n  'recycling',\n  'refresh',\n  'schedule',\n  'settings',\n  'solar_power',\n  'speed',\n  'sunny',\n  'partly_cloudy_day',\n  'cloudy',\n  'rainy',\n  'weather_snowy',\n  'swap_vert',\n  'thermostat',\n  'toggle_on',\n  'track_changes',\n  'trending_down',\n  'trending_up',\n  'tune',\n  'warning',\n  'wifi_off',\n] as const\n\nexport const materialSymbolIconNamesString = [...materialSymbolIconNames]\n  .sort()\n  .join(',')\nexport const materialSymbolIconNamesURL = `https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20,400,0,0&icon_names=${materialSymbolIconNamesString}&display=block`\n\nexport type MaterialSymbolIconName = (typeof materialSymbolIconNames)[number]\n\nexport type MaterialSymbolProps = {\n  name: MaterialSymbolIconName\n  className?: string\n}\n\nconst MaterialSymbol = ({ name, className }: MaterialSymbolProps) => {\n  if (!materialSymbolIconNames.includes(name)) {\n    console.warn(\n      `[MaterialSymbol] \"${name}\" isn't a recognized icon name — it will render as literal text, not an icon. See materialSymbolIconNames from '@epilot/spark-ui/icons' for the full set.`,\n    )\n  }\n\n  return (\n    <span\n      aria-hidden=\"true\"\n      className={cn(\n        // !important: the Google Fonts stylesheet is unlayered (24px) and beats every layered\n        // utility — callers size the icon via --spark-icon-size, not font-size classes\n        'material-symbols-rounded inline-block size-(length:--spark-icon-size,20px) shrink-0 overflow-hidden text-(length:--spark-icon-size,20px)! leading-none select-none',\n        className,\n      )}\n      translate=\"no\"\n    >\n      {name}\n    </span>\n  )\n}\nMaterialSymbol.displayName = 'MaterialSymbol'\n\nexport { MaterialSymbol }\n"],"mappings":";;;;AAEA,MAAa,0BAA0B;CACrC;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,MAAa,gCAAgC,CAAC,GAAG,uBAAuB,EACrE,KAAK,EACL,KAAK,GAAG;AACX,MAAa,6BAA6B,+GAA+G,8BAA8B;AASvL,MAAM,kBAAkB,EAAE,MAAM,gBAAqC;CACnE,IAAI,CAAC,wBAAwB,SAAS,IAAI,GACxC,QAAQ,KACN,qBAAqB,KAAK,0JAC5B;CAGF,OACE,oBAAC,QAAD;EACE,eAAY;EACZ,WAAW,GAGT,sKACA,SACF;EACA,WAAU;YAET;CACG,CAAA;AAEV;AACA,eAAe,cAAc"}

package/dist/lib/message-animations.cjs

@@ -0,0 +1,35 @@
+"use client";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+//#region src/lib/message-animations.ts
+const MESSAGE_ANIMATIONS = { "slide-up": {
+	id: "slide-up",
+	name: "Slide Up",
+	variants: {
+		initial: {
+			opacity: 0,
+			y: 10
+		},
+		animate: {
+			opacity: 1,
+			y: 0,
+			transition: {
+				duration: .26,
+				ease: [
+					.16,
+					1,
+					.3,
+					1
+				]
+			}
+		},
+		exit: {
+			opacity: 0,
+			y: 4,
+			transition: { duration: .15 }
+		}
+	}
+} };
+//#endregion
+exports.MESSAGE_ANIMATIONS = MESSAGE_ANIMATIONS;
+
+//# sourceMappingURL=message-animations.cjs.map

package/dist/lib/message-animations.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"message-animations.cjs","names":[],"sources":["../../src/lib/message-animations.ts"],"sourcesContent":["import type { Variants } from 'motion/react'\n\nconst MESSAGE_ANIMATIONS = {\n  'slide-up': {\n    id: 'slide-up',\n    name: 'Slide Up',\n    variants: {\n      initial: { opacity: 0, y: 10 },\n      animate: {\n        opacity: 1,\n        y: 0,\n        transition: { duration: 0.26, ease: [0.16, 1, 0.3, 1] },\n      },\n      exit: { opacity: 0, y: 4, transition: { duration: 0.15 } },\n    } satisfies Variants,\n  },\n} as const\n\nexport { MESSAGE_ANIMATIONS }\n"],"mappings":";;;AAEA,MAAM,qBAAqB,EACzB,YAAY;CACV,IAAI;CACJ,MAAM;CACN,UAAU;EACR,SAAS;GAAE,SAAS;GAAG,GAAG;EAAG;EAC7B,SAAS;GACP,SAAS;GACT,GAAG;GACH,YAAY;IAAE,UAAU;IAAM,MAAM;KAAC;KAAM;KAAG;KAAK;IAAC;GAAE;EACxD;EACA,MAAM;GAAE,SAAS;GAAG,GAAG;GAAG,YAAY,EAAE,UAAU,IAAK;EAAE;CAC3D;AACF,EACF"}

package/dist/lib/message-animations.d.cts

@@ -0,0 +1,33 @@
+"use client";
+
+//#region src/lib/message-animations.d.ts
+declare const MESSAGE_ANIMATIONS: {
+  readonly 'slide-up': {
+    readonly id: "slide-up";
+    readonly name: "Slide Up";
+    readonly variants: {
+      initial: {
+        opacity: number;
+        y: number;
+      };
+      animate: {
+        opacity: number;
+        y: number;
+        transition: {
+          duration: number;
+          ease: [number, number, number, number];
+        };
+      };
+      exit: {
+        opacity: number;
+        y: number;
+        transition: {
+          duration: number;
+        };
+      };
+    };
+  };
+};
+//#endregion
+export { MESSAGE_ANIMATIONS };
+//# sourceMappingURL=message-animations.d.cts.map

package/dist/lib/message-animations.d.ts

@@ -0,0 +1,33 @@
+"use client";
+
+//#region src/lib/message-animations.d.ts
+declare const MESSAGE_ANIMATIONS: {
+  readonly 'slide-up': {
+    readonly id: "slide-up";
+    readonly name: "Slide Up";
+    readonly variants: {
+      initial: {
+        opacity: number;
+        y: number;
+      };
+      animate: {
+        opacity: number;
+        y: number;
+        transition: {
+          duration: number;
+          ease: [number, number, number, number];
+        };
+      };
+      exit: {
+        opacity: number;
+        y: number;
+        transition: {
+          duration: number;
+        };
+      };
+    };
+  };
+};
+//#endregion
+export { MESSAGE_ANIMATIONS };
+//# sourceMappingURL=message-animations.d.ts.map

package/dist/lib/message-animations.js

@@ -0,0 +1,34 @@
+"use client";
+//#region src/lib/message-animations.ts
+const MESSAGE_ANIMATIONS = { "slide-up": {
+	id: "slide-up",
+	name: "Slide Up",
+	variants: {
+		initial: {
+			opacity: 0,
+			y: 10
+		},
+		animate: {
+			opacity: 1,
+			y: 0,
+			transition: {
+				duration: .26,
+				ease: [
+					.16,
+					1,
+					.3,
+					1
+				]
+			}
+		},
+		exit: {
+			opacity: 0,
+			y: 4,
+			transition: { duration: .15 }
+		}
+	}
+} };
+//#endregion
+export { MESSAGE_ANIMATIONS };
+
+//# sourceMappingURL=message-animations.js.map

package/dist/lib/message-animations.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"message-animations.js","names":[],"sources":["../../src/lib/message-animations.ts"],"sourcesContent":["import type { Variants } from 'motion/react'\n\nconst MESSAGE_ANIMATIONS = {\n  'slide-up': {\n    id: 'slide-up',\n    name: 'Slide Up',\n    variants: {\n      initial: { opacity: 0, y: 10 },\n      animate: {\n        opacity: 1,\n        y: 0,\n        transition: { duration: 0.26, ease: [0.16, 1, 0.3, 1] },\n      },\n      exit: { opacity: 0, y: 4, transition: { duration: 0.15 } },\n    } satisfies Variants,\n  },\n} as const\n\nexport { MESSAGE_ANIMATIONS }\n"],"mappings":";;AAEA,MAAM,qBAAqB,EACzB,YAAY;CACV,IAAI;CACJ,MAAM;CACN,UAAU;EACR,SAAS;GAAE,SAAS;GAAG,GAAG;EAAG;EAC7B,SAAS;GACP,SAAS;GACT,GAAG;GACH,YAAY;IAAE,UAAU;IAAM,MAAM;KAAC;KAAM;KAAG;KAAK;IAAC;GAAE;EACxD;EACA,MAAM;GAAE,SAAS;GAAG,GAAG;GAAG,YAAY,EAAE,UAAU,IAAK;EAAE;CAC3D;AACF,EACF"}

package/dist/styles/theme.css

@@ -581,8 +581,15 @@
 
   :root,
   .spark-theme {
-    /* --spark-10, not Radix's --focus-8: step-8 is ~2.3:1 on light surfaces, below WCAG 1.4.11 (3:1). */
-    --color-focus-root: var(--spark-10);
+    /*
+     * --spark-11, not Radix's --focus-8 nor step 10: steps 9/10 are solved to be
+     * solid fills, so their canvas contrast is incidental — over the 135-hex accent
+     * grid step 10 drops to 1.32:1 (light, warm accents) and 1.75:1 (dark, where it
+     * stays a dark fill). Step 11 is the accent *text* step, so the generator already
+     * solves it against the canvas: ≥4.24:1 light, ≥9.41:1 dark, clearing WCAG 1.4.11
+     * (3:1) for every accent in both appearances.
+     */
+    --color-focus-root: var(--spark-11);
     --color-selection-root: var(--spark-a5);
     --color-autofill-root: var(--spark-a3);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epilot/spark-ui",
-  "version": "0.12.1",
+  "version": "0.12.3",
   "description": "React UI component library from Spark SDK",
   "homepage": "https://spark-ui.epilot.io/docs/ui",
   "license": "Apache-2.0",
@@ -82,6 +82,7 @@
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
     "jsdom": "^29.1.1",
+    "motion": "^13.0.0",
     "postcss": "^8.5.23",
     "react": "^19.2.5",
     "react-dom": "^19.2.5",
@@ -94,6 +95,7 @@
     "vitest-axe": "^0.1.0"
   },
   "peerDependencies": {
+    "motion": "^13.0.0",
     "react": ">=18.0.0",
     "react-dom": ">=18.0.0",
     "tailwindcss": ">=4.1.0",