@hipay/hipay-material-ui 2.3.1-rc3 → 2.3.1-rc4

package/styles/colorManipulator.test.js

@@ -0,0 +1,242 @@
+import { assert } from 'chai';
+import consoleErrorMock from 'test/utils/consoleErrorMock';
+import { recomposeColor, convertHexToRGB, rgbToHex, darken, decomposeColor, emphasize, fade, getContrastRatio, getLuminance, lighten } from './colorManipulator';
+describe('utils/colorManipulator', function () {
+  beforeEach(function () {
+    consoleErrorMock.spy();
+  });
+  afterEach(function () {
+    consoleErrorMock.reset();
+  });
+  describe('recomposeColor', function () {
+    it('converts a decomposed rgb color object to a string` ', function () {
+      assert.strictEqual(recomposeColor({
+        type: 'rgb',
+        values: [255, 255, 255]
+      }), 'rgb(255, 255, 255)');
+    });
+    it('converts a decomposed rgba color object to a string` ', function () {
+      assert.strictEqual(recomposeColor({
+        type: 'rgba',
+        values: [255, 255, 255, 0.5]
+      }), 'rgba(255, 255, 255, 0.5)');
+    });
+    it('converts a decomposed hsl color object to a string` ', function () {
+      assert.strictEqual(recomposeColor({
+        type: 'hsl',
+        values: [100, 50, 25]
+      }), 'hsl(100, 50%, 25%)');
+    });
+    it('converts a decomposed hsla color object to a string` ', function () {
+      assert.strictEqual(recomposeColor({
+        type: 'hsla',
+        values: [100, 50, 25, 0.5]
+      }), 'hsla(100, 50%, 25%, 0.5)');
+    });
+  });
+  describe('convertHexToRGB', function () {
+    it('converts a short hex color to an rgb color` ', function () {
+      assert.strictEqual(convertHexToRGB('#9f3'), 'rgb(153, 255, 51)');
+    });
+    it('converts a long hex color to an rgb color` ', function () {
+      assert.strictEqual(convertHexToRGB('#A94FD3'), 'rgb(169, 79, 211)');
+    });
+  });
+  describe('rgbToHex', function () {
+    it('converts an rgb color to a hex color` ', function () {
+      assert.strictEqual(rgbToHex('rgb(169, 79, 211)'), '#a94fd3');
+    });
+    it('passes a hex value through` ', function () {
+      assert.strictEqual(rgbToHex('#A94FD3'), '#A94FD3');
+    });
+  });
+  describe('decomposeColor', function () {
+    it('converts an rgb color string to an object with `type` and `value` keys', function () {
+      var _decomposeColor = decomposeColor('rgb(255, 255, 255)'),
+          type = _decomposeColor.type,
+          values = _decomposeColor.values;
+
+      assert.strictEqual(type, 'rgb');
+      assert.deepEqual(values, [255, 255, 255]);
+    });
+    it('converts an rgba color string to an object with `type` and `value` keys', function () {
+      var _decomposeColor2 = decomposeColor('rgba(255, 255, 255, 0.5)'),
+          type = _decomposeColor2.type,
+          values = _decomposeColor2.values;
+
+      assert.strictEqual(type, 'rgba');
+      assert.deepEqual(values, [255, 255, 255, 0.5]);
+    });
+    it('converts an hsl color string to an object with `type` and `value` keys', function () {
+      var _decomposeColor3 = decomposeColor('hsl(100, 50%, 25%)'),
+          type = _decomposeColor3.type,
+          values = _decomposeColor3.values;
+
+      assert.strictEqual(type, 'hsl');
+      assert.deepEqual(values, [100, 50, 25]);
+    });
+    it('converts an hsla color string to an object with `type` and `value` keys', function () {
+      var _decomposeColor4 = decomposeColor('hsla(100, 50%, 25%, 0.5)'),
+          type = _decomposeColor4.type,
+          values = _decomposeColor4.values;
+
+      assert.strictEqual(type, 'hsla');
+      assert.deepEqual(values, [100, 50, 25, 0.5]);
+    });
+  });
+  describe('getContrastRatio', function () {
+    it('returns a ratio for black : white', function () {
+      assert.strictEqual(getContrastRatio('#000', '#FFF'), 21);
+    });
+    it('returns a ratio for black : black', function () {
+      assert.strictEqual(getContrastRatio('#000', '#000'), 1);
+    });
+    it('returns a ratio for white : white', function () {
+      assert.strictEqual(getContrastRatio('#FFF', '#FFF'), 1);
+    });
+    it('returns a ratio for dark-grey : light-grey', function () {
+      assert.approximately(getContrastRatio('#707070', '#E5E5E5'), 3.93, 0.01);
+    });
+    it('returns a ratio for black : light-grey', function () {
+      assert.approximately(getContrastRatio('#000', '#888'), 5.92, 0.01);
+    });
+  });
+  describe('getLuminance', function () {
+    it('returns a valid luminance for rgb white', function () {
+      assert.strictEqual(getLuminance('rgba(0, 0, 0)'), 0);
+      assert.strictEqual(getLuminance('rgb(0, 0, 0)'), 0);
+    });
+    it('returns a valid luminance for rgb white', function () {
+      assert.strictEqual(getLuminance('rgba(255, 255, 255)'), 1);
+      assert.strictEqual(getLuminance('rgb(255, 255, 255)'), 1);
+    });
+    it('returns a valid luminance for rgb mid-grey', function () {
+      assert.strictEqual(getLuminance('rgba(127, 127, 127)'), 0.212);
+      assert.strictEqual(getLuminance('rgb(127, 127, 127)'), 0.212);
+    });
+    it('returns a valid luminance for an rgb color', function () {
+      assert.strictEqual(getLuminance('rgb(255, 127, 0)'), 0.364);
+    });
+    it('returns a valid luminance from an hsl color', function () {
+      assert.strictEqual(getLuminance('hsl(100, 100%, 50%)'), 0.5);
+    });
+    it('throw on invalid colors', function () {
+      assert.throw(function () {
+        getLuminance('black');
+      }, 'unsupported `black` color');
+    });
+  });
+  describe('emphasize', function () {
+    it('lightens a dark rgb color with the coefficient provided', function () {
+      assert.strictEqual(emphasize('rgb(1, 2, 3)', 0.4), lighten('rgb(1, 2, 3)', 0.4));
+    });
+    it('darkens a light rgb color with the coefficient provided', function () {
+      assert.strictEqual(emphasize('rgb(250, 240, 230)', 0.3), darken('rgb(250, 240, 230)', 0.3));
+    });
+    it('lightens a dark rgb color with the coefficient 0.15 by default', function () {
+      assert.strictEqual(emphasize('rgb(1, 2, 3)'), lighten('rgb(1, 2, 3)', 0.15));
+    });
+    it('darkens a light rgb color with the coefficient 0.15 by default', function () {
+      assert.strictEqual(emphasize('rgb(250, 240, 230)'), darken('rgb(250, 240, 230)', 0.15));
+    });
+  });
+  describe('fade', function () {
+    it('converts an rgb color to an rgba color with the value provided', function () {
+      assert.strictEqual(fade('rgb(1, 2, 3)', 0.4), 'rgba(1, 2, 3, 0.4)');
+    });
+    it('updates an rgba color with the alpha value provided', function () {
+      assert.strictEqual(fade('rgba(255, 0, 0, 0.2)', 0.5), 'rgba(255, 0, 0, 0.5)');
+    });
+    it('converts an hsl color to an hsla color with the value provided', function () {
+      assert.strictEqual(fade('hsl(0, 100%, 50%)', 0.1), 'hsla(0, 100%, 50%, 0.1)');
+    });
+    it('updates an hsla color with the alpha value provided', function () {
+      assert.strictEqual(fade('hsla(0, 100%, 50%, 0.2)', 0.5), 'hsla(0, 100%, 50%, 0.5)');
+    });
+    it('throw on invalid colors', function () {
+      assert.throw(function () {
+        fade('white', 0.4);
+      }, 'unsupported `white` color');
+    });
+  });
+  describe('darken', function () {
+    it("doesn't modify rgb black", function () {
+      assert.strictEqual(darken('rgb(0, 0, 0)', 0.1), 'rgb(0, 0, 0)');
+    });
+    it("doesn't overshoot if an above-range coefficient is supplied", function () {
+      assert.strictEqual(darken('rgb(0, 127, 255)', 1.5), 'rgb(0, 0, 0)');
+      assert.strictEqual(consoleErrorMock.callCount(), 1);
+    });
+    it("doesn't overshoot if a below-range coefficient is supplied", function () {
+      assert.strictEqual(darken('rgb(0, 127, 255)', -0.1), 'rgb(0, 127, 255)');
+      assert.strictEqual(consoleErrorMock.callCount(), 1);
+    });
+    it('darkens rgb white to black when coefficient is 1', function () {
+      assert.strictEqual(darken('rgb(255, 255, 255)', 1), 'rgb(0, 0, 0)');
+    });
+    it('retains the alpha value in an rgba color', function () {
+      assert.strictEqual(darken('rgb(0, 0, 0, 0.5)', 0.1), 'rgb(0, 0, 0, 0.5)');
+    });
+    it('darkens rgb white by 10% when coefficient is 0.1', function () {
+      assert.strictEqual(darken('rgb(255, 255, 255)', 0.1), 'rgb(229, 229, 229)');
+    });
+    it('darkens rgb red by 50% when coefficient is 0.5', function () {
+      assert.strictEqual(darken('rgb(255, 0, 0)', 0.5), 'rgb(127, 0, 0)');
+    });
+    it('darkens rgb grey by 50% when coefficient is 0.5', function () {
+      assert.strictEqual(darken('rgb(127, 127, 127)', 0.5), 'rgb(63, 63, 63)');
+    });
+    it("doesn't modify rgb colors when coefficient is 0", function () {
+      assert.strictEqual(darken('rgb(255, 255, 255)', 0), 'rgb(255, 255, 255)');
+    });
+    it('darkens hsl red by 50% when coefficient is 0.5', function () {
+      assert.strictEqual(darken('hsl(0, 100%, 50%)', 0.5), 'hsl(0, 100%, 25%)');
+    });
+    it("doesn't modify hsl colors when coefficient is 0", function () {
+      assert.strictEqual(darken('hsl(0, 100%, 50%)', 0), 'hsl(0, 100%, 50%)');
+    });
+    it("doesn't modify hsl colors when l is 0%", function () {
+      assert.strictEqual(darken('hsl(0, 50%, 0%)', 0.5), 'hsl(0, 50%, 0%)');
+    });
+  });
+  describe('lighten', function () {
+    it("doesn't modify rgb white", function () {
+      assert.strictEqual(lighten('rgb(255, 255, 255)', 0.1), 'rgb(255, 255, 255)');
+    });
+    it("doesn't overshoot if an above-range coefficient is supplied", function () {
+      assert.strictEqual(lighten('rgb(0, 127, 255)', 1.5), 'rgb(255, 255, 255)');
+      assert.strictEqual(consoleErrorMock.callCount(), 1);
+    });
+    it("doesn't overshoot if a below-range coefficient is supplied", function () {
+      assert.strictEqual(lighten('rgb(0, 127, 255)', -0.1), 'rgb(0, 127, 255)');
+      assert.strictEqual(consoleErrorMock.callCount(), 1);
+    });
+    it('lightens rgb black to white when coefficient is 1', function () {
+      assert.strictEqual(lighten('rgb(0, 0, 0)', 1), 'rgb(255, 255, 255)');
+    });
+    it('retains the alpha value in an rgba color', function () {
+      assert.strictEqual(lighten('rgb(255, 255, 255, 0.5)', 0.1), 'rgb(255, 255, 255, 0.5)');
+    });
+    it('lightens rgb black by 10% when coefficient is 0.1', function () {
+      assert.strictEqual(lighten('rgb(0, 0, 0)', 0.1), 'rgb(25, 25, 25)');
+    });
+    it('lightens rgb red by 50% when coefficient is 0.5', function () {
+      assert.strictEqual(lighten('rgb(255, 0, 0)', 0.5), 'rgb(255, 127, 127)');
+    });
+    it('lightens rgb grey by 50% when coefficient is 0.5', function () {
+      assert.strictEqual(lighten('rgb(127, 127, 127)', 0.5), 'rgb(191, 191, 191)');
+    });
+    it("doesn't modify rgb colors when coefficient is 0", function () {
+      assert.strictEqual(lighten('rgb(127, 127, 127)', 0), 'rgb(127, 127, 127)');
+    });
+    it('lightens hsl red by 50% when coefficient is 0.5', function () {
+      assert.strictEqual(lighten('hsl(0, 100%, 50%)', 0.5), 'hsl(0, 100%, 75%)');
+    });
+    it("doesn't modify hsl colors when coefficient is 0", function () {
+      assert.strictEqual(lighten('hsl(0, 100%, 50%)', 0), 'hsl(0, 100%, 50%)');
+    });
+    it("doesn't modify hsl colors when `l` is 100%", function () {
+      assert.strictEqual(lighten('hsl(0, 50%, 100%)', 0.5), 'hsl(0, 50%, 100%)');
+    });
+  });
+});

package/styles/createBreakpoints.js

@@ -1,24 +1,10 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = createBreakpoints;
-exports.keys = void 0;
-
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
-
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 // Sorted ASC by size. That's important.
 // It can't be configured as it's used statically for propTypes.
-var keys = ['xs', 'sm', 'md', 'lg', 'xl']; // Keep in mind that @media is inclusive by the CSS specification.
-
-exports.keys = keys;
+export var keys = ['xs', 'sm', 'md', 'lg', 'xl']; // Keep in mind that @media is inclusive by the CSS specification.
 
-function createBreakpoints(breakpoints) {
+export default function createBreakpoints(breakpoints) {
   var _breakpoints$values = breakpoints.values,
       values = _breakpoints$values === void 0 ? {
     xs: 0,
@@ -31,7 +17,7 @@ function createBreakpoints(breakpoints) {
       unit = _breakpoints$unit === void 0 ? 'px' : _breakpoints$unit,
       _breakpoints$step = breakpoints.step,
       step = _breakpoints$step === void 0 ? 5 : _breakpoints$step,
-      other = (0, _objectWithoutProperties2.default)(breakpoints, ["values", "unit", "step"]);
+      other = _objectWithoutProperties(breakpoints, ["values", "unit", "step"]);
 
   function up(key) {
     var value = typeof values[key] === 'number' ? values[key] : key;
@@ -69,7 +55,7 @@ function createBreakpoints(breakpoints) {
     return values[key];
   }
 
-  return (0, _objectSpread2.default)({
+  return _objectSpread({
     keys: keys,
     values: values,
     up: up,

package/styles/createBreakpoints.test.js

@@ -0,0 +1,48 @@
+import { assert } from 'chai';
+import createBreakpoints from './createBreakpoints';
+describe('createBreakpoints', function () {
+  var breakpoints = createBreakpoints({});
+  describe('up', function () {
+    it('should work for xs', function () {
+      assert.strictEqual(breakpoints.up('xs'), '@media (min-width:0px)');
+    });
+    it('should work for md', function () {
+      assert.strictEqual(breakpoints.up('md'), '@media (min-width:960px)');
+    });
+  });
+  describe('down', function () {
+    it('should work', function () {
+      assert.strictEqual(breakpoints.down('sm'), '@media (max-width:959.95px)');
+    });
+    it('should work for md', function () {
+      assert.strictEqual(breakpoints.down('md'), '@media (max-width:1279.95px)');
+    });
+    it('should use the specified key if it is not a recognized breakpoint', function () {
+      assert.strictEqual(breakpoints.down(600), '@media (max-width:599.95px)');
+    });
+    it('should apply to all sizes for xl', function () {
+      assert.strictEqual(breakpoints.down('xl'), '@media (min-width:0px)');
+    });
+  });
+  describe('between', function () {
+    it('should work', function () {
+      assert.strictEqual(breakpoints.between('sm', 'md'), '@media (min-width:600px) and (max-width:1279.95px)');
+    });
+    it('on xl should call up', function () {
+      assert.strictEqual(breakpoints.between('lg', 'xl'), '@media (min-width:1280px)');
+    });
+  });
+  describe('only', function () {
+    it('should work', function () {
+      assert.strictEqual(breakpoints.only('md'), '@media (min-width:960px) and (max-width:1279.95px)');
+    });
+    it('on xl should call up', function () {
+      assert.strictEqual(breakpoints.only('xl'), '@media (min-width:1920px)');
+    });
+  });
+  describe('width', function () {
+    it('should work', function () {
+      assert.strictEqual(breakpoints.width('md'), 960);
+    });
+  });
+});

package/styles/createGenerateClassName.js

@@ -1,23 +1,13 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = createGenerateClassName;
-
-var _warning = _interopRequireDefault(require("warning"));
-
 /* eslint-disable no-underscore-dangle */
-// People might bundle this classname generator twice.
+import warning from 'warning'; // People might bundle this classname generator twice.
 // We need to use a global.
+
 global.__MUI_GENERATOR_COUNTER__ = 0;
 var escapeRegex = /([[\].#*$><+~=|^:(),"'`\s])/g;
 
 function safePrefix(classNamePrefix) {
   var prefix = String(classNamePrefix);
-  process.env.NODE_ENV !== "production" ? (0, _warning.default)(prefix.length < 256, "Material-UI: the class name prefix is too long: ".concat(prefix, ".")) : void 0; // Sanitize the string as will be used to prefix the generated class name.
+  warning(prefix.length < 256, "Material-UI: the class name prefix is too long: ".concat(prefix, ".")); // Sanitize the string as will be used to prefix the generated class name.
 
   return prefix.replace(escapeRegex, '-');
 } // Returns a function which generates unique class names based on counters.
@@ -28,7 +18,7 @@ function safePrefix(classNamePrefix) {
 // https://github.com/cssinjs/jss/blob/4e6a05dd3f7b6572fdd3ab216861d9e446c20331/src/utils/createGenerateClassName.js
 
 
-function createGenerateClassName() {
+export default function createGenerateClassName() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   var _options$dangerouslyU = options.dangerouslyUseGlobalCSS,
       dangerouslyUseGlobalCSS = _options$dangerouslyU === void 0 ? false : _options$dangerouslyU,
@@ -50,7 +40,7 @@ function createGenerateClassName() {
 
   return function (rule, styleSheet) {
     ruleCounter += 1;
-    process.env.NODE_ENV !== "production" ? (0, _warning.default)(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.
+    warning(ruleCounter < 1e10, ['Material-UI: you might have a memory leak.', 'The ruleCounter is not supposed to grow that much.'].join('')); // Code branch the whole block at the expense of more code.
 
     if (dangerouslyUseGlobalCSS) {
       if (styleSheet) {

package/styles/createGenerateClassName.test.js

@@ -0,0 +1,141 @@
+import { assert } from 'chai';
+import consoleErrorMock from 'test/utils/consoleErrorMock';
+import createGenerateClassName from './createGenerateClassName';
+describe('createGenerateClassName', function () {
+  describe('counter', function () {
+    it('should increment a scoped counter', function () {
+      var rule = {
+        key: 'root'
+      };
+      var generateClassName1 = createGenerateClassName();
+      assert.strictEqual(generateClassName1(rule), 'root-1');
+      assert.strictEqual(generateClassName1(rule), 'root-2');
+      var generateClassName2 = createGenerateClassName();
+      assert.strictEqual(generateClassName2(rule), 'root-1');
+    });
+  });
+  it('should escape parenthesis', function () {
+    var generateClassName = createGenerateClassName();
+    assert.strictEqual(generateClassName({
+      key: 'root'
+    }, {
+      options: {
+        classNamePrefix: 'pure(MuiButton)',
+        jss: {}
+      }
+    }), 'pure-MuiButton--root-1');
+  });
+  it('should escape spaces', function () {
+    var generateClassName = createGenerateClassName();
+    assert.strictEqual(generateClassName({
+      key: 'root'
+    }, {
+      options: {
+        classNamePrefix: 'foo bar',
+        jss: {}
+      }
+    }), 'foo-bar-root-1');
+  });
+  describe('options: dangerouslyUseGlobalCSS', function () {
+    it('should use a global class name', function () {
+      var generateClassName = createGenerateClassName({
+        dangerouslyUseGlobalCSS: true
+      });
+      assert.strictEqual(generateClassName({
+        key: 'root'
+      }, {
+        options: {
+          name: 'Button',
+          classNamePrefix: 'Button2',
+          jss: {}
+        }
+      }), 'Button-root');
+      assert.strictEqual(generateClassName({
+        key: 'root'
+      }, {
+        options: {
+          classNamePrefix: 'Button',
+          jss: {}
+        }
+      }), 'Button-root-2');
+    });
+    it('should default to a non deterministic name', function () {
+      var generateClassName = createGenerateClassName({
+        dangerouslyUseGlobalCSS: true
+      });
+      assert.strictEqual(generateClassName({
+        key: 'root'
+      }), 'root-1');
+    });
+  });
+  describe('formatting', function () {
+    it('should take the sheet meta in development if available', function () {
+      var rule = {
+        key: 'root'
+      };
+      var styleSheet = {
+        options: {
+          classNamePrefix: 'Button'
+        }
+      };
+      var generateClassName = createGenerateClassName();
+      assert.strictEqual(generateClassName(rule, styleSheet), 'Button-root-1');
+    });
+    it('should use a base 10 representation', function () {
+      var rule = {
+        key: 'root'
+      };
+      var generateClassName = createGenerateClassName();
+      assert.strictEqual(generateClassName(rule), 'root-1');
+      assert.strictEqual(generateClassName(rule), 'root-2');
+      assert.strictEqual(generateClassName(rule), 'root-3');
+      assert.strictEqual(generateClassName(rule), 'root-4');
+      assert.strictEqual(generateClassName(rule), 'root-5');
+      assert.strictEqual(generateClassName(rule), 'root-6');
+      assert.strictEqual(generateClassName(rule), 'root-7');
+      assert.strictEqual(generateClassName(rule), 'root-8');
+      assert.strictEqual(generateClassName(rule), 'root-9');
+      assert.strictEqual(generateClassName(rule), 'root-10');
+    });
+    describe('production', function () {
+      // Only run the test on node.
+      if (!/jsdom/.test(window.navigator.userAgent)) {
+        return;
+      }
+
+      var nodeEnv;
+      var env = process.env;
+      before(function () {
+        nodeEnv = env.NODE_ENV;
+        env.NODE_ENV = 'production';
+        consoleErrorMock.spy();
+      });
+      after(function () {
+        env.NODE_ENV = nodeEnv;
+        consoleErrorMock.reset();
+      });
+      it('should output a short representation', function () {
+        var rule = {
+          key: 'root'
+        };
+        var generateClassName = createGenerateClassName();
+        assert.strictEqual(generateClassName(rule), 'jss1');
+      });
+      it('should work with global CSS', function () {
+        var rule = {
+          key: 'root'
+        };
+        var generateClassName = createGenerateClassName({
+          dangerouslyUseGlobalCSS: true
+        });
+        assert.strictEqual(generateClassName(rule), 'jss1');
+      });
+      it('should warn', function () {
+        createGenerateClassName();
+        createGenerateClassName();
+        assert.strictEqual(consoleErrorMock.callCount() > 0, true);
+        assert.match(consoleErrorMock.args()[0][0], /Material-UI: we have detected more than needed creation of the/);
+      });
+    });
+  });
+});

package/styles/createMixins.js

@@ -1,35 +1,24 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = createMixins;
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
-
-var _objectSpread3 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-
-function createMixins(breakpoints, spacing, mixins) {
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+export default function createMixins(breakpoints, spacing, mixins) {
   var _toolbar;
 
-  return (0, _objectSpread3.default)({
+  return _objectSpread({
     gutters: function gutters() {
       var styles = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-      return (0, _objectSpread3.default)({
+      return _objectSpread({
         paddingLeft: spacing(4),
         paddingRight: spacing(4)
-      }, styles, (0, _defineProperty2.default)({}, breakpoints.up('sm'), (0, _objectSpread3.default)({
+      }, styles, _defineProperty({}, breakpoints.up('sm'), _objectSpread({
         paddingLeft: spacing(6),
         paddingRight: spacing(6)
       }, styles[breakpoints.up('sm')])));
     },
     toolbar: (_toolbar = {
       minHeight: 56
-    }, (0, _defineProperty2.default)(_toolbar, "".concat(breakpoints.up('xs'), " and (orientation: landscape)"), {
+    }, _defineProperty(_toolbar, "".concat(breakpoints.up('xs'), " and (orientation: landscape)"), {
       minHeight: 48
-    }), (0, _defineProperty2.default)(_toolbar, breakpoints.up('sm'), {
+    }), _defineProperty(_toolbar, breakpoints.up('sm'), {
       minHeight: 64
     }), _toolbar)
   }, mixins);

package/styles/createMixins.test.js

@@ -0,0 +1,24 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import { assert } from 'chai';
+import createMixins from './createMixins';
+import createMuiTheme from './createMuiTheme';
+describe('createMixins', function () {
+  it('should be able to override the breakpoint', function () {
+    var theme = createMuiTheme();
+    var mixins = createMixins(theme.breakpoints, theme.spacing, {});
+    var mixin = mixins.gutters(_defineProperty({
+      display: 'flex'
+    }, theme.breakpoints.up('sm'), {
+      paddingLeft: 1
+    }));
+    assert.deepEqual(mixin, {
+      '@media (min-width:600px)': {
+        paddingLeft: 1,
+        paddingRight: 24
+      },
+      display: 'flex',
+      paddingLeft: 16,
+      paddingRight: 16
+    });
+  });
+});