@mui/x-charts 8.0.0-beta.2 → 8.0.0

package/modern/ChartsGrid/ChartsHorizontalGrid.js

@@ -1,37 +0,0 @@
-import * as React from 'react';
-import { useTicks } from "../hooks/useTicks.js";
-import { GridLine } from "./styledComponents.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * @ignore - internal component.
- */
-export function ChartsGridHorizontal(props) {
-  const {
-    axis,
-    start,
-    end,
-    classes
-  } = props;
-  const {
-    scale,
-    tickNumber,
-    tickInterval
-  } = axis;
-  const yTicks = useTicks({
-    scale,
-    tickNumber,
-    tickInterval
-  });
-  return /*#__PURE__*/_jsx(React.Fragment, {
-    children: yTicks.map(({
-      value,
-      offset
-    }) => /*#__PURE__*/_jsx(GridLine, {
-      y1: offset,
-      y2: offset,
-      x1: start,
-      x2: end,
-      className: classes.horizontalLine
-    }, `horizontal-${value.getTime?.() ?? value}`))
-  });
-}

package/modern/ChartsGrid/ChartsVerticalGrid.d.ts

@@ -1,14 +0,0 @@
-import * as React from 'react';
-import { AxisDefaultized, ChartsXAxisProps, ScaleName } from "../models/axis.js";
-import { ChartsGridClasses } from "./chartsGridClasses.js";
-interface ChartsGridVerticalProps {
-  axis: AxisDefaultized<ScaleName, any, ChartsXAxisProps>;
-  start: number;
-  end: number;
-  classes: Partial<ChartsGridClasses>;
-}
-/**
- * @ignore - internal component.
- */
-export declare function ChartsGridVertical(props: ChartsGridVerticalProps): React.JSX.Element;
-export {};

package/modern/ChartsGrid/ChartsVerticalGrid.js

@@ -1,37 +0,0 @@
-import * as React from 'react';
-import { useTicks } from "../hooks/useTicks.js";
-import { GridLine } from "./styledComponents.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * @ignore - internal component.
- */
-export function ChartsGridVertical(props) {
-  const {
-    axis,
-    start,
-    end,
-    classes
-  } = props;
-  const {
-    scale,
-    tickNumber,
-    tickInterval
-  } = axis;
-  const xTicks = useTicks({
-    scale,
-    tickNumber,
-    tickInterval
-  });
-  return /*#__PURE__*/_jsx(React.Fragment, {
-    children: xTicks.map(({
-      value,
-      offset
-    }) => /*#__PURE__*/_jsx(GridLine, {
-      y1: start,
-      y2: end,
-      x1: offset,
-      x2: offset,
-      className: classes.verticalLine
-    }, `vertical-${value.getTime?.() ?? value}`))
-  });
-}

package/modern/ChartsGrid/chartsGridClasses.d.ts

@@ -1,13 +0,0 @@
-export interface ChartsGridClasses {
-  /** Styles applied to the root element. */
-  root: string;
-  /** Styles applied to every line element. */
-  line: string;
-  /** Styles applied to x-axes. */
-  horizontalLine: string;
-  /** Styles applied to y-axes. */
-  verticalLine: string;
-}
-export type ChartsGridClassKey = keyof ChartsGridClasses;
-export declare function getChartsGridUtilityClass(slot: string): string;
-export declare const chartsGridClasses: ChartsGridClasses;

package/modern/ChartsGrid/chartsGridClasses.js

@@ -1,6 +0,0 @@
-import generateUtilityClass from '@mui/utils/generateUtilityClass';
-import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
-export function getChartsGridUtilityClass(slot) {
-  return generateUtilityClass('MuiChartsGrid', slot);
-}
-export const chartsGridClasses = generateUtilityClasses('MuiChartsGrid', ['root', 'line', 'horizontalLine', 'verticalLine']);

package/modern/ChartsGrid/index.d.ts

@@ -1,2 +0,0 @@
-export * from "./ChartsGrid.js";
-export * from "./chartsGridClasses.js";

package/modern/ChartsGrid/index.js

@@ -1,2 +0,0 @@
-export * from "./ChartsGrid.js";
-export * from "./chartsGridClasses.js";

package/modern/ChartsGrid/styledComponents.d.ts

@@ -1,2 +0,0 @@
-export declare const GridRoot: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, Pick<import("react").SVGProps<SVGGElement>, keyof import("react").SVGProps<SVGGElement>>, {}>;
-export declare const GridLine: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, Pick<import("react").SVGLineElementAttributes<SVGLineElement>, keyof import("react").SVGLineElementAttributes<SVGLineElement>>, {}>;

package/modern/ChartsGrid/styledComponents.js

@@ -1,22 +0,0 @@
-import { styled } from '@mui/material/styles';
-import { chartsGridClasses } from "./chartsGridClasses.js";
-export const GridRoot = styled('g', {
-  name: 'MuiChartsGrid',
-  slot: 'Root',
-  overridesResolver: (props, styles) => [{
-    [`&.${chartsGridClasses.verticalLine}`]: styles.verticalLine
-  }, {
-    [`&.${chartsGridClasses.horizontalLine}`]: styles.horizontalLine
-  }, styles.root]
-})({});
-export const GridLine = styled('line', {
-  name: 'MuiChartsGrid',
-  slot: 'Line',
-  overridesResolver: (props, styles) => styles.line
-})(({
-  theme
-}) => ({
-  stroke: (theme.vars || theme).palette.divider,
-  shapeRendering: 'crispEdges',
-  strokeWidth: 1
-}));

package/modern/ChartsLabel/ChartsLabel.d.ts

@@ -1,18 +0,0 @@
-import * as React from 'react';
-import { SxProps, Theme } from '@mui/material/styles';
-import { ChartsLabelClasses } from "./labelClasses.js";
-export interface ChartsLabelProps {
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes?: Partial<ChartsLabelClasses>;
-  children?: React.ReactNode;
-  className?: string;
-  sx?: SxProps<Theme>;
-}
-/**
- * Generates the label mark for the tooltip and legend.
- * @ignore - internal component.
- */
-declare const ChartsLabel: React.ForwardRefExoticComponent<ChartsLabelProps & React.RefAttributes<{}>>;
-export { ChartsLabel };

package/modern/ChartsLabel/ChartsLabel.js

@@ -1,43 +0,0 @@
-'use client';
-
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["children", "className", "classes"];
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import clsx from 'clsx';
-import { useUtilityClasses } from "./labelClasses.js";
-import { consumeThemeProps } from "../internals/consumeThemeProps.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-/**
- * Generates the label mark for the tooltip and legend.
- * @ignore - internal component.
- */
-const ChartsLabel = consumeThemeProps('MuiChartsLabel', {
-  classesResolver: useUtilityClasses
-}, function ChartsLabel(props, ref) {
-  const {
-      children,
-      className,
-      classes
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  return /*#__PURE__*/_jsx("span", _extends({
-    className: clsx(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.node,
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes: PropTypes.object
-} : void 0;
-export { ChartsLabel };

package/modern/ChartsLabel/ChartsLabelGradient.d.ts

@@ -1,41 +0,0 @@
-import * as React from 'react';
-import { SxProps, Theme } from '@mui/material/styles';
-import { ChartsLabelGradientClasses } from "./labelGradientClasses.js";
-export interface ChartsLabelGradientProps {
-  /**
-   * A unique identifier for the gradient.
-   * The `gradientId` will be used as `fill="url(#gradientId)"`.
-   */
-  gradientId: string;
-  /**
-   * The direction of the gradient.
-   * @default 'horizontal'
-   */
-  direction?: 'vertical' | 'horizontal';
-  /**
-   * If `true`, the gradient will be reversed.
-   */
-  reverse?: boolean;
-  /**
-   * If provided, the gradient will be rotated by 90deg.
-   * Useful for linear gradients that are not in the correct orientation.
-   */
-  rotate?: boolean;
-  /**
-   * The thickness of the gradient
-   * @default 12
-   */
-  thickness?: number;
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes?: Partial<ChartsLabelGradientClasses>;
-  className?: string;
-  sx?: SxProps<Theme>;
-}
-/**
- * Generates the label Gradient for the tooltip and legend.
- * @ignore - internal component.
- */
-declare const ChartsLabelGradient: React.ForwardRefExoticComponent<ChartsLabelGradientProps & React.RefAttributes<{}>>;
-export { ChartsLabelGradient };

package/modern/ChartsLabel/ChartsLabelGradient.js

@@ -1,135 +0,0 @@
-'use client';
-
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["gradientId", "direction", "classes", "className", "rotate", "reverse", "thickness"];
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { styled } from '@mui/material/styles';
-import clsx from 'clsx';
-import { useRtl } from '@mui/system/RtlProvider';
-import { useUtilityClasses, labelGradientClasses } from "./labelGradientClasses.js";
-import { consumeThemeProps } from "../internals/consumeThemeProps.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-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 = 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.mask}`]: {
-      borderRadius: 2,
-      overflow: 'hidden'
-    },
-    [`&.${labelGradientClasses.horizontal}`]: {
-      width: '100%',
-      [`.${labelGradientClasses.mask}`]: {
-        height: ownerState.thickness,
-        width: '100%'
-      }
-    },
-    [`&.${labelGradientClasses.vertical}`]: {
-      height: '100%',
-      [`.${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 = consumeThemeProps('MuiChartsLabelGradient', {
-  defaultProps: {
-    direction: 'horizontal',
-    thickness: 12
-  },
-  classesResolver: useUtilityClasses
-}, function ChartsLabelGradient(props, ref) {
-  const {
-      gradientId,
-      classes,
-      className
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const isRtl = useRtl();
-  return /*#__PURE__*/_jsx(Root, _extends({
-    className: clsx(classes?.root, className),
-    ownerState: _extends({}, props, {
-      isRtl
-    }),
-    "aria-hidden": "true",
-    ref: ref
-  }, other, {
-    children: /*#__PURE__*/_jsx("div", {
-      className: classes?.mask,
-      children: /*#__PURE__*/_jsx("svg", {
-        viewBox: "0 0 24 24",
-        children: /*#__PURE__*/_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.object,
-  /**
-   * The direction of the gradient.
-   * @default 'horizontal'
-   */
-  direction: PropTypes.oneOf(['vertical', 'horizontal']),
-  /**
-   * A unique identifier for the gradient.
-   * The `gradientId` will be used as `fill="url(#gradientId)"`.
-   */
-  gradientId: PropTypes.string.isRequired,
-  /**
-   * If `true`, the gradient will be reversed.
-   */
-  reverse: PropTypes.bool,
-  /**
-   * If provided, the gradient will be rotated by 90deg.
-   * Useful for linear gradients that are not in the correct orientation.
-   */
-  rotate: PropTypes.bool,
-  /**
-   * The thickness of the gradient
-   * @default 12
-   */
-  thickness: PropTypes.number
-} : void 0;
-export { ChartsLabelGradient };

package/modern/ChartsLabel/ChartsLabelMark.d.ts

@@ -1,31 +0,0 @@
-import * as React from 'react';
-import { SxProps, Theme } from '@mui/material/styles';
-import { ChartsLabelMarkClasses } from "./labelMarkClasses.js";
-export interface ChartsLabelCustomMarkProps {
-  className?: string;
-  /** Color of the series this mark refers to. */
-  color?: string;
-}
-export interface ChartsLabelMarkProps {
-  /**
-   * The type of the mark.
-   * @default 'square'
-   */
-  type?: 'square' | 'circle' | 'line' | React.ComponentType<ChartsLabelCustomMarkProps>;
-  /**
-   * The color of the mark.
-   */
-  color?: string;
-  /**
-   * Override or extend the styles applied to the component.
-   */
-  classes?: Partial<ChartsLabelMarkClasses>;
-  className?: string;
-  sx?: SxProps<Theme>;
-}
-/**
- * Generates the label mark for the tooltip and legend.
- * @ignore - internal component.
- */
-declare const ChartsLabelMark: React.ForwardRefExoticComponent<ChartsLabelMarkProps & React.RefAttributes<{}>>;
-export { ChartsLabelMark };

package/modern/ChartsLabel/ChartsLabelMark.js

@@ -1,124 +0,0 @@
-'use client';
-
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
-const _excluded = ["type", "color", "className", "classes"];
-import * as React from 'react';
-import PropTypes from 'prop-types';
-import { styled } from '@mui/material/styles';
-import clsx from 'clsx';
-import { labelMarkClasses, useUtilityClasses } from "./labelMarkClasses.js";
-import { consumeThemeProps } from "../internals/consumeThemeProps.js";
-import { jsx as _jsx } from "react/jsx-runtime";
-const Root = styled('div', {
-  name: 'MuiChartsLabelMark',
-  slot: 'Root',
-  overridesResolver: (props, styles) => styles.root
-})(() => {
-  return {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-    flexShrink: 0,
-    width: 14,
-    height: 14,
-    [`&.${labelMarkClasses.line}`]: {
-      width: 16,
-      height: 'unset',
-      display: 'flex',
-      alignItems: 'center',
-      [`.${labelMarkClasses.mask}`]: {
-        height: 4,
-        width: '100%',
-        borderRadius: 1,
-        overflow: 'hidden'
-      }
-    },
-    [`&.${labelMarkClasses.square}`]: {
-      height: 13,
-      width: 13,
-      borderRadius: 2,
-      overflow: 'hidden'
-    },
-    [`&.${labelMarkClasses.circle}`]: {
-      height: 15,
-      width: 15,
-      borderRadius: '50%',
-      overflow: 'hidden'
-    },
-    svg: {
-      display: 'block'
-    },
-    [`& .${labelMarkClasses.mask} > *`]: {
-      height: '100%',
-      width: '100%'
-    },
-    [`& .${labelMarkClasses.mask}`]: {
-      height: '100%',
-      width: '100%'
-    }
-  };
-});
-
-/**
- * Generates the label mark for the tooltip and legend.
- * @ignore - internal component.
- */
-const ChartsLabelMark = consumeThemeProps('MuiChartsLabelMark', {
-  defaultProps: {
-    type: 'square'
-  },
-  classesResolver: useUtilityClasses
-}, function ChartsLabelMark(props, ref) {
-  const {
-      type,
-      color,
-      className,
-      classes
-    } = props,
-    other = _objectWithoutPropertiesLoose(props, _excluded);
-  const Component = type;
-  return /*#__PURE__*/_jsx(Root, _extends({
-    className: clsx(classes?.root, className),
-    ownerState: props,
-    "aria-hidden": "true",
-    ref: ref
-  }, other, {
-    children: /*#__PURE__*/_jsx("div", {
-      className: classes?.mask,
-      children: typeof Component === 'function' ? /*#__PURE__*/_jsx(Component, {
-        className: classes?.fill,
-        color: color
-      }) : /*#__PURE__*/_jsx("svg", {
-        viewBox: "0 0 24 24",
-        preserveAspectRatio: type === 'line' ? 'none' : undefined,
-        children: /*#__PURE__*/_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.object,
-  /**
-   * The color of the mark.
-   */
-  color: PropTypes.string,
-  /**
-   * The type of the mark.
-   * @default 'square'
-   */
-  type: PropTypes.oneOf(['circle', 'line', 'square'])
-} : void 0;
-export { ChartsLabelMark };

package/modern/ChartsLabel/index.d.ts

@@ -1,7 +0,0 @@
-export type { ChartsLabelMarkProps, ChartsLabelCustomMarkProps } from './ChartsLabelMark';
-export { labelClasses } from "./labelClasses.js";
-export type { ChartsLabelClasses } from './labelClasses';
-export { labelMarkClasses } from "./labelMarkClasses.js";
-export type { ChartsLabelMarkClasses } from './labelMarkClasses';
-export { labelGradientClasses } from "./labelGradientClasses.js";
-export type { ChartsLabelGradientClasses } from './labelGradientClasses';

package/modern/ChartsLabel/index.js

@@ -1,3 +0,0 @@
-export { labelClasses } from "./labelClasses.js";
-export { labelMarkClasses } from "./labelMarkClasses.js";
-export { labelGradientClasses } from "./labelGradientClasses.js";

package/modern/ChartsLabel/labelClasses.d.ts

@@ -1,8 +0,0 @@
-import type { ChartsLabelProps } from './ChartsLabel';
-export interface ChartsLabelClasses {
-  /** Styles applied to the root element. */
-  root: string;
-}
-export declare function getLabelUtilityClass(slot: string): string;
-export declare const labelClasses: ChartsLabelClasses;
-export declare const useUtilityClasses: (props: ChartsLabelProps) => Record<"root", string>;

package/modern/ChartsLabel/labelClasses.js

@@ -1,13 +0,0 @@
-import composeClasses from '@mui/utils/composeClasses';
-import generateUtilityClass from '@mui/utils/generateUtilityClass';
-import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
-export function getLabelUtilityClass(slot) {
-  return generateUtilityClass('MuiChartsLabel', slot);
-}
-export const labelClasses = generateUtilityClasses('MuiChartsLabel', ['root']);
-export const useUtilityClasses = props => {
-  const slots = {
-    root: ['root']
-  };
-  return composeClasses(slots, getLabelUtilityClass, props.classes);
-};

package/modern/ChartsLabel/labelGradientClasses.d.ts

@@ -1,16 +0,0 @@
-import type { ChartsLabelGradientProps } from './ChartsLabelGradient';
-export interface ChartsLabelGradientClasses {
-  /** Styles applied to the root element. */
-  root: string;
-  /** Styles applied to the "mask" that gives shape to the gradient. */
-  mask: string;
-  /** Styles applied when direction is "column". */
-  vertical: string;
-  /** Styles applied when direction is "row". */
-  horizontal: string;
-  /** Styles applied to the element filled by the gradient */
-  fill: string;
-}
-export declare function getLabelGradientUtilityClass(slot: string): string;
-export declare const labelGradientClasses: ChartsLabelGradientClasses;
-export declare const useUtilityClasses: (props: ChartsLabelGradientProps) => Record<"root" | "mask" | "fill", string>;

package/modern/ChartsLabel/labelGradientClasses.js

@@ -1,18 +0,0 @@
-import composeClasses from '@mui/utils/composeClasses';
-import generateUtilityClass from '@mui/utils/generateUtilityClass';
-import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
-export function getLabelGradientUtilityClass(slot) {
-  return generateUtilityClass('MuiChartsLabelGradient', slot);
-}
-export const labelGradientClasses = generateUtilityClasses('MuiChartsLabelGradient', ['root', 'vertical', 'horizontal', 'mask', 'fill']);
-export const useUtilityClasses = props => {
-  const {
-    direction
-  } = props;
-  const slots = {
-    root: ['root', direction],
-    mask: ['mask'],
-    fill: ['fill']
-  };
-  return composeClasses(slots, getLabelGradientUtilityClass, props.classes);
-};

package/modern/ChartsLabel/labelMarkClasses.d.ts

@@ -1,18 +0,0 @@
-import type { ChartsLabelMarkProps } from './ChartsLabelMark';
-export interface ChartsLabelMarkClasses {
-  /** Styles applied to the root element. */
-  root: string;
-  /** Styles applied to the "mask" that gives shape to the marks. */
-  mask: string;
-  /** Styles applied to the mark type "line". */
-  line: string;
-  /** Styles applied to the mark type "square". */
-  square: string;
-  /** Styles applied to the mark type "circle". */
-  circle: string;
-  /** Styles applied to the element with fill={color} attribute. */
-  fill: string;
-}
-export declare function getLabelMarkUtilityClass(slot: string): string;
-export declare const labelMarkClasses: ChartsLabelMarkClasses;
-export declare const useUtilityClasses: (props: ChartsLabelMarkProps) => Record<"root" | "mask" | "fill", string>;

package/modern/ChartsLabel/labelMarkClasses.js

@@ -1,18 +0,0 @@
-import composeClasses from '@mui/utils/composeClasses';
-import generateUtilityClass from '@mui/utils/generateUtilityClass';
-import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
-export function getLabelMarkUtilityClass(slot) {
-  return generateUtilityClass('MuiChartsLabelMark', slot);
-}
-export const labelMarkClasses = generateUtilityClasses('MuiChartsLabelMark', ['root', 'line', 'square', 'circle', 'mask', 'fill']);
-export const useUtilityClasses = props => {
-  const {
-    type
-  } = props;
-  const slots = {
-    root: typeof type === 'function' ? ['root'] : ['root', type],
-    mask: ['mask'],
-    fill: ['fill']
-  };
-  return composeClasses(slots, getLabelMarkUtilityClass, props.classes);
-};