astryx-dracula 0.2.1 → 0.3.1

package/shared/data-bar.tsx

@@ -0,0 +1,160 @@
+// Shared data bar: a magnitude against a domain (quota, budget, allocation,
+// bandwidth headroom). This is NOT core's ProgressBar, and the difference is
+// the whole point of this file.
+//
+// WHY THIS EXISTS: core's ProgressBar is a TASK-progress component. Its own
+// JSDoc frames it as completion of known-duration work and says "Don't place
+// icons or labels inside the bar" and "Don't use a progress bar for instant
+// actions". Nine demo sites were using it for quota/headroom/budget meters — a
+// quantity that is not a percentage of anything and never completes. Those nine
+// now use this. If you are about to write "Risk level" value={15} with a
+// success colour and a hidden number, you are repeating the bug this module
+// exists to end: 15 is not 15% of anything, the number is invisible, and
+// success-green tells the reader the opposite of what a risk bar means.
+//
+// COLOUR CONTRACT (UIAuditColorMotion, measured against the surface each
+// element paints on):
+//   - A mark resolves to --color-data-categorical-* or a --color-data-<family>-N
+//     step. It does NOT resolve to a raw --dracula-* primitive. That discipline
+//     is what makes the 56 --color-data-* tokens load-bearing instead of
+//     decorative; before this module, zero of them had a single consumer.
+//   - On-fill text is dark. No Dracula fill carries #F8F8F2 at 4.5:1 (best case
+//     Functional Purple #815CD6 at 4.44:1), so dark on-fill is forced. The value
+//     is already pinned at tokens.css:208-211 and clears AA on all 7 accents.
+//     Do not let a contrast-solving heuristic reintroduce #000000 — raw black is
+//     a colour the spec never uses.
+//
+// INHERITED-FROM-CORE WARNING, verified against @astryxdesign/core 0.3.0:
+// core paints its neutral/disabled fill with a TEXT token —
+// ProgressBar.tsx:303,306 -> dist/astryx.css:586 (class x16fr6go) is
+// `background-color: var(--color-text-disabled)`. In this theme
+// --color-text-disabled and --color-progress-value are BOTH pin(DRA.comment)
+// #6272A4 (astryx-theme.ts:147 and :279), so the role substitution is invisible
+// by coincidence — zero delta is exactly why it survived. The neutral fill below
+// uses --color-progress-value, the token that means what it says.
+//
+// Not interactive. A data bar is not a control, so it carries no hover channel
+// and no focus ring; the inset-ring decision belongs to interactive surfaces.
+
+import type {CSSProperties} from 'react';
+import {HStack, StackItem, VStack} from '@astryxdesign/core/Stack';
+import {Text} from '@astryxdesign/core/Text';
+import type {ChartHue} from './chart-hues';
+
+export interface DataBarSegment {
+  /** Stable key for the segment. */
+  id: string;
+  value: number;
+  /** MUST be a --color-data-categorical-* or --color-data-<family>-N var.
+   *  Never a raw hex, never a --dracula-* primitive. Typed rather than
+   *  documented: `string` made the rule a comment nobody could break. */
+  color: ChartHue | `var(--color-data-${string})`;
+}
+
+/** Minimum segment share, so a tiny non-zero value stays visible. */
+const MIN_SEGMENT_PCT = 2;
+
+export interface DataBarProps {
+  /** Accessible name. Required — a bar with no name is an unlabelled graphic. */
+  label: string;
+  segments: readonly DataBarSegment[];
+  /** Bar thickness in px. @default 12 */
+  height?: number;
+  /** Show the summed value under the bar. @default false */
+  hasValueLabel?: boolean;
+  /** Formats the summed value. @default toLocaleString() */
+  formatValue?: (total: number) => string;
+  /** Gap between segments as a spacing-scale step. @default 0 */
+  gap?: 0 | 0.5 | 1 | 1.5 | 2 | 3;
+  /** Neutral fill shown when every segment is zero. Deliberately
+   *  --color-progress-value, NOT a text token — see the header. */
+  trackColor?: string;
+}
+
+const segmentStyle: CSSProperties = {
+  borderRadius: 'var(--radius-inner)',
+};
+
+export function DataBar({
+  label,
+  segments,
+  height = 12,
+  hasValueLabel = false,
+  formatValue = total => total.toLocaleString(),
+  gap = 0,
+  trackColor = 'var(--color-progress-value)',
+}: DataBarProps) {
+  // Negative values are not a magnitude and are clamped out before the ratio is
+  // taken: summing a negative into `total` inflates every other segment's
+  // share and can push the bar past 100%. An empty or all-zero bar falls
+  // through to the track fill below.
+  const total = segments.reduce(
+    (sum, segment) => sum + Math.max(0, segment.value),
+    0,
+  );
+  const visible = segments
+    .map(segment => {
+      if (segment.value <= 0) return null;
+      return {
+        id: segment.id,
+        color: segment.color,
+        share: (segment.value / total) * 100,
+      };
+    })
+    .filter((segment): segment is NonNullable<typeof segment> => segment !== null);
+
+  // A tiny non-zero value must stay visible, so each segment gets a floor —
+  // but the floors are taken OUT of the segments that can afford it. Flooring
+  // every segment independently overflows the bar (3 tiny + 1 huge measured
+  // 106%), and a bar wider than its track is worse than a missing speck.
+  const floorTotal = visible.length * MIN_SEGMENT_PCT;
+  const surplus = Math.max(0, 100 - floorTotal);
+  const slack = Math.max(
+    0,
+    visible.reduce(
+      (sum, segment) => sum + Math.max(0, segment.share - MIN_SEGMENT_PCT),
+      0,
+    ),
+  );
+  const widths = visible.map(segment => {
+    const room = Math.max(0, segment.share - MIN_SEGMENT_PCT);
+    const claim = slack > 0 ? (room / slack) * surplus : 0;
+    return Math.min(100, MIN_SEGMENT_PCT + claim);
+  });
+  const drawn = visible
+    .map((segment, index) => ({...segment, width: widths[index]}))
+    .filter(segment => segment.width > 0);
+
+  const bar = (
+    <HStack
+      gap={gap}
+      height={height}
+      width="100%"
+      vAlign="stretch"
+      role="img"
+      aria-label={label}
+      style={
+        total > 0
+          ? undefined
+          : {background: trackColor, borderRadius: 'var(--radius-inner)'}
+      }>
+      {drawn.map(segment => (
+        <StackItem
+          key={segment.id}
+          style={{...segmentStyle, flexBasis: `${segment.width}%`, background: segment.color}}
+        />
+      ))}
+    </HStack>
+  );
+
+  if (!hasValueLabel) return bar;
+
+  return (
+    <VStack gap={1}>
+      {bar}
+      <Text type="supporting" color="secondary" hasTabularNumbers>
+        {formatValue(total)}
+      </Text>
+    </VStack>
+  );
+}

package/shared/gallery-image.ts

@@ -0,0 +1,20 @@
+// Shared gallery image fill + radius-clip (pending core Image #2582).
+// AspectRatio exposes no objectFit or radius props and Astryx ships no Image
+// primitive, so gallery SVG scenes fill their box and clip to rounded corners
+// through these two styles. Replace with component props once #2582 lands.
+
+import type {CSSProperties} from 'react';
+
+// Fills the AspectRatio box. No objectFit prop on AspectRatio (#2582).
+export const galleryImage: CSSProperties = {
+  width: '100%',
+  height: '100%',
+  display: 'block',
+};
+
+// Rounds the gallery corners (element radius; chapter art uses container — see
+// shared/chaptered-doc sceneClip). No radius prop on AspectRatio (#2582);
+export const galleryImageClip: CSSProperties = {
+  borderRadius: 'var(--radius-element)',
+  overflow: 'clip',
+};

package/shared/login-demo.ts

@@ -0,0 +1,7 @@
+// Fake-auth pause shared by the four login templates (login, login-card,
+// login-split, login-sso). Fixed 2s: plain Promise + setTimeout (no ES2024
+// Promise.withResolvers — the ES2022 target breaks strict consumers), awaited
+// inside each template's own startTransition.
+export function demoLogin(): Promise<void> {
+  return new Promise(resolve => setTimeout(resolve, 2000));
+}

package/shared/metric-delta.tsx

@@ -0,0 +1,36 @@
+// The one KPI-delta pattern: semibold body text tinted positive/negative with
+// the direction arrow carrying the same tone. The sign and the arrow carry the
+// direction; the tone only reinforces it — never rely on color alone.
+
+import {HStack} from '@astryxdesign/core/Stack';
+import {Text} from '@astryxdesign/core/Text';
+import {Icon} from '@astryxdesign/core/Icon';
+import {ArrowUp, ArrowDown} from 'lucide-react';
+
+export function MetricDelta({
+  value,
+  positive,
+}: {
+  /** Signed figure, e.g. "+12.4%" or "-3.1%". */
+  value: string;
+  positive: boolean;
+}) {
+  return (
+    <HStack gap={1} vAlign="center">
+      <Icon
+        icon={positive ? ArrowUp : ArrowDown}
+        size="xsm"
+        color={positive ? 'success' : 'error'}
+      />
+      <Text
+        type="body"
+        weight="semibold"
+        hasTabularNumbers
+        style={{
+          color: positive ? 'var(--color-positive)' : 'var(--color-negative)',
+        }}>
+        {value}
+      </Text>
+    </HStack>
+  );
+}

package/shared/order-desk.tsx

@@ -0,0 +1,273 @@
+// Parametric order desk shared by the table-page-chart (Matcha Bar) and
+// table-page-shoe-store-heatmap (Midnight Kicks) templates. The two pages are
+// one archetype — revenue line over the order log — differing only in catalogue,
+// rows, and chart scale, so the frame/columns live here once.
+import type {CSSProperties} from 'react';
+import {
+  VStack,
+  HStack,
+  StackItem,
+  Layout,
+  LayoutContent,
+  LayoutHeader,
+} from '@astryxdesign/core/Layout';
+import {Text, Heading} from '@astryxdesign/core/Text';
+import {Button} from '@astryxdesign/core/Button';
+import {IconButton} from '@astryxdesign/core/IconButton';
+import {Icon} from '@astryxdesign/core/Icon';
+import {Token} from '@astryxdesign/core/Token';
+import {Link} from '@astryxdesign/core/Link';
+import {Table, proportional, pixel} from '@astryxdesign/core/Table';
+import type {TableColumn} from '@astryxdesign/core/Table';
+import {Filter, Download, Plus} from 'lucide-react';
+import {RevenueChart, ProductSwatch} from 'astryx-dracula/shared/revenue-chart';
+import type {SceneHue} from 'astryx-dracula/shared/scene-hues';
+
+// Anchor for the page wrapper.
+//
+// `height: '100dvh'`, NOT `minHeight: '100%'`. A percentage min-height
+// resolves against the containing block's DEFINITE height and computes to 0
+// when that is indefinite (CSS 2.1 10.5), so against a content-sized host it
+// contributes nothing at all: the Layout's `height: 100%` still resolves to
+// auto and the document keeps the scroll, which is the failure this exists to
+// remove. Viewport units are absolute and need no ancestor, which is why every
+// working instance in this repo uses them -- editor.tsx:302, file-explorer.tsx:
+// 265, messaging-shell.tsx:67, ai-chat.tsx:64, kanban-board.tsx:704 -- and why
+// minHeight appears in none of them.
+//
+// The wrapper is shared by all three callers (table-page-chart.tsx:410,
+// table-page-shoe-store-heatmap.tsx:759, and this module's own default), so
+// anchoring it here covers them together. Anchoring inside each caller instead
+// would put a 100dvh box inside this one and overflow by the header height.
+//
+// The wrapper exists to give the Layout's `height: 100%` (Layout.tsx:58-63)
+// something definite to resolve against when the host is content-sized, which
+// is the case whenever a template ships standalone.
+const pageStyle: CSSProperties = {height: '100dvh'};
+
+export interface OrderDeskProduct {
+  name: string;
+  category: string;
+  /**
+   * Per-product art tint, painted by `ProductSwatch`. Same remit as
+   * `SceneTile.hue` — an art treatment, not a data series — so it takes the
+   * same `SceneHue` union rather than a free-form string. Typing the boundary
+   * HERE is what makes the compile-error list the real list: typed only at the
+   * consumer, a raw string flows through untyped and the error never fires.
+   */
+  accent: SceneHue;
+  price: number;
+}
+
+export interface OrderDeskRow extends Record<string, unknown> {
+  id: string;
+  customer: string;
+  email: string;
+  product: string;
+  category: string;
+  imageIndex: number;
+  amount: number;
+  status: 'completed' | 'processing' | 'shipped' | 'refunded';
+  date: string;
+}
+
+export interface RevenueDatum {
+  date: string;
+  revenue: number;
+}
+
+// Vocabulary, not a hue choice: orange is attention and constants only
+// (principle 3), and an order being picked is routine in-flight work, not
+// attention. In-progress/activity is cyan (info). refunded stays red — that
+// is a real negative.
+const STATUS_TOKEN_COLOR: Record<
+  OrderDeskRow['status'],
+  'green' | 'cyan' | 'red'
+> = {
+  completed: 'green',
+  shipped: 'cyan',
+  processing: 'cyan',
+  refunded: 'red',
+};
+
+const STATUS_LABEL: Record<OrderDeskRow['status'], string> = {
+  completed: 'Completed',
+  shipped: 'Shipped',
+  processing: 'Processing',
+  refunded: 'Refunded',
+};
+
+function columnsFor(selfHash: string, products: OrderDeskProduct[]): TableColumn<OrderDeskRow>[] {
+  return [
+    {
+      key: 'id',
+      header: 'Order',
+      width: pixel(96),
+      renderCell: (item: OrderDeskRow) => (
+        <Link href={selfHash} isStandalone>
+          {item.id}
+        </Link>
+      ),
+    },
+    {
+      key: 'product',
+      header: 'Product',
+      width: proportional(3, {minWidth: 160}),
+      renderCell: (item: OrderDeskRow) => (
+        <HStack gap={3} vAlign="center">
+          <ProductSwatch
+            accent={products[item.imageIndex].accent}
+            label={item.product}
+          />
+          <StackItem size="fill">
+            <VStack gap={0}>
+              <Text type="body" maxLines={1}>
+                {item.product}
+              </Text>
+              <Text type="supporting" color="secondary" maxLines={1}>
+                {item.category}
+              </Text>
+            </VStack>
+          </StackItem>
+        </HStack>
+      ),
+    },
+    {
+      key: 'amount',
+      header: 'Amount',
+      width: pixel(88),
+      renderCell: (item: OrderDeskRow) => (
+        <Text type="body" hasTabularNumbers maxLines={1}>
+          ${item.amount}
+        </Text>
+      ),
+    },
+    {
+      key: 'customer',
+      header: 'Customer',
+      width: proportional(2, {minWidth: 120}),
+      renderCell: (item: OrderDeskRow) => (
+        <Text type="body" maxLines={1}>
+          {item.customer}
+        </Text>
+      ),
+    },
+    {
+      key: 'email',
+      header: 'Email',
+      width: proportional(2, {minWidth: 120}),
+      renderCell: (item: OrderDeskRow) => (
+        <Text type="body" maxLines={1}>
+          {item.email}
+        </Text>
+      ),
+    },
+    {
+      key: 'status',
+      header: 'Status',
+      width: pixel(120),
+      renderCell: (item: OrderDeskRow) => (
+        <Token
+          size="sm"
+          color={STATUS_TOKEN_COLOR[item.status]}
+          label={STATUS_LABEL[item.status]}
+        />
+      ),
+    },
+    {
+      key: 'date',
+      header: 'Date',
+      width: pixel(112),
+      renderCell: (item: OrderDeskRow) => (
+        <Text type="body" hasTabularNumbers maxLines={1}>
+          {item.date}
+        </Text>
+      ),
+    },
+  ];
+}
+
+export function OrderDesk({
+  title,
+  selfHash,
+  products,
+  orders,
+  revenueData,
+  chartMax,
+  gridTicks,
+}: {
+  title: string;
+  selfHash: string;
+  products: OrderDeskProduct[];
+  orders: OrderDeskRow[];
+  revenueData: RevenueDatum[];
+  chartMax: number;
+  gridTicks: number[];
+}) {
+  return (
+    // The anchor lives on a page-owned wrapper, never on the Layout. A bare
+    // `height="fill"` resolves against `min-height: 100%`, which collapses when
+    // the host is content-sized — and templates ship standalone, so that is the
+    // common case. Putting the height on the Layout instead would trade
+    // a soft failure (the document scrolls) for a hard one (content clipped,
+    // because `LayoutContent` is `overflow: auto` with a definite height).
+    <div style={pageStyle}>
+      <Layout
+        height="fill"
+      header={
+        <LayoutHeader hasDivider padding={6}>
+          <HStack gap={2} vAlign="center">
+            <StackItem size="fill">
+              {/* maxLines={1}, not wrap="wrap": at 390 the 35px display-2 title
+                  wraps 2-3 lines in a 342px header (measured: 136px tall for
+                  "Midnight Kicks", 180px for an 18-char title). Wrapping the
+                  row measured IDENTICAL header heights in both configurations
+                  — the controls already fit, the title is what is tall. And
+                  maxLines wires core's useTruncation, so the full value stays
+                  reachable in a Tooltip (SC 1.4.10, "truncation must reveal"). */}
+              <Heading level={1} type="display-2" maxLines={1}>{title}</Heading>
+            </StackItem>
+            <IconButton
+              label="Filter"
+              icon={<Icon icon={Filter} size="sm" />}
+              variant="ghost"
+              tooltip="Filter"
+            />
+            <IconButton
+              label="Export"
+              icon={<Icon icon={Download} size="sm" />}
+              variant="ghost"
+              tooltip="Export"
+            />
+            <Button
+              label="New order"
+              variant="primary"
+              icon={<Icon icon={Plus} size="sm" />}
+            />
+          </HStack>
+        </LayoutHeader>
+      }
+      content={
+        <LayoutContent padding={3}>
+          <VStack gap={4}>
+            <RevenueChart
+              data={revenueData}
+              chartMax={chartMax}
+              gridTicks={gridTicks}
+            />
+            <Table<OrderDeskRow>
+              data={orders}
+              columns={columnsFor(selfHash, products)}
+              idKey="id"
+              density="balanced"
+              dividers="rows"
+              textOverflow="truncate"
+              hasHover
+            />
+          </VStack>
+        </LayoutContent>
+      }
+      />
+    </div>
+  );
+}

package/shared/revenue-chart.tsx

@@ -0,0 +1,181 @@
+// Shared daily-revenue line chart plus the rounded product swatch. Absorbs the
+// table-page-chart / shoe-store clones (only CHART_MAX and ticks differ) and
+// the theme-showcase ThumbSwatch as a sized variant. Chart panel Card keeps
+// the one shared chart-panel style until the theme pins a Card variant
+// (wave 2): import CHART_PANEL_STYLE rather than restating it.
+
+import type {CSSProperties} from 'react';
+import {CHART_PANEL_STYLE} from 'astryx-dracula/shared/chart-panel-style';
+import {CHART_HUES} from 'astryx-dracula/shared/chart-hues';
+import {VStack, HStack} from '@astryxdesign/core/Layout';
+import {Text} from '@astryxdesign/core/Text';
+import {Card} from '@astryxdesign/core/Card';
+import {Icon} from '@astryxdesign/core/Icon';
+import {Square} from 'lucide-react';
+import {ChartLabel} from 'astryx-dracula/shared/chart-labels';
+import type {SceneHue} from 'astryx-dracula/shared/scene-hues';
+
+// ============= SHARED CHART-PANEL CARD STYLE =============
+
+
+// ============= PRODUCT SWATCH =============
+
+const swatchStyle: CSSProperties = {flexShrink: 0};
+
+// Rounded product swatch: Dracula surface with a per-product accent glyph (one 36px size).
+// `accent` is an art treatment, so it takes the same `SceneHue` union as
+// `SceneTile.hue` — one art-treatment vocabulary, two consumers. A free-form
+// `string` here is what let `--dracula-purple` reach a product swatch.
+export function ProductSwatch({
+  accent,
+  label,
+}: {
+  accent: SceneHue;
+  label: string;
+}) {
+  return (
+    <svg
+      viewBox="0 0 36 36"
+      width={36}
+      height={36}
+      style={swatchStyle}
+      role="img"
+      aria-label={`${label} swatch`}>
+      {/* A surface, not a data mark: the plate behind a product swatch wears the
+          card tier. --color-background-card is byte-identical to the old
+          --dracula-bg-light (#343746). */}
+      <rect width={36} height={36} rx={5} fill="var(--color-background-card)" />
+      <rect
+        x={1}
+        y={1}
+        width={34}
+        height={34}
+        rx={4}
+        fill="none"
+        stroke="var(--color-widget-content-border)"
+      />
+      <circle
+        cx={18}
+        cy={18}
+        r={7}
+        fill="none"
+        stroke={accent}
+        strokeWidth={3}
+      />
+    </svg>
+  );
+}
+
+// ============= REVENUE CHART =============
+
+// Role token, not a --dracula-* primitive. Byte-identical (--color-data-
+// categorical-cyan IS #8BE9FD) and routed through chart-hues.ts so the line
+// colour is the sanctioned vocabulary rather than a literal decided here.
+const REVENUE_LINE = CHART_HUES.cyan;
+const CHART_W = 540;
+const CHART_H = 200;
+const CHART_PAD_LEFT = 44;
+const CHART_PAD_RIGHT = 12;
+const CHART_PAD_TOP = 12;
+const CHART_BASELINE = 164;
+const CHART_PLOT_W = CHART_W - CHART_PAD_LEFT - CHART_PAD_RIGHT;
+
+interface RevenuePoint {
+  date: string;
+  revenue: number;
+}
+
+// Axis ticks switch to thousands once the scale leaves the hundreds.
+function formatRevenueTick(tick: number): string {
+  return tick >= 1000 ? `$${tick / 1000}k` : `$${tick}`;
+}
+
+export function RevenueChart({
+  data,
+  chartMax,
+  gridTicks,
+  ariaLabel = 'Daily revenue, January 1 to 15',
+  caption = 'Daily revenue · Jan 1–15',
+}: {
+  data: RevenuePoint[];
+  chartMax: number;
+  gridTicks: number[];
+  ariaLabel?: string;
+  caption?: string;
+}) {
+  const plotH = CHART_BASELINE - CHART_PAD_TOP;
+  const points = data.map((d, i) => ({
+    ...d,
+    x: CHART_PAD_LEFT + (i / (data.length - 1)) * CHART_PLOT_W,
+    y: CHART_BASELINE - (d.revenue / chartMax) * plotH,
+  }));
+  const linePath = points
+    .map((p, i) => `${i === 0 ? 'M' : 'L'}${p.x.toFixed(1)},${p.y.toFixed(1)}`)
+    .join(' ');
+  const areaPath = `${linePath} L${points[points.length - 1].x.toFixed(1)},${CHART_BASELINE} L${points[0].x.toFixed(1)},${CHART_BASELINE} Z`;
+  return (
+    <VStack gap={3}>
+      <Card padding={4} style={CHART_PANEL_STYLE}>
+        <svg
+          viewBox={`0 0 ${CHART_W} ${CHART_H}`}
+          width="100%"
+          role="img"
+          aria-label={ariaLabel}>
+          {gridTicks.map(tick => {
+            const y = CHART_BASELINE - (tick / chartMax) * plotH;
+            return (
+              <g key={tick}>
+                <line
+                  x1={CHART_PAD_LEFT}
+                  y1={y}
+                  x2={CHART_W - CHART_PAD_RIGHT}
+                  y2={y}
+                  stroke="var(--color-separator)"
+                  strokeDasharray={tick === 0 ? undefined : '3 3'}
+                  opacity={tick === 0 ? 1 : 0.5}
+                />
+                <ChartLabel x={CHART_PAD_LEFT - 6} y={y + 3} textAnchor="end">
+                  {formatRevenueTick(tick)}
+                </ChartLabel>
+              </g>
+            );
+          })}
+          <path d={areaPath} fill={REVENUE_LINE} opacity={0.25} />
+          <path
+            d={linePath}
+            fill="none"
+            stroke={REVENUE_LINE}
+            strokeWidth={2}
+            strokeLinejoin="round"
+            strokeLinecap="round"
+          />
+          {points.map(
+            (p, i) =>
+              (i % 3 === 0 || i === points.length - 1) && (
+                <ChartLabel
+                  key={p.date}
+                  x={
+                    i === points.length - 1
+                      ? CHART_W - CHART_PAD_RIGHT - 2
+                      : p.x
+                  }
+                  y={CHART_H - 8}
+                  textAnchor={i === points.length - 1 ? 'end' : 'middle'}>
+                  {p.date}
+                </ChartLabel>
+              ),
+          )}
+        </svg>
+      </Card>
+      <Text type="supporting" color="secondary">
+        {caption}
+      </Text>
+      <HStack gap={2} vAlign="center">
+        <Icon icon={Square} size="xsm" style={{color: REVENUE_LINE}} />
+        <Text type="supporting" color="secondary">
+          Revenue
+        </Text>
+      </HStack>
+    </VStack>
+  );
+}