@pareto-engineering/design-system 2.0.0-alpha.59 → 2.0.0-alpha.60

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 (9) hide show
  1. package/dist/cjs/f/fields/ChoicesInput/ChoicesInput.js +1 -1
  2. package/dist/cjs/f/fields/ChoicesInput/common/Choice/Choice.js +5 -2
  3. package/dist/es/f/fields/ChoicesInput/ChoicesInput.js +1 -1
  4. package/dist/es/f/fields/ChoicesInput/common/Choice/Choice.js +5 -2
  5. package/package.json +1 -1
  6. package/src/__snapshots__/Storyshots.test.js.snap +531 -105
  7. package/src/stories/f/ChoicesInput.stories.jsx +36 -10
  8. package/src/ui/f/fields/ChoicesInput/ChoicesInput.jsx +1 -1
  9. package/src/ui/f/fields/ChoicesInput/common/Choice/Choice.jsx +10 -2
package/src/__snapshots__/Storyshots.test.js.snap CHANGED
@@ -2950,7 +2950,7 @@ exports[`Storyshots a/Timestamp Distance Format 1`] = `
2950
2950
  className="base timestamp"
2951
2951
  onClick={[Function]}
2952
2952
  >
2953
- 9 days ago
2953
+ 16 days ago
2954
2954
  </p>
2955
2955
  `;
2956
2956
 
@@ -10615,8 +10615,9 @@ exports[`Storyshots f/FormInput Base 1`] = `
10615
10615
  className="base choice"
10616
10616
  >
10617
10617
  <input
10618
+ checked={false}
10618
10619
  disabled={false}
10619
- id="undefined-red"
10620
+ id="colors-red"
10620
10621
  name="colors"
10621
10622
  onBlur={[Function]}
10622
10623
  onChange={[Function]}
@@ -10624,7 +10625,7 @@ exports[`Storyshots f/FormInput Base 1`] = `
10624
10625
  value="red"
10625
10626
  />
10626
10627
  <label
10627
- htmlFor="undefined-red"
10628
+ htmlFor="colors-red"
10628
10629
  >
10629
10630
  Color Red
10630
10631
  </label>
@@ -10633,8 +10634,9 @@ exports[`Storyshots f/FormInput Base 1`] = `
10633
10634
  className="base choice"
10634
10635
  >
10635
10636
  <input
10637
+ checked={false}
10636
10638
  disabled={false}
10637
- id="undefined-blue"
10639
+ id="colors-blue"
10638
10640
  name="colors"
10639
10641
  onBlur={[Function]}
10640
10642
  onChange={[Function]}
@@ -10642,7 +10644,7 @@ exports[`Storyshots f/FormInput Base 1`] = `
10642
10644
  value="blue"
10643
10645
  />
10644
10646
  <label
10645
- htmlFor="undefined-blue"
10647
+ htmlFor="colors-blue"
10646
10648
  >
10647
10649
  Color Blue
10648
10650
  </label>
@@ -10651,8 +10653,9 @@ exports[`Storyshots f/FormInput Base 1`] = `
10651
10653
  className="base choice"
10652
10654
  >
10653
10655
  <input
10656
+ checked={false}
10654
10657
  disabled={false}
10655
- id="undefined-green"
10658
+ id="colors-green"
10656
10659
  name="colors"
10657
10660
  onBlur={[Function]}
10658
10661
  onChange={[Function]}
@@ -10660,7 +10663,7 @@ exports[`Storyshots f/FormInput Base 1`] = `
10660
10663
  value="green"
10661
10664
  />
10662
10665
  <label
10663
- htmlFor="undefined-green"
10666
+ htmlFor="colors-green"
10664
10667
  >
10665
10668
  Color Green
10666
10669
  </label>
@@ -10812,8 +10815,9 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
10812
10815
  className="base choice"
10813
10816
  >
10814
10817
  <input
10818
+ checked={false}
10815
10819
  disabled={true}
10816
- id="undefined-red"
10820
+ id="colors-red"
10817
10821
  name="colors"
10818
10822
  onBlur={[Function]}
10819
10823
  onChange={[Function]}
@@ -10821,7 +10825,7 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
10821
10825
  value="red"
10822
10826
  />
10823
10827
  <label
10824
- htmlFor="undefined-red"
10828
+ htmlFor="colors-red"
10825
10829
  >
10826
10830
  Color Red
10827
10831
  </label>
@@ -10830,8 +10834,9 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
10830
10834
  className="base choice"
10831
10835
  >
10832
10836
  <input
10837
+ checked={false}
10833
10838
  disabled={true}
10834
- id="undefined-blue"
10839
+ id="colors-blue"
10835
10840
  name="colors"
10836
10841
  onBlur={[Function]}
10837
10842
  onChange={[Function]}
@@ -10839,7 +10844,7 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
10839
10844
  value="blue"
10840
10845
  />
10841
10846
  <label
10842
- htmlFor="undefined-blue"
10847
+ htmlFor="colors-blue"
10843
10848
  >
10844
10849
  Color Blue
10845
10850
  </label>
@@ -10848,8 +10853,9 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
10848
10853
  className="base choice"
10849
10854
  >
10850
10855
  <input
10856
+ checked={false}
10851
10857
  disabled={true}
10852
- id="undefined-green"
10858
+ id="colors-green"
10853
10859
  name="colors"
10854
10860
  onBlur={[Function]}
10855
10861
  onChange={[Function]}
@@ -10857,7 +10863,7 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
10857
10863
  value="green"
10858
10864
  />
10859
10865
  <label
10860
- htmlFor="undefined-green"
10866
+ htmlFor="colors-green"
10861
10867
  >
10862
10868
  Color Green
10863
10869
  </label>
@@ -11006,8 +11012,9 @@ exports[`Storyshots f/FormInput With Prefetched Query Select 1`] = `
11006
11012
  className="base choice"
11007
11013
  >
11008
11014
  <input
11015
+ checked={false}
11009
11016
  disabled={false}
11010
- id="undefined-red"
11017
+ id="colors-red"
11011
11018
  name="colors"
11012
11019
  onBlur={[Function]}
11013
11020
  onChange={[Function]}
@@ -11015,7 +11022,7 @@ exports[`Storyshots f/FormInput With Prefetched Query Select 1`] = `
11015
11022
  value="red"
11016
11023
  />
11017
11024
  <label
11018
- htmlFor="undefined-red"
11025
+ htmlFor="colors-red"
11019
11026
  >
11020
11027
  Color Red
11021
11028
  </label>
@@ -11024,8 +11031,9 @@ exports[`Storyshots f/FormInput With Prefetched Query Select 1`] = `
11024
11031
  className="base choice"
11025
11032
  >
11026
11033
  <input
11034
+ checked={false}
11027
11035
  disabled={false}
11028
- id="undefined-blue"
11036
+ id="colors-blue"
11029
11037
  name="colors"
11030
11038
  onBlur={[Function]}
11031
11039
  onChange={[Function]}
@@ -11033,7 +11041,7 @@ exports[`Storyshots f/FormInput With Prefetched Query Select 1`] = `
11033
11041
  value="blue"
11034
11042
  />
11035
11043
  <label
11036
- htmlFor="undefined-blue"
11044
+ htmlFor="colors-blue"
11037
11045
  >
11038
11046
  Color Blue
11039
11047
  </label>
@@ -11042,8 +11050,9 @@ exports[`Storyshots f/FormInput With Prefetched Query Select 1`] = `
11042
11050
  className="base choice"
11043
11051
  >
11044
11052
  <input
11053
+ checked={false}
11045
11054
  disabled={false}
11046
- id="undefined-green"
11055
+ id="colors-green"
11047
11056
  name="colors"
11048
11057
  onBlur={[Function]}
11049
11058
  onChange={[Function]}
@@ -11051,7 +11060,7 @@ exports[`Storyshots f/FormInput With Prefetched Query Select 1`] = `
11051
11060
  value="green"
11052
11061
  />
11053
11062
  <label
11054
- htmlFor="undefined-green"
11063
+ htmlFor="colors-green"
11055
11064
  >
11056
11065
  Color Green
11057
11066
  </label>
@@ -11142,8 +11151,9 @@ exports[`Storyshots f/FormInput With Query Combobox 1`] = `
11142
11151
  className="base choice"
11143
11152
  >
11144
11153
  <input
11154
+ checked={false}
11145
11155
  disabled={false}
11146
- id="undefined-red"
11156
+ id="colors-red"
11147
11157
  name="colors"
11148
11158
  onBlur={[Function]}
11149
11159
  onChange={[Function]}
@@ -11151,7 +11161,7 @@ exports[`Storyshots f/FormInput With Query Combobox 1`] = `
11151
11161
  value="red"
11152
11162
  />
11153
11163
  <label
11154
- htmlFor="undefined-red"
11164
+ htmlFor="colors-red"
11155
11165
  >
11156
11166
  Color Red
11157
11167
  </label>
@@ -11160,8 +11170,9 @@ exports[`Storyshots f/FormInput With Query Combobox 1`] = `
11160
11170
  className="base choice"
11161
11171
  >
11162
11172
  <input
11173
+ checked={false}
11163
11174
  disabled={false}
11164
- id="undefined-blue"
11175
+ id="colors-blue"
11165
11176
  name="colors"
11166
11177
  onBlur={[Function]}
11167
11178
  onChange={[Function]}
@@ -11169,7 +11180,7 @@ exports[`Storyshots f/FormInput With Query Combobox 1`] = `
11169
11180
  value="blue"
11170
11181
  />
11171
11182
  <label
11172
- htmlFor="undefined-blue"
11183
+ htmlFor="colors-blue"
11173
11184
  >
11174
11185
  Color Blue
11175
11186
  </label>
@@ -11178,8 +11189,9 @@ exports[`Storyshots f/FormInput With Query Combobox 1`] = `
11178
11189
  className="base choice"
11179
11190
  >
11180
11191
  <input
11192
+ checked={false}
11181
11193
  disabled={false}
11182
- id="undefined-green"
11194
+ id="colors-green"
11183
11195
  name="colors"
11184
11196
  onBlur={[Function]}
11185
11197
  onChange={[Function]}
@@ -11187,7 +11199,7 @@ exports[`Storyshots f/FormInput With Query Combobox 1`] = `
11187
11199
  value="green"
11188
11200
  />
11189
11201
  <label
11190
- htmlFor="undefined-green"
11202
+ htmlFor="colors-green"
11191
11203
  >
11192
11204
  Color Green
11193
11205
  </label>
@@ -11509,8 +11521,9 @@ exports[`Storyshots f/fields/ChoicesInput Base 1`] = `
11509
11521
  className="base choice"
11510
11522
  >
11511
11523
  <input
11524
+ checked={false}
11512
11525
  disabled={false}
11513
- id="colors-red"
11526
+ id="color-red"
11514
11527
  name="color"
11515
11528
  onBlur={[Function]}
11516
11529
  onChange={[Function]}
@@ -11518,7 +11531,7 @@ exports[`Storyshots f/fields/ChoicesInput Base 1`] = `
11518
11531
  value="red"
11519
11532
  />
11520
11533
  <label
11521
- htmlFor="colors-red"
11534
+ htmlFor="color-red"
11522
11535
  >
11523
11536
  Color Red
11524
11537
  </label>
@@ -11527,8 +11540,9 @@ exports[`Storyshots f/fields/ChoicesInput Base 1`] = `
11527
11540
  className="base choice"
11528
11541
  >
11529
11542
  <input
11543
+ checked={false}
11530
11544
  disabled={false}
11531
- id="colors-blue"
11545
+ id="color-blue"
11532
11546
  name="color"
11533
11547
  onBlur={[Function]}
11534
11548
  onChange={[Function]}
@@ -11536,7 +11550,7 @@ exports[`Storyshots f/fields/ChoicesInput Base 1`] = `
11536
11550
  value="blue"
11537
11551
  />
11538
11552
  <label
11539
- htmlFor="colors-blue"
11553
+ htmlFor="color-blue"
11540
11554
  >
11541
11555
  Color Blue
11542
11556
  </label>
@@ -11545,8 +11559,9 @@ exports[`Storyshots f/fields/ChoicesInput Base 1`] = `
11545
11559
  className="base choice"
11546
11560
  >
11547
11561
  <input
11562
+ checked={false}
11548
11563
  disabled={false}
11549
- id="colors-green"
11564
+ id="color-green"
11550
11565
  name="color"
11551
11566
  onBlur={[Function]}
11552
11567
  onChange={[Function]}
@@ -11554,7 +11569,7 @@ exports[`Storyshots f/fields/ChoicesInput Base 1`] = `
11554
11569
  value="green"
11555
11570
  />
11556
11571
  <label
11557
- htmlFor="colors-green"
11572
+ htmlFor="color-green"
11558
11573
  >
11559
11574
  Color Green
11560
11575
  </label>
@@ -11563,8 +11578,9 @@ exports[`Storyshots f/fields/ChoicesInput Base 1`] = `
11563
11578
  className="base choice"
11564
11579
  >
11565
11580
  <input
11581
+ checked={false}
11566
11582
  disabled={false}
11567
- id="colors-yellow"
11583
+ id="color-yellow"
11568
11584
  name="color"
11569
11585
  onBlur={[Function]}
11570
11586
  onChange={[Function]}
@@ -11572,7 +11588,7 @@ exports[`Storyshots f/fields/ChoicesInput Base 1`] = `
11572
11588
  value="yellow"
11573
11589
  />
11574
11590
  <label
11575
- htmlFor="colors-yellow"
11591
+ htmlFor="color-yellow"
11576
11592
  >
11577
11593
  Color Yellow
11578
11594
  </label>
@@ -11581,8 +11597,9 @@ exports[`Storyshots f/fields/ChoicesInput Base 1`] = `
11581
11597
  className="base choice"
11582
11598
  >
11583
11599
  <input
11600
+ checked={false}
11584
11601
  disabled={false}
11585
- id="colors-oarnge"
11602
+ id="color-oarnge"
11586
11603
  name="color"
11587
11604
  onBlur={[Function]}
11588
11605
  onChange={[Function]}
@@ -11590,7 +11607,7 @@ exports[`Storyshots f/fields/ChoicesInput Base 1`] = `
11590
11607
  value="oarnge"
11591
11608
  />
11592
11609
  <label
11593
- htmlFor="colors-oarnge"
11610
+ htmlFor="color-oarnge"
11594
11611
  >
11595
11612
  Color Orange
11596
11613
  </label>
@@ -11599,8 +11616,9 @@ exports[`Storyshots f/fields/ChoicesInput Base 1`] = `
11599
11616
  className="base choice"
11600
11617
  >
11601
11618
  <input
11619
+ checked={false}
11602
11620
  disabled={false}
11603
- id="colors-violet"
11621
+ id="color-violet"
11604
11622
  name="color"
11605
11623
  onBlur={[Function]}
11606
11624
  onChange={[Function]}
@@ -11608,7 +11626,7 @@ exports[`Storyshots f/fields/ChoicesInput Base 1`] = `
11608
11626
  value="violet"
11609
11627
  />
11610
11628
  <label
11611
- htmlFor="colors-violet"
11629
+ htmlFor="color-violet"
11612
11630
  >
11613
11631
  Color Violet
11614
11632
  </label>
@@ -11617,8 +11635,9 @@ exports[`Storyshots f/fields/ChoicesInput Base 1`] = `
11617
11635
  className="base choice"
11618
11636
  >
11619
11637
  <input
11638
+ checked={false}
11620
11639
  disabled={false}
11621
- id="colors-brown"
11640
+ id="color-brown"
11622
11641
  name="color"
11623
11642
  onBlur={[Function]}
11624
11643
  onChange={[Function]}
@@ -11626,7 +11645,7 @@ exports[`Storyshots f/fields/ChoicesInput Base 1`] = `
11626
11645
  value="brown"
11627
11646
  />
11628
11647
  <label
11629
- htmlFor="colors-brown"
11648
+ htmlFor="color-brown"
11630
11649
  >
11631
11650
  Color Brown
11632
11651
  </label>
@@ -11635,8 +11654,9 @@ exports[`Storyshots f/fields/ChoicesInput Base 1`] = `
11635
11654
  className="base choice"
11636
11655
  >
11637
11656
  <input
11657
+ checked={false}
11638
11658
  disabled={false}
11639
- id="colors-black"
11659
+ id="color-black"
11640
11660
  name="color"
11641
11661
  onBlur={[Function]}
11642
11662
  onChange={[Function]}
@@ -11644,7 +11664,7 @@ exports[`Storyshots f/fields/ChoicesInput Base 1`] = `
11644
11664
  value="black"
11645
11665
  />
11646
11666
  <label
11647
- htmlFor="colors-black"
11667
+ htmlFor="color-black"
11648
11668
  >
11649
11669
  Color Black
11650
11670
  </label>
@@ -11693,8 +11713,9 @@ exports[`Storyshots f/fields/ChoicesInput Choices With Label 1`] = `
11693
11713
  className="base choice"
11694
11714
  >
11695
11715
  <input
11716
+ checked={false}
11696
11717
  disabled={false}
11697
- id="colors-red"
11718
+ id="color-red"
11698
11719
  name="color"
11699
11720
  onBlur={[Function]}
11700
11721
  onChange={[Function]}
@@ -11702,7 +11723,7 @@ exports[`Storyshots f/fields/ChoicesInput Choices With Label 1`] = `
11702
11723
  value="red"
11703
11724
  />
11704
11725
  <label
11705
- htmlFor="colors-red"
11726
+ htmlFor="color-red"
11706
11727
  >
11707
11728
  Color Red
11708
11729
  </label>
@@ -11711,8 +11732,9 @@ exports[`Storyshots f/fields/ChoicesInput Choices With Label 1`] = `
11711
11732
  className="base choice"
11712
11733
  >
11713
11734
  <input
11735
+ checked={false}
11714
11736
  disabled={false}
11715
- id="colors-blue"
11737
+ id="color-blue"
11716
11738
  name="color"
11717
11739
  onBlur={[Function]}
11718
11740
  onChange={[Function]}
@@ -11720,7 +11742,7 @@ exports[`Storyshots f/fields/ChoicesInput Choices With Label 1`] = `
11720
11742
  value="blue"
11721
11743
  />
11722
11744
  <label
11723
- htmlFor="colors-blue"
11745
+ htmlFor="color-blue"
11724
11746
  >
11725
11747
  Color Blue
11726
11748
  </label>
@@ -11729,8 +11751,9 @@ exports[`Storyshots f/fields/ChoicesInput Choices With Label 1`] = `
11729
11751
  className="base choice"
11730
11752
  >
11731
11753
  <input
11754
+ checked={false}
11732
11755
  disabled={false}
11733
- id="colors-green"
11756
+ id="color-green"
11734
11757
  name="color"
11735
11758
  onBlur={[Function]}
11736
11759
  onChange={[Function]}
@@ -11738,7 +11761,7 @@ exports[`Storyshots f/fields/ChoicesInput Choices With Label 1`] = `
11738
11761
  value="green"
11739
11762
  />
11740
11763
  <label
11741
- htmlFor="colors-green"
11764
+ htmlFor="color-green"
11742
11765
  >
11743
11766
  Color Green
11744
11767
  </label>
@@ -11747,8 +11770,9 @@ exports[`Storyshots f/fields/ChoicesInput Choices With Label 1`] = `
11747
11770
  className="base choice"
11748
11771
  >
11749
11772
  <input
11773
+ checked={false}
11750
11774
  disabled={false}
11751
- id="colors-yellow"
11775
+ id="color-yellow"
11752
11776
  name="color"
11753
11777
  onBlur={[Function]}
11754
11778
  onChange={[Function]}
@@ -11756,7 +11780,7 @@ exports[`Storyshots f/fields/ChoicesInput Choices With Label 1`] = `
11756
11780
  value="yellow"
11757
11781
  />
11758
11782
  <label
11759
- htmlFor="colors-yellow"
11783
+ htmlFor="color-yellow"
11760
11784
  >
11761
11785
  Color Yellow
11762
11786
  </label>
@@ -11765,8 +11789,9 @@ exports[`Storyshots f/fields/ChoicesInput Choices With Label 1`] = `
11765
11789
  className="base choice"
11766
11790
  >
11767
11791
  <input
11792
+ checked={false}
11768
11793
  disabled={false}
11769
- id="colors-oarnge"
11794
+ id="color-oarnge"
11770
11795
  name="color"
11771
11796
  onBlur={[Function]}
11772
11797
  onChange={[Function]}
@@ -11774,7 +11799,7 @@ exports[`Storyshots f/fields/ChoicesInput Choices With Label 1`] = `
11774
11799
  value="oarnge"
11775
11800
  />
11776
11801
  <label
11777
- htmlFor="colors-oarnge"
11802
+ htmlFor="color-oarnge"
11778
11803
  >
11779
11804
  Color Orange
11780
11805
  </label>
@@ -11783,8 +11808,9 @@ exports[`Storyshots f/fields/ChoicesInput Choices With Label 1`] = `
11783
11808
  className="base choice"
11784
11809
  >
11785
11810
  <input
11811
+ checked={false}
11786
11812
  disabled={false}
11787
- id="colors-violet"
11813
+ id="color-violet"
11788
11814
  name="color"
11789
11815
  onBlur={[Function]}
11790
11816
  onChange={[Function]}
@@ -11792,7 +11818,7 @@ exports[`Storyshots f/fields/ChoicesInput Choices With Label 1`] = `
11792
11818
  value="violet"
11793
11819
  />
11794
11820
  <label
11795
- htmlFor="colors-violet"
11821
+ htmlFor="color-violet"
11796
11822
  >
11797
11823
  Color Violet
11798
11824
  </label>
@@ -11801,8 +11827,9 @@ exports[`Storyshots f/fields/ChoicesInput Choices With Label 1`] = `
11801
11827
  className="base choice"
11802
11828
  >
11803
11829
  <input
11830
+ checked={false}
11804
11831
  disabled={false}
11805
- id="colors-brown"
11832
+ id="color-brown"
11806
11833
  name="color"
11807
11834
  onBlur={[Function]}
11808
11835
  onChange={[Function]}
@@ -11810,7 +11837,7 @@ exports[`Storyshots f/fields/ChoicesInput Choices With Label 1`] = `
11810
11837
  value="brown"
11811
11838
  />
11812
11839
  <label
11813
- htmlFor="colors-brown"
11840
+ htmlFor="color-brown"
11814
11841
  >
11815
11842
  Color Brown
11816
11843
  </label>
@@ -11819,8 +11846,9 @@ exports[`Storyshots f/fields/ChoicesInput Choices With Label 1`] = `
11819
11846
  className="base choice"
11820
11847
  >
11821
11848
  <input
11849
+ checked={false}
11822
11850
  disabled={false}
11823
- id="colors-black"
11851
+ id="color-black"
11824
11852
  name="color"
11825
11853
  onBlur={[Function]}
11826
11854
  onChange={[Function]}
@@ -11828,7 +11856,7 @@ exports[`Storyshots f/fields/ChoicesInput Choices With Label 1`] = `
11828
11856
  value="black"
11829
11857
  />
11830
11858
  <label
11831
- htmlFor="colors-black"
11859
+ htmlFor="color-black"
11832
11860
  >
11833
11861
  Color Black
11834
11862
  </label>
@@ -11877,8 +11905,9 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
11877
11905
  className="base choice"
11878
11906
  >
11879
11907
  <input
11908
+ checked={false}
11880
11909
  disabled={true}
11881
- id="colors-red"
11910
+ id="color-red"
11882
11911
  name="color"
11883
11912
  onBlur={[Function]}
11884
11913
  onChange={[Function]}
@@ -11886,7 +11915,7 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
11886
11915
  value="red"
11887
11916
  />
11888
11917
  <label
11889
- htmlFor="colors-red"
11918
+ htmlFor="color-red"
11890
11919
  >
11891
11920
  Color Red
11892
11921
  </label>
@@ -11895,8 +11924,9 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
11895
11924
  className="base choice"
11896
11925
  >
11897
11926
  <input
11927
+ checked={false}
11898
11928
  disabled={true}
11899
- id="colors-blue"
11929
+ id="color-blue"
11900
11930
  name="color"
11901
11931
  onBlur={[Function]}
11902
11932
  onChange={[Function]}
@@ -11904,7 +11934,7 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
11904
11934
  value="blue"
11905
11935
  />
11906
11936
  <label
11907
- htmlFor="colors-blue"
11937
+ htmlFor="color-blue"
11908
11938
  >
11909
11939
  Color Blue
11910
11940
  </label>
@@ -11913,8 +11943,9 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
11913
11943
  className="base choice"
11914
11944
  >
11915
11945
  <input
11946
+ checked={false}
11916
11947
  disabled={true}
11917
- id="colors-green"
11948
+ id="color-green"
11918
11949
  name="color"
11919
11950
  onBlur={[Function]}
11920
11951
  onChange={[Function]}
@@ -11922,7 +11953,7 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
11922
11953
  value="green"
11923
11954
  />
11924
11955
  <label
11925
- htmlFor="colors-green"
11956
+ htmlFor="color-green"
11926
11957
  >
11927
11958
  Color Green
11928
11959
  </label>
@@ -11931,8 +11962,9 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
11931
11962
  className="base choice"
11932
11963
  >
11933
11964
  <input
11965
+ checked={false}
11934
11966
  disabled={true}
11935
- id="colors-yellow"
11967
+ id="color-yellow"
11936
11968
  name="color"
11937
11969
  onBlur={[Function]}
11938
11970
  onChange={[Function]}
@@ -11940,7 +11972,7 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
11940
11972
  value="yellow"
11941
11973
  />
11942
11974
  <label
11943
- htmlFor="colors-yellow"
11975
+ htmlFor="color-yellow"
11944
11976
  >
11945
11977
  Color Yellow
11946
11978
  </label>
@@ -11949,8 +11981,9 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
11949
11981
  className="base choice"
11950
11982
  >
11951
11983
  <input
11984
+ checked={false}
11952
11985
  disabled={true}
11953
- id="colors-oarnge"
11986
+ id="color-oarnge"
11954
11987
  name="color"
11955
11988
  onBlur={[Function]}
11956
11989
  onChange={[Function]}
@@ -11958,7 +11991,7 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
11958
11991
  value="oarnge"
11959
11992
  />
11960
11993
  <label
11961
- htmlFor="colors-oarnge"
11994
+ htmlFor="color-oarnge"
11962
11995
  >
11963
11996
  Color Orange
11964
11997
  </label>
@@ -11967,8 +12000,9 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
11967
12000
  className="base choice"
11968
12001
  >
11969
12002
  <input
12003
+ checked={false}
11970
12004
  disabled={true}
11971
- id="colors-violet"
12005
+ id="color-violet"
11972
12006
  name="color"
11973
12007
  onBlur={[Function]}
11974
12008
  onChange={[Function]}
@@ -11976,7 +12010,7 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
11976
12010
  value="violet"
11977
12011
  />
11978
12012
  <label
11979
- htmlFor="colors-violet"
12013
+ htmlFor="color-violet"
11980
12014
  >
11981
12015
  Color Violet
11982
12016
  </label>
@@ -11985,8 +12019,9 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
11985
12019
  className="base choice"
11986
12020
  >
11987
12021
  <input
12022
+ checked={false}
11988
12023
  disabled={true}
11989
- id="colors-brown"
12024
+ id="color-brown"
11990
12025
  name="color"
11991
12026
  onBlur={[Function]}
11992
12027
  onChange={[Function]}
@@ -11994,7 +12029,7 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
11994
12029
  value="brown"
11995
12030
  />
11996
12031
  <label
11997
- htmlFor="colors-brown"
12032
+ htmlFor="color-brown"
11998
12033
  >
11999
12034
  Color Brown
12000
12035
  </label>
@@ -12003,8 +12038,9 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
12003
12038
  className="base choice"
12004
12039
  >
12005
12040
  <input
12041
+ checked={false}
12006
12042
  disabled={true}
12007
- id="colors-black"
12043
+ id="color-black"
12008
12044
  name="color"
12009
12045
  onBlur={[Function]}
12010
12046
  onChange={[Function]}
@@ -12012,7 +12048,7 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
12012
12048
  value="black"
12013
12049
  />
12014
12050
  <label
12015
- htmlFor="colors-black"
12051
+ htmlFor="color-black"
12016
12052
  >
12017
12053
  Color Black
12018
12054
  </label>
@@ -12056,8 +12092,9 @@ exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
12056
12092
  className="base choice"
12057
12093
  >
12058
12094
  <input
12095
+ checked={false}
12059
12096
  disabled={false}
12060
- id="colors-red"
12097
+ id="color-red"
12061
12098
  name="color"
12062
12099
  onBlur={[Function]}
12063
12100
  onChange={[Function]}
@@ -12065,7 +12102,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
12065
12102
  value="red"
12066
12103
  />
12067
12104
  <label
12068
- htmlFor="colors-red"
12105
+ htmlFor="color-red"
12069
12106
  >
12070
12107
  Color Red
12071
12108
  </label>
@@ -12074,8 +12111,9 @@ exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
12074
12111
  className="base choice"
12075
12112
  >
12076
12113
  <input
12114
+ checked={false}
12077
12115
  disabled={false}
12078
- id="colors-blue"
12116
+ id="color-blue"
12079
12117
  name="color"
12080
12118
  onBlur={[Function]}
12081
12119
  onChange={[Function]}
@@ -12083,7 +12121,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
12083
12121
  value="blue"
12084
12122
  />
12085
12123
  <label
12086
- htmlFor="colors-blue"
12124
+ htmlFor="color-blue"
12087
12125
  >
12088
12126
  Color Blue
12089
12127
  </label>
@@ -12092,8 +12130,9 @@ exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
12092
12130
  className="base choice"
12093
12131
  >
12094
12132
  <input
12133
+ checked={false}
12095
12134
  disabled={false}
12096
- id="colors-green"
12135
+ id="color-green"
12097
12136
  name="color"
12098
12137
  onBlur={[Function]}
12099
12138
  onChange={[Function]}
@@ -12101,7 +12140,194 @@ exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
12101
12140
  value="green"
12102
12141
  />
12103
12142
  <label
12104
- htmlFor="colors-green"
12143
+ htmlFor="color-green"
12144
+ >
12145
+ Color Green
12146
+ </label>
12147
+ </div>
12148
+ <div
12149
+ className="base choice"
12150
+ >
12151
+ <input
12152
+ checked={false}
12153
+ disabled={false}
12154
+ id="color-yellow"
12155
+ name="color"
12156
+ onBlur={[Function]}
12157
+ onChange={[Function]}
12158
+ type="checkbox"
12159
+ value="yellow"
12160
+ />
12161
+ <label
12162
+ htmlFor="color-yellow"
12163
+ >
12164
+ Color Yellow
12165
+ </label>
12166
+ </div>
12167
+ <div
12168
+ className="base choice"
12169
+ >
12170
+ <input
12171
+ checked={false}
12172
+ disabled={false}
12173
+ id="color-oarnge"
12174
+ name="color"
12175
+ onBlur={[Function]}
12176
+ onChange={[Function]}
12177
+ type="checkbox"
12178
+ value="oarnge"
12179
+ />
12180
+ <label
12181
+ htmlFor="color-oarnge"
12182
+ >
12183
+ Color Orange
12184
+ </label>
12185
+ </div>
12186
+ <div
12187
+ className="base choice"
12188
+ >
12189
+ <input
12190
+ checked={false}
12191
+ disabled={false}
12192
+ id="color-violet"
12193
+ name="color"
12194
+ onBlur={[Function]}
12195
+ onChange={[Function]}
12196
+ type="checkbox"
12197
+ value="violet"
12198
+ />
12199
+ <label
12200
+ htmlFor="color-violet"
12201
+ >
12202
+ Color Violet
12203
+ </label>
12204
+ </div>
12205
+ <div
12206
+ className="base choice"
12207
+ >
12208
+ <input
12209
+ checked={false}
12210
+ disabled={false}
12211
+ id="color-brown"
12212
+ name="color"
12213
+ onBlur={[Function]}
12214
+ onChange={[Function]}
12215
+ type="checkbox"
12216
+ value="brown"
12217
+ />
12218
+ <label
12219
+ htmlFor="color-brown"
12220
+ >
12221
+ Color Brown
12222
+ </label>
12223
+ </div>
12224
+ <div
12225
+ className="base choice"
12226
+ >
12227
+ <input
12228
+ checked={false}
12229
+ disabled={false}
12230
+ id="color-black"
12231
+ name="color"
12232
+ onBlur={[Function]}
12233
+ onChange={[Function]}
12234
+ type="checkbox"
12235
+ value="black"
12236
+ />
12237
+ <label
12238
+ htmlFor="color-black"
12239
+ >
12240
+ Color Black
12241
+ </label>
12242
+ </div>
12243
+ </div>
12244
+ </div>
12245
+ <div
12246
+ className="debugger"
12247
+ >
12248
+ <button
12249
+ className="base button x-main2"
12250
+ onClick={[Function]}
12251
+ type="button"
12252
+ >
12253
+ Open FormDebugger
12254
+ </button>
12255
+ </div>
12256
+ </form>
12257
+ `;
12258
+
12259
+ exports[`Storyshots f/fields/ChoicesInput Multiple With Default Formik Value 1`] = `
12260
+ <form
12261
+ action="#"
12262
+ onReset={[Function]}
12263
+ onSubmit={[Function]}
12264
+ >
12265
+ <div
12266
+ className="base choices-input multiple x-background2 y-main2"
12267
+ id="colors"
12268
+ style={
12269
+ Object {
12270
+ "--grid-columns-desktop": 3,
12271
+ "--grid-columns-mobile": 2,
12272
+ }
12273
+ }
12274
+ >
12275
+ <div
12276
+ className="choices"
12277
+ >
12278
+ <div
12279
+ className="base choice"
12280
+ >
12281
+ <input
12282
+ checked={false}
12283
+ disabled={false}
12284
+ id="color-red"
12285
+ name="color"
12286
+ onBlur={[Function]}
12287
+ onChange={[Function]}
12288
+ type="checkbox"
12289
+ value="red"
12290
+ />
12291
+ <label
12292
+ htmlFor="color-red"
12293
+ >
12294
+ Color Red
12295
+ </label>
12296
+ </div>
12297
+ <div
12298
+ className="base choice"
12299
+ >
12300
+ <input
12301
+ checked={false}
12302
+ disabled={false}
12303
+ id="color-blue"
12304
+ name="color"
12305
+ onBlur={[Function]}
12306
+ onChange={[Function]}
12307
+ type="checkbox"
12308
+ value="blue"
12309
+ />
12310
+ <label
12311
+ htmlFor="color-blue"
12312
+ >
12313
+ Color Blue
12314
+ </label>
12315
+ </div>
12316
+ <div
12317
+ className="base choice"
12318
+ >
12319
+ <input
12320
+ checked={false}
12321
+ disabled={false}
12322
+ id="color-green"
12323
+ name="color"
12324
+ onBlur={[Function]}
12325
+ onChange={[Function]}
12326
+ type="checkbox"
12327
+ value="green"
12328
+ />
12329
+ <label
12330
+ htmlFor="color-green"
12105
12331
  >
12106
12332
  Color Green
12107
12333
  </label>
@@ -12110,8 +12336,9 @@ exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
12110
12336
  className="base choice"
12111
12337
  >
12112
12338
  <input
12339
+ checked={false}
12113
12340
  disabled={false}
12114
- id="colors-yellow"
12341
+ id="color-yellow"
12115
12342
  name="color"
12116
12343
  onBlur={[Function]}
12117
12344
  onChange={[Function]}
@@ -12119,7 +12346,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
12119
12346
  value="yellow"
12120
12347
  />
12121
12348
  <label
12122
- htmlFor="colors-yellow"
12349
+ htmlFor="color-yellow"
12123
12350
  >
12124
12351
  Color Yellow
12125
12352
  </label>
@@ -12128,8 +12355,9 @@ exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
12128
12355
  className="base choice"
12129
12356
  >
12130
12357
  <input
12358
+ checked={false}
12131
12359
  disabled={false}
12132
- id="colors-oarnge"
12360
+ id="color-oarnge"
12133
12361
  name="color"
12134
12362
  onBlur={[Function]}
12135
12363
  onChange={[Function]}
@@ -12137,7 +12365,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
12137
12365
  value="oarnge"
12138
12366
  />
12139
12367
  <label
12140
- htmlFor="colors-oarnge"
12368
+ htmlFor="color-oarnge"
12141
12369
  >
12142
12370
  Color Orange
12143
12371
  </label>
@@ -12146,8 +12374,9 @@ exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
12146
12374
  className="base choice"
12147
12375
  >
12148
12376
  <input
12377
+ checked={false}
12149
12378
  disabled={false}
12150
- id="colors-violet"
12379
+ id="color-violet"
12151
12380
  name="color"
12152
12381
  onBlur={[Function]}
12153
12382
  onChange={[Function]}
@@ -12155,7 +12384,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
12155
12384
  value="violet"
12156
12385
  />
12157
12386
  <label
12158
- htmlFor="colors-violet"
12387
+ htmlFor="color-violet"
12159
12388
  >
12160
12389
  Color Violet
12161
12390
  </label>
@@ -12164,8 +12393,9 @@ exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
12164
12393
  className="base choice"
12165
12394
  >
12166
12395
  <input
12396
+ checked={false}
12167
12397
  disabled={false}
12168
- id="colors-brown"
12398
+ id="color-brown"
12169
12399
  name="color"
12170
12400
  onBlur={[Function]}
12171
12401
  onChange={[Function]}
@@ -12173,7 +12403,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
12173
12403
  value="brown"
12174
12404
  />
12175
12405
  <label
12176
- htmlFor="colors-brown"
12406
+ htmlFor="color-brown"
12177
12407
  >
12178
12408
  Color Brown
12179
12409
  </label>
@@ -12182,8 +12412,9 @@ exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
12182
12412
  className="base choice"
12183
12413
  >
12184
12414
  <input
12415
+ checked={false}
12185
12416
  disabled={false}
12186
- id="colors-black"
12417
+ id="color-black"
12187
12418
  name="color"
12188
12419
  onBlur={[Function]}
12189
12420
  onChange={[Function]}
@@ -12191,7 +12422,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
12191
12422
  value="black"
12192
12423
  />
12193
12424
  <label
12194
- htmlFor="colors-black"
12425
+ htmlFor="color-black"
12195
12426
  >
12196
12427
  Color Black
12197
12428
  </label>
@@ -12235,8 +12466,9 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
12235
12466
  className="base choice"
12236
12467
  >
12237
12468
  <input
12469
+ checked={false}
12238
12470
  disabled={false}
12239
- id="colors-red"
12471
+ id="color-red"
12240
12472
  name="color"
12241
12473
  onBlur={[Function]}
12242
12474
  onChange={[Function]}
@@ -12244,7 +12476,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
12244
12476
  value="red"
12245
12477
  />
12246
12478
  <label
12247
- htmlFor="colors-red"
12479
+ htmlFor="color-red"
12248
12480
  >
12249
12481
  Color Red
12250
12482
  </label>
@@ -12253,8 +12485,9 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
12253
12485
  className="base choice"
12254
12486
  >
12255
12487
  <input
12488
+ checked={false}
12256
12489
  disabled={false}
12257
- id="colors-blue"
12490
+ id="color-blue"
12258
12491
  name="color"
12259
12492
  onBlur={[Function]}
12260
12493
  onChange={[Function]}
@@ -12262,7 +12495,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
12262
12495
  value="blue"
12263
12496
  />
12264
12497
  <label
12265
- htmlFor="colors-blue"
12498
+ htmlFor="color-blue"
12266
12499
  >
12267
12500
  Color Blue
12268
12501
  </label>
@@ -12271,8 +12504,9 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
12271
12504
  className="base choice"
12272
12505
  >
12273
12506
  <input
12507
+ checked={false}
12274
12508
  disabled={false}
12275
- id="colors-green"
12509
+ id="color-green"
12276
12510
  name="color"
12277
12511
  onBlur={[Function]}
12278
12512
  onChange={[Function]}
@@ -12280,7 +12514,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
12280
12514
  value="green"
12281
12515
  />
12282
12516
  <label
12283
- htmlFor="colors-green"
12517
+ htmlFor="color-green"
12284
12518
  >
12285
12519
  Color Green
12286
12520
  </label>
@@ -12289,8 +12523,9 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
12289
12523
  className="base choice"
12290
12524
  >
12291
12525
  <input
12526
+ checked={false}
12292
12527
  disabled={false}
12293
- id="colors-yellow"
12528
+ id="color-yellow"
12294
12529
  name="color"
12295
12530
  onBlur={[Function]}
12296
12531
  onChange={[Function]}
@@ -12298,7 +12533,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
12298
12533
  value="yellow"
12299
12534
  />
12300
12535
  <label
12301
- htmlFor="colors-yellow"
12536
+ htmlFor="color-yellow"
12302
12537
  >
12303
12538
  Color Yellow
12304
12539
  </label>
@@ -12307,8 +12542,9 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
12307
12542
  className="base choice"
12308
12543
  >
12309
12544
  <input
12545
+ checked={false}
12310
12546
  disabled={false}
12311
- id="colors-oarnge"
12547
+ id="color-oarnge"
12312
12548
  name="color"
12313
12549
  onBlur={[Function]}
12314
12550
  onChange={[Function]}
@@ -12316,7 +12552,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
12316
12552
  value="oarnge"
12317
12553
  />
12318
12554
  <label
12319
- htmlFor="colors-oarnge"
12555
+ htmlFor="color-oarnge"
12320
12556
  >
12321
12557
  Color Orange
12322
12558
  </label>
@@ -12325,8 +12561,9 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
12325
12561
  className="base choice"
12326
12562
  >
12327
12563
  <input
12564
+ checked={false}
12328
12565
  disabled={false}
12329
- id="colors-violet"
12566
+ id="color-violet"
12330
12567
  name="color"
12331
12568
  onBlur={[Function]}
12332
12569
  onChange={[Function]}
@@ -12334,7 +12571,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
12334
12571
  value="violet"
12335
12572
  />
12336
12573
  <label
12337
- htmlFor="colors-violet"
12574
+ htmlFor="color-violet"
12338
12575
  >
12339
12576
  Color Violet
12340
12577
  </label>
@@ -12343,8 +12580,9 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
12343
12580
  className="base choice"
12344
12581
  >
12345
12582
  <input
12583
+ checked={false}
12346
12584
  disabled={false}
12347
- id="colors-brown"
12585
+ id="color-brown"
12348
12586
  name="color"
12349
12587
  onBlur={[Function]}
12350
12588
  onChange={[Function]}
@@ -12352,7 +12590,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
12352
12590
  value="brown"
12353
12591
  />
12354
12592
  <label
12355
- htmlFor="colors-brown"
12593
+ htmlFor="color-brown"
12356
12594
  >
12357
12595
  Color Brown
12358
12596
  </label>
@@ -12361,8 +12599,9 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
12361
12599
  className="base choice"
12362
12600
  >
12363
12601
  <input
12602
+ checked={false}
12364
12603
  disabled={false}
12365
- id="colors-black"
12604
+ id="color-black"
12366
12605
  name="color"
12367
12606
  onBlur={[Function]}
12368
12607
  onChange={[Function]}
@@ -12370,7 +12609,194 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
12370
12609
  value="black"
12371
12610
  />
12372
12611
  <label
12373
- htmlFor="colors-black"
12612
+ htmlFor="color-black"
12613
+ >
12614
+ Color Black
12615
+ </label>
12616
+ </div>
12617
+ </div>
12618
+ </div>
12619
+ <div
12620
+ className="debugger"
12621
+ >
12622
+ <button
12623
+ className="base button x-main2"
12624
+ onClick={[Function]}
12625
+ type="button"
12626
+ >
12627
+ Open FormDebugger
12628
+ </button>
12629
+ </div>
12630
+ </form>
12631
+ `;
12632
+
12633
+ exports[`Storyshots f/fields/ChoicesInput With Default Formik Value 1`] = `
12634
+ <form
12635
+ action="#"
12636
+ onReset={[Function]}
12637
+ onSubmit={[Function]}
12638
+ >
12639
+ <div
12640
+ className="base choices-input x-background2 y-main2"
12641
+ id="colors"
12642
+ style={
12643
+ Object {
12644
+ "--grid-columns-desktop": 3,
12645
+ "--grid-columns-mobile": 2,
12646
+ }
12647
+ }
12648
+ >
12649
+ <div
12650
+ className="choices"
12651
+ >
12652
+ <div
12653
+ className="base choice"
12654
+ >
12655
+ <input
12656
+ checked={false}
12657
+ disabled={false}
12658
+ id="color-red"
12659
+ name="color"
12660
+ onBlur={[Function]}
12661
+ onChange={[Function]}
12662
+ type="radio"
12663
+ value="red"
12664
+ />
12665
+ <label
12666
+ htmlFor="color-red"
12667
+ >
12668
+ Color Red
12669
+ </label>
12670
+ </div>
12671
+ <div
12672
+ className="base choice"
12673
+ >
12674
+ <input
12675
+ checked={false}
12676
+ disabled={false}
12677
+ id="color-blue"
12678
+ name="color"
12679
+ onBlur={[Function]}
12680
+ onChange={[Function]}
12681
+ type="radio"
12682
+ value="blue"
12683
+ />
12684
+ <label
12685
+ htmlFor="color-blue"
12686
+ >
12687
+ Color Blue
12688
+ </label>
12689
+ </div>
12690
+ <div
12691
+ className="base choice"
12692
+ >
12693
+ <input
12694
+ checked={false}
12695
+ disabled={false}
12696
+ id="color-green"
12697
+ name="color"
12698
+ onBlur={[Function]}
12699
+ onChange={[Function]}
12700
+ type="radio"
12701
+ value="green"
12702
+ />
12703
+ <label
12704
+ htmlFor="color-green"
12705
+ >
12706
+ Color Green
12707
+ </label>
12708
+ </div>
12709
+ <div
12710
+ className="base choice"
12711
+ >
12712
+ <input
12713
+ checked={false}
12714
+ disabled={false}
12715
+ id="color-yellow"
12716
+ name="color"
12717
+ onBlur={[Function]}
12718
+ onChange={[Function]}
12719
+ type="radio"
12720
+ value="yellow"
12721
+ />
12722
+ <label
12723
+ htmlFor="color-yellow"
12724
+ >
12725
+ Color Yellow
12726
+ </label>
12727
+ </div>
12728
+ <div
12729
+ className="base choice"
12730
+ >
12731
+ <input
12732
+ checked={false}
12733
+ disabled={false}
12734
+ id="color-oarnge"
12735
+ name="color"
12736
+ onBlur={[Function]}
12737
+ onChange={[Function]}
12738
+ type="radio"
12739
+ value="oarnge"
12740
+ />
12741
+ <label
12742
+ htmlFor="color-oarnge"
12743
+ >
12744
+ Color Orange
12745
+ </label>
12746
+ </div>
12747
+ <div
12748
+ className="base choice"
12749
+ >
12750
+ <input
12751
+ checked={false}
12752
+ disabled={false}
12753
+ id="color-violet"
12754
+ name="color"
12755
+ onBlur={[Function]}
12756
+ onChange={[Function]}
12757
+ type="radio"
12758
+ value="violet"
12759
+ />
12760
+ <label
12761
+ htmlFor="color-violet"
12762
+ >
12763
+ Color Violet
12764
+ </label>
12765
+ </div>
12766
+ <div
12767
+ className="base choice"
12768
+ >
12769
+ <input
12770
+ checked={false}
12771
+ disabled={false}
12772
+ id="color-brown"
12773
+ name="color"
12774
+ onBlur={[Function]}
12775
+ onChange={[Function]}
12776
+ type="radio"
12777
+ value="brown"
12778
+ />
12779
+ <label
12780
+ htmlFor="color-brown"
12781
+ >
12782
+ Color Brown
12783
+ </label>
12784
+ </div>
12785
+ <div
12786
+ className="base choice"
12787
+ >
12788
+ <input
12789
+ checked={false}
12790
+ disabled={false}
12791
+ id="color-black"
12792
+ name="color"
12793
+ onBlur={[Function]}
12794
+ onChange={[Function]}
12795
+ type="radio"
12796
+ value="black"
12797
+ />
12798
+ <label
12799
+ htmlFor="color-black"
12374
12800
  >
12375
12801
  Color Black
12376
12802
  </label>