@khanacademy/perseus 6.4.4 → 6.5.0

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 (18) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/es/index.css +583 -367
  3. package/dist/es/index.js +5 -3
  4. package/dist/es/index.js.map +1 -1
  5. package/dist/index.css +583 -367
  6. package/dist/index.js +5 -3
  7. package/dist/index.js.map +1 -1
  8. package/package.json +2 -2
  9. package/src/__stories__/item-renderer.stories.tsx +5 -0
  10. package/src/__testdata__/item-renderer.testdata.ts +139 -0
  11. package/src/multi-items/__tests__/__snapshots__/multi-renderer.test.tsx.snap +8 -8
  12. package/src/styles/articles.less +24 -18
  13. package/src/styles/khan-exercise.css +577 -365
  14. package/src/widgets/__tests__/__snapshots__/group.test.tsx.snap +8 -8
  15. package/src/widgets/__tests__/__snapshots__/radio.test.ts.snap +49 -49
  16. package/src/widgets/radio/base-radio.tsx +2 -1
  17. package/src/widgets/radio/choice.tsx +1 -0
  18. package/tsconfig-build.tsbuildinfo +1 -1
package/src/widgets/__tests__/__snapshots__/group.test.tsx.snap CHANGED
@@ -105,10 +105,10 @@ exports[`group widget should snapshot: initial render 1`] = `
105
105
  class="perseus-widget-container widget-nohighlight widget-block"
106
106
  >
107
107
  <div
108
- class="responsiveContainer_vq37gq"
108
+ class="responsiveContainer_12z1v8o"
109
109
  >
110
110
  <fieldset
111
- class="perseus-widget-radio-fieldset responsiveFieldset_c0l5kf"
111
+ class="perseus-widget-radio-fieldset responsiveFieldset_le06t6"
112
112
  >
113
113
  <legend
114
114
  class="perseus-sr-only"
@@ -117,7 +117,7 @@ exports[`group widget should snapshot: initial render 1`] = `
117
117
  </legend>
118
118
  <div
119
119
  aria-hidden="true"
120
- class="instructions instructions_125m8j1"
120
+ class="instructions instructions_f9jkqj"
121
121
  >
122
122
  Choose 1 answer:
123
123
  </div>
@@ -133,7 +133,7 @@ exports[`group widget should snapshot: initial render 1`] = `
133
133
  style="flex-direction: column; color: rgb(33, 36, 44);"
134
134
  >
135
135
  <div
136
- style="display: flex; flex-direction: row; opacity: 1;"
136
+ style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
137
137
  >
138
138
  <div
139
139
  class="perseus-sr-only"
@@ -248,7 +248,7 @@ exports[`group widget should snapshot: initial render 1`] = `
248
248
  style="flex-direction: column; color: rgb(33, 36, 44);"
249
249
  >
250
250
  <div
251
- style="display: flex; flex-direction: row; opacity: 1;"
251
+ style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
252
252
  >
253
253
  <div
254
254
  class="perseus-sr-only"
@@ -363,7 +363,7 @@ exports[`group widget should snapshot: initial render 1`] = `
363
363
  style="flex-direction: column; color: rgb(33, 36, 44);"
364
364
  >
365
365
  <div
366
- style="display: flex; flex-direction: row; opacity: 1;"
366
+ style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
367
367
  >
368
368
  <div
369
369
  class="perseus-sr-only"
@@ -478,7 +478,7 @@ exports[`group widget should snapshot: initial render 1`] = `
478
478
  style="flex-direction: column; color: rgb(33, 36, 44);"
479
479
  >
480
480
  <div
481
- style="display: flex; flex-direction: row; opacity: 1;"
481
+ style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
482
482
  >
483
483
  <div
484
484
  class="perseus-sr-only"
@@ -593,7 +593,7 @@ exports[`group widget should snapshot: initial render 1`] = `
593
593
  style="flex-direction: column; color: rgb(33, 36, 44);"
594
594
  >
595
595
  <div
596
- style="display: flex; flex-direction: row; opacity: 1;"
596
+ style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
597
597
  >
598
598
  <div
599
599
  class="perseus-sr-only"
package/src/widgets/__tests__/__snapshots__/radio.test.ts.snap CHANGED
@@ -40,10 +40,10 @@ exports[`multi-choice question should snapshot the same when invalid: invalid st
40
40
  class="perseus-widget-container widget-nohighlight widget-block"
41
41
  >
42
42
  <div
43
- class="responsiveContainer_vq37gq"
43
+ class="responsiveContainer_12z1v8o"
44
44
  >
45
45
  <fieldset
46
- class="perseus-widget-radio-fieldset responsiveFieldset_c0l5kf"
46
+ class="perseus-widget-radio-fieldset responsiveFieldset_le06t6"
47
47
  >
48
48
  <legend
49
49
  class="perseus-sr-only"
@@ -52,7 +52,7 @@ exports[`multi-choice question should snapshot the same when invalid: invalid st
52
52
  </legend>
53
53
  <div
54
54
  aria-hidden="true"
55
- class="instructions instructions_125m8j1"
55
+ class="instructions instructions_f9jkqj"
56
56
  >
57
57
  Choose all answers that apply:
58
58
  </div>
@@ -68,7 +68,7 @@ exports[`multi-choice question should snapshot the same when invalid: invalid st
68
68
  style="flex-direction: column; color: rgb(33, 36, 44);"
69
69
  >
70
70
  <div
71
- style="display: flex; flex-direction: row; opacity: 1;"
71
+ style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
72
72
  >
73
73
  <div
74
74
  class="perseus-sr-only"
@@ -183,7 +183,7 @@ exports[`multi-choice question should snapshot the same when invalid: invalid st
183
183
  style="flex-direction: column; color: rgb(33, 36, 44);"
184
184
  >
185
185
  <div
186
- style="display: flex; flex-direction: row; opacity: 1;"
186
+ style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
187
187
  >
188
188
  <div
189
189
  class="perseus-sr-only"
@@ -298,7 +298,7 @@ exports[`multi-choice question should snapshot the same when invalid: invalid st
298
298
  style="flex-direction: column; color: rgb(33, 36, 44);"
299
299
  >
300
300
  <div
301
- style="display: flex; flex-direction: row; opacity: 1;"
301
+ style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
302
302
  >
303
303
  <div
304
304
  class="perseus-sr-only"
@@ -413,7 +413,7 @@ exports[`multi-choice question should snapshot the same when invalid: invalid st
413
413
  style="flex-direction: column; color: rgb(33, 36, 44);"
414
414
  >
415
415
  <div
416
- style="display: flex; flex-direction: row; opacity: 1;"
416
+ style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
417
417
  >
418
418
  <div
419
419
  class="perseus-sr-only"
@@ -600,10 +600,10 @@ exports[`single-choice question reviewMode: false should snapshot the same with
600
600
  class="perseus-widget-container widget-nohighlight widget-block"
601
601
  >
602
602
  <div
603
- class="responsiveContainer_vq37gq"
603
+ class="responsiveContainer_12z1v8o"
604
604
  >
605
605
  <fieldset
606
- class="perseus-widget-radio-fieldset responsiveFieldset_c0l5kf"
606
+ class="perseus-widget-radio-fieldset responsiveFieldset_le06t6"
607
607
  >
608
608
  <legend
609
609
  class="perseus-sr-only"
@@ -612,7 +612,7 @@ exports[`single-choice question reviewMode: false should snapshot the same with
612
612
  </legend>
613
613
  <div
614
614
  aria-hidden="true"
615
- class="instructions instructions_125m8j1"
615
+ class="instructions instructions_f9jkqj"
616
616
  >
617
617
  Choose 1 answer:
618
618
  </div>
@@ -628,7 +628,7 @@ exports[`single-choice question reviewMode: false should snapshot the same with
628
628
  style="flex-direction: column; color: rgb(33, 36, 44);"
629
629
  >
630
630
  <div
631
- style="display: flex; flex-direction: row; opacity: 1;"
631
+ style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
632
632
  >
633
633
  <div
634
634
  class="perseus-sr-only"
@@ -769,7 +769,7 @@ exports[`single-choice question reviewMode: false should snapshot the same with
769
769
  style="flex-direction: column; color: rgb(33, 36, 44);"
770
770
  >
771
771
  <div
772
- style="display: flex; flex-direction: row; opacity: 1;"
772
+ style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
773
773
  >
774
774
  <div
775
775
  class="perseus-sr-only"
@@ -884,7 +884,7 @@ exports[`single-choice question reviewMode: false should snapshot the same with
884
884
  style="flex-direction: column; color: rgb(33, 36, 44);"
885
885
  >
886
886
  <div
887
- style="display: flex; flex-direction: row; opacity: 1;"
887
+ style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
888
888
  >
889
889
  <div
890
890
  class="perseus-sr-only"
@@ -999,7 +999,7 @@ exports[`single-choice question reviewMode: false should snapshot the same with
999
999
  style="flex-direction: column; color: rgb(33, 36, 44);"
1000
1000
  >
1001
1001
  <div
1002
- style="display: flex; flex-direction: row; opacity: 1;"
1002
+ style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
1003
1003
  >
1004
1004
  <div
1005
1005
  class="perseus-sr-only"
@@ -1172,10 +1172,10 @@ exports[`single-choice question reviewMode: false should snapshot the same with
1172
1172
  class="perseus-widget-container widget-nohighlight widget-block"
1173
1173
  >
1174
1174
  <div
1175
- class="responsiveContainer_vq37gq"
1175
+ class="responsiveContainer_12z1v8o"
1176
1176
  >
1177
1177
  <fieldset
1178
- class="perseus-widget-radio-fieldset responsiveFieldset_c0l5kf"
1178
+ class="perseus-widget-radio-fieldset responsiveFieldset_le06t6"
1179
1179
  >
1180
1180
  <legend
1181
1181
  class="perseus-sr-only"
@@ -1184,7 +1184,7 @@ exports[`single-choice question reviewMode: false should snapshot the same with
1184
1184
  </legend>
1185
1185
  <div
1186
1186
  aria-hidden="true"
1187
- class="instructions instructions_125m8j1"
1187
+ class="instructions instructions_f9jkqj"
1188
1188
  >
1189
1189
  Choose 1 answer:
1190
1190
  </div>
@@ -1200,7 +1200,7 @@ exports[`single-choice question reviewMode: false should snapshot the same with
1200
1200
  style="flex-direction: column; color: rgb(33, 36, 44);"
1201
1201
  >
1202
1202
  <div
1203
- style="display: flex; flex-direction: row; opacity: 1;"
1203
+ style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
1204
1204
  >
1205
1205
  <div
1206
1206
  class="perseus-sr-only"
@@ -1341,7 +1341,7 @@ exports[`single-choice question reviewMode: false should snapshot the same with
1341
1341
  style="flex-direction: column; color: rgb(33, 36, 44);"
1342
1342
  >
1343
1343
  <div
1344
- style="display: flex; flex-direction: row; opacity: 1;"
1344
+ style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
1345
1345
  >
1346
1346
  <div
1347
1347
  class="perseus-sr-only"
@@ -1456,7 +1456,7 @@ exports[`single-choice question reviewMode: false should snapshot the same with
1456
1456
  style="flex-direction: column; color: rgb(33, 36, 44);"
1457
1457
  >
1458
1458
  <div
1459
- style="display: flex; flex-direction: row; opacity: 1;"
1459
+ style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
1460
1460
  >
1461
1461
  <div
1462
1462
  class="perseus-sr-only"
@@ -1571,7 +1571,7 @@ exports[`single-choice question reviewMode: false should snapshot the same with
1571
1571
  style="flex-direction: column; color: rgb(33, 36, 44);"
1572
1572
  >
1573
1573
  <div
1574
- style="display: flex; flex-direction: row; opacity: 1;"
1574
+ style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
1575
1575
  >
1576
1576
  <div
1577
1577
  class="perseus-sr-only"
@@ -1744,10 +1744,10 @@ exports[`single-choice question reviewMode: false should snapshot the same: firs
1744
1744
  class="perseus-widget-container widget-nohighlight widget-block"
1745
1745
  >
1746
1746
  <div
1747
- class="responsiveContainer_vq37gq"
1747
+ class="responsiveContainer_12z1v8o"
1748
1748
  >
1749
1749
  <fieldset
1750
- class="perseus-widget-radio-fieldset responsiveFieldset_c0l5kf"
1750
+ class="perseus-widget-radio-fieldset responsiveFieldset_le06t6"
1751
1751
  >
1752
1752
  <legend
1753
1753
  class="perseus-sr-only"
@@ -1756,7 +1756,7 @@ exports[`single-choice question reviewMode: false should snapshot the same: firs
1756
1756
  </legend>
1757
1757
  <div
1758
1758
  aria-hidden="true"
1759
- class="instructions instructions_125m8j1"
1759
+ class="instructions instructions_f9jkqj"
1760
1760
  >
1761
1761
  Choose 1 answer:
1762
1762
  </div>
@@ -1772,7 +1772,7 @@ exports[`single-choice question reviewMode: false should snapshot the same: firs
1772
1772
  style="flex-direction: column; color: rgb(33, 36, 44);"
1773
1773
  >
1774
1774
  <div
1775
- style="display: flex; flex-direction: row; opacity: 1;"
1775
+ style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
1776
1776
  >
1777
1777
  <div
1778
1778
  class="perseus-sr-only"
@@ -1913,7 +1913,7 @@ exports[`single-choice question reviewMode: false should snapshot the same: firs
1913
1913
  style="flex-direction: column; color: rgb(33, 36, 44);"
1914
1914
  >
1915
1915
  <div
1916
- style="display: flex; flex-direction: row; opacity: 1;"
1916
+ style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
1917
1917
  >
1918
1918
  <div
1919
1919
  class="perseus-sr-only"
@@ -2028,7 +2028,7 @@ exports[`single-choice question reviewMode: false should snapshot the same: firs
2028
2028
  style="flex-direction: column; color: rgb(33, 36, 44);"
2029
2029
  >
2030
2030
  <div
2031
- style="display: flex; flex-direction: row; opacity: 1;"
2031
+ style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
2032
2032
  >
2033
2033
  <div
2034
2034
  class="perseus-sr-only"
@@ -2143,7 +2143,7 @@ exports[`single-choice question reviewMode: false should snapshot the same: firs
2143
2143
  style="flex-direction: column; color: rgb(33, 36, 44);"
2144
2144
  >
2145
2145
  <div
2146
- style="display: flex; flex-direction: row; opacity: 1;"
2146
+ style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
2147
2147
  >
2148
2148
  <div
2149
2149
  class="perseus-sr-only"
@@ -2316,10 +2316,10 @@ exports[`single-choice question reviewMode: true should snapshot the same with c
2316
2316
  class="perseus-widget-container widget-nohighlight widget-block"
2317
2317
  >
2318
2318
  <div
2319
- class="responsiveContainer_vq37gq"
2319
+ class="responsiveContainer_12z1v8o"
2320
2320
  >
2321
2321
  <fieldset
2322
- class="perseus-widget-radio-fieldset responsiveFieldset_c0l5kf"
2322
+ class="perseus-widget-radio-fieldset responsiveFieldset_le06t6"
2323
2323
  >
2324
2324
  <legend
2325
2325
  class="perseus-sr-only"
@@ -2328,7 +2328,7 @@ exports[`single-choice question reviewMode: true should snapshot the same with c
2328
2328
  </legend>
2329
2329
  <div
2330
2330
  aria-hidden="true"
2331
- class="instructions instructions_125m8j1"
2331
+ class="instructions instructions_f9jkqj"
2332
2332
  >
2333
2333
  Choose 1 answer:
2334
2334
  </div>
@@ -2344,7 +2344,7 @@ exports[`single-choice question reviewMode: true should snapshot the same with c
2344
2344
  style="flex-direction: column; color: rgb(33, 36, 44);"
2345
2345
  >
2346
2346
  <div
2347
- style="display: flex; flex-direction: row; opacity: 1;"
2347
+ style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
2348
2348
  >
2349
2349
  <div
2350
2350
  class="perseus-sr-only"
@@ -2485,7 +2485,7 @@ exports[`single-choice question reviewMode: true should snapshot the same with c
2485
2485
  style="flex-direction: column; color: rgb(33, 36, 44);"
2486
2486
  >
2487
2487
  <div
2488
- style="display: flex; flex-direction: row; opacity: 1;"
2488
+ style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
2489
2489
  >
2490
2490
  <div
2491
2491
  class="perseus-sr-only"
@@ -2600,7 +2600,7 @@ exports[`single-choice question reviewMode: true should snapshot the same with c
2600
2600
  style="flex-direction: column; color: rgb(33, 36, 44);"
2601
2601
  >
2602
2602
  <div
2603
- style="display: flex; flex-direction: row; opacity: 1;"
2603
+ style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
2604
2604
  >
2605
2605
  <div
2606
2606
  class="perseus-sr-only"
@@ -2715,7 +2715,7 @@ exports[`single-choice question reviewMode: true should snapshot the same with c
2715
2715
  style="flex-direction: column; color: rgb(33, 36, 44);"
2716
2716
  >
2717
2717
  <div
2718
- style="display: flex; flex-direction: row; opacity: 1;"
2718
+ style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
2719
2719
  >
2720
2720
  <div
2721
2721
  class="perseus-sr-only"
@@ -2888,10 +2888,10 @@ exports[`single-choice question reviewMode: true should snapshot the same with i
2888
2888
  class="perseus-widget-container widget-nohighlight widget-block"
2889
2889
  >
2890
2890
  <div
2891
- class="responsiveContainer_vq37gq"
2891
+ class="responsiveContainer_12z1v8o"
2892
2892
  >
2893
2893
  <fieldset
2894
- class="perseus-widget-radio-fieldset responsiveFieldset_c0l5kf"
2894
+ class="perseus-widget-radio-fieldset responsiveFieldset_le06t6"
2895
2895
  >
2896
2896
  <legend
2897
2897
  class="perseus-sr-only"
@@ -2900,7 +2900,7 @@ exports[`single-choice question reviewMode: true should snapshot the same with i
2900
2900
  </legend>
2901
2901
  <div
2902
2902
  aria-hidden="true"
2903
- class="instructions instructions_125m8j1"
2903
+ class="instructions instructions_f9jkqj"
2904
2904
  >
2905
2905
  Choose 1 answer:
2906
2906
  </div>
@@ -2916,7 +2916,7 @@ exports[`single-choice question reviewMode: true should snapshot the same with i
2916
2916
  style="flex-direction: column; color: rgb(33, 36, 44);"
2917
2917
  >
2918
2918
  <div
2919
- style="display: flex; flex-direction: row; opacity: 1;"
2919
+ style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
2920
2920
  >
2921
2921
  <div
2922
2922
  class="perseus-sr-only"
@@ -3057,7 +3057,7 @@ exports[`single-choice question reviewMode: true should snapshot the same with i
3057
3057
  style="flex-direction: column; color: rgb(33, 36, 44);"
3058
3058
  >
3059
3059
  <div
3060
- style="display: flex; flex-direction: row; opacity: 1;"
3060
+ style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
3061
3061
  >
3062
3062
  <div
3063
3063
  class="perseus-sr-only"
@@ -3172,7 +3172,7 @@ exports[`single-choice question reviewMode: true should snapshot the same with i
3172
3172
  style="flex-direction: column; color: rgb(33, 36, 44);"
3173
3173
  >
3174
3174
  <div
3175
- style="display: flex; flex-direction: row; opacity: 1;"
3175
+ style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
3176
3176
  >
3177
3177
  <div
3178
3178
  class="perseus-sr-only"
@@ -3287,7 +3287,7 @@ exports[`single-choice question reviewMode: true should snapshot the same with i
3287
3287
  style="flex-direction: column; color: rgb(33, 36, 44);"
3288
3288
  >
3289
3289
  <div
3290
- style="display: flex; flex-direction: row; opacity: 1;"
3290
+ style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
3291
3291
  >
3292
3292
  <div
3293
3293
  class="perseus-sr-only"
@@ -3460,10 +3460,10 @@ exports[`single-choice question reviewMode: true should snapshot the same: first
3460
3460
  class="perseus-widget-container widget-nohighlight widget-block"
3461
3461
  >
3462
3462
  <div
3463
- class="responsiveContainer_vq37gq"
3463
+ class="responsiveContainer_12z1v8o"
3464
3464
  >
3465
3465
  <fieldset
3466
- class="perseus-widget-radio-fieldset responsiveFieldset_c0l5kf"
3466
+ class="perseus-widget-radio-fieldset responsiveFieldset_le06t6"
3467
3467
  >
3468
3468
  <legend
3469
3469
  class="perseus-sr-only"
@@ -3472,7 +3472,7 @@ exports[`single-choice question reviewMode: true should snapshot the same: first
3472
3472
  </legend>
3473
3473
  <div
3474
3474
  aria-hidden="true"
3475
- class="instructions instructions_125m8j1"
3475
+ class="instructions instructions_f9jkqj"
3476
3476
  >
3477
3477
  Choose 1 answer:
3478
3478
  </div>
@@ -3488,7 +3488,7 @@ exports[`single-choice question reviewMode: true should snapshot the same: first
3488
3488
  style="flex-direction: column; color: rgb(33, 36, 44);"
3489
3489
  >
3490
3490
  <div
3491
- style="display: flex; flex-direction: row; opacity: 1;"
3491
+ style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
3492
3492
  >
3493
3493
  <div
3494
3494
  class="perseus-sr-only"
@@ -3710,7 +3710,7 @@ exports[`single-choice question reviewMode: true should snapshot the same: first
3710
3710
  style="flex-direction: column; color: rgb(33, 36, 44);"
3711
3711
  >
3712
3712
  <div
3713
- style="display: flex; flex-direction: row; opacity: 1;"
3713
+ style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
3714
3714
  >
3715
3715
  <div
3716
3716
  class="perseus-sr-only"
@@ -3890,7 +3890,7 @@ exports[`single-choice question reviewMode: true should snapshot the same: first
3890
3890
  style="flex-direction: column; color: rgb(33, 36, 44);"
3891
3891
  >
3892
3892
  <div
3893
- style="display: flex; flex-direction: row; opacity: 1;"
3893
+ style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
3894
3894
  >
3895
3895
  <div
3896
3896
  class="perseus-sr-only"
@@ -4065,7 +4065,7 @@ exports[`single-choice question reviewMode: true should snapshot the same: first
4065
4065
  style="flex-direction: column; color: rgb(33, 36, 44);"
4066
4066
  >
4067
4067
  <div
4068
- style="display: flex; flex-direction: row; opacity: 1;"
4068
+ style="display: flex; flex-direction: row; opacity: 1; overflow: auto;"
4069
4069
  >
4070
4070
  <div
4071
4071
  class="perseus-sr-only"
package/src/widgets/radio/base-radio.tsx CHANGED
@@ -412,6 +412,7 @@ const styles: StyleDeclaration = StyleSheet.create({
412
412
  color: styleConstants.gray17,
413
413
  fontSize: 14,
414
414
  lineHeight: 1.25,
415
+ fontFamily: "inherit",
415
416
  fontStyle: "normal",
416
417
  fontWeight: "bold",
417
418
  marginBottom: 16,
@@ -496,13 +497,13 @@ const styles: StyleDeclaration = StyleSheet.create({
496
497
  responsiveContainer: {
497
498
  overflow: "auto",
498
499
  marginLeft: styleConstants.negativePhoneMargin,
499
- marginRight: styleConstants.negativePhoneMargin,
500
500
  paddingLeft: styleConstants.phoneMargin,
501
501
  // paddingRight is handled by responsiveFieldset
502
502
  },
503
503
 
504
504
  responsiveFieldset: {
505
505
  paddingRight: styleConstants.phoneMargin,
506
+ minWidth: "auto",
506
507
  },
507
508
  });
508
509
 
package/src/widgets/radio/choice.tsx CHANGED
@@ -160,6 +160,7 @@ const Choice = function (props: ChoicePropsWithForwardRef): React.ReactElement {
160
160
  display: "flex",
161
161
  flexDirection: "row",
162
162
  opacity: showDimmed ? 0.5 : 1.0,
163
+ overflow: "auto",
163
164
  }}
164
165
  >
165
166
  <div className="perseus-sr-only">