@alfalab/core-components-chart 3.1.6 → 3.1.8

package/Component.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-0a16d1e2.js');
+var tslib = require('tslib');
 var React = require('react');
 var cn = require('classnames');
 var recharts = require('recharts');
@@ -32,11 +32,11 @@ var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
 var CustomizedHOC = function (Component, options) {
-    var NewComponent = function (props) { return React__default.default.createElement(Component, tslib_es6.__assign({}, props, options)); };
+    var NewComponent = function (props) { return React__default.default.createElement(Component, tslib.__assign({}, props, options)); };
     return NewComponent;
 };
 
-var styles = {"coreChart":"chart__coreChart_12np2","bar":"chart__bar_12np2","unfocused":"chart__unfocused_12np2"};
+var styles = {"coreChart":"chart__coreChart_l53sx","bar":"chart__bar_l53sx","unfocused":"chart__unfocused_l53sx"};
 require('./index.css')
 
 var Chart = function (props) {
@@ -77,7 +77,7 @@ var Chart = function (props) {
         if (!changed)
             return;
         setCharts(function (prev) {
-            var newState = tslib_es6.__assign({}, prev);
+            var newState = tslib.__assign({}, prev);
             newState["".concat(dataKey)] = !newState["".concat(dataKey)];
             if (withGrad)
                 newState["".concat(dataKey, "-gradient")] = !newState["".concat(dataKey, "-gradient")];
@@ -99,14 +99,14 @@ var Chart = function (props) {
         var translate = ((_a = state === null || state === void 0 ? void 0 : state.xAxis) === null || _a === void 0 ? void 0 : _a.tickMargin) && ((_b = state === null || state === void 0 ? void 0 : state.legend) === null || _b === void 0 ? void 0 : _b.verticalAlign) !== 'top'
             ? state.xAxis.tickMargin + (((_c = state === null || state === void 0 ? void 0 : state.brush) === null || _c === void 0 ? void 0 : _c.brushMargin) || 0)
             : 0;
-        return (React__default.default.createElement(recharts.Legend, tslib_es6.__assign({}, (state.legend || null), { content: React__default.default.createElement(components_Legends_index.Legends, { legend: state.legend, series: state.series, id: state.id, toggleChart: toggleChart, ref: legendRef, charts: charts }), wrapperStyle: {
+        return (React__default.default.createElement(recharts.Legend, tslib.__assign({}, (state.legend || null), { content: React__default.default.createElement(components_Legends_index.Legends, { legend: state.legend, series: state.series, id: state.id, toggleChart: toggleChart, ref: legendRef, charts: charts }), wrapperStyle: {
                 transform: "translateY(".concat(translate, "px)"),
             } })));
     }, [state, charts, toggleChart, legendRef]);
     var renderCartesianGrid = React.useMemo(function () {
         if (!(state === null || state === void 0 ? void 0 : state.cartesianGrid))
             return null;
-        return React__default.default.createElement(recharts.CartesianGrid, tslib_es6.__assign({}, state.cartesianGrid));
+        return React__default.default.createElement(recharts.CartesianGrid, tslib.__assign({}, state.cartesianGrid));
     }, [state]);
     var renderXAxis = React.useMemo(function () {
         var _a;
@@ -122,7 +122,7 @@ var Chart = function (props) {
         else {
             tick = true;
         }
-        return React__default.default.createElement(recharts.XAxis, tslib_es6.__assign({}, state.xAxis, { tick: tick }));
+        return React__default.default.createElement(recharts.XAxis, tslib.__assign({}, state.xAxis, { tick: tick }));
     }, [state]);
     var renderYAxis = React.useMemo(function () {
         var _a;
@@ -138,17 +138,17 @@ var Chart = function (props) {
         else {
             tick = true;
         }
-        return React__default.default.createElement(recharts.YAxis, tslib_es6.__assign({}, state.yAxis, { tick: tick }));
+        return React__default.default.createElement(recharts.YAxis, tslib.__assign({}, state.yAxis, { tick: tick }));
     }, [state]);
     var renderBrush = React.useMemo(function () {
         if (!(state === null || state === void 0 ? void 0 : state.brush))
             return null;
-        return React__default.default.createElement(recharts.Brush, tslib_es6.__assign({ y: typeof yBrush === 'number' ? yBrush : 0 }, state.brush));
+        return React__default.default.createElement(recharts.Brush, tslib.__assign({ y: typeof yBrush === 'number' ? yBrush : 0 }, state.brush));
     }, [state, yBrush]);
     var renderTooltip = React.useMemo(function () {
         if (!(state === null || state === void 0 ? void 0 : state.tooltip))
             return null;
-        return (React__default.default.createElement(recharts.Tooltip, tslib_es6.__assign({ ref: tooltipRef }, state.tooltip, { content: CustomizedHOC(components_TooltipContent_index.TooltipContent, { series: state.series, tooltipArrowSide: tooltipArrowSide }) })));
+        return (React__default.default.createElement(recharts.Tooltip, tslib.__assign({ ref: tooltipRef }, state.tooltip, { content: CustomizedHOC(components_TooltipContent_index.TooltipContent, { series: state.series, tooltipArrowSide: tooltipArrowSide }) })));
     }, [state, tooltipArrowSide]);
     var renderChartsItems = React.useMemo(function () {
         if (!state || !charts)
@@ -158,8 +158,8 @@ var Chart = function (props) {
             var show = charts["".concat(properties.dataKey)];
             switch (chart) {
                 case 'bar':
-                    return show && !(item === null || item === void 0 ? void 0 : item.hide) ? (React__default.default.createElement(recharts.Bar, tslib_es6.__assign({ key: "".concat(state.id, "-").concat(properties.dataKey) }, properties, { shape: React__default.default.createElement(components_RectBar.RectBar, { radius: radius }) }),
-                        labelList && (React__default.default.createElement(recharts.LabelList, tslib_es6.__assign({ dataKey: properties.dataKey.toString() }, labelList, { content: React__default.default.createElement(components_CustomizedLabel.CustomizedLabel, { radius: radius }) }))),
+                    return show && !(item === null || item === void 0 ? void 0 : item.hide) ? (React__default.default.createElement(recharts.Bar, tslib.__assign({ key: "".concat(state.id, "-").concat(properties.dataKey) }, properties, { shape: React__default.default.createElement(components_RectBar.RectBar, { radius: radius }) }),
+                        labelList && (React__default.default.createElement(recharts.LabelList, tslib.__assign({ dataKey: properties.dataKey.toString() }, labelList, { content: React__default.default.createElement(components_CustomizedLabel.CustomizedLabel, { radius: radius }) }))),
                         data.map(function (_, index) {
                             var key = "".concat(state.id, "-").concat(properties.dataKey, "-").concat(index);
                             return (React__default.default.createElement(recharts.Cell, { key: key, className: cn__default.default(styles.bar, typeof activeDotsState.active === 'number' &&
@@ -169,7 +169,7 @@ var Chart = function (props) {
                         }))) : null;
                 case 'area':
                 case 'line':
-                    return show && !(item === null || item === void 0 ? void 0 : item.hide) ? (React__default.default.createElement(recharts.Line, tslib_es6.__assign({ key: "".concat(state.id, "-").concat(properties.dataKey) }, properties, { dot: properties.dot && properties.dotSettings
+                    return show && !(item === null || item === void 0 ? void 0 : item.hide) ? (React__default.default.createElement(recharts.Line, tslib.__assign({ key: "".concat(state.id, "-").concat(properties.dataKey) }, properties, { dot: properties.dot && properties.dotSettings
                             ? CustomizedHOC(components_Dot_index.Dot, {
                                 activeDot: activeDotsState.active,
                                 dotSettings: properties.dotSettings,
@@ -179,7 +179,7 @@ var Chart = function (props) {
                             })
                             : false, activeDot: false }))) : null;
                 case 'gradient':
-                    return show && !(item === null || item === void 0 ? void 0 : item.hide) ? (React__default.default.createElement(recharts.Area, tslib_es6.__assign({}, item.properties, { key: "".concat(state.id, "-").concat(item.properties.dataKey), dataKey: "".concat(item.properties.dataKey), stroke: 'transparent', fill: item.gradient.gid
+                    return show && !(item === null || item === void 0 ? void 0 : item.hide) ? (React__default.default.createElement(recharts.Area, tslib.__assign({}, item.properties, { key: "".concat(state.id, "-").concat(item.properties.dataKey), dataKey: "".concat(item.properties.dataKey), stroke: 'transparent', fill: item.gradient.gid
                             ? "url(#".concat(state.id, "-").concat(item.gradient.gid, ")")
                             : item.properties.fill, dot: false, activeDot: false }))) : null;
                 default:
@@ -263,7 +263,7 @@ var Chart = function (props) {
         return null;
     return (React__default.default.createElement("div", { className: styles.coreChart, ref: svgRef, id: (state === null || state === void 0 ? void 0 : state.id) || '', style: { width: '100%', height: '100%' } },
         React__default.default.createElement(recharts.ResponsiveContainer, { debounce: ((_a = state === null || state === void 0 ? void 0 : state.responsiveContainer) === null || _a === void 0 ? void 0 : _a.debounce) ? state.responsiveContainer.debounce : 0, width: '100%' },
-            React__default.default.createElement(recharts.ComposedChart, tslib_es6.__assign({}, state === null || state === void 0 ? void 0 : state.composeChart, { onMouseMove: mouseMove, onMouseLeave: mouseLeave, data: data }),
+            React__default.default.createElement(recharts.ComposedChart, tslib.__assign({}, state === null || state === void 0 ? void 0 : state.composeChart, { onMouseMove: mouseMove, onMouseLeave: mouseLeave, data: data }),
                 React__default.default.createElement("defs", null, renderGradient),
                 state.cartesianGrid && renderCartesianGrid,
                 state.xAxis && renderXAxis,

package/components/Dot/index.css

@@ -1,19 +1,19 @@
-/* hash: 6blwv */
-.chart__dotUnfocused_1ysgs {
+/* hash: 1g8f5 */
+.chart__dotUnfocused_112s3 {
     opacity: 0.3;
 }
 
-.chart__dot_1ysgs,
-.chart__dotItem_1ysgs,
-.chart__dotWrap_1ysgs {
+.chart__dot_112s3,
+.chart__dotItem_112s3,
+.chart__dotWrap_112s3 {
     transition: all 0.2s ease;
 }
 
-.chart__dot_1ysgs {
-    animation: chart__showDot_1ysgs 0.5s ease;
+.chart__dot_112s3 {
+    animation: chart__showDot_112s3 0.5s ease;
 }
 
-@keyframes chart__showDot_1ysgs {
+@keyframes chart__showDot_112s3 {
     from {
         opacity: 0;
     }

package/components/Dot/index.js

@@ -9,7 +9,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"dotUnfocused":"chart__dotUnfocused_1ysgs","dot":"chart__dot_1ysgs","dotItem":"chart__dotItem_1ysgs","dotWrap":"chart__dotWrap_1ysgs","showDot":"chart__showDot_1ysgs"};
+var styles = {"dotUnfocused":"chart__dotUnfocused_112s3","dot":"chart__dot_112s3","dotItem":"chart__dotItem_112s3","dotWrap":"chart__dotWrap_112s3","showDot":"chart__showDot_112s3"};
 require('./index.css')
 
 var Dot = React__default.default.forwardRef(function (_a, ref) {

package/components/Legends/index.css

@@ -1,40 +1,39 @@
-/* hash: li1ih */
+/* hash: 18ofx */
 :root {
+} /* deprecated */ :root {
+} :root {
+} :root {
+} :root {
 
     /* Hard */
 
     /* Up */
 
     /* Hard up */
-}
-:root {
+} :root {
+} :root {
     --gap-2xl: 32px;
-}
-.chart__legendContent_vxgym {
+} :root {
+} :root {
+} .chart__legendContent_v620y {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
-}
-.chart__legendWrap_vxgym {
+} .chart__legendWrap_v620y {
     width: 100%;
     margin: 0;
     padding: 0;
-}
-.chart__legendItem_vxgym {
+} .chart__legendItem_v620y {
     margin-right: var(--gap-2xl);
     cursor: pointer;
     display: inline-block;
-}
-.chart__legendItem_vxgym:last-child {
+} .chart__legendItem_v620y:last-child {
     margin-right: 0;
-}
-.chart__legendUnactive_vxgym {
+} .chart__legendUnactive_v620y {
     opacity: 0.3;
-}
-.chart__legendIcon_vxgym {
+} .chart__legendIcon_v620y {
     margin-right: 13px;
     display: flex;
-}
-.chart__legendValue_vxgym {
+} .chart__legendValue_v620y {
     text-transform: capitalize;
 }

package/components/Legends/index.js

@@ -13,7 +13,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"legendContent":"chart__legendContent_vxgym","legendWrap":"chart__legendWrap_vxgym","legendItem":"chart__legendItem_vxgym","legendUnactive":"chart__legendUnactive_vxgym","legendIcon":"chart__legendIcon_vxgym","legendValue":"chart__legendValue_vxgym"};
+var styles = {"legendContent":"chart__legendContent_v620y","legendWrap":"chart__legendWrap_v620y","legendItem":"chart__legendItem_v620y","legendUnactive":"chart__legendUnactive_v620y","legendIcon":"chart__legendIcon_v620y","legendValue":"chart__legendValue_v620y"};
 require('./index.css')
 
 var icons = {

package/components/Tick/index.css

@@ -1,27 +1,30 @@
-/* hash: iolvt */
+/* hash: iq4ad */
 :root {
+} /* deprecated */ :root {
     --color-dark-bg-primary: #0b1f35;
     --color-light-text-primary: #0b1f35;
-}
-:root {
+} :root {
+} :root {
+} :root {
 
     /* Hard */
 
     /* Up */
 
     /* Hard up */
-}
-.chart__tickText_gmual {
+} :root {
+} :root {
+} :root {
+} :root {
+} .chart__tickText_sx2d9 {
     fill: var(--color-light-text-primary);
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
-}
-.chart__circle_gmual {
+} .chart__circle_sx2d9 {
     opacity: 0.3;
     fill: var(--color-dark-bg-primary);
-}
-.chart__circle_gmual {
+} .chart__circle_sx2d9 {
     opacity: 0.3;
     fill: var(--color-dark-bg-primary);
 }

package/components/Tick/index.js

@@ -8,7 +8,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"tickText":"chart__tickText_gmual","circle":"chart__circle_gmual"};
+var styles = {"tickText":"chart__tickText_sx2d9","circle":"chart__circle_sx2d9"};
 require('./index.css')
 
 var Tick = function (_a) {

package/components/TooltipContent/index.css

@@ -1,9 +1,11 @@
-/* hash: ion8l */
+/* hash: kl17q */
 :root {
+} /* deprecated */ :root {
     --color-light-bg-primary: #fff;
     --color-light-border-primary: #dbdee1;
-}
-:root {
+} :root {
+} :root {
+} :root {
     --shadow-l: 0 0 24px rgba(11, 31, 53, 0.12), 0 12px 24px rgba(11, 31, 53, 0.24);
 
     /* Hard */
@@ -11,15 +13,14 @@
     /* Up */
 
     /* Hard up */
-}
-:root {
+} :root {
+    --border-radius-m: 8px;
+} :root {
     --gap-s: 12px;
     --gap-m: 16px;
-}
-:root {
-    --border-radius-m: 8px;
-}
-.chart__tooltip_59a0x {
+} :root {
+} :root {
+} .chart__tooltip_1g2qp {
     background-color: var(--color-light-bg-primary);
     border: 1px solid var(--color-light-border-primary);
     box-shadow: var(--shadow-l);
@@ -27,18 +28,15 @@
     padding: var(--gap-s) var(--gap-m);
     pointer-events: none;
     position: relative;
-}
-.chart__tooltipList_59a0x {
+} .chart__tooltipList_1g2qp {
     position: relative;
     z-index: 5;
     list-style-type: none;
     padding: 0;
     margin: 0;
-}
-.chart__tooltipItem_59a0x {
+} .chart__tooltipItem_1g2qp {
     margin-bottom: 10px;
-}
-.chart__tooltipArrow_59a0x {
+} .chart__tooltipArrow_1g2qp {
     position: absolute;
     left: 0;
     top: 50%;
@@ -47,8 +45,7 @@
     height: 10px;
     border: 1px solid var(--color-light-border-primary);
     background-color: var(--color-light-bg-primary);
-}
-.chart__tooltipArrow_59a0x:before {
+} .chart__tooltipArrow_1g2qp:before {
     content: '';
     position: absolute;
     left: -2px;
@@ -58,8 +55,7 @@
     border-style: solid;
     border-width: 0 24px 24px 0;
     border-color: transparent var(--color-light-bg-primary) transparent transparent;
-}
-.chart__tooltipArrowRight_59a0x {
+} .chart__tooltipArrowRight_1g2qp {
     left: 100%;
     transform: translate(-50%, -50%) scale(-1, 1) rotate(45deg);
 }

package/components/TooltipContent/index.js

@@ -9,7 +9,7 @@ function _interopDefaultCompat (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultCompat(React);
 var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 
-var styles = {"tooltip":"chart__tooltip_59a0x","tooltipList":"chart__tooltipList_59a0x","tooltipItem":"chart__tooltipItem_59a0x","tooltipArrow":"chart__tooltipArrow_59a0x","tooltipArrowRight":"chart__tooltipArrowRight_59a0x"};
+var styles = {"tooltip":"chart__tooltip_1g2qp","tooltipList":"chart__tooltipList_1g2qp","tooltipItem":"chart__tooltipItem_1g2qp","tooltipArrow":"chart__tooltipArrow_1g2qp","tooltipArrowRight":"chart__tooltipArrowRight_1g2qp"};
 require('./index.css')
 
 var TooltipContent = function (_a) {

package/cssm/Component.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var tslib_es6 = require('./tslib.es6-19b064c1.js');
+var tslib = require('tslib');
 var React = require('react');
 var cn = require('classnames');
 var recharts = require('recharts');
@@ -38,7 +38,7 @@ var cn__default = /*#__PURE__*/_interopDefaultCompat(cn);
 var styles__default = /*#__PURE__*/_interopDefaultCompat(styles);
 
 var CustomizedHOC = function (Component, options) {
-    var NewComponent = function (props) { return React__default.default.createElement(Component, tslib_es6.__assign({}, props, options)); };
+    var NewComponent = function (props) { return React__default.default.createElement(Component, tslib.__assign({}, props, options)); };
     return NewComponent;
 };
 
@@ -80,7 +80,7 @@ var Chart = function (props) {
         if (!changed)
             return;
         setCharts(function (prev) {
-            var newState = tslib_es6.__assign({}, prev);
+            var newState = tslib.__assign({}, prev);
             newState["".concat(dataKey)] = !newState["".concat(dataKey)];
             if (withGrad)
                 newState["".concat(dataKey, "-gradient")] = !newState["".concat(dataKey, "-gradient")];
@@ -102,14 +102,14 @@ var Chart = function (props) {
         var translate = ((_a = state === null || state === void 0 ? void 0 : state.xAxis) === null || _a === void 0 ? void 0 : _a.tickMargin) && ((_b = state === null || state === void 0 ? void 0 : state.legend) === null || _b === void 0 ? void 0 : _b.verticalAlign) !== 'top'
             ? state.xAxis.tickMargin + (((_c = state === null || state === void 0 ? void 0 : state.brush) === null || _c === void 0 ? void 0 : _c.brushMargin) || 0)
             : 0;
-        return (React__default.default.createElement(recharts.Legend, tslib_es6.__assign({}, (state.legend || null), { content: React__default.default.createElement(components_Legends_index.Legends, { legend: state.legend, series: state.series, id: state.id, toggleChart: toggleChart, ref: legendRef, charts: charts }), wrapperStyle: {
+        return (React__default.default.createElement(recharts.Legend, tslib.__assign({}, (state.legend || null), { content: React__default.default.createElement(components_Legends_index.Legends, { legend: state.legend, series: state.series, id: state.id, toggleChart: toggleChart, ref: legendRef, charts: charts }), wrapperStyle: {
                 transform: "translateY(".concat(translate, "px)"),
             } })));
     }, [state, charts, toggleChart, legendRef]);
     var renderCartesianGrid = React.useMemo(function () {
         if (!(state === null || state === void 0 ? void 0 : state.cartesianGrid))
             return null;
-        return React__default.default.createElement(recharts.CartesianGrid, tslib_es6.__assign({}, state.cartesianGrid));
+        return React__default.default.createElement(recharts.CartesianGrid, tslib.__assign({}, state.cartesianGrid));
     }, [state]);
     var renderXAxis = React.useMemo(function () {
         var _a;
@@ -125,7 +125,7 @@ var Chart = function (props) {
         else {
             tick = true;
         }
-        return React__default.default.createElement(recharts.XAxis, tslib_es6.__assign({}, state.xAxis, { tick: tick }));
+        return React__default.default.createElement(recharts.XAxis, tslib.__assign({}, state.xAxis, { tick: tick }));
     }, [state]);
     var renderYAxis = React.useMemo(function () {
         var _a;
@@ -141,17 +141,17 @@ var Chart = function (props) {
         else {
             tick = true;
         }
-        return React__default.default.createElement(recharts.YAxis, tslib_es6.__assign({}, state.yAxis, { tick: tick }));
+        return React__default.default.createElement(recharts.YAxis, tslib.__assign({}, state.yAxis, { tick: tick }));
     }, [state]);
     var renderBrush = React.useMemo(function () {
         if (!(state === null || state === void 0 ? void 0 : state.brush))
             return null;
-        return React__default.default.createElement(recharts.Brush, tslib_es6.__assign({ y: typeof yBrush === 'number' ? yBrush : 0 }, state.brush));
+        return React__default.default.createElement(recharts.Brush, tslib.__assign({ y: typeof yBrush === 'number' ? yBrush : 0 }, state.brush));
     }, [state, yBrush]);
     var renderTooltip = React.useMemo(function () {
         if (!(state === null || state === void 0 ? void 0 : state.tooltip))
             return null;
-        return (React__default.default.createElement(recharts.Tooltip, tslib_es6.__assign({ ref: tooltipRef }, state.tooltip, { content: CustomizedHOC(components_TooltipContent_index.TooltipContent, { series: state.series, tooltipArrowSide: tooltipArrowSide }) })));
+        return (React__default.default.createElement(recharts.Tooltip, tslib.__assign({ ref: tooltipRef }, state.tooltip, { content: CustomizedHOC(components_TooltipContent_index.TooltipContent, { series: state.series, tooltipArrowSide: tooltipArrowSide }) })));
     }, [state, tooltipArrowSide]);
     var renderChartsItems = React.useMemo(function () {
         if (!state || !charts)
@@ -161,8 +161,8 @@ var Chart = function (props) {
             var show = charts["".concat(properties.dataKey)];
             switch (chart) {
                 case 'bar':
-                    return show && !(item === null || item === void 0 ? void 0 : item.hide) ? (React__default.default.createElement(recharts.Bar, tslib_es6.__assign({ key: "".concat(state.id, "-").concat(properties.dataKey) }, properties, { shape: React__default.default.createElement(components_RectBar.RectBar, { radius: radius }) }),
-                        labelList && (React__default.default.createElement(recharts.LabelList, tslib_es6.__assign({ dataKey: properties.dataKey.toString() }, labelList, { content: React__default.default.createElement(components_CustomizedLabel.CustomizedLabel, { radius: radius }) }))),
+                    return show && !(item === null || item === void 0 ? void 0 : item.hide) ? (React__default.default.createElement(recharts.Bar, tslib.__assign({ key: "".concat(state.id, "-").concat(properties.dataKey) }, properties, { shape: React__default.default.createElement(components_RectBar.RectBar, { radius: radius }) }),
+                        labelList && (React__default.default.createElement(recharts.LabelList, tslib.__assign({ dataKey: properties.dataKey.toString() }, labelList, { content: React__default.default.createElement(components_CustomizedLabel.CustomizedLabel, { radius: radius }) }))),
                         data.map(function (_, index) {
                             var key = "".concat(state.id, "-").concat(properties.dataKey, "-").concat(index);
                             return (React__default.default.createElement(recharts.Cell, { key: key, className: cn__default.default(styles__default.default.bar, typeof activeDotsState.active === 'number' &&
@@ -172,7 +172,7 @@ var Chart = function (props) {
                         }))) : null;
                 case 'area':
                 case 'line':
-                    return show && !(item === null || item === void 0 ? void 0 : item.hide) ? (React__default.default.createElement(recharts.Line, tslib_es6.__assign({ key: "".concat(state.id, "-").concat(properties.dataKey) }, properties, { dot: properties.dot && properties.dotSettings
+                    return show && !(item === null || item === void 0 ? void 0 : item.hide) ? (React__default.default.createElement(recharts.Line, tslib.__assign({ key: "".concat(state.id, "-").concat(properties.dataKey) }, properties, { dot: properties.dot && properties.dotSettings
                             ? CustomizedHOC(components_Dot_index.Dot, {
                                 activeDot: activeDotsState.active,
                                 dotSettings: properties.dotSettings,
@@ -182,7 +182,7 @@ var Chart = function (props) {
                             })
                             : false, activeDot: false }))) : null;
                 case 'gradient':
-                    return show && !(item === null || item === void 0 ? void 0 : item.hide) ? (React__default.default.createElement(recharts.Area, tslib_es6.__assign({}, item.properties, { key: "".concat(state.id, "-").concat(item.properties.dataKey), dataKey: "".concat(item.properties.dataKey), stroke: 'transparent', fill: item.gradient.gid
+                    return show && !(item === null || item === void 0 ? void 0 : item.hide) ? (React__default.default.createElement(recharts.Area, tslib.__assign({}, item.properties, { key: "".concat(state.id, "-").concat(item.properties.dataKey), dataKey: "".concat(item.properties.dataKey), stroke: 'transparent', fill: item.gradient.gid
                             ? "url(#".concat(state.id, "-").concat(item.gradient.gid, ")")
                             : item.properties.fill, dot: false, activeDot: false }))) : null;
                 default:
@@ -266,7 +266,7 @@ var Chart = function (props) {
         return null;
     return (React__default.default.createElement("div", { className: styles__default.default.coreChart, ref: svgRef, id: (state === null || state === void 0 ? void 0 : state.id) || '', style: { width: '100%', height: '100%' } },
         React__default.default.createElement(recharts.ResponsiveContainer, { debounce: ((_a = state === null || state === void 0 ? void 0 : state.responsiveContainer) === null || _a === void 0 ? void 0 : _a.debounce) ? state.responsiveContainer.debounce : 0, width: '100%' },
-            React__default.default.createElement(recharts.ComposedChart, tslib_es6.__assign({}, state === null || state === void 0 ? void 0 : state.composeChart, { onMouseMove: mouseMove, onMouseLeave: mouseLeave, data: data }),
+            React__default.default.createElement(recharts.ComposedChart, tslib.__assign({}, state === null || state === void 0 ? void 0 : state.composeChart, { onMouseMove: mouseMove, onMouseLeave: mouseLeave, data: data }),
                 React__default.default.createElement("defs", null, renderGradient),
                 state.cartesianGrid && renderCartesianGrid,
                 state.xAxis && renderXAxis,

package/cssm/components/Legends/index.module.css

@@ -1,39 +1,38 @@
 :root {
+} /* deprecated */ :root {
+} :root {
+} :root {
+} :root {
 
     /* Hard */
 
     /* Up */
 
     /* Hard up */
-}
-:root {
+} :root {
+} :root {
     --gap-2xl: 32px;
-}
-.legendContent {
+} :root {
+} :root {
+} .legendContent {
     display: flex;
     align-items: center;
     flex-wrap: wrap;
-}
-.legendWrap {
+} .legendWrap {
     width: 100%;
     margin: 0;
     padding: 0;
-}
-.legendItem {
+} .legendItem {
     margin-right: var(--gap-2xl);
     cursor: pointer;
     display: inline-block;
-}
-.legendItem:last-child {
+} .legendItem:last-child {
     margin-right: 0;
-}
-.legendUnactive {
+} .legendUnactive {
     opacity: 0.3;
-}
-.legendIcon {
+} .legendIcon {
     margin-right: 13px;
     display: flex;
-}
-.legendValue {
+} .legendValue {
     text-transform: capitalize;
 }

package/cssm/components/Tick/index.module.css

@@ -1,26 +1,29 @@
 :root {
+} /* deprecated */ :root {
     --color-dark-bg-primary: #0b1f35;
     --color-light-text-primary: #0b1f35;
-}
-:root {
+} :root {
+} :root {
+} :root {
 
     /* Hard */
 
     /* Up */
 
     /* Hard up */
-}
-.tickText {
+} :root {
+} :root {
+} :root {
+} :root {
+} .tickText {
     fill: var(--color-light-text-primary);
     font-size: 16px;
     line-height: 24px;
     font-weight: 400;
-}
-.circle {
+} .circle {
     opacity: 0.3;
     fill: var(--color-dark-bg-primary);
-}
-.circle {
+} .circle {
     opacity: 0.3;
     fill: var(--color-dark-bg-primary);
 }

package/cssm/components/TooltipContent/index.module.css

@@ -1,8 +1,10 @@
 :root {
+} /* deprecated */ :root {
     --color-light-bg-primary: #fff;
     --color-light-border-primary: #dbdee1;
-}
-:root {
+} :root {
+} :root {
+} :root {
     --shadow-l: 0 0 24px rgba(11, 31, 53, 0.12), 0 12px 24px rgba(11, 31, 53, 0.24);
 
     /* Hard */
@@ -10,15 +12,14 @@
     /* Up */
 
     /* Hard up */
-}
-:root {
+} :root {
+    --border-radius-m: 8px;
+} :root {
     --gap-s: 12px;
     --gap-m: 16px;
-}
-:root {
-    --border-radius-m: 8px;
-}
-.tooltip {
+} :root {
+} :root {
+} .tooltip {
     background-color: var(--color-light-bg-primary);
     border: 1px solid var(--color-light-border-primary);
     box-shadow: var(--shadow-l);
@@ -26,18 +27,15 @@
     padding: var(--gap-s) var(--gap-m);
     pointer-events: none;
     position: relative;
-}
-.tooltipList {
+} .tooltipList {
     position: relative;
     z-index: 5;
     list-style-type: none;
     padding: 0;
     margin: 0;
-}
-.tooltipItem {
+} .tooltipItem {
     margin-bottom: 10px;
-}
-.tooltipArrow {
+} .tooltipArrow {
     position: absolute;
     left: 0;
     top: 50%;
@@ -46,8 +44,7 @@
     height: 10px;
     border: 1px solid var(--color-light-border-primary);
     background-color: var(--color-light-bg-primary);
-}
-.tooltipArrow:before {
+} .tooltipArrow:before {
     content: '';
     position: absolute;
     left: -2px;
@@ -57,8 +54,7 @@
     border-style: solid;
     border-width: 0 24px 24px 0;
     border-color: transparent var(--color-light-bg-primary) transparent transparent;
-}
-.tooltipArrowRight {
+} .tooltipArrowRight {
     left: 100%;
     transform: translate(-50%, -50%) scale(-1, 1) rotate(45deg);
 }