@mirai/ui 1.0.118 → 1.0.120

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 (61) hide show
  1. package/README.md +23 -2
  2. package/build/components/Calendar/Calendar.Month.js +6 -3
  3. package/build/components/Calendar/Calendar.Month.js.map +1 -1
  4. package/build/components/Calendar/Calendar.Week.js +1 -1
  5. package/build/components/Calendar/Calendar.Week.js.map +1 -1
  6. package/build/components/Calendar/Calendar.Weekdays.js +5 -1
  7. package/build/components/Calendar/Calendar.Weekdays.js.map +1 -1
  8. package/build/components/Calendar/Calendar.module.css +1 -0
  9. package/build/components/Calendar/__tests__/__snapshots__/Calendar.test.jsx.snap +528 -528
  10. package/build/components/Form/Form.stories.js +11 -2
  11. package/build/components/Form/Form.stories.js.map +1 -1
  12. package/build/components/Form/__tests__/__snapshots__/Form.test.jsx.snap +14 -10
  13. package/build/components/InputDate/InputDate.js +21 -16
  14. package/build/components/InputDate/InputDate.js.map +1 -1
  15. package/build/components/InputDate/InputDate.module.css +8 -6
  16. package/build/components/InputDate/__tests__/__snapshots__/InputDate.test.js.snap +597 -512
  17. package/build/components/InputOption/InputOption.js +2 -4
  18. package/build/components/InputOption/InputOption.js.map +1 -1
  19. package/build/components/InputOption/InputOption.module.css +2 -16
  20. package/build/components/InputOption/__tests__/__snapshots__/InputOption.test.js.snap +1 -1
  21. package/build/components/InputSelect/InputSelect.js +23 -22
  22. package/build/components/InputSelect/InputSelect.js.map +1 -1
  23. package/build/components/InputSelect/__tests__/__snapshots__/InputSelect.test.js.snap +503 -495
  24. package/build/components/InputText/InputText.js +24 -21
  25. package/build/components/InputText/InputText.js.map +1 -1
  26. package/build/components/InputText/InputText.module.css +14 -35
  27. package/build/components/InputText/__tests__/__snapshots__/InputText.test.js.snap +223 -191
  28. package/build/components/InputText/partials/InputText.Hint.js +33 -0
  29. package/build/components/InputText/partials/InputText.Hint.js.map +1 -0
  30. package/build/components/InputText/partials/InputText.IconState.js +33 -0
  31. package/build/components/InputText/partials/InputText.IconState.js.map +1 -0
  32. package/build/components/InputText/partials/InputText.Label.js +39 -0
  33. package/build/components/InputText/partials/InputText.Label.js.map +1 -0
  34. package/build/components/InputText/partials/index.js +39 -0
  35. package/build/components/InputText/partials/index.js.map +1 -0
  36. package/build/components/Menu/Menu.Option.js +6 -2
  37. package/build/components/Menu/Menu.Option.js.map +1 -1
  38. package/build/components/Menu/Menu.module.css +6 -3
  39. package/build/components/Menu/__tests__/__snapshots__/Menu.test.jsx.snap +93 -69
  40. package/build/components/Modal/Modal.js +1 -1
  41. package/build/components/Modal/Modal.js.map +1 -1
  42. package/build/components/Modal/__tests__/__snapshots__/Modal.test.js.snap +4 -4
  43. package/build/components/Table/Table.Row.js +5 -2
  44. package/build/components/Table/Table.Row.js.map +1 -1
  45. package/build/components/Table/Table.module.css +7 -2
  46. package/build/components/Table/__tests__/__snapshots__/Table.test.js.snap +1829 -669
  47. package/build/primitives/Text/Text.module.css +4 -4
  48. package/build/primitives/View/View.js +5 -2
  49. package/build/primitives/View/View.js.map +1 -1
  50. package/build/primitives/View/View.module.css +11 -3
  51. package/build/primitives/View/View.stories.js +1 -0
  52. package/build/primitives/View/View.stories.js.map +1 -1
  53. package/build/primitives/View/__tests__/__snapshots__/View.test.js.snap +8 -0
  54. package/build/theme/default.theme.css +1 -1
  55. package/build/theme/index.js +11 -0
  56. package/build/theme/index.js.map +1 -1
  57. package/build/theme/theme.constants.js +21 -1
  58. package/build/theme/theme.constants.js.map +1 -1
  59. package/build/theme/theme.js +23 -1
  60. package/build/theme/theme.js.map +1 -1
  61. package/package.json +1 -1
@@ -8,62 +8,62 @@ exports[`component:<InputSelect> inherit:className 1`] = `
8
8
  <div
9
9
  class="view row inputBorder"
10
10
  >
11
- <select
12
- class="select empty input iconRight"
13
- name="name"
14
- >
15
- <option
16
- value="one"
17
- >
18
- one
19
- </option>
20
- <option
21
- value="two"
22
- >
23
- two
24
- </option>
25
- <option
26
- value="three"
27
- >
28
- three
29
- </option>
30
- <option
31
- value="four"
32
- >
33
- four
34
- </option>
35
- <option
36
- value="five"
37
- >
38
- five
39
- </option>
40
- </select>
41
11
  <div
42
- class="view row icons select"
12
+ class="view wide content"
43
13
  >
44
- <span
45
- class="icon headline-3 icon"
14
+ <select
15
+ class="select empty input"
16
+ name="name"
46
17
  >
47
- <svg
48
- fill="currentColor"
49
- height="1em"
50
- stroke="currentColor"
51
- stroke-width="0"
52
- viewBox="0 0 24 24"
53
- width="1em"
54
- xmlns="http://www.w3.org/2000/svg"
55
- >
56
- <path
57
- d="M24 24H0V0h24v24z"
58
- fill="none"
59
- opacity=".87"
60
- />
61
- <path
62
- d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
63
- />
64
- </svg>
65
- </span>
18
+ <option
19
+ value="one"
20
+ >
21
+ one
22
+ </option>
23
+ <option
24
+ value="two"
25
+ >
26
+ two
27
+ </option>
28
+ <option
29
+ value="three"
30
+ >
31
+ three
32
+ </option>
33
+ <option
34
+ value="four"
35
+ >
36
+ four
37
+ </option>
38
+ <option
39
+ value="five"
40
+ >
41
+ five
42
+ </option>
43
+ </select>
66
44
  </div>
45
+ <span
46
+ class="icon headline-3 icon select"
47
+ >
48
+ <svg
49
+ fill="currentColor"
50
+ height="1em"
51
+ stroke="currentColor"
52
+ stroke-width="0"
53
+ viewBox="0 0 24 24"
54
+ width="1em"
55
+ xmlns="http://www.w3.org/2000/svg"
56
+ >
57
+ <path
58
+ d="M24 24H0V0h24v24z"
59
+ fill="none"
60
+ opacity=".87"
61
+ />
62
+ <path
63
+ d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
64
+ />
65
+ </svg>
66
+ </span>
67
67
  </div>
68
68
  </div>
69
69
  </DocumentFragment>
@@ -77,37 +77,41 @@ exports[`component:<InputSelect> prop:disabled 1`] = `
77
77
  <div
78
78
  class="view row inputBorder disabled"
79
79
  >
80
- <select
81
- class="select empty input iconRight"
82
- disabled=""
83
- name="name"
80
+ <div
81
+ class="view wide content"
84
82
  >
85
- <option
86
- value="one"
87
- >
88
- one
89
- </option>
90
- <option
91
- value="two"
92
- >
93
- two
94
- </option>
95
- <option
96
- value="three"
97
- >
98
- three
99
- </option>
100
- <option
101
- value="four"
83
+ <select
84
+ class="select empty input"
85
+ disabled=""
86
+ name="name"
102
87
  >
103
- four
104
- </option>
105
- <option
106
- value="five"
107
- >
108
- five
109
- </option>
110
- </select>
88
+ <option
89
+ value="one"
90
+ >
91
+ one
92
+ </option>
93
+ <option
94
+ value="two"
95
+ >
96
+ two
97
+ </option>
98
+ <option
99
+ value="three"
100
+ >
101
+ three
102
+ </option>
103
+ <option
104
+ value="four"
105
+ >
106
+ four
107
+ </option>
108
+ <option
109
+ value="five"
110
+ >
111
+ five
112
+ </option>
113
+ </select>
114
+ </div>
111
115
  </div>
112
116
  </div>
113
117
  </DocumentFragment>
@@ -121,62 +125,62 @@ exports[`component:<InputSelect> prop:error 1`] = `
121
125
  <div
122
126
  class="view row inputBorder"
123
127
  >
124
- <select
125
- class="select empty input iconRight"
126
- name="name"
127
- >
128
- <option
129
- value="one"
130
- >
131
- one
132
- </option>
133
- <option
134
- value="two"
135
- >
136
- two
137
- </option>
138
- <option
139
- value="three"
140
- >
141
- three
142
- </option>
143
- <option
144
- value="four"
145
- >
146
- four
147
- </option>
148
- <option
149
- value="five"
150
- >
151
- five
152
- </option>
153
- </select>
154
128
  <div
155
- class="view row icons select"
129
+ class="view wide content"
156
130
  >
157
- <span
158
- class="icon headline-3 icon"
131
+ <select
132
+ class="select empty input"
133
+ name="name"
159
134
  >
160
- <svg
161
- fill="currentColor"
162
- height="1em"
163
- stroke="currentColor"
164
- stroke-width="0"
165
- viewBox="0 0 24 24"
166
- width="1em"
167
- xmlns="http://www.w3.org/2000/svg"
168
- >
169
- <path
170
- d="M24 24H0V0h24v24z"
171
- fill="none"
172
- opacity=".87"
173
- />
174
- <path
175
- d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
176
- />
177
- </svg>
178
- </span>
135
+ <option
136
+ value="one"
137
+ >
138
+ one
139
+ </option>
140
+ <option
141
+ value="two"
142
+ >
143
+ two
144
+ </option>
145
+ <option
146
+ value="three"
147
+ >
148
+ three
149
+ </option>
150
+ <option
151
+ value="four"
152
+ >
153
+ four
154
+ </option>
155
+ <option
156
+ value="five"
157
+ >
158
+ five
159
+ </option>
160
+ </select>
179
161
  </div>
162
+ <span
163
+ class="icon headline-3 icon select"
164
+ >
165
+ <svg
166
+ fill="currentColor"
167
+ height="1em"
168
+ stroke="currentColor"
169
+ stroke-width="0"
170
+ viewBox="0 0 24 24"
171
+ width="1em"
172
+ xmlns="http://www.w3.org/2000/svg"
173
+ >
174
+ <path
175
+ d="M24 24H0V0h24v24z"
176
+ fill="none"
177
+ opacity=".87"
178
+ />
179
+ <path
180
+ d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
181
+ />
182
+ </svg>
183
+ </span>
180
184
  </div>
181
185
  </div>
182
186
  </DocumentFragment>
@@ -190,62 +194,62 @@ exports[`component:<InputSelect> prop:hint 1`] = `
190
194
  <div
191
195
  class="view row inputBorder"
192
196
  >
193
- <select
194
- class="select empty input iconRight"
195
- name="name"
196
- >
197
- <option
198
- value="one"
199
- >
200
- one
201
- </option>
202
- <option
203
- value="two"
204
- >
205
- two
206
- </option>
207
- <option
208
- value="three"
209
- >
210
- three
211
- </option>
212
- <option
213
- value="four"
214
- >
215
- four
216
- </option>
217
- <option
218
- value="five"
219
- >
220
- five
221
- </option>
222
- </select>
223
197
  <div
224
- class="view row icons select"
198
+ class="view wide content"
225
199
  >
226
- <span
227
- class="icon headline-3 icon"
200
+ <select
201
+ class="select empty input"
202
+ name="name"
228
203
  >
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="M24 24H0V0h24v24z"
240
- fill="none"
241
- opacity=".87"
242
- />
243
- <path
244
- d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
245
- />
246
- </svg>
247
- </span>
204
+ <option
205
+ value="one"
206
+ >
207
+ one
208
+ </option>
209
+ <option
210
+ value="two"
211
+ >
212
+ two
213
+ </option>
214
+ <option
215
+ value="three"
216
+ >
217
+ three
218
+ </option>
219
+ <option
220
+ value="four"
221
+ >
222
+ four
223
+ </option>
224
+ <option
225
+ value="five"
226
+ >
227
+ five
228
+ </option>
229
+ </select>
248
230
  </div>
231
+ <span
232
+ class="icon headline-3 icon select"
233
+ >
234
+ <svg
235
+ fill="currentColor"
236
+ height="1em"
237
+ stroke="currentColor"
238
+ stroke-width="0"
239
+ viewBox="0 0 24 24"
240
+ width="1em"
241
+ xmlns="http://www.w3.org/2000/svg"
242
+ >
243
+ <path
244
+ d="M24 24H0V0h24v24z"
245
+ fill="none"
246
+ opacity=".87"
247
+ />
248
+ <path
249
+ d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
250
+ />
251
+ </svg>
252
+ </span>
249
253
  </div>
250
254
  <span
251
255
  class="text small text hint"
@@ -264,67 +268,67 @@ exports[`component:<InputSelect> prop:label 1`] = `
264
268
  <div
265
269
  class="view row inputBorder"
266
270
  >
267
- <span
268
- class="text paragraph text label"
269
- >
270
- label
271
- </span>
272
- <select
273
- class="select empty input iconRight withLabel empty"
274
- name="name"
275
- >
276
- <option
277
- value="one"
278
- >
279
- one
280
- </option>
281
- <option
282
- value="two"
283
- >
284
- two
285
- </option>
286
- <option
287
- value="three"
288
- >
289
- three
290
- </option>
291
- <option
292
- value="four"
293
- >
294
- four
295
- </option>
296
- <option
297
- value="five"
298
- >
299
- five
300
- </option>
301
- </select>
302
271
  <div
303
- class="view row icons select"
272
+ class="view wide content"
304
273
  >
305
274
  <span
306
- class="icon headline-3 icon"
275
+ class="text paragraph text label"
307
276
  >
308
- <svg
309
- fill="currentColor"
310
- height="1em"
311
- stroke="currentColor"
312
- stroke-width="0"
313
- viewBox="0 0 24 24"
314
- width="1em"
315
- xmlns="http://www.w3.org/2000/svg"
316
- >
317
- <path
318
- d="M24 24H0V0h24v24z"
319
- fill="none"
320
- opacity=".87"
321
- />
322
- <path
323
- d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
324
- />
325
- </svg>
277
+ label
326
278
  </span>
279
+ <select
280
+ class="select empty input withLabel empty"
281
+ name="name"
282
+ >
283
+ <option
284
+ value="one"
285
+ >
286
+ one
287
+ </option>
288
+ <option
289
+ value="two"
290
+ >
291
+ two
292
+ </option>
293
+ <option
294
+ value="three"
295
+ >
296
+ three
297
+ </option>
298
+ <option
299
+ value="four"
300
+ >
301
+ four
302
+ </option>
303
+ <option
304
+ value="five"
305
+ >
306
+ five
307
+ </option>
308
+ </select>
327
309
  </div>
310
+ <span
311
+ class="icon headline-3 icon select"
312
+ >
313
+ <svg
314
+ fill="currentColor"
315
+ height="1em"
316
+ stroke="currentColor"
317
+ stroke-width="0"
318
+ viewBox="0 0 24 24"
319
+ width="1em"
320
+ xmlns="http://www.w3.org/2000/svg"
321
+ >
322
+ <path
323
+ d="M24 24H0V0h24v24z"
324
+ fill="none"
325
+ opacity=".87"
326
+ />
327
+ <path
328
+ d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
329
+ />
330
+ </svg>
331
+ </span>
328
332
  </div>
329
333
  </div>
330
334
  </DocumentFragment>
@@ -338,62 +342,62 @@ exports[`component:<InputSelect> prop:label 2`] = `
338
342
  <div
339
343
  class="view row inputBorder"
340
344
  >
341
- <select
342
- class="select input iconRight"
343
- name="name"
344
- >
345
- <option
346
- value="one"
347
- >
348
- one
349
- </option>
350
- <option
351
- value="two"
352
- >
353
- two
354
- </option>
355
- <option
356
- value="three"
357
- >
358
- three
359
- </option>
360
- <option
361
- value="four"
362
- >
363
- four
364
- </option>
365
- <option
366
- value="five"
367
- >
368
- five
369
- </option>
370
- </select>
371
345
  <div
372
- class="view row icons select"
346
+ class="view wide content"
373
347
  >
374
- <span
375
- class="icon headline-3 icon"
348
+ <select
349
+ class="select input"
350
+ name="name"
376
351
  >
377
- <svg
378
- fill="currentColor"
379
- height="1em"
380
- stroke="currentColor"
381
- stroke-width="0"
382
- viewBox="0 0 24 24"
383
- width="1em"
384
- xmlns="http://www.w3.org/2000/svg"
385
- >
386
- <path
387
- d="M24 24H0V0h24v24z"
388
- fill="none"
389
- opacity=".87"
390
- />
391
- <path
392
- d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
393
- />
394
- </svg>
395
- </span>
352
+ <option
353
+ value="one"
354
+ >
355
+ one
356
+ </option>
357
+ <option
358
+ value="two"
359
+ >
360
+ two
361
+ </option>
362
+ <option
363
+ value="three"
364
+ >
365
+ three
366
+ </option>
367
+ <option
368
+ value="four"
369
+ >
370
+ four
371
+ </option>
372
+ <option
373
+ value="five"
374
+ >
375
+ five
376
+ </option>
377
+ </select>
396
378
  </div>
379
+ <span
380
+ class="icon headline-3 icon select"
381
+ >
382
+ <svg
383
+ fill="currentColor"
384
+ height="1em"
385
+ stroke="currentColor"
386
+ stroke-width="0"
387
+ viewBox="0 0 24 24"
388
+ width="1em"
389
+ xmlns="http://www.w3.org/2000/svg"
390
+ >
391
+ <path
392
+ d="M24 24H0V0h24v24z"
393
+ fill="none"
394
+ opacity=".87"
395
+ />
396
+ <path
397
+ d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
398
+ />
399
+ </svg>
400
+ </span>
397
401
  </div>
398
402
  </div>
399
403
  </DocumentFragment>
@@ -407,37 +411,41 @@ exports[`component:<InputSelect> prop:success 1`] = `
407
411
  <div
408
412
  class="view row inputBorder disabled"
409
413
  >
410
- <select
411
- class="select empty input iconRight"
412
- disabled=""
413
- name="name"
414
+ <div
415
+ class="view wide content"
414
416
  >
415
- <option
416
- value="one"
417
+ <select
418
+ class="select empty input"
419
+ disabled=""
420
+ name="name"
417
421
  >
418
- one
419
- </option>
420
- <option
421
- value="two"
422
- >
423
- two
424
- </option>
425
- <option
426
- value="three"
427
- >
428
- three
429
- </option>
430
- <option
431
- value="four"
432
- >
433
- four
434
- </option>
435
- <option
436
- value="five"
437
- >
438
- five
439
- </option>
440
- </select>
422
+ <option
423
+ value="one"
424
+ >
425
+ one
426
+ </option>
427
+ <option
428
+ value="two"
429
+ >
430
+ two
431
+ </option>
432
+ <option
433
+ value="three"
434
+ >
435
+ three
436
+ </option>
437
+ <option
438
+ value="four"
439
+ >
440
+ four
441
+ </option>
442
+ <option
443
+ value="five"
444
+ >
445
+ five
446
+ </option>
447
+ </select>
448
+ </div>
441
449
  </div>
442
450
  </div>
443
451
  </DocumentFragment>
@@ -451,79 +459,79 @@ exports[`component:<InputSelect> prop:warning 1`] = `
451
459
  <div
452
460
  class="view row inputBorder"
453
461
  >
454
- <select
455
- class="select empty input iconRight"
456
- name="name"
457
- >
458
- <option
459
- value="one"
460
- >
461
- one
462
- </option>
463
- <option
464
- value="two"
465
- >
466
- two
467
- </option>
468
- <option
469
- value="three"
470
- >
471
- three
472
- </option>
473
- <option
474
- value="four"
475
- >
476
- four
477
- </option>
478
- <option
479
- value="five"
480
- >
481
- five
482
- </option>
483
- </select>
484
462
  <div
485
- class="view row icons select"
463
+ class="view wide content"
486
464
  >
487
- <span
488
- class="icon headline-3 icon"
489
- >
490
- <svg
491
- fill="currentColor"
492
- height="1em"
493
- stroke="currentColor"
494
- stroke-width="0"
495
- viewBox="0 0 24 24"
496
- width="1em"
497
- xmlns="http://www.w3.org/2000/svg"
498
- >
499
- <path
500
- d="M24 24H0V0h24v24z"
501
- fill="none"
502
- opacity=".87"
503
- />
504
- <path
505
- d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
506
- />
507
- </svg>
508
- </span>
509
- <span
510
- class="icon headline-3 icon warning"
465
+ <select
466
+ class="select empty input"
467
+ name="name"
511
468
  >
512
- <svg
513
- fill="currentColor"
514
- height="1em"
515
- stroke="currentColor"
516
- stroke-width="0"
517
- viewBox="0 0 24 24"
518
- width="1em"
519
- xmlns="http://www.w3.org/2000/svg"
520
- >
521
- <path
522
- d="M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z"
523
- />
524
- </svg>
525
- </span>
469
+ <option
470
+ value="one"
471
+ >
472
+ one
473
+ </option>
474
+ <option
475
+ value="two"
476
+ >
477
+ two
478
+ </option>
479
+ <option
480
+ value="three"
481
+ >
482
+ three
483
+ </option>
484
+ <option
485
+ value="four"
486
+ >
487
+ four
488
+ </option>
489
+ <option
490
+ value="five"
491
+ >
492
+ five
493
+ </option>
494
+ </select>
526
495
  </div>
496
+ <span
497
+ class="icon headline-3 icon select"
498
+ >
499
+ <svg
500
+ fill="currentColor"
501
+ height="1em"
502
+ stroke="currentColor"
503
+ stroke-width="0"
504
+ viewBox="0 0 24 24"
505
+ width="1em"
506
+ xmlns="http://www.w3.org/2000/svg"
507
+ >
508
+ <path
509
+ d="M24 24H0V0h24v24z"
510
+ fill="none"
511
+ opacity=".87"
512
+ />
513
+ <path
514
+ d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
515
+ />
516
+ </svg>
517
+ </span>
518
+ <span
519
+ class="icon headline-3 icon warning"
520
+ >
521
+ <svg
522
+ fill="currentColor"
523
+ height="1em"
524
+ stroke="currentColor"
525
+ stroke-width="0"
526
+ viewBox="0 0 24 24"
527
+ width="1em"
528
+ xmlns="http://www.w3.org/2000/svg"
529
+ >
530
+ <path
531
+ d="M12 5.99L19.53 19H4.47L12 5.99M12 2L1 21h22L12 2zm1 14h-2v2h2v-2zm0-6h-2v4h2v-4z"
532
+ />
533
+ </svg>
534
+ </span>
527
535
  </div>
528
536
  </div>
529
537
  </DocumentFragment>
@@ -537,62 +545,62 @@ exports[`component:<InputSelect> renders 1`] = `
537
545
  <div
538
546
  class="view row inputBorder"
539
547
  >
540
- <select
541
- class="select empty input iconRight"
542
- name="name"
543
- >
544
- <option
545
- value="one"
546
- >
547
- one
548
- </option>
549
- <option
550
- value="two"
551
- >
552
- two
553
- </option>
554
- <option
555
- value="three"
556
- >
557
- three
558
- </option>
559
- <option
560
- value="four"
561
- >
562
- four
563
- </option>
564
- <option
565
- value="five"
566
- >
567
- five
568
- </option>
569
- </select>
570
548
  <div
571
- class="view row icons select"
549
+ class="view wide content"
572
550
  >
573
- <span
574
- class="icon headline-3 icon"
551
+ <select
552
+ class="select empty input"
553
+ name="name"
575
554
  >
576
- <svg
577
- fill="currentColor"
578
- height="1em"
579
- stroke="currentColor"
580
- stroke-width="0"
581
- viewBox="0 0 24 24"
582
- width="1em"
583
- xmlns="http://www.w3.org/2000/svg"
584
- >
585
- <path
586
- d="M24 24H0V0h24v24z"
587
- fill="none"
588
- opacity=".87"
589
- />
590
- <path
591
- d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
592
- />
593
- </svg>
594
- </span>
555
+ <option
556
+ value="one"
557
+ >
558
+ one
559
+ </option>
560
+ <option
561
+ value="two"
562
+ >
563
+ two
564
+ </option>
565
+ <option
566
+ value="three"
567
+ >
568
+ three
569
+ </option>
570
+ <option
571
+ value="four"
572
+ >
573
+ four
574
+ </option>
575
+ <option
576
+ value="five"
577
+ >
578
+ five
579
+ </option>
580
+ </select>
595
581
  </div>
582
+ <span
583
+ class="icon headline-3 icon select"
584
+ >
585
+ <svg
586
+ fill="currentColor"
587
+ height="1em"
588
+ stroke="currentColor"
589
+ stroke-width="0"
590
+ viewBox="0 0 24 24"
591
+ width="1em"
592
+ xmlns="http://www.w3.org/2000/svg"
593
+ >
594
+ <path
595
+ d="M24 24H0V0h24v24z"
596
+ fill="none"
597
+ opacity=".87"
598
+ />
599
+ <path
600
+ d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
601
+ />
602
+ </svg>
603
+ </span>
596
604
  </div>
597
605
  </div>
598
606
  </DocumentFragment>
@@ -606,63 +614,63 @@ exports[`component:<InputSelect> testID 1`] = `
606
614
  <div
607
615
  class="view row inputBorder"
608
616
  >
609
- <select
610
- class="select empty input iconRight"
611
- data-testid="mirai"
612
- name="name"
613
- >
614
- <option
615
- value="one"
616
- >
617
- one
618
- </option>
619
- <option
620
- value="two"
621
- >
622
- two
623
- </option>
624
- <option
625
- value="three"
626
- >
627
- three
628
- </option>
629
- <option
630
- value="four"
631
- >
632
- four
633
- </option>
634
- <option
635
- value="five"
636
- >
637
- five
638
- </option>
639
- </select>
640
617
  <div
641
- class="view row icons select"
618
+ class="view wide content"
642
619
  >
643
- <span
644
- class="icon headline-3 icon"
620
+ <select
621
+ class="select empty input"
622
+ data-testid="mirai"
623
+ name="name"
645
624
  >
646
- <svg
647
- fill="currentColor"
648
- height="1em"
649
- stroke="currentColor"
650
- stroke-width="0"
651
- viewBox="0 0 24 24"
652
- width="1em"
653
- xmlns="http://www.w3.org/2000/svg"
654
- >
655
- <path
656
- d="M24 24H0V0h24v24z"
657
- fill="none"
658
- opacity=".87"
659
- />
660
- <path
661
- d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
662
- />
663
- </svg>
664
- </span>
625
+ <option
626
+ value="one"
627
+ >
628
+ one
629
+ </option>
630
+ <option
631
+ value="two"
632
+ >
633
+ two
634
+ </option>
635
+ <option
636
+ value="three"
637
+ >
638
+ three
639
+ </option>
640
+ <option
641
+ value="four"
642
+ >
643
+ four
644
+ </option>
645
+ <option
646
+ value="five"
647
+ >
648
+ five
649
+ </option>
650
+ </select>
665
651
  </div>
652
+ <span
653
+ class="icon headline-3 icon select"
654
+ >
655
+ <svg
656
+ fill="currentColor"
657
+ height="1em"
658
+ stroke="currentColor"
659
+ stroke-width="0"
660
+ viewBox="0 0 24 24"
661
+ width="1em"
662
+ xmlns="http://www.w3.org/2000/svg"
663
+ >
664
+ <path
665
+ d="M24 24H0V0h24v24z"
666
+ fill="none"
667
+ opacity=".87"
668
+ />
669
+ <path
670
+ d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6-1.41-1.41z"
671
+ />
672
+ </svg>
673
+ </span>
666
674
  </div>
667
675
  </div>
668
676
  </DocumentFragment>