@acronis-platform/ui-react 0.58.0 → 0.61.0

package/README.md

@@ -1,11 +1,11 @@
 # @acronis-platform/ui-react
 
-The next-generation Acronis React component library — a **Base UI**
-implementation, themed by [`@acronis-platform/tokens-pd`](../tokens-pd)
-(generated from [`@acronis-platform/design-tokens`](../design-tokens)).
+The Acronis React component library — a **Base UI** implementation, themed by
+[`@acronis-platform/tokens-pd`](../tokens-pd) (generated from
+[`@acronis-platform/design-tokens`](../design-tokens)).
 
-> Early days: this package is being built out component by component. See
-> [`AGENTS.md`](./AGENTS.md) for conventions.
+> This package is under active development toward v1 and grows component by
+> component. See [`AGENTS.md`](./AGENTS.md) for conventions.
 
 ## Install
 

package/dist/components/ui/app-shell/app-shell.js.map

@@ -1 +1 @@
-{"version":3,"file":"app-shell.js","sources":["../../../../src/components/ui/app-shell/app-shell.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\n// The full-page application scaffold from the Figma App Shell (node 2782-1495):\n// a left sidebar column (holds SidebarPrimary, optionally a secondary menu) beside\n// a body column of a sticky header (with the global search) over the scrolling\n// main content. Layout-only — the rich parts come from SidebarPrimary /\n// SidebarSecondary / SearchGlobal placed inside these slots. Surfaces use the\n// shared `--ui-*` tokens (bg-background / border-border; a bare `border` is\n// transparent in ui-react, so borders name `border-border`).\n\nconst AppShell = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-slot=\"app-shell\"\n    className={cn('flex min-h-screen w-full bg-background', className)}\n    {...props}\n  />\n));\nAppShell.displayName = 'AppShell';\n\nconst AppShellSidebar = React.forwardRef<\n  HTMLElement,\n  React.HTMLAttributes<HTMLElement>\n>(({ className, ...props }, ref) => (\n  <aside\n    ref={ref}\n    data-slot=\"app-shell-sidebar\"\n    className={cn('flex shrink-0', className)}\n    {...props}\n  />\n));\nAppShellSidebar.displayName = 'AppShellSidebar';\n\nconst AppShellBody = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-slot=\"app-shell-body\"\n    className={cn('flex min-w-0 flex-1 flex-col', className)}\n    {...props}\n  />\n));\nAppShellBody.displayName = 'AppShellBody';\n\nconst AppShellHeader = React.forwardRef<\n  HTMLElement,\n  React.HTMLAttributes<HTMLElement>\n>(({ className, ...props }, ref) => (\n  <header\n    ref={ref}\n    data-slot=\"app-shell-header\"\n    className={cn(\n      'sticky top-0 z-10 flex h-16 shrink-0 items-center gap-4 border-b border-border bg-background px-6',\n      className\n    )}\n    {...props}\n  />\n));\nAppShellHeader.displayName = 'AppShellHeader';\n\nconst AppShellMain = React.forwardRef<\n  HTMLElement,\n  React.HTMLAttributes<HTMLElement>\n>(({ className, ...props }, ref) => (\n  <main\n    ref={ref}\n    data-slot=\"app-shell-main\"\n    className={cn('flex-1 overflow-auto', className)}\n    {...props}\n  />\n));\nAppShellMain.displayName = 'AppShellMain';\n\nconst AppShellFooter = React.forwardRef<\n  HTMLElement,\n  React.HTMLAttributes<HTMLElement>\n>(({ className, ...props }, ref) => (\n  <footer\n    ref={ref}\n    data-slot=\"app-shell-footer\"\n    className={cn('shrink-0 border-t border-border bg-background px-6 py-4', className)}\n    {...props}\n  />\n));\nAppShellFooter.displayName = 'AppShellFooter';\n\nexport {\n  AppShell,\n  AppShellSidebar,\n  AppShellBody,\n  AppShellHeader,\n  AppShellMain,\n  AppShellFooter,\n};\n"],"names":["AppShell","React","className","props","ref","jsx","cn","AppShellSidebar","AppShellBody","AppShellHeader","AppShellMain","AppShellFooter"],"mappings":";;;AAYA,MAAMA,IAAWC,EAAM,WAGrB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,aAAU;AAAA,IACV,WAAWE,EAAG,0CAA0CJ,CAAS;AAAA,IAChE,GAAGC;AAAA,EAAA;AACN,CACD;AACDH,EAAS,cAAc;AAEvB,MAAMO,IAAkBN,EAAM,WAG5B,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,aAAU;AAAA,IACV,WAAWE,EAAG,iBAAiBJ,CAAS;AAAA,IACvC,GAAGC;AAAA,EAAA;AACN,CACD;AACDI,EAAgB,cAAc;AAE9B,MAAMC,IAAeP,EAAM,WAGzB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,aAAU;AAAA,IACV,WAAWE,EAAG,gCAAgCJ,CAAS;AAAA,IACtD,GAAGC;AAAA,EAAA;AACN,CACD;AACDK,EAAa,cAAc;AAE3B,MAAMC,IAAiBR,EAAM,WAG3B,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,aAAU;AAAA,IACV,WAAWE;AAAA,MACT;AAAA,MACAJ;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,EAAA;AACN,CACD;AACDM,EAAe,cAAc;AAE7B,MAAMC,IAAeT,EAAM,WAGzB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,aAAU;AAAA,IACV,WAAWE,EAAG,wBAAwBJ,CAAS;AAAA,IAC9C,GAAGC;AAAA,EAAA;AACN,CACD;AACDO,EAAa,cAAc;AAE3B,MAAMC,IAAiBV,EAAM,WAG3B,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,aAAU;AAAA,IACV,WAAWE,EAAG,2DAA2DJ,CAAS;AAAA,IACjF,GAAGC;AAAA,EAAA;AACN,CACD;AACDQ,EAAe,cAAc;"}
+{"version":3,"file":"app-shell.js","sources":["../../../../src/components/ui/app-shell/app-shell.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\n// The full-page application scaffold from the Figma App Shell (node 2782-1495):\n// a left sidebar column (holds SidebarPrimary, optionally a secondary menu) beside\n// a body column of a sticky header over the scrolling main content. Layout-only\n// — the rich parts come from SidebarPrimary / SidebarSecondary placed inside\n// these slots. Surfaces use the shared `--ui-*` tokens (bg-background /\n// border-border; a bare `border` is transparent in ui-react, so borders name\n// `border-border`).\n\nconst AppShell = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-slot=\"app-shell\"\n    className={cn('flex min-h-screen w-full bg-background', className)}\n    {...props}\n  />\n));\nAppShell.displayName = 'AppShell';\n\nconst AppShellSidebar = React.forwardRef<\n  HTMLElement,\n  React.HTMLAttributes<HTMLElement>\n>(({ className, ...props }, ref) => (\n  <aside\n    ref={ref}\n    data-slot=\"app-shell-sidebar\"\n    className={cn('flex shrink-0', className)}\n    {...props}\n  />\n));\nAppShellSidebar.displayName = 'AppShellSidebar';\n\nconst AppShellBody = React.forwardRef<\n  HTMLDivElement,\n  React.HTMLAttributes<HTMLDivElement>\n>(({ className, ...props }, ref) => (\n  <div\n    ref={ref}\n    data-slot=\"app-shell-body\"\n    className={cn('flex min-w-0 flex-1 flex-col', className)}\n    {...props}\n  />\n));\nAppShellBody.displayName = 'AppShellBody';\n\nconst AppShellHeader = React.forwardRef<\n  HTMLElement,\n  React.HTMLAttributes<HTMLElement>\n>(({ className, ...props }, ref) => (\n  <header\n    ref={ref}\n    data-slot=\"app-shell-header\"\n    className={cn(\n      'sticky top-0 z-10 flex h-16 shrink-0 items-center gap-4 border-b border-border bg-background px-6',\n      className\n    )}\n    {...props}\n  />\n));\nAppShellHeader.displayName = 'AppShellHeader';\n\nconst AppShellMain = React.forwardRef<\n  HTMLElement,\n  React.HTMLAttributes<HTMLElement>\n>(({ className, ...props }, ref) => (\n  <main\n    ref={ref}\n    data-slot=\"app-shell-main\"\n    className={cn('flex-1 overflow-auto', className)}\n    {...props}\n  />\n));\nAppShellMain.displayName = 'AppShellMain';\n\nconst AppShellFooter = React.forwardRef<\n  HTMLElement,\n  React.HTMLAttributes<HTMLElement>\n>(({ className, ...props }, ref) => (\n  <footer\n    ref={ref}\n    data-slot=\"app-shell-footer\"\n    className={cn('shrink-0 border-t border-border bg-background px-6 py-4', className)}\n    {...props}\n  />\n));\nAppShellFooter.displayName = 'AppShellFooter';\n\nexport {\n  AppShell,\n  AppShellSidebar,\n  AppShellBody,\n  AppShellHeader,\n  AppShellMain,\n  AppShellFooter,\n};\n"],"names":["AppShell","React","className","props","ref","jsx","cn","AppShellSidebar","AppShellBody","AppShellHeader","AppShellMain","AppShellFooter"],"mappings":";;;AAYA,MAAMA,IAAWC,EAAM,WAGrB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,aAAU;AAAA,IACV,WAAWE,EAAG,0CAA0CJ,CAAS;AAAA,IAChE,GAAGC;AAAA,EAAA;AACN,CACD;AACDH,EAAS,cAAc;AAEvB,MAAMO,IAAkBN,EAAM,WAG5B,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,aAAU;AAAA,IACV,WAAWE,EAAG,iBAAiBJ,CAAS;AAAA,IACvC,GAAGC;AAAA,EAAA;AACN,CACD;AACDI,EAAgB,cAAc;AAE9B,MAAMC,IAAeP,EAAM,WAGzB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,aAAU;AAAA,IACV,WAAWE,EAAG,gCAAgCJ,CAAS;AAAA,IACtD,GAAGC;AAAA,EAAA;AACN,CACD;AACDK,EAAa,cAAc;AAE3B,MAAMC,IAAiBR,EAAM,WAG3B,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,aAAU;AAAA,IACV,WAAWE;AAAA,MACT;AAAA,MACAJ;AAAA,IAAA;AAAA,IAED,GAAGC;AAAA,EAAA;AACN,CACD;AACDM,EAAe,cAAc;AAE7B,MAAMC,IAAeT,EAAM,WAGzB,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,aAAU;AAAA,IACV,WAAWE,EAAG,wBAAwBJ,CAAS;AAAA,IAC9C,GAAGC;AAAA,EAAA;AACN,CACD;AACDO,EAAa,cAAc;AAE3B,MAAMC,IAAiBV,EAAM,WAG3B,CAAC,EAAE,WAAAC,GAAW,GAAGC,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,KAAAD;AAAA,IACA,aAAU;AAAA,IACV,WAAWE,EAAG,2DAA2DJ,CAAS;AAAA,IACjF,GAAGC;AAAA,EAAA;AACN,CACD;AACDQ,EAAe,cAAc;"}

package/dist/components/ui/area-chart/area-chart.js

@@ -1,10 +1,11 @@
-import { jsx as t, jsxs as c } from "react/jsx-runtime";
-import * as f from "react";
-import { cva as R } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
-import { AreaChart as V, CartesianGrid as k, XAxis as w, YAxis as z, Area as B } from "recharts";
-import { cn as K } from "../../../lib/utils.js";
-import { ChartContainer as M, ChartTooltip as S, ChartTooltipContent as X, ChartLegend as Y, ChartLegendContent as _ } from "../chart/chart.js";
-const b = R("", {
+import { jsx as r, jsxs as $ } from "react/jsx-runtime";
+import * as T from "react";
+import { cva as pe } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { AreaChart as ue, CartesianGrid as ve, XAxis as Le, YAxis as Ce, Area as Ae, LabelList as be, ReferenceLine as Re, Brush as xe } from "recharts";
+import { cn as Te } from "../../../lib/utils.js";
+import { resolveAnimation as $e, resolveCartesianLabelPosition as ye, CHART_LABEL_MARGIN as De, resolveRotatedTickAnchor as Pe, CHART_LABEL_FONT_SIZE as ke, resolveLabelFillClass as Fe, toLabelFormatter as Ne, resolveChartReferenceValue as Oe, resolveReferenceLineProps as _e, resolveBrushProps as Ge, resolveXAxisTitle as Ie, resolveXAxisHeight as we, resolveYAxisTitle as ze, resolveAxisDomain as Be, toReferenceLineList as He } from "../chart/chart-format.js";
+import { ChartContainer as je, ChartTooltip as Ee, ChartTooltipContent as Ve, ChartLegend as Xe, ChartLegendContent as Me } from "../chart/chart.js";
+const We = pe("", {
   variants: {
     layout: {
       single: "",
@@ -19,131 +20,221 @@ const b = R("", {
     layout: "single",
     fill: "gradient"
   }
-}), q = f.forwardRef(
+});
+function Ye({
+  dataKeys: s,
+  gradientId: n,
+  colorFor: i
+}) {
+  return /* @__PURE__ */ r("defs", { children: s.map((a) => /* @__PURE__ */ $(
+    "linearGradient",
+    {
+      id: `${n}-${a}`,
+      x1: "0",
+      y1: "0",
+      x2: "0",
+      y2: "1",
+      children: [
+        /* @__PURE__ */ r("stop", { offset: "5%", stopColor: i(a), stopOpacity: 0.8 }),
+        /* @__PURE__ */ r("stop", { offset: "95%", stopColor: i(a), stopOpacity: 0.1 })
+      ]
+    },
+    a
+  )) });
+}
+const Ke = T.forwardRef(
   ({
-    className: p,
-    config: m,
-    data: h,
-    dataKeys: s,
-    xKey: g,
-    xAxisLabel: e,
-    yAxisLabel: r,
-    yUnit: v,
-    layout: i = "single",
-    fill: o = "gradient",
-    curve: C = "monotone",
-    strokeWidth: u = 2,
-    fillOpacity: $ = 0.4,
-    showDots: l = !1,
-    connectNulls: A = !1,
-    showGrid: x = !0,
-    showTooltip: y = !0,
-    showLegend: T = !0,
-    tooltipContent: G,
-    ...I
-  }, L) => {
-    const N = i === "stacked", n = o === "gradient", O = e ? { value: e, position: "insideBottom", offset: 0 } : void 0, j = r ? {
-      value: r,
-      angle: -90,
-      position: "insideLeft",
-      style: { textAnchor: "middle" }
-    } : void 0, d = `area-gradient-${f.useId().replace(/:/g, "")}`;
-    return /* @__PURE__ */ t(
+    className: s,
+    config: n,
+    data: i,
+    dataKeys: a,
+    xKey: p,
+    xAxisLabel: u,
+    yAxisLabel: v,
+    yUnit: y,
+    layout: c = "single",
+    fill: d = "gradient",
+    curve: D = "monotone",
+    strokeWidth: P = 2,
+    fillOpacity: k = 0.4,
+    showDots: F = !1,
+    dotSize: N = 3,
+    showActiveDot: O,
+    connectNulls: _ = !1,
+    areaSettings: t,
+    referenceLine: G,
+    showGrid: I = !0,
+    showTooltip: w = !0,
+    showLegend: z = !0,
+    showXAxis: B = !0,
+    showYAxis: H = !0,
+    xTickFormatter: L,
+    yTickFormatter: j,
+    xAxisAngle: f,
+    xAxisInterval: E,
+    yAxisTickCount: V,
+    yAxisDomain: X,
+    gridDashed: M,
+    gridHorizontal: W,
+    gridVertical: Y,
+    tooltipContent: K,
+    animate: Z,
+    animationDuration: q,
+    animationBegin: J,
+    animationEasing: Q,
+    showLabels: C = !1,
+    labelPosition: U,
+    labelFormatter: S,
+    showBrush: g = !1,
+    brushHeight: ee,
+    brushAriaLabel: oe,
+    ...re
+  }, ae) => {
+    const te = $e({
+      animate: Z,
+      animationDuration: q,
+      animationBegin: J,
+      animationEasing: Q
+    }), A = c === "stacked", ie = ye({
+      labelPosition: U,
+      isStacked: A
+    }), h = d === "gradient", le = He(G), m = (o) => {
+      var e;
+      return ((e = t == null ? void 0 : t[o]) == null ? void 0 : e.color) ?? `var(--color-${o})`;
+    }, se = C || Object.values(t ?? {}).some((o) => o.showLabel), ne = Ie(u), ce = ze(v), de = Be(X), fe = we(u, f), b = `area-gradient-${T.useId().replace(/:/g, "")}`;
+    return /* @__PURE__ */ r(
       "div",
       {
-        ref: L,
-        "data-layout": i,
-        "data-fill": o,
-        className: K(b({ layout: i, fill: o }), p),
-        ...I,
-        children: /* @__PURE__ */ t(
-          M,
+        ref: ae,
+        "data-layout": c,
+        "data-fill": d,
+        className: Te(We({ layout: c, fill: d }), s),
+        ...re,
+        children: /* @__PURE__ */ r(
+          je,
           {
-            config: m,
+            config: n,
             className: "size-full [&_.recharts-label]:fill-foreground",
-            children: /* @__PURE__ */ c(V, { data: h, children: [
-              n && /* @__PURE__ */ t("defs", { children: s.map((a) => /* @__PURE__ */ c(
-                "linearGradient",
-                {
-                  id: `${d}-${a}`,
-                  x1: "0",
-                  y1: "0",
-                  x2: "0",
-                  y2: "1",
-                  children: [
-                    /* @__PURE__ */ t(
-                      "stop",
+            children: /* @__PURE__ */ $(
+              ue,
+              {
+                data: i,
+                margin: se ? De : void 0,
+                children: [
+                  h && /* @__PURE__ */ r(
+                    Ye,
+                    {
+                      dataKeys: a,
+                      gradientId: b,
+                      colorFor: m
+                    }
+                  ),
+                  I && /* @__PURE__ */ r(
+                    ve,
+                    {
+                      horizontal: W ?? !0,
+                      vertical: Y ?? !1,
+                      strokeDasharray: M ? "3 3" : void 0
+                    }
+                  ),
+                  /* @__PURE__ */ r(
+                    Le,
+                    {
+                      dataKey: p,
+                      type: "category",
+                      hide: !B,
+                      tickLine: !1,
+                      axisLine: !1,
+                      tickMargin: 8,
+                      tickFormatter: L,
+                      angle: f,
+                      interval: E,
+                      textAnchor: Pe(f),
+                      height: fe,
+                      label: ne
+                    }
+                  ),
+                  /* @__PURE__ */ r(
+                    Ce,
+                    {
+                      type: "number",
+                      hide: !H,
+                      tickLine: !1,
+                      axisLine: !1,
+                      unit: y,
+                      tickFormatter: j,
+                      tickCount: V,
+                      domain: de,
+                      width: v ? 72 : void 0,
+                      label: ce
+                    }
+                  ),
+                  w && /* @__PURE__ */ r(Ee, { content: K ?? /* @__PURE__ */ r(Ve, {}) }),
+                  z && /* @__PURE__ */ r(Xe, { content: /* @__PURE__ */ r(Me, {}) }),
+                  a.map((o) => {
+                    const e = t == null ? void 0 : t[o], l = (e == null ? void 0 : e.showDots) ?? F, R = (e == null ? void 0 : e.dotSize) ?? N, he = O ?? l, me = (e == null ? void 0 : e.showLabel) ?? C, x = (e == null ? void 0 : e.labelPosition) ?? ie;
+                    return /* @__PURE__ */ r(
+                      Ae,
                       {
-                        offset: "5%",
-                        stopColor: `var(--color-${a})`,
-                        stopOpacity: 0.8
-                      }
-                    ),
-                    /* @__PURE__ */ t(
-                      "stop",
+                        type: (e == null ? void 0 : e.curveType) ?? D ?? "monotone",
+                        dataKey: o,
+                        stackId: A ? "a" : void 0,
+                        stroke: m(o),
+                        strokeWidth: (e == null ? void 0 : e.strokeWidth) ?? P,
+                        strokeDasharray: e != null && e.dashed ? "5 5" : void 0,
+                        fill: h ? `url(#${b}-${o})` : m(o),
+                        fillOpacity: (e == null ? void 0 : e.fillOpacity) ?? (h ? 1 : k),
+                        dot: l ? { r: R } : !1,
+                        activeDot: he ? { r: R + 2 } : !1,
+                        connectNulls: _,
+                        ...te,
+                        children: me && /* @__PURE__ */ r(
+                          be,
+                          {
+                            dataKey: o,
+                            position: x,
+                            formatter: Ne(S),
+                            className: Fe(x, {
+                              translucentSeries: !0
+                            }),
+                            fontSize: ke
+                          }
+                        )
+                      },
+                      o
+                    );
+                  }),
+                  le.map((o, e) => {
+                    const l = Oe(o, i, a);
+                    return l === void 0 ? null : /* @__PURE__ */ r(
+                      Re,
                       {
-                        offset: "95%",
-                        stopColor: `var(--color-${a})`,
-                        stopOpacity: 0.1
-                      }
-                    )
-                  ]
-                },
-                a
-              )) }),
-              x && /* @__PURE__ */ t(k, { vertical: !1 }),
-              /* @__PURE__ */ t(
-                w,
-                {
-                  dataKey: g,
-                  type: "category",
-                  tickLine: !1,
-                  axisLine: !1,
-                  tickMargin: 8,
-                  height: e ? 48 : void 0,
-                  label: O
-                }
-              ),
-              /* @__PURE__ */ t(
-                z,
-                {
-                  type: "number",
-                  tickLine: !1,
-                  axisLine: !1,
-                  unit: v,
-                  width: r ? 72 : void 0,
-                  label: j
-                }
-              ),
-              y && /* @__PURE__ */ t(S, { content: G ?? /* @__PURE__ */ t(X, {}) }),
-              T && /* @__PURE__ */ t(Y, { content: /* @__PURE__ */ t(_, {}) }),
-              s.map((a) => /* @__PURE__ */ t(
-                B,
-                {
-                  type: C ?? "monotone",
-                  dataKey: a,
-                  stackId: N ? "a" : void 0,
-                  stroke: `var(--color-${a})`,
-                  strokeWidth: u,
-                  fill: n ? `url(#${d}-${a})` : `var(--color-${a})`,
-                  fillOpacity: n ? 1 : $,
-                  dot: l ? { r: 3 } : !1,
-                  activeDot: l ? { r: 5 } : !1,
-                  connectNulls: A,
-                  isAnimationActive: !1
-                },
-                a
-              ))
-            ] })
+                        y: l,
+                        ..._e(o.label, o.labelPosition)
+                      },
+                      `${o.label ?? "ref"}-${e}`
+                    );
+                  }),
+                  g && /* @__PURE__ */ r(
+                    xe,
+                    {
+                      dataKey: p,
+                      tickFormatter: L,
+                      ...Ge({ brushHeight: ee, brushAriaLabel: oe })
+                    }
+                  )
+                ]
+              }
+            )
           }
         )
       }
     );
   }
 );
-q.displayName = "AreaChart";
+Ke.displayName = "AreaChart";
 export {
-  q as AreaChart,
-  b as areaChartVariants
+  Ke as AreaChart,
+  We as areaChartVariants
 };
 //# sourceMappingURL=area-chart.js.map

package/dist/components/ui/area-chart/area-chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"area-chart.js","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  CartesianGrid,\n  XAxis,\n  YAxis,\n} from 'recharts';\n\nimport { cn } from '@/lib/utils';\nimport {\n  ChartContainer,\n  ChartLegend,\n  ChartLegendContent,\n  ChartTooltip,\n  ChartTooltipContent,\n  type ChartConfig,\n} from '../chart';\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: 'gradient',\n  },\n});\n\nexport interface AreaChartProps\n  extends Omit<React.ComponentProps<'div'>, 'children'>,\n    VariantProps<typeof areaChartVariants> {\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` / `color` (imported from the shared `Chart`\n   * primitives). Series colors are caller-supplied — reference an existing\n   * semantic `--ui-*` token; there is no chart palette tier yet.\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  /** Title rendered beneath the horizontal (X) axis. */\n  xAxisLabel?: string;\n  /** Title rendered beside the vertical (Y) axis (rotated). */\n  yAxisLabel?: string;\n  /** Unit suffix appended to Y-axis tick values (recharts `unit`; the X axis is categorical). */\n  yUnit?: string;\n  /** Interpolation between points. */\n  curve?: 'linear' | 'monotone' | 'step';\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  /** Bridge `null` gaps in the data instead of breaking the area. */\n  connectNulls?: boolean;\n  showGrid?: boolean;\n  showTooltip?: boolean;\n  showLegend?: boolean;\n  /**\n   * Replace the default tooltip. Pass a configured `ChartTooltipContent`\n   * (imported from this library) — e.g. with a `formatter` / `labelFormatter` /\n   * `indicator` — to customize formatting, per-series rows, or extra fields\n   * without composing recharts yourself. Ignored when `showTooltip` is false.\n   */\n  tooltipContent?: React.ComponentProps<typeof ChartTooltip>['content'];\n}\n\nconst AreaChart = React.forwardRef<HTMLDivElement, AreaChartProps>(\n  (\n    {\n      className,\n      config,\n      data,\n      dataKeys,\n      xKey,\n      xAxisLabel,\n      yAxisLabel,\n      yUnit,\n      layout = 'single',\n      fill = 'gradient',\n      curve = 'monotone',\n      strokeWidth = 2,\n      fillOpacity = 0.4,\n      showDots = false,\n      connectNulls = false,\n      showGrid = true,\n      showTooltip = true,\n      showLegend = true,\n      tooltipContent,\n      ...props\n    },\n    ref\n  ) => {\n    const isStacked = layout === 'stacked';\n    const isGradient = fill === 'gradient';\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 = xAxisLabel\n      ? { value: xAxisLabel, position: 'insideBottom' as const, offset: 0 }\n      : undefined;\n    const yAxisTitle = yAxisLabel\n      ? {\n          value: yAxisLabel,\n          angle: -90,\n          position: 'insideLeft' as const,\n          style: { textAnchor: 'middle' as const },\n        }\n      : undefined;\n\n    // recharts renders SVG <defs> once per chart; the gradient ids must be unique\n    // across chart instances on the page. useId gives a stable per-instance id;\n    // strip the colons React emits (invalid in a url(#…) reference) — same guard\n    // the shared ChartContainer applies to its chart id.\n    const gradientId = `area-gradient-${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          config={config}\n          className=\"size-full [&_.recharts-label]:fill-foreground\"\n        >\n          <RechartsAreaChart data={data as readonly unknown[]}>\n            {isGradient && (\n              <defs>\n                {dataKeys.map((key) => (\n                  <linearGradient\n                    key={key}\n                    id={`${gradientId}-${key}`}\n                    x1=\"0\"\n                    y1=\"0\"\n                    x2=\"0\"\n                    y2=\"1\"\n                  >\n                    <stop\n                      offset=\"5%\"\n                      stopColor={`var(--color-${key})`}\n                      stopOpacity={0.8}\n                    />\n                    <stop\n                      offset=\"95%\"\n                      stopColor={`var(--color-${key})`}\n                      stopOpacity={0.1}\n                    />\n                  </linearGradient>\n                ))}\n              </defs>\n            )}\n            {showGrid && <CartesianGrid vertical={false} />}\n            <XAxis\n              dataKey={xKey}\n              type=\"category\"\n              tickLine={false}\n              axisLine={false}\n              tickMargin={8}\n              height={xAxisLabel ? 48 : undefined}\n              label={xAxisTitle}\n            />\n            <YAxis\n              type=\"number\"\n              tickLine={false}\n              axisLine={false}\n              unit={yUnit}\n              width={yAxisLabel ? 72 : undefined}\n              label={yAxisTitle}\n            />\n            {showTooltip && (\n              <ChartTooltip content={tooltipContent ?? <ChartTooltipContent />} />\n            )}\n            {showLegend && <ChartLegend content={<ChartLegendContent />} />}\n            {dataKeys.map((key) => (\n              <Area\n                key={key}\n                type={curve ?? 'monotone'}\n                dataKey={key}\n                stackId={isStacked ? 'a' : undefined}\n                stroke={`var(--color-${key})`}\n                strokeWidth={strokeWidth}\n                fill={isGradient ? `url(#${gradientId}-${key})` : `var(--color-${key})`}\n                fillOpacity={isGradient ? 1 : fillOpacity}\n                dot={showDots ? { r: 3 } : false}\n                activeDot={showDots ? { r: 5 } : false}\n                connectNulls={connectNulls}\n                isAnimationActive={false}\n              />\n            ))}\n          </RechartsAreaChart>\n        </ChartContainer>\n      </div>\n    );\n  }\n);\nAreaChart.displayName = 'AreaChart';\n\nexport { AreaChart, areaChartVariants };\n"],"names":["areaChartVariants","cva","AreaChart","React","className","config","data","dataKeys","xKey","xAxisLabel","yAxisLabel","yUnit","layout","fill","curve","strokeWidth","fillOpacity","showDots","connectNulls","showGrid","showTooltip","showLegend","tooltipContent","props","ref","isStacked","isGradient","xAxisTitle","yAxisTitle","gradientId","jsx","cn","ChartContainer","jsxs","RechartsAreaChart","key","CartesianGrid","XAxis","YAxis","ChartTooltip","ChartTooltipContent","ChartLegend","ChartLegendContent","Area"],"mappings":"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"}
+{"version":3,"file":"area-chart.js","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  XAxis,\n  YAxis,\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  resolveChartReferenceValue,\n  resolveLabelFillClass,\n  resolveReferenceLineProps,\n  resolveRotatedTickAnchor,\n  resolveXAxisHeight,\n  resolveXAxisTitle,\n  resolveYAxisTitle,\n  toLabelFormatter,\n  toReferenceLineList,\n  type ChartConfig,\n  type CartesianChartProps,\n  type ChartAnimationProps,\n  type ChartBrushProps,\n  type ChartCurveType,\n  type ChartDataLabelProps,\n  type ChartReferenceLine,\n  type CartesianLabelPosition,\n} from '../chart';\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: 'gradient',\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  /** 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` / `color` (imported from the shared `Chart`\n   * primitives). Series colors are caller-supplied — reference an existing\n   * semantic `--ui-*` token; there is no chart palette tier yet.\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  showLegend?: boolean;\n  /** Position of the value labels when `showLabels` is on. Defaults to `top`. */\n  labelPosition?: CartesianLabelPosition;\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}-${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      data,\n      dataKeys,\n      xKey,\n      xAxisLabel,\n      yAxisLabel,\n      yUnit,\n      layout = 'single',\n      fill = 'gradient',\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      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-${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 xAxisHeight = resolveXAxisHeight(xAxisLabel, xAxisAngle);\n\n    // recharts renders SVG <defs> once per chart; the gradient ids must be unique\n    // across chart instances on the page. useId gives a stable per-instance id;\n    // strip the colons React emits (invalid in a url(#…) reference) — same guard\n    // the shared ChartContainer applies to its chart id.\n    const gradientId = `area-gradient-${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          config={config}\n          className=\"size-full [&_.recharts-label]:fill-foreground\"\n        >\n          <RechartsAreaChart\n            data={data as readonly unknown[]}\n            margin={hasLabels ? CHART_LABEL_MARGIN : undefined}\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={xTickFormatter}\n              angle={xAxisAngle}\n              interval={xAxisInterval}\n              textAnchor={resolveRotatedTickAnchor(xAxisAngle)}\n              height={xAxisHeight}\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 && (\n              <ChartTooltip content={tooltipContent ?? <ChartTooltipContent />} />\n            )}\n            {showLegend && <ChartLegend content={<ChartLegendContent />} />}\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}-${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                  {...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            {/* 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"],"names":["areaChartVariants","cva","AreaFillGradients","dataKeys","gradientId","colorFor","jsx","key","jsxs","AreaChart","React","className","config","data","xKey","xAxisLabel","yAxisLabel","yUnit","layout","fill","curve","strokeWidth","fillOpacity","showDots","dotSize","showActiveDot","connectNulls","areaSettings","referenceLine","showGrid","showTooltip","showLegend","showXAxis","showYAxis","xTickFormatter","yTickFormatter","xAxisAngle","xAxisInterval","yAxisTickCount","yAxisDomain","gridDashed","gridHorizontal","gridVertical","tooltipContent","animate","animationDuration","animationBegin","animationEasing","showLabels","labelPosition","labelFormatter","showBrush","brushHeight","brushAriaLabel","props","ref","animation","resolveAnimation","isStacked","areaLabelPosition","resolveCartesianLabelPosition","isGradient","referenceLines","toReferenceLineList","_a","hasLabels","settings","xAxisTitle","resolveXAxisTitle","yAxisTitle","resolveYAxisTitle","yDomain","resolveAxisDomain","xAxisHeight","resolveXAxisHeight","cn","ChartContainer","RechartsAreaChart","CHART_LABEL_MARGIN","CartesianGrid","XAxis","resolveRotatedTickAnchor","YAxis","ChartTooltip","ChartTooltipContent","ChartLegend","ChartLegendContent","seriesDots","dotRadius","activeDot","seriesLabel","seriesLabelPosition","Area","LabelList","toLabelFormatter","resolveLabelFillClass","CHART_LABEL_FONT_SIZE","index","value","resolveChartReferenceValue","ReferenceLine","resolveReferenceLineProps","Brush","resolveBrushProps"],"mappings":"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"}

package/dist/components/ui/avatar/avatar.js

@@ -1,9 +1,9 @@
-import { jsx as e } from "react/jsx-runtime";
+import { jsx as t } from "react/jsx-runtime";
 import * as o from "react";
 import { Avatar as v } from "@base-ui/react/avatar";
-import { cva as s } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
+import { cva as c } from "../../../node_modules/.pnpm/class-variance-authority@0.7.1/node_modules/class-variance-authority/dist/index.js";
 import { cn as l } from "../../../lib/utils.js";
-const c = s(
+const s = c(
   "relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden size-[var(--ui-avatar-global-avatar-size)] rounded-[var(--ui-avatar-global-avatar-border-border-radius)] [box-shadow:0_0_0_var(--ui-avatar-global-avatar-border-border-width)_var(--ui-avatar-global-avatar-border-color)] text-xs font-semibold leading-4",
   {
     variants: {
@@ -12,45 +12,48 @@ const c = s(
         violet: "bg-[var(--ui-avatar-color-violet)] text-[var(--ui-avatar-label-color-violet)]",
         red: "bg-[var(--ui-avatar-color-red)] text-[var(--ui-avatar-label-color-red)]",
         yellow: "bg-[var(--ui-avatar-color-yellow)] text-[var(--ui-avatar-label-color-yellow)]",
-        orange: "bg-[var(--ui-avatar-color-orange)] text-[var(--ui-avatar-label-color-orange)]"
+        orange: "bg-[var(--ui-avatar-color-orange)] text-[var(--ui-avatar-label-color-orange)]",
+        blue: "bg-[var(--ui-avatar-color-blue)] text-[var(--ui-avatar-label-color-blue)]",
+        gray: "bg-[var(--ui-avatar-color-gray)] text-[var(--ui-avatar-label-color-gray)]",
+        green: "bg-[var(--ui-avatar-color-green)] text-[var(--ui-avatar-label-color-green)]"
       }
     },
     defaultVariants: {
       color: "teal"
     }
   }
-), d = o.forwardRef(({ className: a, color: r, ...t }, i) => /* @__PURE__ */ e(
+), b = o.forwardRef(({ className: a, color: r, ...e }, i) => /* @__PURE__ */ t(
   v.Root,
   {
     ref: i,
-    className: l(c({ color: r }), a),
-    ...t
+    className: l(s({ color: r }), a),
+    ...e
   }
 ));
-d.displayName = "Avatar";
-const n = o.forwardRef(({ className: a, ...r }, t) => /* @__PURE__ */ e(
+b.displayName = "Avatar";
+const u = o.forwardRef(({ className: a, ...r }, e) => /* @__PURE__ */ t(
   v.Image,
   {
-    ref: t,
+    ref: e,
     className: l("size-full object-cover", a),
     ...r
   }
 ));
-n.displayName = "AvatarImage";
-const b = o.forwardRef(({ className: a, ...r }, t) => /* @__PURE__ */ e(
+u.displayName = "AvatarImage";
+const n = o.forwardRef(({ className: a, ...r }, e) => /* @__PURE__ */ t(
   v.Fallback,
   {
-    ref: t,
+    ref: e,
     className: l("flex size-full items-center justify-center", a),
     ...r
   }
 ));
-b.displayName = "AvatarFallback";
-const m = o.forwardRef(
-  ({ className: a, ...r }, t) => /* @__PURE__ */ e(
+n.displayName = "AvatarFallback";
+const d = o.forwardRef(
+  ({ className: a, ...r }, e) => /* @__PURE__ */ t(
     "div",
     {
-      ref: t,
+      ref: e,
       className: l(
         "flex items-center [&>*:not(:first-child)]:ms-[var(--ui-avatar-global-avatar-group-gap)]",
         a
@@ -59,12 +62,12 @@ const m = o.forwardRef(
     }
   )
 );
-m.displayName = "AvatarGroup";
+d.displayName = "AvatarGroup";
 export {
-  d as Avatar,
-  b as AvatarFallback,
-  m as AvatarGroup,
-  n as AvatarImage,
-  c as avatarVariants
+  b as Avatar,
+  n as AvatarFallback,
+  d as AvatarGroup,
+  u as AvatarImage,
+  s as avatarVariants
 };
 //# sourceMappingURL=avatar.js.map

package/dist/components/ui/avatar/avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.js","sources":["../../../../src/components/ui/avatar/avatar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Avatar as AvatarPrimitive } from '@base-ui/react/avatar';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\n// Wraps Base UI's Avatar primitive (Root / Image / Fallback), themed by the\n// dedicated next-gen `--ui-avatar-*` token tier from @acronis-platform/tokens-pd.\n// A 32px circle (`--ui-avatar-global-avatar-size` / `-border-border-radius`) with a 2px\n// ring (`-border-border-width` / `-border-color`) — the ring is what visually\n// separates avatars when they overlap in an `AvatarGroup`. When no image is set\n// (or it fails to load) the `AvatarFallback` shows initials.\n//\n// The ring is a `box-shadow`, not a CSS `border`: Figma draws the 2px stroke\n// with `strokeAlign: OUTSIDE`, so the 32px is the *colored circle* and the ring\n// sits outside it. A CSS border would be drawn inside the border-box, shrinking\n// the visible circle to 28px (PLTFRM-92393). A box-shadow ring paints outside\n// without inflating the 32px layout box, so the `AvatarGroup` overlap step\n// (32px − 6px gap) still matches the design.\n//\n// It is written as a raw `[box-shadow:…]` arbitrary property, not Tailwind's\n// `shadow-[…]` utility: the utility routes the value through `--tw-shadow-color`\n// (`0 0 0 var(--tw-shadow-color, <spread>) <color>`), which resolves\n// inconsistently for a spread-only ring across engine versions. The raw property\n// emits the literal declaration so every renderer draws the same 2px outset ring.\n//\n// `color` selects one of the five Figma color schemes; it tints the fallback\n// background (`--ui-avatar-color-<scheme>`) and the initials\n// (`--ui-avatar-label-color-<scheme>`). Initials use the 12px/16px/600 caption\n// style baked into the design (`text-xs font-semibold leading-4`).\nconst avatarVariants = cva(\n  'relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden ' +\n    'size-[var(--ui-avatar-global-avatar-size)] rounded-[var(--ui-avatar-global-avatar-border-border-radius)] ' +\n    '[box-shadow:0_0_0_var(--ui-avatar-global-avatar-border-border-width)_var(--ui-avatar-global-avatar-border-color)] ' +\n    'text-xs font-semibold leading-4',\n  {\n    variants: {\n      color: {\n        teal: 'bg-[var(--ui-avatar-color-teal)] text-[var(--ui-avatar-label-color-teal)]',\n        violet:\n          'bg-[var(--ui-avatar-color-violet)] text-[var(--ui-avatar-label-color-violet)]',\n        red: 'bg-[var(--ui-avatar-color-red)] text-[var(--ui-avatar-label-color-red)]',\n        yellow:\n          'bg-[var(--ui-avatar-color-yellow)] text-[var(--ui-avatar-label-color-yellow)]',\n        orange:\n          'bg-[var(--ui-avatar-color-orange)] text-[var(--ui-avatar-label-color-orange)]',\n      },\n    },\n    defaultVariants: {\n      color: 'teal',\n    },\n  }\n);\n\nexport interface AvatarProps\n  extends\n    React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,\n    VariantProps<typeof avatarVariants> {}\n\n/**\n * A user/entity avatar: a colored circle showing an image or initials. Compose\n * `AvatarImage` and/or `AvatarFallback` inside; stack several in `AvatarGroup`.\n */\nconst Avatar = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Root>,\n  AvatarProps\n>(({ className, color, ...props }, ref) => (\n  <AvatarPrimitive.Root\n    ref={ref}\n    className={cn(avatarVariants({ color }), className)}\n    {...props}\n  />\n));\nAvatar.displayName = 'Avatar';\n\nexport type AvatarImageProps = React.ComponentPropsWithoutRef<\n  typeof AvatarPrimitive.Image\n>;\n\n/** The avatar image; hidden by Base UI until it loads, revealing the fallback. */\nconst AvatarImage = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Image>,\n  AvatarImageProps\n>(({ className, ...props }, ref) => (\n  <AvatarPrimitive.Image\n    ref={ref}\n    className={cn('size-full object-cover', className)}\n    {...props}\n  />\n));\nAvatarImage.displayName = 'AvatarImage';\n\nexport type AvatarFallbackProps = React.ComponentPropsWithoutRef<\n  typeof AvatarPrimitive.Fallback\n>;\n\n/** Shown when there's no image (or it fails) — typically the user's initials. */\nconst AvatarFallback = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Fallback>,\n  AvatarFallbackProps\n>(({ className, ...props }, ref) => (\n  <AvatarPrimitive.Fallback\n    ref={ref}\n    className={cn('flex size-full items-center justify-center', className)}\n    {...props}\n  />\n));\nAvatarFallback.displayName = 'AvatarFallback';\n\nexport type AvatarGroupProps = React.HTMLAttributes<HTMLDivElement>;\n\n/**\n * Overlapping stack of avatars. Each avatar after the first is pulled left by\n * `--ui-avatar-global-avatar-group-gap` (a negative offset), so their 2px\n * borders form the layered look; later avatars render above earlier ones.\n */\nconst AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        'flex items-center [&>*:not(:first-child)]:ms-[var(--ui-avatar-global-avatar-group-gap)]',\n        className\n      )}\n      {...props}\n    />\n  )\n);\nAvatarGroup.displayName = 'AvatarGroup';\n\nexport { Avatar, AvatarImage, AvatarFallback, AvatarGroup, avatarVariants };\n"],"names":["avatarVariants","cva","Avatar","React","className","color","props","ref","jsx","AvatarPrimitive","cn","AvatarImage","AvatarFallback","AvatarGroup"],"mappings":";;;;;AA8BA,MAAMA,IAAiBC;AAAA,EACrB;AAAA,EAIA;AAAA,IACE,UAAU;AAAA,MACR,OAAO;AAAA,QACL,MAAM;AAAA,QACN,QACE;AAAA,QACF,KAAK;AAAA,QACL,QACE;AAAA,QACF,QACE;AAAA,MAAA;AAAA,IACJ;AAAA,IAEF,iBAAiB;AAAA,MACf,OAAO;AAAA,IAAA;AAAA,EACT;AAEJ,GAWMC,IAASC,EAAM,WAGnB,CAAC,EAAE,WAAAC,GAAW,OAAAC,GAAO,GAAGC,KAASC,MACjC,gBAAAC;AAAA,EAACC,EAAgB;AAAA,EAAhB;AAAA,IACC,KAAAF;AAAA,IACA,WAAWG,EAAGV,EAAe,EAAE,OAAAK,EAAA,CAAO,GAAGD,CAAS;AAAA,IACjD,GAAGE;AAAA,EAAA;AACN,CACD;AACDJ,EAAO,cAAc;AAOrB,MAAMS,IAAcR,EAAM,WAGxB,CAAC,EAAE,WAAAC,GAAW,GAAGE,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAACC,EAAgB;AAAA,EAAhB;AAAA,IACC,KAAAF;AAAA,IACA,WAAWG,EAAG,0BAA0BN,CAAS;AAAA,IAChD,GAAGE;AAAA,EAAA;AACN,CACD;AACDK,EAAY,cAAc;AAO1B,MAAMC,IAAiBT,EAAM,WAG3B,CAAC,EAAE,WAAAC,GAAW,GAAGE,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAACC,EAAgB;AAAA,EAAhB;AAAA,IACC,KAAAF;AAAA,IACA,WAAWG,EAAG,8CAA8CN,CAAS;AAAA,IACpE,GAAGE;AAAA,EAAA;AACN,CACD;AACDM,EAAe,cAAc;AAS7B,MAAMC,IAAcV,EAAM;AAAA,EACxB,CAAC,EAAE,WAAAC,GAAW,GAAGE,EAAA,GAASC,MACxB,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,WAAWG;AAAA,QACT;AAAA,QACAN;AAAA,MAAA;AAAA,MAED,GAAGE;AAAA,IAAA;AAAA,EAAA;AAGV;AACAO,EAAY,cAAc;"}
+{"version":3,"file":"avatar.js","sources":["../../../../src/components/ui/avatar/avatar.tsx"],"sourcesContent":["import * as React from 'react';\nimport { Avatar as AvatarPrimitive } from '@base-ui/react/avatar';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\n\n// Wraps Base UI's Avatar primitive (Root / Image / Fallback), themed by the\n// dedicated next-gen `--ui-avatar-*` token tier from @acronis-platform/tokens-pd.\n// A 32px circle (`--ui-avatar-global-avatar-size` / `-border-border-radius`) with a 2px\n// ring (`-border-border-width` / `-border-color`) — the ring is what visually\n// separates avatars when they overlap in an `AvatarGroup`. When no image is set\n// (or it fails to load) the `AvatarFallback` shows initials.\n//\n// The ring is a `box-shadow`, not a CSS `border`: Figma draws the 2px stroke\n// with `strokeAlign: OUTSIDE`, so the 32px is the *colored circle* and the ring\n// sits outside it. A CSS border would be drawn inside the border-box, shrinking\n// the visible circle to 28px (PLTFRM-92393). A box-shadow ring paints outside\n// without inflating the 32px layout box, so the `AvatarGroup` overlap step\n// (32px − 6px gap) still matches the design.\n//\n// It is written as a raw `[box-shadow:…]` arbitrary property, not Tailwind's\n// `shadow-[…]` utility: the utility routes the value through `--tw-shadow-color`\n// (`0 0 0 var(--tw-shadow-color, <spread>) <color>`), which resolves\n// inconsistently for a spread-only ring across engine versions. The raw property\n// emits the literal declaration so every renderer draws the same 2px outset ring.\n//\n// `color` selects one of the eight Figma color schemes; it tints the fallback\n// background (`--ui-avatar-color-<scheme>`) and the initials\n// (`--ui-avatar-label-color-<scheme>`). Initials use the 12px/16px/600 caption\n// style baked into the design (`text-xs font-semibold leading-4`).\nconst avatarVariants = cva(\n  'relative inline-flex shrink-0 select-none items-center justify-center overflow-hidden ' +\n    'size-[var(--ui-avatar-global-avatar-size)] rounded-[var(--ui-avatar-global-avatar-border-border-radius)] ' +\n    '[box-shadow:0_0_0_var(--ui-avatar-global-avatar-border-border-width)_var(--ui-avatar-global-avatar-border-color)] ' +\n    'text-xs font-semibold leading-4',\n  {\n    variants: {\n      color: {\n        teal: 'bg-[var(--ui-avatar-color-teal)] text-[var(--ui-avatar-label-color-teal)]',\n        violet:\n          'bg-[var(--ui-avatar-color-violet)] text-[var(--ui-avatar-label-color-violet)]',\n        red: 'bg-[var(--ui-avatar-color-red)] text-[var(--ui-avatar-label-color-red)]',\n        yellow:\n          'bg-[var(--ui-avatar-color-yellow)] text-[var(--ui-avatar-label-color-yellow)]',\n        orange:\n          'bg-[var(--ui-avatar-color-orange)] text-[var(--ui-avatar-label-color-orange)]',\n        blue: 'bg-[var(--ui-avatar-color-blue)] text-[var(--ui-avatar-label-color-blue)]',\n        gray: 'bg-[var(--ui-avatar-color-gray)] text-[var(--ui-avatar-label-color-gray)]',\n        green:\n          'bg-[var(--ui-avatar-color-green)] text-[var(--ui-avatar-label-color-green)]',\n      },\n    },\n    defaultVariants: {\n      color: 'teal',\n    },\n  }\n);\n\nexport interface AvatarProps\n  extends\n    React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,\n    VariantProps<typeof avatarVariants> {}\n\n/**\n * A user/entity avatar: a colored circle showing an image or initials. Compose\n * `AvatarImage` and/or `AvatarFallback` inside; stack several in `AvatarGroup`.\n */\nconst Avatar = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Root>,\n  AvatarProps\n>(({ className, color, ...props }, ref) => (\n  <AvatarPrimitive.Root\n    ref={ref}\n    className={cn(avatarVariants({ color }), className)}\n    {...props}\n  />\n));\nAvatar.displayName = 'Avatar';\n\nexport type AvatarImageProps = React.ComponentPropsWithoutRef<\n  typeof AvatarPrimitive.Image\n>;\n\n/** The avatar image; hidden by Base UI until it loads, revealing the fallback. */\nconst AvatarImage = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Image>,\n  AvatarImageProps\n>(({ className, ...props }, ref) => (\n  <AvatarPrimitive.Image\n    ref={ref}\n    className={cn('size-full object-cover', className)}\n    {...props}\n  />\n));\nAvatarImage.displayName = 'AvatarImage';\n\nexport type AvatarFallbackProps = React.ComponentPropsWithoutRef<\n  typeof AvatarPrimitive.Fallback\n>;\n\n/** Shown when there's no image (or it fails) — typically the user's initials. */\nconst AvatarFallback = React.forwardRef<\n  React.ElementRef<typeof AvatarPrimitive.Fallback>,\n  AvatarFallbackProps\n>(({ className, ...props }, ref) => (\n  <AvatarPrimitive.Fallback\n    ref={ref}\n    className={cn('flex size-full items-center justify-center', className)}\n    {...props}\n  />\n));\nAvatarFallback.displayName = 'AvatarFallback';\n\nexport type AvatarGroupProps = React.HTMLAttributes<HTMLDivElement>;\n\n/**\n * Overlapping stack of avatars. Each avatar after the first is pulled left by\n * `--ui-avatar-global-avatar-group-gap` (a negative offset), so their 2px\n * borders form the layered look; later avatars render above earlier ones.\n */\nconst AvatarGroup = React.forwardRef<HTMLDivElement, AvatarGroupProps>(\n  ({ className, ...props }, ref) => (\n    <div\n      ref={ref}\n      className={cn(\n        'flex items-center [&>*:not(:first-child)]:ms-[var(--ui-avatar-global-avatar-group-gap)]',\n        className\n      )}\n      {...props}\n    />\n  )\n);\nAvatarGroup.displayName = 'AvatarGroup';\n\nexport { Avatar, AvatarImage, AvatarFallback, AvatarGroup, avatarVariants };\n"],"names":["avatarVariants","cva","Avatar","React","className","color","props","ref","jsx","AvatarPrimitive","cn","AvatarImage","AvatarFallback","AvatarGroup"],"mappings":";;;;;AA8BA,MAAMA,IAAiBC;AAAA,EACrB;AAAA,EAIA;AAAA,IACE,UAAU;AAAA,MACR,OAAO;AAAA,QACL,MAAM;AAAA,QACN,QACE;AAAA,QACF,KAAK;AAAA,QACL,QACE;AAAA,QACF,QACE;AAAA,QACF,MAAM;AAAA,QACN,MAAM;AAAA,QACN,OACE;AAAA,MAAA;AAAA,IACJ;AAAA,IAEF,iBAAiB;AAAA,MACf,OAAO;AAAA,IAAA;AAAA,EACT;AAEJ,GAWMC,IAASC,EAAM,WAGnB,CAAC,EAAE,WAAAC,GAAW,OAAAC,GAAO,GAAGC,KAASC,MACjC,gBAAAC;AAAA,EAACC,EAAgB;AAAA,EAAhB;AAAA,IACC,KAAAF;AAAA,IACA,WAAWG,EAAGV,EAAe,EAAE,OAAAK,EAAA,CAAO,GAAGD,CAAS;AAAA,IACjD,GAAGE;AAAA,EAAA;AACN,CACD;AACDJ,EAAO,cAAc;AAOrB,MAAMS,IAAcR,EAAM,WAGxB,CAAC,EAAE,WAAAC,GAAW,GAAGE,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAACC,EAAgB;AAAA,EAAhB;AAAA,IACC,KAAAF;AAAA,IACA,WAAWG,EAAG,0BAA0BN,CAAS;AAAA,IAChD,GAAGE;AAAA,EAAA;AACN,CACD;AACDK,EAAY,cAAc;AAO1B,MAAMC,IAAiBT,EAAM,WAG3B,CAAC,EAAE,WAAAC,GAAW,GAAGE,EAAA,GAASC,MAC1B,gBAAAC;AAAA,EAACC,EAAgB;AAAA,EAAhB;AAAA,IACC,KAAAF;AAAA,IACA,WAAWG,EAAG,8CAA8CN,CAAS;AAAA,IACpE,GAAGE;AAAA,EAAA;AACN,CACD;AACDM,EAAe,cAAc;AAS7B,MAAMC,IAAcV,EAAM;AAAA,EACxB,CAAC,EAAE,WAAAC,GAAW,GAAGE,EAAA,GAASC,MACxB,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAAD;AAAA,MACA,WAAWG;AAAA,QACT;AAAA,QACAN;AAAA,MAAA;AAAA,MAED,GAAGE;AAAA,IAAA;AAAA,EAAA;AAGV;AACAO,EAAY,cAAc;"}