@digigov/react-core 0.27.0-f0a89ab5 → 1.0.0-00643e1d

package/es/Paragraph/__snapshots__/index.test.tsx.snap

@@ -2,137 +2,225 @@
 
 exports[`renders the Paragraph with fontSize=14 1`] = `
 <ForwardRef(Paragraph)
-  fontSize="14"
+  fontSize={14}
 >
-  <ForwardRef(Base)
+  <ForwardRef(NormalText)
     as="p"
-    className="govgr-!-font-size-14 govgr-body"
+    fontSize={14}
   >
-    <p
-      className="govgr-!-font-size-14 govgr-body"
+    <ForwardRef(Typography)
+      as="p"
+      className="govgr-body"
+      fontSize={14}
     >
-      hello
-    </p>
-  </ForwardRef(Base)>
+      <ForwardRef(Base)
+        as="p"
+        className="govgr-body govgr-!-font-size-14"
+      >
+        <p
+          className="govgr-body govgr-!-font-size-14"
+        >
+          hello
+        </p>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
+  </ForwardRef(NormalText)>
 </ForwardRef(Paragraph)>
 `;
 
 exports[`renders the Paragraph with fontSize=16 1`] = `
 <ForwardRef(Paragraph)
-  fontSize="16"
+  fontSize={16}
 >
-  <ForwardRef(Base)
+  <ForwardRef(NormalText)
     as="p"
-    className="govgr-!-font-size-16 govgr-body"
+    fontSize={16}
   >
-    <p
-      className="govgr-!-font-size-16 govgr-body"
+    <ForwardRef(Typography)
+      as="p"
+      className="govgr-body"
+      fontSize={16}
     >
-      hello
-    </p>
-  </ForwardRef(Base)>
+      <ForwardRef(Base)
+        as="p"
+        className="govgr-body govgr-!-font-size-16"
+      >
+        <p
+          className="govgr-body govgr-!-font-size-16"
+        >
+          hello
+        </p>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
+  </ForwardRef(NormalText)>
 </ForwardRef(Paragraph)>
 `;
 
 exports[`renders the Paragraph with fontSize=19 1`] = `
 <ForwardRef(Paragraph)
-  fontSize="19"
+  fontSize={19}
 >
-  <ForwardRef(Base)
+  <ForwardRef(NormalText)
     as="p"
-    className="govgr-!-font-size-19 govgr-body"
+    fontSize={19}
   >
-    <p
-      className="govgr-!-font-size-19 govgr-body"
+    <ForwardRef(Typography)
+      as="p"
+      className="govgr-body"
+      fontSize={19}
     >
-      hello
-    </p>
-  </ForwardRef(Base)>
+      <ForwardRef(Base)
+        as="p"
+        className="govgr-body govgr-!-font-size-19"
+      >
+        <p
+          className="govgr-body govgr-!-font-size-19"
+        >
+          hello
+        </p>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
+  </ForwardRef(NormalText)>
 </ForwardRef(Paragraph)>
 `;
 
 exports[`renders the Paragraph with fontSize=24 1`] = `
 <ForwardRef(Paragraph)
-  fontSize="24"
+  fontSize={24}
 >
-  <ForwardRef(Base)
+  <ForwardRef(NormalText)
     as="p"
-    className="govgr-!-font-size-24 govgr-body"
+    fontSize={24}
   >
-    <p
-      className="govgr-!-font-size-24 govgr-body"
+    <ForwardRef(Typography)
+      as="p"
+      className="govgr-body"
+      fontSize={24}
     >
-      hello
-    </p>
-  </ForwardRef(Base)>
+      <ForwardRef(Base)
+        as="p"
+        className="govgr-body govgr-!-font-size-24"
+      >
+        <p
+          className="govgr-body govgr-!-font-size-24"
+        >
+          hello
+        </p>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
+  </ForwardRef(NormalText)>
 </ForwardRef(Paragraph)>
 `;
 
 exports[`renders the Paragraph with fontSize=30 1`] = `
 <ForwardRef(Paragraph)
-  fontSize="30"
+  fontSize={30}
 >
-  <ForwardRef(Base)
+  <ForwardRef(NormalText)
     as="p"
-    className="govgr-!-font-size-30 govgr-body"
+    fontSize={30}
   >
-    <p
-      className="govgr-!-font-size-30 govgr-body"
+    <ForwardRef(Typography)
+      as="p"
+      className="govgr-body"
+      fontSize={30}
     >
-      hello
-    </p>
-  </ForwardRef(Base)>
+      <ForwardRef(Base)
+        as="p"
+        className="govgr-body govgr-!-font-size-30"
+      >
+        <p
+          className="govgr-body govgr-!-font-size-30"
+        >
+          hello
+        </p>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
+  </ForwardRef(NormalText)>
 </ForwardRef(Paragraph)>
 `;
 
 exports[`renders the Paragraph with fontSize=36 1`] = `
 <ForwardRef(Paragraph)
-  fontSize="36"
+  fontSize={36}
 >
-  <ForwardRef(Base)
+  <ForwardRef(NormalText)
     as="p"
-    className="govgr-!-font-size-36 govgr-body"
+    fontSize={36}
   >
-    <p
-      className="govgr-!-font-size-36 govgr-body"
+    <ForwardRef(Typography)
+      as="p"
+      className="govgr-body"
+      fontSize={36}
     >
-      hello
-    </p>
-  </ForwardRef(Base)>
+      <ForwardRef(Base)
+        as="p"
+        className="govgr-body govgr-!-font-size-36"
+      >
+        <p
+          className="govgr-body govgr-!-font-size-36"
+        >
+          hello
+        </p>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
+  </ForwardRef(NormalText)>
 </ForwardRef(Paragraph)>
 `;
 
 exports[`renders the Paragraph with fontSize=48 1`] = `
 <ForwardRef(Paragraph)
-  fontSize="48"
+  fontSize={48}
 >
-  <ForwardRef(Base)
+  <ForwardRef(NormalText)
     as="p"
-    className="govgr-!-font-size-48 govgr-body"
+    fontSize={48}
   >
-    <p
-      className="govgr-!-font-size-48 govgr-body"
+    <ForwardRef(Typography)
+      as="p"
+      className="govgr-body"
+      fontSize={48}
     >
-      hello
-    </p>
-  </ForwardRef(Base)>
+      <ForwardRef(Base)
+        as="p"
+        className="govgr-body govgr-!-font-size-48"
+      >
+        <p
+          className="govgr-body govgr-!-font-size-48"
+        >
+          hello
+        </p>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
+  </ForwardRef(NormalText)>
 </ForwardRef(Paragraph)>
 `;
 
 exports[`renders the Paragraph with fontSize=72 1`] = `
 <ForwardRef(Paragraph)
-  fontSize="72"
+  fontSize={72}
 >
-  <ForwardRef(Base)
+  <ForwardRef(NormalText)
     as="p"
-    className="govgr-!-font-size-72 govgr-body"
+    fontSize={72}
   >
-    <p
-      className="govgr-!-font-size-72 govgr-body"
+    <ForwardRef(Typography)
+      as="p"
+      className="govgr-body"
+      fontSize={72}
     >
-      hello
-    </p>
-  </ForwardRef(Base)>
+      <ForwardRef(Base)
+        as="p"
+        className="govgr-body govgr-!-font-size-72"
+      >
+        <p
+          className="govgr-body govgr-!-font-size-72"
+        >
+          hello
+        </p>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
+  </ForwardRef(NormalText)>
 </ForwardRef(Paragraph)>
 `;
 
@@ -140,16 +228,27 @@ exports[`renders the Paragraph with fontWeight=bold 1`] = `
 <ForwardRef(Paragraph)
   fontWeight="bold"
 >
-  <ForwardRef(Base)
+  <ForwardRef(NormalText)
     as="p"
-    className="govgr-!-font-weight-bold govgr-body"
+    fontWeight="bold"
   >
-    <p
-      className="govgr-!-font-weight-bold govgr-body"
+    <ForwardRef(Typography)
+      as="p"
+      className="govgr-body"
+      fontWeight="bold"
     >
-      hello
-    </p>
-  </ForwardRef(Base)>
+      <ForwardRef(Base)
+        as="p"
+        className="govgr-body govgr-!-font-weight-bold"
+      >
+        <p
+          className="govgr-body govgr-!-font-weight-bold"
+        >
+          hello
+        </p>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
+  </ForwardRef(NormalText)>
 </ForwardRef(Paragraph)>
 `;
 
@@ -157,16 +256,27 @@ exports[`renders the Paragraph with fontWeight=bold 2`] = `
 <ForwardRef(Paragraph)
   fontWeight="bold"
 >
-  <ForwardRef(Base)
+  <ForwardRef(NormalText)
     as="p"
-    className="govgr-!-font-weight-bold govgr-body"
+    fontWeight="bold"
   >
-    <p
-      className="govgr-!-font-weight-bold govgr-body"
+    <ForwardRef(Typography)
+      as="p"
+      className="govgr-body"
+      fontWeight="bold"
     >
-      hello
-    </p>
-  </ForwardRef(Base)>
+      <ForwardRef(Base)
+        as="p"
+        className="govgr-body govgr-!-font-weight-bold"
+      >
+        <p
+          className="govgr-body govgr-!-font-weight-bold"
+        >
+          hello
+        </p>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
+  </ForwardRef(NormalText)>
 </ForwardRef(Paragraph)>
 `;
 
@@ -174,551 +284,917 @@ exports[`renders the Paragraph with fontWeight=regular 1`] = `
 <ForwardRef(Paragraph)
   fontWeight="regular"
 >
-  <ForwardRef(Base)
+  <ForwardRef(NormalText)
     as="p"
-    className="govgr-!-font-weight-regular govgr-body"
+    fontWeight="regular"
   >
-    <p
-      className="govgr-!-font-weight-regular govgr-body"
+    <ForwardRef(Typography)
+      as="p"
+      className="govgr-body"
+      fontWeight="regular"
     >
-      hello
-    </p>
-  </ForwardRef(Base)>
+      <ForwardRef(Base)
+        as="p"
+        className="govgr-body govgr-!-font-weight-regular"
+      >
+        <p
+          className="govgr-body govgr-!-font-weight-regular"
+        >
+          hello
+        </p>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
+  </ForwardRef(NormalText)>
 </ForwardRef(Paragraph)>
 `;
 
 exports[`renders the Paragraph with no props 1`] = `
 <ForwardRef(Paragraph)>
-  <ForwardRef(Base)
+  <ForwardRef(NormalText)
     as="p"
-    className="govgr-body"
   >
-    <p
+    <ForwardRef(Typography)
+      as="p"
       className="govgr-body"
     >
-      hello
-    </p>
-  </ForwardRef(Base)>
+      <ForwardRef(Base)
+        as="p"
+        className="govgr-body"
+      >
+        <p
+          className="govgr-body"
+        >
+          hello
+        </p>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
+  </ForwardRef(NormalText)>
 </ForwardRef(Paragraph)>
 `;
 
-exports[`renders the Paragraph with variant=lead 1`] = `
+exports[`renders the Paragraph with size=lead 1`] = `
 <ForwardRef(Paragraph)
-  variant="lead"
+  size="lg"
 >
-  <ForwardRef(Base)
+  <ForwardRef(NormalText)
     as="p"
-    className="govgr-body-l govgr-body"
+    size="lg"
   >
-    <p
-      className="govgr-body-l govgr-body"
+    <ForwardRef(Typography)
+      as="p"
+      className="govgr-body-lg govgr-body"
     >
-      hello
-    </p>
-  </ForwardRef(Base)>
+      <ForwardRef(Base)
+        as="p"
+        className="govgr-body-lg govgr-body"
+      >
+        <p
+          className="govgr-body-lg govgr-body"
+        >
+          hello
+        </p>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
+  </ForwardRef(NormalText)>
 </ForwardRef(Paragraph)>
 `;
 
-exports[`renders the Paragraph with variant=lead and fontSize=14 1`] = `
+exports[`renders the Paragraph with size=lead and fontSize=14 1`] = `
 <ForwardRef(Paragraph)
-  fontSize="14"
-  variant="lead"
+  fontSize={14}
+  size="lg"
 >
-  <ForwardRef(Base)
+  <ForwardRef(NormalText)
     as="p"
-    className="govgr-body-l govgr-!-font-size-14 govgr-body"
+    fontSize={14}
+    size="lg"
   >
-    <p
-      className="govgr-body-l govgr-!-font-size-14 govgr-body"
+    <ForwardRef(Typography)
+      as="p"
+      className="govgr-body-lg govgr-body"
+      fontSize={14}
     >
-      hello
-    </p>
-  </ForwardRef(Base)>
+      <ForwardRef(Base)
+        as="p"
+        className="govgr-body-lg govgr-body govgr-!-font-size-14"
+      >
+        <p
+          className="govgr-body-lg govgr-body govgr-!-font-size-14"
+        >
+          hello
+        </p>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
+  </ForwardRef(NormalText)>
 </ForwardRef(Paragraph)>
 `;
 
-exports[`renders the Paragraph with variant=lead and fontSize=16 1`] = `
+exports[`renders the Paragraph with size=lead and fontSize=16 1`] = `
 <ForwardRef(Paragraph)
-  fontSize="16"
-  variant="lead"
+  fontSize={16}
+  size="lg"
 >
-  <ForwardRef(Base)
+  <ForwardRef(NormalText)
     as="p"
-    className="govgr-body-l govgr-!-font-size-16 govgr-body"
+    fontSize={16}
+    size="lg"
   >
-    <p
-      className="govgr-body-l govgr-!-font-size-16 govgr-body"
+    <ForwardRef(Typography)
+      as="p"
+      className="govgr-body-lg govgr-body"
+      fontSize={16}
     >
-      hello
-    </p>
-  </ForwardRef(Base)>
+      <ForwardRef(Base)
+        as="p"
+        className="govgr-body-lg govgr-body govgr-!-font-size-16"
+      >
+        <p
+          className="govgr-body-lg govgr-body govgr-!-font-size-16"
+        >
+          hello
+        </p>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
+  </ForwardRef(NormalText)>
 </ForwardRef(Paragraph)>
 `;
 
-exports[`renders the Paragraph with variant=lead and fontSize=19 1`] = `
+exports[`renders the Paragraph with size=lead and fontSize=19 1`] = `
 <ForwardRef(Paragraph)
-  fontSize="19"
-  variant="lead"
+  fontSize={19}
+  size="lg"
 >
-  <ForwardRef(Base)
+  <ForwardRef(NormalText)
     as="p"
-    className="govgr-body-l govgr-!-font-size-19 govgr-body"
+    fontSize={19}
+    size="lg"
   >
-    <p
-      className="govgr-body-l govgr-!-font-size-19 govgr-body"
+    <ForwardRef(Typography)
+      as="p"
+      className="govgr-body-lg govgr-body"
+      fontSize={19}
     >
-      hello
-    </p>
-  </ForwardRef(Base)>
+      <ForwardRef(Base)
+        as="p"
+        className="govgr-body-lg govgr-body govgr-!-font-size-19"
+      >
+        <p
+          className="govgr-body-lg govgr-body govgr-!-font-size-19"
+        >
+          hello
+        </p>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
+  </ForwardRef(NormalText)>
 </ForwardRef(Paragraph)>
 `;
 
-exports[`renders the Paragraph with variant=lead and fontSize=24 1`] = `
+exports[`renders the Paragraph with size=lead and fontSize=24 1`] = `
 <ForwardRef(Paragraph)
-  fontSize="14"
-  variant="lead"
+  fontSize={14}
+  size="lg"
 >
-  <ForwardRef(Base)
+  <ForwardRef(NormalText)
     as="p"
-    className="govgr-body-l govgr-!-font-size-14 govgr-body"
+    fontSize={14}
+    size="lg"
   >
-    <p
-      className="govgr-body-l govgr-!-font-size-14 govgr-body"
+    <ForwardRef(Typography)
+      as="p"
+      className="govgr-body-lg govgr-body"
+      fontSize={14}
     >
-      hello
-    </p>
-  </ForwardRef(Base)>
+      <ForwardRef(Base)
+        as="p"
+        className="govgr-body-lg govgr-body govgr-!-font-size-14"
+      >
+        <p
+          className="govgr-body-lg govgr-body govgr-!-font-size-14"
+        >
+          hello
+        </p>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
+  </ForwardRef(NormalText)>
 </ForwardRef(Paragraph)>
 `;
 
-exports[`renders the Paragraph with variant=lead and fontSize=30 1`] = `
+exports[`renders the Paragraph with size=lead and fontSize=30 1`] = `
 <ForwardRef(Paragraph)
-  fontSize="30"
-  variant="lead"
+  fontSize={30}
+  size="lg"
 >
-  <ForwardRef(Base)
+  <ForwardRef(NormalText)
     as="p"
-    className="govgr-body-l govgr-!-font-size-30 govgr-body"
+    fontSize={30}
+    size="lg"
   >
-    <p
-      className="govgr-body-l govgr-!-font-size-30 govgr-body"
+    <ForwardRef(Typography)
+      as="p"
+      className="govgr-body-lg govgr-body"
+      fontSize={30}
     >
-      hello
-    </p>
-  </ForwardRef(Base)>
+      <ForwardRef(Base)
+        as="p"
+        className="govgr-body-lg govgr-body govgr-!-font-size-30"
+      >
+        <p
+          className="govgr-body-lg govgr-body govgr-!-font-size-30"
+        >
+          hello
+        </p>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
+  </ForwardRef(NormalText)>
 </ForwardRef(Paragraph)>
 `;
 
-exports[`renders the Paragraph with variant=lead and fontSize=36 1`] = `
+exports[`renders the Paragraph with size=lead and fontSize=36 1`] = `
 <ForwardRef(Paragraph)
-  fontSize="36"
-  variant="lead"
+  fontSize={36}
+  size="lg"
 >
-  <ForwardRef(Base)
+  <ForwardRef(NormalText)
     as="p"
-    className="govgr-body-l govgr-!-font-size-36 govgr-body"
+    fontSize={36}
+    size="lg"
   >
-    <p
-      className="govgr-body-l govgr-!-font-size-36 govgr-body"
+    <ForwardRef(Typography)
+      as="p"
+      className="govgr-body-lg govgr-body"
+      fontSize={36}
     >
-      hello
-    </p>
-  </ForwardRef(Base)>
+      <ForwardRef(Base)
+        as="p"
+        className="govgr-body-lg govgr-body govgr-!-font-size-36"
+      >
+        <p
+          className="govgr-body-lg govgr-body govgr-!-font-size-36"
+        >
+          hello
+        </p>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
+  </ForwardRef(NormalText)>
 </ForwardRef(Paragraph)>
 `;
 
-exports[`renders the Paragraph with variant=lead and fontSize=48 1`] = `
+exports[`renders the Paragraph with size=lead and fontSize=48 1`] = `
 <ForwardRef(Paragraph)
-  fontSize="48"
-  variant="lead"
+  fontSize={48}
+  size="lg"
 >
-  <ForwardRef(Base)
+  <ForwardRef(NormalText)
     as="p"
-    className="govgr-body-l govgr-!-font-size-48 govgr-body"
+    fontSize={48}
+    size="lg"
   >
-    <p
-      className="govgr-body-l govgr-!-font-size-48 govgr-body"
+    <ForwardRef(Typography)
+      as="p"
+      className="govgr-body-lg govgr-body"
+      fontSize={48}
     >
-      hello
-    </p>
-  </ForwardRef(Base)>
+      <ForwardRef(Base)
+        as="p"
+        className="govgr-body-lg govgr-body govgr-!-font-size-48"
+      >
+        <p
+          className="govgr-body-lg govgr-body govgr-!-font-size-48"
+        >
+          hello
+        </p>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
+  </ForwardRef(NormalText)>
 </ForwardRef(Paragraph)>
 `;
 
-exports[`renders the Paragraph with variant=lead and fontSize=72 1`] = `
+exports[`renders the Paragraph with size=lead and fontSize=72 1`] = `
 <ForwardRef(Paragraph)
-  fontSize="72"
-  variant="lead"
+  fontSize={72}
+  size="lg"
 >
-  <ForwardRef(Base)
+  <ForwardRef(NormalText)
     as="p"
-    className="govgr-body-l govgr-!-font-size-72 govgr-body"
+    fontSize={72}
+    size="lg"
   >
-    <p
-      className="govgr-body-l govgr-!-font-size-72 govgr-body"
+    <ForwardRef(Typography)
+      as="p"
+      className="govgr-body-lg govgr-body"
+      fontSize={72}
     >
-      hello
-    </p>
-  </ForwardRef(Base)>
+      <ForwardRef(Base)
+        as="p"
+        className="govgr-body-lg govgr-body govgr-!-font-size-72"
+      >
+        <p
+          className="govgr-body-lg govgr-body govgr-!-font-size-72"
+        >
+          hello
+        </p>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
+  </ForwardRef(NormalText)>
 </ForwardRef(Paragraph)>
 `;
 
-exports[`renders the Paragraph with variant=normal 1`] = `
+exports[`renders the Paragraph with size=normal 1`] = `
 <ForwardRef(Paragraph)
-  variant="normal"
+  size="md"
 >
-  <ForwardRef(Base)
+  <ForwardRef(NormalText)
     as="p"
-    className="govgr-body"
+    size="md"
   >
-    <p
+    <ForwardRef(Typography)
+      as="p"
       className="govgr-body"
     >
-      hello
-    </p>
-  </ForwardRef(Base)>
+      <ForwardRef(Base)
+        as="p"
+        className="govgr-body"
+      >
+        <p
+          className="govgr-body"
+        >
+          hello
+        </p>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
+  </ForwardRef(NormalText)>
 </ForwardRef(Paragraph)>
 `;
 
-exports[`renders the Paragraph with variant=normal and fontSize=14 1`] = `
+exports[`renders the Paragraph with size=normal and fontSize=14 1`] = `
 <ForwardRef(Paragraph)
-  fontSize="14"
-  variant="normal"
+  fontSize={14}
+  size="md"
 >
-  <ForwardRef(Base)
+  <ForwardRef(NormalText)
     as="p"
-    className="govgr-!-font-size-14 govgr-body"
+    fontSize={14}
+    size="md"
   >
-    <p
-      className="govgr-!-font-size-14 govgr-body"
+    <ForwardRef(Typography)
+      as="p"
+      className="govgr-body"
+      fontSize={14}
     >
-      hello
-    </p>
-  </ForwardRef(Base)>
+      <ForwardRef(Base)
+        as="p"
+        className="govgr-body govgr-!-font-size-14"
+      >
+        <p
+          className="govgr-body govgr-!-font-size-14"
+        >
+          hello
+        </p>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
+  </ForwardRef(NormalText)>
 </ForwardRef(Paragraph)>
 `;
 
-exports[`renders the Paragraph with variant=normal and fontSize=16 1`] = `
+exports[`renders the Paragraph with size=normal and fontSize=16 1`] = `
 <ForwardRef(Paragraph)
-  fontSize="16"
-  variant="normal"
+  fontSize={16}
+  size="md"
 >
-  <ForwardRef(Base)
+  <ForwardRef(NormalText)
     as="p"
-    className="govgr-!-font-size-16 govgr-body"
+    fontSize={16}
+    size="md"
   >
-    <p
-      className="govgr-!-font-size-16 govgr-body"
+    <ForwardRef(Typography)
+      as="p"
+      className="govgr-body"
+      fontSize={16}
     >
-      hello
-    </p>
-  </ForwardRef(Base)>
+      <ForwardRef(Base)
+        as="p"
+        className="govgr-body govgr-!-font-size-16"
+      >
+        <p
+          className="govgr-body govgr-!-font-size-16"
+        >
+          hello
+        </p>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
+  </ForwardRef(NormalText)>
 </ForwardRef(Paragraph)>
 `;
 
-exports[`renders the Paragraph with variant=normal and fontSize=19 1`] = `
+exports[`renders the Paragraph with size=normal and fontSize=19 1`] = `
 <ForwardRef(Paragraph)
-  fontSize="19"
-  variant="normal"
+  fontSize={19}
+  size="md"
 >
-  <ForwardRef(Base)
+  <ForwardRef(NormalText)
     as="p"
-    className="govgr-!-font-size-19 govgr-body"
+    fontSize={19}
+    size="md"
   >
-    <p
-      className="govgr-!-font-size-19 govgr-body"
+    <ForwardRef(Typography)
+      as="p"
+      className="govgr-body"
+      fontSize={19}
     >
-      hello
-    </p>
-  </ForwardRef(Base)>
+      <ForwardRef(Base)
+        as="p"
+        className="govgr-body govgr-!-font-size-19"
+      >
+        <p
+          className="govgr-body govgr-!-font-size-19"
+        >
+          hello
+        </p>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
+  </ForwardRef(NormalText)>
 </ForwardRef(Paragraph)>
 `;
 
-exports[`renders the Paragraph with variant=normal and fontSize=24 1`] = `
+exports[`renders the Paragraph with size=normal and fontSize=24 1`] = `
 <ForwardRef(Paragraph)
-  fontSize="14"
-  variant="normal"
+  fontSize={14}
+  size="md"
 >
-  <ForwardRef(Base)
+  <ForwardRef(NormalText)
     as="p"
-    className="govgr-!-font-size-14 govgr-body"
+    fontSize={14}
+    size="md"
   >
-    <p
-      className="govgr-!-font-size-14 govgr-body"
+    <ForwardRef(Typography)
+      as="p"
+      className="govgr-body"
+      fontSize={14}
     >
-      hello
-    </p>
-  </ForwardRef(Base)>
+      <ForwardRef(Base)
+        as="p"
+        className="govgr-body govgr-!-font-size-14"
+      >
+        <p
+          className="govgr-body govgr-!-font-size-14"
+        >
+          hello
+        </p>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
+  </ForwardRef(NormalText)>
 </ForwardRef(Paragraph)>
 `;
 
-exports[`renders the Paragraph with variant=normal and fontSize=30 1`] = `
+exports[`renders the Paragraph with size=normal and fontSize=30 1`] = `
 <ForwardRef(Paragraph)
-  fontSize="30"
-  variant="normal"
+  fontSize={30}
+  size="md"
 >
-  <ForwardRef(Base)
+  <ForwardRef(NormalText)
     as="p"
-    className="govgr-!-font-size-30 govgr-body"
+    fontSize={30}
+    size="md"
   >
-    <p
-      className="govgr-!-font-size-30 govgr-body"
+    <ForwardRef(Typography)
+      as="p"
+      className="govgr-body"
+      fontSize={30}
     >
-      hello
-    </p>
-  </ForwardRef(Base)>
+      <ForwardRef(Base)
+        as="p"
+        className="govgr-body govgr-!-font-size-30"
+      >
+        <p
+          className="govgr-body govgr-!-font-size-30"
+        >
+          hello
+        </p>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
+  </ForwardRef(NormalText)>
 </ForwardRef(Paragraph)>
 `;
 
-exports[`renders the Paragraph with variant=normal and fontSize=36 1`] = `
+exports[`renders the Paragraph with size=normal and fontSize=36 1`] = `
 <ForwardRef(Paragraph)
-  fontSize="36"
-  variant="normal"
+  fontSize={36}
+  size="md"
 >
-  <ForwardRef(Base)
+  <ForwardRef(NormalText)
     as="p"
-    className="govgr-!-font-size-36 govgr-body"
+    fontSize={36}
+    size="md"
   >
-    <p
-      className="govgr-!-font-size-36 govgr-body"
+    <ForwardRef(Typography)
+      as="p"
+      className="govgr-body"
+      fontSize={36}
     >
-      hello
-    </p>
-  </ForwardRef(Base)>
+      <ForwardRef(Base)
+        as="p"
+        className="govgr-body govgr-!-font-size-36"
+      >
+        <p
+          className="govgr-body govgr-!-font-size-36"
+        >
+          hello
+        </p>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
+  </ForwardRef(NormalText)>
 </ForwardRef(Paragraph)>
 `;
 
-exports[`renders the Paragraph with variant=normal and fontSize=48 1`] = `
+exports[`renders the Paragraph with size=normal and fontSize=48 1`] = `
 <ForwardRef(Paragraph)
-  fontSize="48"
-  variant="normal"
+  fontSize={48}
+  size="md"
 >
-  <ForwardRef(Base)
+  <ForwardRef(NormalText)
     as="p"
-    className="govgr-!-font-size-48 govgr-body"
+    fontSize={48}
+    size="md"
   >
-    <p
-      className="govgr-!-font-size-48 govgr-body"
+    <ForwardRef(Typography)
+      as="p"
+      className="govgr-body"
+      fontSize={48}
     >
-      hello
-    </p>
-  </ForwardRef(Base)>
+      <ForwardRef(Base)
+        as="p"
+        className="govgr-body govgr-!-font-size-48"
+      >
+        <p
+          className="govgr-body govgr-!-font-size-48"
+        >
+          hello
+        </p>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
+  </ForwardRef(NormalText)>
 </ForwardRef(Paragraph)>
 `;
 
-exports[`renders the Paragraph with variant=normal and fontSize=72 1`] = `
+exports[`renders the Paragraph with size=normal and fontSize=72 1`] = `
 <ForwardRef(Paragraph)
-  fontSize="72"
-  variant="normal"
+  fontSize={72}
+  size="md"
 >
-  <ForwardRef(Base)
+  <ForwardRef(NormalText)
     as="p"
-    className="govgr-!-font-size-72 govgr-body"
+    fontSize={72}
+    size="md"
   >
-    <p
-      className="govgr-!-font-size-72 govgr-body"
+    <ForwardRef(Typography)
+      as="p"
+      className="govgr-body"
+      fontSize={72}
     >
-      hello
-    </p>
-  </ForwardRef(Base)>
+      <ForwardRef(Base)
+        as="p"
+        className="govgr-body govgr-!-font-size-72"
+      >
+        <p
+          className="govgr-body govgr-!-font-size-72"
+        >
+          hello
+        </p>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
+  </ForwardRef(NormalText)>
 </ForwardRef(Paragraph)>
 `;
 
-exports[`renders the Paragraph with variant=normal, fontSize=72 and fontWeight="bold 1`] = `
+exports[`renders the Paragraph with size=normal, fontSize=72 and fontWeight="bold 1`] = `
 <ForwardRef(Paragraph)
-  fontSize="72"
+  fontSize={72}
   fontWeight="bold"
-  variant="normal"
+  size="md"
 >
-  <ForwardRef(Base)
+  <ForwardRef(NormalText)
     as="p"
-    className="govgr-!-font-weight-bold govgr-!-font-size-72 govgr-body"
+    fontSize={72}
+    fontWeight="bold"
+    size="md"
   >
-    <p
-      className="govgr-!-font-weight-bold govgr-!-font-size-72 govgr-body"
+    <ForwardRef(Typography)
+      as="p"
+      className="govgr-body"
+      fontSize={72}
+      fontWeight="bold"
     >
-      hello
-    </p>
-  </ForwardRef(Base)>
+      <ForwardRef(Base)
+        as="p"
+        className="govgr-body govgr-!-font-weight-bold govgr-!-font-size-72"
+      >
+        <p
+          className="govgr-body govgr-!-font-weight-bold govgr-!-font-size-72"
+        >
+          hello
+        </p>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
+  </ForwardRef(NormalText)>
 </ForwardRef(Paragraph)>
 `;
 
-exports[`renders the Paragraph with variant=normal, fontSize=72 and fontWeight="regular 1`] = `
+exports[`renders the Paragraph with size=normal, fontSize=72 and fontWeight="regular 1`] = `
 <ForwardRef(Paragraph)
-  fontSize="72"
+  fontSize={72}
   fontWeight="regular"
-  variant="normal"
+  size="md"
 >
-  <ForwardRef(Base)
+  <ForwardRef(NormalText)
     as="p"
-    className="govgr-!-font-weight-regular govgr-!-font-size-72 govgr-body"
+    fontSize={72}
+    fontWeight="regular"
+    size="md"
   >
-    <p
-      className="govgr-!-font-weight-regular govgr-!-font-size-72 govgr-body"
+    <ForwardRef(Typography)
+      as="p"
+      className="govgr-body"
+      fontSize={72}
+      fontWeight="regular"
     >
-      hello
-    </p>
-  </ForwardRef(Base)>
+      <ForwardRef(Base)
+        as="p"
+        className="govgr-body govgr-!-font-weight-regular govgr-!-font-size-72"
+      >
+        <p
+          className="govgr-body govgr-!-font-weight-regular govgr-!-font-size-72"
+        >
+          hello
+        </p>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
+  </ForwardRef(NormalText)>
 </ForwardRef(Paragraph)>
 `;
 
-exports[`renders the Paragraph with variant=small 1`] = `
+exports[`renders the Paragraph with size=small 1`] = `
 <ForwardRef(Paragraph)
-  variant="small"
+  size="sm"
 >
-  <ForwardRef(Base)
+  <ForwardRef(NormalText)
     as="p"
-    className="govgr-body-s govgr-body"
+    size="sm"
   >
-    <p
-      className="govgr-body-s govgr-body"
+    <ForwardRef(Typography)
+      as="p"
+      className="govgr-body-sm govgr-body"
     >
-      hello
-    </p>
-  </ForwardRef(Base)>
+      <ForwardRef(Base)
+        as="p"
+        className="govgr-body-sm govgr-body"
+      >
+        <p
+          className="govgr-body-sm govgr-body"
+        >
+          hello
+        </p>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
+  </ForwardRef(NormalText)>
 </ForwardRef(Paragraph)>
 `;
 
-exports[`renders the Paragraph with variant=small and fontSize=14 1`] = `
+exports[`renders the Paragraph with size=small and fontSize=14 1`] = `
 <ForwardRef(Paragraph)
-  fontSize="14"
-  variant="small"
+  fontSize={14}
+  size="sm"
 >
-  <ForwardRef(Base)
+  <ForwardRef(NormalText)
     as="p"
-    className="govgr-body-s govgr-!-font-size-14 govgr-body"
+    fontSize={14}
+    size="sm"
   >
-    <p
-      className="govgr-body-s govgr-!-font-size-14 govgr-body"
+    <ForwardRef(Typography)
+      as="p"
+      className="govgr-body-sm govgr-body"
+      fontSize={14}
     >
-      hello
-    </p>
-  </ForwardRef(Base)>
+      <ForwardRef(Base)
+        as="p"
+        className="govgr-body-sm govgr-body govgr-!-font-size-14"
+      >
+        <p
+          className="govgr-body-sm govgr-body govgr-!-font-size-14"
+        >
+          hello
+        </p>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
+  </ForwardRef(NormalText)>
 </ForwardRef(Paragraph)>
 `;
 
-exports[`renders the Paragraph with variant=small and fontSize=16 1`] = `
+exports[`renders the Paragraph with size=small and fontSize=16 1`] = `
 <ForwardRef(Paragraph)
-  fontSize="16"
-  variant="small"
+  fontSize={16}
+  size="sm"
 >
-  <ForwardRef(Base)
+  <ForwardRef(NormalText)
     as="p"
-    className="govgr-body-s govgr-!-font-size-16 govgr-body"
+    fontSize={16}
+    size="sm"
   >
-    <p
-      className="govgr-body-s govgr-!-font-size-16 govgr-body"
+    <ForwardRef(Typography)
+      as="p"
+      className="govgr-body-sm govgr-body"
+      fontSize={16}
     >
-      hello
-    </p>
-  </ForwardRef(Base)>
+      <ForwardRef(Base)
+        as="p"
+        className="govgr-body-sm govgr-body govgr-!-font-size-16"
+      >
+        <p
+          className="govgr-body-sm govgr-body govgr-!-font-size-16"
+        >
+          hello
+        </p>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
+  </ForwardRef(NormalText)>
 </ForwardRef(Paragraph)>
 `;
 
-exports[`renders the Paragraph with variant=small and fontSize=19 1`] = `
+exports[`renders the Paragraph with size=small and fontSize=19 1`] = `
 <ForwardRef(Paragraph)
-  fontSize="19"
-  variant="small"
+  fontSize={19}
+  size="sm"
 >
-  <ForwardRef(Base)
+  <ForwardRef(NormalText)
     as="p"
-    className="govgr-body-s govgr-!-font-size-19 govgr-body"
+    fontSize={19}
+    size="sm"
   >
-    <p
-      className="govgr-body-s govgr-!-font-size-19 govgr-body"
+    <ForwardRef(Typography)
+      as="p"
+      className="govgr-body-sm govgr-body"
+      fontSize={19}
     >
-      hello
-    </p>
-  </ForwardRef(Base)>
+      <ForwardRef(Base)
+        as="p"
+        className="govgr-body-sm govgr-body govgr-!-font-size-19"
+      >
+        <p
+          className="govgr-body-sm govgr-body govgr-!-font-size-19"
+        >
+          hello
+        </p>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
+  </ForwardRef(NormalText)>
 </ForwardRef(Paragraph)>
 `;
 
-exports[`renders the Paragraph with variant=small and fontSize=24 1`] = `
+exports[`renders the Paragraph with size=small and fontSize=24 1`] = `
 <ForwardRef(Paragraph)
-  fontSize="14"
-  variant="small"
+  fontSize={14}
+  size="sm"
 >
-  <ForwardRef(Base)
+  <ForwardRef(NormalText)
     as="p"
-    className="govgr-body-s govgr-!-font-size-14 govgr-body"
+    fontSize={14}
+    size="sm"
   >
-    <p
-      className="govgr-body-s govgr-!-font-size-14 govgr-body"
+    <ForwardRef(Typography)
+      as="p"
+      className="govgr-body-sm govgr-body"
+      fontSize={14}
     >
-      hello
-    </p>
-  </ForwardRef(Base)>
+      <ForwardRef(Base)
+        as="p"
+        className="govgr-body-sm govgr-body govgr-!-font-size-14"
+      >
+        <p
+          className="govgr-body-sm govgr-body govgr-!-font-size-14"
+        >
+          hello
+        </p>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
+  </ForwardRef(NormalText)>
 </ForwardRef(Paragraph)>
 `;
 
-exports[`renders the Paragraph with variant=small and fontSize=30 1`] = `
+exports[`renders the Paragraph with size=small and fontSize=30 1`] = `
 <ForwardRef(Paragraph)
-  fontSize="30"
-  variant="small"
+  fontSize={30}
+  size="sm"
 >
-  <ForwardRef(Base)
+  <ForwardRef(NormalText)
     as="p"
-    className="govgr-body-s govgr-!-font-size-30 govgr-body"
+    fontSize={30}
+    size="sm"
   >
-    <p
-      className="govgr-body-s govgr-!-font-size-30 govgr-body"
+    <ForwardRef(Typography)
+      as="p"
+      className="govgr-body-sm govgr-body"
+      fontSize={30}
     >
-      hello
-    </p>
-  </ForwardRef(Base)>
+      <ForwardRef(Base)
+        as="p"
+        className="govgr-body-sm govgr-body govgr-!-font-size-30"
+      >
+        <p
+          className="govgr-body-sm govgr-body govgr-!-font-size-30"
+        >
+          hello
+        </p>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
+  </ForwardRef(NormalText)>
 </ForwardRef(Paragraph)>
 `;
 
-exports[`renders the Paragraph with variant=small and fontSize=36 1`] = `
+exports[`renders the Paragraph with size=small and fontSize=36 1`] = `
 <ForwardRef(Paragraph)
-  fontSize="36"
-  variant="small"
+  fontSize={36}
+  size="sm"
 >
-  <ForwardRef(Base)
+  <ForwardRef(NormalText)
     as="p"
-    className="govgr-body-s govgr-!-font-size-36 govgr-body"
+    fontSize={36}
+    size="sm"
   >
-    <p
-      className="govgr-body-s govgr-!-font-size-36 govgr-body"
+    <ForwardRef(Typography)
+      as="p"
+      className="govgr-body-sm govgr-body"
+      fontSize={36}
     >
-      hello
-    </p>
-  </ForwardRef(Base)>
+      <ForwardRef(Base)
+        as="p"
+        className="govgr-body-sm govgr-body govgr-!-font-size-36"
+      >
+        <p
+          className="govgr-body-sm govgr-body govgr-!-font-size-36"
+        >
+          hello
+        </p>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
+  </ForwardRef(NormalText)>
 </ForwardRef(Paragraph)>
 `;
 
-exports[`renders the Paragraph with variant=small and fontSize=48 1`] = `
+exports[`renders the Paragraph with size=small and fontSize=48 1`] = `
 <ForwardRef(Paragraph)
-  fontSize="48"
-  variant="small"
+  fontSize={48}
+  size="sm"
 >
-  <ForwardRef(Base)
+  <ForwardRef(NormalText)
     as="p"
-    className="govgr-body-s govgr-!-font-size-48 govgr-body"
+    fontSize={48}
+    size="sm"
   >
-    <p
-      className="govgr-body-s govgr-!-font-size-48 govgr-body"
+    <ForwardRef(Typography)
+      as="p"
+      className="govgr-body-sm govgr-body"
+      fontSize={48}
     >
-      hello
-    </p>
-  </ForwardRef(Base)>
+      <ForwardRef(Base)
+        as="p"
+        className="govgr-body-sm govgr-body govgr-!-font-size-48"
+      >
+        <p
+          className="govgr-body-sm govgr-body govgr-!-font-size-48"
+        >
+          hello
+        </p>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
+  </ForwardRef(NormalText)>
 </ForwardRef(Paragraph)>
 `;
 
-exports[`renders the Paragraph with variant=small and fontSize=72 1`] = `
+exports[`renders the Paragraph with size=small and fontSize=72 1`] = `
 <ForwardRef(Paragraph)
-  fontSize="72"
-  variant="small"
+  fontSize={72}
+  size="sm"
 >
-  <ForwardRef(Base)
+  <ForwardRef(NormalText)
     as="p"
-    className="govgr-body-s govgr-!-font-size-72 govgr-body"
+    fontSize={72}
+    size="sm"
   >
-    <p
-      className="govgr-body-s govgr-!-font-size-72 govgr-body"
+    <ForwardRef(Typography)
+      as="p"
+      className="govgr-body-sm govgr-body"
+      fontSize={72}
     >
-      hello
-    </p>
-  </ForwardRef(Base)>
+      <ForwardRef(Base)
+        as="p"
+        className="govgr-body-sm govgr-body govgr-!-font-size-72"
+      >
+        <p
+          className="govgr-body-sm govgr-body govgr-!-font-size-72"
+        >
+          hello
+        </p>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
+  </ForwardRef(NormalText)>
 </ForwardRef(Paragraph)>
 `;