@tap-payments/os-micro-frontend-shared 0.1.364 → 0.1.365-test.10

package/build/components/ActivityAreaChart/ActivityAreaChart.js

@@ -1,43 +1,57 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 import { useMemo, useState } from 'react';
 import { Tooltip, ResponsiveContainer, Area, AreaChart } from 'recharts';
-import { useTheme } from '@mui/material/styles';
-import { ChartTooltip, LoadingChart } from './components';
+import { ChartTooltip, LoadingChart, ChartLegend, LEGENDS } from './components';
 const ActivityAreaChart = ({ data, dataKey, isLoading, dateRange, selectedCurrency }) => {
-    const theme = useTheme();
     const [chartHovered, setChartHovered] = useState(false);
     const [cursorPosition, setCursorPosition] = useState({ x: 0, y: 0 });
+    const [activeLegend, setActiveLegend] = useState(LEGENDS.CHARGE.key);
     const isEmpty = (data === null || data === void 0 ? void 0 : data.length) === 0;
+    const isAmountDataKeyActive = dataKey === 'amount';
     const handleMouseMove = (e) => {
         if (e.activeCoordinate && e.isTooltipActive) {
             setCursorPosition(e.activeCoordinate);
         }
     };
     const MemoizedChartTooltip = useMemo(() => {
-        return _jsx(ChartTooltip, { position: cursorPosition, dateRange: dateRange, selectedCurrency: selectedCurrency });
+        return (_jsx(ChartTooltip, { position: cursorPosition, dateRange: dateRange, selectedCurrency: selectedCurrency, activeLegend: activeLegend, activeDataKey: dataKey }));
     }, [cursorPosition]);
     if (isLoading || isEmpty) {
         return _jsx(LoadingChart, {});
     }
-    return (_jsx(ResponsiveContainer, { children: _jsxs(AreaChart, Object.assign({ margin: {
-                top: 20,
-            }, data: data, onMouseMove: handleMouseMove }, { children: [data.length > 0 && (_jsx(Tooltip, { content: MemoizedChartTooltip, cursor: {
-                        fill: '#A5A8A3',
-                        stroke: '#A5A8A3',
-                        strokeWidth: 1,
-                        strokeOpacity: 1,
-                        stopOpacity: 0.3,
-                        strokeDasharray: '5 5',
-                        strokeLinecap: 'round',
-                        strokeLinejoin: 'round',
-                    } })), _jsx(Area, { dataKey: dataKey, type: "monotone", fill: "#76BB4012", stroke: theme.palette.success.dark, activeDot: {
-                        r: 5,
-                        fill: theme.palette.success.dark,
-                        strokeWidth: 2,
-                        stroke: 'white',
-                        cursor: chartHovered ? 'pointer' : 'default',
-                        onMouseOver: () => setChartHovered(true),
-                        onMouseLeave: () => setChartHovered(false),
-                    } })] })) }));
+    return (_jsxs(_Fragment, { children: [_jsx(ResponsiveContainer, { children: _jsxs(AreaChart, Object.assign({ margin: { top: 20 }, data: data, onMouseMove: handleMouseMove }, { children: [(data === null || data === void 0 ? void 0 : data.length) > 0 && (_jsx(Tooltip, { content: MemoizedChartTooltip, cursor: {
+                                fill: '#A5A8A3',
+                                stroke: '#A5A8A3',
+                                strokeWidth: 1,
+                                strokeOpacity: 1,
+                                stopOpacity: 0.3,
+                                strokeDasharray: '5 5',
+                                strokeLinecap: 'round',
+                                strokeLinejoin: 'round',
+                            } })), activeLegend === LEGENDS.REFUNDS.key && (_jsx(Area, { dataKey: isAmountDataKeyActive ? 'refundAmount' : 'refundCount', type: "monotone", stackId: "1", fill: "#5E30EB07", stroke: LEGENDS.REFUNDS.color, activeDot: {
+                                r: 5,
+                                fill: LEGENDS.REFUNDS.color,
+                                strokeWidth: 2,
+                                stroke: 'white',
+                                cursor: chartHovered ? 'pointer' : 'default',
+                                onMouseOver: () => setChartHovered(true),
+                                onMouseLeave: () => setChartHovered(false),
+                            } }, `${activeLegend}-${LEGENDS.REFUNDS.key}`)), _jsx(Area, { dataKey: isAmountDataKeyActive ? 'chargeAmount' : 'chargedCount', type: "monotone", stackId: "1", fill: "#76BB4007", stroke: LEGENDS.TRANSACTIONS.color, activeDot: {
+                                r: 5,
+                                fill: LEGENDS.TRANSACTIONS.color,
+                                strokeWidth: 2,
+                                stroke: 'white',
+                                cursor: chartHovered ? 'pointer' : 'default',
+                                onMouseOver: () => setChartHovered(true),
+                                onMouseLeave: () => setChartHovered(false),
+                            } }, `${activeLegend}-${LEGENDS.TRANSACTIONS.key}`), activeLegend === LEGENDS.CHARGE.key && (_jsx(Area, { dataKey: "chargeRateValue", type: "monotone", stackId: "1", fill: "#1F88D007", stroke: LEGENDS.CHARGE.color, activeDot: {
+                                r: 5,
+                                fill: LEGENDS.CHARGE.color,
+                                strokeWidth: 2,
+                                stroke: 'white',
+                                cursor: chartHovered ? 'pointer' : 'default',
+                                onMouseOver: () => setChartHovered(true),
+                                onMouseLeave: () => setChartHovered(false),
+                            } }, `${activeLegend}-${LEGENDS.CHARGE.key}`))] })) }), _jsx(ChartLegend, { activeLegend: activeLegend, onSelectLegend: setActiveLegend })] }));
 };
 export default ActivityAreaChart;

package/build/components/ActivityAreaChart/components/ChartLegend/ChartLegend.d.ts

@@ -0,0 +1,8 @@
+import { BoxProps } from '@mui/material/Box';
+import { LegendKey } from './type';
+interface ChartLegendProps extends BoxProps {
+    activeLegend: LegendKey;
+    onSelectLegend: (key: LegendKey) => void;
+}
+export declare const ChartLegend: ({ activeLegend, onSelectLegend }: ChartLegendProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/build/components/ActivityAreaChart/components/ChartLegend/ChartLegend.js

@@ -0,0 +1,31 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import Box from '@mui/material/Box';
+import { MenuItem } from '../../../index.js';
+import { downArrowIcon } from '../../../../constants/index.js';
+import { LegendLabel } from './LegendLabel';
+import { LEGENDS } from './constant';
+import { ChartLegendContainer, StyledMenu, LegendWrapper } from './style';
+export const ChartLegend = ({ activeLegend, onSelectLegend }) => {
+    const [anchorEl, setAnchorEl] = useState(null);
+    const open = Boolean(anchorEl);
+    const active = LEGENDS[activeLegend];
+    const onOpen = (e) => {
+        setAnchorEl(e.currentTarget);
+    };
+    const onClose = () => {
+        setAnchorEl(null);
+    };
+    const onSelect = (key) => {
+        onSelectLegend(key);
+        onClose();
+    };
+    return (_jsxs(ChartLegendContainer, Object.assign({ sx: {
+            backgroundImage: activeLegend === LEGENDS.REFUNDS.key
+                ? 'linear-gradient(180deg, rgba(94, 48, 235, 0.025) 38.02%, rgba(255, 255, 255, 0) 99.99%)'
+                : 'linear-gradient(180deg, rgba(118, 187, 64, 0.025) 49.57%, rgba(255, 255, 255, 0) 100%)',
+        } }, { children: [_jsx(LegendLabel, Object.assign({}, LEGENDS.TRANSACTIONS)), _jsxs(LegendWrapper, Object.assign({ onMouseEnter: onOpen, onMouseLeave: onClose }, { children: [_jsx(LegendLabel, Object.assign({}, active)), _jsx(Box, { component: "img", src: downArrowIcon, alt: "down arrow", sx: { width: 15, marginTop: '2px' } }), _jsx(StyledMenu, Object.assign({ open: open, anchorEl: anchorEl, placement: "bottom-start" }, { children: Object.values(LEGENDS)
+                            .filter((l) => l.key !== activeLegend && l.key !== LEGENDS.TRANSACTIONS.key)
+                            .map((legend) => (_jsx(MenuItem, Object.assign({ hideCheckbox: true, onClick: () => onSelect(legend.key) }, { children: _createElement(LegendLabel, Object.assign({}, legend, { key: legend.key })) }), legend.key))) }))] }))] })));
+};

package/build/components/ActivityAreaChart/components/ChartLegend/LegendLabel.d.ts

@@ -0,0 +1,6 @@
+interface LegendLabelProps {
+    label: string;
+    color: string;
+}
+export declare const LegendLabel: ({ label, color }: LegendLabelProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/build/components/ActivityAreaChart/components/ChartLegend/LegendLabel.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Box from '@mui/material/Box';
+import { Text } from '../../../index.js';
+export const LegendLabel = ({ label, color }) => (_jsxs(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center', gap: '4px' } }, { children: [_jsx(Box, { sx: { background: color, width: 8, height: 8, borderRadius: '50%' } }), _jsx(Text, Object.assign({ sx: { fontWeight: 500, fontSize: '11px' } }, { children: label }))] })));

package/build/components/ActivityAreaChart/components/ChartLegend/constant.d.ts

@@ -0,0 +1,17 @@
+export declare const LEGENDS: {
+    readonly TRANSACTIONS: {
+        readonly key: "TRANSACTIONS";
+        readonly label: "Transactions";
+        readonly color: "rgb(118, 187, 64)";
+    };
+    readonly REFUNDS: {
+        readonly key: "REFUNDS";
+        readonly label: "Refunds";
+        readonly color: "rgb(94, 48, 235)";
+    };
+    readonly CHARGE: {
+        readonly key: "CHARGE";
+        readonly label: "Charge rate";
+        readonly color: "rgb(31, 136, 208)";
+    };
+};

package/build/components/ActivityAreaChart/components/ChartLegend/constant.js

@@ -0,0 +1,17 @@
+export const LEGENDS = {
+    TRANSACTIONS: {
+        key: 'TRANSACTIONS',
+        label: 'Transactions',
+        color: 'rgb(118, 187, 64)',
+    },
+    REFUNDS: {
+        key: 'REFUNDS',
+        label: 'Refunds',
+        color: 'rgb(94, 48, 235)',
+    },
+    CHARGE: {
+        key: 'CHARGE',
+        label: 'Charge rate',
+        color: 'rgb(31, 136, 208)',
+    },
+};

package/build/components/ActivityAreaChart/components/ChartLegend/index.d.ts

@@ -0,0 +1,3 @@
+export * from './ChartLegend';
+export * from './constant';
+export * from './type';

package/build/components/ActivityAreaChart/components/ChartLegend/index.js

@@ -0,0 +1,3 @@
+export * from './ChartLegend';
+export * from './constant';
+export * from './type';

package/build/components/ActivityAreaChart/components/ChartLegend/style.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+export declare const ChartLegendContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const StyledMenu: import("@emotion/styled").StyledComponent<Omit<import("../../../Menu/Menu").MenuProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const LegendWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;

package/build/components/ActivityAreaChart/components/ChartLegend/style.js

@@ -0,0 +1,23 @@
+import { styled } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import Menu from '../../../Menu';
+export const ChartLegendContainer = styled(Box)(() => ({
+    padding: '8px 16px',
+    display: 'flex',
+    alignItems: 'center',
+    gap: '12px',
+    position: 'relative',
+}));
+export const StyledMenu = styled(Menu)(() => ({
+    marginTop: '8px',
+    marginBottom: '8px',
+    maxHeight: '190px',
+    overflow: 'auto',
+    minWidth: '100px',
+}));
+export const LegendWrapper = styled(Box)(() => ({
+    display: 'flex',
+    alignItems: 'center',
+    gap: '2px',
+    cursor: 'pointer',
+}));

package/build/components/ActivityAreaChart/components/ChartLegend/type.d.ts

@@ -0,0 +1,2 @@
+import { LEGENDS } from './constant';
+export type LegendKey = keyof typeof LEGENDS;

package/build/components/ActivityAreaChart/components/ChartLegend/type.js

@@ -0,0 +1 @@
+export {};

package/build/components/ActivityAreaChart/components/ChartTooltip/ChartTooltip.d.ts

@@ -0,0 +1,2 @@
+import { ChartTooltipProps } from '../../types';
+export declare const ChartTooltip: ({ active, payload, dateRange, activeLegend, }: ChartTooltipProps) => import("react/jsx-runtime").JSX.Element | null;

package/build/components/ActivityAreaChart/components/ChartTooltip/ChartTooltip.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import dayjs from 'dayjs';
+import Box from '@mui/material/Box';
+import { TooltipContainer, TimeTypography, ValueTypography } from '../../styles';
+import { 
+// getTooltipFormattedValue,
+getFormattedDateWithTimezone, } from '../../utils';
+import Text from '../../../Text';
+import { LEGENDS } from '../ChartLegend';
+export const ChartTooltip = ({ active, payload, dateRange, 
+// selectedCurrency,
+activeLegend, }) => {
+    var _a, _b, _c, _d, _e, _f, _g;
+    const dateRangeFrom = dayjs(dateRange === null || dateRange === void 0 ? void 0 : dateRange[0]);
+    const dateRangeTo = dayjs(dateRange === null || dateRange === void 0 ? void 0 : dateRange[1]);
+    const isSingleDay = dateRangeFrom === null || dateRangeFrom === void 0 ? void 0 : dateRangeFrom.isSame(dateRangeTo, 'day');
+    if (active && (payload === null || payload === void 0 ? void 0 : payload.length)) {
+        const point = payload[0];
+        // const localizedUnitLabel = getLocalizedUnitLabel(activeDataKey, point?.value)
+        const formattedDate = ((_a = point === null || point === void 0 ? void 0 : point.payload) === null || _a === void 0 ? void 0 : _a.date) && getFormattedDateWithTimezone((_b = point === null || point === void 0 ? void 0 : point.payload) === null || _b === void 0 ? void 0 : _b.date, isSingleDay, (_c = point === null || point === void 0 ? void 0 : point.payload) === null || _c === void 0 ? void 0 : _c.hour);
+        return (_jsxs(TooltipContainer, Object.assign({ className: "chart-tooltip" }, { children: [_jsx(TimeTypography, { children: formattedDate !== null && formattedDate !== void 0 ? formattedDate : (_d = point === null || point === void 0 ? void 0 : point.payload) === null || _d === void 0 ? void 0 : _d.date }), _jsx(ValueTypography, { children: _jsxs(Box, Object.assign({ sx: { display: 'flex', flexDirection: 'column', gap: '4px' } }, { children: [activeLegend === LEGENDS.CHARGE.key && (_jsxs(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center', gap: '4px' } }, { children: [_jsx(Box, { sx: { width: 12, height: 12, background: LEGENDS.CHARGE.color, borderRadius: '50%', border: `2px solid #fff`, flexShrink: 0 } }), _jsx(Text, Object.assign({ sx: { fontSize: '11px', fontWeight: 600 } }, { children: `${(_e = point.payload) === null || _e === void 0 ? void 0 : _e.chargeRate} Charge Rate` }))] }))), _jsxs(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center', gap: '4px' } }, { children: [_jsx(Box, { sx: { width: 12, height: 12, background: LEGENDS.TRANSACTIONS.color, borderRadius: '50%', border: `2px solid #fff`, flexShrink: 0 } }), _jsx(Text, Object.assign({ sx: { fontSize: '11px', fontWeight: 600 } }, { children: `${(_f = point.payload) === null || _f === void 0 ? void 0 : _f.chargeCount} Transactions` }))] })), activeLegend === LEGENDS.REFUNDS.key && (_jsxs(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center', gap: '4px' } }, { children: [_jsx(Box, { sx: { width: 12, height: 12, background: LEGENDS.REFUNDS.color, borderRadius: '50%', border: `2px solid #fff`, flexShrink: 0 } }), _jsx(Text, Object.assign({ sx: { fontSize: '11px', fontWeight: 600 } }, { children: `${(_g = point.payload) === null || _g === void 0 ? void 0 : _g.chargeCount} Refunds` }))] })))] })) })] })));
+    }
+    return null;
+};

package/build/components/ActivityAreaChart/components/ChartTooltip/index.d.ts

@@ -0,0 +1 @@
+export * from './ChartTooltip';

package/build/components/ActivityAreaChart/components/ChartTooltip/index.js

@@ -0,0 +1 @@
+export * from './ChartTooltip';

package/build/components/ActivityAreaChart/components/LoadingChart/LoadingChart.d.ts

@@ -0,0 +1 @@
+export declare const LoadingChart: () => import("react/jsx-runtime").JSX.Element;

package/build/components/ActivityAreaChart/components/{LoadingChart.js → LoadingChart/LoadingChart.js}

@@ -10,9 +10,8 @@ const loadingData = [
     { dataKey: 94.3882 },
     { dataKey: 110.406 },
 ];
-const LoadingChart = () => {
+export const LoadingChart = () => {
     return (_jsx(ResponsiveContainer, { children: _jsxs(AreaChart, Object.assign({ margin: {
                 top: 40,
             }, data: loadingData }, { children: [_jsx("defs", { children: _jsxs("linearGradient", Object.assign({ id: "loadingGradient", x1: "0", y1: "0", x2: "0", y2: "1", gradientUnits: "objectBoundingBox" }, { children: [_jsx("stop", { offset: "0.54", stopColor: "rgba(67, 67, 67, 0.035)" }), _jsx("stop", { offset: "1", stopColor: "rgba(255, 255, 255, 0)" })] })) }), _jsx(Area, { dataKey: "dataKey", type: "linear", fill: "url(#loadingGradient)", fillOpacity: 1, stroke: "#C2C2C2", strokeWidth: 1, strokeLinecap: "round", strokeDasharray: "4 4", activeDot: false })] })) }));
 };
-export default LoadingChart;

package/build/components/ActivityAreaChart/components/LoadingChart/index.d.ts

@@ -0,0 +1 @@
+export * from './LoadingChart';

package/build/components/ActivityAreaChart/components/LoadingChart/index.js

@@ -0,0 +1 @@
+export * from './LoadingChart';

package/build/components/ActivityAreaChart/components/index.d.ts

@@ -1,2 +1,3 @@
-export { default as ChartTooltip } from './ChartTooltip';
-export { default as LoadingChart } from './LoadingChart';
+export * from './ChartTooltip';
+export * from './LoadingChart';
+export * from './ChartLegend';

package/build/components/ActivityAreaChart/components/index.js

@@ -1,2 +1,3 @@
-export { default as ChartTooltip } from './ChartTooltip';
-export { default as LoadingChart } from './LoadingChart';
+export * from './ChartTooltip';
+export * from './LoadingChart';
+export * from './ChartLegend';

package/build/components/ActivityAreaChart/styles.d.ts

@@ -13,4 +13,6 @@ export declare const CurrencyBox: import("@emotion/styled").StyledComponent<impo
 }, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 export declare const CurrencyText: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
     ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
-}, "width" | "minHeight" | "height" | "bottom" | "left" | "right" | "top" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "visibility" | "whiteSpace" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "classes" | "align" | "className" | "style" | "children" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+}, "width" | "minHeight" | "height" | "bottom" | "left" | "right" | "top" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "visibility" | "whiteSpace" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "classes" | "align" | "className" | "style" | "children" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping"> & {
+    component?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/build/components/ActivityAreaChart/styles.js

@@ -1,3 +1,4 @@
+import Text from '../Text';
 import { Box, Typography, styled } from '@mui/material';
 export const TooltipContainer = styled(Box)(() => ({
     width: 'auto',
@@ -33,14 +34,13 @@ export const ValueTypography = styled(Typography)({
 export const CurrencyBox = styled(Box)({
     display: 'flex',
     alignItems: 'center',
-    height: '100%',
+    // height: '100%',
     gap: '2.6px',
     maxHeight: '19px',
 });
-export const CurrencyText = styled(Typography)({
-    fontWeight: 500,
+export const CurrencyText = styled(Text)({
+    fontWeight: 600,
     fontSize: 11,
     lineHeight: '130%',
-    color: '#4B4847',
     letterSpacing: '-0.14px',
 });

package/build/components/ActivityAreaChart/types.d.ts

@@ -1,3 +1,4 @@
+import { LegendKey } from './components';
 export interface ActivityAreaChartProps {
     data: ChartDataPoint[];
     dataKey: string;
@@ -5,17 +6,23 @@ export interface ActivityAreaChartProps {
     dateRange: [Date, Date];
     selectedCurrency: string;
 }
+export interface ChartDataPoint {
+    date: string;
+    chargeCount: number;
+    chargeAmount: number;
+    chargeRate: number;
+    refundCount: number;
+    refundAmount: number;
+    hour?: number;
+}
 export interface ChartTooltipProps {
     active?: boolean;
+    activeLegend: LegendKey;
+    activeDataKey: string;
     payload?: Array<{
         value?: number;
         dataKey?: string;
-        payload?: {
-            date?: string;
-            count?: number;
-            amount?: number;
-            hour?: number;
-        };
+        payload?: ChartDataPoint;
     }>;
     position?: {
         x: number;
@@ -24,9 +31,4 @@ export interface ChartTooltipProps {
     dateRange: [Date, Date];
     selectedCurrency: string;
 }
-export interface ChartDataPoint {
-    date: string;
-    count: number;
-    amount: number;
-}
 export type PayloadItem = NonNullable<ChartTooltipProps['payload']>[number];

package/build/components/AnimatedSpinnerIcon/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 type AnimatedSpinnerIconProps = {
     width?: string;
     height?: string;

package/build/components/Chip/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 import { GetSourceAnimationFunction } from './type';
 export declare const ChipStyled: import("@emotion/styled").StyledComponent<import("react").RefAttributes<unknown> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
     variant?: import("./type").ChipVariant | undefined;

package/build/components/CountBadge/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const AgreementImageWrapper: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     color?: string | undefined;

package/build/components/Dialog/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const DialogWrapper: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     color?: string | undefined;

package/build/components/FlippingCard/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const Wrapper: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     color?: string | undefined;

package/build/components/ImageWrapper/ImageWrapper.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 declare const ImageWrapper: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     color?: string | undefined;

package/build/components/JSONViewer/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const FOOTER_HEIGHT = 37;
 export declare const TITLE_BAR_HEIGHT = "32px";
 export declare const VIEWER_HEIGHT = 545;

package/build/components/LeftPeekRightExpandingChip/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 import type { SxProps, Theme } from '@mui/material/styles';
 export declare const CHIP_GAP = 3;
 export declare const DEFAULT_CHIP_MIN_WIDTH = 24;

package/build/components/RightLeftExpandingCenterChip/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 import type { SxProps, Theme } from '@mui/material/styles';
 export declare const CHIP_GAP = 3;
 export declare const CenterIconWrapper: import("@emotion/styled").StyledComponent<{

package/build/components/SearchButton/styles.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const StyledInput: import("@emotion/styled").StyledComponent<{
     width?: string | number | undefined;
     height?: string | number | undefined;

package/build/components/StatusIcons/AuthIcons/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const StyledSourceCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const StyledSourceImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
 export declare const PaymentSourcesContainer: import("@emotion/styled").StyledComponent<{

package/build/components/StatusIcons/AuthorizationAutoIcons/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const BalanceCellContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     color?: string | undefined;

package/build/components/StatusIcons/ChargeStatusIcon/ChargeStatusIcon.js

@@ -16,7 +16,7 @@ export function ChargeStatusIcon({ chargeStatus, gatewayTooltip, acquirerTooltip
     const chargeTooltipTitle = chargeTooltip && (_jsx(_Fragment, { children: _jsx("div", { children: chargeTooltip }) }));
     const acquirerTooltipTitle = acquirerTooltip && (_jsxs(_Fragment, { children: [_jsx("div", { children: "Acquirer" }), _jsx("div", { children: acquirerTooltip })] }));
     const gatewayTooltipTitle = gatewayTooltip && (_jsxs(_Fragment, { children: [_jsx("div", { children: "Gateway" }), _jsx("div", { children: gatewayTooltip })] }));
-    const chargeIcon = chargeStatus && statusIcons[chargeStatus] && (_jsx(Tooltip, Object.assign({ title: t(camelCase(chargeStatus)) }, { children: _jsx("div", Object.assign({ "data-testid": "ChargeStatusIcon_ChargeIcon", style: Object.assign({ display: 'flex', alignItems: 'center', justifyContent: 'center', width: '16px', height: '16px', borderRadius: unCapturedStatusStyle ? '50%' : '' }, iconWrapperStyles) }, { children: _jsx(StatusIcon, { src: statusIcons[chargeStatus], alt: "charge-icon", "data-testid": "ChargeStatusIcon_StatusIcon", style: Object.assign({ borderRadius: unCapturedStatusStyle ? '50%' : '', width: '16px', height: '16px' }, iconStyles) }) })) })));
+    const chargeIcon = chargeStatus && statusIcons[chargeStatus] && (_jsx("div", Object.assign({ "data-testid": "ChargeStatusIcon_ChargeIcon", style: Object.assign({ display: 'flex', alignItems: 'center', justifyContent: 'center', width: '16px', height: '16px', borderRadius: unCapturedStatusStyle ? '50%' : '' }, iconWrapperStyles) }, { children: _jsx(StatusIcon, { src: statusIcons[chargeStatus], alt: "charge-icon", "data-testid": "ChargeStatusIcon_StatusIcon", style: Object.assign({ borderRadius: unCapturedStatusStyle ? '50%' : '', width: '16px', height: '16px' }, iconStyles) }) })));
     if (isSheetViewShown) {
         return (_jsxs(TextViewWrapper, { children: [_jsxs(StatusChipWithCopy, Object.assign({ copyText: t(camelCase(chargeStatus)), chipIndex: chipIndex, selectionProps: selectionProps }, { children: [t(camelCase(chargeStatus)), " ", errorCode] })), unCapturedStatusStyle && (_jsxs(_Fragment, { children: [gatewayCode && (_jsxs(StatusChipWithCopy, Object.assign({ copyText: "Gateway", chipIndex: 1, selectionProps: selectionProps }, { children: ["Gateway ", gatewayCode] }))), acquirerCode && (_jsxs(StatusChipWithCopy, Object.assign({ copyText: "Acquirer", chipIndex: 2, selectionProps: selectionProps }, { children: ["Acquirer ", acquirerCode] })))] }))] }));
     }
@@ -38,7 +38,7 @@ export function ChargeStatusIcon({ chargeStatus, gatewayTooltip, acquirerTooltip
                 border: '1px solid #F2F2F2',
                 borderRadius: '12px',
                 backgroundColor: '#fff',
-            })), unCapturedStyles) }, { children: [_jsxs(UnCapturedBadge, Object.assign({ "data-testid": "ChargeStatusIcon_UnCapturedBadge", sx: {
+            })), unCapturedStyles) }, { children: [_jsx(UnCapturedBadge, Object.assign({ "data-testid": "ChargeStatusIcon_UnCapturedBadge", sx: {
                         borderRadius: '56px',
                     }, initial: {
                         background: 'transparent',
@@ -46,13 +46,13 @@ export function ChargeStatusIcon({ chargeStatus, gatewayTooltip, acquirerTooltip
                         animate: {
                             background: unCapturedStatusStyle === null || unCapturedStatusStyle === void 0 ? void 0 : unCapturedStatusStyle.background,
                         },
-                    } }, { children: [chargeIcon, _jsx(Tooltip, Object.assign({ title: chargeTooltipTitle !== null && chargeTooltipTitle !== void 0 ? chargeTooltipTitle : t(camelCase(chargeStatus)) }, { children: _jsx(ErrorCodeWrapper, Object.assign({ "data-testid": "ChargeStatusIcon_ErrorCodeWrapper", transition: {
-                                    animate: {
-                                        duration: 0.05,
-                                    },
-                                }, variants: ErrorCodeLabelAnimationVariants, style: Object.assign({}, (errorCode && {
-                                    padding: '0 !important',
-                                })) }, { children: _jsx(ErrorCodeLabel, Object.assign({ "data-testid": "ChargeStatusIcon_ErrorCodeLabel", sx: {
-                                        background: unCapturedStatusStyle === null || unCapturedStatusStyle === void 0 ? void 0 : unCapturedStatusStyle.color,
-                                    }, transition: errorCodeLabelAnimation, variants: ErrorCodeVariants, initial: { opacity: 0 } }, { children: errorCode })) })) }))] })), _jsx(GatewaysContainer, Object.assign({ "data-testid": "ChargeStatusIcon_GatewaysContainer", transition: GatewayIconWrapperAnimationTransition, variants: GatewaysContainerAnimationVariants, style: gatewayContainerStyles, isVisible: !!gatewayTooltipTitle }, { children: gatewayTooltipTitle && (_jsx(Tooltip, Object.assign({ title: gatewayTooltipTitle }, { children: _jsx(GatewayIconWrapper, Object.assign({ "data-testid": "ChargeStatusIcon_GatewayIconWrapper", style: Object.assign({ background: unCapturedStatusStyle === null || unCapturedStatusStyle === void 0 ? void 0 : unCapturedStatusStyle.background }, gatewayIconWrapperStyles) }, { children: _jsx(GateWayIcon, { src: unCapturedStatusStyle === null || unCapturedStatusStyle === void 0 ? void 0 : unCapturedStatusStyle.gatewayIcon, alt: "gateway-icon", "data-testid": "ChargeStatusIcon_GatewayIcon", style: gateWayIconStyles }) })) }))) })), _jsx(GatewaysContainer, Object.assign({ "data-testid": "ChargeStatusIcon_GatewaysContainer", transition: GatewayIconWrapperAnimationTransition, variants: AcquirerContainerAnimationVariants, style: gatewayContainerStyles, isVisible: !!acquirerTooltipTitle }, { children: acquirerTooltipTitle && (_jsx(Tooltip, Object.assign({ title: acquirerTooltipTitle }, { children: _jsx(GatewayIconWrapper, Object.assign({ "data-testid": "ChargeStatusIcon_AcquirerIconWrapper", style: Object.assign({ background: unCapturedStatusStyle === null || unCapturedStatusStyle === void 0 ? void 0 : unCapturedStatusStyle.background }, gatewayIconWrapperStyles) }, { children: _jsx(GateWayIcon, { src: unCapturedStatusStyle === null || unCapturedStatusStyle === void 0 ? void 0 : unCapturedStatusStyle.acquirerIcon, alt: "acquirer-icon", "data-testid": "ChargeStatusIcon_AcquirerIcon", style: gateWayIconStyles }) })) }))) }))] }))) : (_jsx(Tooltip, Object.assign({ title: chargeTooltipTitle !== null && chargeTooltipTitle !== void 0 ? chargeTooltipTitle : t(camelCase(chargeStatus)) }, { children: _jsx(StatusIconWrapper, { children: chargeIcon }) }))) })));
+                    } }, { children: _jsx(Tooltip, Object.assign({ title: chargeTooltipTitle !== null && chargeTooltipTitle !== void 0 ? chargeTooltipTitle : t(camelCase(chargeStatus)) }, { children: _jsxs(_Fragment, { children: [chargeIcon, _jsx(ErrorCodeWrapper, Object.assign({ "data-testid": "ChargeStatusIcon_ErrorCodeWrapper", transition: {
+                                        animate: {
+                                            duration: 0.05,
+                                        },
+                                    }, variants: ErrorCodeLabelAnimationVariants, style: Object.assign({}, (errorCode && {
+                                        padding: '0 !important',
+                                    })) }, { children: _jsx(ErrorCodeLabel, Object.assign({ "data-testid": "ChargeStatusIcon_ErrorCodeLabel", sx: {
+                                            background: unCapturedStatusStyle === null || unCapturedStatusStyle === void 0 ? void 0 : unCapturedStatusStyle.color,
+                                        }, transition: errorCodeLabelAnimation, variants: ErrorCodeVariants, initial: { opacity: 0 } }, { children: errorCode })) }))] }) })) })), _jsx(GatewaysContainer, Object.assign({ "data-testid": "ChargeStatusIcon_GatewaysContainer", transition: GatewayIconWrapperAnimationTransition, variants: GatewaysContainerAnimationVariants, style: gatewayContainerStyles, isVisible: !!gatewayTooltipTitle }, { children: gatewayTooltipTitle && (_jsx(Tooltip, Object.assign({ title: gatewayTooltipTitle }, { children: _jsx(GatewayIconWrapper, Object.assign({ "data-testid": "ChargeStatusIcon_GatewayIconWrapper", style: Object.assign({ background: unCapturedStatusStyle === null || unCapturedStatusStyle === void 0 ? void 0 : unCapturedStatusStyle.background }, gatewayIconWrapperStyles) }, { children: _jsx(GateWayIcon, { src: unCapturedStatusStyle === null || unCapturedStatusStyle === void 0 ? void 0 : unCapturedStatusStyle.gatewayIcon, alt: "gateway-icon", "data-testid": "ChargeStatusIcon_GatewayIcon", style: gateWayIconStyles }) })) }))) })), _jsx(GatewaysContainer, Object.assign({ "data-testid": "ChargeStatusIcon_GatewaysContainer", transition: GatewayIconWrapperAnimationTransition, variants: AcquirerContainerAnimationVariants, style: gatewayContainerStyles, isVisible: !!acquirerTooltipTitle }, { children: acquirerTooltipTitle && (_jsx(Tooltip, Object.assign({ title: acquirerTooltipTitle }, { children: _jsx(GatewayIconWrapper, Object.assign({ "data-testid": "ChargeStatusIcon_AcquirerIconWrapper", style: Object.assign({ background: unCapturedStatusStyle === null || unCapturedStatusStyle === void 0 ? void 0 : unCapturedStatusStyle.background }, gatewayIconWrapperStyles) }, { children: _jsx(GateWayIcon, { src: unCapturedStatusStyle === null || unCapturedStatusStyle === void 0 ? void 0 : unCapturedStatusStyle.acquirerIcon, alt: "acquirer-icon", "data-testid": "ChargeStatusIcon_AcquirerIcon", style: gateWayIconStyles }) })) }))) }))] }))) : (_jsx(Tooltip, Object.assign({ title: chargeTooltipTitle !== null && chargeTooltipTitle !== void 0 ? chargeTooltipTitle : t(camelCase(chargeStatus)) }, { children: _jsx(StatusIconWrapper, { children: chargeIcon }) }))) })));
 }

package/build/components/StatusIcons/ChargeStatusIcon/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const ErrorCodeLabel: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     color?: string | undefined;

package/build/components/StatusIcons/SourceIcons/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const StyledSourceCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const StyledSourceImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
 export declare const PaymentSourcesContainer: import("@emotion/styled").StyledComponent<{

package/build/components/TableCells/CustomCells/ActionCell/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 import { TableMode } from '../../../../types/index.js';
 export declare const ActionCellContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
     tableMode?: TableMode | undefined;

package/build/components/TableCells/CustomCells/AgreementCell/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const AgreementCellContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const StyledAgreementCardIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
 export declare const CardContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

package/build/components/TableCells/CustomCells/ApplicationStatusCell/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const StyledAppsCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const AppsStatusContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;

package/build/components/TableCells/CustomCells/AuthenticationCell/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const AuthIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
 export declare const AuthCellContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;

package/build/components/TableCells/CustomCells/AuthenticationStatusCell/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const UnCapturedContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     color?: string | undefined;

package/build/components/TableCells/CustomCells/AuthenticationTypeCell/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const UnCapturedContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     color?: string | undefined;

package/build/components/TableCells/CustomCells/BalanceCell/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const BalanceCellContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     color?: string | undefined;

package/build/components/TableCells/CustomCells/ChannelsCell/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const StyledSourceCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const StyledSourceImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
 export declare const PaymentSourcesContainer: import("@emotion/styled").StyledComponent<{

package/build/components/TableCells/CustomCells/CheckoutStatusCell/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const DueDateCellContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     color?: string | undefined;

package/build/components/TableCells/CustomCells/DestinationStatusCell/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const UnCapturedContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     color?: string | undefined;

package/build/components/TableCells/CustomCells/DueDateCell/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const DueDateCellContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     color?: string | undefined;

package/build/components/TableCells/CustomCells/IDButton/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const Button: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     color?: string | undefined;

package/build/components/TableCells/CustomCells/IntentsStatusCell/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const DueDateCellContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     color?: string | undefined;

package/build/components/TableCells/CustomCells/InvoiceStatusCell/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const DueDateCellContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     color?: string | undefined;

package/build/components/TableCells/CustomCells/PayoutReportCell/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const StyledDownloadFileImageWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
     isTextShown?: boolean | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

package/build/components/TableCells/CustomCells/PayoutStatusCell/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const UnCapturedContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     color?: string | undefined;

package/build/components/TableCells/CustomCells/ProductsCell/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const ProductCellContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     color?: string | undefined;

package/build/components/TableCells/CustomCells/ReferenceCell/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const StyledSourceCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const StyledSourceImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
 export declare const ReferenceSourcesContainer: import("@emotion/styled").StyledComponent<{

package/build/components/TableCells/CustomCells/RefundChargeCell/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const RefundChargeCellContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     color?: string | undefined;

package/build/components/TableCells/CustomCells/RefundStatusCell/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const RefundCellContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     color?: string | undefined;

package/build/components/TableCells/CustomCells/SalesChannelCell/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const StyledSourceCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const StyledSourceImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
 export declare const SalesChannelsContainer: import("@emotion/styled").StyledComponent<{

package/build/components/TableCells/CustomCells/SegmentsCell/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const StyledSourceCell: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const ReferenceSourcesContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;

package/build/components/TableCells/CustomCells/StatusCell/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const MultiRefundIcon: import("@emotion/styled").StyledComponent<{
     width?: string | number | undefined;
     height?: string | number | undefined;

package/build/components/TableCells/CustomCells/TokenStatusCell/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const UnCapturedContainer: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     color?: string | undefined;

package/build/components/TableCells/CustomCells/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const GeographyBox: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
     variant?: "Global" | "Regional" | "Local" | undefined;
 }, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

package/build/components/TableReports/components/DownloadButton/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 export declare const Button: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
     color?: string | undefined;

package/build/components/TableReports/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 type ExportButtonProps = {
     notificationState?: {
         success: boolean;

package/build/components/VirtualTables/components/style.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
 interface TableWrapperProps {
     showNoDataView?: boolean;
 }

package/build/constants/assets.d.ts

@@ -76,6 +76,7 @@ export declare const closeIcon: string;
 export declare const dashedCheckIcon: string;
 export declare const deactivatedIcon: string;
 export declare const topUpIcon: string;
+export declare const AIOverviewIcon: string;
 export declare const deMaximizeIcon: string;
 export declare const pendingFlag: string;
 export declare const ibanIcon: string;

package/build/constants/assets.js

@@ -81,6 +81,7 @@ export const closeIcon = `${lightUrl}/close.svg`;
 export const dashedCheckIcon = `${lightUrl}/dashedCheckIcon.svg`;
 export const deactivatedIcon = `${lightUrl}/deactivatedIcon.svg`;
 export const topUpIcon = `${lightUrl}/topup.svg`;
+export const AIOverviewIcon = `${lightUrl}/AIOverviewIcon.svg`;
 export const deMaximizeIcon = `${appBaseUrl}/demaximize.svg`;
 export const pendingFlag = `${lightUrl}/pendingFlag.svg`;
 export const ibanIcon = `${lightUrl}/ibanIcon.svg`;

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@tap-payments/os-micro-frontend-shared",
   "description": "Shared components and utilities for Tap Payments micro frontends",
-  "version": "0.1.364",
-  "testVersion": 0,
+  "version": "0.1.365-test.10",
+  "testVersion": 10,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",
@@ -164,4 +164,4 @@
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   }
-}
+}

package/build/components/ActivityAreaChart/components/ChartTooltip.d.ts

@@ -1,3 +0,0 @@
-import { ChartTooltipProps } from '../types';
-declare const ChartTooltip: ({ active, payload, dateRange, selectedCurrency }: ChartTooltipProps) => import("react/jsx-runtime").JSX.Element | null;
-export default ChartTooltip;

package/build/components/ActivityAreaChart/components/ChartTooltip.js

@@ -1,24 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useTranslation } from 'react-i18next';
-import dayjs from 'dayjs';
-import Box from '@mui/material/Box';
-import { getLocalizedUnitLabel } from '../../../utils/index.js';
-import { DATA_KEY } from '../../../constants/index.js';
-import CountryFlag from '../../CountryFlag';
-import { TooltipContainer, TimeTypography, ValueTypography, CurrencyBox, CurrencyText } from '../styles';
-import { getTooltipFormattedValue, getFormattedDateWithTimezone } from '../utils';
-const ChartTooltip = ({ active, payload, dateRange, selectedCurrency }) => {
-    var _a, _b, _c, _d;
-    const { t } = useTranslation();
-    const dateRangeFrom = dayjs(dateRange === null || dateRange === void 0 ? void 0 : dateRange[0]);
-    const dateRangeTo = dayjs(dateRange === null || dateRange === void 0 ? void 0 : dateRange[1]);
-    const isSingleDay = dateRangeFrom === null || dateRangeFrom === void 0 ? void 0 : dateRangeFrom.isSame(dateRangeTo, 'day');
-    if (active && (payload === null || payload === void 0 ? void 0 : payload.length)) {
-        const point = payload[0];
-        const localizedUnitLabel = getLocalizedUnitLabel(point === null || point === void 0 ? void 0 : point.dataKey, point === null || point === void 0 ? void 0 : point.value);
-        const formattedDate = ((_a = point === null || point === void 0 ? void 0 : point.payload) === null || _a === void 0 ? void 0 : _a.date) && getFormattedDateWithTimezone((_b = point === null || point === void 0 ? void 0 : point.payload) === null || _b === void 0 ? void 0 : _b.date, isSingleDay, (_c = point === null || point === void 0 ? void 0 : point.payload) === null || _c === void 0 ? void 0 : _c.hour);
-        return (_jsxs(TooltipContainer, Object.assign({ className: "chart-tooltip" }, { children: [_jsx(TimeTypography, { children: formattedDate !== null && formattedDate !== void 0 ? formattedDate : (_d = point === null || point === void 0 ? void 0 : point.payload) === null || _d === void 0 ? void 0 : _d.date }), _jsxs(ValueTypography, { children: [(point === null || point === void 0 ? void 0 : point.dataKey) === DATA_KEY.AMOUNT && (_jsxs(CurrencyBox, { children: [_jsx(CountryFlag, { currencyCode: selectedCurrency, width: 12 }), _jsx(CurrencyText, { children: selectedCurrency })] })), _jsx(Box, { children: `${getTooltipFormattedValue(point, t(localizedUnitLabel), selectedCurrency)}` })] })] })));
-    }
-    return null;
-};
-export default ChartTooltip;

package/build/components/ActivityAreaChart/components/LoadingChart.d.ts

@@ -1,2 +0,0 @@
-declare const LoadingChart: () => import("react/jsx-runtime").JSX.Element;
-export default LoadingChart;