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

package/dist/metrics-kpi-card-CgqmNcEC.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"metrics-kpi-card-CgqmNcEC.cjs","sources":["../src/ds/components/MetricsKpiCard/metrics-kpi-card-change.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-error.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-label.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-loading.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-no-change.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-no-data.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-root.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card-value.tsx","../src/ds/components/MetricsKpiCard/metrics-kpi-card.tsx"],"sourcesContent":["import { TrendingUpIcon, TrendingDownIcon } from 'lucide-react';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardChange({\n  changePct,\n  prevValue,\n  lowerIsBetter,\n  className,\n}: {\n  changePct: number;\n  prevValue?: string;\n  lowerIsBetter?: boolean;\n  className?: string;\n}) {\n  const isGood = lowerIsBetter ? changePct < 0 : changePct >= 0;\n\n  return (\n    <div className={cn('flex flex-wrap items-center gap-1 text-caption text-placeholder', className)}>\n      <div className=\"flex items-center gap-1\">\n        <span className={cn('[&>svg]:size-4', isGood ? 'text-green-600' : 'text-red-600')}>\n          {changePct >= 0 ? <TrendingUpIcon /> : <TrendingDownIcon />}\n        </span>\n        <span\n          className={cn(isGood ? 'text-green-600' : 'text-red-600')}\n        >{`${changePct >= 0 ? '+' : '-'}${Math.abs(changePct).toFixed(1)}%`}</span>\n      </div>\n      {prevValue && (\n        <div>\n          vs previous <b className=\"text-placeholder text-column\">{prevValue}</b>\n        </div>\n      )}\n    </div>\n  );\n}\n","import { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardError({\n  message = 'Failed to load data',\n  className,\n}: {\n  message?: string;\n  className?: string;\n}) {\n  return <span className={cn('text-caption text-accent2', className)}>{message}</span>;\n}\n","import { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardLabel({ children, className }: { children: string; className?: string }) {\n  return <span className={cn('text-body text-muted-foreground', className)}>{children}</span>;\n}\n","import { Spinner } from '@/ds/components/Spinner/spinner';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardLoading({ className }: { className?: string }) {\n  return (\n    <span className={cn('text-body', className)}>\n      <Spinner size=\"md\" variant=\"pulse\" className=\"text-placeholder\" />\n    </span>\n  );\n}\n","import { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardNoChange({\n  message = 'No previous value to compare',\n  className,\n}: {\n  message?: string;\n  className?: string;\n}) {\n  return <span className={cn('text-body text-placeholder', className)}>{message}</span>;\n}\n","import { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardNoData({ message = 'No data yet', className }: { message?: string; className?: string }) {\n  return <span className={cn('text-body text-placeholder', className)}>{message}</span>;\n}\n","import type { ReactNode } from 'react';\nimport { Card } from '@/ds/components/Card';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardRoot({ children, className }: { children: ReactNode; className?: string }) {\n  return (\n    <Card className={cn('min-w-72 flex-1 px-4 py-3', className)}>\n      <div className=\"grid gap-1\">{children}</div>\n    </Card>\n  );\n}\n","import type { ReactNode } from 'react';\nimport { cn } from '@/lib/utils';\n\nexport function MetricsKpiCardValue({ children, className }: { children: ReactNode; className?: string }) {\n  return <strong className={cn('text-title text-muted-foreground', className)}>{children}</strong>;\n}\n","import { MetricsKpiCardChange } from './metrics-kpi-card-change';\nimport { MetricsKpiCardError } from './metrics-kpi-card-error';\nimport { MetricsKpiCardLabel } from './metrics-kpi-card-label';\nimport { MetricsKpiCardLoading } from './metrics-kpi-card-loading';\nimport { MetricsKpiCardNoChange } from './metrics-kpi-card-no-change';\nimport { MetricsKpiCardNoData } from './metrics-kpi-card-no-data';\nimport { MetricsKpiCardRoot } from './metrics-kpi-card-root';\nimport { MetricsKpiCardValue } from './metrics-kpi-card-value';\n\nexport const MetricsKpiCard = Object.assign(MetricsKpiCardRoot, {\n  Label: MetricsKpiCardLabel,\n  Value: MetricsKpiCardValue,\n  Change: MetricsKpiCardChange,\n  NoChange: MetricsKpiCardNoChange,\n  NoData: MetricsKpiCardNoData,\n  Error: MetricsKpiCardError,\n  Loading: MetricsKpiCardLoading,\n});\n"],"names":["cn","jsxs","jsx","TrendingUpIcon","TrendingDownIcon","Spinner","Card"],"mappings":"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"}

package/dist/metrics-line-chart-B_sP3eiL.cjs

@@ -0,0 +1,114 @@
+'use strict';
+
+const jsxRuntime = require('react/jsx-runtime');
+const recharts = require('recharts');
+const chartTooltip = require('./chart-tooltip-DX6vs_Tc.cjs');
+const tokens = require('./tokens.cjs.js');
+
+function MetricsLineChartTooltip({
+  active,
+  payload,
+  label,
+  suffix
+}) {
+  if (!active || !payload?.length) return null;
+  return /* @__PURE__ */ jsxRuntime.jsxs(chartTooltip.ChartTooltip, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("p", { className: "text-foreground text-column mb-1", children: label }),
+    payload.map((entry) => /* @__PURE__ */ jsxRuntime.jsxs("p", { className: "text-placeholder", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("span", { className: "mr-2 inline-block size-2 rounded-full", style: { backgroundColor: entry.color } }),
+      entry.name,
+      ":",
+      " ",
+      /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "font-mono", children: [
+        entry.value,
+        suffix
+      ] })
+    ] }, entry.name))
+  ] });
+}
+
+function MetricsLineChart({
+  data,
+  series,
+  height = 210,
+  yDomain,
+  onPointClick,
+  xAxisInterval = 5,
+  xAxisMinTickGap,
+  showDots = false
+}) {
+  const isClickable = typeof onPointClick === "function";
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
+    /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mb-4 flex w-full flex-wrap items-end gap-4 gap-y-1", children: series.map((s) => {
+      const aggregated = s.aggregate?.(data);
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "inline-flex items-baseline gap-2", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "size-2 shrink-0 -translate-y-px rounded-full", style: { backgroundColor: s.color } }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-caption text-muted-foreground max-w-24 truncate", children: s.label }),
+        aggregated && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-caption text-muted-foreground", children: [
+          aggregated.value,
+          aggregated.suffix && /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-caption text-placeholder", children: [
+            " ",
+            aggregated.suffix
+          ] })
+        ] })
+      ] }, s.dataKey);
+    }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: { height }, children: /* @__PURE__ */ jsxRuntime.jsx(recharts.ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxRuntime.jsxs(recharts.LineChart, { data, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        recharts.CartesianGrid,
+        {
+          stroke: "currentColor",
+          strokeOpacity: 0.08,
+          vertical: false,
+          className: "text-black dark:text-white"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        recharts.XAxis,
+        {
+          dataKey: "time",
+          tick: { fontSize: tokens.CHART_TICK_FONT_SIZE, fill: tokens.CHART_LABEL_COLOR, fontFamily: "var(--font-mono)" },
+          tickLine: false,
+          axisLine: false,
+          interval: xAxisInterval,
+          minTickGap: xAxisMinTickGap
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        recharts.YAxis,
+        {
+          tick: { fontSize: tokens.CHART_TICK_FONT_SIZE, fill: tokens.CHART_LABEL_COLOR, fontFamily: "var(--font-mono)" },
+          tickLine: false,
+          axisLine: false,
+          width: 30,
+          domain: yDomain
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(recharts.Tooltip, { content: /* @__PURE__ */ jsxRuntime.jsx(MetricsLineChartTooltip, {}) }),
+      series.map((s) => /* @__PURE__ */ jsxRuntime.jsx(
+        recharts.Line,
+        {
+          type: "linear",
+          dataKey: s.dataKey,
+          stroke: s.color,
+          strokeWidth: 2,
+          dot: showDots ? { r: 3, fill: s.color, strokeWidth: 0 } : false,
+          activeDot: isClickable ? {
+            r: 4,
+            style: { cursor: "pointer" },
+            onClick: (_, payload) => {
+              const datum = payload?.payload;
+              if (datum) onPointClick(datum, s.dataKey);
+            }
+          } : void 0,
+          name: s.label
+        },
+        s.dataKey
+      ))
+    ] }) }) })
+  ] });
+}
+
+exports.MetricsLineChart = MetricsLineChart;
+exports.MetricsLineChartTooltip = MetricsLineChartTooltip;
+//# sourceMappingURL=metrics-line-chart-B_sP3eiL.cjs.map

package/dist/metrics-line-chart-B_sP3eiL.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"metrics-line-chart-B_sP3eiL.cjs","sources":["../src/ds/components/MetricsLineChart/metrics-line-chart-tooltip.tsx","../src/ds/components/MetricsLineChart/metrics-line-chart.tsx"],"sourcesContent":["import { ChartTooltip } from '@/ds/components/ChartTooltip';\n\nexport function MetricsLineChartTooltip({\n  active,\n  payload,\n  label,\n  suffix,\n}: {\n  active?: boolean;\n  payload?: Array<{ name: string; value: number; color: string }>;\n  label?: string;\n  suffix?: string;\n}) {\n  if (!active || !payload?.length) return null;\n  return (\n    <ChartTooltip>\n      <p className=\"text-foreground text-column mb-1\">{label}</p>\n      {payload.map(entry => (\n        <p key={entry.name} className=\"text-placeholder\">\n          <span className=\"mr-2 inline-block size-2 rounded-full\" style={{ backgroundColor: entry.color }} />\n          {entry.name}:{' '}\n          <span className=\"font-mono\">\n            {entry.value}\n            {suffix}\n          </span>\n        </p>\n      ))}\n    </ChartTooltip>\n  );\n}\n","import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';\nimport { MetricsLineChartTooltip } from './metrics-line-chart-tooltip';\nimport { CHART_LABEL_COLOR, CHART_TICK_FONT_SIZE } from '@/ds/tokens';\n\nexport type MetricsLineChartSeries = {\n  dataKey: string;\n  label: string;\n  color: string;\n  aggregate?: (data: Record<string, unknown>[]) => { value: string; suffix?: string };\n};\n\nexport type MetricsLineChartPointClickHandler = (point: Record<string, unknown>, seriesKey: string) => void;\n\nexport function MetricsLineChart({\n  data,\n  series,\n  height = 210,\n  yDomain,\n  onPointClick,\n  xAxisInterval = 5,\n  xAxisMinTickGap,\n  showDots = false,\n}: {\n  data: Record<string, unknown>[];\n  series: MetricsLineChartSeries[];\n  height?: number;\n  yDomain?: [number, number];\n  onPointClick?: MetricsLineChartPointClickHandler;\n  /** X-axis tick density. Default `5` (every 6th point). Pass\n   * `\"preserveStartEnd\"` with `xAxisMinTickGap` for a width-responsive axis. */\n  xAxisInterval?: number | 'preserveStart' | 'preserveEnd' | 'preserveStartEnd';\n  /** Minimum px gap between rendered ticks; recharts drops labels to honor it. */\n  xAxisMinTickGap?: number;\n  /** Render a visible dot on every point (needed for single-point series). */\n  showDots?: boolean;\n}) {\n  const isClickable = typeof onPointClick === 'function';\n\n  return (\n    <div>\n      <div className=\"mb-4 flex w-full flex-wrap items-end gap-4 gap-y-1\">\n        {series.map(s => {\n          const aggregated = s.aggregate?.(data);\n          return (\n            <div key={s.dataKey} className=\"inline-flex items-baseline gap-2\">\n              <div className=\"size-2 shrink-0 -translate-y-px rounded-full\" style={{ backgroundColor: s.color }} />\n              <span className=\"text-caption text-muted-foreground max-w-24 truncate\">{s.label}</span>\n              {aggregated && (\n                <span className=\"text-caption text-muted-foreground\">\n                  {aggregated.value}\n                  {aggregated.suffix && <span className=\"text-caption text-placeholder\"> {aggregated.suffix}</span>}\n                </span>\n              )}\n            </div>\n          );\n        })}\n      </div>\n      <div style={{ height }}>\n        <ResponsiveContainer width=\"100%\" height=\"100%\">\n          <LineChart data={data}>\n            <CartesianGrid\n              stroke=\"currentColor\"\n              strokeOpacity={0.08}\n              vertical={false}\n              className=\"text-black dark:text-white\"\n            />\n            <XAxis\n              dataKey=\"time\"\n              tick={{ fontSize: CHART_TICK_FONT_SIZE, fill: CHART_LABEL_COLOR, fontFamily: 'var(--font-mono)' }}\n              tickLine={false}\n              axisLine={false}\n              interval={xAxisInterval}\n              minTickGap={xAxisMinTickGap}\n            />\n            <YAxis\n              tick={{ fontSize: CHART_TICK_FONT_SIZE, fill: CHART_LABEL_COLOR, fontFamily: 'var(--font-mono)' }}\n              tickLine={false}\n              axisLine={false}\n              width={30}\n              domain={yDomain}\n            />\n            <Tooltip content={<MetricsLineChartTooltip />} />\n            {series.map(s => (\n              <Line\n                key={s.dataKey}\n                type=\"linear\"\n                dataKey={s.dataKey}\n                stroke={s.color}\n                strokeWidth={2}\n                dot={showDots ? { r: 3, fill: s.color, strokeWidth: 0 } : false}\n                activeDot={\n                  isClickable\n                    ? {\n                        r: 4,\n                        style: { cursor: 'pointer' },\n                        onClick: (_: unknown, payload: unknown) => {\n                          const datum = (payload as { payload?: Record<string, unknown> } | undefined)?.payload;\n                          if (datum) onPointClick(datum, s.dataKey);\n                        },\n                      }\n                    : undefined\n                }\n                name={s.label}\n              />\n            ))}\n          </LineChart>\n        </ResponsiveContainer>\n      </div>\n    </div>\n  );\n}\n"],"names":["ChartTooltip","jsx","jsxs","ResponsiveContainer","LineChart","CartesianGrid","XAxis","CHART_TICK_FONT_SIZE","CHART_LABEL_COLOR","YAxis","Tooltip","Line"],"mappings":"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"}

package/dist/metrics-line-chart-DHyrDPkJ.js

@@ -0,0 +1,111 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { ResponsiveContainer, LineChart, CartesianGrid, XAxis, YAxis, Tooltip, Line } from 'recharts';
+import { C as ChartTooltip } from './chart-tooltip-84fl_3Wc.js';
+import { CHART_LABEL_COLOR, CHART_TICK_FONT_SIZE } from './tokens.es.js';
+
+function MetricsLineChartTooltip({
+  active,
+  payload,
+  label,
+  suffix
+}) {
+  if (!active || !payload?.length) return null;
+  return /* @__PURE__ */ jsxs(ChartTooltip, { children: [
+    /* @__PURE__ */ jsx("p", { className: "text-foreground text-column mb-1", children: label }),
+    payload.map((entry) => /* @__PURE__ */ jsxs("p", { className: "text-placeholder", children: [
+      /* @__PURE__ */ jsx("span", { className: "mr-2 inline-block size-2 rounded-full", style: { backgroundColor: entry.color } }),
+      entry.name,
+      ":",
+      " ",
+      /* @__PURE__ */ jsxs("span", { className: "font-mono", children: [
+        entry.value,
+        suffix
+      ] })
+    ] }, entry.name))
+  ] });
+}
+
+function MetricsLineChart({
+  data,
+  series,
+  height = 210,
+  yDomain,
+  onPointClick,
+  xAxisInterval = 5,
+  xAxisMinTickGap,
+  showDots = false
+}) {
+  const isClickable = typeof onPointClick === "function";
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsx("div", { className: "mb-4 flex w-full flex-wrap items-end gap-4 gap-y-1", children: series.map((s) => {
+      const aggregated = s.aggregate?.(data);
+      return /* @__PURE__ */ jsxs("div", { className: "inline-flex items-baseline gap-2", children: [
+        /* @__PURE__ */ jsx("div", { className: "size-2 shrink-0 -translate-y-px rounded-full", style: { backgroundColor: s.color } }),
+        /* @__PURE__ */ jsx("span", { className: "text-caption text-muted-foreground max-w-24 truncate", children: s.label }),
+        aggregated && /* @__PURE__ */ jsxs("span", { className: "text-caption text-muted-foreground", children: [
+          aggregated.value,
+          aggregated.suffix && /* @__PURE__ */ jsxs("span", { className: "text-caption text-placeholder", children: [
+            " ",
+            aggregated.suffix
+          ] })
+        ] })
+      ] }, s.dataKey);
+    }) }),
+    /* @__PURE__ */ jsx("div", { style: { height }, children: /* @__PURE__ */ jsx(ResponsiveContainer, { width: "100%", height: "100%", children: /* @__PURE__ */ jsxs(LineChart, { data, children: [
+      /* @__PURE__ */ jsx(
+        CartesianGrid,
+        {
+          stroke: "currentColor",
+          strokeOpacity: 0.08,
+          vertical: false,
+          className: "text-black dark:text-white"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        XAxis,
+        {
+          dataKey: "time",
+          tick: { fontSize: CHART_TICK_FONT_SIZE, fill: CHART_LABEL_COLOR, fontFamily: "var(--font-mono)" },
+          tickLine: false,
+          axisLine: false,
+          interval: xAxisInterval,
+          minTickGap: xAxisMinTickGap
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        YAxis,
+        {
+          tick: { fontSize: CHART_TICK_FONT_SIZE, fill: CHART_LABEL_COLOR, fontFamily: "var(--font-mono)" },
+          tickLine: false,
+          axisLine: false,
+          width: 30,
+          domain: yDomain
+        }
+      ),
+      /* @__PURE__ */ jsx(Tooltip, { content: /* @__PURE__ */ jsx(MetricsLineChartTooltip, {}) }),
+      series.map((s) => /* @__PURE__ */ jsx(
+        Line,
+        {
+          type: "linear",
+          dataKey: s.dataKey,
+          stroke: s.color,
+          strokeWidth: 2,
+          dot: showDots ? { r: 3, fill: s.color, strokeWidth: 0 } : false,
+          activeDot: isClickable ? {
+            r: 4,
+            style: { cursor: "pointer" },
+            onClick: (_, payload) => {
+              const datum = payload?.payload;
+              if (datum) onPointClick(datum, s.dataKey);
+            }
+          } : void 0,
+          name: s.label
+        },
+        s.dataKey
+      ))
+    ] }) }) })
+  ] });
+}
+
+export { MetricsLineChart as M, MetricsLineChartTooltip as a };
+//# sourceMappingURL=metrics-line-chart-DHyrDPkJ.js.map

package/dist/metrics-line-chart-DHyrDPkJ.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"metrics-line-chart-DHyrDPkJ.js","sources":["../src/ds/components/MetricsLineChart/metrics-line-chart-tooltip.tsx","../src/ds/components/MetricsLineChart/metrics-line-chart.tsx"],"sourcesContent":["import { ChartTooltip } from '@/ds/components/ChartTooltip';\n\nexport function MetricsLineChartTooltip({\n  active,\n  payload,\n  label,\n  suffix,\n}: {\n  active?: boolean;\n  payload?: Array<{ name: string; value: number; color: string }>;\n  label?: string;\n  suffix?: string;\n}) {\n  if (!active || !payload?.length) return null;\n  return (\n    <ChartTooltip>\n      <p className=\"text-foreground text-column mb-1\">{label}</p>\n      {payload.map(entry => (\n        <p key={entry.name} className=\"text-placeholder\">\n          <span className=\"mr-2 inline-block size-2 rounded-full\" style={{ backgroundColor: entry.color }} />\n          {entry.name}:{' '}\n          <span className=\"font-mono\">\n            {entry.value}\n            {suffix}\n          </span>\n        </p>\n      ))}\n    </ChartTooltip>\n  );\n}\n","import { LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, ResponsiveContainer } from 'recharts';\nimport { MetricsLineChartTooltip } from './metrics-line-chart-tooltip';\nimport { CHART_LABEL_COLOR, CHART_TICK_FONT_SIZE } from '@/ds/tokens';\n\nexport type MetricsLineChartSeries = {\n  dataKey: string;\n  label: string;\n  color: string;\n  aggregate?: (data: Record<string, unknown>[]) => { value: string; suffix?: string };\n};\n\nexport type MetricsLineChartPointClickHandler = (point: Record<string, unknown>, seriesKey: string) => void;\n\nexport function MetricsLineChart({\n  data,\n  series,\n  height = 210,\n  yDomain,\n  onPointClick,\n  xAxisInterval = 5,\n  xAxisMinTickGap,\n  showDots = false,\n}: {\n  data: Record<string, unknown>[];\n  series: MetricsLineChartSeries[];\n  height?: number;\n  yDomain?: [number, number];\n  onPointClick?: MetricsLineChartPointClickHandler;\n  /** X-axis tick density. Default `5` (every 6th point). Pass\n   * `\"preserveStartEnd\"` with `xAxisMinTickGap` for a width-responsive axis. */\n  xAxisInterval?: number | 'preserveStart' | 'preserveEnd' | 'preserveStartEnd';\n  /** Minimum px gap between rendered ticks; recharts drops labels to honor it. */\n  xAxisMinTickGap?: number;\n  /** Render a visible dot on every point (needed for single-point series). */\n  showDots?: boolean;\n}) {\n  const isClickable = typeof onPointClick === 'function';\n\n  return (\n    <div>\n      <div className=\"mb-4 flex w-full flex-wrap items-end gap-4 gap-y-1\">\n        {series.map(s => {\n          const aggregated = s.aggregate?.(data);\n          return (\n            <div key={s.dataKey} className=\"inline-flex items-baseline gap-2\">\n              <div className=\"size-2 shrink-0 -translate-y-px rounded-full\" style={{ backgroundColor: s.color }} />\n              <span className=\"text-caption text-muted-foreground max-w-24 truncate\">{s.label}</span>\n              {aggregated && (\n                <span className=\"text-caption text-muted-foreground\">\n                  {aggregated.value}\n                  {aggregated.suffix && <span className=\"text-caption text-placeholder\"> {aggregated.suffix}</span>}\n                </span>\n              )}\n            </div>\n          );\n        })}\n      </div>\n      <div style={{ height }}>\n        <ResponsiveContainer width=\"100%\" height=\"100%\">\n          <LineChart data={data}>\n            <CartesianGrid\n              stroke=\"currentColor\"\n              strokeOpacity={0.08}\n              vertical={false}\n              className=\"text-black dark:text-white\"\n            />\n            <XAxis\n              dataKey=\"time\"\n              tick={{ fontSize: CHART_TICK_FONT_SIZE, fill: CHART_LABEL_COLOR, fontFamily: 'var(--font-mono)' }}\n              tickLine={false}\n              axisLine={false}\n              interval={xAxisInterval}\n              minTickGap={xAxisMinTickGap}\n            />\n            <YAxis\n              tick={{ fontSize: CHART_TICK_FONT_SIZE, fill: CHART_LABEL_COLOR, fontFamily: 'var(--font-mono)' }}\n              tickLine={false}\n              axisLine={false}\n              width={30}\n              domain={yDomain}\n            />\n            <Tooltip content={<MetricsLineChartTooltip />} />\n            {series.map(s => (\n              <Line\n                key={s.dataKey}\n                type=\"linear\"\n                dataKey={s.dataKey}\n                stroke={s.color}\n                strokeWidth={2}\n                dot={showDots ? { r: 3, fill: s.color, strokeWidth: 0 } : false}\n                activeDot={\n                  isClickable\n                    ? {\n                        r: 4,\n                        style: { cursor: 'pointer' },\n                        onClick: (_: unknown, payload: unknown) => {\n                          const datum = (payload as { payload?: Record<string, unknown> } | undefined)?.payload;\n                          if (datum) onPointClick(datum, s.dataKey);\n                        },\n                      }\n                    : undefined\n                }\n                name={s.label}\n              />\n            ))}\n          </LineChart>\n        </ResponsiveContainer>\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

package/dist/new/layout/app-shell.cjs.js

@@ -3,7 +3,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const utils_cn = require('../../cn-BuHW7Wrt.cjs');
+const primitives_raisedSurface = require('../../primitives/raised-surface.cjs.js');
+const utils_cn = require('../../cn-DG0X1KEP.cjs');
 
 function AppShell({
   children,
@@ -20,7 +21,8 @@ function AppShell({
     {
       "data-slot": "app-shell-frame",
       className: utils_cn.cn(
-        "relative m-1.5 ml-0 grid min-h-0 flex-1 overflow-hidden rounded-studio-frame border border-border1 bg-surface2 shadow-main-frame lg:m-2 lg:ml-0",
+        "relative m-1.5 ml-0 grid min-h-0 flex-1 overflow-hidden rounded-studio-frame lg:m-2 lg:ml-0",
+        primitives_raisedSurface.frameSurfaceStyle,
         routeHeader ? "grid-rows-[auto_1fr]" : "grid-rows-[1fr]"
       ),
       children: [

package/dist/new/layout/app-shell.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"app-shell.cjs.js","sources":["../../../src/ds/new/layout/app-shell/app-shell.tsx"],"sourcesContent":["import type { ComponentPropsWithRef, ReactNode } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nexport interface AppShellFrameProps {\n  children: ReactNode;\n  className: string;\n}\n\nexport interface AppShellProps extends Omit<ComponentPropsWithRef<'div'>, 'children'> {\n  children: ReactNode;\n  mainLabel: string;\n  mobileHeader?: ReactNode;\n  renderFrame?: (props: AppShellFrameProps) => ReactNode;\n  routeHeader?: ReactNode;\n}\n\nexport function AppShell({\n  children,\n  className,\n  mainLabel,\n  mobileHeader,\n  ref,\n  renderFrame,\n  routeHeader,\n  ...props\n}: AppShellProps) {\n  const frame = (\n    <div\n      data-slot=\"app-shell-frame\"\n      className={cn(\n        'relative m-1.5 ml-0 grid min-h-0 flex-1 overflow-hidden rounded-studio-frame border border-border1 bg-surface2 shadow-main-frame lg:m-2 lg:ml-0',\n        routeHeader ? 'grid-rows-[auto_1fr]' : 'grid-rows-[1fr]',\n      )}\n    >\n      {routeHeader}\n      <div data-slot=\"app-shell-main\" aria-label={mainLabel} role=\"group\" className=\"min-h-0 overflow-y-auto\">\n        {children}\n      </div>\n    </div>\n  );\n  const frameProps: AppShellFrameProps = {\n    children: frame,\n    className: 'flex min-h-0 flex-1 flex-col',\n  };\n\n  return (\n    <div ref={ref} data-slot=\"app-shell\" className={cn('flex h-full min-h-0 flex-col', className)} {...props}>\n      {mobileHeader}\n      {renderFrame ? renderFrame(frameProps) : <div className={frameProps.className}>{frame}</div>}\n    </div>\n  );\n}\n"],"names":["jsxs","cn","jsx"],"mappings":";;;;;;;AAiBO,SAAS,QAAA,CAAS;AAAA,EACvB,QAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA;AAAA,EACA,GAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAkB;AAChB,EAAA,MAAM,KAAA,mBACJA,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,iBAAA;AAAA,MACV,SAAA,EAAWC,WAAA;AAAA,QACT,iJAAA;AAAA,QACA,cAAc,sBAAA,GAAyB;AAAA,OACzC;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,WAAA;AAAA,wBACDC,cAAA,CAAC,KAAA,EAAA,EAAI,WAAA,EAAU,gBAAA,EAAiB,YAAA,EAAY,WAAW,IAAA,EAAK,OAAA,EAAQ,SAAA,EAAU,yBAAA,EAC3E,QAAA,EACH;AAAA;AAAA;AAAA,GACF;AAEF,EAAA,MAAM,UAAA,GAAiC;AAAA,IACrC,QAAA,EAAU,KAAA;AAAA,IACV,SAAA,EAAW;AAAA,GACb;AAEA,EAAA,uBACEF,eAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAU,WAAA,EAAU,WAAA,EAAY,SAAA,EAAWC,WAAA,CAAG,8BAAA,EAAgC,SAAS,CAAA,EAAI,GAAG,KAAA,EAChG,QAAA,EAAA;AAAA,IAAA,YAAA;AAAA,IACA,WAAA,GAAc,YAAY,UAAU,CAAA,kCAAK,KAAA,EAAA,EAAI,SAAA,EAAW,UAAA,CAAW,SAAA,EAAY,QAAA,EAAA,KAAA,EAAM;AAAA,GAAA,EACxF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"app-shell.cjs.js","sources":["../../../src/ds/new/layout/app-shell/app-shell.tsx"],"sourcesContent":["import type { ComponentPropsWithRef, ReactNode } from 'react';\n\nimport { frameSurfaceStyle } from '@/ds/primitives/raised-surface';\nimport { cn } from '@/lib/utils';\n\nexport interface AppShellFrameProps {\n  children: ReactNode;\n  className: string;\n}\n\nexport interface AppShellProps extends Omit<ComponentPropsWithRef<'div'>, 'children'> {\n  children: ReactNode;\n  mainLabel: string;\n  mobileHeader?: ReactNode;\n  renderFrame?: (props: AppShellFrameProps) => ReactNode;\n  routeHeader?: ReactNode;\n}\n\nexport function AppShell({\n  children,\n  className,\n  mainLabel,\n  mobileHeader,\n  ref,\n  renderFrame,\n  routeHeader,\n  ...props\n}: AppShellProps) {\n  const frame = (\n    <div\n      data-slot=\"app-shell-frame\"\n      className={cn(\n        'relative m-1.5 ml-0 grid min-h-0 flex-1 overflow-hidden rounded-studio-frame lg:m-2 lg:ml-0',\n        frameSurfaceStyle,\n        routeHeader ? 'grid-rows-[auto_1fr]' : 'grid-rows-[1fr]',\n      )}\n    >\n      {routeHeader}\n      <div data-slot=\"app-shell-main\" aria-label={mainLabel} role=\"group\" className=\"min-h-0 overflow-y-auto\">\n        {children}\n      </div>\n    </div>\n  );\n  const frameProps: AppShellFrameProps = {\n    children: frame,\n    className: 'flex min-h-0 flex-1 flex-col',\n  };\n\n  return (\n    <div ref={ref} data-slot=\"app-shell\" className={cn('flex h-full min-h-0 flex-col', className)} {...props}>\n      {mobileHeader}\n      {renderFrame ? renderFrame(frameProps) : <div className={frameProps.className}>{frame}</div>}\n    </div>\n  );\n}\n"],"names":["jsxs","cn","frameSurfaceStyle","jsx"],"mappings":";;;;;;;;AAkBO,SAAS,QAAA,CAAS;AAAA,EACvB,QAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA;AAAA,EACA,GAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAkB;AAChB,EAAA,MAAM,KAAA,mBACJA,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,iBAAA;AAAA,MACV,SAAA,EAAWC,WAAA;AAAA,QACT,6FAAA;AAAA,QACAC,0CAAA;AAAA,QACA,cAAc,sBAAA,GAAyB;AAAA,OACzC;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,WAAA;AAAA,wBACDC,cAAA,CAAC,KAAA,EAAA,EAAI,WAAA,EAAU,gBAAA,EAAiB,YAAA,EAAY,WAAW,IAAA,EAAK,OAAA,EAAQ,SAAA,EAAU,yBAAA,EAC3E,QAAA,EACH;AAAA;AAAA;AAAA,GACF;AAEF,EAAA,MAAM,UAAA,GAAiC;AAAA,IACrC,QAAA,EAAU,KAAA;AAAA,IACV,SAAA,EAAW;AAAA,GACb;AAEA,EAAA,uBACEH,eAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAU,WAAA,EAAU,WAAA,EAAY,SAAA,EAAWC,WAAA,CAAG,8BAAA,EAAgC,SAAS,CAAA,EAAI,GAAG,KAAA,EAChG,QAAA,EAAA;AAAA,IAAA,YAAA;AAAA,IACA,WAAA,GAAc,YAAY,UAAU,CAAA,kCAAK,KAAA,EAAA,EAAI,SAAA,EAAW,UAAA,CAAW,SAAA,EAAY,QAAA,EAAA,KAAA,EAAM;AAAA,GAAA,EACxF,CAAA;AAEJ;;;;"}

package/dist/new/layout/app-shell.es.js

@@ -1,5 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { c as cn } from '../../cn-C6s2yXwM.js';
+import { frameSurfaceStyle } from '../../primitives/raised-surface.es.js';
+import { c as cn } from '../../cn-65Adrsfj.js';
 
 function AppShell({
   children,
@@ -16,7 +17,8 @@ function AppShell({
     {
       "data-slot": "app-shell-frame",
       className: cn(
-        "relative m-1.5 ml-0 grid min-h-0 flex-1 overflow-hidden rounded-studio-frame border border-border1 bg-surface2 shadow-main-frame lg:m-2 lg:ml-0",
+        "relative m-1.5 ml-0 grid min-h-0 flex-1 overflow-hidden rounded-studio-frame lg:m-2 lg:ml-0",
+        frameSurfaceStyle,
         routeHeader ? "grid-rows-[auto_1fr]" : "grid-rows-[1fr]"
       ),
       children: [

package/dist/new/layout/app-shell.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"app-shell.es.js","sources":["../../../src/ds/new/layout/app-shell/app-shell.tsx"],"sourcesContent":["import type { ComponentPropsWithRef, ReactNode } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nexport interface AppShellFrameProps {\n  children: ReactNode;\n  className: string;\n}\n\nexport interface AppShellProps extends Omit<ComponentPropsWithRef<'div'>, 'children'> {\n  children: ReactNode;\n  mainLabel: string;\n  mobileHeader?: ReactNode;\n  renderFrame?: (props: AppShellFrameProps) => ReactNode;\n  routeHeader?: ReactNode;\n}\n\nexport function AppShell({\n  children,\n  className,\n  mainLabel,\n  mobileHeader,\n  ref,\n  renderFrame,\n  routeHeader,\n  ...props\n}: AppShellProps) {\n  const frame = (\n    <div\n      data-slot=\"app-shell-frame\"\n      className={cn(\n        'relative m-1.5 ml-0 grid min-h-0 flex-1 overflow-hidden rounded-studio-frame border border-border1 bg-surface2 shadow-main-frame lg:m-2 lg:ml-0',\n        routeHeader ? 'grid-rows-[auto_1fr]' : 'grid-rows-[1fr]',\n      )}\n    >\n      {routeHeader}\n      <div data-slot=\"app-shell-main\" aria-label={mainLabel} role=\"group\" className=\"min-h-0 overflow-y-auto\">\n        {children}\n      </div>\n    </div>\n  );\n  const frameProps: AppShellFrameProps = {\n    children: frame,\n    className: 'flex min-h-0 flex-1 flex-col',\n  };\n\n  return (\n    <div ref={ref} data-slot=\"app-shell\" className={cn('flex h-full min-h-0 flex-col', className)} {...props}>\n      {mobileHeader}\n      {renderFrame ? renderFrame(frameProps) : <div className={frameProps.className}>{frame}</div>}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;AAiBO,SAAS,QAAA,CAAS;AAAA,EACvB,QAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA;AAAA,EACA,GAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAkB;AAChB,EAAA,MAAM,KAAA,mBACJ,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,iBAAA;AAAA,MACV,SAAA,EAAW,EAAA;AAAA,QACT,iJAAA;AAAA,QACA,cAAc,sBAAA,GAAyB;AAAA,OACzC;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,WAAA;AAAA,wBACD,GAAA,CAAC,KAAA,EAAA,EAAI,WAAA,EAAU,gBAAA,EAAiB,YAAA,EAAY,WAAW,IAAA,EAAK,OAAA,EAAQ,SAAA,EAAU,yBAAA,EAC3E,QAAA,EACH;AAAA;AAAA;AAAA,GACF;AAEF,EAAA,MAAM,UAAA,GAAiC;AAAA,IACrC,QAAA,EAAU,KAAA;AAAA,IACV,SAAA,EAAW;AAAA,GACb;AAEA,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAU,WAAA,EAAU,WAAA,EAAY,SAAA,EAAW,EAAA,CAAG,8BAAA,EAAgC,SAAS,CAAA,EAAI,GAAG,KAAA,EAChG,QAAA,EAAA;AAAA,IAAA,YAAA;AAAA,IACA,WAAA,GAAc,YAAY,UAAU,CAAA,uBAAK,KAAA,EAAA,EAAI,SAAA,EAAW,UAAA,CAAW,SAAA,EAAY,QAAA,EAAA,KAAA,EAAM;AAAA,GAAA,EACxF,CAAA;AAEJ;;;;"}
+{"version":3,"file":"app-shell.es.js","sources":["../../../src/ds/new/layout/app-shell/app-shell.tsx"],"sourcesContent":["import type { ComponentPropsWithRef, ReactNode } from 'react';\n\nimport { frameSurfaceStyle } from '@/ds/primitives/raised-surface';\nimport { cn } from '@/lib/utils';\n\nexport interface AppShellFrameProps {\n  children: ReactNode;\n  className: string;\n}\n\nexport interface AppShellProps extends Omit<ComponentPropsWithRef<'div'>, 'children'> {\n  children: ReactNode;\n  mainLabel: string;\n  mobileHeader?: ReactNode;\n  renderFrame?: (props: AppShellFrameProps) => ReactNode;\n  routeHeader?: ReactNode;\n}\n\nexport function AppShell({\n  children,\n  className,\n  mainLabel,\n  mobileHeader,\n  ref,\n  renderFrame,\n  routeHeader,\n  ...props\n}: AppShellProps) {\n  const frame = (\n    <div\n      data-slot=\"app-shell-frame\"\n      className={cn(\n        'relative m-1.5 ml-0 grid min-h-0 flex-1 overflow-hidden rounded-studio-frame lg:m-2 lg:ml-0',\n        frameSurfaceStyle,\n        routeHeader ? 'grid-rows-[auto_1fr]' : 'grid-rows-[1fr]',\n      )}\n    >\n      {routeHeader}\n      <div data-slot=\"app-shell-main\" aria-label={mainLabel} role=\"group\" className=\"min-h-0 overflow-y-auto\">\n        {children}\n      </div>\n    </div>\n  );\n  const frameProps: AppShellFrameProps = {\n    children: frame,\n    className: 'flex min-h-0 flex-1 flex-col',\n  };\n\n  return (\n    <div ref={ref} data-slot=\"app-shell\" className={cn('flex h-full min-h-0 flex-col', className)} {...props}>\n      {mobileHeader}\n      {renderFrame ? renderFrame(frameProps) : <div className={frameProps.className}>{frame}</div>}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;;AAkBO,SAAS,QAAA,CAAS;AAAA,EACvB,QAAA;AAAA,EACA,SAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA;AAAA,EACA,GAAA;AAAA,EACA,WAAA;AAAA,EACA,WAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAkB;AAChB,EAAA,MAAM,KAAA,mBACJ,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,WAAA,EAAU,iBAAA;AAAA,MACV,SAAA,EAAW,EAAA;AAAA,QACT,6FAAA;AAAA,QACA,iBAAA;AAAA,QACA,cAAc,sBAAA,GAAyB;AAAA,OACzC;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,WAAA;AAAA,wBACD,GAAA,CAAC,KAAA,EAAA,EAAI,WAAA,EAAU,gBAAA,EAAiB,YAAA,EAAY,WAAW,IAAA,EAAK,OAAA,EAAQ,SAAA,EAAU,yBAAA,EAC3E,QAAA,EACH;AAAA;AAAA;AAAA,GACF;AAEF,EAAA,MAAM,UAAA,GAAiC;AAAA,IACrC,QAAA,EAAU,KAAA;AAAA,IACV,SAAA,EAAW;AAAA,GACb;AAEA,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAU,WAAA,EAAU,WAAA,EAAY,SAAA,EAAW,EAAA,CAAG,8BAAA,EAAgC,SAAS,CAAA,EAAI,GAAG,KAAA,EAChG,QAAA,EAAA;AAAA,IAAA,YAAA;AAAA,IACA,WAAA,GAAc,YAAY,UAAU,CAAA,uBAAK,KAAA,EAAA,EAAI,SAAA,EAAW,UAAA,CAAW,SAAA,EAAY,QAAA,EAAA,KAAA,EAAM;AAAA,GAAA,EACxF,CAAA;AAEJ;;;;"}

package/dist/new/layout/page-header.cjs.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const pageHeader = require('../../page-header-DyAd0Uof.cjs');
+const pageHeader = require('../../page-header-BBlPmW-T.cjs');
 
 
 

package/dist/new/layout/page-header.es.js

@@ -1,2 +1,2 @@
-export { P as PageHeader } from '../../page-header-DymTqQgq.js';
+export { P as PageHeader } from '../../page-header-BIoUf7MA.js';
 //# sourceMappingURL=page-header.es.js.map

package/dist/new/layout/page-shell.cjs.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
 const jsxRuntime = require('react/jsx-runtime');
-const pageHeader = require('../../page-header-DyAd0Uof.cjs');
-const pageLayout = require('../../page-layout-DXFMbJi3.cjs');
+const pageHeader = require('../../page-header-BBlPmW-T.cjs');
+const pageLayout = require('../../page-layout-C9ifD9Q8.cjs');
 
 function PageShell({
   title,

package/dist/new/layout/page-shell.es.js

@@ -1,6 +1,6 @@
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { P as PageHeader } from '../../page-header-DymTqQgq.js';
-import { P as PageLayout } from '../../page-layout-B_JUSRkD.js';
+import { P as PageHeader } from '../../page-header-BIoUf7MA.js';
+import { P as PageLayout } from '../../page-layout-xcM8IR-B.js';
 
 function PageShell({
   title,

package/dist/new/settings.cjs.js

@@ -2,14 +2,13 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-require('../new-theme.css');const settingsContainer = require('../settings-container-Dxb59YvM.cjs');
+const settingsContainer = require('../settings-container-3_Yu2aCY.cjs');
 const jsxRuntime = require('react/jsx-runtime');
-;/* empty css                      */
 const React = require('react');
-const Txt = require('../Txt-C7rZCmrg.cjs');
-const utils_cn = require('../cn-BuHW7Wrt.cjs');
-const settingsRow = require('../settings-row-Dsu9uRdl.cjs');
-const settingsLayout = require('../settings-layout-DRrl-EBq.cjs');
+const Txt = require('../Txt-B4-2nLaI.cjs');
+const utils_cn = require('../cn-DG0X1KEP.cjs');
+const settingsRow = require('../settings-row-BoAuUUuH.cjs');
+const settingsLayout = require('../settings-layout-NP_1dC-e.cjs');
 
 const SettingsTitleIdContext = React.createContext(void 0);
 function SettingsGroup({ className, ...props }) {
@@ -18,7 +17,7 @@ function SettingsGroup({ className, ...props }) {
     "section",
     {
       "aria-labelledby": titleId,
-      className: utils_cn.cn("new-theme flex min-w-0 scroll-mt-4 flex-col gap-2", className),
+      className: utils_cn.cn("flex min-w-0 scroll-mt-4 flex-col gap-2", className),
       ...props
     }
   ) });
@@ -47,22 +46,13 @@ function SettingsTitle({
   ...props
 }) {
   const titleId = React.useContext(SettingsTitleIdContext);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "new-theme flex min-w-0 flex-wrap items-center gap-2", children: [
-    /* @__PURE__ */ jsxRuntime.jsx(
-      Txt.Txt,
-      {
-        as: "h2",
-        id: titleId,
-        variant: "header-sm",
-        className: utils_cn.cn("font-medium text-foreground", className),
-        ...props
-      }
-    ),
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "h2", id: titleId, variant: "subheading", tone: "ink", className, ...props }),
     accessory
   ] });
 }
 function SettingsDescription({ className, ...props }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "p", variant: "ui-sm", className: utils_cn.cn("new-theme text-muted-foreground", className), ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(Txt.Txt, { as: "p", variant: "caption", tone: "muted", className, ...props });
 }
 
 exports.SettingsContainer = settingsContainer.SettingsContainer;

package/dist/new/settings.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"settings.cjs.js","sources":["../../src/ds/new/settings/settings-header.tsx"],"sourcesContent":["import '../../../../new-theme.css';\n\nimport { createContext, useContext, useId } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nconst SettingsTitleIdContext = createContext<string | undefined>(undefined);\n\nexport function SettingsGroup({ className, ...props }: ComponentProps<'section'>) {\n  const titleId = useId();\n\n  return (\n    <SettingsTitleIdContext.Provider value={titleId}>\n      <section\n        aria-labelledby={titleId}\n        className={cn('new-theme flex min-w-0 scroll-mt-4 flex-col gap-2', className)}\n        {...props}\n      />\n    </SettingsTitleIdContext.Provider>\n  );\n}\n\nexport function SettingsHeader({\n  action,\n  children,\n  className,\n  ...props\n}: ComponentProps<'header'> & { action?: ReactNode }) {\n  return (\n    <header\n      className={cn('flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between sm:gap-4', className)}\n      {...props}\n    >\n      <div className=\"flex min-w-0 flex-col gap-1\">{children}</div>\n      {action != null && <div className=\"shrink-0\">{action}</div>}\n    </header>\n  );\n}\n\nexport function SettingsTitle({\n  accessory,\n  className,\n  ...props\n}: Omit<ComponentProps<'h2'>, 'id'> & { accessory?: ReactNode }) {\n  const titleId = useContext(SettingsTitleIdContext);\n\n  return (\n    <div className=\"new-theme flex min-w-0 flex-wrap items-center gap-2\">\n      <Txt\n        as=\"h2\"\n        id={titleId}\n        variant=\"header-sm\"\n        className={cn('font-medium text-foreground', className)}\n        {...props}\n      />\n      {accessory}\n    </div>\n  );\n}\n\nexport function SettingsDescription({ className, ...props }: ComponentProps<'p'>) {\n  return <Txt as=\"p\" variant=\"ui-sm\" className={cn('new-theme text-muted-foreground', className)} {...props} />;\n}\n"],"names":["createContext","useId","jsx","cn","jsxs","useContext","Txt"],"mappings":";;;;;;;;;;;;;AAOA,MAAM,sBAAA,GAAyBA,oBAAkC,MAAS,CAAA;AAEnE,SAAS,aAAA,CAAc,EAAE,SAAA,EAAW,GAAG,OAAM,EAA8B;AAChF,EAAA,MAAM,UAAUC,WAAA,EAAM;AAEtB,EAAA,uBACEC,cAAA,CAAC,sBAAA,CAAuB,QAAA,EAAvB,EAAgC,OAAO,OAAA,EACtC,QAAA,kBAAAA,cAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,iBAAA,EAAiB,OAAA;AAAA,MACjB,SAAA,EAAWC,WAAA,CAAG,mDAAA,EAAqD,SAAS,CAAA;AAAA,MAC3E,GAAG;AAAA;AAAA,GACN,EACF,CAAA;AAEJ;AAEO,SAAS,cAAA,CAAe;AAAA,EAC7B,MAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAsD;AACpD,EAAA,uBACEC,eAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWD,WAAA,CAAG,6EAAA,EAA+E,SAAS,CAAA;AAAA,MACrG,GAAG,KAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAAD,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,6BAAA,EAA+B,QAAA,EAAS,CAAA;AAAA,QACtD,UAAU,IAAA,oBAAQA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,YAAY,QAAA,EAAA,MAAA,EAAO;AAAA;AAAA;AAAA,GACvD;AAEJ;AAEO,SAAS,aAAA,CAAc;AAAA,EAC5B,SAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAiE;AAC/D,EAAA,MAAM,OAAA,GAAUG,iBAAW,sBAAsB,CAAA;AAEjD,EAAA,uBACED,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,qDAAA,EACb,QAAA,EAAA;AAAA,oBAAAF,cAAA;AAAA,MAACI,OAAA;AAAA,MAAA;AAAA,QACC,EAAA,EAAG,IAAA;AAAA,QACH,EAAA,EAAI,OAAA;AAAA,QACJ,OAAA,EAAQ,WAAA;AAAA,QACR,SAAA,EAAWH,WAAA,CAAG,6BAAA,EAA+B,SAAS,CAAA;AAAA,QACrD,GAAG;AAAA;AAAA,KACN;AAAA,IACC;AAAA,GAAA,EACH,CAAA;AAEJ;AAEO,SAAS,mBAAA,CAAoB,EAAE,SAAA,EAAW,GAAG,OAAM,EAAwB;AAChF,EAAA,uBAAOD,cAAA,CAACI,OAAA,EAAA,EAAI,EAAA,EAAG,GAAA,EAAI,OAAA,EAAQ,OAAA,EAAQ,SAAA,EAAWH,WAAA,CAAG,iCAAA,EAAmC,SAAS,CAAA,EAAI,GAAG,KAAA,EAAO,CAAA;AAC7G;;;;;;;;;;"}
+{"version":3,"file":"settings.cjs.js","sources":["../../src/ds/new/settings/settings-header.tsx"],"sourcesContent":["import { createContext, useContext, useId } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nconst SettingsTitleIdContext = createContext<string | undefined>(undefined);\n\nexport function SettingsGroup({ className, ...props }: ComponentProps<'section'>) {\n  const titleId = useId();\n\n  return (\n    <SettingsTitleIdContext.Provider value={titleId}>\n      <section\n        aria-labelledby={titleId}\n        className={cn('flex min-w-0 scroll-mt-4 flex-col gap-2', className)}\n        {...props}\n      />\n    </SettingsTitleIdContext.Provider>\n  );\n}\n\nexport function SettingsHeader({\n  action,\n  children,\n  className,\n  ...props\n}: ComponentProps<'header'> & { action?: ReactNode }) {\n  return (\n    <header\n      className={cn('flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between sm:gap-4', className)}\n      {...props}\n    >\n      <div className=\"flex min-w-0 flex-col gap-1\">{children}</div>\n      {action != null && <div className=\"shrink-0\">{action}</div>}\n    </header>\n  );\n}\n\nexport function SettingsTitle({\n  accessory,\n  className,\n  ...props\n}: Omit<ComponentProps<'h2'>, 'id'> & { accessory?: ReactNode }) {\n  const titleId = useContext(SettingsTitleIdContext);\n\n  return (\n    <div className=\"flex min-w-0 flex-wrap items-center gap-2\">\n      <Txt as=\"h2\" id={titleId} variant=\"subheading\" tone=\"ink\" className={className} {...props} />\n      {accessory}\n    </div>\n  );\n}\n\nexport function SettingsDescription({ className, ...props }: ComponentProps<'p'>) {\n  return <Txt as=\"p\" variant=\"caption\" tone=\"muted\" className={className} {...props} />;\n}\n"],"names":["createContext","useId","jsx","cn","jsxs","useContext","Txt"],"mappings":";;;;;;;;;;;;AAKA,MAAM,sBAAA,GAAyBA,oBAAkC,MAAS,CAAA;AAEnE,SAAS,aAAA,CAAc,EAAE,SAAA,EAAW,GAAG,OAAM,EAA8B;AAChF,EAAA,MAAM,UAAUC,WAAA,EAAM;AAEtB,EAAA,uBACEC,cAAA,CAAC,sBAAA,CAAuB,QAAA,EAAvB,EAAgC,OAAO,OAAA,EACtC,QAAA,kBAAAA,cAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,iBAAA,EAAiB,OAAA;AAAA,MACjB,SAAA,EAAWC,WAAA,CAAG,yCAAA,EAA2C,SAAS,CAAA;AAAA,MACjE,GAAG;AAAA;AAAA,GACN,EACF,CAAA;AAEJ;AAEO,SAAS,cAAA,CAAe;AAAA,EAC7B,MAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAsD;AACpD,EAAA,uBACEC,eAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAWD,WAAA,CAAG,6EAAA,EAA+E,SAAS,CAAA;AAAA,MACrG,GAAG,KAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAAD,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,6BAAA,EAA+B,QAAA,EAAS,CAAA;AAAA,QACtD,UAAU,IAAA,oBAAQA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,YAAY,QAAA,EAAA,MAAA,EAAO;AAAA;AAAA;AAAA,GACvD;AAEJ;AAEO,SAAS,aAAA,CAAc;AAAA,EAC5B,SAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAiE;AAC/D,EAAA,MAAM,OAAA,GAAUG,iBAAW,sBAAsB,CAAA;AAEjD,EAAA,uBACED,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,2CAAA,EACb,QAAA,EAAA;AAAA,oBAAAF,cAAA,CAACI,OAAA,EAAA,EAAI,EAAA,EAAG,IAAA,EAAK,EAAA,EAAI,OAAA,EAAS,OAAA,EAAQ,YAAA,EAAa,IAAA,EAAK,KAAA,EAAM,SAAA,EAAuB,GAAG,KAAA,EAAO,CAAA;AAAA,IAC1F;AAAA,GAAA,EACH,CAAA;AAEJ;AAEO,SAAS,mBAAA,CAAoB,EAAE,SAAA,EAAW,GAAG,OAAM,EAAwB;AAChF,EAAA,uBAAOJ,cAAA,CAACI,OAAA,EAAA,EAAI,EAAA,EAAG,GAAA,EAAI,OAAA,EAAQ,WAAU,IAAA,EAAK,OAAA,EAAQ,SAAA,EAAuB,GAAG,KAAA,EAAO,CAAA;AACrF;;;;;;;;;;"}

package/dist/new/settings.es.js

@@ -1,11 +1,10 @@
-import '../new-theme.css';export { S as SettingsContainer } from '../settings-container-B5YhEzjS.js';
+export { S as SettingsContainer } from '../settings-container-T53heJKd.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
-/* empty css                    */
 import { useId, useContext, createContext } from 'react';
-import { T as Txt } from '../Txt-hyo2FKuO.js';
-import { c as cn } from '../cn-C6s2yXwM.js';
-export { a as SettingsRow } from '../settings-row-PB5zne3m.js';
-export { S as SettingsLayout } from '../settings-layout-CTnDZ_fr.js';
+import { T as Txt } from '../Txt-DTh3Pa_a.js';
+import { c as cn } from '../cn-65Adrsfj.js';
+export { a as SettingsRow } from '../settings-row-B2IekRyH.js';
+export { S as SettingsLayout } from '../settings-layout-C80s-D31.js';
 
 const SettingsTitleIdContext = createContext(void 0);
 function SettingsGroup({ className, ...props }) {
@@ -14,7 +13,7 @@ function SettingsGroup({ className, ...props }) {
     "section",
     {
       "aria-labelledby": titleId,
-      className: cn("new-theme flex min-w-0 scroll-mt-4 flex-col gap-2", className),
+      className: cn("flex min-w-0 scroll-mt-4 flex-col gap-2", className),
       ...props
     }
   ) });
@@ -43,22 +42,13 @@ function SettingsTitle({
   ...props
 }) {
   const titleId = useContext(SettingsTitleIdContext);
-  return /* @__PURE__ */ jsxs("div", { className: "new-theme flex min-w-0 flex-wrap items-center gap-2", children: [
-    /* @__PURE__ */ jsx(
-      Txt,
-      {
-        as: "h2",
-        id: titleId,
-        variant: "header-sm",
-        className: cn("font-medium text-foreground", className),
-        ...props
-      }
-    ),
+  return /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-wrap items-center gap-2", children: [
+    /* @__PURE__ */ jsx(Txt, { as: "h2", id: titleId, variant: "subheading", tone: "ink", className, ...props }),
     accessory
   ] });
 }
 function SettingsDescription({ className, ...props }) {
-  return /* @__PURE__ */ jsx(Txt, { as: "p", variant: "ui-sm", className: cn("new-theme text-muted-foreground", className), ...props });
+  return /* @__PURE__ */ jsx(Txt, { as: "p", variant: "caption", tone: "muted", className, ...props });
 }
 
 export { SettingsDescription, SettingsGroup, SettingsHeader, SettingsTitle };

package/dist/new/settings.es.js.map

@@ -1 +1 @@
-{"version":3,"file":"settings.es.js","sources":["../../src/ds/new/settings/settings-header.tsx"],"sourcesContent":["import '../../../../new-theme.css';\n\nimport { createContext, useContext, useId } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nconst SettingsTitleIdContext = createContext<string | undefined>(undefined);\n\nexport function SettingsGroup({ className, ...props }: ComponentProps<'section'>) {\n  const titleId = useId();\n\n  return (\n    <SettingsTitleIdContext.Provider value={titleId}>\n      <section\n        aria-labelledby={titleId}\n        className={cn('new-theme flex min-w-0 scroll-mt-4 flex-col gap-2', className)}\n        {...props}\n      />\n    </SettingsTitleIdContext.Provider>\n  );\n}\n\nexport function SettingsHeader({\n  action,\n  children,\n  className,\n  ...props\n}: ComponentProps<'header'> & { action?: ReactNode }) {\n  return (\n    <header\n      className={cn('flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between sm:gap-4', className)}\n      {...props}\n    >\n      <div className=\"flex min-w-0 flex-col gap-1\">{children}</div>\n      {action != null && <div className=\"shrink-0\">{action}</div>}\n    </header>\n  );\n}\n\nexport function SettingsTitle({\n  accessory,\n  className,\n  ...props\n}: Omit<ComponentProps<'h2'>, 'id'> & { accessory?: ReactNode }) {\n  const titleId = useContext(SettingsTitleIdContext);\n\n  return (\n    <div className=\"new-theme flex min-w-0 flex-wrap items-center gap-2\">\n      <Txt\n        as=\"h2\"\n        id={titleId}\n        variant=\"header-sm\"\n        className={cn('font-medium text-foreground', className)}\n        {...props}\n      />\n      {accessory}\n    </div>\n  );\n}\n\nexport function SettingsDescription({ className, ...props }: ComponentProps<'p'>) {\n  return <Txt as=\"p\" variant=\"ui-sm\" className={cn('new-theme text-muted-foreground', className)} {...props} />;\n}\n"],"names":[],"mappings":";;;;;;;;;AAOA,MAAM,sBAAA,GAAyB,cAAkC,MAAS,CAAA;AAEnE,SAAS,aAAA,CAAc,EAAE,SAAA,EAAW,GAAG,OAAM,EAA8B;AAChF,EAAA,MAAM,UAAU,KAAA,EAAM;AAEtB,EAAA,uBACE,GAAA,CAAC,sBAAA,CAAuB,QAAA,EAAvB,EAAgC,OAAO,OAAA,EACtC,QAAA,kBAAA,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,iBAAA,EAAiB,OAAA;AAAA,MACjB,SAAA,EAAW,EAAA,CAAG,mDAAA,EAAqD,SAAS,CAAA;AAAA,MAC3E,GAAG;AAAA;AAAA,GACN,EACF,CAAA;AAEJ;AAEO,SAAS,cAAA,CAAe;AAAA,EAC7B,MAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAsD;AACpD,EAAA,uBACE,IAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA,CAAG,6EAAA,EAA+E,SAAS,CAAA;AAAA,MACrG,GAAG,KAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,6BAAA,EAA+B,QAAA,EAAS,CAAA;AAAA,QACtD,UAAU,IAAA,oBAAQ,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,YAAY,QAAA,EAAA,MAAA,EAAO;AAAA;AAAA;AAAA,GACvD;AAEJ;AAEO,SAAS,aAAA,CAAc;AAAA,EAC5B,SAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAiE;AAC/D,EAAA,MAAM,OAAA,GAAU,WAAW,sBAAsB,CAAA;AAEjD,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,qDAAA,EACb,QAAA,EAAA;AAAA,oBAAA,GAAA;AAAA,MAAC,GAAA;AAAA,MAAA;AAAA,QACC,EAAA,EAAG,IAAA;AAAA,QACH,EAAA,EAAI,OAAA;AAAA,QACJ,OAAA,EAAQ,WAAA;AAAA,QACR,SAAA,EAAW,EAAA,CAAG,6BAAA,EAA+B,SAAS,CAAA;AAAA,QACrD,GAAG;AAAA;AAAA,KACN;AAAA,IACC;AAAA,GAAA,EACH,CAAA;AAEJ;AAEO,SAAS,mBAAA,CAAoB,EAAE,SAAA,EAAW,GAAG,OAAM,EAAwB;AAChF,EAAA,uBAAO,GAAA,CAAC,GAAA,EAAA,EAAI,EAAA,EAAG,GAAA,EAAI,OAAA,EAAQ,OAAA,EAAQ,SAAA,EAAW,EAAA,CAAG,iCAAA,EAAmC,SAAS,CAAA,EAAI,GAAG,KAAA,EAAO,CAAA;AAC7G;;;;"}
+{"version":3,"file":"settings.es.js","sources":["../../src/ds/new/settings/settings-header.tsx"],"sourcesContent":["import { createContext, useContext, useId } from 'react';\nimport type { ComponentProps, ReactNode } from 'react';\nimport { Txt } from '@/ds/components/Txt';\nimport { cn } from '@/lib/utils';\n\nconst SettingsTitleIdContext = createContext<string | undefined>(undefined);\n\nexport function SettingsGroup({ className, ...props }: ComponentProps<'section'>) {\n  const titleId = useId();\n\n  return (\n    <SettingsTitleIdContext.Provider value={titleId}>\n      <section\n        aria-labelledby={titleId}\n        className={cn('flex min-w-0 scroll-mt-4 flex-col gap-2', className)}\n        {...props}\n      />\n    </SettingsTitleIdContext.Provider>\n  );\n}\n\nexport function SettingsHeader({\n  action,\n  children,\n  className,\n  ...props\n}: ComponentProps<'header'> & { action?: ReactNode }) {\n  return (\n    <header\n      className={cn('flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between sm:gap-4', className)}\n      {...props}\n    >\n      <div className=\"flex min-w-0 flex-col gap-1\">{children}</div>\n      {action != null && <div className=\"shrink-0\">{action}</div>}\n    </header>\n  );\n}\n\nexport function SettingsTitle({\n  accessory,\n  className,\n  ...props\n}: Omit<ComponentProps<'h2'>, 'id'> & { accessory?: ReactNode }) {\n  const titleId = useContext(SettingsTitleIdContext);\n\n  return (\n    <div className=\"flex min-w-0 flex-wrap items-center gap-2\">\n      <Txt as=\"h2\" id={titleId} variant=\"subheading\" tone=\"ink\" className={className} {...props} />\n      {accessory}\n    </div>\n  );\n}\n\nexport function SettingsDescription({ className, ...props }: ComponentProps<'p'>) {\n  return <Txt as=\"p\" variant=\"caption\" tone=\"muted\" className={className} {...props} />;\n}\n"],"names":[],"mappings":";;;;;;;;AAKA,MAAM,sBAAA,GAAyB,cAAkC,MAAS,CAAA;AAEnE,SAAS,aAAA,CAAc,EAAE,SAAA,EAAW,GAAG,OAAM,EAA8B;AAChF,EAAA,MAAM,UAAU,KAAA,EAAM;AAEtB,EAAA,uBACE,GAAA,CAAC,sBAAA,CAAuB,QAAA,EAAvB,EAAgC,OAAO,OAAA,EACtC,QAAA,kBAAA,GAAA;AAAA,IAAC,SAAA;AAAA,IAAA;AAAA,MACC,iBAAA,EAAiB,OAAA;AAAA,MACjB,SAAA,EAAW,EAAA,CAAG,yCAAA,EAA2C,SAAS,CAAA;AAAA,MACjE,GAAG;AAAA;AAAA,GACN,EACF,CAAA;AAEJ;AAEO,SAAS,cAAA,CAAe;AAAA,EAC7B,MAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAsD;AACpD,EAAA,uBACE,IAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA,CAAG,6EAAA,EAA+E,SAAS,CAAA;AAAA,MACrG,GAAG,KAAA;AAAA,MAEJ,QAAA,EAAA;AAAA,wBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,6BAAA,EAA+B,QAAA,EAAS,CAAA;AAAA,QACtD,UAAU,IAAA,oBAAQ,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,YAAY,QAAA,EAAA,MAAA,EAAO;AAAA;AAAA;AAAA,GACvD;AAEJ;AAEO,SAAS,aAAA,CAAc;AAAA,EAC5B,SAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAiE;AAC/D,EAAA,MAAM,OAAA,GAAU,WAAW,sBAAsB,CAAA;AAEjD,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,2CAAA,EACb,QAAA,EAAA;AAAA,oBAAA,GAAA,CAAC,GAAA,EAAA,EAAI,EAAA,EAAG,IAAA,EAAK,EAAA,EAAI,OAAA,EAAS,OAAA,EAAQ,YAAA,EAAa,IAAA,EAAK,KAAA,EAAM,SAAA,EAAuB,GAAG,KAAA,EAAO,CAAA;AAAA,IAC1F;AAAA,GAAA,EACH,CAAA;AAEJ;AAEO,SAAS,mBAAA,CAAoB,EAAE,SAAA,EAAW,GAAG,OAAM,EAAwB;AAChF,EAAA,uBAAO,GAAA,CAAC,GAAA,EAAA,EAAI,EAAA,EAAG,GAAA,EAAI,OAAA,EAAQ,WAAU,IAAA,EAAK,OAAA,EAAQ,SAAA,EAAuB,GAAG,KAAA,EAAO,CAAA;AACrF;;;;"}