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

package/es/HiNotice/HiKPI.js

@@ -1,16 +1,37 @@
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
-import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import React from 'react';
-import classNames from 'classnames';
-import { withStyles } from '@material-ui/core/styles';
-import ButtonBase from '@material-ui/core/ButtonBase';
-import Collapse from '@material-ui/core/Collapse';
-export var styles = function styles(theme) {
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.styles = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/getPrototypeOf"));
+
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/assertThisInitialized"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _ButtonBase = _interopRequireDefault(require("@material-ui/core/ButtonBase"));
+
+var _Collapse = _interopRequireDefault(require("@material-ui/core/Collapse"));
+
+var styles = function styles(theme) {
   return {
     root: {
       background: theme.palette.background3,
@@ -90,29 +111,30 @@ export var styles = function styles(theme) {
   };
 };
 
+exports.styles = styles;
+
 var HiKPI =
 /*#__PURE__*/
 function (_React$Component) {
-  _inherits(HiKPI, _React$Component);
+  (0, _inherits2.default)(HiKPI, _React$Component);
 
   function HiKPI(props) {
     var _this;
 
-    _classCallCheck(this, HiKPI);
+    (0, _classCallCheck2.default)(this, HiKPI);
+    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(HiKPI).call(this, props));
 
-    _this = _possibleConstructorReturn(this, _getPrototypeOf(HiKPI).call(this, props));
-
-    _defineProperty(_assertThisInitialized(_this), "handleClick", function (id) {
+    _this.handleClick = function (id) {
       return function () {
         _this.props.onClick(id);
       };
-    });
+    };
 
-    _this.handleClick = _this.handleClick.bind(_assertThisInitialized(_this));
+    _this.handleClick = _this.handleClick.bind((0, _assertThisInitialized2.default)(_this));
     return _this;
   }
 
-  _createClass(HiKPI, [{
+  (0, _createClass2.default)(HiKPI, [{
     key: "render",
     value: function render() {
       var _classNames;
@@ -130,37 +152,38 @@ function (_React$Component) {
           tooltip = _this$props.tooltip,
           disable = _this$props.disable,
           buttonId = _this$props.buttonId;
-      var rootclass = classNames(classes.root, (_classNames = {}, _defineProperty(_classNames, classes.inherit, color === 'inherit'), _defineProperty(_classNames, classes.warning, color === 'warning' && !disable), _defineProperty(_classNames, classes.error, color === 'error' && !disable), _defineProperty(_classNames, classes.positive, color === 'positive' && !disable), _defineProperty(_classNames, classes.active, active), _defineProperty(_classNames, classes.minify, minify), _defineProperty(_classNames, classes.rootDisable, disable), _classNames));
-      return React.createElement(ButtonBase, {
+      var rootclass = (0, _classnames.default)(classes.root, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.inherit, color === 'inherit'), (0, _defineProperty2.default)(_classNames, classes.warning, color === 'warning' && !disable), (0, _defineProperty2.default)(_classNames, classes.error, color === 'error' && !disable), (0, _defineProperty2.default)(_classNames, classes.positive, color === 'positive' && !disable), (0, _defineProperty2.default)(_classNames, classes.active, active), (0, _defineProperty2.default)(_classNames, classes.minify, minify), (0, _defineProperty2.default)(_classNames, classes.rootDisable, disable), _classNames));
+      return _react.default.createElement(_ButtonBase.default, {
         id: buttonId,
         className: rootclass,
         onClick: !disable ? this.handleClick(id) : undefined,
         title: tooltip,
         disableRipple: disable,
         disabled: disable
-      }, title && React.createElement("h3", {
+      }, title && _react.default.createElement("h3", {
         className: classes.title
-      }, title), React.createElement("div", {
+      }, title), _react.default.createElement("div", {
         className: classes.body
-      }, minify && bodyMinify ? bodyMinify : body), React.createElement(Collapse, {
+      }, minify && bodyMinify ? bodyMinify : body), _react.default.createElement(_Collapse.default, {
         in: !minify,
         timeout: 'auto'
-      }, React.createElement("div", {
+      }, _react.default.createElement("div", {
         className: classes.subtitle
       }, subtitle)));
     }
   }]);
-
   return HiKPI;
-}(React.Component);
+}(_react.default.Component);
 
-_defineProperty(HiKPI, "defaultProps", {
+HiKPI.defaultProps = {
   active: false,
   minify: false,
   color: 'inherit'
-});
+};
 
-export default withStyles(styles, {
+var _default = (0, _styles.withStyles)(styles, {
   hiComponent: true,
   name: 'HmuiHiKPI'
-})(HiKPI);
+})(HiKPI);
+
+exports.default = _default;

package/es/HiNotice/HiKPINotice.js

@@ -1,6 +1,17 @@
-import React from 'react';
-import { withStyles } from '@material-ui/core/styles';
-import HiKPI from './HiKPI';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _HiKPI = _interopRequireDefault(require("./HiKPI"));
 
 var styles = function styles() {
   return {
@@ -20,11 +31,11 @@ var HiKPINotice = function HiKPINotice(_ref) {
       activeKpi = _ref.activeKpi,
       minify = _ref.minify,
       onClickOnKPI = _ref.onClickOnKPI;
-  return React.createElement("div", {
+  return _react.default.createElement("div", {
     className: classes.container
   }, Object.keys(kpis).map(function (key) {
     var kpi = kpis[key];
-    return React.createElement(HiKPI, {
+    return _react.default.createElement(_HiKPI.default, {
       key: key,
       id: key,
       type: kpi.type,
@@ -49,7 +60,10 @@ HiKPINotice.defaultProps = {
   activeKpi: null,
   minify: false
 };
-export default withStyles(styles, {
+
+var _default = (0, _styles.withStyles)(styles, {
   hiComponent: true,
   name: 'HmuiHiKPINotice'
-})(HiKPINotice);
+})(HiKPINotice);
+
+exports.default = _default;

package/es/HiNotice/index.js

@@ -1,2 +1,23 @@
-export { default as HiKPI } from './HiKPI';
-export { default as HiKPINotice } from './HiKPINotice';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "HiKPI", {
+  enumerable: true,
+  get: function get() {
+    return _HiKPI.default;
+  }
+});
+Object.defineProperty(exports, "HiKPINotice", {
+  enumerable: true,
+  get: function get() {
+    return _HiKPINotice.default;
+  }
+});
+
+var _HiKPI = _interopRequireDefault(require("./HiKPI"));
+
+var _HiKPINotice = _interopRequireDefault(require("./HiKPINotice"));

package/es/HiPaymentMeans/HiPaymentMeans.js

@@ -1,14 +1,31 @@
-import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
-import _createClass from "@babel/runtime/helpers/esm/createClass";
-import _possibleConstructorReturn from "@babel/runtime/helpers/esm/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/esm/getPrototypeOf";
-import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/esm/inherits";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import React from 'react';
-import classNames from 'classnames';
-import { withStyles } from '@material-ui/core/styles';
-export var styles = function styles(theme) {
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.styles = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/defineProperty"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/possibleConstructorReturn"));
+
+var _getPrototypeOf3 = _interopRequireDefault(require("@babel/runtime/helpers/esm/getPrototypeOf"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _styles = require("@material-ui/core/styles");
+
+var styles = function styles(theme) {
   return {
     bankCard: {
       position: 'relative',
@@ -263,25 +280,27 @@ export var styles = function styles(theme) {
   };
 };
 
+exports.styles = styles;
+
 var HiPaymentMeans =
 /*#__PURE__*/
 function (_React$Component) {
-  _inherits(HiPaymentMeans, _React$Component);
+  (0, _inherits2.default)(HiPaymentMeans, _React$Component);
 
   function HiPaymentMeans() {
     var _getPrototypeOf2;
 
     var _this;
 
-    _classCallCheck(this, HiPaymentMeans);
+    (0, _classCallCheck2.default)(this, HiPaymentMeans);
 
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
 
-    _this = _possibleConstructorReturn(this, (_getPrototypeOf2 = _getPrototypeOf(HiPaymentMeans)).call.apply(_getPrototypeOf2, [this].concat(args)));
+    _this = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf2 = (0, _getPrototypeOf3.default)(HiPaymentMeans)).call.apply(_getPrototypeOf2, [this].concat(args)));
 
-    _defineProperty(_assertThisInitialized(_this), "buildPaymentLayoutByType", function () {
+    _this.buildPaymentLayoutByType = function () {
       var _classNames;
 
       var _this$props = _this.props,
@@ -338,10 +357,10 @@ function (_React$Component) {
         creditDebit = (credit ? translations.credit : translations.debit).toUpperCase();
       }
 
-      var imgComponent = React.createElement("img", {
+      var imgComponent = _react.default.createElement("img", {
         src: brandLogo,
         alt: '',
-        className: classNames(classes.logo, (_classNames = {}, _defineProperty(_classNames, classes.logoLeft, ['ewallet', 'open-invoice', 'payment-reference', 'credit-consumption', 'realtime-banking'].indexOf(type) >= 0), _defineProperty(_classNames, classes.logoRight, ['ewallet', 'open-invoice', 'payment-reference', 'credit-consumption', 'realtime-banking'].indexOf(type) < 0), _classNames)),
+        className: (0, _classnames.default)(classes.logo, (_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.logoLeft, ['ewallet', 'open-invoice', 'payment-reference', 'credit-consumption', 'realtime-banking'].indexOf(type) >= 0), (0, _defineProperty2.default)(_classNames, classes.logoRight, ['ewallet', 'open-invoice', 'payment-reference', 'credit-consumption', 'realtime-banking'].indexOf(type) < 0), _classNames)),
         onError: function onError(e) {
           if (fallbackImage) {
             e.target.src = "".concat(fallbackImage);
@@ -350,85 +369,86 @@ function (_React$Component) {
           }
         }
       });
+
       var cardLayout;
 
       switch (type) {
         case 'ewallet':
-          cardLayout = React.createElement("div", {
+          cardLayout = _react.default.createElement("div", {
             style: {
               backgroundImage: "url(\"".concat(svgPath, "Wallet_shape.svg\")")
             },
             className: classes.walletShadow
-          }, React.createElement("div", {
+          }, _react.default.createElement("div", {
             style: {
               background: "linear-gradient(".concat(color1, ", ").concat(color2 || color1, ")"),
               WebkitMask: "url(\"".concat(svgPath, "Wallet_shape.svg\")")
             },
             className: classes.wallet
-          }, React.createElement("div", {
-            className: classNames(classes.labelLarge, classes.userNameWallet)
-          }, username), React.createElement("span", {
-            className: classNames(classes.stripe, classes.stripeBottomLeft)
-          }, imgComponent), React.createElement("span", {
-            className: classNames(classes.stripeGradient, classes.stripeBottomLeft, classes.stripeGradientBottomLeft)
+          }, _react.default.createElement("div", {
+            className: (0, _classnames.default)(classes.labelLarge, classes.userNameWallet)
+          }, username), _react.default.createElement("span", {
+            className: (0, _classnames.default)(classes.stripe, classes.stripeBottomLeft)
+          }, imgComponent), _react.default.createElement("span", {
+            className: (0, _classnames.default)(classes.stripeGradient, classes.stripeBottomLeft, classes.stripeGradientBottomLeft)
           })));
           break;
 
         case 'credit-card':
         case 'debit-card':
-          cardLayout = React.createElement("div", {
-            className: classNames(classes.bankCard, classes.shadow),
+          cardLayout = _react.default.createElement("div", {
+            className: (0, _classnames.default)(classes.bankCard, classes.shadow),
             style: {
               background: "linear-gradient(".concat(color1, ", ").concat(color2 || color1, ")")
             }
-          }, React.createElement("span", {
-            className: classNames(classes.stripe, classes.stripeTopRight)
-          }, imgComponent), React.createElement("span", {
-            className: classNames(classes.stripeGradient, classes.stripeTopRight, classes.stripeGradientTopRight)
-          }), React.createElement("div", {
-            className: classNames(classes.number, classes.cardNumber)
-          }, formatNumber), cardNumber && React.createElement("div", {
-            className: classNames(classes.labelMedium, classes.cardNumberLabel)
-          }, "Card number"), React.createElement("div", {
-            className: classNames(classes.labelLarge, classes.userNameCard)
-          }, username), React.createElement("div", {
+          }, _react.default.createElement("span", {
+            className: (0, _classnames.default)(classes.stripe, classes.stripeTopRight)
+          }, imgComponent), _react.default.createElement("span", {
+            className: (0, _classnames.default)(classes.stripeGradient, classes.stripeTopRight, classes.stripeGradientTopRight)
+          }), _react.default.createElement("div", {
+            className: (0, _classnames.default)(classes.number, classes.cardNumber)
+          }, formatNumber), cardNumber && _react.default.createElement("div", {
+            className: (0, _classnames.default)(classes.labelMedium, classes.cardNumberLabel)
+          }, "Card number"), _react.default.createElement("div", {
+            className: (0, _classnames.default)(classes.labelLarge, classes.userNameCard)
+          }, username), _react.default.createElement("div", {
             className: classes.dateValid
-          }, cardValidity), cardValidity && React.createElement("div", {
+          }, cardValidity), cardValidity && _react.default.createElement("div", {
             className: classes.validThru
           }, "Valid Thru"));
           break;
 
         case 'corporate':
-          cardLayout = React.createElement("div", {
-            className: classNames(classes.bankCard, classes.shadow),
+          cardLayout = _react.default.createElement("div", {
+            className: (0, _classnames.default)(classes.bankCard, classes.shadow),
             style: {
               background: "linear-gradient(".concat(color1, ", ").concat(color2 || color1, ")")
             }
-          }, React.createElement("span", {
-            className: classNames(classes.stripe, classes.stripeTopRight)
-          }, imgComponent), React.createElement("span", {
-            className: classNames(classes.stripeGradient, classes.stripeTopRight, classes.stripeGradientTopRight)
-          }, React.createElement("div", {
+          }, _react.default.createElement("span", {
+            className: (0, _classnames.default)(classes.stripe, classes.stripeTopRight)
+          }, imgComponent), _react.default.createElement("span", {
+            className: (0, _classnames.default)(classes.stripeGradient, classes.stripeTopRight, classes.stripeGradientTopRight)
+          }, _react.default.createElement("div", {
             className: classes.corporateLabel,
             style: {
               color: color1
             }
-          }, "CORPORATE")), cardNumber && React.createElement("div", {
-            className: classNames(classes.labelMedium, classes.corporateNumberLabel)
-          }, "Card number"), React.createElement("div", {
-            className: classNames(classes.number, classes.corporateNumber)
-          }, cardNumber), yearMember && React.createElement("div", {
+          }, "CORPORATE")), cardNumber && _react.default.createElement("div", {
+            className: (0, _classnames.default)(classes.labelMedium, classes.corporateNumberLabel)
+          }, "Card number"), _react.default.createElement("div", {
+            className: (0, _classnames.default)(classes.number, classes.corporateNumber)
+          }, cardNumber), yearMember && _react.default.createElement("div", {
             className: classes.memberSince
-          }, "Member Since"), React.createElement("div", {
+          }, "Member Since"), _react.default.createElement("div", {
             className: classes.yearMember
-          }, yearMember), React.createElement("div", {
+          }, yearMember), _react.default.createElement("div", {
             className: classes.dateValid
-          }, cardValidity), cardValidity && React.createElement("div", {
+          }, cardValidity), cardValidity && _react.default.createElement("div", {
             className: classes.validThru
-          }, "Valid Thru"), React.createElement("div", {
-            className: classNames(classes.labelLarge, classes.userNameCorporate)
-          }, cardUser), React.createElement("div", {
-            className: classNames(classes.labelLarge, classes.businessName)
+          }, "Valid Thru"), _react.default.createElement("div", {
+            className: (0, _classnames.default)(classes.labelLarge, classes.userNameCorporate)
+          }, cardUser), _react.default.createElement("div", {
+            className: (0, _classnames.default)(classes.labelLarge, classes.businessName)
           }, businessName));
           break;
 
@@ -436,76 +456,76 @@ function (_React$Component) {
         case 'payment-reference':
         case 'credit-consumption':
         case 'realtime-banking':
-          cardLayout = React.createElement("div", {
-            className: classNames(classes.sepa, classes.shadow),
+          cardLayout = _react.default.createElement("div", {
+            className: (0, _classnames.default)(classes.sepa, classes.shadow),
             style: {
               background: "linear-gradient(".concat(color1, ", ").concat(color2 || color1, ")")
             }
-          }, React.createElement("span", {
-            className: classNames(classes.stripe, classes.stripeTopLeft)
-          }, imgComponent), React.createElement("span", {
-            className: classNames(classes.stripeGradient, classes.stripeTopLeft, classes.stripeGradientTopLeft)
-          }), cardNumber && React.createElement("div", {
-            className: classNames(classes.labelMedium, classes.ibanLabel)
-          }, "IBAN"), React.createElement("div", {
-            className: classNames(classes.number, classes.ibanNumber)
-          }, formatNumber), React.createElement("div", {
-            className: classNames(classes.labelLarge, classes.userNameSepa)
-          }, username), React.createElement("div", {
-            className: classNames(classes.labelLarge, classes.labelDebitCredit)
+          }, _react.default.createElement("span", {
+            className: (0, _classnames.default)(classes.stripe, classes.stripeTopLeft)
+          }, imgComponent), _react.default.createElement("span", {
+            className: (0, _classnames.default)(classes.stripeGradient, classes.stripeTopLeft, classes.stripeGradientTopLeft)
+          }), cardNumber && _react.default.createElement("div", {
+            className: (0, _classnames.default)(classes.labelMedium, classes.ibanLabel)
+          }, "IBAN"), _react.default.createElement("div", {
+            className: (0, _classnames.default)(classes.number, classes.ibanNumber)
+          }, formatNumber), _react.default.createElement("div", {
+            className: (0, _classnames.default)(classes.labelLarge, classes.userNameSepa)
+          }, username), _react.default.createElement("div", {
+            className: (0, _classnames.default)(classes.labelLarge, classes.labelDebitCredit)
           }, creditDebit));
           break;
 
         case 'prepaid-card':
-          cardLayout = React.createElement("div", {
-            className: classNames(classes.bankCard, classes.shadow),
+          cardLayout = _react.default.createElement("div", {
+            className: (0, _classnames.default)(classes.bankCard, classes.shadow),
             style: {
               background: "url(\"".concat(svgPath, "Gift_shape.svg\"), linear-gradient(").concat(color1, ",\n                         ").concat(color2 || color1, ")")
             }
-          }, React.createElement("span", {
-            className: classNames(classes.stripe, classes.stripeTopRight)
-          }, imgComponent), React.createElement("span", {
-            className: classNames(classes.stripeGradient, classes.stripeTopRight, classes.stripeGradientTopRight)
-          }, React.createElement("img", {
+          }, _react.default.createElement("span", {
+            className: (0, _classnames.default)(classes.stripe, classes.stripeTopRight)
+          }, imgComponent), _react.default.createElement("span", {
+            className: (0, _classnames.default)(classes.stripeGradient, classes.stripeTopRight, classes.stripeGradientTopRight)
+          }, _react.default.createElement("img", {
             src: logoMerchant,
             alt: '',
-            className: classNames(classes.logo, classes.logoMerchant)
-          })), cardNumber && React.createElement("div", {
-            className: classNames(classes.labelMedium, classes.giftCardNumberLabel)
-          }, "Card number"), React.createElement("div", {
-            className: classNames(classes.number, classes.giftCardNumber)
-          }, cardNumber), React.createElement("div", {
-            className: classNames(classes.labelLarge, classes.labelDebitCredit)
+            className: (0, _classnames.default)(classes.logo, classes.logoMerchant)
+          })), cardNumber && _react.default.createElement("div", {
+            className: (0, _classnames.default)(classes.labelMedium, classes.giftCardNumberLabel)
+          }, "Card number"), _react.default.createElement("div", {
+            className: (0, _classnames.default)(classes.number, classes.giftCardNumber)
+          }, cardNumber), _react.default.createElement("div", {
+            className: (0, _classnames.default)(classes.labelLarge, classes.labelDebitCredit)
           }, translations.gift_card));
           break;
 
         default:
-          cardLayout = React.createElement("div", {
-            className: classNames(classes.bankCard, classes.shadow),
+          cardLayout = _react.default.createElement("div", {
+            className: (0, _classnames.default)(classes.bankCard, classes.shadow),
             style: {
               background: "linear-gradient(".concat(color1, ", ").concat(color2 || color1, ")")
             }
-          }, React.createElement("span", {
-            className: classNames(classes.stripe, classes.stripeTopRight)
-          }, imgComponent), React.createElement("span", {
-            className: classNames(classes.stripeGradient, classes.stripeTopRight, classes.stripeGradientTopRight)
-          }), React.createElement("div", {
-            className: classNames(classes.number, classes.cardNumber)
-          }, cardNumber), cardNumber && React.createElement("div", {
-            className: classNames(classes.labelMedium, classes.cardNumberLabel)
-          }, "Card number"), React.createElement("div", {
-            className: classNames(classes.labelLarge, classes.userNameCard)
-          }, username), React.createElement("div", {
+          }, _react.default.createElement("span", {
+            className: (0, _classnames.default)(classes.stripe, classes.stripeTopRight)
+          }, imgComponent), _react.default.createElement("span", {
+            className: (0, _classnames.default)(classes.stripeGradient, classes.stripeTopRight, classes.stripeGradientTopRight)
+          }), _react.default.createElement("div", {
+            className: (0, _classnames.default)(classes.number, classes.cardNumber)
+          }, cardNumber), cardNumber && _react.default.createElement("div", {
+            className: (0, _classnames.default)(classes.labelMedium, classes.cardNumberLabel)
+          }, "Card number"), _react.default.createElement("div", {
+            className: (0, _classnames.default)(classes.labelLarge, classes.userNameCard)
+          }, username), _react.default.createElement("div", {
             className: classes.dateValid
-          }, cardValidity), cardValidity && React.createElement("div", {
+          }, cardValidity), cardValidity && _react.default.createElement("div", {
             className: classes.validThru
           }, "Valid Thru"));
       }
 
       return cardLayout;
-    });
+    };
 
-    _defineProperty(_assertThisInitialized(_this), "formatCardNumber", function (cardNumber) {
+    _this.formatCardNumber = function (cardNumber) {
       if (cardNumber.search(/X/g) >= 0) {
         cardNumber = cardNumber.replace(/X/g, '*');
       }
@@ -515,30 +535,29 @@ function (_React$Component) {
       }
 
       return cardNumber;
-    });
+    };
 
-    _defineProperty(_assertThisInitialized(_this), "formatIBANNumber", function (cardNumber) {
+    _this.formatIBANNumber = function (cardNumber) {
       if (cardNumber.search(' ') < 0) {
         cardNumber = "".concat(cardNumber.substring(0, 4), " ").concat(cardNumber.substring(4, 8), " ").concat(cardNumber.substring(8, 12), "\n             ").concat(cardNumber.substring(12, 16), " ").concat(cardNumber.substring(16, 20), " ").concat(cardNumber.substring(20, 26));
       }
 
       return cardNumber;
-    });
+    };
 
     return _this;
   }
 
-  _createClass(HiPaymentMeans, [{
+  (0, _createClass2.default)(HiPaymentMeans, [{
     key: "render",
     value: function render() {
       return this.buildPaymentLayoutByType();
     }
   }]);
-
   return HiPaymentMeans;
-}(React.Component);
+}(_react.default.Component);
 
-_defineProperty(HiPaymentMeans, "defaultProps", {
+HiPaymentMeans.defaultProps = {
   cardUserGender: 'U',
   credit: true,
   translations: {
@@ -548,10 +567,12 @@ _defineProperty(HiPaymentMeans, "defaultProps", {
     gender_female: 'Mrs',
     gender_male: 'Mr'
   }
-});
+};
 
-export default withStyles(styles, {
+var _default = (0, _styles.withStyles)(styles, {
   hiComponent: true,
   name: 'HmuiHiPaymentMean',
   withTheme: true
-})(HiPaymentMeans);
+})(HiPaymentMeans);
+
+exports.default = _default;

package/es/HiPaymentMeans/index.js

@@ -1 +1,15 @@
-export { default } from './HiPaymentMeans';
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _HiPaymentMeans.default;
+  }
+});
+
+var _HiPaymentMeans = _interopRequireDefault(require("./HiPaymentMeans"));