@semcore/d3-chart 16.5.0 → 17.0.0-prerelease.8

package/lib/esm/RadialTree.mjs

@@ -1,11 +1,3 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-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 _callSuper from "@babel/runtime/helpers/esm/callSuper";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import { sstyled, Component } from "@semcore/core";
 import assignProps from "@semcore/core/lib/utils/assignProps";
@@ -17,229 +9,220 @@ import React from "react";
 import createElement from "./createElement.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 = (
+const style = (
   /*__reshadow_css_start__*/
   (sstyled.insert(
     /*__inner_css_start__*/
-    ".___SRadian_1sbqs_gg_{cursor:pointer;fill:var(--intergalactic-text-large-info, #008ff8)}.___SLine_1sbqs_gg_{stroke:var(--intergalactic-text-large-info, #008ff8)}.___SLine_1sbqs_gg_.__stroke_1sbqs_gg_{stroke:var(--stroke_1sbqs)}.___SLine_1sbqs_gg_.__transparent_1sbqs_gg_{opacity:.3}.___SCap_1sbqs_gg_{transition:r .1s}.___SCap_1sbqs_gg_.__pattern_1sbqs_gg_{stroke:var(--intergalactic-chart-grid-border, #ffffff);stroke-width:1px}.___SCap_1sbqs_gg_.__transparent_1sbqs_gg_,.___SIcon_1sbqs_gg_.__transparent_1sbqs_gg_,.___SLabel_1sbqs_gg_.__transparent_1sbqs_gg_{opacity:.3}.___SLabel_1sbqs_gg_{fill:var(--color_1sbqs)}@media (hover:hover){.___SRadian_1sbqs_gg_:hover .___SLabel_1sbqs_gg_{cursor:pointer;filter:brightness(.6)}}@media (prefers-reduced-motion){.___SLineCap_1sbqs_gg_{transition:none}}",
+    ".___SRadian_56jyw_gg_{cursor:pointer;fill:var(--intergalactic-text-large-info, #008ff8)}.___SLine_56jyw_gg_{stroke:var(--intergalactic-text-large-info, #008ff8)}.___SLine_56jyw_gg_.__stroke_56jyw_gg_{stroke:var(--stroke_56jyw)}.___SLine_56jyw_gg_.__transparent_56jyw_gg_{opacity:.3}.___SCap_56jyw_gg_{transition:r .1s}.___SCap_56jyw_gg_.__pattern_56jyw_gg_{stroke:var(--intergalactic-chart-grid-border, #ffffff);stroke-width:1px}.___SCap_56jyw_gg_.__transparent_56jyw_gg_,.___SIcon_56jyw_gg_.__transparent_56jyw_gg_,.___SLabel_56jyw_gg_.__transparent_56jyw_gg_{opacity:.3}.___SLabel_56jyw_gg_{fill:var(--color_56jyw)}@media (hover:hover){.___SRadian_56jyw_gg_:hover .___SLabel_56jyw_gg_{cursor:pointer;filter:brightness(.6)}}@media (prefers-reduced-motion){.___SLineCap_56jyw_gg_{transition:none}}",
     /*__inner_css_end__*/
-    "1sbqs_gg_"
+    "56jyw_gg_"
   ), /*__reshadow_css_end__*/
   {
-    "__SRadian": "___SRadian_1sbqs_gg_",
-    "__SLine": "___SLine_1sbqs_gg_",
-    "_stroke": "__stroke_1sbqs_gg_",
-    "--stroke": "--stroke_1sbqs",
-    "_transparent": "__transparent_1sbqs_gg_",
-    "__SCap": "___SCap_1sbqs_gg_",
-    "_pattern": "__pattern_1sbqs_gg_",
-    "__SIcon": "___SIcon_1sbqs_gg_",
-    "__SLabel": "___SLabel_1sbqs_gg_",
-    "--color": "--color_1sbqs",
-    "__SLineCap": "___SLineCap_1sbqs_gg_"
+    "__SRadian": "___SRadian_56jyw_gg_",
+    "__SLine": "___SLine_56jyw_gg_",
+    "_stroke": "__stroke_56jyw_gg_",
+    "--stroke": "--stroke_56jyw",
+    "_transparent": "__transparent_56jyw_gg_",
+    "__SCap": "___SCap_56jyw_gg_",
+    "_pattern": "__pattern_56jyw_gg_",
+    "__SIcon": "___SIcon_56jyw_gg_",
+    "__SLabel": "___SLabel_56jyw_gg_",
+    "--color": "--color_56jyw",
+    "__SLineCap": "___SLineCap_56jyw_gg_"
   })
 );
-var baseAngle = -Math.PI / 2;
-var RadialTreeBase = /* @__PURE__ */ (function(_Component) {
-  function RadialTreeBase2(props) {
-    var _this;
-    _classCallCheck(this, RadialTreeBase2);
-    _this = _callSuper(this, RadialTreeBase2, [props]);
-    _defineProperty(_this, "Element", void 0);
-    _this.handleRadianClick = _this.handleRadianClick.bind(_this);
-    return _this;
+const baseAngle = -Math.PI / 2;
+class RadialTreeBase extends Component {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "Element", void 0);
+    this.handleRadianClick = this.handleRadianClick.bind(this);
   }
-  _inherits(RadialTreeBase2, _Component);
-  return _createClass(RadialTreeBase2, [{
-    key: "uncontrolledProps",
-    value: function uncontrolledProps() {
-      return {
-        activeKey: null
-      };
-    }
-  }, {
-    key: "runAppearAnimation",
-    value: function runAppearAnimation() {
-      var _window$matchMedia;
-      var _this$asProps = this.asProps, duration = _this$asProps.duration, uid = _this$asProps.uid;
-      if (!canUseDOM()) return;
-      var preferReduceMotion = (_window$matchMedia = window.matchMedia("(prefers-reduced-motion: reduce)")) === null || _window$matchMedia === void 0 ? void 0 : _window$matchMedia.matches;
-      if (!(duration > 0)) return;
-      if (preferReduceMotion) return;
-      var circlesAnimation = transition().selection().selectAll("[data-radial-animation=".concat(uid, "-cap-circle]")).interrupt();
-      var iconsAnimation = transition().selection().selectAll("[data-radial-animation=".concat(uid, "-cap-icon]")).interrupt();
-      var linesAnimation = transition().selection().selectAll("[data-radial-animation=".concat(uid, "-line]")).interrupt();
-      var labelsAnimation = transition().selection().selectAll("[data-radial-animation=".concat(uid, "-label]")).interrupt();
-      var circlesNodes = circlesAnimation.nodes();
-      var iconsNodes = iconsAnimation.nodes();
-      var linesNodes = linesAnimation.nodes();
-      var labelsNodes = linesAnimation.nodes();
-      if (circlesNodes.length > 0) {
-        var attrs = circlesNodes.map(function(node) {
-          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 || (_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"],
-              cy: node.dataset["cy"]
-            }
-          };
-        });
-        circlesAnimation.attr("opacity", 0).attr("cx", function(_, index) {
-          var _attrs$index$from;
-          return (_attrs$index$from = attrs[index].from) === null || _attrs$index$from === void 0 ? void 0 : _attrs$index$from.cx;
-        }).attr("cy", function(_, index) {
-          var _attrs$index$from2;
-          return (_attrs$index$from2 = attrs[index].from) === null || _attrs$index$from2 === void 0 ? void 0 : _attrs$index$from2.cy;
-        }).transition().duration(duration).attr("opacity", 1).attr("cx", function(_, index) {
-          var _attrs$index$to;
-          return (_attrs$index$to = attrs[index].to) === null || _attrs$index$to === void 0 ? void 0 : _attrs$index$to.cx;
-        }).attr("cy", function(_, index) {
-          var _attrs$index$to2;
-          return (_attrs$index$to2 = attrs[index].to) === null || _attrs$index$to2 === void 0 ? void 0 : _attrs$index$to2.cy;
-        });
-      }
-      if (iconsNodes.length > 0) {
-        var _attrs = iconsNodes.map(function(node) {
-          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 || (_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"],
-              y: node.dataset["y"]
-            }
-          };
-        });
-        iconsAnimation.attr("opacity", 0).attr("x", function(_, index) {
-          var _attrs$index$from3;
-          return (_attrs$index$from3 = _attrs[index].from) === null || _attrs$index$from3 === void 0 ? void 0 : _attrs$index$from3.x;
-        }).attr("y", function(_, index) {
-          var _attrs$index$from4;
-          return (_attrs$index$from4 = _attrs[index].from) === null || _attrs$index$from4 === void 0 ? void 0 : _attrs$index$from4.y;
-        }).transition().duration(duration).attr("opacity", 1).attr("x", function(_, index) {
-          var _attrs$index$to3;
-          return (_attrs$index$to3 = _attrs[index].to) === null || _attrs$index$to3 === void 0 ? void 0 : _attrs$index$to3.x;
-        }).attr("y", function(_, index) {
-          var _attrs$index$to4;
-          return (_attrs$index$to4 = _attrs[index].to) === null || _attrs$index$to4 === void 0 ? void 0 : _attrs$index$to4.y;
-        });
-      }
-      if (linesNodes.length > 0) {
-        var _attrs2 = linesNodes.map(function(node) {
-          var _node$x, _node$y;
-          return {
-            from: {
-              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"],
-              y2: node.dataset["y2"]
-            }
-          };
-        });
-        linesAnimation.attr("opacity", 0).attr("x2", function(_, index) {
-          var _attrs2$index$from;
-          return (_attrs2$index$from = _attrs2[index].from) === null || _attrs2$index$from === void 0 ? void 0 : _attrs2$index$from.x2;
-        }).attr("y2", function(_, index) {
-          var _attrs2$index$from2;
-          return (_attrs2$index$from2 = _attrs2[index].from) === null || _attrs2$index$from2 === void 0 ? void 0 : _attrs2$index$from2.y2;
-        }).transition().duration(duration).attr("opacity", 1).attr("x2", function(_, index) {
-          var _attrs2$index$to;
-          return (_attrs2$index$to = _attrs2[index].to) === null || _attrs2$index$to === void 0 ? void 0 : _attrs2$index$to.x2;
-        }).attr("y2", function(_, index) {
-          var _attrs2$index$to2;
-          return (_attrs2$index$to2 = _attrs2[index].to) === null || _attrs2$index$to2 === void 0 ? void 0 : _attrs2$index$to2.y2;
-        });
-      }
-      if (labelsNodes.length > 0) {
-        labelsAnimation.attr("opacity", 0);
-        labelsAnimation.transition().duration(duration).attr("opacity", 1);
-      }
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      if (prevProps.$rootProps.data !== this.asProps.data) {
-        this.runAppearAnimation();
-      }
-    }
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this.runAppearAnimation();
-    }
-  }, {
-    key: "handleRadianClick",
-    value: function handleRadianClick(key) {
-      var _this2 = this;
-      return function(event) {
-        var newKey = key !== _this2.asProps.activeKey ? key : null;
-        _this2.handlers.activeKey(newKey, event);
-      };
-    }
-  }, {
-    key: "computeTextWidth",
-    value: function computeTextWidth() {
-      var _this$asProps2 = this.asProps, data = _this$asProps2.data, textSize = _this$asProps2.textSize;
-      var widths = data.map(function(_ref0) {
-        var label = _ref0.label;
-        return measureText(label, textSize);
+  uncontrolledProps() {
+    return {
+      activeKey: null
+    };
+  }
+  runAppearAnimation() {
+    var _a;
+    const {
+      duration,
+      uid
+    } = this.asProps;
+    if (!canUseDOM()) return;
+    const preferReduceMotion = (_a = window.matchMedia("(prefers-reduced-motion: reduce)")) == null ? void 0 : _a.matches;
+    if (!(duration > 0)) return;
+    if (preferReduceMotion) return;
+    const circlesAnimation = transition().selection().selectAll(`[data-radial-animation=${uid}-cap-circle]`).interrupt();
+    const iconsAnimation = transition().selection().selectAll(`[data-radial-animation=${uid}-cap-icon]`).interrupt();
+    const linesAnimation = transition().selection().selectAll(`[data-radial-animation=${uid}-line]`).interrupt();
+    const labelsAnimation = transition().selection().selectAll(`[data-radial-animation=${uid}-label]`).interrupt();
+    const circlesNodes = circlesAnimation.nodes();
+    const iconsNodes = iconsAnimation.nodes();
+    const linesNodes = linesAnimation.nodes();
+    const labelsNodes = linesAnimation.nodes();
+    if (circlesNodes.length > 0) {
+      const attrs = circlesNodes.map((node) => {
+        var _a2, _b, _c, _d;
+        const radianIndex = Number.parseInt(node.dataset.radianIndex, 10);
+        const lineNode = linesNodes[radianIndex];
+        return {
+          from: {
+            cx: (_b = (_a2 = lineNode.x1) == null ? void 0 : _a2.baseVal) == null ? void 0 : _b.value,
+            cy: (_d = (_c = lineNode.y1) == null ? void 0 : _c.baseVal) == null ? void 0 : _d.value
+          },
+          to: {
+            cx: node.dataset["cx"],
+            cy: node.dataset["cy"]
+          }
+        };
+      });
+      circlesAnimation.attr("opacity", 0).attr("cx", (_, index) => {
+        var _a2;
+        return (_a2 = attrs[index].from) == null ? void 0 : _a2.cx;
+      }).attr("cy", (_, index) => {
+        var _a2;
+        return (_a2 = attrs[index].from) == null ? void 0 : _a2.cy;
+      }).transition().duration(duration).attr("opacity", 1).attr("cx", (_, index) => {
+        var _a2;
+        return (_a2 = attrs[index].to) == null ? void 0 : _a2.cx;
+      }).attr("cy", (_, index) => {
+        var _a2;
+        return (_a2 = attrs[index].to) == null ? void 0 : _a2.cy;
       });
-      return Math.max.apply(Math, _toConsumableArray(widths));
     }
-  }, {
-    key: "getTitleProps",
-    value: function getTitleProps() {
-      var _this$asProps3 = this.asProps, uid = _this$asProps3.uid, size = _this$asProps3.size, textSize = _this$asProps3.textSize;
-      var _size = _slicedToArray(size, 2), width = _size[0], height = _size[1];
-      var center = [width / 2, height / 2];
-      var x = center[0], y = center[1];
-      return _defineProperty({
-        x,
-        y,
-        textSize: textSize * 1.5
-      }, "data-radial-animation", "".concat(uid, "-label"));
+    if (iconsNodes.length > 0) {
+      const attrs = iconsNodes.map((node) => {
+        var _a2, _b, _c, _d, _e, _f, _g, _h;
+        const width = (_b = (_a2 = node.width) == null ? void 0 : _a2.baseVal) == null ? void 0 : _b.value;
+        const height = (_d = (_c = node.height) == null ? void 0 : _c.baseVal) == null ? void 0 : _d.value;
+        const radianIndex = Number.parseInt(node.dataset.radianIndex, 10);
+        const lineNode = linesNodes[radianIndex];
+        return {
+          from: {
+            x: ((_f = (_e = lineNode.x1) == null ? void 0 : _e.baseVal) == null ? void 0 : _f.value) - width / 2,
+            y: ((_h = (_g = lineNode.y1) == null ? void 0 : _g.baseVal) == null ? void 0 : _h.value) - height / 2
+          },
+          to: {
+            x: node.dataset["x"],
+            y: node.dataset["y"]
+          }
+        };
+      });
+      iconsAnimation.attr("opacity", 0).attr("x", (_, index) => {
+        var _a2;
+        return (_a2 = attrs[index].from) == null ? void 0 : _a2.x;
+      }).attr("y", (_, index) => {
+        var _a2;
+        return (_a2 = attrs[index].from) == null ? void 0 : _a2.y;
+      }).transition().duration(duration).attr("opacity", 1).attr("x", (_, index) => {
+        var _a2;
+        return (_a2 = attrs[index].to) == null ? void 0 : _a2.x;
+      }).attr("y", (_, index) => {
+        var _a2;
+        return (_a2 = attrs[index].to) == null ? void 0 : _a2.y;
+      });
     }
-  }, {
-    key: "getRadianProps",
-    value: function getRadianProps() {
-      var _this$asProps4 = this.asProps, data = _this$asProps4.data, restRootProps = _objectWithoutProperties(_this$asProps4, _excluded);
-      var textWidth = this.computeTextWidth();
-      return _objectSpread(_objectSpread({}, restRootProps), {}, {
-        radiansCount: data.length,
-        data,
-        textWidth,
-        onRadianClick: this.handleRadianClick
+    if (linesNodes.length > 0) {
+      const attrs = linesNodes.map((node) => {
+        var _a2, _b, _c, _d;
+        return {
+          from: {
+            x2: (_b = (_a2 = node.x1) == null ? void 0 : _a2.baseVal) == null ? void 0 : _b.value,
+            y2: (_d = (_c = node.y1) == null ? void 0 : _c.baseVal) == null ? void 0 : _d.value
+          },
+          to: {
+            x2: node.dataset["x2"],
+            y2: node.dataset["y2"]
+          }
+        };
+      });
+      linesAnimation.attr("opacity", 0).attr("x2", (_, index) => {
+        var _a2;
+        return (_a2 = attrs[index].from) == null ? void 0 : _a2.x2;
+      }).attr("y2", (_, index) => {
+        var _a2;
+        return (_a2 = attrs[index].from) == null ? void 0 : _a2.y2;
+      }).transition().duration(duration).attr("opacity", 1).attr("x2", (_, index) => {
+        var _a2;
+        return (_a2 = attrs[index].to) == null ? void 0 : _a2.x2;
+      }).attr("y2", (_, index) => {
+        var _a2;
+        return (_a2 = attrs[index].to) == null ? void 0 : _a2.y2;
       });
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _ref;
-      var SRadialTree = this.Element;
-      var Children = this.asProps.Children;
-      this.asProps.dataHintsHandler.establishDataType("values-set");
-      return _ref = sstyled(this.asProps.styles), /* @__PURE__ */ React.createElement(SRadialTree, _ref.cn("SRadialTree", {
-        "render": "g"
-      }), /* @__PURE__ */ React.createElement(Children, _ref.cn("Children", {})));
+    if (labelsNodes.length > 0) {
+      labelsAnimation.attr("opacity", 0);
+      labelsAnimation.transition().duration(duration).attr("opacity", 1);
     }
-  }]);
-})(Component);
+  }
+  componentDidUpdate(prevProps) {
+    if (prevProps.$rootProps.data !== this.asProps.data) {
+      this.runAppearAnimation();
+    }
+  }
+  componentDidMount() {
+    this.runAppearAnimation();
+  }
+  handleRadianClick(key) {
+    return (event) => {
+      const newKey = key !== this.asProps.activeKey ? key : null;
+      this.handlers.activeKey(newKey, event);
+    };
+  }
+  computeTextWidth() {
+    const {
+      data,
+      textSize
+    } = this.asProps;
+    const widths = data.map(({
+      label
+    }) => measureText(label, textSize));
+    return Math.max(...widths);
+  }
+  getTitleProps() {
+    const {
+      uid,
+      size,
+      textSize
+    } = this.asProps;
+    const [width, height] = size;
+    const center = [width / 2, height / 2];
+    const [x, y] = center;
+    return {
+      x,
+      y,
+      textSize: textSize * 1.5,
+      ["data-radial-animation"]: `${uid}-label`
+    };
+  }
+  getRadianProps() {
+    const {
+      data,
+      ...restRootProps
+    } = this.asProps;
+    const textWidth = this.computeTextWidth();
+    return {
+      ...restRootProps,
+      radiansCount: data.length,
+      data,
+      textWidth,
+      onRadianClick: this.handleRadianClick
+    };
+  }
+  render() {
+    var _ref;
+    const SRadialTree = this.Element;
+    const {
+      Children
+    } = this.asProps;
+    this.asProps.dataHintsHandler.establishDataType("values-set");
+    return _ref = sstyled(this.asProps.styles), /* @__PURE__ */ React.createElement(SRadialTree, _ref.cn("SRadialTree", {
+      "render": "g"
+    }), /* @__PURE__ */ React.createElement(Children, _ref.cn("Children", {})));
+  }
+}
 _defineProperty(RadialTreeBase, "displayName", "RadialTree");
 _defineProperty(RadialTreeBase, "style", style);
 _defineProperty(RadialTreeBase, "enhance", [uniqueIDEnhancement()]);
@@ -254,175 +237,244 @@ _defineProperty(RadialTreeBase, "defaultProps", {
   textSize: 14,
   defaultActiveKey: null
 });
-var RadialTreeRadian = /* @__PURE__ */ (function(_Component2) {
-  function RadialTreeRadian2(props) {
-    var _this3;
-    _classCallCheck(this, RadialTreeRadian2);
-    _this3 = _callSuper(this, RadialTreeRadian2, [props]);
-    _defineProperty(_this3, "Element", void 0);
-    _this3.renderRadian = _this3.renderRadian.bind(_this3);
-    return _this3;
+class RadialTreeRadian extends Component {
+  constructor(props) {
+    super(props);
+    _defineProperty(this, "Element", void 0);
+    this.renderRadian = this.renderRadian.bind(this);
   }
-  _inherits(RadialTreeRadian2, _Component2);
-  return _createClass(RadialTreeRadian2, [{
-    key: "getInteractiveAreaProps",
-    value: function getInteractiveAreaProps(_ref10, index) {
-      var _$rootProps$data;
-      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 {
-        x1: xStart,
-        y1: yStart,
-        x2: xLabelCenter,
-        y2: yLabelCenter,
-        strokeWidth: capSize * 3
-      };
-    }
-  }, {
-    key: "getLineProps",
-    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 _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
-        x1: xStart,
-        y1: yStart,
-        x2: xEnd,
-        y2: yEnd,
-        stroke: color,
-        resolveColor,
-        transparent
-      }, "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(_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 _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
-        x: xEnd,
-        y: yEnd
-      }, "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(_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;
-      var iconColor = (_iconColor = data.iconColor) !== null && _iconColor !== void 0 ? _iconColor : this.asProps.iconColor;
-      var iconSize = (_iconSize = data.iconSize) !== null && _iconSize !== void 0 ? _iconSize : this.asProps.iconSize;
-      var icon = (_icon = data.icon) !== null && _icon !== void 0 ? _icon : this.asProps.icon;
-      var x = xEnd - iconSize / 2;
-      var y = yEnd - iconSize / 2;
-      return _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
-        x,
-        y
-      }, "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(_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 _ref18 = data, label = _ref18.label;
-      var color = (_color3 = data.color) !== null && _color3 !== void 0 ? _color3 : this.asProps.color;
-      return _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
-        x: xLabelCenter,
-        y: yLabelCenter,
-        angle: labelAngle
-      }, "data-radial-animation", "".concat(uid, "-label")), "data-radian-index", index), "label", label), "color", color), "resolveColor", resolveColor), "isHorizontal", isHorizontal), "textSize", textSize), "transparent", transparent);
-    }
-  }, {
-    key: "getRadianKey",
-    value: function getRadianKey(data, index) {
-      var _data$key;
-      return (_data$key = data.key) !== null && _data$key !== void 0 ? _data$key : "radian-".concat(index);
-    }
-  }, {
-    key: "computeRadianPosition",
-    value: function computeRadianPosition(data, index) {
-      var _data$capSize;
-      var _this$asProps9 = this.asProps, centralMargin = _this$asProps9.centralMargin, labelMargin = _this$asProps9.labelMargin, angleOffset = _this$asProps9.angleOffset, activeKey = _this$asProps9.activeKey, size = _this$asProps9.size, radiansCount = _this$asProps9.radiansCount, textWidth = _this$asProps9.textWidth;
-      var _size2 = _slicedToArray(size, 2), width = _size2[0], height = _size2[1];
-      var key = this.getRadianKey(data, index);
-      var isActive = activeKey === key;
-      var baseCapSize = (_data$capSize = data.capSize) !== null && _data$capSize !== void 0 ? _data$capSize : this.asProps.capSize;
-      var capSize = baseCapSize * (isActive ? 1 : 0.5);
-      var minDemSize = Math.min(width, height) / 2;
-      var length = Math.max(minDemSize - textWidth - baseCapSize - centralMargin - labelMargin * 2, 10);
-      var angle = baseAngle + angleOffset + index / radiansCount * (Math.PI * 2);
-      var isHorizontal = angle - baseAngle > 1 / 6 * Math.PI && angle - baseAngle < 5 / 6 * Math.PI || angle - baseAngle > 7 / 6 * Math.PI && angle - baseAngle < 11 / 6 * Math.PI;
-      var topAngle = -Math.PI / 2;
-      var labelAngle = (angle - topAngle) % Math.PI + topAngle;
-      var center = [width / 2, height / 2];
-      var xCenter = center[0], yCenter = center[1];
-      var start = [xCenter + Math.cos(angle) * centralMargin, yCenter + Math.sin(angle) * centralMargin];
-      var end = [xCenter + Math.cos(angle) * (centralMargin + length), yCenter + Math.sin(angle) * (centralMargin + length)];
-      var xStart = start[0], yStart = start[1];
-      var xEnd = end[0], yEnd = end[1];
-      var labelCenter = [xCenter + Math.cos(angle) * (centralMargin + length + baseCapSize + textWidth / 2 + labelMargin), yCenter + Math.sin(angle) * (centralMargin + length + baseCapSize + textWidth / 2 + labelMargin)];
-      var xLabelCenter = labelCenter[0], yLabelCenter = labelCenter[1];
-      return {
-        xStart,
-        yStart,
-        xEnd,
-        yEnd,
-        xLabelCenter,
-        yLabelCenter,
-        labelAngle,
-        isHorizontal,
-        capSize,
-        isActive
-      };
-    }
-  }, {
-    key: "renderRadian",
-    value: function renderRadian(data, index) {
-      var _ref2;
-      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);
-      if (typeof children === "function") {
-        var _child = this.asProps.children;
-        var mergedProps = assignProps(children(this.asProps), this.asProps);
-        children = mergedProps.children;
-        mergedProps.children = _child;
-      }
-      this.asProps.dataHintsHandler.describeValueEntity("".concat(index, ".").concat(data.label), data.label);
-      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(InteractiveArea2, _ref2.cn("InteractiveArea", {})), children);
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _ref3, _this4 = this;
-      var data = this.asProps.data;
-      var SRadianList = "g";
-      return _ref3 = sstyled(this.asProps.styles), /* @__PURE__ */ React.createElement(SRadianList, _ref3.cn("SRadianList", {}), data.map(function(data2, index) {
-        return _this4.renderRadian(data2, index);
-      }));
+  getInteractiveAreaProps({
+    $rootProps
+  }, index) {
+    var _a;
+    const data = (_a = $rootProps.data) == null ? void 0 : _a[index];
+    const {
+      xStart,
+      yStart,
+      xLabelCenter,
+      yLabelCenter,
+      capSize
+    } = this.computeRadianPosition(data, index);
+    return {
+      x1: xStart,
+      y1: yStart,
+      x2: xLabelCenter,
+      y2: yLabelCenter,
+      strokeWidth: capSize * 3
+    };
+  }
+  getLineProps({
+    $rootProps
+  }, index) {
+    var _a;
+    const data = (_a = $rootProps.data) == null ? void 0 : _a[index];
+    const {
+      xStart,
+      yStart,
+      xEnd,
+      yEnd
+    } = this.computeRadianPosition(data, index);
+    const {
+      uid,
+      transparent,
+      resolveColor
+    } = this.asProps;
+    const color = data.color ?? this.asProps.color;
+    return {
+      x1: xStart,
+      y1: yStart,
+      x2: xEnd,
+      y2: yEnd,
+      stroke: color,
+      resolveColor,
+      transparent,
+      ["data-x1"]: xStart,
+      ["data-y1"]: yStart,
+      ["data-x2"]: xEnd,
+      ["data-y2"]: yEnd,
+      ["data-radial-animation"]: `${uid}-line`,
+      ["data-radian-index"]: index
+    };
+  }
+  getCapProps({
+    $rootProps
+  }, index) {
+    var _a;
+    const data = (_a = $rootProps.data) == null ? void 0 : _a[index];
+    const {
+      xEnd,
+      yEnd,
+      capSize
+    } = this.computeRadianPosition(data, index);
+    const {
+      uid,
+      transparent,
+      resolveColor,
+      patterns
+    } = this.asProps;
+    const color = data.color ?? this.asProps.color;
+    return {
+      x: xEnd,
+      y: yEnd,
+      ["data-cx"]: xEnd,
+      ["data-cy"]: yEnd,
+      radius: capSize,
+      color,
+      resolveColor,
+      transparent,
+      patterns,
+      uid: `${uid}-cap-${index}`,
+      ["data-radial-animation"]: `${uid}-cap-circle`,
+      ["data-radian-index"]: index
+    };
+  }
+  getIconProps({
+    $rootProps
+  }, index) {
+    var _a;
+    const data = (_a = $rootProps.data) == null ? void 0 : _a[index];
+    const {
+      xEnd,
+      yEnd,
+      isActive
+    } = this.computeRadianPosition(data, index);
+    const {
+      uid,
+      resolveColor
+    } = this.asProps;
+    const iconColor = data.iconColor ?? this.asProps.iconColor;
+    const iconSize = data.iconSize ?? this.asProps.iconSize;
+    const icon = data.icon ?? this.asProps.icon;
+    const x = xEnd - iconSize / 2;
+    const y = yEnd - iconSize / 2;
+    return {
+      x,
+      y,
+      ["data-x"]: x,
+      ["data-y"]: y,
+      iconSize,
+      color: iconColor ?? "#fff",
+      resolveColor,
+      ["data-radial-animation"]: `${uid}-cap-icon`,
+      ["data-radian-index"]: index,
+      icon,
+      tag: icon,
+      isActive
+    };
+  }
+  getLabelProps({
+    $rootProps
+  }, index) {
+    var _a;
+    const data = (_a = $rootProps.data) == null ? void 0 : _a[index];
+    const {
+      xLabelCenter,
+      yLabelCenter,
+      labelAngle,
+      isHorizontal
+    } = this.computeRadianPosition(data, index);
+    const {
+      uid,
+      textSize,
+      transparent,
+      resolveColor
+    } = this.asProps;
+    const {
+      label
+    } = data;
+    const color = data.color ?? this.asProps.color;
+    return {
+      x: xLabelCenter,
+      y: yLabelCenter,
+      angle: labelAngle,
+      ["data-radial-animation"]: `${uid}-label`,
+      ["data-radian-index"]: index,
+      label,
+      color,
+      resolveColor,
+      isHorizontal,
+      textSize,
+      transparent
+    };
+  }
+  getRadianKey(data, index) {
+    return data.key ?? `radian-${index}`;
+  }
+  computeRadianPosition(data, index) {
+    const {
+      centralMargin,
+      labelMargin,
+      angleOffset,
+      activeKey,
+      size,
+      radiansCount,
+      textWidth
+    } = this.asProps;
+    const [width, height] = size;
+    const key = this.getRadianKey(data, index);
+    const isActive = activeKey === key;
+    const baseCapSize = data.capSize ?? this.asProps.capSize;
+    const capSize = baseCapSize * (isActive ? 1 : 0.5);
+    const minDemSize = Math.min(width, height) / 2;
+    const length = Math.max(minDemSize - textWidth - baseCapSize - centralMargin - labelMargin * 2, 10);
+    const angle = baseAngle + angleOffset + index / radiansCount * (Math.PI * 2);
+    const isHorizontal = angle - baseAngle > 1 / 6 * Math.PI && angle - baseAngle < 5 / 6 * Math.PI || angle - baseAngle > 7 / 6 * Math.PI && angle - baseAngle < 11 / 6 * Math.PI;
+    const topAngle = -Math.PI / 2;
+    const labelAngle = (angle - topAngle) % Math.PI + topAngle;
+    const center = [width / 2, height / 2];
+    const [xCenter, yCenter] = center;
+    const start = [xCenter + Math.cos(angle) * centralMargin, yCenter + Math.sin(angle) * centralMargin];
+    const end = [xCenter + Math.cos(angle) * (centralMargin + length), yCenter + Math.sin(angle) * (centralMargin + length)];
+    const [xStart, yStart] = start;
+    const [xEnd, yEnd] = end;
+    const labelCenter = [xCenter + Math.cos(angle) * (centralMargin + length + baseCapSize + textWidth / 2 + labelMargin), yCenter + Math.sin(angle) * (centralMargin + length + baseCapSize + textWidth / 2 + labelMargin)];
+    const [xLabelCenter, yLabelCenter] = labelCenter;
+    return {
+      xStart,
+      yStart,
+      xEnd,
+      yEnd,
+      xLabelCenter,
+      yLabelCenter,
+      labelAngle,
+      isHorizontal,
+      capSize,
+      isActive
+    };
+  }
+  renderRadian(data, index) {
+    var _ref2;
+    const {
+      styles,
+      Children,
+      onRadianClick
+    } = this.asProps;
+    const key = this.getRadianKey(data, index);
+    const SRadian = "g";
+    let children = getOriginChildren(Children);
+    if (typeof children === "function") {
+      const _child = this.asProps.children;
+      const mergedProps = assignProps(children(this.asProps), this.asProps);
+      children = mergedProps.children;
+      mergedProps.children = _child;
     }
-  }]);
-})(Component);
+    this.asProps.dataHintsHandler.describeValueEntity(`${index}.${data.label}`, data.label);
+    const 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(InteractiveArea2, _ref2.cn("InteractiveArea", {})), children);
+  }
+  render() {
+    var _ref3;
+    const {
+      data
+    } = this.asProps;
+    const SRadianList = "g";
+    return _ref3 = sstyled(this.asProps.styles), /* @__PURE__ */ React.createElement(SRadianList, _ref3.cn("SRadianList", {}), data.map((data2, index) => this.renderRadian(data2, index)));
+  }
+}
 _defineProperty(RadialTreeRadian, "displayName", "RadialTreeRadian");
 _defineProperty(RadialTreeRadian, "style", style);
 _defineProperty(RadialTreeRadian, "defaultProps", {
@@ -433,26 +485,42 @@ _defineProperty(RadialTreeRadian, "defaultProps", {
   iconSize: 16,
   textSize: 14
 });
-function InteractiveArea(_ref20) {
+function InteractiveArea({
+  Element: SInteractiveArea,
+  styles
+}) {
   var _ref4;
-  var SInteractiveArea = _ref20.Element, styles = _ref20.styles;
   return _ref4 = sstyled(styles), /* @__PURE__ */ React.createElement(SInteractiveArea, _ref4.cn("SInteractiveArea", {
     "stroke": "transparent",
     "render": "line"
   }));
 }
-function Line(_ref21) {
+function Line({
+  Element: SLine,
+  styles,
+  stroke,
+  resolveColor,
+  transparent
+}) {
   var _ref5;
-  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
   }));
 }
-function Cap(_ref22) {
+function Cap({
+  Element: SCap,
+  styles,
+  x = 0,
+  y = 0,
+  radius,
+  color,
+  resolveColor,
+  transparent,
+  patterns
+}) {
   var _ref7;
-  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(styles), /* @__PURE__ */ React.createElement(SCap, _ref6.cn("SCap", {
@@ -464,11 +532,11 @@ function Cap(_ref22) {
       "transparent": transparent
     }));
   }
-  var patternKey = color || getChartDefaultColorName(0);
-  var _getPatternSymbolSize = getPatternSymbolSize({
+  const patternKey = color || getChartDefaultColorName(0);
+  const [width, height] = getPatternSymbolSize({
     patternKey,
     patterns
-  }), _getPatternSymbolSize2 = _slicedToArray(_getPatternSymbolSize, 2), width = _getPatternSymbolSize2[0], height = _getPatternSymbolSize2[1];
+  });
   return _ref7 = sstyled(styles), /* @__PURE__ */ React.createElement(SCap, _ref7.cn("SCap", {
     "render": PatternSymbol,
     "patternKey": color,
@@ -479,12 +547,20 @@ function Cap(_ref22) {
     "pattern": true
   }));
 }
-function Icon(_ref23) {
+function Icon({
+  Element: SIcon,
+  styles,
+  isActive,
+  tag,
+  x,
+  y,
+  iconSize,
+  transparent
+}) {
   var _ref8;
-  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;
+  const width = iconSize;
+  const height = iconSize;
   return _ref8 = sstyled(styles), /* @__PURE__ */ React.createElement(SIcon, _ref8.cn("SIcon", {
     "x": x,
     "y": y,
@@ -494,16 +570,28 @@ function Icon(_ref23) {
     "transparent": 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(styles);
-  var sLabelStyles = sstyles.cn("SLabel", {
+function Label({
+  Element: SLabel,
+  Children,
+  styles,
+  label,
+  color,
+  resolveColor,
+  isHorizontal,
+  x,
+  y,
+  textSize,
+  angle,
+  transparent
+}) {
+  const lines = String(label).split("\n");
+  const linesCount = lines.length;
+  const SLabelLine = "tspan";
+  const angleDegs = (angle / Math.PI * 180).toFixed(2);
+  const transformOrigin = [x.toFixed(2), y.toFixed(2)];
+  const transform = `rotate(${[angleDegs, ...transformOrigin].join(", ")})`;
+  const sstyles = sstyled(styles);
+  const sLabelStyles = sstyles.cn("SLabel", {
     "color": resolveColor(color),
     "text-cursor": isHorizontal ? "text" : "vertical-text",
     transparent
@@ -518,24 +606,32 @@ function Label(_ref24) {
     x: x.toFixed(2),
     y: y.toFixed(2),
     transform
-  }, lines.map(function(lineText, lineIndex) {
-    return /* @__PURE__ */ React.createElement(SLabelLine, {
-      x,
-      y: y + (lineIndex - (linesCount - 1) / 2) * textSize,
-      key: "#".concat(lineIndex, "-").concat(lineText)
-    }, lineText);
-  }), /* @__PURE__ */ React.createElement(Children, null));
+  }, lines.map((lineText, lineIndex) => /* @__PURE__ */ React.createElement(SLabelLine, {
+    x,
+    y: y + (lineIndex - (linesCount - 1) / 2) * textSize,
+    key: `#${lineIndex}-${lineText}`
+  }, lineText)), /* @__PURE__ */ React.createElement(Children, null));
 }
-var Radian = createElement(RadialTreeRadian, {
+const Radian = createElement(RadialTreeRadian, {
   InteractiveArea,
   Line,
   Cap,
   Icon,
   Label
 });
-function Title(_ref25) {
+function Title({
+  Element: STitle,
+  Children,
+  children,
+  styles,
+  textSize,
+  color,
+  resolveColor,
+  x,
+  y,
+  dataHintsHandler
+}) {
   var _ref9;
-  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);
   }
@@ -550,7 +646,7 @@ function Title(_ref25) {
     "y": y
   }), /* @__PURE__ */ React.createElement(Children, _ref9.cn("Children", {})));
 }
-var RadialTree = createElement(RadialTreeBase, {
+const RadialTree = createElement(RadialTreeBase, {
   Title,
   Radian
 });