@mui/x-charts 8.0.0-alpha.1 → 8.0.0-alpha.11

package/node/ChartsAxis/axisClasses.js

@@ -1,12 +1,14 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.axisClasses = void 0;
 exports.getAxisUtilityClass = getAxisUtilityClass;
-var _utils = require("@mui/utils");
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
 function getAxisUtilityClass(slot) {
-  return (0, _utils.unstable_generateUtilityClass)('MuiChartsAxis', slot);
+  return (0, _generateUtilityClass.default)('MuiChartsAxis', slot);
 }
-const axisClasses = exports.axisClasses = (0, _utils.unstable_generateUtilityClasses)('MuiChartsAxis', ['root', 'line', 'tickContainer', 'tick', 'tickLabel', 'label', 'directionX', 'directionY', 'top', 'bottom', 'left', 'right']);
+const axisClasses = exports.axisClasses = (0, _generateUtilityClasses.default)('MuiChartsAxis', ['root', 'line', 'tickContainer', 'tick', 'tickLabel', 'label', 'directionX', 'directionY', 'top', 'bottom', 'left', 'right']);

package/node/ChartsAxisHighlight/ChartsXAxisHighlight.js

@@ -9,9 +9,9 @@ exports.default = ChartsXHighlight;
 var React = _interopRequireWildcard(require("react"));
 var _useScale = require("../hooks/useScale");
 var _isBandScale = require("../internals/isBandScale");
-var _useSelector = require("../internals/useSelector");
-var _useStore = require("../internals/useStore");
-var _InteractionSelectors = require("../context/InteractionSelectors");
+var _useSelector = require("../internals/store/useSelector");
+var _useStore = require("../internals/store/useStore");
+var _useChartInteraction = require("../internals/plugins/featurePlugins/useChartInteraction");
 var _hooks = require("../hooks");
 var _ChartsAxisHighlightPath = require("./ChartsAxisHighlightPath");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -28,7 +28,7 @@ var _jsxRuntime = require("react/jsx-runtime");
   } = (0, _hooks.useDrawingArea)();
   const xScale = (0, _useScale.useXScale)();
   const store = (0, _useStore.useStore)();
-  const axisX = (0, _useSelector.useSelector)(store, _InteractionSelectors.selectorChartsInteractionXAxis);
+  const axisX = (0, _useSelector.useSelector)(store, _useChartInteraction.selectorChartsInteractionXAxis);
   const getXPosition = (0, _useScale.getValueToPositionMapper)(xScale);
   const isBandScaleX = type === 'band' && axisX !== null && (0, _isBandScale.isBandScale)(xScale);
   if (process.env.NODE_ENV !== 'production') {

package/node/ChartsAxisHighlight/ChartsYAxisHighlight.js

@@ -9,9 +9,9 @@ exports.default = ChartsYHighlight;
 var React = _interopRequireWildcard(require("react"));
 var _useScale = require("../hooks/useScale");
 var _isBandScale = require("../internals/isBandScale");
-var _useSelector = require("../internals/useSelector");
-var _useStore = require("../internals/useStore");
-var _InteractionSelectors = require("../context/InteractionSelectors");
+var _useSelector = require("../internals/store/useSelector");
+var _useStore = require("../internals/store/useStore");
+var _useChartInteraction = require("../internals/plugins/featurePlugins/useChartInteraction");
 var _hooks = require("../hooks");
 var _ChartsAxisHighlightPath = require("./ChartsAxisHighlightPath");
 var _jsxRuntime = require("react/jsx-runtime");
@@ -28,7 +28,7 @@ var _jsxRuntime = require("react/jsx-runtime");
   } = (0, _hooks.useDrawingArea)();
   const yScale = (0, _useScale.useYScale)();
   const store = (0, _useStore.useStore)();
-  const axisY = (0, _useSelector.useSelector)(store, _InteractionSelectors.selectorChartsInteractionYAxis);
+  const axisY = (0, _useSelector.useSelector)(store, _useChartInteraction.selectorChartsInteractionYAxis);
   const getYPosition = (0, _useScale.getValueToPositionMapper)(yScale);
   const isBandScaleY = type === 'band' && axisY !== null && (0, _isBandScale.isBandScale)(yScale);
   if (process.env.NODE_ENV !== 'production') {

package/node/ChartsGrid/ChartsGrid.js

@@ -13,12 +13,12 @@ var React = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
 var _styles = require("@mui/material/styles");
-var _CartesianProvider = require("../context/CartesianProvider");
 var _chartsGridClasses = require("./chartsGridClasses");
 var _useDrawingArea = require("../hooks/useDrawingArea");
 var _styledComponents = require("./styledComponents");
 var _ChartsVerticalGrid = require("./ChartsVerticalGrid");
 var _ChartsHorizontalGrid = require("./ChartsHorizontalGrid");
+var _useAxis = require("../hooks/useAxis");
 var _jsxRuntime = require("react/jsx-runtime");
 const _excluded = ["vertical", "horizontal"];
 const useUtilityClasses = ({
@@ -53,10 +53,12 @@ function ChartsGrid(inProps) {
     other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
   const {
     xAxis,
-    xAxisIds,
+    xAxisIds
+  } = (0, _useAxis.useXAxes)();
+  const {
     yAxis,
     yAxisIds
-  } = (0, _CartesianProvider.useCartesianContext)();
+  } = (0, _useAxis.useYAxes)();
   const classes = useUtilityClasses(props);
   const horizontalAxis = yAxis[yAxisIds[0]];
   const verticalAxis = xAxis[xAxisIds[0]];
@@ -64,11 +66,13 @@ function ChartsGrid(inProps) {
     className: classes.root,
     children: [vertical && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsVerticalGrid.ChartsGridVertical, {
       axis: verticalAxis,
-      drawingArea: drawingArea,
+      start: drawingArea.top,
+      end: drawingArea.height + drawingArea.top,
       classes: classes
     }), horizontal && /*#__PURE__*/(0, _jsxRuntime.jsx)(_ChartsHorizontalGrid.ChartsGridHorizontal, {
       axis: horizontalAxis,
-      drawingArea: drawingArea,
+      start: drawingArea.left,
+      end: drawingArea.width + drawingArea.left,
       classes: classes
     })]
   }));

package/node/ChartsGrid/ChartsHorizontalGrid.js

@@ -15,7 +15,8 @@ var _jsxRuntime = require("react/jsx-runtime");
 function ChartsGridHorizontal(props) {
   const {
     axis,
-    drawingArea,
+    start,
+    end,
     classes
   } = props;
   const {
@@ -35,8 +36,8 @@ function ChartsGridHorizontal(props) {
     }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledComponents.GridLine, {
       y1: offset,
       y2: offset,
-      x1: drawingArea.left,
-      x2: drawingArea.left + drawingArea.width,
+      x1: start,
+      x2: end,
       className: classes.horizontalLine
     }, `horizontal-${value}`))
   });

package/node/ChartsGrid/ChartsVerticalGrid.js

@@ -15,7 +15,8 @@ var _jsxRuntime = require("react/jsx-runtime");
 function ChartsGridVertical(props) {
   const {
     axis,
-    drawingArea,
+    start,
+    end,
     classes
   } = props;
   const {
@@ -33,8 +34,8 @@ function ChartsGridVertical(props) {
       value,
       offset
     }) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_styledComponents.GridLine, {
-      y1: drawingArea.top,
-      y2: drawingArea.top + drawingArea.height,
+      y1: start,
+      y2: end,
       x1: offset,
       x2: offset,
       className: classes.verticalLine

package/node/ChartsLabel/ChartsLabel.js

@@ -0,0 +1,49 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartsLabel = 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 _clsx = _interopRequireDefault(require("clsx"));
+var _labelClasses = require("./labelClasses");
+var _consumeThemeProps = require("../internals/consumeThemeProps");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["children", "className", "classes"];
+/**
+ * Generates the label mark for the tooltip and legend.
+ * @ignore - internal component.
+ */
+const ChartsLabel = exports.ChartsLabel = (0, _consumeThemeProps.consumeThemeProps)('MuiChartsLabel', {
+  classesResolver: _labelClasses.useUtilityClasses
+}, function ChartsLabel(props, ref) {
+  const {
+      children,
+      className,
+      classes
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("span", (0, _extends2.default)({
+    className: (0, _clsx.default)(classes?.root, className),
+    ref: ref
+  }, other, {
+    children: children
+  }));
+});
+process.env.NODE_ENV !== "production" ? ChartsLabel.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  children: _propTypes.default.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: _propTypes.default.object
+} : void 0;

package/node/ChartsLabel/ChartsLabelGradient.js

@@ -0,0 +1,141 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartsLabelGradient = 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 _styles = require("@mui/material/styles");
+var _clsx = _interopRequireDefault(require("clsx"));
+var _RtlProvider = require("@mui/system/RtlProvider");
+var _labelGradientClasses = require("./labelGradientClasses");
+var _consumeThemeProps = require("../internals/consumeThemeProps");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["gradientId", "direction", "classes", "className", "rotate", "reverse", "thickness"];
+const getRotation = (direction, reverse, rotate, isRtl) => {
+  const angle = (direction === 'vertical' ? -90 : 0) + (rotate ? 90 : 0) + (reverse ? 180 : 0);
+  if (isRtl && direction !== 'vertical') {
+    return angle + 180;
+  }
+  return angle;
+};
+const Root = (0, _styles.styled)('div', {
+  name: 'MuiChartsLabelGradient',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+})(({
+  ownerState
+}) => {
+  const rotation = getRotation(ownerState.direction, ownerState.reverse, ownerState.rotate, ownerState.isRtl);
+  return {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    [`.${_labelGradientClasses.labelGradientClasses.mask}`]: {
+      borderRadius: 2,
+      overflow: 'hidden'
+    },
+    [`&.${_labelGradientClasses.labelGradientClasses.horizontal}`]: {
+      width: '100%',
+      [`.${_labelGradientClasses.labelGradientClasses.mask}`]: {
+        height: ownerState.thickness,
+        width: '100%'
+      }
+    },
+    [`&.${_labelGradientClasses.labelGradientClasses.vertical}`]: {
+      height: '100%',
+      [`.${_labelGradientClasses.labelGradientClasses.mask}`]: {
+        width: ownerState.thickness,
+        height: '100%',
+        '> svg': {
+          height: '100%'
+        }
+      }
+    },
+    svg: {
+      transform: `rotate(${rotation}deg)`,
+      display: 'block'
+    }
+  };
+});
+
+/**
+ * Generates the label Gradient for the tooltip and legend.
+ * @ignore - internal component.
+ */
+const ChartsLabelGradient = exports.ChartsLabelGradient = (0, _consumeThemeProps.consumeThemeProps)('MuiChartsLabelGradient', {
+  defaultProps: {
+    direction: 'horizontal',
+    thickness: 12
+  },
+  classesResolver: _labelGradientClasses.useUtilityClasses
+}, function ChartsLabelGradient(props, ref) {
+  const {
+      gradientId,
+      classes,
+      className
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  const isRtl = (0, _RtlProvider.useRtl)();
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, (0, _extends2.default)({
+    className: (0, _clsx.default)(classes?.root, className),
+    ownerState: (0, _extends2.default)({}, props, {
+      isRtl
+    }),
+    "aria-hidden": "true",
+    ref: ref
+  }, other, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: classes?.mask,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
+        viewBox: "0 0 24 24",
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
+          className: classes?.fill,
+          width: "24",
+          height: "24",
+          fill: `url(#${gradientId})`
+        })
+      })
+    })
+  }));
+});
+process.env.NODE_ENV !== "production" ? ChartsLabelGradient.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: _propTypes.default.object,
+  /**
+   * The direction of the gradient.
+   * @default 'horizontal'
+   */
+  direction: _propTypes.default.oneOf(['vertical', 'horizontal']),
+  /**
+   * A unique identifier for the gradient.
+   * The `gradientId` will be used as `fill="url(#gradientId)"`.
+   */
+  gradientId: _propTypes.default.string.isRequired,
+  /**
+   * If `true`, the gradient will be reversed.
+   */
+  reverse: _propTypes.default.bool,
+  /**
+   * If provided, the gradient will be rotated by 90deg.
+   * Useful for linear gradients that are not in the correct orientation.
+   */
+  rotate: _propTypes.default.bool,
+  /**
+   * The thickness of the gradient
+   * @default 12
+   */
+  thickness: _propTypes.default.number
+} : void 0;

package/node/ChartsLabel/ChartsLabelMark.js

@@ -0,0 +1,117 @@
+"use strict";
+'use client';
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ChartsLabelMark = 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 _styles = require("@mui/material/styles");
+var _clsx = _interopRequireDefault(require("clsx"));
+var _labelMarkClasses = require("./labelMarkClasses");
+var _consumeThemeProps = require("../internals/consumeThemeProps");
+var _jsxRuntime = require("react/jsx-runtime");
+const _excluded = ["type", "color", "className", "classes"];
+const Root = (0, _styles.styled)('div', {
+  name: 'MuiChartsLabelMark',
+  slot: 'Root',
+  overridesResolver: (props, styles) => styles.root
+})(() => {
+  return {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    flexShrink: 0,
+    [`&.${_labelMarkClasses.labelMarkClasses.line}`]: {
+      width: 16,
+      display: 'flex',
+      alignItems: 'center',
+      [`.${_labelMarkClasses.labelMarkClasses.mask}`]: {
+        height: 4,
+        width: '100%',
+        borderRadius: 1,
+        overflow: 'hidden'
+      }
+    },
+    [`&.${_labelMarkClasses.labelMarkClasses.square}`]: {
+      height: 13,
+      width: 13,
+      borderRadius: 2,
+      overflow: 'hidden'
+    },
+    [`&.${_labelMarkClasses.labelMarkClasses.circle}`]: {
+      height: 15,
+      width: 15,
+      borderRadius: '50%',
+      overflow: 'hidden'
+    },
+    svg: {
+      display: 'block',
+      height: '100%',
+      width: '100%'
+    }
+  };
+});
+
+/**
+ * Generates the label mark for the tooltip and legend.
+ * @ignore - internal component.
+ */
+const ChartsLabelMark = exports.ChartsLabelMark = (0, _consumeThemeProps.consumeThemeProps)('MuiChartsLabelMark', {
+  defaultProps: {
+    type: 'square'
+  },
+  classesResolver: _labelMarkClasses.useUtilityClasses
+}, function ChartsLabelMark(props, ref) {
+  const {
+      type,
+      color,
+      className,
+      classes
+    } = props,
+    other = (0, _objectWithoutPropertiesLoose2.default)(props, _excluded);
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, (0, _extends2.default)({
+    className: (0, _clsx.default)(classes?.root, className),
+    ownerState: props,
+    "aria-hidden": "true",
+    ref: ref
+  }, other, {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: classes?.mask,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
+        viewBox: "0 0 24 24",
+        preserveAspectRatio: type === 'line' ? 'none' : undefined,
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("rect", {
+          className: classes?.fill,
+          width: "24",
+          height: "24",
+          fill: color
+        })
+      })
+    })
+  }));
+});
+process.env.NODE_ENV !== "production" ? ChartsLabelMark.propTypes = {
+  // ----------------------------- Warning --------------------------------
+  // | These PropTypes are generated from the TypeScript type definitions |
+  // | To update them edit the TypeScript types and run "pnpm proptypes"  |
+  // ----------------------------------------------------------------------
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: _propTypes.default.object,
+  /**
+   * The color of the mark.
+   */
+  color: _propTypes.default.string,
+  /**
+   * The type of the mark.
+   * @default 'square'
+   */
+  type: _propTypes.default.oneOf(['circle', 'line', 'square'])
+} : void 0;

package/node/ChartsLabel/index.js

@@ -0,0 +1,26 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "labelClasses", {
+  enumerable: true,
+  get: function () {
+    return _labelClasses.labelClasses;
+  }
+});
+Object.defineProperty(exports, "labelGradientClasses", {
+  enumerable: true,
+  get: function () {
+    return _labelGradientClasses.labelGradientClasses;
+  }
+});
+Object.defineProperty(exports, "labelMarkClasses", {
+  enumerable: true,
+  get: function () {
+    return _labelMarkClasses.labelMarkClasses;
+  }
+});
+var _labelClasses = require("./labelClasses");
+var _labelMarkClasses = require("./labelMarkClasses");
+var _labelGradientClasses = require("./labelGradientClasses");

package/node/ChartsLabel/labelClasses.js

@@ -0,0 +1,22 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getLabelUtilityClass = getLabelUtilityClass;
+exports.useUtilityClasses = exports.labelClasses = void 0;
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+function getLabelUtilityClass(slot) {
+  return (0, _generateUtilityClass.default)('MuiChartsLabel', slot);
+}
+const labelClasses = exports.labelClasses = (0, _generateUtilityClasses.default)('MuiChartsLabel', ['root']);
+const useUtilityClasses = props => {
+  const slots = {
+    root: ['root']
+  };
+  return (0, _composeClasses.default)(slots, getLabelUtilityClass, props.classes);
+};
+exports.useUtilityClasses = useUtilityClasses;

package/node/ChartsLabel/labelGradientClasses.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getLabelGradientUtilityClass = getLabelGradientUtilityClass;
+exports.useUtilityClasses = exports.labelGradientClasses = void 0;
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+function getLabelGradientUtilityClass(slot) {
+  return (0, _generateUtilityClass.default)('MuiChartsLabelGradient', slot);
+}
+const labelGradientClasses = exports.labelGradientClasses = (0, _generateUtilityClasses.default)('MuiChartsLabelGradient', ['root', 'vertical', 'horizontal', 'mask', 'fill']);
+const useUtilityClasses = props => {
+  const {
+    direction
+  } = props;
+  const slots = {
+    root: ['root', direction],
+    mask: ['mask'],
+    fill: ['fill']
+  };
+  return (0, _composeClasses.default)(slots, getLabelGradientUtilityClass, props.classes);
+};
+exports.useUtilityClasses = useUtilityClasses;

package/node/ChartsLabel/labelMarkClasses.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getLabelMarkUtilityClass = getLabelMarkUtilityClass;
+exports.useUtilityClasses = exports.labelMarkClasses = void 0;
+var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
+var _generateUtilityClass = _interopRequireDefault(require("@mui/utils/generateUtilityClass"));
+var _generateUtilityClasses = _interopRequireDefault(require("@mui/utils/generateUtilityClasses"));
+function getLabelMarkUtilityClass(slot) {
+  return (0, _generateUtilityClass.default)('MuiChartsLabelMark', slot);
+}
+const labelMarkClasses = exports.labelMarkClasses = (0, _generateUtilityClasses.default)('MuiChartsLabelMark', ['root', 'line', 'square', 'circle', 'mask', 'fill']);
+const useUtilityClasses = props => {
+  const {
+    type
+  } = props;
+  const slots = {
+    root: ['root', type],
+    mask: ['mask'],
+    fill: ['fill']
+  };
+  return (0, _composeClasses.default)(slots, getLabelMarkUtilityClass, props.classes);
+};
+exports.useUtilityClasses = useUtilityClasses;