@spaced-out/ui-design-system 0.1.8 → 0.1.10

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 (29) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/lib/components/Button/Button.js +2 -0
  3. package/lib/components/Button/Button.js.flow +4 -0
  4. package/lib/components/Dropdown/Dropdown.js +2 -3
  5. package/lib/components/Dropdown/Dropdown.js.flow +2 -1
  6. package/lib/components/Input/Input.js +2 -2
  7. package/lib/components/Input/Input.js.flow +2 -1
  8. package/lib/components/Menu/Menu.js +4 -3
  9. package/lib/components/Menu/Menu.js.flow +23 -19
  10. package/lib/components/SearchInput/SearchInput.js +4 -4
  11. package/lib/components/SearchInput/SearchInput.js.flow +7 -2
  12. package/lib/components/SearchInput/SearchInput.module.css +8 -8
  13. package/lib/components/Table/Row.js +6 -2
  14. package/lib/components/Table/Row.js.flow +2 -0
  15. package/lib/components/Table/TableHeader.js +3 -1
  16. package/lib/components/Table/TableHeader.js.flow +1 -0
  17. package/lib/components/Text/Text.js +71 -52
  18. package/lib/components/Text/Text.js.flow +568 -399
  19. package/lib/components/Textarea/Textarea.js +2 -2
  20. package/lib/components/Textarea/Textarea.js.flow +2 -1
  21. package/lib/components/Toast/Toast.js +10 -6
  22. package/lib/components/Toast/Toast.js.flow +18 -10
  23. package/lib/components/Toggle/Toggle.js +4 -3
  24. package/lib/components/Toggle/Toggle.js.flow +69 -62
  25. package/lib/components/Truncate/Truncate.js +10 -7
  26. package/lib/components/Truncate/Truncate.js.flow +49 -37
  27. package/lib/components/Typeahead/Typeahead.js +2 -3
  28. package/lib/components/Typeahead/Typeahead.js.flow +2 -1
  29. package/package.json +1 -1
package/lib/components/Text/Text.js.flow CHANGED
@@ -29,13 +29,14 @@ export type HighlightTextProps = {
29
29
  highlightWithBackground?: boolean,
30
30
  };
31
31
 
32
- const HighlightText = ({
32
+ const HighlightText: React$AbstractComponent<HighlightTextProps, HTMLSpanElement> =
33
+ React.forwardRef<HighlightTextProps, HTMLSpanElement>( ({
33
34
  text,
34
35
  highlight,
35
36
  highlightClassName,
36
37
  caseSensitiveHighlighting,
37
38
  highlightWithBackground,
38
- }: HighlightTextProps) => {
39
+ }: HighlightTextProps, ref) => {
39
40
  // Split text on highlight term, include term itself into parts, ignore case
40
41
  let highlights = '';
41
42
  if (Array.isArray(highlight)) {
@@ -49,11 +50,12 @@ const HighlightText = ({
49
50
  .filter((part) => part !== '');
50
51
 
51
52
  return (
52
- <span>
53
- {parts.map((part) =>
53
+ <span ref={ref}>
54
+ {parts.map((part, idx) =>
54
55
  highlights.toLowerCase().includes(escapeRegExp(part).toLowerCase()) ? (
55
56
  <span
56
- key={part}
57
+ // eslint-disable-next-line react/no-array-index-key
58
+ key={idx}
57
59
  className={classify(
58
60
  css.highlightText,
59
61
  {
@@ -70,428 +72,595 @@ const HighlightText = ({
70
72
  )}
71
73
  </span>
72
74
  );
73
- };
75
+ }
76
+ )
74
77
 
75
- export const JumboMedium = ({
76
- color = TEXT_COLORS.primary,
77
- children,
78
- className,
79
- highlightedTextClassName,
80
- highlightString,
81
- caseSensitiveHighlighting,
82
- highlightWithBackground,
83
- ...props
84
- }: TextProps): React.Node => (
85
- <span {...props} className={classify(css.jumboMedium, css[color], className)}>
86
- {!!highlightString?.length && typeof children === 'string' ? (
87
- <HighlightText
88
- text={children}
89
- highlight={highlightString}
90
- caseSensitiveHighlighting={caseSensitiveHighlighting}
91
- highlightClassName={highlightedTextClassName}
92
- highlightWithBackground={highlightWithBackground}
93
- />
94
- ) : (
95
- children
96
- )}
97
- </span>
98
- );
78
+ export const JumboMedium: React$AbstractComponent<TextProps, HTMLSpanElement> =
79
+ React.forwardRef<TextProps, HTMLSpanElement>(
80
+ (
81
+ {
82
+ color = TEXT_COLORS.primary,
83
+ children,
84
+ className,
85
+ highlightedTextClassName,
86
+ highlightString,
87
+ caseSensitiveHighlighting,
88
+ highlightWithBackground,
89
+ ...props
90
+ }: TextProps,
91
+ ref,
92
+ ): React.Node => (
93
+ <span
94
+ {...props}
95
+ className={classify(css.jumboMedium, css[color], className)}
96
+ ref={ref}
97
+ >
98
+ {!!highlightString?.length && typeof children === 'string' ? (
99
+ <HighlightText
100
+ text={children}
101
+ highlight={highlightString}
102
+ caseSensitiveHighlighting={caseSensitiveHighlighting}
103
+ highlightClassName={highlightedTextClassName}
104
+ highlightWithBackground={highlightWithBackground}
105
+ />
106
+ ) : (
107
+ children
108
+ )}
109
+ </span>
110
+ ),
111
+ );
99
112
 
100
- export const TitleMedium = ({
101
- color = TEXT_COLORS.primary,
102
- children,
103
- className,
104
- highlightedTextClassName,
105
- highlightString,
106
- caseSensitiveHighlighting,
107
- highlightWithBackground,
108
- ...props
109
- }: TextProps): React.Node => (
110
- <h1 {...props} className={classify(css.titleMedium, css[color], className)}>
111
- {!!highlightString?.length && typeof children === 'string' ? (
112
- <HighlightText
113
- text={children}
114
- highlight={highlightString}
115
- caseSensitiveHighlighting={caseSensitiveHighlighting}
116
- highlightClassName={highlightedTextClassName}
117
- highlightWithBackground={highlightWithBackground}
118
- />
119
- ) : (
120
- children
121
- )}
122
- </h1>
113
+ export const TitleMedium: React$AbstractComponent<
114
+ TextProps,
115
+ HTMLHeadingElement,
116
+ > = React.forwardRef<TextProps, HTMLHeadingElement>(
117
+ (
118
+ {
119
+ color = TEXT_COLORS.primary,
120
+ children,
121
+ className,
122
+ highlightedTextClassName,
123
+ highlightString,
124
+ caseSensitiveHighlighting,
125
+ highlightWithBackground,
126
+ ...props
127
+ }: TextProps,
128
+ ref,
129
+ ): React.Node => (
130
+ <h1
131
+ {...props}
132
+ className={classify(css.titleMedium, css[color], className)}
133
+ ref={ref}
134
+ >
135
+ {!!highlightString?.length && typeof children === 'string' ? (
136
+ <HighlightText
137
+ text={children}
138
+ highlight={highlightString}
139
+ caseSensitiveHighlighting={caseSensitiveHighlighting}
140
+ highlightClassName={highlightedTextClassName}
141
+ highlightWithBackground={highlightWithBackground}
142
+ />
143
+ ) : (
144
+ children
145
+ )}
146
+ </h1>
147
+ ),
123
148
  );
124
149
 
125
- export const SubTitleLarge = ({
126
- color = TEXT_COLORS.primary,
127
- children,
128
- className,
129
- highlightedTextClassName,
130
- highlightString,
131
- caseSensitiveHighlighting,
132
- highlightWithBackground,
133
- ...props
134
- }: TextProps): React.Node => (
135
- <h2 {...props} className={classify(css.subTitleLarge, css[color], className)}>
136
- {!!highlightString?.length && typeof children === 'string' ? (
137
- <HighlightText
138
- text={children}
139
- highlight={highlightString}
140
- caseSensitiveHighlighting={caseSensitiveHighlighting}
141
- highlightClassName={highlightedTextClassName}
142
- highlightWithBackground={highlightWithBackground}
143
- />
144
- ) : (
145
- children
146
- )}
147
- </h2>
150
+ export const SubTitleLarge: React$AbstractComponent<
151
+ TextProps,
152
+ HTMLHeadingElement,
153
+ > = React.forwardRef<TextProps, HTMLHeadingElement>(
154
+ (
155
+ {
156
+ color = TEXT_COLORS.primary,
157
+ children,
158
+ className,
159
+ highlightedTextClassName,
160
+ highlightString,
161
+ caseSensitiveHighlighting,
162
+ highlightWithBackground,
163
+ ...props
164
+ }: TextProps,
165
+ ref,
166
+ ): React.Node => (
167
+ <h2
168
+ {...props}
169
+ className={classify(css.subTitleLarge, css[color], className)}
170
+ ref={ref}
171
+ >
172
+ {!!highlightString?.length && typeof children === 'string' ? (
173
+ <HighlightText
174
+ text={children}
175
+ highlight={highlightString}
176
+ caseSensitiveHighlighting={caseSensitiveHighlighting}
177
+ highlightClassName={highlightedTextClassName}
178
+ highlightWithBackground={highlightWithBackground}
179
+ />
180
+ ) : (
181
+ children
182
+ )}
183
+ </h2>
184
+ ),
148
185
  );
149
186
 
150
- export const SubTitleMedium = ({
151
- color = TEXT_COLORS.primary,
152
- children,
153
- className,
154
- highlightedTextClassName,
155
- highlightString,
156
- caseSensitiveHighlighting,
157
- highlightWithBackground,
158
- ...props
159
- }: TextProps): React.Node => (
160
- <h3
161
- {...props}
162
- className={classify(css.subTitleMedium, css[color], className)}
163
- >
164
- {!!highlightString?.length && typeof children === 'string' ? (
165
- <HighlightText
166
- text={children}
167
- highlight={highlightString}
168
- caseSensitiveHighlighting={caseSensitiveHighlighting}
169
- highlightClassName={highlightedTextClassName}
170
- highlightWithBackground={highlightWithBackground}
171
- />
172
- ) : (
173
- children
174
- )}
175
- </h3>
187
+ export const SubTitleMedium: React$AbstractComponent<
188
+ TextProps,
189
+ HTMLHeadingElement,
190
+ > = React.forwardRef<TextProps, HTMLHeadingElement>(
191
+ (
192
+ {
193
+ color = TEXT_COLORS.primary,
194
+ children,
195
+ className,
196
+ highlightedTextClassName,
197
+ highlightString,
198
+ caseSensitiveHighlighting,
199
+ highlightWithBackground,
200
+ ...props
201
+ }: TextProps,
202
+ ref,
203
+ ): React.Node => (
204
+ <h3
205
+ {...props}
206
+ className={classify(css.subTitleMedium, css[color], className)}
207
+ ref={ref}
208
+ >
209
+ {!!highlightString?.length && typeof children === 'string' ? (
210
+ <HighlightText
211
+ text={children}
212
+ highlight={highlightString}
213
+ caseSensitiveHighlighting={caseSensitiveHighlighting}
214
+ highlightClassName={highlightedTextClassName}
215
+ highlightWithBackground={highlightWithBackground}
216
+ />
217
+ ) : (
218
+ children
219
+ )}
220
+ </h3>
221
+ ),
176
222
  );
177
223
 
178
- export const SubTitleSmall = ({
179
- color = TEXT_COLORS.primary,
180
- children,
181
- className,
182
- highlightedTextClassName,
183
- highlightString,
184
- caseSensitiveHighlighting,
185
- highlightWithBackground,
186
- ...props
187
- }: TextProps): React.Node => (
188
- <h4 {...props} className={classify(css.subTitleSmall, css[color], className)}>
189
- {!!highlightString?.length && typeof children === 'string' ? (
190
- <HighlightText
191
- text={children}
192
- highlight={highlightString}
193
- caseSensitiveHighlighting={caseSensitiveHighlighting}
194
- highlightClassName={highlightedTextClassName}
195
- highlightWithBackground={highlightWithBackground}
196
- />
197
- ) : (
198
- children
199
- )}
200
- </h4>
224
+ export const SubTitleSmall: React$AbstractComponent<
225
+ TextProps,
226
+ HTMLHeadingElement,
227
+ > = React.forwardRef<TextProps, HTMLHeadingElement>(
228
+ (
229
+ {
230
+ color = TEXT_COLORS.primary,
231
+ children,
232
+ className,
233
+ highlightedTextClassName,
234
+ highlightString,
235
+ caseSensitiveHighlighting,
236
+ highlightWithBackground,
237
+ ...props
238
+ }: TextProps,
239
+ ref,
240
+ ): React.Node => (
241
+ <h4
242
+ {...props}
243
+ className={classify(css.subTitleSmall, css[color], className)}
244
+ ref={ref}
245
+ >
246
+ {!!highlightString?.length && typeof children === 'string' ? (
247
+ <HighlightText
248
+ text={children}
249
+ highlight={highlightString}
250
+ caseSensitiveHighlighting={caseSensitiveHighlighting}
251
+ highlightClassName={highlightedTextClassName}
252
+ highlightWithBackground={highlightWithBackground}
253
+ />
254
+ ) : (
255
+ children
256
+ )}
257
+ </h4>
258
+ ),
201
259
  );
202
260
 
203
- export const SubTitleExtraSmall = ({
204
- color = TEXT_COLORS.primary,
205
- children,
206
- className,
207
- highlightedTextClassName,
208
- highlightString,
209
- caseSensitiveHighlighting,
210
- highlightWithBackground,
211
- ...props
212
- }: TextProps): React.Node => (
213
- <h5
214
- {...props}
215
- className={classify(css.subTitleExtraSmall, css[color], className)}
216
- >
217
- {!!highlightString?.length && typeof children === 'string' ? (
218
- <HighlightText
219
- text={children}
220
- highlight={highlightString}
221
- caseSensitiveHighlighting={caseSensitiveHighlighting}
222
- highlightClassName={highlightedTextClassName}
223
- highlightWithBackground={highlightWithBackground}
224
- />
225
- ) : (
226
- children
227
- )}
228
- </h5>
261
+ export const SubTitleExtraSmall: React$AbstractComponent<
262
+ TextProps,
263
+ HTMLHeadingElement,
264
+ > = React.forwardRef<TextProps, HTMLHeadingElement>(
265
+ (
266
+ {
267
+ color = TEXT_COLORS.primary,
268
+ children,
269
+ className,
270
+ highlightedTextClassName,
271
+ highlightString,
272
+ caseSensitiveHighlighting,
273
+ highlightWithBackground,
274
+ ...props
275
+ }: TextProps,
276
+ ref,
277
+ ): React.Node => (
278
+ <h5
279
+ {...props}
280
+ className={classify(css.subTitleExtraSmall, css[color], className)}
281
+ ref={ref}
282
+ >
283
+ {!!highlightString?.length && typeof children === 'string' ? (
284
+ <HighlightText
285
+ text={children}
286
+ highlight={highlightString}
287
+ caseSensitiveHighlighting={caseSensitiveHighlighting}
288
+ highlightClassName={highlightedTextClassName}
289
+ highlightWithBackground={highlightWithBackground}
290
+ />
291
+ ) : (
292
+ children
293
+ )}
294
+ </h5>
295
+ ),
229
296
  );
230
297
 
231
- export const ButtonTextMedium = ({
232
- color = TEXT_COLORS.primary,
233
- children,
234
- className,
235
- highlightedTextClassName,
236
- highlightString,
237
- caseSensitiveHighlighting,
238
- highlightWithBackground,
239
- ...props
240
- }: TextProps): React.Node => (
241
- <span
242
- {...props}
243
- className={classify(css.buttonTextMedium, css[color], className)}
244
- >
245
- {!!highlightString?.length && typeof children === 'string' ? (
246
- <HighlightText
247
- text={children}
248
- highlight={highlightString}
249
- caseSensitiveHighlighting={caseSensitiveHighlighting}
250
- highlightClassName={highlightedTextClassName}
251
- highlightWithBackground={highlightWithBackground}
252
- />
253
- ) : (
254
- children
255
- )}
256
- </span>
298
+ export const ButtonTextMedium: React$AbstractComponent<
299
+ TextProps,
300
+ HTMLSpanElement,
301
+ > = React.forwardRef<TextProps, HTMLSpanElement>(
302
+ (
303
+ {
304
+ color = TEXT_COLORS.primary,
305
+ children,
306
+ className,
307
+ highlightedTextClassName,
308
+ highlightString,
309
+ caseSensitiveHighlighting,
310
+ highlightWithBackground,
311
+ ...props
312
+ }: TextProps,
313
+ ref,
314
+ ): React.Node => (
315
+ <span
316
+ {...props}
317
+ className={classify(css.buttonTextMedium, css[color], className)}
318
+ ref={ref}
319
+ >
320
+ {!!highlightString?.length && typeof children === 'string' ? (
321
+ <HighlightText
322
+ text={children}
323
+ highlight={highlightString}
324
+ caseSensitiveHighlighting={caseSensitiveHighlighting}
325
+ highlightClassName={highlightedTextClassName}
326
+ highlightWithBackground={highlightWithBackground}
327
+ />
328
+ ) : (
329
+ children
330
+ )}
331
+ </span>
332
+ ),
257
333
  );
258
334
 
259
- export const ButtonTextSmall = ({
260
- color = TEXT_COLORS.primary,
261
- children,
262
- className,
263
- highlightedTextClassName,
264
- highlightString,
265
- caseSensitiveHighlighting,
266
- highlightWithBackground,
267
- ...props
268
- }: TextProps): React.Node => (
269
- <span
270
- {...props}
271
- className={classify(css.buttonTextSmall, css[color], className)}
272
- >
273
- {!!highlightString?.length && typeof children === 'string' ? (
274
- <HighlightText
275
- text={children}
276
- highlight={highlightString}
277
- caseSensitiveHighlighting={caseSensitiveHighlighting}
278
- highlightClassName={highlightedTextClassName}
279
- highlightWithBackground={highlightWithBackground}
280
- />
281
- ) : (
282
- children
283
- )}
284
- </span>
335
+ export const ButtonTextSmall: React$AbstractComponent<
336
+ TextProps,
337
+ HTMLSpanElement,
338
+ > = React.forwardRef<TextProps, HTMLSpanElement>(
339
+ (
340
+ {
341
+ color = TEXT_COLORS.primary,
342
+ children,
343
+ className,
344
+ highlightedTextClassName,
345
+ highlightString,
346
+ caseSensitiveHighlighting,
347
+ highlightWithBackground,
348
+ ...props
349
+ }: TextProps,
350
+ ref,
351
+ ): React.Node => (
352
+ <span
353
+ {...props}
354
+ className={classify(css.buttonTextSmall, css[color], className)}
355
+ ref={ref}
356
+ >
357
+ {!!highlightString?.length && typeof children === 'string' ? (
358
+ <HighlightText
359
+ text={children}
360
+ highlight={highlightString}
361
+ caseSensitiveHighlighting={caseSensitiveHighlighting}
362
+ highlightClassName={highlightedTextClassName}
363
+ highlightWithBackground={highlightWithBackground}
364
+ />
365
+ ) : (
366
+ children
367
+ )}
368
+ </span>
369
+ ),
285
370
  );
286
371
 
287
- export const ButtonTextExtraSmall = ({
288
- color = TEXT_COLORS.primary,
289
- children,
290
- className,
291
- highlightedTextClassName,
292
- highlightString,
293
- caseSensitiveHighlighting,
294
- highlightWithBackground,
295
- ...props
296
- }: TextProps): React.Node => (
297
- <span
298
- {...props}
299
- className={classify(css.buttonTextExtraSmall, css[color], className)}
300
- >
301
- {!!highlightString?.length && typeof children === 'string' ? (
302
- <HighlightText
303
- text={children}
304
- highlight={highlightString}
305
- caseSensitiveHighlighting={caseSensitiveHighlighting}
306
- highlightClassName={highlightedTextClassName}
307
- highlightWithBackground={highlightWithBackground}
308
- />
309
- ) : (
310
- children
311
- )}
312
- </span>
372
+ export const ButtonTextExtraSmall: React$AbstractComponent<
373
+ TextProps,
374
+ HTMLSpanElement,
375
+ > = React.forwardRef<TextProps, HTMLSpanElement>(
376
+ (
377
+ {
378
+ color = TEXT_COLORS.primary,
379
+ children,
380
+ className,
381
+ highlightedTextClassName,
382
+ highlightString,
383
+ caseSensitiveHighlighting,
384
+ highlightWithBackground,
385
+ ...props
386
+ }: TextProps,
387
+ ref,
388
+ ): React.Node => (
389
+ <span
390
+ {...props}
391
+ className={classify(css.buttonTextExtraSmall, css[color], className)}
392
+ ref={ref}
393
+ >
394
+ {!!highlightString?.length && typeof children === 'string' ? (
395
+ <HighlightText
396
+ text={children}
397
+ highlight={highlightString}
398
+ caseSensitiveHighlighting={caseSensitiveHighlighting}
399
+ highlightClassName={highlightedTextClassName}
400
+ highlightWithBackground={highlightWithBackground}
401
+ />
402
+ ) : (
403
+ children
404
+ )}
405
+ </span>
406
+ ),
313
407
  );
314
408
 
315
- export const FormInputMedium = ({
316
- color = TEXT_COLORS.primary,
317
- children,
318
- className,
319
- highlightedTextClassName,
320
- highlightString,
321
- caseSensitiveHighlighting,
322
- highlightWithBackground,
323
- ...props
324
- }: TextProps): React.Node => (
325
- <p
326
- {...props}
327
- className={classify(css.formInputMedium, css[color], className)}
328
- >
329
- {!!highlightString?.length && typeof children === 'string' ? (
330
- <HighlightText
331
- text={children}
332
- highlight={highlightString}
333
- caseSensitiveHighlighting={caseSensitiveHighlighting}
334
- highlightClassName={highlightedTextClassName}
335
- highlightWithBackground={highlightWithBackground}
336
- />
337
- ) : (
338
- children
339
- )}
340
- </p>
409
+ export const FormInputMedium: React$AbstractComponent<
410
+ TextProps,
411
+ HTMLParagraphElement,
412
+ > = React.forwardRef<TextProps, HTMLParagraphElement>(
413
+ (
414
+ {
415
+ color = TEXT_COLORS.primary,
416
+ children,
417
+ className,
418
+ highlightedTextClassName,
419
+ highlightString,
420
+ caseSensitiveHighlighting,
421
+ highlightWithBackground,
422
+ ...props
423
+ }: TextProps,
424
+ ref,
425
+ ): React.Node => (
426
+ <p
427
+ {...props}
428
+ className={classify(css.formInputMedium, css[color], className)}
429
+ ref={ref}
430
+ >
431
+ {!!highlightString?.length && typeof children === 'string' ? (
432
+ <HighlightText
433
+ text={children}
434
+ highlight={highlightString}
435
+ caseSensitiveHighlighting={caseSensitiveHighlighting}
436
+ highlightClassName={highlightedTextClassName}
437
+ highlightWithBackground={highlightWithBackground}
438
+ />
439
+ ) : (
440
+ children
441
+ )}
442
+ </p>
443
+ ),
341
444
  );
342
445
 
343
- export const FormInputSmall = ({
344
- color = TEXT_COLORS.primary,
345
- children,
346
- className,
347
- highlightedTextClassName,
348
- highlightString,
349
- caseSensitiveHighlighting,
350
- highlightWithBackground,
351
- ...props
352
- }: TextProps): React.Node => (
353
- <p {...props} className={classify(css.formInputSmall, css[color], className)}>
354
- {!!highlightString?.length && typeof children === 'string' ? (
355
- <HighlightText
356
- text={children}
357
- highlight={highlightString}
358
- caseSensitiveHighlighting={caseSensitiveHighlighting}
359
- highlightClassName={highlightedTextClassName}
360
- highlightWithBackground={highlightWithBackground}
361
- />
362
- ) : (
363
- children
364
- )}
365
- </p>
446
+ export const FormInputSmall: React$AbstractComponent<
447
+ TextProps,
448
+ HTMLParagraphElement,
449
+ > = React.forwardRef<TextProps, HTMLParagraphElement>(
450
+ (
451
+ {
452
+ color = TEXT_COLORS.primary,
453
+ children,
454
+ className,
455
+ highlightedTextClassName,
456
+ highlightString,
457
+ caseSensitiveHighlighting,
458
+ highlightWithBackground,
459
+ ...props
460
+ }: TextProps,
461
+ ref,
462
+ ): React.Node => (
463
+ <p
464
+ {...props}
465
+ className={classify(css.formInputSmall, css[color], className)}
466
+ ref={ref}
467
+ >
468
+ {!!highlightString?.length && typeof children === 'string' ? (
469
+ <HighlightText
470
+ text={children}
471
+ highlight={highlightString}
472
+ caseSensitiveHighlighting={caseSensitiveHighlighting}
473
+ highlightClassName={highlightedTextClassName}
474
+ highlightWithBackground={highlightWithBackground}
475
+ />
476
+ ) : (
477
+ children
478
+ )}
479
+ </p>
480
+ ),
366
481
  );
367
482
 
368
- export const BodyLarge = ({
369
- color = TEXT_COLORS.primary,
370
- children,
371
- className,
372
- highlightedTextClassName,
373
- highlightString,
374
- caseSensitiveHighlighting,
375
- highlightWithBackground,
376
- ...props
377
- }: TextProps): React.Node => (
378
- <p {...props} className={classify(css.bodyLarge, css[color], className)}>
379
- {!!highlightString?.length && typeof children === 'string' ? (
380
- <HighlightText
381
- text={children}
382
- highlight={highlightString}
383
- caseSensitiveHighlighting={caseSensitiveHighlighting}
384
- highlightClassName={highlightedTextClassName}
385
- highlightWithBackground={highlightWithBackground}
386
- />
387
- ) : (
388
- children
389
- )}
390
- </p>
483
+ export const BodyLarge: React$AbstractComponent<
484
+ TextProps,
485
+ HTMLParagraphElement,
486
+ > = React.forwardRef<TextProps, HTMLParagraphElement>(
487
+ (
488
+ {
489
+ color = TEXT_COLORS.primary,
490
+ children,
491
+ className,
492
+ highlightedTextClassName,
493
+ highlightString,
494
+ caseSensitiveHighlighting,
495
+ highlightWithBackground,
496
+ ...props
497
+ }: TextProps,
498
+ ref,
499
+ ): React.Node => (
500
+ <p
501
+ {...props}
502
+ className={classify(css.bodyLarge, css[color], className)}
503
+ ref={ref}
504
+ >
505
+ {!!highlightString?.length && typeof children === 'string' ? (
506
+ <HighlightText
507
+ text={children}
508
+ highlight={highlightString}
509
+ caseSensitiveHighlighting={caseSensitiveHighlighting}
510
+ highlightClassName={highlightedTextClassName}
511
+ highlightWithBackground={highlightWithBackground}
512
+ />
513
+ ) : (
514
+ children
515
+ )}
516
+ </p>
517
+ ),
391
518
  );
392
519
 
393
- export const BodyMedium = ({
394
- color = TEXT_COLORS.primary,
395
- children,
396
- className,
397
- highlightedTextClassName,
398
- highlightString,
399
- caseSensitiveHighlighting,
400
- highlightWithBackground,
401
- ...props
402
- }: TextProps): React.Node => (
403
- <p {...props} className={classify(css.bodyMedium, css[color], className)}>
404
- {!!highlightString?.length && typeof children === 'string' ? (
405
- <HighlightText
406
- text={children}
407
- highlight={highlightString}
408
- caseSensitiveHighlighting={caseSensitiveHighlighting}
409
- highlightClassName={highlightedTextClassName}
410
- highlightWithBackground={highlightWithBackground}
411
- />
412
- ) : (
413
- children
414
- )}
415
- </p>
520
+ export const BodyMedium: React$AbstractComponent<
521
+ TextProps,
522
+ HTMLParagraphElement,
523
+ > = React.forwardRef<TextProps, HTMLParagraphElement>(
524
+ (
525
+ {
526
+ color = TEXT_COLORS.primary,
527
+ children,
528
+ className,
529
+ highlightedTextClassName,
530
+ highlightString,
531
+ caseSensitiveHighlighting,
532
+ highlightWithBackground,
533
+ ...props
534
+ }: TextProps,
535
+ ref,
536
+ ): React.Node => (
537
+ <p
538
+ {...props}
539
+ className={classify(css.bodyMedium, css[color], className)}
540
+ ref={ref}
541
+ >
542
+ {!!highlightString?.length && typeof children === 'string' ? (
543
+ <HighlightText
544
+ text={children}
545
+ highlight={highlightString}
546
+ caseSensitiveHighlighting={caseSensitiveHighlighting}
547
+ highlightClassName={highlightedTextClassName}
548
+ highlightWithBackground={highlightWithBackground}
549
+ />
550
+ ) : (
551
+ children
552
+ )}
553
+ </p>
554
+ ),
416
555
  );
417
556
 
418
- export const BodySmall = ({
419
- color = TEXT_COLORS.primary,
420
- children,
421
- className,
422
- highlightedTextClassName,
423
- highlightString,
424
- caseSensitiveHighlighting,
425
- highlightWithBackground,
426
- ...props
427
- }: TextProps): React.Node => (
428
- <p {...props} className={classify(css.bodySmall, css[color], className)}>
429
- {!!highlightString?.length && typeof children === 'string' ? (
430
- <HighlightText
431
- text={children}
432
- highlight={highlightString}
433
- caseSensitiveHighlighting={caseSensitiveHighlighting}
434
- highlightClassName={highlightedTextClassName}
435
- highlightWithBackground={highlightWithBackground}
436
- />
437
- ) : (
438
- children
439
- )}
440
- </p>
557
+ export const BodySmall: React$AbstractComponent<
558
+ TextProps,
559
+ HTMLParagraphElement,
560
+ > = React.forwardRef<TextProps, HTMLParagraphElement>(
561
+ (
562
+ {
563
+ color = TEXT_COLORS.primary,
564
+ children,
565
+ className,
566
+ highlightedTextClassName,
567
+ highlightString,
568
+ caseSensitiveHighlighting,
569
+ highlightWithBackground,
570
+ ...props
571
+ }: TextProps,
572
+ ref,
573
+ ): React.Node => (
574
+ <p
575
+ {...props}
576
+ className={classify(css.bodySmall, css[color], className)}
577
+ ref={ref}
578
+ >
579
+ {!!highlightString?.length && typeof children === 'string' ? (
580
+ <HighlightText
581
+ text={children}
582
+ highlight={highlightString}
583
+ caseSensitiveHighlighting={caseSensitiveHighlighting}
584
+ highlightClassName={highlightedTextClassName}
585
+ highlightWithBackground={highlightWithBackground}
586
+ />
587
+ ) : (
588
+ children
589
+ )}
590
+ </p>
591
+ ),
441
592
  );
442
593
 
443
- export const FormLabelMedium = ({
444
- color = TEXT_COLORS.primary,
445
- children,
446
- className,
447
- highlightedTextClassName,
448
- highlightString,
449
- caseSensitiveHighlighting,
450
- highlightWithBackground,
451
- ...props
452
- }: TextProps): React.Node => (
453
- <span
454
- {...props}
455
- className={classify(css.formLabelMedium, css[color], className)}
456
- >
457
- {!!highlightString?.length && typeof children === 'string' ? (
458
- <HighlightText
459
- text={children}
460
- highlight={highlightString}
461
- caseSensitiveHighlighting={caseSensitiveHighlighting}
462
- highlightClassName={highlightedTextClassName}
463
- highlightWithBackground={highlightWithBackground}
464
- />
465
- ) : (
466
- children
467
- )}
468
- </span>
594
+ export const FormLabelMedium: React$AbstractComponent<
595
+ TextProps,
596
+ HTMLSpanElement,
597
+ > = React.forwardRef<TextProps, HTMLSpanElement>(
598
+ (
599
+ {
600
+ color = TEXT_COLORS.primary,
601
+ children,
602
+ className,
603
+ highlightedTextClassName,
604
+ highlightString,
605
+ caseSensitiveHighlighting,
606
+ highlightWithBackground,
607
+ ...props
608
+ }: TextProps,
609
+ ref,
610
+ ): React.Node => (
611
+ <span
612
+ {...props}
613
+ className={classify(css.formLabelMedium, css[color], className)}
614
+ ref={ref}
615
+ >
616
+ {!!highlightString?.length && typeof children === 'string' ? (
617
+ <HighlightText
618
+ text={children}
619
+ highlight={highlightString}
620
+ caseSensitiveHighlighting={caseSensitiveHighlighting}
621
+ highlightClassName={highlightedTextClassName}
622
+ highlightWithBackground={highlightWithBackground}
623
+ />
624
+ ) : (
625
+ children
626
+ )}
627
+ </span>
628
+ ),
469
629
  );
470
630
 
471
- export const FormLabelSmall = ({
472
- color = TEXT_COLORS.primary,
473
- children,
474
- className,
475
- highlightedTextClassName,
476
- highlightString,
477
- caseSensitiveHighlighting,
478
- highlightWithBackground,
479
- ...props
480
- }: TextProps): React.Node => (
481
- <span
482
- {...props}
483
- className={classify(css.formLabelSmall, css[color], className)}
484
- >
485
- {!!highlightString?.length && typeof children === 'string' ? (
486
- <HighlightText
487
- text={children}
488
- highlight={highlightString}
489
- caseSensitiveHighlighting={caseSensitiveHighlighting}
490
- highlightClassName={highlightedTextClassName}
491
- highlightWithBackground={highlightWithBackground}
492
- />
493
- ) : (
494
- children
495
- )}
496
- </span>
631
+ export const FormLabelSmall: React$AbstractComponent<
632
+ TextProps,
633
+ HTMLSpanElement,
634
+ > = React.forwardRef<TextProps, HTMLSpanElement>(
635
+ (
636
+ {
637
+ color = TEXT_COLORS.primary,
638
+ children,
639
+ className,
640
+ highlightedTextClassName,
641
+ highlightString,
642
+ caseSensitiveHighlighting,
643
+ highlightWithBackground,
644
+ ...props
645
+ }: TextProps,
646
+ ref,
647
+ ): React.Node => (
648
+ <span
649
+ {...props}
650
+ className={classify(css.formLabelSmall, css[color], className)}
651
+ ref={ref}
652
+ >
653
+ {!!highlightString?.length && typeof children === 'string' ? (
654
+ <HighlightText
655
+ text={children}
656
+ highlight={highlightString}
657
+ caseSensitiveHighlighting={caseSensitiveHighlighting}
658
+ highlightClassName={highlightedTextClassName}
659
+ highlightWithBackground={highlightWithBackground}
660
+ />
661
+ ) : (
662
+ children
663
+ )}
664
+ </span>
665
+ ),
497
666
  );