@onesy/ui-react 1.0.171 → 1.0.173

package/BubbleChart/BubbleChart.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 _compilerRuntime = require("react/compiler-runtime");
@@ -18,6 +17,7 @@ var _Type = _interopRequireDefault(require("../Type"));
 var _Surface = _interopRequireDefault(require("../Surface"));
 var _BubbleChartItem = _interopRequireDefault(require("../BubbleChartItem"));
 var _utils2 = require("../utils");
+var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["tonal", "color", "names", "values", "animate", "animateTimeout", "tooltipRender", "tooltipGroupRender", "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; }
@@ -56,9 +56,9 @@ const useStyle = (0, _styleReact.style)(theme => ({
 }), {
   name: 'onesy-BubbleChart'
 });
-const BubbleChart = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+const BubbleChart = props_ => {
   var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3, _theme$elements4, _theme$elements5, _values$, _values;
-  const $ = (0, _compilerRuntime.c)(11);
+  const $ = (0, _compilerRuntime.c)(10);
   const theme = (0, _styleReact.useOnesyTheme)();
   const l = theme.l;
   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.onesyBubbleChart) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
@@ -89,157 +89,181 @@ const BubbleChart = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       values: values__
     } = values_;
     return {
-      element: /*#__PURE__*/_react.default.createElement(Line, {
+      element: /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
         tonal: tonal,
         color: color,
         elevation: 1,
         gap: 0.5,
         direction: "column",
         Component: Surface,
-        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)("BubbleChart", theme) && ["onesy-BubbleChart-append"], classes.append])
-      }, /*#__PURE__*/_react.default.createElement(Line, {
-        gap: 1,
-        direction: "row",
-        align: "center"
-      }, /*#__PURE__*/_react.default.createElement(Type, {
-        version: "b3"
-      }, values__ === null || values__ === void 0 ? void 0 : values__[3])), /*#__PURE__*/_react.default.createElement(Line, {
-        gap: 0.4,
-        direction: "column"
-      }, /*#__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"
-      }, values__ === null || values__ === void 0 ? void 0 : values__[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"
-      }, values__ === null || values__ === void 0 ? void 0 : values__[0])), /*#__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.size) || "Size"), /*#__PURE__*/_react.default.createElement(Type, {
-        version: "b3"
-      }, values__ === null || values__ === void 0 ? void 0 : values__[2]))))
+        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)("BubbleChart", theme) && ["onesy-BubbleChart-append"], classes.append]),
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
+          gap: 1,
+          direction: "row",
+          align: "center",
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
+            version: "b3",
+            children: values__ === null || values__ === void 0 ? void 0 : values__[3]
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
+          gap: 0.4,
+          direction: "column",
+          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: values__ === null || values__ === void 0 ? void 0 : values__[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: values__ === null || values__ === void 0 ? void 0 : values__[0]
+            })]
+          }), /*#__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.size) || "Size"
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
+              version: "b3",
+              children: values__ === null || values__ === void 0 ? void 0 : values__[2]
+            })]
+          })]
+        })]
+      })
     };
   };
-  const tooltipGroupRender = (0, _utils.is)("function", tooltipGroupRender_) ? tooltipGroupRender_ : (groups, groupsSorted) => /*#__PURE__*/_react.default.createElement(Line, {
+  const tooltipGroupRender = (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)("BubbleChart", theme) && ["onesy-BubbleChart-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
-    }
-  }, l("Label")), /*#__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(Type, {
-    version: "b3",
-    style: {
-      fontWeight: 600
-    }
-  }, (names === null || names === void 0 ? void 0 : names.size) || l("Size"))), /*#__PURE__*/_react.default.createElement(Line, {
-    gap: 1,
-    direction: "column"
-  }, groupsSorted.map((group, index) => {
-    var _groups$group$;
-    return /*#__PURE__*/_react.default.createElement(Line, {
-      key: index,
+    className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)("BubbleChart", theme) && ["onesy-BubbleChart-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)("BubbleChart", theme) && ["onesy-BubbleChart-append-icon"], classes.append_icon]),
-      style: {
-        background: !theme.palette.color[group] ? group : theme.palette.color[group][((_groups$group$ = groups[group][0]) === null || _groups$group$ === void 0 || (_groups$group$ = _groups$group$.item) === null || _groups$group$ === void 0 ? void 0 : _groups$group$.tone) || "main"]
-      }
-    }), /*#__PURE__*/_react.default.createElement(Line, {
-      gap: 0,
-      direction: "column",
-      style: {
-        width: "100%"
-      }
-    }, groups[group].map((item, index_) => {
-      var _item$values, _item$values2, _item$values3, _item$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"
-      }, item === null || item === void 0 || (_item$values = item.values) === null || _item$values === void 0 ? void 0 : _item$values[3]), /*#__PURE__*/_react.default.createElement(Type, {
-        version: "b3"
-      }, item === null || item === void 0 || (_item$values2 = item.values) === null || _item$values2 === void 0 ? void 0 : _item$values2[1]), /*#__PURE__*/_react.default.createElement(Type, {
-        version: "b3"
-      }, item === null || item === void 0 || (_item$values3 = item.values) === null || _item$values3 === void 0 ? void 0 : _item$values3[0]), /*#__PURE__*/_react.default.createElement(Type, {
-        version: "b3"
-      }, item === null || item === void 0 || (_item$values4 = item.values) === null || _item$values4 === void 0 ? void 0 : _item$values4[2]));
-    })));
-  }))));
+        align: "center",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
+          version: "b3",
+          style: {
+            fontWeight: 600
+          },
+          children: l("Label")
+        }), /*#__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)(Type, {
+          version: "b3",
+          style: {
+            fontWeight: 600
+          },
+          children: (names === null || names === void 0 ? void 0 : names.size) || l("Size")
+        })]
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
+        gap: 1,
+        direction: "column",
+        children: groupsSorted.map((group, index) => {
+          var _groups$group$;
+          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)("BubbleChart", theme) && ["onesy-BubbleChart-append-icon"], classes.append_icon]),
+              style: {
+                background: !theme.palette.color[group] ? group : theme.palette.color[group][((_groups$group$ = groups[group][0]) === null || _groups$group$ === void 0 || (_groups$group$ = _groups$group$.item) === null || _groups$group$ === void 0 ? void 0 : _groups$group$.tone) || "main"]
+              }
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, {
+              gap: 0,
+              direction: "column",
+              style: {
+                width: "100%"
+              },
+              children: groups[group].map((item, index_) => {
+                var _item$values, _item$values2, _item$values3, _item$values4;
+                return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, {
+                  gap: 1,
+                  direction: "row",
+                  style: {
+                    width: "100%"
+                  },
+                  children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
+                    version: "b3",
+                    children: item === null || item === void 0 || (_item$values = item.values) === null || _item$values === void 0 ? void 0 : _item$values[3]
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
+                    version: "b3",
+                    children: item === null || item === void 0 || (_item$values2 = item.values) === null || _item$values2 === void 0 ? void 0 : _item$values2[1]
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
+                    version: "b3",
+                    children: item === null || item === void 0 || (_item$values3 = item.values) === null || _item$values3 === void 0 ? void 0 : _item$values3[0]
+                  }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
+                    version: "b3",
+                    children: item === null || item === void 0 || (_item$values4 = item.values) === null || _item$values4 === void 0 ? void 0 : _item$values4[2]
+                  })]
+                }, index_);
+              })
+            })]
+          }, index);
+        })
+      })]
+    })
+  });
   values.sort(_temp);
   const minSize = (_values$ = values[0]) === null || _values$ === void 0 || (_values$ = _values$.values) === null || _values$ === void 0 ? void 0 : _values$[2];
   const maxSize = (_values = values[values.length - 1]) === null || _values === void 0 || (_values = _values.values) === null || _values === void 0 ? void 0 : _values[2];
   const t2 = "hidden";
   const t3 = true;
   const t4 = (0, _styleReact.classNames)([(0, _utils2.staticClassName)("BubbleChart", theme) && ["onesy-BubbleChart-root"], className, classes.root]);
-  const t5 = (0, _utils.is)("array", values) && values.map((item_0, index_0) => /*#__PURE__*/_react.default.createElement(BubbleChartItem, (0, _extends2.default)({
-    key: index_0,
+  const t5 = (0, _utils.is)("array", values) && values.map((item_0, index_0) => /*#__PURE__*/(0, _jsxRuntime.jsx)(BubbleChartItem, _objectSpread({
     animate: animate,
     animateTimeout: animateTimeout,
     minSize: minSize,
     maxSize: maxSize
-  }, item_0)));
+  }, item_0), index_0));
   let t6;
-  if ($[0] !== Chart || $[1] !== color || $[2] !== other || $[3] !== ref || $[4] !== t4 || $[5] !== t5 || $[6] !== tonal || $[7] !== tooltipGroupRender || $[8] !== tooltipRender || $[9] !== values) {
-    t6 = /*#__PURE__*/_react.default.createElement(Chart, (0, _extends2.default)({
-      ref: ref,
+  if ($[0] !== Chart || $[1] !== color || $[2] !== other || $[3] !== t4 || $[4] !== t5 || $[5] !== tonal || $[6] !== tooltipGroupRender || $[7] !== tooltipRender || $[8] !== values) {
+    t6 = /*#__PURE__*/(0, _jsxRuntime.jsx)(Chart, _objectSpread(_objectSpread({
       tonal: tonal,
       color: color,
       values: values,
@@ -248,23 +272,24 @@ const BubbleChart = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
       tooltipRender: tooltipRender,
       tooltipGroupRender: tooltipGroupRender,
       className: t4
-    }, other), t5);
+    }, other), {}, {
+      children: t5
+    }));
     $[0] = Chart;
     $[1] = color;
     $[2] = other;
-    $[3] = ref;
-    $[4] = t4;
-    $[5] = t5;
-    $[6] = tonal;
-    $[7] = tooltipGroupRender;
-    $[8] = tooltipRender;
-    $[9] = values;
-    $[10] = t6;
+    $[3] = t4;
+    $[4] = t5;
+    $[5] = tonal;
+    $[6] = tooltipGroupRender;
+    $[7] = tooltipRender;
+    $[8] = values;
+    $[9] = t6;
   } else {
-    t6 = $[10];
+    t6 = $[9];
   }
   return t6;
-});
+};
 BubbleChart.displayName = 'onesy-BubbleChart';
 var _default = exports.default = BubbleChart;
 function _temp(a, b) {

package/BubbleChartItem/BubbleChartItem.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"));
@@ -16,6 +15,7 @@ var _Line = _interopRequireDefault(require("../Line"));
 var _Type = _interopRequireDefault(require("../Type"));
 var _useMediaQuery = _interopRequireDefault(require("../useMediaQuery"));
 var _utils2 = require("../utils");
+var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["tonal", "color", "name", "values", "minSize", "maxSize", "refs", "rects", "updateDefs", "updateLegend", "minMax", "animate", "animateTimeout", "PathProps", "LegendItemProps", "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; }
@@ -36,7 +36,7 @@ const useStyle = (0, _styleReact.style)(theme => ({
 }), {
   name: 'onesy-BubbleChartItem'
 });
-const BubbleChartItem = /*#__PURE__*/_react.default.forwardRef((props_, ref) => {
+const BubbleChartItem = props_ => {
   var _theme$ui, _theme$ui2, _theme$elements, _theme$elements2, _theme$elements3;
   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.onesyBubbleChartItem) === null || _theme$ui2 === void 0 || (_theme$ui2 = _theme$ui2.props) === null || _theme$ui2 === void 0 ? void 0 : _theme$ui2.default), props_);
@@ -97,20 +97,22 @@ const BubbleChartItem = /*#__PURE__*/_react.default.forwardRef((props_, ref) =>
   refs.animateTimeout.current = animateTimeout;
   refs.init.current = init;
   const LegendItem = () => {
-    return /*#__PURE__*/_react.default.createElement(Line, (0, _extends2.default)({
+    return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Line, _objectSpread(_objectSpread({
       gap: 1,
       direction: "row",
       align: "center"
-    }, LegendItemProps, {
-      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('BubbleChart', theme) && ['onesy-BubbleChart-legend-item'], LegendItemProps === null || LegendItemProps === void 0 ? void 0 : LegendItemProps.className, classes.legend_item])
-    }), /*#__PURE__*/_react.default.createElement("span", {
-      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('BubbleChart', theme) && ['onesy-BubbleChart-legend-icon'], classes.legend_icon]),
-      style: {
-        background: !theme.palette.color[color] ? color : theme.palette.color[color]['main']
-      }
-    }), /*#__PURE__*/_react.default.createElement(Type, {
-      version: "b3"
-    }, name));
+    }, LegendItemProps), {}, {
+      className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('BubbleChart', theme) && ['onesy-BubbleChart-legend-item'], LegendItemProps === null || LegendItemProps === void 0 ? void 0 : LegendItemProps.className, classes.legend_item]),
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('BubbleChart', theme) && ['onesy-BubbleChart-legend-icon'], classes.legend_icon]),
+        style: {
+          background: !theme.palette.color[color] ? color : theme.palette.color[color]['main']
+        }
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(Type, {
+        version: "b3",
+        children: name
+      })]
+    }));
   };
   const make = () => {
     // Make values into x, y, coordinates
@@ -134,34 +136,37 @@ const BubbleChartItem = /*#__PURE__*/_react.default.forwardRef((props_, ref) =>
       const maxR = 40;
       const percentage = (0, _utils.percentageFromValueWithinRange)(value_[2], minSize, maxSize);
       const r = (0, _utils.valueFromPercentageWithinRange)(percentage, minR, maxR);
-      const element = /*#__PURE__*/_react.default.createElement("g", null, /*#__PURE__*/_react.default.createElement(Path, (0, _extends2.default)({
-        r: r,
-        cx: value_[0],
-        cy: value_[1],
-        fill: theme.methods.palette.color.colorToRgb(!theme.palette.color[color] ? color : theme.palette.color[color]['main'], 0.14),
-        stroke: !theme.palette.color[color] ? color : theme.palette.color[color]['main'],
-        strokeWidth: "2px",
-        Component: "circle"
-      }, PathProps, {
-        style: _objectSpread(_objectSpread(_objectSpread({}, PathProps === null || PathProps === void 0 ? void 0 : PathProps.style), refs.animate.current && refs.init.current !== 'animated' && {
-          opacity: 0,
-          transform: 'scale(0)'
-        }), {}, {
-          transformBox: 'fill-box',
-          transformOrigin: 'center'
-        }, refs.pathStyle.current)
-      })), r >= 20 && value_[3] && /*#__PURE__*/_react.default.createElement("text", {
-        x: value_[0],
-        y: value_[1],
-        className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('BubbleChartItem', theme) && ['onesy-BubbleChartItem-text'], classes.text]),
-        style: _objectSpread(_objectSpread(_objectSpread({}, PathProps === null || PathProps === void 0 ? void 0 : PathProps.style), refs.animate.current && refs.init.current !== 'animated' && {
-          opacity: 0,
-          transform: 'scale(0)'
-        }), {}, {
-          transformBox: 'fill-box',
-          transformOrigin: 'center'
-        }, refs.pathStyle.current)
-      }, value_[3]));
+      const element = /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(Path, _objectSpread(_objectSpread({
+          r: r,
+          cx: value_[0],
+          cy: value_[1],
+          fill: theme.methods.palette.color.colorToRgb(!theme.palette.color[color] ? color : theme.palette.color[color]['main'], 0.14),
+          stroke: !theme.palette.color[color] ? color : theme.palette.color[color]['main'],
+          strokeWidth: "2px",
+          Component: "circle"
+        }, PathProps), {}, {
+          style: _objectSpread(_objectSpread(_objectSpread({}, PathProps === null || PathProps === void 0 ? void 0 : PathProps.style), refs.animate.current && refs.init.current !== 'animated' && {
+            opacity: 0,
+            transform: 'scale(0)'
+          }), {}, {
+            transformBox: 'fill-box',
+            transformOrigin: 'center'
+          }, refs.pathStyle.current)
+        })), r >= 20 && value_[3] && /*#__PURE__*/(0, _jsxRuntime.jsx)("text", {
+          x: value_[0],
+          y: value_[1],
+          className: (0, _styleReact.classNames)([(0, _utils2.staticClassName)('BubbleChartItem', theme) && ['onesy-BubbleChartItem-text'], classes.text]),
+          style: _objectSpread(_objectSpread(_objectSpread({}, PathProps === null || PathProps === void 0 ? void 0 : PathProps.style), refs.animate.current && refs.init.current !== 'animated' && {
+            opacity: 0,
+            transform: 'scale(0)'
+          }), {}, {
+            transformBox: 'fill-box',
+            transformOrigin: 'center'
+          }, refs.pathStyle.current),
+          children: value_[3]
+        })]
+      });
 
       // Legend item
       if ((0, _utils.is)('function', updateLegend)) {
@@ -176,7 +181,7 @@ const BubbleChartItem = /*#__PURE__*/_react.default.forwardRef((props_, ref) =>
                 name,
                 values
               },
-              element: /*#__PURE__*/_react.default.createElement(LegendItem, null)
+              element: /*#__PURE__*/(0, _jsxRuntime.jsx)(LegendItem, {})
             });
           }
           return newValues;
@@ -216,6 +221,6 @@ const BubbleChartItem = /*#__PURE__*/_react.default.forwardRef((props_, ref) =>
   return value && /*#__PURE__*/_react.default.cloneElement(value, _objectSpread({
     className
   }, other));
-});
+};
 BubbleChartItem.displayName = 'onesy-BubbleChartItem';
 var _default = exports.default = BubbleChartItem;