@onesy/ui-react 1.0.171 → 1.0.173

package/esm/RoundMeter/RoundMeter.js

@@ -1,7 +1,6 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-const _excluded = ["tonal", "color", "size", "parts", "lineCap", "padding", "gap", "border", "background", "boundary", "boundaryWidth", "arcProgress", "arcsVisible", "marksVisible", "labelsVisible", "marks", "markSize", "markWidth", "labels", "renderLabel", "childrenPosition", "additional", "textProps", "pathProps", "SvgProps", "MarkProps", "LabelProps", "BackgroundProps", "BorderProps", "ArcProps", "ArcMainProps", "ArcsProgressProps", "ArcProgressProps", "Component", "className", "style", "children"],
+const _excluded = ["ref", "tonal", "color", "size", "parts", "lineCap", "padding", "gap", "border", "background", "boundary", "boundaryWidth", "arcProgress", "arcsVisible", "marksVisible", "labelsVisible", "marks", "markSize", "markWidth", "labels", "renderLabel", "childrenPosition", "additional", "textProps", "pathProps", "SvgProps", "MarkProps", "LabelProps", "BackgroundProps", "BorderProps", "ArcProps", "ArcMainProps", "ArcsProgressProps", "ArcProgressProps", "Component", "className", "style", "children"],
   _excluded2 = ["size", "padding", "position"],
   _excluded3 = ["value", "padding", "position"],
   _excluded4 = ["x", "y", "value"];
@@ -12,6 +11,7 @@ import { clamp, is, parse, valueFromPercentageWithinRange } from '@onesy/utils';
 import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
 import SurfaceElement from '../Surface';
 import { angleToCoordinates, staticClassName, toNumber } from '../utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {
     width: '100vw'
@@ -50,11 +50,12 @@ const useStyle = styleMethod(theme => ({
 }), {
   name: 'onesy-RoundMeter'
 });
-const RoundMeter = /*#__PURE__*/React.forwardRef((props_, ref) => {
+const RoundMeter = props_ => {
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyRoundMeter?.props?.default), props_);
   const Surface = theme?.elements?.Surface || SurfaceElement;
   const {
+      ref,
       tonal = true,
       color = 'primary',
       size = 'regular',
@@ -529,21 +530,22 @@ const RoundMeter = /*#__PURE__*/React.forwardRef((props_, ref) => {
     }
     return values_3.join(' ');
   }, [width, height, boundary, boundaryWidth, outsidePadding]);
-  const children_ = children && /*#__PURE__*/React.createElement("g", {
-    className: classNames([staticClassName('RoundMeter', theme) && ['onesy-RoundMeter-children'], classes.children])
-  }, React.Children.toArray(children).map((item, index_1) => {
-    return /*#__PURE__*/React.cloneElement(item, {
-      key: index_1,
-      fill: item.props.fill !== undefined ? item.props.fill : color,
-      stroke: item.props.stroke !== undefined ? item.props.stroke : color,
-      // clean up
-      value: undefined,
-      style: _objectSpread(_objectSpread({}, item.props.value !== undefined ? {
-        transform: `rotate(${valueFromPercentageWithinRange(item.props.value, min, max)}deg)`
-      } : undefined), item.props.style)
-    });
-  }));
-  return /*#__PURE__*/React.createElement(Component, _extends({
+  const children_ = children && /*#__PURE__*/_jsx("g", {
+    className: classNames([staticClassName('RoundMeter', theme) && ['onesy-RoundMeter-children'], classes.children]),
+    children: React.Children.toArray(children).map((item, index_1) => {
+      return /*#__PURE__*/React.cloneElement(item, {
+        key: index_1,
+        fill: item.props.fill !== undefined ? item.props.fill : color,
+        stroke: item.props.stroke !== undefined ? item.props.stroke : color,
+        // clean up
+        value: undefined,
+        style: _objectSpread(_objectSpread({}, item.props.value !== undefined ? {
+          transform: `rotate(${valueFromPercentageWithinRange(item.props.value, min, max)}deg)`
+        } : undefined), item.props.style)
+      });
+    })
+  });
+  return /*#__PURE__*/_jsxs(Component, _objectSpread(_objectSpread({
     ref: item_0 => {
       if (ref) {
         if (is('function', ref)) ref(item_0);else ref.current = item_0;
@@ -552,80 +554,83 @@ const RoundMeter = /*#__PURE__*/React.forwardRef((props_, ref) => {
     },
     className: classNames([staticClassName('RoundMeter', theme) && ['onesy-RoundMeter-root', `onesy-RoundMeter-size-${size}`], className, classes.root, classes[`size_${size}`], classes[`boundary_${String(boundary).replace('.', '')}`]]),
     style: _objectSpread(_objectSpread({}, styles.root), style)
-  }, other), additional, /*#__PURE__*/React.createElement(Surface, {
-    tonal: tonal,
-    color: color
-  }, ({
-    color: color_,
-    backgroundColor
-  }) => /*#__PURE__*/React.createElement("svg", _extends({
-    xmlns: "http://www.w3.org/2000/svg",
-    viewBox: `0 ${yViewBox} ${width || 0} ${height || 0}`
-  }, SvgProps, {
-    className: classNames([staticClassName('RoundMeter', theme) && ['onesy-RoundMeter-svg'], SvgProps?.className, classes.svg])
-  }), childrenPosition === 'pre' && children_, background && /*#__PURE__*/React.createElement("path", _extends({
-    d: pathBackground,
-    fill: backgroundColor,
-    stroke: "none"
-  }, pathProps, BackgroundProps)), border && /*#__PURE__*/React.createElement("path", _extends({
-    d: pathBorder,
-    fill: "none",
-    stroke: color_,
-    strokeWidth: boundaryWidth
-  }, pathProps, BorderProps)), arcsVisible && /*#__PURE__*/React.createElement("g", {
-    className: classNames([staticClassName('RoundMeter', theme) && ['onesy-RoundMeter-arcs'], classes.arcs])
-  }, arcs.map((item_1, index_2) => /*#__PURE__*/React.createElement("path", _extends({
-    key: index_2,
-    d: item_1.d,
-    fill: "none",
-    stroke: color_,
-    strokeWidth: boundaryWidth,
-    strokeLinecap: lineCap
-  }, pathProps, ArcProps, ArcMainProps)))), arcsVisible && arcProgress && /*#__PURE__*/React.createElement("g", _extends({}, ArcsProgressProps, {
-    className: classNames([staticClassName('RoundMeter', theme) && ['onesy-RoundMeter-arcs-progress'], ArcsProgressProps?.className, classes.arcs_progress])
-  }), arcs.map((item_2, index_3) => /*#__PURE__*/React.createElement("path", _extends({
-    key: index_3,
-    d: item_2.d,
-    fill: "none",
-    stroke: color_,
-    strokeWidth: boundaryWidth,
-    strokeLinecap: lineCap
-  }, pathProps, ArcProps, ArcProgressProps)))), childrenPosition === 'pre-marks' && children_, marksVisible && !!marks_.length && marks.map((marksValue_0, index_4) => /*#__PURE__*/React.createElement("g", {
-    key: index_4,
-    className: classNames([staticClassName('RoundMeter', theme) && ['onesy-RoundMeter-marks'], classes.marks])
-  }, marksValue_0.map((item_3, index_) => /*#__PURE__*/React.createElement("path", _extends({
-    key: index_,
-    d: item_3.d,
-    fill: "none",
-    stroke: color_,
-    strokeWidth: item_3.width !== undefined ? item_3.width : markWidth,
-    strokeLinecap: lineCap
-  }, pathProps, MarkProps))))), childrenPosition === 'pre-labels' && children_, labelsVisible && !!labels_.length && labels.map((labelsValue_0, index_5) => {
-    return /*#__PURE__*/React.createElement("g", {
-      key: index_5,
-      className: classNames([staticClassName('RoundMeter', theme) && ['onesy-RoundMeter-labels'], classes.labels])
-    }, labelsValue_0.map((item_4, index__0) => {
-      const {
-          x,
-          y,
-          value: value_1
-        } = item_4,
-        other__1 = _objectWithoutProperties(item_4, _excluded4);
-      const propsLabel = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, other__1), textProps), LabelProps), {}, {
-        style: _objectSpread(_objectSpread(_objectSpread({
-          fill: color_
-        }, other__1.style), textProps?.style), LabelProps?.style)
-      });
-      if (is('function', renderLabel)) return renderLabel(x, y, value_1, propsLabel);
-      return /*#__PURE__*/React.createElement("text", _extends({
-        key: index__0,
-        x: x,
-        y: y
-      }, propsLabel, {
-        className: classNames([staticClassName('RoundMeter', theme) && ['onesy-RoundMeter-label'], other__1?.className, textProps?.className, LabelProps?.className, classes.label])
-      }), value_1);
-    }));
-  }), childrenPosition === 'post' && children_)));
-});
+  }, other), {}, {
+    children: [additional, /*#__PURE__*/_jsx(Surface, {
+      tonal: tonal,
+      color: color,
+      children: ({
+        color: color_,
+        backgroundColor
+      }) => /*#__PURE__*/_jsxs("svg", _objectSpread(_objectSpread({
+        xmlns: "http://www.w3.org/2000/svg",
+        viewBox: `0 ${yViewBox} ${width || 0} ${height || 0}`
+      }, SvgProps), {}, {
+        className: classNames([staticClassName('RoundMeter', theme) && ['onesy-RoundMeter-svg'], SvgProps?.className, classes.svg]),
+        children: [childrenPosition === 'pre' && children_, background && /*#__PURE__*/_jsx("path", _objectSpread(_objectSpread({
+          d: pathBackground,
+          fill: backgroundColor,
+          stroke: "none"
+        }, pathProps), BackgroundProps)), border && /*#__PURE__*/_jsx("path", _objectSpread(_objectSpread({
+          d: pathBorder,
+          fill: "none",
+          stroke: color_,
+          strokeWidth: boundaryWidth
+        }, pathProps), BorderProps)), arcsVisible && /*#__PURE__*/_jsx("g", {
+          className: classNames([staticClassName('RoundMeter', theme) && ['onesy-RoundMeter-arcs'], classes.arcs]),
+          children: arcs.map((item_1, index_2) => /*#__PURE__*/_jsx("path", _objectSpread(_objectSpread(_objectSpread({
+            d: item_1.d,
+            fill: "none",
+            stroke: color_,
+            strokeWidth: boundaryWidth,
+            strokeLinecap: lineCap
+          }, pathProps), ArcProps), ArcMainProps), index_2))
+        }), arcsVisible && arcProgress && /*#__PURE__*/_jsx("g", _objectSpread(_objectSpread({}, ArcsProgressProps), {}, {
+          className: classNames([staticClassName('RoundMeter', theme) && ['onesy-RoundMeter-arcs-progress'], ArcsProgressProps?.className, classes.arcs_progress]),
+          children: arcs.map((item_2, index_3) => /*#__PURE__*/_jsx("path", _objectSpread(_objectSpread(_objectSpread({
+            d: item_2.d,
+            fill: "none",
+            stroke: color_,
+            strokeWidth: boundaryWidth,
+            strokeLinecap: lineCap
+          }, pathProps), ArcProps), ArcProgressProps), index_3))
+        })), childrenPosition === 'pre-marks' && children_, marksVisible && !!marks_.length && marks.map((marksValue_0, index_4) => /*#__PURE__*/_jsx("g", {
+          className: classNames([staticClassName('RoundMeter', theme) && ['onesy-RoundMeter-marks'], classes.marks]),
+          children: marksValue_0.map((item_3, index_) => /*#__PURE__*/_jsx("path", _objectSpread(_objectSpread({
+            d: item_3.d,
+            fill: "none",
+            stroke: color_,
+            strokeWidth: item_3.width !== undefined ? item_3.width : markWidth,
+            strokeLinecap: lineCap
+          }, pathProps), MarkProps), index_))
+        }, index_4)), childrenPosition === 'pre-labels' && children_, labelsVisible && !!labels_.length && labels.map((labelsValue_0, index_5) => {
+          return /*#__PURE__*/_jsx("g", {
+            className: classNames([staticClassName('RoundMeter', theme) && ['onesy-RoundMeter-labels'], classes.labels]),
+            children: labelsValue_0.map((item_4, index__0) => {
+              const {
+                  x,
+                  y,
+                  value: value_1
+                } = item_4,
+                other__1 = _objectWithoutProperties(item_4, _excluded4);
+              const propsLabel = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, other__1), textProps), LabelProps), {}, {
+                style: _objectSpread(_objectSpread(_objectSpread({
+                  fill: color_
+                }, other__1.style), textProps?.style), LabelProps?.style)
+              });
+              if (is('function', renderLabel)) return renderLabel(x, y, value_1, propsLabel);
+              return /*#__PURE__*/_jsx("text", _objectSpread(_objectSpread({
+                x: x,
+                y: y
+              }, propsLabel), {}, {
+                className: classNames([staticClassName('RoundMeter', theme) && ['onesy-RoundMeter-label'], other__1?.className, textProps?.className, LabelProps?.className, classes.label]),
+                children: value_1
+              }), index__0);
+            })
+          }, index_5);
+        }), childrenPosition === 'post' && children_]
+      }))
+    })]
+  }));
+};
 RoundMeter.displayName = 'onesy-RoundMeter';
 export default RoundMeter;

package/esm/RoundProgress/RoundProgress.js

@@ -1,7 +1,6 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-const _excluded = ["tonal", "color", "size", "version", "value", "noShrink", "thickness", "rounded", "pathProps", "pathBackgroundProps", "className", "style", "children"];
+const _excluded = ["ref", "tonal", "color", "size", "version", "value", "noShrink", "thickness", "rounded", "pathProps", "pathBackgroundProps", "className", "style", "children"];
 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) { _defineProperty(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; }
 import { c as _c } from "react/compiler-runtime";
@@ -9,6 +8,7 @@ import React from 'react';
 import { is } from '@onesy/utils';
 import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
 import { staticClassName } from '../utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const noShrinkStrokeDashOffset = 194;
 const useStyle = styleMethod(theme => ({
   '@keyframes spin': {
@@ -152,11 +152,12 @@ const useStyle = styleMethod(theme => ({
 }), {
   name: 'onesy-RoundProgress'
 });
-const RoundProgress = /*#__PURE__*/React.forwardRef((props_, ref) => {
+const RoundProgress = props_ => {
   const $ = _c(3);
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyRoundProgress?.props?.default), props_);
   const {
+      ref,
       tonal: t0,
       color: t1,
       size: t2,
@@ -219,35 +220,38 @@ const RoundProgress = /*#__PURE__*/React.forwardRef((props_, ref) => {
   } else {
     t8 = $[2];
   }
-  return /*#__PURE__*/React.createElement("span", {
+  return /*#__PURE__*/_jsxs("span", {
     ref: ref,
-    className: t7
-  }, /*#__PURE__*/React.createElement("svg", _extends({
-    viewBox: "0 0 24 24",
-    className: t8,
-    style: _objectSpread(_objectSpread({}, styles.root), style)
-  }, other), /*#__PURE__*/React.createElement("circle", _extends({
-    fill: "none",
-    strokeWidth: thickness,
-    cx: "12",
-    cy: "12",
-    r: "10"
-  }, !rounded && {
-    strokeLinecap: "butt"
-  }, pathBackgroundProps, {
-    className: classNames([staticClassName("RoundedProgress", theme) && ["onesy-RoundedProgress-path-background"], pathBackgroundProps?.className, classes.pathBackground, classes[`path_${version}`]])
-  })), /*#__PURE__*/React.createElement("circle", _extends({
-    fill: "none",
-    strokeWidth: thickness,
-    cx: "12",
-    cy: "12",
-    r: "10"
-  }, !rounded && {
-    strokeLinecap: "butt"
-  }, pathProps, {
-    className: classNames([staticClassName("RoundedProgress", theme) && ["onesy-RoundedProgress-path"], pathProps?.className, classes.path, classes[`path_${version}`], noShrink && classes.path_indeterminate_noShrink]),
-    style: _objectSpread(_objectSpread({}, styles.circle), pathProps?.style)
-  }))), children);
-});
+    className: t7,
+    children: [/*#__PURE__*/_jsxs("svg", _objectSpread(_objectSpread({
+      viewBox: "0 0 24 24",
+      className: t8,
+      style: _objectSpread(_objectSpread({}, styles.root), style)
+    }, other), {}, {
+      children: [/*#__PURE__*/_jsx("circle", _objectSpread(_objectSpread(_objectSpread({
+        fill: "none",
+        strokeWidth: thickness,
+        cx: "12",
+        cy: "12",
+        r: "10"
+      }, !rounded && {
+        strokeLinecap: "butt"
+      }), pathBackgroundProps), {}, {
+        className: classNames([staticClassName("RoundedProgress", theme) && ["onesy-RoundedProgress-path-background"], pathBackgroundProps?.className, classes.pathBackground, classes[`path_${version}`]])
+      })), /*#__PURE__*/_jsx("circle", _objectSpread(_objectSpread(_objectSpread({
+        fill: "none",
+        strokeWidth: thickness,
+        cx: "12",
+        cy: "12",
+        r: "10"
+      }, !rounded && {
+        strokeLinecap: "butt"
+      }), pathProps), {}, {
+        className: classNames([staticClassName("RoundedProgress", theme) && ["onesy-RoundedProgress-path"], pathProps?.className, classes.path, classes[`path_${version}`], noShrink && classes.path_indeterminate_noShrink]),
+        style: _objectSpread(_objectSpread({}, styles.circle), pathProps?.style)
+      }))]
+    })), children]
+  });
+};
 RoundProgress.displayName = 'onesy-RoundProgress';
 export default RoundProgress;

package/esm/ScatterChart/ScatterChart.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 const _excluded = ["values", "className"];
@@ -11,13 +10,14 @@ import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-re
 import ChartElement from '../Chart';
 import ScatterChartItemElement from '../ScatterChartItem';
 import { staticClassName } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {}
 }), {
   name: 'onesy-ScatterChart'
 });
-const ScatterChart = /*#__PURE__*/React.forwardRef((props_, ref) => {
-  const $ = _c(7);
+const ScatterChart = props_ => {
+  const $ = _c(6);
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyScatterChart?.props?.default), props_);
   const Chart = theme?.elements?.Chart || ChartElement;
@@ -31,27 +31,25 @@ const ScatterChart = /*#__PURE__*/React.forwardRef((props_, ref) => {
     classes
   } = useStyle();
   const t0 = classNames([staticClassName("ScatterChart", theme) && ["onesy-ScatterChart-root"], className, classes.root]);
-  const t1 = is("array", values) && values.map((item, index) => /*#__PURE__*/React.createElement(ScatterChartItem, _extends({
-    key: index
-  }, item)));
+  const t1 = is("array", values) && values.map((item, index) => /*#__PURE__*/_jsx(ScatterChartItem, _objectSpread({}, item), index));
   let t2;
-  if ($[0] !== Chart || $[1] !== other || $[2] !== ref || $[3] !== t0 || $[4] !== t1 || $[5] !== values) {
-    t2 = /*#__PURE__*/React.createElement(Chart, _extends({
-      ref: ref,
+  if ($[0] !== Chart || $[1] !== other || $[2] !== t0 || $[3] !== t1 || $[4] !== values) {
+    t2 = /*#__PURE__*/_jsx(Chart, _objectSpread(_objectSpread({
       values: values,
       className: t0
-    }, other), t1);
+    }, other), {}, {
+      children: t1
+    }));
     $[0] = Chart;
     $[1] = other;
-    $[2] = ref;
-    $[3] = t0;
-    $[4] = t1;
-    $[5] = values;
-    $[6] = t2;
+    $[2] = t0;
+    $[3] = t1;
+    $[4] = values;
+    $[5] = t2;
   } else {
-    t2 = $[6];
+    t2 = $[5];
   }
   return t2;
-});
+};
 ScatterChart.displayName = 'onesy-ScatterChart';
 export default ScatterChart;

package/esm/ScatterChartItem/ScatterChartItem.js

@@ -1,4 +1,3 @@
-import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 const _excluded = ["tonal", "color", "name", "values", "refs", "rects", "updateDefs", "updateLegend", "minMax", "animate", "animateTimeout", "PathProps", "BackgroundProps", "BorderProps", "LegendItemProps", "className"];
@@ -12,6 +11,7 @@ import LineElement from '../Line';
 import TypeElement from '../Type';
 import useMediaQuery from '../useMediaQuery';
 import { staticClassName, valueBreakpoints } from '../utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {},
   legend_item: {
@@ -25,7 +25,7 @@ const useStyle = styleMethod(theme => ({
 }), {
   name: 'onesy-ScatterChartItem'
 });
-const ScatterChartItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
+const ScatterChartItem = props_ => {
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyScatterChartItem?.props?.default), props_);
   const Line = theme?.elements?.Line || LineElement;
@@ -85,20 +85,22 @@ const ScatterChartItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
   refs.animateTimeout.current = animateTimeout;
   refs.init.current = init;
   const LegendItem = () => {
-    return /*#__PURE__*/React.createElement(Line, _extends({
+    return /*#__PURE__*/_jsxs(Line, _objectSpread(_objectSpread({
       gap: 1,
       direction: "row",
       align: "center"
-    }, LegendItemProps, {
-      className: classNames([staticClassName('ScatterChartItem', theme) && ['onesy-ScatterChartItem-legend-item'], LegendItemProps?.className, classes.legend_item])
-    }), /*#__PURE__*/React.createElement("span", {
-      className: classNames([staticClassName('ScatterChartItem', theme) && ['onesy-ScatterChartItem-legend-icon'], classes.legend_icon]),
-      style: {
-        background: !refs.theme.current.palette.color[color] ? color : refs.theme.current.palette.color[color]['main']
-      }
-    }), /*#__PURE__*/React.createElement(Type, {
-      version: "b3"
-    }, name));
+    }, LegendItemProps), {}, {
+      className: classNames([staticClassName('ScatterChartItem', theme) && ['onesy-ScatterChartItem-legend-item'], LegendItemProps?.className, classes.legend_item]),
+      children: [/*#__PURE__*/_jsx("span", {
+        className: classNames([staticClassName('ScatterChartItem', theme) && ['onesy-ScatterChartItem-legend-icon'], classes.legend_icon]),
+        style: {
+          background: !refs.theme.current.palette.color[color] ? color : refs.theme.current.palette.color[color]['main']
+        }
+      }), /*#__PURE__*/_jsx(Type, {
+        version: "b3",
+        children: name
+      })]
+    }));
   };
   const make = () => {
     // Make values into x, y, coordinates
@@ -122,25 +124,25 @@ const ScatterChartItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
         values__.y = valueFromPercentageWithinRange(values__.y, 0, height);
         return [values__.x, height - values__.y].map(item_ => Math.abs(item_));
       });
-      const element = /*#__PURE__*/React.createElement("g", {
-        ref: refs.path
-      }, values_.map((item_0, index) => /*#__PURE__*/React.createElement(Path, _extends({
-        key: index,
-        cx: item_0[0],
-        cy: item_0[1],
-        r: 4,
-        fill: !refs.theme.current.palette.color[color] ? color : refs.theme.current.palette.color[color]['main'],
-        stroke: "none"
-      }, PathProps, {
-        Component: "circle",
-        style: _objectSpread(_objectSpread(_objectSpread({}, PathProps?.style), refs.animate.current && refs.init.current !== 'animated' && {
-          opacity: 0,
-          transform: 'scale(0)'
-        }), {}, {
-          transformBox: 'fill-box',
-          transformOrigin: 'center'
-        }, refs.pathStyle.current)
-      }))));
+      const element = /*#__PURE__*/_jsx("g", {
+        ref: refs.path,
+        children: values_.map((item_0, index) => /*#__PURE__*/_jsx(Path, _objectSpread(_objectSpread({
+          cx: item_0[0],
+          cy: item_0[1],
+          r: 4,
+          fill: !refs.theme.current.palette.color[color] ? color : refs.theme.current.palette.color[color]['main'],
+          stroke: "none"
+        }, PathProps), {}, {
+          Component: "circle",
+          style: _objectSpread(_objectSpread(_objectSpread({}, PathProps?.style), refs.animate.current && refs.init.current !== 'animated' && {
+            opacity: 0,
+            transform: 'scale(0)'
+          }), {}, {
+            transformBox: 'fill-box',
+            transformOrigin: 'center'
+          }, refs.pathStyle.current)
+        }), index))
+      });
 
       // Legend item
       if (is('function', updateLegend)) {
@@ -152,7 +154,7 @@ const ScatterChartItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
                 name,
                 values
               },
-              element: /*#__PURE__*/React.createElement(LegendItem, null)
+              element: /*#__PURE__*/_jsx(LegendItem, {})
             });
           }
           return newValues;
@@ -192,6 +194,6 @@ const ScatterChartItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
   return value && /*#__PURE__*/React.cloneElement(value, _objectSpread({
     className
   }, other));
-});
+};
 ScatterChartItem.displayName = 'onesy-ScatterChartItem';
 export default ScatterChartItem;