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

package/build/components/MultiSelectStatusButton/style.js

@@ -0,0 +1,77 @@
+import { Box, Button } from '@mui/material';
+import { styled } from '@mui/material/styles';
+export { statusButtonVariants, ChevronContainer, Label, LabelWrapper, StyledDropdown } from '../StatusButton/style';
+const baseButtonStyle = (theme) => (Object.assign(Object.assign({}, theme.typography.subtitle1), { borderRadius: '50px', borderWidth: '1px', borderStyle: 'solid', minWidth: '135.11px', height: '32px', display: 'flex', justifyContent: 'center', alignItems: 'center', gap: '8px', textTransform: 'none', transition: 'background-color 0.5s ease, color 0.3s ease', paddingInline: theme.spacing(2) }));
+export const StyledStatusButton = styled(Button, {
+    shouldForwardProp: (prop) => prop !== 'buttonVariant',
+})(({ theme, buttonVariant }) => (Object.assign(Object.assign({}, baseButtonStyle(theme)), (buttonVariant === 'active'
+    ? {
+        background: theme.palette.background.gradient.shadedBlue,
+        color: theme.palette.common.white,
+        '&:disabled': {
+            color: theme.palette.common.white,
+        },
+    }
+    : {
+        backgroundColor: theme.palette.common.white,
+        borderColor: theme.palette.grey[100],
+        color: theme.palette.text.primary,
+        '&:hover': {
+            backgroundColor: 'white',
+        },
+        '&:disabled': {
+            color: theme.palette.text.primary,
+        },
+    }))));
+export const FlagContainer = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    gap: theme.spacing(0.5),
+}));
+export const MenuItemContainer = styled(Box)(({ theme }) => ({
+    display: 'flex',
+    alignItems: 'center',
+    gap: theme.spacing(0.3),
+    width: '100%',
+}));
+export const CheckboxStyles = {
+    padding: 0.3,
+    color: '#8C9196',
+    '&.Mui-checked': {
+        color: '#1F88D0',
+    },
+    '&.MuiCheckbox-root': {
+        color: '#8C9196',
+    },
+    '& .MuiSvgIcon-root': {
+        color: 'inherit',
+    },
+    '&.Mui-checked .MuiSvgIcon-root': {
+        color: '#1F88D0',
+        '& path': {
+            fill: '#1F88D0',
+        },
+    },
+};
+export const ClearIcon = styled('img')(({ variant }) => ({
+    width: '10px',
+    height: '10px',
+    filter: variant === 'active' ? 'brightness(0) invert(1)' : 'brightness(0) invert(0)',
+    cursor: 'pointer',
+    position: 'absolute',
+    top: '50%',
+    left: '47%',
+    transform: 'translate(-50%, -50%)',
+    transition: 'opacity 0.2s ease-in-out',
+}));
+export const ChevronIconWrapper = styled(Box, {
+    shouldForwardProp: (prop) => prop !== 'isVisible',
+})(({ isVisible }) => ({
+    opacity: isVisible ? 1 : 0,
+    transition: 'opacity 0.2s ease-in-out',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '100%',
+    height: '100%',
+}));

package/build/components/MultiSelectStatusButton/type.js

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

package/build/components/MultiSelectWithSearch/ChildMenuItem.js

@@ -0,0 +1,45 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Box } from '@mui/material';
+import { rightArrow } from '../../constants/index.js';
+import MenuItem from '../MenuItem';
+import Menu from '../Menu';
+export function ChildMenuItem({ childOption, selectedOptions, onChangeOptions, }) {
+    var _a;
+    const [childMenuEl, setChildMenuEl] = useState(null);
+    const addOption = (option) => {
+        onChangeOptions([...(selectedOptions || []), option]);
+    };
+    const removeOption = (option) => {
+        onChangeOptions((selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.filter((o) => o.value !== option.value)) || []);
+    };
+    return (_jsxs(MenuItem, Object.assign({ onMouseEnter: (e) => {
+            var _a;
+            if (((_a = childOption.options) === null || _a === void 0 ? void 0 : _a.length) > 0)
+                setChildMenuEl(e.currentTarget);
+        }, onMouseLeave: () => {
+            if (childMenuEl)
+                setChildMenuEl(null);
+        } }, { children: [_jsxs(Box, Object.assign({ sx: {
+                    display: 'flex',
+                    gap: '12px',
+                    justifyContent: 'space-between',
+                    flexGrow: 1,
+                    alignItems: 'center',
+                    maxWidth: '220px',
+                    minWidth: '89px',
+                } }, { children: [childOption.label, _jsx("img", { src: rightArrow, className: "arrow-icon", alt: "arrow" })] })), _jsx(Menu, Object.assign({ sx: { maxHeight: '450px', overflow: 'auto' }, open: Boolean(childMenuEl), anchorEl: childMenuEl, placement: "right-start" }, { children: (_a = childOption.options) === null || _a === void 0 ? void 0 : _a.map((option) => {
+                    const selectedOption = selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.find((o) => o.value === option.value);
+                    const isSelected = !!selectedOption;
+                    return (_jsx(MenuItem, Object.assign({ isSelected: isSelected, onClick: (e) => {
+                            e.stopPropagation();
+                            e.preventDefault();
+                            if (isSelected) {
+                                removeOption(option);
+                            }
+                            else {
+                                addOption(option);
+                            }
+                        } }, { children: _jsx(Box, Object.assign({ sx: { flex: 1, maxWidth: '220px', minWidth: '89px' } }, { children: option.label })) }), option.value));
+                }) }))] })));
+}

package/build/components/MultiSelectWithSearch/MultiSelectWithSearch.js

@@ -0,0 +1,52 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useState, useMemo, useRef } from 'react';
+import { CircularProgress, Typography } from '@mui/material';
+import { searchIcon, closeXIcon, blueCheckIcon, downArrowIcon } from '../../constants/index.js';
+import Icon from '../Icon';
+import ClickAwayListener from '@mui/material/ClickAwayListener';
+import { SelectedBadgesWrapper, SelectedBadge, TriggerWrapper, Container, InputStyled, ArrowIcon } from './style';
+import { filterOptions } from './utils';
+import Menu from '../Menu';
+import { ParentMenuItem } from './ParentMenuItem';
+function MultiSelectWithSearch({ nestedOptions, onChangeOptions, selectedOptions, placeholder, isLoading, searchBy = ['label'], disabled, }) {
+    var _a, _b;
+    const [anchorEl, setAnchorEl] = useState(null);
+    const [searchValue, setSearchValue] = useState('');
+    const triggerRef = useRef(null);
+    const open = Boolean(anchorEl);
+    const openDropdown = (e) => {
+        setAnchorEl(open ? null : e.currentTarget);
+    };
+    const closeDropdown = () => {
+        setAnchorEl(null);
+    };
+    const onResetSearch = () => {
+        if (searchValue)
+            setSearchValue('');
+    };
+    const filteredOptions = useMemo(() => {
+        if (!searchValue)
+            return nestedOptions;
+        return filterOptions(nestedOptions, searchValue, searchBy);
+    }, [nestedOptions, searchValue, searchBy]);
+    const endAdornment = isLoading ? (_jsx(CircularProgress, { size: 16 })) : (_jsx(Icon, { src: searchValue ? closeXIcon : searchIcon, alt: searchValue ? 'close' : 'search', onClick: onResetSearch, sx: { width: 12, height: 12 } }));
+    const selectedOptionsLength = Number((_a = selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.length) !== null && _a !== void 0 ? _a : 0);
+    return (_jsx(ClickAwayListener, Object.assign({ onClickAway: () => {
+            if (open)
+                closeDropdown();
+        } }, { children: _jsxs(TriggerWrapper, Object.assign({ id: "TriggerWrapper", onClick: (e) => !disabled && openDropdown(e), ref: triggerRef }, { children: [_jsx(Typography, Object.assign({ color: "grey", sx: { cursor: 'pointer', fontSize: '10px', padding: '4px' }, component: "label" }, { children: placeholder })), selectedOptionsLength === 0 && (_jsx(Typography, Object.assign({ sx: { fontWeight: 500, fontSize: '11px', padding: '0px 4px 4px' }, component: "p" }, { children: "Please Select" }))), _jsx(ArrowIcon, { component: "img", src: downArrowIcon, alt: "down arrow", sx: Object.assign({}, (open && { transform: 'rotate(180deg)' })) }), !!selectedOptionsLength && (_jsx(SelectedBadgesWrapper, Object.assign({ id: "SelectedBadgesWrapper" }, { children: selectedOptionsLength > 0 && selectedOptionsLength <= 2
+                        ? selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.map((option) => (_jsxs(SelectedBadge, Object.assign({ maxWidth: 90 }, { children: [_jsx(Icon, { src: blueCheckIcon, alt: "blue-check", sx: { width: 10, height: 7.5 } }), _jsx("span", { children: option.label })] }), option.value)))
+                        : selectedOptionsLength > 2 &&
+                            ((_b = selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.slice(0, 2)) === null || _b === void 0 ? void 0 : _b.map((option, index) => {
+                                return (_jsxs(React.Fragment, { children: [_jsxs(SelectedBadge, Object.assign({ maxWidth: 90 }, { children: [_jsx(Icon, { src: blueCheckIcon, alt: "blue-check", sx: { width: 10, height: 7.5 } }), _jsx("span", { children: option.label })] })), index === 1 && (_jsx(SelectedBadge, Object.assign({ maxWidth: 90 }, { children: _jsxs("span", { children: ["+", selectedOptionsLength - 2] }) })))] }, option.value));
+                            })) }))), _jsx(Menu, Object.assign({ open: open, anchorEl: anchorEl, sx: { margin: '8px 0', maxHeight: 330, overflow: 'auto', maxWidth: '340px' } }, { children: _jsxs(Container, { children: [_jsx(InputStyled, { placeholder: placeholder || 'Select', endAdornment: endAdornment, onClick: (e) => {
+                                    e.stopPropagation();
+                                }, value: searchValue, onChange: (e) => {
+                                    setSearchValue(e.target.value);
+                                }, disableUnderline: true, sx: Object.assign(Object.assign({ cursor: 'default', width: '100%', backgroundColor: 'white', border: '1px solid #F2F2F2' }, (nestedOptions.length && { marginBottom: '4px' })), (searchValue && { cursor: 'pointer' })) }), _jsx(SelectedBadgesWrapper, { children: selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.map((option) => (_jsxs(SelectedBadge, Object.assign({ sx: { maxWidth: '150px' }, onClick: (e) => {
+                                        e.stopPropagation();
+                                        e.preventDefault();
+                                        onChangeOptions((selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions.filter((o) => o.value !== option.value)) || []);
+                                    } }, { children: [_jsx(Icon, { src: blueCheckIcon, alt: "blue-check", sx: { width: 10, height: 7.5 } }), _jsx("span", Object.assign({ style: { overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' } }, { children: option.label })), _jsx(Icon, { src: closeXIcon, alt: "close", sx: { width: 9, height: 9 } })] }), option.value))) }), filteredOptions === null || filteredOptions === void 0 ? void 0 : filteredOptions.map((parentOption) => (_jsx(ParentMenuItem, { parentOption: parentOption, selectedOptions: selectedOptions, onChangeOptions: onChangeOptions }, parentOption.label)))] }) }))] })) })));
+}
+export default MultiSelectWithSearch;

package/build/components/MultiSelectWithSearch/ParentMenuItem.js

@@ -0,0 +1,27 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Box } from '@mui/material';
+import { rightArrow } from '../../constants/index.js';
+import MenuItem from '../MenuItem';
+import Menu from '../Menu';
+import { ChildMenuItem } from './ChildMenuItem';
+export function ParentMenuItem({ parentOption, selectedOptions, onChangeOptions, }) {
+    var _a;
+    const [parentMenuEl, setParentMenuEl] = useState(null);
+    return (_jsxs(MenuItem, Object.assign({ onMouseEnter: (e) => {
+            var _a;
+            if (((_a = parentOption.options) === null || _a === void 0 ? void 0 : _a.length) > 0)
+                setParentMenuEl(e.currentTarget);
+        }, onMouseLeave: () => {
+            if (parentMenuEl)
+                setParentMenuEl(null);
+        } }, { children: [_jsxs(Box, Object.assign({ sx: {
+                    display: 'flex',
+                    gap: '12px',
+                    justifyContent: 'space-between',
+                    flexGrow: 1,
+                    alignItems: 'center',
+                    maxWidth: '340px',
+                    minWidth: '89px',
+                } }, { children: [parentOption.label, _jsx("img", { src: rightArrow, className: "arrow-icon", alt: "arrow" })] })), _jsx(Menu, Object.assign({ sx: { maxHeight: '450px', overflow: 'auto' }, open: Boolean(parentMenuEl), anchorEl: parentMenuEl, placement: "right-start" }, { children: (_a = parentOption.options) === null || _a === void 0 ? void 0 : _a.map((childOption) => (_jsx(ChildMenuItem, { childOption: childOption, selectedOptions: selectedOptions, onChangeOptions: onChangeOptions }, childOption.label))) }))] })));
+}

package/build/components/MultiSelectWithSearch/index.js

@@ -1 +1,4 @@
-export{a as ChildMenuItem,b as ParentMenuItem,c as default}from'../../chunk-6DLPM4RB.js';import'../../chunk-LDZG7EXA.js';import'../../chunk-ZCSUNBRA.js';import'../../chunk-A5FGRP2T.js';import'../../chunk-GMRNI4U5.js';import'../../chunk-5AIEKGEA.js';import'../../chunk-HBY2XKKF.js';import'../../chunk-OYEIM6ED.js';import'../../chunk-RWXGVZUC.js';
+import MultiSelectWithSearch from './MultiSelectWithSearch';
+export * from './ChildMenuItem';
+export * from './ParentMenuItem';
+export default MultiSelectWithSearch;

package/build/components/MultiSelectWithSearch/style.js

@@ -0,0 +1,88 @@
+import Box from '@mui/material/Box';
+import Input from '@mui/material/Input';
+import { styled } from '@mui/material/styles';
+import Text from '../Text';
+import Checkbox from '../Checkbox';
+export const Caption = styled(Text)(({ theme }) => ({
+    fontSize: '10px',
+    color: theme.palette.grey[700],
+    fontWeight: 600,
+    lineHeight: '10px',
+}));
+export const Title = styled(Text)(({ theme }) => ({
+    fontSize: '11px',
+    color: theme.palette.text.primary,
+    fontWeight: 600,
+    lineHeight: '14.3px',
+    width: 200,
+}));
+export const AccordionWrapper = styled(Box)(() => ({
+    display: 'flex',
+    flexDirection: 'column',
+    maxHeight: 400,
+    overflow: 'auto',
+    gap: '8px',
+}));
+export const InputStyled = styled(Input)(({ theme }) => ({
+    width: 'inherit',
+    height: 32,
+    padding: '11px 12px',
+    fontSize: '10px',
+    borderRadius: '5px',
+    backgroundColor: '#F9F9F9',
+    border: '1px solid transparent',
+    '&.Mui-focused': {
+        borderColor: theme.palette.info.dark,
+    },
+}));
+export const CheckboxStyled = styled(Checkbox)(() => ({
+    padding: 0,
+    width: 12,
+    height: 12,
+    '.MuiSvgIcon-root, img': {
+        width: 12,
+        height: 12,
+    },
+}));
+export const Container = styled(Box)(() => ({
+    display: 'flex',
+    flexDirection: 'column',
+    gap: '8px',
+    padding: '4px',
+}));
+export const SelectedBadgesWrapper = styled(Box)(() => ({
+    display: 'flex',
+    gap: '8px',
+    padding: '4px',
+    flexWrap: 'wrap',
+    paddingInlineEnd: '20px',
+}));
+export const SelectedBadge = styled(Box)(({ theme, maxWidth }) => (Object.assign({ display: 'flex', padding: '4px 8px 4px 6px', alignItems: 'center', gap: '4px', borderRadius: '13px', backgroundColor: `${theme.palette.info.dark}1a`, fontSize: '10px', fontWeight: 500, cursor: 'pointer' }, (maxWidth && {
+    maxWidth: `${maxWidth}%`,
+}))));
+export const ItemStyled = styled(Text)(({ theme }) => ({
+    display: 'flex',
+    gap: '8px',
+    alignItems: 'center',
+    fontSize: '10px',
+    fontWeight: 500,
+    color: theme.palette.common.black,
+    cursor: 'pointer',
+    padding: 8,
+}));
+export const TriggerWrapper = styled(Box)(({ theme }) => ({
+    width: '100%',
+    flexDirection: 'column',
+    border: `1px solid ${theme.palette.grey[100]}`,
+    borderRadius: '4px',
+    backgroundColor: theme.palette.grey[400],
+    minWidth: '89px',
+    position: 'relative',
+}));
+export const ArrowIcon = styled(Box)(() => ({
+    position: 'absolute',
+    right: 8,
+    bottom: 13.5,
+    width: 15,
+    height: 15,
+}));

package/build/components/MultiSelectWithSearch/type.js

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

package/build/components/MultiSelectWithSearch/utils.js

@@ -0,0 +1,12 @@
+export const filterOptions = (parentOptions, searchValue, searchBy) => {
+    return parentOptions
+        .map((option) => {
+        const filteredOptions = option === null || option === void 0 ? void 0 : option.options.map((opt) => {
+            var _a;
+            const matchedOptions = (_a = opt === null || opt === void 0 ? void 0 : opt.options) === null || _a === void 0 ? void 0 : _a.filter((o) => searchBy.some((key) => { var _a; return (_a = o === null || o === void 0 ? void 0 : o[key]) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(searchValue.toLowerCase()); }));
+            return Object.assign(Object.assign({}, opt), { options: matchedOptions });
+        }).filter((opt) => { var _a; return ((_a = opt === null || opt === void 0 ? void 0 : opt.options) === null || _a === void 0 ? void 0 : _a.length) > 0; });
+        return Object.assign(Object.assign({}, option), { options: filteredOptions });
+    })
+        .filter((option) => { var _a; return ((_a = option === null || option === void 0 ? void 0 : option.options) === null || _a === void 0 ? void 0 : _a.length) > 0; });
+};

package/build/components/NestedDropdown/Dropdown.js

@@ -0,0 +1,60 @@
+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 { memo, useEffect, useState } from 'react';
+import MenuItem from './NestedMenuItem';
+import { TitleStyled, DropdownStyled, ListWrapper, HeaderWrapper } from './styles';
+function Dropdown(_a) {
+    var { title, menuItems, onChildrenChange, onSelect, className, updatedList, footer, placement = 'right' } = _a, props = __rest(_a, ["title", "menuItems", "onChildrenChange", "onSelect", "className", "updatedList", "footer", "placement"]);
+    const [selectedItem, setSelected] = useState({ name: '', selected: false });
+    const [list, setList] = useState();
+    useEffect(() => {
+        setList(menuItems);
+    }, [menuItems]);
+    useEffect(() => {
+        if (selectedItem.name) {
+            const { name, selected } = selectedItem;
+            const changedChildren = [];
+            const updateAllChildren = (children) => children === null || children === void 0 ? void 0 : children.map((x) => {
+                var _a;
+                changedChildren.push({ name: x.name, selected });
+                return Object.assign(Object.assign(Object.assign({}, x), { selected }), (((_a = x.menuItems) === null || _a === void 0 ? void 0 : _a.length) && { menuItems: updateAllChildren(x.menuItems) }));
+            });
+            const updateList = (children) => children.map((i) => {
+                var _a;
+                if (i.name === name) {
+                    changedChildren.push({ name: i.name, selected });
+                    return Object.assign(Object.assign(Object.assign({}, i), { selected }), (((_a = i.menuItems) === null || _a === void 0 ? void 0 : _a.length) && { menuItems: updateAllChildren(i.menuItems) }));
+                }
+                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, idx) => (_jsx(MenuItem, Object.assign({ setSelected: ({ name, selected }) => {
+                        setSelected({ name, selected });
+                    }, onSelect: (selectedChildren) => {
+                        if (onSelect)
+                            onSelect(selectedChildren);
+                    }, placement: placement }, item), `${item.name}-${idx}`))) }), footer && footer] })));
+}
+export default memo(Dropdown);

package/build/components/NestedDropdown/NestedDropdown.js

@@ -0,0 +1,49 @@
+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 } from "react/jsx-runtime";
+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: 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)
+            setList(menuItems);
+    }, [menuItems]);
+    const updateSelection = (updatedItems) => {
+        const handleSelected = (items) => items.map((item) => {
+            var _a, _b, _c;
+            return (Object.assign(Object.assign(Object.assign({}, item), { selected: (_b = (_a = updatedItems.find((updatedItem) => item.name === updatedItem.name)) === null || _a === void 0 ? void 0 : _a.selected) !== null && _b !== void 0 ? _b : item.selected }), (((_c = item.menuItems) === null || _c === void 0 ? void 0 : _c.length) && { menuItems: handleSelected(item.menuItems) })));
+        });
+        const newList = handleSelected(list);
+        setList(newList);
+        if (updatedList)
+            updatedList(newList);
+    };
+    return (_jsx(Dropdown, Object.assign({ "data-testid": "NestedDropdown", placement: placement, menuItems: list, title: title, onSelect: (selected) => {
+            if (onSelect)
+                onSelect(selected);
+            updateSelection(selected);
+        } }, props)));
+}
+export default memo(NestedDropdown);

package/build/components/NestedDropdown/NestedMenuItem.js

@@ -0,0 +1,48 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { memo, useState, useRef, useEffect } from 'react';
+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', sx, menuSx, }) {
+    const [anchorEl, setAnchorEl] = useState(null);
+    const menuItemRef = useRef(null);
+    const [isIndeterminate, setIsIndeterminate] = useState(false);
+    const handleChange = (itemName) => {
+        if (!disabled && selected !== undefined) {
+            setSelected({ name: itemName, selected: !selected });
+            if (!selected) {
+                setIsIndeterminate(false);
+            }
+        }
+    };
+    useEffect(() => {
+        setIsIndeterminate(Boolean((menuItems === null || menuItems === void 0 ? void 0 : menuItems.some((i) => i.selected)) && !(menuItems === null || menuItems === void 0 ? void 0 : menuItems.every((i) => i.selected))));
+    }, []);
+    return (_jsxs(MenuItemStyled, Object.assign({ "data-testid": "NestedDropdown_MenuItem", ref: menuItemRef, className: `nested-menu-item ${anchorEl ? 'active' : ''} ${disabled ? 'disabled' : ''}`, onMouseEnter: (e) => {
+            if (!anchorEl && (menuItems === null || menuItems === void 0 ? void 0 : menuItems.length))
+                setAnchorEl(e.currentTarget);
+        }, onMouseLeave: () => {
+            if (anchorEl)
+                setAnchorEl(null);
+        }, onClick: (e) => {
+            if (!disabled) {
+                e.stopPropagation();
+                handleChange(name);
+            }
+        }, 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) {
+                                setSelected({ name, selected: true });
+                            }
+                            if (newList.every((x) => !x.selected)) {
+                                setSelected({ name, selected: false });
+                            }
+                            setIsIndeterminate((newList === null || newList === void 0 ? void 0 : newList.some((i) => i.selected)) && !newList.every((x) => !x.selected) && !isAllChildrenSelected);
+                        }
+                    }, onSelect: (selectedItems) => {
+                        onSelect(selectedItems, name);
+                    } }) })))] })));
+}
+export default memo(MenuItem);

package/build/components/NestedDropdown/index.js

@@ -1 +1,5 @@
-export{b as Dropdown,a as NestedMenuItem,c as default}from'../../chunk-XQVSYDRO.js';import'../../chunk-GMRNI4U5.js';import'../../chunk-5AIEKGEA.js';import'../../chunk-OYEIM6ED.js';import'../../chunk-RWXGVZUC.js';
+import NestedDropdown from './NestedDropdown';
+export { default as Dropdown } from './Dropdown';
+export { default as NestedMenuItem } from './NestedMenuItem';
+export * from './types';
+export default NestedDropdown;

package/build/components/NestedDropdown/styles.js

@@ -0,0 +1,100 @@
+import { styled, Box } from '@mui/material';
+import Checkbox from '../Checkbox';
+import Text from '../Text';
+export const TitleStyled = styled(Text)(({ theme }) => ({
+    fontWeight: theme.typography.fontWeightMedium,
+    fontSize: theme.typography.subtitle1.fontSize,
+    color: theme.palette.grey[700],
+    paddingInlineStart: theme.spacing(2),
+    paddingTop: theme.spacing(1),
+    paddingBottom: theme.spacing(1),
+    paddingInlineEnd: theme.spacing(1),
+}));
+export const MenuItemStyled = styled(Box, { shouldForwardProp: (props) => props !== 'disabled' })(({ theme, disabled }) => ({
+    fontWeight: theme.typography.fontWeightMedium,
+    padding: theme.spacing(1),
+    position: 'relative',
+    display: 'flex',
+    alignItems: 'center',
+    textTransform: 'capitalize',
+    cursor: disabled ? 'not-allowed' : 'pointer',
+    flex: 1,
+    zIndex: 99999,
+    '.MuiButtonBase-root': {
+        width: '16px',
+        marginInlineEnd: '4px',
+    },
+}));
+export const DropdownStyled = styled(Box)(({ theme }) => ({
+    borderRadius: theme.spacing(0.5),
+    background: theme.palette.background.default,
+    width: 'max-content',
+    cursor: 'pointer',
+    zIndex: 99999,
+    boxShadow: theme.shadows[11],
+    display: 'flex',
+    flexDirection: 'column',
+    '.nested-menu-item + .nested-menu-item': {
+        borderTop: `1px solid ${theme.palette.divider}`,
+        zIndex: 99999,
+    },
+    '.nested-menu-item:hover': {
+        transition: theme.transitions.create(['boxShadow', 'border'], {
+            easing: theme.transitions.easing.sharp,
+            duration: theme.transitions.duration.complex,
+        }),
+        boxShadow: theme.shadows[6],
+        border: 'none',
+        position: 'relative',
+    },
+}));
+export const Label = styled(Box)(({ theme }) => (Object.assign(Object.assign({}, theme.typography.subtitle1), { color: theme.palette.text.primary, width: '100%' })));
+export const CheckboxStyled = styled(Checkbox)(() => ({
+    padding: 0,
+    paddingRight: '4px',
+    '.MuiSvgIcon-root': {
+        width: 12,
+        height: 12,
+    },
+}));
+export const ContentWrapper = styled(Box)(() => ({
+    display: 'flex',
+    gap: '4px',
+    alignItems: 'center',
+    flexGrow: 1,
+}));
+export const Content = styled(Box)(() => ({
+    display: 'flex',
+    gap: '12px',
+    justifyContent: 'space-between',
+    flexGrow: 1,
+    alignItems: 'center',
+}));
+export const Counter = styled(Box)(({ theme }) => ({
+    borderRadius: '50%',
+    background: theme.palette.divider,
+    width: 13,
+    height: 14,
+    fontSize: '8px',
+    fontWeight: 700,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    lineHeight: '10px',
+}));
+export const CountingInfo = styled(Box)(() => ({
+    display: 'flex',
+    alignItems: 'center',
+    gap: '8px',
+    flex: 1,
+    position: 'relative',
+    left: 4,
+}));
+export const ListWrapper = styled(Box)(() => ({
+    flex: '1 0 auto',
+}));
+export const HeaderWrapper = styled(Box)(({ theme }) => ({
+    position: 'relative',
+    backgroundColor: theme.palette.common.white,
+    zIndex: 999999,
+}));

package/build/components/NestedDropdown/types.js

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

package/build/components/NoInternet/NoInternet.js

@@ -0,0 +1,6 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Box from '@mui/material/Box';
+import { Container, Wrapper, ImageWrapper } from './style';
+export default function NoInternet({ title }) {
+    return (_jsx(Container, { children: _jsxs(Wrapper, { children: [_jsx(ImageWrapper, { children: _jsxs("svg", Object.assign({ width: "15", height: "14", viewBox: "0 0 15 14", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("g", Object.assign({ "clip-path": "url(#clip0_4838_500791)" }, { children: _jsx("path", { d: "M12.6359 1.34444L12.6359 1.34444L1.84425 12.1361L1.84324 12.1371L1.84323 12.1371C1.80796 12.171 1.7798 12.2115 1.76041 12.2564C1.74101 12.3013 1.73076 12.3496 1.73026 12.3985C1.72977 12.4474 1.73903 12.4959 1.75751 12.5411C1.77599 12.5864 1.80332 12.6275 1.8379 12.6621C1.87247 12.6967 1.9136 12.724 1.95886 12.7425C2.00413 12.761 2.05263 12.7702 2.10153 12.7697C2.15042 12.7693 2.19872 12.759 2.2436 12.7396C2.28849 12.7202 2.32905 12.692 2.36291 12.6568L2.3639 12.6558L2.36391 12.6558L6.87107 8.1486L6.88649 8.13318L6.90794 8.12925C7.83177 7.95978 8.82148 8.22837 9.53582 8.94271C9.60683 9.01372 9.70218 9.05038 9.79508 9.05038C9.88808 9.05038 9.98396 9.01366 10.0549 8.94271L10.0553 8.94229C10.1993 8.80078 10.1999 8.5686 10.0549 8.42362C9.42924 7.79795 8.63373 7.44893 7.81425 7.36712L7.66723 7.35244L7.7717 7.24797L9.21295 5.80672L9.24408 5.77559L9.28562 5.79017C10.0624 6.06276 10.7767 6.50589 11.3758 7.10498C11.4471 7.17626 11.5402 7.21322 11.6357 7.21322C11.7275 7.21322 11.8209 7.17675 11.8957 7.10478C12.0374 6.95995 12.0372 6.72746 11.8952 6.58281C11.3154 6.00304 10.6422 5.55399 9.91133 5.24449L9.81569 5.20398L9.88914 5.13053L11.1806 3.83911L11.217 3.80262L11.2627 3.82668C11.9646 4.19662 12.6233 4.67474 13.2136 5.26497C13.2845 5.33592 13.3804 5.37265 13.4734 5.37265C13.569 5.37265 13.6615 5.33616 13.7326 5.26497C13.8776 5.11999 13.877 4.88724 13.7331 4.74574L13.7325 4.74522C13.1559 4.16612 12.5156 3.69094 11.8371 3.30814L11.7568 3.26285L11.822 3.19767L13.1556 1.8641L13.1562 1.86344C13.2093 1.81181 13.2454 1.74537 13.2601 1.67282C13.2747 1.60028 13.2671 1.525 13.2383 1.45685C13.2094 1.3887 13.1606 1.33084 13.0984 1.29086C13.0361 1.25088 12.9632 1.23062 12.8892 1.23275L12.6359 1.34444ZM12.6359 1.34444L12.6366 1.34377M12.6359 1.34444L12.6366 1.34377M12.6366 1.34377C12.7032 1.27535 12.7938 1.23554 12.8892 1.23275L12.6366 1.34377ZM1.15567 4.74574L1.1561 4.74532C2.82333 3.07809 4.99232 2.21114 7.18124 2.14706C8.13805 2.11905 9.09854 2.24422 10.0224 2.52326L9.42386 3.12232C6.7366 2.45348 3.77167 3.16849 1.67518 5.26497L1.67477 5.2654C1.53326 5.40934 1.30108 5.40996 1.1561 5.26497C1.01112 5.11999 1.01173 4.88724 1.15567 4.74574ZM2.99668 6.58304C4.18518 5.39454 5.76276 4.74246 7.44465 4.74246C7.56138 4.74246 7.67793 4.74531 7.7943 4.7519L7.05489 5.49131C5.71805 5.58262 4.47253 6.1454 3.51594 7.10481C3.37084 7.24718 3.13819 7.2465 2.99668 7.10498C2.85193 6.96023 2.85193 6.72779 2.99668 6.58304ZM6.72445 10.308C6.93012 10.1023 7.20906 9.98677 7.49991 9.98677C7.79077 9.98677 8.06971 10.1023 8.27537 10.308C8.48104 10.5136 8.59658 10.7926 8.59658 11.0834C8.59658 11.3743 8.48104 11.6532 8.27537 11.8589C8.06971 12.0646 7.79077 12.1801 7.49991 12.1801C7.20906 12.1801 6.93012 12.0646 6.72445 11.8589C6.51879 11.6532 6.40325 11.3743 6.40325 11.0834C6.40325 10.7926 6.51879 10.5136 6.72445 10.308Z", fill: "#20232B", stroke: "#20232B", "stroke-width": "0.14" }) })), _jsx("defs", { children: _jsx("clipPath", Object.assign({ id: "clip0_4838_500791" }, { children: _jsx("rect", { width: "14", height: "14", fill: "white", transform: "translate(0.5)" }) })) })] })) }), _jsx(Box, { children: title })] }) }));
+}

package/build/components/NoInternet/index.js

@@ -1 +1,2 @@
-export{a as default}from'../../chunk-ZN4NGPK4.js';import'../../chunk-RWXGVZUC.js';
+import NoInternet from './NoInternet';
+export default NoInternet;

package/build/components/NoInternet/style.js

@@ -0,0 +1,32 @@
+import Box from '@mui/material/Box';
+import { styled } from '@mui/material/styles';
+export const Wrapper = styled(Box)(({ theme }) => ({
+    fontSize: '10px',
+    padding: '4px 8px 4px 4px',
+    color: theme.palette.common.white,
+    borderRadius: '45px',
+    fontWeight: 500,
+    background: 'var(--Garident---Checkout, linear-gradient(254deg, #101010 0.51%, #343740 49.67%, #101010 100%))',
+    boxShadow: '0px 14px 4px 0px rgba(0, 0, 0, 0.00), 0px 9px 4px 0px rgba(0, 0, 0, 0.01), 0px 5px 3px 0px rgba(0, 0, 0, 0.05), 0px 2px 2px 0px rgba(0, 0, 0, 0.09), 0px 1px 1px 0px rgba(0, 0, 0, 0.10)',
+    display: 'flex',
+    gap: '6px',
+    alignItems: 'center',
+    height: 30,
+}));
+export const Container = styled(Box)(() => ({
+    position: 'fixed',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    top: '15px',
+}));
+export const ImageWrapper = styled(Box)(({ theme }) => ({
+    borderRadius: '13px',
+    background: theme.palette.common.white,
+    boxShadow: '0px 14px 4px 0px rgba(0, 0, 0, 0.00), 0px 9px 4px 0px rgba(0, 0, 0, 0.01), 0px 5px 3px 0px rgba(0, 0, 0, 0.05), 0px 2px 2px 0px rgba(0, 0, 0, 0.09), 0px 1px 1px 0px rgba(0, 0, 0, 0.10)',
+    width: 22,
+    height: 22,
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+}));