@pareto-engineering/design-system 4.0.0-alpha.28 → 4.0.0-alpha.33

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

@@ -2156,7 +2156,7 @@ exports[`Storyshots a/MetaCard With Blur 1`] = `
 
 exports[`Storyshots a/People Base 1`] = `
 <div
-  className="x-background1 b-x v1 p-v"
+  className="x-background-far b-x v1 p-v"
 >
   <div
     className="base people u1"
@@ -2242,7 +2242,7 @@ exports[`Storyshots a/People Base 1`] = `
 
 exports[`Storyshots a/People One Person 1`] = `
 <div
-  className="x-background1 b-x v1 p-v"
+  className="x-background-far b-x v1 p-v"
 >
   <div
     className="base people u1"
@@ -2333,7 +2333,7 @@ exports[`Storyshots a/Popover Bottom Left 1`] = `
       Open Popover
     </button>
     <div
-      className="base popover x-background1 bottom left"
+      className="base popover x-background-near bottom left"
     >
       <ul>
         <li>
@@ -2436,7 +2436,7 @@ exports[`Storyshots a/Popover Bottom Right 1`] = `
       Open Popover
     </button>
     <div
-      className="base popover x-background1 bottom right"
+      className="base popover x-background-near bottom right"
     >
       <ul>
         <li>
@@ -2539,7 +2539,7 @@ exports[`Storyshots a/Popover Top Left 1`] = `
       Open Popover
     </button>
     <div
-      className="base popover x-background1 top left"
+      className="base popover x-background-near top left"
     >
       <ul>
         <li>
@@ -2642,7 +2642,7 @@ exports[`Storyshots a/Popover Top Right 1`] = `
       Open Popover
     </button>
     <div
-      className="base popover x-background1 top right"
+      className="base popover x-background-near top right"
     >
       <ul>
         <li>
@@ -2750,7 +2750,7 @@ exports[`Storyshots a/ProgressBar Height 1`] = `
 
 exports[`Storyshots a/Quote Base 1`] = `
 <div
-  className="y-background1 b-y u1 p-u"
+  className="y-background-far b-y u1 p-u"
 >
   <figure
     className="base quote x-main1"
@@ -2942,7 +2942,7 @@ exports[`Storyshots a/SnapScroller Base 1`] = `
     className="card"
     style={
       {
-        "background": "var(--background1)",
+        "background": "var(--background-far)",
         "height": "400px",
         "minWidth": "330px",
         "padding": "var(--u)",
@@ -2955,7 +2955,7 @@ exports[`Storyshots a/SnapScroller Base 1`] = `
     className="card"
     style={
       {
-        "background": "var(--background1)",
+        "background": "var(--background-far)",
         "height": "400px",
         "minWidth": "330px",
         "padding": "var(--u)",
@@ -2968,7 +2968,7 @@ exports[`Storyshots a/SnapScroller Base 1`] = `
     className="card"
     style={
       {
-        "background": "var(--background1)",
+        "background": "var(--background-far)",
         "height": "400px",
         "minWidth": "330px",
         "padding": "var(--u)",
@@ -2981,7 +2981,7 @@ exports[`Storyshots a/SnapScroller Base 1`] = `
     className="card"
     style={
       {
-        "background": "var(--background1)",
+        "background": "var(--background-far)",
         "height": "400px",
         "minWidth": "330px",
         "padding": "var(--u)",
@@ -2994,7 +2994,7 @@ exports[`Storyshots a/SnapScroller Base 1`] = `
     className="card"
     style={
       {
-        "background": "var(--background1)",
+        "background": "var(--background-far)",
         "height": "400px",
         "minWidth": "330px",
         "padding": "var(--u)",
@@ -3019,7 +3019,7 @@ exports[`Storyshots a/SnapScroller No Scroll On Desktop 1`] = `
     className="card"
     style={
       {
-        "background": "var(--background1)",
+        "background": "var(--background-far)",
         "height": "400px",
         "padding": "var(--u)",
         "width": "330px",
@@ -3032,7 +3032,7 @@ exports[`Storyshots a/SnapScroller No Scroll On Desktop 1`] = `
     className="card"
     style={
       {
-        "background": "var(--background1)",
+        "background": "var(--background-far)",
         "height": "400px",
         "padding": "var(--u)",
         "width": "330px",
@@ -3045,7 +3045,7 @@ exports[`Storyshots a/SnapScroller No Scroll On Desktop 1`] = `
     className="card"
     style={
       {
-        "background": "var(--background1)",
+        "background": "var(--background-far)",
         "height": "400px",
         "padding": "var(--u)",
         "width": "330px",
@@ -3058,7 +3058,7 @@ exports[`Storyshots a/SnapScroller No Scroll On Desktop 1`] = `
     className="card"
     style={
       {
-        "background": "var(--background1)",
+        "background": "var(--background-far)",
         "height": "400px",
         "padding": "var(--u)",
         "width": "330px",
@@ -3071,7 +3071,7 @@ exports[`Storyshots a/SnapScroller No Scroll On Desktop 1`] = `
     className="card"
     style={
       {
-        "background": "var(--background1)",
+        "background": "var(--background-far)",
         "height": "400px",
         "padding": "var(--u)",
         "width": "330px",
@@ -3085,7 +3085,7 @@ exports[`Storyshots a/SnapScroller No Scroll On Desktop 1`] = `
 
 exports[`Storyshots a/Spinner Base 1`] = `
 <div
-  className="y-background1 b-y"
+  className="y-background-far b-y"
 >
   <div
     className="base spinner x-main1"
@@ -14129,7 +14129,7 @@ exports[`Storyshots b/SocialMediaButton Transparent 1`] = `
 
 exports[`Storyshots b/ThemeSelector Base 1`] = `
 <div
-  className="ui-undefined y-background1 b-y"
+  className="ui-undefined y-background-far b-y"
 >
   <p>
     Theme :
@@ -14162,7 +14162,7 @@ exports[`Storyshots b/Title Sizes 1`] = `
     className="u2 pv-u"
   >
     <div
-      className="y-background2 b-hard-y"
+      className="y-background-far b-hard-y"
     >
       <div
         className="base title"
@@ -14184,7 +14184,7 @@ exports[`Storyshots b/Title Sizes 1`] = `
     className="u2 pv-u"
   >
     <div
-      className="y-background2 b-hard-y"
+      className="y-background-far b-hard-y"
     >
       <div
         className="base title"
@@ -14206,7 +14206,7 @@ exports[`Storyshots b/Title Sizes 1`] = `
     className="u2 pv-u"
   >
     <div
-      className="y-background2 b-hard-y"
+      className="y-background-far b-hard-y"
     >
       <div
         className="base title"
@@ -14228,7 +14228,7 @@ exports[`Storyshots b/Title Sizes 1`] = `
     className="u2 pv-u"
   >
     <div
-      className="y-background2 b-hard-y"
+      className="y-background-far b-hard-y"
     >
       <div
         className="base title"
@@ -14250,7 +14250,7 @@ exports[`Storyshots b/Title Sizes 1`] = `
     className="u2 pv-u"
   >
     <div
-      className="y-background2 b-hard-y"
+      className="y-background-far b-hard-y"
     >
       <div
         className="base title"
@@ -14298,7 +14298,7 @@ exports[`Storyshots c/ContentSlides Base 1`] = `
   }
 >
   <div
-    className="base content-slides y-background1 b-dark-y u1 md-u2"
+    className="base content-slides y-background-far b-dark-y u1 md-u2"
   >
     <nav
       className="sidebar"
@@ -14398,7 +14398,7 @@ exports[`Storyshots c/ContentSlides Base 1`] = `
       className="horizontal-menu"
     >
       <div
-        className="base progress-bar modifierAttached x-main2 y-background1 b-hard-y"
+        className="base progress-bar modifierAttached x-main2 y-background-far b-hard-y"
         data-length="50%"
         style={
           {
@@ -14643,13 +14643,13 @@ exports[`Storyshots c/ContentSlides Simple 1`] = `
   }
 >
   <div
-    className="base content-slides y-background1 b-dark-y simple u1 md-u2"
+    className="base content-slides y-background-far b-dark-y simple u1 md-u2"
   >
     <div
       className="horizontal-menu"
     >
       <div
-        className="base progress-bar modifierAttached x-main2 y-background1 b-hard-y"
+        className="base progress-bar modifierAttached x-main2 y-background-far b-hard-y"
         data-length="50%"
         style={
           {
@@ -14956,7 +14956,7 @@ exports[`Storyshots f/FormInput Base 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="base text-input form-input y-background2"
+    className="base text-input form-input y-main"
   >
     <label
       className="base form-label v50 mb-v x-main2"
@@ -14981,7 +14981,7 @@ exports[`Storyshots f/FormInput Base 1`] = `
     </div>
   </div>
   <div
-    className="base text-input form-input y-background2"
+    className="base text-input form-input y-main"
   >
     <label
       className="base form-label v50 mb-v x-main2"
@@ -15005,7 +15005,7 @@ exports[`Storyshots f/FormInput Base 1`] = `
     </div>
   </div>
   <div
-    className="base text-area-input form-input y-background2"
+    className="base text-area-input form-input y-background-inputs"
   >
     <label
       className="base form-label v50 mb-v x-main2"
@@ -15019,7 +15019,7 @@ exports[`Storyshots f/FormInput Base 1`] = `
       name="description"
       onBlur={[Function]}
       onChange={[Function]}
-      rows={3}
+      rows={10}
       style={
         {
           "resize": "vertical",
@@ -15189,7 +15189,7 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="base text-input form-input y-background2"
+    className="base text-input form-input y-main"
   >
     <label
       className="base form-label v50 mb-v x-main2"
@@ -15214,7 +15214,7 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
     </div>
   </div>
   <div
-    className="base text-input form-input y-background2"
+    className="base text-input form-input y-main"
   >
     <label
       className="base form-label v50 mb-v x-main2"
@@ -15238,7 +15238,7 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
     </div>
   </div>
   <div
-    className="base text-area-input form-input y-background2"
+    className="base text-area-input form-input y-background-inputs"
   >
     <label
       className="base form-label v50 mb-v x-main2"
@@ -15252,7 +15252,7 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
       name="description"
       onBlur={[Function]}
       onChange={[Function]}
-      rows={3}
+      rows={10}
       style={
         {
           "resize": "vertical",
@@ -15402,7 +15402,7 @@ exports[`Storyshots f/FormInput Extensible Form Input 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="base text-input form-input y-background2"
+    className="base text-input form-input y-main"
   >
     <label
       className="base form-label v50 mb-v x-main2"
@@ -15446,7 +15446,7 @@ exports[`Storyshots f/FormInput With Prefetched Query Select 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="base text-input form-input y-background2"
+    className="base text-input form-input y-main"
   >
     <label
       className="base form-label v50 mb-v x-main2"
@@ -15550,7 +15550,7 @@ exports[`Storyshots f/FormInput With Prefetched Query Select 1`] = `
     </div>
   </div>
   <div
-    className="base select-input form-input y-background2"
+    className="base select-input form-input y-background-far"
   >
     <label
       className="base form-label x-main2"
@@ -15593,7 +15593,7 @@ exports[`Storyshots f/FormInput With Query Combobox 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="base text-input form-input y-background2"
+    className="base text-input form-input y-main"
   >
     <label
       className="base form-label v50 mb-v x-main2"
@@ -15697,7 +15697,7 @@ exports[`Storyshots f/FormInput With Query Combobox 1`] = `
     </div>
   </div>
   <div
-    className="base combobox form-input y-background2"
+    className="base combobox form-input y-background-near"
   >
     <label
       className="base form-label x-main2"
@@ -15728,7 +15728,7 @@ exports[`Storyshots f/FormInput With Query Combobox 1`] = `
       />
     </div>
     <div
-      className="base popover x-background1 bottom left"
+      className="base popover x-background-near bottom left"
     >
       <ul
         aria-labelledby="downshift-0-label"
@@ -15740,7 +15740,7 @@ exports[`Storyshots f/FormInput With Query Combobox 1`] = `
     </div>
   </div>
   <div
-    className="base multiple-combobox form-input y-background2"
+    className="base multiple-combobox form-input y-background-near"
   >
     <label
       className="base form-label x-main2"
@@ -15772,7 +15772,7 @@ exports[`Storyshots f/FormInput With Query Combobox 1`] = `
       />
     </div>
     <div
-      className="base popover x-background1 bottom left"
+      className="base popover x-background-near bottom left"
     >
       <ul
         aria-labelledby="downshift-1-label"
@@ -15804,7 +15804,7 @@ exports[`Storyshots f/FormInput With Ratings Input 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="base text-input form-input y-background2"
+    className="base text-input form-input y-main"
   >
     <label
       className="base form-label v50 mb-v x-main2"
@@ -15841,7 +15841,7 @@ exports[`Storyshots f/FormInput With Ratings Input 1`] = `
       className="stars"
     >
       <div
-        className="base rating x-main1 y-background2"
+        className="base rating x-main y-background-far"
       >
         <label
           htmlFor="ratings-1"
@@ -15849,7 +15849,7 @@ exports[`Storyshots f/FormInput With Ratings Input 1`] = `
           onMouseLeave={[Function]}
         >
           <span
-            className="f-icons c-hard-y"
+            className="icon c-hard-y"
           >
             [
           </span>
@@ -15864,7 +15864,7 @@ exports[`Storyshots f/FormInput With Ratings Input 1`] = `
         />
       </div>
       <div
-        className="base rating x-main1 y-background2"
+        className="base rating x-main y-background-far"
       >
         <label
           htmlFor="ratings-2"
@@ -15872,7 +15872,7 @@ exports[`Storyshots f/FormInput With Ratings Input 1`] = `
           onMouseLeave={[Function]}
         >
           <span
-            className="f-icons c-hard-y"
+            className="icon c-hard-y"
           >
             [
           </span>
@@ -15887,7 +15887,7 @@ exports[`Storyshots f/FormInput With Ratings Input 1`] = `
         />
       </div>
       <div
-        className="base rating x-main1 y-background2"
+        className="base rating x-main y-background-far"
       >
         <label
           htmlFor="ratings-3"
@@ -15895,7 +15895,7 @@ exports[`Storyshots f/FormInput With Ratings Input 1`] = `
           onMouseLeave={[Function]}
         >
           <span
-            className="f-icons c-hard-y"
+            className="icon c-hard-y"
           >
             [
           </span>
@@ -15910,7 +15910,7 @@ exports[`Storyshots f/FormInput With Ratings Input 1`] = `
         />
       </div>
       <div
-        className="base rating x-main1 y-background2"
+        className="base rating x-main y-background-far"
       >
         <label
           htmlFor="ratings-4"
@@ -15918,7 +15918,7 @@ exports[`Storyshots f/FormInput With Ratings Input 1`] = `
           onMouseLeave={[Function]}
         >
           <span
-            className="f-icons c-hard-y"
+            className="icon c-hard-y"
           >
             [
           </span>
@@ -15933,7 +15933,7 @@ exports[`Storyshots f/FormInput With Ratings Input 1`] = `
         />
       </div>
       <div
-        className="base rating x-main1 y-background2"
+        className="base rating x-main y-background-far"
       >
         <label
           htmlFor="ratings-5"
@@ -15941,7 +15941,7 @@ exports[`Storyshots f/FormInput With Ratings Input 1`] = `
           onMouseLeave={[Function]}
         >
           <span
-            className="f-icons c-hard-y"
+            className="icon c-hard-y"
           >
             [
           </span>
@@ -17926,7 +17926,7 @@ exports[`Storyshots f/fields/QueryCombobox Multiple Select 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="base multiple-combobox y-background2"
+    className="base multiple-combobox y-background-near"
   >
     <label
       className="base form-label x-main2"
@@ -17958,7 +17958,7 @@ exports[`Storyshots f/fields/QueryCombobox Multiple Select 1`] = `
       />
     </div>
     <div
-      className="base popover x-background1 bottom left"
+      className="base popover x-background-near bottom left"
     >
       <ul
         aria-labelledby="downshift-2-label"
@@ -18007,7 +18007,7 @@ exports[`Storyshots f/fields/QueryCombobox Multiple Select With Default Formik S
   onSubmit={[Function]}
 >
   <div
-    className="base multiple-combobox y-background2"
+    className="base multiple-combobox y-background-near"
   >
     <label
       className="base form-label x-main2"
@@ -18026,7 +18026,7 @@ exports[`Storyshots f/fields/QueryCombobox Multiple Select With Default Formik S
         tabIndex={-1}
       >
         <button
-          className="base button x-background2 modifierCompact modifierSimple"
+          className="base button x-background-near modifierCompact modifierSimple"
           onClick={[Function]}
           type="button"
         >
@@ -18039,7 +18039,7 @@ exports[`Storyshots f/fields/QueryCombobox Multiple Select With Default Formik S
               Apple
             </span>
             <span
-              className="f-icons close"
+              className="icon close"
             >
               Y
             </span>
@@ -18053,7 +18053,7 @@ exports[`Storyshots f/fields/QueryCombobox Multiple Select With Default Formik S
         tabIndex={-1}
       >
         <button
-          className="base button x-background2 modifierCompact modifierSimple"
+          className="base button x-background-near modifierCompact modifierSimple"
           onClick={[Function]}
           type="button"
         >
@@ -18066,7 +18066,7 @@ exports[`Storyshots f/fields/QueryCombobox Multiple Select With Default Formik S
               Pear
             </span>
             <span
-              className="f-icons close"
+              className="icon close"
             >
               Y
             </span>
@@ -18097,7 +18097,7 @@ exports[`Storyshots f/fields/QueryCombobox Multiple Select With Default Formik S
       />
     </div>
     <div
-      className="base popover x-background1 bottom left"
+      className="base popover x-background-near bottom left"
     >
       <ul
         aria-labelledby="downshift-3-label"
@@ -18146,7 +18146,7 @@ exports[`Storyshots f/fields/QueryCombobox Optional 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="base combobox y-background2"
+    className="base combobox y-background-near"
   >
     <label
       className="base form-label x-main2"
@@ -18178,7 +18178,7 @@ exports[`Storyshots f/fields/QueryCombobox Optional 1`] = `
       />
     </div>
     <div
-      className="base popover x-background1 bottom left"
+      className="base popover x-background-near bottom left"
     >
       <ul
         aria-labelledby="downshift-4-label"
@@ -18227,7 +18227,7 @@ exports[`Storyshots f/fields/QueryCombobox Single Select 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="base combobox y-background2"
+    className="base combobox y-background-near"
   >
     <label
       className="base form-label x-main2"
@@ -18258,7 +18258,7 @@ exports[`Storyshots f/fields/QueryCombobox Single Select 1`] = `
       />
     </div>
     <div
-      className="base popover x-background1 bottom left"
+      className="base popover x-background-near bottom left"
     >
       <ul
         aria-labelledby="downshift-5-label"
@@ -18307,7 +18307,7 @@ exports[`Storyshots f/fields/QueryCombobox Single Select With Default Formik Sta
   onSubmit={[Function]}
 >
   <div
-    className="base combobox y-background2"
+    className="base combobox y-background-near"
   >
     <label
       className="base form-label x-main2"
@@ -18337,7 +18337,7 @@ exports[`Storyshots f/fields/QueryCombobox Single Select With Default Formik Sta
         value="Apple"
       />
       <button
-        className="base button x-main2 modifierCompact modifierSimple"
+        className="base button x-heading modifierCompact modifierSimple"
         onClick={[Function]}
         type="button"
       >
@@ -18345,7 +18345,7 @@ exports[`Storyshots f/fields/QueryCombobox Single Select With Default Formik Sta
           className="modifierUnderlined"
         >
           <span
-            className="f-icons"
+            className="icon"
           >
             Y
           </span>
@@ -18353,7 +18353,7 @@ exports[`Storyshots f/fields/QueryCombobox Single Select With Default Formik Sta
       </button>
     </div>
     <div
-      className="base popover x-background1 bottom left"
+      className="base popover x-background-near bottom left"
     >
       <ul
         aria-labelledby="downshift-6-label"
@@ -18402,7 +18402,7 @@ exports[`Storyshots f/fields/QuerySelect Base 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="base select-input y-background2"
+    className="base select-input y-background-far"
   >
     <label
       className="base form-label x-main2"
@@ -18445,7 +18445,7 @@ exports[`Storyshots f/fields/QuerySelect Loading Options 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="base select-input y-background2"
+    className="base select-input y-background-far"
   >
     <label
       className="base form-label x-main2"
@@ -18488,7 +18488,7 @@ exports[`Storyshots f/fields/QuerySelect Optional 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="base select-input y-background2"
+    className="base select-input y-background-far"
   >
     <label
       className="base form-label x-main2"
@@ -18532,7 +18532,7 @@ exports[`Storyshots f/fields/QuerySelect With Default Value 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="base select-input y-background2"
+    className="base select-input y-background-far"
   >
     <label
       className="base form-label x-main2"
@@ -18587,7 +18587,7 @@ exports[`Storyshots f/fields/RatingsInput Base 1`] = `
       className="stars"
     >
       <div
-        className="base rating x-main1 y-background2"
+        className="base rating x-main y-background-far"
       >
         <label
           htmlFor="ratings-1"
@@ -18595,7 +18595,7 @@ exports[`Storyshots f/fields/RatingsInput Base 1`] = `
           onMouseLeave={[Function]}
         >
           <span
-            className="f-icons c-hard-y"
+            className="icon c-hard-y"
           >
             [
           </span>
@@ -18610,7 +18610,7 @@ exports[`Storyshots f/fields/RatingsInput Base 1`] = `
         />
       </div>
       <div
-        className="base rating x-main1 y-background2"
+        className="base rating x-main y-background-far"
       >
         <label
           htmlFor="ratings-2"
@@ -18618,7 +18618,7 @@ exports[`Storyshots f/fields/RatingsInput Base 1`] = `
           onMouseLeave={[Function]}
         >
           <span
-            className="f-icons c-hard-y"
+            className="icon c-hard-y"
           >
             [
           </span>
@@ -18633,7 +18633,7 @@ exports[`Storyshots f/fields/RatingsInput Base 1`] = `
         />
       </div>
       <div
-        className="base rating x-main1 y-background2"
+        className="base rating x-main y-background-far"
       >
         <label
           htmlFor="ratings-3"
@@ -18641,7 +18641,7 @@ exports[`Storyshots f/fields/RatingsInput Base 1`] = `
           onMouseLeave={[Function]}
         >
           <span
-            className="f-icons c-hard-y"
+            className="icon c-hard-y"
           >
             [
           </span>
@@ -18656,7 +18656,7 @@ exports[`Storyshots f/fields/RatingsInput Base 1`] = `
         />
       </div>
       <div
-        className="base rating x-main1 y-background2"
+        className="base rating x-main y-background-far"
       >
         <label
           htmlFor="ratings-4"
@@ -18664,7 +18664,7 @@ exports[`Storyshots f/fields/RatingsInput Base 1`] = `
           onMouseLeave={[Function]}
         >
           <span
-            className="f-icons c-hard-y"
+            className="icon c-hard-y"
           >
             [
           </span>
@@ -18679,7 +18679,7 @@ exports[`Storyshots f/fields/RatingsInput Base 1`] = `
         />
       </div>
       <div
-        className="base rating x-main1 y-background2"
+        className="base rating x-main y-background-far"
       >
         <label
           htmlFor="ratings-5"
@@ -18687,7 +18687,7 @@ exports[`Storyshots f/fields/RatingsInput Base 1`] = `
           onMouseLeave={[Function]}
         >
           <span
-            className="f-icons c-hard-y"
+            className="icon c-hard-y"
           >
             [
           </span>
@@ -18741,7 +18741,7 @@ exports[`Storyshots f/fields/RatingsInput Labels 1`] = `
         not satisfied.
       </p>
       <div
-        className="base rating x-main1 y-background2"
+        className="base rating x-main y-background-far"
       >
         <label
           htmlFor="ratings-1"
@@ -18754,7 +18754,7 @@ exports[`Storyshots f/fields/RatingsInput Labels 1`] = `
             1
           </span>
           <span
-            className="f-icons c-hard-y"
+            className="icon c-hard-y"
           >
             [
           </span>
@@ -18769,7 +18769,7 @@ exports[`Storyshots f/fields/RatingsInput Labels 1`] = `
         />
       </div>
       <div
-        className="base rating x-main1 y-background2"
+        className="base rating x-main y-background-far"
       >
         <label
           htmlFor="ratings-2"
@@ -18782,7 +18782,7 @@ exports[`Storyshots f/fields/RatingsInput Labels 1`] = `
             2
           </span>
           <span
-            className="f-icons c-hard-y"
+            className="icon c-hard-y"
           >
             [
           </span>
@@ -18797,7 +18797,7 @@ exports[`Storyshots f/fields/RatingsInput Labels 1`] = `
         />
       </div>
       <div
-        className="base rating x-main1 y-background2"
+        className="base rating x-main y-background-far"
       >
         <label
           htmlFor="ratings-3"
@@ -18810,7 +18810,7 @@ exports[`Storyshots f/fields/RatingsInput Labels 1`] = `
             3
           </span>
           <span
-            className="f-icons c-hard-y"
+            className="icon c-hard-y"
           >
             [
           </span>
@@ -18825,7 +18825,7 @@ exports[`Storyshots f/fields/RatingsInput Labels 1`] = `
         />
       </div>
       <div
-        className="base rating x-main1 y-background2"
+        className="base rating x-main y-background-far"
       >
         <label
           htmlFor="ratings-4"
@@ -18838,7 +18838,7 @@ exports[`Storyshots f/fields/RatingsInput Labels 1`] = `
             4
           </span>
           <span
-            className="f-icons c-hard-y"
+            className="icon c-hard-y"
           >
             [
           </span>
@@ -18853,7 +18853,7 @@ exports[`Storyshots f/fields/RatingsInput Labels 1`] = `
         />
       </div>
       <div
-        className="base rating x-main1 y-background2"
+        className="base rating x-main y-background-far"
       >
         <label
           htmlFor="ratings-5"
@@ -18866,7 +18866,7 @@ exports[`Storyshots f/fields/RatingsInput Labels 1`] = `
             5
           </span>
           <span
-            className="f-icons c-hard-y"
+            className="icon c-hard-y"
           >
             [
           </span>
@@ -18920,7 +18920,7 @@ exports[`Storyshots f/fields/RatingsInput Numbers 1`] = `
       className="stars"
     >
       <div
-        className="base rating x-main1 y-background2"
+        className="base rating x-main y-background-far"
       >
         <label
           htmlFor="ratings-1"
@@ -18933,7 +18933,7 @@ exports[`Storyshots f/fields/RatingsInput Numbers 1`] = `
             1
           </span>
           <span
-            className="f-icons c-hard-y"
+            className="icon c-hard-y"
           >
             [
           </span>
@@ -18948,7 +18948,7 @@ exports[`Storyshots f/fields/RatingsInput Numbers 1`] = `
         />
       </div>
       <div
-        className="base rating x-main1 y-background2"
+        className="base rating x-main y-background-far"
       >
         <label
           htmlFor="ratings-2"
@@ -18961,7 +18961,7 @@ exports[`Storyshots f/fields/RatingsInput Numbers 1`] = `
             2
           </span>
           <span
-            className="f-icons c-hard-y"
+            className="icon c-hard-y"
           >
             [
           </span>
@@ -18976,7 +18976,7 @@ exports[`Storyshots f/fields/RatingsInput Numbers 1`] = `
         />
       </div>
       <div
-        className="base rating x-main1 y-background2"
+        className="base rating x-main y-background-far"
       >
         <label
           htmlFor="ratings-3"
@@ -18989,7 +18989,7 @@ exports[`Storyshots f/fields/RatingsInput Numbers 1`] = `
             3
           </span>
           <span
-            className="f-icons c-hard-y"
+            className="icon c-hard-y"
           >
             [
           </span>
@@ -19004,7 +19004,7 @@ exports[`Storyshots f/fields/RatingsInput Numbers 1`] = `
         />
       </div>
       <div
-        className="base rating x-main1 y-background2"
+        className="base rating x-main y-background-far"
       >
         <label
           htmlFor="ratings-4"
@@ -19017,7 +19017,7 @@ exports[`Storyshots f/fields/RatingsInput Numbers 1`] = `
             4
           </span>
           <span
-            className="f-icons c-hard-y"
+            className="icon c-hard-y"
           >
             [
           </span>
@@ -19032,7 +19032,7 @@ exports[`Storyshots f/fields/RatingsInput Numbers 1`] = `
         />
       </div>
       <div
-        className="base rating x-main1 y-background2"
+        className="base rating x-main y-background-far"
       >
         <label
           htmlFor="ratings-5"
@@ -19045,7 +19045,7 @@ exports[`Storyshots f/fields/RatingsInput Numbers 1`] = `
             5
           </span>
           <span
-            className="f-icons c-hard-y"
+            className="icon c-hard-y"
           >
             [
           </span>
@@ -19095,7 +19095,7 @@ exports[`Storyshots f/fields/RatingsInput Optional 1`] = `
       className="stars"
     >
       <div
-        className="base rating x-main1 y-background2"
+        className="base rating x-main y-background-far"
       >
         <label
           htmlFor="ratings-1"
@@ -19103,7 +19103,7 @@ exports[`Storyshots f/fields/RatingsInput Optional 1`] = `
           onMouseLeave={[Function]}
         >
           <span
-            className="f-icons c-hard-y"
+            className="icon c-hard-y"
           >
             [
           </span>
@@ -19118,7 +19118,7 @@ exports[`Storyshots f/fields/RatingsInput Optional 1`] = `
         />
       </div>
       <div
-        className="base rating x-main1 y-background2"
+        className="base rating x-main y-background-far"
       >
         <label
           htmlFor="ratings-2"
@@ -19126,7 +19126,7 @@ exports[`Storyshots f/fields/RatingsInput Optional 1`] = `
           onMouseLeave={[Function]}
         >
           <span
-            className="f-icons c-hard-y"
+            className="icon c-hard-y"
           >
             [
           </span>
@@ -19141,7 +19141,7 @@ exports[`Storyshots f/fields/RatingsInput Optional 1`] = `
         />
       </div>
       <div
-        className="base rating x-main1 y-background2"
+        className="base rating x-main y-background-far"
       >
         <label
           htmlFor="ratings-3"
@@ -19149,7 +19149,7 @@ exports[`Storyshots f/fields/RatingsInput Optional 1`] = `
           onMouseLeave={[Function]}
         >
           <span
-            className="f-icons c-hard-y"
+            className="icon c-hard-y"
           >
             [
           </span>
@@ -19164,7 +19164,7 @@ exports[`Storyshots f/fields/RatingsInput Optional 1`] = `
         />
       </div>
       <div
-        className="base rating x-main1 y-background2"
+        className="base rating x-main y-background-far"
       >
         <label
           htmlFor="ratings-4"
@@ -19172,7 +19172,7 @@ exports[`Storyshots f/fields/RatingsInput Optional 1`] = `
           onMouseLeave={[Function]}
         >
           <span
-            className="f-icons c-hard-y"
+            className="icon c-hard-y"
           >
             [
           </span>
@@ -19187,7 +19187,7 @@ exports[`Storyshots f/fields/RatingsInput Optional 1`] = `
         />
       </div>
       <div
-        className="base rating x-main1 y-background2"
+        className="base rating x-main y-background-far"
       >
         <label
           htmlFor="ratings-5"
@@ -19195,7 +19195,7 @@ exports[`Storyshots f/fields/RatingsInput Optional 1`] = `
           onMouseLeave={[Function]}
         >
           <span
-            className="f-icons c-hard-y"
+            className="icon c-hard-y"
           >
             [
           </span>
@@ -19667,7 +19667,7 @@ exports[`Storyshots f/fields/TextInput Base 1`] = `
     className=" u2 pb-u"
   >
     <div
-      className="base text-input y-background2"
+      className="base text-input y-main"
     >
       <label
         className="base form-label v50 mb-v x-main2"
@@ -19716,7 +19716,7 @@ exports[`Storyshots f/fields/TextInput Date 1`] = `
     className=" u2 pb-u"
   >
     <div
-      className="base text-input y-background2"
+      className="base text-input y-main"
     >
       <label
         className="base form-label v50 mb-v x-main2"
@@ -19764,7 +19764,7 @@ exports[`Storyshots f/fields/TextInput Has Symbol 1`] = `
     className=" u2 pb-u"
   >
     <div
-      className="base text-input y-background2"
+      className="base text-input y-main"
     >
       <label
         className="base form-label v50 mb-v x-main2"
@@ -19817,7 +19817,7 @@ exports[`Storyshots f/fields/TextInput Optional 1`] = `
     className=" u2 pb-u"
   >
     <div
-      className="base text-input y-background2"
+      className="base text-input y-main"
     >
       <label
         className="base form-label v50 mb-v x-main2"
@@ -19867,7 +19867,7 @@ exports[`Storyshots f/fields/TextInput Time 1`] = `
     className=" u2 pb-u"
   >
     <div
-      className="base text-input y-background2"
+      className="base text-input y-main"
     >
       <label
         className="base form-label v50 mb-v x-main2"
@@ -19915,7 +19915,7 @@ exports[`Storyshots f/fields/TextInput With Auto Complete Off 1`] = `
     className=" u2 pb-u"
   >
     <div
-      className="base text-input y-background2"
+      className="base text-input y-main"
     >
       <label
         className="base form-label v50 mb-v x-main2"
@@ -19965,7 +19965,7 @@ exports[`Storyshots f/fields/TextInput With Disabled 1`] = `
     className=" u2 pb-u"
   >
     <div
-      className="base text-input y-background2"
+      className="base text-input y-main"
     >
       <label
         className="base form-label v50 mb-v x-main2"
@@ -20014,7 +20014,7 @@ exports[`Storyshots f/fields/TextInput With Placeholder 1`] = `
     className=" u2 pb-u"
   >
     <div
-      className="base text-input y-background2"
+      className="base text-input y-main"
     >
       <label
         className="base form-label v50 mb-v x-main2"
@@ -20064,7 +20064,7 @@ exports[`Storyshots f/fields/TextInput With Validation 1`] = `
     className=" u2 pb-u"
   >
     <div
-      className="base text-input y-background2"
+      className="base text-input y-main"
     >
       <label
         className="base form-label v50 mb-v x-main2"
@@ -20110,7 +20110,7 @@ exports[`Storyshots f/fields/TextareaInput Base 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="base text-area-input y-background2"
+    className="base text-area-input y-background-inputs"
   >
     <label
       className="base form-label v50 mb-v x-main2"
@@ -20124,7 +20124,7 @@ exports[`Storyshots f/fields/TextareaInput Base 1`] = `
       name="feedback"
       onBlur={[Function]}
       onChange={[Function]}
-      rows={3}
+      rows={10}
       style={
         {
           "resize": "vertical",
@@ -20154,7 +20154,7 @@ exports[`Storyshots f/fields/TextareaInput Disable Resize 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="base text-area-input y-background2"
+    className="base text-area-input y-background-inputs"
   >
     <label
       className="base form-label v50 mb-v x-main2"
@@ -20168,7 +20168,7 @@ exports[`Storyshots f/fields/TextareaInput Disable Resize 1`] = `
       name="feedback"
       onBlur={[Function]}
       onChange={[Function]}
-      rows={3}
+      rows={10}
       style={
         {
           "resize": "none",
@@ -20198,7 +20198,7 @@ exports[`Storyshots f/fields/TextareaInput Disabled 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="base text-area-input y-background2"
+    className="base text-area-input y-background-inputs"
   >
     <label
       className="base form-label v50 mb-v x-main2"
@@ -20212,7 +20212,7 @@ exports[`Storyshots f/fields/TextareaInput Disabled 1`] = `
       name="feedback"
       onBlur={[Function]}
       onChange={[Function]}
-      rows={3}
+      rows={10}
       style={
         {
           "resize": "vertical",
@@ -20242,7 +20242,7 @@ exports[`Storyshots f/fields/TextareaInput Horizontal Resize 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="base text-area-input y-background2"
+    className="base text-area-input y-background-inputs"
   >
     <label
       className="base form-label v50 mb-v x-main2"
@@ -20256,7 +20256,7 @@ exports[`Storyshots f/fields/TextareaInput Horizontal Resize 1`] = `
       name="feedback"
       onBlur={[Function]}
       onChange={[Function]}
-      rows={3}
+      rows={10}
       style={
         {
           "resize": "horizontal",
@@ -20286,7 +20286,7 @@ exports[`Storyshots f/fields/TextareaInput Optional 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="base text-area-input y-background2"
+    className="base text-area-input y-background-inputs"
   >
     <label
       className="base form-label v50 mb-v x-main2"
@@ -20301,7 +20301,7 @@ exports[`Storyshots f/fields/TextareaInput Optional 1`] = `
       name="feedback"
       onBlur={[Function]}
       onChange={[Function]}
-      rows={3}
+      rows={10}
       style={
         {
           "resize": "vertical",
@@ -20331,7 +20331,7 @@ exports[`Storyshots f/fields/TextareaInput Placeholder 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="base text-area-input y-background2"
+    className="base text-area-input y-background-inputs"
   >
     <label
       className="base form-label v50 mb-v x-main2"
@@ -20346,7 +20346,7 @@ exports[`Storyshots f/fields/TextareaInput Placeholder 1`] = `
       onBlur={[Function]}
       onChange={[Function]}
       placeholder="Type your feedback here..."
-      rows={3}
+      rows={10}
       style={
         {
           "resize": "vertical",
@@ -20376,7 +20376,7 @@ exports[`Storyshots f/fields/TextareaInput Validation 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="base text-area-input y-background2"
+    className="base text-area-input y-background-inputs"
   >
     <label
       className="base form-label v50 mb-v x-main2"
@@ -20390,7 +20390,7 @@ exports[`Storyshots f/fields/TextareaInput Validation 1`] = `
       name="feedback"
       onBlur={[Function]}
       onChange={[Function]}
-      rows={3}
+      rows={10}
       style={
         {
           "resize": "vertical",
@@ -20420,7 +20420,7 @@ exports[`Storyshots f/fields/TextareaInput Vertical Resize 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="base text-area-input y-background2"
+    className="base text-area-input y-background-inputs"
   >
     <label
       className="base form-label v50 mb-v x-main2"
@@ -20434,7 +20434,7 @@ exports[`Storyshots f/fields/TextareaInput Vertical Resize 1`] = `
       name="feedback"
       onBlur={[Function]}
       onChange={[Function]}
-      rows={3}
+      rows={10}
       style={
         {
           "resize": "vertical",