@cere/cere-design-system 0.0.44 → 0.1.0

package/dist/chunk-KF2Y7HO3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/cere-design-system/cere-design-system/dist/chunk-KF2Y7HO3.js","../src/components/charts/ChartWidget/ChartWidget.tsx","../src/components/charts/MetricsChart/MetricsChart.tsx","../src/components/charts/MetricsChart/PeriodSelect.tsx","../src/components/charts/TimeSeriesGraph/TimeSeriesGraph.tsx","../src/components/charts/TimeSeriesGraph/TimeRangeSelect.tsx","../src/components/charts/TimeSeriesGraph/SummaryStats.tsx"],"names":["value","jsx","Chart","styled","useTheme","jsxs","format","Stack","Box","Typography","options","TextField","MenuItem","Card","CardHeader","LineChart"],"mappings":"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","file":"/home/runner/work/cere-design-system/cere-design-system/dist/chunk-KF2Y7HO3.js","sourcesContent":[null,"import { ReactNode } from 'react';\nimport { Box, Stack, Typography, styled, useTheme } from '@mui/material';\nimport { LineChart } from '@mui/x-charts';\nimport size from 'byte-size';\nimport { format } from 'date-fns';\n\ntype ChartWidgetHistoryRecord = {\n  date: Date;\n  value: number;\n};\n\nexport type ChartWidgetProps = {\n  title: string;\n  value?: ReactNode;\n  history?: ChartWidgetHistoryRecord[];\n  formatValue?: (value: number) => string;\n};\n\nconst Chart = styled(Box)(() => ({\n  height: 200,\n}));\n\nexport const ChartWidget = ({\n  title,\n  value,\n  history,\n  formatValue = (value) => size(value || 0).toString(),\n}: ChartWidgetProps) => {\n  const theme = useTheme();\n\n  return (\n    <Stack spacing={1}>\n      <Typography variant=\"caption\" color=\"text.secondary\">\n        {title}\n      </Typography>\n      <Typography fontWeight=\"bold\">{value}</Typography>\n\n      <Chart>\n        <LineChart\n          dataset={history || []}\n          axisHighlight={{ x: 'none', y: 'none' }}\n          grid={{ horizontal: true, vertical: false }}\n          margin={{ top: 10, right: 20, bottom: 40, left: 40 }}\n          colors={[theme.palette.primary.main]}\n          slots={{\n            noDataOverlay: () => null,\n          }}\n          yAxis={[\n            {\n              dataKey: 'value',\n              disableLine: true,\n              disableTicks: true,\n              min: history?.length ? undefined : 0,\n              max: history?.length ? undefined : 100,\n              tickNumber: history?.length ? undefined : 5,\n              valueFormatter: (value) => formatValue(value || 0),\n              tickLabelStyle: {\n                fontSize: 10,\n              },\n            },\n          ]}\n          xAxis={[\n            {\n              dataKey: 'date',\n              min: history && Math.min(...history.map((record) => +record.date)),\n              max: history && Math.max(...history.map((record) => +record.date)),\n              disableLine: true,\n              disableTicks: true,\n              valueFormatter: (date) => format(date, 'do MMM'),\n              tickPlacement: 'end',\n              tickNumber: 1,\n\n              tickLabelStyle: {\n                fontSize: 10,\n                transform: 'translate(-16px, 16px) rotate(-30deg)',\n              },\n            },\n          ]}\n          series={[\n            {\n              curve: 'linear',\n              dataKey: 'value',\n              showMark: false,\n              valueFormatter: (value) => formatValue(value || 0),\n            },\n          ]}\n        />\n      </Chart>\n    </Stack>\n  );\n};\n","import { format, startOfDay, subHours, subWeeks, subMonths } from 'date-fns';\nimport { LineChart } from '@mui/x-charts';\nimport { useDrawingArea, useYScale } from '@mui/x-charts/hooks';\nimport { Box, Card, CardHeader, CardMedia, Divider, Stack, styled, Typography, useTheme } from '@mui/material';\n\nimport { deploymentSurfaceTokens } from '../../../theme';\nimport { PeriodSelect, MetricsPeriod } from './PeriodSelect';\nimport { useMemo, useState } from 'react';\nimport { BytesSize } from '../../utilities/BytesSize';\n\ntype MetricsHistoryRecord = {\n  storedBytes: number;\n  transferredBytes: number;\n  puts: number;\n  gets: number;\n  recordTime: Date;\n};\n\nexport type MetricsChartProps = {\n  history?: MetricsHistoryRecord[];\n};\n\nconst mapPeriodToFromDate = (period: MetricsPeriod = 'month') => {\n  const date = new Date();\n\n  if (period === 'hour') {\n    return subHours(date, 1);\n  }\n\n  if (period === 'day') {\n    return subHours(date, 24);\n  }\n\n  if (period === 'week') {\n    return startOfDay(subWeeks(date, 1));\n  }\n\n  return startOfDay(subMonths(date, 1));\n};\n\nconst Chart = styled(LineChart)({\n  height: 320,\n  marginBottom: 16,\n});\n\nconst NoDataRect = styled('rect')({\n  fill: deploymentSurfaceTokens.highlightBg,\n});\n\nconst LoadingText = styled('text')(({ theme }) => ({\n  stroke: 'none',\n  fill: theme.palette.text.primary,\n  shapeRendering: 'crispEdges',\n  textAnchor: 'middle',\n  dominantBaseline: 'middle',\n}));\n\n/**\n * TODO: Refactor this component to use shared graphs configuration\n */\nexport const MetricsChart = ({ history = [] }: MetricsChartProps) => {\n  const theme = useTheme();\n  const [period, setPeriod] = useState<MetricsPeriod>('week');\n  const periodFrom = useMemo(() => mapPeriodToFromDate(period), [period]);\n  const periodHistory = useMemo(\n    () => history.filter((record) => record.recordTime > periodFrom),\n    [history, periodFrom],\n  );\n\n  const total = useMemo(\n    () =>\n      periodHistory.reduce(\n        (acc, record) => ({\n          gets: acc.gets + record.gets,\n          puts: acc.puts + record.puts,\n          storedBytes: acc.storedBytes + record.storedBytes,\n          transferredBytes: acc.transferredBytes + record.transferredBytes,\n        }),\n        { gets: 0, puts: 0, storedBytes: 0, transferredBytes: 0 } as Omit<MetricsHistoryRecord, 'recordTime'>,\n      ),\n    [periodHistory],\n  );\n\n  const NoDataOverlay = () => {\n    const yScale = useYScale();\n    const { left, width, height } = useDrawingArea();\n\n    // Conditional handling if bandwidth is not available\n    // const bandWidth = xScale.bandwidth ? xScale.bandwidth() : 0;\n\n    const [, top] = yScale.range();\n\n    const padding = { top: 8, bottom: 8, left: 20, right: 20 };\n    const text = 'No data for selected period';\n\n    const textWidth = 211;\n    const textHeight = 24;\n\n    const backgroundWidth = textWidth + padding.left + padding.right;\n    const backgroundHeight = textHeight + padding.top + padding.bottom;\n\n    const rectX = left + (width - backgroundWidth) / 2;\n    const rectY = top + (height - backgroundHeight) / 2;\n    return (\n      <g>\n        <NoDataRect x={rectX} y={rectY} width={backgroundWidth} height={backgroundHeight} />\n        <LoadingText style={{ ...theme.typography.subtitle1 }} x={left + width / 2} y={top + height / 2}>\n          {text}\n        </LoadingText>\n      </g>\n    );\n  };\n\n  return (\n    <Card>\n      <CardHeader title=\"GET / PUT Requests\" action={<PeriodSelect value={period} onChange={setPeriod} />} />\n      <CardMedia>\n        <Chart\n          skipAnimation\n          dataset={periodHistory || []}\n          axisHighlight={{ x: 'none', y: 'none' }}\n          grid={{ horizontal: true, vertical: false }}\n          margin={{ top: 10, right: 20, bottom: 40, left: 40 }}\n          colors={[theme.palette.primary.main, theme.palette.success.main]}\n          slots={{\n            noDataOverlay: NoDataOverlay,\n          }}\n          slotProps={{\n            noDataOverlay: {\n              style: {\n                ...theme.typography.h4,\n              },\n            },\n          }}\n          yAxis={\n            periodHistory.length\n              ? [\n                  {\n                    min: periodHistory.length ? undefined : 0,\n                    max: periodHistory.length ? undefined : 100,\n                    tickNumber: periodHistory.length ? undefined : 5,\n                    disableLine: true,\n                    disableTicks: true,\n                    tickLabelStyle: {\n                      fontSize: 10,\n                    },\n                  },\n                ]\n              : []\n          }\n          xAxis={[\n            {\n              dataKey: 'recordTime',\n              min: periodFrom,\n              max: new Date(),\n              disableLine: false,\n              disableTicks: false,\n              valueFormatter: (date) => format(date, 'do MMM'),\n              tickMinStep: 3600 * 1000 * 24, // min step: 24h\n\n              tickLabelStyle: {\n                fontSize: 10,\n                transform: 'translate(-16px, 16px) rotate(-30deg)',\n              },\n            },\n          ]}\n          series={[\n            {\n              curve: 'linear',\n              dataKey: 'gets',\n              showMark: false,\n            },\n\n            {\n              curve: 'linear',\n              dataKey: 'puts',\n              showMark: false,\n            },\n          ]}\n        />\n        {periodHistory.length > 0 && (\n          <Stack direction=\"row\" spacing={2} marginY={3} justifyContent=\"center\">\n            <Stack direction=\"row\" spacing={1} alignItems=\"center\">\n              <Box sx={{ width: 14, height: 14, borderRadius: '4px', backgroundColor: theme.palette.primary.main }} />\n              <Typography variant=\"body2\">Get</Typography>\n            </Stack>\n\n            <Stack direction=\"row\" spacing={1} alignItems=\"center\">\n              <Box sx={{ width: 14, height: 14, borderRadius: '4px', backgroundColor: theme.palette.success.main }} />\n              <Typography variant=\"body2\">Put</Typography>\n            </Stack>\n          </Stack>\n        )}\n      </CardMedia>\n      <CardMedia>\n        <Divider flexItem />\n        <Stack direction=\"row\" spacing={2} padding={2}>\n          <Stack direction=\"row\" alignItems=\"center\" spacing={1}>\n            <Typography variant=\"body2\" color=\"secondary\">\n              GET Requests per account\n            </Typography>\n            <Typography variant=\"h3\">{total.gets}</Typography>\n          </Stack>\n\n          <Stack direction=\"row\" alignItems=\"center\" spacing={1}>\n            <Typography variant=\"body2\" color=\"secondary\">\n              PUT Requests per account\n            </Typography>\n            <Typography variant=\"h3\">{total.puts}</Typography>\n          </Stack>\n\n          <Stack direction=\"row\" alignItems=\"center\" spacing={1}>\n            <Typography variant=\"body2\" color=\"secondary\">\n              Total Consumed per account\n            </Typography>\n            <Typography variant=\"h3\">\n              <BytesSize bytes={total.transferredBytes} />\n            </Typography>\n          </Stack>\n\n          <Stack direction=\"row\" alignItems=\"center\" spacing={1}>\n            <Typography variant=\"body2\" color=\"secondary\">\n              Total Stored per account\n            </Typography>\n            <Typography variant=\"h3\">\n              <BytesSize bytes={total.storedBytes} />\n            </Typography>\n          </Stack>\n        </Stack>\n      </CardMedia>\n    </Card>\n  );\n};\n","import { MenuItem, TextField } from '@mui/material';\n\nexport type MetricsPeriod = 'hour' | 'day' | 'week' | 'month';\n\nexport type PeriodSelectProps = {\n  value?: MetricsPeriod;\n  onChange?: (value: MetricsPeriod) => void;\n};\n\ntype Option = {\n  value: MetricsPeriod;\n  label: string;\n};\n\nconst options: Option[] = [\n  /**\n   * TODO: Enable the options below when the backend supports them\n   */\n  // { value: 'hour', label: 'Last hour' },\n  // { value: 'day', label: '24 hours' },\n  { value: 'week', label: '1 week' },\n  { value: 'month', label: '1 month' },\n];\n\nexport const PeriodSelect = ({ value, onChange }: PeriodSelectProps) => (\n  <TextField\n    select\n    size=\"small\"\n    value={value}\n    defaultValue={options[0].value}\n    onChange={(e) => onChange?.(e.target.value as MetricsPeriod)}\n  >\n    {options.map(({ value, label }) => (\n      <MenuItem key={value} value={value}>\n        {label}\n      </MenuItem>\n    ))}\n  </TextField>\n);\n","import { ReactNode, useCallback, useMemo, useState } from 'react';\nimport {\n  Box,\n  Card,\n  CardHeader,\n  CardMedia,\n  CircularProgress,\n  Divider,\n  Stack,\n  Typography,\n  styled,\n  useTheme,\n} from '@mui/material';\nimport { LineChart } from '@mui/x-charts';\nimport { format } from 'date-fns';\n\nimport { TimeRangeSelect, type TimeRangeOption } from './TimeRangeSelect';\nimport { SummaryStats, type SummaryItem } from './SummaryStats';\n\n// ---------------------------------------------------------------------------\n// Public types\n// ---------------------------------------------------------------------------\n\n/**\n * A single data point in a time series.\n * Use `null` for the value to represent missing/gap data — the line will break.\n */\nexport interface DataPoint {\n  /** Timestamp of the observation */\n  timestamp: Date;\n  /** Numeric value, or `null` to indicate a gap in the data */\n  value: number | null;\n}\n\n/**\n * Represents one line on the graph (a named data series).\n */\nexport interface DataSeries {\n  /** Unique display name for this series (shown in legend) */\n  name: string;\n  /** CSS color string for the line and legend indicator */\n  color: string;\n  /** Ordered array of data points */\n  data: DataPoint[];\n}\n\nexport interface TimeSeriesGraphProps {\n  /** Optional title displayed at the top-left of the graph card */\n  title?: string;\n  /**\n   * Array of data series to render. Each series becomes one line on the graph.\n   * There is no hardcoded limit on the number of series.\n   */\n  series: DataSeries[];\n  /**\n   * Configurable time range options for the dropdown selector.\n   * When omitted, the time range dropdown is not rendered.\n   */\n  timeRangeOptions?: TimeRangeOption[];\n  /** Currently selected time range value (controlled) */\n  selectedTimeRange?: string;\n  /** Callback invoked when the user picks a different time range */\n  onTimeRangeChange?: (value: string) => void;\n  /**\n   * Optional array of summary statistics displayed below the graph.\n   * When omitted or empty, the summary section is hidden.\n   */\n  summaryItems?: SummaryItem[];\n  /**\n   * Whether to show the summary statistics section.\n   * Defaults to `true`. Set to `false` to explicitly hide, even when `summaryItems` are provided.\n   */\n  showSummary?: boolean;\n  /**\n   * Optional header action element rendered to the right of the title\n   * (e.g., a secondary dropdown or filter control).\n   */\n  headerAction?: ReactNode;\n  /**\n   * When `true`, shows a loading overlay (spinner) over the graph area\n   * while the header remains visible and interactive.\n   */\n  loading?: boolean;\n  /**\n   * Override the x-axis date format string (date-fns format tokens).\n   * When omitted, the format is auto-detected from the data's time span:\n   * - <= 24 hours → `'HH:mm'`\n   * - > 24 hours  → `'do MMM'`\n   */\n  xAxisFormat?: string;\n}\n\n// ---------------------------------------------------------------------------\n// Styled helpers\n// ---------------------------------------------------------------------------\n\nconst ChartContainer = styled(Box)({\n  position: 'relative',\n  height: 320,\n});\n\nconst LoadingOverlay = styled(Box)(({ theme }) => ({\n  position: 'absolute',\n  inset: 0,\n  display: 'flex',\n  alignItems: 'center',\n  justifyContent: 'center',\n  backgroundColor: 'rgba(255, 255, 255, 0.7)',\n  zIndex: 1,\n  borderRadius: theme.shape.borderRadius,\n}));\n\nconst LegendDot = styled(Box, {\n  shouldForwardProp: (prop) => prop !== 'dotColor',\n})<{ dotColor: string }>(({ dotColor }) => ({\n  width: 14,\n  height: 14,\n  borderRadius: 4,\n  backgroundColor: dotColor,\n  flexShrink: 0,\n}));\n\n// ---------------------------------------------------------------------------\n// Utility functions\n// ---------------------------------------------------------------------------\n\n/**\n * Formats large Y-axis values into shorthand notation.\n * 1,000 → 1K, 1,000,000 → 1M, 1,000,000,000 → 1B\n */\nconst formatYAxisValue = (value: number): string => {\n  const absValue = Math.abs(value);\n  if (absValue >= 1_000_000_000) {\n    return `${(value / 1_000_000_000).toFixed(absValue % 1_000_000_000 === 0 ? 0 : 1)}B`;\n  }\n  if (absValue >= 1_000_000) {\n    return `${(value / 1_000_000).toFixed(absValue % 1_000_000 === 0 ? 0 : 1)}M`;\n  }\n  if (absValue >= 1_000) {\n    return `${(value / 1_000).toFixed(absValue % 1_000 === 0 ? 0 : 1)}K`;\n  }\n  return String(value);\n};\n\nconst TWENTY_FOUR_HOURS_MS = 24 * 60 * 60 * 1000;\n\n/**\n * Infers the appropriate x-axis date format string based on the time span of the data.\n * - Span <= 24 hours → `'HH:mm'` (e.g., \"14:30\")\n * - Span > 24 hours → `'do MMM'` (e.g., \"2nd Jan\")\n */\nexport const inferXAxisFormat = (\n  min: Date | undefined,\n  max: Date | undefined,\n): string => {\n  if (!min || !max) return 'do MMM';\n  const spanMs = max.getTime() - min.getTime();\n  return spanMs <= TWENTY_FOUR_HOURS_MS ? 'HH:mm' : 'do MMM';\n};\n\n/** A single row in the chart dataset — timestamp plus one field per series. */\ntype DatasetRow = Record<string, string | number | Date | null | undefined>;\n\n/**\n * Builds the unified dataset array that MUI X-Charts expects.\n * Each row is keyed by timestamp with one field per series.\n */\nconst buildDataset = (\n  series: DataSeries[],\n  hiddenSeries: Set<string>,\n): DatasetRow[] => {\n  // Collect all unique timestamps across all visible series\n  const timestampMap = new Map<number, DatasetRow>();\n\n  series.forEach((s) => {\n    if (hiddenSeries.has(s.name)) return;\n    s.data.forEach((dp) => {\n      const ts = dp.timestamp.getTime();\n      if (!timestampMap.has(ts)) {\n        timestampMap.set(ts, { timestamp: dp.timestamp } as DatasetRow);\n      }\n      timestampMap.get(ts)![s.name] = dp.value;\n    });\n  });\n\n  // Sort by timestamp ascending\n  return Array.from(timestampMap.values()).sort(\n    (a, b) => (a.timestamp as Date).getTime() - (b.timestamp as Date).getTime(),\n  );\n};\n\n// ---------------------------------------------------------------------------\n// Component\n// ---------------------------------------------------------------------------\n\n/**\n * A reusable time series graph component that displays one or more data lines\n * over a shared time axis. Supports configurable time range selection,\n * optional summary statistics, interactive legend toggling, crosshair tooltips,\n * and a loading state.\n *\n * Built on `@mui/x-charts` LineChart and the Cere Design System theme.\n *\n * @example\n * ```tsx\n * <TimeSeriesGraph\n *   title=\"Engagement over time\"\n *   series={[\n *     { name: 'Engagements', color: '#6750A4', data: engagementData },\n *     { name: 'Unique Streams', color: '#4caf50', data: streamData },\n *   ]}\n *   timeRangeOptions={[\n *     { label: 'Last hour', value: 'hour' },\n *     { label: '24 hours', value: 'day' },\n *     { label: '1 week', value: 'week' },\n *     { label: '1 month', value: 'month' },\n *   ]}\n *   selectedTimeRange=\"week\"\n *   onTimeRangeChange={(range) => fetchData(range)}\n *   summaryItems={[\n *     { label: 'Total Engagements', value: 11372 },\n *     { label: 'Daily Engagements', value: 156 },\n *   ]}\n * />\n * ```\n *\n * Figma reference: [ROB Design - Node 162:1172](https://www.figma.com/design/xky11VbkkFcgZLwZE8BdCN/ROB?node-id=162-1172&m=dev)\n */\nexport const TimeSeriesGraph = ({\n  title,\n  series,\n  timeRangeOptions,\n  selectedTimeRange,\n  onTimeRangeChange,\n  summaryItems,\n  showSummary = true,\n  headerAction,\n  loading = false,\n  xAxisFormat,\n}: TimeSeriesGraphProps) => {\n  const theme = useTheme();\n  const [hiddenSeries, setHiddenSeries] = useState<Set<string>>(new Set());\n\n  // Build the MUI X-Charts dataset from visible series\n  const dataset = useMemo(() => buildDataset(series, hiddenSeries), [series, hiddenSeries]);\n\n  // Visible series (exclude hidden)\n  const visibleSeries = useMemo(\n    () => series.filter((s) => !hiddenSeries.has(s.name)),\n    [series, hiddenSeries],\n  );\n\n  // Colors array matching the order of visible series\n  const chartColors = useMemo(() => visibleSeries.map((s) => s.color), [visibleSeries]);\n\n  // Toggle a series' visibility\n  const handleLegendToggle = useCallback((seriesName: string) => {\n    setHiddenSeries((prev) => {\n      const next = new Set(prev);\n      if (next.has(seriesName)) {\n        next.delete(seriesName);\n      } else {\n        next.add(seriesName);\n      }\n      return next;\n    });\n  }, []);\n\n  // Compute time bounds for the X-axis from visible data\n  const timeBounds = useMemo(() => {\n    if (dataset.length === 0) return { min: undefined, max: undefined };\n    const timestamps = dataset.map((row) => (row.timestamp as Date).getTime());\n    return {\n      min: new Date(Math.min(...timestamps)),\n      max: new Date(Math.max(...timestamps)),\n    };\n  }, [dataset]);\n\n  // Resolve the x-axis date format: explicit prop wins, otherwise auto-detect\n  const resolvedXAxisFormat = useMemo(\n    () => xAxisFormat ?? inferXAxisFormat(timeBounds.min, timeBounds.max),\n    [xAxisFormat, timeBounds.min, timeBounds.max],\n  );\n\n  // Determine whether we have data to display\n  const hasData = dataset.length > 0;\n\n  // Whether to render the summary section\n  const shouldShowSummary = showSummary && summaryItems && summaryItems.length > 0;\n\n  // Build the header action area (time range + optional custom action)\n  const headerActionElement = (\n    <Stack direction=\"row\" spacing={1} alignItems=\"center\">\n      {headerAction}\n      {timeRangeOptions && timeRangeOptions.length > 0 && (\n        <TimeRangeSelect\n          options={timeRangeOptions}\n          value={selectedTimeRange}\n          onChange={onTimeRangeChange}\n        />\n      )}\n    </Stack>\n  );\n\n  // Determine whether to show the header at all\n  const showHeader = !!title || !!headerAction || (timeRangeOptions && timeRangeOptions.length > 0);\n\n  return (\n    <Card\n      aria-label={title ? `Line chart showing ${title}` : 'Line chart'}\n      role=\"figure\"\n    >\n      {showHeader && (\n        <CardHeader\n          title={title}\n          titleTypographyProps={{\n            variant: 'subtitle1',\n            fontWeight: 500,\n          }}\n          action={headerActionElement}\n        />\n      )}\n\n      <CardMedia>\n        <ChartContainer>\n          {loading && (\n            <LoadingOverlay role=\"status\" aria-label=\"Loading chart data\">\n              <CircularProgress size={40} />\n            </LoadingOverlay>\n          )}\n\n          <LineChart\n            dataset={dataset}\n            axisHighlight={{ x: 'line', y: 'none' }}\n            grid={{ horizontal: true, vertical: false }}\n            margin={{ top: 10, right: 20, bottom: 40, left: 50 }}\n            colors={chartColors.length > 0 ? chartColors : [theme.palette.primary.main]}\n            slots={{\n              noDataOverlay: () => null,\n            }}\n            tooltip={{ trigger: hasData ? 'axis' : 'none' }}\n            yAxis={[\n              {\n                disableLine: true,\n                disableTicks: true,\n                min: hasData ? undefined : 0,\n                max: hasData ? undefined : 100,\n                tickNumber: hasData ? undefined : 5,\n                valueFormatter: (value: number) => formatYAxisValue(value || 0),\n                tickLabelStyle: {\n                  fontSize: 10,\n                },\n              },\n            ]}\n            xAxis={[\n              {\n                dataKey: 'timestamp',\n                scaleType: 'time',\n                min: timeBounds.min,\n                max: timeBounds.max,\n                disableLine: true,\n                disableTicks: true,\n                valueFormatter: (date: Date) => format(date, resolvedXAxisFormat),\n                tickLabelStyle: {\n                  fontSize: 10,\n                },\n              },\n            ]}\n            series={visibleSeries.map((s) => ({\n              curve: 'linear' as const,\n              dataKey: s.name,\n              label: s.name,\n              showMark: false,\n              connectNulls: false,\n            }))}\n            // Hide the built-in legend — we render a custom one below\n            slotProps={{\n              legend: { hidden: true },\n            }}\n          />\n        </ChartContainer>\n\n        {/* Custom interactive legend */}\n        {series.length > 0 && (\n          <Stack\n            direction=\"row\"\n            spacing={2}\n            justifyContent=\"center\"\n            paddingY={1}\n            flexWrap=\"wrap\"\n            useFlexGap\n            role=\"list\"\n            aria-label=\"Chart legend\"\n          >\n            {series.map((s) => {\n              const isHidden = hiddenSeries.has(s.name);\n              return (\n                <Stack\n                  key={s.name}\n                  direction=\"row\"\n                  spacing={1}\n                  alignItems=\"center\"\n                  role=\"listitem\"\n                  onClick={() => handleLegendToggle(s.name)}\n                  sx={{\n                    cursor: 'pointer',\n                    opacity: isHidden ? 0.4 : 1,\n                    transition: 'opacity 0.2s ease',\n                    userSelect: 'none',\n                  }}\n                  aria-pressed={!isHidden}\n                  aria-label={`Toggle ${s.name} visibility`}\n                >\n                  <LegendDot dotColor={s.color} />\n                  <Typography variant=\"body2\">{s.name}</Typography>\n                </Stack>\n              );\n            })}\n          </Stack>\n        )}\n      </CardMedia>\n\n      {/* Summary statistics */}\n      {shouldShowSummary && (\n        <>\n          <Divider />\n          <SummaryStats items={summaryItems!} />\n        </>\n      )}\n    </Card>\n  );\n};\n","import { MenuItem, TextField } from '@mui/material';\n\n/**\n * Represents a single time range option in the dropdown.\n */\nexport interface TimeRangeOption {\n  /** Display label shown in the dropdown (e.g., \"1 week\") */\n  label: string;\n  /** Value identifier passed to the callback on selection */\n  value: string;\n}\n\nexport interface TimeRangeSelectProps {\n  /** Available time range options */\n  options: TimeRangeOption[];\n  /** Currently selected time range value */\n  value?: string;\n  /** Callback invoked when user selects a different time range */\n  onChange?: (value: string) => void;\n}\n\n/**\n * Configurable time range dropdown selector.\n * Renders a compact select field with the provided time range options.\n *\n * @example\n * ```tsx\n * <TimeRangeSelect\n *   options={[\n *     { label: 'Last hour', value: 'hour' },\n *     { label: '24 hours', value: 'day' },\n *     { label: '1 week', value: 'week' },\n *   ]}\n *   value=\"week\"\n *   onChange={(value) => console.log(value)}\n * />\n * ```\n */\nexport const TimeRangeSelect = ({ options, value, onChange }: TimeRangeSelectProps) => (\n  <TextField\n    select\n    size=\"small\"\n    value={value ?? (options.length > 0 ? options[0].value : '')}\n    onChange={(e) => onChange?.(e.target.value)}\n    aria-label=\"Time range selector\"\n    sx={{ minWidth: 120 }}\n  >\n    {options.map((option) => (\n      <MenuItem key={option.value} value={option.value}>\n        {option.label}\n      </MenuItem>\n    ))}\n  </TextField>\n);\n","import { Stack, Typography } from '@mui/material';\n\n/**\n * Represents a single summary statistic item displayed below the graph.\n */\nexport interface SummaryItem {\n  /** Descriptive label (e.g., \"Total Engagements\") */\n  label: string;\n  /** Numeric or string value (e.g., \"13.72\" or 11372) */\n  value: string | number;\n  /** Optional unit suffix (e.g., \"K\", \"GB\", \"%\") */\n  unit?: string;\n}\n\nexport interface SummaryStatsProps {\n  /** Array of summary items to display */\n  items: SummaryItem[];\n}\n\n/**\n * Formats a summary value with its optional unit.\n */\nconst formatSummaryValue = (value: string | number, unit?: string): string => {\n  const displayValue = typeof value === 'number' ? value.toLocaleString() : value;\n  return unit ? `${displayValue} ${unit}` : displayValue;\n};\n\n/**\n * Renders a horizontal row of summary statistics below the graph.\n * Each item shows a label with its corresponding value and optional unit.\n *\n * Matches the Figma design layout with label in secondary text color\n * and value in bold heading typography.\n *\n * @example\n * ```tsx\n * <SummaryStats\n *   items={[\n *     { label: 'Total Engagements', value: 11372 },\n *     { label: 'Total Consumed', value: '156.91', unit: 'GB' },\n *   ]}\n * />\n * ```\n */\nexport const SummaryStats = ({ items }: SummaryStatsProps) => {\n  if (items.length === 0) {\n    return null;\n  }\n\n  return (\n    <Stack\n      direction=\"row\"\n      spacing={3}\n      padding={2}\n      flexWrap=\"wrap\"\n      useFlexGap\n      role=\"list\"\n      aria-label=\"Summary statistics\"\n    >\n      {items.map((item) => (\n        <Stack\n          key={item.label}\n          direction=\"row\"\n          alignItems=\"center\"\n          spacing={1}\n          role=\"listitem\"\n        >\n          <Typography variant=\"body2\" color=\"text.secondary\">\n            {item.label}\n          </Typography>\n          <Typography variant=\"h5\" fontWeight={600}>\n            {formatSummaryValue(item.value, item.unit)}\n          </Typography>\n        </Stack>\n      ))}\n    </Stack>\n  );\n};\n"]}

package/dist/chunk-KPDYKK3V.js

@@ -0,0 +1,162 @@
+"use strict";Object.defineProperty(exports, "__esModule", {value: true}); function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
+
+var _chunkFN5YL4BKjs = require('./chunk-FN5YL4BK.js');
+
+// src/components/feedback/RoleBadge.tsx
+var _Chip = require('@mui/material/Chip'); var _Chip2 = _interopRequireDefault(_Chip);
+var _styles = require('@mui/material/styles');
+var _jsxruntime = require('react/jsx-runtime');
+var StyledRoleBadge = _styles.styled.call(void 0, (0, _Chip2.default))(() => ({
+  // Pill shape - 100px border radius
+  borderRadius: "100px",
+  // Typography specifications from Figma
+  fontSize: "13px",
+  fontWeight: 400,
+  lineHeight: "18px",
+  letterSpacing: "0.16px",
+  // Padding specifications from Figma
+  padding: "3px 4px",
+  height: "auto",
+  // Outlined style (no background fill)
+  "& .MuiChip-label": {
+    padding: "0 8px"
+  }
+}));
+var RoleBadge = ({
+  label,
+  color = "primary",
+  size = "small",
+  ...props
+}) => {
+  if (!label || label.trim() === "") {
+    return null;
+  }
+  return /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+    StyledRoleBadge,
+    {
+      label,
+      variant: "outlined",
+      color,
+      size,
+      ...props
+    }
+  );
+};
+
+// src/components/feedback/IDBlock.tsx
+var _react = require('react');
+var _Box = require('@mui/material/Box'); var _Box2 = _interopRequireDefault(_Box);
+var _Typography = require('@mui/material/Typography'); var _Typography2 = _interopRequireDefault(_Typography);
+var _IconButton = require('@mui/material/IconButton'); var _IconButton2 = _interopRequireDefault(_IconButton);
+var _Snackbar = require('@mui/material/Snackbar'); var _Snackbar2 = _interopRequireDefault(_Snackbar);
+var _Alert = require('@mui/material/Alert'); var _Alert2 = _interopRequireDefault(_Alert);
+var _ContentCopy = require('@mui/icons-material/ContentCopy'); var _ContentCopy2 = _interopRequireDefault(_ContentCopy);
+
+
+var IDContainer = _styles.styled.call(void 0, (0, _Box2.default))(() => ({
+  display: "inline-flex",
+  alignItems: "center",
+  gap: "4px",
+  padding: "8px 16px",
+  backgroundColor: _chunkFN5YL4BKjs.deploymentSurfaceTokens.surfaceHigh,
+  border: `1px solid ${_chunkFN5YL4BKjs.deploymentSurfaceTokens.strokeOutside}`,
+  borderRadius: "8px"
+}));
+var IDBlock = ({
+  id,
+  label = "ID",
+  entityType = "entity",
+  onCopy
+}) => {
+  const [snackbar, setSnackbar] = _react.useState.call(void 0, {
+    open: false,
+    message: "",
+    severity: "success"
+  });
+  if (!id || id.trim() === "") {
+    return null;
+  }
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(id);
+      setSnackbar({ open: true, message: "ID copied to clipboard", severity: "success" });
+      _optionalChain([onCopy, 'optionalCall', _ => _()]);
+    } catch (e) {
+      setSnackbar({ open: true, message: "Failed to copy ID", severity: "error" });
+    }
+  };
+  const handleSnackbarClose = () => {
+    setSnackbar((prev) => ({ ...prev, open: false }));
+  };
+  return /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, _jsxruntime.Fragment, { children: [
+    /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, IDContainer, { children: [
+      /* @__PURE__ */ _jsxruntime.jsxs.call(void 0, 
+        _Typography2.default,
+        {
+          variant: "body2",
+          sx: {
+            fontSize: "13px",
+            fontWeight: 500,
+            color: _chunkFN5YL4BKjs.deploymentSurfaceTokens.textSecondary
+          },
+          children: [
+            label,
+            ":"
+          ]
+        }
+      ),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _Typography2.default,
+        {
+          variant: "body2",
+          sx: {
+            fontSize: "13px",
+            fontWeight: 500,
+            color: _chunkFN5YL4BKjs.deploymentSurfaceTokens.textPrimary,
+            userSelect: "all"
+          },
+          children: id
+        }
+      ),
+      /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+        _IconButton2.default,
+        {
+          onClick: handleCopy,
+          size: "small",
+          "aria-label": `Copy ${entityType} ID ${id}`,
+          sx: {
+            padding: "4px",
+            "&:hover": {
+              backgroundColor: _chunkFN5YL4BKjs.deploymentSurfaceTokens.hoverOverlay
+            }
+          },
+          children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+            _ContentCopy2.default,
+            {
+              sx: {
+                fontSize: "16px",
+                color: _chunkFN5YL4BKjs.deploymentSurfaceTokens.textSecondary
+              }
+            }
+          )
+        }
+      )
+    ] }),
+    /* @__PURE__ */ _jsxruntime.jsx.call(void 0, 
+      _Snackbar2.default,
+      {
+        open: snackbar.open,
+        autoHideDuration: 3e3,
+        onClose: handleSnackbarClose,
+        anchorOrigin: { vertical: "top", horizontal: "center" },
+        children: /* @__PURE__ */ _jsxruntime.jsx.call(void 0, _Alert2.default, { onClose: handleSnackbarClose, severity: snackbar.severity, children: snackbar.message })
+      }
+    )
+  ] });
+};
+
+
+
+
+exports.RoleBadge = RoleBadge; exports.IDBlock = IDBlock;
+//# sourceMappingURL=chunk-KPDYKK3V.js.map

package/dist/chunk-KPDYKK3V.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["/home/runner/work/cere-design-system/cere-design-system/dist/chunk-KPDYKK3V.js","../src/components/feedback/RoleBadge.tsx","../src/components/feedback/IDBlock.tsx"],"names":["styled","jsx"],"mappings":"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","file":"/home/runner/work/cere-design-system/cere-design-system/dist/chunk-KPDYKK3V.js","sourcesContent":[null,"import React from 'react';\nimport MuiChip, { ChipProps as MuiChipProps } from '@mui/material/Chip';\nimport { styled } from '@mui/material/styles';\n\n/**\n * Color variants for the RoleBadge component\n */\nexport type RoleBadgeColor = 'primary' | 'secondary' | 'success' | 'error' | 'warning';\n\n/**\n * Size variants for the RoleBadge component\n */\nexport type RoleBadgeSize = 'small' | 'medium';\n\n/**\n * RoleBadge component props\n */\nexport interface RoleBadgeProps extends Omit<MuiChipProps, 'label' | 'variant' | 'color' | 'size'> {\n  /**\n   * The text content to display in the badge\n   */\n  label: string;\n  /**\n   * The color theme of the badge\n   * @default 'primary'\n   */\n  color?: RoleBadgeColor;\n  /**\n   * The size of the badge\n   * @default 'small'\n   */\n  size?: RoleBadgeSize;\n}\n\n/**\n * Styled MUI Chip with pill shape and outlined style\n * Matches Figma node 17-3595 specifications\n */\nconst StyledRoleBadge = styled(MuiChip)<MuiChipProps>(() => ({\n  // Pill shape - 100px border radius\n  borderRadius: '100px',\n  // Typography specifications from Figma\n  fontSize: '13px',\n  fontWeight: 400,\n  lineHeight: '18px',\n  letterSpacing: '0.16px',\n  // Padding specifications from Figma\n  padding: '3px 4px',\n  height: 'auto',\n  // Outlined style (no background fill)\n  '& .MuiChip-label': {\n    padding: '0 8px',\n  },\n}));\n\n/**\n * RoleBadge - Pill-shaped badge component for displaying roles or status labels\n *\n * A reusable badge component that extends MUI Chip with a pill-shaped outline style.\n * Designed for displaying user roles, status indicators, or categorization labels.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <RoleBadge label=\"Manager\" />\n *\n * // With color variants\n * <RoleBadge label=\"Admin\" color=\"error\" />\n * <RoleBadge label=\"Active\" color=\"success\" />\n *\n * // With size variants\n * <RoleBadge label=\"Owner\" size=\"medium\" />\n * ```\n *\n * @see Figma node 17-3595 for design specifications\n */\nexport const RoleBadge: React.FC<RoleBadgeProps> = ({\n  label,\n  color = 'primary',\n  size = 'small',\n  ...props\n}) => {\n  if (!label || label.trim() === '') {\n    return null;\n  }\n\n  return (\n    <StyledRoleBadge\n      label={label}\n      variant=\"outlined\"\n      color={color}\n      size={size}\n      {...props}\n    />\n  );\n};\n","import React, { useState } from 'react';\nimport Box from '@mui/material/Box';\nimport Typography from '@mui/material/Typography';\nimport IconButton from '@mui/material/IconButton';\nimport Snackbar from '@mui/material/Snackbar';\nimport Alert from '@mui/material/Alert';\nimport ContentCopyIcon from '@mui/icons-material/ContentCopy';\nimport { styled } from '@mui/material/styles';\nimport type { AlertColor } from '@mui/material';\nimport { deploymentSurfaceTokens } from '../../theme';\n\n/**\n * IDBlock component props\n */\nexport interface IDBlockProps {\n  /**\n   * The identifier value to display and copy\n   */\n  id: string;\n  /**\n   * Label prefix text\n   * @default 'ID'\n   */\n  label?: string;\n  /**\n   * Entity type for accessibility (used in aria-label)\n   * @default 'entity'\n   */\n  entityType?: string;\n  /**\n   * Additional callback to execute after successful copy\n   */\n  onCopy?: () => void;\n}\n\n/**\n * Styled container for the ID block\n * Matches Figma node 17-3596 specifications\n */\nconst IDContainer = styled(Box)(() => ({\n  display: 'inline-flex',\n  alignItems: 'center',\n  gap: '4px',\n  padding: '8px 16px',\n  backgroundColor: deploymentSurfaceTokens.surfaceHigh,\n  border: `1px solid ${deploymentSurfaceTokens.strokeOutside}`,\n  borderRadius: '8px',\n}));\n\n/**\n * IDBlock - Read-only identifier display with integrated copy-to-clipboard button\n *\n * A component that displays an identifier (ID, account number, etc.) with a copy button.\n * Provides user feedback via an inline Snackbar when copy succeeds or fails.\n *\n * @example\n * ```tsx\n * // Basic usage\n * <IDBlock id=\"W1234567890\" />\n *\n * // With custom label\n * <IDBlock id=\"ACC-9876543\" label=\"Account ID\" entityType=\"account\" />\n *\n * // With callback\n * <IDBlock\n *   id=\"DEPLOY-12345\"\n *   label=\"Deployment ID\"\n *   entityType=\"deployment\"\n *   onCopy={() => console.log('ID copied')}\n * />\n * ```\n *\n * @see Figma node 17-3596 for design specifications\n */\nexport const IDBlock: React.FC<IDBlockProps> = ({\n  id,\n  label = 'ID',\n  entityType = 'entity',\n  onCopy,\n}) => {\n  const [snackbar, setSnackbar] = useState<{ open: boolean; message: string; severity: AlertColor }>({\n    open: false,\n    message: '',\n    severity: 'success',\n  });\n\n  if (!id || id.trim() === '') {\n    return null;\n  }\n\n  const handleCopy = async () => {\n    try {\n      await navigator.clipboard.writeText(id);\n      setSnackbar({ open: true, message: 'ID copied to clipboard', severity: 'success' });\n      onCopy?.();\n    } catch {\n      setSnackbar({ open: true, message: 'Failed to copy ID', severity: 'error' });\n    }\n  };\n\n  const handleSnackbarClose = () => {\n    setSnackbar((prev) => ({ ...prev, open: false }));\n  };\n\n  return (\n    <>\n      <IDContainer>\n        <Typography\n          variant=\"body2\"\n          sx={{\n            fontSize: '13px',\n            fontWeight: 500,\n            color: deploymentSurfaceTokens.textSecondary,\n          }}\n        >\n          {label}:\n        </Typography>\n        <Typography\n          variant=\"body2\"\n          sx={{\n            fontSize: '13px',\n            fontWeight: 500,\n            color: deploymentSurfaceTokens.textPrimary,\n            userSelect: 'all',\n          }}\n        >\n          {id}\n        </Typography>\n        <IconButton\n          onClick={handleCopy}\n          size=\"small\"\n          aria-label={`Copy ${entityType} ID ${id}`}\n          sx={{\n            padding: '4px',\n            '&:hover': {\n              backgroundColor: deploymentSurfaceTokens.hoverOverlay,\n            },\n          }}\n        >\n          <ContentCopyIcon\n            sx={{\n              fontSize: '16px',\n              color: deploymentSurfaceTokens.textSecondary,\n            }}\n          />\n        </IconButton>\n      </IDContainer>\n      <Snackbar\n        open={snackbar.open}\n        autoHideDuration={3000}\n        onClose={handleSnackbarClose}\n        anchorOrigin={{ vertical: 'top', horizontal: 'center' }}\n      >\n        <Alert onClose={handleSnackbarClose} severity={snackbar.severity}>\n          {snackbar.message}\n        </Alert>\n      </Snackbar>\n    </>\n  );\n};\n"]}

package/dist/chunk-KVBMZNWT.mjs

@@ -0,0 +1,103 @@
+// src/components/layout/Card.tsx
+import React from "react";
+import MuiCard from "@mui/material/Card";
+import MuiCardContent from "@mui/material/CardContent";
+import MuiCardHeader from "@mui/material/CardHeader";
+import MuiCardActions from "@mui/material/CardActions";
+import MuiCardMedia from "@mui/material/CardMedia";
+import ButtonBase from "@mui/material/ButtonBase";
+import { styled } from "@mui/material/styles";
+import { jsx } from "react/jsx-runtime";
+var CardMedia = (props) => /* @__PURE__ */ jsx(MuiCardMedia, { ...props });
+var StyledCard = styled(MuiCard, {
+  shouldForwardProp: (prop) => prop !== "hoverable" && prop !== "clickable" && prop !== "dsVariant" && prop !== "asButton"
+})(
+  ({ theme, hoverable, clickable, dsVariant, asButton }) => ({
+    borderRadius: 8,
+    transition: "all 0.2s ease-in-out",
+    ...dsVariant === "standard" && {
+      boxShadow: theme.shadows[1],
+      backgroundColor: theme.palette.background.paper
+    },
+    ...dsVariant === "tinted" && {
+      boxShadow: "none",
+      backgroundColor: theme.palette.action.hover,
+      border: `1px solid ${theme.palette.divider}`
+    },
+    ...dsVariant === "outlined" && {
+      boxShadow: "none",
+      backgroundColor: theme.palette.background.paper,
+      border: `1px solid ${theme.palette.divider}`
+    },
+    ...(clickable || asButton) && {
+      cursor: "pointer"
+    },
+    ...asButton && {
+      // Neutralise ButtonBase defaults (inline-flex + center alignment) so the
+      // card lays out exactly like a non-clickable Card. We render as a column
+      // flex so consumers can still stack GradientSurface + meta inside.
+      display: "flex",
+      flexDirection: "column",
+      alignItems: "stretch",
+      justifyContent: "flex-start",
+      width: "100%",
+      textAlign: "left",
+      verticalAlign: "top",
+      font: "inherit",
+      color: "inherit",
+      padding: 0,
+      "&:focus-visible": {
+        outline: "none",
+        boxShadow: "0 0 0 4px rgba(170,68,242,0.25)"
+      }
+    },
+    ...hoverable && {
+      "&:hover": {
+        boxShadow: theme.shadows[4],
+        transform: "translateY(-2px)"
+      }
+    }
+  })
+);
+var Card = React.forwardRef(function Card2({ variant = "standard", hoverable = false, clickable = false, onClick, children, ...props }, ref) {
+  const asButton = clickable && typeof onClick === "function";
+  return /* @__PURE__ */ jsx(
+    StyledCard,
+    {
+      ref,
+      dsVariant: variant,
+      hoverable,
+      clickable,
+      asButton,
+      variant: "elevation",
+      onClick,
+      ...asButton ? { component: ButtonBase } : {},
+      ...props,
+      children
+    }
+  );
+});
+var CardContent = React.forwardRef(
+  function CardContent2(props, ref) {
+    return /* @__PURE__ */ jsx(MuiCardContent, { ref, ...props });
+  }
+);
+var CardHeader = (props) => {
+  return /* @__PURE__ */ jsx(MuiCardHeader, { ...props });
+};
+var CardActions = (props) => {
+  return /* @__PURE__ */ jsx(MuiCardActions, { ...props });
+};
+
+// src/components/layout/Typography.tsx
+import { Typography } from "@mui/material";
+
+export {
+  CardMedia,
+  Card,
+  CardContent,
+  CardHeader,
+  CardActions,
+  Typography
+};
+//# sourceMappingURL=chunk-KVBMZNWT.mjs.map

package/dist/chunk-KVBMZNWT.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/layout/Card.tsx","../src/components/layout/Typography.tsx"],"sourcesContent":["import React from 'react';\nimport MuiCard, { CardProps as MuiCardProps } from '@mui/material/Card';\nimport MuiCardContent, { CardContentProps } from '@mui/material/CardContent';\nimport MuiCardHeader, { CardHeaderProps } from '@mui/material/CardHeader';\nimport MuiCardActions, { CardActionsProps } from '@mui/material/CardActions';\nimport MuiCardMedia, { CardMediaProps as MuiCardMediaProps } from '@mui/material/CardMedia';\nimport ButtonBase from '@mui/material/ButtonBase';\nimport { styled } from '@mui/material/styles';\n\nexport type CardMediaProps = MuiCardMediaProps;\nexport const CardMedia: React.FC<CardMediaProps> = (props) => <MuiCardMedia {...props} />;\n\nexport type CardVariant = 'standard' | 'tinted' | 'outlined';\n\nexport interface CardProps extends Omit<MuiCardProps, 'variant'> {\n  /** Visual treatment. @default 'standard' */\n  variant?: CardVariant;\n  hoverable?: boolean;\n  /**\n   * Opt the card into being a real interactive element. When combined with\n   * `onClick`, the root renders via MUI ButtonBase — focusable button,\n   * Enter/Space activation, `:focus-visible` ring. When `clickable` is set\n   * without `onClick`, only the pointer cursor changes (back-compat).\n   *\n   * `<Card onClick={...}>` WITHOUT `clickable` keeps a `<div>` root and just\n   * forwards the click handler, so consumers using onClick for analytics or\n   * non-clickable side effects are not silently turned into buttons.\n   */\n  clickable?: boolean;\n}\n\nconst StyledCard = styled(MuiCard, {\n  shouldForwardProp: (prop) =>\n    prop !== 'hoverable' && prop !== 'clickable' && prop !== 'dsVariant' && prop !== 'asButton',\n})<{ hoverable?: boolean; clickable?: boolean; dsVariant: CardVariant; asButton?: boolean }>(\n  ({ theme, hoverable, clickable, dsVariant, asButton }) => ({\n    borderRadius: 8,\n    transition: 'all 0.2s ease-in-out',\n    ...(dsVariant === 'standard' && {\n      boxShadow: theme.shadows[1],\n      backgroundColor: theme.palette.background.paper,\n    }),\n    ...(dsVariant === 'tinted' && {\n      boxShadow: 'none',\n      backgroundColor: theme.palette.action.hover,\n      border: `1px solid ${theme.palette.divider}`,\n    }),\n    ...(dsVariant === 'outlined' && {\n      boxShadow: 'none',\n      backgroundColor: theme.palette.background.paper,\n      border: `1px solid ${theme.palette.divider}`,\n    }),\n    ...((clickable || asButton) && {\n      cursor: 'pointer',\n    }),\n    ...(asButton && {\n      // Neutralise ButtonBase defaults (inline-flex + center alignment) so the\n      // card lays out exactly like a non-clickable Card. We render as a column\n      // flex so consumers can still stack GradientSurface + meta inside.\n      display: 'flex',\n      flexDirection: 'column',\n      alignItems: 'stretch',\n      justifyContent: 'flex-start',\n      width: '100%',\n      textAlign: 'left',\n      verticalAlign: 'top',\n      font: 'inherit',\n      color: 'inherit',\n      padding: 0,\n      '&:focus-visible': {\n        outline: 'none',\n        boxShadow: '0 0 0 4px rgba(170,68,242,0.25)',\n      },\n    }),\n    ...(hoverable && {\n      '&:hover': {\n        boxShadow: theme.shadows[4],\n        transform: 'translateY(-2px)',\n      },\n    }),\n  }),\n);\n\nexport const Card = React.forwardRef<HTMLElement, CardProps>(function Card(\n  { variant = 'standard', hoverable = false, clickable = false, onClick, children, ...props },\n  ref,\n) {\n  // Only render as a real button when the consumer EXPLICITLY opts in via\n  // `clickable` AND wires an onClick. Inferring from onClick alone would\n  // silently turn analytics-tracking cards into <button>s with role=button\n  // and break nested forms/links.\n  const asButton = clickable && typeof onClick === 'function';\n  return (\n    <StyledCard\n      ref={ref as React.Ref<HTMLDivElement>}\n      dsVariant={variant}\n      hoverable={hoverable}\n      clickable={clickable}\n      asButton={asButton}\n      // MUI Card accepts a 'variant' prop too (elevation | outlined); we always\n      // drive visual via dsVariant + box-shadow, so suppress MUI's default border.\n      variant=\"elevation\"\n      onClick={onClick}\n      // When clickable, render the root as a focusable button so the entire\n      // card becomes a real interactive element instead of needing an overlay.\n      {...(asButton ? { component: ButtonBase } : {})}\n      {...props}\n    >\n      {children}\n    </StyledCard>\n  );\n});\n\nexport const CardContent = React.forwardRef<HTMLDivElement, CardContentProps>(\n  function CardContent(props, ref) {\n    return <MuiCardContent ref={ref} {...props} />;\n  },\n);\n\nexport const CardHeader: React.FC<CardHeaderProps> = (props) => {\n  return <MuiCardHeader {...props} />;\n};\n\nexport const CardActions: React.FC<CardActionsProps> = (props) => {\n  return <MuiCardActions {...props} />;\n};\n","export { Typography } from '@mui/material';\nexport type { TypographyProps } from '@mui/material';\n\n"],"mappings":";AAAA,OAAO,WAAW;AAClB,OAAO,aAA4C;AACnD,OAAO,oBAA0C;AACjD,OAAO,mBAAwC;AAC/C,OAAO,oBAA0C;AACjD,OAAO,kBAA2D;AAClE,OAAO,gBAAgB;AACvB,SAAS,cAAc;AAGuC;AAAvD,IAAM,YAAsC,CAAC,UAAU,oBAAC,gBAAc,GAAG,OAAO;AAqBvF,IAAM,aAAa,OAAO,SAAS;AAAA,EACjC,mBAAmB,CAAC,SAClB,SAAS,eAAe,SAAS,eAAe,SAAS,eAAe,SAAS;AACrF,CAAC;AAAA,EACC,CAAC,EAAE,OAAO,WAAW,WAAW,WAAW,SAAS,OAAO;AAAA,IACzD,cAAc;AAAA,IACd,YAAY;AAAA,IACZ,GAAI,cAAc,cAAc;AAAA,MAC9B,WAAW,MAAM,QAAQ,CAAC;AAAA,MAC1B,iBAAiB,MAAM,QAAQ,WAAW;AAAA,IAC5C;AAAA,IACA,GAAI,cAAc,YAAY;AAAA,MAC5B,WAAW;AAAA,MACX,iBAAiB,MAAM,QAAQ,OAAO;AAAA,MACtC,QAAQ,aAAa,MAAM,QAAQ,OAAO;AAAA,IAC5C;AAAA,IACA,GAAI,cAAc,cAAc;AAAA,MAC9B,WAAW;AAAA,MACX,iBAAiB,MAAM,QAAQ,WAAW;AAAA,MAC1C,QAAQ,aAAa,MAAM,QAAQ,OAAO;AAAA,IAC5C;AAAA,IACA,IAAK,aAAa,aAAa;AAAA,MAC7B,QAAQ;AAAA,IACV;AAAA,IACA,GAAI,YAAY;AAAA;AAAA;AAAA;AAAA,MAId,SAAS;AAAA,MACT,eAAe;AAAA,MACf,YAAY;AAAA,MACZ,gBAAgB;AAAA,MAChB,OAAO;AAAA,MACP,WAAW;AAAA,MACX,eAAe;AAAA,MACf,MAAM;AAAA,MACN,OAAO;AAAA,MACP,SAAS;AAAA,MACT,mBAAmB;AAAA,QACjB,SAAS;AAAA,QACT,WAAW;AAAA,MACb;AAAA,IACF;AAAA,IACA,GAAI,aAAa;AAAA,MACf,WAAW;AAAA,QACT,WAAW,MAAM,QAAQ,CAAC;AAAA,QAC1B,WAAW;AAAA,MACb;AAAA,IACF;AAAA,EACF;AACF;AAEO,IAAM,OAAO,MAAM,WAAmC,SAASA,MACpE,EAAE,UAAU,YAAY,YAAY,OAAO,YAAY,OAAO,SAAS,UAAU,GAAG,MAAM,GAC1F,KACA;AAKA,QAAM,WAAW,aAAa,OAAO,YAAY;AACjD,SACE;AAAA,IAAC;AAAA;AAAA,MACC;AAAA,MACA,WAAW;AAAA,MACX;AAAA,MACA;AAAA,MACA;AAAA,MAGA,SAAQ;AAAA,MACR;AAAA,MAGC,GAAI,WAAW,EAAE,WAAW,WAAW,IAAI,CAAC;AAAA,MAC5C,GAAG;AAAA,MAEH;AAAA;AAAA,EACH;AAEJ,CAAC;AAEM,IAAM,cAAc,MAAM;AAAA,EAC/B,SAASC,aAAY,OAAO,KAAK;AAC/B,WAAO,oBAAC,kBAAe,KAAW,GAAG,OAAO;AAAA,EAC9C;AACF;AAEO,IAAM,aAAwC,CAAC,UAAU;AAC9D,SAAO,oBAAC,iBAAe,GAAG,OAAO;AACnC;AAEO,IAAM,cAA0C,CAAC,UAAU;AAChE,SAAO,oBAAC,kBAAgB,GAAG,OAAO;AACpC;;;AC7HA,SAAS,kBAAkB;","names":["Card","CardContent"]}