@epilot/spark-ui 1.0.0-alpha.3 → 1.0.0-alpha.5

package/dist/components/donut-chart.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"donut-chart.cjs","names":[],"sources":["../../src/components/donut-chart.tsx"],"sourcesContent":["interface DonutSegment {\n  value: number\n  color: string\n}\n\ninterface DonutChartProps {\n  segments: DonutSegment[]\n  centerLabel: string\n  centerSub: string\n}\n\nconst RADIUS = 66\nconst STROKE = 14\nconst SIZE = 180\nconst CIRCUMFERENCE = 2 * Math.PI * RADIUS\n\nexport function DonutChart({\n  centerLabel,\n  centerSub,\n  segments,\n}: DonutChartProps) {\n  const total = segments.reduce((sum, seg) => sum + seg.value, 0)\n\n  let offset = 0\n  const arcs = segments.map((seg) => {\n    const dash = total > 0 ? (seg.value / total) * CIRCUMFERENCE : 0\n    const arc = {\n      color: seg.color,\n      dash,\n      gap: CIRCUMFERENCE - dash,\n      offset,\n    }\n    offset += dash\n    return arc\n  })\n\n  return (\n    <svg width={SIZE} height={SIZE} viewBox={`0 0 ${SIZE} ${SIZE}`}>\n      <circle\n        cx={SIZE / 2}\n        cy={SIZE / 2}\n        r={RADIUS}\n        fill=\"none\"\n        stroke=\"var(--gray-a3)\"\n        strokeWidth={STROKE}\n      />\n      {arcs.map((arc, i) => (\n        <circle\n          key={i}\n          cx={SIZE / 2}\n          cy={SIZE / 2}\n          r={RADIUS}\n          fill=\"none\"\n          stroke={arc.color}\n          strokeWidth={STROKE}\n          strokeDasharray={`${arc.dash} ${arc.gap}`}\n          strokeDashoffset={CIRCUMFERENCE / 4 - arc.offset}\n          strokeLinecap=\"butt\"\n        />\n      ))}\n      <text\n        x={SIZE / 2}\n        y={SIZE / 2 - 5}\n        textAnchor=\"middle\"\n        fontSize={20}\n        fontWeight={700}\n        fill=\"var(--gray-12)\"\n      >\n        {centerLabel}\n      </text>\n      <text\n        x={SIZE / 2}\n        y={SIZE / 2 + 14}\n        textAnchor=\"middle\"\n        fontSize={12}\n        fill=\"var(--gray-a11)\"\n      >\n        {centerSub}\n      </text>\n    </svg>\n  )\n}\n"],"mappings":";;;;;AAWA,MAAM,SAAS;AACf,MAAM,SAAS;AACf,MAAM,OAAO;AACb,MAAM,gBAAgB,IAAI,KAAK,KAAK;AAEpC,SAAgB,WAAW,EACzB,aACA,WACA,YACkB;CAClB,MAAM,QAAQ,SAAS,QAAQ,KAAK,QAAQ,MAAM,IAAI,OAAO,EAAE;CAE/D,IAAI,SAAS;CACb,MAAM,OAAO,SAAS,KAAK,QAAQ;EACjC,MAAM,OAAO,QAAQ,IAAK,IAAI,QAAQ,QAAS,gBAAgB;EAC/D,MAAM,MAAM;GACV,OAAO,IAAI;GACX;GACA,KAAK,gBAAgB;GACrB;GACD;AACD,YAAU;AACV,SAAO;GACP;AAEF,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,OAAO;EAAM,QAAQ;EAAM,SAAS,OAAO,KAAK,GAAG;YAAxD;GACE,iBAAA,GAAA,kBAAA,KAAC,UAAD;IACE,IAAI,OAAO;IACX,IAAI,OAAO;IACX,GAAG;IACH,MAAK;IACL,QAAO;IACP,aAAa;IACb,CAAA;GACD,KAAK,KAAK,KAAK,MACd,iBAAA,GAAA,kBAAA,KAAC,UAAD;IAEE,IAAI,OAAO;IACX,IAAI,OAAO;IACX,GAAG;IACH,MAAK;IACL,QAAQ,IAAI;IACZ,aAAa;IACb,iBAAiB,GAAG,IAAI,KAAK,GAAG,IAAI;IACpC,kBAAkB,gBAAgB,IAAI,IAAI;IAC1C,eAAc;IACd,EAVK,EAUL,CACF;GACF,iBAAA,GAAA,kBAAA,KAAC,QAAD;IACE,GAAG,OAAO;IACV,GAAG,OAAO,IAAI;IACd,YAAW;IACX,UAAU;IACV,YAAY;IACZ,MAAK;cAEJ;IACI,CAAA;GACP,iBAAA,GAAA,kBAAA,KAAC,QAAD;IACE,GAAG,OAAO;IACV,GAAG,OAAO,IAAI;IACd,YAAW;IACX,UAAU;IACV,MAAK;cAEJ;IACI,CAAA;GACH"}
+{"version":3,"file":"donut-chart.cjs","names":[],"sources":["../../src/components/donut-chart.tsx"],"sourcesContent":["interface DonutSegment {\n  value: number\n  color: string\n}\n\ninterface DonutChartProps {\n  segments: DonutSegment[]\n  centerLabel: string\n  centerSub: string\n}\n\nconst RADIUS = 66\nconst STROKE = 14\nconst SIZE = 180\nconst CIRCUMFERENCE = 2 * Math.PI * RADIUS\n\nexport function DonutChart({\n  centerLabel,\n  centerSub,\n  segments,\n}: DonutChartProps) {\n  const total = segments.reduce((sum, seg) => sum + seg.value, 0)\n\n  let offset = 0\n  const arcs = segments.map((seg) => {\n    const dash = total > 0 ? (seg.value / total) * CIRCUMFERENCE : 0\n    const arc = {\n      color: seg.color,\n      dash,\n      gap: CIRCUMFERENCE - dash,\n      offset,\n    }\n    offset += dash\n    return arc\n  })\n\n  return (\n    <svg width={SIZE} height={SIZE} viewBox={`0 0 ${SIZE} ${SIZE}`}>\n      <circle\n        cx={SIZE / 2}\n        cy={SIZE / 2}\n        r={RADIUS}\n        fill=\"none\"\n        stroke=\"var(--neutral-a3)\"\n        strokeWidth={STROKE}\n      />\n      {arcs.map((arc, i) => (\n        <circle\n          key={i}\n          cx={SIZE / 2}\n          cy={SIZE / 2}\n          r={RADIUS}\n          fill=\"none\"\n          stroke={arc.color}\n          strokeWidth={STROKE}\n          strokeDasharray={`${arc.dash} ${arc.gap}`}\n          strokeDashoffset={CIRCUMFERENCE / 4 - arc.offset}\n          strokeLinecap=\"butt\"\n        />\n      ))}\n      <text\n        x={SIZE / 2}\n        y={SIZE / 2 - 5}\n        textAnchor=\"middle\"\n        fontSize={20}\n        fontWeight={700}\n        fill=\"var(--neutral-12)\"\n      >\n        {centerLabel}\n      </text>\n      <text\n        x={SIZE / 2}\n        y={SIZE / 2 + 14}\n        textAnchor=\"middle\"\n        fontSize={12}\n        fill=\"var(--neutral-a11)\"\n      >\n        {centerSub}\n      </text>\n    </svg>\n  )\n}\n"],"mappings":";;;;;AAWA,MAAM,SAAS;AACf,MAAM,SAAS;AACf,MAAM,OAAO;AACb,MAAM,gBAAgB,IAAI,KAAK,KAAK;AAEpC,SAAgB,WAAW,EACzB,aACA,WACA,YACkB;CAClB,MAAM,QAAQ,SAAS,QAAQ,KAAK,QAAQ,MAAM,IAAI,OAAO,EAAE;CAE/D,IAAI,SAAS;CACb,MAAM,OAAO,SAAS,KAAK,QAAQ;EACjC,MAAM,OAAO,QAAQ,IAAK,IAAI,QAAQ,QAAS,gBAAgB;EAC/D,MAAM,MAAM;GACV,OAAO,IAAI;GACX;GACA,KAAK,gBAAgB;GACrB;GACD;AACD,YAAU;AACV,SAAO;GACP;AAEF,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,OAAO;EAAM,QAAQ;EAAM,SAAS,OAAO,KAAK,GAAG;YAAxD;GACE,iBAAA,GAAA,kBAAA,KAAC,UAAD;IACE,IAAI,OAAO;IACX,IAAI,OAAO;IACX,GAAG;IACH,MAAK;IACL,QAAO;IACP,aAAa;IACb,CAAA;GACD,KAAK,KAAK,KAAK,MACd,iBAAA,GAAA,kBAAA,KAAC,UAAD;IAEE,IAAI,OAAO;IACX,IAAI,OAAO;IACX,GAAG;IACH,MAAK;IACL,QAAQ,IAAI;IACZ,aAAa;IACb,iBAAiB,GAAG,IAAI,KAAK,GAAG,IAAI;IACpC,kBAAkB,gBAAgB,IAAI,IAAI;IAC1C,eAAc;IACd,EAVK,EAUL,CACF;GACF,iBAAA,GAAA,kBAAA,KAAC,QAAD;IACE,GAAG,OAAO;IACV,GAAG,OAAO,IAAI;IACd,YAAW;IACX,UAAU;IACV,YAAY;IACZ,MAAK;cAEJ;IACI,CAAA;GACP,iBAAA,GAAA,kBAAA,KAAC,QAAD;IACE,GAAG,OAAO;IACV,GAAG,OAAO,IAAI;IACd,YAAW;IACX,UAAU;IACV,MAAK;cAEJ;IACI,CAAA;GACH"}

package/dist/components/donut-chart.js

@@ -29,7 +29,7 @@ function DonutChart({ centerLabel, centerSub, segments }) {
 				cy: SIZE / 2,
 				r: RADIUS,
 				fill: "none",
-				stroke: "var(--gray-a3)",
+				stroke: "var(--neutral-a3)",
 				strokeWidth: STROKE
 			}),
 			arcs.map((arc, i) => /* @__PURE__ */ jsx("circle", {
@@ -49,7 +49,7 @@ function DonutChart({ centerLabel, centerSub, segments }) {
 				textAnchor: "middle",
 				fontSize: 20,
 				fontWeight: 700,
-				fill: "var(--gray-12)",
+				fill: "var(--neutral-12)",
 				children: centerLabel
 			}),
 			/* @__PURE__ */ jsx("text", {
@@ -57,7 +57,7 @@ function DonutChart({ centerLabel, centerSub, segments }) {
 				y: SIZE / 2 + 14,
 				textAnchor: "middle",
 				fontSize: 12,
-				fill: "var(--gray-a11)",
+				fill: "var(--neutral-a11)",
 				children: centerSub
 			})
 		]

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

@@ -1 +1 @@
-{"version":3,"file":"donut-chart.js","names":[],"sources":["../../src/components/donut-chart.tsx"],"sourcesContent":["interface DonutSegment {\n  value: number\n  color: string\n}\n\ninterface DonutChartProps {\n  segments: DonutSegment[]\n  centerLabel: string\n  centerSub: string\n}\n\nconst RADIUS = 66\nconst STROKE = 14\nconst SIZE = 180\nconst CIRCUMFERENCE = 2 * Math.PI * RADIUS\n\nexport function DonutChart({\n  centerLabel,\n  centerSub,\n  segments,\n}: DonutChartProps) {\n  const total = segments.reduce((sum, seg) => sum + seg.value, 0)\n\n  let offset = 0\n  const arcs = segments.map((seg) => {\n    const dash = total > 0 ? (seg.value / total) * CIRCUMFERENCE : 0\n    const arc = {\n      color: seg.color,\n      dash,\n      gap: CIRCUMFERENCE - dash,\n      offset,\n    }\n    offset += dash\n    return arc\n  })\n\n  return (\n    <svg width={SIZE} height={SIZE} viewBox={`0 0 ${SIZE} ${SIZE}`}>\n      <circle\n        cx={SIZE / 2}\n        cy={SIZE / 2}\n        r={RADIUS}\n        fill=\"none\"\n        stroke=\"var(--gray-a3)\"\n        strokeWidth={STROKE}\n      />\n      {arcs.map((arc, i) => (\n        <circle\n          key={i}\n          cx={SIZE / 2}\n          cy={SIZE / 2}\n          r={RADIUS}\n          fill=\"none\"\n          stroke={arc.color}\n          strokeWidth={STROKE}\n          strokeDasharray={`${arc.dash} ${arc.gap}`}\n          strokeDashoffset={CIRCUMFERENCE / 4 - arc.offset}\n          strokeLinecap=\"butt\"\n        />\n      ))}\n      <text\n        x={SIZE / 2}\n        y={SIZE / 2 - 5}\n        textAnchor=\"middle\"\n        fontSize={20}\n        fontWeight={700}\n        fill=\"var(--gray-12)\"\n      >\n        {centerLabel}\n      </text>\n      <text\n        x={SIZE / 2}\n        y={SIZE / 2 + 14}\n        textAnchor=\"middle\"\n        fontSize={12}\n        fill=\"var(--gray-a11)\"\n      >\n        {centerSub}\n      </text>\n    </svg>\n  )\n}\n"],"mappings":";;;AAWA,MAAM,SAAS;AACf,MAAM,SAAS;AACf,MAAM,OAAO;AACb,MAAM,gBAAgB,IAAI,KAAK,KAAK;AAEpC,SAAgB,WAAW,EACzB,aACA,WACA,YACkB;CAClB,MAAM,QAAQ,SAAS,QAAQ,KAAK,QAAQ,MAAM,IAAI,OAAO,EAAE;CAE/D,IAAI,SAAS;CACb,MAAM,OAAO,SAAS,KAAK,QAAQ;EACjC,MAAM,OAAO,QAAQ,IAAK,IAAI,QAAQ,QAAS,gBAAgB;EAC/D,MAAM,MAAM;GACV,OAAO,IAAI;GACX;GACA,KAAK,gBAAgB;GACrB;GACD;AACD,YAAU;AACV,SAAO;GACP;AAEF,QACE,qBAAC,OAAD;EAAK,OAAO;EAAM,QAAQ;EAAM,SAAS,OAAO,KAAK,GAAG;YAAxD;GACE,oBAAC,UAAD;IACE,IAAI,OAAO;IACX,IAAI,OAAO;IACX,GAAG;IACH,MAAK;IACL,QAAO;IACP,aAAa;IACb,CAAA;GACD,KAAK,KAAK,KAAK,MACd,oBAAC,UAAD;IAEE,IAAI,OAAO;IACX,IAAI,OAAO;IACX,GAAG;IACH,MAAK;IACL,QAAQ,IAAI;IACZ,aAAa;IACb,iBAAiB,GAAG,IAAI,KAAK,GAAG,IAAI;IACpC,kBAAkB,gBAAgB,IAAI,IAAI;IAC1C,eAAc;IACd,EAVK,EAUL,CACF;GACF,oBAAC,QAAD;IACE,GAAG,OAAO;IACV,GAAG,OAAO,IAAI;IACd,YAAW;IACX,UAAU;IACV,YAAY;IACZ,MAAK;cAEJ;IACI,CAAA;GACP,oBAAC,QAAD;IACE,GAAG,OAAO;IACV,GAAG,OAAO,IAAI;IACd,YAAW;IACX,UAAU;IACV,MAAK;cAEJ;IACI,CAAA;GACH"}
+{"version":3,"file":"donut-chart.js","names":[],"sources":["../../src/components/donut-chart.tsx"],"sourcesContent":["interface DonutSegment {\n  value: number\n  color: string\n}\n\ninterface DonutChartProps {\n  segments: DonutSegment[]\n  centerLabel: string\n  centerSub: string\n}\n\nconst RADIUS = 66\nconst STROKE = 14\nconst SIZE = 180\nconst CIRCUMFERENCE = 2 * Math.PI * RADIUS\n\nexport function DonutChart({\n  centerLabel,\n  centerSub,\n  segments,\n}: DonutChartProps) {\n  const total = segments.reduce((sum, seg) => sum + seg.value, 0)\n\n  let offset = 0\n  const arcs = segments.map((seg) => {\n    const dash = total > 0 ? (seg.value / total) * CIRCUMFERENCE : 0\n    const arc = {\n      color: seg.color,\n      dash,\n      gap: CIRCUMFERENCE - dash,\n      offset,\n    }\n    offset += dash\n    return arc\n  })\n\n  return (\n    <svg width={SIZE} height={SIZE} viewBox={`0 0 ${SIZE} ${SIZE}`}>\n      <circle\n        cx={SIZE / 2}\n        cy={SIZE / 2}\n        r={RADIUS}\n        fill=\"none\"\n        stroke=\"var(--neutral-a3)\"\n        strokeWidth={STROKE}\n      />\n      {arcs.map((arc, i) => (\n        <circle\n          key={i}\n          cx={SIZE / 2}\n          cy={SIZE / 2}\n          r={RADIUS}\n          fill=\"none\"\n          stroke={arc.color}\n          strokeWidth={STROKE}\n          strokeDasharray={`${arc.dash} ${arc.gap}`}\n          strokeDashoffset={CIRCUMFERENCE / 4 - arc.offset}\n          strokeLinecap=\"butt\"\n        />\n      ))}\n      <text\n        x={SIZE / 2}\n        y={SIZE / 2 - 5}\n        textAnchor=\"middle\"\n        fontSize={20}\n        fontWeight={700}\n        fill=\"var(--neutral-12)\"\n      >\n        {centerLabel}\n      </text>\n      <text\n        x={SIZE / 2}\n        y={SIZE / 2 + 14}\n        textAnchor=\"middle\"\n        fontSize={12}\n        fill=\"var(--neutral-a11)\"\n      >\n        {centerSub}\n      </text>\n    </svg>\n  )\n}\n"],"mappings":";;;AAWA,MAAM,SAAS;AACf,MAAM,SAAS;AACf,MAAM,OAAO;AACb,MAAM,gBAAgB,IAAI,KAAK,KAAK;AAEpC,SAAgB,WAAW,EACzB,aACA,WACA,YACkB;CAClB,MAAM,QAAQ,SAAS,QAAQ,KAAK,QAAQ,MAAM,IAAI,OAAO,EAAE;CAE/D,IAAI,SAAS;CACb,MAAM,OAAO,SAAS,KAAK,QAAQ;EACjC,MAAM,OAAO,QAAQ,IAAK,IAAI,QAAQ,QAAS,gBAAgB;EAC/D,MAAM,MAAM;GACV,OAAO,IAAI;GACX;GACA,KAAK,gBAAgB;GACrB;GACD;AACD,YAAU;AACV,SAAO;GACP;AAEF,QACE,qBAAC,OAAD;EAAK,OAAO;EAAM,QAAQ;EAAM,SAAS,OAAO,KAAK,GAAG;YAAxD;GACE,oBAAC,UAAD;IACE,IAAI,OAAO;IACX,IAAI,OAAO;IACX,GAAG;IACH,MAAK;IACL,QAAO;IACP,aAAa;IACb,CAAA;GACD,KAAK,KAAK,KAAK,MACd,oBAAC,UAAD;IAEE,IAAI,OAAO;IACX,IAAI,OAAO;IACX,GAAG;IACH,MAAK;IACL,QAAQ,IAAI;IACZ,aAAa;IACb,iBAAiB,GAAG,IAAI,KAAK,GAAG,IAAI;IACpC,kBAAkB,gBAAgB,IAAI,IAAI;IAC1C,eAAc;IACd,EAVK,EAUL,CACF;GACF,oBAAC,QAAD;IACE,GAAG,OAAO;IACV,GAAG,OAAO,IAAI;IACd,YAAW;IACX,UAAU;IACV,YAAY;IACZ,MAAK;cAEJ;IACI,CAAA;GACP,oBAAC,QAAD;IACE,GAAG,OAAO;IACV,GAAG,OAAO,IAAI;IACd,YAAW;IACX,UAAU;IACV,MAAK;cAEJ;IACI,CAAA;GACH"}

package/dist/components/energy-bar-chart.cjs

@@ -9,8 +9,9 @@ function EnergyBarChart({ totalSuffix, totalFormat, className, ...rest }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_bar_chart.BarChart, {
 		...rest,
 		className,
-		renderTotal: (value) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_number_flow, {
+		renderTotal: (value, animated) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_number_flow, {
 			value,
+			animated,
 			...totalSuffix !== void 0 && { suffix: totalSuffix },
 			...totalFormat !== void 0 && { format: totalFormat },
 			className: "text-base font-bold text-gray tabular-nums"

package/dist/components/energy-bar-chart.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"energy-bar-chart.cjs","names":["BarChart","NumberFlow"],"sources":["../../src/components/energy-bar-chart.tsx"],"sourcesContent":["import {\n  BarChart,\n  type BarChartCategory,\n  type BarChartLineSeries,\n  type BarChartSeries,\n} from './bar-chart'\nimport NumberFlow, { type Format } from './number-flow'\n\nexport type Category = BarChartCategory\n\nexport interface HourBucket {\n  hour: number\n  solar: number\n  battery: number\n  grid: number\n}\n\nexport type EnergyBarSeries<TDatum = HourBucket> = BarChartSeries<TDatum>\nexport type EnergyBarLineSeries<TDatum = HourBucket> =\n  BarChartLineSeries<TDatum>\n\ninterface EnergyBarChartProps<TDatum> {\n  data: TDatum[]\n  series: BarChartSeries<TDatum>[]\n  lines?: BarChartLineSeries<TDatum>[]\n  getCategory: (datum: TDatum) => Category\n  categories?: Category[]\n  categoryTicks?: Category[]\n  formatCategory?: (category: Category) => string\n  formatTooltipCategory?: (category: Category) => string\n  highlightedCategory?: Category\n  showHighlightLine?: boolean\n  title?: string\n  yAxisUnit?: string\n  formatValue?: (value: number) => string\n  totalSuffix?: string\n  totalFormat?: Format\n  height?: number\n  className?: string\n}\n\nexport function EnergyBarChart<TDatum>({\n  totalSuffix,\n  totalFormat,\n  className,\n  ...rest\n}: EnergyBarChartProps<TDatum>): React.ReactElement {\n  return (\n    <BarChart<TDatum>\n      {...rest}\n      className={className}\n      renderTotal={(value) => (\n        <NumberFlow\n          value={value}\n          {...(totalSuffix !== undefined && { suffix: totalSuffix })}\n          {...(totalFormat !== undefined && { format: totalFormat })}\n          className=\"text-base font-bold text-gray tabular-nums\"\n        />\n      )}\n    />\n  )\n}\n"],"mappings":";;;;;;;AAyCA,SAAgB,eAAuB,EACrC,aACA,aACA,WACA,GAAG,QAC+C;AAClD,QACE,iBAAA,GAAA,kBAAA,KAACA,6BAAAA,UAAD;EACE,GAAI;EACO;EACX,cAAc,UACZ,iBAAA,GAAA,kBAAA,KAACC,gCAAD;GACS;GACP,GAAK,gBAAgB,KAAA,KAAa,EAAE,QAAQ,aAAa;GACzD,GAAK,gBAAgB,KAAA,KAAa,EAAE,QAAQ,aAAa;GACzD,WAAU;GACV,CAAA;EAEJ,CAAA"}
+{"version":3,"file":"energy-bar-chart.cjs","names":["BarChart","NumberFlow"],"sources":["../../src/components/energy-bar-chart.tsx"],"sourcesContent":["import {\n  BarChart,\n  type BarChartCategory,\n  type BarChartLineSeries,\n  type BarChartSeries,\n} from './bar-chart'\nimport NumberFlow, { type Format } from './number-flow'\n\nexport type Category = BarChartCategory\n\nexport interface HourBucket {\n  hour: number\n  solar: number\n  battery: number\n  grid: number\n}\n\nexport type EnergyBarSeries<TDatum = HourBucket> = BarChartSeries<TDatum>\nexport type EnergyBarLineSeries<TDatum = HourBucket> =\n  BarChartLineSeries<TDatum>\n\ninterface EnergyBarChartProps<TDatum> {\n  data: TDatum[]\n  series: BarChartSeries<TDatum>[]\n  lines?: BarChartLineSeries<TDatum>[]\n  getCategory: (datum: TDatum) => Category\n  categories?: Category[]\n  categoryTicks?: Category[]\n  formatCategory?: (category: Category) => string\n  formatTooltipCategory?: (category: Category) => string\n  highlightedCategory?: Category\n  showHighlightLine?: boolean\n  title?: string\n  yAxisUnit?: string\n  formatValue?: (value: number) => string\n  totalSuffix?: string\n  totalFormat?: Format\n  height?: number\n  className?: string\n}\n\nexport function EnergyBarChart<TDatum>({\n  totalSuffix,\n  totalFormat,\n  className,\n  ...rest\n}: EnergyBarChartProps<TDatum>): React.ReactElement {\n  return (\n    <BarChart<TDatum>\n      {...rest}\n      className={className}\n      renderTotal={(value, animated) => (\n        <NumberFlow\n          value={value}\n          animated={animated}\n          {...(totalSuffix !== undefined && { suffix: totalSuffix })}\n          {...(totalFormat !== undefined && { format: totalFormat })}\n          className=\"text-base font-bold text-gray tabular-nums\"\n        />\n      )}\n    />\n  )\n}\n"],"mappings":";;;;;;;AAyCA,SAAgB,eAAuB,EACrC,aACA,aACA,WACA,GAAG,QAC+C;AAClD,QACE,iBAAA,GAAA,kBAAA,KAACA,6BAAAA,UAAD;EACE,GAAI;EACO;EACX,cAAc,OAAO,aACnB,iBAAA,GAAA,kBAAA,KAACC,gCAAD;GACS;GACG;GACV,GAAK,gBAAgB,KAAA,KAAa,EAAE,QAAQ,aAAa;GACzD,GAAK,gBAAgB,KAAA,KAAa,EAAE,QAAQ,aAAa;GACzD,WAAU;GACV,CAAA;EAEJ,CAAA"}

package/dist/components/energy-bar-chart.d.ts

@@ -1,7 +1,7 @@
 "use client";
 
 import { BarChartCategory, BarChartLineSeries, BarChartSeries } from "./bar-chart.js";
-import { t as Format } from "../number-flow-DSbucQ_K.js";
+import { t as Format } from "../number-flow-D9zsxH0-.js";
 
 //#region src/components/energy-bar-chart.d.ts
 type Category = BarChartCategory;

package/dist/components/energy-bar-chart.js

@@ -7,8 +7,9 @@ function EnergyBarChart({ totalSuffix, totalFormat, className, ...rest }) {
 	return /* @__PURE__ */ jsx(BarChart, {
 		...rest,
 		className,
-		renderTotal: (value) => /* @__PURE__ */ jsx(NumberFlow, {
+		renderTotal: (value, animated) => /* @__PURE__ */ jsx(NumberFlow, {
 			value,
+			animated,
 			...totalSuffix !== void 0 && { suffix: totalSuffix },
 			...totalFormat !== void 0 && { format: totalFormat },
 			className: "text-base font-bold text-gray tabular-nums"

package/dist/components/energy-bar-chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"energy-bar-chart.js","names":[],"sources":["../../src/components/energy-bar-chart.tsx"],"sourcesContent":["import {\n  BarChart,\n  type BarChartCategory,\n  type BarChartLineSeries,\n  type BarChartSeries,\n} from './bar-chart'\nimport NumberFlow, { type Format } from './number-flow'\n\nexport type Category = BarChartCategory\n\nexport interface HourBucket {\n  hour: number\n  solar: number\n  battery: number\n  grid: number\n}\n\nexport type EnergyBarSeries<TDatum = HourBucket> = BarChartSeries<TDatum>\nexport type EnergyBarLineSeries<TDatum = HourBucket> =\n  BarChartLineSeries<TDatum>\n\ninterface EnergyBarChartProps<TDatum> {\n  data: TDatum[]\n  series: BarChartSeries<TDatum>[]\n  lines?: BarChartLineSeries<TDatum>[]\n  getCategory: (datum: TDatum) => Category\n  categories?: Category[]\n  categoryTicks?: Category[]\n  formatCategory?: (category: Category) => string\n  formatTooltipCategory?: (category: Category) => string\n  highlightedCategory?: Category\n  showHighlightLine?: boolean\n  title?: string\n  yAxisUnit?: string\n  formatValue?: (value: number) => string\n  totalSuffix?: string\n  totalFormat?: Format\n  height?: number\n  className?: string\n}\n\nexport function EnergyBarChart<TDatum>({\n  totalSuffix,\n  totalFormat,\n  className,\n  ...rest\n}: EnergyBarChartProps<TDatum>): React.ReactElement {\n  return (\n    <BarChart<TDatum>\n      {...rest}\n      className={className}\n      renderTotal={(value) => (\n        <NumberFlow\n          value={value}\n          {...(totalSuffix !== undefined && { suffix: totalSuffix })}\n          {...(totalFormat !== undefined && { format: totalFormat })}\n          className=\"text-base font-bold text-gray tabular-nums\"\n        />\n      )}\n    />\n  )\n}\n"],"mappings":";;;;;AAyCA,SAAgB,eAAuB,EACrC,aACA,aACA,WACA,GAAG,QAC+C;AAClD,QACE,oBAAC,UAAD;EACE,GAAI;EACO;EACX,cAAc,UACZ,oBAAC,YAAD;GACS;GACP,GAAK,gBAAgB,KAAA,KAAa,EAAE,QAAQ,aAAa;GACzD,GAAK,gBAAgB,KAAA,KAAa,EAAE,QAAQ,aAAa;GACzD,WAAU;GACV,CAAA;EAEJ,CAAA"}
+{"version":3,"file":"energy-bar-chart.js","names":[],"sources":["../../src/components/energy-bar-chart.tsx"],"sourcesContent":["import {\n  BarChart,\n  type BarChartCategory,\n  type BarChartLineSeries,\n  type BarChartSeries,\n} from './bar-chart'\nimport NumberFlow, { type Format } from './number-flow'\n\nexport type Category = BarChartCategory\n\nexport interface HourBucket {\n  hour: number\n  solar: number\n  battery: number\n  grid: number\n}\n\nexport type EnergyBarSeries<TDatum = HourBucket> = BarChartSeries<TDatum>\nexport type EnergyBarLineSeries<TDatum = HourBucket> =\n  BarChartLineSeries<TDatum>\n\ninterface EnergyBarChartProps<TDatum> {\n  data: TDatum[]\n  series: BarChartSeries<TDatum>[]\n  lines?: BarChartLineSeries<TDatum>[]\n  getCategory: (datum: TDatum) => Category\n  categories?: Category[]\n  categoryTicks?: Category[]\n  formatCategory?: (category: Category) => string\n  formatTooltipCategory?: (category: Category) => string\n  highlightedCategory?: Category\n  showHighlightLine?: boolean\n  title?: string\n  yAxisUnit?: string\n  formatValue?: (value: number) => string\n  totalSuffix?: string\n  totalFormat?: Format\n  height?: number\n  className?: string\n}\n\nexport function EnergyBarChart<TDatum>({\n  totalSuffix,\n  totalFormat,\n  className,\n  ...rest\n}: EnergyBarChartProps<TDatum>): React.ReactElement {\n  return (\n    <BarChart<TDatum>\n      {...rest}\n      className={className}\n      renderTotal={(value, animated) => (\n        <NumberFlow\n          value={value}\n          animated={animated}\n          {...(totalSuffix !== undefined && { suffix: totalSuffix })}\n          {...(totalFormat !== undefined && { format: totalFormat })}\n          className=\"text-base font-bold text-gray tabular-nums\"\n        />\n      )}\n    />\n  )\n}\n"],"mappings":";;;;;AAyCA,SAAgB,eAAuB,EACrC,aACA,aACA,WACA,GAAG,QAC+C;AAClD,QACE,oBAAC,UAAD;EACE,GAAI;EACO;EACX,cAAc,OAAO,aACnB,oBAAC,YAAD;GACS;GACG;GACV,GAAK,gBAAgB,KAAA,KAAa,EAAE,QAAQ,aAAa;GACzD,GAAK,gBAAgB,KAAA,KAAa,EAAE,QAAQ,aAAa;GACzD,WAAU;GACV,CAAA;EAEJ,CAAA"}

package/dist/components/energy-breakdown.cjs

@@ -60,7 +60,7 @@ function EnergyBreakdown({ title, subtitle, items, centerSub = "kWh" }) {
 								})]
 							})]
 						}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
-							className: "h-1 w-full overflow-hidden rounded-full bg-slate-a4",
+							className: "h-1 w-full overflow-hidden rounded-full bg-gray-a4",
 							children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 								className: "h-full rounded-full",
 								style: {

package/dist/components/energy-breakdown.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"energy-breakdown.cjs","names":["formatThousands","integerFormat","oneDecimalFormat","twoDecimalFormat","DonutChart","formatEnergy"],"sources":["../../src/components/energy-breakdown.tsx"],"sourcesContent":["import { useMemo } from 'react'\nimport { NARROW_NBSP } from '../utils/chars'\nimport {\n  formatEnergy,\n  formatThousands,\n  integerFormat,\n  oneDecimalFormat,\n  twoDecimalFormat,\n} from '../utils/format'\nimport { DonutChart } from './donut-chart'\n\nexport type BreakdownItem = {\n  label: string\n  value: number\n  color: string\n  excludeFromCenterTotal?: boolean\n}\n\nexport type EnergyBreakdownProps = {\n  title: string\n  subtitle: string\n  items: BreakdownItem[]\n  centerSub?: string\n}\n\nfunction formatBreakdownCenter(v: number) {\n  if (v >= 1000) return formatThousands(v)\n  if (v >= 100) return integerFormat.format(v)\n  if (v >= 10) return oneDecimalFormat.format(v)\n  return twoDecimalFormat.format(v)\n}\n\nexport function EnergyBreakdown({\n  title,\n  subtitle,\n  items,\n  centerSub = 'kWh',\n}: EnergyBreakdownProps) {\n  const sortedItems = useMemo(\n    () => [...items].sort((a, b) => b.value - a.value),\n    [items],\n  )\n\n  const total = items.reduce((s, i) => s + i.value, 0)\n  const centerTotal = items\n    .filter((i) => !i.excludeFromCenterTotal)\n    .reduce((s, i) => s + i.value, 0)\n\n  const dataEmpty = total === 0\n\n  if (dataEmpty) return null\n\n  return (\n    <div className=\"flex flex-col gap-4 pt-3 pb-5\">\n      <div className=\"flex flex-col gap-0.5\">\n        <span className=\"text-sm font-semibold text-gray\">{title}</span>\n        <span className=\"text-xs text-gray-light\">{subtitle}</span>\n      </div>\n\n      <div className=\"flex items-center gap-6\">\n        <DonutChart\n          centerLabel={formatBreakdownCenter(centerTotal)}\n          centerSub={centerSub}\n          segments={sortedItems.map(({ value, color }) => ({ value, color }))}\n        />\n\n        <div className=\"flex flex-1 flex-col gap-3\">\n          {sortedItems.map(({ label, value, color }) => {\n            const pct = (value / total) * 100\n            return (\n              <div key={label} className=\"flex flex-col gap-1.5\">\n                <div className=\"flex items-baseline justify-between gap-2\">\n                  <span className=\"min-w-0 truncate text-sm font-medium text-gray\">\n                    {label}\n                  </span>\n                  <span className=\"flex shrink-0 items-baseline gap-1.5 text-xs tabular-nums\">\n                    <span className=\"text-gray-light\">\n                      {formatEnergy(value)}\n                    </span>\n                    <span className=\"font-semibold text-gray\">\n                      {`${integerFormat.format(pct)}${NARROW_NBSP}%`}\n                    </span>\n                  </span>\n                </div>\n                <div className=\"h-1 w-full overflow-hidden rounded-full bg-slate-a4\">\n                  <div\n                    className=\"h-full rounded-full\"\n                    style={{ width: `${pct}%`, background: color }}\n                  />\n                </div>\n              </div>\n            )\n          })}\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;AAyBA,SAAS,sBAAsB,GAAW;AACxC,KAAI,KAAK,IAAM,QAAOA,qBAAAA,gBAAgB,EAAE;AACxC,KAAI,KAAK,IAAK,QAAOC,qBAAAA,cAAc,OAAO,EAAE;AAC5C,KAAI,KAAK,GAAI,QAAOC,qBAAAA,iBAAiB,OAAO,EAAE;AAC9C,QAAOC,qBAAAA,iBAAiB,OAAO,EAAE;;AAGnC,SAAgB,gBAAgB,EAC9B,OACA,UACA,OACA,YAAY,SACW;CACvB,MAAM,eAAA,GAAA,MAAA,eACE,CAAC,GAAG,MAAM,CAAC,MAAM,GAAG,MAAM,EAAE,QAAQ,EAAE,MAAM,EAClD,CAAC,MAAM,CACR;CAED,MAAM,QAAQ,MAAM,QAAQ,GAAG,MAAM,IAAI,EAAE,OAAO,EAAE;CACpD,MAAM,cAAc,MACjB,QAAQ,MAAM,CAAC,EAAE,uBAAuB,CACxC,QAAQ,GAAG,MAAM,IAAI,EAAE,OAAO,EAAE;AAInC,KAFkB,UAAU,EAEb,QAAO;AAEtB,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,WAAU;YAAf,CACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;GAAK,WAAU;aAAf,CACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,WAAU;cAAmC;IAAa,CAAA,EAChE,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,WAAU;cAA2B;IAAgB,CAAA,CACvD;MAEN,iBAAA,GAAA,kBAAA,MAAC,OAAD;GAAK,WAAU;aAAf,CACE,iBAAA,GAAA,kBAAA,KAACC,+BAAAA,YAAD;IACE,aAAa,sBAAsB,YAAY;IACpC;IACX,UAAU,YAAY,KAAK,EAAE,OAAO,aAAa;KAAE;KAAO;KAAO,EAAE;IACnE,CAAA,EAEF,iBAAA,GAAA,kBAAA,KAAC,OAAD;IAAK,WAAU;cACZ,YAAY,KAAK,EAAE,OAAO,OAAO,YAAY;KAC5C,MAAM,MAAO,QAAQ,QAAS;AAC9B,YACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;MAAiB,WAAU;gBAA3B,CACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;OAAK,WAAU;iBAAf,CACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;QAAM,WAAU;kBACb;QACI,CAAA,EACP,iBAAA,GAAA,kBAAA,MAAC,QAAD;QAAM,WAAU;kBAAhB,CACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;SAAM,WAAU;mBACbC,qBAAAA,aAAa,MAAM;SACf,CAAA,EACP,iBAAA,GAAA,kBAAA,KAAC,QAAD;SAAM,WAAU;mBACb,GAAGJ,qBAAAA,cAAc,OAAO,IAAI;SACxB,CAAA,CACF;UACH;UACN,iBAAA,GAAA,kBAAA,KAAC,OAAD;OAAK,WAAU;iBACb,iBAAA,GAAA,kBAAA,KAAC,OAAD;QACE,WAAU;QACV,OAAO;SAAE,OAAO,GAAG,IAAI;SAAI,YAAY;SAAO;QAC9C,CAAA;OACE,CAAA,CACF;QApBI,MAoBJ;MAER;IACE,CAAA,CACF;KACF"}
+{"version":3,"file":"energy-breakdown.cjs","names":["formatThousands","integerFormat","oneDecimalFormat","twoDecimalFormat","DonutChart","formatEnergy"],"sources":["../../src/components/energy-breakdown.tsx"],"sourcesContent":["import { useMemo } from 'react'\nimport { NARROW_NBSP } from '../utils/chars'\nimport {\n  formatEnergy,\n  formatThousands,\n  integerFormat,\n  oneDecimalFormat,\n  twoDecimalFormat,\n} from '../utils/format'\nimport { DonutChart } from './donut-chart'\n\nexport type BreakdownItem = {\n  label: string\n  value: number\n  color: string\n  excludeFromCenterTotal?: boolean\n}\n\nexport type EnergyBreakdownProps = {\n  title: string\n  subtitle: string\n  items: BreakdownItem[]\n  centerSub?: string\n}\n\nfunction formatBreakdownCenter(v: number) {\n  if (v >= 1000) return formatThousands(v)\n  if (v >= 100) return integerFormat.format(v)\n  if (v >= 10) return oneDecimalFormat.format(v)\n  return twoDecimalFormat.format(v)\n}\n\nexport function EnergyBreakdown({\n  title,\n  subtitle,\n  items,\n  centerSub = 'kWh',\n}: EnergyBreakdownProps) {\n  const sortedItems = useMemo(\n    () => [...items].sort((a, b) => b.value - a.value),\n    [items],\n  )\n\n  const total = items.reduce((s, i) => s + i.value, 0)\n  const centerTotal = items\n    .filter((i) => !i.excludeFromCenterTotal)\n    .reduce((s, i) => s + i.value, 0)\n\n  const dataEmpty = total === 0\n\n  if (dataEmpty) return null\n\n  return (\n    <div className=\"flex flex-col gap-4 pt-3 pb-5\">\n      <div className=\"flex flex-col gap-0.5\">\n        <span className=\"text-sm font-semibold text-gray\">{title}</span>\n        <span className=\"text-xs text-gray-light\">{subtitle}</span>\n      </div>\n\n      <div className=\"flex items-center gap-6\">\n        <DonutChart\n          centerLabel={formatBreakdownCenter(centerTotal)}\n          centerSub={centerSub}\n          segments={sortedItems.map(({ value, color }) => ({ value, color }))}\n        />\n\n        <div className=\"flex flex-1 flex-col gap-3\">\n          {sortedItems.map(({ label, value, color }) => {\n            const pct = (value / total) * 100\n            return (\n              <div key={label} className=\"flex flex-col gap-1.5\">\n                <div className=\"flex items-baseline justify-between gap-2\">\n                  <span className=\"min-w-0 truncate text-sm font-medium text-gray\">\n                    {label}\n                  </span>\n                  <span className=\"flex shrink-0 items-baseline gap-1.5 text-xs tabular-nums\">\n                    <span className=\"text-gray-light\">\n                      {formatEnergy(value)}\n                    </span>\n                    <span className=\"font-semibold text-gray\">\n                      {`${integerFormat.format(pct)}${NARROW_NBSP}%`}\n                    </span>\n                  </span>\n                </div>\n                <div className=\"h-1 w-full overflow-hidden rounded-full bg-gray-a4\">\n                  <div\n                    className=\"h-full rounded-full\"\n                    style={{ width: `${pct}%`, background: color }}\n                  />\n                </div>\n              </div>\n            )\n          })}\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;;;AAyBA,SAAS,sBAAsB,GAAW;AACxC,KAAI,KAAK,IAAM,QAAOA,qBAAAA,gBAAgB,EAAE;AACxC,KAAI,KAAK,IAAK,QAAOC,qBAAAA,cAAc,OAAO,EAAE;AAC5C,KAAI,KAAK,GAAI,QAAOC,qBAAAA,iBAAiB,OAAO,EAAE;AAC9C,QAAOC,qBAAAA,iBAAiB,OAAO,EAAE;;AAGnC,SAAgB,gBAAgB,EAC9B,OACA,UACA,OACA,YAAY,SACW;CACvB,MAAM,eAAA,GAAA,MAAA,eACE,CAAC,GAAG,MAAM,CAAC,MAAM,GAAG,MAAM,EAAE,QAAQ,EAAE,MAAM,EAClD,CAAC,MAAM,CACR;CAED,MAAM,QAAQ,MAAM,QAAQ,GAAG,MAAM,IAAI,EAAE,OAAO,EAAE;CACpD,MAAM,cAAc,MACjB,QAAQ,MAAM,CAAC,EAAE,uBAAuB,CACxC,QAAQ,GAAG,MAAM,IAAI,EAAE,OAAO,EAAE;AAInC,KAFkB,UAAU,EAEb,QAAO;AAEtB,QACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EAAK,WAAU;YAAf,CACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;GAAK,WAAU;aAAf,CACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,WAAU;cAAmC;IAAa,CAAA,EAChE,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,WAAU;cAA2B;IAAgB,CAAA,CACvD;MAEN,iBAAA,GAAA,kBAAA,MAAC,OAAD;GAAK,WAAU;aAAf,CACE,iBAAA,GAAA,kBAAA,KAACC,+BAAAA,YAAD;IACE,aAAa,sBAAsB,YAAY;IACpC;IACX,UAAU,YAAY,KAAK,EAAE,OAAO,aAAa;KAAE;KAAO;KAAO,EAAE;IACnE,CAAA,EAEF,iBAAA,GAAA,kBAAA,KAAC,OAAD;IAAK,WAAU;cACZ,YAAY,KAAK,EAAE,OAAO,OAAO,YAAY;KAC5C,MAAM,MAAO,QAAQ,QAAS;AAC9B,YACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;MAAiB,WAAU;gBAA3B,CACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;OAAK,WAAU;iBAAf,CACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;QAAM,WAAU;kBACb;QACI,CAAA,EACP,iBAAA,GAAA,kBAAA,MAAC,QAAD;QAAM,WAAU;kBAAhB,CACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;SAAM,WAAU;mBACbC,qBAAAA,aAAa,MAAM;SACf,CAAA,EACP,iBAAA,GAAA,kBAAA,KAAC,QAAD;SAAM,WAAU;mBACb,GAAGJ,qBAAAA,cAAc,OAAO,IAAI;SACxB,CAAA,CACF;UACH;UACN,iBAAA,GAAA,kBAAA,KAAC,OAAD;OAAK,WAAU;iBACb,iBAAA,GAAA,kBAAA,KAAC,OAAD;QACE,WAAU;QACV,OAAO;SAAE,OAAO,GAAG,IAAI;SAAI,YAAY;SAAO;QAC9C,CAAA;OACE,CAAA,CACF;QApBI,MAoBJ;MAER;IACE,CAAA,CACF;KACF"}

package/dist/components/energy-breakdown.js

@@ -58,7 +58,7 @@ function EnergyBreakdown({ title, subtitle, items, centerSub = "kWh" }) {
 								})]
 							})]
 						}), /* @__PURE__ */ jsx("div", {
-							className: "h-1 w-full overflow-hidden rounded-full bg-slate-a4",
+							className: "h-1 w-full overflow-hidden rounded-full bg-gray-a4",
 							children: /* @__PURE__ */ jsx("div", {
 								className: "h-full rounded-full",
 								style: {

package/dist/components/energy-breakdown.js.map

@@ -1 +1 @@
-{"version":3,"file":"energy-breakdown.js","names":[],"sources":["../../src/components/energy-breakdown.tsx"],"sourcesContent":["import { useMemo } from 'react'\nimport { NARROW_NBSP } from '../utils/chars'\nimport {\n  formatEnergy,\n  formatThousands,\n  integerFormat,\n  oneDecimalFormat,\n  twoDecimalFormat,\n} from '../utils/format'\nimport { DonutChart } from './donut-chart'\n\nexport type BreakdownItem = {\n  label: string\n  value: number\n  color: string\n  excludeFromCenterTotal?: boolean\n}\n\nexport type EnergyBreakdownProps = {\n  title: string\n  subtitle: string\n  items: BreakdownItem[]\n  centerSub?: string\n}\n\nfunction formatBreakdownCenter(v: number) {\n  if (v >= 1000) return formatThousands(v)\n  if (v >= 100) return integerFormat.format(v)\n  if (v >= 10) return oneDecimalFormat.format(v)\n  return twoDecimalFormat.format(v)\n}\n\nexport function EnergyBreakdown({\n  title,\n  subtitle,\n  items,\n  centerSub = 'kWh',\n}: EnergyBreakdownProps) {\n  const sortedItems = useMemo(\n    () => [...items].sort((a, b) => b.value - a.value),\n    [items],\n  )\n\n  const total = items.reduce((s, i) => s + i.value, 0)\n  const centerTotal = items\n    .filter((i) => !i.excludeFromCenterTotal)\n    .reduce((s, i) => s + i.value, 0)\n\n  const dataEmpty = total === 0\n\n  if (dataEmpty) return null\n\n  return (\n    <div className=\"flex flex-col gap-4 pt-3 pb-5\">\n      <div className=\"flex flex-col gap-0.5\">\n        <span className=\"text-sm font-semibold text-gray\">{title}</span>\n        <span className=\"text-xs text-gray-light\">{subtitle}</span>\n      </div>\n\n      <div className=\"flex items-center gap-6\">\n        <DonutChart\n          centerLabel={formatBreakdownCenter(centerTotal)}\n          centerSub={centerSub}\n          segments={sortedItems.map(({ value, color }) => ({ value, color }))}\n        />\n\n        <div className=\"flex flex-1 flex-col gap-3\">\n          {sortedItems.map(({ label, value, color }) => {\n            const pct = (value / total) * 100\n            return (\n              <div key={label} className=\"flex flex-col gap-1.5\">\n                <div className=\"flex items-baseline justify-between gap-2\">\n                  <span className=\"min-w-0 truncate text-sm font-medium text-gray\">\n                    {label}\n                  </span>\n                  <span className=\"flex shrink-0 items-baseline gap-1.5 text-xs tabular-nums\">\n                    <span className=\"text-gray-light\">\n                      {formatEnergy(value)}\n                    </span>\n                    <span className=\"font-semibold text-gray\">\n                      {`${integerFormat.format(pct)}${NARROW_NBSP}%`}\n                    </span>\n                  </span>\n                </div>\n                <div className=\"h-1 w-full overflow-hidden rounded-full bg-slate-a4\">\n                  <div\n                    className=\"h-full rounded-full\"\n                    style={{ width: `${pct}%`, background: color }}\n                  />\n                </div>\n              </div>\n            )\n          })}\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;AAyBA,SAAS,sBAAsB,GAAW;AACxC,KAAI,KAAK,IAAM,QAAO,gBAAgB,EAAE;AACxC,KAAI,KAAK,IAAK,QAAO,cAAc,OAAO,EAAE;AAC5C,KAAI,KAAK,GAAI,QAAO,iBAAiB,OAAO,EAAE;AAC9C,QAAO,iBAAiB,OAAO,EAAE;;AAGnC,SAAgB,gBAAgB,EAC9B,OACA,UACA,OACA,YAAY,SACW;CACvB,MAAM,cAAc,cACZ,CAAC,GAAG,MAAM,CAAC,MAAM,GAAG,MAAM,EAAE,QAAQ,EAAE,MAAM,EAClD,CAAC,MAAM,CACR;CAED,MAAM,QAAQ,MAAM,QAAQ,GAAG,MAAM,IAAI,EAAE,OAAO,EAAE;CACpD,MAAM,cAAc,MACjB,QAAQ,MAAM,CAAC,EAAE,uBAAuB,CACxC,QAAQ,GAAG,MAAM,IAAI,EAAE,OAAO,EAAE;AAInC,KAFkB,UAAU,EAEb,QAAO;AAEtB,QACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,QAAD;IAAM,WAAU;cAAmC;IAAa,CAAA,EAChE,oBAAC,QAAD;IAAM,WAAU;cAA2B;IAAgB,CAAA,CACvD;MAEN,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,YAAD;IACE,aAAa,sBAAsB,YAAY;IACpC;IACX,UAAU,YAAY,KAAK,EAAE,OAAO,aAAa;KAAE;KAAO;KAAO,EAAE;IACnE,CAAA,EAEF,oBAAC,OAAD;IAAK,WAAU;cACZ,YAAY,KAAK,EAAE,OAAO,OAAO,YAAY;KAC5C,MAAM,MAAO,QAAQ,QAAS;AAC9B,YACE,qBAAC,OAAD;MAAiB,WAAU;gBAA3B,CACE,qBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,oBAAC,QAAD;QAAM,WAAU;kBACb;QACI,CAAA,EACP,qBAAC,QAAD;QAAM,WAAU;kBAAhB,CACE,oBAAC,QAAD;SAAM,WAAU;mBACb,aAAa,MAAM;SACf,CAAA,EACP,oBAAC,QAAD;SAAM,WAAU;mBACb,GAAG,cAAc,OAAO,IAAI;SACxB,CAAA,CACF;UACH;UACN,oBAAC,OAAD;OAAK,WAAU;iBACb,oBAAC,OAAD;QACE,WAAU;QACV,OAAO;SAAE,OAAO,GAAG,IAAI;SAAI,YAAY;SAAO;QAC9C,CAAA;OACE,CAAA,CACF;QApBI,MAoBJ;MAER;IACE,CAAA,CACF;KACF"}
+{"version":3,"file":"energy-breakdown.js","names":[],"sources":["../../src/components/energy-breakdown.tsx"],"sourcesContent":["import { useMemo } from 'react'\nimport { NARROW_NBSP } from '../utils/chars'\nimport {\n  formatEnergy,\n  formatThousands,\n  integerFormat,\n  oneDecimalFormat,\n  twoDecimalFormat,\n} from '../utils/format'\nimport { DonutChart } from './donut-chart'\n\nexport type BreakdownItem = {\n  label: string\n  value: number\n  color: string\n  excludeFromCenterTotal?: boolean\n}\n\nexport type EnergyBreakdownProps = {\n  title: string\n  subtitle: string\n  items: BreakdownItem[]\n  centerSub?: string\n}\n\nfunction formatBreakdownCenter(v: number) {\n  if (v >= 1000) return formatThousands(v)\n  if (v >= 100) return integerFormat.format(v)\n  if (v >= 10) return oneDecimalFormat.format(v)\n  return twoDecimalFormat.format(v)\n}\n\nexport function EnergyBreakdown({\n  title,\n  subtitle,\n  items,\n  centerSub = 'kWh',\n}: EnergyBreakdownProps) {\n  const sortedItems = useMemo(\n    () => [...items].sort((a, b) => b.value - a.value),\n    [items],\n  )\n\n  const total = items.reduce((s, i) => s + i.value, 0)\n  const centerTotal = items\n    .filter((i) => !i.excludeFromCenterTotal)\n    .reduce((s, i) => s + i.value, 0)\n\n  const dataEmpty = total === 0\n\n  if (dataEmpty) return null\n\n  return (\n    <div className=\"flex flex-col gap-4 pt-3 pb-5\">\n      <div className=\"flex flex-col gap-0.5\">\n        <span className=\"text-sm font-semibold text-gray\">{title}</span>\n        <span className=\"text-xs text-gray-light\">{subtitle}</span>\n      </div>\n\n      <div className=\"flex items-center gap-6\">\n        <DonutChart\n          centerLabel={formatBreakdownCenter(centerTotal)}\n          centerSub={centerSub}\n          segments={sortedItems.map(({ value, color }) => ({ value, color }))}\n        />\n\n        <div className=\"flex flex-1 flex-col gap-3\">\n          {sortedItems.map(({ label, value, color }) => {\n            const pct = (value / total) * 100\n            return (\n              <div key={label} className=\"flex flex-col gap-1.5\">\n                <div className=\"flex items-baseline justify-between gap-2\">\n                  <span className=\"min-w-0 truncate text-sm font-medium text-gray\">\n                    {label}\n                  </span>\n                  <span className=\"flex shrink-0 items-baseline gap-1.5 text-xs tabular-nums\">\n                    <span className=\"text-gray-light\">\n                      {formatEnergy(value)}\n                    </span>\n                    <span className=\"font-semibold text-gray\">\n                      {`${integerFormat.format(pct)}${NARROW_NBSP}%`}\n                    </span>\n                  </span>\n                </div>\n                <div className=\"h-1 w-full overflow-hidden rounded-full bg-gray-a4\">\n                  <div\n                    className=\"h-full rounded-full\"\n                    style={{ width: `${pct}%`, background: color }}\n                  />\n                </div>\n              </div>\n            )\n          })}\n        </div>\n      </div>\n    </div>\n  )\n}\n"],"mappings":";;;;;;;AAyBA,SAAS,sBAAsB,GAAW;AACxC,KAAI,KAAK,IAAM,QAAO,gBAAgB,EAAE;AACxC,KAAI,KAAK,IAAK,QAAO,cAAc,OAAO,EAAE;AAC5C,KAAI,KAAK,GAAI,QAAO,iBAAiB,OAAO,EAAE;AAC9C,QAAO,iBAAiB,OAAO,EAAE;;AAGnC,SAAgB,gBAAgB,EAC9B,OACA,UACA,OACA,YAAY,SACW;CACvB,MAAM,cAAc,cACZ,CAAC,GAAG,MAAM,CAAC,MAAM,GAAG,MAAM,EAAE,QAAQ,EAAE,MAAM,EAClD,CAAC,MAAM,CACR;CAED,MAAM,QAAQ,MAAM,QAAQ,GAAG,MAAM,IAAI,EAAE,OAAO,EAAE;CACpD,MAAM,cAAc,MACjB,QAAQ,MAAM,CAAC,EAAE,uBAAuB,CACxC,QAAQ,GAAG,MAAM,IAAI,EAAE,OAAO,EAAE;AAInC,KAFkB,UAAU,EAEb,QAAO;AAEtB,QACE,qBAAC,OAAD;EAAK,WAAU;YAAf,CACE,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,QAAD;IAAM,WAAU;cAAmC;IAAa,CAAA,EAChE,oBAAC,QAAD;IAAM,WAAU;cAA2B;IAAgB,CAAA,CACvD;MAEN,qBAAC,OAAD;GAAK,WAAU;aAAf,CACE,oBAAC,YAAD;IACE,aAAa,sBAAsB,YAAY;IACpC;IACX,UAAU,YAAY,KAAK,EAAE,OAAO,aAAa;KAAE;KAAO;KAAO,EAAE;IACnE,CAAA,EAEF,oBAAC,OAAD;IAAK,WAAU;cACZ,YAAY,KAAK,EAAE,OAAO,OAAO,YAAY;KAC5C,MAAM,MAAO,QAAQ,QAAS;AAC9B,YACE,qBAAC,OAAD;MAAiB,WAAU;gBAA3B,CACE,qBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,oBAAC,QAAD;QAAM,WAAU;kBACb;QACI,CAAA,EACP,qBAAC,QAAD;QAAM,WAAU;kBAAhB,CACE,oBAAC,QAAD;SAAM,WAAU;mBACb,aAAa,MAAM;SACf,CAAA,EACP,oBAAC,QAAD;SAAM,WAAU;mBACb,GAAG,cAAc,OAAO,IAAI;SACxB,CAAA,CACF;UACH;UACN,oBAAC,OAAD;OAAK,WAAU;iBACb,oBAAC,OAAD;QACE,WAAU;QACV,OAAO;SAAE,OAAO,GAAG,IAAI;SAAI,YAAY;SAAO;QAC9C,CAAA;OACE,CAAA,CACF;QApBI,MAoBJ;MAER;IACE,CAAA,CACF;KACF"}

package/dist/components/energy-history-chart.cjs

@@ -9,24 +9,26 @@ let react_jsx_runtime = require("react/jsx-runtime");
 /**
 * Energy-per-bucket stacked bar chart: solar (orange), battery (green) and grid
 * (blue) energy sources stacked per bucket, the total height being the energy
-* consumed. For cumulative energy (week/month/year views). Thin wrapper over the
+* consumed. Grid feed-in (translucent blue) dips below the baseline as an
+* export. For cumulative energy (week/month/year views). Thin wrapper over the
 * shared visx `BarChart`, so it inherits the card tooltip and both indicators.
 */
-function EnergyHistoryChart({ data, unit, formatValue, formatBucketLabel, labels, highlightedBucket, showHighlightLine, title, className, height = 260, categoryTicks }) {
+function EnergyHistoryChart({ data, unit, formatValue, formatBucketLabel, labels, omitSeries, highlightedBucket, showHighlightLine, title, className, height = 260, categoryTicks }) {
 	const fmtValue = (value) => formatValue ? formatValue(value) : `${require_utils_format.twoDecimalFormat.format(value)} ${unit}`;
+	const omitted = new Set(omitSeries);
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_components_energy_bar_chart.EnergyBarChart, {
 		data,
 		series: [
 			{
 				key: "solar",
 				label: labels.solar,
-				color: "var(--orange-a9)",
+				color: "var(--orange-9)",
 				getValue: (d) => d.solar
 			},
 			{
 				key: "battery",
 				label: labels.battery,
-				color: "var(--green-a9)",
+				color: "var(--green-9)",
 				getValue: (d) => d.battery
 			},
 			{
@@ -34,8 +36,14 @@ function EnergyHistoryChart({ data, unit, formatValue, formatBucketLabel, labels
 				label: labels.grid,
 				color: "var(--blue-9)",
 				getValue: (d) => d.grid
-			}
-		],
+			},
+			...labels.gridFeedIn !== void 0 ? [{
+				key: "gridFeedIn",
+				label: labels.gridFeedIn,
+				color: "var(--blue-7)",
+				getValue: (d) => -Math.max(0, d.gridFeedIn ?? 0)
+			}] : []
+		].filter((s) => !omitted.has(s.key)),
 		getCategory: (d) => d.bucket,
 		title,
 		yAxisUnit: unit,

package/dist/components/energy-history-chart.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"energy-history-chart.cjs","names":["valueFormat","EnergyBarChart"],"sources":["../../src/components/energy-history-chart.tsx"],"sourcesContent":["import { NARROW_NBSP } from '../utils/chars'\nimport { twoDecimalFormat as valueFormat } from '../utils/format'\nimport type { BarChartSeries } from './bar-chart'\nimport { EnergyBarChart } from './energy-bar-chart'\n\nexport interface EnergyHistoryDatum {\n  /** Bucket label/id (e.g. weekday, day-of-month, month). */\n  bucket: string\n  /** Solar used on-site (kWh, ≥ 0). */\n  solar: number\n  /** Battery discharged (kWh, ≥ 0). */\n  battery: number\n  /** Grid imported (kWh, ≥ 0). */\n  grid: number\n}\n\nexport interface EnergyHistoryChartProps {\n  data: EnergyHistoryDatum[]\n  /** Axis/tooltip unit, e.g. \"kWh\". */\n  unit: string\n  formatValue?: (value: number) => string\n  /** Formats the hovered bucket in the tooltip header. Defaults to the raw bucket. */\n  formatBucketLabel?: (bucket: string) => string\n  labels: {\n    solar: string\n    battery: string\n    grid: string\n  }\n  /** Bucket to mark with the current-period dashed line. */\n  highlightedBucket?: string\n  showHighlightLine?: boolean\n  title?: string\n  className?: string\n  height?: number\n  /** Subset of bucket ids to label on the x-axis. Defaults to all buckets. */\n  categoryTicks?: string[]\n}\n\n/**\n * Energy-per-bucket stacked bar chart: solar (orange), battery (green) and grid\n * (blue) energy sources stacked per bucket, the total height being the energy\n * consumed. For cumulative energy (week/month/year views). Thin wrapper over the\n * shared visx `BarChart`, so it inherits the card tooltip and both indicators.\n */\nexport function EnergyHistoryChart({\n  data,\n  unit,\n  formatValue,\n  formatBucketLabel,\n  labels,\n  highlightedBucket,\n  showHighlightLine,\n  title,\n  className,\n  height = 260,\n  categoryTicks,\n}: EnergyHistoryChartProps) {\n  const fmtValue = (value: number) =>\n    formatValue\n      ? formatValue(value)\n      : `${valueFormat.format(value)}${NARROW_NBSP}${unit}`\n\n  const series: BarChartSeries<EnergyHistoryDatum>[] = [\n    {\n      key: 'solar',\n      label: labels.solar,\n      color: 'var(--orange-a9)',\n      getValue: (d) => d.solar,\n    },\n    {\n      key: 'battery',\n      label: labels.battery,\n      color: 'var(--green-a9)',\n      getValue: (d) => d.battery,\n    },\n    {\n      key: 'grid',\n      label: labels.grid,\n      color: 'var(--blue-9)',\n      getValue: (d) => d.grid,\n    },\n  ]\n\n  return (\n    <EnergyBarChart<EnergyHistoryDatum>\n      data={data}\n      series={series}\n      getCategory={(d) => d.bucket}\n      title={title}\n      yAxisUnit={unit}\n      height={height}\n      className={className}\n      formatValue={fmtValue}\n      categoryTicks={categoryTicks}\n      {...(formatBucketLabel && {\n        formatTooltipCategory: (category: string | number) =>\n          formatBucketLabel(String(category)),\n      })}\n      totalSuffix={unit}\n      totalFormat={{ maximumFractionDigits: 2 }}\n      {...(highlightedBucket !== undefined && {\n        highlightedCategory: highlightedBucket,\n      })}\n      {...(showHighlightLine !== undefined && { showHighlightLine })}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;AA4CA,SAAgB,mBAAmB,EACjC,MACA,MACA,aACA,mBACA,QACA,mBACA,mBACA,OACA,WACA,SAAS,KACT,iBAC0B;CAC1B,MAAM,YAAY,UAChB,cACI,YAAY,MAAM,GAClB,GAAGA,qBAAAA,iBAAY,OAAO,MAAM,IAAiB;AAuBnD,QACE,iBAAA,GAAA,kBAAA,KAACC,oCAAAA,gBAAD;EACQ;EACN,QAAQ;GAvBV;IACE,KAAK;IACL,OAAO,OAAO;IACd,OAAO;IACP,WAAW,MAAM,EAAE;IACpB;GACD;IACE,KAAK;IACL,OAAO,OAAO;IACd,OAAO;IACP,WAAW,MAAM,EAAE;IACpB;GACD;IACE,KAAK;IACL,OAAO,OAAO;IACd,OAAO;IACP,WAAW,MAAM,EAAE;IACpB;GAMe;EACd,cAAc,MAAM,EAAE;EACf;EACP,WAAW;EACH;EACG;EACX,aAAa;EACE;EACf,GAAK,qBAAqB,EACxB,wBAAwB,aACtB,kBAAkB,OAAO,SAAS,CAAC,EACtC;EACD,aAAa;EACb,aAAa,EAAE,uBAAuB,GAAG;EACzC,GAAK,sBAAsB,KAAA,KAAa,EACtC,qBAAqB,mBACtB;EACD,GAAK,sBAAsB,KAAA,KAAa,EAAE,mBAAmB;EAC7D,CAAA"}
+{"version":3,"file":"energy-history-chart.cjs","names":["valueFormat","EnergyBarChart"],"sources":["../../src/components/energy-history-chart.tsx"],"sourcesContent":["import { NARROW_NBSP } from '../utils/chars'\nimport { twoDecimalFormat as valueFormat } from '../utils/format'\nimport type { BarChartSeries } from './bar-chart'\nimport { EnergyBarChart } from './energy-bar-chart'\n\nexport interface EnergyHistoryDatum {\n  /** Bucket label/id (e.g. weekday, day-of-month, month). */\n  bucket: string\n  /** Solar used on-site (kWh, ≥ 0). */\n  solar: number\n  /** Battery discharged (kWh, ≥ 0). */\n  battery: number\n  /** Grid imported (kWh, ≥ 0). */\n  grid: number\n  /** Grid feed-in (kWh, ≥ 0); drawn below the baseline as an export. */\n  gridFeedIn?: number\n}\n\nexport interface EnergyHistoryChartProps {\n  data: EnergyHistoryDatum[]\n  /** Axis/tooltip unit, e.g. \"kWh\". */\n  unit: string\n  formatValue?: (value: number) => string\n  /** Formats the hovered bucket in the tooltip header. Defaults to the raw bucket. */\n  formatBucketLabel?: (bucket: string) => string\n  labels: {\n    solar: string\n    battery: string\n    grid: string\n    /** Optional; when set, grid feed-in is drawn below the baseline. */\n    gridFeedIn?: string\n  }\n  /** Series to drop entirely (no legend entry, bar segment, or tooltip row). */\n  omitSeries?: readonly EnergyHistorySeriesKey[]\n  /** Bucket to mark with the current-period dashed line. */\n  highlightedBucket?: string\n  showHighlightLine?: boolean\n  title?: string\n  className?: string\n  height?: number\n  /** Subset of bucket ids to label on the x-axis. Defaults to all buckets. */\n  categoryTicks?: string[]\n}\n\nexport type EnergyHistorySeriesKey = 'solar' | 'battery' | 'grid' | 'gridFeedIn'\n\n/**\n * Energy-per-bucket stacked bar chart: solar (orange), battery (green) and grid\n * (blue) energy sources stacked per bucket, the total height being the energy\n * consumed. Grid feed-in (translucent blue) dips below the baseline as an\n * export. For cumulative energy (week/month/year views). Thin wrapper over the\n * shared visx `BarChart`, so it inherits the card tooltip and both indicators.\n */\nexport function EnergyHistoryChart({\n  data,\n  unit,\n  formatValue,\n  formatBucketLabel,\n  labels,\n  omitSeries,\n  highlightedBucket,\n  showHighlightLine,\n  title,\n  className,\n  height = 260,\n  categoryTicks,\n}: EnergyHistoryChartProps) {\n  const fmtValue = (value: number) =>\n    formatValue\n      ? formatValue(value)\n      : `${valueFormat.format(value)}${NARROW_NBSP}${unit}`\n\n  const omitted = new Set<EnergyHistorySeriesKey>(omitSeries)\n  const allSeries: BarChartSeries<EnergyHistoryDatum>[] = [\n    {\n      key: 'solar',\n      label: labels.solar,\n      color: 'var(--orange-9)',\n      getValue: (d) => d.solar,\n    },\n    {\n      key: 'battery',\n      label: labels.battery,\n      color: 'var(--green-9)',\n      getValue: (d) => d.battery,\n    },\n    {\n      key: 'grid',\n      label: labels.grid,\n      color: 'var(--blue-9)',\n      getValue: (d) => d.grid,\n    },\n    ...(labels.gridFeedIn !== undefined\n      ? [\n          {\n            key: 'gridFeedIn',\n            label: labels.gridFeedIn,\n            color: 'var(--blue-7)',\n            getValue: (d: EnergyHistoryDatum) =>\n              -Math.max(0, d.gridFeedIn ?? 0),\n          },\n        ]\n      : []),\n  ]\n  const series = allSeries.filter(\n    (s) => !omitted.has(s.key as EnergyHistorySeriesKey),\n  )\n\n  return (\n    <EnergyBarChart<EnergyHistoryDatum>\n      data={data}\n      series={series}\n      getCategory={(d) => d.bucket}\n      title={title}\n      yAxisUnit={unit}\n      height={height}\n      className={className}\n      formatValue={fmtValue}\n      categoryTicks={categoryTicks}\n      {...(formatBucketLabel && {\n        formatTooltipCategory: (category: string | number) =>\n          formatBucketLabel(String(category)),\n      })}\n      totalSuffix={unit}\n      totalFormat={{ maximumFractionDigits: 2 }}\n      {...(highlightedBucket !== undefined && {\n        highlightedCategory: highlightedBucket,\n      })}\n      {...(showHighlightLine !== undefined && { showHighlightLine })}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;;;AAqDA,SAAgB,mBAAmB,EACjC,MACA,MACA,aACA,mBACA,QACA,YACA,mBACA,mBACA,OACA,WACA,SAAS,KACT,iBAC0B;CAC1B,MAAM,YAAY,UAChB,cACI,YAAY,MAAM,GAClB,GAAGA,qBAAAA,iBAAY,OAAO,MAAM,IAAiB;CAEnD,MAAM,UAAU,IAAI,IAA4B,WAAW;AAoC3D,QACE,iBAAA,GAAA,kBAAA,KAACC,oCAAAA,gBAAD;EACQ;EACN,QAPW;GA9Bb;IACE,KAAK;IACL,OAAO,OAAO;IACd,OAAO;IACP,WAAW,MAAM,EAAE;IACpB;GACD;IACE,KAAK;IACL,OAAO,OAAO;IACd,OAAO;IACP,WAAW,MAAM,EAAE;IACpB;GACD;IACE,KAAK;IACL,OAAO,OAAO;IACd,OAAO;IACP,WAAW,MAAM,EAAE;IACpB;GACD,GAAI,OAAO,eAAe,KAAA,IACtB,CACE;IACE,KAAK;IACL,OAAO,OAAO;IACd,OAAO;IACP,WAAW,MACT,CAAC,KAAK,IAAI,GAAG,EAAE,cAAc,EAAE;IAClC,CACF,GACD,EAAE;GAEgB,CAAC,QACtB,MAAM,CAAC,QAAQ,IAAI,EAAE,IAA8B,CAMpC;EACd,cAAc,MAAM,EAAE;EACf;EACP,WAAW;EACH;EACG;EACX,aAAa;EACE;EACf,GAAK,qBAAqB,EACxB,wBAAwB,aACtB,kBAAkB,OAAO,SAAS,CAAC,EACtC;EACD,aAAa;EACb,aAAa,EAAE,uBAAuB,GAAG;EACzC,GAAK,sBAAsB,KAAA,KAAa,EACtC,qBAAqB,mBACtB;EACD,GAAK,sBAAsB,KAAA,KAAa,EAAE,mBAAmB;EAC7D,CAAA"}

package/dist/components/energy-history-chart.d.cts

@@ -12,6 +12,8 @@ interface EnergyHistoryDatum {
   battery: number;
   /** Grid imported (kWh, ≥ 0). */
   grid: number;
+  /** Grid feed-in (kWh, ≥ 0); drawn below the baseline as an export. */
+  gridFeedIn?: number;
 }
 interface EnergyHistoryChartProps {
   data: EnergyHistoryDatum[];
@@ -23,8 +25,11 @@ interface EnergyHistoryChartProps {
   labels: {
     solar: string;
     battery: string;
-    grid: string;
+    grid: string; /** Optional; when set, grid feed-in is drawn below the baseline. */
+    gridFeedIn?: string;
   };
+  /** Series to drop entirely (no legend entry, bar segment, or tooltip row). */
+  omitSeries?: readonly EnergyHistorySeriesKey[];
   /** Bucket to mark with the current-period dashed line. */
   highlightedBucket?: string;
   showHighlightLine?: boolean;
@@ -34,10 +39,12 @@ interface EnergyHistoryChartProps {
   /** Subset of bucket ids to label on the x-axis. Defaults to all buckets. */
   categoryTicks?: string[];
 }
+type EnergyHistorySeriesKey = 'solar' | 'battery' | 'grid' | 'gridFeedIn';
 /**
  * Energy-per-bucket stacked bar chart: solar (orange), battery (green) and grid
  * (blue) energy sources stacked per bucket, the total height being the energy
- * consumed. For cumulative energy (week/month/year views). Thin wrapper over the
+ * consumed. Grid feed-in (translucent blue) dips below the baseline as an
+ * export. For cumulative energy (week/month/year views). Thin wrapper over the
  * shared visx `BarChart`, so it inherits the card tooltip and both indicators.
  */
 declare function EnergyHistoryChart({
@@ -46,6 +53,7 @@ declare function EnergyHistoryChart({
   formatValue,
   formatBucketLabel,
   labels,
+  omitSeries,
   highlightedBucket,
   showHighlightLine,
   title,
@@ -54,5 +62,5 @@ declare function EnergyHistoryChart({
   categoryTicks
 }: EnergyHistoryChartProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
-export { EnergyHistoryChart, EnergyHistoryChartProps, EnergyHistoryDatum };
+export { EnergyHistoryChart, EnergyHistoryChartProps, EnergyHistoryDatum, EnergyHistorySeriesKey };
 //# sourceMappingURL=energy-history-chart.d.cts.map

package/dist/components/energy-history-chart.d.ts

@@ -12,6 +12,8 @@ interface EnergyHistoryDatum {
   battery: number;
   /** Grid imported (kWh, ≥ 0). */
   grid: number;
+  /** Grid feed-in (kWh, ≥ 0); drawn below the baseline as an export. */
+  gridFeedIn?: number;
 }
 interface EnergyHistoryChartProps {
   data: EnergyHistoryDatum[];
@@ -23,8 +25,11 @@ interface EnergyHistoryChartProps {
   labels: {
     solar: string;
     battery: string;
-    grid: string;
+    grid: string; /** Optional; when set, grid feed-in is drawn below the baseline. */
+    gridFeedIn?: string;
   };
+  /** Series to drop entirely (no legend entry, bar segment, or tooltip row). */
+  omitSeries?: readonly EnergyHistorySeriesKey[];
   /** Bucket to mark with the current-period dashed line. */
   highlightedBucket?: string;
   showHighlightLine?: boolean;
@@ -34,10 +39,12 @@ interface EnergyHistoryChartProps {
   /** Subset of bucket ids to label on the x-axis. Defaults to all buckets. */
   categoryTicks?: string[];
 }
+type EnergyHistorySeriesKey = 'solar' | 'battery' | 'grid' | 'gridFeedIn';
 /**
  * Energy-per-bucket stacked bar chart: solar (orange), battery (green) and grid
  * (blue) energy sources stacked per bucket, the total height being the energy
- * consumed. For cumulative energy (week/month/year views). Thin wrapper over the
+ * consumed. Grid feed-in (translucent blue) dips below the baseline as an
+ * export. For cumulative energy (week/month/year views). Thin wrapper over the
  * shared visx `BarChart`, so it inherits the card tooltip and both indicators.
  */
 declare function EnergyHistoryChart({
@@ -46,6 +53,7 @@ declare function EnergyHistoryChart({
   formatValue,
   formatBucketLabel,
   labels,
+  omitSeries,
   highlightedBucket,
   showHighlightLine,
   title,
@@ -54,5 +62,5 @@ declare function EnergyHistoryChart({
   categoryTicks
 }: EnergyHistoryChartProps): _$react_jsx_runtime0.JSX.Element;
 //#endregion
-export { EnergyHistoryChart, EnergyHistoryChartProps, EnergyHistoryDatum };
+export { EnergyHistoryChart, EnergyHistoryChartProps, EnergyHistoryDatum, EnergyHistorySeriesKey };
 //# sourceMappingURL=energy-history-chart.d.ts.map

package/dist/components/energy-history-chart.js

@@ -7,24 +7,26 @@ import { jsx } from "react/jsx-runtime";
 /**
 * Energy-per-bucket stacked bar chart: solar (orange), battery (green) and grid
 * (blue) energy sources stacked per bucket, the total height being the energy
-* consumed. For cumulative energy (week/month/year views). Thin wrapper over the
+* consumed. Grid feed-in (translucent blue) dips below the baseline as an
+* export. For cumulative energy (week/month/year views). Thin wrapper over the
 * shared visx `BarChart`, so it inherits the card tooltip and both indicators.
 */
-function EnergyHistoryChart({ data, unit, formatValue, formatBucketLabel, labels, highlightedBucket, showHighlightLine, title, className, height = 260, categoryTicks }) {
+function EnergyHistoryChart({ data, unit, formatValue, formatBucketLabel, labels, omitSeries, highlightedBucket, showHighlightLine, title, className, height = 260, categoryTicks }) {
 	const fmtValue = (value) => formatValue ? formatValue(value) : `${twoDecimalFormat.format(value)} ${unit}`;
+	const omitted = new Set(omitSeries);
 	return /* @__PURE__ */ jsx(EnergyBarChart, {
 		data,
 		series: [
 			{
 				key: "solar",
 				label: labels.solar,
-				color: "var(--orange-a9)",
+				color: "var(--orange-9)",
 				getValue: (d) => d.solar
 			},
 			{
 				key: "battery",
 				label: labels.battery,
-				color: "var(--green-a9)",
+				color: "var(--green-9)",
 				getValue: (d) => d.battery
 			},
 			{
@@ -32,8 +34,14 @@ function EnergyHistoryChart({ data, unit, formatValue, formatBucketLabel, labels
 				label: labels.grid,
 				color: "var(--blue-9)",
 				getValue: (d) => d.grid
-			}
-		],
+			},
+			...labels.gridFeedIn !== void 0 ? [{
+				key: "gridFeedIn",
+				label: labels.gridFeedIn,
+				color: "var(--blue-7)",
+				getValue: (d) => -Math.max(0, d.gridFeedIn ?? 0)
+			}] : []
+		].filter((s) => !omitted.has(s.key)),
 		getCategory: (d) => d.bucket,
 		title,
 		yAxisUnit: unit,

package/dist/components/energy-history-chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"energy-history-chart.js","names":["valueFormat"],"sources":["../../src/components/energy-history-chart.tsx"],"sourcesContent":["import { NARROW_NBSP } from '../utils/chars'\nimport { twoDecimalFormat as valueFormat } from '../utils/format'\nimport type { BarChartSeries } from './bar-chart'\nimport { EnergyBarChart } from './energy-bar-chart'\n\nexport interface EnergyHistoryDatum {\n  /** Bucket label/id (e.g. weekday, day-of-month, month). */\n  bucket: string\n  /** Solar used on-site (kWh, ≥ 0). */\n  solar: number\n  /** Battery discharged (kWh, ≥ 0). */\n  battery: number\n  /** Grid imported (kWh, ≥ 0). */\n  grid: number\n}\n\nexport interface EnergyHistoryChartProps {\n  data: EnergyHistoryDatum[]\n  /** Axis/tooltip unit, e.g. \"kWh\". */\n  unit: string\n  formatValue?: (value: number) => string\n  /** Formats the hovered bucket in the tooltip header. Defaults to the raw bucket. */\n  formatBucketLabel?: (bucket: string) => string\n  labels: {\n    solar: string\n    battery: string\n    grid: string\n  }\n  /** Bucket to mark with the current-period dashed line. */\n  highlightedBucket?: string\n  showHighlightLine?: boolean\n  title?: string\n  className?: string\n  height?: number\n  /** Subset of bucket ids to label on the x-axis. Defaults to all buckets. */\n  categoryTicks?: string[]\n}\n\n/**\n * Energy-per-bucket stacked bar chart: solar (orange), battery (green) and grid\n * (blue) energy sources stacked per bucket, the total height being the energy\n * consumed. For cumulative energy (week/month/year views). Thin wrapper over the\n * shared visx `BarChart`, so it inherits the card tooltip and both indicators.\n */\nexport function EnergyHistoryChart({\n  data,\n  unit,\n  formatValue,\n  formatBucketLabel,\n  labels,\n  highlightedBucket,\n  showHighlightLine,\n  title,\n  className,\n  height = 260,\n  categoryTicks,\n}: EnergyHistoryChartProps) {\n  const fmtValue = (value: number) =>\n    formatValue\n      ? formatValue(value)\n      : `${valueFormat.format(value)}${NARROW_NBSP}${unit}`\n\n  const series: BarChartSeries<EnergyHistoryDatum>[] = [\n    {\n      key: 'solar',\n      label: labels.solar,\n      color: 'var(--orange-a9)',\n      getValue: (d) => d.solar,\n    },\n    {\n      key: 'battery',\n      label: labels.battery,\n      color: 'var(--green-a9)',\n      getValue: (d) => d.battery,\n    },\n    {\n      key: 'grid',\n      label: labels.grid,\n      color: 'var(--blue-9)',\n      getValue: (d) => d.grid,\n    },\n  ]\n\n  return (\n    <EnergyBarChart<EnergyHistoryDatum>\n      data={data}\n      series={series}\n      getCategory={(d) => d.bucket}\n      title={title}\n      yAxisUnit={unit}\n      height={height}\n      className={className}\n      formatValue={fmtValue}\n      categoryTicks={categoryTicks}\n      {...(formatBucketLabel && {\n        formatTooltipCategory: (category: string | number) =>\n          formatBucketLabel(String(category)),\n      })}\n      totalSuffix={unit}\n      totalFormat={{ maximumFractionDigits: 2 }}\n      {...(highlightedBucket !== undefined && {\n        highlightedCategory: highlightedBucket,\n      })}\n      {...(showHighlightLine !== undefined && { showHighlightLine })}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;AA4CA,SAAgB,mBAAmB,EACjC,MACA,MACA,aACA,mBACA,QACA,mBACA,mBACA,OACA,WACA,SAAS,KACT,iBAC0B;CAC1B,MAAM,YAAY,UAChB,cACI,YAAY,MAAM,GAClB,GAAGA,iBAAY,OAAO,MAAM,IAAiB;AAuBnD,QACE,oBAAC,gBAAD;EACQ;EACN,QAAQ;GAvBV;IACE,KAAK;IACL,OAAO,OAAO;IACd,OAAO;IACP,WAAW,MAAM,EAAE;IACpB;GACD;IACE,KAAK;IACL,OAAO,OAAO;IACd,OAAO;IACP,WAAW,MAAM,EAAE;IACpB;GACD;IACE,KAAK;IACL,OAAO,OAAO;IACd,OAAO;IACP,WAAW,MAAM,EAAE;IACpB;GAMe;EACd,cAAc,MAAM,EAAE;EACf;EACP,WAAW;EACH;EACG;EACX,aAAa;EACE;EACf,GAAK,qBAAqB,EACxB,wBAAwB,aACtB,kBAAkB,OAAO,SAAS,CAAC,EACtC;EACD,aAAa;EACb,aAAa,EAAE,uBAAuB,GAAG;EACzC,GAAK,sBAAsB,KAAA,KAAa,EACtC,qBAAqB,mBACtB;EACD,GAAK,sBAAsB,KAAA,KAAa,EAAE,mBAAmB;EAC7D,CAAA"}
+{"version":3,"file":"energy-history-chart.js","names":["valueFormat"],"sources":["../../src/components/energy-history-chart.tsx"],"sourcesContent":["import { NARROW_NBSP } from '../utils/chars'\nimport { twoDecimalFormat as valueFormat } from '../utils/format'\nimport type { BarChartSeries } from './bar-chart'\nimport { EnergyBarChart } from './energy-bar-chart'\n\nexport interface EnergyHistoryDatum {\n  /** Bucket label/id (e.g. weekday, day-of-month, month). */\n  bucket: string\n  /** Solar used on-site (kWh, ≥ 0). */\n  solar: number\n  /** Battery discharged (kWh, ≥ 0). */\n  battery: number\n  /** Grid imported (kWh, ≥ 0). */\n  grid: number\n  /** Grid feed-in (kWh, ≥ 0); drawn below the baseline as an export. */\n  gridFeedIn?: number\n}\n\nexport interface EnergyHistoryChartProps {\n  data: EnergyHistoryDatum[]\n  /** Axis/tooltip unit, e.g. \"kWh\". */\n  unit: string\n  formatValue?: (value: number) => string\n  /** Formats the hovered bucket in the tooltip header. Defaults to the raw bucket. */\n  formatBucketLabel?: (bucket: string) => string\n  labels: {\n    solar: string\n    battery: string\n    grid: string\n    /** Optional; when set, grid feed-in is drawn below the baseline. */\n    gridFeedIn?: string\n  }\n  /** Series to drop entirely (no legend entry, bar segment, or tooltip row). */\n  omitSeries?: readonly EnergyHistorySeriesKey[]\n  /** Bucket to mark with the current-period dashed line. */\n  highlightedBucket?: string\n  showHighlightLine?: boolean\n  title?: string\n  className?: string\n  height?: number\n  /** Subset of bucket ids to label on the x-axis. Defaults to all buckets. */\n  categoryTicks?: string[]\n}\n\nexport type EnergyHistorySeriesKey = 'solar' | 'battery' | 'grid' | 'gridFeedIn'\n\n/**\n * Energy-per-bucket stacked bar chart: solar (orange), battery (green) and grid\n * (blue) energy sources stacked per bucket, the total height being the energy\n * consumed. Grid feed-in (translucent blue) dips below the baseline as an\n * export. For cumulative energy (week/month/year views). Thin wrapper over the\n * shared visx `BarChart`, so it inherits the card tooltip and both indicators.\n */\nexport function EnergyHistoryChart({\n  data,\n  unit,\n  formatValue,\n  formatBucketLabel,\n  labels,\n  omitSeries,\n  highlightedBucket,\n  showHighlightLine,\n  title,\n  className,\n  height = 260,\n  categoryTicks,\n}: EnergyHistoryChartProps) {\n  const fmtValue = (value: number) =>\n    formatValue\n      ? formatValue(value)\n      : `${valueFormat.format(value)}${NARROW_NBSP}${unit}`\n\n  const omitted = new Set<EnergyHistorySeriesKey>(omitSeries)\n  const allSeries: BarChartSeries<EnergyHistoryDatum>[] = [\n    {\n      key: 'solar',\n      label: labels.solar,\n      color: 'var(--orange-9)',\n      getValue: (d) => d.solar,\n    },\n    {\n      key: 'battery',\n      label: labels.battery,\n      color: 'var(--green-9)',\n      getValue: (d) => d.battery,\n    },\n    {\n      key: 'grid',\n      label: labels.grid,\n      color: 'var(--blue-9)',\n      getValue: (d) => d.grid,\n    },\n    ...(labels.gridFeedIn !== undefined\n      ? [\n          {\n            key: 'gridFeedIn',\n            label: labels.gridFeedIn,\n            color: 'var(--blue-7)',\n            getValue: (d: EnergyHistoryDatum) =>\n              -Math.max(0, d.gridFeedIn ?? 0),\n          },\n        ]\n      : []),\n  ]\n  const series = allSeries.filter(\n    (s) => !omitted.has(s.key as EnergyHistorySeriesKey),\n  )\n\n  return (\n    <EnergyBarChart<EnergyHistoryDatum>\n      data={data}\n      series={series}\n      getCategory={(d) => d.bucket}\n      title={title}\n      yAxisUnit={unit}\n      height={height}\n      className={className}\n      formatValue={fmtValue}\n      categoryTicks={categoryTicks}\n      {...(formatBucketLabel && {\n        formatTooltipCategory: (category: string | number) =>\n          formatBucketLabel(String(category)),\n      })}\n      totalSuffix={unit}\n      totalFormat={{ maximumFractionDigits: 2 }}\n      {...(highlightedBucket !== undefined && {\n        highlightedCategory: highlightedBucket,\n      })}\n      {...(showHighlightLine !== undefined && { showHighlightLine })}\n    />\n  )\n}\n"],"mappings":";;;;;;;;;;;;;AAqDA,SAAgB,mBAAmB,EACjC,MACA,MACA,aACA,mBACA,QACA,YACA,mBACA,mBACA,OACA,WACA,SAAS,KACT,iBAC0B;CAC1B,MAAM,YAAY,UAChB,cACI,YAAY,MAAM,GAClB,GAAGA,iBAAY,OAAO,MAAM,IAAiB;CAEnD,MAAM,UAAU,IAAI,IAA4B,WAAW;AAoC3D,QACE,oBAAC,gBAAD;EACQ;EACN,QAPW;GA9Bb;IACE,KAAK;IACL,OAAO,OAAO;IACd,OAAO;IACP,WAAW,MAAM,EAAE;IACpB;GACD;IACE,KAAK;IACL,OAAO,OAAO;IACd,OAAO;IACP,WAAW,MAAM,EAAE;IACpB;GACD;IACE,KAAK;IACL,OAAO,OAAO;IACd,OAAO;IACP,WAAW,MAAM,EAAE;IACpB;GACD,GAAI,OAAO,eAAe,KAAA,IACtB,CACE;IACE,KAAK;IACL,OAAO,OAAO;IACd,OAAO;IACP,WAAW,MACT,CAAC,KAAK,IAAI,GAAG,EAAE,cAAc,EAAE;IAClC,CACF,GACD,EAAE;GAEgB,CAAC,QACtB,MAAM,CAAC,QAAQ,IAAI,EAAE,IAA8B,CAMpC;EACd,cAAc,MAAM,EAAE;EACf;EACP,WAAW;EACH;EACG;EACX,aAAa;EACE;EACf,GAAK,qBAAqB,EACxB,wBAAwB,aACtB,kBAAkB,OAAO,SAAS,CAAC,EACtC;EACD,aAAa;EACb,aAAa,EAAE,uBAAuB,GAAG;EACzC,GAAK,sBAAsB,KAAA,KAAa,EACtC,qBAAqB,mBACtB;EACD,GAAK,sBAAsB,KAAA,KAAa,EAAE,mBAAmB;EAC7D,CAAA"}

package/dist/components/feed-in-hero.d.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { t as Tone } from "../tones-DyCkL71h.js";
+import { t as Tone } from "../tones-PXJGlSpe.js";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 
 //#region src/components/feed-in-hero.d.ts

package/dist/components/field.cjs

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-aJGBMT86.cjs");
 const require_components_separator = require("./separator.cjs");
-const require_theme = require("../theme-C9_OSe0S.cjs");
+const require_theme = require("../theme-ClRJhexF.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");

package/dist/components/field.d.cts

@@ -1,6 +1,6 @@
 "use client";
 
-import { a as SparkInputStyle, i as SparkInputColor, o as SparkLabelPosition } from "../theme-types-r20EJfEC.cjs";
+import { a as SparkLabelPosition, i as SparkInputStyle, r as SparkInputColor } from "../theme-types-BwSJKdsB.cjs";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as React$1 from "react";
 

package/dist/components/field.d.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { a as SparkInputStyle, i as SparkInputColor, o as SparkLabelPosition } from "../theme-types-DoROIXpi.js";
+import { a as SparkLabelPosition, i as SparkInputStyle, r as SparkInputColor } from "../theme-types-BDdoRxXa.js";
 import * as React$1 from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 

package/dist/components/field.js

@@ -2,7 +2,7 @@
 "use client";
 import { cn } from "../utils/cn.js";
 import { Separator } from "./separator.js";
-import { n as useTheme } from "../theme-B3WtiByA.js";
+import { n as useTheme } from "../theme-8PDO9E0S.js";
 import * as React$1 from "react";
 import { useId } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/components/info-block.d.cts

@@ -6,7 +6,7 @@ import { VariantProps } from "class-variance-authority";
 
 //#region src/components/info-block.d.ts
 declare const InfoBlock: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
-  variant?: "bare" | "default" | null | undefined;
+  variant?: "default" | "bare" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string> & React$1.RefAttributes<HTMLDivElement>>;
 declare const InfoBlockIcon: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
 declare const InfoBlockContent: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;

package/dist/components/info-block.d.ts

@@ -6,7 +6,7 @@ import * as _$class_variance_authority_types0 from "class-variance-authority/typ
 
 //#region src/components/info-block.d.ts
 declare const InfoBlock: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
-  variant?: "bare" | "default" | null | undefined;
+  variant?: "default" | "bare" | null | undefined;
 } & _$class_variance_authority_types0.ClassProp) | undefined) => string> & React$1.RefAttributes<HTMLDivElement>>;
 declare const InfoBlockIcon: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
 declare const InfoBlockContent: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;

package/dist/components/input-group.cjs

@@ -2,7 +2,7 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-aJGBMT86.cjs");
-const require_theme = require("../theme-C9_OSe0S.cjs");
+const require_theme = require("../theme-ClRJhexF.cjs");
 const require_components_field = require("./field.cjs");
 const require_components_input = require("./input.cjs");
 let react = require("react");

package/dist/components/input-group.js

@@ -1,7 +1,7 @@
 "use client";
 "use client";
 import { cn } from "../utils/cn.js";
-import { n as useTheme } from "../theme-B3WtiByA.js";
+import { n as useTheme } from "../theme-8PDO9E0S.js";
 import { useFieldContext } from "./field.js";
 import { Input } from "./input.js";
 import "react";

package/dist/components/input-otp.cjs

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

package/dist/components/input-otp.js

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

package/dist/components/input.cjs

@@ -2,7 +2,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_chunk = require("../chunk-aJGBMT86.cjs");
 const require_components_field = require("./field.cjs");
-const require_input_box_variants = require("../input-box-variants-BMDdwvqg.cjs");
+const require_input_box_variants = require("../input-box-variants-ZCtgs-1S.cjs");
 let react = require("react");
 react = require_chunk.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");

package/dist/components/input.d.cts

@@ -1,6 +1,6 @@
 "use client";
 
-import { a as SparkInputStyle } from "../theme-types-r20EJfEC.cjs";
+import { i as SparkInputStyle } from "../theme-types-BwSJKdsB.cjs";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 import * as React$1 from "react";
 

package/dist/components/input.d.ts

@@ -1,6 +1,6 @@
 "use client";
 
-import { a as SparkInputStyle } from "../theme-types-DoROIXpi.js";
+import { i as SparkInputStyle } from "../theme-types-BDdoRxXa.js";
 import * as React$1 from "react";
 import * as _$react_jsx_runtime0 from "react/jsx-runtime";
 

package/dist/components/input.js

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