From f60b373e2eed8a973141fc691c95f84e4538b162 Mon Sep 17 00:00:00 2001
From: "Carlos A. Cabrera" <316104+fnhipster@users.noreply.github.com>
Date: Tue, 28 Jan 2020 13:36:06 -0600
Subject: [PATCH 01/17] Update README.md

---
 README.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/README.md b/README.md
index 8dc5fc1..050f1d8 100644
--- a/README.md
+++ b/README.md
@@ -2,6 +2,8 @@
 
 [👉 Open Storybook](https://pmet-public.github.io/luma-ui/?path=/story/%F0%9F%91%8B-welcome--getting-started)
 
+[🛍 Demo PWA Storefront](https://longliveluma.com)
+
 ## Getting Started
 
 ```bash

From 0e16d9237c83721b8b0417e2100ebf34f2d9ced8 Mon Sep 17 00:00:00 2001
From: "Carlos A. Cabrera" <316104+fnhipster@users.noreply.github.com>
Date: Tue, 28 Jan 2020 13:36:35 -0600
Subject: [PATCH 02/17] Update README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 050f1d8..014441c 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # Luma UI
 
-[👉 Open Storybook](https://pmet-public.github.io/luma-ui/?path=/story/%F0%9F%91%8B-welcome--getting-started)
+[📕 Open Storybook](https://pmet-public.github.io/luma-ui/?path=/story/%F0%9F%91%8B-welcome--getting-started)
 
 [🛍 Demo PWA Storefront](https://longliveluma.com)
 

From afc938fdc7d15a3fc63592e41ae2a1191c3f53dd Mon Sep 17 00:00:00 2001
From: "Carlos A. Cabrera" <316104+fnhipster@users.noreply.github.com>
Date: Tue, 28 Jan 2020 13:36:55 -0600
Subject: [PATCH 03/17] Update README.md

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index 014441c..e9bcd25 100644
--- a/README.md
+++ b/README.md
@@ -1,6 +1,6 @@
 # Luma UI
 
-[📕 Open Storybook](https://pmet-public.github.io/luma-ui/?path=/story/%F0%9F%91%8B-welcome--getting-started)
+[📕 UI Library Storybook](https://pmet-public.github.io/luma-ui/?path=/story/%F0%9F%91%8B-welcome--getting-started)
 
 [🛍 Demo PWA Storefront](https://longliveluma.com)
 

From d95a7123ac8199cc73e61e8e05d6d9c6044bccec Mon Sep 17 00:00:00 2001
From: "Carlos A. Cabrera" <cacabrer@adobe.com>
Date: Sun, 2 Feb 2020 21:25:56 -0600
Subject: [PATCH 04/17] init

---
 src/components/CartSummary/CartSummary.tsx    | 16 ++++
 .../ApplyCouponsForm.story.tsx                | 30 ++++++++
 .../ApplyCouponsForm.styled.tsx               | 12 +++
 .../ApplyCouponsForm/ApplyCouponsForm.tsx     | 76 +++++++++++++++++++
 .../Checkout/ApplyCouponsForm/index.ts        |  2 +
 5 files changed, 136 insertions(+)
 create mode 100644 src/components/Checkout/ApplyCouponsForm/ApplyCouponsForm.story.tsx
 create mode 100644 src/components/Checkout/ApplyCouponsForm/ApplyCouponsForm.styled.tsx
 create mode 100644 src/components/Checkout/ApplyCouponsForm/ApplyCouponsForm.tsx
 create mode 100644 src/components/Checkout/ApplyCouponsForm/index.ts

diff --git a/src/components/CartSummary/CartSummary.tsx b/src/components/CartSummary/CartSummary.tsx
index f5b60c5..4ad67d9 100644
--- a/src/components/CartSummary/CartSummary.tsx
+++ b/src/components/CartSummary/CartSummary.tsx
@@ -2,6 +2,7 @@ import React from 'react'
 import { Component, Props } from '../../lib'
 import { Root, Title, PriceItem, Label } from './CartSummary.styled'
 import Price, { PriceProps } from '../Price'
+import ApplyCouponsForm from '../Checkout/ApplyCouponsForm'
 
 type PriceItemProps = {
     label: string
@@ -19,6 +20,21 @@ export const CartSummary: Component<CartSummaryProps> = ({ title, prices, ...pro
         <Root aria-label={title.text} {...props}>
             <Title {...title}>{title.text}</Title>
 
+            <ApplyCouponsForm
+                fields={{
+                    giftCardNumber: {
+                        label: 'Gift Card',
+                    },
+                }}
+                loading={false}
+                submitButton={{
+                    text: 'Apply',
+                }}
+                onSubmit={() => {
+                    throw Error('Oops!. There was an error... `cause your are just testing ;)')
+                }}
+            />
+
             {prices.map(({ label, price, appearance = 'normal' }, index) => (
                 <PriceItem key={index}>
                     <Label $appearance={appearance}>{label}</Label>
diff --git a/src/components/Checkout/ApplyCouponsForm/ApplyCouponsForm.story.tsx b/src/components/Checkout/ApplyCouponsForm/ApplyCouponsForm.story.tsx
new file mode 100644
index 0000000..53c0e0f
--- /dev/null
+++ b/src/components/Checkout/ApplyCouponsForm/ApplyCouponsForm.story.tsx
@@ -0,0 +1,30 @@
+import React from 'react'
+import ApplyCouponsForm from '.'
+import { storiesOf } from '@storybook/react'
+import { useForm, FormContext } from 'react-hook-form'
+import { boolean } from '@storybook/addon-knobs'
+
+storiesOf('📦 Components/Checkout/ApplyCouponsForm', module).add('Default', () => {
+    const methods = useForm()
+    return (
+        <FormContext {...methods}>
+            <ApplyCouponsForm
+                fields={{
+                    giftCardCode: {
+                        label: 'Gift Card',
+                    },
+                    couponCode: {
+                        label: 'Coupon',
+                    },
+                }}
+                loading={boolean('loading', false)}
+                submitButton={{
+                    text: 'Apply',
+                }}
+                onSubmit={() => {
+                    throw Error('Oops!. There was an error... `cause your are just testing ;)')
+                }}
+            />
+        </FormContext>
+    )
+})
diff --git a/src/components/Checkout/ApplyCouponsForm/ApplyCouponsForm.styled.tsx b/src/components/Checkout/ApplyCouponsForm/ApplyCouponsForm.styled.tsx
new file mode 100644
index 0000000..5ec65dc
--- /dev/null
+++ b/src/components/Checkout/ApplyCouponsForm/ApplyCouponsForm.styled.tsx
@@ -0,0 +1,12 @@
+import styled from 'styled-components'
+
+export const Root = styled.div`
+    display: grid;
+    grid-template-columns: 1fr auto;
+    align-items: center;
+`
+
+export const Button = styled.button`
+    font-size: 1.2rem;
+    padding: 1rem 2rem;
+`
diff --git a/src/components/Checkout/ApplyCouponsForm/ApplyCouponsForm.tsx b/src/components/Checkout/ApplyCouponsForm/ApplyCouponsForm.tsx
new file mode 100644
index 0000000..53109be
--- /dev/null
+++ b/src/components/Checkout/ApplyCouponsForm/ApplyCouponsForm.tsx
@@ -0,0 +1,76 @@
+import React, { useState, useCallback } from 'react'
+import { Component } from '../../../lib'
+import { Root, Button } from './ApplyCouponsForm.styled'
+import Form, { Input, InputProps } from '../../Form'
+import { useForm } from 'react-hook-form'
+import ButtonComponent, { ButtonProps } from '../../Button'
+
+export type ApplyCouponsFormPayload = {
+    giftCardCode: string
+    couponCode: string
+}
+
+export type ApplyCouponsFormProps = {
+    submitButton: ButtonProps
+    onSubmit: (payload: ApplyCouponsFormPayload) => any
+    loading?: boolean
+    fields: {
+        giftCardCode: InputProps
+        couponCode: InputProps
+    }
+}
+export const ApplyCouponsForm: Component<ApplyCouponsFormProps> = ({
+    fields,
+    submitButton,
+    onSubmit,
+    loading,
+    ...props
+}) => {
+    const { handleSubmit, register, errors, setError } = useForm<ApplyCouponsFormPayload>()
+
+    const [submitting, setSubmitting] = useState(false)
+
+    const handleOnSubmit = useCallback(
+        async form => {
+            setError('giftCardCode', '', undefined)
+            setSubmitting(true)
+
+            try {
+                await handleSubmit(onSubmit)(form)
+                setSubmitting(false)
+            } catch (error) {
+                setError('giftCardCode', '', error?.message)
+                setSubmitting(false)
+            }
+        },
+        [handleSubmit, onSubmit]
+    )
+
+    const disabled = submitting
+
+    return (
+        <Root as={Form} onSubmit={handleOnSubmit} {...props}>
+            <Input
+                {...fields.giftCardCode}
+                loading={loading}
+                name="giftCardCode"
+                ref={register({ required: true })}
+                error={errors.giftCardCode}
+                disabled={disabled}
+            />
+
+            <Button as={ButtonComponent} type="submit" loading={loading || submitting} {...submitButton} />
+
+            <Input
+                {...fields.couponCode}
+                loading={loading}
+                name="couponCode"
+                ref={register({ required: true })}
+                error={errors.couponCode}
+                disabled={disabled}
+            />
+
+            <Button as={ButtonComponent} type="submit" loading={loading || submitting} {...submitButton} />
+        </Root>
+    )
+}
diff --git a/src/components/Checkout/ApplyCouponsForm/index.ts b/src/components/Checkout/ApplyCouponsForm/index.ts
new file mode 100644
index 0000000..038c7e4
--- /dev/null
+++ b/src/components/Checkout/ApplyCouponsForm/index.ts
@@ -0,0 +1,2 @@
+export * from './ApplyCouponsForm'
+export { ApplyCouponsForm as default } from './ApplyCouponsForm'

From 86fb34cf827b686ca338b4b925cc5a3f56ccb54c Mon Sep 17 00:00:00 2001
From: "Carlos A. Cabrera" <cacabrer@adobe.com>
Date: Mon, 3 Feb 2020 08:51:03 -0600
Subject: [PATCH 05/17] auto detect dark mode

---
 src/AppProvider.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/AppProvider.tsx b/src/AppProvider.tsx
index 53dc591..9e24940 100644
--- a/src/AppProvider.tsx
+++ b/src/AppProvider.tsx
@@ -66,7 +66,10 @@ export const AppProvider: FunctionComponent<AppProviderProps> = ({ children }) =
      * Get Color Preference
      */
     useEffect(() => {
-        const payload = localStorage.getItem('luma-ui/colorScheme') || 'light'
+        const payload =
+            localStorage.getItem('luma-ui/colorScheme') ||
+            (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
+
         dispatch({ type: 'setColorScheme', payload })
     }, [])
 

From 432870f8580f7ca9e7474d64a5c7c424a5dbe77d Mon Sep 17 00:00:00 2001
From: "Carlos A. Cabrera" <cacabrer@adobe.com>
Date: Mon, 3 Feb 2020 08:51:28 -0600
Subject: [PATCH 06/17] bump

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index cebade9..4940fd5 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pmet-public/luma-ui",
-  "version": "1.0.0-beta.32",
+  "version": "1.0.0-beta.33",
   "description": "Luma React UI LIbrary",
   "repository": "https://github.com/PMET-public/luma-ui.git",
   "author": "Carlos A. Cabrera @fnhhipster",

From d9a019645f6bb501c42fc5bfb7d19e2a5a918464 Mon Sep 17 00:00:00 2001
From: "Carlos A. Cabrera" <cacabrer@adobe.com>
Date: Mon, 3 Feb 2020 18:06:30 -0600
Subject: [PATCH 07/17] Accordion fix

---
 package.json                                  |  9 ++++++---
 src/components/Accordion/Accordion.styled.tsx |  1 +
 src/components/Accordion/Accordion.tsx        | 15 ++++++++++-----
 3 files changed, 17 insertions(+), 8 deletions(-)

diff --git a/package.json b/package.json
index 4940fd5..9920847 100644
--- a/package.json
+++ b/package.json
@@ -43,6 +43,7 @@
     "@storybook/storybook-deployer": "^2.8.1",
     "@types/braintree-web-drop-in": "^1.18.0",
     "@types/common-tags": "^1.8.0",
+    "@types/d3-ease": "^1.0.9",
     "@types/node": "^13.1.4",
     "@types/prismjs": "^1.16.0",
     "@types/react": "^16.9.17",
@@ -55,6 +56,8 @@
     "braintree-web-drop-in": "^1.20.4",
     "common-tags": "^1.8.0",
     "concurrently": "^5.0.2",
+    "core-js": "2",
+    "d3-ease": "^1.0.6",
     "focus-visible": "^5.0.2",
     "prettier": "1.19.1",
     "prismjs": "^1.18.0",
@@ -62,8 +65,9 @@
     "react": "^16.12.0",
     "react-content-loader": "^4.3.4",
     "react-dom": "^16.12.0",
-    "react-hook-form": "^4.4.3",
+    "react-hook-form": "^4.8.1",
     "react-spring": "^8.0.25",
+    "react-tabs": "^3.1.0",
     "remixicon": "^2.1.0",
     "rimraf": "^3.0.0",
     "rollup": "^1.28.0",
@@ -78,7 +82,6 @@
     "tslint-loader": "^3.5.4",
     "tslint-plugin-prettier": "^2.1.0",
     "typescript": "^3.7.4",
-    "webpack": "^4.41.5",
-    "react-tabs": "^3.1.0"
+    "webpack": "^4.41.5"
   }
 }
diff --git a/src/components/Accordion/Accordion.styled.tsx b/src/components/Accordion/Accordion.styled.tsx
index 492a85a..74d8ff9 100644
--- a/src/components/Accordion/Accordion.styled.tsx
+++ b/src/components/Accordion/Accordion.styled.tsx
@@ -35,6 +35,7 @@ export const ButtonLabel = styled.span`
 export const ButtonIcon = styled.span<{ $active?: boolean }>`
     width: 2.4rem;
     transition: transform 305ms ease-out;
+    fill: currentColor;
 
     ${props => props.$active && 'transform: rotateX(180deg);'}
 `
diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx
index 4a59b1f..b7abd30 100644
--- a/src/components/Accordion/Accordion.tsx
+++ b/src/components/Accordion/Accordion.tsx
@@ -4,6 +4,7 @@ import { Root, Item, Button, ButtonLabel, ButtonIcon, Content } from './Accordio
 
 import { useMeasure } from '../../hooks/useMeasure'
 import { animated, useSpring } from 'react-spring'
+import { easeCircle as easing } from 'd3-ease'
 
 import ArrowIconSvg from 'remixicon/icons/System/arrow-down-s-line.svg'
 
@@ -32,7 +33,7 @@ export const Accordion: Component<AccordionProps> & CompoundComponent = ({
         <Root {...props}>
             {React.Children.map(children, (child, index) => {
                 const active = selected === index
-                const onSelect = () => setSelected(index)
+                const onSelect = () => setSelected(selected === index ? -1 : index)
 
                 return (
                     <ItemContext.Provider key={index} value={{ index, active, onSelect }}>
@@ -51,8 +52,12 @@ Accordion.Item = ({ children, label, ...props }) => {
 
     const { active, onSelect } = useContext(ItemContext)
 
-    const transition = useSpring(
-        active
+    const transition = useSpring({
+        config: {
+            duration: 500,
+            easing,
+        },
+        ...(active
             ? {
                   height,
                   opacity: 1,
@@ -60,8 +65,8 @@ Accordion.Item = ({ children, label, ...props }) => {
             : {
                   height: 0,
                   opacity: 0,
-              }
-    )
+              }),
+    })
 
     return (
         <Item {...props}>

From c4706b64931010ed546179919b843b28ba86e6b4 Mon Sep 17 00:00:00 2001
From: "Carlos A. Cabrera" <cacabrer@adobe.com>
Date: Tue, 4 Feb 2020 12:04:02 -0600
Subject: [PATCH 08/17] Fixed Babel issue

---
 .babelrc | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/.babelrc b/.babelrc
index 97c4848..89604b1 100644
--- a/.babelrc
+++ b/.babelrc
@@ -3,7 +3,10 @@
         [
             "@babel/preset-env",
             {
-                "modules": false
+                "modules": false,
+                "targets": {
+                    "node": "10"
+                }
             }
         ],
         "@babel/typescript",

From d851d09fea91198392fdeb449a0b12216226617e Mon Sep 17 00:00:00 2001
From: "Carlos A. Cabrera" <cacabrer@adobe.com>
Date: Tue, 4 Feb 2020 12:04:37 -0600
Subject: [PATCH 09/17] Apply coupon code

---
 src/components/Accordion/Accordion.tsx        |  7 +-
 .../CartSummary/CartSummary.story.tsx         | 15 ++++
 .../CartSummary/CartSummary.styled.tsx        | 19 +++++
 src/components/CartSummary/CartSummary.tsx    | 33 ++++----
 .../ApplyCouponForm/ApplyCouponForm.story.tsx | 31 ++++++++
 .../ApplyCouponForm.styled.tsx}               |  0
 .../ApplyCouponForm/ApplyCouponForm.tsx       | 53 +++++++++++++
 .../Checkout/ApplyCouponForm/index.ts         |  2 +
 .../ApplyCouponsForm.story.tsx                | 30 --------
 .../ApplyCouponsForm/ApplyCouponsForm.tsx     | 76 -------------------
 .../Checkout/ApplyCouponsForm/index.ts        |  2 -
 src/components/Form/Form.styled.tsx           |  2 +-
 src/components/Form/Input/Input.tsx           |  1 +
 src/lib/index.ts                              | 12 +++
 src/templates/Cart/Cart.story.tsx             | 15 ++++
 src/templates/Product/Product.tsx             | 14 +++-
 16 files changed, 182 insertions(+), 130 deletions(-)
 create mode 100644 src/components/Checkout/ApplyCouponForm/ApplyCouponForm.story.tsx
 rename src/components/Checkout/{ApplyCouponsForm/ApplyCouponsForm.styled.tsx => ApplyCouponForm/ApplyCouponForm.styled.tsx} (100%)
 create mode 100644 src/components/Checkout/ApplyCouponForm/ApplyCouponForm.tsx
 create mode 100644 src/components/Checkout/ApplyCouponForm/index.ts
 delete mode 100644 src/components/Checkout/ApplyCouponsForm/ApplyCouponsForm.story.tsx
 delete mode 100644 src/components/Checkout/ApplyCouponsForm/ApplyCouponsForm.tsx
 delete mode 100644 src/components/Checkout/ApplyCouponsForm/index.ts

diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx
index b7abd30..a19fb56 100644
--- a/src/components/Accordion/Accordion.tsx
+++ b/src/components/Accordion/Accordion.tsx
@@ -1,4 +1,4 @@
-import React, { createContext, useState, useContext, useRef } from 'react'
+import React, { createContext, useState, useContext, useRef, useEffect } from 'react'
 import { Component } from '../../lib'
 import { Root, Item, Button, ButtonLabel, ButtonIcon, Content } from './Accordion.styled'
 
@@ -29,6 +29,11 @@ export const Accordion: Component<AccordionProps> & CompoundComponent = ({
 }) => {
     const [selected, setSelected] = useState(defaultSelected)
 
+    /** Update Selected when prop changes */
+    useEffect(() => {
+        setSelected(defaultSelected)
+    }, [defaultSelected])
+
     return (
         <Root {...props}>
             {React.Children.map(children, (child, index) => {
diff --git a/src/components/CartSummary/CartSummary.story.tsx b/src/components/CartSummary/CartSummary.story.tsx
index 6398c33..290689e 100644
--- a/src/components/CartSummary/CartSummary.story.tsx
+++ b/src/components/CartSummary/CartSummary.story.tsx
@@ -25,5 +25,20 @@ storiesOf('📦 Components/CartSummary', module).add('Default', () => (
                 },
             },
         ]}
+        coupons={{
+            label: 'Apply Gift Card or Discount Code',
+            fields: [
+                {
+                    field: { label: 'Gift Card', name: 'giftCardCode' },
+                    submitButton: { text: 'Apply' },
+                    onSubmit: () => {},
+                },
+                {
+                    field: { label: 'Discount Code', name: 'discountCode' },
+                    submitButton: { text: 'Apply' },
+                    onSubmit: () => {},
+                },
+            ],
+        }}
     />
 ))
diff --git a/src/components/CartSummary/CartSummary.styled.tsx b/src/components/CartSummary/CartSummary.styled.tsx
index 880aa36..847a2f2 100644
--- a/src/components/CartSummary/CartSummary.styled.tsx
+++ b/src/components/CartSummary/CartSummary.styled.tsx
@@ -1,9 +1,28 @@
 import styled from 'styled-components'
+import {
+    Button as AccordionButton,
+    Content as AccordionContent,
+    ButtonLabel as AccordionLabel,
+} from '../Accordion/Accordion.styled'
 
 export const Root = styled.div`
     display: grid;
     grid-auto-rows: max-content;
     grid-gap: 1.6rem;
+
+    ${AccordionLabel} {
+        font-family: inherit;
+        font-weight: ${props => props.theme.typography.body.weight.bold};
+    }
+
+    ${AccordionButton}, ${AccordionContent} {
+        padding-left: 0;
+        padding-right: 0;
+    }
+
+    ${AccordionContent} {
+        padding-bottom: 2rem;
+    }
 `
 
 export const Title = styled.div`
diff --git a/src/components/CartSummary/CartSummary.tsx b/src/components/CartSummary/CartSummary.tsx
index 4ad67d9..bff7179 100644
--- a/src/components/CartSummary/CartSummary.tsx
+++ b/src/components/CartSummary/CartSummary.tsx
@@ -2,7 +2,8 @@ import React from 'react'
 import { Component, Props } from '../../lib'
 import { Root, Title, PriceItem, Label } from './CartSummary.styled'
 import Price, { PriceProps } from '../Price'
-import ApplyCouponsForm from '../Checkout/ApplyCouponsForm'
+import ApplyCouponForm, { ApplyCouponFormProps } from '../Checkout/ApplyCouponForm'
+import Accordion from '../Accordion'
 
 type PriceItemProps = {
     label: string
@@ -13,27 +14,27 @@ type PriceItemProps = {
 export type CartSummaryProps = {
     title: Props<{ text: string }>
     prices: PriceItemProps[]
+    coupons?: {
+        label: string
+        open?: boolean
+        fields: ApplyCouponFormProps[]
+    }
 }
 
-export const CartSummary: Component<CartSummaryProps> = ({ title, prices, ...props }) => {
+export const CartSummary: Component<CartSummaryProps> = ({ title, prices, coupons, ...props }) => {
     return (
         <Root aria-label={title.text} {...props}>
             <Title {...title}>{title.text}</Title>
 
-            <ApplyCouponsForm
-                fields={{
-                    giftCardNumber: {
-                        label: 'Gift Card',
-                    },
-                }}
-                loading={false}
-                submitButton={{
-                    text: 'Apply',
-                }}
-                onSubmit={() => {
-                    throw Error('Oops!. There was an error... `cause your are just testing ;)')
-                }}
-            />
+            {coupons && (
+                <Accordion defaultSelected={coupons.open ? 0 : -1}>
+                    <Accordion.Item label={coupons.label}>
+                        {coupons.fields.map((coupon, index) => (
+                            <ApplyCouponForm key={index} {...coupon} />
+                        ))}
+                    </Accordion.Item>
+                </Accordion>
+            )}
 
             {prices.map(({ label, price, appearance = 'normal' }, index) => (
                 <PriceItem key={index}>
diff --git a/src/components/Checkout/ApplyCouponForm/ApplyCouponForm.story.tsx b/src/components/Checkout/ApplyCouponForm/ApplyCouponForm.story.tsx
new file mode 100644
index 0000000..370e1cc
--- /dev/null
+++ b/src/components/Checkout/ApplyCouponForm/ApplyCouponForm.story.tsx
@@ -0,0 +1,31 @@
+import React from 'react'
+import ApplyCouponForm from '.'
+import { storiesOf } from '@storybook/react'
+import { useForm, FormContext } from 'react-hook-form'
+import { boolean } from '@storybook/addon-knobs'
+
+storiesOf('📦 Components/Checkout/ApplyCouponForm', module).add('Default', () => {
+    const methods = useForm()
+
+    return (
+        <FormContext {...methods}>
+            <ApplyCouponForm
+                field={{
+                    label: 'Gift Card',
+                    name: 'giftCard',
+                }}
+                loading={boolean('loading', false)}
+                submitButton={{
+                    text: 'Apply',
+                }}
+                onSubmit={() => {
+                    return new Promise((resolve, reject) => {
+                        return setTimeout(() => {
+                            reject({ message: 'Oops!. There was an error... `cause your are just testing ;)' })
+                        }, 3000)
+                    })
+                }}
+            />
+        </FormContext>
+    )
+})
diff --git a/src/components/Checkout/ApplyCouponsForm/ApplyCouponsForm.styled.tsx b/src/components/Checkout/ApplyCouponForm/ApplyCouponForm.styled.tsx
similarity index 100%
rename from src/components/Checkout/ApplyCouponsForm/ApplyCouponsForm.styled.tsx
rename to src/components/Checkout/ApplyCouponForm/ApplyCouponForm.styled.tsx
diff --git a/src/components/Checkout/ApplyCouponForm/ApplyCouponForm.tsx b/src/components/Checkout/ApplyCouponForm/ApplyCouponForm.tsx
new file mode 100644
index 0000000..3114608
--- /dev/null
+++ b/src/components/Checkout/ApplyCouponForm/ApplyCouponForm.tsx
@@ -0,0 +1,53 @@
+import React, { useEffect } from 'react'
+import { Component } from '../../../lib'
+import { Root, Button } from './ApplyCouponForm.styled'
+import Form, { Input, InputProps } from '../../Form'
+import ButtonComponent, { ButtonProps } from '../../Button'
+
+import { useForm } from 'react-hook-form'
+
+export type ApplyCouponFormPayload = {
+    [code: string]: string
+}
+
+export type ApplyCouponFormProps = {
+    field: InputProps
+    loading?: boolean
+    onSubmit: (payload: ApplyCouponFormPayload) => any
+    submitting?: boolean
+    submitButton: ButtonProps
+}
+
+export const ApplyCouponForm: Component<ApplyCouponFormProps> = ({
+    field,
+    loading = false,
+    onSubmit,
+    submitButton,
+    submitting = false,
+    ...props
+}) => {
+    const { handleSubmit, register, errors, setError, clearError } = useForm<ApplyCouponFormPayload>()
+
+    useEffect(() => {
+        if (field.error?.message) {
+            setError(field.name, 'ssError', field.error.message)
+        } else {
+            clearError(field.name)
+        }
+    }, [field.error?.message])
+
+    return (
+        <Root as={Form} onSubmit={handleSubmit(onSubmit)} {...props}>
+            <Input
+                key={field.defaultValue as string} // update field when defaultValue changes
+                loading={loading}
+                ref={register({ required: true })}
+                disabled={submitting}
+                error={errors[field.name]}
+                {...field}
+            />
+
+            <Button as={ButtonComponent} type="submit" loading={loading || submitting} {...submitButton} />
+        </Root>
+    )
+}
diff --git a/src/components/Checkout/ApplyCouponForm/index.ts b/src/components/Checkout/ApplyCouponForm/index.ts
new file mode 100644
index 0000000..5dac1fe
--- /dev/null
+++ b/src/components/Checkout/ApplyCouponForm/index.ts
@@ -0,0 +1,2 @@
+export * from './ApplyCouponForm'
+export { ApplyCouponForm as default } from './ApplyCouponForm'
diff --git a/src/components/Checkout/ApplyCouponsForm/ApplyCouponsForm.story.tsx b/src/components/Checkout/ApplyCouponsForm/ApplyCouponsForm.story.tsx
deleted file mode 100644
index 53c0e0f..0000000
--- a/src/components/Checkout/ApplyCouponsForm/ApplyCouponsForm.story.tsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from 'react'
-import ApplyCouponsForm from '.'
-import { storiesOf } from '@storybook/react'
-import { useForm, FormContext } from 'react-hook-form'
-import { boolean } from '@storybook/addon-knobs'
-
-storiesOf('📦 Components/Checkout/ApplyCouponsForm', module).add('Default', () => {
-    const methods = useForm()
-    return (
-        <FormContext {...methods}>
-            <ApplyCouponsForm
-                fields={{
-                    giftCardCode: {
-                        label: 'Gift Card',
-                    },
-                    couponCode: {
-                        label: 'Coupon',
-                    },
-                }}
-                loading={boolean('loading', false)}
-                submitButton={{
-                    text: 'Apply',
-                }}
-                onSubmit={() => {
-                    throw Error('Oops!. There was an error... `cause your are just testing ;)')
-                }}
-            />
-        </FormContext>
-    )
-})
diff --git a/src/components/Checkout/ApplyCouponsForm/ApplyCouponsForm.tsx b/src/components/Checkout/ApplyCouponsForm/ApplyCouponsForm.tsx
deleted file mode 100644
index 53109be..0000000
--- a/src/components/Checkout/ApplyCouponsForm/ApplyCouponsForm.tsx
+++ /dev/null
@@ -1,76 +0,0 @@
-import React, { useState, useCallback } from 'react'
-import { Component } from '../../../lib'
-import { Root, Button } from './ApplyCouponsForm.styled'
-import Form, { Input, InputProps } from '../../Form'
-import { useForm } from 'react-hook-form'
-import ButtonComponent, { ButtonProps } from '../../Button'
-
-export type ApplyCouponsFormPayload = {
-    giftCardCode: string
-    couponCode: string
-}
-
-export type ApplyCouponsFormProps = {
-    submitButton: ButtonProps
-    onSubmit: (payload: ApplyCouponsFormPayload) => any
-    loading?: boolean
-    fields: {
-        giftCardCode: InputProps
-        couponCode: InputProps
-    }
-}
-export const ApplyCouponsForm: Component<ApplyCouponsFormProps> = ({
-    fields,
-    submitButton,
-    onSubmit,
-    loading,
-    ...props
-}) => {
-    const { handleSubmit, register, errors, setError } = useForm<ApplyCouponsFormPayload>()
-
-    const [submitting, setSubmitting] = useState(false)
-
-    const handleOnSubmit = useCallback(
-        async form => {
-            setError('giftCardCode', '', undefined)
-            setSubmitting(true)
-
-            try {
-                await handleSubmit(onSubmit)(form)
-                setSubmitting(false)
-            } catch (error) {
-                setError('giftCardCode', '', error?.message)
-                setSubmitting(false)
-            }
-        },
-        [handleSubmit, onSubmit]
-    )
-
-    const disabled = submitting
-
-    return (
-        <Root as={Form} onSubmit={handleOnSubmit} {...props}>
-            <Input
-                {...fields.giftCardCode}
-                loading={loading}
-                name="giftCardCode"
-                ref={register({ required: true })}
-                error={errors.giftCardCode}
-                disabled={disabled}
-            />
-
-            <Button as={ButtonComponent} type="submit" loading={loading || submitting} {...submitButton} />
-
-            <Input
-                {...fields.couponCode}
-                loading={loading}
-                name="couponCode"
-                ref={register({ required: true })}
-                error={errors.couponCode}
-                disabled={disabled}
-            />
-
-            <Button as={ButtonComponent} type="submit" loading={loading || submitting} {...submitButton} />
-        </Root>
-    )
-}
diff --git a/src/components/Checkout/ApplyCouponsForm/index.ts b/src/components/Checkout/ApplyCouponsForm/index.ts
deleted file mode 100644
index 038c7e4..0000000
--- a/src/components/Checkout/ApplyCouponsForm/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './ApplyCouponsForm'
-export { ApplyCouponsForm as default } from './ApplyCouponsForm'
diff --git a/src/components/Form/Form.styled.tsx b/src/components/Form/Form.styled.tsx
index 6de12bb..d7ff61d 100644
--- a/src/components/Form/Form.styled.tsx
+++ b/src/components/Form/Form.styled.tsx
@@ -46,7 +46,7 @@ export const Input = styled.input<{ $error?: boolean }>`
     border-right: none;
     border-bottom: 0.1rem solid ${props => props.theme.colors.primary15};
     transition: border 250ms ease, background-color 250ms ease;
-    background-color: ${props => props.theme.colors.surface};
+    background-color: transparent;
 
     &::placeholder {
         color: ${props => props.theme.colors.primary75};
diff --git a/src/components/Form/Input/Input.tsx b/src/components/Form/Input/Input.tsx
index e3ba8bf..394da13 100644
--- a/src/components/Form/Input/Input.tsx
+++ b/src/components/Form/Input/Input.tsx
@@ -8,6 +8,7 @@ export type InputProps = {
     label: string
     error?: { message?: string }
     loading?: boolean
+    name: string
 } & HTMLAttributes<HTMLInputElement>
 
 export const Input: Component<InputProps> = React.forwardRef(
diff --git a/src/lib/index.ts b/src/lib/index.ts
index e71dbb5..d6e047e 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -63,3 +63,15 @@ export const toPascalCase = (string: string) => {
     const camelCased = toCamelCase(string)
     return camelCased.charAt(0).toUpperCase() + camelCased.slice(1)
 }
+
+/**
+ * Get from Deep Object
+ */
+
+export const getfromObject = (property: string, object: { [key: string]: any }): any => {
+    const entry = property.split('.').reduce((result, key) => {
+        return result[key] || {}
+    }, object)
+
+    return Object.keys(entry).length === 0 ? undefined : entry
+}
diff --git a/src/templates/Cart/Cart.story.tsx b/src/templates/Cart/Cart.story.tsx
index 5b5231d..9569799 100644
--- a/src/templates/Cart/Cart.story.tsx
+++ b/src/templates/Cart/Cart.story.tsx
@@ -52,6 +52,21 @@ storiesOf('📑 Templates/Cart', module).add('Default', () => (
                         },
                     },
                 ],
+                coupons: {
+                    label: 'Apply Gift Card or Discount Code',
+                    fields: [
+                        {
+                            field: { label: 'Gift Card', name: 'giftCardCode' },
+                            submitButton: { text: 'Apply' },
+                            onSubmit: () => {},
+                        },
+                        {
+                            field: { label: 'Discount Code', name: 'discountCode' },
+                            submitButton: { text: 'Apply' },
+                            onSubmit: () => {},
+                        },
+                    ],
+                },
             }}
             button={{ text: 'Checkout' }}
         />
diff --git a/src/templates/Product/Product.tsx b/src/templates/Product/Product.tsx
index f96f71f..54b9538 100644
--- a/src/templates/Product/Product.tsx
+++ b/src/templates/Product/Product.tsx
@@ -1,5 +1,5 @@
 import React, { useState, useRef, useCallback, useEffect, MutableRefObject } from 'react'
-import { Component, Props } from '../../lib'
+import { Component, Props, getfromObject } from '../../lib'
 import {
     Root,
     Wrapper,
@@ -176,9 +176,15 @@ export const Product: Component<ProductProps> = ({
                                             {options.map(
                                                 ({ _id, error: _error, type, label, required, swatches }, index) => {
                                                     const { name } = swatches
-                                                    const error = errors[name]
-
-                                                    if (_error) setError(name, typeof _error === 'string' ? _error : '')
+                                                    const error = getfromObject(name, errors)
+
+                                                    if (_error) {
+                                                        setError(
+                                                            name,
+                                                            'error',
+                                                            typeof _error === 'string' ? _error : ''
+                                                        )
+                                                    }
 
                                                     return (
                                                         <fieldset key={_id || index}>

From 7ea422c6add9a3857ba8930ced1cbd82e3eae5e7 Mon Sep 17 00:00:00 2001
From: "Carlos A. Cabrera" <cacabrer@adobe.com>
Date: Wed, 5 Feb 2020 18:22:51 -0600
Subject: [PATCH 10/17] Refactored

- Form: Input, Select
- All Checkout Forms
---
 package.json                                  |   2 +
 .../ApplyCouponForm/ApplyCouponForm.story.tsx |  43 ++---
 .../ApplyCouponForm/ApplyCouponForm.tsx       |  31 +---
 .../ContactInfoForm/ContactInfoForm.story.tsx |  18 +-
 .../ContactInfoForm/ContactInfoForm.tsx       | 140 +++-------------
 .../PaymentMethodForm.story.tsx               |   6 +-
 .../PaymentMethodForm/PaymentMethodForm.tsx   |  17 +-
 .../PlaceOrderForm/PlaceOrderForm.story.tsx   |  24 ++-
 .../PlaceOrderForm/PlaceOrderForm.tsx         |  43 ++---
 .../ShippingMethodForm.story.tsx              |  46 +++---
 .../ShippingMethodForm/ShippingMethodForm.tsx |  48 ++----
 src/components/Form/Form.tsx                  |  13 +-
 src/components/Form/Input/Input.story.tsx     |  19 ++-
 src/components/Form/Input/Input.tsx           | 154 ++++++++++--------
 src/components/Form/Select/Select.story.tsx   |  31 ++--
 src/components/Form/Select/Select.tsx         |  91 +++++++----
 src/lib/index.ts                              |  11 +-
 17 files changed, 324 insertions(+), 413 deletions(-)

diff --git a/package.json b/package.json
index 9920847..04c8500 100644
--- a/package.json
+++ b/package.json
@@ -44,6 +44,7 @@
     "@types/braintree-web-drop-in": "^1.18.0",
     "@types/common-tags": "^1.8.0",
     "@types/d3-ease": "^1.0.9",
+    "@types/lodash.get": "^4.4.6",
     "@types/node": "^13.1.4",
     "@types/prismjs": "^1.16.0",
     "@types/react": "^16.9.17",
@@ -59,6 +60,7 @@
     "core-js": "2",
     "d3-ease": "^1.0.6",
     "focus-visible": "^5.0.2",
+    "lodash.get": "^4.4.2",
     "prettier": "1.19.1",
     "prismjs": "^1.18.0",
     "prop-types": "^15.0.0-0",
diff --git a/src/components/Checkout/ApplyCouponForm/ApplyCouponForm.story.tsx b/src/components/Checkout/ApplyCouponForm/ApplyCouponForm.story.tsx
index 370e1cc..cae6d24 100644
--- a/src/components/Checkout/ApplyCouponForm/ApplyCouponForm.story.tsx
+++ b/src/components/Checkout/ApplyCouponForm/ApplyCouponForm.story.tsx
@@ -1,31 +1,20 @@
 import React from 'react'
 import ApplyCouponForm from '.'
 import { storiesOf } from '@storybook/react'
-import { useForm, FormContext } from 'react-hook-form'
-import { boolean } from '@storybook/addon-knobs'
+import { boolean, text } from '@storybook/addon-knobs'
+import { action } from '@storybook/addon-actions'
 
-storiesOf('📦 Components/Checkout/ApplyCouponForm', module).add('Default', () => {
-    const methods = useForm()
-
-    return (
-        <FormContext {...methods}>
-            <ApplyCouponForm
-                field={{
-                    label: 'Gift Card',
-                    name: 'giftCard',
-                }}
-                loading={boolean('loading', false)}
-                submitButton={{
-                    text: 'Apply',
-                }}
-                onSubmit={() => {
-                    return new Promise((resolve, reject) => {
-                        return setTimeout(() => {
-                            reject({ message: 'Oops!. There was an error... `cause your are just testing ;)' })
-                        }, 3000)
-                    })
-                }}
-            />
-        </FormContext>
-    )
-})
+storiesOf('📦 Components/Checkout/ApplyCouponForm', module).add('Default', () => (
+    <ApplyCouponForm
+        field={{
+            label: 'Gift Card',
+            name: 'giftCard',
+        }}
+        loading={boolean('loading', false)}
+        onSubmit={action('onSubmit')}
+        submitButton={{
+            text: 'Apply',
+        }}
+        error={text('error', '')}
+    />
+))
diff --git a/src/components/Checkout/ApplyCouponForm/ApplyCouponForm.tsx b/src/components/Checkout/ApplyCouponForm/ApplyCouponForm.tsx
index 3114608..7fa4cce 100644
--- a/src/components/Checkout/ApplyCouponForm/ApplyCouponForm.tsx
+++ b/src/components/Checkout/ApplyCouponForm/ApplyCouponForm.tsx
@@ -1,11 +1,9 @@
-import React, { useEffect } from 'react'
+import React from 'react'
 import { Component } from '../../../lib'
 import { Root, Button } from './ApplyCouponForm.styled'
-import Form, { Input, InputProps } from '../../Form'
+import Form, { Input, InputProps, FormError } from '../../Form'
 import ButtonComponent, { ButtonProps } from '../../Button'
 
-import { useForm } from 'react-hook-form'
-
 export type ApplyCouponFormPayload = {
     [code: string]: string
 }
@@ -16,6 +14,7 @@ export type ApplyCouponFormProps = {
     onSubmit: (payload: ApplyCouponFormPayload) => any
     submitting?: boolean
     submitButton: ButtonProps
+    error?: string
 }
 
 export const ApplyCouponForm: Component<ApplyCouponFormProps> = ({
@@ -24,30 +23,16 @@ export const ApplyCouponForm: Component<ApplyCouponFormProps> = ({
     onSubmit,
     submitButton,
     submitting = false,
+    error,
     ...props
 }) => {
-    const { handleSubmit, register, errors, setError, clearError } = useForm<ApplyCouponFormPayload>()
-
-    useEffect(() => {
-        if (field.error?.message) {
-            setError(field.name, 'ssError', field.error.message)
-        } else {
-            clearError(field.name)
-        }
-    }, [field.error?.message])
-
     return (
-        <Root as={Form} onSubmit={handleSubmit(onSubmit)} {...props}>
-            <Input
-                key={field.defaultValue as string} // update field when defaultValue changes
-                loading={loading}
-                ref={register({ required: true })}
-                disabled={submitting}
-                error={errors[field.name]}
-                {...field}
-            />
+        <Root as={Form} onSubmit={onSubmit} {...props}>
+            <Input loading={loading} rules={{ required: true }} disabled={submitting} {...field} />
 
             <Button as={ButtonComponent} type="submit" loading={loading || submitting} {...submitButton} />
+
+            {error && <FormError>{error}</FormError>}
         </Root>
     )
 }
diff --git a/src/components/Checkout/ContactInfoForm/ContactInfoForm.story.tsx b/src/components/Checkout/ContactInfoForm/ContactInfoForm.story.tsx
index 5942844..0c8e32d 100644
--- a/src/components/Checkout/ContactInfoForm/ContactInfoForm.story.tsx
+++ b/src/components/Checkout/ContactInfoForm/ContactInfoForm.story.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import ContactInfoForm from '.'
 import { storiesOf } from '@storybook/react'
 import { action } from '@storybook/addon-actions'
-import { boolean } from '@storybook/addon-knobs'
+import { boolean, text } from '@storybook/addon-knobs'
 
 storiesOf('📦 Components/Checkout/ContactInfoForm', module).add('Default', () => {
     return (
@@ -11,27 +11,35 @@ storiesOf('📦 Components/Checkout/ContactInfoForm', module).add('Default', ()
             edit={boolean('edit', false)}
             fields={{
                 email: {
+                    name: 'email',
                     label: 'Email',
                 },
                 firstName: {
+                    name: 'firstName',
                     label: 'First Name',
                 },
                 lastName: {
+                    name: 'lastName',
                     label: 'Last Name',
                 },
                 company: {
+                    name: 'company',
                     label: 'Company (optional)',
                 },
                 address1: {
+                    name: 'address1',
                     label: 'Address',
                 },
                 address2: {
+                    name: 'address2',
                     label: 'Apt, Suite, Unit, etc (optional)',
                 },
                 city: {
+                    name: 'city',
                     label: 'City',
                 },
                 country: {
+                    name: 'country',
                     label: 'Country',
                     items: [
                         {
@@ -45,13 +53,16 @@ storiesOf('📦 Components/Checkout/ContactInfoForm', module).add('Default', ()
                     ],
                 },
                 region: {
+                    name: 'region',
                     type: 'text',
                     label: 'State',
                 },
                 postalCode: {
+                    name: 'postalCode',
                     label: 'Postal Code',
                 },
                 phone: {
+                    name: 'phone',
                     label: 'Phone Number',
                 },
             }}
@@ -61,10 +72,9 @@ storiesOf('📦 Components/Checkout/ContactInfoForm', module).add('Default', ()
             editButton={{
                 text: 'Edit',
             }}
-            onSubmit={() => {
-                throw Error('Oops!. There was an error... `cause your are just testing ;)')
-            }}
+            onSubmit={action('onSubmit')}
             onEdit={action('onEdit')}
+            error={text('error', '')}
         />
     )
 })
diff --git a/src/components/Checkout/ContactInfoForm/ContactInfoForm.tsx b/src/components/Checkout/ContactInfoForm/ContactInfoForm.tsx
index 4f35abf..198b59d 100644
--- a/src/components/Checkout/ContactInfoForm/ContactInfoForm.tsx
+++ b/src/components/Checkout/ContactInfoForm/ContactInfoForm.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react'
+import React from 'react'
 import { Component } from '../../../lib'
 import {
     Root,
@@ -14,7 +14,6 @@ import {
     PostalCode,
     PhoneNumber,
 } from './ContactInfoForm.styled'
-import { useForm } from 'react-hook-form'
 
 import Form, { Input, InputProps, Select, SelectProps, FormError, patterns } from '../../Form'
 import Button, { ButtonProps } from '../../Button'
@@ -53,6 +52,8 @@ export type ContactInfoFormProps = {
     onSubmit: (payload: ContactInfoFormPayload) => any
     onEdit: (...args: any) => any
     loading?: boolean
+    submitting?: boolean
+    error?: string
 }
 
 export const ContactInfoForm: Component<ContactInfoFormProps> = ({
@@ -63,161 +64,62 @@ export const ContactInfoForm: Component<ContactInfoFormProps> = ({
     onSubmit,
     onEdit,
     loading,
+    submitting,
+    error,
     ...props
 }) => {
-    const { handleSubmit, register, errors } = useForm<ContactInfoFormPayload>()
-
-    const [formError, setFormError] = useState<string | null>(null)
-
-    const [submitting, setSubmitting] = useState(false)
-
-    const handleOnSubmit = useCallback(
-        async form => {
-            setFormError(null)
-            setSubmitting(true)
-
-            try {
-                await handleSubmit(onSubmit)(form)
-                setSubmitting(false)
-            } catch (error) {
-                setFormError(error.message)
-                setSubmitting(false)
-            }
-        },
-        [handleSubmit, onSubmit]
-    )
-
     const { email, firstName, lastName, company, address1, address2, city, country, region, postalCode, phone } = fields
 
     const disabled = submitting || !edit
 
     return (
-        <Form autoComplete={props.disabled ? 'off' : 'on'} onSubmit={handleOnSubmit} {...props}>
+        <Form autoComplete={props.disabled ? 'off' : 'on'} onSubmit={onSubmit} {...props}>
             <Root $preview={!edit}>
                 <Email>
                     <Input
                         loading={loading}
-                        {...email}
-                        name="email"
-                        ref={register({ required: true, pattern: patterns.email })}
-                        error={errors.email}
+                        rules={{ required: true, pattern: patterns.email }}
                         disabled={disabled}
+                        {...email}
                     />
                 </Email>
                 <FirstName>
-                    <Input
-                        loading={loading}
-                        {...firstName}
-                        name="firstName"
-                        ref={register({ required: true })}
-                        error={errors.firstName}
-                        disabled={disabled}
-                    />
+                    <Input loading={loading} rules={{ required: true }} disabled={disabled} {...firstName} />
                 </FirstName>
                 <LastName>
-                    <Input
-                        loading={loading}
-                        {...lastName}
-                        name="lastName"
-                        ref={register({ required: true })}
-                        error={errors.lastName}
-                        disabled={disabled}
-                    />
+                    <Input loading={loading} rules={{ required: true }} disabled={disabled} {...lastName} />
                 </LastName>
                 <Company>
-                    <Input
-                        loading={loading}
-                        {...company}
-                        name="company"
-                        ref={register}
-                        error={errors.company}
-                        disabled={disabled}
-                    />
+                    <Input loading={loading} disabled={disabled} {...company} />
                 </Company>
                 <Address1>
-                    <Input
-                        loading={loading}
-                        {...address1}
-                        name="street[0]"
-                        ref={register({ required: true })}
-                        error={errors.address1}
-                        disabled={disabled}
-                    />
+                    <Input loading={loading} rules={{ required: true }} disabled={disabled} {...address1} />
                 </Address1>
                 <Address2>
-                    <Input
-                        loading={loading}
-                        {...address2}
-                        name="street[1]"
-                        ref={register}
-                        error={errors.address2}
-                        disabled={disabled}
-                    />
+                    <Input loading={loading} disabled={disabled} {...address2} />
                 </Address2>
                 <City>
-                    <Input
-                        loading={loading}
-                        {...city}
-                        name="city"
-                        ref={register({ required: true })}
-                        error={errors.city}
-                        disabled={disabled}
-                    />
+                    <Input loading={loading} rules={{ required: true }} disabled={disabled} {...city} />
                 </City>
                 <Country>
-                    <Select
-                        loading={loading}
-                        {...country}
-                        name="country"
-                        ref={register({ required: true })}
-                        error={errors.country}
-                        disabled={disabled}
-                    />
+                    <Select loading={loading} rules={{ required: true }} disabled={disabled} {...country} />
                 </Country>
                 <Region>
                     {region.type === 'select' ? (
-                        <Select
-                            loading={loading}
-                            {...region}
-                            name="region"
-                            ref={register({ required: true })}
-                            error={errors.region}
-                            disabled={disabled}
-                        />
+                        <Select loading={loading} rules={{ required: true }} disabled={disabled} {...region} />
                     ) : (
-                        <Input
-                            loading={loading}
-                            {...region}
-                            name="region"
-                            ref={register({ required: true })}
-                            error={errors.region}
-                            disabled={disabled}
-                        />
+                        <Input loading={loading} rules={{ required: true }} disabled={disabled} {...region} />
                     )}
                 </Region>
                 <PostalCode>
-                    <Input
-                        loading={loading}
-                        {...postalCode}
-                        name="postalCode"
-                        ref={register({ required: true })}
-                        error={errors.postalCode}
-                        disabled={disabled}
-                    />
+                    <Input loading={loading} rules={{ required: true }} disabled={disabled} {...postalCode} />
                 </PostalCode>
                 <PhoneNumber>
-                    <Input
-                        loading={loading}
-                        {...phone}
-                        name="phone"
-                        ref={register({ required: true })}
-                        error={errors.phone}
-                        disabled={disabled}
-                    />
+                    <Input loading={loading} rules={{ required: true }} disabled={disabled} {...phone} />
                 </PhoneNumber>
             </Root>
 
-            {formError && <FormError>{formError}</FormError>}
+            {error && <FormError>{error}</FormError>}
 
             {edit ? (
                 <Button type="submit" loading={loading || submitting} {...submitButton} />
@@ -225,11 +127,11 @@ export const ContactInfoForm: Component<ContactInfoFormProps> = ({
                 <Button
                     type="button"
                     outline
-                    {...editButton}
                     onClick={(e: Event) => {
                         e.preventDefault()
                         onEdit()
                     }}
+                    {...editButton}
                 />
             )}
         </Form>
diff --git a/src/components/Checkout/PaymentMethodForm/PaymentMethodForm.story.tsx b/src/components/Checkout/PaymentMethodForm/PaymentMethodForm.story.tsx
index 4f3514f..96382ad 100644
--- a/src/components/Checkout/PaymentMethodForm/PaymentMethodForm.story.tsx
+++ b/src/components/Checkout/PaymentMethodForm/PaymentMethodForm.story.tsx
@@ -2,6 +2,7 @@ import React from 'react'
 import PaymentMethodForm from '.'
 import { storiesOf } from '@storybook/react'
 import { text } from '@storybook/addon-knobs'
+import { action } from '@storybook/addon-actions'
 
 storiesOf('📦 Components/Checkout/PaymentMethodForm', module).add('Default', () => {
     const braintree = {
@@ -22,9 +23,8 @@ storiesOf('📦 Components/Checkout/PaymentMethodForm', module).add('Default', (
             editButton={{
                 text: 'Edit',
             }}
-            onSubmit={() => {
-                throw Error('Oops!. There was an error... `cause your are just testing ;)')
-            }}
+            onSubmit={action('onSubmit')}
+            error={text('error', '')}
         />
     )
 })
diff --git a/src/components/Checkout/PaymentMethodForm/PaymentMethodForm.tsx b/src/components/Checkout/PaymentMethodForm/PaymentMethodForm.tsx
index 8d55316..45882d3 100644
--- a/src/components/Checkout/PaymentMethodForm/PaymentMethodForm.tsx
+++ b/src/components/Checkout/PaymentMethodForm/PaymentMethodForm.tsx
@@ -4,7 +4,6 @@ import { Root, Card, CardIcon, CardType, CardNumber } from './PaymentMethodForm.
 import BraintreeWebDropIn, { Dropin, Options, PaymentMethodPayload as Payload } from 'braintree-web-drop-in'
 import Button, { ButtonProps } from '../../Button'
 import Form, { FormError } from '../../Form'
-import { useForm } from 'react-hook-form'
 import { useTheme } from '../../../theme/useTheme'
 
 export type Braintree = Dropin
@@ -12,6 +11,8 @@ export type Braintree = Dropin
 export type PaymentMethodPayload = Payload
 
 export type PaymentMethodFormProps = {
+    submitting?: boolean
+    error?: string
     submitButton: ButtonProps
     editButton: ButtonProps
     braintree: Omit<Options, 'container'>
@@ -111,6 +112,8 @@ const reducer: Reducer<ReducerState, ReducerActions> = (state, action) => {
 }
 
 export const PaymentMethodForm: Component<PaymentMethodFormProps> = ({
+    submitting,
+    error,
     braintree,
     submitButton,
     editButton,
@@ -119,8 +122,6 @@ export const PaymentMethodForm: Component<PaymentMethodFormProps> = ({
 }) => {
     const { colors } = useTheme()
 
-    const { handleSubmit } = useForm<PaymentMethodPayload>()
-
     const containerElem = useRef(null)
 
     const [{ instance, editable, loading, formError, paymentInfo }, dispatch] = useReducer(reducer, initialState)
@@ -190,14 +191,14 @@ export const PaymentMethodForm: Component<PaymentMethodFormProps> = ({
             }
 
             try {
-                await handleSubmit(_submit)(form)
+                await _submit()
             } catch (error) {
                 dispatch({ type: 'setFormError', payload: error.message })
             }
 
             dispatch({ type: 'setLoader', payload: false })
         },
-        [handleSubmit, onSubmit, instance]
+        [onSubmit, instance]
     )
 
     return (
@@ -215,10 +216,10 @@ export const PaymentMethodForm: Component<PaymentMethodFormProps> = ({
                 )
             )}
 
-            {formError && <FormError>{formError}</FormError>}
+            {(error || formError) && <FormError>{error || formError}</FormError>}
 
-            {loading || editable ? (
-                <Button type="submit" loading={loading} {...submitButton} />
+            {submitting || loading || editable ? (
+                <Button type="submit" loading={submitting || loading} {...submitButton} />
             ) : (
                 <Button outline onClick={handleOnEdit} {...editButton} />
             )}
diff --git a/src/components/Checkout/PlaceOrderForm/PlaceOrderForm.story.tsx b/src/components/Checkout/PlaceOrderForm/PlaceOrderForm.story.tsx
index 5be6c68..85cefc8 100644
--- a/src/components/Checkout/PlaceOrderForm/PlaceOrderForm.story.tsx
+++ b/src/components/Checkout/PlaceOrderForm/PlaceOrderForm.story.tsx
@@ -1,22 +1,18 @@
 import React from 'react'
 import PlaceOrderForm from '.'
 import { storiesOf } from '@storybook/react'
-import { useForm, FormContext } from 'react-hook-form'
-import { boolean } from '@storybook/addon-knobs'
+import { boolean, text } from '@storybook/addon-knobs'
+import { action } from '@storybook/addon-actions'
 
 storiesOf('📦 Components/Checkout/PlaceOrderForm', module).add('Default', () => {
-    const methods = useForm()
     return (
-        <FormContext {...methods}>
-            <PlaceOrderForm
-                loading={boolean('loading', false)}
-                submitButton={{
-                    text: 'Place Order',
-                }}
-                onSubmit={() => {
-                    throw Error('Oops!. There was an error... `cause your are just testing ;)')
-                }}
-            />
-        </FormContext>
+        <PlaceOrderForm
+            loading={boolean('loading', false)}
+            submitButton={{
+                text: 'Place Order',
+            }}
+            onSubmit={action('onSubmit')}
+            error={text('error', '')}
+        />
     )
 })
diff --git a/src/components/Checkout/PlaceOrderForm/PlaceOrderForm.tsx b/src/components/Checkout/PlaceOrderForm/PlaceOrderForm.tsx
index 612afc1..c3f41b2 100644
--- a/src/components/Checkout/PlaceOrderForm/PlaceOrderForm.tsx
+++ b/src/components/Checkout/PlaceOrderForm/PlaceOrderForm.tsx
@@ -1,45 +1,30 @@
-import React, { useState, useCallback } from 'react'
+import React from 'react'
 import { Component } from '../../../lib'
 import { Root } from './PlaceOrderForm.styled'
 import Form, { FormError } from '../../Form'
-import { useForm } from 'react-hook-form'
 import Button, { ButtonProps } from '../../Button'
 
 export type PlaceOrderFormPayload = {}
 
 export type PlaceOrderFormProps = {
+    loading?: boolean
+    submitting?: boolean
+    error?: string
     submitButton: ButtonProps
     onSubmit: (payload: PlaceOrderFormPayload) => any
-    loading?: boolean
 }
 
-export const PlaceOrderForm: Component<PlaceOrderFormProps> = ({ loading, submitButton, onSubmit, ...props }) => {
-    const { handleSubmit } = useForm<PlaceOrderFormPayload>()
-
-    const [formError, setFormError] = useState<string | null>(null)
-
-    const [submitting, setSubmitting] = useState(false)
-
-    const handleOnSubmit = useCallback(
-        async form => {
-            setFormError(null)
-            setSubmitting(true)
-
-            try {
-                await handleSubmit(onSubmit)(form)
-                setSubmitting(false)
-            } catch (error) {
-                setFormError(error.message)
-                setSubmitting(false)
-            }
-        },
-        [handleSubmit, onSubmit]
-    )
-
+export const PlaceOrderForm: Component<PlaceOrderFormProps> = ({
+    loading,
+    submitting,
+    error,
+    submitButton,
+    onSubmit,
+    ...props
+}) => {
     return (
-        <Root as={Form} onSubmit={handleOnSubmit} {...props}>
-            {formError && <FormError>{formError}</FormError>}
-
+        <Root as={Form} onSubmit={onSubmit} {...props}>
+            {error && <FormError>{error}</FormError>}
             <Button type="submit" loading={loading || submitting} {...submitButton} />
         </Root>
     )
diff --git a/src/components/Checkout/ShippingMethodForm/ShippingMethodForm.story.tsx b/src/components/Checkout/ShippingMethodForm/ShippingMethodForm.story.tsx
index a7d9d53..b88116f 100644
--- a/src/components/Checkout/ShippingMethodForm/ShippingMethodForm.story.tsx
+++ b/src/components/Checkout/ShippingMethodForm/ShippingMethodForm.story.tsx
@@ -1,32 +1,32 @@
 import React from 'react'
 import ShippingMethodForm from '.'
 import { storiesOf } from '@storybook/react'
-import { useForm, FormContext } from 'react-hook-form'
 import { action } from '@storybook/addon-actions'
-import { boolean } from '@storybook/addon-knobs'
+import { boolean, text } from '@storybook/addon-knobs'
 
 storiesOf('📦 Components/Checkout/ShippingMethodForm', module).add('Default', () => {
-    const methods = useForm()
     return (
-        <FormContext {...methods}>
-            <ShippingMethodForm
-                loading={boolean('loading', false)}
-                edit={boolean('edit', false)}
-                items={[
-                    { text: 'Fixed - $5.00', value: '1' },
-                    { text: '1-Day Express - $29.99', value: '2' },
-                ]}
-                submitButton={{
-                    text: 'Save',
-                }}
-                editButton={{
-                    text: 'Edit',
-                }}
-                onSubmit={() => {
-                    throw Error('Oops!. There was an error... `cause your are just testing ;)')
-                }}
-                onEdit={action('onEdit')}
-            />
-        </FormContext>
+        <ShippingMethodForm
+            loading={boolean('loading', false)}
+            edit={boolean('edit', false)}
+            fields={{
+                shippingMethod: {
+                    name: 'shippingMethod',
+                    items: [
+                        { text: 'Fixed - $5.00', value: '1' },
+                        { text: '1-Day Express - $29.99', value: '2' },
+                    ],
+                },
+            }}
+            submitButton={{
+                text: 'Save',
+            }}
+            editButton={{
+                text: 'Edit',
+            }}
+            error={text('error', '')}
+            onSubmit={action('onSubmit')}
+            onEdit={action('onEdit')}
+        />
     )
 })
diff --git a/src/components/Checkout/ShippingMethodForm/ShippingMethodForm.tsx b/src/components/Checkout/ShippingMethodForm/ShippingMethodForm.tsx
index e51657b..144cbe7 100644
--- a/src/components/Checkout/ShippingMethodForm/ShippingMethodForm.tsx
+++ b/src/components/Checkout/ShippingMethodForm/ShippingMethodForm.tsx
@@ -1,8 +1,7 @@
-import React, { useState, useCallback } from 'react'
+import React from 'react'
 import { Component } from '../../../lib'
 import { Root } from './ShippingMethodForm.styled'
 import Form, { Select, SelectProps, FormError } from '../../Form'
-import { useForm } from 'react-hook-form'
 import Button, { ButtonProps } from '../../Button'
 
 export type ShippingMethodFormPayload = {
@@ -16,7 +15,12 @@ export type ShippingMethodFormProps = {
     onSubmit: (payload: ShippingMethodFormPayload) => any
     onEdit: (...args: any) => any
     loading?: boolean
-} & SelectProps
+    submitting?: boolean
+    error?: string
+    fields: {
+        shippingMethod: SelectProps
+    }
+}
 
 export const ShippingMethodForm: Component<ShippingMethodFormProps> = ({
     edit = false,
@@ -25,44 +29,20 @@ export const ShippingMethodForm: Component<ShippingMethodFormProps> = ({
     onEdit,
     onSubmit,
     loading,
+    submitting,
+    fields,
+    error,
     ...props
 }) => {
-    const { handleSubmit, register, errors } = useForm<ShippingMethodFormPayload>()
-
-    const [formError, setFormError] = useState<string | null>(null)
-
-    const [submitting, setSubmitting] = useState(false)
-
-    const handleOnSubmit = useCallback(
-        async form => {
-            setFormError(null)
-            setSubmitting(true)
-
-            try {
-                await handleSubmit(onSubmit)(form)
-                setSubmitting(false)
-            } catch (error) {
-                setFormError(error.message)
-                setSubmitting(false)
-            }
-        },
-        [handleSubmit, onSubmit]
-    )
+    const { shippingMethod } = fields
 
     const disabled = submitting || !edit
 
     return (
-        <Root as={Form} onSubmit={handleOnSubmit}>
-            <Select
-                loading={loading}
-                name="shippingMethod"
-                ref={register({ required: true })}
-                error={errors.shippingMethod}
-                disabled={disabled}
-                {...props}
-            />
+        <Root as={Form} onSubmit={onSubmit}>
+            <Select loading={loading} disabled={disabled} {...shippingMethod} />
 
-            {formError && <FormError>{formError}</FormError>}
+            {error && <FormError>{error}</FormError>}
 
             {edit ? (
                 <Button type="submit" loading={loading || submitting} {...submitButton} />
diff --git a/src/components/Form/Form.tsx b/src/components/Form/Form.tsx
index e42a2be..9eb9243 100644
--- a/src/components/Form/Form.tsx
+++ b/src/components/Form/Form.tsx
@@ -8,12 +8,21 @@ import {
     Input as InputRoot,
     FormError as FormErrorRoot,
 } from './Form.styled'
+import { FormContext, useForm } from 'react-hook-form'
 
 /** Form */
 export type FormProps = {}
 
-export const Form: Component<FormProps> = ({ children, ...props }) => {
-    return <Root {...props}>{children}</Root>
+export const Form: Component<FormProps> = ({ children, onSubmit, ...props }) => {
+    const form = useForm()
+
+    return (
+        <FormContext {...form}>
+            <Root onSubmit={form.handleSubmit(onSubmit)} {...props}>
+                {children}
+            </Root>
+        </FormContext>
+    )
 }
 
 /** Field */
diff --git a/src/components/Form/Input/Input.story.tsx b/src/components/Form/Input/Input.story.tsx
index c4752a8..3842552 100644
--- a/src/components/Form/Input/Input.story.tsx
+++ b/src/components/Form/Input/Input.story.tsx
@@ -1,13 +1,18 @@
 import React from 'react'
 import Input from '.'
 import { storiesOf } from '@storybook/react'
-import { text, boolean } from '@storybook/addon-knobs'
+import { text, boolean, object } from '@storybook/addon-knobs'
+import { Form } from '../Form'
 
 storiesOf('📦 Components/Form/Input', module).add('Default', () => (
-    <Input
-        loading={boolean('loading', false)}
-        label="Label"
-        placeholder={text('placeholder', '')}
-        error={boolean('error', false) ? { message: text('error message', '') } : undefined}
-    />
+    <Form>
+        <Input
+            name="test"
+            loading={boolean('loading', false)}
+            label="Label"
+            placeholder={text('placeholder', '')}
+            error={text('error message', '')}
+            rules={object('rules', { required: true })}
+        />
+    </Form>
 ))
diff --git a/src/components/Form/Input/Input.tsx b/src/components/Form/Input/Input.tsx
index 394da13..480c506 100644
--- a/src/components/Form/Input/Input.tsx
+++ b/src/components/Form/Input/Input.tsx
@@ -1,80 +1,104 @@
-import React, { HTMLAttributes, useState, useCallback, useMemo, ChangeEvent, FocusEvent } from 'react'
+import React, { InputHTMLAttributes, useState, useEffect, useCallback, useMemo, ChangeEvent, FocusEvent } from 'react'
 import { Component } from '../../../lib'
 import { Label as LabelRoot } from './Input.styled'
 import { Field, FieldInput, Label, Error } from '../Form'
 import { InputSkeleton } from './Input.skeleton'
+import { ValidationOptions, useFormContext, ErrorMessage } from 'react-hook-form'
+import _get from 'lodash.get'
 
 export type InputProps = {
     label: string
-    error?: { message?: string }
     loading?: boolean
     name: string
-} & HTMLAttributes<HTMLInputElement>
+    rules?: ValidationOptions
+    error?: string
+} & InputHTMLAttributes<HTMLInputElement>
 
-export const Input: Component<InputProps> = React.forwardRef(
-    ({ loading, label, as, error, onChange, onFocus, onBlur, ...props }, ref) => {
-        const defaultActive = useMemo(() => {
-            const { defaultValue, value = defaultValue, placeholder } = props
-            return !!value || !!placeholder || !!error
-        }, [props.value, props.defaultValue, props.placeholder, error])
+export const Input: Component<InputProps> = ({
+    as,
+    error,
+    label,
+    loading,
+    name,
+    rules,
+    onBlur,
+    onChange,
+    onFocus,
+    ...props
+}) => {
+    const { register, setError, clearError, errors } = useFormContext()
 
-        const [active, setActive] = useState<boolean>(defaultActive)
+    const hasError = !!error || !!_get(errors, name)
 
-        const handleOnChange = useCallback(
-            (event: ChangeEvent<HTMLInputElement>) => {
-                const { value, placeholder } = event.currentTarget
-                setActive(!!value || !!placeholder || !!error)
-                if (onChange) onChange(event)
-            },
-            [ref, error, onChange]
-        )
+    useEffect(() => {
+        if (error) {
+            setError(name, 'server', error)
+        } else {
+            clearError(name)
+        }
+    }, [error])
 
-        const handleOnFocus = useCallback(
-            (event: FocusEvent<HTMLInputElement>) => {
-                setActive(true)
-                if (onFocus) onFocus(event)
-            },
-            [onFocus]
-        )
+    const defaultActive = useMemo(() => {
+        const { defaultValue, value = defaultValue, placeholder } = props
+        return !!value || !!placeholder || hasError
+    }, [props.value, props.defaultValue, props.placeholder, hasError])
 
-        const handleOnBlur = useCallback(
-            (event: FocusEvent<HTMLInputElement>) => {
-                const { value, placeholder } = event.currentTarget
-                setActive(!!value || !!placeholder || !!error)
-                if (onBlur) onBlur(event)
-            },
-            [onBlur]
-        )
+    const [active, setActive] = useState<boolean>(defaultActive)
 
-        return (
-            <Field as={as}>
-                {label && (
-                    <Label
-                        as={LabelRoot}
-                        htmlFor={props.name}
-                        $active={loading || defaultActive || active}
-                        $error={!!error}
-                    >
-                        {label}
-                    </Label>
-                )}
-                {loading ? (
-                    <InputSkeleton />
-                ) : (
-                    <React.Fragment>
-                        <FieldInput
-                            $error={!!error}
-                            type="text"
-                            ref={ref}
-                            onFocus={handleOnFocus}
-                            onChange={handleOnChange}
-                            onBlur={handleOnBlur}
-                            {...props}
-                        />
-                        <Error>{typeof error === 'object' && error.message}</Error>
-                    </React.Fragment>
-                )}
-            </Field>
-        )
-    }
-)
+    const handleOnChange = useCallback(
+        (event: ChangeEvent<HTMLInputElement>) => {
+            const { value, placeholder } = event.currentTarget
+            setActive(!!value || !!placeholder || hasError)
+            if (onChange) onChange(event)
+        },
+        [hasError, onChange]
+    )
+
+    const handleOnFocus = useCallback(
+        (event: FocusEvent<HTMLInputElement>) => {
+            setActive(true)
+            if (onFocus) onFocus(event)
+        },
+        [onFocus]
+    )
+
+    const handleOnBlur = useCallback(
+        (event: FocusEvent<HTMLInputElement>) => {
+            const { value, placeholder } = event.currentTarget
+            setActive(!!value || !!placeholder || !!hasError)
+            if (onBlur) onBlur(event)
+        },
+        [hasError, onBlur]
+    )
+
+    return (
+        <Field as={as}>
+            {label && (
+                <Label as={LabelRoot} htmlFor={name} $active={loading || defaultActive || active} $error={hasError}>
+                    {label}
+                </Label>
+            )}
+            {loading ? (
+                <InputSkeleton />
+            ) : (
+                <React.Fragment>
+                    <FieldInput
+                        key={props.defaultValue as string} // update field when defaultValue changes
+                        $error={hasError}
+                        type="text"
+                        onFocus={handleOnFocus}
+                        onChange={handleOnChange}
+                        onBlur={handleOnBlur}
+                        {...props}
+                        name={name}
+                        ref={register({ ...rules })}
+                    />
+
+                    <Error>
+                        <ErrorMessage name={name}>{({ message }) => message}</ErrorMessage>
+                    </Error>
+                </React.Fragment>
+            )}
+        </Field>
+    )
+}
diff --git a/src/components/Form/Select/Select.story.tsx b/src/components/Form/Select/Select.story.tsx
index 1d0d672..119c8e8 100644
--- a/src/components/Form/Select/Select.story.tsx
+++ b/src/components/Form/Select/Select.story.tsx
@@ -1,19 +1,24 @@
 import React from 'react'
 import Select from '../Select'
 import { storiesOf } from '@storybook/react'
-import { text, boolean } from '@storybook/addon-knobs'
+import { text, boolean, object } from '@storybook/addon-knobs'
+import { Form } from '../Form'
 
 storiesOf('📦 Components/Form/Select', module).add('Default', () => (
-    <Select
-        loading={boolean('loading', false)}
-        label="Label"
-        error={boolean('error', false) && { message: text('error message', '') }}
-        defaultValue="2"
-        items={[
-            { text: 'One', value: '1' },
-            { text: 'Two', value: '2' },
-            { text: 'Three', value: '3' },
-            { text: 'Four', value: '4' },
-        ]}
-    />
+    <Form>
+        <Select
+            name="test"
+            loading={boolean('loading', false)}
+            label="Label"
+            error={text('error message', '')}
+            defaultValue="2"
+            items={[
+                { text: 'One', value: '1' },
+                { text: 'Two', value: '2' },
+                { text: 'Three', value: '3' },
+                { text: 'Four', value: '4' },
+            ]}
+            rules={object('rules', { required: true })}
+        />
+    </Form>
 ))
diff --git a/src/components/Form/Select/Select.tsx b/src/components/Form/Select/Select.tsx
index 586ea95..43acf35 100644
--- a/src/components/Form/Select/Select.tsx
+++ b/src/components/Form/Select/Select.tsx
@@ -1,45 +1,68 @@
-import React, { AllHTMLAttributes } from 'react'
+import React, { SelectHTMLAttributes, OptionHTMLAttributes, useEffect } from 'react'
 import { Component } from '../../../lib'
 import { Select as SelectRoot, Wrapper } from './Select.styled'
 import { Field, Label, FieldInput, Error } from '../Form'
 import { SelectSkeleton } from './Select.skeleton'
+import { ValidationOptions, useFormContext, ErrorMessage } from 'react-hook-form'
+import _get from 'lodash.get'
 
 export type SelectProps = {
     label?: string
-    error?: { message?: string } | boolean
-    items: Array<{ text: string } & AllHTMLAttributes<HTMLOptionElement>>
+    items: Array<{ text: string } & OptionHTMLAttributes<HTMLOptionElement>>
     loading?: boolean
-} & AllHTMLAttributes<HTMLSelectElement>
+    name: string
+    rules?: ValidationOptions
+    error?: string
+} & SelectHTMLAttributes<HTMLSelectElement>
 
-export const Select: Component<SelectProps> = React.forwardRef(
-    ({ loading, label, items, as, error, ...props }, ref: any) => {
-        return (
-            <Field as={as}>
-                {label && (
-                    <Label htmlFor={props.name} $error={!!error}>
-                        {label}
-                    </Label>
-                )}
+export const Select: Component<SelectProps> = ({ as, error, label, loading, name, rules, items, ...props }) => {
+    const { register, setError, clearError, errors } = useFormContext()
 
-                {loading ? (
-                    <SelectSkeleton />
-                ) : (
-                    <React.Fragment>
-                        <Wrapper $disabled={props.disabled}>
-                            <FieldInput as={SelectRoot} $error={!!error} ref={ref} disabled={!items} {...props}>
-                                {items &&
-                                    items.map(({ text, ...option }, index) => (
-                                        <option key={index} {...option}>
-                                            {text}
-                                        </option>
-                                    ))}
-                            </FieldInput>
-                        </Wrapper>
+    const hasError = !!error || !!_get(errors, name)
 
-                        <Error>{typeof error === 'object' && error.message}</Error>
-                    </React.Fragment>
-                )}
-            </Field>
-        )
-    }
-)
+    useEffect(() => {
+        if (error) {
+            setError(name, 'server', error)
+        } else {
+            clearError(name)
+        }
+    }, [error])
+
+    return (
+        <Field as={as}>
+            {label && (
+                <Label htmlFor={props.name} $error={hasError}>
+                    {label}
+                </Label>
+            )}
+
+            {loading ? (
+                <SelectSkeleton />
+            ) : (
+                <React.Fragment>
+                    <Wrapper $disabled={props.disabled}>
+                        <FieldInput
+                            as={SelectRoot}
+                            $error={hasError}
+                            disabled={!items}
+                            {...props}
+                            name={name}
+                            ref={register({ ...rules })}
+                        >
+                            {items &&
+                                items.map(({ text, ...option }, index) => (
+                                    <option key={index} {...option}>
+                                        {text}
+                                    </option>
+                                ))}
+                        </FieldInput>
+                    </Wrapper>
+
+                    <Error>
+                        <ErrorMessage name={name}>{({ message }) => message}</ErrorMessage>
+                    </Error>
+                </React.Fragment>
+            )}
+        </Field>
+    )
+}
diff --git a/src/lib/index.ts b/src/lib/index.ts
index d6e047e..f6679ad 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -30,14 +30,7 @@ export class ErrorBoundary extends React.Component<any, { hasError: boolean }> {
 /**
  * Components Types
  */
-// type Override<T, U> = Pick<T, Exclude<keyof T, keyof U>> & U
-
-// export type Props<P = {}> = Override<
-//     React.AllHTMLAttributes<HTMLElement>,
-//     {
-//         as?: keyof JSX.IntrinsicElements | React.ComponentType<any>
-//     } & P
-// >
+export type Override<T, U> = Pick<T, Exclude<keyof T, keyof U>> & U
 
 export type Props<P = {}> = {
     [key: string]: any
@@ -69,6 +62,8 @@ export const toPascalCase = (string: string) => {
  */
 
 export const getfromObject = (property: string, object: { [key: string]: any }): any => {
+    console.warn('getfromObject Deprecated')
+
     const entry = property.split('.').reduce((result, key) => {
         return result[key] || {}
     }, object)

From 0d5249d2056b94693863a2f75e9c620fac91d39f Mon Sep 17 00:00:00 2001
From: "Carlos A. Cabrera" <cacabrer@adobe.com>
Date: Thu, 6 Feb 2020 09:05:51 -0600
Subject: [PATCH 11/17] using Form Context

---
 .../Form/Checkbox/Checkbox.story.tsx          | 49 +++++-----
 src/components/Form/Checkbox/Checkbox.tsx     | 89 ++++++++++++-------
 2 files changed, 83 insertions(+), 55 deletions(-)

diff --git a/src/components/Form/Checkbox/Checkbox.story.tsx b/src/components/Form/Checkbox/Checkbox.story.tsx
index 3db893a..1f91eac 100644
--- a/src/components/Form/Checkbox/Checkbox.story.tsx
+++ b/src/components/Form/Checkbox/Checkbox.story.tsx
@@ -1,29 +1,32 @@
 import React from 'react'
 import Checkbox from '.'
 import { storiesOf } from '@storybook/react'
-import { text, boolean, select } from '@storybook/addon-knobs'
+import { text, select } from '@storybook/addon-knobs'
+import { Form } from '../Form'
 
 storiesOf('📦 Components/Form/Checkbox', module).add('Default', () => (
-    <Checkbox
-        label="Label"
-        placeholder={text('placeholder', '')}
-        error={boolean('error', false) && { message: text('error message', '') }}
-        type={select('type', { checkbox: 'checkbox', radio: 'radio' }, 'checkbox')}
-        name="test"
-        items={[
-            {
-                text: 'Option 1',
-                value: 'option1',
-            },
-            {
-                text: 'Option 2',
-                value: 'option2',
-                defaultChecked: true,
-            },
-            {
-                text: 'Option 3',
-                value: 'option3',
-            },
-        ]}
-    />
+    <Form>
+        <Checkbox
+            label="Label"
+            name="test"
+            placeholder={text('placeholder', '')}
+            error={text('error message', '')}
+            type={select('type', { checkbox: 'checkbox', radio: 'radio' }, 'checkbox')}
+            items={[
+                {
+                    text: 'Option 1',
+                    value: 'option1',
+                },
+                {
+                    text: 'Option 2',
+                    value: 'option2',
+                    defaultChecked: true,
+                },
+                {
+                    text: 'Option 3',
+                    value: 'option3',
+                },
+            ]}
+        />
+    </Form>
 ))
diff --git a/src/components/Form/Checkbox/Checkbox.tsx b/src/components/Form/Checkbox/Checkbox.tsx
index f90094f..42c9313 100644
--- a/src/components/Form/Checkbox/Checkbox.tsx
+++ b/src/components/Form/Checkbox/Checkbox.tsx
@@ -1,4 +1,4 @@
-import React, { HTMLAttributes } from 'react'
+import React, { HTMLAttributes, useEffect } from 'react'
 import { Component } from '../../../lib'
 import { Wrapper, Input, Item, OffIcon, OnIcon, Placeholder } from './Checkbox.styled'
 import { Field, Label, Error } from '../Form'
@@ -7,10 +7,13 @@ import RadioOnIconSvg from 'remixicon/icons/System/checkbox-circle-line.svg'
 import RadioOffIconSvg from 'remixicon/icons/System/checkbox-blank-circle-line.svg'
 import CheckboxOnIconSvg from 'remixicon/icons/System/checkbox-line.svg'
 import CheckboxOffIconSvg from 'remixicon/icons/System/checkbox-blank-line.svg'
+import { ValidationOptions, useFormContext, ErrorMessage } from 'react-hook-form'
+import _get from 'lodash.get'
 
 export type CheckboxProps = {
     label?: string
-    error?: { message?: string } | boolean
+    error?: string
+    rules?: ValidationOptions
     type?: 'checkbox' | 'radio'
     items: Array<
         {
@@ -20,33 +23,55 @@ export type CheckboxProps = {
     >
 }
 
-export const Checkbox: Component<CheckboxProps> = React.forwardRef(
-    ({ label, as, error, name, placeholder, type = 'checkbox', items, ...props }, ref: any) => {
-        return (
-            <fieldset>
-                <Field as={as} {...props}>
-                    {label && (
-                        <Label as="legend" $error={!!error}>
-                            {label}
-                        </Label>
-                    )}
-
-                    {placeholder && <Placeholder>{placeholder}</Placeholder>}
-
-                    <Wrapper>
-                        {items.map(({ text, ...item }, index) => (
-                            <Item key={index}>
-                                <Input type={type} name={name} ref={ref} {...item} />
-                                <OffIcon as={type === 'radio' ? RadioOffIconSvg : CheckboxOffIconSvg} />
-                                <OnIcon as={type === 'radio' ? RadioOnIconSvg : CheckboxOnIconSvg} />
-                                {text}
-                            </Item>
-                        ))}
-                    </Wrapper>
-
-                    <Error>{typeof error === 'object' && error.message}</Error>
-                </Field>
-            </fieldset>
-        )
-    }
-)
+export const Checkbox: Component<CheckboxProps> = ({
+    as,
+    error,
+    rules,
+    label,
+    name,
+    placeholder,
+    type = 'checkbox',
+    items,
+    ...props
+}) => {
+    const { register, setError, clearError, errors } = useFormContext()
+
+    const hasError = !!error || !!_get(errors, name)
+
+    useEffect(() => {
+        if (error) {
+            setError(name, 'server', error)
+        } else {
+            clearError(name)
+        }
+    }, [error])
+
+    return (
+        <fieldset>
+            <Field as={as} {...props}>
+                {label && (
+                    <Label as="legend" $error={hasError}>
+                        {label}
+                    </Label>
+                )}
+
+                {placeholder && <Placeholder>{placeholder}</Placeholder>}
+
+                <Wrapper>
+                    {items.map(({ text, ...item }, index) => (
+                        <Item key={index}>
+                            <Input type={type} {...item} name={name} ref={register({ ...rules })} />
+                            <OffIcon as={type === 'radio' ? RadioOffIconSvg : CheckboxOffIconSvg} />
+                            <OnIcon as={type === 'radio' ? RadioOnIconSvg : CheckboxOnIconSvg} />
+                            {text}
+                        </Item>
+                    ))}
+                </Wrapper>
+
+                <Error>
+                    <ErrorMessage name={name}>{({ message }) => message}</ErrorMessage>
+                </Error>
+            </Field>
+        </fieldset>
+    )
+}

From 0142745c5012db60207dc78602027de4d290aa10 Mon Sep 17 00:00:00 2001
From: "Carlos A. Cabrera" <cacabrer@adobe.com>
Date: Thu, 6 Feb 2020 09:16:12 -0600
Subject: [PATCH 12/17] using FormContext

---
 src/components/Form/Checkbox/Checkbox.tsx     |   8 +-
 .../Form/TextSwatches/TextSwatches.story.tsx  |  31 +++---
 .../Form/TextSwatches/TextSwatches.tsx        |  96 ++++++++++------
 .../ThumbSwatches/ThumbSwatches.story.tsx     |  31 +++---
 .../Form/ThumbSwatches/ThumbSwatches.tsx      | 104 +++++++++++-------
 5 files changed, 165 insertions(+), 105 deletions(-)

diff --git a/src/components/Form/Checkbox/Checkbox.tsx b/src/components/Form/Checkbox/Checkbox.tsx
index 42c9313..3f2bf6b 100644
--- a/src/components/Form/Checkbox/Checkbox.tsx
+++ b/src/components/Form/Checkbox/Checkbox.tsx
@@ -60,7 +60,13 @@ export const Checkbox: Component<CheckboxProps> = ({
                 <Wrapper>
                     {items.map(({ text, ...item }, index) => (
                         <Item key={index}>
-                            <Input type={type} {...item} name={name} ref={register({ ...rules })} />
+                            <Input
+                                key={props.defaultValue as string} // update field when defaultValue changes
+                                type={type}
+                                {...item}
+                                name={name}
+                                ref={register({ ...rules })}
+                            />
                             <OffIcon as={type === 'radio' ? RadioOffIconSvg : CheckboxOffIconSvg} />
                             <OnIcon as={type === 'radio' ? RadioOnIconSvg : CheckboxOnIconSvg} />
                             {text}
diff --git a/src/components/Form/TextSwatches/TextSwatches.story.tsx b/src/components/Form/TextSwatches/TextSwatches.story.tsx
index 48ca2f4..6149564 100644
--- a/src/components/Form/TextSwatches/TextSwatches.story.tsx
+++ b/src/components/Form/TextSwatches/TextSwatches.story.tsx
@@ -2,20 +2,23 @@ import React from 'react'
 import TextSwatches from '../TextSwatches'
 import { storiesOf } from '@storybook/react'
 import { object, boolean, text } from '@storybook/addon-knobs'
+import { Form } from '../Form'
 
 storiesOf('📦 Components/Form/TextSwatches', module).add('Default', () => (
-    <TextSwatches
-        loading={boolean('loading', false)}
-        label={text('label', '')}
-        name="size"
-        type="radio"
-        items={object('list', [
-            { text: 'XS' },
-            { text: 'M', disabled: true },
-            { text: 'L', defaultChecked: true },
-            { text: 'XL' },
-            { text: 'S' },
-        ])}
-        error={boolean('error', false) ? { message: text('error message', 'Error') } : undefined}
-    />
+    <Form>
+        <TextSwatches
+            loading={boolean('loading', false)}
+            label={text('label', '')}
+            name="size"
+            type="radio"
+            items={object('list', [
+                { text: 'XS' },
+                { text: 'M', disabled: true },
+                { text: 'L', defaultChecked: true },
+                { text: 'XL' },
+                { text: 'S' },
+            ])}
+            error={text('error', '')}
+        />
+    </Form>
 ))
diff --git a/src/components/Form/TextSwatches/TextSwatches.tsx b/src/components/Form/TextSwatches/TextSwatches.tsx
index 2f9b9ed..95e10ac 100644
--- a/src/components/Form/TextSwatches/TextSwatches.tsx
+++ b/src/components/Form/TextSwatches/TextSwatches.tsx
@@ -1,14 +1,17 @@
-import React, { HTMLAttributes } from 'react'
+import React, { HTMLAttributes, useEffect } from 'react'
 import { Component } from '../../../lib'
 import { Items, Item } from './TextSwatches.styled'
 import { Field, Label, Error } from '../Form'
 import { TextSwatchesSkeleton } from './TextSwatches.skeleton'
+import { ValidationOptions, useFormContext, ErrorMessage } from 'react-hook-form'
+import _get from 'lodash.get'
 
 export type TextSwatchesProps = {
     loading?: boolean
+    error?: string
+    rules?: ValidationOptions
     label?: string
     name: string
-    error?: { message?: string } | boolean
     type?: 'radio' | 'checkbox'
     items: Array<
         {
@@ -18,39 +21,60 @@ export type TextSwatchesProps = {
     >
 }
 
-export const TextSwatches: Component<TextSwatchesProps> = React.forwardRef(
-    ({ loading, label, error, name, type = 'radio', items = [], ...props }, ref) => {
-        return (
-            <Field {...props}>
-                {loading ? (
-                    <TextSwatchesSkeleton />
-                ) : (
-                    <React.Fragment>
-                        {label && (
-                            <Label htmlFor={props.name} $error={!!error}>
-                                {label}
-                            </Label>
-                        )}
+export const TextSwatches: Component<TextSwatchesProps> = ({
+    loading,
+    error,
+    label,
+    name,
+    rules,
+    type = 'radio',
+    items = [],
+    ...props
+}) => {
+    const { register, setError, clearError, errors } = useFormContext()
 
-                        <Items>
-                            {items.map(({ text, ...item }, index) => (
-                                <Item key={index}>
-                                    <input
-                                        id={`swatch-group__${name}__${index}`}
-                                        ref={ref as any}
-                                        type={type}
-                                        name={name}
-                                        {...item}
-                                    />
-                                    <label htmlFor={`swatch-group__${name}__${index}`}>{text}</label>
-                                </Item>
-                            ))}
-                        </Items>
+    const hasError = !!error || !!_get(errors, name)
 
-                        <Error>{typeof error === 'object' && error.message}</Error>
-                    </React.Fragment>
-                )}
-            </Field>
-        )
-    }
-)
+    useEffect(() => {
+        if (error) {
+            setError(name, 'server', error)
+        } else {
+            clearError(name)
+        }
+    }, [error])
+
+    return (
+        <Field {...props}>
+            {loading ? (
+                <TextSwatchesSkeleton />
+            ) : (
+                <React.Fragment>
+                    {label && (
+                        <Label htmlFor={props.name} $error={hasError}>
+                            {label}
+                        </Label>
+                    )}
+
+                    <Items>
+                        {items.map(({ text, ...item }, index) => (
+                            <Item key={index}>
+                                <input
+                                    id={`swatch-group__${name}__${index}`}
+                                    name={name}
+                                    {...item}
+                                    ref={register({ ...rules })}
+                                    type={type}
+                                />
+                                <label htmlFor={`swatch-group__${name}__${index}`}>{text}</label>
+                            </Item>
+                        ))}
+                    </Items>
+
+                    <Error>
+                        <ErrorMessage name={name}>{({ message }) => message}</ErrorMessage>
+                    </Error>
+                </React.Fragment>
+            )}
+        </Field>
+    )
+}
diff --git a/src/components/Form/ThumbSwatches/ThumbSwatches.story.tsx b/src/components/Form/ThumbSwatches/ThumbSwatches.story.tsx
index 1d801d1..cca9b38 100644
--- a/src/components/Form/ThumbSwatches/ThumbSwatches.story.tsx
+++ b/src/components/Form/ThumbSwatches/ThumbSwatches.story.tsx
@@ -2,20 +2,23 @@ import React from 'react'
 import ThumbSwatches from '.'
 import { storiesOf } from '@storybook/react'
 import { number, boolean, text } from '@storybook/addon-knobs'
+import { Form } from '../Form'
 
 storiesOf('📦 Components/Form/ThumbSwatches', module).add('Default', () => (
-    <ThumbSwatches
-        loading={boolean('loading', false)}
-        name="color"
-        type="radio"
-        label={text('label', '')}
-        items={Array(number('quantity', 5)).fill({
-            image: {
-                alt: '',
-                src: require('../../../../public/images/product-item-sample.jpg'),
-            },
-        })}
-        style={{ minWidth: '40rem' }}
-        error={boolean('error', false) && { message: text('error message', '') }}
-    />
+    <Form>
+        <ThumbSwatches
+            loading={boolean('loading', false)}
+            name="color"
+            type="radio"
+            label={text('label', '')}
+            items={Array(number('quantity', 5)).fill({
+                image: {
+                    alt: '',
+                    src: require('../../../../public/images/product-item-sample.jpg'),
+                },
+            })}
+            style={{ minWidth: '40rem' }}
+            error={text('error', '')}
+        />
+    </Form>
 ))
diff --git a/src/components/Form/ThumbSwatches/ThumbSwatches.tsx b/src/components/Form/ThumbSwatches/ThumbSwatches.tsx
index 58d7eac..eef52ba 100644
--- a/src/components/Form/ThumbSwatches/ThumbSwatches.tsx
+++ b/src/components/Form/ThumbSwatches/ThumbSwatches.tsx
@@ -1,17 +1,20 @@
-import React, { HTMLAttributes } from 'react'
+import React, { HTMLAttributes, useEffect } from 'react'
 import { Component } from '../../../lib'
 import { Items, Item } from './ThumbSwatches.styled'
 
 import Image, { ImageProps } from '../../Image'
 import { Field, Label, Error } from '../Form'
 import { ThumbSwatchesSkeleton } from './ThumbSwatches.skeleton'
+import { ValidationOptions, useFormContext, ErrorMessage } from 'react-hook-form'
+import _get from 'lodash.get'
 
 export type ThumbSwatchesProps = {
     loading?: boolean
     name: string
     type?: 'radio' | 'checkbox'
     label?: string
-    error?: boolean | { message: string }
+    rules?: ValidationOptions
+    error?: string
     items: Array<
         {
             image: ImageProps
@@ -20,41 +23,62 @@ export type ThumbSwatchesProps = {
     >
 }
 
-export const ThumbSwatches: Component<ThumbSwatchesProps> = React.forwardRef(
-    ({ loading, name, type = 'radio', label, error, items = [], ...props }, ref) => {
-        return (
-            <Field {...props}>
-                {loading ? (
-                    <ThumbSwatchesSkeleton />
-                ) : (
-                    <React.Fragment>
-                        {label && (
-                            <Label htmlFor={props.name} $error={!!error}>
-                                {label}
-                            </Label>
-                        )}
-
-                        <Items>
-                            {items.map(({ image, ...item }, index) => (
-                                <Item key={index}>
-                                    <input
-                                        id={`swatch-group__${name}__${index}`}
-                                        ref={ref as any}
-                                        type={type}
-                                        name={name}
-                                        {...item}
-                                    />
-                                    <label htmlFor={`swatch-group__${name}__${index}`}>
-                                        <Image transition width={4} height={5} {...image} />
-                                    </label>
-                                </Item>
-                            ))}
-                        </Items>
-
-                        <Error>{typeof error === 'object' && error.message}</Error>
-                    </React.Fragment>
-                )}
-            </Field>
-        )
-    }
-)
+export const ThumbSwatches: Component<ThumbSwatchesProps> = ({
+    loading,
+    name,
+    type = 'radio',
+    label,
+    error,
+    rules,
+    items = [],
+    ...props
+}) => {
+    const { register, setError, clearError, errors } = useFormContext()
+
+    const hasError = !!error || !!_get(errors, name)
+
+    useEffect(() => {
+        if (error) {
+            setError(name, 'server', error)
+        } else {
+            clearError(name)
+        }
+    }, [error])
+
+    return (
+        <Field {...props}>
+            {loading ? (
+                <ThumbSwatchesSkeleton />
+            ) : (
+                <React.Fragment>
+                    {label && (
+                        <Label htmlFor={props.name} $error={hasError}>
+                            {label}
+                        </Label>
+                    )}
+
+                    <Items>
+                        {items.map(({ image, ...item }, index) => (
+                            <Item key={index}>
+                                <input
+                                    id={`swatch-group__${name}__${index}`}
+                                    ref={register({ ...rules })}
+                                    type={type}
+                                    name={name}
+                                    {...item}
+                                />
+                                <label htmlFor={`swatch-group__${name}__${index}`}>
+                                    <Image transition width={4} height={5} {...image} />
+                                </label>
+                            </Item>
+                        ))}
+                    </Items>
+
+                    <Error>
+                        <ErrorMessage name={name}>{({ message }) => message}</ErrorMessage>
+                    </Error>
+                </React.Fragment>
+            )}
+        </Field>
+    )
+}

From 21710a73bd47b0fbbbc82df628b6382cd5c2c57b Mon Sep 17 00:00:00 2001
From: "Carlos A. Cabrera" <cacabrer@adobe.com>
Date: Thu, 6 Feb 2020 11:04:06 -0600
Subject: [PATCH 13/17] new useFormFieldError hook

---
 .../ApplyCouponForm/ApplyCouponForm.tsx       |  7 +--
 .../Form/Checkbox/Checkbox.story.tsx          |  2 +-
 src/components/Form/Checkbox/Checkbox.tsx     | 39 ++++---------
 src/components/Form/Form.tsx                  | 38 ++++++++++---
 src/components/Form/Input/Input.story.tsx     |  4 +-
 src/components/Form/Input/Input.tsx           | 57 +++++++------------
 src/components/Form/Select/Select.story.tsx   |  7 ++-
 src/components/Form/Select/Select.tsx         | 41 ++++---------
 .../Form/TextSwatches/TextSwatches.story.tsx  |  2 +
 .../Form/TextSwatches/TextSwatches.tsx        | 38 ++++---------
 .../ThumbSwatches/ThumbSwatches.story.tsx     |  2 +
 .../Form/ThumbSwatches/ThumbSwatches.tsx      | 36 ++++--------
 src/components/Form/useFormFieldError.ts      | 19 +++++++
 13 files changed, 129 insertions(+), 163 deletions(-)
 create mode 100644 src/components/Form/useFormFieldError.ts

diff --git a/src/components/Checkout/ApplyCouponForm/ApplyCouponForm.tsx b/src/components/Checkout/ApplyCouponForm/ApplyCouponForm.tsx
index 7fa4cce..47bd868 100644
--- a/src/components/Checkout/ApplyCouponForm/ApplyCouponForm.tsx
+++ b/src/components/Checkout/ApplyCouponForm/ApplyCouponForm.tsx
@@ -1,7 +1,7 @@
 import React from 'react'
 import { Component } from '../../../lib'
 import { Root, Button } from './ApplyCouponForm.styled'
-import Form, { Input, InputProps, FormError } from '../../Form'
+import Form, { Input, InputProps } from '../../Form'
 import ButtonComponent, { ButtonProps } from '../../Button'
 
 export type ApplyCouponFormPayload = {
@@ -28,11 +28,8 @@ export const ApplyCouponForm: Component<ApplyCouponFormProps> = ({
 }) => {
     return (
         <Root as={Form} onSubmit={onSubmit} {...props}>
-            <Input loading={loading} rules={{ required: true }} disabled={submitting} {...field} />
-
+            <Input loading={loading} rules={{ required: true }} disabled={submitting} error={error} {...field} />
             <Button as={ButtonComponent} type="submit" loading={loading || submitting} {...submitButton} />
-
-            {error && <FormError>{error}</FormError>}
         </Root>
     )
 }
diff --git a/src/components/Form/Checkbox/Checkbox.story.tsx b/src/components/Form/Checkbox/Checkbox.story.tsx
index 1f91eac..da85418 100644
--- a/src/components/Form/Checkbox/Checkbox.story.tsx
+++ b/src/components/Form/Checkbox/Checkbox.story.tsx
@@ -10,7 +10,7 @@ storiesOf('📦 Components/Form/Checkbox', module).add('Default', () => (
             label="Label"
             name="test"
             placeholder={text('placeholder', '')}
-            error={text('error message', '')}
+            error={text('error', '')}
             type={select('type', { checkbox: 'checkbox', radio: 'radio' }, 'checkbox')}
             items={[
                 {
diff --git a/src/components/Form/Checkbox/Checkbox.tsx b/src/components/Form/Checkbox/Checkbox.tsx
index 3f2bf6b..d5e6921 100644
--- a/src/components/Form/Checkbox/Checkbox.tsx
+++ b/src/components/Form/Checkbox/Checkbox.tsx
@@ -1,19 +1,15 @@
-import React, { HTMLAttributes, useEffect } from 'react'
+import React, { HTMLAttributes } from 'react'
 import { Component } from '../../../lib'
 import { Wrapper, Input, Item, OffIcon, OnIcon, Placeholder } from './Checkbox.styled'
-import { Field, Label, Error } from '../Form'
+import { FormFieldProps, Field, Label, Error, FieldInput } from '../Form'
 
 import RadioOnIconSvg from 'remixicon/icons/System/checkbox-circle-line.svg'
 import RadioOffIconSvg from 'remixicon/icons/System/checkbox-blank-circle-line.svg'
 import CheckboxOnIconSvg from 'remixicon/icons/System/checkbox-line.svg'
 import CheckboxOffIconSvg from 'remixicon/icons/System/checkbox-blank-line.svg'
-import { ValidationOptions, useFormContext, ErrorMessage } from 'react-hook-form'
-import _get from 'lodash.get'
+import { useFormFieldError } from '../useFormFieldError'
 
-export type CheckboxProps = {
-    label?: string
-    error?: string
-    rules?: ValidationOptions
+export type CheckboxProps = FormFieldProps & {
     type?: 'checkbox' | 'radio'
     items: Array<
         {
@@ -34,23 +30,13 @@ export const Checkbox: Component<CheckboxProps> = ({
     items,
     ...props
 }) => {
-    const { register, setError, clearError, errors } = useFormContext()
-
-    const hasError = !!error || !!_get(errors, name)
-
-    useEffect(() => {
-        if (error) {
-            setError(name, 'server', error)
-        } else {
-            clearError(name)
-        }
-    }, [error])
+    const fieldError = useFormFieldError({ name, error })
 
     return (
         <fieldset>
             <Field as={as} {...props}>
                 {label && (
-                    <Label as="legend" $error={hasError}>
+                    <Label as="legend" error={!!fieldError}>
                         {label}
                     </Label>
                 )}
@@ -60,12 +46,13 @@ export const Checkbox: Component<CheckboxProps> = ({
                 <Wrapper>
                     {items.map(({ text, ...item }, index) => (
                         <Item key={index}>
-                            <Input
-                                key={props.defaultValue as string} // update field when defaultValue changes
+                            <FieldInput
+                                as={Input}
                                 type={type}
-                                {...item}
                                 name={name}
-                                ref={register({ ...rules })}
+                                rules={rules}
+                                error={!!fieldError}
+                                {...item}
                             />
                             <OffIcon as={type === 'radio' ? RadioOffIconSvg : CheckboxOffIconSvg} />
                             <OnIcon as={type === 'radio' ? RadioOnIconSvg : CheckboxOnIconSvg} />
@@ -74,9 +61,7 @@ export const Checkbox: Component<CheckboxProps> = ({
                     ))}
                 </Wrapper>
 
-                <Error>
-                    <ErrorMessage name={name}>{({ message }) => message}</ErrorMessage>
-                </Error>
+                <Error>{fieldError?.message}</Error>
             </Field>
         </fieldset>
     )
diff --git a/src/components/Form/Form.tsx b/src/components/Form/Form.tsx
index 9eb9243..61fae1f 100644
--- a/src/components/Form/Form.tsx
+++ b/src/components/Form/Form.tsx
@@ -8,7 +8,9 @@ import {
     Input as InputRoot,
     FormError as FormErrorRoot,
 } from './Form.styled'
-import { FormContext, useForm } from 'react-hook-form'
+
+import { FormContext, useForm, useFormContext, ValidationOptions } from 'react-hook-form'
+import _get from 'lodash.get'
 
 /** Form */
 export type FormProps = {}
@@ -25,6 +27,13 @@ export const Form: Component<FormProps> = ({ children, onSubmit, ...props }) =>
     )
 }
 
+export type FormFieldProps = {
+    name: string
+    label?: string
+    error?: string
+    rules?: ValidationOptions
+}
+
 /** Field */
 export type FieldProps = {}
 
@@ -33,24 +42,35 @@ export const Field: Component<FieldProps> = ({ children, ...props }) => {
 }
 
 /** Label */
-export type LabelProps = {}
+export type LabelProps = { error?: boolean }
 
-export const Label: Component<LabelProps> = ({ children, ...props }) => {
-    return <LabelRoot {...props}>{children}</LabelRoot>
+export const Label: Component<LabelProps> = ({ children, error = false, ...props }) => {
+    return (
+        <LabelRoot $error={error} {...props}>
+            {children}
+        </LabelRoot>
+    )
 }
 
 /** FieldInput */
-export type FieldInputProps = {}
+export type FieldInputProps = { rules?: ValidationOptions; error?: boolean }
+
+export const FieldInput: Component<FieldInputProps> = ({ children, rules, error = false, ...props }) => {
+    const { register } = useFormContext()
 
-export const FieldInput: Component<FieldInputProps> = React.forwardRef(({ children, ...props }, ref: any) => {
     return (
-        <InputRoot ref={ref} {...props}>
+        <InputRoot
+            $error={error}
+            key={props.defaultValue as string} // update field when defaultValue changes
+            {...props}
+            ref={register({ ...rules })}
+        >
             {children}
         </InputRoot>
     )
-})
+}
 
-/** Error */
+/** Field Error */
 export type ErrorProps = {}
 
 export const Error: Component<ErrorProps> = ({ children, ...props }) => {
diff --git a/src/components/Form/Input/Input.story.tsx b/src/components/Form/Input/Input.story.tsx
index 3842552..f87abf5 100644
--- a/src/components/Form/Input/Input.story.tsx
+++ b/src/components/Form/Input/Input.story.tsx
@@ -3,6 +3,7 @@ import Input from '.'
 import { storiesOf } from '@storybook/react'
 import { text, boolean, object } from '@storybook/addon-knobs'
 import { Form } from '../Form'
+import { action } from '@storybook/addon-actions'
 
 storiesOf('📦 Components/Form/Input', module).add('Default', () => (
     <Form>
@@ -11,8 +12,9 @@ storiesOf('📦 Components/Form/Input', module).add('Default', () => (
             loading={boolean('loading', false)}
             label="Label"
             placeholder={text('placeholder', '')}
-            error={text('error message', '')}
+            error={text('error', '')}
             rules={object('rules', { required: true })}
+            onChange={action('onChange')}
         />
     </Form>
 ))
diff --git a/src/components/Form/Input/Input.tsx b/src/components/Form/Input/Input.tsx
index 480c506..3d51178 100644
--- a/src/components/Form/Input/Input.tsx
+++ b/src/components/Form/Input/Input.tsx
@@ -1,18 +1,13 @@
-import React, { InputHTMLAttributes, useState, useEffect, useCallback, useMemo, ChangeEvent, FocusEvent } from 'react'
+import React, { useState, useCallback, useMemo, ChangeEvent, FocusEvent } from 'react'
 import { Component } from '../../../lib'
 import { Label as LabelRoot } from './Input.styled'
-import { Field, FieldInput, Label, Error } from '../Form'
+import { FormFieldProps, Field, FieldInput, Label, Error } from '../Form'
 import { InputSkeleton } from './Input.skeleton'
-import { ValidationOptions, useFormContext, ErrorMessage } from 'react-hook-form'
-import _get from 'lodash.get'
+import { useFormFieldError } from '../useFormFieldError'
 
-export type InputProps = {
-    label: string
+export type InputProps = FormFieldProps & {
     loading?: boolean
-    name: string
-    rules?: ValidationOptions
-    error?: string
-} & InputHTMLAttributes<HTMLInputElement>
+}
 
 export const Input: Component<InputProps> = ({
     as,
@@ -26,32 +21,22 @@ export const Input: Component<InputProps> = ({
     onFocus,
     ...props
 }) => {
-    const { register, setError, clearError, errors } = useFormContext()
-
-    const hasError = !!error || !!_get(errors, name)
-
-    useEffect(() => {
-        if (error) {
-            setError(name, 'server', error)
-        } else {
-            clearError(name)
-        }
-    }, [error])
+    const fieldError = useFormFieldError({ name, error })
 
     const defaultActive = useMemo(() => {
         const { defaultValue, value = defaultValue, placeholder } = props
-        return !!value || !!placeholder || hasError
-    }, [props.value, props.defaultValue, props.placeholder, hasError])
+        return !!value || !!placeholder || !!fieldError
+    }, [props.value, props.defaultValue, props.placeholder, !!fieldError])
 
     const [active, setActive] = useState<boolean>(defaultActive)
 
     const handleOnChange = useCallback(
         (event: ChangeEvent<HTMLInputElement>) => {
             const { value, placeholder } = event.currentTarget
-            setActive(!!value || !!placeholder || hasError)
+            setActive(!!value || !!placeholder || !!fieldError)
             if (onChange) onChange(event)
         },
-        [hasError, onChange]
+        [!!fieldError, onChange]
     )
 
     const handleOnFocus = useCallback(
@@ -65,16 +50,21 @@ export const Input: Component<InputProps> = ({
     const handleOnBlur = useCallback(
         (event: FocusEvent<HTMLInputElement>) => {
             const { value, placeholder } = event.currentTarget
-            setActive(!!value || !!placeholder || !!hasError)
+            setActive(!!value || !!placeholder || !!fieldError)
             if (onBlur) onBlur(event)
         },
-        [hasError, onBlur]
+        [!!fieldError, onBlur]
     )
 
     return (
         <Field as={as}>
             {label && (
-                <Label as={LabelRoot} htmlFor={name} $active={loading || defaultActive || active} $error={hasError}>
+                <Label
+                    as={LabelRoot}
+                    htmlFor={name}
+                    error={!!fieldError}
+                    $active={loading || defaultActive || active || !!fieldError}
+                >
                     {label}
                 </Label>
             )}
@@ -83,20 +73,17 @@ export const Input: Component<InputProps> = ({
             ) : (
                 <React.Fragment>
                     <FieldInput
-                        key={props.defaultValue as string} // update field when defaultValue changes
-                        $error={hasError}
                         type="text"
                         onFocus={handleOnFocus}
                         onChange={handleOnChange}
                         onBlur={handleOnBlur}
-                        {...props}
                         name={name}
-                        ref={register({ ...rules })}
+                        error={!!fieldError}
+                        rules={rules}
+                        {...props}
                     />
 
-                    <Error>
-                        <ErrorMessage name={name}>{({ message }) => message}</ErrorMessage>
-                    </Error>
+                    <Error>{fieldError?.message}</Error>
                 </React.Fragment>
             )}
         </Field>
diff --git a/src/components/Form/Select/Select.story.tsx b/src/components/Form/Select/Select.story.tsx
index 119c8e8..16c3003 100644
--- a/src/components/Form/Select/Select.story.tsx
+++ b/src/components/Form/Select/Select.story.tsx
@@ -1,8 +1,9 @@
 import React from 'react'
 import Select from '../Select'
 import { storiesOf } from '@storybook/react'
-import { text, boolean, object } from '@storybook/addon-knobs'
+import { text, boolean } from '@storybook/addon-knobs'
 import { Form } from '../Form'
+import { action } from '@storybook/addon-actions'
 
 storiesOf('📦 Components/Form/Select', module).add('Default', () => (
     <Form>
@@ -10,15 +11,15 @@ storiesOf('📦 Components/Form/Select', module).add('Default', () => (
             name="test"
             loading={boolean('loading', false)}
             label="Label"
-            error={text('error message', '')}
+            error={text('error', '')}
             defaultValue="2"
+            onChange={action('onChange')}
             items={[
                 { text: 'One', value: '1' },
                 { text: 'Two', value: '2' },
                 { text: 'Three', value: '3' },
                 { text: 'Four', value: '4' },
             ]}
-            rules={object('rules', { required: true })}
         />
     </Form>
 ))
diff --git a/src/components/Form/Select/Select.tsx b/src/components/Form/Select/Select.tsx
index 43acf35..9fbb27d 100644
--- a/src/components/Form/Select/Select.tsx
+++ b/src/components/Form/Select/Select.tsx
@@ -1,37 +1,22 @@
-import React, { SelectHTMLAttributes, OptionHTMLAttributes, useEffect } from 'react'
+import React, { OptionHTMLAttributes } from 'react'
 import { Component } from '../../../lib'
 import { Select as SelectRoot, Wrapper } from './Select.styled'
-import { Field, Label, FieldInput, Error } from '../Form'
+import { FormFieldProps, Field, Label, FieldInput, Error } from '../Form'
 import { SelectSkeleton } from './Select.skeleton'
-import { ValidationOptions, useFormContext, ErrorMessage } from 'react-hook-form'
-import _get from 'lodash.get'
+import { useFormFieldError } from '../useFormFieldError'
 
-export type SelectProps = {
-    label?: string
+export type SelectProps = FormFieldProps & {
     items: Array<{ text: string } & OptionHTMLAttributes<HTMLOptionElement>>
     loading?: boolean
-    name: string
-    rules?: ValidationOptions
-    error?: string
-} & SelectHTMLAttributes<HTMLSelectElement>
+}
 
 export const Select: Component<SelectProps> = ({ as, error, label, loading, name, rules, items, ...props }) => {
-    const { register, setError, clearError, errors } = useFormContext()
-
-    const hasError = !!error || !!_get(errors, name)
-
-    useEffect(() => {
-        if (error) {
-            setError(name, 'server', error)
-        } else {
-            clearError(name)
-        }
-    }, [error])
+    const fieldError = useFormFieldError({ name, error })
 
     return (
         <Field as={as}>
             {label && (
-                <Label htmlFor={props.name} $error={hasError}>
+                <Label htmlFor={name} error={!!fieldError}>
                     {label}
                 </Label>
             )}
@@ -43,11 +28,11 @@ export const Select: Component<SelectProps> = ({ as, error, label, loading, name
                     <Wrapper $disabled={props.disabled}>
                         <FieldInput
                             as={SelectRoot}
-                            $error={hasError}
-                            disabled={!items}
-                            {...props}
+                            disabled={items?.length === 0}
                             name={name}
-                            ref={register({ ...rules })}
+                            rules={rules}
+                            error={!!fieldError}
+                            {...props}
                         >
                             {items &&
                                 items.map(({ text, ...option }, index) => (
@@ -58,9 +43,7 @@ export const Select: Component<SelectProps> = ({ as, error, label, loading, name
                         </FieldInput>
                     </Wrapper>
 
-                    <Error>
-                        <ErrorMessage name={name}>{({ message }) => message}</ErrorMessage>
-                    </Error>
+                    <Error>{fieldError?.message}</Error>
                 </React.Fragment>
             )}
         </Field>
diff --git a/src/components/Form/TextSwatches/TextSwatches.story.tsx b/src/components/Form/TextSwatches/TextSwatches.story.tsx
index 6149564..64f4a31 100644
--- a/src/components/Form/TextSwatches/TextSwatches.story.tsx
+++ b/src/components/Form/TextSwatches/TextSwatches.story.tsx
@@ -3,6 +3,7 @@ import TextSwatches from '../TextSwatches'
 import { storiesOf } from '@storybook/react'
 import { object, boolean, text } from '@storybook/addon-knobs'
 import { Form } from '../Form'
+import { action } from '@storybook/addon-actions'
 
 storiesOf('📦 Components/Form/TextSwatches', module).add('Default', () => (
     <Form>
@@ -18,6 +19,7 @@ storiesOf('📦 Components/Form/TextSwatches', module).add('Default', () => (
                 { text: 'XL' },
                 { text: 'S' },
             ])}
+            onChange={action('onChange')}
             error={text('error', '')}
         />
     </Form>
diff --git a/src/components/Form/TextSwatches/TextSwatches.tsx b/src/components/Form/TextSwatches/TextSwatches.tsx
index 95e10ac..f73a6dc 100644
--- a/src/components/Form/TextSwatches/TextSwatches.tsx
+++ b/src/components/Form/TextSwatches/TextSwatches.tsx
@@ -1,17 +1,12 @@
-import React, { HTMLAttributes, useEffect } from 'react'
+import React, { HTMLAttributes } from 'react'
 import { Component } from '../../../lib'
 import { Items, Item } from './TextSwatches.styled'
-import { Field, Label, Error } from '../Form'
+import { FormFieldProps, Field, Label, FieldInput, Error } from '../Form'
 import { TextSwatchesSkeleton } from './TextSwatches.skeleton'
-import { ValidationOptions, useFormContext, ErrorMessage } from 'react-hook-form'
-import _get from 'lodash.get'
+import { useFormFieldError } from '../useFormFieldError'
 
-export type TextSwatchesProps = {
+export type TextSwatchesProps = FormFieldProps & {
     loading?: boolean
-    error?: string
-    rules?: ValidationOptions
-    label?: string
-    name: string
     type?: 'radio' | 'checkbox'
     items: Array<
         {
@@ -31,17 +26,7 @@ export const TextSwatches: Component<TextSwatchesProps> = ({
     items = [],
     ...props
 }) => {
-    const { register, setError, clearError, errors } = useFormContext()
-
-    const hasError = !!error || !!_get(errors, name)
-
-    useEffect(() => {
-        if (error) {
-            setError(name, 'server', error)
-        } else {
-            clearError(name)
-        }
-    }, [error])
+    const fieldError = useFormFieldError({ name, error })
 
     return (
         <Field {...props}>
@@ -50,7 +35,7 @@ export const TextSwatches: Component<TextSwatchesProps> = ({
             ) : (
                 <React.Fragment>
                     {label && (
-                        <Label htmlFor={props.name} $error={hasError}>
+                        <Label htmlFor={props.name} error={!!fieldError}>
                             {label}
                         </Label>
                     )}
@@ -58,21 +43,20 @@ export const TextSwatches: Component<TextSwatchesProps> = ({
                     <Items>
                         {items.map(({ text, ...item }, index) => (
                             <Item key={index}>
-                                <input
+                                <FieldInput
                                     id={`swatch-group__${name}__${index}`}
+                                    rules={rules}
                                     name={name}
-                                    {...item}
-                                    ref={register({ ...rules })}
                                     type={type}
+                                    error={!!fieldError}
+                                    {...item}
                                 />
                                 <label htmlFor={`swatch-group__${name}__${index}`}>{text}</label>
                             </Item>
                         ))}
                     </Items>
 
-                    <Error>
-                        <ErrorMessage name={name}>{({ message }) => message}</ErrorMessage>
-                    </Error>
+                    <Error>{fieldError?.message}</Error>
                 </React.Fragment>
             )}
         </Field>
diff --git a/src/components/Form/ThumbSwatches/ThumbSwatches.story.tsx b/src/components/Form/ThumbSwatches/ThumbSwatches.story.tsx
index cca9b38..bb9c4c9 100644
--- a/src/components/Form/ThumbSwatches/ThumbSwatches.story.tsx
+++ b/src/components/Form/ThumbSwatches/ThumbSwatches.story.tsx
@@ -3,6 +3,7 @@ import ThumbSwatches from '.'
 import { storiesOf } from '@storybook/react'
 import { number, boolean, text } from '@storybook/addon-knobs'
 import { Form } from '../Form'
+import { action } from '@storybook/addon-actions'
 
 storiesOf('📦 Components/Form/ThumbSwatches', module).add('Default', () => (
     <Form>
@@ -19,6 +20,7 @@ storiesOf('📦 Components/Form/ThumbSwatches', module).add('Default', () => (
             })}
             style={{ minWidth: '40rem' }}
             error={text('error', '')}
+            onChange={action('onChange')}
         />
     </Form>
 ))
diff --git a/src/components/Form/ThumbSwatches/ThumbSwatches.tsx b/src/components/Form/ThumbSwatches/ThumbSwatches.tsx
index eef52ba..db1e28d 100644
--- a/src/components/Form/ThumbSwatches/ThumbSwatches.tsx
+++ b/src/components/Form/ThumbSwatches/ThumbSwatches.tsx
@@ -1,20 +1,15 @@
-import React, { HTMLAttributes, useEffect } from 'react'
+import React, { HTMLAttributes } from 'react'
 import { Component } from '../../../lib'
 import { Items, Item } from './ThumbSwatches.styled'
 
 import Image, { ImageProps } from '../../Image'
-import { Field, Label, Error } from '../Form'
+import { FormFieldProps, Field, Label, FieldInput, Error } from '../Form'
 import { ThumbSwatchesSkeleton } from './ThumbSwatches.skeleton'
-import { ValidationOptions, useFormContext, ErrorMessage } from 'react-hook-form'
-import _get from 'lodash.get'
+import { useFormFieldError } from '../useFormFieldError'
 
-export type ThumbSwatchesProps = {
+export type ThumbSwatchesProps = FormFieldProps & {
     loading?: boolean
-    name: string
     type?: 'radio' | 'checkbox'
-    label?: string
-    rules?: ValidationOptions
-    error?: string
     items: Array<
         {
             image: ImageProps
@@ -33,17 +28,7 @@ export const ThumbSwatches: Component<ThumbSwatchesProps> = ({
     items = [],
     ...props
 }) => {
-    const { register, setError, clearError, errors } = useFormContext()
-
-    const hasError = !!error || !!_get(errors, name)
-
-    useEffect(() => {
-        if (error) {
-            setError(name, 'server', error)
-        } else {
-            clearError(name)
-        }
-    }, [error])
+    const fieldError = useFormFieldError({ name, error })
 
     return (
         <Field {...props}>
@@ -52,7 +37,7 @@ export const ThumbSwatches: Component<ThumbSwatchesProps> = ({
             ) : (
                 <React.Fragment>
                     {label && (
-                        <Label htmlFor={props.name} $error={hasError}>
+                        <Label htmlFor={props.name} error={!!fieldError}>
                             {label}
                         </Label>
                     )}
@@ -60,11 +45,12 @@ export const ThumbSwatches: Component<ThumbSwatchesProps> = ({
                     <Items>
                         {items.map(({ image, ...item }, index) => (
                             <Item key={index}>
-                                <input
+                                <FieldInput
                                     id={`swatch-group__${name}__${index}`}
-                                    ref={register({ ...rules })}
                                     type={type}
                                     name={name}
+                                    rules={rules}
+                                    error={!!fieldError}
                                     {...item}
                                 />
                                 <label htmlFor={`swatch-group__${name}__${index}`}>
@@ -74,9 +60,7 @@ export const ThumbSwatches: Component<ThumbSwatchesProps> = ({
                         ))}
                     </Items>
 
-                    <Error>
-                        <ErrorMessage name={name}>{({ message }) => message}</ErrorMessage>
-                    </Error>
+                    <Error>{fieldError?.message}</Error>
                 </React.Fragment>
             )}
         </Field>
diff --git a/src/components/Form/useFormFieldError.ts b/src/components/Form/useFormFieldError.ts
new file mode 100644
index 0000000..23e5d2a
--- /dev/null
+++ b/src/components/Form/useFormFieldError.ts
@@ -0,0 +1,19 @@
+import { useEffect } from 'react'
+import { useFormContext, FieldError } from 'react-hook-form'
+import _get from 'lodash.get'
+
+export const useFormFieldError = (props: { name: string; error?: string }) => {
+    const { name, error: _error } = props
+
+    const { setError, clearError, errors } = useFormContext()
+
+    useEffect(() => {
+        if (_error) {
+            setError(name, 'server', _error)
+        } else {
+            clearError(name)
+        }
+    }, [_error])
+
+    return _get(errors, name) as FieldError
+}

From d42e2747f4d286f0e23366286795a5bde694ca8b Mon Sep 17 00:00:00 2001
From: "Carlos A. Cabrera" <cacabrer@adobe.com>
Date: Thu, 6 Feb 2020 14:47:21 -0600
Subject: [PATCH 14/17] Product page, new Form hooks

---
 src/components/Form/Form.tsx             |  26 +++++-
 src/lib/index.ts                         |  14 ---
 src/templates/Product/Product.story.tsx  |  12 ++-
 src/templates/Product/Product.styled.tsx |  42 ++++-----
 src/templates/Product/Product.tsx        | 112 +++++++++--------------
 5 files changed, 92 insertions(+), 114 deletions(-)

diff --git a/src/components/Form/Form.tsx b/src/components/Form/Form.tsx
index 61fae1f..2111fd2 100644
--- a/src/components/Form/Form.tsx
+++ b/src/components/Form/Form.tsx
@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useCallback, useEffect } from 'react'
 import { Component } from '../../lib'
 import {
     Root,
@@ -9,18 +9,34 @@ import {
     FormError as FormErrorRoot,
 } from './Form.styled'
 
-import { FormContext, useForm, useFormContext, ValidationOptions } from 'react-hook-form'
+import { FormContext, useForm, useFormContext, ValidationOptions, FieldErrors } from 'react-hook-form'
 import _get from 'lodash.get'
 
 /** Form */
-export type FormProps = {}
+export type FormProps = {
+    onValues?: (values: any) => any
+    onErrors?: (values: FieldErrors<any>) => any
+}
 
-export const Form: Component<FormProps> = ({ children, onSubmit, ...props }) => {
+export const Form: Component<FormProps> = ({ children, onSubmit, onErrors, onValues, onChange, ...props }) => {
     const form = useForm()
 
+    const handleOnValueChanges = useCallback(
+        e => {
+            const values = form.getValues({ nest: true })
+            if (onValues) onValues(values)
+            if (onChange) onChange(e)
+        },
+        [onChange, onValues]
+    )
+
+    useEffect(() => {
+        if (onErrors) onErrors(form.errors)
+    }, [onErrors, Object.entries(form.errors).toString()])
+
     return (
         <FormContext {...form}>
-            <Root onSubmit={form.handleSubmit(onSubmit)} {...props}>
+            <Root onSubmit={form.handleSubmit(onSubmit)} onChange={handleOnValueChanges} {...props}>
                 {children}
             </Root>
         </FormContext>
diff --git a/src/lib/index.ts b/src/lib/index.ts
index f6679ad..6eb92da 100644
--- a/src/lib/index.ts
+++ b/src/lib/index.ts
@@ -56,17 +56,3 @@ export const toPascalCase = (string: string) => {
     const camelCased = toCamelCase(string)
     return camelCased.charAt(0).toUpperCase() + camelCased.slice(1)
 }
-
-/**
- * Get from Deep Object
- */
-
-export const getfromObject = (property: string, object: { [key: string]: any }): any => {
-    console.warn('getfromObject Deprecated')
-
-    const entry = property.split('.').reduce((result, key) => {
-        return result[key] || {}
-    }, object)
-
-    return Object.keys(entry).length === 0 ? undefined : entry
-}
diff --git a/src/templates/Product/Product.story.tsx b/src/templates/Product/Product.story.tsx
index a436cd0..a445710 100644
--- a/src/templates/Product/Product.story.tsx
+++ b/src/templates/Product/Product.story.tsx
@@ -55,11 +55,13 @@ const ProductMockData = (): ProductProps => ({
     options: [
         {
             type: 'thumb',
-            required: true,
-            label: 'Color',
             swatches: {
+                label: 'Color',
                 name: 'color',
                 type: 'radio',
+                rules: {
+                    required: true,
+                },
                 items: [
                     {
                         defaultValue: '1',
@@ -94,9 +96,11 @@ const ProductMockData = (): ProductProps => ({
         },
         {
             type: 'text',
-            required: true,
-            label: 'Size',
             swatches: {
+                rules: {
+                    required: true,
+                },
+                label: 'Size',
                 name: 'size',
                 items: [
                     { text: 'XS', disabled: true, defaultValue: '1' },
diff --git a/src/templates/Product/Product.styled.tsx b/src/templates/Product/Product.styled.tsx
index f45fbce..f57b746 100644
--- a/src/templates/Product/Product.styled.tsx
+++ b/src/templates/Product/Product.styled.tsx
@@ -160,27 +160,27 @@ export const Field = styled.div`
     grid-gap: 1.4rem;
 `
 
-export const Label = styled.div<{ $error?: boolean }>`
-    align-items: center;
-    display: grid;
-    font-size: 1.6rem;
-    font-weight: 600;
-    grid-auto-columns: max-content;
-    grid-auto-flow: column;
-    grid-gap: 0.5rem;
-    height: 1.2em;
-    transition: color 305ms ease;
-
-    ${props =>
-        props.$error &&
-        `
-            color: ${props.theme.colors.onError};
-            & > svg {
-                fill: currentColor;
-                width: 1.4em;
-            }
-        `};
-`
+// export const Label = styled.div<{ $error?: boolean }>`
+//     align-items: center;
+//     display: grid;
+//     font-size: 1.6rem;
+//     font-weight: 600;
+//     grid-auto-columns: max-content;
+//     grid-auto-flow: column;
+//     grid-gap: 0.5rem;
+//     height: 1.2em;
+//     transition: color 305ms ease;
+
+//     ${props =>
+//         props.$error &&
+//         `
+//             color: ${props.theme.colors.onError};
+//             & > svg {
+//                 fill: currentColor;
+//                 width: 1.4em;
+//             }
+//         `};
+// `
 
 export const Title = styled.h2`
     font-family: ${props => props.theme.typography.heading.family};
diff --git a/src/templates/Product/Product.tsx b/src/templates/Product/Product.tsx
index 54b9538..55e9308 100644
--- a/src/templates/Product/Product.tsx
+++ b/src/templates/Product/Product.tsx
@@ -1,5 +1,5 @@
-import React, { useState, useRef, useCallback, useEffect, MutableRefObject } from 'react'
-import { Component, Props, getfromObject } from '../../lib'
+import React, { useState, useRef, useCallback, MutableRefObject } from 'react'
+import { Component, Props } from '../../lib'
 import {
     Root,
     Wrapper,
@@ -11,7 +11,6 @@ import {
     InfoInnerWrapper,
     InfoOptions,
     Field,
-    Label,
     Info,
     Header,
     Title,
@@ -22,8 +21,6 @@ import {
     ThumbSwatchesWrapper,
 } from './Product.styled'
 
-import { useForm } from 'react-hook-form'
-
 import Carousel from '../../components/Carousel'
 import Image, { ImageProps } from '../../components/Image'
 import Price, { PriceProps } from '../../components/Price'
@@ -33,6 +30,7 @@ import TextSwatches, { TextSwatchesProps } from '../../components/Form/TextSwatc
 import ThumbSwatches, { ThumbSwatchesProps } from '../../components/Form/ThumbSwatches'
 import { ProductDetailsSkeleton } from './ProductDetails.skeleton'
 import { ProductImageSkeleton } from './ProductImage.skeleton'
+import Form, { Input } from '../../components/Form'
 
 export type ProductProps = {
     loading?: boolean
@@ -44,21 +42,16 @@ export type ProductProps = {
     price: PriceProps
 
     options?: Array<
-        {
-            _id?: string | number
-            label?: string
-            required?: boolean
-            error?: string | boolean
-        } & (
-            | {
-                  type: 'text'
-                  swatches: TextSwatchesProps
-              }
-            | {
-                  type: 'thumb'
-                  swatches: ThumbSwatchesProps
-              }
-        )
+        | {
+              _id?: string | number
+              type: 'text'
+              swatches: TextSwatchesProps
+          }
+        | {
+              _id?: string | number
+              type: 'thumb'
+              swatches: ThumbSwatchesProps
+          }
     >
 
     sku: Props<{
@@ -88,27 +81,24 @@ export const Product: Component<ProductProps> = ({
     onChange = () => {},
     ...props
 }) => {
-    const { register, handleSubmit, errors, setError, getValues } = useForm()
-
     const [scrollerRef, setScrollerRef] = useState<MutableRefObject<Element>>()
-    const infoRef = useRef<HTMLElement>(null)
 
-    const handleOnValueChanges = useCallback(() => {
-        const values = getValues({ nest: true })
-        onChange(values)
-    }, [onChange])
+    const infoRef = useRef<HTMLDivElement>(null)
 
     /**
      * Scroll to top if there are any errors
      */
-    useEffect(() => {
-        if (Object.entries(errors).length > 0 && infoRef.current) {
-            infoRef.current.scrollIntoView({ behavior: 'smooth' })
-        }
-    }, [errors])
+    const handleOnErrors = useCallback(
+        errors => {
+            if (Object.entries(errors).length > 0 && infoRef.current) {
+                infoRef.current.scrollIntoView({ behavior: 'smooth' })
+            }
+        },
+        [infoRef.current]
+    )
 
     return (
-        <Root as="form" {...props} onSubmit={handleSubmit(onAddToCart)} onChange={handleOnValueChanges}>
+        <Root as={Form} onSubmit={onAddToCart} onValues={onChange} onErrors={handleOnErrors} {...props}>
             <Wrapper>
                 <Images>
                     {/* Mobile Gallery Carousel */}
@@ -173,42 +163,24 @@ export const Product: Component<ProductProps> = ({
 
                                     {options && (
                                         <InfoOptions>
-                                            {options.map(
-                                                ({ _id, error: _error, type, label, required, swatches }, index) => {
-                                                    const { name } = swatches
-                                                    const error = getfromObject(name, errors)
-
-                                                    if (_error) {
-                                                        setError(
-                                                            name,
-                                                            'error',
-                                                            typeof _error === 'string' ? _error : ''
-                                                        )
-                                                    }
-
-                                                    return (
-                                                        <fieldset key={_id || index}>
-                                                            <Field>
-                                                                {label && <Label $error={!!error}>{label}</Label>}
-                                                                {type === 'text' && (
-                                                                    <TextSwatches
-                                                                        ref={register({ required })}
-                                                                        {...(swatches as TextSwatchesProps)}
+                                            {options.map(({ _id, type, swatches }, index) => {
+                                                return (
+                                                    <fieldset key={_id || index}>
+                                                        <Field>
+                                                            {type === 'text' && (
+                                                                <TextSwatches {...(swatches as TextSwatchesProps)} />
+                                                            )}
+                                                            {type === 'thumb' && (
+                                                                <ThumbSwatchesWrapper>
+                                                                    <ThumbSwatches
+                                                                        {...(swatches as ThumbSwatchesProps)}
                                                                     />
-                                                                )}
-                                                                {type === 'thumb' && (
-                                                                    <ThumbSwatchesWrapper>
-                                                                        <ThumbSwatches
-                                                                            ref={register({ required })}
-                                                                            {...(swatches as ThumbSwatchesProps)}
-                                                                        />
-                                                                    </ThumbSwatchesWrapper>
-                                                                )}
-                                                            </Field>
-                                                        </fieldset>
-                                                    )
-                                                }
-                                            )}
+                                                                </ThumbSwatchesWrapper>
+                                                            )}
+                                                        </Field>
+                                                    </fieldset>
+                                                )
+                                            })}
                                         </InfoOptions>
                                     )}
 
@@ -216,9 +188,9 @@ export const Product: Component<ProductProps> = ({
                                         <Button {...addToCartButton} />
                                     </Buttons>
 
-                                    <input type="hidden" name="quantity" value={1} ref={register({ required: true })} />
+                                    <Input type="hidden" name="quantity" value={1} rules={{ required: true }} />
 
-                                    <Description dangerouslySetInnerHTML={{ __html: description }} />
+                                    {description && <Description dangerouslySetInnerHTML={{ __html: description }} />}
                                 </React.Fragment>
                             )}
                         </Info>

From 1574a3fde1684aea4f64d66669646451fdcc8572 Mon Sep 17 00:00:00 2001
From: "Carlos A. Cabrera" <cacabrer@adobe.com>
Date: Tue, 11 Feb 2020 11:14:34 -0600
Subject: [PATCH 15/17] Fixed types and refactored forms

---
 .../CartSummary/CartSummary.story.tsx         |  7 +++---
 src/components/CartSummary/CartSummary.tsx    |  4 ++--
 .../ApplyCouponForm/ApplyCouponForm.tsx       |  5 ++--
 .../ContactInfoForm/ContactInfoForm.tsx       |  4 ++--
 .../PaymentMethodForm/PaymentMethodForm.tsx   |  4 ++--
 .../PlaceOrderForm/PlaceOrderForm.tsx         |  4 ++--
 .../ShippingMethodForm/ShippingMethodForm.tsx |  5 ++--
 src/components/Form/Form.tsx                  | 24 ++++++++-----------
 8 files changed, 26 insertions(+), 31 deletions(-)

diff --git a/src/components/CartSummary/CartSummary.story.tsx b/src/components/CartSummary/CartSummary.story.tsx
index 290689e..02206eb 100644
--- a/src/components/CartSummary/CartSummary.story.tsx
+++ b/src/components/CartSummary/CartSummary.story.tsx
@@ -1,6 +1,7 @@
 import React from 'react'
 import CartSummary from './'
 import { storiesOf } from '@storybook/react'
+import { action } from '@storybook/addon-actions'
 
 storiesOf('📦 Components/CartSummary', module).add('Default', () => (
     <CartSummary
@@ -27,16 +28,16 @@ storiesOf('📦 Components/CartSummary', module).add('Default', () => (
         ]}
         coupons={{
             label: 'Apply Gift Card or Discount Code',
-            fields: [
+            items: [
                 {
                     field: { label: 'Gift Card', name: 'giftCardCode' },
                     submitButton: { text: 'Apply' },
-                    onSubmit: () => {},
+                    onSubmit: action('onSubmit'),
                 },
                 {
                     field: { label: 'Discount Code', name: 'discountCode' },
                     submitButton: { text: 'Apply' },
-                    onSubmit: () => {},
+                    onSubmit: action('onSubmit'),
                 },
             ],
         }}
diff --git a/src/components/CartSummary/CartSummary.tsx b/src/components/CartSummary/CartSummary.tsx
index bff7179..3156fb7 100644
--- a/src/components/CartSummary/CartSummary.tsx
+++ b/src/components/CartSummary/CartSummary.tsx
@@ -17,7 +17,7 @@ export type CartSummaryProps = {
     coupons?: {
         label: string
         open?: boolean
-        fields: ApplyCouponFormProps[]
+        items: ApplyCouponFormProps[]
     }
 }
 
@@ -29,7 +29,7 @@ export const CartSummary: Component<CartSummaryProps> = ({ title, prices, coupon
             {coupons && (
                 <Accordion defaultSelected={coupons.open ? 0 : -1}>
                     <Accordion.Item label={coupons.label}>
-                        {coupons.fields.map((coupon, index) => (
+                        {coupons.items.map((coupon, index) => (
                             <ApplyCouponForm key={index} {...coupon} />
                         ))}
                     </Accordion.Item>
diff --git a/src/components/Checkout/ApplyCouponForm/ApplyCouponForm.tsx b/src/components/Checkout/ApplyCouponForm/ApplyCouponForm.tsx
index 47bd868..3f8c8e5 100644
--- a/src/components/Checkout/ApplyCouponForm/ApplyCouponForm.tsx
+++ b/src/components/Checkout/ApplyCouponForm/ApplyCouponForm.tsx
@@ -1,17 +1,16 @@
 import React from 'react'
 import { Component } from '../../../lib'
 import { Root, Button } from './ApplyCouponForm.styled'
-import Form, { Input, InputProps } from '../../Form'
+import Form, { FormProps, Input, InputProps } from '../../Form'
 import ButtonComponent, { ButtonProps } from '../../Button'
 
 export type ApplyCouponFormPayload = {
     [code: string]: string
 }
 
-export type ApplyCouponFormProps = {
+export type ApplyCouponFormProps = FormProps<ApplyCouponFormPayload> & {
     field: InputProps
     loading?: boolean
-    onSubmit: (payload: ApplyCouponFormPayload) => any
     submitting?: boolean
     submitButton: ButtonProps
     error?: string
diff --git a/src/components/Checkout/ContactInfoForm/ContactInfoForm.tsx b/src/components/Checkout/ContactInfoForm/ContactInfoForm.tsx
index 198b59d..d5833d9 100644
--- a/src/components/Checkout/ContactInfoForm/ContactInfoForm.tsx
+++ b/src/components/Checkout/ContactInfoForm/ContactInfoForm.tsx
@@ -15,7 +15,7 @@ import {
     PhoneNumber,
 } from './ContactInfoForm.styled'
 
-import Form, { Input, InputProps, Select, SelectProps, FormError, patterns } from '../../Form'
+import Form, { FormProps, Input, InputProps, Select, SelectProps, FormError, patterns } from '../../Form'
 import Button, { ButtonProps } from '../../Button'
 
 export type ContactInfoFormPayload = {
@@ -32,7 +32,7 @@ export type ContactInfoFormPayload = {
     phone: string
 }
 
-export type ContactInfoFormProps = {
+export type ContactInfoFormProps = FormProps<ContactInfoFormPayload> & {
     edit?: boolean
     fields: {
         email: InputProps
diff --git a/src/components/Checkout/PaymentMethodForm/PaymentMethodForm.tsx b/src/components/Checkout/PaymentMethodForm/PaymentMethodForm.tsx
index 45882d3..0294cd0 100644
--- a/src/components/Checkout/PaymentMethodForm/PaymentMethodForm.tsx
+++ b/src/components/Checkout/PaymentMethodForm/PaymentMethodForm.tsx
@@ -3,14 +3,14 @@ import { Component } from '../../../lib'
 import { Root, Card, CardIcon, CardType, CardNumber } from './PaymentMethodForm.styled'
 import BraintreeWebDropIn, { Dropin, Options, PaymentMethodPayload as Payload } from 'braintree-web-drop-in'
 import Button, { ButtonProps } from '../../Button'
-import Form, { FormError } from '../../Form'
+import Form, { FormProps, FormError } from '../../Form'
 import { useTheme } from '../../../theme/useTheme'
 
 export type Braintree = Dropin
 
 export type PaymentMethodPayload = Payload
 
-export type PaymentMethodFormProps = {
+export type PaymentMethodFormProps = FormProps<PaymentMethodPayload> & {
     submitting?: boolean
     error?: string
     submitButton: ButtonProps
diff --git a/src/components/Checkout/PlaceOrderForm/PlaceOrderForm.tsx b/src/components/Checkout/PlaceOrderForm/PlaceOrderForm.tsx
index c3f41b2..ab9d1e5 100644
--- a/src/components/Checkout/PlaceOrderForm/PlaceOrderForm.tsx
+++ b/src/components/Checkout/PlaceOrderForm/PlaceOrderForm.tsx
@@ -1,12 +1,12 @@
 import React from 'react'
 import { Component } from '../../../lib'
 import { Root } from './PlaceOrderForm.styled'
-import Form, { FormError } from '../../Form'
+import Form, { FormProps, FormError } from '../../Form'
 import Button, { ButtonProps } from '../../Button'
 
 export type PlaceOrderFormPayload = {}
 
-export type PlaceOrderFormProps = {
+export type PlaceOrderFormProps = FormProps<PlaceOrderFormPayload> & {
     loading?: boolean
     submitting?: boolean
     error?: string
diff --git a/src/components/Checkout/ShippingMethodForm/ShippingMethodForm.tsx b/src/components/Checkout/ShippingMethodForm/ShippingMethodForm.tsx
index 144cbe7..c0fd12d 100644
--- a/src/components/Checkout/ShippingMethodForm/ShippingMethodForm.tsx
+++ b/src/components/Checkout/ShippingMethodForm/ShippingMethodForm.tsx
@@ -1,18 +1,17 @@
 import React from 'react'
 import { Component } from '../../../lib'
 import { Root } from './ShippingMethodForm.styled'
-import Form, { Select, SelectProps, FormError } from '../../Form'
+import Form, { FormProps, Select, SelectProps, FormError } from '../../Form'
 import Button, { ButtonProps } from '../../Button'
 
 export type ShippingMethodFormPayload = {
     shippingMethod: string
 }
 
-export type ShippingMethodFormProps = {
+export type ShippingMethodFormProps = FormProps<ShippingMethodFormPayload> & {
     edit?: boolean
     editButton: ButtonProps
     submitButton: ButtonProps
-    onSubmit: (payload: ShippingMethodFormPayload) => any
     onEdit: (...args: any) => any
     loading?: boolean
     submitting?: boolean
diff --git a/src/components/Form/Form.tsx b/src/components/Form/Form.tsx
index 2111fd2..34deebd 100644
--- a/src/components/Form/Form.tsx
+++ b/src/components/Form/Form.tsx
@@ -1,5 +1,5 @@
-import React, { useCallback, useEffect } from 'react'
-import { Component } from '../../lib'
+import React, { useCallback, useEffect, FormHTMLAttributes, LabelHTMLAttributes, InputHTMLAttributes } from 'react'
+import { Component, Props } from '../../lib'
 import {
     Root,
     Field as FieldRoot,
@@ -9,13 +9,14 @@ import {
     FormError as FormErrorRoot,
 } from './Form.styled'
 
-import { FormContext, useForm, useFormContext, ValidationOptions, FieldErrors } from 'react-hook-form'
+import { FormContext, useForm, useFormContext, ValidationOptions, FieldErrors, OnSubmit } from 'react-hook-form'
 import _get from 'lodash.get'
 
 /** Form */
-export type FormProps = {
+export type FormProps<P = {}> = FormHTMLAttributes<any> & {
     onValues?: (values: any) => any
     onErrors?: (values: FieldErrors<any>) => any
+    onSubmit: OnSubmit<P>
 }
 
 export const Form: Component<FormProps> = ({ children, onSubmit, onErrors, onValues, onChange, ...props }) => {
@@ -43,12 +44,12 @@ export const Form: Component<FormProps> = ({ children, onSubmit, onErrors, onVal
     )
 }
 
-export type FormFieldProps = {
+export type FormFieldProps = Props<{
     name: string
     label?: string
     error?: string
     rules?: ValidationOptions
-}
+}>
 
 /** Field */
 export type FieldProps = {}
@@ -58,7 +59,7 @@ export const Field: Component<FieldProps> = ({ children, ...props }) => {
 }
 
 /** Label */
-export type LabelProps = { error?: boolean }
+export type LabelProps = LabelHTMLAttributes<any> & { error?: boolean }
 
 export const Label: Component<LabelProps> = ({ children, error = false, ...props }) => {
     return (
@@ -69,18 +70,13 @@ export const Label: Component<LabelProps> = ({ children, error = false, ...props
 }
 
 /** FieldInput */
-export type FieldInputProps = { rules?: ValidationOptions; error?: boolean }
+export type FieldInputProps = InputHTMLAttributes<any> & { rules?: ValidationOptions; error?: boolean }
 
 export const FieldInput: Component<FieldInputProps> = ({ children, rules, error = false, ...props }) => {
     const { register } = useFormContext()
 
     return (
-        <InputRoot
-            $error={error}
-            key={props.defaultValue as string} // update field when defaultValue changes
-            {...props}
-            ref={register({ ...rules })}
-        >
+        <InputRoot $error={error} {...props} ref={register({ ...rules })}>
             {children}
         </InputRoot>
     )

From c8336fef92f8df980540afba3836f723145db5b3 Mon Sep 17 00:00:00 2001
From: "Carlos A. Cabrera" <cacabrer@adobe.com>
Date: Tue, 11 Feb 2020 13:15:17 -0600
Subject: [PATCH 16/17] bump

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 04c8500..724e733 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@pmet-public/luma-ui",
-  "version": "1.0.0-beta.33",
+  "version": "1.0.0-beta.34",
   "description": "Luma React UI LIbrary",
   "repository": "https://github.com/PMET-public/luma-ui.git",
   "author": "Carlos A. Cabrera @fnhhipster",

From 2a3f42b887a36995ce21e506eab15557394209ba Mon Sep 17 00:00:00 2001
From: "Carlos A. Cabrera" <cacabrer@adobe.com>
Date: Tue, 11 Feb 2020 13:26:16 -0600
Subject: [PATCH 17/17] updated story

---
 src/templates/Cart/Cart.story.tsx         |  2 +-
 src/templates/Checkout/Checkout.story.tsx | 36 +++++++++++++++--------
 2 files changed, 24 insertions(+), 14 deletions(-)

diff --git a/src/templates/Cart/Cart.story.tsx b/src/templates/Cart/Cart.story.tsx
index 9569799..44ffd8e 100644
--- a/src/templates/Cart/Cart.story.tsx
+++ b/src/templates/Cart/Cart.story.tsx
@@ -54,7 +54,7 @@ storiesOf('📑 Templates/Cart', module).add('Default', () => (
                 ],
                 coupons: {
                     label: 'Apply Gift Card or Discount Code',
-                    fields: [
+                    items: [
                         {
                             field: { label: 'Gift Card', name: 'giftCardCode' },
                             submitButton: { text: 'Apply' },
diff --git a/src/templates/Checkout/Checkout.story.tsx b/src/templates/Checkout/Checkout.story.tsx
index cffbdf3..1403bd1 100644
--- a/src/templates/Checkout/Checkout.story.tsx
+++ b/src/templates/Checkout/Checkout.story.tsx
@@ -3,7 +3,7 @@ import Checkout from './'
 import { storiesOf } from '@storybook/react'
 import App from '../../components/App'
 import { AppMockData } from '../../components/App/App.story'
-import { number, select, boolean } from '@storybook/addon-knobs'
+import { select, boolean, number } from '@storybook/addon-knobs'
 import { action } from '@storybook/addon-actions'
 
 storiesOf('📑 Templates/Checkout', module).add('Checkout', () => (
@@ -21,27 +21,35 @@ storiesOf('📑 Templates/Checkout', module).add('Checkout', () => (
                 fields: {
                     email: {
                         label: 'Email',
+                        name: 'email',
                     },
                     firstName: {
                         label: 'First Name',
+                        name: 'firstName',
                     },
                     lastName: {
                         label: 'Last Name',
+                        name: 'lastName',
                     },
                     company: {
                         label: 'Company (optional)',
+                        name: 'company',
                     },
                     address1: {
                         label: 'Address',
+                        name: 'address1',
                     },
                     address2: {
                         label: 'Apt, Suite, Unit, etc (optional)',
+                        name: 'address2',
                     },
                     city: {
                         label: 'City',
+                        name: 'city',
                     },
                     country: {
                         label: 'Country',
+                        name: 'country',
                         items: [
                             {
                                 text: 'United States',
@@ -55,12 +63,16 @@ storiesOf('📑 Templates/Checkout', module).add('Checkout', () => (
                     },
                     region: {
                         label: 'State',
+                        name: 'region',
+                        type: 'text',
                     },
                     postalCode: {
                         label: 'Postal Code',
+                        name: 'postalCode',
                     },
                     phone: {
                         label: 'Phone Number',
+                        name: 'phone',
                     },
                 },
                 editButton: {
@@ -74,10 +86,15 @@ storiesOf('📑 Templates/Checkout', module).add('Checkout', () => (
             }}
             shippingMethod={{
                 title: 'Shipping',
-                items: [
-                    { text: 'Fixed $5.00', value: '1' },
-                    { text: '1-Day Express $29.99', value: '2' },
-                ],
+                fields: {
+                    shippingMethod: {
+                        name: 'shippingMethod',
+                        items: [
+                            { text: 'Fixed $5.00', value: '1' },
+                            { text: '1-Day Express $29.99', value: '2' },
+                        ],
+                    },
+                },
                 editButton: {
                     text: 'Continue to Payment',
                 },
@@ -107,14 +124,7 @@ storiesOf('📑 Templates/Checkout', module).add('Checkout', () => (
                 submitButton: {
                     text: 'Place Order',
                 },
-                onSubmit: e =>
-                    new Promise(resolve => {
-                        // fake loader
-                        setTimeout(() => {
-                            action('onSubmit')(e)
-                            resolve()
-                        }, 3000)
-                    }),
+                onSubmit: action('placeOrder'),
             }}
             list={{
                 items: new Array(number('quantity', 2)).fill({