diginet-core-ui 1.3.24 → 1.3.29

package/components/button/more.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
@@ -68,13 +66,14 @@ const ButtonMore = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   return jsx("div", {
     css: ButtonMoreStyle,
     ref: ref
-  }, jsx(Button, _extends({
+  }, jsx(Button, {
     viewType: viewType,
     color: color,
     size: size,
     disabled: disabled,
-    loading: loading
-  }, props)), jsx(Icon, {
+    loading: loading,
+    ...props
+  }), jsx(Icon, {
     viewType: viewType,
     color: color,
     size: size,

package/components/button/ripple-effect.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
@@ -65,11 +63,11 @@ const Ripple = ({
     setRippleArray(prevState => [...prevState, newRippleArray]);
   };
 
-  return jsx("span", _extends({
-    css: RippleContainer
-  }, props, {
+  return jsx("span", {
+    css: RippleContainer,
+    ...props,
     onMouseDown: addRipple
-  }), rippleArray.length > 0 && rippleArray.map((ripple, index) => {
+  }, rippleArray.length > 0 && rippleArray.map((ripple, index) => {
     return jsx("span", {
       key: 'ripple_' + index,
       style: {

package/components/card/body-card.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
@@ -46,12 +44,12 @@ const CardBody = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   useEffect(() => {
     !!refs && refs(ref);
   }, []);
-  const Body = useMemo(() => jsx("div", _extends({
-    css: CardBodyBox
-  }, props, {
+  const Body = useMemo(() => jsx("div", {
+    css: CardBodyBox,
+    ...props,
     style: style,
     ref: ref
-  }), children), [children, style]);
+  }, children), [children, style]);
   return Body;
 }));
 CardBody.propTypes = {

package/components/card/card.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
@@ -8,7 +6,6 @@ import { createPortal } from 'react-dom';
 import PropTypes from 'prop-types';
 import { jsx, css } from '@emotion/core';
 import CardContext from './context';
-import theme from '../../theme/settings';
 const Card = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   open,
   type,
@@ -46,7 +43,6 @@ const Card = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         height: max-content;
         width: ${isNaN(width) ? width : width + 'px'};
         flex-direction: column;
-        font-family: ${theme.typography.fontFamily};
         -webkit-box-orient: vertical;
         -webkit-box-direction: normal;
         /* min-height: 152px; */
@@ -73,12 +69,12 @@ const Card = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   const CardView = useMemo(() => {
     const node = jsx("div", {
       className: 'DGN-UI-Card'
-    }, jsx("div", _extends({
+    }, jsx("div", {
       css: CardBox,
-      ref: cardBoxRef
-    }, props, {
+      ref: cardBoxRef,
+      ...props,
       style: style
-    }), jsx(CardContext.Provider, {
+    }, jsx(CardContext.Provider, {
       value: {
         show: onShowCard,
         close: onCloseCard

package/components/card/index.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 import React, { memo, useEffect, useRef, forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import Card from './card';
@@ -18,10 +16,11 @@ const Popup = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   useEffect(() => {
     if (refs) refs(ref);
   }, []);
-  return /*#__PURE__*/React.createElement(Card, _extends({
+  return /*#__PURE__*/React.createElement(Card, {
     ref: ref,
-    style: style
-  }, props), /*#__PURE__*/React.createElement(BodyCard, {
+    style: style,
+    ...props
+  }, /*#__PURE__*/React.createElement(BodyCard, {
     style: bodyStyle
   }, children));
 }));

package/components/chart/Pie/Sector.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
@@ -66,7 +64,7 @@ const Sector = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
 
   const content = jsx("g", {
     css: SectorCSS
-  }, jsx("path", _extends({
+  }, jsx("path", {
     d: path,
     fill: fill,
     ref: pathRef,
@@ -77,8 +75,9 @@ const Sector = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     onTouchStart: onTouchStart,
     onTouchEnd: onTouchEnd,
     onMouseEnter: onMouseEnter,
-    onMouseLeave: onMouseLeave
-  }, props), renderSelectedItem ? Data() : name && jsx("title", null, name, ": ", quantity)));
+    onMouseLeave: onMouseLeave,
+    ...props
+  }, renderSelectedItem ? Data() : name && jsx("title", null, name, ": ", quantity)));
 
   if (href) {
     result = jsx("a", {

package/components/chart/Pie/Sectors.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
@@ -41,7 +39,7 @@ const Sectors = ({
                     z
                 `;
     angleEnd += angleMargin;
-    return jsx(Sector, _extends({
+    return jsx(Sector, {
       key: "sector" + i,
       fill: d.color,
       path: path,
@@ -52,8 +50,10 @@ const Sectors = ({
       onMouseEnter: e => onSectorHover(d, i, e),
       onMouseLeave: e => onSectorHover(null, null, e),
       onTouchEnd: e => onSectorHover(null, null, e),
-      onTouchStart: e => onSectorHover(d, i, e)
-    }, props, d));
+      onTouchStart: e => onSectorHover(d, i, e),
+      ...props,
+      ...d
+    });
   })) : null;
 };
 

package/components/chart/Pie/index.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
@@ -118,31 +116,32 @@ const PieChart = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   const renderSingleData = (d, center) => {
-    return jsx(Circle, _extends({
+    return jsx(Circle, {
       center: center,
       radius: center + (d.expanded || expandOnHover && expandedIndex === 0 ? expandSize : 0),
       color: d.color,
       onMouseEnter: e => handleSectorHover(d, 0, e),
       onMouseLeave: e => handleSectorHover(null, null, e),
       onTouchEnd: e => handleSectorHover(null, null, e),
-      onTouchStart: e => handleSectorHover(d, 0, e)
-    }, d));
+      onTouchStart: e => handleSectorHover(d, 0, e),
+      ...d
+    });
   };
 
   const renderMultipleData = center => {
-    return jsx(Sectors, _extends({
+    return jsx(Sectors, {
       center: center,
       data: expandOnHover ? data.map((d, i) => ({ ...d,
         expanded: `${isExpanded ? i === expandedIndex.current : i === props.expandedIndex}`
       })) : data.map((d, i) => ({ ...d,
         expanded: `${i === props.expandedIndex}`
-      }))
-    }, props, {
+      })),
+      ...props,
       expandSize: expandSize,
       expandOnHover: expandOnHover,
       renderSelectedItem: renderSelectedItem,
       onSectorHover: handleSectorHover
-    }));
+    });
   };
 
   useEffect(() => {

package/components/chart/Pie-v2/Sector.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
@@ -50,7 +48,7 @@ const Sector = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         transition-timing-function: ${transitionTimingFunction};
         transition-duration: ${transitionDuration};
     `;
-  const content = jsx("path", _extends({
+  const content = jsx("path", {
     d: path,
     fill: fill,
     ref: pathRef,
@@ -62,8 +60,9 @@ const Sector = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     onTouchStart: onTouchStart,
     onTouchEnd: onTouchEnd,
     onMouseEnter: onMouseEnter,
-    onMouseLeave: onMouseLeave
-  }, props), renderSelectedItem);
+    onMouseLeave: onMouseLeave,
+    ...props
+  }, renderSelectedItem);
 
   if (href) {
     result = jsx("a", {

package/components/chart/Pie-v2/Sectors.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
@@ -8,8 +6,8 @@ import PropTypes from "prop-types";
 import Sector from "./Sector";
 import ReactDOMServer from 'react-dom/server';
 import { jsx, css } from '@emotion/core';
-import theme from '../../../theme/settings';
 import { randomString, parseTextToHTML } from '../../../utils';
+import { typography } from "../../../styles/typography";
 
 const Sectors = ({
   center,
@@ -76,8 +74,7 @@ const Sectors = ({
         `;
     const textChartCSS = css`
             text-anchor: middle;
-            font-size: 16px;
-            font-family: ${theme.typography.fontFamily};
+            ${typography.paragraph1};
             stroke-dasharray: 1000;
             stroke-dashoffset: 1000;
 		    animation: draw 8s ease-in-out forwards;
@@ -168,7 +165,7 @@ const Sectors = ({
     return jsx("g", {
       key: i,
       id: "sector" + i
-    }, jsx(Sector, _extends({
+    }, jsx(Sector, {
       key: "sector" + i,
       fill: d.color,
       path: path,
@@ -181,8 +178,10 @@ const Sectors = ({
       onTouchEnd: e => onSectorHover(null, null, e),
       onTouchStart: e => onSectorHover(d, i, e),
       x: x + 15,
-      y: y + 16
-    }, props, d)), getPath(d, i));
+      y: y + 16,
+      ...props,
+      ...d
+    }), getPath(d, i));
   })) : null;
 };
 

package/components/chart/Pie-v2/index.js

@@ -1,14 +1,12 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
 import { useState, useRef, memo, forwardRef } from 'react';
 import PropTypes from "prop-types";
-import theme from '../../../theme/settings';
 import { jsx, css } from '@emotion/core';
 import Typography from '../../typography';
 import { randomString } from '../../../utils';
+import { typography } from "../../../styles/typography";
 import Circle from "./Circle";
 import Sectors from "./Sectors";
 import Sector from "./Sector";
@@ -78,11 +76,8 @@ const PieChart = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
         display: block;
         margin: 0 auto;
         overflow:hidden;
-        line-height:normal;
         -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
-        -ms-user-select:none;
-        -moz-user-select:none;
-        -webkit-user-select:none;
+        user-select: none;
     `;
   const Pie = Donut ? css`
         position: relative;
@@ -109,8 +104,7 @@ const PieChart = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     `;
   const dataCSS = css`
         fill:rgba(0,0,0,0.54);
-        font-size: 16px;
-        font-family: ${theme.typography.fontFamily};
+        ${typography.paragraph1};
         cursor:default;
     `;
   const padding1 = ZoomIn() / 10;
@@ -155,31 +149,32 @@ const PieChart = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   };
 
   const renderSingleData = (d, center) => {
-    return jsx(Circle, _extends({
+    return jsx(Circle, {
       center: center,
       radius: center + (d.expanded || expandOnHover && expandedIndex === 0 ? expandSize : 0),
       color: d.color,
       onMouseEnter: e => handleSectorHover(d, 0, e),
       onMouseLeave: e => handleSectorHover(null, null, e),
       onTouchEnd: e => handleSectorHover(null, null, e),
-      onTouchStart: e => handleSectorHover(d, 0, e)
-    }, d));
+      onTouchStart: e => handleSectorHover(d, 0, e),
+      ...d
+    });
   };
 
   const renderMultipleData = center => {
-    return jsx(Sectors, _extends({
+    return jsx(Sectors, {
       center: center,
       data: expandOnHover ? data.map((d, i) => ({ ...d,
         expanded: `${isExpanded ? i === expandedIndex.current : i === props.expandedIndex}`
       })) : data.map((d, i) => ({ ...d,
         expanded: `${i === props.expandedIndex}`
-      }))
-    }, props, {
+      })),
+      ...props,
       expandSize: expandSize,
       expandOnHover: expandOnHover,
       renderSelectedItem: renderSelectedItem,
       onSectorHover: handleSectorHover
-    }));
+    });
   };
 
   return jsx("div", {

package/components/chart/bar/Bar.js

@@ -5,7 +5,7 @@ import { memo, useRef, forwardRef, useEffect } from 'react';
 import { css, jsx } from '@emotion/core';
 import PropTypes from "prop-types";
 import Labels from "./Labels";
-import theme from '../../../theme/settings';
+import { typography } from "../../../styles/typography";
 const Bars = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   barsOpacity,
   barsMargin,
@@ -33,8 +33,7 @@ const Bars = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     `;
   const textChartCSS = css`
         text-anchor: middle;
-        font-size: 12px;
-        font-family: ${theme.typography.fontFamily};
+        ${typography.paragraph3};
     `; // End create css in Component
   // Create variable to calculate
 

package/components/chart/bar/Labels.js

@@ -4,6 +4,7 @@
 import PropTypes from "prop-types";
 import { jsx, css } from '@emotion/core';
 import theme from '../../../theme/settings';
+import { typography } from '../../../styles/typography';
 
 const Labels = ({
   getX,
@@ -23,7 +24,6 @@ const Labels = ({
   minX,
   unitWidth
 }) => {
-  const FONT_SIZE = 12;
   const labelContainerCSS = css`
         transform: translate(0, ${labelsOffsetX}px);
     `;
@@ -35,8 +35,7 @@ const Labels = ({
   const LabelCSS = labelStyle === 'italic' ? css`
         fill: ${theme.colors.secondary};
         text-anchor: start;
-        font-size: ${FONT_SIZE}px;
-        font-family: ${theme.typography.fontFamily};
+        ${typography.paragraph3};
         text-transform: capitalize;
         cursor: pointer;
         display: inline-block;
@@ -45,13 +44,17 @@ const Labels = ({
     ` : css`
         color: ${theme.colors.secondary};
         text-anchor: middle;
-        font-size: ${FONT_SIZE}px;
-        font-family: ${theme.typography.fontFamily};
+        ${typography.paragraph3};
         text-transform: capitalize;
         cursor: pointer;
         display: inline-block;
         word-break: break-word;
     `;
+  const TextCSS = css`
+        ${typography.paragraph3};
+        fill: ${theme.colors.secondary};
+        cursor: 'pointer';
+    `;
 
   if (labelsVisible) {
     let xLabels;
@@ -98,12 +101,7 @@ const Labels = ({
       y: getY(quantity) + labelsHeightX / 3,
       transform: `translate(-${labelsOffsetY}, 0)`,
       textAnchor: "end",
-      style: {
-        fill: theme.colors.secondary,
-        fontSize: FONT_SIZE,
-        cursor: 'pointer',
-        fontFamily: theme.typography.fontFamily
-      }
+      css: TextCSS
     }, labelsFormatY(quantity)));
     return jsx("g", {
       className: 'DGN-Labels-BarChart'

package/components/chart/bar/index.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
@@ -97,15 +95,25 @@ const BarChart = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       overflow: 'visible',
       margin: `${getLabelsYWidth() * 2}`
     }
-  }, jsx(Axis, _extends({}, props, commonProps)), jsx(Grid, _extends({}, props, commonProps)), jsx(Bars, _extends({
+  }, jsx(Axis, { ...props,
+    ...commonProps
+  }), jsx(Grid, { ...props,
+    ...commonProps
+  }), jsx(Bars, {
+    data: dataSource,
+    viewBoxWidth: viewBoxWidth,
+    ...props,
+    ...commonProps
+  }), jsx(Labels, {
     data: dataSource,
-    viewBoxWidth: viewBoxWidth
-  }, props, commonProps)), jsx(Labels, _extends({
+    viewBoxWidth: viewBoxWidth,
+    ...props,
+    ...commonProps
+  }), jsx(Points, {
     data: dataSource,
-    viewBoxWidth: viewBoxWidth
-  }, props, commonProps)), jsx(Points, _extends({
-    data: dataSource
-  }, props, commonProps)));
+    ...props,
+    ...commonProps
+  }));
 }));
 BarChart.defaultProps = {
   data: [],

package/components/chart/bar-v2/Bar.js

@@ -5,8 +5,8 @@ import { memo, useRef, forwardRef, useState } from 'react';
 import { css, jsx } from '@emotion/core';
 import PropTypes from "prop-types";
 import Labels from "./Labels";
-import theme from '../../../theme/settings';
 import { randomString } from '../../../utils';
+import { typography } from "../../../styles/typography";
 const Bars = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
   barsOpacity,
   barsMargin,
@@ -42,8 +42,7 @@ const Bars = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     `;
   const textChartCSS = css`
         text-anchor: middle;
-        font-size: 12px;
-        font-family: ${theme.typography.fontFamily};
+        ${typography.paragraph3};
     `; // End create css in Component
   // Create variable to calculate
 

package/components/chart/bar-v2/Labels.js

@@ -4,6 +4,7 @@
 import PropTypes from "prop-types";
 import { jsx, css } from '@emotion/core';
 import theme from '../../../theme/settings';
+import { typography } from "../../../styles/typography";
 
 const Labels = ({
   getX,
@@ -23,7 +24,6 @@ const Labels = ({
   minX,
   unitWidth
 }) => {
-  const FONT_SIZE = 12;
   const labelContainerCSS = css`
         transform: translate(0, ${labelsOffsetX}px);
     `;
@@ -35,8 +35,7 @@ const Labels = ({
   const LabelCSS = labelStyle === 'italic' ? css`
         fill: ${theme.colors.secondary};
         text-anchor: start;
-        font-size: ${FONT_SIZE}px;
-        font-family: ${theme.typography.fontFamily};
+        ${typography.paragraph3};
         text-transform: capitalize;
         cursor: pointer;
         display: inline-block;
@@ -45,13 +44,17 @@ const Labels = ({
     ` : css`
         color: ${theme.colors.secondary};
         text-anchor: middle;
-        font-size: ${FONT_SIZE}px;
-        font-family: ${theme.typography.fontFamily};
+        ${typography.paragraph3};
         text-transform: capitalize;
         cursor: pointer;
         display: inline-block;
         word-break: break-word;
     `;
+  const TextCSS = css`
+        ${typography.paragraph3};
+        fill: ${theme.colors.secondary};
+        cursor: 'pointer';
+    `;
 
   if (labelsVisible) {
     let xLabels;
@@ -98,12 +101,7 @@ const Labels = ({
       y: getY(quantity) + labelsHeightX / 3,
       transform: `translate(-${labelsOffsetY}, 0)`,
       textAnchor: "end",
-      style: {
-        fill: theme.colors.secondary,
-        fontSize: FONT_SIZE,
-        cursor: 'pointer',
-        fontFamily: theme.typography.fontFamily
-      }
+      css: TextCSS
     }, labelsFormatY(quantity)));
     return jsx("g", {
       className: 'DGN-Labels-BarChart'

package/components/chart/bar-v2/index.js

@@ -1,5 +1,3 @@
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 /** @jsxRuntime classic */
 
 /** @jsx jsx */
@@ -97,15 +95,25 @@ const BarChart = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
       overflow: 'visible',
       margin: `${getLabelsYWidth() * 2}`
     }
-  }, jsx(Axis, _extends({}, props, commonProps)), jsx(Grid, _extends({}, props, commonProps)), jsx(Bars, _extends({
+  }, jsx(Axis, { ...props,
+    ...commonProps
+  }), jsx(Grid, { ...props,
+    ...commonProps
+  }), jsx(Bars, {
+    data: dataSource,
+    viewBoxWidth: viewBoxWidth,
+    ...props,
+    ...commonProps
+  }), jsx(Labels, {
     data: dataSource,
-    viewBoxWidth: viewBoxWidth
-  }, props, commonProps)), jsx(Labels, _extends({
+    viewBoxWidth: viewBoxWidth,
+    ...props,
+    ...commonProps
+  }), jsx(Points, {
     data: dataSource,
-    viewBoxWidth: viewBoxWidth
-  }, props, commonProps)), jsx(Points, _extends({
-    data: dataSource
-  }, props, commonProps)));
+    ...props,
+    ...commonProps
+  }));
 }));
 BarChart.defaultProps = {
   data: [],