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

package/styles/createMuiTheme.js

@@ -1,43 +1,22 @@
-"use strict";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import deepmerge from 'deepmerge'; // < 1kb payload overhead when lodash/merge is > 3kb.
+
+import isPlainObject from 'is-plain-object';
+import warning from 'warning';
+import createBreakpoints from './createBreakpoints';
+import createMixins from './createMixins';
+import createPalette from './createPalette';
+import createTypography from './createTypography';
+import shadows from './shadows';
+import shape from './shape';
+import spacing from './spacing';
+import transitions from './transitions';
+import zIndex from './zIndex';
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
-
-var _deepmerge = _interopRequireDefault(require("deepmerge"));
-
-var _isPlainObject = _interopRequireDefault(require("is-plain-object"));
-
-var _warning = _interopRequireDefault(require("warning"));
-
-var _createBreakpoints = _interopRequireDefault(require("./createBreakpoints"));
-
-var _createMixins = _interopRequireDefault(require("./createMixins"));
-
-var _createPalette = _interopRequireDefault(require("./createPalette"));
-
-var _createTypography = _interopRequireDefault(require("./createTypography"));
-
-var _shadows = _interopRequireDefault(require("./shadows"));
-
-var _shape = _interopRequireDefault(require("./shape"));
-
-var _spacing = _interopRequireDefault(require("./spacing"));
-
-var _transitions = _interopRequireDefault(require("./transitions"));
-
-var _zIndex = _interopRequireDefault(require("./zIndex"));
-
-// < 1kb payload overhead when lodash/merge is > 3kb.
 function createMuiTheme() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
   var _options$breakpoints = options.breakpoints,
       breakpointsInput = _options$breakpoints === void 0 ? {} : _options$breakpoints,
       _options$mixins = options.mixins,
@@ -47,31 +26,33 @@ function createMuiTheme() {
       shadowsInput = options.shadows,
       _options$typography = options.typography,
       typographyInput = _options$typography === void 0 ? {} : _options$typography,
-      other = (0, _objectWithoutProperties2.default)(options, ["breakpoints", "mixins", "palette", "shadows", "typography"]);
-  var palette = (0, _createPalette.default)(paletteInput);
-  var breakpoints = (0, _createBreakpoints.default)(breakpointsInput);
-  var muiTheme = (0, _objectSpread2.default)({
+      other = _objectWithoutProperties(options, ["breakpoints", "mixins", "palette", "shadows", "typography"]);
+
+  var palette = createPalette(paletteInput);
+  var breakpoints = createBreakpoints(breakpointsInput);
+
+  var muiTheme = _objectSpread({
     breakpoints: breakpoints,
     direction: 'ltr',
-    mixins: (0, _createMixins.default)(breakpoints, _spacing.default, mixinsInput),
+    mixins: createMixins(breakpoints, spacing, mixinsInput),
     overrides: {},
     // Inject custom styles
     palette: palette,
     props: {},
     // Inject custom properties
-    shadows: shadowsInput || _shadows.default,
-    typography: (0, _createTypography.default)(palette, typographyInput)
-  }, (0, _deepmerge.default)({
-    shape: _shape.default,
-    spacing: _spacing.default,
-    transitions: _transitions.default,
-    zIndex: _zIndex.default
+    shadows: shadowsInput || shadows,
+    typography: createTypography(palette, typographyInput)
+  }, deepmerge({
+    shape: shape,
+    spacing: spacing,
+    transitions: transitions,
+    zIndex: zIndex
   }, other, {
-    isMergeableObject: _isPlainObject.default
+    isMergeableObject: isPlainObject
   }));
-  process.env.NODE_ENV !== "production" ? (0, _warning.default)(muiTheme.shadows.length === 25, 'Material-UI: the shadows array provided to createMuiTheme should support 25 elevations.') : void 0;
+
+  warning(muiTheme.shadows.length === 25, 'Material-UI: the shadows array provided to createMuiTheme should support 25 elevations.');
   return muiTheme;
 }
 
-var _default = createMuiTheme;
-exports.default = _default;
+export default createMuiTheme;

package/styles/createMuiTheme.test.js

@@ -0,0 +1,67 @@
+import { assert } from 'chai';
+import createMuiTheme from './createMuiTheme';
+import { deepOrange, green } from '@material-ui/core/colors';
+describe('createMuiTheme', function () {
+  it('should have a palette', function () {
+    var muiTheme = createMuiTheme();
+    assert.strictEqual(typeof createMuiTheme, 'function', 'should be a function');
+    assert.ok(muiTheme.palette, 'should have a palette');
+  });
+  it('should have the custom palette', function () {
+    var muiTheme = createMuiTheme({
+      palette: {
+        primary: {
+          main: deepOrange[500]
+        },
+        secondary: {
+          main: green.A400
+        }
+      }
+    });
+    assert.strictEqual(muiTheme.palette.primary.main, deepOrange[500], 'should have a palette');
+    assert.strictEqual(muiTheme.palette.secondary.main, green.A400, 'should have a palette');
+  });
+  it('should allow providing a partial structure', function () {
+    var muiTheme = createMuiTheme({
+      transitions: {
+        duration: {
+          shortest: 150
+        }
+      }
+    });
+    assert.notStrictEqual(muiTheme.transitions.duration.shorter, undefined);
+  });
+  describe('shadows', function () {
+    it('should provide the default array', function () {
+      var muiTheme = createMuiTheme();
+      assert.strictEqual(muiTheme.shadows[2], '0px 1px 5px 0px rgba(0, 0, 0, 0.2),' + '0px 2px 2px 0px rgba(0, 0, 0, 0.14),0px 3px 1px -2px rgba(0, 0, 0, 0.12)');
+    });
+    it('should override the array as expected', function () {
+      var shadows = ['none', 1, 1, 1, 2, 3, 3, 4, 5, 5, 6, 6, 7, 7, 7, 8, 8, 8, 9, 9, 10, 10, 10, 11, 11];
+      var muiTheme = createMuiTheme({
+        shadows: shadows
+      });
+      assert.strictEqual(muiTheme.shadows, shadows);
+    });
+  });
+  describe('props', function () {
+    it('should have the props as expected', function () {
+      var props = {
+        MuiDialog: {
+          fullScreen: true,
+          fullWidth: false
+        },
+        MuiButtonBase: {
+          disableRipple: true
+        },
+        MuiPopover: {
+          container: document.createElement('div')
+        }
+      };
+      var muiTheme = createMuiTheme({
+        props: props
+      });
+      assert.deepEqual(muiTheme.props, props);
+    });
+  });
+});

package/styles/createPalette.js

@@ -1,31 +1,13 @@
-"use strict";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+import warning from 'warning';
+import deepmerge from 'deepmerge'; // < 1kb payload overhead when lodash/merge is > 3kb.
 
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = createPalette;
-exports.dark = exports.light = void 0;
-
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
-
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectWithoutProperties"));
-
-var _warning = _interopRequireDefault(require("warning"));
-
-var _deepmerge = _interopRequireDefault(require("deepmerge"));
-
-var _grey = _interopRequireDefault(require("@material-ui/core/colors/grey"));
-
-var _red = _interopRequireDefault(require("@material-ui/core/colors/red"));
-
-var _common = _interopRequireDefault(require("@material-ui/core/colors/common"));
-
-var _colorManipulator = require("./colorManipulator");
-
-// < 1kb payload overhead when lodash/merge is > 3kb.
-var light = {
+import grey from '@material-ui/core/colors/grey';
+import red from '@material-ui/core/colors/red';
+import common from '@material-ui/core/colors/common';
+import { getContrastRatio, darken, lighten } from './colorManipulator';
+export var light = {
   global: {
     background1: '#FFFFFF',
     background2: '#F8F9FB',
@@ -52,8 +34,8 @@ var light = {
   // The background colors used to style the surfaces.
   // Consistency between these values is important.
   background: {
-    paper: _common.default.white,
-    default: _grey.default[50]
+    paper: common.white,
+    default: grey[50]
   },
   // The colors used to style the action elements.
   action: {
@@ -77,8 +59,7 @@ var light = {
     disabled: '#FAFAFA'
   }
 };
-exports.light = light;
-var dark = {
+export var dark = {
   global: {
     background1: '#303030',
     background2: '#212121',
@@ -90,7 +71,7 @@ var dark = {
     background3: '#303030'
   },
   text: {
-    primary: _common.default.white,
+    primary: common.white,
     secondary: 'rgba(255, 255, 255, 0.7)',
     disabled: 'rgba(255, 255, 255, 0.5)',
     hint: 'rgba(255, 255, 255, 0.5)',
@@ -98,11 +79,11 @@ var dark = {
   },
   divider: 'rgba(255, 255, 255, 0.12)',
   background: {
-    paper: _grey.default[800],
+    paper: grey[800],
     default: '#303030'
   },
   action: {
-    active: _common.default.white,
+    active: common.white,
     hover: 'rgba(255, 255, 255, 0.1)',
     hoverOpacity: 0.1,
     selected: 'rgba(255, 255, 255, 0.2)',
@@ -117,21 +98,20 @@ var dark = {
     disabled: 'rgba(255, 255, 255, 0.5)'
   }
 };
-exports.dark = dark;
 
 function addLightOrDark(intent, direction, shade, tonalOffset) {
   if (!intent[direction]) {
     if (intent.hasOwnProperty(shade)) {
       intent[direction] = intent[shade];
     } else if (direction === 'light') {
-      intent.light = (0, _colorManipulator.lighten)(intent.main, tonalOffset);
+      intent.light = lighten(intent.main, tonalOffset);
     } else if (direction === 'dark') {
-      intent.dark = (0, _colorManipulator.darken)(intent.main, tonalOffset * 1.5);
+      intent.dark = darken(intent.main, tonalOffset * 1.5);
     }
   }
 }
 
-function createPalette(palette) {
+export default function createPalette(palette) {
   var _palette$primary = palette.primary,
       primary = _palette$primary === void 0 ? {
     light: '#5bc8ef',
@@ -178,9 +158,9 @@ function createPalette(palette) {
   } : _palette$neutral,
       _palette$error = palette.error,
       error = _palette$error === void 0 ? {
-    light: _red.default[300],
-    main: _red.default[500],
-    dark: _red.default[700]
+    light: red[300],
+    main: red[500],
+    dark: red[700]
   } : _palette$error,
       _palette$lookup = palette.lookup,
       lookup = _palette$lookup === void 0 ? {
@@ -195,17 +175,17 @@ function createPalette(palette) {
       tonalOffset = _palette$tonalOffset === void 0 ? 0.2 : _palette$tonalOffset,
       _palette$context = palette.context,
       context = _palette$context === void 0 ? 'local' : _palette$context,
-      other = (0, _objectWithoutProperties2.default)(palette, ["primary", "secondary", "positive", "negative", "middle", "neutral", "error", "lookup", "type", "contrastThreshold", "tonalOffset", "context"]);
+      other = _objectWithoutProperties(palette, ["primary", "secondary", "positive", "negative", "middle", "neutral", "error", "lookup", "type", "contrastThreshold", "tonalOffset", "context"]);
 
   function getContrastText(background) {
     // Use the same logic as
     // Bootstrap: https://github.com/twbs/bootstrap/blob/1d6e3710dd447de1a200f29e8fa521f8a0908f70/scss/_functions.scss#L59
     // and material-components-web https://github.com/material-components/material-components-web/blob/ac46b8863c4dab9fc22c4c662dc6bd1b65dd652f/packages/mdc-theme/_functions.scss#L54
-    var contrastText = (0, _colorManipulator.getContrastRatio)(background, dark.text.primary) >= contrastThreshold ? dark.text.primary : light.text.primary;
+    var contrastText = getContrastRatio(background, dark.text.primary) >= contrastThreshold ? dark.text.primary : light.text.primary;
 
     if (process.env.NODE_ENV !== 'production') {
-      var contrast = (0, _colorManipulator.getContrastRatio)(background, contrastText);
-      process.env.NODE_ENV !== "production" ? (0, _warning.default)(contrast >= 2.2, ["Material-UI: the contrast ratio of ".concat(contrast, ":1 for ").concat(contrastText, " on ").concat(background), 'falls below the WACG recommended absolute minimum contrast ratio of 3:1.', 'https://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-contrast'].join('\n')) : void 0;
+      var contrast = getContrastRatio(background, contrastText);
+      warning(contrast >= 2.2, ["Material-UI: the contrast ratio of ".concat(contrast, ":1 for ").concat(contrastText, " on ").concat(background), 'falls below the WACG recommended absolute minimum contrast ratio of 3:1.', 'https://www.w3.org/TR/2008/REC-WCAG20-20081211/#visual-audio-contrast-contrast'].join('\n'));
     }
 
     return contrastText;
@@ -239,15 +219,15 @@ function createPalette(palette) {
     dark: dark,
     light: light
   };
-  process.env.NODE_ENV !== "production" ? (0, _warning.default)(types[type], "Material-UI: the palette type `".concat(type, "` is not supported.")) : void 0;
+  warning(types[type], "Material-UI: the palette type `".concat(type, "` is not supported."));
   var contexts = {
     local: types[type] ? types[type].local : {},
     global: types[type] ? types[type].global : {}
   };
-  process.env.NODE_ENV !== "production" ? (0, _warning.default)(contexts[context], "Material-UI: the context `".concat(context, "` is not supported.")) : void 0;
-  var paletteOutput = (0, _deepmerge.default)((0, _objectSpread2.default)({
+  warning(contexts[context], "Material-UI: the context `".concat(context, "` is not supported."));
+  var paletteOutput = deepmerge(_objectSpread({
     // A collection of common colors.
-    common: _common.default,
+    common: common,
     // The palette type, can be light or dark.
     type: type,
     // The colors used to represent primary interface elements for a user.
@@ -267,7 +247,7 @@ function createPalette(palette) {
     // The colors used to represent form elements that have lookup state.
     lookup: lookup,
     // The grey colors.
-    grey: _grey.default,
+    grey: grey,
     // Used by `getContrastText()` to maximize the contrast between the background and
     // the text.
     contrastThreshold: contrastThreshold,

package/styles/createPalette.test.js

@@ -0,0 +1,159 @@
+import { assert } from 'chai';
+import consoleErrorMock from 'test/utils/consoleErrorMock';
+import { pink, deepOrange, green, red } from '@material-ui/core/colors';
+import { lighten, darken } from './colorManipulator';
+import createPalette, { dark, light } from './createPalette';
+describe('createPalette()', function () {
+  before(function () {
+    consoleErrorMock.spy();
+  });
+  after(function () {
+    consoleErrorMock.reset();
+  });
+  it('should create a material design palette according to spec', function () {
+    var palette = createPalette({});
+    assert.strictEqual(palette.primary.main, '#00ade9', 'should use blue hipay as the default primary main color');
+    assert.strictEqual(palette.primary.light, '#5bc8ef', 'should use light blue hipay as the default primary light color');
+    assert.strictEqual(palette.primary.dark, '#007ca9', 'should use dark blue hipay as the default primary dark color');
+    assert.strictEqual(palette.primary.contrastText, '#FFFFFF', 'should use white as the default primary contrastText color');
+    assert.strictEqual(palette.secondary.main, '#ffcf21', 'should use yellow hipay as the default secondary main color');
+    assert.strictEqual(palette.secondary.light, '#ffd94f', 'should use light yellow hipay as the default secondary light color');
+    assert.strictEqual(palette.secondary.dark, '#E9BE30', 'should use dark yellow hipay as the default secondary dark color');
+    assert.strictEqual(palette.secondary.contrastText, '#FFFFFF', 'should use white as the default secondary contrastText color');
+    assert.strictEqual(palette.error.main, red[500], 'should use red[500] as the default error main color');
+    assert.strictEqual(palette.error.light, red[300], 'should use red[300] as the default error light color');
+    assert.strictEqual(palette.error.dark, red[700], 'should use red[700] as the default error dark color');
+    assert.strictEqual(palette.text, light.text, 'should use light theme text for a light theme by default');
+  });
+  it('should create a palette with Material colors', function () {
+    var palette = createPalette({
+      primary: deepOrange,
+      secondary: green,
+      error: pink
+    });
+    assert.strictEqual(palette.primary.main, deepOrange[500], 'should use deepOrange[500] as the primary main color');
+    assert.strictEqual(palette.primary.light, deepOrange[300], 'should use deepOrange[300] as the primary light color');
+    assert.strictEqual(palette.primary.dark, deepOrange[700], 'should use deepOrange[700] as the primary dark color');
+    assert.strictEqual(palette.secondary.main, green.A400, 'should use green.A400 as the secondary main color');
+    assert.strictEqual(palette.secondary.light, green.A200, 'should use green.A200 as the secondary light color');
+    assert.strictEqual(palette.secondary.dark, green.A700, 'should use green.A700 as the secondary dark color');
+    assert.strictEqual(palette.error.main, pink[500], 'should use pink[500] as the error main color');
+    assert.strictEqual(palette.error.light, pink[300], 'should use pink[300] as the error light color');
+    assert.strictEqual(palette.error.dark, pink[700], 'should use pink[700] as the error dark color');
+    assert.strictEqual(palette.text, light.text, 'should use light theme text');
+  });
+  it('should create a palette with custom colors', function () {
+    var palette = createPalette({
+      primary: {
+        main: deepOrange[500],
+        light: deepOrange[300],
+        dark: deepOrange[700],
+        contrastText: '#ffffff'
+      },
+      secondary: {
+        main: green.A400,
+        light: green.A200,
+        dark: green.A700,
+        contrastText: '#000000'
+      },
+      error: {
+        main: pink[500],
+        light: pink[300],
+        dark: pink[700],
+        contrastText: '#00ff00'
+      }
+    });
+    assert.strictEqual(palette.primary.main, deepOrange[500], 'should use deepOrange[500] as the primary main color');
+    assert.strictEqual(palette.primary.light, deepOrange[300], 'should use deepOrange[300] as the primary light color');
+    assert.strictEqual(palette.primary.dark, deepOrange[700], 'should use deepOrange[700] as the primary dark color');
+    assert.strictEqual(palette.primary.contrastText, '#ffffff', 'should use #ffffff as the secondary contrastText color');
+    assert.strictEqual(palette.secondary.main, green.A400, 'should use green.A400 as the secondary main color');
+    assert.strictEqual(palette.secondary.light, green.A200, 'should use green.A200 as the secondary light color');
+    assert.strictEqual(palette.secondary.dark, green.A700, 'should use green.A700 as the secondary dark color');
+    assert.strictEqual(palette.secondary.contrastText, '#000000', 'should use #000000 as the secondary contrastText color');
+    assert.strictEqual(palette.error.main, pink[500], 'should use pink[500] as the error main color');
+    assert.strictEqual(palette.error.light, pink[300], 'should use pink[300] as the error light color');
+    assert.strictEqual(palette.error.dark, pink[700], 'should use pink[700] as the error dark color');
+    assert.strictEqual(palette.error.contrastText, '#00ff00', 'should use #00ff00 as the error contrastText color');
+    assert.strictEqual(palette.text, light.text, 'should use light theme text');
+  });
+  it('should calculate light and dark colors if not provided', function () {
+    var palette = createPalette({
+      primary: {
+        main: deepOrange[500]
+      },
+      secondary: {
+        main: green.A400
+      },
+      error: {
+        main: pink[500]
+      }
+    });
+    assert.strictEqual(palette.primary.main, deepOrange[500], 'should use deepOrange[500] as the primary main color');
+    assert.strictEqual(palette.primary.light, lighten(deepOrange[500], 0.2), 'should use lighten(deepOrange[500], 0.2) as the primary light color');
+    assert.strictEqual(palette.primary.dark, darken(deepOrange[500], 0.3), 'should use darken(deepOrange[500], 0.3) as the primary dark color');
+    assert.strictEqual(palette.secondary.main, green.A400, 'should use green.A400 as the secondary main color');
+    assert.strictEqual(palette.secondary.light, lighten(green.A400, 0.2), 'should use lighten(green.A400, 0.2) as the secondary light color');
+    assert.strictEqual(palette.secondary.dark, darken(green.A400, 0.3), 'should use darken(green.A400, 0.3) as the secondary dark color');
+    assert.strictEqual(palette.error.main, pink[500], 'should use pink[500] as the error main color');
+    assert.strictEqual(palette.error.light, lighten(pink[500], 0.2), 'should use lighten(pink[500], 0.2) as the error light color');
+    assert.strictEqual(palette.error.dark, darken(pink[500], 0.3), 'should use darken(pink[500], 0.3) as the error dark color');
+  });
+  it('should calculate light and dark colors using the provided tonalOffset', function () {
+    var palette = createPalette({
+      primary: {
+        main: deepOrange[500]
+      },
+      secondary: {
+        main: green.A400
+      },
+      error: {
+        main: red[500]
+      },
+      tonalOffset: 0.1
+    }); // primary
+
+    assert.strictEqual(palette.primary.main, deepOrange[500], 'should use deepOrange[500] as the primary main color');
+    assert.strictEqual(palette.primary.light, lighten(deepOrange[500], 0.1), 'should use lighten(deepOrange[500], 0.1) as the primary light color');
+    assert.strictEqual(palette.primary.dark, darken(deepOrange[500], 0.15), 'should use darken(deepOrange[500], 0.1) as the primary dark color'); // secondary
+
+    assert.strictEqual(palette.secondary.main, green.A400, 'should use green.A400 as the secondary main color');
+    assert.strictEqual(palette.secondary.light, lighten(green.A400, 0.1), 'should use lighten(green.A400, 0.1) as the secondary light color');
+    assert.strictEqual(palette.secondary.dark, darken(green.A400, 0.15), 'should use darken(green.A400, 0.1) as the secondary dark color'); // error
+
+    assert.strictEqual(palette.error.main, red[500], 'should use red[500] as the error main color');
+    assert.strictEqual(palette.error.light, lighten(red[500], 0.1), 'should use lighten(red[500], 0.1) as the error light color');
+    assert.strictEqual(palette.error.dark, darken(red[500], 0.15), 'should use darken(red[500], 0.1) as the error dark color');
+  });
+  it('should calculate contrastText using the provided contrastThreshold', function () {
+    var palette = createPalette({
+      contrastThreshold: 7
+    });
+    assert.strictEqual(palette.primary.contrastText, '#FFFFFF', 'should use white as the default primary contrastText color');
+    assert.strictEqual(palette.secondary.contrastText, '#FFFFFF', 'should use white as the default secondary contrastText color');
+  });
+  it('should create a dark palette', function () {
+    var palette = createPalette({
+      type: 'dark'
+    });
+    assert.strictEqual(palette.primary.main, '#00ade9', 'should use indigo as the default primary color');
+    assert.strictEqual(palette.secondary.main, '#ffcf21', 'should use pink as the default secondary color');
+    assert.strictEqual(palette.text, dark.text, 'should use dark theme text');
+    assert.strictEqual(consoleErrorMock.callCount(), 0);
+  });
+  it('should throw an exception when an invalid type is specified', function () {
+    createPalette({
+      type: 'foo'
+    });
+    assert.strictEqual(consoleErrorMock.callCount(), 1);
+    assert.match(consoleErrorMock.args()[0][0], /Material-UI: the palette type `foo` is not supported/);
+  });
+  describe('augmentColor', function () {
+    it('should throw when the input is invalid', function () {
+      var palette = createPalette({});
+      assert.throws(function () {
+        palette.augmentColor({});
+      }, /The color object needs to have a/);
+    });
+  });
+});

package/styles/createStyles.js

@@ -1,10 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = createStyles;
-
-function createStyles(styles) {
+export default function createStyles(styles) {
   return styles;
 }

package/styles/createStyles.test.js

@@ -0,0 +1,8 @@
+import { assert } from 'chai';
+import { createStyles } from '.';
+describe('createStyles', function () {
+  it('is the identity function', function () {
+    var styles = {};
+    assert.strictEqual(createStyles(styles), styles);
+  });
+});