@epilot/spark-ui 0.12.2 → 0.12.4

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?: "default" | "sm" | "xs" | null | undefined;
+  size?: "sm" | "default" | "xs" | null | undefined;
   orientation?: "horizontal" | "vertical" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Attachment({
@@ -20,7 +20,7 @@ declare function Attachment({
   state?: 'idle' | 'uploading' | 'processing' | 'error' | 'done';
 }): import("react/jsx-runtime").JSX.Element;
 declare const attachmentMediaVariants: (props?: ({
-  variant?: "image" | "icon" | null | undefined;
+  variant?: "icon" | "image" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function AttachmentMedia({
   className,

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?: "default" | "sm" | "xs" | null | undefined;
+  size?: "sm" | "default" | "xs" | null | undefined;
   orientation?: "horizontal" | "vertical" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Attachment({
@@ -20,7 +20,7 @@ declare function Attachment({
   state?: 'idle' | 'uploading' | 'processing' | 'error' | 'done';
 }): import("react/jsx-runtime").JSX.Element;
 declare const attachmentMediaVariants: (props?: ({
-  variant?: "image" | "icon" | null | undefined;
+  variant?: "icon" | "image" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function AttachmentMedia({
   className,

package/dist/components/badge.cjs

@@ -12,7 +12,7 @@ const Badge = react.forwardRef(({ className, children, styleVariant, color, ...p
 		"data-slot": "badge",
 		"data-style": styleVariant !== void 0 || color !== void 0 ? styleVariant ?? "soft" : void 0,
 		"data-accent-color": color ? require_lib_accent_colors.accentByColor[color] : void 0,
-		className: (0, cnfast.cn)("inline-flex h-5 min-w-5 items-center justify-center rounded-sm px-1.5 text-center text-xs font-normal tabular-nums", "border-(length:--spark-style-border-width,1px) border-(--spark-style-border,transparent)", "bg-(--spark-style-bg,var(--neutral-a3)) text-(--spark-style-fg,var(--spark-badge-fg,var(--neutral-a11)))", className),
+		className: (0, cnfast.cn)("inline-flex h-5 min-w-5 items-center justify-center rounded-sm px-1.5 text-center text-xs font-normal tabular-nums [--spark-icon-size:0.75rem]", "border-(length:--spark-style-border-width,1px) border-(--spark-style-border,transparent)", "bg-(--spark-style-bg,var(--neutral-a3)) text-(--spark-style-fg,var(--spark-badge-fg,var(--neutral-a11)))", className),
 		ref,
 		...props,
 		children

package/dist/components/badge.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"badge.cjs","names":["React","accentByColor"],"sources":["../../src/components/badge.tsx"],"sourcesContent":["import * as React from 'react'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\nexport type SparkBadgeColor =\n  | 'accent'\n  | 'neutral'\n  | 'success'\n  | 'warning'\n  | 'danger'\n\ninterface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {\n  styleVariant?: SparkStyle\n  color?: SparkBadgeColor\n  children?: React.ReactNode\n}\n\nconst Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n  ({ className, children, styleVariant, color, ...props }, ref) => {\n    const hasLook = styleVariant !== undefined || color !== undefined\n    return (\n      <span\n        data-slot=\"badge\"\n        data-style={hasLook ? (styleVariant ?? 'soft') : undefined}\n        data-accent-color={color ? accentByColor[color] : undefined}\n        className={cn(\n          'inline-flex h-5 min-w-5 items-center justify-center rounded-sm px-1.5 text-center text-xs font-normal tabular-nums',\n          'border-(length:--spark-style-border-width,1px) border-(--spark-style-border,transparent)',\n          'bg-(--spark-style-bg,var(--neutral-a3)) text-(--spark-style-fg,var(--spark-badge-fg,var(--neutral-a11)))',\n          className,\n        )}\n        ref={ref}\n        {...props}\n      >\n        {children}\n      </span>\n    )\n  },\n)\n\nBadge.displayName = 'Badge'\n\nexport { Badge }\nexport type { BadgeProps }\n"],"mappings":";;;;;;;;;AAkBA,MAAM,QAAQA,MAAM,YACjB,EAAE,WAAW,UAAU,cAAc,OAAO,GAAG,SAAS,QAAQ;CAE/D,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EACE,aAAU;EACV,cAJY,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAI7B,gBAAgB,SAAU,KAAA;EACjD,qBAAmB,QAAQC,0BAAAA,cAAc,SAAS,KAAA;EAClD,YAAA,GAAA,OAAA,IACE,sHACA,4FACA,4GACA,SACF;EACK;EACL,GAAI;EAEH;CACG,CAAA;AAEV,CACF;AAEA,MAAM,cAAc"}
+{"version":3,"file":"badge.cjs","names":["React","accentByColor"],"sources":["../../src/components/badge.tsx"],"sourcesContent":["import * as React from 'react'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\nexport type SparkBadgeColor =\n  | 'accent'\n  | 'neutral'\n  | 'success'\n  | 'warning'\n  | 'danger'\n\ninterface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {\n  styleVariant?: SparkStyle\n  color?: SparkBadgeColor\n  children?: React.ReactNode\n}\n\nconst Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n  ({ className, children, styleVariant, color, ...props }, ref) => {\n    const hasLook = styleVariant !== undefined || color !== undefined\n    return (\n      <span\n        data-slot=\"badge\"\n        data-style={hasLook ? (styleVariant ?? 'soft') : undefined}\n        data-accent-color={color ? accentByColor[color] : undefined}\n        className={cn(\n          'inline-flex h-5 min-w-5 items-center justify-center rounded-sm px-1.5 text-center text-xs font-normal tabular-nums [--spark-icon-size:0.75rem]',\n          'border-(length:--spark-style-border-width,1px) border-(--spark-style-border,transparent)',\n          'bg-(--spark-style-bg,var(--neutral-a3)) text-(--spark-style-fg,var(--spark-badge-fg,var(--neutral-a11)))',\n          className,\n        )}\n        ref={ref}\n        {...props}\n      >\n        {children}\n      </span>\n    )\n  },\n)\n\nBadge.displayName = 'Badge'\n\nexport { Badge }\nexport type { BadgeProps }\n"],"mappings":";;;;;;;;;AAkBA,MAAM,QAAQA,MAAM,YACjB,EAAE,WAAW,UAAU,cAAc,OAAO,GAAG,SAAS,QAAQ;CAE/D,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EACE,aAAU;EACV,cAJY,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAI7B,gBAAgB,SAAU,KAAA;EACjD,qBAAmB,QAAQC,0BAAAA,cAAc,SAAS,KAAA;EAClD,YAAA,GAAA,OAAA,IACE,kJACA,4FACA,4GACA,SACF;EACK;EACL,GAAI;EAEH;CACG,CAAA;AAEV,CACF;AAEA,MAAM,cAAc"}

package/dist/components/badge.js

@@ -9,7 +9,7 @@ const Badge = React$1.forwardRef(({ className, children, styleVariant, color, ..
 		"data-slot": "badge",
 		"data-style": styleVariant !== void 0 || color !== void 0 ? styleVariant ?? "soft" : void 0,
 		"data-accent-color": color ? accentByColor[color] : void 0,
-		className: cn("inline-flex h-5 min-w-5 items-center justify-center rounded-sm px-1.5 text-center text-xs font-normal tabular-nums", "border-(length:--spark-style-border-width,1px) border-(--spark-style-border,transparent)", "bg-(--spark-style-bg,var(--neutral-a3)) text-(--spark-style-fg,var(--spark-badge-fg,var(--neutral-a11)))", className),
+		className: cn("inline-flex h-5 min-w-5 items-center justify-center rounded-sm px-1.5 text-center text-xs font-normal tabular-nums [--spark-icon-size:0.75rem]", "border-(length:--spark-style-border-width,1px) border-(--spark-style-border,transparent)", "bg-(--spark-style-bg,var(--neutral-a3)) text-(--spark-style-fg,var(--spark-badge-fg,var(--neutral-a11)))", className),
 		ref,
 		...props,
 		children

package/dist/components/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","names":["React"],"sources":["../../src/components/badge.tsx"],"sourcesContent":["import * as React from 'react'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\nexport type SparkBadgeColor =\n  | 'accent'\n  | 'neutral'\n  | 'success'\n  | 'warning'\n  | 'danger'\n\ninterface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {\n  styleVariant?: SparkStyle\n  color?: SparkBadgeColor\n  children?: React.ReactNode\n}\n\nconst Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n  ({ className, children, styleVariant, color, ...props }, ref) => {\n    const hasLook = styleVariant !== undefined || color !== undefined\n    return (\n      <span\n        data-slot=\"badge\"\n        data-style={hasLook ? (styleVariant ?? 'soft') : undefined}\n        data-accent-color={color ? accentByColor[color] : undefined}\n        className={cn(\n          'inline-flex h-5 min-w-5 items-center justify-center rounded-sm px-1.5 text-center text-xs font-normal tabular-nums',\n          'border-(length:--spark-style-border-width,1px) border-(--spark-style-border,transparent)',\n          'bg-(--spark-style-bg,var(--neutral-a3)) text-(--spark-style-fg,var(--spark-badge-fg,var(--neutral-a11)))',\n          className,\n        )}\n        ref={ref}\n        {...props}\n      >\n        {children}\n      </span>\n    )\n  },\n)\n\nBadge.displayName = 'Badge'\n\nexport { Badge }\nexport type { BadgeProps }\n"],"mappings":";;;;;;AAkBA,MAAM,QAAQA,QAAM,YACjB,EAAE,WAAW,UAAU,cAAc,OAAO,GAAG,SAAS,QAAQ;CAE/D,OACE,oBAAC,QAAD;EACE,aAAU;EACV,cAJY,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAI7B,gBAAgB,SAAU,KAAA;EACjD,qBAAmB,QAAQ,cAAc,SAAS,KAAA;EAClD,WAAW,GACT,sHACA,4FACA,4GACA,SACF;EACK;EACL,GAAI;EAEH;CACG,CAAA;AAEV,CACF;AAEA,MAAM,cAAc"}
+{"version":3,"file":"badge.js","names":["React"],"sources":["../../src/components/badge.tsx"],"sourcesContent":["import * as React from 'react'\nimport { accentByColor } from '../lib/accent-colors'\nimport type { SparkStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\n\nexport type SparkBadgeColor =\n  | 'accent'\n  | 'neutral'\n  | 'success'\n  | 'warning'\n  | 'danger'\n\ninterface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {\n  styleVariant?: SparkStyle\n  color?: SparkBadgeColor\n  children?: React.ReactNode\n}\n\nconst Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(\n  ({ className, children, styleVariant, color, ...props }, ref) => {\n    const hasLook = styleVariant !== undefined || color !== undefined\n    return (\n      <span\n        data-slot=\"badge\"\n        data-style={hasLook ? (styleVariant ?? 'soft') : undefined}\n        data-accent-color={color ? accentByColor[color] : undefined}\n        className={cn(\n          'inline-flex h-5 min-w-5 items-center justify-center rounded-sm px-1.5 text-center text-xs font-normal tabular-nums [--spark-icon-size:0.75rem]',\n          'border-(length:--spark-style-border-width,1px) border-(--spark-style-border,transparent)',\n          'bg-(--spark-style-bg,var(--neutral-a3)) text-(--spark-style-fg,var(--spark-badge-fg,var(--neutral-a11)))',\n          className,\n        )}\n        ref={ref}\n        {...props}\n      >\n        {children}\n      </span>\n    )\n  },\n)\n\nBadge.displayName = 'Badge'\n\nexport { Badge }\nexport type { BadgeProps }\n"],"mappings":";;;;;;AAkBA,MAAM,QAAQA,QAAM,YACjB,EAAE,WAAW,UAAU,cAAc,OAAO,GAAG,SAAS,QAAQ;CAE/D,OACE,oBAAC,QAAD;EACE,aAAU;EACV,cAJY,iBAAiB,KAAA,KAAa,UAAU,KAAA,IAI7B,gBAAgB,SAAU,KAAA;EACjD,qBAAmB,QAAQ,cAAc,SAAS,KAAA;EAClD,WAAW,GACT,kJACA,4FACA,4GACA,SACF;EACK;EACL,GAAI;EAEH;CACG,CAAA;AAEV,CACF;AAEA,MAAM,cAAc"}

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?: "default" | "ghost" | "outline" | "secondary" | "muted" | "tinted" | "destructive" | null | undefined;
+  variant?: "ghost" | "outline" | "default" | "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?: "default" | "ghost" | "outline" | "secondary" | "muted" | "tinted" | "destructive" | null | undefined;
+  variant?: "ghost" | "outline" | "default" | "secondary" | "muted" | "tinted" | "destructive" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Bubble({
   variant,

package/dist/components/button.d.cts

@@ -8,8 +8,8 @@ import { VariantProps } from "class-variance-authority";
 //#region src/components/button.d.ts
 declare const buttonVariants: (props?: ({
   variant?: "secondary" | "destructive" | "primary" | "tertiary" | "bare" | null | undefined;
-  color?: "neutral" | "accent" | "danger" | null | undefined;
-  size?: "small" | "default" | "icon" | "medium" | "icon-small" | "icon-medium" | null | undefined;
+  color?: "accent" | "neutral" | "danger" | null | undefined;
+  size?: "icon" | "small" | "default" | "medium" | "icon-small" | "icon-medium" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type SparkButtonColor = 'accent' | 'neutral' | 'danger';
 interface ButtonProps extends Omit<React$1.ComponentProps<typeof Button$1>, 'ref'>, Omit<VariantProps<typeof buttonVariants>, 'variant' | 'color'> {

package/dist/components/button.d.ts

@@ -8,8 +8,8 @@ import { VariantProps } from "class-variance-authority";
 //#region src/components/button.d.ts
 declare const buttonVariants: (props?: ({
   variant?: "secondary" | "destructive" | "primary" | "tertiary" | "bare" | null | undefined;
-  color?: "neutral" | "accent" | "danger" | null | undefined;
-  size?: "small" | "default" | "icon" | "medium" | "icon-small" | "icon-medium" | null | undefined;
+  color?: "accent" | "neutral" | "danger" | null | undefined;
+  size?: "icon" | "small" | "default" | "medium" | "icon-small" | "icon-medium" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type SparkButtonColor = 'accent' | 'neutral' | 'danger';
 interface ButtonProps extends Omit<React$1.ComponentProps<typeof Button$1>, 'ref'>, Omit<VariantProps<typeof buttonVariants>, 'variant' | 'color'> {

package/dist/components/callout.cjs

@@ -9,7 +9,7 @@ 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",

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' | '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-[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        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,uNACA;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"}
+{"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

@@ -8,7 +8,7 @@ import { VariantProps } from "class-variance-authority";
 //#region src/components/callout.d.ts
 type CalloutVariant = 'error' | 'info' | 'neutral' | 'success' | 'warning';
 declare const calloutVariants: (props?: ({
-  variant?: "info" | "warning" | "success" | "error" | "neutral" | 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

@@ -8,7 +8,7 @@ import { VariantProps } from "class-variance-authority";
 //#region src/components/callout.d.ts
 type CalloutVariant = 'error' | 'info' | 'neutral' | 'success' | 'warning';
 declare const calloutVariants: (props?: ({
-  variant?: "error" | "success" | "warning" | "info" | "neutral" | 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,7 +6,7 @@ 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",

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' | '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-[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        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,uNACA;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"}
+{"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/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 MotionDiv = (0, motion_react_m.create)("div");
 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
 	});
 }
@@ -33,12 +50,23 @@ function MessageScrollerContent({ className, ...props }) {
 		...props
 	});
 }
-function MessageScrollerItem({ className, scrollAnchor = false, ...props }) {
+function MessageScrollerItem({ className, scrollAnchor = false, children, ...props }) {
+	const ready = react.useContext(MessageScrollerAnimationReadyContext);
+	const shouldReduceMotion = require_hooks_use_reduced_motion.useReducedMotion();
+	const skipEntrance = !ready || shouldReduceMotion;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_shadcn_react_message_scroller.MessageScroller.Item, {
+		...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
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MotionDiv, {
+			className: "w-full min-w-0",
+			variants: require_lib_message_animations.MESSAGE_ANIMATIONS["slide-up"].variants,
+			initial: skipEntrance ? false : "initial",
+			animate: "animate",
+			exit: skipEntrance ? void 0 : "exit",
+			children
+		})
 	});
 }
 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","LazyMotion","domAnimation","MessageScrollerPrimitive","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)\nconst MotionDiv = create('div')\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\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  children,\n  ...props\n}: MessageScrollerItemProps) {\n  const ready = React.useContext(MessageScrollerAnimationReadyContext)\n  const shouldReduceMotion = useReducedMotion()\n  const skipEntrance = !ready || shouldReduceMotion\n\n  return (\n    <MessageScrollerPrimitive.Item\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    >\n      <MotionDiv\n        className=\"w-full min-w-0\"\n        variants={MESSAGE_ANIMATIONS['slide-up'].variants}\n        initial={skipEntrance ? false : 'initial'}\n        animate=\"animate\"\n        exit={skipEntrance ? undefined : 'exit'}\n      >\n        {children}\n      </MotionDiv>\n    </MessageScrollerPrimitive.Item>\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;AACtE,MAAM,aAAA,GAAA,eAAA,QAAmB,KAAK;AAe9B,SAAS,wBACP,OACA;CACA,MAAM,CAAC,OAAO,YAAYA,MAAM,SAAS,KAAK;CAE9C,MAAM,gBAAgB;EACpB,SAAS,IAAI;CACf,GAAG,CAAC,CAAC;CAEL,OACE,iBAAA,GAAA,kBAAA,KAACC,aAAAA,YAAD;EAAY,UAAUC,aAAAA;EAAc,QAAA;YAClC,iBAAA,GAAA,kBAAA,KAAC,qCAAqC,UAAtC;GAA+C,OAAO;aACpD,iBAAA,GAAA,kBAAA,KAACC,+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,UACA,GAAG,SACwB;CAC3B,MAAM,QAAQH,MAAM,WAAW,oCAAoC;CACnE,MAAM,qBAAqBI,iCAAAA,iBAAiB;CAC5C,MAAM,eAAe,CAAC,SAAS;CAE/B,OACE,iBAAA,GAAA,kBAAA,KAACD,+BAAAA,gBAAyB,MAA1B;EACE,GAAI;EACJ,aAAU;EACI;EACd,YAAA,GAAA,OAAA,IACE,kFACA,SACF;YAEA,iBAAA,GAAA,kBAAA,KAAC,WAAD;GACE,WAAU;GACV,UAAUE,+BAAAA,mBAAmB,YAAY;GACzC,SAAS,eAAe,QAAQ;GAChC,SAAQ;GACR,MAAM,eAAe,KAAA,IAAY;GAEhC;EACQ,CAAA;CACkB,CAAA;AAEnC;AAMA,SAAS,sBAAsB,EAC7B,YAAY,OACZ,WACA,UACA,QACA,eAAe,WACf,QAAQ,WACR,OAAO,cACP,GAAG,SAEmD;CACtD,OACE,iBAAA,GAAA,kBAAA,KAACF,+BAAAA,gBAAyB,QAA1B;EACE,aAAU;EACV,kBAAgB;EACL;EACX,YAAA,GAAA,OAAA,IACE,ypBACA,SACF;EACA,QACE,UACE,iBAAA,GAAA,kBAAA,KAACG,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,
@@ -21,8 +22,9 @@ declare function MessageScrollerContent({
 declare function MessageScrollerItem({
   className,
   scrollAnchor,
+  children,
   ...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,
@@ -21,8 +22,9 @@ declare function MessageScrollerContent({
 declare function MessageScrollerItem({
   className,
   scrollAnchor,
+  children,
   ...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 MotionDiv = create("div");
 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
 	});
 }
@@ -30,12 +47,23 @@ function MessageScrollerContent({ className, ...props }) {
 		...props
 	});
 }
-function MessageScrollerItem({ className, scrollAnchor = false, ...props }) {
+function MessageScrollerItem({ className, scrollAnchor = false, children, ...props }) {
+	const ready = React$1.useContext(MessageScrollerAnimationReadyContext);
+	const shouldReduceMotion = useReducedMotion();
+	const skipEntrance = !ready || shouldReduceMotion;
 	return /* @__PURE__ */ jsx(MessageScroller$1.Item, {
+		...props,
 		"data-slot": "message-scroller-item",
 		scrollAnchor,
 		className: cn("min-w-0 shrink-0 [contain-intrinsic-size:auto_10rem] [content-visibility:auto]", className),
-		...props
+		children: /* @__PURE__ */ jsx(MotionDiv, {
+			className: "w-full min-w-0",
+			variants: MESSAGE_ANIMATIONS["slide-up"].variants,
+			initial: skipEntrance ? false : "initial",
+			animate: "animate",
+			exit: skipEntrance ? void 0 : "exit",
+			children
+		})
 	});
 }
 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)\nconst MotionDiv = create('div')\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\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  children,\n  ...props\n}: MessageScrollerItemProps) {\n  const ready = React.useContext(MessageScrollerAnimationReadyContext)\n  const shouldReduceMotion = useReducedMotion()\n  const skipEntrance = !ready || shouldReduceMotion\n\n  return (\n    <MessageScrollerPrimitive.Item\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    >\n      <MotionDiv\n        className=\"w-full min-w-0\"\n        variants={MESSAGE_ANIMATIONS['slide-up'].variants}\n        initial={skipEntrance ? false : 'initial'}\n        animate=\"animate\"\n        exit={skipEntrance ? undefined : 'exit'}\n      >\n        {children}\n      </MotionDiv>\n    </MessageScrollerPrimitive.Item>\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;AACtE,MAAM,YAAY,OAAO,KAAK;AAe9B,SAAS,wBACP,OACA;CACA,MAAM,CAAC,OAAO,YAAYA,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,UACA,GAAG,SACwB;CAC3B,MAAM,QAAQD,QAAM,WAAW,oCAAoC;CACnE,MAAM,qBAAqB,iBAAiB;CAC5C,MAAM,eAAe,CAAC,SAAS;CAE/B,OACE,oBAACC,kBAAyB,MAA1B;EACE,GAAI;EACJ,aAAU;EACI;EACd,WAAW,GACT,kFACA,SACF;YAEA,oBAAC,WAAD;GACE,WAAU;GACV,UAAU,mBAAmB,YAAY;GACzC,SAAS,eAAe,QAAQ;GAChC,SAAQ;GACR,MAAM,eAAe,KAAA,IAAY;GAEhC;EACQ,CAAA;CACkB,CAAA;AAEnC;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"}

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" | "styleVariant" | "color"> & 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" | "styleVariant" | "color"> & React$1.RefAttributes<HTMLButtonElement>>;
 declare const PageHeaderTitle: ({
   className,
   ...props

package/dist/components/tooltip.cjs

@@ -62,7 +62,7 @@ const InfoTooltip = ({ content, label, "aria-label": ariaLabel }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Tooltip, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(TooltipTrigger, {
 		render: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 			"aria-label": ariaLabel ?? label,
-			className: "focus-visible:ring-primary relative top-px inline-flex size-4 cursor-help items-center justify-center rounded-full text-gray-light transition-colors hover:text-gray focus-visible:ring-2 focus-visible:outline-none",
+			className: "focus-visible:ring-primary inline-flex size-6 min-h-[24px] min-w-[24px] shrink-0 cursor-help items-center justify-center rounded-full p-0 text-gray-light transition-colors hover:text-gray focus-visible:ring-2 focus-visible:outline-none",
 			type: "button"
 		}),
 		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons_material_symbol.MaterialSymbol, {

package/dist/components/tooltip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.cjs","names":["TooltipPrimitive","MaterialSymbol"],"sources":["../../src/components/tooltip.tsx"],"sourcesContent":["import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip'\nimport * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\n\nconst TooltipProvider = ({\n  delay = 0,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Provider>) => {\n  return <TooltipPrimitive.Provider delay={delay} {...props} />\n}\n\nconst TooltipPortal = ({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Portal>) => {\n  return <TooltipPrimitive.Portal data-slot=\"tooltip-portal\" {...props} />\n}\n\ntype TooltipProps = React.ComponentProps<typeof TooltipPrimitive.Root>\n\nconst Tooltip = ({ ...props }: TooltipProps) => {\n  return <TooltipPrimitive.Root {...props} />\n}\n\nconst TooltipTrigger = ({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) => {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />\n}\n\ntype TooltipContentProps = React.ComponentProps<typeof TooltipPrimitive.Popup> &\n  Pick<\n    TooltipPrimitive.Positioner.Props,\n    'align' | 'alignOffset' | 'side' | 'sideOffset'\n  > & {\n    hideArrow?: boolean\n    variant?: 'default' | 'destructive'\n  }\n\nconst TooltipContent = ({\n  className,\n  hideArrow = false,\n  variant = 'default',\n  children,\n  align,\n  alignOffset,\n  side,\n  sideOffset = 4,\n  ...props\n}: TooltipContentProps) => {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        className=\"isolate z-50\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <TooltipPrimitive.Popup\n          data-slot=\"tooltip-content\"\n          data-variant={variant}\n          className={cn(\n            'z-50 w-fit origin-(--transform-origin) rounded-lg p-2 text-xs leading-none transition-[opacity,scale,translate] duration-150',\n            // enter: fade + zoom + a slight per-side slide (was animate-in)\n            'data-starting-style:scale-95 data-starting-style:opacity-0',\n            'data-[side=bottom]:data-starting-style:-translate-y-1 data-[side=left]:data-starting-style:translate-x-1 data-[side=right]:data-starting-style:-translate-x-1 data-[side=top]:data-starting-style:translate-y-1',\n            // exit: instant (was data-[state=closed]:duration-0)\n            'data-ending-style:opacity-0 data-ending-style:duration-0',\n            'data-[variant=default]:bg-gray-12 data-[variant=default]:text-gray-1',\n            'data-[variant=destructive]:bg-red-12 data-[variant=destructive]:text-red-1',\n            className,\n          )}\n          {...props}\n        >\n          {children}\n          {!hideArrow && (\n            <TooltipPrimitive.Arrow\n              data-variant={variant}\n              className={cn(\n                'z-50',\n                // svg tip points up; rotate per side, overlap 2px for a seamless join\n                'data-[side=bottom]:top-[-8px]',\n                'data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180',\n                'data-[side=left]:right-[-13px] data-[side=left]:rotate-90',\n                'data-[side=right]:left-[-13px] data-[side=right]:-rotate-90',\n                'data-[variant=default]:text-gray-12',\n                'data-[variant=destructive]:text-red-12',\n              )}\n            >\n              <svg fill=\"none\" height=\"10\" viewBox=\"0 0 20 10\" width=\"20\">\n                <path\n                  d=\"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z\"\n                  fill=\"currentColor\"\n                />\n              </svg>\n            </TooltipPrimitive.Arrow>\n          )}\n        </TooltipPrimitive.Popup>\n      </TooltipPrimitive.Positioner>\n    </TooltipPrimitive.Portal>\n  )\n}\n\ninterface InfoTooltipProps {\n  content: string\n  label: string\n  'aria-label'?: string\n}\n\nconst InfoTooltip = ({\n  content,\n  label,\n  'aria-label': ariaLabel,\n}: InfoTooltipProps) => {\n  return (\n    <Tooltip>\n      <TooltipTrigger\n        render={\n          <button\n            aria-label={ariaLabel ?? label}\n            className=\"focus-visible:ring-primary relative top-px inline-flex size-4 cursor-help items-center justify-center rounded-full text-gray-light transition-colors hover:text-gray focus-visible:ring-2 focus-visible:outline-none\"\n            type=\"button\"\n          />\n        }\n      >\n        <MaterialSymbol className=\"text-sm!\" name=\"info\" />\n      </TooltipTrigger>\n      <TooltipContent className=\"max-w-xs whitespace-pre-line\">\n        {content}\n      </TooltipContent>\n    </Tooltip>\n  )\n}\n\nexport {\n  Tooltip,\n  TooltipTrigger,\n  TooltipContent,\n  TooltipProvider,\n  TooltipPortal,\n  InfoTooltip,\n}\n"],"mappings":";;;;;;;;;;AAKA,MAAM,mBAAmB,EACvB,QAAQ,GACR,GAAG,YACyD;CAC5D,OAAO,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,UAAlB;EAAkC;EAAO,GAAI;CAAQ,CAAA;AAC9D;AAEA,MAAM,iBAAiB,EACrB,GAAG,YACuD;CAC1D,OAAO,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,QAAlB;EAAyB,aAAU;EAAiB,GAAI;CAAQ,CAAA;AACzE;AAIA,MAAM,WAAW,EAAE,GAAG,YAA0B;CAC9C,OAAO,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,MAAlB,EAAuB,GAAI,MAAQ,CAAA;AAC5C;AAEA,MAAM,kBAAkB,EACtB,GAAG,YACwD;CAC3D,OAAO,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,SAAlB;EAA0B,aAAU;EAAkB,GAAI;CAAQ,CAAA;AAC3E;AAWA,MAAM,kBAAkB,EACtB,WACA,YAAY,OACZ,UAAU,WACV,UACA,OACA,aACA,MACA,aAAa,GACb,GAAG,YACsB;CACzB,OACE,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,QAAlB,EAAA,UACE,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,YAAlB;EACS;EACM;EACb,WAAU;EACJ;EACM;YAEZ,iBAAA,GAAA,kBAAA,MAACA,uBAAAA,QAAiB,OAAlB;GACE,aAAU;GACV,gBAAc;GACd,YAAA,GAAA,OAAA,IACE,gIAEA,8DACA,mNAEA,4DACA,wEACA,8EACA,SACF;GACA,GAAI;aAdN,CAgBG,UACA,CAAC,aACA,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,OAAlB;IACE,gBAAc;IACd,YAAA,GAAA,OAAA,IACE,QAEA,iCACA,4DACA,6DACA,+DACA,uCACA,wCACF;cAEA,iBAAA,GAAA,kBAAA,KAAC,OAAD;KAAK,MAAK;KAAO,QAAO;KAAK,SAAQ;KAAY,OAAM;eACrD,iBAAA,GAAA,kBAAA,KAAC,QAAD;MACE,GAAE;MACF,MAAK;KACN,CAAA;IACE,CAAA;GACiB,CAAA,CAEJ;;CACG,CAAA,EACN,CAAA;AAE7B;AAQA,MAAM,eAAe,EACnB,SACA,OACA,cAAc,gBACQ;CACtB,OACE,iBAAA,GAAA,kBAAA,MAAC,SAAD,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAC,gBAAD;EACE,QACE,iBAAA,GAAA,kBAAA,KAAC,UAAD;GACE,cAAY,aAAa;GACzB,WAAU;GACV,MAAK;EACN,CAAA;YAGH,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,gBAAD;GAAgB,WAAU;GAAW,MAAK;EAAQ,CAAA;CACpC,CAAA,GAChB,iBAAA,GAAA,kBAAA,KAAC,gBAAD;EAAgB,WAAU;YACvB;CACa,CAAA,CACT,EAAA,CAAA;AAEb"}
+{"version":3,"file":"tooltip.cjs","names":["TooltipPrimitive","MaterialSymbol"],"sources":["../../src/components/tooltip.tsx"],"sourcesContent":["import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip'\nimport * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\n\nconst TooltipProvider = ({\n  delay = 0,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Provider>) => {\n  return <TooltipPrimitive.Provider delay={delay} {...props} />\n}\n\nconst TooltipPortal = ({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Portal>) => {\n  return <TooltipPrimitive.Portal data-slot=\"tooltip-portal\" {...props} />\n}\n\ntype TooltipProps = React.ComponentProps<typeof TooltipPrimitive.Root>\n\nconst Tooltip = ({ ...props }: TooltipProps) => {\n  return <TooltipPrimitive.Root {...props} />\n}\n\nconst TooltipTrigger = ({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) => {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />\n}\n\ntype TooltipContentProps = React.ComponentProps<typeof TooltipPrimitive.Popup> &\n  Pick<\n    TooltipPrimitive.Positioner.Props,\n    'align' | 'alignOffset' | 'side' | 'sideOffset'\n  > & {\n    hideArrow?: boolean\n    variant?: 'default' | 'destructive'\n  }\n\nconst TooltipContent = ({\n  className,\n  hideArrow = false,\n  variant = 'default',\n  children,\n  align,\n  alignOffset,\n  side,\n  sideOffset = 4,\n  ...props\n}: TooltipContentProps) => {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        className=\"isolate z-50\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <TooltipPrimitive.Popup\n          data-slot=\"tooltip-content\"\n          data-variant={variant}\n          className={cn(\n            'z-50 w-fit origin-(--transform-origin) rounded-lg p-2 text-xs leading-none transition-[opacity,scale,translate] duration-150',\n            // enter: fade + zoom + a slight per-side slide (was animate-in)\n            'data-starting-style:scale-95 data-starting-style:opacity-0',\n            'data-[side=bottom]:data-starting-style:-translate-y-1 data-[side=left]:data-starting-style:translate-x-1 data-[side=right]:data-starting-style:-translate-x-1 data-[side=top]:data-starting-style:translate-y-1',\n            // exit: instant (was data-[state=closed]:duration-0)\n            'data-ending-style:opacity-0 data-ending-style:duration-0',\n            'data-[variant=default]:bg-gray-12 data-[variant=default]:text-gray-1',\n            'data-[variant=destructive]:bg-red-12 data-[variant=destructive]:text-red-1',\n            className,\n          )}\n          {...props}\n        >\n          {children}\n          {!hideArrow && (\n            <TooltipPrimitive.Arrow\n              data-variant={variant}\n              className={cn(\n                'z-50',\n                // svg tip points up; rotate per side, overlap 2px for a seamless join\n                'data-[side=bottom]:top-[-8px]',\n                'data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180',\n                'data-[side=left]:right-[-13px] data-[side=left]:rotate-90',\n                'data-[side=right]:left-[-13px] data-[side=right]:-rotate-90',\n                'data-[variant=default]:text-gray-12',\n                'data-[variant=destructive]:text-red-12',\n              )}\n            >\n              <svg fill=\"none\" height=\"10\" viewBox=\"0 0 20 10\" width=\"20\">\n                <path\n                  d=\"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z\"\n                  fill=\"currentColor\"\n                />\n              </svg>\n            </TooltipPrimitive.Arrow>\n          )}\n        </TooltipPrimitive.Popup>\n      </TooltipPrimitive.Positioner>\n    </TooltipPrimitive.Portal>\n  )\n}\n\ninterface InfoTooltipProps {\n  content: string\n  label: string\n  'aria-label'?: string\n}\n\nconst InfoTooltip = ({\n  content,\n  label,\n  'aria-label': ariaLabel,\n}: InfoTooltipProps) => {\n  return (\n    <Tooltip>\n      <TooltipTrigger\n        render={\n          <button\n            aria-label={ariaLabel ?? label}\n            className=\"focus-visible:ring-primary inline-flex size-6 min-h-[24px] min-w-[24px] shrink-0 cursor-help items-center justify-center rounded-full p-0 text-gray-light transition-colors hover:text-gray focus-visible:ring-2 focus-visible:outline-none\"\n            type=\"button\"\n          />\n        }\n      >\n        <MaterialSymbol className=\"text-sm!\" name=\"info\" />\n      </TooltipTrigger>\n      <TooltipContent className=\"max-w-xs whitespace-pre-line\">\n        {content}\n      </TooltipContent>\n    </Tooltip>\n  )\n}\n\nexport {\n  Tooltip,\n  TooltipTrigger,\n  TooltipContent,\n  TooltipProvider,\n  TooltipPortal,\n  InfoTooltip,\n}\n"],"mappings":";;;;;;;;;;AAKA,MAAM,mBAAmB,EACvB,QAAQ,GACR,GAAG,YACyD;CAC5D,OAAO,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,UAAlB;EAAkC;EAAO,GAAI;CAAQ,CAAA;AAC9D;AAEA,MAAM,iBAAiB,EACrB,GAAG,YACuD;CAC1D,OAAO,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,QAAlB;EAAyB,aAAU;EAAiB,GAAI;CAAQ,CAAA;AACzE;AAIA,MAAM,WAAW,EAAE,GAAG,YAA0B;CAC9C,OAAO,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,MAAlB,EAAuB,GAAI,MAAQ,CAAA;AAC5C;AAEA,MAAM,kBAAkB,EACtB,GAAG,YACwD;CAC3D,OAAO,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,SAAlB;EAA0B,aAAU;EAAkB,GAAI;CAAQ,CAAA;AAC3E;AAWA,MAAM,kBAAkB,EACtB,WACA,YAAY,OACZ,UAAU,WACV,UACA,OACA,aACA,MACA,aAAa,GACb,GAAG,YACsB;CACzB,OACE,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,QAAlB,EAAA,UACE,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,YAAlB;EACS;EACM;EACb,WAAU;EACJ;EACM;YAEZ,iBAAA,GAAA,kBAAA,MAACA,uBAAAA,QAAiB,OAAlB;GACE,aAAU;GACV,gBAAc;GACd,YAAA,GAAA,OAAA,IACE,gIAEA,8DACA,mNAEA,4DACA,wEACA,8EACA,SACF;GACA,GAAI;aAdN,CAgBG,UACA,CAAC,aACA,iBAAA,GAAA,kBAAA,KAACA,uBAAAA,QAAiB,OAAlB;IACE,gBAAc;IACd,YAAA,GAAA,OAAA,IACE,QAEA,iCACA,4DACA,6DACA,+DACA,uCACA,wCACF;cAEA,iBAAA,GAAA,kBAAA,KAAC,OAAD;KAAK,MAAK;KAAO,QAAO;KAAK,SAAQ;KAAY,OAAM;eACrD,iBAAA,GAAA,kBAAA,KAAC,QAAD;MACE,GAAE;MACF,MAAK;KACN,CAAA;IACE,CAAA;GACiB,CAAA,CAEJ;;CACG,CAAA,EACN,CAAA;AAE7B;AAQA,MAAM,eAAe,EACnB,SACA,OACA,cAAc,gBACQ;CACtB,OACE,iBAAA,GAAA,kBAAA,MAAC,SAAD,EAAA,UAAA,CACE,iBAAA,GAAA,kBAAA,KAAC,gBAAD;EACE,QACE,iBAAA,GAAA,kBAAA,KAAC,UAAD;GACE,cAAY,aAAa;GACzB,WAAU;GACV,MAAK;EACN,CAAA;YAGH,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,gBAAD;GAAgB,WAAU;GAAW,MAAK;EAAQ,CAAA;CACpC,CAAA,GAChB,iBAAA,GAAA,kBAAA,KAAC,gBAAD;EAAgB,WAAU;YACvB;CACa,CAAA,CACT,EAAA,CAAA;AAEb"}

package/dist/components/tooltip.js

@@ -59,7 +59,7 @@ const InfoTooltip = ({ content, label, "aria-label": ariaLabel }) => {
 	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
 		render: /* @__PURE__ */ jsx("button", {
 			"aria-label": ariaLabel ?? label,
-			className: "focus-visible:ring-primary relative top-px inline-flex size-4 cursor-help items-center justify-center rounded-full text-gray-light transition-colors hover:text-gray focus-visible:ring-2 focus-visible:outline-none",
+			className: "focus-visible:ring-primary inline-flex size-6 min-h-[24px] min-w-[24px] shrink-0 cursor-help items-center justify-center rounded-full p-0 text-gray-light transition-colors hover:text-gray focus-visible:ring-2 focus-visible:outline-none",
 			type: "button"
 		}),
 		children: /* @__PURE__ */ jsx(MaterialSymbol, {

package/dist/components/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","names":["TooltipPrimitive"],"sources":["../../src/components/tooltip.tsx"],"sourcesContent":["import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip'\nimport * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\n\nconst TooltipProvider = ({\n  delay = 0,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Provider>) => {\n  return <TooltipPrimitive.Provider delay={delay} {...props} />\n}\n\nconst TooltipPortal = ({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Portal>) => {\n  return <TooltipPrimitive.Portal data-slot=\"tooltip-portal\" {...props} />\n}\n\ntype TooltipProps = React.ComponentProps<typeof TooltipPrimitive.Root>\n\nconst Tooltip = ({ ...props }: TooltipProps) => {\n  return <TooltipPrimitive.Root {...props} />\n}\n\nconst TooltipTrigger = ({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) => {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />\n}\n\ntype TooltipContentProps = React.ComponentProps<typeof TooltipPrimitive.Popup> &\n  Pick<\n    TooltipPrimitive.Positioner.Props,\n    'align' | 'alignOffset' | 'side' | 'sideOffset'\n  > & {\n    hideArrow?: boolean\n    variant?: 'default' | 'destructive'\n  }\n\nconst TooltipContent = ({\n  className,\n  hideArrow = false,\n  variant = 'default',\n  children,\n  align,\n  alignOffset,\n  side,\n  sideOffset = 4,\n  ...props\n}: TooltipContentProps) => {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        className=\"isolate z-50\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <TooltipPrimitive.Popup\n          data-slot=\"tooltip-content\"\n          data-variant={variant}\n          className={cn(\n            'z-50 w-fit origin-(--transform-origin) rounded-lg p-2 text-xs leading-none transition-[opacity,scale,translate] duration-150',\n            // enter: fade + zoom + a slight per-side slide (was animate-in)\n            'data-starting-style:scale-95 data-starting-style:opacity-0',\n            'data-[side=bottom]:data-starting-style:-translate-y-1 data-[side=left]:data-starting-style:translate-x-1 data-[side=right]:data-starting-style:-translate-x-1 data-[side=top]:data-starting-style:translate-y-1',\n            // exit: instant (was data-[state=closed]:duration-0)\n            'data-ending-style:opacity-0 data-ending-style:duration-0',\n            'data-[variant=default]:bg-gray-12 data-[variant=default]:text-gray-1',\n            'data-[variant=destructive]:bg-red-12 data-[variant=destructive]:text-red-1',\n            className,\n          )}\n          {...props}\n        >\n          {children}\n          {!hideArrow && (\n            <TooltipPrimitive.Arrow\n              data-variant={variant}\n              className={cn(\n                'z-50',\n                // svg tip points up; rotate per side, overlap 2px for a seamless join\n                'data-[side=bottom]:top-[-8px]',\n                'data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180',\n                'data-[side=left]:right-[-13px] data-[side=left]:rotate-90',\n                'data-[side=right]:left-[-13px] data-[side=right]:-rotate-90',\n                'data-[variant=default]:text-gray-12',\n                'data-[variant=destructive]:text-red-12',\n              )}\n            >\n              <svg fill=\"none\" height=\"10\" viewBox=\"0 0 20 10\" width=\"20\">\n                <path\n                  d=\"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z\"\n                  fill=\"currentColor\"\n                />\n              </svg>\n            </TooltipPrimitive.Arrow>\n          )}\n        </TooltipPrimitive.Popup>\n      </TooltipPrimitive.Positioner>\n    </TooltipPrimitive.Portal>\n  )\n}\n\ninterface InfoTooltipProps {\n  content: string\n  label: string\n  'aria-label'?: string\n}\n\nconst InfoTooltip = ({\n  content,\n  label,\n  'aria-label': ariaLabel,\n}: InfoTooltipProps) => {\n  return (\n    <Tooltip>\n      <TooltipTrigger\n        render={\n          <button\n            aria-label={ariaLabel ?? label}\n            className=\"focus-visible:ring-primary relative top-px inline-flex size-4 cursor-help items-center justify-center rounded-full text-gray-light transition-colors hover:text-gray focus-visible:ring-2 focus-visible:outline-none\"\n            type=\"button\"\n          />\n        }\n      >\n        <MaterialSymbol className=\"text-sm!\" name=\"info\" />\n      </TooltipTrigger>\n      <TooltipContent className=\"max-w-xs whitespace-pre-line\">\n        {content}\n      </TooltipContent>\n    </Tooltip>\n  )\n}\n\nexport {\n  Tooltip,\n  TooltipTrigger,\n  TooltipContent,\n  TooltipProvider,\n  TooltipPortal,\n  InfoTooltip,\n}\n"],"mappings":";;;;;;;AAKA,MAAM,mBAAmB,EACvB,QAAQ,GACR,GAAG,YACyD;CAC5D,OAAO,oBAACA,UAAiB,UAAlB;EAAkC;EAAO,GAAI;CAAQ,CAAA;AAC9D;AAEA,MAAM,iBAAiB,EACrB,GAAG,YACuD;CAC1D,OAAO,oBAACA,UAAiB,QAAlB;EAAyB,aAAU;EAAiB,GAAI;CAAQ,CAAA;AACzE;AAIA,MAAM,WAAW,EAAE,GAAG,YAA0B;CAC9C,OAAO,oBAACA,UAAiB,MAAlB,EAAuB,GAAI,MAAQ,CAAA;AAC5C;AAEA,MAAM,kBAAkB,EACtB,GAAG,YACwD;CAC3D,OAAO,oBAACA,UAAiB,SAAlB;EAA0B,aAAU;EAAkB,GAAI;CAAQ,CAAA;AAC3E;AAWA,MAAM,kBAAkB,EACtB,WACA,YAAY,OACZ,UAAU,WACV,UACA,OACA,aACA,MACA,aAAa,GACb,GAAG,YACsB;CACzB,OACE,oBAACA,UAAiB,QAAlB,EAAA,UACE,oBAACA,UAAiB,YAAlB;EACS;EACM;EACb,WAAU;EACJ;EACM;YAEZ,qBAACA,UAAiB,OAAlB;GACE,aAAU;GACV,gBAAc;GACd,WAAW,GACT,gIAEA,8DACA,mNAEA,4DACA,wEACA,8EACA,SACF;GACA,GAAI;aAdN,CAgBG,UACA,CAAC,aACA,oBAACA,UAAiB,OAAlB;IACE,gBAAc;IACd,WAAW,GACT,QAEA,iCACA,4DACA,6DACA,+DACA,uCACA,wCACF;cAEA,oBAAC,OAAD;KAAK,MAAK;KAAO,QAAO;KAAK,SAAQ;KAAY,OAAM;eACrD,oBAAC,QAAD;MACE,GAAE;MACF,MAAK;KACN,CAAA;IACE,CAAA;GACiB,CAAA,CAEJ;;CACG,CAAA,EACN,CAAA;AAE7B;AAQA,MAAM,eAAe,EACnB,SACA,OACA,cAAc,gBACQ;CACtB,OACE,qBAAC,SAAD,EAAA,UAAA,CACE,oBAAC,gBAAD;EACE,QACE,oBAAC,UAAD;GACE,cAAY,aAAa;GACzB,WAAU;GACV,MAAK;EACN,CAAA;YAGH,oBAAC,gBAAD;GAAgB,WAAU;GAAW,MAAK;EAAQ,CAAA;CACpC,CAAA,GAChB,oBAAC,gBAAD;EAAgB,WAAU;YACvB;CACa,CAAA,CACT,EAAA,CAAA;AAEb"}
+{"version":3,"file":"tooltip.js","names":["TooltipPrimitive"],"sources":["../../src/components/tooltip.tsx"],"sourcesContent":["import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip'\nimport * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\n\nconst TooltipProvider = ({\n  delay = 0,\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Provider>) => {\n  return <TooltipPrimitive.Provider delay={delay} {...props} />\n}\n\nconst TooltipPortal = ({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Portal>) => {\n  return <TooltipPrimitive.Portal data-slot=\"tooltip-portal\" {...props} />\n}\n\ntype TooltipProps = React.ComponentProps<typeof TooltipPrimitive.Root>\n\nconst Tooltip = ({ ...props }: TooltipProps) => {\n  return <TooltipPrimitive.Root {...props} />\n}\n\nconst TooltipTrigger = ({\n  ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) => {\n  return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />\n}\n\ntype TooltipContentProps = React.ComponentProps<typeof TooltipPrimitive.Popup> &\n  Pick<\n    TooltipPrimitive.Positioner.Props,\n    'align' | 'alignOffset' | 'side' | 'sideOffset'\n  > & {\n    hideArrow?: boolean\n    variant?: 'default' | 'destructive'\n  }\n\nconst TooltipContent = ({\n  className,\n  hideArrow = false,\n  variant = 'default',\n  children,\n  align,\n  alignOffset,\n  side,\n  sideOffset = 4,\n  ...props\n}: TooltipContentProps) => {\n  return (\n    <TooltipPrimitive.Portal>\n      <TooltipPrimitive.Positioner\n        align={align}\n        alignOffset={alignOffset}\n        className=\"isolate z-50\"\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <TooltipPrimitive.Popup\n          data-slot=\"tooltip-content\"\n          data-variant={variant}\n          className={cn(\n            'z-50 w-fit origin-(--transform-origin) rounded-lg p-2 text-xs leading-none transition-[opacity,scale,translate] duration-150',\n            // enter: fade + zoom + a slight per-side slide (was animate-in)\n            'data-starting-style:scale-95 data-starting-style:opacity-0',\n            'data-[side=bottom]:data-starting-style:-translate-y-1 data-[side=left]:data-starting-style:translate-x-1 data-[side=right]:data-starting-style:-translate-x-1 data-[side=top]:data-starting-style:translate-y-1',\n            // exit: instant (was data-[state=closed]:duration-0)\n            'data-ending-style:opacity-0 data-ending-style:duration-0',\n            'data-[variant=default]:bg-gray-12 data-[variant=default]:text-gray-1',\n            'data-[variant=destructive]:bg-red-12 data-[variant=destructive]:text-red-1',\n            className,\n          )}\n          {...props}\n        >\n          {children}\n          {!hideArrow && (\n            <TooltipPrimitive.Arrow\n              data-variant={variant}\n              className={cn(\n                'z-50',\n                // svg tip points up; rotate per side, overlap 2px for a seamless join\n                'data-[side=bottom]:top-[-8px]',\n                'data-[side=top]:bottom-[-8px] data-[side=top]:rotate-180',\n                'data-[side=left]:right-[-13px] data-[side=left]:rotate-90',\n                'data-[side=right]:left-[-13px] data-[side=right]:-rotate-90',\n                'data-[variant=default]:text-gray-12',\n                'data-[variant=destructive]:text-red-12',\n              )}\n            >\n              <svg fill=\"none\" height=\"10\" viewBox=\"0 0 20 10\" width=\"20\">\n                <path\n                  d=\"M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z\"\n                  fill=\"currentColor\"\n                />\n              </svg>\n            </TooltipPrimitive.Arrow>\n          )}\n        </TooltipPrimitive.Popup>\n      </TooltipPrimitive.Positioner>\n    </TooltipPrimitive.Portal>\n  )\n}\n\ninterface InfoTooltipProps {\n  content: string\n  label: string\n  'aria-label'?: string\n}\n\nconst InfoTooltip = ({\n  content,\n  label,\n  'aria-label': ariaLabel,\n}: InfoTooltipProps) => {\n  return (\n    <Tooltip>\n      <TooltipTrigger\n        render={\n          <button\n            aria-label={ariaLabel ?? label}\n            className=\"focus-visible:ring-primary inline-flex size-6 min-h-[24px] min-w-[24px] shrink-0 cursor-help items-center justify-center rounded-full p-0 text-gray-light transition-colors hover:text-gray focus-visible:ring-2 focus-visible:outline-none\"\n            type=\"button\"\n          />\n        }\n      >\n        <MaterialSymbol className=\"text-sm!\" name=\"info\" />\n      </TooltipTrigger>\n      <TooltipContent className=\"max-w-xs whitespace-pre-line\">\n        {content}\n      </TooltipContent>\n    </Tooltip>\n  )\n}\n\nexport {\n  Tooltip,\n  TooltipTrigger,\n  TooltipContent,\n  TooltipProvider,\n  TooltipPortal,\n  InfoTooltip,\n}\n"],"mappings":";;;;;;;AAKA,MAAM,mBAAmB,EACvB,QAAQ,GACR,GAAG,YACyD;CAC5D,OAAO,oBAACA,UAAiB,UAAlB;EAAkC;EAAO,GAAI;CAAQ,CAAA;AAC9D;AAEA,MAAM,iBAAiB,EACrB,GAAG,YACuD;CAC1D,OAAO,oBAACA,UAAiB,QAAlB;EAAyB,aAAU;EAAiB,GAAI;CAAQ,CAAA;AACzE;AAIA,MAAM,WAAW,EAAE,GAAG,YAA0B;CAC9C,OAAO,oBAACA,UAAiB,MAAlB,EAAuB,GAAI,MAAQ,CAAA;AAC5C;AAEA,MAAM,kBAAkB,EACtB,GAAG,YACwD;CAC3D,OAAO,oBAACA,UAAiB,SAAlB;EAA0B,aAAU;EAAkB,GAAI;CAAQ,CAAA;AAC3E;AAWA,MAAM,kBAAkB,EACtB,WACA,YAAY,OACZ,UAAU,WACV,UACA,OACA,aACA,MACA,aAAa,GACb,GAAG,YACsB;CACzB,OACE,oBAACA,UAAiB,QAAlB,EAAA,UACE,oBAACA,UAAiB,YAAlB;EACS;EACM;EACb,WAAU;EACJ;EACM;YAEZ,qBAACA,UAAiB,OAAlB;GACE,aAAU;GACV,gBAAc;GACd,WAAW,GACT,gIAEA,8DACA,mNAEA,4DACA,wEACA,8EACA,SACF;GACA,GAAI;aAdN,CAgBG,UACA,CAAC,aACA,oBAACA,UAAiB,OAAlB;IACE,gBAAc;IACd,WAAW,GACT,QAEA,iCACA,4DACA,6DACA,+DACA,uCACA,wCACF;cAEA,oBAAC,OAAD;KAAK,MAAK;KAAO,QAAO;KAAK,SAAQ;KAAY,OAAM;eACrD,oBAAC,QAAD;MACE,GAAE;MACF,MAAK;KACN,CAAA;IACE,CAAA;GACiB,CAAA,CAEJ;;CACG,CAAA,EACN,CAAA;AAE7B;AAQA,MAAM,eAAe,EACnB,SACA,OACA,cAAc,gBACQ;CACtB,OACE,qBAAC,SAAD,EAAA,UAAA,CACE,oBAAC,gBAAD;EACE,QACE,oBAAC,UAAD;GACE,cAAY,aAAa;GACzB,WAAU;GACV,MAAK;EACN,CAAA;YAGH,oBAAC,gBAAD;GAAgB,WAAU;GAAW,MAAK;EAAQ,CAAA;CACpC,CAAA,GAChB,oBAAC,gBAAD;EAAgB,WAAU;YACvB;CACa,CAAA,CACT,EAAA,CAAA;AAEb"}

package/dist/icons/material-symbol.cjs

@@ -59,6 +59,7 @@ const materialSymbolIconNames = [
 	"open_in_new",
 	"payments",
 	"pending",
+	"photo_camera",
 	"power",
 	"search",
 	"power_settings_new",
@@ -90,7 +91,7 @@ const MaterialSymbol = ({ name, className }) => {
 	if (!materialSymbolIconNames.includes(name)) console.warn(`[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.`);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 		"aria-hidden": "true",
-		className: (0, cnfast.cn)("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", className),
+		className: (0, cnfast.cn)("material-symbols-rounded inline-block size-[1em] shrink-0 overflow-hidden text-(length:--spark-icon-size,20px)! leading-none select-none", className),
 		translate: "no",
 		children: name
 	});

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 — default size is --spark-icon-size. size-[1em] keeps the box tied to the\n        // effective font-size so text-[Npx]! overrides don't leave a 20px box around a smaller glyph.\n        'material-symbols-rounded inline-block size-[1em] 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,IAIE,4IACA,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",
@@ -89,7 +90,7 @@ const MaterialSymbol = ({ name, className }) => {
 	if (!materialSymbolIconNames.includes(name)) console.warn(`[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.`);
 	return /* @__PURE__ */ jsx("span", {
 		"aria-hidden": "true",
-		className: cn("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", className),
+		className: cn("material-symbols-rounded inline-block size-[1em] shrink-0 overflow-hidden text-(length:--spark-icon-size,20px)! leading-none select-none", className),
 		translate: "no",
 		children: name
 	});

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 — default size is --spark-icon-size. size-[1em] keeps the box tied to the\n        // effective font-size so text-[Npx]! overrides don't leave a 20px box around a smaller glyph.\n        'material-symbols-rounded inline-block size-[1em] 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,GAIT,4IACA,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.2",
+  "version": "0.12.4",
   "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",