tharaday 0.5.2 → 0.5.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 (28) hide show
  1. package/dist/components/Box/Box.d.ts +1 -1
  2. package/dist/components/Box/Box.stories.d.ts +1 -11
  3. package/dist/components/Box/Box.types.d.ts +0 -8
  4. package/dist/components/Text/Text.d.ts +1 -1
  5. package/dist/components/Text/Text.stories.d.ts +44 -1
  6. package/dist/components/Text/Text.types.d.ts +29 -0
  7. package/dist/ds.css +1 -1
  8. package/dist/ds.js +1423 -1242
  9. package/dist/ds.umd.cjs +1 -1
  10. package/dist/layouts/AppLayout/AppLayout.stories.d.ts +0 -3
  11. package/package.json +3 -2
  12. package/src/components/Badge/Badge.stories.tsx +1 -1
  13. package/src/components/Box/Box.stories.tsx +0 -20
  14. package/src/components/Box/Box.tsx +7 -16
  15. package/src/components/Box/Box.types.ts +0 -8
  16. package/src/components/Button/Button.stories.tsx +1 -1
  17. package/src/components/Input/Input.stories.tsx +1 -1
  18. package/src/components/Loader/Loader.stories.tsx +1 -1
  19. package/src/components/ProgressBar/ProgressBar.stories.tsx +1 -1
  20. package/src/components/RadioButton/RadioButton.stories.tsx +1 -1
  21. package/src/components/Select/Select.stories.tsx +1 -1
  22. package/src/components/Text/Text.module.css +556 -0
  23. package/src/components/Text/Text.stories.tsx +34 -0
  24. package/src/components/Text/Text.tsx +28 -0
  25. package/src/components/Text/Text.types.ts +30 -0
  26. package/src/components/Textarea/Textarea.stories.tsx +1 -1
  27. package/src/layouts/AppLayout/AppLayout.stories.tsx +0 -53
  28. package/src/layouts/AppLayout/AppLayout.tsx +16 -30
package/src/components/Text/Text.module.css CHANGED
@@ -124,3 +124,559 @@
124
124
  text-overflow: ellipsis;
125
125
  width: 100%;
126
126
  }
127
+ /* Padding */
128
+ .p-0 {
129
+ padding: 0;
130
+ }
131
+ .p-1 {
132
+ padding: var(--ds-space-1);
133
+ }
134
+ .p-2 {
135
+ padding: var(--ds-space-2);
136
+ }
137
+ .p-3 {
138
+ padding: var(--ds-space-3);
139
+ }
140
+ .p-4 {
141
+ padding: var(--ds-space-4);
142
+ }
143
+ .p-5 {
144
+ padding: var(--ds-space-5);
145
+ }
146
+ .p-6 {
147
+ padding: var(--ds-space-6);
148
+ }
149
+ .p-8 {
150
+ padding: var(--ds-space-8);
151
+ }
152
+ .p-10 {
153
+ padding: var(--ds-space-10);
154
+ }
155
+ .p-12 {
156
+ padding: var(--ds-space-12);
157
+ }
158
+ .p-14 {
159
+ padding: var(--ds-space-14);
160
+ }
161
+
162
+ .px-0 {
163
+ padding-left: 0;
164
+ padding-right: 0;
165
+ }
166
+ .px-1 {
167
+ padding-left: var(--ds-space-1);
168
+ padding-right: var(--ds-space-1);
169
+ }
170
+ .px-2 {
171
+ padding-left: var(--ds-space-2);
172
+ padding-right: var(--ds-space-2);
173
+ }
174
+ .px-3 {
175
+ padding-left: var(--ds-space-3);
176
+ padding-right: var(--ds-space-3);
177
+ }
178
+ .px-4 {
179
+ padding-left: var(--ds-space-4);
180
+ padding-right: var(--ds-space-4);
181
+ }
182
+ .px-5 {
183
+ padding-left: var(--ds-space-5);
184
+ padding-right: var(--ds-space-5);
185
+ }
186
+ .px-6 {
187
+ padding-left: var(--ds-space-6);
188
+ padding-right: var(--ds-space-6);
189
+ }
190
+ .px-8 {
191
+ padding-left: var(--ds-space-8);
192
+ padding-right: var(--ds-space-8);
193
+ }
194
+ .px-10 {
195
+ padding-left: var(--ds-space-10);
196
+ padding-right: var(--ds-space-10);
197
+ }
198
+ .px-12 {
199
+ padding-left: var(--ds-space-12);
200
+ padding-right: var(--ds-space-12);
201
+ }
202
+ .px-14 {
203
+ padding-left: var(--ds-space-14);
204
+ padding-right: var(--ds-space-14);
205
+ }
206
+
207
+ .py-0 {
208
+ padding-top: 0;
209
+ padding-bottom: 0;
210
+ }
211
+ .py-1 {
212
+ padding-top: var(--ds-space-1);
213
+ padding-bottom: var(--ds-space-1);
214
+ }
215
+ .py-2 {
216
+ padding-top: var(--ds-space-2);
217
+ padding-bottom: var(--ds-space-2);
218
+ }
219
+ .py-3 {
220
+ padding-top: var(--ds-space-3);
221
+ padding-bottom: var(--ds-space-3);
222
+ }
223
+ .py-4 {
224
+ padding-top: var(--ds-space-4);
225
+ padding-bottom: var(--ds-space-4);
226
+ }
227
+ .py-5 {
228
+ padding-top: var(--ds-space-5);
229
+ padding-bottom: var(--ds-space-5);
230
+ }
231
+ .py-6 {
232
+ padding-top: var(--ds-space-6);
233
+ padding-bottom: var(--ds-space-6);
234
+ }
235
+ .py-8 {
236
+ padding-top: var(--ds-space-8);
237
+ padding-bottom: var(--ds-space-8);
238
+ }
239
+ .py-10 {
240
+ padding-top: var(--ds-space-10);
241
+ padding-bottom: var(--ds-space-10);
242
+ }
243
+ .py-12 {
244
+ padding-top: var(--ds-space-12);
245
+ padding-bottom: var(--ds-space-12);
246
+ }
247
+ .py-14 {
248
+ padding-top: var(--ds-space-14);
249
+ padding-bottom: var(--ds-space-14);
250
+ }
251
+
252
+ .pt-0 {
253
+ padding-top: 0;
254
+ }
255
+ .pt-1 {
256
+ padding-top: var(--ds-space-1);
257
+ }
258
+ .pt-2 {
259
+ padding-top: var(--ds-space-2);
260
+ }
261
+ .pt-3 {
262
+ padding-top: var(--ds-space-3);
263
+ }
264
+ .pt-4 {
265
+ padding-top: var(--ds-space-4);
266
+ }
267
+ .pt-5 {
268
+ padding-top: var(--ds-space-5);
269
+ }
270
+ .pt-6 {
271
+ padding-top: var(--ds-space-6);
272
+ }
273
+ .pt-8 {
274
+ padding-top: var(--ds-space-8);
275
+ }
276
+ .pt-10 {
277
+ padding-top: var(--ds-space-10);
278
+ }
279
+ .pt-12 {
280
+ padding-top: var(--ds-space-12);
281
+ }
282
+ .pt-14 {
283
+ padding-top: var(--ds-space-14);
284
+ }
285
+
286
+ .pb-0 {
287
+ padding-bottom: 0;
288
+ }
289
+ .pb-1 {
290
+ padding-bottom: var(--ds-space-1);
291
+ }
292
+ .pb-2 {
293
+ padding-bottom: var(--ds-space-2);
294
+ }
295
+ .pb-3 {
296
+ padding-bottom: var(--ds-space-3);
297
+ }
298
+ .pb-4 {
299
+ padding-bottom: var(--ds-space-4);
300
+ }
301
+ .pb-5 {
302
+ padding-bottom: var(--ds-space-5);
303
+ }
304
+ .pb-6 {
305
+ padding-bottom: var(--ds-space-6);
306
+ }
307
+ .pb-8 {
308
+ padding-bottom: var(--ds-space-8);
309
+ }
310
+ .pb-10 {
311
+ padding-bottom: var(--ds-space-10);
312
+ }
313
+ .pb-12 {
314
+ padding-bottom: var(--ds-space-12);
315
+ }
316
+ .pb-14 {
317
+ padding-bottom: var(--ds-space-14);
318
+ }
319
+
320
+ .pl-0 {
321
+ padding-left: 0;
322
+ }
323
+ .pl-1 {
324
+ padding-left: var(--ds-space-1);
325
+ }
326
+ .pl-2 {
327
+ padding-left: var(--ds-space-2);
328
+ }
329
+ .pl-3 {
330
+ padding-left: var(--ds-space-3);
331
+ }
332
+ .pl-4 {
333
+ padding-left: var(--ds-space-4);
334
+ }
335
+ .pl-5 {
336
+ padding-left: var(--ds-space-5);
337
+ }
338
+ .pl-6 {
339
+ padding-left: var(--ds-space-6);
340
+ }
341
+ .pl-8 {
342
+ padding-left: var(--ds-space-8);
343
+ }
344
+ .pl-10 {
345
+ padding-left: var(--ds-space-10);
346
+ }
347
+ .pl-12 {
348
+ padding-left: var(--ds-space-12);
349
+ }
350
+ .pl-14 {
351
+ padding-left: var(--ds-space-14);
352
+ }
353
+
354
+ .pr-0 {
355
+ padding-right: 0;
356
+ }
357
+ .pr-1 {
358
+ padding-right: var(--ds-space-1);
359
+ }
360
+ .pr-2 {
361
+ padding-right: var(--ds-space-2);
362
+ }
363
+ .pr-3 {
364
+ padding-right: var(--ds-space-3);
365
+ }
366
+ .pr-4 {
367
+ padding-right: var(--ds-space-4);
368
+ }
369
+ .pr-5 {
370
+ padding-right: var(--ds-space-5);
371
+ }
372
+ .pr-6 {
373
+ padding-right: var(--ds-space-6);
374
+ }
375
+ .pr-8 {
376
+ padding-right: var(--ds-space-8);
377
+ }
378
+ .pr-10 {
379
+ padding-right: var(--ds-space-10);
380
+ }
381
+ .pr-12 {
382
+ padding-right: var(--ds-space-12);
383
+ }
384
+ .pr-14 {
385
+ padding-right: var(--ds-space-14);
386
+ }
387
+
388
+ /* Gap */
389
+ .gap-0 {
390
+ gap: 0;
391
+ }
392
+ .gap-1 {
393
+ gap: var(--ds-space-1);
394
+ }
395
+ .gap-2 {
396
+ gap: var(--ds-space-2);
397
+ }
398
+ .gap-3 {
399
+ gap: var(--ds-space-3);
400
+ }
401
+ .gap-4 {
402
+ gap: var(--ds-space-4);
403
+ }
404
+ .gap-5 {
405
+ gap: var(--ds-space-5);
406
+ }
407
+ .gap-6 {
408
+ gap: var(--ds-space-6);
409
+ }
410
+ .gap-8 {
411
+ gap: var(--ds-space-8);
412
+ }
413
+ .gap-10 {
414
+ gap: var(--ds-space-10);
415
+ }
416
+ .gap-12 {
417
+ gap: var(--ds-space-12);
418
+ }
419
+ .gap-14 {
420
+ gap: var(--ds-space-14);
421
+ }
422
+
423
+ /* Margin */
424
+ .m-0 {
425
+ margin: 0;
426
+ }
427
+ .m-1 {
428
+ margin: var(--ds-space-1);
429
+ }
430
+ .m-2 {
431
+ margin: var(--ds-space-2);
432
+ }
433
+ .m-3 {
434
+ margin: var(--ds-space-3);
435
+ }
436
+ .m-4 {
437
+ margin: var(--ds-space-4);
438
+ }
439
+ .m-5 {
440
+ margin: var(--ds-space-5);
441
+ }
442
+ .m-6 {
443
+ margin: var(--ds-space-6);
444
+ }
445
+ .m-8 {
446
+ margin: var(--ds-space-8);
447
+ }
448
+ .m-10 {
449
+ margin: var(--ds-space-10);
450
+ }
451
+ .m-12 {
452
+ margin: var(--ds-space-12);
453
+ }
454
+ .m-14 {
455
+ margin: var(--ds-space-14);
456
+ }
457
+
458
+ .mx-0 {
459
+ margin-left: 0;
460
+ margin-right: 0;
461
+ }
462
+ .mx-1 {
463
+ margin-left: var(--ds-space-1);
464
+ margin-right: var(--ds-space-1);
465
+ }
466
+ .mx-2 {
467
+ margin-left: var(--ds-space-2);
468
+ margin-right: var(--ds-space-2);
469
+ }
470
+ .mx-3 {
471
+ margin-left: var(--ds-space-3);
472
+ margin-right: var(--ds-space-3);
473
+ }
474
+ .mx-4 {
475
+ margin-left: var(--ds-space-4);
476
+ margin-right: var(--ds-space-4);
477
+ }
478
+ .mx-5 {
479
+ margin-left: var(--ds-space-5);
480
+ margin-right: var(--ds-space-5);
481
+ }
482
+ .mx-6 {
483
+ margin-left: var(--ds-space-6);
484
+ margin-right: var(--ds-space-6);
485
+ }
486
+ .mx-8 {
487
+ margin-left: var(--ds-space-8);
488
+ margin-right: var(--ds-space-8);
489
+ }
490
+ .mx-10 {
491
+ margin-left: var(--ds-space-10);
492
+ margin-right: var(--ds-space-10);
493
+ }
494
+ .mx-12 {
495
+ margin-left: var(--ds-space-12);
496
+ margin-right: var(--ds-space-12);
497
+ }
498
+ .mx-14 {
499
+ margin-left: var(--ds-space-14);
500
+ margin-right: var(--ds-space-14);
501
+ }
502
+
503
+ .my-0 {
504
+ margin-top: 0;
505
+ margin-bottom: 0;
506
+ }
507
+ .my-1 {
508
+ margin-top: var(--ds-space-1);
509
+ margin-bottom: var(--ds-space-1);
510
+ }
511
+ .my-2 {
512
+ margin-top: var(--ds-space-2);
513
+ margin-bottom: var(--ds-space-2);
514
+ }
515
+ .my-3 {
516
+ margin-top: var(--ds-space-3);
517
+ margin-bottom: var(--ds-space-3);
518
+ }
519
+ .my-4 {
520
+ margin-top: var(--ds-space-4);
521
+ margin-bottom: var(--ds-space-4);
522
+ }
523
+ .my-5 {
524
+ margin-top: var(--ds-space-5);
525
+ margin-bottom: var(--ds-space-5);
526
+ }
527
+ .my-6 {
528
+ margin-top: var(--ds-space-6);
529
+ margin-bottom: var(--ds-space-6);
530
+ }
531
+ .my-8 {
532
+ margin-top: var(--ds-space-8);
533
+ margin-bottom: var(--ds-space-8);
534
+ }
535
+ .my-10 {
536
+ margin-top: var(--ds-space-10);
537
+ margin-bottom: var(--ds-space-10);
538
+ }
539
+ .my-12 {
540
+ margin-top: var(--ds-space-12);
541
+ margin-bottom: var(--ds-space-12);
542
+ }
543
+ .my-14 {
544
+ margin-top: var(--ds-space-14);
545
+ margin-bottom: var(--ds-space-14);
546
+ }
547
+
548
+ .mt-0 {
549
+ margin-top: 0;
550
+ }
551
+ .mt-1 {
552
+ margin-top: var(--ds-space-1);
553
+ }
554
+ .mt-2 {
555
+ margin-top: var(--ds-space-2);
556
+ }
557
+ .mt-3 {
558
+ margin-top: var(--ds-space-3);
559
+ }
560
+ .mt-4 {
561
+ margin-top: var(--ds-space-4);
562
+ }
563
+ .mt-5 {
564
+ margin-top: var(--ds-space-5);
565
+ }
566
+ .mt-6 {
567
+ margin-top: var(--ds-space-6);
568
+ }
569
+ .mt-8 {
570
+ margin-top: var(--ds-space-8);
571
+ }
572
+ .mt-10 {
573
+ margin-top: var(--ds-space-10);
574
+ }
575
+ .mt-12 {
576
+ margin-top: var(--ds-space-12);
577
+ }
578
+ .mt-14 {
579
+ margin-top: var(--ds-space-14);
580
+ }
581
+
582
+ .mb-0 {
583
+ margin-bottom: 0;
584
+ }
585
+ .mb-1 {
586
+ margin-bottom: var(--ds-space-1);
587
+ }
588
+ .mb-2 {
589
+ margin-bottom: var(--ds-space-2);
590
+ }
591
+ .mb-3 {
592
+ margin-bottom: var(--ds-space-3);
593
+ }
594
+ .mb-4 {
595
+ margin-bottom: var(--ds-space-4);
596
+ }
597
+ .mb-5 {
598
+ margin-bottom: var(--ds-space-5);
599
+ }
600
+ .mb-6 {
601
+ margin-bottom: var(--ds-space-6);
602
+ }
603
+ .mb-8 {
604
+ margin-bottom: var(--ds-space-8);
605
+ }
606
+ .mb-10 {
607
+ margin-bottom: var(--ds-space-10);
608
+ }
609
+ .mb-12 {
610
+ margin-bottom: var(--ds-space-12);
611
+ }
612
+ .mb-14 {
613
+ margin-bottom: var(--ds-space-14);
614
+ }
615
+
616
+ .ml-0 {
617
+ margin-left: 0;
618
+ }
619
+ .ml-1 {
620
+ margin-left: var(--ds-space-1);
621
+ }
622
+ .ml-2 {
623
+ margin-left: var(--ds-space-2);
624
+ }
625
+ .ml-3 {
626
+ margin-left: var(--ds-space-3);
627
+ }
628
+ .ml-4 {
629
+ margin-left: var(--ds-space-4);
630
+ }
631
+ .ml-5 {
632
+ margin-left: var(--ds-space-5);
633
+ }
634
+ .ml-6 {
635
+ margin-left: var(--ds-space-6);
636
+ }
637
+ .ml-8 {
638
+ margin-left: var(--ds-space-8);
639
+ }
640
+ .ml-10 {
641
+ margin-left: var(--ds-space-10);
642
+ }
643
+ .ml-12 {
644
+ margin-left: var(--ds-space-12);
645
+ }
646
+ .ml-14 {
647
+ margin-left: var(--ds-space-14);
648
+ }
649
+
650
+ .mr-0 {
651
+ margin-right: 0;
652
+ }
653
+ .mr-1 {
654
+ margin-right: var(--ds-space-1);
655
+ }
656
+ .mr-2 {
657
+ margin-right: var(--ds-space-2);
658
+ }
659
+ .mr-3 {
660
+ margin-right: var(--ds-space-3);
661
+ }
662
+ .mr-4 {
663
+ margin-right: var(--ds-space-4);
664
+ }
665
+ .mr-5 {
666
+ margin-right: var(--ds-space-5);
667
+ }
668
+ .mr-6 {
669
+ margin-right: var(--ds-space-6);
670
+ }
671
+ .mr-8 {
672
+ margin-right: var(--ds-space-8);
673
+ }
674
+ .mr-10 {
675
+ margin-right: var(--ds-space-10);
676
+ }
677
+ .mr-12 {
678
+ margin-right: var(--ds-space-12);
679
+ }
680
+ .mr-14 {
681
+ margin-right: var(--ds-space-14);
682
+ }
package/src/components/Text/Text.stories.tsx CHANGED
@@ -39,6 +39,20 @@ const meta = {
39
39
  as: {
40
40
  control: 'text',
41
41
  },
42
+ margin: { control: 'number' },
43
+ marginX: { control: 'number' },
44
+ marginY: { control: 'number' },
45
+ marginTop: { control: 'number' },
46
+ marginBottom: { control: 'number' },
47
+ marginLeft: { control: 'number' },
48
+ marginRight: { control: 'number' },
49
+ padding: { control: 'number' },
50
+ paddingX: { control: 'number' },
51
+ paddingY: { control: 'number' },
52
+ paddingTop: { control: 'number' },
53
+ paddingBottom: { control: 'number' },
54
+ paddingLeft: { control: 'number' },
55
+ paddingRight: { control: 'number' },
42
56
  },
43
57
  } satisfies Meta<typeof Text>;
44
58
 
@@ -52,6 +66,26 @@ export const Default: Story = {
52
66
  },
53
67
  };
54
68
 
69
+ export const Spacing: Story = {
70
+ args: {
71
+ children: '',
72
+ },
73
+ render: () => (
74
+ <Box display="flex" flexDirection="column" gap={4} border padding={4}>
75
+ <Box border backgroundColor="subtle">
76
+ <Text padding={4} margin={4}>
77
+ Text with Padding 4 and Margin 4
78
+ </Text>
79
+ </Box>
80
+ <Box border backgroundColor="subtle">
81
+ <Text marginTop={8} marginBottom={2} paddingX={6}>
82
+ Text with marginTop 8, marginBottom 2 and paddingX 6
83
+ </Text>
84
+ </Box>
85
+ </Box>
86
+ ),
87
+ };
88
+
55
89
  export const Headings: Story = {
56
90
  args: {
57
91
  children: '',
package/src/components/Text/Text.tsx CHANGED
@@ -27,6 +27,20 @@ export const Text = ({
27
27
  color,
28
28
  noWrap,
29
29
  className,
30
+ padding,
31
+ paddingX,
32
+ paddingY,
33
+ paddingTop,
34
+ paddingBottom,
35
+ paddingLeft,
36
+ paddingRight,
37
+ margin,
38
+ marginX,
39
+ marginY,
40
+ marginTop,
41
+ marginBottom,
42
+ marginLeft,
43
+ marginRight,
30
44
  ...props
31
45
  }: TextProps) => {
32
46
  const Component = as || variantElementMap[variant] || 'span';
@@ -40,6 +54,20 @@ export const Text = ({
40
54
  weight && styles[weight],
41
55
  color && styles[`color-${color}`],
42
56
  noWrap && styles.noWrap,
57
+ padding !== undefined && styles[`p-${padding}`],
58
+ paddingX !== undefined && styles[`px-${paddingX}`],
59
+ paddingY !== undefined && styles[`py-${paddingY}`],
60
+ paddingTop !== undefined && styles[`pt-${paddingTop}`],
61
+ paddingBottom !== undefined && styles[`pb-${paddingBottom}`],
62
+ paddingLeft !== undefined && styles[`pl-${paddingLeft}`],
63
+ paddingRight !== undefined && styles[`pr-${paddingRight}`],
64
+ margin !== undefined && styles[`margin-${margin}`],
65
+ marginX !== undefined && styles[`marginX-${marginX}`],
66
+ marginY !== undefined && styles[`marginY-${marginY}`],
67
+ marginTop !== undefined && styles[`marginTop-${marginTop}`],
68
+ marginBottom !== undefined && styles[`marginBottom-${marginBottom}`],
69
+ marginLeft !== undefined && styles[`marginLeft-${marginLeft}`],
70
+ marginRight !== undefined && styles[`marginRight-${marginRight}`],
43
71
  className
44
72
  )}
45
73
  {...props}
package/src/components/Text/Text.types.ts CHANGED
@@ -1,5 +1,8 @@
1
1
  import type { ReactNode, ElementType, HTMLAttributes } from 'react';
2
2
 
3
+ export type BoxPadding = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 14;
4
+ export type BoxMargin = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 14;
5
+
3
6
  export type TextVariant =
4
7
  | 'h1'
5
8
  | 'h2'
@@ -42,4 +45,31 @@ export interface TextProps extends HTMLAttributes<HTMLElement> {
42
45
  color?: TextColor;
43
46
  /** If true, the text will not wrap and show ellipsis */
44
47
  noWrap?: boolean;
48
+ margin?: BoxMargin;
49
+ /** Horizontal margin */
50
+ marginX?: BoxMargin;
51
+ /** Vertical margin */
52
+ marginY?: BoxMargin;
53
+ /** Top margin */
54
+ marginTop?: BoxMargin;
55
+ /** Bottom margin */
56
+ marginBottom?: BoxMargin;
57
+ /** Left margin */
58
+ marginLeft?: BoxMargin;
59
+ /** Right margin */
60
+ marginRight?: BoxMargin;
61
+ /** Padding */
62
+ padding?: BoxPadding;
63
+ /** Horizontal padding */
64
+ paddingX?: BoxPadding;
65
+ /** Vertical padding */
66
+ paddingY?: BoxPadding;
67
+ /** Top padding */
68
+ paddingTop?: BoxPadding;
69
+ /** Bottom padding */
70
+ paddingBottom?: BoxPadding;
71
+ /** Left padding */
72
+ paddingLeft?: BoxPadding;
73
+ /** Right padding */
74
+ paddingRight?: BoxPadding;
45
75
  }
package/src/components/Textarea/Textarea.stories.tsx CHANGED
@@ -77,7 +77,7 @@ export const Gallery: Story = {
77
77
  <Box display="flex" flexDirection="column" gap={8} width="400px">
78
78
  {(['sm', 'md', 'lg'] as const).map((size) => (
79
79
  <Box key={size} display="flex" flexDirection="column" gap={4}>
80
- <Box as="h3" m={0} style={{ textTransform: 'capitalize' }}>
80
+ <Box as="h3" margin={0} style={{ textTransform: 'capitalize' }}>
81
81
  Size: {size}
82
82
  </Box>
83
83
  <Textarea size={size} label="Default" placeholder="Default placeholder" />