fixes

src/Accordion/Accordion.tsx

@@ -45,7 +45,7 @@ const AccordionContent = createComponent({
 interface AccordionItemProps extends Partial<Pick<AccordionProps, 'contentContainerStyle'>> {
   title: string;
   isOpen?: boolean;
-  content: React.ReactNode | string;
+  content?: React.ReactNode | string;
   onToggle?: () => void;
   renderHeader?: (p: Pick<AccordionItemProps, 'isOpen' | 'title' | 'onToggle'>) => React.ReactNode;
   renderContent?: (p: Pick<AccordionItemProps, 'isOpen' | 'content'>) => React.ReactNode;

src/Box/Box.stories.tsx

@@ -17,5 +17,8 @@ export const Basic = () => (
     <Box m={2} p={2} style={{ backgroundColor: 'gainsboro' }} onClick={() => {}}>
       I am Box
     </Box>
+    <Box as="div" m={2} p={2} style={{ backgroundColor: 'gainsboro' }} onClick={() => {}}>
+      I am Box as div
+    </Box>
   </>
 );

src/Button/Button.stories.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Button from './Button';
+import { Button } from './Button';
 
 export default {
   title: 'Components|Button',
@@ -12,6 +12,9 @@ export const All = () => (
     <Button variant="secondary">Secondary Button</Button>
     <Button variant="grey">Grey Button</Button>
     <Button variant="primaryText">Text Button</Button>
+    <Button variant="primaryText" onClick={() => {}}>
+      Text Button with onclick
+    </Button>
   </Button.Group>
 );
 

src/Button/Button.tsx

@@ -171,7 +171,7 @@ const ButtonForward: FC<React.ComponentProps<typeof StyledButton> & ButtonProps>
   )
 );
 
-const Button = ButtonForward as typeof ButtonForward & ButtonStaticMembers;
+export const Button = ButtonForward as typeof ButtonForward & ButtonStaticMembers;
 
 Button.defaultProps = {
   variant: 'primary',
@@ -239,5 +239,3 @@ Button.Group = createComponent<ButtonGroupProps>({
     ${vertical && verticalCss({ breakpoints, vertical, borderRadius })};
   `,
 });
-
-export default Button;

src/Button/index.ts

@@ -1 +1 @@
-export { default } from './Button';
+export * from './Button';

src/Card/Card.tsx

@@ -21,9 +21,9 @@ const StyledCard = createComponent<CardProps & BoxProps>({
 });
 
 export interface CardStaticMembers {
-  Footer: React.ComponentType<BoxProps>;
-  Body: React.ComponentType<BoxProps>;
-  Header: React.ComponentType<BoxProps>;
+  Footer: any;
+  Body: any;
+  Header: any;
 }
 
 /** Cards provide a flexible way to encapsulate content with multiple variants and options. */

src/Collapse/Collapse.stories.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/no-this-in-sfc */
 import React from 'react';
-import Button from '../Button';
+import { Button } from '../Button';
 import { Box } from '../Box';
 import Collapse from './Collapse';
 

src/Dropdown/Dropdown.stories.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react';
 import Dropdown, { PLACEMENT_TRANSITION_ORIGINS, Placement } from './Dropdown';
 import { Flex } from '../Flex';
 import RadioGroup from '../Form/RadioGroup';
-import Button from '../Button';
+import { Button } from '../Button';
 
 export default {
   title: 'Components|Dropdown',

src/Form/Formbot.example.js

@@ -3,7 +3,7 @@ import { Input } from './Input';
 import Select from './Select';
 import Formbot, { Context } from './Formbot';
 import Form from './Form';
-import Button from '../Button';
+import { Button } from '../Button';
 import Fieldset from './Fieldset';
 import CheckboxGroup from './CheckboxGroup';
 import RadioGroup from './RadioGroup';

src/Form/Formbot.stories.tsx

@@ -12,7 +12,7 @@ import Select from './Select';
 import CheckboxGroup from './CheckboxGroup';
 import RadioGroup from './RadioGroup';
 import Switch from './Switch';
-import Button from '../Button';
+import { Button } from '../Button';
 import { Input } from './Input';
 
 const ButtonAsAny = Button as any;

src/Form/Input.stories.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { object, select, boolean } from '@storybook/addon-knobs';
 import { Formbot } from './Formbot';
-import Button from '../Button';
+import { Button } from '../Button';
 import { Input } from './Input';
 
 const ButtonAsAny = Button as any;

src/Grid/Column.tsx

@@ -1,4 +1,3 @@
-import React, { FC } from 'react';
 import { css } from 'styled-components';
 import Flex, { FlexProps } from '../Flex';
 import { createComponent } from '../utils';
@@ -40,7 +39,7 @@ export interface ColumnProps extends FlexProps {
   xsOffset?: number;
 }
 
-const StyledColumn = createComponent<ColumnProps>({
+export const Column = createComponent<ColumnProps>({
   name: 'Column',
   as: Flex,
   style: ({ theme, order, ...props }) => {
@@ -76,8 +75,6 @@ const StyledColumn = createComponent<ColumnProps>({
   },
 });
 
-export const Column: FC<ColumnProps> = props => <StyledColumn {...props} />;
-
 Column.defaultProps = {
   collapse: false,
 };

src/Modal/Modal.dropdownExample.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Modal } from './Modal';
-import Button from '../Button';
+import { Button } from '../Button';
 import { Input } from '../Form/Input';
 import Dropdown from '../Dropdown';
 

src/Modal/Modal.example.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Modal } from './Modal';
-import Button from '../Button';
+import { Button } from '../Button';
 import { Input } from '../Form/Input';
 
 export default class ModalDemo extends React.Component<any> {

src/Modal/Modal.noAutoFocusEx.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Modal } from './Modal';
-import Button from '../Button';
+import { Button } from '../Button';
 import { Input } from '../Form/Input';
 
 export default class ModalNoAutoFocusExample extends React.Component<any> {

src/Placeholder/Placeholder.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import { css } from 'styled-components';
 import { Box } from '../Box';
-import Button from '../Button';
+import { Button } from '../Button';
 import Spinner from '../Spinner';
 import { createComponent } from '../utils';
 

src/Toast/Toast.stories.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import ToastContainer from './ToastContainer';
 import toast from './toast';
-import Button from '../Button';
+import { Button } from '../Button';
 
 export default {
   title: 'Components|Toast',

src/index.ts

@@ -3,7 +3,7 @@ export * from './Alert';
 export { default as Avatar } from './Avatar';
 export * from './Badge';
 export * from './Box';
-export { default as Button } from './Button';
+export * from './Button';
 export { default as Card } from './Card';
 export { default as Checkbox } from './Form/Checkbox';
 export { default as CheckboxGroup } from './Form/CheckboxGroup';