@epilot/spark-ui 0.19.0 → 0.20.0

package/dist/components/{device-card.cjs → entity-card.cjs}

@@ -6,35 +6,35 @@ react = require_chunk.__toESM(react);
 let react_jsx_runtime = require("react/jsx-runtime");
 let class_variance_authority = require("class-variance-authority");
 let cnfast = require("cnfast");
-//#region src/components/device-card.tsx
-const DeviceCard = ({ className, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+//#region src/components/entity-card.tsx
+const EntityCard = ({ className, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 	className: (0, cnfast.cn)("flex flex-col overflow-hidden rounded-lg border border-gray bg-(--spark-background)", className),
 	...rest
 });
-const DeviceCardBody = ({ className, active, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+const EntityCardBody = ({ className, active, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
 	type: "button",
 	className: (0, cnfast.cn)("flex w-full cursor-pointer flex-col gap-3 p-4 text-left transition-colors hover:bg-gray-a2 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-accent-focus", active && "bg-linear-to-br from-spark-9/10 to-spark-1/5 to-20%", className),
 	...rest
 });
-const DeviceCardHeader = ({ className, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+const EntityCardHeader = ({ className, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 	className: (0, cnfast.cn)("flex w-full items-center gap-3", className),
 	...rest
 });
-const DeviceCardMeters = ({ className, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+const EntityCardMeters = ({ className, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 	className: (0, cnfast.cn)("flex flex-col gap-2 border-t border-gray pt-3", className),
 	...rest
 });
 const iconToneVariants = (0, class_variance_authority.cva)("flex size-11 shrink-0 items-center justify-center rounded-[max(var(--spark-rounded-md),var(--spark-rounded-full))]", {
 	variants: { tone: {
-		success: "bg-base-success-soft text-success",
-		warning: "bg-base-warning-soft text-warning",
-		error: "bg-base-error-soft text-error",
-		accent: "bg-base-accent-soft text-accent",
+		success: "bg-success-soft text-success-soft-foreground",
+		warning: "bg-warning-soft text-warning-soft-foreground",
+		error: "bg-error-soft text-error-soft-foreground",
+		accent: "bg-primary-soft text-primary-soft-foreground",
 		neutral: "bg-base-gray-soft text-gray"
 	} },
 	defaultVariants: { tone: "neutral" }
 });
-const DeviceCardIcon = ({ className, icon: Glyph, tone, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+const EntityCardIcon = ({ className, icon: Glyph, tone, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 	className: iconToneVariants({
 		tone,
 		className
@@ -42,11 +42,11 @@ const DeviceCardIcon = ({ className, icon: Glyph, tone, ...rest }) => /* @__PURE
 	...rest,
 	children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(Glyph, { className: "[--spark-icon-size:18px]" })
 });
-const DeviceCardTitleColumn = ({ className, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+const EntityCardTitleColumn = ({ className, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 	className: (0, cnfast.cn)("flex min-w-0 flex-1 flex-col gap-0.5", className),
 	...rest
 });
-const DeviceCardTitle = ({ className, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+const EntityCardTitle = ({ className, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 	className: (0, cnfast.cn)("truncate text-sm font-bold text-gray", className),
 	...rest
 });
@@ -65,12 +65,12 @@ const dotToneVariants = (0, class_variance_authority.cva)("size-1.5 shrink-0 rou
 		success: "bg-base-success-solid",
 		warning: "bg-base-warning-solid",
 		error: "bg-base-error-solid",
-		accent: "bg-base-accent-solid",
+		accent: "bg-primary",
 		neutral: "bg-base-gray-solid"
 	} },
 	defaultVariants: { tone: "neutral" }
 });
-const DeviceCardState = ({ className, tone, children, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+const EntityCardState = ({ className, tone, children, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
 	className: stateToneVariants({
 		tone,
 		className
@@ -81,34 +81,34 @@ const DeviceCardState = ({ className, tone, children, ...rest }) => /* @__PURE__
 		children
 	})]
 });
-const DeviceCardDetail = ({ className, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+const EntityCardDetail = ({ className, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 	className: (0, cnfast.cn)("truncate text-xs text-gray-light tabular-nums", className),
 	...rest
 });
-const DeviceCardPower = ({ className, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+const EntityCardValue = ({ className, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 	className: (0, cnfast.cn)("ms-2 shrink-0 self-center text-lg leading-tight font-bold text-gray tabular-nums", className),
 	...rest
 });
-const DeviceCardControls = ({ className, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+const EntityCardControls = ({ className, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 	className: (0, cnfast.cn)("flex items-center gap-3 border-t border-gray bg-base-gray-surface px-4 py-3", className),
 	...rest
 });
-const DeviceCardFooter = ({ className, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+const EntityCardFooter = ({ className, ...rest }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 	className: (0, cnfast.cn)("flex items-center justify-center gap-1.5 border-t border-gray bg-base-gray-surface px-4 py-2 text-xs text-gray-light", className),
 	...rest
 });
 //#endregion
-exports.DeviceCard = DeviceCard;
-exports.DeviceCardBody = DeviceCardBody;
-exports.DeviceCardControls = DeviceCardControls;
-exports.DeviceCardDetail = DeviceCardDetail;
-exports.DeviceCardFooter = DeviceCardFooter;
-exports.DeviceCardHeader = DeviceCardHeader;
-exports.DeviceCardIcon = DeviceCardIcon;
-exports.DeviceCardMeters = DeviceCardMeters;
-exports.DeviceCardPower = DeviceCardPower;
-exports.DeviceCardState = DeviceCardState;
-exports.DeviceCardTitle = DeviceCardTitle;
-exports.DeviceCardTitleColumn = DeviceCardTitleColumn;
+exports.EntityCard = EntityCard;
+exports.EntityCardBody = EntityCardBody;
+exports.EntityCardControls = EntityCardControls;
+exports.EntityCardDetail = EntityCardDetail;
+exports.EntityCardFooter = EntityCardFooter;
+exports.EntityCardHeader = EntityCardHeader;
+exports.EntityCardIcon = EntityCardIcon;
+exports.EntityCardMeters = EntityCardMeters;
+exports.EntityCardState = EntityCardState;
+exports.EntityCardTitle = EntityCardTitle;
+exports.EntityCardTitleColumn = EntityCardTitleColumn;
+exports.EntityCardValue = EntityCardValue;
 
-//# sourceMappingURL=device-card.cjs.map
+//# sourceMappingURL=entity-card.cjs.map

package/dist/components/entity-card.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"entity-card.cjs","names":[],"sources":["../../src/components/entity-card.tsx"],"sourcesContent":["import type { SparkIcon } from '@epilot/spark-icons'\nimport { cva } from 'class-variance-authority'\nimport * as React from 'react'\nimport type { Tone } from '../lib/tones'\nimport { cn } from '../utils/cn'\n\nconst EntityCard = ({ className, ...rest }: React.ComponentProps<'div'>) => (\n  <div\n    className={cn(\n      'flex flex-col overflow-hidden rounded-lg border border-gray bg-(--spark-background)',\n      className,\n    )}\n    {...rest}\n  />\n)\n\nconst EntityCardBody = ({\n  className,\n  active,\n  ...rest\n}: React.ComponentProps<'button'> & { active?: boolean }) => (\n  <button\n    type=\"button\"\n    className={cn(\n      'flex w-full cursor-pointer flex-col gap-3 p-4 text-left transition-colors hover:bg-gray-a2 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-accent-focus',\n      active && 'bg-linear-to-br from-spark-9/10 to-spark-1/5 to-20%',\n      className,\n    )}\n    {...rest}\n  />\n)\n\nconst EntityCardHeader = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => (\n  <div className={cn('flex w-full items-center gap-3', className)} {...rest} />\n)\n\nconst EntityCardMeters = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => (\n  <div\n    className={cn('flex flex-col gap-2 border-t border-gray pt-3', className)}\n    {...rest}\n  />\n)\n\nconst iconToneVariants = cva(\n  // max() pill escape (matches Icon): a tile stays rounded-md at low Roundness but\n  // becomes a circle at large/full, same as it did pre-harmonization via clamping.\n  'flex size-11 shrink-0 items-center justify-center rounded-[max(var(--spark-rounded-md),var(--spark-rounded-full))]',\n  {\n    variants: {\n      tone: {\n        success: 'bg-success-soft text-success-soft-foreground',\n        warning: 'bg-warning-soft text-warning-soft-foreground',\n        error: 'bg-error-soft text-error-soft-foreground',\n        accent: 'bg-primary-soft text-primary-soft-foreground',\n        neutral: 'bg-base-gray-soft text-gray',\n      },\n    },\n    defaultVariants: { tone: 'neutral' },\n  },\n)\n\nconst EntityCardIcon = ({\n  className,\n  icon: Glyph,\n  tone,\n  ...rest\n}: React.ComponentProps<'span'> & {\n  icon: SparkIcon\n  tone?: Tone\n}) => (\n  <span className={iconToneVariants({ tone, className })} {...rest}>\n    <Glyph className=\"[--spark-icon-size:18px]\" />\n  </span>\n)\n\nconst EntityCardTitleColumn = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => (\n  <div\n    className={cn('flex min-w-0 flex-1 flex-col gap-0.5', className)}\n    {...rest}\n  />\n)\n\nconst EntityCardTitle = ({\n  className,\n  ...rest\n}: React.ComponentProps<'span'>) => (\n  <span\n    className={cn('truncate text-sm font-bold text-gray', className)}\n    {...rest}\n  />\n)\n\nconst stateToneVariants = cva(\n  'inline-flex items-center gap-1.5 text-xs font-medium',\n  {\n    variants: {\n      tone: {\n        success: 'text-success',\n        warning: 'text-warning',\n        error: 'text-error',\n        accent: 'text-accent',\n        neutral: 'text-gray-light',\n      },\n    },\n    defaultVariants: { tone: 'neutral' },\n  },\n)\n\nconst dotToneVariants = cva('size-1.5 shrink-0 rounded-full', {\n  variants: {\n    tone: {\n      success: 'bg-base-success-solid',\n      warning: 'bg-base-warning-solid',\n      error: 'bg-base-error-solid',\n      accent: 'bg-primary',\n      neutral: 'bg-base-gray-solid',\n    },\n  },\n  defaultVariants: { tone: 'neutral' },\n})\n\nconst EntityCardState = ({\n  className,\n  tone,\n  children,\n  ...rest\n}: React.ComponentProps<'span'> & { tone?: Tone }) => (\n  <span className={stateToneVariants({ tone, className })} {...rest}>\n    <span className={dotToneVariants({ tone })} />\n    <span className=\"truncate\">{children}</span>\n  </span>\n)\n\nconst EntityCardDetail = ({\n  className,\n  ...rest\n}: React.ComponentProps<'span'>) => (\n  <span\n    className={cn('truncate text-xs text-gray-light tabular-nums', className)}\n    {...rest}\n  />\n)\n\nconst EntityCardValue = ({\n  className,\n  ...rest\n}: React.ComponentProps<'span'>) => (\n  <span\n    className={cn(\n      'ms-2 shrink-0 self-center text-lg leading-tight font-bold text-gray tabular-nums',\n      className,\n    )}\n    {...rest}\n  />\n)\n\nconst EntityCardControls = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => (\n  <div\n    className={cn(\n      'flex items-center gap-3 border-t border-gray bg-base-gray-surface px-4 py-3',\n      className,\n    )}\n    {...rest}\n  />\n)\n\nconst EntityCardFooter = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => (\n  <div\n    className={cn(\n      'flex items-center justify-center gap-1.5 border-t border-gray bg-base-gray-surface px-4 py-2 text-xs text-gray-light',\n      className,\n    )}\n    {...rest}\n  />\n)\n\nexport {\n  EntityCard,\n  EntityCardBody,\n  EntityCardControls,\n  EntityCardDetail,\n  EntityCardFooter,\n  EntityCardHeader,\n  EntityCardIcon,\n  EntityCardMeters,\n  EntityCardState,\n  EntityCardTitle,\n  EntityCardTitleColumn,\n  EntityCardValue,\n}\n"],"mappings":"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"}

package/dist/components/{device-card.d.cts → entity-card.d.cts}

@@ -4,27 +4,27 @@ import { Tone } from "../lib/tones.cjs";
 import * as React$1 from "react";
 import { SparkIcon } from "@epilot/spark-icons";
 
-//#region src/components/device-card.d.ts
-declare const DeviceCard: ({
+//#region src/components/entity-card.d.ts
+declare const EntityCard: ({
   className,
   ...rest
 }: React$1.ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
-declare const DeviceCardBody: ({
+declare const EntityCardBody: ({
   className,
   active,
   ...rest
 }: React$1.ComponentProps<"button"> & {
   active?: boolean;
 }) => import("react/jsx-runtime").JSX.Element;
-declare const DeviceCardHeader: ({
+declare const EntityCardHeader: ({
   className,
   ...rest
 }: React$1.ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
-declare const DeviceCardMeters: ({
+declare const EntityCardMeters: ({
   className,
   ...rest
 }: React$1.ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
-declare const DeviceCardIcon: ({
+declare const EntityCardIcon: ({
   className,
   icon: Glyph,
   tone,
@@ -33,15 +33,15 @@ declare const DeviceCardIcon: ({
   icon: SparkIcon;
   tone?: Tone;
 }) => import("react/jsx-runtime").JSX.Element;
-declare const DeviceCardTitleColumn: ({
+declare const EntityCardTitleColumn: ({
   className,
   ...rest
 }: React$1.ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
-declare const DeviceCardTitle: ({
+declare const EntityCardTitle: ({
   className,
   ...rest
 }: React$1.ComponentProps<"span">) => import("react/jsx-runtime").JSX.Element;
-declare const DeviceCardState: ({
+declare const EntityCardState: ({
   className,
   tone,
   children,
@@ -49,22 +49,22 @@ declare const DeviceCardState: ({
 }: React$1.ComponentProps<"span"> & {
   tone?: Tone;
 }) => import("react/jsx-runtime").JSX.Element;
-declare const DeviceCardDetail: ({
+declare const EntityCardDetail: ({
   className,
   ...rest
 }: React$1.ComponentProps<"span">) => import("react/jsx-runtime").JSX.Element;
-declare const DeviceCardPower: ({
+declare const EntityCardValue: ({
   className,
   ...rest
 }: React$1.ComponentProps<"span">) => import("react/jsx-runtime").JSX.Element;
-declare const DeviceCardControls: ({
+declare const EntityCardControls: ({
   className,
   ...rest
 }: React$1.ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
-declare const DeviceCardFooter: ({
+declare const EntityCardFooter: ({
   className,
   ...rest
 }: React$1.ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
 //#endregion
-export { DeviceCard, DeviceCardBody, DeviceCardControls, DeviceCardDetail, DeviceCardFooter, DeviceCardHeader, DeviceCardIcon, DeviceCardMeters, DeviceCardPower, DeviceCardState, DeviceCardTitle, DeviceCardTitleColumn };
-//# sourceMappingURL=device-card.d.cts.map
+export { EntityCard, EntityCardBody, EntityCardControls, EntityCardDetail, EntityCardFooter, EntityCardHeader, EntityCardIcon, EntityCardMeters, EntityCardState, EntityCardTitle, EntityCardTitleColumn, EntityCardValue };
+//# sourceMappingURL=entity-card.d.cts.map

package/dist/components/{device-card.d.ts → entity-card.d.ts}

@@ -1,30 +1,30 @@
 "use client";
 
 import { Tone } from "../lib/tones.js";
-import * as React$1 from "react";
 import { SparkIcon } from "@epilot/spark-icons";
+import * as React$1 from "react";
 
-//#region src/components/device-card.d.ts
-declare const DeviceCard: ({
+//#region src/components/entity-card.d.ts
+declare const EntityCard: ({
   className,
   ...rest
 }: React$1.ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
-declare const DeviceCardBody: ({
+declare const EntityCardBody: ({
   className,
   active,
   ...rest
 }: React$1.ComponentProps<"button"> & {
   active?: boolean;
 }) => import("react/jsx-runtime").JSX.Element;
-declare const DeviceCardHeader: ({
+declare const EntityCardHeader: ({
   className,
   ...rest
 }: React$1.ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
-declare const DeviceCardMeters: ({
+declare const EntityCardMeters: ({
   className,
   ...rest
 }: React$1.ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
-declare const DeviceCardIcon: ({
+declare const EntityCardIcon: ({
   className,
   icon: Glyph,
   tone,
@@ -33,15 +33,15 @@ declare const DeviceCardIcon: ({
   icon: SparkIcon;
   tone?: Tone;
 }) => import("react/jsx-runtime").JSX.Element;
-declare const DeviceCardTitleColumn: ({
+declare const EntityCardTitleColumn: ({
   className,
   ...rest
 }: React$1.ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
-declare const DeviceCardTitle: ({
+declare const EntityCardTitle: ({
   className,
   ...rest
 }: React$1.ComponentProps<"span">) => import("react/jsx-runtime").JSX.Element;
-declare const DeviceCardState: ({
+declare const EntityCardState: ({
   className,
   tone,
   children,
@@ -49,22 +49,22 @@ declare const DeviceCardState: ({
 }: React$1.ComponentProps<"span"> & {
   tone?: Tone;
 }) => import("react/jsx-runtime").JSX.Element;
-declare const DeviceCardDetail: ({
+declare const EntityCardDetail: ({
   className,
   ...rest
 }: React$1.ComponentProps<"span">) => import("react/jsx-runtime").JSX.Element;
-declare const DeviceCardPower: ({
+declare const EntityCardValue: ({
   className,
   ...rest
 }: React$1.ComponentProps<"span">) => import("react/jsx-runtime").JSX.Element;
-declare const DeviceCardControls: ({
+declare const EntityCardControls: ({
   className,
   ...rest
 }: React$1.ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
-declare const DeviceCardFooter: ({
+declare const EntityCardFooter: ({
   className,
   ...rest
 }: React$1.ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
 //#endregion
-export { DeviceCard, DeviceCardBody, DeviceCardControls, DeviceCardDetail, DeviceCardFooter, DeviceCardHeader, DeviceCardIcon, DeviceCardMeters, DeviceCardPower, DeviceCardState, DeviceCardTitle, DeviceCardTitleColumn };
-//# sourceMappingURL=device-card.d.ts.map
+export { EntityCard, EntityCardBody, EntityCardControls, EntityCardDetail, EntityCardFooter, EntityCardHeader, EntityCardIcon, EntityCardMeters, EntityCardState, EntityCardTitle, EntityCardTitleColumn, EntityCardValue };
+//# sourceMappingURL=entity-card.d.ts.map

package/dist/components/{device-card.js → entity-card.js}

@@ -3,35 +3,35 @@ import { cn } from "../utils/cn.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
-//#region src/components/device-card.tsx
-const DeviceCard = ({ className, ...rest }) => /* @__PURE__ */ jsx("div", {
+//#region src/components/entity-card.tsx
+const EntityCard = ({ className, ...rest }) => /* @__PURE__ */ jsx("div", {
 	className: cn("flex flex-col overflow-hidden rounded-lg border border-gray bg-(--spark-background)", className),
 	...rest
 });
-const DeviceCardBody = ({ className, active, ...rest }) => /* @__PURE__ */ jsx("button", {
+const EntityCardBody = ({ className, active, ...rest }) => /* @__PURE__ */ jsx("button", {
 	type: "button",
 	className: cn("flex w-full cursor-pointer flex-col gap-3 p-4 text-left transition-colors hover:bg-gray-a2 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-accent-focus", active && "bg-linear-to-br from-spark-9/10 to-spark-1/5 to-20%", className),
 	...rest
 });
-const DeviceCardHeader = ({ className, ...rest }) => /* @__PURE__ */ jsx("div", {
+const EntityCardHeader = ({ className, ...rest }) => /* @__PURE__ */ jsx("div", {
 	className: cn("flex w-full items-center gap-3", className),
 	...rest
 });
-const DeviceCardMeters = ({ className, ...rest }) => /* @__PURE__ */ jsx("div", {
+const EntityCardMeters = ({ className, ...rest }) => /* @__PURE__ */ jsx("div", {
 	className: cn("flex flex-col gap-2 border-t border-gray pt-3", className),
 	...rest
 });
 const iconToneVariants = cva("flex size-11 shrink-0 items-center justify-center rounded-[max(var(--spark-rounded-md),var(--spark-rounded-full))]", {
 	variants: { tone: {
-		success: "bg-base-success-soft text-success",
-		warning: "bg-base-warning-soft text-warning",
-		error: "bg-base-error-soft text-error",
-		accent: "bg-base-accent-soft text-accent",
+		success: "bg-success-soft text-success-soft-foreground",
+		warning: "bg-warning-soft text-warning-soft-foreground",
+		error: "bg-error-soft text-error-soft-foreground",
+		accent: "bg-primary-soft text-primary-soft-foreground",
 		neutral: "bg-base-gray-soft text-gray"
 	} },
 	defaultVariants: { tone: "neutral" }
 });
-const DeviceCardIcon = ({ className, icon: Glyph, tone, ...rest }) => /* @__PURE__ */ jsx("span", {
+const EntityCardIcon = ({ className, icon: Glyph, tone, ...rest }) => /* @__PURE__ */ jsx("span", {
 	className: iconToneVariants({
 		tone,
 		className
@@ -39,11 +39,11 @@ const DeviceCardIcon = ({ className, icon: Glyph, tone, ...rest }) => /* @__PURE
 	...rest,
 	children: /* @__PURE__ */ jsx(Glyph, { className: "[--spark-icon-size:18px]" })
 });
-const DeviceCardTitleColumn = ({ className, ...rest }) => /* @__PURE__ */ jsx("div", {
+const EntityCardTitleColumn = ({ className, ...rest }) => /* @__PURE__ */ jsx("div", {
 	className: cn("flex min-w-0 flex-1 flex-col gap-0.5", className),
 	...rest
 });
-const DeviceCardTitle = ({ className, ...rest }) => /* @__PURE__ */ jsx("span", {
+const EntityCardTitle = ({ className, ...rest }) => /* @__PURE__ */ jsx("span", {
 	className: cn("truncate text-sm font-bold text-gray", className),
 	...rest
 });
@@ -62,12 +62,12 @@ const dotToneVariants = cva("size-1.5 shrink-0 rounded-full", {
 		success: "bg-base-success-solid",
 		warning: "bg-base-warning-solid",
 		error: "bg-base-error-solid",
-		accent: "bg-base-accent-solid",
+		accent: "bg-primary",
 		neutral: "bg-base-gray-solid"
 	} },
 	defaultVariants: { tone: "neutral" }
 });
-const DeviceCardState = ({ className, tone, children, ...rest }) => /* @__PURE__ */ jsxs("span", {
+const EntityCardState = ({ className, tone, children, ...rest }) => /* @__PURE__ */ jsxs("span", {
 	className: stateToneVariants({
 		tone,
 		className
@@ -78,23 +78,23 @@ const DeviceCardState = ({ className, tone, children, ...rest }) => /* @__PURE__
 		children
 	})]
 });
-const DeviceCardDetail = ({ className, ...rest }) => /* @__PURE__ */ jsx("span", {
+const EntityCardDetail = ({ className, ...rest }) => /* @__PURE__ */ jsx("span", {
 	className: cn("truncate text-xs text-gray-light tabular-nums", className),
 	...rest
 });
-const DeviceCardPower = ({ className, ...rest }) => /* @__PURE__ */ jsx("span", {
+const EntityCardValue = ({ className, ...rest }) => /* @__PURE__ */ jsx("span", {
 	className: cn("ms-2 shrink-0 self-center text-lg leading-tight font-bold text-gray tabular-nums", className),
 	...rest
 });
-const DeviceCardControls = ({ className, ...rest }) => /* @__PURE__ */ jsx("div", {
+const EntityCardControls = ({ className, ...rest }) => /* @__PURE__ */ jsx("div", {
 	className: cn("flex items-center gap-3 border-t border-gray bg-base-gray-surface px-4 py-3", className),
 	...rest
 });
-const DeviceCardFooter = ({ className, ...rest }) => /* @__PURE__ */ jsx("div", {
+const EntityCardFooter = ({ className, ...rest }) => /* @__PURE__ */ jsx("div", {
 	className: cn("flex items-center justify-center gap-1.5 border-t border-gray bg-base-gray-surface px-4 py-2 text-xs text-gray-light", className),
 	...rest
 });
 //#endregion
-export { DeviceCard, DeviceCardBody, DeviceCardControls, DeviceCardDetail, DeviceCardFooter, DeviceCardHeader, DeviceCardIcon, DeviceCardMeters, DeviceCardPower, DeviceCardState, DeviceCardTitle, DeviceCardTitleColumn };
+export { EntityCard, EntityCardBody, EntityCardControls, EntityCardDetail, EntityCardFooter, EntityCardHeader, EntityCardIcon, EntityCardMeters, EntityCardState, EntityCardTitle, EntityCardTitleColumn, EntityCardValue };
 
-//# sourceMappingURL=device-card.js.map
+//# sourceMappingURL=entity-card.js.map

package/dist/components/entity-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"entity-card.js","names":[],"sources":["../../src/components/entity-card.tsx"],"sourcesContent":["import type { SparkIcon } from '@epilot/spark-icons'\nimport { cva } from 'class-variance-authority'\nimport * as React from 'react'\nimport type { Tone } from '../lib/tones'\nimport { cn } from '../utils/cn'\n\nconst EntityCard = ({ className, ...rest }: React.ComponentProps<'div'>) => (\n  <div\n    className={cn(\n      'flex flex-col overflow-hidden rounded-lg border border-gray bg-(--spark-background)',\n      className,\n    )}\n    {...rest}\n  />\n)\n\nconst EntityCardBody = ({\n  className,\n  active,\n  ...rest\n}: React.ComponentProps<'button'> & { active?: boolean }) => (\n  <button\n    type=\"button\"\n    className={cn(\n      'flex w-full cursor-pointer flex-col gap-3 p-4 text-left transition-colors hover:bg-gray-a2 focus-visible:outline-2 focus-visible:-outline-offset-2 focus-visible:outline-accent-focus',\n      active && 'bg-linear-to-br from-spark-9/10 to-spark-1/5 to-20%',\n      className,\n    )}\n    {...rest}\n  />\n)\n\nconst EntityCardHeader = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => (\n  <div className={cn('flex w-full items-center gap-3', className)} {...rest} />\n)\n\nconst EntityCardMeters = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => (\n  <div\n    className={cn('flex flex-col gap-2 border-t border-gray pt-3', className)}\n    {...rest}\n  />\n)\n\nconst iconToneVariants = cva(\n  // max() pill escape (matches Icon): a tile stays rounded-md at low Roundness but\n  // becomes a circle at large/full, same as it did pre-harmonization via clamping.\n  'flex size-11 shrink-0 items-center justify-center rounded-[max(var(--spark-rounded-md),var(--spark-rounded-full))]',\n  {\n    variants: {\n      tone: {\n        success: 'bg-success-soft text-success-soft-foreground',\n        warning: 'bg-warning-soft text-warning-soft-foreground',\n        error: 'bg-error-soft text-error-soft-foreground',\n        accent: 'bg-primary-soft text-primary-soft-foreground',\n        neutral: 'bg-base-gray-soft text-gray',\n      },\n    },\n    defaultVariants: { tone: 'neutral' },\n  },\n)\n\nconst EntityCardIcon = ({\n  className,\n  icon: Glyph,\n  tone,\n  ...rest\n}: React.ComponentProps<'span'> & {\n  icon: SparkIcon\n  tone?: Tone\n}) => (\n  <span className={iconToneVariants({ tone, className })} {...rest}>\n    <Glyph className=\"[--spark-icon-size:18px]\" />\n  </span>\n)\n\nconst EntityCardTitleColumn = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => (\n  <div\n    className={cn('flex min-w-0 flex-1 flex-col gap-0.5', className)}\n    {...rest}\n  />\n)\n\nconst EntityCardTitle = ({\n  className,\n  ...rest\n}: React.ComponentProps<'span'>) => (\n  <span\n    className={cn('truncate text-sm font-bold text-gray', className)}\n    {...rest}\n  />\n)\n\nconst stateToneVariants = cva(\n  'inline-flex items-center gap-1.5 text-xs font-medium',\n  {\n    variants: {\n      tone: {\n        success: 'text-success',\n        warning: 'text-warning',\n        error: 'text-error',\n        accent: 'text-accent',\n        neutral: 'text-gray-light',\n      },\n    },\n    defaultVariants: { tone: 'neutral' },\n  },\n)\n\nconst dotToneVariants = cva('size-1.5 shrink-0 rounded-full', {\n  variants: {\n    tone: {\n      success: 'bg-base-success-solid',\n      warning: 'bg-base-warning-solid',\n      error: 'bg-base-error-solid',\n      accent: 'bg-primary',\n      neutral: 'bg-base-gray-solid',\n    },\n  },\n  defaultVariants: { tone: 'neutral' },\n})\n\nconst EntityCardState = ({\n  className,\n  tone,\n  children,\n  ...rest\n}: React.ComponentProps<'span'> & { tone?: Tone }) => (\n  <span className={stateToneVariants({ tone, className })} {...rest}>\n    <span className={dotToneVariants({ tone })} />\n    <span className=\"truncate\">{children}</span>\n  </span>\n)\n\nconst EntityCardDetail = ({\n  className,\n  ...rest\n}: React.ComponentProps<'span'>) => (\n  <span\n    className={cn('truncate text-xs text-gray-light tabular-nums', className)}\n    {...rest}\n  />\n)\n\nconst EntityCardValue = ({\n  className,\n  ...rest\n}: React.ComponentProps<'span'>) => (\n  <span\n    className={cn(\n      'ms-2 shrink-0 self-center text-lg leading-tight font-bold text-gray tabular-nums',\n      className,\n    )}\n    {...rest}\n  />\n)\n\nconst EntityCardControls = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => (\n  <div\n    className={cn(\n      'flex items-center gap-3 border-t border-gray bg-base-gray-surface px-4 py-3',\n      className,\n    )}\n    {...rest}\n  />\n)\n\nconst EntityCardFooter = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => (\n  <div\n    className={cn(\n      'flex items-center justify-center gap-1.5 border-t border-gray bg-base-gray-surface px-4 py-2 text-xs text-gray-light',\n      className,\n    )}\n    {...rest}\n  />\n)\n\nexport {\n  EntityCard,\n  EntityCardBody,\n  EntityCardControls,\n  EntityCardDetail,\n  EntityCardFooter,\n  EntityCardHeader,\n  EntityCardIcon,\n  EntityCardMeters,\n  EntityCardState,\n  EntityCardTitle,\n  EntityCardTitleColumn,\n  EntityCardValue,\n}\n"],"mappings":";;;;;;AAMA,MAAM,cAAc,EAAE,WAAW,GAAG,WAClC,oBAAC,OAAD;CACE,WAAW,GACT,uFACA,SACF;CACA,GAAI;AACL,CAAA;AAGH,MAAM,kBAAkB,EACtB,WACA,QACA,GAAG,WAEH,oBAAC,UAAD;CACE,MAAK;CACL,WAAW,GACT,yLACA,UAAU,uDACV,SACF;CACA,GAAI;AACL,CAAA;AAGH,MAAM,oBAAoB,EACxB,WACA,GAAG,WAEH,oBAAC,OAAD;CAAK,WAAW,GAAG,kCAAkC,SAAS;CAAG,GAAI;AAAO,CAAA;AAG9E,MAAM,oBAAoB,EACxB,WACA,GAAG,WAEH,oBAAC,OAAD;CACE,WAAW,GAAG,iDAAiD,SAAS;CACxE,GAAI;AACL,CAAA;AAGH,MAAM,mBAAmB,IAGvB,sHACA;CACE,UAAU,EACR,MAAM;EACJ,SAAS;EACT,SAAS;EACT,OAAO;EACP,QAAQ;EACR,SAAS;CACX,EACF;CACA,iBAAiB,EAAE,MAAM,UAAU;AACrC,CACF;AAEA,MAAM,kBAAkB,EACtB,WACA,MAAM,OACN,MACA,GAAG,WAKH,oBAAC,QAAD;CAAM,WAAW,iBAAiB;EAAE;EAAM;CAAU,CAAC;CAAG,GAAI;WAC1D,oBAAC,OAAD,EAAO,WAAU,2BAA4B,CAAA;AACzC,CAAA;AAGR,MAAM,yBAAyB,EAC7B,WACA,GAAG,WAEH,oBAAC,OAAD;CACE,WAAW,GAAG,wCAAwC,SAAS;CAC/D,GAAI;AACL,CAAA;AAGH,MAAM,mBAAmB,EACvB,WACA,GAAG,WAEH,oBAAC,QAAD;CACE,WAAW,GAAG,wCAAwC,SAAS;CAC/D,GAAI;AACL,CAAA;AAGH,MAAM,oBAAoB,IACxB,wDACA;CACE,UAAU,EACR,MAAM;EACJ,SAAS;EACT,SAAS;EACT,OAAO;EACP,QAAQ;EACR,SAAS;CACX,EACF;CACA,iBAAiB,EAAE,MAAM,UAAU;AACrC,CACF;AAEA,MAAM,kBAAkB,IAAI,kCAAkC;CAC5D,UAAU,EACR,MAAM;EACJ,SAAS;EACT,SAAS;EACT,OAAO;EACP,QAAQ;EACR,SAAS;CACX,EACF;CACA,iBAAiB,EAAE,MAAM,UAAU;AACrC,CAAC;AAED,MAAM,mBAAmB,EACvB,WACA,MACA,UACA,GAAG,WAEH,qBAAC,QAAD;CAAM,WAAW,kBAAkB;EAAE;EAAM;CAAU,CAAC;CAAG,GAAI;WAA7D,CACE,oBAAC,QAAD,EAAM,WAAW,gBAAgB,EAAE,KAAK,CAAC,EAAI,CAAA,GAC7C,oBAAC,QAAD;EAAM,WAAU;EAAY;CAAe,CAAA,CACvC;;AAGR,MAAM,oBAAoB,EACxB,WACA,GAAG,WAEH,oBAAC,QAAD;CACE,WAAW,GAAG,iDAAiD,SAAS;CACxE,GAAI;AACL,CAAA;AAGH,MAAM,mBAAmB,EACvB,WACA,GAAG,WAEH,oBAAC,QAAD;CACE,WAAW,GACT,oFACA,SACF;CACA,GAAI;AACL,CAAA;AAGH,MAAM,sBAAsB,EAC1B,WACA,GAAG,WAEH,oBAAC,OAAD;CACE,WAAW,GACT,+EACA,SACF;CACA,GAAI;AACL,CAAA;AAGH,MAAM,oBAAoB,EACxB,WACA,GAAG,WAEH,oBAAC,OAAD;CACE,WAAW,GACT,wHACA,SACF;CACA,GAAI;AACL,CAAA"}

package/dist/components/{feed-in-hero.cjs → hero-metric.cjs}

@@ -3,18 +3,14 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 let react_jsx_runtime = require("react/jsx-runtime");
 let class_variance_authority = require("class-variance-authority");
 let cnfast = require("cnfast");
-//#region src/components/feed-in-hero.tsx
-const FeedInHero = ({ className, ...rest }) => {
+//#region src/components/hero-metric.tsx
+const HeroMetric = ({ className, ...rest }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: (0, cnfast.cn)("flex flex-col items-center gap-1 rounded-lg border border-gray p-5 text-center", className),
 		...rest
 	});
 };
-/**
-* Label row above the value. Lays out children in a flex row with a small
-* gap so a tooltip / icon can sit alongside the label text.
-*/
-const FeedInHeroLabel = ({ className, ...rest }) => {
+const HeroMetricLabel = ({ className, ...rest }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
 		className: (0, cnfast.cn)("flex items-center gap-1.5 text-xs font-medium text-gray-light", className),
 		...rest
@@ -30,7 +26,7 @@ const valueToneVariants = (0, class_variance_authority.cva)("text-4xl font-bold
 	} },
 	defaultVariants: { tone: "neutral" }
 });
-const FeedInHeroValue = ({ className, tone, ...rest }) => {
+const HeroMetricValue = ({ className, tone, ...rest }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 		className: valueToneVariants({
 			tone,
@@ -39,17 +35,16 @@ const FeedInHeroValue = ({ className, tone, ...rest }) => {
 		...rest
 	});
 };
-/** Smaller-weight unit suffix that sits inline with the value (e.g. "W"). */
-const FeedInHeroValueUnit = ({ className, ...rest }) => {
+const HeroMetricValueUnit = ({ className, ...rest }) => {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
 		className: (0, cnfast.cn)("text-2xl font-semibold", className),
 		...rest
 	});
 };
 //#endregion
-exports.FeedInHero = FeedInHero;
-exports.FeedInHeroLabel = FeedInHeroLabel;
-exports.FeedInHeroValue = FeedInHeroValue;
-exports.FeedInHeroValueUnit = FeedInHeroValueUnit;
+exports.HeroMetric = HeroMetric;
+exports.HeroMetricLabel = HeroMetricLabel;
+exports.HeroMetricValue = HeroMetricValue;
+exports.HeroMetricValueUnit = HeroMetricValueUnit;
 
-//# sourceMappingURL=feed-in-hero.cjs.map
+//# sourceMappingURL=hero-metric.cjs.map

package/dist/components/hero-metric.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"hero-metric.cjs","names":[],"sources":["../../src/components/hero-metric.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority'\nimport type { Tone } from '../lib/tones'\nimport { cn } from '../utils/cn'\n\nconst HeroMetric = ({ className, ...rest }: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn(\n        'flex flex-col items-center gap-1 rounded-lg border border-gray p-5 text-center',\n        className,\n      )}\n      {...rest}\n    />\n  )\n}\n\nconst HeroMetricLabel = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn(\n        'flex items-center gap-1.5 text-xs font-medium text-gray-light',\n        className,\n      )}\n      {...rest}\n    />\n  )\n}\n\nconst valueToneVariants = cva('text-4xl font-bold tabular-nums', {\n  variants: {\n    tone: {\n      success: 'text-success',\n      warning: 'text-warning',\n      error: 'text-error',\n      accent: 'text-accent',\n      neutral: 'text-gray',\n    },\n  },\n  defaultVariants: {\n    tone: 'neutral',\n  },\n})\n\nconst HeroMetricValue = ({\n  className,\n  tone,\n  ...rest\n}: React.ComponentProps<'span'> & { tone?: Tone }) => {\n  return <span className={valueToneVariants({ tone, className })} {...rest} />\n}\n\nconst HeroMetricValueUnit = ({\n  className,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  return <span className={cn('text-2xl font-semibold', className)} {...rest} />\n}\n\nexport { HeroMetric, HeroMetricLabel, HeroMetricValue, HeroMetricValueUnit }\n"],"mappings":";;;;;;AAIA,MAAM,cAAc,EAAE,WAAW,GAAG,WAAwC;CAC1E,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,YAAA,GAAA,OAAA,IACE,kFACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,mBAAmB,EACvB,WACA,GAAG,WAC8B;CACjC,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,YAAA,GAAA,OAAA,IACE,iEACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,qBAAA,GAAA,yBAAA,KAAwB,mCAAmC;CAC/D,UAAU,EACR,MAAM;EACJ,SAAS;EACT,SAAS;EACT,OAAO;EACP,QAAQ;EACR,SAAS;CACX,EACF;CACA,iBAAiB,EACf,MAAM,UACR;AACF,CAAC;AAED,MAAM,mBAAmB,EACvB,WACA,MACA,GAAG,WACiD;CACpD,OAAO,iBAAA,GAAA,kBAAA,KAAC,QAAD;EAAM,WAAW,kBAAkB;GAAE;GAAM;EAAU,CAAC;EAAG,GAAI;CAAO,CAAA;AAC7E;AAEA,MAAM,uBAAuB,EAC3B,WACA,GAAG,WAC+B;CAClC,OAAO,iBAAA,GAAA,kBAAA,KAAC,QAAD;EAAM,YAAA,GAAA,OAAA,IAAc,0BAA0B,SAAS;EAAG,GAAI;CAAO,CAAA;AAC9E"}

package/dist/components/hero-metric.d.cts

@@ -0,0 +1,27 @@
+"use client";
+
+import { Tone } from "../lib/tones.cjs";
+
+//#region src/components/hero-metric.d.ts
+declare const HeroMetric: ({
+  className,
+  ...rest
+}: React.ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
+declare const HeroMetricLabel: ({
+  className,
+  ...rest
+}: React.ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
+declare const HeroMetricValue: ({
+  className,
+  tone,
+  ...rest
+}: React.ComponentProps<"span"> & {
+  tone?: Tone;
+}) => import("react/jsx-runtime").JSX.Element;
+declare const HeroMetricValueUnit: ({
+  className,
+  ...rest
+}: React.ComponentProps<"span">) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { HeroMetric, HeroMetricLabel, HeroMetricValue, HeroMetricValueUnit };
+//# sourceMappingURL=hero-metric.d.cts.map

package/dist/components/hero-metric.d.ts

@@ -0,0 +1,27 @@
+"use client";
+
+import { Tone } from "../lib/tones.js";
+
+//#region src/components/hero-metric.d.ts
+declare const HeroMetric: ({
+  className,
+  ...rest
+}: React.ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
+declare const HeroMetricLabel: ({
+  className,
+  ...rest
+}: React.ComponentProps<"div">) => import("react/jsx-runtime").JSX.Element;
+declare const HeroMetricValue: ({
+  className,
+  tone,
+  ...rest
+}: React.ComponentProps<"span"> & {
+  tone?: Tone;
+}) => import("react/jsx-runtime").JSX.Element;
+declare const HeroMetricValueUnit: ({
+  className,
+  ...rest
+}: React.ComponentProps<"span">) => import("react/jsx-runtime").JSX.Element;
+//#endregion
+export { HeroMetric, HeroMetricLabel, HeroMetricValue, HeroMetricValueUnit };
+//# sourceMappingURL=hero-metric.d.ts.map

package/dist/components/{feed-in-hero.js → hero-metric.js}

@@ -2,18 +2,14 @@
 import { cn } from "../utils/cn.js";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
-//#region src/components/feed-in-hero.tsx
-const FeedInHero = ({ className, ...rest }) => {
+//#region src/components/hero-metric.tsx
+const HeroMetric = ({ className, ...rest }) => {
 	return /* @__PURE__ */ jsx("div", {
 		className: cn("flex flex-col items-center gap-1 rounded-lg border border-gray p-5 text-center", className),
 		...rest
 	});
 };
-/**
-* Label row above the value. Lays out children in a flex row with a small
-* gap so a tooltip / icon can sit alongside the label text.
-*/
-const FeedInHeroLabel = ({ className, ...rest }) => {
+const HeroMetricLabel = ({ className, ...rest }) => {
 	return /* @__PURE__ */ jsx("div", {
 		className: cn("flex items-center gap-1.5 text-xs font-medium text-gray-light", className),
 		...rest
@@ -29,7 +25,7 @@ const valueToneVariants = cva("text-4xl font-bold tabular-nums", {
 	} },
 	defaultVariants: { tone: "neutral" }
 });
-const FeedInHeroValue = ({ className, tone, ...rest }) => {
+const HeroMetricValue = ({ className, tone, ...rest }) => {
 	return /* @__PURE__ */ jsx("span", {
 		className: valueToneVariants({
 			tone,
@@ -38,14 +34,13 @@ const FeedInHeroValue = ({ className, tone, ...rest }) => {
 		...rest
 	});
 };
-/** Smaller-weight unit suffix that sits inline with the value (e.g. "W"). */
-const FeedInHeroValueUnit = ({ className, ...rest }) => {
+const HeroMetricValueUnit = ({ className, ...rest }) => {
 	return /* @__PURE__ */ jsx("span", {
 		className: cn("text-2xl font-semibold", className),
 		...rest
 	});
 };
 //#endregion
-export { FeedInHero, FeedInHeroLabel, FeedInHeroValue, FeedInHeroValueUnit };
+export { HeroMetric, HeroMetricLabel, HeroMetricValue, HeroMetricValueUnit };
 
-//# sourceMappingURL=feed-in-hero.js.map
+//# sourceMappingURL=hero-metric.js.map

package/dist/components/hero-metric.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hero-metric.js","names":[],"sources":["../../src/components/hero-metric.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority'\nimport type { Tone } from '../lib/tones'\nimport { cn } from '../utils/cn'\n\nconst HeroMetric = ({ className, ...rest }: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn(\n        'flex flex-col items-center gap-1 rounded-lg border border-gray p-5 text-center',\n        className,\n      )}\n      {...rest}\n    />\n  )\n}\n\nconst HeroMetricLabel = ({\n  className,\n  ...rest\n}: React.ComponentProps<'div'>) => {\n  return (\n    <div\n      className={cn(\n        'flex items-center gap-1.5 text-xs font-medium text-gray-light',\n        className,\n      )}\n      {...rest}\n    />\n  )\n}\n\nconst valueToneVariants = cva('text-4xl font-bold tabular-nums', {\n  variants: {\n    tone: {\n      success: 'text-success',\n      warning: 'text-warning',\n      error: 'text-error',\n      accent: 'text-accent',\n      neutral: 'text-gray',\n    },\n  },\n  defaultVariants: {\n    tone: 'neutral',\n  },\n})\n\nconst HeroMetricValue = ({\n  className,\n  tone,\n  ...rest\n}: React.ComponentProps<'span'> & { tone?: Tone }) => {\n  return <span className={valueToneVariants({ tone, className })} {...rest} />\n}\n\nconst HeroMetricValueUnit = ({\n  className,\n  ...rest\n}: React.ComponentProps<'span'>) => {\n  return <span className={cn('text-2xl font-semibold', className)} {...rest} />\n}\n\nexport { HeroMetric, HeroMetricLabel, HeroMetricValue, HeroMetricValueUnit }\n"],"mappings":";;;;;AAIA,MAAM,cAAc,EAAE,WAAW,GAAG,WAAwC;CAC1E,OACE,oBAAC,OAAD;EACE,WAAW,GACT,kFACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,mBAAmB,EACvB,WACA,GAAG,WAC8B;CACjC,OACE,oBAAC,OAAD;EACE,WAAW,GACT,iEACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,MAAM,oBAAoB,IAAI,mCAAmC;CAC/D,UAAU,EACR,MAAM;EACJ,SAAS;EACT,SAAS;EACT,OAAO;EACP,QAAQ;EACR,SAAS;CACX,EACF;CACA,iBAAiB,EACf,MAAM,UACR;AACF,CAAC;AAED,MAAM,mBAAmB,EACvB,WACA,MACA,GAAG,WACiD;CACpD,OAAO,oBAAC,QAAD;EAAM,WAAW,kBAAkB;GAAE;GAAM;EAAU,CAAC;EAAG,GAAI;CAAO,CAAA;AAC7E;AAEA,MAAM,uBAAuB,EAC3B,WACA,GAAG,WAC+B;CAClC,OAAO,oBAAC,QAAD;EAAM,WAAW,GAAG,0BAA0B,SAAS;EAAG,GAAI;CAAO,CAAA;AAC9E"}

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

@@ -5,7 +5,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?: "default" | "bare" | null | undefined;
+  variant?: "bare" | "default" | null | undefined;
 } & import("class-variance-authority/types").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>>;