@pareto-engineering/design-system 2.0.0-alpha.22 → 2.0.0-alpha.23

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

@@ -9560,7 +9560,7 @@ exports[`Storyshots f/FormInput Base 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="base text-input form-input"
+    className="base text-input form-input y-background2"
   >
     <label
       className="base label v50 mb-v x-main2"
@@ -9569,7 +9569,7 @@ exports[`Storyshots f/FormInput Base 1`] = `
       What's your first name ?
     </label>
     <input
-      className="input input-border"
+      className="input"
       disabled={false}
       id="firstName"
       name="firstName"
@@ -9580,7 +9580,7 @@ exports[`Storyshots f/FormInput Base 1`] = `
     />
   </div>
   <div
-    className="base text-input form-input"
+    className="base text-input form-input y-background2"
   >
     <label
       className="base label v50 mb-v x-main2"
@@ -9589,7 +9589,7 @@ exports[`Storyshots f/FormInput Base 1`] = `
       What's your last name ?
     </label>
     <input
-      className="input input-border"
+      className="input"
       disabled={false}
       id="lastName"
       name="lastName"
@@ -9599,7 +9599,7 @@ exports[`Storyshots f/FormInput Base 1`] = `
     />
   </div>
   <div
-    className="base text-area-input form-input x-background1"
+    className="base text-area-input form-input y-background2"
   >
     <label
       className="base label v50 mb-v x-main2"
@@ -9608,7 +9608,7 @@ exports[`Storyshots f/FormInput Base 1`] = `
       Describe yourself in a few sentences
     </label>
     <textarea
-      className="textarea v50 pv-v input-border"
+      className="textarea"
       disabled={false}
       name="description"
       onBlur={[Function]}
@@ -9691,7 +9691,7 @@ exports[`Storyshots f/FormInput Base 1`] = `
     </div>
   </div>
   <div
-    className="base select-input form-input"
+    className="base select-input form-input y-background2"
   >
     <label
       className="base label input-label x-main2"
@@ -9700,7 +9700,7 @@ exports[`Storyshots f/FormInput Base 1`] = `
       What do you want for dinner ?
     </label>
     <select
-      className="input v25 pv-v"
+      className="input"
       disabled={false}
       id="food"
       name="food"
@@ -9710,18 +9710,21 @@ exports[`Storyshots f/FormInput Base 1`] = `
     >
       <option
         disabled={false}
+        selected={true}
         value="italian"
       >
         A nice pizza
       </option>
       <option
         disabled={false}
+        selected={true}
         value="turkish"
       >
         A delicious kebab
       </option>
       <option
         disabled={false}
+        selected={true}
         value="french"
       >
         A three course delicate french meal
@@ -9749,7 +9752,7 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="base text-input form-input"
+    className="base text-input form-input y-background2"
   >
     <label
       className="base label v50 mb-v x-main2"
@@ -9758,7 +9761,7 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
       What's your first name ?
     </label>
     <input
-      className="input input-border"
+      className="input"
       disabled={true}
       id="firstName"
       name="firstName"
@@ -9769,7 +9772,7 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
     />
   </div>
   <div
-    className="base text-input form-input"
+    className="base text-input form-input y-background2"
   >
     <label
       className="base label v50 mb-v x-main2"
@@ -9778,7 +9781,7 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
       What's your last name ?
     </label>
     <input
-      className="input input-border"
+      className="input"
       disabled={true}
       id="lastName"
       name="lastName"
@@ -9788,7 +9791,7 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
     />
   </div>
   <div
-    className="base text-area-input form-input x-background1"
+    className="base text-area-input form-input y-background2"
   >
     <label
       className="base label v50 mb-v x-main2"
@@ -9797,7 +9800,7 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
       Describe yourself in a few sentences
     </label>
     <textarea
-      className="textarea v50 pv-v input-border"
+      className="textarea"
       disabled={true}
       name="description"
       onBlur={[Function]}
@@ -9880,7 +9883,7 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
     </div>
   </div>
   <div
-    className="base select-input form-input"
+    className="base select-input form-input y-background2"
   >
     <label
       className="base label input-label x-main2"
@@ -9889,7 +9892,7 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
       What do you want for dinner ?
     </label>
     <select
-      className="input v25 pv-v"
+      className="input"
       disabled={true}
       id="food"
       name="food"
@@ -9899,18 +9902,21 @@ exports[`Storyshots f/FormInput Disabled Form Input 1`] = `
     >
       <option
         disabled={false}
+        selected={true}
         value="italian"
       >
         A nice pizza
       </option>
       <option
         disabled={false}
+        selected={true}
         value="turkish"
       >
         A delicious kebab
       </option>
       <option
         disabled={false}
+        selected={true}
         value="french"
       >
         A three course delicate french meal
@@ -9938,7 +9944,7 @@ exports[`Storyshots f/FormInput Extensible Form Input 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="base text-input form-input"
+    className="base text-input form-input y-background2"
   >
     <label
       className="base label v50 mb-v x-main2"
@@ -9947,7 +9953,7 @@ exports[`Storyshots f/FormInput Extensible Form Input 1`] = `
       Extended type input
     </label>
     <input
-      className="input input-border"
+      className="input"
       disabled={false}
       id="extended"
       name="extended"
@@ -9986,130 +9992,6 @@ exports[`Storyshots f/common/Label Base 1`] = `
 </label>
 `;
 
-exports[`Storyshots f/fields/CheckboxInput Base 1`] = `
-<form
-  action="#"
-  onReset={[Function]}
-  onSubmit={[Function]}
->
-  <div
-    className="y-background1 b-y"
-  >
-    <div
-      className="base checkbox-input"
-    >
-      <div
-        className="not-selected input-content uc v1 pv-v"
-      >
-        <label
-          className="base label x-main2"
-          htmlFor="businessTypes"
-        >
-          <input
-            className="input"
-            id="businessTypes"
-            name="businessTypes"
-            onBlur={[Function]}
-            onChange={[Function]}
-            type="checkbox"
-            value="Business to customer"
-          />
-          <span>
-            Business to customer
-          </span>
-        </label>
-      </div>
-    </div>
-    <div
-      className="base checkbox-input"
-    >
-      <div
-        className="not-selected input-content uc v1 pv-v"
-      >
-        <label
-          className="base label x-main2"
-          htmlFor="businessTypes"
-        >
-          <input
-            className="input"
-            id="businessTypes"
-            name="businessTypes"
-            onBlur={[Function]}
-            onChange={[Function]}
-            type="checkbox"
-            value="Business to business"
-          />
-          <span>
-            Business to business
-          </span>
-        </label>
-      </div>
-    </div>
-    <div
-      className="base checkbox-input"
-    >
-      <div
-        className="not-selected input-content uc v1 pv-v"
-      >
-        <label
-          className="base label x-main2"
-          htmlFor="businessTypes"
-        >
-          <input
-            className="input"
-            id="businessTypes"
-            name="businessTypes"
-            onBlur={[Function]}
-            onChange={[Function]}
-            type="checkbox"
-            value="E-commerce"
-          />
-          <span>
-            E-commerce
-          </span>
-        </label>
-      </div>
-    </div>
-    <div
-      className="base checkbox-input"
-    >
-      <div
-        className="not-selected input-content uc v1 pv-v"
-      >
-        <label
-          className="base label x-main2"
-          htmlFor="businessTypes"
-        >
-          <input
-            className="input"
-            id="businessTypes"
-            name="businessTypes"
-            onBlur={[Function]}
-            onChange={[Function]}
-            type="checkbox"
-            value="Marketplace"
-          />
-          <span>
-            Marketplace
-          </span>
-        </label>
-      </div>
-    </div>
-    <div
-      className="debugger"
-    >
-      <button
-        className="base button x-main2"
-        onClick={[Function]}
-        type="button"
-      >
-        Open FormDebugger
-      </button>
-    </div>
-  </div>
-</form>
-`;
-
 exports[`Storyshots f/fields/ChoicesInput Base 1`] = `
 <form
   action="#"
@@ -10655,134 +10537,6 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
 </form>
 `;
 
-exports[`Storyshots f/fields/RadioInput Base 1`] = `
-<form
-  action="#"
-  onReset={[Function]}
-  onSubmit={[Function]}
->
-  <div
-    className="base radio-input"
-  >
-    <div
-      className="not-selected uc v1 pv-v"
-    >
-      <label
-        className="base label x-main2"
-        htmlFor="companySize"
-      >
-        <input
-          className="input"
-          id="companySize"
-          name="companySize"
-          onBlur={[Function]}
-          onChange={[Function]}
-          type="radio"
-          value="1-3"
-        />
-        <span
-          className="text"
-        >
-          1-3
-        </span>
-      </label>
-    </div>
-  </div>
-  <div
-    className="base radio-input"
-  >
-    <div
-      className="not-selected uc v1 pv-v"
-    >
-      <label
-        className="base label x-main2"
-        htmlFor="companySize"
-      >
-        <input
-          className="input"
-          id="companySize"
-          name="companySize"
-          onBlur={[Function]}
-          onChange={[Function]}
-          type="radio"
-          value="4-7"
-        />
-        <span
-          className="text"
-        >
-          4-7
-        </span>
-      </label>
-    </div>
-  </div>
-  <div
-    className="base radio-input"
-  >
-    <div
-      className="not-selected uc v1 pv-v"
-    >
-      <label
-        className="base label x-main2"
-        htmlFor="companySize"
-      >
-        <input
-          className="input"
-          id="companySize"
-          name="companySize"
-          onBlur={[Function]}
-          onChange={[Function]}
-          type="radio"
-          value="8-10"
-        />
-        <span
-          className="text"
-        >
-          8-10
-        </span>
-      </label>
-    </div>
-  </div>
-  <div
-    className="base radio-input"
-  >
-    <div
-      className="not-selected uc v1 pv-v"
-    >
-      <label
-        className="base label x-main2"
-        htmlFor="companySize"
-      >
-        <input
-          className="input"
-          id="companySize"
-          name="companySize"
-          onBlur={[Function]}
-          onChange={[Function]}
-          type="radio"
-          value="11-20"
-        />
-        <span
-          className="text"
-        >
-          11-20
-        </span>
-      </label>
-    </div>
-  </div>
-  <div
-    className="debugger"
-  >
-    <button
-      className="base button x-main2"
-      onClick={[Function]}
-      type="button"
-    >
-      Open FormDebugger
-    </button>
-  </div>
-</form>
-`;
-
 exports[`Storyshots f/fields/RatingsInput Base 1`] = `
 <form
   action="#"
@@ -11547,7 +11301,7 @@ exports[`Storyshots f/fields/SelectInput Base 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="base select-input"
+    className="base select-input y-background2"
   >
     <label
       className="base label input-label x-main2"
@@ -11556,28 +11310,38 @@ exports[`Storyshots f/fields/SelectInput Base 1`] = `
       Work Type
     </label>
     <select
-      className="input v25 pv-v"
+      className="input"
       disabled={false}
       id="workType"
       name="workType"
       onBlur={[Function]}
       onChange={[Function]}
-      value="Work"
+      value=""
     >
+      <option
+        disabled={true}
+        selected={true}
+        value=""
+      >
+        Select an option
+      </option>
       <option
         disabled={false}
+        selected={true}
         value="Work"
       >
         Work
       </option>
       <option
         disabled={false}
+        selected={true}
         value="Managing"
       >
         Managing
       </option>
       <option
         disabled={false}
+        selected={true}
         value="Training"
       >
         Training
@@ -11605,7 +11369,7 @@ exports[`Storyshots f/fields/SelectInput Disabled Select Input 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="base select-input"
+    className="base select-input y-background2"
   >
     <label
       className="base label input-label x-main2"
@@ -11614,40 +11378,52 @@ exports[`Storyshots f/fields/SelectInput Disabled Select Input 1`] = `
       Work Type
     </label>
     <select
-      className="input v25 pv-v"
+      className="input"
       disabled={true}
       id="workType"
       name="workType"
       onBlur={[Function]}
       onChange={[Function]}
-      value="Work"
+      value=""
     >
+      <option
+        disabled={true}
+        selected={true}
+        value=""
+      >
+        Select an option
+      </option>
       <option
         disabled={false}
+        selected={true}
         value="Work"
       >
         Work
       </option>
       <option
         disabled={false}
+        selected={true}
         value="Managing"
       >
         Managing
       </option>
       <option
         disabled={false}
+        selected={true}
         value="Training"
       >
         Training
       </option>
       <option
         disabled={false}
+        selected={true}
         value="20th Aug 2020 to 19th Sept, 2020"
       >
         20th Aug 2020 to 19th Sept, 2020
       </option>
       <option
         disabled={false}
+        selected={true}
         value="20th Sept 2020 to 19th Oct, 2020"
       >
         20th Sept 2020 to 19th Oct, 2020
@@ -11675,7 +11451,7 @@ exports[`Storyshots f/fields/SelectInput Objects 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="base select-input"
+    className="base select-input y-background2"
   >
     <label
       className="base label input-label x-main2"
@@ -11684,22 +11460,31 @@ exports[`Storyshots f/fields/SelectInput Objects 1`] = `
       Work Type
     </label>
     <select
-      className="input v25 pv-v"
+      className="input"
       disabled={false}
       id="workType"
       name="workType"
       onBlur={[Function]}
       onChange={[Function]}
-      value="Work"
+      value=""
     >
+      <option
+        disabled={true}
+        selected={true}
+        value=""
+      >
+        Select an option
+      </option>
       <option
         disabled={false}
+        selected={true}
         value="20th Aug 2020 to 19th Sept, 2020"
       >
         20th Aug 2020 to 19th Sept, 2020
       </option>
       <option
         disabled={false}
+        selected={true}
         value="20th Sept 2020 to 19th Oct, 2020"
       >
         20th Sept 2020 to 19th Oct, 2020
@@ -11727,7 +11512,7 @@ exports[`Storyshots f/fields/SelectInput Required Select 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="base select-input"
+    className="base select-input y-background2"
   >
     <label
       className="base label input-label x-main2"
@@ -11736,7 +11521,7 @@ exports[`Storyshots f/fields/SelectInput Required Select 1`] = `
       Activity Type
     </label>
     <select
-      className="input v25 pv-v"
+      className="input"
       disabled={false}
       id="activity"
       name="activity"
@@ -11746,18 +11531,21 @@ exports[`Storyshots f/fields/SelectInput Required Select 1`] = `
     >
       <option
         disabled={true}
+        selected={true}
         value=""
       >
-        Select activity type
+        Select an option
       </option>
       <option
         disabled={false}
+        selected={true}
         value="review"
       >
         Review
       </option>
       <option
         disabled={false}
+        selected={true}
         value="Approve"
       >
         Approve
@@ -11785,7 +11573,7 @@ exports[`Storyshots f/fields/SelectInput String And Objects 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="base select-input"
+    className="base select-input y-background2"
   >
     <label
       className="base label input-label x-main2"
@@ -11794,40 +11582,52 @@ exports[`Storyshots f/fields/SelectInput String And Objects 1`] = `
       Work Type
     </label>
     <select
-      className="input v25 pv-v"
+      className="input"
       disabled={false}
       id="workType"
       name="workType"
       onBlur={[Function]}
       onChange={[Function]}
-      value="Work"
+      value=""
     >
+      <option
+        disabled={true}
+        selected={true}
+        value=""
+      >
+        Select an option
+      </option>
       <option
         disabled={false}
+        selected={true}
         value="Work"
       >
         Work
       </option>
       <option
         disabled={false}
+        selected={true}
         value="Managing"
       >
         Managing
       </option>
       <option
         disabled={false}
+        selected={true}
         value="Training"
       >
         Training
       </option>
       <option
         disabled={false}
+        selected={true}
         value="20th Aug 2020 to 19th Sept, 2020"
       >
         20th Aug 2020 to 19th Sept, 2020
       </option>
       <option
         disabled={false}
+        selected={true}
         value="20th Sept 2020 to 19th Oct, 2020"
       >
         20th Sept 2020 to 19th Oct, 2020
@@ -11848,61 +11648,6 @@ exports[`Storyshots f/fields/SelectInput String And Objects 1`] = `
 </form>
 `;
 
-exports[`Storyshots f/fields/TaskRecommendationInput Base 1`] = `
-<form
-  action="#"
-  onReset={[Function]}
-  onSubmit={[Function]}
->
-  <div
-    className="y-background1 b-y v2 p-v"
-    style={
-      Object {
-        "height": "100%",
-      }
-    }
-  >
-    <div
-      className="base task-recommendation-input x-main2"
-    >
-      <div
-        className="task-content b-on-x"
-      >
-        <div
-          className="v1 p-v task"
-        >
-          <label
-            className="base label uc mb-v  x-main2"
-            htmlFor="taskRecommendations"
-          >
-            Find potential business customers
-          </label>
-          <input
-            className="input"
-            id="taskRecommendations"
-            name="taskRecommendations"
-            onBlur={[Function]}
-            onChange={[Function]}
-            type="checkbox"
-            value="businessTypes"
-          />
-          <img
-            alt="img"
-            className="image"
-            src="/Fundraising.svg"
-          />
-          <p
-            className="uc u2 mt-u"
-          >
-            Build a list of contacts at businesses based on my criteria for potential customers
-          </p>
-        </div>
-      </div>
-    </div>
-  </div>
-</form>
-`;
-
 exports[`Storyshots f/fields/TextInput Base 1`] = `
 <form
   action="#"
@@ -11910,10 +11655,10 @@ exports[`Storyshots f/fields/TextInput Base 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="y-background1 b-dark-y u2 pb-u"
+    className=" u2 pb-u"
   >
     <div
-      className="base text-input"
+      className="base text-input y-background2"
     >
       <label
         className="base label v50 mb-v x-main2"
@@ -11922,7 +11667,7 @@ exports[`Storyshots f/fields/TextInput Base 1`] = `
         What's your first name ?
       </label>
       <input
-        className="input input-border"
+        className="input"
         disabled={false}
         id="firstName"
         name="firstName"
@@ -11953,11 +11698,9 @@ exports[`Storyshots f/fields/TextInput Date Time 1`] = `
   onReset={[Function]}
   onSubmit={[Function]}
 >
-  <div
-    className="y-background1 b-dark-y"
-  >
+  <div>
     <div
-      className="base text-input"
+      className="base text-input y-background2"
     >
       <label
         className="base label v50 mb-v x-main2"
@@ -11966,7 +11709,7 @@ exports[`Storyshots f/fields/TextInput Date Time 1`] = `
         Select date
       </label>
       <input
-        className="input input-border"
+        className="input"
         disabled={false}
         id="date"
         name="date"
@@ -11977,7 +11720,7 @@ exports[`Storyshots f/fields/TextInput Date Time 1`] = `
       />
     </div>
     <div
-      className="base text-input"
+      className="base text-input y-background2"
     >
       <label
         className="base label v50 mb-v x-main2"
@@ -11986,7 +11729,7 @@ exports[`Storyshots f/fields/TextInput Date Time 1`] = `
         Select time
       </label>
       <input
-        className="input input-border"
+        className="input"
         disabled={false}
         id="time"
         name="time"
@@ -12011,17 +11754,17 @@ exports[`Storyshots f/fields/TextInput Date Time 1`] = `
 </form>
 `;
 
-exports[`Storyshots f/fields/TextInput Disabled Text Input 1`] = `
+exports[`Storyshots f/fields/TextInput Disabled 1`] = `
 <form
   action="#"
   onReset={[Function]}
   onSubmit={[Function]}
 >
   <div
-    className="y-background1 b-dark-y u2 pb-u"
+    className="u2 pb-u"
   >
     <div
-      className="base text-input"
+      className="base text-input y-background2"
     >
       <label
         className="base label v50 mb-v x-main2"
@@ -12030,7 +11773,7 @@ exports[`Storyshots f/fields/TextInput Disabled Text Input 1`] = `
         What's your first name ?
       </label>
       <input
-        className="input input-border"
+        className="input"
         disabled={true}
         id="firstName"
         name="firstName"
@@ -12044,17 +11787,17 @@ exports[`Storyshots f/fields/TextInput Disabled Text Input 1`] = `
 </form>
 `;
 
-exports[`Storyshots f/fields/TextInput Text Input With Place Holder 1`] = `
+exports[`Storyshots f/fields/TextInput Placeholder 1`] = `
 <form
   action="#"
   onReset={[Function]}
   onSubmit={[Function]}
 >
   <div
-    className="y-background1 b-dark-y u2 pb-u"
+    className="u2 pb-u"
   >
     <div
-      className="base text-input"
+      className="base text-input y-background2"
     >
       <label
         className="base label v50 mb-v x-main2"
@@ -12063,7 +11806,7 @@ exports[`Storyshots f/fields/TextInput Text Input With Place Holder 1`] = `
         What's your first name ?
       </label>
       <input
-        className="input input-border"
+        className="input"
         disabled={false}
         id="firstName"
         name="firstName"
@@ -12074,6 +11817,17 @@ exports[`Storyshots f/fields/TextInput Text Input With Place Holder 1`] = `
         value=""
       />
     </div>
+    <div
+      className="debugger"
+    >
+      <button
+        className="base button x-main2"
+        onClick={[Function]}
+        type="button"
+      >
+        Open FormDebugger
+      </button>
+    </div>
   </div>
 </form>
 `;
@@ -12084,11 +11838,9 @@ exports[`Storyshots f/fields/TextareaInput Base 1`] = `
   onReset={[Function]}
   onSubmit={[Function]}
 >
-  <div
-    className="y-background1 b-dark-y"
-  >
+  <div>
     <div
-      className="base text-area-input x-background1"
+      className="base text-area-input y-background2"
     >
       <label
         className="base label v50 mb-v x-main2"
@@ -12097,7 +11849,7 @@ exports[`Storyshots f/fields/TextareaInput Base 1`] = `
         What can we improve on?
       </label>
       <textarea
-        className="textarea v50 pv-v input-border"
+        className="textarea"
         disabled={false}
         name="feedback"
         onBlur={[Function]}
@@ -12128,11 +11880,9 @@ exports[`Storyshots f/fields/TextareaInput Disabled 1`] = `
   onReset={[Function]}
   onSubmit={[Function]}
 >
-  <div
-    className="y-background1 b-dark-y"
-  >
+  <div>
     <div
-      className="base text-area-input x-background1"
+      className="base text-area-input y-background2"
     >
       <label
         className="base label v50 mb-v x-main2"
@@ -12141,7 +11891,7 @@ exports[`Storyshots f/fields/TextareaInput Disabled 1`] = `
         What can we improve on?
       </label>
       <textarea
-        className="textarea v50 pv-v input-border"
+        className="textarea"
         disabled={true}
         name="feedback"
         onBlur={[Function]}
@@ -12172,11 +11922,9 @@ exports[`Storyshots f/fields/TextareaInput Placeholder 1`] = `
   onReset={[Function]}
   onSubmit={[Function]}
 >
-  <div
-    className="y-background1 b-dark-y"
-  >
+  <div>
     <div
-      className="base text-area-input x-background1"
+      className="base text-area-input y-background2"
     >
       <label
         className="base label v50 mb-v x-main2"
@@ -12185,7 +11933,7 @@ exports[`Storyshots f/fields/TextareaInput Placeholder 1`] = `
         What can we improve on?
       </label>
       <textarea
-        className="textarea v50 pv-v input-border"
+        className="textarea"
         disabled={false}
         name="feedback"
         onBlur={[Function]}
@@ -12217,11 +11965,9 @@ exports[`Storyshots f/fields/TextareaInput Validation 1`] = `
   onReset={[Function]}
   onSubmit={[Function]}
 >
-  <div
-    className="y-background1 b-dark-y"
-  >
+  <div>
     <div
-      className="base text-area-input x-background1"
+      className="base text-area-input y-background2"
     >
       <label
         className="base label v50 mb-v x-main2"
@@ -12230,7 +11976,7 @@ exports[`Storyshots f/fields/TextareaInput Validation 1`] = `
         What can we improve on?
       </label>
       <textarea
-        className="textarea v50 pv-v input-border"
+        className="textarea"
         disabled={false}
         name="feedback"
         onBlur={[Function]}