@onesy/ui-react 1.0.171 → 1.0.173

package/esm/PageTransition/PageTransition.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 = ["add", "classNames", "duration", "Component", "className", "children"];
@@ -10,6 +9,7 @@ import { hash } from '@onesy/utils';
 import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
 import LineElement from '../Line';
 import { staticClassName } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   '@keyframes fadeIn': {
     from: {
@@ -37,7 +37,7 @@ const useStyle = styleMethod(theme => ({
 }), {
   name: 'onesyTransition'
 });
-const PageTransition = /*#__PURE__*/React.forwardRef((props_, ref) => {
+const PageTransition = props_ => {
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyPageTransition?.props?.default), props_);
   const Line = theme?.elements?.Line || LineElement;
@@ -88,8 +88,7 @@ const PageTransition = /*#__PURE__*/React.forwardRef((props_, ref) => {
   React.useEffect(() => {
     onUpdate();
   }, [location, locationUsed]);
-  return /*#__PURE__*/React.createElement(Line, _extends({
-    ref: ref,
+  return /*#__PURE__*/_jsx(Line, _objectSpread(_objectSpread({
     direction: "column",
     align: "unset",
     justify: "unset",
@@ -97,9 +96,11 @@ const PageTransition = /*#__PURE__*/React.forwardRef((props_, ref) => {
     fullWidth: true,
     Component: Component,
     className: classNames([staticClassName('PageTransition', theme) && [`onesy-PageTransition-root`, `onesy-PageTransition-transition-${transition}`], className, classes.root, classNamesToUse[transition]])
-  }, other), /*#__PURE__*/React.cloneElement(children, {
-    location: locationUsed
+  }, other), {}, {
+    children: /*#__PURE__*/React.cloneElement(children, {
+      location: locationUsed
+    })
   }));
-});
+};
 PageTransition.displayName = 'onesy-PageTransition';
 export default PageTransition;

package/esm/Pagination/Pagination.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", "version", "elevation", "size", "value", "valueDefault", "onChange", "total", "boundary", "middle", "first", "before", "next", "last", "renderItem", "disableSelected", "disabled", "IconFirst", "IconBefore", "IconNext", "IconLast", "Component", "className", "children"];
@@ -17,6 +16,7 @@ import LineElement from '../Line';
 import IconButtonElement from '../IconButton';
 import PaginationItemElement from '../PaginationItem';
 import { staticClassName } from '../utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {},
   dots: {
@@ -35,8 +35,8 @@ const useStyle = styleMethod(theme => ({
 }), {
   name: 'onesy-Pagination'
 });
-const Pagination = /*#__PURE__*/React.forwardRef((props_, ref) => {
-  const $ = _c(13);
+const Pagination = props_ => {
+  const $ = _c(12);
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyPagination?.props?.default), props_);
   const Line = theme?.elements?.Line || LineElement;
@@ -118,12 +118,13 @@ const Pagination = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const values = pagination(value, total, boundary, middle);
   const renderItem = is("function", renderItem_) ? renderItem_ : (value___0, item) => {
     if (is("string", item)) {
-      return /*#__PURE__*/React.createElement(Type, {
+      return /*#__PURE__*/_jsx(Type, {
         version: props.size === "large" ? "b1" : props.size === "small" ? "b3" : "b2",
-        className: classNames([staticClassName("Pagination", theme) && ["onesy-Pagination-dots"], classes.dots, classes[`dots_size_${size}`]])
-      }, item);
+        className: classNames([staticClassName("Pagination", theme) && ["onesy-Pagination-dots"], classes.dots, classes[`dots_size_${size}`]]),
+        children: item
+      });
     }
-    return /*#__PURE__*/React.createElement(PaginationItem, {
+    return /*#__PURE__*/_jsx(PaginationItem, {
       tonal: tonal,
       color: color,
       version: version,
@@ -131,8 +132,9 @@ const Pagination = /*#__PURE__*/React.forwardRef((props_, ref) => {
       size: size,
       onClick: () => onChange(item),
       selected: value___0 === item,
-      disabled: disabled || value___0 === item && disableSelected
-    }, item);
+      disabled: disabled || value___0 === item && disableSelected,
+      children: item
+    });
   };
   const IconButtonProps = {
     tonal,
@@ -147,27 +149,34 @@ const Pagination = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const t23 = "flex-start";
   const t24 = "center";
   const t25 = classNames([staticClassName("Pagination", theme) && ["onesy-Pagination-root", `onesy-Pagination-version-${version}`, `onesy-Pagination-size-${size}`], className, classes.root]);
-  const t26 = first && /*#__PURE__*/React.createElement(IconButton, _extends({
+  const t26 = first && /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
     onClick: () => onChange(1),
     disabled: value === 1
-  }, IconButtonProps), /*#__PURE__*/React.createElement(IconFirst, null));
-  const t27 = before && /*#__PURE__*/React.createElement(IconButton, _extends({
+  }, IconButtonProps), {}, {
+    children: /*#__PURE__*/_jsx(IconFirst, {})
+  }));
+  const t27 = before && /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
     onClick: () => onChange(clamp(value - 1, 1, total)),
     disabled: value === 1
-  }, IconButtonProps), /*#__PURE__*/React.createElement(IconBefore, null));
+  }, IconButtonProps), {}, {
+    children: /*#__PURE__*/_jsx(IconBefore, {})
+  }));
   const t28 = values.map((item_0, index) => renderItem(value, item_0, index)).map(_temp);
-  const t29 = next && /*#__PURE__*/React.createElement(IconButton, _extends({
+  const t29 = next && /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
     onClick: () => onChange(clamp(value + 1, 1, total)),
     disabled: value === total
-  }, IconButtonProps), /*#__PURE__*/React.createElement(IconNext, null));
-  const t30 = last && /*#__PURE__*/React.createElement(IconButton, _extends({
+  }, IconButtonProps), {}, {
+    children: /*#__PURE__*/_jsx(IconNext, {})
+  }));
+  const t30 = last && /*#__PURE__*/_jsx(IconButton, _objectSpread(_objectSpread({
     onClick: () => onChange(total),
     disabled: value === total
-  }, IconButtonProps), /*#__PURE__*/React.createElement(IconLast, null));
+  }, IconButtonProps), {}, {
+    children: /*#__PURE__*/_jsx(IconLast, {})
+  }));
   let t31;
-  if ($[2] !== Component || $[3] !== Line || $[4] !== other || $[5] !== ref || $[6] !== t25 || $[7] !== t26 || $[8] !== t27 || $[9] !== t28 || $[10] !== t29 || $[11] !== t30) {
-    t31 = /*#__PURE__*/React.createElement(Line, _extends({
-      ref: ref,
+  if ($[2] !== Component || $[3] !== Line || $[4] !== other || $[5] !== t25 || $[6] !== t26 || $[7] !== t27 || $[8] !== t28 || $[9] !== t29 || $[10] !== t30) {
+    t31 = /*#__PURE__*/_jsxs(Line, _objectSpread(_objectSpread({
       gap: t20,
       wrap: t21,
       direction: t22,
@@ -175,23 +184,24 @@ const Pagination = /*#__PURE__*/React.forwardRef((props_, ref) => {
       align: t24,
       Component: Component,
       className: t25
-    }, other), t26, t27, t28, t29, t30);
+    }, other), {}, {
+      children: [t26, t27, t28, t29, t30]
+    }));
     $[2] = Component;
     $[3] = Line;
     $[4] = other;
-    $[5] = ref;
-    $[6] = t25;
-    $[7] = t26;
-    $[8] = t27;
-    $[9] = t28;
-    $[10] = t29;
-    $[11] = t30;
-    $[12] = t31;
+    $[5] = t25;
+    $[6] = t26;
+    $[7] = t27;
+    $[8] = t28;
+    $[9] = t29;
+    $[10] = t30;
+    $[11] = t31;
   } else {
-    t31 = $[12];
+    t31 = $[11];
   }
   return t31;
-});
+};
 Pagination.displayName = 'onesy-Pagination';
 export default Pagination;
 function _temp(item_1, index_0) {

package/esm/PaginationItem/PaginationItem.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", "version", "elevation", "size", "TypeProps", "className", "children"];
@@ -11,6 +10,7 @@ import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-re
 import TypeElement from '../Type';
 import ButtonElement from '../Button';
 import { staticClassName } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {},
   size_small: {
@@ -37,8 +37,8 @@ const useStyle = styleMethod(theme => ({
 }), {
   name: 'onesy-PaginationItem'
 });
-const PaginationItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
-  const $ = _c(11);
+const PaginationItem = props_ => {
+  const $ = _c(10);
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyPaginationItem?.props?.default), props_);
   const Button = theme?.elements?.Button || ButtonElement;
@@ -65,13 +65,14 @@ const PaginationItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const t5 = true;
   const t6 = true;
   const t7 = classNames([staticClassName("PaginationItem", theme) && ["onesy-PaginationItem-root", `onesy-PaginationItem-version-${version}`, `onesy-PaginationItem-size-${size}`], className, classes.root, classes[`size_${size}`]]);
-  const t8 = is("simple", children) ? /*#__PURE__*/React.createElement(Type, _extends({
+  const t8 = is("simple", children) ? /*#__PURE__*/_jsx(Type, _objectSpread(_objectSpread({
     version: size === "large" ? "b1" : size === "regular" ? "b2" : "b3"
-  }, TypeProps), children) : children;
+  }, TypeProps), {}, {
+    children: children
+  })) : children;
   let t9;
-  if ($[0] !== Button || $[1] !== color || $[2] !== elevation || $[3] !== other || $[4] !== ref || $[5] !== size || $[6] !== t7 || $[7] !== t8 || $[8] !== tonal || $[9] !== version) {
-    t9 = /*#__PURE__*/React.createElement(Button, _extends({
-      ref: ref,
+  if ($[0] !== Button || $[1] !== color || $[2] !== elevation || $[3] !== other || $[4] !== size || $[5] !== t7 || $[6] !== t8 || $[7] !== tonal || $[8] !== version) {
+    t9 = /*#__PURE__*/_jsx(Button, _objectSpread(_objectSpread({
       tonal: tonal,
       color: color,
       version: version,
@@ -80,22 +81,23 @@ const PaginationItem = /*#__PURE__*/React.forwardRef((props_, ref) => {
       icon: t5,
       noFontSize: t6,
       className: t7
-    }, other), t8);
+    }, other), {}, {
+      children: t8
+    }));
     $[0] = Button;
     $[1] = color;
     $[2] = elevation;
     $[3] = other;
-    $[4] = ref;
-    $[5] = size;
-    $[6] = t7;
-    $[7] = t8;
-    $[8] = tonal;
-    $[9] = version;
-    $[10] = t9;
+    $[4] = size;
+    $[5] = t7;
+    $[6] = t8;
+    $[7] = tonal;
+    $[8] = version;
+    $[9] = t9;
   } else {
-    t9 = $[10];
+    t9 = $[9];
   }
   return t9;
-});
+};
 PaginationItem.displayName = 'onesy-PaginationItem';
 export default PaginationItem;

package/esm/Parallax/Parallax.js

@@ -1,6 +1,6 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-const _excluded = ["value", "root", "render", "rate", "scrollDirection", "transformDirection", "transition", "disabled", "className", "style", "children"];
+const _excluded = ["ref", "value", "root", "render", "rate", "scrollDirection", "transformDirection", "transition", "disabled", "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 React from 'react';
@@ -13,10 +13,11 @@ const useStyle = styleMethod(theme => ({
 }), {
   name: 'onesy-Parallax'
 });
-const Parallax = /*#__PURE__*/React.forwardRef((props_, ref) => {
+const Parallax = props_ => {
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyParallax?.props?.default), props_);
   const {
+      ref,
       value: value_,
       // element
       root = window.document,
@@ -128,6 +129,6 @@ const Parallax = /*#__PURE__*/React.forwardRef((props_, ref) => {
     },
     style: _objectSpread(_objectSpread({}, children.props.style), styles)
   }, other));
-});
+};
 Parallax.displayName = 'onesy-Parallax';
 export default Parallax;

package/esm/Path/Path.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 = ["value", "Component", "className"];
@@ -8,13 +7,14 @@ import { c as _c } from "react/compiler-runtime";
 import React from 'react';
 import { classNames, style as styleMethod, useOnesyTheme } from '@onesy/style-react';
 import { staticClassName } from '../utils';
+import { jsx as _jsx } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {}
 }), {
   name: 'onesy-Path'
 });
-const Path = /*#__PURE__*/React.forwardRef((props_, ref) => {
-  const $ = _c(5);
+const Path = props_ => {
+  const $ = _c(4);
   const theme = useOnesyTheme();
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyPath?.props?.default), props_);
   const {
@@ -29,20 +29,18 @@ const Path = /*#__PURE__*/React.forwardRef((props_, ref) => {
   } = useStyle();
   const t1 = classNames([staticClassName("Path", theme) && ["onesy-Path-root"], className, classes.root]);
   let t2;
-  if ($[0] !== Component || $[1] !== other || $[2] !== ref || $[3] !== t1) {
-    t2 = /*#__PURE__*/React.createElement(Component, _extends({
-      ref: ref,
+  if ($[0] !== Component || $[1] !== other || $[2] !== t1) {
+    t2 = /*#__PURE__*/_jsx(Component, _objectSpread({
       className: t1
     }, other));
     $[0] = Component;
     $[1] = other;
-    $[2] = ref;
-    $[3] = t1;
-    $[4] = t2;
+    $[2] = t1;
+    $[3] = t2;
   } else {
-    t2 = $[4];
+    t2 = $[3];
   }
   return t2;
-});
+};
 Path.displayName = 'onesy-Path';
 export default Path;

package/esm/PieChart/PieChart.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", "values", "animate", "animateTimeout", "names", "gap", "innerOffset", "tooltipRender", "PathProps", "LegendItemProps", "className"],
+const _excluded = ["ref", "tonal", "color", "values", "animate", "animateTimeout", "names", "gap", "innerOffset", "tooltipRender", "PathProps", "LegendItemProps", "className"],
   _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) { _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; }
@@ -15,6 +14,7 @@ import ChartElement from '../Chart';
 import PathElement from '../Path';
 import useMediaQuery from '../useMediaQuery';
 import { angleToCoordinates, staticClassName, valueBreakpoints } from '../utils';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useStyle = styleMethod(theme => ({
   root: {
     '& .onesy-Chart-wrapper': {
@@ -52,7 +52,7 @@ const useStyle = styleMethod(theme => ({
 }), {
   name: 'onesy-PieChart'
 });
-const PieChart = /*#__PURE__*/React.forwardRef((props_, ref) => {
+const PieChart = props_ => {
   const theme = useOnesyTheme();
   const l = theme.l;
   const props = _objectSpread(_objectSpread(_objectSpread({}, theme?.ui?.elements?.all?.props?.default), theme?.ui?.elements?.onesyPieChart?.props?.default), props_);
@@ -62,6 +62,7 @@ const PieChart = /*#__PURE__*/React.forwardRef((props_, ref) => {
   const Chart = theme?.elements?.Chart || ChartElement;
   const Path = theme?.elements?.Path || PathElement;
   const {
+      ref,
       tonal = true,
       color = 'primary',
       values,
@@ -121,20 +122,23 @@ const PieChart = /*#__PURE__*/React.forwardRef((props_, ref) => {
       tone = 'main',
       name = 'No name'
     } = item_0;
-    return /*#__PURE__*/React.createElement(Line, _extends({
+    return /*#__PURE__*/_jsxs(Line, _objectSpread(_objectSpread(_objectSpread({
       gap: 1,
       direction: "row",
       align: "center"
-    }, LegendItemProps, {
+    }, LegendItemProps), {}, {
       className: classNames([staticClassName('PieChart', theme) && ['onesy-PieChart-legend-item'], className_, LegendItemProps?.className, classes.legend_item])
-    }, other_), /*#__PURE__*/React.createElement("span", {
-      className: classNames([staticClassName('PieChart', theme) && ['onesy-PieChart-legend-icon'], classes.legend_icon]),
-      style: {
-        background: !refs.theme.current.palette.color[color_] ? color_ : refs.theme.current.palette.color[color_][tone]
-      }
-    }), /*#__PURE__*/React.createElement(Type, {
-      version: "b3"
-    }, name));
+    }, other_), {}, {
+      children: [/*#__PURE__*/_jsx("span", {
+        className: classNames([staticClassName('PieChart', theme) && ['onesy-PieChart-legend-icon'], classes.legend_icon]),
+        style: {
+          background: !refs.theme.current.palette.color[color_] ? color_ : refs.theme.current.palette.color[color_][tone]
+        }
+      }), /*#__PURE__*/_jsx(Type, {
+        version: "b3",
+        children: name
+      })]
+    }));
   };
   const make = () => {
     // Make values into x, y, coordinates
@@ -150,7 +154,7 @@ const PieChart = /*#__PURE__*/React.forwardRef((props_, ref) => {
       const legend_ = values.map(item_1 => {
         return {
           item: item_1,
-          element: /*#__PURE__*/React.createElement(LegendItem, {
+          element: /*#__PURE__*/_jsx(LegendItem, {
             item: item_1
           })
         };
@@ -215,30 +219,33 @@ const PieChart = /*#__PURE__*/React.forwardRef((props_, ref) => {
         }
         return {
           item: item_2,
-          element: /*#__PURE__*/React.createElement("g", null, /*#__PURE__*/React.createElement(Path, _extends({
-            d: d,
-            fill: !refs.theme.current.palette.color[color__0] ? color__0 : refs.theme.current.palette.color[color__0][tone_0],
-            stroke: gap > 0 ? refs.theme.current.palette.background.default.primary : 'none',
-            strokeWidth: gap
-          }, PathProps, {
-            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)
-          })), partPercentage >= 7 && /*#__PURE__*/React.createElement("text", {
-            x: angleTextCoordinates.x,
-            y: angleTextCoordinates.y,
-            className: classNames([staticClassName('PieChart', theme) && ['onesy-PieChart-text'], classes.text]),
-            fill: refs.theme.current.methods.palette.color.text(!refs.theme.current.palette.color[color__0] ? color__0 : refs.theme.current.palette.color[color__0][tone_0], true, 'light'),
-            style: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, PathProps?.style), refs.animate.current && refs.init.current !== 'animated' && {
-              opacity: 0
-            }), refs.animate.current && refs.init.current === 'animated' && {
-              opacity: 1
-            }), refs.pathStyle.current)
-          }, `${partPercentage.toFixed(1)}%`.replace('.0%', '%')))
+          element: /*#__PURE__*/_jsxs("g", {
+            children: [/*#__PURE__*/_jsx(Path, _objectSpread(_objectSpread({
+              d: d,
+              fill: !refs.theme.current.palette.color[color__0] ? color__0 : refs.theme.current.palette.color[color__0][tone_0],
+              stroke: gap > 0 ? refs.theme.current.palette.background.default.primary : 'none',
+              strokeWidth: gap
+            }, PathProps), {}, {
+              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)
+            })), partPercentage >= 7 && /*#__PURE__*/_jsx("text", {
+              x: angleTextCoordinates.x,
+              y: angleTextCoordinates.y,
+              className: classNames([staticClassName('PieChart', theme) && ['onesy-PieChart-text'], classes.text]),
+              fill: refs.theme.current.methods.palette.color.text(!refs.theme.current.palette.color[color__0] ? color__0 : refs.theme.current.palette.color[color__0][tone_0], true, 'light'),
+              style: _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, PathProps?.style), refs.animate.current && refs.init.current !== 'animated' && {
+                opacity: 0
+              }), refs.animate.current && refs.init.current === 'animated' && {
+                opacity: 1
+              }), refs.pathStyle.current),
+              children: `${partPercentage.toFixed(1)}%`.replace('.0%', '%')
+            })]
+          })
         };
       });
 
@@ -290,54 +297,64 @@ const PieChart = /*#__PURE__*/React.forwardRef((props_, ref) => {
     const valueValue = values__[0];
     const valuePercentage = (valueValue / valueTotal_0 * 100).toFixed(1).replace('.0', '');
     return {
-      element: /*#__PURE__*/React.createElement(Line, {
+      element: /*#__PURE__*/_jsxs(Line, {
         tonal: tonal,
         color: color,
         elevation: 1,
         gap: 0.5,
         direction: "column",
         Component: Surface,
-        className: classNames([staticClassName('PieChart', theme) && ['onesy-PieChart-append'], classes.append])
-      }, /*#__PURE__*/React.createElement(Line, {
-        gap: 1,
-        direction: "row",
-        align: "center"
-      }, /*#__PURE__*/React.createElement("span", {
-        className: classNames([staticClassName('PieChart', theme) && ['onesy-LineChart-append-icon'], classes.append_icon]),
-        style: {
-          background: !refs.theme.current.palette.color[color__1] ? color__1 : refs.theme.current.palette.color[color__1][tone_1]
-        }
-      }), /*#__PURE__*/React.createElement(Type, {
-        version: "b3"
-      }, name_0)), /*#__PURE__*/React.createElement(Line, {
-        gap: 0.4,
-        direction: "column"
-      }, /*#__PURE__*/React.createElement(Line, {
-        gap: 1,
-        direction: "row",
-        align: "center"
-      }, /*#__PURE__*/React.createElement(Type, {
-        version: "b3",
-        style: {
-          fontWeight: 600
-        }
-      }, names?.value || l('Value')), /*#__PURE__*/React.createElement(Type, {
-        version: "b3"
-      }, valueValue)), /*#__PURE__*/React.createElement(Line, {
-        gap: 1,
-        direction: "row",
-        align: "center"
-      }, /*#__PURE__*/React.createElement(Type, {
-        version: "b3",
-        style: {
-          fontWeight: 600
-        }
-      }, names?.percentage || l('Percentage')), /*#__PURE__*/React.createElement(Type, {
-        version: "b3"
-      }, valuePercentage, "%"))))
+        className: classNames([staticClassName('PieChart', theme) && ['onesy-PieChart-append'], classes.append]),
+        children: [/*#__PURE__*/_jsxs(Line, {
+          gap: 1,
+          direction: "row",
+          align: "center",
+          children: [/*#__PURE__*/_jsx("span", {
+            className: classNames([staticClassName('PieChart', theme) && ['onesy-LineChart-append-icon'], classes.append_icon]),
+            style: {
+              background: !refs.theme.current.palette.color[color__1] ? color__1 : refs.theme.current.palette.color[color__1][tone_1]
+            }
+          }), /*#__PURE__*/_jsx(Type, {
+            version: "b3",
+            children: name_0
+          })]
+        }), /*#__PURE__*/_jsxs(Line, {
+          gap: 0.4,
+          direction: "column",
+          children: [/*#__PURE__*/_jsxs(Line, {
+            gap: 1,
+            direction: "row",
+            align: "center",
+            children: [/*#__PURE__*/_jsx(Type, {
+              version: "b3",
+              style: {
+                fontWeight: 600
+              },
+              children: names?.value || l('Value')
+            }), /*#__PURE__*/_jsx(Type, {
+              version: "b3",
+              children: valueValue
+            })]
+          }), /*#__PURE__*/_jsxs(Line, {
+            gap: 1,
+            direction: "row",
+            align: "center",
+            children: [/*#__PURE__*/_jsx(Type, {
+              version: "b3",
+              style: {
+                fontWeight: 600
+              },
+              children: names?.percentage || l('Percentage')
+            }), /*#__PURE__*/_jsxs(Type, {
+              version: "b3",
+              children: [valuePercentage, "%"]
+            })]
+          })]
+        })]
+      })
     };
   };
-  return /*#__PURE__*/React.createElement(Chart, _extends({
+  return /*#__PURE__*/_jsx(Chart, _objectSpread({
     ref: item_3 => {
       if (ref) {
         if (is('function', ref)) ref(item_3);else ref.current = item_3;
@@ -359,6 +376,6 @@ const PieChart = /*#__PURE__*/React.forwardRef((props_, ref) => {
     noMain: true,
     className: classNames([staticClassName('PieChart', theme) && ['onesy-PieChart-root'], className, classes.root])
   }, other));
-});
+};
 PieChart.displayName = 'onesy-PieChart';
 export default PieChart;