@tap-payments/os-micro-frontend-shared 0.1.35 → 0.1.36-9.fix.1

package/build/components/ColorPicker/HexaFields.js

@@ -0,0 +1,83 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useMemo, useState } from 'react';
+import Color from 'color';
+import { alpha } from '@mui/material/styles';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import InputAdornment from '@mui/material/InputAdornment';
+import { StyledInput } from './style';
+const HexaFields = ({ value, onChange, disableAlpha = false }) => {
+    const colorAsHex = useMemo(() => {
+        const color = Color.rgb(value.r, value.g, value.b, value.a);
+        return color.hex().replace('#', '');
+    }, [value]);
+    const [hexInput, setHexInput] = useState(colorAsHex);
+    const alphaPercent = Math.round(value.a * 100);
+    // Sync hexInput whenever `value` changes externally
+    useEffect(() => {
+        const newHex = Color.rgb(value.r, value.g, value.b).hex().replace('#', '');
+        setHexInput(newHex);
+    }, [value.r, value.g, value.b]);
+    const handleHexChange = (event) => {
+        let newHex = event.target.value.replace(/[^0-9a-fA-F]/g, '').toUpperCase();
+        if (newHex.length > 6)
+            newHex = newHex.slice(0, 6);
+        setHexInput(newHex);
+    };
+    const handleHexBlur = () => {
+        let formattedValue = hexInput;
+        if (formattedValue.length === 3) {
+            // Expand shorthand like FFF -> FFFFFF
+            formattedValue = formattedValue
+                .split('')
+                .map((ch) => ch + ch)
+                .join('');
+            setHexInput(formattedValue);
+        }
+        if (formattedValue.length === 6) {
+            try {
+                const newColor = Color(`#${formattedValue}`).alpha(value.a);
+                onChange({
+                    r: newColor.red(),
+                    g: newColor.green(),
+                    b: newColor.blue(),
+                    a: newColor.alpha(),
+                });
+            }
+            catch (_a) {
+                // invalid hex -> revert to current value
+                setHexInput(colorAsHex);
+            }
+        }
+        else {
+            // revert to current value if incomplete
+            setHexInput(colorAsHex);
+        }
+    };
+    const handleAlphaChange = (event) => {
+        let num = parseInt(event.target.value, 10);
+        if (isNaN(num))
+            num = 0;
+        if (num < 0)
+            num = 0;
+        if (num > 100)
+            num = 100;
+        onChange(Object.assign(Object.assign({}, value), { a: num / 100 }));
+    };
+    return (_jsxs(Stack, Object.assign({ direction: "row", spacing: 1, alignItems: "flex-start" }, { children: [_jsx(StyledInput, { value: hexInput, onChange: handleHexChange, onBlur: handleHexBlur, placeholder: "FFFFFF", sx: {
+                    flex: 1.4,
+                    '& .MuiOutlinedInput-root': {
+                        pl: 1,
+                    },
+                }, InputProps: {
+                    startAdornment: (_jsx(InputAdornment, Object.assign({ position: "start", sx: { m: 0 } }, { children: _jsx(Typography, Object.assign({ component: "span", color: (theme) => alpha(theme.palette.text.primary, 0.5), display: "inline-block", fontSize: 12, fontWeight: 500 }, { children: "#" })) }))),
+                } }), !disableAlpha && (_jsx(StyledInput, { type: "number", value: alphaPercent, onChange: handleAlphaChange, inputProps: { min: 0, max: 100 }, sx: {
+                    flex: 0.8,
+                    '& .MuiOutlinedInput-root': {
+                        pr: 1,
+                    },
+                }, InputProps: {
+                    endAdornment: (_jsx(InputAdornment, Object.assign({ position: "end", sx: { m: 0 } }, { children: _jsx(Typography, Object.assign({ component: "span", color: "text.primary", display: "inline-block", fontSize: 12, fontWeight: 500 }, { children: "%" })) }))),
+                } }))] })));
+};
+export default HexaFields;

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

@@ -0,0 +1,9 @@
+import React from 'react';
+import { RgbaColor } from 'react-colorful';
+type RGBAFieldsProps = {
+    value: RgbaColor;
+    onChange: (newValue: RgbaColor) => void;
+    disableAlpha?: boolean;
+};
+declare const RGBAFields: ({ value, onChange, disableAlpha }: RGBAFieldsProps) => React.JSX.Element;
+export default RGBAFields;

package/build/components/ColorPicker/RGBAFields.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useCallback } from 'react';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import InputAdornment from '@mui/material/InputAdornment';
+import { StyledInput } from './style';
+const RGBAFields = ({ value, onChange, disableAlpha = false }) => {
+    const [internalValue, setInternalValue] = useState(value);
+    const { r, g, b, a } = internalValue;
+    useEffect(() => {
+        setInternalValue(value);
+    }, [value]);
+    const handleValueBoundaries = useCallback((num, max) => {
+        if (isNaN(num))
+            num = 0;
+        if (num < 0)
+            num = 0;
+        if (num > max)
+            num = max;
+        console.log('num', num);
+        return num;
+    }, []);
+    const handleChange = useCallback((key, max) => (event) => {
+        setInternalValue(Object.assign(Object.assign({}, internalValue), { [key]: handleValueBoundaries(+event.target.value, max) }));
+    }, [internalValue, handleValueBoundaries]);
+    const handleBlur = useCallback((key, max) => {
+        onChange(Object.assign(Object.assign({}, internalValue), { [key]: handleValueBoundaries(internalValue[key], max) }));
+    }, [onChange, internalValue, handleValueBoundaries]);
+    return (_jsxs(Stack, Object.assign({ direction: "row", spacing: 1 }, (disableAlpha && { flex: 1 }), { children: [_jsx(StyledInput, Object.assign({ type: "number", value: r, onBlur: () => handleBlur('r', 255), onChange: handleChange('r', 255), inputProps: { min: 0, max: 255, style: { textAlign: 'center' } }, variant: "outlined", size: "small" }, (disableAlpha && { sx: { flex: 1 } }))), _jsx(StyledInput, Object.assign({ type: "number", value: g, onBlur: () => handleBlur('g', 255), onChange: handleChange('g', 255), inputProps: { min: 0, max: 255, style: { textAlign: 'center' } }, variant: "outlined", size: "small" }, (disableAlpha && { sx: { flex: 1 } }))), _jsx(StyledInput, Object.assign({ type: "number", value: b, onBlur: () => handleBlur('b', 255), onChange: handleChange('b', 255), inputProps: { min: 0, max: 255, style: { textAlign: 'center' } }, variant: "outlined", size: "small" }, (disableAlpha && { sx: { flex: 1 } }))), !disableAlpha && (_jsx(StyledInput, { type: "number", value: a, onBlur: () => handleBlur('a', 100), onChange: handleChange('a', 100), inputProps: { min: 0, max: 100, style: { textAlign: 'center' } }, variant: "outlined", sx: {
+                    '& .MuiOutlinedInput-root': {
+                        pr: 1,
+                    },
+                }, InputProps: {
+                    endAdornment: (_jsx(InputAdornment, Object.assign({ position: "end", sx: { m: 0 } }, { children: _jsx(Typography, Object.assign({ component: "span", display: "inline-block", fontSize: 12, fontWeight: 500 }, { children: "%" })) }))),
+                }, size: "small" }))] })));
+};
+export default RGBAFields;

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

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

package/build/components/ColorPicker/index.js

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

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/ConfirmDialog.d.ts

@@ -1 +1,2 @@
-export default function ConfirmDialog(): import("react/jsx-runtime").JSX.Element;
+/// <reference types="react" />
+export default function ConfirmDialog(): import("react").JSX.Element;

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

@@ -1,4 +1,4 @@
 import React from 'react';
 export declare function ConfirmDialogProvider({ children }: {
     children: React.ReactNode;
-}): import("react/jsx-runtime").JSX.Element;
+}): React.JSX.Element;

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/ControlPanelContainer/ControlPanelContainer.d.ts

@@ -1,2 +1,3 @@
+/// <reference types="react" />
 import { BoxProps } from '@mui/material/Box';
-export default function ControlPanel(props: BoxProps): import("react/jsx-runtime").JSX.Element;
+export default function ControlPanel(props: BoxProps): import("react").JSX.Element;

package/build/components/CopyImage/CopyImage.d.ts

@@ -2,6 +2,6 @@ import { MouseEventHandler } from 'react';
 declare function CopyImage({ isCopyActive, onClick }: {
     isCopyActive: boolean;
     onClick: MouseEventHandler<HTMLImageElement>;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof CopyImage>;
 export default _default;

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

@@ -1,4 +1,5 @@
+/// <reference types="react" />
 export declare function CountAnimatedBadge({ totalPaymentsCount, index }: {
     totalPaymentsCount?: number;
     index: number;
-}): import("react/jsx-runtime").JSX.Element;
+}): import("react").JSX.Element;

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,14 @@
+/// <reference types="react" />
+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.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.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,11 @@
+/// <reference types="react" />
+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.Element;