@tap-payments/os-micro-frontend-shared 0.1.39 → 0.1.40-9.hotfix.1

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

@@ -0,0 +1,30 @@
+/// <reference types="react" />
+export declare const StyledCloseButtonWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, {}>;
+export declare const StyledColorWidgetWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const Footer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const EditButton: import("@emotion/styled").StyledComponent<import("@mui/material/Typography").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, "width" | "minHeight" | "height" | "bottom" | "left" | "right" | "top" | "border" | "boxShadow" | "fontWeight" | "zIndex" | "alignContent" | "alignItems" | "alignSelf" | "boxSizing" | "color" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "justifyContent" | "justifyItems" | "justifySelf" | "letterSpacing" | "lineHeight" | "marginBlockEnd" | "marginBlockStart" | "marginBottom" | "marginInlineEnd" | "marginInlineStart" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minWidth" | "order" | "paddingBlockEnd" | "paddingBlockStart" | "paddingBottom" | "paddingInlineEnd" | "paddingInlineStart" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "visibility" | "whiteSpace" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "marginBlock" | "marginInline" | "overflow" | "padding" | "paddingBlock" | "paddingInline" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint" | "classes" | "align" | "className" | "style" | "children" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping"> & {
+    component?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+} & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const ConfirmButton: import("@emotion/styled").StyledComponent<import("@mui/material/Button").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, "color" | "disabled" | "classes" | "className" | "style" | "tabIndex" | "children" | "sx" | "variant" | "size" | "fullWidth" | "href" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "startIcon"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const CancelButton: import("@emotion/styled").StyledComponent<import("@mui/material/Button").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, "color" | "disabled" | "classes" | "className" | "style" | "tabIndex" | "children" | "sx" | "variant" | "size" | "fullWidth" | "href" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "startIcon"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const ColorSchemeButton: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, keyof import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+    active?: boolean | undefined;
+}, {}, {}>;
+export declare const ColorSchemeList: import("@emotion/styled").StyledComponent<import("@mui/material/MenuList").MenuListOwnProps & import("@mui/material").ListOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & {
+    ref?: ((instance: HTMLUListElement | null) => void) | import("react").RefObject<HTMLUListElement> | null | undefined;
+}, "autoFocus" | "children" | keyof import("@mui/material/OverridableComponent").CommonProps | "sx" | "variant" | "dense" | "subheader" | "disablePadding" | "autoFocusItem" | "disabledItemsFocusable" | "disableListWrap"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const StyledInput: import("@emotion/styled").StyledComponent<{
+    variant?: import("@mui/material/TextField").TextFieldVariants | undefined;
+} & Omit<import("@mui/material/TextField").FilledTextFieldProps | import("@mui/material/TextField").OutlinedTextFieldProps | import("@mui/material/TextField").StandardTextFieldProps, "variant"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;

package/build/components/ColorPicker/style.js

@@ -0,0 +1,157 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { styled, alpha } from '@mui/material/styles';
+import Box from '@mui/material/Box';
+import Button from '@mui/material/Button';
+import TextField from '@mui/material/TextField';
+import MenuList from '@mui/material/MenuList';
+import Typography from '@mui/material/Typography';
+export const StyledCloseButtonWrapper = styled('button')({
+    background: 'transparent',
+    border: 'none',
+    padding: 0,
+    margin: 0,
+    cursor: 'pointer',
+    width: 10,
+    height: 10,
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    '&:disabled, &.Mui-disabled': {
+        opacity: 0.5,
+        cursor: 'not-allowed',
+    },
+});
+export const StyledColorWidgetWrapper = styled(Box)(({ theme }) => ({
+    boxShadow: '0px 8px 30px rgba(0, 0, 0, 0.16)',
+    width: 264,
+    backgroundColor: '#ffffff',
+    padding: '12px',
+    borderRadius: theme.spacing(1),
+    '& .react-colorful': {
+        width: '100%',
+        '&__saturation': {
+            minHeight: 152,
+            borderRadius: '4px',
+            marginBottom: theme.spacing(2),
+            border: 0,
+            '&-pointer': {
+                width: 13,
+                height: 13,
+            },
+        },
+        '&__hue': {
+            borderRadius: '4px',
+            height: '8px',
+            '&-pointer': {
+                width: 10,
+                height: 10,
+            },
+        },
+        '&__alpha': {
+            marginTop: theme.spacing(2),
+            marginBottom: 0,
+            border: 0,
+            borderRadius: '4px',
+            height: '8px',
+            '&-pointer': {
+                width: 10,
+                height: 10,
+            },
+        },
+    },
+}));
+export const Footer = styled(Box)(() => ({
+    display: 'flex',
+    gap: '8px',
+    justifyContent: 'flex-end',
+}));
+export const EditButton = styled((props) => _jsx(Typography, Object.assign({}, props, { component: "button" })))(({ theme }) => ({
+    fontWeight: 500,
+    fontSize: '9px',
+    color: theme.palette.info.dark,
+    textDecoration: 'underline',
+    cursor: 'pointer',
+    background: 'transparent',
+    border: 'none',
+    padding: 0,
+    margin: 0,
+    '&:disabled, &.Mui-disabled': {
+        color: alpha(theme.palette.info.dark, 0.5),
+        textDecoration: 'none',
+    },
+    '&:hover': {
+        textDecoration: 'none',
+    },
+}));
+export const ConfirmButton = styled(Button)(({ theme }) => ({
+    textTransform: 'capitalize',
+    minWidth: 'auto',
+    width: 74,
+    borderRadius: '4px',
+    border: `1px solid ${theme.palette.info.dark}`,
+    backgroundColor: theme.palette.info.dark,
+    fontWeight: 700,
+    fontSize: '11px',
+    color: theme.palette.common.white,
+    '&:hover': {
+        backgroundColor: theme.palette.info.dark,
+    },
+}));
+export const CancelButton = styled(Button)(({ theme }) => ({
+    textTransform: 'capitalize',
+    minWidth: 'auto',
+    width: 74,
+    borderRadius: '4px',
+    border: `1px solid ${theme.palette.divider}`,
+    backgroundColor: theme.palette.common.white,
+    fontWeight: 500,
+    fontSize: '11px',
+    color: theme.palette.text.primary,
+    '&:hover': {
+        background: 'transparent',
+    },
+}));
+export const ColorSchemeButton = styled(Box, {
+    shouldForwardProp: (prop) => prop !== 'active',
+})(({ theme, active }) => (Object.assign({ display: 'flex', justifyContent: 'space-between', alignItems: 'center', color: theme.palette.text.primary, border: '1px solid #F2F2F2', fontSize: 12, fontWeight: 500, backgroundColor: 'transparent', padding: '4px 8px', borderRadius: '4px', minWidth: 70, cursor: 'pointer' }, (active && {
+    border: '1px solid #1F88D0',
+    boxShadow: '0px 0px 4px 0px #1F88D080',
+}))));
+export const ColorSchemeList = styled(MenuList)({
+    backgroundColor: '#ffffff',
+    borderRadius: '4px',
+    boxShadow: '0px 8px 30px 0px #00000029',
+    minWidth: 70,
+    '& .MuiMenuItem-root': {
+        fontSize: 12,
+        fontWeight: 500,
+        padding: '4px 8px',
+    },
+});
+export const StyledInput = styled(TextField)(({ theme }) => ({
+    '& .MuiOutlinedInput-root': {
+        fontSize: '12px',
+        fontWeight: 500,
+        borderRadius: '4px',
+        '& input': {
+            padding: '4px',
+            '&::-webkit-outer-spin-button, &::-webkit-inner-spin-button': {
+                WebkitAppearance: 'none',
+                margin: 0,
+            },
+            '&[type=number]': {
+                MozAppearance: 'textfield', // Firefox
+            },
+        },
+        '& .MuiOutlinedInput-notchedOutline': {
+            borderColor: theme.palette.divider,
+            borderWidth: '1px',
+        },
+        '&:hover, &.Mui-focused': {
+            '& .MuiOutlinedInput-notchedOutline': {
+                borderColor: theme.palette.divider,
+                borderWidth: '1px',
+            },
+        },
+    },
+}));

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

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

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

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

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

@@ -5,4 +5,4 @@ export declare const DialogMessage: import("@emotion/styled").StyledComponent<im
 export declare const DialogActions: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const DialogButton: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, "disabled" | "style" | "color" | "className" | "classes" | "tabIndex" | "children" | "sx" | "variant" | "size" | "fullWidth" | "href" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "startIcon"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+}, "color" | "disabled" | "classes" | "className" | "style" | "tabIndex" | "children" | "sx" | "variant" | "size" | "fullWidth" | "href" | "action" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "startIcon"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

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

@@ -1,11 +1,10 @@
 /// <reference types="react" />
 export declare const AgreementImageWrapper: import("@emotion/styled").StyledComponent<{
     hidden?: boolean | undefined;
-    id?: string | undefined;
-    slot?: string | undefined;
-    title?: string | undefined;
     color?: string | undefined;
-    className?: string | undefined;
+    content?: string | undefined;
+    translate?: "yes" | "no" | undefined;
+    id?: string | undefined;
     defaultChecked?: boolean | undefined;
     defaultValue?: string | number | readonly string[] | undefined;
     suppressContentEditableWarning?: boolean | undefined;
@@ -13,20 +12,21 @@ export declare const AgreementImageWrapper: import("@emotion/styled").StyledComp
     accessKey?: string | undefined;
     autoCapitalize?: (string & {}) | "none" | "off" | "on" | "sentences" | "words" | "characters" | undefined;
     autoFocus?: boolean | undefined;
+    className?: string | undefined;
     contentEditable?: "inherit" | (boolean | "false" | "true") | "plaintext-only" | undefined;
     contextMenu?: string | undefined;
     dir?: string | undefined;
     draggable?: (boolean | "false" | "true") | undefined;
-    enterKeyHint?: "search" | "done" | "next" | "enter" | "go" | "previous" | "send" | undefined;
+    enterKeyHint?: "search" | "enter" | "done" | "go" | "next" | "previous" | "send" | undefined;
     lang?: string | undefined;
     nonce?: string | undefined;
+    slot?: string | undefined;
     spellCheck?: (boolean | "false" | "true") | undefined;
     tabIndex?: number | undefined;
-    translate?: "yes" | "no" | undefined;
+    title?: string | undefined;
     radioGroup?: string | undefined;
     role?: import("react").AriaRole | undefined;
     about?: string | undefined;
-    content?: string | undefined;
     datatype?: string | undefined;
     inlist?: any;
     prefix?: string | undefined;
@@ -46,7 +46,7 @@ export declare const AgreementImageWrapper: import("@emotion/styled").StyledComp
     results?: number | undefined;
     security?: string | undefined;
     unselectable?: "off" | "on" | undefined;
-    inputMode?: "none" | "email" | "search" | "numeric" | "url" | "text" | "tel" | "decimal" | undefined;
+    inputMode?: "none" | "text" | "email" | "search" | "numeric" | "url" | "tel" | "decimal" | undefined;
     is?: string | undefined;
     exportparts?: string | undefined;
     part?: string | undefined;
@@ -62,7 +62,7 @@ export declare const AgreementImageWrapper: import("@emotion/styled").StyledComp
     "aria-colindextext"?: string | undefined;
     "aria-colspan"?: number | undefined;
     "aria-controls"?: string | undefined;
-    "aria-current"?: boolean | "date" | "false" | "true" | "time" | "page" | "step" | "location" | undefined;
+    "aria-current"?: boolean | "page" | "date" | "false" | "true" | "time" | "step" | "location" | undefined;
     "aria-describedby"?: string | undefined;
     "aria-description"?: string | undefined;
     "aria-details"?: string | undefined;
@@ -72,7 +72,7 @@ export declare const AgreementImageWrapper: import("@emotion/styled").StyledComp
     "aria-expanded"?: (boolean | "false" | "true") | undefined;
     "aria-flowto"?: string | undefined;
     "aria-grabbed"?: (boolean | "false" | "true") | undefined;
-    "aria-haspopup"?: boolean | "false" | "true" | "dialog" | "menu" | "grid" | "listbox" | "tree" | undefined;
+    "aria-haspopup"?: boolean | "grid" | "false" | "true" | "dialog" | "listbox" | "menu" | "tree" | undefined;
     "aria-hidden"?: (boolean | "false" | "true") | undefined;
     "aria-invalid"?: boolean | "false" | "true" | "grammar" | "spelling" | undefined;
     "aria-keyshortcuts"?: string | undefined;

package/build/components/CountryFilter/CountryFilter.d.ts

@@ -0,0 +1,13 @@
+import { SxProps } from '@mui/material';
+interface CountryFilterProps {
+    onCountriesChange: (countries: string[]) => void;
+    sx?: SxProps;
+    selectedCountries?: string[];
+    countriesOptions: {
+        label: string;
+        value: string;
+        icon: string;
+    }[];
+}
+export default function CountryFilter({ onCountriesChange, sx, selectedCountries, countriesOptions }: CountryFilterProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/build/components/CountryFilter/CountryFilter.js

@@ -0,0 +1,71 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useRef, useState } from 'react';
+import Box from '@mui/material/Box';
+import { ClickAwayListener } from '@mui/material';
+import { Menu, MenuItem } from '../index.js';
+import { rightArrow } from '../../constants/index.js';
+export default function CountryFilter({ onCountriesChange, sx, selectedCountries, countriesOptions }) {
+    const [anchorEl, setAnchorEl] = useState(null);
+    const containerRef = useRef(null);
+    const open = Boolean(anchorEl);
+    const onOpen = () => {
+        if (!open) {
+            setAnchorEl(containerRef.current);
+            return;
+        }
+        onClose();
+    };
+    const onClose = () => {
+        setAnchorEl(null);
+    };
+    const checkIsSelected = (countryCode) => { var _a; return (_a = selectedCountries === null || selectedCountries === void 0 ? void 0 : selectedCountries.includes(countryCode)) !== null && _a !== void 0 ? _a : false; };
+    const onClickCountry = (countryCodes) => {
+        onCountriesChange(countryCodes);
+    };
+    const handleCheckboxChange = (value) => {
+        const newCountries = (selectedCountries === null || selectedCountries === void 0 ? void 0 : selectedCountries.includes(value)) ? selectedCountries === null || selectedCountries === void 0 ? void 0 : selectedCountries.filter((c) => c !== value) : [...(selectedCountries !== null && selectedCountries !== void 0 ? selectedCountries : []), value];
+        onClickCountry(newCountries);
+        onCountriesChange(newCountries);
+    };
+    const isAllCountriesSelected = useMemo(() => {
+        return (selectedCountries === null || selectedCountries === void 0 ? void 0 : selectedCountries.length) === countriesOptions.length;
+    }, [selectedCountries, countriesOptions]);
+    return (_jsx(ClickAwayListener, Object.assign({ onClickAway: onClose }, { children: _jsxs(Box, Object.assign({ ref: containerRef, sx: sx }, { children: [_jsx(Box, { children: _jsxs(MenuItem, Object.assign({ onMouseEnter: (e) => {
+                            e.stopPropagation();
+                            onOpen();
+                        }, sx: {
+                            display: 'flex',
+                            alignItems: 'center',
+                            paddingInline: '16px',
+                            gap: '4px',
+                            borderBlock: '1px solid #F2F2F2',
+                            '&:hover': {
+                                backgroundColor: '#fff',
+                                boxShadow: '0px 0px 16px 0px #00000021',
+                            },
+                        }, hideCheckbox: true }, { children: [_jsx("span", { children: "Country" }), _jsx(Box, { component: "img", src: rightArrow, width: 16, height: 12, sx: { marginLeft: 'auto' } })] })) }), _jsxs(Menu, Object.assign({ open: open, anchorEl: anchorEl, sx: { marginTop: '8px', marginBottom: '8px', maxHeight: '190px', overflow: 'auto' }, placement: "right-start", popperSx: {
+                        zIndex: 99999,
+                    } }, { children: [_jsx(MenuItem, Object.assign({ sx: {
+                                color: (theme) => theme.palette.info.dark,
+                                backgroundColor: '#F4F4F4',
+                                fontWeight: 600,
+                                paddingInline: '16px',
+                            }, onClick: (e) => {
+                                e.stopPropagation();
+                                if (isAllCountriesSelected) {
+                                    onClickCountry([]);
+                                    onCountriesChange([]);
+                                }
+                                else {
+                                    onClickCountry(countriesOptions.map(({ value }) => value));
+                                    onCountriesChange(countriesOptions.map(({ value }) => value));
+                                }
+                            }, isSelected: isAllCountriesSelected }, { children: isAllCountriesSelected ? 'Unselect All' : 'Select All' })), countriesOptions.map(({ value, label, icon }) => (_jsxs(MenuItem, Object.assign({ sx: {
+                                gap: '0px',
+                                paddingInline: '16px',
+                                '&:hover': {
+                                    backgroundColor: '#fff',
+                                    boxShadow: '0px 0px 16px 0px #00000021',
+                                },
+                            }, isSelected: checkIsSelected(value), onClick: () => handleCheckboxChange(value) }, { children: [_jsx(Box, { component: "img", src: icon, width: 16, height: 12, sx: { marginRight: '4px', borderRadius: '2px' } }), label] }), value)))] }))] })) })));
+}

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

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

package/build/components/CountryFilter/index.js

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

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

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const FilterButton: 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> & {
+    isActive?: boolean | undefined;
+}, {}, {}>;

package/build/components/CountryFilter/style.js

@@ -0,0 +1,7 @@
+import { Box, styled } from '@mui/material';
+export const FilterButton = styled(Box, { shouldForwardProp: (props) => props !== 'isActive' })(({ theme, isActive }) => (Object.assign({ borderRadius: '4px', border: `1px solid ${theme.palette.divider}`, height: 32, width: 30, display: 'flex', alignItems: 'center', justifyContent: 'center', cursor: 'pointer', backgroundColor: theme.palette.common.white, ':hover': {
+        opacity: 0.7,
+    } }, (isActive && {
+    boxShadow: `0px 0px 4px 0px ${theme.palette.info.dark}80`,
+    border: `1px solid ${theme.palette.info.dark}`,
+}))));

package/build/components/CountryFlag/CountryFlag.d.ts

@@ -1,8 +1,9 @@
 /// <reference types="react" />
 import { BoxProps } from '@mui/material/Box';
 interface CountryFlagProps extends BoxProps {
-    code?: string;
+    countryCode?: string;
+    currencyCode?: string;
 }
-declare function CountryFlag({ code, ...props }: CountryFlagProps): import("react/jsx-runtime").JSX.Element;
+declare function CountryFlag({ countryCode, currencyCode, ...props }: CountryFlagProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof CountryFlag>;
 export default _default;

package/build/components/CountryFlag/CountryFlag.js

@@ -12,10 +12,11 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import { memo } from 'react';
 import Box from '@mui/material/Box';
-import { defaultCountryIcon, getCountriesIcon } from '../../constants/index.js';
+import { defaultCountryIcon, getCountriesIcon, getCurrenciesIcon } from '../../constants/index.js';
 function CountryFlag(_a) {
-    var { code = '' } = _a, props = __rest(_a, ["code"]);
-    return (_jsx(Box, Object.assign({}, props, { component: "img", src: getCountriesIcon(code) || defaultCountryIcon, alt: code, sx: Object.assign(Object.assign({ width: 16 }, (code && { height: 12, borderRadius: '3px' })), props.sx), loading: "lazy", onError: (e) => {
+    var _b;
+    var { countryCode, currencyCode } = _a, props = __rest(_a, ["countryCode", "currencyCode"]);
+    return (_jsx(Box, Object.assign({}, props, { component: "img", src: (countryCode && getCountriesIcon(countryCode)) || (currencyCode && getCurrenciesIcon(currencyCode)) || defaultCountryIcon, width: props.width || 16, alt: (_b = countryCode !== null && countryCode !== void 0 ? countryCode : currencyCode) !== null && _b !== void 0 ? _b : 'flag', loading: "lazy", onError: (e) => {
             e.currentTarget.src = defaultCountryIcon;
         } })));
 }

package/build/components/CurrencyFilter/CurrencyFilter.d.ts

@@ -0,0 +1,10 @@
+import { CustomColumnFilterProps } from '../VirtualTables';
+export interface CurrencyFilterProps extends CustomColumnFilterProps {
+    onConfirm: (currencies?: string[]) => void;
+    selectedCurrencies?: string[];
+    onCurrenciesChange: (currencies?: string[]) => void;
+    merchantCurrencies: {
+        currencyCode: string;
+    }[];
+}
+export default function CurrencyFilter({ selectedCurrencies, onCurrenciesChange, merchantCurrencies, anchorEl, onCloseDropdown, onConfirm, }: Readonly<CurrencyFilterProps>): import("react/jsx-runtime").JSX.Element;

package/build/components/CurrencyFilter/CurrencyFilter.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import uniqBy from 'lodash/uniqBy';
+import { useTranslation } from 'react-i18next';
+import { CountryFlag, Menu, MenuItem, FilterCancelButton, FilterFooter, FilterOkayButton, FilterTitle } from '../index.js';
+export default function CurrencyFilter({ selectedCurrencies, onCurrenciesChange, merchantCurrencies, anchorEl, onCloseDropdown, onConfirm, }) {
+    const open = Boolean(anchorEl);
+    const { t } = useTranslation();
+    const uniqueCurrencies = useMemo(() => uniqBy(merchantCurrencies, 'currencyCode'), [merchantCurrencies]);
+    const handleOkButtonClick = (e) => {
+        onConfirm(selectedCurrencies);
+        onCloseDropdown(e);
+    };
+    const checkIsSelected = (currencyCode) => { var _a; return (_a = selectedCurrencies === null || selectedCurrencies === void 0 ? void 0 : selectedCurrencies.includes(currencyCode)) !== null && _a !== void 0 ? _a : false; };
+    const onClickCurrency = (currencyCode) => {
+        var _a;
+        if ((selectedCurrencies === null || selectedCurrencies === void 0 ? void 0 : selectedCurrencies.indexOf(currencyCode)) !== -1) {
+            const newCurrencies = (_a = selectedCurrencies === null || selectedCurrencies === void 0 ? void 0 : selectedCurrencies.filter((currency) => currency !== currencyCode)) !== null && _a !== void 0 ? _a : [];
+            onCurrenciesChange(newCurrencies.length > 0 ? newCurrencies : []);
+            return;
+        }
+        onCurrenciesChange([...selectedCurrencies, currencyCode]);
+    };
+    return (_jsxs(Menu, Object.assign({ open: open, anchorEl: anchorEl, sx: { marginTop: '8px', marginBottom: '8px' } }, { children: [_jsx(FilterTitle, Object.assign({ component: "span" }, { children: t('filterBy') })), uniqueCurrencies.map(({ currencyCode }) => (_jsxs(MenuItem, Object.assign({ isSelected: checkIsSelected(currencyCode), onClick: () => {
+                    onClickCurrency(currencyCode);
+                } }, { children: [_jsx(CountryFlag, { currencyCode: currencyCode }), currencyCode] }), currencyCode))), _jsxs(FilterFooter, { children: [_jsx(FilterCancelButton, Object.assign({ onClick: onCloseDropdown }, { children: t('cancel') })), _jsx(FilterOkayButton, Object.assign({ onClick: handleOkButtonClick }, { children: t('okay') }))] })] })));
+}

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

@@ -0,0 +1 @@
+export { default as CurrencyFilter, type CurrencyFilterProps } from './CurrencyFilter';

package/build/components/CurrencyFilter/index.js

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

package/build/components/CurrencySymbol/CurrencySymbol.d.ts

@@ -0,0 +1,7 @@
+interface CurrencySymbolProps {
+    currency?: string;
+    fontSize?: number;
+    color?: string;
+}
+declare function CurrencySymbol({ currency, fontSize, color }: CurrencySymbolProps): import("react/jsx-runtime").JSX.Element;
+export default CurrencySymbol;

package/build/components/CurrencySymbol/CurrencySymbol.js

@@ -0,0 +1,17 @@
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { DirhamIconImage, SARIconImage } from '../../constants/index.js';
+import { StyleCurrencySymbol, MaskedSymbol } from './style';
+const currencyMap = {
+    SAR: SARIconImage,
+    AED: DirhamIconImage,
+};
+function CurrencySymbol({ currency, fontSize, color }) {
+    const symbol = currencyMap[currency];
+    if (!symbol)
+        return _jsx(_Fragment, { children: currency });
+    if (color) {
+        return _jsx(MaskedSymbol, { symbol: symbol, fontSize: fontSize, color: color, "aria-label": currency, role: "img" });
+    }
+    return _jsx(StyleCurrencySymbol, { component: "img", src: symbol, alt: currency, sx: { height: fontSize } });
+}
+export default CurrencySymbol;

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

@@ -0,0 +1,2 @@
+import CurrencySymbol from './CurrencySymbol';
+export default CurrencySymbol;

package/build/components/CurrencySymbol/index.js

@@ -0,0 +1,2 @@
+import CurrencySymbol from './CurrencySymbol';
+export default CurrencySymbol;

package/build/components/{CurrencyIcon → CurrencySymbol}/style.d.ts

@@ -1,4 +1,9 @@
 /// <reference types="react" />
-export declare const StyleCurrencyIcon: import("@mui/types").OverridableComponent<import("@mui/system").BoxTypeMap<{}, "div", import("@mui/material/styles").Theme>>;
+export declare const StyleCurrencySymbol: import("@mui/types").OverridableComponent<import("@mui/system").BoxTypeMap<{}, "div", import("@mui/material/styles").Theme>>;
 export declare const CurrencySpan: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
 export declare const DecimalSpan: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
+export declare const MaskedSymbol: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & {
+    symbol: string;
+    fontSize?: number | undefined;
+    color: string;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

package/build/components/CurrencySymbol/style.js

@@ -0,0 +1,27 @@
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+export const StyleCurrencySymbol = styled(Box)(() => ({
+    height: 10,
+}));
+export const CurrencySpan = styled('span')(({ theme }) => ({
+    fontSize: theme.typography.body2.fontSize,
+    lineHeight: '17px',
+    fontWeight: '700',
+}));
+export const DecimalSpan = styled('span')(() => ({
+    fontWeight: '400',
+}));
+export const MaskedSymbol = styled('span')(({ symbol, fontSize, color }) => ({
+    display: 'inline-block',
+    height: fontSize,
+    width: fontSize,
+    backgroundColor: color,
+    maskImage: `url("${symbol}")`,
+    maskSize: 'contain',
+    maskRepeat: 'no-repeat',
+    maskPosition: 'center',
+    WebkitMaskImage: `url("${symbol}")`,
+    WebkitMaskSize: 'contain',
+    WebkitMaskRepeat: 'no-repeat',
+    WebkitMaskPosition: 'center',
+}));

package/build/components/Customer/CustomerDropdown/CustomerDropdown.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { CustomerFullInfoProps } from '../CustomerForms/CustomerFullInfo';
+export interface CustomerDropdownProps extends CustomerFullInfoProps {
+    isDisabled?: boolean;
+}
+declare function CustomerDropdown({ ...props }: Readonly<CustomerDropdownProps>): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof CustomerDropdown>;
+export default _default;

package/build/components/Customer/CustomerDropdown/CustomerDropdown.js

@@ -0,0 +1,39 @@
+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, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useMemo, useState } from 'react';
+import Popper from '@mui/material/Popper';
+import { useTranslation } from 'react-i18next';
+import { getRandomGradientColor } from '../../../utils/index.js';
+import { CustomBackdrop } from '../../index.js';
+import { customerIcon2 } from '../../../constants/index.js';
+import { Wrapper, AvatarStyled, Button } from './style';
+import FullInfo from '../CustomerForms/CustomerFullInfo';
+function CustomerDropdown(_a) {
+    var _b, _c;
+    var props = __rest(_a, []);
+    const [anchorEl, setAnchorEl] = useState(null);
+    const { firstName, lastName } = props.customer;
+    const { t } = useTranslation();
+    const open = Boolean(anchorEl);
+    const openDropdown = (event) => {
+        if (!open)
+            setAnchorEl(event.currentTarget);
+    };
+    const closeDropdown = () => {
+        if (open)
+            setAnchorEl(null);
+    };
+    const AvatarColor = useMemo(() => getRandomGradientColor(), []);
+    return (_jsxs(Wrapper, Object.assign({ sx: Object.assign({}, (props.isDisabled && { pointerEvents: 'none', opacity: 0.7 })) }, { children: [_jsxs(Button, Object.assign({ onClick: openDropdown }, { children: [(!firstName || !lastName) && (_jsxs(_Fragment, { children: [_jsx("img", { src: customerIcon2, alt: "c" }), _jsx("span", { children: t('customer') })] })), firstName && lastName && (_jsxs(_Fragment, { children: [_jsx(AvatarStyled, Object.assign({ src: "#", alt: "a", sx: { background: AvatarColor } }, { children: `${(_b = firstName[0]) === null || _b === void 0 ? void 0 : _b.toUpperCase()}${((_c = lastName[0]) === null || _c === void 0 ? void 0 : _c.toUpperCase()) || ''}` })), `${firstName} ${lastName}`] }))] })), open && _jsx(CustomBackdrop, { onClick: closeDropdown }), _jsx(Popper, Object.assign({ open: open, anchorEl: anchorEl, placement: "bottom-start" }, { children: _jsx(FullInfo, Object.assign({}, props)) }))] })));
+}
+export default memo(CustomerDropdown);

package/build/components/Customer/CustomerDropdown/index.d.ts

@@ -0,0 +1 @@
+export { default, type CustomerDropdownProps } from './CustomerDropdown';

package/build/components/Customer/CustomerDropdown/index.js

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