@pareto-engineering/design-system 2.0.0-alpha.38 → 2.0.0-alpha.40

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

@@ -7571,6 +7571,543 @@ Array [
 ]
 `;
 
+exports[`Storyshots b/Logo Square 1`] = `
+Array [
+  <svg
+    className="base svg base logo x-main1 y-transparent"
+    height="2em"
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    viewBox="0 0 39 39"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <use
+      className=""
+      href="/logo_square.svg#logo"
+      id="logo"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+  </svg>,
+  <svg
+    className="base svg base logo x-main2 y-transparent"
+    height="2em"
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    viewBox="0 0 39 39"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <use
+      className=""
+      href="/logo_square.svg#logo"
+      id="logo"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+  </svg>,
+  <svg
+    className="base svg base logo x-main3 y-transparent"
+    height="2em"
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    viewBox="0 0 39 39"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <use
+      className=""
+      href="/logo_square.svg#logo"
+      id="logo"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+  </svg>,
+  <svg
+    className="base svg base logo x-main4 y-transparent"
+    height="2em"
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    viewBox="0 0 39 39"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <use
+      className=""
+      href="/logo_square.svg#logo"
+      id="logo"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+  </svg>,
+  <svg
+    className="base svg base logo x-success y-transparent"
+    height="2em"
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    viewBox="0 0 39 39"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <use
+      className=""
+      href="/logo_square.svg#logo"
+      id="logo"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+  </svg>,
+  <svg
+    className="base svg base logo x-warning y-transparent"
+    height="2em"
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    viewBox="0 0 39 39"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <use
+      className=""
+      href="/logo_square.svg#logo"
+      id="logo"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+  </svg>,
+  <svg
+    className="base svg base logo x-error y-transparent"
+    height="2em"
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    viewBox="0 0 39 39"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <use
+      className=""
+      href="/logo_square.svg#logo"
+      id="logo"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+  </svg>,
+  <svg
+    className="base svg base logo x-background1 y-transparent"
+    height="2em"
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    viewBox="0 0 39 39"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <use
+      className=""
+      href="/logo_square.svg#logo"
+      id="logo"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+  </svg>,
+  <svg
+    className="base svg base logo x-background2 y-transparent"
+    height="2em"
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    viewBox="0 0 39 39"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <use
+      className=""
+      href="/logo_square.svg#logo"
+      id="logo"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+  </svg>,
+  <svg
+    className="base svg base logo x-background3 y-transparent"
+    height="2em"
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    viewBox="0 0 39 39"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <use
+      className=""
+      href="/logo_square.svg#logo"
+      id="logo"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+  </svg>,
+  <svg
+    className="base svg base logo x-background4 y-transparent"
+    height="2em"
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    viewBox="0 0 39 39"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <use
+      className=""
+      href="/logo_square.svg#logo"
+      id="logo"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+  </svg>,
+  <svg
+    className="base svg base logo x-background5 y-transparent"
+    height="2em"
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    viewBox="0 0 39 39"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <use
+      className=""
+      href="/logo_square.svg#logo"
+      id="logo"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+  </svg>,
+  <svg
+    className="base svg base logo x-background6 y-transparent"
+    height="2em"
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    viewBox="0 0 39 39"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <use
+      className=""
+      href="/logo_square.svg#logo"
+      id="logo"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+  </svg>,
+  <svg
+    className="base svg base logo x-heading y-transparent"
+    height="2em"
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    viewBox="0 0 39 39"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <use
+      className=""
+      href="/logo_square.svg#logo"
+      id="logo"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+  </svg>,
+  <svg
+    className="base svg base logo x-paragraph y-transparent"
+    height="2em"
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    viewBox="0 0 39 39"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <use
+      className=""
+      href="/logo_square.svg#logo"
+      id="logo"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+  </svg>,
+  <svg
+    className="base svg base logo x-subtitle y-transparent"
+    height="2em"
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    viewBox="0 0 39 39"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <use
+      className=""
+      href="/logo_square.svg#logo"
+      id="logo"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+  </svg>,
+  <svg
+    className="base svg base logo x-metadata y-transparent"
+    height="2em"
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    viewBox="0 0 39 39"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <use
+      className=""
+      href="/logo_square.svg#logo"
+      id="logo"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+  </svg>,
+  <svg
+    className="base svg base logo x-link y-transparent"
+    height="2em"
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    viewBox="0 0 39 39"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <use
+      className=""
+      href="/logo_square.svg#logo"
+      id="logo"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+  </svg>,
+  <svg
+    className="base svg base logo x-navlink y-transparent"
+    height="2em"
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    viewBox="0 0 39 39"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <use
+      className=""
+      href="/logo_square.svg#logo"
+      id="logo"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+  </svg>,
+  <svg
+    className="base svg base logo x-twitter y-transparent"
+    height="2em"
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    viewBox="0 0 39 39"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <use
+      className=""
+      href="/logo_square.svg#logo"
+      id="logo"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+  </svg>,
+  <svg
+    className="base svg base logo x-facebook y-transparent"
+    height="2em"
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    viewBox="0 0 39 39"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <use
+      className=""
+      href="/logo_square.svg#logo"
+      id="logo"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+  </svg>,
+  <svg
+    className="base svg base logo x-instagram y-transparent"
+    height="2em"
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    viewBox="0 0 39 39"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <use
+      className=""
+      href="/logo_square.svg#logo"
+      id="logo"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+  </svg>,
+  <svg
+    className="base svg base logo x-google y-transparent"
+    height="2em"
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    viewBox="0 0 39 39"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <use
+      className=""
+      href="/logo_square.svg#logo"
+      id="logo"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+  </svg>,
+  <svg
+    className="base svg base logo x-black y-transparent"
+    height="2em"
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    viewBox="0 0 39 39"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <use
+      className=""
+      href="/logo_square.svg#logo"
+      id="logo"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+  </svg>,
+  <svg
+    className="base svg base logo x-anchor y-transparent"
+    height="2em"
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    viewBox="0 0 39 39"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <use
+      className=""
+      href="/logo_square.svg#logo"
+      id="logo"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+  </svg>,
+  <svg
+    className="base svg base logo x-grey y-transparent"
+    height="2em"
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    viewBox="0 0 39 39"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <use
+      className=""
+      href="/logo_square.svg#logo"
+      id="logo"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+  </svg>,
+  <svg
+    className="base svg base logo x-pearl y-transparent"
+    height="2em"
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    viewBox="0 0 39 39"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <use
+      className=""
+      href="/logo_square.svg#logo"
+      id="logo"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+  </svg>,
+  <svg
+    className="base svg base logo x-white y-transparent"
+    height="2em"
+    preserveAspectRatio="xMinYMin meet"
+    version="1.1"
+    viewBox="0 0 39 39"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <use
+      className=""
+      href="/logo_square.svg#logo"
+      id="logo"
+      style={
+        Object {
+          "style": undefined,
+        }
+      }
+    />
+  </svg>,
+]
+`;
+
 exports[`Storyshots b/Metrics Base 1`] = `
 <div
   className="base metrics"
@@ -10182,196 +10719,57 @@ exports[`Storyshots f/fields/ChoicesInput Multiple With Grid 1`] = `
       <div
         className="base choice"
       >
-        <input
-          disabled={false}
-          id="colors-violet"
-          name="color"
-          onBlur={[Function]}
-          onChange={[Function]}
-          type="checkbox"
-          value="violet"
-        />
-        <label
-          htmlFor="colors-violet"
-        >
-          Color Violet
-        </label>
-      </div>
-      <div
-        className="base choice"
-      >
-        <input
-          disabled={false}
-          id="colors-brown"
-          name="color"
-          onBlur={[Function]}
-          onChange={[Function]}
-          type="checkbox"
-          value="brown"
-        />
-        <label
-          htmlFor="colors-brown"
-        >
-          Color Brown
-        </label>
-      </div>
-      <div
-        className="base choice"
-      >
-        <input
-          disabled={false}
-          id="colors-black"
-          name="color"
-          onBlur={[Function]}
-          onChange={[Function]}
-          type="checkbox"
-          value="black"
-        />
-        <label
-          htmlFor="colors-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/RatingsInput Base 1`] = `
-<form
-  action="#"
-  onReset={[Function]}
-  onSubmit={[Function]}
->
-  <div
-    className="base ratings-input"
-  >
-    <div
-      className="base rating x-main1 y-background2"
-    >
-      <label
-        htmlFor="ratings-1"
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-      >
-        <span
-          className="f-icons c-dark-y"
-        >
-          [
-        </span>
-      </label>
-      <input
-        id="ratings-1"
-        name="ratings"
-        onBlur={[Function]}
-        onChange={[Function]}
-        type="radio"
-        value={1}
-      />
-    </div>
-    <div
-      className="base rating x-main1 y-background2"
-    >
-      <label
-        htmlFor="ratings-2"
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-      >
-        <span
-          className="f-icons c-dark-y"
-        >
-          [
-        </span>
-      </label>
-      <input
-        id="ratings-2"
-        name="ratings"
-        onBlur={[Function]}
-        onChange={[Function]}
-        type="radio"
-        value={2}
-      />
-    </div>
-    <div
-      className="base rating x-main1 y-background2"
-    >
-      <label
-        htmlFor="ratings-3"
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-      >
-        <span
-          className="f-icons c-dark-y"
+        <input
+          disabled={false}
+          id="colors-violet"
+          name="color"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="checkbox"
+          value="violet"
+        />
+        <label
+          htmlFor="colors-violet"
         >
-          [
-        </span>
-      </label>
-      <input
-        id="ratings-3"
-        name="ratings"
-        onBlur={[Function]}
-        onChange={[Function]}
-        type="radio"
-        value={3}
-      />
-    </div>
-    <div
-      className="base rating x-main1 y-background2"
-    >
-      <label
-        htmlFor="ratings-4"
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
+          Color Violet
+        </label>
+      </div>
+      <div
+        className="base choice"
       >
-        <span
-          className="f-icons c-dark-y"
+        <input
+          disabled={false}
+          id="colors-brown"
+          name="color"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="checkbox"
+          value="brown"
+        />
+        <label
+          htmlFor="colors-brown"
         >
-          [
-        </span>
-      </label>
-      <input
-        id="ratings-4"
-        name="ratings"
-        onBlur={[Function]}
-        onChange={[Function]}
-        type="radio"
-        value={4}
-      />
-    </div>
-    <div
-      className="base rating x-main1 y-background2"
-    >
-      <label
-        htmlFor="ratings-5"
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
+          Color Brown
+        </label>
+      </div>
+      <div
+        className="base choice"
       >
-        <span
-          className="f-icons c-dark-y"
+        <input
+          disabled={false}
+          id="colors-black"
+          name="color"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="checkbox"
+          value="black"
+        />
+        <label
+          htmlFor="colors-black"
         >
-          [
-        </span>
-      </label>
-      <input
-        id="ratings-5"
-        name="ratings"
-        onBlur={[Function]}
-        onChange={[Function]}
-        type="radio"
-        value={5}
-      />
+          Color Black
+        </label>
+      </div>
     </div>
   </div>
   <div
@@ -10388,7 +10786,7 @@ exports[`Storyshots f/fields/RatingsInput Base 1`] = `
 </form>
 `;
 
-exports[`Storyshots f/fields/RatingsInput Labels 1`] = `
+exports[`Storyshots f/fields/RatingsInput Base 1`] = `
 <form
   action="#"
   onReset={[Function]}
@@ -10397,296 +10795,131 @@ exports[`Storyshots f/fields/RatingsInput Labels 1`] = `
   <div
     className="base ratings-input"
   >
-    <p
-      className="label-text md-s-1 s-2 x-metadata c-x"
-    >
-      not satisfied.
-    </p>
-    <div
-      className="base rating x-main1 y-background2"
-    >
-      <label
-        htmlFor="ratings-1"
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-      >
-        <span
-          className="v25 mb-v md-s-1 s-2 x-metadata c-x"
-        >
-          1
-        </span>
-        <span
-          className="f-icons c-dark-y"
-        >
-          [
-        </span>
-      </label>
-      <input
-        id="ratings-1"
-        name="ratings"
-        onBlur={[Function]}
-        onChange={[Function]}
-        type="radio"
-        value={1}
-      />
-    </div>
-    <div
-      className="base rating x-main1 y-background2"
-    >
-      <label
-        htmlFor="ratings-2"
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-      >
-        <span
-          className="v25 mb-v md-s-1 s-2 x-metadata c-x"
-        >
-          2
-        </span>
-        <span
-          className="f-icons c-dark-y"
-        >
-          [
-        </span>
-      </label>
-      <input
-        id="ratings-2"
-        name="ratings"
-        onBlur={[Function]}
-        onChange={[Function]}
-        type="radio"
-        value={2}
-      />
-    </div>
-    <div
-      className="base rating x-main1 y-background2"
-    >
-      <label
-        htmlFor="ratings-3"
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-      >
-        <span
-          className="v25 mb-v md-s-1 s-2 x-metadata c-x"
-        >
-          3
-        </span>
-        <span
-          className="f-icons c-dark-y"
-        >
-          [
-        </span>
-      </label>
-      <input
-        id="ratings-3"
-        name="ratings"
-        onBlur={[Function]}
-        onChange={[Function]}
-        type="radio"
-        value={3}
-      />
-    </div>
-    <div
-      className="base rating x-main1 y-background2"
-    >
-      <label
-        htmlFor="ratings-4"
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-      >
-        <span
-          className="v25 mb-v md-s-1 s-2 x-metadata c-x"
-        >
-          4
-        </span>
-        <span
-          className="f-icons c-dark-y"
-        >
-          [
-        </span>
-      </label>
-      <input
-        id="ratings-4"
-        name="ratings"
-        onBlur={[Function]}
-        onChange={[Function]}
-        type="radio"
-        value={4}
-      />
-    </div>
-    <div
-      className="base rating x-main1 y-background2"
-    >
-      <label
-        htmlFor="ratings-5"
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-      >
-        <span
-          className="v25 mb-v md-s-1 s-2 x-metadata c-x"
-        >
-          5
-        </span>
-        <span
-          className="f-icons c-dark-y"
-        >
-          [
-        </span>
-      </label>
-      <input
-        id="ratings-5"
-        name="ratings"
-        onBlur={[Function]}
-        onChange={[Function]}
-        type="radio"
-        value={5}
-      />
-    </div>
-    <div
-      className="base rating x-main1 y-background2"
+    <label
+      className="base label input-label v50 mb-v x-main2"
+      htmlFor="ratings"
     >
-      <label
-        htmlFor="ratings-6"
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-      >
-        <span
-          className="v25 mb-v md-s-1 s-2 x-metadata c-x"
-        >
-          6
-        </span>
-        <span
-          className="f-icons c-dark-y"
-        >
-          [
-        </span>
-      </label>
-      <input
-        id="ratings-6"
-        name="ratings"
-        onBlur={[Function]}
-        onChange={[Function]}
-        type="radio"
-        value={6}
-      />
-    </div>
+      Your Rating
+    </label>
     <div
-      className="base rating x-main1 y-background2"
+      className="stars"
     >
-      <label
-        htmlFor="ratings-7"
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
+      <div
+        className="base rating x-main1 y-background2"
       >
-        <span
-          className="v25 mb-v md-s-1 s-2 x-metadata c-x"
-        >
-          7
-        </span>
-        <span
-          className="f-icons c-dark-y"
+        <label
+          htmlFor="ratings-1"
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
         >
-          [
-        </span>
-      </label>
-      <input
-        id="ratings-7"
-        name="ratings"
-        onBlur={[Function]}
-        onChange={[Function]}
-        type="radio"
-        value={7}
-      />
-    </div>
-    <div
-      className="base rating x-main1 y-background2"
-    >
-      <label
-        htmlFor="ratings-8"
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
+          <span
+            className="f-icons c-dark-y"
+          >
+            [
+          </span>
+        </label>
+        <input
+          id="ratings-1"
+          name="ratings"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value={1}
+        />
+      </div>
+      <div
+        className="base rating x-main1 y-background2"
       >
-        <span
-          className="v25 mb-v md-s-1 s-2 x-metadata c-x"
-        >
-          8
-        </span>
-        <span
-          className="f-icons c-dark-y"
+        <label
+          htmlFor="ratings-2"
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
         >
-          [
-        </span>
-      </label>
-      <input
-        id="ratings-8"
-        name="ratings"
-        onBlur={[Function]}
-        onChange={[Function]}
-        type="radio"
-        value={8}
-      />
-    </div>
-    <div
-      className="base rating x-main1 y-background2"
-    >
-      <label
-        htmlFor="ratings-9"
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
+          <span
+            className="f-icons c-dark-y"
+          >
+            [
+          </span>
+        </label>
+        <input
+          id="ratings-2"
+          name="ratings"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value={2}
+        />
+      </div>
+      <div
+        className="base rating x-main1 y-background2"
       >
-        <span
-          className="v25 mb-v md-s-1 s-2 x-metadata c-x"
-        >
-          9
-        </span>
-        <span
-          className="f-icons c-dark-y"
+        <label
+          htmlFor="ratings-3"
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
         >
-          [
-        </span>
-      </label>
-      <input
-        id="ratings-9"
-        name="ratings"
-        onBlur={[Function]}
-        onChange={[Function]}
-        type="radio"
-        value={9}
-      />
-    </div>
-    <div
-      className="base rating x-main1 y-background2"
-    >
-      <label
-        htmlFor="ratings-10"
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
+          <span
+            className="f-icons c-dark-y"
+          >
+            [
+          </span>
+        </label>
+        <input
+          id="ratings-3"
+          name="ratings"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value={3}
+        />
+      </div>
+      <div
+        className="base rating x-main1 y-background2"
       >
-        <span
-          className="v25 mb-v md-s-1 s-2 x-metadata c-x"
+        <label
+          htmlFor="ratings-4"
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
         >
-          10
-        </span>
-        <span
-          className="f-icons c-dark-y"
+          <span
+            className="f-icons c-dark-y"
+          >
+            [
+          </span>
+        </label>
+        <input
+          id="ratings-4"
+          name="ratings"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value={4}
+        />
+      </div>
+      <div
+        className="base rating x-main1 y-background2"
+      >
+        <label
+          htmlFor="ratings-5"
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
         >
-          [
-        </span>
-      </label>
-      <input
-        id="ratings-10"
-        name="ratings"
-        onBlur={[Function]}
-        onChange={[Function]}
-        type="radio"
-        value={10}
-      />
+          <span
+            className="f-icons c-dark-y"
+          >
+            [
+          </span>
+        </label>
+        <input
+          id="ratings-5"
+          name="ratings"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value={5}
+        />
+      </div>
     </div>
-    <p
-      className="label-text md-s-1 s-2 x-metadata c-x"
-    >
-      very satisfied.
-    </p>
   </div>
   <div
     className="debugger"
@@ -10702,7 +10935,7 @@ exports[`Storyshots f/fields/RatingsInput Labels 1`] = `
 </form>
 `;
 
-exports[`Storyshots f/fields/RatingsInput Numbers 1`] = `
+exports[`Storyshots f/fields/RatingsInput Labels 1`] = `
 <form
   action="#"
   onReset={[Function]}
@@ -10711,285 +10944,619 @@ exports[`Storyshots f/fields/RatingsInput Numbers 1`] = `
   <div
     className="base ratings-input"
   >
+    <label
+      className="base label input-label v50 mb-v x-main2"
+      htmlFor="ratings"
+    >
+      Your Rating
+    </label>
     <div
-      className="base rating x-main1 y-background2"
+      className="stars"
     >
-      <label
-        htmlFor="ratings-1"
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
+      <p
+        className="label-text md-s-1 s-2 x-metadata c-x"
       >
-        <span
-          className="v25 mb-v md-s-1 s-2 x-metadata c-x"
+        not satisfied.
+      </p>
+      <div
+        className="base rating x-main1 y-background2"
+      >
+        <label
+          htmlFor="ratings-1"
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
         >
-          1
-        </span>
-        <span
-          className="f-icons c-dark-y"
+          <span
+            className="v25 mb-v md-s-1 s-2 x-metadata c-x"
+          >
+            1
+          </span>
+          <span
+            className="f-icons c-dark-y"
+          >
+            [
+          </span>
+        </label>
+        <input
+          id="ratings-1"
+          name="ratings"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value={1}
+        />
+      </div>
+      <div
+        className="base rating x-main1 y-background2"
+      >
+        <label
+          htmlFor="ratings-2"
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
         >
-          [
-        </span>
-      </label>
-      <input
-        id="ratings-1"
-        name="ratings"
-        onBlur={[Function]}
-        onChange={[Function]}
-        type="radio"
-        value={1}
-      />
-    </div>
-    <div
-      className="base rating x-main1 y-background2"
-    >
-      <label
-        htmlFor="ratings-2"
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
+          <span
+            className="v25 mb-v md-s-1 s-2 x-metadata c-x"
+          >
+            2
+          </span>
+          <span
+            className="f-icons c-dark-y"
+          >
+            [
+          </span>
+        </label>
+        <input
+          id="ratings-2"
+          name="ratings"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value={2}
+        />
+      </div>
+      <div
+        className="base rating x-main1 y-background2"
       >
-        <span
-          className="v25 mb-v md-s-1 s-2 x-metadata c-x"
+        <label
+          htmlFor="ratings-3"
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
         >
-          2
-        </span>
-        <span
-          className="f-icons c-dark-y"
+          <span
+            className="v25 mb-v md-s-1 s-2 x-metadata c-x"
+          >
+            3
+          </span>
+          <span
+            className="f-icons c-dark-y"
+          >
+            [
+          </span>
+        </label>
+        <input
+          id="ratings-3"
+          name="ratings"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value={3}
+        />
+      </div>
+      <div
+        className="base rating x-main1 y-background2"
+      >
+        <label
+          htmlFor="ratings-4"
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
         >
-          [
-        </span>
-      </label>
-      <input
-        id="ratings-2"
-        name="ratings"
-        onBlur={[Function]}
-        onChange={[Function]}
-        type="radio"
-        value={2}
-      />
-    </div>
-    <div
-      className="base rating x-main1 y-background2"
-    >
-      <label
-        htmlFor="ratings-3"
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
+          <span
+            className="v25 mb-v md-s-1 s-2 x-metadata c-x"
+          >
+            4
+          </span>
+          <span
+            className="f-icons c-dark-y"
+          >
+            [
+          </span>
+        </label>
+        <input
+          id="ratings-4"
+          name="ratings"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value={4}
+        />
+      </div>
+      <div
+        className="base rating x-main1 y-background2"
       >
-        <span
-          className="v25 mb-v md-s-1 s-2 x-metadata c-x"
+        <label
+          htmlFor="ratings-5"
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
         >
-          3
-        </span>
-        <span
-          className="f-icons c-dark-y"
+          <span
+            className="v25 mb-v md-s-1 s-2 x-metadata c-x"
+          >
+            5
+          </span>
+          <span
+            className="f-icons c-dark-y"
+          >
+            [
+          </span>
+        </label>
+        <input
+          id="ratings-5"
+          name="ratings"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value={5}
+        />
+      </div>
+      <div
+        className="base rating x-main1 y-background2"
+      >
+        <label
+          htmlFor="ratings-6"
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
         >
-          [
-        </span>
-      </label>
-      <input
-        id="ratings-3"
-        name="ratings"
-        onBlur={[Function]}
-        onChange={[Function]}
-        type="radio"
-        value={3}
-      />
-    </div>
-    <div
-      className="base rating x-main1 y-background2"
-    >
-      <label
-        htmlFor="ratings-4"
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
+          <span
+            className="v25 mb-v md-s-1 s-2 x-metadata c-x"
+          >
+            6
+          </span>
+          <span
+            className="f-icons c-dark-y"
+          >
+            [
+          </span>
+        </label>
+        <input
+          id="ratings-6"
+          name="ratings"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value={6}
+        />
+      </div>
+      <div
+        className="base rating x-main1 y-background2"
       >
-        <span
-          className="v25 mb-v md-s-1 s-2 x-metadata c-x"
+        <label
+          htmlFor="ratings-7"
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
         >
-          4
-        </span>
-        <span
-          className="f-icons c-dark-y"
+          <span
+            className="v25 mb-v md-s-1 s-2 x-metadata c-x"
+          >
+            7
+          </span>
+          <span
+            className="f-icons c-dark-y"
+          >
+            [
+          </span>
+        </label>
+        <input
+          id="ratings-7"
+          name="ratings"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value={7}
+        />
+      </div>
+      <div
+        className="base rating x-main1 y-background2"
+      >
+        <label
+          htmlFor="ratings-8"
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
         >
-          [
-        </span>
-      </label>
-      <input
-        id="ratings-4"
-        name="ratings"
-        onBlur={[Function]}
-        onChange={[Function]}
-        type="radio"
-        value={4}
-      />
-    </div>
-    <div
-      className="base rating x-main1 y-background2"
-    >
-      <label
-        htmlFor="ratings-5"
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
+          <span
+            className="v25 mb-v md-s-1 s-2 x-metadata c-x"
+          >
+            8
+          </span>
+          <span
+            className="f-icons c-dark-y"
+          >
+            [
+          </span>
+        </label>
+        <input
+          id="ratings-8"
+          name="ratings"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value={8}
+        />
+      </div>
+      <div
+        className="base rating x-main1 y-background2"
+      >
+        <label
+          htmlFor="ratings-9"
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+        >
+          <span
+            className="v25 mb-v md-s-1 s-2 x-metadata c-x"
+          >
+            9
+          </span>
+          <span
+            className="f-icons c-dark-y"
+          >
+            [
+          </span>
+        </label>
+        <input
+          id="ratings-9"
+          name="ratings"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value={9}
+        />
+      </div>
+      <div
+        className="base rating x-main1 y-background2"
+      >
+        <label
+          htmlFor="ratings-10"
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
+        >
+          <span
+            className="v25 mb-v md-s-1 s-2 x-metadata c-x"
+          >
+            10
+          </span>
+          <span
+            className="f-icons c-dark-y"
+          >
+            [
+          </span>
+        </label>
+        <input
+          id="ratings-10"
+          name="ratings"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value={10}
+        />
+      </div>
+      <p
+        className="label-text md-s-1 s-2 x-metadata c-x"
       >
-        <span
-          className="v25 mb-v md-s-1 s-2 x-metadata c-x"
-        >
-          5
-        </span>
-        <span
-          className="f-icons c-dark-y"
-        >
-          [
-        </span>
-      </label>
-      <input
-        id="ratings-5"
-        name="ratings"
-        onBlur={[Function]}
-        onChange={[Function]}
-        type="radio"
-        value={5}
-      />
+        very satisfied.
+      </p>
     </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 Numbers 1`] = `
+<form
+  action="#"
+  onReset={[Function]}
+  onSubmit={[Function]}
+>
+  <div
+    className="base ratings-input"
+  >
+    <label
+      className="base label input-label v50 mb-v x-main2"
+      htmlFor="ratings"
+    >
+      Your Rating
+    </label>
     <div
-      className="base rating x-main1 y-background2"
+      className="stars"
     >
-      <label
-        htmlFor="ratings-6"
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
+      <div
+        className="base rating x-main1 y-background2"
       >
-        <span
-          className="v25 mb-v md-s-1 s-2 x-metadata c-x"
+        <label
+          htmlFor="ratings-1"
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
         >
-          6
-        </span>
-        <span
-          className="f-icons c-dark-y"
+          <span
+            className="v25 mb-v md-s-1 s-2 x-metadata c-x"
+          >
+            1
+          </span>
+          <span
+            className="f-icons c-dark-y"
+          >
+            [
+          </span>
+        </label>
+        <input
+          id="ratings-1"
+          name="ratings"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value={1}
+        />
+      </div>
+      <div
+        className="base rating x-main1 y-background2"
+      >
+        <label
+          htmlFor="ratings-2"
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
         >
-          [
-        </span>
-      </label>
-      <input
-        id="ratings-6"
-        name="ratings"
-        onBlur={[Function]}
-        onChange={[Function]}
-        type="radio"
-        value={6}
-      />
-    </div>
-    <div
-      className="base rating x-main1 y-background2"
-    >
-      <label
-        htmlFor="ratings-7"
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
+          <span
+            className="v25 mb-v md-s-1 s-2 x-metadata c-x"
+          >
+            2
+          </span>
+          <span
+            className="f-icons c-dark-y"
+          >
+            [
+          </span>
+        </label>
+        <input
+          id="ratings-2"
+          name="ratings"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value={2}
+        />
+      </div>
+      <div
+        className="base rating x-main1 y-background2"
       >
-        <span
-          className="v25 mb-v md-s-1 s-2 x-metadata c-x"
+        <label
+          htmlFor="ratings-3"
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
         >
-          7
-        </span>
-        <span
-          className="f-icons c-dark-y"
+          <span
+            className="v25 mb-v md-s-1 s-2 x-metadata c-x"
+          >
+            3
+          </span>
+          <span
+            className="f-icons c-dark-y"
+          >
+            [
+          </span>
+        </label>
+        <input
+          id="ratings-3"
+          name="ratings"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value={3}
+        />
+      </div>
+      <div
+        className="base rating x-main1 y-background2"
+      >
+        <label
+          htmlFor="ratings-4"
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
         >
-          [
-        </span>
-      </label>
-      <input
-        id="ratings-7"
-        name="ratings"
-        onBlur={[Function]}
-        onChange={[Function]}
-        type="radio"
-        value={7}
-      />
-    </div>
-    <div
-      className="base rating x-main1 y-background2"
-    >
-      <label
-        htmlFor="ratings-8"
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
+          <span
+            className="v25 mb-v md-s-1 s-2 x-metadata c-x"
+          >
+            4
+          </span>
+          <span
+            className="f-icons c-dark-y"
+          >
+            [
+          </span>
+        </label>
+        <input
+          id="ratings-4"
+          name="ratings"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value={4}
+        />
+      </div>
+      <div
+        className="base rating x-main1 y-background2"
       >
-        <span
-          className="v25 mb-v md-s-1 s-2 x-metadata c-x"
+        <label
+          htmlFor="ratings-5"
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
         >
-          8
-        </span>
-        <span
-          className="f-icons c-dark-y"
+          <span
+            className="v25 mb-v md-s-1 s-2 x-metadata c-x"
+          >
+            5
+          </span>
+          <span
+            className="f-icons c-dark-y"
+          >
+            [
+          </span>
+        </label>
+        <input
+          id="ratings-5"
+          name="ratings"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value={5}
+        />
+      </div>
+      <div
+        className="base rating x-main1 y-background2"
+      >
+        <label
+          htmlFor="ratings-6"
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
         >
-          [
-        </span>
-      </label>
-      <input
-        id="ratings-8"
-        name="ratings"
-        onBlur={[Function]}
-        onChange={[Function]}
-        type="radio"
-        value={8}
-      />
-    </div>
-    <div
-      className="base rating x-main1 y-background2"
-    >
-      <label
-        htmlFor="ratings-9"
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
+          <span
+            className="v25 mb-v md-s-1 s-2 x-metadata c-x"
+          >
+            6
+          </span>
+          <span
+            className="f-icons c-dark-y"
+          >
+            [
+          </span>
+        </label>
+        <input
+          id="ratings-6"
+          name="ratings"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value={6}
+        />
+      </div>
+      <div
+        className="base rating x-main1 y-background2"
       >
-        <span
-          className="v25 mb-v md-s-1 s-2 x-metadata c-x"
+        <label
+          htmlFor="ratings-7"
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
         >
-          9
-        </span>
-        <span
-          className="f-icons c-dark-y"
+          <span
+            className="v25 mb-v md-s-1 s-2 x-metadata c-x"
+          >
+            7
+          </span>
+          <span
+            className="f-icons c-dark-y"
+          >
+            [
+          </span>
+        </label>
+        <input
+          id="ratings-7"
+          name="ratings"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value={7}
+        />
+      </div>
+      <div
+        className="base rating x-main1 y-background2"
+      >
+        <label
+          htmlFor="ratings-8"
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
         >
-          [
-        </span>
-      </label>
-      <input
-        id="ratings-9"
-        name="ratings"
-        onBlur={[Function]}
-        onChange={[Function]}
-        type="radio"
-        value={9}
-      />
-    </div>
-    <div
-      className="base rating x-main1 y-background2"
-    >
-      <label
-        htmlFor="ratings-10"
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
+          <span
+            className="v25 mb-v md-s-1 s-2 x-metadata c-x"
+          >
+            8
+          </span>
+          <span
+            className="f-icons c-dark-y"
+          >
+            [
+          </span>
+        </label>
+        <input
+          id="ratings-8"
+          name="ratings"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value={8}
+        />
+      </div>
+      <div
+        className="base rating x-main1 y-background2"
       >
-        <span
-          className="v25 mb-v md-s-1 s-2 x-metadata c-x"
+        <label
+          htmlFor="ratings-9"
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
         >
-          10
-        </span>
-        <span
-          className="f-icons c-dark-y"
+          <span
+            className="v25 mb-v md-s-1 s-2 x-metadata c-x"
+          >
+            9
+          </span>
+          <span
+            className="f-icons c-dark-y"
+          >
+            [
+          </span>
+        </label>
+        <input
+          id="ratings-9"
+          name="ratings"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value={9}
+        />
+      </div>
+      <div
+        className="base rating x-main1 y-background2"
+      >
+        <label
+          htmlFor="ratings-10"
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
         >
-          [
-        </span>
-      </label>
-      <input
-        id="ratings-10"
-        name="ratings"
-        onBlur={[Function]}
-        onChange={[Function]}
-        type="radio"
-        value={10}
-      />
+          <span
+            className="v25 mb-v md-s-1 s-2 x-metadata c-x"
+          >
+            10
+          </span>
+          <span
+            className="f-icons c-dark-y"
+          >
+            [
+          </span>
+        </label>
+        <input
+          id="ratings-10"
+          name="ratings"
+          onBlur={[Function]}
+          onChange={[Function]}
+          type="radio"
+          value={10}
+        />
+      </div>
     </div>
   </div>
   <div