react-aspect-ratio - npm Package Compare versions

Comparing version 1.0.40 to 1.0.41

dist/__tests__/index.js

@@ -9,6 +9,8 @@ "use strict";
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; if (obj != null) { var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
 // // eslint-disable-line import/no-named-as-default
@@ -18,3 +20,3 @@ describe('Aspect Ratio', function () {
     it('should render wrapper for children', function () {
-      var innerImage = _react.default.createElement("img", {
+      var innerImage = _react["default"].createElement("img", {
         src: "https://foo.bar",
@@ -24,3 +26,3 @@ alt: "demo"
 
-      var node = _reactTestRenderer.default.create(_react.default.createElement(_index.default, {
+      var node = _reactTestRenderer["default"].create(_react["default"].createElement(_index["default"], {
         ratio: "4/3"
@@ -32,3 +34,3 @@ }, innerImage)).toJSON();
     it('should support number as props', function () {
-      var innerImage = _react.default.createElement("img", {
+      var innerImage = _react["default"].createElement("img", {
         src: "https://foo.bar",
@@ -38,3 +40,3 @@ alt: "demo"
 
-      var node = _reactTestRenderer.default.create(_react.default.createElement(_index.default, {
+      var node = _reactTestRenderer["default"].create(_react["default"].createElement(_index["default"], {
         ratio: 0.75
@@ -46,3 +48,3 @@ }, innerImage)).toJSON();
     it('custom style willl be adpoted', function () {
-      var innerImage = _react.default.createElement("img", {
+      var innerImage = _react["default"].createElement("img", {
         src: "https://foo.bar",
@@ -52,3 +54,3 @@ alt: "demo"
 
-      var node = _reactTestRenderer.default.create(_react.default.createElement(_index.default, {
+      var node = _reactTestRenderer["default"].create(_react["default"].createElement(_index["default"], {
         ratio: "4/3",
@@ -65,3 +67,3 @@ style: {
     it('should render wrapper for children', function () {
-      var innerImage = _react.default.createElement("img", {
+      var innerImage = _react["default"].createElement("img", {
         src: "https://foo.bar",
@@ -71,3 +73,3 @@ alt: "demo"
 
-      var node = _reactTestRenderer.default.create(_react.default.createElement(_index.AspectRatio, {
+      var node = _reactTestRenderer["default"].create(_react["default"].createElement(_index.AspectRatio, {
         ratio: "4/3"
@@ -79,3 +81,3 @@ }, innerImage)).toJSON();
     it('should support number as props', function () {
-      var innerImage = _react.default.createElement("img", {
+      var innerImage = _react["default"].createElement("img", {
         src: "https://foo.bar",
@@ -85,3 +87,3 @@ alt: "demo"
 
-      var node = _reactTestRenderer.default.create(_react.default.createElement(_index.AspectRatio, {
+      var node = _reactTestRenderer["default"].create(_react["default"].createElement(_index.AspectRatio, {
         ratio: 0.75
@@ -93,3 +95,3 @@ }, innerImage)).toJSON();
     it('custom style willl be adpoted', function () {
-      var innerImage = _react.default.createElement("img", {
+      var innerImage = _react["default"].createElement("img", {
         src: "https://foo.bar",
@@ -99,3 +101,3 @@ alt: "demo"
 
-      var node = _reactTestRenderer.default.create(_react.default.createElement(_index.AspectRatio, {
+      var node = _reactTestRenderer["default"].create(_react["default"].createElement(_index.AspectRatio, {
         ratio: "4/3",
@@ -102,0 +104,0 @@ style: {

dist/es/__tests__/index.js

@@ -9,4 +9,6 @@ "use strict";
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; if (obj != null) { var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -18,3 +20,3 @@
     it('should render wrapper for children', () => {
-      const innerImage = _react.default.createElement("img", {
+      var innerImage = _react.default.createElement("img", {
         src: "https://foo.bar",
@@ -24,3 +26,3 @@ alt: "demo"
 
-      const node = _reactTestRenderer.default.create(_react.default.createElement(_index.default, {
+      var node = _reactTestRenderer.default.create(_react.default.createElement(_index.default, {
         ratio: "4/3"
@@ -32,3 +34,3 @@ }, innerImage)).toJSON();
     it('should support number as props', () => {
-      const innerImage = _react.default.createElement("img", {
+      var innerImage = _react.default.createElement("img", {
         src: "https://foo.bar",
@@ -38,3 +40,3 @@ alt: "demo"
 
-      const node = _reactTestRenderer.default.create(_react.default.createElement(_index.default, {
+      var node = _reactTestRenderer.default.create(_react.default.createElement(_index.default, {
         ratio: 0.75
@@ -46,3 +48,3 @@ }, innerImage)).toJSON();
     it('custom style willl be adpoted', () => {
-      const innerImage = _react.default.createElement("img", {
+      var innerImage = _react.default.createElement("img", {
         src: "https://foo.bar",
@@ -52,3 +54,3 @@ alt: "demo"
 
-      const node = _reactTestRenderer.default.create(_react.default.createElement(_index.default, {
+      var node = _reactTestRenderer.default.create(_react.default.createElement(_index.default, {
         ratio: "4/3",
@@ -65,3 +67,3 @@ style: {
     it('should render wrapper for children', () => {
-      const innerImage = _react.default.createElement("img", {
+      var innerImage = _react.default.createElement("img", {
         src: "https://foo.bar",
@@ -71,3 +73,3 @@ alt: "demo"
 
-      const node = _reactTestRenderer.default.create(_react.default.createElement(_index.AspectRatio, {
+      var node = _reactTestRenderer.default.create(_react.default.createElement(_index.AspectRatio, {
         ratio: "4/3"
@@ -79,3 +81,3 @@ }, innerImage)).toJSON();
     it('should support number as props', () => {
-      const innerImage = _react.default.createElement("img", {
+      var innerImage = _react.default.createElement("img", {
         src: "https://foo.bar",
@@ -85,3 +87,3 @@ alt: "demo"
 
-      const node = _reactTestRenderer.default.create(_react.default.createElement(_index.AspectRatio, {
+      var node = _reactTestRenderer.default.create(_react.default.createElement(_index.AspectRatio, {
         ratio: 0.75
@@ -93,3 +95,3 @@ }, innerImage)).toJSON();
     it('custom style willl be adpoted', () => {
-      const innerImage = _react.default.createElement("img", {
+      var innerImage = _react.default.createElement("img", {
         src: "https://foo.bar",
@@ -99,3 +101,3 @@ alt: "demo"
 
-      const node = _reactTestRenderer.default.create(_react.default.createElement(_index.AspectRatio, {
+      var node = _reactTestRenderer.default.create(_react.default.createElement(_index.AspectRatio, {
         ratio: "4/3",
@@ -102,0 +104,0 @@ style: {

dist/es/index.js

@@ -15,3 +15,3 @@ "use strict";
 exports.default = _default;
-const AspectRatio = _reactLatest.default;
+var AspectRatio = _reactLatest.default;
 exports.AspectRatio = AspectRatio;

dist/es/react-15.6.js

@@ -8,4 +8,6 @@ "use strict";
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; if (obj != null) { var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -17,3 +19,3 @@
 
-const CUSTOM_PROPERTY_NAME = '--aspect-ratio';
+var CUSTOM_PROPERTY_NAME = '--aspect-ratio';
 
@@ -33,9 +35,11 @@ class AspectRatio extends _react.Component {
     if (this.node) {
-      const node = this.node; // BC for older version of React https://github.com/facebook/react/issues/6411
+      var {
+        node
+      } = this; // BC for older version of React https://github.com/facebook/react/issues/6411
       // check if React support custom property AFTER
 
-      const customPropertyValue = node.style.getPropertyValue(CUSTOM_PROPERTY_NAME);
+      var customPropertyValue = node.style.getPropertyValue(CUSTOM_PROPERTY_NAME);
 
       if (!customPropertyValue) {
-        node.style.setProperty(CUSTOM_PROPERTY_NAME, `(${this.props.ratio})`);
+        node.style.setProperty(CUSTOM_PROPERTY_NAME, "(" + this.props.ratio + ")");
       }
@@ -46,12 +50,14 @@ }
   render() {
-    const _this$props = this.props,
-          ratio = _this$props.ratio,
-          style = _this$props.style,
-          children = _this$props.children,
-          otherProps = _objectWithoutPropertiesLoose(_this$props, ["ratio", "style", "children"]); // eslint-disable-line no-unused-vars
+    var _this$props = this.props,
+        {
+      ratio,
+      style,
+      children
+    } = _this$props,
+        otherProps = _objectWithoutPropertiesLoose(_this$props, ["ratio", "style", "children"]); // eslint-disable-line no-unused-vars
 
 
-    const newStyle = _extends({}, style, {
+    var newStyle = _extends({}, style, {
       // https://github.com/roderickhsiao/react-aspect-ratio/commit/53ec15858ae186c41e70b8c14cc5a5b6e97cb6e3
-      [CUSTOM_PROPERTY_NAME]: `(${ratio})`
+      [CUSTOM_PROPERTY_NAME]: "(" + ratio + ")"
     });
@@ -58,0 +64,0 @@

dist/es/react-latest.js

@@ -14,14 +14,16 @@ "use strict";
 
-const CUSTOM_PROPERTY_NAME = '--aspect-ratio';
+var CUSTOM_PROPERTY_NAME = '--aspect-ratio';
 
-const AspectRatio = props => {
-  const ratio = props.ratio,
-        style = props.style,
-        children = props.children,
-        otherProps = _objectWithoutPropertiesLoose(props, ["ratio", "style", "children"]); // eslint-disable-line no-unused-vars
+var AspectRatio = props => {
+  var {
+    ratio,
+    style,
+    children
+  } = props,
+      otherProps = _objectWithoutPropertiesLoose(props, ["ratio", "style", "children"]); // eslint-disable-line no-unused-vars
 
 
-  const newStyle = _extends({}, style, {
+  var newStyle = _extends({}, style, {
     // https://github.com/roderickhsiao/react-aspect-ratio/commit/53ec15858ae186c41e70b8c14cc5a5b6e97cb6e3
-    [CUSTOM_PROPERTY_NAME]: `(${ratio})`
+    [CUSTOM_PROPERTY_NAME]: "(" + ratio + ")"
   });
@@ -28,0 +30,0 @@

dist/es/stories/index.js

@@ -7,4 +7,2 @@ "use strict";
 
-var _storybookAddonJsx = _interopRequireDefault(require("storybook-addon-jsx"));
-
 var _index = require("../index");
@@ -16,9 +14,9 @@
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; if (obj != null) { var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-(0, _react2.setAddon)(_storybookAddonJsx.default);
-
-const PageTitle = () => _react.default.createElement("div", {
+// import JSXAddon from 'storybook-addon-jsx';
+// setAddon(JSXAddon);
+var PageTitle = () => _react.default.createElement("div", {
   className: "page__title"
@@ -41,27 +39,9 @@ }, _react.default.createElement("h1", {
 
-const lorem = `
-Lorem ipsum dolor sit amet, ut summo disputationi duo. Ut per consulatu liberavisse. Brute putant ius ei, ei sea impetus imperdiet, usu ea impetus maiorum. Ne mel solet epicuri, quas numquam no vis. In blandit argumentum persequeris eum, quo ad vidisse meliore.
+var lorem = "\nLorem ipsum dolor sit amet, ut summo disputationi duo. Ut per consulatu liberavisse. Brute putant ius ei, ei sea impetus imperdiet, usu ea impetus maiorum. Ne mel solet epicuri, quas numquam no vis. In blandit argumentum persequeris eum, quo ad vidisse meliore.\n\nNec laboramus instructior ad, sit maiorum antiopam id. Ea soluta appareat mea, cu nec bonorum tibique inimicus. Ex solet quaerendum scriptorem duo. Eu decore efficiantur cum, elit denique no quo. Mei ut quis dicat falli, pericula omittantur et per, sed eros philosophia definitiones in.\n\nAn feugiat ornatus dignissim vis, vitae invenire consectetuer vim no. Et pri stet lorem vulputate. Ad invidunt percipitur nam, option indoctum ullamcorper ius te. Fastidii petentium eu cum, ei natum etiam sed, mel cu dolor conclusionemque. Quo an omnium scripserit, an commodo habemus voluptatum mea. Vim justo probatus et, eu idque ullum iudicabit sea.\n\nNec ex utamur partiendo, ne nisl hinc voluptaria ius, no etiam fabellas pro. Usu ea harum graeci persequeris. Vis nibh aeque aliquid id, vel esse laudem evertitur ne. Affert bonorum id ius, cum tincidunt pertinacia te. Quo eu accumsan sententiae, illum referrentur ut vis.\n\nCu qui quidam euismod. Qui ex vide cibo sententiae, sit timeam atomorum scribentur ad. Eu nonumy accusamus vis, eius idque dicit cu vim. Ei erat voluptua dissentias pri, mei primis accusamus philosophia at, ad eos minim salutandi. Vis sint probo consetetur te, idque falli apeirian duo ea, commune perfecto id sed.\n\nEi pro dico ullamcorper, partem facilisis an est. An eos meis dolorem scriptorem. Duo quando discere ei. Qui oratio corpora efficiendi ad. Et nam facer error scripta. Ne vis populo praesent, cu cum purto tacimates. Cu dissentiunt comprehensam his.\n\nNe vim omnes verterem, id usu invidunt facilisi deserunt, vis ubique conclusionemque ea. Qui ignota invenire ne. Sit iriure reprimique ei, melius diceret maiorum ut has, quo aliquid fabulas forensibus te. Usu tibique consequat ea, vidisse comprehensam eum at. Ad fugit corpora nominavi pri, an pro wisi adhuc novum. Eam quod vero convenire et, ex deseruisse disputationi pro, malorum admodum prodesset pro et.\n\nEst eu dictas gubergren repudiandae. Vim eu vocent viderer, at suas voluptatibus pri, qui aliquip suscipit ut. No usu lorem regione lobortis, erant explicari ius no. Eos ea brute errem, voluptaria mnesarchum cu pri, choro ancillae euripidis id vis. Vim magna inermis ei, vidit docendi vix ad.\n\nIpsum choro cu duo, eu suas iusto complectitur duo. Eos eu ridens eruditi, mea ea assum verterem rationibus. Nobis dolores ut sit, soleat reprimique cu qui. Legere pertinax an vix, dolore incorrupte no ius. Nam in reque nostrum elaboraret. Ei ius harum splendide. Cum ex appetere hendrerit, vis cu rebum legimus dissentiunt, novum dicunt ad est.\n\nUt quo esse noluisse, in per admodum eligendi persequeris. Vel te munere eripuit, eu prompta iuvaret propriae per, ei mel omnis suavitate. Mea at quem veri quaeque. Ea his salutatus posidonium, salutatus hendrerit vel no, nulla sonet referrentur ne pro. Mea tota constituto mediocritatem ex, ut vix nusquam molestie signiferumque.\n";
 
-Nec laboramus instructior ad, sit maiorum antiopam id. Ea soluta appareat mea, cu nec bonorum tibique inimicus. Ex solet quaerendum scriptorem duo. Eu decore efficiantur cum, elit denique no quo. Mei ut quis dicat falli, pericula omittantur et per, sed eros philosophia definitiones in.
-
-An feugiat ornatus dignissim vis, vitae invenire consectetuer vim no. Et pri stet lorem vulputate. Ad invidunt percipitur nam, option indoctum ullamcorper ius te. Fastidii petentium eu cum, ei natum etiam sed, mel cu dolor conclusionemque. Quo an omnium scripserit, an commodo habemus voluptatum mea. Vim justo probatus et, eu idque ullum iudicabit sea.
-
-Nec ex utamur partiendo, ne nisl hinc voluptaria ius, no etiam fabellas pro. Usu ea harum graeci persequeris. Vis nibh aeque aliquid id, vel esse laudem evertitur ne. Affert bonorum id ius, cum tincidunt pertinacia te. Quo eu accumsan sententiae, illum referrentur ut vis.
-
-Cu qui quidam euismod. Qui ex vide cibo sententiae, sit timeam atomorum scribentur ad. Eu nonumy accusamus vis, eius idque dicit cu vim. Ei erat voluptua dissentias pri, mei primis accusamus philosophia at, ad eos minim salutandi. Vis sint probo consetetur te, idque falli apeirian duo ea, commune perfecto id sed.
-
-Ei pro dico ullamcorper, partem facilisis an est. An eos meis dolorem scriptorem. Duo quando discere ei. Qui oratio corpora efficiendi ad. Et nam facer error scripta. Ne vis populo praesent, cu cum purto tacimates. Cu dissentiunt comprehensam his.
-
-Ne vim omnes verterem, id usu invidunt facilisi deserunt, vis ubique conclusionemque ea. Qui ignota invenire ne. Sit iriure reprimique ei, melius diceret maiorum ut has, quo aliquid fabulas forensibus te. Usu tibique consequat ea, vidisse comprehensam eum at. Ad fugit corpora nominavi pri, an pro wisi adhuc novum. Eam quod vero convenire et, ex deseruisse disputationi pro, malorum admodum prodesset pro et.
-
-Est eu dictas gubergren repudiandae. Vim eu vocent viderer, at suas voluptatibus pri, qui aliquip suscipit ut. No usu lorem regione lobortis, erant explicari ius no. Eos ea brute errem, voluptaria mnesarchum cu pri, choro ancillae euripidis id vis. Vim magna inermis ei, vidit docendi vix ad.
-
-Ipsum choro cu duo, eu suas iusto complectitur duo. Eos eu ridens eruditi, mea ea assum verterem rationibus. Nobis dolores ut sit, soleat reprimique cu qui. Legere pertinax an vix, dolore incorrupte no ius. Nam in reque nostrum elaboraret. Ei ius harum splendide. Cum ex appetere hendrerit, vis cu rebum legimus dissentiunt, novum dicunt ad est.
-
-Ut quo esse noluisse, in per admodum eligendi persequeris. Vel te munere eripuit, eu prompta iuvaret propriae per, ei mel omnis suavitate. Mea at quem veri quaeque. Ea his salutatus posidonium, salutatus hendrerit vel no, nulla sonet referrentur ne pro. Mea tota constituto mediocritatem ex, ut vix nusquam molestie signiferumque.
-`;
-
-const Card = (_ref) => {
-  let titleText = _ref.titleText,
-      contentNode = _ref.contentNode;
+var Card = (_ref) => {
+  var {
+    titleText,
+    contentNode
+  } = _ref;
   return _react.default.createElement("div", {
@@ -78,3 +58,3 @@ className: "card"
 
-(0, _react2.storiesOf)('AspectRatio', module).addWithJSX('Image', () => _react.default.createElement(_react.Fragment, null, _react.default.createElement(PageTitle, null), _react.default.createElement(Card, {
+(0, _react2.storiesOf)('AspectRatio', module).add('Image', () => _react.default.createElement(_react.Fragment, null, _react.default.createElement(PageTitle, null), _react.default.createElement(Card, {
   titleText: "Image with Aspect Ratio",
@@ -91,3 +71,3 @@ contentNode: _react.default.createElement(_react.Fragment, null, _react.default.createElement(_index.AspectRatio, {
   })), _react.default.createElement("p", null, lorem))
-}))).addWithJSX('Image with number', () => _react.default.createElement(_react.Fragment, null, _react.default.createElement(PageTitle, null), _react.default.createElement(Card, {
+}))).add('Image with number', () => _react.default.createElement(_react.Fragment, null, _react.default.createElement(PageTitle, null), _react.default.createElement(Card, {
   titleText: "Image with Aspect Ratio (pass number as props)",
@@ -103,3 +83,3 @@ contentNode: _react.default.createElement(_index.AspectRatio, {
   }))
-}))).addWithJSX('Background Image', () => _react.default.createElement(_react.Fragment, null, _react.default.createElement(PageTitle, null), _react.default.createElement(Card, {
+}))).add('Background Image', () => _react.default.createElement(_react.Fragment, null, _react.default.createElement(PageTitle, null), _react.default.createElement(Card, {
   titleText: "Background image with aspect ratio",
@@ -114,4 +94,4 @@ contentNode: _react.default.createElement(_index.AspectRatio, {
   })
-}))).addWithJSX('Gallery', () => {
-  const images = [{
+}))).add('Gallery', () => {
+  var images = [{
     src: 'http://pbs.twimg.com/media/CO-ghuGWEAAGsFd.jpg',
@@ -143,3 +123,3 @@ ratio: '261/393'
   }));
-}).addWithJSX('Iframe', () => _react.default.createElement(_react.Fragment, null, _react.default.createElement(PageTitle, null), _react.default.createElement(Card, {
+}).add('Iframe', () => _react.default.createElement(_react.Fragment, null, _react.default.createElement(PageTitle, null), _react.default.createElement(Card, {
   titleText: "Iframe with aspect ratio",
@@ -146,0 +126,0 @@ contentNode: _react.default.createElement(_index.AspectRatio, {

dist/index.js

 "use strict";
 
 exports.__esModule = true;
-exports.AspectRatio = exports.default = void 0;
+exports.AspectRatio = exports["default"] = void 0;
 
@@ -10,8 +10,8 @@ var _react = _interopRequireDefault(require("./react-15.6"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-var _default = _react.default; // use before react 15.6
+var _default = _react["default"]; // use before react 15.6
 
-exports.default = _default;
-var AspectRatio = _reactLatest.default;
+exports["default"] = _default;
+var AspectRatio = _reactLatest["default"];
 exports.AspectRatio = AspectRatio;

dist/next/stories/index.js

 import React, { Fragment } from 'react';
-import { storiesOf, setAddon } from '@storybook/react';
-import JSXAddon from 'storybook-addon-jsx';
+import { storiesOf } from '@storybook/react'; // import JSXAddon from 'storybook-addon-jsx';
+
 import { AspectRatio } from '../index';
 import '../../aspect-ratio.css';
-import '../../theme.css';
-setAddon(JSXAddon);
+import '../../theme.css'; // setAddon(JSXAddon);
 
@@ -45,3 +44,3 @@ var PageTitle = function PageTitle() {
 
-storiesOf('AspectRatio', module).addWithJSX('Image', function () {
+storiesOf('AspectRatio', module).add('Image', function () {
   return React.createElement(Fragment, null, React.createElement(PageTitle, null), React.createElement(Card, {
@@ -60,3 +59,3 @@ titleText: "Image with Aspect Ratio",
   }));
-}).addWithJSX('Image with number', function () {
+}).add('Image with number', function () {
   return React.createElement(Fragment, null, React.createElement(PageTitle, null), React.createElement(Card, {
@@ -74,3 +73,3 @@ titleText: "Image with Aspect Ratio (pass number as props)",
   }));
-}).addWithJSX('Background Image', function () {
+}).add('Background Image', function () {
   return React.createElement(Fragment, null, React.createElement(PageTitle, null), React.createElement(Card, {
@@ -87,3 +86,3 @@ titleText: "Background image with aspect ratio",
   }));
-}).addWithJSX('Gallery', function () {
+}).add('Gallery', function () {
   var images = [{
@@ -118,3 +117,3 @@ src: 'http://pbs.twimg.com/media/CO-ghuGWEAAGsFd.jpg',
   }));
-}).addWithJSX('Iframe', function () {
+}).add('Iframe', function () {
   return React.createElement(Fragment, null, React.createElement(PageTitle, null), React.createElement(Card, {
@@ -121,0 +120,0 @@ titleText: "Iframe with aspect ratio",

dist/react-15.6.js

 "use strict";
 
 exports.__esModule = true;
-exports.default = void 0;
+exports["default"] = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; if (obj != null) { var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -72,3 +74,3 @@
 
-    return _react.default.createElement("div", _extends({
+    return _react["default"].createElement("div", _extends({
       ref: this.setNode,
@@ -88,2 +90,2 @@ style: newStyle
 var _default = AspectRatio;
-exports.default = _default;
+exports["default"] = _default;

dist/react-latest.js

 "use strict";
 
 exports.__esModule = true;
-exports.default = void 0;
+exports["default"] = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -27,3 +27,3 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-  return _react.default.createElement("div", _extends({
+  return _react["default"].createElement("div", _extends({
     style: newStyle
@@ -38,2 +38,2 @@ }, otherProps), children);
 var _default = AspectRatio;
-exports.default = _default;
+exports["default"] = _default;

dist/stories/index.js

@@ -7,4 +7,2 @@ "use strict";
 
-var _storybookAddonJsx = _interopRequireDefault(require("storybook-addon-jsx"));
-
 var _index = require("../index");
@@ -16,14 +14,14 @@
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; if (obj != null) { var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-(0, _react2.setAddon)(_storybookAddonJsx.default);
-
+// import JSXAddon from 'storybook-addon-jsx';
+// setAddon(JSXAddon);
 var PageTitle = function PageTitle() {
-  return _react.default.createElement("div", {
+  return _react["default"].createElement("div", {
     className: "page__title"
-  }, _react.default.createElement("h1", {
+  }, _react["default"].createElement("h1", {
     className: "page__title-main"
-  }, "React Apect Ratio", _react.default.createElement("a", {
+  }, "React Apect Ratio", _react["default"].createElement("a", {
     className: "github mui-icon",
@@ -34,7 +32,7 @@ href: "https://github.com/roderickhsiao/react-aspect-ratio",
     title: "github"
-  }, _react.default.createElement("span", {
+  }, _react["default"].createElement("span", {
     style: {
       visibility: 'hidden'
     }
-  }, " Github "))), _react.default.createElement("p", {
+  }, " Github "))), _react["default"].createElement("p", {
     className: "page__title-desc"
@@ -49,9 +47,9 @@ }, "prevent reflow by preserving aspect ratio of your component"));
       contentNode = _ref.contentNode;
-  return _react.default.createElement("div", {
+  return _react["default"].createElement("div", {
     className: "card"
-  }, _react.default.createElement("div", {
+  }, _react["default"].createElement("div", {
     className: "card__head"
-  }, _react.default.createElement("h3", {
+  }, _react["default"].createElement("h3", {
     className: "card__title"
-  }, titleText)), _react.default.createElement("div", {
+  }, titleText)), _react["default"].createElement("div", {
     className: "card__conent"
@@ -61,6 +59,6 @@ }, contentNode));
 
-(0, _react2.storiesOf)('AspectRatio', module).addWithJSX('Image', function () {
-  return _react.default.createElement(_react.Fragment, null, _react.default.createElement(PageTitle, null), _react.default.createElement(Card, {
+(0, _react2.storiesOf)('AspectRatio', module).add('Image', function () {
+  return _react["default"].createElement(_react.Fragment, null, _react["default"].createElement(PageTitle, null), _react["default"].createElement(Card, {
     titleText: "Image with Aspect Ratio",
-    contentNode: _react.default.createElement(_react.Fragment, null, _react.default.createElement(_index.AspectRatio, {
+    contentNode: _react["default"].createElement(_react.Fragment, null, _react["default"].createElement(_index.AspectRatio, {
       ratio: "300/165",
@@ -71,11 +69,11 @@ style: {
       }
-    }, _react.default.createElement("img", {
+    }, _react["default"].createElement("img", {
       src: "https://upload.wikimedia.org/wikipedia/en/7/7d/Minions_characters.png",
       alt: "demo"
-    })), _react.default.createElement("p", null, lorem))
+    })), _react["default"].createElement("p", null, lorem))
   }));
-}).addWithJSX('Image with number', function () {
-  return _react.default.createElement(_react.Fragment, null, _react.default.createElement(PageTitle, null), _react.default.createElement(Card, {
+}).add('Image with number', function () {
+  return _react["default"].createElement(_react.Fragment, null, _react["default"].createElement(PageTitle, null), _react["default"].createElement(Card, {
     titleText: "Image with Aspect Ratio (pass number as props)",
-    contentNode: _react.default.createElement(_index.AspectRatio, {
+    contentNode: _react["default"].createElement(_index.AspectRatio, {
       ratio: 0.75,
@@ -85,3 +83,3 @@ style: {
       }
-    }, _react.default.createElement("img", {
+    }, _react["default"].createElement("img", {
       src: "https://c1.staticflickr.com/4/3896/14550191836_cc0675d906.jpg",
@@ -91,6 +89,6 @@ alt: "demo"
   }));
-}).addWithJSX('Background Image', function () {
-  return _react.default.createElement(_react.Fragment, null, _react.default.createElement(PageTitle, null), _react.default.createElement(Card, {
+}).add('Background Image', function () {
+  return _react["default"].createElement(_react.Fragment, null, _react["default"].createElement(PageTitle, null), _react["default"].createElement(Card, {
     titleText: "Background image with aspect ratio",
-    contentNode: _react.default.createElement(_index.AspectRatio, {
+    contentNode: _react["default"].createElement(_index.AspectRatio, {
       ratio: "3/4",
@@ -104,3 +102,3 @@ style: {
   }));
-}).addWithJSX('Gallery', function () {
+}).add('Gallery', function () {
   var images = [{
@@ -119,13 +117,13 @@ src: 'http://pbs.twimg.com/media/CO-ghuGWEAAGsFd.jpg',
   }];
-  return _react.default.createElement(_react.Fragment, null, _react.default.createElement(PageTitle, null), _react.default.createElement(Card, {
+  return _react["default"].createElement(_react.Fragment, null, _react["default"].createElement(PageTitle, null), _react["default"].createElement(Card, {
     titleText: "Image Gallery with Aspect Ratio",
-    contentNode: _react.default.createElement("div", {
+    contentNode: _react["default"].createElement("div", {
       className: "gallery"
     }, images.map(function (image) {
-      return _react.default.createElement("div", {
+      return _react["default"].createElement("div", {
         className: "gallery__image",
         key: image.src
-      }, _react.default.createElement(_index.AspectRatio, {
+      }, _react["default"].createElement(_index.AspectRatio, {
         ratio: image.ratio
-      }, _react.default.createElement("img", {
+      }, _react["default"].createElement("img", {
         src: image.src,
@@ -136,6 +134,6 @@ alt: "demo"
   }));
-}).addWithJSX('Iframe', function () {
-  return _react.default.createElement(_react.Fragment, null, _react.default.createElement(PageTitle, null), _react.default.createElement(Card, {
+}).add('Iframe', function () {
+  return _react["default"].createElement(_react.Fragment, null, _react["default"].createElement(PageTitle, null), _react["default"].createElement(Card, {
     titleText: "Iframe with aspect ratio",
-    contentNode: _react.default.createElement(_index.AspectRatio, {
+    contentNode: _react["default"].createElement(_index.AspectRatio, {
       ratio: "560/315",
@@ -145,3 +143,3 @@ style: {
       }
-    }, _react.default.createElement("iframe", {
+    }, _react["default"].createElement("iframe", {
       src: "https://www.youtube.com/embed/Sv6dMFF_yts",
@@ -148,0 +146,0 @@ frameBorder: "0",

dist/umd/__tests__/index.js

@@ -20,6 +20,8 @@ (function (global, factory) {
 
-  function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
+  function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
-  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+  function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; if (obj != null) { var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
   // // eslint-disable-line import/no-named-as-default
@@ -29,3 +31,3 @@ describe('Aspect Ratio', function () {
       it('should render wrapper for children', function () {
-        var innerImage = _react.default.createElement("img", {
+        var innerImage = _react["default"].createElement("img", {
           src: "https://foo.bar",
@@ -35,3 +37,3 @@ alt: "demo"
 
-        var node = _reactTestRenderer.default.create(_react.default.createElement(_index.default, {
+        var node = _reactTestRenderer["default"].create(_react["default"].createElement(_index["default"], {
           ratio: "4/3"
@@ -43,3 +45,3 @@ }, innerImage)).toJSON();
       it('should support number as props', function () {
-        var innerImage = _react.default.createElement("img", {
+        var innerImage = _react["default"].createElement("img", {
           src: "https://foo.bar",
@@ -49,3 +51,3 @@ alt: "demo"
 
-        var node = _reactTestRenderer.default.create(_react.default.createElement(_index.default, {
+        var node = _reactTestRenderer["default"].create(_react["default"].createElement(_index["default"], {
           ratio: 0.75
@@ -57,3 +59,3 @@ }, innerImage)).toJSON();
       it('custom style willl be adpoted', function () {
-        var innerImage = _react.default.createElement("img", {
+        var innerImage = _react["default"].createElement("img", {
           src: "https://foo.bar",
@@ -63,3 +65,3 @@ alt: "demo"
 
-        var node = _reactTestRenderer.default.create(_react.default.createElement(_index.default, {
+        var node = _reactTestRenderer["default"].create(_react["default"].createElement(_index["default"], {
           ratio: "4/3",
@@ -76,3 +78,3 @@ style: {
       it('should render wrapper for children', function () {
-        var innerImage = _react.default.createElement("img", {
+        var innerImage = _react["default"].createElement("img", {
           src: "https://foo.bar",
@@ -82,3 +84,3 @@ alt: "demo"
 
-        var node = _reactTestRenderer.default.create(_react.default.createElement(_index.AspectRatio, {
+        var node = _reactTestRenderer["default"].create(_react["default"].createElement(_index.AspectRatio, {
           ratio: "4/3"
@@ -90,3 +92,3 @@ }, innerImage)).toJSON();
       it('should support number as props', function () {
-        var innerImage = _react.default.createElement("img", {
+        var innerImage = _react["default"].createElement("img", {
           src: "https://foo.bar",
@@ -96,3 +98,3 @@ alt: "demo"
 
-        var node = _reactTestRenderer.default.create(_react.default.createElement(_index.AspectRatio, {
+        var node = _reactTestRenderer["default"].create(_react["default"].createElement(_index.AspectRatio, {
           ratio: 0.75
@@ -104,3 +106,3 @@ }, innerImage)).toJSON();
       it('custom style willl be adpoted', function () {
-        var innerImage = _react.default.createElement("img", {
+        var innerImage = _react["default"].createElement("img", {
           src: "https://foo.bar",
@@ -110,3 +112,3 @@ alt: "demo"
 
-        var node = _reactTestRenderer.default.create(_react.default.createElement(_index.AspectRatio, {
+        var node = _reactTestRenderer["default"].create(_react["default"].createElement(_index.AspectRatio, {
           ratio: "4/3",
@@ -113,0 +115,0 @@ style: {

dist/umd/index.js

@@ -17,13 +17,13 @@ (function (global, factory) {
   _exports.__esModule = true;
-  _exports.AspectRatio = _exports.default = void 0;
+  _exports.AspectRatio = _exports["default"] = void 0;
   _react = _interopRequireDefault(_react);
   _reactLatest = _interopRequireDefault(_reactLatest);
 
-  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-  var _default = _react.default; // use before react 15.6
+  var _default = _react["default"]; // use before react 15.6
 
-  _exports.default = _default;
-  var AspectRatio = _reactLatest.default;
+  _exports["default"] = _default;
+  var AspectRatio = _reactLatest["default"];
   _exports.AspectRatio = AspectRatio;
 });

dist/umd/react-15.6.js

@@ -17,7 +17,9 @@ (function (global, factory) {
   _exports.__esModule = true;
-  _exports.default = void 0;
+  _exports["default"] = void 0;
   _react = _interopRequireWildcard(_react);
 
-  function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
+  function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
+  function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; if (obj != null) { var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
   function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -85,3 +87,3 @@
 
-      return _react.default.createElement("div", _extends({
+      return _react["default"].createElement("div", _extends({
         ref: this.setNode,
@@ -101,3 +103,3 @@ style: newStyle
   var _default = AspectRatio;
-  _exports.default = _default;
+  _exports["default"] = _default;
 });

dist/umd/react-latest.js

@@ -17,6 +17,6 @@ (function (global, factory) {
   _exports.__esModule = true;
-  _exports.default = void 0;
+  _exports["default"] = void 0;
   _react = _interopRequireDefault(_react);
 
-  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -40,3 +40,3 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-    return _react.default.createElement("div", _extends({
+    return _react["default"].createElement("div", _extends({
       style: newStyle
@@ -51,3 +51,3 @@ }, otherProps), children);
   var _default = AspectRatio;
-  _exports.default = _default;
+  _exports["default"] = _default;
 });

dist/umd/stories/index.js

 (function (global, factory) {
   if (typeof define === "function" && define.amd) {
-    define(["react", "@storybook/react", "storybook-addon-jsx", "../index", "../../aspect-ratio.css", "../../theme.css"], factory);
+    define(["react", "@storybook/react", "../index", "../../aspect-ratio.css", "../../theme.css"], factory);
   } else if (typeof exports !== "undefined") {
-    factory(require("react"), require("@storybook/react"), require("storybook-addon-jsx"), require("../index"), require("../../aspect-ratio.css"), require("../../theme.css"));
+    factory(require("react"), require("@storybook/react"), require("../index"), require("../../aspect-ratio.css"), require("../../theme.css"));
   } else {
@@ -10,23 +10,22 @@ var mod = {
     };
-    factory(global.react, global.react, global.storybookAddonJsx, global.index, global.aspectRatio, global.theme);
+    factory(global.react, global.react, global.index, global.aspectRatio, global.theme);
     global.index = mod.exports;
   }
-})(this, function (_react, _react2, _storybookAddonJsx, _index, _aspectRatio, _theme) {
+})(this, function (_react, _react2, _index, _aspectRatio, _theme) {
   "use strict";
 
   _react = _interopRequireWildcard(_react);
-  _storybookAddonJsx = _interopRequireDefault(_storybookAddonJsx);
 
-  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+  function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
 
-  function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
+  function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; if (obj != null) { var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-  (0, _react2.setAddon)(_storybookAddonJsx.default);
-
+  // import JSXAddon from 'storybook-addon-jsx';
+  // setAddon(JSXAddon);
   var PageTitle = function PageTitle() {
-    return _react.default.createElement("div", {
+    return _react["default"].createElement("div", {
       className: "page__title"
-    }, _react.default.createElement("h1", {
+    }, _react["default"].createElement("h1", {
       className: "page__title-main"
-    }, "React Apect Ratio", _react.default.createElement("a", {
+    }, "React Apect Ratio", _react["default"].createElement("a", {
       className: "github mui-icon",
@@ -37,7 +36,7 @@ href: "https://github.com/roderickhsiao/react-aspect-ratio",
       title: "github"
-    }, _react.default.createElement("span", {
+    }, _react["default"].createElement("span", {
       style: {
         visibility: 'hidden'
       }
-    }, " Github "))), _react.default.createElement("p", {
+    }, " Github "))), _react["default"].createElement("p", {
       className: "page__title-desc"
@@ -52,9 +51,9 @@ }, "prevent reflow by preserving aspect ratio of your component"));
         contentNode = _ref.contentNode;
-    return _react.default.createElement("div", {
+    return _react["default"].createElement("div", {
       className: "card"
-    }, _react.default.createElement("div", {
+    }, _react["default"].createElement("div", {
       className: "card__head"
-    }, _react.default.createElement("h3", {
+    }, _react["default"].createElement("h3", {
       className: "card__title"
-    }, titleText)), _react.default.createElement("div", {
+    }, titleText)), _react["default"].createElement("div", {
       className: "card__conent"
@@ -64,6 +63,6 @@ }, contentNode));
 
-  (0, _react2.storiesOf)('AspectRatio', module).addWithJSX('Image', function () {
-    return _react.default.createElement(_react.Fragment, null, _react.default.createElement(PageTitle, null), _react.default.createElement(Card, {
+  (0, _react2.storiesOf)('AspectRatio', module).add('Image', function () {
+    return _react["default"].createElement(_react.Fragment, null, _react["default"].createElement(PageTitle, null), _react["default"].createElement(Card, {
       titleText: "Image with Aspect Ratio",
-      contentNode: _react.default.createElement(_react.Fragment, null, _react.default.createElement(_index.AspectRatio, {
+      contentNode: _react["default"].createElement(_react.Fragment, null, _react["default"].createElement(_index.AspectRatio, {
         ratio: "300/165",
@@ -74,11 +73,11 @@ style: {
         }
-      }, _react.default.createElement("img", {
+      }, _react["default"].createElement("img", {
         src: "https://upload.wikimedia.org/wikipedia/en/7/7d/Minions_characters.png",
         alt: "demo"
-      })), _react.default.createElement("p", null, lorem))
+      })), _react["default"].createElement("p", null, lorem))
     }));
-  }).addWithJSX('Image with number', function () {
-    return _react.default.createElement(_react.Fragment, null, _react.default.createElement(PageTitle, null), _react.default.createElement(Card, {
+  }).add('Image with number', function () {
+    return _react["default"].createElement(_react.Fragment, null, _react["default"].createElement(PageTitle, null), _react["default"].createElement(Card, {
       titleText: "Image with Aspect Ratio (pass number as props)",
-      contentNode: _react.default.createElement(_index.AspectRatio, {
+      contentNode: _react["default"].createElement(_index.AspectRatio, {
         ratio: 0.75,
@@ -88,3 +87,3 @@ style: {
         }
-      }, _react.default.createElement("img", {
+      }, _react["default"].createElement("img", {
         src: "https://c1.staticflickr.com/4/3896/14550191836_cc0675d906.jpg",
@@ -94,6 +93,6 @@ alt: "demo"
     }));
-  }).addWithJSX('Background Image', function () {
-    return _react.default.createElement(_react.Fragment, null, _react.default.createElement(PageTitle, null), _react.default.createElement(Card, {
+  }).add('Background Image', function () {
+    return _react["default"].createElement(_react.Fragment, null, _react["default"].createElement(PageTitle, null), _react["default"].createElement(Card, {
       titleText: "Background image with aspect ratio",
-      contentNode: _react.default.createElement(_index.AspectRatio, {
+      contentNode: _react["default"].createElement(_index.AspectRatio, {
         ratio: "3/4",
@@ -107,3 +106,3 @@ style: {
     }));
-  }).addWithJSX('Gallery', function () {
+  }).add('Gallery', function () {
     var images = [{
@@ -122,13 +121,13 @@ src: 'http://pbs.twimg.com/media/CO-ghuGWEAAGsFd.jpg',
     }];
-    return _react.default.createElement(_react.Fragment, null, _react.default.createElement(PageTitle, null), _react.default.createElement(Card, {
+    return _react["default"].createElement(_react.Fragment, null, _react["default"].createElement(PageTitle, null), _react["default"].createElement(Card, {
       titleText: "Image Gallery with Aspect Ratio",
-      contentNode: _react.default.createElement("div", {
+      contentNode: _react["default"].createElement("div", {
         className: "gallery"
       }, images.map(function (image) {
-        return _react.default.createElement("div", {
+        return _react["default"].createElement("div", {
           className: "gallery__image",
           key: image.src
-        }, _react.default.createElement(_index.AspectRatio, {
+        }, _react["default"].createElement(_index.AspectRatio, {
           ratio: image.ratio
-        }, _react.default.createElement("img", {
+        }, _react["default"].createElement("img", {
           src: image.src,
@@ -139,6 +138,6 @@ alt: "demo"
     }));
-  }).addWithJSX('Iframe', function () {
-    return _react.default.createElement(_react.Fragment, null, _react.default.createElement(PageTitle, null), _react.default.createElement(Card, {
+  }).add('Iframe', function () {
+    return _react["default"].createElement(_react.Fragment, null, _react["default"].createElement(PageTitle, null), _react["default"].createElement(Card, {
       titleText: "Iframe with aspect ratio",
-      contentNode: _react.default.createElement(_index.AspectRatio, {
+      contentNode: _react["default"].createElement(_index.AspectRatio, {
         ratio: "560/315",
@@ -148,3 +147,3 @@ style: {
         }
-      }, _react.default.createElement("iframe", {
+      }, _react["default"].createElement("iframe", {
         src: "https://www.youtube.com/embed/Sv6dMFF_yts",
@@ -151,0 +150,0 @@ frameBorder: "0",

package.json

 {
   "name": "react-aspect-ratio",
-  "version": "1.0.40",
+  "version": "1.0.41",
   "description": "React Aspect Ratio Component",
@@ -39,9 +39,9 @@ "author": "Roderick Hsiao <[e-mail]>",
     "@babel/plugin-transform-spread": "^7.2.2",
-    "@storybook/react": "^4.0.0",
+    "@storybook/react": "^5.0.0",
     "babel-eslint": "^10.0.1",
     "babel-jest": "^24.1.0",
     "babel-loader": "^8.0.5",
-    "babel-preset-react-app": "^7.0.1",
+    "babel-preset-react-app": "^8.0.0",
     "babel-runtime": "^6.11.6",
-    "bundlesize": "^0.17.0",
+    "bundlesize": "^0.18.0",
     "eslint": "^5.11.1",
@@ -53,3 +53,3 @@ "eslint-config-airbnb": "^17.1.0",
     "eslint-plugin-react": "^7.0.0",
-    "flow-bin": "^0.93.0",
+    "flow-bin": "^0.98.0",
     "git-url-parse": "^11.1.1",
@@ -62,3 +62,3 @@ "jest": "^24.1.0",
     "react-test-renderer": "^16.0.0",
-    "storybook-addon-jsx": "^6.0.0"
+    "storybook-addon-jsx": "^7.0.0"
   },
@@ -73,2 +73,3 @@ "peerDependencies": {
   },
+  "sideEffects": false,
   "bundlesize": [
@@ -75,0 +76,0 @@ {

No alert changes

Improved metrics

Total package byte prevSize

83226

increased by4.07%

Lines of code

1329

increased by1.14%

Worsened metrics

Number of low supply chain risk alerts

4

increased by33.33%

No dependency changes