@acronis-platform/ui-react 5.4.5 → 5.5.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (58) hide show
  1. package/dist/components/ui/area-chart/area-chart.js +114 -113
  2. package/dist/components/ui/area-chart/area-chart.js.map +1 -1
  3. package/dist/components/ui/bar-chart/bar-chart.js +53 -49
  4. package/dist/components/ui/bar-chart/bar-chart.js.map +1 -1
  5. package/dist/components/ui/chart/chart.js +52 -45
  6. package/dist/components/ui/chart/chart.js.map +1 -1
  7. package/dist/components/ui/composed-chart/composed-chart.js +134 -130
  8. package/dist/components/ui/composed-chart/composed-chart.js.map +1 -1
  9. package/dist/components/ui/confidence-cone/confidence-cone.js +36 -35
  10. package/dist/components/ui/confidence-cone/confidence-cone.js.map +1 -1
  11. package/dist/components/ui/funnel-chart/funnel-chart.js +38 -37
  12. package/dist/components/ui/funnel-chart/funnel-chart.js.map +1 -1
  13. package/dist/components/ui/line-chart/line-chart.js +35 -34
  14. package/dist/components/ui/line-chart/line-chart.js.map +1 -1
  15. package/dist/components/ui/pie-chart/pie-chart.js +28 -27
  16. package/dist/components/ui/pie-chart/pie-chart.js.map +1 -1
  17. package/dist/components/ui/radar-chart/radar-chart.js +68 -65
  18. package/dist/components/ui/radar-chart/radar-chart.js.map +1 -1
  19. package/dist/components/ui/radial-bar-chart/radial-bar-chart.js +64 -63
  20. package/dist/components/ui/radial-bar-chart/radial-bar-chart.js.map +1 -1
  21. package/dist/components/ui/scatter-chart/scatter-chart.js +26 -26
  22. package/dist/components/ui/scatter-chart/scatter-chart.js.map +1 -1
  23. package/dist/components/ui/treemap/treemap.js +22 -22
  24. package/dist/components/ui/treemap/treemap.js.map +1 -1
  25. package/dist/llms/area-chart.md +1 -0
  26. package/dist/llms/bar-chart.md +1 -0
  27. package/dist/llms/chart.md +10 -0
  28. package/dist/llms/composed-chart.md +1 -0
  29. package/dist/llms/confidence-cone.md +1 -0
  30. package/dist/llms/funnel-chart.md +1 -0
  31. package/dist/llms/line-chart.md +1 -0
  32. package/dist/llms/pie-chart.md +1 -0
  33. package/dist/llms/radar-chart.md +1 -0
  34. package/dist/llms/radial-bar-chart.md +1 -0
  35. package/dist/llms/scatter-chart.md +1 -0
  36. package/dist/llms/treemap.md +1 -0
  37. package/dist/llms.txt +1 -1
  38. package/dist/src/components/ui/area-chart/area-chart.d.ts +6 -1
  39. package/dist/src/components/ui/bar-chart/bar-chart.d.ts +8 -2
  40. package/dist/src/components/ui/category-bar/category-bar.d.ts +1 -1
  41. package/dist/src/components/ui/chart/__stories__/palette-control.d.ts +16 -0
  42. package/dist/src/components/ui/chart/chart.d.ts +12 -1
  43. package/dist/src/components/ui/chart/index.d.ts +1 -1
  44. package/dist/src/components/ui/composed-chart/composed-chart.d.ts +6 -1
  45. package/dist/src/components/ui/confidence-cone/confidence-cone.d.ts +6 -1
  46. package/dist/src/components/ui/funnel-chart/funnel-chart.d.ts +6 -1
  47. package/dist/src/components/ui/grid/grid.d.ts +1 -1
  48. package/dist/src/components/ui/line-chart/line-chart.d.ts +6 -1
  49. package/dist/src/components/ui/pie-chart/pie-chart.d.ts +6 -1
  50. package/dist/src/components/ui/progress-circle/progress-circle.d.ts +1 -1
  51. package/dist/src/components/ui/radar-chart/radar-chart.d.ts +9 -1
  52. package/dist/src/components/ui/radial-bar-chart/radial-bar-chart.d.ts +6 -1
  53. package/dist/src/components/ui/scatter-chart/scatter-chart.d.ts +6 -1
  54. package/dist/src/components/ui/spinner/spinner.d.ts +1 -1
  55. package/dist/src/components/ui/stack/stack.d.ts +1 -1
  56. package/dist/src/components/ui/treemap/treemap.d.ts +6 -1
  57. package/dist/ui-react.css +1 -1
  58. package/package.json +3 -3
@@ -3,12 +3,12 @@ import { cn as e } from "../../../lib/utils.js";
3
3
  import { cva as t } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
4
4
  import { ChartContainer as n, ChartLegend as r, ChartLegendContent as i, ChartTooltip as a, ChartTooltipContent as o, toCssKey as s } from "../chart/chart.js";
5
5
  import { CHART_LABEL_MARGIN as c, dropProjectionPayload as l, resolveAnimation as u, resolveAxisDomain as d, resolveBrushProps as f, resolveCartesianLabelPosition as p, resolveChartReferenceValue as m, resolveLabelFillClass as h, resolveReferenceLineProps as ee, resolveRotatedTickAnchor as te, resolveXAxisTickLabels as ne, resolveXAxisTitle as re, resolveYAxisTitle as ie, toLabelFormatter as ae, toReferenceLineList as oe } from "../chart/chart-format.js";
6
- import { mergeXAxisLayoutMargin as se, useXAxisLayout as g } from "../chart/use-x-axis-layout.js";
7
- import * as _ from "react";
8
- import { Fragment as v, jsx as y, jsxs as b } from "react/jsx-runtime";
9
- import { Area as x, AreaChart as ce, Brush as le, CartesianGrid as ue, LabelList as de, ReferenceLine as fe, Text as pe, XAxis as me, YAxis as he, usePlotArea as S, useXAxisScale as C } from "recharts";
6
+ import { mergeXAxisLayoutMargin as se, useXAxisLayout as ce } from "../chart/use-x-axis-layout.js";
7
+ import * as g from "react";
8
+ import { Fragment as _, jsx as v, jsxs as y } from "react/jsx-runtime";
9
+ import { Area as b, AreaChart as le, Brush as ue, CartesianGrid as de, LabelList as fe, ReferenceLine as pe, Text as me, XAxis as he, YAxis as ge, usePlotArea as x, useXAxisScale as S } from "recharts";
10
10
  //#region src/components/ui/area-chart/area-chart.tsx
11
- var w = t("", {
11
+ var C = t("", {
12
12
  variants: {
13
13
  layout: {
14
14
  single: "",
@@ -24,38 +24,38 @@ var w = t("", {
24
24
  fill: "solid"
25
25
  }
26
26
  });
27
- function ge(e) {
27
+ function _e(e) {
28
28
  return function(t) {
29
29
  let n = {
30
30
  ...t,
31
31
  payload: l(t.payload)
32
32
  };
33
- return typeof e == "function" ? /* @__PURE__ */ y(e, { ...n }) : _.cloneElement(e, n);
33
+ return typeof e == "function" ? /* @__PURE__ */ v(e, { ...n }) : g.cloneElement(e, n);
34
34
  };
35
35
  }
36
- function _e({ projectionStart: e, prevTick: t, clipId: n }) {
37
- let r = C(), i = S();
36
+ function ve({ projectionStart: e, prevTick: t, clipId: n }) {
37
+ let r = S(), i = x();
38
38
  if (!r || !i) return null;
39
39
  let a = r(t), o = r(e);
40
40
  if (a == null || o == null) return null;
41
41
  let s = (a + o) / 2, { x: c, y: l, width: u, height: d } = i;
42
- return /* @__PURE__ */ b(v, { children: [/* @__PURE__ */ b("defs", { children: [/* @__PURE__ */ y("clipPath", {
42
+ return /* @__PURE__ */ y(_, { children: [/* @__PURE__ */ y("defs", { children: [/* @__PURE__ */ v("clipPath", {
43
43
  id: `${n}-actual`,
44
- children: /* @__PURE__ */ y("rect", {
44
+ children: /* @__PURE__ */ v("rect", {
45
45
  x: c,
46
46
  y: l,
47
47
  width: s - c,
48
48
  height: d
49
49
  })
50
- }), /* @__PURE__ */ y("clipPath", {
50
+ }), /* @__PURE__ */ v("clipPath", {
51
51
  id: `${n}-projection`,
52
- children: /* @__PURE__ */ y("rect", {
52
+ children: /* @__PURE__ */ v("rect", {
53
53
  x: s,
54
54
  y: l,
55
55
  width: c + u - s,
56
56
  height: d
57
57
  })
58
- })] }), /* @__PURE__ */ y("line", {
58
+ })] }), /* @__PURE__ */ v("line", {
59
59
  x1: s,
60
60
  y1: l,
61
61
  x2: s,
@@ -64,172 +64,173 @@ function _e({ projectionStart: e, prevTick: t, clipId: n }) {
64
64
  strokeDasharray: "4 4"
65
65
  })] });
66
66
  }
67
- function ve({ dataKeys: e, gradientId: t, colorFor: n }) {
68
- return /* @__PURE__ */ y("defs", { children: e.map((e) => /* @__PURE__ */ b("linearGradient", {
67
+ function ye({ dataKeys: e, gradientId: t, colorFor: n }) {
68
+ return /* @__PURE__ */ v("defs", { children: e.map((e) => /* @__PURE__ */ y("linearGradient", {
69
69
  id: `${t}-${s(e)}`,
70
70
  x1: "0",
71
71
  y1: "0",
72
72
  x2: "0",
73
73
  y2: "1",
74
- children: [/* @__PURE__ */ y("stop", {
74
+ children: [/* @__PURE__ */ v("stop", {
75
75
  offset: "5%",
76
76
  stopColor: n(e),
77
77
  stopOpacity: .8
78
- }), /* @__PURE__ */ y("stop", {
78
+ }), /* @__PURE__ */ v("stop", {
79
79
  offset: "95%",
80
80
  stopColor: n(e),
81
81
  stopOpacity: .1
82
82
  })]
83
83
  }, e)) });
84
84
  }
85
- var T = _.forwardRef(({ className: t, config: v, palette: S, data: C, dataKeys: T, xKey: E, xAxisLabel: D, yAxisLabel: O, yUnit: ye, layout: k = "single", fill: A = "solid", curve: j = "monotone", strokeWidth: M = 2, fillOpacity: N = .4, showDots: P = !1, dotSize: be = 3, showActiveDot: xe, connectNulls: Se = !1, areaSettings: F, referenceLine: Ce, projectionStart: I, showGrid: we = !0, showTooltip: Te = !0, showLegend: Ee = !0, showXAxis: De = !0, showYAxis: Oe = !0, xTickFormatter: L, yTickFormatter: ke, xAxisAngle: R, xAxisInterval: Ae, yAxisTickCount: je, yAxisDomain: Me, gridDashed: Ne, gridHorizontal: Pe, gridVertical: Fe, tooltipContent: z, animate: Ie, animationDuration: Le, animationBegin: Re, animationEasing: ze, showLabels: B = !1, labelPosition: Be, labelFormatter: Ve, showBrush: He = !1, brushHeight: Ue, brushAriaLabel: We, ...Ge }, Ke) => {
85
+ var w = g.forwardRef(({ className: t, config: _, palette: x, data: S, dataKeys: w, xKey: T, xAxisLabel: E, yAxisLabel: D, yUnit: be, layout: O = "single", fill: k = "solid", curve: A = "monotone", strokeWidth: j = 2, fillOpacity: M = .4, showDots: N = !1, dotSize: xe = 3, showActiveDot: Se, connectNulls: Ce = !1, areaSettings: P, referenceLine: we, projectionStart: F, showGrid: Te = !0, showTooltip: Ee = !0, showLegend: De = !0, legendFontSize: I, showXAxis: Oe = !0, showYAxis: ke = !0, xTickFormatter: L, yTickFormatter: Ae, xAxisAngle: R, xAxisInterval: je, yAxisTickCount: Me, yAxisDomain: Ne, gridDashed: Pe, gridHorizontal: Fe, gridVertical: Ie, tooltipContent: z, animate: Le, animationDuration: Re, animationBegin: ze, animationEasing: Be, showLabels: B = !1, labelPosition: Ve, labelFormatter: He, showBrush: Ue = !1, brushHeight: We, brushAriaLabel: Ge, ...Ke }, qe) => {
86
86
  let V = u({
87
- animate: Ie,
88
- animationDuration: Le,
89
- animationBegin: Re,
90
- animationEasing: ze
91
- }), H = k === "stacked", qe = p({
92
- labelPosition: Be,
87
+ animate: Le,
88
+ animationDuration: Re,
89
+ animationBegin: ze,
90
+ animationEasing: Be
91
+ }), H = O === "stacked", Je = p({
92
+ labelPosition: Ve,
93
93
  isStacked: H
94
- }), U = A === "gradient", Je = oe(Ce), W = (e) => F?.[e]?.color ?? `var(--color-${s(e)})`, Ye = B || Object.values(F ?? {}).some((e) => e.showLabel), Xe = re(D), Ze = ie(O), Qe = d(Me), $e = ne(C.map((e) => e[E]), L), G = _.useRef(null), K = g(G, R, D, $e.join("\0")), et = se(Ye ? c : void 0, K.margin), q = _.useMemo(() => I === void 0 ? -1 : C.findIndex((e) => e[E] === I), [
95
- I,
96
- C,
97
- E
98
- ]), J = q > 0, Y = _.useMemo(() => {
99
- if (!J) return;
100
- let e = new Set(C.slice(q).map((e) => e[E]));
101
- return ({ payload: t, index: n, ...r }) => /* @__PURE__ */ y(pe, {
94
+ }), U = k === "gradient", Ye = oe(we), W = (e) => P?.[e]?.color ?? `var(--color-${s(e)})`, Xe = B || Object.values(P ?? {}).some((e) => e.showLabel), Ze = re(E), Qe = ie(D), $e = d(Ne), et = ne(S.map((e) => e[T]), L), G = g.useRef(null), K = ce(G, R, E, et.join("\0")), q = se(Xe ? c : void 0, K.margin), J = g.useMemo(() => F === void 0 ? -1 : S.findIndex((e) => e[T] === F), [
95
+ F,
96
+ S,
97
+ T
98
+ ]), Y = J > 0, X = g.useMemo(() => {
99
+ if (!Y) return;
100
+ let e = new Set(S.slice(J).map((e) => e[T]));
101
+ return ({ payload: t, index: n, ...r }) => /* @__PURE__ */ v(me, {
102
102
  ...r,
103
103
  fontSize: 12,
104
104
  className: e.has(t.value) ? "fill-[var(--ui-text-on-surface-disabled)]" : "fill-muted-foreground",
105
105
  children: L ? L(t.value, n) : t.value
106
106
  });
107
107
  }, [
108
+ Y,
108
109
  J,
109
- q,
110
- C,
111
- E,
110
+ S,
111
+ T,
112
112
  L
113
- ]), X = _.useMemo(() => J ? C.map((e) => ({
113
+ ]), tt = g.useMemo(() => Y ? S.map((e) => ({
114
114
  ...e,
115
- ...Object.fromEntries(T.map((t) => [`_proj_${t}`, e[t]]))
116
- })) : C, [
115
+ ...Object.fromEntries(w.map((t) => [`_proj_${t}`, e[t]]))
116
+ })) : S, [
117
+ Y,
118
+ S,
119
+ w
120
+ ]), Z = g.useMemo(() => {
121
+ if (!(J <= 0)) return S[J - 1]?.[T];
122
+ }, [
117
123
  J,
118
- C,
124
+ S,
119
125
  T
120
- ]), Z = _.useMemo(() => {
121
- if (!(q <= 0)) return C[q - 1]?.[E];
122
- }, [
123
- q,
124
- C,
125
- E
126
- ]), tt = _.useMemo(() => J && z ? ge(z) : void 0, [J, z]), nt = J ? tt ?? ((e) => /* @__PURE__ */ y(o, {
126
+ ]), nt = g.useMemo(() => Y && z ? _e(z) : void 0, [Y, z]), rt = Y ? nt ?? ((e) => /* @__PURE__ */ v(o, {
127
127
  active: e.active,
128
128
  label: e.label,
129
129
  payload: l(e.payload)
130
- })) : z ?? /* @__PURE__ */ y(o, {}), rt = J ? (e) => /* @__PURE__ */ y(i, {
130
+ })) : z ?? /* @__PURE__ */ v(o, {}), it = Y ? (e) => /* @__PURE__ */ v(i, {
131
131
  verticalAlign: e.verticalAlign,
132
+ fontSize: I,
132
133
  payload: l(e.payload)
133
- }) : /* @__PURE__ */ y(i, {}), Q = `area-gradient-${_.useId().replace(/:/g, "")}`, $ = `area-proj-${_.useId().replace(/:/g, "")}`;
134
- return /* @__PURE__ */ y("div", {
135
- ref: Ke,
136
- "data-layout": k,
137
- "data-fill": A,
138
- className: e(w({
139
- layout: k,
140
- fill: A
134
+ }) : /* @__PURE__ */ v(i, { fontSize: I }), Q = `area-gradient-${g.useId().replace(/:/g, "")}`, $ = `area-proj-${g.useId().replace(/:/g, "")}`;
135
+ return /* @__PURE__ */ v("div", {
136
+ ref: qe,
137
+ "data-layout": O,
138
+ "data-fill": k,
139
+ className: e(C({
140
+ layout: O,
141
+ fill: k
141
142
  }), t),
142
- ...Ge,
143
- children: /* @__PURE__ */ y(n, {
143
+ ...Ke,
144
+ children: /* @__PURE__ */ v(n, {
144
145
  ref: G,
145
- config: v,
146
- palette: S,
146
+ config: _,
147
+ palette: x,
147
148
  className: "size-full [&_.recharts-label]:fill-foreground",
148
- children: /* @__PURE__ */ b(ce, {
149
- data: X,
150
- margin: et,
149
+ children: /* @__PURE__ */ y(le, {
150
+ data: tt,
151
+ margin: q,
151
152
  children: [
152
- U && /* @__PURE__ */ y(ve, {
153
- dataKeys: T,
153
+ U && /* @__PURE__ */ v(ye, {
154
+ dataKeys: w,
154
155
  gradientId: Q,
155
156
  colorFor: W
156
157
  }),
157
- we && /* @__PURE__ */ y(ue, {
158
- horizontal: Pe ?? !0,
159
- vertical: Fe ?? !1,
160
- strokeDasharray: Ne ? "3 3" : void 0
158
+ Te && /* @__PURE__ */ v(de, {
159
+ horizontal: Fe ?? !0,
160
+ vertical: Ie ?? !1,
161
+ strokeDasharray: Pe ? "3 3" : void 0
161
162
  }),
162
- /* @__PURE__ */ y(me, {
163
- dataKey: E,
163
+ /* @__PURE__ */ v(he, {
164
+ dataKey: T,
164
165
  type: "category",
165
- hide: !De,
166
+ hide: !Oe,
166
167
  tickLine: !1,
167
168
  axisLine: !1,
168
169
  tickMargin: 8,
169
- tickFormatter: Y ? void 0 : L,
170
- tick: Y,
170
+ tickFormatter: X ? void 0 : L,
171
+ tick: X,
171
172
  angle: R,
172
- interval: Ae,
173
+ interval: je,
173
174
  textAnchor: te(R),
174
175
  height: K.height,
175
- label: Xe
176
+ label: Ze
176
177
  }),
177
- /* @__PURE__ */ y(he, {
178
+ /* @__PURE__ */ v(ge, {
178
179
  type: "number",
179
- hide: !Oe,
180
+ hide: !ke,
180
181
  tickLine: !1,
181
182
  axisLine: !1,
182
- unit: ye,
183
- tickFormatter: ke,
184
- tickCount: je,
185
- domain: Qe,
186
- width: O ? 72 : void 0,
187
- label: Ze
183
+ unit: be,
184
+ tickFormatter: Ae,
185
+ tickCount: Me,
186
+ domain: $e,
187
+ width: D ? 72 : void 0,
188
+ label: Qe
188
189
  }),
189
- Te && /* @__PURE__ */ y(a, { content: nt }),
190
- Ee && /* @__PURE__ */ y(r, { content: rt }),
191
- J && Z != null && /* @__PURE__ */ y(_e, {
192
- projectionStart: I,
190
+ Ee && /* @__PURE__ */ v(a, { content: rt }),
191
+ De && /* @__PURE__ */ v(r, { content: it }),
192
+ Y && Z != null && /* @__PURE__ */ v(ve, {
193
+ projectionStart: F,
193
194
  prevTick: Z,
194
195
  clipId: $
195
196
  }),
196
- T.map((e) => {
197
- let t = F?.[e], n = t?.showDots ?? P, r = t?.dotSize ?? be, i = xe ?? n, a = t?.showLabel ?? B, o = t?.labelPosition ?? qe;
198
- return /* @__PURE__ */ y(x, {
199
- type: t?.curveType ?? j ?? "monotone",
197
+ w.map((e) => {
198
+ let t = P?.[e], n = t?.showDots ?? N, r = t?.dotSize ?? xe, i = Se ?? n, a = t?.showLabel ?? B, o = t?.labelPosition ?? Je;
199
+ return /* @__PURE__ */ v(b, {
200
+ type: t?.curveType ?? A ?? "monotone",
200
201
  dataKey: e,
201
202
  stackId: H ? "a" : void 0,
202
203
  stroke: W(e),
203
- strokeWidth: t?.strokeWidth ?? M,
204
+ strokeWidth: t?.strokeWidth ?? j,
204
205
  strokeDasharray: t?.dashed ? "5 5" : void 0,
205
206
  fill: U ? `url(#${Q}-${s(e)})` : W(e),
206
- fillOpacity: t?.fillOpacity ?? (U ? 1 : N),
207
+ fillOpacity: t?.fillOpacity ?? (U ? 1 : M),
207
208
  dot: n ? { r } : !1,
208
209
  activeDot: i ? { r: r + 2 } : !1,
209
- connectNulls: Se,
210
- clipPath: J ? `url(#${$}-actual)` : void 0,
210
+ connectNulls: Ce,
211
+ clipPath: Y ? `url(#${$}-actual)` : void 0,
211
212
  ...V,
212
- children: a && /* @__PURE__ */ y(de, {
213
+ children: a && /* @__PURE__ */ v(fe, {
213
214
  dataKey: e,
214
215
  position: o,
215
- formatter: ae(Ve),
216
+ formatter: ae(He),
216
217
  className: h(o, { translucentSeries: !0 }),
217
218
  fontSize: 12
218
219
  })
219
220
  }, e);
220
221
  }),
221
- J && T.map((e) => {
222
- let t = F?.[e];
223
- return /* @__PURE__ */ y(x, {
224
- type: t?.curveType ?? j ?? "monotone",
222
+ Y && w.map((e) => {
223
+ let t = P?.[e];
224
+ return /* @__PURE__ */ v(b, {
225
+ type: t?.curveType ?? A ?? "monotone",
225
226
  dataKey: `_proj_${e}`,
226
227
  name: e,
227
228
  stackId: H ? "proj" : void 0,
228
229
  stroke: W(e),
229
- strokeWidth: t?.strokeWidth ?? M,
230
+ strokeWidth: t?.strokeWidth ?? j,
230
231
  strokeDasharray: "5 5",
231
232
  fill: U ? `url(#${Q}-${s(e)})` : W(e),
232
- fillOpacity: t?.fillOpacity ?? (U ? 1 : N),
233
+ fillOpacity: t?.fillOpacity ?? (U ? 1 : M),
233
234
  dot: !1,
234
235
  activeDot: !1,
235
236
  clipPath: `url(#${$}-projection)`,
@@ -238,19 +239,19 @@ var T = _.forwardRef(({ className: t, config: v, palette: S, data: C, dataKeys:
238
239
  ...V
239
240
  }, `_proj_${e}`);
240
241
  }),
241
- Je.map((e, t) => {
242
- let n = m(e, C, T);
243
- return n === void 0 ? null : /* @__PURE__ */ y(fe, {
242
+ Ye.map((e, t) => {
243
+ let n = m(e, S, w);
244
+ return n === void 0 ? null : /* @__PURE__ */ v(pe, {
244
245
  y: n,
245
246
  ...ee(e.label, e.labelPosition)
246
247
  }, `${e.label ?? "ref"}-${t}`);
247
248
  }),
248
- He && /* @__PURE__ */ y(le, {
249
- dataKey: E,
249
+ Ue && /* @__PURE__ */ v(ue, {
250
+ dataKey: T,
250
251
  tickFormatter: L,
251
252
  ...f({
252
- brushHeight: Ue,
253
- brushAriaLabel: We
253
+ brushHeight: We,
254
+ brushAriaLabel: Ge
254
255
  })
255
256
  })
256
257
  ]
@@ -258,8 +259,8 @@ var T = _.forwardRef(({ className: t, config: v, palette: S, data: C, dataKeys:
258
259
  })
259
260
  });
260
261
  });
261
- T.displayName = "AreaChart";
262
+ w.displayName = "AreaChart";
262
263
  //#endregion
263
- export { T as AreaChart, w as areaChartVariants };
264
+ export { w as AreaChart, C as areaChartVariants };
264
265
 
265
266
  //# sourceMappingURL=area-chart.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"area-chart.js","names":[],"sources":["../../../../src/components/ui/area-chart/area-chart.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n Area,\n AreaChart as RechartsAreaChart,\n Brush,\n CartesianGrid,\n LabelList,\n ReferenceLine,\n Text,\n XAxis,\n YAxis,\n useXAxisScale,\n usePlotArea,\n} from 'recharts';\n\nimport { cn } from '@/lib/utils';\nimport {\n CHART_LABEL_FONT_SIZE,\n CHART_LABEL_MARGIN,\n ChartContainer,\n ChartLegend,\n ChartLegendContent,\n ChartTooltip,\n ChartTooltipContent,\n resolveAnimation,\n resolveAxisDomain,\n resolveBrushProps,\n resolveCartesianLabelPosition,\n dropProjectionPayload,\n resolveChartReferenceValue,\n resolveLabelFillClass,\n resolveReferenceLineProps,\n resolveRotatedTickAnchor,\n resolveXAxisTitle,\n resolveYAxisTitle,\n toLabelFormatter,\n toReferenceLineList,\n type ChartConfig,\n type ChartPalette,\n type ChartLegendContentProps,\n type ChartTooltipContentProps,\n type CartesianChartProps,\n type ChartAnimationProps,\n type ChartBrushProps,\n type ChartCurveType,\n type ChartDataLabelProps,\n type ChartReferenceLine,\n toCssKey,\n type CartesianLabelPosition,\n} from '../chart';\nimport {\n mergeXAxisLayoutMargin,\n useXAxisLayout,\n} from '../chart/use-x-axis-layout';\nimport { resolveXAxisTickLabels } from '../chart/chart-format';\n\n// A typed recharts composition over the shared `Chart` primitives. The two CVA\n// axes are the design's Area-chart variant set: `layout` (independent\n// overlapping areas vs summed on a shared stack) and `fill` (a flat translucent\n// fill vs a vertical gradient). The classes stay empty because recharts' SVG —\n// not CSS — draws the areas: `layout` drives each `<Area>`'s `stackId` and `fill`\n// drives whether it paints from a `<linearGradient>` def or a flat token color.\n// CVA is kept so the variant set is a first-class, spec-conformant part of the\n// API (matched against ui-spec's api.yaml enums) and exposed via `VariantProps`;\n// the resolved values are also mirrored onto `data-layout` / `data-fill`.\nconst areaChartVariants = cva('', {\n variants: {\n layout: {\n single: '',\n stacked: '',\n },\n fill: {\n solid: '',\n gradient: '',\n },\n },\n defaultVariants: {\n layout: 'single',\n fill: 'solid',\n },\n});\n\n/**\n * Style override for one series, keyed by its `dataKeys` entry. Anything left\n * unset falls back to the chart-wide prop, so an entry only states what differs\n * — e.g. a projection band that reads fainter than the actuals beside it.\n */\nexport interface AreaChartAreaSettings {\n /** Stroke and fill color. Defaults to the series' `config` color. */\n color?: string;\n /** Width of this series' top border. Defaults to the chart's `strokeWidth`. */\n strokeWidth?: number;\n /** Dash this series' top border. */\n dashed?: boolean;\n /** Interpolation for this series only. Defaults to the chart's `curve`. */\n curveType?: ChartCurveType;\n /**\n * Fill opacity for this series. Under `fill=\"gradient\"` it scales the\n * gradient's own alpha rather than replacing it.\n */\n fillOpacity?: number;\n /** Render this series' per-point dots. Defaults to the chart's `showDots`. */\n showDots?: boolean;\n /** Dot radius for this series, in px. Defaults to the chart's `dotSize`. */\n dotSize?: number;\n /** Show/hide this series' value labels, overriding the chart's `showLabels`. */\n showLabel?: boolean;\n /** Position of this series' value labels. Defaults to the chart's `labelPosition`. */\n labelPosition?: CartesianLabelPosition;\n}\n\nexport interface AreaChartProps\n extends Omit<React.ComponentProps<'div'>, 'children'>,\n VariantProps<typeof areaChartVariants>,\n CartesianChartProps,\n ChartAnimationProps,\n ChartBrushProps,\n ChartDataLabelProps {\n /**\n * The dataviz palette this chart's series are painted from. Series that\n * state no `color` of their own take a stop of it. See `ChartPalette`.\n */\n palette?: ChartPalette;\n /** Row-per-point data. Each object holds the category key + one numeric field per series (`null` breaks the area unless `connectNulls`). */\n data: ReadonlyArray<Record<string, string | number | null>>;\n /**\n * Per-series map of `label` / `icon` / `tone` (from the shared `Chart`\n * primitives). Series take their colour from the container's `palette`; each\n * entry maps a key to a `label` and an optional `tone`.\n */\n config: ChartConfig;\n /** Series to plot — one `<Area>` per key. Each must exist in `config` and in every data row. */\n dataKeys: string[];\n /** Category axis key (the shared dimension across rows, e.g. `\"month\"`). */\n xKey: string;\n /** Interpolation between points. */\n curve?: ChartCurveType;\n /** Stroke width of each area's top border. */\n strokeWidth?: number;\n /** Flat-fill opacity — used only when `fill=\"solid\"` (gradient controls its own stops). */\n fillOpacity?: number;\n /** Render a dot at each data point. */\n showDots?: boolean;\n /** Radius of each point's dot, in px. Its hover dot is 2px larger. */\n dotSize?: number;\n /**\n * Enlarge the hovered point's dot. Defaults to following `showDots`, so pass\n * it explicitly to get hover dots on a dot-less area (`showDots={false}` with\n * `showActiveDot`) or a static-only area (dots without the hover one).\n */\n showActiveDot?: boolean;\n /** Bridge `null` gaps in the data instead of breaking the area. */\n connectNulls?: boolean;\n /**\n * Per-series style overrides, keyed by `dataKeys` entry. Series with no entry\n * render from the chart-wide props.\n */\n areaSettings?: Record<string, AreaChartAreaSettings>;\n /**\n * One or more dashed reference/average lines on the value axis — a target, a\n * threshold, or a series mean. Pass a single object or an array to draw\n * several at once. On a stacked chart the value is read against the stack's\n * axis, not one series.\n */\n referenceLine?: ChartReferenceLine | ChartReferenceLine[];\n /**\n * The category value (matching an `xKey` entry) at which the projection\n * zone starts. Ticks from this point onward render in the disabled text\n * color (`--ui-text-on-surface-disabled`). The chart data and series\n * themselves are not affected — only the X-axis tick appearance changes.\n *\n * Use this when displaying a forecast/projection range where future\n * data points should be visually de-emphasized on the axis.\n */\n projectionStart?: string | number;\n showLegend?: boolean;\n /** Position of the value labels when `showLabels` is on. Defaults to `top`. */\n labelPosition?: CartesianLabelPosition;\n}\n\ntype TooltipContentType = NonNullable<React.ComponentProps<typeof ChartTooltip>['content']>;\ntype TooltipContentFn = Extract<TooltipContentType, (...args: never[]) => unknown>;\ntype TooltipRenderProps = Parameters<TooltipContentFn>[0];\ntype LegendContentFn = Extract<\n React.ComponentProps<typeof ChartLegend>['content'],\n (...args: never[]) => unknown\n>;\ntype LegendContentProps = Parameters<LegendContentFn>[0];\n\nfunction createProjectionTooltip(tooltipContent: TooltipContentType) {\n return function ProjectionTooltip(props: TooltipRenderProps) {\n const merged = {\n ...props,\n payload: dropProjectionPayload(props.payload),\n } as TooltipRenderProps;\n if (typeof tooltipContent === 'function') {\n const Comp = tooltipContent as React.FunctionComponent<TooltipRenderProps>;\n return <Comp {...merged} />;\n }\n // Element-form tooltip: cloneElement is the React-idiomatic way to\n // re-render an existing element with new props (preserves refs & keys).\n return React.cloneElement(tooltipContent, merged);\n };\n}\n\n// Renders two <clipPath> defs (actual / projection) and a dashed separator\n// line at the visual midpoint between the last actual tick and the first\n// projection tick. Both the actual and projection <Area> series reference\n// these clip regions, so the exact same curve renders on each side — no kink.\nfunction ProjectionClip({\n projectionStart,\n prevTick,\n clipId,\n}: {\n projectionStart: string | number;\n prevTick: string | number;\n clipId: string;\n}) {\n const xScale = useXAxisScale();\n const plotArea = usePlotArea();\n if (!xScale || !plotArea) return null;\n const prevX = xScale(prevTick as string);\n const currX = xScale(projectionStart as string);\n if (prevX == null || currX == null) return null;\n const midX = (prevX + currX) / 2;\n const { x, y, width, height } = plotArea;\n return (\n <>\n <defs>\n <clipPath id={`${clipId}-actual`}>\n <rect x={x} y={y} width={midX - x} height={height} />\n </clipPath>\n <clipPath id={`${clipId}-projection`}>\n <rect x={midX} y={y} width={x + width - midX} height={height} />\n </clipPath>\n </defs>\n <line\n x1={midX}\n y1={y}\n x2={midX}\n y2={y + height}\n stroke=\"var(--ui-border-on-surface-border)\"\n strokeDasharray=\"4 4\"\n />\n </>\n );\n}\n\n/**\n * One top-to-bottom fade per series, referenced by each `<Area>`'s `fill`.\n *\n * The ids are scoped by `gradientId` because SVG `<defs>` ids are\n * document-global: two AreaCharts on the same page would otherwise share (and\n * silently overwrite) each other's stops.\n */\nfunction AreaFillGradients({\n dataKeys,\n gradientId,\n colorFor,\n}: {\n dataKeys: string[];\n gradientId: string;\n colorFor: (key: string) => string;\n}) {\n return (\n <defs>\n {dataKeys.map((key) => (\n <linearGradient\n key={key}\n id={`${gradientId}-${toCssKey(key)}`}\n x1=\"0\"\n y1=\"0\"\n x2=\"0\"\n y2=\"1\"\n >\n <stop offset=\"5%\" stopColor={colorFor(key)} stopOpacity={0.8} />\n <stop offset=\"95%\" stopColor={colorFor(key)} stopOpacity={0.1} />\n </linearGradient>\n ))}\n </defs>\n );\n}\n\nconst AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>(\n (\n {\n className,\n config,\n palette,\n data,\n dataKeys,\n xKey,\n xAxisLabel,\n yAxisLabel,\n yUnit,\n layout = 'single',\n fill = 'solid',\n curve = 'monotone',\n strokeWidth = 2,\n fillOpacity = 0.4,\n showDots = false,\n dotSize = 3,\n showActiveDot,\n connectNulls = false,\n areaSettings,\n referenceLine,\n projectionStart,\n showGrid = true,\n showTooltip = true,\n showLegend = true,\n showXAxis = true,\n showYAxis = true,\n xTickFormatter,\n yTickFormatter,\n xAxisAngle,\n xAxisInterval,\n yAxisTickCount,\n yAxisDomain,\n gridDashed,\n gridHorizontal,\n gridVertical,\n tooltipContent,\n animate,\n animationDuration,\n animationBegin,\n animationEasing,\n showLabels = false,\n labelPosition,\n labelFormatter,\n showBrush = false,\n brushHeight,\n brushAriaLabel,\n ...props\n },\n ref\n ) => {\n const animation = resolveAnimation({\n animate,\n animationDuration,\n animationBegin,\n animationEasing,\n });\n const isStacked = layout === 'stacked';\n const areaLabelPosition = resolveCartesianLabelPosition({\n labelPosition,\n isStacked,\n });\n const isGradient = fill === 'gradient';\n const referenceLines = toReferenceLineList(referenceLine);\n\n // A series' `color` override has to reach its gradient stops too, or a\n // gradient-filled chart would keep painting the `config` color.\n const colorFor = (key: string) =>\n areaSettings?.[key]?.color ?? `var(--color-${toCssKey(key)})`;\n\n // The plot inset is needed as soon as *any* series carries outside labels —\n // a per-series `showLabel` counts, not only the chart-wide `showLabels`.\n const hasLabels =\n showLabels ||\n Object.values(areaSettings ?? {}).some((settings) => settings.showLabel);\n\n // Axis titles: the X title sits below the ticks; the Y title is rotated in\n // the left gutter. Passed to recharts' native `label` (themed via the\n // `.recharts-label` fill selector on the container).\n const xAxisTitle = resolveXAxisTitle(xAxisLabel);\n const yAxisTitle = resolveYAxisTitle(yAxisLabel);\n\n const yDomain = resolveAxisDomain(yAxisDomain);\n\n const xAxisTickLabels = resolveXAxisTickLabels(\n data.map((row) => row[xKey]),\n xTickFormatter\n );\n const chartContainerRef = React.useRef<HTMLDivElement>(null);\n const xAxisLayout = useXAxisLayout(\n chartContainerRef,\n xAxisAngle,\n xAxisLabel,\n xAxisTickLabels.join('\\u0000')\n );\n const chartMargin = mergeXAxisLayoutMargin(\n hasLabels ? CHART_LABEL_MARGIN : undefined,\n xAxisLayout.margin\n );\n\n const projStartIndex = React.useMemo(() => {\n if (projectionStart === undefined) return -1;\n return data.findIndex((row) => row[xKey] === projectionStart);\n }, [projectionStart, data, xKey]);\n // projStartIndex === 0 (boundary at the first tick) is excluded: there is no\n // \"previous tick\" to define the clip midpoint, so clipPath defs can't be\n // emitted, which would make all series invisible. Treat it as no-projection.\n const hasProjection = projStartIndex > 0;\n\n // Build the projection tick renderer when projectionStart is set. Each tick\n // past (and including) the start value renders in the disabled text color;\n // ticks before it stay in the muted-foreground color. Returns undefined when\n // projectionStart is absent or not found so recharts uses its own renderer.\n const projectionTick = React.useMemo(() => {\n if (!hasProjection) return undefined;\n const projectedValues = new Set(\n data.slice(projStartIndex).map((row) => row[xKey])\n );\n const ProjectionTick = ({\n payload,\n index,\n ...tickProps\n }: {\n payload: { value: string | number };\n index?: number;\n [key: string]: unknown;\n }) => (\n <Text\n {...(tickProps as React.ComponentProps<typeof Text>)}\n fontSize={12}\n className={\n projectedValues.has(payload.value)\n ? 'fill-[var(--ui-text-on-surface-disabled)]'\n : 'fill-muted-foreground'\n }\n >\n {xTickFormatter\n ? xTickFormatter(payload.value as never, index)\n : payload.value}\n </Text>\n );\n return ProjectionTick;\n }, [hasProjection, projStartIndex, data, xKey, xTickFormatter]);\n\n // When projection is active, copy each series value to `_proj_${key}` — same\n // data, no nulls. Both the actual and projection <Area> see the identical curve;\n // the clipPath (computed in ProjectionClip) restricts which half each paints.\n const chartData = React.useMemo(() => {\n if (!hasProjection) return data;\n return data.map((row) => ({\n ...row,\n ...Object.fromEntries(\n dataKeys.map((k) => [`_proj_${k}`, row[k]])\n ),\n }));\n }, [hasProjection, data, dataKeys]);\n\n // The tick immediately before the projection boundary — needed to compute the\n // visual midpoint where the clip edge and separator line are placed.\n const prevTickValue = React.useMemo(() => {\n if (projStartIndex <= 0) return undefined;\n return data[projStartIndex - 1]?.[xKey];\n }, [projStartIndex, data, xKey]);\n\n const projectionTooltip = React.useMemo(\n () =>\n hasProjection && tooltipContent\n ? createProjectionTooltip(tooltipContent)\n : undefined,\n [hasProjection, tooltipContent]\n );\n\n const tooltipNode = hasProjection\n ? (projectionTooltip ??\n ((tp: TooltipRenderProps) => (\n <ChartTooltipContent\n active={tp.active}\n label={tp.label}\n payload={\n dropProjectionPayload(\n tp.payload\n ) as ChartTooltipContentProps['payload']\n }\n />\n )))\n : (tooltipContent ?? <ChartTooltipContent />);\n\n const legendNode = hasProjection\n ? (lp: LegendContentProps) => (\n <ChartLegendContent\n verticalAlign={lp.verticalAlign}\n payload={\n dropProjectionPayload(\n lp.payload\n ) as ChartLegendContentProps['payload']\n }\n />\n )\n : <ChartLegendContent />;\n\n // recharts renders SVG <defs> once per chart; the gradient/clip ids must be\n // unique across chart instances on the page. useId gives a stable per-instance\n // id; strip the colons React emits (invalid in a url(#…) reference).\n const gradientId = `area-gradient-${React.useId().replace(/:/g, '')}`;\n const clipId = `area-proj-${React.useId().replace(/:/g, '')}`;\n\n return (\n <div\n ref={ref}\n data-layout={layout}\n data-fill={fill}\n className={cn(areaChartVariants({ layout, fill }), className)}\n {...props}\n >\n <ChartContainer\n ref={chartContainerRef}\n config={config}\n palette={palette}\n className=\"size-full [&_.recharts-label]:fill-foreground\"\n >\n <RechartsAreaChart\n data={chartData as readonly unknown[]}\n margin={chartMargin}\n >\n {isGradient && (\n <AreaFillGradients\n dataKeys={dataKeys}\n gradientId={gradientId}\n colorFor={colorFor}\n />\n )}\n {showGrid && (\n <CartesianGrid\n horizontal={gridHorizontal ?? true}\n vertical={gridVertical ?? false}\n strokeDasharray={gridDashed ? '3 3' : undefined}\n />\n )}\n <XAxis\n dataKey={xKey}\n type=\"category\"\n hide={!showXAxis}\n tickLine={false}\n axisLine={false}\n tickMargin={8}\n tickFormatter={projectionTick ? undefined : xTickFormatter}\n tick={projectionTick}\n angle={xAxisAngle}\n interval={xAxisInterval}\n textAnchor={resolveRotatedTickAnchor(xAxisAngle)}\n height={xAxisLayout.height}\n label={xAxisTitle}\n />\n <YAxis\n type=\"number\"\n hide={!showYAxis}\n tickLine={false}\n axisLine={false}\n unit={yUnit}\n tickFormatter={yTickFormatter}\n tickCount={yAxisTickCount}\n domain={yDomain}\n width={yAxisLabel ? 72 : undefined}\n label={yAxisTitle}\n />\n {showTooltip && <ChartTooltip content={tooltipNode} />}\n {showLegend && <ChartLegend content={legendNode} />}\n {hasProjection && prevTickValue != null && (\n <ProjectionClip\n projectionStart={projectionStart!}\n prevTick={prevTickValue}\n clipId={clipId}\n />\n )}\n {dataKeys.map((key) => {\n const settings = areaSettings?.[key];\n const seriesDots = settings?.showDots ?? showDots;\n const dotRadius = settings?.dotSize ?? dotSize;\n // The hover dot follows the static dots unless asked otherwise, so\n // a chart that sets neither renders exactly as before.\n const activeDot = showActiveDot ?? seriesDots;\n const seriesLabel = settings?.showLabel ?? showLabels;\n const seriesLabelPosition =\n settings?.labelPosition ?? areaLabelPosition;\n return (\n <Area\n key={key}\n type={settings?.curveType ?? curve ?? 'monotone'}\n dataKey={key}\n stackId={isStacked ? 'a' : undefined}\n stroke={colorFor(key)}\n strokeWidth={settings?.strokeWidth ?? strokeWidth}\n strokeDasharray={settings?.dashed ? '5 5' : undefined}\n fill={\n isGradient ? `url(#${gradientId}-${toCssKey(key)})` : colorFor(key)\n }\n fillOpacity={\n settings?.fillOpacity ?? (isGradient ? 1 : fillOpacity)\n }\n dot={seriesDots ? { r: dotRadius } : false}\n activeDot={activeDot ? { r: dotRadius + 2 } : false}\n connectNulls={connectNulls}\n clipPath={hasProjection ? `url(#${clipId}-actual)` : undefined}\n {...animation}\n >\n {seriesLabel && (\n <LabelList\n dataKey={key}\n position={seriesLabelPosition}\n formatter={toLabelFormatter(labelFormatter)}\n className={resolveLabelFillClass(seriesLabelPosition, {\n translucentSeries: true,\n })}\n fontSize={CHART_LABEL_FONT_SIZE}\n />\n )}\n </Area>\n );\n })}\n {hasProjection &&\n dataKeys.map((key) => {\n const settings = areaSettings?.[key];\n return (\n <Area\n key={`_proj_${key}`}\n type={settings?.curveType ?? curve ?? 'monotone'}\n dataKey={`_proj_${key}`}\n name={key}\n stackId={isStacked ? 'proj' : undefined}\n stroke={colorFor(key)}\n strokeWidth={settings?.strokeWidth ?? strokeWidth}\n strokeDasharray=\"5 5\"\n fill={\n isGradient ? `url(#${gradientId}-${toCssKey(key)})` : colorFor(key)\n }\n fillOpacity={\n settings?.fillOpacity ?? (isGradient ? 1 : fillOpacity)\n }\n dot={false}\n activeDot={false}\n clipPath={`url(#${clipId}-projection)`}\n legendType=\"none\"\n tooltipType=\"none\"\n {...animation}\n />\n );\n })}\n {/* Annotations draw over the series they describe. */}\n {referenceLines.map((ref, index) => {\n const value = resolveChartReferenceValue(ref, data, dataKeys);\n if (value === undefined) return null;\n return (\n <ReferenceLine\n key={`${ref.label ?? 'ref'}-${index}`}\n y={value}\n {...resolveReferenceLineProps(ref.label, ref.labelPosition)}\n />\n );\n })}\n {showBrush && (\n <Brush\n dataKey={xKey}\n tickFormatter={xTickFormatter}\n {...resolveBrushProps({ brushHeight, brushAriaLabel })}\n />\n )}\n </RechartsAreaChart>\n </ChartContainer>\n </div>\n );\n }\n);\nAreaChart.displayName = 'AreaChart';\n\nexport { AreaChart, areaChartVariants };\n"],"mappings":"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"}
1
+ {"version":3,"file":"area-chart.js","names":[],"sources":["../../../../src/components/ui/area-chart/area-chart.tsx"],"sourcesContent":["'use client';\n\nimport * as React from 'react';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport {\n Area,\n AreaChart as RechartsAreaChart,\n Brush,\n CartesianGrid,\n LabelList,\n ReferenceLine,\n Text,\n XAxis,\n YAxis,\n useXAxisScale,\n usePlotArea,\n} from 'recharts';\n\nimport { cn } from '@/lib/utils';\nimport {\n CHART_LABEL_FONT_SIZE,\n CHART_LABEL_MARGIN,\n ChartContainer,\n ChartLegend,\n ChartLegendContent,\n ChartTooltip,\n ChartTooltipContent,\n resolveAnimation,\n resolveAxisDomain,\n resolveBrushProps,\n resolveCartesianLabelPosition,\n dropProjectionPayload,\n resolveChartReferenceValue,\n resolveLabelFillClass,\n resolveReferenceLineProps,\n resolveRotatedTickAnchor,\n resolveXAxisTitle,\n resolveYAxisTitle,\n toLabelFormatter,\n toReferenceLineList,\n type ChartConfig,\n type ChartLegendFontSize,\n type ChartPalette,\n type ChartLegendContentProps,\n type ChartTooltipContentProps,\n type CartesianChartProps,\n type ChartAnimationProps,\n type ChartBrushProps,\n type ChartCurveType,\n type ChartDataLabelProps,\n type ChartReferenceLine,\n toCssKey,\n type CartesianLabelPosition,\n} from '../chart';\nimport {\n mergeXAxisLayoutMargin,\n useXAxisLayout,\n} from '../chart/use-x-axis-layout';\nimport { resolveXAxisTickLabels } from '../chart/chart-format';\n\n// A typed recharts composition over the shared `Chart` primitives. The two CVA\n// axes are the design's Area-chart variant set: `layout` (independent\n// overlapping areas vs summed on a shared stack) and `fill` (a flat translucent\n// fill vs a vertical gradient). The classes stay empty because recharts' SVG —\n// not CSS — draws the areas: `layout` drives each `<Area>`'s `stackId` and `fill`\n// drives whether it paints from a `<linearGradient>` def or a flat token color.\n// CVA is kept so the variant set is a first-class, spec-conformant part of the\n// API (matched against ui-spec's api.yaml enums) and exposed via `VariantProps`;\n// the resolved values are also mirrored onto `data-layout` / `data-fill`.\nconst areaChartVariants = cva('', {\n variants: {\n layout: {\n single: '',\n stacked: '',\n },\n fill: {\n solid: '',\n gradient: '',\n },\n },\n defaultVariants: {\n layout: 'single',\n fill: 'solid',\n },\n});\n\n/**\n * Style override for one series, keyed by its `dataKeys` entry. Anything left\n * unset falls back to the chart-wide prop, so an entry only states what differs\n * — e.g. a projection band that reads fainter than the actuals beside it.\n */\nexport interface AreaChartAreaSettings {\n /** Stroke and fill color. Defaults to the series' `config` color. */\n color?: string;\n /** Width of this series' top border. Defaults to the chart's `strokeWidth`. */\n strokeWidth?: number;\n /** Dash this series' top border. */\n dashed?: boolean;\n /** Interpolation for this series only. Defaults to the chart's `curve`. */\n curveType?: ChartCurveType;\n /**\n * Fill opacity for this series. Under `fill=\"gradient\"` it scales the\n * gradient's own alpha rather than replacing it.\n */\n fillOpacity?: number;\n /** Render this series' per-point dots. Defaults to the chart's `showDots`. */\n showDots?: boolean;\n /** Dot radius for this series, in px. Defaults to the chart's `dotSize`. */\n dotSize?: number;\n /** Show/hide this series' value labels, overriding the chart's `showLabels`. */\n showLabel?: boolean;\n /** Position of this series' value labels. Defaults to the chart's `labelPosition`. */\n labelPosition?: CartesianLabelPosition;\n}\n\nexport interface AreaChartProps\n extends Omit<React.ComponentProps<'div'>, 'children'>,\n VariantProps<typeof areaChartVariants>,\n CartesianChartProps,\n ChartAnimationProps,\n ChartBrushProps,\n ChartDataLabelProps {\n /**\n * The dataviz palette this chart's series are painted from. Series that\n * state no `color` of their own take a stop of it. See `ChartPalette`.\n */\n palette?: ChartPalette;\n /** Row-per-point data. Each object holds the category key + one numeric field per series (`null` breaks the area unless `connectNulls`). */\n data: ReadonlyArray<Record<string, string | number | null>>;\n /**\n * Per-series map of `label` / `icon` / `tone` (from the shared `Chart`\n * primitives). Series take their colour from the container's `palette`; each\n * entry maps a key to a `label` and an optional `tone`.\n */\n config: ChartConfig;\n /** Series to plot — one `<Area>` per key. Each must exist in `config` and in every data row. */\n dataKeys: string[];\n /** Category axis key (the shared dimension across rows, e.g. `\"month\"`). */\n xKey: string;\n /** Interpolation between points. */\n curve?: ChartCurveType;\n /** Stroke width of each area's top border. */\n strokeWidth?: number;\n /** Flat-fill opacity — used only when `fill=\"solid\"` (gradient controls its own stops). */\n fillOpacity?: number;\n /** Render a dot at each data point. */\n showDots?: boolean;\n /** Radius of each point's dot, in px. Its hover dot is 2px larger. */\n dotSize?: number;\n /**\n * Enlarge the hovered point's dot. Defaults to following `showDots`, so pass\n * it explicitly to get hover dots on a dot-less area (`showDots={false}` with\n * `showActiveDot`) or a static-only area (dots without the hover one).\n */\n showActiveDot?: boolean;\n /** Bridge `null` gaps in the data instead of breaking the area. */\n connectNulls?: boolean;\n /**\n * Per-series style overrides, keyed by `dataKeys` entry. Series with no entry\n * render from the chart-wide props.\n */\n areaSettings?: Record<string, AreaChartAreaSettings>;\n /**\n * One or more dashed reference/average lines on the value axis — a target, a\n * threshold, or a series mean. Pass a single object or an array to draw\n * several at once. On a stacked chart the value is read against the stack's\n * axis, not one series.\n */\n referenceLine?: ChartReferenceLine | ChartReferenceLine[];\n /**\n * The category value (matching an `xKey` entry) at which the projection\n * zone starts. Ticks from this point onward render in the disabled text\n * color (`--ui-text-on-surface-disabled`). The chart data and series\n * themselves are not affected — only the X-axis tick appearance changes.\n *\n * Use this when displaying a forecast/projection range where future\n * data points should be visually de-emphasized on the axis.\n */\n projectionStart?: string | number;\n showLegend?: boolean;\n /**\n * Font size of the legend text. Defaults to `'xs'` — the size the legend has\n * always rendered at. See `ChartLegendFontSize`.\n */\n legendFontSize?: ChartLegendFontSize;\n /** Position of the value labels when `showLabels` is on. Defaults to `top`. */\n labelPosition?: CartesianLabelPosition;\n}\n\ntype TooltipContentType = NonNullable<React.ComponentProps<typeof ChartTooltip>['content']>;\ntype TooltipContentFn = Extract<TooltipContentType, (...args: never[]) => unknown>;\ntype TooltipRenderProps = Parameters<TooltipContentFn>[0];\ntype LegendContentFn = Extract<\n React.ComponentProps<typeof ChartLegend>['content'],\n (...args: never[]) => unknown\n>;\ntype LegendContentProps = Parameters<LegendContentFn>[0];\n\nfunction createProjectionTooltip(tooltipContent: TooltipContentType) {\n return function ProjectionTooltip(props: TooltipRenderProps) {\n const merged = {\n ...props,\n payload: dropProjectionPayload(props.payload),\n } as TooltipRenderProps;\n if (typeof tooltipContent === 'function') {\n const Comp = tooltipContent as React.FunctionComponent<TooltipRenderProps>;\n return <Comp {...merged} />;\n }\n // Element-form tooltip: cloneElement is the React-idiomatic way to\n // re-render an existing element with new props (preserves refs & keys).\n return React.cloneElement(tooltipContent, merged);\n };\n}\n\n// Renders two <clipPath> defs (actual / projection) and a dashed separator\n// line at the visual midpoint between the last actual tick and the first\n// projection tick. Both the actual and projection <Area> series reference\n// these clip regions, so the exact same curve renders on each side — no kink.\nfunction ProjectionClip({\n projectionStart,\n prevTick,\n clipId,\n}: {\n projectionStart: string | number;\n prevTick: string | number;\n clipId: string;\n}) {\n const xScale = useXAxisScale();\n const plotArea = usePlotArea();\n if (!xScale || !plotArea) return null;\n const prevX = xScale(prevTick as string);\n const currX = xScale(projectionStart as string);\n if (prevX == null || currX == null) return null;\n const midX = (prevX + currX) / 2;\n const { x, y, width, height } = plotArea;\n return (\n <>\n <defs>\n <clipPath id={`${clipId}-actual`}>\n <rect x={x} y={y} width={midX - x} height={height} />\n </clipPath>\n <clipPath id={`${clipId}-projection`}>\n <rect x={midX} y={y} width={x + width - midX} height={height} />\n </clipPath>\n </defs>\n <line\n x1={midX}\n y1={y}\n x2={midX}\n y2={y + height}\n stroke=\"var(--ui-border-on-surface-border)\"\n strokeDasharray=\"4 4\"\n />\n </>\n );\n}\n\n/**\n * One top-to-bottom fade per series, referenced by each `<Area>`'s `fill`.\n *\n * The ids are scoped by `gradientId` because SVG `<defs>` ids are\n * document-global: two AreaCharts on the same page would otherwise share (and\n * silently overwrite) each other's stops.\n */\nfunction AreaFillGradients({\n dataKeys,\n gradientId,\n colorFor,\n}: {\n dataKeys: string[];\n gradientId: string;\n colorFor: (key: string) => string;\n}) {\n return (\n <defs>\n {dataKeys.map((key) => (\n <linearGradient\n key={key}\n id={`${gradientId}-${toCssKey(key)}`}\n x1=\"0\"\n y1=\"0\"\n x2=\"0\"\n y2=\"1\"\n >\n <stop offset=\"5%\" stopColor={colorFor(key)} stopOpacity={0.8} />\n <stop offset=\"95%\" stopColor={colorFor(key)} stopOpacity={0.1} />\n </linearGradient>\n ))}\n </defs>\n );\n}\n\nconst AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>(\n (\n {\n className,\n config,\n palette,\n data,\n dataKeys,\n xKey,\n xAxisLabel,\n yAxisLabel,\n yUnit,\n layout = 'single',\n fill = 'solid',\n curve = 'monotone',\n strokeWidth = 2,\n fillOpacity = 0.4,\n showDots = false,\n dotSize = 3,\n showActiveDot,\n connectNulls = false,\n areaSettings,\n referenceLine,\n projectionStart,\n showGrid = true,\n showTooltip = true,\n showLegend = true,\n legendFontSize,\n showXAxis = true,\n showYAxis = true,\n xTickFormatter,\n yTickFormatter,\n xAxisAngle,\n xAxisInterval,\n yAxisTickCount,\n yAxisDomain,\n gridDashed,\n gridHorizontal,\n gridVertical,\n tooltipContent,\n animate,\n animationDuration,\n animationBegin,\n animationEasing,\n showLabels = false,\n labelPosition,\n labelFormatter,\n showBrush = false,\n brushHeight,\n brushAriaLabel,\n ...props\n },\n ref\n ) => {\n const animation = resolveAnimation({\n animate,\n animationDuration,\n animationBegin,\n animationEasing,\n });\n const isStacked = layout === 'stacked';\n const areaLabelPosition = resolveCartesianLabelPosition({\n labelPosition,\n isStacked,\n });\n const isGradient = fill === 'gradient';\n const referenceLines = toReferenceLineList(referenceLine);\n\n // A series' `color` override has to reach its gradient stops too, or a\n // gradient-filled chart would keep painting the `config` color.\n const colorFor = (key: string) =>\n areaSettings?.[key]?.color ?? `var(--color-${toCssKey(key)})`;\n\n // The plot inset is needed as soon as *any* series carries outside labels —\n // a per-series `showLabel` counts, not only the chart-wide `showLabels`.\n const hasLabels =\n showLabels ||\n Object.values(areaSettings ?? {}).some((settings) => settings.showLabel);\n\n // Axis titles: the X title sits below the ticks; the Y title is rotated in\n // the left gutter. Passed to recharts' native `label` (themed via the\n // `.recharts-label` fill selector on the container).\n const xAxisTitle = resolveXAxisTitle(xAxisLabel);\n const yAxisTitle = resolveYAxisTitle(yAxisLabel);\n\n const yDomain = resolveAxisDomain(yAxisDomain);\n\n const xAxisTickLabels = resolveXAxisTickLabels(\n data.map((row) => row[xKey]),\n xTickFormatter\n );\n const chartContainerRef = React.useRef<HTMLDivElement>(null);\n const xAxisLayout = useXAxisLayout(\n chartContainerRef,\n xAxisAngle,\n xAxisLabel,\n xAxisTickLabels.join('\\u0000')\n );\n const chartMargin = mergeXAxisLayoutMargin(\n hasLabels ? CHART_LABEL_MARGIN : undefined,\n xAxisLayout.margin\n );\n\n const projStartIndex = React.useMemo(() => {\n if (projectionStart === undefined) return -1;\n return data.findIndex((row) => row[xKey] === projectionStart);\n }, [projectionStart, data, xKey]);\n // projStartIndex === 0 (boundary at the first tick) is excluded: there is no\n // \"previous tick\" to define the clip midpoint, so clipPath defs can't be\n // emitted, which would make all series invisible. Treat it as no-projection.\n const hasProjection = projStartIndex > 0;\n\n // Build the projection tick renderer when projectionStart is set. Each tick\n // past (and including) the start value renders in the disabled text color;\n // ticks before it stay in the muted-foreground color. Returns undefined when\n // projectionStart is absent or not found so recharts uses its own renderer.\n const projectionTick = React.useMemo(() => {\n if (!hasProjection) return undefined;\n const projectedValues = new Set(\n data.slice(projStartIndex).map((row) => row[xKey])\n );\n const ProjectionTick = ({\n payload,\n index,\n ...tickProps\n }: {\n payload: { value: string | number };\n index?: number;\n [key: string]: unknown;\n }) => (\n <Text\n {...(tickProps as React.ComponentProps<typeof Text>)}\n fontSize={12}\n className={\n projectedValues.has(payload.value)\n ? 'fill-[var(--ui-text-on-surface-disabled)]'\n : 'fill-muted-foreground'\n }\n >\n {xTickFormatter\n ? xTickFormatter(payload.value as never, index)\n : payload.value}\n </Text>\n );\n return ProjectionTick;\n }, [hasProjection, projStartIndex, data, xKey, xTickFormatter]);\n\n // When projection is active, copy each series value to `_proj_${key}` — same\n // data, no nulls. Both the actual and projection <Area> see the identical curve;\n // the clipPath (computed in ProjectionClip) restricts which half each paints.\n const chartData = React.useMemo(() => {\n if (!hasProjection) return data;\n return data.map((row) => ({\n ...row,\n ...Object.fromEntries(\n dataKeys.map((k) => [`_proj_${k}`, row[k]])\n ),\n }));\n }, [hasProjection, data, dataKeys]);\n\n // The tick immediately before the projection boundary — needed to compute the\n // visual midpoint where the clip edge and separator line are placed.\n const prevTickValue = React.useMemo(() => {\n if (projStartIndex <= 0) return undefined;\n return data[projStartIndex - 1]?.[xKey];\n }, [projStartIndex, data, xKey]);\n\n const projectionTooltip = React.useMemo(\n () =>\n hasProjection && tooltipContent\n ? createProjectionTooltip(tooltipContent)\n : undefined,\n [hasProjection, tooltipContent]\n );\n\n const tooltipNode = hasProjection\n ? (projectionTooltip ??\n ((tp: TooltipRenderProps) => (\n <ChartTooltipContent\n active={tp.active}\n label={tp.label}\n payload={\n dropProjectionPayload(\n tp.payload\n ) as ChartTooltipContentProps['payload']\n }\n />\n )))\n : (tooltipContent ?? <ChartTooltipContent />);\n\n const legendNode = hasProjection\n ? (lp: LegendContentProps) => (\n <ChartLegendContent\n verticalAlign={lp.verticalAlign}\n fontSize={legendFontSize}\n payload={\n dropProjectionPayload(\n lp.payload\n ) as ChartLegendContentProps['payload']\n }\n />\n )\n : <ChartLegendContent fontSize={legendFontSize} />;\n\n // recharts renders SVG <defs> once per chart; the gradient/clip ids must be\n // unique across chart instances on the page. useId gives a stable per-instance\n // id; strip the colons React emits (invalid in a url(#…) reference).\n const gradientId = `area-gradient-${React.useId().replace(/:/g, '')}`;\n const clipId = `area-proj-${React.useId().replace(/:/g, '')}`;\n\n return (\n <div\n ref={ref}\n data-layout={layout}\n data-fill={fill}\n className={cn(areaChartVariants({ layout, fill }), className)}\n {...props}\n >\n <ChartContainer\n ref={chartContainerRef}\n config={config}\n palette={palette}\n className=\"size-full [&_.recharts-label]:fill-foreground\"\n >\n <RechartsAreaChart\n data={chartData as readonly unknown[]}\n margin={chartMargin}\n >\n {isGradient && (\n <AreaFillGradients\n dataKeys={dataKeys}\n gradientId={gradientId}\n colorFor={colorFor}\n />\n )}\n {showGrid && (\n <CartesianGrid\n horizontal={gridHorizontal ?? true}\n vertical={gridVertical ?? false}\n strokeDasharray={gridDashed ? '3 3' : undefined}\n />\n )}\n <XAxis\n dataKey={xKey}\n type=\"category\"\n hide={!showXAxis}\n tickLine={false}\n axisLine={false}\n tickMargin={8}\n tickFormatter={projectionTick ? undefined : xTickFormatter}\n tick={projectionTick}\n angle={xAxisAngle}\n interval={xAxisInterval}\n textAnchor={resolveRotatedTickAnchor(xAxisAngle)}\n height={xAxisLayout.height}\n label={xAxisTitle}\n />\n <YAxis\n type=\"number\"\n hide={!showYAxis}\n tickLine={false}\n axisLine={false}\n unit={yUnit}\n tickFormatter={yTickFormatter}\n tickCount={yAxisTickCount}\n domain={yDomain}\n width={yAxisLabel ? 72 : undefined}\n label={yAxisTitle}\n />\n {showTooltip && <ChartTooltip content={tooltipNode} />}\n {showLegend && <ChartLegend content={legendNode} />}\n {hasProjection && prevTickValue != null && (\n <ProjectionClip\n projectionStart={projectionStart!}\n prevTick={prevTickValue}\n clipId={clipId}\n />\n )}\n {dataKeys.map((key) => {\n const settings = areaSettings?.[key];\n const seriesDots = settings?.showDots ?? showDots;\n const dotRadius = settings?.dotSize ?? dotSize;\n // The hover dot follows the static dots unless asked otherwise, so\n // a chart that sets neither renders exactly as before.\n const activeDot = showActiveDot ?? seriesDots;\n const seriesLabel = settings?.showLabel ?? showLabels;\n const seriesLabelPosition =\n settings?.labelPosition ?? areaLabelPosition;\n return (\n <Area\n key={key}\n type={settings?.curveType ?? curve ?? 'monotone'}\n dataKey={key}\n stackId={isStacked ? 'a' : undefined}\n stroke={colorFor(key)}\n strokeWidth={settings?.strokeWidth ?? strokeWidth}\n strokeDasharray={settings?.dashed ? '5 5' : undefined}\n fill={\n isGradient ? `url(#${gradientId}-${toCssKey(key)})` : colorFor(key)\n }\n fillOpacity={\n settings?.fillOpacity ?? (isGradient ? 1 : fillOpacity)\n }\n dot={seriesDots ? { r: dotRadius } : false}\n activeDot={activeDot ? { r: dotRadius + 2 } : false}\n connectNulls={connectNulls}\n clipPath={hasProjection ? `url(#${clipId}-actual)` : undefined}\n {...animation}\n >\n {seriesLabel && (\n <LabelList\n dataKey={key}\n position={seriesLabelPosition}\n formatter={toLabelFormatter(labelFormatter)}\n className={resolveLabelFillClass(seriesLabelPosition, {\n translucentSeries: true,\n })}\n fontSize={CHART_LABEL_FONT_SIZE}\n />\n )}\n </Area>\n );\n })}\n {hasProjection &&\n dataKeys.map((key) => {\n const settings = areaSettings?.[key];\n return (\n <Area\n key={`_proj_${key}`}\n type={settings?.curveType ?? curve ?? 'monotone'}\n dataKey={`_proj_${key}`}\n name={key}\n stackId={isStacked ? 'proj' : undefined}\n stroke={colorFor(key)}\n strokeWidth={settings?.strokeWidth ?? strokeWidth}\n strokeDasharray=\"5 5\"\n fill={\n isGradient ? `url(#${gradientId}-${toCssKey(key)})` : colorFor(key)\n }\n fillOpacity={\n settings?.fillOpacity ?? (isGradient ? 1 : fillOpacity)\n }\n dot={false}\n activeDot={false}\n clipPath={`url(#${clipId}-projection)`}\n legendType=\"none\"\n tooltipType=\"none\"\n {...animation}\n />\n );\n })}\n {/* Annotations draw over the series they describe. */}\n {referenceLines.map((ref, index) => {\n const value = resolveChartReferenceValue(ref, data, dataKeys);\n if (value === undefined) return null;\n return (\n <ReferenceLine\n key={`${ref.label ?? 'ref'}-${index}`}\n y={value}\n {...resolveReferenceLineProps(ref.label, ref.labelPosition)}\n />\n );\n })}\n {showBrush && (\n <Brush\n dataKey={xKey}\n tickFormatter={xTickFormatter}\n {...resolveBrushProps({ brushHeight, brushAriaLabel })}\n />\n )}\n </RechartsAreaChart>\n </ChartContainer>\n </div>\n );\n }\n);\nAreaChart.displayName = 'AreaChart';\n\nexport { AreaChart, areaChartVariants };\n"],"mappings":";;;;;;;;;;AAqEA,IAAM,IAAoB,EAAI,IAAI;CAChC,UAAU;EACR,QAAQ;GACN,QAAQ;GACR,SAAS;EACX;EACA,MAAM;GACJ,OAAO;GACP,UAAU;EACZ;CACF;CACA,iBAAiB;EACf,QAAQ;EACR,MAAM;CACR;AACF,CAAC;AAkHD,SAAS,GAAwB,GAAoC;CACnE,OAAO,SAA2B,GAA2B;EAC3D,IAAM,IAAS;GACb,GAAG;GACH,SAAS,EAAsB,EAAM,OAAO;EAC9C;EAOA,OANI,OAAO,KAAmB,aAErB,kBAAC,GAAD,EAAM,GAAI,EAAS,CAAA,IAIrB,EAAM,aAAa,GAAgB,CAAM;CAClD;AACF;AAMA,SAAS,GAAe,EACtB,oBACA,aACA,aAKC;CACD,IAAM,IAAS,EAAc,GACvB,IAAW,EAAY;CAC7B,IAAI,CAAC,KAAU,CAAC,GAAU,OAAO;CACjC,IAAM,IAAQ,EAAO,CAAkB,GACjC,IAAQ,EAAO,CAAyB;CAC9C,IAAI,KAAS,QAAQ,KAAS,MAAM,OAAO;CAC3C,IAAM,KAAQ,IAAQ,KAAS,GACzB,EAAE,MAAG,MAAG,UAAO,cAAW;CAChC,OACE,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,QAAD,EAAA,UAAA,CACE,kBAAC,YAAD;EAAU,IAAI,GAAG,EAAO;EACtB,UAAA,kBAAC,QAAD;GAAS;GAAM;GAAG,OAAO,IAAO;GAAW;EAAS,CAAA;CAC5C,CAAA,GACV,kBAAC,YAAD;EAAU,IAAI,GAAG,EAAO;EACtB,UAAA,kBAAC,QAAD;GAAM,GAAG;GAAS;GAAG,OAAO,IAAI,IAAQ;GAAc;EAAS,CAAA;CACvD,CAAA,CACN,EAAA,CAAA,GACN,kBAAC,QAAD;EACE,IAAI;EACJ,IAAI;EACJ,IAAI;EACJ,IAAI,IAAI;EACR,QAAO;EACP,iBAAgB;CACjB,CAAA,CACD,EAAA,CAAA;AAEN;AASA,SAAS,GAAkB,EACzB,aACA,eACA,eAKC;CACD,OACE,kBAAC,QAAD,EAAA,UACG,EAAS,KAAK,MACb,kBAAC,kBAAD;EAEE,IAAI,GAAG,EAAW,GAAG,EAAS,CAAG;EACjC,IAAG;EACH,IAAG;EACH,IAAG;EACH,IAAG;EANL,UAAA,CAQE,kBAAC,QAAD;GAAM,QAAO;GAAK,WAAW,EAAS,CAAG;GAAG,aAAa;EAAM,CAAA,GAC/D,kBAAC,QAAD;GAAM,QAAO;GAAM,WAAW,EAAS,CAAG;GAAG,aAAa;EAAM,CAAA,CAClD;CATT,GAAA,CASS,CACjB,EACG,CAAA;AAEV;AAEA,IAAM,IAAY,EAAM,YAEpB,EACE,cACA,WACA,YACA,SACA,aACA,SACA,eACA,eACA,WACA,YAAS,UACT,UAAO,SACP,WAAQ,YACR,iBAAc,GACd,iBAAc,IACd,cAAW,IACX,cAAU,GACV,mBACA,mBAAe,IACf,iBACA,mBACA,oBACA,eAAW,IACX,kBAAc,IACd,iBAAa,IACb,mBACA,gBAAY,IACZ,gBAAY,IACZ,mBACA,oBACA,eACA,mBACA,oBACA,iBACA,gBACA,oBACA,kBACA,mBACA,aACA,uBACA,oBACA,qBACA,gBAAa,IACb,mBACA,oBACA,gBAAY,IACZ,iBACA,oBACA,GAAG,MAEL,OACG;CACH,IAAM,IAAY,EAAiB;EACjC;EACA;EACA;EACA;CACF,CAAC,GACK,IAAY,MAAW,WACvB,KAAoB,EAA8B;EACtD;EACA;CACF,CAAC,GACK,IAAa,MAAS,YACtB,KAAiB,GAAoB,EAAa,GAIlD,KAAY,MAChB,IAAe,EAAI,EAAE,SAAS,eAAe,EAAS,CAAG,EAAE,IAIvD,KACJ,KACA,OAAO,OAAO,KAAgB,CAAC,CAAC,CAAC,CAAC,MAAM,MAAa,EAAS,SAAS,GAKnE,KAAa,GAAkB,CAAU,GACzC,KAAa,GAAkB,CAAU,GAEzC,KAAU,EAAkB,EAAW,GAEvC,KAAkB,GACtB,EAAK,KAAK,MAAQ,EAAI,EAAK,GAC3B,CACF,GACM,IAAoB,EAAM,OAAuB,IAAI,GACrD,IAAc,GAClB,GACA,GACA,GACA,GAAgB,KAAK,IAAQ,CAC/B,GACM,IAAc,GAClB,KAAY,IAAqB,KAAA,GACjC,EAAY,MACd,GAEM,IAAiB,EAAM,cACvB,MAAoB,KAAA,IAAkB,KACnC,EAAK,WAAW,MAAQ,EAAI,OAAU,CAAe,GAC3D;EAAC;EAAiB;EAAM;CAAI,CAAC,GAI1B,IAAgB,IAAiB,GAMjC,IAAiB,EAAM,cAAc;EACzC,IAAI,CAAC,GAAe;EACpB,IAAM,IAAkB,IAAI,IAC1B,EAAK,MAAM,CAAc,CAAC,CAAC,KAAK,MAAQ,EAAI,EAAK,CACnD;EAwBA,QAvBwB,EACtB,YACA,UACA,GAAG,QAMH,kBAAC,IAAD;GACE,GAAK;GACL,UAAU;GACV,WACE,EAAgB,IAAI,EAAQ,KAAK,IAC7B,8CACA;GAGL,UAAA,IACG,EAAe,EAAQ,OAAgB,CAAK,IAC5C,EAAQ;EACR,CAAA;CAGV,GAAG;EAAC;EAAe;EAAgB;EAAM;EAAM;CAAc,CAAC,GAKxD,KAAY,EAAM,cACjB,IACE,EAAK,KAAK,OAAS;EACxB,GAAG;EACH,GAAG,OAAO,YACR,EAAS,KAAK,MAAM,CAAC,SAAS,KAAK,EAAI,EAAE,CAAC,CAC5C;CACF,EAAE,IANyB,GAO1B;EAAC;EAAe;EAAM;CAAQ,CAAC,GAI5B,IAAgB,EAAM,cAAc;EACpC,WAAkB,IACtB,OAAO,EAAK,IAAiB,EAAE,GAAG;CACpC,GAAG;EAAC;EAAgB;EAAM;CAAI,CAAC,GAEzB,KAAoB,EAAM,cAE5B,KAAiB,IACb,GAAwB,CAAc,IACtC,KAAA,GACN,CAAC,GAAe,CAAc,CAChC,GAEM,KAAc,IACf,QACG,MACA,kBAAC,GAAD;EACE,QAAQ,EAAG;EACX,OAAO,EAAG;EACV,SACE,EACE,EAAG,OACL;CAEH,CAAA,KAEJ,KAAkB,kBAAC,GAAD,CAAsB,CAAA,GAEvC,KAAa,KACd,MACC,kBAAC,GAAD;EACE,eAAe,EAAG;EAClB,UAAU;EACV,SACE,EACE,EAAG,OACL;CAEH,CAAA,IAEH,kBAAC,GAAD,EAAoB,UAAU,EAAiB,CAAA,GAK7C,IAAa,iBAAiB,EAAM,MAAM,CAAC,CAAC,QAAQ,MAAM,EAAE,KAC5D,IAAS,aAAa,EAAM,MAAM,CAAC,CAAC,QAAQ,MAAM,EAAE;CAE1D,OACE,kBAAC,OAAD;EACO;EACL,eAAa;EACb,aAAW;EACX,WAAW,EAAG,EAAkB;GAAE;GAAQ;EAAK,CAAC,GAAG,CAAS;EAC5D,GAAI;EAEJ,UAAA,kBAAC,GAAD;GACE,KAAK;GACG;GACC;GACT,WAAU;GAEV,UAAA,kBAAC,IAAD;IACE,MAAM;IACN,QAAQ;IAFV,UAAA;KAIG,KACC,kBAAC,IAAD;MACY;MACE;MACF;KACX,CAAA;KAEF,MACC,kBAAC,IAAD;MACE,YAAY,MAAkB;MAC9B,UAAU,MAAgB;MAC1B,iBAAiB,KAAa,QAAQ,KAAA;KACvC,CAAA;KAEH,kBAAC,IAAD;MACE,SAAS;MACT,MAAK;MACL,MAAM,CAAC;MACP,UAAU;MACV,UAAU;MACV,YAAY;MACZ,eAAe,IAAiB,KAAA,IAAY;MAC5C,MAAM;MACN,OAAO;MACP,UAAU;MACV,YAAY,GAAyB,CAAU;MAC/C,QAAQ,EAAY;MACpB,OAAO;KACR,CAAA;KACD,kBAAC,IAAD;MACE,MAAK;MACL,MAAM,CAAC;MACP,UAAU;MACV,UAAU;MACV,MAAM;MACN,eAAe;MACf,WAAW;MACX,QAAQ;MACR,OAAO,IAAa,KAAK,KAAA;MACzB,OAAO;KACR,CAAA;KACA,MAAe,kBAAC,GAAD,EAAc,SAAS,GAAc,CAAA;KACpD,MAAc,kBAAC,GAAD,EAAa,SAAS,GAAa,CAAA;KACjD,KAAiB,KAAiB,QACjC,kBAAC,IAAD;MACmB;MACjB,UAAU;MACF;KACT,CAAA;KAEF,EAAS,KAAK,MAAQ;MACrB,IAAM,IAAW,IAAe,IAC1B,IAAa,GAAU,YAAY,GACnC,IAAY,GAAU,WAAW,IAGjC,IAAY,MAAiB,GAC7B,IAAc,GAAU,aAAa,GACrC,IACJ,GAAU,iBAAiB;MAC7B,OACE,kBAAC,GAAD;OAEE,MAAM,GAAU,aAAa,KAAS;OACtC,SAAS;OACT,SAAS,IAAY,MAAM,KAAA;OAC3B,QAAQ,EAAS,CAAG;OACpB,aAAa,GAAU,eAAe;OACtC,iBAAiB,GAAU,SAAS,QAAQ,KAAA;OAC5C,MACE,IAAa,QAAQ,EAAW,GAAG,EAAS,CAAG,EAAE,KAAK,EAAS,CAAG;OAEpE,aACE,GAAU,gBAAgB,IAAa,IAAI;OAE7C,KAAK,IAAa,EAAK,EAAU,IAAI;OACrC,WAAW,IAAY,EAAE,GAAG,IAAY,EAAE,IAAI;OAChC;OACd,UAAU,IAAgB,QAAQ,EAAO,YAAY,KAAA;OACrD,GAAI;OAEH,UAAA,KACC,kBAAC,IAAD;QACE,SAAS;QACT,UAAU;QACV,WAAW,GAAiB,EAAc;QAC1C,WAAW,EAAsB,GAAqB,EACpD,mBAAmB,GACrB,CAAC;QACD,UAAA;OACD,CAAA;MAEC,GA9BC,CA8BD;KAEV,CAAC;KACA,KACC,EAAS,KAAK,MAAQ;MACpB,IAAM,IAAW,IAAe;MAChC,OACE,kBAAC,GAAD;OAEE,MAAM,GAAU,aAAa,KAAS;OACtC,SAAS,SAAS;OAClB,MAAM;OACN,SAAS,IAAY,SAAS,KAAA;OAC9B,QAAQ,EAAS,CAAG;OACpB,aAAa,GAAU,eAAe;OACtC,iBAAgB;OAChB,MACE,IAAa,QAAQ,EAAW,GAAG,EAAS,CAAG,EAAE,KAAK,EAAS,CAAG;OAEpE,aACE,GAAU,gBAAgB,IAAa,IAAI;OAE7C,KAAK;OACL,WAAW;OACX,UAAU,QAAQ,EAAO;OACzB,YAAW;OACX,aAAY;OACZ,GAAI;MACL,GApBM,SAAS,GAoBf;KAEL,CAAC;KAEF,GAAe,KAAK,GAAK,MAAU;MAClC,IAAM,IAAQ,EAA2B,GAAK,GAAM,CAAQ;MAE5D,OADI,MAAU,KAAA,IAAkB,OAE9B,kBAAC,IAAD;OAEE,GAAG;OACH,GAAI,GAA0B,EAAI,OAAO,EAAI,aAAa;MAC3D,GAHM,GAAG,EAAI,SAAS,MAAM,GAAG,GAG/B;KAEL,CAAC;KACA,MACC,kBAAC,IAAD;MACE,SAAS;MACT,eAAe;MACf,GAAI,EAAkB;OAAE;OAAa;MAAe,CAAC;KACtD,CAAA;IAEc;;EACL,CAAA;CACb,CAAA;AAET,CACF;AACA,EAAU,cAAc"}