@semcore/mini-chart 0.29.2 → 0.29.3

package/lib/esm/component/score/line.shadow.css

@@ -0,0 +1,62 @@
+@import '../skeleton/skeleton.shadow.css';
+
+SLineGauge {
+  height: 8px;
+  background-color: var(--base-bg-color, var(--intergalactic-chart-grid-bar-chart-base-bg, #e0e1e9));
+  border-radius: var(--intergalactic-chart-rounded, 2px);
+  overflow: hidden;
+  position: relative;
+}
+
+SLineValue {
+  height: 8px;
+  border-radius: var(--intergalactic-chart-rounded, 2px) 0 0 var(--intergalactic-chart-rounded, 2px);
+}
+
+SLineValue[percent] {
+  width: var(--percent);
+}
+
+SLineValue[color], SLineSegmentItem[color] {
+  background-color: var(--color, var(--intergalactic-chart-palette-order-1, #2bb3ff));
+}
+
+SLineGauge[segments] {
+  border-radius: var(--intergalactic-progress-bar-rounded, 6px);
+}
+
+SLineGaugeSegment, SAnimationLine {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+
+SLineSegmentItem:last-child {
+  margin-right: 0;
+  border-right: none;
+}
+
+SLineSegmentItem {
+  height: 8px;
+  background: transparent;
+  border-right-color: var(--intergalactic-chart-grid-border, #ffffff);
+  border-right-style: solid;
+  border-right-width: 1px;
+  box-sizing: content-box;
+}
+
+SAnimationLine {
+  background-color: var(--intergalactic-chart-grid-bar-chart-base-bg, #e0e1e9);
+  transition: all var(--intergalactic-duration-extra-slow, 500) ease-in-out;
+  animation-name: move-line;
+  animation-duration: 0.5s;
+  animation-timing-function: ease-in-out;
+  animation-fill-mode: forwards;
+}
+
+@keyframes move-line {
+  0% {transform: translateX(0);}
+  100% {transform: translateX(100%);}
+}

package/lib/esm/component/skeleton/skeleton.shadow.css

@@ -0,0 +1,24 @@
+SLineGauge[loading],
+SDonutContainer[loading],
+STrendLine[loading],
+STrendBar[loading] {
+  animation-name: pulse;
+  animation-iteration-count: infinite;
+  animation-timing-function: ease-in-out;
+  animation-duration: 1.6s;
+  will-change: opacity;
+}
+
+@keyframes pulse {
+  0% {
+    opacity: 1;
+  }
+
+  50% {
+    opacity: 0.4;
+  }
+
+  100% {
+    opacity: 1;
+  }
+}

package/lib/esm/component/trend/Bar.mjs

@@ -1,40 +1,45 @@
-import w from "@babel/runtime/helpers/esm/toConsumableArray";
-import h from "@babel/runtime/helpers/esm/objectSpread2";
-import L from "@babel/runtime/helpers/esm/classCallCheck";
-import A from "@babel/runtime/helpers/esm/createClass";
-import D from "@babel/runtime/helpers/esm/inherits";
-import E from "@babel/runtime/helpers/esm/createSuper";
-import c from "@babel/runtime/helpers/esm/defineProperty";
-import { sstyled as R } from "@semcore/utils/lib/core/index";
-import y, { assignProps as v, sstyled as G } from "@semcore/core";
-import _ from "react";
-import N from "@semcore/utils/lib/enhances/resolveColorEnhance";
-import { Trend as $ } from "./Trend.mjs";
-import { Box as M } from "@semcore/flex-box";
-import { extractAriaProps as W } from "@semcore/utils/lib/ariaProps";
-var j = (
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { sstyled } from "@semcore/utils/lib/core/index";
+import createComponent, { assignProps, sstyled as sstyled$1 } from "@semcore/core";
+import React from "react";
+import resolveColorEnhance from "@semcore/utils/lib/enhances/resolveColorEnhance";
+import { Trend } from "./Trend.mjs";
+import { Box } from "@semcore/flex-box";
+import { extractAriaProps } from "@semcore/utils/lib/ariaProps";
+/*!__reshadow-styles__:"../skeleton/skeleton.shadow.css"*/
+var style = (
   /*__reshadow_css_start__*/
-  (R.insert(
+  (sstyled.insert(
     /*__inner_css_start__*/
-    "@keyframes pulse_1p7cy{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_1p7cy_gg_.__loading_1p7cy_gg_,.___SLineGauge_1p7cy_gg_.__loading_1p7cy_gg_,.___STrendBar_1p7cy_gg_.__loading_1p7cy_gg_,.___STrendLine_1p7cy_gg_.__loading_1p7cy_gg_{animation-name:pulse_1p7cy;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}",
-    "1p7cy_gg_"
-  ), {
-    __SLineGauge: "___SLineGauge_1p7cy_gg_",
-    _loading: "__loading_1p7cy_gg_",
-    __SDonutContainer: "___SDonutContainer_1p7cy_gg_",
-    __STrendLine: "___STrendLine_1p7cy_gg_",
-    __STrendBar: "___STrendBar_1p7cy_gg_",
-    "@pulse": "pulse_1p7cy"
+    "@keyframes pulse_wwiiw{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_wwiiw_gg_.__loading_wwiiw_gg_,.___SLineGauge_wwiiw_gg_.__loading_wwiiw_gg_,.___STrendBar_wwiiw_gg_.__loading_wwiiw_gg_,.___STrendLine_wwiiw_gg_.__loading_wwiiw_gg_{animation-name:pulse_wwiiw;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}",
+    /*__inner_css_end__*/
+    "wwiiw_gg_"
+  ), /*__reshadow_css_end__*/
+  {
+    "__SLineGauge": "___SLineGauge_wwiiw_gg_",
+    "_loading": "__loading_wwiiw_gg_",
+    "__SDonutContainer": "___SDonutContainer_wwiiw_gg_",
+    "__STrendLine": "___STrendLine_wwiiw_gg_",
+    "__STrendBar": "___STrendBar_wwiiw_gg_",
+    "@pulse": "pulse_wwiiw"
   })
-), i = /* @__PURE__ */ function(l) {
-  D(e, l);
-  var s = E(e);
-  function e() {
-    return L(this, e), s.apply(this, arguments);
+);
+var TrendBarRoot = /* @__PURE__ */ function(_Trend) {
+  _inherits(TrendBarRoot2, _Trend);
+  var _super = _createSuper(TrendBarRoot2);
+  function TrendBarRoot2() {
+    _classCallCheck(this, TrendBarRoot2);
+    return _super.apply(this, arguments);
   }
-  return A(e, [{
+  _createClass(TrendBarRoot2, [{
     key: "defaultData",
-    get: function() {
+    get: function get() {
       return [{
         value: 20
       }, {
@@ -47,60 +52,71 @@ var j = (
     }
   }, {
     key: "data",
-    get: function() {
-      var n = this.asProps, r = n.data, t = n.loading;
-      return t ? this.defaultData : r;
+    get: function get() {
+      var _this$asProps = this.asProps, data = _this$asProps.data, loading = _this$asProps.loading;
+      if (loading) {
+        return this.defaultData;
+      }
+      return data;
     }
   }, {
     key: "render",
-    value: function() {
-      var n = this.asProps, r, t = this, S = M, a = this.asProps, T = a.styles, d = a.resolveColor, C = a.isHistogram, B = a.animate, x = a.loading, p = this.defaultWidth / this.data.length, u = W(this.asProps), H = u.__excludeProps, k = u.extractedAriaProps;
-      return r = G(T), /* @__PURE__ */ _.createElement(S, r.cn("STrendBar", h({}, v({
-        ref: this.containerRef,
-        __excludeProps: ["data"].concat(w(H))
-      }, n))), /* @__PURE__ */ _.createElement("svg", r.cn("svg", h({
-        width: "100%",
-        height: "100%",
-        viewBox: "0 0 ".concat(this.svgWidth, " ").concat(this.svgHeight),
-        role: "img"
-      }, k)), this.data.map(function(o, m) {
-        var f = d("chart-palette-order-other-data");
-        return o.color && (f = d(o.color)), /* @__PURE__ */ _.createElement("rect", {
-          key: m,
-          x: p * m,
-          y: t.defaultHeight - o.value,
-          width: C ? p : p * 0.8,
-          height: o.value,
-          fill: f
-        }, B && !x && /* @__PURE__ */ _.createElement("animate", {
+    value: function render() {
+      var _ref = this.asProps, _ref2, _this = this;
+      var STrendBar = Box;
+      var _this$asProps2 = this.asProps, styles = _this$asProps2.styles, resolveColor = _this$asProps2.resolveColor, isHistogram = _this$asProps2.isHistogram, animate = _this$asProps2.animate, loading = _this$asProps2.loading;
+      var step = this.defaultWidth / this.data.length;
+      var _extractAriaProps = extractAriaProps(this.asProps), __excludeProps = _extractAriaProps.__excludeProps, extractedAriaProps = _extractAriaProps.extractedAriaProps;
+      return _ref2 = sstyled$1(styles), /* @__PURE__ */ React.createElement(STrendBar, _ref2.cn("STrendBar", _objectSpread({}, assignProps({
+        "ref": this.containerRef,
+        "__excludeProps": ["data"].concat(_toConsumableArray(__excludeProps))
+      }, _ref))), /* @__PURE__ */ React.createElement("svg", _ref2.cn("svg", _objectSpread({
+        "width": "100%",
+        "height": "100%",
+        "viewBox": "0 0 ".concat(this.svgWidth, " ").concat(this.svgHeight),
+        "role": "img"
+      }, extractedAriaProps)), this.data.map(function(barItem, index) {
+        var color = resolveColor("chart-palette-order-other-data");
+        if (barItem.color) {
+          color = resolveColor(barItem.color);
+        }
+        return /* @__PURE__ */ React.createElement("rect", {
+          key: index,
+          x: step * index,
+          y: _this.defaultHeight - barItem.value,
+          width: isHistogram ? step : step * 0.8,
+          height: barItem.value,
+          fill: color
+        }, animate && !loading && /* @__PURE__ */ React.createElement("animate", {
           attributeName: "y",
-          values: "".concat(t.defaultHeight, ";").concat(t.defaultHeight - o.value),
+          values: "".concat(_this.defaultHeight, ";").concat(_this.defaultHeight - barItem.value),
           dur: "500ms"
         }));
       })));
     }
-  }]), e;
-}($);
-c(i, "enhance", [N()]);
-c(i, "style", j);
-c(i, "defaultProps", {
-  animate: !0
+  }]);
+  return TrendBarRoot2;
+}(Trend);
+_defineProperty(TrendBarRoot, "enhance", [resolveColorEnhance()]);
+_defineProperty(TrendBarRoot, "style", style);
+_defineProperty(TrendBarRoot, "defaultProps", {
+  animate: true
 });
-var P = y(i);
-P.displayName = "MiniChart.TrendBar";
-var ee = y(i, {}, {
+var TrendBar = createComponent(TrendBarRoot);
+TrendBar.displayName = "MiniChart.TrendBar";
+var TrendHistogram = createComponent(TrendBarRoot, {}, {
   enhancements: [function() {
     return {
-      wrapperProps: function(s) {
-        return v(s, {
-          isHistogram: !0
+      wrapperProps: function wrapperProps(props) {
+        return assignProps(props, {
+          isHistogram: true
         });
       }
     };
   }]
 });
-P.displayName = "MiniChart.TrendHistogram";
+TrendBar.displayName = "MiniChart.TrendHistogram";
 export {
-  P as TrendBar,
-  ee as TrendHistogram
+  TrendBar,
+  TrendHistogram
 };

package/lib/esm/component/trend/Line.mjs

@@ -1,140 +1,159 @@
-import A from "@babel/runtime/helpers/esm/toConsumableArray";
-import v from "@babel/runtime/helpers/esm/objectSpread2";
-import E from "@babel/runtime/helpers/esm/classCallCheck";
-import R from "@babel/runtime/helpers/esm/createClass";
-import H from "@babel/runtime/helpers/esm/inherits";
-import W from "@babel/runtime/helpers/esm/createSuper";
-import h from "@babel/runtime/helpers/esm/defineProperty";
-import { sstyled as $ } from "@semcore/utils/lib/core/index";
-import C, { assignProps as S, sstyled as b } from "@semcore/core";
-import i from "react";
-import D from "@semcore/utils/lib/enhances/resolveColorEnhance";
-import B from "@semcore/utils/lib/uniqueID";
-import { Trend as j } from "./Trend.mjs";
-import { Box as G } from "@semcore/flex-box";
-import { extractAriaProps as N } from "@semcore/utils/lib/ariaProps";
-var M = (
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { sstyled } from "@semcore/utils/lib/core/index";
+import createComponent, { assignProps, sstyled as sstyled$1 } from "@semcore/core";
+import React from "react";
+import resolveColorEnhance from "@semcore/utils/lib/enhances/resolveColorEnhance";
+import uniqueIDEnhancement from "@semcore/utils/lib/uniqueID";
+import { Trend } from "./Trend.mjs";
+import { Box } from "@semcore/flex-box";
+import { extractAriaProps } from "@semcore/utils/lib/ariaProps";
+/*!__reshadow-styles__:"../skeleton/skeleton.shadow.css"*/
+var style = (
   /*__reshadow_css_start__*/
-  ($.insert(
+  (sstyled.insert(
     /*__inner_css_start__*/
-    "@keyframes pulse_1p7cy{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_1p7cy_gg_.__loading_1p7cy_gg_,.___SLineGauge_1p7cy_gg_.__loading_1p7cy_gg_,.___STrendBar_1p7cy_gg_.__loading_1p7cy_gg_,.___STrendLine_1p7cy_gg_.__loading_1p7cy_gg_{animation-name:pulse_1p7cy;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}",
-    "1p7cy_gg_"
-  ), {
-    __SLineGauge: "___SLineGauge_1p7cy_gg_",
-    _loading: "__loading_1p7cy_gg_",
-    __SDonutContainer: "___SDonutContainer_1p7cy_gg_",
-    __STrendLine: "___STrendLine_1p7cy_gg_",
-    __STrendBar: "___STrendBar_1p7cy_gg_",
-    "@pulse": "pulse_1p7cy"
+    "@keyframes pulse_wwiiw{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_wwiiw_gg_.__loading_wwiiw_gg_,.___SLineGauge_wwiiw_gg_.__loading_wwiiw_gg_,.___STrendBar_wwiiw_gg_.__loading_wwiiw_gg_,.___STrendLine_wwiiw_gg_.__loading_wwiiw_gg_{animation-name:pulse_wwiiw;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}",
+    /*__inner_css_end__*/
+    "wwiiw_gg_"
+  ), /*__reshadow_css_end__*/
+  {
+    "__SLineGauge": "___SLineGauge_wwiiw_gg_",
+    "_loading": "__loading_wwiiw_gg_",
+    "__SDonutContainer": "___SDonutContainer_wwiiw_gg_",
+    "__STrendLine": "___STrendLine_wwiiw_gg_",
+    "__STrendBar": "___STrendBar_wwiiw_gg_",
+    "@pulse": "pulse_wwiiw"
   })
-), l = /* @__PURE__ */ function(g) {
-  H(s, g);
-  var p = W(s);
-  function s() {
-    return E(this, s), p.apply(this, arguments);
+);
+var TrendLineRoot = /* @__PURE__ */ function(_Trend) {
+  _inherits(TrendLineRoot2, _Trend);
+  var _super = _createSuper(TrendLineRoot2);
+  function TrendLineRoot2() {
+    _classCallCheck(this, TrendLineRoot2);
+    return _super.apply(this, arguments);
   }
-  return R(s, [{
+  _createClass(TrendLineRoot2, [{
     key: "defaultData",
-    get: function() {
+    get: function get() {
       return [15, 70, 20, 85, 20];
     }
   }, {
     key: "lastPointRadius",
-    get: function() {
-      var e;
-      return (e = this.asProps.lastPointRadius) !== null && e !== void 0 ? e : 6;
+    get: function get() {
+      var _this$asProps$lastPoi;
+      return (_this$asProps$lastPoi = this.asProps.lastPointRadius) !== null && _this$asProps$lastPoi !== void 0 ? _this$asProps$lastPoi : 6;
     }
   }, {
     key: "data",
-    get: function() {
-      var e = this.asProps, t = e.data, o = e.loading;
-      return o ? this.defaultData : t;
+    get: function get() {
+      var _this$asProps = this.asProps, data = _this$asProps.data, loading = _this$asProps.loading;
+      if (loading) {
+        return this.defaultData;
+      }
+      return data;
     }
   }, {
     key: "svgWidth",
-    get: function() {
+    get: function get() {
       return this.asProps.lastPointColor ? this.defaultWidth + this.lastPointRadius : this.defaultWidth;
     }
   }, {
     key: "svgHeight",
-    get: function() {
+    get: function get() {
       return this.asProps.lastPointColor ? this.defaultHeight + this.lastPointRadius : this.defaultHeight;
     }
   }, {
     key: "color",
-    get: function() {
-      var e = this.asProps, t = e.resolveColor, o = e.color, r = o === void 0 ? "chart-palette-order-1" : o, n = e.loading;
-      return t(n ? "skeleton-bg" : r);
+    get: function get() {
+      var _this$asProps2 = this.asProps, resolveColor = _this$asProps2.resolveColor, _this$asProps2$color = _this$asProps2.color, color = _this$asProps2$color === void 0 ? "chart-palette-order-1" : _this$asProps2$color, loading = _this$asProps2.loading;
+      if (loading) {
+        return resolveColor("skeleton-bg");
+      }
+      return resolveColor(color);
     }
   }, {
     key: "render",
-    value: function() {
-      for (var e = this.asProps, t, o = G, r = this.asProps, n = r.uid, k = r.withArea, T = r.animate, u = r.lastPointColor, m = r.resolveColor, f = r.loading, x = r.styles, d = [], c = this.data.length, y = this.defaultWidth / (c - 1), _ = 0; _ < c; _++)
-        d.push("".concat(y * _, ",").concat(this.defaultHeight - this.data[_]));
-      var P = N(this.asProps), L = P.__excludeProps, w = P.extractedAriaProps;
-      return t = b(x), /* @__PURE__ */ i.createElement(o, t.cn("STrendLine", v({}, S({
-        ref: this.containerRef,
-        __excludeProps: ["data"].concat(A(L))
-      }, e))), /* @__PURE__ */ i.createElement("svg", t.cn("svg", v({
-        width: "100%",
-        height: "100%",
-        viewBox: "0 0 ".concat(this.svgWidth, " ").concat(this.svgHeight),
-        role: "img"
-      }, w)), /* @__PURE__ */ i.createElement("polyline", t.cn("polyline", {
-        points: d.join(" "),
-        stroke: this.color,
-        strokeWidth: "4",
-        fill: "none",
-        clipPath: "url(#".concat(n, ")")
-      })), k && /* @__PURE__ */ i.createElement("polyline", t.cn("polyline", {
-        points: "0,".concat(this.defaultHeight, " ").concat(d.join(" "), " ").concat(this.defaultWidth, ",").concat(this.defaultHeight),
-        fill: this.color,
-        fillOpacity: 0.2,
-        clipPath: "url(#".concat(n, ")")
-      })), u && !f && /* @__PURE__ */ i.createElement("circle", t.cn("circle", {
-        cx: y * (c - 1),
-        cy: this.defaultHeight - this.data[c - 1],
-        r: this.lastPointRadius,
-        fill: m(u),
-        stroke: m("chart-grid-border"),
-        strokeWidth: 4,
-        clipPath: "url(#".concat(n, ")")
-      })), T && !f && /* @__PURE__ */ i.createElement("clipPath", t.cn("clipPath", {
-        id: n
-      }), /* @__PURE__ */ i.createElement("rect", t.cn("rect", {
-        x: "0",
-        y: "0",
-        width: "100%",
-        height: "100%",
-        fill: "black"
-      }), /* @__PURE__ */ i.createElement("animate", t.cn("animate", {
-        dur: "500ms",
-        attributeName: "width",
-        values: "0;100%"
+    value: function render() {
+      var _ref = this.asProps, _ref2;
+      var STrendLine = Box;
+      var _this$asProps3 = this.asProps, uid = _this$asProps3.uid, withArea = _this$asProps3.withArea, animate = _this$asProps3.animate, lastPointColor = _this$asProps3.lastPointColor, resolveColor = _this$asProps3.resolveColor, loading = _this$asProps3.loading, styles = _this$asProps3.styles;
+      var points = [];
+      var length = this.data.length;
+      var step = this.defaultWidth / (length - 1);
+      for (var i = 0; i < length; i++) {
+        points.push("".concat(step * i, ",").concat(this.defaultHeight - this.data[i]));
+      }
+      var _extractAriaProps = extractAriaProps(this.asProps), __excludeProps = _extractAriaProps.__excludeProps, extractedAriaProps = _extractAriaProps.extractedAriaProps;
+      return _ref2 = sstyled$1(styles), /* @__PURE__ */ React.createElement(STrendLine, _ref2.cn("STrendLine", _objectSpread({}, assignProps({
+        "ref": this.containerRef,
+        "__excludeProps": ["data"].concat(_toConsumableArray(__excludeProps))
+      }, _ref))), /* @__PURE__ */ React.createElement("svg", _ref2.cn("svg", _objectSpread({
+        "width": "100%",
+        "height": "100%",
+        "viewBox": "0 0 ".concat(this.svgWidth, " ").concat(this.svgHeight),
+        "role": "img"
+      }, extractedAriaProps)), /* @__PURE__ */ React.createElement("polyline", _ref2.cn("polyline", {
+        "points": points.join(" "),
+        "stroke": this.color,
+        "strokeWidth": "4",
+        "fill": "none",
+        "clipPath": "url(#".concat(uid, ")")
+      })), withArea && /* @__PURE__ */ React.createElement("polyline", _ref2.cn("polyline", {
+        "points": "0,".concat(this.defaultHeight, " ").concat(points.join(" "), " ").concat(this.defaultWidth, ",").concat(this.defaultHeight),
+        "fill": this.color,
+        "fillOpacity": 0.2,
+        "clipPath": "url(#".concat(uid, ")")
+      })), lastPointColor && !loading && /* @__PURE__ */ React.createElement("circle", _ref2.cn("circle", {
+        "cx": step * (length - 1),
+        "cy": this.defaultHeight - this.data[length - 1],
+        "r": this.lastPointRadius,
+        "fill": resolveColor(lastPointColor),
+        "stroke": resolveColor("chart-grid-border"),
+        "strokeWidth": 4,
+        "clipPath": "url(#".concat(uid, ")")
+      })), animate && !loading && /* @__PURE__ */ React.createElement("clipPath", _ref2.cn("clipPath", {
+        "id": uid
+      }), /* @__PURE__ */ React.createElement("rect", _ref2.cn("rect", {
+        "x": "0",
+        "y": "0",
+        "width": "100%",
+        "height": "100%",
+        "fill": "black"
+      }), /* @__PURE__ */ React.createElement("animate", _ref2.cn("animate", {
+        "dur": "500ms",
+        "attributeName": "width",
+        "values": "0;100%"
       }))))));
     }
-  }]), s;
-}(j);
-h(l, "enhance", [D(), B()]);
-h(l, "style", M);
-h(l, "defaultProps", {
-  animate: !0
+  }]);
+  return TrendLineRoot2;
+}(Trend);
+_defineProperty(TrendLineRoot, "enhance", [resolveColorEnhance(), uniqueIDEnhancement()]);
+_defineProperty(TrendLineRoot, "style", style);
+_defineProperty(TrendLineRoot, "defaultProps", {
+  animate: true
 });
-var q = C(l);
-q.displayName = "MiniChart.TrendLine";
-var I = C(l, {}, {
+var TrendLine = createComponent(TrendLineRoot);
+TrendLine.displayName = "MiniChart.TrendLine";
+var TrendArea = createComponent(TrendLineRoot, {}, {
   enhancements: [function() {
     return {
-      wrapperProps: function(p) {
-        return S(p, {
-          withArea: !0
+      wrapperProps: function wrapperProps(props) {
+        return assignProps(props, {
+          withArea: true
         });
       }
     };
   }]
 });
-I.displayName = "MiniChart.TrendArea";
+TrendArea.displayName = "MiniChart.TrendArea";
 export {
-  I as TrendArea,
-  q as TrendLine
+  TrendArea,
+  TrendLine
 };