@epilot/spark-ui 0.16.0 → 0.16.1

package/dist/components/accordion.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");
-let _base_ui_react_accordion = require("@base-ui/react/accordion");
 let react = require("react");
 react = require_chunk.__toESM(react);
+let _base_ui_react_accordion = require("@base-ui/react/accordion");
+let _epilot_spark_icons = require("@epilot/spark-icons");
 let react_jsx_runtime = require("react/jsx-runtime");
 let cnfast = require("cnfast");
 //#region src/components/accordion.tsx
@@ -30,10 +30,7 @@ function AccordionTrigger({ className, children, ...props }) {
 			"data-slot": "accordion-trigger",
 			className: (0, cnfast.cn)("flex min-h-[2.75rem] flex-1 cursor-pointer items-center justify-between gap-4 py-3 text-left font-medium text-gray-12", "rounded-[inherit] focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden", "disabled:pointer-events-none disabled:opacity-50", "group-data-[variant=outline]/accordion:px-4 group-data-[variant=soft]/accordion:px-4 group-data-[variant=surface]/accordion:px-4", "[&[data-panel-open]>:last-child]:rotate-180", className),
 			...props,
-			children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons_material_symbol.MaterialSymbol, {
-				className: "shrink-0 text-gray-11 transition-transform duration-200 motion-reduce:transition-none",
-				name: "expand_more"
-			})]
+			children: [children, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_epilot_spark_icons.KeyboardArrowDown, { className: "shrink-0 text-gray-11 transition-transform duration-200 motion-reduce:transition-none" })]
 		})
 	});
 }

package/dist/components/accordion.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.cjs","names":["AccordionPrimitive","MaterialSymbol"],"sources":["../../src/components/accordion.tsx"],"sourcesContent":["import { Accordion as AccordionPrimitive } from '@base-ui/react/accordion'\nimport * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\n\ntype AccordionVariant = 'ghost' | 'soft' | 'surface' | 'outline'\n\ntype AccordionProps = React.ComponentProps<typeof AccordionPrimitive.Root> & {\n  /**\n   * Container chrome (neutral):\n   * - `ghost` — no border/fill, just the trigger + spacing;\n   * - `soft` (default) — separate soft-tinted rounded cards, 2px gap between them;\n   * - `surface` — items glued into one bordered panel with an opaque fill;\n   * - `outline` — the same glued bordered panel, but no fill (transparent).\n   * A `variant` prop, NOT the ambient `data-style` knob — that would cascade into\n   * the panel content. Spacing + scaling still come from the ambient knobs.\n   */\n  variant?: AccordionVariant\n}\n\nfunction Accordion({ className, variant = 'soft', ...props }: AccordionProps) {\n  return (\n    <AccordionPrimitive.Root\n      data-slot=\"accordion\"\n      // group/accordion + data-variant drive every item/trigger's per-variant\n      // chrome; soft stacks its separate cards with a gap (below).\n      data-variant={variant}\n      className={cn(\n        'group/accordion',\n        // soft = separate cards → stack them with a small (2px) gap. surface/outline\n        // glue their items into one bordered panel (default block, no gap).\n        'data-[variant=soft]:flex data-[variant=soft]:flex-col data-[variant=soft]:gap-[calc(var(--spark-layout-gap)*0.5)]',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\ntype AccordionItemProps = React.ComponentProps<typeof AccordionPrimitive.Item>\n\nfunction AccordionItem({ className, ...props }: AccordionItemProps) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      className={cn(\n        // NEUTRAL container chrome per the accordion variant (group/accordion) — mirrors\n        // ListItem's group-data-[variant=X]/list: block (list.tsx); keep both in sync if\n        // this pattern changes. ghost carries no chrome. Radius = rounded-lg (tracks the\n        // radius knob but never goes fully round). No text underline / per-item separator\n        // anymore.\n\n        // soft (default): each item is its own borderless soft-tinted rounded card;\n        // the root separates them with a 2px gap (the gap IS the separator).\n        'group-data-[variant=soft]/accordion:rounded-lg group-data-[variant=soft]/accordion:bg-gray-a2 dark:group-data-[variant=soft]/accordion:bg-gray-a3',\n        // surface + outline share ONE glued-panel frame: full thin border around the\n        // stack (sides on all, top on each as divider/frame, bottom on the last),\n        // first/last round the outer corners. surface fills it (opaque bg); outline\n        // leaves it transparent.\n        'group-data-[variant=surface]/accordion:bg-gray-2',\n        'group-data-[variant=surface]/accordion:border-x group-data-[variant=surface]/accordion:border-t group-data-[variant=surface]/accordion:border-gray-a6 group-data-[variant=surface]/accordion:first:rounded-t-lg group-data-[variant=surface]/accordion:last:rounded-b-lg group-data-[variant=surface]/accordion:last:border-b',\n        'group-data-[variant=outline]/accordion:border-x group-data-[variant=outline]/accordion:border-t group-data-[variant=outline]/accordion:border-gray-a6 group-data-[variant=outline]/accordion:first:rounded-t-lg group-data-[variant=outline]/accordion:last:rounded-b-lg group-data-[variant=outline]/accordion:last:border-b',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\ntype AccordionTriggerProps = React.ComponentProps<\n  typeof AccordionPrimitive.Trigger\n>\n\nfunction AccordionTrigger({\n  className,\n  children,\n  ...props\n}: AccordionTriggerProps) {\n  return (\n    <AccordionPrimitive.Header className=\"flex rounded-[inherit]\">\n      <AccordionPrimitive.Trigger\n        data-slot=\"accordion-trigger\"\n        className={cn(\n          // WCAG 2.5.5: min 44px touch target — a HARD floor (min-h-[2.75rem], not\n          // min-h-11, which scales below 44px under dense/scaled knobs). py/text still\n          // scale with the spacing + scaling knobs, growing the target past 44px.\n          // No text underline (was hover:underline).\n          'flex min-h-[2.75rem] flex-1 cursor-pointer items-center justify-between gap-4 py-3 text-left font-medium text-gray-12',\n          // focus ring: rounded-[inherit] (relayed through Header, above) so it matches\n          // the item's own corner — sits flush against it with zero inset, same idiom as\n          // ListItem's full-bleed row (list.tsx).\n          'rounded-[inherit] focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n          'disabled:pointer-events-none disabled:opacity-50',\n          // horizontal padding sits INSIDE the chrome (soft/surface/outline); ghost\n          // keeps the label flush (\"just plain text and spacing\").\n          'group-data-[variant=outline]/accordion:px-4 group-data-[variant=soft]/accordion:px-4 group-data-[variant=surface]/accordion:px-4',\n          // chevron (last child) flips when open\n          '[&[data-panel-open]>:last-child]:rotate-180',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        <MaterialSymbol\n          className=\"shrink-0 text-gray-11 transition-transform duration-200 motion-reduce:transition-none\"\n          name=\"expand_more\"\n        />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n}\n\ntype AccordionContentProps = React.ComponentProps<\n  typeof AccordionPrimitive.Panel\n>\n\nfunction AccordionContent({\n  className,\n  children,\n  ...props\n}: AccordionContentProps) {\n  return (\n    <AccordionPrimitive.Panel\n      data-slot=\"accordion-content\"\n      // Base UI sets --accordion-panel-height + starting/ending styles on the\n      // panel; the height transition replaces the radix keyframe animation.\n      className=\"h-(--accordion-panel-height) overflow-hidden text-sm text-gray-11 transition-[height] duration-200 ease-out data-ending-style:h-0 data-starting-style:h-0 motion-reduce:transition-none\"\n      {...props}\n    >\n      {/* padding aligns with the trigger: flush for ghost, inside the chrome otherwise */}\n      <div\n        className={cn(\n          'pb-4 group-data-[variant=outline]/accordion:px-4 group-data-[variant=soft]/accordion:px-4 group-data-[variant=surface]/accordion:px-4',\n          className,\n        )}\n      >\n        {children}\n      </div>\n    </AccordionPrimitive.Panel>\n  )\n}\n\nexport { Accordion, AccordionContent, AccordionItem, AccordionTrigger }\nexport type { AccordionProps, AccordionVariant }\n"],"mappings":";;;;;;;;;;AAoBA,SAAS,UAAU,EAAE,WAAW,UAAU,QAAQ,GAAG,SAAyB;CAC5E,OACE,iBAAA,GAAA,kBAAA,KAACA,yBAAAA,UAAmB,MAApB;EACE,aAAU;EAGV,gBAAc;EACd,YAAA,GAAA,OAAA,IACE,mBAGA,qHACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAIA,SAAS,cAAc,EAAE,WAAW,GAAG,SAA6B;CAClE,OACE,iBAAA,GAAA,kBAAA,KAACA,yBAAAA,UAAmB,MAApB;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IASE,qJAKA,oDACA,iUACA,iUACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAMA,SAAS,iBAAiB,EACxB,WACA,UACA,GAAG,SACqB;CACxB,OACE,iBAAA,GAAA,kBAAA,KAACA,yBAAAA,UAAmB,QAApB;EAA2B,WAAU;YACnC,iBAAA,GAAA,kBAAA,MAACA,yBAAAA,UAAmB,SAApB;GACE,aAAU;GACV,YAAA,GAAA,OAAA,IAKE,yHAIA,mGACA,oDAGA,oIAEA,+CACA,SACF;GACA,GAAI;aApBN,CAsBG,UACD,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,gBAAD;IACE,WAAU;IACV,MAAK;GACN,CAAA,CACyB;;CACH,CAAA;AAE/B;AAMA,SAAS,iBAAiB,EACxB,WACA,UACA,GAAG,SACqB;CACxB,OACE,iBAAA,GAAA,kBAAA,KAACD,yBAAAA,UAAmB,OAApB;EACE,aAAU;EAGV,WAAU;EACV,GAAI;YAGJ,iBAAA,GAAA,kBAAA,KAAC,OAAD;GACE,YAAA,GAAA,OAAA,IACE,yIACA,SACF;GAEC;EACE,CAAA;CACmB,CAAA;AAE9B"}
+{"version":3,"file":"accordion.cjs","names":["AccordionPrimitive","KeyboardArrowDown"],"sources":["../../src/components/accordion.tsx"],"sourcesContent":["import { Accordion as AccordionPrimitive } from '@base-ui/react/accordion'\nimport { KeyboardArrowDown } from '@epilot/spark-icons'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\n\ntype AccordionVariant = 'ghost' | 'soft' | 'surface' | 'outline'\n\ntype AccordionProps = React.ComponentProps<typeof AccordionPrimitive.Root> & {\n  /**\n   * Container chrome (neutral):\n   * - `ghost` — no border/fill, just the trigger + spacing;\n   * - `soft` (default) — separate soft-tinted rounded cards, 2px gap between them;\n   * - `surface` — items glued into one bordered panel with an opaque fill;\n   * - `outline` — the same glued bordered panel, but no fill (transparent).\n   * A `variant` prop, NOT the ambient `data-style` knob — that would cascade into\n   * the panel content. Spacing + scaling still come from the ambient knobs.\n   */\n  variant?: AccordionVariant\n}\n\nfunction Accordion({ className, variant = 'soft', ...props }: AccordionProps) {\n  return (\n    <AccordionPrimitive.Root\n      data-slot=\"accordion\"\n      // group/accordion + data-variant drive every item/trigger's per-variant\n      // chrome; soft stacks its separate cards with a gap (below).\n      data-variant={variant}\n      className={cn(\n        'group/accordion',\n        // soft = separate cards → stack them with a small (2px) gap. surface/outline\n        // glue their items into one bordered panel (default block, no gap).\n        'data-[variant=soft]:flex data-[variant=soft]:flex-col data-[variant=soft]:gap-[calc(var(--spark-layout-gap)*0.5)]',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\ntype AccordionItemProps = React.ComponentProps<typeof AccordionPrimitive.Item>\n\nfunction AccordionItem({ className, ...props }: AccordionItemProps) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      className={cn(\n        // NEUTRAL container chrome per the accordion variant (group/accordion) — mirrors\n        // ListItem's group-data-[variant=X]/list: block (list.tsx); keep both in sync if\n        // this pattern changes. ghost carries no chrome. Radius = rounded-lg (tracks the\n        // radius knob but never goes fully round). No text underline / per-item separator\n        // anymore.\n\n        // soft (default): each item is its own borderless soft-tinted rounded card;\n        // the root separates them with a 2px gap (the gap IS the separator).\n        'group-data-[variant=soft]/accordion:rounded-lg group-data-[variant=soft]/accordion:bg-gray-a2 dark:group-data-[variant=soft]/accordion:bg-gray-a3',\n        // surface + outline share ONE glued-panel frame: full thin border around the\n        // stack (sides on all, top on each as divider/frame, bottom on the last),\n        // first/last round the outer corners. surface fills it (opaque bg); outline\n        // leaves it transparent.\n        'group-data-[variant=surface]/accordion:bg-gray-2',\n        'group-data-[variant=surface]/accordion:border-x group-data-[variant=surface]/accordion:border-t group-data-[variant=surface]/accordion:border-gray-a6 group-data-[variant=surface]/accordion:first:rounded-t-lg group-data-[variant=surface]/accordion:last:rounded-b-lg group-data-[variant=surface]/accordion:last:border-b',\n        'group-data-[variant=outline]/accordion:border-x group-data-[variant=outline]/accordion:border-t group-data-[variant=outline]/accordion:border-gray-a6 group-data-[variant=outline]/accordion:first:rounded-t-lg group-data-[variant=outline]/accordion:last:rounded-b-lg group-data-[variant=outline]/accordion:last:border-b',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\ntype AccordionTriggerProps = React.ComponentProps<\n  typeof AccordionPrimitive.Trigger\n>\n\nfunction AccordionTrigger({\n  className,\n  children,\n  ...props\n}: AccordionTriggerProps) {\n  return (\n    <AccordionPrimitive.Header className=\"flex rounded-[inherit]\">\n      <AccordionPrimitive.Trigger\n        data-slot=\"accordion-trigger\"\n        className={cn(\n          // WCAG 2.5.5: min 44px touch target — a HARD floor (min-h-[2.75rem], not\n          // min-h-11, which scales below 44px under dense/scaled knobs). py/text still\n          // scale with the spacing + scaling knobs, growing the target past 44px.\n          // No text underline (was hover:underline).\n          'flex min-h-[2.75rem] flex-1 cursor-pointer items-center justify-between gap-4 py-3 text-left font-medium text-gray-12',\n          // focus ring: rounded-[inherit] (relayed through Header, above) so it matches\n          // the item's own corner — sits flush against it with zero inset, same idiom as\n          // ListItem's full-bleed row (list.tsx).\n          'rounded-[inherit] focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n          'disabled:pointer-events-none disabled:opacity-50',\n          // horizontal padding sits INSIDE the chrome (soft/surface/outline); ghost\n          // keeps the label flush (\"just plain text and spacing\").\n          'group-data-[variant=outline]/accordion:px-4 group-data-[variant=soft]/accordion:px-4 group-data-[variant=surface]/accordion:px-4',\n          // chevron (last child) flips when open\n          '[&[data-panel-open]>:last-child]:rotate-180',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        <KeyboardArrowDown className=\"shrink-0 text-gray-11 transition-transform duration-200 motion-reduce:transition-none\" />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n}\n\ntype AccordionContentProps = React.ComponentProps<\n  typeof AccordionPrimitive.Panel\n>\n\nfunction AccordionContent({\n  className,\n  children,\n  ...props\n}: AccordionContentProps) {\n  return (\n    <AccordionPrimitive.Panel\n      data-slot=\"accordion-content\"\n      // Base UI sets --accordion-panel-height + starting/ending styles on the\n      // panel; the height transition replaces the radix keyframe animation.\n      className=\"h-(--accordion-panel-height) overflow-hidden text-sm text-gray-11 transition-[height] duration-200 ease-out data-ending-style:h-0 data-starting-style:h-0 motion-reduce:transition-none\"\n      {...props}\n    >\n      {/* padding aligns with the trigger: flush for ghost, inside the chrome otherwise */}\n      <div\n        className={cn(\n          'pb-4 group-data-[variant=outline]/accordion:px-4 group-data-[variant=soft]/accordion:px-4 group-data-[variant=surface]/accordion:px-4',\n          className,\n        )}\n      >\n        {children}\n      </div>\n    </AccordionPrimitive.Panel>\n  )\n}\n\nexport { Accordion, AccordionContent, AccordionItem, AccordionTrigger }\nexport type { AccordionProps, AccordionVariant }\n"],"mappings":";;;;;;;;;;AAoBA,SAAS,UAAU,EAAE,WAAW,UAAU,QAAQ,GAAG,SAAyB;CAC5E,OACE,iBAAA,GAAA,kBAAA,KAACA,yBAAAA,UAAmB,MAApB;EACE,aAAU;EAGV,gBAAc;EACd,YAAA,GAAA,OAAA,IACE,mBAGA,qHACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAIA,SAAS,cAAc,EAAE,WAAW,GAAG,SAA6B;CAClE,OACE,iBAAA,GAAA,kBAAA,KAACA,yBAAAA,UAAmB,MAApB;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IASE,qJAKA,oDACA,iUACA,iUACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAMA,SAAS,iBAAiB,EACxB,WACA,UACA,GAAG,SACqB;CACxB,OACE,iBAAA,GAAA,kBAAA,KAACA,yBAAAA,UAAmB,QAApB;EAA2B,WAAU;YACnC,iBAAA,GAAA,kBAAA,MAACA,yBAAAA,UAAmB,SAApB;GACE,aAAU;GACV,YAAA,GAAA,OAAA,IAKE,yHAIA,mGACA,oDAGA,oIAEA,+CACA,SACF;GACA,GAAI;aApBN,CAsBG,UACD,iBAAA,GAAA,kBAAA,KAACC,oBAAAA,mBAAD,EAAmB,WAAU,wFAAyF,CAAA,CAC5F;;CACH,CAAA;AAE/B;AAMA,SAAS,iBAAiB,EACxB,WACA,UACA,GAAG,SACqB;CACxB,OACE,iBAAA,GAAA,kBAAA,KAACD,yBAAAA,UAAmB,OAApB;EACE,aAAU;EAGV,WAAU;EACV,GAAI;YAGJ,iBAAA,GAAA,kBAAA,KAAC,OAAD;GACE,YAAA,GAAA,OAAA,IACE,yIACA,SACF;GAEC;EACE,CAAA;CACmB,CAAA;AAE9B"}

package/dist/components/accordion.d.ts

@@ -1,7 +1,7 @@
 "use client";
 
-import { Accordion as Accordion$1 } from "@base-ui/react/accordion";
 import * as React$1 from "react";
+import { Accordion as Accordion$1 } from "@base-ui/react/accordion";
 
 //#region src/components/accordion.d.ts
 type AccordionVariant = 'ghost' | 'soft' | 'surface' | 'outline';

package/dist/components/accordion.js

@@ -1,8 +1,8 @@
 "use client";
 import { cn } from "../utils/cn.js";
-import { MaterialSymbol } from "../icons/material-symbol.js";
-import { Accordion as Accordion$1 } from "@base-ui/react/accordion";
 import "react";
+import { Accordion as Accordion$1 } from "@base-ui/react/accordion";
+import { KeyboardArrowDown } from "@epilot/spark-icons";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/accordion.tsx
 function Accordion({ className, variant = "soft", ...props }) {
@@ -27,10 +27,7 @@ function AccordionTrigger({ className, children, ...props }) {
 			"data-slot": "accordion-trigger",
 			className: cn("flex min-h-[2.75rem] flex-1 cursor-pointer items-center justify-between gap-4 py-3 text-left font-medium text-gray-12", "rounded-[inherit] focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden", "disabled:pointer-events-none disabled:opacity-50", "group-data-[variant=outline]/accordion:px-4 group-data-[variant=soft]/accordion:px-4 group-data-[variant=surface]/accordion:px-4", "[&[data-panel-open]>:last-child]:rotate-180", className),
 			...props,
-			children: [children, /* @__PURE__ */ jsx(MaterialSymbol, {
-				className: "shrink-0 text-gray-11 transition-transform duration-200 motion-reduce:transition-none",
-				name: "expand_more"
-			})]
+			children: [children, /* @__PURE__ */ jsx(KeyboardArrowDown, { className: "shrink-0 text-gray-11 transition-transform duration-200 motion-reduce:transition-none" })]
 		})
 	});
 }

package/dist/components/accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.js","names":["AccordionPrimitive"],"sources":["../../src/components/accordion.tsx"],"sourcesContent":["import { Accordion as AccordionPrimitive } from '@base-ui/react/accordion'\nimport * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\n\ntype AccordionVariant = 'ghost' | 'soft' | 'surface' | 'outline'\n\ntype AccordionProps = React.ComponentProps<typeof AccordionPrimitive.Root> & {\n  /**\n   * Container chrome (neutral):\n   * - `ghost` — no border/fill, just the trigger + spacing;\n   * - `soft` (default) — separate soft-tinted rounded cards, 2px gap between them;\n   * - `surface` — items glued into one bordered panel with an opaque fill;\n   * - `outline` — the same glued bordered panel, but no fill (transparent).\n   * A `variant` prop, NOT the ambient `data-style` knob — that would cascade into\n   * the panel content. Spacing + scaling still come from the ambient knobs.\n   */\n  variant?: AccordionVariant\n}\n\nfunction Accordion({ className, variant = 'soft', ...props }: AccordionProps) {\n  return (\n    <AccordionPrimitive.Root\n      data-slot=\"accordion\"\n      // group/accordion + data-variant drive every item/trigger's per-variant\n      // chrome; soft stacks its separate cards with a gap (below).\n      data-variant={variant}\n      className={cn(\n        'group/accordion',\n        // soft = separate cards → stack them with a small (2px) gap. surface/outline\n        // glue their items into one bordered panel (default block, no gap).\n        'data-[variant=soft]:flex data-[variant=soft]:flex-col data-[variant=soft]:gap-[calc(var(--spark-layout-gap)*0.5)]',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\ntype AccordionItemProps = React.ComponentProps<typeof AccordionPrimitive.Item>\n\nfunction AccordionItem({ className, ...props }: AccordionItemProps) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      className={cn(\n        // NEUTRAL container chrome per the accordion variant (group/accordion) — mirrors\n        // ListItem's group-data-[variant=X]/list: block (list.tsx); keep both in sync if\n        // this pattern changes. ghost carries no chrome. Radius = rounded-lg (tracks the\n        // radius knob but never goes fully round). No text underline / per-item separator\n        // anymore.\n\n        // soft (default): each item is its own borderless soft-tinted rounded card;\n        // the root separates them with a 2px gap (the gap IS the separator).\n        'group-data-[variant=soft]/accordion:rounded-lg group-data-[variant=soft]/accordion:bg-gray-a2 dark:group-data-[variant=soft]/accordion:bg-gray-a3',\n        // surface + outline share ONE glued-panel frame: full thin border around the\n        // stack (sides on all, top on each as divider/frame, bottom on the last),\n        // first/last round the outer corners. surface fills it (opaque bg); outline\n        // leaves it transparent.\n        'group-data-[variant=surface]/accordion:bg-gray-2',\n        'group-data-[variant=surface]/accordion:border-x group-data-[variant=surface]/accordion:border-t group-data-[variant=surface]/accordion:border-gray-a6 group-data-[variant=surface]/accordion:first:rounded-t-lg group-data-[variant=surface]/accordion:last:rounded-b-lg group-data-[variant=surface]/accordion:last:border-b',\n        'group-data-[variant=outline]/accordion:border-x group-data-[variant=outline]/accordion:border-t group-data-[variant=outline]/accordion:border-gray-a6 group-data-[variant=outline]/accordion:first:rounded-t-lg group-data-[variant=outline]/accordion:last:rounded-b-lg group-data-[variant=outline]/accordion:last:border-b',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\ntype AccordionTriggerProps = React.ComponentProps<\n  typeof AccordionPrimitive.Trigger\n>\n\nfunction AccordionTrigger({\n  className,\n  children,\n  ...props\n}: AccordionTriggerProps) {\n  return (\n    <AccordionPrimitive.Header className=\"flex rounded-[inherit]\">\n      <AccordionPrimitive.Trigger\n        data-slot=\"accordion-trigger\"\n        className={cn(\n          // WCAG 2.5.5: min 44px touch target — a HARD floor (min-h-[2.75rem], not\n          // min-h-11, which scales below 44px under dense/scaled knobs). py/text still\n          // scale with the spacing + scaling knobs, growing the target past 44px.\n          // No text underline (was hover:underline).\n          'flex min-h-[2.75rem] flex-1 cursor-pointer items-center justify-between gap-4 py-3 text-left font-medium text-gray-12',\n          // focus ring: rounded-[inherit] (relayed through Header, above) so it matches\n          // the item's own corner — sits flush against it with zero inset, same idiom as\n          // ListItem's full-bleed row (list.tsx).\n          'rounded-[inherit] focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n          'disabled:pointer-events-none disabled:opacity-50',\n          // horizontal padding sits INSIDE the chrome (soft/surface/outline); ghost\n          // keeps the label flush (\"just plain text and spacing\").\n          'group-data-[variant=outline]/accordion:px-4 group-data-[variant=soft]/accordion:px-4 group-data-[variant=surface]/accordion:px-4',\n          // chevron (last child) flips when open\n          '[&[data-panel-open]>:last-child]:rotate-180',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        <MaterialSymbol\n          className=\"shrink-0 text-gray-11 transition-transform duration-200 motion-reduce:transition-none\"\n          name=\"expand_more\"\n        />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n}\n\ntype AccordionContentProps = React.ComponentProps<\n  typeof AccordionPrimitive.Panel\n>\n\nfunction AccordionContent({\n  className,\n  children,\n  ...props\n}: AccordionContentProps) {\n  return (\n    <AccordionPrimitive.Panel\n      data-slot=\"accordion-content\"\n      // Base UI sets --accordion-panel-height + starting/ending styles on the\n      // panel; the height transition replaces the radix keyframe animation.\n      className=\"h-(--accordion-panel-height) overflow-hidden text-sm text-gray-11 transition-[height] duration-200 ease-out data-ending-style:h-0 data-starting-style:h-0 motion-reduce:transition-none\"\n      {...props}\n    >\n      {/* padding aligns with the trigger: flush for ghost, inside the chrome otherwise */}\n      <div\n        className={cn(\n          'pb-4 group-data-[variant=outline]/accordion:px-4 group-data-[variant=soft]/accordion:px-4 group-data-[variant=surface]/accordion:px-4',\n          className,\n        )}\n      >\n        {children}\n      </div>\n    </AccordionPrimitive.Panel>\n  )\n}\n\nexport { Accordion, AccordionContent, AccordionItem, AccordionTrigger }\nexport type { AccordionProps, AccordionVariant }\n"],"mappings":";;;;;;;AAoBA,SAAS,UAAU,EAAE,WAAW,UAAU,QAAQ,GAAG,SAAyB;CAC5E,OACE,oBAACA,YAAmB,MAApB;EACE,aAAU;EAGV,gBAAc;EACd,WAAW,GACT,mBAGA,qHACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAIA,SAAS,cAAc,EAAE,WAAW,GAAG,SAA6B;CAClE,OACE,oBAACA,YAAmB,MAApB;EACE,aAAU;EACV,WAAW,GAST,qJAKA,oDACA,iUACA,iUACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAMA,SAAS,iBAAiB,EACxB,WACA,UACA,GAAG,SACqB;CACxB,OACE,oBAACA,YAAmB,QAApB;EAA2B,WAAU;YACnC,qBAACA,YAAmB,SAApB;GACE,aAAU;GACV,WAAW,GAKT,yHAIA,mGACA,oDAGA,oIAEA,+CACA,SACF;GACA,GAAI;aApBN,CAsBG,UACD,oBAAC,gBAAD;IACE,WAAU;IACV,MAAK;GACN,CAAA,CACyB;;CACH,CAAA;AAE/B;AAMA,SAAS,iBAAiB,EACxB,WACA,UACA,GAAG,SACqB;CACxB,OACE,oBAACA,YAAmB,OAApB;EACE,aAAU;EAGV,WAAU;EACV,GAAI;YAGJ,oBAAC,OAAD;GACE,WAAW,GACT,yIACA,SACF;GAEC;EACE,CAAA;CACmB,CAAA;AAE9B"}
+{"version":3,"file":"accordion.js","names":["AccordionPrimitive"],"sources":["../../src/components/accordion.tsx"],"sourcesContent":["import { Accordion as AccordionPrimitive } from '@base-ui/react/accordion'\nimport { KeyboardArrowDown } from '@epilot/spark-icons'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\n\ntype AccordionVariant = 'ghost' | 'soft' | 'surface' | 'outline'\n\ntype AccordionProps = React.ComponentProps<typeof AccordionPrimitive.Root> & {\n  /**\n   * Container chrome (neutral):\n   * - `ghost` — no border/fill, just the trigger + spacing;\n   * - `soft` (default) — separate soft-tinted rounded cards, 2px gap between them;\n   * - `surface` — items glued into one bordered panel with an opaque fill;\n   * - `outline` — the same glued bordered panel, but no fill (transparent).\n   * A `variant` prop, NOT the ambient `data-style` knob — that would cascade into\n   * the panel content. Spacing + scaling still come from the ambient knobs.\n   */\n  variant?: AccordionVariant\n}\n\nfunction Accordion({ className, variant = 'soft', ...props }: AccordionProps) {\n  return (\n    <AccordionPrimitive.Root\n      data-slot=\"accordion\"\n      // group/accordion + data-variant drive every item/trigger's per-variant\n      // chrome; soft stacks its separate cards with a gap (below).\n      data-variant={variant}\n      className={cn(\n        'group/accordion',\n        // soft = separate cards → stack them with a small (2px) gap. surface/outline\n        // glue their items into one bordered panel (default block, no gap).\n        'data-[variant=soft]:flex data-[variant=soft]:flex-col data-[variant=soft]:gap-[calc(var(--spark-layout-gap)*0.5)]',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\ntype AccordionItemProps = React.ComponentProps<typeof AccordionPrimitive.Item>\n\nfunction AccordionItem({ className, ...props }: AccordionItemProps) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      className={cn(\n        // NEUTRAL container chrome per the accordion variant (group/accordion) — mirrors\n        // ListItem's group-data-[variant=X]/list: block (list.tsx); keep both in sync if\n        // this pattern changes. ghost carries no chrome. Radius = rounded-lg (tracks the\n        // radius knob but never goes fully round). No text underline / per-item separator\n        // anymore.\n\n        // soft (default): each item is its own borderless soft-tinted rounded card;\n        // the root separates them with a 2px gap (the gap IS the separator).\n        'group-data-[variant=soft]/accordion:rounded-lg group-data-[variant=soft]/accordion:bg-gray-a2 dark:group-data-[variant=soft]/accordion:bg-gray-a3',\n        // surface + outline share ONE glued-panel frame: full thin border around the\n        // stack (sides on all, top on each as divider/frame, bottom on the last),\n        // first/last round the outer corners. surface fills it (opaque bg); outline\n        // leaves it transparent.\n        'group-data-[variant=surface]/accordion:bg-gray-2',\n        'group-data-[variant=surface]/accordion:border-x group-data-[variant=surface]/accordion:border-t group-data-[variant=surface]/accordion:border-gray-a6 group-data-[variant=surface]/accordion:first:rounded-t-lg group-data-[variant=surface]/accordion:last:rounded-b-lg group-data-[variant=surface]/accordion:last:border-b',\n        'group-data-[variant=outline]/accordion:border-x group-data-[variant=outline]/accordion:border-t group-data-[variant=outline]/accordion:border-gray-a6 group-data-[variant=outline]/accordion:first:rounded-t-lg group-data-[variant=outline]/accordion:last:rounded-b-lg group-data-[variant=outline]/accordion:last:border-b',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\ntype AccordionTriggerProps = React.ComponentProps<\n  typeof AccordionPrimitive.Trigger\n>\n\nfunction AccordionTrigger({\n  className,\n  children,\n  ...props\n}: AccordionTriggerProps) {\n  return (\n    <AccordionPrimitive.Header className=\"flex rounded-[inherit]\">\n      <AccordionPrimitive.Trigger\n        data-slot=\"accordion-trigger\"\n        className={cn(\n          // WCAG 2.5.5: min 44px touch target — a HARD floor (min-h-[2.75rem], not\n          // min-h-11, which scales below 44px under dense/scaled knobs). py/text still\n          // scale with the spacing + scaling knobs, growing the target past 44px.\n          // No text underline (was hover:underline).\n          'flex min-h-[2.75rem] flex-1 cursor-pointer items-center justify-between gap-4 py-3 text-left font-medium text-gray-12',\n          // focus ring: rounded-[inherit] (relayed through Header, above) so it matches\n          // the item's own corner — sits flush against it with zero inset, same idiom as\n          // ListItem's full-bleed row (list.tsx).\n          'rounded-[inherit] focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',\n          'disabled:pointer-events-none disabled:opacity-50',\n          // horizontal padding sits INSIDE the chrome (soft/surface/outline); ghost\n          // keeps the label flush (\"just plain text and spacing\").\n          'group-data-[variant=outline]/accordion:px-4 group-data-[variant=soft]/accordion:px-4 group-data-[variant=surface]/accordion:px-4',\n          // chevron (last child) flips when open\n          '[&[data-panel-open]>:last-child]:rotate-180',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        <KeyboardArrowDown className=\"shrink-0 text-gray-11 transition-transform duration-200 motion-reduce:transition-none\" />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  )\n}\n\ntype AccordionContentProps = React.ComponentProps<\n  typeof AccordionPrimitive.Panel\n>\n\nfunction AccordionContent({\n  className,\n  children,\n  ...props\n}: AccordionContentProps) {\n  return (\n    <AccordionPrimitive.Panel\n      data-slot=\"accordion-content\"\n      // Base UI sets --accordion-panel-height + starting/ending styles on the\n      // panel; the height transition replaces the radix keyframe animation.\n      className=\"h-(--accordion-panel-height) overflow-hidden text-sm text-gray-11 transition-[height] duration-200 ease-out data-ending-style:h-0 data-starting-style:h-0 motion-reduce:transition-none\"\n      {...props}\n    >\n      {/* padding aligns with the trigger: flush for ghost, inside the chrome otherwise */}\n      <div\n        className={cn(\n          'pb-4 group-data-[variant=outline]/accordion:px-4 group-data-[variant=soft]/accordion:px-4 group-data-[variant=surface]/accordion:px-4',\n          className,\n        )}\n      >\n        {children}\n      </div>\n    </AccordionPrimitive.Panel>\n  )\n}\n\nexport { Accordion, AccordionContent, AccordionItem, AccordionTrigger }\nexport type { AccordionProps, AccordionVariant }\n"],"mappings":";;;;;;;AAoBA,SAAS,UAAU,EAAE,WAAW,UAAU,QAAQ,GAAG,SAAyB;CAC5E,OACE,oBAACA,YAAmB,MAApB;EACE,aAAU;EAGV,gBAAc;EACd,WAAW,GACT,mBAGA,qHACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAIA,SAAS,cAAc,EAAE,WAAW,GAAG,SAA6B;CAClE,OACE,oBAACA,YAAmB,MAApB;EACE,aAAU;EACV,WAAW,GAST,qJAKA,oDACA,iUACA,iUACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAMA,SAAS,iBAAiB,EACxB,WACA,UACA,GAAG,SACqB;CACxB,OACE,oBAACA,YAAmB,QAApB;EAA2B,WAAU;YACnC,qBAACA,YAAmB,SAApB;GACE,aAAU;GACV,WAAW,GAKT,yHAIA,mGACA,oDAGA,oIAEA,+CACA,SACF;GACA,GAAI;aApBN,CAsBG,UACD,oBAAC,mBAAD,EAAmB,WAAU,wFAAyF,CAAA,CAC5F;;CACH,CAAA;AAE/B;AAMA,SAAS,iBAAiB,EACxB,WACA,UACA,GAAG,SACqB;CACxB,OACE,oBAACA,YAAmB,OAApB;EACE,aAAU;EAGV,WAAU;EACV,GAAI;YAGJ,oBAAC,OAAD;GACE,WAAW,GACT,yIACA,SACF;GAEC;EACE,CAAA;CACmB,CAAA;AAE9B"}

package/dist/components/alert-dialog.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_alert_dialog = require("@base-ui/react/alert-dialog");
 let cnfast = require("cnfast");
@@ -114,10 +114,7 @@ function AlertDialogCancel({ className, size = "default", styleVariant, color, c
 			variant: "tertiary"
 		}), "absolute top-2.5 right-2 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))]" })
 	});
 }
 //#endregion

package/dist/components/alert-dialog.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"alert-dialog.cjs","names":["AlertDialogPrimitive","Button","buttonVariants","MaterialSymbol"],"sources":["../../src/components/alert-dialog.tsx"],"sourcesContent":["import { AlertDialog as AlertDialogPrimitive } from '@base-ui/react/alert-dialog'\nimport * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\nimport { Button, type ButtonProps } from './button'\nimport { buttonVariants } from './button'\n\nfunction AlertDialog(\n  props: React.ComponentProps<typeof AlertDialogPrimitive.Root>,\n) {\n  return <AlertDialogPrimitive.Root {...props} />\n}\n\nfunction AlertDialogTrigger(\n  props: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>,\n) {\n  return (\n    <AlertDialogPrimitive.Trigger data-slot=\"alert-dialog-trigger\" {...props} />\n  )\n}\n\nfunction AlertDialogPortal(\n  props: React.ComponentProps<typeof AlertDialogPrimitive.Portal>,\n) {\n  return (\n    <AlertDialogPrimitive.Portal data-slot=\"alert-dialog-portal\" {...props} />\n  )\n}\n\nfunction AlertDialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Backdrop>) {\n  return (\n    <AlertDialogPrimitive.Backdrop\n      data-slot=\"alert-dialog-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      data-overlay=\"true\"\n      {...props}\n    />\n  )\n}\n\ninterface AlertDialogContentProps extends React.ComponentProps<\n  typeof AlertDialogPrimitive.Popup\n> {\n  size?: 'default' | 'sm'\n}\n\nfunction AlertDialogContent({\n  className,\n  size = 'default',\n  ...props\n}: AlertDialogContentProps) {\n  return (\n    <AlertDialogPrimitive.Popup\n      data-slot=\"alert-dialog-content\"\n      data-size={size}\n      className={cn(\n        'group/alert-dialog-content fixed top-(--spark-viewport-center-y,50%) left-[50%] z-50 grid w-full translate-x-[-50%] translate-y-[-50%] gap-6 rounded-lg bg-gray-2 p-4 text-gray shadow-lg transition-[top,opacity,translate,scale] duration-200 data-[size=default]:max-w-lg data-[size=sm]:max-w-64 motion-reduce:transition-none data-[size=default]:sm:max-w-lg',\n        // enter/exit: fade + zoom + a slight upward offset (was animate-in/out)\n        'data-starting-style:translate-y-[-52%] data-starting-style:scale-95 data-starting-style:opacity-0',\n        'data-ending-style:translate-y-[-52%] data-ending-style:scale-95 data-ending-style:opacity-0',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogHeader({\n  className,\n  ...props\n}: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"alert-dialog-header\"\n      className={cn(\n        'grid grid-rows-[auto_1fr] place-items-center gap-1 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogFooter({\n  className,\n  ...props\n}: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"alert-dialog-footer\"\n      className={cn(\n        'flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogMedia({\n  className,\n  ...props\n}: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"alert-dialog-media\"\n      className={cn(\n        'inline-flex size-4 h-7 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*=size-])]:size-4',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {\n  return (\n    <AlertDialogPrimitive.Title\n      data-slot=\"alert-dialog-title\"\n      className={cn(\n        'text-lg font-bold text-gray sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {\n  return (\n    <AlertDialogPrimitive.Description\n      data-slot=\"alert-dialog-description\"\n      className={cn('text-sm text-balance text-gray-light', className)}\n      {...props}\n    />\n  )\n}\n\ninterface AlertDialogActionProps\n  extends\n    React.ComponentProps<typeof AlertDialogPrimitive.Close>,\n    Pick<ButtonProps, 'size' | 'styleVariant' | 'color'> {}\n\n// Base UI has no Action primitive; the confirm button composes Close (radix\n// Action also closed on click) — run the action in onClick. A prop-less Button\n// is the primary look (solid accent), so the confirm just forwards style/color.\nfunction AlertDialogAction({\n  className,\n  size = 'default',\n  styleVariant,\n  color,\n  ...props\n}: AlertDialogActionProps) {\n  return (\n    <Button\n      size={size}\n      styleVariant={styleVariant}\n      color={color}\n      render={\n        <AlertDialogPrimitive.Close\n          data-slot=\"alert-dialog-action\"\n          className={className}\n          {...props}\n        />\n      }\n    />\n  )\n}\n\ninterface AlertDialogCancelProps\n  extends\n    React.ComponentProps<typeof AlertDialogPrimitive.Close>,\n    Pick<ButtonProps, 'size' | 'styleVariant' | 'color'> {}\n\n// No children = the ready-made corner X (label is the consumer's, via aria-label);\n// with children it renders as a Button (default surface/neutral, the old secondary\n// look); with a render prop it stays the bare primitive (the consumer supplies the button)\nfunction AlertDialogCancel({\n  className,\n  size = 'default',\n  styleVariant,\n  color,\n  children,\n  ...props\n}: AlertDialogCancelProps) {\n  if (children) {\n    // Default to the surface/neutral (secondary) look unless the caller pins a\n    // style/color of its own.\n    const hasLook = styleVariant !== undefined || color !== undefined\n    return (\n      <Button\n        size={size}\n        styleVariant={hasLook ? styleVariant : 'surface'}\n        color={hasLook ? color : 'neutral'}\n        render={\n          <AlertDialogPrimitive.Close\n            data-slot=\"alert-dialog-cancel\"\n            className={className}\n            {...props}\n          >\n            {children}\n          </AlertDialogPrimitive.Close>\n        }\n      />\n    )\n  }\n\n  if (props.render) {\n    return (\n      <AlertDialogPrimitive.Close\n        data-slot=\"alert-dialog-cancel\"\n        className={className}\n        {...props}\n      />\n    )\n  }\n\n  return (\n    <AlertDialogPrimitive.Close\n      data-slot=\"alert-dialog-cancel\"\n      className={cn(\n        buttonVariants({ size: 'icon', variant: 'tertiary' }),\n        'absolute top-2.5 right-2 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    </AlertDialogPrimitive.Close>\n  )\n}\n\nexport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n}\nexport type { AlertDialogContentProps }\n"],"mappings":"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"}
+{"version":3,"file":"alert-dialog.cjs","names":["AlertDialogPrimitive","Button","buttonVariants","Close"],"sources":["../../src/components/alert-dialog.tsx"],"sourcesContent":["import { AlertDialog as AlertDialogPrimitive } from '@base-ui/react/alert-dialog'\nimport { Close } from '@epilot/spark-icons'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\nimport { Button, type ButtonProps } from './button'\nimport { buttonVariants } from './button'\n\nfunction AlertDialog(\n  props: React.ComponentProps<typeof AlertDialogPrimitive.Root>,\n) {\n  return <AlertDialogPrimitive.Root {...props} />\n}\n\nfunction AlertDialogTrigger(\n  props: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>,\n) {\n  return (\n    <AlertDialogPrimitive.Trigger data-slot=\"alert-dialog-trigger\" {...props} />\n  )\n}\n\nfunction AlertDialogPortal(\n  props: React.ComponentProps<typeof AlertDialogPrimitive.Portal>,\n) {\n  return (\n    <AlertDialogPrimitive.Portal data-slot=\"alert-dialog-portal\" {...props} />\n  )\n}\n\nfunction AlertDialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Backdrop>) {\n  return (\n    <AlertDialogPrimitive.Backdrop\n      data-slot=\"alert-dialog-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      data-overlay=\"true\"\n      {...props}\n    />\n  )\n}\n\ninterface AlertDialogContentProps extends React.ComponentProps<\n  typeof AlertDialogPrimitive.Popup\n> {\n  size?: 'default' | 'sm'\n}\n\nfunction AlertDialogContent({\n  className,\n  size = 'default',\n  ...props\n}: AlertDialogContentProps) {\n  return (\n    <AlertDialogPrimitive.Popup\n      data-slot=\"alert-dialog-content\"\n      data-size={size}\n      className={cn(\n        'group/alert-dialog-content fixed top-(--spark-viewport-center-y,50%) left-[50%] z-50 grid w-full translate-x-[-50%] translate-y-[-50%] gap-6 rounded-lg bg-gray-2 p-4 text-gray shadow-lg transition-[top,opacity,translate,scale] duration-200 data-[size=default]:max-w-lg data-[size=sm]:max-w-64 motion-reduce:transition-none data-[size=default]:sm:max-w-lg',\n        // enter/exit: fade + zoom + a slight upward offset (was animate-in/out)\n        'data-starting-style:translate-y-[-52%] data-starting-style:scale-95 data-starting-style:opacity-0',\n        'data-ending-style:translate-y-[-52%] data-ending-style:scale-95 data-ending-style:opacity-0',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogHeader({\n  className,\n  ...props\n}: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"alert-dialog-header\"\n      className={cn(\n        'grid grid-rows-[auto_1fr] place-items-center gap-1 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogFooter({\n  className,\n  ...props\n}: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"alert-dialog-footer\"\n      className={cn(\n        'flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogMedia({\n  className,\n  ...props\n}: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"alert-dialog-media\"\n      className={cn(\n        'inline-flex size-4 h-7 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*=size-])]:size-4',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {\n  return (\n    <AlertDialogPrimitive.Title\n      data-slot=\"alert-dialog-title\"\n      className={cn(\n        'text-lg font-bold text-gray sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {\n  return (\n    <AlertDialogPrimitive.Description\n      data-slot=\"alert-dialog-description\"\n      className={cn('text-sm text-balance text-gray-light', className)}\n      {...props}\n    />\n  )\n}\n\ninterface AlertDialogActionProps\n  extends\n    React.ComponentProps<typeof AlertDialogPrimitive.Close>,\n    Pick<ButtonProps, 'size' | 'styleVariant' | 'color'> {}\n\n// Base UI has no Action primitive; the confirm button composes Close (radix\n// Action also closed on click) — run the action in onClick. A prop-less Button\n// is the primary look (solid accent), so the confirm just forwards style/color.\nfunction AlertDialogAction({\n  className,\n  size = 'default',\n  styleVariant,\n  color,\n  ...props\n}: AlertDialogActionProps) {\n  return (\n    <Button\n      size={size}\n      styleVariant={styleVariant}\n      color={color}\n      render={\n        <AlertDialogPrimitive.Close\n          data-slot=\"alert-dialog-action\"\n          className={className}\n          {...props}\n        />\n      }\n    />\n  )\n}\n\ninterface AlertDialogCancelProps\n  extends\n    React.ComponentProps<typeof AlertDialogPrimitive.Close>,\n    Pick<ButtonProps, 'size' | 'styleVariant' | 'color'> {}\n\n// No children = the ready-made corner X (label is the consumer's, via aria-label);\n// with children it renders as a Button (default surface/neutral, the old secondary\n// look); with a render prop it stays the bare primitive (the consumer supplies the button)\nfunction AlertDialogCancel({\n  className,\n  size = 'default',\n  styleVariant,\n  color,\n  children,\n  ...props\n}: AlertDialogCancelProps) {\n  if (children) {\n    // Default to the surface/neutral (secondary) look unless the caller pins a\n    // style/color of its own.\n    const hasLook = styleVariant !== undefined || color !== undefined\n    return (\n      <Button\n        size={size}\n        styleVariant={hasLook ? styleVariant : 'surface'}\n        color={hasLook ? color : 'neutral'}\n        render={\n          <AlertDialogPrimitive.Close\n            data-slot=\"alert-dialog-cancel\"\n            className={className}\n            {...props}\n          >\n            {children}\n          </AlertDialogPrimitive.Close>\n        }\n      />\n    )\n  }\n\n  if (props.render) {\n    return (\n      <AlertDialogPrimitive.Close\n        data-slot=\"alert-dialog-cancel\"\n        className={className}\n        {...props}\n      />\n    )\n  }\n\n  return (\n    <AlertDialogPrimitive.Close\n      data-slot=\"alert-dialog-cancel\"\n      className={cn(\n        buttonVariants({ size: 'icon', variant: 'tertiary' }),\n        'absolute top-2.5 right-2 rounded-full',\n        className,\n      )}\n      {...props}\n    >\n      <Close className=\"[--spark-icon-size:calc(20px*var(--spark-scaling,1))]\" />\n    </AlertDialogPrimitive.Close>\n  )\n}\n\nexport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n}\nexport type { AlertDialogContentProps }\n"],"mappings":"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"}

package/dist/components/alert-dialog.js

@@ -1,8 +1,8 @@
 "use client";
 import { cn } from "../utils/cn.js";
-import { MaterialSymbol } from "../icons/material-symbol.js";
 import { Button, buttonVariants } from "./button.js";
 import "react";
+import { Close } from "@epilot/spark-icons";
 import { jsx } from "react/jsx-runtime";
 import { AlertDialog as AlertDialog$1 } from "@base-ui/react/alert-dialog";
 //#region src/components/alert-dialog.tsx
@@ -111,10 +111,7 @@ function AlertDialogCancel({ className, size = "default", styleVariant, color, c
 			variant: "tertiary"
 		}), "absolute top-2.5 right-2 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))]" })
 	});
 }
 //#endregion

package/dist/components/alert-dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert-dialog.js","names":["AlertDialogPrimitive"],"sources":["../../src/components/alert-dialog.tsx"],"sourcesContent":["import { AlertDialog as AlertDialogPrimitive } from '@base-ui/react/alert-dialog'\nimport * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\nimport { Button, type ButtonProps } from './button'\nimport { buttonVariants } from './button'\n\nfunction AlertDialog(\n  props: React.ComponentProps<typeof AlertDialogPrimitive.Root>,\n) {\n  return <AlertDialogPrimitive.Root {...props} />\n}\n\nfunction AlertDialogTrigger(\n  props: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>,\n) {\n  return (\n    <AlertDialogPrimitive.Trigger data-slot=\"alert-dialog-trigger\" {...props} />\n  )\n}\n\nfunction AlertDialogPortal(\n  props: React.ComponentProps<typeof AlertDialogPrimitive.Portal>,\n) {\n  return (\n    <AlertDialogPrimitive.Portal data-slot=\"alert-dialog-portal\" {...props} />\n  )\n}\n\nfunction AlertDialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Backdrop>) {\n  return (\n    <AlertDialogPrimitive.Backdrop\n      data-slot=\"alert-dialog-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      data-overlay=\"true\"\n      {...props}\n    />\n  )\n}\n\ninterface AlertDialogContentProps extends React.ComponentProps<\n  typeof AlertDialogPrimitive.Popup\n> {\n  size?: 'default' | 'sm'\n}\n\nfunction AlertDialogContent({\n  className,\n  size = 'default',\n  ...props\n}: AlertDialogContentProps) {\n  return (\n    <AlertDialogPrimitive.Popup\n      data-slot=\"alert-dialog-content\"\n      data-size={size}\n      className={cn(\n        'group/alert-dialog-content fixed top-(--spark-viewport-center-y,50%) left-[50%] z-50 grid w-full translate-x-[-50%] translate-y-[-50%] gap-6 rounded-lg bg-gray-2 p-4 text-gray shadow-lg transition-[top,opacity,translate,scale] duration-200 data-[size=default]:max-w-lg data-[size=sm]:max-w-64 motion-reduce:transition-none data-[size=default]:sm:max-w-lg',\n        // enter/exit: fade + zoom + a slight upward offset (was animate-in/out)\n        'data-starting-style:translate-y-[-52%] data-starting-style:scale-95 data-starting-style:opacity-0',\n        'data-ending-style:translate-y-[-52%] data-ending-style:scale-95 data-ending-style:opacity-0',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogHeader({\n  className,\n  ...props\n}: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"alert-dialog-header\"\n      className={cn(\n        'grid grid-rows-[auto_1fr] place-items-center gap-1 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogFooter({\n  className,\n  ...props\n}: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"alert-dialog-footer\"\n      className={cn(\n        'flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogMedia({\n  className,\n  ...props\n}: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"alert-dialog-media\"\n      className={cn(\n        'inline-flex size-4 h-7 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*=size-])]:size-4',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {\n  return (\n    <AlertDialogPrimitive.Title\n      data-slot=\"alert-dialog-title\"\n      className={cn(\n        'text-lg font-bold text-gray sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {\n  return (\n    <AlertDialogPrimitive.Description\n      data-slot=\"alert-dialog-description\"\n      className={cn('text-sm text-balance text-gray-light', className)}\n      {...props}\n    />\n  )\n}\n\ninterface AlertDialogActionProps\n  extends\n    React.ComponentProps<typeof AlertDialogPrimitive.Close>,\n    Pick<ButtonProps, 'size' | 'styleVariant' | 'color'> {}\n\n// Base UI has no Action primitive; the confirm button composes Close (radix\n// Action also closed on click) — run the action in onClick. A prop-less Button\n// is the primary look (solid accent), so the confirm just forwards style/color.\nfunction AlertDialogAction({\n  className,\n  size = 'default',\n  styleVariant,\n  color,\n  ...props\n}: AlertDialogActionProps) {\n  return (\n    <Button\n      size={size}\n      styleVariant={styleVariant}\n      color={color}\n      render={\n        <AlertDialogPrimitive.Close\n          data-slot=\"alert-dialog-action\"\n          className={className}\n          {...props}\n        />\n      }\n    />\n  )\n}\n\ninterface AlertDialogCancelProps\n  extends\n    React.ComponentProps<typeof AlertDialogPrimitive.Close>,\n    Pick<ButtonProps, 'size' | 'styleVariant' | 'color'> {}\n\n// No children = the ready-made corner X (label is the consumer's, via aria-label);\n// with children it renders as a Button (default surface/neutral, the old secondary\n// look); with a render prop it stays the bare primitive (the consumer supplies the button)\nfunction AlertDialogCancel({\n  className,\n  size = 'default',\n  styleVariant,\n  color,\n  children,\n  ...props\n}: AlertDialogCancelProps) {\n  if (children) {\n    // Default to the surface/neutral (secondary) look unless the caller pins a\n    // style/color of its own.\n    const hasLook = styleVariant !== undefined || color !== undefined\n    return (\n      <Button\n        size={size}\n        styleVariant={hasLook ? styleVariant : 'surface'}\n        color={hasLook ? color : 'neutral'}\n        render={\n          <AlertDialogPrimitive.Close\n            data-slot=\"alert-dialog-cancel\"\n            className={className}\n            {...props}\n          >\n            {children}\n          </AlertDialogPrimitive.Close>\n        }\n      />\n    )\n  }\n\n  if (props.render) {\n    return (\n      <AlertDialogPrimitive.Close\n        data-slot=\"alert-dialog-cancel\"\n        className={className}\n        {...props}\n      />\n    )\n  }\n\n  return (\n    <AlertDialogPrimitive.Close\n      data-slot=\"alert-dialog-cancel\"\n      className={cn(\n        buttonVariants({ size: 'icon', variant: 'tertiary' }),\n        'absolute top-2.5 right-2 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    </AlertDialogPrimitive.Close>\n  )\n}\n\nexport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n}\nexport type { AlertDialogContentProps }\n"],"mappings":";;;;;;;;AAOA,SAAS,YACP,OACA;CACA,OAAO,oBAACA,cAAqB,MAAtB,EAA2B,GAAI,MAAQ,CAAA;AAChD;AAEA,SAAS,mBACP,OACA;CACA,OACE,oBAACA,cAAqB,SAAtB;EAA8B,aAAU;EAAuB,GAAI;CAAQ,CAAA;AAE/E;AAEA,SAAS,kBACP,OACA;CACA,OACE,oBAACA,cAAqB,QAAtB;EAA6B,aAAU;EAAsB,GAAI;CAAQ,CAAA;AAE7E;AAEA,SAAS,mBAAmB,EAC1B,WACA,GAAG,SAC0D;CAC7D,OACE,oBAACA,cAAqB,UAAtB;EACE,aAAU;EACV,WAAW,GACT,wOACA,SACF;EACA,gBAAa;EACb,GAAI;CACL,CAAA;AAEL;AAQA,SAAS,mBAAmB,EAC1B,WACA,OAAO,WACP,GAAG,SACuB;CAC1B,OACE,oBAACA,cAAqB,OAAtB;EACE,aAAU;EACV,aAAW;EACX,WAAW,GACT,sWAEA,qGACA,+FACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,kBAAkB,EACzB,WACA,GAAG,SAC2B;CAC9B,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,oZACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,kBAAkB,EACzB,WACA,GAAG,SAC2B;CAC9B,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,+JACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,iBAAiB,EACxB,WACA,GAAG,SAC2B;CAC9B,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,iKACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,iBAAiB,EACxB,WACA,GAAG,SACuD;CAC1D,OACE,oBAACA,cAAqB,OAAtB;EACE,aAAU;EACV,WAAW,GACT,2JACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,uBAAuB,EAC9B,WACA,GAAG,SAC6D;CAChE,OACE,oBAACA,cAAqB,aAAtB;EACE,aAAU;EACV,WAAW,GAAG,wCAAwC,SAAS;EAC/D,GAAI;CACL,CAAA;AAEL;AAUA,SAAS,kBAAkB,EACzB,WACA,OAAO,WACP,cACA,OACA,GAAG,SACsB;CACzB,OACE,oBAAC,QAAD;EACQ;EACQ;EACP;EACP,QACE,oBAACA,cAAqB,OAAtB;GACE,aAAU;GACC;GACX,GAAI;EACL,CAAA;CAEJ,CAAA;AAEL;AAUA,SAAS,kBAAkB,EACzB,WACA,OAAO,WACP,cACA,OACA,UACA,GAAG,SACsB;CACzB,IAAI,UAAU;EAGZ,MAAM,UAAU,iBAAiB,KAAA,KAAa,UAAU,KAAA;EACxD,OACE,oBAAC,QAAD;GACQ;GACN,cAAc,UAAU,eAAe;GACvC,OAAO,UAAU,QAAQ;GACzB,QACE,oBAACA,cAAqB,OAAtB;IACE,aAAU;IACC;IACX,GAAI;IAEH;GACyB,CAAA;EAE/B,CAAA;CAEL;CAEA,IAAI,MAAM,QACR,OACE,oBAACA,cAAqB,OAAtB;EACE,aAAU;EACC;EACX,GAAI;CACL,CAAA;CAIL,OACE,oBAACA,cAAqB,OAAtB;EACE,aAAU;EACV,WAAW,GACT,eAAe;GAAE,MAAM;GAAQ,SAAS;EAAW,CAAC,GACpD,yCACA,SACF;EACA,GAAI;YAEJ,oBAAC,gBAAD;GACE,WAAU;GACV,MAAK;EACN,CAAA;CACyB,CAAA;AAEhC"}
+{"version":3,"file":"alert-dialog.js","names":["AlertDialogPrimitive"],"sources":["../../src/components/alert-dialog.tsx"],"sourcesContent":["import { AlertDialog as AlertDialogPrimitive } from '@base-ui/react/alert-dialog'\nimport { Close } from '@epilot/spark-icons'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\nimport { Button, type ButtonProps } from './button'\nimport { buttonVariants } from './button'\n\nfunction AlertDialog(\n  props: React.ComponentProps<typeof AlertDialogPrimitive.Root>,\n) {\n  return <AlertDialogPrimitive.Root {...props} />\n}\n\nfunction AlertDialogTrigger(\n  props: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>,\n) {\n  return (\n    <AlertDialogPrimitive.Trigger data-slot=\"alert-dialog-trigger\" {...props} />\n  )\n}\n\nfunction AlertDialogPortal(\n  props: React.ComponentProps<typeof AlertDialogPrimitive.Portal>,\n) {\n  return (\n    <AlertDialogPrimitive.Portal data-slot=\"alert-dialog-portal\" {...props} />\n  )\n}\n\nfunction AlertDialogOverlay({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Backdrop>) {\n  return (\n    <AlertDialogPrimitive.Backdrop\n      data-slot=\"alert-dialog-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      data-overlay=\"true\"\n      {...props}\n    />\n  )\n}\n\ninterface AlertDialogContentProps extends React.ComponentProps<\n  typeof AlertDialogPrimitive.Popup\n> {\n  size?: 'default' | 'sm'\n}\n\nfunction AlertDialogContent({\n  className,\n  size = 'default',\n  ...props\n}: AlertDialogContentProps) {\n  return (\n    <AlertDialogPrimitive.Popup\n      data-slot=\"alert-dialog-content\"\n      data-size={size}\n      className={cn(\n        'group/alert-dialog-content fixed top-(--spark-viewport-center-y,50%) left-[50%] z-50 grid w-full translate-x-[-50%] translate-y-[-50%] gap-6 rounded-lg bg-gray-2 p-4 text-gray shadow-lg transition-[top,opacity,translate,scale] duration-200 data-[size=default]:max-w-lg data-[size=sm]:max-w-64 motion-reduce:transition-none data-[size=default]:sm:max-w-lg',\n        // enter/exit: fade + zoom + a slight upward offset (was animate-in/out)\n        'data-starting-style:translate-y-[-52%] data-starting-style:scale-95 data-starting-style:opacity-0',\n        'data-ending-style:translate-y-[-52%] data-ending-style:scale-95 data-ending-style:opacity-0',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogHeader({\n  className,\n  ...props\n}: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"alert-dialog-header\"\n      className={cn(\n        'grid grid-rows-[auto_1fr] place-items-center gap-1 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogFooter({\n  className,\n  ...props\n}: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"alert-dialog-footer\"\n      className={cn(\n        'flex flex-col-reverse gap-2 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogMedia({\n  className,\n  ...props\n}: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"alert-dialog-media\"\n      className={cn(\n        'inline-flex size-4 h-7 items-center justify-center rounded-md sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*=size-])]:size-4',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {\n  return (\n    <AlertDialogPrimitive.Title\n      data-slot=\"alert-dialog-title\"\n      className={cn(\n        'text-lg font-bold text-gray sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction AlertDialogDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {\n  return (\n    <AlertDialogPrimitive.Description\n      data-slot=\"alert-dialog-description\"\n      className={cn('text-sm text-balance text-gray-light', className)}\n      {...props}\n    />\n  )\n}\n\ninterface AlertDialogActionProps\n  extends\n    React.ComponentProps<typeof AlertDialogPrimitive.Close>,\n    Pick<ButtonProps, 'size' | 'styleVariant' | 'color'> {}\n\n// Base UI has no Action primitive; the confirm button composes Close (radix\n// Action also closed on click) — run the action in onClick. A prop-less Button\n// is the primary look (solid accent), so the confirm just forwards style/color.\nfunction AlertDialogAction({\n  className,\n  size = 'default',\n  styleVariant,\n  color,\n  ...props\n}: AlertDialogActionProps) {\n  return (\n    <Button\n      size={size}\n      styleVariant={styleVariant}\n      color={color}\n      render={\n        <AlertDialogPrimitive.Close\n          data-slot=\"alert-dialog-action\"\n          className={className}\n          {...props}\n        />\n      }\n    />\n  )\n}\n\ninterface AlertDialogCancelProps\n  extends\n    React.ComponentProps<typeof AlertDialogPrimitive.Close>,\n    Pick<ButtonProps, 'size' | 'styleVariant' | 'color'> {}\n\n// No children = the ready-made corner X (label is the consumer's, via aria-label);\n// with children it renders as a Button (default surface/neutral, the old secondary\n// look); with a render prop it stays the bare primitive (the consumer supplies the button)\nfunction AlertDialogCancel({\n  className,\n  size = 'default',\n  styleVariant,\n  color,\n  children,\n  ...props\n}: AlertDialogCancelProps) {\n  if (children) {\n    // Default to the surface/neutral (secondary) look unless the caller pins a\n    // style/color of its own.\n    const hasLook = styleVariant !== undefined || color !== undefined\n    return (\n      <Button\n        size={size}\n        styleVariant={hasLook ? styleVariant : 'surface'}\n        color={hasLook ? color : 'neutral'}\n        render={\n          <AlertDialogPrimitive.Close\n            data-slot=\"alert-dialog-cancel\"\n            className={className}\n            {...props}\n          >\n            {children}\n          </AlertDialogPrimitive.Close>\n        }\n      />\n    )\n  }\n\n  if (props.render) {\n    return (\n      <AlertDialogPrimitive.Close\n        data-slot=\"alert-dialog-cancel\"\n        className={className}\n        {...props}\n      />\n    )\n  }\n\n  return (\n    <AlertDialogPrimitive.Close\n      data-slot=\"alert-dialog-cancel\"\n      className={cn(\n        buttonVariants({ size: 'icon', variant: 'tertiary' }),\n        'absolute top-2.5 right-2 rounded-full',\n        className,\n      )}\n      {...props}\n    >\n      <Close className=\"[--spark-icon-size:calc(20px*var(--spark-scaling,1))]\" />\n    </AlertDialogPrimitive.Close>\n  )\n}\n\nexport {\n  AlertDialog,\n  AlertDialogAction,\n  AlertDialogCancel,\n  AlertDialogContent,\n  AlertDialogDescription,\n  AlertDialogFooter,\n  AlertDialogHeader,\n  AlertDialogMedia,\n  AlertDialogOverlay,\n  AlertDialogPortal,\n  AlertDialogTitle,\n  AlertDialogTrigger,\n}\nexport type { AlertDialogContentProps }\n"],"mappings":";;;;;;;;AAOA,SAAS,YACP,OACA;CACA,OAAO,oBAACA,cAAqB,MAAtB,EAA2B,GAAI,MAAQ,CAAA;AAChD;AAEA,SAAS,mBACP,OACA;CACA,OACE,oBAACA,cAAqB,SAAtB;EAA8B,aAAU;EAAuB,GAAI;CAAQ,CAAA;AAE/E;AAEA,SAAS,kBACP,OACA;CACA,OACE,oBAACA,cAAqB,QAAtB;EAA6B,aAAU;EAAsB,GAAI;CAAQ,CAAA;AAE7E;AAEA,SAAS,mBAAmB,EAC1B,WACA,GAAG,SAC0D;CAC7D,OACE,oBAACA,cAAqB,UAAtB;EACE,aAAU;EACV,WAAW,GACT,wOACA,SACF;EACA,gBAAa;EACb,GAAI;CACL,CAAA;AAEL;AAQA,SAAS,mBAAmB,EAC1B,WACA,OAAO,WACP,GAAG,SACuB;CAC1B,OACE,oBAACA,cAAqB,OAAtB;EACE,aAAU;EACV,aAAW;EACX,WAAW,GACT,sWAEA,qGACA,+FACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,kBAAkB,EACzB,WACA,GAAG,SAC2B;CAC9B,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,oZACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,kBAAkB,EACzB,WACA,GAAG,SAC2B;CAC9B,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,+JACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,iBAAiB,EACxB,WACA,GAAG,SAC2B;CAC9B,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,iKACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,iBAAiB,EACxB,WACA,GAAG,SACuD;CAC1D,OACE,oBAACA,cAAqB,OAAtB;EACE,aAAU;EACV,WAAW,GACT,2JACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,uBAAuB,EAC9B,WACA,GAAG,SAC6D;CAChE,OACE,oBAACA,cAAqB,aAAtB;EACE,aAAU;EACV,WAAW,GAAG,wCAAwC,SAAS;EAC/D,GAAI;CACL,CAAA;AAEL;AAUA,SAAS,kBAAkB,EACzB,WACA,OAAO,WACP,cACA,OACA,GAAG,SACsB;CACzB,OACE,oBAAC,QAAD;EACQ;EACQ;EACP;EACP,QACE,oBAACA,cAAqB,OAAtB;GACE,aAAU;GACC;GACX,GAAI;EACL,CAAA;CAEJ,CAAA;AAEL;AAUA,SAAS,kBAAkB,EACzB,WACA,OAAO,WACP,cACA,OACA,UACA,GAAG,SACsB;CACzB,IAAI,UAAU;EAGZ,MAAM,UAAU,iBAAiB,KAAA,KAAa,UAAU,KAAA;EACxD,OACE,oBAAC,QAAD;GACQ;GACN,cAAc,UAAU,eAAe;GACvC,OAAO,UAAU,QAAQ;GACzB,QACE,oBAACA,cAAqB,OAAtB;IACE,aAAU;IACC;IACX,GAAI;IAEH;GACyB,CAAA;EAE/B,CAAA;CAEL;CAEA,IAAI,MAAM,QACR,OACE,oBAACA,cAAqB,OAAtB;EACE,aAAU;EACC;EACX,GAAI;CACL,CAAA;CAIL,OACE,oBAACA,cAAqB,OAAtB;EACE,aAAU;EACV,WAAW,GACT,eAAe;GAAE,MAAM;GAAQ,SAAS;EAAW,CAAC,GACpD,yCACA,SACF;EACA,GAAI;YAEJ,oBAAC,OAAD,EAAO,WAAU,wDAAyD,CAAA;CAChD,CAAA;AAEhC"}

package/dist/components/bar-chart.cjs

@@ -1,8 +1,8 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_hooks_use_reduced_motion = require("../hooks/use-reduced-motion.cjs");
 const require_utils_format = require("../utils/format.cjs");
 const require_utils_chart_scale = require("../utils/chart-scale.cjs");
+const require_hooks_use_reduced_motion = require("../hooks/use-reduced-motion.cjs");
 const require_components_chart = require("./chart.cjs");
 const require_components_series_legend = require("./series-legend.cjs");
 const require_components_typography = require("./typography.cjs");

package/dist/components/bar-chart.js

@@ -1,8 +1,8 @@
 "use client";
-import { cn } from "../utils/cn.js";
-import { useReducedMotion } from "../hooks/use-reduced-motion.js";
 import { localeNumberFormat } from "../utils/format.js";
 import { buildYAxisScale, formatYAxisTick, measureYAxisGutter } from "../utils/chart-scale.js";
+import { cn } from "../utils/cn.js";
+import { useReducedMotion } from "../hooks/use-reduced-motion.js";
 import { ChartTooltipCard, clampTooltipPosition, useMeasuredSize } from "./chart.js";
 import { SeriesLegend } from "./series-legend.js";
 import { SectionTitle } from "./typography.js";

package/dist/components/battery-progress-row.cjs

@@ -4,6 +4,7 @@ const require_components_badge = require("./badge.cjs");
 const require_components_icon = require("./icon.cjs");
 const require_components_progress = require("./progress.cjs");
 let react = require("react");
+let _epilot_spark_icons = require("@epilot/spark-icons");
 let react_jsx_runtime = require("react/jsx-runtime");
 let cnfast = require("cnfast");
 //#region src/components/battery-progress-row.tsx
@@ -23,25 +24,27 @@ const BatteryProgressRow = ({ className, soc, children, ...rest }) => {
 		})
 	});
 };
-/**
-* Battery icon. Auto-selects its variant from the row's `soc`.
-*
-* @param className - Optional className to apply to the icon to further style it
-* @param icon - The icon to render (defaults to auto-selecting based on the row's `soc`)
-* @param ...rest - Additional props to pass to the span
-* @returns A React component that renders a battery icon
-*/
+const BATTERY_BY_LEVEL = [
+	_epilot_spark_icons.Battery0Bar,
+	_epilot_spark_icons.Battery1Bar,
+	_epilot_spark_icons.Battery2Bar,
+	_epilot_spark_icons.Battery3Bar,
+	_epilot_spark_icons.Battery4Bar,
+	_epilot_spark_icons.Battery5Bar,
+	_epilot_spark_icons.Battery6Bar
+];
 const BatteryProgressRowIcon = ({ className, icon: overrideIcon, ...rest }) => {
 	const { soc } = useBatteryProgressRowContext();
 	const clampedSoc = Math.min(Math.max(soc, 0), 100);
 	const batteryLevel = Math.min(Math.floor(clampedSoc / (100 / 7)), 6);
-	const iconName = clampedSoc === 100 ? "battery_full" : `battery_${batteryLevel}_bar`;
+	const fallback = clampedSoc === 100 ? _epilot_spark_icons.BatteryFull : BATTERY_BY_LEVEL[batteryLevel] ?? _epilot_spark_icons.Battery0Bar;
+	const Glyph = overrideIcon ?? fallback;
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_icon.Icon, {
 		...rest,
 		className,
 		color: "success",
-		name: overrideIcon ?? iconName,
-		size: "large"
+		size: "large",
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Glyph, {})
 	});
 };
 const BatteryProgressRowContent = ({ className, ...rest }) => {

package/dist/components/battery-progress-row.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"battery-progress-row.cjs","names":["Icon","Badge","Progress"],"sources":["../../src/components/battery-progress-row.tsx"],"sourcesContent":["import { createContext, useContext } from 'react'\nimport type { MaterialSymbolIconName } from '../icons/material-symbol'\nimport type { Tone } from '../lib/tones'\nimport { cn } from '../utils/cn'\nimport { Badge, type SparkBadgeColor } from './badge'\nimport { Icon } from './icon'\nimport { Progress } from './progress'\n\ninterface BatteryProgressRowContextValue {\n  soc: number\n}\n\nconst BatteryProgressRowContext =\n  createContext<BatteryProgressRowContextValue | null>(null)\n\nfunction useBatteryProgressRowContext() {\n  const context = useContext(BatteryProgressRowContext)\n  if (!context) {\n    throw new Error(\n      'BatteryProgressRow.* must be rendered inside <BatteryProgressRow>',\n    )\n  }\n  return context\n}\n\nconst BatteryProgressRow = ({\n  className,\n  soc,\n  children,\n  ...rest\n}: React.ComponentProps<'div'> & { soc: number }) => {\n  return (\n    <BatteryProgressRowContext.Provider value={{ soc }}>\n      <div className={cn('flex items-center gap-3', className)} {...rest}>\n        {children}\n      </div>\n    </BatteryProgressRowContext.Provider>\n  )\n}\n\n/**\n * Battery icon. Auto-selects its variant from the row's `soc`.\n *\n * @param className - Optional className to apply to the icon to further style it\n * @param icon - The icon to render (defaults to auto-selecting based on the row's `soc`)\n * @param ...rest - Additional props to pass to the span\n * @returns A React component that renders a battery icon\n */\nconst BatteryProgressRowIcon = ({\n  className,\n  icon: overrideIcon,\n  ...rest\n}: React.ComponentProps<'span'> & { icon?: MaterialSymbolIconName }) => {\n  const { soc } = useBatteryProgressRowContext()\n  const clampedSoc = Math.min(Math.max(soc, 0), 100)\n  const batteryLevel = Math.min(Math.floor(clampedSoc / (100 / 7)), 6)\n  const iconName: MaterialSymbolIconName =\n    clampedSoc === 100\n      ? 'battery_full'\n      : (`battery_${batteryLevel}_bar` as MaterialSymbolIconName)\n\n  return (\n    <Icon\n      {...rest}\n      className={className}\n      color=\"success\"\n      name={overrideIcon ?? iconName}\n      size=\"large\"\n    />\n  )\n}\n\nconst BatteryProgressRowContent = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn('flex min-w-0 flex-1 flex-col gap-1.5', className)}\n      {...rest}\n    />\n  )\n}\n\nconst BatteryProgressRowHeader = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn('flex items-center justify-between gap-2', className)}\n      {...rest}\n    />\n  )\n}\n\nconst toneToBadgeColor: Record<Tone, SparkBadgeColor> = {\n  success: 'success',\n  warning: 'warning',\n  error: 'danger',\n  accent: 'accent',\n  neutral: 'neutral',\n}\n\nconst BatteryProgressRowStateBadge = ({\n  className,\n  children,\n  tone = 'neutral',\n  ...rest\n}: Omit<React.ComponentProps<'span'>, 'color'> & { tone?: Tone }) => {\n  if (children === null || children === undefined) return null\n  return (\n    <Badge\n      color={toneToBadgeColor[tone]}\n      className={cn('w-fit', className)}\n      {...rest}\n    >\n      {children}\n    </Badge>\n  )\n}\n\nconst BatteryProgressRowChargingPower = ({\n  className,\n  children,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  if (children === null || children === undefined) return null\n  return (\n    <span\n      className={cn(\n        'ml-auto text-lg leading-tight font-bold text-gray tabular-nums',\n        className,\n      )}\n      {...rest}\n    >\n      {children}\n    </span>\n  )\n}\n\n/**\n * Linear progress bar bound to the row's `soc`.\n */\nconst BatteryProgressRowProgressBar = ({\n  className,\n  ...rest\n}: Omit<React.ComponentProps<typeof Progress>, 'value' | 'max'>) => {\n  const { soc } = useBatteryProgressRowContext()\n  return <Progress className={className} max={100} value={soc} {...rest} />\n}\n\nconst BatteryProgressRowFooter = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn(\n        'flex justify-between text-xs text-gray-light tabular-nums',\n        className,\n      )}\n      {...rest}\n    />\n  )\n}\n\nconst BatteryProgressRowMinSoc = ({\n  className,\n  children,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  if (children === null || children === undefined) return null\n  return (\n    <span className={cn(className)} {...rest}>\n      {children}\n    </span>\n  )\n}\n\n/**\n * Current state-of-charge label, rendered as `{soc}%`. Reads from context.\n */\nconst BatteryProgressRowSoc = ({\n  className,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  const { soc } = useBatteryProgressRowContext()\n  return (\n    <span className={cn(className)} {...rest}>\n      {`${soc}%`}\n    </span>\n  )\n}\n\nexport {\n  BatteryProgressRow,\n  BatteryProgressRowIcon,\n  BatteryProgressRowContent,\n  BatteryProgressRowHeader,\n  BatteryProgressRowStateBadge,\n  BatteryProgressRowChargingPower,\n  BatteryProgressRowProgressBar,\n  BatteryProgressRowFooter,\n  BatteryProgressRowMinSoc,\n  BatteryProgressRowSoc,\n}\n"],"mappings":"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"}
+{"version":3,"file":"battery-progress-row.cjs","names":["Battery0Bar","Battery1Bar","Battery2Bar","Battery3Bar","Battery4Bar","Battery5Bar","Battery6Bar","BatteryFull","Icon","Badge","Progress"],"sources":["../../src/components/battery-progress-row.tsx"],"sourcesContent":["import {\n  Battery0Bar,\n  Battery1Bar,\n  Battery2Bar,\n  Battery3Bar,\n  Battery4Bar,\n  Battery5Bar,\n  Battery6Bar,\n  BatteryFull,\n  type SparkIcon,\n} from '@epilot/spark-icons'\nimport { createContext, useContext } from 'react'\nimport type { Tone } from '../lib/tones'\nimport { cn } from '../utils/cn'\nimport { Badge, type SparkBadgeColor } from './badge'\nimport { Icon } from './icon'\nimport { Progress } from './progress'\n\ninterface BatteryProgressRowContextValue {\n  soc: number\n}\n\nconst BatteryProgressRowContext =\n  createContext<BatteryProgressRowContextValue | null>(null)\n\nfunction useBatteryProgressRowContext() {\n  const context = useContext(BatteryProgressRowContext)\n  if (!context) {\n    throw new Error(\n      'BatteryProgressRow.* must be rendered inside <BatteryProgressRow>',\n    )\n  }\n  return context\n}\n\nconst BatteryProgressRow = ({\n  className,\n  soc,\n  children,\n  ...rest\n}: React.ComponentProps<'div'> & { soc: number }) => {\n  return (\n    <BatteryProgressRowContext.Provider value={{ soc }}>\n      <div className={cn('flex items-center gap-3', className)} {...rest}>\n        {children}\n      </div>\n    </BatteryProgressRowContext.Provider>\n  )\n}\n\nconst BATTERY_BY_LEVEL = [\n  Battery0Bar,\n  Battery1Bar,\n  Battery2Bar,\n  Battery3Bar,\n  Battery4Bar,\n  Battery5Bar,\n  Battery6Bar,\n] as const\n\nconst BatteryProgressRowIcon = ({\n  className,\n  icon: overrideIcon,\n  ...rest\n}: React.ComponentProps<'span'> & { icon?: SparkIcon }) => {\n  const { soc } = useBatteryProgressRowContext()\n  const clampedSoc = Math.min(Math.max(soc, 0), 100)\n  const batteryLevel = Math.min(Math.floor(clampedSoc / (100 / 7)), 6)\n  const fallback: SparkIcon =\n    clampedSoc === 100\n      ? BatteryFull\n      : (BATTERY_BY_LEVEL[batteryLevel] ?? Battery0Bar)\n  const Glyph = overrideIcon ?? fallback\n\n  return (\n    <Icon {...rest} className={className} color=\"success\" size=\"large\">\n      <Glyph />\n    </Icon>\n  )\n}\n\nconst BatteryProgressRowContent = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn('flex min-w-0 flex-1 flex-col gap-1.5', className)}\n      {...rest}\n    />\n  )\n}\n\nconst BatteryProgressRowHeader = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn('flex items-center justify-between gap-2', className)}\n      {...rest}\n    />\n  )\n}\n\nconst toneToBadgeColor: Record<Tone, SparkBadgeColor> = {\n  success: 'success',\n  warning: 'warning',\n  error: 'danger',\n  accent: 'accent',\n  neutral: 'neutral',\n}\n\nconst BatteryProgressRowStateBadge = ({\n  className,\n  children,\n  tone = 'neutral',\n  ...rest\n}: Omit<React.ComponentProps<'span'>, 'color'> & { tone?: Tone }) => {\n  if (children === null || children === undefined) return null\n  return (\n    <Badge\n      color={toneToBadgeColor[tone]}\n      className={cn('w-fit', className)}\n      {...rest}\n    >\n      {children}\n    </Badge>\n  )\n}\n\nconst BatteryProgressRowChargingPower = ({\n  className,\n  children,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  if (children === null || children === undefined) return null\n  return (\n    <span\n      className={cn(\n        'ml-auto text-lg leading-tight font-bold text-gray tabular-nums',\n        className,\n      )}\n      {...rest}\n    >\n      {children}\n    </span>\n  )\n}\n\n/**\n * Linear progress bar bound to the row's `soc`.\n */\nconst BatteryProgressRowProgressBar = ({\n  className,\n  ...rest\n}: Omit<React.ComponentProps<typeof Progress>, 'value' | 'max'>) => {\n  const { soc } = useBatteryProgressRowContext()\n  return <Progress className={className} max={100} value={soc} {...rest} />\n}\n\nconst BatteryProgressRowFooter = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn(\n        'flex justify-between text-xs text-gray-light tabular-nums',\n        className,\n      )}\n      {...rest}\n    />\n  )\n}\n\nconst BatteryProgressRowMinSoc = ({\n  className,\n  children,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  if (children === null || children === undefined) return null\n  return (\n    <span className={cn(className)} {...rest}>\n      {children}\n    </span>\n  )\n}\n\n/**\n * Current state-of-charge label, rendered as `{soc}%`. Reads from context.\n */\nconst BatteryProgressRowSoc = ({\n  className,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  const { soc } = useBatteryProgressRowContext()\n  return (\n    <span className={cn(className)} {...rest}>\n      {`${soc}%`}\n    </span>\n  )\n}\n\nexport {\n  BatteryProgressRow,\n  BatteryProgressRowIcon,\n  BatteryProgressRowContent,\n  BatteryProgressRowHeader,\n  BatteryProgressRowStateBadge,\n  BatteryProgressRowChargingPower,\n  BatteryProgressRowProgressBar,\n  BatteryProgressRowFooter,\n  BatteryProgressRowMinSoc,\n  BatteryProgressRowSoc,\n}\n"],"mappings":"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"}

package/dist/components/battery-progress-row.d.cts

@@ -1,8 +1,8 @@
 "use client";
 
-import { MaterialSymbolIconName } from "../icons/material-symbol.cjs";
 import { Tone } from "../lib/tones.cjs";
 import { Progress } from "./progress.cjs";
+import { SparkIcon } from "@epilot/spark-icons";
 
 //#region src/components/battery-progress-row.d.ts
 declare const BatteryProgressRow: ({
@@ -13,20 +13,12 @@ declare const BatteryProgressRow: ({
 }: React.ComponentProps<"div"> & {
   soc: number;
 }) => import("react/jsx-runtime").JSX.Element;
-/**
- * Battery icon. Auto-selects its variant from the row's `soc`.
- *
- * @param className - Optional className to apply to the icon to further style it
- * @param icon - The icon to render (defaults to auto-selecting based on the row's `soc`)
- * @param ...rest - Additional props to pass to the span
- * @returns A React component that renders a battery icon
- */
 declare const BatteryProgressRowIcon: ({
   className,
   icon: overrideIcon,
   ...rest
 }: React.ComponentProps<"span"> & {
-  icon?: MaterialSymbolIconName;
+  icon?: SparkIcon;
 }) => import("react/jsx-runtime").JSX.Element;
 declare const BatteryProgressRowContent: ({
   className,

package/dist/components/battery-progress-row.d.ts

@@ -1,8 +1,8 @@
 "use client";
 
-import { MaterialSymbolIconName } from "../icons/material-symbol.js";
 import { Tone } from "../lib/tones.js";
 import { Progress } from "./progress.js";
+import { SparkIcon } from "@epilot/spark-icons";
 
 //#region src/components/battery-progress-row.d.ts
 declare const BatteryProgressRow: ({
@@ -13,20 +13,12 @@ declare const BatteryProgressRow: ({
 }: React.ComponentProps<"div"> & {
   soc: number;
 }) => import("react/jsx-runtime").JSX.Element;
-/**
- * Battery icon. Auto-selects its variant from the row's `soc`.
- *
- * @param className - Optional className to apply to the icon to further style it
- * @param icon - The icon to render (defaults to auto-selecting based on the row's `soc`)
- * @param ...rest - Additional props to pass to the span
- * @returns A React component that renders a battery icon
- */
 declare const BatteryProgressRowIcon: ({
   className,
   icon: overrideIcon,
   ...rest
 }: React.ComponentProps<"span"> & {
-  icon?: MaterialSymbolIconName;
+  icon?: SparkIcon;
 }) => import("react/jsx-runtime").JSX.Element;
 declare const BatteryProgressRowContent: ({
   className,

package/dist/components/battery-progress-row.js

@@ -4,6 +4,7 @@ import { Badge } from "./badge.js";
 import { Icon } from "./icon.js";
 import { Progress } from "./progress.js";
 import { createContext, useContext } from "react";
+import { Battery0Bar, Battery1Bar, Battery2Bar, Battery3Bar, Battery4Bar, Battery5Bar, Battery6Bar, BatteryFull } from "@epilot/spark-icons";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/battery-progress-row.tsx
 const BatteryProgressRowContext = createContext(null);
@@ -22,25 +23,27 @@ const BatteryProgressRow = ({ className, soc, children, ...rest }) => {
 		})
 	});
 };
-/**
-* Battery icon. Auto-selects its variant from the row's `soc`.
-*
-* @param className - Optional className to apply to the icon to further style it
-* @param icon - The icon to render (defaults to auto-selecting based on the row's `soc`)
-* @param ...rest - Additional props to pass to the span
-* @returns A React component that renders a battery icon
-*/
+const BATTERY_BY_LEVEL = [
+	Battery0Bar,
+	Battery1Bar,
+	Battery2Bar,
+	Battery3Bar,
+	Battery4Bar,
+	Battery5Bar,
+	Battery6Bar
+];
 const BatteryProgressRowIcon = ({ className, icon: overrideIcon, ...rest }) => {
 	const { soc } = useBatteryProgressRowContext();
 	const clampedSoc = Math.min(Math.max(soc, 0), 100);
 	const batteryLevel = Math.min(Math.floor(clampedSoc / (100 / 7)), 6);
-	const iconName = clampedSoc === 100 ? "battery_full" : `battery_${batteryLevel}_bar`;
+	const fallback = clampedSoc === 100 ? BatteryFull : BATTERY_BY_LEVEL[batteryLevel] ?? Battery0Bar;
+	const Glyph = overrideIcon ?? fallback;
 	return /* @__PURE__ */ jsx(Icon, {
 		...rest,
 		className,
 		color: "success",
-		name: overrideIcon ?? iconName,
-		size: "large"
+		size: "large",
+		children: /* @__PURE__ */ jsx(Glyph, {})
 	});
 };
 const BatteryProgressRowContent = ({ className, ...rest }) => {

package/dist/components/battery-progress-row.js.map

@@ -1 +1 @@
-{"version":3,"file":"battery-progress-row.js","names":[],"sources":["../../src/components/battery-progress-row.tsx"],"sourcesContent":["import { createContext, useContext } from 'react'\nimport type { MaterialSymbolIconName } from '../icons/material-symbol'\nimport type { Tone } from '../lib/tones'\nimport { cn } from '../utils/cn'\nimport { Badge, type SparkBadgeColor } from './badge'\nimport { Icon } from './icon'\nimport { Progress } from './progress'\n\ninterface BatteryProgressRowContextValue {\n  soc: number\n}\n\nconst BatteryProgressRowContext =\n  createContext<BatteryProgressRowContextValue | null>(null)\n\nfunction useBatteryProgressRowContext() {\n  const context = useContext(BatteryProgressRowContext)\n  if (!context) {\n    throw new Error(\n      'BatteryProgressRow.* must be rendered inside <BatteryProgressRow>',\n    )\n  }\n  return context\n}\n\nconst BatteryProgressRow = ({\n  className,\n  soc,\n  children,\n  ...rest\n}: React.ComponentProps<'div'> & { soc: number }) => {\n  return (\n    <BatteryProgressRowContext.Provider value={{ soc }}>\n      <div className={cn('flex items-center gap-3', className)} {...rest}>\n        {children}\n      </div>\n    </BatteryProgressRowContext.Provider>\n  )\n}\n\n/**\n * Battery icon. Auto-selects its variant from the row's `soc`.\n *\n * @param className - Optional className to apply to the icon to further style it\n * @param icon - The icon to render (defaults to auto-selecting based on the row's `soc`)\n * @param ...rest - Additional props to pass to the span\n * @returns A React component that renders a battery icon\n */\nconst BatteryProgressRowIcon = ({\n  className,\n  icon: overrideIcon,\n  ...rest\n}: React.ComponentProps<'span'> & { icon?: MaterialSymbolIconName }) => {\n  const { soc } = useBatteryProgressRowContext()\n  const clampedSoc = Math.min(Math.max(soc, 0), 100)\n  const batteryLevel = Math.min(Math.floor(clampedSoc / (100 / 7)), 6)\n  const iconName: MaterialSymbolIconName =\n    clampedSoc === 100\n      ? 'battery_full'\n      : (`battery_${batteryLevel}_bar` as MaterialSymbolIconName)\n\n  return (\n    <Icon\n      {...rest}\n      className={className}\n      color=\"success\"\n      name={overrideIcon ?? iconName}\n      size=\"large\"\n    />\n  )\n}\n\nconst BatteryProgressRowContent = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn('flex min-w-0 flex-1 flex-col gap-1.5', className)}\n      {...rest}\n    />\n  )\n}\n\nconst BatteryProgressRowHeader = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn('flex items-center justify-between gap-2', className)}\n      {...rest}\n    />\n  )\n}\n\nconst toneToBadgeColor: Record<Tone, SparkBadgeColor> = {\n  success: 'success',\n  warning: 'warning',\n  error: 'danger',\n  accent: 'accent',\n  neutral: 'neutral',\n}\n\nconst BatteryProgressRowStateBadge = ({\n  className,\n  children,\n  tone = 'neutral',\n  ...rest\n}: Omit<React.ComponentProps<'span'>, 'color'> & { tone?: Tone }) => {\n  if (children === null || children === undefined) return null\n  return (\n    <Badge\n      color={toneToBadgeColor[tone]}\n      className={cn('w-fit', className)}\n      {...rest}\n    >\n      {children}\n    </Badge>\n  )\n}\n\nconst BatteryProgressRowChargingPower = ({\n  className,\n  children,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  if (children === null || children === undefined) return null\n  return (\n    <span\n      className={cn(\n        'ml-auto text-lg leading-tight font-bold text-gray tabular-nums',\n        className,\n      )}\n      {...rest}\n    >\n      {children}\n    </span>\n  )\n}\n\n/**\n * Linear progress bar bound to the row's `soc`.\n */\nconst BatteryProgressRowProgressBar = ({\n  className,\n  ...rest\n}: Omit<React.ComponentProps<typeof Progress>, 'value' | 'max'>) => {\n  const { soc } = useBatteryProgressRowContext()\n  return <Progress className={className} max={100} value={soc} {...rest} />\n}\n\nconst BatteryProgressRowFooter = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn(\n        'flex justify-between text-xs text-gray-light tabular-nums',\n        className,\n      )}\n      {...rest}\n    />\n  )\n}\n\nconst BatteryProgressRowMinSoc = ({\n  className,\n  children,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  if (children === null || children === undefined) return null\n  return (\n    <span className={cn(className)} {...rest}>\n      {children}\n    </span>\n  )\n}\n\n/**\n * Current state-of-charge label, rendered as `{soc}%`. Reads from context.\n */\nconst BatteryProgressRowSoc = ({\n  className,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  const { soc } = useBatteryProgressRowContext()\n  return (\n    <span className={cn(className)} {...rest}>\n      {`${soc}%`}\n    </span>\n  )\n}\n\nexport {\n  BatteryProgressRow,\n  BatteryProgressRowIcon,\n  BatteryProgressRowContent,\n  BatteryProgressRowHeader,\n  BatteryProgressRowStateBadge,\n  BatteryProgressRowChargingPower,\n  BatteryProgressRowProgressBar,\n  BatteryProgressRowFooter,\n  BatteryProgressRowMinSoc,\n  BatteryProgressRowSoc,\n}\n"],"mappings":";;;;;;;;AAYA,MAAM,4BACJ,cAAqD,IAAI;AAE3D,SAAS,+BAA+B;CACtC,MAAM,UAAU,WAAW,yBAAyB;CACpD,IAAI,CAAC,SACH,MAAM,IAAI,MACR,mEACF;CAEF,OAAO;AACT;AAEA,MAAM,sBAAsB,EAC1B,WACA,KACA,UACA,GAAG,WACgD;CACnD,OACE,oBAAC,0BAA0B,UAA3B;EAAoC,OAAO,EAAE,IAAI;YAC/C,oBAAC,OAAD;GAAK,WAAW,GAAG,2BAA2B,SAAS;GAAG,GAAI;GAC3D;EACE,CAAA;CAC6B,CAAA;AAExC;;;;;;;;;AAUA,MAAM,0BAA0B,EAC9B,WACA,MAAM,cACN,GAAG,WACmE;CACtE,MAAM,EAAE,QAAQ,6BAA6B;CAC7C,MAAM,aAAa,KAAK,IAAI,KAAK,IAAI,KAAK,CAAC,GAAG,GAAG;CACjD,MAAM,eAAe,KAAK,IAAI,KAAK,MAAM,cAAc,MAAM,EAAE,GAAG,CAAC;CACnE,MAAM,WACJ,eAAe,MACX,iBACC,WAAW,aAAa;CAE/B,OACE,oBAAC,MAAD;EACE,GAAI;EACO;EACX,OAAM;EACN,MAAM,gBAAgB;EACtB,MAAK;CACN,CAAA;AAEL;AAEA,MAAM,6BAA6B,EACjC,WACA,GAAG,WAC8B;CACjC,OACE,oBAAC,OAAD;EACE,WAAW,GAAG,wCAAwC,SAAS;EAC/D,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,4BAA4B,EAChC,WACA,GAAG,WAC8B;CACjC,OACE,oBAAC,OAAD;EACE,WAAW,GAAG,2CAA2C,SAAS;EAClE,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,mBAAkD;CACtD,SAAS;CACT,SAAS;CACT,OAAO;CACP,QAAQ;CACR,SAAS;AACX;AAEA,MAAM,gCAAgC,EACpC,WACA,UACA,OAAO,WACP,GAAG,WACgE;CACnE,IAAI,aAAa,QAAQ,aAAa,KAAA,GAAW,OAAO;CACxD,OACE,oBAAC,OAAD;EACE,OAAO,iBAAiB;EACxB,WAAW,GAAG,SAAS,SAAS;EAChC,GAAI;EAEH;CACI,CAAA;AAEX;AAEA,MAAM,mCAAmC,EACvC,WACA,UACA,GAAG,WAC+B;CAClC,IAAI,aAAa,QAAQ,aAAa,KAAA,GAAW,OAAO;CACxD,OACE,oBAAC,QAAD;EACE,WAAW,GACT,kEACA,SACF;EACA,GAAI;EAEH;CACG,CAAA;AAEV;;;;AAKA,MAAM,iCAAiC,EACrC,WACA,GAAG,WAC+D;CAClE,MAAM,EAAE,QAAQ,6BAA6B;CAC7C,OAAO,oBAAC,UAAD;EAAqB;EAAW,KAAK;EAAK,OAAO;EAAK,GAAI;CAAO,CAAA;AAC1E;AAEA,MAAM,4BAA4B,EAChC,WACA,GAAG,WAC8B;CACjC,OACE,oBAAC,OAAD;EACE,WAAW,GACT,6DACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,4BAA4B,EAChC,WACA,UACA,GAAG,WAC+B;CAClC,IAAI,aAAa,QAAQ,aAAa,KAAA,GAAW,OAAO;CACxD,OACE,oBAAC,QAAD;EAAM,WAAW,GAAG,SAAS;EAAG,GAAI;EACjC;CACG,CAAA;AAEV;;;;AAKA,MAAM,yBAAyB,EAC7B,WACA,GAAG,WAC+B;CAClC,MAAM,EAAE,QAAQ,6BAA6B;CAC7C,OACE,oBAAC,QAAD;EAAM,WAAW,GAAG,SAAS;EAAG,GAAI;YACjC,GAAG,IAAI;CACJ,CAAA;AAEV"}
+{"version":3,"file":"battery-progress-row.js","names":[],"sources":["../../src/components/battery-progress-row.tsx"],"sourcesContent":["import {\n  Battery0Bar,\n  Battery1Bar,\n  Battery2Bar,\n  Battery3Bar,\n  Battery4Bar,\n  Battery5Bar,\n  Battery6Bar,\n  BatteryFull,\n  type SparkIcon,\n} from '@epilot/spark-icons'\nimport { createContext, useContext } from 'react'\nimport type { Tone } from '../lib/tones'\nimport { cn } from '../utils/cn'\nimport { Badge, type SparkBadgeColor } from './badge'\nimport { Icon } from './icon'\nimport { Progress } from './progress'\n\ninterface BatteryProgressRowContextValue {\n  soc: number\n}\n\nconst BatteryProgressRowContext =\n  createContext<BatteryProgressRowContextValue | null>(null)\n\nfunction useBatteryProgressRowContext() {\n  const context = useContext(BatteryProgressRowContext)\n  if (!context) {\n    throw new Error(\n      'BatteryProgressRow.* must be rendered inside <BatteryProgressRow>',\n    )\n  }\n  return context\n}\n\nconst BatteryProgressRow = ({\n  className,\n  soc,\n  children,\n  ...rest\n}: React.ComponentProps<'div'> & { soc: number }) => {\n  return (\n    <BatteryProgressRowContext.Provider value={{ soc }}>\n      <div className={cn('flex items-center gap-3', className)} {...rest}>\n        {children}\n      </div>\n    </BatteryProgressRowContext.Provider>\n  )\n}\n\nconst BATTERY_BY_LEVEL = [\n  Battery0Bar,\n  Battery1Bar,\n  Battery2Bar,\n  Battery3Bar,\n  Battery4Bar,\n  Battery5Bar,\n  Battery6Bar,\n] as const\n\nconst BatteryProgressRowIcon = ({\n  className,\n  icon: overrideIcon,\n  ...rest\n}: React.ComponentProps<'span'> & { icon?: SparkIcon }) => {\n  const { soc } = useBatteryProgressRowContext()\n  const clampedSoc = Math.min(Math.max(soc, 0), 100)\n  const batteryLevel = Math.min(Math.floor(clampedSoc / (100 / 7)), 6)\n  const fallback: SparkIcon =\n    clampedSoc === 100\n      ? BatteryFull\n      : (BATTERY_BY_LEVEL[batteryLevel] ?? Battery0Bar)\n  const Glyph = overrideIcon ?? fallback\n\n  return (\n    <Icon {...rest} className={className} color=\"success\" size=\"large\">\n      <Glyph />\n    </Icon>\n  )\n}\n\nconst BatteryProgressRowContent = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn('flex min-w-0 flex-1 flex-col gap-1.5', className)}\n      {...rest}\n    />\n  )\n}\n\nconst BatteryProgressRowHeader = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn('flex items-center justify-between gap-2', className)}\n      {...rest}\n    />\n  )\n}\n\nconst toneToBadgeColor: Record<Tone, SparkBadgeColor> = {\n  success: 'success',\n  warning: 'warning',\n  error: 'danger',\n  accent: 'accent',\n  neutral: 'neutral',\n}\n\nconst BatteryProgressRowStateBadge = ({\n  className,\n  children,\n  tone = 'neutral',\n  ...rest\n}: Omit<React.ComponentProps<'span'>, 'color'> & { tone?: Tone }) => {\n  if (children === null || children === undefined) return null\n  return (\n    <Badge\n      color={toneToBadgeColor[tone]}\n      className={cn('w-fit', className)}\n      {...rest}\n    >\n      {children}\n    </Badge>\n  )\n}\n\nconst BatteryProgressRowChargingPower = ({\n  className,\n  children,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  if (children === null || children === undefined) return null\n  return (\n    <span\n      className={cn(\n        'ml-auto text-lg leading-tight font-bold text-gray tabular-nums',\n        className,\n      )}\n      {...rest}\n    >\n      {children}\n    </span>\n  )\n}\n\n/**\n * Linear progress bar bound to the row's `soc`.\n */\nconst BatteryProgressRowProgressBar = ({\n  className,\n  ...rest\n}: Omit<React.ComponentProps<typeof Progress>, 'value' | 'max'>) => {\n  const { soc } = useBatteryProgressRowContext()\n  return <Progress className={className} max={100} value={soc} {...rest} />\n}\n\nconst BatteryProgressRowFooter = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn(\n        'flex justify-between text-xs text-gray-light tabular-nums',\n        className,\n      )}\n      {...rest}\n    />\n  )\n}\n\nconst BatteryProgressRowMinSoc = ({\n  className,\n  children,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  if (children === null || children === undefined) return null\n  return (\n    <span className={cn(className)} {...rest}>\n      {children}\n    </span>\n  )\n}\n\n/**\n * Current state-of-charge label, rendered as `{soc}%`. Reads from context.\n */\nconst BatteryProgressRowSoc = ({\n  className,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  const { soc } = useBatteryProgressRowContext()\n  return (\n    <span className={cn(className)} {...rest}>\n      {`${soc}%`}\n    </span>\n  )\n}\n\nexport {\n  BatteryProgressRow,\n  BatteryProgressRowIcon,\n  BatteryProgressRowContent,\n  BatteryProgressRowHeader,\n  BatteryProgressRowStateBadge,\n  BatteryProgressRowChargingPower,\n  BatteryProgressRowProgressBar,\n  BatteryProgressRowFooter,\n  BatteryProgressRowMinSoc,\n  BatteryProgressRowSoc,\n}\n"],"mappings":";;;;;;;;;AAsBA,MAAM,4BACJ,cAAqD,IAAI;AAE3D,SAAS,+BAA+B;CACtC,MAAM,UAAU,WAAW,yBAAyB;CACpD,IAAI,CAAC,SACH,MAAM,IAAI,MACR,mEACF;CAEF,OAAO;AACT;AAEA,MAAM,sBAAsB,EAC1B,WACA,KACA,UACA,GAAG,WACgD;CACnD,OACE,oBAAC,0BAA0B,UAA3B;EAAoC,OAAO,EAAE,IAAI;YAC/C,oBAAC,OAAD;GAAK,WAAW,GAAG,2BAA2B,SAAS;GAAG,GAAI;GAC3D;EACE,CAAA;CAC6B,CAAA;AAExC;AAEA,MAAM,mBAAmB;CACvB;CACA;CACA;CACA;CACA;CACA;CACA;AACF;AAEA,MAAM,0BAA0B,EAC9B,WACA,MAAM,cACN,GAAG,WACsD;CACzD,MAAM,EAAE,QAAQ,6BAA6B;CAC7C,MAAM,aAAa,KAAK,IAAI,KAAK,IAAI,KAAK,CAAC,GAAG,GAAG;CACjD,MAAM,eAAe,KAAK,IAAI,KAAK,MAAM,cAAc,MAAM,EAAE,GAAG,CAAC;CACnE,MAAM,WACJ,eAAe,MACX,cACC,iBAAiB,iBAAiB;CACzC,MAAM,QAAQ,gBAAgB;CAE9B,OACE,oBAAC,MAAD;EAAM,GAAI;EAAiB;EAAW,OAAM;EAAU,MAAK;YACzD,oBAAC,OAAD,CAAQ,CAAA;CACJ,CAAA;AAEV;AAEA,MAAM,6BAA6B,EACjC,WACA,GAAG,WAC8B;CACjC,OACE,oBAAC,OAAD;EACE,WAAW,GAAG,wCAAwC,SAAS;EAC/D,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,4BAA4B,EAChC,WACA,GAAG,WAC8B;CACjC,OACE,oBAAC,OAAD;EACE,WAAW,GAAG,2CAA2C,SAAS;EAClE,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,mBAAkD;CACtD,SAAS;CACT,SAAS;CACT,OAAO;CACP,QAAQ;CACR,SAAS;AACX;AAEA,MAAM,gCAAgC,EACpC,WACA,UACA,OAAO,WACP,GAAG,WACgE;CACnE,IAAI,aAAa,QAAQ,aAAa,KAAA,GAAW,OAAO;CACxD,OACE,oBAAC,OAAD;EACE,OAAO,iBAAiB;EACxB,WAAW,GAAG,SAAS,SAAS;EAChC,GAAI;EAEH;CACI,CAAA;AAEX;AAEA,MAAM,mCAAmC,EACvC,WACA,UACA,GAAG,WAC+B;CAClC,IAAI,aAAa,QAAQ,aAAa,KAAA,GAAW,OAAO;CACxD,OACE,oBAAC,QAAD;EACE,WAAW,GACT,kEACA,SACF;EACA,GAAI;EAEH;CACG,CAAA;AAEV;;;;AAKA,MAAM,iCAAiC,EACrC,WACA,GAAG,WAC+D;CAClE,MAAM,EAAE,QAAQ,6BAA6B;CAC7C,OAAO,oBAAC,UAAD;EAAqB;EAAW,KAAK;EAAK,OAAO;EAAK,GAAI;CAAO,CAAA;AAC1E;AAEA,MAAM,4BAA4B,EAChC,WACA,GAAG,WAC8B;CACjC,OACE,oBAAC,OAAD;EACE,WAAW,GACT,6DACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,4BAA4B,EAChC,WACA,UACA,GAAG,WAC+B;CAClC,IAAI,aAAa,QAAQ,aAAa,KAAA,GAAW,OAAO;CACxD,OACE,oBAAC,QAAD;EAAM,WAAW,GAAG,SAAS;EAAG,GAAI;EACjC;CACG,CAAA;AAEV;;;;AAKA,MAAM,yBAAyB,EAC7B,WACA,GAAG,WAC+B;CAClC,MAAM,EAAE,QAAQ,6BAA6B;CAC7C,OACE,oBAAC,QAAD;EAAM,WAAW,GAAG,SAAS;EAAG,GAAI;YACjC,GAAG,IAAI;CACJ,CAAA;AAEV"}

package/dist/components/bubble.d.cts

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

package/dist/components/bubble.d.ts

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