@digigov/react-core 1.0.0-6b93ebf2 → 1.0.0-88820b1e

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

@@ -2,137 +2,185 @@
 
 exports[`renders the NormalText with fontSize=14 1`] = `
 <ForwardRef(NormalText)
-  fontSize="14"
+  fontSize={14}
 >
-  <ForwardRef(Base)
+  <ForwardRef(Typography)
     as="span"
-    className="govgr-!-font-size-14 govgr-body"
+    className="govgr-body"
+    fontSize={14}
   >
-    <span
-      className="govgr-!-font-size-14 govgr-body"
+    <ForwardRef(Base)
+      as="span"
+      className="govgr-body govgr-!-font-size-14"
     >
-      hello
-    </span>
-  </ForwardRef(Base)>
+      <span
+        className="govgr-body govgr-!-font-size-14"
+      >
+        hello
+      </span>
+    </ForwardRef(Base)>
+  </ForwardRef(Typography)>
 </ForwardRef(NormalText)>
 `;
 
 exports[`renders the NormalText with fontSize=16 1`] = `
 <ForwardRef(NormalText)
-  fontSize="16"
+  fontSize={16}
 >
-  <ForwardRef(Base)
+  <ForwardRef(Typography)
     as="span"
-    className="govgr-!-font-size-16 govgr-body"
+    className="govgr-body"
+    fontSize={16}
   >
-    <span
-      className="govgr-!-font-size-16 govgr-body"
+    <ForwardRef(Base)
+      as="span"
+      className="govgr-body govgr-!-font-size-16"
     >
-      hello
-    </span>
-  </ForwardRef(Base)>
+      <span
+        className="govgr-body govgr-!-font-size-16"
+      >
+        hello
+      </span>
+    </ForwardRef(Base)>
+  </ForwardRef(Typography)>
 </ForwardRef(NormalText)>
 `;
 
 exports[`renders the NormalText with fontSize=19 1`] = `
 <ForwardRef(NormalText)
-  fontSize="19"
+  fontSize={19}
 >
-  <ForwardRef(Base)
+  <ForwardRef(Typography)
     as="span"
-    className="govgr-!-font-size-19 govgr-body"
+    className="govgr-body"
+    fontSize={19}
   >
-    <span
-      className="govgr-!-font-size-19 govgr-body"
+    <ForwardRef(Base)
+      as="span"
+      className="govgr-body govgr-!-font-size-19"
     >
-      hello
-    </span>
-  </ForwardRef(Base)>
+      <span
+        className="govgr-body govgr-!-font-size-19"
+      >
+        hello
+      </span>
+    </ForwardRef(Base)>
+  </ForwardRef(Typography)>
 </ForwardRef(NormalText)>
 `;
 
 exports[`renders the NormalText with fontSize=24 1`] = `
 <ForwardRef(NormalText)
-  fontSize="24"
+  fontSize={24}
 >
-  <ForwardRef(Base)
+  <ForwardRef(Typography)
     as="span"
-    className="govgr-!-font-size-24 govgr-body"
+    className="govgr-body"
+    fontSize={24}
   >
-    <span
-      className="govgr-!-font-size-24 govgr-body"
+    <ForwardRef(Base)
+      as="span"
+      className="govgr-body govgr-!-font-size-24"
     >
-      hello
-    </span>
-  </ForwardRef(Base)>
+      <span
+        className="govgr-body govgr-!-font-size-24"
+      >
+        hello
+      </span>
+    </ForwardRef(Base)>
+  </ForwardRef(Typography)>
 </ForwardRef(NormalText)>
 `;
 
 exports[`renders the NormalText with fontSize=30 1`] = `
 <ForwardRef(NormalText)
-  fontSize="30"
+  fontSize={30}
 >
-  <ForwardRef(Base)
+  <ForwardRef(Typography)
     as="span"
-    className="govgr-!-font-size-30 govgr-body"
+    className="govgr-body"
+    fontSize={30}
   >
-    <span
-      className="govgr-!-font-size-30 govgr-body"
+    <ForwardRef(Base)
+      as="span"
+      className="govgr-body govgr-!-font-size-30"
     >
-      hello
-    </span>
-  </ForwardRef(Base)>
+      <span
+        className="govgr-body govgr-!-font-size-30"
+      >
+        hello
+      </span>
+    </ForwardRef(Base)>
+  </ForwardRef(Typography)>
 </ForwardRef(NormalText)>
 `;
 
 exports[`renders the NormalText with fontSize=36 1`] = `
 <ForwardRef(NormalText)
-  fontSize="36"
+  fontSize={36}
 >
-  <ForwardRef(Base)
+  <ForwardRef(Typography)
     as="span"
-    className="govgr-!-font-size-36 govgr-body"
+    className="govgr-body"
+    fontSize={36}
   >
-    <span
-      className="govgr-!-font-size-36 govgr-body"
+    <ForwardRef(Base)
+      as="span"
+      className="govgr-body govgr-!-font-size-36"
     >
-      hello
-    </span>
-  </ForwardRef(Base)>
+      <span
+        className="govgr-body govgr-!-font-size-36"
+      >
+        hello
+      </span>
+    </ForwardRef(Base)>
+  </ForwardRef(Typography)>
 </ForwardRef(NormalText)>
 `;
 
 exports[`renders the NormalText with fontSize=48 1`] = `
 <ForwardRef(NormalText)
-  fontSize="48"
+  fontSize={48}
 >
-  <ForwardRef(Base)
+  <ForwardRef(Typography)
     as="span"
-    className="govgr-!-font-size-48 govgr-body"
+    className="govgr-body"
+    fontSize={48}
   >
-    <span
-      className="govgr-!-font-size-48 govgr-body"
+    <ForwardRef(Base)
+      as="span"
+      className="govgr-body govgr-!-font-size-48"
     >
-      hello
-    </span>
-  </ForwardRef(Base)>
+      <span
+        className="govgr-body govgr-!-font-size-48"
+      >
+        hello
+      </span>
+    </ForwardRef(Base)>
+  </ForwardRef(Typography)>
 </ForwardRef(NormalText)>
 `;
 
 exports[`renders the NormalText with fontSize=72 1`] = `
 <ForwardRef(NormalText)
-  fontSize="72"
+  fontSize={72}
 >
-  <ForwardRef(Base)
+  <ForwardRef(Typography)
     as="span"
-    className="govgr-!-font-size-72 govgr-body"
+    className="govgr-body"
+    fontSize={72}
   >
-    <span
-      className="govgr-!-font-size-72 govgr-body"
+    <ForwardRef(Base)
+      as="span"
+      className="govgr-body govgr-!-font-size-72"
     >
-      hello
-    </span>
-  </ForwardRef(Base)>
+      <span
+        className="govgr-body govgr-!-font-size-72"
+      >
+        hello
+      </span>
+    </ForwardRef(Base)>
+  </ForwardRef(Typography)>
 </ForwardRef(NormalText)>
 `;
 
@@ -140,16 +188,22 @@ exports[`renders the NormalText with fontWeight=bold 1`] = `
 <ForwardRef(NormalText)
   fontWeight="bold"
 >
-  <ForwardRef(Base)
+  <ForwardRef(Typography)
     as="span"
-    className="govgr-!-font-weight-bold govgr-body"
+    className="govgr-body"
+    fontWeight="bold"
   >
-    <span
-      className="govgr-!-font-weight-bold govgr-body"
+    <ForwardRef(Base)
+      as="span"
+      className="govgr-body govgr-!-font-weight-bold"
     >
-      hello
-    </span>
-  </ForwardRef(Base)>
+      <span
+        className="govgr-body govgr-!-font-weight-bold"
+      >
+        hello
+      </span>
+    </ForwardRef(Base)>
+  </ForwardRef(Typography)>
 </ForwardRef(NormalText)>
 `;
 
@@ -157,551 +211,735 @@ exports[`renders the NormalText with fontWeight=regular 1`] = `
 <ForwardRef(NormalText)
   fontWeight="regular"
 >
-  <ForwardRef(Base)
+  <ForwardRef(Typography)
     as="span"
-    className="govgr-!-font-weight-regular govgr-body"
+    className="govgr-body"
+    fontWeight="regular"
   >
-    <span
-      className="govgr-!-font-weight-regular govgr-body"
+    <ForwardRef(Base)
+      as="span"
+      className="govgr-body govgr-!-font-weight-regular"
     >
-      hello
-    </span>
-  </ForwardRef(Base)>
+      <span
+        className="govgr-body govgr-!-font-weight-regular"
+      >
+        hello
+      </span>
+    </ForwardRef(Base)>
+  </ForwardRef(Typography)>
 </ForwardRef(NormalText)>
 `;
 
 exports[`renders the NormalText with no props 1`] = `
 <ForwardRef(NormalText)>
-  <ForwardRef(Base)
+  <ForwardRef(Typography)
     as="span"
     className="govgr-body"
   >
-    <span
+    <ForwardRef(Base)
+      as="span"
       className="govgr-body"
     >
-      hello
-    </span>
-  </ForwardRef(Base)>
+      <span
+        className="govgr-body"
+      >
+        hello
+      </span>
+    </ForwardRef(Base)>
+  </ForwardRef(Typography)>
 </ForwardRef(NormalText)>
 `;
 
-exports[`renders the NormalText with variant=lead 1`] = `
+exports[`renders the NormalText with size=lead 1`] = `
 <ForwardRef(NormalText)
-  variant="lg"
+  size="lg"
 >
-  <ForwardRef(Base)
+  <ForwardRef(Typography)
     as="span"
     className="govgr-body-lg govgr-body"
   >
-    <span
+    <ForwardRef(Base)
+      as="span"
       className="govgr-body-lg govgr-body"
     >
-      hello
-    </span>
-  </ForwardRef(Base)>
+      <span
+        className="govgr-body-lg govgr-body"
+      >
+        hello
+      </span>
+    </ForwardRef(Base)>
+  </ForwardRef(Typography)>
 </ForwardRef(NormalText)>
 `;
 
-exports[`renders the NormalText with variant=lead and font size fontSize=48 1`] = `
+exports[`renders the NormalText with size=lead and font size fontSize=48 1`] = `
 <ForwardRef(NormalText)
-  fontSize="48"
-  variant="lg"
+  fontSize={48}
+  size="lg"
 >
-  <ForwardRef(Base)
+  <ForwardRef(Typography)
     as="span"
-    className="govgr-!-font-size-48 govgr-body-lg govgr-body"
+    className="govgr-body-lg govgr-body"
+    fontSize={48}
   >
-    <span
-      className="govgr-!-font-size-48 govgr-body-lg govgr-body"
+    <ForwardRef(Base)
+      as="span"
+      className="govgr-body-lg govgr-body govgr-!-font-size-48"
     >
-      hello
-    </span>
-  </ForwardRef(Base)>
+      <span
+        className="govgr-body-lg govgr-body govgr-!-font-size-48"
+      >
+        hello
+      </span>
+    </ForwardRef(Base)>
+  </ForwardRef(Typography)>
 </ForwardRef(NormalText)>
 `;
 
-exports[`renders the NormalText with variant=lead and font size fontSize=72 1`] = `
+exports[`renders the NormalText with size=lead and font size fontSize=72 1`] = `
 <ForwardRef(NormalText)
-  fontSize="72"
-  variant="lg"
+  fontSize={72}
+  size="lg"
 >
-  <ForwardRef(Base)
+  <ForwardRef(Typography)
     as="span"
-    className="govgr-!-font-size-72 govgr-body-lg govgr-body"
+    className="govgr-body-lg govgr-body"
+    fontSize={72}
   >
-    <span
-      className="govgr-!-font-size-72 govgr-body-lg govgr-body"
+    <ForwardRef(Base)
+      as="span"
+      className="govgr-body-lg govgr-body govgr-!-font-size-72"
     >
-      hello
-    </span>
-  </ForwardRef(Base)>
+      <span
+        className="govgr-body-lg govgr-body govgr-!-font-size-72"
+      >
+        hello
+      </span>
+    </ForwardRef(Base)>
+  </ForwardRef(Typography)>
 </ForwardRef(NormalText)>
 `;
 
-exports[`renders the NormalText with variant=lead and fontSize=14 1`] = `
+exports[`renders the NormalText with size=lead and fontSize=14 1`] = `
 <ForwardRef(NormalText)
-  fontSize="14"
-  variant="lg"
+  fontSize={14}
+  size="lg"
 >
-  <ForwardRef(Base)
+  <ForwardRef(Typography)
     as="span"
-    className="govgr-!-font-size-14 govgr-body-lg govgr-body"
+    className="govgr-body-lg govgr-body"
+    fontSize={14}
   >
-    <span
-      className="govgr-!-font-size-14 govgr-body-lg govgr-body"
+    <ForwardRef(Base)
+      as="span"
+      className="govgr-body-lg govgr-body govgr-!-font-size-14"
     >
-      hello
-    </span>
-  </ForwardRef(Base)>
+      <span
+        className="govgr-body-lg govgr-body govgr-!-font-size-14"
+      >
+        hello
+      </span>
+    </ForwardRef(Base)>
+  </ForwardRef(Typography)>
 </ForwardRef(NormalText)>
 `;
 
-exports[`renders the NormalText with variant=lead and fontSize=19 1`] = `
+exports[`renders the NormalText with size=lead and fontSize=19 1`] = `
 <ForwardRef(NormalText)
-  fontSize="19"
-  variant="lg"
+  fontSize={19}
+  size="lg"
 >
-  <ForwardRef(Base)
+  <ForwardRef(Typography)
     as="span"
-    className="govgr-!-font-size-19 govgr-body-lg govgr-body"
+    className="govgr-body-lg govgr-body"
+    fontSize={19}
   >
-    <span
-      className="govgr-!-font-size-19 govgr-body-lg govgr-body"
+    <ForwardRef(Base)
+      as="span"
+      className="govgr-body-lg govgr-body govgr-!-font-size-19"
     >
-      hello
-    </span>
-  </ForwardRef(Base)>
+      <span
+        className="govgr-body-lg govgr-body govgr-!-font-size-19"
+      >
+        hello
+      </span>
+    </ForwardRef(Base)>
+  </ForwardRef(Typography)>
 </ForwardRef(NormalText)>
 `;
 
-exports[`renders the NormalText with variant=lead and fontSize=24 1`] = `
+exports[`renders the NormalText with size=lead and fontSize=24 1`] = `
 <ForwardRef(NormalText)
-  fontSize="24"
-  variant="lg"
+  fontSize={24}
+  size="lg"
 >
-  <ForwardRef(Base)
+  <ForwardRef(Typography)
     as="span"
-    className="govgr-!-font-size-24 govgr-body-lg govgr-body"
+    className="govgr-body-lg govgr-body"
+    fontSize={24}
   >
-    <span
-      className="govgr-!-font-size-24 govgr-body-lg govgr-body"
+    <ForwardRef(Base)
+      as="span"
+      className="govgr-body-lg govgr-body govgr-!-font-size-24"
     >
-      hello
-    </span>
-  </ForwardRef(Base)>
+      <span
+        className="govgr-body-lg govgr-body govgr-!-font-size-24"
+      >
+        hello
+      </span>
+    </ForwardRef(Base)>
+  </ForwardRef(Typography)>
 </ForwardRef(NormalText)>
 `;
 
-exports[`renders the NormalText with variant=lead and fontSize=30 1`] = `
+exports[`renders the NormalText with size=lead and fontSize=30 1`] = `
 <ForwardRef(NormalText)
-  fontSize="30"
-  variant="lg"
+  fontSize={30}
+  size="lg"
 >
-  <ForwardRef(Base)
+  <ForwardRef(Typography)
     as="span"
-    className="govgr-!-font-size-30 govgr-body-lg govgr-body"
+    className="govgr-body-lg govgr-body"
+    fontSize={30}
   >
-    <span
-      className="govgr-!-font-size-30 govgr-body-lg govgr-body"
+    <ForwardRef(Base)
+      as="span"
+      className="govgr-body-lg govgr-body govgr-!-font-size-30"
     >
-      hello
-    </span>
-  </ForwardRef(Base)>
+      <span
+        className="govgr-body-lg govgr-body govgr-!-font-size-30"
+      >
+        hello
+      </span>
+    </ForwardRef(Base)>
+  </ForwardRef(Typography)>
 </ForwardRef(NormalText)>
 `;
 
-exports[`renders the NormalText with variant=lead and fontSize=36 1`] = `
+exports[`renders the NormalText with size=lead and fontSize=36 1`] = `
 <ForwardRef(NormalText)
-  fontSize="36"
-  variant="lg"
+  fontSize={36}
+  size="lg"
 >
-  <ForwardRef(Base)
+  <ForwardRef(Typography)
     as="span"
-    className="govgr-!-font-size-36 govgr-body-lg govgr-body"
+    className="govgr-body-lg govgr-body"
+    fontSize={36}
   >
-    <span
-      className="govgr-!-font-size-36 govgr-body-lg govgr-body"
+    <ForwardRef(Base)
+      as="span"
+      className="govgr-body-lg govgr-body govgr-!-font-size-36"
     >
-      hello
-    </span>
-  </ForwardRef(Base)>
+      <span
+        className="govgr-body-lg govgr-body govgr-!-font-size-36"
+      >
+        hello
+      </span>
+    </ForwardRef(Base)>
+  </ForwardRef(Typography)>
 </ForwardRef(NormalText)>
 `;
 
-exports[`renders the NormalText with variant=lead and fontSize=36 2`] = `
+exports[`renders the NormalText with size=lead and fontSize=36 2`] = `
 <ForwardRef(NormalText)
-  fontSize="36"
-  variant="lg"
+  fontSize={36}
+  size="lg"
 >
-  <ForwardRef(Base)
+  <ForwardRef(Typography)
     as="span"
-    className="govgr-!-font-size-36 govgr-body-lg govgr-body"
+    className="govgr-body-lg govgr-body"
+    fontSize={36}
   >
-    <span
-      className="govgr-!-font-size-36 govgr-body-lg govgr-body"
+    <ForwardRef(Base)
+      as="span"
+      className="govgr-body-lg govgr-body govgr-!-font-size-36"
     >
-      hello
-    </span>
-  </ForwardRef(Base)>
+      <span
+        className="govgr-body-lg govgr-body govgr-!-font-size-36"
+      >
+        hello
+      </span>
+    </ForwardRef(Base)>
+  </ForwardRef(Typography)>
 </ForwardRef(NormalText)>
 `;
 
-exports[`renders the NormalText with variant=lead and ontSize=16 1`] = `
+exports[`renders the NormalText with size=lead and ontSize=16 1`] = `
 <ForwardRef(NormalText)
-  fontSize="16"
-  variant="lg"
+  fontSize={16}
+  size="lg"
 >
-  <ForwardRef(Base)
+  <ForwardRef(Typography)
     as="span"
-    className="govgr-!-font-size-16 govgr-body-lg govgr-body"
+    className="govgr-body-lg govgr-body"
+    fontSize={16}
   >
-    <span
-      className="govgr-!-font-size-16 govgr-body-lg govgr-body"
+    <ForwardRef(Base)
+      as="span"
+      className="govgr-body-lg govgr-body govgr-!-font-size-16"
     >
-      hello
-    </span>
-  </ForwardRef(Base)>
+      <span
+        className="govgr-body-lg govgr-body govgr-!-font-size-16"
+      >
+        hello
+      </span>
+    </ForwardRef(Base)>
+  </ForwardRef(Typography)>
 </ForwardRef(NormalText)>
 `;
 
-exports[`renders the NormalText with variant=normal 1`] = `
+exports[`renders the NormalText with size=normal 1`] = `
 <ForwardRef(NormalText)
-  variant="md"
+  size="md"
 >
-  <ForwardRef(Base)
+  <ForwardRef(Typography)
     as="span"
     className="govgr-body"
   >
-    <span
+    <ForwardRef(Base)
+      as="span"
       className="govgr-body"
     >
-      hello
-    </span>
-  </ForwardRef(Base)>
+      <span
+        className="govgr-body"
+      >
+        hello
+      </span>
+    </ForwardRef(Base)>
+  </ForwardRef(Typography)>
 </ForwardRef(NormalText)>
 `;
 
-exports[`renders the NormalText with variant=normal and font size fontSize=48 1`] = `
+exports[`renders the NormalText with size=normal and font size fontSize=48 1`] = `
 <ForwardRef(NormalText)
-  fontSize="48"
-  variant="md"
+  fontSize={48}
+  size="md"
 >
-  <ForwardRef(Base)
+  <ForwardRef(Typography)
     as="span"
-    className="govgr-!-font-size-48 govgr-body"
+    className="govgr-body"
+    fontSize={48}
   >
-    <span
-      className="govgr-!-font-size-48 govgr-body"
+    <ForwardRef(Base)
+      as="span"
+      className="govgr-body govgr-!-font-size-48"
     >
-      hello
-    </span>
-  </ForwardRef(Base)>
+      <span
+        className="govgr-body govgr-!-font-size-48"
+      >
+        hello
+      </span>
+    </ForwardRef(Base)>
+  </ForwardRef(Typography)>
 </ForwardRef(NormalText)>
 `;
 
-exports[`renders the NormalText with variant=normal and font size fontSize=72 1`] = `
+exports[`renders the NormalText with size=normal and font size fontSize=72 1`] = `
 <ForwardRef(NormalText)
-  fontSize="72"
-  variant="md"
+  fontSize={72}
+  size="md"
 >
-  <ForwardRef(Base)
+  <ForwardRef(Typography)
     as="span"
-    className="govgr-!-font-size-72 govgr-body"
+    className="govgr-body"
+    fontSize={72}
   >
-    <span
-      className="govgr-!-font-size-72 govgr-body"
+    <ForwardRef(Base)
+      as="span"
+      className="govgr-body govgr-!-font-size-72"
     >
-      hello
-    </span>
-  </ForwardRef(Base)>
+      <span
+        className="govgr-body govgr-!-font-size-72"
+      >
+        hello
+      </span>
+    </ForwardRef(Base)>
+  </ForwardRef(Typography)>
 </ForwardRef(NormalText)>
 `;
 
-exports[`renders the NormalText with variant=normal and fontSize=14 1`] = `
+exports[`renders the NormalText with size=normal and fontSize=14 1`] = `
 <ForwardRef(NormalText)
-  fontSize="14"
-  variant="md"
+  fontSize={14}
+  size="md"
 >
-  <ForwardRef(Base)
+  <ForwardRef(Typography)
     as="span"
-    className="govgr-!-font-size-14 govgr-body"
+    className="govgr-body"
+    fontSize={14}
   >
-    <span
-      className="govgr-!-font-size-14 govgr-body"
+    <ForwardRef(Base)
+      as="span"
+      className="govgr-body govgr-!-font-size-14"
     >
-      hello
-    </span>
-  </ForwardRef(Base)>
+      <span
+        className="govgr-body govgr-!-font-size-14"
+      >
+        hello
+      </span>
+    </ForwardRef(Base)>
+  </ForwardRef(Typography)>
 </ForwardRef(NormalText)>
 `;
 
-exports[`renders the NormalText with variant=normal and fontSize=19 1`] = `
+exports[`renders the NormalText with size=normal and fontSize=19 1`] = `
 <ForwardRef(NormalText)
-  fontSize="19"
-  variant="md"
+  fontSize={19}
+  size="md"
 >
-  <ForwardRef(Base)
+  <ForwardRef(Typography)
     as="span"
-    className="govgr-!-font-size-19 govgr-body"
+    className="govgr-body"
+    fontSize={19}
   >
-    <span
-      className="govgr-!-font-size-19 govgr-body"
+    <ForwardRef(Base)
+      as="span"
+      className="govgr-body govgr-!-font-size-19"
     >
-      hello
-    </span>
-  </ForwardRef(Base)>
+      <span
+        className="govgr-body govgr-!-font-size-19"
+      >
+        hello
+      </span>
+    </ForwardRef(Base)>
+  </ForwardRef(Typography)>
 </ForwardRef(NormalText)>
 `;
 
-exports[`renders the NormalText with variant=normal and fontSize=24 1`] = `
+exports[`renders the NormalText with size=normal and fontSize=24 1`] = `
 <ForwardRef(NormalText)
-  fontSize="24"
-  variant="md"
+  fontSize={24}
+  size="md"
 >
-  <ForwardRef(Base)
+  <ForwardRef(Typography)
     as="span"
-    className="govgr-!-font-size-24 govgr-body"
+    className="govgr-body"
+    fontSize={24}
   >
-    <span
-      className="govgr-!-font-size-24 govgr-body"
+    <ForwardRef(Base)
+      as="span"
+      className="govgr-body govgr-!-font-size-24"
     >
-      hello
-    </span>
-  </ForwardRef(Base)>
+      <span
+        className="govgr-body govgr-!-font-size-24"
+      >
+        hello
+      </span>
+    </ForwardRef(Base)>
+  </ForwardRef(Typography)>
 </ForwardRef(NormalText)>
 `;
 
-exports[`renders the NormalText with variant=normal and fontSize=30 1`] = `
+exports[`renders the NormalText with size=normal and fontSize=30 1`] = `
 <ForwardRef(NormalText)
-  fontSize="30"
-  variant="md"
+  fontSize={30}
+  size="md"
 >
-  <ForwardRef(Base)
+  <ForwardRef(Typography)
     as="span"
-    className="govgr-!-font-size-30 govgr-body"
+    className="govgr-body"
+    fontSize={30}
   >
-    <span
-      className="govgr-!-font-size-30 govgr-body"
+    <ForwardRef(Base)
+      as="span"
+      className="govgr-body govgr-!-font-size-30"
     >
-      hello
-    </span>
-  </ForwardRef(Base)>
+      <span
+        className="govgr-body govgr-!-font-size-30"
+      >
+        hello
+      </span>
+    </ForwardRef(Base)>
+  </ForwardRef(Typography)>
 </ForwardRef(NormalText)>
 `;
 
-exports[`renders the NormalText with variant=normal and fontSize=36 1`] = `
+exports[`renders the NormalText with size=normal and fontSize=36 1`] = `
 <ForwardRef(NormalText)
-  fontSize="36"
-  variant="md"
+  fontSize={36}
+  size="md"
 >
-  <ForwardRef(Base)
+  <ForwardRef(Typography)
     as="span"
-    className="govgr-!-font-size-36 govgr-body"
+    className="govgr-body"
+    fontSize={36}
   >
-    <span
-      className="govgr-!-font-size-36 govgr-body"
+    <ForwardRef(Base)
+      as="span"
+      className="govgr-body govgr-!-font-size-36"
     >
-      hello
-    </span>
-  </ForwardRef(Base)>
+      <span
+        className="govgr-body govgr-!-font-size-36"
+      >
+        hello
+      </span>
+    </ForwardRef(Base)>
+  </ForwardRef(Typography)>
 </ForwardRef(NormalText)>
 `;
 
-exports[`renders the NormalText with variant=normal and ontSize=16 1`] = `
+exports[`renders the NormalText with size=normal and ontSize=16 1`] = `
 <ForwardRef(NormalText)
-  fontSize="16"
-  variant="md"
+  fontSize={16}
+  size="md"
 >
-  <ForwardRef(Base)
+  <ForwardRef(Typography)
     as="span"
-    className="govgr-!-font-size-16 govgr-body"
+    className="govgr-body"
+    fontSize={16}
   >
-    <span
-      className="govgr-!-font-size-16 govgr-body"
+    <ForwardRef(Base)
+      as="span"
+      className="govgr-body govgr-!-font-size-16"
     >
-      hello
-    </span>
-  </ForwardRef(Base)>
+      <span
+        className="govgr-body govgr-!-font-size-16"
+      >
+        hello
+      </span>
+    </ForwardRef(Base)>
+  </ForwardRef(Typography)>
 </ForwardRef(NormalText)>
 `;
 
-exports[`renders the NormalText with variant=small 1`] = `
+exports[`renders the NormalText with size=small 1`] = `
 <ForwardRef(NormalText)
-  variant="sm"
+  size="sm"
 >
-  <ForwardRef(Base)
+  <ForwardRef(Typography)
     as="span"
     className="govgr-body-sm govgr-body"
   >
-    <span
+    <ForwardRef(Base)
+      as="span"
       className="govgr-body-sm govgr-body"
     >
-      hello
-    </span>
-  </ForwardRef(Base)>
+      <span
+        className="govgr-body-sm govgr-body"
+      >
+        hello
+      </span>
+    </ForwardRef(Base)>
+  </ForwardRef(Typography)>
 </ForwardRef(NormalText)>
 `;
 
-exports[`renders the NormalText with variant=small and font size fontSize=48 1`] = `
+exports[`renders the NormalText with size=small and font size fontSize=48 1`] = `
 <ForwardRef(NormalText)
-  fontSize="48"
-  variant="sm"
+  fontSize={48}
+  size="sm"
 >
-  <ForwardRef(Base)
+  <ForwardRef(Typography)
     as="span"
-    className="govgr-!-font-size-48 govgr-body-sm govgr-body"
+    className="govgr-body-sm govgr-body"
+    fontSize={48}
   >
-    <span
-      className="govgr-!-font-size-48 govgr-body-sm govgr-body"
+    <ForwardRef(Base)
+      as="span"
+      className="govgr-body-sm govgr-body govgr-!-font-size-48"
     >
-      hello
-    </span>
-  </ForwardRef(Base)>
+      <span
+        className="govgr-body-sm govgr-body govgr-!-font-size-48"
+      >
+        hello
+      </span>
+    </ForwardRef(Base)>
+  </ForwardRef(Typography)>
 </ForwardRef(NormalText)>
 `;
 
-exports[`renders the NormalText with variant=small and font size fontSize=72 1`] = `
+exports[`renders the NormalText with size=small and font size fontSize=72 1`] = `
 <ForwardRef(NormalText)
-  fontSize="72"
-  variant="sm"
+  fontSize={72}
+  size="sm"
 >
-  <ForwardRef(Base)
+  <ForwardRef(Typography)
     as="span"
-    className="govgr-!-font-size-72 govgr-body-sm govgr-body"
+    className="govgr-body-sm govgr-body"
+    fontSize={72}
   >
-    <span
-      className="govgr-!-font-size-72 govgr-body-sm govgr-body"
+    <ForwardRef(Base)
+      as="span"
+      className="govgr-body-sm govgr-body govgr-!-font-size-72"
     >
-      hello
-    </span>
-  </ForwardRef(Base)>
+      <span
+        className="govgr-body-sm govgr-body govgr-!-font-size-72"
+      >
+        hello
+      </span>
+    </ForwardRef(Base)>
+  </ForwardRef(Typography)>
 </ForwardRef(NormalText)>
 `;
 
-exports[`renders the NormalText with variant=small and fontSize=14 1`] = `
+exports[`renders the NormalText with size=small and fontSize=14 1`] = `
 <ForwardRef(NormalText)
-  fontSize="14"
-  variant="sm"
+  fontSize={14}
+  size="sm"
 >
-  <ForwardRef(Base)
+  <ForwardRef(Typography)
     as="span"
-    className="govgr-!-font-size-14 govgr-body-sm govgr-body"
+    className="govgr-body-sm govgr-body"
+    fontSize={14}
   >
-    <span
-      className="govgr-!-font-size-14 govgr-body-sm govgr-body"
+    <ForwardRef(Base)
+      as="span"
+      className="govgr-body-sm govgr-body govgr-!-font-size-14"
     >
-      hello
-    </span>
-  </ForwardRef(Base)>
+      <span
+        className="govgr-body-sm govgr-body govgr-!-font-size-14"
+      >
+        hello
+      </span>
+    </ForwardRef(Base)>
+  </ForwardRef(Typography)>
 </ForwardRef(NormalText)>
 `;
 
-exports[`renders the NormalText with variant=small and fontSize=19 1`] = `
+exports[`renders the NormalText with size=small and fontSize=19 1`] = `
 <ForwardRef(NormalText)
-  fontSize="19"
-  variant="sm"
+  fontSize={19}
+  size="sm"
 >
-  <ForwardRef(Base)
+  <ForwardRef(Typography)
     as="span"
-    className="govgr-!-font-size-19 govgr-body-sm govgr-body"
+    className="govgr-body-sm govgr-body"
+    fontSize={19}
   >
-    <span
-      className="govgr-!-font-size-19 govgr-body-sm govgr-body"
+    <ForwardRef(Base)
+      as="span"
+      className="govgr-body-sm govgr-body govgr-!-font-size-19"
     >
-      hello
-    </span>
-  </ForwardRef(Base)>
+      <span
+        className="govgr-body-sm govgr-body govgr-!-font-size-19"
+      >
+        hello
+      </span>
+    </ForwardRef(Base)>
+  </ForwardRef(Typography)>
 </ForwardRef(NormalText)>
 `;
 
-exports[`renders the NormalText with variant=small and fontSize=24 1`] = `
+exports[`renders the NormalText with size=small and fontSize=24 1`] = `
 <ForwardRef(NormalText)
-  fontSize="24"
-  variant="sm"
+  fontSize={24}
+  size="sm"
 >
-  <ForwardRef(Base)
+  <ForwardRef(Typography)
     as="span"
-    className="govgr-!-font-size-24 govgr-body-sm govgr-body"
+    className="govgr-body-sm govgr-body"
+    fontSize={24}
   >
-    <span
-      className="govgr-!-font-size-24 govgr-body-sm govgr-body"
+    <ForwardRef(Base)
+      as="span"
+      className="govgr-body-sm govgr-body govgr-!-font-size-24"
     >
-      hello
-    </span>
-  </ForwardRef(Base)>
+      <span
+        className="govgr-body-sm govgr-body govgr-!-font-size-24"
+      >
+        hello
+      </span>
+    </ForwardRef(Base)>
+  </ForwardRef(Typography)>
 </ForwardRef(NormalText)>
 `;
 
-exports[`renders the NormalText with variant=small and fontSize=30 1`] = `
+exports[`renders the NormalText with size=small and fontSize=30 1`] = `
 <ForwardRef(NormalText)
-  fontSize="30"
-  variant="sm"
+  fontSize={30}
+  size="sm"
 >
-  <ForwardRef(Base)
+  <ForwardRef(Typography)
     as="span"
-    className="govgr-!-font-size-30 govgr-body-sm govgr-body"
+    className="govgr-body-sm govgr-body"
+    fontSize={30}
   >
-    <span
-      className="govgr-!-font-size-30 govgr-body-sm govgr-body"
+    <ForwardRef(Base)
+      as="span"
+      className="govgr-body-sm govgr-body govgr-!-font-size-30"
     >
-      hello
-    </span>
-  </ForwardRef(Base)>
+      <span
+        className="govgr-body-sm govgr-body govgr-!-font-size-30"
+      >
+        hello
+      </span>
+    </ForwardRef(Base)>
+  </ForwardRef(Typography)>
 </ForwardRef(NormalText)>
 `;
 
-exports[`renders the NormalText with variant=small and ontSize=16 1`] = `
+exports[`renders the NormalText with size=small and ontSize=16 1`] = `
 <ForwardRef(NormalText)
-  fontSize="16"
-  variant="sm"
+  fontSize={16}
+  size="sm"
 >
-  <ForwardRef(Base)
+  <ForwardRef(Typography)
     as="span"
-    className="govgr-!-font-size-16 govgr-body-sm govgr-body"
+    className="govgr-body-sm govgr-body"
+    fontSize={16}
   >
-    <span
-      className="govgr-!-font-size-16 govgr-body-sm govgr-body"
+    <ForwardRef(Base)
+      as="span"
+      className="govgr-body-sm govgr-body govgr-!-font-size-16"
     >
-      hello
-    </span>
-  </ForwardRef(Base)>
+      <span
+        className="govgr-body-sm govgr-body govgr-!-font-size-16"
+      >
+        hello
+      </span>
+    </ForwardRef(Base)>
+  </ForwardRef(Typography)>
 </ForwardRef(NormalText)>
 `;
 
-exports[`renders the NormalText with variant=small, font size fontSize=72 and fontWeight=bold 1`] = `
+exports[`renders the NormalText with size=small, font size fontSize=72 and fontWeight=bold 1`] = `
 <ForwardRef(NormalText)
-  fontSize="72"
+  fontSize={72}
   fontWeight="bold"
-  variant="sm"
+  size="sm"
 >
-  <ForwardRef(Base)
+  <ForwardRef(Typography)
     as="span"
-    className="govgr-!-font-weight-bold govgr-!-font-size-72 govgr-body-sm govgr-body"
+    className="govgr-body-sm govgr-body"
+    fontSize={72}
+    fontWeight="bold"
   >
-    <span
-      className="govgr-!-font-weight-bold govgr-!-font-size-72 govgr-body-sm govgr-body"
+    <ForwardRef(Base)
+      as="span"
+      className="govgr-body-sm govgr-body govgr-!-font-weight-bold govgr-!-font-size-72"
     >
-      hello
-    </span>
-  </ForwardRef(Base)>
+      <span
+        className="govgr-body-sm govgr-body govgr-!-font-weight-bold govgr-!-font-size-72"
+      >
+        hello
+      </span>
+    </ForwardRef(Base)>
+  </ForwardRef(Typography)>
 </ForwardRef(NormalText)>
 `;
 
-exports[`renders the NormalText with variant=small, font size fontSize=72 and fontWeight=regular 1`] = `
+exports[`renders the NormalText with size=small, font size fontSize=72 and fontWeight=regular 1`] = `
 <ForwardRef(NormalText)
-  fontSize="72"
+  fontSize={72}
   fontWeight="regular"
-  variant="sm"
+  size="sm"
 >
-  <ForwardRef(Base)
+  <ForwardRef(Typography)
     as="span"
-    className="govgr-!-font-weight-regular govgr-!-font-size-72 govgr-body-sm govgr-body"
-  >
-    <span
-      className="govgr-!-font-weight-regular govgr-!-font-size-72 govgr-body-sm govgr-body"
-    >
-      hello
-    </span>
-  </ForwardRef(Base)>
+    className="govgr-body-sm govgr-body"
+    fontSize={72}
+    fontWeight="regular"
+  >
+    <ForwardRef(Base)
+      as="span"
+      className="govgr-body-sm govgr-body govgr-!-font-weight-regular govgr-!-font-size-72"
+    >
+      <span
+        className="govgr-body-sm govgr-body govgr-!-font-weight-regular govgr-!-font-size-72"
+      >
+        hello
+      </span>
+    </ForwardRef(Base)>
+  </ForwardRef(Typography)>
 </ForwardRef(NormalText)>
 `;