@taiv/ui 1.2.0 → 1.3.0

package/dist/components/Data/Cards/ChartCard.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { CardProps } from '../../Layout/Card';
+import { ChartProps } from '../Chart';
+export interface ChartCardProps extends ChartProps, Omit<CardProps, 'children'> {
+    title: string;
+    subtitle?: string;
+}
+export declare const ChartCard: React.FC<ChartCardProps>;
+//# sourceMappingURL=ChartCard.d.ts.map

package/dist/components/Data/Cards/ChartCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChartCard.d.ts","sourceRoot":"","sources":["../../../../src/components/Data/Cards/ChartCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAQ,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAS,UAAU,EAAE,MAAM,UAAU,CAAC;AAK7C,MAAM,WAAW,cAAe,SAAQ,UAAU,EAAE,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IAC7E,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAED,eAAO,MAAM,SAAS,EAAE,KAAK,CAAC,EAAE,CAAC,cAAc,CAe9C,CAAC"}

package/dist/components/Data/Cards/ChartCard.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Card } from '../../Layout/Card';
+import { Chart } from '../Chart';
+import { Stack } from '../../Layout/Stack';
+import { Title } from '../../Typography/Title';
+import { Text } from '../../Typography/Text';
+export const ChartCard = ({ title, subtitle, series, yAxisFormat, xAxisFormat, showLegend, loading, height = '30rem', ...cardProps }) => {
+    return (_jsxs(_Fragment, { children: [_jsx(Card, { ...cardProps, h: height, children: _jsxs(Stack, { gap: "2.4rem", h: "100%", w: "100%", children: [_jsxs(Stack, { gap: "0.5rem", children: [_jsx(Title, { variant: "cardHeader", children: title }), subtitle && _jsx(Text, { variant: "label", children: subtitle })] }), _jsx(Chart, { series: series, yAxisFormat: yAxisFormat, xAxisFormat: xAxisFormat, showLegend: showLegend, loading: loading })] }) }), _jsx("style", { children: `.recharts-surface { outline: none; }` })] }));
+};

package/dist/components/Data/Cards/PieChartCard.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import { CardProps } from '../../Layout/Card';
+import { PieChartProps } from '../PieChart';
+export interface PieChartCardProps extends PieChartProps, Omit<CardProps, 'children'> {
+    title: string;
+    subtitle?: string;
+    height?: number | string;
+}
+export declare const PieChartCard: React.FC<PieChartCardProps>;
+//# sourceMappingURL=PieChartCard.d.ts.map

package/dist/components/Data/Cards/PieChartCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PieChartCard.d.ts","sourceRoot":"","sources":["../../../../src/components/Data/Cards/PieChartCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAQ,SAAS,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAY,aAAa,EAAE,MAAM,aAAa,CAAC;AAKtD,MAAM,WAAW,iBAAkB,SAAQ,aAAa,EAAE,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IACnF,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAqCpD,CAAC"}

package/dist/components/Data/Cards/PieChartCard.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Card } from '../../Layout/Card';
+import { PieChart } from '../PieChart';
+import { Stack } from '../../Layout/Stack';
+import { Title } from '../../Typography/Title';
+import { Text } from '../../Typography/Text';
+export const PieChartCard = ({ title, subtitle, data, height = '100%', showLegend, innerRadius, outerRadius, paddingAngle, format = 'percentage', loading, centerContent, ...cardProps }) => {
+    return (_jsxs(_Fragment, { children: [_jsx(Card, { ...cardProps, h: height, children: _jsxs(Stack, { gap: "0rem", h: "100%", w: "100%", children: [_jsxs(Stack, { gap: "0.5rem", children: [_jsx(Title, { variant: "cardHeader", children: title }), subtitle && _jsx(Text, { variant: "label", children: subtitle })] }), _jsx(PieChart, { data: data, showLegend: showLegend, innerRadius: innerRadius, outerRadius: outerRadius, paddingAngle: paddingAngle, format: format, loading: loading, centerContent: centerContent })] }) }), _jsx("style", { children: `.recharts-surface { outline: none; }` })] }));
+};

package/dist/components/Data/Cards/StatsCard.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+import { CardProps } from '../../Layout/Card';
+import { primitives } from '../../../constants/colors';
+import { formats } from '../../../constants/data';
+export interface StatsCardProps extends Omit<CardProps, 'children'> {
+    value: number;
+    title: string;
+    description?: string;
+    format?: keyof typeof formats;
+    isDelta?: boolean;
+    icon?: React.ReactNode;
+    iconColor?: keyof typeof primitives;
+    tooltip?: React.ReactNode;
+    increaseDescription?: string;
+}
+export declare const StatsCard: ({ value, format, isDelta, title, description, increaseDescription, icon: Icon, iconColor, tooltip, ...cardProps }: StatsCardProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=StatsCard.d.ts.map

package/dist/components/Data/Cards/StatsCard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"StatsCard.d.ts","sourceRoot":"","sources":["../../../../src/components/Data/Cards/StatsCard.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAQ,SAAS,EAAE,MAAM,mBAAmB,CAAC;AAOpD,OAAO,EAAE,UAAU,EAAoB,MAAM,2BAA2B,CAAC;AACzE,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAElD,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IACjE,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,OAAO,OAAO,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,SAAS,CAAC,EAAE,MAAM,OAAO,UAAU,CAAC;IACpC,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,mBAAmB,CAAC,EAAE,MAAM,CAAC;CAC9B;AAED,eAAO,MAAM,SAAS,GAAI,mHAAgJ,cAAc,4CA4DvL,CAAC"}

package/dist/components/Data/Cards/StatsCard.js

@@ -0,0 +1,38 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card } from '../../Layout/Card';
+import { InfoTooltip } from '../../Info/Tooltips/InfoTooltip';
+import { Text } from '../../Typography/Text';
+import { Title } from '../../Typography/Title';
+import { Group } from '../../Layout/Group';
+import { Stack } from '../../Layout/Stack';
+import { IconBadge } from '../../Misc/IconBadge';
+import { success, neutral } from '../../../constants/colors';
+import { formats } from '../../../constants/data';
+export const StatsCard = ({ value, format = 'decimal', isDelta = false, title, description, increaseDescription, icon: Icon, iconColor = 'blue', tooltip, ...cardProps }) => {
+    const getDelta = () => {
+        const currentDirection = isDelta ? (value > 0 ? 'positive' : value < 0 ? 'negative' : null) : null;
+        return {
+            direction: currentDirection,
+            color: currentDirection === 'positive' ? success[200] : currentDirection === 'negative' ? neutral[200] : undefined,
+            showIncrementalText: currentDirection === 'positive',
+        };
+    };
+    const delta = getDelta();
+    const formatValue = () => {
+        const config = formats[format];
+        const formattedNumber = value.toLocaleString('en-US', {
+            minimumFractionDigits: config.decimalPlaces,
+            maximumFractionDigits: config.decimalPlaces,
+        });
+        let result = formattedNumber;
+        if (delta.direction === 'positive') {
+            result = `+${result}`;
+        }
+        else if (delta.direction === 'negative') {
+            result = `-${result}`;
+        }
+        result = `${config.prefix}${result}${config.suffix}`;
+        return result;
+    };
+    return (_jsx(Card, { bg: neutral[25], animate: true, ...cardProps, children: _jsxs(Stack, { gap: "1.6rem", children: [_jsxs(Stack, { gap: "0.25rem", children: [_jsxs(Group, { position: "apart", children: [_jsx(Title, { size: "3xl", weight: "bold", children: formatValue() }), Icon && _jsx(IconBadge, { icon: Icon, color: iconColor })] }), _jsxs(Group, { gap: "0.75rem", children: [_jsx(Title, { variant: "cardHeader", color: "#6D6D6D", weight: "medium", children: title }), tooltip && _jsx(InfoTooltip, { text: tooltip, maxWidth: "600px" })] })] }), _jsxs(Stack, { gap: "0", children: [description && _jsx(Text, { variant: "label", children: description }), delta.showIncrementalText && increaseDescription && (_jsx(Text, { variant: "label", color: delta.color, children: increaseDescription }))] })] }) }));
+};

package/dist/components/Data/Chart.d.ts

@@ -1,32 +1,13 @@
 import React from 'react';
-import { CardProps } from '../Layout/Card';
-import { dataFormats } from './shared/dataFormats';
-export interface ChartDataPoint {
-    date: string | number;
-    value: number;
-    label?: string;
-}
-export interface ChartSeries {
-    name: string;
-    data: ChartDataPoint[];
-    color?: string;
-    type?: 'line' | 'area' | 'bar';
-}
-export interface ChartProps extends Omit<CardProps, 'children'> {
-    title: string;
-    subtitle?: string;
+import { formats } from '../../constants/data';
+import { ChartSeries } from '../../types/types';
+export interface ChartProps {
     series: ChartSeries[];
+    yAxisFormat?: keyof typeof formats;
+    xAxisFormat?: keyof typeof formats;
     height?: string | number;
     showLegend?: boolean;
-    showGrid?: boolean;
-    xAxisLabel?: string;
-    yAxisLabel?: string;
-    format?: keyof typeof dataFormats;
-    formatYAxis?: (value: number) => string;
-    formatXAxis?: (value: string | number) => string;
-    tooltipContent?: (data: any) => React.ReactNode;
     loading?: boolean;
-    emptyMessage?: string;
 }
 export declare const Chart: React.FC<ChartProps>;
 //# sourceMappingURL=Chart.d.ts.map

package/dist/components/Data/Chart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Chart.d.ts","sourceRoot":"","sources":["../../../src/components/Data/Chart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAQ,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAQjD,OAAO,EAAE,WAAW,EAAgB,MAAM,sBAAsB,CAAC;AAEjE,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,cAAc,EAAE,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,KAAK,CAAC;CAChC;AAED,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IAC7D,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,MAAM,EAAE,WAAW,EAAE,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IAGpB,MAAM,CAAC,EAAE,MAAM,OAAO,WAAW,CAAC;IAClC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,MAAM,CAAC;IAEjD,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,KAAK,CAAC,SAAS,CAAC;IAChD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAyOtC,CAAC"}
+{"version":3,"file":"Chart.d.ts","sourceRoot":"","sources":["../../../src/components/Data/Chart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAO1B,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAI/C,OAAO,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAGhD,MAAM,WAAW,UAAU;IACzB,MAAM,EAAE,WAAW,EAAE,CAAC;IACtB,WAAW,CAAC,EAAE,MAAM,OAAO,OAAO,CAAC;IACnC,WAAW,CAAC,EAAE,MAAM,OAAO,OAAO,CAAC;IACnC,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAkKtC,CAAC"}

package/dist/components/Data/Chart.js

@@ -1,97 +1,80 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Card } from '../Layout/Card';
 import { Text } from '../Typography/Text';
-import { Title } from '../Typography/Title';
-import { Stack } from '../Layout/Stack';
 import { Center } from '../Layout/Center';
-import { primary, neutral } from '../../constants/colors';
-import { Area, Bar, CartesianGrid, ComposedChart, Legend, Line, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
+import { Box } from '../Layout/Box';
+import { Stack } from '../Layout/Stack';
 import { Group } from '../Layout/Group';
-import { chartFormats } from './shared/dataFormats';
-export const Chart = ({ title, subtitle, series, height = 300, showLegend = true, showGrid = true, xAxisLabel, yAxisLabel, 
-// New formatting props
-format = 'decimal', // Default format
-formatYAxis, // Custom formatter
-formatXAxis = (value) => value.toString(), tooltipContent, loading = false, emptyMessage = 'No data available', ...cardProps }) => {
-    var _a;
-    // Create the Y-axis formatter function
-    const getYAxisFormatter = () => {
-        // If custom formatYAxis is provided, use it (takes priority)
-        if (formatYAxis) {
-            return formatYAxis;
-        }
-        // Otherwise, use the smart chart format
-        return chartFormats[format];
-    };
-    const yAxisFormatter = getYAxisFormatter();
+import { Area, Bar, CartesianGrid, ComposedChart, Legend, Line, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
+import { getChartFormatter } from '../../utils/charts';
+import { fontStyle } from '../../constants/font';
+import { primary, neutral } from '../../constants/colors';
+import { createStyles } from '@mantine/core';
+export const Chart = ({ series, yAxisFormat = 'decimal', xAxisFormat = 'string', showLegend = true, loading = false, height = '100%' }) => {
+    const formatYAxisValue = getChartFormatter(yAxisFormat);
+    const formatXAxisValue = getChartFormatter(xAxisFormat);
     const hasData = series.some((s) => s.data.length > 0);
-    // Custom tick components using our Text component
-    const CustomXAxisTick = (props) => {
-        const { x, y, payload } = props;
-        return (_jsx("g", { transform: `translate(${x},${y})`, children: _jsx("foreignObject", { x: -50, y: 0, width: 100, height: 20, children: _jsx("div", { style: { display: 'flex', justifyContent: 'center' }, children: _jsx(Text, { variant: "label", children: formatXAxis(payload.value) }) }) }) }));
-    };
-    const CustomYAxisTick = (props) => {
-        const { x, y, payload } = props;
-        return (_jsx("g", { transform: `translate(${x},${y})`, children: _jsx("foreignObject", { x: -35, y: -10, width: 35, height: 20, children: _jsx("div", { style: { display: 'flex', justifyContent: 'flex-end', alignItems: 'center', height: '100%' }, children: _jsx(Text, { variant: "label", children: yAxisFormatter(payload.value) }) }) }) }));
-    };
-    if (loading) {
-        return (_jsx(Card, { ...cardProps, children: _jsxs(Stack, { gap: "1rem", children: [_jsx(Title, { variant: "cardHeader", children: title }), subtitle && _jsx(Text, { variant: "label", children: subtitle }), _jsx(Center, { style: { height, backgroundColor: neutral[25], borderRadius: '8px' }, children: _jsx(Text, { variant: "label", color: neutral[200], children: "Loading..." }) })] }) }));
-    }
-    if (!hasData) {
-        return (_jsx(Card, { ...cardProps, children: _jsxs(Stack, { gap: "1rem", children: [_jsx(Title, { variant: "cardHeader", children: title }), subtitle && _jsx(Text, { variant: "label", children: subtitle }), _jsx(Center, { style: { height, backgroundColor: neutral[25], borderRadius: '8px' }, children: _jsx(Text, { variant: "label", color: neutral[200], children: emptyMessage }) })] }) }));
-    }
-    // Transform data to match Recharts format
-    const chartData = (_a = series[0]) === null || _a === void 0 ? void 0 : _a.data.map((point, index) => {
-        const dataPoint = { date: point.date };
-        series.forEach((s, seriesIndex) => {
-            if (s.data[index]) {
-                dataPoint[s.name] = s.data[index].value;
-            }
+    // Transform our ChartSeries array to match the Recharts format (just a singular data array keyed by the series name)
+    const transformedData = (() => {
+        if (!series.length)
+            return [];
+        return series[0].data.map((_, i) => {
+            const point = { key: series[0].data[i].key };
+            series.forEach((s) => {
+                point[s.name] = s.data[i].value;
+            });
+            return point;
         });
-        return dataPoint;
-    });
-    // Custom tooltip component
-    const CustomTooltip = ({ active, payload, label }) => {
+    })();
+    const getTooltip = (props) => {
+        const { active, payload, label } = props;
         if (active && payload && payload.length) {
-            return (_jsxs("div", { style: {
+            return (_jsx(Box, { sx: {
                     backgroundColor: 'white',
-                    padding: '10px',
+                    padding: '1rem',
                     border: `1px solid ${neutral[100]}`,
                     borderRadius: '8px',
                     boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
-                }, children: [_jsx(Text, { weight: "semibold", color: neutral[300], children: formatXAxis(label) }), payload.map((entry) => (_jsxs(Group, { children: [_jsx("div", { style: {
-                                    width: '8px',
-                                    height: '8px',
-                                    borderRadius: '50%',
-                                    backgroundColor: entry.color,
-                                } }), _jsxs(Group, { gap: "0.25rem", children: [_jsxs(Text, { variant: "label", color: neutral[300], children: [entry.name, ":"] }), _jsx(Text, { variant: "label", children: yAxisFormatter(entry.value) })] })] }, entry.name)))] }));
+                }, children: _jsxs(Stack, { gap: "0.25rem", children: [_jsx(Text, { weight: "semibold", color: neutral[300], children: formatXAxisValue(label) }), payload.map((entry) => (_jsxs(Group, { gap: "0.5rem", children: [_jsx("div", { style: {
+                                        width: '8px',
+                                        height: '8px',
+                                        borderRadius: '50%',
+                                        backgroundColor: entry.color,
+                                    } }), _jsxs(Group, { gap: "0.25rem", children: [_jsxs(Text, { variant: "label", color: neutral[300], children: [entry.name, ":"] }), _jsx(Text, { variant: "label", children: formatYAxisValue(entry.value) })] })] }, entry.name)))] }) }));
         }
         return null;
     };
-    return (_jsxs(_Fragment, { children: [_jsx(Card, { ...cardProps, children: _jsxs(Stack, { gap: "1rem", children: [_jsxs(Stack, { gap: "0.5rem", children: [_jsx(Title, { variant: "cardHeader", children: title }), subtitle && _jsx(Text, { variant: "label", children: subtitle })] }), _jsx(Center, { style: { height, width: '100%' }, children: _jsx(ResponsiveContainer, { width: "100%", height: "100%", children: _jsxs(ComposedChart, { data: chartData, children: [_jsx("defs", { children: series.map((s, index) => (_jsxs("linearGradient", { id: `gradient-${index}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx("stop", { offset: "0%", stopColor: s.color || primary[200], stopOpacity: 0.3 }), _jsx("stop", { offset: "99%", stopColor: s.color || primary[200], stopOpacity: 0.05 })] }, s.name))) }), _jsx(XAxis, { dataKey: "date", axisLine: { stroke: neutral[50] }, tickLine: { stroke: neutral[50] }, tick: _jsx(CustomXAxisTick, {}) }), _jsx(YAxis, { width: 40, axisLine: false, tickLine: false, tick: _jsx(CustomYAxisTick, {}) }), _jsx(CartesianGrid, { strokeDasharray: "0", stroke: neutral[50], horizontal: true, vertical: false }), series.map((s, index) => {
-                                            const seriesType = s.type || 'line'; // Default to 'line' if no type specified
-                                            if (seriesType === 'area') {
-                                                return (_jsx(Area, { type: "monotone", dataKey: s.name, stroke: s.color || primary[200], strokeWidth: 2, fill: `url(#gradient-${index})`, baseValue: "dataMin", style: { outline: 'none' } }, s.name));
-                                            }
-                                            else if (seriesType === 'bar') {
-                                                return _jsx(Bar, { dataKey: s.name, fill: s.color || primary[200], radius: [2, 2, 0, 0], style: { outline: 'none' } }, s.name);
+    const { classes } = createStyles(() => ({
+        rechartsText: {
+            '& .recharts-text.recharts-cartesian-axis-tick-value tspan': {
+                ...fontStyle.label,
+            },
+        },
+        rechartsSurface: {
+            '& .recharts-surface': {
+                outline: 'none',
+            },
+        },
+    }))();
+    return (_jsx(_Fragment, { children: loading || !hasData ? (_jsx(Center, { style: { height, backgroundColor: neutral[25], borderRadius: '8px' }, children: _jsx(Text, { variant: "label", color: neutral[200], children: loading ? 'Loading...' : 'No data available' }) })) : (_jsx(_Fragment, { children: _jsx(Center, { h: height, w: "100%", className: classes.rechartsText, children: _jsx(ResponsiveContainer, { width: "100%", height: "100%", children: _jsxs(ComposedChart, { data: transformedData, className: classes.rechartsSurface, children: [_jsx("defs", { children: series.map((s, index) => (_jsxs("linearGradient", { id: `gradient-${index}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx("stop", { offset: "0%", stopColor: s.color || primary[200], stopOpacity: 0.3 }), _jsx("stop", { offset: "99%", stopColor: s.color || primary[200], stopOpacity: 0.05 })] }, s.name))) }), _jsx(XAxis, { dataKey: "key", axisLine: { stroke: neutral[50] }, tickLine: { stroke: neutral[50] }, tickMargin: 8, tickFormatter: formatXAxisValue }), _jsx(YAxis, { width: 50, axisLine: false, tickLine: false, tickFormatter: formatYAxisValue }), _jsx(CartesianGrid, { strokeDasharray: "0", stroke: neutral[50], horizontal: true, vertical: false }), series.map((s, index) => {
+                                const seriesType = s.type || 'line';
+                                if (seriesType === 'area') {
+                                    return (_jsx(Area, { type: "monotone", dataKey: s.name, stroke: s.color || primary[200], strokeWidth: 2, fill: `url(#gradient-${index})`, baseValue: "dataMin", style: { outline: 'none' } }, s.name));
+                                }
+                                else if (seriesType === 'bar') {
+                                    return (_jsx(Bar, { dataKey: s.name, fill: s.color || primary[200], radius: [8, 8, 0, 0], style: { outline: 'none' }, onMouseEnter: (data, index, event) => {
+                                            const barElement = event.target;
+                                            if (barElement) {
+                                                barElement.style.opacity = '0.8';
                                             }
-                                            else {
-                                                // Default to line (seriesType === 'line')
-                                                return _jsx(Line, { type: "monotone", dataKey: s.name, stroke: s.color || primary[200], strokeWidth: 2, dot: false, style: { outline: 'none' } }, s.name);
+                                        }, onMouseLeave: (data, index, event) => {
+                                            const barElement = event.target;
+                                            if (barElement) {
+                                                barElement.style.opacity = '1';
                                             }
-                                        }), _jsx(Tooltip, { content: tooltipContent || _jsx(CustomTooltip, {}), wrapperStyle: {
-                                                border: 'none',
-                                                outline: 'none', // Remove any outline
-                                                boxShadow: 'none', // Remove default shadow
-                                            }, contentStyle: {
-                                                border: 'none',
-                                                outline: 'none',
-                                                boxShadow: 'none',
-                                                padding: 0,
-                                                margin: 0,
-                                                backgroundColor: 'transparent',
-                                            }, labelStyle: {
-                                                display: 'none',
-                                            } }), showLegend && (_jsx(Legend, { iconType: "circle", iconSize: 8, formatter: (value) => (_jsx(Text, { variant: "label", sx: { color: neutral[300], display: 'inline', whiteSpace: 'nowrap' }, children: value })) }))] }) }) })] }) }), _jsx("style", { children: `.recharts-surface { outline: none; }` })] }));
+                                        } }, s.name));
+                                }
+                                else {
+                                    return _jsx(Line, { type: "monotone", dataKey: s.name, stroke: s.color || primary[200], strokeWidth: 2, dot: false, style: { outline: 'none' } }, s.name);
+                                }
+                            }), _jsx(Tooltip, { content: getTooltip, cursor: series.some((s) => s.type === 'bar') ? false : true }), showLegend && (_jsx(Legend, { iconType: "circle", iconSize: 8, wrapperStyle: { paddingTop: '0.6rem' }, formatter: (value) => (_jsx(Text, { variant: "label", sx: { color: neutral[300], display: 'inline', whiteSpace: 'nowrap' }, children: value })) }))] }) }) }) })) }));
 };

package/dist/components/Data/JustChart.d.ts

@@ -0,0 +1,23 @@
+import React from 'react';
+import { formats } from '../../constants/data';
+export interface ChartDataPoint {
+    date: string | number;
+    value: number;
+    label?: string;
+}
+export interface ChartSeries {
+    name: string;
+    data: ChartDataPoint[];
+    color?: string;
+    type?: 'line' | 'area' | 'bar';
+}
+export interface ChartProps {
+    series: ChartSeries[];
+    height?: string | number;
+    yAxisFormat?: keyof typeof formats;
+    xAxisFormat?: keyof typeof formats;
+    showLegend?: boolean;
+    loading?: boolean;
+}
+export declare const Chart: React.FC<ChartProps>;
+//# sourceMappingURL=JustChart.d.ts.map

package/dist/components/Data/JustChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"JustChart.d.ts","sourceRoot":"","sources":["../../../src/components/Data/JustChart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAK/C,MAAM,WAAW,cAAc;IAC7B,IAAI,EAAE,MAAM,GAAG,MAAM,CAAC;IACtB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,cAAc,EAAE,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,KAAK,CAAC;CAChC;AAED,MAAM,WAAW,UAAU;IACzB,MAAM,EAAE,WAAW,EAAE,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,WAAW,CAAC,EAAE,MAAM,OAAO,OAAO,CAAC;IACnC,WAAW,CAAC,EAAE,MAAM,OAAO,OAAO,CAAC;IACnC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB;AAED,eAAO,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,UAAU,CAmKtC,CAAC"}

package/dist/components/Data/JustChart.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Text } from '../Typography/Text';
+import { Center } from '../Layout/Center';
+import { primary, neutral } from '../../constants/colors';
+import { Area, Bar, CartesianGrid, ComposedChart, Legend, Line, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts';
+import { Group } from '../Layout/Group';
+import { getChartFormat } from './shared/dataFormats';
+import { Box } from '../Layout/Box';
+import { Stack } from '../Layout/Stack';
+export const Chart = ({ series, height = 300, yAxisFormat = 'decimal', xAxisFormat = 'string', showLegend = true, loading = false }) => {
+    var _a;
+    const formatYAxisValue = getChartFormat[yAxisFormat];
+    const formatXAxisValue = (value) => value.toString();
+    // Transform data to match Recharts format
+    // TODO: This is a hack to get the data in the correct format - we should use the data in the correct format from the start
+    const chartData = (_a = series[0]) === null || _a === void 0 ? void 0 : _a.data.map((point, index) => {
+        const dataPoint = { date: point.date };
+        series.forEach((s) => {
+            if (s.data[index]) {
+                dataPoint[s.name] = s.data[index].value;
+            }
+        });
+        return dataPoint;
+    });
+    const hasData = series.some((s) => s.data.length > 0);
+    // Single reusable tick component
+    const CustomTick = ({ x, y, payload, formatter }) => {
+        return (_jsx("g", { transform: `translate(${x},${y})`, children: _jsx("foreignObject", { x: 0, y: 0, width: 100, height: 20, children: _jsx("div", { style: { display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%' }, children: _jsx(Text, { variant: "label", children: formatter(payload.value) }) }) }) }));
+    };
+    const getTooltipContent = (props) => {
+        const { active, payload, label } = props;
+        if (active && payload && payload.length) {
+            return (_jsx(Box, { sx: {
+                    backgroundColor: 'white',
+                    padding: '1rem',
+                    border: `1px solid ${neutral[100]}`,
+                    borderRadius: '8px',
+                    boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
+                }, children: _jsxs(Stack, { gap: "0.25rem", children: [_jsx(Text, { weight: "semibold", color: neutral[300], children: formatXAxisValue(label) }), payload.map((entry) => (_jsxs(Group, { gap: "0.5rem", children: [_jsx("div", { style: {
+                                        width: '8px',
+                                        height: '8px',
+                                        borderRadius: '50%',
+                                        backgroundColor: entry.color,
+                                    } }), _jsxs(Group, { gap: "0.25rem", children: [_jsxs(Text, { variant: "label", color: neutral[300], children: [entry.name, ":"] }), _jsx(Text, { variant: "label", children: formatYAxisValue(entry.value) })] })] }, entry.name)))] }) }));
+        }
+        return null;
+    };
+    return (_jsx(_Fragment, { children: loading || !hasData ? (_jsx(Center, { style: { height, backgroundColor: neutral[25], borderRadius: '8px' }, children: _jsx(Text, { variant: "label", color: neutral[200], children: loading ? 'Loading...' : 'No data available' }) })) : (_jsxs(_Fragment, { children: [_jsx(Center, { style: { height, width: '100%' }, children: _jsx(ResponsiveContainer, { width: "100%", height: "100%", children: _jsxs(ComposedChart, { data: chartData, children: [_jsx("defs", { children: series.map((s, index) => (_jsxs("linearGradient", { id: `gradient-${index}`, x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx("stop", { offset: "0%", stopColor: s.color || primary[200], stopOpacity: 0.3 }), _jsx("stop", { offset: "99%", stopColor: s.color || primary[200], stopOpacity: 0.05 })] }, s.name))) }), _jsx(XAxis, { dataKey: "date", axisLine: { stroke: neutral[50] }, tickLine: { stroke: neutral[50] }, tick: (props) => _jsx(CustomTick, { ...props, formatter: formatXAxisValue }) }), _jsx(YAxis, { width: 40, axisLine: false, tickLine: false, tick: (props) => _jsx(CustomTick, { ...props, formatter: formatYAxisValue }) }), _jsx(CartesianGrid, { strokeDasharray: "0", stroke: neutral[50], horizontal: true, vertical: false }), series.map((s, index) => {
+                                    const seriesType = s.type || 'line';
+                                    if (seriesType === 'area') {
+                                        return (_jsx(Area, { type: "monotone", dataKey: s.name, stroke: s.color || primary[200], strokeWidth: 2, fill: `url(#gradient-${index})`, baseValue: "dataMin", style: { outline: 'none' } }, s.name));
+                                    }
+                                    else if (seriesType === 'bar') {
+                                        return (_jsx(Bar, { dataKey: s.name, fill: s.color || primary[200], radius: [8, 8, 0, 0], style: { outline: 'none' }, onMouseEnter: (data, index, event) => {
+                                                const barElement = event.target;
+                                                if (barElement) {
+                                                    barElement.style.opacity = '0.8';
+                                                }
+                                            }, onMouseLeave: (data, index, event) => {
+                                                const barElement = event.target;
+                                                if (barElement) {
+                                                    barElement.style.opacity = '1';
+                                                }
+                                            } }, s.name));
+                                    }
+                                    else {
+                                        return _jsx(Line, { type: "monotone", dataKey: s.name, stroke: s.color || primary[200], strokeWidth: 2, dot: false, style: { outline: 'none' } }, s.name);
+                                    }
+                                }), _jsx(Tooltip, { content: getTooltipContent, cursor: series.some((s) => s.type === 'bar') ? false : true }), showLegend && (_jsx(Legend, { iconType: "circle", iconSize: 8, formatter: (value) => (_jsx(Text, { variant: "label", sx: { color: neutral[300], display: 'inline', whiteSpace: 'nowrap' }, children: value })) }))] }) }) }), _jsx("style", { children: `.recharts-surface { outline: none; }` })] })) }));
+};

package/dist/components/Data/JustPieChart.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import { numberFormats } from '../../constants/data';
+export interface PieChartDataPoint {
+    name: string;
+    value: number;
+    color?: string;
+}
+export interface JustPieChartProps {
+    data: PieChartDataPoint[];
+    height?: string | number;
+    showLegend?: boolean;
+    innerRadius?: number;
+    outerRadius?: number;
+    paddingAngle?: number;
+    format?: keyof typeof numberFormats;
+    loading?: boolean;
+    centerTitle?: string;
+}
+export declare const JustPieChart: React.FC<JustPieChartProps>;
+//# sourceMappingURL=JustPieChart.d.ts.map

package/dist/components/Data/JustPieChart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"JustPieChart.d.ts","sourceRoot":"","sources":["../../../src/components/Data/JustPieChart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAS1B,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAErD,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,iBAAiB,EAAE,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,OAAO,aAAa,CAAC;IACpC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CA+IpD,CAAC"}

package/dist/components/Data/JustPieChart.js

@@ -0,0 +1,63 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Text } from '../Typography/Text';
+import { Center } from '../Layout/Center';
+import { Group } from '../Layout/Group';
+import { neutral } from '../../constants/colors';
+import { PieChart as RechartsPieChart, Pie, Cell, ResponsiveContainer, Tooltip, Legend } from 'recharts';
+import { Title } from '../Typography/Title';
+import { Stack } from '../Layout/Stack';
+import { getChartFormatter } from './shared/chartFormats';
+export const JustPieChart = ({ data, height = '30rem', showLegend = true, innerRadius = 80, outerRadius = 100, paddingAngle = 5, format = 'decimal', loading = false, centerTitle, }) => {
+    const hasData = data && data.length > 0;
+    const totalValue = hasData ? data.reduce((sum, item) => sum + item.value, 0) : 0;
+    const firstDataPoint = hasData ? data[0] : null;
+    const firstDataPercentage = firstDataPoint && totalValue > 0 ? Math.round((firstDataPoint.value / totalValue) * 100) : 0;
+    const valueFormatter = (value) => getChartFormatter(format)(value);
+    // Custom tooltip component
+    const CustomTooltip = ({ active, payload, label }) => {
+        if (active && payload && payload.length) {
+            return (_jsxs("div", { style: {
+                    backgroundColor: 'white',
+                    padding: '10px',
+                    border: `1px solid ${neutral[100]}`,
+                    borderRadius: '8px',
+                    boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
+                    zIndex: 1000,
+                    position: 'relative',
+                }, children: [_jsx(Text, { weight: "semibold", color: neutral[300], children: label }), payload.map((entry) => (_jsxs(Group, { children: [_jsx("div", { style: {
+                                    width: '8px',
+                                    height: '8px',
+                                    borderRadius: '50%',
+                                    backgroundColor: entry.payload.color,
+                                } }), _jsxs(Group, { gap: "0.25rem", children: [_jsxs(Text, { variant: "label", color: neutral[300], children: [entry.payload.name, ":"] }), _jsx(Text, { variant: "label", children: valueFormatter(entry.payload.value) })] })] }, entry.name)))] }));
+        }
+        return null;
+    };
+    return (_jsxs(_Fragment, { children: [loading || !hasData ? (_jsx(Center, { style: { height, backgroundColor: neutral[25], borderRadius: '8px' }, children: _jsx(Text, { variant: "label", color: neutral[200], children: loading ? 'Loading...' : 'No data available' }) })) : (_jsxs(Center, { style: { height, width: '100%', position: 'relative' }, children: [_jsx(ResponsiveContainer, { width: "100%", height: "100%", style: { outline: 'none' }, children: _jsxs(RechartsPieChart, { style: { outline: 'none' }, children: [_jsx(Pie, { data: data, innerRadius: innerRadius, outerRadius: outerRadius, paddingAngle: paddingAngle, dataKey: "value", style: { outline: 'none' }, children: data.map((entry, index) => (_jsx(Cell, { fill: entry.color, style: { outline: 'none' } }, `cell-${entry.name}`))) }), _jsx(Tooltip, { content: _jsx(CustomTooltip, {}), wrapperStyle: {
+                                        border: 'none',
+                                        outline: 'none',
+                                        boxShadow: 'none',
+                                        zIndex: 1000,
+                                    }, contentStyle: {
+                                        border: 'none',
+                                        outline: 'none',
+                                        boxShadow: 'none',
+                                        padding: 0,
+                                        margin: 0,
+                                        backgroundColor: 'transparent',
+                                    } }), showLegend && (_jsx(Legend, { iconType: "circle", iconSize: 8, style: {
+                                        marginTop: '1rem',
+                                    }, formatter: (value) => (_jsx(Text, { variant: "label", style: {
+                                            color: neutral[300],
+                                            display: 'inline',
+                                            whiteSpace: 'nowrap',
+                                        }, children: value })) }))] }) }), _jsx(Center, { style: {
+                            position: 'absolute',
+                            top: '45%',
+                            left: '50%',
+                            transform: 'translate(-50%, -50%)',
+                            textAlign: 'center',
+                            zIndex: 1,
+                            pointerEvents: 'none',
+                        }, children: _jsxs(Stack, { gap: "0", align: "center", children: [_jsxs(Title, { variant: "cardHeader", color: neutral[300], children: [firstDataPercentage, "%"] }), _jsx(Text, { variant: "label", children: centerTitle })] }) })] })), _jsx("style", { children: `.recharts-surface { outline: none; }` })] }));
+};

package/dist/components/Data/PieChart.d.ts

@@ -1,24 +1,21 @@
 import React from 'react';
-import { CardProps } from '../Layout/Card';
-export interface PieChartDataPoint {
-    name: string;
-    value: number;
-    color?: string;
-}
-export interface PieChartProps extends Omit<CardProps, 'children'> {
+import { numberFormats } from '../../constants/data';
+import { PieDataPoint } from '../../types/types';
+export interface PieCardCenterContentProps {
     title: string;
     subtitle?: string;
-    data: PieChartDataPoint[];
+    value?: number;
+}
+export interface PieChartProps {
+    data: PieDataPoint[];
+    format: keyof typeof numberFormats;
     height?: string | number;
     showLegend?: boolean;
     innerRadius?: number;
     outerRadius?: number;
     paddingAngle?: number;
-    colors?: string[];
-    formatValue?: (value: number) => string;
-    tooltipContent?: (data: any) => React.ReactNode;
     loading?: boolean;
-    emptyMessage?: string;
+    centerContent?: PieCardCenterContentProps;
 }
 export declare const PieChart: React.FC<PieChartProps>;
 //# sourceMappingURL=PieChart.d.ts.map

package/dist/components/Data/PieChart.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PieChart.d.ts","sourceRoot":"","sources":["../../../src/components/Data/PieChart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAQ,SAAS,EAAE,MAAM,gBAAgB,CAAC;AASjD,MAAM,WAAW,iBAAiB;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,aAAc,SAAQ,IAAI,CAAC,SAAS,EAAE,UAAU,CAAC;IAChE,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,EAAE,iBAAiB,EAAE,CAAC;IAC1B,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,EAAE,CAAC;IAClB,WAAW,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,MAAM,CAAC;IACxC,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,GAAG,KAAK,KAAK,CAAC,SAAS,CAAC;IAChD,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAKD,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAwK5C,CAAC"}
+{"version":3,"file":"PieChart.d.ts","sourceRoot":"","sources":["../../../src/components/Data/PieChart.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAU1B,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAErD,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AACjD,MAAM,WAAW,yBAAyB;IACxC,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AACD,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,YAAY,EAAE,CAAC;IACrB,MAAM,EAAE,MAAM,OAAO,aAAa,CAAC;IACnC,MAAM,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,aAAa,CAAC,EAAE,yBAAyB,CAAC;CAC3C;AAED,eAAO,MAAM,QAAQ,EAAE,KAAK,CAAC,EAAE,CAAC,aAAa,CAwH5C,CAAC"}