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

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

@@ -3,7 +3,7 @@ import { type Theme } from '@mui/material';
 export { statusButtonVariants, ChevronContainer, Label, LabelWrapper, StyledDropdown } from '../StatusButton/style';
 export declare const StyledStatusButton: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void) | 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<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<Theme> & {
     buttonVariant: 'active' | 'inActive';
 }, {}, {}>;
 export declare const FlagContainer: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<Theme> & Omit<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {

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

@@ -1,12 +1,12 @@
 /// <reference types="react" />
 export declare const Caption: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
     ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
-}, "width" | "minHeight" | "height" | "bottom" | "left" | "right" | "top" | "m" | "order" | "p" | "style" | "color" | "border" | "borderColor" | "borderBottom" | "flex" | "display" | "alignItems" | "className" | "classes" | "children" | "borderTop" | "borderRight" | "borderLeft" | "borderRadius" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignContent" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "zIndex" | "position" | "boxShadow" | "maxWidth" | "minWidth" | "maxHeight" | "boxSizing" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping"> & {
+}, "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 Title: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
     ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
-}, "width" | "minHeight" | "height" | "bottom" | "left" | "right" | "top" | "m" | "order" | "p" | "style" | "color" | "border" | "borderColor" | "borderBottom" | "flex" | "display" | "alignItems" | "className" | "classes" | "children" | "borderTop" | "borderRight" | "borderLeft" | "borderRadius" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignContent" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "zIndex" | "position" | "boxShadow" | "maxWidth" | "minWidth" | "maxHeight" | "boxSizing" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping"> & {
+}, "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 AccordionWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
@@ -27,7 +27,7 @@ export declare const SelectedBadge: import("@emotion/styled").StyledComponent<im
 }, {}, {}>;
 export declare const ItemStyled: import("@emotion/styled").StyledComponent<import("@mui/material").TypographyOwnProps & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
     ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
-}, "width" | "minHeight" | "height" | "bottom" | "left" | "right" | "top" | "m" | "order" | "p" | "style" | "color" | "border" | "borderColor" | "borderBottom" | "flex" | "display" | "alignItems" | "className" | "classes" | "children" | "borderTop" | "borderRight" | "borderLeft" | "borderRadius" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignContent" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "zIndex" | "position" | "boxShadow" | "maxWidth" | "minWidth" | "maxHeight" | "boxSizing" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "sx" | "variant" | "variantMapping"> & {
+}, "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 TriggerWrapper: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material/styles").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {

package/build/components/NestedDropdown/Dropdown.js

@@ -38,20 +38,23 @@ function Dropdown(_a) {
                 return i;
             });
             const newList = updateList(list);
+            // update all children
             setList(newList);
             if (updatedList)
                 updatedList(newList);
+            // notify parent with the new children
             if (onChildrenChange)
                 onChildrenChange(newList);
+            // notify parent with selected / unselected children
             if (onSelect)
                 onSelect(changedChildren);
         }
     }, [selectedItem]);
-    return (_jsxs(DropdownStyled, Object.assign({ component: "article", className: `tap-dropdown  ${className || ''}` }, props, { children: [_jsx(HeaderWrapper, { children: title && _jsx(TitleStyled, Object.assign({ component: "p" }, { children: title })) }), _jsx(ListWrapper, { children: list === null || list === void 0 ? void 0 : list.map((item) => (_jsx(MenuItem, Object.assign({ setSelected: ({ name, selected }) => {
+    return (_jsxs(DropdownStyled, Object.assign({ component: "article", className: `tap-dropdown  ${className || ''}` }, props, { children: [_jsx(HeaderWrapper, { children: title && _jsx(TitleStyled, Object.assign({ component: "p" }, { children: title })) }), _jsx(ListWrapper, { children: list === null || list === void 0 ? void 0 : list.map((item, idx) => (_jsx(MenuItem, Object.assign({ setSelected: ({ name, selected }) => {
                         setSelected({ name, selected });
                     }, onSelect: (selectedChildren) => {
                         if (onSelect)
                             onSelect(selectedChildren);
-                    }, placement: placement }, item), `${item.name}`))) }), footer && footer] })));
+                    }, placement: placement }, item), `${item.name}-${idx}`))) }), footer && footer] })));
 }
 export default memo(Dropdown);

package/build/components/NestedDropdown/NestedDropdown.d.ts

@@ -1,16 +1,18 @@
 import { type ReactElement } from 'react';
 import type { BoxProps } from '@mui/material/Box';
+import { SxProps, Theme } from '@mui/material/styles';
 import type { ColumnViewProps } from '../../types/index.js';
 import type { Placement, Selected } from './types';
 interface ParentDropdownProps extends Omit<BoxProps, 'onSelect'> {
     title?: string;
-    onClose?: () => void;
     menuItems: ColumnViewProps[];
     onSelect?: (items: Selected[]) => void;
     updatedList?: (menuItems: ColumnViewProps[]) => void;
     footer?: ReactElement;
     placement?: Placement;
+    menuItemSx?: SxProps<Theme>;
+    menuSx?: SxProps<Theme>;
 }
-declare function NestedDropdown({ title, menuItems, onClose, onSelect, updatedList, placement, ...props }: ParentDropdownProps): import("react/jsx-runtime").JSX.Element;
+declare function NestedDropdown({ title, menuItems: rawMenuItems, onSelect, updatedList, placement, menuItemSx, menuSx, ...props }: ParentDropdownProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof NestedDropdown>;
 export default _default;

package/build/components/NestedDropdown/NestedDropdown.js

@@ -10,10 +10,21 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx } from "react/jsx-runtime";
-import { memo, useEffect, useState } from 'react';
+import { memo, useEffect, useMemo, useState } from 'react';
 import Dropdown from './Dropdown';
+const recursivelyPrepareMenuItems = (menuItems, { menuItemSx, menuSx }) => {
+    menuItems.forEach((menuItem) => {
+        var _a;
+        menuItem.sx = Object.assign(Object.assign({}, menuItemSx), menuItem.sx);
+        menuItem.menuSx = Object.assign(Object.assign({}, menuSx), menuItem.menuSx);
+        if ((_a = menuItem.menuItems) === null || _a === void 0 ? void 0 : _a.length)
+            recursivelyPrepareMenuItems(menuItem.menuItems, { menuItemSx, menuSx });
+    });
+    return menuItems;
+};
 function NestedDropdown(_a) {
-    var { title, menuItems, onClose, onSelect, updatedList, placement = 'right' } = _a, props = __rest(_a, ["title", "menuItems", "onClose", "onSelect", "updatedList", "placement"]);
+    var { title, menuItems: rawMenuItems, onSelect, updatedList, placement = 'right', menuItemSx = {}, menuSx = {} } = _a, props = __rest(_a, ["title", "menuItems", "onSelect", "updatedList", "placement", "menuItemSx", "menuSx"]);
+    const menuItems = useMemo(() => recursivelyPrepareMenuItems(rawMenuItems, { menuItemSx, menuSx }), [rawMenuItems, menuItemSx, menuSx]);
     const [list, setList] = useState(menuItems);
     useEffect(() => {
         if (menuItems.length)

package/build/components/NestedDropdown/NestedMenuItem.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { SxProps, Theme } from '@mui/material/styles';
 import type { ColumnViewProps } from '../../types/index.js';
 import type { Placement, Selected } from './types';
 interface MenuItemProps extends ColumnViewProps {
@@ -10,7 +11,9 @@ interface MenuItemProps extends ColumnViewProps {
     displayChildrenCount?: boolean;
     disabled?: boolean;
     placement?: Placement;
+    sx?: SxProps<Theme>;
+    menuSx?: SxProps<Theme>;
 }
-declare function MenuItem({ label, icon, name, menuItems, setSelected, onSelect, selected, displayChildrenCount, disabled, placement, }: MenuItemProps): import("react/jsx-runtime").JSX.Element;
+declare function MenuItem({ label, icon, name, menuItems, setSelected, onSelect, selected, displayChildrenCount, disabled, placement, sx, menuSx, }: MenuItemProps): import("react/jsx-runtime").JSX.Element;
 declare const _default: import("react").MemoExoticComponent<typeof MenuItem>;
 export default _default;

package/build/components/NestedDropdown/NestedMenuItem.js

@@ -4,7 +4,7 @@ import Popper from '@mui/material/Popper';
 import { rightArrow } from '../../constants/index.js';
 import NestedDropdown from './Dropdown';
 import { MenuItemStyled, Label, CheckboxStyled, ContentWrapper, Content, Counter, CountingInfo } from './styles';
-function MenuItem({ label, icon, name, menuItems, setSelected, onSelect, selected, displayChildrenCount, disabled, placement = 'right', }) {
+function MenuItem({ label, icon, name, menuItems, setSelected, onSelect, selected, displayChildrenCount, disabled, placement = 'right', sx, menuSx, }) {
     const [anchorEl, setAnchorEl] = useState(null);
     const menuItemRef = useRef(null);
     const [isIndeterminate, setIsIndeterminate] = useState(false);
@@ -30,9 +30,7 @@ function MenuItem({ label, icon, name, menuItems, setSelected, onSelect, selecte
                 e.stopPropagation();
                 handleChange(name);
             }
-        }, sx: Object.assign(Object.assign({}, ((menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) && { cursor: disabled ? 'not-allowed' : 'pointer' })), { zIndex: 99999 }), disabled: disabled }, { children: [selected !== undefined && _jsx(CheckboxStyled, { size: "small", indeterminate: isIndeterminate, checked: selected, disabled: disabled }), _jsxs(ContentWrapper, { children: [icon && icon, _jsxs(Content, { children: [label && _jsx(Label, { children: label }), !!(menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) && (_jsxs(CountingInfo, { children: [displayChildrenCount && _jsx(Counter, { children: menuItems.length }), _jsx("img", { src: rightArrow, className: "arrow-icon", alt: "arrow", style: { height: 12 } })] }))] })] }), (menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) && (_jsx(Popper, Object.assign({ open: Boolean(anchorEl && !!(menuItems === null || menuItems === void 0 ? void 0 : menuItems.length)), anchorEl: anchorEl, placement: placement === 'left' ? 'left-start' : 'right-start', sx: {
-                    zIndex: 99999,
-                } }, { children: _jsx(NestedDropdown, { className: "child-dropdown", menuItems: menuItems, placement: placement, onChildrenChange: (newList) => {
+        }, sx: Object.assign(Object.assign(Object.assign({}, ((menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) && { cursor: disabled ? 'not-allowed' : 'pointer' })), { zIndex: 99999 }), sx), disabled: disabled }, { children: [selected !== undefined && _jsx(CheckboxStyled, { size: "small", indeterminate: isIndeterminate, checked: selected, disabled: disabled }), _jsxs(ContentWrapper, { children: [icon && icon, _jsxs(Content, { children: [label && _jsx(Label, { children: label }), !!(menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) && (_jsxs(CountingInfo, { children: [displayChildrenCount && _jsx(Counter, { children: menuItems.length }), _jsx("img", { src: rightArrow, className: "arrow-icon", alt: "arrow", style: { height: 12 } })] }))] })] }), (menuItems === null || menuItems === void 0 ? void 0 : menuItems.length) && (_jsx(Popper, Object.assign({ open: Boolean(anchorEl && !!(menuItems === null || menuItems === void 0 ? void 0 : menuItems.length)), anchorEl: anchorEl, placement: placement === 'left' ? 'left-start' : 'right-start', sx: Object.assign({ zIndex: 99999 }, menuSx) }, { children: _jsx(NestedDropdown, { className: "child-dropdown", menuItems: menuItems, placement: placement, onChildrenChange: (newList) => {
                         const isAllChildrenSelected = newList.every((x) => x.selected);
                         if (selected !== undefined && !disabled) {
                             if (isAllChildrenSelected) {

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

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

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

@@ -1,5 +1,5 @@
-import type { ColumnViewProps } from '../../types/index.js';
 import type { ReactElement } from 'react';
+import type { ColumnViewProps } from '../../types/index.js';
 export type Placement = 'left' | 'right';
 export interface Selected {
     name: string;

package/build/components/OpenFileInNewTab/OpenFileInNewTab.d.ts

@@ -0,0 +1,7 @@
+export type OpenFileInNewTabProps = {
+    data?: Blob;
+    isLoading?: boolean;
+    isError?: boolean;
+};
+export declare const OpenFileInNewTab: ({ data, isLoading, isError }: Readonly<OpenFileInNewTabProps>) => import("react/jsx-runtime").JSX.Element | null;
+export default OpenFileInNewTab;

package/build/components/OpenFileInNewTab/OpenFileInNewTab.js

@@ -0,0 +1,26 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useMemo } from 'react';
+import { ViewFile } from './style';
+const windowUrl = window.URL || window.webkitURL;
+export const OpenFileInNewTab = ({ data, isLoading, isError }) => {
+    const blobUrl = useMemo(() => {
+        if (!data)
+            return '';
+        return windowUrl.createObjectURL(data);
+    }, [data]);
+    useEffect(() => {
+        return () => {
+            if (blobUrl)
+                windowUrl.revokeObjectURL(blobUrl);
+        };
+    }, [blobUrl]);
+    const handleOpenFile = () => {
+        if (blobUrl) {
+            window.open(blobUrl, '_blank');
+        }
+    };
+    if (isLoading || isError)
+        return null;
+    return _jsx(ViewFile, Object.assign({ onClick: handleOpenFile }, { children: "View" }));
+};
+export default OpenFileInNewTab;

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

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

package/build/components/OpenFileInNewTab/index.js

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

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

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare const ViewFile: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;

package/build/components/OpenFileInNewTab/style.js

@@ -0,0 +1,8 @@
+import { styled } from '@mui/material';
+export const ViewFile = styled('span')(({ theme }) => ({
+    fontWeight: 500,
+    color: theme.palette.info.dark,
+    cursor: 'pointer',
+    fontSize: '9px',
+    textDecoration: 'underline',
+}));

package/build/components/PartnersFilter/PartnersFilter.d.ts

@@ -0,0 +1,10 @@
+interface PartnersFilterProps {
+    options: {
+        label: string;
+        value: string;
+    }[];
+    selectedFilters?: Record<string, boolean | undefined>;
+    onChange: (filters: Record<string, boolean | undefined>) => void;
+}
+export default function PartnersFilter({ options, selectedFilters, onChange }: Readonly<PartnersFilterProps>): import("react/jsx-runtime").JSX.Element;
+export {};

package/build/components/PartnersFilter/PartnersFilter.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useMemo, useState } from 'react';
+import { Popper } from '@mui/material';
+import Box from '@mui/material/Box';
+import { MenuItem, RadioGroup } from '../index.js';
+import { rightArrow } from '../../constants/index.js';
+import { StatusValue } from '../../types/index.js';
+export default function PartnersFilter({ options, selectedFilters, onChange }) {
+    const [childAnchorEl, setChildAnchorEl] = useState(null);
+    const [hoveredStatus, setHoveredStatus] = useState(null);
+    const onChildLeave = useCallback(() => {
+        setChildAnchorEl(null);
+        setHoveredStatus(null);
+    }, []);
+    const getSelectedValue = (value) => {
+        return value === StatusValue.ALL ? undefined : value === StatusValue.ENABLED;
+    };
+    const onClickStatus = (value) => {
+        if (hoveredStatus) {
+            onChange({ [hoveredStatus]: getSelectedValue(value) });
+        }
+    };
+    const radioSelectedValue = useMemo(() => {
+        const value = selectedFilters === null || selectedFilters === void 0 ? void 0 : selectedFilters[hoveredStatus || ''];
+        return value === undefined ? StatusValue.ALL : value ? StatusValue.ENABLED : StatusValue.DISABLED;
+    }, [selectedFilters, hoveredStatus]);
+    return (_jsxs(_Fragment, { children: [options.map(({ label, value }, index) => (_jsxs(MenuItem, Object.assign({ onMouseOver: (e) => {
+                    setChildAnchorEl(e.currentTarget);
+                    setHoveredStatus(value);
+                }, sx: Object.assign({ minHeight: '35px', padding: '8px 16px', display: 'flex', alignItems: 'center', justifyContent: 'space-between', cursor: 'pointer', '&:hover': { backgroundColor: '#fff', boxShadow: '0px 0px 16px 0px #00000021' } }, (index === options.length - 1 && {
+                    borderBottom: '1px solid #F2F2F2',
+                })), hideCheckbox: true }, { children: [_jsx(Box, Object.assign({ sx: { display: 'flex', alignItems: 'center', gap: '4px' } }, { children: label })), _jsx(Box, { component: "img", src: rightArrow, width: 16, height: 12, sx: { marginLeft: 'auto' } })] }), value))), _jsx(Popper, Object.assign({ open: Boolean(childAnchorEl), anchorEl: childAnchorEl, placement: "right-start", onMouseLeave: onChildLeave }, { children: _jsx(Box, Object.assign({ sx: {
+                        backgroundColor: '#fff',
+                        borderEndEndRadius: '8px',
+                        border: '1px solid #F2F2F2',
+                    } }, { children: _jsx(RadioGroup, { options: [
+                            {
+                                value: StatusValue.ALL,
+                                label: 'All',
+                            },
+                            {
+                                value: StatusValue.ENABLED,
+                                label: 'Available',
+                            },
+                            {
+                                value: StatusValue.DISABLED,
+                                label: 'Not Available',
+                            },
+                        ], value: radioSelectedValue, onOptionChange: onClickStatus }) })) }))] }));
+}

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

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

package/build/components/PartnersFilter/index.js

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

package/build/components/PaymentSourceFilter/PaymentIcon.d.ts

@@ -0,0 +1,5 @@
+interface PaymentIconProps {
+    type: string;
+}
+export declare function PaymentIcon({ type }: PaymentIconProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/build/components/PaymentSourceFilter/PaymentIcon.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Box from '@mui/material/Box';
+import { getPaymentMethodsIcon } from '../../constants/index.js';
+import { PaymentChip } from './style';
+export function PaymentIcon({ type }) {
+    return (_jsx(PaymentChip, { children: _jsx(Box, { component: "img", src: getPaymentMethodsIcon(type), sx: { width: 18, height: 12, objectFit: 'contain' }, onError: (e) => {
+                e.currentTarget.src = getPaymentMethodsIcon('card');
+            } }) }));
+}

package/build/components/PaymentSourceFilter/PaymentInitiated.d.ts

@@ -0,0 +1,8 @@
+import { CustomColumnFilterProps } from '../VirtualTables';
+import { PaymentSourceFilters } from './type';
+interface PaymentInitiatedFilterProps extends Partial<CustomColumnFilterProps> {
+    filters?: PaymentSourceFilters;
+    setFilters?: (filters: PaymentSourceFilters) => void;
+}
+export default function PaymentInitiatedFilter({ filters, setFilters }: Readonly<PaymentInitiatedFilterProps>): import("react/jsx-runtime").JSX.Element;
+export {};

package/build/components/PaymentSourceFilter/PaymentInitiated.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Menu, MenuItem } from '../index.js';
+import { rightArrow, PAYMENT_INITIATED_OPTIONS } from '../../constants/index.js';
+import { MenuItemStyled } from './style';
+export default function PaymentInitiatedFilter({ filters, setFilters }) {
+    const [nestedAnchorEl, setNestedAnchorEl] = useState(null);
+    const { t } = useTranslation();
+    const paymentInitiated = useMemo(() => { var _a; return (_a = filters === null || filters === void 0 ? void 0 : filters.payment_initiated) !== null && _a !== void 0 ? _a : []; }, [filters === null || filters === void 0 ? void 0 : filters.payment_initiated]);
+    const onOpen = (e) => {
+        setNestedAnchorEl(e.currentTarget);
+    };
+    const onClose = () => {
+        setNestedAnchorEl(null);
+    };
+    const isPaymentSelected = useCallback((key) => paymentInitiated.includes(key), [paymentInitiated]);
+    const isAllPaymentSelected = (paymentInitiated === null || paymentInitiated === void 0 ? void 0 : paymentInitiated.length) === PAYMENT_INITIATED_OPTIONS.length;
+    const onClickAll = () => {
+        setFilters === null || setFilters === void 0 ? void 0 : setFilters(Object.assign(Object.assign({}, filters), { payment_initiated: isAllPaymentSelected ? [] : PAYMENT_INITIATED_OPTIONS.map(({ key }) => key) }));
+    };
+    const onPaymentClick = (key) => {
+        setFilters === null || setFilters === void 0 ? void 0 : setFilters(Object.assign(Object.assign({}, filters), { payment_initiated: isPaymentSelected(key) ? paymentInitiated === null || paymentInitiated === void 0 ? void 0 : paymentInitiated.filter((payment) => payment !== key) : [...paymentInitiated, key] }));
+    };
+    return (_jsxs(MenuItemStyled, Object.assign({ onMouseEnter: onOpen, onMouseLeave: onClose, isSelected: isAllPaymentSelected, isIndeterminate: paymentInitiated.length === 1, onClick: onClickAll }, { children: [_jsx("span", Object.assign({ className: "label" }, { children: t('paymentInitiated') })), _jsx("img", { src: rightArrow, alt: "arrow", style: { height: 12 } }), _jsx(Menu, Object.assign({ open: Boolean(nestedAnchorEl), anchorEl: nestedAnchorEl, placement: "right-start" }, { children: PAYMENT_INITIATED_OPTIONS.map(({ label, key }) => (_jsx(MenuItem, Object.assign({ isSelected: isPaymentSelected(key), onClick: (e) => {
+                        e.stopPropagation();
+                        onPaymentClick(key);
+                    } }, { children: label }), key))) }))] })));
+}

package/build/components/PaymentSourceFilter/PaymentMethod.d.ts

@@ -0,0 +1,6 @@
+import { SourceFilter } from '../../types/index.js';
+import { Filters } from './type';
+interface PaymentMethodProps extends SourceFilter, Filters {
+}
+export default function PaymentMethod({ icon, name, options, filters, setFilters }: PaymentMethodProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/build/components/PaymentSourceFilter/PaymentMethod.js

@@ -0,0 +1,55 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useCallback, useMemo } from 'react';
+import { Menu } from '../index.js';
+import { rightArrow } from '../../constants/index.js';
+import { MenuItemStyled } from './style';
+import { PaymentIcon } from './PaymentIcon';
+export default function PaymentMethod({ icon, name, options = [], filters, setFilters }) {
+    var _a;
+    const [anchorEl, setAnchorEl] = useState(null);
+    const paymentMethods = (_a = filters === null || filters === void 0 ? void 0 : filters.payment_methods) !== null && _a !== void 0 ? _a : [];
+    const onOpen = (e) => {
+        setAnchorEl(e.currentTarget);
+    };
+    const onClose = () => {
+        setAnchorEl(null);
+    };
+    const isSelectedPaymentMethod = useCallback((selectedPaymentMethod) => { var _a; return (_a = paymentMethods.includes(selectedPaymentMethod)) !== null && _a !== void 0 ? _a : false; }, [paymentMethods.length]);
+    const isSelected = useMemo(() => options === null || options === void 0 ? void 0 : options.every((option) => isSelectedPaymentMethod(option.type)), [paymentMethods.length]);
+    const isIndeterminate = useMemo(() => !isSelected && (options === null || options === void 0 ? void 0 : options.some((option) => isSelectedPaymentMethod(option.type))), [paymentMethods.length]);
+    const onClick = (e) => {
+        var _a, _b;
+        e.stopPropagation();
+        if (isSelected) {
+            const newPaymentMethods = (_a = options === null || options === void 0 ? void 0 : options.reduce((acc, option) => acc.filter((method) => method !== option.type), paymentMethods)) !== null && _a !== void 0 ? _a : [];
+            const { payment_methods } = filters, resetFilters = __rest(filters, ["payment_methods"]);
+            setFilters((newPaymentMethods === null || newPaymentMethods === void 0 ? void 0 : newPaymentMethods.length) > 0
+                ? Object.assign(Object.assign({}, filters), { payment_methods: newPaymentMethods }) : resetFilters);
+        }
+        else {
+            setFilters(Object.assign(Object.assign({}, filters), { payment_methods: [...paymentMethods, ...((_b = options === null || options === void 0 ? void 0 : options.map((option) => option.type)) !== null && _b !== void 0 ? _b : [])] }));
+        }
+    };
+    const onClickPaymentMethod = (e, selectedPaymentMethod) => {
+        var _a;
+        e.stopPropagation();
+        if (isSelectedPaymentMethod(selectedPaymentMethod)) {
+            setFilters(Object.assign(Object.assign({}, filters), { payment_methods: (_a = paymentMethods === null || paymentMethods === void 0 ? void 0 : paymentMethods.filter((method) => method !== selectedPaymentMethod)) !== null && _a !== void 0 ? _a : [] }));
+        }
+        else {
+            setFilters(Object.assign(Object.assign({}, filters), { payment_methods: [...(paymentMethods !== null && paymentMethods !== void 0 ? paymentMethods : []), selectedPaymentMethod] }));
+        }
+    };
+    return (_jsxs(MenuItemStyled, Object.assign({ isSelected: isSelected, isIndeterminate: isIndeterminate, onMouseEnter: onOpen, onMouseLeave: onClose, onClick: onClick }, { children: [_jsx("img", { src: icon, alt: name }), _jsx("span", Object.assign({ className: "label" }, { children: name })), _jsx("img", { src: rightArrow, alt: "arrow", style: { height: 12 } }), _jsx(Menu, Object.assign({ open: Boolean(anchorEl), anchorEl: anchorEl, placement: "right-end" }, { children: options === null || options === void 0 ? void 0 : options.map((option) => (_jsx(MenuItemStyled, Object.assign({ isSelected: isSelectedPaymentMethod(option.type), onClick: (e) => onClickPaymentMethod(e, option.type) }, { children: _jsx(PaymentIcon, { type: option.type }) }), option.type))) }))] })));
+}

package/build/components/PaymentSourceFilter/PaymentMethods.d.ts

@@ -0,0 +1,7 @@
+import { Filters } from './type';
+import { SourceFilter } from '../../types/index.js';
+interface PaymentMethodsProps extends Filters {
+    paymentMethodsSource: SourceFilter;
+}
+export default function PaymentMethods({ paymentMethodsSource, filters, setFilters }: Readonly<PaymentMethodsProps>): import("react/jsx-runtime").JSX.Element;
+export {};

package/build/components/PaymentSourceFilter/PaymentMethods.js

@@ -0,0 +1,50 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useMemo, useState } from 'react';
+import { Menu } from '../index.js';
+import { rightArrow } from '../../constants/index.js';
+import PaymentMethod from './PaymentMethod';
+import { MenuItemStyled } from './style';
+export default function PaymentMethods({ paymentMethodsSource, filters, setFilters }) {
+    var _a, _b, _c;
+    const [paymentMethodsEl, setPaymentMethodsEl] = useState(null);
+    const filterPaymentMethods = (_a = filters === null || filters === void 0 ? void 0 : filters.payment_methods) !== null && _a !== void 0 ? _a : [];
+    const isDisabled = !((_b = paymentMethodsSource === null || paymentMethodsSource === void 0 ? void 0 : paymentMethodsSource.options) === null || _b === void 0 ? void 0 : _b.length);
+    const onOpen = (e) => {
+        setPaymentMethodsEl(e.currentTarget);
+    };
+    const onClose = () => {
+        setPaymentMethodsEl(null);
+    };
+    const paymentMethodsAll = useMemo(() => {
+        var _a, _b, _c;
+        return (_c = (_b = ((_a = paymentMethodsSource === null || paymentMethodsSource === void 0 ? void 0 : paymentMethodsSource.options) !== null && _a !== void 0 ? _a : [])) === null || _b === void 0 ? void 0 : _b.reduce((acc, method) => {
+            var _a, _b, _c;
+            acc.push(...((_c = (_b = ((_a = method.options) !== null && _a !== void 0 ? _a : [])) === null || _b === void 0 ? void 0 : _b.map((m) => m.type)) !== null && _c !== void 0 ? _c : []));
+            return acc;
+        }, [])) !== null && _c !== void 0 ? _c : [];
+    }, []);
+    const isSelected = useMemo(() => (paymentMethodsAll === null || paymentMethodsAll === void 0 ? void 0 : paymentMethodsAll.length) === filterPaymentMethods.length && filterPaymentMethods.length > 0, [filterPaymentMethods.length, paymentMethodsAll === null || paymentMethodsAll === void 0 ? void 0 : paymentMethodsAll.length]);
+    const isIndeterminate = useMemo(() => !isSelected && filterPaymentMethods.length > 0, [filterPaymentMethods.length, isSelected]);
+    const onClick = () => {
+        if (isDisabled)
+            return;
+        if (isSelected) {
+            const { payment_methods } = filters, resetFilters = __rest(filters, ["payment_methods"]);
+            setFilters(resetFilters);
+            return;
+        }
+        setFilters(Object.assign(Object.assign({}, filters), { payment_methods: paymentMethodsAll }));
+    };
+    return (_jsxs(MenuItemStyled, Object.assign({ isSelected: isSelected, isIndeterminate: isIndeterminate, onMouseEnter: onOpen, onMouseLeave: onClose, onClick: onClick, sx: Object.assign({}, (isDisabled && { opacity: 0.5, pointerEvents: 'none' })) }, { children: [_jsx("span", Object.assign({ className: "label" }, { children: paymentMethodsSource === null || paymentMethodsSource === void 0 ? void 0 : paymentMethodsSource.name })), _jsx("img", { src: rightArrow, alt: "arrow", style: { height: 12 } }), _jsx(Menu, Object.assign({ open: Boolean(paymentMethodsEl), anchorEl: paymentMethodsEl, placement: "right-start" }, { children: (_c = paymentMethodsSource === null || paymentMethodsSource === void 0 ? void 0 : paymentMethodsSource.options) === null || _c === void 0 ? void 0 : _c.map((paymentMethod) => (_jsx(PaymentMethod, Object.assign({}, paymentMethod, { filters: filters, setFilters: setFilters }), paymentMethod.type))) }))] })));
+}

package/build/components/PaymentSourceFilter/PaymentSchemes.d.ts

@@ -0,0 +1,7 @@
+import { SourceFilter } from '../../types/index.js';
+import { Filters } from './type';
+interface PaymentSchemesProps extends Filters {
+    paymentSchemesSource: SourceFilter;
+}
+export default function PaymentSchemes({ paymentSchemesSource, filters, setFilters }: Readonly<PaymentSchemesProps>): import("react/jsx-runtime").JSX.Element;
+export {};