@tipp/ui 2.10.0 → 2.10.1

package/dist/app/roleplay/rp-session-detail.js

@@ -1,15 +1,15 @@
 "use client";
 import {
   RpSessionDetail
-} from "../../chunk-T7LKMJVA.js";
+} from "../../chunk-ZE36DFOC.js";
 import "../../chunk-TFJJKM3W.js";
 import "../../chunk-QMAINJ4G.js";
 import "../../chunk-3UGBMKSQ.js";
 import "../../chunk-EHDUKUML.js";
-import "../../chunk-2TOASXPK.js";
+import "../../chunk-32WIS4L7.js";
 import "../../chunk-EBFQFOUQ.js";
 import "../../chunk-6YIKOYBQ.js";
-import "../../chunk-XM4GWPXC.js";
+import "../../chunk-YHP75Y5K.js";
 import "../../chunk-NKW6BO5R.js";
 import "../../chunk-KJPBBBVK.js";
 import "../../chunk-5QIT4URV.js";

package/dist/{chunk-2TOASXPK.js → chunk-32WIS4L7.js}

@@ -6,7 +6,7 @@ import {
 } from "./chunk-6YIKOYBQ.js";
 import {
   ScoreTrendSection
-} from "./chunk-XM4GWPXC.js";
+} from "./chunk-YHP75Y5K.js";
 import {
   SectionNav
 } from "./chunk-NKW6BO5R.js";
@@ -128,4 +128,4 @@ function Content({
 export {
   Content
 };
-//# sourceMappingURL=chunk-2TOASXPK.js.map
+//# sourceMappingURL=chunk-32WIS4L7.js.map

package/dist/{chunk-XM4GWPXC.js → chunk-YHP75Y5K.js}

@@ -1,6 +1,3 @@
-import {
-  formatDate
-} from "./chunk-4YAA25AV.js";
 import {
   Chart,
   useTokenColors
@@ -28,7 +25,13 @@ import {
 
 // src/app/roleplay/parts/score-trend-section.tsx
 import { useMemo } from "react";
+import { format } from "date-fns";
 import { jsx, jsxs } from "react/jsx-runtime";
+function formatDateOnly(iso) {
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return iso;
+  return format(d, "M/d");
+}
 function Section({
   title,
   desc,
@@ -68,7 +71,7 @@ function AttemptCell({ row }) {
   );
 }
 function DateCell({ row }) {
-  return /* @__PURE__ */ jsx(Typo, { as: "span", mono: true, style: { color: "var(--gray-9)" }, variant: "body", children: formatDate(row.original.createdAt) });
+  return /* @__PURE__ */ jsx(Typo, { as: "span", mono: true, style: { color: "var(--gray-9)" }, variant: "body", children: formatDateOnly(row.original.createdAt) });
 }
 function ScoreCell({ row }) {
   var _a;
@@ -166,32 +169,34 @@ function ScoreTrendSection({
   const columns = useMemo(() => {
     const h = createColumnHelper();
     return [
+      // autoSize 컬럼에선 size가 최소폭으로 동작(1fr로 늘어남). 모바일(iPhone SE 375px,
+      // 가용 ≈343px)에서 grid 최소폭 합이 화면을 넘지 않도록 작게 잡는다.
       h.display({
         id: "attempt",
         header: "\uD68C\uCC28",
-        size: 120,
-        meta: { autoSize: true, align: "left" },
+        size: 116,
+        meta: { align: "left" },
         cell: AttemptCell
       }),
       h.display({
         id: "date",
         header: "\uB0A0\uC9DC",
-        size: 130,
+        size: 76,
         meta: { align: "left" },
         cell: DateCell
       }),
       h.display({
         id: "score",
         header: "\uCD1D\uC810",
-        size: 80,
+        size: 64,
         meta: { align: "right" },
         cell: ScoreCell
       }),
       h.display({
         id: "delta",
         header: "\uBCC0\uD654",
-        size: 80,
-        meta: { align: "right" },
+        size: 64,
+        meta: { autoSize: true, align: "left" },
         cell: DeltaCell
       })
     ];
@@ -221,6 +226,7 @@ function ScoreTrendSection({
             data: rows,
             getRowStyle: (d) => d.isCurrent ? { background: "var(--accent-a2)" } : {},
             showPagination: false,
+            slim: true,
             variant: "sprite"
           }
         ) })
@@ -233,4 +239,4 @@ export {
   Section,
   ScoreTrendSection
 };
-//# sourceMappingURL=chunk-XM4GWPXC.js.map
+//# sourceMappingURL=chunk-YHP75Y5K.js.map

package/dist/chunk-YHP75Y5K.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/app/roleplay/parts/score-trend-section.tsx"],"sourcesContent":["'use client';\n\nimport React, { useMemo } from 'react';\nimport { format } from 'date-fns';\nimport type { EChartsOption } from 'echarts';\nimport { Box, Flex, Heading, Typo } from '../../../atoms';\nimport {\n  ExpandTable,\n  createColumnHelper,\n  type ColumnDef,\n  type Row,\n} from '../../../molecules';\nimport { Chart, useTokenColors } from '../chart/session-chart';\nimport type { RpSessionHistoryItem } from '../types';\n\n// 트렌드 테이블 날짜 셀은 시간 정보 없이 날짜만 표시.\nfunction formatDateOnly(iso: string): string {\n  const d = new Date(iso);\n  if (Number.isNaN(d.getTime())) return iso;\n  return format(d, 'M/d');\n}\n\n/* ───────────────────────── Section ───────────────────────── */\n\nexport function Section({\n  title,\n  desc,\n  children,\n}: {\n  title: string;\n  desc?: string;\n  children: React.ReactNode;\n}): React.ReactElement {\n  return (\n    <section>\n      <Box mb=\"3\">\n        <Heading\n          size={{ initial: '4', md: '5' }}\n          style={{ textWrap: 'balance' }}\n          weight=\"bold\"\n        >\n          {title}\n        </Heading>\n        {desc ? (\n          <Box mt=\"1\" style={{ maxWidth: '65ch' }}>\n            <Typo as=\"p\" color=\"gray\" variant=\"body\">\n              {desc}\n            </Typo>\n          </Box>\n        ) : null}\n      </Box>\n      {children}\n    </section>\n  );\n}\n\n/* ───────────────────────── 타입 ───────────────────────── */\n\ntype TrendRow = RpSessionHistoryItem & {\n  delta: number | null;\n  isCurrent: boolean;\n};\n\n/* ───────────────────────── 테이블 셀 컴포넌트 ───────────────────────── */\n\nfunction AttemptCell({ row }: { row: Row<TrendRow> }): React.ReactElement {\n  const d = row.original;\n  return (\n    <Typo\n      as=\"span\"\n      style={{ color: d.isCurrent ? 'var(--gray-12)' : 'var(--gray-11)' }}\n      variant=\"body\"\n      weight={d.isCurrent ? 'bold' : 'regular'}\n    >\n      {d.trainingSessionNum}회차{d.isCurrent ? ' (현재)' : null}\n    </Typo>\n  );\n}\n\nfunction DateCell({ row }: { row: Row<TrendRow> }): React.ReactElement {\n  return (\n    <Typo as=\"span\" mono style={{ color: 'var(--gray-9)' }} variant=\"body\">\n      {formatDateOnly(row.original.createdAt)}\n    </Typo>\n  );\n}\n\nfunction ScoreCell({ row }: { row: Row<TrendRow> }): React.ReactElement {\n  return (\n    <Typo\n      as=\"span\"\n      mono\n      variant=\"body\"\n      weight={row.original.isCurrent ? 'bold' : 'regular'}\n    >\n      {row.original.totalScore ?? '—'}\n    </Typo>\n  );\n}\n\nfunction DeltaCell({ row }: { row: Row<TrendRow> }): React.ReactElement {\n  const { delta } = row.original;\n  if (delta === null) {\n    return (\n      <Typo as=\"span\" mono style={{ color: 'var(--gray-9)' }} variant=\"body\">\n        —\n      </Typo>\n    );\n  }\n  return (\n    <Typo as=\"span\" mono style={{ color: 'var(--gray-9)' }} variant=\"body\">\n      {delta > 0 ? `+${delta}` : `${delta}`}\n    </Typo>\n  );\n}\n\n/* ───────────────────────── ScoreTrendSection ───────────────────────── */\n\nexport interface ScoreTrendSectionProps {\n  history: RpSessionHistoryItem[];\n}\n\nexport function ScoreTrendSection({\n  history,\n}: ScoreTrendSectionProps): React.ReactElement {\n  const { colors, probe } = useTokenColors({\n    accent: ['--accent-9', '#5b5bd6'],\n    accentText: ['--accent-11', '#5753c6'],\n    grid: ['--gray-5', '#e0e0e0'],\n    gridSoft: ['--gray-4', '#e8e8e8'],\n    muted: ['--gray-9', '#8d8d8d'],\n  });\n\n  // 총점 없는 회차 제외, 회차 오름차순 정렬, 최근 5회차로 한정\n  const ordered = useMemo(\n    () =>\n      [...history]\n        .filter((e) => e.totalScore !== null)\n        .sort((a, b) => a.trainingSessionNum - b.trainingSessionNum)\n        .slice(-5),\n    [history],\n  );\n\n  const scores = ordered.map((e) => e.totalScore ?? 0);\n  const minScore = Math.max(0, Math.min(...scores) - 10);\n  const maxScore = Math.min(100, Math.max(...scores) + 10);\n  const labels = ordered.map((e) => `${e.trainingSessionNum}회차`);\n  const lastIndex = ordered.length - 1;\n\n  const option: EChartsOption = {\n    tooltip: { trigger: 'axis', valueFormatter: (v) => `${String(v)}점` },\n    grid: { left: 36, right: 16, top: 20, bottom: 24, containLabel: false },\n    xAxis: {\n      type: 'category',\n      data: labels,\n      boundaryGap: true,\n      axisLine: { lineStyle: { color: colors.grid } },\n      axisTick: { show: false },\n      axisLabel: { color: colors.muted, fontSize: 10 }, // ds-allow: chart-lib\n    },\n    yAxis: {\n      type: 'value',\n      min: minScore,\n      max: maxScore,\n      splitLine: { lineStyle: { color: colors.gridSoft } },\n      axisLabel: { color: colors.muted, fontSize: 10 }, // ds-allow: chart-lib\n    },\n    series: [\n      {\n        type: 'line',\n        data: scores,\n        smooth: false,\n        showSymbol: true,\n        symbol: 'circle',\n        symbolSize: 6,\n        lineStyle: { color: colors.accent, width: 2 },\n        itemStyle: { color: colors.accent },\n        label: {\n          show: true,\n          position: 'top',\n          color: colors.accentText,\n          fontSize: 10, // ds-allow: chart-lib\n          fontWeight: 'bold', // ds-allow: chart-lib\n          formatter: (p) => (p.dataIndex === lastIndex ? String(p.value) : ''),\n        },\n      },\n    ],\n  };\n\n  const rows: TrendRow[] = ordered.map((e, i) => {\n    const prev = i > 0 ? (ordered[i - 1].totalScore ?? null) : null;\n    return {\n      ...e,\n      delta:\n        prev !== null && e.totalScore !== null ? e.totalScore - prev : null,\n      isCurrent: i === ordered.length - 1,\n    };\n  });\n\n  const columns = useMemo<ColumnDef<TrendRow>[]>(() => {\n    const h = createColumnHelper<TrendRow>();\n    return [\n      // autoSize 컬럼에선 size가 최소폭으로 동작(1fr로 늘어남). 모바일(iPhone SE 375px,\n      // 가용 ≈343px)에서 grid 최소폭 합이 화면을 넘지 않도록 작게 잡는다.\n      h.display({\n        id: 'attempt',\n        header: '회차',\n        size: 116,\n        meta: { align: 'left' },\n        cell: AttemptCell,\n      }),\n      h.display({\n        id: 'date',\n        header: '날짜',\n        size: 76,\n        meta: { align: 'left' },\n        cell: DateCell,\n      }),\n      h.display({\n        id: 'score',\n        header: '총점',\n        size: 64,\n        meta: { align: 'right' },\n        cell: ScoreCell,\n      }),\n      h.display({\n        id: 'delta',\n        header: '변화',\n        size: 64,\n        meta: { autoSize: true, align: 'left' },\n        cell: DeltaCell,\n      }),\n    ];\n  }, []);\n\n  return (\n    <Section\n      desc={`같은 시나리오 최근 ${ordered.length}회차 총점 변화`}\n      title=\"총점 추이\"\n    >\n      <Flex direction=\"column\" gap=\"4\">\n        <div\n          aria-label=\"총점 추이 라인 차트\"\n          role=\"img\"\n          style={{ position: 'relative', width: '100%', height: 200 }}\n        >\n          {probe}\n          <Chart option={option} />\n        </div>\n        <Box className=\"rp-expand-table\">\n          <ExpandTable\n            columns={columns}\n            data={rows}\n            getRowStyle={(d: TrendRow) =>\n              d.isCurrent ? { background: 'var(--accent-a2)' } : {}\n            }\n            showPagination={false}\n            slim\n            variant=\"sprite\"\n          />\n        </Box>\n      </Flex>\n    </Section>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/{chunk-T7LKMJVA.js → chunk-ZE36DFOC.js}

@@ -9,7 +9,7 @@ import {
 } from "./chunk-3UGBMKSQ.js";
 import {
   Content
-} from "./chunk-2TOASXPK.js";
+} from "./chunk-32WIS4L7.js";
 import {
   computeSpeechShare
 } from "./chunk-4YAA25AV.js";
@@ -139,4 +139,4 @@ function RpSessionDetail({
 export {
   RpSessionDetail
 };
-//# sourceMappingURL=chunk-T7LKMJVA.js.map
+//# sourceMappingURL=chunk-ZE36DFOC.js.map

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tipp/ui",
-  "version": "2.10.0",
+  "version": "2.10.1",
   "private": false,
   "type": "module",
   "exports": {

package/src/app/roleplay/parts/score-trend-section.tsx

@@ -1,6 +1,7 @@
 'use client';
 
 import React, { useMemo } from 'react';
+import { format } from 'date-fns';
 import type { EChartsOption } from 'echarts';
 import { Box, Flex, Heading, Typo } from '../../../atoms';
 import {
@@ -11,7 +12,13 @@ import {
 } from '../../../molecules';
 import { Chart, useTokenColors } from '../chart/session-chart';
 import type { RpSessionHistoryItem } from '../types';
-import { formatDate } from '../utils/session-utils';
+
+// 트렌드 테이블 날짜 셀은 시간 정보 없이 날짜만 표시.
+function formatDateOnly(iso: string): string {
+  const d = new Date(iso);
+  if (Number.isNaN(d.getTime())) return iso;
+  return format(d, 'M/d');
+}
 
 /* ───────────────────────── Section ───────────────────────── */
 
@@ -73,7 +80,7 @@ function AttemptCell({ row }: { row: Row<TrendRow> }): React.ReactElement {
 function DateCell({ row }: { row: Row<TrendRow> }): React.ReactElement {
   return (
     <Typo as="span" mono style={{ color: 'var(--gray-9)' }} variant="body">
-      {formatDate(row.original.createdAt)}
+      {formatDateOnly(row.original.createdAt)}
     </Typo>
   );
 }
@@ -193,32 +200,34 @@ export function ScoreTrendSection({
   const columns = useMemo<ColumnDef<TrendRow>[]>(() => {
     const h = createColumnHelper<TrendRow>();
     return [
+      // autoSize 컬럼에선 size가 최소폭으로 동작(1fr로 늘어남). 모바일(iPhone SE 375px,
+      // 가용 ≈343px)에서 grid 최소폭 합이 화면을 넘지 않도록 작게 잡는다.
       h.display({
         id: 'attempt',
         header: '회차',
-        size: 120,
-        meta: { autoSize: true, align: 'left' },
+        size: 116,
+        meta: { align: 'left' },
         cell: AttemptCell,
       }),
       h.display({
         id: 'date',
         header: '날짜',
-        size: 130,
+        size: 76,
         meta: { align: 'left' },
         cell: DateCell,
       }),
       h.display({
         id: 'score',
         header: '총점',
-        size: 80,
+        size: 64,
         meta: { align: 'right' },
         cell: ScoreCell,
       }),
       h.display({
         id: 'delta',
         header: '변화',
-        size: 80,
-        meta: { align: 'right' },
+        size: 64,
+        meta: { autoSize: true, align: 'left' },
         cell: DeltaCell,
       }),
     ];
@@ -246,6 +255,7 @@ export function ScoreTrendSection({
               d.isCurrent ? { background: 'var(--accent-a2)' } : {}
             }
             showPagination={false}
+            slim
             variant="sprite"
           />
         </Box>

package/dist/chunk-XM4GWPXC.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../src/app/roleplay/parts/score-trend-section.tsx"],"sourcesContent":["'use client';\n\nimport React, { useMemo } from 'react';\nimport type { EChartsOption } from 'echarts';\nimport { Box, Flex, Heading, Typo } from '../../../atoms';\nimport {\n  ExpandTable,\n  createColumnHelper,\n  type ColumnDef,\n  type Row,\n} from '../../../molecules';\nimport { Chart, useTokenColors } from '../chart/session-chart';\nimport type { RpSessionHistoryItem } from '../types';\nimport { formatDate } from '../utils/session-utils';\n\n/* ───────────────────────── Section ───────────────────────── */\n\nexport function Section({\n  title,\n  desc,\n  children,\n}: {\n  title: string;\n  desc?: string;\n  children: React.ReactNode;\n}): React.ReactElement {\n  return (\n    <section>\n      <Box mb=\"3\">\n        <Heading\n          size={{ initial: '4', md: '5' }}\n          style={{ textWrap: 'balance' }}\n          weight=\"bold\"\n        >\n          {title}\n        </Heading>\n        {desc ? (\n          <Box mt=\"1\" style={{ maxWidth: '65ch' }}>\n            <Typo as=\"p\" color=\"gray\" variant=\"body\">\n              {desc}\n            </Typo>\n          </Box>\n        ) : null}\n      </Box>\n      {children}\n    </section>\n  );\n}\n\n/* ───────────────────────── 타입 ───────────────────────── */\n\ntype TrendRow = RpSessionHistoryItem & {\n  delta: number | null;\n  isCurrent: boolean;\n};\n\n/* ───────────────────────── 테이블 셀 컴포넌트 ───────────────────────── */\n\nfunction AttemptCell({ row }: { row: Row<TrendRow> }): React.ReactElement {\n  const d = row.original;\n  return (\n    <Typo\n      as=\"span\"\n      style={{ color: d.isCurrent ? 'var(--gray-12)' : 'var(--gray-11)' }}\n      variant=\"body\"\n      weight={d.isCurrent ? 'bold' : 'regular'}\n    >\n      {d.trainingSessionNum}회차{d.isCurrent ? ' (현재)' : null}\n    </Typo>\n  );\n}\n\nfunction DateCell({ row }: { row: Row<TrendRow> }): React.ReactElement {\n  return (\n    <Typo as=\"span\" mono style={{ color: 'var(--gray-9)' }} variant=\"body\">\n      {formatDate(row.original.createdAt)}\n    </Typo>\n  );\n}\n\nfunction ScoreCell({ row }: { row: Row<TrendRow> }): React.ReactElement {\n  return (\n    <Typo\n      as=\"span\"\n      mono\n      variant=\"body\"\n      weight={row.original.isCurrent ? 'bold' : 'regular'}\n    >\n      {row.original.totalScore ?? '—'}\n    </Typo>\n  );\n}\n\nfunction DeltaCell({ row }: { row: Row<TrendRow> }): React.ReactElement {\n  const { delta } = row.original;\n  if (delta === null) {\n    return (\n      <Typo as=\"span\" mono style={{ color: 'var(--gray-9)' }} variant=\"body\">\n        —\n      </Typo>\n    );\n  }\n  return (\n    <Typo as=\"span\" mono style={{ color: 'var(--gray-9)' }} variant=\"body\">\n      {delta > 0 ? `+${delta}` : `${delta}`}\n    </Typo>\n  );\n}\n\n/* ───────────────────────── ScoreTrendSection ───────────────────────── */\n\nexport interface ScoreTrendSectionProps {\n  history: RpSessionHistoryItem[];\n}\n\nexport function ScoreTrendSection({\n  history,\n}: ScoreTrendSectionProps): React.ReactElement {\n  const { colors, probe } = useTokenColors({\n    accent: ['--accent-9', '#5b5bd6'],\n    accentText: ['--accent-11', '#5753c6'],\n    grid: ['--gray-5', '#e0e0e0'],\n    gridSoft: ['--gray-4', '#e8e8e8'],\n    muted: ['--gray-9', '#8d8d8d'],\n  });\n\n  // 총점 없는 회차 제외, 회차 오름차순 정렬, 최근 5회차로 한정\n  const ordered = useMemo(\n    () =>\n      [...history]\n        .filter((e) => e.totalScore !== null)\n        .sort((a, b) => a.trainingSessionNum - b.trainingSessionNum)\n        .slice(-5),\n    [history],\n  );\n\n  const scores = ordered.map((e) => e.totalScore ?? 0);\n  const minScore = Math.max(0, Math.min(...scores) - 10);\n  const maxScore = Math.min(100, Math.max(...scores) + 10);\n  const labels = ordered.map((e) => `${e.trainingSessionNum}회차`);\n  const lastIndex = ordered.length - 1;\n\n  const option: EChartsOption = {\n    tooltip: { trigger: 'axis', valueFormatter: (v) => `${String(v)}점` },\n    grid: { left: 36, right: 16, top: 20, bottom: 24, containLabel: false },\n    xAxis: {\n      type: 'category',\n      data: labels,\n      boundaryGap: true,\n      axisLine: { lineStyle: { color: colors.grid } },\n      axisTick: { show: false },\n      axisLabel: { color: colors.muted, fontSize: 10 }, // ds-allow: chart-lib\n    },\n    yAxis: {\n      type: 'value',\n      min: minScore,\n      max: maxScore,\n      splitLine: { lineStyle: { color: colors.gridSoft } },\n      axisLabel: { color: colors.muted, fontSize: 10 }, // ds-allow: chart-lib\n    },\n    series: [\n      {\n        type: 'line',\n        data: scores,\n        smooth: false,\n        showSymbol: true,\n        symbol: 'circle',\n        symbolSize: 6,\n        lineStyle: { color: colors.accent, width: 2 },\n        itemStyle: { color: colors.accent },\n        label: {\n          show: true,\n          position: 'top',\n          color: colors.accentText,\n          fontSize: 10, // ds-allow: chart-lib\n          fontWeight: 'bold', // ds-allow: chart-lib\n          formatter: (p) => (p.dataIndex === lastIndex ? String(p.value) : ''),\n        },\n      },\n    ],\n  };\n\n  const rows: TrendRow[] = ordered.map((e, i) => {\n    const prev = i > 0 ? (ordered[i - 1].totalScore ?? null) : null;\n    return {\n      ...e,\n      delta:\n        prev !== null && e.totalScore !== null ? e.totalScore - prev : null,\n      isCurrent: i === ordered.length - 1,\n    };\n  });\n\n  const columns = useMemo<ColumnDef<TrendRow>[]>(() => {\n    const h = createColumnHelper<TrendRow>();\n    return [\n      h.display({\n        id: 'attempt',\n        header: '회차',\n        size: 120,\n        meta: { autoSize: true, align: 'left' },\n        cell: AttemptCell,\n      }),\n      h.display({\n        id: 'date',\n        header: '날짜',\n        size: 130,\n        meta: { align: 'left' },\n        cell: DateCell,\n      }),\n      h.display({\n        id: 'score',\n        header: '총점',\n        size: 80,\n        meta: { align: 'right' },\n        cell: ScoreCell,\n      }),\n      h.display({\n        id: 'delta',\n        header: '변화',\n        size: 80,\n        meta: { align: 'right' },\n        cell: DeltaCell,\n      }),\n    ];\n  }, []);\n\n  return (\n    <Section\n      desc={`같은 시나리오 최근 ${ordered.length}회차 총점 변화`}\n      title=\"총점 추이\"\n    >\n      <Flex direction=\"column\" gap=\"4\">\n        <div\n          aria-label=\"총점 추이 라인 차트\"\n          role=\"img\"\n          style={{ position: 'relative', width: '100%', height: 200 }}\n        >\n          {probe}\n          <Chart option={option} />\n        </div>\n        <Box className=\"rp-expand-table\">\n          <ExpandTable\n            columns={columns}\n            data={rows}\n            getRowStyle={(d: TrendRow) =>\n              d.isCurrent ? { background: 'var(--accent-a2)' } : {}\n            }\n            showPagination={false}\n            variant=\"sprite\"\n          />\n        </Box>\n      </Flex>\n    </Section>\n  );\n}\n"],"mappings":"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","names":[]}