@semcore/d3-chart 3.60.2-prerelease.0 → 3.61.0-prerelease.0

package/lib/esm/RadialTree.mjs

@@ -4,58 +4,55 @@ import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _callSuper from "@babel/runtime/helpers/esm/callSuper";
 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 React from "react";
+import { sstyled, Component } from "@semcore/core";
+import assignProps from "@semcore/core/lib/utils/assignProps";
+import canUseDOM from "@semcore/core/lib/utils/canUseDOM";
+import getOriginChildren from "@semcore/core/lib/utils/getOriginChildren";
+import uniqueIDEnhancement from "@semcore/core/lib/utils/uniqueID";
 import { transition } from "d3-transition";
-import { sstyled as sstyled$1, Component } from "@semcore/core";
-import uniqueIDEnhancement from "@semcore/utils/lib/uniqueID";
-import assignProps from "@semcore/utils/lib/assignProps";
-import getOriginChildren from "@semcore/utils/lib/getOriginChildren";
-import canUseDOM from "@semcore/utils/lib/canUseDOM";
+import React from "react";
 import createElement from "./createElement.mjs";
-import { measureText, getChartDefaultColorName } from "./utils.mjs";
 import { getPatternSymbolSize, PatternSymbol } from "./Pattern.mjs";
+import { measureText, getChartDefaultColorName } from "./utils.mjs";
 var _excluded = ["data"];
 /*!__reshadow-styles__:"./style/radial-tree.shadow.css"*/
 var style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SRadian_1exu2_gg_{cursor:pointer;fill:var(--intergalactic-text-large-info, #008ff8)}.___SLine_1exu2_gg_{stroke:var(--intergalactic-text-large-info, #008ff8)}.___SLine_1exu2_gg_.__stroke_1exu2_gg_{stroke:var(--stroke_1exu2)}.___SLine_1exu2_gg_.__transparent_1exu2_gg_{opacity:.3}.___SCap_1exu2_gg_{transition:r .1s}.___SCap_1exu2_gg_.__pattern_1exu2_gg_{stroke:var(--intergalactic-chart-grid-border, #ffffff);stroke-width:1px}.___SCap_1exu2_gg_.__transparent_1exu2_gg_,.___SIcon_1exu2_gg_.__transparent_1exu2_gg_,.___SLabel_1exu2_gg_.__transparent_1exu2_gg_{opacity:.3}.___SLabel_1exu2_gg_{fill:var(--color_1exu2)}@media (hover:hover){.___SRadian_1exu2_gg_:hover .___SLabel_1exu2_gg_{cursor:pointer;filter:brightness(.6)}}@media (prefers-reduced-motion){.___SLineCap_1exu2_gg_{transition:none}}",
+    ".___SRadian_1es4m_gg_{cursor:pointer;fill:var(--intergalactic-text-large-info, rgb(36, 93, 229))}.___SLine_1es4m_gg_{stroke:var(--intergalactic-text-large-info, rgb(36, 93, 229))}.___SLine_1es4m_gg_.__stroke_1es4m_gg_{stroke:var(--stroke_1es4m)}.___SLine_1es4m_gg_.__transparent_1es4m_gg_{opacity:.3}.___SCap_1es4m_gg_{transition:r .1s}.___SCap_1es4m_gg_.__pattern_1es4m_gg_{stroke:var(--intergalactic-chart-grid-border, #fff);stroke-width:1px}.___SCap_1es4m_gg_.__transparent_1es4m_gg_,.___SIcon_1es4m_gg_.__transparent_1es4m_gg_,.___SLabel_1es4m_gg_.__transparent_1es4m_gg_{opacity:.3}.___SLabel_1es4m_gg_{fill:var(--color_1es4m)}@media (hover:hover){.___SRadian_1es4m_gg_:hover .___SLabel_1es4m_gg_{cursor:pointer;filter:brightness(.6)}}@media (prefers-reduced-motion){.___SLineCap_1es4m_gg_{transition:none}}",
     /*__inner_css_end__*/
-    "1exu2_gg_"
+    "1es4m_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SRadian": "___SRadian_1exu2_gg_",
-    "__SLine": "___SLine_1exu2_gg_",
-    "_stroke": "__stroke_1exu2_gg_",
-    "--stroke": "--stroke_1exu2",
-    "_transparent": "__transparent_1exu2_gg_",
-    "__SCap": "___SCap_1exu2_gg_",
-    "_pattern": "__pattern_1exu2_gg_",
-    "__SIcon": "___SIcon_1exu2_gg_",
-    "__SLabel": "___SLabel_1exu2_gg_",
-    "--color": "--color_1exu2",
-    "__SLineCap": "___SLineCap_1exu2_gg_"
+    "__SRadian": "___SRadian_1es4m_gg_",
+    "__SLine": "___SLine_1es4m_gg_",
+    "_stroke": "__stroke_1es4m_gg_",
+    "--stroke": "--stroke_1es4m",
+    "_transparent": "__transparent_1es4m_gg_",
+    "__SCap": "___SCap_1es4m_gg_",
+    "_pattern": "__pattern_1es4m_gg_",
+    "__SIcon": "___SIcon_1es4m_gg_",
+    "__SLabel": "___SLabel_1es4m_gg_",
+    "--color": "--color_1es4m",
+    "__SLineCap": "___SLineCap_1es4m_gg_"
   })
 );
 var baseAngle = -Math.PI / 2;
-var RadialTreeBase = /* @__PURE__ */ function(_Component) {
-  _inherits(RadialTreeBase2, _Component);
-  var _super = _createSuper(RadialTreeBase2);
+var RadialTreeBase = /* @__PURE__ */ (function(_Component) {
   function RadialTreeBase2(props) {
     var _this;
     _classCallCheck(this, RadialTreeBase2);
-    _this = _super.call(this, props);
-    _defineProperty(_assertThisInitialized(_this), "Element", void 0);
-    _this.handleRadianClick = _this.handleRadianClick.bind(_assertThisInitialized(_this));
+    _this = _callSuper(this, RadialTreeBase2, [props]);
+    _defineProperty(_this, "Element", void 0);
+    _this.handleRadianClick = _this.handleRadianClick.bind(_this);
     return _this;
   }
-  _createClass(RadialTreeBase2, [{
+  _inherits(RadialTreeBase2, _Component);
+  return _createClass(RadialTreeBase2, [{
     key: "uncontrolledProps",
     value: function uncontrolledProps() {
       return {
@@ -81,13 +78,13 @@ var RadialTreeBase = /* @__PURE__ */ function(_Component) {
       var labelsNodes = linesAnimation.nodes();
       if (circlesNodes.length > 0) {
         var attrs = circlesNodes.map(function(node) {
-          var _lineNode$x, _lineNode$x$baseVal, _lineNode$y, _lineNode$y$baseVal;
-          var radianIndex = parseInt(node.dataset.radianIndex, 10);
+          var _lineNode$x, _lineNode$y;
+          var radianIndex = Number.parseInt(node.dataset.radianIndex, 10);
           var lineNode = linesNodes[radianIndex];
           return {
             from: {
-              cx: (_lineNode$x = lineNode.x1) === null || _lineNode$x === void 0 ? void 0 : (_lineNode$x$baseVal = _lineNode$x.baseVal) === null || _lineNode$x$baseVal === void 0 ? void 0 : _lineNode$x$baseVal.value,
-              cy: (_lineNode$y = lineNode.y1) === null || _lineNode$y === void 0 ? void 0 : (_lineNode$y$baseVal = _lineNode$y.baseVal) === null || _lineNode$y$baseVal === void 0 ? void 0 : _lineNode$y$baseVal.value
+              cx: (_lineNode$x = lineNode.x1) === null || _lineNode$x === void 0 || (_lineNode$x = _lineNode$x.baseVal) === null || _lineNode$x === void 0 ? void 0 : _lineNode$x.value,
+              cy: (_lineNode$y = lineNode.y1) === null || _lineNode$y === void 0 || (_lineNode$y = _lineNode$y.baseVal) === null || _lineNode$y === void 0 ? void 0 : _lineNode$y.value
             },
             to: {
               cx: node.dataset["cx"],
@@ -111,15 +108,15 @@ var RadialTreeBase = /* @__PURE__ */ function(_Component) {
       }
       if (iconsNodes.length > 0) {
         var _attrs = iconsNodes.map(function(node) {
-          var _node$width, _node$width$baseVal, _node$height, _node$height$baseVal, _lineNode$x2, _lineNode$x2$baseVal, _lineNode$y2, _lineNode$y2$baseVal;
-          var width = (_node$width = node.width) === null || _node$width === void 0 ? void 0 : (_node$width$baseVal = _node$width.baseVal) === null || _node$width$baseVal === void 0 ? void 0 : _node$width$baseVal.value;
-          var height = (_node$height = node.height) === null || _node$height === void 0 ? void 0 : (_node$height$baseVal = _node$height.baseVal) === null || _node$height$baseVal === void 0 ? void 0 : _node$height$baseVal.value;
-          var radianIndex = parseInt(node.dataset.radianIndex, 10);
+          var _node$width, _node$height, _lineNode$x2, _lineNode$y2;
+          var width = (_node$width = node.width) === null || _node$width === void 0 || (_node$width = _node$width.baseVal) === null || _node$width === void 0 ? void 0 : _node$width.value;
+          var height = (_node$height = node.height) === null || _node$height === void 0 || (_node$height = _node$height.baseVal) === null || _node$height === void 0 ? void 0 : _node$height.value;
+          var radianIndex = Number.parseInt(node.dataset.radianIndex, 10);
           var lineNode = linesNodes[radianIndex];
           return {
             from: {
-              x: ((_lineNode$x2 = lineNode.x1) === null || _lineNode$x2 === void 0 ? void 0 : (_lineNode$x2$baseVal = _lineNode$x2.baseVal) === null || _lineNode$x2$baseVal === void 0 ? void 0 : _lineNode$x2$baseVal.value) - width / 2,
-              y: ((_lineNode$y2 = lineNode.y1) === null || _lineNode$y2 === void 0 ? void 0 : (_lineNode$y2$baseVal = _lineNode$y2.baseVal) === null || _lineNode$y2$baseVal === void 0 ? void 0 : _lineNode$y2$baseVal.value) - height / 2
+              x: ((_lineNode$x2 = lineNode.x1) === null || _lineNode$x2 === void 0 || (_lineNode$x2 = _lineNode$x2.baseVal) === null || _lineNode$x2 === void 0 ? void 0 : _lineNode$x2.value) - width / 2,
+              y: ((_lineNode$y2 = lineNode.y1) === null || _lineNode$y2 === void 0 || (_lineNode$y2 = _lineNode$y2.baseVal) === null || _lineNode$y2 === void 0 ? void 0 : _lineNode$y2.value) - height / 2
             },
             to: {
               x: node.dataset["x"],
@@ -143,11 +140,11 @@ var RadialTreeBase = /* @__PURE__ */ function(_Component) {
       }
       if (linesNodes.length > 0) {
         var _attrs2 = linesNodes.map(function(node) {
-          var _node$x, _node$x$baseVal, _node$y, _node$y$baseVal;
+          var _node$x, _node$y;
           return {
             from: {
-              x2: (_node$x = node.x1) === null || _node$x === void 0 ? void 0 : (_node$x$baseVal = _node$x.baseVal) === null || _node$x$baseVal === void 0 ? void 0 : _node$x$baseVal.value,
-              y2: (_node$y = node.y1) === null || _node$y === void 0 ? void 0 : (_node$y$baseVal = _node$y.baseVal) === null || _node$y$baseVal === void 0 ? void 0 : _node$y$baseVal.value
+              x2: (_node$x = node.x1) === null || _node$x === void 0 || (_node$x = _node$x.baseVal) === null || _node$x === void 0 ? void 0 : _node$x.value,
+              y2: (_node$y = node.y1) === null || _node$y === void 0 || (_node$y = _node$y.baseVal) === null || _node$y === void 0 ? void 0 : _node$y.value
             },
             to: {
               x2: node.dataset["x2"],
@@ -199,8 +196,8 @@ var RadialTreeBase = /* @__PURE__ */ function(_Component) {
     key: "computeTextWidth",
     value: function computeTextWidth() {
       var _this$asProps2 = this.asProps, data = _this$asProps2.data, textSize = _this$asProps2.textSize;
-      var widths = data.map(function(_ref10) {
-        var label = _ref10.label;
+      var widths = data.map(function(_ref0) {
+        var label = _ref0.label;
         return measureText(label, textSize);
       });
       return Math.max.apply(Math, _toConsumableArray(widths));
@@ -237,13 +234,12 @@ var RadialTreeBase = /* @__PURE__ */ function(_Component) {
       var SRadialTree = this.Element;
       var Children = this.asProps.Children;
       this.asProps.dataHintsHandler.establishDataType("values-set");
-      return _ref = sstyled$1(this.asProps.styles), /* @__PURE__ */ React.createElement(SRadialTree, _ref.cn("SRadialTree", {
+      return _ref = sstyled(this.asProps.styles), /* @__PURE__ */ React.createElement(SRadialTree, _ref.cn("SRadialTree", {
         "render": "g"
       }), /* @__PURE__ */ React.createElement(Children, _ref.cn("Children", {})));
     }
   }]);
-  return RadialTreeBase2;
-}(Component);
+})(Component);
 _defineProperty(RadialTreeBase, "displayName", "RadialTree");
 _defineProperty(RadialTreeBase, "style", style);
 _defineProperty(RadialTreeBase, "enhance", [uniqueIDEnhancement()]);
@@ -258,22 +254,21 @@ _defineProperty(RadialTreeBase, "defaultProps", {
   textSize: 14,
   defaultActiveKey: null
 });
-var RadialTreeRadian = /* @__PURE__ */ function(_Component2) {
-  _inherits(RadialTreeRadian2, _Component2);
-  var _super2 = _createSuper(RadialTreeRadian2);
+var RadialTreeRadian = /* @__PURE__ */ (function(_Component2) {
   function RadialTreeRadian2(props) {
     var _this3;
     _classCallCheck(this, RadialTreeRadian2);
-    _this3 = _super2.call(this, props);
-    _defineProperty(_assertThisInitialized(_this3), "Element", void 0);
-    _this3.renderRadian = _this3.renderRadian.bind(_assertThisInitialized(_this3));
+    _this3 = _callSuper(this, RadialTreeRadian2, [props]);
+    _defineProperty(_this3, "Element", void 0);
+    _this3.renderRadian = _this3.renderRadian.bind(_this3);
     return _this3;
   }
-  _createClass(RadialTreeRadian2, [{
+  _inherits(RadialTreeRadian2, _Component2);
+  return _createClass(RadialTreeRadian2, [{
     key: "getInteractiveAreaProps",
-    value: function getInteractiveAreaProps(_ref12, index) {
+    value: function getInteractiveAreaProps(_ref10, index) {
       var _$rootProps$data;
-      var $rootProps = _ref12.$rootProps;
+      var $rootProps = _ref10.$rootProps;
       var data = (_$rootProps$data = $rootProps.data) === null || _$rootProps$data === void 0 ? void 0 : _$rootProps$data[index];
       var _this$computeRadianPo = this.computeRadianPosition(data, index), xStart = _this$computeRadianPo.xStart, yStart = _this$computeRadianPo.yStart, xLabelCenter = _this$computeRadianPo.xLabelCenter, yLabelCenter = _this$computeRadianPo.yLabelCenter, capSize = _this$computeRadianPo.capSize;
       return {
@@ -286,14 +281,14 @@ var RadialTreeRadian = /* @__PURE__ */ function(_Component2) {
     }
   }, {
     key: "getLineProps",
-    value: function getLineProps(_ref13, index) {
-      var _$rootProps$data2, _color, _ref14;
-      var $rootProps = _ref13.$rootProps;
+    value: function getLineProps(_ref11, index) {
+      var _$rootProps$data2, _color;
+      var $rootProps = _ref11.$rootProps;
       var data = (_$rootProps$data2 = $rootProps.data) === null || _$rootProps$data2 === void 0 ? void 0 : _$rootProps$data2[index];
       var _this$computeRadianPo2 = this.computeRadianPosition(data, index), xStart = _this$computeRadianPo2.xStart, yStart = _this$computeRadianPo2.yStart, xEnd = _this$computeRadianPo2.xEnd, yEnd = _this$computeRadianPo2.yEnd;
       var _this$asProps5 = this.asProps, uid = _this$asProps5.uid, transparent = _this$asProps5.transparent, resolveColor = _this$asProps5.resolveColor;
       var color = (_color = data.color) !== null && _color !== void 0 ? _color : this.asProps.color;
-      return _ref14 = {
+      return _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
         x1: xStart,
         y1: yStart,
         x2: xEnd,
@@ -301,27 +296,27 @@ var RadialTreeRadian = /* @__PURE__ */ function(_Component2) {
         stroke: color,
         resolveColor,
         transparent
-      }, _defineProperty(_ref14, "data-x1", xStart), _defineProperty(_ref14, "data-y1", yStart), _defineProperty(_ref14, "data-x2", xEnd), _defineProperty(_ref14, "data-y2", yEnd), _defineProperty(_ref14, "data-radial-animation", "".concat(uid, "-line")), _defineProperty(_ref14, "data-radian-index", index), _ref14;
+      }, "data-x1", xStart), "data-y1", yStart), "data-x2", xEnd), "data-y2", yEnd), "data-radial-animation", "".concat(uid, "-line")), "data-radian-index", index);
     }
   }, {
     key: "getCapProps",
-    value: function getCapProps(_ref15, index) {
-      var _$rootProps$data3, _color2, _ref16;
-      var $rootProps = _ref15.$rootProps;
+    value: function getCapProps(_ref13, index) {
+      var _$rootProps$data3, _color2;
+      var $rootProps = _ref13.$rootProps;
       var data = (_$rootProps$data3 = $rootProps.data) === null || _$rootProps$data3 === void 0 ? void 0 : _$rootProps$data3[index];
       var _this$computeRadianPo3 = this.computeRadianPosition(data, index), xEnd = _this$computeRadianPo3.xEnd, yEnd = _this$computeRadianPo3.yEnd, capSize = _this$computeRadianPo3.capSize;
       var _this$asProps6 = this.asProps, uid = _this$asProps6.uid, transparent = _this$asProps6.transparent, resolveColor = _this$asProps6.resolveColor, patterns = _this$asProps6.patterns;
       var color = (_color2 = data.color) !== null && _color2 !== void 0 ? _color2 : this.asProps.color;
-      return _ref16 = {
+      return _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
         x: xEnd,
         y: yEnd
-      }, _defineProperty(_ref16, "data-cx", xEnd), _defineProperty(_ref16, "data-cy", yEnd), _defineProperty(_ref16, "radius", capSize), _defineProperty(_ref16, "color", color), _defineProperty(_ref16, "resolveColor", resolveColor), _defineProperty(_ref16, "transparent", transparent), _defineProperty(_ref16, "patterns", patterns), _defineProperty(_ref16, "uid", "".concat(uid, "-cap-").concat(index)), _defineProperty(_ref16, "data-radial-animation", "".concat(uid, "-cap-circle")), _defineProperty(_ref16, "data-radian-index", index), _ref16;
+      }, "data-cx", xEnd), "data-cy", yEnd), "radius", capSize), "color", color), "resolveColor", resolveColor), "transparent", transparent), "patterns", patterns), "uid", "".concat(uid, "-cap-").concat(index)), "data-radial-animation", "".concat(uid, "-cap-circle")), "data-radian-index", index);
     }
   }, {
     key: "getIconProps",
-    value: function getIconProps(_ref17, index) {
-      var _$rootProps$data4, _iconColor, _iconSize, _icon, _ref18;
-      var $rootProps = _ref17.$rootProps;
+    value: function getIconProps(_ref15, index) {
+      var _$rootProps$data4, _iconColor, _iconSize, _icon;
+      var $rootProps = _ref15.$rootProps;
       var data = (_$rootProps$data4 = $rootProps.data) === null || _$rootProps$data4 === void 0 ? void 0 : _$rootProps$data4[index];
       var _this$computeRadianPo4 = this.computeRadianPosition(data, index), xEnd = _this$computeRadianPo4.xEnd, yEnd = _this$computeRadianPo4.yEnd, isActive = _this$computeRadianPo4.isActive;
       var _this$asProps7 = this.asProps, uid = _this$asProps7.uid, resolveColor = _this$asProps7.resolveColor;
@@ -330,26 +325,26 @@ var RadialTreeRadian = /* @__PURE__ */ function(_Component2) {
       var icon = (_icon = data.icon) !== null && _icon !== void 0 ? _icon : this.asProps.icon;
       var x = xEnd - iconSize / 2;
       var y = yEnd - iconSize / 2;
-      return _ref18 = {
+      return _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
         x,
         y
-      }, _defineProperty(_ref18, "data-x", x), _defineProperty(_ref18, "data-y", y), _defineProperty(_ref18, "iconSize", iconSize), _defineProperty(_ref18, "color", iconColor !== null && iconColor !== void 0 ? iconColor : "#fff"), _defineProperty(_ref18, "resolveColor", resolveColor), _defineProperty(_ref18, "data-radial-animation", "".concat(uid, "-cap-icon")), _defineProperty(_ref18, "data-radian-index", index), _defineProperty(_ref18, "icon", icon), _defineProperty(_ref18, "tag", icon), _defineProperty(_ref18, "isActive", isActive), _ref18;
+      }, "data-x", x), "data-y", y), "iconSize", iconSize), "color", iconColor !== null && iconColor !== void 0 ? iconColor : "#fff"), "resolveColor", resolveColor), "data-radial-animation", "".concat(uid, "-cap-icon")), "data-radian-index", index), "icon", icon), "tag", icon), "isActive", isActive);
     }
   }, {
     key: "getLabelProps",
-    value: function getLabelProps(_ref19, index) {
-      var _$rootProps$data5, _color3, _ref21;
-      var $rootProps = _ref19.$rootProps;
+    value: function getLabelProps(_ref17, index) {
+      var _$rootProps$data5, _color3;
+      var $rootProps = _ref17.$rootProps;
       var data = (_$rootProps$data5 = $rootProps.data) === null || _$rootProps$data5 === void 0 ? void 0 : _$rootProps$data5[index];
       var _this$computeRadianPo5 = this.computeRadianPosition(data, index), xLabelCenter = _this$computeRadianPo5.xLabelCenter, yLabelCenter = _this$computeRadianPo5.yLabelCenter, labelAngle = _this$computeRadianPo5.labelAngle, isHorizontal = _this$computeRadianPo5.isHorizontal;
       var _this$asProps8 = this.asProps, uid = _this$asProps8.uid, textSize = _this$asProps8.textSize, transparent = _this$asProps8.transparent, resolveColor = _this$asProps8.resolveColor;
-      var _ref20 = data, label = _ref20.label;
+      var _ref18 = data, label = _ref18.label;
       var color = (_color3 = data.color) !== null && _color3 !== void 0 ? _color3 : this.asProps.color;
-      return _ref21 = {
+      return _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
         x: xLabelCenter,
         y: yLabelCenter,
         angle: labelAngle
-      }, _defineProperty(_ref21, "data-radial-animation", "".concat(uid, "-label")), _defineProperty(_ref21, "data-radian-index", index), _defineProperty(_ref21, "label", label), _defineProperty(_ref21, "color", color), _defineProperty(_ref21, "resolveColor", resolveColor), _defineProperty(_ref21, "isHorizontal", isHorizontal), _defineProperty(_ref21, "textSize", textSize), _defineProperty(_ref21, "transparent", transparent), _ref21;
+      }, "data-radial-animation", "".concat(uid, "-label")), "data-radian-index", index), "label", label), "color", color), "resolveColor", resolveColor), "isHorizontal", isHorizontal), "textSize", textSize), "transparent", transparent);
     }
   }, {
     key: "getRadianKey",
@@ -398,7 +393,7 @@ var RadialTreeRadian = /* @__PURE__ */ function(_Component2) {
     key: "renderRadian",
     value: function renderRadian(data, index) {
       var _ref2;
-      var _this$asProps10 = this.asProps, styles = _this$asProps10.styles, Children = _this$asProps10.Children, onRadianClick = _this$asProps10.onRadianClick;
+      var _this$asProps0 = this.asProps, styles = _this$asProps0.styles, Children = _this$asProps0.Children, onRadianClick = _this$asProps0.onRadianClick;
       var key = this.getRadianKey(data, index);
       var SRadian = "g";
       var children = getOriginChildren(Children);
@@ -409,12 +404,12 @@ var RadialTreeRadian = /* @__PURE__ */ function(_Component2) {
         mergedProps.children = _child;
       }
       this.asProps.dataHintsHandler.describeValueEntity("".concat(index, ".").concat(data.label), data.label);
-      var InteractiveArea3 = RadialTree.Radian.InteractiveArea;
-      return _ref2 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SRadian, _ref2.cn("SRadian", {
+      var InteractiveArea2 = RadialTree.Radian.InteractiveArea;
+      return _ref2 = sstyled(styles), /* @__PURE__ */ React.createElement(SRadian, _ref2.cn("SRadian", {
         "aria-hidden": true,
         "key": key,
         "onClick": onRadianClick(key)
-      }), /* @__PURE__ */ React.createElement(InteractiveArea3, _ref2.cn("InteractiveArea", {})), children);
+      }), /* @__PURE__ */ React.createElement(InteractiveArea2, _ref2.cn("InteractiveArea", {})), children);
     }
   }, {
     key: "render",
@@ -422,13 +417,12 @@ var RadialTreeRadian = /* @__PURE__ */ function(_Component2) {
       var _ref3, _this4 = this;
       var data = this.asProps.data;
       var SRadianList = "g";
-      return _ref3 = sstyled$1(this.asProps.styles), /* @__PURE__ */ React.createElement(SRadianList, _ref3.cn("SRadianList", {}), data.map(function(data2, index) {
+      return _ref3 = sstyled(this.asProps.styles), /* @__PURE__ */ React.createElement(SRadianList, _ref3.cn("SRadianList", {}), data.map(function(data2, index) {
         return _this4.renderRadian(data2, index);
       }));
     }
   }]);
-  return RadialTreeRadian2;
-}(Component);
+})(Component);
 _defineProperty(RadialTreeRadian, "displayName", "RadialTreeRadian");
 _defineProperty(RadialTreeRadian, "style", style);
 _defineProperty(RadialTreeRadian, "defaultProps", {
@@ -439,29 +433,29 @@ _defineProperty(RadialTreeRadian, "defaultProps", {
   iconSize: 16,
   textSize: 14
 });
-var InteractiveArea = function InteractiveArea2(_ref22) {
+function InteractiveArea(_ref20) {
   var _ref4;
-  var SInteractiveArea = _ref22.Element, styles = _ref22.styles;
-  return _ref4 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SInteractiveArea, _ref4.cn("SInteractiveArea", {
+  var SInteractiveArea = _ref20.Element, styles = _ref20.styles;
+  return _ref4 = sstyled(styles), /* @__PURE__ */ React.createElement(SInteractiveArea, _ref4.cn("SInteractiveArea", {
     "stroke": "transparent",
     "render": "line"
   }));
-};
-var Line = function Line2(_ref23) {
+}
+function Line(_ref21) {
   var _ref5;
-  var SLine = _ref23.Element, styles = _ref23.styles, stroke = _ref23.stroke, resolveColor = _ref23.resolveColor, transparent = _ref23.transparent;
-  return _ref5 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SLine, _ref5.cn("SLine", {
+  var SLine = _ref21.Element, styles = _ref21.styles, stroke = _ref21.stroke, resolveColor = _ref21.resolveColor, transparent = _ref21.transparent;
+  return _ref5 = sstyled(styles), /* @__PURE__ */ React.createElement(SLine, _ref5.cn("SLine", {
     "render": "line",
     "stroke": resolveColor(stroke),
     "transparent": transparent
   }));
-};
-var Cap = function Cap2(_ref24) {
+}
+function Cap(_ref22) {
   var _ref7;
-  var SCap = _ref24.Element, styles = _ref24.styles, _ref24$x = _ref24.x, x = _ref24$x === void 0 ? 0 : _ref24$x, _ref24$y = _ref24.y, y = _ref24$y === void 0 ? 0 : _ref24$y, radius = _ref24.radius, color = _ref24.color, resolveColor = _ref24.resolveColor, transparent = _ref24.transparent, patterns = _ref24.patterns;
+  var SCap = _ref22.Element, styles = _ref22.styles, _ref22$x = _ref22.x, x = _ref22$x === void 0 ? 0 : _ref22$x, _ref22$y = _ref22.y, y = _ref22$y === void 0 ? 0 : _ref22$y, radius = _ref22.radius, color = _ref22.color, resolveColor = _ref22.resolveColor, transparent = _ref22.transparent, patterns = _ref22.patterns;
   if (!patterns) {
     var _ref6;
-    return _ref6 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SCap, _ref6.cn("SCap", {
+    return _ref6 = sstyled(styles), /* @__PURE__ */ React.createElement(SCap, _ref6.cn("SCap", {
       "render": "circle",
       "cx": x,
       "cy": y,
@@ -475,7 +469,7 @@ var Cap = function Cap2(_ref24) {
     patternKey,
     patterns
   }), _getPatternSymbolSize2 = _slicedToArray(_getPatternSymbolSize, 2), width = _getPatternSymbolSize2[0], height = _getPatternSymbolSize2[1];
-  return _ref7 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SCap, _ref7.cn("SCap", {
+  return _ref7 = sstyled(styles), /* @__PURE__ */ React.createElement(SCap, _ref7.cn("SCap", {
     "render": PatternSymbol,
     "patternKey": color,
     "x": x - (width || 0) / 2,
@@ -484,14 +478,14 @@ var Cap = function Cap2(_ref24) {
     "transparent": transparent,
     "pattern": true
   }));
-};
-var Icon = function Icon2(_ref25) {
+}
+function Icon(_ref23) {
   var _ref8;
-  var SIcon = _ref25.Element, styles = _ref25.styles, isActive = _ref25.isActive, tag = _ref25.tag, x = _ref25.x, y = _ref25.y, iconSize = _ref25.iconSize, transparent = _ref25.transparent;
+  var SIcon = _ref23.Element, styles = _ref23.styles, isActive = _ref23.isActive, tag = _ref23.tag, x = _ref23.x, y = _ref23.y, iconSize = _ref23.iconSize, transparent = _ref23.transparent;
   if (!(isActive && tag)) return null;
   var width = iconSize;
   var height = iconSize;
-  return _ref8 = sstyled$1(styles), /* @__PURE__ */ React.createElement(SIcon, _ref8.cn("SIcon", {
+  return _ref8 = sstyled(styles), /* @__PURE__ */ React.createElement(SIcon, _ref8.cn("SIcon", {
     "x": x,
     "y": y,
     "width": width,
@@ -499,18 +493,18 @@ var Icon = function Icon2(_ref25) {
     "render": tag,
     "transparent": transparent
   }));
-};
-var Label = function Label2(_ref26) {
-  var SLabel = _ref26.Element, Children = _ref26.Children, styles = _ref26.styles, label = _ref26.label, color = _ref26.color, resolveColor = _ref26.resolveColor, isHorizontal = _ref26.isHorizontal, x = _ref26.x, y = _ref26.y, textSize = _ref26.textSize, angle = _ref26.angle, transparent = _ref26.transparent;
+}
+function Label(_ref24) {
+  var SLabel = _ref24.Element, Children = _ref24.Children, styles = _ref24.styles, label = _ref24.label, color = _ref24.color, resolveColor = _ref24.resolveColor, isHorizontal = _ref24.isHorizontal, x = _ref24.x, y = _ref24.y, textSize = _ref24.textSize, angle = _ref24.angle, transparent = _ref24.transparent;
   var lines = String(label).split("\n");
   var linesCount = lines.length;
   var SLabelLine = "tspan";
   var angleDegs = (angle / Math.PI * 180).toFixed(2);
   var transformOrigin = [x.toFixed(2), y.toFixed(2)];
   var transform = "rotate(".concat([angleDegs].concat(transformOrigin).join(", "), ")");
-  var sstyles = sstyled$1(styles);
+  var sstyles = sstyled(styles);
   var sLabelStyles = sstyles.cn("SLabel", {
-    color: resolveColor(color),
+    "color": resolveColor(color),
     "text-cursor": isHorizontal ? "text" : "vertical-text",
     transparent
   });
@@ -531,7 +525,7 @@ var Label = function Label2(_ref26) {
       key: "#".concat(lineIndex, "-").concat(lineText)
     }, lineText);
   }), /* @__PURE__ */ React.createElement(Children, null));
-};
+}
 var Radian = createElement(RadialTreeRadian, {
   InteractiveArea,
   Line,
@@ -539,13 +533,13 @@ var Radian = createElement(RadialTreeRadian, {
   Icon,
   Label
 });
-var Title = function Title2(_ref27) {
+function Title(_ref25) {
   var _ref9;
-  var STitle = _ref27.Element, Children = _ref27.Children, children = _ref27.children, styles = _ref27.styles, textSize = _ref27.textSize, color = _ref27.color, resolveColor = _ref27.resolveColor, x = _ref27.x, y = _ref27.y, dataHintsHandler = _ref27.dataHintsHandler;
+  var STitle = _ref25.Element, Children = _ref25.Children, children = _ref25.children, styles = _ref25.styles, textSize = _ref25.textSize, color = _ref25.color, resolveColor = _ref25.resolveColor, x = _ref25.x, y = _ref25.y, dataHintsHandler = _ref25.dataHintsHandler;
   if (typeof children === "string") {
     dataHintsHandler.setTitle("vertical", children);
   }
-  return _ref9 = sstyled$1(styles), /* @__PURE__ */ React.createElement(STitle, _ref9.cn("STitle", {
+  return _ref9 = sstyled(styles), /* @__PURE__ */ React.createElement(STitle, _ref9.cn("STitle", {
     "aria-hidden": true,
     "render": "text",
     "textAnchor": "middle",
@@ -555,7 +549,7 @@ var Title = function Title2(_ref27) {
     "x": x,
     "y": y
   }), /* @__PURE__ */ React.createElement(Children, _ref9.cn("Children", {})));
-};
+}
 var RadialTree = createElement(RadialTreeBase, {
   Title,
   Radian