use createTheme in docs

Author: steven-mercatante

src/components/CustomThemeDemo.js

@@ -1,8 +1,7 @@
 import React from 'react';
-import { Timeline, Events, TextEvent, themes } from '../index';
-import merge from 'lodash.merge';
+import { Timeline, Events, TextEvent, themes, createTheme } from '../index';
 
-const customTheme = merge({}, themes.default, {
+const customTheme = createTheme(themes.default, {
   card: {
     backgroundColor: '#efefef',
   },

src/components/Theming.stories.js

@@ -6,15 +6,15 @@ import {
   ImageEvent,
   UrlButton,
   themes,
+  createTheme,
 } from '../index';
-import merge from 'lodash.merge';
 
 export default {
   title: 'Timeline/Theming',
 };
 
 export const customThemeExample = () => {
-  const theme = merge({}, themes.default, {
+  const theme = createTheme(themes.default, {
     timeline: {
       backgroundColor: '#070D24',
     },

src/components/Theming.stories.mdx

@@ -16,10 +16,9 @@ Check out the example below in which we customize some of the elements.
 
 ```jsx
 import React from 'react';
-import { Timeline, Events, TextEvent, themes } from '@merc/react-timeline';
-import merge from 'lodash.merge';
+import { Timeline, Events, TextEvent, themes, createTheme } from '@merc/react-timeline';
 
-const customTheme = merge({}, themes.default, {
+const customTheme = createTheme(themes.default, {
   card: {
     backgroundColor: '#efefef',
   },

src/index.js

@@ -4,6 +4,7 @@ import Events from './components/Events';
 import Timeline from './components/Timeline';
 import themes from './themes';
 import LAYOUTS from './constants/layouts';
+import { createTheme } from './utils/themes';
 
 import ImageAtom from './components/atoms/ImageAtom';
 import MarkdownAtom from './components/atoms/MarkdownAtom';
@@ -40,4 +41,5 @@ export {
   YouTubeEvent,
   themes,
   LAYOUTS,
+  createTheme,
 };