mui-design-system 0.0.39 → 0.0.41

package/dist/components/custom-date-picker/CustomComponent.js

@@ -3,7 +3,7 @@ import { InputAdornment, TextField } from '@mui/material';
 import SvgCalendar from '../../icons/Calendar';
 const CustomComponent = ({ openCalendar, value, handleValueChange, disabled, error, readonly, variant, lang, placeholder, inputLabelMode, label, withoutHelperText, ...rest }) => {
     const { sx, helperText, ...props } = rest;
-    return (_jsx(TextField, { placeholder: placeholder ?? lang === 'fa' ? 'انتخاب کنید' : 'Pick a date', error: Boolean(error), ...(inputLabelMode === 'static' && { hiddenLabel: true }), ...(inputLabelMode === 'relative' && { label: label }), fullWidth: true, variant: variant, sx: {
+    return (_jsx(TextField, { placeholder: 'انتخاب کنید', error: Boolean(error), ...(inputLabelMode === 'static' && { hiddenLabel: true }), ...(inputLabelMode === 'relative' && { label: label }), fullWidth: true, variant: variant, sx: {
             // ...(inputLabelMode === "static" && {
             //   ".MuiFilledInput-input": {
             //     py: "16px !important",
@@ -31,6 +31,6 @@ const CustomComponent = ({ openCalendar, value, handleValueChange, disabled, err
                         ? `${theme.palette.text.disabled} !important`
                         : 'text.primary',
                 }, children: _jsx(SvgCalendar, { primarycolor: 'inherit' }) })),
-        }, disabled: disabled, value: value, onFocus: openCalendar, onClick: openCalendar, onChange: handleValueChange, helperText: withoutHelperText ? undefined : error?.message ?? helperText ?? ' ', ...props }));
+        }, disabled: disabled, value: value, onFocus: openCalendar, onClick: openCalendar, onChange: handleValueChange, helperText: withoutHelperText ? undefined : (error?.message ?? helperText ?? ' '), ...props }));
 };
 export default CustomComponent;

package/dist/components/custom-date-picker/CustomDatePicker.js

@@ -13,12 +13,10 @@ const CustomDatePicker = ({ onChange, value, disabled, error, readOnly, textFiel
             onChange(convertDate);
         }
     };
-    let lang = document.documentElement.lang;
     const { palette } = useTheme();
     const [portalTarget, setPortalTarget] = useState();
     useEffect(() => {
         setColors(palette);
-        lang = document.documentElement.lang;
     }, [palette.mode, document.documentElement.lang]);
     useEffect(() => {
         const portalDiv = document.createElement("div");
@@ -32,11 +30,7 @@ const CustomDatePicker = ({ onChange, value, disabled, error, readOnly, textFiel
         };
     }, []);
     const defaultWeekDays = ["ش", "ی", "د", "س", "چ", "پ", "ج"];
-    return (_jsx(DatePicker, { className: "custom-calender", value: value ? new Date(value) : null, portal: true, portalTarget: portalTarget, hideOnScroll: true, onChange: handleChange, ...(lang === "fa" && {
-            weekDays: defaultWeekDays,
-            calendar: persian,
-            locale: persian_fa,
-        }), calendarPosition: "bottom-left", editable: false, disabled: disabled, containerStyle: { width: "100%" }, ...rest, render: _jsx(CustomComponent, { lang: lang, error: error, disabled: disabled, readonly: readOnly, label: label, inputLabelMode: inputLabelMode, openCalendar: undefined, value: value, handleValueChange: undefined, withoutHelperText: withoutHelperText, ...textFieldProps }) }));
+    return (_jsx(DatePicker, { className: 'custom-calender', value: value ? new Date(value) : null, portal: true, portalTarget: portalTarget, hideOnScroll: true, onChange: handleChange, weekDays: defaultWeekDays, calendar: persian, locale: persian_fa, calendarPosition: 'bottom-left', editable: false, disabled: disabled, containerStyle: { width: '100%' }, ...rest, render: _jsx(CustomComponent, { lang: 'fa', error: error, disabled: disabled, readonly: readOnly, label: label, inputLabelMode: inputLabelMode, openCalendar: undefined, value: value, handleValueChange: undefined, withoutHelperText: withoutHelperText, ...textFieldProps }) }));
 };
 export default CustomDatePicker;
 const setColors = (colors) => {

package/dist/components/form/Form.d.ts

@@ -5,17 +5,17 @@ import { TypographyProps } from "@mui/material/Typography";
 import { TFormSchema, TInputLabelMode } from "./type";
 import { TextFieldProps } from "@mui/material/TextField";
 export interface FormProps {
+    itemProps?: any;
+    disabled?: boolean;
     schema: TFormSchema;
-    form: UseFormReturn<any, any, any>;
-    gridContainerProps?: GridProps;
     gridItemProps?: GridProps;
-    itemProps?: any;
-    labelsProps?: Partial<TypographyProps<"label", {}>> | undefined;
     hideRequiredStar?: boolean;
+    withoutHelperText?: boolean;
+    gridContainerProps?: GridProps;
     inputLabelMode?: TInputLabelMode;
+    form: UseFormReturn<any, any, any>;
     inputVariants?: TextFieldProps["variant"];
-    withoutHelperText?: boolean;
-    disabled?: boolean;
+    labelsProps?: Partial<TypographyProps<"label", {}>> | undefined;
 }
 declare const Form: FC<FormProps>;
 export default Form;

package/dist/components/form/Form.js

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

package/dist/components/form/components/UFCheckbox.js

@@ -17,7 +17,7 @@ const UFCheckbox = ({ form, name, label, rules, error, helperText, withoutHelper
                         typography: {
                             ...props?.slotProps?.typography,
                         },
-                    }, control: _jsx(Checkbox, { color: "primary", checked: value, onChange: onChange, disabled: disabled, name: name, ...deepMerge(theme?.checkbox?.checkboxProps, itemProps, propsForCheckbox) }), label: label }), !withoutHelperText && (_jsx(Typography, { sx: {
+                    }, control: _jsx(Checkbox, { name: name, color: "primary", checked: value, onChange: onChange, disabled: disabled, ...deepMerge(theme?.checkbox?.checkboxProps, itemProps, propsForCheckbox) }), label: label }), !withoutHelperText && (_jsx(Typography, { sx: {
                         height: 23,
                         width: "max-content",
                         color: error ? "error.4" : "text.primary",

package/dist/mui/Checkbox/Checkbox.js

@@ -1,31 +1,77 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { keyframes } from '@mui/material/styles';
 import UnCheckedIcon from './assets/UnChekedIcon';
 import CheckedIcon from './assets/CheckedIcon';
 import IntermediateIcon from './assets/IntermediateIcon';
+const checkboxIconSize = {
+    small: 20,
+    medium: 24,
+    large: 32,
+};
+const checkboxRootSize = {
+    small: 34,
+    medium: 42,
+    large: 50,
+};
+const checkboxPop = keyframes `
+  0% { transform: scale(0.82); opacity: 0.4; }
+  65% { transform: scale(1.08); opacity: 1; }
+  100% { transform: scale(1); opacity: 1; }
+`;
+const drawCheckmark = keyframes `
+  from { stroke-dashoffset: 13; }
+  to { stroke-dashoffset: 0; }
+`;
+const drawIndeterminate = keyframes `
+  from { stroke-dashoffset: 8; }
+  to { stroke-dashoffset: 0; }
+`;
 export const MuiCheckbox = {
     defaultProps: {
+        size: 'medium',
         icon: _jsx(UnCheckedIcon, {}),
         checkedIcon: _jsx(CheckedIcon, {}),
         indeterminateIcon: _jsx(IntermediateIcon, {}),
     },
     styleOverrides: {
-        root: ({ theme, ownerState }) => ({
-            transition: 'transform 0.5s ease',
-            width: ownerState.size === 'small' ? '34px' : '42px',
-            height: ownerState.size === 'small' ? '34px' : '42px',
-            ':active': {
-                transform: 'scale(85%)',
-            },
-            '&.Mui-checked': {
-                fill: theme.palette[ownerState?.color ?? 'primary'].main,
-                stroke: theme.palette.text.primary,
-            },
-        }),
-        checked: ({ theme, ownerState }) => ({
-            fill: theme.palette[ownerState?.color ?? 'primary'].main,
-        }),
-        indeterminate: ({ theme, ownerState }) => ({
-            fill: theme.palette[ownerState?.color ?? 'primary'].main,
-        }),
+        root: ({ theme, ownerState }) => {
+            const size = ownerState.size ?? 'medium';
+            const iconSize = checkboxIconSize[size];
+            const rootSize = checkboxRootSize[size];
+            return {
+                color: theme.palette.divider,
+                padding: size === 'small' ? '7px' : '9px',
+                transition: 'transform 150ms ease',
+                width: rootSize,
+                height: rootSize,
+                '& svg': {
+                    width: iconSize,
+                    height: iconSize,
+                },
+                ':active': {
+                    transform: 'scale(85%)',
+                },
+                '&.Mui-checked, &.MuiCheckbox-indeterminate': {
+                    color: theme.palette[ownerState.color ?? 'primary'].main,
+                },
+                '&.Mui-checked svg, &.MuiCheckbox-indeterminate svg': {
+                    animation: `${checkboxPop} 180ms cubic-bezier(0.2, 0, 0, 1)`,
+                },
+                '&.Mui-checked svg path': {
+                    strokeDasharray: 13,
+                    animation: `${drawCheckmark} 220ms 40ms ease-out both`,
+                },
+                '&.MuiCheckbox-indeterminate svg path': {
+                    strokeDasharray: 8,
+                    animation: `${drawIndeterminate} 180ms 40ms ease-out both`,
+                },
+                '@media (prefers-reduced-motion: reduce)': {
+                    transition: 'none',
+                    '& svg, & svg path': {
+                        animation: 'none',
+                    },
+                },
+            };
+        },
     },
 };

package/dist/mui/Checkbox/assets/CheckedIcon.d.ts

@@ -1,8 +1,3 @@
-import { type SVGProps } from "react";
-type ColorTypes = "default" | "primary" | "secondary" | "error" | "info" | "success" | "warning";
-interface Props extends SVGProps<any> {
-    backgroundColor?: ColorTypes;
-    borderColor?: string;
-}
-declare const CheckedIcon: ({ borderColor, backgroundColor, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+import { type SVGProps } from 'react';
+declare const CheckedIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
 export default CheckedIcon;

package/dist/mui/Checkbox/assets/CheckedIcon.js

@@ -1,12 +1,3 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useTheme } from "@mui/material";
-const CheckedIcon = ({ borderColor, backgroundColor, ...props }) => {
-    const theme = useTheme();
-    const svgBackgroundColor = backgroundColor
-        ? theme.palette[backgroundColor ?? "primary"].main
-        : "inherit";
-    const svgBorderColor = borderColor ?? "inherit";
-    const svgInnerElementColor = theme.palette.grey[1];
-    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: svgBackgroundColor || "none", viewBox: "0 0 24 24", ...props, children: [_jsx("path", { stroke: svgBorderColor || "#1A1A1A", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M9 22h6c5 0 7-2 7-7V9c0-5-2-7-7-7H9C4 2 2 4 2 9v6c0 5 2 7 7 7" }), _jsx("path", { stroke: svgInnerElementColor || "#1A1A1A", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "m7.75 12 2.83 2.83 5.67-5.66" })] }));
-};
+const CheckedIcon = (props) => (_jsxs("svg", { xmlns: 'http://www.w3.org/2000/svg', width: 24, height: 24, viewBox: '0 0 24 24', fill: 'none', ...props, children: [_jsx("rect", { width: 20, height: 20, x: 2, y: 2, rx: 3.5, fill: 'currentColor' }), _jsx("path", { d: 'm7.5 12 3 3 6-6', stroke: '#fff', strokeLinecap: 'round', strokeLinejoin: 'round', strokeWidth: 2 })] }));
 export default CheckedIcon;

package/dist/mui/Checkbox/assets/IntermediateIcon.d.ts

@@ -1,8 +1,3 @@
 import { type SVGProps } from 'react';
-type ColorTypes = 'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning';
-interface Props extends SVGProps<any> {
-    backgroundColor?: ColorTypes;
-    borderColor?: string;
-}
-declare const IntermediateIcon: ({ borderColor, backgroundColor, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const IntermediateIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
 export default IntermediateIcon;

package/dist/mui/Checkbox/assets/IntermediateIcon.js

@@ -1,10 +1,3 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useTheme } from "@mui/material";
-const IntermediateIcon = ({ borderColor, backgroundColor, ...props }) => {
-    const theme = useTheme();
-    const svgInnerElementColor = theme.palette.background.paper;
-    const svgBorderColor = borderColor ?? theme.palette.text.primary;
-    const svgBackgroundColor = theme.palette[backgroundColor ?? 'primary'].main;
-    return (_jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: svgBackgroundColor || "none", viewBox: "0 0 24 24", ...props, children: [_jsx("path", { stroke: svgBorderColor || "#1A1A1A", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M9 22h6c5 0 7-2 7-7V9c0-5-2-7-7-7H9C4 2 2 4 2 9v6c0 5 2 7 7 7" }), _jsx("path", { stroke: svgInnerElementColor || "#1A1A1A", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M8 12h8M9 0" })] }));
-};
+const IntermediateIcon = (props) => (_jsxs("svg", { xmlns: 'http://www.w3.org/2000/svg', width: 24, height: 24, viewBox: '0 0 24 24', fill: 'none', ...props, children: [_jsx("rect", { width: 20, height: 20, x: 2, y: 2, rx: 3.5, fill: 'currentColor' }), _jsx("path", { d: 'M8 12h8', stroke: '#fff', strokeLinecap: 'round', strokeWidth: 2 })] }));
 export default IntermediateIcon;

package/dist/mui/Checkbox/assets/UnChekedIcon.d.ts

@@ -1,7 +1,3 @@
 import { type SVGProps } from 'react';
-interface Props extends SVGProps<any> {
-    backgroundColor?: 'default' | 'primary' | 'secondary' | 'error' | 'info' | 'success' | 'warning';
-    borderColor?: string;
-}
-declare const UnCheckedIcon: ({ backgroundColor, borderColor, ...props }: Props) => import("react/jsx-runtime").JSX.Element;
+declare const UnCheckedIcon: (props: SVGProps<SVGSVGElement>) => import("react/jsx-runtime").JSX.Element;
 export default UnCheckedIcon;

package/dist/mui/Checkbox/assets/UnChekedIcon.js

@@ -1,9 +1,3 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useTheme } from "@mui/material";
-const UnCheckedIcon = ({ backgroundColor, borderColor, ...props }) => {
-    const theme = useTheme();
-    const svgBackgroundColor = backgroundColor ? theme.palette[backgroundColor ?? 'primary'].main : undefined;
-    const svgBorderColor = borderColor ?? theme.palette.text.primary;
-    return (_jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, fill: svgBackgroundColor || "none", viewBox: "0 0 24 24", ...props, children: _jsx("path", { stroke: svgBorderColor || "#1A1A1A", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M9.3 21h5.4c4.5 0 6.3-1.8 6.3-6.3V9.3C21 4.8 19.2 3 14.7 3H9.3C4.8 3 3 4.8 3 9.3v5.4C3 19.2 4.8 21 9.3 21" }) }));
-};
+const UnCheckedIcon = (props) => (_jsx("svg", { xmlns: 'http://www.w3.org/2000/svg', width: 24, height: 24, viewBox: '0 0 24 24', fill: 'none', ...props, children: _jsx("rect", { width: 19, height: 19, x: 2.5, y: 2.5, rx: 3.5, stroke: 'currentColor', strokeWidth: 1 }) }));
 export default UnCheckedIcon;

package/dist/mui/Select/MuiSelect.js

@@ -34,11 +34,7 @@ export const MuiSelect = {
                 pointerEvents: 'none',
                 backgroundColor: theme.palette.background[3],
             }),
-            '&.Mui-disabled': {
-                stroke: theme.palette.background['1'],
-                color: theme.palette.text.disabled,
-                backgroundColor: theme.palette.background['1'],
-            },
+            '&.Mui-disabled': {},
             '&.Mui-error': {
                 stroke: theme.palette.error[3],
             },

package/dist/mui/TextField/MuiOutlinedInput.js

@@ -1,64 +1,53 @@
 export const MuiOutlinedInput = {
     styleOverrides: {
         root: ({ ownerState, theme }) => ({
-            stroke: theme.palette.text.primary,
             borderRadius: theme.spacing(2),
             minWidth: 80,
-            ...theme.typography?.["body-s-medium"],
+            height: ownerState.size === 'small' ? 40 : ownerState.multiline ? 'auto' : 48,
+            ...theme.typography['body-s-medium'],
             lineHeight: '100%',
-            height: ownerState.size === 'small'
-                ? '40px'
-                : ownerState.multiline
-                    ? 'auto'
-                    : '48px',
+            paddingRight: 10,
+            // Input text
             '& .MuiOutlinedInput-input': {
                 display: 'flex',
                 alignItems: 'center',
-                color: `${theme.palette.text.primary} !important`,
+                color: theme.palette.text.primary + ' !important',
                 ...(ownerState.readOnly && {
                     pointerEvents: 'none',
-                    backgroundColor: 'shadow.2',
-                    color: 'text.disabled',
+                    color: theme.palette.text.disabled,
                 }),
             },
-            //Temporary Added
-            paddingRight: 10,
-            //Disable state
+            // Disabled state
             '&.Mui-disabled': {
                 pointerEvents: 'none',
+                backgroundColor: theme.palette.text[4],
                 '& .MuiInputAdornment-root': {
                     stroke: theme.palette.text[8],
                 },
-                backgroundColor: theme.palette.text[4],
             },
-            //Label that goes on the border of component
+            // Normal outline
             '& .MuiOutlinedInput-notchedOutline': {
                 transition: 'border-color 0.2s ease',
-                ...theme.typography?.["body-s-medium"],
-                ...(ownerState.disabled && {
-                    border: 'none',
-                }),
             },
-            //Main border color on hover
+            // ❗ FIX: Prevent hover border color change
             '&:hover .MuiOutlinedInput-notchedOutline': {
-                borderColor: theme.palette.text.primary,
+                borderColor: theme.palette.text[6],
             },
-            //Focused State
-            '&.Mui-focused ': {
-                '& .MuiOutlinedInput-notchedOutline': {
-                    borderColor: theme.palette[ownerState.color ?? 'primary'].main,
-                    borderWidth: 1,
-                },
+            // Focused
+            '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+                borderColor: theme.palette[ownerState.color ?? 'primary'].main,
+                borderWidth: 1,
             },
-            //Error State
-            '&.Mui-error ': {
-                stroke: theme.palette.error[3],
+        }),
+        error: ({ theme }) => ({
+            // Error
+            '&.Mui-error': {
                 '& .MuiOutlinedInput-notchedOutline': {
-                    borderColor: theme.palette.error['3'],
+                    borderColor: theme.palette.error.main,
                     borderWidth: 1,
                 },
                 '& .MuiInputAdornment-root': {
-                    stroke: theme.palette.error['2'],
+                    stroke: theme.palette.error.dark,
                 },
             },
         }),

package/dist/mui/menu/MuiMenuItem.js

@@ -8,7 +8,6 @@ export const MuiMenuItem = {
                 backgroundColor: theme.palette.primary[1]
             },
             color: theme.palette.text.primary,
-            ...theme.typography['body-2xs'],
         })
     },
 };

package/dist/mui/palette/dark/darkPalette.js

@@ -1,11 +1,11 @@
 export const darkPalette = {
     primary: {
         main: '#6950f3',
-        contrastText: "#fff"
+        contrastText: '#fff',
     },
     secondary: {
         main: '#0d1619',
-        contrastText: "#fff"
+        contrastText: '#fff',
     },
     divider: '#D4D4D4',
     background: {
@@ -32,50 +32,34 @@ export const darkPalette = {
         primary: '#FFFFFF',
         secondary: '#FDFDFD',
         disabled: '#F7F7F7',
-        "16": "rgb(255,255,255)",
-        "15": "rgb(238,238,238)",
-        "14": "rgb(221,221,221)",
-        "13": "rgb(204,204,204)",
-        "12": "rgb(187,187,187)",
-        "11": "rgb(170,170,170)",
-        "10": "rgb(153,153,153)",
-        "8": "rgb(119,119,119)",
-        "9": "rgb(136,136,136)",
-        "7": "rgb(102,102,102)",
-        "6": "rgb(85,85,85)",
-        "5": "rgb(68,68,68)",
-        "4": "rgb(51,51,51)",
-        "3": "rgb(34,34,34)",
-        "2": "rgb(17,17,17)",
-        "1": "#0d1619",
+        '16': 'rgb(255,255,255)',
+        '15': 'rgb(238,238,238)',
+        '14': 'rgb(221,221,221)',
+        '13': 'rgb(204,204,204)',
+        '12': 'rgb(187,187,187)',
+        '11': 'rgb(170,170,170)',
+        '10': 'rgb(153,153,153)',
+        '8': 'rgb(119,119,119)',
+        '9': 'rgb(136,136,136)',
+        '7': 'rgb(102,102,102)',
+        '6': 'rgb(85,85,85)',
+        '5': 'rgb(68,68,68)',
+        '4': 'rgb(51,51,51)',
+        '3': 'rgb(34,34,34)',
+        '2': 'rgb(17,17,17)',
+        '1': '#0d1619',
     },
     inherit: {
-        light: "inherit",
-        dark: "inherit",
-        contrastText: "inherit",
-        main: "#1A1A1A",
-        16: 'inherit',
-        15: 'inherit',
-        14: 'inherit',
-        13: 'inherit',
-        12: 'inherit',
-        11: 'inherit',
-        10: 'inherit',
-        9: 'inherit',
-        8: 'inherit',
-        7: 'inherit',
-        6: 'inherit',
-        5: 'inherit',
-        4: 'inherit',
-        3: 'inherit',
-        2: 'inherit',
-        1: 'inherit',
+        light: 'rgb(51,51,51)',
+        dark: 'rgb(17,17,17)',
+        contrastText: '#0d1619',
+        main: '#FDFDFD',
     },
     default: {
-        light: "#616161",
-        dark: "#616161",
-        contrastText: "#616161",
-        main: "#1A1A1A",
+        light: '#616161',
+        dark: '#616161',
+        contrastText: '#616161',
+        main: '#1A1A1A',
         16: '#1A1A1A',
         15: '#303030',
         14: '#4A4A4A',
@@ -92,5 +76,5 @@ export const darkPalette = {
         3: '#FAFAFA',
         2: '#FDFDFD',
         1: '#FFFFFF',
-    }
+    },
 };

package/dist/mui/palette/light/lightPalette.js

@@ -1,11 +1,11 @@
 export const lightPalette = {
     primary: {
         main: '#6950f3',
-        contrastText: "#fff"
+        contrastText: '#fff',
     },
     secondary: {
         main: '#0d1619',
-        contrastText: "#fff"
+        contrastText: '#fff',
     },
     divider: '#D4D4D4',
     background: {
@@ -23,7 +23,9 @@ export const lightPalette = {
         main: '#E1CB00',
     },
     error: {
-        main: '#B5260B',
+        main: '#d4163a',
+        light: '#f81a43',
+        dark: '#9a112c',
     },
     info: {
         main: '#007CB4',
@@ -32,50 +34,34 @@ export const lightPalette = {
         primary: '#0d1619',
         secondary: '#141414',
         disabled: '#303030',
-        "16": "#0d1619",
-        "15": "rgb(17,17,17)",
-        "14": "rgb(34,34,34)",
-        "13": "rgb(51,51,51)",
-        "12": "rgb(68,68,68)",
-        "11": "rgb(85,85,85)",
-        "10": "rgb(102,102,102)",
-        "9": "rgb(119,119,119)",
-        "8": "rgb(136,136,136)",
-        "7": "rgb(153,153,153)",
-        "6": "rgb(170,170,170)",
-        "5": "rgb(187,187,187)",
-        "4": "rgb(204,204,204)",
-        "3": "rgb(221,221,221)",
-        "2": "rgb(238,238,238)",
-        "1": "rgb(255,255,255)",
+        '16': '#0d1619',
+        '15': 'rgb(17,17,17)',
+        '14': 'rgb(34,34,34)',
+        '13': 'rgb(51,51,51)',
+        '12': 'rgb(68,68,68)',
+        '11': 'rgb(85,85,85)',
+        '10': 'rgb(102,102,102)',
+        '9': 'rgb(119,119,119)',
+        '8': 'rgb(136,136,136)',
+        '7': 'rgb(153,153,153)',
+        '6': 'rgb(170,170,170)',
+        '5': 'rgb(187,187,187)',
+        '4': 'rgb(204,204,204)',
+        '3': 'rgb(221,221,221)',
+        '2': 'rgb(238,238,238)',
+        '1': 'rgb(255,255,255)',
     },
     inherit: {
-        light: "inherit",
-        dark: "inherit",
-        contrastText: "inherit",
-        main: "#1A1A1A",
-        16: 'inherit',
-        15: 'inherit',
-        14: 'inherit',
-        13: 'inherit',
-        12: 'inherit',
-        11: 'inherit',
-        10: 'inherit',
-        9: 'inherit',
-        8: 'inherit',
-        7: 'inherit',
-        6: 'inherit',
-        5: 'inherit',
-        4: 'inherit',
-        3: 'inherit',
-        2: 'inherit',
-        1: 'inherit',
+        light: 'rgb(238,238,238)',
+        dark: 'rgb(204,204,204)',
+        contrastText: '#FDFDFD',
+        main: '#0d1619',
     },
     default: {
-        light: "#616161",
-        dark: "#616161",
-        contrastText: "#616161",
-        main: "#1A1A1A",
+        light: '#616161',
+        dark: '#616161',
+        contrastText: '#616161',
+        main: '#1A1A1A',
         16: '#1A1A1A',
         15: '#303030',
         14: '#4A4A4A',
@@ -92,5 +78,5 @@ export const lightPalette = {
         3: '#FAFAFA',
         2: '#FDFDFD',
         1: '#FFFFFF',
-    }
+    },
 };

package/dist/theme/theme.js

@@ -27,6 +27,7 @@ import { MuiBreadcrumbs } from '../mui/BreadCrumbs/MuiBreadCrumbs';
 import { MuiDialog } from '../mui/Dialog/MuiDialog';
 import { breakpoints } from '../mui/breakpoints';
 import { MuiMenuItem } from '../mui/menu/MuiMenuItem';
+import { MuiCheckbox } from '../mui/Checkbox/Checkbox';
 const getDesignTokens = (mode) => ({
     mode,
     ...(mode === 'light' ? lightPalette : darkPalette),
@@ -38,30 +39,31 @@ export const themeOptions = (mode, isRtl) => ({
     typography,
     breakpoints,
     components: {
-        MuiCssBaseline,
-        MuiAccordion,
-        MuiAlert,
         MuiChip,
-        MuiPagination,
-        MuiPaginationItem,
-        MuiSelect,
-        MuiIconButton,
         MuiMenu,
         MuiCard,
-        MuiTypography,
-        MuiInputLabel,
-        MuiTooltip,
-        MuiFormControlLabel,
-        MuiInputAdornment,
-        MuiAutocomplete,
-        MuiBreadcrumbs,
+        MuiRadio,
+        MuiAlert,
         MuiDialog,
+        MuiSelect,
+        MuiButton,
+        MuiSwitch,
+        MuiTooltip,
         MuiMenuItem,
+        MuiCheckbox,
         MuiTextField,
-        MuiOutlinedInput,
+        MuiAccordion,
+        MuiInputLabel,
+        MuiIconButton,
+        MuiTypography,
+        MuiPagination,
+        MuiCssBaseline,
         MuiFilledInput,
-        MuiButton,
-        MuiSwitch,
-        MuiRadio,
+        MuiBreadcrumbs,
+        MuiAutocomplete,
+        MuiOutlinedInput,
+        MuiPaginationItem,
+        MuiInputAdornment,
+        MuiFormControlLabel,
     },
 });

package/dist/types/types.d.ts

@@ -34,6 +34,9 @@ declare module '@mui/material/Checkbox/Checkbox' {
     interface CheckboxProps {
         customColor?: string;
     }
+    interface CheckboxPropsSizeOverrides {
+        large: true;
+    }
 }
 declare module '@mui/material/Chip' {
     interface ChipOwnProps {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mui-design-system",
-  "version": "0.0.39",
+  "version": "0.0.41",
   "description": "MUI-based design system with theme, form components, and utilities",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -69,4 +69,4 @@
   "bugs": {
     "url": "https://github.com/MohammadPj/design-system/issues"
   }
-}
+}