@epilot/spark-ui 0.16.0 → 0.16.1

package/dist/components/sankey-chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"sankey-chart.js","names":[],"sources":["../../src/components/sankey-chart.tsx"],"sourcesContent":["import { Group } from '@visx/group'\nimport {\n  Sankey,\n  sankeyJustify,\n  type SankeyLink,\n  type SankeyNode,\n} from '@visx/sankey'\nimport { useEffect, useMemo, useRef, useState } from 'react'\nimport { cn } from '../utils/cn'\nimport NumberFlow, { type Format } from './number-flow'\nimport { SectionTitle } from './typography'\n\nconst SANKEY_CATEGORY_COLORS: Record<string, string> = {\n  solar: 'var(--orange-a9)',\n  battery: 'var(--green-a9)',\n  grid: 'var(--blue-9)',\n  gridFeedIn: 'var(--blue-7)',\n  home: 'var(--spark-9)',\n  floor: 'var(--neutral-a9)',\n  device: 'var(--neutral-a8)',\n}\n\nexport interface SankeyChartNode {\n  id: string\n  label: string\n  /** Optional category — used to colour the node and any outgoing links. */\n  category?: string\n  /** Override the colour resolved from `category`. */\n  color?: string\n}\n\nexport interface SankeyChartLink {\n  source: string\n  target: string\n  value: number\n  /** Override the colour of the link. Defaults to the source node colour. */\n  color?: string\n}\n\nexport interface SankeyChartProps {\n  nodes: SankeyChartNode[]\n  links: SankeyChartLink[]\n  /** Resolves a category to a colour. */\n  categoryColors?: Record<string, string>\n  /** Fallback colour for nodes/links without a category. */\n  defaultColor?: string\n  /** Suffix appended to each animated value label (e.g. \" W\"). */\n  valueSuffix?: string\n  /** NumberFlow `format` for value labels. */\n  valueFormat?: Format\n  height?: number\n  nodeWidth?: number\n  nodePadding?: number\n  /** Reserved horizontal space on the right for labels. */\n  labelPadding?: number\n  /**\n   * Node ids kept at their natural (computed) column instead of being pushed to\n   * the last column. By default `sankeyJustify` sends every node with no\n   * outgoing link to the right edge; use this to hold a terminal node (e.g. grid\n   * feed-in) in a middle column alongside its siblings.\n   */\n  keepAtDepthIds?: readonly string[]\n  title?: string\n  className?: string\n}\n\ntype SankeyDatumNode = SankeyChartNode & {\n  /** Computed by d3-sankey; present after layout. */\n}\n\ntype SankeyDatumLink = SankeyChartLink\n\nconst DEFAULT_HEIGHT = 260\nconst DEFAULT_NODE_WIDTH = 12\nconst DEFAULT_NODE_PADDING = 10\nconst DEFAULT_LABEL_PADDING = 96\nconst LEFT_INSET = 4\nconst TOP_INSET = 8\nconst LABEL_GAP = 8\n/** Approx. cap/ascender height of the node name above its alphabetic baseline. */\nconst LABEL_NAME_HEIGHT = 11\n/** Vertical offset of the value box relative to the name baseline. Negative pulls\n * the value up toward the name to tighten the gap between them. */\nconst LABEL_VALUE_GAP = -4\n/** Height of the value box rendered below the node name. */\nconst VALUE_HEIGHT = 16\nconst DEFAULT_COLOR = 'var(--neutral-a9)'\n\nfunction resolveNodeColor(\n  node: SankeyChartNode,\n  categoryColors: Record<string, string> | undefined,\n  defaultColor: string,\n) {\n  if (node.color) return node.color\n  if (node.category && categoryColors?.[node.category]) {\n    return categoryColors[node.category] as string\n  }\n  return defaultColor\n}\n\nfunction SankeyChart({\n  nodes,\n  links,\n  categoryColors = SANKEY_CATEGORY_COLORS,\n  defaultColor = DEFAULT_COLOR,\n  valueSuffix,\n  valueFormat,\n  height = DEFAULT_HEIGHT,\n  nodeWidth = DEFAULT_NODE_WIDTH,\n  nodePadding = DEFAULT_NODE_PADDING,\n  labelPadding = DEFAULT_LABEL_PADDING,\n  keepAtDepthIds,\n  title,\n  className,\n}: SankeyChartProps): React.ReactElement {\n  const containerRef = useRef<HTMLDivElement>(null)\n  const [width, setWidth] = useState(0)\n\n  useEffect(() => {\n    const element = containerRef.current\n    if (!element) return\n\n    const resizeObserver = new ResizeObserver((entries) => {\n      const entry = entries[0]\n      if (!entry) return\n      setWidth(entry.contentRect.width)\n    })\n\n    resizeObserver.observe(element)\n    return () => resizeObserver.disconnect()\n  }, [])\n\n  const nodeIds = useMemo(() => new Set(nodes.map((node) => node.id)), [nodes])\n\n  // Drop zero-value links and any whose endpoints aren't in the current node\n  // set (a stale link referencing a removed node makes d3-sankey throw\n  // `missing: <id>`).\n  const visibleLinks = useMemo(\n    () =>\n      links.filter(\n        (link) =>\n          link.value > 0 &&\n          nodeIds.has(link.source) &&\n          nodeIds.has(link.target),\n      ),\n    [links, nodeIds],\n  )\n\n  const visibleNodes = useMemo(() => {\n    const referencedIds = new Set<string>()\n    for (const link of visibleLinks) {\n      referencedIds.add(link.source)\n      referencedIds.add(link.target)\n    }\n    return nodes.filter((node) => referencedIds.has(node.id))\n  }, [nodes, visibleLinks])\n\n  const colorById = useMemo(() => {\n    const map = new Map<string, string>()\n    for (const node of nodes) {\n      map.set(node.id, resolveNodeColor(node, categoryColors, defaultColor))\n    }\n    return map\n  }, [categoryColors, defaultColor, nodes])\n\n  const orderById = useMemo(() => {\n    const map = new Map<string, number>()\n    visibleNodes.forEach((node, index) => map.set(node.id, index))\n    return map\n  }, [visibleNodes])\n\n  const nodeSort = useMemo(\n    () =>\n      (\n        a: SankeyNode<SankeyDatumNode, SankeyDatumLink>,\n        b: SankeyNode<SankeyDatumNode, SankeyDatumLink>,\n      ) =>\n        (orderById.get(a.id) ?? 0) - (orderById.get(b.id) ?? 0),\n    [orderById],\n  )\n\n  const graph = useMemo(\n    () => ({\n      nodes: visibleNodes.map((node) => ({ ...node })),\n      links: visibleLinks.map((link) => ({ ...link })),\n    }),\n    [visibleNodes, visibleLinks],\n  )\n\n  const nodeAlign = useMemo(() => {\n    const keep = new Set(keepAtDepthIds)\n    return (node: SankeyNode<SankeyDatumNode, SankeyDatumLink>, n: number) =>\n      keep.has(node.id) ? (node.depth ?? 0) : sankeyJustify(node, n)\n  }, [keepAtDepthIds])\n\n  const innerWidth = Math.max(0, width - labelPadding - LEFT_INSET)\n  const innerHeight = Math.max(0, height - TOP_INSET * 2)\n\n  return (\n    <div className={cn('flex w-full flex-col gap-2 py-2', className)}>\n      {title && <SectionTitle>{title}</SectionTitle>}\n\n      <div ref={containerRef} className=\"w-full\" style={{ height }}>\n        {width > 0 && innerWidth > 0 && (\n          <svg width={width} height={height}>\n            <Group left={LEFT_INSET} top={TOP_INSET}>\n              <Sankey<SankeyDatumNode, SankeyDatumLink>\n                root={graph}\n                size={[innerWidth, innerHeight]}\n                nodeWidth={nodeWidth}\n                nodePadding={nodePadding}\n                nodeAlign={nodeAlign}\n                nodeId={(node) => node.id}\n                nodeSort={nodeSort}\n              >\n                {({ graph: laidOut, createPath }) => (\n                  <>\n                    <Group className=\"visx-sankey-links\">\n                      {laidOut.links.map((link, index) => {\n                        const sourceId =\n                          typeof link.source === 'object'\n                            ? (\n                                link.source as SankeyNode<\n                                  SankeyDatumNode,\n                                  SankeyDatumLink\n                                >\n                              ).id\n                            : String(link.source)\n                        const stroke =\n                          link.color ?? colorById.get(sourceId) ?? defaultColor\n\n                        return (\n                          <path\n                            key={`sankey-link-${index}`}\n                            d={createPath(link) ?? ''}\n                            fill=\"none\"\n                            stroke={stroke}\n                            strokeOpacity={0.32}\n                            strokeWidth={Math.max(1, link.width ?? 0)}\n                          />\n                        )\n                      })}\n                    </Group>\n\n                    <Group className=\"visx-sankey-nodes\">\n                      {laidOut.nodes.map((node, index) => {\n                        if (\n                          node.x0 === undefined ||\n                          node.x1 === undefined ||\n                          node.y0 === undefined ||\n                          node.y1 === undefined\n                        ) {\n                          return null\n                        }\n\n                        const w = node.x1 - node.x0\n                        const h = node.y1 - node.y0\n                        const fill = colorById.get(node.id) ?? defaultColor\n\n                        const labelX = node.x1 + LABEL_GAP\n                        // Center the name+value label on the node, then clamp it\n                        // vertically so a node flush against an edge (e.g. a tiny\n                        // \"grid\" node at the top) doesn't push its name past the\n                        // chart bounds and get clipped. The name's ascenders sit\n                        // above labelY; the value box sits below it.\n                        const labelY = Math.min(\n                          Math.max(\n                            node.y0 + h / 2 - 4,\n                            LABEL_NAME_HEIGHT - TOP_INSET,\n                          ),\n                          innerHeight + TOP_INSET - VALUE_HEIGHT,\n                        )\n                        const labelAnchor = 'start' as const\n                        const primaryDy = 0\n                        const valueWidth = Math.max(\n                          40,\n                          labelPadding - LABEL_GAP - 4,\n                        )\n                        const valueHeight = VALUE_HEIGHT\n                        const valueY = labelY + LABEL_VALUE_GAP\n\n                        return (\n                          <Group key={`sankey-node-${index}`}>\n                            <rect\n                              x={node.x0}\n                              y={node.y0}\n                              width={w}\n                              height={Math.max(1, h)}\n                              fill={fill}\n                              rx={2}\n                            />\n                            <text\n                              x={labelX}\n                              y={labelY + primaryDy}\n                              textAnchor={labelAnchor}\n                              dominantBaseline=\"alphabetic\"\n                              fontSize={11}\n                              fontWeight={600}\n                              fill=\"var(--neutral-a12)\"\n                            >\n                              {node.label}\n                            </text>\n                            <foreignObject\n                              x={labelX}\n                              y={valueY}\n                              width={valueWidth}\n                              height={valueHeight}\n                              style={{ overflow: 'visible' }}\n                            >\n                              <div\n                                style={{\n                                  lineHeight: 1.2,\n                                  overflow: 'visible',\n                                }}\n                              >\n                                <NumberFlow\n                                  value={node.value ?? 0}\n                                  {...(valueSuffix !== undefined && {\n                                    suffix: valueSuffix,\n                                  })}\n                                  {...(valueFormat !== undefined && {\n                                    format: valueFormat,\n                                  })}\n                                  className=\"text-[10px] text-gray-light tabular-nums\"\n                                />\n                              </div>\n                            </foreignObject>\n                          </Group>\n                        )\n                      })}\n                    </Group>\n                  </>\n                )}\n              </Sankey>\n            </Group>\n          </svg>\n        )}\n      </div>\n    </div>\n  )\n}\n\nexport type { SankeyLink, SankeyNode }\nexport { SankeyChart, SANKEY_CATEGORY_COLORS }\n"],"mappings":"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"}
+{"version":3,"file":"sankey-chart.js","names":[],"sources":["../../src/components/sankey-chart.tsx"],"sourcesContent":["import { Group } from '@visx/group'\nimport {\n  Sankey,\n  sankeyJustify,\n  type SankeyLink,\n  type SankeyNode,\n} from '@visx/sankey'\nimport { useEffect, useMemo, useRef, useState } from 'react'\nimport { cn } from '../utils/cn'\nimport NumberFlow, { type Format } from './number-flow'\nimport { SectionTitle } from './typography'\n\nconst SANKEY_CATEGORY_COLORS: Record<string, string> = {\n  solar: 'var(--orange-a9)',\n  battery: 'var(--green-a9)',\n  grid: 'var(--blue-9)',\n  gridFeedIn: 'var(--blue-7)',\n  home: 'var(--spark-9)',\n  floor: 'var(--neutral-a9)',\n  device: 'var(--neutral-a8)',\n}\n\nexport interface SankeyChartNode {\n  id: string\n  label: string\n  /** Optional category — used to colour the node and any outgoing links. */\n  category?: string\n  /** Override the colour resolved from `category`. */\n  color?: string\n}\n\nexport interface SankeyChartLink {\n  source: string\n  target: string\n  value: number\n  /** Override the colour of the link. Defaults to the source node colour. */\n  color?: string\n}\n\nexport interface SankeyChartProps {\n  nodes: SankeyChartNode[]\n  links: SankeyChartLink[]\n  /** Resolves a category to a colour. */\n  categoryColors?: Record<string, string>\n  /** Fallback colour for nodes/links without a category. */\n  defaultColor?: string\n  /** Suffix appended to each animated value label (e.g. \" W\"). */\n  valueSuffix?: string\n  /** NumberFlow `format` for value labels. */\n  valueFormat?: Format\n  height?: number\n  nodeWidth?: number\n  nodePadding?: number\n  /** Reserved horizontal space on the right for labels. */\n  labelPadding?: number\n  /**\n   * Node ids kept at their natural (computed) column instead of being pushed to\n   * the last column. By default `sankeyJustify` sends every node with no\n   * outgoing link to the right edge; use this to hold a terminal node (e.g. grid\n   * feed-in) in a middle column alongside its siblings.\n   */\n  keepAtDepthIds?: readonly string[]\n  title?: string\n  className?: string\n}\n\ntype SankeyDatumNode = SankeyChartNode & {\n  /** Computed by d3-sankey; present after layout. */\n}\n\ntype SankeyDatumLink = SankeyChartLink\n\nconst DEFAULT_HEIGHT = 260\nconst DEFAULT_NODE_WIDTH = 12\nconst DEFAULT_NODE_PADDING = 10\nconst DEFAULT_LABEL_PADDING = 96\nconst LEFT_INSET = 4\nconst TOP_INSET = 8\nconst LABEL_GAP = 8\nconst LABEL_STACK_HEIGHT = 26\nconst DEFAULT_COLOR = 'var(--neutral-a9)'\n\nfunction resolveNodeColor(\n  node: SankeyChartNode,\n  categoryColors: Record<string, string> | undefined,\n  defaultColor: string,\n) {\n  if (node.color) return node.color\n  if (node.category && categoryColors?.[node.category]) {\n    return categoryColors[node.category] as string\n  }\n  return defaultColor\n}\n\nfunction SankeyChart({\n  nodes,\n  links,\n  categoryColors = SANKEY_CATEGORY_COLORS,\n  defaultColor = DEFAULT_COLOR,\n  valueSuffix,\n  valueFormat,\n  height = DEFAULT_HEIGHT,\n  nodeWidth = DEFAULT_NODE_WIDTH,\n  nodePadding = DEFAULT_NODE_PADDING,\n  labelPadding = DEFAULT_LABEL_PADDING,\n  keepAtDepthIds,\n  title,\n  className,\n}: SankeyChartProps): React.ReactElement {\n  const containerRef = useRef<HTMLDivElement>(null)\n  const [width, setWidth] = useState(0)\n\n  useEffect(() => {\n    const element = containerRef.current\n    if (!element) return\n\n    const resizeObserver = new ResizeObserver((entries) => {\n      const entry = entries[0]\n      if (!entry) return\n      setWidth(entry.contentRect.width)\n    })\n\n    resizeObserver.observe(element)\n    return () => resizeObserver.disconnect()\n  }, [])\n\n  const nodeIds = useMemo(() => new Set(nodes.map((node) => node.id)), [nodes])\n\n  // Drop zero-value links and any whose endpoints aren't in the current node\n  // set (a stale link referencing a removed node makes d3-sankey throw\n  // `missing: <id>`).\n  const visibleLinks = useMemo(\n    () =>\n      links.filter(\n        (link) =>\n          link.value > 0 &&\n          nodeIds.has(link.source) &&\n          nodeIds.has(link.target),\n      ),\n    [links, nodeIds],\n  )\n\n  const visibleNodes = useMemo(() => {\n    const referencedIds = new Set<string>()\n    for (const link of visibleLinks) {\n      referencedIds.add(link.source)\n      referencedIds.add(link.target)\n    }\n    return nodes.filter((node) => referencedIds.has(node.id))\n  }, [nodes, visibleLinks])\n\n  const colorById = useMemo(() => {\n    const map = new Map<string, string>()\n    for (const node of nodes) {\n      map.set(node.id, resolveNodeColor(node, categoryColors, defaultColor))\n    }\n    return map\n  }, [categoryColors, defaultColor, nodes])\n\n  const orderById = useMemo(() => {\n    const map = new Map<string, number>()\n    visibleNodes.forEach((node, index) => map.set(node.id, index))\n    return map\n  }, [visibleNodes])\n\n  const nodeSort = useMemo(\n    () =>\n      (\n        a: SankeyNode<SankeyDatumNode, SankeyDatumLink>,\n        b: SankeyNode<SankeyDatumNode, SankeyDatumLink>,\n      ) =>\n        (orderById.get(a.id) ?? 0) - (orderById.get(b.id) ?? 0),\n    [orderById],\n  )\n\n  const graph = useMemo(\n    () => ({\n      nodes: visibleNodes.map((node) => ({ ...node })),\n      links: visibleLinks.map((link) => ({ ...link })),\n    }),\n    [visibleNodes, visibleLinks],\n  )\n\n  const nodeAlign = useMemo(() => {\n    const keep = new Set(keepAtDepthIds)\n    return (node: SankeyNode<SankeyDatumNode, SankeyDatumLink>, n: number) =>\n      keep.has(node.id) ? (node.depth ?? 0) : sankeyJustify(node, n)\n  }, [keepAtDepthIds])\n\n  const innerWidth = Math.max(0, width - labelPadding - LEFT_INSET)\n  const innerHeight = Math.max(0, height - TOP_INSET * 2)\n  const halfLabelStack = LABEL_STACK_HEIGHT / 2\n  const labelWidth = Math.max(40, labelPadding - LABEL_GAP - 4)\n\n  return (\n    <div className={cn('flex w-full flex-col gap-2 py-2', className)}>\n      {title && <SectionTitle>{title}</SectionTitle>}\n\n      <div ref={containerRef} className=\"relative w-full\" style={{ height }}>\n        {width > 0 && innerWidth > 0 && (\n          <Sankey<SankeyDatumNode, SankeyDatumLink>\n            root={graph}\n            size={[innerWidth, innerHeight]}\n            nodeWidth={nodeWidth}\n            nodePadding={nodePadding}\n            nodeAlign={nodeAlign}\n            nodeId={(node) => node.id}\n            nodeSort={nodeSort}\n          >\n            {({ graph: laidOut, createPath }) => (\n              <>\n                <svg\n                  aria-hidden=\"true\"\n                  className=\"block\"\n                  height={height}\n                  width={width}\n                >\n                  <Group left={LEFT_INSET} top={TOP_INSET}>\n                    <Group className=\"visx-sankey-links\">\n                      {laidOut.links.map((link, index) => {\n                        const sourceId =\n                          typeof link.source === 'object'\n                            ? (\n                                link.source as SankeyNode<\n                                  SankeyDatumNode,\n                                  SankeyDatumLink\n                                >\n                              ).id\n                            : String(link.source)\n                        const stroke =\n                          link.color ?? colorById.get(sourceId) ?? defaultColor\n\n                        return (\n                          <path\n                            key={`sankey-link-${index}`}\n                            d={createPath(link) ?? ''}\n                            fill=\"none\"\n                            stroke={stroke}\n                            strokeOpacity={0.32}\n                            strokeWidth={Math.max(1, link.width ?? 0)}\n                          />\n                        )\n                      })}\n                    </Group>\n\n                    <Group className=\"visx-sankey-nodes\">\n                      {laidOut.nodes.map((node, index) => {\n                        if (\n                          node.x0 === undefined ||\n                          node.x1 === undefined ||\n                          node.y0 === undefined ||\n                          node.y1 === undefined\n                        ) {\n                          return null\n                        }\n\n                        const w = node.x1 - node.x0\n                        const h = node.y1 - node.y0\n                        const fill = colorById.get(node.id) ?? defaultColor\n\n                        return (\n                          <rect\n                            key={`sankey-node-${index}`}\n                            x={node.x0}\n                            y={node.y0}\n                            width={w}\n                            height={Math.max(1, h)}\n                            fill={fill}\n                            rx={2}\n                          />\n                        )\n                      })}\n                    </Group>\n                  </Group>\n                </svg>\n\n                <div className=\"pointer-events-none absolute inset-0 [-webkit-text-size-adjust:100%] [text-size-adjust:100%]\">\n                  {laidOut.nodes.map((node, index) => {\n                    if (\n                      node.x0 === undefined ||\n                      node.x1 === undefined ||\n                      node.y0 === undefined ||\n                      node.y1 === undefined\n                    ) {\n                      return null\n                    }\n\n                    const h = node.y1 - node.y0\n                    const nodeCenterY = TOP_INSET + node.y0 + h / 2\n                    const labelCenterY = Math.min(\n                      Math.max(nodeCenterY, halfLabelStack),\n                      height - halfLabelStack,\n                    )\n\n                    return (\n                      <div\n                        key={`sankey-label-${node.id ?? index}`}\n                        className=\"absolute flex -translate-y-1/2 flex-col items-start gap-1\"\n                        style={{\n                          left: LEFT_INSET + node.x1 + LABEL_GAP,\n                          top: labelCenterY,\n                          width: labelWidth,\n                        }}\n                      >\n                        <span className=\"text-[11px] leading-none font-semibold whitespace-nowrap text-gray\">\n                          {node.label}\n                        </span>\n                        <NumberFlow\n                          value={node.value ?? 0}\n                          {...(valueSuffix !== undefined && {\n                            suffix: valueSuffix,\n                          })}\n                          {...(valueFormat !== undefined && {\n                            format: valueFormat,\n                          })}\n                          className=\"block min-h-[10px] text-[10px] leading-none text-gray-light tabular-nums\"\n                        />\n                      </div>\n                    )\n                  })}\n                </div>\n              </>\n            )}\n          </Sankey>\n        )}\n      </div>\n    </div>\n  )\n}\n\nexport type { SankeyLink, SankeyNode }\nexport { SankeyChart, SANKEY_CATEGORY_COLORS }\n"],"mappings":"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"}

package/dist/components/schedule-list.cjs

@@ -1,9 +1,9 @@
 "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");
 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 cnfast = require("cnfast");
 //#region src/components/schedule-list.tsx
@@ -24,10 +24,7 @@ const ScheduleListAdd = react.forwardRef(({ children, className, icon, type = "b
 	type,
 	className: (0, cnfast.cn)("inline-flex h-11 w-full items-center justify-center gap-1.5 rounded-lg border border-dashed border-gray text-sm font-medium text-gray-light transition-colors hover:border-spark-a8 hover:bg-base-accent-soft hover:text-accent focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50", className),
 	...props,
-	children: [icon ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons_material_symbol.MaterialSymbol, {
-		className: "text-[14px]",
-		name: "add"
-	}), children]
+	children: [icon ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_epilot_spark_icons.Add, { className: "[--spark-icon-size:14px]" }), children]
 }));
 ScheduleListAdd.displayName = "ScheduleListAdd";
 const ScheduleEntry = react.forwardRef(({ children, className, disabled, onClick, ...props }, ref) => {
@@ -93,10 +90,7 @@ const ScheduleEntryDelete = react.forwardRef(({ "aria-label": ariaLabel = "Delet
 	},
 	className: (0, cnfast.cn)("inline-flex size-8 shrink-0 items-center justify-center rounded-full text-gray-light transition-colors hover:bg-base-error-soft hover:text-error focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50", className),
 	...props,
-	children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons_material_symbol.MaterialSymbol, {
-		className: "text-[14px]",
-		name: "delete"
-	})
+	children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_epilot_spark_icons.Delete, { className: "[--spark-icon-size:14px]" })
 }));
 ScheduleEntryDelete.displayName = "ScheduleEntryDelete";
 //#endregion

package/dist/components/schedule-list.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"schedule-list.cjs","names":["React","MaterialSymbol"],"sources":["../../src/components/schedule-list.tsx"],"sourcesContent":["import * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\n\nconst ScheduleList = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'flex flex-col gap-[calc(var(--spark-layout-gap)*2)]',\n      className,\n    )}\n    {...props}\n  />\n))\n\nScheduleList.displayName = 'ScheduleList'\n\nconst ScheduleListEmpty = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p\n    ref={ref}\n    className={cn('px-3 py-2 text-sm text-gray-light', className)}\n    {...props}\n  />\n))\n\nScheduleListEmpty.displayName = 'ScheduleListEmpty'\n\ninterface ScheduleListAddProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Optional icon override; defaults to a `+`. */\n  icon?: React.ReactNode\n}\n\nconst ScheduleListAdd = React.forwardRef<\n  HTMLButtonElement,\n  ScheduleListAddProps\n>(({ children, className, icon, type = 'button', ...props }, ref) => (\n  <button\n    ref={ref}\n    type={type}\n    className={cn(\n      'inline-flex h-11 w-full items-center justify-center gap-1.5 rounded-lg border border-dashed border-gray text-sm font-medium text-gray-light transition-colors hover:border-spark-a8 hover:bg-base-accent-soft hover:text-accent focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',\n      className,\n    )}\n    {...props}\n  >\n    {icon ?? <MaterialSymbol className=\"text-[14px]\" name=\"add\" />}\n    {children}\n  </button>\n))\n\nScheduleListAdd.displayName = 'ScheduleListAdd'\n\ninterface ScheduleEntryProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Make the row interactive — enables hover, role=button, keyboard activation. */\n  onClick?: () => void\n  disabled?: boolean\n}\n\nconst ScheduleEntry = React.forwardRef<HTMLDivElement, ScheduleEntryProps>(\n  ({ children, className, disabled, onClick, ...props }, ref) => {\n    const interactive = onClick !== undefined && !disabled\n    // role, tab stop and key handler travel together -- the row is never\n    // clickable without Enter/Space, and never focusable without a role\n    const interaction = interactive\n      ? {\n          role: 'button' as const,\n          tabIndex: 0,\n          onClick,\n          onKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => {\n            if (event.key === 'Enter' || event.key === ' ') {\n              event.preventDefault()\n              onClick()\n            }\n          },\n        }\n      : undefined\n    return (\n      <div\n        ref={ref}\n        {...interaction}\n        aria-disabled={disabled || undefined}\n        className={cn(\n          'flex items-center gap-3 rounded-lg bg-base-gray-soft px-3 py-2.5 transition-colors',\n          interactive &&\n            'cursor-pointer hover:bg-gray-a3 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n          disabled && 'cursor-not-allowed opacity-50',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  },\n)\n\nScheduleEntry.displayName = 'ScheduleEntry'\n\nconst ScheduleEntryContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('flex min-w-0 flex-1 flex-col gap-0.5', className)}\n    {...props}\n  />\n))\n\nScheduleEntryContent.displayName = 'ScheduleEntryContent'\n\nconst ScheduleEntryTitle = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'flex min-w-0 items-center gap-2 truncate text-sm font-medium text-gray',\n      className,\n    )}\n    {...props}\n  />\n))\n\nScheduleEntryTitle.displayName = 'ScheduleEntryTitle'\n\nconst ScheduleEntrySubtitle = React.forwardRef<\n  HTMLSpanElement,\n  React.HTMLAttributes<HTMLSpanElement>\n>(({ className, ...props }, ref) => (\n  <span\n    ref={ref}\n    className={cn('truncate text-xs text-gray-light', className)}\n    {...props}\n  />\n))\n\nScheduleEntrySubtitle.displayName = 'ScheduleEntrySubtitle'\n\n/** Right-aligned action area. Stops click propagation so inner controls\n *  don't fire the parent `ScheduleEntry`'s `onClick`. */\nconst ScheduleEntryActions = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, onClick, ...props }, ref) => (\n  <div\n    ref={ref}\n    // a layout wrapper, not a control: the handler only shields the inner\n    // buttons' clicks (keyboard activation included) from the parent row\n    role=\"presentation\"\n    onClick={(event) => {\n      event.stopPropagation()\n      onClick?.(event)\n    }}\n    className={cn('flex shrink-0 items-center gap-1.5', className)}\n    {...props}\n  />\n))\n\nScheduleEntryActions.displayName = 'ScheduleEntryActions'\n\ninterface ScheduleEntryDeleteProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {}\n\nconst ScheduleEntryDelete = React.forwardRef<\n  HTMLButtonElement,\n  ScheduleEntryDeleteProps\n>(\n  (\n    {\n      'aria-label': ariaLabel = 'Delete schedule entry',\n      children,\n      className,\n      onClick,\n      type = 'button',\n      ...props\n    },\n    ref,\n  ) => (\n    <button\n      ref={ref}\n      type={type}\n      aria-label={ariaLabel}\n      onClick={(event) => {\n        event.stopPropagation()\n        onClick?.(event)\n      }}\n      className={cn(\n        'inline-flex size-8 shrink-0 items-center justify-center rounded-full text-gray-light transition-colors hover:bg-base-error-soft hover:text-error focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',\n        className,\n      )}\n      {...props}\n    >\n      {children ?? <MaterialSymbol className=\"text-[14px]\" name=\"delete\" />}\n    </button>\n  ),\n)\n\nScheduleEntryDelete.displayName = 'ScheduleEntryDelete'\n\nexport {\n  ScheduleEntry,\n  ScheduleEntryActions,\n  ScheduleEntryContent,\n  ScheduleEntryDelete,\n  ScheduleEntrySubtitle,\n  ScheduleEntryTitle,\n  ScheduleList,\n  ScheduleListAdd,\n  ScheduleListEmpty,\n}\n"],"mappings":";;;;;;;;;AAIA,MAAM,eAAeA,MAAM,YAGxB,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,KAAC,OAAD;CACO;CACL,YAAA,GAAA,OAAA,IACE,uDACA,SACF;CACA,GAAI;AACL,CAAA,CACF;AAED,aAAa,cAAc;AAE3B,MAAM,oBAAoBA,MAAM,YAG7B,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,KAAC,KAAD;CACO;CACL,YAAA,GAAA,OAAA,IAAc,qCAAqC,SAAS;CAC5D,GAAI;AACL,CAAA,CACF;AAED,kBAAkB,cAAc;AAOhC,MAAM,kBAAkBA,MAAM,YAG3B,EAAE,UAAU,WAAW,MAAM,OAAO,UAAU,GAAG,SAAS,QAC3D,iBAAA,GAAA,kBAAA,MAAC,UAAD;CACO;CACC;CACN,YAAA,GAAA,OAAA,IACE,iWACA,SACF;CACA,GAAI;WAPN,CASG,QAAQ,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,gBAAD;EAAgB,WAAU;EAAc,MAAK;CAAO,CAAA,GAC5D,QACK;EACT;AAED,gBAAgB,cAAc;AAQ9B,MAAM,gBAAgBD,MAAM,YACzB,EAAE,UAAU,WAAW,UAAU,SAAS,GAAG,SAAS,QAAQ;CAC7D,MAAM,cAAc,YAAY,KAAA,KAAa,CAAC;CAgB9C,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACO;EACL,GAhBgB,cAChB;GACE,MAAM;GACN,UAAU;GACV;GACA,YAAY,UAA+C;IACzD,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;KAC9C,MAAM,eAAe;KACrB,QAAQ;IACV;GACF;EACF,IACA,KAAA;EAKA,iBAAe,YAAY,KAAA;EAC3B,YAAA,GAAA,OAAA,IACE,sFACA,eACE,iHACF,YAAY,iCACZ,SACF;EACA,GAAI;EAEH;CACE,CAAA;AAET,CACF;AAEA,cAAc,cAAc;AAE5B,MAAM,uBAAuBA,MAAM,YAGhC,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,KAAC,OAAD;CACO;CACL,YAAA,GAAA,OAAA,IAAc,wCAAwC,SAAS;CAC/D,GAAI;AACL,CAAA,CACF;AAED,qBAAqB,cAAc;AAEnC,MAAM,qBAAqBA,MAAM,YAG9B,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,KAAC,OAAD;CACO;CACL,YAAA,GAAA,OAAA,IACE,0EACA,SACF;CACA,GAAI;AACL,CAAA,CACF;AAED,mBAAmB,cAAc;AAEjC,MAAM,wBAAwBA,MAAM,YAGjC,EAAE,WAAW,GAAG,SAAS,QAC1B,iBAAA,GAAA,kBAAA,KAAC,QAAD;CACO;CACL,YAAA,GAAA,OAAA,IAAc,oCAAoC,SAAS;CAC3D,GAAI;AACL,CAAA,CACF;AAED,sBAAsB,cAAc;;;AAIpC,MAAM,uBAAuBA,MAAM,YAGhC,EAAE,WAAW,SAAS,GAAG,SAAS,QACnC,iBAAA,GAAA,kBAAA,KAAC,OAAD;CACO;CAGL,MAAK;CACL,UAAU,UAAU;EAClB,MAAM,gBAAgB;EACtB,UAAU,KAAK;CACjB;CACA,YAAA,GAAA,OAAA,IAAc,sCAAsC,SAAS;CAC7D,GAAI;AACL,CAAA,CACF;AAED,qBAAqB,cAAc;AAInC,MAAM,sBAAsBA,MAAM,YAK9B,EACE,cAAc,YAAY,yBAC1B,UACA,WACA,SACA,OAAO,UACP,GAAG,SAEL,QAEA,iBAAA,GAAA,kBAAA,KAAC,UAAD;CACO;CACC;CACN,cAAY;CACZ,UAAU,UAAU;EAClB,MAAM,gBAAgB;EACtB,UAAU,KAAK;CACjB;CACA,YAAA,GAAA,OAAA,IACE,kRACA,SACF;CACA,GAAI;WAEH,YAAY,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,gBAAD;EAAgB,WAAU;EAAc,MAAK;CAAU,CAAA;AAC9D,CAAA,CAEZ;AAEA,oBAAoB,cAAc"}
+{"version":3,"file":"schedule-list.cjs","names":["React","Add","Delete"],"sources":["../../src/components/schedule-list.tsx"],"sourcesContent":["import { Add, Delete } from '@epilot/spark-icons'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\n\nconst ScheduleList = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'flex flex-col gap-[calc(var(--spark-layout-gap)*2)]',\n      className,\n    )}\n    {...props}\n  />\n))\n\nScheduleList.displayName = 'ScheduleList'\n\nconst ScheduleListEmpty = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p\n    ref={ref}\n    className={cn('px-3 py-2 text-sm text-gray-light', className)}\n    {...props}\n  />\n))\n\nScheduleListEmpty.displayName = 'ScheduleListEmpty'\n\ninterface ScheduleListAddProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Optional icon override; defaults to a `+`. */\n  icon?: React.ReactNode\n}\n\nconst ScheduleListAdd = React.forwardRef<\n  HTMLButtonElement,\n  ScheduleListAddProps\n>(({ children, className, icon, type = 'button', ...props }, ref) => (\n  <button\n    ref={ref}\n    type={type}\n    className={cn(\n      'inline-flex h-11 w-full items-center justify-center gap-1.5 rounded-lg border border-dashed border-gray text-sm font-medium text-gray-light transition-colors hover:border-spark-a8 hover:bg-base-accent-soft hover:text-accent focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',\n      className,\n    )}\n    {...props}\n  >\n    {icon ?? <Add className=\"[--spark-icon-size:14px]\" />}\n    {children}\n  </button>\n))\n\nScheduleListAdd.displayName = 'ScheduleListAdd'\n\ninterface ScheduleEntryProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Make the row interactive — enables hover, role=button, keyboard activation. */\n  onClick?: () => void\n  disabled?: boolean\n}\n\nconst ScheduleEntry = React.forwardRef<HTMLDivElement, ScheduleEntryProps>(\n  ({ children, className, disabled, onClick, ...props }, ref) => {\n    const interactive = onClick !== undefined && !disabled\n    // role, tab stop and key handler travel together -- the row is never\n    // clickable without Enter/Space, and never focusable without a role\n    const interaction = interactive\n      ? {\n          role: 'button' as const,\n          tabIndex: 0,\n          onClick,\n          onKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => {\n            if (event.key === 'Enter' || event.key === ' ') {\n              event.preventDefault()\n              onClick()\n            }\n          },\n        }\n      : undefined\n    return (\n      <div\n        ref={ref}\n        {...interaction}\n        aria-disabled={disabled || undefined}\n        className={cn(\n          'flex items-center gap-3 rounded-lg bg-base-gray-soft px-3 py-2.5 transition-colors',\n          interactive &&\n            'cursor-pointer hover:bg-gray-a3 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n          disabled && 'cursor-not-allowed opacity-50',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  },\n)\n\nScheduleEntry.displayName = 'ScheduleEntry'\n\nconst ScheduleEntryContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('flex min-w-0 flex-1 flex-col gap-0.5', className)}\n    {...props}\n  />\n))\n\nScheduleEntryContent.displayName = 'ScheduleEntryContent'\n\nconst ScheduleEntryTitle = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'flex min-w-0 items-center gap-2 truncate text-sm font-medium text-gray',\n      className,\n    )}\n    {...props}\n  />\n))\n\nScheduleEntryTitle.displayName = 'ScheduleEntryTitle'\n\nconst ScheduleEntrySubtitle = React.forwardRef<\n  HTMLSpanElement,\n  React.HTMLAttributes<HTMLSpanElement>\n>(({ className, ...props }, ref) => (\n  <span\n    ref={ref}\n    className={cn('truncate text-xs text-gray-light', className)}\n    {...props}\n  />\n))\n\nScheduleEntrySubtitle.displayName = 'ScheduleEntrySubtitle'\n\n/** Right-aligned action area. Stops click propagation so inner controls\n *  don't fire the parent `ScheduleEntry`'s `onClick`. */\nconst ScheduleEntryActions = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, onClick, ...props }, ref) => (\n  <div\n    ref={ref}\n    // a layout wrapper, not a control: the handler only shields the inner\n    // buttons' clicks (keyboard activation included) from the parent row\n    role=\"presentation\"\n    onClick={(event) => {\n      event.stopPropagation()\n      onClick?.(event)\n    }}\n    className={cn('flex shrink-0 items-center gap-1.5', className)}\n    {...props}\n  />\n))\n\nScheduleEntryActions.displayName = 'ScheduleEntryActions'\n\ninterface ScheduleEntryDeleteProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {}\n\nconst ScheduleEntryDelete = React.forwardRef<\n  HTMLButtonElement,\n  ScheduleEntryDeleteProps\n>(\n  (\n    {\n      'aria-label': ariaLabel = 'Delete schedule entry',\n      children,\n      className,\n      onClick,\n      type = 'button',\n      ...props\n    },\n    ref,\n  ) => (\n    <button\n      ref={ref}\n      type={type}\n      aria-label={ariaLabel}\n      onClick={(event) => {\n        event.stopPropagation()\n        onClick?.(event)\n      }}\n      className={cn(\n        'inline-flex size-8 shrink-0 items-center justify-center rounded-full text-gray-light transition-colors hover:bg-base-error-soft hover:text-error focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',\n        className,\n      )}\n      {...props}\n    >\n      {children ?? <Delete className=\"[--spark-icon-size:14px]\" />}\n    </button>\n  ),\n)\n\nScheduleEntryDelete.displayName = 'ScheduleEntryDelete'\n\nexport {\n  ScheduleEntry,\n  ScheduleEntryActions,\n  ScheduleEntryContent,\n  ScheduleEntryDelete,\n  ScheduleEntrySubtitle,\n  ScheduleEntryTitle,\n  ScheduleList,\n  ScheduleListAdd,\n  ScheduleListEmpty,\n}\n"],"mappings":"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"}

package/dist/components/schedule-list.js

@@ -1,7 +1,7 @@
 "use client";
 import { cn } from "../utils/cn.js";
-import { MaterialSymbol } from "../icons/material-symbol.js";
 import * as React$1 from "react";
+import { Add, Delete } from "@epilot/spark-icons";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/schedule-list.tsx
 const ScheduleList = React$1.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx("div", {
@@ -21,10 +21,7 @@ const ScheduleListAdd = React$1.forwardRef(({ children, className, icon, type =
 	type,
 	className: cn("inline-flex h-11 w-full items-center justify-center gap-1.5 rounded-lg border border-dashed border-gray text-sm font-medium text-gray-light transition-colors hover:border-spark-a8 hover:bg-base-accent-soft hover:text-accent focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50", className),
 	...props,
-	children: [icon ?? /* @__PURE__ */ jsx(MaterialSymbol, {
-		className: "text-[14px]",
-		name: "add"
-	}), children]
+	children: [icon ?? /* @__PURE__ */ jsx(Add, { className: "[--spark-icon-size:14px]" }), children]
 }));
 ScheduleListAdd.displayName = "ScheduleListAdd";
 const ScheduleEntry = React$1.forwardRef(({ children, className, disabled, onClick, ...props }, ref) => {
@@ -90,10 +87,7 @@ const ScheduleEntryDelete = React$1.forwardRef(({ "aria-label": ariaLabel = "Del
 	},
 	className: cn("inline-flex size-8 shrink-0 items-center justify-center rounded-full text-gray-light transition-colors hover:bg-base-error-soft hover:text-error focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50", className),
 	...props,
-	children: children ?? /* @__PURE__ */ jsx(MaterialSymbol, {
-		className: "text-[14px]",
-		name: "delete"
-	})
+	children: children ?? /* @__PURE__ */ jsx(Delete, { className: "[--spark-icon-size:14px]" })
 }));
 ScheduleEntryDelete.displayName = "ScheduleEntryDelete";
 //#endregion

package/dist/components/schedule-list.js.map

@@ -1 +1 @@
-{"version":3,"file":"schedule-list.js","names":["React"],"sources":["../../src/components/schedule-list.tsx"],"sourcesContent":["import * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\n\nconst ScheduleList = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'flex flex-col gap-[calc(var(--spark-layout-gap)*2)]',\n      className,\n    )}\n    {...props}\n  />\n))\n\nScheduleList.displayName = 'ScheduleList'\n\nconst ScheduleListEmpty = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p\n    ref={ref}\n    className={cn('px-3 py-2 text-sm text-gray-light', className)}\n    {...props}\n  />\n))\n\nScheduleListEmpty.displayName = 'ScheduleListEmpty'\n\ninterface ScheduleListAddProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Optional icon override; defaults to a `+`. */\n  icon?: React.ReactNode\n}\n\nconst ScheduleListAdd = React.forwardRef<\n  HTMLButtonElement,\n  ScheduleListAddProps\n>(({ children, className, icon, type = 'button', ...props }, ref) => (\n  <button\n    ref={ref}\n    type={type}\n    className={cn(\n      'inline-flex h-11 w-full items-center justify-center gap-1.5 rounded-lg border border-dashed border-gray text-sm font-medium text-gray-light transition-colors hover:border-spark-a8 hover:bg-base-accent-soft hover:text-accent focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',\n      className,\n    )}\n    {...props}\n  >\n    {icon ?? <MaterialSymbol className=\"text-[14px]\" name=\"add\" />}\n    {children}\n  </button>\n))\n\nScheduleListAdd.displayName = 'ScheduleListAdd'\n\ninterface ScheduleEntryProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Make the row interactive — enables hover, role=button, keyboard activation. */\n  onClick?: () => void\n  disabled?: boolean\n}\n\nconst ScheduleEntry = React.forwardRef<HTMLDivElement, ScheduleEntryProps>(\n  ({ children, className, disabled, onClick, ...props }, ref) => {\n    const interactive = onClick !== undefined && !disabled\n    // role, tab stop and key handler travel together -- the row is never\n    // clickable without Enter/Space, and never focusable without a role\n    const interaction = interactive\n      ? {\n          role: 'button' as const,\n          tabIndex: 0,\n          onClick,\n          onKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => {\n            if (event.key === 'Enter' || event.key === ' ') {\n              event.preventDefault()\n              onClick()\n            }\n          },\n        }\n      : undefined\n    return (\n      <div\n        ref={ref}\n        {...interaction}\n        aria-disabled={disabled || undefined}\n        className={cn(\n          'flex items-center gap-3 rounded-lg bg-base-gray-soft px-3 py-2.5 transition-colors',\n          interactive &&\n            'cursor-pointer hover:bg-gray-a3 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n          disabled && 'cursor-not-allowed opacity-50',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  },\n)\n\nScheduleEntry.displayName = 'ScheduleEntry'\n\nconst ScheduleEntryContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('flex min-w-0 flex-1 flex-col gap-0.5', className)}\n    {...props}\n  />\n))\n\nScheduleEntryContent.displayName = 'ScheduleEntryContent'\n\nconst ScheduleEntryTitle = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'flex min-w-0 items-center gap-2 truncate text-sm font-medium text-gray',\n      className,\n    )}\n    {...props}\n  />\n))\n\nScheduleEntryTitle.displayName = 'ScheduleEntryTitle'\n\nconst ScheduleEntrySubtitle = React.forwardRef<\n  HTMLSpanElement,\n  React.HTMLAttributes<HTMLSpanElement>\n>(({ className, ...props }, ref) => (\n  <span\n    ref={ref}\n    className={cn('truncate text-xs text-gray-light', className)}\n    {...props}\n  />\n))\n\nScheduleEntrySubtitle.displayName = 'ScheduleEntrySubtitle'\n\n/** Right-aligned action area. Stops click propagation so inner controls\n *  don't fire the parent `ScheduleEntry`'s `onClick`. */\nconst ScheduleEntryActions = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, onClick, ...props }, ref) => (\n  <div\n    ref={ref}\n    // a layout wrapper, not a control: the handler only shields the inner\n    // buttons' clicks (keyboard activation included) from the parent row\n    role=\"presentation\"\n    onClick={(event) => {\n      event.stopPropagation()\n      onClick?.(event)\n    }}\n    className={cn('flex shrink-0 items-center gap-1.5', className)}\n    {...props}\n  />\n))\n\nScheduleEntryActions.displayName = 'ScheduleEntryActions'\n\ninterface ScheduleEntryDeleteProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {}\n\nconst ScheduleEntryDelete = React.forwardRef<\n  HTMLButtonElement,\n  ScheduleEntryDeleteProps\n>(\n  (\n    {\n      'aria-label': ariaLabel = 'Delete schedule entry',\n      children,\n      className,\n      onClick,\n      type = 'button',\n      ...props\n    },\n    ref,\n  ) => (\n    <button\n      ref={ref}\n      type={type}\n      aria-label={ariaLabel}\n      onClick={(event) => {\n        event.stopPropagation()\n        onClick?.(event)\n      }}\n      className={cn(\n        'inline-flex size-8 shrink-0 items-center justify-center rounded-full text-gray-light transition-colors hover:bg-base-error-soft hover:text-error focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',\n        className,\n      )}\n      {...props}\n    >\n      {children ?? <MaterialSymbol className=\"text-[14px]\" name=\"delete\" />}\n    </button>\n  ),\n)\n\nScheduleEntryDelete.displayName = 'ScheduleEntryDelete'\n\nexport {\n  ScheduleEntry,\n  ScheduleEntryActions,\n  ScheduleEntryContent,\n  ScheduleEntryDelete,\n  ScheduleEntrySubtitle,\n  ScheduleEntryTitle,\n  ScheduleList,\n  ScheduleListAdd,\n  ScheduleListEmpty,\n}\n"],"mappings":";;;;;;AAIA,MAAM,eAAeA,QAAM,YAGxB,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,OAAD;CACO;CACL,WAAW,GACT,uDACA,SACF;CACA,GAAI;AACL,CAAA,CACF;AAED,aAAa,cAAc;AAE3B,MAAM,oBAAoBA,QAAM,YAG7B,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,KAAD;CACO;CACL,WAAW,GAAG,qCAAqC,SAAS;CAC5D,GAAI;AACL,CAAA,CACF;AAED,kBAAkB,cAAc;AAOhC,MAAM,kBAAkBA,QAAM,YAG3B,EAAE,UAAU,WAAW,MAAM,OAAO,UAAU,GAAG,SAAS,QAC3D,qBAAC,UAAD;CACO;CACC;CACN,WAAW,GACT,iWACA,SACF;CACA,GAAI;WAPN,CASG,QAAQ,oBAAC,gBAAD;EAAgB,WAAU;EAAc,MAAK;CAAO,CAAA,GAC5D,QACK;EACT;AAED,gBAAgB,cAAc;AAQ9B,MAAM,gBAAgBA,QAAM,YACzB,EAAE,UAAU,WAAW,UAAU,SAAS,GAAG,SAAS,QAAQ;CAC7D,MAAM,cAAc,YAAY,KAAA,KAAa,CAAC;CAgB9C,OACE,oBAAC,OAAD;EACO;EACL,GAhBgB,cAChB;GACE,MAAM;GACN,UAAU;GACV;GACA,YAAY,UAA+C;IACzD,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;KAC9C,MAAM,eAAe;KACrB,QAAQ;IACV;GACF;EACF,IACA,KAAA;EAKA,iBAAe,YAAY,KAAA;EAC3B,WAAW,GACT,sFACA,eACE,iHACF,YAAY,iCACZ,SACF;EACA,GAAI;EAEH;CACE,CAAA;AAET,CACF;AAEA,cAAc,cAAc;AAE5B,MAAM,uBAAuBA,QAAM,YAGhC,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,OAAD;CACO;CACL,WAAW,GAAG,wCAAwC,SAAS;CAC/D,GAAI;AACL,CAAA,CACF;AAED,qBAAqB,cAAc;AAEnC,MAAM,qBAAqBA,QAAM,YAG9B,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,OAAD;CACO;CACL,WAAW,GACT,0EACA,SACF;CACA,GAAI;AACL,CAAA,CACF;AAED,mBAAmB,cAAc;AAEjC,MAAM,wBAAwBA,QAAM,YAGjC,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,QAAD;CACO;CACL,WAAW,GAAG,oCAAoC,SAAS;CAC3D,GAAI;AACL,CAAA,CACF;AAED,sBAAsB,cAAc;;;AAIpC,MAAM,uBAAuBA,QAAM,YAGhC,EAAE,WAAW,SAAS,GAAG,SAAS,QACnC,oBAAC,OAAD;CACO;CAGL,MAAK;CACL,UAAU,UAAU;EAClB,MAAM,gBAAgB;EACtB,UAAU,KAAK;CACjB;CACA,WAAW,GAAG,sCAAsC,SAAS;CAC7D,GAAI;AACL,CAAA,CACF;AAED,qBAAqB,cAAc;AAInC,MAAM,sBAAsBA,QAAM,YAK9B,EACE,cAAc,YAAY,yBAC1B,UACA,WACA,SACA,OAAO,UACP,GAAG,SAEL,QAEA,oBAAC,UAAD;CACO;CACC;CACN,cAAY;CACZ,UAAU,UAAU;EAClB,MAAM,gBAAgB;EACtB,UAAU,KAAK;CACjB;CACA,WAAW,GACT,kRACA,SACF;CACA,GAAI;WAEH,YAAY,oBAAC,gBAAD;EAAgB,WAAU;EAAc,MAAK;CAAU,CAAA;AAC9D,CAAA,CAEZ;AAEA,oBAAoB,cAAc"}
+{"version":3,"file":"schedule-list.js","names":["React"],"sources":["../../src/components/schedule-list.tsx"],"sourcesContent":["import { Add, Delete } from '@epilot/spark-icons'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\n\nconst ScheduleList = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'flex flex-col gap-[calc(var(--spark-layout-gap)*2)]',\n      className,\n    )}\n    {...props}\n  />\n))\n\nScheduleList.displayName = 'ScheduleList'\n\nconst ScheduleListEmpty = React.forwardRef<\n  HTMLParagraphElement,\n  React.HTMLAttributes<HTMLParagraphElement>\n>(({ className, ...props }, ref) => (\n  <p\n    ref={ref}\n    className={cn('px-3 py-2 text-sm text-gray-light', className)}\n    {...props}\n  />\n))\n\nScheduleListEmpty.displayName = 'ScheduleListEmpty'\n\ninterface ScheduleListAddProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Optional icon override; defaults to a `+`. */\n  icon?: React.ReactNode\n}\n\nconst ScheduleListAdd = React.forwardRef<\n  HTMLButtonElement,\n  ScheduleListAddProps\n>(({ children, className, icon, type = 'button', ...props }, ref) => (\n  <button\n    ref={ref}\n    type={type}\n    className={cn(\n      'inline-flex h-11 w-full items-center justify-center gap-1.5 rounded-lg border border-dashed border-gray text-sm font-medium text-gray-light transition-colors hover:border-spark-a8 hover:bg-base-accent-soft hover:text-accent focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',\n      className,\n    )}\n    {...props}\n  >\n    {icon ?? <Add className=\"[--spark-icon-size:14px]\" />}\n    {children}\n  </button>\n))\n\nScheduleListAdd.displayName = 'ScheduleListAdd'\n\ninterface ScheduleEntryProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Make the row interactive — enables hover, role=button, keyboard activation. */\n  onClick?: () => void\n  disabled?: boolean\n}\n\nconst ScheduleEntry = React.forwardRef<HTMLDivElement, ScheduleEntryProps>(\n  ({ children, className, disabled, onClick, ...props }, ref) => {\n    const interactive = onClick !== undefined && !disabled\n    // role, tab stop and key handler travel together -- the row is never\n    // clickable without Enter/Space, and never focusable without a role\n    const interaction = interactive\n      ? {\n          role: 'button' as const,\n          tabIndex: 0,\n          onClick,\n          onKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => {\n            if (event.key === 'Enter' || event.key === ' ') {\n              event.preventDefault()\n              onClick()\n            }\n          },\n        }\n      : undefined\n    return (\n      <div\n        ref={ref}\n        {...interaction}\n        aria-disabled={disabled || undefined}\n        className={cn(\n          'flex items-center gap-3 rounded-lg bg-base-gray-soft px-3 py-2.5 transition-colors',\n          interactive &&\n            'cursor-pointer hover:bg-gray-a3 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n          disabled && 'cursor-not-allowed opacity-50',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  },\n)\n\nScheduleEntry.displayName = 'ScheduleEntry'\n\nconst ScheduleEntryContent = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn('flex min-w-0 flex-1 flex-col gap-0.5', className)}\n    {...props}\n  />\n))\n\nScheduleEntryContent.displayName = 'ScheduleEntryContent'\n\nconst ScheduleEntryTitle = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    className={cn(\n      'flex min-w-0 items-center gap-2 truncate text-sm font-medium text-gray',\n      className,\n    )}\n    {...props}\n  />\n))\n\nScheduleEntryTitle.displayName = 'ScheduleEntryTitle'\n\nconst ScheduleEntrySubtitle = React.forwardRef<\n  HTMLSpanElement,\n  React.HTMLAttributes<HTMLSpanElement>\n>(({ className, ...props }, ref) => (\n  <span\n    ref={ref}\n    className={cn('truncate text-xs text-gray-light', className)}\n    {...props}\n  />\n))\n\nScheduleEntrySubtitle.displayName = 'ScheduleEntrySubtitle'\n\n/** Right-aligned action area. Stops click propagation so inner controls\n *  don't fire the parent `ScheduleEntry`'s `onClick`. */\nconst ScheduleEntryActions = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, onClick, ...props }, ref) => (\n  <div\n    ref={ref}\n    // a layout wrapper, not a control: the handler only shields the inner\n    // buttons' clicks (keyboard activation included) from the parent row\n    role=\"presentation\"\n    onClick={(event) => {\n      event.stopPropagation()\n      onClick?.(event)\n    }}\n    className={cn('flex shrink-0 items-center gap-1.5', className)}\n    {...props}\n  />\n))\n\nScheduleEntryActions.displayName = 'ScheduleEntryActions'\n\ninterface ScheduleEntryDeleteProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {}\n\nconst ScheduleEntryDelete = React.forwardRef<\n  HTMLButtonElement,\n  ScheduleEntryDeleteProps\n>(\n  (\n    {\n      'aria-label': ariaLabel = 'Delete schedule entry',\n      children,\n      className,\n      onClick,\n      type = 'button',\n      ...props\n    },\n    ref,\n  ) => (\n    <button\n      ref={ref}\n      type={type}\n      aria-label={ariaLabel}\n      onClick={(event) => {\n        event.stopPropagation()\n        onClick?.(event)\n      }}\n      className={cn(\n        'inline-flex size-8 shrink-0 items-center justify-center rounded-full text-gray-light transition-colors hover:bg-base-error-soft hover:text-error focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50',\n        className,\n      )}\n      {...props}\n    >\n      {children ?? <Delete className=\"[--spark-icon-size:14px]\" />}\n    </button>\n  ),\n)\n\nScheduleEntryDelete.displayName = 'ScheduleEntryDelete'\n\nexport {\n  ScheduleEntry,\n  ScheduleEntryActions,\n  ScheduleEntryContent,\n  ScheduleEntryDelete,\n  ScheduleEntrySubtitle,\n  ScheduleEntryTitle,\n  ScheduleList,\n  ScheduleListAdd,\n  ScheduleListEmpty,\n}\n"],"mappings":";;;;;;AAIA,MAAM,eAAeA,QAAM,YAGxB,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,OAAD;CACO;CACL,WAAW,GACT,uDACA,SACF;CACA,GAAI;AACL,CAAA,CACF;AAED,aAAa,cAAc;AAE3B,MAAM,oBAAoBA,QAAM,YAG7B,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,KAAD;CACO;CACL,WAAW,GAAG,qCAAqC,SAAS;CAC5D,GAAI;AACL,CAAA,CACF;AAED,kBAAkB,cAAc;AAOhC,MAAM,kBAAkBA,QAAM,YAG3B,EAAE,UAAU,WAAW,MAAM,OAAO,UAAU,GAAG,SAAS,QAC3D,qBAAC,UAAD;CACO;CACC;CACN,WAAW,GACT,iWACA,SACF;CACA,GAAI;WAPN,CASG,QAAQ,oBAAC,KAAD,EAAK,WAAU,2BAA4B,CAAA,GACnD,QACK;EACT;AAED,gBAAgB,cAAc;AAQ9B,MAAM,gBAAgBA,QAAM,YACzB,EAAE,UAAU,WAAW,UAAU,SAAS,GAAG,SAAS,QAAQ;CAC7D,MAAM,cAAc,YAAY,KAAA,KAAa,CAAC;CAgB9C,OACE,oBAAC,OAAD;EACO;EACL,GAhBgB,cAChB;GACE,MAAM;GACN,UAAU;GACV;GACA,YAAY,UAA+C;IACzD,IAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,KAAK;KAC9C,MAAM,eAAe;KACrB,QAAQ;IACV;GACF;EACF,IACA,KAAA;EAKA,iBAAe,YAAY,KAAA;EAC3B,WAAW,GACT,sFACA,eACE,iHACF,YAAY,iCACZ,SACF;EACA,GAAI;EAEH;CACE,CAAA;AAET,CACF;AAEA,cAAc,cAAc;AAE5B,MAAM,uBAAuBA,QAAM,YAGhC,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,OAAD;CACO;CACL,WAAW,GAAG,wCAAwC,SAAS;CAC/D,GAAI;AACL,CAAA,CACF;AAED,qBAAqB,cAAc;AAEnC,MAAM,qBAAqBA,QAAM,YAG9B,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,OAAD;CACO;CACL,WAAW,GACT,0EACA,SACF;CACA,GAAI;AACL,CAAA,CACF;AAED,mBAAmB,cAAc;AAEjC,MAAM,wBAAwBA,QAAM,YAGjC,EAAE,WAAW,GAAG,SAAS,QAC1B,oBAAC,QAAD;CACO;CACL,WAAW,GAAG,oCAAoC,SAAS;CAC3D,GAAI;AACL,CAAA,CACF;AAED,sBAAsB,cAAc;;;AAIpC,MAAM,uBAAuBA,QAAM,YAGhC,EAAE,WAAW,SAAS,GAAG,SAAS,QACnC,oBAAC,OAAD;CACO;CAGL,MAAK;CACL,UAAU,UAAU;EAClB,MAAM,gBAAgB;EACtB,UAAU,KAAK;CACjB;CACA,WAAW,GAAG,sCAAsC,SAAS;CAC7D,GAAI;AACL,CAAA,CACF;AAED,qBAAqB,cAAc;AAInC,MAAM,sBAAsBA,QAAM,YAK9B,EACE,cAAc,YAAY,yBAC1B,UACA,WACA,SACA,OAAO,UACP,GAAG,SAEL,QAEA,oBAAC,UAAD;CACO;CACC;CACN,cAAY;CACZ,UAAU,UAAU;EAClB,MAAM,gBAAgB;EACtB,UAAU,KAAK;CACjB;CACA,WAAW,GACT,kRACA,SACF;CACA,GAAI;WAEH,YAAY,oBAAC,QAAD,EAAQ,WAAU,2BAA4B,CAAA;AACrD,CAAA,CAEZ;AAEA,oBAAoB,cAAc"}

package/dist/components/select.cjs

@@ -2,11 +2,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_field = require("./field.cjs");
 const require_lib_input_box_variants = require("../lib/input-box-variants.cjs");
+const require_components_field = require("./field.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_select = require("@base-ui/react/select");
 let cnfast = require("cnfast");
@@ -45,10 +45,7 @@ function SelectTrigger({ className, size = "default", variant, id: idProp, child
 		"aria-invalid": ariaInvalid,
 		...props,
 		"aria-describedby": ariaDescribedBy,
-		children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_select.Select.Icon, { render: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons_material_symbol.MaterialSymbol, {
-			className: "pointer-events-none text-[14px] text-gray-light",
-			name: "expand_more"
-		}) })]
+		children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_select.Select.Icon, { render: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_epilot_spark_icons.KeyboardArrowDown, { className: "pointer-events-none text-gray-light [--spark-icon-size:14px]" }) })]
 	});
 }
 function SelectContent({ className, children, align = "start", alignOffset, side, sideOffset = 4, alignItemWithTrigger = false, container, ...props }) {
@@ -88,10 +85,7 @@ function SelectItem({ className, children, ...props }) {
 		...props,
 		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 			className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_select.Select.ItemIndicator, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons_material_symbol.MaterialSymbol, {
-				className: "text-[11px]",
-				name: "check"
-			}) })
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_select.Select.ItemIndicator, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_epilot_spark_icons.Check, { className: "[--spark-icon-size:11px]" }) })
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_select.Select.ItemText, { children })]
 	});
 }
@@ -108,10 +102,7 @@ function SelectScrollUpButton({ className, ...props }) {
 		"data-slot": "select-scroll-up-button",
 		className: (0, cnfast.cn)("top-0 z-10 flex w-full cursor-default items-center justify-center bg-gray-1 py-1 [&_svg:not([class*=size-])]:size-4", className),
 		...props,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons_material_symbol.MaterialSymbol, {
-			className: "rotate-180 text-[14px]",
-			name: "expand_more"
-		})
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_epilot_spark_icons.KeyboardArrowDown, { className: "rotate-180 [--spark-icon-size:14px]" })
 	});
 }
 function SelectScrollDownButton({ className, ...props }) {
@@ -119,10 +110,7 @@ function SelectScrollDownButton({ className, ...props }) {
 		"data-slot": "select-scroll-down-button",
 		className: (0, cnfast.cn)("bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-gray-1 py-1 [&_svg:not([class*=size-])]:size-4", className),
 		...props,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons_material_symbol.MaterialSymbol, {
-			className: "text-[14px]",
-			name: "expand_more"
-		})
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_epilot_spark_icons.KeyboardArrowDown, { className: "[--spark-icon-size:14px]" })
 	});
 }
 //#endregion

package/dist/components/select.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"select.cjs","names":["SelectPrimitive","useFieldControl","boxChrome","MaterialSymbol"],"sources":["../../src/components/select.tsx"],"sourcesContent":["'use client'\n\nimport { Select as SelectPrimitive } from '@base-ui/react/select'\nimport * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { boxChrome } from '../lib/input-box-variants'\nimport type { SparkInputStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\nimport { useFieldControl } from './field'\n\n// bare re-export: Root renders no element and its props are generic over Value\nconst Select = SelectPrimitive.Root\n\nfunction SelectGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Group>) {\n  return (\n    <SelectPrimitive.Group\n      data-slot=\"select-group\"\n      className={cn('scroll-my-1 p-1', className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectValue({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Value>) {\n  return <SelectPrimitive.Value data-slot=\"select-value\" {...props} />\n}\n\nconst TRIGGER_BASE =\n  'relative flex items-center justify-between gap-1.5 rounded-md px-3 text-base whitespace-nowrap text-gray outline-hidden transition-colors select-none data-placeholder:text-gray-disabled disabled:cursor-not-allowed disabled:text-gray-disabled *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 motion-reduce:transition-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4'\n\n// box-chrome sizing only — a ghost/inset trigger sizes via boxChrome.ghost's\n// GHOST_UNDERLINE (h-10), matching Input's underline row exactly (no competing\n// height utility). `min-h-[2.75rem]` is a literal, non-knob-scaled WCAG 2.5.5\n// floor; `sm` stays visually compact but restores the floor via an invisible\n// `before:` hit overlay rather than growing the box, with `my-1` to keep that\n// overlay out of an ancestor scroller's overflow.\nconst TRIGGER_SIZE = {\n  default: 'h-11 min-h-[2.75rem]',\n  sm: \"my-1 h-9 before:absolute before:inset-x-0 before:top-1/2 before:min-h-[2.75rem] before:-translate-y-1/2 before:content-['']\",\n} as const\n\nfunction SelectTrigger({\n  className,\n  size = 'default',\n  variant,\n  id: idProp,\n  children,\n  'aria-describedby': ariaDescribedByProp,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {\n  size?: 'sm' | 'default'\n  // input-style override; falls back to Field / <Theme>, then soft (like Input)\n  variant?: SparkInputStyle\n}) {\n  const { field, id, ariaDescribedBy, ariaInvalid, inputStyle, inputColor } =\n    useFieldControl({\n      id: idProp,\n      ariaDescribedBy: ariaDescribedByProp,\n      variant,\n    })\n  // inside an inset field the shell is the box, so the trigger goes bare\n  // (underline row), matching Input's inset chrome; an explicit variant keeps\n  // the box even inside an inset field (mirrors Input)\n  const isGhost =\n    inputStyle === 'ghost' || (!variant && field?.labelPosition === 'inset')\n\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      id={id}\n      className={cn(\n        TRIGGER_BASE,\n        // fills the field shell like an Input; sizes to content when standalone\n        field ? 'w-full' : 'w-fit',\n        !isGhost && TRIGGER_SIZE[size],\n        boxChrome[isGhost ? 'ghost' : inputStyle][inputColor],\n        className,\n      )}\n      aria-invalid={ariaInvalid}\n      {...props}\n      aria-describedby={ariaDescribedBy}\n    >\n      {children}\n      <SelectPrimitive.Icon\n        render={\n          <MaterialSymbol\n            className=\"pointer-events-none text-[14px] text-gray-light\"\n            name=\"expand_more\"\n          />\n        }\n      />\n    </SelectPrimitive.Trigger>\n  )\n}\n\ntype SelectContentProps = React.ComponentProps<typeof SelectPrimitive.Popup> &\n  Pick<\n    SelectPrimitive.Positioner.Props,\n    'align' | 'alignOffset' | 'side' | 'sideOffset' | 'alignItemWithTrigger'\n  > &\n  Pick<SelectPrimitive.Portal.Props, 'container'>\n\nfunction SelectContent({\n  className,\n  children,\n  align = 'start',\n  alignOffset,\n  side,\n  sideOffset = 4,\n  // drop the menu below the trigger (left-aligned) like a conventional form\n  // dropdown; the native-<select>-style overlay (Base UI's inherited default)\n  // shifts the popup to align item text with trigger text, exposing a sliver of\n  // the trigger's fill at the edge. Opt back in per instance if you want it.\n  alignItemWithTrigger = false,\n  container,\n  ...props\n}: SelectContentProps) {\n  return (\n    <SelectPrimitive.Portal container={container}>\n      <SelectPrimitive.Positioner\n        align={align}\n        alignItemWithTrigger={alignItemWithTrigger}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <SelectPrimitive.Popup\n          data-slot=\"select-content\"\n          data-align-trigger={alignItemWithTrigger}\n          className={cn(\n            // match the trigger's width (never narrower) so the drop-below menu\n            // lines up under it; --anchor-width is the trigger width, floored at\n            // 9rem for very narrow triggers\n            'relative isolate z-50 max-h-(--available-height) min-w-[max(9rem,var(--anchor-width))] origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg border border-gray-a1 bg-gray-1 text-gray-a12 shadow-lg',\n            'transition-[opacity,scale,translate] duration-100 data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0 motion-reduce:transition-none',\n            'data-[side=bottom]:data-starting-style:-translate-y-2 data-[side=left]:data-starting-style:translate-x-2 data-[side=right]:data-starting-style:-translate-x-2 data-[side=top]:data-starting-style:translate-y-2',\n            'data-[align-trigger=true]:transition-none',\n            className,\n          )}\n          {...props}\n        >\n          <SelectScrollUpButton />\n          <SelectPrimitive.List>{children}</SelectPrimitive.List>\n          <SelectScrollDownButton />\n        </SelectPrimitive.Popup>\n      </SelectPrimitive.Positioner>\n    </SelectPrimitive.Portal>\n  )\n}\n\nfunction SelectLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.GroupLabel>) {\n  return (\n    <SelectPrimitive.GroupLabel\n      data-slot=\"select-label\"\n      className={cn('px-1.5 py-1 text-xs text-gray-light', className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Item>) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        'relative flex w-full cursor-default items-center gap-1.5 rounded-sm py-1.5 pr-8 pl-1.5 text-sm text-gray outline-hidden transition-colors select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-gray-a3 motion-reduce:transition-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2',\n        className,\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\">\n        <SelectPrimitive.ItemIndicator>\n          <MaterialSymbol className=\"text-[11px]\" name=\"check\" />\n        </SelectPrimitive.ItemIndicator>\n      </span>\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  )\n}\n\n// plain div, not Select.Separator: role=\"separator\" isn't a permitted child of a\n// listbox (aria-required-children), and the divider is decorative — the groups\n// carry the semantics. Hidden from assistive tech.\nfunction SelectSeparator({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      aria-hidden=\"true\"\n      data-slot=\"select-separator\"\n      className={cn(\n        'pointer-events-none -mx-1 my-1 h-px bg-gray-a3',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>) {\n  return (\n    <SelectPrimitive.ScrollUpArrow\n      data-slot=\"select-scroll-up-button\"\n      className={cn(\n        'top-0 z-10 flex w-full cursor-default items-center justify-center bg-gray-1 py-1 [&_svg:not([class*=size-])]:size-4',\n        className,\n      )}\n      {...props}\n    >\n      <MaterialSymbol className=\"rotate-180 text-[14px]\" name=\"expand_more\" />\n    </SelectPrimitive.ScrollUpArrow>\n  )\n}\n\nfunction SelectScrollDownButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>) {\n  return (\n    <SelectPrimitive.ScrollDownArrow\n      data-slot=\"select-scroll-down-button\"\n      className={cn(\n        'bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-gray-1 py-1 [&_svg:not([class*=size-])]:size-4',\n        className,\n      )}\n      {...props}\n    >\n      <MaterialSymbol className=\"text-[14px]\" name=\"expand_more\" />\n    </SelectPrimitive.ScrollDownArrow>\n  )\n}\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n}\n"],"mappings":"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"}
+{"version":3,"file":"select.cjs","names":["SelectPrimitive","useFieldControl","boxChrome","KeyboardArrowDown","Check"],"sources":["../../src/components/select.tsx"],"sourcesContent":["'use client'\n\nimport { Select as SelectPrimitive } from '@base-ui/react/select'\nimport { Check, KeyboardArrowDown } from '@epilot/spark-icons'\nimport * as React from 'react'\nimport { boxChrome } from '../lib/input-box-variants'\nimport type { SparkInputStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\nimport { useFieldControl } from './field'\n\n// bare re-export: Root renders no element and its props are generic over Value\nconst Select = SelectPrimitive.Root\n\nfunction SelectGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Group>) {\n  return (\n    <SelectPrimitive.Group\n      data-slot=\"select-group\"\n      className={cn('scroll-my-1 p-1', className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectValue({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Value>) {\n  return <SelectPrimitive.Value data-slot=\"select-value\" {...props} />\n}\n\nconst TRIGGER_BASE =\n  'relative flex items-center justify-between gap-1.5 rounded-md px-3 text-base whitespace-nowrap text-gray outline-hidden transition-colors select-none data-placeholder:text-gray-disabled disabled:cursor-not-allowed disabled:text-gray-disabled *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 motion-reduce:transition-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4'\n\n// box-chrome sizing only — a ghost/inset trigger sizes via boxChrome.ghost's\n// GHOST_UNDERLINE (h-10), matching Input's underline row exactly (no competing\n// height utility). `min-h-[2.75rem]` is a literal, non-knob-scaled WCAG 2.5.5\n// floor; `sm` stays visually compact but restores the floor via an invisible\n// `before:` hit overlay rather than growing the box, with `my-1` to keep that\n// overlay out of an ancestor scroller's overflow.\nconst TRIGGER_SIZE = {\n  default: 'h-11 min-h-[2.75rem]',\n  sm: \"my-1 h-9 before:absolute before:inset-x-0 before:top-1/2 before:min-h-[2.75rem] before:-translate-y-1/2 before:content-['']\",\n} as const\n\nfunction SelectTrigger({\n  className,\n  size = 'default',\n  variant,\n  id: idProp,\n  children,\n  'aria-describedby': ariaDescribedByProp,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {\n  size?: 'sm' | 'default'\n  // input-style override; falls back to Field / <Theme>, then soft (like Input)\n  variant?: SparkInputStyle\n}) {\n  const { field, id, ariaDescribedBy, ariaInvalid, inputStyle, inputColor } =\n    useFieldControl({\n      id: idProp,\n      ariaDescribedBy: ariaDescribedByProp,\n      variant,\n    })\n  // inside an inset field the shell is the box, so the trigger goes bare\n  // (underline row), matching Input's inset chrome; an explicit variant keeps\n  // the box even inside an inset field (mirrors Input)\n  const isGhost =\n    inputStyle === 'ghost' || (!variant && field?.labelPosition === 'inset')\n\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      id={id}\n      className={cn(\n        TRIGGER_BASE,\n        // fills the field shell like an Input; sizes to content when standalone\n        field ? 'w-full' : 'w-fit',\n        !isGhost && TRIGGER_SIZE[size],\n        boxChrome[isGhost ? 'ghost' : inputStyle][inputColor],\n        className,\n      )}\n      aria-invalid={ariaInvalid}\n      {...props}\n      aria-describedby={ariaDescribedBy}\n    >\n      {children}\n      <SelectPrimitive.Icon\n        render={\n          <KeyboardArrowDown className=\"pointer-events-none text-gray-light [--spark-icon-size:14px]\" />\n        }\n      />\n    </SelectPrimitive.Trigger>\n  )\n}\n\ntype SelectContentProps = React.ComponentProps<typeof SelectPrimitive.Popup> &\n  Pick<\n    SelectPrimitive.Positioner.Props,\n    'align' | 'alignOffset' | 'side' | 'sideOffset' | 'alignItemWithTrigger'\n  > &\n  Pick<SelectPrimitive.Portal.Props, 'container'>\n\nfunction SelectContent({\n  className,\n  children,\n  align = 'start',\n  alignOffset,\n  side,\n  sideOffset = 4,\n  // drop the menu below the trigger (left-aligned) like a conventional form\n  // dropdown; the native-<select>-style overlay (Base UI's inherited default)\n  // shifts the popup to align item text with trigger text, exposing a sliver of\n  // the trigger's fill at the edge. Opt back in per instance if you want it.\n  alignItemWithTrigger = false,\n  container,\n  ...props\n}: SelectContentProps) {\n  return (\n    <SelectPrimitive.Portal container={container}>\n      <SelectPrimitive.Positioner\n        align={align}\n        alignItemWithTrigger={alignItemWithTrigger}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <SelectPrimitive.Popup\n          data-slot=\"select-content\"\n          data-align-trigger={alignItemWithTrigger}\n          className={cn(\n            // match the trigger's width (never narrower) so the drop-below menu\n            // lines up under it; --anchor-width is the trigger width, floored at\n            // 9rem for very narrow triggers\n            'relative isolate z-50 max-h-(--available-height) min-w-[max(9rem,var(--anchor-width))] origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg border border-gray-a1 bg-gray-1 text-gray-a12 shadow-lg',\n            'transition-[opacity,scale,translate] duration-100 data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0 motion-reduce:transition-none',\n            'data-[side=bottom]:data-starting-style:-translate-y-2 data-[side=left]:data-starting-style:translate-x-2 data-[side=right]:data-starting-style:-translate-x-2 data-[side=top]:data-starting-style:translate-y-2',\n            'data-[align-trigger=true]:transition-none',\n            className,\n          )}\n          {...props}\n        >\n          <SelectScrollUpButton />\n          <SelectPrimitive.List>{children}</SelectPrimitive.List>\n          <SelectScrollDownButton />\n        </SelectPrimitive.Popup>\n      </SelectPrimitive.Positioner>\n    </SelectPrimitive.Portal>\n  )\n}\n\nfunction SelectLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.GroupLabel>) {\n  return (\n    <SelectPrimitive.GroupLabel\n      data-slot=\"select-label\"\n      className={cn('px-1.5 py-1 text-xs text-gray-light', className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Item>) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        'relative flex w-full cursor-default items-center gap-1.5 rounded-sm py-1.5 pr-8 pl-1.5 text-sm text-gray outline-hidden transition-colors select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-gray-a3 motion-reduce:transition-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2',\n        className,\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\">\n        <SelectPrimitive.ItemIndicator>\n          <Check className=\"[--spark-icon-size:11px]\" />\n        </SelectPrimitive.ItemIndicator>\n      </span>\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  )\n}\n\n// plain div, not Select.Separator: role=\"separator\" isn't a permitted child of a\n// listbox (aria-required-children), and the divider is decorative — the groups\n// carry the semantics. Hidden from assistive tech.\nfunction SelectSeparator({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      aria-hidden=\"true\"\n      data-slot=\"select-separator\"\n      className={cn(\n        'pointer-events-none -mx-1 my-1 h-px bg-gray-a3',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>) {\n  return (\n    <SelectPrimitive.ScrollUpArrow\n      data-slot=\"select-scroll-up-button\"\n      className={cn(\n        'top-0 z-10 flex w-full cursor-default items-center justify-center bg-gray-1 py-1 [&_svg:not([class*=size-])]:size-4',\n        className,\n      )}\n      {...props}\n    >\n      <KeyboardArrowDown className=\"rotate-180 [--spark-icon-size:14px]\" />\n    </SelectPrimitive.ScrollUpArrow>\n  )\n}\n\nfunction SelectScrollDownButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>) {\n  return (\n    <SelectPrimitive.ScrollDownArrow\n      data-slot=\"select-scroll-down-button\"\n      className={cn(\n        'bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-gray-1 py-1 [&_svg:not([class*=size-])]:size-4',\n        className,\n      )}\n      {...props}\n    >\n      <KeyboardArrowDown className=\"[--spark-icon-size:14px]\" />\n    </SelectPrimitive.ScrollDownArrow>\n  )\n}\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n}\n"],"mappings":";;;;;;;;;;;;;AAWA,MAAM,SAASA,sBAAAA,OAAgB;AAE/B,SAAS,YAAY,EACnB,WACA,GAAG,SACkD;CACrD,OACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAgB,OAAjB;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IAAc,mBAAmB,SAAS;EAC1C,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EACnB,GAAG,SACkD;CACrD,OAAO,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAgB,OAAjB;EAAuB,aAAU;EAAe,GAAI;CAAQ,CAAA;AACrE;AAEA,MAAM,eACJ;AAQF,MAAM,eAAe;CACnB,SAAS;CACT,IAAI;AACN;AAEA,SAAS,cAAc,EACrB,WACA,OAAO,WACP,SACA,IAAI,QACJ,UACA,oBAAoB,qBACpB,GAAG,SAKF;CACD,MAAM,EAAE,OAAO,IAAI,iBAAiB,aAAa,YAAY,eAC3DC,yBAAAA,gBAAgB;EACd,IAAI;EACJ,iBAAiB;EACjB;CACF,CAAC;CAIH,MAAM,UACJ,eAAe,WAAY,CAAC,WAAW,OAAO,kBAAkB;CAElE,OACE,iBAAA,GAAA,kBAAA,MAACD,sBAAAA,OAAgB,SAAjB;EACE,aAAU;EACV,aAAW;EACP;EACJ,YAAA,GAAA,OAAA,IACE,cAEA,QAAQ,WAAW,SACnB,CAAC,WAAW,aAAa,OACzBE,+BAAAA,UAAU,UAAU,UAAU,YAAY,aAC1C,SACF;EACA,gBAAc;EACd,GAAI;EACJ,oBAAkB;YAdpB,CAgBG,UACD,iBAAA,GAAA,kBAAA,KAACF,sBAAAA,OAAgB,MAAjB,EACE,QACE,iBAAA,GAAA,kBAAA,KAACG,oBAAAA,mBAAD,EAAmB,WAAU,+DAAgE,CAAA,EAEhG,CAAA,CACsB;;AAE7B;AASA,SAAS,cAAc,EACrB,WACA,UACA,QAAQ,SACR,aACA,MACA,aAAa,GAKb,uBAAuB,OACvB,WACA,GAAG,SACkB;CACrB,OACE,iBAAA,GAAA,kBAAA,KAACH,sBAAAA,OAAgB,QAAjB;EAAmC;YACjC,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAgB,YAAjB;GACS;GACe;GACT;GACP;GACM;aAEZ,iBAAA,GAAA,kBAAA,MAACA,sBAAAA,OAAgB,OAAjB;IACE,aAAU;IACV,sBAAoB;IACpB,YAAA,GAAA,OAAA,IAIE,2NACA,qMACA,mNACA,6CACA,SACF;IACA,GAAI;cAbN;KAeE,iBAAA,GAAA,kBAAA,KAAC,sBAAD,CAAuB,CAAA;KACvB,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAgB,MAAjB,EAAuB,SAA+B,CAAA;KACtD,iBAAA,GAAA,kBAAA,KAAC,wBAAD,CAAyB,CAAA;IACJ;;EACG,CAAA;CACN,CAAA;AAE5B;AAEA,SAAS,YAAY,EACnB,WACA,GAAG,SACuD;CAC1D,OACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAgB,YAAjB;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IAAc,uCAAuC,SAAS;EAC9D,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,WAAW,EAClB,WACA,UACA,GAAG,SACiD;CACpD,OACE,iBAAA,GAAA,kBAAA,MAACA,sBAAAA,OAAgB,MAAjB;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IACE,gaACA,SACF;EACA,GAAI;YANN,CAQE,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAU;aACd,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAgB,eAAjB,EAAA,UACE,iBAAA,GAAA,kBAAA,KAACI,oBAAAA,OAAD,EAAO,WAAU,2BAA4B,CAAA,EAChB,CAAA;EAC3B,CAAA,GACN,iBAAA,GAAA,kBAAA,KAACJ,sBAAAA,OAAgB,UAAjB,EAA2B,SAAmC,CAAA,CAC1C;;AAE1B;AAKA,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAsC;CAC7E,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,eAAY;EACZ,aAAU;EACV,YAAA,GAAA,OAAA,IACE,kDACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,qBAAqB,EAC5B,WACA,GAAG,SAC0D;CAC7D,OACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAgB,eAAjB;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IACE,uHACA,SACF;EACA,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAACG,oBAAAA,mBAAD,EAAmB,WAAU,sCAAuC,CAAA;CACvC,CAAA;AAEnC;AAEA,SAAS,uBAAuB,EAC9B,WACA,GAAG,SAC4D;CAC/D,OACE,iBAAA,GAAA,kBAAA,KAACH,sBAAAA,OAAgB,iBAAjB;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IACE,0HACA,SACF;EACA,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAACG,oBAAAA,mBAAD,EAAmB,WAAU,2BAA4B,CAAA;CAC1B,CAAA;AAErC"}

package/dist/components/select.js

@@ -1,10 +1,10 @@
 "use client";
 "use client";
 import { cn } from "../utils/cn.js";
-import { MaterialSymbol } from "../icons/material-symbol.js";
-import { useFieldControl } from "./field.js";
 import { boxChrome } from "../lib/input-box-variants.js";
+import { useFieldControl } from "./field.js";
 import "react";
+import { Check, KeyboardArrowDown } from "@epilot/spark-icons";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Select as Select$1 } from "@base-ui/react/select";
 //#region src/components/select.tsx
@@ -42,10 +42,7 @@ function SelectTrigger({ className, size = "default", variant, id: idProp, child
 		"aria-invalid": ariaInvalid,
 		...props,
 		"aria-describedby": ariaDescribedBy,
-		children: [children, /* @__PURE__ */ jsx(Select$1.Icon, { render: /* @__PURE__ */ jsx(MaterialSymbol, {
-			className: "pointer-events-none text-[14px] text-gray-light",
-			name: "expand_more"
-		}) })]
+		children: [children, /* @__PURE__ */ jsx(Select$1.Icon, { render: /* @__PURE__ */ jsx(KeyboardArrowDown, { className: "pointer-events-none text-gray-light [--spark-icon-size:14px]" }) })]
 	});
 }
 function SelectContent({ className, children, align = "start", alignOffset, side, sideOffset = 4, alignItemWithTrigger = false, container, ...props }) {
@@ -85,10 +82,7 @@ function SelectItem({ className, children, ...props }) {
 		...props,
 		children: [/* @__PURE__ */ jsx("span", {
 			className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center",
-			children: /* @__PURE__ */ jsx(Select$1.ItemIndicator, { children: /* @__PURE__ */ jsx(MaterialSymbol, {
-				className: "text-[11px]",
-				name: "check"
-			}) })
+			children: /* @__PURE__ */ jsx(Select$1.ItemIndicator, { children: /* @__PURE__ */ jsx(Check, { className: "[--spark-icon-size:11px]" }) })
 		}), /* @__PURE__ */ jsx(Select$1.ItemText, { children })]
 	});
 }
@@ -105,10 +99,7 @@ function SelectScrollUpButton({ className, ...props }) {
 		"data-slot": "select-scroll-up-button",
 		className: cn("top-0 z-10 flex w-full cursor-default items-center justify-center bg-gray-1 py-1 [&_svg:not([class*=size-])]:size-4", className),
 		...props,
-		children: /* @__PURE__ */ jsx(MaterialSymbol, {
-			className: "rotate-180 text-[14px]",
-			name: "expand_more"
-		})
+		children: /* @__PURE__ */ jsx(KeyboardArrowDown, { className: "rotate-180 [--spark-icon-size:14px]" })
 	});
 }
 function SelectScrollDownButton({ className, ...props }) {
@@ -116,10 +107,7 @@ function SelectScrollDownButton({ className, ...props }) {
 		"data-slot": "select-scroll-down-button",
 		className: cn("bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-gray-1 py-1 [&_svg:not([class*=size-])]:size-4", className),
 		...props,
-		children: /* @__PURE__ */ jsx(MaterialSymbol, {
-			className: "text-[14px]",
-			name: "expand_more"
-		})
+		children: /* @__PURE__ */ jsx(KeyboardArrowDown, { className: "[--spark-icon-size:14px]" })
 	});
 }
 //#endregion

package/dist/components/select.js.map

@@ -1 +1 @@
-{"version":3,"file":"select.js","names":["SelectPrimitive"],"sources":["../../src/components/select.tsx"],"sourcesContent":["'use client'\n\nimport { Select as SelectPrimitive } from '@base-ui/react/select'\nimport * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { boxChrome } from '../lib/input-box-variants'\nimport type { SparkInputStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\nimport { useFieldControl } from './field'\n\n// bare re-export: Root renders no element and its props are generic over Value\nconst Select = SelectPrimitive.Root\n\nfunction SelectGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Group>) {\n  return (\n    <SelectPrimitive.Group\n      data-slot=\"select-group\"\n      className={cn('scroll-my-1 p-1', className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectValue({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Value>) {\n  return <SelectPrimitive.Value data-slot=\"select-value\" {...props} />\n}\n\nconst TRIGGER_BASE =\n  'relative flex items-center justify-between gap-1.5 rounded-md px-3 text-base whitespace-nowrap text-gray outline-hidden transition-colors select-none data-placeholder:text-gray-disabled disabled:cursor-not-allowed disabled:text-gray-disabled *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 motion-reduce:transition-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4'\n\n// box-chrome sizing only — a ghost/inset trigger sizes via boxChrome.ghost's\n// GHOST_UNDERLINE (h-10), matching Input's underline row exactly (no competing\n// height utility). `min-h-[2.75rem]` is a literal, non-knob-scaled WCAG 2.5.5\n// floor; `sm` stays visually compact but restores the floor via an invisible\n// `before:` hit overlay rather than growing the box, with `my-1` to keep that\n// overlay out of an ancestor scroller's overflow.\nconst TRIGGER_SIZE = {\n  default: 'h-11 min-h-[2.75rem]',\n  sm: \"my-1 h-9 before:absolute before:inset-x-0 before:top-1/2 before:min-h-[2.75rem] before:-translate-y-1/2 before:content-['']\",\n} as const\n\nfunction SelectTrigger({\n  className,\n  size = 'default',\n  variant,\n  id: idProp,\n  children,\n  'aria-describedby': ariaDescribedByProp,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {\n  size?: 'sm' | 'default'\n  // input-style override; falls back to Field / <Theme>, then soft (like Input)\n  variant?: SparkInputStyle\n}) {\n  const { field, id, ariaDescribedBy, ariaInvalid, inputStyle, inputColor } =\n    useFieldControl({\n      id: idProp,\n      ariaDescribedBy: ariaDescribedByProp,\n      variant,\n    })\n  // inside an inset field the shell is the box, so the trigger goes bare\n  // (underline row), matching Input's inset chrome; an explicit variant keeps\n  // the box even inside an inset field (mirrors Input)\n  const isGhost =\n    inputStyle === 'ghost' || (!variant && field?.labelPosition === 'inset')\n\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      id={id}\n      className={cn(\n        TRIGGER_BASE,\n        // fills the field shell like an Input; sizes to content when standalone\n        field ? 'w-full' : 'w-fit',\n        !isGhost && TRIGGER_SIZE[size],\n        boxChrome[isGhost ? 'ghost' : inputStyle][inputColor],\n        className,\n      )}\n      aria-invalid={ariaInvalid}\n      {...props}\n      aria-describedby={ariaDescribedBy}\n    >\n      {children}\n      <SelectPrimitive.Icon\n        render={\n          <MaterialSymbol\n            className=\"pointer-events-none text-[14px] text-gray-light\"\n            name=\"expand_more\"\n          />\n        }\n      />\n    </SelectPrimitive.Trigger>\n  )\n}\n\ntype SelectContentProps = React.ComponentProps<typeof SelectPrimitive.Popup> &\n  Pick<\n    SelectPrimitive.Positioner.Props,\n    'align' | 'alignOffset' | 'side' | 'sideOffset' | 'alignItemWithTrigger'\n  > &\n  Pick<SelectPrimitive.Portal.Props, 'container'>\n\nfunction SelectContent({\n  className,\n  children,\n  align = 'start',\n  alignOffset,\n  side,\n  sideOffset = 4,\n  // drop the menu below the trigger (left-aligned) like a conventional form\n  // dropdown; the native-<select>-style overlay (Base UI's inherited default)\n  // shifts the popup to align item text with trigger text, exposing a sliver of\n  // the trigger's fill at the edge. Opt back in per instance if you want it.\n  alignItemWithTrigger = false,\n  container,\n  ...props\n}: SelectContentProps) {\n  return (\n    <SelectPrimitive.Portal container={container}>\n      <SelectPrimitive.Positioner\n        align={align}\n        alignItemWithTrigger={alignItemWithTrigger}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <SelectPrimitive.Popup\n          data-slot=\"select-content\"\n          data-align-trigger={alignItemWithTrigger}\n          className={cn(\n            // match the trigger's width (never narrower) so the drop-below menu\n            // lines up under it; --anchor-width is the trigger width, floored at\n            // 9rem for very narrow triggers\n            'relative isolate z-50 max-h-(--available-height) min-w-[max(9rem,var(--anchor-width))] origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg border border-gray-a1 bg-gray-1 text-gray-a12 shadow-lg',\n            'transition-[opacity,scale,translate] duration-100 data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0 motion-reduce:transition-none',\n            'data-[side=bottom]:data-starting-style:-translate-y-2 data-[side=left]:data-starting-style:translate-x-2 data-[side=right]:data-starting-style:-translate-x-2 data-[side=top]:data-starting-style:translate-y-2',\n            'data-[align-trigger=true]:transition-none',\n            className,\n          )}\n          {...props}\n        >\n          <SelectScrollUpButton />\n          <SelectPrimitive.List>{children}</SelectPrimitive.List>\n          <SelectScrollDownButton />\n        </SelectPrimitive.Popup>\n      </SelectPrimitive.Positioner>\n    </SelectPrimitive.Portal>\n  )\n}\n\nfunction SelectLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.GroupLabel>) {\n  return (\n    <SelectPrimitive.GroupLabel\n      data-slot=\"select-label\"\n      className={cn('px-1.5 py-1 text-xs text-gray-light', className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Item>) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        'relative flex w-full cursor-default items-center gap-1.5 rounded-sm py-1.5 pr-8 pl-1.5 text-sm text-gray outline-hidden transition-colors select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-gray-a3 motion-reduce:transition-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2',\n        className,\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\">\n        <SelectPrimitive.ItemIndicator>\n          <MaterialSymbol className=\"text-[11px]\" name=\"check\" />\n        </SelectPrimitive.ItemIndicator>\n      </span>\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  )\n}\n\n// plain div, not Select.Separator: role=\"separator\" isn't a permitted child of a\n// listbox (aria-required-children), and the divider is decorative — the groups\n// carry the semantics. Hidden from assistive tech.\nfunction SelectSeparator({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      aria-hidden=\"true\"\n      data-slot=\"select-separator\"\n      className={cn(\n        'pointer-events-none -mx-1 my-1 h-px bg-gray-a3',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>) {\n  return (\n    <SelectPrimitive.ScrollUpArrow\n      data-slot=\"select-scroll-up-button\"\n      className={cn(\n        'top-0 z-10 flex w-full cursor-default items-center justify-center bg-gray-1 py-1 [&_svg:not([class*=size-])]:size-4',\n        className,\n      )}\n      {...props}\n    >\n      <MaterialSymbol className=\"rotate-180 text-[14px]\" name=\"expand_more\" />\n    </SelectPrimitive.ScrollUpArrow>\n  )\n}\n\nfunction SelectScrollDownButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>) {\n  return (\n    <SelectPrimitive.ScrollDownArrow\n      data-slot=\"select-scroll-down-button\"\n      className={cn(\n        'bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-gray-1 py-1 [&_svg:not([class*=size-])]:size-4',\n        className,\n      )}\n      {...props}\n    >\n      <MaterialSymbol className=\"text-[14px]\" name=\"expand_more\" />\n    </SelectPrimitive.ScrollDownArrow>\n  )\n}\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n}\n"],"mappings":"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"}
+{"version":3,"file":"select.js","names":["SelectPrimitive"],"sources":["../../src/components/select.tsx"],"sourcesContent":["'use client'\n\nimport { Select as SelectPrimitive } from '@base-ui/react/select'\nimport { Check, KeyboardArrowDown } from '@epilot/spark-icons'\nimport * as React from 'react'\nimport { boxChrome } from '../lib/input-box-variants'\nimport type { SparkInputStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\nimport { useFieldControl } from './field'\n\n// bare re-export: Root renders no element and its props are generic over Value\nconst Select = SelectPrimitive.Root\n\nfunction SelectGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Group>) {\n  return (\n    <SelectPrimitive.Group\n      data-slot=\"select-group\"\n      className={cn('scroll-my-1 p-1', className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectValue({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Value>) {\n  return <SelectPrimitive.Value data-slot=\"select-value\" {...props} />\n}\n\nconst TRIGGER_BASE =\n  'relative flex items-center justify-between gap-1.5 rounded-md px-3 text-base whitespace-nowrap text-gray outline-hidden transition-colors select-none data-placeholder:text-gray-disabled disabled:cursor-not-allowed disabled:text-gray-disabled *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 motion-reduce:transition-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4'\n\n// box-chrome sizing only — a ghost/inset trigger sizes via boxChrome.ghost's\n// GHOST_UNDERLINE (h-10), matching Input's underline row exactly (no competing\n// height utility). `min-h-[2.75rem]` is a literal, non-knob-scaled WCAG 2.5.5\n// floor; `sm` stays visually compact but restores the floor via an invisible\n// `before:` hit overlay rather than growing the box, with `my-1` to keep that\n// overlay out of an ancestor scroller's overflow.\nconst TRIGGER_SIZE = {\n  default: 'h-11 min-h-[2.75rem]',\n  sm: \"my-1 h-9 before:absolute before:inset-x-0 before:top-1/2 before:min-h-[2.75rem] before:-translate-y-1/2 before:content-['']\",\n} as const\n\nfunction SelectTrigger({\n  className,\n  size = 'default',\n  variant,\n  id: idProp,\n  children,\n  'aria-describedby': ariaDescribedByProp,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {\n  size?: 'sm' | 'default'\n  // input-style override; falls back to Field / <Theme>, then soft (like Input)\n  variant?: SparkInputStyle\n}) {\n  const { field, id, ariaDescribedBy, ariaInvalid, inputStyle, inputColor } =\n    useFieldControl({\n      id: idProp,\n      ariaDescribedBy: ariaDescribedByProp,\n      variant,\n    })\n  // inside an inset field the shell is the box, so the trigger goes bare\n  // (underline row), matching Input's inset chrome; an explicit variant keeps\n  // the box even inside an inset field (mirrors Input)\n  const isGhost =\n    inputStyle === 'ghost' || (!variant && field?.labelPosition === 'inset')\n\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      id={id}\n      className={cn(\n        TRIGGER_BASE,\n        // fills the field shell like an Input; sizes to content when standalone\n        field ? 'w-full' : 'w-fit',\n        !isGhost && TRIGGER_SIZE[size],\n        boxChrome[isGhost ? 'ghost' : inputStyle][inputColor],\n        className,\n      )}\n      aria-invalid={ariaInvalid}\n      {...props}\n      aria-describedby={ariaDescribedBy}\n    >\n      {children}\n      <SelectPrimitive.Icon\n        render={\n          <KeyboardArrowDown className=\"pointer-events-none text-gray-light [--spark-icon-size:14px]\" />\n        }\n      />\n    </SelectPrimitive.Trigger>\n  )\n}\n\ntype SelectContentProps = React.ComponentProps<typeof SelectPrimitive.Popup> &\n  Pick<\n    SelectPrimitive.Positioner.Props,\n    'align' | 'alignOffset' | 'side' | 'sideOffset' | 'alignItemWithTrigger'\n  > &\n  Pick<SelectPrimitive.Portal.Props, 'container'>\n\nfunction SelectContent({\n  className,\n  children,\n  align = 'start',\n  alignOffset,\n  side,\n  sideOffset = 4,\n  // drop the menu below the trigger (left-aligned) like a conventional form\n  // dropdown; the native-<select>-style overlay (Base UI's inherited default)\n  // shifts the popup to align item text with trigger text, exposing a sliver of\n  // the trigger's fill at the edge. Opt back in per instance if you want it.\n  alignItemWithTrigger = false,\n  container,\n  ...props\n}: SelectContentProps) {\n  return (\n    <SelectPrimitive.Portal container={container}>\n      <SelectPrimitive.Positioner\n        align={align}\n        alignItemWithTrigger={alignItemWithTrigger}\n        alignOffset={alignOffset}\n        side={side}\n        sideOffset={sideOffset}\n      >\n        <SelectPrimitive.Popup\n          data-slot=\"select-content\"\n          data-align-trigger={alignItemWithTrigger}\n          className={cn(\n            // match the trigger's width (never narrower) so the drop-below menu\n            // lines up under it; --anchor-width is the trigger width, floored at\n            // 9rem for very narrow triggers\n            'relative isolate z-50 max-h-(--available-height) min-w-[max(9rem,var(--anchor-width))] origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg border border-gray-a1 bg-gray-1 text-gray-a12 shadow-lg',\n            'transition-[opacity,scale,translate] duration-100 data-ending-style:scale-95 data-ending-style:opacity-0 data-starting-style:scale-95 data-starting-style:opacity-0 motion-reduce:transition-none',\n            'data-[side=bottom]:data-starting-style:-translate-y-2 data-[side=left]:data-starting-style:translate-x-2 data-[side=right]:data-starting-style:-translate-x-2 data-[side=top]:data-starting-style:translate-y-2',\n            'data-[align-trigger=true]:transition-none',\n            className,\n          )}\n          {...props}\n        >\n          <SelectScrollUpButton />\n          <SelectPrimitive.List>{children}</SelectPrimitive.List>\n          <SelectScrollDownButton />\n        </SelectPrimitive.Popup>\n      </SelectPrimitive.Positioner>\n    </SelectPrimitive.Portal>\n  )\n}\n\nfunction SelectLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.GroupLabel>) {\n  return (\n    <SelectPrimitive.GroupLabel\n      data-slot=\"select-label\"\n      className={cn('px-1.5 py-1 text-xs text-gray-light', className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Item>) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        'relative flex w-full cursor-default items-center gap-1.5 rounded-sm py-1.5 pr-8 pl-1.5 text-sm text-gray outline-hidden transition-colors select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-highlighted:bg-gray-a3 motion-reduce:transition-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2',\n        className,\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\">\n        <SelectPrimitive.ItemIndicator>\n          <Check className=\"[--spark-icon-size:11px]\" />\n        </SelectPrimitive.ItemIndicator>\n      </span>\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  )\n}\n\n// plain div, not Select.Separator: role=\"separator\" isn't a permitted child of a\n// listbox (aria-required-children), and the divider is decorative — the groups\n// carry the semantics. Hidden from assistive tech.\nfunction SelectSeparator({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      aria-hidden=\"true\"\n      data-slot=\"select-separator\"\n      className={cn(\n        'pointer-events-none -mx-1 my-1 h-px bg-gray-a3',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>) {\n  return (\n    <SelectPrimitive.ScrollUpArrow\n      data-slot=\"select-scroll-up-button\"\n      className={cn(\n        'top-0 z-10 flex w-full cursor-default items-center justify-center bg-gray-1 py-1 [&_svg:not([class*=size-])]:size-4',\n        className,\n      )}\n      {...props}\n    >\n      <KeyboardArrowDown className=\"rotate-180 [--spark-icon-size:14px]\" />\n    </SelectPrimitive.ScrollUpArrow>\n  )\n}\n\nfunction SelectScrollDownButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>) {\n  return (\n    <SelectPrimitive.ScrollDownArrow\n      data-slot=\"select-scroll-down-button\"\n      className={cn(\n        'bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-gray-1 py-1 [&_svg:not([class*=size-])]:size-4',\n        className,\n      )}\n      {...props}\n    >\n      <KeyboardArrowDown className=\"[--spark-icon-size:14px]\" />\n    </SelectPrimitive.ScrollDownArrow>\n  )\n}\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n}\n"],"mappings":"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"}

package/dist/components/sheet.cjs

@@ -1,10 +1,10 @@
 "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");
 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_dialog = require("@base-ui/react/dialog");
 let cnfast = require("cnfast");
@@ -32,10 +32,7 @@ function SheetClose({ className, children, ...props }) {
 			variant: "tertiary"
 		}), "absolute top-2.5 right-3 rounded-full", className),
 		...props,
-		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons_material_symbol.MaterialSymbol, {
-			className: "[--spark-icon-size:calc(20px*var(--spark-scaling,1))]",
-			name: "close"
-		})
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_epilot_spark_icons.Close, { className: "[--spark-icon-size:calc(20px*var(--spark-scaling,1))]" })
 	});
 }
 function SheetPortal(props) {

package/dist/components/sheet.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"sheet.cjs","names":["SheetPrimitive","buttonVariants","MaterialSymbol"],"sources":["../../src/components/sheet.tsx"],"sourcesContent":["import { Dialog as SheetPrimitive } from '@base-ui/react/dialog'\nimport * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\nimport { buttonVariants } from './button'\n\nfunction Sheet(props: React.ComponentProps<typeof SheetPrimitive.Root>) {\n  return <SheetPrimitive.Root {...props} />\n}\n\nfunction SheetTrigger(\n  props: React.ComponentProps<typeof SheetPrimitive.Trigger>,\n) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />\n}\n\n// bare = the ready-made corner X (label is the consumer's, via aria-label);\n// with children or a render prop it stays the bare primitive (footer buttons, labeled closes)\nfunction SheetClose({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Close>) {\n  if (children || props.render) {\n    return (\n      <SheetPrimitive.Close\n        data-slot=\"sheet-close\"\n        className={className}\n        {...props}\n      >\n        {children}\n      </SheetPrimitive.Close>\n    )\n  }\n\n  return (\n    <SheetPrimitive.Close\n      data-slot=\"sheet-close\"\n      className={cn(\n        buttonVariants({ size: 'icon', variant: 'tertiary' }),\n        'absolute top-2.5 right-3 rounded-full',\n        className,\n      )}\n      {...props}\n    >\n      <MaterialSymbol\n        className=\"[--spark-icon-size:calc(20px*var(--spark-scaling,1))]\"\n        name=\"close\"\n      />\n    </SheetPrimitive.Close>\n  )\n}\n\nfunction SheetPortal(\n  props: React.ComponentProps<typeof SheetPrimitive.Portal>,\n) {\n  return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />\n}\n\nfunction SheetOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Backdrop>) {\n  return (\n    <SheetPrimitive.Backdrop\n      data-slot=\"sheet-overlay\"\n      className={cn(\n        'fixed top-(--spark-viewport-top,0) right-0 left-0 z-50 h-(--spark-viewport-height,100%) bg-(--color-overlay) transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 motion-reduce:transition-none',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\ninterface SheetContentProps extends React.ComponentProps<\n  typeof SheetPrimitive.Popup\n> {\n  side?: 'top' | 'right' | 'bottom' | 'left'\n}\n\nfunction SheetContent({\n  side = 'right',\n  className,\n  ...props\n}: SheetContentProps) {\n  return (\n    <SheetPrimitive.Popup\n      data-slot=\"sheet-content\"\n      data-side={side}\n      className={cn(\n        'fixed z-50 flex flex-col gap-4 border-gray-a1 bg-gray-1 p-safe-offset-4 text-gray shadow-lg transition-[translate] duration-200 ease-in-out data-ending-style:duration-300 motion-reduce:transition-none',\n        'data-[side=top]:inset-x-0 data-[side=top]:top-(--spark-viewport-top,0) data-[side=top]:border-b data-[side=top]:data-ending-style:-translate-y-full data-[side=top]:data-starting-style:-translate-y-full',\n        'data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-(--spark-viewport-bottom-offset,0) data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-full data-[side=bottom]:data-starting-style:translate-y-full',\n        'data-[side=left]:top-(--spark-viewport-top,0) data-[side=left]:left-0 data-[side=left]:h-(--spark-viewport-height,100%) data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:-translate-x-full data-[side=left]:data-starting-style:-translate-x-full data-[side=left]:sm:max-w-sm',\n        'data-[side=right]:top-(--spark-viewport-top,0) data-[side=right]:right-0 data-[side=right]:h-(--spark-viewport-height,100%) data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-full data-[side=right]:data-starting-style:translate-x-full data-[side=right]:sm:max-w-sm',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn(\n        'mt-auto flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SheetTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Title>) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      className={cn('text-lg font-semibold text-gray', className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Description>) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn('text-sm text-gray-light', className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetOverlay,\n  SheetPortal,\n  SheetTitle,\n  SheetTrigger,\n}\nexport type { SheetContentProps }\n"],"mappings":";;;;;;;;;;;AAMA,SAAS,MAAM,OAAyD;CACtE,OAAO,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAe,MAAhB,EAAqB,GAAI,MAAQ,CAAA;AAC1C;AAEA,SAAS,aACP,OACA;CACA,OAAO,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAe,SAAhB;EAAwB,aAAU;EAAgB,GAAI;CAAQ,CAAA;AACvE;AAIA,SAAS,WAAW,EAClB,WACA,UACA,GAAG,SACiD;CACpD,IAAI,YAAY,MAAM,QACpB,OACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAe,OAAhB;EACE,aAAU;EACC;EACX,GAAI;EAEH;CACmB,CAAA;CAI1B,OACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAe,OAAhB;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IACEC,0BAAAA,eAAe;GAAE,MAAM;GAAQ,SAAS;EAAW,CAAC,GACpD,yCACA,SACF;EACA,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,gBAAD;GACE,WAAU;GACV,MAAK;EACN,CAAA;CACmB,CAAA;AAE1B;AAEA,SAAS,YACP,OACA;CACA,OAAO,iBAAA,GAAA,kBAAA,KAACF,sBAAAA,OAAe,QAAhB;EAAuB,aAAU;EAAe,GAAI;CAAQ,CAAA;AACrE;AAEA,SAAS,aAAa,EACpB,WACA,GAAG,SACoD;CACvD,OACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAe,UAAhB;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IACE,wOACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAQA,SAAS,aAAa,EACpB,OAAO,SACP,WACA,GAAG,SACiB;CACpB,OACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAe,OAAhB;EACE,aAAU;EACV,aAAW;EACX,YAAA,GAAA,OAAA,IACE,4MACA,6MACA,uOACA,qTACA,4TACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IAAc,gDAAgD,SAAS;EACvE,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IACE,kEACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,WAAW,EAClB,WACA,GAAG,SACiD;CACpD,OACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAe,OAAhB;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IAAc,mCAAmC,SAAS;EAC1D,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,iBAAiB,EACxB,WACA,GAAG,SACuD;CAC1D,OACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAe,aAAhB;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IAAc,2BAA2B,SAAS;EAClD,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"sheet.cjs","names":["SheetPrimitive","buttonVariants","Close"],"sources":["../../src/components/sheet.tsx"],"sourcesContent":["import { Dialog as SheetPrimitive } from '@base-ui/react/dialog'\nimport { Close } from '@epilot/spark-icons'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\nimport { buttonVariants } from './button'\n\nfunction Sheet(props: React.ComponentProps<typeof SheetPrimitive.Root>) {\n  return <SheetPrimitive.Root {...props} />\n}\n\nfunction SheetTrigger(\n  props: React.ComponentProps<typeof SheetPrimitive.Trigger>,\n) {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />\n}\n\n// bare = the ready-made corner X (label is the consumer's, via aria-label);\n// with children or a render prop it stays the bare primitive (footer buttons, labeled closes)\nfunction SheetClose({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Close>) {\n  if (children || props.render) {\n    return (\n      <SheetPrimitive.Close\n        data-slot=\"sheet-close\"\n        className={className}\n        {...props}\n      >\n        {children}\n      </SheetPrimitive.Close>\n    )\n  }\n\n  return (\n    <SheetPrimitive.Close\n      data-slot=\"sheet-close\"\n      className={cn(\n        buttonVariants({ size: 'icon', variant: 'tertiary' }),\n        'absolute top-2.5 right-3 rounded-full',\n        className,\n      )}\n      {...props}\n    >\n      <Close className=\"[--spark-icon-size:calc(20px*var(--spark-scaling,1))]\" />\n    </SheetPrimitive.Close>\n  )\n}\n\nfunction SheetPortal(\n  props: React.ComponentProps<typeof SheetPrimitive.Portal>,\n) {\n  return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />\n}\n\nfunction SheetOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Backdrop>) {\n  return (\n    <SheetPrimitive.Backdrop\n      data-slot=\"sheet-overlay\"\n      className={cn(\n        'fixed top-(--spark-viewport-top,0) right-0 left-0 z-50 h-(--spark-viewport-height,100%) bg-(--color-overlay) transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 motion-reduce:transition-none',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\ninterface SheetContentProps extends React.ComponentProps<\n  typeof SheetPrimitive.Popup\n> {\n  side?: 'top' | 'right' | 'bottom' | 'left'\n}\n\nfunction SheetContent({\n  side = 'right',\n  className,\n  ...props\n}: SheetContentProps) {\n  return (\n    <SheetPrimitive.Popup\n      data-slot=\"sheet-content\"\n      data-side={side}\n      className={cn(\n        'fixed z-50 flex flex-col gap-4 border-gray-a1 bg-gray-1 p-safe-offset-4 text-gray shadow-lg transition-[translate] duration-200 ease-in-out data-ending-style:duration-300 motion-reduce:transition-none',\n        'data-[side=top]:inset-x-0 data-[side=top]:top-(--spark-viewport-top,0) data-[side=top]:border-b data-[side=top]:data-ending-style:-translate-y-full data-[side=top]:data-starting-style:-translate-y-full',\n        'data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-(--spark-viewport-bottom-offset,0) data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-full data-[side=bottom]:data-starting-style:translate-y-full',\n        'data-[side=left]:top-(--spark-viewport-top,0) data-[side=left]:left-0 data-[side=left]:h-(--spark-viewport-height,100%) data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:-translate-x-full data-[side=left]:data-starting-style:-translate-x-full data-[side=left]:sm:max-w-sm',\n        'data-[side=right]:top-(--spark-viewport-top,0) data-[side=right]:right-0 data-[side=right]:h-(--spark-viewport-height,100%) data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-full data-[side=right]:data-starting-style:translate-x-full data-[side=right]:sm:max-w-sm',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"sheet-header\"\n      className={cn('flex flex-col gap-2 text-center sm:text-left', className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"sheet-footer\"\n      className={cn(\n        'mt-auto flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction SheetTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Title>) {\n  return (\n    <SheetPrimitive.Title\n      data-slot=\"sheet-title\"\n      className={cn('text-lg font-semibold text-gray', className)}\n      {...props}\n    />\n  )\n}\n\nfunction SheetDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof SheetPrimitive.Description>) {\n  return (\n    <SheetPrimitive.Description\n      data-slot=\"sheet-description\"\n      className={cn('text-sm text-gray-light', className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Sheet,\n  SheetClose,\n  SheetContent,\n  SheetDescription,\n  SheetFooter,\n  SheetHeader,\n  SheetOverlay,\n  SheetPortal,\n  SheetTitle,\n  SheetTrigger,\n}\nexport type { SheetContentProps }\n"],"mappings":";;;;;;;;;;;AAMA,SAAS,MAAM,OAAyD;CACtE,OAAO,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAe,MAAhB,EAAqB,GAAI,MAAQ,CAAA;AAC1C;AAEA,SAAS,aACP,OACA;CACA,OAAO,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAe,SAAhB;EAAwB,aAAU;EAAgB,GAAI;CAAQ,CAAA;AACvE;AAIA,SAAS,WAAW,EAClB,WACA,UACA,GAAG,SACiD;CACpD,IAAI,YAAY,MAAM,QACpB,OACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAe,OAAhB;EACE,aAAU;EACC;EACX,GAAI;EAEH;CACmB,CAAA;CAI1B,OACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAe,OAAhB;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IACEC,0BAAAA,eAAe;GAAE,MAAM;GAAQ,SAAS;EAAW,CAAC,GACpD,yCACA,SACF;EACA,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAACC,oBAAAA,OAAD,EAAO,WAAU,wDAAyD,CAAA;CACtD,CAAA;AAE1B;AAEA,SAAS,YACP,OACA;CACA,OAAO,iBAAA,GAAA,kBAAA,KAACF,sBAAAA,OAAe,QAAhB;EAAuB,aAAU;EAAe,GAAI;CAAQ,CAAA;AACrE;AAEA,SAAS,aAAa,EACpB,WACA,GAAG,SACoD;CACvD,OACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAe,UAAhB;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IACE,wOACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAQA,SAAS,aAAa,EACpB,OAAO,SACP,WACA,GAAG,SACiB;CACpB,OACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAe,OAAhB;EACE,aAAU;EACV,aAAW;EACX,YAAA,GAAA,OAAA,IACE,4MACA,6MACA,uOACA,qTACA,4TACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IAAc,gDAAgD,SAAS;EACvE,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IACE,kEACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,WAAW,EAClB,WACA,GAAG,SACiD;CACpD,OACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAe,OAAhB;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IAAc,mCAAmC,SAAS;EAC1D,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,iBAAiB,EACxB,WACA,GAAG,SACuD;CAC1D,OACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAe,aAAhB;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IAAc,2BAA2B,SAAS;EAClD,GAAI;CACL,CAAA;AAEL"}

package/dist/components/sheet.js

@@ -1,8 +1,8 @@
 "use client";
 import { cn } from "../utils/cn.js";
-import { MaterialSymbol } from "../icons/material-symbol.js";
 import { buttonVariants } from "./button.js";
 import "react";
+import { Close } from "@epilot/spark-icons";
 import { jsx } from "react/jsx-runtime";
 import { Dialog } from "@base-ui/react/dialog";
 //#region src/components/sheet.tsx
@@ -29,10 +29,7 @@ function SheetClose({ className, children, ...props }) {
 			variant: "tertiary"
 		}), "absolute top-2.5 right-3 rounded-full", className),
 		...props,
-		children: /* @__PURE__ */ jsx(MaterialSymbol, {
-			className: "[--spark-icon-size:calc(20px*var(--spark-scaling,1))]",
-			name: "close"
-		})
+		children: /* @__PURE__ */ jsx(Close, { className: "[--spark-icon-size:calc(20px*var(--spark-scaling,1))]" })
 	});
 }
 function SheetPortal(props) {