@tap-payments/os-micro-frontend-shared 0.1.441 → 0.1.442

package/build/components/AccordionAdapter/AccordionAdapter.js

@@ -0,0 +1,23 @@
+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, jsxs as _jsxs } from "react/jsx-runtime";
+import React from 'react';
+import { AccordionDetails } from '@mui/material';
+import Icon from '../Icon';
+import { downArrowIcon } from '../../constants/index.js';
+import { AccordionActionsStyled, AccordionStyled, AccordionSummaryStyled } from './style';
+function AccordionAdapter(_a) {
+    var { Header, Footer, summarySx } = _a, props = __rest(_a, ["Header", "Footer", "summarySx"]);
+    return (_jsxs(AccordionStyled, Object.assign({ component: "section", "data-testid": "AccordionAdapter" }, props, { children: [_jsx(AccordionSummaryStyled, Object.assign({ expandIcon: _jsx(Icon, { src: downArrowIcon }), "aria-controls": "panel3-content", id: "panel3-header", sx: summarySx }, { children: Header })), _jsx(AccordionDetails, Object.assign({ sx: { padding: 0 } }, { children: props.children })), Footer && _jsx(AccordionActionsStyled, { children: Footer })] })));
+}
+AccordionAdapter.displayName = 'AccordionAdapter';
+export default React.memo(AccordionAdapter);

package/build/components/AccordionAdapter/index.js

@@ -1 +1,2 @@
-export{a as default}from'../../chunk-WHWKA4SY.js';import'../../chunk-HBY2XKKF.js';import'../../chunk-OYEIM6ED.js';import'../../chunk-RWXGVZUC.js';
+import AccordionAdapter from './AccordionAdapter';
+export default AccordionAdapter;

package/build/components/AccordionAdapter/style.js

@@ -0,0 +1,38 @@
+import Accordion from '@mui/material/Accordion/Accordion';
+import AccordionActions from '@mui/material/AccordionActions/AccordionActions';
+import AccordionSummary from '@mui/material/AccordionSummary/AccordionSummary';
+import { styled } from '@mui/material/styles';
+export const AccordionStyled = styled(Accordion)(({ theme }) => ({
+    overflow: 'hidden',
+    border: '1px solid transparent',
+    background: '#ffffff',
+    borderRadius: '0px 0px 3px 3px',
+    margin: 0,
+    '&:before': {
+        content: 'unset',
+    },
+    '&.Mui-expanded': {
+        margin: 0,
+        border: `1px solid ${theme.palette.divider}`,
+    },
+}));
+export const AccordionSummaryStyled = styled(AccordionSummary)(() => ({
+    background: '#FBFBFB',
+    '&.Mui-expanded': {
+        minHeight: 'unset',
+    },
+    '& .MuiAccordionSummary-content': {
+        display: 'flex',
+        flexDirection: 'column',
+    },
+    '.MuiAccordionSummary-content.Mui-expanded': {
+        margin: '12px 0',
+    },
+}));
+export const AccordionSummaryHeaderSection = styled('section')(() => ({
+    display: 'flex',
+    flexDirection: 'column',
+}));
+export const AccordionActionsStyled = styled(AccordionActions)(({ theme }) => ({
+    borderTop: `1px solid ${theme.palette.divider}`,
+}));

package/build/components/AccountDropdown/Dropdown.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo } from 'react';
+import Box from '@mui/material/Box';
+import Popover from '@mui/material/Popover';
+import { blueDropdownArrowIcon, downArrowIcon } from '../../constants/index.js';
+import { HeaderDetails, HeaderWrapper, ListWrapper } from './style';
+function AccountDropdown({ onClose, open, anchorEl, trigger, onOpen, children, disabled }) {
+    return (_jsxs(HeaderWrapper, Object.assign({ open: open, onClick: onOpen, "data-testid": "Dropdown", disabled: disabled }, { children: [_jsx(HeaderDetails, { children: trigger }), _jsx(Box, Object.assign({ sx: { width: 16, height: 16, display: 'flex', alignItems: 'center' } }, { children: _jsx(Box, { component: "img", src: open ? blueDropdownArrowIcon : downArrowIcon, alt: "arrow", sx: Object.assign({ width: 16, height: 16 }, (open && { width: 12, height: 12, padding: '2px' })) }) })), _jsx(Popover, Object.assign({ open: open, anchorEl: anchorEl, sx: { width: anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.clientWidth }, onClose: onClose, anchorOrigin: {
+                    vertical: 'bottom',
+                    horizontal: 'left',
+                }, slotProps: {
+                    paper: {
+                        style: { width: anchorEl === null || anchorEl === void 0 ? void 0 : anchorEl.clientWidth, maxWidth: 'unset' },
+                    },
+                } }, { children: _jsx(ListWrapper, { children: children }) }))] })));
+}
+export default memo(AccountDropdown);

package/build/components/AccountDropdown/index.js

@@ -1 +1,2 @@
-export{a as default}from'../../chunk-EAUWAY4T.js';import'../../chunk-5AIEKGEA.js';import'../../chunk-OYEIM6ED.js';import'../../chunk-RWXGVZUC.js';
+import AccountDropdown from './Dropdown';
+export default AccountDropdown;

package/build/components/AccountDropdown/style.js

@@ -0,0 +1,26 @@
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+import Text from '../Text';
+export const HeaderWrapper = styled(Box, { shouldForwardProp: (props) => props !== 'open' && props !== 'disabled' })(({ theme, open, disabled }) => (Object.assign(Object.assign({ display: 'flex', alignItems: 'center', justifyContent: 'space-between', paddingInlineStart: '8px', paddingInlineEnd: '4px', paddingTop: '6px', paddingBottom: '6px', borderRadius: '4px', background: '#F9F9F9', border: `1px solid #F9F9F9`, cursor: 'pointer' }, (open && {
+    borderColor: theme.palette.info.dark,
+    background: theme.palette.common.white,
+})), (disabled && { cursor: 'not-allowed' }))));
+export const HeaderDetails = styled(Box)(() => ({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '4px',
+    fontSize: '10px',
+    fontWeight: 500,
+    flex: 1,
+}));
+export const ListWrapper = styled(Box)(({ theme }) => ({
+    padding: '4px',
+    borderRadius: '4px',
+    boxShadow: '-26px 156px 44px 0px rgba(0, 0, 0, 0.00), -17px 100px 41px 0px rgba(0, 0, 0, 0.01), -9px 56px 34px 0px rgba(0, 0, 0, 0.05), -4px 25px 25px 0px rgba(0, 0, 0, 0.09), -1px 6px 14px 0px rgba(0, 0, 0, 0.10), 0px 0px 0px 0px rgba(0, 0, 0, 0.10)',
+    backgroundColor: theme.palette.common.white,
+    maxHeight: 200,
+    marginTop: '4px',
+    width: 'auto',
+    overflow: 'auto',
+}));
+export const ItemStyled = styled(Text, { shouldForwardProp: (props) => props !== 'selected' })(({ theme, selected }) => (Object.assign({ paddingInlineStart: '12px', paddingInlineEnd: '8px', paddingTop: '8px', paddingBottom: '8px', fontSize: '10px', color: theme.palette.common.black, fontWeight: 500, lineHeight: '10px', cursor: 'pointer' }, (selected && { backgroundColor: '#F8F8F8' }))));

package/build/components/ActionMenu/ActionMenu.js

@@ -0,0 +1,101 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import { createPortal } from 'react-dom';
+import { blueCheckIcon, greyCheckIcon, greyCrossIcon, redCloseIcon, warningInfoIcon } from '../../constants/index.js';
+import { currencyConfig, formatCurrencyWithInput, intlCurrency } from '../../utils/index.js';
+import { CurrencyCodes } from '../../types/index.js';
+import ActionMenuDropDown from './ActionMenuDropDown';
+import ActionMenuItem from './ActionMenuItem';
+import { StyledPopover, Container, FirstContainer, StyledRowOfFirstContainer, StyledSecondRowOfFirstContainer, StyledWarning, StyledWarningInfoIcon, SecondContainer, IconContainer, StyledIcons, } from './style';
+function ActionMenu({ anchorEl, initialAmount, options, onConfirm, handleClose, currency, isCheckMarkHighlighted }) {
+    var _a;
+    const { t } = useTranslation();
+    const [amount, setAmount] = useState(initialAmount === null || initialAmount === void 0 ? void 0 : initialAmount.toString());
+    const [menuAnchor, setMenuAnchor] = useState();
+    const [warningMessage, setWarningMessage] = useState('');
+    const actionMenuRef = useRef(null);
+    const [showDropDown, setShowDropDown] = useState(false);
+    const [selectedCurrency, setSelectedCurrency] = useState(currency);
+    const isRefundInProcess = false;
+    const [focusInput, setFocusInput] = useState(false);
+    const [crossIcon, setCrossIcon] = useState(greyCrossIcon);
+    const [tickIcon, setTickIcon] = useState(greyCheckIcon);
+    const inputFocusRef = useRef();
+    const closeDropdown = () => {
+        setMenuAnchor(undefined);
+        setShowDropDown(false);
+    };
+    useEffect(() => {
+        var _a;
+        (_a = inputFocusRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    }, [focusInput]);
+    const closeDropDownWhenOptionSelected = () => {
+        closeDropdown();
+        setFocusInput((prev) => !prev);
+    };
+    const open = Boolean(anchorEl);
+    const toggleDropDown = (event) => {
+        setShowDropDown((prev) => !prev);
+        setMenuAnchor(event.currentTarget);
+    };
+    const selectedAmount = (_a = options === null || options === void 0 ? void 0 : options.find((option) => option.currency === selectedCurrency)) === null || _a === void 0 ? void 0 : _a.value;
+    const formattedCharge = intlCurrency(selectedAmount || 0, selectedCurrency);
+    const maxErrorMessage = `${t('maxAllowed')} ${formattedCharge}`;
+    const minErrorMessage = `${t('minAllowed')} ${formatCurrencyWithInput(0.1, selectedCurrency || CurrencyCodes.KWD)}`;
+    const onAmountChange = (value) => {
+        if (Number.isNaN(Number(value))) {
+            setAmount('0');
+        }
+        if (parseFloat(value || '0') > initialAmount) {
+            setWarningMessage(maxErrorMessage);
+        }
+        else if (parseFloat(value || '0') < 0.1 && value !== undefined) {
+            setWarningMessage(minErrorMessage);
+        }
+        else {
+            setWarningMessage('');
+        }
+        setAmount(value);
+    };
+    const handleSelectOption = (optionCharge, optionCurrency) => {
+        const chargeString = formatCurrencyWithInput(optionCharge || 0, optionCurrency || CurrencyCodes.KWD);
+        setAmount(chargeString);
+        setSelectedCurrency(optionCurrency || selectedCurrency);
+    };
+    const closeAllActions = (e) => {
+        setMenuAnchor(undefined);
+        setShowDropDown(false);
+        handleClose(e);
+    };
+    const handleHoveringCheckIcons = () => {
+        setTickIcon(blueCheckIcon);
+    };
+    const handleUnHoveringCheckIcons = () => {
+        setTickIcon(greyCheckIcon);
+    };
+    const handleCloseMenu = (e) => {
+        closeAllActions(e);
+    };
+    const handleCloseAllExceptOptionMenu = () => {
+        closeAllActions();
+    };
+    const handleHoveringCrossIcons = () => {
+        setCrossIcon(redCloseIcon);
+    };
+    const handleUnHoveringCrossIcons = () => {
+        setCrossIcon(greyCrossIcon);
+    };
+    const handleAction = () => {
+        onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(Number(amount), selectedCurrency);
+        handleCloseMenu();
+    };
+    const isCheckButtonDisabled = !!warningMessage || !amount;
+    return createPortal(_jsx(StyledPopover, Object.assign({ id: "styled-popover", open: open, anchorEl: anchorEl, style: { backgroundColor: 'transparent', zIndex: 3000 }, "aria-labelledby": "modal-modal-title", "aria-describedby": "modal-modal-description", anchorOrigin: {
+            vertical: 'top',
+            horizontal: -234,
+        }, ref: actionMenuRef, onClose: (e) => {
+            handleCloseMenu(e);
+        } }, { children: _jsxs(Container, Object.assign({ showWarning: !!warningMessage }, { children: [_jsxs(FirstContainer, { children: [_jsxs(StyledRowOfFirstContainer, Object.assign({ showWarning: !!warningMessage, showDropDown: showDropDown }, { children: [_jsx(ActionMenuItem, { showWarning: !!warningMessage, selectedCurrency: selectedCurrency, onAmountChange: onAmountChange, amount: amount, currencyConfig: currencyConfig, toggleDropDown: toggleDropDown, showDropDown: !showDropDown, showDropdownIcon: ((options === null || options === void 0 ? void 0 : options.length) || 0) > 1 }), _jsx(ActionMenuDropDown, { showDropDown: showDropDown, menuAnchor: menuAnchor, selectedCurrency: selectedCurrency, closeDropdown: closeDropDownWhenOptionSelected, options: options !== null && options !== void 0 ? options : [], handleSelectOption: handleSelectOption })] })), !!warningMessage && (_jsxs(StyledSecondRowOfFirstContainer, { children: [_jsx(StyledWarningInfoIcon, { src: warningInfoIcon, alt: "info" }), _jsx(StyledWarning, { children: warningMessage })] }))] }), _jsxs(SecondContainer, { children: [_jsx(IconContainer, Object.assign({ onMouseLeave: handleUnHoveringCrossIcons, onMouseEnter: handleHoveringCrossIcons, warning: true, role: "button", onClick: handleCloseAllExceptOptionMenu }, { children: _jsx(StyledIcons, { isRefundInProcess: isRefundInProcess, src: crossIcon, alt: "Cross icon" }) })), _jsx(IconContainer, Object.assign({ onMouseLeave: handleUnHoveringCheckIcons, onMouseEnter: handleHoveringCheckIcons, isRefundInProcess: isRefundInProcess, disabled: isCheckButtonDisabled, role: "button", onClick: handleAction, isHighlighted: isCheckMarkHighlighted }, { children: _jsx(StyledIcons, { src: tickIcon, alt: "Check icon" }) }))] })] })) })), document.body);
+}
+export default ActionMenu;

package/build/components/ActionMenu/ActionMenuDropDown.js

@@ -0,0 +1,24 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useTranslation } from 'react-i18next';
+import { intlCurrency } from '../../utils/index.js';
+import CountryFlag from '../CountryFlag';
+import { EnglishAmount, StyledCurrency, StyledIconRowContainer, StyledDropDownContainer, StyledDropdown, StyledMenuItem, StyledTextAmount, DropDownChargeGapColumn, } from './style';
+const Menu = ({ selectedCurrency, option, closeDropdown, handleSelectOption }) => {
+    var _a, _b, _c;
+    const { t } = useTranslation();
+    return (_jsxs(StyledMenuItem, Object.assign({ onClick: () => {
+            if (handleSelectOption) {
+                handleSelectOption(option.value, option === null || option === void 0 ? void 0 : option.currency);
+            }
+            closeDropdown();
+        } }, { children: [_jsx(EnglishAmount, Object.assign({ showBottomPadding: true, showWarning: false }, { children: t(option.name) })), _jsxs(DropDownChargeGapColumn, { children: [_jsxs(StyledIconRowContainer, Object.assign({ marginRightAuto: true }, { children: [_jsx(CountryFlag, { currencyCode: (_a = option === null || option === void 0 ? void 0 : option.currency) !== null && _a !== void 0 ? _a : selectedCurrency, width: "0.76rem" }), _jsx(StyledCurrency, { children: (_b = option === null || option === void 0 ? void 0 : option.currency) !== null && _b !== void 0 ? _b : selectedCurrency })] })), _jsx(StyledTextAmount, Object.assign({ showWarning: false }, { children: intlCurrency(option.value || 0, (_c = option === null || option === void 0 ? void 0 : option.currency) !== null && _c !== void 0 ? _c : selectedCurrency) }))] })] })));
+};
+function ActionMenuDropDown({ menuAnchor, showDropDown, selectedCurrency, options, closeDropdown, handleSelectOption }) {
+    if (options.length <= 1)
+        return null;
+    return (_jsx(StyledDropdown, Object.assign({ open: showDropDown, anchorEl: menuAnchor, anchorOrigin: {
+            vertical: 18,
+            horizontal: -76,
+        }, style: { backgroundColor: 'transparent', zIndex: 4000, padding: 0, margin: 0 }, onClose: closeDropdown }, { children: _jsx(StyledDropDownContainer, { children: options.map((option) => (_jsx(_Fragment, { children: Menu({ selectedCurrency, option, closeDropdown, handleSelectOption }) }))) }) })));
+}
+export default ActionMenuDropDown;

package/build/components/ActionMenu/ActionMenuItem.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import { blueDropdownArrowIcon, greyDropdownIcon } from '../../constants/index.js';
+import CountryFlag from '../CountryFlag';
+import { EnglishAmount, Charge, StyledIconRowContainer, StyledCurrency, StyledDropDownIcon, StyledAmount, StyledMissingDiv } from './style';
+import Skeleton from '../Skeleton';
+import CurrencySymbol from '../CurrencySymbol';
+function ActionMenuItem({ showWarning, selectedCurrency, onAmountChange, amount, currencyConfig, toggleDropDown, showDropDown, showDropdownIcon, disabled, isLoading, }) {
+    var _a, _b;
+    const { t } = useTranslation();
+    const iconRef = useRef(null);
+    const onClickMissingDiv = () => {
+        if (iconRef.current) {
+            iconRef.current.click();
+        }
+    };
+    return (_jsxs(_Fragment, { children: [_jsxs(Charge, { children: [_jsx(EnglishAmount, Object.assign({ showBottomPadding: true, showWarning: showWarning }, { children: t('amount') })), _jsxs(StyledIconRowContainer, Object.assign({ limited: true, paddingTop: true, onClick: onClickMissingDiv }, { children: [_jsx(CountryFlag, { currencyCode: selectedCurrency, width: "0.76rem" }), _jsx(StyledCurrency, { children: _jsx(CurrencySymbol, { currency: selectedCurrency }) }), !showWarning && showDropdownIcon && (_jsx(StyledDropDownIcon, { src: !showDropDown ? blueDropdownArrowIcon : greyDropdownIcon, alt: "drop-down icon", currencyPadding: true }))] }))] }), _jsx(StyledMissingDiv, { ref: iconRef, onClick: toggleDropDown }), isLoading ? (_jsx(Skeleton, { variant: "text", width: "100%", height: "100%" })) : (_jsx(StyledAmount, { disabled: disabled, placeholder: currencyConfig[selectedCurrency] ? '0.000' : '0.00', onValueChange: onAmountChange, value: amount, decimalsLimit: (_a = currencyConfig[selectedCurrency]) !== null && _a !== void 0 ? _a : 2, showWarning: showWarning || false, decimalScale: (_b = currencyConfig[selectedCurrency]) !== null && _b !== void 0 ? _b : 2, autoFocus: true }))] }));
+}
+export default ActionMenuItem;

package/build/components/ActionMenu/index.js

@@ -0,0 +1,4 @@
+import ActionMenu from './ActionMenu';
+export { default as ActionMenuItem } from './ActionMenuItem';
+export { default as ActionMenuDropDown } from './ActionMenuDropDown';
+export default ActionMenu;

package/build/components/ActionMenu/style.js

@@ -0,0 +1,179 @@
+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 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.js

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

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, 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, dateRange: dateRange, selectedCurrency: selectedCurrency });
+    }, [cursorPosition, dateRange, selectedCurrency]);
+    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.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.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.js

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

package/build/components/ActivityAreaChart/index.js

@@ -1 +1,4 @@
-export{a as ChartTooltip,b as LoadingChart,c as default}from'../../chunk-MYFLXP7G.js';import'../../chunk-G6N4V3PP.js';import'../../chunk-DQLGJFLX.js';import'../../chunk-EDMW226P.js';import'../../chunk-7IW25XZP.js';import'../../chunk-OYEIM6ED.js';import'../../chunk-RWXGVZUC.js';
+import ActivityAreaChart from './ActivityAreaChart';
+export * from './components';
+export * from './types';
+export default ActivityAreaChart;

package/build/components/ActivityAreaChart/styles.js

@@ -0,0 +1,46 @@
+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',
+    gap: '5px',
+    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',
+    maxHeight: '19px',
+});
+export const CurrencyText = styled(Typography)({
+    fontWeight: 500,
+    fontSize: 11,
+    lineHeight: '130%',
+    color: '#4B4847',
+    letterSpacing: '-0.14px',
+});

package/build/components/ActivityAreaChart/types.js

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

package/build/components/ActivityAreaChart/utils.js

@@ -0,0 +1,27 @@
+import dayjs from 'dayjs';
+import { DATA_KEY } from '../../constants/index.js';
+import { 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.toLocaleString()} ${unitLabel}`.trim();
+};
+export const getFormattedDateWithTimezone = (date, isSingleDay, hour = 0) => {
+    const dayjsDate = dayjs(date).add(hour, 'hour').format();
+    const todayDate = new Date();
+    const isCurrentYear = dayjs(dayjsDate).isSame(todayDate, 'year');
+    return formatCellDate(dayjsDate, 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'}`,
+        }, undefined, undefined, hour !== undefined);
+};