@nypl/design-system-react-components 0.28.0 → 1.0.2

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 (99) hide show
  1. package/CHANGELOG.md +39 -0
  2. package/README.md +10 -10
  3. package/dist/components/Checkbox/Checkbox.d.ts +0 -1
  4. package/dist/components/ComponentWrapper/ComponentWrapper.d.ts +8 -0
  5. package/dist/components/Heading/Heading.d.ts +2 -0
  6. package/dist/components/Logo/Logo.d.ts +1 -1
  7. package/dist/components/Logo/LogoSvgs.d.ts +4 -0
  8. package/dist/design-system-react-components.cjs.development.js +1021 -683
  9. package/dist/design-system-react-components.cjs.development.js.map +1 -1
  10. package/dist/design-system-react-components.cjs.production.min.js +1 -1
  11. package/dist/design-system-react-components.cjs.production.min.js.map +1 -1
  12. package/dist/design-system-react-components.esm.js +1022 -684
  13. package/dist/design-system-react-components.esm.js.map +1 -1
  14. package/dist/theme/components/button.d.ts +1 -0
  15. package/dist/theme/components/card.d.ts +98 -13
  16. package/dist/theme/components/checkboxGroup.d.ts +1 -1
  17. package/dist/theme/components/global.d.ts +1 -1
  18. package/dist/theme/components/heading.d.ts +4 -16
  19. package/dist/theme/components/image.d.ts +6 -0
  20. package/dist/theme/components/radioGroup.d.ts +1 -1
  21. package/dist/theme/components/skipNavigation.d.ts +3 -0
  22. package/dist/theme/components/structuredContent.d.ts +0 -5
  23. package/dist/utils/utils.d.ts +15 -0
  24. package/package.json +6 -6
  25. package/src/components/Accordion/Accordion.stories.mdx +18 -46
  26. package/src/components/Accordion/Accordion.tsx +3 -2
  27. package/src/components/Accordion/__snapshots__/Accordion.test.tsx.snap +12 -12
  28. package/src/components/Button/Button.stories.mdx +1 -1
  29. package/src/components/ButtonGroup/ButtonGroup.stories.mdx +33 -2
  30. package/src/components/ButtonGroup/ButtonGroup.tsx +2 -1
  31. package/src/components/Card/Card.stories.mdx +2 -4
  32. package/src/components/Card/Card.tsx +2 -1
  33. package/src/components/Chakra/Box.stories.mdx +1 -1
  34. package/src/components/Chakra/Center.stories.mdx +1 -1
  35. package/src/components/Chakra/Flex.stories.mdx +1 -1
  36. package/src/components/Chakra/Grid.stories.mdx +1 -1
  37. package/src/components/Chakra/Stack.stories.mdx +1 -1
  38. package/src/components/Checkbox/Checkbox.stories.mdx +1 -1
  39. package/src/components/Checkbox/Checkbox.test.tsx +42 -11
  40. package/src/components/Checkbox/Checkbox.tsx +25 -39
  41. package/src/components/Checkbox/__snapshots__/Checkbox.test.tsx.snap +589 -544
  42. package/src/components/CheckboxGroup/CheckboxGroup.stories.mdx +1 -1
  43. package/src/components/CheckboxGroup/CheckboxGroup.tsx +1 -1
  44. package/src/components/CheckboxGroup/__snapshots__/CheckboxGroup.test.tsx.snap +1540 -1420
  45. package/src/components/ComponentWrapper/ComponentWrapper.tsx +12 -3
  46. package/src/components/ComponentWrapper/__snapshots__/ComponentWrapper.test.tsx.snap +5 -0
  47. package/src/components/DatePicker/__snapshots__/DatePicker.test.tsx.snap +36 -17
  48. package/src/components/Grid/SimpleGrid.stories.mdx +1 -3
  49. package/src/components/Heading/Heading.stories.mdx +4 -1
  50. package/src/components/Heading/Heading.tsx +4 -1
  51. package/src/components/Image/Image.stories.mdx +1 -1
  52. package/src/components/Logo/Logo.stories.mdx +10 -5
  53. package/src/components/Logo/Logo.tsx +4 -0
  54. package/src/components/Logo/LogoSvgs.tsx +8 -0
  55. package/src/components/Modal/Modal.stories.mdx +83 -90
  56. package/src/components/Pagination/Pagination.stories.mdx +1 -1
  57. package/src/components/Radio/Radio.stories.mdx +1 -1
  58. package/src/components/Radio/Radio.tsx +22 -31
  59. package/src/components/Radio/__snapshots__/Radio.test.tsx.snap +405 -365
  60. package/src/components/RadioGroup/RadioGroup.stories.mdx +2 -1
  61. package/src/components/RadioGroup/RadioGroup.tsx +2 -1
  62. package/src/components/RadioGroup/__snapshots__/RadioGroup.test.tsx.snap +1236 -1116
  63. package/src/components/SearchBar/SearchBar.stories.mdx +3 -3
  64. package/src/components/SearchBar/__snapshots__/SearchBar.test.tsx.snap +32 -10
  65. package/src/components/Select/Select.stories.mdx +1 -1
  66. package/src/components/Select/Select.tsx +24 -22
  67. package/src/components/Select/__snapshots__/Select.test.tsx.snap +21 -11
  68. package/src/components/SkipNavigation/SkipNavigation.stories.mdx +2 -2
  69. package/src/components/Slider/Slider.stories.mdx +1 -1
  70. package/src/components/Slider/Slider.tsx +14 -14
  71. package/src/components/Slider/__snapshots__/Slider.test.tsx.snap +66 -33
  72. package/src/components/StyleGuide/Buttons.stories.mdx +1 -1
  73. package/src/components/StyleGuide/Colors.stories.mdx +2 -2
  74. package/src/components/StyleGuide/Forms.stories.mdx +2 -1
  75. package/src/components/StyleGuide/Iconography.stories.mdx +2 -2
  76. package/src/components/StyleGuide/Spacing.stories.mdx +1 -1
  77. package/src/components/StyleGuide/Typography.stories.mdx +1 -1
  78. package/src/components/Table/Table.stories.mdx +1 -5
  79. package/src/components/Table/Table.test.tsx +33 -0
  80. package/src/components/Table/Table.tsx +21 -0
  81. package/src/components/Template/Template.stories.mdx +9 -5
  82. package/src/components/TextInput/TextInput.stories.mdx +1 -1
  83. package/src/components/TextInput/TextInput.tsx +21 -21
  84. package/src/components/TextInput/__snapshots__/TextInput.test.tsx.snap +19 -9
  85. package/src/components/Toggle/Toggle.stories.mdx +1 -1
  86. package/src/components/Toggle/Toggle.tsx +22 -20
  87. package/src/components/Toggle/__snapshots__/Toggle.test.tsx.snap +400 -372
  88. package/src/components/VideoPlayer/VideoPlayer.stories.mdx +1 -0
  89. package/src/components/VideoPlayer/__snapshots__/VideoPlayer.test.tsx.snap +5 -0
  90. package/src/docs/Chakra.stories.mdx +2 -2
  91. package/src/theme/components/button.ts +1 -0
  92. package/src/theme/components/card.ts +9 -3
  93. package/src/theme/components/componentWrapper.ts +1 -1
  94. package/src/theme/components/global.ts +1 -1
  95. package/src/theme/components/heading.ts +3 -3
  96. package/src/theme/components/image.ts +1 -0
  97. package/src/theme/components/skipNavigation.ts +3 -0
  98. package/src/theme/foundations/colors.ts +6 -9
  99. package/src/utils/utils.ts +40 -0
package/src/components/RadioGroup/__snapshots__/RadioGroup.test.tsx.snap CHANGED
@@ -15,100 +15,110 @@ exports[`Radio Button renders the UI snapshot correctly 1`] = `
15
15
  <div
16
16
  className="chakra-stack css-1wdv1uh"
17
17
  >
18
- <label
19
- className="chakra-radio css-13p0l12"
18
+ <div
19
+ className="css-1xdhyk6"
20
+ id="radio-2-wrapper"
20
21
  >
21
- <input
22
- checked={false}
23
- className="chakra-radio__input"
24
- disabled={false}
25
- id="radio-2"
26
- name="column"
27
- onBlur={[Function]}
28
- onChange={[Function]}
29
- onFocus={[Function]}
30
- onKeyDown={[Function]}
31
- onKeyUp={[Function]}
32
- required={false}
33
- style={
34
- Object {
35
- "border": "0px",
36
- "clip": "rect(0px, 0px, 0px, 0px)",
37
- "height": "1px",
38
- "margin": "-1px",
39
- "overflow": "hidden",
40
- "padding": "0px",
41
- "position": "absolute",
42
- "whiteSpace": "nowrap",
43
- "width": "1px",
44
- }
45
- }
46
- type="radio"
47
- value="2"
48
- />
49
- <span
50
- aria-hidden={true}
51
- className="css-14wybg9"
52
- onMouseDown={[Function]}
53
- onMouseEnter={[Function]}
54
- onMouseLeave={[Function]}
55
- onMouseUp={[Function]}
56
- />
57
- <span
58
- className="chakra-radio__label css-1y8kf23"
59
- onMouseDown={[Function]}
60
- onTouchStart={[Function]}
22
+ <label
23
+ className="chakra-radio css-13p0l12"
61
24
  >
62
- Radio 2
63
- </span>
64
- </label>
65
- <label
66
- className="chakra-radio css-13p0l12"
67
- >
68
- <input
69
- checked={false}
70
- className="chakra-radio__input"
71
- disabled={false}
72
- id="radio-3"
73
- name="column"
74
- onBlur={[Function]}
75
- onChange={[Function]}
76
- onFocus={[Function]}
77
- onKeyDown={[Function]}
78
- onKeyUp={[Function]}
79
- required={false}
80
- style={
81
- Object {
82
- "border": "0px",
83
- "clip": "rect(0px, 0px, 0px, 0px)",
84
- "height": "1px",
85
- "margin": "-1px",
86
- "overflow": "hidden",
87
- "padding": "0px",
88
- "position": "absolute",
89
- "whiteSpace": "nowrap",
90
- "width": "1px",
25
+ <input
26
+ checked={false}
27
+ className="chakra-radio__input"
28
+ disabled={false}
29
+ id="radio-2"
30
+ name="column"
31
+ onBlur={[Function]}
32
+ onChange={[Function]}
33
+ onFocus={[Function]}
34
+ onKeyDown={[Function]}
35
+ onKeyUp={[Function]}
36
+ required={false}
37
+ style={
38
+ Object {
39
+ "border": "0px",
40
+ "clip": "rect(0px, 0px, 0px, 0px)",
41
+ "height": "1px",
42
+ "margin": "-1px",
43
+ "overflow": "hidden",
44
+ "padding": "0px",
45
+ "position": "absolute",
46
+ "whiteSpace": "nowrap",
47
+ "width": "1px",
48
+ }
91
49
  }
92
- }
93
- type="radio"
94
- value="3"
95
- />
96
- <span
97
- aria-hidden={true}
98
- className="css-14wybg9"
99
- onMouseDown={[Function]}
100
- onMouseEnter={[Function]}
101
- onMouseLeave={[Function]}
102
- onMouseUp={[Function]}
103
- />
104
- <span
105
- className="chakra-radio__label css-1y8kf23"
106
- onMouseDown={[Function]}
107
- onTouchStart={[Function]}
50
+ type="radio"
51
+ value="2"
52
+ />
53
+ <span
54
+ aria-hidden={true}
55
+ className="css-14wybg9"
56
+ onMouseDown={[Function]}
57
+ onMouseEnter={[Function]}
58
+ onMouseLeave={[Function]}
59
+ onMouseUp={[Function]}
60
+ />
61
+ <span
62
+ className="chakra-radio__label css-1y8kf23"
63
+ onMouseDown={[Function]}
64
+ onTouchStart={[Function]}
65
+ >
66
+ Radio 2
67
+ </span>
68
+ </label>
69
+ </div>
70
+ <div
71
+ className="css-1xdhyk6"
72
+ id="radio-3-wrapper"
73
+ >
74
+ <label
75
+ className="chakra-radio css-13p0l12"
108
76
  >
109
- Radio 3
110
- </span>
111
- </label>
77
+ <input
78
+ checked={false}
79
+ className="chakra-radio__input"
80
+ disabled={false}
81
+ id="radio-3"
82
+ name="column"
83
+ onBlur={[Function]}
84
+ onChange={[Function]}
85
+ onFocus={[Function]}
86
+ onKeyDown={[Function]}
87
+ onKeyUp={[Function]}
88
+ required={false}
89
+ style={
90
+ Object {
91
+ "border": "0px",
92
+ "clip": "rect(0px, 0px, 0px, 0px)",
93
+ "height": "1px",
94
+ "margin": "-1px",
95
+ "overflow": "hidden",
96
+ "padding": "0px",
97
+ "position": "absolute",
98
+ "whiteSpace": "nowrap",
99
+ "width": "1px",
100
+ }
101
+ }
102
+ type="radio"
103
+ value="3"
104
+ />
105
+ <span
106
+ aria-hidden={true}
107
+ className="css-14wybg9"
108
+ onMouseDown={[Function]}
109
+ onMouseEnter={[Function]}
110
+ onMouseLeave={[Function]}
111
+ onMouseUp={[Function]}
112
+ />
113
+ <span
114
+ className="chakra-radio__label css-1y8kf23"
115
+ onMouseDown={[Function]}
116
+ onTouchStart={[Function]}
117
+ >
118
+ Radio 3
119
+ </span>
120
+ </label>
121
+ </div>
112
122
  </div>
113
123
  </div>
114
124
  </fieldset>
@@ -129,100 +139,110 @@ exports[`Radio Button renders the UI snapshot correctly 2`] = `
129
139
  <div
130
140
  className="chakra-stack css-1objuxj"
131
141
  >
132
- <label
133
- className="chakra-radio css-13p0l12"
142
+ <div
143
+ className="css-1xdhyk6"
144
+ id="radio-2-wrapper"
134
145
  >
135
- <input
136
- checked={false}
137
- className="chakra-radio__input"
138
- disabled={false}
139
- id="radio-2"
140
- name="row"
141
- onBlur={[Function]}
142
- onChange={[Function]}
143
- onFocus={[Function]}
144
- onKeyDown={[Function]}
145
- onKeyUp={[Function]}
146
- required={false}
147
- style={
148
- Object {
149
- "border": "0px",
150
- "clip": "rect(0px, 0px, 0px, 0px)",
151
- "height": "1px",
152
- "margin": "-1px",
153
- "overflow": "hidden",
154
- "padding": "0px",
155
- "position": "absolute",
156
- "whiteSpace": "nowrap",
157
- "width": "1px",
158
- }
159
- }
160
- type="radio"
161
- value="2"
162
- />
163
- <span
164
- aria-hidden={true}
165
- className="css-14wybg9"
166
- onMouseDown={[Function]}
167
- onMouseEnter={[Function]}
168
- onMouseLeave={[Function]}
169
- onMouseUp={[Function]}
170
- />
171
- <span
172
- className="chakra-radio__label css-1y8kf23"
173
- onMouseDown={[Function]}
174
- onTouchStart={[Function]}
146
+ <label
147
+ className="chakra-radio css-13p0l12"
175
148
  >
176
- Radio 2
177
- </span>
178
- </label>
179
- <label
180
- className="chakra-radio css-13p0l12"
181
- >
182
- <input
183
- checked={false}
184
- className="chakra-radio__input"
185
- disabled={false}
186
- id="radio-3"
187
- name="row"
188
- onBlur={[Function]}
189
- onChange={[Function]}
190
- onFocus={[Function]}
191
- onKeyDown={[Function]}
192
- onKeyUp={[Function]}
193
- required={false}
194
- style={
195
- Object {
196
- "border": "0px",
197
- "clip": "rect(0px, 0px, 0px, 0px)",
198
- "height": "1px",
199
- "margin": "-1px",
200
- "overflow": "hidden",
201
- "padding": "0px",
202
- "position": "absolute",
203
- "whiteSpace": "nowrap",
204
- "width": "1px",
149
+ <input
150
+ checked={false}
151
+ className="chakra-radio__input"
152
+ disabled={false}
153
+ id="radio-2"
154
+ name="row"
155
+ onBlur={[Function]}
156
+ onChange={[Function]}
157
+ onFocus={[Function]}
158
+ onKeyDown={[Function]}
159
+ onKeyUp={[Function]}
160
+ required={false}
161
+ style={
162
+ Object {
163
+ "border": "0px",
164
+ "clip": "rect(0px, 0px, 0px, 0px)",
165
+ "height": "1px",
166
+ "margin": "-1px",
167
+ "overflow": "hidden",
168
+ "padding": "0px",
169
+ "position": "absolute",
170
+ "whiteSpace": "nowrap",
171
+ "width": "1px",
172
+ }
205
173
  }
206
- }
207
- type="radio"
208
- value="3"
209
- />
210
- <span
211
- aria-hidden={true}
212
- className="css-14wybg9"
213
- onMouseDown={[Function]}
214
- onMouseEnter={[Function]}
215
- onMouseLeave={[Function]}
216
- onMouseUp={[Function]}
217
- />
218
- <span
219
- className="chakra-radio__label css-1y8kf23"
220
- onMouseDown={[Function]}
221
- onTouchStart={[Function]}
174
+ type="radio"
175
+ value="2"
176
+ />
177
+ <span
178
+ aria-hidden={true}
179
+ className="css-14wybg9"
180
+ onMouseDown={[Function]}
181
+ onMouseEnter={[Function]}
182
+ onMouseLeave={[Function]}
183
+ onMouseUp={[Function]}
184
+ />
185
+ <span
186
+ className="chakra-radio__label css-1y8kf23"
187
+ onMouseDown={[Function]}
188
+ onTouchStart={[Function]}
189
+ >
190
+ Radio 2
191
+ </span>
192
+ </label>
193
+ </div>
194
+ <div
195
+ className="css-1xdhyk6"
196
+ id="radio-3-wrapper"
197
+ >
198
+ <label
199
+ className="chakra-radio css-13p0l12"
222
200
  >
223
- Radio 3
224
- </span>
225
- </label>
201
+ <input
202
+ checked={false}
203
+ className="chakra-radio__input"
204
+ disabled={false}
205
+ id="radio-3"
206
+ name="row"
207
+ onBlur={[Function]}
208
+ onChange={[Function]}
209
+ onFocus={[Function]}
210
+ onKeyDown={[Function]}
211
+ onKeyUp={[Function]}
212
+ required={false}
213
+ style={
214
+ Object {
215
+ "border": "0px",
216
+ "clip": "rect(0px, 0px, 0px, 0px)",
217
+ "height": "1px",
218
+ "margin": "-1px",
219
+ "overflow": "hidden",
220
+ "padding": "0px",
221
+ "position": "absolute",
222
+ "whiteSpace": "nowrap",
223
+ "width": "1px",
224
+ }
225
+ }
226
+ type="radio"
227
+ value="3"
228
+ />
229
+ <span
230
+ aria-hidden={true}
231
+ className="css-14wybg9"
232
+ onMouseDown={[Function]}
233
+ onMouseEnter={[Function]}
234
+ onMouseLeave={[Function]}
235
+ onMouseUp={[Function]}
236
+ />
237
+ <span
238
+ className="chakra-radio__label css-1y8kf23"
239
+ onMouseDown={[Function]}
240
+ onTouchStart={[Function]}
241
+ >
242
+ Radio 3
243
+ </span>
244
+ </label>
245
+ </div>
226
246
  </div>
227
247
  </div>
228
248
  </fieldset>
@@ -244,100 +264,110 @@ exports[`Radio Button renders the UI snapshot correctly 3`] = `
244
264
  <div
245
265
  className="chakra-stack css-1wdv1uh"
246
266
  >
247
- <label
248
- className="chakra-radio css-13p0l12"
267
+ <div
268
+ className="css-1xdhyk6"
269
+ id="radio-2-wrapper"
249
270
  >
250
- <input
251
- checked={false}
252
- className="chakra-radio__input"
253
- disabled={false}
254
- id="radio-2"
255
- name="noLabel"
256
- onBlur={[Function]}
257
- onChange={[Function]}
258
- onFocus={[Function]}
259
- onKeyDown={[Function]}
260
- onKeyUp={[Function]}
261
- required={false}
262
- style={
263
- Object {
264
- "border": "0px",
265
- "clip": "rect(0px, 0px, 0px, 0px)",
266
- "height": "1px",
267
- "margin": "-1px",
268
- "overflow": "hidden",
269
- "padding": "0px",
270
- "position": "absolute",
271
- "whiteSpace": "nowrap",
272
- "width": "1px",
273
- }
274
- }
275
- type="radio"
276
- value="2"
277
- />
278
- <span
279
- aria-hidden={true}
280
- className="css-14wybg9"
281
- onMouseDown={[Function]}
282
- onMouseEnter={[Function]}
283
- onMouseLeave={[Function]}
284
- onMouseUp={[Function]}
285
- />
286
- <span
287
- className="chakra-radio__label css-1y8kf23"
288
- onMouseDown={[Function]}
289
- onTouchStart={[Function]}
271
+ <label
272
+ className="chakra-radio css-13p0l12"
290
273
  >
291
- Radio 2
292
- </span>
293
- </label>
294
- <label
295
- className="chakra-radio css-13p0l12"
296
- >
297
- <input
298
- checked={false}
299
- className="chakra-radio__input"
300
- disabled={false}
301
- id="radio-3"
302
- name="noLabel"
303
- onBlur={[Function]}
304
- onChange={[Function]}
305
- onFocus={[Function]}
306
- onKeyDown={[Function]}
307
- onKeyUp={[Function]}
308
- required={false}
309
- style={
310
- Object {
311
- "border": "0px",
312
- "clip": "rect(0px, 0px, 0px, 0px)",
313
- "height": "1px",
314
- "margin": "-1px",
315
- "overflow": "hidden",
316
- "padding": "0px",
317
- "position": "absolute",
318
- "whiteSpace": "nowrap",
319
- "width": "1px",
274
+ <input
275
+ checked={false}
276
+ className="chakra-radio__input"
277
+ disabled={false}
278
+ id="radio-2"
279
+ name="noLabel"
280
+ onBlur={[Function]}
281
+ onChange={[Function]}
282
+ onFocus={[Function]}
283
+ onKeyDown={[Function]}
284
+ onKeyUp={[Function]}
285
+ required={false}
286
+ style={
287
+ Object {
288
+ "border": "0px",
289
+ "clip": "rect(0px, 0px, 0px, 0px)",
290
+ "height": "1px",
291
+ "margin": "-1px",
292
+ "overflow": "hidden",
293
+ "padding": "0px",
294
+ "position": "absolute",
295
+ "whiteSpace": "nowrap",
296
+ "width": "1px",
297
+ }
320
298
  }
321
- }
322
- type="radio"
323
- value="3"
324
- />
325
- <span
326
- aria-hidden={true}
327
- className="css-14wybg9"
328
- onMouseDown={[Function]}
329
- onMouseEnter={[Function]}
330
- onMouseLeave={[Function]}
331
- onMouseUp={[Function]}
332
- />
333
- <span
334
- className="chakra-radio__label css-1y8kf23"
335
- onMouseDown={[Function]}
336
- onTouchStart={[Function]}
299
+ type="radio"
300
+ value="2"
301
+ />
302
+ <span
303
+ aria-hidden={true}
304
+ className="css-14wybg9"
305
+ onMouseDown={[Function]}
306
+ onMouseEnter={[Function]}
307
+ onMouseLeave={[Function]}
308
+ onMouseUp={[Function]}
309
+ />
310
+ <span
311
+ className="chakra-radio__label css-1y8kf23"
312
+ onMouseDown={[Function]}
313
+ onTouchStart={[Function]}
314
+ >
315
+ Radio 2
316
+ </span>
317
+ </label>
318
+ </div>
319
+ <div
320
+ className="css-1xdhyk6"
321
+ id="radio-3-wrapper"
322
+ >
323
+ <label
324
+ className="chakra-radio css-13p0l12"
337
325
  >
338
- Radio 3
339
- </span>
340
- </label>
326
+ <input
327
+ checked={false}
328
+ className="chakra-radio__input"
329
+ disabled={false}
330
+ id="radio-3"
331
+ name="noLabel"
332
+ onBlur={[Function]}
333
+ onChange={[Function]}
334
+ onFocus={[Function]}
335
+ onKeyDown={[Function]}
336
+ onKeyUp={[Function]}
337
+ required={false}
338
+ style={
339
+ Object {
340
+ "border": "0px",
341
+ "clip": "rect(0px, 0px, 0px, 0px)",
342
+ "height": "1px",
343
+ "margin": "-1px",
344
+ "overflow": "hidden",
345
+ "padding": "0px",
346
+ "position": "absolute",
347
+ "whiteSpace": "nowrap",
348
+ "width": "1px",
349
+ }
350
+ }
351
+ type="radio"
352
+ value="3"
353
+ />
354
+ <span
355
+ aria-hidden={true}
356
+ className="css-14wybg9"
357
+ onMouseDown={[Function]}
358
+ onMouseEnter={[Function]}
359
+ onMouseLeave={[Function]}
360
+ onMouseUp={[Function]}
361
+ />
362
+ <span
363
+ className="chakra-radio__label css-1y8kf23"
364
+ onMouseDown={[Function]}
365
+ onTouchStart={[Function]}
366
+ >
367
+ Radio 3
368
+ </span>
369
+ </label>
370
+ </div>
341
371
  </div>
342
372
  </div>
343
373
  </fieldset>
@@ -358,100 +388,110 @@ exports[`Radio Button renders the UI snapshot correctly 4`] = `
358
388
  <div
359
389
  className="chakra-stack css-1wdv1uh"
360
390
  >
361
- <label
362
- className="chakra-radio css-13p0l12"
391
+ <div
392
+ className="css-1xdhyk6"
393
+ id="radio-2-wrapper"
363
394
  >
364
- <input
365
- checked={false}
366
- className="chakra-radio__input"
367
- disabled={false}
368
- id="radio-2"
369
- name="helperText"
370
- onBlur={[Function]}
371
- onChange={[Function]}
372
- onFocus={[Function]}
373
- onKeyDown={[Function]}
374
- onKeyUp={[Function]}
375
- required={false}
376
- style={
377
- Object {
378
- "border": "0px",
379
- "clip": "rect(0px, 0px, 0px, 0px)",
380
- "height": "1px",
381
- "margin": "-1px",
382
- "overflow": "hidden",
383
- "padding": "0px",
384
- "position": "absolute",
385
- "whiteSpace": "nowrap",
386
- "width": "1px",
387
- }
388
- }
389
- type="radio"
390
- value="2"
391
- />
392
- <span
393
- aria-hidden={true}
394
- className="css-14wybg9"
395
- onMouseDown={[Function]}
396
- onMouseEnter={[Function]}
397
- onMouseLeave={[Function]}
398
- onMouseUp={[Function]}
399
- />
400
- <span
401
- className="chakra-radio__label css-1y8kf23"
402
- onMouseDown={[Function]}
403
- onTouchStart={[Function]}
395
+ <label
396
+ className="chakra-radio css-13p0l12"
404
397
  >
405
- Radio 2
406
- </span>
407
- </label>
408
- <label
409
- className="chakra-radio css-13p0l12"
410
- >
411
- <input
412
- checked={false}
413
- className="chakra-radio__input"
414
- disabled={false}
415
- id="radio-3"
416
- name="helperText"
417
- onBlur={[Function]}
418
- onChange={[Function]}
419
- onFocus={[Function]}
420
- onKeyDown={[Function]}
421
- onKeyUp={[Function]}
422
- required={false}
423
- style={
424
- Object {
425
- "border": "0px",
426
- "clip": "rect(0px, 0px, 0px, 0px)",
427
- "height": "1px",
428
- "margin": "-1px",
429
- "overflow": "hidden",
430
- "padding": "0px",
431
- "position": "absolute",
432
- "whiteSpace": "nowrap",
433
- "width": "1px",
398
+ <input
399
+ checked={false}
400
+ className="chakra-radio__input"
401
+ disabled={false}
402
+ id="radio-2"
403
+ name="helperText"
404
+ onBlur={[Function]}
405
+ onChange={[Function]}
406
+ onFocus={[Function]}
407
+ onKeyDown={[Function]}
408
+ onKeyUp={[Function]}
409
+ required={false}
410
+ style={
411
+ Object {
412
+ "border": "0px",
413
+ "clip": "rect(0px, 0px, 0px, 0px)",
414
+ "height": "1px",
415
+ "margin": "-1px",
416
+ "overflow": "hidden",
417
+ "padding": "0px",
418
+ "position": "absolute",
419
+ "whiteSpace": "nowrap",
420
+ "width": "1px",
421
+ }
434
422
  }
435
- }
436
- type="radio"
437
- value="3"
438
- />
439
- <span
440
- aria-hidden={true}
441
- className="css-14wybg9"
442
- onMouseDown={[Function]}
443
- onMouseEnter={[Function]}
444
- onMouseLeave={[Function]}
445
- onMouseUp={[Function]}
446
- />
447
- <span
448
- className="chakra-radio__label css-1y8kf23"
449
- onMouseDown={[Function]}
450
- onTouchStart={[Function]}
423
+ type="radio"
424
+ value="2"
425
+ />
426
+ <span
427
+ aria-hidden={true}
428
+ className="css-14wybg9"
429
+ onMouseDown={[Function]}
430
+ onMouseEnter={[Function]}
431
+ onMouseLeave={[Function]}
432
+ onMouseUp={[Function]}
433
+ />
434
+ <span
435
+ className="chakra-radio__label css-1y8kf23"
436
+ onMouseDown={[Function]}
437
+ onTouchStart={[Function]}
438
+ >
439
+ Radio 2
440
+ </span>
441
+ </label>
442
+ </div>
443
+ <div
444
+ className="css-1xdhyk6"
445
+ id="radio-3-wrapper"
446
+ >
447
+ <label
448
+ className="chakra-radio css-13p0l12"
451
449
  >
452
- Radio 3
453
- </span>
454
- </label>
450
+ <input
451
+ checked={false}
452
+ className="chakra-radio__input"
453
+ disabled={false}
454
+ id="radio-3"
455
+ name="helperText"
456
+ onBlur={[Function]}
457
+ onChange={[Function]}
458
+ onFocus={[Function]}
459
+ onKeyDown={[Function]}
460
+ onKeyUp={[Function]}
461
+ required={false}
462
+ style={
463
+ Object {
464
+ "border": "0px",
465
+ "clip": "rect(0px, 0px, 0px, 0px)",
466
+ "height": "1px",
467
+ "margin": "-1px",
468
+ "overflow": "hidden",
469
+ "padding": "0px",
470
+ "position": "absolute",
471
+ "whiteSpace": "nowrap",
472
+ "width": "1px",
473
+ }
474
+ }
475
+ type="radio"
476
+ value="3"
477
+ />
478
+ <span
479
+ aria-hidden={true}
480
+ className="css-14wybg9"
481
+ onMouseDown={[Function]}
482
+ onMouseEnter={[Function]}
483
+ onMouseLeave={[Function]}
484
+ onMouseUp={[Function]}
485
+ />
486
+ <span
487
+ className="chakra-radio__label css-1y8kf23"
488
+ onMouseDown={[Function]}
489
+ onTouchStart={[Function]}
490
+ >
491
+ Radio 3
492
+ </span>
493
+ </label>
494
+ </div>
455
495
  </div>
456
496
  </div>
457
497
  <div
@@ -484,100 +524,110 @@ exports[`Radio Button renders the UI snapshot correctly 5`] = `
484
524
  <div
485
525
  className="chakra-stack css-1wdv1uh"
486
526
  >
487
- <label
488
- className="chakra-radio css-13p0l12"
527
+ <div
528
+ className="css-1xdhyk6"
529
+ id="radio-2-wrapper"
489
530
  >
490
- <input
491
- checked={false}
492
- className="chakra-radio__input"
493
- disabled={false}
494
- id="radio-2"
495
- name="invalidText"
496
- onBlur={[Function]}
497
- onChange={[Function]}
498
- onFocus={[Function]}
499
- onKeyDown={[Function]}
500
- onKeyUp={[Function]}
501
- required={false}
502
- style={
503
- Object {
504
- "border": "0px",
505
- "clip": "rect(0px, 0px, 0px, 0px)",
506
- "height": "1px",
507
- "margin": "-1px",
508
- "overflow": "hidden",
509
- "padding": "0px",
510
- "position": "absolute",
511
- "whiteSpace": "nowrap",
512
- "width": "1px",
513
- }
514
- }
515
- type="radio"
516
- value="2"
517
- />
518
- <span
519
- aria-hidden={true}
520
- className="css-14wybg9"
521
- onMouseDown={[Function]}
522
- onMouseEnter={[Function]}
523
- onMouseLeave={[Function]}
524
- onMouseUp={[Function]}
525
- />
526
- <span
527
- className="chakra-radio__label css-1y8kf23"
528
- onMouseDown={[Function]}
529
- onTouchStart={[Function]}
531
+ <label
532
+ className="chakra-radio css-13p0l12"
530
533
  >
531
- Radio 2
532
- </span>
533
- </label>
534
- <label
535
- className="chakra-radio css-13p0l12"
536
- >
537
- <input
538
- checked={false}
539
- className="chakra-radio__input"
540
- disabled={false}
541
- id="radio-3"
542
- name="invalidText"
543
- onBlur={[Function]}
544
- onChange={[Function]}
545
- onFocus={[Function]}
546
- onKeyDown={[Function]}
547
- onKeyUp={[Function]}
548
- required={false}
549
- style={
550
- Object {
551
- "border": "0px",
552
- "clip": "rect(0px, 0px, 0px, 0px)",
553
- "height": "1px",
554
- "margin": "-1px",
555
- "overflow": "hidden",
556
- "padding": "0px",
557
- "position": "absolute",
558
- "whiteSpace": "nowrap",
559
- "width": "1px",
534
+ <input
535
+ checked={false}
536
+ className="chakra-radio__input"
537
+ disabled={false}
538
+ id="radio-2"
539
+ name="invalidText"
540
+ onBlur={[Function]}
541
+ onChange={[Function]}
542
+ onFocus={[Function]}
543
+ onKeyDown={[Function]}
544
+ onKeyUp={[Function]}
545
+ required={false}
546
+ style={
547
+ Object {
548
+ "border": "0px",
549
+ "clip": "rect(0px, 0px, 0px, 0px)",
550
+ "height": "1px",
551
+ "margin": "-1px",
552
+ "overflow": "hidden",
553
+ "padding": "0px",
554
+ "position": "absolute",
555
+ "whiteSpace": "nowrap",
556
+ "width": "1px",
557
+ }
560
558
  }
561
- }
562
- type="radio"
563
- value="3"
564
- />
565
- <span
566
- aria-hidden={true}
567
- className="css-14wybg9"
568
- onMouseDown={[Function]}
569
- onMouseEnter={[Function]}
570
- onMouseLeave={[Function]}
571
- onMouseUp={[Function]}
572
- />
573
- <span
574
- className="chakra-radio__label css-1y8kf23"
575
- onMouseDown={[Function]}
576
- onTouchStart={[Function]}
559
+ type="radio"
560
+ value="2"
561
+ />
562
+ <span
563
+ aria-hidden={true}
564
+ className="css-14wybg9"
565
+ onMouseDown={[Function]}
566
+ onMouseEnter={[Function]}
567
+ onMouseLeave={[Function]}
568
+ onMouseUp={[Function]}
569
+ />
570
+ <span
571
+ className="chakra-radio__label css-1y8kf23"
572
+ onMouseDown={[Function]}
573
+ onTouchStart={[Function]}
574
+ >
575
+ Radio 2
576
+ </span>
577
+ </label>
578
+ </div>
579
+ <div
580
+ className="css-1xdhyk6"
581
+ id="radio-3-wrapper"
582
+ >
583
+ <label
584
+ className="chakra-radio css-13p0l12"
577
585
  >
578
- Radio 3
579
- </span>
580
- </label>
586
+ <input
587
+ checked={false}
588
+ className="chakra-radio__input"
589
+ disabled={false}
590
+ id="radio-3"
591
+ name="invalidText"
592
+ onBlur={[Function]}
593
+ onChange={[Function]}
594
+ onFocus={[Function]}
595
+ onKeyDown={[Function]}
596
+ onKeyUp={[Function]}
597
+ required={false}
598
+ style={
599
+ Object {
600
+ "border": "0px",
601
+ "clip": "rect(0px, 0px, 0px, 0px)",
602
+ "height": "1px",
603
+ "margin": "-1px",
604
+ "overflow": "hidden",
605
+ "padding": "0px",
606
+ "position": "absolute",
607
+ "whiteSpace": "nowrap",
608
+ "width": "1px",
609
+ }
610
+ }
611
+ type="radio"
612
+ value="3"
613
+ />
614
+ <span
615
+ aria-hidden={true}
616
+ className="css-14wybg9"
617
+ onMouseDown={[Function]}
618
+ onMouseEnter={[Function]}
619
+ onMouseLeave={[Function]}
620
+ onMouseUp={[Function]}
621
+ />
622
+ <span
623
+ className="chakra-radio__label css-1y8kf23"
624
+ onMouseDown={[Function]}
625
+ onTouchStart={[Function]}
626
+ >
627
+ Radio 3
628
+ </span>
629
+ </label>
630
+ </div>
581
631
  </div>
582
632
  </div>
583
633
  </fieldset>
@@ -598,102 +648,112 @@ exports[`Radio Button renders the UI snapshot correctly 6`] = `
598
648
  <div
599
649
  className="chakra-stack css-1wdv1uh"
600
650
  >
601
- <label
602
- className="chakra-radio css-13p0l12"
651
+ <div
652
+ className="css-1xdhyk6"
653
+ id="radio-2-wrapper"
603
654
  >
604
- <input
605
- aria-required={true}
606
- checked={false}
607
- className="chakra-radio__input"
608
- disabled={false}
609
- id="radio-2"
610
- name="noRequiredLabel"
611
- onBlur={[Function]}
612
- onChange={[Function]}
613
- onFocus={[Function]}
614
- onKeyDown={[Function]}
615
- onKeyUp={[Function]}
616
- required={true}
617
- style={
618
- Object {
619
- "border": "0px",
620
- "clip": "rect(0px, 0px, 0px, 0px)",
621
- "height": "1px",
622
- "margin": "-1px",
623
- "overflow": "hidden",
624
- "padding": "0px",
625
- "position": "absolute",
626
- "whiteSpace": "nowrap",
627
- "width": "1px",
628
- }
629
- }
630
- type="radio"
631
- value="2"
632
- />
633
- <span
634
- aria-hidden={true}
635
- className="css-14wybg9"
636
- onMouseDown={[Function]}
637
- onMouseEnter={[Function]}
638
- onMouseLeave={[Function]}
639
- onMouseUp={[Function]}
640
- />
641
- <span
642
- className="chakra-radio__label css-1y8kf23"
643
- onMouseDown={[Function]}
644
- onTouchStart={[Function]}
655
+ <label
656
+ className="chakra-radio css-13p0l12"
645
657
  >
646
- Radio 2
647
- </span>
648
- </label>
649
- <label
650
- className="chakra-radio css-13p0l12"
651
- >
652
- <input
653
- aria-required={true}
654
- checked={false}
655
- className="chakra-radio__input"
656
- disabled={false}
657
- id="radio-3"
658
- name="noRequiredLabel"
659
- onBlur={[Function]}
660
- onChange={[Function]}
661
- onFocus={[Function]}
662
- onKeyDown={[Function]}
663
- onKeyUp={[Function]}
664
- required={true}
665
- style={
666
- Object {
667
- "border": "0px",
668
- "clip": "rect(0px, 0px, 0px, 0px)",
669
- "height": "1px",
670
- "margin": "-1px",
671
- "overflow": "hidden",
672
- "padding": "0px",
673
- "position": "absolute",
674
- "whiteSpace": "nowrap",
675
- "width": "1px",
658
+ <input
659
+ aria-required={true}
660
+ checked={false}
661
+ className="chakra-radio__input"
662
+ disabled={false}
663
+ id="radio-2"
664
+ name="noRequiredLabel"
665
+ onBlur={[Function]}
666
+ onChange={[Function]}
667
+ onFocus={[Function]}
668
+ onKeyDown={[Function]}
669
+ onKeyUp={[Function]}
670
+ required={true}
671
+ style={
672
+ Object {
673
+ "border": "0px",
674
+ "clip": "rect(0px, 0px, 0px, 0px)",
675
+ "height": "1px",
676
+ "margin": "-1px",
677
+ "overflow": "hidden",
678
+ "padding": "0px",
679
+ "position": "absolute",
680
+ "whiteSpace": "nowrap",
681
+ "width": "1px",
682
+ }
676
683
  }
677
- }
678
- type="radio"
679
- value="3"
680
- />
681
- <span
682
- aria-hidden={true}
683
- className="css-14wybg9"
684
- onMouseDown={[Function]}
685
- onMouseEnter={[Function]}
686
- onMouseLeave={[Function]}
687
- onMouseUp={[Function]}
688
- />
689
- <span
690
- className="chakra-radio__label css-1y8kf23"
691
- onMouseDown={[Function]}
692
- onTouchStart={[Function]}
684
+ type="radio"
685
+ value="2"
686
+ />
687
+ <span
688
+ aria-hidden={true}
689
+ className="css-14wybg9"
690
+ onMouseDown={[Function]}
691
+ onMouseEnter={[Function]}
692
+ onMouseLeave={[Function]}
693
+ onMouseUp={[Function]}
694
+ />
695
+ <span
696
+ className="chakra-radio__label css-1y8kf23"
697
+ onMouseDown={[Function]}
698
+ onTouchStart={[Function]}
699
+ >
700
+ Radio 2
701
+ </span>
702
+ </label>
703
+ </div>
704
+ <div
705
+ className="css-1xdhyk6"
706
+ id="radio-3-wrapper"
707
+ >
708
+ <label
709
+ className="chakra-radio css-13p0l12"
693
710
  >
694
- Radio 3
695
- </span>
696
- </label>
711
+ <input
712
+ aria-required={true}
713
+ checked={false}
714
+ className="chakra-radio__input"
715
+ disabled={false}
716
+ id="radio-3"
717
+ name="noRequiredLabel"
718
+ onBlur={[Function]}
719
+ onChange={[Function]}
720
+ onFocus={[Function]}
721
+ onKeyDown={[Function]}
722
+ onKeyUp={[Function]}
723
+ required={true}
724
+ style={
725
+ Object {
726
+ "border": "0px",
727
+ "clip": "rect(0px, 0px, 0px, 0px)",
728
+ "height": "1px",
729
+ "margin": "-1px",
730
+ "overflow": "hidden",
731
+ "padding": "0px",
732
+ "position": "absolute",
733
+ "whiteSpace": "nowrap",
734
+ "width": "1px",
735
+ }
736
+ }
737
+ type="radio"
738
+ value="3"
739
+ />
740
+ <span
741
+ aria-hidden={true}
742
+ className="css-14wybg9"
743
+ onMouseDown={[Function]}
744
+ onMouseEnter={[Function]}
745
+ onMouseLeave={[Function]}
746
+ onMouseUp={[Function]}
747
+ />
748
+ <span
749
+ className="chakra-radio__label css-1y8kf23"
750
+ onMouseDown={[Function]}
751
+ onTouchStart={[Function]}
752
+ >
753
+ Radio 3
754
+ </span>
755
+ </label>
756
+ </div>
697
757
  </div>
698
758
  </div>
699
759
  </fieldset>
@@ -717,102 +777,112 @@ exports[`Radio Button renders the UI snapshot correctly 7`] = `
717
777
  <div
718
778
  className="chakra-stack css-1wdv1uh"
719
779
  >
720
- <label
721
- className="chakra-radio css-13p0l12"
780
+ <div
781
+ className="css-1xdhyk6"
782
+ id="radio-2-wrapper"
722
783
  >
723
- <input
724
- aria-required={true}
725
- checked={false}
726
- className="chakra-radio__input"
727
- disabled={false}
728
- id="radio-2"
729
- name="required"
730
- onBlur={[Function]}
731
- onChange={[Function]}
732
- onFocus={[Function]}
733
- onKeyDown={[Function]}
734
- onKeyUp={[Function]}
735
- required={true}
736
- style={
737
- Object {
738
- "border": "0px",
739
- "clip": "rect(0px, 0px, 0px, 0px)",
740
- "height": "1px",
741
- "margin": "-1px",
742
- "overflow": "hidden",
743
- "padding": "0px",
744
- "position": "absolute",
745
- "whiteSpace": "nowrap",
746
- "width": "1px",
747
- }
748
- }
749
- type="radio"
750
- value="2"
751
- />
752
- <span
753
- aria-hidden={true}
754
- className="css-14wybg9"
755
- onMouseDown={[Function]}
756
- onMouseEnter={[Function]}
757
- onMouseLeave={[Function]}
758
- onMouseUp={[Function]}
759
- />
760
- <span
761
- className="chakra-radio__label css-1y8kf23"
762
- onMouseDown={[Function]}
763
- onTouchStart={[Function]}
784
+ <label
785
+ className="chakra-radio css-13p0l12"
764
786
  >
765
- Radio 2
766
- </span>
767
- </label>
768
- <label
769
- className="chakra-radio css-13p0l12"
770
- >
771
- <input
772
- aria-required={true}
773
- checked={false}
774
- className="chakra-radio__input"
775
- disabled={false}
776
- id="radio-3"
777
- name="required"
778
- onBlur={[Function]}
779
- onChange={[Function]}
780
- onFocus={[Function]}
781
- onKeyDown={[Function]}
782
- onKeyUp={[Function]}
783
- required={true}
784
- style={
785
- Object {
786
- "border": "0px",
787
- "clip": "rect(0px, 0px, 0px, 0px)",
788
- "height": "1px",
789
- "margin": "-1px",
790
- "overflow": "hidden",
791
- "padding": "0px",
792
- "position": "absolute",
793
- "whiteSpace": "nowrap",
794
- "width": "1px",
787
+ <input
788
+ aria-required={true}
789
+ checked={false}
790
+ className="chakra-radio__input"
791
+ disabled={false}
792
+ id="radio-2"
793
+ name="required"
794
+ onBlur={[Function]}
795
+ onChange={[Function]}
796
+ onFocus={[Function]}
797
+ onKeyDown={[Function]}
798
+ onKeyUp={[Function]}
799
+ required={true}
800
+ style={
801
+ Object {
802
+ "border": "0px",
803
+ "clip": "rect(0px, 0px, 0px, 0px)",
804
+ "height": "1px",
805
+ "margin": "-1px",
806
+ "overflow": "hidden",
807
+ "padding": "0px",
808
+ "position": "absolute",
809
+ "whiteSpace": "nowrap",
810
+ "width": "1px",
811
+ }
795
812
  }
796
- }
797
- type="radio"
798
- value="3"
799
- />
800
- <span
801
- aria-hidden={true}
802
- className="css-14wybg9"
803
- onMouseDown={[Function]}
804
- onMouseEnter={[Function]}
805
- onMouseLeave={[Function]}
806
- onMouseUp={[Function]}
807
- />
808
- <span
809
- className="chakra-radio__label css-1y8kf23"
810
- onMouseDown={[Function]}
811
- onTouchStart={[Function]}
813
+ type="radio"
814
+ value="2"
815
+ />
816
+ <span
817
+ aria-hidden={true}
818
+ className="css-14wybg9"
819
+ onMouseDown={[Function]}
820
+ onMouseEnter={[Function]}
821
+ onMouseLeave={[Function]}
822
+ onMouseUp={[Function]}
823
+ />
824
+ <span
825
+ className="chakra-radio__label css-1y8kf23"
826
+ onMouseDown={[Function]}
827
+ onTouchStart={[Function]}
828
+ >
829
+ Radio 2
830
+ </span>
831
+ </label>
832
+ </div>
833
+ <div
834
+ className="css-1xdhyk6"
835
+ id="radio-3-wrapper"
836
+ >
837
+ <label
838
+ className="chakra-radio css-13p0l12"
812
839
  >
813
- Radio 3
814
- </span>
815
- </label>
840
+ <input
841
+ aria-required={true}
842
+ checked={false}
843
+ className="chakra-radio__input"
844
+ disabled={false}
845
+ id="radio-3"
846
+ name="required"
847
+ onBlur={[Function]}
848
+ onChange={[Function]}
849
+ onFocus={[Function]}
850
+ onKeyDown={[Function]}
851
+ onKeyUp={[Function]}
852
+ required={true}
853
+ style={
854
+ Object {
855
+ "border": "0px",
856
+ "clip": "rect(0px, 0px, 0px, 0px)",
857
+ "height": "1px",
858
+ "margin": "-1px",
859
+ "overflow": "hidden",
860
+ "padding": "0px",
861
+ "position": "absolute",
862
+ "whiteSpace": "nowrap",
863
+ "width": "1px",
864
+ }
865
+ }
866
+ type="radio"
867
+ value="3"
868
+ />
869
+ <span
870
+ aria-hidden={true}
871
+ className="css-14wybg9"
872
+ onMouseDown={[Function]}
873
+ onMouseEnter={[Function]}
874
+ onMouseLeave={[Function]}
875
+ onMouseUp={[Function]}
876
+ />
877
+ <span
878
+ className="chakra-radio__label css-1y8kf23"
879
+ onMouseDown={[Function]}
880
+ onTouchStart={[Function]}
881
+ >
882
+ Radio 3
883
+ </span>
884
+ </label>
885
+ </div>
816
886
  </div>
817
887
  </div>
818
888
  </fieldset>
@@ -833,108 +903,118 @@ exports[`Radio Button renders the UI snapshot correctly 8`] = `
833
903
  <div
834
904
  className="chakra-stack css-1wdv1uh"
835
905
  >
836
- <label
837
- className="chakra-radio css-13p0l12"
838
- data-invalid=""
906
+ <div
907
+ className="css-1xdhyk6"
908
+ id="radio-2-wrapper"
839
909
  >
840
- <input
841
- aria-invalid={true}
842
- checked={false}
843
- className="chakra-radio__input"
844
- disabled={false}
845
- id="radio-2"
846
- name="invalid"
847
- onBlur={[Function]}
848
- onChange={[Function]}
849
- onFocus={[Function]}
850
- onKeyDown={[Function]}
851
- onKeyUp={[Function]}
852
- required={false}
853
- style={
854
- Object {
855
- "border": "0px",
856
- "clip": "rect(0px, 0px, 0px, 0px)",
857
- "height": "1px",
858
- "margin": "-1px",
859
- "overflow": "hidden",
860
- "padding": "0px",
861
- "position": "absolute",
862
- "whiteSpace": "nowrap",
863
- "width": "1px",
864
- }
865
- }
866
- type="radio"
867
- value="2"
868
- />
869
- <span
870
- aria-hidden={true}
871
- className="css-14wybg9"
872
- data-invalid=""
873
- onMouseDown={[Function]}
874
- onMouseEnter={[Function]}
875
- onMouseLeave={[Function]}
876
- onMouseUp={[Function]}
877
- />
878
- <span
879
- className="chakra-radio__label css-1y8kf23"
910
+ <label
911
+ className="chakra-radio css-13p0l12"
880
912
  data-invalid=""
881
- onMouseDown={[Function]}
882
- onTouchStart={[Function]}
883
913
  >
884
- Radio 2
885
- </span>
886
- </label>
887
- <label
888
- className="chakra-radio css-13p0l12"
889
- data-invalid=""
890
- >
891
- <input
892
- aria-invalid={true}
893
- checked={false}
894
- className="chakra-radio__input"
895
- disabled={false}
896
- id="radio-3"
897
- name="invalid"
898
- onBlur={[Function]}
899
- onChange={[Function]}
900
- onFocus={[Function]}
901
- onKeyDown={[Function]}
902
- onKeyUp={[Function]}
903
- required={false}
904
- style={
905
- Object {
906
- "border": "0px",
907
- "clip": "rect(0px, 0px, 0px, 0px)",
908
- "height": "1px",
909
- "margin": "-1px",
910
- "overflow": "hidden",
911
- "padding": "0px",
912
- "position": "absolute",
913
- "whiteSpace": "nowrap",
914
- "width": "1px",
914
+ <input
915
+ aria-invalid={true}
916
+ checked={false}
917
+ className="chakra-radio__input"
918
+ disabled={false}
919
+ id="radio-2"
920
+ name="invalid"
921
+ onBlur={[Function]}
922
+ onChange={[Function]}
923
+ onFocus={[Function]}
924
+ onKeyDown={[Function]}
925
+ onKeyUp={[Function]}
926
+ required={false}
927
+ style={
928
+ Object {
929
+ "border": "0px",
930
+ "clip": "rect(0px, 0px, 0px, 0px)",
931
+ "height": "1px",
932
+ "margin": "-1px",
933
+ "overflow": "hidden",
934
+ "padding": "0px",
935
+ "position": "absolute",
936
+ "whiteSpace": "nowrap",
937
+ "width": "1px",
938
+ }
915
939
  }
916
- }
917
- type="radio"
918
- value="3"
919
- />
920
- <span
921
- aria-hidden={true}
922
- className="css-14wybg9"
923
- data-invalid=""
924
- onMouseDown={[Function]}
925
- onMouseEnter={[Function]}
926
- onMouseLeave={[Function]}
927
- onMouseUp={[Function]}
928
- />
929
- <span
930
- className="chakra-radio__label css-1y8kf23"
940
+ type="radio"
941
+ value="2"
942
+ />
943
+ <span
944
+ aria-hidden={true}
945
+ className="css-14wybg9"
946
+ data-invalid=""
947
+ onMouseDown={[Function]}
948
+ onMouseEnter={[Function]}
949
+ onMouseLeave={[Function]}
950
+ onMouseUp={[Function]}
951
+ />
952
+ <span
953
+ className="chakra-radio__label css-1y8kf23"
954
+ data-invalid=""
955
+ onMouseDown={[Function]}
956
+ onTouchStart={[Function]}
957
+ >
958
+ Radio 2
959
+ </span>
960
+ </label>
961
+ </div>
962
+ <div
963
+ className="css-1xdhyk6"
964
+ id="radio-3-wrapper"
965
+ >
966
+ <label
967
+ className="chakra-radio css-13p0l12"
931
968
  data-invalid=""
932
- onMouseDown={[Function]}
933
- onTouchStart={[Function]}
934
969
  >
935
- Radio 3
936
- </span>
937
- </label>
970
+ <input
971
+ aria-invalid={true}
972
+ checked={false}
973
+ className="chakra-radio__input"
974
+ disabled={false}
975
+ id="radio-3"
976
+ name="invalid"
977
+ onBlur={[Function]}
978
+ onChange={[Function]}
979
+ onFocus={[Function]}
980
+ onKeyDown={[Function]}
981
+ onKeyUp={[Function]}
982
+ required={false}
983
+ style={
984
+ Object {
985
+ "border": "0px",
986
+ "clip": "rect(0px, 0px, 0px, 0px)",
987
+ "height": "1px",
988
+ "margin": "-1px",
989
+ "overflow": "hidden",
990
+ "padding": "0px",
991
+ "position": "absolute",
992
+ "whiteSpace": "nowrap",
993
+ "width": "1px",
994
+ }
995
+ }
996
+ type="radio"
997
+ value="3"
998
+ />
999
+ <span
1000
+ aria-hidden={true}
1001
+ className="css-14wybg9"
1002
+ data-invalid=""
1003
+ onMouseDown={[Function]}
1004
+ onMouseEnter={[Function]}
1005
+ onMouseLeave={[Function]}
1006
+ onMouseUp={[Function]}
1007
+ />
1008
+ <span
1009
+ className="chakra-radio__label css-1y8kf23"
1010
+ data-invalid=""
1011
+ onMouseDown={[Function]}
1012
+ onTouchStart={[Function]}
1013
+ >
1014
+ Radio 3
1015
+ </span>
1016
+ </label>
1017
+ </div>
938
1018
  </div>
939
1019
  </div>
940
1020
  </fieldset>
@@ -955,108 +1035,118 @@ exports[`Radio Button renders the UI snapshot correctly 9`] = `
955
1035
  <div
956
1036
  className="chakra-stack css-1wdv1uh"
957
1037
  >
958
- <label
959
- className="chakra-radio css-13p0l12"
960
- data-disabled=""
1038
+ <div
1039
+ className="css-1xdhyk6"
1040
+ id="radio-2-wrapper"
961
1041
  >
962
- <input
963
- aria-disabled={true}
964
- checked={false}
965
- className="chakra-radio__input"
966
- disabled={true}
967
- id="radio-2"
968
- name="disabled"
969
- onBlur={[Function]}
970
- onChange={[Function]}
971
- onFocus={[Function]}
972
- onKeyDown={[Function]}
973
- onKeyUp={[Function]}
974
- required={false}
975
- style={
976
- Object {
977
- "border": "0px",
978
- "clip": "rect(0px, 0px, 0px, 0px)",
979
- "height": "1px",
980
- "margin": "-1px",
981
- "overflow": "hidden",
982
- "padding": "0px",
983
- "position": "absolute",
984
- "whiteSpace": "nowrap",
985
- "width": "1px",
986
- }
987
- }
988
- type="radio"
989
- value="2"
990
- />
991
- <span
992
- aria-hidden={true}
993
- className="css-14wybg9"
994
- data-disabled=""
995
- onMouseDown={[Function]}
996
- onMouseEnter={[Function]}
997
- onMouseLeave={[Function]}
998
- onMouseUp={[Function]}
999
- />
1000
- <span
1001
- className="chakra-radio__label css-1y8kf23"
1042
+ <label
1043
+ className="chakra-radio css-13p0l12"
1002
1044
  data-disabled=""
1003
- onMouseDown={[Function]}
1004
- onTouchStart={[Function]}
1005
1045
  >
1006
- Radio 2
1007
- </span>
1008
- </label>
1009
- <label
1010
- className="chakra-radio css-13p0l12"
1011
- data-disabled=""
1012
- >
1013
- <input
1014
- aria-disabled={true}
1015
- checked={false}
1016
- className="chakra-radio__input"
1017
- disabled={true}
1018
- id="radio-3"
1019
- name="disabled"
1020
- onBlur={[Function]}
1021
- onChange={[Function]}
1022
- onFocus={[Function]}
1023
- onKeyDown={[Function]}
1024
- onKeyUp={[Function]}
1025
- required={false}
1026
- style={
1027
- Object {
1028
- "border": "0px",
1029
- "clip": "rect(0px, 0px, 0px, 0px)",
1030
- "height": "1px",
1031
- "margin": "-1px",
1032
- "overflow": "hidden",
1033
- "padding": "0px",
1034
- "position": "absolute",
1035
- "whiteSpace": "nowrap",
1036
- "width": "1px",
1046
+ <input
1047
+ aria-disabled={true}
1048
+ checked={false}
1049
+ className="chakra-radio__input"
1050
+ disabled={true}
1051
+ id="radio-2"
1052
+ name="disabled"
1053
+ onBlur={[Function]}
1054
+ onChange={[Function]}
1055
+ onFocus={[Function]}
1056
+ onKeyDown={[Function]}
1057
+ onKeyUp={[Function]}
1058
+ required={false}
1059
+ style={
1060
+ Object {
1061
+ "border": "0px",
1062
+ "clip": "rect(0px, 0px, 0px, 0px)",
1063
+ "height": "1px",
1064
+ "margin": "-1px",
1065
+ "overflow": "hidden",
1066
+ "padding": "0px",
1067
+ "position": "absolute",
1068
+ "whiteSpace": "nowrap",
1069
+ "width": "1px",
1070
+ }
1037
1071
  }
1038
- }
1039
- type="radio"
1040
- value="3"
1041
- />
1042
- <span
1043
- aria-hidden={true}
1044
- className="css-14wybg9"
1045
- data-disabled=""
1046
- onMouseDown={[Function]}
1047
- onMouseEnter={[Function]}
1048
- onMouseLeave={[Function]}
1049
- onMouseUp={[Function]}
1050
- />
1051
- <span
1052
- className="chakra-radio__label css-1y8kf23"
1072
+ type="radio"
1073
+ value="2"
1074
+ />
1075
+ <span
1076
+ aria-hidden={true}
1077
+ className="css-14wybg9"
1078
+ data-disabled=""
1079
+ onMouseDown={[Function]}
1080
+ onMouseEnter={[Function]}
1081
+ onMouseLeave={[Function]}
1082
+ onMouseUp={[Function]}
1083
+ />
1084
+ <span
1085
+ className="chakra-radio__label css-1y8kf23"
1086
+ data-disabled=""
1087
+ onMouseDown={[Function]}
1088
+ onTouchStart={[Function]}
1089
+ >
1090
+ Radio 2
1091
+ </span>
1092
+ </label>
1093
+ </div>
1094
+ <div
1095
+ className="css-1xdhyk6"
1096
+ id="radio-3-wrapper"
1097
+ >
1098
+ <label
1099
+ className="chakra-radio css-13p0l12"
1053
1100
  data-disabled=""
1054
- onMouseDown={[Function]}
1055
- onTouchStart={[Function]}
1056
1101
  >
1057
- Radio 3
1058
- </span>
1059
- </label>
1102
+ <input
1103
+ aria-disabled={true}
1104
+ checked={false}
1105
+ className="chakra-radio__input"
1106
+ disabled={true}
1107
+ id="radio-3"
1108
+ name="disabled"
1109
+ onBlur={[Function]}
1110
+ onChange={[Function]}
1111
+ onFocus={[Function]}
1112
+ onKeyDown={[Function]}
1113
+ onKeyUp={[Function]}
1114
+ required={false}
1115
+ style={
1116
+ Object {
1117
+ "border": "0px",
1118
+ "clip": "rect(0px, 0px, 0px, 0px)",
1119
+ "height": "1px",
1120
+ "margin": "-1px",
1121
+ "overflow": "hidden",
1122
+ "padding": "0px",
1123
+ "position": "absolute",
1124
+ "whiteSpace": "nowrap",
1125
+ "width": "1px",
1126
+ }
1127
+ }
1128
+ type="radio"
1129
+ value="3"
1130
+ />
1131
+ <span
1132
+ aria-hidden={true}
1133
+ className="css-14wybg9"
1134
+ data-disabled=""
1135
+ onMouseDown={[Function]}
1136
+ onMouseEnter={[Function]}
1137
+ onMouseLeave={[Function]}
1138
+ onMouseUp={[Function]}
1139
+ />
1140
+ <span
1141
+ className="chakra-radio__label css-1y8kf23"
1142
+ data-disabled=""
1143
+ onMouseDown={[Function]}
1144
+ onTouchStart={[Function]}
1145
+ >
1146
+ Radio 3
1147
+ </span>
1148
+ </label>
1149
+ </div>
1060
1150
  </div>
1061
1151
  </div>
1062
1152
  </fieldset>
@@ -1077,124 +1167,134 @@ exports[`Radio Button renders the UI snapshot correctly 10`] = `
1077
1167
  <div
1078
1168
  className="chakra-stack css-1wdv1uh"
1079
1169
  >
1080
- <label
1081
- className="chakra-radio css-13p0l12"
1170
+ <div
1171
+ className="css-1xdhyk6"
1172
+ id="arts-wrapper"
1082
1173
  >
1083
- <input
1084
- checked={false}
1085
- className="chakra-radio__input"
1086
- disabled={false}
1087
- id="arts"
1088
- name="a11y-test"
1089
- onBlur={[Function]}
1090
- onChange={[Function]}
1091
- onFocus={[Function]}
1092
- onKeyDown={[Function]}
1093
- onKeyUp={[Function]}
1094
- required={false}
1095
- style={
1096
- Object {
1097
- "border": "0px",
1098
- "clip": "rect(0px, 0px, 0px, 0px)",
1099
- "height": "1px",
1100
- "margin": "-1px",
1101
- "overflow": "hidden",
1102
- "padding": "0px",
1103
- "position": "absolute",
1104
- "whiteSpace": "nowrap",
1105
- "width": "1px",
1106
- }
1107
- }
1108
- type="radio"
1109
- value="arts"
1110
- />
1111
- <span
1112
- aria-hidden={true}
1113
- className="css-14wybg9"
1114
- onMouseDown={[Function]}
1115
- onMouseEnter={[Function]}
1116
- onMouseLeave={[Function]}
1117
- onMouseUp={[Function]}
1118
- />
1119
- <span
1120
- className="chakra-radio__label css-1y8kf23"
1121
- onMouseDown={[Function]}
1122
- onTouchStart={[Function]}
1174
+ <label
1175
+ className="chakra-radio css-13p0l12"
1123
1176
  >
1124
- <div
1125
- className="css-k008qs"
1177
+ <input
1178
+ checked={false}
1179
+ className="chakra-radio__input"
1180
+ disabled={false}
1181
+ id="arts"
1182
+ name="a11y-test"
1183
+ onBlur={[Function]}
1184
+ onChange={[Function]}
1185
+ onFocus={[Function]}
1186
+ onKeyDown={[Function]}
1187
+ onKeyUp={[Function]}
1188
+ required={false}
1189
+ style={
1190
+ Object {
1191
+ "border": "0px",
1192
+ "clip": "rect(0px, 0px, 0px, 0px)",
1193
+ "height": "1px",
1194
+ "margin": "-1px",
1195
+ "overflow": "hidden",
1196
+ "padding": "0px",
1197
+ "position": "absolute",
1198
+ "whiteSpace": "nowrap",
1199
+ "width": "1px",
1200
+ }
1201
+ }
1202
+ type="radio"
1203
+ value="arts"
1204
+ />
1205
+ <span
1206
+ aria-hidden={true}
1207
+ className="css-14wybg9"
1208
+ onMouseDown={[Function]}
1209
+ onMouseEnter={[Function]}
1210
+ onMouseLeave={[Function]}
1211
+ onMouseUp={[Function]}
1212
+ />
1213
+ <span
1214
+ className="chakra-radio__label css-1y8kf23"
1215
+ onMouseDown={[Function]}
1216
+ onTouchStart={[Function]}
1126
1217
  >
1127
- <span>
1128
- Arts
1129
- </span>
1130
1218
  <div
1131
- className="css-17xejub"
1132
- />
1133
- <span>
1134
- 4
1135
- </span>
1136
- </div>
1137
- </span>
1138
- </label>
1139
- <label
1140
- className="chakra-radio css-13p0l12"
1219
+ className="css-k008qs"
1220
+ >
1221
+ <span>
1222
+ Arts
1223
+ </span>
1224
+ <div
1225
+ className="css-17xejub"
1226
+ />
1227
+ <span>
1228
+ 4
1229
+ </span>
1230
+ </div>
1231
+ </span>
1232
+ </label>
1233
+ </div>
1234
+ <div
1235
+ className="css-1xdhyk6"
1236
+ id="English-wrapper"
1141
1237
  >
1142
- <input
1143
- checked={false}
1144
- className="chakra-radio__input"
1145
- disabled={false}
1146
- id="English"
1147
- name="a11y-test"
1148
- onBlur={[Function]}
1149
- onChange={[Function]}
1150
- onFocus={[Function]}
1151
- onKeyDown={[Function]}
1152
- onKeyUp={[Function]}
1153
- required={false}
1154
- style={
1155
- Object {
1156
- "border": "0px",
1157
- "clip": "rect(0px, 0px, 0px, 0px)",
1158
- "height": "1px",
1159
- "margin": "-1px",
1160
- "overflow": "hidden",
1161
- "padding": "0px",
1162
- "position": "absolute",
1163
- "whiteSpace": "nowrap",
1164
- "width": "1px",
1165
- }
1166
- }
1167
- type="radio"
1168
- value="English"
1169
- />
1170
- <span
1171
- aria-hidden={true}
1172
- className="css-14wybg9"
1173
- onMouseDown={[Function]}
1174
- onMouseEnter={[Function]}
1175
- onMouseLeave={[Function]}
1176
- onMouseUp={[Function]}
1177
- />
1178
- <span
1179
- className="chakra-radio__label css-1y8kf23"
1180
- onMouseDown={[Function]}
1181
- onTouchStart={[Function]}
1238
+ <label
1239
+ className="chakra-radio css-13p0l12"
1182
1240
  >
1183
- <div
1184
- className="css-k008qs"
1241
+ <input
1242
+ checked={false}
1243
+ className="chakra-radio__input"
1244
+ disabled={false}
1245
+ id="English"
1246
+ name="a11y-test"
1247
+ onBlur={[Function]}
1248
+ onChange={[Function]}
1249
+ onFocus={[Function]}
1250
+ onKeyDown={[Function]}
1251
+ onKeyUp={[Function]}
1252
+ required={false}
1253
+ style={
1254
+ Object {
1255
+ "border": "0px",
1256
+ "clip": "rect(0px, 0px, 0px, 0px)",
1257
+ "height": "1px",
1258
+ "margin": "-1px",
1259
+ "overflow": "hidden",
1260
+ "padding": "0px",
1261
+ "position": "absolute",
1262
+ "whiteSpace": "nowrap",
1263
+ "width": "1px",
1264
+ }
1265
+ }
1266
+ type="radio"
1267
+ value="English"
1268
+ />
1269
+ <span
1270
+ aria-hidden={true}
1271
+ className="css-14wybg9"
1272
+ onMouseDown={[Function]}
1273
+ onMouseEnter={[Function]}
1274
+ onMouseLeave={[Function]}
1275
+ onMouseUp={[Function]}
1276
+ />
1277
+ <span
1278
+ className="chakra-radio__label css-1y8kf23"
1279
+ onMouseDown={[Function]}
1280
+ onTouchStart={[Function]}
1185
1281
  >
1186
- <span>
1187
- English
1188
- </span>
1189
1282
  <div
1190
- className="css-17xejub"
1191
- />
1192
- <span>
1193
- 23
1194
- </span>
1195
- </div>
1196
- </span>
1197
- </label>
1283
+ className="css-k008qs"
1284
+ >
1285
+ <span>
1286
+ English
1287
+ </span>
1288
+ <div
1289
+ className="css-17xejub"
1290
+ />
1291
+ <span>
1292
+ 23
1293
+ </span>
1294
+ </div>
1295
+ </span>
1296
+ </label>
1297
+ </div>
1198
1298
  </div>
1199
1299
  </div>
1200
1300
  </fieldset>
@@ -1215,100 +1315,110 @@ exports[`Radio Button renders the UI snapshot correctly 11`] = `
1215
1315
  <div
1216
1316
  className="chakra-stack css-1wdv1uh"
1217
1317
  >
1218
- <label
1219
- className="chakra-radio css-13p0l12"
1318
+ <div
1319
+ className="css-1xdhyk6"
1320
+ id="radio-2-wrapper"
1220
1321
  >
1221
- <input
1222
- checked={false}
1223
- className="chakra-radio__input"
1224
- disabled={false}
1225
- id="radio-2"
1226
- name="chakra"
1227
- onBlur={[Function]}
1228
- onChange={[Function]}
1229
- onFocus={[Function]}
1230
- onKeyDown={[Function]}
1231
- onKeyUp={[Function]}
1232
- required={false}
1233
- style={
1234
- Object {
1235
- "border": "0px",
1236
- "clip": "rect(0px, 0px, 0px, 0px)",
1237
- "height": "1px",
1238
- "margin": "-1px",
1239
- "overflow": "hidden",
1240
- "padding": "0px",
1241
- "position": "absolute",
1242
- "whiteSpace": "nowrap",
1243
- "width": "1px",
1244
- }
1245
- }
1246
- type="radio"
1247
- value="2"
1248
- />
1249
- <span
1250
- aria-hidden={true}
1251
- className="css-14wybg9"
1252
- onMouseDown={[Function]}
1253
- onMouseEnter={[Function]}
1254
- onMouseLeave={[Function]}
1255
- onMouseUp={[Function]}
1256
- />
1257
- <span
1258
- className="chakra-radio__label css-1y8kf23"
1259
- onMouseDown={[Function]}
1260
- onTouchStart={[Function]}
1322
+ <label
1323
+ className="chakra-radio css-13p0l12"
1261
1324
  >
1262
- Radio 2
1263
- </span>
1264
- </label>
1265
- <label
1266
- className="chakra-radio css-13p0l12"
1267
- >
1268
- <input
1269
- checked={false}
1270
- className="chakra-radio__input"
1271
- disabled={false}
1272
- id="radio-3"
1273
- name="chakra"
1274
- onBlur={[Function]}
1275
- onChange={[Function]}
1276
- onFocus={[Function]}
1277
- onKeyDown={[Function]}
1278
- onKeyUp={[Function]}
1279
- required={false}
1280
- style={
1281
- Object {
1282
- "border": "0px",
1283
- "clip": "rect(0px, 0px, 0px, 0px)",
1284
- "height": "1px",
1285
- "margin": "-1px",
1286
- "overflow": "hidden",
1287
- "padding": "0px",
1288
- "position": "absolute",
1289
- "whiteSpace": "nowrap",
1290
- "width": "1px",
1325
+ <input
1326
+ checked={false}
1327
+ className="chakra-radio__input"
1328
+ disabled={false}
1329
+ id="radio-2"
1330
+ name="chakra"
1331
+ onBlur={[Function]}
1332
+ onChange={[Function]}
1333
+ onFocus={[Function]}
1334
+ onKeyDown={[Function]}
1335
+ onKeyUp={[Function]}
1336
+ required={false}
1337
+ style={
1338
+ Object {
1339
+ "border": "0px",
1340
+ "clip": "rect(0px, 0px, 0px, 0px)",
1341
+ "height": "1px",
1342
+ "margin": "-1px",
1343
+ "overflow": "hidden",
1344
+ "padding": "0px",
1345
+ "position": "absolute",
1346
+ "whiteSpace": "nowrap",
1347
+ "width": "1px",
1348
+ }
1291
1349
  }
1292
- }
1293
- type="radio"
1294
- value="3"
1295
- />
1296
- <span
1297
- aria-hidden={true}
1298
- className="css-14wybg9"
1299
- onMouseDown={[Function]}
1300
- onMouseEnter={[Function]}
1301
- onMouseLeave={[Function]}
1302
- onMouseUp={[Function]}
1303
- />
1304
- <span
1305
- className="chakra-radio__label css-1y8kf23"
1306
- onMouseDown={[Function]}
1307
- onTouchStart={[Function]}
1350
+ type="radio"
1351
+ value="2"
1352
+ />
1353
+ <span
1354
+ aria-hidden={true}
1355
+ className="css-14wybg9"
1356
+ onMouseDown={[Function]}
1357
+ onMouseEnter={[Function]}
1358
+ onMouseLeave={[Function]}
1359
+ onMouseUp={[Function]}
1360
+ />
1361
+ <span
1362
+ className="chakra-radio__label css-1y8kf23"
1363
+ onMouseDown={[Function]}
1364
+ onTouchStart={[Function]}
1365
+ >
1366
+ Radio 2
1367
+ </span>
1368
+ </label>
1369
+ </div>
1370
+ <div
1371
+ className="css-1xdhyk6"
1372
+ id="radio-3-wrapper"
1373
+ >
1374
+ <label
1375
+ className="chakra-radio css-13p0l12"
1308
1376
  >
1309
- Radio 3
1310
- </span>
1311
- </label>
1377
+ <input
1378
+ checked={false}
1379
+ className="chakra-radio__input"
1380
+ disabled={false}
1381
+ id="radio-3"
1382
+ name="chakra"
1383
+ onBlur={[Function]}
1384
+ onChange={[Function]}
1385
+ onFocus={[Function]}
1386
+ onKeyDown={[Function]}
1387
+ onKeyUp={[Function]}
1388
+ required={false}
1389
+ style={
1390
+ Object {
1391
+ "border": "0px",
1392
+ "clip": "rect(0px, 0px, 0px, 0px)",
1393
+ "height": "1px",
1394
+ "margin": "-1px",
1395
+ "overflow": "hidden",
1396
+ "padding": "0px",
1397
+ "position": "absolute",
1398
+ "whiteSpace": "nowrap",
1399
+ "width": "1px",
1400
+ }
1401
+ }
1402
+ type="radio"
1403
+ value="3"
1404
+ />
1405
+ <span
1406
+ aria-hidden={true}
1407
+ className="css-14wybg9"
1408
+ onMouseDown={[Function]}
1409
+ onMouseEnter={[Function]}
1410
+ onMouseLeave={[Function]}
1411
+ onMouseUp={[Function]}
1412
+ />
1413
+ <span
1414
+ className="chakra-radio__label css-1y8kf23"
1415
+ onMouseDown={[Function]}
1416
+ onTouchStart={[Function]}
1417
+ >
1418
+ Radio 3
1419
+ </span>
1420
+ </label>
1421
+ </div>
1312
1422
  </div>
1313
1423
  </div>
1314
1424
  </fieldset>
@@ -1330,100 +1440,110 @@ exports[`Radio Button renders the UI snapshot correctly 12`] = `
1330
1440
  <div
1331
1441
  className="chakra-stack css-1wdv1uh"
1332
1442
  >
1333
- <label
1334
- className="chakra-radio css-13p0l12"
1443
+ <div
1444
+ className="css-1xdhyk6"
1445
+ id="radio-2-wrapper"
1335
1446
  >
1336
- <input
1337
- checked={false}
1338
- className="chakra-radio__input"
1339
- disabled={false}
1340
- id="radio-2"
1341
- name="props"
1342
- onBlur={[Function]}
1343
- onChange={[Function]}
1344
- onFocus={[Function]}
1345
- onKeyDown={[Function]}
1346
- onKeyUp={[Function]}
1347
- required={false}
1348
- style={
1349
- Object {
1350
- "border": "0px",
1351
- "clip": "rect(0px, 0px, 0px, 0px)",
1352
- "height": "1px",
1353
- "margin": "-1px",
1354
- "overflow": "hidden",
1355
- "padding": "0px",
1356
- "position": "absolute",
1357
- "whiteSpace": "nowrap",
1358
- "width": "1px",
1359
- }
1360
- }
1361
- type="radio"
1362
- value="2"
1363
- />
1364
- <span
1365
- aria-hidden={true}
1366
- className="css-14wybg9"
1367
- onMouseDown={[Function]}
1368
- onMouseEnter={[Function]}
1369
- onMouseLeave={[Function]}
1370
- onMouseUp={[Function]}
1371
- />
1372
- <span
1373
- className="chakra-radio__label css-1y8kf23"
1374
- onMouseDown={[Function]}
1375
- onTouchStart={[Function]}
1447
+ <label
1448
+ className="chakra-radio css-13p0l12"
1376
1449
  >
1377
- Radio 2
1378
- </span>
1379
- </label>
1380
- <label
1381
- className="chakra-radio css-13p0l12"
1382
- >
1383
- <input
1384
- checked={false}
1385
- className="chakra-radio__input"
1386
- disabled={false}
1387
- id="radio-3"
1388
- name="props"
1389
- onBlur={[Function]}
1390
- onChange={[Function]}
1391
- onFocus={[Function]}
1392
- onKeyDown={[Function]}
1393
- onKeyUp={[Function]}
1394
- required={false}
1395
- style={
1396
- Object {
1397
- "border": "0px",
1398
- "clip": "rect(0px, 0px, 0px, 0px)",
1399
- "height": "1px",
1400
- "margin": "-1px",
1401
- "overflow": "hidden",
1402
- "padding": "0px",
1403
- "position": "absolute",
1404
- "whiteSpace": "nowrap",
1405
- "width": "1px",
1450
+ <input
1451
+ checked={false}
1452
+ className="chakra-radio__input"
1453
+ disabled={false}
1454
+ id="radio-2"
1455
+ name="props"
1456
+ onBlur={[Function]}
1457
+ onChange={[Function]}
1458
+ onFocus={[Function]}
1459
+ onKeyDown={[Function]}
1460
+ onKeyUp={[Function]}
1461
+ required={false}
1462
+ style={
1463
+ Object {
1464
+ "border": "0px",
1465
+ "clip": "rect(0px, 0px, 0px, 0px)",
1466
+ "height": "1px",
1467
+ "margin": "-1px",
1468
+ "overflow": "hidden",
1469
+ "padding": "0px",
1470
+ "position": "absolute",
1471
+ "whiteSpace": "nowrap",
1472
+ "width": "1px",
1473
+ }
1406
1474
  }
1407
- }
1408
- type="radio"
1409
- value="3"
1410
- />
1411
- <span
1412
- aria-hidden={true}
1413
- className="css-14wybg9"
1414
- onMouseDown={[Function]}
1415
- onMouseEnter={[Function]}
1416
- onMouseLeave={[Function]}
1417
- onMouseUp={[Function]}
1418
- />
1419
- <span
1420
- className="chakra-radio__label css-1y8kf23"
1421
- onMouseDown={[Function]}
1422
- onTouchStart={[Function]}
1475
+ type="radio"
1476
+ value="2"
1477
+ />
1478
+ <span
1479
+ aria-hidden={true}
1480
+ className="css-14wybg9"
1481
+ onMouseDown={[Function]}
1482
+ onMouseEnter={[Function]}
1483
+ onMouseLeave={[Function]}
1484
+ onMouseUp={[Function]}
1485
+ />
1486
+ <span
1487
+ className="chakra-radio__label css-1y8kf23"
1488
+ onMouseDown={[Function]}
1489
+ onTouchStart={[Function]}
1490
+ >
1491
+ Radio 2
1492
+ </span>
1493
+ </label>
1494
+ </div>
1495
+ <div
1496
+ className="css-1xdhyk6"
1497
+ id="radio-3-wrapper"
1498
+ >
1499
+ <label
1500
+ className="chakra-radio css-13p0l12"
1423
1501
  >
1424
- Radio 3
1425
- </span>
1426
- </label>
1502
+ <input
1503
+ checked={false}
1504
+ className="chakra-radio__input"
1505
+ disabled={false}
1506
+ id="radio-3"
1507
+ name="props"
1508
+ onBlur={[Function]}
1509
+ onChange={[Function]}
1510
+ onFocus={[Function]}
1511
+ onKeyDown={[Function]}
1512
+ onKeyUp={[Function]}
1513
+ required={false}
1514
+ style={
1515
+ Object {
1516
+ "border": "0px",
1517
+ "clip": "rect(0px, 0px, 0px, 0px)",
1518
+ "height": "1px",
1519
+ "margin": "-1px",
1520
+ "overflow": "hidden",
1521
+ "padding": "0px",
1522
+ "position": "absolute",
1523
+ "whiteSpace": "nowrap",
1524
+ "width": "1px",
1525
+ }
1526
+ }
1527
+ type="radio"
1528
+ value="3"
1529
+ />
1530
+ <span
1531
+ aria-hidden={true}
1532
+ className="css-14wybg9"
1533
+ onMouseDown={[Function]}
1534
+ onMouseEnter={[Function]}
1535
+ onMouseLeave={[Function]}
1536
+ onMouseUp={[Function]}
1537
+ />
1538
+ <span
1539
+ className="chakra-radio__label css-1y8kf23"
1540
+ onMouseDown={[Function]}
1541
+ onTouchStart={[Function]}
1542
+ >
1543
+ Radio 3
1544
+ </span>
1545
+ </label>
1546
+ </div>
1427
1547
  </div>
1428
1548
  </div>
1429
1549
  </fieldset>