@pareto-engineering/design-system 2.0.0-alpha.62 → 2.0.0-alpha.64

package/src/__snapshots__/Storyshots.test.js.snap

@@ -3729,7 +3729,7 @@ exports[`Storyshots a/Timestamp Distance Format 1`] = `
   className="base timestamp"
   onClick={[Function]}
 >
-  23 days ago
+  24 days ago
 </p>
 `;
 
@@ -11315,7 +11315,7 @@ exports[`Storyshots f/FormInput Base 1`] = `
     className="base text-input form-input y-background2"
   >
     <label
-      className="base label v50 mb-v x-main2"
+      className="base form-label v50 mb-v x-main2"
       htmlFor="firstName"
     >
       What's your first name ?
@@ -11335,7 +11335,7 @@ exports[`Storyshots f/FormInput Base 1`] = `
     className="base text-input form-input y-background2"
   >
     <label
-      className="base label v50 mb-v x-main2"
+      className="base form-label v50 mb-v x-main2"
       htmlFor="lastName"
     >
       What's your last name ?
@@ -11354,7 +11354,7 @@ exports[`Storyshots f/FormInput Base 1`] = `
     className="base text-area-input form-input y-background2"
   >
     <label
-      className="base label v50 mb-v x-main2"
+      className="base form-label v50 mb-v x-main2"
       htmlFor="description"
     >
       Describe yourself in a few sentences
@@ -11377,7 +11377,7 @@ exports[`Storyshots f/FormInput Base 1`] = `
     className="base checkbox form-input"
   >
     <label
-      className="base label x-main2"
+      className="base form-label x-main2"
       htmlFor="urgent"
     >
       Urgent
@@ -11403,7 +11403,7 @@ exports[`Storyshots f/FormInput Base 1`] = `
     }
   >
     <p
-      className="base label x-main2"
+      className="base form-label x-main2"
     >
       What are your favourite colors ?
     </p>
@@ -11414,8 +11414,9 @@ exports[`Storyshots f/FormInput Base 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={false}
-          id="undefined-red"
+          id="colors-red"
           name="colors"
           onBlur={[Function]}
           onChange={[Function]}
@@ -11423,7 +11424,7 @@ exports[`Storyshots f/FormInput Base 1`] = `
           value="red"
         />
         <label
-          htmlFor="undefined-red"
+          htmlFor="colors-red"
         >
           Color Red
         </label>
@@ -11432,8 +11433,9 @@ exports[`Storyshots f/FormInput Base 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={false}
-          id="undefined-blue"
+          id="colors-blue"
           name="colors"
           onBlur={[Function]}
           onChange={[Function]}
@@ -11441,7 +11443,7 @@ exports[`Storyshots f/FormInput Base 1`] = `
           value="blue"
         />
         <label
-          htmlFor="undefined-blue"
+          htmlFor="colors-blue"
         >
           Color Blue
         </label>
@@ -11450,8 +11452,9 @@ exports[`Storyshots f/FormInput Base 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={false}
-          id="undefined-green"
+          id="colors-green"
           name="colors"
           onBlur={[Function]}
           onChange={[Function]}
@@ -11459,7 +11462,7 @@ exports[`Storyshots f/FormInput Base 1`] = `
           value="green"
         />
         <label
-          htmlFor="undefined-green"
+          htmlFor="colors-green"
         >
           Color Green
         </label>
@@ -11470,7 +11473,7 @@ exports[`Storyshots f/FormInput Base 1`] = `
     className="base select-input form-input y-background2"
   >
     <label
-      className="base label x-main2"
+      className="base form-label x-main2"
       htmlFor="food"
     >
       What do you want for dinner ?
@@ -11532,7 +11535,7 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
     className="base text-input form-input y-background2"
   >
     <label
-      className="base label v50 mb-v x-main2"
+      className="base form-label v50 mb-v x-main2"
       htmlFor="firstName"
     >
       What's your first name ?
@@ -11552,7 +11555,7 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
     className="base text-input form-input y-background2"
   >
     <label
-      className="base label v50 mb-v x-main2"
+      className="base form-label v50 mb-v x-main2"
       htmlFor="lastName"
     >
       What's your last name ?
@@ -11571,7 +11574,7 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
     className="base text-area-input form-input y-background2"
   >
     <label
-      className="base label v50 mb-v x-main2"
+      className="base form-label v50 mb-v x-main2"
       htmlFor="description"
     >
       Describe yourself in a few sentences
@@ -11600,7 +11603,7 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
     }
   >
     <p
-      className="base label x-main2"
+      className="base form-label x-main2"
     >
       What are your favourite colors ?
     </p>
@@ -11611,8 +11614,9 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={true}
-          id="undefined-red"
+          id="colors-red"
           name="colors"
           onBlur={[Function]}
           onChange={[Function]}
@@ -11620,7 +11624,7 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
           value="red"
         />
         <label
-          htmlFor="undefined-red"
+          htmlFor="colors-red"
         >
           Color Red
         </label>
@@ -11629,8 +11633,9 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={true}
-          id="undefined-blue"
+          id="colors-blue"
           name="colors"
           onBlur={[Function]}
           onChange={[Function]}
@@ -11638,7 +11643,7 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
           value="blue"
         />
         <label
-          htmlFor="undefined-blue"
+          htmlFor="colors-blue"
         >
           Color Blue
         </label>
@@ -11647,8 +11652,9 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={true}
-          id="undefined-green"
+          id="colors-green"
           name="colors"
           onBlur={[Function]}
           onChange={[Function]}
@@ -11656,7 +11662,7 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
           value="green"
         />
         <label
-          htmlFor="undefined-green"
+          htmlFor="colors-green"
         >
           Color Green
         </label>
@@ -11667,7 +11673,7 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
     className="base select-input form-input y-background2"
   >
     <label
-      className="base label x-main2"
+      className="base form-label x-main2"
       htmlFor="food"
     >
       What do you want for dinner ?
@@ -11729,7 +11735,7 @@ exports[`Storyshots f/FormInput Extensible Form Input 1`] = `
     className="base text-input form-input y-background2"
   >
     <label
-      className="base label v50 mb-v x-main2"
+      className="base form-label v50 mb-v x-main2"
       htmlFor="extended"
     >
       Extended type input
@@ -11768,7 +11774,7 @@ exports[`Storyshots f/FormInput With Prefetched Query Select 1`] = `
     className="base text-input form-input y-background2"
   >
     <label
-      className="base label v50 mb-v x-main2"
+      className="base form-label v50 mb-v x-main2"
       htmlFor="firstName"
     >
       What's your first name ?
@@ -11794,7 +11800,7 @@ exports[`Storyshots f/FormInput With Prefetched Query Select 1`] = `
     }
   >
     <p
-      className="base label x-main2"
+      className="base form-label x-main2"
     >
       What are your favourite colors ?
     </p>
@@ -11805,8 +11811,9 @@ exports[`Storyshots f/FormInput With Prefetched Query Select 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={false}
-          id="undefined-red"
+          id="colors-red"
           name="colors"
           onBlur={[Function]}
           onChange={[Function]}
@@ -11814,7 +11821,7 @@ exports[`Storyshots f/FormInput With Prefetched Query Select 1`] = `
           value="red"
         />
         <label
-          htmlFor="undefined-red"
+          htmlFor="colors-red"
         >
           Color Red
         </label>
@@ -11823,8 +11830,9 @@ exports[`Storyshots f/FormInput With Prefetched Query Select 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={false}
-          id="undefined-blue"
+          id="colors-blue"
           name="colors"
           onBlur={[Function]}
           onChange={[Function]}
@@ -11832,7 +11840,7 @@ exports[`Storyshots f/FormInput With Prefetched Query Select 1`] = `
           value="blue"
         />
         <label
-          htmlFor="undefined-blue"
+          htmlFor="colors-blue"
         >
           Color Blue
         </label>
@@ -11841,8 +11849,9 @@ exports[`Storyshots f/FormInput With Prefetched Query Select 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={false}
-          id="undefined-green"
+          id="colors-green"
           name="colors"
           onBlur={[Function]}
           onChange={[Function]}
@@ -11850,7 +11859,7 @@ exports[`Storyshots f/FormInput With Prefetched Query Select 1`] = `
           value="green"
         />
         <label
-          htmlFor="undefined-green"
+          htmlFor="colors-green"
         >
           Color Green
         </label>
@@ -11861,7 +11870,7 @@ exports[`Storyshots f/FormInput With Prefetched Query Select 1`] = `
     className="base select-input form-input y-background2"
   >
     <label
-      className="base label x-main2"
+      className="base form-label x-main2"
       htmlFor="status"
     >
       Select Task Status
@@ -11904,7 +11913,7 @@ exports[`Storyshots f/FormInput With Query Combobox 1`] = `
     className="base text-input form-input y-background2"
   >
     <label
-      className="base label v50 mb-v x-main2"
+      className="base form-label v50 mb-v x-main2"
       htmlFor="firstName"
     >
       What's your first name ?
@@ -11930,7 +11939,7 @@ exports[`Storyshots f/FormInput With Query Combobox 1`] = `
     }
   >
     <p
-      className="base label x-main2"
+      className="base form-label x-main2"
     >
       What are your favourite colors ?
     </p>
@@ -11941,8 +11950,9 @@ exports[`Storyshots f/FormInput With Query Combobox 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={false}
-          id="undefined-red"
+          id="colors-red"
           name="colors"
           onBlur={[Function]}
           onChange={[Function]}
@@ -11950,7 +11960,7 @@ exports[`Storyshots f/FormInput With Query Combobox 1`] = `
           value="red"
         />
         <label
-          htmlFor="undefined-red"
+          htmlFor="colors-red"
         >
           Color Red
         </label>
@@ -11959,8 +11969,9 @@ exports[`Storyshots f/FormInput With Query Combobox 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={false}
-          id="undefined-blue"
+          id="colors-blue"
           name="colors"
           onBlur={[Function]}
           onChange={[Function]}
@@ -11968,7 +11979,7 @@ exports[`Storyshots f/FormInput With Query Combobox 1`] = `
           value="blue"
         />
         <label
-          htmlFor="undefined-blue"
+          htmlFor="colors-blue"
         >
           Color Blue
         </label>
@@ -11977,8 +11988,9 @@ exports[`Storyshots f/FormInput With Query Combobox 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={false}
-          id="undefined-green"
+          id="colors-green"
           name="colors"
           onBlur={[Function]}
           onChange={[Function]}
@@ -11986,7 +11998,7 @@ exports[`Storyshots f/FormInput With Query Combobox 1`] = `
           value="green"
         />
         <label
-          htmlFor="undefined-green"
+          htmlFor="colors-green"
         >
           Color Green
         </label>
@@ -11997,7 +12009,7 @@ exports[`Storyshots f/FormInput With Query Combobox 1`] = `
     className="base combobox form-input y-background2"
   >
     <label
-      className="base label x-main2"
+      className="base form-label x-main2"
       htmlFor="team"
       id="downshift-0-label"
     >
@@ -12040,7 +12052,7 @@ exports[`Storyshots f/FormInput With Query Combobox 1`] = `
     className="base multiple-combobox form-input y-background2"
   >
     <label
-      className="base label x-main2"
+      className="base form-label x-main2"
       htmlFor="teams"
       id="downshift-1-label"
     >
@@ -12104,7 +12116,7 @@ exports[`Storyshots f/FormInput With Ratings Input 1`] = `
     className="base text-input form-input y-background2"
   >
     <label
-      className="base label v50 mb-v x-main2"
+      className="base form-label v50 mb-v x-main2"
       htmlFor="firstName"
     >
       What's your first name ?
@@ -12124,7 +12136,7 @@ exports[`Storyshots f/FormInput With Ratings Input 1`] = `
     className="base ratings-input form-input"
   >
     <label
-      className="base label input-label v50 mb-v x-main2"
+      className="base form-label input-label v50 mb-v x-main2"
       htmlFor="ratings"
     >
       Your Rating
@@ -12279,7 +12291,7 @@ exports[`Storyshots f/common/Description Base 1`] = `
 
 exports[`Storyshots f/common/Label Base 1`] = `
 <label
-  className="base label x-main2"
+  className="base form-label x-main2"
 >
   Sample Label
 </label>
@@ -12470,7 +12482,7 @@ exports[`Storyshots f/fields/Checkbox With Label 1`] = `
     className="base checkbox"
   >
     <label
-      className="base label x-main2"
+      className="base form-label x-main2"
       htmlFor="urgent"
     >
       Urgent
@@ -12523,8 +12535,9 @@ exports[`Storyshots f/fields/ChoicesInput Base 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={false}
-          id="colors-red"
+          id="color-red"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -12532,7 +12545,7 @@ exports[`Storyshots f/fields/ChoicesInput Base 1`] = `
           value="red"
         />
         <label
-          htmlFor="colors-red"
+          htmlFor="color-red"
         >
           Color Red
         </label>
@@ -12541,8 +12554,9 @@ exports[`Storyshots f/fields/ChoicesInput Base 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={false}
-          id="colors-blue"
+          id="color-blue"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -12550,7 +12564,7 @@ exports[`Storyshots f/fields/ChoicesInput Base 1`] = `
           value="blue"
         />
         <label
-          htmlFor="colors-blue"
+          htmlFor="color-blue"
         >
           Color Blue
         </label>
@@ -12559,8 +12573,9 @@ exports[`Storyshots f/fields/ChoicesInput Base 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={false}
-          id="colors-green"
+          id="color-green"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -12568,7 +12583,7 @@ exports[`Storyshots f/fields/ChoicesInput Base 1`] = `
           value="green"
         />
         <label
-          htmlFor="colors-green"
+          htmlFor="color-green"
         >
           Color Green
         </label>
@@ -12577,8 +12592,9 @@ exports[`Storyshots f/fields/ChoicesInput Base 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={false}
-          id="colors-yellow"
+          id="color-yellow"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -12586,7 +12602,7 @@ exports[`Storyshots f/fields/ChoicesInput Base 1`] = `
           value="yellow"
         />
         <label
-          htmlFor="colors-yellow"
+          htmlFor="color-yellow"
         >
           Color Yellow
         </label>
@@ -12595,8 +12611,9 @@ exports[`Storyshots f/fields/ChoicesInput Base 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={false}
-          id="colors-oarnge"
+          id="color-oarnge"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -12604,7 +12621,7 @@ exports[`Storyshots f/fields/ChoicesInput Base 1`] = `
           value="oarnge"
         />
         <label
-          htmlFor="colors-oarnge"
+          htmlFor="color-oarnge"
         >
           Color Orange
         </label>
@@ -12613,8 +12630,9 @@ exports[`Storyshots f/fields/ChoicesInput Base 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={false}
-          id="colors-violet"
+          id="color-violet"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -12622,7 +12640,7 @@ exports[`Storyshots f/fields/ChoicesInput Base 1`] = `
           value="violet"
         />
         <label
-          htmlFor="colors-violet"
+          htmlFor="color-violet"
         >
           Color Violet
         </label>
@@ -12631,8 +12649,9 @@ exports[`Storyshots f/fields/ChoicesInput Base 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={false}
-          id="colors-brown"
+          id="color-brown"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -12640,7 +12659,7 @@ exports[`Storyshots f/fields/ChoicesInput Base 1`] = `
           value="brown"
         />
         <label
-          htmlFor="colors-brown"
+          htmlFor="color-brown"
         >
           Color Brown
         </label>
@@ -12649,8 +12668,9 @@ exports[`Storyshots f/fields/ChoicesInput Base 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={false}
-          id="colors-black"
+          id="color-black"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -12658,7 +12678,7 @@ exports[`Storyshots f/fields/ChoicesInput Base 1`] = `
           value="black"
         />
         <label
-          htmlFor="colors-black"
+          htmlFor="color-black"
         >
           Color Black
         </label>
@@ -12696,7 +12716,7 @@ exports[`Storyshots f/fields/ChoicesInput Choices With Label 1`] = `
     }
   >
     <p
-      className="base label x-main2"
+      className="base form-label x-main2"
     >
       Select color
     </p>
@@ -12707,8 +12727,9 @@ exports[`Storyshots f/fields/ChoicesInput Choices With Label 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={false}
-          id="colors-red"
+          id="color-red"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -12716,7 +12737,7 @@ exports[`Storyshots f/fields/ChoicesInput Choices With Label 1`] = `
           value="red"
         />
         <label
-          htmlFor="colors-red"
+          htmlFor="color-red"
         >
           Color Red
         </label>
@@ -12725,8 +12746,9 @@ exports[`Storyshots f/fields/ChoicesInput Choices With Label 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={false}
-          id="colors-blue"
+          id="color-blue"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -12734,7 +12756,7 @@ exports[`Storyshots f/fields/ChoicesInput Choices With Label 1`] = `
           value="blue"
         />
         <label
-          htmlFor="colors-blue"
+          htmlFor="color-blue"
         >
           Color Blue
         </label>
@@ -12743,8 +12765,9 @@ exports[`Storyshots f/fields/ChoicesInput Choices With Label 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={false}
-          id="colors-green"
+          id="color-green"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -12752,7 +12775,7 @@ exports[`Storyshots f/fields/ChoicesInput Choices With Label 1`] = `
           value="green"
         />
         <label
-          htmlFor="colors-green"
+          htmlFor="color-green"
         >
           Color Green
         </label>
@@ -12761,8 +12784,9 @@ exports[`Storyshots f/fields/ChoicesInput Choices With Label 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={false}
-          id="colors-yellow"
+          id="color-yellow"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -12770,7 +12794,7 @@ exports[`Storyshots f/fields/ChoicesInput Choices With Label 1`] = `
           value="yellow"
         />
         <label
-          htmlFor="colors-yellow"
+          htmlFor="color-yellow"
         >
           Color Yellow
         </label>
@@ -12779,8 +12803,9 @@ exports[`Storyshots f/fields/ChoicesInput Choices With Label 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={false}
-          id="colors-oarnge"
+          id="color-oarnge"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -12788,7 +12813,7 @@ exports[`Storyshots f/fields/ChoicesInput Choices With Label 1`] = `
           value="oarnge"
         />
         <label
-          htmlFor="colors-oarnge"
+          htmlFor="color-oarnge"
         >
           Color Orange
         </label>
@@ -12797,8 +12822,9 @@ exports[`Storyshots f/fields/ChoicesInput Choices With Label 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={false}
-          id="colors-violet"
+          id="color-violet"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -12806,7 +12832,7 @@ exports[`Storyshots f/fields/ChoicesInput Choices With Label 1`] = `
           value="violet"
         />
         <label
-          htmlFor="colors-violet"
+          htmlFor="color-violet"
         >
           Color Violet
         </label>
@@ -12815,8 +12841,9 @@ exports[`Storyshots f/fields/ChoicesInput Choices With Label 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={false}
-          id="colors-brown"
+          id="color-brown"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -12824,7 +12851,7 @@ exports[`Storyshots f/fields/ChoicesInput Choices With Label 1`] = `
           value="brown"
         />
         <label
-          htmlFor="colors-brown"
+          htmlFor="color-brown"
         >
           Color Brown
         </label>
@@ -12833,8 +12860,9 @@ exports[`Storyshots f/fields/ChoicesInput Choices With Label 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={false}
-          id="colors-black"
+          id="color-black"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -12842,7 +12870,7 @@ exports[`Storyshots f/fields/ChoicesInput Choices With Label 1`] = `
           value="black"
         />
         <label
-          htmlFor="colors-black"
+          htmlFor="color-black"
         >
           Color Black
         </label>
@@ -12880,7 +12908,7 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
     }
   >
     <p
-      className="base label x-main2"
+      className="base form-label x-main2"
     >
       Select color
     </p>
@@ -12891,8 +12919,9 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={true}
-          id="colors-red"
+          id="color-red"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -12900,7 +12929,7 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
           value="red"
         />
         <label
-          htmlFor="colors-red"
+          htmlFor="color-red"
         >
           Color Red
         </label>
@@ -12909,8 +12938,9 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={true}
-          id="colors-blue"
+          id="color-blue"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -12918,7 +12948,7 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
           value="blue"
         />
         <label
-          htmlFor="colors-blue"
+          htmlFor="color-blue"
         >
           Color Blue
         </label>
@@ -12927,8 +12957,9 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={true}
-          id="colors-green"
+          id="color-green"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -12936,7 +12967,7 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
           value="green"
         />
         <label
-          htmlFor="colors-green"
+          htmlFor="color-green"
         >
           Color Green
         </label>
@@ -12945,8 +12976,9 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={true}
-          id="colors-yellow"
+          id="color-yellow"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -12954,7 +12986,7 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
           value="yellow"
         />
         <label
-          htmlFor="colors-yellow"
+          htmlFor="color-yellow"
         >
           Color Yellow
         </label>
@@ -12963,8 +12995,9 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={true}
-          id="colors-oarnge"
+          id="color-oarnge"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -12972,7 +13005,7 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
           value="oarnge"
         />
         <label
-          htmlFor="colors-oarnge"
+          htmlFor="color-oarnge"
         >
           Color Orange
         </label>
@@ -12981,8 +13014,9 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={true}
-          id="colors-violet"
+          id="color-violet"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -12990,7 +13024,7 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
           value="violet"
         />
         <label
-          htmlFor="colors-violet"
+          htmlFor="color-violet"
         >
           Color Violet
         </label>
@@ -12999,8 +13033,9 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={true}
-          id="colors-brown"
+          id="color-brown"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -13008,7 +13043,7 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
           value="brown"
         />
         <label
-          htmlFor="colors-brown"
+          htmlFor="color-brown"
         >
           Color Brown
         </label>
@@ -13017,8 +13052,9 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={true}
-          id="colors-black"
+          id="color-black"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -13026,7 +13062,7 @@ exports[`Storyshots f/fields/ChoicesInput Disabled Choices Input 1`] = `
           value="black"
         />
         <label
-          htmlFor="colors-black"
+          htmlFor="color-black"
         >
           Color Black
         </label>
@@ -13070,8 +13106,9 @@ exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={false}
-          id="colors-red"
+          id="color-red"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -13079,7 +13116,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
           value="red"
         />
         <label
-          htmlFor="colors-red"
+          htmlFor="color-red"
         >
           Color Red
         </label>
@@ -13088,8 +13125,9 @@ exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={false}
-          id="colors-blue"
+          id="color-blue"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -13097,7 +13135,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
           value="blue"
         />
         <label
-          htmlFor="colors-blue"
+          htmlFor="color-blue"
         >
           Color Blue
         </label>
@@ -13106,8 +13144,9 @@ exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={false}
-          id="colors-green"
+          id="color-green"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -13115,7 +13154,194 @@ exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
           value="green"
         />
         <label
-          htmlFor="colors-green"
+          htmlFor="color-green"
+        >
+          Color Green
+        </label>
+      </div>
+      <div
+        className="base choice"
+      >
+        <input
+          checked={false}
+          disabled={false}
+          id="color-yellow"
+          name="color"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="checkbox"
+          value="yellow"
+        />
+        <label
+          htmlFor="color-yellow"
+        >
+          Color Yellow
+        </label>
+      </div>
+      <div
+        className="base choice"
+      >
+        <input
+          checked={false}
+          disabled={false}
+          id="color-oarnge"
+          name="color"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="checkbox"
+          value="oarnge"
+        />
+        <label
+          htmlFor="color-oarnge"
+        >
+          Color Orange
+        </label>
+      </div>
+      <div
+        className="base choice"
+      >
+        <input
+          checked={false}
+          disabled={false}
+          id="color-violet"
+          name="color"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="checkbox"
+          value="violet"
+        />
+        <label
+          htmlFor="color-violet"
+        >
+          Color Violet
+        </label>
+      </div>
+      <div
+        className="base choice"
+      >
+        <input
+          checked={false}
+          disabled={false}
+          id="color-brown"
+          name="color"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="checkbox"
+          value="brown"
+        />
+        <label
+          htmlFor="color-brown"
+        >
+          Color Brown
+        </label>
+      </div>
+      <div
+        className="base choice"
+      >
+        <input
+          checked={false}
+          disabled={false}
+          id="color-black"
+          name="color"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="checkbox"
+          value="black"
+        />
+        <label
+          htmlFor="color-black"
+        >
+          Color Black
+        </label>
+      </div>
+    </div>
+  </div>
+  <div
+    className="debugger"
+  >
+    <button
+      className="base button x-main2"
+      onClick={[Function]}
+      type="button"
+    >
+      Open FormDebugger
+    </button>
+  </div>
+</form>
+`;
+
+exports[`Storyshots f/fields/ChoicesInput Multiple With Default Formik Value 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="base choices-input multiple x-background2 y-main2"
+    id="colors"
+    style={
+      Object {
+        "--grid-columns-desktop": 3,
+        "--grid-columns-mobile": 2,
+      }
+    }
+  >
+    <div
+      className="choices"
+    >
+      <div
+        className="base choice"
+      >
+        <input
+          checked={false}
+          disabled={false}
+          id="color-red"
+          name="color"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="checkbox"
+          value="red"
+        />
+        <label
+          htmlFor="color-red"
+        >
+          Color Red
+        </label>
+      </div>
+      <div
+        className="base choice"
+      >
+        <input
+          checked={false}
+          disabled={false}
+          id="color-blue"
+          name="color"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="checkbox"
+          value="blue"
+        />
+        <label
+          htmlFor="color-blue"
+        >
+          Color Blue
+        </label>
+      </div>
+      <div
+        className="base choice"
+      >
+        <input
+          checked={false}
+          disabled={false}
+          id="color-green"
+          name="color"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="checkbox"
+          value="green"
+        />
+        <label
+          htmlFor="color-green"
         >
           Color Green
         </label>
@@ -13124,8 +13350,9 @@ exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={false}
-          id="colors-yellow"
+          id="color-yellow"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -13133,7 +13360,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
           value="yellow"
         />
         <label
-          htmlFor="colors-yellow"
+          htmlFor="color-yellow"
         >
           Color Yellow
         </label>
@@ -13142,8 +13369,9 @@ exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={false}
-          id="colors-oarnge"
+          id="color-oarnge"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -13151,7 +13379,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
           value="oarnge"
         />
         <label
-          htmlFor="colors-oarnge"
+          htmlFor="color-oarnge"
         >
           Color Orange
         </label>
@@ -13160,8 +13388,9 @@ exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={false}
-          id="colors-violet"
+          id="color-violet"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -13169,7 +13398,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
           value="violet"
         />
         <label
-          htmlFor="colors-violet"
+          htmlFor="color-violet"
         >
           Color Violet
         </label>
@@ -13178,8 +13407,9 @@ exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={false}
-          id="colors-brown"
+          id="color-brown"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -13187,7 +13417,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
           value="brown"
         />
         <label
-          htmlFor="colors-brown"
+          htmlFor="color-brown"
         >
           Color Brown
         </label>
@@ -13196,8 +13426,9 @@ exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={false}
-          id="colors-black"
+          id="color-black"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -13205,7 +13436,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple 1`] = `
           value="black"
         />
         <label
-          htmlFor="colors-black"
+          htmlFor="color-black"
         >
           Color Black
         </label>
@@ -13249,8 +13480,9 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={false}
-          id="colors-red"
+          id="color-red"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -13258,7 +13490,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
           value="red"
         />
         <label
-          htmlFor="colors-red"
+          htmlFor="color-red"
         >
           Color Red
         </label>
@@ -13267,8 +13499,9 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={false}
-          id="colors-blue"
+          id="color-blue"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -13276,7 +13509,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
           value="blue"
         />
         <label
-          htmlFor="colors-blue"
+          htmlFor="color-blue"
         >
           Color Blue
         </label>
@@ -13285,8 +13518,9 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={false}
-          id="colors-green"
+          id="color-green"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -13294,7 +13528,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
           value="green"
         />
         <label
-          htmlFor="colors-green"
+          htmlFor="color-green"
         >
           Color Green
         </label>
@@ -13303,8 +13537,9 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={false}
-          id="colors-yellow"
+          id="color-yellow"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -13312,7 +13547,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
           value="yellow"
         />
         <label
-          htmlFor="colors-yellow"
+          htmlFor="color-yellow"
         >
           Color Yellow
         </label>
@@ -13321,8 +13556,9 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={false}
-          id="colors-oarnge"
+          id="color-oarnge"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -13330,7 +13566,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
           value="oarnge"
         />
         <label
-          htmlFor="colors-oarnge"
+          htmlFor="color-oarnge"
         >
           Color Orange
         </label>
@@ -13339,8 +13575,9 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={false}
-          id="colors-violet"
+          id="color-violet"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -13348,7 +13585,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
           value="violet"
         />
         <label
-          htmlFor="colors-violet"
+          htmlFor="color-violet"
         >
           Color Violet
         </label>
@@ -13357,8 +13594,9 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={false}
-          id="colors-brown"
+          id="color-brown"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -13366,7 +13604,7 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
           value="brown"
         />
         <label
-          htmlFor="colors-brown"
+          htmlFor="color-brown"
         >
           Color Brown
         </label>
@@ -13375,8 +13613,9 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
         className="base choice"
       >
         <input
+          checked={false}
           disabled={false}
-          id="colors-black"
+          id="color-black"
           name="color"
           onBlur={[Function]}
           onChange={[Function]}
@@ -13384,7 +13623,194 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
           value="black"
         />
         <label
-          htmlFor="colors-black"
+          htmlFor="color-black"
+        >
+          Color Black
+        </label>
+      </div>
+    </div>
+  </div>
+  <div
+    className="debugger"
+  >
+    <button
+      className="base button x-main2"
+      onClick={[Function]}
+      type="button"
+    >
+      Open FormDebugger
+    </button>
+  </div>
+</form>
+`;
+
+exports[`Storyshots f/fields/ChoicesInput With Default Formik Value 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="base choices-input x-background2 y-main2"
+    id="colors"
+    style={
+      Object {
+        "--grid-columns-desktop": 3,
+        "--grid-columns-mobile": 2,
+      }
+    }
+  >
+    <div
+      className="choices"
+    >
+      <div
+        className="base choice"
+      >
+        <input
+          checked={false}
+          disabled={false}
+          id="color-red"
+          name="color"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value="red"
+        />
+        <label
+          htmlFor="color-red"
+        >
+          Color Red
+        </label>
+      </div>
+      <div
+        className="base choice"
+      >
+        <input
+          checked={false}
+          disabled={false}
+          id="color-blue"
+          name="color"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value="blue"
+        />
+        <label
+          htmlFor="color-blue"
+        >
+          Color Blue
+        </label>
+      </div>
+      <div
+        className="base choice"
+      >
+        <input
+          checked={false}
+          disabled={false}
+          id="color-green"
+          name="color"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value="green"
+        />
+        <label
+          htmlFor="color-green"
+        >
+          Color Green
+        </label>
+      </div>
+      <div
+        className="base choice"
+      >
+        <input
+          checked={false}
+          disabled={false}
+          id="color-yellow"
+          name="color"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value="yellow"
+        />
+        <label
+          htmlFor="color-yellow"
+        >
+          Color Yellow
+        </label>
+      </div>
+      <div
+        className="base choice"
+      >
+        <input
+          checked={false}
+          disabled={false}
+          id="color-oarnge"
+          name="color"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value="oarnge"
+        />
+        <label
+          htmlFor="color-oarnge"
+        >
+          Color Orange
+        </label>
+      </div>
+      <div
+        className="base choice"
+      >
+        <input
+          checked={false}
+          disabled={false}
+          id="color-violet"
+          name="color"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value="violet"
+        />
+        <label
+          htmlFor="color-violet"
+        >
+          Color Violet
+        </label>
+      </div>
+      <div
+        className="base choice"
+      >
+        <input
+          checked={false}
+          disabled={false}
+          id="color-brown"
+          name="color"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value="brown"
+        />
+        <label
+          htmlFor="color-brown"
+        >
+          Color Brown
+        </label>
+      </div>
+      <div
+        className="base choice"
+      >
+        <input
+          checked={false}
+          disabled={false}
+          id="color-black"
+          name="color"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value="black"
+        />
+        <label
+          htmlFor="color-black"
         >
           Color Black
         </label>
@@ -13415,7 +13841,7 @@ exports[`Storyshots f/fields/QueryCombobox Multiple Select 1`] = `
     className="base multiple-combobox y-background2"
   >
     <label
-      className="base label x-main2"
+      className="base form-label x-main2"
       htmlFor="teams"
       id="downshift-4-label"
     >
@@ -13496,7 +13922,7 @@ exports[`Storyshots f/fields/QueryCombobox Multiple Select With Default Formik S
     className="base multiple-combobox y-background2"
   >
     <label
-      className="base label x-main2"
+      className="base form-label x-main2"
       htmlFor="teams"
       id="downshift-5-label"
     >
@@ -13627,7 +14053,7 @@ exports[`Storyshots f/fields/QueryCombobox Single Select 1`] = `
     className="base combobox y-background2"
   >
     <label
-      className="base label x-main2"
+      className="base form-label x-main2"
       htmlFor="team"
       id="downshift-2-label"
     >
@@ -13707,7 +14133,7 @@ exports[`Storyshots f/fields/QueryCombobox Single Select With Default Formik Sta
     className="base combobox y-background2"
   >
     <label
-      className="base label x-main2"
+      className="base form-label x-main2"
       htmlFor="team"
       id="downshift-3-label"
     >
@@ -13787,7 +14213,7 @@ exports[`Storyshots f/fields/QuerySelect Base 1`] = `
     className="base select-input y-background2"
   >
     <label
-      className="base label x-main2"
+      className="base form-label x-main2"
       htmlFor="status"
     >
       Select Task Status
@@ -13830,7 +14256,7 @@ exports[`Storyshots f/fields/QuerySelect Loading Options 1`] = `
     className="base select-input y-background2"
   >
     <label
-      className="base label x-main2"
+      className="base form-label x-main2"
       htmlFor="status"
     >
       Select Task Status
@@ -13873,7 +14299,7 @@ exports[`Storyshots f/fields/QuerySelect With Default Value 1`] = `
     className="base select-input y-background2"
   >
     <label
-      className="base label x-main2"
+      className="base form-label x-main2"
       htmlFor="status"
     >
       Select Task Status
@@ -13916,7 +14342,7 @@ exports[`Storyshots f/fields/RatingsInput Base 1`] = `
     className="base ratings-input"
   >
     <label
-      className="base label input-label v50 mb-v x-main2"
+      className="base form-label input-label v50 mb-v x-main2"
       htmlFor="ratings"
     >
       Your Rating
@@ -14065,7 +14491,7 @@ exports[`Storyshots f/fields/RatingsInput Labels 1`] = `
     className="base ratings-input"
   >
     <label
-      className="base label input-label v50 mb-v x-main2"
+      className="base form-label input-label v50 mb-v x-main2"
       htmlFor="ratings"
     >
       Your Rating
@@ -14249,7 +14675,7 @@ exports[`Storyshots f/fields/RatingsInput Numbers 1`] = `
     className="base ratings-input"
   >
     <label
-      className="base label input-label v50 mb-v x-main2"
+      className="base form-label input-label v50 mb-v x-main2"
       htmlFor="ratings"
     >
       Your Rating
@@ -14423,7 +14849,7 @@ exports[`Storyshots f/fields/SelectInput Base 1`] = `
     className="base select-input y-background2"
   >
     <label
-      className="base label x-main2"
+      className="base form-label x-main2"
       htmlFor="workType"
     >
       Work Type
@@ -14491,7 +14917,7 @@ exports[`Storyshots f/fields/SelectInput Disabled Select Input 1`] = `
     className="base select-input y-background2"
   >
     <label
-      className="base label x-main2"
+      className="base form-label x-main2"
       htmlFor="workType"
     >
       Work Type
@@ -14559,7 +14985,7 @@ exports[`Storyshots f/fields/SelectInput Required 1`] = `
     className="base select-input y-background2"
   >
     <label
-      className="base label x-main2"
+      className="base form-label x-main2"
       htmlFor="workType"
     >
       Work Type
@@ -14627,7 +15053,7 @@ exports[`Storyshots f/fields/SelectInput String And Objects 1`] = `
     className="base select-input y-background2"
   >
     <label
-      className="base label x-main2"
+      className="base form-label x-main2"
       htmlFor="workType"
     >
       Work Type
@@ -14716,7 +15142,7 @@ exports[`Storyshots f/fields/TextInput Base 1`] = `
       className="base text-input y-background2"
     >
       <label
-        className="base label v50 mb-v x-main2"
+        className="base form-label v50 mb-v x-main2"
         htmlFor="firstName"
       >
         What's your first name ?
@@ -14760,7 +15186,7 @@ exports[`Storyshots f/fields/TextInput Date 1`] = `
       className="base text-input y-background2"
     >
       <label
-        className="base label v50 mb-v x-main2"
+        className="base form-label v50 mb-v x-main2"
         htmlFor="date"
       >
         Select date
@@ -14804,7 +15230,7 @@ exports[`Storyshots f/fields/TextInput Time 1`] = `
       className="base text-input y-background2"
     >
       <label
-        className="base label v50 mb-v x-main2"
+        className="base form-label v50 mb-v x-main2"
         htmlFor="time"
       >
         Select time
@@ -14848,7 +15274,7 @@ exports[`Storyshots f/fields/TextInput With Auto Complete Off 1`] = `
       className="base text-input y-background2"
     >
       <label
-        className="base label v50 mb-v x-main2"
+        className="base form-label v50 mb-v x-main2"
         htmlFor="firstName"
       >
         What's your first name ?
@@ -14893,7 +15319,7 @@ exports[`Storyshots f/fields/TextInput With Disabled 1`] = `
       className="base text-input y-background2"
     >
       <label
-        className="base label v50 mb-v x-main2"
+        className="base form-label v50 mb-v x-main2"
         htmlFor="firstName"
       >
         What's your first name ?
@@ -14937,7 +15363,7 @@ exports[`Storyshots f/fields/TextInput With Placeholder 1`] = `
       className="base text-input y-background2"
     >
       <label
-        className="base label v50 mb-v x-main2"
+        className="base form-label v50 mb-v x-main2"
         htmlFor="firstName"
       >
         What's your first name ?
@@ -14982,7 +15408,7 @@ exports[`Storyshots f/fields/TextInput With Validation 1`] = `
       className="base text-input y-background2"
     >
       <label
-        className="base label v50 mb-v x-main2"
+        className="base form-label v50 mb-v x-main2"
         htmlFor="firstName"
       >
         What's your first name ?
@@ -15023,7 +15449,7 @@ exports[`Storyshots f/fields/TextareaInput Base 1`] = `
     className="base text-area-input y-background2"
   >
     <label
-      className="base label v50 mb-v x-main2"
+      className="base form-label v50 mb-v x-main2"
       htmlFor="feedback"
     >
       What can we improve on?
@@ -15067,7 +15493,7 @@ exports[`Storyshots f/fields/TextareaInput Disable Resize 1`] = `
     className="base text-area-input y-background2"
   >
     <label
-      className="base label v50 mb-v x-main2"
+      className="base form-label v50 mb-v x-main2"
       htmlFor="feedback"
     >
       What can we improve on?
@@ -15111,7 +15537,7 @@ exports[`Storyshots f/fields/TextareaInput Disabled 1`] = `
     className="base text-area-input y-background2"
   >
     <label
-      className="base label v50 mb-v x-main2"
+      className="base form-label v50 mb-v x-main2"
       htmlFor="feedback"
     >
       What can we improve on?
@@ -15155,7 +15581,7 @@ exports[`Storyshots f/fields/TextareaInput Horizontal Resize 1`] = `
     className="base text-area-input y-background2"
   >
     <label
-      className="base label v50 mb-v x-main2"
+      className="base form-label v50 mb-v x-main2"
       htmlFor="feedback"
     >
       What can we improve on?
@@ -15199,7 +15625,7 @@ exports[`Storyshots f/fields/TextareaInput Placeholder 1`] = `
     className="base text-area-input y-background2"
   >
     <label
-      className="base label v50 mb-v x-main2"
+      className="base form-label v50 mb-v x-main2"
       htmlFor="feedback"
     >
       What can we improve on?
@@ -15244,7 +15670,7 @@ exports[`Storyshots f/fields/TextareaInput Validation 1`] = `
     className="base text-area-input y-background2"
   >
     <label
-      className="base label v50 mb-v x-main2"
+      className="base form-label v50 mb-v x-main2"
       htmlFor="feedback"
     >
       What can we improve on?
@@ -15288,7 +15714,7 @@ exports[`Storyshots f/fields/TextareaInput Vertical Resize 1`] = `
     className="base text-area-input y-background2"
   >
     <label
-      className="base label v50 mb-v x-main2"
+      className="base form-label v50 mb-v x-main2"
       htmlFor="feedback"
     >
       What can we improve on?