From 65369e819ffdee77162b8399bc29748cc8cabb12 Mon Sep 17 00:00:00 2001
From: heyjul3s <julian.cy.low@gmail.com>
Date: Tue, 22 Dec 2020 15:34:27 +1100
Subject: [PATCH 01/18] dropping SC v4 supp, upgrade to latest React, SC and SS

---
 packages/component-generator/package.json | 18 ++++++------
 yarn.lock                                 | 35 ++++++++++++++++++++++-
 2 files changed, 43 insertions(+), 10 deletions(-)

diff --git a/packages/component-generator/package.json b/packages/component-generator/package.json
index 94aebcf..9719778 100644
--- a/packages/component-generator/package.json
+++ b/packages/component-generator/package.json
@@ -43,20 +43,20 @@
   "homepage": "https://github.com/heyjul3s/artifak#readme",
   "devDependencies": {
     "@artifak/bundler": "^1.1.3",
-    "@types/react": "^16.9.46",
-    "@types/react-dom": "^16.9.8",
-    "@types/styled-components": "^5.1.3",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
+    "@types/styled-components": "^5.1.7",
     "@types/styled-system": "^5.1.10",
     "csstype": "^3.0.5",
-    "react": "^16.11.0",
-    "react-dom": "^16.11.0",
-    "styled-components": "^4.4.1",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "styled-components": "^5.2.1",
     "styled-system": "^5.1.5"
   },
   "peerDependencies": {
-    "react": ">=16.11.0",
-    "react-dom": ">=16.11.0",
-    "styled-components": ">=4.4.1"
+    "react": ">=17.0.1",
+    "react-dom": ">=17.0.1",
+    "styled-components": ">=5.2.1"
   },
   "dependencies": {
     "lodash.isempty": "^4.4.0"
diff --git a/yarn.lock b/yarn.lock
index 67022d8..c73d3d1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3580,6 +3580,13 @@
   dependencies:
     "@types/react" "^16"
 
+"@types/react-dom@^17.0.0":
+  version "17.0.0"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.0.tgz#b3b691eb956c4b3401777ee67b900cb28415d95a"
+  integrity sha512-lUqY7OlkF/RbNtD5nIq7ot8NquXrdFrjSOR6+w9a9RFQevGi1oZO1dcJbXMeONAPKtZ2UrZOEJ5UOCVsxbLk/g==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-native@*":
   version "0.63.37"
   resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.63.37.tgz#c43df90c9d3cc082a97a49a53e989de26cb8ab45"
@@ -3601,7 +3608,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*":
+"@types/react@*", "@types/react@^17.0.0":
   version "17.0.0"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.0.tgz#5af3eb7fad2807092f0046a1302b7823e27919b8"
   integrity sha512-aj/L7RIMsRlWML3YB6KZiXB3fV2t41+5RBGYF8z+tAKU43Px8C3cYUZsDvf1/+Bm4FK21QWBrDutu8ZJ/70qOw==
@@ -3656,6 +3663,15 @@
     "@types/react-native" "*"
     csstype "^3.0.2"
 
+"@types/styled-components@^5.1.7":
+  version "5.1.7"
+  resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.7.tgz#3cd10b088c1cb1acde2e4b166b3e8275a3083710"
+  integrity sha512-BJzPhFygYspyefAGFZTZ/8lCEY4Tk+Iqktvnko3xmJf9LrLqs3+grxPeU3O0zLl6yjbYBopD0/VikbHgXDbJtA==
+  dependencies:
+    "@types/hoist-non-react-statics" "*"
+    "@types/react" "*"
+    csstype "^3.0.2"
+
 "@types/styled-system@^5.1.10":
   version "5.1.10"
   resolved "https://registry.yarnpkg.com/@types/styled-system/-/styled-system-5.1.10.tgz#dcf5690dd837ca49b8de1f23cb99d510c7f4ecb3"
@@ -12266,6 +12282,15 @@ react-dom@^16.11.0:
     prop-types "^15.6.2"
     scheduler "^0.19.1"
 
+react-dom@^17.0.1:
+  version "17.0.1"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.1.tgz#1de2560474ec9f0e334285662ede52dbc5426fc6"
+  integrity sha512-6eV150oJZ9U2t9svnsspTMrWNyHc6chX0KzDeAOXftRa8bNeOKTTfCJ7KorIwenkHd2xqVTBTCZd79yk/lx/Ug==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+    scheduler "^0.20.1"
+
 react-draggable@^4.0.3:
   version "4.4.3"
   resolved "https://registry.yarnpkg.com/react-draggable/-/react-draggable-4.4.3.tgz#0727f2cae5813e36b0e4962bf11b2f9ef2b406f3"
@@ -12413,6 +12438,14 @@ react@^16.11.0:
     object-assign "^4.1.1"
     prop-types "^15.6.2"
 
+react@^17.0.1:
+  version "17.0.1"
+  resolved "https://registry.yarnpkg.com/react/-/react-17.0.1.tgz#6e0600416bd57574e3f86d92edba3d9008726127"
+  integrity sha512-lG9c9UuMHdcAexXtigOZLX8exLWkW0Ku29qPRU8uhF2R9BN96dLCt0psvzPLlHc5OWkgymP3qwTRgbnw5BKx3w==
+  dependencies:
+    loose-envify "^1.1.0"
+    object-assign "^4.1.1"
+
 reactcss@^1.2.0:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/reactcss/-/reactcss-1.2.3.tgz#c00013875e557b1cf0dfd9a368a1c3dab3b548dd"

From b53739d9159910d0c1ca4cabe6442f11f0114845 Mon Sep 17 00:00:00 2001
From: heyjul3s <julian.cy.low@gmail.com>
Date: Tue, 22 Dec 2020 15:39:49 +1100
Subject: [PATCH 02/18] Update createStyledComponent - return FC instead of
 StyledComponent to support scaled style values

---
 ...Component.ts => createStyledComponent.tsx} | 38 +++++++------------
 packages/component-generator/src/typings.ts   | 17 ++-------
 2 files changed, 17 insertions(+), 38 deletions(-)
 rename packages/component-generator/src/{createStyledComponent.ts => createStyledComponent.tsx} (69%)

diff --git a/packages/component-generator/src/createStyledComponent.ts b/packages/component-generator/src/createStyledComponent.tsx
similarity index 69%
rename from packages/component-generator/src/createStyledComponent.ts
rename to packages/component-generator/src/createStyledComponent.tsx
index c185b2e..0c0663a 100644
--- a/packages/component-generator/src/createStyledComponent.ts
+++ b/packages/component-generator/src/createStyledComponent.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import isEmpty from 'lodash.isempty';
-import styled, { StyledComponent } from 'styled-components';
+import styled from 'styled-components';
 
 import {
   compose,
@@ -12,39 +12,36 @@ import {
   position,
   shadow,
   space,
-  typography,
-  variant
+  typography
 } from 'styled-system';
 
-import { BaseComponentProps, StyledComponentConfig } from './typings';
+import { StyledComponentConfig } from './typings';
 
 const pipe = (...fns) => value => fns.reduce((acc, fn) => fn(acc), value);
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 export function createStyledComponent<
-  Props = void,
+  Props extends any,
   Theme = void,
   Attributes = void
->(
-  config: StyledComponentConfig<Props, Theme, Attributes>
-): StyledComponent<
-  keyof JSX.IntrinsicElements | React.ComponentType<Props>,
-  Theme | any,
-  React.ComponentType<Props & BaseComponentProps>,
-  keyof any
-> {
-  return pipe(
+>(config: StyledComponentConfig<Props, Theme, Attributes>): React.FC<Props> {
+  const Styled = pipe(
     createStyledBase,
     createStyledWithAttributes,
     applyStyledComponent
   )(config);
+
+  return props => (
+    <Styled {...props} {...config.styles}>
+      {props.children}
+    </Styled>
+  );
 }
 
 export function createStyledBase<Props = void, Theme = void, Attributes = void>(
   config: StyledComponentConfig<Props, Theme, Attributes>
 ): StyledComponentConfig<Props, Theme, Attributes> {
   const { element = 'div' } = config;
-
   return {
     ...config,
     element,
@@ -71,18 +68,9 @@ export function applyStyledComponent<
   Attributes = void
 >({
   component = styled.div,
-  styles = {},
-  variants,
   styleProps = []
-}: StyledComponentConfig<Props, Theme, Attributes>): StyledComponent<
-  keyof JSX.IntrinsicElements | React.ComponentType<Props>,
-  Theme | any,
-  React.ComponentType<Props & BaseComponentProps>,
-  keyof any
-> {
+}: StyledComponentConfig<Props, Theme, Attributes>) {
   return component(
-    styles,
-    variant({ variants }),
     compose(
       background,
       border,
diff --git a/packages/component-generator/src/typings.ts b/packages/component-generator/src/typings.ts
index f623090..dba7b69 100644
--- a/packages/component-generator/src/typings.ts
+++ b/packages/component-generator/src/typings.ts
@@ -1,11 +1,6 @@
 import * as CSS from 'csstype';
 
-import {
-  CSSObject,
-  ThemedStyledFunction,
-  ThemedStyledProps,
-  InterpolationFunction
-} from 'styled-components';
+import { ThemedStyledFunction, ThemedStyledProps } from 'styled-components';
 
 import { styleFn, Scale } from 'styled-system';
 
@@ -47,11 +42,8 @@ export type StyledComponentConfig<
   Attributes = void,
   ThemeType = void
 > = {
-  styles?: CSSObject | TemplateStringsArray | InterpolationFunction<any>;
+  styles?: StyledSystemCSSObject;
   attrs?: Attrs<Props, Attributes, ThemeType>;
-  variants?: {
-    [key: string]: StyledSystemCSSObject;
-  };
   styleProps?: styleFn[];
   element?: keyof JSX.IntrinsicElements;
   component?: ThemedStyledFunction<
@@ -66,7 +58,6 @@ export type CSSObjectWithScale = CSS.Properties<string | number | Scale>;
 export type CSSPseudos = { [K in CSS.Pseudos]?: CSSObjectWithScale };
 export type StyledSystemCSSObject = CSSObjectWithScale & CSSPseudos;
 
-export type Settings<Attributes = void> = {
-  styles: StyledSystemCSSObject;
-  attrs?: Attributes;
+export type GenericRecord<Object, Type> = {
+  [key in keyof Object]: Type;
 };

From cb9a57eb62a053862f7678d971dd475604309bfc Mon Sep 17 00:00:00 2001
From: heyjul3s <julian.cy.low@gmail.com>
Date: Tue, 22 Dec 2020 15:41:45 +1100
Subject: [PATCH 03/18] Update createBlockComponents - replace
 createStyledFunctionComponent with createStyledComponent to support base
 style overrides - remove attrs params from createBaseCompoents

---
 .../component-generator/index.stories.tsx     | 132 ++++--------------
 .../src/createBaseComponents.tsx              |  75 ++++------
 packages/component-generator/src/index.tsx    |   7 +-
 3 files changed, 56 insertions(+), 158 deletions(-)

diff --git a/packages/component-generator/index.stories.tsx b/packages/component-generator/index.stories.tsx
index 1c7c2ef..8047bd4 100644
--- a/packages/component-generator/index.stories.tsx
+++ b/packages/component-generator/index.stories.tsx
@@ -1,129 +1,53 @@
 import React from 'react';
-import styled from 'styled-components';
-import { variant, system } from 'styled-system';
 import { createStyledComponent, createBaseComponents } from './src';
 
-const typoConfig = {
-  H1: {
-    styles: {
-      fontSize: [48, 96],
-      margin: '0 0 0.25em',
-      lineHeight: 1.5,
-      as: 'h1'
-    }
-  },
-
-  H2: {
-    styles: {
-      fontSize: [37, 39, 41, 43],
-      lineHeight: 1.5,
-      marginTop: 0,
-      as: 'h2'
-    },
-    attrs: {
-      tabIndex: 1
-    }
-  },
-
-  H3: {
-    styles: {
-      fontSize: [27, 28, 30, 32],
-      lineHeight: 1.5,
-      as: 'h3'
-    }
+const Basic = createStyledComponent({
+  styles: {
+    width: '100%',
+    maxWidth: ['480px', '740px', '900px', '1200px']
   }
-};
-
-const typographyStyleProps = system({
-  textDecoration: true,
-  textIndent: true,
-  textTransform: true,
-  textOverflow: true,
-  whiteSpace: true,
-  wordBreak: true,
-  wordSpacing: true
-});
-
-const TypographyBase = createStyledComponent<typeof typographyStyleProps>({
-  styleProps: [typographyStyleProps]
 });
 
-const { H1 } = createBaseComponents<typeof typoConfig, any, HTMLHeadElement>(
-  TypographyBase,
-  typoConfig
-);
-
-const VariantH1 = styled(H1)(
-  variant({
-    variants: {
-      primary: {
-        color: 'red'
-      },
-      secondary: {
-        color: 'hotpink'
-      }
-    }
-  })
-);
-
-export function GenVariadicH1() {
+export function CreateStyledComponentBasicUse() {
   return (
     <>
-      <VariantH1>Hello World</VariantH1>
-      <VariantH1 variant="primary">Hello World</VariantH1>
-      <VariantH1 variant="secondary">Hello World</VariantH1>
+      <Basic>hello</Basic>
     </>
   );
 }
 
-const H1withVarsAttrs = createStyledComponent({
-  styles: {
-    fontSize: '48px',
-    margin: '0 0 0.25em',
-    lineHeight: 1.5
-  },
-  attrs: () => ({
-    title: 'heading'
-  }),
-  variants: {
-    primary: {
-      color: 'red'
-    },
-    secondary: {
-      color: 'hotpink'
+const containerConfig = {
+  Base: {
+    styles: {
+      width: '100%',
+      maxWidth: ['480px', '740px', '900px', '1200px']
     }
   },
-  element: 'h1'
-});
 
-export function H1WithVariantsAttributes() {
-  return (
-    <>
-      <H1withVarsAttrs>Hello World</H1withVarsAttrs>
-      <H1withVarsAttrs variant="primary">Hello World</H1withVarsAttrs>
-      <H1withVarsAttrs variant="secondary">Hello World</H1withVarsAttrs>
-    </>
-  );
-}
+  FlexContainer: {
+    display: 'flex'
+  },
+
+  Container: {
+    padding: ['1em', '1.5em']
+  },
 
-const shorthandConfig = {
-  ShortHandH1: {
-    fontSize: '48px',
-    margin: '0 0 0.25em',
-    lineHeight: 1.5
+  UnpaddedContainer: {
+    margin: 0,
+    padding: 0
   }
 };
 
-const { ShortHandH1 } = createBaseComponents<
-  typeof shorthandConfig,
-  any,
-  HTMLHeadElement
->(TypographyBase, shorthandConfig);
+const { FlexContainer, Container, UnpaddedContainer } = createBaseComponents<
+  typeof containerConfig
+>(containerConfig);
 
-export function Shorthand() {
+export function BasicUsage() {
   return (
     <>
-      <ShortHandH1>Hello World</ShortHandH1>
+      <Container>Default Container</Container>
+      <FlexContainer>Flex Container</FlexContainer>
+      <UnpaddedContainer>Unpadded Container</UnpaddedContainer>
     </>
   );
 }
diff --git a/packages/component-generator/src/createBaseComponents.tsx b/packages/component-generator/src/createBaseComponents.tsx
index e42f624..2b13d43 100644
--- a/packages/component-generator/src/createBaseComponents.tsx
+++ b/packages/component-generator/src/createBaseComponents.tsx
@@ -1,28 +1,39 @@
 import React, { HTMLAttributes } from 'react';
-import { AnyStyledComponent } from 'styled-components';
-import { Variant, Settings, StyledSystemCSSObject } from './typings';
+import { createStyledComponent } from './createStyledComponent';
+
+import {
+  GenericRecord,
+  StyledComponentConfig,
+  Variant,
+  StyledSystemCSSObject
+} from './typings';
 
 export function createBaseComponents<
-  S,
-  P = Record<string, unknown>,
-  E = HTMLDivElement
->(
-  Base: AnyStyledComponent,
-  settings:
-    | { [key in keyof S]: Settings<HTMLAttributes<E>> }
-    | { [key in keyof S]: StyledSystemCSSObject }
-): { [key in keyof S]: React.ComponentType<P & Variant> } {
-  const acc = {} as { [key in keyof S]: React.ComponentType<P & Variant> };
+  Config = any,
+  Theme = any,
+  Props = Record<string, unknown>,
+  Element = HTMLDivElement
+>(settings: {
+  [key: string]:
+    | StyledSystemCSSObject
+    | StyledComponentConfig<Props & Variant, Theme, HTMLAttributes<Element>>;
+}): GenericRecord<Config, React.FC<Props & Variant>> {
+  const acc = {} as GenericRecord<Config, React.FC<Props & Variant>>;
+  const baseSettings = settings.Base as StyledComponentConfig<
+    Props & Variant,
+    Theme,
+    HTMLAttributes<Element>
+  >;
 
   return !!settings && Object.keys(settings).length >= 1
     ? Object.entries(settings).reduce((acc, entry) => {
         const [prop, setting] = entry;
-        const entrySetting = extractSettings<E>(
-          setting as Settings<HTMLAttributes<E>> | StyledSystemCSSObject
-        );
 
         if (hasKey(settings, prop)) {
-          acc[prop] = createStyledFunctionComponent<E, P>(Base, entrySetting);
+          acc[prop] = createStyledComponent({
+            ...baseSettings,
+            styles: { ...baseSettings.styles, ...setting }
+          } as StyledComponentConfig<Props & Variant, Theme, HTMLAttributes<Element>>);
 
           acc[prop].displayName = prop;
         }
@@ -32,38 +43,6 @@ export function createBaseComponents<
     : acc;
 }
 
-export function extractSettings<E>(
-  setting: Settings<HTMLAttributes<E>>
-): StyledSystemCSSObject & HTMLAttributes<E>;
-
-export function extractSettings<E>(
-  setting: StyledSystemCSSObject
-): StyledSystemCSSObject & HTMLAttributes<E>;
-
-export function extractSettings<E>(
-  setting: Settings<HTMLAttributes<E>> | StyledSystemCSSObject
-): StyledSystemCSSObject & HTMLAttributes<E>;
-
-/* eslint-disable @typescript-eslint/no-explicit-any */
-export function extractSettings<E>(
-  setting: any
-): StyledSystemCSSObject & HTMLAttributes<E> {
-  return hasKey(setting, 'styles') || hasKey(setting, 'attrs')
-    ? { ...setting.styles, ...setting.attrs }
-    : setting;
-}
-
-export function createStyledFunctionComponent<E, P>(
-  Base: AnyStyledComponent,
-  setting: StyledSystemCSSObject & HTMLAttributes<E>
-): React.FC<P> {
-  return props => (
-    <Base {...setting} {...props}>
-      {props.children}
-    </Base>
-  );
-}
-
 /* eslint-disable @typescript-eslint/no-explicit-any */
 function hasKey<O>(obj: O, key: keyof any): key is keyof O {
   return key in obj;
diff --git a/packages/component-generator/src/index.tsx b/packages/component-generator/src/index.tsx
index 913b199..3f77842 100644
--- a/packages/component-generator/src/index.tsx
+++ b/packages/component-generator/src/index.tsx
@@ -1,8 +1,3 @@
-export {
-  createBaseComponents,
-  createStyledFunctionComponent
-} from './createBaseComponents';
-
+export { createBaseComponents } from './createBaseComponents';
 export { createStyledComponent } from './createStyledComponent';
-
 export { BaseComponentProps, Variant, StyledComponentConfig } from './typings';

From 7cb0f01fcf79604308a47e96f749d20fb7147a04 Mon Sep 17 00:00:00 2001
From: heyjul3s <julian.cy.low@gmail.com>
Date: Tue, 22 Dec 2020 15:42:32 +1100
Subject: [PATCH 04/18] Update Block - update Block to use new API - update
 Block storybook

---
 packages/block/index.stories.mdx             | 11 -----
 packages/block/index.stories.tsx             | 44 ++++++++++++++++++++
 packages/block/src/createBlockComponents.tsx | 14 +++----
 3 files changed, 51 insertions(+), 18 deletions(-)
 delete mode 100644 packages/block/index.stories.mdx
 create mode 100644 packages/block/index.stories.tsx

diff --git a/packages/block/index.stories.mdx b/packages/block/index.stories.mdx
deleted file mode 100644
index 6574503..0000000
--- a/packages/block/index.stories.mdx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Meta } from '@storybook/addon-docs/blocks';
-
-<Meta title="Block" />
-
-# Block
-
-This is a simple button.
-
-import { BlockBase } from './src';
-
-<Block>Hello World</Block>
diff --git a/packages/block/index.stories.tsx b/packages/block/index.stories.tsx
new file mode 100644
index 0000000..60a5777
--- /dev/null
+++ b/packages/block/index.stories.tsx
@@ -0,0 +1,44 @@
+import { BlockBase, createBlockComponents } from './src';
+
+export function BlockBaseUsage() {
+  return <BlockBase>A Block Base</BlockBase>;
+}
+
+const settings = {
+  Base: {
+    styles: {
+      width: '100%',
+      maxWidth: ['480px', '768px', '1024px', '1200px'],
+      padding: ['1em', '1.5em'],
+      margin: '0 auto'
+    }
+  },
+
+  FlexContainer: {
+    display: 'flex'
+  },
+
+  UnpaddedContainer: {
+    padding: 0
+  }
+};
+
+const {
+  Base: Container,
+  FlexContainer,
+  UnpaddedContainer
+} = createBlockComponents<typeof settings>(settings);
+
+export function CreateBlocksUsage() {
+  return (
+    <>
+      <Container>Container</Container>
+      <FlexContainer>Flex Container</FlexContainer>
+      <UnpaddedContainer>Unpadded Container</UnpaddedContainer>
+    </>
+  );
+}
+
+export default {
+  title: 'Block'
+};
diff --git a/packages/block/src/createBlockComponents.tsx b/packages/block/src/createBlockComponents.tsx
index 0cd4784..04a41f1 100644
--- a/packages/block/src/createBlockComponents.tsx
+++ b/packages/block/src/createBlockComponents.tsx
@@ -1,11 +1,11 @@
-import React from 'react';
 import { createBaseComponents } from '@artifak/component-generator';
-import { BlockBaseProps } from './typings';
-import { BlockBase } from './BlockBase';
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
-export function createBlockComponents<S>(
-  styles: S
-): { [key in keyof any]: React.ComponentType<BlockBaseProps> } {
-  return createBaseComponents<S, BlockBaseProps>(BlockBase, styles);
+export function createBlockComponents<
+  Config,
+  Theme = any,
+  Props = Record<string, unknown>,
+  Element = HTMLDivElement
+>(settings) {
+  return createBaseComponents<Config, Theme, Props, Element>(settings);
 }

From 7154921056343bbd4bbce9d425471aee31f77b21 Mon Sep 17 00:00:00 2001
From: heyjul3s <julian.cy.low@gmail.com>
Date: Tue, 22 Dec 2020 15:43:30 +1100
Subject: [PATCH 05/18] Update Typography - update Typography to use new
 generator API

---
 packages/typography/src/TypographyBase.tsx    |  2 +-
 .../src/createTypographyComponents.ts         | 19 ++++++++++++++-----
 2 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/packages/typography/src/TypographyBase.tsx b/packages/typography/src/TypographyBase.tsx
index a7998f3..a124236 100644
--- a/packages/typography/src/TypographyBase.tsx
+++ b/packages/typography/src/TypographyBase.tsx
@@ -1,7 +1,7 @@
 import { system } from 'styled-system';
 import { createStyledComponent } from '@artifak/component-generator';
 
-const typographyStyleProps = system({
+export const typographyStyleProps = system({
   textDecoration: true,
   textIndent: true,
   textTransform: true,
diff --git a/packages/typography/src/createTypographyComponents.ts b/packages/typography/src/createTypographyComponents.ts
index d20a2ae..cd400e1 100644
--- a/packages/typography/src/createTypographyComponents.ts
+++ b/packages/typography/src/createTypographyComponents.ts
@@ -1,9 +1,18 @@
 import { createBaseComponents } from '@artifak/component-generator';
 import { TypographyBaseProps } from './typings';
-import { TypographyBase } from './TypographyBase';
+import { typographyStyleProps } from './TypographyBase';
 
-export function createTypographyComponents<S>(
-  styles: S
-): { [key in keyof S]: React.ComponentType<TypographyBaseProps> } {
-  return createBaseComponents<S, TypographyBaseProps>(TypographyBase, styles);
+export function createTypographyComponents<
+  Config,
+  Theme = any,
+  Props = Record<string, unknown> & TypographyBaseProps,
+  Element = HTMLDivElement
+>(settings: any) {
+  return createBaseComponents<Config, Theme, Props, Element>({
+    Base: {
+      ...settings.Base,
+      styleProps: [typographyStyleProps, ...settings.Base.styleProps]
+    },
+    ...settings
+  });
 }

From a6dec812f49af9831df336811a5d890076500f26 Mon Sep 17 00:00:00 2001
From: heyjul3s <julian.cy.low@gmail.com>
Date: Wed, 23 Dec 2020 16:29:02 +1100
Subject: [PATCH 06/18] update docs packages

---
 docs/package.json |  8 ++---
 docs/yarn.lock    | 92 +++++++++++++++++++++--------------------------
 2 files changed, 44 insertions(+), 56 deletions(-)

diff --git a/docs/package.json b/docs/package.json
index 335775b..179fdcf 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -11,13 +11,13 @@
   "dependencies": {
     "artifak": "^1.1.5",
     "csstype": "^3.0.5",
-    "framer-motion": "^3.0.0",
+    "framer-motion": "^3.1.1",
     "lodash.isplainobject": "^4.0.6",
     "next": "10.0.3",
     "next-seo": "^4.17.0",
-    "react": "^16.14.0",
+    "react": "^17.0.1",
     "react-custom-scrollbars": "^4.2.1",
-    "react-dom": "^16.14.0",
+    "react-dom": "^17.0.1",
     "react-intl": "^5.10.9",
     "react-markings": "^1.3.0",
     "react-spring": "^8.0.27",
@@ -29,7 +29,7 @@
   "devDependencies": {
     "@types/node": "^14.14.14",
     "@types/react": "^17.0.0",
-    "@types/styled-components": "^5.1.6",
+    "@types/styled-components": "^5.1.7",
     "@types/styled-system": "^5.1.10",
     "babel-plugin-styled-components": "^1.12.0",
     "typescript": "^4.1.3"
diff --git a/docs/yarn.lock b/docs/yarn.lock
index 722fe9a..bb5aae9 100644
--- a/docs/yarn.lock
+++ b/docs/yarn.lock
@@ -487,13 +487,6 @@
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7"
   integrity sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==
 
-"@types/react-native@*":
-  version "0.63.8"
-  resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.63.8.tgz#73ec087122c64c309eeaf150b565b8d755f0fb1f"
-  integrity sha512-QRwGFRTyGafRVTUS+0GYyJrlpmS3boyBaFI0ULSc+mh/lQNxrzbdQvoL2k5X7+t9hxyqA4dTQAlP6l0ir/fNJQ==
-  dependencies:
-    "@types/react" "*"
-
 "@types/react@*":
   version "16.9.46"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.46.tgz#f0326cd7adceda74148baa9bff6e918632f5069e"
@@ -510,14 +503,13 @@
     "@types/prop-types" "*"
     csstype "^3.0.2"
 
-"@types/styled-components@^5.1.6":
-  version "5.1.6"
-  resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.6.tgz#b47460f1684072576999955b5b5153e6f238622c"
-  integrity sha512-YN1j99dOL92T+76qhQcrPUb2nKZLzawko9j3IIwTHdKloMx20WwcGkBwdpbi8SpAkTc362rgfIllqPdSUplmRw==
+"@types/styled-components@^5.1.7":
+  version "5.1.7"
+  resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.7.tgz#3cd10b088c1cb1acde2e4b166b3e8275a3083710"
+  integrity sha512-BJzPhFygYspyefAGFZTZ/8lCEY4Tk+Iqktvnko3xmJf9LrLqs3+grxPeU3O0zLl6yjbYBopD0/VikbHgXDbJtA==
   dependencies:
     "@types/hoist-non-react-statics" "*"
     "@types/react" "*"
-    "@types/react-native" "*"
     csstype "^3.0.2"
 
 "@types/styled-system@^5.1.10":
@@ -2163,25 +2155,23 @@ fragment-cache@^0.2.1:
   dependencies:
     map-cache "^0.2.2"
 
-framer-motion@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-3.0.0.tgz#71f786ca15ff2c6fa471eb7bcfed57169aae1b0b"
-  integrity sha512-jCFbtemYiEdjh6snaT9lrTEEbWKYzUNAuckzWx2R/sYa8IDGpWGb/aV5qm1sn4/sgiVGZKnPj25Gzsny/pJxcQ==
+framer-motion@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-3.1.1.tgz#a8a779501213b7ce02cc35beb27621d73cc2f1e7"
+  integrity sha512-Gm1QSb0xUxuhcPar5FIs5Ws+STrhLZ6XZf2Io8dVwFofe1OzwkL9asGFVu7z3y6WqC4Hvnxm7wsW5SBHlxZDYw==
   dependencies:
-    framesync "^4.1.0"
+    framesync "^5.0.0"
     hey-listen "^1.0.8"
-    popmotion "9.0.1"
-    style-value-types "^3.1.9"
+    popmotion "^9.0.2"
+    style-value-types "^3.2.0"
     tslib "^1.10.0"
   optionalDependencies:
     "@emotion/is-prop-valid" "^0.8.2"
 
-framesync@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/framesync/-/framesync-4.1.0.tgz#69a8db3ca432dc70d6a76ba882684a1497ef068a"
-  integrity sha512-MmgZ4wCoeVxNbx2xp5hN/zPDCbLSKiDt4BbbslK7j/pM2lg5S0vhTNv1v8BCVb99JPIo6hXBFdwzU7Q4qcAaoQ==
-  dependencies:
-    hey-listen "^1.0.5"
+framesync@5.0.0, framesync@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/framesync/-/framesync-5.0.0.tgz#7de8caedf53ac441118e79680f1beb7391c328b6"
+  integrity sha512-wd8t+JsQGisluSv1twiEeDv0aNGpavGb9q7xgIk9fGbcIWkNXF/KVtrjnOrCwBWJuiXxlJfNkcvGudsI32FxYA==
 
 from2@^2.1.0:
   version "2.3.0"
@@ -2381,7 +2371,7 @@ he@1.2.0:
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
-hey-listen@^1.0.5, hey-listen@^1.0.8:
+hey-listen@^1.0.8:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/hey-listen/-/hey-listen-1.0.8.tgz#8e59561ff724908de1aa924ed6ecc84a56a9aa68"
   integrity sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==
@@ -3462,14 +3452,14 @@ pnp-webpack-plugin@1.6.4:
   dependencies:
     ts-pnp "^1.1.6"
 
-popmotion@9.0.1:
-  version "9.0.1"
-  resolved "https://registry.yarnpkg.com/popmotion/-/popmotion-9.0.1.tgz#63657089c124ffad500c45e6eb20b8e3cca919af"
-  integrity sha512-pXBHRaLz/WBlatXb0ADPGXksqr24z24z1H2/xTtsin9E6dJ0bGK1nWyZpcvdjDIIf8XxAkbf3/FN3JxayVmFbQ==
+popmotion@^9.0.2:
+  version "9.0.2"
+  resolved "https://registry.yarnpkg.com/popmotion/-/popmotion-9.0.2.tgz#477650c3b4af97161011809223d9ca6860f3a2b5"
+  integrity sha512-WfSg8IfoUwYIP9uqeqbgncIsMHLAKWqebT2IP1aGAI6gdSJqTPy/H8NvP4ZyDtDCUCx5Yh3Pth/7iUJjIwR7LA==
   dependencies:
-    framesync "^4.1.0"
+    framesync "5.0.0"
     hey-listen "^1.0.8"
-    style-value-types "^3.1.9"
+    style-value-types "3.2.0"
     tslib "^1.10.0"
 
 posix-character-classes@^0.1.0:
@@ -3607,7 +3597,7 @@ promise-inflight@^1.0.1:
   resolved "https://registry.yarnpkg.com/promise-inflight/-/promise-inflight-1.0.1.tgz#98472870bf228132fcbdd868129bad12c3c029e3"
   integrity sha1-mEcocL8igTL8vdhoEputEsPAKeM=
 
-prop-types@15.7.2, prop-types@^15.5.10, prop-types@^15.5.8, prop-types@^15.6.2:
+prop-types@15.7.2, prop-types@^15.5.10, prop-types@^15.5.8:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -3741,15 +3731,14 @@ react-custom-scrollbars@^4.2.1:
     prop-types "^15.5.10"
     raf "^3.1.0"
 
-react-dom@^16.14.0:
-  version "16.14.0"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.14.0.tgz#7ad838ec29a777fb3c75c3a190f661cf92ab8b89"
-  integrity sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==
+react-dom@^17.0.1:
+  version "17.0.1"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.1.tgz#1de2560474ec9f0e334285662ede52dbc5426fc6"
+  integrity sha512-6eV150oJZ9U2t9svnsspTMrWNyHc6chX0KzDeAOXftRa8bNeOKTTfCJ7KorIwenkHd2xqVTBTCZd79yk/lx/Ug==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
-    prop-types "^15.6.2"
-    scheduler "^0.19.1"
+    scheduler "^0.20.1"
 
 react-intl@^5.10.9:
   version "5.10.9"
@@ -3806,14 +3795,13 @@ react-syntax-highlighter@^15.4.3:
     prismjs "^1.22.0"
     refractor "^3.2.0"
 
-react@^16.14.0:
-  version "16.14.0"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d"
-  integrity sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==
+react@^17.0.1:
+  version "17.0.1"
+  resolved "https://registry.yarnpkg.com/react/-/react-17.0.1.tgz#6e0600416bd57574e3f86d92edba3d9008726127"
+  integrity sha512-lG9c9UuMHdcAexXtigOZLX8exLWkW0Ku29qPRU8uhF2R9BN96dLCt0psvzPLlHc5OWkgymP3qwTRgbnw5BKx3w==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
-    prop-types "^15.6.2"
 
 "readable-stream@1 || 2", readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.6, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.3.3, readable-stream@^2.3.6, readable-stream@~2.3.6:
   version "2.3.7"
@@ -3996,10 +3984,10 @@ sass-loader@10.0.5:
     schema-utils "^3.0.0"
     semver "^7.3.2"
 
-scheduler@^0.19.1:
-  version "0.19.1"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.19.1.tgz#4f3e2ed2c1a7d65681f4c854fa8c5a1ccb40f196"
-  integrity sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==
+scheduler@^0.20.1:
+  version "0.20.1"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.1.tgz#da0b907e24026b01181ecbc75efdc7f27b5a000c"
+  integrity sha512-LKTe+2xNJBNxu/QhHvDR14wUXHRQbVY5ZOYpOGWRzhydZUqrLb2JBvLPY7cAqFmqrWuDED0Mjk7013SZiOz6Bw==
   dependencies:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
@@ -4391,10 +4379,10 @@ style-loader@1.2.1:
     loader-utils "^2.0.0"
     schema-utils "^2.6.6"
 
-style-value-types@^3.1.9:
-  version "3.1.9"
-  resolved "https://registry.yarnpkg.com/style-value-types/-/style-value-types-3.1.9.tgz#faf7da660d3f284ed695cff61ea197d85b9122cc"
-  integrity sha512-050uqgB7WdvtgacoQKm+4EgKzJExVq0sieKBQQtJiU3Muh6MYcCp4T3M8+dfl6VOF2LR0NNwXBP1QYEed8DfIw==
+style-value-types@3.2.0, style-value-types@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/style-value-types/-/style-value-types-3.2.0.tgz#eb89cab1340823fa7876f3e289d29d99c92111bb"
+  integrity sha512-ih0mGsrYYmVvdDi++/66O6BaQPRPRMQHoZevNNdMMcPlP/cH28Rnfsqf1UEba/Bwfuw9T8BmIMwbGdzsPwQKrQ==
   dependencies:
     hey-listen "^1.0.8"
     tslib "^1.10.0"

From 462642b3497b4dfe033e6354ddf6e358cb26daff Mon Sep 17 00:00:00 2001
From: heyjul3s <julian.cy.low@gmail.com>
Date: Wed, 23 Dec 2020 16:29:38 +1100
Subject: [PATCH 07/18] update all packages to latest

---
 packages/block/package.json      |  22 +++---
 packages/flex/package.json       |  24 +++---
 packages/grid/package.json       |  22 +++---
 packages/imagery/package.json    |  22 +++---
 packages/media/package.json      |   8 +-
 packages/typography/package.json |  24 +++---
 yarn.lock                        | 131 ++-----------------------------
 7 files changed, 72 insertions(+), 181 deletions(-)

diff --git a/packages/block/package.json b/packages/block/package.json
index 508a268..9876e55 100644
--- a/packages/block/package.json
+++ b/packages/block/package.json
@@ -24,7 +24,9 @@
     "test": "__tests__",
     "src": "src"
   },
-  "files": ["dist"],
+  "files": [
+    "dist"
+  ],
   "publishConfig": {
     "access": "public"
   },
@@ -41,19 +43,19 @@
   },
   "devDependencies": {
     "@artifak/bundler": "^1.1.3",
-    "@types/react": "^16.9.48",
-    "@types/react-dom": "^16.9.8",
-    "@types/styled-components": "^5.1.3",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
+    "@types/styled-components": "^5.1.7",
     "@types/styled-system": "^5.1.10",
-    "react": "^16.11.0",
-    "react-dom": "^16.11.0",
-    "styled-components": "^4.4.1",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "styled-components": "^5.2.1",
     "styled-system": "^5.1.5"
   },
   "peerDependencies": {
-    "react": ">=16.11.0",
-    "react-dom": ">=16.11.0",
-    "styled-components": ">=4.4.1"
+    "react": ">=17.0.1",
+    "react-dom": ">=17.0.1",
+    "styled-components": ">=5.2.1"
   },
   "dependencies": {
     "@artifak/component-generator": "^1.1.4"
diff --git a/packages/flex/package.json b/packages/flex/package.json
index fd3b521..579bc77 100644
--- a/packages/flex/package.json
+++ b/packages/flex/package.json
@@ -23,7 +23,9 @@
     "test": "__tests__",
     "src": "src"
   },
-  "files": ["dist"],
+  "files": [
+    "dist"
+  ],
   "publishConfig": {
     "access": "public"
   },
@@ -41,20 +43,20 @@
   "homepage": "https://github.com/heyjul3s/artifak#readme",
   "devDependencies": {
     "@artifak/bundler": "^1.1.3",
-    "@types/react": "^16.9.48",
-    "@types/react-dom": "^16.9.8",
-    "@types/styled-components": "^5.1.3",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
+    "@types/styled-components": "^5.1.7",
     "@types/styled-system": "^5.1.10",
-    "csstype": "^3.0.4",
-    "react": "^16.11.0",
-    "react-dom": "^16.11.0",
-    "styled-components": "^4.4.1",
+    "csstype": "^3.0.5",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "styled-components": "^5.2.1",
     "styled-system": "^5.1.5"
   },
   "peerDependencies": {
-    "react": ">=16.11.0",
-    "react-dom": ">=16.11.0",
-    "styled-components": ">=4.4.1"
+    "react": ">=17.0.1",
+    "react-dom": ">=17.0.1",
+    "styled-components": ">=5.2.1"
   },
   "dependencies": {
     "@artifak/component-generator": "^1.1.4"
diff --git a/packages/grid/package.json b/packages/grid/package.json
index e259b79..9874f25 100644
--- a/packages/grid/package.json
+++ b/packages/grid/package.json
@@ -23,7 +23,9 @@
     "test": "__tests__",
     "src": "src"
   },
-  "files": ["dist"],
+  "files": [
+    "dist"
+  ],
   "publishConfig": {
     "access": "public"
   },
@@ -40,19 +42,19 @@
   },
   "devDependencies": {
     "@artifak/bundler": "^1.1.3",
-    "@types/react": "^16.9.46",
-    "@types/react-dom": "^16.9.8",
-    "@types/styled-components": "^5.1.3",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
+    "@types/styled-components": "^5.1.7",
     "@types/styled-system": "^5.1.10",
-    "react": "^16.11.0",
-    "react-dom": "^16.11.0",
-    "styled-components": "^4.4.1",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "styled-components": "^5.2.1",
     "styled-system": "^5.1.5"
   },
   "peerDependencies": {
-    "react": ">=16.11.0",
-    "react-dom": ">=16.11.0",
-    "styled-components": ">=4.4.1"
+    "react": ">=17.0.1",
+    "react-dom": ">=17.0.1",
+    "styled-components": ">=5.2.1"
   },
   "dependencies": {
     "@artifak/component-generator": "^1.1.4"
diff --git a/packages/imagery/package.json b/packages/imagery/package.json
index aa72a23..021cb67 100644
--- a/packages/imagery/package.json
+++ b/packages/imagery/package.json
@@ -20,7 +20,9 @@
     "test": "__tests__",
     "src": "src"
   },
-  "files": ["dist"],
+  "files": [
+    "dist"
+  ],
   "publishConfig": {
     "access": "public"
   },
@@ -38,19 +40,19 @@
   "homepage": "https://github.com/heyjul3s/artifak#readme",
   "devDependencies": {
     "@artifak/bundler": "^1.1.3",
-    "@types/react": "^16.9.46",
-    "@types/react-dom": "^16.9.8",
-    "@types/styled-components": "^5.1.3",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
+    "@types/styled-components": "^5.1.7",
     "@types/styled-system": "^5.1.10",
-    "react": "^16.11.0",
-    "react-dom": "^16.11.0",
-    "styled-components": "^4.4.1",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "styled-components": "^5.2.1",
     "styled-system": "^5.1.5"
   },
   "peerDependencies": {
-    "react": ">=16.11.0",
-    "react-dom": ">=16.11.0",
-    "styled-components": ">=4.4.1"
+    "react": ">=17.0.1",
+    "react-dom": ">=17.0.1",
+    "styled-components": ">=5.2.1"
   },
   "dependencies": {
     "@artifak/component-generator": "^1.1.4"
diff --git a/packages/media/package.json b/packages/media/package.json
index bd4d384..ef5437f 100644
--- a/packages/media/package.json
+++ b/packages/media/package.json
@@ -35,14 +35,14 @@
   "devDependencies": {
     "@artifak/bundler": "^1.1.3",
     "@testing-library/react-hooks": "^3.7.0",
-    "@types/styled-components": "^5.1.3",
+    "@types/styled-components": "^5.1.7",
     "css-mediaquery": "^0.1.2",
     "styled-components": "^5.2.1"
   },
   "peerDependencies": {
-    "react": ">=16.11.0",
-    "react-dom": ">=16.11.0",
-    "styled-components": ">=4.4.1"
+    "react": ">=17.0.1",
+    "react-dom": ">=17.0.1",
+    "styled-components": ">=5.2.1"
   },
   "dependencies": {
     "lodash.isempty": "^4.4.0",
diff --git a/packages/typography/package.json b/packages/typography/package.json
index 9fdf772..f43c632 100644
--- a/packages/typography/package.json
+++ b/packages/typography/package.json
@@ -20,7 +20,9 @@
     "test": "__tests__",
     "src": "src"
   },
-  "files": ["dist"],
+  "files": [
+    "dist"
+  ],
   "publishConfig": {
     "access": "public"
   },
@@ -38,22 +40,22 @@
   "homepage": "https://github.com/heyjul3s/artifak#readme",
   "devDependencies": {
     "@artifak/bundler": "^1.1.3",
-    "@types/react": "^16.9.46",
-    "@types/react-dom": "^16.9.8",
-    "@types/styled-components": "^5.1.3",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
+    "@types/styled-components": "^5.1.7",
     "@types/styled-system": "^5.1.10",
-    "csstype": "^3.0.4",
-    "react": "^16.11.0",
-    "react-dom": "^16.11.0",
-    "styled-components": "^4.4.1",
+    "csstype": "^3.0.5",
+    "react": "^17.0.1",
+    "react-dom": "^17.0.1",
+    "styled-components": "^5.2.1",
     "styled-system": "^5.1.5"
   },
   "dependencies": {
     "@artifak/component-generator": "^1.1.4"
   },
   "peerDependencies": {
-    "react": ">=16.11.0",
-    "react-dom": ">=16.11.0",
-    "styled-components": ">=4.4.1"
+    "react": ">=17.0.1",
+    "react-dom": ">=17.0.1",
+    "styled-components": ">=5.2.1"
   }
 }
diff --git a/yarn.lock b/yarn.lock
index c73d3d1..dccf8bc 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1005,7 +1005,7 @@
     "@babel/parser" "^7.12.7"
     "@babel/types" "^7.12.7"
 
-"@babel/traverse@^7.0.0", "@babel/traverse@^7.1.0", "@babel/traverse@^7.10.4", "@babel/traverse@^7.12.1", "@babel/traverse@^7.12.5", "@babel/traverse@^7.12.9", "@babel/traverse@^7.4.5":
+"@babel/traverse@^7.1.0", "@babel/traverse@^7.10.4", "@babel/traverse@^7.12.1", "@babel/traverse@^7.12.5", "@babel/traverse@^7.12.9", "@babel/traverse@^7.4.5":
   version "7.12.9"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.12.9.tgz#fad26c972eabbc11350e0b695978de6cc8e8596f"
   integrity sha512-iX9ajqnLdoU1s1nHt36JDI9KG4k+vmI8WgjK5d+aDTwQbL2fUnzedNedssA645Ede3PM2ma1n8Q4h2ohwXgMXw==
@@ -1267,7 +1267,7 @@
   resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
   integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
 
-"@emotion/is-prop-valid@0.8.8", "@emotion/is-prop-valid@^0.8.1", "@emotion/is-prop-valid@^0.8.6", "@emotion/is-prop-valid@^0.8.8":
+"@emotion/is-prop-valid@0.8.8", "@emotion/is-prop-valid@^0.8.6", "@emotion/is-prop-valid@^0.8.8":
   version "0.8.8"
   resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
   integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==
@@ -1318,7 +1318,7 @@
   resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04"
   integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==
 
-"@emotion/unitless@0.7.5", "@emotion/unitless@^0.7.0", "@emotion/unitless@^0.7.4":
+"@emotion/unitless@0.7.5", "@emotion/unitless@^0.7.4":
   version "0.7.5"
   resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
   integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
@@ -3573,13 +3573,6 @@
     "@types/react" "*"
     "@types/reactcss" "*"
 
-"@types/react-dom@^16.9.8":
-  version "16.9.10"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.10.tgz#4485b0bec3d41f856181b717f45fd7831101156f"
-  integrity sha512-ItatOrnXDMAYpv6G8UCk2VhbYVTjZT9aorLtA/OzDN9XJ2GKcfam68jutoAcILdRjsRUO8qb7AmyObF77Q8QFw==
-  dependencies:
-    "@types/react" "^16"
-
 "@types/react-dom@^17.0.0":
   version "17.0.0"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.0.tgz#b3b691eb956c4b3401777ee67b900cb28415d95a"
@@ -3587,13 +3580,6 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-native@*":
-  version "0.63.37"
-  resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.63.37.tgz#c43df90c9d3cc082a97a49a53e989de26cb8ab45"
-  integrity sha512-xr9SZG7tQQBKT6840tAGaWEC65D2gjyxZtuZxz631UgeW1ofItuu9HMVhoyYqot2hRSa6Q4YC8FYkRVUpM53/w==
-  dependencies:
-    "@types/react" "*"
-
 "@types/react-syntax-highlighter@11.0.4":
   version "11.0.4"
   resolved "https://registry.yarnpkg.com/@types/react-syntax-highlighter/-/react-syntax-highlighter-11.0.4.tgz#d86d17697db62f98046874f62fdb3e53a0bbc4cd"
@@ -3616,14 +3602,6 @@
     "@types/prop-types" "*"
     csstype "^3.0.2"
 
-"@types/react@^16", "@types/react@^16.9.46", "@types/react@^16.9.48":
-  version "16.14.2"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.14.2.tgz#85dcc0947d0645349923c04ccef6018a1ab7538c"
-  integrity sha512-BzzcAlyDxXl2nANlabtT4thtvbbnhee8hMmH/CcJrISDBVcJS1iOsP1f0OAgSdGE0MsY9tqcrb9YoZcOFv9dbQ==
-  dependencies:
-    "@types/prop-types" "*"
-    csstype "^3.0.2"
-
 "@types/reactcss@*":
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/@types/reactcss/-/reactcss-1.2.3.tgz#af28ae11bbb277978b99d04d1eedfd068ca71834"
@@ -3653,16 +3631,6 @@
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.0.tgz#7036640b4e21cc2f259ae826ce843d277dad8cff"
   integrity sha512-RJJrrySY7A8havqpGObOB4W92QXKJo63/jFLLgpvOtsGUqbQZ9Sbgl35KMm1DjC6j7AvmmU2bIno+3IyEaemaw==
 
-"@types/styled-components@^5.1.3":
-  version "5.1.4"
-  resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.4.tgz#11f167dbde268635c66adc89b5a5db2e69d75384"
-  integrity sha512-78f5Zuy0v/LTQNOYfpH+CINHpchzMMmAt9amY2YNtSgsk1TmlKm8L2Wijss/mtTrsUAVTm2CdGB8VOM65vA8xg==
-  dependencies:
-    "@types/hoist-non-react-statics" "*"
-    "@types/react" "*"
-    "@types/react-native" "*"
-    csstype "^3.0.2"
-
 "@types/styled-components@^5.1.7":
   version "5.1.7"
   resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.7.tgz#3cd10b088c1cb1acde2e4b166b3e8275a3083710"
@@ -6150,15 +6118,6 @@ css-select@^1.1.0:
     domutils "1.5.1"
     nth-check "~1.0.1"
 
-css-to-react-native@^2.2.2:
-  version "2.3.2"
-  resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-2.3.2.tgz#e75e2f8f7aa385b4c3611c52b074b70a002f2e7d"
-  integrity sha512-VOFaeZA053BqvvvqIA8c9n0+9vFppVBAHCp6JgFTtTMU3Mzi+XnelJ9XC9ul3BqFzZyQ5N+H0SnwsWT2Ebchxw==
-  dependencies:
-    camelize "^1.0.0"
-    css-color-keywords "^1.0.0"
-    postcss-value-parser "^3.3.0"
-
 css-to-react-native@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.0.0.tgz#62dbe678072a824a689bcfee011fc96e02a7d756"
@@ -6224,7 +6183,7 @@ csstype@^2.5.7:
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.14.tgz#004822a4050345b55ad4dcc00be1d9cf2f4296de"
   integrity sha512-2mSc+VEpGPblzAxyeR+vZhJKgYg0Og0nnRi7pmRXFYYxSfnOnW8A5wwQb4n4cE2nIOzqKOAzLCaEX6aBmNEv8A==
 
-csstype@^3.0.2, csstype@^3.0.4, csstype@^3.0.5:
+csstype@^3.0.2, csstype@^3.0.5:
   version "3.0.5"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.5.tgz#7fdec6a28a67ae18647c51668a9ff95bb2fa7bb8"
   integrity sha512-uVDi8LpBUKQj6sdxNaTetL6FpeCqTjOvAQuQUa/qAqq8oOd4ivkbhgnqayl0dnPal8Tb/yB1tF+gOvCBiicaiQ==
@@ -9154,11 +9113,6 @@ is-utf8@^0.2.0:
   resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"
   integrity sha1-Sw2hRCEE0bM2NA6AeX6GXPOffXI=
 
-is-what@^3.3.1:
-  version "3.12.0"
-  resolved "https://registry.yarnpkg.com/is-what/-/is-what-3.12.0.tgz#f4405ce4bd6dd420d3ced51a026fb90e03705e55"
-  integrity sha512-2ilQz5/f/o9V7WRWJQmpFYNmQFZ9iM+OXRonZKcYgTkCzjb949Vi4h282PD1UfmgHk666rcWonbRJ++KI41VGw==
-
 is-whitespace-character@^1.0.0:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/is-whitespace-character/-/is-whitespace-character-1.0.4.tgz#0858edd94a95594c7c9dd0b5c174ec6e45ee4aa7"
@@ -10426,11 +10380,6 @@ media-typer@0.3.0:
   resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
   integrity sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=
 
-memoize-one@^5.0.0:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.1.1.tgz#047b6e3199b508eaec03504de71229b8eb1d75c0"
-  integrity sha512-HKeeBpWvqiVJD57ZUAsJNm71eHTykffzcLZVYWiVfQeI1rJtuEaS7hQiEpWfVVk18donPwJEcFKIkCmPJNOhHA==
-
 memoizerific@^1.11.3:
   version "1.11.3"
   resolved "https://registry.yarnpkg.com/memoizerific/-/memoizerific-1.11.3.tgz#7c87a4646444c32d75438570905f2dbd1b1a805a"
@@ -10519,13 +10468,6 @@ meow@^8.0.0:
     type-fest "^0.18.0"
     yargs-parser "^20.2.3"
 
-merge-anything@^2.2.4:
-  version "2.4.4"
-  resolved "https://registry.yarnpkg.com/merge-anything/-/merge-anything-2.4.4.tgz#6226b2ac3d3d3fc5fb9e8d23aa400df25f98fdf0"
-  integrity sha512-l5XlriUDJKQT12bH+rVhAHjwIuXWdAIecGwsYjv2LJo+dA1AeRTmeQS+3QBpO6lEthBMDi2IUMpLC1yyRvGlwQ==
-  dependencies:
-    is-what "^3.3.1"
-
 merge-descriptors@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61"
@@ -11849,11 +11791,6 @@ postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.2:
     uniq "^1.0.1"
     util-deprecate "^1.0.2"
 
-postcss-value-parser@^3.3.0:
-  version "3.3.1"
-  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
-  integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==
-
 postcss-value-parser@^4.0.2, postcss-value-parser@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb"
@@ -12008,7 +11945,7 @@ promzard@^0.3.0:
   dependencies:
     read "1"
 
-prop-types@^15.0.0, prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.0.0, prop-types@^15.5.10, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -12272,16 +12209,6 @@ react-docgen@^5.0.0:
     node-dir "^0.1.10"
     strip-indent "^3.0.0"
 
-react-dom@^16.11.0:
-  version "16.14.0"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.14.0.tgz#7ad838ec29a777fb3c75c3a190f661cf92ab8b89"
-  integrity sha512-1gCeQXDLoIqMgqD3IO2Ah9bnf0w9kzhwN5q4FGnHZ67hBm9yePzB5JJAIQCc8x3pFnNlwFq4RidZggNAAkzWWw==
-  dependencies:
-    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    prop-types "^15.6.2"
-    scheduler "^0.19.1"
-
 react-dom@^17.0.1:
   version "17.0.1"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.1.tgz#1de2560474ec9f0e334285662ede52dbc5426fc6"
@@ -12344,7 +12271,7 @@ react-inspector@^5.0.1:
     is-dom "^1.0.0"
     prop-types "^15.0.0"
 
-react-is@^16.12.0, react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
+react-is@^16.12.0, react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -12429,15 +12356,6 @@ react-textarea-autosize@^8.1.1:
     use-composed-ref "^1.0.0"
     use-latest "^1.0.0"
 
-react@^16.11.0:
-  version "16.14.0"
-  resolved "https://registry.yarnpkg.com/react/-/react-16.14.0.tgz#94d776ddd0aaa37da3eda8fc5b6b18a4c9a3114d"
-  integrity sha512-0X2CImDkJGApiAlcf0ODKIneSwBPhqJawOa5wCtKbu7ZECrmS26NvtSILynQ66cgkT/RJ4LidJOc3bUESwmU8g==
-  dependencies:
-    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    prop-types "^15.6.2"
-
 react@^17.0.1:
   version "17.0.1"
   resolved "https://registry.yarnpkg.com/react/-/react-17.0.1.tgz#6e0600416bd57574e3f86d92edba3d9008726127"
@@ -13084,14 +13002,6 @@ saxes@^5.0.0:
   dependencies:
     xmlchars "^2.2.0"
 
-scheduler@^0.19.1:
-  version "0.19.1"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.19.1.tgz#4f3e2ed2c1a7d65681f4c854fa8c5a1ccb40f196"
-  integrity sha512-n/zwRWRYSUj0/3g/otKDRPMh6qv2SYMWNq85IEa8iZyAv8od9zDYpGSnpBEjNgcMNq6Scbu5KfIPxNF72R/2EA==
-  dependencies:
-    loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-
 scheduler@^0.20.1:
   version "0.20.1"
   resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.1.tgz#da0b907e24026b01181ecbc75efdc7f27b5a000c"
@@ -13847,25 +13757,6 @@ style-to-object@0.3.0, style-to-object@^0.3.0:
   dependencies:
     inline-style-parser "0.1.1"
 
-styled-components@^4.4.1:
-  version "4.4.1"
-  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-4.4.1.tgz#e0631e889f01db67df4de576fedaca463f05c2f2"
-  integrity sha512-RNqj14kYzw++6Sr38n7197xG33ipEOktGElty4I70IKzQF1jzaD1U4xQ+Ny/i03UUhHlC5NWEO+d8olRCDji6g==
-  dependencies:
-    "@babel/helper-module-imports" "^7.0.0"
-    "@babel/traverse" "^7.0.0"
-    "@emotion/is-prop-valid" "^0.8.1"
-    "@emotion/unitless" "^0.7.0"
-    babel-plugin-styled-components ">= 1"
-    css-to-react-native "^2.2.2"
-    memoize-one "^5.0.0"
-    merge-anything "^2.2.4"
-    prop-types "^15.5.4"
-    react-is "^16.6.0"
-    stylis "^3.5.0"
-    stylis-rule-sheet "^0.0.10"
-    supports-color "^5.5.0"
-
 styled-components@^5.2.1:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.2.1.tgz#6ed7fad2dc233825f64c719ffbdedd84ad79101a"
@@ -13901,16 +13792,6 @@ styled-system@^5.1.5:
     "@styled-system/variant" "^5.1.5"
     object-assign "^4.1.1"
 
-stylis-rule-sheet@^0.0.10:
-  version "0.0.10"
-  resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz#44e64a2b076643f4b52e5ff71efc04d8c3c4a430"
-  integrity sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw==
-
-stylis@^3.5.0:
-  version "3.5.4"
-  resolved "https://registry.yarnpkg.com/stylis/-/stylis-3.5.4.tgz#f665f25f5e299cf3d64654ab949a57c768b73fbe"
-  integrity sha512-8/3pSmthWM7lsPBKv7NXkzn2Uc9W7NotcwGNpJaa3k7WMM1XDCA4MgT5k/8BIexd5ydZdboXtU90XH9Ec4Bv/Q==
-
 supports-color@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-2.0.0.tgz#535d045ce6b6363fa40117084629995e9df324c7"

From 7d82ba610910f6a82aaf786251a8eb51088ba4ec Mon Sep 17 00:00:00 2001
From: heyjul3s <julian.cy.low@gmail.com>
Date: Wed, 23 Dec 2020 16:30:43 +1100
Subject: [PATCH 08/18] Generator Update - split to 2 params for
 createBaseComponents - remove unused mocks - tests - export updates

---
 .../__mocks__/componentGenerator.mock.ts      | 31 ----------------
 .../__tests__/component-generator.test.ts     | 35 +++++--------------
 .../component-generator/index.stories.tsx     | 31 ++++++++--------
 .../src/createBaseComponents.tsx              | 31 +++++++---------
 packages/component-generator/src/index.tsx    | 10 +++++-
 packages/component-generator/src/typings.ts   | 26 ++++++++++++--
 6 files changed, 72 insertions(+), 92 deletions(-)
 delete mode 100644 packages/component-generator/__mocks__/componentGenerator.mock.ts

diff --git a/packages/component-generator/__mocks__/componentGenerator.mock.ts b/packages/component-generator/__mocks__/componentGenerator.mock.ts
deleted file mode 100644
index 9079d96..0000000
--- a/packages/component-generator/__mocks__/componentGenerator.mock.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-import styled from 'styled-components';
-
-import {
-  compose,
-  space,
-  layout,
-  display,
-  typography,
-  color,
-  flexbox
-} from 'styled-system';
-
-export const mockComponentStyles = {
-  H1: {
-    styles: {
-      marginBottom: ['15px'],
-      as: 'h1'
-    }
-  },
-
-  H2: {
-    styles: {
-      marginTop: 0,
-      as: 'h2'
-    }
-  }
-};
-
-export const MockComponent = styled('div')(
-  compose(space, layout, display, typography, color, flexbox)
-);
diff --git a/packages/component-generator/__tests__/component-generator.test.ts b/packages/component-generator/__tests__/component-generator.test.ts
index e184159..78ad1f6 100644
--- a/packages/component-generator/__tests__/component-generator.test.ts
+++ b/packages/component-generator/__tests__/component-generator.test.ts
@@ -1,48 +1,31 @@
 import { system } from 'styled-system';
-
-import {
-  createBaseComponents,
-  createStyledFunctionComponent,
-  createStyledComponent
-} from '../src';
-
-import {
-  mockComponentStyles,
-  MockComponent
-} from '../__mocks__/componentGenerator.mock';
+import { createBaseComponents, createStyledComponent } from '../src';
 
 describe('@artifak/component-generator', () => {
-  describe('createComponentsDictionary', () => {
+  describe('createBaseComponents', () => {
     it('should return undefined when provided invalid arguments', () => {
       const expected = {};
       const SystemComponent = createBaseComponents(
         void 0 as any,
         void 0 as any
       );
-
       expect(SystemComponent).toEqual(expected);
     });
 
     it('should create React components', () => {
       const SystemComponent = createBaseComponents(
-        MockComponent,
-        mockComponentStyles
+        { element: 'div' },
+        {
+          H1: {
+            marginBottom: ['15px'],
+            as: 'h1'
+          }
+        }
       );
       expect(SystemComponent).toBeDefined();
     });
   });
 
-  describe('createStyledFunctionComponent', () => {
-    it('should return a component', () => {
-      expect(
-        createStyledFunctionComponent(
-          MockComponent,
-          mockComponentStyles.H1.styles
-        )
-      ).toBeDefined();
-    });
-  });
-
   describe('createStyledComponent', () => {
     it('should return a styled component with default config when no arguments are provided', () => {
       const resultingStyledComponent = createStyledComponent({});
diff --git a/packages/component-generator/index.stories.tsx b/packages/component-generator/index.stories.tsx
index 8047bd4..c77d677 100644
--- a/packages/component-generator/index.stories.tsx
+++ b/packages/component-generator/index.stories.tsx
@@ -16,31 +16,34 @@ export function CreateStyledComponentBasicUse() {
   );
 }
 
-const containerConfig = {
-  Base: {
+const containers = {
+  base: {
     styles: {
       width: '100%',
       maxWidth: ['480px', '740px', '900px', '1200px']
-    }
+    },
+    styleProps: []
   },
 
-  FlexContainer: {
-    display: 'flex'
-  },
+  components: {
+    FlexContainer: {
+      display: 'flex'
+    },
 
-  Container: {
-    padding: ['1em', '1.5em']
-  },
+    Container: {
+      padding: ['1em', '1.5em']
+    },
 
-  UnpaddedContainer: {
-    margin: 0,
-    padding: 0
+    UnpaddedContainer: {
+      margin: 0,
+      padding: 0
+    }
   }
 };
 
 const { FlexContainer, Container, UnpaddedContainer } = createBaseComponents<
-  typeof containerConfig
->(containerConfig);
+  typeof containers.components
+>(containers.base, containers.components);
 
 export function BasicUsage() {
   return (
diff --git a/packages/component-generator/src/createBaseComponents.tsx b/packages/component-generator/src/createBaseComponents.tsx
index 2b13d43..38bc406 100644
--- a/packages/component-generator/src/createBaseComponents.tsx
+++ b/packages/component-generator/src/createBaseComponents.tsx
@@ -2,38 +2,33 @@ import React, { HTMLAttributes } from 'react';
 import { createStyledComponent } from './createStyledComponent';
 
 import {
+  Settings,
+  BaseProps,
   GenericRecord,
   StyledComponentConfig,
-  Variant,
-  StyledSystemCSSObject
+  Variant
 } from './typings';
 
 export function createBaseComponents<
   Config = any,
   Theme = any,
-  Props = Record<string, unknown>,
+  Props = {},
   Element = HTMLDivElement
->(settings: {
-  [key: string]:
-    | StyledSystemCSSObject
-    | StyledComponentConfig<Props & Variant, Theme, HTMLAttributes<Element>>;
-}): GenericRecord<Config, React.FC<Props & Variant>> {
-  const acc = {} as GenericRecord<Config, React.FC<Props & Variant>>;
-  const baseSettings = settings.Base as StyledComponentConfig<
-    Props & Variant,
-    Theme,
-    HTMLAttributes<Element>
-  >;
+>(
+  base: StyledComponentConfig<Props, Theme, Element>,
+  settings: Settings
+): GenericRecord<Config, React.FC<Props & BaseProps<Theme> & Variant<Theme>>> {
+  const acc = {} as GenericRecord<Config, React.FC<Props & BaseProps<Theme>>>;
 
-  return !!settings && Object.keys(settings).length >= 1
+  return !!base && !!settings && Object.keys(settings).length >= 1
     ? Object.entries(settings).reduce((acc, entry) => {
         const [prop, setting] = entry;
 
         if (hasKey(settings, prop)) {
           acc[prop] = createStyledComponent({
-            ...baseSettings,
-            styles: { ...baseSettings.styles, ...setting }
-          } as StyledComponentConfig<Props & Variant, Theme, HTMLAttributes<Element>>);
+            ...base,
+            styles: { ...base.styles, ...setting }
+          } as StyledComponentConfig<Props & Variant<Theme>, Theme, HTMLAttributes<Element>>);
 
           acc[prop].displayName = prop;
         }
diff --git a/packages/component-generator/src/index.tsx b/packages/component-generator/src/index.tsx
index 3f77842..0ba130a 100644
--- a/packages/component-generator/src/index.tsx
+++ b/packages/component-generator/src/index.tsx
@@ -1,3 +1,11 @@
 export { createBaseComponents } from './createBaseComponents';
 export { createStyledComponent } from './createStyledComponent';
-export { BaseComponentProps, Variant, StyledComponentConfig } from './typings';
+export {
+  Attrs,
+  BaseProps,
+  BaseComponentProps,
+  GenericRecord,
+  Settings,
+  StyledComponentConfig,
+  Variant
+} from './typings';
diff --git a/packages/component-generator/src/typings.ts b/packages/component-generator/src/typings.ts
index dba7b69..34f416c 100644
--- a/packages/component-generator/src/typings.ts
+++ b/packages/component-generator/src/typings.ts
@@ -1,7 +1,5 @@
 import * as CSS from 'csstype';
-
 import { ThemedStyledFunction, ThemedStyledProps } from 'styled-components';
-
 import { styleFn, Scale } from 'styled-system';
 
 import {
@@ -17,6 +15,8 @@ import {
   ResponsiveValue
 } from 'styled-system';
 
+export type BaseProps<ThemeType> = BaseComponentProps & Variant<ThemeType>;
+
 export type BaseComponentProps =
   | BackgroundProps
   | BorderProps
@@ -61,3 +61,25 @@ export type StyledSystemCSSObject = CSSObjectWithScale & CSSPseudos;
 export type GenericRecord<Object, Type> = {
   [key in keyof Object]: Type;
 };
+
+export type Settings = {
+  [key: string]: StyledSystemCSSObject & { as?: keyof JSX.IntrinsicElements };
+};
+
+// export type BaseConfig<Props, ThemeType, Element> = {
+//   base: StyledComponentConfig<
+//     Props & Variant,
+//     ThemeType,
+//     HTMLAttributes<Element>
+//   >;
+// };
+
+// export type Settings<Props, ThemeType, Element> = {
+//   [key: string]:
+//     | StyledSystemCSSObject
+//     | StyledComponentConfig<
+//         Props & Variant,
+//         ThemeType,
+//         HTMLAttributes<Element>
+//       >;
+// };

From 81007a0a0eb4932ecf6b938b04a5813f0f1e5aa8 Mon Sep 17 00:00:00 2001
From: heyjul3s <julian.cy.low@gmail.com>
Date: Wed, 23 Dec 2020 16:31:29 +1100
Subject: [PATCH 09/18] Typo Update - update to use new Generator API - udpate
 tests - update exports - remove unused mocks

---
 .../typography/__mocks__/typography.mock.tsx  | 21 ------
 .../typography/__tests__/typography.test.ts   | 69 ++++++++++++++++---
 packages/typography/index.stories.tsx         | 50 +++-----------
 .../src/createTypographyComponents.ts         | 55 ++++++++++++---
 packages/typography/src/index.tsx             |  5 +-
 5 files changed, 120 insertions(+), 80 deletions(-)
 delete mode 100644 packages/typography/__mocks__/typography.mock.tsx

diff --git a/packages/typography/__mocks__/typography.mock.tsx b/packages/typography/__mocks__/typography.mock.tsx
deleted file mode 100644
index af08d52..0000000
--- a/packages/typography/__mocks__/typography.mock.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from 'react';
-
-export const mockTypographyStyles = {
-  H1: {
-    marginBottom: [15],
-    as: 'h1',
-  },
-
-  H2: {
-    marginTop: 0,
-    as: 'h2',
-  },
-};
-
-export const H1 = (props): React.ReactElement => (
-  <h1 {...props}>{props.children}</h1>
-);
-
-export const H2 = (props): React.ReactElement => (
-  <h2 {...props}>{props.children}</h2>
-);
diff --git a/packages/typography/__tests__/typography.test.ts b/packages/typography/__tests__/typography.test.ts
index 622055b..bbcc3a2 100644
--- a/packages/typography/__tests__/typography.test.ts
+++ b/packages/typography/__tests__/typography.test.ts
@@ -1,19 +1,72 @@
-import { createTypographyComponents, fluidSizing, fontWeight } from '../src';
-import { mockTypographyStyles } from '../__mocks__/typography.mock';
+import { position } from 'styled-system';
+
+import {
+  createTypographyComponents,
+  getStyleProps,
+  fluidSizing,
+  fontWeight
+} from '../src';
 
 describe('@artifak/typography', () => {
   describe('createTypographyComponents - generates typography React components based on styles object argument provided', () => {
     it('should return the base Typography system component when provided with an invalid argument', () => {
       const expected = {};
-      expect(createTypographyComponents({} as any)).toEqual(expected);
-      expect(createTypographyComponents(null as any)).toEqual(expected);
-      expect(createTypographyComponents(false as any)).toEqual(expected);
-      expect(createTypographyComponents(0 as any)).toEqual(expected);
-      expect(createTypographyComponents(void 0 as any)).toEqual(expected);
+      expect(createTypographyComponents({} as any, {} as any)).toStrictEqual(
+        expected
+      );
+      expect(
+        createTypographyComponents(null as any, null as any)
+      ).toStrictEqual(expected);
+      expect(
+        createTypographyComponents(false as any, false as any)
+      ).toStrictEqual(expected);
+      expect(createTypographyComponents(0 as any, 0 as any)).toStrictEqual(
+        expected
+      );
+      expect(
+        createTypographyComponents(void 0 as any, void 0 as any)
+      ).toStrictEqual(expected);
     });
 
     it('should create React components', () => {
-      expect(createTypographyComponents(mockTypographyStyles)).toBeDefined();
+      expect(
+        createTypographyComponents(
+          {},
+          {
+            H1: {
+              marginBottom: [15],
+              as: 'h1'
+            }
+          }
+        )
+      ).toBeDefined();
+    });
+  });
+
+  describe('getStyleProps', () => {
+    it('should return a default base setting object', () => {
+      expect(getStyleProps(void 0 as any)).toEqual({
+        styleProps: []
+      });
+    });
+
+    it('should return the base object with default styleProps if not declared', () => {
+      expect(getStyleProps({ element: 'div' })).toEqual({
+        element: 'div',
+        styleProps: []
+      });
+    });
+
+    it('should return the base object if it has styleProps defined', () => {
+      expect(
+        getStyleProps({
+          element: 'div',
+          styleProps: [position]
+        })
+      ).toEqual({
+        element: 'div',
+        styleProps: [position]
+      });
     });
   });
 
diff --git a/packages/typography/index.stories.tsx b/packages/typography/index.stories.tsx
index 2996f60..4f68b40 100644
--- a/packages/typography/index.stories.tsx
+++ b/packages/typography/index.stories.tsx
@@ -1,47 +1,47 @@
 import React from 'react';
 import { createTypographyComponents, fluidSizing } from './src';
-import { createStyledComponent } from '@artifak/component-generator';
 import styled from 'styled-components';
 import { variant } from 'styled-system';
 
-const typographyStyles = {
+const base = {
+  styles: {
+    lineHeight: 1.5
+  }
+};
+
+const components = {
   H1: {
     fontSize: fluidSizing(48, 96, 300, 1200),
     margin: '0 0 0.25em',
-    lineHeight: 1.5,
     as: 'h1'
   },
 
   H2: {
     fontSize: [37, 39, 41, 43],
-    lineHeight: 1.5,
     marginTop: 0,
     as: 'h2'
   },
 
   H3: {
     fontSize: [27, 28, 30, 32],
-    lineHeight: 1.5,
     as: 'h3'
   },
 
   H4: {
     fontSize: [18, 20, 22, 24],
-    lineHeight: 1.5,
+
     marginTop: 0,
     as: 'h4'
   },
 
   H5: {
     fontSize: [16, 17, 19, 21],
-    lineHeight: 1.5,
     marginTop: 0,
     as: 'h5'
   },
 
   H6: {
     fontSize: [16, 17, 19, 21],
-    lineHeight: 1.5,
     marginTop: 0,
     as: 'h6'
   },
@@ -54,21 +54,18 @@ const typographyStyles = {
 
   SmallLead: {
     fontSize: [17, 18, 19, 21],
-    lineHeight: 1.5,
     as: 'p'
   },
 
   Paragraph: {
     fontSize: [16, 20],
     fontWeight: 300,
-    lineHeight: 1.5,
     marginTop: 0,
     as: 'p'
   },
 
   SmallParagraph: {
     fontSize: [12, 14],
-    lineHeight: 1.5,
     marginTop: 0,
     as: 'p'
   }
@@ -85,7 +82,7 @@ const {
   SmallLead,
   Paragraph,
   SmallParagraph
-} = createTypographyComponents<typeof typographyStyles>(typographyStyles);
+} = createTypographyComponents<typeof components>(base, components);
 
 const SysH1 = styled(H1)(
   variant({
@@ -119,33 +116,6 @@ export const Type = () => {
   );
 };
 
-const VariableH1 = createStyledComponent({
-  styles: {
-    fontSize: fluidSizing(48, 96, 300, 1200),
-    margin: '0 0 0.25em',
-    lineHeight: 1.5,
-    as: 'h1'
-  },
-  variants: {
-    primary: {
-      color: 'red'
-    },
-    secondary: {
-      color: 'hotpink'
-    }
-  }
-});
-
-export const TypeVariant = () => {
-  return (
-    <>
-      <VariableH1 variant="primary">Hello World</VariableH1>
-      <VariableH1 variant="secondary">Hello World</VariableH1>
-    </>
-  );
-};
-
 export default {
-  title: 'Typography',
-  component: [Type, TypeVariant]
+  title: 'Typography'
 };
diff --git a/packages/typography/src/createTypographyComponents.ts b/packages/typography/src/createTypographyComponents.ts
index cd400e1..648d227 100644
--- a/packages/typography/src/createTypographyComponents.ts
+++ b/packages/typography/src/createTypographyComponents.ts
@@ -1,18 +1,53 @@
-import { createBaseComponents } from '@artifak/component-generator';
+import {
+  GenericRecord,
+  createBaseComponents,
+  Settings,
+  StyledComponentConfig,
+  Variant
+} from '@artifak/component-generator';
 import { TypographyBaseProps } from './typings';
 import { typographyStyleProps } from './TypographyBase';
 
 export function createTypographyComponents<
   Config,
-  Theme = any,
-  Props = Record<string, unknown> & TypographyBaseProps,
+  ThemeType = any,
+  Props = {},
   Element = HTMLDivElement
->(settings: any) {
-  return createBaseComponents<Config, Theme, Props, Element>({
-    Base: {
-      ...settings.Base,
-      styleProps: [typographyStyleProps, ...settings.Base.styleProps]
+>(
+  base: StyledComponentConfig<Props, ThemeType, Element>,
+  settings: Settings
+): GenericRecord<
+  Config,
+  React.FC<Props & TypographyBaseProps & Variant<ThemeType>>
+> {
+  const { styleProps } = getStyleProps(base);
+
+  return createBaseComponents<
+    Config,
+    ThemeType,
+    Props & TypographyBaseProps,
+    Element
+  >(
+    {
+      ...base,
+      styleProps: [typographyStyleProps, ...styleProps]
     },
-    ...settings
-  });
+    settings
+  );
+}
+
+export function getStyleProps<
+  ThemeType = any,
+  Props = {},
+  Element = HTMLDivElement
+>(base: StyledComponentConfig<Props, ThemeType, Element>) {
+  if (!base || !Object.keys(base).length) {
+    return { styleProps: [] };
+  }
+
+  if (!base.styleProps) {
+    return { ...base, styleProps: [] };
+  }
+
+  return base;
 }
diff --git a/packages/typography/src/index.tsx b/packages/typography/src/index.tsx
index 3753c9d..c296bd7 100644
--- a/packages/typography/src/index.tsx
+++ b/packages/typography/src/index.tsx
@@ -1,4 +1,7 @@
-export { createTypographyComponents } from './createTypographyComponents';
+export {
+  createTypographyComponents,
+  getStyleProps
+} from './createTypographyComponents';
 export { TypographyBase } from './TypographyBase';
 export { fontWeight } from './fontWeight';
 export { fluidSizing } from './fluidSizing';

From eb3ccadb87f0e5ffd8a2340a1fd8b44fe99848de Mon Sep 17 00:00:00 2001
From: heyjul3s <julian.cy.low@gmail.com>
Date: Wed, 23 Dec 2020 16:31:34 +1100
Subject: [PATCH 10/18] snap updates

---
 .../__snapshots__/flexCol.test.tsx.snap       |  2 +-
 .../__snapshots__/flexRow.test.tsx.snap       |  6 ++-
 .../__snapshots__/grid.test.tsx.snap          | 42 +++++++++----------
 .../__snapshots__/gridItem.test.tsx.snap      |  4 +-
 .../__snapshots__/Imagery.test.tsx.snap       |  5 ++-
 .../__snapshots__/ImageryBase.test.tsx.snap   | 10 ++++-
 6 files changed, 40 insertions(+), 29 deletions(-)

diff --git a/packages/flex/__tests__/__snapshots__/flexCol.test.tsx.snap b/packages/flex/__tests__/__snapshots__/flexCol.test.tsx.snap
index 113cfd3..94bf4e6 100644
--- a/packages/flex/__tests__/__snapshots__/flexCol.test.tsx.snap
+++ b/packages/flex/__tests__/__snapshots__/flexCol.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`FlexCol FlexCol should render 1`] = `
 <DocumentFragment>
   <div
-    class="sc-bdVaJa fOFgQS"
+    class="sc-bdfBwQ bpWNbx"
   >
     Test
   </div>
diff --git a/packages/flex/__tests__/__snapshots__/flexRow.test.tsx.snap b/packages/flex/__tests__/__snapshots__/flexRow.test.tsx.snap
index 0e3cc47..5bf26b5 100644
--- a/packages/flex/__tests__/__snapshots__/flexRow.test.tsx.snap
+++ b/packages/flex/__tests__/__snapshots__/flexRow.test.tsx.snap
@@ -3,7 +3,8 @@
 exports[`FlexRow FlexRow component should render 1`] = `
 <DocumentFragment>
   <div
-    class="sc-bdVaJa dZjhST"
+    class="sc-bdfBwQ jnIjoz"
+    display="flex"
   >
     Flex Row
   </div>
@@ -13,7 +14,8 @@ exports[`FlexRow FlexRow component should render 1`] = `
 exports[`FlexRow FlexRow component should render row-reverse 1`] = `
 <DocumentFragment>
   <div
-    class="sc-bdVaJa tvNuj"
+    class="sc-bdfBwQ bumAni"
+    display="flex"
   >
     Flex Row Reverse
   </div>
diff --git a/packages/grid/__tests__/__snapshots__/grid.test.tsx.snap b/packages/grid/__tests__/__snapshots__/grid.test.tsx.snap
index 78d3838..afd48bd 100644
--- a/packages/grid/__tests__/__snapshots__/grid.test.tsx.snap
+++ b/packages/grid/__tests__/__snapshots__/grid.test.tsx.snap
@@ -3,36 +3,36 @@
 exports[`@artifak/grid Grid should render 1`] = `
 <DocumentFragment>
   <div
-    class="sc-bwzfXH fYwbiX"
+    class="sc-gsTCUz dmRtIA"
     display="grid"
   >
     <div
-      class="sc-htpNat KtFsv"
+      class="sc-dlfnbm"
     >
       1
     </div>
     <div
-      class="sc-htpNat KtFsv"
+      class="sc-dlfnbm"
     >
       2
     </div>
     <div
-      class="sc-htpNat KtFsv"
+      class="sc-dlfnbm"
     >
       3
     </div>
     <div
-      class="sc-htpNat KtFsv"
+      class="sc-dlfnbm"
     >
       4
     </div>
     <div
-      class="sc-htpNat KtFsv"
+      class="sc-dlfnbm"
     >
       5
     </div>
     <div
-      class="sc-htpNat KtFsv"
+      class="sc-dlfnbm"
     >
       6
     </div>
@@ -43,37 +43,37 @@ exports[`@artifak/grid Grid should render 1`] = `
 exports[`@artifak/grid Grid should render grid-auto-columns style if no columnSize prop is provided 1`] = `
 <DocumentFragment>
   <div
-    class="sc-bwzfXH QxCAR"
+    class="sc-gsTCUz ezSWul"
     data-testid="grid"
     display="grid"
   >
     <div
-      class="sc-htpNat KtFsv"
+      class="sc-dlfnbm"
     >
       1
     </div>
     <div
-      class="sc-htpNat KtFsv"
+      class="sc-dlfnbm"
     >
       2
     </div>
     <div
-      class="sc-htpNat KtFsv"
+      class="sc-dlfnbm"
     >
       3
     </div>
     <div
-      class="sc-htpNat KtFsv"
+      class="sc-dlfnbm"
     >
       4
     </div>
     <div
-      class="sc-htpNat KtFsv"
+      class="sc-dlfnbm"
     >
       5
     </div>
     <div
-      class="sc-htpNat KtFsv"
+      class="sc-dlfnbm"
     >
       6
     </div>
@@ -84,37 +84,37 @@ exports[`@artifak/grid Grid should render grid-auto-columns style if no columnSi
 exports[`@artifak/grid Grid should render gridGap style if a value is provided 1`] = `
 <DocumentFragment>
   <div
-    class="sc-bwzfXH jefOZT"
+    class="sc-gsTCUz bJPZbK"
     data-testid="grid"
     display="grid"
   >
     <div
-      class="sc-htpNat KtFsv"
+      class="sc-dlfnbm"
     >
       1
     </div>
     <div
-      class="sc-htpNat KtFsv"
+      class="sc-dlfnbm"
     >
       2
     </div>
     <div
-      class="sc-htpNat KtFsv"
+      class="sc-dlfnbm"
     >
       3
     </div>
     <div
-      class="sc-htpNat KtFsv"
+      class="sc-dlfnbm"
     >
       4
     </div>
     <div
-      class="sc-htpNat KtFsv"
+      class="sc-dlfnbm"
     >
       5
     </div>
     <div
-      class="sc-htpNat KtFsv"
+      class="sc-dlfnbm"
     >
       6
     </div>
diff --git a/packages/grid/__tests__/__snapshots__/gridItem.test.tsx.snap b/packages/grid/__tests__/__snapshots__/gridItem.test.tsx.snap
index a2b06a5..3636125 100644
--- a/packages/grid/__tests__/__snapshots__/gridItem.test.tsx.snap
+++ b/packages/grid/__tests__/__snapshots__/gridItem.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`GridItem should render correctly 1`] = `
 <DocumentFragment>
   <div
-    class="sc-bdVaJa bDWFJH"
+    class="sc-bdfBwQ"
   >
     Grid Item
   </div>
@@ -13,7 +13,7 @@ exports[`GridItem should render correctly 1`] = `
 exports[`GridItemBase should render correctly 1`] = `
 <DocumentFragment>
   <div
-    class="sc-bdVaJa bDWFJH"
+    class="sc-bdfBwQ"
   >
     Grid Item Base
   </div>
diff --git a/packages/imagery/__tests__/__snapshots__/Imagery.test.tsx.snap b/packages/imagery/__tests__/__snapshots__/Imagery.test.tsx.snap
index f7c6415..66080a4 100644
--- a/packages/imagery/__tests__/__snapshots__/Imagery.test.tsx.snap
+++ b/packages/imagery/__tests__/__snapshots__/Imagery.test.tsx.snap
@@ -4,8 +4,11 @@ exports[`Img should render an img element with src and alt defined 1`] = `
 <DocumentFragment>
   <img
     alt="hello world"
-    class="sc-bdVaJa hHijb"
+    class="sc-bdfBwQ bQajuQ"
+    display="block"
+    height="auto"
     src="https://source.unsplash.com/random/10x10"
+    width="100%"
   />
 </DocumentFragment>
 `;
diff --git a/packages/imagery/__tests__/__snapshots__/ImageryBase.test.tsx.snap b/packages/imagery/__tests__/__snapshots__/ImageryBase.test.tsx.snap
index c02ff10..1654132 100644
--- a/packages/imagery/__tests__/__snapshots__/ImageryBase.test.tsx.snap
+++ b/packages/imagery/__tests__/__snapshots__/ImageryBase.test.tsx.snap
@@ -3,7 +3,10 @@
 exports[`ImageryBase should render 1`] = `
 <DocumentFragment>
   <img
-    class="sc-bdVaJa hHijb"
+    class="sc-bdfBwQ bQajuQ"
+    display="block"
+    height="auto"
+    width="100%"
   />
 </DocumentFragment>
 `;
@@ -11,7 +14,10 @@ exports[`ImageryBase should render 1`] = `
 exports[`ImageryBase should render styles object-fit and object-position 1`] = `
 <DocumentFragment>
   <img
-    class="sc-bdVaJa hgNDTD"
+    class="sc-bdfBwQ ftRMpI"
+    display="block"
+    height="auto"
+    width="100%"
   />
 </DocumentFragment>
 `;

From 828d5980a592bcf63c3e95e8d7a741e423e19844 Mon Sep 17 00:00:00 2001
From: heyjul3s <julian.cy.low@gmail.com>
Date: Thu, 24 Dec 2020 00:15:16 +1100
Subject: [PATCH 11/18] add react, react-dom resolutions to fix SC hook error

---
 package.json                              | 8 ++++++--
 packages/component-generator/package.json | 3 +++
 yarn.lock                                 | 4 ++--
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/package.json b/package.json
index a31d21c..2f3c41f 100644
--- a/package.json
+++ b/package.json
@@ -24,8 +24,8 @@
     "release": "yarn build && changeset publish"
   },
   "peerDependencies": {
-    "react": "16.11.0",
-    "react-dom": "16.11.0"
+    "react": ">=17.0.1",
+    "react-dom": ">=17.0.1"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9",
@@ -61,5 +61,9 @@
   },
   "dependencies": {
     "@changesets/cli": "^2.12.0"
+  },
+  "resolutions": {
+    "react": ">=17.0.1",
+    "react-dom": ">=17.0.1"
   }
 }
diff --git a/packages/component-generator/package.json b/packages/component-generator/package.json
index 9719778..4527edb 100644
--- a/packages/component-generator/package.json
+++ b/packages/component-generator/package.json
@@ -60,5 +60,8 @@
   },
   "dependencies": {
     "lodash.isempty": "^4.4.0"
+  },
+  "resolutions": {
+    "react": ">=17.0.1"
   }
 }
diff --git a/yarn.lock b/yarn.lock
index dccf8bc..b941a3a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -12209,7 +12209,7 @@ react-docgen@^5.0.0:
     node-dir "^0.1.10"
     strip-indent "^3.0.0"
 
-react-dom@^17.0.1:
+react-dom@>=17.0.1, react-dom@^17.0.1:
   version "17.0.1"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.1.tgz#1de2560474ec9f0e334285662ede52dbc5426fc6"
   integrity sha512-6eV150oJZ9U2t9svnsspTMrWNyHc6chX0KzDeAOXftRa8bNeOKTTfCJ7KorIwenkHd2xqVTBTCZd79yk/lx/Ug==
@@ -12356,7 +12356,7 @@ react-textarea-autosize@^8.1.1:
     use-composed-ref "^1.0.0"
     use-latest "^1.0.0"
 
-react@^17.0.1:
+react@>=17.0.1, react@^17.0.1:
   version "17.0.1"
   resolved "https://registry.yarnpkg.com/react/-/react-17.0.1.tgz#6e0600416bd57574e3f86d92edba3d9008726127"
   integrity sha512-lG9c9UuMHdcAexXtigOZLX8exLWkW0Ku29qPRU8uhF2R9BN96dLCt0psvzPLlHc5OWkgymP3qwTRgbnw5BKx3w==

From 31738552868de3579078d921381c76ef8666329f Mon Sep 17 00:00:00 2001
From: heyjul3s <julian.cy.low@gmail.com>
Date: Thu, 24 Dec 2020 00:15:29 +1100
Subject: [PATCH 12/18] add missing key for ChildLinkContainer

---
 docs/components/Nav/Desktop/DesktopNavLink.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/components/Nav/Desktop/DesktopNavLink.tsx b/docs/components/Nav/Desktop/DesktopNavLink.tsx
index a36b81e..5aa8bdf 100644
--- a/docs/components/Nav/Desktop/DesktopNavLink.tsx
+++ b/docs/components/Nav/Desktop/DesktopNavLink.tsx
@@ -23,7 +23,7 @@ export function DesktopNavLink({ children, link, name }) {
           {children.map(({ route, name, children }, i) => {
             i += 1;
             return (
-              <ChildLinkContainer>
+              <ChildLinkContainer key={`${name}-${i}`}>
                 <LinkItem>
                   <Counter>
                     <LinkCount>{`0${i}`.slice(-2)}</LinkCount>

From 5fa53db880d8bcdd033c1b7c519a5740efeaf48a Mon Sep 17 00:00:00 2001
From: heyjul3s <julian.cy.low@gmail.com>
Date: Thu, 24 Dec 2020 00:28:13 +1100
Subject: [PATCH 13/18] type fixes, remove unused in generator typings

---
 docs/hooks/useMatchMedia.ts                   |  2 +-
 packages/block/src/createBlockComponents.tsx  | 15 +++++++++----
 .../src/createBaseComponents.tsx              |  2 +-
 packages/component-generator/src/typings.ts   | 22 ++-----------------
 packages/media/src/useMatchMedia.ts           |  2 +-
 packages/media/src/useWindowSize.ts           |  2 +-
 .../src/createTypographyComponents.ts         |  6 +++--
 7 files changed, 21 insertions(+), 30 deletions(-)

diff --git a/docs/hooks/useMatchMedia.ts b/docs/hooks/useMatchMedia.ts
index 3fdcff0..a20e0e5 100644
--- a/docs/hooks/useMatchMedia.ts
+++ b/docs/hooks/useMatchMedia.ts
@@ -1,6 +1,6 @@
 import { useRef, useState, useCallback, useEffect } from 'react';
 
-export function useMatchMedia(query: string) {
+export function useMatchMedia(query: string): boolean {
   const matchListRef = useRef<MediaQueryList | null>(null);
   const [isMatch, setIsMatch] = useState<boolean>(false);
   const onMediaQueryListEvent = useCallback((e: MediaQueryListEvent) => {
diff --git a/packages/block/src/createBlockComponents.tsx b/packages/block/src/createBlockComponents.tsx
index 04a41f1..bf255d4 100644
--- a/packages/block/src/createBlockComponents.tsx
+++ b/packages/block/src/createBlockComponents.tsx
@@ -1,11 +1,18 @@
-import { createBaseComponents } from '@artifak/component-generator';
+import {
+  createBaseComponents,
+  Settings,
+  StyledComponentConfig
+} from '@artifak/component-generator';
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
 export function createBlockComponents<
   Config,
-  Theme = any,
+  ThemeType = any,
   Props = Record<string, unknown>,
   Element = HTMLDivElement
->(settings) {
-  return createBaseComponents<Config, Theme, Props, Element>(settings);
+>(base: StyledComponentConfig<Props, ThemeType, Element>, settings: Settings) {
+  return createBaseComponents<Config, ThemeType, Props, Element>(
+    base,
+    settings
+  );
 }
diff --git a/packages/component-generator/src/createBaseComponents.tsx b/packages/component-generator/src/createBaseComponents.tsx
index 38bc406..3308a3b 100644
--- a/packages/component-generator/src/createBaseComponents.tsx
+++ b/packages/component-generator/src/createBaseComponents.tsx
@@ -12,7 +12,7 @@ import {
 export function createBaseComponents<
   Config = any,
   Theme = any,
-  Props = {},
+  Props = Record<string, unknown>,
   Element = HTMLDivElement
 >(
   base: StyledComponentConfig<Props, Theme, Element>,
diff --git a/packages/component-generator/src/typings.ts b/packages/component-generator/src/typings.ts
index 34f416c..256ad19 100644
--- a/packages/component-generator/src/typings.ts
+++ b/packages/component-generator/src/typings.ts
@@ -58,28 +58,10 @@ export type CSSObjectWithScale = CSS.Properties<string | number | Scale>;
 export type CSSPseudos = { [K in CSS.Pseudos]?: CSSObjectWithScale };
 export type StyledSystemCSSObject = CSSObjectWithScale & CSSPseudos;
 
-export type GenericRecord<Object, Type> = {
-  [key in keyof Object]: Type;
+export type GenericRecord<Dict, Type> = {
+  [key in keyof Dict]: Type;
 };
 
 export type Settings = {
   [key: string]: StyledSystemCSSObject & { as?: keyof JSX.IntrinsicElements };
 };
-
-// export type BaseConfig<Props, ThemeType, Element> = {
-//   base: StyledComponentConfig<
-//     Props & Variant,
-//     ThemeType,
-//     HTMLAttributes<Element>
-//   >;
-// };
-
-// export type Settings<Props, ThemeType, Element> = {
-//   [key: string]:
-//     | StyledSystemCSSObject
-//     | StyledComponentConfig<
-//         Props & Variant,
-//         ThemeType,
-//         HTMLAttributes<Element>
-//       >;
-// };
diff --git a/packages/media/src/useMatchMedia.ts b/packages/media/src/useMatchMedia.ts
index 7cf080b..6e8c913 100644
--- a/packages/media/src/useMatchMedia.ts
+++ b/packages/media/src/useMatchMedia.ts
@@ -1,6 +1,6 @@
 import { useRef, useState, useCallback, useEffect } from 'react';
 
-export function useMatchMedia(query: string) {
+export function useMatchMedia(query: string): boolean {
   const matchListRef = useRef<MediaQueryList | null>(null);
   const [isMatch, setIsMatch] = useState<boolean>(false);
   const onMediaQueryListEvent = useCallback((e: MediaQueryListEvent) => {
diff --git a/packages/media/src/useWindowSize.ts b/packages/media/src/useWindowSize.ts
index 212cbcc..6b3e118 100644
--- a/packages/media/src/useWindowSize.ts
+++ b/packages/media/src/useWindowSize.ts
@@ -7,7 +7,7 @@ type WindowSize = {
   outerWidth: number;
 };
 
-export function useWindowSize() {
+export function useWindowSize(): WindowSize {
   const [windowSize, setWindowSize] = useState<WindowSize>(getSize());
 
   function getSize() {
diff --git a/packages/typography/src/createTypographyComponents.ts b/packages/typography/src/createTypographyComponents.ts
index 648d227..cd3955d 100644
--- a/packages/typography/src/createTypographyComponents.ts
+++ b/packages/typography/src/createTypographyComponents.ts
@@ -8,10 +8,11 @@ import {
 import { TypographyBaseProps } from './typings';
 import { typographyStyleProps } from './TypographyBase';
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
 export function createTypographyComponents<
   Config,
   ThemeType = any,
-  Props = {},
+  Props = Record<string, unknown>,
   Element = HTMLDivElement
 >(
   base: StyledComponentConfig<Props, ThemeType, Element>,
@@ -36,9 +37,10 @@ export function createTypographyComponents<
   );
 }
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
 export function getStyleProps<
   ThemeType = any,
-  Props = {},
+  Props = Record<string, unknown>,
   Element = HTMLDivElement
 >(base: StyledComponentConfig<Props, ThemeType, Element>) {
   if (!base || !Object.keys(base).length) {

From cb4456396aec50661cb2ebf62105c2a12c823d05 Mon Sep 17 00:00:00 2001
From: heyjul3s <julian.cy.low@gmail.com>
Date: Thu, 24 Dec 2020 09:53:24 +1100
Subject: [PATCH 14/18] update Block package

---
 packages/block/index.stories.tsx             | 27 +++++++++-----------
 packages/block/src/createBlockComponents.tsx |  9 +++++--
 2 files changed, 19 insertions(+), 17 deletions(-)

diff --git a/packages/block/index.stories.tsx b/packages/block/index.stories.tsx
index 60a5777..3e746bc 100644
--- a/packages/block/index.stories.tsx
+++ b/packages/block/index.stories.tsx
@@ -4,16 +4,16 @@ export function BlockBaseUsage() {
   return <BlockBase>A Block Base</BlockBase>;
 }
 
-const settings = {
-  Base: {
-    styles: {
-      width: '100%',
-      maxWidth: ['480px', '768px', '1024px', '1200px'],
-      padding: ['1em', '1.5em'],
-      margin: '0 auto'
-    }
-  },
+const base = {
+  styles: {
+    width: '100%',
+    maxWidth: ['480px', '768px', '1024px', '1200px'],
+    padding: ['1em', '1.5em'],
+    margin: '0 auto'
+  }
+};
 
+const components = {
   FlexContainer: {
     display: 'flex'
   },
@@ -23,16 +23,13 @@ const settings = {
   }
 };
 
-const {
-  Base: Container,
-  FlexContainer,
-  UnpaddedContainer
-} = createBlockComponents<typeof settings>(settings);
+const { FlexContainer, UnpaddedContainer } = createBlockComponents<
+  typeof components
+>(base, components);
 
 export function CreateBlocksUsage() {
   return (
     <>
-      <Container>Container</Container>
       <FlexContainer>Flex Container</FlexContainer>
       <UnpaddedContainer>Unpadded Container</UnpaddedContainer>
     </>
diff --git a/packages/block/src/createBlockComponents.tsx b/packages/block/src/createBlockComponents.tsx
index bf255d4..aa9ff79 100644
--- a/packages/block/src/createBlockComponents.tsx
+++ b/packages/block/src/createBlockComponents.tsx
@@ -1,7 +1,9 @@
 import {
   createBaseComponents,
+  GenericRecord,
   Settings,
-  StyledComponentConfig
+  StyledComponentConfig,
+  Variant
 } from '@artifak/component-generator';
 
 /* eslint-disable @typescript-eslint/no-explicit-any */
@@ -10,7 +12,10 @@ export function createBlockComponents<
   ThemeType = any,
   Props = Record<string, unknown>,
   Element = HTMLDivElement
->(base: StyledComponentConfig<Props, ThemeType, Element>, settings: Settings) {
+>(
+  base: StyledComponentConfig<Props, ThemeType, Element>,
+  settings: Settings
+): GenericRecord<Config, React.FC<Props & Variant<ThemeType>>> {
   return createBaseComponents<Config, ThemeType, Props, Element>(
     base,
     settings

From ad4a7fe9b3694e2c63befde08a856d8cc7840dd7 Mon Sep 17 00:00:00 2001
From: heyjul3s <julian.cy.low@gmail.com>
Date: Thu, 24 Dec 2020 09:53:59 +1100
Subject: [PATCH 15/18] fix styleProps type error

---
 packages/typography/src/createTypographyComponents.ts | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/typography/src/createTypographyComponents.ts b/packages/typography/src/createTypographyComponents.ts
index cd3955d..9fdbed5 100644
--- a/packages/typography/src/createTypographyComponents.ts
+++ b/packages/typography/src/createTypographyComponents.ts
@@ -5,6 +5,7 @@ import {
   StyledComponentConfig,
   Variant
 } from '@artifak/component-generator';
+import { styleFn } from 'styled-system';
 import { TypographyBaseProps } from './typings';
 import { typographyStyleProps } from './TypographyBase';
 
@@ -31,7 +32,7 @@ export function createTypographyComponents<
   >(
     {
       ...base,
-      styleProps: [typographyStyleProps, ...styleProps]
+      styleProps: [typographyStyleProps, ...(styleProps as styleFn[])]
     },
     settings
   );
@@ -42,7 +43,9 @@ export function getStyleProps<
   ThemeType = any,
   Props = Record<string, unknown>,
   Element = HTMLDivElement
->(base: StyledComponentConfig<Props, ThemeType, Element>) {
+>(
+  base: StyledComponentConfig<Props, ThemeType, Element>
+): StyledComponentConfig<Props, ThemeType, Element> {
   if (!base || !Object.keys(base).length) {
     return { styleProps: [] };
   }

From c3984ea38d536740a35819e291e54efbc978d792 Mon Sep 17 00:00:00 2001
From: heyjul3s <julian.cy.low@gmail.com>
Date: Thu, 24 Dec 2020 09:54:12 +1100
Subject: [PATCH 16/18] fix typings

---
 packages/component-generator/src/createBaseComponents.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/component-generator/src/createBaseComponents.tsx b/packages/component-generator/src/createBaseComponents.tsx
index 3308a3b..ff5283e 100644
--- a/packages/component-generator/src/createBaseComponents.tsx
+++ b/packages/component-generator/src/createBaseComponents.tsx
@@ -9,6 +9,7 @@ import {
   Variant
 } from './typings';
 
+/* eslint-disable @typescript-eslint/no-explicit-any */
 export function createBaseComponents<
   Config = any,
   Theme = any,

From 73c0e66c73a8b43e11de977abe92d55912a007d9 Mon Sep 17 00:00:00 2001
From: heyjul3s <julian.cy.low@gmail.com>
Date: Thu, 24 Dec 2020 10:04:09 +1100
Subject: [PATCH 17/18] change Theme generic to ThemeType for consistency

---
 .../src/createBaseComponents.tsx                 | 16 +++++++++++-----
 1 file changed, 11 insertions(+), 5 deletions(-)

diff --git a/packages/component-generator/src/createBaseComponents.tsx b/packages/component-generator/src/createBaseComponents.tsx
index ff5283e..a2516e5 100644
--- a/packages/component-generator/src/createBaseComponents.tsx
+++ b/packages/component-generator/src/createBaseComponents.tsx
@@ -12,14 +12,20 @@ import {
 /* eslint-disable @typescript-eslint/no-explicit-any */
 export function createBaseComponents<
   Config = any,
-  Theme = any,
+  ThemeType = any,
   Props = Record<string, unknown>,
   Element = HTMLDivElement
 >(
-  base: StyledComponentConfig<Props, Theme, Element>,
+  base: StyledComponentConfig<Props, ThemeType, Element>,
   settings: Settings
-): GenericRecord<Config, React.FC<Props & BaseProps<Theme> & Variant<Theme>>> {
-  const acc = {} as GenericRecord<Config, React.FC<Props & BaseProps<Theme>>>;
+): GenericRecord<
+  Config,
+  React.FC<Props & BaseProps<ThemeType> & Variant<ThemeType>>
+> {
+  const acc = {} as GenericRecord<
+    Config,
+    React.FC<Props & BaseProps<ThemeType>>
+  >;
 
   return !!base && !!settings && Object.keys(settings).length >= 1
     ? Object.entries(settings).reduce((acc, entry) => {
@@ -29,7 +35,7 @@ export function createBaseComponents<
           acc[prop] = createStyledComponent({
             ...base,
             styles: { ...base.styles, ...setting }
-          } as StyledComponentConfig<Props & Variant<Theme>, Theme, HTMLAttributes<Element>>);
+          } as StyledComponentConfig<Props & Variant<ThemeType>, ThemeType, HTMLAttributes<Element>>);
 
           acc[prop].displayName = prop;
         }

From ea2ae436208c71b1cfb4a76bde09349a24f062e4 Mon Sep 17 00:00:00 2001
From: heyjul3s <julian.cy.low@gmail.com>
Date: Thu, 24 Dec 2020 10:28:15 +1100
Subject: [PATCH 18/18] snap update

---
 packages/grid/__tests__/__snapshots__/grid.test.tsx.snap | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/grid/__tests__/__snapshots__/grid.test.tsx.snap b/packages/grid/__tests__/__snapshots__/grid.test.tsx.snap
index afd48bd..4e1002e 100644
--- a/packages/grid/__tests__/__snapshots__/grid.test.tsx.snap
+++ b/packages/grid/__tests__/__snapshots__/grid.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`@artifak/grid Grid should render 1`] = `
 <DocumentFragment>
   <div
-    class="sc-gsTCUz dmRtIA"
+    class="sc-gsTCUz GgxUB"
     display="grid"
   >
     <div
@@ -43,7 +43,7 @@ exports[`@artifak/grid Grid should render 1`] = `
 exports[`@artifak/grid Grid should render grid-auto-columns style if no columnSize prop is provided 1`] = `
 <DocumentFragment>
   <div
-    class="sc-gsTCUz ezSWul"
+    class="sc-gsTCUz jxeuwY"
     data-testid="grid"
     display="grid"
   >
@@ -84,7 +84,7 @@ exports[`@artifak/grid Grid should render grid-auto-columns style if no columnSi
 exports[`@artifak/grid Grid should render gridGap style if a value is provided 1`] = `
 <DocumentFragment>
   <div
-    class="sc-gsTCUz bJPZbK"
+    class="sc-gsTCUz eFIKRD"
     data-testid="grid"
     display="grid"
   >