@onesy/ui-react 1.0.172 → 1.0.174

package/esm/Accordion/Accordion.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", "elevation", "primary", "secondary", "start", "end", "openDefault", "open", "onChange", "noBackground", "noExpandButton", "expandedMarginVertical", "expandedHeaderPaddingVertical", "headerPaddingVertical", "headerPaddingHorizontal", "mainPaddingVertical", "mainPaddingHorizontal", "noExpand", "noTransition", "disabled", "ExpandIcon", "TransitionComponent", "Component", "ExpandProps", "TransitionComponentProps", "WrapperHeaderProps", "HeaderProps", "IconButtonProps", "StartProps", "EndProps", "className", "children"];
+const _excluded = ["ref", "tonal", "color", "elevation", "primary", "secondary", "start", "end", "openDefault", "open", "onChange", "noBackground", "noExpandButton", "expandedMarginVertical", "expandedHeaderPaddingVertical", "headerPaddingVertical", "headerPaddingHorizontal", "mainPaddingVertical", "mainPaddingHorizontal", "noExpand", "noTransition", "disabled", "ExpandIcon", "TransitionComponent", "Component", "ExpandProps", "TransitionComponentProps", "WrapperHeaderProps", "HeaderProps", "IconButtonProps", "StartProps", "EndProps", "className", "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 React from 'react';
@@ -16,6 +15,7 @@ import GridElement from '../Grid';
 import LineElement from '../Line';
 import TypeElement from '../Type';
 import { staticClassName } from '../utils';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {
     position: 'relative',
@@ -145,7 +145,7 @@ const AccordionDelays = {
     enter: 70
   }
 };
-const Accordion = /*#__PURE__*/React.forwardRef((props_, ref) => {
+const Accordion = props_ => {
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyAccordion?.props?.default), props_);
 
@@ -162,6 +162,7 @@ const Accordion = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const Line = theme?.elements?.Line || LineElement;
   const Type = theme?.elements?.Type || TypeElement;
   const {
+      ref,
       tonal = true,
       color = 'primary',
       elevation = 0,
@@ -234,10 +235,11 @@ const Accordion = /*#__PURE__*/React.forwardRef((props_, ref) => {
     TransitionComponent = React.Fragment;
     TransitionComponentProps = {};
   }
-  const main = /*#__PURE__*/React.createElement(Line, {
-    className: classNames([staticClassName('Accordion', theme) && ['onesy-Accordion-main'], classes.main, classes[`main_padding_vertical_${mainPaddingVertical}`], classes[`main_padding_horizontal_${mainPaddingHorizontal}`]])
-  }, children);
-  return /*#__PURE__*/React.createElement(Surface, _extends({
+  const main = /*#__PURE__*/_jsx(Line, {
+    className: classNames([staticClassName('Accordion', theme) && ['onesy-Accordion-main'], classes.main, classes[`main_padding_vertical_${mainPaddingVertical}`], classes[`main_padding_horizontal_${mainPaddingHorizontal}`]]),
+    children: children
+  });
+  return /*#__PURE__*/_jsxs(Surface, _objectSpread(_objectSpread({
     ref: item => {
       if (ref) {
         if (is('function', ref)) ref(item);else if (ref?.current) ref.current = item;
@@ -250,72 +252,89 @@ const Accordion = /*#__PURE__*/React.forwardRef((props_, ref) => {
     elevation: elevation,
     Component: Component,
     className: classNames([staticClassName('Accordion', theme) && ['onesy-Accordion-root', disabled && `onesy-Accordion-disabled`], className, classes.root, open && classes[`expanded_margin_vertical_${expandedMarginVertical}`], noBackground && classes.noBackground, disabled && classes.disabled])
-  }, other), /*#__PURE__*/React.createElement(Line, _extends({
-    gap: 3,
-    direction: "row",
-    align: "center",
-    onClick: onClick
-  }, WrapperHeaderProps, {
-    className: classNames([staticClassName('Accordion', theme) && ['onesy-Accordion-wrapper-header'], WrapperHeaderProps?.className, classes.wrapperHeader, classes[`header_padding_vertical_${headerPaddingVertical}`], classes[`header_padding_horizontal_${headerPaddingHorizontal}`], open && [classes[`expanded_header_padding_vertical_${expandedHeaderPaddingVertical}`]]])
-  }), start, /*#__PURE__*/React.createElement(Grid, _extends({
-    gap: {
-      default: 3,
-      700: 0.5
-    },
-    direction: {
-      default: 'row',
-      700: 'column'
-    }
-  }, HeaderProps, {
-    className: classNames([staticClassName('Accordion', theme) && ['onesy-Accordion-header'], HeaderProps?.className, classes.header])
-  }), /*#__PURE__*/React.createElement(Grid, {
-    values: {
-      sm: !secondary ? 12 : 3
-    }
-  }, is('simple', primary) ? /*#__PURE__*/React.createElement(Type, {
-    version: "b1",
-    className: classNames([staticClassName('Accordion', theme) && ['onesy-Accordion-primary'], classes.primary])
-  }, primary) : React.Children.toArray(primary).filter(Boolean).map((item_0, index) => {
-    if (is('simple', item_0)) return item_0;
-    return /*#__PURE__*/React.cloneElement(item_0, {
-      key: index
-    });
-  })), secondary && /*#__PURE__*/React.createElement(Grid, {
-    values: {
-      sm: 7
-    }
-  }, is('simple', secondary) ? /*#__PURE__*/React.createElement(Type, {
-    version: "b1",
-    className: classNames([staticClassName('Accordion', theme) && ['onesy-Accordion-secondary'], classes.secondary])
-  }, secondary) : React.Children.toArray(secondary).filter(Boolean).map((item_1, index_0) => {
-    if (is('simple', item_1)) return item_1;
-    return /*#__PURE__*/React.cloneElement(item_1, {
-      key: index_0
-    });
-  }))), /*#__PURE__*/React.createElement(Line, _extends({
-    gap: 0,
-    direction: "row",
-    align: "center"
-  }, EndProps), end, !noExpandButton && /*#__PURE__*/React.createElement(IconButton, _extends({
-    color: "inherit",
-    "aria-label": primary || secondary,
-    "aria-controls": refs.ids.data,
-    "aria-expanded": open,
-    id: refs.ids.button
-  }, IconButtonProps, {
-    className: classNames([staticClassName('Accordion', theme) && ['onesy-Accordion-icon-button'], IconButtonProps?.className, classes.iconButton])
-  }), /*#__PURE__*/React.createElement(ExpandIcon, {
-    className: classNames([classes.icon, open && classes.icon_open])
-  })))), noExpand ? /*#__PURE__*/React.createElement(React.Fragment, null, open && main) : /*#__PURE__*/React.createElement(Expand, _extends({
-    in: open,
-    parent: parent,
-    onTransition: (element, status) => {
-      refs.expandInProgress.current = !['appended', 'entered', 'exited', 'removed'].includes(status);
-    },
-    role: "region",
-    "aria-labelledby": refs.ids.button,
-    id: refs.ids.data
-  }, ExpandProps), /*#__PURE__*/React.createElement(TransitionComponent, TransitionComponentProps, main)));
-});
+  }, other), {}, {
+    children: [/*#__PURE__*/_jsxs(Line, _objectSpread(_objectSpread({
+      gap: 3,
+      direction: "row",
+      align: "center",
+      onClick: onClick
+    }, WrapperHeaderProps), {}, {
+      className: classNames([staticClassName('Accordion', theme) && ['onesy-Accordion-wrapper-header'], WrapperHeaderProps?.className, classes.wrapperHeader, classes[`header_padding_vertical_${headerPaddingVertical}`], classes[`header_padding_horizontal_${headerPaddingHorizontal}`], open && [classes[`expanded_header_padding_vertical_${expandedHeaderPaddingVertical}`]]]),
+      children: [start, /*#__PURE__*/_jsxs(Grid, _objectSpread(_objectSpread({
+        gap: {
+          default: 3,
+          700: 0.5
+        },
+        direction: {
+          default: 'row',
+          700: 'column'
+        }
+      }, HeaderProps), {}, {
+        className: classNames([staticClassName('Accordion', theme) && ['onesy-Accordion-header'], HeaderProps?.className, classes.header]),
+        children: [/*#__PURE__*/_jsx(Grid, {
+          values: {
+            sm: !secondary ? 12 : 3
+          },
+          children: is('simple', primary) ? /*#__PURE__*/_jsx(Type, {
+            version: "b1",
+            className: classNames([staticClassName('Accordion', theme) && ['onesy-Accordion-primary'], classes.primary]),
+            children: primary
+          }) : React.Children.toArray(primary).filter(Boolean).map((item_0, index) => {
+            if (is('simple', item_0)) return item_0;
+            return /*#__PURE__*/React.cloneElement(item_0, {
+              key: index
+            });
+          })
+        }), secondary && /*#__PURE__*/_jsx(Grid, {
+          values: {
+            sm: 7
+          },
+          children: is('simple', secondary) ? /*#__PURE__*/_jsx(Type, {
+            version: "b1",
+            className: classNames([staticClassName('Accordion', theme) && ['onesy-Accordion-secondary'], classes.secondary]),
+            children: secondary
+          }) : React.Children.toArray(secondary).filter(Boolean).map((item_1, index_0) => {
+            if (is('simple', item_1)) return item_1;
+            return /*#__PURE__*/React.cloneElement(item_1, {
+              key: index_0
+            });
+          })
+        })]
+      })), /*#__PURE__*/_jsxs(Line, _objectSpread(_objectSpread({
+        gap: 0,
+        direction: "row",
+        align: "center"
+      }, EndProps), {}, {
+        children: [end, !noExpandButton && /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
+          color: "inherit",
+          "aria-label": primary || secondary,
+          "aria-controls": refs.ids.data,
+          "aria-expanded": open,
+          id: refs.ids.button
+        }, IconButtonProps), {}, {
+          className: classNames([staticClassName('Accordion', theme) && ['onesy-Accordion-icon-button'], IconButtonProps?.className, classes.iconButton]),
+          children: /*#__PURE__*/_jsx(ExpandIcon, {
+            className: classNames([classes.icon, open && classes.icon_open])
+          })
+        }))]
+      }))]
+    })), noExpand ? /*#__PURE__*/_jsx(_Fragment, {
+      children: open && main
+    }) : /*#__PURE__*/_jsx(Expand, _objectSpread(_objectSpread({
+      in: open,
+      parent: parent,
+      onTransition: (element, status) => {
+        refs.expandInProgress.current = !['appended', 'entered', 'exited', 'removed'].includes(status);
+      },
+      role: "region",
+      "aria-labelledby": refs.ids.button,
+      id: refs.ids.data
+    }, ExpandProps), {}, {
+      children: /*#__PURE__*/_jsx(TransitionComponent, _objectSpread(_objectSpread({}, TransitionComponentProps), {}, {
+        children: main
+      }))
+    }))]
+  }));
+};
 Accordion.displayName = 'onesy-Accordion';
 export default Accordion;

package/esm/AdvancedTextField/AdvancedTextField.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 = ["valueDefault", "value", "validate", "prefix", "mask", "maskProactive", "thousand", "thousandSeparator", "onChange", "TextFieldProps", "className"];
+const _excluded = ["ref", "valueDefault", "value", "validate", "prefix", "mask", "maskProactive", "thousand", "thousandSeparator", "onChange", "TextFieldProps", "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) { _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 React from 'react';
@@ -9,16 +8,18 @@ import { is, numberWithCommas, Try } from '@onesy/utils';
 import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
 import TextFieldElement from '../TextField';
 import { staticClassName } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {}
 }), {
   name: 'onesy-AdvancedTextField'
 });
-const AdvancedTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
+const AdvancedTextField = props_ => {
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyAdvancedTextField?.props?.default), props_);
   const TextField = theme?.elements?.TextField || TextFieldElement;
   const {
+      ref,
       valueDefault,
       value: value_,
       validate,
@@ -141,7 +142,7 @@ const AdvancedTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
     if (!props.hasOwnProperty('value')) setValue(valueNew);
     if (is('function', onChange_)) onChange_(valueNew);
   };
-  return /*#__PURE__*/React.createElement(TextField, _extends({
+  return /*#__PURE__*/_jsx(TextField, _objectSpread(_objectSpread({
     ref: item_1 => {
       if (ref) {
         if (is('function', ref)) ref(item_1);else ref.current = item_1;
@@ -152,7 +153,7 @@ const AdvancedTextField = /*#__PURE__*/React.forwardRef((props_, ref) => {
     onChange: onChange,
     controlled: true,
     className: classNames([staticClassName('AdvancedTextField', theme) && ['onesy-AdvancedTextField-root'], className, classes.root])
-  }, other, TextFieldProps));
-});
+  }, other), TextFieldProps));
+};
 AdvancedTextField.displayName = 'onesy-AdvancedTextField';
 export default AdvancedTextField;

package/esm/Append/Append.js

@@ -5,6 +5,7 @@ import React from 'react';
 import { is, isEnvironment, element as element_, clamp, wait } from '@onesy/utils';
 import { useOnesyTheme } from '@onesy/style-react';
 import PortalElement from '../Portal';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const valuesDefault = {
   x: 0,
   y: 0,
@@ -468,26 +469,30 @@ const Append = props_ => {
     rootDocumentElement.body.style.position = rootDocumentElement.body.style.position || 'relative';
     rootDocumentElement.body.style.margin = rootDocumentElement.body.style.margin || '0';
   }
-  return /*#__PURE__*/React.createElement(React.Fragment, null, children && /*#__PURE__*/React.cloneElement(children, {
-    ref: item_0 => {
-      if (children.ref) {
-        if (is('function', children.ref)) children.ref(item_0);else children.ref.current = item_0;
+  return /*#__PURE__*/_jsxs(React.Fragment, {
+    children: [children && /*#__PURE__*/React.cloneElement(children, {
+      ref: item_0 => {
+        if (children.ref) {
+          if (is('function', children.ref)) children.ref(item_0);else children.ref.current = item_0;
+        }
+        refs.root.current = item_0;
       }
-      refs.root.current = item_0;
-    }
-  }), open && (children || anchorElement || anchor) && /*#__PURE__*/React.createElement(PortalComponent, PortalComponentProps, is('function', element) ? element({
-    ref: refs.element,
-    values,
-    style
-  }) : /*#__PURE__*/React.cloneElement(element, {
-    ref: item_1 => {
-      if (element?.ref) {
-        if (is('function', element.ref)) element.ref(item_1);else element.ref.current = item_1;
-      }
-      refs.element.current = item_1;
-    },
-    style
-  })));
+    }), open && (children || anchorElement || anchor) && /*#__PURE__*/_jsx(PortalComponent, _objectSpread(_objectSpread({}, PortalComponentProps), {}, {
+      children: is('function', element) ? element({
+        ref: refs.element,
+        values,
+        style
+      }) : /*#__PURE__*/React.cloneElement(element, {
+        ref: item_1 => {
+          if (element?.ref) {
+            if (is('function', element.ref)) element.ref(item_1);else element.ref.current = item_1;
+          }
+          refs.element.current = item_1;
+        },
+        style
+      })
+    }))]
+  });
 };
 Append.displayName = 'onesy-Append';
 export default Append;

package/esm/AreaChart/AreaChart.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 AreaChartItemElement from '../AreaChartItem';
 import { staticClassName } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {}
 }), {
   name: 'onesy-AreaChart'
 });
-const AreaChart = /*#__PURE__*/React.forwardRef((props_, ref) => {
-  const $ = _c(7);
+const AreaChart = props_ => {
+  const $ = _c(6);
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyAreaChart?.props?.default), props_);
   const Chart = theme?.elements?.Chart || ChartElement;
@@ -31,27 +31,25 @@ const AreaChart = /*#__PURE__*/React.forwardRef((props_, ref) => {
     classes
   } = useStyle();
   const t0 = classNames([staticClassName("AreaChart", theme) && ["onesy-AreaChart-root"], className, classes.root]);
-  const t1 = is("array", values) && values.map((item, index) => /*#__PURE__*/React.createElement(AreaChartItem, _extends({
-    key: index
-  }, item)));
+  const t1 = is("array", values) && values.map((item, index) => /*#__PURE__*/_jsx(AreaChartItem, _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;
-});
+};
 AreaChart.displayName = 'onesy-AreaChart';
 export default AreaChart;

package/esm/AreaChartItem/AreaChartItem.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", "smooth", "smoothRatio", "linearGradient", "PathProps", "BackgroundProps", "BorderProps", "LegendItemProps", "className"];
@@ -12,6 +11,7 @@ import LineElement from '../Line';
 import TypeElement from '../Type';
 import useMediaQuery from '../useMediaQuery';
 import { controlPoint, staticClassName, valueBreakpoints } from '../utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {},
   legend_item: {
@@ -38,7 +38,7 @@ const useStyle = styleMethod(theme => ({
 }), {
   name: 'onesy-AreaChartItem'
 });
-const AreaChartItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
+const AreaChartItem = props_ => {
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyAreaChartItem?.props?.default), props_);
   const Path = theme?.elements?.Path || PathElement;
@@ -104,37 +104,40 @@ const AreaChartItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
   refs.animateTimeout.current = animateTimeout;
   refs.init.current = init;
   const LegendItem = legendItemProps => {
-    return /*#__PURE__*/React.createElement(Line, _extends({
+    return /*#__PURE__*/_jsxs(Line, _objectSpread(_objectSpread(_objectSpread({
       gap: 1,
       direction: "row",
       align: "center"
-    }, legendItemProps, LegendItemProps, {
-      className: classNames([staticClassName('AreaChartItem', theme) && ['onesy-AreaChartItem-legend-item'], legendItemProps?.className, LegendItemProps?.className, classes.legend_item])
-    }), /*#__PURE__*/React.createElement("span", {
-      className: classNames([staticClassName('AreaChartItem', theme) && ['onesy-AreaChartItem-legend-icon'], classes.legend_icon]),
-      style: {
-        color: !refs.theme.current.palette.color[color] ? color : refs.theme.current.palette.color[color].main
-      }
-    }), /*#__PURE__*/React.createElement(Type, {
-      version: "b3"
-    }, name));
+    }, legendItemProps), LegendItemProps), {}, {
+      className: classNames([staticClassName('AreaChartItem', theme) && ['onesy-AreaChartItem-legend-item'], legendItemProps?.className, LegendItemProps?.className, classes.legend_item]),
+      children: [/*#__PURE__*/_jsx("span", {
+        className: classNames([staticClassName('AreaChartItem', theme) && ['onesy-AreaChartItem-legend-icon'], classes.legend_icon]),
+        style: {
+          color: !refs.theme.current.palette.color[color] ? color : refs.theme.current.palette.color[color].main
+        }
+      }), /*#__PURE__*/_jsx(Type, {
+        version: "b3",
+        children: name
+      })]
+    }));
   };
   const LinearGradient = () => {
-    return /*#__PURE__*/React.createElement("linearGradient", {
+    return /*#__PURE__*/_jsxs("linearGradient", {
       id: `areaChartItem_id_${name}`,
       x1: "0%",
       x2: "0%",
       y1: "0%",
-      y2: "100%"
-    }, /*#__PURE__*/React.createElement("stop", {
-      offset: "0%",
-      stopColor: !refs.theme.current.palette.color[color] ? color : refs.theme.current.palette.color[color]['main'],
-      stopOpacity: "0.54"
-    }), /*#__PURE__*/React.createElement("stop", {
-      offset: "74%",
-      stopColor: refs.theme.current.palette.background.default.primary,
-      stopOpacity: "0"
-    }));
+      y2: "100%",
+      children: [/*#__PURE__*/_jsx("stop", {
+        offset: "0%",
+        stopColor: !refs.theme.current.palette.color[color] ? color : refs.theme.current.palette.color[color]['main'],
+        stopOpacity: "0.54"
+      }), /*#__PURE__*/_jsx("stop", {
+        offset: "74%",
+        stopColor: refs.theme.current.palette.background.default.primary,
+        stopOpacity: "0"
+      })]
+    });
   };
   const make = () => {
     // Make values into x, y, coordinates
@@ -202,45 +205,47 @@ const AreaChartItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
         }, '');
         d.background += `L ${lastX} ${height} Z`;
       }
-      const element = /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement(Path, _extends({
-        ref: refs.pathBackground,
-        d: d.background,
-        fill: linearGradient ? `url('#areaChartItem_id_${name}` : refs.theme.current.methods.palette.color.colorToRgb(!refs.theme.current.palette.color[color] ? color : refs.theme.current.palette.color[color].main, 0.14),
-        stroke: "none"
-      }, PathProps, BackgroundProps, {
-        style: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, PathProps?.style), BackgroundProps?.style), {}, {
-          transition: theme.methods.transitions.make('opacity', {
-            duration: 2400,
-            timing_function: 'decelerated'
-          })
-        }, refs.animate.current && refs.init.current !== 'animated' && {
-          opacity: 0
-        }), refs.animate.current && refs.init.current === 'animated' && {
-          opacity: 1
-        })
-      })), /*#__PURE__*/React.createElement(Path, _extends({
-        ref: refs.path,
-        d: d.border,
-        fill: "none",
-        stroke: !refs.theme.current.palette.color[color] ? color : refs.theme.current.palette.color[color].main,
-        strokeWidth: "2px"
-      }, PathProps, BorderProps, {
-        style: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, PathProps?.style), BorderProps?.style), {}, {
-          transition: theme.methods.transitions.make('stroke-dashoffset', {
-            duration: 2400,
-            timing_function: 'decelerated'
+      const element = /*#__PURE__*/_jsxs("g", {
+        children: [/*#__PURE__*/_jsx(Path, _objectSpread(_objectSpread(_objectSpread({
+          ref: refs.pathBackground,
+          d: d.background,
+          fill: linearGradient ? `url('#areaChartItem_id_${name}` : refs.theme.current.methods.palette.color.colorToRgb(!refs.theme.current.palette.color[color] ? color : refs.theme.current.palette.color[color].main, 0.14),
+          stroke: "none"
+        }, PathProps), BackgroundProps), {}, {
+          style: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, PathProps?.style), BackgroundProps?.style), {}, {
+            transition: theme.methods.transitions.make('opacity', {
+              duration: 2400,
+              timing_function: 'decelerated'
+            })
+          }, refs.animate.current && refs.init.current !== 'animated' && {
+            opacity: 0
+          }), refs.animate.current && refs.init.current === 'animated' && {
+            opacity: 1
           })
-        }, refs.animate.current && refs.init.current !== 'animated' && {
-          opacity: 0
-        }), refs.pathStyle.current)
-      })));
+        })), /*#__PURE__*/_jsx(Path, _objectSpread(_objectSpread(_objectSpread({
+          ref: refs.path,
+          d: d.border,
+          fill: "none",
+          stroke: !refs.theme.current.palette.color[color] ? color : refs.theme.current.palette.color[color].main,
+          strokeWidth: "2px"
+        }, PathProps), BorderProps), {}, {
+          style: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, PathProps?.style), BorderProps?.style), {}, {
+            transition: theme.methods.transitions.make('stroke-dashoffset', {
+              duration: 2400,
+              timing_function: 'decelerated'
+            })
+          }, refs.animate.current && refs.init.current !== 'animated' && {
+            opacity: 0
+          }), refs.pathStyle.current)
+        }))]
+      });
 
       // Defs
       if (refs_.defs) {
         const linearGradientElement = refs_.defs.querySelector(`#areaChartItem_id_${name}`);
         if (!linearGradientElement) {
           updateDefs(previous => {
-            return [...(previous || []), /*#__PURE__*/React.createElement(LinearGradient, null)];
+            return [...(previous || []), /*#__PURE__*/_jsx(LinearGradient, {})];
           });
         } else {
           linearGradientElement.children[0].setAttribute('stop-color', !refs.theme.current.palette.color[color] ? color : refs.theme.current.palette.color[color]['main']);
@@ -258,7 +263,7 @@ const AreaChartItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
                 name,
                 values
               },
-              element: /*#__PURE__*/React.createElement(LegendItem, null)
+              element: /*#__PURE__*/_jsx(LegendItem, {})
             });
           }
           return newValues;
@@ -298,7 +303,7 @@ const AreaChartItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
   return value && /*#__PURE__*/React.cloneElement(value, _objectSpread({
     className
   }, other));
-});
+};
 
 // Parts of the logic done thanks to
 // https://francoisromain.medium.com/smooth-a-svg-path-with-cubic-bezier-curves-e37b49d46c74