@mastra/playground-ui 56.0.0-alpha.8 → 56.0.0

package/dist/components/ScatterPlotChart.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScatterPlotChart.cjs.js","sources":["../../src/ds/components/ScatterPlotChart/scatter-plot-chart-tooltip.tsx","../../src/ds/components/ScatterPlotChart/scatter-plot-chart-utils.ts","../../src/ds/components/ScatterPlotChart/scatter-plot-chart.tsx"],"sourcesContent":["import type { ScatterPlotChartFormatter } from './scatter-plot-chart';\n\ntype ScatterTooltipPayload = Array<{\n  color?: string;\n  payload?: Record<string, unknown>;\n}>;\n\nexport function ScatterPlotChartTooltip({\n  active,\n  payload,\n  xKey,\n  yKey,\n  nameKey,\n  formatX,\n  formatY,\n  formatTooltipLabel,\n}: {\n  active?: boolean;\n  payload?: ScatterTooltipPayload;\n  xKey: string;\n  yKey: string;\n  nameKey?: string;\n  formatX?: ScatterPlotChartFormatter;\n  formatY?: ScatterPlotChartFormatter;\n  formatTooltipLabel?: (point: Record<string, unknown>) => string;\n}) {\n  const point = payload?.[0]?.payload;\n  if (!active || !point) return null;\n\n  const label = formatTooltipLabel?.(point) ?? (nameKey ? point[nameKey] : undefined);\n  const xValue = point[xKey];\n  const yValue = point[yKey];\n\n  return (\n    <div className=\"border-border1 bg-surface2 text-ui-sm rounded-md border px-3 py-2 shadow-lg\">\n      {label !== undefined && <p className=\"text-icon6 mb-1 font-medium\">{String(label)}</p>}\n      <div className=\"text-icon2 grid gap-1\">\n        <p>\n          <span className=\"text-neutral3\">X:</span>{' '}\n          <span className=\"font-mono\">{formatX ? formatX(xValue, point) : String(xValue)}</span>\n        </p>\n        <p>\n          <span className=\"text-neutral3\">Y:</span>{' '}\n          <span className=\"font-mono\">{formatY ? formatY(yValue, point) : String(yValue)}</span>\n        </p>\n      </div>\n    </div>\n  );\n}\n","import type { ScatterPlotChartFormatter } from './scatter-plot-chart';\nimport { Colors } from '@/ds/tokens';\n\nexport function getScatterPlotPointColor(point: Record<string, unknown>, colorKey?: string) {\n  const color = colorKey ? point[colorKey] : undefined;\n  return typeof color === 'string' && color.length > 0 ? color : Colors.accent3;\n}\n\nexport function getScatterPlotClickedPoint(payload: unknown) {\n  return (payload as { payload?: Record<string, unknown> } | undefined)?.payload;\n}\n\nexport function formatScatterPlotAxisTick(value: unknown, formatter?: ScatterPlotChartFormatter) {\n  return (formatter?.(value, {}) ?? String(value)).replace(/\\s+/g, '\\u00A0');\n}\n","import { CartesianGrid, ResponsiveContainer, Scatter, ScatterChart, Tooltip, XAxis, YAxis, ZAxis } from 'recharts';\nimport { ScatterPlotChartTooltip } from './scatter-plot-chart-tooltip';\nimport {\n  formatScatterPlotAxisTick,\n  getScatterPlotClickedPoint,\n  getScatterPlotPointColor,\n} from './scatter-plot-chart-utils';\nimport { CHART_TICK_FONT_SIZE, Colors } from '@/ds/tokens';\nimport { cn } from '@/lib/utils';\n\nconst LABEL_COLOR = '#a1a1aa';\nconst DEFAULT_POINT_SIZE = 48;\nconst CHART_MARGIN = { top: 16, right: 16, bottom: 16, left: 16 };\n\nexport type ScatterPlotChartDomain = [number | 'auto', number | 'auto'];\nexport type ScatterPlotChartFormatter = (value: unknown, point: Record<string, unknown>) => string;\nexport type ScatterPlotChartPointClickHandler = (point: Record<string, unknown>) => void;\n\nexport type ScatterPlotChartProps = {\n  data: Array<Record<string, unknown>>;\n  xKey: string;\n  yKey: string;\n  nameKey?: string;\n  colorKey?: string;\n  height?: React.CSSProperties['height'];\n  xLabel?: string;\n  yLabel?: string;\n  xDomain?: ScatterPlotChartDomain;\n  yDomain?: ScatterPlotChartDomain;\n  formatX?: ScatterPlotChartFormatter;\n  formatY?: ScatterPlotChartFormatter;\n  formatTooltipLabel?: (point: Record<string, unknown>) => string;\n  onPointClick?: ScatterPlotChartPointClickHandler;\n  className?: string;\n};\n\nexport function ScatterPlotChart({\n  data,\n  xKey,\n  yKey,\n  nameKey,\n  colorKey,\n  height = 210,\n  xLabel,\n  yLabel,\n  xDomain,\n  yDomain,\n  formatX,\n  formatY,\n  formatTooltipLabel,\n  onPointClick,\n  className,\n}: ScatterPlotChartProps) {\n  const isClickable = typeof onPointClick === 'function';\n  const fillsContainer = height === '100%';\n\n  if (data.length === 0) {\n    return (\n      <div\n        className={cn(\n          'flex items-center justify-center rounded-md border border-border1 text-ui-sm text-neutral3',\n          className,\n        )}\n        style={{ height }}\n      >\n        No data to display\n      </div>\n    );\n  }\n\n  return (\n    <div className={cn(fillsContainer && 'flex h-full min-h-0 flex-col', className)}>\n      <div className={cn(fillsContainer && 'min-h-0 flex-1')} style={{ height: fillsContainer ? undefined : height }}>\n        <ResponsiveContainer width=\"100%\" height=\"100%\">\n          <ScatterChart data={data} margin={CHART_MARGIN}>\n            <CartesianGrid stroke={Colors.neutral3} strokeDasharray=\"4 4\" strokeOpacity={0.18} vertical={false} />\n            <XAxis\n              dataKey={xKey}\n              name={xLabel}\n              type=\"number\"\n              tick={{ fontSize: CHART_TICK_FONT_SIZE, fill: LABEL_COLOR, fontFamily: 'var(--font-mono)' }}\n              tickLine={false}\n              axisLine={false}\n              domain={xDomain}\n              tickFormatter={value => formatScatterPlotAxisTick(value, formatX)}\n            />\n            <YAxis\n              dataKey={yKey}\n              name={yLabel}\n              type=\"number\"\n              tick={{ fontSize: CHART_TICK_FONT_SIZE, fill: LABEL_COLOR, fontFamily: 'var(--font-mono)' }}\n              tickLine={false}\n              axisLine={false}\n              width={44}\n              domain={yDomain}\n              tickFormatter={value => formatScatterPlotAxisTick(value, formatY)}\n            />\n            <ZAxis range={[DEFAULT_POINT_SIZE, DEFAULT_POINT_SIZE]} />\n            <Tooltip\n              cursor={{ stroke: Colors.neutral3, strokeOpacity: 0.16 }}\n              content={\n                <ScatterPlotChartTooltip\n                  xKey={xKey}\n                  yKey={yKey}\n                  nameKey={nameKey}\n                  formatX={formatX}\n                  formatY={formatY}\n                  formatTooltipLabel={formatTooltipLabel}\n                />\n              }\n            />\n            <Scatter\n              data={data}\n              fill={Colors.accent3}\n              shape={(props: unknown) => {\n                const point = (props as { payload?: Record<string, unknown> }).payload ?? {};\n                const cx = (props as { cx?: number }).cx;\n                const cy = (props as { cy?: number }).cy;\n                if (typeof cx !== 'number' || typeof cy !== 'number') return <g />;\n                return (\n                  <circle\n                    cx={cx}\n                    cy={cy}\n                    r={4}\n                    fill={getScatterPlotPointColor(point, colorKey)}\n                    opacity={0.9}\n                    style={{ cursor: isClickable ? 'pointer' : undefined }}\n                  />\n                );\n              }}\n              onClick={(_: unknown, payload: unknown) => {\n                const point = getScatterPlotClickedPoint(payload);\n                if (point) onPointClick?.(point);\n              }}\n            />\n          </ScatterChart>\n        </ResponsiveContainer>\n      </div>\n    </div>\n  );\n}\n"],"names":["jsxs","jsx","Colors","cn","ResponsiveContainer","ScatterChart","CartesianGrid","XAxis","CHART_TICK_FONT_SIZE","YAxis","ZAxis","Tooltip","Scatter"],"mappings":"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"}
+{"version":3,"file":"ScatterPlotChart.cjs.js","sources":["../../src/ds/components/ScatterPlotChart/scatter-plot-chart-tooltip.tsx","../../src/ds/components/ScatterPlotChart/scatter-plot-chart-utils.ts","../../src/ds/components/ScatterPlotChart/scatter-plot-chart.tsx"],"sourcesContent":["import type { ScatterPlotChartFormatter } from './scatter-plot-chart';\nimport { ChartTooltip } from '@/ds/components/ChartTooltip';\n\ntype ScatterTooltipPayload = Array<{\n  color?: string;\n  payload?: Record<string, unknown>;\n}>;\n\nexport function ScatterPlotChartTooltip({\n  active,\n  payload,\n  xKey,\n  yKey,\n  nameKey,\n  formatX,\n  formatY,\n  formatTooltipLabel,\n}: {\n  active?: boolean;\n  payload?: ScatterTooltipPayload;\n  xKey: string;\n  yKey: string;\n  nameKey?: string;\n  formatX?: ScatterPlotChartFormatter;\n  formatY?: ScatterPlotChartFormatter;\n  formatTooltipLabel?: (point: Record<string, unknown>) => string;\n}) {\n  const point = payload?.[0]?.payload;\n  if (!active || !point) return null;\n\n  const label = formatTooltipLabel?.(point) ?? (nameKey ? point[nameKey] : undefined);\n  const xValue = point[xKey];\n  const yValue = point[yKey];\n\n  return (\n    <ChartTooltip>\n      {label !== undefined && <p className=\"text-foreground text-column mb-1\">{String(label)}</p>}\n      <div className=\"text-placeholder grid gap-1\">\n        <p>\n          <span className=\"text-muted-foreground\">X:</span>{' '}\n          <span className=\"font-mono\">{formatX ? formatX(xValue, point) : String(xValue)}</span>\n        </p>\n        <p>\n          <span className=\"text-muted-foreground\">Y:</span>{' '}\n          <span className=\"font-mono\">{formatY ? formatY(yValue, point) : String(yValue)}</span>\n        </p>\n      </div>\n    </ChartTooltip>\n  );\n}\n","import type { ScatterPlotChartFormatter } from './scatter-plot-chart';\nimport { Colors } from '@/ds/tokens';\n\nexport function getScatterPlotPointColor(point: Record<string, unknown>, colorKey?: string) {\n  const color = colorKey ? point[colorKey] : undefined;\n  return typeof color === 'string' && color.length > 0 ? color : Colors.accent3;\n}\n\nexport function getScatterPlotClickedPoint(payload: unknown) {\n  return (payload as { payload?: Record<string, unknown> } | undefined)?.payload;\n}\n\nexport function formatScatterPlotAxisTick(value: unknown, formatter?: ScatterPlotChartFormatter) {\n  return (formatter?.(value, {}) ?? String(value)).replace(/\\s+/g, '\\u00A0');\n}\n","import { CartesianGrid, ResponsiveContainer, Scatter, ScatterChart, Tooltip, XAxis, YAxis, ZAxis } from 'recharts';\nimport { ScatterPlotChartTooltip } from './scatter-plot-chart-tooltip';\nimport {\n  formatScatterPlotAxisTick,\n  getScatterPlotClickedPoint,\n  getScatterPlotPointColor,\n} from './scatter-plot-chart-utils';\nimport { CHART_LABEL_COLOR, CHART_TICK_FONT_SIZE, Colors } from '@/ds/tokens';\nimport { cn } from '@/lib/utils';\n\nconst DEFAULT_POINT_SIZE = 48;\nconst CHART_MARGIN = { top: 16, right: 16, bottom: 16, left: 16 };\n\nexport type ScatterPlotChartDomain = [number | 'auto', number | 'auto'];\nexport type ScatterPlotChartFormatter = (value: unknown, point: Record<string, unknown>) => string;\nexport type ScatterPlotChartPointClickHandler = (point: Record<string, unknown>) => void;\n\nexport type ScatterPlotChartProps = {\n  data: Array<Record<string, unknown>>;\n  xKey: string;\n  yKey: string;\n  nameKey?: string;\n  colorKey?: string;\n  height?: React.CSSProperties['height'];\n  xLabel?: string;\n  yLabel?: string;\n  xDomain?: ScatterPlotChartDomain;\n  yDomain?: ScatterPlotChartDomain;\n  formatX?: ScatterPlotChartFormatter;\n  formatY?: ScatterPlotChartFormatter;\n  formatTooltipLabel?: (point: Record<string, unknown>) => string;\n  onPointClick?: ScatterPlotChartPointClickHandler;\n  className?: string;\n};\n\nexport function ScatterPlotChart({\n  data,\n  xKey,\n  yKey,\n  nameKey,\n  colorKey,\n  height = 210,\n  xLabel,\n  yLabel,\n  xDomain,\n  yDomain,\n  formatX,\n  formatY,\n  formatTooltipLabel,\n  onPointClick,\n  className,\n}: ScatterPlotChartProps) {\n  const isClickable = typeof onPointClick === 'function';\n  const fillsContainer = height === '100%';\n\n  if (data.length === 0) {\n    return (\n      <div\n        className={cn(\n          'flex items-center justify-center rounded-md border border-border text-caption text-muted-foreground',\n          className,\n        )}\n        style={{ height }}\n      >\n        No data to display\n      </div>\n    );\n  }\n\n  return (\n    <div className={cn(fillsContainer && 'flex h-full min-h-0 flex-col', className)}>\n      <div className={cn(fillsContainer && 'min-h-0 flex-1')} style={{ height: fillsContainer ? undefined : height }}>\n        <ResponsiveContainer width=\"100%\" height=\"100%\">\n          <ScatterChart data={data} margin={CHART_MARGIN}>\n            <CartesianGrid\n              stroke={Colors['muted-foreground']}\n              strokeDasharray=\"4 4\"\n              strokeOpacity={0.18}\n              vertical={false}\n            />\n            <XAxis\n              dataKey={xKey}\n              name={xLabel}\n              type=\"number\"\n              tick={{ fontSize: CHART_TICK_FONT_SIZE, fill: CHART_LABEL_COLOR, fontFamily: 'var(--font-mono)' }}\n              tickLine={false}\n              axisLine={false}\n              domain={xDomain}\n              tickFormatter={value => formatScatterPlotAxisTick(value, formatX)}\n            />\n            <YAxis\n              dataKey={yKey}\n              name={yLabel}\n              type=\"number\"\n              tick={{ fontSize: CHART_TICK_FONT_SIZE, fill: CHART_LABEL_COLOR, fontFamily: 'var(--font-mono)' }}\n              tickLine={false}\n              axisLine={false}\n              width={44}\n              domain={yDomain}\n              tickFormatter={value => formatScatterPlotAxisTick(value, formatY)}\n            />\n            <ZAxis range={[DEFAULT_POINT_SIZE, DEFAULT_POINT_SIZE]} />\n            <Tooltip\n              cursor={{ stroke: Colors['muted-foreground'], strokeOpacity: 0.16 }}\n              content={\n                <ScatterPlotChartTooltip\n                  xKey={xKey}\n                  yKey={yKey}\n                  nameKey={nameKey}\n                  formatX={formatX}\n                  formatY={formatY}\n                  formatTooltipLabel={formatTooltipLabel}\n                />\n              }\n            />\n            <Scatter\n              data={data}\n              fill={Colors.accent3}\n              shape={(props: unknown) => {\n                const point = (props as { payload?: Record<string, unknown> }).payload ?? {};\n                const cx = (props as { cx?: number }).cx;\n                const cy = (props as { cy?: number }).cy;\n                if (typeof cx !== 'number' || typeof cy !== 'number') return <g />;\n                return (\n                  <circle\n                    cx={cx}\n                    cy={cy}\n                    r={4}\n                    fill={getScatterPlotPointColor(point, colorKey)}\n                    opacity={0.9}\n                    style={{ cursor: isClickable ? 'pointer' : undefined }}\n                  />\n                );\n              }}\n              onClick={(_: unknown, payload: unknown) => {\n                const point = getScatterPlotClickedPoint(payload);\n                if (point) onPointClick?.(point);\n              }}\n            />\n          </ScatterChart>\n        </ResponsiveContainer>\n      </div>\n    </div>\n  );\n}\n"],"names":["ChartTooltip","jsx","jsxs","Colors","cn","ResponsiveContainer","ScatterChart","CartesianGrid","XAxis","CHART_TICK_FONT_SIZE","CHART_LABEL_COLOR","YAxis","ZAxis","Tooltip","Scatter"],"mappings":"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"}

package/dist/components/ScatterPlotChart.es.js

@@ -1,8 +1,8 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { ResponsiveContainer, ScatterChart, CartesianGrid, XAxis, YAxis, ZAxis, Tooltip, Scatter } from 'recharts';
-import { C as Colors } from '../spacings-Doib6y6Q.js';
-import { C as CHART_TICK_FONT_SIZE } from '../fonts-BD38FYaQ.js';
-import { c as cn } from '../cn-C6s2yXwM.js';
+import { C as ChartTooltip } from '../chart-tooltip-84fl_3Wc.js';
+import { Colors, CHART_LABEL_COLOR, CHART_TICK_FONT_SIZE } from '../tokens.es.js';
+import { c as cn } from '../cn-65Adrsfj.js';
 
 function ScatterPlotChartTooltip({
   active,
@@ -19,16 +19,16 @@ function ScatterPlotChartTooltip({
   const label = formatTooltipLabel?.(point) ?? (nameKey ? point[nameKey] : void 0);
   const xValue = point[xKey];
   const yValue = point[yKey];
-  return /* @__PURE__ */ jsxs("div", { className: "border-border1 bg-surface2 text-ui-sm rounded-md border px-3 py-2 shadow-lg", children: [
-    label !== void 0 && /* @__PURE__ */ jsx("p", { className: "text-icon6 mb-1 font-medium", children: String(label) }),
-    /* @__PURE__ */ jsxs("div", { className: "text-icon2 grid gap-1", children: [
+  return /* @__PURE__ */ jsxs(ChartTooltip, { children: [
+    label !== void 0 && /* @__PURE__ */ jsx("p", { className: "text-foreground text-column mb-1", children: String(label) }),
+    /* @__PURE__ */ jsxs("div", { className: "text-placeholder grid gap-1", children: [
       /* @__PURE__ */ jsxs("p", { children: [
-        /* @__PURE__ */ jsx("span", { className: "text-neutral3", children: "X:" }),
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "X:" }),
         " ",
         /* @__PURE__ */ jsx("span", { className: "font-mono", children: formatX ? formatX(xValue, point) : String(xValue) })
       ] }),
       /* @__PURE__ */ jsxs("p", { children: [
-        /* @__PURE__ */ jsx("span", { className: "text-neutral3", children: "Y:" }),
+        /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: "Y:" }),
         " ",
         /* @__PURE__ */ jsx("span", { className: "font-mono", children: formatY ? formatY(yValue, point) : String(yValue) })
       ] })
@@ -47,7 +47,6 @@ function formatScatterPlotAxisTick(value, formatter) {
   return (formatter?.(value, {}) ?? String(value)).replace(/\s+/g, " ");
 }
 
-const LABEL_COLOR = "#a1a1aa";
 const DEFAULT_POINT_SIZE = 48;
 const CHART_MARGIN = { top: 16, right: 16, bottom: 16, left: 16 };
 function ScatterPlotChart({
@@ -74,7 +73,7 @@ function ScatterPlotChart({
       "div",
       {
         className: cn(
-          "flex items-center justify-center rounded-md border border-border1 text-ui-sm text-neutral3",
+          "flex items-center justify-center rounded-md border border-border text-caption text-muted-foreground",
           className
         ),
         style: { height },
@@ -83,14 +82,22 @@ function ScatterPlotChart({
     );
   }
   return /* @__PURE__ */ jsx("div", { className: cn(fillsContainer && "flex h-full min-h-0 flex-col", className), children: /* @__PURE__ */ jsx("div", { className: cn(fillsContainer && "min-h-0 flex-1"), style: { height: fillsContainer ? void 0 : height }, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(ScatterChart, { data, margin: CHART_MARGIN, children: [
-    /* @__PURE__ */ jsx(CartesianGrid, { stroke: Colors.neutral3, strokeDasharray: "4 4", strokeOpacity: 0.18, vertical: false }),
+    /* @__PURE__ */ jsx(
+      CartesianGrid,
+      {
+        stroke: Colors["muted-foreground"],
+        strokeDasharray: "4 4",
+        strokeOpacity: 0.18,
+        vertical: false
+      }
+    ),
     /* @__PURE__ */ jsx(
       XAxis,
       {
         dataKey: xKey,
         name: xLabel,
         type: "number",
-        tick: { fontSize: CHART_TICK_FONT_SIZE, fill: LABEL_COLOR, fontFamily: "var(--font-mono)" },
+        tick: { fontSize: CHART_TICK_FONT_SIZE, fill: CHART_LABEL_COLOR, fontFamily: "var(--font-mono)" },
         tickLine: false,
         axisLine: false,
         domain: xDomain,
@@ -103,7 +110,7 @@ function ScatterPlotChart({
         dataKey: yKey,
         name: yLabel,
         type: "number",
-        tick: { fontSize: CHART_TICK_FONT_SIZE, fill: LABEL_COLOR, fontFamily: "var(--font-mono)" },
+        tick: { fontSize: CHART_TICK_FONT_SIZE, fill: CHART_LABEL_COLOR, fontFamily: "var(--font-mono)" },
         tickLine: false,
         axisLine: false,
         width: 44,
@@ -115,7 +122,7 @@ function ScatterPlotChart({
     /* @__PURE__ */ jsx(
       Tooltip,
       {
-        cursor: { stroke: Colors.neutral3, strokeOpacity: 0.16 },
+        cursor: { stroke: Colors["muted-foreground"], strokeOpacity: 0.16 },
         content: /* @__PURE__ */ jsx(
           ScatterPlotChartTooltip,
           {

package/dist/components/ScatterPlotChart.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"ScatterPlotChart.es.js","sources":["../../src/ds/components/ScatterPlotChart/scatter-plot-chart-tooltip.tsx","../../src/ds/components/ScatterPlotChart/scatter-plot-chart-utils.ts","../../src/ds/components/ScatterPlotChart/scatter-plot-chart.tsx"],"sourcesContent":["import type { ScatterPlotChartFormatter } from './scatter-plot-chart';\n\ntype ScatterTooltipPayload = Array<{\n  color?: string;\n  payload?: Record<string, unknown>;\n}>;\n\nexport function ScatterPlotChartTooltip({\n  active,\n  payload,\n  xKey,\n  yKey,\n  nameKey,\n  formatX,\n  formatY,\n  formatTooltipLabel,\n}: {\n  active?: boolean;\n  payload?: ScatterTooltipPayload;\n  xKey: string;\n  yKey: string;\n  nameKey?: string;\n  formatX?: ScatterPlotChartFormatter;\n  formatY?: ScatterPlotChartFormatter;\n  formatTooltipLabel?: (point: Record<string, unknown>) => string;\n}) {\n  const point = payload?.[0]?.payload;\n  if (!active || !point) return null;\n\n  const label = formatTooltipLabel?.(point) ?? (nameKey ? point[nameKey] : undefined);\n  const xValue = point[xKey];\n  const yValue = point[yKey];\n\n  return (\n    <div className=\"border-border1 bg-surface2 text-ui-sm rounded-md border px-3 py-2 shadow-lg\">\n      {label !== undefined && <p className=\"text-icon6 mb-1 font-medium\">{String(label)}</p>}\n      <div className=\"text-icon2 grid gap-1\">\n        <p>\n          <span className=\"text-neutral3\">X:</span>{' '}\n          <span className=\"font-mono\">{formatX ? formatX(xValue, point) : String(xValue)}</span>\n        </p>\n        <p>\n          <span className=\"text-neutral3\">Y:</span>{' '}\n          <span className=\"font-mono\">{formatY ? formatY(yValue, point) : String(yValue)}</span>\n        </p>\n      </div>\n    </div>\n  );\n}\n","import type { ScatterPlotChartFormatter } from './scatter-plot-chart';\nimport { Colors } from '@/ds/tokens';\n\nexport function getScatterPlotPointColor(point: Record<string, unknown>, colorKey?: string) {\n  const color = colorKey ? point[colorKey] : undefined;\n  return typeof color === 'string' && color.length > 0 ? color : Colors.accent3;\n}\n\nexport function getScatterPlotClickedPoint(payload: unknown) {\n  return (payload as { payload?: Record<string, unknown> } | undefined)?.payload;\n}\n\nexport function formatScatterPlotAxisTick(value: unknown, formatter?: ScatterPlotChartFormatter) {\n  return (formatter?.(value, {}) ?? String(value)).replace(/\\s+/g, '\\u00A0');\n}\n","import { CartesianGrid, ResponsiveContainer, Scatter, ScatterChart, Tooltip, XAxis, YAxis, ZAxis } from 'recharts';\nimport { ScatterPlotChartTooltip } from './scatter-plot-chart-tooltip';\nimport {\n  formatScatterPlotAxisTick,\n  getScatterPlotClickedPoint,\n  getScatterPlotPointColor,\n} from './scatter-plot-chart-utils';\nimport { CHART_TICK_FONT_SIZE, Colors } from '@/ds/tokens';\nimport { cn } from '@/lib/utils';\n\nconst LABEL_COLOR = '#a1a1aa';\nconst DEFAULT_POINT_SIZE = 48;\nconst CHART_MARGIN = { top: 16, right: 16, bottom: 16, left: 16 };\n\nexport type ScatterPlotChartDomain = [number | 'auto', number | 'auto'];\nexport type ScatterPlotChartFormatter = (value: unknown, point: Record<string, unknown>) => string;\nexport type ScatterPlotChartPointClickHandler = (point: Record<string, unknown>) => void;\n\nexport type ScatterPlotChartProps = {\n  data: Array<Record<string, unknown>>;\n  xKey: string;\n  yKey: string;\n  nameKey?: string;\n  colorKey?: string;\n  height?: React.CSSProperties['height'];\n  xLabel?: string;\n  yLabel?: string;\n  xDomain?: ScatterPlotChartDomain;\n  yDomain?: ScatterPlotChartDomain;\n  formatX?: ScatterPlotChartFormatter;\n  formatY?: ScatterPlotChartFormatter;\n  formatTooltipLabel?: (point: Record<string, unknown>) => string;\n  onPointClick?: ScatterPlotChartPointClickHandler;\n  className?: string;\n};\n\nexport function ScatterPlotChart({\n  data,\n  xKey,\n  yKey,\n  nameKey,\n  colorKey,\n  height = 210,\n  xLabel,\n  yLabel,\n  xDomain,\n  yDomain,\n  formatX,\n  formatY,\n  formatTooltipLabel,\n  onPointClick,\n  className,\n}: ScatterPlotChartProps) {\n  const isClickable = typeof onPointClick === 'function';\n  const fillsContainer = height === '100%';\n\n  if (data.length === 0) {\n    return (\n      <div\n        className={cn(\n          'flex items-center justify-center rounded-md border border-border1 text-ui-sm text-neutral3',\n          className,\n        )}\n        style={{ height }}\n      >\n        No data to display\n      </div>\n    );\n  }\n\n  return (\n    <div className={cn(fillsContainer && 'flex h-full min-h-0 flex-col', className)}>\n      <div className={cn(fillsContainer && 'min-h-0 flex-1')} style={{ height: fillsContainer ? undefined : height }}>\n        <ResponsiveContainer width=\"100%\" height=\"100%\">\n          <ScatterChart data={data} margin={CHART_MARGIN}>\n            <CartesianGrid stroke={Colors.neutral3} strokeDasharray=\"4 4\" strokeOpacity={0.18} vertical={false} />\n            <XAxis\n              dataKey={xKey}\n              name={xLabel}\n              type=\"number\"\n              tick={{ fontSize: CHART_TICK_FONT_SIZE, fill: LABEL_COLOR, fontFamily: 'var(--font-mono)' }}\n              tickLine={false}\n              axisLine={false}\n              domain={xDomain}\n              tickFormatter={value => formatScatterPlotAxisTick(value, formatX)}\n            />\n            <YAxis\n              dataKey={yKey}\n              name={yLabel}\n              type=\"number\"\n              tick={{ fontSize: CHART_TICK_FONT_SIZE, fill: LABEL_COLOR, fontFamily: 'var(--font-mono)' }}\n              tickLine={false}\n              axisLine={false}\n              width={44}\n              domain={yDomain}\n              tickFormatter={value => formatScatterPlotAxisTick(value, formatY)}\n            />\n            <ZAxis range={[DEFAULT_POINT_SIZE, DEFAULT_POINT_SIZE]} />\n            <Tooltip\n              cursor={{ stroke: Colors.neutral3, strokeOpacity: 0.16 }}\n              content={\n                <ScatterPlotChartTooltip\n                  xKey={xKey}\n                  yKey={yKey}\n                  nameKey={nameKey}\n                  formatX={formatX}\n                  formatY={formatY}\n                  formatTooltipLabel={formatTooltipLabel}\n                />\n              }\n            />\n            <Scatter\n              data={data}\n              fill={Colors.accent3}\n              shape={(props: unknown) => {\n                const point = (props as { payload?: Record<string, unknown> }).payload ?? {};\n                const cx = (props as { cx?: number }).cx;\n                const cy = (props as { cy?: number }).cy;\n                if (typeof cx !== 'number' || typeof cy !== 'number') return <g />;\n                return (\n                  <circle\n                    cx={cx}\n                    cy={cy}\n                    r={4}\n                    fill={getScatterPlotPointColor(point, colorKey)}\n                    opacity={0.9}\n                    style={{ cursor: isClickable ? 'pointer' : undefined }}\n                  />\n                );\n              }}\n              onClick={(_: unknown, payload: unknown) => {\n                const point = getScatterPlotClickedPoint(payload);\n                if (point) onPointClick?.(point);\n              }}\n            />\n          </ScatterChart>\n        </ResponsiveContainer>\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"ScatterPlotChart.es.js","sources":["../../src/ds/components/ScatterPlotChart/scatter-plot-chart-tooltip.tsx","../../src/ds/components/ScatterPlotChart/scatter-plot-chart-utils.ts","../../src/ds/components/ScatterPlotChart/scatter-plot-chart.tsx"],"sourcesContent":["import type { ScatterPlotChartFormatter } from './scatter-plot-chart';\nimport { ChartTooltip } from '@/ds/components/ChartTooltip';\n\ntype ScatterTooltipPayload = Array<{\n  color?: string;\n  payload?: Record<string, unknown>;\n}>;\n\nexport function ScatterPlotChartTooltip({\n  active,\n  payload,\n  xKey,\n  yKey,\n  nameKey,\n  formatX,\n  formatY,\n  formatTooltipLabel,\n}: {\n  active?: boolean;\n  payload?: ScatterTooltipPayload;\n  xKey: string;\n  yKey: string;\n  nameKey?: string;\n  formatX?: ScatterPlotChartFormatter;\n  formatY?: ScatterPlotChartFormatter;\n  formatTooltipLabel?: (point: Record<string, unknown>) => string;\n}) {\n  const point = payload?.[0]?.payload;\n  if (!active || !point) return null;\n\n  const label = formatTooltipLabel?.(point) ?? (nameKey ? point[nameKey] : undefined);\n  const xValue = point[xKey];\n  const yValue = point[yKey];\n\n  return (\n    <ChartTooltip>\n      {label !== undefined && <p className=\"text-foreground text-column mb-1\">{String(label)}</p>}\n      <div className=\"text-placeholder grid gap-1\">\n        <p>\n          <span className=\"text-muted-foreground\">X:</span>{' '}\n          <span className=\"font-mono\">{formatX ? formatX(xValue, point) : String(xValue)}</span>\n        </p>\n        <p>\n          <span className=\"text-muted-foreground\">Y:</span>{' '}\n          <span className=\"font-mono\">{formatY ? formatY(yValue, point) : String(yValue)}</span>\n        </p>\n      </div>\n    </ChartTooltip>\n  );\n}\n","import type { ScatterPlotChartFormatter } from './scatter-plot-chart';\nimport { Colors } from '@/ds/tokens';\n\nexport function getScatterPlotPointColor(point: Record<string, unknown>, colorKey?: string) {\n  const color = colorKey ? point[colorKey] : undefined;\n  return typeof color === 'string' && color.length > 0 ? color : Colors.accent3;\n}\n\nexport function getScatterPlotClickedPoint(payload: unknown) {\n  return (payload as { payload?: Record<string, unknown> } | undefined)?.payload;\n}\n\nexport function formatScatterPlotAxisTick(value: unknown, formatter?: ScatterPlotChartFormatter) {\n  return (formatter?.(value, {}) ?? String(value)).replace(/\\s+/g, '\\u00A0');\n}\n","import { CartesianGrid, ResponsiveContainer, Scatter, ScatterChart, Tooltip, XAxis, YAxis, ZAxis } from 'recharts';\nimport { ScatterPlotChartTooltip } from './scatter-plot-chart-tooltip';\nimport {\n  formatScatterPlotAxisTick,\n  getScatterPlotClickedPoint,\n  getScatterPlotPointColor,\n} from './scatter-plot-chart-utils';\nimport { CHART_LABEL_COLOR, CHART_TICK_FONT_SIZE, Colors } from '@/ds/tokens';\nimport { cn } from '@/lib/utils';\n\nconst DEFAULT_POINT_SIZE = 48;\nconst CHART_MARGIN = { top: 16, right: 16, bottom: 16, left: 16 };\n\nexport type ScatterPlotChartDomain = [number | 'auto', number | 'auto'];\nexport type ScatterPlotChartFormatter = (value: unknown, point: Record<string, unknown>) => string;\nexport type ScatterPlotChartPointClickHandler = (point: Record<string, unknown>) => void;\n\nexport type ScatterPlotChartProps = {\n  data: Array<Record<string, unknown>>;\n  xKey: string;\n  yKey: string;\n  nameKey?: string;\n  colorKey?: string;\n  height?: React.CSSProperties['height'];\n  xLabel?: string;\n  yLabel?: string;\n  xDomain?: ScatterPlotChartDomain;\n  yDomain?: ScatterPlotChartDomain;\n  formatX?: ScatterPlotChartFormatter;\n  formatY?: ScatterPlotChartFormatter;\n  formatTooltipLabel?: (point: Record<string, unknown>) => string;\n  onPointClick?: ScatterPlotChartPointClickHandler;\n  className?: string;\n};\n\nexport function ScatterPlotChart({\n  data,\n  xKey,\n  yKey,\n  nameKey,\n  colorKey,\n  height = 210,\n  xLabel,\n  yLabel,\n  xDomain,\n  yDomain,\n  formatX,\n  formatY,\n  formatTooltipLabel,\n  onPointClick,\n  className,\n}: ScatterPlotChartProps) {\n  const isClickable = typeof onPointClick === 'function';\n  const fillsContainer = height === '100%';\n\n  if (data.length === 0) {\n    return (\n      <div\n        className={cn(\n          'flex items-center justify-center rounded-md border border-border text-caption text-muted-foreground',\n          className,\n        )}\n        style={{ height }}\n      >\n        No data to display\n      </div>\n    );\n  }\n\n  return (\n    <div className={cn(fillsContainer && 'flex h-full min-h-0 flex-col', className)}>\n      <div className={cn(fillsContainer && 'min-h-0 flex-1')} style={{ height: fillsContainer ? undefined : height }}>\n        <ResponsiveContainer width=\"100%\" height=\"100%\">\n          <ScatterChart data={data} margin={CHART_MARGIN}>\n            <CartesianGrid\n              stroke={Colors['muted-foreground']}\n              strokeDasharray=\"4 4\"\n              strokeOpacity={0.18}\n              vertical={false}\n            />\n            <XAxis\n              dataKey={xKey}\n              name={xLabel}\n              type=\"number\"\n              tick={{ fontSize: CHART_TICK_FONT_SIZE, fill: CHART_LABEL_COLOR, fontFamily: 'var(--font-mono)' }}\n              tickLine={false}\n              axisLine={false}\n              domain={xDomain}\n              tickFormatter={value => formatScatterPlotAxisTick(value, formatX)}\n            />\n            <YAxis\n              dataKey={yKey}\n              name={yLabel}\n              type=\"number\"\n              tick={{ fontSize: CHART_TICK_FONT_SIZE, fill: CHART_LABEL_COLOR, fontFamily: 'var(--font-mono)' }}\n              tickLine={false}\n              axisLine={false}\n              width={44}\n              domain={yDomain}\n              tickFormatter={value => formatScatterPlotAxisTick(value, formatY)}\n            />\n            <ZAxis range={[DEFAULT_POINT_SIZE, DEFAULT_POINT_SIZE]} />\n            <Tooltip\n              cursor={{ stroke: Colors['muted-foreground'], strokeOpacity: 0.16 }}\n              content={\n                <ScatterPlotChartTooltip\n                  xKey={xKey}\n                  yKey={yKey}\n                  nameKey={nameKey}\n                  formatX={formatX}\n                  formatY={formatY}\n                  formatTooltipLabel={formatTooltipLabel}\n                />\n              }\n            />\n            <Scatter\n              data={data}\n              fill={Colors.accent3}\n              shape={(props: unknown) => {\n                const point = (props as { payload?: Record<string, unknown> }).payload ?? {};\n                const cx = (props as { cx?: number }).cx;\n                const cy = (props as { cy?: number }).cy;\n                if (typeof cx !== 'number' || typeof cy !== 'number') return <g />;\n                return (\n                  <circle\n                    cx={cx}\n                    cy={cy}\n                    r={4}\n                    fill={getScatterPlotPointColor(point, colorKey)}\n                    opacity={0.9}\n                    style={{ cursor: isClickable ? 'pointer' : undefined }}\n                  />\n                );\n              }}\n              onClick={(_: unknown, payload: unknown) => {\n                const point = getScatterPlotClickedPoint(payload);\n                if (point) onPointClick?.(point);\n              }}\n            />\n          </ScatterChart>\n        </ResponsiveContainer>\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;;;AAQO,SAAS,uBAAA,CAAwB;AAAA,EACtC,MAAA;AAAA,EACA,OAAA;AAAA,EACA,IAAA;AAAA,EACA,IAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA;AACF,CAAA,EASG;AACD,EAAA,MAAM,KAAA,GAAQ,OAAA,GAAU,CAAC,CAAA,EAAG,OAAA;AAC5B,EAAA,IAAI,CAAC,MAAA,IAAU,CAAC,KAAA,EAAO,OAAO,IAAA;AAE9B,EAAA,MAAM,QAAQ,kBAAA,GAAqB,KAAK,MAAM,OAAA,GAAU,KAAA,CAAM,OAAO,CAAA,GAAI,MAAA,CAAA;AACzE,EAAA,MAAM,MAAA,GAAS,MAAM,IAAI,CAAA;AACzB,EAAA,MAAM,MAAA,GAAS,MAAM,IAAI,CAAA;AAEzB,EAAA,4BACG,YAAA,EAAA,EACE,QAAA,EAAA;AAAA,IAAA,KAAA,KAAU,0BAAa,GAAA,CAAC,GAAA,EAAA,EAAE,WAAU,kCAAA,EAAoC,QAAA,EAAA,MAAA,CAAO,KAAK,CAAA,EAAE,CAAA;AAAA,oBACvF,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,6BAAA,EACb,QAAA,EAAA;AAAA,sBAAA,IAAA,CAAC,GAAA,EAAA,EACC,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,uBAAA,EAAwB,QAAA,EAAA,IAAA,EAAE,CAAA;AAAA,QAAQ,GAAA;AAAA,wBAClD,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,WAAA,EAAa,QAAA,EAAA,OAAA,GAAU,OAAA,CAAQ,MAAA,EAAQ,KAAK,CAAA,GAAI,MAAA,CAAO,MAAM,CAAA,EAAE;AAAA,OAAA,EACjF,CAAA;AAAA,2BACC,GAAA,EAAA,EACC,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,uBAAA,EAAwB,QAAA,EAAA,IAAA,EAAE,CAAA;AAAA,QAAQ,GAAA;AAAA,wBAClD,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,WAAA,EAAa,QAAA,EAAA,OAAA,GAAU,OAAA,CAAQ,MAAA,EAAQ,KAAK,CAAA,GAAI,MAAA,CAAO,MAAM,CAAA,EAAE;AAAA,OAAA,EACjF;AAAA,KAAA,EACF;AAAA,GAAA,EACF,CAAA;AAEJ;;AC9CO,SAAS,wBAAA,CAAyB,OAAgC,QAAA,EAAmB;AAC1F,EAAA,MAAM,KAAA,GAAQ,QAAA,GAAW,KAAA,CAAM,QAAQ,CAAA,GAAI,MAAA;AAC3C,EAAA,OAAO,OAAO,KAAA,KAAU,QAAA,IAAY,MAAM,MAAA,GAAS,CAAA,GAAI,QAAQ,MAAA,CAAO,OAAA;AACxE;AAEO,SAAS,2BAA2B,OAAA,EAAkB;AAC3D,EAAA,OAAQ,OAAA,EAA+D,OAAA;AACzE;AAEO,SAAS,yBAAA,CAA0B,OAAgB,SAAA,EAAuC;AAC/F,EAAA,OAAA,CAAQ,SAAA,GAAY,KAAA,EAAO,EAAE,CAAA,IAAK,OAAO,KAAK,CAAA,EAAG,OAAA,CAAQ,MAAA,EAAQ,GAAQ,CAAA;AAC3E;;ACJA,MAAM,kBAAA,GAAqB,EAAA;AAC3B,MAAM,YAAA,GAAe,EAAE,GAAA,EAAK,EAAA,EAAI,OAAO,EAAA,EAAI,MAAA,EAAQ,EAAA,EAAI,IAAA,EAAM,EAAA,EAAG;AAwBzD,SAAS,gBAAA,CAAiB;AAAA,EAC/B,IAAA;AAAA,EACA,IAAA;AAAA,EACA,IAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA,EACA,MAAA,GAAS,GAAA;AAAA,EACT,MAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,OAAA;AAAA,EACA,kBAAA;AAAA,EACA,YAAA;AAAA,EACA;AACF,CAAA,EAA0B;AACxB,EAAA,MAAM,WAAA,GAAc,OAAO,YAAA,KAAiB,UAAA;AAC5C,EAAA,MAAM,iBAAiB,MAAA,KAAW,MAAA;AAElC,EAAA,IAAI,IAAA,CAAK,WAAW,CAAA,EAAG;AACrB,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,EAAA;AAAA,UACT,qGAAA;AAAA,UACA;AAAA,SACF;AAAA,QACA,KAAA,EAAO,EAAE,MAAA,EAAO;AAAA,QACjB,QAAA,EAAA;AAAA;AAAA,KAED;AAAA,EAEJ;AAEA,EAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,EAAA,CAAG,kBAAkB,8BAAA,EAAgC,SAAS,CAAA,EAC5E,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,EAAA,CAAG,cAAA,IAAkB,gBAAgB,CAAA,EAAG,KAAA,EAAO,EAAE,MAAA,EAAQ,cAAA,GAAiB,MAAA,GAAY,MAAA,EAAO,EAC3G,8BAAC,mBAAA,EAAA,EAAoB,KAAA,EAAM,MAAA,EAAO,MAAA,EAAO,MAAA,EACvC,QAAA,kBAAA,IAAA,CAAC,YAAA,EAAA,EAAa,IAAA,EAAY,QAAQ,YAAA,EAChC,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACC,MAAA,EAAQ,OAAO,kBAAkB,CAAA;AAAA,QACjC,eAAA,EAAgB,KAAA;AAAA,QAChB,aAAA,EAAe,IAAA;AAAA,QACf,QAAA,EAAU;AAAA;AAAA,KACZ;AAAA,oBACA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAS,IAAA;AAAA,QACT,IAAA,EAAM,MAAA;AAAA,QACN,IAAA,EAAK,QAAA;AAAA,QACL,MAAM,EAAE,QAAA,EAAU,sBAAsB,IAAA,EAAM,iBAAA,EAAmB,YAAY,kBAAA,EAAmB;AAAA,QAChG,QAAA,EAAU,KAAA;AAAA,QACV,QAAA,EAAU,KAAA;AAAA,QACV,MAAA,EAAQ,OAAA;AAAA,QACR,aAAA,EAAe,CAAA,KAAA,KAAS,yBAAA,CAA0B,KAAA,EAAO,OAAO;AAAA;AAAA,KAClE;AAAA,oBACA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAS,IAAA;AAAA,QACT,IAAA,EAAM,MAAA;AAAA,QACN,IAAA,EAAK,QAAA;AAAA,QACL,MAAM,EAAE,QAAA,EAAU,sBAAsB,IAAA,EAAM,iBAAA,EAAmB,YAAY,kBAAA,EAAmB;AAAA,QAChG,QAAA,EAAU,KAAA;AAAA,QACV,QAAA,EAAU,KAAA;AAAA,QACV,KAAA,EAAO,EAAA;AAAA,QACP,MAAA,EAAQ,OAAA;AAAA,QACR,aAAA,EAAe,CAAA,KAAA,KAAS,yBAAA,CAA0B,KAAA,EAAO,OAAO;AAAA;AAAA,KAClE;AAAA,wBACC,KAAA,EAAA,EAAM,KAAA,EAAO,CAAC,kBAAA,EAAoB,kBAAkB,CAAA,EAAG,CAAA;AAAA,oBACxD,GAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,QAAQ,EAAE,MAAA,EAAQ,OAAO,kBAAkB,CAAA,EAAG,eAAe,IAAA,EAAK;AAAA,QAClE,OAAA,kBACE,GAAA;AAAA,UAAC,uBAAA;AAAA,UAAA;AAAA,YACC,IAAA;AAAA,YACA,IAAA;AAAA,YACA,OAAA;AAAA,YACA,OAAA;AAAA,YACA,OAAA;AAAA,YACA;AAAA;AAAA;AACF;AAAA,KAEJ;AAAA,oBACA,GAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,IAAA;AAAA,QACA,MAAM,MAAA,CAAO,OAAA;AAAA,QACb,KAAA,EAAO,CAAC,KAAA,KAAmB;AACzB,UAAA,MAAM,KAAA,GAAS,KAAA,CAAgD,OAAA,IAAW,EAAC;AAC3E,UAAA,MAAM,KAAM,KAAA,CAA0B,EAAA;AACtC,UAAA,MAAM,KAAM,KAAA,CAA0B,EAAA;AACtC,UAAA,IAAI,OAAO,OAAO,QAAA,IAAY,OAAO,OAAO,QAAA,EAAU,2BAAQ,GAAA,EAAA,EAAE,CAAA;AAChE,UAAA,uBACE,GAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cACC,EAAA;AAAA,cACA,EAAA;AAAA,cACA,CAAA,EAAG,CAAA;AAAA,cACH,IAAA,EAAM,wBAAA,CAAyB,KAAA,EAAO,QAAQ,CAAA;AAAA,cAC9C,OAAA,EAAS,GAAA;AAAA,cACT,KAAA,EAAO,EAAE,MAAA,EAAQ,WAAA,GAAc,YAAY,MAAA;AAAU;AAAA,WACvD;AAAA,QAEJ,CAAA;AAAA,QACA,OAAA,EAAS,CAAC,CAAA,EAAY,OAAA,KAAqB;AACzC,UAAA,MAAM,KAAA,GAAQ,2BAA2B,OAAO,CAAA;AAChD,UAAA,IAAI,KAAA,iBAAsB,KAAK,CAAA;AAAA,QACjC;AAAA;AAAA;AACF,GAAA,EACF,CAAA,EACF,GACF,CAAA,EACF,CAAA;AAEJ;;;;"}

package/dist/components/ScrollArea.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const scrollArea = require('../scroll-area-l6Yx-88I.cjs');
+const scrollArea = require('../scroll-area-Qjf7e0Ik.cjs');
 
 
 

package/dist/components/ScrollArea.es.js

@@ -1,2 +1,2 @@
-export { S as ScrollArea, a as ScrollBar } from '../scroll-area-ByrWkkO_.js';
+export { S as ScrollArea, a as ScrollBar } from '../scroll-area-CdQ_5bLm.js';
 //# sourceMappingURL=ScrollArea.es.js.map

package/dist/components/Section.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const section = require('../section-DOZSptHn.cjs');
+const section = require('../section-CTihfzmc.cjs');
 
 
 

package/dist/components/Section.es.js

@@ -1,2 +1,2 @@
-export { S as Section, a as SectionRoot, b as SubSectionRoot } from '../section-fFFmNxVc.js';
+export { S as Section, a as SectionRoot, b as SubSectionRoot } from '../section-B9OLuEq3.js';
 //# sourceMappingURL=Section.es.js.map

package/dist/components/SectionCard.cjs.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const utils_cn = require('../cn-BuHW7Wrt.cjs');
+const utils_cn = require('../cn-DG0X1KEP.cjs');
 
 function CardHeading({
   title,
@@ -15,24 +15,13 @@ function CardHeading({
 }) {
   const danger = tone === "danger";
   return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      "h3",
-      {
-        id,
-        className: utils_cn.cn(
-          "font-display text-header-sm font-normal tracking-normal",
-          danger ? "text-accent2" : "text-neutral4",
-          className
-        ),
-        children: title
-      }
-    ),
+    /* @__PURE__ */ jsxRuntime.jsx("h3", { id, className: utils_cn.cn("text-heading text-foreground", danger && "text-accent2", className), children: title }),
     description != null && /* @__PURE__ */ jsxRuntime.jsx(
       "p",
       {
         className: utils_cn.cn(
-          "mt-1 max-w-[62ch] font-sans text-ui-sm leading-ui-sm",
-          danger ? "text-accent2/70" : "text-neutral3",
+          "mt-1 max-w-[62ch]",
+          danger ? "text-caption text-accent2/70" : "text-caption text-muted-foreground",
           descriptionClassName
         ),
         children: description
@@ -59,7 +48,7 @@ function SectionCard({
       className: utils_cn.cn(
         "overflow-hidden rounded-2xl border",
         fillHeight && "flex h-full flex-col",
-        danger ? "border-accent2/25" : "border-border1",
+        danger ? "border-accent2/25" : "border-border",
         className
       ),
       children: [

package/dist/components/SectionCard.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"SectionCard.cjs.js","sources":["../../src/ds/components/SectionCard/card-heading.tsx","../../src/ds/components/SectionCard/section-card.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport interface CardHeadingProps {\n  title: ReactNode;\n  description?: ReactNode;\n  tone?: 'default' | 'danger';\n  id?: string;\n  className?: string;\n  descriptionClassName?: string;\n}\n\nexport function CardHeading({\n  title,\n  description,\n  tone = 'default',\n  id,\n  className,\n  descriptionClassName,\n}: CardHeadingProps) {\n  const danger = tone === 'danger';\n  return (\n    <>\n      <h3\n        id={id}\n        className={cn(\n          'font-display text-header-sm font-normal tracking-normal',\n          danger ? 'text-accent2' : 'text-neutral4',\n          className,\n        )}\n      >\n        {title}\n      </h3>\n      {description != null && (\n        <p\n          className={cn(\n            'mt-1 max-w-[62ch] font-sans text-ui-sm leading-ui-sm',\n            danger ? 'text-accent2/70' : 'text-neutral3',\n            descriptionClassName,\n          )}\n        >\n          {description}\n        </p>\n      )}\n    </>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { CardHeading } from './card-heading';\nimport { cn } from '@/lib/utils';\n\nexport type SectionCardVariant = 'default' | 'danger';\n\nexport interface SectionCardProps {\n  title: ReactNode;\n  description?: ReactNode;\n  action?: ReactNode;\n  variant?: SectionCardVariant;\n  fillHeight?: boolean;\n  className?: string;\n  contentClassName?: string;\n  children: ReactNode;\n}\n\nexport function SectionCard({\n  title,\n  description,\n  action,\n  variant = 'default',\n  fillHeight = false,\n  className,\n  contentClassName,\n  children,\n}: SectionCardProps) {\n  const danger = variant === 'danger';\n\n  return (\n    <section\n      data-variant={variant}\n      className={cn(\n        'overflow-hidden rounded-2xl border',\n        fillHeight && 'flex h-full flex-col',\n        danger ? 'border-accent2/25' : 'border-border1',\n        className,\n      )}\n    >\n      <div\n        className={cn(\n          'flex flex-col gap-3 px-4 pt-4 pb-3 sm:flex-row sm:items-start sm:justify-between sm:gap-4',\n          danger ? 'bg-accent2/8' : 'bg-surface-overlay-soft',\n        )}\n      >\n        <div className=\"min-w-0\">\n          <CardHeading title={title} description={description} tone={danger ? 'danger' : 'default'} />\n        </div>\n        {action != null ? <div className=\"shrink-0\">{action}</div> : null}\n      </div>\n      <div\n        className={cn(\n          'min-w-0 px-4 pt-3 pb-4',\n          fillHeight && 'flex-1',\n          danger ? 'bg-accent2/4' : null,\n          contentClassName,\n        )}\n      >\n        {children}\n      </div>\n    </section>\n  );\n}\n"],"names":["jsxs","Fragment","jsx","cn"],"mappings":";;;;;;;AAYO,SAAS,WAAA,CAAY;AAAA,EAC1B,KAAA;AAAA,EACA,WAAA;AAAA,EACA,IAAA,GAAO,SAAA;AAAA,EACP,EAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAA,EAAqB;AACnB,EAAA,MAAM,SAAS,IAAA,KAAS,QAAA;AACxB,EAAA,uBACEA,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAAC,cAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,EAAA;AAAA,QACA,SAAA,EAAWC,WAAA;AAAA,UACT,yDAAA;AAAA,UACA,SAAS,cAAA,GAAiB,eAAA;AAAA,UAC1B;AAAA,SACF;AAAA,QAEC,QAAA,EAAA;AAAA;AAAA,KACH;AAAA,IACC,eAAe,IAAA,oBACdD,cAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAWC,WAAA;AAAA,UACT,sDAAA;AAAA,UACA,SAAS,iBAAA,GAAoB,eAAA;AAAA,UAC7B;AAAA,SACF;AAAA,QAEC,QAAA,EAAA;AAAA;AAAA;AACH,GAAA,EAEJ,CAAA;AAEJ;;AC7BO,SAAS,WAAA,CAAY;AAAA,EAC1B,KAAA;AAAA,EACA,WAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA,GAAU,SAAA;AAAA,EACV,UAAA,GAAa,KAAA;AAAA,EACb,SAAA;AAAA,EACA,gBAAA;AAAA,EACA;AACF,CAAA,EAAqB;AACnB,EAAA,MAAM,SAAS,OAAA,KAAY,QAAA;AAE3B,EAAA,uBACEH,eAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,cAAA,EAAc,OAAA;AAAA,MACd,SAAA,EAAWG,WAAA;AAAA,QACT,oCAAA;AAAA,QACA,UAAA,IAAc,sBAAA;AAAA,QACd,SAAS,mBAAA,GAAsB,gBAAA;AAAA,QAC/B;AAAA,OACF;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAAH,eAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAWG,WAAA;AAAA,cACT,2FAAA;AAAA,cACA,SAAS,cAAA,GAAiB;AAAA,aAC5B;AAAA,YAEA,QAAA,EAAA;AAAA,8BAAAD,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,SAAA,EACb,QAAA,kBAAAA,cAAA,CAAC,WAAA,EAAA,EAAY,KAAA,EAAc,WAAA,EAA0B,IAAA,EAAM,MAAA,GAAS,QAAA,GAAW,SAAA,EAAW,CAAA,EAC5F,CAAA;AAAA,cACC,UAAU,IAAA,mBAAOA,cAAA,CAAC,SAAI,SAAA,EAAU,UAAA,EAAY,kBAAO,CAAA,GAAS;AAAA;AAAA;AAAA,SAC/D;AAAA,wBACAA,cAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAWC,WAAA;AAAA,cACT,wBAAA;AAAA,cACA,UAAA,IAAc,QAAA;AAAA,cACd,SAAS,cAAA,GAAiB,IAAA;AAAA,cAC1B;AAAA,aACF;AAAA,YAEC;AAAA;AAAA;AACH;AAAA;AAAA,GACF;AAEJ;;;;;"}
+{"version":3,"file":"SectionCard.cjs.js","sources":["../../src/ds/components/SectionCard/card-heading.tsx","../../src/ds/components/SectionCard/section-card.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport interface CardHeadingProps {\n  title: ReactNode;\n  description?: ReactNode;\n  tone?: 'default' | 'danger';\n  id?: string;\n  className?: string;\n  descriptionClassName?: string;\n}\n\nexport function CardHeading({\n  title,\n  description,\n  tone = 'default',\n  id,\n  className,\n  descriptionClassName,\n}: CardHeadingProps) {\n  const danger = tone === 'danger';\n  return (\n    <>\n      <h3 id={id} className={cn('text-heading text-foreground', danger && 'text-accent2', className)}>\n        {title}\n      </h3>\n      {description != null && (\n        <p\n          className={cn(\n            'mt-1 max-w-[62ch]',\n            danger ? 'text-caption text-accent2/70' : 'text-caption text-muted-foreground',\n            descriptionClassName,\n          )}\n        >\n          {description}\n        </p>\n      )}\n    </>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { CardHeading } from './card-heading';\nimport { cn } from '@/lib/utils';\n\nexport type SectionCardVariant = 'default' | 'danger';\n\nexport interface SectionCardProps {\n  title: ReactNode;\n  description?: ReactNode;\n  action?: ReactNode;\n  variant?: SectionCardVariant;\n  fillHeight?: boolean;\n  className?: string;\n  contentClassName?: string;\n  children: ReactNode;\n}\n\nexport function SectionCard({\n  title,\n  description,\n  action,\n  variant = 'default',\n  fillHeight = false,\n  className,\n  contentClassName,\n  children,\n}: SectionCardProps) {\n  const danger = variant === 'danger';\n\n  return (\n    <section\n      data-variant={variant}\n      className={cn(\n        'overflow-hidden rounded-2xl border',\n        fillHeight && 'flex h-full flex-col',\n        danger ? 'border-accent2/25' : 'border-border',\n        className,\n      )}\n    >\n      <div\n        className={cn(\n          'flex flex-col gap-3 px-4 pt-4 pb-3 sm:flex-row sm:items-start sm:justify-between sm:gap-4',\n          danger ? 'bg-accent2/8' : 'bg-surface-overlay-soft',\n        )}\n      >\n        <div className=\"min-w-0\">\n          <CardHeading title={title} description={description} tone={danger ? 'danger' : 'default'} />\n        </div>\n        {action != null ? <div className=\"shrink-0\">{action}</div> : null}\n      </div>\n      <div\n        className={cn(\n          'min-w-0 px-4 pt-3 pb-4',\n          fillHeight && 'flex-1',\n          danger ? 'bg-accent2/4' : null,\n          contentClassName,\n        )}\n      >\n        {children}\n      </div>\n    </section>\n  );\n}\n"],"names":["jsxs","Fragment","jsx","cn"],"mappings":";;;;;;;AAYO,SAAS,WAAA,CAAY;AAAA,EAC1B,KAAA;AAAA,EACA,WAAA;AAAA,EACA,IAAA,GAAO,SAAA;AAAA,EACP,EAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAA,EAAqB;AACnB,EAAA,MAAM,SAAS,IAAA,KAAS,QAAA;AACxB,EAAA,uBACEA,eAAA,CAAAC,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAAC,cAAA,CAAC,IAAA,EAAA,EAAG,IAAQ,SAAA,EAAWC,WAAA,CAAG,gCAAgC,MAAA,IAAU,cAAA,EAAgB,SAAS,CAAA,EAC1F,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,IACC,eAAe,IAAA,oBACdD,cAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAWC,WAAA;AAAA,UACT,mBAAA;AAAA,UACA,SAAS,8BAAA,GAAiC,oCAAA;AAAA,UAC1C;AAAA,SACF;AAAA,QAEC,QAAA,EAAA;AAAA;AAAA;AACH,GAAA,EAEJ,CAAA;AAEJ;;ACtBO,SAAS,WAAA,CAAY;AAAA,EAC1B,KAAA;AAAA,EACA,WAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA,GAAU,SAAA;AAAA,EACV,UAAA,GAAa,KAAA;AAAA,EACb,SAAA;AAAA,EACA,gBAAA;AAAA,EACA;AACF,CAAA,EAAqB;AACnB,EAAA,MAAM,SAAS,OAAA,KAAY,QAAA;AAE3B,EAAA,uBACEH,eAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,cAAA,EAAc,OAAA;AAAA,MACd,SAAA,EAAWG,WAAA;AAAA,QACT,oCAAA;AAAA,QACA,UAAA,IAAc,sBAAA;AAAA,QACd,SAAS,mBAAA,GAAsB,eAAA;AAAA,QAC/B;AAAA,OACF;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAAH,eAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAWG,WAAA;AAAA,cACT,2FAAA;AAAA,cACA,SAAS,cAAA,GAAiB;AAAA,aAC5B;AAAA,YAEA,QAAA,EAAA;AAAA,8BAAAD,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,SAAA,EACb,QAAA,kBAAAA,cAAA,CAAC,WAAA,EAAA,EAAY,KAAA,EAAc,WAAA,EAA0B,IAAA,EAAM,MAAA,GAAS,QAAA,GAAW,SAAA,EAAW,CAAA,EAC5F,CAAA;AAAA,cACC,UAAU,IAAA,mBAAOA,cAAA,CAAC,SAAI,SAAA,EAAU,UAAA,EAAY,kBAAO,CAAA,GAAS;AAAA;AAAA;AAAA,SAC/D;AAAA,wBACAA,cAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAWC,WAAA;AAAA,cACT,wBAAA;AAAA,cACA,UAAA,IAAc,QAAA;AAAA,cACd,SAAS,cAAA,GAAiB,IAAA;AAAA,cAC1B;AAAA,aACF;AAAA,YAEC;AAAA;AAAA;AACH;AAAA;AAAA,GACF;AAEJ;;;;;"}

package/dist/components/SectionCard.es.js

@@ -1,5 +1,5 @@
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { c as cn } from '../cn-C6s2yXwM.js';
+import { c as cn } from '../cn-65Adrsfj.js';
 
 function CardHeading({
   title,
@@ -11,24 +11,13 @@ function CardHeading({
 }) {
   const danger = tone === "danger";
   return /* @__PURE__ */ jsxs(Fragment, { children: [
-    /* @__PURE__ */ jsx(
-      "h3",
-      {
-        id,
-        className: cn(
-          "font-display text-header-sm font-normal tracking-normal",
-          danger ? "text-accent2" : "text-neutral4",
-          className
-        ),
-        children: title
-      }
-    ),
+    /* @__PURE__ */ jsx("h3", { id, className: cn("text-heading text-foreground", danger && "text-accent2", className), children: title }),
     description != null && /* @__PURE__ */ jsx(
       "p",
       {
         className: cn(
-          "mt-1 max-w-[62ch] font-sans text-ui-sm leading-ui-sm",
-          danger ? "text-accent2/70" : "text-neutral3",
+          "mt-1 max-w-[62ch]",
+          danger ? "text-caption text-accent2/70" : "text-caption text-muted-foreground",
           descriptionClassName
         ),
         children: description
@@ -55,7 +44,7 @@ function SectionCard({
       className: cn(
         "overflow-hidden rounded-2xl border",
         fillHeight && "flex h-full flex-col",
-        danger ? "border-accent2/25" : "border-border1",
+        danger ? "border-accent2/25" : "border-border",
         className
       ),
       children: [

package/dist/components/SectionCard.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"SectionCard.es.js","sources":["../../src/ds/components/SectionCard/card-heading.tsx","../../src/ds/components/SectionCard/section-card.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport interface CardHeadingProps {\n  title: ReactNode;\n  description?: ReactNode;\n  tone?: 'default' | 'danger';\n  id?: string;\n  className?: string;\n  descriptionClassName?: string;\n}\n\nexport function CardHeading({\n  title,\n  description,\n  tone = 'default',\n  id,\n  className,\n  descriptionClassName,\n}: CardHeadingProps) {\n  const danger = tone === 'danger';\n  return (\n    <>\n      <h3\n        id={id}\n        className={cn(\n          'font-display text-header-sm font-normal tracking-normal',\n          danger ? 'text-accent2' : 'text-neutral4',\n          className,\n        )}\n      >\n        {title}\n      </h3>\n      {description != null && (\n        <p\n          className={cn(\n            'mt-1 max-w-[62ch] font-sans text-ui-sm leading-ui-sm',\n            danger ? 'text-accent2/70' : 'text-neutral3',\n            descriptionClassName,\n          )}\n        >\n          {description}\n        </p>\n      )}\n    </>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { CardHeading } from './card-heading';\nimport { cn } from '@/lib/utils';\n\nexport type SectionCardVariant = 'default' | 'danger';\n\nexport interface SectionCardProps {\n  title: ReactNode;\n  description?: ReactNode;\n  action?: ReactNode;\n  variant?: SectionCardVariant;\n  fillHeight?: boolean;\n  className?: string;\n  contentClassName?: string;\n  children: ReactNode;\n}\n\nexport function SectionCard({\n  title,\n  description,\n  action,\n  variant = 'default',\n  fillHeight = false,\n  className,\n  contentClassName,\n  children,\n}: SectionCardProps) {\n  const danger = variant === 'danger';\n\n  return (\n    <section\n      data-variant={variant}\n      className={cn(\n        'overflow-hidden rounded-2xl border',\n        fillHeight && 'flex h-full flex-col',\n        danger ? 'border-accent2/25' : 'border-border1',\n        className,\n      )}\n    >\n      <div\n        className={cn(\n          'flex flex-col gap-3 px-4 pt-4 pb-3 sm:flex-row sm:items-start sm:justify-between sm:gap-4',\n          danger ? 'bg-accent2/8' : 'bg-surface-overlay-soft',\n        )}\n      >\n        <div className=\"min-w-0\">\n          <CardHeading title={title} description={description} tone={danger ? 'danger' : 'default'} />\n        </div>\n        {action != null ? <div className=\"shrink-0\">{action}</div> : null}\n      </div>\n      <div\n        className={cn(\n          'min-w-0 px-4 pt-3 pb-4',\n          fillHeight && 'flex-1',\n          danger ? 'bg-accent2/4' : null,\n          contentClassName,\n        )}\n      >\n        {children}\n      </div>\n    </section>\n  );\n}\n"],"names":[],"mappings":";;;AAYO,SAAS,WAAA,CAAY;AAAA,EAC1B,KAAA;AAAA,EACA,WAAA;AAAA,EACA,IAAA,GAAO,SAAA;AAAA,EACP,EAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAA,EAAqB;AACnB,EAAA,MAAM,SAAS,IAAA,KAAS,QAAA;AACxB,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,IAAA;AAAA,MAAA;AAAA,QACC,EAAA;AAAA,QACA,SAAA,EAAW,EAAA;AAAA,UACT,yDAAA;AAAA,UACA,SAAS,cAAA,GAAiB,eAAA;AAAA,UAC1B;AAAA,SACF;AAAA,QAEC,QAAA,EAAA;AAAA;AAAA,KACH;AAAA,IACC,eAAe,IAAA,oBACd,GAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,EAAA;AAAA,UACT,sDAAA;AAAA,UACA,SAAS,iBAAA,GAAoB,eAAA;AAAA,UAC7B;AAAA,SACF;AAAA,QAEC,QAAA,EAAA;AAAA;AAAA;AACH,GAAA,EAEJ,CAAA;AAEJ;;AC7BO,SAAS,WAAA,CAAY;AAAA,EAC1B,KAAA;AAAA,EACA,WAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA,GAAU,SAAA;AAAA,EACV,UAAA,GAAa,KAAA;AAAA,EACb,SAAA;AAAA,EACA,gBAAA;AAAA,EACA;AACF,CAAA,EAAqB;AACnB,EAAA,MAAM,SAAS,OAAA,KAAY,QAAA;AAE3B,EAAA,uBACE,IAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,cAAA,EAAc,OAAA;AAAA,MACd,SAAA,EAAW,EAAA;AAAA,QACT,oCAAA;AAAA,QACA,UAAA,IAAc,sBAAA;AAAA,QACd,SAAS,mBAAA,GAAsB,gBAAA;AAAA,QAC/B;AAAA,OACF;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,IAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,EAAA;AAAA,cACT,2FAAA;AAAA,cACA,SAAS,cAAA,GAAiB;AAAA,aAC5B;AAAA,YAEA,QAAA,EAAA;AAAA,8BAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,SAAA,EACb,QAAA,kBAAA,GAAA,CAAC,WAAA,EAAA,EAAY,KAAA,EAAc,WAAA,EAA0B,IAAA,EAAM,MAAA,GAAS,QAAA,GAAW,SAAA,EAAW,CAAA,EAC5F,CAAA;AAAA,cACC,UAAU,IAAA,mBAAO,GAAA,CAAC,SAAI,SAAA,EAAU,UAAA,EAAY,kBAAO,CAAA,GAAS;AAAA;AAAA;AAAA,SAC/D;AAAA,wBACA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,EAAA;AAAA,cACT,wBAAA;AAAA,cACA,UAAA,IAAc,QAAA;AAAA,cACd,SAAS,cAAA,GAAiB,IAAA;AAAA,cAC1B;AAAA,aACF;AAAA,YAEC;AAAA;AAAA;AACH;AAAA;AAAA,GACF;AAEJ;;;;"}
+{"version":3,"file":"SectionCard.es.js","sources":["../../src/ds/components/SectionCard/card-heading.tsx","../../src/ds/components/SectionCard/section-card.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport interface CardHeadingProps {\n  title: ReactNode;\n  description?: ReactNode;\n  tone?: 'default' | 'danger';\n  id?: string;\n  className?: string;\n  descriptionClassName?: string;\n}\n\nexport function CardHeading({\n  title,\n  description,\n  tone = 'default',\n  id,\n  className,\n  descriptionClassName,\n}: CardHeadingProps) {\n  const danger = tone === 'danger';\n  return (\n    <>\n      <h3 id={id} className={cn('text-heading text-foreground', danger && 'text-accent2', className)}>\n        {title}\n      </h3>\n      {description != null && (\n        <p\n          className={cn(\n            'mt-1 max-w-[62ch]',\n            danger ? 'text-caption text-accent2/70' : 'text-caption text-muted-foreground',\n            descriptionClassName,\n          )}\n        >\n          {description}\n        </p>\n      )}\n    </>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { CardHeading } from './card-heading';\nimport { cn } from '@/lib/utils';\n\nexport type SectionCardVariant = 'default' | 'danger';\n\nexport interface SectionCardProps {\n  title: ReactNode;\n  description?: ReactNode;\n  action?: ReactNode;\n  variant?: SectionCardVariant;\n  fillHeight?: boolean;\n  className?: string;\n  contentClassName?: string;\n  children: ReactNode;\n}\n\nexport function SectionCard({\n  title,\n  description,\n  action,\n  variant = 'default',\n  fillHeight = false,\n  className,\n  contentClassName,\n  children,\n}: SectionCardProps) {\n  const danger = variant === 'danger';\n\n  return (\n    <section\n      data-variant={variant}\n      className={cn(\n        'overflow-hidden rounded-2xl border',\n        fillHeight && 'flex h-full flex-col',\n        danger ? 'border-accent2/25' : 'border-border',\n        className,\n      )}\n    >\n      <div\n        className={cn(\n          'flex flex-col gap-3 px-4 pt-4 pb-3 sm:flex-row sm:items-start sm:justify-between sm:gap-4',\n          danger ? 'bg-accent2/8' : 'bg-surface-overlay-soft',\n        )}\n      >\n        <div className=\"min-w-0\">\n          <CardHeading title={title} description={description} tone={danger ? 'danger' : 'default'} />\n        </div>\n        {action != null ? <div className=\"shrink-0\">{action}</div> : null}\n      </div>\n      <div\n        className={cn(\n          'min-w-0 px-4 pt-3 pb-4',\n          fillHeight && 'flex-1',\n          danger ? 'bg-accent2/4' : null,\n          contentClassName,\n        )}\n      >\n        {children}\n      </div>\n    </section>\n  );\n}\n"],"names":[],"mappings":";;;AAYO,SAAS,WAAA,CAAY;AAAA,EAC1B,KAAA;AAAA,EACA,WAAA;AAAA,EACA,IAAA,GAAO,SAAA;AAAA,EACP,EAAA;AAAA,EACA,SAAA;AAAA,EACA;AACF,CAAA,EAAqB;AACnB,EAAA,MAAM,SAAS,IAAA,KAAS,QAAA;AACxB,EAAA,uBACE,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,IAAA,EAAA,EAAG,IAAQ,SAAA,EAAW,EAAA,CAAG,gCAAgC,MAAA,IAAU,cAAA,EAAgB,SAAS,CAAA,EAC1F,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,IACC,eAAe,IAAA,oBACd,GAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QACC,SAAA,EAAW,EAAA;AAAA,UACT,mBAAA;AAAA,UACA,SAAS,8BAAA,GAAiC,oCAAA;AAAA,UAC1C;AAAA,SACF;AAAA,QAEC,QAAA,EAAA;AAAA;AAAA;AACH,GAAA,EAEJ,CAAA;AAEJ;;ACtBO,SAAS,WAAA,CAAY;AAAA,EAC1B,KAAA;AAAA,EACA,WAAA;AAAA,EACA,MAAA;AAAA,EACA,OAAA,GAAU,SAAA;AAAA,EACV,UAAA,GAAa,KAAA;AAAA,EACb,SAAA;AAAA,EACA,gBAAA;AAAA,EACA;AACF,CAAA,EAAqB;AACnB,EAAA,MAAM,SAAS,OAAA,KAAY,QAAA;AAE3B,EAAA,uBACE,IAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,cAAA,EAAc,OAAA;AAAA,MACd,SAAA,EAAW,EAAA;AAAA,QACT,oCAAA;AAAA,QACA,UAAA,IAAc,sBAAA;AAAA,QACd,SAAS,mBAAA,GAAsB,eAAA;AAAA,QAC/B;AAAA,OACF;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,IAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,EAAA;AAAA,cACT,2FAAA;AAAA,cACA,SAAS,cAAA,GAAiB;AAAA,aAC5B;AAAA,YAEA,QAAA,EAAA;AAAA,8BAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,SAAA,EACb,QAAA,kBAAA,GAAA,CAAC,WAAA,EAAA,EAAY,KAAA,EAAc,WAAA,EAA0B,IAAA,EAAM,MAAA,GAAS,QAAA,GAAW,SAAA,EAAW,CAAA,EAC5F,CAAA;AAAA,cACC,UAAU,IAAA,mBAAO,GAAA,CAAC,SAAI,SAAA,EAAU,UAAA,EAAY,kBAAO,CAAA,GAAS;AAAA;AAAA;AAAA,SAC/D;AAAA,wBACA,GAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,EAAA;AAAA,cACT,wBAAA;AAAA,cACA,UAAA,IAAc,QAAA;AAAA,cACd,SAAS,cAAA,GAAiB,IAAA;AAAA,cAC1B;AAAA,aACF;AAAA,YAEC;AAAA;AAAA;AACH;AAAA;AAAA,GACF;AAEJ;;;;"}

package/dist/components/Sections.cjs.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const utils_cn = require('../cn-BuHW7Wrt.cjs');
+const utils_cn = require('../cn-DG0X1KEP.cjs');
 
 function Sections({ children, className }) {
   return /* @__PURE__ */ jsxRuntime.jsx("div", { className: utils_cn.cn("grid gap-6", className), children });

package/dist/components/Sections.es.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { c as cn } from '../cn-C6s2yXwM.js';
+import { c as cn } from '../cn-65Adrsfj.js';
 
 function Sections({ children, className }) {
   return /* @__PURE__ */ jsx("div", { className: cn("grid gap-6", className), children });

package/dist/components/Select.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const select = require('../select-31jx2l9F.cjs');
+const select = require('../select-7ACAVdGX.cjs');
 
 
 

package/dist/components/Select.es.js

@@ -1,2 +1,2 @@
-export { S as Select, a as SelectContent, b as SelectGroup, c as SelectItem, d as SelectTrigger, e as SelectValue } from '../select-bphXR9c4.js';
+export { S as Select, a as SelectContent, b as SelectGroup, c as SelectItem, d as SelectTrigger, e as SelectValue } from '../select--DXpTg0O.js';
 //# sourceMappingURL=Select.es.js.map

package/dist/components/SessionExpired.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const SessionExpired = require('../SessionExpired-B4qMlVNC.cjs');
+const SessionExpired = require('../SessionExpired-CF0BGNo_.cjs');
 
 
 

package/dist/components/SessionExpired.es.js

@@ -1,2 +1,2 @@
-export { S as SessionExpired } from '../SessionExpired-OS-dhsdb.js';
+export { S as SessionExpired } from '../SessionExpired-Bq5LcsDu.js';
 //# sourceMappingURL=SessionExpired.es.js.map

package/dist/components/SettingsLayout.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const settingsLayout = require('../settings-layout-DRrl-EBq.cjs');
+const settingsLayout = require('../settings-layout-NP_1dC-e.cjs');
 
 
 

package/dist/components/SettingsLayout.es.js

@@ -1,2 +1,2 @@
-export { S as SettingsLayout } from '../settings-layout-CTnDZ_fr.js';
+export { S as SettingsLayout } from '../settings-layout-C80s-D31.js';
 //# sourceMappingURL=SettingsLayout.es.js.map

package/dist/components/SettingsRow.cjs.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const settingsRow = require('../settings-row-Dsu9uRdl.cjs');
+const settingsRow = require('../settings-row-BoAuUUuH.cjs');
 
 function SettingsRow({ variant, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(settingsRow.SettingsRowLayout, { ...props, layout: variant === "factory" ? "factory" : "standalone" });

package/dist/components/SettingsRow.es.js

@@ -1,5 +1,5 @@
 import { jsx } from 'react/jsx-runtime';
-import { S as SettingsRowLayout } from '../settings-row-PB5zne3m.js';
+import { S as SettingsRowLayout } from '../settings-row-B2IekRyH.js';
 
 function SettingsRow({ variant, ...props }) {
   return /* @__PURE__ */ jsx(SettingsRowLayout, { ...props, layout: variant === "factory" ? "factory" : "standalone" });

package/dist/components/Shimmer.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const shimmer = require('../shimmer-CmCazK2A.cjs');
+const shimmer = require('../shimmer-DbSkqomT.cjs');
 
 
 

package/dist/components/Shimmer.es.js

@@ -1,2 +1,2 @@
-export { S as Shimmer } from '../shimmer-rej-NkeN.js';
+export { S as Shimmer } from '../shimmer-BN7Dzm37.js';
 //# sourceMappingURL=Shimmer.es.js.map