@hipay/hipay-material-ui 1.0.0-beta.1

package/es/internal/svg-icons/ArrowDropDown.js

@@ -0,0 +1,20 @@
+import React from 'react';
+import pure from 'recompose/pure';
+import SvgIcon from '../../SvgIcon';
+
+/**
+ * @ignore - internal component.
+ */
+
+var _ref = React.createElement('path', { d: 'M7 10l5 5 5-5z' });
+
+let ArrowDropDown = props => React.createElement(
+  SvgIcon,
+  props,
+  _ref
+);
+
+ArrowDropDown = pure(ArrowDropDown);
+ArrowDropDown.muiName = 'SvgIcon';
+
+export default ArrowDropDown;

package/es/internal/svg-icons/Cancel.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import pure from 'recompose/pure';
+import SvgIcon from '../../SvgIcon';
+
+/**
+ * @ignore - internal component.
+ */
+
+var _ref = React.createElement('path', { d: 'M12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm5 13.59L15.59 17 12 13.41 8.41 17 7 15.59 10.59 12 7 8.41 8.41 7 12 10.59 15.59 7 17 8.41 13.41 12 17 15.59z' });
+
+let Cancel = props => React.createElement(
+  SvgIcon,
+  props,
+  _ref
+);
+Cancel = pure(Cancel);
+Cancel.muiName = 'SvgIcon';
+
+export default Cancel;

package/es/internal/svg-icons/CheckBox.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import pure from 'recompose/pure';
+import SvgIcon from '../../SvgIcon';
+
+/**
+ * @ignore - internal component.
+ */
+
+var _ref = React.createElement('path', { d: 'M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z' });
+
+let CheckBox = props => React.createElement(
+  SvgIcon,
+  props,
+  _ref
+);
+CheckBox = pure(CheckBox);
+CheckBox.muiName = 'SvgIcon';
+
+export default CheckBox;

package/es/internal/svg-icons/CheckBoxOutlineBlank.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import pure from 'recompose/pure';
+import SvgIcon from '../../SvgIcon';
+
+/**
+ * @ignore - internal component.
+ */
+
+var _ref = React.createElement('path', { d: 'M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z' });
+
+let CheckBoxOutlineBlank = props => React.createElement(
+  SvgIcon,
+  props,
+  _ref
+);
+CheckBoxOutlineBlank = pure(CheckBoxOutlineBlank);
+CheckBoxOutlineBlank.muiName = 'SvgIcon';
+
+export default CheckBoxOutlineBlank;

package/es/internal/svg-icons/CheckCircle.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import pure from 'recompose/pure';
+import SvgIcon from '../../SvgIcon';
+
+/**
+ * @ignore - internal component.
+ */
+
+var _ref = React.createElement('path', { d: 'M12 0a12 12 0 1 0 0 24 12 12 0 0 0 0-24zm-2 17l-5-5 1.4-1.4 3.6 3.6 7.6-7.6L19 8l-9 9z' });
+
+let CheckCircle = props => React.createElement(
+  SvgIcon,
+  props,
+  _ref
+);
+CheckCircle = pure(CheckCircle);
+CheckCircle.muiName = 'SvgIcon';
+
+export default CheckCircle;

package/es/internal/svg-icons/IndeterminateCheckBox.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import pure from 'recompose/pure';
+import SvgIcon from '../../SvgIcon';
+
+/**
+ * @ignore - internal component.
+ */
+
+var _ref = React.createElement('path', { d: 'M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10H7v-2h10v2z' });
+
+let IndeterminateCheckBox = props => React.createElement(
+  SvgIcon,
+  props,
+  _ref
+);
+IndeterminateCheckBox = pure(IndeterminateCheckBox);
+IndeterminateCheckBox.muiName = 'SvgIcon';
+
+export default IndeterminateCheckBox;

package/es/internal/svg-icons/KeyboardArrowLeft.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import pure from 'recompose/pure';
+import SvgIcon from '../../SvgIcon';
+
+/**
+ * @ignore - internal component.
+ */
+
+var _ref = React.createElement('path', { d: 'M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z' });
+
+let KeyboardArrowLeft = props => React.createElement(
+  SvgIcon,
+  props,
+  _ref
+);
+KeyboardArrowLeft = pure(KeyboardArrowLeft);
+KeyboardArrowLeft.muiName = 'SvgIcon';
+
+export default KeyboardArrowLeft;

package/es/internal/svg-icons/KeyboardArrowRight.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import pure from 'recompose/pure';
+import SvgIcon from '../../SvgIcon';
+
+/**
+ * @ignore - internal component.
+ */
+
+var _ref = React.createElement('path', { d: 'M8.59 16.34l4.58-4.59-4.58-4.59L10 5.75l6 6-6 6z' });
+
+let KeyboardArrowRight = props => React.createElement(
+  SvgIcon,
+  props,
+  _ref
+);
+KeyboardArrowRight = pure(KeyboardArrowRight);
+KeyboardArrowRight.muiName = 'SvgIcon';
+
+export default KeyboardArrowRight;

package/es/internal/svg-icons/RadioButtonChecked.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import pure from 'recompose/pure';
+import SvgIcon from '../../SvgIcon';
+
+/**
+ * @ignore - internal component.
+ */
+
+var _ref = React.createElement('path', { d: 'M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' });
+
+let RadioButtonChecked = props => React.createElement(
+  SvgIcon,
+  props,
+  _ref
+);
+RadioButtonChecked = pure(RadioButtonChecked);
+RadioButtonChecked.muiName = 'SvgIcon';
+
+export default RadioButtonChecked;

package/es/internal/svg-icons/RadioButtonUnchecked.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import pure from 'recompose/pure';
+import SvgIcon from '../../SvgIcon';
+
+/**
+ * @ignore - internal component.
+ */
+
+var _ref = React.createElement('path', { d: 'M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z' });
+
+let RadioButtonUnchecked = props => React.createElement(
+  SvgIcon,
+  props,
+  _ref
+);
+RadioButtonUnchecked = pure(RadioButtonUnchecked);
+RadioButtonUnchecked.muiName = 'SvgIcon';
+
+export default RadioButtonUnchecked;

package/es/styles/MuiThemeProvider.js

@@ -0,0 +1,125 @@
+import _extends from 'babel-runtime/helpers/extends';
+import React from 'react';
+import PropTypes from 'prop-types';
+import warning from 'warning';
+import createBroadcast from 'brcast';
+import themeListener, { CHANNEL } from './themeListener';
+import exactProp from '../utils/exactProp';
+
+/**
+ * This component takes a `theme` property.
+ * It makes the `theme` available down the React tree thanks to React context.
+ * This component should preferably be used at **the root of your component tree**.
+ */
+class MuiThemeProvider extends React.Component {
+  constructor(props, context) {
+    super(props, context);
+
+    // Get the outer theme from the context, can be null
+    this.broadcast = createBroadcast();
+    this.unsubscribeId = null;
+    this.outerTheme = null;
+    this.outerTheme = themeListener.initial(context);
+    // Propagate the theme so it can be accessed by the children
+    this.broadcast.setState(this.mergeOuterLocalTheme(this.props.theme));
+  }
+
+  getChildContext() {
+    const { sheetsManager, disableStylesGeneration } = this.props;
+    const muiThemeProviderOptions = this.context.muiThemeProviderOptions || {};
+
+    if (sheetsManager !== undefined) {
+      muiThemeProviderOptions.sheetsManager = sheetsManager;
+    }
+
+    if (disableStylesGeneration !== undefined) {
+      muiThemeProviderOptions.disableStylesGeneration = disableStylesGeneration;
+    }
+
+    return {
+      [CHANNEL]: this.broadcast,
+      muiThemeProviderOptions
+    };
+  }
+
+  componentDidMount() {
+    // Subscribe on the outer theme, if present
+    this.unsubscribeId = themeListener.subscribe(this.context, outerTheme => {
+      this.outerTheme = outerTheme;
+      // Forward the parent theme update to the children
+      this.broadcast.setState(this.mergeOuterLocalTheme(this.props.theme));
+    });
+  }
+
+  componentWillReceiveProps(nextProps) {
+    // Propagate a local theme update
+    if (this.props.theme !== nextProps.theme) {
+      this.broadcast.setState(this.mergeOuterLocalTheme(nextProps.theme));
+    }
+  }
+
+  componentWillUnmount() {
+    if (this.unsubscribeId !== null) {
+      themeListener.unsubscribe(this.context, this.unsubscribeId);
+    }
+  }
+  // We are not using the React state in order to avoid unnecessary rerender.
+
+
+  // Simple merge between the outer theme and the local theme
+  mergeOuterLocalTheme(localTheme) {
+    // To support composition of theme.
+    if (typeof localTheme === 'function') {
+      process.env.NODE_ENV !== "production" ? warning(this.outerTheme, ['Material-UI: you are providing a theme function property ' + 'to the MuiThemeProvider component:', '<MuiThemeProvider theme={outerTheme => outerTheme} />', '', 'However, no outer theme is present.', 'Make sure a theme is already injected higher in the React tree ' + 'or provide a theme object.'].join('\n')) : void 0;
+      return localTheme(this.outerTheme);
+    }
+
+    if (!this.outerTheme) {
+      return localTheme;
+    }
+
+    return _extends({}, this.outerTheme, localTheme);
+  }
+
+  render() {
+    return this.props.children;
+  }
+}
+
+MuiThemeProvider.propTypes = process.env.NODE_ENV !== "production" ? {
+  /**
+   * You can only provide a single element with react@15, a node with react@16.
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * You can disable the generation of the styles with this option.
+   * It can be useful when traversing the React tree outside of the HTML
+   * rendering step on the server.
+   * Let's say you are using react-apollo to extract all
+   * the queries made by the interface server side.
+   * You can significantly speed up the traversal with this property.
+   */
+  disableStylesGeneration: PropTypes.bool,
+  /**
+   * The sheetsManager is used to deduplicate style sheet injection in the page.
+   * It's deduplicating using the (theme, styles) couple.
+   * On the server, you should provide a new instance for each request.
+   */
+  sheetsManager: PropTypes.object,
+  /**
+   * A theme object.
+   */
+  theme: PropTypes.oneOfType([PropTypes.object, PropTypes.func]).isRequired
+} : {};
+
+MuiThemeProvider.propTypes = process.env.NODE_ENV !== "production" ? exactProp(MuiThemeProvider.propTypes, 'MuiThemeProvider') : {};
+
+MuiThemeProvider.childContextTypes = _extends({}, themeListener.contextTypes, {
+  muiThemeProviderOptions: PropTypes.object
+});
+
+MuiThemeProvider.contextTypes = _extends({}, themeListener.contextTypes, {
+  muiThemeProviderOptions: PropTypes.object
+});
+
+export default MuiThemeProvider;

package/es/styles/colorManipulator.js

@@ -0,0 +1,221 @@
+//  weak
+/* eslint-disable no-use-before-define */
+
+import warning from 'warning';
+
+/**
+ * Returns a number whose value is limited to the given range.
+ *
+ * @param {number} value The value to be clamped
+ * @param {number} min The lower boundary of the output range
+ * @param {number} max The upper boundary of the output range
+ * @returns {number} A number in the range [min, max]
+ */
+function clamp(value, min = 0, max = 1) {
+  process.env.NODE_ENV !== "production" ? warning(value >= min && value <= max, `Material-UI: the value provided ${value} is out of range [${min}, ${max}].`) : void 0;
+
+  if (value < min) {
+    return min;
+  }
+  if (value > max) {
+    return max;
+  }
+  return value;
+}
+
+/**
+ * Converts a color from CSS hex format to CSS rgb format.
+ *
+ *  @param {string} color - Hex color, i.e. #nnn or #nnnnnn
+ *  @returns {string} A CSS rgb color string
+ */
+export function convertHexToRGB(color) {
+  color = color.substr(1);
+
+  const re = new RegExp(`.{1,${color.length / 3}}`, 'g');
+  let colors = color.match(re);
+
+  if (colors && colors[0].length === 1) {
+    colors = colors.map(n => n + n);
+  }
+
+  return colors ? `rgb(${colors.map(n => parseInt(n, 16)).join(', ')})` : '';
+}
+
+/**
+ * Returns an object with the type and values of a color.
+ *
+ * Note: Does not support rgb % values.
+ *
+ * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
+ * @returns {object} - A MUI color object: {type: string, values: number[]}
+ */
+export function decomposeColor(color) {
+  if (color.charAt(0) === '#') {
+    return decomposeColor(convertHexToRGB(color));
+  }
+
+  const marker = color.indexOf('(');
+  const type = color.substring(0, marker);
+  let values = color.substring(marker + 1, color.length - 1).split(',');
+  values = values.map(value => parseFloat(value));
+
+  return { type, values };
+}
+
+/**
+ * Converts a color object with type and values to a string.
+ *
+ * @param {object} color - Decomposed color
+ * @param {string} color.type - One of: 'rgb', 'rgba', 'hsl', 'hsla'
+ * @param {array} color.values - [n,n,n] or [n,n,n,n]
+ * @returns {string} A CSS color string
+ */
+export function recomposeColor(color) {
+  const { type } = color;
+  let { values } = color;
+
+  if (type.indexOf('rgb') > -1) {
+    // Only convert the first 3 values to int (i.e. not alpha)
+    values = values.map((n, i) => i < 3 ? parseInt(n, 10) : n);
+  }
+
+  if (type.indexOf('hsl') > -1) {
+    values[1] = `${values[1]}%`;
+    values[2] = `${values[2]}%`;
+  }
+
+  return `${color.type}(${values.join(', ')})`;
+}
+
+/**
+ * Calculates the contrast ratio between two colors.
+ *
+ * Formula: https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
+ *
+ * @param {string} foreground - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
+ * @param {string} background - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
+ * @returns {number} A contrast ratio value in the range 0 - 21.
+ */
+export function getContrastRatio(foreground, background) {
+  const lumA = getLuminance(foreground);
+  const lumB = getLuminance(background);
+  return (Math.max(lumA, lumB) + 0.05) / (Math.min(lumA, lumB) + 0.05);
+}
+
+/**
+ * The relative brightness of any point in a color space,
+ * normalized to 0 for darkest black and 1 for lightest white.
+ *
+ * Formula: https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
+ *
+ * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
+ * @returns {number} The relative brightness of the color in the range 0 - 1
+ */
+export function getLuminance(color) {
+  const decomposedColor = decomposeColor(color);
+
+  if (decomposedColor.type.indexOf('rgb') > -1) {
+    const rgb = decomposedColor.values.map(val => {
+      val /= 255; // normalized
+      return val <= 0.03928 ? val / 12.92 : Math.pow((val + 0.055) / 1.055, 2.4);
+    });
+    // Truncate at 3 digits
+    return Number((0.2126 * rgb[0] + 0.7152 * rgb[1] + 0.0722 * rgb[2]).toFixed(3));
+  } else if (decomposedColor.type.indexOf('hsl') > -1) {
+    return decomposedColor.values[2] / 100;
+  }
+
+  throw new Error(`Material-UI: unsupported \`${color}\` color.`);
+}
+
+/**
+ * Darken or lighten a colour, depending on its luminance.
+ * Light colors are darkened, dark colors are lightened.
+ *
+ * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
+ * @param {number} coefficient=0.15 - multiplier in the range 0 - 1
+ * @returns {string} A CSS color string. Hex input values are returned as rgb
+ */
+export function emphasize(color, coefficient = 0.15) {
+  return getLuminance(color) > 0.5 ? darken(color, coefficient) : lighten(color, coefficient);
+}
+
+/**
+ * Set the absolute transparency of a color.
+ * Any existing alpha values are overwritten.
+ *
+ * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
+ * @param {number} value - value to set the alpha channel to in the range 0 -1
+ * @returns {string} A CSS color string. Hex input values are returned as rgb
+ */
+export function fade(color, value) {
+  process.env.NODE_ENV !== "production" ? warning(color, `Material-UI: missing color argument in fade(${color}, ${value}).`) : void 0;
+
+  if (!color) return color;
+
+  color = decomposeColor(color);
+  value = clamp(value);
+
+  if (color.type === 'rgb' || color.type === 'hsl') {
+    color.type += 'a';
+  }
+  color.values[3] = value;
+
+  return recomposeColor(color);
+}
+
+/**
+ * Darkens a color.
+ *
+ * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
+ * @param {number} coefficient - multiplier in the range 0 - 1
+ * @returns {string} A CSS color string. Hex input values are returned as rgb
+ */
+export function darken(color, coefficient) {
+  process.env.NODE_ENV !== "production" ? warning(color, `Material-UI: missing color argument in darken(${color}, ${coefficient}).`) : void 0;
+
+  if (!color) return color;
+
+  color = decomposeColor(color);
+  coefficient = clamp(coefficient);
+
+  if (color.type.indexOf('hsl') > -1) {
+    color.values[2] *= 1 - coefficient;
+  } else if (color.type.indexOf('rgb') > -1) {
+    for (let i = 0; i < 3; i += 1) {
+      color.values[i] *= 1 - coefficient;
+    }
+  }
+  return recomposeColor(color);
+}
+
+/**
+ * Lightens a color.
+ *
+ * @param {string} color - CSS color, i.e. one of: #nnn, #nnnnnn, rgb(), rgba(), hsl(), hsla()
+ * @param {number} coefficient - multiplier in the range 0 - 1
+ * @returns {string} A CSS color string. Hex input values are returned as rgb
+ */
+export function lighten(color, coefficient) {
+  process.env.NODE_ENV !== "production" ? warning(color, `Material-UI: missing color argument in lighten(${color}, ${coefficient}).`) : void 0;
+
+  if (!color) return color;
+
+  color = decomposeColor(color);
+  coefficient = clamp(coefficient);
+
+  if (color.type.indexOf('hsl') > -1) {
+    color.values[2] += (100 - color.values[2]) * coefficient;
+  } else if (color.type.indexOf('rgb') > -1) {
+    for (let i = 0; i < 3; i += 1) {
+      color.values[i] += (255 - color.values[i]) * coefficient;
+    }
+  }
+
+  return recomposeColor(color);
+}
+
+export function getContrastedTextColor(background, black, white) {
+  return getContrastRatio(background, black) < 9 ? white : black;
+}

package/es/styles/createBreakpoints.js

@@ -0,0 +1,69 @@
+import _extends from 'babel-runtime/helpers/extends';
+import _objectWithoutProperties from 'babel-runtime/helpers/objectWithoutProperties';
+// Sorted ASC by size. That's important.
+// It can't be configured as it's used statically for propTypes.
+export const keys = ['xs', 'sm', 'md', 'lg', 'xl'];
+
+// Keep in mind that @media is inclusive by the CSS specification.
+export default function createBreakpoints(breakpoints) {
+  const {
+    // The breakpoint **start** at this value.
+    // For instance with the first breakpoint xs: [xs, sm[.
+    values = {
+      xs: 0,
+      sm: 600,
+      md: 960,
+      lg: 1280,
+      xl: 1920
+    },
+    unit = 'px',
+    step = 5
+  } = breakpoints,
+        other = _objectWithoutProperties(breakpoints, ['values', 'unit', 'step']);
+
+  function up(key) {
+    const value = typeof values[key] === 'number' ? values[key] : key;
+    return `@media (min-width:${value}${unit})`;
+  }
+
+  function down(key) {
+    const endIndex = keys.indexOf(key) + 1;
+    const upperbound = values[keys[endIndex]];
+
+    if (endIndex === keys.length) {
+      // xl down applies to all sizes
+      return up('xs');
+    }
+
+    const value = typeof upperbound === 'number' && endIndex > 0 ? upperbound : key;
+    return `@media (max-width:${value - step / 100}${unit})`;
+  }
+
+  function between(start, end) {
+    const endIndex = keys.indexOf(end) + 1;
+
+    if (endIndex === keys.length) {
+      return up(start);
+    }
+
+    return `@media (min-width:${values[start]}${unit}) and ` + `(max-width:${values[keys[endIndex]] - step / 100}${unit})`;
+  }
+
+  function only(key) {
+    return between(key, key);
+  }
+
+  function width(key) {
+    return values[key];
+  }
+
+  return _extends({
+    keys,
+    values,
+    up,
+    down,
+    between,
+    only,
+    width
+  }, other);
+}

package/es/styles/createGenerateClassName.js

@@ -0,0 +1,72 @@
+import warning from 'warning';
+
+let generatorCounter = 0;
+
+// Returns a function which generates unique class names based on counters.
+// When new generator function is created, rule counter is reset.
+// We need to reset the rule counter for SSR for each request.
+//
+// It's inspired by
+// https://github.com/cssinjs/jss/blob/4e6a05dd3f7b6572fdd3ab216861d9e446c20331/src/utils/createGenerateClassName.js
+export default function createGenerateClassName(options = {}) {
+  const { dangerouslyUseGlobalCSS = false, productionPrefix = 'jss' } = options;
+  const escapeRegex = /([[\].#*$><+~=|^:(),"'`\s])/g;
+  let ruleCounter = 0;
+
+  // - HMR can lead to many class name generators being instantiated,
+  // so the warning is only triggered in production.
+  // - We expect a class name generator to be instantiated per new request on the server,
+  // so the warning is only triggered client side.
+  // - You can get away with having multiple class name generators
+  // by modifying the `productionPrefix`.
+  if (process.env.NODE_ENV === 'production' && typeof window !== 'undefined' && productionPrefix === 'jss') {
+    generatorCounter += 1;
+
+    if (generatorCounter > 2) {
+      // eslint-disable-next-line no-console
+      console.error(['Material-UI: we have detected more than needed creation of the class name generator.', 'You should only use one class name generator on the client side.', 'If you do otherwise, you take the risk to have conflicting class names in production.'].join('\n'));
+    }
+  }
+
+  return (rule, styleSheet) => {
+    ruleCounter += 1;
+    process.env.NODE_ENV !== "production" ? warning(ruleCounter < 1e10, ['Material-UI: you might have a memory leak.', 'The ruleCounter is not supposed to grow that much.'].join('')) : void 0;
+
+    // Code branch the whole block at the expense of more code.
+    if (dangerouslyUseGlobalCSS) {
+      if (styleSheet && styleSheet.options.classNamePrefix) {
+        let prefix = styleSheet.options.classNamePrefix;
+        // Sanitize the string as will be used to prefix the generated class name.
+        prefix = prefix.replace(escapeRegex, '-');
+
+        if (prefix.match(/^Mui/)) {
+          return `${prefix}-${rule.key}`;
+        }
+
+        if (process.env.NODE_ENV !== 'production') {
+          return `${prefix}-${rule.key}-${ruleCounter}`;
+        }
+      }
+
+      if (process.env.NODE_ENV === 'production') {
+        return `${productionPrefix}${ruleCounter}`;
+      }
+
+      return `${rule.key}-${ruleCounter}`;
+    }
+
+    if (process.env.NODE_ENV === 'production') {
+      return `${productionPrefix}${ruleCounter}`;
+    }
+
+    if (styleSheet && styleSheet.options.classNamePrefix) {
+      let prefix = styleSheet.options.classNamePrefix;
+      // Sanitize the string as will be used to prefix the generated class name.
+      prefix = prefix.replace(escapeRegex, '-');
+
+      return `${prefix}-${rule.key}-${ruleCounter}`;
+    }
+
+    return `${rule.key}-${ruleCounter}`;
+  };
+}