Accept object fontSize values for style guide

Author: kripod

packages/style-guide/src/TypeScale.js

@@ -11,6 +11,7 @@ const getValue = (fontSizes, key) => {
 
 export const TypeScale = ({ reverse = true, ...props }) => {
   const { fontSizes = [] } = useTheme()
+  const fontSizesArray = Object.values(fontSizes)
 
   return (
     <div
@@ -20,16 +21,16 @@ export const TypeScale = ({ reverse = true, ...props }) => {
         alignItems: 'baseline',
       }}
     >
-      {fontSizes.map((n, i) => {
-        const key = reverse ? fontSizes.length - 1 - i : i
+      {fontSizesArray.map((n, i) => {
+        const key = reverse ? fontSizesArray.length - 1 - i : i
         return (
           <TypeStyle
             key={i}
             fontSize={key}
             sx={{
               mr: 3,
             }}
-            children={getValue(fontSizes, key)}
+            children={getValue(fontSizesArray, key)}
             {...props}
           />
         )