diff --git a/.prettierignore b/.prettierignore
new file mode 100644
index 0000000..d98766d
--- /dev/null
+++ b/.prettierignore
@@ -0,0 +1,12 @@
+## file extensions
+*.*
+!*.css
+!*.js
+!*.json
+!*.jsx
+!*.less
+!*.md
+!*.mdx
+!*.ts
+!*.tsx
+!*.yml
diff --git a/.prettierrc b/.prettierrc
index a746f39..9f7fc0b 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -4,6 +4,6 @@
     "semi": false,
     "singleQuote": true,
     "jsxBracketSameLine": false,
-    "printWidth": 120,
+    "printWidth": 200,
     "arrowParens": "avoid"
 }
diff --git a/bin/lib/new-component.js b/bin/lib/new-component.js
index a5d6374..e7c55d8 100755
--- a/bin/lib/new-component.js
+++ b/bin/lib/new-component.js
@@ -7,7 +7,7 @@ const templateStory = require('../templates/components/Component.story')
 const templateIndex = require('../templates/components/index')
 
 module.exports = (name, folder = 'components') => {
-    if (! /^[A-Z][a-z]+(?:[A-Z][a-z]+)*$/.test(name)) {
+    if (!/^[A-Z][a-z]+(?:[A-Z][a-z]+)*$/.test(name)) {
         console.error(`⚠️  \x1b[4m${name} \x1b[0mis not a valid component name. Try naming your component with pascal case. i.e. \x1b[4mNewComponent\x1b[0m`)
         return null
     }
diff --git a/bin/lib/writeFile.js b/bin/lib/writeFile.js
index 5ec87d8..0565299 100644
--- a/bin/lib/writeFile.js
+++ b/bin/lib/writeFile.js
@@ -3,11 +3,10 @@ const fs = require('fs')
 
 module.exports = function writeFile(filePath, content) {
     const relativePath = path.relative('.', filePath)
-    if ( fs.existsSync(filePath) ) {
-        console.log(`💥 \x1b[31m${relativePath} \x1b[0malready exists`) 
-    }
-    else {
+    if (fs.existsSync(filePath)) {
+        console.log(`💥 \x1b[31m${relativePath} \x1b[0malready exists`)
+    } else {
         fs.writeFileSync(filePath, content)
-        console.log(`👌 \x1b[32m${relativePath} \x1b[0mcreated`) 
+        console.log(`👌 \x1b[32m${relativePath} \x1b[0mcreated`)
     }
 }
diff --git a/bin/templates/components/Component.js b/bin/templates/components/Component.js
index 939e582..00ffa19 100644
--- a/bin/templates/components/Component.js
+++ b/bin/templates/components/Component.js
@@ -1,6 +1,7 @@
 const source = require('common-tags').source
 
-module.exports = (Name) => source`
+module.exports = Name =>
+    source`
 
     import React from 'react'
     import { Component } from '../../lib'
diff --git a/bin/templates/components/Component.styled.js b/bin/templates/components/Component.styled.js
index f7ad9e1..699974d 100644
--- a/bin/templates/components/Component.styled.js
+++ b/bin/templates/components/Component.styled.js
@@ -1,6 +1,7 @@
 const source = require('common-tags').source
 
-module.exports = () => source`
+module.exports = () =>
+    source`
     import styled from 'styled-components'
 
     export const Root = styled.div\`
diff --git a/components/Accordion/Accordion.tsx b/components/Accordion/Accordion.tsx
index a19fb56..1bd57f1 100644
--- a/components/Accordion/Accordion.tsx
+++ b/components/Accordion/Accordion.tsx
@@ -22,11 +22,7 @@ type CompoundComponent = {
     Item: Component<AccordionItemProps>
 }
 
-export const Accordion: Component<AccordionProps> & CompoundComponent = ({
-    children,
-    defaultSelected = -1,
-    ...props
-}) => {
+export const Accordion: Component<AccordionProps> & CompoundComponent = ({ children, defaultSelected = -1, ...props }) => {
     const [selected, setSelected] = useState(defaultSelected)
 
     /** Update Selected when prop changes */
diff --git a/components/Breadcrumbs/Breadcrumbs.tsx b/components/Breadcrumbs/Breadcrumbs.tsx
index 50004e0..0d2f4ac 100644
--- a/components/Breadcrumbs/Breadcrumbs.tsx
+++ b/components/Breadcrumbs/Breadcrumbs.tsx
@@ -15,13 +15,7 @@ export type BreadcrumbsProps = {
     >
 }
 
-export const Breadcrumbs: Component<BreadcrumbsProps> = ({
-    loading,
-    divider = '',
-    items = [],
-    prefix = '',
-    ...props
-}) => {
+export const Breadcrumbs: Component<BreadcrumbsProps> = ({ loading, divider = '', items = [], prefix = '', ...props }) => {
     return (
         <Root {...props}>
             {loading ? (
diff --git a/components/BubbleCarousel/BubbleCarousel.tsx b/components/BubbleCarousel/BubbleCarousel.tsx
index e4f6802..5e6f4c6 100644
--- a/components/BubbleCarousel/BubbleCarousel.tsx
+++ b/components/BubbleCarousel/BubbleCarousel.tsx
@@ -22,16 +22,7 @@ export const BubbleCarousel: Component<BubbleCarouselProps> = ({ children, loadi
     const [scrollerRef, setScrollerRef] = useState<MutableRefObject<Element>>()
 
     return (
-        <Root
-            as={Carousel}
-            scrollerRef={setScrollerRef}
-            gap={1.4}
-            show="auto"
-            padding={1.5}
-            snap={false}
-            hideScrollBar
-            {...props}
-        >
+        <Root as={Carousel} scrollerRef={setScrollerRef} gap={1.4} show="auto" padding={1.5} snap={false} hideScrollBar {...props}>
             {loading ? (
                 <>
                     <CarouselItem>
diff --git a/components/Button/Button.tsx b/components/Button/Button.tsx
index 4209181..5b2d7c6 100644
--- a/components/Button/Button.tsx
+++ b/components/Button/Button.tsx
@@ -10,14 +10,7 @@ export type ButtonProps = Props<{
     loading?: LoaderProps
 }>
 
-export const Button: Component<ButtonProps> = ({
-    text,
-    children = text,
-    loading,
-    secondary = false,
-    outline = false,
-    ...props
-}) => {
+export const Button: Component<ButtonProps> = ({ text, children = text, loading, secondary = false, outline = false, ...props }) => {
     return (
         <Root $secondary={secondary} $outline={outline} as="button" {...props} disabled={!!loading || props.disabled}>
             {!!loading ? <Loader as="span" {...loading} /> : <span>{children}</span>}
diff --git a/components/Carousel/Carousel.story.tsx b/components/Carousel/Carousel.story.tsx
index 84e619b..c44e973 100644
--- a/components/Carousel/Carousel.story.tsx
+++ b/components/Carousel/Carousel.story.tsx
@@ -15,13 +15,7 @@ const Item = styled.div`
 `
 
 storiesOf('📦 Components/Carousel', module).add('Default', () => (
-    <Carousel
-        padding={number('padding', 4)}
-        gap={number('gap', 2)}
-        show={number('show', 1)}
-        hideScrollBar={boolean('hideScrollBar', false)}
-        snap={boolean('snap', true)}
-    >
+    <Carousel padding={number('padding', 4)} gap={number('gap', 2)} show={number('show', 1)} hideScrollBar={boolean('hideScrollBar', false)} snap={boolean('snap', true)}>
         <Carousel.Item>
             <Item>1</Item>
         </Carousel.Item>
diff --git a/components/Carousel/Carousel.styled.tsx b/components/Carousel/Carousel.styled.tsx
index 6b760bf..af663ae 100644
--- a/components/Carousel/Carousel.styled.tsx
+++ b/components/Carousel/Carousel.styled.tsx
@@ -24,8 +24,7 @@ export const Scroller = styled.div<{
 
     -webkit-overflow-scrolling: touch;
     display: grid;
-    grid-auto-columns: ${props =>
-        props.$show === 'auto' ? 'max-content' : 'calc(100% / var(--show) - var(--padding))'};
+    grid-auto-columns: ${props => (props.$show === 'auto' ? 'max-content' : 'calc(100% / var(--show) - var(--padding))')};
     grid-auto-flow: column;
     grid-gap: var(--gap);
     overflow-x: scroll;
diff --git a/components/Carousel/Carousel.tsx b/components/Carousel/Carousel.tsx
index 396c245..fcff1e7 100644
--- a/components/Carousel/Carousel.tsx
+++ b/components/Carousel/Carousel.tsx
@@ -18,16 +18,7 @@ type CompoundComponent = {
     Item: Component<CarouselItemProps>
 }
 
-export const Carousel: Component<CarouselProps> & CompoundComponent = ({
-    children,
-    gap = 0,
-    padding = 0,
-    show = 1,
-    hideScrollBar = false,
-    snap = true,
-    scrollerRef,
-    ...props
-}) => {
+export const Carousel: Component<CarouselProps> & CompoundComponent = ({ children, gap = 0, padding = 0, show = 1, hideScrollBar = false, snap = true, scrollerRef, ...props }) => {
     const rootElemRef = useRef(null)
     const scrollerElemRef = useRef(null)
     const { height } = useMeasure(rootElemRef)
@@ -40,15 +31,7 @@ export const Carousel: Component<CarouselProps> & CompoundComponent = ({
 
     return (
         <Root ref={rootElemRef} $height={!hideScrollBar ? height : undefined}>
-            <Scroller
-                ref={scrollerElemRef}
-                $padding={childrenCount > 1 ? padding : 0}
-                $show={show}
-                $gap={gap}
-                $hideScrollBar={hideScrollBar}
-                $snap={snap}
-                {...props}
-            >
+            <Scroller ref={scrollerElemRef} $padding={childrenCount > 1 ? padding : 0} $show={show} $gap={gap} $hideScrollBar={hideScrollBar} $snap={snap} {...props}>
                 {children}
             </Scroller>
         </Root>
diff --git a/components/CartList/CartList.tsx b/components/CartList/CartList.tsx
index f0691e1..ee5a48e 100644
--- a/components/CartList/CartList.tsx
+++ b/components/CartList/CartList.tsx
@@ -1,19 +1,6 @@
 import React from 'react'
 import { Component, Props } from '../../lib'
-import {
-    Root,
-    Product,
-    Thumbnail,
-    DetailsWrapper,
-    Title,
-    Price,
-    Quantity,
-    Sku,
-    Options,
-    Option,
-    OptionLabel,
-    OptionValue,
-} from './CartList.styled'
+import { Root, Product, Thumbnail, DetailsWrapper, Title, Price, Quantity, Sku, Options, Option, OptionLabel, OptionValue } from './CartList.styled'
 import PriceComponent, { PriceProps } from '../Price'
 import Image, { ImageProps } from '../Image'
 import QuantityComponent, { QuantityProps } from '../Quantity'
@@ -47,14 +34,7 @@ export const CartList: Component<CartListProps> = ({ loading, items, children, .
             {items?.map(({ _id, title, sku, thumbnail, price, quantity, options }, index) => (
                 <Product key={_id || index}>
                     <Thumbnail>
-                        <Image
-                            vignette={8}
-                            transition
-                            width="100%"
-                            height="auto"
-                            lazyload={{ offsetY: 100 }}
-                            {...thumbnail}
-                        />
+                        <Image vignette={8} transition width="100%" height="auto" lazyload={{ offsetY: 100 }} {...thumbnail} />
                     </Thumbnail>
                     <DetailsWrapper>
                         <Title {...title}>{title.text}</Title>
diff --git a/components/CartSummary/CartSummary.styled.tsx b/components/CartSummary/CartSummary.styled.tsx
index 847a2f2..2210eb1 100644
--- a/components/CartSummary/CartSummary.styled.tsx
+++ b/components/CartSummary/CartSummary.styled.tsx
@@ -1,9 +1,5 @@
 import styled from 'styled-components'
-import {
-    Button as AccordionButton,
-    Content as AccordionContent,
-    ButtonLabel as AccordionLabel,
-} from '../Accordion/Accordion.styled'
+import { Button as AccordionButton, Content as AccordionContent, ButtonLabel as AccordionLabel } from '../Accordion/Accordion.styled'
 
 export const Root = styled.div`
     display: grid;
diff --git a/components/Checkout/ApplyCouponForm/ApplyCouponForm.tsx b/components/Checkout/ApplyCouponForm/ApplyCouponForm.tsx
index 3f8c8e5..835417f 100644
--- a/components/Checkout/ApplyCouponForm/ApplyCouponForm.tsx
+++ b/components/Checkout/ApplyCouponForm/ApplyCouponForm.tsx
@@ -16,15 +16,7 @@ export type ApplyCouponFormProps = FormProps<ApplyCouponFormPayload> & {
     error?: string
 }
 
-export const ApplyCouponForm: Component<ApplyCouponFormProps> = ({
-    field,
-    loading = false,
-    onSubmit,
-    submitButton,
-    submitting = false,
-    error,
-    ...props
-}) => {
+export const ApplyCouponForm: Component<ApplyCouponFormProps> = ({ field, loading = false, onSubmit, submitButton, submitting = false, error, ...props }) => {
     return (
         <Root as={Form} onSubmit={onSubmit} {...props}>
             <Input loading={loading} rules={{ required: true }} disabled={submitting} error={error} {...field} />
diff --git a/components/Checkout/ContactInfoForm/ContactInfoForm.tsx b/components/Checkout/ContactInfoForm/ContactInfoForm.tsx
index 013e9c3..e73268c 100644
--- a/components/Checkout/ContactInfoForm/ContactInfoForm.tsx
+++ b/components/Checkout/ContactInfoForm/ContactInfoForm.tsx
@@ -1,19 +1,6 @@
 import React, { useCallback } from 'react'
 import { Component } from '../../../lib'
-import {
-    Root,
-    Email,
-    FirstName,
-    LastName,
-    Company,
-    Address1,
-    Address2,
-    City,
-    Country,
-    Region,
-    PostalCode,
-    PhoneNumber,
-} from './ContactInfoForm.styled'
+import { Root, Email, FirstName, LastName, Company, Address1, Address2, City, Country, Region, PostalCode, PhoneNumber } from './ContactInfoForm.styled'
 
 import Form, { FormProps, Input, InputProps, Select, SelectProps, FormError, patterns } from '../../Form'
 import Button, { ButtonProps } from '../../Button'
@@ -56,18 +43,7 @@ export type ContactInfoFormProps = FormProps<ContactInfoFormPayload> & {
     error?: string
 }
 
-export const ContactInfoForm: Component<ContactInfoFormProps> = ({
-    edit = false,
-    fields,
-    submitButton,
-    editButton,
-    onSubmit,
-    onEdit,
-    loading,
-    submitting,
-    error,
-    ...props
-}) => {
+export const ContactInfoForm: Component<ContactInfoFormProps> = ({ edit = false, fields, submitButton, editButton, onSubmit, onEdit, loading, submitting, error, ...props }) => {
     const handleOnClickEdit = useCallback(
         (e: Event) => {
             e.preventDefault()
@@ -84,12 +60,7 @@ export const ContactInfoForm: Component<ContactInfoFormProps> = ({
         <Form autoComplete={props.disabled ? 'off' : 'on'} onSubmit={onSubmit} {...props}>
             <Root $preview={!edit}>
                 <Email>
-                    <Input
-                        loading={loading}
-                        rules={{ required: true, pattern: patterns.email }}
-                        disabled={disabled}
-                        {...email}
-                    />
+                    <Input loading={loading} rules={{ required: true, pattern: patterns.email }} disabled={disabled} {...email} />
                 </Email>
                 <FirstName>
                     <Input loading={loading} rules={{ required: true }} disabled={disabled} {...firstName} />
@@ -129,11 +100,7 @@ export const ContactInfoForm: Component<ContactInfoFormProps> = ({
 
             {error && <FormError>{error}</FormError>}
 
-            {edit ? (
-                <Button type="submit" loading={loading || submitting} {...submitButton} />
-            ) : (
-                <Button type="button" outline onClick={handleOnClickEdit} {...editButton} />
-            )}
+            {edit ? <Button type="submit" loading={loading || submitting} {...submitButton} /> : <Button type="button" outline onClick={handleOnClickEdit} {...editButton} />}
         </Form>
     )
 }
diff --git a/components/Checkout/PaymentMethodForm/PaymentMethodForm.styled.tsx b/components/Checkout/PaymentMethodForm/PaymentMethodForm.styled.tsx
index 8f075c3..1fc143e 100644
--- a/components/Checkout/PaymentMethodForm/PaymentMethodForm.styled.tsx
+++ b/components/Checkout/PaymentMethodForm/PaymentMethodForm.styled.tsx
@@ -19,22 +19,14 @@ export const Root = styled.div`
         display: none;
     }
 
-    &
-        .braintree-sheet__content--form
-        .braintree-form__field-group
-        .braintree-form__field
-        .braintree-form__hosted-field {
+    & .braintree-sheet__content--form .braintree-form__field-group .braintree-form__field .braintree-form__hosted-field {
         border-top: none;
         border-left: none;
         border-right: none;
         border-bottom: 0.1rem solid ${props => props.theme.colors.primary25};
     }
 
-    &
-        .braintree-sheet__content--form
-        .braintree-form__field-group.braintree-form__field-group--has-error
-        .braintree-form__field
-        .braintree-form__hosted-field {
+    & .braintree-sheet__content--form .braintree-form__field-group.braintree-form__field-group--has-error .braintree-form__field .braintree-form__hosted-field {
         border-bottom-color: ${props => props.theme.colors.error};
     }
 
@@ -63,16 +55,9 @@ export const Root = styled.div`
         color: ${props => props.theme.colors.onSurface};
     }
 
-    &
-        .braintree-sheet__content--form
-        .braintree-form__field-group.braintree-form__field-group--card-type-known
-        .braintree-form__field-secondary-icon,
-    .braintree-sheet__content--form
-        .braintree-form__field-group.braintree-form__field-group--has-error
-        .braintree-form__field-error-icon,
-    .braintree-sheet__content--form
-        .braintree-form__field-group.braintree-form__field-group--is-focused
-        .braintree-form__field-secondary-icon {
+    & .braintree-sheet__content--form .braintree-form__field-group.braintree-form__field-group--card-type-known .braintree-form__field-secondary-icon,
+    .braintree-sheet__content--form .braintree-form__field-group.braintree-form__field-group--has-error .braintree-form__field-error-icon,
+    .braintree-sheet__content--form .braintree-form__field-group.braintree-form__field-group--is-focused .braintree-form__field-secondary-icon {
         display: none;
     }
 `
diff --git a/components/Checkout/PaymentMethodForm/PaymentMethodForm.tsx b/components/Checkout/PaymentMethodForm/PaymentMethodForm.tsx
index 0294cd0..995bd5f 100644
--- a/components/Checkout/PaymentMethodForm/PaymentMethodForm.tsx
+++ b/components/Checkout/PaymentMethodForm/PaymentMethodForm.tsx
@@ -111,15 +111,7 @@ const reducer: Reducer<ReducerState, ReducerActions> = (state, action) => {
     }
 }
 
-export const PaymentMethodForm: Component<PaymentMethodFormProps> = ({
-    submitting,
-    error,
-    braintree,
-    submitButton,
-    editButton,
-    onSubmit,
-    ...props
-}) => {
+export const PaymentMethodForm: Component<PaymentMethodFormProps> = ({ submitting, error, braintree, submitButton, editButton, onSubmit, ...props }) => {
     const { colors } = useTheme()
 
     const containerElem = useRef(null)
@@ -218,11 +210,7 @@ export const PaymentMethodForm: Component<PaymentMethodFormProps> = ({
 
             {(error || formError) && <FormError>{error || formError}</FormError>}
 
-            {submitting || loading || editable ? (
-                <Button type="submit" loading={submitting || loading} {...submitButton} />
-            ) : (
-                <Button outline onClick={handleOnEdit} {...editButton} />
-            )}
+            {submitting || loading || editable ? <Button type="submit" loading={submitting || loading} {...submitButton} /> : <Button outline onClick={handleOnEdit} {...editButton} />}
         </Root>
     )
 }
diff --git a/components/Checkout/PlaceOrderForm/PlaceOrderForm.tsx b/components/Checkout/PlaceOrderForm/PlaceOrderForm.tsx
index ab9d1e5..6186bdc 100644
--- a/components/Checkout/PlaceOrderForm/PlaceOrderForm.tsx
+++ b/components/Checkout/PlaceOrderForm/PlaceOrderForm.tsx
@@ -14,14 +14,7 @@ export type PlaceOrderFormProps = FormProps<PlaceOrderFormPayload> & {
     onSubmit: (payload: PlaceOrderFormPayload) => any
 }
 
-export const PlaceOrderForm: Component<PlaceOrderFormProps> = ({
-    loading,
-    submitting,
-    error,
-    submitButton,
-    onSubmit,
-    ...props
-}) => {
+export const PlaceOrderForm: Component<PlaceOrderFormProps> = ({ loading, submitting, error, submitButton, onSubmit, ...props }) => {
     return (
         <Root as={Form} onSubmit={onSubmit} {...props}>
             {error && <FormError>{error}</FormError>}
diff --git a/components/Checkout/ShippingMethodForm/ShippingMethodForm.tsx b/components/Checkout/ShippingMethodForm/ShippingMethodForm.tsx
index 98c64fb..e067ba0 100644
--- a/components/Checkout/ShippingMethodForm/ShippingMethodForm.tsx
+++ b/components/Checkout/ShippingMethodForm/ShippingMethodForm.tsx
@@ -21,18 +21,7 @@ export type ShippingMethodFormProps = FormProps<ShippingMethodFormPayload> & {
     }
 }
 
-export const ShippingMethodForm: Component<ShippingMethodFormProps> = ({
-    edit = false,
-    submitButton,
-    editButton,
-    onEdit,
-    onSubmit,
-    loading,
-    submitting,
-    fields,
-    error,
-    ...props
-}) => {
+export const ShippingMethodForm: Component<ShippingMethodFormProps> = ({ edit = false, submitButton, editButton, onEdit, onSubmit, loading, submitting, fields, error, ...props }) => {
     const handleOnClickEdit = useCallback(
         (e: Event) => {
             e.preventDefault()
@@ -51,11 +40,7 @@ export const ShippingMethodForm: Component<ShippingMethodFormProps> = ({
 
             {error && <FormError>{error}</FormError>}
 
-            {edit ? (
-                <Button type="submit" loading={loading || submitting} {...submitButton} />
-            ) : (
-                <Button type="button" outline {...editButton} onClick={handleOnClickEdit} />
-            )}
+            {edit ? <Button type="submit" loading={loading || submitting} {...submitButton} /> : <Button type="button" outline {...editButton} onClick={handleOnClickEdit} />}
         </Root>
     )
 }
diff --git a/components/Error/Error.story.tsx b/components/Error/Error.story.tsx
index f257e8f..4c40eba 100644
--- a/components/Error/Error.story.tsx
+++ b/components/Error/Error.story.tsx
@@ -4,7 +4,5 @@ import { storiesOf } from '@storybook/react'
 import { text, select } from '@storybook/addon-knobs'
 
 storiesOf('📦 Components/Error', module).add('Default', () => (
-    <Error type={select('type', { '500': '500', '404': '404', NotFound: 'NotFound' }, '500')}>
-        {text('message', 'Internal Server Error.')}
-    </Error>
+    <Error type={select('type', { '500': '500', '404': '404', NotFound: 'NotFound' }, '500')}>{text('message', 'Internal Server Error.')}</Error>
 ))
diff --git a/components/Filters/Filters.tsx b/components/Filters/Filters.tsx
index 4e2e544..d6feb1d 100644
--- a/components/Filters/Filters.tsx
+++ b/components/Filters/Filters.tsx
@@ -45,10 +45,7 @@ const FiltersGroup: Component<FiltersGroupProps> = ({ items = [], offset = 5, ti
 
     return (
         <Group {...props}>
-            <Wrapper
-                $duration={items.length * 20 + 'ms'}
-                $height={open ? `${height / 10}rem` : `calc(2em * ${offset})`}
-            >
+            <Wrapper $duration={items.length * 20 + 'ms'} $height={open ? `${height / 10}rem` : `calc(2em * ${offset})`}>
                 <List ref={elRef}>
                     <GroupLabel>{title}</GroupLabel>
 
diff --git a/components/Footer/Footer.skeleton.tsx b/components/Footer/Footer.skeleton.tsx
index 1013f10..8a41de4 100644
--- a/components/Footer/Footer.skeleton.tsx
+++ b/components/Footer/Footer.skeleton.tsx
@@ -3,12 +3,7 @@ import Skeleton from '../Skeleton'
 
 export const FooterSkeleton = ({ ...props }) => {
     return (
-        <Skeleton
-            width={467.45}
-            height={64.38}
-            {...props}
-            style={{ width: '360px', padding: '2rem', margin: '0 auto', display: 'block', ...props.style }}
-        >
+        <Skeleton width={467.45} height={64.38} {...props} style={{ width: '360px', padding: '2rem', margin: '0 auto', display: 'block', ...props.style }}>
             <path d="M125.16,51.14a9.36,9.36,0,0,1,1.26-4.73,9.25,9.25,0,0,1,3.46-3.48,9.51,9.51,0,0,1,9.48,0,9.25,9.25,0,0,1,3.48,3.46,9.49,9.49,0,1,1-17.68,4.76Zm1.55,0a7.93,7.93,0,0,0,7.92,7.92,7.85,7.85,0,0,0,4-1.07,8,8,0,0,0,2.89-2.9,7.93,7.93,0,1,0-14.8-4Zm8.44-3.82a2.5,2.5,0,0,0-2.15,1,4.58,4.58,0,0,0-.76,2.81,5,5,0,0,0,.68,2.84,2.49,2.49,0,0,0,2.23,1,6.27,6.27,0,0,0,1.49-.19,8.15,8.15,0,0,0,1.37-.45v2a7.18,7.18,0,0,1-3,.64,4.88,4.88,0,0,1-3.85-1.52,6.23,6.23,0,0,1-1.37-4.31,6.16,6.16,0,0,1,1.39-4.26,4.89,4.89,0,0,1,3.86-1.56,7.45,7.45,0,0,1,3.45.89l-.82,1.8A5.57,5.57,0,0,0,135.15,47.32Z" />
             <rect x="164.19" y="44.2" width="179.1" height="13.64" />
             <rect width="108.64" height="17.78" />
diff --git a/components/Form/Checkbox/Checkbox.tsx b/components/Form/Checkbox/Checkbox.tsx
index 5812943..a28a50c 100644
--- a/components/Form/Checkbox/Checkbox.tsx
+++ b/components/Form/Checkbox/Checkbox.tsx
@@ -19,18 +19,7 @@ export type CheckboxProps = FormFieldProps & {
     >
 }
 
-export const Checkbox: Component<CheckboxProps> = ({
-    as,
-    error,
-    color: _color,
-    rules,
-    label,
-    name,
-    placeholder,
-    type = 'checkbox',
-    items,
-    ...props
-}) => {
+export const Checkbox: Component<CheckboxProps> = ({ as, error, color: _color, rules, label, name, placeholder, type = 'checkbox', items, ...props }) => {
     const fieldError = useFormFieldError({ name, error })
 
     const color = _color ?? (fieldError && FieldColors.error)
@@ -49,14 +38,7 @@ export const Checkbox: Component<CheckboxProps> = ({
                 <Wrapper>
                     {items.map(({ text, ...item }, index) => (
                         <Item key={index}>
-                            <FieldInput
-                                as={Input}
-                                type={type}
-                                name={name}
-                                rules={rules}
-                                color={color as any}
-                                {...item}
-                            />
+                            <FieldInput as={Input} type={type} name={name} rules={rules} color={color as any} {...item} />
                             <OffIcon as={type === 'radio' ? RadioOffIconSvg : CheckboxOffIconSvg} />
                             <OnIcon as={type === 'radio' ? RadioOnIconSvg : CheckboxOnIconSvg} />
                             {text}
diff --git a/components/Form/Form.tsx b/components/Form/Form.tsx
index 9ddc579..181236b 100644
--- a/components/Form/Form.tsx
+++ b/components/Form/Form.tsx
@@ -1,34 +1,10 @@
-import React, {
-    useCallback,
-    useEffect,
-    FormHTMLAttributes,
-    LabelHTMLAttributes,
-    InputHTMLAttributes,
-    MutableRefObject,
-} from 'react'
+import React, { useCallback, useEffect, FormHTMLAttributes, LabelHTMLAttributes, InputHTMLAttributes, MutableRefObject } from 'react'
 import { Component, Props } from '../../lib'
-import {
-    Root,
-    Field as FieldRoot,
-    Label as LabelRoot,
-    Error as ErrorRoot,
-    Input as InputRoot,
-    FormError as FormErrorRoot,
-    FieldColors,
-} from './Form.styled'
+import { Root, Field as FieldRoot, Label as LabelRoot, Error as ErrorRoot, Input as InputRoot, FormError as FormErrorRoot, FieldColors } from './Form.styled'
 
 export { FieldColors } from './Form.styled'
 
-import {
-    FormContext,
-    useForm,
-    useFormContext,
-    ValidationOptions,
-    FieldErrors,
-    OnSubmit,
-    FormContextValues,
-    UseFormOptions,
-} from 'react-hook-form'
+import { FormContext, useForm, useFormContext, ValidationOptions, FieldErrors, OnSubmit, FormContextValues, UseFormOptions } from 'react-hook-form'
 import _get from 'lodash.get'
 
 /** Form */
@@ -41,37 +17,32 @@ export type FormProps<P = {}> = FormHTMLAttributes<any> & {
 
 export type FormContext = FormContextValues
 
-export const Form: Component<FormProps> = React.forwardRef(
-    (
-        { children, onSubmit, onErrors, onValues, onChange, options, ...props },
-        ref: MutableRefObject<FormContextValues>
-    ) => {
-        const form = useForm(options)
-
-        if (ref) ref.current = form
-
-        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={onSubmit && form.handleSubmit(onSubmit)} onChange={handleOnValueChanges} {...props}>
-                    {children}
-                </Root>
-            </FormContext>
-        )
-    }
-)
+export const Form: Component<FormProps> = React.forwardRef(({ children, onSubmit, onErrors, onValues, onChange, options, ...props }, ref: MutableRefObject<FormContextValues>) => {
+    const form = useForm(options)
+
+    if (ref) ref.current = form
+
+    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={onSubmit && form.handleSubmit(onSubmit)} onChange={handleOnValueChanges} {...props}>
+                {children}
+            </Root>
+        </FormContext>
+    )
+})
 
 export type FormFieldProps = Props<{
     name: string
diff --git a/components/Form/Input/Input.tsx b/components/Form/Input/Input.tsx
index 4513a8b..4b7ada9 100644
--- a/components/Form/Input/Input.tsx
+++ b/components/Form/Input/Input.tsx
@@ -9,19 +9,7 @@ export type InputProps = FormFieldProps & {
     loading?: boolean
 }
 
-export const Input: Component<InputProps> = ({
-    as,
-    error,
-    color: _color,
-    label,
-    loading,
-    name,
-    rules,
-    onBlur,
-    onChange,
-    onFocus,
-    ...props
-}) => {
+export const Input: Component<InputProps> = ({ as, error, color: _color, label, loading, name, rules, onBlur, onChange, onFocus, ...props }) => {
     const fieldError = useFormFieldError({ name, error })
 
     const color = _color ?? (fieldError && FieldColors.error)
@@ -62,11 +50,7 @@ export const Input: Component<InputProps> = ({
     return (
         <Field as={as}>
             {label && (
-                <LabelRoot
-                    htmlFor={`field-input__${name}`}
-                    color={color}
-                    $active={loading || defaultActive || active || !!fieldError}
-                >
+                <LabelRoot htmlFor={`field-input__${name}`} color={color} $active={loading || defaultActive || active || !!fieldError}>
                     {label}
                 </LabelRoot>
             )}
@@ -74,17 +58,7 @@ export const Input: Component<InputProps> = ({
                 <InputSkeleton />
             ) : (
                 <React.Fragment>
-                    <FieldInput
-                        id={`field-input__${name}`}
-                        type="text"
-                        onFocus={handleOnFocus}
-                        onChange={handleOnChange}
-                        onBlur={handleOnBlur}
-                        name={name}
-                        color={color}
-                        rules={rules}
-                        {...props}
-                    />
+                    <FieldInput id={`field-input__${name}`} type="text" onFocus={handleOnFocus} onChange={handleOnChange} onBlur={handleOnBlur} name={name} color={color} rules={rules} {...props} />
 
                     <Error color={color}>{fieldError?.message}</Error>
                 </React.Fragment>
diff --git a/components/Form/Select/Select.tsx b/components/Form/Select/Select.tsx
index 0f9f776..eba1d88 100644
--- a/components/Form/Select/Select.tsx
+++ b/components/Form/Select/Select.tsx
@@ -10,17 +10,7 @@ export type SelectProps = FormFieldProps & {
     loading?: boolean
 }
 
-export const Select: Component<SelectProps> = ({
-    as,
-    error,
-    color: _color,
-    label,
-    loading,
-    name,
-    rules,
-    items,
-    ...props
-}) => {
+export const Select: Component<SelectProps> = ({ as, error, color: _color, label, loading, name, rules, items, ...props }) => {
     const fieldError = useFormFieldError({ name, error })
 
     const color = _color ?? (fieldError && FieldColors.error)
@@ -38,15 +28,7 @@ export const Select: Component<SelectProps> = ({
             ) : (
                 <React.Fragment>
                     <Wrapper $disabled={props.disabled}>
-                        <FieldInput
-                            id={`field-input__${name}`}
-                            as={SelectRoot}
-                            disabled={items?.length === 0}
-                            name={name}
-                            rules={rules}
-                            color={color}
-                            {...props}
-                        >
+                        <FieldInput id={`field-input__${name}`} as={SelectRoot} disabled={items?.length === 0} name={name} rules={rules} color={color} {...props}>
                             {items &&
                                 items.map(({ text, ...option }, index) => (
                                     <option key={index} {...option}>
diff --git a/components/Form/TextSwatches/TextSwatches.story.tsx b/components/Form/TextSwatches/TextSwatches.story.tsx
index a4bff15..fe9a644 100644
--- a/components/Form/TextSwatches/TextSwatches.story.tsx
+++ b/components/Form/TextSwatches/TextSwatches.story.tsx
@@ -12,13 +12,7 @@ storiesOf('📦 Components/Form/TextSwatches', module).add('Default', () => (
             label={text('label', '')}
             name="size"
             type="radio"
-            items={object('list', [
-                { text: 'XS' },
-                { text: 'M', disabled: true },
-                { text: 'L', defaultChecked: true },
-                { text: 'XL' },
-                { text: 'S' },
-            ])}
+            items={object('list', [{ text: 'XS' }, { text: 'M', disabled: true }, { text: 'L', defaultChecked: true }, { text: 'XL' }, { text: 'S' }])}
             onChange={action('onChange')}
             error={text('error', '')}
             color={select(
diff --git a/components/Form/TextSwatches/TextSwatches.tsx b/components/Form/TextSwatches/TextSwatches.tsx
index 6908825..5bed564 100644
--- a/components/Form/TextSwatches/TextSwatches.tsx
+++ b/components/Form/TextSwatches/TextSwatches.tsx
@@ -16,17 +16,7 @@ export type TextSwatchesProps = FormFieldProps & {
     >
 }
 
-export const TextSwatches: Component<TextSwatchesProps> = ({
-    loading,
-    error,
-    color: _color,
-    label,
-    name,
-    rules,
-    type = 'radio',
-    items = [],
-    ...props
-}) => {
+export const TextSwatches: Component<TextSwatchesProps> = ({ loading, error, color: _color, label, name, rules, type = 'radio', items = [], ...props }) => {
     const fieldError = useFormFieldError({ name, error })
 
     const color = _color ?? (fieldError && FieldColors.error)
@@ -46,14 +36,7 @@ export const TextSwatches: Component<TextSwatchesProps> = ({
                     <Items>
                         {items.map(({ text, ...item }, index) => (
                             <Item key={index}>
-                                <FieldInput
-                                    id={`swatch-group__${name}__${index}`}
-                                    rules={rules}
-                                    name={name}
-                                    type={type}
-                                    color={color as any}
-                                    {...item}
-                                />
+                                <FieldInput id={`swatch-group__${name}__${index}`} rules={rules} name={name} type={type} color={color as any} {...item} />
                                 <label htmlFor={`swatch-group__${name}__${index}`}>{text}</label>
                             </Item>
                         ))}
diff --git a/components/Form/ThumbSwatches/ThumbSwatches.tsx b/components/Form/ThumbSwatches/ThumbSwatches.tsx
index 0ae7d2b..7e6e682 100644
--- a/components/Form/ThumbSwatches/ThumbSwatches.tsx
+++ b/components/Form/ThumbSwatches/ThumbSwatches.tsx
@@ -18,17 +18,7 @@ export type ThumbSwatchesProps = FormFieldProps & {
     >
 }
 
-export const ThumbSwatches: Component<ThumbSwatchesProps> = ({
-    loading,
-    name,
-    type = 'radio',
-    label,
-    error,
-    color: _color,
-    rules,
-    items = [],
-    ...props
-}) => {
+export const ThumbSwatches: Component<ThumbSwatchesProps> = ({ loading, name, type = 'radio', label, error, color: _color, rules, items = [], ...props }) => {
     const fieldError = useFormFieldError({ name, error })
 
     const color = _color ?? (fieldError && FieldColors.error)
@@ -48,14 +38,7 @@ export const ThumbSwatches: Component<ThumbSwatchesProps> = ({
                     <Items>
                         {items.map(({ image, ...item }, index) => (
                             <Item key={index}>
-                                <FieldInput
-                                    id={`swatch-group__${name}__${index}`}
-                                    type={type}
-                                    name={name}
-                                    rules={rules}
-                                    color={color as any}
-                                    {...item}
-                                />
+                                <FieldInput id={`swatch-group__${name}__${index}`} type={type} name={name} rules={rules} color={color as any} {...item} />
                                 <label htmlFor={`swatch-group__${name}__${index}`}>
                                     <Image transition width={4} height={5} lazyload={{ offsetY: 100 }} {...image} />
                                 </label>
diff --git a/components/Header/Header.tsx b/components/Header/Header.tsx
index 3a00fae..104690b 100644
--- a/components/Header/Header.tsx
+++ b/components/Header/Header.tsx
@@ -37,9 +37,7 @@ export const Header: Component<HeaderProps> = ({
     return (
         <Root {...props}>
             {/* Logo */}
-            <Logo {...logo}>
-                {logoImage ? <img {...logoImage} /> : logoLoading ? <LogoSkeleton /> : <LogoImageSvg />}
-            </Logo>
+            <Logo {...logo}>{logoImage ? <img {...logoImage} /> : logoLoading ? <LogoSkeleton /> : <LogoImageSvg />}</Logo>
 
             {/* Menu */}
             <Menu {...menu}>
diff --git a/components/HotSpots/HotSpots.tsx b/components/HotSpots/HotSpots.tsx
index 9707bd5..97ae041 100644
--- a/components/HotSpots/HotSpots.tsx
+++ b/components/HotSpots/HotSpots.tsx
@@ -30,13 +30,7 @@ export const HotSpotsContext = createContext<{
     set: () => {},
 })
 
-export const HotSpots: Component<HotSpotsProps> & CompoundComponent = ({
-    children,
-    description,
-    image,
-    items,
-    ...props
-}) => {
+export const HotSpots: Component<HotSpotsProps> & CompoundComponent = ({ children, description, image, items, ...props }) => {
     const [active, set] = useState(null)
 
     return (
@@ -69,15 +63,7 @@ HotSpots.Item = ({ children, coords, id, label, ...props }) => {
 
     return (
         <Item {...props}>
-            <Button
-                $active={active}
-                $xPos={coords.x}
-                $yPos={coords.y}
-                aria-label={label}
-                as="button"
-                onClick={handleToggle}
-                tabIndex={0}
-            />
+            <Button $active={active} $xPos={coords.x} $yPos={coords.y} aria-label={label} as="button" onClick={handleToggle} tabIndex={0} />
 
             {children && (
                 <Content $xPos={coords.x} $yPos={coords.y}>
diff --git a/components/Image/Image.tsx b/components/Image/Image.tsx
index 2fa6a4d..40f7230 100644
--- a/components/Image/Image.tsx
+++ b/components/Image/Image.tsx
@@ -15,17 +15,7 @@ export type ImageProps = {
     lazyload?: LazyLoadOptions
 }
 
-export const ImageComponent: Component<ImageProps> = ({
-    alt,
-    src,
-    title,
-    transition = false,
-    vignette = 0,
-    width: _width,
-    height: _height,
-    lazyload,
-    ...props
-}) => {
+export const ImageComponent: Component<ImageProps> = ({ alt, src, title, transition = false, vignette = 0, width: _width, height: _height, lazyload, ...props }) => {
     const imageElem = useRef<HTMLImageElement>(null)
 
     const image = useImage(imageElem, src, { lazyload })
@@ -35,23 +25,9 @@ export const ImageComponent: Component<ImageProps> = ({
 
     return (
         <Root $vignette={image.loaded ? vignette : 0} {...props}>
-            <LoadedImage
-                ref={imageElem}
-                $error={image.error}
-                $loaded={image.loaded}
-                $transition={transition}
-                alt={alt}
-                src={image.src}
-                title={title}
-                height={height}
-                width={width}
-            />
-
-            <Placeholder
-                aria-hidden="true"
-                src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAFCAQAAADIpIVQAAAADklEQVR42mNkgAJGIhgAALQABsHyMOcAAAAASUVORK5CYII="
-                {...{ width, height }}
-            />
+            <LoadedImage ref={imageElem} $error={image.error} $loaded={image.loaded} $transition={transition} alt={alt} src={image.src} title={title} height={height} width={width} />
+
+            <Placeholder aria-hidden="true" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAFCAQAAADIpIVQAAAADklEQVR42mNkgAJGIhgAALQABsHyMOcAAAAASUVORK5CYII=" {...{ width, height }} />
 
             {image.error && <ErrorIcon />}
         </Root>
diff --git a/components/Price/Price.tsx b/components/Price/Price.tsx
index 5df8b17..3757e59 100644
--- a/components/Price/Price.tsx
+++ b/components/Price/Price.tsx
@@ -20,13 +20,9 @@ export const Price: Component<PriceProps> = ({ loading, currency = 'USD', label,
                 <React.Fragment>
                     {label && <Label>{label}</Label>}
 
-                    <RegularPrice $hasSpecial={!!special}>
-                        {regular.toLocaleString('en-US', { style: 'currency', currency })}
-                    </RegularPrice>
+                    <RegularPrice $hasSpecial={!!special}>{regular.toLocaleString('en-US', { style: 'currency', currency })}</RegularPrice>
 
-                    {!!special && (
-                        <SpecialPrice>{special.toLocaleString('en-US', { style: 'currency', currency })}</SpecialPrice>
-                    )}
+                    {!!special && <SpecialPrice>{special.toLocaleString('en-US', { style: 'currency', currency })}</SpecialPrice>}
                 </React.Fragment>
             )}
         </Root>
diff --git a/components/Quantity/Quantity.story.tsx b/components/Quantity/Quantity.story.tsx
index 899ed9f..d47fa3b 100644
--- a/components/Quantity/Quantity.story.tsx
+++ b/components/Quantity/Quantity.story.tsx
@@ -5,6 +5,4 @@ import { action } from '@storybook/addon-actions'
 
 storiesOf('📦 Components/Quantity', module)
     .add('Default', () => <Quantity addLabel="Add" removeLabel="Remove" onUpdate={action('onUpdate')} />)
-    .add('w/ Remove', () => (
-        <Quantity addLabel="Add" removeLabel="Remove" onUpdate={action('onUpdate')} onRemove={action('onRemove')} />
-    ))
+    .add('w/ Remove', () => <Quantity addLabel="Add" removeLabel="Remove" onUpdate={action('onUpdate')} onRemove={action('onRemove')} />)
diff --git a/components/Quantity/Quantity.tsx b/components/Quantity/Quantity.tsx
index a77b527..bf2ce61 100644
--- a/components/Quantity/Quantity.tsx
+++ b/components/Quantity/Quantity.tsx
@@ -65,11 +65,7 @@ export const Quantity: Component<QuantityProps> = ({
             {_onUpdate && (
                 <Actions>
                     <Minus disabled={value < minValue} type="button" onClick={handleSubstract}>
-                        {_onRemove && value <= minValue ? (
-                            <RemoveIconSvg aria-label={substractLabel} />
-                        ) : (
-                            <MinusIconSvg aria-label={removeLabel} />
-                        )}
+                        {_onRemove && value <= minValue ? <RemoveIconSvg aria-label={substractLabel} /> : <MinusIconSvg aria-label={removeLabel} />}
                     </Minus>
                     <Plus disabled={value === maxValue} onClick={handleAdd}>
                         <PlusIconSvg aria-label={addLabel} />
diff --git a/components/Quote/Quote.story.tsx b/components/Quote/Quote.story.tsx
index bce3940..62795c0 100644
--- a/components/Quote/Quote.story.tsx
+++ b/components/Quote/Quote.story.tsx
@@ -2,6 +2,4 @@ import React from 'react'
 import Quote from '.'
 import { storiesOf } from '@storybook/react'
 
-storiesOf('📦 Components/Quote', module).add('Default', () => (
-    <Quote quote="Go for it, go for it." author="Frank Reynolds" description="It's Always Sunny in Philadelphia" />
-))
+storiesOf('📦 Components/Quote', module).add('Default', () => <Quote quote="Go for it, go for it." author="Frank Reynolds" description="It's Always Sunny in Philadelphia" />)
diff --git a/components/SearchBar/SearchBar.tsx b/components/SearchBar/SearchBar.tsx
index e5eb6ba..9f8bb6f 100644
--- a/components/SearchBar/SearchBar.tsx
+++ b/components/SearchBar/SearchBar.tsx
@@ -16,16 +16,7 @@ export type SearchBarProps = {
     onSearch?: (query: string) => any
 }
 
-export const SearchBar: Component<SearchBarProps> = ({
-    clearButton = true,
-    count,
-    label = 'Search',
-    loading,
-    value: defaultValue = '',
-    onSearch,
-    onUpdate,
-    ...props
-}) => {
+export const SearchBar: Component<SearchBarProps> = ({ clearButton = true, count, label = 'Search', loading, value: defaultValue = '', onSearch, onUpdate, ...props }) => {
     const [value, setValue] = useState(defaultValue)
 
     const throttledUpdate = useThrottle(() => {
@@ -59,14 +50,7 @@ export const SearchBar: Component<SearchBarProps> = ({
                 <Wrapper as="label">
                     <SearchIcon />
 
-                    <Field
-                        aria-label={label}
-                        onChange={handleChange}
-                        placeholder={label}
-                        as="input"
-                        type="text"
-                        value={value}
-                    />
+                    <Field aria-label={label} onChange={handleChange} placeholder={label} as="input" type="text" value={value} />
 
                     {count && <Count>{loading ? <Loader {...loading} /> : count}</Count>}
                     {clearButton && value.length > 0 && (
diff --git a/components/SlickSlider/SlickSlider.tsx b/components/SlickSlider/SlickSlider.tsx
index 8afbed1..9ec1211 100644
--- a/components/SlickSlider/SlickSlider.tsx
+++ b/components/SlickSlider/SlickSlider.tsx
@@ -7,13 +7,7 @@ const Slick = React.lazy(() => import('react-slick'))
 
 export type SlickSliderProps = Settings
 
-export const SlickSlider: Component<SlickSliderProps> = ({
-    beforeChange,
-    afterChange,
-    fade = false,
-    children,
-    ...props
-}) => {
+export const SlickSlider: Component<SlickSliderProps> = ({ beforeChange, afterChange, fade = false, children, ...props }) => {
     const draggable = !fade
 
     const [dragging, setDragging] = useState(false)
@@ -72,11 +66,7 @@ export const SlickSlider: Component<SlickSliderProps> = ({
                         {...props}
                     >
                         {items.map((item: any, index) => {
-                            return (
-                                <Item key={index}>
-                                    {React.cloneElement(item, { onClickCapture: handleOnItemClick, draggable: false })}
-                                </Item>
-                            )
+                            return <Item key={index}>{React.cloneElement(item, { onClickCapture: handleOnItemClick, draggable: false })}</Item>
                         })}
                     </Root>
                 ) : null}
diff --git a/components/Tabs/Tabs.styled.tsx b/components/Tabs/Tabs.styled.tsx
index 0d806fc..677b5c6 100644
--- a/components/Tabs/Tabs.styled.tsx
+++ b/components/Tabs/Tabs.styled.tsx
@@ -1,10 +1,5 @@
 import styled from 'styled-components'
-import {
-    Tabs as TabsComponent,
-    TabList as TabListComponent,
-    Tab as TabComponent,
-    TabPanel as TabPanelComponent,
-} from 'react-tabs'
+import { Tabs as TabsComponent, TabList as TabListComponent, Tab as TabComponent, TabPanel as TabPanelComponent } from 'react-tabs'
 
 export const Tabs = styled(TabsComponent)`
     display: flex;
diff --git a/components/Tabs/Tabs.tsx b/components/Tabs/Tabs.tsx
index 25c4d08..5533b07 100644
--- a/components/Tabs/Tabs.tsx
+++ b/components/Tabs/Tabs.tsx
@@ -6,12 +6,7 @@ import React from 'react'
 import { Component } from '../../lib'
 import { Tab as _Tab, Tabs as _Tabs, TabListWrapper, TabList as _TabList, TabPanel as _TabPanel } from './Tabs.styled'
 
-import {
-    TabsProps as _TabsProps,
-    TabListProps as _TabListProps,
-    TabProps as _TabProps,
-    TabPanelProps as _TabPanelProps,
-} from 'react-tabs'
+import { TabsProps as _TabsProps, TabListProps as _TabListProps, TabProps as _TabProps, TabPanelProps as _TabPanelProps } from 'react-tabs'
 
 export type TabsProps = _TabsProps
 export type TabListProps = _TabListProps
diff --git a/package.json b/package.json
index bd12dc6..5a883ae 100644
--- a/package.json
+++ b/package.json
@@ -1,87 +1,88 @@
 {
-  "name": "@pmet-public/luma-ui",
-  "version": "2.0.0",
-  "description": "Luma React UI LIbrary",
-  "repository": "https://github.com/PMET-public/luma-ui.git",
-  "author": "Carlos A. Cabrera @fnhhipster",
-  "license": "MIT",
-  "files": [
-    "dist/"
-  ],
-  "scripts": {
-    "dev": "start-storybook -p 5001 --quiet -s ./public",
-    "generate": "./bin/generate.js",
-    "storybook:deploy": "storybook-to-ghpages",
-    "tslint": "tslint -p . -c tslint.json",
-    "test": "echo \"No Tests Found 🧐\" "
-  },
-  "peerDependencies": {
-    "react": "16.13.1",
-    "react-dom": "16.13.1",
-    "styled-components": "5.1.0"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.7.7",
-    "@babel/plugin-proposal-nullish-coalescing-operator": "^7.7.4",
-    "@babel/plugin-proposal-optional-chaining": "^7.7.5",
-    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
-    "@babel/preset-env": "^7.7.7",
-    "@babel/preset-react": "^7.0.0",
-    "@babel/preset-typescript": "^7.7.7",
-    "@storybook/addon-a11y": "5.3.18",
-    "@storybook/addon-actions": "5.3.18",
-    "@storybook/addon-backgrounds": "5.3.18",
-    "@storybook/addon-knobs": "5.3.18",
-    "@storybook/addon-viewport": "5.3.18",
-    "@storybook/addons": "5.3.18",
-    "@storybook/react": "5.3.18",
-    "@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/google-map-react": "^1.1.5",
-    "@types/lodash.get": "^4.4.6",
-    "@types/node": "^13.1.4",
-    "@types/prismjs": "^1.16.0",
-    "@types/react": "^16.9.17",
-    "@types/react-dom": "^16.9.0",
-    "@types/react-slick": "^0.23.4",
-    "@types/react-tabs": "^2.3.1",
-    "@types/styled-components": "5.1.0",
-    "babel-loader": "^8.0.5",
-    "babel-plugin-inline-react-svg": "^1.1.0",
-    "babel-plugin-styled-components": "1.10.7",
-    "braintree-web-drop-in": "^1.20.4",
-    "common-tags": "^1.8.0",
-    "concurrently": "^5.0.2",
-    "core-js": "3.6.4",
-    "d3-ease": "^1.0.6",
-    "focus-visible": "^5.0.2",
-    "google-map-react": "^1.1.6",
-    "lodash.get": "^4.4.2",
-    "prettier": "2.0.2",
-    "prismjs": "^1.18.0",
-    "prop-types": "^15.0.0-0",
-    "raw-loader": "^4.0.0",
-    "react": "16.13.1",
-    "react-content-loader": "^5.0.4",
-    "react-dom": "16.13.1",
-    "react-hook-form": "^5.0.3",
-    "react-is": "^16.13.1",
-    "react-slick": "^0.25.2",
-    "react-spring": "^8.0.25",
-    "react-tabs": "^3.1.0",
-    "react-toastify": "^5.5.0",
-    "remixicon": "^2.3.0",
-    "rimraf": "^3.0.0",
-    "styled-components": "5.1.0",
-    "tslint": "^6.0.0",
-    "tslint-config-prettier": "^1.18.0",
-    "tslint-loader": "^3.5.4",
-    "tslint-plugin-prettier": "^2.1.0",
-    "tslint-react": "^4.2.0",
-    "tslint-react-hooks": "^2.2.1",
-    "typescript": "^3.7.4",
-    "webpack": "^4.41.5"
-  }
+    "name": "@pmet-public/luma-ui",
+    "version": "2.0.0",
+    "description": "Luma React UI LIbrary",
+    "repository": "https://github.com/PMET-public/luma-ui.git",
+    "author": "Carlos A. Cabrera @fnhhipster",
+    "license": "MIT",
+    "files": [
+        "dist/"
+    ],
+    "scripts": {
+        "dev": "start-storybook -p 5001 --quiet -s ./public",
+        "generate": "./bin/generate.js",
+        "storybook:deploy": "storybook-to-ghpages",
+        "tslint": "tslint -p . -c tslint.json",
+        "test": "echo \"No Tests Found 🧐\" ",
+        "prettier": "prettier --check --write ."
+    },
+    "peerDependencies": {
+        "react": "16.13.1",
+        "react-dom": "16.13.1",
+        "styled-components": "5.1.0"
+    },
+    "devDependencies": {
+        "@babel/core": "^7.7.7",
+        "@babel/plugin-proposal-nullish-coalescing-operator": "^7.7.4",
+        "@babel/plugin-proposal-optional-chaining": "^7.7.5",
+        "@babel/plugin-syntax-dynamic-import": "^7.2.0",
+        "@babel/preset-env": "^7.7.7",
+        "@babel/preset-react": "^7.0.0",
+        "@babel/preset-typescript": "^7.7.7",
+        "@storybook/addon-a11y": "5.3.18",
+        "@storybook/addon-actions": "5.3.18",
+        "@storybook/addon-backgrounds": "5.3.18",
+        "@storybook/addon-knobs": "5.3.18",
+        "@storybook/addon-viewport": "5.3.18",
+        "@storybook/addons": "5.3.18",
+        "@storybook/react": "5.3.18",
+        "@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/google-map-react": "^1.1.5",
+        "@types/lodash.get": "^4.4.6",
+        "@types/node": "^13.1.4",
+        "@types/prismjs": "^1.16.0",
+        "@types/react": "^16.9.17",
+        "@types/react-dom": "^16.9.0",
+        "@types/react-slick": "^0.23.4",
+        "@types/react-tabs": "^2.3.1",
+        "@types/styled-components": "5.1.0",
+        "babel-loader": "^8.0.5",
+        "babel-plugin-inline-react-svg": "^1.1.0",
+        "babel-plugin-styled-components": "1.10.7",
+        "braintree-web-drop-in": "^1.20.4",
+        "common-tags": "^1.8.0",
+        "concurrently": "^5.0.2",
+        "core-js": "3.6.4",
+        "d3-ease": "^1.0.6",
+        "focus-visible": "^5.0.2",
+        "google-map-react": "^1.1.6",
+        "lodash.get": "^4.4.2",
+        "prettier": "2.0.2",
+        "prismjs": "^1.18.0",
+        "prop-types": "^15.0.0-0",
+        "raw-loader": "^4.0.0",
+        "react": "16.13.1",
+        "react-content-loader": "^5.0.4",
+        "react-dom": "16.13.1",
+        "react-hook-form": "^5.0.3",
+        "react-is": "^16.13.1",
+        "react-slick": "^0.25.2",
+        "react-spring": "^8.0.25",
+        "react-tabs": "^3.1.0",
+        "react-toastify": "^5.5.0",
+        "remixicon": "^2.3.0",
+        "rimraf": "^3.0.0",
+        "styled-components": "5.1.0",
+        "tslint": "^6.0.0",
+        "tslint-config-prettier": "^1.18.0",
+        "tslint-loader": "^3.5.4",
+        "tslint-plugin-prettier": "^2.1.0",
+        "tslint-react": "^4.2.0",
+        "tslint-react-hooks": "^2.2.1",
+        "typescript": "^3.7.4",
+        "webpack": "^4.41.5"
+    }
 }
diff --git a/templates/Checkout/Checkout.styled.tsx b/templates/Checkout/Checkout.styled.tsx
deleted file mode 100644
index 7c00187..0000000
--- a/templates/Checkout/Checkout.styled.tsx
+++ /dev/null
@@ -1,124 +0,0 @@
-import styled from 'styled-components'
-
-import { Root as CartSummaryRoot } from '../../components/CartSummary/CartSummary.styled'
-import { Root as CartListRoot, Thumbnail as CartItemThumb } from '../../components/CartList/CartList.styled'
-
-import PendingIconSvg from 'remixicon/icons/System/checkbox-blank-circle-fill.svg'
-import DoneIconSvg from 'remixicon/icons/Design/edit-circle-fill.svg'
-
-export const Root = styled.div`
-    display: grid;
-    grid-template-rows: 1fr auto;
-    height: 100%;
-    grid-row-gap: 4rem;
-    grid-column-gap: 2rem;
-
-    @media ${props => props.theme.breakpoints.large} {
-        grid-template-rows: 1fr;
-        grid-template-columns: 1.25fr 0.75fr;
-    }
-`
-
-export const Wrapper = styled.div`
-    display: grid;
-    grid-gap: 4rem;
-    grid-auto-rows: max-content;
-    padding: 2rem ${props => props.theme.layout.margin};
-
-    @media ${props => props.theme.breakpoints.large} {
-        padding-top: 4rem;
-        padding-bottom: 4rem;
-    }
-`
-
-export const CartSummaryWrapper = styled.div`
-    display: grid;
-    grid-auto-rows: max-content;
-    grid-template-areas: 'summary' 'list';
-
-    ${CartListRoot} {
-        grid-area: list;
-        padding: 2rem ${props => props.theme.layout.margin};
-        ${CartItemThumb} {
-            width: 10rem;
-        }
-    }
-
-    ${CartSummaryRoot} {
-        grid-area: summary;
-        padding: 2rem ${props => props.theme.layout.margin};
-        border-top: 0.1rem solid ${props => props.theme.colors.onSurface10};
-
-        @media ${props => props.theme.breakpoints.large} {
-            padding-top: 4rem;
-            padding-bottom: 4rem;
-            border-top: 0;
-        }
-    }
-
-    @media ${props => props.theme.breakpoints.large} {
-        grid-template-areas: 'list' 'summary';
-        grid-gap: 0;
-        grid-template-rows: 1fr auto;
-
-        ${CartListRoot} {
-            background-color: ${props => props.theme.colors.graySurface};
-        }
-
-        ${CartSummaryRoot} {
-            background-color: ${props => props.theme.colors.graySurface};
-            position: sticky;
-            bottom: 0;
-        }
-    }
-`
-
-export const Steps = styled.div`
-    display: grid;
-    grid-auto-rows: max-content;
-    grid-gap: 8rem;
-`
-
-export const PendingIcon = styled(PendingIconSvg)``
-export const DoneIcon = styled(DoneIconSvg)``
-
-export const Title = styled.div<{ $active: boolean }>`
-    font-family: ${props => props.theme.typography.heading.family};
-    font-weight: ${props => props.theme.typography.heading.weight.bold};
-    font-size: ${props => props.theme.typography.heading.size.secondary};
-    color: ${props => props.theme.colors.onSurface};
-    opacity: 0.6;
-    margin-bottom: 2rem;
-    display: grid;
-    grid-auto-flow: column;
-    grid-auto-columns: max-content;
-    grid-gap: 1rem;
-    align-items: center;
-
-    ${PendingIcon} {
-        margin-top: 0.4rem;
-        fill: currentColor;
-        width: 0.75em;
-        opacity: 0.35;
-    }
-
-    ${DoneIcon} {
-        margin-top: 0.2rem;
-        width: 1em;
-        display: none;
-        fill: currentColor;
-    }
-
-    ${props =>
-        props.$active &&
-        `
-            opacity: 1;
-            ${PendingIcon} {
-                display: none
-            }
-
-            ${DoneIcon} {
-                display: block;
-            }
-        `}
-`
diff --git a/templates/Checkout/Checkout.tsx b/templates/Checkout/Checkout.tsx
deleted file mode 100644
index a42fc48..0000000
--- a/templates/Checkout/Checkout.tsx
+++ /dev/null
@@ -1,123 +0,0 @@
-import React, { useEffect, useRef } from 'react'
-import { Component } from '../../lib'
-import { Root, Wrapper, Steps, Title, CartSummaryWrapper, DoneIcon, PendingIcon } from './Checkout.styled'
-
-import CartList, { CartListProps } from '../../components/CartList'
-import CartSummary, { CartSummaryProps } from '../../components/CartSummary'
-import ContactInfoForm, { ContactInfoFormProps } from '../../components/Checkout/ContactInfoForm'
-import ShippingMethodForm, { ShippingMethodFormProps } from '../../components/Checkout/ShippingMethodForm'
-import PaymentMethodForm, { PaymentMethodFormProps } from '../../components/Checkout/PaymentMethodForm'
-import PlaceOrderForm, { PlaceOrderFormProps } from '../../components/Checkout/PlaceOrderForm'
-import Breadcrumbs, { BreadcrumbsProps } from '../../components/Breadcrumbs'
-
-export type CheckoutProps = {
-    step: 1 | 2 | 3 | 4
-    breadcrumbs: BreadcrumbsProps
-    contactInfo: ContactInfoFormProps & { title: string }
-    shippingMethod: ShippingMethodFormProps & { title: string }
-    paymentMethod: PaymentMethodFormProps & { title: string }
-    placeOrder: PlaceOrderFormProps & { title: string }
-    list: CartListProps
-    summary: CartSummaryProps
-    loading?: boolean
-}
-
-export const Checkout: Component<CheckoutProps> = ({
-    step = 1,
-    breadcrumbs,
-    contactInfo,
-    shippingMethod,
-    paymentMethod,
-    placeOrder,
-    list,
-    summary,
-    loading,
-    ...props
-}) => {
-    const contactInfoElem = useRef<HTMLDivElement>(null)
-    const shippingMethodElem = useRef<HTMLDivElement>(null)
-    const paymentMethodElem = useRef<HTMLDivElement>(null)
-    const placeOrderElem = useRef<HTMLDivElement>(null)
-
-    useEffect(() => {
-        switch (step) {
-            case 1:
-                if (!contactInfoElem.current) return
-                window.scrollTo({ top: 0, behavior: 'smooth' }) //.scrollIntoView(scrollOptions)
-                break
-            case 2:
-                if (!shippingMethodElem.current) return
-                window.scrollTo({
-                    top: shippingMethodElem.current.offsetTop - shippingMethodElem.current.offsetHeight,
-                    behavior: 'smooth',
-                })
-                break
-            case 3:
-                if (!paymentMethodElem.current) return
-                window.scrollTo({
-                    top: paymentMethodElem.current.offsetTop - paymentMethodElem.current.offsetHeight,
-                    behavior: 'smooth',
-                })
-                break
-            case 4:
-                if (!placeOrderElem.current) return
-                window.scrollTo({
-                    top: placeOrderElem.current.offsetTop - placeOrderElem.current.offsetHeight,
-                    behavior: 'smooth',
-                })
-                break
-            default:
-                break
-        }
-    }, [step])
-
-    return (
-        <Root {...props}>
-            <Wrapper>
-                <Breadcrumbs loading={loading} {...breadcrumbs} />
-
-                <Steps>
-                    <div ref={contactInfoElem}>
-                        <Title $active>
-                            <DoneIcon />
-                            <PendingIcon />
-                            {contactInfo.title}
-                        </Title>
-                        <ContactInfoForm {...contactInfo} />
-                    </div>
-
-                    <div ref={shippingMethodElem}>
-                        <Title $active={step > 1}>
-                            <DoneIcon />
-                            <PendingIcon />
-                            {shippingMethod.title}
-                        </Title>
-                        {step > 1 && <ShippingMethodForm loading={loading} {...shippingMethod} />}
-                    </div>
-                    <div ref={paymentMethodElem}>
-                        <Title $active={step > 2}>
-                            <DoneIcon />
-                            <PendingIcon />
-                            {paymentMethod.title}
-                        </Title>
-                        {step > 2 && <PaymentMethodForm loading={loading} {...paymentMethod} />}
-                    </div>
-
-                    <div ref={placeOrderElem}>
-                        <Title $active={step > 3}>
-                            <DoneIcon />
-                            <PendingIcon />
-                            Finish
-                        </Title>
-                        {step > 3 && <PlaceOrderForm loading={loading} {...placeOrder} />}
-                    </div>
-                </Steps>
-            </Wrapper>
-
-            <CartSummaryWrapper>
-                <CartList loading={loading} {...list} />
-                <CartSummary {...summary} />
-            </CartSummaryWrapper>
-        </Root>
-    )
-}
diff --git a/templates/Checkout/index.ts b/templates/Checkout/index.ts
deleted file mode 100644
index 44676b0..0000000
--- a/templates/Checkout/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from './Checkout'
-export { Checkout as default } from './Checkout'
diff --git a/tsconfig.json b/tsconfig.json
index f9ea21d..b0bc40f 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -3,10 +3,7 @@
         "allowJs": true,
         "allowSyntheticDefaultImports": true,
         "jsx": "preserve",
-        "lib": [
-            "dom",
-            "es2017"
-        ],
+        "lib": ["dom", "es2017"],
         "module": "esnext",
         "moduleResolution": "node",
         "noEmit": true,
@@ -19,20 +16,12 @@
         "strict": true,
         "target": "esnext",
         "baseUrl": "./",
-        "typeRoots": [
-            "./node_modules/@types",
-            "./@types"
-        ],
+        "typeRoots": ["./node_modules/@types", "./@types"],
         "forceConsistentCasingInFileNames": true,
         "esModuleInterop": true,
         "resolveJsonModule": true,
-        "isolatedModules": true,
+        "isolatedModules": true
     },
-    "exclude": [
-        "node_modules"
-    ],
-    "include": [
-        "**/*.ts",
-        "**/*.tsx"
-    ]
+    "exclude": ["node_modules"],
+    "include": ["**/*.ts", "**/*.tsx"]
 }
diff --git a/tslint.json b/tslint.json
index c595385..a604531 100644
--- a/tslint.json
+++ b/tslint.json
@@ -1,22 +1,17 @@
 {
     "defaultSeverity": "error",
-    "extends": [
-        "tslint-react",
-        "tslint-react-hooks",
-        "tslint-plugin-prettier",
-        "tslint-config-prettier"
-    ],
+    "extends": ["tslint-react", "tslint-react-hooks", "tslint-plugin-prettier", "tslint-config-prettier"],
     "jsRules": {},
     "rules": {
         "prettier": true,
-        "jsx-boolean-value": false
+        "jsx-boolean-value": false,
+        "react-hooks-nesting": {
+            "severity": "error",
+            "options": {}
+        }
     },
     "rulesDirectory": [],
     "linterOptions": {
-        "exclude": [
-            "**/node_modules/**",
-            "**/dist/**",
-            "**/types/**"
-        ]
+        "exclude": ["**/node_modules/**", "**/dist/**", "**/types/**"]
     }
 }