@sbcrmweb/sbcrmweb-tma-core 0.0.59

package/dist/components/TMABarChart/TMABarChart.js

@@ -0,0 +1,91 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { commonColors, typography } from '../../theme';
+import { BarPlot, ChartsClipPath, ChartsXAxis, ChartsYAxis, ResponsiveChartContainer, } from '@mui/x-charts';
+import { NoSsr } from '@mui/material';
+import { ItemTooltip } from './ItemTooltip';
+import Box from '@mui/material/Box';
+const formatNumberToK = (value) => {
+    if (value >= 1000) {
+        return `${value / 1000}K`;
+    }
+    return value.toString();
+};
+export const TMABarChart = (props) => {
+    const { xTickLabels, data, tooltipSuffix, width = 400, height = 300, fullWidth, } = props;
+    const [tooltipData, setTooltipData] = useState(null);
+    const [selectedBarIndex, setSelectedBarIndex] = useState(null);
+    const chartRef = useRef(null);
+    const handleCloseTooltip = () => {
+        setTooltipData(null);
+        setSelectedBarIndex(null);
+    };
+    const handleToggleTooltip = (event, itemIdentifier) => {
+        event.preventDefault();
+        if (Number(tooltipData?.id) === itemIdentifier.dataIndex) {
+            handleCloseTooltip();
+            return;
+        }
+        setSelectedBarIndex(itemIdentifier.dataIndex);
+        let x = event.clientX;
+        let y = event.clientY;
+        const isFirst = itemIdentifier.dataIndex === 0;
+        const isLast = itemIdentifier.dataIndex === data.length - 1;
+        if (chartRef.current) {
+            const bars = chartRef.current.querySelectorAll('.MuiBarElement-root');
+            const bar = bars?.[itemIdentifier.dataIndex];
+            if (bar) {
+                const rect = bar.getBoundingClientRect();
+                x =
+                    rect.left + rect.width / 2 + (isFirst ? -15 : 0) + (isLast ? 15 : 0);
+                y = rect.top - 5;
+            }
+        }
+        setTooltipData({
+            value: `${data[itemIdentifier.dataIndex]}${tooltipSuffix ? ` ${tooltipSuffix}` : ''}`,
+            position: { x, y },
+            id: itemIdentifier.dataIndex,
+            isFirst,
+            isLast,
+        });
+    };
+    useEffect(() => {
+        window.addEventListener('scroll', handleCloseTooltip);
+        return () => {
+            window.removeEventListener('scroll', handleCloseTooltip);
+        };
+    }, []);
+    const barColors = useMemo(() => data.map((_, index) => selectedBarIndex === index
+        ? commonColors.accent_text_color.light
+        : commonColors.section_header_text_color.light), [selectedBarIndex, data]);
+    const clipPathId = `${React.useId()}-clip-path`;
+    return (_jsx(NoSsr, { children: _jsx(Box, { onScroll: handleCloseTooltip, width: fullWidth ? '100%' : width, children: _jsxs(ResponsiveChartContainer, { height: height, margin: { bottom: 35, left: 40, right: 35, top: 35 }, ref: chartRef, xAxis: [
+                    {
+                        scaleType: 'band',
+                        tickLabelStyle: {
+                            angle: -90,
+                            position: 'absolute',
+                            textAnchor: 'end',
+                            ...typography.caption2Regular,
+                        },
+                        data: xTickLabels,
+                        colorMap: {
+                            type: 'ordinal',
+                            colors: barColors,
+                        },
+                    },
+                ], yAxis: [
+                    {
+                        valueFormatter: (value) => formatNumberToK(value),
+                        tickLabelStyle: {
+                            ...typography.caption1Regular,
+                        },
+                    },
+                ], series: [
+                    {
+                        type: 'bar',
+                        data,
+                    },
+                ], children: [_jsx(ChartsClipPath, { id: clipPathId }), _jsx("g", { clipPath: clipPathId, children: _jsx(BarPlot, { onItemClick: handleToggleTooltip, borderRadius: 2 }) }), _jsx(ChartsXAxis, { disableTicks: true, disableLine: true }), _jsx(ChartsYAxis, { disableTicks: true, disableLine: true }), tooltipData && _jsx(ItemTooltip, { ...(tooltipData || {}) })] }) }) }));
+};

package/dist/components/TMABaseSection/TMABaseSection.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { ContainerProps } from '@mui/material/Container';
+export interface TMABaseSectionProps extends ContainerProps {
+    children: React.ReactNode;
+}
+export declare const TMABaseSection: ({ children, sx, ...props }: TMABaseSectionProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TMABaseSection.d.ts.map

package/dist/components/TMABaseSection/TMABaseSection.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TMABaseSection.d.ts","sourceRoot":"","sources":["../../../src/components/TMABaseSection/TMABaseSection.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAkB,EAAE,cAAc,EAAE,MAAM,yBAAyB,CAAC;AAEpE,MAAM,WAAW,mBAAoB,SAAQ,cAAc;IACzD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;CAC3B;AAED,eAAO,MAAM,cAAc,+BAIxB,mBAAmB,4CAerB,CAAC"}

package/dist/components/TMABaseSection/TMABaseSection.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Container from '@mui/material/Container';
+export const TMABaseSection = ({ children, sx, ...props }) => {
+    return (_jsx(Container, { sx: {
+            pt: 0,
+            pb: 4,
+            bgcolor: 'secondary_bg_color.main',
+            minHeight: '100dvh',
+            ...sx,
+        }, ...props, children: children }));
+};

package/dist/components/TMACell/TMACell.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { LinkProps } from '@mui/material/Link';
+export interface TMACellProps {
+    title: string;
+    href: string;
+    LinkComponent?: LinkProps['component'];
+    image?: string;
+    imageComponent?: React.ReactNode;
+    shouldOpenInBlank?: boolean;
+}
+export declare const TMACell: ({ title, href, LinkComponent, image, imageComponent, shouldOpenInBlank, }: TMACellProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TMACell.d.ts.map

package/dist/components/TMACell/TMACell.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TMACell.d.ts","sourceRoot":"","sources":["../../../src/components/TMACell/TMACell.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAa,EAAE,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAOrD,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,EAAE,MAAM,CAAC;IACb,aAAa,CAAC,EAAE,SAAS,CAAC,WAAW,CAAC,CAAC;IACvC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,cAAc,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACjC,iBAAiB,CAAC,EAAE,OAAO,CAAC;CAC7B;AAED,eAAO,MAAM,OAAO,8EAOjB,YAAY,4CAoBd,CAAC"}

package/dist/components/TMACell/TMACell.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Stack from '@mui/material/Stack';
+import Link from '@mui/material/Link';
+import Typography from '@mui/material/Typography';
+import ChevronRight from '@mui/icons-material/ChevronRight';
+import Box from '@mui/material/Box';
+import { BASE_SPACING } from '../../theme';
+import Image from 'next/image';
+export const TMACell = ({ title, href, LinkComponent, image, imageComponent, shouldOpenInBlank, }) => {
+    return (_jsx(Link, { sx: { bgcolor: 'bg_color.main', p: 12 / BASE_SPACING }, href: href, target: shouldOpenInBlank ? '_blank' : '_self', ...(LinkComponent ? { component: LinkComponent } : {}), children: _jsxs(Stack, { gap: 2, direction: "row", alignItems: "center", children: [_jsxs(Box, { sx: { width: 28, height: 28, position: 'relative' }, children: [image && _jsx(Image, { src: image, alt: title, fill: true }), imageComponent] }), _jsx(Typography, { color: "text_color", flex: 1, variant: "textRegular", children: title }), _jsx(ChevronRight, { color: "hint_color" })] }) }));
+};

package/dist/components/TMACellList/TMACellList.d.ts

@@ -0,0 +1,6 @@
+import { TMACellProps } from '../TMACell/TMACell';
+export interface TMACellListProps {
+    cells: TMACellProps[];
+}
+export declare const TMACellList: ({ cells }: TMACellListProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TMACellList.d.ts.map

package/dist/components/TMACellList/TMACellList.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TMACellList.d.ts","sourceRoot":"","sources":["../../../src/components/TMACellList/TMACellList.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAW,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAI3D,MAAM,WAAW,gBAAgB;IAC/B,KAAK,EAAE,YAAY,EAAE,CAAC;CACvB;AAED,eAAO,MAAM,WAAW,cAAe,gBAAgB,4CActD,CAAC"}

package/dist/components/TMACellList/TMACellList.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import Stack from '@mui/material/Stack';
+import { TMACell } from '../TMACell/TMACell';
+import Divider from '@mui/material/Divider';
+import { BASE_SPACING } from '../../theme';
+export const TMACellList = ({ cells }) => {
+    return (_jsx(Stack, { sx: {
+            borderRadius: 3,
+            overflow: 'hidden',
+        }, divider: _jsx(Divider, { sx: { ml: 7, mr: 2, mt: -1 / BASE_SPACING } }), children: cells.map((cell, index) => (_jsx(TMACell, { ...cell }, index))) }));
+};

package/dist/components/TMACheckbox/TMACheckbox.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { CheckboxProps } from '@mui/material';
+export type TMACheckboxProps = CheckboxProps & {
+    label?: string;
+};
+export declare const TMACheckbox: (props: TMACheckboxProps) => React.ReactElement;
+//# sourceMappingURL=TMACheckbox.d.ts.map

package/dist/components/TMACheckbox/TMACheckbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TMACheckbox.d.ts","sourceRoot":"","sources":["../../../src/components/TMACheckbox/TMACheckbox.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAEL,aAAa,EAGd,MAAM,eAAe,CAAC;AAEvB,MAAM,MAAM,gBAAgB,GAAG,aAAa,GAAG;IAC7C,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AAuBF,eAAO,MAAM,WAAW,UAAW,gBAAgB,KAAG,KAAK,CAAC,YAU3D,CAAC"}

package/dist/components/TMACheckbox/TMACheckbox.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Checkbox, FormControl, FormControlLabel, } from '@mui/material';
+const svgIcon = (_jsxs("svg", { width: "24", height: "24", viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M7.8 0H12.2C14.8118 0 16.1176 0 17.1289 0.475865C18.1817 0.971267 19.0287 1.81832 19.5241 2.8711C20 3.88237 20 5.18824 20 7.8V12.2C20 14.8118 20 16.1176 19.5241 17.1289C19.0287 18.1817 18.1817 19.0287 17.1289 19.5241C16.1176 20 14.8118 20 12.2 20H7.8C5.18824 20 3.88237 20 2.8711 19.5241C1.81832 19.0287 0.971267 18.1817 0.475865 17.1289C0 16.1176 0 14.8118 0 12.2V7.8C0 5.18824 0 3.88237 0.475865 2.8711C0.971267 1.81832 1.81832 0.971267 2.8711 0.475865C3.88237 0 5.18824 0 7.8 0Z", fill: "#2990FF" }), _jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M15.7071 7.45711C16.0976 7.06658 16.0976 6.43342 15.7071 6.04289C15.3166 5.65237 14.6834 5.65237 14.2929 6.04289L8 12.3358L5.70711 10.0429C5.31658 9.65237 4.68342 9.65237 4.29289 10.0429C3.90237 10.4334 3.90237 11.0666 4.29289 11.4571L7.29289 14.4571C7.68342 14.8476 8.31658 14.8476 8.70711 14.4571L15.7071 7.45711Z", fill: "white" })] }));
+export const TMACheckbox = (props) => {
+    const { label, ...checkBoxProps } = props;
+    return (_jsx(FormControl, { children: _jsx(FormControlLabel, { control: _jsx(Checkbox, { checkedIcon: svgIcon, ...checkBoxProps }), label: label }) }));
+};

package/dist/components/TMACounter/TMACountInput.d.ts

@@ -0,0 +1,9 @@
+import { InputBaseProps } from '@mui/material';
+export interface TMACountInputProps extends Omit<InputBaseProps, 'onBlur' | 'onChange'> {
+    onBlur: (value: number) => void;
+    onChange: (value: number) => void;
+    value?: number;
+}
+declare const TMACountInput: ({ onBlur, onChange, value, sx, ...props }: TMACountInputProps) => import("react/jsx-runtime").JSX.Element;
+export default TMACountInput;
+//# sourceMappingURL=TMACountInput.d.ts.map

package/dist/components/TMACounter/TMACountInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TMACountInput.d.ts","sourceRoot":"","sources":["../../../src/components/TMACounter/TMACountInput.tsx"],"names":[],"mappings":"AACA,OAAO,EAAa,cAAc,EAAE,MAAM,eAAe,CAAC;AAG1D,MAAM,WAAW,kBACf,SAAQ,IAAI,CAAC,cAAc,EAAE,QAAQ,GAAG,UAAU,CAAC;IACnD,MAAM,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,QAAA,MAAM,aAAa,8CAMhB,kBAAkB,4CA8CpB,CAAC;AAEF,eAAe,aAAa,CAAC"}

package/dist/components/TMACounter/TMACountInput.js

@@ -0,0 +1,34 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { InputBase } from '@mui/material';
+import { useState } from 'react';
+const TMACountInput = ({ onBlur, onChange, value, sx, ...props }) => {
+    const [shouldSkipChange, setShouldSkipChange] = useState(false);
+    const handleKeyDown = (event) => {
+        if (!['Backspace', 'Escape', 'Delete', 'ArrowLeft', 'ArrowRight'].includes(event.key) &&
+            !/[0-9]/.test(event.key)) {
+            event.preventDefault();
+        }
+        if (event.key === 'Enter') {
+            onBlur(Number(value));
+        }
+        setShouldSkipChange(true);
+    };
+    const handleBlur = (event) => {
+        onBlur(Number(event.target.value));
+        setShouldSkipChange(false);
+    };
+    const handleChange = (event) => {
+        onChange(Number(event.target.value));
+        if (shouldSkipChange) {
+            event.preventDefault();
+        }
+    };
+    return (_jsx(InputBase, { sx: { minWidth: 28, maxWidth: 68, ...sx }, inputProps: {
+            sx: {
+                textAlign: 'center',
+            },
+            onBlur: handleBlur,
+        }, ...props, onChange: handleChange, onKeyDown: handleKeyDown, value: value }));
+};
+export default TMACountInput;

package/dist/components/TMACounter/TMACounter.d.ts

@@ -0,0 +1,11 @@
+import { SxProps, Theme } from '@mui/material/styles';
+export interface TMACounterProps {
+    onLeave: (value: number) => void;
+    onChange: (value: number) => void;
+    initialValue?: number;
+    hasError?: boolean;
+    sx?: SxProps<Theme>;
+    disabled?: boolean;
+}
+export declare const TMACounter: ({ onLeave, onChange, initialValue, hasError, sx, disabled, }: TMACounterProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TMACounter.d.ts.map

package/dist/components/TMACounter/TMACounter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TMACounter.d.ts","sourceRoot":"","sources":["../../../src/components/TMACounter/TMACounter.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,EAAE,KAAK,EAAY,MAAM,sBAAsB,CAAC;AAOhE,MAAM,WAAW,eAAe;IAC9B,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,OAAO,CAAC,KAAK,CAAC,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,eAAO,MAAM,UAAU,iEAOpB,eAAe,4CAqDjB,CAAC"}

package/dist/components/TMACounter/TMACounter.js

@@ -0,0 +1,26 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from 'react';
+import { useTheme } from '@mui/material/styles';
+import IconButton from '@mui/material/IconButton';
+import Stack from '@mui/material/Stack';
+import RemoveRounded from '@mui/icons-material/RemoveRounded';
+import AddRounded from '@mui/icons-material/AddRounded';
+import TMACountInput from './TMACountInput';
+export const TMACounter = ({ onLeave, onChange, initialValue, hasError, sx = {}, disabled = false, }) => {
+    const theme = useTheme();
+    const [count, setCount] = useState(initialValue || 0);
+    const handleBlur = (value) => {
+        onLeave(value);
+    };
+    const handleChange = (value) => {
+        setCount(value);
+        onChange(value);
+    };
+    return (_jsxs(Stack, { direction: "row", sx: {
+            bgcolor: 'secondary_fill.main',
+            borderRadius: 3,
+            border: hasError ? `1.5px solid ${theme.palette.destructive_text_color.main}` : undefined,
+            ...sx
+        }, children: [_jsx(IconButton, { color: "link_color", disableRipple: true, size: "large", onClick: () => (count >= 1 ? handleChange(count - 1) : null), disabled: disabled, children: _jsx(RemoveRounded, {}) }), _jsx(TMACountInput, { sx: { color: 'link_color.main', typography: 'subtitle2Semibold' }, value: count, fullWidth: true, onBlur: handleBlur, onChange: handleChange, disabled: disabled }), _jsx(IconButton, { color: "link_color", disableRipple: true, size: "large", onClick: () => handleChange(count + 1), disabled: disabled, children: _jsx(AddRounded, {}) })] }));
+};

package/dist/components/TMADrawerFilter/TMADrawerFilter.d.ts

@@ -0,0 +1,29 @@
+import { CSSProperties, ReactNode } from 'react';
+import { DrawerProps } from '@mui/material/Drawer';
+import { PaperProps } from '@mui/material/Paper';
+import { TypographyProps } from '@mui/material/Typography';
+type FilterOption = {
+    label: string;
+    value: string;
+};
+export interface TMADrawerFilterProps {
+    open: boolean;
+    onClose: () => void;
+    title: string;
+    values: FilterOption[];
+    value: string;
+    onChange: (value: string) => void;
+    emptyValue?: FilterOption;
+    anchor?: DrawerProps['anchor'];
+    paperProps?: PaperProps;
+    titleVariant?: TypographyProps['variant'];
+    titleColor?: TypographyProps['color'];
+    CheckedIcon?: ReactNode;
+    UncheckedIcon?: ReactNode;
+    checkedIconColor?: CSSProperties['color'];
+    uncheckedIconColor?: CSSProperties['color'];
+    noUncheckedIcon?: boolean;
+}
+export declare const TMADrawerFilter: ({ open, onClose, title, values, value, onChange, emptyValue, titleColor, CheckedIcon, UncheckedIcon, noUncheckedIcon, anchor, paperProps, titleVariant, checkedIconColor, uncheckedIconColor, }: TMADrawerFilterProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=TMADrawerFilter.d.ts.map

package/dist/components/TMADrawerFilter/TMADrawerFilter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TMADrawerFilter.d.ts","sourceRoot":"","sources":["../../../src/components/TMADrawerFilter/TMADrawerFilter.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,aAAa,EAAE,SAAS,EAAuB,MAAM,OAAO,CAAC;AAEtE,OAAe,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAE3D,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAmB,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAKvE,KAAK,YAAY,GAAG;IAClB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AAEF,MAAM,WAAW,oBAAoB;IACnC,IAAI,EAAE,OAAO,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,MAAM,EAAE,YAAY,EAAE,CAAC;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,UAAU,CAAC,EAAE,YAAY,CAAC;IAC1B,MAAM,CAAC,EAAE,WAAW,CAAC,QAAQ,CAAC,CAAC;IAC/B,UAAU,CAAC,EAAE,UAAU,CAAC;IACxB,YAAY,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IAC1C,UAAU,CAAC,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;IACtC,WAAW,CAAC,EAAE,SAAS,CAAC;IACxB,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,gBAAgB,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC1C,kBAAkB,CAAC,EAAE,aAAa,CAAC,OAAO,CAAC,CAAC;IAC5C,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AAED,eAAO,MAAM,eAAe,oMAiBzB,oBAAoB,4CAoEtB,CAAC"}

package/dist/components/TMADrawerFilter/TMADrawerFilter.js

@@ -0,0 +1,40 @@
+'use client';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from 'react';
+import Divider from '@mui/material/Divider';
+import Drawer from '@mui/material/Drawer';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+import RadioButtonCheckedIcon from '@mui/icons-material/RadioButtonChecked';
+import RadioButtonUncheckedIcon from '@mui/icons-material/RadioButtonUnchecked';
+export const TMADrawerFilter = ({ open, onClose, title, values, value, onChange, emptyValue, titleColor, CheckedIcon, UncheckedIcon, noUncheckedIcon, anchor = 'top', paperProps = {}, titleVariant = 'subheadline1Semibold', checkedIconColor = 'link_color.main', uncheckedIconColor = 'secondary_hint_color.main', }) => {
+    const [filterOptions, setFilterOptions] = useState([]);
+    useEffect(() => {
+        setFilterOptions([emptyValue, ...values]);
+    }, [emptyValue, values]);
+    const getIcon = (isChecked) => {
+        if (isChecked) {
+            return CheckedIcon ?? (_jsx(RadioButtonCheckedIcon, { sx: { ...(checkedIconColor && { color: checkedIconColor }) } }));
+        }
+        if (!noUncheckedIcon) {
+            return UncheckedIcon ?? _jsx(RadioButtonUncheckedIcon, { sx: { ...(uncheckedIconColor && { color: uncheckedIconColor }) } });
+        }
+        return _jsx(_Fragment, {});
+    };
+    return (_jsxs(Drawer, { open: open, onClose: onClose, anchor: anchor, slotProps: {
+            paper: {
+                variant: 'outlined',
+                ...paperProps,
+            }
+        }, children: [_jsx(Typography, { variant: titleVariant, px: 2, py: 1.5, ...(titleColor && { color: titleColor }), children: title }), _jsx(Stack, { children: filterOptions?.map((element, index, all) => {
+                    const isChecked = element?.value === value;
+                    const Icon = getIcon(isChecked);
+                    return [
+                        _jsxs(Stack, { direction: "row", justifyContent: "space-between", px: 2, py: 1.5, onClick: () => {
+                                onChange(element?.value || '');
+                                onClose();
+                            }, children: [_jsx(Typography, { variant: "textRegular", children: element?.label }), Icon] }, element?.value),
+                        (index < all.length - 1) && (_jsx(Divider, { flexItem: true, sx: { mx: 2 } }))
+                    ];
+                }) })] }));
+};

package/dist/components/TMADrawerFilter/TMARightDrawerFilter.d.ts

@@ -0,0 +1,4 @@
+import { TMADrawerFilterProps } from "./TMADrawerFilter";
+export type TMARightDrawerFilterProps = Pick<TMADrawerFilterProps, 'open' | 'onClose' | 'title' | 'values' | 'value' | 'onChange' | 'emptyValue'>;
+export declare const TMARightDrawerFilter: (props: TMARightDrawerFilterProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TMARightDrawerFilter.d.ts.map

package/dist/components/TMADrawerFilter/TMARightDrawerFilter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TMARightDrawerFilter.d.ts","sourceRoot":"","sources":["../../../src/components/TMADrawerFilter/TMARightDrawerFilter.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAmB,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAE1E,MAAM,MAAM,yBAAyB,GAAG,IAAI,CAC1C,oBAAoB,EACpB,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU,GAAG,YAAY,CAC9E,CAAC;AACF,eAAO,MAAM,oBAAoB,UAAW,yBAAyB,4CAcpE,CAAC"}

package/dist/components/TMADrawerFilter/TMARightDrawerFilter.js

@@ -0,0 +1,8 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TMADrawerFilter } from "./TMADrawerFilter";
+export const TMARightDrawerFilter = (props) => (_jsx(TMADrawerFilter, { ...props, anchor: "right", paperProps: {
+        sx: {
+            width: '66%',
+            borderRadius: '0!important',
+        }
+    }, titleVariant: "subheadline2Regular", titleColor: "subtitle_text_color", noUncheckedIcon: true }));

package/dist/components/TMADrawerFilter/TMATopDrawerFilter.d.ts

@@ -0,0 +1,4 @@
+import { TMADrawerFilterProps } from "./TMADrawerFilter";
+export type TMATopDrawerFilterProps = Pick<TMADrawerFilterProps, 'open' | 'onClose' | 'title' | 'values' | 'value' | 'onChange' | 'emptyValue'>;
+export declare const TMATopDrawerFilter: (props: TMATopDrawerFilterProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TMATopDrawerFilter.d.ts.map

package/dist/components/TMADrawerFilter/TMATopDrawerFilter.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TMATopDrawerFilter.d.ts","sourceRoot":"","sources":["../../../src/components/TMADrawerFilter/TMATopDrawerFilter.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAmB,oBAAoB,EAAE,MAAM,mBAAmB,CAAC;AAE1E,MAAM,MAAM,uBAAuB,GAAG,IAAI,CACxC,oBAAoB,EACpB,MAAM,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,UAAU,GAAG,YAAY,CAC9E,CAAC;AACF,eAAO,MAAM,kBAAkB,UAAW,uBAAuB,4CAShE,CAAC"}

package/dist/components/TMADrawerFilter/TMATopDrawerFilter.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { TMADrawerFilter } from "./TMADrawerFilter";
+export const TMATopDrawerFilter = (props) => (_jsx(TMADrawerFilter, { ...props, paperProps: {
+        sx: {
+            height: 'auto',
+        }
+    } }));

package/dist/components/TMADrawerHeader/TMADrawerHeader.d.ts

@@ -0,0 +1,6 @@
+export interface DrawerHeaderProps {
+    title: string;
+    onClose: () => void;
+}
+export declare const TMADrawerHeader: ({ title, onClose }: DrawerHeaderProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=TMADrawerHeader.d.ts.map

package/dist/components/TMADrawerHeader/TMADrawerHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TMADrawerHeader.d.ts","sourceRoot":"","sources":["../../../src/components/TMADrawerHeader/TMADrawerHeader.tsx"],"names":[],"mappings":"AAMA,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,eAAe,uBAAwB,iBAAiB,4CA+BpE,CAAC"}

package/dist/components/TMADrawerHeader/TMADrawerHeader.js

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Typography from "@mui/material/Typography";
+import Stack from "@mui/material/Stack";
+import CloseIcon from "@mui/icons-material/CloseRounded";
+import IconButton from "@mui/material/IconButton";
+import { BASE_SPACING } from '../../theme';
+export const TMADrawerHeader = ({ title, onClose }) => {
+    return (_jsxs(Stack, { direction: "row", justifyContent: "center", alignItems: "center", py: 2, px: 5, children: [_jsx(Typography, { variant: "textSemibold", children: title }), _jsx(IconButton, { onClick: onClose, sx: {
+                    position: 'absolute',
+                    right: BASE_SPACING * 2,
+                    top: BASE_SPACING * 2,
+                    width: 28,
+                    height: 28,
+                    backgroundColor: 'plain_background.main',
+                    borderRadius: 100,
+                    '& svg': {
+                        width: 20,
+                        height: 20,
+                        color: 'plain_foreground.main'
+                    }
+                }, children: _jsx(CloseIcon, {}) })] }));
+};

package/dist/components/TMALoadable/TMALoadable.d.ts

@@ -0,0 +1,15 @@
+import { ReactNode } from 'react';
+import { SxProps } from '@mui/material/styles';
+import { TypographyProps } from '@mui/material/Typography';
+export interface TMALoadableProps {
+    children: React.ReactNode;
+    isLoading?: boolean;
+    sx?: SxProps;
+    size?: string | number;
+    title?: string;
+    titleVariant?: TypographyProps['variant'];
+    isFullHeight?: boolean;
+    fallback?: ReactNode;
+}
+export declare const TMALoadable: ({ children, isLoading, title, size, sx, titleVariant, isFullHeight, fallback, }: TMALoadableProps) => string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react/jsx-runtime").JSX.Element | null | undefined;
+//# sourceMappingURL=TMALoadable.d.ts.map

package/dist/components/TMALoadable/TMALoadable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TMALoadable.d.ts","sourceRoot":"","sources":["../../../src/components/TMALoadable/TMALoadable.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAClC,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAG/C,OAAmB,EAAE,eAAe,EAAE,MAAM,0BAA0B,CAAC;AAEvE,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,EAAE,CAAC,EAAE,OAAO,CAAC;IACb,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAC;IAC1C,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,SAAS,CAAC;CACtB;AAED,eAAO,MAAM,WAAW,oFASrB,gBAAgB,4UAsBlB,CAAA"}

package/dist/components/TMALoadable/TMALoadable.js

@@ -0,0 +1,18 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import CircularProgress from '@mui/material/CircularProgress';
+import Stack from '@mui/material/Stack';
+import Typography from '@mui/material/Typography';
+export const TMALoadable = ({ children, isLoading, title, size = 36, sx = {}, titleVariant = 'subheadline2Regular', isFullHeight = true, fallback, }) => {
+    if (isLoading) {
+        return fallback ?? (_jsxs(Stack, { sx: {
+                rowGap: 3,
+                alignItems: 'center',
+                justifyContent: 'center',
+                width: '100%',
+                ...(isFullHeight && { height: '99vh' }),
+                ...sx,
+            }, children: [_jsx(CircularProgress, { size: size }), title && (_jsx(Typography, { variant: titleVariant, children: title }))] }));
+    }
+    return children;
+};

package/dist/components/TMAMultiSelectWithTags/TMAMultiSelectWithTags.d.ts

@@ -0,0 +1,34 @@
+import { type SyntheticEvent } from 'react';
+import { FilterOptionsState } from '@mui/material';
+declare enum TMAMultiSelectWithTagsVariants {
+    DEFAULT = "default",
+    DOWN_TAGS = "downTags"
+}
+export interface TMAMultiSelectWithTagsProps {
+    options: {
+        label: string;
+        value: string;
+    }[];
+    defaultValue: string | string[];
+    placeholder: string;
+    label: string;
+    onChange: (value: string | string[]) => void;
+    onInputChange?: (event: SyntheticEvent, value: string, reason?: string) => void;
+    error?: boolean;
+    disabled?: boolean;
+    variant?: `${TMAMultiSelectWithTagsVariants}`;
+    isExpandIconNeed?: boolean;
+    isWritable?: boolean;
+    selectedOptions?: string | string[];
+    inputValue?: string;
+    isMultiple?: boolean;
+    filterOptions?: (options: unknown[], state: FilterOptionsState<unknown>) => unknown[];
+}
+export declare const StyledAutocomplete: import("@emotion/styled").StyledComponent<import("@mui/material").AutocompleteProps<unknown, boolean | undefined, boolean | undefined, boolean | undefined, import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
+    isWritable?: boolean;
+    isExpandIconNeed?: boolean;
+    variant?: `${TMAMultiSelectWithTagsVariants}`;
+}, {}, {}>;
+export declare const TMAMultiSelectWithTags: ({ options, defaultValue, placeholder, label, onChange, onInputChange, error, disabled, variant, isWritable, selectedOptions, isExpandIconNeed, inputValue, isMultiple, filterOptions, }: TMAMultiSelectWithTagsProps) => import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=TMAMultiSelectWithTags.d.ts.map

package/dist/components/TMAMultiSelectWithTags/TMAMultiSelectWithTags.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TMAMultiSelectWithTags.d.ts","sourceRoot":"","sources":["../../../src/components/TMAMultiSelectWithTags/TMAMultiSelectWithTags.tsx"],"names":[],"mappings":"AACA,OAAO,EAAgC,KAAK,cAAc,EAAE,MAAM,OAAO,CAAC;AAK1E,OAAO,EAAW,kBAAkB,EAAU,MAAM,eAAe,CAAC;AAQpE,aAAK,8BAA8B;IACjC,OAAO,YAAY;IACnB,SAAS,aAAa;CACvB;AAED,MAAM,WAAW,2BAA2B;IAC1C,OAAO,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,MAAM,CAAA;KAAE,EAAE,CAAC;IAC5C,YAAY,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IAChC,WAAW,EAAE,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,EAAE,KAAK,IAAI,CAAC;IAC7C,aAAa,CAAC,EAAE,CACd,KAAK,EAAE,cAAc,EACrB,KAAK,EAAE,MAAM,EACb,MAAM,CAAC,EAAE,MAAM,KACZ,IAAI,CAAC;IACV,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,GAAG,8BAA8B,EAAE,CAAC;IAC9C,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;IACpC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,aAAa,CAAC,EAAE,CACd,OAAO,EAAE,OAAO,EAAE,EAClB,KAAK,EAAE,kBAAkB,CAAC,OAAO,CAAC,KAC/B,OAAO,EAAE,CAAC;CAChB;AAED,eAAO,MAAM,kBAAkB;iBAChB,OAAO;uBACD,OAAO;cAChB,GAAG,8BAA8B,EAAE;UA6D9C,CAAC;AAkBF,eAAO,MAAM,sBAAsB,4LAgBhC,2BAA2B,4CAsK7B,CAAC"}