@khanacademy/perseus 0.4.3 → 1.1.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 (71) hide show
  1. package/.eslintrc.js +6 -1
  2. package/CHANGELOG.md +45 -0
  3. package/dist/es/index.css +15 -8
  4. package/dist/es/index.js +1214 -1404
  5. package/dist/es/index.js.map +1 -1
  6. package/dist/index.css +15 -8
  7. package/dist/index.js +1217 -1411
  8. package/dist/index.js.map +1 -1
  9. package/dist/strings.js +0 -4
  10. package/package.json +9 -8
  11. package/src/components/number-input.jsx +2 -2
  12. package/src/components/simple-keypad-input.jsx +18 -21
  13. package/src/index.js +1 -1
  14. package/src/multi-items/__tests__/__snapshots__/multi-renderer_test.js.snap +426 -135
  15. package/src/multi-items/__tests__/multi-renderer_test.js +9 -9
  16. package/src/perseus-api.jsx +10 -36
  17. package/src/perseus-types.js +18 -145
  18. package/src/styles/constants.js +0 -2
  19. package/src/styles/perseus-renderer.less +8 -2
  20. package/src/styles/variables.less +0 -2
  21. package/src/styles/widgets/passage.less +9 -5
  22. package/src/types.js +18 -35
  23. package/src/util/answer-types.js +2 -3
  24. package/src/util/math.js +3 -10
  25. package/src/util.js +0 -6
  26. package/src/version.js +1 -1
  27. package/src/widgets/__stories__/numeric-input.stories.jsx +43 -2
  28. package/src/widgets/__testdata__/base-radio_testdata.js +22 -0
  29. package/src/widgets/__tests__/__snapshots__/definition_test.js.snap +4 -4
  30. package/src/widgets/__tests__/__snapshots__/group_test.jsx.snap +291 -130
  31. package/src/widgets/__tests__/__snapshots__/radio_test.jsx.snap +3293 -1415
  32. package/src/widgets/__tests__/group_test.jsx +4 -4
  33. package/src/widgets/__tests__/numeric-input_test.jsx +12 -8
  34. package/src/widgets/__tests__/passage_test.jsx +81 -0
  35. package/src/widgets/__tests__/radio/base-radio_test.jsx +291 -41
  36. package/src/widgets/__tests__/radio/choice-icon_test.jsx +67 -0
  37. package/src/widgets/__tests__/radio/choice_test.jsx +302 -0
  38. package/src/widgets/__tests__/radio/focus-ring_test.jsx +23 -0
  39. package/src/widgets/__tests__/radio/option-status_test.jsx +65 -0
  40. package/src/widgets/__tests__/radio_test.jsx +39 -15
  41. package/src/widgets/definition.jsx +1 -1
  42. package/src/widgets/group.jsx +84 -102
  43. package/src/widgets/input-number.jsx +6 -1
  44. package/src/widgets/numeric-input.jsx +87 -80
  45. package/src/widgets/passage/__tests__/passage-markdown_test.jsx +0 -9
  46. package/src/widgets/passage/get-line-height-for-node.js +4 -5
  47. package/src/widgets/passage/passage-markdown.jsx +176 -120
  48. package/src/widgets/passage.jsx +48 -46
  49. package/src/widgets/radio/__stories__/base-radio.stories.jsx +164 -17
  50. package/src/widgets/radio/__stories__/choice-icon.stories.jsx +202 -111
  51. package/src/widgets/radio/__stories__/choice-none-above.stories.jsx +21 -6
  52. package/src/widgets/radio/__stories__/choice.stories.jsx +138 -0
  53. package/src/widgets/radio/__stories__/focus-ring.stories.jsx +29 -23
  54. package/src/widgets/radio/__stories__/option-status.stories.jsx +93 -99
  55. package/src/widgets/radio/base-radio.jsx +485 -556
  56. package/src/widgets/radio/choice-a11y-text.js +62 -0
  57. package/src/widgets/radio/choice-icon/choice-icon.jsx +87 -0
  58. package/src/widgets/radio/choice-icon/cross-out-line.jsx +55 -0
  59. package/src/widgets/radio/choice-icon/library-choice-icon.jsx +214 -0
  60. package/src/widgets/radio/choice-icon/sat-choice-icon.jsx +120 -0
  61. package/src/widgets/radio/choice-icon/shared-styles.js +17 -0
  62. package/src/widgets/radio/choice-none-above.jsx +49 -40
  63. package/src/widgets/radio/choice.jsx +319 -347
  64. package/src/widgets/radio/choice.jsx.fixture.js +0 -18
  65. package/src/widgets/radio/focus-ring.jsx +29 -22
  66. package/src/widgets/radio/option-status.jsx +58 -36
  67. package/src/widgets/radio/widget.jsx +181 -136
  68. package/src/widgets/radio.jsx +16 -17
  69. package/src/widgets/radio/__stories__/cross-out-button.stories.jsx +0 -64
  70. package/src/widgets/radio/choice-icon.jsx +0 -469
  71. package/src/widgets/radio/cross-out-button.jsx +0 -134
@@ -123,6 +123,7 @@ exports[`multi-item renderer should snapshot: initial render 1`] = `
123
123
  Choose 1 answer:
124
124
  </legend>
125
125
  <div
126
+ aria-hidden="true"
126
127
  class="instructions instructions_125m8j1"
127
128
  >
128
129
  Choose 1 answer:
@@ -140,45 +141,103 @@ exports[`multi-item renderer should snapshot: initial render 1`] = `
140
141
  <div
141
142
  style="display: flex; flex-direction: row; width: 100%; opacity: 1;"
142
143
  >
143
- <button
144
- aria-checked="false"
145
- aria-disabled="false"
146
- aria-label="Select Choice A"
147
- class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-inlineStyles_bc4egv description description_psmgei"
148
- role="checkbox"
149
- tabindex="0"
150
- type="button"
144
+ <div
145
+ class="perseus-sr-only"
151
146
  >
152
- <div
153
- style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
147
+ <input
148
+ id="choice-0"
149
+ tabindex="-1"
150
+ type="radio"
151
+ />
152
+ <label
153
+ for="choice-0"
154
154
  >
155
- <span>
155
+ (Choice A)
156
+  
157
+ <span
158
+ class="mock-KatexProvider"
159
+ >
156
160
  <div
157
- class="iconWrapper_17y0hv9"
161
+ class="perseus-renderer perseus-renderer-responsive"
158
162
  >
159
- <span
160
- class="ring_en36io"
161
- style="border-color: transparent;"
163
+ <div
164
+ class="paragraph"
165
+ data-perseus-paragraph-index="0"
162
166
  >
163
167
  <div
164
- class="libraryCircle_1ytyy5d"
165
- data-is-radio-icon="true"
166
- style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64);"
168
+ class="paragraph"
167
169
  >
168
- <div
169
- class="perseus-sr-only"
170
+ A triangle with side lengths of
171
+ <span
172
+ style="white-space: nowrap;"
170
173
  >
171
- (Choice A)
172
- </div>
173
- <div
174
- aria-hidden="true"
174
+ <span />
175
+ <span
176
+ class="mock-TeX"
177
+ >
178
+ 3
179
+ </span>
180
+ <span />
181
+ </span>
182
+ ,
183
+ <span
184
+ style="white-space: nowrap;"
175
185
  >
176
- A
177
- </div>
186
+ <span />
187
+ <span
188
+ class="mock-TeX"
189
+ >
190
+ 4
191
+ </span>
192
+ <span />
193
+ </span>
194
+ , and
195
+ <span
196
+ style="white-space: nowrap;"
197
+ >
198
+ <span />
199
+ <span
200
+ class="mock-TeX"
201
+ >
202
+ 5
203
+ </span>
204
+ <span />
205
+ </span>
178
206
  </div>
179
- </span>
207
+ </div>
180
208
  </div>
181
209
  </span>
210
+ </label>
211
+ </div>
212
+ <button
213
+ aria-disabled="false"
214
+ aria-hidden="true"
215
+ aria-label=""
216
+ class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-inlineStyles_bc4egv description description_psmgei"
217
+ tabindex="0"
218
+ type="button"
219
+ >
220
+ <div
221
+ style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
222
+ >
223
+ <div
224
+ class="iconWrapper_17y0hv9"
225
+ >
226
+ <span
227
+ class="ring_ya75gi"
228
+ data-test-id="focus-ring"
229
+ style="border-color: transparent; border-radius: 50%;"
230
+ >
231
+ <div
232
+ class="circle_1tys2th"
233
+ data-is-radio-icon="true"
234
+ data-test-id="choice-icon__library-choice-icon"
235
+ style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
236
+ >
237
+ A
238
+ </div>
239
+ </span>
240
+ </div>
182
241
  <span
183
242
  style="padding-left: 12px; text-align: left; flex: 1; padding-top: 4px;"
184
243
  >
@@ -253,45 +312,103 @@ exports[`multi-item renderer should snapshot: initial render 1`] = `
253
312
  <div
254
313
  style="display: flex; flex-direction: row; width: 100%; opacity: 1;"
255
314
  >
256
- <button
257
- aria-checked="false"
258
- aria-disabled="false"
259
- aria-label="Select Choice B"
260
- class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-inlineStyles_bc4egv description description_psmgei"
261
- role="checkbox"
262
- tabindex="0"
263
- type="button"
315
+ <div
316
+ class="perseus-sr-only"
264
317
  >
265
- <div
266
- style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
318
+ <input
319
+ id="choice-1"
320
+ tabindex="-1"
321
+ type="radio"
322
+ />
323
+ <label
324
+ for="choice-1"
267
325
  >
268
- <span>
326
+ (Choice B)
327
+  
328
+ <span
329
+ class="mock-KatexProvider"
330
+ >
269
331
  <div
270
- class="iconWrapper_17y0hv9"
332
+ class="perseus-renderer perseus-renderer-responsive"
271
333
  >
272
- <span
273
- class="ring_en36io"
274
- style="border-color: transparent;"
334
+ <div
335
+ class="paragraph"
336
+ data-perseus-paragraph-index="0"
275
337
  >
276
338
  <div
277
- class="libraryCircle_1ytyy5d"
278
- data-is-radio-icon="true"
279
- style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64);"
339
+ class="paragraph"
280
340
  >
281
- <div
282
- class="perseus-sr-only"
341
+ A triangle with side lengths of
342
+ <span
343
+ style="white-space: nowrap;"
283
344
  >
284
- (Choice B)
285
- </div>
286
- <div
287
- aria-hidden="true"
345
+ <span />
346
+ <span
347
+ class="mock-TeX"
348
+ >
349
+ 6
350
+ </span>
351
+ <span />
352
+ </span>
353
+ ,
354
+ <span
355
+ style="white-space: nowrap;"
288
356
  >
289
- B
290
- </div>
357
+ <span />
358
+ <span
359
+ class="mock-TeX"
360
+ >
361
+ 7
362
+ </span>
363
+ <span />
364
+ </span>
365
+ , and
366
+ <span
367
+ style="white-space: nowrap;"
368
+ >
369
+ <span />
370
+ <span
371
+ class="mock-TeX"
372
+ >
373
+ 10
374
+ </span>
375
+ <span />
376
+ </span>
291
377
  </div>
292
- </span>
378
+ </div>
293
379
  </div>
294
380
  </span>
381
+ </label>
382
+ </div>
383
+ <button
384
+ aria-disabled="false"
385
+ aria-hidden="true"
386
+ aria-label=""
387
+ class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-inlineStyles_bc4egv description description_psmgei"
388
+ tabindex="0"
389
+ type="button"
390
+ >
391
+ <div
392
+ style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
393
+ >
394
+ <div
395
+ class="iconWrapper_17y0hv9"
396
+ >
397
+ <span
398
+ class="ring_ya75gi"
399
+ data-test-id="focus-ring"
400
+ style="border-color: transparent; border-radius: 50%;"
401
+ >
402
+ <div
403
+ class="circle_1tys2th"
404
+ data-is-radio-icon="true"
405
+ data-test-id="choice-icon__library-choice-icon"
406
+ style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
407
+ >
408
+ B
409
+ </div>
410
+ </span>
411
+ </div>
295
412
  <span
296
413
  style="padding-left: 12px; text-align: left; flex: 1; padding-top: 4px;"
297
414
  >
@@ -366,45 +483,103 @@ exports[`multi-item renderer should snapshot: initial render 1`] = `
366
483
  <div
367
484
  style="display: flex; flex-direction: row; width: 100%; opacity: 1;"
368
485
  >
369
- <button
370
- aria-checked="false"
371
- aria-disabled="false"
372
- aria-label="Select Choice C"
373
- class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-inlineStyles_bc4egv description description_psmgei"
374
- role="checkbox"
375
- tabindex="0"
376
- type="button"
486
+ <div
487
+ class="perseus-sr-only"
377
488
  >
378
- <div
379
- style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
489
+ <input
490
+ id="choice-2"
491
+ tabindex="-1"
492
+ type="radio"
493
+ />
494
+ <label
495
+ for="choice-2"
380
496
  >
381
- <span>
497
+ (Choice C)
498
+  
499
+ <span
500
+ class="mock-KatexProvider"
501
+ >
382
502
  <div
383
- class="iconWrapper_17y0hv9"
503
+ class="perseus-renderer perseus-renderer-responsive"
384
504
  >
385
- <span
386
- class="ring_en36io"
387
- style="border-color: transparent;"
505
+ <div
506
+ class="paragraph"
507
+ data-perseus-paragraph-index="0"
388
508
  >
389
509
  <div
390
- class="libraryCircle_1ytyy5d"
391
- data-is-radio-icon="true"
392
- style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64);"
510
+ class="paragraph"
393
511
  >
394
- <div
395
- class="perseus-sr-only"
512
+ A triangle with side lengths of
513
+ <span
514
+ style="white-space: nowrap;"
396
515
  >
397
- (Choice C)
398
- </div>
399
- <div
400
- aria-hidden="true"
516
+ <span />
517
+ <span
518
+ class="mock-TeX"
519
+ >
520
+ 10
521
+ </span>
522
+ <span />
523
+ </span>
524
+ ,
525
+ <span
526
+ style="white-space: nowrap;"
401
527
  >
402
- C
403
- </div>
528
+ <span />
529
+ <span
530
+ class="mock-TeX"
531
+ >
532
+ 12
533
+ </span>
534
+ <span />
535
+ </span>
536
+ , and
537
+ <span
538
+ style="white-space: nowrap;"
539
+ >
540
+ <span />
541
+ <span
542
+ class="mock-TeX"
543
+ >
544
+ 18
545
+ </span>
546
+ <span />
547
+ </span>
404
548
  </div>
405
- </span>
549
+ </div>
406
550
  </div>
407
551
  </span>
552
+ </label>
553
+ </div>
554
+ <button
555
+ aria-disabled="false"
556
+ aria-hidden="true"
557
+ aria-label=""
558
+ class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-inlineStyles_bc4egv description description_psmgei"
559
+ tabindex="0"
560
+ type="button"
561
+ >
562
+ <div
563
+ style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
564
+ >
565
+ <div
566
+ class="iconWrapper_17y0hv9"
567
+ >
568
+ <span
569
+ class="ring_ya75gi"
570
+ data-test-id="focus-ring"
571
+ style="border-color: transparent; border-radius: 50%;"
572
+ >
573
+ <div
574
+ class="circle_1tys2th"
575
+ data-is-radio-icon="true"
576
+ data-test-id="choice-icon__library-choice-icon"
577
+ style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
578
+ >
579
+ C
580
+ </div>
581
+ </span>
582
+ </div>
408
583
  <span
409
584
  style="padding-left: 12px; text-align: left; flex: 1; padding-top: 4px;"
410
585
  >
@@ -479,45 +654,103 @@ exports[`multi-item renderer should snapshot: initial render 1`] = `
479
654
  <div
480
655
  style="display: flex; flex-direction: row; width: 100%; opacity: 1;"
481
656
  >
482
- <button
483
- aria-checked="false"
484
- aria-disabled="false"
485
- aria-label="Select Choice D"
486
- class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-inlineStyles_bc4egv description description_psmgei"
487
- role="checkbox"
488
- tabindex="0"
489
- type="button"
657
+ <div
658
+ class="perseus-sr-only"
490
659
  >
491
- <div
492
- style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
660
+ <input
661
+ id="choice-3"
662
+ tabindex="-1"
663
+ type="radio"
664
+ />
665
+ <label
666
+ for="choice-3"
493
667
  >
494
- <span>
668
+ (Choice D)
669
+  
670
+ <span
671
+ class="mock-KatexProvider"
672
+ >
495
673
  <div
496
- class="iconWrapper_17y0hv9"
674
+ class="perseus-renderer perseus-renderer-responsive"
497
675
  >
498
- <span
499
- class="ring_en36io"
500
- style="border-color: transparent;"
676
+ <div
677
+ class="paragraph"
678
+ data-perseus-paragraph-index="0"
501
679
  >
502
680
  <div
503
- class="libraryCircle_1ytyy5d"
504
- data-is-radio-icon="true"
505
- style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64);"
681
+ class="paragraph"
506
682
  >
507
- <div
508
- class="perseus-sr-only"
683
+ A triangle with side lengths of
684
+ <span
685
+ style="white-space: nowrap;"
509
686
  >
510
- (Choice D)
511
- </div>
512
- <div
513
- aria-hidden="true"
687
+ <span />
688
+ <span
689
+ class="mock-TeX"
690
+ >
691
+ 12
692
+ </span>
693
+ <span />
694
+ </span>
695
+ ,
696
+ <span
697
+ style="white-space: nowrap;"
514
698
  >
515
- D
516
- </div>
699
+ <span />
700
+ <span
701
+ class="mock-TeX"
702
+ >
703
+ 14
704
+ </span>
705
+ <span />
706
+ </span>
707
+ , and
708
+ <span
709
+ style="white-space: nowrap;"
710
+ >
711
+ <span />
712
+ <span
713
+ class="mock-TeX"
714
+ >
715
+ 20
716
+ </span>
717
+ <span />
718
+ </span>
517
719
  </div>
518
- </span>
720
+ </div>
519
721
  </div>
520
722
  </span>
723
+ </label>
724
+ </div>
725
+ <button
726
+ aria-disabled="false"
727
+ aria-hidden="true"
728
+ aria-label=""
729
+ class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-inlineStyles_bc4egv description description_psmgei"
730
+ tabindex="0"
731
+ type="button"
732
+ >
733
+ <div
734
+ style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
735
+ >
736
+ <div
737
+ class="iconWrapper_17y0hv9"
738
+ >
739
+ <span
740
+ class="ring_ya75gi"
741
+ data-test-id="focus-ring"
742
+ style="border-color: transparent; border-radius: 50%;"
743
+ >
744
+ <div
745
+ class="circle_1tys2th"
746
+ data-is-radio-icon="true"
747
+ data-test-id="choice-icon__library-choice-icon"
748
+ style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
749
+ >
750
+ D
751
+ </div>
752
+ </span>
753
+ </div>
521
754
  <span
522
755
  style="padding-left: 12px; text-align: left; flex: 1; padding-top: 4px;"
523
756
  >
@@ -592,45 +825,103 @@ exports[`multi-item renderer should snapshot: initial render 1`] = `
592
825
  <div
593
826
  style="display: flex; flex-direction: row; width: 100%; opacity: 1;"
594
827
  >
595
- <button
596
- aria-checked="false"
597
- aria-disabled="false"
598
- aria-label="Select Choice E"
599
- class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-inlineStyles_bc4egv description description_psmgei"
600
- role="checkbox"
601
- tabindex="0"
602
- type="button"
828
+ <div
829
+ class="perseus-sr-only"
603
830
  >
604
- <div
605
- style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
831
+ <input
832
+ id="choice-4"
833
+ tabindex="-1"
834
+ type="radio"
835
+ />
836
+ <label
837
+ for="choice-4"
606
838
  >
607
- <span>
839
+ (Choice E)
840
+  
841
+ <span
842
+ class="mock-KatexProvider"
843
+ >
608
844
  <div
609
- class="iconWrapper_17y0hv9"
845
+ class="perseus-renderer perseus-renderer-responsive"
610
846
  >
611
- <span
612
- class="ring_en36io"
613
- style="border-color: transparent;"
847
+ <div
848
+ class="paragraph"
849
+ data-perseus-paragraph-index="0"
614
850
  >
615
851
  <div
616
- class="libraryCircle_1ytyy5d"
617
- data-is-radio-icon="true"
618
- style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64);"
852
+ class="paragraph"
619
853
  >
620
- <div
621
- class="perseus-sr-only"
854
+ A triangle with side lengths of
855
+ <span
856
+ style="white-space: nowrap;"
622
857
  >
623
- (Choice E)
624
- </div>
625
- <div
626
- aria-hidden="true"
858
+ <span />
859
+ <span
860
+ class="mock-TeX"
861
+ >
862
+ 24
863
+ </span>
864
+ <span />
865
+ </span>
866
+ ,
867
+ <span
868
+ style="white-space: nowrap;"
627
869
  >
628
- E
629
- </div>
870
+ <span />
871
+ <span
872
+ class="mock-TeX"
873
+ >
874
+ 28
875
+ </span>
876
+ <span />
877
+ </span>
878
+ , and
879
+ <span
880
+ style="white-space: nowrap;"
881
+ >
882
+ <span />
883
+ <span
884
+ class="mock-TeX"
885
+ >
886
+ 40
887
+ </span>
888
+ <span />
889
+ </span>
630
890
  </div>
631
- </span>
891
+ </div>
632
892
  </div>
633
893
  </span>
894
+ </label>
895
+ </div>
896
+ <button
897
+ aria-disabled="false"
898
+ aria-hidden="true"
899
+ aria-label=""
900
+ class="button_vr44p2-o_O-reset_152ygtm-o_O-link_13xlah4-o_O-inlineStyles_bc4egv description description_psmgei"
901
+ tabindex="0"
902
+ type="button"
903
+ >
904
+ <div
905
+ style="display: flex; flex-direction: row; justify-content: center; align-content: center; padding-top: 8px; padding-bottom: 8px;"
906
+ >
907
+ <div
908
+ class="iconWrapper_17y0hv9"
909
+ >
910
+ <span
911
+ class="ring_ya75gi"
912
+ data-test-id="focus-ring"
913
+ style="border-color: transparent; border-radius: 50%;"
914
+ >
915
+ <div
916
+ class="circle_1tys2th"
917
+ data-is-radio-icon="true"
918
+ data-test-id="choice-icon__library-choice-icon"
919
+ style="border-color: rgba(33,36,44,0.64); color: rgba(33, 36, 44, 0.64); border-radius: 24px;"
920
+ >
921
+ E
922
+ </div>
923
+ </span>
924
+ </div>
634
925
  <span
635
926
  style="padding-left: 12px; text-align: left; flex: 1; padding-top: 4px;"
636
927
  >