diginet-core-ui 1.3.73-beta.3 → 1.3.73-beta.5

package/components/accordion/details.js

@@ -4,7 +4,8 @@
 import { memo, forwardRef, useRef, useMemo, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
-import { borderBox, displayBlock, overflowHidden, pointerEventsNone, positionRelative, userSelectNone } from '../../styles/general';
+import { borderBox, displayBlock, overflowHidden, parseHeight, pointerEventsNone, positionRelative, userSelectNone } from '../../styles/general';
+import { classNames } from '../../utils';
 import theme from '../../theme/settings';
 const {
   colors: {
@@ -18,16 +19,24 @@ const {
   spacing
 } = theme;
 const AccordionDetails = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  action = {},
   children,
   className,
   id,
   style
 }, reference) => {
   const ref = useRef(null);
-  useImperativeHandle(reference, () => ({
-    element: ref.current,
-    instance: {}
-  }));
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    currentRef.element = ref.current;
+    const _instance = { ...action
+    }; // methods
+
+    _instance.__proto__ = {}; // hidden methods
+
+    currentRef.instance = _instance;
+    return currentRef;
+  });
   return useMemo(() => {
     return jsx("div", {
       css: DetailsRootCSS,
@@ -36,15 +45,15 @@ const AccordionDetails = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       id: id
     }, jsx("div", {
       style: style,
-      className: ['DGN-UI-Accordion-Details-Content', className].join(' ').trim().replace(/\s+/g, ' ')
+      className: classNames('DGN-UI-Accordion-Details-Content', className)
     }, children));
-  }, [style, className, children, id]);
+  }, [children, className, id, style]);
 }));
 const DetailsRootCSS = css`
     ${displayBlock};
     ${positionRelative};
     ${overflowHidden};
-    height: 0;
+    ${parseHeight(0)};
     transition: height 200ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
     .DGN-UI-Accordion-Details-Content {
         ${borderBox};
@@ -52,8 +61,8 @@ const DetailsRootCSS = css`
         padding: ${spacing([0, 6, 4, 6])};
         color: ${main};
         &.disabled {
-            ${pointerEventsNone}
-            ${userSelectNone}
+            ${pointerEventsNone};
+            ${userSelectNone};
         }
     }
 `;

package/components/accordion/group.js

@@ -5,11 +5,13 @@ import { memo, useRef, forwardRef, Children, cloneElement, useMemo, useImperativ
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import { borderRadius4px } from '../../styles/general';
+import classNames from '../../utils/classNames';
 import theme from '../../theme/settings';
 const {
   spacing
 } = theme;
 const AccordionGroup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  action = {},
   children,
   className,
   collapseOther,
@@ -30,20 +32,27 @@ const AccordionGroup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }
   };
 
-  useImperativeHandle(reference, () => ({
-    element: ref.current,
-    instance: {}
-  }));
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    currentRef.element = ref.current;
+    const _instance = { ...action
+    }; // methods
+
+    _instance.__proto__ = {}; // hidden methods
+
+    currentRef.instance = _instance;
+    return currentRef;
+  });
   return useMemo(() => {
     return jsx("div", {
       css: AccordionGroupRootCSS,
       ref: ref,
       style: style,
-      className: ['DGN-UI-Accordion-Group', className].join(' ').trim().replace(/\s+/g, ' ')
+      className: classNames('DGN-UI-Accordion-Group', className)
     }, Children.map(children, child => child && /*#__PURE__*/cloneElement(child, {
       onExpand: e => onCollapseOther(e, child.props.onExpand)
     })));
-  }, [style, className, children]);
+  }, [children, className, collapseOther, style]);
 }));
 const AccordionGroupRootCSS = css`
     ${borderRadius4px};

package/components/accordion/index.js

@@ -6,7 +6,8 @@ import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import AccordionContext from './context';
 import Divider from '../divider';
-import { borderRadius4px, displayBlock, positionRelative } from '../../styles/general';
+import { borderRadius4px, displayBlock, parseWidth, positionRelative } from '../../styles/general';
+import classNames from '../../utils/classNames';
 import theme from '../../theme/settings';
 const {
   colors: {
@@ -16,6 +17,7 @@ const {
   }
 } = theme;
 const Accordion = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  action = {},
   boxShadow,
   children,
   className,
@@ -49,17 +51,24 @@ const Accordion = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     });
   };
 
-  useImperativeHandle(reference, () => ({
-    element: ref.current,
-    instance: {}
-  }));
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    currentRef.element = ref.current;
+    const _instance = { ...action
+    }; // methods
+
+    _instance.__proto__ = {}; // hidden methods
+
+    currentRef.instance = _instance;
+    return currentRef;
+  });
   return useMemo(() => {
     return jsx("div", {
       id: id,
       css: AccordionRootCSS,
       ref: ref,
       style: style,
-      className: ['DGN-UI-Accordion', disabled ? 'disabled' : '', boxShadow === true ? 'boxShadow' : '', expandState ? 'expanding' : '', className].join(' ').trim().replace(/\s+/g, ' ')
+      className: classNames('DGN-UI-Accordion', disabled && 'disabled', boxShadow === true && 'boxShadow', expandState && 'expanding', className)
     }, jsx(AccordionContext.Provider, {
       value: {
         expanded,
@@ -77,13 +86,13 @@ const Accordion = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         display: 'none'
       }
     })));
-  }, [id, disabled, className, style, boxShadow, onClick, children, expanded, onExpand, onCollapse, expandState]);
+  }, [boxShadow, children, className, disabled, expanded, id, onClick, onCollapse, onExpand, style, expandState]);
 }));
 const AccordionRootCSS = css`
     ${displayBlock};
     ${positionRelative};
     ${borderRadius4px};
-    width: 100%;
+    ${parseWidth('100%')};
     transition: margin 300ms ease;
     &.boxShadow {
         box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
@@ -94,10 +103,10 @@ const AccordionRootCSS = css`
     }
 `;
 Accordion.defaultProps = {
-  expand: false,
-  disabled: false,
-  className: '',
   boxShadow: true,
+  className: '',
+  disabled: false,
+  expand: false,
   style: {}
 };
 Accordion.propTypes = {

package/components/accordion/summary.js

@@ -7,6 +7,7 @@ import { jsx } from '@emotion/core';
 import { SummaryRootCSS } from './css';
 import AccordionContext from './context';
 import { ButtonIcon, Typography } from '..';
+import { classNames } from '../../utils';
 import theme from '../../theme/settings';
 const {
   colors: {
@@ -18,6 +19,7 @@ const {
   spacing
 } = theme;
 const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  action = {},
   background,
   children,
   className,
@@ -113,10 +115,17 @@ const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       showHideDetailHandler('hide');
     }
   }, [expandState]);
-  useImperativeHandle(reference, () => ({
-    element: ref.current,
-    instance: {}
-  }));
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    currentRef.element = ref.current;
+    const _instance = { ...action
+    }; // methods
+
+    _instance.__proto__ = {}; // hidden methods
+
+    currentRef.instance = _instance;
+    return currentRef;
+  });
   return useMemo(() => {
     return jsx("div", {
       id: id,
@@ -125,7 +134,7 @@ const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       tabIndex: "-1",
       onClick: _onClick,
       style: style,
-      className: ['DGN-UI-Accordion-Summary', disabled ? 'disabled' : '', expandIcon ? expandIconAt : '', expandState ? 'expanding' : '', className].join(' ').trim().replace(/\s+/g, ' ')
+      className: classNames('DGN-UI-Accordion-Summary', disabled && 'disabled', expandIcon && expandIconAt, expandState && 'expanding', className)
     }, jsx("div", {
       className: 'DGN-UI-Accordion-Summary-Content'
     }, jsx(Typography, {
@@ -139,7 +148,7 @@ const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       className: 'Accordion-Icon-Root'
     }, jsx("div", { ...expandIconProps,
       ref: expandIconRef,
-      className: ['Accordion-Icon', collapseIcon ? '' : 'rotate-able', expandIconProps.className ? expandIconProps.className : ''].join(' ').trim().replace(/\s+/g, ' ')
+      className: classNames('Accordion-Icon', !collapseIcon && 'rotate-able', expandIconProps === null || expandIconProps === void 0 ? void 0 : expandIconProps.className)
     }, typeof expandIcon === 'string' ? jsx(ButtonIcon, {
       viewType: 'ghost',
       name: expandIcon,
@@ -153,7 +162,7 @@ const AccordionSummary = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     }) : jsx("span", {
       className: 'Accordion-Collapse-Icon effect'
     }, collapseIcon)))));
-  }, [id, expandIcon, expandIconAt, className, background, children, collapseIcon, expandIconProps, style, expandState, disabled]);
+  }, [background, children, className, collapseIcon, expandIcon, expandIconAt, expandIconProps, id, onClick, style, title, disabled, expanded, expandState, onClickAccordion, onCollapse, onExpand]);
 }));
 AccordionSummary.defaultProps = {
   className: '',

package/components/avatar/index.js

@@ -232,7 +232,7 @@ const Avatar = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         img.alt = '';
 
         img.onerror = () => {
-          setSrcState(null);
+          setSrcState(defaultSrc);
           existed[unique] = false;
         };
 

package/components/chip/index.js

@@ -6,9 +6,9 @@ import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import { ButtonIcon, Typography } from '../';
 import Icon from '../../icons';
-import { alignCenter, border, borderBox, flexRow, inlineFlex, justifyCenter, positionRelative, userSelectNone, whiteSpaceNoWrap, cursorNotAllowed, positionAbsolute, overflowHidden } from '../../styles/general';
+import { alignCenter, border, borderBox, flexRow, inlineFlex, justifyCenter, positionRelative, userSelectNone, cursorNotAllowed, positionAbsolute, overflowHidden } from '../../styles/general';
 import { hexToRGBA } from '../../styles/color-helper';
-import { useTheme } from '../../theme';
+import { useTheme, useColor as colors } from '../../theme';
 const {
   colors: {
     danger,
@@ -52,9 +52,10 @@ const Chip = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const ref = useRef(null);
   const IconRef = useRef(null);
   if (!onDbClick && onDoubleClick) onDbClick = onDoubleClick;
-  const color = colorMap.get(colorProps) || colorProps;
+  let color = colorMap.get(colorProps) || colorProps;
+  if (colors[color]) color = colors[color];
   const infoChip = {
-    color: colorMap.get(colorProps) || colorProps,
+    color: color,
     contentColor: viewType !== 'filled' ? color : white,
     backgroundColor: viewType !== 'filled' ? white : color,
     iconSize: iconSizeMap.get(size),
@@ -160,7 +161,6 @@ const ChipLabelCSS = css`
     ${alignCenter};
     ${positionRelative};
     ${userSelectNone};
-    ${whiteSpaceNoWrap};
 `;
 
 const ChipRootCSS = (onClick, onDbClick, colorProps, info) => css`
@@ -268,7 +268,7 @@ Chip.propTypes = {
   viewType: PropTypes.oneOf(['ghost', 'outlined', 'filled']),
 
   /** color for text or background of Chip */
-  color: PropTypes.oneOf(['default', 'primary', 'info', 'success', 'warning', 'danger']),
+  color: PropTypes.oneOfType([PropTypes.oneOf(['default', 'primary', 'info', 'success', 'warning', 'danger']), PropTypes.string]),
 
   /** size of Chip */
   size: PropTypes.oneOf(['small', 'medium', 'large']),

package/components/form-control/attachment/index.js

@@ -1793,17 +1793,17 @@ Attachment.propTypes = {
   /** Class for component. */
   className: PropTypes.string,
 
-  /** List attachment:<br />
-   * [{<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"AttachmentID": "ATT2U8O7YPTF1KSNCW3X",<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"URL": "https://apricot.diginet.com.vn/cdn-dev/file/8a07bee1eeff17a14eee.jpg?path=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJmaWxlUGF0aCI6Ii8yMDIwLzA4LzQ0YjNhYjQ4LTMwNGQtNDQ3NC05ZDk0LWNkNGVlMDQwOGNlMy5qcGciLCJmaWxlTmFtZSI6IjhhMDdiZWUxZWVmZjE3YTE0ZWVlLmpwZyIsImZpbGVTaXplIjoyNDg4MzcsImZpbGVUeXBlIjoiaW1hZ2UvanBlZyIsImlhdCI6MTU5ODI0NDMwMiwiZXhwIjo4Nzk5ODI0NDMwMn0.fow6O5fp2z3vieA9gom5RRwQ7xxwBx9_7X2Fe8T2YI0",<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"FileName": "8a07bee1eeff17a14eee.jpg",<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"FileSize": 248837,<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"KeyID": "W39OAD3YGLCWAQKV1D6PGEKNW4RLGVTZTUWLYEVFQ2QG8AOCXW",<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"CreateUserID": "LEMONADMIN",<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"CreateDate": "2020-08-24T11:54:04.307Z",<br />
-   * &nbsp;&nbsp;&nbsp;&nbsp;"UserName": "Quản trị hệ thống"<br />
-   * }, ...]
+  /** List attachment:<br />
+   * [{<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"AttachmentID": "ATT2U8O7YPTF1KSNCW3X",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"URL": "https://apricot.diginet.com.vn/cdn-dev/file/8a07bee1eeff17a14eee.jpg?path=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJmaWxlUGF0aCI6Ii8yMDIwLzA4LzQ0YjNhYjQ4LTMwNGQtNDQ3NC05ZDk0LWNkNGVlMDQwOGNlMy5qcGciLCJmaWxlTmFtZSI6IjhhMDdiZWUxZWVmZjE3YTE0ZWVlLmpwZyIsImZpbGVTaXplIjoyNDg4MzcsImZpbGVUeXBlIjoiaW1hZ2UvanBlZyIsImlhdCI6MTU5ODI0NDMwMiwiZXhwIjo4Nzk5ODI0NDMwMn0.fow6O5fp2z3vieA9gom5RRwQ7xxwBx9_7X2Fe8T2YI0",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"FileName": "8a07bee1eeff17a14eee.jpg",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"FileSize": 248837,<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"KeyID": "W39OAD3YGLCWAQKV1D6PGEKNW4RLGVTZTUWLYEVFQ2QG8AOCXW",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"CreateUserID": "LEMONADMIN",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"CreateDate": "2020-08-24T11:54:04.307Z",<br />
+   * &nbsp;&nbsp;&nbsp;&nbsp;"UserName": "Quản trị hệ thống"<br />
+   * }, ...]
    */
   data: PropTypes.array,
 
@@ -1846,16 +1846,16 @@ Attachment.propTypes = {
   /** Download attached event, if not it will use default. */
   onDownload: PropTypes.func,
 
-  /**
-   * event when removed file(s)
-   *
-   * return data: {<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;attached: [Files] (insist old and all new files )<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;allNewAttached: [Files]<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;oldAttached: [Files]<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;removedAttached: [Files]<br/>
-   * &nbsp;&nbsp;&nbsp;&nbsp;element: [NodeList (just removed)]<br/>
-   * }
+  /**
+   * event when removed file(s)
+   *
+   * return data: {<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;attached: [Files] (insist old and all new files )<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;allNewAttached: [Files]<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;oldAttached: [Files]<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;removedAttached: [Files]<br/>
+   * &nbsp;&nbsp;&nbsp;&nbsp;element: [NodeList (just removed)]<br/>
+   * }
    */
   onRemove: PropTypes.func,
 

package/components/form-control/date-range-picker/index.js

@@ -431,11 +431,11 @@ const DateRangePickerV2 = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       }
     }
 
-    const trueWidth = width > 320 ? width < 633 ? 633 : width : 320;
+    const pickerWidth = window.innerWidth <= 633 ? 300 : 633;
 
-    if (left + trueWidth > innerWidth) {
-      if (innerWidth > trueWidth) {
-        style.left = (innerWidth - trueWidth) / 2;
+    if (left + pickerWidth > innerWidth) {
+      if (innerWidth > pickerWidth) {
+        style.left = (innerWidth - pickerWidth) / 2;
       }
     }
 

package/components/form-control/dropdown/index.js

@@ -894,6 +894,9 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
           value,
           data
         });
+      } else {
+        // Fix lost icon when select same value
+        triggerBlur(false);
       }
     }
 
@@ -1086,7 +1089,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   const setSingleValueHandler = (data, keyArr) => {
-    const text = keyArr ? renderData(data, keyArr) : typeof renderSelectedItem === 'string' ? data[renderSelectedItem] : data[displayExpr || valueExpr] || data;
+    const text = keyArr ? renderData(data, keyArr) : typeof renderSelectedItem === 'string' ? data[renderSelectedItem] : data[displayExpr] || data[valueExpr] || data;
 
     if (typeof renderSelectedItem === 'function') {
       inputRef.current.innerHTML = '';
@@ -1157,8 +1160,8 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     return currentRef;
   });
   useEffect(() => {
-    setShowClear(clearAble && checkHasValue(valueProp) && !disabled && !readOnly && !loading);
-  }, [clearAble, valueProp, disabled, readOnly, loading]);
+    setShowClear(clearAble && checkHasValue(valueProp || defaultValue) && !disabled && !readOnly && !loading);
+  }, [clearAble, valueProp, defaultValue, disabled, readOnly, loading]);
   useEffect(() => {
     if (valueObjectDefault) {
       if (Array.isArray(valueObjectDefault)) {
@@ -1369,7 +1372,7 @@ const Dropdown = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       if (data) {
         var _displayExpr4;
 
-        const mask = (_displayExpr4 = displayExpr) === null || _displayExpr4 === void 0 ? void 0 : _displayExpr4.replace(regexBetween, _ => data[_]);
+        const mask = (data === null || data === void 0 ? void 0 : data[displayExpr]) || ((_displayExpr4 = displayExpr) === null || _displayExpr4 === void 0 ? void 0 : _displayExpr4.replace(regexBetween, _ => data[_]));
         text = mask === null || mask === void 0 ? void 0 : mask.replace(regexInclude, '');
       }
 

package/components/image/index.js

@@ -0,0 +1,164 @@
+/** @jsxRuntime classic */
+
+/** @jsx jsx */
+import { forwardRef, Fragment, memo, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import PropTypes from 'prop-types';
+import { jsx, css, keyframes } from '@emotion/core';
+import OptionWrapper from '../others/option-wrapper';
+import { useIntersection } from '../../utils/intersectionObserver';
+import { classNames } from '../../utils';
+import AvatarDefault from '../../assets/avatar/default.svg';
+import { alignCenter, inlineFlex, overflowHidden, parseWidthHeight, positionRelative } from '../../styles/general';
+const blurKeyframe = keyframes`
+    0% { -webkit-filter: blur(4px);}
+    25% { -webkit-filter: blur(3px);}
+    50% { -webkit-filter: blur(2px);}
+    75% { -webkit-filter: blur(1px);}
+    100% { -webkit-filter: blur(0px);}
+`;
+const Image = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
+  action = {},
+  alt,
+  circular,
+  className,
+  defaultSrc,
+  height,
+  id,
+  lazyLoading,
+  onError,
+  src,
+  style,
+  width
+}, reference) => {
+  if (!defaultSrc) defaultSrc = AvatarDefault;
+  const ref = useRef(null);
+  const [srcState, setSrcState] = useState(src);
+  const [isInView, setIsInView] = useState(false);
+  const [onLoaded, setOnLoaded] = useState(false);
+  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);
+        };
+      }
+    }
+  }, [src]);
+  useImperativeHandle(reference, () => {
+    const currentRef = ref.current || {};
+    currentRef.element = ref.current;
+    const _instance = { ...action
+    }; // methods
+
+    _instance.__proto__ = {}; // hidden methods
+
+    currentRef.instance = _instance;
+    return currentRef;
+  });
+
+  const renderImage = () => {
+    const defaultImage = jsx("img", {
+      src: defaultSrc,
+      alt: '',
+      style: {
+        objectFit: 'cover'
+      },
+      width: width,
+      height: height
+    });
+    const image = jsx(Fragment, null, !onLoaded && defaultImage, jsx("img", {
+      css: blurAnimationCSS,
+      src: srcState,
+      alt: alt || srcState,
+      style: {
+        objectFit: 'cover'
+      },
+      onLoad: () => setOnLoaded(true),
+      width: width,
+      height: height
+    }));
+
+    if (lazyLoading) {
+      return isInView ? image : defaultImage;
+    } else return image;
+  };
+
+  return useMemo(() => {
+    return jsx("div", {
+      ref: ref,
+      css: _ImageCSS,
+      id: id,
+      className: classNames('DGN-UI-Image', className),
+      style: style
+    }, renderImage());
+  }, [alt, circular, className, defaultSrc, height, id, lazyLoading, src, style, width, isInView, onLoaded, srcState]);
+}));
+
+const ImageCSS = (width, height, circular) => css`
+    ${inlineFlex};
+    ${positionRelative};
+    ${alignCenter};
+    ${overflowHidden};
+    ${parseWidthHeight(width, height)};
+    ${circular && `border-radius: 50%`};
+`;
+
+const blurAnimationCSS = css`
+    animation: ${blurKeyframe} 1s ease;
+`;
+Image.defaultProps = {
+  circular: false,
+  className: '',
+  height: 200,
+  lazyLoading: false,
+  style: {},
+  width: 200
+};
+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])
+};
+export { Image };
+export default OptionWrapper(Image);

package/components/index.js

@@ -64,7 +64,9 @@ export { default as Row } from './grid/Row';
 export { default as Col } from './grid/Col';
 export { default as Container } from './grid/Container'; //Icon
 
-export { default as Icon } from '../icons/index'; // List
+export { default as Icon } from '../icons/index'; //Image
+
+export { default as Image } from './image'; // List
 
 export { default as List } from './list/list';
 export { default as ListItem } from './list/list-item';

package/components/modal/body.js

@@ -5,16 +5,16 @@ import { memo, useMemo, useRef, forwardRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import { border, borderBox, displayBlock, overflowAuto, parseWidthHeight, positionRelative } from '../../styles/general';
-import { classNames, handleBreakpoints } from '../../utils';
+import { classNames } from '../../utils';
 import theme from '../../theme/settings';
+import { responsivePaddingCSS } from './header';
 const {
   colors: {
     fill: {
       'scrollbar-rest': scrollbarRest,
       'scrollbar-active': scrollbarActive
     }
-  },
-  spacing
+  }
 } = theme;
 const ModalBody = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
@@ -63,12 +63,7 @@ const ModalBodyCSS = css`
             background-color: ${scrollbarActive};
         }
     }
-    ${handleBreakpoints({
-  xs: 4,
-  md: 6
-}, propValue => {
-  return `padding: ${spacing([4, propValue])}`;
-})}
+    ${responsivePaddingCSS};
 `;
 ModalBody.defaultProps = {
   className: '',

package/components/modal/footer.js

@@ -5,11 +5,8 @@ import { memo, useMemo, useRef, forwardRef, useImperativeHandle } from 'react';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import { alignCenter, borderBox, flexRow, justifyEnd, positionRelative } from '../../styles/general';
-import theme from '../../theme/settings';
-import { classNames, handleBreakpoints } from '../../utils';
-const {
-  spacing
-} = theme;
+import { classNames } from '../../utils';
+import { responsivePaddingCSS } from './header';
 const ModalFooter = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   action = {},
   boxShadow,
@@ -53,12 +50,7 @@ const ModalFooterCSS = boxShadow => css`
     border-radius: 0px 0px 4px 4px;
     box-shadow: ${boxShadow};
     order: 3;
-    ${handleBreakpoints({
-  xs: 4,
-  md: 6
-}, propValue => {
-  return `padding: ${spacing([4, propValue])}`;
-})}
+    ${responsivePaddingCSS};
 `;
 
 ModalFooter.defaultProps = {