mui-design-system 0.0.21 → 0.0.23

package/dist/components/custom-stepper/CustomStepper.js

@@ -1,170 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { Box, Button, Step, StepConnector, StepLabel, Stepper, Typography, } from "@mui/material";
-import SvgTick from "../../icons/Tick";
-import SvgWarning2 from "../../icons/Warning2";
-const CustomStepper = ({ steps, activeStep, orientation = "horizontal", alternativeLabel = false, nonLinear, clickableItem, errorTypographyProps, completedIconComponent, activeIconComponent, errorIconComponent, defaultIconComponent, stepperProps, stepConnectorProps, stepLabelProps, stepButtonProps, onClickItem, }) => {
-    const defaultStylesStepperConnectorHorizontal = {
-        backgroundColor: "text.5",
-        left: "calc(-50% + 10px)",
-        right: "calc(50% + 10px)",
-        "& .MuiStepConnector-line": {
-            borderColor: "text.9",
-            borderWidth: 2,
-            borderTopStyle: "dashed",
-        },
-        "&.Mui-completed": {
-            "& .MuiStepConnector-line": {
-                borderColor: "primary.5",
-                borderTopStyle: "solid",
-            },
-        },
-        "&.Mui-active": {
-            "& .MuiStepConnector-line": {
-                borderColor: "primary.5",
-                borderTopStyle: "solid",
-            },
-        },
-    };
-    const defaultStylesStepperConnectorVertical = {
-        backgroundColor: "text.5",
-        width: 2,
-        "& .MuiStepConnector-line": {
-            borderColor: "text.9",
-            borderWidth: 2,
-            borderLeftStyle: "dashed",
-        },
-        "&.Mui-completed": {
-            "& .MuiStepConnector-line": {
-                borderColor: "primary.5",
-                borderLeftStyle: "solid",
-            },
-        },
-        "&.Mui-active": {
-            "& .MuiStepConnector-line": {
-                borderColor: "primary.5",
-                borderLeftStyle: "solid",
-            },
-        },
-    };
-    const defaultLabelStylesAlternative = {
-        "& .MuiStepLabel-label": {
-            fontSize: "12px",
-            fontWeight: "400 !important",
-            lineHeight: "21px",
-            marginTop: "8px !important",
-            color: "text.12",
-        },
-        "& .Mui-active": {
-            color: "gray.16",
-        },
-        "& .Mui-completed": {
-            color: "gray.16",
-        },
-    };
-    const defaultLabelStyles = {
-        "& .MuiStepLabel-label": {
-            fontSize: "12px",
-            fontWeight: "400 !important",
-            lineHeight: "21px",
-            color: "text.12",
-        },
-        "& .Mui-active": {
-            color: "gray.16",
-        },
-        "& .Mui-completed": {
-            color: "gray.16",
-        },
-    };
-    function StepIcons(props) {
-        const { completed, active, error, icon } = props;
-        return (_jsx(_Fragment, { children: completed ? (completedIconComponent ? (completedIconComponent(props)) : (_jsx(Box, { sx: {
-                    width: 24,
-                    height: 24,
-                    display: "flex",
-                    justifyContent: "center",
-                    alignItems: "center",
-                    backgroundColor: "primary.5",
-                    borderRadius: "100%",
-                    zIndex: 2,
-                }, children: _jsx(SvgTick, { primarycolor: "#fff", width: 24, height: 24 }) }))) : error ? (errorIconComponent ? (errorIconComponent(props)) : (_jsx(SvgWarning2, { primarycolor: "red", width: 24, height: 24 }))) : active ? (activeIconComponent ? (activeIconComponent(props)) : (_jsxs(Box, { sx: {
-                    width: 24,
-                    height: 24,
-                    display: "flex",
-                    justifyContent: "center",
-                    alignItems: "center",
-                    position: "relative",
-                    backgroundColor: "text.5",
-                    borderRadius: "100%",
-                    zIndex: 2,
-                }, children: [_jsx(Typography, { variant: "caption2", color: "text.11", children: icon }), _jsx(Box, { sx: {
-                            width: 34,
-                            height: 34,
-                            position: "absolute",
-                            top: "50%",
-                            left: "50%",
-                            transform: "translate(-50%,-50%)",
-                            borderRadius: "100%",
-                            opacity: 0.3,
-                            backgroundColor: "primary.3",
-                        }, children: _jsx(Box, { sx: {
-                                width: 12,
-                                height: 12,
-                                position: "absolute",
-                                top: "50%",
-                                left: "50%",
-                                transform: "translate(-50%,-50%)",
-                                backgroundColor: "primary.1",
-                                borderRadius: "100%",
-                            } }) })] }))) : defaultIconComponent ? (defaultIconComponent(props)) : (_jsx(Box, { sx: {
-                    width: 24,
-                    height: 24,
-                    display: "flex",
-                    justifyContent: "center",
-                    alignItems: "center",
-                    backgroundColor: "text.5",
-                    borderRadius: "100%",
-                    zIndex: 2,
-                }, children: _jsx(Typography, { variant: "caption2", color: "text.11", children: icon }) })) }));
-    }
-    return (_jsx(Stepper, { alternativeLabel: alternativeLabel, activeStep: activeStep, orientation: orientation, nonLinear: nonLinear, connector: _jsx(StepConnector, { ...stepConnectorProps, sx: [
-                orientation === "horizontal"
-                    ? defaultStylesStepperConnectorHorizontal
-                    : defaultStylesStepperConnectorVertical,
-                ...(Array.isArray(stepConnectorProps?.sx)
-                    ? stepConnectorProps.sx
-                    : [stepConnectorProps?.sx]),
-            ] }), ...stepperProps, children: steps.map((item, index) => {
-            return (_jsx(Step, { ...(nonLinear && {
-                    completed: item.completed,
-                }), sx: {
-                    display: "flex",
-                    justifyContent: orientation === "horizontal" ? "center" : "flex-start",
-                }, children: nonLinear && clickableItem ? (_jsx(Button, { ...stepButtonProps, sx: [
-                        {
-                            width: "fit-content",
-                            backgroundColor: "transparent",
-                            "&:hover": {
-                                backgroundColor: "transparent",
-                            },
-                        },
-                        ...(Array.isArray(stepButtonProps?.sx)
-                            ? stepButtonProps.sx
-                            : [stepButtonProps?.sx]),
-                    ], onClick: (e) => onClickItem?.(index, e), children: _jsx(StepLabel, { StepIconComponent: StepIcons, error: item.error?.hasError, optional: item.error && (_jsx(Typography, { variant: "caption3", color: "error", ...errorTypographyProps, children: item.error?.errorMessage })), ...stepLabelProps, sx: [
-                            alternativeLabel
-                                ? defaultLabelStylesAlternative
-                                : defaultLabelStyles,
-                            ...(Array.isArray(stepLabelProps?.sx)
-                                ? stepLabelProps.sx
-                                : [stepLabelProps?.sx]),
-                        ], children: item?.label }) })) : (_jsx(StepLabel, { StepIconComponent: StepIcons, error: item.error?.hasError, optional: item.error && (_jsx(Typography, { variant: "caption3", color: "error", ...errorTypographyProps, children: item.error.errorMessage })), ...stepLabelProps, sx: [
-                        alternativeLabel
-                            ? defaultLabelStylesAlternative
-                            : defaultLabelStyles,
-                        ...(Array.isArray(stepLabelProps?.sx)
-                            ? stepLabelProps.sx
-                            : [stepLabelProps?.sx]),
-                    ], children: item?.label })) }, item.label));
-        }) }));
-};
-export default CustomStepper;

package/dist/components/custom-tabs/CustomTabs.d.ts

@@ -1,22 +0,0 @@
-import { ReactElement, ReactNode } from 'react';
-import { TabProps, TabsProps } from '@mui/material';
-import { BoxProps } from '@mui/material/Box';
-interface ITabProps {
-    label: ReactNode;
-    icon?: string | ReactElement;
-    disabled?: boolean;
-}
-export interface CustomTabsProps extends TabsProps {
-    indicator?: 'line' | 'fullHeight' | 'none';
-    tabs: ITabProps[];
-    tabPanels?: {
-        component: ReactNode;
-    }[];
-    color?: string;
-    withoutDivider?: boolean;
-    tabProps?: TabProps;
-    wrapperProps?: BoxProps;
-    tabOrientation?: 'horizontal' | 'vertical';
-}
-declare const CustomTabs: ({ tabs, tabPanels, indicator, orientation, color, withoutDivider, tabProps, wrapperProps, tabOrientation, ...props }: CustomTabsProps) => import("react/jsx-runtime").JSX.Element;
-export default CustomTabs;

package/dist/components/custom-tabs/CustomTabs.js

@@ -1,70 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useState } from 'react';
-import { Tab as MuiTab, Tabs as MuiTabs, useTheme, } from '@mui/material';
-import Box from '@mui/material/Box';
-const CustomTabs = ({ tabs, tabPanels, indicator = 'none', orientation = 'horizontal', color, withoutDivider, tabProps, wrapperProps, tabOrientation = 'horizontal', ...props }) => {
-    const theme = useTheme();
-    const [value, setValue] = useState(0);
-    const handleChange = (event, newValue) => {
-        setValue(newValue);
-    };
-    return (_jsxs(Box, { width: '100%', display: 'flex', height: '100%', flexDirection: orientation === 'vertical' ? 'row' : 'column', ...wrapperProps, children: [_jsx(MuiTabs, { centered: props?.centered, orientation: orientation, variant: props?.variant, value: value, onChange: handleChange, "aria-label": 'basic tabs', TabIndicatorProps: {
-                    style: {
-                        background: color || theme.palette.primary.main,
-                        ...(indicator === 'fullHeight'
-                            ? {
-                                ...(orientation === 'horizontal' && {
-                                    height: 'calc(100% - 4px)',
-                                }),
-                                ...(orientation === 'vertical' && {
-                                    width: 'calc(100% - 4px)',
-                                    marginLeft: '4px',
-                                }),
-                                borderRadius: 8,
-                                marginBottom: '4px',
-                            }
-                            : {}),
-                    },
-                    hidden: indicator === 'none',
-                }, style: { borderBottom: withoutDivider ? 'none' : '' }, ...props, children: tabs?.map(({ label, icon, disabled }, index) => (_jsx(MuiTab, { disabled: disabled, label: label, id: `tab-${index}`, "aria-controls": `tabPanel-${index}`, icon: icon ? icon : undefined, ...tabProps, sx: [
-                        {
-                            ...theme.typography.caption2,
-                            ...(tabOrientation === 'vertical'
-                                ? { writingMode: 'tb-rl' }
-                                : {}),
-                            '&.Mui-selected': {
-                                ...theme.typography['caption2.medium'],
-                                ...(indicator === 'fullHeight'
-                                    ? {
-                                        backgroundColor: 'transparent',
-                                        zIndex: 10,
-                                        color: (theme) => theme.palette.mode === 'light'
-                                            ? theme.palette.text.secondary
-                                            : theme.palette.text.primary,
-                                        stroke: (theme) => theme.palette.mode === 'light'
-                                            ? theme.palette.text.secondary
-                                            : theme.palette.text.primary,
-                                    }
-                                    : indicator === 'line'
-                                        ? {
-                                            backgroundColor: 'transparent',
-                                            color: (theme) => color || theme.palette.primary.main,
-                                            stroke: (theme) => theme.palette.primary.main,
-                                        }
-                                        : {
-                                            backgroundColor: 'transparent',
-                                            ...(orientation === 'vertical' && {
-                                                width: '100%',
-                                                justifyContent: 'flex-start',
-                                            }),
-                                        }),
-                            },
-                        },
-                        ...(Array.isArray(tabProps?.sx) ? tabProps.sx : [tabProps?.sx]),
-                    ] }, index))) }), tabPanels?.map((children, index) => (_jsx(CustomTabPanel, { value: value, index: index, children: children.component }, index)))] }));
-};
-export default CustomTabs;
-function CustomTabPanel(props) {
-    const { children, value, index, ...other } = props;
-    return (_jsx("div", { role: 'tabpanel', hidden: value !== index, id: `tabPanel-${index}`, "aria-labelledby": `tab-${index}`, ...other, children: value === index && children }));
-}

package/dist/components/input-list/InputListWithUseForm.d.ts

@@ -1,22 +0,0 @@
-import { FC } from 'react';
-import { UseFormReturn } from 'react-hook-form';
-import { BoxProps } from '@mui/material/Box';
-import { GridProps } from '@mui/material/Grid';
-import { TypographyProps } from '@mui/material/Typography';
-import { IUseFormInput, TInputLabelMode } from './type';
-import { TextFieldProps } from '@mui/material/TextField';
-export interface InputListWithUseFormProps {
-    inputList: IUseFormInput[];
-    form: UseFormReturn<any, any, any>;
-    gridContainerProps?: GridProps;
-    gridItemProps?: GridProps;
-    itemProps?: any;
-    labelsProps?: Partial<TypographyProps<'label', {}>> | undefined;
-    errorProps?: BoxProps;
-    hideRequiredStar?: boolean;
-    inputLabelMode?: TInputLabelMode;
-    inputVariants?: TextFieldProps['variant'];
-    withoutHelperText?: boolean;
-}
-declare const InputListWithUseForm: FC<InputListWithUseFormProps>;
-export default InputListWithUseForm;

package/dist/components/input-list/InputListWithUseForm.js

@@ -1,22 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { isValidElement } from 'react';
-//@3rd Party
-import lodash from 'lodash';
-//------------------------------------------------------------------------
-//@Mui
-import Box from '@mui/material/Box';
-import Grid from '@mui/material/Grid';
-import Stack from '@mui/material/Stack';
-import Typography from '@mui/material/Typography';
-import UseFormInput from './UseFormInput';
-import { deepMerge } from "../../methods/general";
-const InputListWithUseForm = ({ inputList, form, gridItemProps, gridContainerProps, labelsProps, errorProps, itemProps, hideRequiredStar = false, inputLabelMode = 'static', inputVariants = 'outlined', withoutHelperText, }) => {
-    return (_jsx(Grid, { container: true, columnSpacing: 4, rowSpacing: 0, rowGap: 2, alignItems: 'flex-start', ...gridContainerProps, children: inputList?.map((inputProp) => (_jsxs(Grid, { item: true, width: '100%', position: 'relative', height: '100%', xs: 4, ...deepMerge(gridItemProps, inputProp.gridItemProp), children: [inputLabelMode === 'static' &&
-                    inputProp.type !== 'checkbox' &&
-                    inputProp.type !== 'switch' && (_jsx(Box, { display: 'flex', children: _jsx(Typography, { variant: 'caption3', flexGrow: 1, width: 0, component: 'label', display: 'inline-block', mb: 2, htmlFor: inputProp.name, color: lodash.result(form?.formState?.errors, `${inputProp.name}`)
-                            ? 'error'
-                            : 'text.16', noWrap: true, title: !isValidElement(inputProp?.label)
-                            ? inputProp?.label?.toString() || ''
-                            : '', ...labelsProps, ...inputProp.labelProps, children: _jsxs(Stack, { direction: 'row', children: [inputProp.label, inputProp.rules?.required && !hideRequiredStar && (_jsx(Typography, { variant: 'caption3.bold', component: 'span', color: 'error', fontSize: 12, children: "*" }))] }) }) })), _jsx(UseFormInput, { ...inputProp, form: form, itemProps: itemProps, error: lodash.result(form?.formState?.errors, `${inputProp.name}`), inputLabelMode: inputLabelMode, inputVariants: inputVariants, withoutHelperText: withoutHelperText || inputProp.withoutHelperText })] }, inputProp.name))) }));
-};
-export default InputListWithUseForm;

package/dist/components/input-list/components/UFDatePickerMobile.d.ts

@@ -1,9 +0,0 @@
-import { FC } from 'react';
-import { IDatePickerMobileForm } from '../type';
-import { UseFormReturn } from 'react-hook-form';
-type Props = IDatePickerMobileForm & {
-    form: UseFormReturn<any>;
-    error: any;
-};
-declare const UFDatePickerMobile: FC<Props>;
-export default UFDatePickerMobile;

package/dist/components/input-list/components/UFDatePickerMobile.js

@@ -1,6 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { CustomDatePickerMobile } from '../../index';
-const UFDatePickerMobile = (props) => {
-    return (_jsx(CustomDatePickerMobile, { ...props, defaultValue: props.form.getValues(props.name) || props.defaultValue }));
-};
-export default UFDatePickerMobile;

package/dist/components/otp-input/OTPInput.d.ts

@@ -1,19 +0,0 @@
-import { CSSProperties, FC } from 'react';
-import { BoxProps } from '@mui/material/Box';
-export interface OTPInputProps {
-    value?: string;
-    valueLength: number;
-    onChange: (value: string) => void;
-    size?: number | 'auto';
-    gap?: number;
-    inputStyle?: CSSProperties;
-    activeInputStyle?: CSSProperties;
-    onFinish?: (value: string, target: HTMLInputElement) => void;
-    containerProp?: BoxProps;
-    onBack?: (target: HTMLElement) => void;
-    readonly?: boolean;
-    disabled?: boolean;
-    isError?: boolean;
-}
-declare const OTPInput: FC<OTPInputProps>;
-export default OTPInput;

package/dist/components/otp-input/OTPInput.js

@@ -1,161 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useMemo, useState } from 'react';
-//@3rd Party
-//---------------------------------------------------------------------------
-//@Mui
-import Box from '@mui/material/Box';
-import { useTheme } from '@mui/material/styles';
-import Divider from '@mui/material/Divider';
-import { ClickAwayListener } from '@mui/material';
-const OTPInput = ({ valueLength, value, onChange, size = 'auto', gap = 2, inputStyle, activeInputStyle, onFinish = () => { }, onBack, containerProp, readonly = false, disabled = false, isError, }) => {
-    const theme = useTheme();
-    const RE_DIGIT = new RegExp(/^\d+$/);
-    const [activeInput, setActiveInput] = useState();
-    const valueItems = useMemo(() => {
-        const valueArray = value ? value.split('') : [];
-        const items = [];
-        for (let i = 0; i < valueLength; i++) {
-            const char = valueArray[i];
-            if (RE_DIGIT.test(char)) {
-                items.push(char);
-            }
-            else {
-                items.push('');
-            }
-        }
-        return items;
-    }, [value, valueLength]);
-    const focusToNextInput = (target, newValue) => {
-        const nextElementSibling = target?.parentElement?.nextElementSibling
-            ?.children[0];
-        if (nextElementSibling) {
-            nextElementSibling.focus();
-        }
-        else {
-            if (newValue) {
-                onFinish(newValue || '', target);
-            }
-        }
-    };
-    const focusToPrevInput = (target) => {
-        const previousElementSibling = target?.parentElement?.previousElementSibling
-            ?.children[0];
-        if (previousElementSibling) {
-            previousElementSibling.focus();
-        }
-        else {
-            if (onBack) {
-                onBack(target);
-            }
-        }
-    };
-    const inputOnChange = (e, idx) => {
-        const target = e.target;
-        let targetValue = target.value;
-        const isTargetValueDigit = RE_DIGIT.test(targetValue);
-        if (!isTargetValueDigit && targetValue !== '') {
-            return;
-        }
-        const nextInputEl = target?.parentElement?.nextElementSibling
-            ?.children[0];
-        // only delete digit if next input element has no value
-        if (!isTargetValueDigit && nextInputEl && nextInputEl.value !== '') {
-            return;
-        }
-        targetValue = isTargetValueDigit ? targetValue : ' ';
-        const targetValueLength = targetValue.length;
-        if (targetValueLength === 1) {
-            const newValue = value?.substring(0, idx) + targetValue + value?.substring(idx + 1);
-            onChange(newValue);
-            if (!isTargetValueDigit) {
-                return;
-            }
-            focusToNextInput(target, newValue);
-        }
-        else if (targetValueLength === valueLength) {
-            onChange(targetValue);
-            target.blur();
-        }
-    };
-    const inputOnKeyDown = (e) => {
-        const { key } = e;
-        const target = e.target;
-        if (key === 'ArrowRight' || key === 'ArrowDown') {
-            e.preventDefault();
-            return focusToNextInput(target, '');
-        }
-        if (key === 'ArrowLeft' || key === 'ArrowUp') {
-            e.preventDefault();
-            return focusToPrevInput(target);
-        }
-        const targetValue = target.value;
-        // keep the selection range position
-        // if the same digit was typed
-        target.setSelectionRange(0, targetValue.length);
-        if (e.key !== 'Backspace' || target.value !== '') {
-            return;
-        }
-        focusToPrevInput(target);
-    };
-    const inputOnFocus = (e, idx) => {
-        const { target } = e;
-        setActiveInput(idx);
-        // keep focusing back until previous input
-        // element has value
-        const prevInputEl = target?.parentElement?.previousElementSibling
-            ?.children[0];
-        if (prevInputEl && prevInputEl.value === '') {
-            return prevInputEl.focus();
-        }
-        target.setSelectionRange(0, target.value.length);
-    };
-    return (_jsx(Box, { id: 'otp-box-input', display: 'flex', flexDirection: 'row-reverse', gap: gap, borderColor: isError ? 'red' : theme.palette.background['1'], ...containerProp, children: valueItems.map((digit, idx) => (_jsx(ClickAwayListener, { 
-            // sx={{ border: "1px solid" }}
-            onClickAway: (e) => {
-                if (idx === activeInput) {
-                    // @ts-expect-error
-                    if (e?.target?.tagName !== 'INPUT') {
-                        setActiveInput(undefined);
-                    }
-                }
-            }, children: _jsxs(Box, { position: 'relative', width: size === 'auto' ? '100%' : size, height: size === 'auto' ? '100%' : size, display: 'flex', borderColor: 'inherit', sx: {
-                    '& input:focus-visible': {
-                        outline: 'none',
-                    },
-                }, children: [_jsx("input", { disabled: disabled, readOnly: readonly, type: 'text', inputMode: 'numeric', autoComplete: 'one-time-code', pattern: '\\d{1}', maxLength: valueLength, style: activeInput === idx
-                            ? {
-                                width: '100%',
-                                height: '100%',
-                                borderColor: 'inherit',
-                                borderRadius: 6,
-                                fontFamily: 'inherit',
-                                border: '1px solid',
-                                textAlign: 'center',
-                                fontWeight: 500,
-                                color: theme.palette.text.primary,
-                                backgroundColor: theme.palette.background['paper'],
-                                ...inputStyle,
-                                ...activeInputStyle,
-                            }
-                            : {
-                                width: '100%',
-                                height: '100%',
-                                border: '1px solid',
-                                textAlign: 'center',
-                                borderColor: 'inherit',
-                                borderRadius: 6,
-                                fontFamily: 'inherit',
-                                fontWeight: 500,
-                                color: theme.palette.text.primary,
-                                backgroundColor: theme.palette.background['paper'],
-                                ...inputStyle,
-                            }, value: digit, onChange: (e) => inputOnChange(e, idx), onKeyDown: inputOnKeyDown, onFocus: (e) => inputOnFocus(e, idx) }), _jsx(Divider, { sx: {
-                            width: '40%',
-                            position: 'absolute',
-                            bottom: '20%',
-                            left: '50%',
-                            transform: 'translate(-50%, 50%)',
-                            // borderColor: (theme) => theme.palette.primary.back,
-                        } })] }, idx) }, idx))) }));
-};
-export default OTPInput;

package/dist/components/rich-tooltip/RichTooltip.d.ts

@@ -1,18 +0,0 @@
-import { FC, ReactNode } from "react";
-import { TypographyProps } from "@mui/material/Typography";
-import { StackProps } from "@mui/material/Stack";
-import { BoxProps, ButtonProps } from "@mui/material";
-export interface IRichTooltipProps {
-    children: ReactNode;
-    title: string;
-    titleProps?: TypographyProps;
-    description: string;
-    descriptionProps?: TypographyProps;
-    containerProps?: StackProps;
-    actionProps?: BoxProps;
-    confirmProps?: ButtonProps;
-    cancelProps?: ButtonProps;
-    withoutAction?: boolean;
-}
-declare const RichTooltip: FC<IRichTooltipProps>;
-export default RichTooltip;

package/dist/components/rich-tooltip/RichTooltip.js

@@ -1,32 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import Box from "@mui/material/Box";
-import Typography from "@mui/material/Typography";
-import Stack from "@mui/material/Stack";
-import { Button, useTheme } from "@mui/material";
-const RichTooltip = ({ children, title, titleProps, description, descriptionProps, withoutAction = false, containerProps, actionProps, confirmProps, cancelProps,
-// onConfirmButton,
-// onCancelButton,
- }) => {
-    const { sx, ...rest } = containerProps || {};
-    const theme = useTheme();
-    return (_jsx(_Fragment, { children: _jsxs(Stack, { gap: 2, justifyContent: "start", alignItems: "start", sx: {
-                boxShadow: "0px 2px 6px 2px rgba(0, 0, 0, 0.10), 0px 1px 1px 0px rgba(0, 0, 0, 0.10)",
-                backgroundColor: theme.palette.background.paper,
-                width: 300,
-                px: 4,
-                py: 3,
-                borderRadius: 4,
-                ...sx,
-            }, ...rest, children: [_jsxs(Stack, { width: "100%", children: [_jsx(Typography
-                        // textAlign="start"
-                        , { 
-                            // textAlign="start"
-                            sx: { mb: 1 }, color: theme.palette.text.primary, fontSize: 14, fontWeight: 500, ...titleProps, children: title }), _jsx(Typography
-                        // textAlign="left"
-                        , { 
-                            // textAlign="left"
-                            fontSize: 14, fontWeight: 400, color: theme.palette.text.primary, sx: { wordWrap: "break-word" }, ...descriptionProps, children: description })] }), !withoutAction && (_jsxs(Box, { display: "flex", 
-                    // flexDirection="row-reverse"
-                    width: "100%", gap: 2, justifyContent: "left", ...actionProps, children: [confirmProps?.onClick && (_jsx(Button, { size: "small", ...confirmProps, children: confirmProps?.title ?? "تایید" })), cancelProps?.onClick && (_jsx(Button, { size: "small", variant: "outlined", ...cancelProps, children: cancelProps?.title ?? "لغو" })), !cancelProps?.onClick && !confirmProps?.onClick && children] }))] }) }));
-};
-export default RichTooltip;

package/dist/icons/Add.d.ts

@@ -1,7 +0,0 @@
-import type { SVGProps } from "react";
-interface Props extends SVGProps<any> {
-    primarycolor?: string;
-    secondarycolor?: string;
-}
-declare const SvgAdd: ({ primarycolor, secondarycolor, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
-export default SvgAdd;

package/dist/icons/Add.js

@@ -1,3 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-const SvgAdd = ({ primarycolor, secondarycolor, ...props }) => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: secondarycolor || "none", viewBox: "0 0 24 24", ...props, children: _jsx("path", { stroke: primarycolor || "#1A1A1A", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M6 12h12M12 18V6" }) }));
-export default SvgAdd;

package/dist/icons/EyeSlash.d.ts

@@ -1,7 +0,0 @@
-import type { SVGProps } from "react";
-interface Props extends SVGProps<any> {
-    primarycolor?: string;
-    secondarycolor?: string;
-}
-declare const SvgEyeSlash: ({ primarycolor, secondarycolor, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
-export default SvgEyeSlash;

package/dist/icons/EyeSlash.js

@@ -1,3 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const SvgEyeSlash = ({ primarycolor, secondarycolor, ...props }) => (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: secondarycolor || "none", viewBox: "0 0 24 24", ...props, children: [_jsx("path", { stroke: primarycolor || "#1A1A1A", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "m14.53 9.47-5.06 5.06a3.576 3.576 0 1 1 5.06-5.06" }), _jsx("path", { stroke: primarycolor || "#1A1A1A", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M17.82 5.77C16.07 4.45 14.07 3.73 12 3.73c-3.53 0-6.82 2.08-9.11 5.68-.9 1.41-.9 3.78 0 5.19.79 1.24 1.71 2.31 2.71 3.17M8.42 19.53c1.14.48 2.35.74 3.58.74 3.53 0 6.82-2.08 9.11-5.68.9-1.41.9-3.78 0-5.19-.33-.52-.69-1.01-1.06-1.47" }), _jsx("path", { stroke: primarycolor || "#1A1A1A", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M15.51 12.7a3.565 3.565 0 0 1-2.82 2.82M9.47 14.53 2 22M22 2l-7.47 7.47" })] }));
-export default SvgEyeSlash;

package/dist/icons/Tick.d.ts

@@ -1,7 +0,0 @@
-import type { SVGProps } from "react";
-interface Props extends SVGProps<any> {
-    primarycolor?: string;
-    secondarycolor?: string;
-}
-declare const SvgTick: ({ primarycolor, secondarycolor, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
-export default SvgTick;

package/dist/icons/Tick.js

@@ -1,3 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-const SvgTick = ({ primarycolor, secondarycolor, ...props }) => (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: secondarycolor || "none", viewBox: "0 0 24 24", ...props, children: _jsx("path", { stroke: primarycolor || "#1A1A1A", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "m7.75 12 2.83 2.83 5.67-5.66" }) }));
-export default SvgTick;

package/dist/icons/Warning2.d.ts

@@ -1,7 +0,0 @@
-import type { SVGProps } from "react";
-interface Props extends SVGProps<any> {
-    primarycolor?: string;
-    secondarycolor?: string;
-}
-declare const SvgWarning2: ({ primarycolor, secondarycolor, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
-export default SvgWarning2;

package/dist/icons/Warning2.js

@@ -1,3 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const SvgWarning2 = ({ primarycolor, secondarycolor, ...props }) => (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: secondarycolor || "none", viewBox: "0 0 24 24", ...props, children: [_jsx("path", { stroke: primarycolor || "#1A1A1A", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M12 7.75V13M21.08 8.58v6.84c0 1.12-.6 2.16-1.57 2.73l-5.94 3.43c-.97.56-2.17.56-3.15 0l-5.94-3.43a3.15 3.15 0 0 1-1.57-2.73V8.58c0-1.12.6-2.16 1.57-2.73l5.94-3.43c.97-.56 2.17-.56 3.15 0l5.94 3.43c.97.57 1.57 1.6 1.57 2.73" }), _jsx("path", { stroke: primarycolor || "#1A1A1A", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 16.2v.1" })] }));
-export default SvgWarning2;