@tap-payments/os-micro-frontend-shared 0.0.1

package/build/components/ActionMenu/style.js

@@ -0,0 +1,183 @@
+import { alpha, styled } from '@mui/material';
+import Popover from '@mui/material/Popover';
+import CurrencyInput from 'react-currency-input-field';
+export const Container = styled('div')(({ showWarning }) => ({
+    display: 'flex',
+    gap: '0.25rem',
+    justifyContent: 'flex-start',
+    alignItems: 'flex-start',
+    padding: '0.25rem',
+    borderRadius: '0.25rem',
+    width: '14.25rem',
+    minHeight: showWarning ? '3.6rem' : '2.5rem',
+}));
+export const FirstContainer = styled('div')(() => ({
+    display: 'flex',
+    flexDirection: 'column',
+    width: '100%',
+}));
+export const SecondContainer = styled('div')(() => ({
+    display: 'flex',
+    alignItems: 'flex-start',
+    justifyContent: 'space-between',
+    flex: 1,
+}));
+export const StyledRowOfFirstContainer = styled('div')(({ theme, showWarning, showDropDown }) => (Object.assign({ height: '2rem', border: showWarning
+        ? `1px solid ${theme.palette.common.red}24`
+        : showDropDown
+            ? `1px solid ${theme.palette.info.dark}`
+            : `1px solid ${theme.palette.grey[100]}`, borderRadius: showWarning ? '0.25rem 0.25rem 0rem 0rem' : '0.25rem', display: 'flex', alignItems: 'center', justifyContent: 'space-between', paddingRight: '0.5rem', paddingLeft: '0.5rem', paddingTop: '0.25rem', paddingBottom: '0.25rem', margin: 0, zIndex: 4000 }, (showDropDown && {
+    boxShadow: `0px 0px 4px 0px ${theme.palette.info.dark}80`,
+}))));
+export const StyledSecondRowOfFirstContainer = styled('div')(({ theme }) => ({
+    height: '1.1rem',
+    borderRadius: '0rem 0rem 0.25rem 0.25rem',
+    display: 'flex',
+    justifyContent: 'flex-start',
+    margin: 0,
+    alignItems: 'center',
+    background: theme.palette.background.gradient.error,
+    paddingLeft: '0.5rem',
+}));
+export const StyledWarning = styled('p')(({ theme }) => ({
+    color: theme.palette.common.red,
+    fontSize: '0.62rem',
+    fontWeight: 400,
+    fontFamily: 'Lato',
+    padding: 0,
+    margin: 0,
+    paddingLeft: '0.25rem',
+}));
+export const StyledWarningInfoIcon = styled('img')({
+    height: 'auto',
+    width: 'auto',
+    verticalAlign: 'top',
+});
+export const Charge = styled('div')({
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+});
+export const DropDownChargeGapColumn = styled('div')({
+    display: 'flex',
+    height: '0.8rem',
+    alignItems: 'center',
+    width: '8.5rem',
+});
+export const StyledAmount = styled(CurrencyInput)(({ theme, showWarning, disabled }) => (Object.assign({ color: showWarning ? theme.palette.common.red : theme.palette.text.primary, fontSize: '0.8125rem', fontWeight: 600, width: '4.5rem', height: '0.9rem', border: 'none', outline: 'none', textAlign: 'right', padding: 0, '&::-webkit-outer-spin-button': {
+        appearance: 'none',
+        margin: 0,
+    }, '&::-webkit-inner-spin-button': {
+        appearance: 'none',
+        margin: 0,
+    }, backgroundColor: 'transparent', alignSelf: 'flex-end', '&::placeholder': {
+        color: theme.palette.grey.A400,
+    } }, (disabled && {
+    opacity: 0.3,
+}))));
+export const StyledTextAmount = styled('p')(({ theme }) => ({
+    color: theme.palette.text.primary,
+    fontSize: '0.8125rem',
+    fontWeight: 600,
+    width: '5.2rem',
+    border: 'none',
+    outline: 'none',
+    padding: 0,
+    margin: 0,
+    paddingLeft: 16,
+    textAlign: 'right',
+    '&::-webkit-outer-spin-button': {
+        appearance: 'none',
+        margin: 0,
+    },
+    '&::-webkit-inner-spin-button': {
+        appearance: 'none',
+        margin: 0,
+    },
+    alignSelf: 'center',
+}));
+export const EnglishAmount = styled('p')(({ theme, showWarning, showBottomPadding, autoMargin }) => (Object.assign(Object.assign({ color: showWarning ? theme.palette.common.red : theme.palette.grey[700], fontSize: '0.625rem', fontWeight: 500, padding: 0, margin: 0, height: showBottomPadding ? '0.43rem' : 'auto' }, (showBottomPadding && {
+    lineHeight: '0.625',
+    leadingTrim: 'both',
+    paddingBottom: '0.31rem',
+})), (autoMargin && {
+    paddingBottom: '0.43rem',
+    lineHeight: '0.625',
+}))));
+export const FlexContainer = styled('div')({
+    display: 'flex',
+});
+export const StyledIconRowContainer = styled(FlexContainer)(({ limited, paddingTop, marginRightAuto }) => (Object.assign(Object.assign(Object.assign({ paddingRight: '0.5rem', alignItems: 'center', cursor: 'pointer' }, (marginRightAuto && {
+    marginRight: 'auto',
+})), (limited && {
+    width: '3rem',
+})), (paddingTop && {
+    paddingTop: '0.31rem',
+}))));
+export const StyledCurrency = styled('p')(({ theme }) => ({
+    color: theme.palette.text.primary,
+    fontSize: '0.68rem',
+    fontWeight: 500,
+    margin: 0,
+    padding: 0,
+    textTransform: 'capitalize',
+    paddingRight: '0.25rem',
+    paddingLeft: '0.2rem',
+    lineHeight: '0.865',
+}));
+export const StyledMissingDiv = styled('div')({
+    width: 0,
+    height: 0,
+});
+export const StyledFlag = styled('img')({
+    width: '0.76rem',
+    height: '0.56rem',
+});
+export const StyledPopover = styled(Popover)(({ theme }) => ({
+    backgroundColor: theme.palette.background.default,
+    boxShadow: theme.shadows[21],
+    '& .MuiPaper-root': {
+        borderRadius: '0.25rem',
+    },
+}));
+export const IconContainer = styled('div')(({ theme, disabled, isRefundInProcess, warning, isHighlighted }) => (Object.assign(Object.assign({ borderRadius: '0.3rem', backgroundColor: theme.palette.common.white, border: `1px solid ${isRefundInProcess ? theme.palette.info.dark : theme.palette.grey[100]}`, width: '2rem', height: '2rem', display: 'flex', justifyContent: 'center', alignItems: 'center', cursor: 'pointer', pointerEvents: disabled ? 'none' : 'auto', transition: 'all 0.2s ease-in-out', '&:hover': {
+        border: `1px solid ${warning ? theme.palette.common.red : theme.palette.info.dark}`,
+    } }, (isHighlighted && {
+    border: `1px solid ${theme.palette.info.dark}`,
+})), (disabled && {
+    opacity: 0.3,
+}))));
+export const StyledIcons = styled('img')(() => ({
+    width: '0.85rem',
+    height: '0.85rem',
+}));
+export const StyledDropdown = styled(Popover)(({ theme }) => ({
+    backgroundColor: 'transparent',
+    boxShadow: theme.shadows[21],
+    borderRadius: '0.25rem',
+    '& .MuiPaper-root': {
+        borderRadius: '0.25rem',
+    },
+}));
+export const StyledDropDownContainer = styled('div')(({ showDaysMenu }) => ({
+    height: showDaysMenu ? '4.5rem' : 'auto',
+}));
+export const StyledMenuItem = styled('div')(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'flex-start',
+    justifyContent: 'space-between',
+    borderBottom: `1px solid ${theme.palette.grey[100]}`,
+    maxWidth: '9.25rem',
+    height: '2.75rem',
+    padding: '0.5rem',
+    cursor: 'pointer',
+    gap: '0.31rem',
+    flexDirection: 'column',
+    transition: 'all 0.2s ease-in-out',
+    '&:hover': {
+        boxShadow: `0px 0px 16px 0px ${alpha(theme.palette.common.black, 0.13)}`,
+    },
+}));
+export const StyledDropDownIcon = styled('img')(({ spaceFromBottom, currencyPadding }) => (Object.assign({ height: '0.4rem', width: '0.6rem', cursor: 'pointer', marginBottom: spaceFromBottom ? '0' : currencyPadding ? '0' : 'auto', verticalAlign: 'middle' }, (spaceFromBottom && {
+    marginTop: '2px',
+}))));

package/build/components/ActionMenu/type.d.ts

@@ -0,0 +1,15 @@
+import { SyntheticEvent } from 'react';
+import { CurrencyCodes } from '../../types/index.js';
+export interface ActionMenuProps {
+    anchorEl: HTMLElement | null;
+    initialAmount: number;
+    currency: CurrencyCodes;
+    options?: Array<{
+        name: string;
+        value?: number;
+        currency?: string;
+    }>;
+    onConfirm?: (amount: number, currency: string) => void;
+    handleClose: (e?: SyntheticEvent) => void;
+    isCheckMarkHighlighted?: boolean;
+}

package/build/components/ActionMenu/type.js

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

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

@@ -0,0 +1,3 @@
+import { ActivityAreaChartProps } from './types';
+declare const ActivityAreaChart: ({ data, dataKey, isLoading, offset, dateRange, selectedCurrency }: ActivityAreaChartProps) => import("react/jsx-runtime").JSX.Element;
+export default ActivityAreaChart;

package/build/components/ActivityAreaChart/ActivityAreaChart.js

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs } 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';
+const ActivityAreaChart = ({ data, dataKey, isLoading, offset, dateRange, selectedCurrency }) => {
+    const theme = useTheme();
+    const [chartHovered, setChartHovered] = useState(false);
+    const [cursorPosition, setCursorPosition] = useState({ x: 0, y: 0 });
+    const isEmpty = (data === null || data === void 0 ? void 0 : data.length) === 0;
+    const handleMouseMove = (e) => {
+        if (e.activeCoordinate && e.isTooltipActive) {
+            setCursorPosition(e.activeCoordinate);
+        }
+    };
+    const MemoizedChartTooltip = useMemo(() => {
+        return _jsx(ChartTooltip, { position: cursorPosition, offset: offset, dateRange: dateRange, selectedCurrency: selectedCurrency });
+    }, [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),
+                    } })] })) }));
+};
+export default ActivityAreaChart;

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

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

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

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import dayjs from 'dayjs';
+import { getCurrencyCodeFlag, getLocalizedUnitLabel } from '../../../utils/index.js';
+import { DATA_KEY } from '../../../constants/index.js';
+import { TooltipContainer, TimeTypography, ValueTypography, CurrencyBox, CurrencyText, CurrencyIcon } from '../styles';
+import { getTooltipFormattedValue, getFormattedDateWithTimezone } from '../utils';
+const ChartTooltip = ({ active, payload, offset, dateRange, selectedCurrency }) => {
+    var _a, _b, _c;
+    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, offset, isSingleDay);
+        return (_jsxs(TooltipContainer, Object.assign({ className: "chart-tooltip" }, { children: [_jsx(TimeTypography, { children: formattedDate !== null && formattedDate !== void 0 ? formattedDate : (_c = point === null || point === void 0 ? void 0 : point.payload) === null || _c === void 0 ? void 0 : _c.date }), _jsxs(ValueTypography, { children: [`${getTooltipFormattedValue(point, t(localizedUnitLabel), selectedCurrency)}`, (point === null || point === void 0 ? void 0 : point.dataKey) === DATA_KEY.AMOUNT && (_jsxs(CurrencyBox, { children: [_jsx(CurrencyIcon, { src: getCurrencyCodeFlag(selectedCurrency), alt: `${selectedCurrency} flag` }), _jsx(CurrencyText, { children: 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.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Area, AreaChart, ResponsiveContainer } from 'recharts';
+const loadingData = [
+    { dataKey: 30 },
+    { dataKey: 32.9941 },
+    { dataKey: 39.0471 },
+    { dataKey: 56.3412 },
+    { dataKey: 69.3118 },
+    { dataKey: 87.4706 },
+    { dataKey: 94.3882 },
+    { dataKey: 110.406 },
+];
+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

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

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

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

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

@@ -0,0 +1,4 @@
+import ActivityAreaChart from './ActivityAreaChart';
+export * from './components';
+export * from './types';
+export default ActivityAreaChart;

package/build/components/ActivityAreaChart/index.js

@@ -0,0 +1,4 @@
+import ActivityAreaChart from './ActivityAreaChart';
+export * from './components';
+export * from './types';
+export default ActivityAreaChart;

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

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+export declare const TooltipContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").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").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const TimeTypography: 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" | "textAlign" | "className" | "style" | "classes" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "color" | "zIndex" | "position" | "boxShadow" | "maxWidth" | "minWidth" | "maxHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textTransform" | "children" | "sx" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const ValueTypography: 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" | "textAlign" | "className" | "style" | "classes" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "color" | "zIndex" | "position" | "boxShadow" | "maxWidth" | "minWidth" | "maxHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textTransform" | "children" | "sx" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const CurrencyBox: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").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").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" | "textAlign" | "className" | "style" | "classes" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "color" | "zIndex" | "position" | "boxShadow" | "maxWidth" | "minWidth" | "maxHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textTransform" | "children" | "sx" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const CurrencyIcon: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;

package/build/components/ActivityAreaChart/styles.js

@@ -0,0 +1,52 @@
+import { Box, Typography, styled } from '@mui/material';
+export const TooltipContainer = styled(Box)(() => ({
+    width: 'auto',
+    display: 'inline-block',
+    whiteSpace: 'nowrap',
+    backgroundColor: 'white',
+    padding: '6px',
+    border: '1.5px solid #E6E6E6',
+    borderRadius: '7.5px',
+    backdropFilter: 'blur(23.280000686645508px)',
+    boxShadow: '0px 0px 15.52px 0px #4B484729',
+}));
+export const TimeTypography = styled(Typography)({
+    width: 'auto',
+    marginBottom: '4px',
+    fontWeight: 500,
+    color: '#4B4847ED',
+    fontSize: '9px',
+    whiteSpace: 'nowrap',
+    overflow: 'visible',
+});
+export const ValueTypography = styled(Typography)({
+    display: 'flex',
+    alignItems: 'center',
+    fontWeight: 600,
+    color: '#4B4847',
+    fontSize: 11,
+    whiteSpace: 'nowrap',
+    overflow: 'visible',
+    width: 'auto',
+});
+export const CurrencyBox = styled(Box)({
+    display: 'flex',
+    alignItems: 'center',
+    height: '100%',
+    gap: '2.6px',
+    marginLeft: '5px',
+    maxHeight: '19px',
+});
+export const CurrencyText = styled(Typography)({
+    fontWeight: 500,
+    fontSize: 11,
+    lineHeight: '130%',
+    color: '#4B4847',
+    letterSpacing: '-0.14px',
+});
+export const CurrencyIcon = styled('img')({
+    width: 12,
+    height: 8.8,
+    display: 'flex',
+    alignItems: 'center',
+});

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

@@ -0,0 +1,33 @@
+export interface ActivityAreaChartProps {
+    data: ChartDataPoint[];
+    dataKey: string;
+    isLoading?: boolean;
+    offset: string | number | undefined;
+    dateRange: [Date, Date];
+    selectedCurrency: string;
+}
+export interface ChartTooltipProps {
+    active?: boolean;
+    payload?: Array<{
+        value?: number;
+        dataKey?: string;
+        payload?: {
+            date?: string;
+            count?: number;
+            amount?: number;
+        };
+    }>;
+    position?: {
+        x: number;
+        y: number;
+    };
+    offset: string | number | undefined;
+    dateRange: [Date, Date];
+    selectedCurrency: string;
+}
+export interface ChartDataPoint {
+    date: string;
+    count: number;
+    amount: number;
+}
+export type PayloadItem = NonNullable<ChartTooltipProps['payload']>[number];

package/build/components/ActivityAreaChart/types.js

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

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

@@ -0,0 +1,3 @@
+import { PayloadItem } from './types';
+export declare const getTooltipFormattedValue: (point: PayloadItem | undefined, unitLabel: string, currency: string) => string;
+export declare const getFormattedDateWithTimezone: (date: string | number | Date, offset: string | number | undefined, isSingleDay: boolean) => string;

package/build/components/ActivityAreaChart/utils.js

@@ -0,0 +1,30 @@
+import dayjs from 'dayjs';
+import { DATA_KEY, TIMEZONES } from '../../constants/index.js';
+import { changeDateTimezone, formatAmountWithCurrency, formatCellDate } from '../../utils/index.js';
+export const getTooltipFormattedValue = (point, unitLabel, currency) => {
+    if ((point === null || point === void 0 ? void 0 : point.value) === undefined || (point === null || point === void 0 ? void 0 : point.value) === null) {
+        return '';
+    }
+    if ((point === null || point === void 0 ? void 0 : point.dataKey) === DATA_KEY.AMOUNT) {
+        return `${formatAmountWithCurrency(point.value, currency).fullAmount}`.trim();
+    }
+    return `${point.value} ${unitLabel}`.trim();
+};
+export const getFormattedDateWithTimezone = (date, offset, isSingleDay) => {
+    const timezoneDate = changeDateTimezone(date !== null && date !== void 0 ? date : '', {
+        currentTimezone: TIMEZONES.UTC,
+        targetTimezone: offset,
+    });
+    const todayDate = new Date();
+    const isCurrentYear = dayjs(timezoneDate).isSame(todayDate, 'year');
+    return formatCellDate(timezoneDate, isSingleDay
+        ? undefined
+        : {
+            sameDay: `[Today] ${isCurrentYear ? '' : 'YYYY'}`,
+            nextDay: `[Tomorrow] ${isCurrentYear ? '' : 'YYYY'}`,
+            lastDay: `[Yesterday] ${isCurrentYear ? '' : 'YYYY'}`,
+            sameElse: `MMM DD ${isCurrentYear ? '' : ', YYYY'}`,
+            lastWeek: `MMM DD ${isCurrentYear ? '' : ', YYYY'}`,
+            nextWeek: `MMM DD ${isCurrentYear ? '' : ', YYYY'}`,
+        });
+};

package/build/components/AppWindow/AppWindow.d.ts

@@ -0,0 +1,3 @@
+import { AppWindowProps } from './type';
+declare function AppWindow({ children, windowProps, ...props }: AppWindowProps): import("react/jsx-runtime").JSX.Element | null;
+export default AppWindow;

package/build/components/AppWindow/AppWindow.js

@@ -0,0 +1,22 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { AppWindowContextProvider } from './context';
+import Window from './window';
+function AppWindow(_a) {
+    var { children, windowProps } = _a, props = __rest(_a, ["children", "windowProps"]);
+    if (!props.isOpen) {
+        return null;
+    }
+    return (_jsx(AppWindowContextProvider, Object.assign({}, props, { children: _jsx(Window, Object.assign({}, windowProps, { children: children })) })));
+}
+export default AppWindow;

package/build/components/AppWindow/context/Provider.d.ts

@@ -0,0 +1,2 @@
+import { AppWindowProviderProps } from './type';
+export declare function AppWindowContextProvider({ children, isOpen, onClose, defaultWindowHeight, defaultWindowWidth }: AppWindowProviderProps): import("react/jsx-runtime").JSX.Element;

package/build/components/AppWindow/context/Provider.js

@@ -0,0 +1,70 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo, useRef, useState } from 'react';
+import { useWindowDimensions } from '../../../hooks/index.js';
+import { AppWindowContext } from './context';
+const DEFAULT_VIEWER_WIDTH = 555;
+const DEFAULT_VIEWER_HEIGHT = 545;
+export function AppWindowContextProvider({ children, isOpen, onClose, defaultWindowHeight, defaultWindowWidth }) {
+    const { height, width } = useWindowDimensions();
+    const viewerDefaultWidth = defaultWindowWidth || DEFAULT_VIEWER_WIDTH;
+    const viewerDefaultHeight = defaultWindowHeight || DEFAULT_VIEWER_HEIGHT;
+    const [position, setPosition] = useState({
+        x: width / 2 + viewerDefaultWidth / 2,
+        y: height / 2 - viewerDefaultHeight / 2,
+    });
+    const [isMaximized, setIsMaximized] = useState(false);
+    const [isResized, setIsResized] = useState(false);
+    const [isToolbarAnimationDisabled, setIsToolbarAnimationDisabled] = useState(false);
+    const [isSidebarExpanded, setIsSidebarExpanded] = useState(true);
+    const resizableRef = useRef();
+    const [dimensions, setNewDimensions] = useState({ width: 0, height: 0 });
+    const updateRefSize = ({ width: windowWidth, height: windowHeight }) => {
+        var _a;
+        (_a = resizableRef === null || resizableRef === void 0 ? void 0 : resizableRef.current) === null || _a === void 0 ? void 0 : _a.updateSize({ width: windowWidth, height: windowHeight });
+    };
+    const contextValue = useMemo(() => ({
+        position,
+        setPosition,
+        resizableRef,
+        windowZIndex: 1,
+        isOpen,
+        setIsMaximized,
+        setIsSidebarExpanded,
+        setIsToolbarAnimationDisabled,
+        setIsResized,
+        isMaximized,
+        isToolbarAnimationDisabled,
+        isSidebarExpanded,
+        isResized,
+        dimensions,
+        setNewDimensions,
+        viewerDefaultWidth,
+        viewerDefaultHeight,
+        onClose,
+        fullWindowWidth: width,
+        fullWindowHeight: height,
+        updateRefSize,
+    }), [
+        position,
+        setPosition,
+        resizableRef,
+        isOpen,
+        setIsMaximized,
+        setIsSidebarExpanded,
+        setIsToolbarAnimationDisabled,
+        setIsResized,
+        isMaximized,
+        isToolbarAnimationDisabled,
+        isSidebarExpanded,
+        isResized,
+        dimensions,
+        setNewDimensions,
+        width,
+        height,
+        viewerDefaultWidth,
+        viewerDefaultHeight,
+        updateRefSize,
+        onClose,
+    ]);
+    return _jsx(AppWindowContext.Provider, Object.assign({ value: contextValue }, { children: children }));
+}

package/build/components/AppWindow/context/context.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { AppWindowContextProps } from './type';
+export declare const AppWindowContext: import("react").Context<AppWindowContextProps>;

package/build/components/AppWindow/context/context.js

@@ -0,0 +1,30 @@
+import { createContext } from 'react';
+export const AppWindowContext = createContext({
+    viewerDefaultWidth: 555,
+    viewerDefaultHeight: 545,
+    position: {
+        x: 0,
+        y: 0,
+    },
+    setPosition: () => { },
+    dimensions: {
+        width: 0,
+        height: 0,
+    },
+    windowZIndex: 10000,
+    isOpen: true,
+    setIsMaximized: () => { },
+    setIsSidebarExpanded: () => { },
+    setIsToolbarAnimationDisabled: () => { },
+    setIsResized: () => { },
+    setNewDimensions: () => { },
+    isMaximized: false,
+    isToolbarAnimationDisabled: true,
+    isSidebarExpanded: false,
+    isResized: false,
+    onClose: () => { },
+    fullWindowWidth: 0,
+    fullWindowHeight: 0,
+    resizableRef: { current: null },
+    updateRefSize: () => { },
+});

package/build/components/AppWindow/context/index.d.ts

@@ -0,0 +1,2 @@
+export * from './context';
+export { AppWindowContextProvider } from './Provider';

package/build/components/AppWindow/context/index.js

@@ -0,0 +1,2 @@
+export * from './context';
+export { AppWindowContextProvider } from './Provider';