mui-design-system 0.0.21 → 0.0.22

package/dist/mui/InputLabel/MuiInputLabel.js

@@ -1,43 +0,0 @@
-// import { OverridesStyleRules } from "@mui/material/styles/overrides";
-// import { InputLabelProps, InputLabelClasses } from "@mui/material/InputLabel";
-// type TMuiInputLabel =
-//   | {
-//       defaultProps?: Partial<InputLabelProps> | undefined;
-//       styleOverrides?:
-//         | Partial<
-//             OverridesStyleRules<
-//               keyof InputLabelClasses,
-//               "MuiInputLabel",
-//               Omit<Theme, "components">
-//             >
-//           >
-//         | undefined;
-//       variants?: [] | undefined;
-//     }
-//   | undefined;
-export const MuiInputLabel = {
-    styleOverrides: {
-        root: ({ ownerState, theme }) => ({
-            color: theme.palette.text.primary,
-            textAlign: 'start',
-            ...theme.typography?.["body3.medium"],
-            lineHeight: '150%',
-            // ...(ownerState.variant === "outlined"
-            //   ? {
-            //       top: "-2px",
-            //     }
-            //   : {
-            //       top: "-5px",
-            //     }),
-            // "&.Mui-focused": {
-            //   ...(ownerState.variant === "outlined"
-            //     ? {
-            //         top: "0px",
-            //       }
-            //     : {
-            //         top: "0px",
-            //       }),
-            // },
-        }),
-    },
-};

package/dist/mui/Pagination/MuiPagination.d.ts

@@ -1,2 +0,0 @@
-import { Components, Theme } from "@mui/material/styles";
-export declare const MuiPagination: Components<Theme>['MuiPagination'];

package/dist/mui/Pagination/MuiPagination.js

@@ -1,15 +0,0 @@
-export const MuiPagination = {
-    defaultProps: {
-        color: "primary",
-        hideNextButton: true,
-        hidePrevButton: true,
-        dir: "ltr",
-    },
-    styleOverrides: {
-        root: ({ ownerState, theme }) => ({
-            display: "flex",
-            justifyContent: "center",
-            "& ul": { gap: 8 }
-        }),
-    },
-};

package/dist/mui/Pagination/MuiPaginationItem.d.ts

@@ -1,2 +0,0 @@
-import { Components, Theme } from "@mui/material/styles";
-export declare const MuiPaginationItem: Components<Theme>['MuiPaginationItem'];

package/dist/mui/Pagination/MuiPaginationItem.js

@@ -1,15 +0,0 @@
-export const MuiPaginationItem = {
-    defaultProps: {},
-    styleOverrides: {
-        root: ({ ownerState, theme }) => ({
-            fontSize: "10px",
-            fontWeight: 300,
-            minWidth: 18,
-            height: 18,
-            "&.Mui-selected": {
-                fontSize: "12px",
-                fontWeight: 700
-            },
-        }),
-    },
-};

package/dist/mui/Radio/MuiRadio.d.ts

@@ -1,2 +0,0 @@
-import { Components, Theme } from '@mui/material/styles';
-export declare const MuiRadio: Components<Theme>['MuiRadio'];

package/dist/mui/Radio/MuiRadio.js

@@ -1,17 +0,0 @@
-export const MuiRadio = {
-    defaultProps: { size: 'small' },
-    styleOverrides: {
-        root: ({ theme, ownerState }) => ({
-            padding: '0px',
-            margin: '0px 4px',
-            color: theme.palette.text.primary,
-            '& .Mui-checked': {
-                color: theme.palette[ownerState.color ?? 'primary'].main,
-            },
-            '& .MuiSvgIcon-root': {
-                width: ownerState.size === 'small' ? 16 : 20,
-                height: ownerState.size === 'small' ? 16 : 20,
-            },
-        }),
-    },
-};

package/dist/mui/Select/MuiSelect.d.ts

@@ -1,2 +0,0 @@
-import { Components, Theme } from '@mui/material/styles';
-export declare const MuiSelect: Components<Theme>['MuiSelect'];

package/dist/mui/Select/MuiSelect.js

@@ -1,47 +0,0 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import SvgArrowDown from '../../icons/ArrowDown';
-export const MuiSelect = {
-    defaultProps: {
-        IconComponent: () => (_jsx(SvgArrowDown, { className: 'MuiSelect MuiSelect-popupIcon', primarycolor: 'inherit' })),
-        MenuProps: {
-            slotProps: {
-                paper: {
-                    sx: {
-                        boxShadow: '0px 0px 10px rgba(94, 129, 233, 0.2)',
-                        maxHeight: 250,
-                        backgroundColor: (theme) => theme.palette.background.default,
-                    },
-                },
-            },
-        },
-    },
-    styleOverrides: {
-        root: ({ theme, ownerState }) => ({
-            ...(ownerState.variant === 'filled' && {
-                backgroundColor: theme.palette.mode === 'light'
-                    ? theme.palette.background[3]
-                    : theme.palette.background['1'],
-            }),
-            ...(ownerState.variant === 'outlined' && {
-                backgroundColor: 'transparent',
-            }),
-            paddingRight: `${theme.spacing(2)}`,
-            stroke: theme.palette.text.primary,
-            color: theme.palette.mode === 'light'
-                ? theme.palette.text.primary
-                : theme.palette.text.secondary,
-            ...(ownerState.readOnly && {
-                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-error': {
-                stroke: theme.palette.error[3],
-            },
-        }),
-    },
-};

package/dist/mui/Switch/MuiSwitch.d.ts

@@ -1,2 +0,0 @@
-import { Components, Theme } from "@mui/material/styles";
-export declare const MuiSwitch: Components<Theme>['MuiSwitch'];

package/dist/mui/Switch/MuiSwitch.js

@@ -1,83 +0,0 @@
-export const MuiSwitch = {
-    defaultProps: { centerRipple: true },
-    styleOverrides: {
-        root: ({ ownerState, theme }) => ({
-            boxSizing: 'border-box',
-            margin: '1rem',
-            width: ownerState.size === "small" ? "50px" : "71px",
-            height: ownerState.size === "small" ? "22px" : "29px",
-            padding: '0px',
-            overflow: 'visible',
-            //Track initial styles
-            '& .MuiSwitch-track': {
-                boxSizing: 'border-box',
-                borderRadius: ownerState.size === "small" ? "24px" : "31px",
-                height: ownerState.size === "small" ? "24px" : "31px",
-                border: '1px solid',
-                borderColor: theme.palette.divider,
-                backgroundColor: theme.palette.background[4],
-                opacity: 1,
-                transition: theme.transitions.create(['background-color', 'border-color'], {
-                    duration: 500,
-                }),
-            },
-            //Toggle Initial Styles
-            '& .MuiSwitch-thumb': {
-                boxSizing: 'border-box',
-                width: ownerState.size === "small" ? "20px" : "27px",
-                height: ownerState.size === "small" ? "20px" : "27px",
-                boxShadow: `none`,
-                border: `1px solid ${theme.palette.divider} `,
-                backgroundColor: theme.palette.mode === 'light'
-                    ? theme.palette.background[4]
-                    : theme.palette.background[1],
-            },
-            //Component states and actions styles
-            '& .MuiSwitch-switchBase': {
-                padding: "0px",
-                margin: "2px",
-                transition: theme.transitions.create(['transform', 'box-shadow'], {
-                    duration: 300,
-                }),
-                '&:hover': {
-                    boxShadow: `0px 0px 0px 7px ${theme?.palette?.[ownerState?.color || "primary"]?.main}20`,
-                },
-                //Checked state styles
-                '&.Mui-checked': {
-                    transform: ownerState.size === "small" ? 'translateX(26px)' : 'translateX(40px)',
-                    '& .MuiSwitch-thumb': {
-                        borderColor: theme.palette[ownerState?.color ?? 'primary']['5'],
-                        backgroundColor: theme.palette[ownerState?.color ?? 'primary']['4'],
-                    },
-                    '& + .MuiSwitch-track': {
-                        borderColor: theme.palette[ownerState?.color ?? 'primary']['2'],
-                        backgroundColor: theme.palette[ownerState?.color ?? 'primary']['2'],
-                        opacity: 1,
-                    },
-                    '&.Mui-disabled + .MuiSwitch-track': {
-                        opacity: 0.5,
-                    },
-                    '&.Mui-disabled + .MuiSwitch-thumb': {
-                        opacity: 0.5,
-                    },
-                },
-                '&.Mui-focusVisible .MuiSwitch-thumb': {
-                    color: theme.palette[ownerState?.color ?? 'primary'].main,
-                },
-                //Disabled state styled
-                '&.Mui-disabled .MuiSwitch-thumb': {
-                    opacity: theme.palette.mode === 'light' ? 0.7 : 0.3,
-                    borderColor: theme.palette.divider,
-                    backgroundColor: theme.palette.mode === 'light'
-                        ? theme.palette.background[1]
-                        : theme.palette.background[4],
-                },
-                '&.Mui-disabled + .MuiSwitch-track': {
-                    opacity: theme.palette.mode === 'light' ? 0.7 : 0.3,
-                    borderColor: theme.palette.text[10],
-                    backgroundColor: theme.palette.text[9]
-                },
-            },
-        }),
-    },
-};

package/dist/mui/Tabs/MuiTabs.d.ts

@@ -1,2 +0,0 @@
-import { Components, Theme } from "@mui/material/styles";
-export declare const MuiTabs: Components<Theme>['MuiTabs'];

package/dist/mui/Tabs/MuiTabs.js

@@ -1,21 +0,0 @@
-export const MuiTabs = {
-    defaultProps: { TabIndicatorProps: { hidden: true } },
-    styleOverrides: {
-        root: ({ ownerState, theme }) => ({
-            ...(ownerState.orientation === 'vertical' ? {
-                width: 'max-content',
-                borderRight: '1px solid',
-            } : {
-                borderBottom: '1px solid',
-            }),
-            borderColor: theme.palette.text.primary,
-        }),
-        flexContainer: ({ ownerState, theme }) => ({
-            marginBottom: '4px',
-            ...(ownerState.orientation === 'vertical' && { width: '100%', paddingRight: '4px' })
-        }),
-        indicator: ({ ownerState, theme }) => ({
-        // display:'none'
-        }),
-    },
-};

package/dist/mui/Tabs/Tab/MuiTab.d.ts

@@ -1,2 +0,0 @@
-import { Components, Theme } from "@mui/material/styles";
-export declare const MuiTab: Components<Theme>['MuiTab'];

package/dist/mui/Tabs/Tab/MuiTab.js

@@ -1,26 +0,0 @@
-export const MuiTab = {
-    defaultProps: { disableRipple: true, iconPosition: 'start', },
-    styleOverrides: {
-        root: ({ ownerState, theme }) => ({
-            padding: '12px 16px',
-            width: 'max-content',
-            minHeight: 'max-content',
-            color: theme.palette.text.primary,
-            stroke: theme.palette.text.primary,
-            ...theme.typography.body3,
-            textTransform: 'none',
-            transition: 'transform 0.2s',
-            ':active': {
-                transform: 'scale(95%)'
-            },
-            '&.Mui-selected': {
-                transition: 'background-color transform 0.2s',
-                backgroundColor: theme.palette.mode === 'light' ? theme.palette.primary.main : theme.palette.text.primary,
-                color: theme.palette.mode === 'light' ? theme.palette.text.secondary : theme.palette.primary.main,
-                stroke: theme.palette.mode === 'light' ? theme.palette.text.secondary : theme.palette.primary.main,
-                borderRadius: theme.shape.borderRadius * 2,
-                fontWeight: 500,
-            },
-        }),
-    },
-};

package/dist/mui/TextField/MuiFilledInput.d.ts

@@ -1,2 +0,0 @@
-import { Components, Theme } from '@mui/material/styles';
-export declare const MuiFilledInput: Components<Theme>['MuiFilledInput'];

package/dist/mui/TextField/MuiFilledInput.js

@@ -1,91 +0,0 @@
-// import { OverridesStyleRules } from "@mui/material/styles/overrides";
-// import {
-//   FilledInputProps,
-//   FilledInputClasses,
-// } from "@mui/material/FilledInput";
-// type TMuiFilledInput =
-//   | {
-//       defaultProps?: Partial<FilledInputProps> | undefined;
-//       styleOverrides?:
-//         | Partial<
-//             OverridesStyleRules<
-//               keyof FilledInputClasses,
-//               "MuiFilledInput",
-//               Omit<Theme, "components">
-//             >
-//           >
-//         | undefined;
-//       variants?: [] | undefined;
-//     }
-//   | undefined;
-export const MuiFilledInput = {
-    styleOverrides: {
-        root: ({ ownerState, theme }) => ({
-            stroke: theme.palette.text.primary,
-            minWidth: 80,
-            minHeight: ownerState.size === 'small' ? '40px' : '48px',
-            ...theme.typography?.["body3.medium"],
-            lineHeight: '100%',
-            backgroundColor: theme.palette.text['4'],
-            ...(ownerState.readOnly && {
-                backgroundColor: theme.palette.text[9] + ' !important',
-            }),
-            paddingTop: '0 !important',
-            paddingBottom: '0 !important',
-            //Temporary Added
-            paddingRight: 10,
-            border: `1px solid ${theme.palette.background[4]}`,
-            borderRadius: theme.shape.borderRadius * 2,
-            transition: 'all 0.2s ease',
-            color: theme.palette.mode === 'light'
-                ? theme.palette.text.primary
-                : theme.palette.text.secondary,
-            '& .MuiFilledInput-input': {
-                backgroundColor: 'transparent !important',
-                display: 'flex',
-                alignItems: 'center',
-                '& textarea': {
-                    height: '100%',
-                },
-            },
-            '& textarea': {
-                padding: '25px 0 8px 0',
-                fontWeight: 400,
-            },
-            //Focused state
-            '&.Mui-focused': {
-                borderColor: `${theme.palette[ownerState.color ?? 'primary']['3']} !important`,
-                backgroundColor: `${theme.palette[ownerState.color ?? 'primary']['1']}`,
-            },
-            '&:hover': {
-                backgroundColor: `${theme.palette[ownerState.color ?? 'primary']['1']}`,
-                color: theme.palette[ownerState.color ?? 'primary']['10'],
-            },
-            //Line under Filled TextField
-            '&::before': { display: 'none' },
-            '&::after': { display: 'none' },
-            //Error State
-            '&.Mui-error ': {
-                backgroundColor: `${theme.palette.error['3']}20`,
-                borderColor: `${theme.palette.error['3']} !important`,
-                stroke: theme.palette.error[3],
-                '& .MuiInputAdornment-root': {
-                    stroke: theme.palette.error['4'],
-                },
-                '& .MuiFormHelperText-root': {
-                    color: theme.palette.error['4'],
-                },
-                '&:hover': {
-                    color: theme.palette.text.primary,
-                },
-            },
-            //Disable state
-            '&.Mui-disabled': {
-                pointerEvents: 'none',
-                '& .MuiInputAdornment-root': {
-                    stroke: theme.palette,
-                },
-            },
-        }),
-    },
-};

package/dist/mui/TextField/MuiOutlinedInput.d.ts

@@ -1,2 +0,0 @@
-import { Components, Theme } from '@mui/material/styles';
-export declare const MuiOutlinedInput: Components<Theme>['MuiOutlinedInput'];

package/dist/mui/TextField/MuiOutlinedInput.js

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

package/dist/mui/TextField/TextField.d.ts

@@ -1,2 +0,0 @@
-import { Components, Theme } from '@mui/material/styles';
-export declare const MuiTextField: Components<Theme>['MuiTextField'];

package/dist/mui/TextField/TextField.js

@@ -1,78 +0,0 @@
-export const MuiTextField = {
-    styleOverrides: {
-        root: ({ theme, ownerState }) => {
-            return {
-                '.MuiSelect-popupIcon': {
-                    marginRight: '2px',
-                    maxWidth: 21,
-                    width: '100%',
-                    transition: '0.3s ease all',
-                    transform: ownerState.SelectProps?.open ? 'rotate(180deg)' : 'unset',
-                },
-                color: ownerState.error
-                    ? theme.palette.error['4']
-                    : theme.palette.text.primary,
-                WebkitTextFillColor: ownerState.error
-                    ? `${theme.palette.error['4']} !important`
-                    : theme.palette.text.primary,
-                ...(ownerState['aria-readonly'] && {
-                    pointerEvents: 'none',
-                    WebkitTextFillColor: `${theme.palette.text.disabled} !important`,
-                    color: `${theme.palette.text.disabled} !important`,
-                    '& .MuiOutlinedInput-root': {
-                        backgroundColor: theme.palette.background['1'],
-                    },
-                    '& .MuiInputLabel-root': {
-                        color: `${theme.palette.text.disabled} !important`,
-                    },
-                }),
-                minWidth: 'auto',
-                input: {
-                    '&::placeholder': {
-                        fontWeight: 400,
-                        fontSize: 'smaller',
-                        color: theme.palette.grey['12'],
-                    },
-                },
-                //Base Input & Text area components
-                '& .MuiInputBase-input': {
-                    borderRadius: theme.shape.borderRadius / 2,
-                    '&:-webkit-autofill': {
-                        WebkitTextFillColor: theme.palette.text.primary,
-                        transition: 'background-color 5000s ease-in-out 0s',
-                        boxShadow: 'unset',
-                    },
-                    '& textarea': {
-                        paddingTop: 4,
-                    },
-                },
-                '& .MuiOutlinedInput-input': {
-                    ...(ownerState.rows && {
-                        paddingTop: '8px !important',
-                    }),
-                },
-                '& textarea': {
-                    fontWeight: 400,
-                },
-                caretColor: theme.palette.primary.main,
-                //Adornment section styles
-                '& .MuiInputAdornment-root': {
-                    stroke: theme.palette.text.primary,
-                },
-                '& .MuiInputAdornment-positionStart': {
-                    marginTop: ownerState.variant === 'filled' ? '1rem !important' : 'initial',
-                },
-                '& .MuiFormHelperText-root': {
-                    color: ownerState.error
-                        ? theme.palette.error['4']
-                        : theme.palette.text.primary,
-                    display: 'block',
-                    minHeight: '23px',
-                    position: 'relative !important',
-                    top: '0px !important',
-                    width: 'max-content',
-                },
-            };
-        },
-    },
-};

package/dist/mui/Tooltip/MuiTooltip.d.ts

@@ -1,2 +0,0 @@
-import { Components, Theme } from "@mui/material/styles";
-export declare const MuiTooltip: Components<Theme>['MuiTooltip'];

package/dist/mui/Tooltip/MuiTooltip.js

@@ -1,26 +0,0 @@
-import { Fade } from "@mui/material";
-export const MuiTooltip = {
-    defaultProps: {
-        TransitionComponent: Fade,
-        TransitionProps: { timeout: 300 },
-        PopperProps: { disablePortal: true },
-        arrow: true
-    },
-    styleOverrides: {
-        tooltip: ({ theme, ownerState }) => {
-            // in order to change the background color of tooltip manually,you need to add
-            // color in tooltip object inside the componentProps in the place that you're using the component
-            //     Example:<Tooltip title={...} componentsProps={{tooltip:{color:''}}}>
-            const overallColor = ownerState.componentsProps?.tooltip?.color ?? theme.palette.mode === 'light' ? theme.palette.background[1] : theme.palette.background[4];
-            return ({
-                fontWeight: 400,
-                fontSize: '12px',
-                backgroundColor: overallColor,
-                color: theme.palette.text.primary,
-                '& .MuiTooltip-arrow': {
-                    color: overallColor,
-                }
-            });
-        },
-    },
-};

package/dist/mui/Typography/MuiTypography.d.ts

@@ -1,2 +0,0 @@
-import { Components, Theme } from "@mui/material/styles";
-export declare const MuiTypography: Components<Theme>['MuiTypography'];

package/dist/mui/Typography/MuiTypography.js

@@ -1,9 +0,0 @@
-export const MuiTypography = {
-    defaultProps: { variant: "body3" },
-    styleOverrides: {
-        root: ({ ownerState, theme }) => ({
-            textAlign: 'initial',
-            color: 'content.primary',
-        }),
-    },
-};

package/dist/mui/Typography/index.d.ts

@@ -1,2 +0,0 @@
-import { TypographyOptions } from '@mui/material/styles/createTypography';
-export declare const typography: TypographyOptions;