From e3a86e9d51530df53714c74f0c23b7999e1527cb Mon Sep 17 00:00:00 2001
From: Owen Stowe <ostowe@gmail.com>
Date: Thu, 30 Apr 2020 19:34:47 -0400
Subject: [PATCH] improvement(image): export themable version of styled image
 component

---
 packages/styled/components/image/index.js | 23 ++++++++++++++++++-----
 1 file changed, 18 insertions(+), 5 deletions(-)

diff --git a/packages/styled/components/image/index.js b/packages/styled/components/image/index.js
index 2a578f6029..e888a0fef2 100644
--- a/packages/styled/components/image/index.js
+++ b/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,11 +150,16 @@ Image.propTypes = {
       media: PropTypes.string.isRequired,
     })
   ),
+  /**
+   * Theme for this component
+   */
+  theme: PropTypes.object.isRequired,
 };
 
 Image.defaultProps = {
   caption: '',
   className: '',
+  lqipSrc: '',
   sourceTags: [],
   picture: false,
   sizes: '',
@@ -155,3 +167,4 @@ Image.defaultProps = {
 };
 
 export default Image;
+export const themeImage = createWithUserThemes(Image, defaultTheme);