mui-design-system 0.0.21 → 0.0.23

package/dist/components/custom-auto-complete-advanced/components/RenderInput.js

@@ -1,51 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback } from 'react';
-import { CircularProgress, InputAdornment, TextField, } from '@mui/material';
-import debounce from '../../../methods/debounce';
-import InfoCircle from '../../../icons/InfoCircle';
-const RenderInput = (props) => {
-    const { params, inputMaxHeight, sx, label, loading, helperText, variant, placeholder, disabled, validation, inputLabelMode, textFieldProps, handleSearch, handleChange, } = props;
-    const debouncedSearch = useCallback(debounce((e) => {
-        if (handleSearch) {
-            handleSearch(e);
-        }
-    }, 500), [handleSearch]);
-    return (_jsx(TextField, { ...params, variant: variant, ...(inputLabelMode === 'relative' && { label: label }), helperText: validation?.message
-            ? validation?.message ?? helperText ?? ' '
-            : undefined, error: validation?.isInvalid, placeholder: placeholder, disabled: disabled, InputProps: {
-            ...params.InputProps,
-            ...(validation?.isInvalid && {
-                startAdornment: (_jsx(InputAdornment, { sx: { pl: 2, stroke: ({ palette }) => palette.error.main }, position: 'start', children: _jsx(InfoCircle, { primarycolor: 'inherit' }) })),
-            }),
-            endAdornment: (_jsxs(InputAdornment, { position: 'end', children: [loading ? _jsx(CircularProgress, { color: 'inherit', size: 20 }) : null, params.InputProps.endAdornment] })),
-        }, ...textFieldProps, onChange: (e) => {
-            debouncedSearch(e.target.value);
-            handleChange?.(e.target.value);
-        }, sx: [
-            ...(Array.isArray(sx) ? sx : [sx]),
-            {
-                ...(inputMaxHeight && {
-                    minHeight: 0,
-                    maxHeight: inputMaxHeight ?? 'unset',
-                }),
-                minWidth: 0,
-                height: '100%',
-                overflow: 'auto',
-                '& .MuiFilledInput-root': {
-                    ...(inputLabelMode === 'relative' && {
-                        alignItems: 'flex-end',
-                    }),
-                },
-                '.MuiAutocomplete-input': {
-                    padding: '0',
-                },
-                '.MuiOutlinedInput-root': {
-                    paddingY: '4px !important',
-                },
-                '.MuiAutocomplete-popupIndicator': {
-                    transition: '0.3s ease all',
-                },
-            },
-        ] }));
-};
-export default RenderInput;

package/dist/components/custom-auto-complete-advanced/components/RenderTags.d.ts

@@ -1,9 +0,0 @@
-import { TextFieldProps, AutocompleteRenderGetTagProps } from '@mui/material';
-interface IRenderTagsProps extends Omit<TextFieldProps, 'label'> {
-    getTagProps: AutocompleteRenderGetTagProps;
-    value: any[];
-    variant: 'filled' | 'outlined';
-    size: 'small' | 'medium';
-}
-declare const RenderTags: (value: IRenderTagsProps['value'], getTagProps: IRenderTagsProps['getTagProps'], variant?: IRenderTagsProps['variant'], size?: IRenderTagsProps['size']) => import("react/jsx-runtime").JSX.Element[];
-export default RenderTags;

package/dist/components/custom-auto-complete-advanced/components/RenderTags.js

@@ -1,22 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Chip, } from '@mui/material';
-import SvgAdd from '../../../icons/Add';
-const RenderTags = (value, getTagProps, variant = 'filled', size = 'medium') => value.map((option, index) => {
-    const { key, ...tagProps } = getTagProps({ index });
-    return (_jsx(Chip, { variant: variant, label: option.label, size: size, ...tagProps, deleteIcon: _jsx(SvgAdd, { style: { transform: 'rotate(45deg)' }, primarycolor: 'inherit' }), sx: {
-            border: 'none',
-            backgroundColor: 'primary.3',
-            ':hover': {
-                backgroundColor: 'primary.4',
-                cursor: 'default',
-            },
-            py: '0 !important',
-            maxHeight: size === 'small' ? 28 : 32,
-            color: 'text.primary',
-            stroke: ({ palette }) => palette.text.primary,
-            borderRadius: '999px',
-            fontSize: ({ typography }) => typography['caption3.medium'].fontSize,
-            fontWeight: ({ typography }) => typography['caption3.medium'].fontWeight,
-        } }, key));
-});
-export default RenderTags;

package/dist/components/custom-breadcrumbs/CustomBreadcrumbs.d.ts

@@ -1,17 +0,0 @@
-import { HTMLAttributes, ReactNode } from 'react';
-import { BreadcrumbsProps, LinkOwnProps } from '@mui/material';
-export interface ICustomBreadcrumbsProps {
-    separator?: ReactNode | string;
-    collapse?: boolean;
-    items: {
-        title: ReactNode | string;
-        href: string;
-    }[];
-    itemProps?: {
-        linkProps?: LinkOwnProps;
-        textProps?: HTMLAttributes<HTMLDivElement>;
-    };
-    breadCrumbProps?: BreadcrumbsProps;
-}
-declare const CustomBreadcrumbs: ({ separator, collapse, items, itemProps, breadCrumbProps, }: ICustomBreadcrumbsProps) => import("react/jsx-runtime").JSX.Element;
-export default CustomBreadcrumbs;

package/dist/components/custom-breadcrumbs/CustomBreadcrumbs.js

@@ -1,11 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Breadcrumbs, Link, } from '@mui/material';
-const CustomBreadcrumbs = ({ separator, collapse, items, itemProps, breadCrumbProps, }) => {
-    return (_jsx(Breadcrumbs, { maxItems: collapse ? 2 : undefined, separator: separator, ...breadCrumbProps, children: items.map((item, index) => (_jsx(Link, { underline: 'none', color: 'inherit', href: item.href, ...itemProps?.linkProps, children: _jsx("div", { style: {
-                    display: 'flex',
-                    alignItems: 'center',
-                    fontSize: 14,
-                    fontWeight: 400,
-                }, ...itemProps?.textProps, children: item.title }) }, index))) }));
-};
-export default CustomBreadcrumbs;

package/dist/components/custom-card/CustomHorizontalCard.d.ts

@@ -1,3 +0,0 @@
-import { CustomCardProps } from "./types";
-declare function CustomHorizontalCard({ Image, Title, Subtitle, Date, Actions, ...restProps }: CustomCardProps): import("react/jsx-runtime").JSX.Element;
-export default CustomHorizontalCard;

package/dist/components/custom-card/CustomHorizontalCard.js

@@ -1,9 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import Box from "@mui/material/Box";
-import { useTheme } from "@mui/material";
-function CustomHorizontalCard({ Image, Title, Subtitle, Date, Actions, ...restProps }) {
-    const theme = useTheme();
-    const { sx, ...props } = restProps;
-    return (_jsx(Box, { sx: { width: 350, border: `1px solid ${theme.palette.mode === "light" ? theme.palette.text[7] : theme.palette.grey[6]}`, borderRadius: 2, backgroundColor: theme.palette.background.default, overflow: 'hidden', ...restProps.sx }, ...props, children: _jsxs(Box, { sx: { display: 'flex', gap: 2 }, children: [_jsx(Box, { children: Image }), _jsxs(Box, { sx: { display: 'flex', flexDirection: 'column', width: '100%', padding: 2 }, children: [_jsxs(Box, { sx: { display: 'flex', justifyContent: 'space-between' }, children: [_jsxs(Box, { sx: { display: 'flex', flexDirection: 'column' }, children: [Title, Subtitle] }), Date] }), Actions] })] }) }));
-}
-export default CustomHorizontalCard;

package/dist/components/custom-card/CustomVerticalCard.d.ts

@@ -1,3 +0,0 @@
-import { CustomCardProps } from "./types";
-declare function CustomVerticalCard({ Image, Title, Subtitle, Date, Description, Chip, Actions, ...restProps }: CustomCardProps): import("react/jsx-runtime").JSX.Element;
-export default CustomVerticalCard;

package/dist/components/custom-card/CustomVerticalCard.js

@@ -1,9 +0,0 @@
-import { jsxs as _jsxs } from "react/jsx-runtime";
-import { useTheme } from "@mui/material";
-import Box from "@mui/material/Box";
-function CustomVerticalCard({ Image, Title, Subtitle, Date, Description, Chip, Actions, ...restProps }) {
-    const theme = useTheme();
-    const { sx, ...props } = restProps;
-    return (_jsxs(Box, { sx: { width: 350, border: `1px solid ${theme.palette.mode === "light" ? theme.palette.text[7] : theme.palette.grey[6]}`, borderRadius: 2, backgroundColor: theme.palette.background.default, overflow: 'hidden', p: 2, ...restProps.sx }, ...props, children: [Image, _jsxs(Box, { sx: { display: 'flex', alignItems: 'center', justifyContent: 'space-between' }, children: [Title, Chip] }), _jsxs(Box, { sx: { display: 'flex', flexDirection: 'column' }, children: [Subtitle, Date] }), Description, Actions] }));
-}
-export default CustomVerticalCard;

package/dist/components/custom-dialog/CustomDialog.d.ts

@@ -1,41 +0,0 @@
-import { ReactNode } from "react";
-import { ButtonProps, DialogActionsProps, DialogContentProps, DialogProps, DialogTitleProps } from "@mui/material";
-import { StackProps } from "@mui/material/Stack";
-export interface IDialogButton extends ButtonProps {
-    label: ReactNode;
-    isLoading?: ButtonProps["isLoading"];
-}
-export interface IDialogHeader {
-    component?: ReactNode;
-    title: string | ReactNode;
-    withoutButton?: boolean;
-    headerProps?: StackProps;
-    titleProps?: DialogTitleProps;
-    button?: {
-        icon?: ReactNode;
-        props?: ButtonProps;
-        label?: string | ReactNode;
-    };
-}
-export interface ICustomDialog extends DialogProps {
-    header?: IDialogHeader;
-    withoutHeader?: boolean;
-    withoutBoxShadow?: boolean;
-    dialogContent?: {
-        props?: DialogContentProps;
-        image?: ReactNode;
-        body?: {
-            title?: string | ReactNode;
-            content?: string | ReactNode;
-            props?: StackProps;
-        };
-    };
-    dialogActions?: {
-        actionButtons?: IDialogButton[];
-        actionComponent?: ReactNode | string;
-        props?: DialogActionsProps;
-    };
-    onClose?: () => void;
-}
-declare const CustomDialog: ({ withoutHeader, withoutBoxShadow, dialogContent, children, header, dialogActions, onClose, PaperProps, ...rest }: ICustomDialog) => import("react/jsx-runtime").JSX.Element;
-export default CustomDialog;

package/dist/components/custom-dialog/CustomDialog.js

@@ -1,38 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Dialog, DialogActions, DialogContent, DialogTitle, useTheme, } from "@mui/material";
-import Stack from "@mui/material/Stack";
-import Box from "@mui/material/Box";
-import Typography from "@mui/material/Typography";
-import CloseCircle from "../../icons/CloseCircle";
-const CustomDialog = ({ withoutHeader = false, withoutBoxShadow = false, dialogContent, children, header, dialogActions, onClose, PaperProps, ...rest }) => {
-    const { direction } = useTheme();
-    return (_jsxs(Dialog, { keepMounted: true, dir: direction, onClose: onClose, ...rest, withoutBoxShadow: withoutBoxShadow, children: [!withoutHeader &&
-                (header?.component ?? (_jsxs(Stack, { direction: "row", alignItems: "center", justifyContent: "space-between", ...header?.headerProps, children: [_jsx(DialogTitle, { sx: { padding: "0px" }, variant: "caption1", ...header?.titleProps, children: header?.title ?? "Title" }), !header?.withoutButton && (_jsxs(Button, { onClick: onClose, variant: "text", sx: {
-                                padding: "0px",
-                                minWidth: "max-content",
-                                minHeight: "max-content",
-                                transition: "transform 0.1s ease",
-                                stroke: (theme) => theme.palette.text.primary,
-                                ":hover": { backgroundColor: "background.main" },
-                                ":active": {
-                                    transform: "scale(90%)",
-                                },
-                            }, ...header?.button?.props, children: [header?.button?.label, header?.button?.icon ?? (_jsx(CloseCircle, { primarycolor: "inherit" }))] }))] }))), _jsxs(DialogContent, { ...dialogContent?.props, children: [!!dialogContent?.image && (_jsx(Box, { width: "max-content", minHeight: "80px", mx: "auto", children: dialogContent?.image })), !!dialogContent?.body && (_jsxs(Stack, { maxWidth: "490px", ...dialogContent?.body?.props, children: [_jsx(Typography, { variant: typeof dialogContent?.body?.title === "string"
-                                    ? "caption1.bold"
-                                    : "inherit", component: typeof dialogContent?.body?.title === "string" ? "span" : "div", children: dialogContent?.body?.title }), _jsx(Typography, { variant: typeof dialogContent?.body?.content === "string"
-                                    ? "caption2"
-                                    : "inherit", textAlign: "justify", component: typeof dialogContent?.body?.content === "string"
-                                    ? "span"
-                                    : "div", children: dialogContent?.body?.content })] })), children] }), dialogActions && (_jsxs(DialogActions, { sx: {
-                    display: "flex",
-                    width: "100%",
-                    gap: 4,
-                    p: 0,
-                    justifyContent: "space-between",
-                    alignItems: "flex-end",
-                }, ...dialogActions?.props, children: [dialogActions?.actionButtons?.map((actionButton, idx) => (_jsx(Button, { ...actionButton, sx: {
-                            stroke: (theme) => theme.palette.text.primary,
-                            ...actionButton.sx,
-                        }, children: actionButton?.label }, idx))), dialogActions?.actionComponent] }))] }));
-};
-export default CustomDialog;

package/dist/components/custom-mobile-date-picker/CustomBottomSheet.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-import { DialogProps } from '@mui/material';
-interface ICustomBottomSheet extends DialogProps {
-    children?: React.ReactNode;
-    handleClose: (event?: object | undefined, reason?: string | undefined) => void;
-    withoutCloseButton?: boolean;
-}
-declare const CustomBottomSheet: ({ children, handleClose, open, sx, title, withoutCloseButton, ...dialogProps }: ICustomBottomSheet) => import("react/jsx-runtime").JSX.Element;
-export default CustomBottomSheet;

package/dist/components/custom-mobile-date-picker/CustomBottomSheet.js

@@ -1,29 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-import Slide from '@mui/material/Slide';
-import { Box, Dialog, IconButton, Stack, styled, Typography, } from '@mui/material';
-import SvgAdd from '../../icons/Add';
-const CustomBottomSheet = ({ children, handleClose, open, sx, title, withoutCloseButton, ...dialogProps }) => {
-    return (_jsxs(Dialog, { fullScreen: true, open: open, onClose: handleClose, TransitionComponent: Transition, keepMounted: true, sx: [style, ...(Array.isArray(sx) ? sx : [sx])], ...dialogProps, children: [_jsxs(DialogHeader, { children: [_jsx(Typography, { variant: 'body3.bold', children: title }), !withoutCloseButton && (_jsx(IconButton, { "aria-label": 'close', onClick: handleClose, children: _jsx(SvgAdd, { style: { transform: 'rotate(45deg) scale(150%)' } }) }))] }), _jsx(Stack, { p: 6, gap: 8, children: children })] }));
-};
-export default CustomBottomSheet;
-const Transition = React.forwardRef(function Transition(props, ref) {
-    return (_jsx(Slide, { direction: 'up', ref: ref, ...props, style: { transitionDuration: '0.4s' } }));
-});
-const style = {
-    '.MuiDialog-paper': {
-        minWidth: '0px',
-        maxHeight: '80%',
-        minHeight: '60%',
-        height: 'max-content',
-        padding: 0,
-        transform: 'translateY(40%)',
-        maxWidth: 360,
-    },
-};
-const DialogHeader = styled(Box)({
-    width: '100%',
-    display: 'flex',
-    justifyContent: 'space-between',
-    padding: 12,
-});

package/dist/components/custom-mobile-date-picker/CustomMobileDatePicker.d.ts

@@ -1,19 +0,0 @@
-/// <reference types="react-date-object" />
-import { FC } from 'react';
-import { UseFormReturn } from 'react-hook-form';
-import { IDatePickerMobileForm } from '../input-list/type';
-type Props = IDatePickerMobileForm & {
-    form: UseFormReturn<any>;
-    error?: any;
-};
-export type TSelectedDate = {
-    month: number | null;
-    day: number | null;
-    year: number | null;
-};
-export declare const PERSIAN_CALENDARS: {
-    calendar: Omit<import("react-date-object").Calendar, "leapsLength">;
-    locale: import("react-date-object").Locale;
-};
-declare const MobileDatePicker: FC<Props>;
-export default MobileDatePicker;

package/dist/components/custom-mobile-date-picker/CustomMobileDatePicker.js

@@ -1,98 +0,0 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import { Controller } from 'react-hook-form';
-import { TextField, InputAdornment } from '@mui/material';
-import SvgCalendar from '../../icons/Calendar';
-import persian from 'react-date-object/calendars/persian';
-import persian_fa from 'react-date-object/locales/persian_fa';
-import { DateObject } from 'react-multi-date-picker';
-import DatePickerBottomSheet from './DatePickerBottomSheet';
-export const PERSIAN_CALENDARS = {
-    calendar: persian,
-    locale: persian_fa,
-};
-const calculateDaysInMonth = (isLeap) => [
-    31,
-    31,
-    31,
-    31,
-    31,
-    31,
-    30,
-    30,
-    30,
-    30,
-    30,
-    isLeap ? 30 : 29,
-];
-const createDateObject = (date, lang) => {
-    if (date)
-        return new DateObject({
-            date: new Date(date),
-            ...(lang.includes('fa') && {
-                calendar: persian,
-                locale: persian_fa,
-            }),
-        });
-};
-const MobileDatePicker = ({ form, name, defaultValue, label, rules, readonly, disabled, placeholder, error, itemProps, props, helperText, variant = 'outlined', withoutHelperText, inputLabelMode, }) => {
-    const lang = document.documentElement.lang;
-    const [open, setOpen] = useState(false);
-    const defaultValueDate = defaultValue
-        ? createDateObject(new Date(defaultValue), lang)
-        : form.getValues(name)
-            ? createDateObject(new Date(form.getValues(name)), lang)
-            : //Returns undefined because if Date Object bug for showing undefined year as -1 value
-                undefined;
-    const [value, setValue] = useState({
-        day: defaultValueDate?.day ?? null,
-        month: defaultValueDate?.month?.number ?? null,
-        year: defaultValueDate?.year && defaultValueDate.year > 1
-            ? defaultValueDate.year
-            : null,
-    });
-    const selectedDate = new DateObject({
-        ...(lang.includes('fa') && PERSIAN_CALENDARS),
-        date: `${value?.year}/${value?.month}/${value?.day}`,
-    });
-    const handleChange = () => {
-        form.setValue(name, selectedDate.toDate() || defaultValueDate?.toDate());
-        setOpen(false);
-    };
-    const getHelperText = () => {
-        if (withoutHelperText)
-            return undefined;
-        return error?.message ?? helperText ?? ' ';
-    };
-    const handleTextFieldClick = (e) => {
-        e.preventDefault();
-        setOpen(true);
-    };
-    const dayOptions = calculateDaysInMonth(selectedDate.isLeap)?.[(value?.month || 1) - 1];
-    const monthOptions = [{ name: '' }, ...selectedDate.months, { name: '' }];
-    return (_jsxs(_Fragment, { children: [_jsx(Controller, { control: form?.control, name: name, rules: { ...rules }, defaultValue: selectedDate.isValid ? selectedDate?.toDate() : undefined, render: ({ field }) => (_jsx(TextField, { ...(inputLabelMode === 'static' && { hiddenLabel: true }), ...(inputLabelMode === 'relative' && { label: label }), ...(defaultValue && {
-                        defaultValue: defaultValueDate,
-                    }), onChange: () => {
-                        form
-                            .register(name, { ...rules })
-                            .onChange({ target: { current: selectedDate.toDate() } });
-                    }, onBlur: () => {
-                        form
-                            .register(name, { ...rules })
-                            .onBlur({ target: { current: selectedDate.toDate() } });
-                    }, value: selectedDate?.format('YYYY/MM/DD'), defaultValue: selectedDate?.format('YYYY/MM/DD'), variant: variant, fullWidth: true, id: field?.name, error: !!error, onClick: !(disabled || readonly) && handleTextFieldClick, onTouchEnd: !(disabled || readonly) && handleTextFieldClick, placeholder: placeholder, helperText: getHelperText(), "aria-readonly": readonly, disabled: disabled, inputProps: { readOnly: readonly }, InputProps: {
-                        endAdornment: (_jsx(InputAdornment, { position: 'end', sx: {
-                                '& .MuiInputAdornment-positionStart': {
-                                    marginTop: '0 important',
-                                    backgroundColor: 'red',
-                                },
-                                stroke: ({ palette }) => disabled || readonly
-                                    ? palette.text.disabled
-                                    : error
-                                        ? palette.error.main
-                                        : palette.text.primary,
-                            }, children: _jsx(SvgCalendar, { primarycolor: 'inherit' }) })),
-                        ...itemProps?.InputProps,
-                    }, ...itemProps, ...props })) }), _jsx(DatePickerBottomSheet, { dayOptions: dayOptions, defaultValue: defaultValueDate, handleChange: setValue, handleClose: handleChange, handleSubmit: handleChange, label: String(label), monthOptions: monthOptions, open: open, value: value }, 'date-picker-bottom-sheet')] }));
-};
-export default MobileDatePicker;

package/dist/components/custom-mobile-date-picker/DatePickerBottomSheet.d.ts

@@ -1,19 +0,0 @@
-import { Dispatch, FC, SetStateAction } from 'react';
-import { Month } from 'react-date-object';
-import { DateObject } from 'react-multi-date-picker';
-import { TSelectedDate } from './CustomMobileDatePicker';
-type TDatePickerBottomSheetProps = {
-    open: boolean;
-    handleClose: () => void;
-    label: string;
-    handleChange: Dispatch<SetStateAction<TSelectedDate>>;
-    monthOptions: Month[] | {
-        name: string;
-    }[];
-    dayOptions: number;
-    value: TSelectedDate;
-    handleSubmit: () => void;
-    defaultValue: DateObject | undefined;
-};
-declare const DatePickerBottomSheet: FC<TDatePickerBottomSheetProps>;
-export default DatePickerBottomSheet;

package/dist/components/custom-mobile-date-picker/DatePickerBottomSheet.js

@@ -1,40 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Button, Box } from '@mui/material';
-import BottomSheet from './CustomBottomSheet';
-import ItemPicker from './ItemPicker';
-import { DateObject } from 'react-multi-date-picker';
-import { PERSIAN_CALENDARS } from './CustomMobileDatePicker';
-const MAX_YEAR = 3000;
-const DatePickerBottomSheet = ({ open, handleClose, label, dayOptions, handleChange, monthOptions, value, handleSubmit, defaultValue, }) => {
-    const lang = document.documentElement.lang;
-    const currentDate = new DateObject({
-        ...(lang.includes('fa') && PERSIAN_CALENDARS),
-        date: new Date(Date.now()),
-    });
-    return (_jsxs(BottomSheet, { open: open, handleClose: handleClose, title: String(label), children: [_jsxs(Box, { display: 'flex', position: 'relative', children: [_jsx(ItemPicker, { getSelectedItem: (selectedDay) => handleChange((prev) => ({
-                            month: prev?.month || null,
-                            day: selectedDay,
-                            year: prev?.year || null,
-                        })), open: open, totalItems: dayOptions + 2, getRowItem: (idx) => idx === 0 || idx === dayOptions + 1 ? '' : String(idx), defaultValue: value?.day || defaultValue?.day || currentDate.day }, 'day-picker'), _jsx(ItemPicker, { getSelectedItem: (selectedMonth) => handleChange((prev) => ({
-                            month: selectedMonth || null,
-                            day: prev?.day || null,
-                            year: prev?.year || null,
-                        })), open: open, totalItems: monthOptions.length, getRowItem: (idx) => String(monthOptions[idx]?.name), defaultValue: value?.month ||
-                            defaultValue?.month.number ||
-                            currentDate.month.number }, 'month-picker'), _jsx(ItemPicker, { getSelectedItem: (selectedYear) => handleChange((prev) => ({
-                            month: prev?.month || null,
-                            day: prev?.day || null,
-                            year: selectedYear ? selectedYear : null,
-                        })), open: open, totalItems: MAX_YEAR, getRowItem: (idx) => String(idx), defaultValue: value?.year || defaultValue?.year || currentDate.year }, 'year-picker'), _jsx(Box, { sx: {
-                            position: 'absolute',
-                            top: 'calc(50% - 20px)',
-                            left: 0,
-                            width: '100%',
-                            height: 40,
-                            backgroundColor: 'primary.main',
-                            borderRadius: '8px',
-                            opacity: 0.1,
-                            zIndex: -1,
-                        } })] }), _jsx(Button, { fullWidth: true, onClick: handleSubmit, children: lang.includes('fa') ? 'تایید' : 'OK' })] }));
-};
-export default DatePickerBottomSheet;

package/dist/components/custom-mobile-date-picker/ItemPicker.d.ts

@@ -1,10 +0,0 @@
-import { FC } from 'react';
-type TItemPickerProps = {
-    getSelectedItem: (item: number) => void;
-    totalItems: number;
-    getRowItem: (idx: number) => string;
-    defaultValue?: number | null;
-    open: boolean;
-};
-declare const ItemPicker: FC<TItemPickerProps>;
-export default ItemPicker;

package/dist/components/custom-mobile-date-picker/ItemPicker.js

@@ -1,72 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Stack, Typography } from '@mui/material';
-import { createRef, useEffect, useRef, useState, } from 'react';
-import { FixedSizeList as List } from 'react-window';
-const ITEM_HEIGHT = 40;
-const ItemPicker = ({ getSelectedItem, totalItems, getRowItem, defaultValue, open, }) => {
-    const listRef = createRef();
-    const [isScrolling, setIsScrolling] = useState(false);
-    const selectedItemRef = useRef(defaultValue || 0);
-    const handleScrollToItem = (isScrolling) => {
-        if (!isScrolling) {
-            if (selectedItemRef.current !== 2) {
-                listRef.current?.scrollToItem(selectedItemRef.current, selectedItemRef.current >= totalItems - 2 ? 'auto' : 'center');
-            }
-            else {
-                //Because of react window bug for index "2"
-                listRef.current?.scrollTo(ITEM_HEIGHT);
-            }
-            setIsScrolling(false);
-        }
-        else {
-            setIsScrolling(true);
-        }
-    };
-    useEffect(() => {
-        if (!isScrolling && selectedItemRef.current > 0 && open) {
-            getSelectedItem(selectedItemRef.current);
-        }
-    }, [isScrolling, open]);
-    const Row = ({ index, isScrolling = false, style, }) => {
-        handleScrollToItem(isScrolling);
-        return (_jsx(Typography, { textAlign: 'inherit', sx: {
-                display: 'flex',
-                alignItems: 'center',
-                justifyContent: 'center',
-                width: '100%',
-                height: '100%',
-                userSelect: 'none',
-                transition: '0.3s ease all',
-                filter: selectedItemRef.current === index ? 'none' : 'blur(0.5px)',
-                fontSize: selectedItemRef.current === index ? 16 : 14,
-                ...style,
-            }, variant: selectedItemRef.current === index ? 'caption2.bold' : 'caption2', children: getRowItem(index) }));
-    };
-    return (_jsxs(Stack, { sx: {
-            overflowY: 'hidden',
-            height: 120,
-            flexBasis: '33%',
-        }, children: [_jsx(Stack, { sx: {
-                    width: '100%',
-                }, children: _jsx(List, { className: 'item-picker', height: ITEM_HEIGHT * 3, itemCount: totalItems, itemSize: ITEM_HEIGHT, width: '100%', 
-                    // -1 is because options array is zero based index
-                    initialScrollOffset: (selectedItemRef.current - 1) * ITEM_HEIGHT, onScroll: (e) => {
-                        // +1 is because item being in center of selector
-                        selectedItemRef.current =
-                            Math.round(e.scrollOffset / ITEM_HEIGHT) + 1;
-                    }, style: {
-                        textAlign: 'center',
-                        transition: 'all ease 1s',
-                    }, ref: listRef, useIsScrolling: true, children: Row }) }), _jsx("style", { children: css })] }));
-};
-export default ItemPicker;
-const css = `
-  .item-picker::-webkit-scrollbar {
-      display: none;
-  }
-  .item-picker {
-    -ms-overflow-style: none;
-    scrollbar-width: none;
-    scroll-behavior: smooth;
-    }
-  `;

package/dist/components/custom-modal/CustomModal.d.ts

@@ -1,21 +0,0 @@
-import { FC, ReactNode } from 'react';
-import { BoxProps, ModalProps } from "@mui/material";
-export interface CustomModalProps {
-    open: boolean;
-    onClose?: () => void;
-    title?: string;
-    children?: ReactNode;
-    modalProps: Omit<ModalProps, "open">;
-    boxProps?: BoxProps;
-    leftTitle?: React.ReactNode;
-    withoutDivider?: boolean;
-    withoutHeader?: boolean;
-    scrollableProps?: BoxProps;
-    preventClose?: boolean;
-    onClickTopLeftBtn?: () => void;
-    topLeftBtnTitle?: string;
-    maxHeight?: string | number;
-    height?: string | number;
-}
-declare const CustomModal: FC<CustomModalProps>;
-export default CustomModal;

package/dist/components/custom-modal/CustomModal.js

@@ -1,38 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-//@Mui
-import Box from "@mui/material/Box";
-import Stack from "@mui/material/Stack";
-import Modal from "@mui/material/Modal";
-import Divider from "@mui/material/Divider";
-import Typography from "@mui/material/Typography";
-import IconButton from "@mui/material/IconButton";
-const CustomModal = ({ modalProps, open, children, boxProps, onClose, title, leftTitle, withoutDivider, withoutHeader, scrollableProps, preventClose, onClickTopLeftBtn, topLeftBtnTitle, maxHeight, height, }) => {
-    return (_jsx(Modal, { "aria-labelledby": "modal-modal-title", "aria-describedby": "modal-modal-description", open: open, sx: {
-            direction: "ltr",
-            backdropFilter: "blur(5px)",
-            "& .MuiBackdrop-root ": {
-                backgroundColor: "rgba(27, 38, 44, 0.1)",
-            },
-        }, onClose: () => {
-            if (onClose && !preventClose) {
-                onClose();
-            }
-        }, ...modalProps, children: _jsxs(Stack, { sx: {
-                width: { xs: "90%", md: "auto" },
-                minWidth: 300,
-                position: "absolute",
-                top: "50%",
-                left: "50%",
-                transform: "translate(-50%, -50%)",
-                backgroundColor: "background.4",
-                borderRadius: "10px",
-                py: 5,
-                px: { xs: 2, lg: 7 },
-                outline: "none",
-                ...boxProps,
-            }, children: [!withoutHeader && (_jsxs(_Fragment, { children: [_jsxs(Box, { display: "flex", gap: 3, alignItems: "center", justifyContent: "space-between", mb: 2, children: [_jsxs(Box, { display: "flex", gap: 3, alignItems: "center", children: [_jsx(IconButton, { onClick: () => (onClose ? onClose() : ""), "data-cy": "close-modal", children: "x" }), _jsx(Typography, { fontWeight: 500, fontSize: 12, children: title })] }), _jsx(Box, { children: leftTitle }), topLeftBtnTitle && (_jsx(Box, { sx: { color: "primary.main", cursor: "pointer" }, onClick: onClickTopLeftBtn, children: topLeftBtnTitle }))] }), !withoutDivider && (_jsx(Divider, { sx: {
-                                mb: 4,
-                                borderColor: "background.1",
-                            } }))] })), _jsx(Stack, { height: height || "100%", maxHeight: maxHeight || "73vh", children: children })] }) }));
-};
-export default CustomModal;

package/dist/components/custom-stepper/CustomStepper.d.ts

@@ -1,31 +0,0 @@
-import { ButtonProps, StepConnectorProps, StepIconProps, StepLabelProps, StepperProps, TypographyProps } from "@mui/material";
-import { MouseEvent } from "react";
-type step = {
-    label?: string;
-    error?: {
-        hasError?: boolean;
-        errorMessage?: string;
-    };
-    canSkipping?: boolean;
-    completed?: boolean;
-};
-export interface ICustomStepper {
-    steps: step[];
-    activeStep: number;
-    orientation?: "vertical" | "horizontal";
-    alternativeLabel?: boolean;
-    stepperProps?: StepperProps;
-    stepConnectorProps?: StepConnectorProps;
-    stepLabelProps?: StepLabelProps;
-    errorTypographyProps?: TypographyProps;
-    stepButtonProps?: ButtonProps;
-    nonLinear?: boolean;
-    clickableItem?: boolean;
-    onClickItem?: (index: number, e?: MouseEvent<HTMLButtonElement>) => void;
-    completedIconComponent?: (props: StepIconProps) => JSX.Element;
-    activeIconComponent?: (props: StepIconProps) => JSX.Element;
-    errorIconComponent?: (props: StepIconProps) => JSX.Element;
-    defaultIconComponent?: (props: StepIconProps) => JSX.Element;
-}
-declare const CustomStepper: ({ steps, activeStep, orientation, alternativeLabel, nonLinear, clickableItem, errorTypographyProps, completedIconComponent, activeIconComponent, errorIconComponent, defaultIconComponent, stepperProps, stepConnectorProps, stepLabelProps, stepButtonProps, onClickItem, }: ICustomStepper) => import("react/jsx-runtime").JSX.Element;
-export default CustomStepper;