@tap-payments/os-micro-frontend-shared 0.1.365-test.22 → 0.1.365-test.24

package/build/components/ActivityAreaChart/ActivityAreaChart.js

@@ -1,57 +1,43 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useMemo, useState } from 'react';
 import { Tooltip, ResponsiveContainer, Area, AreaChart } from 'recharts';
-import { ChartTooltip, LoadingChart, ChartLegend, LEGENDS } from './components';
+import { useTheme } from '@mui/material/styles';
+import { ChartTooltip, LoadingChart } 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, activeLegend: activeLegend, activeDataKey: dataKey }));
+        return _jsx(ChartTooltip, { position: cursorPosition, dateRange: dateRange, selectedCurrency: selectedCurrency });
     }, [cursorPosition]);
     if (isLoading || isEmpty) {
         return _jsx(LoadingChart, {});
     }
-    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 })] }));
+    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),
+                    } })] })) }));
 };
 export default ActivityAreaChart;

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

@@ -0,0 +1,3 @@
+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

@@ -0,0 +1,24 @@
+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

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

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

@@ -10,8 +10,9 @@ const loadingData = [
     { dataKey: 94.3882 },
     { dataKey: 110.406 },
 ];
-export const LoadingChart = () => {
+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/index.d.ts

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

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

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

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

@@ -13,6 +13,4 @@ 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"> & {
-    component?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
-} & 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"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/build/components/ActivityAreaChart/styles.js

@@ -1,4 +1,3 @@
-import Text from '../Text';
 import { Box, Typography, styled } from '@mui/material';
 export const TooltipContainer = styled(Box)(() => ({
     width: 'auto',
@@ -34,13 +33,14 @@ 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(Text)({
-    fontWeight: 600,
+export const CurrencyText = styled(Typography)({
+    fontWeight: 500,
     fontSize: 11,
     lineHeight: '130%',
+    color: '#4B4847',
     letterSpacing: '-0.14px',
 });

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

@@ -1,4 +1,3 @@
-import { LegendKey } from './components';
 export interface ActivityAreaChartProps {
     data: ChartDataPoint[];
     dataKey: string;
@@ -6,23 +5,17 @@ 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?: ChartDataPoint;
+        payload?: {
+            date?: string;
+            count?: number;
+            amount?: number;
+            hour?: number;
+        };
     }>;
     position?: {
         x: number;
@@ -31,4 +24,9 @@ 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/FilterDropdown/FilterDropdown.d.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { BoxProps } from '@mui/material/Box';
 import { SxProps } from '@mui/material';
 interface FilterDropdownProps extends BoxProps {
@@ -8,6 +9,8 @@ interface FilterDropdownProps extends BoxProps {
     icon?: string;
     title?: string;
     menuStyle?: SxProps;
+    hideTitle?: boolean;
+    renderButton?: ReactNode;
 }
-export default function FilterDropdown({ onConfirm, onCancel, isOkayButDisabled, children, isDisabled, icon, title, menuStyle, ...props }: Readonly<FilterDropdownProps>): import("react/jsx-runtime").JSX.Element;
+export default function FilterDropdown({ onConfirm, onCancel, isOkayButDisabled, children, isDisabled, icon, title, menuStyle, hideTitle, renderButton, ...props }: Readonly<FilterDropdownProps>): import("react/jsx-runtime").JSX.Element;
 export {};

package/build/components/FilterDropdown/FilterDropdown.js

@@ -18,7 +18,7 @@ import { darkFilterIcon } from '../../constants/index.js';
 import { Menu, CustomBackdrop } from '../index.js';
 import { CancelButton, FilterButton, Footer, OkayButton, TitleStyled } from './style';
 export default function FilterDropdown(_a) {
-    var { onConfirm, onCancel, isOkayButDisabled, children, isDisabled, icon, title, menuStyle } = _a, props = __rest(_a, ["onConfirm", "onCancel", "isOkayButDisabled", "children", "isDisabled", "icon", "title", "menuStyle"]);
+    var { onConfirm, onCancel, isOkayButDisabled, children, isDisabled, icon, title, menuStyle, hideTitle = false, renderButton } = _a, props = __rest(_a, ["onConfirm", "onCancel", "isOkayButDisabled", "children", "isDisabled", "icon", "title", "menuStyle", "hideTitle", "renderButton"]);
     const [anchorEl, setAnchorEl] = useState(null);
     const open = Boolean(anchorEl);
     const { t } = useTranslation();
@@ -62,5 +62,5 @@ export default function FilterDropdown(_a) {
         onConfirm();
         onClose();
     };
-    return (_jsx(ClickAwayListener, Object.assign({ onClickAway: handleCancel }, { children: _jsxs(Box, Object.assign({}, props, { children: [_jsx(FilterButton, Object.assign({ className: "filter-button", isActive: open, onClick: onOpen, sx: Object.assign({}, (isDisabled && Object.assign({ pointerEvents: 'none', opacity: 0.5 }, props.sx))) }, { children: _jsx(Box, { component: "img", src: icon !== null && icon !== void 0 ? icon : darkFilterIcon, alt: "filter" }) })), _jsxs(Menu, Object.assign({ anchorEl: anchorEl, open: open, sx: Object.assign({ marginTop: '8px', marginBottom: '8px', width: 193 }, menuStyle), placement: "bottom-end" }, { children: [_jsx(TitleStyled, Object.assign({ component: "span" }, { children: title !== null && title !== void 0 ? title : t('filterBy') })), children, _jsxs(Footer, { children: [_jsx(CancelButton, Object.assign({ onClick: handleCancel }, { children: t('cancel') })), _jsx(OkayButton, Object.assign({ disabled: isOkayButDisabled, onClick: handleConfirm }, { children: t('okay') }))] })] })), open && _jsx(CustomBackdrop, { onClick: onClose })] })) })));
+    return (_jsx(ClickAwayListener, Object.assign({ onClickAway: handleCancel }, { children: _jsxs(Box, Object.assign({}, props, { children: [_jsx(FilterButton, Object.assign({ className: "filter-button", isActive: open, onClick: onOpen, sx: Object.assign({}, (isDisabled && Object.assign({ pointerEvents: 'none', opacity: 0.5 }, props.sx))) }, { children: renderButton !== null && renderButton !== void 0 ? renderButton : _jsx(Box, { component: "img", src: icon !== null && icon !== void 0 ? icon : darkFilterIcon, alt: "filter" }) })), _jsxs(Menu, Object.assign({ anchorEl: anchorEl, open: open, sx: Object.assign({ marginTop: '8px', marginBottom: '8px', width: 193 }, menuStyle), placement: "bottom-end" }, { children: [!hideTitle && _jsx(TitleStyled, Object.assign({ component: "span" }, { children: title !== null && title !== void 0 ? title : t('filterBy') })), children, _jsxs(Footer, { children: [_jsx(CancelButton, Object.assign({ onClick: handleCancel }, { children: t('cancel') })), _jsx(OkayButton, Object.assign({ disabled: isOkayButDisabled, onClick: handleConfirm }, { children: t('okay') }))] })] })), open && _jsx(CustomBackdrop, { onClick: onClose })] })) })));
 }

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.365-test.22",
-  "testVersion": 22,
+  "version": "0.1.365-test.24",
+  "testVersion": 24,
   "type": "module",
   "main": "build/index.js",
   "module": "build/index.js",

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

@@ -1,8 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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

@@ -1,4 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

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

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

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

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

@@ -1,8 +0,0 @@
-/// <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

@@ -1,23 +0,0 @@
-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

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

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

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

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

@@ -1,2 +0,0 @@
-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

@@ -1,24 +0,0 @@
-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

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

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

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

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

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

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

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

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

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