@onesy/ui-react 1.0.172 → 1.0.174

package/Chart/Chart.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
@@ -19,7 +18,8 @@ var _Append = _interopRequireDefault(require("../Append"));
 var _Grow = _interopRequireDefault(require("../Grow"));
 var _useMediaQuery = _interopRequireDefault(require("../useMediaQuery"));
 var _utils2 = require("../utils");
-const _excluded = ["tonal", "color", "title", "subtitle", "values", "pre", "elements", "names", "nameX", "nameY", "tooltip", "tooltipIndividually", "tooltipCloseOnMouseLeave", "elementTooltip", "guidelines", "guidelinesAppend", "guidelinesDisplayInactive", "additionalLines", "legend", "legendManageVisibility", "legendPosition", "animate", "animateTimeout", "labels", "labelsX", "labelsY", "labelDecimalPlaces", "labelsAutoNumber", "labelsYAutoNumber", "labelsXAutoNumber", "marks", "marksX", "marksY", "marksAutoNumber", "marksYAutoNumber", "marksXAutoNumber", "grid", "gridX", "gridY", "gridAutoNumber", "gridYAutoNumber", "gridXAutoNumber", "points", "pointsVisibility", "borders", "borderStart", "borderLeft", "borderEnd", "borderRight", "borderTop", "borderBottom", "minX", "maxX", "minY", "maxY", "minMaxPadding", "minPadding", "maxPadding", "minPaddingX", "minPaddingY", "maxPaddingX", "maxPaddingY", "noMain", "tooltipRender", "tooltipGroupRender", "labelRender", "labelResolve", "onUpdateRects", "Component", "SvgProps", "TypeProps", "TitleProps", "SubtitleProps", "PointsProps", "PointProps", "HeaderProps", "AppendProps", "AdditionalLineProps", "AdditionalLinesProps", "LegendProps", "LegendItemProps", "GuidelineProps", "WrapperProps", "className", "children"],
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["ref", "tonal", "color", "title", "subtitle", "values", "pre", "elements", "names", "nameX", "nameY", "tooltip", "tooltipIndividually", "tooltipCloseOnMouseLeave", "elementTooltip", "guidelines", "guidelinesAppend", "guidelinesDisplayInactive", "additionalLines", "legend", "legendManageVisibility", "legendPosition", "animate", "animateTimeout", "labels", "labelsX", "labelsY", "labelDecimalPlaces", "labelsAutoNumber", "labelsYAutoNumber", "labelsXAutoNumber", "marks", "marksX", "marksY", "marksAutoNumber", "marksYAutoNumber", "marksXAutoNumber", "grid", "gridX", "gridY", "gridAutoNumber", "gridYAutoNumber", "gridXAutoNumber", "points", "pointsVisibility", "borders", "borderStart", "borderLeft", "borderEnd", "borderRight", "borderTop", "borderBottom", "minX", "maxX", "minY", "maxY", "minMaxPadding", "minPadding", "maxPadding", "minPaddingX", "minPaddingY", "maxPaddingX", "maxPaddingY", "noMain", "tooltipRender", "tooltipGroupRender", "labelRender", "labelResolve", "onUpdateRects", "Component", "SvgProps", "TypeProps", "TitleProps", "SubtitleProps", "PointsProps", "PointProps", "HeaderProps", "AppendProps", "AdditionalLineProps", "AdditionalLinesProps", "LegendProps", "LegendItemProps", "GuidelineProps", "WrapperProps", "className", "children"],
   _excluded2 = ["item", "className"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
@@ -277,7 +277,7 @@ const useStyle = (0, _styleReact.style)(theme => ({
 }), {
   name: 'onesy-Chart'
 });
-const Chart = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+const Chart = props_ => {
   var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _theme$elements5, _theme$elements6, _append$values, _append$values2, _append$values3, _append$values4;
   const theme = (0, _styleReact.useOnesyTheme)();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme === null || theme === void 0 || (_theme$ui = theme.ui) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.elements) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.all) === null || _theme$ui === void 0 || (_theme$ui = _theme$ui.props) === null || _theme$ui === void 0 ? void 0 : _theme$ui.default), theme === null || theme === void 0 || (_theme$ui2 = theme.ui) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.elements) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.onesyChart) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
@@ -288,6 +288,7 @@ const Chart = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
   const Append = (theme === null || theme === void 0 || (_theme$elements5 = theme.elements) === null || _theme$elements5 === void 0 ? void 0 : _theme$elements5.Append) || _Append.default;
   const Grow = (theme === null || theme === void 0 || (_theme$elements6 = theme.elements) === null || _theme$elements6 === void 0 ? void 0 : _theme$elements6.Grow) || _Grow.default;
   const {
+      ref,
       tonal = true,
       color = 'primary',
       title,
@@ -574,73 +575,82 @@ const Chart = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       var _groups$a_1$, _groups$b_1$;
       return ((_groups$a_1$ = groups[a_1][0]) === null || _groups$a_1$ === void 0 || (_groups$a_1$ = _groups$a_1$.normalized) === null || _groups$a_1$ === void 0 ? void 0 : _groups$a_1$[1]) - ((_groups$b_1$ = groups[b_1][0]) === null || _groups$b_1$ === void 0 || (_groups$b_1$ = _groups$b_1$.normalized) === null || _groups$b_1$ === void 0 ? void 0 : _groups$b_1$[1]);
     });
-    const element = (0, _utils.is)('function', tooltipGroupRender) ? tooltipGroupRender(groups, groupsSorted) : /*#__PURE__*/_react.default.createElement(Line, {
+    const element = (0, _utils.is)('function', tooltipGroupRender) ? tooltipGroupRender(groups, groupsSorted) : /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
       tonal: tonal,
       color: color,
       elevation: 1,
       gap: 0.25,
       direction: "column",
       Component: Surface,
-      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-append'], classes.append])
-    }, /*#__PURE__*/_react.default.createElement(Line, {
-      gap: 1,
-      direction: "column",
-      style: {
-        width: '100%'
-      }
-    }, /*#__PURE__*/_react.default.createElement(Line, {
-      gap: 1,
-      direction: "row",
-      align: "center"
-    }, /*#__PURE__*/_react.default.createElement(Type, {
-      version: "b3",
-      style: {
-        fontWeight: 600
-      }
-    }, (names === null || names === void 0 ? void 0 : names.y) || 'y'), /*#__PURE__*/_react.default.createElement(Type, {
-      version: "b3",
-      style: {
-        fontWeight: 600
-      }
-    }, (names === null || names === void 0 ? void 0 : names.x) || 'x')), /*#__PURE__*/_react.default.createElement(Line, {
-      gap: 1,
-      direction: "column"
-    }, groupsSorted.map((group_0, index) => {
-      var _groups$group_0$;
-      return /*#__PURE__*/_react.default.createElement(Line, {
-        key: index,
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-append'], classes.append]),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
         gap: 1,
         direction: "column",
         style: {
           width: '100%'
-        }
-      }, /*#__PURE__*/_react.default.createElement("span", {
-        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-append-icon'], classes.append_icon]),
-        style: {
-          background: !refs.theme.current.palette.color[group_0] ? group_0 : refs.theme.current.palette.color[group_0][((_groups$group_0$ = groups[group_0][0]) === null || _groups$group_0$ === void 0 || (_groups$group_0$ = _groups$group_0$.item) === null || _groups$group_0$ === void 0 ? void 0 : _groups$group_0$.tone) || 'main']
-        }
-      }), /*#__PURE__*/_react.default.createElement(Line, {
-        gap: 0,
-        direction: "column",
-        style: {
-          width: '100%'
-        }
-      }, groups[group_0].map((item_4, index_) => {
-        var _item_4$values, _item_4$values2, _item_4$values3, _item_4$values4;
-        return /*#__PURE__*/_react.default.createElement(Line, {
-          key: index_,
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
           gap: 1,
           direction: "row",
-          style: {
-            width: '100%'
-          }
-        }, /*#__PURE__*/_react.default.createElement(Type, {
-          version: "b3"
-        }, (0, _utils.is)('function', labelResolve) ? labelResolve(item_4 === null || item_4 === void 0 || (_item_4$values = item_4.values) === null || _item_4$values === void 0 ? void 0 : _item_4$values[1], 'y', item_4, 'group') : item_4 === null || item_4 === void 0 || (_item_4$values2 = item_4.values) === null || _item_4$values2 === void 0 ? void 0 : _item_4$values2[1]), /*#__PURE__*/_react.default.createElement(Type, {
-          version: "b3"
-        }, (0, _utils.is)('function', labelResolve) ? labelResolve(item_4 === null || item_4 === void 0 || (_item_4$values3 = item_4.values) === null || _item_4$values3 === void 0 ? void 0 : _item_4$values3[0], 'x', item_4, 'group') : item_4 === null || item_4 === void 0 || (_item_4$values4 = item_4.values) === null || _item_4$values4 === void 0 ? void 0 : _item_4$values4[0]));
-      })));
-    }))));
+          align: "center",
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
+            version: "b3",
+            style: {
+              fontWeight: 600
+            },
+            children: (names === null || names === void 0 ? void 0 : names.y) || 'y'
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
+            version: "b3",
+            style: {
+              fontWeight: 600
+            },
+            children: (names === null || names === void 0 ? void 0 : names.x) || 'x'
+          })]
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
+          gap: 1,
+          direction: "column",
+          children: groupsSorted.map((group_0, index) => {
+            var _groups$group_0$;
+            return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
+              gap: 1,
+              direction: "column",
+              style: {
+                width: '100%'
+              },
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-append-icon'], classes.append_icon]),
+                style: {
+                  background: !refs.theme.current.palette.color[group_0] ? group_0 : refs.theme.current.palette.color[group_0][((_groups$group_0$ = groups[group_0][0]) === null || _groups$group_0$ === void 0 || (_groups$group_0$ = _groups$group_0$.item) === null || _groups$group_0$ === void 0 ? void 0 : _groups$group_0$.tone) || 'main']
+                }
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
+                gap: 0,
+                direction: "column",
+                style: {
+                  width: '100%'
+                },
+                children: groups[group_0].map((item_4, index_) => {
+                  var _item_4$values, _item_4$values2, _item_4$values3, _item_4$values4;
+                  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
+                    gap: 1,
+                    direction: "row",
+                    style: {
+                      width: '100%'
+                    },
+                    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
+                      version: "b3",
+                      children: (0, _utils.is)('function', labelResolve) ? labelResolve(item_4 === null || item_4 === void 0 || (_item_4$values = item_4.values) === null || _item_4$values === void 0 ? void 0 : _item_4$values[1], 'y', item_4, 'group') : item_4 === null || item_4 === void 0 || (_item_4$values2 = item_4.values) === null || _item_4$values2 === void 0 ? void 0 : _item_4$values2[1]
+                    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
+                      version: "b3",
+                      children: (0, _utils.is)('function', labelResolve) ? labelResolve(item_4 === null || item_4 === void 0 || (_item_4$values3 = item_4.values) === null || _item_4$values3 === void 0 ? void 0 : _item_4$values3[0], 'x', item_4, 'group') : item_4 === null || item_4 === void 0 || (_item_4$values4 = item_4.values) === null || _item_4$values4 === void 0 ? void 0 : _item_4$values4[0]
+                    })]
+                  }, index_);
+                })
+              })]
+            }, index);
+          })
+        })]
+      })
+    });
     const rectSvg = refs.svg.current.getBoundingClientRect();
     const width = 8;
     const height = 8;
@@ -778,21 +788,24 @@ const Chart = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       tone = 'main',
       name = 'No name'
     } = item_6;
-    return /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, _objectSpread(_objectSpread(_objectSpread({
       gap: 1,
       direction: "row",
       align: "center"
-    }, LegendItemProps, {
+    }, LegendItemProps), {}, {
       className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-legend-item'], className_, LegendItemProps === null || LegendItemProps === void 0 ? void 0 : LegendItemProps.className, classes.legend_item])
-    }, other_), /*#__PURE__*/_react.default.createElement("span", {
-      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-legend-icon'], classes.legend_icon]),
-      style: {
-        color: !theme.palette.color[color__0] ? color__0 : theme.palette.color[color__0][tone],
-        background: !theme.palette.color[color__0] ? color__0 : theme.palette.color[color__0][tone]
-      }
-    }), /*#__PURE__*/_react.default.createElement(Type, {
-      version: "b2"
-    }, name));
+    }, other_), {}, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-legend-icon'], classes.legend_icon]),
+        style: {
+          color: !theme.palette.color[color__0] ? color__0 : theme.palette.color[color__0][tone],
+          background: !theme.palette.color[color__0] ? color__0 : theme.palette.color[color__0][tone]
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
+        version: "b2",
+        children: name
+      })]
+    }));
   };
   const make = (valueNew = refs.values.current) => {
     // Make values into x, y, coordinates
@@ -887,8 +900,7 @@ const Chart = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
         const values__2 = itemArrayNested ? (0, _utils.copy)(item_19.values)
         // Sort for x from smallest to largest
         .sort((a_2, b_2) => a_2[0] - b_2[0]).map(itemValues) : [itemValues(item_19.values)];
-        return values__2.map((item__1, index_1) => /*#__PURE__*/_react.default.createElement(Path, (0, _extends2.default)({
-          key: index_1,
+        return values__2.map((item__1, index_1) => /*#__PURE__*/(0, _jsxRuntime.jsx)(Path, _objectSpread(_objectSpread(_objectSpread({
           Component: "circle",
           r: 4,
           cx: item__1.normalized[0],
@@ -904,13 +916,13 @@ const Chart = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
             });
           },
           onMouseLeave: onPointMouseLeave
-        } : undefined, PointProps, {
+        } : undefined), PointProps), {}, {
           className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-point'], PointProps === null || PointProps === void 0 ? void 0 : PointProps.className, classes.point, classes[`point_visibility_${pointsVisibility}`], refs.guidelinesAppend.current && refs.guidelinesPosition.current.x === item__1.normalized[0] && classes.point_active]),
           style: _objectSpread(_objectSpread({}, refs.visible.current[name_0] === false ? {
             opacity: 0,
             pointerEvents: 'none'
           } : undefined), PointProps === null || PointProps === void 0 ? void 0 : PointProps.style)
-        })));
+        }), index_1));
       });
       refs.allValues.current.sort((a_3, b_3) => (a_3 === null || a_3 === void 0 ? void 0 : a_3.normalized[0]) - (b_3 === null || b_3 === void 0 ? void 0 : b_3.normalized[0]));
 
@@ -931,15 +943,14 @@ const Chart = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
         values__3.y1 = (0, _utils.valueFromPercentageWithinRange)(values__3.y1, 0, height_0);
         values__3.x2 = (0, _utils.valueFromPercentageWithinRange)(values__3.x2, 0, width_0);
         values__3.y2 = (0, _utils.valueFromPercentageWithinRange)(values__3.y2, 0, height_0);
-        return /*#__PURE__*/_react.default.createElement(Path, (0, _extends2.default)({
-          key: index_2,
+        return /*#__PURE__*/(0, _jsxRuntime.jsx)(Path, _objectSpread(_objectSpread({
           d: `M ${values__3.x1} ${height_0 - values__3.y1} L ${values__3.x2} ${height_0 - values__3.y2}`,
           fill: "none",
           stroke: !theme.palette.color[color__2] ? color__2 : theme.palette.color[color__2][tone_1]
-        }, AdditionalLineProps, {
+        }, AdditionalLineProps), {}, {
           className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-additional-lines'], AdditionalLineProps === null || AdditionalLineProps === void 0 ? void 0 : AdditionalLineProps.className, classes.additionalLines]),
           style: _objectSpread(_objectSpread({}, style), AdditionalLineProps === null || AdditionalLineProps === void 0 ? void 0 : AdditionalLineProps.style)
-        }));
+        }), index_2);
       });
 
       // Labels
@@ -967,7 +978,7 @@ const Chart = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
         if (!map[name_1]) {
           legend_.push({
             item: item_21,
-            element: /*#__PURE__*/_react.default.createElement(LegendItem, {
+            element: /*#__PURE__*/(0, _jsxRuntime.jsx)(LegendItem, {
               item: item_21
             })
           });
@@ -979,7 +990,7 @@ const Chart = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
     // Legend
     if ((0, _utils.is)('array', legend_)) setLegend(legend_);
   };
-  return /*#__PURE__*/_react.default.createElement(Surface, (0, _extends2.default)({
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Surface, _objectSpread(_objectSpread({
     ref: item_22 => {
       if (ref) {
         if ((0, _utils.is)('function', ref)) ref(item_22);else ref.current = item_22;
@@ -996,325 +1007,359 @@ const Chart = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       Component
     },
     className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-root'], className, classes.root])
-  }, other), (title || subtitle) && /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
-    gap: 0.5,
-    align: "center",
-    justify: "center"
-  }, HeaderProps, {
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-header'], HeaderProps === null || HeaderProps === void 0 ? void 0 : HeaderProps.className, classes.header, (labels === null || labels === void 0 ? void 0 : labels.y) && labelsY && classes.legend_offset_labels_y, (names === null || names === void 0 ? void 0 : names.y) && nameY && classes.legend_offset_names_y])
-  }), (0, _utils.is)('simple', title) ? /*#__PURE__*/_react.default.createElement(Type, (0, _extends2.default)({
-    version: "t2"
-  }, TypeProps, TitleProps, {
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-title'], TypeProps === null || TypeProps === void 0 ? void 0 : TypeProps.className, TitleProps === null || TitleProps === void 0 ? void 0 : TitleProps.className, classes.title])
-  }), title) : title, (0, _utils.is)('simple', subtitle) ? /*#__PURE__*/_react.default.createElement(Type, (0, _extends2.default)({
-    version: "b3"
-  }, TypeProps, SubtitleProps, {
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-title'], TypeProps === null || TypeProps === void 0 ? void 0 : TypeProps.className, SubtitleProps === null || SubtitleProps === void 0 ? void 0 : SubtitleProps.className, classes.subtitle])
-  }), subtitle) : subtitle), legend__ && legendPosition === 'top' && legend && /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
-    gap: 2,
-    direction: "row",
-    align: "center",
-    justify: "center",
-    wrap: "wrap"
-  }, LegendProps, {
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-legend', `onesy-Chart-legend-position-${legendPosition}`], LegendProps === null || LegendProps === void 0 ? void 0 : LegendProps.className, classes.legend, classes[`legend_position_${legendPosition}`], (labels === null || labels === void 0 ? void 0 : labels.y) && labelsY && classes.legend_offset_labels_y, (names === null || names === void 0 ? void 0 : names.y) && nameY && classes.legend_offset_names_y])
-  }), legend.map(({
-    item: item_23,
-    element: element_0
-  }) => {
-    var _element_0$props;
-    return /*#__PURE__*/_react.default.cloneElement(element_0, {
-      onClick: () => onLegendClick(item_23.name),
-      className: (0, _styleReact.classNames)([element_0 === null || element_0 === void 0 || (_element_0$props = element_0.props) === null || _element_0$props === void 0 ? void 0 : _element_0$props.className, legendManageVisibility && classes.legend_item_manage_visibility, refs.visible.current[item_23.name] === false && classes.legend_item_hidden])
-    });
-  })), /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
-    ref: refs.wrapper
-  }, WrapperProps, {
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-wrapper'], WrapperProps === null || WrapperProps === void 0 ? void 0 : WrapperProps.className, classes.wrapper, (labels === null || labels === void 0 ? void 0 : labels.x) && (labels === null || labels === void 0 ? void 0 : labels.y) && labelsX && labelsY && classes.wrapper_labels, !(labels !== null && labels !== void 0 && labels.x && labels !== null && labels !== void 0 && labels.y && labelsX && labelsY) && (labels === null || labels === void 0 ? void 0 : labels.x) && labelsX && classes.wrapper_label_x, !(labels !== null && labels !== void 0 && labels.x && labels !== null && labels !== void 0 && labels.y && labelsX && labelsY) && (labels === null || labels === void 0 ? void 0 : labels.y) && labelsY && classes.wrapper_label_y, (names === null || names === void 0 ? void 0 : names.x) && (names === null || names === void 0 ? void 0 : names.y) && nameX && nameY && classes.wrapper_names, !(names !== null && names !== void 0 && names.x && names !== null && names !== void 0 && names.y && nameX && nameY) && (names === null || names === void 0 ? void 0 : names.x) && nameX && classes.wrapper_name_x, !(names !== null && names !== void 0 && names.x && names !== null && names !== void 0 && names.y && nameX && nameY) && (names === null || names === void 0 ? void 0 : names.y) && nameY && classes.wrapper_name_y])
-  }), /*#__PURE__*/_react.default.createElement(Surface, {
-    tonal: tonal,
-    color: color
-  }, ({
-    color: color__3,
-    backgroundColor,
-    palette
-  }) => {
-    var _rects$wrapper, _rects$wrapper2, _rects$wrapper3, _rects$wrapper4;
-    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, !!grid__ && gridX && (grid === null || grid === void 0 ? void 0 : grid.x) && /*#__PURE__*/_react.default.createElement(Line, {
-      gap: 0,
+  }, other), {}, {
+    children: [(title || subtitle) && /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, _objectSpread(_objectSpread({
+      gap: 0.5,
+      align: "center",
+      justify: "center"
+    }, HeaderProps), {}, {
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-header'], HeaderProps === null || HeaderProps === void 0 ? void 0 : HeaderProps.className, classes.header, (labels === null || labels === void 0 ? void 0 : labels.y) && labelsY && classes.legend_offset_labels_y, (names === null || names === void 0 ? void 0 : names.y) && nameY && classes.legend_offset_names_y]),
+      children: [(0, _utils.is)('simple', title) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, _objectSpread(_objectSpread(_objectSpread({
+        version: "t2"
+      }, TypeProps), TitleProps), {}, {
+        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-title'], TypeProps === null || TypeProps === void 0 ? void 0 : TypeProps.className, TitleProps === null || TitleProps === void 0 ? void 0 : TitleProps.className, classes.title]),
+        children: title
+      })) : title, (0, _utils.is)('simple', subtitle) ? /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, _objectSpread(_objectSpread(_objectSpread({
+        version: "b3"
+      }, TypeProps), SubtitleProps), {}, {
+        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-title'], TypeProps === null || TypeProps === void 0 ? void 0 : TypeProps.className, SubtitleProps === null || SubtitleProps === void 0 ? void 0 : SubtitleProps.className, classes.subtitle]),
+        children: subtitle
+      })) : subtitle]
+    })), legend__ && legendPosition === 'top' && legend && /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, _objectSpread(_objectSpread({
+      gap: 2,
       direction: "row",
-      align: "flex-start",
-      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-grids', 'onesy-Chart-grids-x'], classes.grids, classes.grids_x])
-    }, grid.x.map((item_24, index_3) => /*#__PURE__*/_react.default.createElement("div", {
-      key: index_3,
-      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-grid', 'onesy-Chart-grid-x'], classes.grid, classes.grid_x]),
-      style: {
-        left: `${item_24.percentage}%`
-      }
-    }))), !!grid__ && gridY && (grid === null || grid === void 0 ? void 0 : grid.y) && /*#__PURE__*/_react.default.createElement(Line, {
-      gap: 0,
-      direction: "column",
-      align: "flex-end",
+      align: "center",
       justify: "center",
-      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-grids', 'onesy-Chart-grids-y'], classes.grids, classes.grids_y])
-    }, grid.y.map((item_25, index_4) => /*#__PURE__*/_react.default.createElement("div", {
-      key: index_4,
-      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-grid', 'onesy-Chart-grid-y'], classes.grid, classes.grid_y]),
-      style: {
-        bottom: `${item_25.percentage}%`
-      }
-    }))), /*#__PURE__*/_react.default.createElement("svg", (0, _extends2.default)({
-      ref: refs.svg,
-      xmlns: "http://www.w3.org/2000/svg",
-      viewBox: `0 0 ${(rects === null || rects === void 0 || (_rects$wrapper = rects.wrapper) === null || _rects$wrapper === void 0 ? void 0 : _rects$wrapper.width) || 0} ${(rects === null || rects === void 0 || (_rects$wrapper2 = rects.wrapper) === null || _rects$wrapper2 === void 0 ? void 0 : _rects$wrapper2.height) || 0}`
-    }, guidelines ? {
-      onMouseEnter: onWrapperMouseEnter,
-      onTouchStart: onWrapperMouseEnter,
-      onMouseLeave: onWrapperMouseLeave
-    } : undefined, SvgProps, {
-      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-svg'], SvgProps === null || SvgProps === void 0 ? void 0 : SvgProps.className, classes.svg])
-    }), /*#__PURE__*/_react.default.createElement("defs", {
-      ref: refs.defs
-    }, defs && defs.map((item_26, index_5) => (/*#__PURE__*/_react.default.cloneElement(item_26, {
-      key: index_5
-    })))), pre, elements && elements.map(({
-      item: item_27,
-      element: element_1
-    }, index_6) => {
-      var _props;
-      const isVisible = visible[item_27 === null || item_27 === void 0 ? void 0 : item_27.name] === undefined || !!visible[item_27 === null || item_27 === void 0 ? void 0 : item_27.name];
-      return /*#__PURE__*/_react.default.cloneElement(element_1, _objectSpread(_objectSpread({
-        key: index_6
-      }, elementTooltip ? {
-        onMouseEnter: event_2 => {
-          const rect__1 = event_2.target.getBoundingClientRect();
-          onPointMouseEnter(_objectSpread(_objectSpread({}, item_27), {}, {
-            rect: rect__1
-          }));
-        },
-        onMouseLeave: onPointMouseLeave
-      } : undefined), {}, {
-        style: _objectSpread(_objectSpread({}, element_1 === null || element_1 === void 0 || (_props = element_1.props) === null || _props === void 0 ? void 0 : _props.style), !isVisible ? {
-          opacity: '0',
-          pointerEvents: 'none'
-        } : undefined)
-      }));
-    }), children && _react.default.Children.toArray(children).map((element_2, index_7) => {
-      var _element_2$props, _element_2$props2, _props2;
-      const isVisible_0 = visible[(_element_2$props = element_2.props) === null || _element_2$props === void 0 ? void 0 : _element_2$props.name] === undefined || !!visible[(_element_2$props2 = element_2.props) === null || _element_2$props2 === void 0 ? void 0 : _element_2$props2.name];
-      return /*#__PURE__*/_react.default.cloneElement(element_2, _objectSpread(_objectSpread({
-        key: index_7,
-        refs: {
-          wrapper: refs.wrapper.current,
-          defs: refs.defs.current
-        },
-        rects,
-        animate: element_2.props.animate !== undefined ? element_2.props.animate : animate,
-        animateTimeout: element_2.props.animateTimeout !== undefined ? element_2.props.animateTimeout : animateTimeout,
-        updateDefs: setDefs,
-        updateLegend: setLegend
-      }, elementTooltip ? {
-        onMouseEnter: event_3 => {
-          const rect__2 = event_3.target.getBoundingClientRect();
-          onPointMouseEnter(_objectSpread(_objectSpread({}, element_2.props), {}, {
-            rect: rect__2
-          }));
-        },
-        onMouseLeave: onPointMouseLeave
-      } : undefined), {}, {
-        minMax: element_2.props.minMax !== undefined ? element_2.props.minMax : minMax,
-        minX: element_2.props.minX !== undefined ? element_2.props.minX : minX,
-        maxX: element_2.props.maxX !== undefined ? element_2.props.maxX : maxX,
-        minY: element_2.props.minY !== undefined ? element_2.props.minY : minY,
-        maxY: element_2.props.maxY !== undefined ? element_2.props.maxY : maxY,
-        minMaxPadding: element_2.props.minMaxPadding !== undefined ? element_2.props.minMaxPadding : minMaxPadding,
-        minPadding: element_2.props.minPadding !== undefined ? element_2.props.minPadding : minPadding,
-        maxPadding: element_2.props.maxPadding !== undefined ? element_2.props.maxPadding : maxPadding,
-        minPaddingX: element_2.props.minPaddingX !== undefined ? element_2.props.minPaddingX : minPaddingX,
-        minPaddingY: element_2.props.minPaddingY !== undefined ? element_2.props.minPaddingY : minPaddingY,
-        maxPaddingX: element_2.props.maxPaddingX !== undefined ? element_2.props.maxPaddingX : maxPaddingX,
-        maxPaddingY: element_2.props.maxPaddingY !== undefined ? element_2.props.maxPaddingY : maxPaddingY,
-        style: _objectSpread(_objectSpread({}, element_2 === null || element_2 === void 0 || (_props2 = element_2.props) === null || _props2 === void 0 ? void 0 : _props2.style), !isVisible_0 ? {
-          opacity: '0',
-          pointerEvents: 'none'
-        } : undefined)
-      }));
-    }), additionalLines && /*#__PURE__*/_react.default.createElement("g", (0, _extends2.default)({}, AdditionalLinesProps, {
-      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-additional-lines'], AdditionalLinesProps === null || AdditionalLinesProps === void 0 ? void 0 : AdditionalLinesProps.className, classes.additionalLines])
-    }), additionalLines), guidelines && guidelinesIn && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, ['both', 'vertical'].includes(guidelines) && /*#__PURE__*/_react.default.createElement("path", (0, _extends2.default)({
-      d: `M ${(guidelinesPosition === null || guidelinesPosition === void 0 ? void 0 : guidelinesPosition.x) || 0} 0 ${(guidelinesPosition === null || guidelinesPosition === void 0 ? void 0 : guidelinesPosition.x) || 0} ${(rects === null || rects === void 0 || (_rects$wrapper3 = rects.wrapper) === null || _rects$wrapper3 === void 0 ? void 0 : _rects$wrapper3.height) || 0}`
-    }, GuidelineProps, {
-      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-guidelines', 'onesy-Chart-guidelines-vertical'], GuidelineProps === null || GuidelineProps === void 0 ? void 0 : GuidelineProps.className, classes.guidelines, classes.guidelines_vertical])
-    })), ['both', 'horizontal'].includes(guidelines) && /*#__PURE__*/_react.default.createElement("path", (0, _extends2.default)({
-      d: `M 0 ${(guidelinesPosition === null || guidelinesPosition === void 0 ? void 0 : guidelinesPosition.y) || 0} ${(rects === null || rects === void 0 || (_rects$wrapper4 = rects.wrapper) === null || _rects$wrapper4 === void 0 ? void 0 : _rects$wrapper4.width) || 0} ${(guidelinesPosition === null || guidelinesPosition === void 0 ? void 0 : guidelinesPosition.y) || 0}`
-    }, GuidelineProps, {
-      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-guidelines', 'onesy-Chart-guidelines-horizontal'], GuidelineProps === null || GuidelineProps === void 0 ? void 0 : GuidelineProps.className, classes.guidelines, classes.guidelines_horizontal])
-    }))), points__ && points && /*#__PURE__*/_react.default.createElement("g", (0, _extends2.default)({}, PointsProps, {
-      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-points'], PointsProps === null || PointsProps === void 0 ? void 0 : PointsProps.className, classes.points])
-    }), points.map((item_28, index_8) => (/*#__PURE__*/_react.default.cloneElement(item_28, {
-      key: index_8
-    }))))), borders && /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, borderTop && /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-border', 'onesy-Chart-border-x', 'onesy-Chart-border-top'], classes.border, classes.borderX, classes.borderTop])
-    }), borderBottom && /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-border', 'onesy-Chart-border-x', 'onesy-Chart-border-bottom'], classes.border, classes.borderX, classes.borderBottom])
-    }), borderStart && /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-border', 'onesy-Chart-border-y', 'onesy-Chart-border-start'], classes.border, classes.borderY, classes.boderStart])
-    }), borderLeft && /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-border', 'onesy-Chart-border-y', 'onesy-Chart-border-left'], classes.border, classes.borderY, classes.borderLeft])
-    }), borderEnd && /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-border', 'onesy-Chart-border-y', 'onesy-Chart-border-end'], classes.border, classes.borderY, classes.borderEnd])
-    }), borderRight && /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-border', 'onesy-Chart-border-y', 'onesy-Chart-border-right'], classes.border, classes.borderY, classes.borderRight])
-    })), !!labels__ && labelsX && (labels === null || labels === void 0 ? void 0 : labels.x) && /*#__PURE__*/_react.default.createElement(Line, {
-      gap: 0,
-      direction: "row",
-      align: "flex-start",
-      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-labels', 'onesy-Chart-labels-x'], classes.labels, classes.labels_x])
-    }, labels.x.map((item_29, index_9) => {
-      const itemProps = {
-        key: index_9,
-        version: 'b3',
-        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-label', 'onesy-Chart-label-x'], classes.label, classes.label_x]),
-        style: {
-          left: `${item_29.percentage}%`
-        }
-      };
-      return (0, _utils.is)('function', labelRender) ? labelRender(_objectSpread(_objectSpread({}, item_29), {}, {
-        axis: 'x',
-        props: itemProps
-      })) : /*#__PURE__*/_react.default.createElement(Type, {
-        key: index_9,
-        version: "b3",
-        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-label', 'onesy-Chart-label-x'], classes.label, classes.label_x]),
-        style: {
-          left: `${item_29.percentage}%`
+      wrap: "wrap"
+    }, LegendProps), {}, {
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-legend', `onesy-Chart-legend-position-${legendPosition}`], LegendProps === null || LegendProps === void 0 ? void 0 : LegendProps.className, classes.legend, classes[`legend_position_${legendPosition}`], (labels === null || labels === void 0 ? void 0 : labels.y) && labelsY && classes.legend_offset_labels_y, (names === null || names === void 0 ? void 0 : names.y) && nameY && classes.legend_offset_names_y]),
+      children: legend.map(({
+        item: item_23,
+        element: element_0
+      }) => {
+        var _element_0$props;
+        return /*#__PURE__*/_react.default.cloneElement(element_0, {
+          onClick: () => onLegendClick(item_23.name),
+          className: (0, _styleReact.classNames)([element_0 === null || element_0 === void 0 || (_element_0$props = element_0.props) === null || _element_0$props === void 0 ? void 0 : _element_0$props.className, legendManageVisibility && classes.legend_item_manage_visibility, refs.visible.current[item_23.name] === false && classes.legend_item_hidden])
+        });
+      })
+    })), /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, _objectSpread(_objectSpread({
+      ref: refs.wrapper
+    }, WrapperProps), {}, {
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-wrapper'], WrapperProps === null || WrapperProps === void 0 ? void 0 : WrapperProps.className, classes.wrapper, (labels === null || labels === void 0 ? void 0 : labels.x) && (labels === null || labels === void 0 ? void 0 : labels.y) && labelsX && labelsY && classes.wrapper_labels, !(labels !== null && labels !== void 0 && labels.x && labels !== null && labels !== void 0 && labels.y && labelsX && labelsY) && (labels === null || labels === void 0 ? void 0 : labels.x) && labelsX && classes.wrapper_label_x, !(labels !== null && labels !== void 0 && labels.x && labels !== null && labels !== void 0 && labels.y && labelsX && labelsY) && (labels === null || labels === void 0 ? void 0 : labels.y) && labelsY && classes.wrapper_label_y, (names === null || names === void 0 ? void 0 : names.x) && (names === null || names === void 0 ? void 0 : names.y) && nameX && nameY && classes.wrapper_names, !(names !== null && names !== void 0 && names.x && names !== null && names !== void 0 && names.y && nameX && nameY) && (names === null || names === void 0 ? void 0 : names.x) && nameX && classes.wrapper_name_x, !(names !== null && names !== void 0 && names.x && names !== null && names !== void 0 && names.y && nameX && nameY) && (names === null || names === void 0 ? void 0 : names.y) && nameY && classes.wrapper_name_y]),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Surface, {
+        tonal: tonal,
+        color: color,
+        children: ({
+          color: color__3,
+          backgroundColor,
+          palette
+        }) => {
+          var _rects$wrapper, _rects$wrapper2, _rects$wrapper3, _rects$wrapper4;
+          return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+            children: [!!grid__ && gridX && (grid === null || grid === void 0 ? void 0 : grid.x) && /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
+              gap: 0,
+              direction: "row",
+              align: "flex-start",
+              className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-grids', 'onesy-Chart-grids-x'], classes.grids, classes.grids_x]),
+              children: grid.x.map((item_24, index_3) => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-grid', 'onesy-Chart-grid-x'], classes.grid, classes.grid_x]),
+                style: {
+                  left: `${item_24.percentage}%`
+                }
+              }, index_3))
+            }), !!grid__ && gridY && (grid === null || grid === void 0 ? void 0 : grid.y) && /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
+              gap: 0,
+              direction: "column",
+              align: "flex-end",
+              justify: "center",
+              className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-grids', 'onesy-Chart-grids-y'], classes.grids, classes.grids_y]),
+              children: grid.y.map((item_25, index_4) => /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-grid', 'onesy-Chart-grid-y'], classes.grid, classes.grid_y]),
+                style: {
+                  bottom: `${item_25.percentage}%`
+                }
+              }, index_4))
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("svg", _objectSpread(_objectSpread(_objectSpread({
+              ref: refs.svg,
+              xmlns: "http://www.w3.org/2000/svg",
+              viewBox: `0 0 ${(rects === null || rects === void 0 || (_rects$wrapper = rects.wrapper) === null || _rects$wrapper === void 0 ? void 0 : _rects$wrapper.width) || 0} ${(rects === null || rects === void 0 || (_rects$wrapper2 = rects.wrapper) === null || _rects$wrapper2 === void 0 ? void 0 : _rects$wrapper2.height) || 0}`
+            }, guidelines ? {
+              onMouseEnter: onWrapperMouseEnter,
+              onTouchStart: onWrapperMouseEnter,
+              onMouseLeave: onWrapperMouseLeave
+            } : undefined), SvgProps), {}, {
+              className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-svg'], SvgProps === null || SvgProps === void 0 ? void 0 : SvgProps.className, classes.svg]),
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("defs", {
+                ref: refs.defs,
+                children: defs && defs.map((item_26, index_5) => (/*#__PURE__*/_react.default.cloneElement(item_26, {
+                  key: index_5
+                })))
+              }), pre, elements && elements.map(({
+                item: item_27,
+                element: element_1
+              }, index_6) => {
+                var _props;
+                const isVisible = visible[item_27 === null || item_27 === void 0 ? void 0 : item_27.name] === undefined || !!visible[item_27 === null || item_27 === void 0 ? void 0 : item_27.name];
+                return /*#__PURE__*/_react.default.cloneElement(element_1, _objectSpread(_objectSpread({
+                  key: index_6
+                }, elementTooltip ? {
+                  onMouseEnter: event_2 => {
+                    const rect__1 = event_2.target.getBoundingClientRect();
+                    onPointMouseEnter(_objectSpread(_objectSpread({}, item_27), {}, {
+                      rect: rect__1
+                    }));
+                  },
+                  onMouseLeave: onPointMouseLeave
+                } : undefined), {}, {
+                  style: _objectSpread(_objectSpread({}, element_1 === null || element_1 === void 0 || (_props = element_1.props) === null || _props === void 0 ? void 0 : _props.style), !isVisible ? {
+                    opacity: '0',
+                    pointerEvents: 'none'
+                  } : undefined)
+                }));
+              }), children && _react.default.Children.toArray(children).map((element_2, index_7) => {
+                var _element_2$props, _element_2$props2, _props2;
+                const isVisible_0 = visible[(_element_2$props = element_2.props) === null || _element_2$props === void 0 ? void 0 : _element_2$props.name] === undefined || !!visible[(_element_2$props2 = element_2.props) === null || _element_2$props2 === void 0 ? void 0 : _element_2$props2.name];
+                return /*#__PURE__*/_react.default.cloneElement(element_2, _objectSpread(_objectSpread({
+                  key: index_7,
+                  refs: {
+                    wrapper: refs.wrapper.current,
+                    defs: refs.defs.current
+                  },
+                  rects,
+                  animate: element_2.props.animate !== undefined ? element_2.props.animate : animate,
+                  animateTimeout: element_2.props.animateTimeout !== undefined ? element_2.props.animateTimeout : animateTimeout,
+                  updateDefs: setDefs,
+                  updateLegend: setLegend
+                }, elementTooltip ? {
+                  onMouseEnter: event_3 => {
+                    const rect__2 = event_3.target.getBoundingClientRect();
+                    onPointMouseEnter(_objectSpread(_objectSpread({}, element_2.props), {}, {
+                      rect: rect__2
+                    }));
+                  },
+                  onMouseLeave: onPointMouseLeave
+                } : undefined), {}, {
+                  minMax: element_2.props.minMax !== undefined ? element_2.props.minMax : minMax,
+                  minX: element_2.props.minX !== undefined ? element_2.props.minX : minX,
+                  maxX: element_2.props.maxX !== undefined ? element_2.props.maxX : maxX,
+                  minY: element_2.props.minY !== undefined ? element_2.props.minY : minY,
+                  maxY: element_2.props.maxY !== undefined ? element_2.props.maxY : maxY,
+                  minMaxPadding: element_2.props.minMaxPadding !== undefined ? element_2.props.minMaxPadding : minMaxPadding,
+                  minPadding: element_2.props.minPadding !== undefined ? element_2.props.minPadding : minPadding,
+                  maxPadding: element_2.props.maxPadding !== undefined ? element_2.props.maxPadding : maxPadding,
+                  minPaddingX: element_2.props.minPaddingX !== undefined ? element_2.props.minPaddingX : minPaddingX,
+                  minPaddingY: element_2.props.minPaddingY !== undefined ? element_2.props.minPaddingY : minPaddingY,
+                  maxPaddingX: element_2.props.maxPaddingX !== undefined ? element_2.props.maxPaddingX : maxPaddingX,
+                  maxPaddingY: element_2.props.maxPaddingY !== undefined ? element_2.props.maxPaddingY : maxPaddingY,
+                  style: _objectSpread(_objectSpread({}, element_2 === null || element_2 === void 0 || (_props2 = element_2.props) === null || _props2 === void 0 ? void 0 : _props2.style), !isVisible_0 ? {
+                    opacity: '0',
+                    pointerEvents: 'none'
+                  } : undefined)
+                }));
+              }), additionalLines && /*#__PURE__*/(0, _jsxRuntime.jsx)("g", _objectSpread(_objectSpread({}, AdditionalLinesProps), {}, {
+                className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-additional-lines'], AdditionalLinesProps === null || AdditionalLinesProps === void 0 ? void 0 : AdditionalLinesProps.className, classes.additionalLines]),
+                children: additionalLines
+              })), guidelines && guidelinesIn && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+                children: [['both', 'vertical'].includes(guidelines) && /*#__PURE__*/(0, _jsxRuntime.jsx)("path", _objectSpread(_objectSpread({
+                  d: `M ${(guidelinesPosition === null || guidelinesPosition === void 0 ? void 0 : guidelinesPosition.x) || 0} 0 ${(guidelinesPosition === null || guidelinesPosition === void 0 ? void 0 : guidelinesPosition.x) || 0} ${(rects === null || rects === void 0 || (_rects$wrapper3 = rects.wrapper) === null || _rects$wrapper3 === void 0 ? void 0 : _rects$wrapper3.height) || 0}`
+                }, GuidelineProps), {}, {
+                  className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-guidelines', 'onesy-Chart-guidelines-vertical'], GuidelineProps === null || GuidelineProps === void 0 ? void 0 : GuidelineProps.className, classes.guidelines, classes.guidelines_vertical])
+                })), ['both', 'horizontal'].includes(guidelines) && /*#__PURE__*/(0, _jsxRuntime.jsx)("path", _objectSpread(_objectSpread({
+                  d: `M 0 ${(guidelinesPosition === null || guidelinesPosition === void 0 ? void 0 : guidelinesPosition.y) || 0} ${(rects === null || rects === void 0 || (_rects$wrapper4 = rects.wrapper) === null || _rects$wrapper4 === void 0 ? void 0 : _rects$wrapper4.width) || 0} ${(guidelinesPosition === null || guidelinesPosition === void 0 ? void 0 : guidelinesPosition.y) || 0}`
+                }, GuidelineProps), {}, {
+                  className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-guidelines', 'onesy-Chart-guidelines-horizontal'], GuidelineProps === null || GuidelineProps === void 0 ? void 0 : GuidelineProps.className, classes.guidelines, classes.guidelines_horizontal])
+                }))]
+              }), points__ && points && /*#__PURE__*/(0, _jsxRuntime.jsx)("g", _objectSpread(_objectSpread({}, PointsProps), {}, {
+                className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-points'], PointsProps === null || PointsProps === void 0 ? void 0 : PointsProps.className, classes.points]),
+                children: points.map((item_28, index_8) => (/*#__PURE__*/_react.default.cloneElement(item_28, {
+                  key: index_8
+                })))
+              }))]
+            })), borders && /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
+              children: [borderTop && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-border', 'onesy-Chart-border-x', 'onesy-Chart-border-top'], classes.border, classes.borderX, classes.borderTop])
+              }), borderBottom && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-border', 'onesy-Chart-border-x', 'onesy-Chart-border-bottom'], classes.border, classes.borderX, classes.borderBottom])
+              }), borderStart && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-border', 'onesy-Chart-border-y', 'onesy-Chart-border-start'], classes.border, classes.borderY, classes.boderStart])
+              }), borderLeft && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-border', 'onesy-Chart-border-y', 'onesy-Chart-border-left'], classes.border, classes.borderY, classes.borderLeft])
+              }), borderEnd && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-border', 'onesy-Chart-border-y', 'onesy-Chart-border-end'], classes.border, classes.borderY, classes.borderEnd])
+              }), borderRight && /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-border', 'onesy-Chart-border-y', 'onesy-Chart-border-right'], classes.border, classes.borderY, classes.borderRight])
+              })]
+            }), !!labels__ && labelsX && (labels === null || labels === void 0 ? void 0 : labels.x) && /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
+              gap: 0,
+              direction: "row",
+              align: "flex-start",
+              className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-labels', 'onesy-Chart-labels-x'], classes.labels, classes.labels_x]),
+              children: labels.x.map((item_29, index_9) => {
+                const itemProps = {
+                  key: index_9,
+                  version: 'b3',
+                  className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-label', 'onesy-Chart-label-x'], classes.label, classes.label_x]),
+                  style: {
+                    left: `${item_29.percentage}%`
+                  }
+                };
+                return (0, _utils.is)('function', labelRender) ? labelRender(_objectSpread(_objectSpread({}, item_29), {}, {
+                  axis: 'x',
+                  props: itemProps
+                })) : /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
+                  version: "b3",
+                  className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-label', 'onesy-Chart-label-x'], classes.label, classes.label_x]),
+                  style: {
+                    left: `${item_29.percentage}%`
+                  },
+                  children: (0, _utils.is)('function', labelResolve) ? labelResolve(item_29.label, 'x', item_29) : item_29.label
+                }, index_9);
+              })
+            }), !!labels__ && labelsY && (labels === null || labels === void 0 ? void 0 : labels.y) && /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
+              gap: 0,
+              direction: "column",
+              align: "flex-end",
+              justify: "center",
+              className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-labels', 'onesy-Chart-labels-y'], classes.labels, classes.labels_y]),
+              children: labels.y.map((item_30, index_10) => (0, _utils.is)('function', labelRender) ? labelRender(_objectSpread(_objectSpread({}, item_30), {}, {
+                axis: 'y'
+              })) : /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
+                version: "b3",
+                className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-label', 'onesy-Chart-label-y'], classes.label, classes.label_y]),
+                style: {
+                  bottom: `${item_30.percentage}%`
+                },
+                children: (0, _utils.is)('function', labelResolve) ? labelResolve(item_30.label, 'y', item_30) : item_30.label
+              }, index_10))
+            }), !!marks__ && marksX && (marks === null || marks === void 0 ? void 0 : marks.x) && /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
+              gap: 0,
+              direction: "row",
+              align: "flex-start",
+              className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-marks', 'onesy-Chart-marks-x'], classes.marks, classes.marks_x]),
+              children: marks.x.map((item_31, index_11) => /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-mark', 'onesy-Chart-mark-x'], classes.mark, classes.mark_x]),
+                style: {
+                  left: `${item_31.percentage}%`
+                },
+                children: item_31.mark
+              }, index_11))
+            }), !!marks__ && marksY && (marks === null || marks === void 0 ? void 0 : marks.y) && /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
+              gap: 0,
+              direction: "column",
+              align: "flex-end",
+              justify: "center",
+              className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-marks', 'onesy-Chart-marks-y'], classes.marks, classes.marks_y]),
+              children: marks.y.map((item_32, index_12) => /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+                className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-mark', 'onesy-Chart-mark-y'], classes.mark, classes.mark_y]),
+                style: {
+                  bottom: `${item_32.percentage}%`
+                },
+                children: item_32.mark
+              }, index_12))
+            }), (names === null || names === void 0 ? void 0 : names.x) && nameX && /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
+              version: "b2",
+              className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-name', 'onesy-Chart-name-x'], classes.name, classes.name_x]),
+              children: names.x
+            }), (names === null || names === void 0 ? void 0 : names.y) && nameY && /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
+              version: "b2",
+              className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-name', 'onesy-Chart-name-y'], classes.name, classes.name_y]),
+              children: names.y
+            })]
+          });
         }
-      }, (0, _utils.is)('function', labelResolve) ? labelResolve(item_29.label, 'x', item_29) : item_29.label);
-    })), !!labels__ && labelsY && (labels === null || labels === void 0 ? void 0 : labels.y) && /*#__PURE__*/_react.default.createElement(Line, {
-      gap: 0,
-      direction: "column",
-      align: "flex-end",
-      justify: "center",
-      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-labels', 'onesy-Chart-labels-y'], classes.labels, classes.labels_y])
-    }, labels.y.map((item_30, index_10) => (0, _utils.is)('function', labelRender) ? labelRender(_objectSpread(_objectSpread({}, item_30), {}, {
-      axis: 'y'
-    })) : /*#__PURE__*/_react.default.createElement(Type, {
-      key: index_10,
-      version: "b3",
-      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-label', 'onesy-Chart-label-y'], classes.label, classes.label_y]),
-      style: {
-        bottom: `${item_30.percentage}%`
-      }
-    }, (0, _utils.is)('function', labelResolve) ? labelResolve(item_30.label, 'y', item_30) : item_30.label))), !!marks__ && marksX && (marks === null || marks === void 0 ? void 0 : marks.x) && /*#__PURE__*/_react.default.createElement(Line, {
-      gap: 0,
+      })
+    })), legend__ && legendPosition === 'bottom' && legend && /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, _objectSpread(_objectSpread({
+      gap: 2,
       direction: "row",
-      align: "flex-start",
-      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-marks', 'onesy-Chart-marks-x'], classes.marks, classes.marks_x])
-    }, marks.x.map((item_31, index_11) => /*#__PURE__*/_react.default.createElement("span", {
-      key: index_11,
-      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-mark', 'onesy-Chart-mark-x'], classes.mark, classes.mark_x]),
-      style: {
-        left: `${item_31.percentage}%`
-      }
-    }, item_31.mark))), !!marks__ && marksY && (marks === null || marks === void 0 ? void 0 : marks.y) && /*#__PURE__*/_react.default.createElement(Line, {
-      gap: 0,
-      direction: "column",
-      align: "flex-end",
+      align: "center",
       justify: "center",
-      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-marks', 'onesy-Chart-marks-y'], classes.marks, classes.marks_y])
-    }, marks.y.map((item_32, index_12) => /*#__PURE__*/_react.default.createElement("span", {
-      key: index_12,
-      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-mark', 'onesy-Chart-mark-y'], classes.mark, classes.mark_y]),
-      style: {
-        bottom: `${item_32.percentage}%`
-      }
-    }, item_32.mark))), (names === null || names === void 0 ? void 0 : names.x) && nameX && /*#__PURE__*/_react.default.createElement(Type, {
-      version: "b2",
-      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-name', 'onesy-Chart-name-x'], classes.name, classes.name_x])
-    }, names.x), (names === null || names === void 0 ? void 0 : names.y) && nameY && /*#__PURE__*/_react.default.createElement(Type, {
-      version: "b2",
-      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-name', 'onesy-Chart-name-y'], classes.name, classes.name_y])
-    }, names.y));
-  })), legend__ && legendPosition === 'bottom' && legend && /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
-    gap: 2,
-    direction: "row",
-    align: "center",
-    justify: "center",
-    wrap: "wrap"
-  }, LegendProps, {
-    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-legend', `onesy-Chart-legend-position-${legendPosition}`], LegendProps === null || LegendProps === void 0 ? void 0 : LegendProps.className, classes.legend, classes[`legend_position_${legendPosition}`], (labels === null || labels === void 0 ? void 0 : labels.y) && labelsY && classes.legend_offset_labels_y, (names === null || names === void 0 ? void 0 : names.y) && nameY && classes.legend_offset_names_y])
-  }), legend.map(({
-    item: item_33,
-    element: element_3
-  }) => {
-    var _element_3$props;
-    return /*#__PURE__*/_react.default.cloneElement(element_3, {
-      onClick: () => onLegendClick(item_33.name),
-      className: (0, _styleReact.classNames)([element_3 === null || element_3 === void 0 || (_element_3$props = element_3.props) === null || _element_3$props === void 0 ? void 0 : _element_3$props.className, legendManageVisibility && classes.legend_item_manage_visibility, refs.visible.current[item_33.name] === false && classes.legend_item_hidden])
-    });
-  })), tooltip && /*#__PURE__*/_react.default.createElement(Append, (0, _extends2.default)({
-    open: true,
-    offset: [16, 16],
-    padding: [14, 14],
-    element: /*#__PURE__*/_react.default.createElement("div", {
-      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-append-wrapper'], classes.append_wrapper]),
-      style: _objectSpread({}, refs.appendStyle.current)
-    }, /*#__PURE__*/_react.default.createElement(Grow, {
-      in: append === null || append === void 0 ? void 0 : append.open,
-      onAdded: () => {
-        refs.appendStyle.current = {
-          transition: theme.methods.transitions.make('transform', {
-            duration: 150
-          })
-        };
-      },
-      onEnter: () => {
-        refs.appendStyle.current = {
-          transition: theme.methods.transitions.make('transform', {
-            duration: 150
+      wrap: "wrap"
+    }, LegendProps), {}, {
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-legend', `onesy-Chart-legend-position-${legendPosition}`], LegendProps === null || LegendProps === void 0 ? void 0 : LegendProps.className, classes.legend, classes[`legend_position_${legendPosition}`], (labels === null || labels === void 0 ? void 0 : labels.y) && labelsY && classes.legend_offset_labels_y, (names === null || names === void 0 ? void 0 : names.y) && nameY && classes.legend_offset_names_y]),
+      children: legend.map(({
+        item: item_33,
+        element: element_3
+      }) => {
+        var _element_3$props;
+        return /*#__PURE__*/_react.default.cloneElement(element_3, {
+          onClick: () => onLegendClick(item_33.name),
+          className: (0, _styleReact.classNames)([element_3 === null || element_3 === void 0 || (_element_3$props = element_3.props) === null || _element_3$props === void 0 ? void 0 : _element_3$props.className, legendManageVisibility && classes.legend_item_manage_visibility, refs.visible.current[item_33.name] === false && classes.legend_item_hidden])
+        });
+      })
+    })), tooltip && /*#__PURE__*/(0, _jsxRuntime.jsx)(Append, _objectSpread({
+      open: true,
+      offset: [16, 16],
+      padding: [14, 14],
+      element: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-append-wrapper'], classes.append_wrapper]),
+        style: _objectSpread({}, refs.appendStyle.current),
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Grow, {
+          in: append === null || append === void 0 ? void 0 : append.open,
+          onAdded: () => {
+            refs.appendStyle.current = {
+              transition: theme.methods.transitions.make('transform', {
+                duration: 150
+              })
+            };
+          },
+          onEnter: () => {
+            refs.appendStyle.current = {
+              transition: theme.methods.transitions.make('transform', {
+                duration: 150
+              })
+            };
+          },
+          onExited: () => {
+            refs.appendStyle.current = {};
+          },
+          add: true,
+          children: (append === null || append === void 0 ? void 0 : append.element) || /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
+            tonal: tonal,
+            color: color,
+            elevation: 1,
+            gap: 0.4,
+            direction: "column",
+            Component: Surface,
+            className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-append'], classes.append]),
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
+              gap: 1,
+              direction: "row",
+              align: "center",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
+                version: "b3",
+                style: {
+                  fontWeight: 600
+                },
+                children: (names === null || names === void 0 ? void 0 : names.y) || 'y'
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
+                version: "b3",
+                children: (0, _utils.is)('function', labelResolve) ? labelResolve(append === null || append === void 0 || (_append$values = append.values) === null || _append$values === void 0 ? void 0 : _append$values[1], 'y', append, 'individual') : append === null || append === void 0 || (_append$values2 = append.values) === null || _append$values2 === void 0 ? void 0 : _append$values2[1]
+              })]
+            }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
+              gap: 1,
+              direction: "row",
+              align: "center",
+              children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
+                version: "b3",
+                style: {
+                  fontWeight: 600
+                },
+                children: (names === null || names === void 0 ? void 0 : names.x) || 'x'
+              }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
+                version: "b3",
+                children: (0, _utils.is)('function', labelResolve) ? labelResolve(append === null || append === void 0 || (_append$values3 = append.values) === null || _append$values3 === void 0 ? void 0 : _append$values3[0], 'x', append, 'individual') : append === null || append === void 0 || (_append$values4 = append.values) === null || _append$values4 === void 0 ? void 0 : _append$values4[0]
+              })]
+            })]
           })
-        };
-      },
-      onExited: () => {
-        refs.appendStyle.current = {};
-      },
-      add: true
-    }, (append === null || append === void 0 ? void 0 : append.element) || /*#__PURE__*/_react.default.createElement(Line, {
-      tonal: tonal,
-      color: color,
-      elevation: 1,
-      gap: 0.4,
-      direction: "column",
-      Component: Surface,
-      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('Chart', theme) && ['onesy-Chart-append'], classes.append])
-    }, /*#__PURE__*/_react.default.createElement(Line, {
-      gap: 1,
-      direction: "row",
-      align: "center"
-    }, /*#__PURE__*/_react.default.createElement(Type, {
-      version: "b3",
-      style: {
-        fontWeight: 600
-      }
-    }, (names === null || names === void 0 ? void 0 : names.y) || 'y'), /*#__PURE__*/_react.default.createElement(Type, {
-      version: "b3"
-    }, (0, _utils.is)('function', labelResolve) ? labelResolve(append === null || append === void 0 || (_append$values = append.values) === null || _append$values === void 0 ? void 0 : _append$values[1], 'y', append, 'individual') : append === null || append === void 0 || (_append$values2 = append.values) === null || _append$values2 === void 0 ? void 0 : _append$values2[1])), /*#__PURE__*/_react.default.createElement(Line, {
-      gap: 1,
-      direction: "row",
-      align: "center"
-    }, /*#__PURE__*/_react.default.createElement(Type, {
-      version: "b3",
-      style: {
-        fontWeight: 600
-      }
-    }, (names === null || names === void 0 ? void 0 : names.x) || 'x'), /*#__PURE__*/_react.default.createElement(Type, {
-      version: "b3"
-    }, (0, _utils.is)('function', labelResolve) ? labelResolve(append === null || append === void 0 || (_append$values3 = append.values) === null || _append$values3 === void 0 ? void 0 : _append$values3[0], 'x', append, 'individual') : append === null || append === void 0 || (_append$values4 = append.values) === null || _append$values4 === void 0 ? void 0 : _append$values4[0]))))),
-    anchor: append === null || append === void 0 ? void 0 : append.rect,
-    portal: true,
-    alignment: "center",
-    position: "top"
-  }, AppendProps)));
-});
+        })
+      }),
+      anchor: append === null || append === void 0 ? void 0 : append.rect,
+      portal: true,
+      alignment: "center",
+      position: "top"
+    }, AppendProps))]
+  }));
+};
 Chart.displayName = 'onesy-Chart';
 var _default = exports.default = Chart;