diginet-core-ui 1.3.87 → 1.3.88

package/components/grid/Col.js

@@ -1,4 +1,5 @@
 /** @jsxRuntime classic */
+
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
@@ -27,17 +28,18 @@ const useStyles = makeStyles({
     }
   }
 });
+
 const Col = props => {
   const classes = useStyles();
   const {
     className
   } = props;
-  return jsx(Grid, {
-    ...props,
+  return jsx(Grid, { ...props,
     className: classNames(`DGN-UI-Col ${classes.customCol}`, className),
     item: true
   });
 };
+
 Col.defaultProps = {
   className: '',
   columns: 12,
@@ -54,28 +56,40 @@ Col.defaultProps = {
 Col.propTypes = {
   /** The content of the component. */
   children: PropTypes.node,
+
   /** Class for component. */
   className: PropTypes.string,
+
   /** The number of columns. */
   columns: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number, PropTypes.object]),
+
   /** Defines the `flex-direction` style property. It is applied for all screen sizes. */
   direction: PropTypes.oneOfType([PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), PropTypes.object]),
+
   /** If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for the `lg` breakpoint and wider screens if not overridden. */
   lg: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+
   /** If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for the `md` breakpoint and wider screens if not overridden. */
   md: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+
   /** If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for the `sm` breakpoint and wider screens if not overridden. */
   sm: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+
   /** Style inline of component. */
   style: PropTypes.object,
+
   /** Self-align of the grid item. */
   verticalAlign: PropTypes.oneOf(['auto', 'start', 'center', 'end']),
+
   /** Defines the flex-wrap style property. It's applied for all screen sizes. */
   wrap: PropTypes.oneOf(['nowrap', 'wrap-reverse', 'wrap']),
+
   /** If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for the `xl` breakpoint and wider screens if not overridden. */
   xl: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+
   /** If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for all the screen sizes with the lowest priority. */
   xs: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+
   /** If `true`, it sets `min-width: 0` on the item. Refer to the limitations section of the documentation to better understand the use case. */
   zeroMinWidth: PropTypes.bool
 };

package/components/grid/Container.js

@@ -1,27 +1,32 @@
 /** @jsxRuntime classic */
+
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
 import { classNames } from "../../utils";
 import Grid from '.';
+
 const checkChildren = children => {
   if (!children) return false;
+
   if (Array.isArray(children)) {
     return !children.every(v => v === false);
   }
+
   return true;
 };
+
 const Container = props => {
   const {
     className,
     children
   } = props;
-  return checkChildren(children) ? jsx(Grid, {
-    ...props,
+  return checkChildren(children) ? jsx(Grid, { ...props,
     className: classNames('DGN-UI-Container', className),
     container: true
   }) : null;
 };
+
 Container.defaultProps = {
   className: '',
   columns: 12,
@@ -60,32 +65,46 @@ Container.defaultProps = {
 Container.propTypes = {
   /** The content of the component. */
   children: PropTypes.node,
+
   /** Class for component. */
   className: PropTypes.string,
+
   /** The number of columns. */
   columns: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number, PropTypes.object]),
+
   /** Defines the horizontal space between the type `Col` components. It overrides the value of the `spacing` prop. */
   columnSpacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
+
   /** Defines the `flex-direction` style property. It is applied for all screen sizes. */
   direction: PropTypes.oneOfType([PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), PropTypes.object]),
+
   /** If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for the `lg` breakpoint and wider screens if not overridden. */
   lg: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+
   /** If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for the `md` breakpoint and wider screens if not overridden. */
   md: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+
   /** Defines the vertical space between the type `Col` components. It overrides the value of the `spacing` prop. */
   rowSpacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
+
   /** If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for the `sm` breakpoint and wider screens if not overridden. */
   sm: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+
   /** Defines the space between the type `Col` components */
   spacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
+
   /** Style inline of component. */
   style: PropTypes.object,
+
   /** Defines the flex-wrap style property. It's applied for all screen sizes. */
   wrap: PropTypes.oneOf(['nowrap', 'wrap-reverse', 'wrap']),
+
   /** If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for the `xl` breakpoint and wider screens if not overridden. */
   xl: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+
   /** If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for all the screen sizes with the lowest priority. */
   xs: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+
   /** If `true`, it sets `min-width: 0` on the item. Refer to the limitations section of the documentation to better understand the use case. */
   zeroMinWidth: PropTypes.bool
 };

package/components/grid/Row.js

@@ -1,27 +1,32 @@
 /** @jsxRuntime classic */
+
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
 import { classNames } from "../../utils";
 import Grid from '.';
+
 const checkChildren = children => {
   if (!children) return false;
+
   if (Array.isArray(children)) {
     return !children.every(v => v === false);
   }
+
   return true;
 };
+
 const Row = props => {
   const {
     className,
     children
   } = props;
-  return checkChildren(children) ? jsx(Grid, {
-    ...props,
+  return checkChildren(children) ? jsx(Grid, { ...props,
     className: classNames('DGN-UI-Row', className),
     container: true
   }) : null;
 };
+
 Row.defaultProps = {
   className: '',
   columns: 12,
@@ -53,32 +58,46 @@ Row.defaultProps = {
 Row.propTypes = {
   /** The content of the component. */
   children: PropTypes.node,
+
   /** Class for component. */
   className: PropTypes.string,
+
   /** The number of columns. */
   columns: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number, PropTypes.object]),
+
   /** Defines the horizontal space between the type `Col` components. It overrides the value of the `spacing` prop. */
   columnSpacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
+
   /** Defines the `flex-direction` style property. It is applied for all screen sizes. */
   direction: PropTypes.oneOfType([PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), PropTypes.object]),
+
   /** If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for the `lg` breakpoint and wider screens if not overridden. */
   lg: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+
   /** If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for the `md` breakpoint and wider screens if not overridden. */
   md: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+
   /** Defines the vertical space between the type `Col` components. It overrides the value of the `spacing` prop. */
   rowSpacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
+
   /** If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for the `sm` breakpoint and wider screens if not overridden. */
   sm: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+
   /** Defines the space between the type `Col` components */
   spacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
+
   /** Style inline of component. */
   style: PropTypes.object,
+
   /** Defines the flex-wrap style property. It's applied for all screen sizes. */
   wrap: PropTypes.oneOf(['nowrap', 'wrap-reverse', 'wrap']),
+
   /** If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for the `xl` breakpoint and wider screens if not overridden. */
   xl: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+
   /** If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for all the screen sizes with the lowest priority. */
   xs: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+
   /** If `true`, it sets `min-width: 0` on the item. Refer to the limitations section of the documentation to better understand the use case. */
   zeroMinWidth: PropTypes.bool
 };

package/components/grid/index.js

@@ -1,4 +1,5 @@
 /** @jsxRuntime classic */
+
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import PropTypes from 'prop-types';
@@ -43,16 +44,21 @@ const Grid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const topSpacing = topSpacingProp !== null && topSpacingProp !== void 0 ? topSpacingProp : rowSpacing;
   const leftSpacing = leftSpacingProp !== null && leftSpacingProp !== void 0 ? leftSpacingProp : columnSpacing;
   const ref = useRef(null);
+
   const _GridCSS = GridCSS(direction, zeroMinWidth, container, item, wrap, verticalAlign);
+
   const _GridSpacingCSS = GridSpacingCSS(rowSpacing, columnSpacing, topSpacing, leftSpacing);
+
   const _HandleGridCSS = HandleGridCSS([xs, sm, md, lg, xl], columns);
+
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     currentRef.element = ref.current;
-    const _instance = {
-      ...action
+    const _instance = { ...action
     }; // methods
+
     _instance.__proto__ = {}; // hidden methods
+
     currentRef.instance = _instance;
     return currentRef;
   });
@@ -68,10 +74,12 @@ const Grid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }, children));
   }, [columns, columnSpacing, leftSpacing, rowSpacing, topSpacing, children, className, container, direction, id, item, lg, md, sm, spacing, style, verticalAlign, wrap, xl, xs, zeroMinWidth]);
 }));
+
 const getOffset = val => {
   const parse = parseFloat(val);
   return `${parse}${String(val).replace(String(parse), '') || 'px'}`;
 };
+
 const processSizeArray = sizeArr => {
   let lastValue = false;
   sizeArr = sizeArr.map(item => {
@@ -80,8 +88,10 @@ const processSizeArray = sizeArr => {
   });
   return sizeArr;
 };
+
 const handleGrid = (size, value, columns) => {
   let css = '';
+
   if (value === true) {
     css = `
             flex-basis: 0;
@@ -105,10 +115,12 @@ const handleGrid = (size, value, columns) => {
         `;
     });
   }
+
   return `${themeBreakpoints.up(size)} {
         ${css}
     }`;
 };
+
 const GridCSS = (direction, zeroMinWidth, container, item, wrap, verticalAlign) => css`
     ${boxBorder};
     ${container && `
@@ -125,18 +137,22 @@ const GridCSS = (direction, zeroMinWidth, container, item, wrap, verticalAlign)
   return `flex-direction: ${propValue}`;
 })};
 `;
+
 const GridSpacingCSS = (rowSpacing, columnSpacing, topSpacing, leftSpacing) => css`
     ${topSpacing && handleBreakpoints(topSpacing, propValue => {
   const spacing = typeof propValue === 'number' ? themeSpacing(propValue) : propValue;
+
   if (spacing !== '0px') {
     return `
             margin-top: -${getOffset(spacing)};
             `;
   }
+
   return '';
 })};
     ${rowSpacing && handleBreakpoints(rowSpacing, propValue => {
   const spacing = typeof propValue === 'number' ? themeSpacing(propValue) : propValue;
+
   if (spacing !== '0px') {
     return `
             & > .DGN-UI-Grid-item {
@@ -144,19 +160,23 @@ const GridSpacingCSS = (rowSpacing, columnSpacing, topSpacing, leftSpacing) => c
             }
             `;
   }
+
   return '';
 })};
     ${leftSpacing && handleBreakpoints(leftSpacing, propValue => {
   const spacing = typeof propValue === 'number' ? themeSpacing(propValue) : propValue;
+
   if (spacing !== '0px') {
     return `
                 margin-left: -${getOffset(spacing)};
                 `;
   }
+
   return '';
 })};
     ${columnSpacing && handleBreakpoints(columnSpacing, propValue => {
   const spacing = typeof propValue === 'number' ? themeSpacing(propValue) : propValue;
+
   if (spacing !== '0px') {
     return `
                 width: calc(100% + ${getOffset(spacing)});
@@ -165,14 +185,17 @@ const GridSpacingCSS = (rowSpacing, columnSpacing, topSpacing, leftSpacing) => c
             }
             `;
   }
+
   return '';
 })};
 `;
+
 const HandleGridCSS = (sizeArr, columns) => css`
     ${processSizeArray(sizeArr).map((item, idx) => {
   return handleGrid(breakpointKeys[idx], item, columns);
 })}
 `;
+
 Grid.defaultProps = {
   className: '',
   columns: 12,
@@ -193,42 +216,61 @@ Grid.defaultProps = {
 Grid.propTypes = {
   /** The content of the component. */
   children: PropTypes.node,
+
   /** Style inline of component. */
   style: PropTypes.object,
+
   /** Class for component. */
   className: PropTypes.string,
+
   /** The number of columns. */
   columns: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.number), PropTypes.number, PropTypes.object]),
+
   /** Defines the horizontal space between the type `item` components. It overrides the value of the `spacing` prop. */
   columnSpacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
+
   /** If true, the component will have the flex *container* behavior. You should be wrapping *items* with a *container*. */
   container: PropTypes.bool,
+
   /** Defines the `flex-direction` style property. It is applied for all screen sizes. */
   direction: PropTypes.oneOfType([PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row']), PropTypes.arrayOf(PropTypes.oneOf(['column-reverse', 'column', 'row-reverse', 'row'])), PropTypes.object]),
+
   /** If `true`, the component will have the flex *item* behavior. You should be wrapping *items* with a *container*. */
   item: PropTypes.bool,
+
   /** Defines the horizontal space of `container` components. */
   leftSpacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
+
   /** If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for the `lg` breakpoint and wider screens if not overridden. */
   lg: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+
   /** If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for the `md` breakpoint and wider screens if not overridden. */
   md: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+
   /** Defines the vertical space between the type `item` components. It overrides the value of the `spacing` prop. */
   rowSpacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
+
   /** If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for the `sm` breakpoint and wider screens if not overridden. */
   sm: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+
   /** Defines the space between the type `item` components. It can only be used on a type `container` component. */
   spacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
+
   /** Defines the vertical space of `container` components. */
   topSpacing: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])), PropTypes.number, PropTypes.object, PropTypes.string]),
+
   /** Self-align of the grid item. */
   verticalAlign: PropTypes.oneOf(['auto', 'start', 'center', 'end']),
+
   /** Defines the flex-wrap style property. It's applied for all screen sizes. */
   wrap: PropTypes.oneOf(['nowrap', 'wrap-reverse', 'wrap']),
+
   /** If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for the `xl` breakpoint and wider screens if not overridden. */
   xl: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+
   /** If a number, it sets the number of columns the grid item uses. It can't be greater than the total number of columns of the container (12 by default). If 'auto', the grid item's width matches its content. If false, the prop is ignored. If true, the grid item's width grows to use the space available in the grid container. The value is applied for all the screen sizes with the lowest priority. */
   xs: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number, PropTypes.bool]),
+
   /** If `true`, it sets `min-width: 0` on the item. Refer to the limitations section of the documentation to better understand the use case. */
   zeroMinWidth: PropTypes.bool
 };

package/components/image/index.js

@@ -1,4 +1,5 @@
 /** @jsxRuntime classic */
+
 /** @jsx jsx */
 import { forwardRef, Fragment, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
@@ -37,17 +38,21 @@ const Image = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   useIntersection(ref, () => {
     setIsInView(true);
   });
+
   const _ImageCSS = ImageCSS(width, height, circular);
+
   useEffect(() => {
     if (src) {
       if (isInView || !lazyLoading) {
         const img = document.createElement('img');
         img.src = src;
         img.alt = '';
+
         img.onerror = () => {
           setSrcState(defaultSrc);
           onError === null || onError === void 0 ? void 0 : onError();
         };
+
         img.onload = () => {
           setSrcState(src);
         };
@@ -57,13 +62,15 @@ const Image = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   useImperativeHandle(reference, () => {
     const currentRef = ref.current || {};
     currentRef.element = ref.current;
-    const _instance = {
-      ...action
+    const _instance = { ...action
     }; // methods
+
     _instance.__proto__ = {}; // hidden methods
+
     currentRef.instance = _instance;
     return currentRef;
   });
+
   const renderImage = () => {
     const defaultImage = jsx("img", {
       src: defaultSrc,
@@ -85,10 +92,12 @@ const Image = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       width: width,
       height: height
     }));
+
     if (lazyLoading) {
       return isInView ? image : defaultImage;
     } else return image;
   };
+
   return useMemo(() => {
     return jsx("div", {
       ref: ref,
@@ -99,6 +108,7 @@ const Image = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }, renderImage());
   }, [alt, circular, className, defaultSrc, height, id, lazyLoading, src, style, width, isInView, onLoaded, srcState]);
 }));
+
 const ImageCSS = (width, height, circular) => css`
     ${displayInlineFlex};
     ${positionRelative};
@@ -107,6 +117,7 @@ const ImageCSS = (width, height, circular) => css`
     ${parseWidthHeight(width, height)};
     ${circular && `border-radius: 50%`};
 `;
+
 const blurAnimationCSS = css`
     animation: ${blurKeyframe} 1s ease;
 `;
@@ -121,22 +132,31 @@ Image.defaultProps = {
 Image.propTypes = {
   /** Image description. */
   alt: PropTypes.string,
+
   /** If `true`, image is circular.*/
   circular: PropTypes.bool,
+
   /** Class for component. */
   className: PropTypes.string,
+
   /** Default img when src error. */
   defaultSrc: PropTypes.string,
+
   /** Height of component. */
   height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+
   /** If `true`, lazy loading image.*/
   lazyLoading: PropTypes.bool,
+
   /** Callback fired when the src is error. */
   onError: PropTypes.func,
+
   /** Image path. */
   src: PropTypes.string,
+
   /** Style inline of component. */
   style: PropTypes.object,
+
   /** Width of component. */
   width: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
 };