@pareto-engineering/design-system 2.0.0-alpha.39 → 2.0.0-alpha.41

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

@@ -10795,120 +10795,130 @@ exports[`Storyshots f/fields/RatingsInput Base 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]}
+      <div
+        className="base rating x-main1 y-background2"
       >
-        <span
-          className="f-icons c-dark-y"
+        <label
+          htmlFor="ratings-1"
+          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="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="f-icons c-dark-y"
+        <label
+          htmlFor="ratings-2"
+          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="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="f-icons c-dark-y"
+        <label
+          htmlFor="ratings-3"
+          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="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="f-icons c-dark-y"
+        <label
+          htmlFor="ratings-4"
+          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="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="f-icons c-dark-y"
+        <label
+          htmlFor="ratings-5"
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
         >
-          [
-        </span>
-      </label>
-      <input
-        id="ratings-5"
-        name="ratings"
-        onBlur={[Function]}
-        onChange={[Function]}
-        type="radio"
-        value={5}
-      />
+          <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>
   </div>
   <div
@@ -10934,296 +10944,306 @@ 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"
+    <label
+      className="base label input-label v50 mb-v x-main2"
+      htmlFor="ratings"
     >
-      not satisfied.
-    </p>
+      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"
-        >
-          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]}
+        not satisfied.
+      </p>
+      <div
+        className="base rating x-main1 y-background2"
       >
-        <span
-          className="v25 mb-v md-s-1 s-2 x-metadata c-x"
-        >
-          2
-        </span>
-        <span
-          className="f-icons c-dark-y"
+        <label
+          htmlFor="ratings-1"
+          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"
+          >
+            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"
       >
-        <span
-          className="v25 mb-v md-s-1 s-2 x-metadata c-x"
-        >
-          3
-        </span>
-        <span
-          className="f-icons c-dark-y"
+        <label
+          htmlFor="ratings-2"
+          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"
+          >
+            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"
-        >
-          4
-        </span>
-        <span
-          className="f-icons c-dark-y"
+        <label
+          htmlFor="ratings-3"
+          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"
+          >
+            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"
       >
-        <span
-          className="v25 mb-v md-s-1 s-2 x-metadata c-x"
-        >
-          5
-        </span>
-        <span
-          className="f-icons c-dark-y"
+        <label
+          htmlFor="ratings-4"
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
         >
-          [
-        </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
+            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]}
         >
-          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"
-    >
-      <label
-        htmlFor="ratings-7"
-        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"
       >
-        <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-6"
+          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"
+          >
+            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"
-        >
-          8
-        </span>
-        <span
-          className="f-icons c-dark-y"
+        <label
+          htmlFor="ratings-7"
+          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"
+          >
+            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"
       >
-        <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-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>
+      <p
+        className="label-text md-s-1 s-2 x-metadata c-x"
+      >
+        very satisfied.
+      </p>
     </div>
-    <p
-      className="label-text md-s-1 s-2 x-metadata c-x"
-    >
-      very satisfied.
-    </p>
   </div>
   <div
     className="debugger"
@@ -11248,285 +11268,295 @@ exports[`Storyshots f/fields/RatingsInput Numbers 1`] = `
   <div
     className="base ratings-input"
   >
-    <div
-      className="base rating x-main1 y-background2"
+    <label
+      className="base label input-label v50 mb-v x-main2"
+      htmlFor="ratings"
     >
-      <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>
+      Your Rating
+    </label>
     <div
-      className="base rating x-main1 y-background2"
+      className="stars"
     >
-      <label
-        htmlFor="ratings-2"
-        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"
-        >
-          2
-        </span>
-        <span
-          className="f-icons c-dark-y"
+        <label
+          htmlFor="ratings-1"
+          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"
+          >
+            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"
       >
-        <span
-          className="v25 mb-v md-s-1 s-2 x-metadata c-x"
-        >
-          3
-        </span>
-        <span
-          className="f-icons c-dark-y"
+        <label
+          htmlFor="ratings-2"
+          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"
+          >
+            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"
-        >
-          4
-        </span>
-        <span
-          className="f-icons c-dark-y"
+        <label
+          htmlFor="ratings-3"
+          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"
+          >
+            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"
       >
-        <span
-          className="v25 mb-v md-s-1 s-2 x-metadata c-x"
-        >
-          5
-        </span>
-        <span
-          className="f-icons c-dark-y"
+        <label
+          htmlFor="ratings-4"
+          onMouseEnter={[Function]}
+          onMouseLeave={[Function]}
         >
-          [
-        </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
+            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"
-        >
-          6
-        </span>
-        <span
-          className="f-icons c-dark-y"
+        <label
+          htmlFor="ratings-5"
+          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"
+          >
+            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"
       >
-        <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-6"
+          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"
+          >
+            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"
-        >
-          8
-        </span>
-        <span
-          className="f-icons c-dark-y"
+        <label
+          htmlFor="ratings-7"
+          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"
+          >
+            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"
       >
-        <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-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