mui-design-system 0.0.24 → 0.0.25

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -25,7 +25,7 @@ const CustomAutoComplete = ({ label, helperText, options, multiple, disabled, va
25
25
  return (_jsxs(Box, { sx: { width }, children: [_jsx(InputLabel, { sx: {
26
26
  fontSize: 12,
27
27
  color: disabled ? 'text.1' : 'text.primary',
28
- }, children: inputLabelMode === 'static' && !hideLabel && (_jsx(Typography, { variant: 'caption2', children: label })) }), _jsx(Autocomplete, { loading: loading, limitTags: 2, multiple: multiple, disabled: disabled, options: options || [], disableCloseOnSelect: multiple, disablePortal: Boolean(rest.limitTags), value: rest.value,
28
+ }, children: inputLabelMode === 'static' && !hideLabel && (_jsx(Typography, { variant: 'body-xs', children: label })) }), _jsx(Autocomplete, { loading: loading, limitTags: 2, multiple: multiple, disabled: disabled, options: options || [], disableCloseOnSelect: multiple, disablePortal: Boolean(rest.limitTags), value: rest.value,
29
29
  // defaultValue={rest?.defaultValue}
30
30
  id: 'virtualize-demo', disableListWrap: true, isOptionEqualToValue: (option, value) => {
31
31
  return option?.value === value?.value;
@@ -35,7 +35,7 @@ const CustomAutoComplete = ({ label, helperText, options, multiple, disabled, va
35
35
  index: state.index,
36
36
  multiple,
37
37
  selected: state.selected,
38
- }), ListboxProps: { onReachEnd }, ListboxComponent: ListBox, renderGroup: (params) => params, noOptionsText: _jsx(Typography, { variant: 'caption2', sx: { color: 'text.primary' }, children: "\u0646\u062A\u06CC\u062C\u0647 \u0627\u06CC \u06CC\u0627\u0641\u062A \u0646\u0634\u062F" }), loadingText: _jsx(Typography, { variant: 'caption2', sx: { color: 'text.primary' }, children: "\u062F\u0631 \u062D\u0627\u0644 \u0628\u0627\u0631\u06AF\u0632\u0627\u0631\u06CC..." }), sx: {
38
+ }), ListboxProps: { onReachEnd }, ListboxComponent: ListBox, renderGroup: (params) => params, noOptionsText: _jsx(Typography, { variant: 'body-xs', sx: { color: 'text.primary' }, children: "\u0646\u062A\u06CC\u062C\u0647 \u0627\u06CC \u06CC\u0627\u0641\u062A \u0646\u0634\u062F" }), loadingText: _jsx(Typography, { variant: 'body-xs', sx: { color: 'text.primary' }, children: "\u062F\u0631 \u062D\u0627\u0644 \u0628\u0627\u0631\u06AF\u0632\u0627\u0631\u06CC..." }), sx: {
39
39
  padding: 0,
40
40
  width: '100%',
41
41
  ...(disabled && { opacity: 0.7, cursor: 'not-allowed' }),
@@ -70,6 +70,6 @@ const CustomAutoComplete = ({ label, helperText, options, multiple, disabled, va
70
70
  }, children: multiple &&
71
71
  selectedOptions &&
72
72
  selectedOptions?.length > 0 &&
73
- showSelectedCount && (_jsxs(Typography, { variant: 'caption3', sx: { color: 'text.4', mt: 1 }, children: [selectedOptions?.length, " item", selectedOptions?.length > 1 && "'s", " selected"] })) })] }));
73
+ showSelectedCount && (_jsxs(Typography, { variant: 'body-2xs', sx: { color: 'text.4', mt: 1 }, children: [selectedOptions?.length, " item", selectedOptions?.length > 1 && "'s", " selected"] })) })] }));
74
74
  };
75
75
  export default CustomAutoComplete;
@@ -13,7 +13,7 @@ export function ListRow(props) {
13
13
  const { props: optionProps, option, multiple, selected } = dataSet || {};
14
14
  return (_createElement("li", { ...optionProps, key: option.value, style: inlineStyle },
15
15
  multiple && _jsx(Checkbox, { checked: selected, sx: { opacity: 'inherit' } }),
16
- _jsx(Typography, { variant: 'caption3', children: option?.label }))
16
+ _jsx(Typography, { variant: 'body-2xs', children: option?.label }))
17
17
  // <Typography key={key} component="li" {...optionProps} noWrap style={inlineStyle}>
18
18
  // {option?.label}
19
19
  // </Typography>
@@ -5,6 +5,6 @@ import Typography from "@mui/material/Typography";
5
5
  const CustomChip = ({ label, endIcon, startIcon, labelProps, chipProps }) => {
6
6
  const isLarge = chipProps?.size === 'large';
7
7
  const { sx, ...props } = chipProps || {};
8
- return (_jsx(Chip, { sx: { ...(chipProps?.rounded && { borderRadius: '9999px' }), ...sx }, color: props.color, label: _jsxs(Box, { display: "flex", gap: 2, alignItems: 'center', children: [_jsx(Box, { display: 'flex', id: "custom-chip__start-icon", children: startIcon }), _jsx(Typography, { id: "custom-chip__label", lineHeight: props.size === 'small' ? '24px' : 'normal', variant: isLarge ? 'caption2.medium' : 'caption3', color: "#ffffff", ...labelProps, children: label }), _jsx(Box, { display: 'flex', id: "custom-chip__start-icon", children: endIcon })] }), ...props }));
8
+ return (_jsx(Chip, { sx: { ...(chipProps?.rounded && { borderRadius: '9999px' }), ...sx }, color: props.color, label: _jsxs(Box, { display: "flex", gap: 2, alignItems: 'center', children: [_jsx(Box, { display: 'flex', id: "custom-chip__start-icon", children: startIcon }), _jsx(Typography, { id: "custom-chip__label", lineHeight: props.size === 'small' ? '24px' : 'normal', variant: isLarge ? 'body-xs-medium' : 'body-2xs', color: "#ffffff", ...labelProps, children: label }), _jsx(Box, { display: 'flex', id: "custom-chip__start-icon", children: endIcon })] }), ...props }));
9
9
  };
10
10
  export default CustomChip;
@@ -17,9 +17,9 @@ const CustomPagination2 = ({ pagination, boxProps, selectProps, paginationBoxPro
17
17
  }, ...iconBoxProps, ...rest, children: children }));
18
18
  return (_jsxs(Box, { display: "flex", justifyContent: "space-between", alignItems: "center", p: 4, bgcolor: "#EAEDFF", borderRadius: "0 0 8px 8px", ...boxProps, children: [_jsxs(Box, { display: "flex", gap: 2, dir: "rtl", children: [!withoutEndPageButton && (_jsx(IconBox, { onClick: () => pagination?.onChangePage
19
19
  ? pagination?.onChangePage(pagination?.pageCounts)
20
- : {}, disabled: pagination && pagination?.pageIndex === pagination.pageCounts, children: _jsx(SvgUnion, { width: 18, height: 18, style: { transform: "scaleX(-1)" } }) })), _jsxs(Box, { display: "flex", gap: 2, justifyContent: "center", alignItems: "center", bgcolor: "background.1", borderRadius: 1, ...paginationBoxProps, children: [_jsx(IconBox, { onClick: () => pagination?.onChangePage(pagination?.pageIndex + 1), disabled: pagination && pagination?.pageIndex === pagination.pageCounts, children: _jsx(SvgArrowRight1, { width: 18, height: 18 }) }), _jsx(Typography, { dir: "ltr", variant: "caption2.medium", color: "text.13", width: 'auto', minWidth: 75, textAlign: "center", children: dictionary?.pageIndexTitle || `صفحه ${pagination?.pageIndex} از ${pagination?.pageCounts}` }), _jsx(IconBox, { onClick: () => pagination && pagination?.pageIndex > 1
20
+ : {}, disabled: pagination && pagination?.pageIndex === pagination.pageCounts, children: _jsx(SvgUnion, { width: 18, height: 18, style: { transform: "scaleX(-1)" } }) })), _jsxs(Box, { display: "flex", gap: 2, justifyContent: "center", alignItems: "center", bgcolor: "background.1", borderRadius: 1, ...paginationBoxProps, children: [_jsx(IconBox, { onClick: () => pagination?.onChangePage(pagination?.pageIndex + 1), disabled: pagination && pagination?.pageIndex === pagination.pageCounts, children: _jsx(SvgArrowRight1, { width: 18, height: 18 }) }), _jsx(Typography, { dir: "ltr", variant: "body-xs", color: "text.13", width: 'auto', minWidth: 75, textAlign: "center", children: dictionary?.pageIndexTitle || `صفحه ${pagination?.pageIndex} از ${pagination?.pageCounts}` }), _jsx(IconBox, { onClick: () => pagination && pagination?.pageIndex > 1
21
21
  ? pagination?.onChangePage(pagination?.pageIndex - 1)
22
- : {}, disabled: pagination && pagination?.pageIndex <= 1, children: _jsx(SvgArrowLeft1, { width: 18, height: 18 }) })] }), !withoutEndPageButton && (_jsx(IconBox, { onClick: () => pagination?.onChangePage(1), disabled: pagination && pagination?.pageIndex <= 1, children: _jsx(SvgUnion, { width: 18, height: 18 }) }))] }), _jsxs(Box, { display: "flex", gap: 2, alignItems: "center", justifyContent: "flex-end", flexGrow: 1, maxWidth: 240, children: [_jsx(Box, { width: "max-content", children: _jsx(Typography, { display: "block", width: "max-content", variant: "caption3", children: dictionary?.pageSizeTitle || "تعداد در هر صفحه" }) }), _jsx(Box, { children: _jsx(Select, { labelId: "demo-simple-select-label", id: "demo-simple-select", value: pagination?.pageSize || pageSizes[0], onChange: (e, v) => pagination?.onChangePageSize?.(e.target.value), sx: {
22
+ : {}, disabled: pagination && pagination?.pageIndex <= 1, children: _jsx(SvgArrowLeft1, { width: 18, height: 18 }) })] }), !withoutEndPageButton && (_jsx(IconBox, { onClick: () => pagination?.onChangePage(1), disabled: pagination && pagination?.pageIndex <= 1, children: _jsx(SvgUnion, { width: 18, height: 18 }) }))] }), _jsxs(Box, { display: "flex", gap: 2, alignItems: "center", justifyContent: "flex-end", flexGrow: 1, maxWidth: 240, children: [_jsx(Box, { width: "max-content", children: _jsx(Typography, { display: "block", width: "max-content", variant: "body-2xs", children: dictionary?.pageSizeTitle || "تعداد در هر صفحه" }) }), _jsx(Box, { children: _jsx(Select, { labelId: "demo-simple-select-label", id: "demo-simple-select", value: pagination?.pageSize || pageSizes[0], onChange: (e, v) => pagination?.onChangePageSize?.(e.target.value), sx: {
23
23
  minHeight: 32,
24
24
  height: 32,
25
25
  "& > div": {
@@ -10,7 +10,7 @@ const UFSwitch = ({ form, name, label, rules, disabled, error, defaultValue, hel
10
10
  ...(disabled && { filter: 'contrast(0.3)' }),
11
11
  }, children: [_jsx(FormControlLabel, { slotProps: {
12
12
  typography: {
13
- variant: 'caption3',
13
+ variant: 'body-2xs',
14
14
  ...props?.slotProps?.typography,
15
15
  },
16
16
  }, control: _jsx(Switch, { disableRipple: true, checked: value, onChange: (e) => {
@@ -90,7 +90,7 @@ const UFSwitch = ({ form, name, label, rules, disabled, error, defaultValue, hel
90
90
  backgroundColor: 'grey.7',
91
91
  height: 'auto',
92
92
  },
93
- }, inputProps: props?.inputProps, ...props?.switchProps }), label: label }), !withoutHelperText && (_jsx(Typography, { variant: 'caption3', sx: {
93
+ }, inputProps: props?.inputProps, ...props?.switchProps }), label: label }), !withoutHelperText && (_jsx(Typography, { variant: 'body-2xs', sx: {
94
94
  height: 23,
95
95
  width: 'max-content',
96
96
  color: error ? 'error.4' : 'text.primary',
@@ -87,7 +87,7 @@ const UFTime = ({ form, name, defaultValue, label, rules, readonly, disabled, pl
87
87
  inputMode: 'numeric',
88
88
  style: { padding: 0, textAlign: 'center' },
89
89
  ...mergedMinuteProps.inputProps,
90
- } })] }), !withoutHelperText && (_jsx(Typography, { variant: 'caption3', color: 'error.4', height: 21, children: error?.message || helperText }))] }));
90
+ } })] }), !withoutHelperText && (_jsx(Typography, { variant: 'body-2xs', color: 'error.4', height: 21, children: error?.message || helperText }))] }));
91
91
  } }));
92
92
  };
93
93
  export default UFTime;
@@ -6,7 +6,7 @@ export const MuiFormControlLabel = {
6
6
  '& .MuiFormControlLabel-label': {
7
7
  color: theme.palette.text.primary,
8
8
  textAlign: 'initial',
9
- ...theme.typography?.["body3.medium"],
9
+ ...theme.typography?.["body-s-medium"],
10
10
  },
11
11
  })
12
12
  },
@@ -20,7 +20,7 @@ export const MuiInputLabel = {
20
20
  root: ({ ownerState, theme }) => ({
21
21
  color: theme.palette.text.primary,
22
22
  textAlign: 'start',
23
- ...theme.typography?.["body3.medium"],
23
+ ...theme.typography?.["body-s-medium"],
24
24
  lineHeight: '150%',
25
25
  // ...(ownerState.variant === "outlined"
26
26
  // ? {
@@ -7,7 +7,7 @@ export const MuiTab = {
7
7
  minHeight: 'max-content',
8
8
  color: theme.palette.text.primary,
9
9
  stroke: theme.palette.text.primary,
10
- ...theme.typography.body3,
10
+ ...theme.typography?.["body-s"],
11
11
  textTransform: 'none',
12
12
  transition: 'transform 0.2s',
13
13
  ':active': {
@@ -24,7 +24,7 @@ export const MuiFilledInput = {
24
24
  stroke: theme.palette.text.primary,
25
25
  minWidth: 80,
26
26
  minHeight: ownerState.size === 'small' ? '40px' : '48px',
27
- ...theme.typography?.["body3.medium"],
27
+ ...theme.typography?.["body-s-medium"],
28
28
  lineHeight: '100%',
29
29
  backgroundColor: theme.palette.text['4'],
30
30
  ...(ownerState.readOnly && {
@@ -4,7 +4,7 @@ export const MuiOutlinedInput = {
4
4
  stroke: theme.palette.text.primary,
5
5
  borderRadius: theme.spacing(2),
6
6
  minWidth: 80,
7
- ...theme.typography?.["body3.medium"],
7
+ ...theme.typography?.["body-s-medium"],
8
8
  lineHeight: '100%',
9
9
  height: ownerState.size === 'small'
10
10
  ? '40px'
@@ -34,7 +34,7 @@ export const MuiOutlinedInput = {
34
34
  //Label that goes on the border of component
35
35
  '& .MuiOutlinedInput-notchedOutline': {
36
36
  transition: 'border-color 0.2s ease',
37
- ...theme.typography?.["body3.medium"],
37
+ ...theme.typography?.["body-s-medium"],
38
38
  ...(ownerState.disabled && {
39
39
  border: 'none',
40
40
  }),
@@ -1,5 +1,5 @@
1
1
  export const MuiTypography = {
2
- defaultProps: { variant: "body3" },
2
+ defaultProps: { variant: "body-s" },
3
3
  styleOverrides: {
4
4
  root: ({ ownerState, theme }) => ({
5
5
  textAlign: 'initial',
@@ -2,137 +2,122 @@ export const typography = {
2
2
  fontFamily: 'inherit',
3
3
  h1: {
4
4
  fontWeight: 700,
5
- fontSize: "clamp(34px,6.8vw,46px)",
6
- lineHeight: "clamp(38px,5.7vw,42px)",
5
+ fontSize: 48,
6
+ lineHeight: 1.3,
7
7
  },
8
8
  h2: {
9
9
  fontWeight: 700,
10
- fontSize: "clamp(32px,6.8vw,41px)",
11
- lineHeight: "clamp(36px,5.7vw,40px)",
10
+ fontSize: 40,
11
+ lineHeight: 1.3,
12
12
  },
13
13
  h3: {
14
14
  fontWeight: 700,
15
- fontSize: "clamp(28px,5.3vw,36px)",
16
- lineHeight: "clamp(34px,5.7vw,38px)",
15
+ fontSize: 36,
16
+ lineHeight: 1.4,
17
17
  },
18
18
  h4: {
19
19
  fontWeight: 700,
20
- fontSize: "clamp(25px,4.8vw,32px)",
21
- lineHeight: "clamp(32px,5.7vw,36px)",
20
+ fontSize: 32,
21
+ lineHeight: 1.5,
22
22
  },
23
23
  h5: {
24
24
  fontWeight: 700,
25
- fontSize: "clamp(24px,4.3vw,29px)",
26
- lineHeight: "clamp(30px,5.7vw,34px)",
25
+ fontSize: 28,
26
+ lineHeight: 1.5,
27
27
  },
28
28
  h6: {
29
29
  fontWeight: 700,
30
- fontSize: "clamp(20px,3.8vw,26px)",
31
- lineHeight: "clamp(28px,5.7vw,32px)",
30
+ fontSize: 26,
31
+ lineHeight: 1.5,
32
32
  },
33
- body1: {
33
+ "body-l": {
34
34
  fontWeight: 400,
35
- fontSize: "clamp(20px,3.3vw,24px)",
36
- lineHeight: "clamp(26px,5.7vw,30px)",
35
+ fontSize: 24,
36
+ lineHeight: 1.5,
37
37
  },
38
- "body1.medium": {
38
+ "body-l-medium": {
39
39
  fontWeight: 500,
40
- fontSize: "clamp(20px,3.3vw,24px)",
41
- lineHeight: "clamp(26px,5.7vw,30px)",
40
+ fontSize: 24,
41
+ lineHeight: 1.5,
42
42
  },
43
- "body1.bold": {
44
- fontWeight: 700,
45
- fontSize: "clamp(20px,3.3vw,24px)",
46
- lineHeight: "clamp(26px,5.7vw,30px)",
47
- },
48
- body2: {
49
- fontWeight: 400,
50
- fontSize: "clamp(16px,3vw,20px)",
51
- lineHeight: "clamp(24px,4.9vw,28px)",
52
- },
53
- "body2.medium": {
54
- fontWeight: 500,
55
- fontSize: "clamp(16px,3vw,20px)",
56
- lineHeight: "clamp(24px,4.9vw,28px)",
57
- },
58
- "body2.bold": {
59
- fontWeight: 700,
60
- fontSize: "clamp(16px,3vw,20px)",
61
- lineHeight: "clamp(24px,4.9vw,28px)",
43
+ "body-l-semibold": {
44
+ fontWeight: 600,
45
+ fontSize: 24,
46
+ lineHeight: 1.5,
62
47
  },
63
- body3: {
48
+ "body-ml": {
64
49
  fontWeight: 400,
65
- fontSize: "clamp(14px,2.7vw,20px)",
66
- lineHeight: "clamp(24px,4.9vw,26px)",
50
+ fontSize: 20,
51
+ lineHeight: 1.5,
67
52
  },
68
- "body3.medium": {
53
+ "body-ml-medium": {
69
54
  fontWeight: 500,
70
- fontSize: "clamp(14px,2.7vw,20px)",
71
- lineHeight: "clamp(24px,4.9vw,26px)",
55
+ fontSize: 20,
56
+ lineHeight: 1.5,
72
57
  },
73
- "body3.bold": {
74
- fontWeight: 700,
75
- fontSize: "clamp(14px,2.7vw,20px)",
76
- lineHeight: "clamp(24px,4.9vw,26px)",
58
+ "body-ml-semibold": {
59
+ fontWeight: 600,
60
+ fontSize: 20,
61
+ lineHeight: 1.5,
77
62
  },
78
- caption1: {
63
+ "body-m": {
79
64
  fontWeight: 400,
80
- fontSize: "clamp(12px,2.35vw,16px)",
81
- lineHeight: "clamp(20px,4.5vw,24px)",
65
+ fontSize: 17,
66
+ lineHeight: 1.6,
82
67
  },
83
- "caption1.medium": {
68
+ "body-m-medium": {
84
69
  fontWeight: 500,
85
- fontSize: "clamp(12px,2.35vw,16px)",
86
- lineHeight: "clamp(20px,4.5vw,24px)",
70
+ fontSize: 17,
71
+ lineHeight: 1.6,
87
72
  },
88
- "caption1.bold": {
89
- fontWeight: 700,
90
- fontSize: "clamp(12px,2.35vw,16px)",
91
- lineHeight: "clamp(20px,4.5vw,24px)",
73
+ "body-m-semibold": {
74
+ fontWeight: 600,
75
+ fontSize: 17,
76
+ lineHeight: 1.6,
92
77
  },
93
- caption2: {
78
+ "body-s": {
94
79
  fontWeight: 400,
95
- fontSize: "clamp(11px,2.2vw,14px)",
96
- lineHeight: "clamp(20px,4.5vw,24px)",
80
+ fontSize: 15,
81
+ lineHeight: 1.7,
97
82
  },
98
- "caption2.medium": {
83
+ "body-s-medium": {
99
84
  fontWeight: 500,
100
- fontSize: "clamp(11px,2.2vw,14px)",
101
- lineHeight: "clamp(20px,3.85vw,24px)",
85
+ fontSize: 15,
86
+ lineHeight: 1.7,
102
87
  },
103
- "caption2.bold": {
104
- fontWeight: 700,
105
- fontSize: "clamp(11px,2.2vw,14px)",
106
- lineHeight: "clamp(20px,3.85vw,24px)",
88
+ "body-s-semibold": {
89
+ fontWeight: 600,
90
+ fontSize: 15,
91
+ lineHeight: 1.7,
107
92
  },
108
- caption3: {
93
+ "body-xs": {
109
94
  fontWeight: 400,
110
- fontSize: "clamp(10px,1.85vw,12px)",
111
- lineHeight: "clamp(20px,3.85vw,24px)",
95
+ fontSize: 13,
96
+ lineHeight: 1.7,
112
97
  },
113
- "caption3.medium": {
98
+ "body-xs-medium": {
114
99
  fontWeight: 500,
115
- fontSize: "clamp(10px,1.85vw,12px)",
116
- lineHeight: "clamp(20px,3.85vw,24px)",
100
+ fontSize: 13,
101
+ lineHeight: 1.7,
117
102
  },
118
- "caption3.bold": {
119
- fontWeight: 700,
120
- fontSize: "clamp(10px,1.85vw,12px)",
121
- lineHeight: "clamp(20px,3.85vw,24px)",
103
+ "body-xs-semibold": {
104
+ fontWeight: 600,
105
+ fontSize: 13,
106
+ lineHeight: 1.7,
122
107
  },
123
- caption4: {
108
+ "body-2xs": {
124
109
  fontWeight: 400,
125
- fontSize: "clamp(9px,1.6vw,10px)",
126
- lineHeight: "clamp(16px,3vw,20px)",
110
+ fontSize: 11,
111
+ lineHeight: 1.8,
127
112
  },
128
- "caption4.medium": {
113
+ "body-2xs-medium": {
129
114
  fontWeight: 500,
130
- fontSize: "clamp(9px,1.6vw,10px)",
131
- lineHeight: "clamp(16px,3vw,20px)",
115
+ fontSize: 11,
116
+ lineHeight: 1.8,
132
117
  },
133
- "caption4.bold": {
134
- fontWeight: 700,
135
- fontSize: "clamp(9px,1.6vw,10px)",
136
- lineHeight: "clamp(16px,3vw,20px)",
118
+ "body-2xs-semibold": {
119
+ fontWeight: 600,
120
+ fontSize: 11,
121
+ lineHeight: 1.8,
137
122
  },
138
123
  };
@@ -8,7 +8,7 @@ export const MuiMenuItem = {
8
8
  backgroundColor: theme.palette.primary[1]
9
9
  },
10
10
  color: theme.palette.text.primary,
11
- ...theme.typography['caption3'],
11
+ ...theme.typography['body-2xs'],
12
12
  })
13
13
  },
14
14
  };
@@ -1,26 +1,23 @@
1
1
  /// <reference types="react" />
2
2
  export interface ICustomTypographyVariants {
3
- body1: React.CSSProperties;
4
- body2: React.CSSProperties;
5
- body3: React.CSSProperties;
6
- "body1.medium": React.CSSProperties;
7
- "body2.medium": React.CSSProperties;
8
- "body3.medium": React.CSSProperties;
9
- "body1.bold": React.CSSProperties;
10
- "body2.bold": React.CSSProperties;
11
- "body3.bold": React.CSSProperties;
12
- "caption1": React.CSSProperties;
13
- "caption2": React.CSSProperties;
14
- "caption3": React.CSSProperties;
15
- "caption4": React.CSSProperties;
16
- "caption1.bold": React.CSSProperties;
17
- "caption2.bold": React.CSSProperties;
18
- "caption3.bold": React.CSSProperties;
19
- "caption4.bold": React.CSSProperties;
20
- "caption1.medium": React.CSSProperties;
21
- "caption2.medium": React.CSSProperties;
22
- "caption3.medium": React.CSSProperties;
23
- "caption4.medium"?: React.CSSProperties;
3
+ "body-2xs": React.CSSProperties;
4
+ "body-2xs-medium": React.CSSProperties;
5
+ "body-2xs-semibold": React.CSSProperties;
6
+ "body-xs": React.CSSProperties;
7
+ "body-xs-medium": React.CSSProperties;
8
+ "body-xs-semibold": React.CSSProperties;
9
+ "body-s": React.CSSProperties;
10
+ "body-s-medium": React.CSSProperties;
11
+ "body-s-semibold": React.CSSProperties;
12
+ "body-m": React.CSSProperties;
13
+ "body-m-medium": React.CSSProperties;
14
+ "body-m-semibold": React.CSSProperties;
15
+ "body-ml": React.CSSProperties;
16
+ "body-ml-medium": React.CSSProperties;
17
+ "body-ml-semibold": React.CSSProperties;
18
+ "body-l": React.CSSProperties;
19
+ "body-l-medium": React.CSSProperties;
20
+ "body-l-semibold": React.CSSProperties;
24
21
  }
25
22
  declare module '@mui/material/styles' {
26
23
  interface TypographyVariants extends ICustomTypographyVariants {
@@ -39,33 +36,23 @@ declare module '@mui/material/Typography' {
39
36
  subtitle2: false;
40
37
  button: false;
41
38
  caption: false;
42
- body1: true;
43
- body2: true;
44
- body3: true;
45
- 'body1.medium': true;
46
- 'body2.medium': true;
47
- 'body3.medium': true;
48
- 'body1.bold': true;
49
- 'body2.bold': true;
50
- 'body3.bold': true;
51
- 'body1.semiBold': true;
52
- 'body2.semiBold': true;
53
- 'body3.semiBold': true;
54
- caption1: true;
55
- caption2: true;
56
- caption3: true;
57
- caption4: true;
58
- 'caption1.semiBold': true;
59
- 'caption2.semiBold': true;
60
- 'caption3.semiBold': true;
61
- 'caption4.semiBold': true;
62
- 'caption1.bold': true;
63
- 'caption2.bold': true;
64
- 'caption3.bold': true;
65
- 'caption4.bold': true;
66
- 'caption1.medium': true;
67
- 'caption2.medium': true;
68
- 'caption3.medium': true;
69
- 'caption4.medium': true;
39
+ "body-2xs": true;
40
+ "body-2xs-medium": true;
41
+ "body-2xs-semibold": true;
42
+ "body-xs": true;
43
+ "body-xs-medium": true;
44
+ "body-xs-semibold": true;
45
+ "body-s": true;
46
+ "body-s-medium": true;
47
+ "body-s-semibold": true;
48
+ "body-m": true;
49
+ "body-m-medium": true;
50
+ "body-m-semibold": true;
51
+ "body-ml": true;
52
+ "body-ml-medium": true;
53
+ "body-ml-semibold": true;
54
+ "body-l": true;
55
+ "body-l-medium": true;
56
+ "body-l-semibold": true;
70
57
  }
71
58
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "mui-design-system",
3
- "version": "0.0.24",
3
+ "version": "0.0.25",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.js",