@mui/x-charts 8.0.0-alpha.9 → 8.0.0-beta.0

package/ChartsYAxis/ChartsYAxis.js

@@ -1,24 +1,32 @@
+"use strict";
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartsYAxis = ChartsYAxis;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _useSlotProps = _interopRequireDefault(require("@mui/utils/useSlotProps"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _styles = require("@mui/material/styles");
+var _RtlProvider = require("@mui/system/RtlProvider");
+var _domUtils = require("../internals/domUtils");
+var _useTicks = require("../hooks/useTicks");
+var _useDrawingArea = require("../hooks/useDrawingArea");
+var _AxisSharedComponents = require("../internals/components/AxisSharedComponents");
+var _ChartsText = require("../ChartsText");
+var _axisClasses = require("../ChartsAxis/axisClasses");
+var _isInfinity = require("../internals/isInfinity");
+var _isBandScale = require("../internals/isBandScale");
+var _ChartProvider = require("../context/ChartProvider");
+var _hooks = require("../hooks");
+var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["scale", "tickNumber"];
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import useSlotProps from '@mui/utils/useSlotProps';
-import composeClasses from '@mui/utils/composeClasses';
-import { useThemeProps, useTheme, styled } from '@mui/material/styles';
-import { useRtl } from '@mui/system/RtlProvider';
-import { useTicks } from "../hooks/useTicks.js";
-import { useDrawingArea } from "../hooks/useDrawingArea.js";
-import { AxisRoot } from "../internals/components/AxisSharedComponents.js";
-import { ChartsText } from "../ChartsText/index.js";
-import { getAxisUtilityClass } from "../ChartsAxis/axisClasses.js";
-import { isInfinity } from "../internals/isInfinity.js";
-import { isBandScale } from "../internals/isBandScale.js";
-import { useChartContext } from "../context/ChartProvider/index.js";
-import { useYAxes } from "../hooks/index.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = ownerState => {
   const {
     classes,
@@ -32,15 +40,14 @@ const useUtilityClasses = ownerState => {
     tickLabel: ['tickLabel'],
     label: ['label']
   };
-  return composeClasses(slots, getAxisUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _axisClasses.getAxisUtilityClass, classes);
 };
-const YAxisRoot = styled(AxisRoot, {
+const YAxisRoot = (0, _styles.styled)(_AxisSharedComponents.AxisRoot, {
   name: 'MuiChartsYAxis',
   slot: 'Root',
   overridesResolver: (props, styles) => styles.root
 })({});
 const defaultProps = {
-  position: 'left',
   disableLine: false,
   disableTicks: false,
   tickSize: 6
@@ -59,18 +66,18 @@ function ChartsYAxis(inProps) {
   const {
     yAxisIds,
     yAxis
-  } = useYAxes();
+  } = (0, _hooks.useYAxes)();
   const _yAxis = yAxis[inProps.axisId ?? yAxisIds[0]],
     {
       scale: yScale,
       tickNumber
     } = _yAxis,
-    settings = _objectWithoutPropertiesLoose(_yAxis, _excluded);
-  const themedProps = useThemeProps({
-    props: _extends({}, settings, inProps),
+    settings = (0, _objectWithoutPropertiesLoose2.default)(_yAxis, _excluded);
+  const themedProps = (0, _styles.useThemeProps)({
+    props: (0, _extends2.default)({}, settings, inProps),
     name: 'MuiChartsYAxis'
   });
-  const defaultizedProps = _extends({}, defaultProps, themedProps);
+  const defaultizedProps = (0, _extends2.default)({}, defaultProps, themedProps);
   const {
     position,
     disableLine,
@@ -86,24 +93,24 @@ function ChartsYAxis(inProps) {
     tickLabelPlacement,
     tickInterval,
     tickLabelInterval,
-    sx
+    sx,
+    offset,
+    width: axisWidth
   } = defaultizedProps;
-  const theme = useTheme();
-  const isRtl = useRtl();
-  const classes = useUtilityClasses(_extends({}, defaultizedProps, {
-    theme
-  }));
+  const theme = (0, _styles.useTheme)();
+  const isRtl = (0, _RtlProvider.useRtl)();
+  const classes = useUtilityClasses(defaultizedProps);
   const {
     instance
-  } = useChartContext();
+  } = (0, _ChartProvider.useChartContext)();
   const {
     left,
     top,
     width,
     height
-  } = useDrawingArea();
+  } = (0, _useDrawingArea.useDrawingArea)();
   const tickSize = disableTicks ? 4 : tickSizeProp;
-  const yTicks = useTicks({
+  const yTicks = (0, _useTicks.useTicks)({
     scale: yScale,
     tickNumber,
     valueFormatter,
@@ -113,20 +120,16 @@ function ChartsYAxis(inProps) {
   });
   const positionSign = position === 'right' ? 1 : -1;
   const tickFontSize = typeof tickLabelStyle?.fontSize === 'number' ? tickLabelStyle.fontSize : 12;
-  const labelRefPoint = {
-    x: positionSign * (tickFontSize + tickSize + 10),
-    y: top + height / 2
-  };
   const Line = slots?.axisLine ?? 'line';
   const Tick = slots?.axisTick ?? 'line';
-  const TickLabel = slots?.axisTickLabel ?? ChartsText;
-  const Label = slots?.axisLabel ?? ChartsText;
+  const TickLabel = slots?.axisTickLabel ?? _ChartsText.ChartsText;
+  const Label = slots?.axisLabel ?? _ChartsText.ChartsText;
   const revertAnchor = !isRtl && position === 'right' || isRtl && position !== 'right';
-  const axisTickLabelProps = useSlotProps({
+  const axisTickLabelProps = (0, _useSlotProps.default)({
     elementType: TickLabel,
     externalSlotProps: slotProps?.axisTickLabel,
     additionalProps: {
-      style: _extends({
+      style: (0, _extends2.default)({}, theme.typography.caption, {
         fontSize: tickFontSize,
         textAnchor: revertAnchor ? 'start' : 'end',
         dominantBaseline: 'central'
@@ -135,11 +138,12 @@ function ChartsYAxis(inProps) {
     className: classes.tickLabel,
     ownerState: {}
   });
-  const axisLabelProps = useSlotProps({
+  const axisLabelProps = (0, _useSlotProps.default)({
     elementType: Label,
     externalSlotProps: slotProps?.axisLabel,
     additionalProps: {
-      style: _extends({
+      style: (0, _extends2.default)({}, theme.typography.body1, {
+        lineHeight: 1,
         fontSize: 14,
         angle: positionSign * 90,
         textAnchor: 'middle',
@@ -148,7 +152,7 @@ function ChartsYAxis(inProps) {
     },
     ownerState: {}
   });
-  const lineSlotProps = useSlotProps({
+  const lineSlotProps = (0, _useSlotProps.default)({
     elementType: Line,
     externalSlotProps: slotProps?.axisLine,
     additionalProps: {
@@ -157,24 +161,31 @@ function ChartsYAxis(inProps) {
     ownerState: {}
   });
   const domain = yScale.domain();
-  const ordinalAxis = isBandScale(yScale);
+  const ordinalAxis = (0, _isBandScale.isBandScale)(yScale);
+
   // Skip axis rendering if no data is available
   // - The domain is an empty array for band/point scales.
   // - The domains contains Infinity for continuous scales.
-  if (ordinalAxis && domain.length === 0 || !ordinalAxis && domain.some(isInfinity)) {
+  // - The position is 'none'.
+  if (ordinalAxis && domain.length === 0 || !ordinalAxis && domain.some(_isInfinity.isInfinity) || position === 'none') {
     return null;
   }
-  return /*#__PURE__*/_jsxs(YAxisRoot, {
-    transform: `translate(${position === 'right' ? left + width : left}, 0)`,
+  const labelHeight = label ? (0, _domUtils.getStringSize)(label, axisLabelProps.style).height : 0;
+  const labelRefPoint = {
+    x: positionSign * (axisWidth - labelHeight),
+    y: top + height / 2
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(YAxisRoot, {
+    transform: `translate(${position === 'right' ? left + width + offset : left - offset}, 0)`,
     className: classes.root,
     sx: sx,
-    children: [!disableLine && /*#__PURE__*/_jsx(Line, _extends({
+    children: [!disableLine && /*#__PURE__*/(0, _jsxRuntime.jsx)(Line, (0, _extends2.default)({
       y1: top,
       y2: top + height,
       className: classes.line
     }, lineSlotProps)), yTicks.map(({
       formattedValue,
-      offset,
+      offset: tickOffset,
       labelOffset,
       value
     }, index) => {
@@ -183,28 +194,28 @@ function ChartsYAxis(inProps) {
       const skipLabel = typeof tickLabelInterval === 'function' && !tickLabelInterval?.(value, index);
       const showLabel = instance.isPointInside({
         x: -1,
-        y: offset
+        y: tickOffset
       }, {
         direction: 'y'
       });
       if (!showLabel) {
         return null;
       }
-      return /*#__PURE__*/_jsxs("g", {
-        transform: `translate(0, ${offset})`,
+      return /*#__PURE__*/(0, _jsxRuntime.jsxs)("g", {
+        transform: `translate(0, ${tickOffset})`,
         className: classes.tickContainer,
-        children: [!disableTicks && /*#__PURE__*/_jsx(Tick, _extends({
+        children: [!disableTicks && /*#__PURE__*/(0, _jsxRuntime.jsx)(Tick, (0, _extends2.default)({
           x2: positionSign * tickSize,
           className: classes.tick
-        }, slotProps?.axisTick)), formattedValue !== undefined && !skipLabel && /*#__PURE__*/_jsx(TickLabel, _extends({
+        }, slotProps?.axisTick)), formattedValue !== undefined && !skipLabel && /*#__PURE__*/(0, _jsxRuntime.jsx)(TickLabel, (0, _extends2.default)({
           x: xTickLabel,
           y: yTickLabel,
           text: formattedValue.toString()
         }, axisTickLabelProps))]
       }, index);
-    }), label && /*#__PURE__*/_jsx("g", {
+    }), label && /*#__PURE__*/(0, _jsxRuntime.jsx)("g", {
       className: classes.label,
-      children: /*#__PURE__*/_jsx(Label, _extends({}, labelRefPoint, axisLabelProps, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(Label, (0, _extends2.default)({}, labelRefPoint, axisLabelProps, {
         text: label
       }))
     })]
@@ -215,58 +226,55 @@ process.env.NODE_ENV !== "production" ? ChartsYAxis.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
+  axis: _propTypes.default.oneOf(['y']),
   /**
    * The id of the axis to render.
    * If undefined, it will be the first defined axis.
    */
-  axisId: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  axisId: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
   /**
    * Override or extend the styles applied to the component.
    */
-  classes: PropTypes.object,
+  classes: _propTypes.default.object,
   /**
    * If true, the axis line is disabled.
    * @default false
    */
-  disableLine: PropTypes.bool,
+  disableLine: _propTypes.default.bool,
   /**
    * If true, the ticks are disabled.
    * @default false
    */
-  disableTicks: PropTypes.bool,
+  disableTicks: _propTypes.default.bool,
   /**
    * The fill color of the axis text.
    * @default 'currentColor'
    */
-  fill: PropTypes.string,
+  fill: _propTypes.default.string,
   /**
    * The label of the axis.
    */
-  label: PropTypes.string,
+  label: _propTypes.default.string,
   /**
    * The style applied to the axis label.
    */
-  labelStyle: PropTypes.object,
-  /**
-   * Position of the axis.
-   */
-  position: PropTypes.oneOf(['left', 'right']),
+  labelStyle: _propTypes.default.object,
   /**
    * The props used for each component slot.
    * @default {}
    */
-  slotProps: PropTypes.object,
+  slotProps: _propTypes.default.object,
   /**
    * Overridable component slots.
    * @default {}
    */
-  slots: PropTypes.object,
+  slots: _propTypes.default.object,
   /**
    * The stroke color of the axis line.
    * @default 'currentColor'
    */
-  stroke: PropTypes.string,
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
+  stroke: _propTypes.default.string,
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
   /**
    * Defines which ticks are displayed.
    * Its value can be:
@@ -276,51 +284,50 @@ process.env.NODE_ENV !== "production" ? ChartsYAxis.propTypes = {
    * @see See {@link https://mui.com/x/react-charts/axis/#fixed-tick-positions}
    * @default 'auto'
    */
-  tickInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.array, PropTypes.func]),
+  tickInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.array, _propTypes.default.func]),
   /**
    * Defines which ticks get its label displayed. Its value can be:
    * - 'auto' In such case, labels are displayed if they do not overlap with the previous one.
    * - a filtering function of the form (value, index) => boolean. Warning: the index is tick index, not data ones.
    * @default 'auto'
    */
-  tickLabelInterval: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.func]),
+  tickLabelInterval: _propTypes.default.oneOfType([_propTypes.default.oneOf(['auto']), _propTypes.default.func]),
   /**
    * The placement of ticks label. Can be the middle of the band, or the tick position.
    * Only used if scale is 'band'.
    * @default 'middle'
    */
-  tickLabelPlacement: PropTypes.oneOf(['middle', 'tick']),
+  tickLabelPlacement: _propTypes.default.oneOf(['middle', 'tick']),
   /**
    * The style applied to ticks text.
    */
-  tickLabelStyle: PropTypes.object,
+  tickLabelStyle: _propTypes.default.object,
   /**
    * Maximal step between two ticks.
    * When using time data, the value is assumed to be in ms.
    * Not supported by categorical axis (band, points).
    */
-  tickMaxStep: PropTypes.number,
+  tickMaxStep: _propTypes.default.number,
   /**
    * Minimal step between two ticks.
    * When using time data, the value is assumed to be in ms.
    * Not supported by categorical axis (band, points).
    */
-  tickMinStep: PropTypes.number,
+  tickMinStep: _propTypes.default.number,
   /**
    * The number of ticks. This number is not guaranteed.
    * Not supported by categorical axis (band, points).
    */
-  tickNumber: PropTypes.number,
+  tickNumber: _propTypes.default.number,
   /**
    * The placement of ticks in regard to the band interval.
    * Only used if scale is 'band'.
    * @default 'extremities'
    */
-  tickPlacement: PropTypes.oneOf(['end', 'extremities', 'middle', 'start']),
+  tickPlacement: _propTypes.default.oneOf(['end', 'extremities', 'middle', 'start']),
   /**
    * The size of the ticks.
    * @default 6
    */
-  tickSize: PropTypes.number
-} : void 0;
-export { ChartsYAxis };
+  tickSize: _propTypes.default.number
+} : void 0;

package/ChartsYAxis/index.d.ts

@@ -1 +1 @@
-export * from './ChartsYAxis';
+export * from "./ChartsYAxis.js";

package/ChartsYAxis/index.js

@@ -1 +1,16 @@
-export * from "./ChartsYAxis.js";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _ChartsYAxis = require("./ChartsYAxis");
+Object.keys(_ChartsYAxis).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ChartsYAxis[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ChartsYAxis[key];
+    }
+  });
+});

package/Gauge/Gauge.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { GaugeContainerProps } from './GaugeContainer';
-import { GaugeClasses } from './gaugeClasses';
-import { GaugeValueTextProps } from './GaugeValueText';
+import { GaugeContainerProps } from "./GaugeContainer.js";
+import { GaugeClasses } from "./gaugeClasses.js";
+import { GaugeValueTextProps } from "./GaugeValueText.js";
 export interface GaugeProps extends GaugeContainerProps, Pick<GaugeValueTextProps, 'text'> {
-    classes?: Partial<GaugeClasses>;
-    children?: React.ReactNode;
+  classes?: Partial<GaugeClasses>;
+  children?: React.ReactNode;
 }
 declare const Gauge: React.ForwardRefExoticComponent<Omit<GaugeProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
-export { Gauge };
+export { Gauge };

package/Gauge/Gauge.js

@@ -1,18 +1,25 @@
+"use strict";
 'use client';
 
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Gauge = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var React = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _clsx = _interopRequireDefault(require("clsx"));
+var _GaugeContainer = require("./GaugeContainer");
+var _GaugeValueArc = require("./GaugeValueArc");
+var _GaugeReferenceArc = require("./GaugeReferenceArc");
+var _gaugeClasses = require("./gaugeClasses");
+var _GaugeValueText = require("./GaugeValueText");
+var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["text", "children", "classes", "className"];
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import composeClasses from '@mui/utils/composeClasses';
-import clsx from 'clsx';
-import { GaugeContainer } from "./GaugeContainer.js";
-import { GaugeValueArc } from "./GaugeValueArc.js";
-import { GaugeReferenceArc } from "./GaugeReferenceArc.js";
-import { getGaugeUtilityClass } from "./gaugeClasses.js";
-import { GaugeValueText } from "./GaugeValueText.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const useUtilityClasses = props => {
   const {
     classes
@@ -23,24 +30,24 @@ const useUtilityClasses = props => {
     referenceArc: ['referenceArc'],
     valueText: ['valueText']
   };
-  return composeClasses(slots, getGaugeUtilityClass, classes);
+  return (0, _composeClasses.default)(slots, _gaugeClasses.getGaugeUtilityClass, classes);
 };
-const Gauge = /*#__PURE__*/React.forwardRef(function Gauge(props, ref) {
+const Gauge = exports.Gauge = /*#__PURE__*/React.forwardRef(function Gauge(props, ref) {
   const {
       text,
       children,
       className
     } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const classes = useUtilityClasses(props);
-  return /*#__PURE__*/_jsxs(GaugeContainer, _extends({}, other, {
-    className: clsx(classes.root, className),
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_GaugeContainer.GaugeContainer, (0, _extends2.default)({}, other, {
+    className: (0, _clsx.default)(classes.root, className),
     ref: ref,
-    children: [/*#__PURE__*/_jsx(GaugeReferenceArc, {
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_GaugeReferenceArc.GaugeReferenceArc, {
       className: classes.referenceArc
-    }), /*#__PURE__*/_jsx(GaugeValueArc, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GaugeValueArc.GaugeValueArc, {
       className: classes.valueArc
-    }), /*#__PURE__*/_jsx(GaugeValueText, {
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GaugeValueText.GaugeValueText, {
       className: classes.valueText,
       text: text
     }), children]
@@ -51,99 +58,93 @@ process.env.NODE_ENV !== "production" ? Gauge.propTypes = {
   // | These PropTypes are generated from the TypeScript type definitions |
   // | To update them edit the TypeScript types and run "pnpm proptypes"  |
   // ----------------------------------------------------------------------
-  children: PropTypes.node,
-  classes: PropTypes.object,
-  className: PropTypes.string,
+  children: _propTypes.default.node,
+  classes: _propTypes.default.object,
+  className: _propTypes.default.string,
   /**
    * The radius applied to arc corners (similar to border radius).
    * Set it to '50%' to get rounded arc.
    * @default 0
    */
-  cornerRadius: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  cornerRadius: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
   /**
    * The x coordinate of the arc center.
    * Can be a number (in px) or a string with a percentage such as '50%'.
    * The '100%' is the width the drawing area.
    */
-  cx: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  cx: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
   /**
    * The y coordinate of the arc center.
    * Can be a number (in px) or a string with a percentage such as '50%'.
    * The '100%' is the height the drawing area.
    */
-  cy: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  desc: PropTypes.string,
-  /**
-   * If `true`, the charts will not listen to the mouse move event.
-   * It might break interactive features, but will improve performance.
-   * @default false
-   */
-  disableAxisListener: PropTypes.bool,
+  cy: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
+  desc: _propTypes.default.string,
   /**
    * The end angle (deg).
    * @default 360
    */
-  endAngle: PropTypes.number,
+  endAngle: _propTypes.default.number,
   /**
    * The height of the chart in px. If not defined, it takes the height of the parent element.
    */
-  height: PropTypes.number,
+  height: _propTypes.default.number,
   /**
    * This prop is used to help implement the accessibility logic.
    * If you don't provide this prop. It falls back to a randomly generated id.
    */
-  id: PropTypes.string,
+  id: _propTypes.default.string,
   /**
    * The radius between circle center and the beginning of the arc.
    * Can be a number (in px) or a string with a percentage such as '50%'.
    * The '100%' is the maximal radius that fit into the drawing area.
    * @default '80%'
    */
-  innerRadius: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  innerRadius: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
   /**
    * The margin between the SVG and the drawing area.
    * It's used for leaving some space for extra information such as the x- and y-axis or legend.
-   * Accepts an object with the optional properties: `top`, `bottom`, `left`, and `right`.
+   *
+   * Accepts a `number` to be used on all sides or an object with the optional properties: `top`, `bottom`, `left`, and `right`.
    */
-  margin: PropTypes.shape({
-    bottom: PropTypes.number,
-    left: PropTypes.number,
-    right: PropTypes.number,
-    top: PropTypes.number
-  }),
+  margin: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.shape({
+    bottom: _propTypes.default.number,
+    left: _propTypes.default.number,
+    right: _propTypes.default.number,
+    top: _propTypes.default.number
+  })]),
   /**
    * The radius between circle center and the end of the arc.
    * Can be a number (in px) or a string with a percentage such as '50%'.
    * The '100%' is the maximal radius that fit into the drawing area.
    * @default '100%'
    */
-  outerRadius: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  outerRadius: _propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string]),
   /**
    * The start angle (deg).
    * @default 0
    */
-  startAngle: PropTypes.number,
-  sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object]),
-  text: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
-  title: PropTypes.string,
+  startAngle: _propTypes.default.number,
+  sx: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.object, _propTypes.default.bool])), _propTypes.default.func, _propTypes.default.object]),
+  text: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string]),
+  title: _propTypes.default.string,
   /**
    * The value of the gauge.
    * Set to `null` to not display a value.
    */
-  value: PropTypes.number,
+  value: _propTypes.default.number,
   /**
    * The maximal value of the gauge.
    * @default 100
    */
-  valueMax: PropTypes.number,
+  valueMax: _propTypes.default.number,
   /**
    * The minimal value of the gauge.
    * @default 0
    */
-  valueMin: PropTypes.number,
+  valueMin: _propTypes.default.number,
   /**
    * The width of the chart in px. If not defined, it takes the width of the parent element.
    */
-  width: PropTypes.number
-} : void 0;
-export { Gauge };
+  width: _propTypes.default.number
+} : void 0;

package/Gauge/GaugeContainer.d.ts

@@ -1,10 +1,10 @@
 import * as React from 'react';
-import { ChartsSurfaceProps } from '../ChartsSurface';
-import { GaugeProviderProps } from './GaugeProvider';
-import { MergeSignaturesProperty } from '../internals/plugins/models';
-import { ChartCorePluginSignatures } from '../internals/plugins/corePlugins';
+import { ChartsSurfaceProps } from "../ChartsSurface/index.js";
+import { GaugeProviderProps } from "./GaugeProvider.js";
+import { MergeSignaturesProperty } from "../internals/plugins/models/index.js";
+import { ChartCorePluginSignatures } from "../internals/plugins/corePlugins/index.js";
 export interface GaugeContainerProps extends Omit<ChartsSurfaceProps, 'children'>, Omit<MergeSignaturesProperty<ChartCorePluginSignatures, 'params'>, 'series' | 'dataset' | 'colors' | 'theme'>, Omit<GaugeProviderProps, 'children'>, Omit<React.SVGProps<SVGSVGElement>, 'width' | 'height'> {
-    children?: React.ReactNode;
+  children?: React.ReactNode;
 }
 declare const GaugeContainer: React.ForwardRefExoticComponent<Omit<GaugeContainerProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
-export { GaugeContainer };
+export { GaugeContainer };