@mirai/ui 1.0.85 → 1.0.87

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 (24) hide show
  1. package/README.md +1 -0
  2. package/build/components/Button/Button.js +10 -5
  3. package/build/components/Button/Button.js.map +1 -1
  4. package/build/components/Button/Button.module.css +130 -29
  5. package/build/components/Button/Button.stories.js +28 -6
  6. package/build/components/Button/Button.stories.js.map +1 -1
  7. package/build/components/Button/__tests__/__snapshots__/Button.test.js.snap +24 -8
  8. package/build/components/Form/__tests__/__snapshots__/Form.test.jsx.snap +6 -6
  9. package/build/components/InputDate/InputDate.js +8 -10
  10. package/build/components/InputDate/InputDate.js.map +1 -1
  11. package/build/components/InputDate/InputDate.module.css +6 -14
  12. package/build/components/InputDate/InputDate.stories.js +2 -2
  13. package/build/components/InputDate/InputDate.stories.js.map +1 -1
  14. package/build/components/InputDate/__tests__/__snapshots__/InputDate.test.js.snap +322 -139
  15. package/build/components/InputNumber/__tests__/__snapshots__/InputNumber.test.js.snap +9 -9
  16. package/build/components/InputSelect/InputSelect.js +8 -5
  17. package/build/components/InputSelect/InputSelect.js.map +1 -1
  18. package/build/components/InputSelect/__tests__/__snapshots__/InputSelect.test.js.snap +6 -6
  19. package/build/components/InputText/InputText.js +6 -5
  20. package/build/components/InputText/InputText.js.map +1 -1
  21. package/build/components/InputText/InputText.module.css +17 -26
  22. package/build/components/InputText/__tests__/__snapshots__/InputText.test.js.snap +6 -6
  23. package/build/theme/default.theme.css +3 -3
  24. package/package.json +1 -1
package/build/components/InputDate/__tests__/__snapshots__/InputDate.test.js.snap CHANGED
@@ -5,9 +5,6 @@ exports[`component:<InputDate> inherit:className 1`] = `
5
5
  <div
6
6
  class="view inputContainer mirai"
7
7
  >
8
- <span
9
- class="text small label text hint"
10
- />
11
8
  <div
12
9
  class="view row"
13
10
  >
@@ -17,11 +14,15 @@ exports[`component:<InputDate> inherit:className 1`] = `
17
14
  <div
18
15
  class="view row inputBorder"
19
16
  >
17
+ <span
18
+ class="text paragraph text label"
19
+ >
20
+ DD
21
+ </span>
20
22
  <input
21
- class="input input"
23
+ class="input input withLabel"
22
24
  maxlength="2"
23
25
  name="name:DD"
24
- placeholder="DD"
25
26
  type="text"
26
27
  value=""
27
28
  />
@@ -33,27 +34,35 @@ exports[`component:<InputDate> inherit:className 1`] = `
33
34
  <div
34
35
  class="view row inputBorder"
35
36
  >
37
+ <span
38
+ class="text paragraph text label"
39
+ >
40
+ MM
41
+ </span>
36
42
  <input
37
- class="input input"
43
+ class="input input withLabel"
38
44
  maxlength="2"
39
45
  name="name:MM"
40
- placeholder="MM"
41
46
  type="text"
42
47
  value=""
43
48
  />
44
49
  </div>
45
50
  </div>
46
51
  <div
47
- class="view inputContainer input Y state"
52
+ class="view inputContainer input Y"
48
53
  >
49
54
  <div
50
55
  class="view row inputBorder"
51
56
  >
57
+ <span
58
+ class="text paragraph text label"
59
+ >
60
+ YYYY
61
+ </span>
52
62
  <input
53
- class="input input"
63
+ class="input input withLabel"
54
64
  maxlength="4"
55
65
  name="name:YYYY"
56
- placeholder="YYYY"
57
66
  type="text"
58
67
  value=""
59
68
  />
@@ -69,9 +78,6 @@ exports[`component:<InputDate> prop:disabled 1`] = `
69
78
  <div
70
79
  class="view inputContainer"
71
80
  >
72
- <span
73
- class="text small label text hint disabled"
74
- />
75
81
  <div
76
82
  class="view row"
77
83
  >
@@ -81,12 +87,16 @@ exports[`component:<InputDate> prop:disabled 1`] = `
81
87
  <div
82
88
  class="view row inputBorder disabled"
83
89
  >
90
+ <span
91
+ class="text paragraph text label disabled"
92
+ >
93
+ DD
94
+ </span>
84
95
  <input
85
- class="input input"
96
+ class="input input withLabel"
86
97
  disabled=""
87
98
  maxlength="2"
88
99
  name="name:DD"
89
- placeholder="DD"
90
100
  type="text"
91
101
  value=""
92
102
  />
@@ -98,29 +108,37 @@ exports[`component:<InputDate> prop:disabled 1`] = `
98
108
  <div
99
109
  class="view row inputBorder disabled"
100
110
  >
111
+ <span
112
+ class="text paragraph text label disabled"
113
+ >
114
+ MM
115
+ </span>
101
116
  <input
102
- class="input input"
117
+ class="input input withLabel"
103
118
  disabled=""
104
119
  maxlength="2"
105
120
  name="name:MM"
106
- placeholder="MM"
107
121
  type="text"
108
122
  value=""
109
123
  />
110
124
  </div>
111
125
  </div>
112
126
  <div
113
- class="view inputContainer input Y state"
127
+ class="view inputContainer input Y"
114
128
  >
115
129
  <div
116
130
  class="view row inputBorder disabled"
117
131
  >
132
+ <span
133
+ class="text paragraph text label disabled"
134
+ >
135
+ YYYY
136
+ </span>
118
137
  <input
119
- class="input input"
138
+ class="input input withLabel"
120
139
  disabled=""
121
140
  maxlength="4"
122
141
  name="name:YYYY"
123
- placeholder="YYYY"
124
142
  type="text"
125
143
  value=""
126
144
  />
@@ -136,9 +154,6 @@ exports[`component:<InputDate> prop:error 1`] = `
136
154
  <div
137
155
  class="view inputContainer"
138
156
  >
139
- <span
140
- class="text small label text hint error"
141
- />
142
157
  <div
143
158
  class="view row"
144
159
  >
@@ -148,14 +163,43 @@ exports[`component:<InputDate> prop:error 1`] = `
148
163
  <div
149
164
  class="view row inputBorder error"
150
165
  >
166
+ <span
167
+ class="text paragraph text label error withValue"
168
+ >
169
+ DD
170
+ </span>
151
171
  <input
152
- class="input input"
172
+ class="input input withLabel"
153
173
  maxlength="2"
154
174
  name="name:DD"
155
- placeholder="DD"
156
175
  type="text"
157
176
  value=""
158
177
  />
178
+ <div
179
+ class="view row icons"
180
+ >
181
+ <span
182
+ class="icon headline-3 icon error"
183
+ >
184
+ <svg
185
+ fill="currentColor"
186
+ height="1em"
187
+ stroke="currentColor"
188
+ stroke-width="0"
189
+ viewBox="0 0 24 24"
190
+ width="1em"
191
+ xmlns="http://www.w3.org/2000/svg"
192
+ >
193
+ <path
194
+ d="M0 0h24v24H0V0z"
195
+ fill="none"
196
+ />
197
+ <path
198
+ d="M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
199
+ />
200
+ </svg>
201
+ </span>
202
+ </div>
159
203
  </div>
160
204
  </div>
161
205
  <div
@@ -164,30 +208,88 @@ exports[`component:<InputDate> prop:error 1`] = `
164
208
  <div
165
209
  class="view row inputBorder error"
166
210
  >
211
+ <span
212
+ class="text paragraph text label error withValue"
213
+ >
214
+ MM
215
+ </span>
167
216
  <input
168
- class="input input"
217
+ class="input input withLabel"
169
218
  maxlength="2"
170
219
  name="name:MM"
171
- placeholder="MM"
172
220
  type="text"
173
221
  value=""
174
222
  />
223
+ <div
224
+ class="view row icons"
225
+ >
226
+ <span
227
+ class="icon headline-3 icon error"
228
+ >
229
+ <svg
230
+ fill="currentColor"
231
+ height="1em"
232
+ stroke="currentColor"
233
+ stroke-width="0"
234
+ viewBox="0 0 24 24"
235
+ width="1em"
236
+ xmlns="http://www.w3.org/2000/svg"
237
+ >
238
+ <path
239
+ d="M0 0h24v24H0V0z"
240
+ fill="none"
241
+ />
242
+ <path
243
+ d="M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
244
+ />
245
+ </svg>
246
+ </span>
247
+ </div>
175
248
  </div>
176
249
  </div>
177
250
  <div
178
- class="view inputContainer input Y state"
251
+ class="view inputContainer input Y"
179
252
  >
180
253
  <div
181
254
  class="view row inputBorder error"
182
255
  >
256
+ <span
257
+ class="text paragraph text label error withValue"
258
+ >
259
+ YYYY
260
+ </span>
183
261
  <input
184
- class="input input"
262
+ class="input input withLabel"
185
263
  maxlength="4"
186
264
  name="name:YYYY"
187
- placeholder="YYYY"
188
265
  type="text"
189
266
  value=""
190
267
  />
268
+ <div
269
+ class="view row icons"
270
+ >
271
+ <span
272
+ class="icon headline-3 icon error"
273
+ >
274
+ <svg
275
+ fill="currentColor"
276
+ height="1em"
277
+ stroke="currentColor"
278
+ stroke-width="0"
279
+ viewBox="0 0 24 24"
280
+ width="1em"
281
+ xmlns="http://www.w3.org/2000/svg"
282
+ >
283
+ <path
284
+ d="M0 0h24v24H0V0z"
285
+ fill="none"
286
+ />
287
+ <path
288
+ d="M11 15h2v2h-2zm0-8h2v6h-2zm.99-5C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
289
+ />
290
+ </svg>
291
+ </span>
292
+ </div>
191
293
  </div>
192
294
  </div>
193
295
  <span
@@ -221,9 +323,6 @@ exports[`component:<InputDate> prop:format 1`] = `
221
323
  <div
222
324
  class="view inputContainer"
223
325
  >
224
- <span
225
- class="text small label text hint"
226
- />
227
326
  <div
228
327
  class="view row"
229
328
  >
@@ -233,11 +332,15 @@ exports[`component:<InputDate> prop:format 1`] = `
233
332
  <div
234
333
  class="view row inputBorder"
235
334
  >
335
+ <span
336
+ class="text paragraph text label"
337
+ >
338
+ MM
339
+ </span>
236
340
  <input
237
- class="input input"
341
+ class="input input withLabel"
238
342
  maxlength="2"
239
343
  name="name:MM"
240
- placeholder="MM"
241
344
  type="text"
242
345
  value=""
243
346
  />
@@ -249,27 +352,35 @@ exports[`component:<InputDate> prop:format 1`] = `
249
352
  <div
250
353
  class="view row inputBorder"
251
354
  >
355
+ <span
356
+ class="text paragraph text label"
357
+ >
358
+ DD
359
+ </span>
252
360
  <input
253
- class="input input"
361
+ class="input input withLabel"
254
362
  maxlength="2"
255
363
  name="name:DD"
256
- placeholder="DD"
257
364
  type="text"
258
365
  value=""
259
366
  />
260
367
  </div>
261
368
  </div>
262
369
  <div
263
- class="view inputContainer input Y state"
370
+ class="view inputContainer input Y"
264
371
  >
265
372
  <div
266
373
  class="view row inputBorder"
267
374
  >
375
+ <span
376
+ class="text paragraph text label"
377
+ >
378
+ YYYY
379
+ </span>
268
380
  <input
269
- class="input input"
381
+ class="input input withLabel"
270
382
  maxlength="4"
271
383
  name="name:YYYY"
272
- placeholder="YYYY"
273
384
  type="text"
274
385
  value=""
275
386
  />
@@ -299,11 +410,15 @@ exports[`component:<InputDate> prop:label 1`] = `
299
410
  <div
300
411
  class="view row inputBorder"
301
412
  >
413
+ <span
414
+ class="text paragraph text label"
415
+ >
416
+ DD
417
+ </span>
302
418
  <input
303
- class="input input"
419
+ class="input input withLabel"
304
420
  maxlength="2"
305
421
  name="name:DD"
306
- placeholder="DD"
307
422
  type="text"
308
423
  value=""
309
424
  />
@@ -315,27 +430,35 @@ exports[`component:<InputDate> prop:label 1`] = `
315
430
  <div
316
431
  class="view row inputBorder"
317
432
  >
433
+ <span
434
+ class="text paragraph text label"
435
+ >
436
+ MM
437
+ </span>
318
438
  <input
319
- class="input input"
439
+ class="input input withLabel"
320
440
  maxlength="2"
321
441
  name="name:MM"
322
- placeholder="MM"
323
442
  type="text"
324
443
  value=""
325
444
  />
326
445
  </div>
327
446
  </div>
328
447
  <div
329
- class="view inputContainer input Y state"
448
+ class="view inputContainer input Y"
330
449
  >
331
450
  <div
332
451
  class="view row inputBorder"
333
452
  >
453
+ <span
454
+ class="text paragraph text label"
455
+ >
456
+ YYYY
457
+ </span>
334
458
  <input
335
- class="input input"
459
+ class="input input withLabel"
336
460
  maxlength="4"
337
461
  name="name:YYYY"
338
- placeholder="YYYY"
339
462
  type="text"
340
463
  value=""
341
464
  />
@@ -351,9 +474,6 @@ exports[`component:<InputDate> prop:labels 1`] = `
351
474
  <div
352
475
  class="view inputContainer"
353
476
  >
354
- <span
355
- class="text small label text hint"
356
- />
357
477
  <div
358
478
  class="view row"
359
479
  >
@@ -363,11 +483,15 @@ exports[`component:<InputDate> prop:labels 1`] = `
363
483
  <div
364
484
  class="view row inputBorder"
365
485
  >
486
+ <span
487
+ class="text paragraph text label"
488
+ >
489
+ Day
490
+ </span>
366
491
  <input
367
- class="input input"
492
+ class="input input withLabel"
368
493
  maxlength="2"
369
494
  name="name:DD"
370
- placeholder="Day"
371
495
  type="text"
372
496
  value=""
373
497
  />
@@ -379,27 +503,35 @@ exports[`component:<InputDate> prop:labels 1`] = `
379
503
  <div
380
504
  class="view row inputBorder"
381
505
  >
506
+ <span
507
+ class="text paragraph text label"
508
+ >
509
+ Month
510
+ </span>
382
511
  <input
383
- class="input input"
512
+ class="input input withLabel"
384
513
  maxlength="2"
385
514
  name="name:MM"
386
- placeholder="Month"
387
515
  type="text"
388
516
  value=""
389
517
  />
390
518
  </div>
391
519
  </div>
392
520
  <div
393
- class="view inputContainer input Y state"
521
+ class="view inputContainer input Y"
394
522
  >
395
523
  <div
396
524
  class="view row inputBorder"
397
525
  >
526
+ <span
527
+ class="text paragraph text label"
528
+ >
529
+ Year
530
+ </span>
398
531
  <input
399
- class="input input"
532
+ class="input input withLabel"
400
533
  maxlength="4"
401
534
  name="name:YYYY"
402
- placeholder="Year"
403
535
  type="text"
404
536
  value=""
405
537
  />
@@ -415,9 +547,6 @@ exports[`component:<InputDate> prop:placeholder (false) 1`] = `
415
547
  <div
416
548
  class="view inputContainer"
417
549
  >
418
- <span
419
- class="text small label text hint"
420
- />
421
550
  <div
422
551
  class="view row"
423
552
  >
@@ -427,19 +556,19 @@ exports[`component:<InputDate> prop:placeholder (false) 1`] = `
427
556
  <div
428
557
  class="view row inputBorder"
429
558
  >
559
+ <span
560
+ class="text paragraph text label withValue"
561
+ >
562
+ DD
563
+ </span>
430
564
  <input
431
- class="input input"
565
+ class="input input withLabel"
432
566
  maxlength="2"
433
567
  name="name:DD"
434
568
  type="text"
435
569
  value="10"
436
570
  />
437
571
  </div>
438
- <span
439
- class="text small text hint"
440
- >
441
- DD
442
- </span>
443
572
  </div>
444
573
  <div
445
574
  class="view inputContainer input M"
@@ -447,39 +576,39 @@ exports[`component:<InputDate> prop:placeholder (false) 1`] = `
447
576
  <div
448
577
  class="view row inputBorder"
449
578
  >
579
+ <span
580
+ class="text paragraph text label withValue"
581
+ >
582
+ MM
583
+ </span>
450
584
  <input
451
- class="input input"
585
+ class="input input withLabel"
452
586
  maxlength="2"
453
587
  name="name:MM"
454
588
  type="text"
455
589
  value="04"
456
590
  />
457
591
  </div>
458
- <span
459
- class="text small text hint"
460
- >
461
- MM
462
- </span>
463
592
  </div>
464
593
  <div
465
- class="view inputContainer input Y state"
594
+ class="view inputContainer input Y"
466
595
  >
467
596
  <div
468
597
  class="view row inputBorder"
469
598
  >
599
+ <span
600
+ class="text paragraph text label withValue"
601
+ >
602
+ YYYY
603
+ </span>
470
604
  <input
471
- class="input input"
605
+ class="input input withLabel"
472
606
  maxlength="4"
473
607
  name="name:YYYY"
474
608
  type="text"
475
609
  value="1980"
476
610
  />
477
611
  </div>
478
- <span
479
- class="text small text hint"
480
- >
481
- YYYY
482
- </span>
483
612
  </div>
484
613
  </div>
485
614
  </div>
@@ -491,9 +620,6 @@ exports[`component:<InputDate> prop:success 1`] = `
491
620
  <div
492
621
  class="view inputContainer"
493
622
  >
494
- <span
495
- class="text small label text hint"
496
- />
497
623
  <div
498
624
  class="view row"
499
625
  >
@@ -503,11 +629,15 @@ exports[`component:<InputDate> prop:success 1`] = `
503
629
  <div
504
630
  class="view row inputBorder"
505
631
  >
632
+ <span
633
+ class="text paragraph text label"
634
+ >
635
+ DD
636
+ </span>
506
637
  <input
507
- class="input input"
638
+ class="input input withLabel"
508
639
  maxlength="2"
509
640
  name="name:DD"
510
- placeholder="DD"
511
641
  type="text"
512
642
  value=""
513
643
  />
@@ -519,27 +649,35 @@ exports[`component:<InputDate> prop:success 1`] = `
519
649
  <div
520
650
  class="view row inputBorder"
521
651
  >
652
+ <span
653
+ class="text paragraph text label"
654
+ >
655
+ MM
656
+ </span>
522
657
  <input
523
- class="input input"
658
+ class="input input withLabel"
524
659
  maxlength="2"
525
660
  name="name:MM"
526
- placeholder="MM"
527
661
  type="text"
528
662
  value=""
529
663
  />
530
664
  </div>
531
665
  </div>
532
666
  <div
533
- class="view inputContainer input Y state"
667
+ class="view inputContainer input Y"
534
668
  >
535
669
  <div
536
670
  class="view row inputBorder"
537
671
  >
672
+ <span
673
+ class="text paragraph text label"
674
+ >
675
+ YYYY
676
+ </span>
538
677
  <input
539
- class="input input"
678
+ class="input input withLabel"
540
679
  maxlength="4"
541
680
  name="name:YYYY"
542
- placeholder="YYYY"
543
681
  type="text"
544
682
  value=""
545
683
  />
@@ -576,9 +714,6 @@ exports[`component:<InputDate> prop:value & prop:format 1`] = `
576
714
  <div
577
715
  class="view inputContainer"
578
716
  >
579
- <span
580
- class="text small label text hint"
581
- />
582
717
  <div
583
718
  class="view row"
584
719
  >
@@ -588,11 +723,15 @@ exports[`component:<InputDate> prop:value & prop:format 1`] = `
588
723
  <div
589
724
  class="view row inputBorder"
590
725
  >
726
+ <span
727
+ class="text paragraph text label withValue"
728
+ >
729
+ MM
730
+ </span>
591
731
  <input
592
- class="input input"
732
+ class="input input withLabel"
593
733
  maxlength="2"
594
734
  name="name:MM"
595
- placeholder="MM"
596
735
  type="text"
597
736
  value="04"
598
737
  />
@@ -604,27 +743,35 @@ exports[`component:<InputDate> prop:value & prop:format 1`] = `
604
743
  <div
605
744
  class="view row inputBorder"
606
745
  >
746
+ <span
747
+ class="text paragraph text label withValue"
748
+ >
749
+ DD
750
+ </span>
607
751
  <input
608
- class="input input"
752
+ class="input input withLabel"
609
753
  maxlength="2"
610
754
  name="name:DD"
611
- placeholder="DD"
612
755
  type="text"
613
756
  value="10"
614
757
  />
615
758
  </div>
616
759
  </div>
617
760
  <div
618
- class="view inputContainer input Y state"
761
+ class="view inputContainer input Y"
619
762
  >
620
763
  <div
621
764
  class="view row inputBorder"
622
765
  >
766
+ <span
767
+ class="text paragraph text label withValue"
768
+ >
769
+ YYYY
770
+ </span>
623
771
  <input
624
- class="input input"
772
+ class="input input withLabel"
625
773
  maxlength="4"
626
774
  name="name:YYYY"
627
- placeholder="YYYY"
628
775
  type="text"
629
776
  value="1980"
630
777
  />
@@ -640,9 +787,6 @@ exports[`component:<InputDate> prop:value 1`] = `
640
787
  <div
641
788
  class="view inputContainer"
642
789
  >
643
- <span
644
- class="text small label text hint"
645
- />
646
790
  <div
647
791
  class="view row"
648
792
  >
@@ -652,11 +796,15 @@ exports[`component:<InputDate> prop:value 1`] = `
652
796
  <div
653
797
  class="view row inputBorder"
654
798
  >
799
+ <span
800
+ class="text paragraph text label withValue"
801
+ >
802
+ DD
803
+ </span>
655
804
  <input
656
- class="input input"
805
+ class="input input withLabel"
657
806
  maxlength="2"
658
807
  name="name:DD"
659
- placeholder="DD"
660
808
  type="text"
661
809
  value="10"
662
810
  />
@@ -668,27 +816,35 @@ exports[`component:<InputDate> prop:value 1`] = `
668
816
  <div
669
817
  class="view row inputBorder"
670
818
  >
819
+ <span
820
+ class="text paragraph text label withValue"
821
+ >
822
+ MM
823
+ </span>
671
824
  <input
672
- class="input input"
825
+ class="input input withLabel"
673
826
  maxlength="2"
674
827
  name="name:MM"
675
- placeholder="MM"
676
828
  type="text"
677
829
  value="04"
678
830
  />
679
831
  </div>
680
832
  </div>
681
833
  <div
682
- class="view inputContainer input Y state"
834
+ class="view inputContainer input Y"
683
835
  >
684
836
  <div
685
837
  class="view row inputBorder"
686
838
  >
839
+ <span
840
+ class="text paragraph text label withValue"
841
+ >
842
+ YYYY
843
+ </span>
687
844
  <input
688
- class="input input"
845
+ class="input input withLabel"
689
846
  maxlength="4"
690
847
  name="name:YYYY"
691
- placeholder="YYYY"
692
848
  type="text"
693
849
  value="1980"
694
850
  />
@@ -704,9 +860,6 @@ exports[`component:<InputDate> prop:warning 1`] = `
704
860
  <div
705
861
  class="view inputContainer"
706
862
  >
707
- <span
708
- class="text small label text hint"
709
- />
710
863
  <div
711
864
  class="view row"
712
865
  >
@@ -716,11 +869,15 @@ exports[`component:<InputDate> prop:warning 1`] = `
716
869
  <div
717
870
  class="view row inputBorder"
718
871
  >
872
+ <span
873
+ class="text paragraph text label"
874
+ >
875
+ DD
876
+ </span>
719
877
  <input
720
- class="input input"
878
+ class="input input withLabel"
721
879
  maxlength="2"
722
880
  name="name:DD"
723
- placeholder="DD"
724
881
  type="text"
725
882
  value=""
726
883
  />
@@ -732,27 +889,35 @@ exports[`component:<InputDate> prop:warning 1`] = `
732
889
  <div
733
890
  class="view row inputBorder"
734
891
  >
892
+ <span
893
+ class="text paragraph text label"
894
+ >
895
+ MM
896
+ </span>
735
897
  <input
736
- class="input input"
898
+ class="input input withLabel"
737
899
  maxlength="2"
738
900
  name="name:MM"
739
- placeholder="MM"
740
901
  type="text"
741
902
  value=""
742
903
  />
743
904
  </div>
744
905
  </div>
745
906
  <div
746
- class="view inputContainer input Y state"
907
+ class="view inputContainer input Y"
747
908
  >
748
909
  <div
749
910
  class="view row inputBorder"
750
911
  >
912
+ <span
913
+ class="text paragraph text label"
914
+ >
915
+ YYYY
916
+ </span>
751
917
  <input
752
- class="input input"
918
+ class="input input withLabel"
753
919
  maxlength="4"
754
920
  name="name:YYYY"
755
- placeholder="YYYY"
756
921
  type="text"
757
922
  value=""
758
923
  />
@@ -785,9 +950,6 @@ exports[`component:<InputDate> renders 1`] = `
785
950
  <div
786
951
  class="view inputContainer"
787
952
  >
788
- <span
789
- class="text small label text hint"
790
- />
791
953
  <div
792
954
  class="view row"
793
955
  >
@@ -797,11 +959,15 @@ exports[`component:<InputDate> renders 1`] = `
797
959
  <div
798
960
  class="view row inputBorder"
799
961
  >
962
+ <span
963
+ class="text paragraph text label"
964
+ >
965
+ DD
966
+ </span>
800
967
  <input
801
- class="input input"
968
+ class="input input withLabel"
802
969
  maxlength="2"
803
970
  name="name:DD"
804
- placeholder="DD"
805
971
  type="text"
806
972
  value=""
807
973
  />
@@ -813,27 +979,35 @@ exports[`component:<InputDate> renders 1`] = `
813
979
  <div
814
980
  class="view row inputBorder"
815
981
  >
982
+ <span
983
+ class="text paragraph text label"
984
+ >
985
+ MM
986
+ </span>
816
987
  <input
817
- class="input input"
988
+ class="input input withLabel"
818
989
  maxlength="2"
819
990
  name="name:MM"
820
- placeholder="MM"
821
991
  type="text"
822
992
  value=""
823
993
  />
824
994
  </div>
825
995
  </div>
826
996
  <div
827
- class="view inputContainer input Y state"
997
+ class="view inputContainer input Y"
828
998
  >
829
999
  <div
830
1000
  class="view row inputBorder"
831
1001
  >
1002
+ <span
1003
+ class="text paragraph text label"
1004
+ >
1005
+ YYYY
1006
+ </span>
832
1007
  <input
833
- class="input input"
1008
+ class="input input withLabel"
834
1009
  maxlength="4"
835
1010
  name="name:YYYY"
836
- placeholder="YYYY"
837
1011
  type="text"
838
1012
  value=""
839
1013
  />
@@ -850,9 +1024,6 @@ exports[`component:<InputDate> testID 1`] = `
850
1024
  class="view inputContainer"
851
1025
  data-testid="mirai"
852
1026
  >
853
- <span
854
- class="text small label text hint"
855
- />
856
1027
  <div
857
1028
  class="view row"
858
1029
  >
@@ -862,12 +1033,16 @@ exports[`component:<InputDate> testID 1`] = `
862
1033
  <div
863
1034
  class="view row inputBorder"
864
1035
  >
1036
+ <span
1037
+ class="text paragraph text label"
1038
+ >
1039
+ DD
1040
+ </span>
865
1041
  <input
866
- class="input input"
1042
+ class="input input withLabel"
867
1043
  data-testid="mirai-DD"
868
1044
  maxlength="2"
869
1045
  name="name:DD"
870
- placeholder="DD"
871
1046
  type="text"
872
1047
  value=""
873
1048
  />
@@ -879,29 +1054,37 @@ exports[`component:<InputDate> testID 1`] = `
879
1054
  <div
880
1055
  class="view row inputBorder"
881
1056
  >
1057
+ <span
1058
+ class="text paragraph text label"
1059
+ >
1060
+ MM
1061
+ </span>
882
1062
  <input
883
- class="input input"
1063
+ class="input input withLabel"
884
1064
  data-testid="mirai-MM"
885
1065
  maxlength="2"
886
1066
  name="name:MM"
887
- placeholder="MM"
888
1067
  type="text"
889
1068
  value=""
890
1069
  />
891
1070
  </div>
892
1071
  </div>
893
1072
  <div
894
- class="view inputContainer input Y state"
1073
+ class="view inputContainer input Y"
895
1074
  >
896
1075
  <div
897
1076
  class="view row inputBorder"
898
1077
  >
1078
+ <span
1079
+ class="text paragraph text label"
1080
+ >
1081
+ YYYY
1082
+ </span>
899
1083
  <input
900
- class="input input"
1084
+ class="input input withLabel"
901
1085
  data-testid="mirai-YYYY"
902
1086
  maxlength="4"
903
1087
  name="name:YYYY"
904
- placeholder="YYYY"
905
1088
  type="text"
906
1089
  value=""
907
1090
  />