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

package/build/components/AccountDropdown/Dropdown.js

@@ -1,17 +0,0 @@
-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/style.js

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

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

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

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

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

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

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

package/build/components/ActivityAreaChart/ActivityAreaChart.js

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

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

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

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

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

package/build/components/ActivityAreaChart/styles.js

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

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

package/build/components/ActivityAreaChart/utils.js

@@ -1,27 +0,0 @@
-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);
-};

package/build/components/Amount/TotalAmount/Loading.js

@@ -1,9 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import Skeleton from '@mui/material/Skeleton';
-export const Loading = () => {
-    return (_jsx(Skeleton, { sx: {
-            height: 32,
-            width: 80,
-            borderRadius: '4px',
-        }, variant: "rectangular" }));
-};

package/build/components/Amount/TotalAmount/TotalAmount.js

@@ -1,62 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { memo, useState, useMemo, useEffect } from 'react';
-import { useTranslation } from 'react-i18next';
-import Box from '@mui/material/Box';
-import { removeAllItem, unknownIcon } from '../../../constants/index.js';
-import { useConfirmDialog, DisplayAmount } from '../../index.js';
-import { isSafariBrowser, numberToString, getAmountPlaceholder } from '../../../utils/index.js';
-import { InputStyled, TotalAmountWrapper, Error } from './style';
-import { Loading } from './Loading';
-const isSafari = isSafariBrowser();
-function TotalAmount({ totalGrossAmount, items, selectedCurrency, isAmountIsMissing, isDisabled, isLoading, onResetAllItems, onAddFirstItem, }) {
-    var _a;
-    const [editMode, setEditMode] = useState(false);
-    const [amount, setAmount] = useState();
-    const { isConfirmed } = useConfirmDialog();
-    const { t } = useTranslation();
-    const currencyPlaceholder = useMemo(() => getAmountPlaceholder(selectedCurrency === null || selectedCurrency === void 0 ? void 0 : selectedCurrency.decimals), [selectedCurrency === null || selectedCurrency === void 0 ? void 0 : selectedCurrency.decimals]);
-    useEffect(() => {
-        if (!totalGrossAmount) {
-            setAmount(undefined);
-        }
-    }, [totalGrossAmount]);
-    const removeAllItems = () => {
-        isConfirmed({
-            message: t('removeTotalAmount'),
-            confirmText: _jsx(Box, Object.assign({ sx: (theme) => ({ color: theme.palette.error.light }) }, { children: t('remove') })),
-            cancelText: t('cancel') || 'Cancel',
-        }).then((confirmed) => {
-            if (confirmed) {
-                onResetAllItems();
-                setAmount(undefined);
-            }
-        });
-    };
-    const handleChangeInput = (e) => {
-        if (!e.target.value) {
-            setAmount(undefined);
-            return false;
-        }
-        setAmount(Number(numberToString(Number(e.target.value), selectedCurrency === null || selectedCurrency === void 0 ? void 0 : selectedCurrency.decimals)));
-    };
-    const handleBlurInput = (e) => {
-        setEditMode(false);
-        onAddFirstItem(Number(numberToString(Number(e.target.value), selectedCurrency === null || selectedCurrency === void 0 ? void 0 : selectedCurrency.decimals)));
-    };
-    const isEditable = totalGrossAmount === 0 || (items.length === 1 && totalGrossAmount === items[0].total);
-    const currencyCode = ((_a = selectedCurrency === null || selectedCurrency === void 0 ? void 0 : selectedCurrency.code) === null || _a === void 0 ? void 0 : _a.english) || '';
-    if (isLoading) {
-        return _jsx(Loading, {});
-    }
-    return (_jsxs(Box, Object.assign({ sx: Object.assign({}, (isDisabled && { pointerEvents: 'none', opacity: 0.7 })) }, { children: [editMode ? (_jsx(_Fragment, { children: isEditable ? (_jsx(InputStyled, { value: amount, placeholder: currencyPlaceholder, hideArrows: true, inputProps: { step: '0.01' }, onChange: handleChangeInput, onBlur: handleBlurInput, onKeyDown: (evt) => {
-                        if (isSafari && isNaN(Number(evt.key)) && evt.key !== 'Backspace' && evt.key !== '.') {
-                            evt.preventDefault();
-                        }
-                    }, autoFocus: true })) : (_jsx(DisplayAmount, { sx: { fontSize: '36px', textAlign: 'center' }, amount: totalGrossAmount || 0, currencyCode: currencyCode, onClick: () => {
-                        setEditMode(true);
-                    } })) })) : (_jsxs(TotalAmountWrapper, { children: [_jsx(DisplayAmount, { sx: { fontSize: '36px', textAlign: 'center' }, currencyCode: currencyCode, amount: totalGrossAmount || 0, onClick: () => {
-                            if (isEditable)
-                                setEditMode(true);
-                        } }), totalGrossAmount > 0 && _jsx(Box, { component: "img", src: removeAllItem, alt: "r", onClick: removeAllItems })] })), isAmountIsMissing && (_jsxs(Error, { children: [_jsx(Box, { component: "img", src: unknownIcon }), _jsx(Box, { children: t('enterAmount') })] }))] })));
-}
-export default memo(TotalAmount);

package/build/components/Amount/TotalAmount/index.js

@@ -1 +0,0 @@
-export { default } from './TotalAmount';