@semcore/mini-chart 16.0.0-prerelease.2 → 16.0.0-prerelease.21

package/lib/esm/component/score/Donut.mjs

@@ -1,102 +1,122 @@
-import C from "@babel/runtime/helpers/esm/objectSpread2";
-import G from "@babel/runtime/helpers/esm/classCallCheck";
-import N from "@babel/runtime/helpers/esm/createClass";
-import R from "@babel/runtime/helpers/esm/inherits";
-import I from "@babel/runtime/helpers/esm/createSuper";
-import p from "@babel/runtime/helpers/esm/defineProperty";
-import { sstyled as P, createComponent as x, assignProps as B, Component as j } from "@semcore/core";
-import r from "react";
-import { Box as F } from "@semcore/flex-box";
-import q from "@semcore/core/lib/utils/enhances/resolveColorEnhance";
-import { extractAriaProps as z } from "@semcore/core/lib/utils/ariaProps";
-var H = (
+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, createComponent, assignProps, Component } from "@semcore/core";
+import React from "react";
+import { Box } from "@semcore/flex-box";
+import resolveColorEnhance from "@semcore/core/lib/utils/enhances/resolveColorEnhance";
+import { extractAriaProps } from "@semcore/core/lib/utils/ariaProps";
+/*!__reshadow-styles__:"./donut.shadow.css"*/
+var style = (
   /*__reshadow_css_start__*/
-  (P.insert(
+  (sstyled.insert(
     /*__inner_css_start__*/
     "@keyframes pulse_1cm94{0%,to{opacity:1}50%{opacity:.4}}.___SDonutContainer_1cm94_gg_.__loading_1cm94_gg_,.___SLineGauge_1cm94_gg_.__loading_1cm94_gg_,.___STrendBar_1cm94_gg_.__loading_1cm94_gg_,.___STrendLine_1cm94_gg_.__loading_1cm94_gg_{animation-name:pulse_1cm94;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}.___SDonutContainer_1cm94_gg_.__semi_1cm94_gg_ g{transform:rotate(180deg) translate(-24px,-24px)}.___SDonutContainer_1cm94_gg_ g{transform:rotate(-90deg) translate(-24px)}.___SDonutContainer_1cm94_gg_.__animate_1cm94_gg_ circle{transition:all var(--intergalactic-duration-extra-slow, 500) ease-in-out}",
+    /*__inner_css_end__*/
     "1cm94_gg_"
-  ), {
-    __SLineGauge: "___SLineGauge_1cm94_gg_",
-    _loading: "__loading_1cm94_gg_",
-    __SDonutContainer: "___SDonutContainer_1cm94_gg_",
-    __STrendLine: "___STrendLine_1cm94_gg_",
-    __STrendBar: "___STrendBar_1cm94_gg_",
+  ), /*__reshadow_css_end__*/
+  {
+    "__SLineGauge": "___SLineGauge_1cm94_gg_",
+    "_loading": "__loading_1cm94_gg_",
+    "__SDonutContainer": "___SDonutContainer_1cm94_gg_",
+    "__STrendLine": "___STrendLine_1cm94_gg_",
+    "__STrendBar": "___STrendBar_1cm94_gg_",
     "@pulse": "pulse_1cm94",
-    _animate: "__animate_1cm94_gg_",
-    _semi: "__semi_1cm94_gg_"
+    "_animate": "__animate_1cm94_gg_",
+    "_semi": "__semi_1cm94_gg_"
   })
-), m = /* @__PURE__ */ function(d) {
-  R(n, d);
-  var g = I(n);
-  function n() {
-    return G(this, n), g.apply(this, arguments);
+);
+var DonutRoot = /* @__PURE__ */ function(_Component) {
+  _inherits(DonutRoot2, _Component);
+  var _super = _createSuper(DonutRoot2);
+  function DonutRoot2() {
+    _classCallCheck(this, DonutRoot2);
+    return _super.apply(this, arguments);
   }
-  return N(n, [{
+  _createClass(DonutRoot2, [{
     key: "render",
-    value: function() {
-      var b = this.asProps, t, E = F, o = this.asProps, _ = o.value, w = o.styles, h = o.baseBgColor, L = h === void 0 ? "chart-grid-bar-chart-base-bg" : h, f = o.color, T = f === void 0 ? "chart-palette-order-1" : f, l = o.resolveColor, e = o.isSemiDonut, v = o.loading, u = e ? 6 : 4, i = e ? 9 : 10, a = e ? Math.PI * i : Math.PI * 2 * i, c = a * (_ / 100), S = a * ((100 - _) / 100), s = e ? a / (100 / 3) : a / 100, D = "".concat(S - 2 * s, " ").concat(s), y = "".concat(s, " ").concat(_ < 99 ? "".concat(D) : "", " ").concat(a);
-      e && (y = "".concat(s, " ").concat(_ < 95 ? "".concat(D) : "", " ").concat(a));
-      var $ = e ? "0 0 24 12" : "0 0 24 24", A = -1 * (c + (e ? s : 0)), k = z(this.asProps), M = k.__excludeProps, W = k.extractedAriaProps;
-      return t = P(w), /* @__PURE__ */ r.createElement(E, t.cn("SDonutContainer", C({}, B({
-        semi: e,
-        __excludeProps: M
-      }, b))), /* @__PURE__ */ r.createElement("svg", t.cn("svg", C({
-        width: "100%",
-        height: "100%",
-        viewBox: $,
-        fill: "none",
-        role: "img"
-      }, W)), /* @__PURE__ */ r.createElement("g", t.cn("g", {}), /* @__PURE__ */ r.createElement("circle", t.cn("circle", {
-        cx: "12",
-        cy: "12",
-        r: i,
-        strokeWidth: u,
-        stroke: l(L),
-        strokeDasharray: v ? void 0 : "".concat(S, " ").concat(a),
-        strokeDashoffset: A
-      })), !v && /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement("circle", t.cn("circle", {
-        cx: "12",
-        cy: "12",
-        r: i,
-        strokeWidth: u,
-        stroke: l(T),
-        strokeDasharray: "".concat(c, " ").concat(a),
-        strokeDashoffset: c
-      }), /* @__PURE__ */ r.createElement("animate", t.cn("animate", {
-        attributeName: "stroke-dashoffset",
-        values: "0;".concat(c)
-      }))), _ !== 100 && !e && /* @__PURE__ */ r.createElement("circle", t.cn("circle", {
-        cx: "12",
-        cy: "12",
-        r: i,
-        strokeWidth: u,
-        stroke: l("chart-grid-border"),
-        strokeDasharray: y,
-        strokeDashoffset: -1 * c
+    value: function render() {
+      var _ref = this.asProps, _ref2;
+      var SDonutContainer = Box;
+      var _this$asProps = this.asProps, value = _this$asProps.value, styles = _this$asProps.styles, _this$asProps$baseBgC = _this$asProps.baseBgColor, baseBgColor = _this$asProps$baseBgC === void 0 ? "chart-grid-bar-chart-base-bg" : _this$asProps$baseBgC, _this$asProps$color = _this$asProps.color, color = _this$asProps$color === void 0 ? "chart-palette-order-1" : _this$asProps$color, resolveColor = _this$asProps.resolveColor, isSemiDonut = _this$asProps.isSemiDonut, loading = _this$asProps.loading;
+      var strokeWidth = isSemiDonut ? 6 : 4;
+      var radius = isSemiDonut ? 9 : 10;
+      var baseStrokeDasharray = isSemiDonut ? Math.PI * radius : Math.PI * 2 * radius;
+      var valueStrokeDasharray = baseStrokeDasharray * (value / 100);
+      var greyStrokeDasharray = baseStrokeDasharray * ((100 - value) / 100);
+      var offsetPoint = isSemiDonut ? baseStrokeDasharray / (100 / 3) : baseStrokeDasharray / 100;
+      var strokeDasharrayBetweenSpaces = "".concat(greyStrokeDasharray - 2 * offsetPoint, " ").concat(offsetPoint);
+      var spaceStrokeDasharray = "".concat(offsetPoint, " ").concat(value < 99 ? "".concat(strokeDasharrayBetweenSpaces) : "", " ").concat(baseStrokeDasharray);
+      if (isSemiDonut) {
+        spaceStrokeDasharray = "".concat(offsetPoint, " ").concat(value < 95 ? "".concat(strokeDasharrayBetweenSpaces) : "", " ").concat(baseStrokeDasharray);
+      }
+      var viewBox = isSemiDonut ? "0 0 24 12" : "0 0 24 24";
+      var strokeDashoffsetBase = -1 * (valueStrokeDasharray + (isSemiDonut ? offsetPoint : 0));
+      var _extractAriaProps = extractAriaProps(this.asProps), __excludeProps = _extractAriaProps.__excludeProps, extractedAriaProps = _extractAriaProps.extractedAriaProps;
+      return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(SDonutContainer, _ref2.cn("SDonutContainer", _objectSpread({}, assignProps({
+        "semi": isSemiDonut,
+        "__excludeProps": __excludeProps
+      }, _ref))), /* @__PURE__ */ React.createElement("svg", _ref2.cn("svg", _objectSpread({
+        "width": "100%",
+        "height": "100%",
+        "viewBox": viewBox,
+        "fill": "none",
+        "role": "img"
+      }, extractedAriaProps)), /* @__PURE__ */ React.createElement("g", _ref2.cn("g", {}), /* @__PURE__ */ React.createElement("circle", _ref2.cn("circle", {
+        "cx": "12",
+        "cy": "12",
+        "r": radius,
+        "strokeWidth": strokeWidth,
+        "stroke": resolveColor(baseBgColor),
+        "strokeDasharray": loading ? void 0 : "".concat(greyStrokeDasharray, " ").concat(baseStrokeDasharray),
+        "strokeDashoffset": strokeDashoffsetBase
+      })), !loading && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("circle", _ref2.cn("circle", {
+        "cx": "12",
+        "cy": "12",
+        "r": radius,
+        "strokeWidth": strokeWidth,
+        "stroke": resolveColor(color),
+        "strokeDasharray": "".concat(valueStrokeDasharray, " ").concat(baseStrokeDasharray),
+        "strokeDashoffset": valueStrokeDasharray
+      }), /* @__PURE__ */ React.createElement("animate", _ref2.cn("animate", {
+        "attributeName": "stroke-dashoffset",
+        "values": "0;".concat(valueStrokeDasharray)
+      }))), value !== 100 && !isSemiDonut && /* @__PURE__ */ React.createElement("circle", _ref2.cn("circle", {
+        "cx": "12",
+        "cy": "12",
+        "r": radius,
+        "strokeWidth": strokeWidth,
+        "stroke": resolveColor("chart-grid-border"),
+        "strokeDasharray": spaceStrokeDasharray,
+        "strokeDashoffset": -1 * valueStrokeDasharray
       }))))));
     }
-  }]), n;
-}(j);
-p(m, "enhance", [q()]);
-p(m, "style", H);
-p(m, "defaultProps", {
-  animate: !0
+  }]);
+  return DonutRoot2;
+}(Component);
+_defineProperty(DonutRoot, "enhance", [resolveColorEnhance()]);
+_defineProperty(DonutRoot, "style", style);
+_defineProperty(DonutRoot, "defaultProps", {
+  animate: true
 });
-var J = x(m);
-J.displayName = "MiniChart.ScoreDonut";
-var K = x(m, {}, {
+var ScoreDonut = createComponent(DonutRoot);
+ScoreDonut.displayName = "MiniChart.ScoreDonut";
+var ScoreSemiDonut = createComponent(DonutRoot, {}, {
   enhancements: [function() {
     return {
-      wrapperProps: function(g) {
-        return B(g, {
-          isSemiDonut: !0
+      wrapperProps: function wrapperProps(props) {
+        return assignProps(props, {
+          isSemiDonut: true
         });
       }
     };
   }]
 });
-K.displayName = "MiniChart.ScoreSemiDonut";
+ScoreSemiDonut.displayName = "MiniChart.ScoreSemiDonut";
 export {
-  J as ScoreDonut,
-  K as ScoreSemiDonut
+  ScoreDonut,
+  ScoreSemiDonut
 };

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

@@ -1,103 +1,126 @@
-import x from "@babel/runtime/helpers/esm/objectSpread2";
-import N from "@babel/runtime/helpers/esm/classCallCheck";
-import R from "@babel/runtime/helpers/esm/createClass";
-import X from "@babel/runtime/helpers/esm/inherits";
-import j from "@babel/runtime/helpers/esm/createSuper";
-import S from "@babel/runtime/helpers/esm/defineProperty";
-import { sstyled as m, createComponent as z, assignProps as G, Component as F } from "@semcore/core";
-import e from "react";
-import { Box as g, Flex as M } from "@semcore/flex-box";
-import q from "@semcore/core/lib/utils/enhances/resolveColorEnhance";
-var H = (
+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, createComponent, assignProps, Component } from "@semcore/core";
+import React from "react";
+import { Box, Flex } from "@semcore/flex-box";
+import resolveColorEnhance from "@semcore/core/lib/utils/enhances/resolveColorEnhance";
+/*!__reshadow-styles__:"./line.shadow.css"*/
+var style = (
   /*__reshadow_css_start__*/
-  (m.insert(
+  (sstyled.insert(
     /*__inner_css_start__*/
     "@keyframes pulse_2vm7d{0%,to{opacity:1}50%{opacity:.4}}@keyframes move-line_2vm7d{0%{transform:translateX(0)}to{transform:translateX(100%)}}.___SDonutContainer_2vm7d_gg_.__loading_2vm7d_gg_,.___SLineGauge_2vm7d_gg_.__loading_2vm7d_gg_,.___STrendBar_2vm7d_gg_.__loading_2vm7d_gg_,.___STrendLine_2vm7d_gg_.__loading_2vm7d_gg_{animation-name:pulse_2vm7d;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-duration:1.6s;will-change:opacity}.___SLineGauge_2vm7d_gg_{height:8px;background-color:var(--base-bg-color_2vm7d, var(--intergalactic-chart-grid-bar-chart-base-bg, #e0e1e9));border-radius:var(--intergalactic-chart-rounded, 2px);overflow:hidden;position:relative}.___SLineValue_2vm7d_gg_{height:8px;border-radius:var(--intergalactic-chart-rounded, 2px)0 0 var(--intergalactic-chart-rounded, 2px)}.___SLineValue_2vm7d_gg_.__percent_2vm7d_gg_{width:var(--percent_2vm7d)}.___SLineSegmentItem_2vm7d_gg_.__color_2vm7d_gg_,.___SLineValue_2vm7d_gg_.__color_2vm7d_gg_{background-color:var(--color_2vm7d, var(--intergalactic-chart-palette-order-1, #2bb3ff))}.___SLineGauge_2vm7d_gg_.__segments_2vm7d_gg_{border-radius:var(--intergalactic-progress-bar-rounded, 6px)}.___SAnimationLine_2vm7d_gg_,.___SLineGaugeSegment_2vm7d_gg_{position:absolute;top:0;left:0;right:0;bottom:0}.___SLineSegmentItem_2vm7d_gg_:last-child{margin-right:0;border-right:none}.___SLineSegmentItem_2vm7d_gg_{height:8px;background:0 0;border-right-color:var(--intergalactic-chart-grid-border, #ffffff);border-right-style:solid;border-right-width:1px;box-sizing:content-box}.___SAnimationLine_2vm7d_gg_{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_2vm7d;animation-duration:.5s;animation-timing-function:ease-in-out;animation-fill-mode:forwards}",
+    /*__inner_css_end__*/
     "2vm7d_gg_"
-  ), {
-    __SLineGauge: "___SLineGauge_2vm7d_gg_",
-    _loading: "__loading_2vm7d_gg_",
-    __SDonutContainer: "___SDonutContainer_2vm7d_gg_",
-    __STrendLine: "___STrendLine_2vm7d_gg_",
-    __STrendBar: "___STrendBar_2vm7d_gg_",
+  ), /*__reshadow_css_end__*/
+  {
+    "__SLineGauge": "___SLineGauge_2vm7d_gg_",
+    "_loading": "__loading_2vm7d_gg_",
+    "__SDonutContainer": "___SDonutContainer_2vm7d_gg_",
+    "__STrendLine": "___STrendLine_2vm7d_gg_",
+    "__STrendBar": "___STrendBar_2vm7d_gg_",
     "@pulse": "pulse_2vm7d",
     "--base-bg-color": "--base-bg-color_2vm7d",
-    __SLineValue: "___SLineValue_2vm7d_gg_",
-    _percent: "__percent_2vm7d_gg_",
+    "__SLineValue": "___SLineValue_2vm7d_gg_",
+    "_percent": "__percent_2vm7d_gg_",
     "--percent": "--percent_2vm7d",
-    _color: "__color_2vm7d_gg_",
-    __SLineSegmentItem: "___SLineSegmentItem_2vm7d_gg_",
+    "_color": "__color_2vm7d_gg_",
+    "__SLineSegmentItem": "___SLineSegmentItem_2vm7d_gg_",
     "--color": "--color_2vm7d",
-    _segments: "__segments_2vm7d_gg_",
-    __SLineGaugeSegment: "___SLineGaugeSegment_2vm7d_gg_",
-    __SAnimationLine: "___SAnimationLine_2vm7d_gg_",
+    "_segments": "__segments_2vm7d_gg_",
+    "__SLineGaugeSegment": "___SLineGaugeSegment_2vm7d_gg_",
+    "__SAnimationLine": "___SAnimationLine_2vm7d_gg_",
     "@move-line": "move-line_2vm7d"
   })
-), l = /* @__PURE__ */ function(p) {
-  X(r, p);
-  var h = j(r);
-  function r() {
-    return N(this, r), h.apply(this, arguments);
+);
+var LineRoot = /* @__PURE__ */ function(_Component) {
+  _inherits(LineRoot2, _Component);
+  var _super = _createSuper(LineRoot2);
+  function LineRoot2() {
+    _classCallCheck(this, LineRoot2);
+    return _super.apply(this, arguments);
   }
-  return R(r, [{
+  _createClass(LineRoot2, [{
     key: "getSegmentProps",
-    value: function(t) {
-      var _ = this.asProps, c = _.children, f = _.resolveColor, a = 0;
-      e.Children.forEach(c, function(s) {
-        /* @__PURE__ */ e.isValidElement(s) && (a = a + s.props.value);
+    value: function getSegmentProps(segmentProps) {
+      var _this$asProps = this.asProps, children = _this$asProps.children, resolveColor = _this$asProps.resolveColor;
+      var sum = 0;
+      React.Children.forEach(children, function(child) {
+        if (/* @__PURE__ */ React.isValidElement(child)) {
+          sum = sum + child.props.value;
+        }
       });
-      var d = a > 0 ? 100 * t.value / a : 0;
+      var width = sum > 0 ? 100 * segmentProps.value / sum : 0;
       return {
-        w: "".concat(d, "%"),
-        "use:color": f(t.color)
+        w: "".concat(width, "%"),
+        "use:color": resolveColor(segmentProps.color)
       };
     }
   }, {
     key: "render",
-    value: function() {
-      var t = this.asProps, _, c = g, f = g, a = g, d = M, s = g, n = this.asProps, b = n.value, y = n.styles, E = n.color, P = E === void 0 ? "chart-palette-order-1" : E, k = n.baseBgColor, v = n.resolveColor, B = n.loading, T = n.children, $ = n.Children, w = n.animate;
-      if (T !== void 0) {
-        var i;
-        return i = m(y), /* @__PURE__ */ e.createElement(c, i.cn("SLineGauge", x({}, G({
-          segments: !0,
-          "base-bg-color": v(k)
-        }, t))), /* @__PURE__ */ e.createElement(d, i.cn("SLineGaugeSegment", {}), /* @__PURE__ */ e.createElement($, i.cn("Children", {}))), w && /* @__PURE__ */ e.createElement(a, i.cn("SAnimationLine", {})));
+    value: function render() {
+      var _ref = this.asProps, _ref5;
+      var SLineGauge = Box;
+      var SLineValue = Box;
+      var SAnimationLine = Box;
+      var SLineGaugeSegment = Flex;
+      var SLineSegmentItem = Box;
+      var _this$asProps2 = this.asProps, value = _this$asProps2.value, styles = _this$asProps2.styles, _this$asProps2$color = _this$asProps2.color, color = _this$asProps2$color === void 0 ? "chart-palette-order-1" : _this$asProps2$color, baseBgColor = _this$asProps2.baseBgColor, resolveColor = _this$asProps2.resolveColor, loading = _this$asProps2.loading, children = _this$asProps2.children, Children = _this$asProps2.Children, animate = _this$asProps2.animate;
+      if (children !== void 0) {
+        var _ref3;
+        return _ref3 = sstyled(styles), /* @__PURE__ */ React.createElement(SLineGauge, _ref3.cn("SLineGauge", _objectSpread({}, assignProps({
+          "segments": true,
+          "base-bg-color": resolveColor(baseBgColor)
+        }, _ref))), /* @__PURE__ */ React.createElement(SLineGaugeSegment, _ref3.cn("SLineGaugeSegment", {}), /* @__PURE__ */ React.createElement(Children, _ref3.cn("Children", {}))), animate && /* @__PURE__ */ React.createElement(SAnimationLine, _ref3.cn("SAnimationLine", {})));
       }
-      var o = this.asProps.segments, C = [];
-      if (o)
-        for (var u = 0; u < o; u++) {
-          var I, D = "calc((100% - ".concat(o - 1, "px) / ").concat(o, ")");
-          C.push((I = m(y), /* @__PURE__ */ e.createElement(s, I.cn("SLineSegmentItem", {
-            key: u,
-            color: u < b ? v(P) : void 0,
-            w: D
+      var segments = this.asProps.segments;
+      var SegmentItems = [];
+      if (segments) {
+        for (var i = 0; i < segments; i++) {
+          var _ref4;
+          var width = "calc((100% - ".concat(segments - 1, "px) / ").concat(segments, ")");
+          SegmentItems.push((_ref4 = sstyled(styles), /* @__PURE__ */ React.createElement(SLineSegmentItem, _ref4.cn("SLineSegmentItem", {
+            "key": i,
+            "color": i < value ? resolveColor(color) : void 0,
+            "w": width
           }))));
         }
-      var V = "".concat(b, "%");
-      return o && (V = "".concat(b / o * 100, "%")), _ = m(y), /* @__PURE__ */ e.createElement(c, _.cn("SLineGauge", x({}, G({
-        "base-bg-color": v(k)
-      }, t))), !B && /* @__PURE__ */ e.createElement(f, _.cn("SLineValue", {
-        w: V,
-        color: v(P)
-      })), !!C.length && /* @__PURE__ */ e.createElement(d, _.cn("SLineGaugeSegment", {}), C), w && /* @__PURE__ */ e.createElement(a, _.cn("SAnimationLine", {})));
+      }
+      var percent = "".concat(value, "%");
+      if (segments) {
+        percent = "".concat(value / segments * 100, "%");
+      }
+      return _ref5 = sstyled(styles), /* @__PURE__ */ React.createElement(SLineGauge, _ref5.cn("SLineGauge", _objectSpread({}, assignProps({
+        "base-bg-color": resolveColor(baseBgColor)
+      }, _ref))), !loading && /* @__PURE__ */ React.createElement(SLineValue, _ref5.cn("SLineValue", {
+        "w": percent,
+        "color": resolveColor(color)
+      })), Boolean(SegmentItems.length) && /* @__PURE__ */ React.createElement(SLineGaugeSegment, _ref5.cn("SLineGaugeSegment", {}), SegmentItems), animate && /* @__PURE__ */ React.createElement(SAnimationLine, _ref5.cn("SAnimationLine", {})));
     }
-  }]), r;
-}(F);
-S(l, "enhance", [q()]);
-S(l, "displayName", "ScoreLine");
-S(l, "style", H);
-S(l, "defaultProps", {
-  animate: !0
+  }]);
+  return LineRoot2;
+}(Component);
+_defineProperty(LineRoot, "enhance", [resolveColorEnhance()]);
+_defineProperty(LineRoot, "displayName", "ScoreLine");
+_defineProperty(LineRoot, "style", style);
+_defineProperty(LineRoot, "defaultProps", {
+  animate: true
 });
-function A(p) {
-  var h = arguments[0], r, L = p.styles, t = g;
-  return r = m(L), /* @__PURE__ */ e.createElement(t, r.cn("SLineSegmentItem", x({}, G({}, h))));
+function Segment(props) {
+  var _ref2 = arguments[0], _ref6;
+  var styles = props.styles;
+  var SLineSegmentItem = Box;
+  return _ref6 = sstyled(styles), /* @__PURE__ */ React.createElement(SLineSegmentItem, _ref6.cn("SLineSegmentItem", _objectSpread({}, assignProps({}, _ref2))));
 }
-A.displayName = "Segment";
-var J = z(l, {
-  Segment: A
+Segment.displayName = "Segment";
+var ScoreLine = createComponent(LineRoot, {
+  Segment
 });
-J.displayName = "MiniChart.ScoreLine";
+ScoreLine.displayName = "MiniChart.ScoreLine";
 export {
-  J as ScoreLine
+  ScoreLine
 };

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

@@ -0,0 +1,17 @@
+@import '../skeleton/skeleton.shadow.css';
+
+SDonutContainer[semi] {
+  g {
+    transform: rotate(180deg) translate(-24px, -24px);
+  }
+}
+
+SDonutContainer {
+  g {
+    transform: rotate(-90deg) translate(-24px)
+  }
+}
+
+SDonutContainer[animate] circle {
+  transition: all var(--intergalactic-duration-extra-slow, 500) ease-in-out;
+}

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;
+  }
+}