@epilot/spark-ui 0.15.2 → 0.16.1

package/dist/components/list.js.map

@@ -1 +1 @@
-{"version":3,"file":"list.js","names":["React"],"sources":["../../src/components/list.tsx"],"sourcesContent":["import { useRender } from '@base-ui/react/use-render'\nimport * as React from 'react'\nimport type { ContainerRadius } from '../lib/container-chrome'\nimport type { SparkCardColor, SparkCardVariant } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\nimport { Skeleton } from './skeleton'\n\ntype ListVariant = SparkCardVariant\ntype ListRadius = ContainerRadius\n\n// Rounds only the first/last row of a run, regardless of variant — harmless on ghost\n// (nothing painted to clip). Keyed on `data-radius` alone: unlike fill (below), rounding\n// doesn't depend on variant/color, so no compound group-data selector is needed.\nconst radiusRowClasses: Record<ListRadius, string> = {\n  none: 'group-data-[radius=none]/list:first:rounded-t-none group-data-[radius=none]/list:last:rounded-b-none',\n  sm: 'group-data-[radius=sm]/list:first:rounded-t-sm group-data-[radius=sm]/list:last:rounded-b-sm',\n  md: 'group-data-[radius=md]/list:first:rounded-t-md group-data-[radius=md]/list:last:rounded-b-md',\n  lg: 'group-data-[radius=lg]/list:first:rounded-t-lg group-data-[radius=lg]/list:last:rounded-b-lg',\n  xl: 'group-data-[radius=xl]/list:first:rounded-t-xl group-data-[radius=xl]/list:last:rounded-b-xl',\n  '2xl':\n    'group-data-[radius=2xl]/list:first:rounded-t-2xl group-data-[radius=2xl]/list:last:rounded-b-2xl',\n  '3xl':\n    'group-data-[radius=3xl]/list:first:rounded-t-3xl group-data-[radius=3xl]/list:last:rounded-b-3xl',\n  full: 'group-data-[radius=full]/list:first:rounded-t-full group-data-[radius=full]/list:last:rounded-b-full',\n}\n\n// ListItem publishes `recent` so ListItemTitle can render the inline recency dot; the\n// column context lets the title show it only on the primary (start) column, never the\n// value column of a two-column row.\nconst ListItemContext = React.createContext<{ recent: boolean }>({\n  recent: false,\n})\nconst ListItemColumnContext = React.createContext<{ isEnd: boolean }>({\n  isEnd: false,\n})\n\ninterface ListProps extends React.ComponentProps<'ul'> {\n  /** A prop, not the ambient `data-style` knob — that would cascade into row content. */\n  variant?: ListVariant\n  /** Chrome palette. `neutral` (default) tracks the app neutral; `accent` tints with the brand accent. */\n  color?: SparkCardColor\n  /** Corner radius, as a named step. Unset → `md`, today's fixed behaviour. */\n  radius?: ListRadius\n  /** How many `--spark-layout-gap` units apart each row sits (`soft`/`solid`/`ghost` only). */\n  gap?: number\n}\n\nfunction List({\n  className,\n  variant = 'soft',\n  color = 'neutral',\n  radius = 'md',\n  gap = 0.5,\n  style,\n  ...props\n}: ListProps) {\n  // Fill/border-colour needs BOTH axes at once (e.g. \"soft, tinted with accent\"), which a\n  // single group-data selector can't express and chaining two on the same named group\n  // can't either (that generates a descendant match between two *different* ancestors,\n  // not one ancestor bearing both attributes). Resolving the pair to one value up front\n  // sidesteps it entirely — see the `data-look` selectors on ListItem below.\n  const look = color === 'accent' ? `${variant}-accent` : variant\n  return (\n    <ul\n      // role=list keeps list semantics even under list-style:none (Safari drops them).\n      role=\"list\"\n      data-slot=\"list\"\n      // group/list + data-variant drive every item's per-variant chrome (below).\n      data-variant={variant}\n      data-look={look}\n      data-radius={radius}\n      className={cn(\n        'group/list m-0 list-none p-0',\n        // soft/solid = separate rows → stack with a small gap (the gap IS the divider).\n        // ghost shares that same gap for spacing but no fill/border (see ListItem's\n        // chrome block, which has no ghost selector). surface/outline glue rows into one\n        // panel with no gap at all.\n        'data-[variant=soft]:flex data-[variant=soft]:flex-col data-[variant=soft]:gap-[calc(var(--spark-layout-gap)*var(--list-gap-steps,0.5))]',\n        'data-[variant=solid]:flex data-[variant=solid]:flex-col data-[variant=solid]:gap-[calc(var(--spark-layout-gap)*var(--list-gap-steps,0.5))]',\n        'data-[variant=ghost]:flex data-[variant=ghost]:flex-col data-[variant=ghost]:gap-[calc(var(--spark-layout-gap)*var(--list-gap-steps,0.5))]',\n        className,\n      )}\n      style={\n        {\n          '--list-gap-steps': gap,\n          // solid's fill inverts far enough that the row's own ink must invert with it\n          // (unlike soft/surface/outline's translucent tints, where the default ink\n          // stays legible regardless of colour) — matches Card's own solid recipe,\n          // where fg and fg-muted both collapse to the one contrast-guaranteed step.\n          ...(variant === 'solid' && {\n            '--list-item-fg':\n              color === 'accent'\n                ? 'var(--spark-contrast)'\n                : 'var(--neutral-contrast)',\n            '--list-item-fg-muted':\n              color === 'accent'\n                ? 'var(--spark-contrast)'\n                : 'var(--neutral-contrast)',\n          }),\n          ...style,\n        } as React.CSSProperties\n      }\n      {...props}\n    />\n  )\n}\n\ninterface ListItemProps extends React.ComponentProps<'li'> {\n  /** The \"recently changed\" accent dot. */\n  recent?: boolean\n  /** Persistent accent-tint (e.g. the active document). */\n  selected?: boolean\n  /** Loading placeholder (Figma `skeleton=true`). */\n  skeleton?: boolean\n  /**\n   * Base UI polymorphism for the inner row. Pass `<a href/>` or `<button/>` to make\n   * the row interactive (accent-on-hover/focus, cursor, focus ring). Omit → static row.\n   */\n  render?: useRender.RenderProp\n}\n\nfunction ListItem({\n  className,\n  children,\n  recent,\n  selected,\n  skeleton,\n  render,\n  ...props\n}: ListItemProps) {\n  // Skeleton rows are decorative placeholders — never render as a real <a>/<button>. An\n  // aria-hidden anchor would still be focusable (WCAG 4.1.2), so skeleton forces a plain,\n  // non-interactive <div> regardless of `render`.\n  const interactive = !skeleton && render != null\n\n  const recentCtx = React.useMemo(() => ({ recent: recent ?? false }), [recent])\n\n  // Only a ListItemLeading actually marked `interactive` (a Checkbox/Radio/Button) needs\n  // to move outside `render`'s element, and only when `render` is literally an <a>/\n  // <button> — nesting a focusable control inside another interactive element is invalid\n  // HTML and double-fires clicks. A `render` of anything else (a `<Card/>`, say) has no\n  // such conflict: it isn't natively interactive itself, so a control inside it is valid,\n  // unduplicated HTML, and hoisting would only pull the control outside whatever that\n  // element paints (its fill, border, rounded corner) for no reason. A plain icon\n  // (interactive unset) is the same story from the other side — either way, Leading stays\n  // inside the row by default, so the whole visual row remains one click/tap target.\n  const rendersAnchorOrButton =\n    React.isValidElement(render) &&\n    (render.type === 'a' || render.type === 'button')\n  const childArray = skeleton ? undefined : React.Children.toArray(children)\n  const leadingChild = childArray?.find(\n    (child): child is React.ReactElement<ListItemLeadingProps> =>\n      React.isValidElement(child) && child.type === ListItemLeading,\n  )\n  const hoistLeading =\n    rendersAnchorOrButton && Boolean(leadingChild?.props.interactive)\n  const leading = hoistLeading ? leadingChild : undefined\n\n  const row = useRender({\n    defaultTagName: 'div',\n    render: skeleton ? undefined : render,\n    props: {\n      'data-slot': 'list-item-row',\n      // skeleton is a decorative placeholder → keep it out of the a11y tree.\n      'aria-hidden': skeleton ? true : undefined,\n      className: cn(\n        // row layout from Figma 2217-1667; min-h is a HARD 44px floor (WCAG 2.5.5),\n        // py/gap/text still scale past it via the spacing/scaling knobs. no-underline\n        // resets the default <a> decoration when the row renders as a link.\n        'flex min-h-[2.75rem] items-center gap-4 py-3 text-left no-underline',\n        hoistLeading ? 'min-w-0 flex-1 pr-4' : 'w-full rounded-[inherit] px-4',\n        // not hoisted → this row IS the whole visual item (no outer <li> chrome), so\n        // selection tint lives here, same as a row with no leading slot at all.\n        !hoistLeading && !skeleton && selected && 'bg-spark-a3',\n        interactive && [\n          'group/row cursor-pointer transition-colors duration-150 motion-reduce:transition-none',\n          'disabled:pointer-events-none disabled:opacity-50',\n          hoistLeading\n            ? // the custom focus ring is drawn on the outer <li> (has-focus-visible,\n              // below) so it wraps the leading control too — but the browser's own\n              // default outline still targets whichever element actually has focus,\n              // which is this one, so it has to be suppressed here specifically.\n              'focus-visible:outline-hidden'\n            : [\n                'hover:bg-spark-a3 focus-visible:bg-spark-a3',\n                'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n              ],\n        ],\n      ),\n      children: skeleton ? (\n        <ListItemSkeleton />\n      ) : hoistLeading ? (\n        childArray?.filter((child) => child !== leadingChild)\n      ) : (\n        children\n      ),\n    },\n  })\n\n  return (\n    <li\n      data-slot=\"list-item\"\n      className={cn(\n        'relative has-focus-visible:z-10',\n        hoistLeading && [\n          'flex min-w-0 items-center gap-4 pl-4',\n          !skeleton && selected && 'bg-spark-a3',\n          interactive && [\n            // neutral at rest → subtle accent tint on hover/focus (the affordance goes\n            // accent too, in ListItemTrailing; title + leading stay neutral). The click\n            // target itself is `row`, so focus-visible (unlike hover) has to be read off\n            // a descendant via has() — it never lands on this <li> directly.\n            'cursor-pointer',\n            'hover:bg-spark-a3 has-focus-visible:bg-spark-a3',\n            'has-focus-visible:ring-2 has-focus-visible:ring-offset-2',\n          ],\n        ],\n        // soft/solid rows sit in a gapped stack, not a glued panel, but still read as one\n        // rounded group: only the first/last row round the outer corners. surface/\n        // outline glue rows into one bordered panel instead — border SIDES are variant-\n        // only (no colour axis), so they stay on data-variant; fill and border COLOUR\n        // depend on variant *and* colour together, so those live on data-look instead\n        // (see the comment on `look` in List, above).\n        'group-data-[variant=surface]/list:border-x group-data-[variant=surface]/list:border-t group-data-[variant=surface]/list:last:border-b',\n        'group-data-[variant=outline]/list:border-x group-data-[variant=outline]/list:border-t group-data-[variant=outline]/list:last:border-b',\n        'group-data-[look=soft]/list:bg-gray-a2 dark:group-data-[look=soft]/list:bg-gray-a3',\n        // arbitrary-var form, not the bg-spark-a3 utility: identical colour, but avoids a\n        // literal substring collision with the unconditional selection/hover tint below,\n        // which a couple of tests distinguish with a plain className.includes check.\n        'group-data-[look=soft-accent]/list:bg-(--spark-a3)',\n        'group-data-[look=surface]/list:border-gray-a6 group-data-[look=surface]/list:bg-gray-2',\n        'group-data-[look=surface-accent]/list:border-spark-a6 group-data-[look=surface-accent]/list:bg-(--spark-surface)',\n        'group-data-[look=outline]/list:border-gray-a6',\n        'group-data-[look=outline-accent]/list:border-spark-a6',\n        'group-data-[look=solid]/list:bg-(--neutral-1)',\n        'group-data-[look=solid-accent]/list:bg-spark-9',\n        Object.values(radiusRowClasses),\n        className,\n      )}\n      {...props}\n    >\n      <ListItemContext.Provider value={recentCtx}>\n        {leading}\n        {row}\n      </ListItemContext.Provider>\n    </li>\n  )\n}\n\nfunction ListItemSkeleton() {\n  // Compose the shared Skeleton primitive so the placeholder matches every other skeleton\n  // (token + radius + animation + motion-reduce).\n  return (\n    <>\n      <Skeleton className=\"size-10 shrink-0 rounded-full\" />\n      <div className=\"flex min-w-0 flex-1 flex-col gap-2\">\n        <Skeleton className=\"h-3.5 w-1/3\" />\n        <Skeleton className=\"h-3.5 w-2/3\" />\n      </div>\n      <div className=\"flex min-w-0 flex-1 flex-col items-end gap-2\">\n        <Skeleton className=\"h-3.5 w-1/4\" />\n        <Skeleton className=\"h-3.5 w-1/2\" />\n      </div>\n    </>\n  )\n}\n\ninterface ListItemLeadingProps extends React.ComponentProps<'div'> {\n  /**\n   * Set when this slot holds a focusable control (Checkbox, Radio, Button). ListItem\n   * then hoists it outside `render`'s element — nesting a real control inside the row's\n   * own <a>/<button> is invalid HTML and double-fires clicks. Leave unset for decorative\n   * content (an icon): it stays inside the row, so the whole visual row is one\n   * click/tap target, same as a row with no leading slot at all.\n   */\n  interactive?: boolean\n}\n\nfunction ListItemLeading({\n  className,\n  interactive: _interactive,\n  ...props\n}: ListItemLeadingProps) {\n  return (\n    <div\n      data-slot=\"list-item-leading\"\n      className={cn('flex shrink-0 items-center', className)}\n      {...props}\n    />\n  )\n}\n\ninterface ListItemContentProps extends React.ComponentProps<'div'> {\n  /** `end` right-aligns the column (the value column). */\n  align?: 'start' | 'end'\n}\n\nfunction ListItemContent({\n  className,\n  align = 'start',\n  ...props\n}: ListItemContentProps) {\n  const columnCtx = React.useMemo(() => ({ isEnd: align === 'end' }), [align])\n  return (\n    <ListItemColumnContext.Provider value={columnCtx}>\n      <div\n        data-slot=\"list-item-content\"\n        className={cn(\n          'flex min-w-0 flex-1 flex-col gap-1',\n          align === 'end' ? 'items-end text-right' : 'items-start text-left',\n          className,\n        )}\n        {...props}\n      />\n    </ListItemColumnContext.Provider>\n  )\n}\n\nfunction ListItemPreline({\n  className,\n  ...props\n}: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"list-item-preline\"\n      className={cn(\n        'block w-full truncate text-sm text-(--list-item-fg-muted,var(--neutral-11))',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ListItemTitle({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<'span'>) {\n  const { recent } = React.useContext(ListItemContext)\n  const { isEnd } = React.useContext(ListItemColumnContext)\n  // recency dot sits inline, immediately left of the title (Figma 1310-977) — only on the\n  // primary (start) column, so a two-column value row's value never carries it.\n  const showDot = recent && !isEnd\n\n  // className/{...props} always land on THIS span (the one that truncates), so a caller's\n  // override (e.g. `title`, `line-clamp-2 whitespace-normal`) behaves identically whether\n  // or not the dot renders — only the wrapping structure differs below.\n  const title = (\n    <span\n      data-slot=\"list-item-title\"\n      className={cn(\n        showDot ? 'min-w-0 truncate' : 'block w-full truncate',\n        'text-base font-bold text-(--list-item-fg,var(--neutral-12))',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </span>\n  )\n\n  if (!showDot) {\n    // No dot: stay a plain block so the column's text alignment (e.g. an end column's\n    // text-right) governs the title directly.\n    return title\n  }\n\n  return (\n    <span className=\"flex w-full items-center gap-2\">\n      <span\n        aria-hidden=\"true\"\n        data-slot=\"list-item-indicator\"\n        className=\"size-2 shrink-0 rounded-full bg-spark-9\"\n      />\n      {title}\n    </span>\n  )\n}\n\nfunction ListItemSubline({\n  className,\n  ...props\n}: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"list-item-subline\"\n      className={cn(\n        'block w-full truncate text-sm text-(--list-item-fg-muted,var(--neutral-11))',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ListItemTrailing({\n  className,\n  ...props\n}: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"list-item-trailing\"\n      className={cn(\n        'flex shrink-0 items-center text-gray-11',\n        // interactive rows tint the affordance accent on hover/focus (group/row is set on\n        // the interactive inner row; absent on static rows, so this simply never fires).\n        // Relies on the child reading currentColor (MaterialSymbol does) — the colour-\n        // independent Icon component hardcodes its own ink and won't pick this up; use\n        // MaterialSymbol here, not Icon.\n        'transition-colors duration-150 motion-reduce:transition-none',\n        'group-hover/row:text-spark-a11 group-focus-visible/row:text-spark-a11',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  List,\n  ListItem,\n  ListItemContent,\n  ListItemLeading,\n  ListItemPreline,\n  ListItemSubline,\n  ListItemTitle,\n  ListItemTrailing,\n}\nexport type {\n  ListProps,\n  ListItemProps,\n  ListItemContentProps,\n  ListItemLeadingProps,\n  ListVariant,\n  ListRadius,\n}\n"],"mappings":"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"}
+{"version":3,"file":"list.js","names":["React"],"sources":["../../src/components/list.tsx"],"sourcesContent":["import { useRender } from '@base-ui/react/use-render'\nimport * as React from 'react'\nimport type { ContainerRadius } from '../lib/container-chrome'\nimport type { SparkCardColor, SparkCardVariant } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\nimport { Skeleton } from './skeleton'\n\ntype ListVariant = SparkCardVariant\ntype ListRadius = ContainerRadius\n\n// Rounds only the first/last row of a run, regardless of variant — harmless on ghost\n// (nothing painted to clip). Keyed on `data-list-radius` alone: unlike fill (below),\n// rounding doesn't depend on variant/color, so no compound group-data selector is needed.\n// Named `list-radius`, not `radius`: the global Roundness knob (Theme) also writes a\n// bare `data-radius` via an unscoped `[data-radius=...]` selector in spark-default.css —\n// `none`/`full` are spelled the same in both scales, so a plain `data-radius` here would\n// collide and let List silently override the app-wide knob for its whole subtree.\nconst radiusRowClasses: Record<ListRadius, string> = {\n  none: 'group-data-[list-radius=none]/list:first:rounded-t-none group-data-[list-radius=none]/list:last:rounded-b-none',\n  sm: 'group-data-[list-radius=sm]/list:first:rounded-t-sm group-data-[list-radius=sm]/list:last:rounded-b-sm',\n  md: 'group-data-[list-radius=md]/list:first:rounded-t-md group-data-[list-radius=md]/list:last:rounded-b-md',\n  lg: 'group-data-[list-radius=lg]/list:first:rounded-t-lg group-data-[list-radius=lg]/list:last:rounded-b-lg',\n  xl: 'group-data-[list-radius=xl]/list:first:rounded-t-xl group-data-[list-radius=xl]/list:last:rounded-b-xl',\n  '2xl':\n    'group-data-[list-radius=2xl]/list:first:rounded-t-2xl group-data-[list-radius=2xl]/list:last:rounded-b-2xl',\n  '3xl':\n    'group-data-[list-radius=3xl]/list:first:rounded-t-3xl group-data-[list-radius=3xl]/list:last:rounded-b-3xl',\n  full: 'group-data-[list-radius=full]/list:first:rounded-t-full group-data-[list-radius=full]/list:last:rounded-b-full',\n}\n\n// ListItem publishes `recent` so ListItemTitle can render the inline recency dot; the\n// column context lets the title show it only on the primary (start) column, never the\n// value column of a two-column row.\nconst ListItemContext = React.createContext<{ recent: boolean }>({\n  recent: false,\n})\nconst ListItemColumnContext = React.createContext<{ isEnd: boolean }>({\n  isEnd: false,\n})\n\ninterface ListProps extends React.ComponentProps<'ul'> {\n  /** A prop, not the ambient `data-style` knob — that would cascade into row content. */\n  variant?: ListVariant\n  /** Chrome palette. `neutral` (default) tracks the app neutral; `accent` tints with the brand accent. */\n  color?: SparkCardColor\n  /** Corner radius, as a named step. Unset → `lg`, today's fixed behaviour. */\n  radius?: ListRadius\n  /** How many `--spark-layout-gap` units apart each row sits (`soft`/`solid`/`ghost` only). */\n  gap?: number\n}\n\nfunction List({\n  className,\n  variant = 'soft',\n  color = 'neutral',\n  radius = 'lg',\n  gap = 0.5,\n  style,\n  ...props\n}: ListProps) {\n  // Fill/border-colour needs BOTH axes at once (e.g. \"soft, tinted with accent\"), which a\n  // single group-data selector can't express and chaining two on the same named group\n  // can't either (that generates a descendant match between two *different* ancestors,\n  // not one ancestor bearing both attributes). Resolving the pair to one value up front\n  // sidesteps it entirely — see the `data-look` selectors on ListItem below.\n  const look = color === 'accent' ? `${variant}-accent` : variant\n  return (\n    <ul\n      // role=list keeps list semantics even under list-style:none (Safari drops them).\n      role=\"list\"\n      data-slot=\"list\"\n      // group/list + data-variant drive every item's per-variant chrome (below).\n      data-variant={variant}\n      data-look={look}\n      data-list-radius={radius}\n      className={cn(\n        'group/list m-0 list-none p-0',\n        // soft/solid = separate rows → stack with a small gap (the gap IS the divider).\n        // ghost shares that same gap for spacing but no fill/border (see ListItem's\n        // chrome block, which has no ghost selector). surface/outline glue rows into one\n        // panel with no gap at all.\n        'data-[variant=soft]:flex data-[variant=soft]:flex-col data-[variant=soft]:gap-[calc(var(--spark-layout-gap)*var(--list-gap-steps,0.5))]',\n        'data-[variant=solid]:flex data-[variant=solid]:flex-col data-[variant=solid]:gap-[calc(var(--spark-layout-gap)*var(--list-gap-steps,0.5))]',\n        'data-[variant=ghost]:flex data-[variant=ghost]:flex-col data-[variant=ghost]:gap-[calc(var(--spark-layout-gap)*var(--list-gap-steps,0.5))]',\n        className,\n      )}\n      style={\n        {\n          '--list-gap-steps': gap,\n          // solid's fill inverts far enough that the row's own ink must invert with it\n          // (unlike soft/surface/outline's translucent tints, where the default ink\n          // stays legible regardless of colour) — matches Card's own solid recipe,\n          // where fg and fg-muted both collapse to the one contrast-guaranteed step.\n          ...(variant === 'solid' && {\n            '--list-item-fg':\n              color === 'accent'\n                ? 'var(--spark-contrast)'\n                : 'var(--neutral-contrast)',\n            '--list-item-fg-muted':\n              color === 'accent'\n                ? 'var(--spark-contrast)'\n                : 'var(--neutral-contrast)',\n          }),\n          ...style,\n        } as React.CSSProperties\n      }\n      {...props}\n    />\n  )\n}\n\ninterface ListItemProps extends React.ComponentProps<'li'> {\n  /** The \"recently changed\" accent dot. */\n  recent?: boolean\n  /** Persistent accent-tint (e.g. the active document). */\n  selected?: boolean\n  /** Loading placeholder (Figma `skeleton=true`). */\n  skeleton?: boolean\n  /**\n   * Base UI polymorphism for the inner row. Pass `<a href/>` or `<button/>` to make\n   * the row interactive (accent-on-hover/focus, cursor, focus ring). Omit → static row.\n   */\n  render?: useRender.RenderProp\n}\n\nfunction ListItem({\n  className,\n  children,\n  recent,\n  selected,\n  skeleton,\n  render,\n  ...props\n}: ListItemProps) {\n  // Skeleton rows are decorative placeholders — never render as a real <a>/<button>. An\n  // aria-hidden anchor would still be focusable (WCAG 4.1.2), so skeleton forces a plain,\n  // non-interactive <div> regardless of `render`.\n  const interactive = !skeleton && render != null\n\n  const recentCtx = React.useMemo(() => ({ recent: recent ?? false }), [recent])\n\n  // Only a ListItemLeading actually marked `interactive` (a Checkbox/Radio/Button) needs\n  // to move outside `render`'s element, and only when `render` is literally an <a>/\n  // <button> — nesting a focusable control inside another interactive element is invalid\n  // HTML and double-fires clicks. A `render` of anything else (a `<Card/>`, say) has no\n  // such conflict: it isn't natively interactive itself, so a control inside it is valid,\n  // unduplicated HTML, and hoisting would only pull the control outside whatever that\n  // element paints (its fill, border, rounded corner) for no reason. A plain icon\n  // (interactive unset) is the same story from the other side — either way, Leading stays\n  // inside the row by default, so the whole visual row remains one click/tap target.\n  const rendersAnchorOrButton =\n    React.isValidElement(render) &&\n    (render.type === 'a' || render.type === 'button')\n  const childArray = skeleton ? undefined : React.Children.toArray(children)\n  const leadingChild = childArray?.find(\n    (child): child is React.ReactElement<ListItemLeadingProps> =>\n      React.isValidElement(child) && child.type === ListItemLeading,\n  )\n  const hoistLeading =\n    rendersAnchorOrButton && Boolean(leadingChild?.props.interactive)\n  const leading = hoistLeading ? leadingChild : undefined\n\n  const row = useRender({\n    defaultTagName: 'div',\n    render: skeleton ? undefined : render,\n    props: {\n      'data-slot': 'list-item-row',\n      // skeleton is a decorative placeholder → keep it out of the a11y tree.\n      'aria-hidden': skeleton ? true : undefined,\n      className: cn(\n        // row layout from Figma 2217-1667; min-h is a HARD 44px floor (WCAG 2.5.5),\n        // py/gap/text still scale past it via the spacing/scaling knobs. no-underline\n        // resets the default <a> decoration when the row renders as a link.\n        'flex min-h-[2.75rem] items-center gap-4 py-3 text-left no-underline',\n        hoistLeading ? 'min-w-0 flex-1 pr-4' : 'w-full rounded-[inherit] px-4',\n        // not hoisted → this row IS the whole visual item (no outer <li> chrome), so\n        // selection tint lives here, same as a row with no leading slot at all.\n        !hoistLeading && !skeleton && selected && 'bg-spark-a3',\n        interactive && [\n          'group/row cursor-pointer transition-colors duration-150 motion-reduce:transition-none',\n          'disabled:pointer-events-none disabled:opacity-50',\n          hoistLeading\n            ? // the custom focus ring is drawn on the outer <li> (has-focus-visible,\n              // below) so it wraps the leading control too — but the browser's own\n              // default outline still targets whichever element actually has focus,\n              // which is this one, so it has to be suppressed here specifically.\n              'focus-visible:outline-hidden'\n            : [\n                'hover:bg-spark-a3 focus-visible:bg-spark-a3',\n                'focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n              ],\n        ],\n      ),\n      children: skeleton ? (\n        <ListItemSkeleton />\n      ) : hoistLeading ? (\n        childArray?.filter((child) => child !== leadingChild)\n      ) : (\n        children\n      ),\n    },\n  })\n\n  return (\n    <li\n      data-slot=\"list-item\"\n      className={cn(\n        'relative has-focus-visible:z-10',\n        hoistLeading && [\n          'flex min-w-0 items-center gap-4 pl-4',\n          !skeleton && selected && 'bg-spark-a3',\n          interactive && [\n            // neutral at rest → subtle accent tint on hover/focus (the affordance goes\n            // accent too, in ListItemTrailing; title + leading stay neutral). The click\n            // target itself is `row`, so focus-visible (unlike hover) has to be read off\n            // a descendant via has() — it never lands on this <li> directly.\n            'cursor-pointer',\n            'hover:bg-spark-a3 has-focus-visible:bg-spark-a3',\n            'has-focus-visible:ring-2 has-focus-visible:ring-offset-2',\n          ],\n        ],\n        // soft/solid rows sit in a gapped stack, not a glued panel, but still read as one\n        // rounded group: only the first/last row round the outer corners. surface/\n        // outline glue rows into one bordered panel instead — border SIDES are variant-\n        // only (no colour axis), so they stay on data-variant; fill and border COLOUR\n        // depend on variant *and* colour together, so those live on data-look instead\n        // (see the comment on `look` in List, above).\n        'group-data-[variant=surface]/list:border-x group-data-[variant=surface]/list:border-t group-data-[variant=surface]/list:last:border-b',\n        'group-data-[variant=outline]/list:border-x group-data-[variant=outline]/list:border-t group-data-[variant=outline]/list:last:border-b',\n        'group-data-[look=soft]/list:bg-gray-a2 dark:group-data-[look=soft]/list:bg-gray-a3',\n        // arbitrary-var form, not the bg-spark-a3 utility: identical colour, but avoids a\n        // literal substring collision with the unconditional selection/hover tint below,\n        // which a couple of tests distinguish with a plain className.includes check.\n        'group-data-[look=soft-accent]/list:bg-(--spark-a3)',\n        'group-data-[look=surface]/list:border-gray-a6 group-data-[look=surface]/list:bg-gray-2',\n        'group-data-[look=surface-accent]/list:border-spark-a6 group-data-[look=surface-accent]/list:bg-(--spark-surface)',\n        'group-data-[look=outline]/list:border-gray-a6',\n        'group-data-[look=outline-accent]/list:border-spark-a6',\n        'group-data-[look=solid]/list:bg-(--neutral-1)',\n        'group-data-[look=solid-accent]/list:bg-spark-9',\n        Object.values(radiusRowClasses),\n        className,\n      )}\n      {...props}\n    >\n      <ListItemContext.Provider value={recentCtx}>\n        {leading}\n        {row}\n      </ListItemContext.Provider>\n    </li>\n  )\n}\n\nfunction ListItemSkeleton() {\n  // Compose the shared Skeleton primitive so the placeholder matches every other skeleton\n  // (token + radius + animation + motion-reduce).\n  return (\n    <>\n      <Skeleton className=\"size-10 shrink-0 rounded-full\" />\n      <div className=\"flex min-w-0 flex-1 flex-col gap-2\">\n        <Skeleton className=\"h-3.5 w-1/3\" />\n        <Skeleton className=\"h-3.5 w-2/3\" />\n      </div>\n      <div className=\"flex min-w-0 flex-1 flex-col items-end gap-2\">\n        <Skeleton className=\"h-3.5 w-1/4\" />\n        <Skeleton className=\"h-3.5 w-1/2\" />\n      </div>\n    </>\n  )\n}\n\ninterface ListItemLeadingProps extends React.ComponentProps<'div'> {\n  /**\n   * Set when this slot holds a focusable control (Checkbox, Radio, Button). ListItem\n   * then hoists it outside `render`'s element — nesting a real control inside the row's\n   * own <a>/<button> is invalid HTML and double-fires clicks. Leave unset for decorative\n   * content (an icon): it stays inside the row, so the whole visual row is one\n   * click/tap target, same as a row with no leading slot at all.\n   */\n  interactive?: boolean\n}\n\nfunction ListItemLeading({\n  className,\n  interactive: _interactive,\n  ...props\n}: ListItemLeadingProps) {\n  return (\n    <div\n      data-slot=\"list-item-leading\"\n      className={cn('flex shrink-0 items-center', className)}\n      {...props}\n    />\n  )\n}\n\ninterface ListItemContentProps extends React.ComponentProps<'div'> {\n  /** `end` right-aligns the column (the value column). */\n  align?: 'start' | 'end'\n}\n\nfunction ListItemContent({\n  className,\n  align = 'start',\n  ...props\n}: ListItemContentProps) {\n  const columnCtx = React.useMemo(() => ({ isEnd: align === 'end' }), [align])\n  return (\n    <ListItemColumnContext.Provider value={columnCtx}>\n      <div\n        data-slot=\"list-item-content\"\n        className={cn(\n          'flex min-w-0 flex-1 flex-col gap-1',\n          align === 'end' ? 'items-end text-right' : 'items-start text-left',\n          className,\n        )}\n        {...props}\n      />\n    </ListItemColumnContext.Provider>\n  )\n}\n\nfunction ListItemPreline({\n  className,\n  ...props\n}: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"list-item-preline\"\n      className={cn(\n        'block w-full truncate text-sm text-(--list-item-fg-muted,var(--neutral-11))',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ListItemTitle({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<'span'>) {\n  const { recent } = React.useContext(ListItemContext)\n  const { isEnd } = React.useContext(ListItemColumnContext)\n  // recency dot sits inline, immediately left of the title (Figma 1310-977) — only on the\n  // primary (start) column, so a two-column value row's value never carries it.\n  const showDot = recent && !isEnd\n\n  // className/{...props} always land on THIS span (the one that truncates), so a caller's\n  // override (e.g. `title`, `line-clamp-2 whitespace-normal`) behaves identically whether\n  // or not the dot renders — only the wrapping structure differs below.\n  const title = (\n    <span\n      data-slot=\"list-item-title\"\n      className={cn(\n        showDot ? 'min-w-0 truncate' : 'block w-full truncate',\n        'text-base font-bold text-(--list-item-fg,var(--neutral-12))',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n    </span>\n  )\n\n  if (!showDot) {\n    // No dot: stay a plain block so the column's text alignment (e.g. an end column's\n    // text-right) governs the title directly.\n    return title\n  }\n\n  return (\n    <span className=\"flex w-full items-center gap-2\">\n      <span\n        aria-hidden=\"true\"\n        data-slot=\"list-item-indicator\"\n        className=\"size-2 shrink-0 rounded-full bg-spark-9\"\n      />\n      {title}\n    </span>\n  )\n}\n\nfunction ListItemSubline({\n  className,\n  ...props\n}: React.ComponentProps<'span'>) {\n  return (\n    <span\n      data-slot=\"list-item-subline\"\n      className={cn(\n        'block w-full truncate text-sm text-(--list-item-fg-muted,var(--neutral-11))',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction ListItemTrailing({\n  className,\n  ...props\n}: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"list-item-trailing\"\n      className={cn(\n        'flex shrink-0 items-center text-gray-11',\n        // interactive rows tint the affordance accent on hover/focus (group/row is set on\n        // the interactive inner row; absent on static rows, so this simply never fires).\n        // Relies on the child reading currentColor (Spark icons do) — the colour-\n        // independent Icon component hardcodes its own ink and won't pick this up; use\n        // a Spark icon here, not Icon.\n        'transition-colors duration-150 motion-reduce:transition-none',\n        'group-hover/row:text-spark-a11 group-focus-visible/row:text-spark-a11',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  List,\n  ListItem,\n  ListItemContent,\n  ListItemLeading,\n  ListItemPreline,\n  ListItemSubline,\n  ListItemTitle,\n  ListItemTrailing,\n}\nexport type {\n  ListProps,\n  ListItemProps,\n  ListItemContentProps,\n  ListItemLeadingProps,\n  ListVariant,\n  ListRadius,\n}\n"],"mappings":";;;;;;;AAiBA,MAAM,mBAA+C;CACnD,MAAM;CACN,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OACE;CACF,OACE;CACF,MAAM;AACR;AAKA,MAAM,kBAAkBA,QAAM,cAAmC,EAC/D,QAAQ,MACV,CAAC;AACD,MAAM,wBAAwBA,QAAM,cAAkC,EACpE,OAAO,MACT,CAAC;AAaD,SAAS,KAAK,EACZ,WACA,UAAU,QACV,QAAQ,WACR,SAAS,MACT,MAAM,IACN,OACA,GAAG,SACS;CAOZ,OACE,oBAAC,MAAD;EAEE,MAAK;EACL,aAAU;EAEV,gBAAc;EACd,aARS,UAAU,WAAW,GAAG,QAAQ,WAAW;EASpD,oBAAkB;EAClB,WAAW,GACT,gCAKA,2IACA,8IACA,8IACA,SACF;EACA,OACE;GACE,oBAAoB;GAKpB,GAAI,YAAY,WAAW;IACzB,kBACE,UAAU,WACN,0BACA;IACN,wBACE,UAAU,WACN,0BACA;GACR;GACA,GAAG;EACL;EAEF,GAAI;CACL,CAAA;AAEL;AAgBA,SAAS,SAAS,EAChB,WACA,UACA,QACA,UACA,UACA,QACA,GAAG,SACa;CAIhB,MAAM,cAAc,CAAC,YAAY,UAAU;CAE3C,MAAM,YAAYA,QAAM,eAAe,EAAE,QAAQ,UAAU,MAAM,IAAI,CAAC,MAAM,CAAC;CAW7E,MAAM,wBACJA,QAAM,eAAe,MAAM,MAC1B,OAAO,SAAS,OAAO,OAAO,SAAS;CAC1C,MAAM,aAAa,WAAW,KAAA,IAAYA,QAAM,SAAS,QAAQ,QAAQ;CACzE,MAAM,eAAe,YAAY,MAC9B,UACCA,QAAM,eAAe,KAAK,KAAK,MAAM,SAAS,eAClD;CACA,MAAM,eACJ,yBAAyB,QAAQ,cAAc,MAAM,WAAW;CAClE,MAAM,UAAU,eAAe,eAAe,KAAA;CAE9C,MAAM,MAAM,UAAU;EACpB,gBAAgB;EAChB,QAAQ,WAAW,KAAA,IAAY;EAC/B,OAAO;GACL,aAAa;GAEb,eAAe,WAAW,OAAO,KAAA;GACjC,WAAW,GAIT,uEACA,eAAe,wBAAwB,iCAGvC,CAAC,gBAAgB,CAAC,YAAY,YAAY,eAC1C,eAAe;IACb;IACA;IACA,eAKI,iCACA,CACE,+CACA,+EACF;GACN,CACF;GACA,UAAU,WACR,oBAAC,kBAAD,CAAmB,CAAA,IACjB,eACF,YAAY,QAAQ,UAAU,UAAU,YAAY,IAEpD;EAEJ;CACF,CAAC;CAED,OACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GACT,mCACA,gBAAgB;GACd;GACA,CAAC,YAAY,YAAY;GACzB,eAAe;IAKb;IACA;IACA;GACF;EACF,GAOA,yIACA,yIACA,sFAIA,sDACA,0FACA,oHACA,iDACA,yDACA,iDACA,kDACA,OAAO,OAAO,gBAAgB,GAC9B,SACF;EACA,GAAI;YAEJ,qBAAC,gBAAgB,UAAjB;GAA0B,OAAO;aAAjC,CACG,SACA,GACuB;;CACxB,CAAA;AAER;AAEA,SAAS,mBAAmB;CAG1B,OACE,qBAAA,UAAA,EAAA,UAAA;EACE,oBAAC,UAAD,EAAU,WAAU,gCAAiC,CAAA;EACrD,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,UAAD,EAAU,WAAU,cAAe,CAAA,GACnC,oBAAC,UAAD,EAAU,WAAU,cAAe,CAAA,CAChC;;EACL,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,UAAD,EAAU,WAAU,cAAe,CAAA,GACnC,oBAAC,UAAD,EAAU,WAAU,cAAe,CAAA,CAChC;;CACL,EAAA,CAAA;AAEN;AAaA,SAAS,gBAAgB,EACvB,WACA,aAAa,cACb,GAAG,SACoB;CACvB,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,8BAA8B,SAAS;EACrD,GAAI;CACL,CAAA;AAEL;AAOA,SAAS,gBAAgB,EACvB,WACA,QAAQ,SACR,GAAG,SACoB;CACvB,MAAM,YAAYA,QAAM,eAAe,EAAE,OAAO,UAAU,MAAM,IAAI,CAAC,KAAK,CAAC;CAC3E,OACE,oBAAC,sBAAsB,UAAvB;EAAgC,OAAO;YACrC,oBAAC,OAAD;GACE,aAAU;GACV,WAAW,GACT,sCACA,UAAU,QAAQ,yBAAyB,yBAC3C,SACF;GACA,GAAI;EACL,CAAA;CAC6B,CAAA;AAEpC;AAEA,SAAS,gBAAgB,EACvB,WACA,GAAG,SAC4B;CAC/B,OACE,oBAAC,QAAD;EACE,aAAU;EACV,WAAW,GACT,+EACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,cAAc,EACrB,WACA,UACA,GAAG,SAC4B;CAC/B,MAAM,EAAE,WAAWA,QAAM,WAAW,eAAe;CACnD,MAAM,EAAE,UAAUA,QAAM,WAAW,qBAAqB;CAGxD,MAAM,UAAU,UAAU,CAAC;CAK3B,MAAM,QACJ,oBAAC,QAAD;EACE,aAAU;EACV,WAAW,GACT,UAAU,qBAAqB,yBAC/B,+DACA,SACF;EACA,GAAI;EAEH;CACG,CAAA;CAGR,IAAI,CAAC,SAGH,OAAO;CAGT,OACE,qBAAC,QAAD;EAAM,WAAU;YAAhB,CACE,oBAAC,QAAD;GACE,eAAY;GACZ,aAAU;GACV,WAAU;EACX,CAAA,GACA,KACG;;AAEV;AAEA,SAAS,gBAAgB,EACvB,WACA,GAAG,SAC4B;CAC/B,OACE,oBAAC,QAAD;EACE,aAAU;EACV,WAAW,GACT,+EACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,iBAAiB,EACxB,WACA,GAAG,SAC2B;CAC9B,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,2CAMA,gEACA,yEACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

package/dist/components/marker.d.cts

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

package/dist/components/marker.d.ts

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

package/dist/components/message-scroller.cjs

@@ -2,11 +2,11 @@
 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");
+const require_components_button = require("./button.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react);
+let _epilot_spark_icons = require("@epilot/spark-icons");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _shadcn_react_message_scroller = require("@shadcn/react/message-scroller");
 let motion_react = require("motion/react");
@@ -81,7 +81,7 @@ function MessageScrollerButton({ direction = "end", className, children, render,
 			size
 		}),
 		...props,
-		children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons_material_symbol.MaterialSymbol, { name: direction === "end" ? "arrow_downward" : "arrow_upward" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [direction === "end" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_epilot_spark_icons.ArrowDownward, {}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_epilot_spark_icons.ArrowUpward, {}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			className: "sr-only",
 			children: direction === "end" ? "Scroll to end" : "Scroll to start"
 		})] })

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"message-scroller.cjs","names":["React","LazyMotion","domAnimation","MessageScrollerPrimitive","useReducedMotion","MESSAGE_ANIMATIONS","Button","ArrowDownward","ArrowUpward"],"sources":["../../src/components/message-scroller.tsx"],"sourcesContent":["import { ArrowDownward, ArrowUpward } from '@epilot/spark-icons'\nimport {\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 { 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 Spark icon, pointing\n// 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          {direction === 'end' ? <ArrowDownward /> : <ArrowUpward />}\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,CACG,cAAc,QAAQ,iBAAA,GAAA,kBAAA,KAACC,oBAAAA,eAAD,CAAgB,CAAA,IAAI,iBAAA,GAAA,kBAAA,KAACC,oBAAAA,aAAD,CAAc,CAAA,GACzD,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAU;aACb,cAAc,QAAQ,kBAAkB;EACrC,CAAA,CACN,EAAA,CAAA;CAE2B,CAAA;AAErC"}

package/dist/components/message-scroller.js

@@ -1,10 +1,10 @@
 "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 { useReducedMotion } from "../hooks/use-reduced-motion.js";
 import { MESSAGE_ANIMATIONS } from "../lib/message-animations.js";
+import { Button } from "./button.js";
 import * as React$1 from "react";
+import { ArrowDownward, ArrowUpward } from "@epilot/spark-icons";
 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";
@@ -78,7 +78,7 @@ function MessageScrollerButton({ direction = "end", className, children, render,
 			size
 		}),
 		...props,
-		children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(MaterialSymbol, { name: direction === "end" ? "arrow_downward" : "arrow_upward" }), /* @__PURE__ */ jsx("span", {
+		children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [direction === "end" ? /* @__PURE__ */ jsx(ArrowDownward, {}) : /* @__PURE__ */ jsx(ArrowUpward, {}), /* @__PURE__ */ jsx("span", {
 			className: "sr-only",
 			children: direction === "end" ? "Scroll to end" : "Scroll to start"
 		})] })

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

@@ -1 +1 @@
-{"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"}
+{"version":3,"file":"message-scroller.js","names":["React","MessageScrollerPrimitive"],"sources":["../../src/components/message-scroller.tsx"],"sourcesContent":["import { ArrowDownward, ArrowUpward } from '@epilot/spark-icons'\nimport {\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 { 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 Spark icon, pointing\n// 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          {direction === 'end' ? <ArrowDownward /> : <ArrowUpward />}\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,CACG,cAAc,QAAQ,oBAAC,eAAD,CAAgB,CAAA,IAAI,oBAAC,aAAD,CAAc,CAAA,GACzD,oBAAC,QAAD;GAAM,WAAU;aACb,cAAc,QAAQ,kBAAkB;EACrC,CAAA,CACN,EAAA,CAAA;CAE2B,CAAA;AAErC"}

package/dist/components/metering-row.cjs

@@ -28,14 +28,14 @@ const toneToIconColor = {
 	warning: "warning",
 	error: "danger"
 };
-const MeteringRowIcon = ({ className, icon, ...rest }) => {
+const MeteringRowIcon = ({ className, icon: Glyph, ...rest }) => {
 	const tone = useMeteringRowTone();
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_icon.Icon, {
 		...rest,
 		className,
 		color: toneToIconColor[tone],
-		name: icon,
-		size: "large"
+		size: "large",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Glyph, {})
 	});
 };
 const MeteringRowLabel = ({ className, ...rest }) => {

package/dist/components/metering-row.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"metering-row.cjs","names":["Icon"],"sources":["../../src/components/metering-row.tsx"],"sourcesContent":["import { createContext, useContext } from 'react'\nimport type { MaterialSymbolIconName } from '../icons/material-symbol'\nimport type { SparkAccentColor } from '../lib/accent-colors'\nimport type { Tone } from '../lib/tones'\nimport { cn } from '../utils/cn'\nimport { Icon } from './icon'\n\nconst MeteringRowContext = createContext<Tone | null>(null)\n\nfunction useMeteringRowTone() {\n  const tone = useContext(MeteringRowContext)\n  if (!tone) {\n    throw new Error('MeteringRow.* must be rendered inside <MeteringRow>')\n  }\n  return tone\n}\n\nconst MeteringRow = ({\n  className,\n  tone,\n  ...rest\n}: React.ComponentProps<'div'> & {\n  tone: Tone\n}) => {\n  return (\n    <MeteringRowContext.Provider value={tone}>\n      <div\n        className={cn('group flex items-center gap-3', className)}\n        data-tone={tone}\n        {...rest}\n      />\n    </MeteringRowContext.Provider>\n  )\n}\n\nconst toneToIconColor: Record<Tone, SparkAccentColor> = {\n  accent: 'accent',\n  neutral: 'neutral',\n  success: 'success',\n  warning: 'warning',\n  error: 'danger',\n}\n\nconst MeteringRowIcon = ({\n  className,\n  icon,\n  ...rest\n}: React.ComponentProps<'span'> & {\n  icon: MaterialSymbolIconName\n}) => {\n  const tone = useMeteringRowTone()\n  return (\n    <Icon\n      {...rest}\n      className={className}\n      color={toneToIconColor[tone]}\n      name={icon}\n      size=\"large\"\n    />\n  )\n}\n\nconst MeteringRowLabel = ({\n  className,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  return (\n    <span className={cn('flex-1 text-sm text-gray', className)} {...rest} />\n  )\n}\n\nconst MeteringRowValue = ({\n  className,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  return (\n    <span\n      className={cn(\n        'text-lg leading-tight font-bold tabular-nums group-data-[tone=accent]:text-accent group-data-[tone=error]:text-error group-data-[tone=neutral]:text-gray group-data-[tone=success]:text-success group-data-[tone=warning]:text-warning',\n        className,\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport { MeteringRow, MeteringRowIcon, MeteringRowLabel, MeteringRowValue }\n"],"mappings":";;;;;;;AAOA,MAAM,sBAAA,GAAA,MAAA,eAAgD,IAAI;AAE1D,SAAS,qBAAqB;CAC5B,MAAM,QAAA,GAAA,MAAA,YAAkB,kBAAkB;CAC1C,IAAI,CAAC,MACH,MAAM,IAAI,MAAM,qDAAqD;CAEvE,OAAO;AACT;AAEA,MAAM,eAAe,EACnB,WACA,MACA,GAAG,WAGC;CACJ,OACE,iBAAA,GAAA,kBAAA,KAAC,mBAAmB,UAApB;EAA6B,OAAO;YAClC,iBAAA,GAAA,kBAAA,KAAC,OAAD;GACE,YAAA,GAAA,OAAA,IAAc,iCAAiC,SAAS;GACxD,aAAW;GACX,GAAI;EACL,CAAA;CAC0B,CAAA;AAEjC;AAEA,MAAM,kBAAkD;CACtD,QAAQ;CACR,SAAS;CACT,SAAS;CACT,SAAS;CACT,OAAO;AACT;AAEA,MAAM,mBAAmB,EACvB,WACA,MACA,GAAG,WAGC;CACJ,MAAM,OAAO,mBAAmB;CAChC,OACE,iBAAA,GAAA,kBAAA,KAACA,wBAAAA,MAAD;EACE,GAAI;EACO;EACX,OAAO,gBAAgB;EACvB,MAAM;EACN,MAAK;CACN,CAAA;AAEL;AAEA,MAAM,oBAAoB,EACxB,WACA,GAAG,WAC+B;CAClC,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EAAM,YAAA,GAAA,OAAA,IAAc,4BAA4B,SAAS;EAAG,GAAI;CAAO,CAAA;AAE3E;AAEA,MAAM,oBAAoB,EACxB,WACA,GAAG,WAC+B;CAClC,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EACE,YAAA,GAAA,OAAA,IACE,0OACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"metering-row.cjs","names":["Icon"],"sources":["../../src/components/metering-row.tsx"],"sourcesContent":["import type { SparkIcon } from '@epilot/spark-icons'\nimport { createContext, useContext } from 'react'\nimport type { SparkAccentColor } from '../lib/accent-colors'\nimport type { Tone } from '../lib/tones'\nimport { cn } from '../utils/cn'\nimport { Icon } from './icon'\n\nconst MeteringRowContext = createContext<Tone | null>(null)\n\nfunction useMeteringRowTone() {\n  const tone = useContext(MeteringRowContext)\n  if (!tone) {\n    throw new Error('MeteringRow.* must be rendered inside <MeteringRow>')\n  }\n  return tone\n}\n\nconst MeteringRow = ({\n  className,\n  tone,\n  ...rest\n}: React.ComponentProps<'div'> & {\n  tone: Tone\n}) => {\n  return (\n    <MeteringRowContext.Provider value={tone}>\n      <div\n        className={cn('group flex items-center gap-3', className)}\n        data-tone={tone}\n        {...rest}\n      />\n    </MeteringRowContext.Provider>\n  )\n}\n\nconst toneToIconColor: Record<Tone, SparkAccentColor> = {\n  accent: 'accent',\n  neutral: 'neutral',\n  success: 'success',\n  warning: 'warning',\n  error: 'danger',\n}\n\nconst MeteringRowIcon = ({\n  className,\n  icon: Glyph,\n  ...rest\n}: React.ComponentProps<'span'> & {\n  icon: SparkIcon\n}) => {\n  const tone = useMeteringRowTone()\n  return (\n    <Icon\n      {...rest}\n      className={className}\n      color={toneToIconColor[tone]}\n      size=\"large\"\n    >\n      <Glyph />\n    </Icon>\n  )\n}\n\nconst MeteringRowLabel = ({\n  className,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  return (\n    <span className={cn('flex-1 text-sm text-gray', className)} {...rest} />\n  )\n}\n\nconst MeteringRowValue = ({\n  className,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  return (\n    <span\n      className={cn(\n        'text-lg leading-tight font-bold tabular-nums group-data-[tone=accent]:text-accent group-data-[tone=error]:text-error group-data-[tone=neutral]:text-gray group-data-[tone=success]:text-success group-data-[tone=warning]:text-warning',\n        className,\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport { MeteringRow, MeteringRowIcon, MeteringRowLabel, MeteringRowValue }\n"],"mappings":";;;;;;;AAOA,MAAM,sBAAA,GAAA,MAAA,eAAgD,IAAI;AAE1D,SAAS,qBAAqB;CAC5B,MAAM,QAAA,GAAA,MAAA,YAAkB,kBAAkB;CAC1C,IAAI,CAAC,MACH,MAAM,IAAI,MAAM,qDAAqD;CAEvE,OAAO;AACT;AAEA,MAAM,eAAe,EACnB,WACA,MACA,GAAG,WAGC;CACJ,OACE,iBAAA,GAAA,kBAAA,KAAC,mBAAmB,UAApB;EAA6B,OAAO;YAClC,iBAAA,GAAA,kBAAA,KAAC,OAAD;GACE,YAAA,GAAA,OAAA,IAAc,iCAAiC,SAAS;GACxD,aAAW;GACX,GAAI;EACL,CAAA;CAC0B,CAAA;AAEjC;AAEA,MAAM,kBAAkD;CACtD,QAAQ;CACR,SAAS;CACT,SAAS;CACT,SAAS;CACT,OAAO;AACT;AAEA,MAAM,mBAAmB,EACvB,WACA,MAAM,OACN,GAAG,WAGC;CACJ,MAAM,OAAO,mBAAmB;CAChC,OACE,iBAAA,GAAA,kBAAA,KAACA,wBAAAA,MAAD;EACE,GAAI;EACO;EACX,OAAO,gBAAgB;EACvB,MAAK;YAEL,iBAAA,GAAA,kBAAA,KAAC,OAAD,CAAQ,CAAA;CACJ,CAAA;AAEV;AAEA,MAAM,oBAAoB,EACxB,WACA,GAAG,WAC+B;CAClC,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EAAM,YAAA,GAAA,OAAA,IAAc,4BAA4B,SAAS;EAAG,GAAI;CAAO,CAAA;AAE3E;AAEA,MAAM,oBAAoB,EACxB,WACA,GAAG,WAC+B;CAClC,OACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;EACE,YAAA,GAAA,OAAA,IACE,0OACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

package/dist/components/metering-row.d.cts

@@ -1,7 +1,7 @@
 "use client";
 
-import { MaterialSymbolIconName } from "../icons/material-symbol.cjs";
 import { Tone } from "../lib/tones.cjs";
+import { SparkIcon } from "@epilot/spark-icons";
 
 //#region src/components/metering-row.d.ts
 declare const MeteringRow: ({
@@ -13,10 +13,10 @@ declare const MeteringRow: ({
 }) => import("react/jsx-runtime").JSX.Element;
 declare const MeteringRowIcon: ({
   className,
-  icon,
+  icon: Glyph,
   ...rest
 }: React.ComponentProps<"span"> & {
-  icon: MaterialSymbolIconName;
+  icon: SparkIcon;
 }) => import("react/jsx-runtime").JSX.Element;
 declare const MeteringRowLabel: ({
   className,

package/dist/components/metering-row.d.ts

@@ -1,7 +1,7 @@
 "use client";
 
-import { MaterialSymbolIconName } from "../icons/material-symbol.js";
 import { Tone } from "../lib/tones.js";
+import { SparkIcon } from "@epilot/spark-icons";
 
 //#region src/components/metering-row.d.ts
 declare const MeteringRow: ({
@@ -13,10 +13,10 @@ declare const MeteringRow: ({
 }) => import("react/jsx-runtime").JSX.Element;
 declare const MeteringRowIcon: ({
   className,
-  icon,
+  icon: Glyph,
   ...rest
 }: React.ComponentProps<"span"> & {
-  icon: MaterialSymbolIconName;
+  icon: SparkIcon;
 }) => import("react/jsx-runtime").JSX.Element;
 declare const MeteringRowLabel: ({
   className,

package/dist/components/metering-row.js

@@ -27,14 +27,14 @@ const toneToIconColor = {
 	warning: "warning",
 	error: "danger"
 };
-const MeteringRowIcon = ({ className, icon, ...rest }) => {
+const MeteringRowIcon = ({ className, icon: Glyph, ...rest }) => {
 	const tone = useMeteringRowTone();
 	return /* @__PURE__ */ jsx(Icon, {
 		...rest,
 		className,
 		color: toneToIconColor[tone],
-		name: icon,
-		size: "large"
+		size: "large",
+		children: /* @__PURE__ */ jsx(Glyph, {})
 	});
 };
 const MeteringRowLabel = ({ className, ...rest }) => {

package/dist/components/metering-row.js.map

@@ -1 +1 @@
-{"version":3,"file":"metering-row.js","names":[],"sources":["../../src/components/metering-row.tsx"],"sourcesContent":["import { createContext, useContext } from 'react'\nimport type { MaterialSymbolIconName } from '../icons/material-symbol'\nimport type { SparkAccentColor } from '../lib/accent-colors'\nimport type { Tone } from '../lib/tones'\nimport { cn } from '../utils/cn'\nimport { Icon } from './icon'\n\nconst MeteringRowContext = createContext<Tone | null>(null)\n\nfunction useMeteringRowTone() {\n  const tone = useContext(MeteringRowContext)\n  if (!tone) {\n    throw new Error('MeteringRow.* must be rendered inside <MeteringRow>')\n  }\n  return tone\n}\n\nconst MeteringRow = ({\n  className,\n  tone,\n  ...rest\n}: React.ComponentProps<'div'> & {\n  tone: Tone\n}) => {\n  return (\n    <MeteringRowContext.Provider value={tone}>\n      <div\n        className={cn('group flex items-center gap-3', className)}\n        data-tone={tone}\n        {...rest}\n      />\n    </MeteringRowContext.Provider>\n  )\n}\n\nconst toneToIconColor: Record<Tone, SparkAccentColor> = {\n  accent: 'accent',\n  neutral: 'neutral',\n  success: 'success',\n  warning: 'warning',\n  error: 'danger',\n}\n\nconst MeteringRowIcon = ({\n  className,\n  icon,\n  ...rest\n}: React.ComponentProps<'span'> & {\n  icon: MaterialSymbolIconName\n}) => {\n  const tone = useMeteringRowTone()\n  return (\n    <Icon\n      {...rest}\n      className={className}\n      color={toneToIconColor[tone]}\n      name={icon}\n      size=\"large\"\n    />\n  )\n}\n\nconst MeteringRowLabel = ({\n  className,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  return (\n    <span className={cn('flex-1 text-sm text-gray', className)} {...rest} />\n  )\n}\n\nconst MeteringRowValue = ({\n  className,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  return (\n    <span\n      className={cn(\n        'text-lg leading-tight font-bold tabular-nums group-data-[tone=accent]:text-accent group-data-[tone=error]:text-error group-data-[tone=neutral]:text-gray group-data-[tone=success]:text-success group-data-[tone=warning]:text-warning',\n        className,\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport { MeteringRow, MeteringRowIcon, MeteringRowLabel, MeteringRowValue }\n"],"mappings":";;;;;;AAOA,MAAM,qBAAqB,cAA2B,IAAI;AAE1D,SAAS,qBAAqB;CAC5B,MAAM,OAAO,WAAW,kBAAkB;CAC1C,IAAI,CAAC,MACH,MAAM,IAAI,MAAM,qDAAqD;CAEvE,OAAO;AACT;AAEA,MAAM,eAAe,EACnB,WACA,MACA,GAAG,WAGC;CACJ,OACE,oBAAC,mBAAmB,UAApB;EAA6B,OAAO;YAClC,oBAAC,OAAD;GACE,WAAW,GAAG,iCAAiC,SAAS;GACxD,aAAW;GACX,GAAI;EACL,CAAA;CAC0B,CAAA;AAEjC;AAEA,MAAM,kBAAkD;CACtD,QAAQ;CACR,SAAS;CACT,SAAS;CACT,SAAS;CACT,OAAO;AACT;AAEA,MAAM,mBAAmB,EACvB,WACA,MACA,GAAG,WAGC;CACJ,MAAM,OAAO,mBAAmB;CAChC,OACE,oBAAC,MAAD;EACE,GAAI;EACO;EACX,OAAO,gBAAgB;EACvB,MAAM;EACN,MAAK;CACN,CAAA;AAEL;AAEA,MAAM,oBAAoB,EACxB,WACA,GAAG,WAC+B;CAClC,OACE,oBAAC,QAAD;EAAM,WAAW,GAAG,4BAA4B,SAAS;EAAG,GAAI;CAAO,CAAA;AAE3E;AAEA,MAAM,oBAAoB,EACxB,WACA,GAAG,WAC+B;CAClC,OACE,oBAAC,QAAD;EACE,WAAW,GACT,0OACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"metering-row.js","names":[],"sources":["../../src/components/metering-row.tsx"],"sourcesContent":["import type { SparkIcon } from '@epilot/spark-icons'\nimport { createContext, useContext } from 'react'\nimport type { SparkAccentColor } from '../lib/accent-colors'\nimport type { Tone } from '../lib/tones'\nimport { cn } from '../utils/cn'\nimport { Icon } from './icon'\n\nconst MeteringRowContext = createContext<Tone | null>(null)\n\nfunction useMeteringRowTone() {\n  const tone = useContext(MeteringRowContext)\n  if (!tone) {\n    throw new Error('MeteringRow.* must be rendered inside <MeteringRow>')\n  }\n  return tone\n}\n\nconst MeteringRow = ({\n  className,\n  tone,\n  ...rest\n}: React.ComponentProps<'div'> & {\n  tone: Tone\n}) => {\n  return (\n    <MeteringRowContext.Provider value={tone}>\n      <div\n        className={cn('group flex items-center gap-3', className)}\n        data-tone={tone}\n        {...rest}\n      />\n    </MeteringRowContext.Provider>\n  )\n}\n\nconst toneToIconColor: Record<Tone, SparkAccentColor> = {\n  accent: 'accent',\n  neutral: 'neutral',\n  success: 'success',\n  warning: 'warning',\n  error: 'danger',\n}\n\nconst MeteringRowIcon = ({\n  className,\n  icon: Glyph,\n  ...rest\n}: React.ComponentProps<'span'> & {\n  icon: SparkIcon\n}) => {\n  const tone = useMeteringRowTone()\n  return (\n    <Icon\n      {...rest}\n      className={className}\n      color={toneToIconColor[tone]}\n      size=\"large\"\n    >\n      <Glyph />\n    </Icon>\n  )\n}\n\nconst MeteringRowLabel = ({\n  className,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  return (\n    <span className={cn('flex-1 text-sm text-gray', className)} {...rest} />\n  )\n}\n\nconst MeteringRowValue = ({\n  className,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  return (\n    <span\n      className={cn(\n        'text-lg leading-tight font-bold tabular-nums group-data-[tone=accent]:text-accent group-data-[tone=error]:text-error group-data-[tone=neutral]:text-gray group-data-[tone=success]:text-success group-data-[tone=warning]:text-warning',\n        className,\n      )}\n      {...rest}\n    />\n  )\n}\n\nexport { MeteringRow, MeteringRowIcon, MeteringRowLabel, MeteringRowValue }\n"],"mappings":";;;;;;AAOA,MAAM,qBAAqB,cAA2B,IAAI;AAE1D,SAAS,qBAAqB;CAC5B,MAAM,OAAO,WAAW,kBAAkB;CAC1C,IAAI,CAAC,MACH,MAAM,IAAI,MAAM,qDAAqD;CAEvE,OAAO;AACT;AAEA,MAAM,eAAe,EACnB,WACA,MACA,GAAG,WAGC;CACJ,OACE,oBAAC,mBAAmB,UAApB;EAA6B,OAAO;YAClC,oBAAC,OAAD;GACE,WAAW,GAAG,iCAAiC,SAAS;GACxD,aAAW;GACX,GAAI;EACL,CAAA;CAC0B,CAAA;AAEjC;AAEA,MAAM,kBAAkD;CACtD,QAAQ;CACR,SAAS;CACT,SAAS;CACT,SAAS;CACT,OAAO;AACT;AAEA,MAAM,mBAAmB,EACvB,WACA,MAAM,OACN,GAAG,WAGC;CACJ,MAAM,OAAO,mBAAmB;CAChC,OACE,oBAAC,MAAD;EACE,GAAI;EACO;EACX,OAAO,gBAAgB;EACvB,MAAK;YAEL,oBAAC,OAAD,CAAQ,CAAA;CACJ,CAAA;AAEV;AAEA,MAAM,oBAAoB,EACxB,WACA,GAAG,WAC+B;CAClC,OACE,oBAAC,QAAD;EAAM,WAAW,GAAG,4BAA4B,SAAS;EAAG,GAAI;CAAO,CAAA;AAE3E;AAEA,MAAM,oBAAoB,EACxB,WACA,GAAG,WAC+B;CAClC,OACE,oBAAC,QAAD;EACE,WAAW,GACT,0OACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

package/dist/components/money-saved-block.cjs

@@ -1,7 +1,7 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_icons_material_symbol = require("../icons/material-symbol.cjs");
 const require_components_typography = require("./typography.cjs");
+let _epilot_spark_icons = require("@epilot/spark-icons");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/money-saved-block.tsx
 const MoneySavedContainer = ({ children, ariaLabel = "Money saved today" }) => {
@@ -26,10 +26,7 @@ const MoneySavedValue = ({ children }) => {
 const MoneySavedDelta = ({ children }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 		className: "flex items-end gap-1 text-sm text-base-success-solid",
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons_material_symbol.MaterialSymbol, {
-			className: "rotate-180 text-[14px]",
-			name: "swap_vert"
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_epilot_spark_icons.SwapVert, { className: "rotate-180 [--spark-icon-size:14px]" }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			className: "tabular-nums",
 			children
 		})]

package/dist/components/money-saved-block.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"money-saved-block.cjs","names":["SectionTitle","StateValue","MaterialSymbol"],"sources":["../../src/components/money-saved-block.tsx"],"sourcesContent":["import { MaterialSymbol } from '../icons/material-symbol'\nimport { SectionTitle, StateValue } from './typography'\n\nconst MoneySavedContainer = ({\n  children,\n  ariaLabel = 'Money saved today',\n}: {\n  children: React.ReactNode\n  /** Override the accessible label for the container. Defaults to `\"Money saved today\"`. */\n  ariaLabel?: string\n}) => {\n  return (\n    <div\n      aria-label={ariaLabel}\n      className=\"flex items-center justify-between gap-4\"\n    >\n      {children}\n    </div>\n  )\n}\n\nconst MoneySavedContent = ({ children }: { children: React.ReactNode }) => {\n  return <div className=\"flex flex-col gap-1\">{children}</div>\n}\n\nconst MoneySavedTitle = ({ children }: { children: React.ReactNode }) => {\n  return <SectionTitle>{children}</SectionTitle>\n}\n\nconst MoneySavedValue = ({ children }: { children: React.ReactNode }) => {\n  return <StateValue>{children}</StateValue>\n}\n\nconst MoneySavedDelta = ({ children }: { children: React.ReactNode }) => {\n  return (\n    <span className=\"flex items-end gap-1 text-sm text-base-success-solid\">\n      <MaterialSymbol className=\"rotate-180 text-[14px]\" name=\"swap_vert\" />\n      <span className=\"tabular-nums\">{children}</span>\n    </span>\n  )\n}\n\nconst MoneySavedGaugeContainer = ({\n  children,\n}: {\n  children: React.ReactNode\n}) => {\n  return (\n    <div className=\"relative top-2 flex flex-col items-end gap-1\">\n      {children}\n    </div>\n  )\n}\n\nconst MoneySavedGaugeContent = ({\n  autarkyProgress,\n  autarkyLabel,\n  autarkyCaption = 'Autarky',\n  gaugeWidth,\n  gaugeHeight,\n  gaugeArcPath,\n  gaugeStrokeWidth,\n}: {\n  autarkyProgress: number\n  autarkyLabel: string\n  /** Override the caption shown beneath the gauge. Defaults to `\"Autarky\"`. */\n  autarkyCaption?: React.ReactNode\n  gaugeWidth: number\n  gaugeHeight: number\n  gaugeArcPath: string\n  gaugeStrokeWidth: number\n}) => {\n  return (\n    <>\n      <svg\n        className=\"h-[44px] w-[76px]\"\n        viewBox={`0 0 ${gaugeWidth} ${gaugeHeight}`}\n        aria-hidden=\"true\"\n      >\n        <path\n          d={gaugeArcPath}\n          fill=\"none\"\n          stroke=\"var(--neutral-a5)\"\n          strokeWidth={gaugeStrokeWidth}\n          strokeLinecap=\"round\"\n          pathLength={1}\n        />\n        <path\n          d={gaugeArcPath}\n          fill=\"none\"\n          stroke=\"var(--green-a9)\"\n          strokeWidth={gaugeStrokeWidth}\n          strokeLinecap=\"round\"\n          pathLength={1}\n          strokeDasharray={`${autarkyProgress} 1`}\n        />\n      </svg>\n      <span className=\"absolute inset-0 flex items-center justify-center text-sm font-semibold text-gray\">\n        {autarkyLabel}\n      </span>\n      <span className=\"mx-auto text-xs text-gray-light\">{autarkyCaption}</span>\n    </>\n  )\n}\n\nexport {\n  MoneySavedContainer,\n  MoneySavedContent,\n  MoneySavedTitle,\n  MoneySavedValue,\n  MoneySavedDelta,\n  MoneySavedGaugeContainer,\n  MoneySavedGaugeContent,\n}\n"],"mappings":";;;;;;AAGA,MAAM,uBAAuB,EAC3B,UACA,YAAY,0BAKR;CACJ,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,cAAY;EACZ,WAAU;EAET;CACE,CAAA;AAET;AAEA,MAAM,qBAAqB,EAAE,eAA8C;CACzE,OAAO,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,WAAU;EAAuB;CAAc,CAAA;AAC7D;AAEA,MAAM,mBAAmB,EAAE,eAA8C;CACvE,OAAO,iBAAA,GAAA,kBAAA,KAACA,8BAAAA,cAAD,EAAe,SAAuB,CAAA;AAC/C;AAEA,MAAM,mBAAmB,EAAE,eAA8C;CACvE,OAAO,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,YAAD,EAAa,SAAqB,CAAA;AAC3C;AAEA,MAAM,mBAAmB,EAAE,eAA8C;CACvE,OACE,iBAAA,GAAA,kBAAA,MAAC,QAAD;EAAM,WAAU;YAAhB,CACE,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,gBAAD;GAAgB,WAAU;GAAyB,MAAK;EAAa,CAAA,GACrE,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAU;GAAgB;EAAe,CAAA,CAC3C;;AAEV;AAEA,MAAM,4BAA4B,EAChC,eAGI;CACJ,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,WAAU;EACZ;CACE,CAAA;AAET;AAEA,MAAM,0BAA0B,EAC9B,iBACA,cACA,iBAAiB,WACjB,YACA,aACA,cACA,uBAUI;CACJ,OACE,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA;EACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;GACE,WAAU;GACV,SAAS,OAAO,WAAW,GAAG;GAC9B,eAAY;aAHd,CAKE,iBAAA,GAAA,kBAAA,KAAC,QAAD;IACE,GAAG;IACH,MAAK;IACL,QAAO;IACP,aAAa;IACb,eAAc;IACd,YAAY;GACb,CAAA,GACD,iBAAA,GAAA,kBAAA,KAAC,QAAD;IACE,GAAG;IACH,MAAK;IACL,QAAO;IACP,aAAa;IACb,eAAc;IACd,YAAY;IACZ,iBAAiB,GAAG,gBAAgB;GACrC,CAAA,CACE;;EACL,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAU;aACb;EACG,CAAA;EACN,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAU;aAAmC;EAAqB,CAAA;CACxE,EAAA,CAAA;AAEN"}
+{"version":3,"file":"money-saved-block.cjs","names":["SectionTitle","StateValue","SwapVert"],"sources":["../../src/components/money-saved-block.tsx"],"sourcesContent":["import { SwapVert } from '@epilot/spark-icons'\nimport { SectionTitle, StateValue } from './typography'\n\nconst MoneySavedContainer = ({\n  children,\n  ariaLabel = 'Money saved today',\n}: {\n  children: React.ReactNode\n  /** Override the accessible label for the container. Defaults to `\"Money saved today\"`. */\n  ariaLabel?: string\n}) => {\n  return (\n    <div\n      aria-label={ariaLabel}\n      className=\"flex items-center justify-between gap-4\"\n    >\n      {children}\n    </div>\n  )\n}\n\nconst MoneySavedContent = ({ children }: { children: React.ReactNode }) => {\n  return <div className=\"flex flex-col gap-1\">{children}</div>\n}\n\nconst MoneySavedTitle = ({ children }: { children: React.ReactNode }) => {\n  return <SectionTitle>{children}</SectionTitle>\n}\n\nconst MoneySavedValue = ({ children }: { children: React.ReactNode }) => {\n  return <StateValue>{children}</StateValue>\n}\n\nconst MoneySavedDelta = ({ children }: { children: React.ReactNode }) => {\n  return (\n    <span className=\"flex items-end gap-1 text-sm text-base-success-solid\">\n      <SwapVert className=\"rotate-180 [--spark-icon-size:14px]\" />\n      <span className=\"tabular-nums\">{children}</span>\n    </span>\n  )\n}\n\nconst MoneySavedGaugeContainer = ({\n  children,\n}: {\n  children: React.ReactNode\n}) => {\n  return (\n    <div className=\"relative top-2 flex flex-col items-end gap-1\">\n      {children}\n    </div>\n  )\n}\n\nconst MoneySavedGaugeContent = ({\n  autarkyProgress,\n  autarkyLabel,\n  autarkyCaption = 'Autarky',\n  gaugeWidth,\n  gaugeHeight,\n  gaugeArcPath,\n  gaugeStrokeWidth,\n}: {\n  autarkyProgress: number\n  autarkyLabel: string\n  /** Override the caption shown beneath the gauge. Defaults to `\"Autarky\"`. */\n  autarkyCaption?: React.ReactNode\n  gaugeWidth: number\n  gaugeHeight: number\n  gaugeArcPath: string\n  gaugeStrokeWidth: number\n}) => {\n  return (\n    <>\n      <svg\n        className=\"h-[44px] w-[76px]\"\n        viewBox={`0 0 ${gaugeWidth} ${gaugeHeight}`}\n        aria-hidden=\"true\"\n      >\n        <path\n          d={gaugeArcPath}\n          fill=\"none\"\n          stroke=\"var(--neutral-a5)\"\n          strokeWidth={gaugeStrokeWidth}\n          strokeLinecap=\"round\"\n          pathLength={1}\n        />\n        <path\n          d={gaugeArcPath}\n          fill=\"none\"\n          stroke=\"var(--green-a9)\"\n          strokeWidth={gaugeStrokeWidth}\n          strokeLinecap=\"round\"\n          pathLength={1}\n          strokeDasharray={`${autarkyProgress} 1`}\n        />\n      </svg>\n      <span className=\"absolute inset-0 flex items-center justify-center text-sm font-semibold text-gray\">\n        {autarkyLabel}\n      </span>\n      <span className=\"mx-auto text-xs text-gray-light\">{autarkyCaption}</span>\n    </>\n  )\n}\n\nexport {\n  MoneySavedContainer,\n  MoneySavedContent,\n  MoneySavedTitle,\n  MoneySavedValue,\n  MoneySavedDelta,\n  MoneySavedGaugeContainer,\n  MoneySavedGaugeContent,\n}\n"],"mappings":";;;;;;AAGA,MAAM,uBAAuB,EAC3B,UACA,YAAY,0BAKR;CACJ,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,cAAY;EACZ,WAAU;EAET;CACE,CAAA;AAET;AAEA,MAAM,qBAAqB,EAAE,eAA8C;CACzE,OAAO,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,WAAU;EAAuB;CAAc,CAAA;AAC7D;AAEA,MAAM,mBAAmB,EAAE,eAA8C;CACvE,OAAO,iBAAA,GAAA,kBAAA,KAACA,8BAAAA,cAAD,EAAe,SAAuB,CAAA;AAC/C;AAEA,MAAM,mBAAmB,EAAE,eAA8C;CACvE,OAAO,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,YAAD,EAAa,SAAqB,CAAA;AAC3C;AAEA,MAAM,mBAAmB,EAAE,eAA8C;CACvE,OACE,iBAAA,GAAA,kBAAA,MAAC,QAAD;EAAM,WAAU;YAAhB,CACE,iBAAA,GAAA,kBAAA,KAACC,oBAAAA,UAAD,EAAU,WAAU,sCAAuC,CAAA,GAC3D,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAU;GAAgB;EAAe,CAAA,CAC3C;;AAEV;AAEA,MAAM,4BAA4B,EAChC,eAGI;CACJ,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,WAAU;EACZ;CACE,CAAA;AAET;AAEA,MAAM,0BAA0B,EAC9B,iBACA,cACA,iBAAiB,WACjB,YACA,aACA,cACA,uBAUI;CACJ,OACE,iBAAA,GAAA,kBAAA,MAAA,kBAAA,UAAA,EAAA,UAAA;EACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;GACE,WAAU;GACV,SAAS,OAAO,WAAW,GAAG;GAC9B,eAAY;aAHd,CAKE,iBAAA,GAAA,kBAAA,KAAC,QAAD;IACE,GAAG;IACH,MAAK;IACL,QAAO;IACP,aAAa;IACb,eAAc;IACd,YAAY;GACb,CAAA,GACD,iBAAA,GAAA,kBAAA,KAAC,QAAD;IACE,GAAG;IACH,MAAK;IACL,QAAO;IACP,aAAa;IACb,eAAc;IACd,YAAY;IACZ,iBAAiB,GAAG,gBAAgB;GACrC,CAAA,CACE;;EACL,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAU;aACb;EACG,CAAA;EACN,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAU;aAAmC;EAAqB,CAAA;CACxE,EAAA,CAAA;AAEN"}

package/dist/components/money-saved-block.js

@@ -1,6 +1,6 @@
 "use client";
-import { MaterialSymbol } from "../icons/material-symbol.js";
 import { SectionTitle, StateValue } from "./typography.js";
+import { SwapVert } from "@epilot/spark-icons";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/money-saved-block.tsx
 const MoneySavedContainer = ({ children, ariaLabel = "Money saved today" }) => {
@@ -25,10 +25,7 @@ const MoneySavedValue = ({ children }) => {
 const MoneySavedDelta = ({ children }) => {
 	return /* @__PURE__ */ jsxs("span", {
 		className: "flex items-end gap-1 text-sm text-base-success-solid",
-		children: [/* @__PURE__ */ jsx(MaterialSymbol, {
-			className: "rotate-180 text-[14px]",
-			name: "swap_vert"
-		}), /* @__PURE__ */ jsx("span", {
+		children: [/* @__PURE__ */ jsx(SwapVert, { className: "rotate-180 [--spark-icon-size:14px]" }), /* @__PURE__ */ jsx("span", {
 			className: "tabular-nums",
 			children
 		})]

package/dist/components/money-saved-block.js.map

@@ -1 +1 @@
-{"version":3,"file":"money-saved-block.js","names":[],"sources":["../../src/components/money-saved-block.tsx"],"sourcesContent":["import { MaterialSymbol } from '../icons/material-symbol'\nimport { SectionTitle, StateValue } from './typography'\n\nconst MoneySavedContainer = ({\n  children,\n  ariaLabel = 'Money saved today',\n}: {\n  children: React.ReactNode\n  /** Override the accessible label for the container. Defaults to `\"Money saved today\"`. */\n  ariaLabel?: string\n}) => {\n  return (\n    <div\n      aria-label={ariaLabel}\n      className=\"flex items-center justify-between gap-4\"\n    >\n      {children}\n    </div>\n  )\n}\n\nconst MoneySavedContent = ({ children }: { children: React.ReactNode }) => {\n  return <div className=\"flex flex-col gap-1\">{children}</div>\n}\n\nconst MoneySavedTitle = ({ children }: { children: React.ReactNode }) => {\n  return <SectionTitle>{children}</SectionTitle>\n}\n\nconst MoneySavedValue = ({ children }: { children: React.ReactNode }) => {\n  return <StateValue>{children}</StateValue>\n}\n\nconst MoneySavedDelta = ({ children }: { children: React.ReactNode }) => {\n  return (\n    <span className=\"flex items-end gap-1 text-sm text-base-success-solid\">\n      <MaterialSymbol className=\"rotate-180 text-[14px]\" name=\"swap_vert\" />\n      <span className=\"tabular-nums\">{children}</span>\n    </span>\n  )\n}\n\nconst MoneySavedGaugeContainer = ({\n  children,\n}: {\n  children: React.ReactNode\n}) => {\n  return (\n    <div className=\"relative top-2 flex flex-col items-end gap-1\">\n      {children}\n    </div>\n  )\n}\n\nconst MoneySavedGaugeContent = ({\n  autarkyProgress,\n  autarkyLabel,\n  autarkyCaption = 'Autarky',\n  gaugeWidth,\n  gaugeHeight,\n  gaugeArcPath,\n  gaugeStrokeWidth,\n}: {\n  autarkyProgress: number\n  autarkyLabel: string\n  /** Override the caption shown beneath the gauge. Defaults to `\"Autarky\"`. */\n  autarkyCaption?: React.ReactNode\n  gaugeWidth: number\n  gaugeHeight: number\n  gaugeArcPath: string\n  gaugeStrokeWidth: number\n}) => {\n  return (\n    <>\n      <svg\n        className=\"h-[44px] w-[76px]\"\n        viewBox={`0 0 ${gaugeWidth} ${gaugeHeight}`}\n        aria-hidden=\"true\"\n      >\n        <path\n          d={gaugeArcPath}\n          fill=\"none\"\n          stroke=\"var(--neutral-a5)\"\n          strokeWidth={gaugeStrokeWidth}\n          strokeLinecap=\"round\"\n          pathLength={1}\n        />\n        <path\n          d={gaugeArcPath}\n          fill=\"none\"\n          stroke=\"var(--green-a9)\"\n          strokeWidth={gaugeStrokeWidth}\n          strokeLinecap=\"round\"\n          pathLength={1}\n          strokeDasharray={`${autarkyProgress} 1`}\n        />\n      </svg>\n      <span className=\"absolute inset-0 flex items-center justify-center text-sm font-semibold text-gray\">\n        {autarkyLabel}\n      </span>\n      <span className=\"mx-auto text-xs text-gray-light\">{autarkyCaption}</span>\n    </>\n  )\n}\n\nexport {\n  MoneySavedContainer,\n  MoneySavedContent,\n  MoneySavedTitle,\n  MoneySavedValue,\n  MoneySavedDelta,\n  MoneySavedGaugeContainer,\n  MoneySavedGaugeContent,\n}\n"],"mappings":";;;;;AAGA,MAAM,uBAAuB,EAC3B,UACA,YAAY,0BAKR;CACJ,OACE,oBAAC,OAAD;EACE,cAAY;EACZ,WAAU;EAET;CACE,CAAA;AAET;AAEA,MAAM,qBAAqB,EAAE,eAA8C;CACzE,OAAO,oBAAC,OAAD;EAAK,WAAU;EAAuB;CAAc,CAAA;AAC7D;AAEA,MAAM,mBAAmB,EAAE,eAA8C;CACvE,OAAO,oBAAC,cAAD,EAAe,SAAuB,CAAA;AAC/C;AAEA,MAAM,mBAAmB,EAAE,eAA8C;CACvE,OAAO,oBAAC,YAAD,EAAa,SAAqB,CAAA;AAC3C;AAEA,MAAM,mBAAmB,EAAE,eAA8C;CACvE,OACE,qBAAC,QAAD;EAAM,WAAU;YAAhB,CACE,oBAAC,gBAAD;GAAgB,WAAU;GAAyB,MAAK;EAAa,CAAA,GACrE,oBAAC,QAAD;GAAM,WAAU;GAAgB;EAAe,CAAA,CAC3C;;AAEV;AAEA,MAAM,4BAA4B,EAChC,eAGI;CACJ,OACE,oBAAC,OAAD;EAAK,WAAU;EACZ;CACE,CAAA;AAET;AAEA,MAAM,0BAA0B,EAC9B,iBACA,cACA,iBAAiB,WACjB,YACA,aACA,cACA,uBAUI;CACJ,OACE,qBAAA,UAAA,EAAA,UAAA;EACE,qBAAC,OAAD;GACE,WAAU;GACV,SAAS,OAAO,WAAW,GAAG;GAC9B,eAAY;aAHd,CAKE,oBAAC,QAAD;IACE,GAAG;IACH,MAAK;IACL,QAAO;IACP,aAAa;IACb,eAAc;IACd,YAAY;GACb,CAAA,GACD,oBAAC,QAAD;IACE,GAAG;IACH,MAAK;IACL,QAAO;IACP,aAAa;IACb,eAAc;IACd,YAAY;IACZ,iBAAiB,GAAG,gBAAgB;GACrC,CAAA,CACE;;EACL,oBAAC,QAAD;GAAM,WAAU;aACb;EACG,CAAA;EACN,oBAAC,QAAD;GAAM,WAAU;aAAmC;EAAqB,CAAA;CACxE,EAAA,CAAA;AAEN"}
+{"version":3,"file":"money-saved-block.js","names":[],"sources":["../../src/components/money-saved-block.tsx"],"sourcesContent":["import { SwapVert } from '@epilot/spark-icons'\nimport { SectionTitle, StateValue } from './typography'\n\nconst MoneySavedContainer = ({\n  children,\n  ariaLabel = 'Money saved today',\n}: {\n  children: React.ReactNode\n  /** Override the accessible label for the container. Defaults to `\"Money saved today\"`. */\n  ariaLabel?: string\n}) => {\n  return (\n    <div\n      aria-label={ariaLabel}\n      className=\"flex items-center justify-between gap-4\"\n    >\n      {children}\n    </div>\n  )\n}\n\nconst MoneySavedContent = ({ children }: { children: React.ReactNode }) => {\n  return <div className=\"flex flex-col gap-1\">{children}</div>\n}\n\nconst MoneySavedTitle = ({ children }: { children: React.ReactNode }) => {\n  return <SectionTitle>{children}</SectionTitle>\n}\n\nconst MoneySavedValue = ({ children }: { children: React.ReactNode }) => {\n  return <StateValue>{children}</StateValue>\n}\n\nconst MoneySavedDelta = ({ children }: { children: React.ReactNode }) => {\n  return (\n    <span className=\"flex items-end gap-1 text-sm text-base-success-solid\">\n      <SwapVert className=\"rotate-180 [--spark-icon-size:14px]\" />\n      <span className=\"tabular-nums\">{children}</span>\n    </span>\n  )\n}\n\nconst MoneySavedGaugeContainer = ({\n  children,\n}: {\n  children: React.ReactNode\n}) => {\n  return (\n    <div className=\"relative top-2 flex flex-col items-end gap-1\">\n      {children}\n    </div>\n  )\n}\n\nconst MoneySavedGaugeContent = ({\n  autarkyProgress,\n  autarkyLabel,\n  autarkyCaption = 'Autarky',\n  gaugeWidth,\n  gaugeHeight,\n  gaugeArcPath,\n  gaugeStrokeWidth,\n}: {\n  autarkyProgress: number\n  autarkyLabel: string\n  /** Override the caption shown beneath the gauge. Defaults to `\"Autarky\"`. */\n  autarkyCaption?: React.ReactNode\n  gaugeWidth: number\n  gaugeHeight: number\n  gaugeArcPath: string\n  gaugeStrokeWidth: number\n}) => {\n  return (\n    <>\n      <svg\n        className=\"h-[44px] w-[76px]\"\n        viewBox={`0 0 ${gaugeWidth} ${gaugeHeight}`}\n        aria-hidden=\"true\"\n      >\n        <path\n          d={gaugeArcPath}\n          fill=\"none\"\n          stroke=\"var(--neutral-a5)\"\n          strokeWidth={gaugeStrokeWidth}\n          strokeLinecap=\"round\"\n          pathLength={1}\n        />\n        <path\n          d={gaugeArcPath}\n          fill=\"none\"\n          stroke=\"var(--green-a9)\"\n          strokeWidth={gaugeStrokeWidth}\n          strokeLinecap=\"round\"\n          pathLength={1}\n          strokeDasharray={`${autarkyProgress} 1`}\n        />\n      </svg>\n      <span className=\"absolute inset-0 flex items-center justify-center text-sm font-semibold text-gray\">\n        {autarkyLabel}\n      </span>\n      <span className=\"mx-auto text-xs text-gray-light\">{autarkyCaption}</span>\n    </>\n  )\n}\n\nexport {\n  MoneySavedContainer,\n  MoneySavedContent,\n  MoneySavedTitle,\n  MoneySavedValue,\n  MoneySavedDelta,\n  MoneySavedGaugeContainer,\n  MoneySavedGaugeContent,\n}\n"],"mappings":";;;;;AAGA,MAAM,uBAAuB,EAC3B,UACA,YAAY,0BAKR;CACJ,OACE,oBAAC,OAAD;EACE,cAAY;EACZ,WAAU;EAET;CACE,CAAA;AAET;AAEA,MAAM,qBAAqB,EAAE,eAA8C;CACzE,OAAO,oBAAC,OAAD;EAAK,WAAU;EAAuB;CAAc,CAAA;AAC7D;AAEA,MAAM,mBAAmB,EAAE,eAA8C;CACvE,OAAO,oBAAC,cAAD,EAAe,SAAuB,CAAA;AAC/C;AAEA,MAAM,mBAAmB,EAAE,eAA8C;CACvE,OAAO,oBAAC,YAAD,EAAa,SAAqB,CAAA;AAC3C;AAEA,MAAM,mBAAmB,EAAE,eAA8C;CACvE,OACE,qBAAC,QAAD;EAAM,WAAU;YAAhB,CACE,oBAAC,UAAD,EAAU,WAAU,sCAAuC,CAAA,GAC3D,oBAAC,QAAD;GAAM,WAAU;GAAgB;EAAe,CAAA,CAC3C;;AAEV;AAEA,MAAM,4BAA4B,EAChC,eAGI;CACJ,OACE,oBAAC,OAAD;EAAK,WAAU;EACZ;CACE,CAAA;AAET;AAEA,MAAM,0BAA0B,EAC9B,iBACA,cACA,iBAAiB,WACjB,YACA,aACA,cACA,uBAUI;CACJ,OACE,qBAAA,UAAA,EAAA,UAAA;EACE,qBAAC,OAAD;GACE,WAAU;GACV,SAAS,OAAO,WAAW,GAAG;GAC9B,eAAY;aAHd,CAKE,oBAAC,QAAD;IACE,GAAG;IACH,MAAK;IACL,QAAO;IACP,aAAa;IACb,eAAc;IACd,YAAY;GACb,CAAA,GACD,oBAAC,QAAD;IACE,GAAG;IACH,MAAK;IACL,QAAO;IACP,aAAa;IACb,eAAc;IACd,YAAY;IACZ,iBAAiB,GAAG,gBAAgB;GACrC,CAAA,CACE;;EACL,oBAAC,QAAD;GAAM,WAAU;aACb;EACG,CAAA;EACN,oBAAC,QAAD;GAAM,WAAU;aAAmC;EAAqB,CAAA;CACxE,EAAA,CAAA;AAEN"}

package/dist/components/on-off-button.cjs

@@ -1,6 +1,6 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_icons_material_symbol = require("../icons/material-symbol.cjs");
+let _epilot_spark_icons = require("@epilot/spark-icons");
 let react_jsx_runtime = require("react/jsx-runtime");
 let class_variance_authority = require("class-variance-authority");
 //#region src/components/on-off-button.tsx
@@ -23,10 +23,7 @@ function OnOffButton({ disabled, isOn, onClick, className }) {
 		disabled,
 		onClick: handleClick,
 		type: "button",
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons_material_symbol.MaterialSymbol, {
-			className: "block text-[16px]! leading-none",
-			name: "power_settings_new"
-		})
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_epilot_spark_icons.PowerSettingsNew, { className: "block leading-none [--spark-icon-size:16px]" })
 	});
 }
 //#endregion

package/dist/components/on-off-button.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"on-off-button.cjs","names":["MaterialSymbol"],"sources":["../../src/components/on-off-button.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority'\nimport type { MouseEvent } from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\n\ninterface OnOffButtonProps {\n  isOn: boolean\n  disabled?: boolean\n  onClick: () => void\n  className?: string\n}\n\nexport function OnOffButton({\n  disabled,\n  isOn,\n  onClick,\n  className,\n}: OnOffButtonProps) {\n  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n    event.stopPropagation()\n    onClick()\n  }\n\n  const onOfButtonClassName = cva(\n    'focus-visible:ring-primary inline-flex size-9 min-w-9 cursor-pointer items-center justify-center justify-self-end rounded-[max(var(--spark-rounded-md),var(--spark-rounded-full))] transition-colors focus-visible:ring-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-60',\n    {\n      variants: {\n        isOn: {\n          true: 'bg-base-success-soft text-success hover:bg-base-success-soft/80',\n          false: 'border border-gray text-gray-light hover:bg-base-gray-soft',\n        },\n      },\n    },\n  )\n\n  return (\n    <button\n      aria-label={isOn ? 'Turn off' : 'Turn on'}\n      aria-pressed={isOn}\n      className={onOfButtonClassName({ isOn, className })}\n      disabled={disabled}\n      onClick={handleClick}\n      type=\"button\"\n    >\n      <MaterialSymbol\n        className=\"block text-[16px]! leading-none\"\n        name=\"power_settings_new\"\n      />\n    </button>\n  )\n}\n"],"mappings":";;;;;;AAWA,SAAgB,YAAY,EAC1B,UACA,MACA,SACA,aACmB;CACnB,MAAM,eAAe,UAAyC;EAC5D,MAAM,gBAAgB;EACtB,QAAQ;CACV;CAEA,MAAM,uBAAA,GAAA,yBAAA,KACJ,wSACA,EACE,UAAU,EACR,MAAM;EACJ,MAAM;EACN,OAAO;CACT,EACF,EACF,CACF;CAEA,OACE,iBAAA,GAAA,kBAAA,KAAC,UAAD;EACE,cAAY,OAAO,aAAa;EAChC,gBAAc;EACd,WAAW,oBAAoB;GAAE;GAAM;EAAU,CAAC;EACxC;EACV,SAAS;EACT,MAAK;YAEL,iBAAA,GAAA,kBAAA,KAACA,8BAAAA,gBAAD;GACE,WAAU;GACV,MAAK;EACN,CAAA;CACK,CAAA;AAEZ"}
+{"version":3,"file":"on-off-button.cjs","names":["PowerSettingsNew"],"sources":["../../src/components/on-off-button.tsx"],"sourcesContent":["import { PowerSettingsNew } from '@epilot/spark-icons'\nimport { cva } from 'class-variance-authority'\nimport type { MouseEvent } from 'react'\n\ninterface OnOffButtonProps {\n  isOn: boolean\n  disabled?: boolean\n  onClick: () => void\n  className?: string\n}\n\nexport function OnOffButton({\n  disabled,\n  isOn,\n  onClick,\n  className,\n}: OnOffButtonProps) {\n  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n    event.stopPropagation()\n    onClick()\n  }\n\n  const onOfButtonClassName = cva(\n    'focus-visible:ring-primary inline-flex size-9 min-w-9 cursor-pointer items-center justify-center justify-self-end rounded-[max(var(--spark-rounded-md),var(--spark-rounded-full))] transition-colors focus-visible:ring-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-60',\n    {\n      variants: {\n        isOn: {\n          true: 'bg-base-success-soft text-success hover:bg-base-success-soft/80',\n          false: 'border border-gray text-gray-light hover:bg-base-gray-soft',\n        },\n      },\n    },\n  )\n\n  return (\n    <button\n      aria-label={isOn ? 'Turn off' : 'Turn on'}\n      aria-pressed={isOn}\n      className={onOfButtonClassName({ isOn, className })}\n      disabled={disabled}\n      onClick={handleClick}\n      type=\"button\"\n    >\n      <PowerSettingsNew className=\"block leading-none [--spark-icon-size:16px]\" />\n    </button>\n  )\n}\n"],"mappings":";;;;;;AAWA,SAAgB,YAAY,EAC1B,UACA,MACA,SACA,aACmB;CACnB,MAAM,eAAe,UAAyC;EAC5D,MAAM,gBAAgB;EACtB,QAAQ;CACV;CAEA,MAAM,uBAAA,GAAA,yBAAA,KACJ,wSACA,EACE,UAAU,EACR,MAAM;EACJ,MAAM;EACN,OAAO;CACT,EACF,EACF,CACF;CAEA,OACE,iBAAA,GAAA,kBAAA,KAAC,UAAD;EACE,cAAY,OAAO,aAAa;EAChC,gBAAc;EACd,WAAW,oBAAoB;GAAE;GAAM;EAAU,CAAC;EACxC;EACV,SAAS;EACT,MAAK;YAEL,iBAAA,GAAA,kBAAA,KAACA,oBAAAA,kBAAD,EAAkB,WAAU,8CAA+C,CAAA;CACrE,CAAA;AAEZ"}

package/dist/components/on-off-button.js

@@ -1,5 +1,5 @@
 "use client";
-import { MaterialSymbol } from "../icons/material-symbol.js";
+import { PowerSettingsNew } from "@epilot/spark-icons";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 //#region src/components/on-off-button.tsx
@@ -22,10 +22,7 @@ function OnOffButton({ disabled, isOn, onClick, className }) {
 		disabled,
 		onClick: handleClick,
 		type: "button",
-		children: /* @__PURE__ */ jsx(MaterialSymbol, {
-			className: "block text-[16px]! leading-none",
-			name: "power_settings_new"
-		})
+		children: /* @__PURE__ */ jsx(PowerSettingsNew, { className: "block leading-none [--spark-icon-size:16px]" })
 	});
 }
 //#endregion

package/dist/components/on-off-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"on-off-button.js","names":[],"sources":["../../src/components/on-off-button.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority'\nimport type { MouseEvent } from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\n\ninterface OnOffButtonProps {\n  isOn: boolean\n  disabled?: boolean\n  onClick: () => void\n  className?: string\n}\n\nexport function OnOffButton({\n  disabled,\n  isOn,\n  onClick,\n  className,\n}: OnOffButtonProps) {\n  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n    event.stopPropagation()\n    onClick()\n  }\n\n  const onOfButtonClassName = cva(\n    'focus-visible:ring-primary inline-flex size-9 min-w-9 cursor-pointer items-center justify-center justify-self-end rounded-[max(var(--spark-rounded-md),var(--spark-rounded-full))] transition-colors focus-visible:ring-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-60',\n    {\n      variants: {\n        isOn: {\n          true: 'bg-base-success-soft text-success hover:bg-base-success-soft/80',\n          false: 'border border-gray text-gray-light hover:bg-base-gray-soft',\n        },\n      },\n    },\n  )\n\n  return (\n    <button\n      aria-label={isOn ? 'Turn off' : 'Turn on'}\n      aria-pressed={isOn}\n      className={onOfButtonClassName({ isOn, className })}\n      disabled={disabled}\n      onClick={handleClick}\n      type=\"button\"\n    >\n      <MaterialSymbol\n        className=\"block text-[16px]! leading-none\"\n        name=\"power_settings_new\"\n      />\n    </button>\n  )\n}\n"],"mappings":";;;;;AAWA,SAAgB,YAAY,EAC1B,UACA,MACA,SACA,aACmB;CACnB,MAAM,eAAe,UAAyC;EAC5D,MAAM,gBAAgB;EACtB,QAAQ;CACV;CAEA,MAAM,sBAAsB,IAC1B,wSACA,EACE,UAAU,EACR,MAAM;EACJ,MAAM;EACN,OAAO;CACT,EACF,EACF,CACF;CAEA,OACE,oBAAC,UAAD;EACE,cAAY,OAAO,aAAa;EAChC,gBAAc;EACd,WAAW,oBAAoB;GAAE;GAAM;EAAU,CAAC;EACxC;EACV,SAAS;EACT,MAAK;YAEL,oBAAC,gBAAD;GACE,WAAU;GACV,MAAK;EACN,CAAA;CACK,CAAA;AAEZ"}
+{"version":3,"file":"on-off-button.js","names":[],"sources":["../../src/components/on-off-button.tsx"],"sourcesContent":["import { PowerSettingsNew } from '@epilot/spark-icons'\nimport { cva } from 'class-variance-authority'\nimport type { MouseEvent } from 'react'\n\ninterface OnOffButtonProps {\n  isOn: boolean\n  disabled?: boolean\n  onClick: () => void\n  className?: string\n}\n\nexport function OnOffButton({\n  disabled,\n  isOn,\n  onClick,\n  className,\n}: OnOffButtonProps) {\n  const handleClick = (event: MouseEvent<HTMLButtonElement>) => {\n    event.stopPropagation()\n    onClick()\n  }\n\n  const onOfButtonClassName = cva(\n    'focus-visible:ring-primary inline-flex size-9 min-w-9 cursor-pointer items-center justify-center justify-self-end rounded-[max(var(--spark-rounded-md),var(--spark-rounded-full))] transition-colors focus-visible:ring-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-60',\n    {\n      variants: {\n        isOn: {\n          true: 'bg-base-success-soft text-success hover:bg-base-success-soft/80',\n          false: 'border border-gray text-gray-light hover:bg-base-gray-soft',\n        },\n      },\n    },\n  )\n\n  return (\n    <button\n      aria-label={isOn ? 'Turn off' : 'Turn on'}\n      aria-pressed={isOn}\n      className={onOfButtonClassName({ isOn, className })}\n      disabled={disabled}\n      onClick={handleClick}\n      type=\"button\"\n    >\n      <PowerSettingsNew className=\"block leading-none [--spark-icon-size:16px]\" />\n    </button>\n  )\n}\n"],"mappings":";;;;;AAWA,SAAgB,YAAY,EAC1B,UACA,MACA,SACA,aACmB;CACnB,MAAM,eAAe,UAAyC;EAC5D,MAAM,gBAAgB;EACtB,QAAQ;CACV;CAEA,MAAM,sBAAsB,IAC1B,wSACA,EACE,UAAU,EACR,MAAM;EACJ,MAAM;EACN,OAAO;CACT,EACF,EACF,CACF;CAEA,OACE,oBAAC,UAAD;EACE,cAAY,OAAO,aAAa;EAChC,gBAAc;EACd,WAAW,oBAAoB;GAAE;GAAM;EAAU,CAAC;EACxC;EACV,SAAS;EACT,MAAK;YAEL,oBAAC,kBAAD,EAAkB,WAAU,8CAA+C,CAAA;CACrE,CAAA;AAEZ"}

package/dist/components/page-header.cjs

@@ -1,11 +1,11 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-DY84GLCh.cjs");
-const require_icons_material_symbol = require("../icons/material-symbol.cjs");
 const require_components_button = require("./button.cjs");
 const require_components_typography = require("./typography.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react);
+let _epilot_spark_icons = require("@epilot/spark-icons");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _base_ui_react_merge_props = require("@base-ui/react/merge-props");
 let _base_ui_react_use_render = require("@base-ui/react/use-render");
@@ -26,7 +26,7 @@ const PageHeaderBackButton = react.forwardRef(({ children, className, "aria-labe
 	"aria-label": ariaLabel,
 	className: (0, cnfast.cn)("col-start-1 justify-self-start", className),
 	...props,
-	children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons_material_symbol.MaterialSymbol, { name: "chevron_left" })
+	children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_epilot_spark_icons.ChevronLeft, {})
 }));
 PageHeaderBackButton.displayName = "PageHeaderBackButton";
 const PageHeaderTitle = ({ className, ...props }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_typography.PageTitle, {