@revathi_kanakapathy/storybook 0.3.3

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 (85) hide show
  1. package/README.md +378 -0
  2. package/dist/components/charts/AreaChart/AreaChart.d.ts +7 -0
  3. package/dist/components/charts/BarChart/BarChart.d.ts +19 -0
  4. package/dist/components/charts/LineChart/LineChart.d.ts +20 -0
  5. package/dist/components/charts/PieChart/PieChart.d.ts +14 -0
  6. package/dist/components/charts/RadarChart/RadarChart.d.ts +7 -0
  7. package/dist/components/charts/ScatterChart/ScatterChart.d.ts +7 -0
  8. package/dist/components/charts/index.d.ts +6 -0
  9. package/dist/components/ui/Accordion/Accordion.d.ts +27 -0
  10. package/dist/components/ui/Alert/Alert.d.ts +29 -0
  11. package/dist/components/ui/Badge/Badge.d.ts +5 -0
  12. package/dist/components/ui/Breadcrumb/Breadcrumb.d.ts +48 -0
  13. package/dist/components/ui/Button/Button.d.ts +23 -0
  14. package/dist/components/ui/Card/Card.d.ts +7 -0
  15. package/dist/components/ui/Checkbox/Checkbox.d.ts +30 -0
  16. package/dist/components/ui/Input/Input.d.ts +2 -0
  17. package/dist/components/ui/Label/Label.d.ts +2 -0
  18. package/dist/components/ui/Textarea/Textarea.d.ts +2 -0
  19. package/dist/components/ui/Toast/Toast.d.ts +42 -0
  20. package/dist/components/ui/index.d.ts +6 -0
  21. package/dist/components.es.js +3265 -0
  22. package/dist/components.umd.js +1 -0
  23. package/dist/fonts/recoleta/Recoleta-Black.eot +0 -0
  24. package/dist/fonts/recoleta/Recoleta-Black.ttf +0 -0
  25. package/dist/fonts/recoleta/Recoleta-Black.woff +0 -0
  26. package/dist/fonts/recoleta/Recoleta-Black.woff2 +0 -0
  27. package/dist/fonts/recoleta/Recoleta-Bold.eot +0 -0
  28. package/dist/fonts/recoleta/Recoleta-Bold.ttf +0 -0
  29. package/dist/fonts/recoleta/Recoleta-Bold.woff +0 -0
  30. package/dist/fonts/recoleta/Recoleta-Bold.woff2 +0 -0
  31. package/dist/fonts/recoleta/Recoleta-Light.eot +0 -0
  32. package/dist/fonts/recoleta/Recoleta-Light.ttf +0 -0
  33. package/dist/fonts/recoleta/Recoleta-Light.woff +0 -0
  34. package/dist/fonts/recoleta/Recoleta-Light.woff2 +0 -0
  35. package/dist/fonts/recoleta/Recoleta-Medium.eot +0 -0
  36. package/dist/fonts/recoleta/Recoleta-Medium.ttf +0 -0
  37. package/dist/fonts/recoleta/Recoleta-Medium.woff +0 -0
  38. package/dist/fonts/recoleta/Recoleta-Medium.woff2 +0 -0
  39. package/dist/fonts/recoleta/Recoleta-Regular.eot +0 -0
  40. package/dist/fonts/recoleta/Recoleta-Regular.ttf +0 -0
  41. package/dist/fonts/recoleta/Recoleta-Regular.woff +0 -0
  42. package/dist/fonts/recoleta/Recoleta-Regular.woff2 +0 -0
  43. package/dist/fonts/recoleta/Recoleta-SemiBold.eot +0 -0
  44. package/dist/fonts/recoleta/Recoleta-SemiBold.ttf +0 -0
  45. package/dist/fonts/recoleta/Recoleta-SemiBold.woff +0 -0
  46. package/dist/fonts/recoleta/Recoleta-SemiBold.woff2 +0 -0
  47. package/dist/fonts/recoleta/Recoleta-Thin.eot +0 -0
  48. package/dist/fonts/recoleta/Recoleta-Thin.ttf +0 -0
  49. package/dist/fonts/recoleta/Recoleta-Thin.woff +0 -0
  50. package/dist/fonts/recoleta/Recoleta-Thin.woff2 +0 -0
  51. package/dist/fonts/recoleta/RecoletaAlt-Black.eot +0 -0
  52. package/dist/fonts/recoleta/RecoletaAlt-Black.ttf +0 -0
  53. package/dist/fonts/recoleta/RecoletaAlt-Black.woff +0 -0
  54. package/dist/fonts/recoleta/RecoletaAlt-Black.woff2 +0 -0
  55. package/dist/fonts/recoleta/RecoletaAlt-Bold.eot +0 -0
  56. package/dist/fonts/recoleta/RecoletaAlt-Bold.ttf +0 -0
  57. package/dist/fonts/recoleta/RecoletaAlt-Bold.woff +0 -0
  58. package/dist/fonts/recoleta/RecoletaAlt-Bold.woff2 +0 -0
  59. package/dist/fonts/recoleta/RecoletaAlt-Light.eot +0 -0
  60. package/dist/fonts/recoleta/RecoletaAlt-Light.ttf +0 -0
  61. package/dist/fonts/recoleta/RecoletaAlt-Light.woff +0 -0
  62. package/dist/fonts/recoleta/RecoletaAlt-Light.woff2 +0 -0
  63. package/dist/fonts/recoleta/RecoletaAlt-Medium.eot +0 -0
  64. package/dist/fonts/recoleta/RecoletaAlt-Medium.ttf +0 -0
  65. package/dist/fonts/recoleta/RecoletaAlt-Medium.woff +0 -0
  66. package/dist/fonts/recoleta/RecoletaAlt-Medium.woff2 +0 -0
  67. package/dist/fonts/recoleta/RecoletaAlt-Regular.eot +0 -0
  68. package/dist/fonts/recoleta/RecoletaAlt-Regular.ttf +0 -0
  69. package/dist/fonts/recoleta/RecoletaAlt-Regular.woff +0 -0
  70. package/dist/fonts/recoleta/RecoletaAlt-Regular.woff2 +0 -0
  71. package/dist/fonts/recoleta/RecoletaAlt-SemiBold.eot +0 -0
  72. package/dist/fonts/recoleta/RecoletaAlt-SemiBold.ttf +0 -0
  73. package/dist/fonts/recoleta/RecoletaAlt-SemiBold.woff +0 -0
  74. package/dist/fonts/recoleta/RecoletaAlt-SemiBold.woff2 +0 -0
  75. package/dist/fonts/recoleta/RecoletaAlt-Thin.eot +0 -0
  76. package/dist/fonts/recoleta/RecoletaAlt-Thin.ttf +0 -0
  77. package/dist/fonts/recoleta/RecoletaAlt-Thin.woff +0 -0
  78. package/dist/fonts/recoleta/RecoletaAlt-Thin.woff2 +0 -0
  79. package/dist/fonts/recoleta/demo.html +573 -0
  80. package/dist/fonts/recoleta/stylesheet.css +168 -0
  81. package/dist/index.d.ts +7 -0
  82. package/dist/lib/utils.d.ts +1 -0
  83. package/dist/storybook.css +1 -0
  84. package/dist/vite.svg +1 -0
  85. package/package.json +88 -0
package/dist/fonts/recoleta/demo.html ADDED
@@ -0,0 +1,573 @@
1
+ <!DOCTYPE html>
2
+ <html>
3
+ <head>
4
+ <meta charset="utf-8">
5
+ <meta http-equiv="X-UA-Compatible" content="IE=edge">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1">
7
+ <meta name="robots" content="noindex, noarchive">
8
+ <meta name="format-detection" content="telephone=no">
9
+ <title>Transfonter demo</title>
10
+ <link href="stylesheet.css" rel="stylesheet">
11
+ <style>
12
+ /*
13
+ http://meyerweb.com/eric/tools/css/reset/
14
+ v2.0 | 20110126
15
+ License: none (public domain)
16
+ */
17
+ html, body, div, span, applet, object, iframe,
18
+ h1, h2, h3, h4, h5, h6, p, blockquote, pre,
19
+ a, abbr, acronym, address, big, cite, code,
20
+ del, dfn, em, img, ins, kbd, q, s, samp,
21
+ small, strike, strong, sub, sup, tt, var,
22
+ b, u, i, center,
23
+ dl, dt, dd, ol, ul, li,
24
+ fieldset, form, label, legend,
25
+ table, caption, tbody, tfoot, thead, tr, th, td,
26
+ article, aside, canvas, details, embed,
27
+ figure, figcaption, footer, header, hgroup,
28
+ menu, nav, output, ruby, section, summary,
29
+ time, mark, audio, video {
30
+ margin: 0;
31
+ padding: 0;
32
+ border: 0;
33
+ font-size: 100%;
34
+ font: inherit;
35
+ vertical-align: baseline;
36
+ }
37
+ /* HTML5 display-role reset for older browsers */
38
+ article, aside, details, figcaption, figure,
39
+ footer, header, hgroup, menu, nav, section {
40
+ display: block;
41
+ }
42
+ body {
43
+ line-height: 1;
44
+ }
45
+ ol, ul {
46
+ list-style: none;
47
+ }
48
+ blockquote, q {
49
+ quotes: none;
50
+ }
51
+ blockquote:before, blockquote:after,
52
+ q:before, q:after {
53
+ content: '';
54
+ content: none;
55
+ }
56
+ table {
57
+ border-collapse: collapse;
58
+ border-spacing: 0;
59
+ }
60
+ /* common styles */
61
+ body {
62
+ background: #f1f1f1;
63
+ color: #000;
64
+ }
65
+ .page {
66
+ background: #fff;
67
+ width: 920px;
68
+ margin: 0 auto;
69
+ padding: 20px 20px 0 20px;
70
+ overflow: hidden;
71
+ }
72
+ .font-container {
73
+ overflow-x: auto;
74
+ overflow-y: hidden;
75
+ margin-bottom: 40px;
76
+ line-height: 1.3;
77
+ white-space: nowrap;
78
+ padding-bottom: 5px;
79
+ }
80
+ h1 {
81
+ position: relative;
82
+ background: #444;
83
+ font-size: 32px;
84
+ color: #fff;
85
+ padding: 10px 20px;
86
+ margin: 0 -20px 12px -20px;
87
+ }
88
+ .letters {
89
+ font-size: 25px;
90
+ margin-bottom: 20px;
91
+ }
92
+ .s10:before {
93
+ content: '10px';
94
+ }
95
+ .s11:before {
96
+ content: '11px';
97
+ }
98
+ .s12:before {
99
+ content: '12px';
100
+ }
101
+ .s14:before {
102
+ content: '14px';
103
+ }
104
+ .s18:before {
105
+ content: '18px';
106
+ }
107
+ .s24:before {
108
+ content: '24px';
109
+ }
110
+ .s30:before {
111
+ content: '30px';
112
+ }
113
+ .s36:before {
114
+ content: '36px';
115
+ }
116
+ .s48:before {
117
+ content: '48px';
118
+ }
119
+ .s60:before {
120
+ content: '60px';
121
+ }
122
+ .s72:before {
123
+ content: '72px';
124
+ }
125
+ .s10:before, .s11:before, .s12:before, .s14:before,
126
+ .s18:before, .s24:before, .s30:before, .s36:before,
127
+ .s48:before, .s60:before, .s72:before {
128
+ font-family: Arial, sans-serif;
129
+ font-size: 10px;
130
+ font-weight: normal;
131
+ font-style: normal;
132
+ color: #999;
133
+ padding-right: 6px;
134
+ }
135
+ pre {
136
+ display: block;
137
+ position: relative;
138
+ padding: 9px;
139
+ margin: 0 0 10px;
140
+ font-family: Monaco, Menlo, Consolas, "Courier New", monospace !important;
141
+ font-size: 13px;
142
+ line-height: 1.428571429;
143
+ color: #333;
144
+ font-weight: normal !important;
145
+ font-style: normal !important;
146
+ background-color: #f5f5f5;
147
+ border: 1px solid #ccc;
148
+ overflow-x: auto;
149
+ border-radius: 4px;
150
+ }
151
+ pre:after {
152
+ display: block;
153
+ position: absolute;
154
+ right: 0;
155
+ top: 0;
156
+ content: 'Usage';
157
+ line-height: 1;
158
+ padding: 5px 8px;
159
+ font-size: 12px;
160
+ color: #767676;
161
+ background-color: #fff;
162
+ border: 1px solid #ccc;
163
+ border-right: none;
164
+ border-top: none;
165
+ border-radius: 0 4px 0 4px;
166
+ z-index: 10;
167
+ }
168
+ /* responsive */
169
+ @media (max-width: 959px) {
170
+ .page {
171
+ width: auto;
172
+ margin: 0;
173
+ }
174
+ }
175
+ </style>
176
+ </head>
177
+ <body>
178
+ <div class="page">
179
+ <div class="demo" style="font-family: 'Recoleta Alt'; font-weight: 100; font-style: normal;">
180
+ <h1>Recoleta Alt Thin</h1>
181
+ <pre>.your-style {
182
+ font-family: 'Recoleta Alt';
183
+ font-weight: 100;
184
+ font-style: normal;
185
+ }</pre>
186
+ <div class="font-container">
187
+ <p class="letters">
188
+ абвгдеёжзийклмнопрстуфхцчшщъыьэюя<br>
189
+ АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ<br>
190
+ abcdefghijklmnopqrstuvwxyz<br>
191
+ ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
192
+ 0123456789.:,;()*!?'@#<>$%&^+-=~
193
+ </p>
194
+ <p class="s10" style="font-size: 10px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
195
+ <p class="s11" style="font-size: 11px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
196
+ <p class="s12" style="font-size: 12px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
197
+ <p class="s14" style="font-size: 14px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
198
+ <p class="s18" style="font-size: 18px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
199
+ <p class="s24" style="font-size: 24px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
200
+ <p class="s30" style="font-size: 30px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
201
+ <p class="s36" style="font-size: 36px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
202
+ <p class="s48" style="font-size: 48px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
203
+ <p class="s60" style="font-size: 60px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
204
+ <p class="s72" style="font-size: 72px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
205
+ </div>
206
+ </div>
207
+ <div class="demo" style="font-family: 'Recoleta'; font-weight: 500; font-style: normal;">
208
+ <h1>Recoleta Medium</h1>
209
+ <pre>.your-style {
210
+ font-family: 'Recoleta';
211
+ font-weight: 500;
212
+ font-style: normal;
213
+ }</pre>
214
+ <div class="font-container">
215
+ <p class="letters">
216
+ абвгдеёжзийклмнопрстуфхцчшщъыьэюя<br>
217
+ АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ<br>
218
+ abcdefghijklmnopqrstuvwxyz<br>
219
+ ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
220
+ 0123456789.:,;()*!?'@#<>$%&^+-=~
221
+ </p>
222
+ <p class="s10" style="font-size: 10px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
223
+ <p class="s11" style="font-size: 11px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
224
+ <p class="s12" style="font-size: 12px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
225
+ <p class="s14" style="font-size: 14px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
226
+ <p class="s18" style="font-size: 18px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
227
+ <p class="s24" style="font-size: 24px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
228
+ <p class="s30" style="font-size: 30px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
229
+ <p class="s36" style="font-size: 36px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
230
+ <p class="s48" style="font-size: 48px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
231
+ <p class="s60" style="font-size: 60px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
232
+ <p class="s72" style="font-size: 72px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
233
+ </div>
234
+ </div>
235
+ <div class="demo" style="font-family: 'Recoleta Alt'; font-weight: 600; font-style: normal;">
236
+ <h1>Recoleta Alt SemiBold</h1>
237
+ <pre>.your-style {
238
+ font-family: 'Recoleta Alt';
239
+ font-weight: 600;
240
+ font-style: normal;
241
+ }</pre>
242
+ <div class="font-container">
243
+ <p class="letters">
244
+ абвгдеёжзийклмнопрстуфхцчшщъыьэюя<br>
245
+ АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ<br>
246
+ abcdefghijklmnopqrstuvwxyz<br>
247
+ ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
248
+ 0123456789.:,;()*!?'@#<>$%&^+-=~
249
+ </p>
250
+ <p class="s10" style="font-size: 10px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
251
+ <p class="s11" style="font-size: 11px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
252
+ <p class="s12" style="font-size: 12px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
253
+ <p class="s14" style="font-size: 14px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
254
+ <p class="s18" style="font-size: 18px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
255
+ <p class="s24" style="font-size: 24px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
256
+ <p class="s30" style="font-size: 30px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
257
+ <p class="s36" style="font-size: 36px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
258
+ <p class="s48" style="font-size: 48px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
259
+ <p class="s60" style="font-size: 60px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
260
+ <p class="s72" style="font-size: 72px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
261
+ </div>
262
+ </div>
263
+ <div class="demo" style="font-family: 'Recoleta Alt'; font-weight: 500; font-style: normal;">
264
+ <h1>Recoleta Alt Medium</h1>
265
+ <pre>.your-style {
266
+ font-family: 'Recoleta Alt';
267
+ font-weight: 500;
268
+ font-style: normal;
269
+ }</pre>
270
+ <div class="font-container">
271
+ <p class="letters">
272
+ абвгдеёжзийклмнопрстуфхцчшщъыьэюя<br>
273
+ АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ<br>
274
+ abcdefghijklmnopqrstuvwxyz<br>
275
+ ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
276
+ 0123456789.:,;()*!?'@#<>$%&^+-=~
277
+ </p>
278
+ <p class="s10" style="font-size: 10px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
279
+ <p class="s11" style="font-size: 11px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
280
+ <p class="s12" style="font-size: 12px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
281
+ <p class="s14" style="font-size: 14px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
282
+ <p class="s18" style="font-size: 18px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
283
+ <p class="s24" style="font-size: 24px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
284
+ <p class="s30" style="font-size: 30px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
285
+ <p class="s36" style="font-size: 36px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
286
+ <p class="s48" style="font-size: 48px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
287
+ <p class="s60" style="font-size: 60px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
288
+ <p class="s72" style="font-size: 72px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
289
+ </div>
290
+ </div>
291
+ <div class="demo" style="font-family: 'Recoleta Alt'; font-weight: normal; font-style: normal;">
292
+ <h1>Recoleta Alt Regular</h1>
293
+ <pre>.your-style {
294
+ font-family: 'Recoleta Alt';
295
+ font-weight: normal;
296
+ font-style: normal;
297
+ }</pre>
298
+ <div class="font-container">
299
+ <p class="letters">
300
+ абвгдеёжзийклмнопрстуфхцчшщъыьэюя<br>
301
+ АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ<br>
302
+ abcdefghijklmnopqrstuvwxyz<br>
303
+ ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
304
+ 0123456789.:,;()*!?'@#<>$%&^+-=~
305
+ </p>
306
+ <p class="s10" style="font-size: 10px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
307
+ <p class="s11" style="font-size: 11px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
308
+ <p class="s12" style="font-size: 12px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
309
+ <p class="s14" style="font-size: 14px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
310
+ <p class="s18" style="font-size: 18px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
311
+ <p class="s24" style="font-size: 24px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
312
+ <p class="s30" style="font-size: 30px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
313
+ <p class="s36" style="font-size: 36px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
314
+ <p class="s48" style="font-size: 48px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
315
+ <p class="s60" style="font-size: 60px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
316
+ <p class="s72" style="font-size: 72px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
317
+ </div>
318
+ </div>
319
+ <div class="demo" style="font-family: 'Recoleta'; font-weight: 100; font-style: normal;">
320
+ <h1>Recoleta Thin</h1>
321
+ <pre>.your-style {
322
+ font-family: 'Recoleta';
323
+ font-weight: 100;
324
+ font-style: normal;
325
+ }</pre>
326
+ <div class="font-container">
327
+ <p class="letters">
328
+ абвгдеёжзийклмнопрстуфхцчшщъыьэюя<br>
329
+ АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ<br>
330
+ abcdefghijklmnopqrstuvwxyz<br>
331
+ ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
332
+ 0123456789.:,;()*!?'@#<>$%&^+-=~
333
+ </p>
334
+ <p class="s10" style="font-size: 10px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
335
+ <p class="s11" style="font-size: 11px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
336
+ <p class="s12" style="font-size: 12px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
337
+ <p class="s14" style="font-size: 14px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
338
+ <p class="s18" style="font-size: 18px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
339
+ <p class="s24" style="font-size: 24px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
340
+ <p class="s30" style="font-size: 30px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
341
+ <p class="s36" style="font-size: 36px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
342
+ <p class="s48" style="font-size: 48px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
343
+ <p class="s60" style="font-size: 60px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
344
+ <p class="s72" style="font-size: 72px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
345
+ </div>
346
+ </div>
347
+ <div class="demo" style="font-family: 'Recoleta Alt'; font-weight: bold; font-style: normal;">
348
+ <h1>Recoleta Alt Bold</h1>
349
+ <pre>.your-style {
350
+ font-family: 'Recoleta Alt';
351
+ font-weight: bold;
352
+ font-style: normal;
353
+ }</pre>
354
+ <div class="font-container">
355
+ <p class="letters">
356
+ абвгдеёжзийклмнопрстуфхцчшщъыьэюя<br>
357
+ АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ<br>
358
+ abcdefghijklmnopqrstuvwxyz<br>
359
+ ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
360
+ 0123456789.:,;()*!?'@#<>$%&^+-=~
361
+ </p>
362
+ <p class="s10" style="font-size: 10px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
363
+ <p class="s11" style="font-size: 11px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
364
+ <p class="s12" style="font-size: 12px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
365
+ <p class="s14" style="font-size: 14px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
366
+ <p class="s18" style="font-size: 18px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
367
+ <p class="s24" style="font-size: 24px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
368
+ <p class="s30" style="font-size: 30px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
369
+ <p class="s36" style="font-size: 36px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
370
+ <p class="s48" style="font-size: 48px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
371
+ <p class="s60" style="font-size: 60px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
372
+ <p class="s72" style="font-size: 72px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
373
+ </div>
374
+ </div>
375
+ <div class="demo" style="font-family: 'Recoleta Alt'; font-weight: 900; font-style: normal;">
376
+ <h1>Recoleta Alt Black</h1>
377
+ <pre>.your-style {
378
+ font-family: 'Recoleta Alt';
379
+ font-weight: 900;
380
+ font-style: normal;
381
+ }</pre>
382
+ <div class="font-container">
383
+ <p class="letters">
384
+ абвгдеёжзийклмнопрстуфхцчшщъыьэюя<br>
385
+ АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ<br>
386
+ abcdefghijklmnopqrstuvwxyz<br>
387
+ ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
388
+ 0123456789.:,;()*!?'@#<>$%&^+-=~
389
+ </p>
390
+ <p class="s10" style="font-size: 10px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
391
+ <p class="s11" style="font-size: 11px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
392
+ <p class="s12" style="font-size: 12px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
393
+ <p class="s14" style="font-size: 14px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
394
+ <p class="s18" style="font-size: 18px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
395
+ <p class="s24" style="font-size: 24px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
396
+ <p class="s30" style="font-size: 30px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
397
+ <p class="s36" style="font-size: 36px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
398
+ <p class="s48" style="font-size: 48px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
399
+ <p class="s60" style="font-size: 60px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
400
+ <p class="s72" style="font-size: 72px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
401
+ </div>
402
+ </div>
403
+ <div class="demo" style="font-family: 'Recoleta Alt'; font-weight: 300; font-style: normal;">
404
+ <h1>Recoleta Alt Light</h1>
405
+ <pre>.your-style {
406
+ font-family: 'Recoleta Alt';
407
+ font-weight: 300;
408
+ font-style: normal;
409
+ }</pre>
410
+ <div class="font-container">
411
+ <p class="letters">
412
+ абвгдеёжзийклмнопрстуфхцчшщъыьэюя<br>
413
+ АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ<br>
414
+ abcdefghijklmnopqrstuvwxyz<br>
415
+ ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
416
+ 0123456789.:,;()*!?'@#<>$%&^+-=~
417
+ </p>
418
+ <p class="s10" style="font-size: 10px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
419
+ <p class="s11" style="font-size: 11px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
420
+ <p class="s12" style="font-size: 12px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
421
+ <p class="s14" style="font-size: 14px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
422
+ <p class="s18" style="font-size: 18px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
423
+ <p class="s24" style="font-size: 24px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
424
+ <p class="s30" style="font-size: 30px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
425
+ <p class="s36" style="font-size: 36px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
426
+ <p class="s48" style="font-size: 48px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
427
+ <p class="s60" style="font-size: 60px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
428
+ <p class="s72" style="font-size: 72px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
429
+ </div>
430
+ </div>
431
+ <div class="demo" style="font-family: 'Recoleta'; font-weight: 600; font-style: normal;">
432
+ <h1>Recoleta SemiBold</h1>
433
+ <pre>.your-style {
434
+ font-family: 'Recoleta';
435
+ font-weight: 600;
436
+ font-style: normal;
437
+ }</pre>
438
+ <div class="font-container">
439
+ <p class="letters">
440
+ абвгдеёжзийклмнопрстуфхцчшщъыьэюя<br>
441
+ АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ<br>
442
+ abcdefghijklmnopqrstuvwxyz<br>
443
+ ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
444
+ 0123456789.:,;()*!?'@#<>$%&^+-=~
445
+ </p>
446
+ <p class="s10" style="font-size: 10px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
447
+ <p class="s11" style="font-size: 11px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
448
+ <p class="s12" style="font-size: 12px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
449
+ <p class="s14" style="font-size: 14px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
450
+ <p class="s18" style="font-size: 18px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
451
+ <p class="s24" style="font-size: 24px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
452
+ <p class="s30" style="font-size: 30px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
453
+ <p class="s36" style="font-size: 36px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
454
+ <p class="s48" style="font-size: 48px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
455
+ <p class="s60" style="font-size: 60px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
456
+ <p class="s72" style="font-size: 72px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
457
+ </div>
458
+ </div>
459
+ <div class="demo" style="font-family: 'Recoleta'; font-weight: normal; font-style: normal;">
460
+ <h1>Recoleta Regular</h1>
461
+ <pre>.your-style {
462
+ font-family: 'Recoleta';
463
+ font-weight: normal;
464
+ font-style: normal;
465
+ }</pre>
466
+ <div class="font-container">
467
+ <p class="letters">
468
+ абвгдеёжзийклмнопрстуфхцчшщъыьэюя<br>
469
+ АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ<br>
470
+ abcdefghijklmnopqrstuvwxyz<br>
471
+ ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
472
+ 0123456789.:,;()*!?'@#<>$%&^+-=~
473
+ </p>
474
+ <p class="s10" style="font-size: 10px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
475
+ <p class="s11" style="font-size: 11px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
476
+ <p class="s12" style="font-size: 12px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
477
+ <p class="s14" style="font-size: 14px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
478
+ <p class="s18" style="font-size: 18px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
479
+ <p class="s24" style="font-size: 24px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
480
+ <p class="s30" style="font-size: 30px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
481
+ <p class="s36" style="font-size: 36px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
482
+ <p class="s48" style="font-size: 48px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
483
+ <p class="s60" style="font-size: 60px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
484
+ <p class="s72" style="font-size: 72px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
485
+ </div>
486
+ </div>
487
+ <div class="demo" style="font-family: 'Recoleta'; font-weight: bold; font-style: normal;">
488
+ <h1>Recoleta Bold</h1>
489
+ <pre>.your-style {
490
+ font-family: 'Recoleta';
491
+ font-weight: bold;
492
+ font-style: normal;
493
+ }</pre>
494
+ <div class="font-container">
495
+ <p class="letters">
496
+ абвгдеёжзийклмнопрстуфхцчшщъыьэюя<br>
497
+ АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ<br>
498
+ abcdefghijklmnopqrstuvwxyz<br>
499
+ ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
500
+ 0123456789.:,;()*!?'@#<>$%&^+-=~
501
+ </p>
502
+ <p class="s10" style="font-size: 10px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
503
+ <p class="s11" style="font-size: 11px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
504
+ <p class="s12" style="font-size: 12px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
505
+ <p class="s14" style="font-size: 14px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
506
+ <p class="s18" style="font-size: 18px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
507
+ <p class="s24" style="font-size: 24px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
508
+ <p class="s30" style="font-size: 30px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
509
+ <p class="s36" style="font-size: 36px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
510
+ <p class="s48" style="font-size: 48px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
511
+ <p class="s60" style="font-size: 60px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
512
+ <p class="s72" style="font-size: 72px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
513
+ </div>
514
+ </div>
515
+ <div class="demo" style="font-family: 'Recoleta'; font-weight: 900; font-style: normal;">
516
+ <h1>Recoleta Black</h1>
517
+ <pre>.your-style {
518
+ font-family: 'Recoleta';
519
+ font-weight: 900;
520
+ font-style: normal;
521
+ }</pre>
522
+ <div class="font-container">
523
+ <p class="letters">
524
+ абвгдеёжзийклмнопрстуфхцчшщъыьэюя<br>
525
+ АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ<br>
526
+ abcdefghijklmnopqrstuvwxyz<br>
527
+ ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
528
+ 0123456789.:,;()*!?'@#<>$%&^+-=~
529
+ </p>
530
+ <p class="s10" style="font-size: 10px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
531
+ <p class="s11" style="font-size: 11px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
532
+ <p class="s12" style="font-size: 12px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
533
+ <p class="s14" style="font-size: 14px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
534
+ <p class="s18" style="font-size: 18px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
535
+ <p class="s24" style="font-size: 24px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
536
+ <p class="s30" style="font-size: 30px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
537
+ <p class="s36" style="font-size: 36px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
538
+ <p class="s48" style="font-size: 48px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
539
+ <p class="s60" style="font-size: 60px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
540
+ <p class="s72" style="font-size: 72px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
541
+ </div>
542
+ </div>
543
+ <div class="demo" style="font-family: 'Recoleta'; font-weight: 300; font-style: normal;">
544
+ <h1>Recoleta Light</h1>
545
+ <pre>.your-style {
546
+ font-family: 'Recoleta';
547
+ font-weight: 300;
548
+ font-style: normal;
549
+ }</pre>
550
+ <div class="font-container">
551
+ <p class="letters">
552
+ абвгдеёжзийклмнопрстуфхцчшщъыьэюя<br>
553
+ АБВГДЕЁЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ<br>
554
+ abcdefghijklmnopqrstuvwxyz<br>
555
+ ABCDEFGHIJKLMNOPQRSTUVWXYZ<br>
556
+ 0123456789.:,;()*!?'@#<>$%&^+-=~
557
+ </p>
558
+ <p class="s10" style="font-size: 10px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
559
+ <p class="s11" style="font-size: 11px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
560
+ <p class="s12" style="font-size: 12px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
561
+ <p class="s14" style="font-size: 14px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
562
+ <p class="s18" style="font-size: 18px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
563
+ <p class="s24" style="font-size: 24px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
564
+ <p class="s30" style="font-size: 30px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
565
+ <p class="s36" style="font-size: 36px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
566
+ <p class="s48" style="font-size: 48px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
567
+ <p class="s60" style="font-size: 60px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
568
+ <p class="s72" style="font-size: 72px;">Съешь же ещё этих мягких французских булок, да выпей чаю.</p>
569
+ </div>
570
+ </div>
571
+ </div>
572
+ </body>
573
+ </html>