@tap-payments/os-micro-frontend-shared 0.0.183 → 0.0.185

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

@@ -0,0 +1,5 @@
+import MultiSelectWithSearch from './MultiSelectWithSearch';
+export * from './ChildMenuItem';
+export * from './ParentMenuItem';
+export type { MultiSelectWithSearchProps } from './type';
+export default MultiSelectWithSearch;

package/build/components/MultiSelectWithSearch/index.js

@@ -0,0 +1,4 @@
+import MultiSelectWithSearch from './MultiSelectWithSearch';
+export * from './ChildMenuItem';
+export * from './ParentMenuItem';
+export default MultiSelectWithSearch;

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

@@ -0,0 +1,36 @@
+/// <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" | "textAlign" | "className" | "style" | "classes" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "color" | "zIndex" | "position" | "boxShadow" | "maxWidth" | "minWidth" | "maxHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "p" | "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" | "textTransform" | "children" | "sx" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "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" | "textAlign" | "className" | "style" | "classes" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "color" | "zIndex" | "position" | "boxShadow" | "maxWidth" | "minWidth" | "maxHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "p" | "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" | "textTransform" | "children" | "sx" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "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"> & {
+    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 InputStyled: import("@emotion/styled").StyledComponent<import("@mui/material/Input").InputProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const CheckboxStyled: import("@emotion/styled").StyledComponent<import("@mui/material").CheckboxProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+export declare const Container: 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 SelectedBadgesWrapper: 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 SelectedBadge: 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> & {
+    maxWidth?: number | undefined;
+}, {}, {}>;
+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" | "textAlign" | "className" | "style" | "classes" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "color" | "zIndex" | "position" | "boxShadow" | "maxWidth" | "minWidth" | "maxHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "p" | "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" | "textTransform" | "children" | "sx" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "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"> & {
+    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 ArrowIcon: import("@mui/types").OverridableComponent<import("@mui/system").BoxTypeMap<{}, "div", import("@mui/material/styles").Theme>>;

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

@@ -0,0 +1,19 @@
+export interface Option {
+    label: string;
+    value: string;
+}
+export interface MultiSelectWithSearchProps {
+    nestedOptions: {
+        options: {
+            label: string;
+            options: Option[];
+        }[];
+        label: string;
+    }[];
+    onChangeOptions: (options: Option[]) => void;
+    selectedOptions?: Option[];
+    placeholder?: string | null;
+    isLoading?: boolean;
+    searchBy?: string[];
+    disabled?: boolean;
+}

package/build/components/MultiSelectWithSearch/type.js

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

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

@@ -0,0 +1,2 @@
+import { MultiSelectWithSearchProps } from './type';
+export declare const filterOptions: (parentOptions: MultiSelectWithSearchProps['nestedOptions'], searchValue: string, searchBy: string[]) => MultiSelectWithSearchProps['nestedOptions'];

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

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { DropdownProps } from './types';
+declare function Dropdown({ title, menuItems, onChildrenChange, onSelect, className, updatedList, footer, placement, ...props }: DropdownProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof Dropdown>;
+export default _default;

package/build/components/NestedDropdown/Dropdown.js

@@ -0,0 +1,57 @@
+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);
+            setList(newList);
+            if (updatedList)
+                updatedList(newList);
+            if (onChildrenChange)
+                onChildrenChange(newList);
+            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 }) => {
+                        setSelected({ name, selected });
+                    }, onSelect: (selectedChildren) => {
+                        if (onSelect)
+                            onSelect(selectedChildren);
+                    }, placement: placement }, item), `${item.name}`))) }), footer && footer] })));
+}
+export default memo(Dropdown);

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

@@ -0,0 +1,16 @@
+import { type ReactElement } from 'react';
+import type { BoxProps } from '@mui/material/Box';
+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;
+}
+declare function NestedDropdown({ title, menuItems, onClose, onSelect, updatedList, placement, ...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

@@ -0,0 +1,38 @@
+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, useState } from 'react';
+import Dropdown from './Dropdown';
+function NestedDropdown(_a) {
+    var { title, menuItems, onClose, onSelect, updatedList, placement = 'right' } = _a, props = __rest(_a, ["title", "menuItems", "onClose", "onSelect", "updatedList", "placement"]);
+    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.d.ts

@@ -0,0 +1,16 @@
+/// <reference types="react" />
+import type { ColumnViewProps } from '../../types/index.js';
+import type { Placement, Selected } from './types';
+interface MenuItemProps extends ColumnViewProps {
+    setSelected: ({ name, selected }: {
+        name: string;
+        selected: boolean;
+    }) => void;
+    onSelect: (x: Selected[], parentName: string) => void;
+    displayChildrenCount?: boolean;
+    disabled?: boolean;
+    placement?: Placement;
+}
+declare function MenuItem({ label, icon, name, menuItems, setSelected, onSelect, selected, displayChildrenCount, disabled, placement, }: MenuItemProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: import("react").MemoExoticComponent<typeof MenuItem>;
+export default _default;

package/build/components/NestedDropdown/NestedMenuItem.js

@@ -0,0 +1,50 @@
+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', }) {
+    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({}, ((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) => {
+                        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.d.ts

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

@@ -0,0 +1,5 @@
+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.d.ts

@@ -0,0 +1,36 @@
+/// <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" | "textAlign" | "className" | "style" | "classes" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "color" | "zIndex" | "position" | "boxShadow" | "maxWidth" | "minWidth" | "maxHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "p" | "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" | "textTransform" | "children" | "sx" | "variant" | "align" | "gutterBottom" | "noWrap" | "paragraph" | "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"> & {
+    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> & {
+    disabled?: boolean | undefined;
+}, {}, {}>;
+export declare const DropdownStyled: 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>, {}, {}>;
+export declare const Label: 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>, {}, {}>;
+export declare const CheckboxStyled: import("@emotion/styled").StyledComponent<import("@mui/material").CheckboxProps & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const ContentWrapper: 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>, {}, {}>;
+export declare const Content: 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>, {}, {}>;
+export declare const Counter: 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>, {}, {}>;
+export declare const CountingInfo: 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>, {}, {}>;
+export declare const ListWrapper: 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>, {}, {}>;
+export declare const HeaderWrapper: 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>, {}, {}>;

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

@@ -0,0 +1,18 @@
+import type { ColumnViewProps } from '../../types/index.js';
+import type { ReactElement } from 'react';
+export type Placement = 'left' | 'right';
+export interface Selected {
+    name: string;
+    selected: boolean;
+}
+export interface DropdownProps {
+    title?: string;
+    menuItems?: ColumnViewProps[];
+    setSelected?: ({ name, selected }: Selected) => void;
+    onChildrenChange?: (x: ColumnViewProps[]) => void;
+    onSelect?: (x: Selected[]) => void;
+    className?: string;
+    updatedList?: (menuItems: ColumnViewProps[]) => void;
+    footer?: ReactElement;
+    placement?: Placement;
+}

package/build/components/NestedDropdown/types.js

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

package/build/components/NoInternet/NoInternet.d.ts

@@ -0,0 +1,5 @@
+interface NoInternetProps {
+    title: string;
+}
+export default function NoInternet({ title }: NoInternetProps): import("react/jsx-runtime").JSX.Element;
+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 })] }) }));
+}