@elicecontents/content-ui 1.0.21 → 1.0.22

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.
Files changed (31) hide show
  1. package/cjs/components/button/Button.d.ts +2 -1
  2. package/cjs/components/button/Button.js +4 -3
  3. package/cjs/components/index.js +2 -0
  4. package/cjs/components/video/VideoV2.d.ts +20 -0
  5. package/cjs/components/video/VideoV2.js +91 -0
  6. package/cjs/components/video/index.d.ts +1 -0
  7. package/cjs/components/video/index.js +2 -0
  8. package/cjs/index.js +2 -0
  9. package/cjs/theme/createAIDTTheme.d.ts +1 -1
  10. package/cjs/theme/createAIDTTheme.js +3 -1
  11. package/cjs/types/theme.types.d.ts +2 -0
  12. package/cjs/typography/TypographyType.d.ts +239 -0
  13. package/cjs/typography/TypographyType.js +206 -0
  14. package/cjs/typography/typography.d.ts +174 -1
  15. package/cjs/typography/typography.js +5 -68
  16. package/es/components/button/Button.d.ts +2 -1
  17. package/es/components/button/Button.js +4 -3
  18. package/es/components/index.js +1 -0
  19. package/es/components/video/VideoV2.d.ts +20 -0
  20. package/es/components/video/VideoV2.js +84 -0
  21. package/es/components/video/index.d.ts +1 -0
  22. package/es/components/video/index.js +1 -0
  23. package/es/index.js +1 -0
  24. package/es/theme/createAIDTTheme.d.ts +1 -1
  25. package/es/theme/createAIDTTheme.js +3 -1
  26. package/es/types/theme.types.d.ts +2 -0
  27. package/es/typography/TypographyType.d.ts +239 -0
  28. package/es/typography/TypographyType.js +204 -0
  29. package/es/typography/typography.d.ts +174 -1
  30. package/es/typography/typography.js +5 -68
  31. package/package.json +4 -2
package/es/types/theme.types.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  /// <reference types="react" />
2
2
  import type { PaletteMode, PaletteOptions, Theme } from '@mui/material';
3
3
  import type { TypographyFontFamilyType } from '../typography';
4
+ import { TYPOGRAPHY_STYLES_MAP } from '../typography/TypographyType';
4
5
  export interface TypographyVariantsExtension {
5
6
  pagination: React.CSSProperties;
6
7
  buttoninput: React.CSSProperties;
@@ -62,6 +63,7 @@ export interface CreateAIDTThemeProps {
62
63
  palettePublisher?: AIDTPalettePublisher;
63
64
  paletteSubject?: AIDTPaletteSubject;
64
65
  paletteLevel?: AIDTPaletteLevel;
66
+ typographyType?: keyof typeof TYPOGRAPHY_STYLES_MAP;
65
67
  typographyFontFamily: TypographyFontFamilyType;
66
68
  }
67
69
  export type CreateAIDTTheme = (props?: CreateAIDTThemeProps) => Theme;
package/es/typography/TypographyType.d.ts ADDED
@@ -0,0 +1,239 @@
1
+ export declare const TYPOGRAPHY_STYLES_MAP: {
2
+ Default: {
3
+ h1: {
4
+ fontSize: string;
5
+ fontWeight: number;
6
+ lineHeight: string;
7
+ "@media (max-width:1200px)": {
8
+ fontSize: string;
9
+ };
10
+ "@media (max-width:768px)": {
11
+ fontSize: string;
12
+ };
13
+ };
14
+ subtitle1: {
15
+ fontSize: string;
16
+ fontWeight: number;
17
+ lineHeight: string;
18
+ "@media (max-width:1200px)": {
19
+ fontSize: string;
20
+ };
21
+ "@media (max-width:768px)": {
22
+ fontSize: string;
23
+ };
24
+ };
25
+ subtitle2: {
26
+ fontSize: string;
27
+ fontWeight: number;
28
+ lineHeight: string;
29
+ "@media (max-width:1200px)": {
30
+ fontSize: string;
31
+ };
32
+ "@media (max-width:768px)": {
33
+ fontSize: string;
34
+ };
35
+ };
36
+ subtitle3: {
37
+ fontSize: string;
38
+ fontWeight: number;
39
+ lineHeight: string;
40
+ "@media (max-width:1200px)": {
41
+ fontSize: string;
42
+ };
43
+ "@media (max-width:768px)": {
44
+ fontSize: string;
45
+ };
46
+ };
47
+ body1: {
48
+ fontSize: string;
49
+ fontWeight: number;
50
+ lineHeight: string;
51
+ "@media (max-width:1200px)": {
52
+ fontSize: string;
53
+ };
54
+ "@media (max-width:768px)": {
55
+ fontSize: string;
56
+ };
57
+ };
58
+ buttoninput: {
59
+ fontSize: string;
60
+ fontWeight: number;
61
+ lineHeight: string;
62
+ "@media (max-width:1200px)": {
63
+ fontSize: string;
64
+ };
65
+ "@media (max-width:768px)": {
66
+ fontSize: string;
67
+ };
68
+ };
69
+ pagination: {
70
+ fontSize: string;
71
+ fontWeight: number;
72
+ lineHeight: string;
73
+ "@media (max-width:1200px)": {
74
+ fontSize: string;
75
+ };
76
+ "@media (max-width:768px)": {
77
+ fontSize: string;
78
+ };
79
+ };
80
+ };
81
+ Fluid: {
82
+ h1: {
83
+ fontSize: string;
84
+ fontWeight: number;
85
+ lineHeight: string;
86
+ "@media (max-width:1200px)": {
87
+ fontSize: string;
88
+ };
89
+ "@media (max-width:768px)": {
90
+ fontSize: string;
91
+ };
92
+ };
93
+ subtitle1: {
94
+ fontSize: string;
95
+ fontWeight: number;
96
+ lineHeight: string;
97
+ "@media (max-width:1200px)": {
98
+ fontSize: string;
99
+ };
100
+ "@media (max-width:768px)": {
101
+ fontSize: string;
102
+ };
103
+ };
104
+ subtitle2: {
105
+ fontSize: string;
106
+ fontWeight: number;
107
+ lineHeight: string;
108
+ "@media (max-width:1200px)": {
109
+ fontSize: string;
110
+ };
111
+ "@media (max-width:768px)": {
112
+ fontSize: string;
113
+ };
114
+ };
115
+ subtitle3: {
116
+ fontSize: string;
117
+ fontWeight: number;
118
+ lineHeight: string;
119
+ "@media (max-width:1200px)": {
120
+ fontSize: string;
121
+ };
122
+ "@media (max-width:768px)": {
123
+ fontSize: string;
124
+ };
125
+ };
126
+ body1: {
127
+ fontSize: string;
128
+ fontWeight: number;
129
+ lineHeight: string;
130
+ "@media (max-width:1200px)": {
131
+ fontSize: string;
132
+ };
133
+ "@media (max-width:768px)": {
134
+ fontSize: string;
135
+ };
136
+ };
137
+ buttoninput: {
138
+ fontSize: string;
139
+ fontWeight: number;
140
+ lineHeight: string;
141
+ "@media (max-width:1200px)": {
142
+ fontSize: string;
143
+ };
144
+ "@media (max-width:768px)": {
145
+ fontSize: string;
146
+ };
147
+ };
148
+ pagination: {
149
+ fontSize: string;
150
+ fontWeight: number;
151
+ lineHeight: string;
152
+ "@media (max-width:1200px)": {
153
+ fontSize: string;
154
+ };
155
+ "@media (max-width:768px)": {
156
+ fontSize: string;
157
+ };
158
+ };
159
+ };
160
+ TypeG: {
161
+ h1: {
162
+ fontSize: string;
163
+ fontWeight: number;
164
+ lineHeight: string;
165
+ "@media (max-width:1200px)": {
166
+ fontSize: string;
167
+ };
168
+ "@media (max-width:768px)": {
169
+ fontSize: string;
170
+ };
171
+ };
172
+ h2: {
173
+ fontSize: string;
174
+ fontWeight: number;
175
+ lineHeight: string;
176
+ "@media (max-width:1200px)": {
177
+ fontSize: string;
178
+ };
179
+ "@media (max-width:768px)": {
180
+ fontSize: string;
181
+ };
182
+ };
183
+ subtitle1: {
184
+ fontSize: string;
185
+ fontWeight: number;
186
+ lineHeight: string;
187
+ "@media (max-width:1200px)": {
188
+ fontSize: string;
189
+ };
190
+ "@media (max-width:768px)": {
191
+ fontSize: string;
192
+ };
193
+ };
194
+ subtitle2: {
195
+ fontSize: string;
196
+ fontWeight: number;
197
+ lineHeight: string;
198
+ "@media (max-width:1200px)": {
199
+ fontSize: string;
200
+ };
201
+ "@media (max-width:768px)": {
202
+ fontSize: string;
203
+ };
204
+ };
205
+ subtitle3: {
206
+ fontSize: string;
207
+ fontWeight: number;
208
+ lineHeight: string;
209
+ "@media (max-width:1200px)": {
210
+ fontSize: string;
211
+ };
212
+ "@media (max-width:768px)": {
213
+ fontSize: string;
214
+ };
215
+ };
216
+ buttoninput: {
217
+ fontSize: string;
218
+ fontWeight: number;
219
+ lineHeight: string;
220
+ "@media (max-width:1200px)": {
221
+ fontSize: string;
222
+ };
223
+ "@media (max-width:768px)": {
224
+ fontSize: string;
225
+ };
226
+ };
227
+ pagination: {
228
+ fontSize: string;
229
+ fontWeight: number;
230
+ lineHeight: string;
231
+ "@media (max-width:1200px)": {
232
+ fontSize: string;
233
+ };
234
+ "@media (max-width:768px)": {
235
+ fontSize: string;
236
+ };
237
+ };
238
+ };
239
+ };
package/es/typography/TypographyType.js ADDED
@@ -0,0 +1,204 @@
1
+ import { defineProperty as _defineProperty } from '../_virtual/_rollupPluginBabelHelpers.js';
2
+
3
+ var DEFAULT_TYPOGRAPHY_STYLES = {
4
+ h1: _defineProperty(_defineProperty({
5
+ fontSize: '20px',
6
+ fontWeight: 700,
7
+ lineHeight: '140%'
8
+ }, "@media (max-width:1200px)", {
9
+ fontSize: '20px'
10
+ }), "@media (max-width:768px)", {
11
+ fontSize: '22px'
12
+ }),
13
+ subtitle1: _defineProperty(_defineProperty({
14
+ fontSize: '26px',
15
+ fontWeight: 700,
16
+ lineHeight: '140%'
17
+ }, "@media (max-width:1200px)", {
18
+ fontSize: '26px'
19
+ }), "@media (max-width:768px)", {
20
+ fontSize: '22px'
21
+ }),
22
+ subtitle2: _defineProperty(_defineProperty({
23
+ fontSize: '24px',
24
+ fontWeight: 700,
25
+ lineHeight: '160%'
26
+ }, "@media (max-width:1200px)", {
27
+ fontSize: '24px'
28
+ }), "@media (max-width:768px)", {
29
+ fontSize: '18px'
30
+ }),
31
+ subtitle3: _defineProperty(_defineProperty({
32
+ fontSize: '20px',
33
+ fontWeight: 700,
34
+ lineHeight: '140%'
35
+ }, "@media (max-width:1200px)", {
36
+ fontSize: '20px'
37
+ }), "@media (max-width:768px)", {
38
+ fontSize: '16px'
39
+ }),
40
+ body1: _defineProperty(_defineProperty({
41
+ fontSize: '20px',
42
+ fontWeight: 500,
43
+ lineHeight: '140%'
44
+ }, "@media (max-width:1200px)", {
45
+ fontSize: '20px'
46
+ }), "@media (max-width:768px)", {
47
+ fontSize: '16px'
48
+ }),
49
+ buttoninput: _defineProperty(_defineProperty({
50
+ fontSize: '20px',
51
+ fontWeight: 700,
52
+ lineHeight: '140%'
53
+ }, "@media (max-width:1200px)", {
54
+ fontSize: '20px'
55
+ }), "@media (max-width:768px)", {
56
+ fontSize: '16px'
57
+ }),
58
+ pagination: _defineProperty(_defineProperty({
59
+ fontSize: '32px',
60
+ fontWeight: 900,
61
+ lineHeight: '140%'
62
+ }, "@media (max-width:1200px)", {
63
+ fontSize: '32px'
64
+ }), "@media (max-width:768px)", {
65
+ fontSize: '24px'
66
+ })
67
+ };
68
+ var TYPEG_TYPOGRAPHY_STYLES = {
69
+ h1: _defineProperty(_defineProperty({
70
+ fontSize: '28px',
71
+ fontWeight: 700,
72
+ lineHeight: '140%'
73
+ }, "@media (max-width:1200px)", {
74
+ fontSize: '20px'
75
+ }), "@media (max-width:768px)", {
76
+ fontSize: '24px'
77
+ }),
78
+ h2: _defineProperty(_defineProperty({
79
+ fontSize: '24px',
80
+ fontWeight: 700,
81
+ lineHeight: '140%'
82
+ }, "@media (max-width:1200px)", {
83
+ fontSize: '24px'
84
+ }), "@media (max-width:768px)", {
85
+ fontSize: '20px'
86
+ }),
87
+ subtitle1: _defineProperty(_defineProperty({
88
+ fontSize: '26px',
89
+ fontWeight: 700,
90
+ lineHeight: '140%'
91
+ }, "@media (max-width:1200px)", {
92
+ fontSize: '26px'
93
+ }), "@media (max-width:768px)", {
94
+ fontSize: '22px'
95
+ }),
96
+ subtitle2: _defineProperty(_defineProperty({
97
+ fontSize: '24px',
98
+ fontWeight: 500,
99
+ lineHeight: '160%'
100
+ }, "@media (max-width:1200px)", {
101
+ fontSize: '24px'
102
+ }), "@media (max-width:768px)", {
103
+ fontSize: '20px'
104
+ }),
105
+ subtitle3: _defineProperty(_defineProperty({
106
+ fontSize: '22px',
107
+ fontWeight: 500,
108
+ lineHeight: '160%'
109
+ }, "@media (max-width:1200px)", {
110
+ fontSize: '20px'
111
+ }), "@media (max-width:768px)", {
112
+ fontSize: '18px'
113
+ }),
114
+ buttoninput: _defineProperty(_defineProperty({
115
+ fontSize: '20px',
116
+ fontWeight: 700,
117
+ lineHeight: '160%'
118
+ }, "@media (max-width:1200px)", {
119
+ fontSize: '20px'
120
+ }), "@media (max-width:768px)", {
121
+ fontSize: '16px'
122
+ }),
123
+ pagination: _defineProperty(_defineProperty({
124
+ fontSize: '32px',
125
+ fontWeight: 900,
126
+ lineHeight: '140%'
127
+ }, "@media (max-width:1200px)", {
128
+ fontSize: '32px'
129
+ }), "@media (max-width:768px)", {
130
+ fontSize: '24px'
131
+ })
132
+ };
133
+ var FLUID_TYPOGRAPHY_STYLES = {
134
+ h1: _defineProperty(_defineProperty({
135
+ fontSize: '20px',
136
+ fontWeight: 700,
137
+ lineHeight: '140%'
138
+ }, "@media (max-width:1200px)", {
139
+ fontSize: '20px'
140
+ }), "@media (max-width:768px)", {
141
+ fontSize: '22px'
142
+ }),
143
+ subtitle1: _defineProperty(_defineProperty({
144
+ fontSize: '26px',
145
+ fontWeight: 700,
146
+ lineHeight: '140%'
147
+ }, "@media (max-width:1200px)", {
148
+ fontSize: '26px'
149
+ }), "@media (max-width:768px)", {
150
+ fontSize: '22px'
151
+ }),
152
+ subtitle2: _defineProperty(_defineProperty({
153
+ fontSize: '24px',
154
+ fontWeight: 700,
155
+ lineHeight: '160%'
156
+ }, "@media (max-width:1200px)", {
157
+ fontSize: '24px'
158
+ }), "@media (max-width:768px)", {
159
+ fontSize: '18px'
160
+ }),
161
+ subtitle3: _defineProperty(_defineProperty({
162
+ fontSize: '20px',
163
+ fontWeight: 700,
164
+ lineHeight: '140%'
165
+ }, "@media (max-width:1200px)", {
166
+ fontSize: '20px'
167
+ }), "@media (max-width:768px)", {
168
+ fontSize: '16px'
169
+ }),
170
+ body1: _defineProperty(_defineProperty({
171
+ fontSize: '20px',
172
+ fontWeight: 500,
173
+ lineHeight: '140%'
174
+ }, "@media (max-width:1200px)", {
175
+ fontSize: '20px'
176
+ }), "@media (max-width:768px)", {
177
+ fontSize: '16px'
178
+ }),
179
+ buttoninput: _defineProperty(_defineProperty({
180
+ fontSize: '20px',
181
+ fontWeight: 700,
182
+ lineHeight: '140%'
183
+ }, "@media (max-width:1200px)", {
184
+ fontSize: '20px'
185
+ }), "@media (max-width:768px)", {
186
+ fontSize: '16px'
187
+ }),
188
+ pagination: _defineProperty(_defineProperty({
189
+ fontSize: '32px',
190
+ fontWeight: 900,
191
+ lineHeight: '140%'
192
+ }, "@media (max-width:1200px)", {
193
+ fontSize: '32px'
194
+ }), "@media (max-width:768px)", {
195
+ fontSize: '24px'
196
+ })
197
+ };
198
+ var TYPOGRAPHY_STYLES_MAP = {
199
+ Default: DEFAULT_TYPOGRAPHY_STYLES,
200
+ Fluid: FLUID_TYPOGRAPHY_STYLES,
201
+ TypeG: TYPEG_TYPOGRAPHY_STYLES
202
+ };
203
+
204
+ export { TYPOGRAPHY_STYLES_MAP };
package/es/typography/typography.d.ts CHANGED
@@ -1,5 +1,83 @@
1
1
  import { TYPOGRAPHY_FONT_FAMILY_NAMES } from './typographyFontFamily';
2
- export declare const createAIDTTypography: (fontFamily: keyof typeof TYPOGRAPHY_FONT_FAMILY_NAMES) => {
2
+ import { TYPOGRAPHY_STYLES_MAP } from './TypographyType';
3
+ export declare const createAIDTTypography: (fontFamily: keyof typeof TYPOGRAPHY_FONT_FAMILY_NAMES, typographyType?: keyof typeof TYPOGRAPHY_STYLES_MAP) => {
4
+ h1: {
5
+ fontSize: string;
6
+ fontWeight: number;
7
+ lineHeight: string;
8
+ "@media (max-width:1200px)": {
9
+ fontSize: string;
10
+ };
11
+ "@media (max-width:768px)": {
12
+ fontSize: string;
13
+ };
14
+ };
15
+ subtitle1: {
16
+ fontSize: string;
17
+ fontWeight: number;
18
+ lineHeight: string;
19
+ "@media (max-width:1200px)": {
20
+ fontSize: string;
21
+ };
22
+ "@media (max-width:768px)": {
23
+ fontSize: string;
24
+ };
25
+ };
26
+ subtitle2: {
27
+ fontSize: string;
28
+ fontWeight: number;
29
+ lineHeight: string;
30
+ "@media (max-width:1200px)": {
31
+ fontSize: string;
32
+ };
33
+ "@media (max-width:768px)": {
34
+ fontSize: string;
35
+ };
36
+ };
37
+ subtitle3: {
38
+ fontSize: string;
39
+ fontWeight: number;
40
+ lineHeight: string;
41
+ "@media (max-width:1200px)": {
42
+ fontSize: string;
43
+ };
44
+ "@media (max-width:768px)": {
45
+ fontSize: string;
46
+ };
47
+ };
48
+ body1: {
49
+ fontSize: string;
50
+ fontWeight: number;
51
+ lineHeight: string;
52
+ "@media (max-width:1200px)": {
53
+ fontSize: string;
54
+ };
55
+ "@media (max-width:768px)": {
56
+ fontSize: string;
57
+ };
58
+ };
59
+ buttoninput: {
60
+ fontSize: string;
61
+ fontWeight: number;
62
+ lineHeight: string;
63
+ "@media (max-width:1200px)": {
64
+ fontSize: string;
65
+ };
66
+ "@media (max-width:768px)": {
67
+ fontSize: string;
68
+ };
69
+ };
70
+ pagination: {
71
+ fontSize: string;
72
+ fontWeight: number;
73
+ lineHeight: string;
74
+ "@media (max-width:1200px)": {
75
+ fontSize: string;
76
+ };
77
+ "@media (max-width:768px)": {
78
+ fontSize: string;
79
+ };
80
+ };
3
81
  fontFamily: "Pretendard, Arial, sans-serif" | "EliceDXNeolli";
4
82
  '@font-face': {
5
83
  fontFamily: string;
@@ -8,6 +86,93 @@ export declare const createAIDTTypography: (fontFamily: keyof typeof TYPOGRAPHY_
8
86
  fontDisplay: string;
9
87
  src: string;
10
88
  }[];
89
+ } | {
90
+ h1: {
91
+ fontSize: string;
92
+ fontWeight: number;
93
+ lineHeight: string;
94
+ "@media (max-width:1200px)": {
95
+ fontSize: string;
96
+ };
97
+ "@media (max-width:768px)": {
98
+ fontSize: string;
99
+ };
100
+ };
101
+ h2: {
102
+ fontSize: string;
103
+ fontWeight: number;
104
+ lineHeight: string;
105
+ "@media (max-width:1200px)": {
106
+ fontSize: string;
107
+ };
108
+ "@media (max-width:768px)": {
109
+ fontSize: string;
110
+ };
111
+ };
112
+ subtitle1: {
113
+ fontSize: string;
114
+ fontWeight: number;
115
+ lineHeight: string;
116
+ "@media (max-width:1200px)": {
117
+ fontSize: string;
118
+ };
119
+ "@media (max-width:768px)": {
120
+ fontSize: string;
121
+ };
122
+ };
123
+ subtitle2: {
124
+ fontSize: string;
125
+ fontWeight: number;
126
+ lineHeight: string;
127
+ "@media (max-width:1200px)": {
128
+ fontSize: string;
129
+ };
130
+ "@media (max-width:768px)": {
131
+ fontSize: string;
132
+ };
133
+ };
134
+ subtitle3: {
135
+ fontSize: string;
136
+ fontWeight: number;
137
+ lineHeight: string;
138
+ "@media (max-width:1200px)": {
139
+ fontSize: string;
140
+ };
141
+ "@media (max-width:768px)": {
142
+ fontSize: string;
143
+ };
144
+ };
145
+ buttoninput: {
146
+ fontSize: string;
147
+ fontWeight: number;
148
+ lineHeight: string;
149
+ "@media (max-width:1200px)": {
150
+ fontSize: string;
151
+ };
152
+ "@media (max-width:768px)": {
153
+ fontSize: string;
154
+ };
155
+ };
156
+ pagination: {
157
+ fontSize: string;
158
+ fontWeight: number;
159
+ lineHeight: string;
160
+ "@media (max-width:1200px)": {
161
+ fontSize: string;
162
+ };
163
+ "@media (max-width:768px)": {
164
+ fontSize: string;
165
+ };
166
+ };
167
+ fontFamily: "Pretendard, Arial, sans-serif" | "EliceDXNeolli";
168
+ '@font-face': {
169
+ fontFamily: string;
170
+ fontStyle: string;
171
+ fontWeight: number;
172
+ fontDisplay: string;
173
+ src: string;
174
+ }[];
175
+ } | {
11
176
  h1: {
12
177
  fontSize: string;
13
178
  fontWeight: number;
@@ -85,4 +250,12 @@ export declare const createAIDTTypography: (fontFamily: keyof typeof TYPOGRAPHY_
85
250
  fontSize: string;
86
251
  };
87
252
  };
253
+ fontFamily: "Pretendard, Arial, sans-serif" | "EliceDXNeolli";
254
+ '@font-face': {
255
+ fontFamily: string;
256
+ fontStyle: string;
257
+ fontWeight: number;
258
+ fontDisplay: string;
259
+ src: string;
260
+ }[];
88
261
  };