improvement(image): export themable version of styled image component

packages/styled/components/image/index.js

@@ -1,12 +1,9 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
+import createWithUserThemes from '../hoc/createWithUserThemes';
 import IrvingPicture from './irvingPicture';
 import IrvingImg from './irvingImg';
-import {
-  Caption,
-  Wrapper,
-  WrapperElementFigure,
-} from './styles';
+import * as defaultTheme from './styles';
 
 const Image = (props) => {
   const {
@@ -22,7 +19,13 @@ const Image = (props) => {
     srcset,
     sizes,
     sourceTags,
+    theme,
   } = props;
+  const {
+    Caption,
+    Wrapper,
+    WrapperElementFigure,
+  } = theme;
   const [error, setError] = useState(false);
   const onError = () => setError(true);
 
@@ -108,6 +111,10 @@ Image.propTypes = {
     PropTypes.bool,
     PropTypes.string,
   ]).isRequired,
+  /**
+   * Low Quality Image Placeholder (LQIP) source.
+   */
+  lqipSrc: PropTypes.string,
   /**
    * Should this component render a `<picture>` element?
    */
@@ -143,15 +150,21 @@ Image.propTypes = {
       media: PropTypes.string.isRequired,
     })
   ),
+  /**
+   * Theme for this component
+   */
+  theme: PropTypes.object.isRequired,
 };
 
 Image.defaultProps = {
   caption: '',
   className: '',
+  lqipSrc: '',
   sourceTags: [],
   picture: false,
   sizes: '',
   showCaption: false,
 };
 
 export default Image;
+export const themeImage = createWithUserThemes(Image, defaultTheme);