@hipay/hipay-material-ui 3.3.0 → 3.4.1

package/es/HiIconButton/HiIconButton.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.styles = void 0;
+exports.default = exports.useStyles = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/extends"));
 
@@ -24,81 +24,56 @@ var _colorManipulator = require("@material-ui/core/styles/colorManipulator");
 var _IconButton = _interopRequireDefault(require("@material-ui/core/IconButton"));
 
 // @inheritedComponent IconButton
-var styles = function styles(theme) {
+var useStyles = (0, _styles.makeStyles)(function (theme) {
   return {
     label: {},
-    positive: {
-      color: theme.palette.positive.main,
-      '&:hover': {
-        backgroundColor: (0, _colorManipulator.fade)(theme.palette.positive.main, theme.palette.action.hoverOpacity),
-        // Reset on touch devices, it doesn't add specificity
-        '@media (hover: none)': {
-          backgroundColor: 'transparent'
-        }
-      }
-    },
-    negative: {
-      color: theme.palette.negative.main,
-      '&:hover': {
-        backgroundColor: (0, _colorManipulator.fade)(theme.palette.negative.main, theme.palette.action.hoverOpacity),
-        // Reset on touch devices, it doesn't add specificity
-        '@media (hover: none)': {
-          backgroundColor: 'transparent'
-        }
-      }
-    },
-    middle: {
-      color: theme.palette.middle.main,
-      '&:hover': {
-        backgroundColor: (0, _colorManipulator.fade)(theme.palette.middle.main, theme.palette.action.hoverOpacity),
-        // Reset on touch devices, it doesn't add specificity
-        '@media (hover: none)': {
-          backgroundColor: 'transparent'
-        }
+    rootCustomColor: function rootCustomColor(props) {
+      var color;
+
+      if (theme.palette[props.color]) {
+        color = theme.palette[props.color].main;
+      } else if (props.color.charAt(0) === "#") {
+        color = props.color;
       }
-    },
-    neutral: {
-      color: theme.palette.neutral.main,
-      '&:hover': {
-        backgroundColor: (0, _colorManipulator.fade)(theme.palette.neutral.main, theme.palette.action.hoverOpacity),
-        // Reset on touch devices, it doesn't add specificity
-        '@media (hover: none)': {
-          backgroundColor: 'transparent'
+
+      if (!color) return {};
+      return {
+        color: color,
+        '&:hover': {
+          backgroundColor: (0, _colorManipulator.fade)(color, theme.palette.action.hoverOpacity),
+          // Reset on touch devices, it doesn't add specificity
+          '@media (hover: none)': {
+            backgroundColor: 'transparent'
+          }
         }
-      }
+      };
     }
   };
-};
-
-exports.styles = styles;
+});
+exports.useStyles = useStyles;
 
 function HiIconButton(props) {
-  var _classNames;
-
   var children = props.children,
-      classes = props.classes,
       className = props.className,
       color = props.color,
-      other = (0, _objectWithoutProperties2.default)(props, ["children", "classes", "className", "color"]);
-  var hcolor = ['positive', 'negative', 'middle', 'neutral'].includes(color) ? 'inherit' : color;
-  var buttonClassNames = (0, _classnames.default)((_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.positive, color === 'positive'), (0, _defineProperty2.default)(_classNames, classes.negative, color === 'negative'), (0, _defineProperty2.default)(_classNames, classes.middle, color === 'middle'), (0, _defineProperty2.default)(_classNames, classes.neutral, color === 'neutral'), _classNames));
+      other = (0, _objectWithoutProperties2.default)(props, ["children", "className", "color"]);
+  var classes = useStyles(props);
+  var isHexColor = color.charAt(0) === "#";
+  var isExtendedColor = ['positive', 'negative', 'middle', 'neutral'].includes(color);
+  var isCustomColor = isHexColor || isExtendedColor;
+  var rootClassNames = (0, _classnames.default)((0, _defineProperty2.default)({}, classes.rootCustomColor, isCustomColor));
   return _react.default.createElement(_IconButton.default, (0, _extends2.default)({
     className: className,
     classes: {
-      root: buttonClassNames,
+      root: rootClassNames,
       label: classes.label
     },
-    color: hcolor
+    color: isCustomColor ? 'inherit' : color
   }, other), children);
 }
 
 HiIconButton.defaultProps = {
   color: 'default'
 };
-
-var _default = (0, _styles.withStyles)(styles, {
-  hiComponent: true,
-  name: 'HmuiHiIconButton'
-})(HiIconButton);
-
+var _default = HiIconButton;
 exports.default = _default;

package/es/HiListItemLink/HiListItemLink.js

@@ -19,14 +19,6 @@ var _ListItem = _interopRequireDefault(require("@material-ui/core/ListItem"));
 
 var _ArrowRight = _interopRequireDefault(require("@material-ui/icons/ArrowRight"));
 
-var _Cancel = _interopRequireDefault(require("@material-ui/icons/Cancel"));
-
-var _CheckCircle = _interopRequireDefault(require("@material-ui/icons/CheckCircle"));
-
-var _Error = _interopRequireDefault(require("@material-ui/icons/Error"));
-
-var _RemoveCircle = _interopRequireDefault(require("@material-ui/icons/RemoveCircle"));
-
 var useStyles = (0, _styles.makeStyles)(function (theme) {
   return {
     root: function root(props) {
@@ -78,55 +70,15 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
   };
 });
 
-var StatusIcon = function StatusIcon(_ref) {
-  var disabled = _ref.disabled,
-      status = _ref.status;
-  var theme = (0, _styles.useTheme)();
-  var Icon, color;
-
-  switch (status) {
-    case "done":
-      Icon = _CheckCircle.default;
-      color = theme.palette.positive.main;
-      break;
-
-    case "error":
-      Icon = _Cancel.default;
-      color = theme.palette.negative.main;
-      break;
-
-    case "warning":
-      Icon = _Error.default;
-      color = theme.palette.middle.main;
-      break;
-
-    case "in_progress":
-      Icon = _RemoveCircle.default;
-      color = theme.palette.primary.main;
-      break;
-
-    default:
-      return null;
-  }
-
-  if (disabled) {
-    color = theme.palette.neutral.light;
-  }
-
-  return _react.default.createElement(Icon, {
-    htmlColor: color
-  });
-};
-
-var _ref2 = _react.default.createElement(_ArrowRight.default, null);
+var _ref = _react.default.createElement(_ArrowRight.default, null);
 
 var HiListItemLink = _react.default.forwardRef(function (props, ref) {
   var disabled = props.disabled,
       info = props.info,
       primary = props.primary,
       secondary = props.secondary,
-      status = props.status,
-      others = (0, _objectWithoutProperties2.default)(props, ["disabled", "info", "primary", "secondary", "status"]);
+      icon = props.icon,
+      others = (0, _objectWithoutProperties2.default)(props, ["disabled", "info", "primary", "secondary", "icon"]);
   var classes = useStyles(props);
   return _react.default.createElement(_ListItem.default, (0, _extends2.default)({
     ref: ref,
@@ -140,12 +92,15 @@ var HiListItemLink = _react.default.forwardRef(function (props, ref) {
     className: classes.secondary
   }, secondary), info && _react.default.createElement("div", {
     className: classes.info
-  }, info), status && _react.default.createElement(StatusIcon, {
-    disabled: disabled,
-    status: status
-  }), _ref2);
+  }, info), icon, _ref);
 });
 
-HiListItemLink.defaultProps = {};
+HiListItemLink.defaultProps = {
+  disabled: false,
+  info: null,
+  onClick: null,
+  secondary: null,
+  icon: null
+};
 var _default = HiListItemLink;
 exports.default = _default;

package/es/HiStepper/DefaultIndicator.js

@@ -11,15 +11,33 @@ var _react = _interopRequireDefault(require("react"));
 
 var _SvgIcon = _interopRequireDefault(require("@material-ui/core/SvgIcon"));
 
-var _ref = _react.default.createElement(_SvgIcon.default, null, _react.default.createElement("circle", {
+var _styles = require("@material-ui/core/styles");
+
+/**
+ * Custom style for SvgIcon
+ */
+var useStyles = (0, _styles.makeStyles)(function (theme) {
+  return {
+    root: {
+      width: 20,
+      height: 20
+    }
+  };
+});
+
+var _ref = _react.default.createElement("circle", {
   cx: "10",
   cy: "10",
-  r: "3",
+  r: "2",
   fill: "white"
-}));
+});
 
 var DefaultIndicator = function DefaultIndicator() {
-  return _ref;
+  var classes = useStyles();
+  return _react.default.createElement(_SvgIcon.default, {
+    className: classes.root,
+    viewBox: "0 0 20 20"
+  }, _ref);
 };
 
 var _default = DefaultIndicator;

package/es/HiStepper/HiStep.js

@@ -50,10 +50,9 @@ var HiStepIcon = function HiStepIcon(_ref) {
       borderRadius: "50%",
       width: 20,
       height: 20,
-      padding: 2,
       lineHeight: "20px",
       fontWeight: 600,
-      fontSize: 14
+      fontSize: 13
     };
   }, [color]); // get component from status
 
@@ -101,7 +100,7 @@ var useStepButtonStyle = (0, _styles.makeStyles)(function (theme) {
 var useStepContentStyle = (0, _styles.makeStyles)(function (theme) {
   return {
     root: {
-      marginLeft: 11,
+      marginLeft: 9,
       marginTop: 0,
       textAlign: "left",
       borderLeft: "2px solid ".concat(theme.palette.neutral.light)
@@ -119,7 +118,8 @@ var useStepLabelStyle = (0, _styles.makeStyles)(function (theme) {
   return {
     label: (0, _objectSpread2.default)({}, theme.typography.button, {
       fontWeight: '600 !important',
-      color: "inherit !important"
+      color: "inherit !important",
+      fontSize: '13px'
     }),
     active: {},
     completed: {}

package/es/HiStepper/HiStepper.js

@@ -26,7 +26,7 @@ var HiStepConnector = (0, _styles.withStyles)(function (theme) {
       backgroundColor: theme.palette.neutral.light,
       borderRadius: 2,
       width: 2,
-      marginLeft: -1,
+      marginLeft: -3,
       marginTop: -1
     }
   };

package/es/HiTable/HiCellBuilder.js

@@ -65,141 +65,147 @@ function (_React$PureComponent) {
     _this = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf2 = (0, _getPrototypeOf3.default)(HiCellBuilder)).call.apply(_getPrototypeOf2, [this].concat(args)));
 
     _this.createCell = function (cell, rowdata, locale) {
-      if (rowdata.datas[cell.colId]) {
-        var datacell = rowdata.datas[cell.colId];
+      if (typeof rowdata[cell.colId] !== 'undefined' || typeof rowdata.datas[cell.colId] !== 'undefined') {
+        var datacell = typeof rowdata[cell.colId] !== 'undefined' ? rowdata[cell.colId] : rowdata.datas[cell.colId];
 
-        if (cell.data !== undefined) {
-          var refproperties = cell.data.find(function (el) {
-            return el.id === datacell.value;
-          });
-
-          if (refproperties) {
-            Object.keys(refproperties).forEach(function (key) {
-              datacell[key] = refproperties[key];
+        if (datacell !== null) {
+          if (cell.data !== undefined) {
+            var refproperties = cell.data.find(function (el) {
+              return el.id === datacell.value;
             });
-          } else {
-            datacell = undefined;
-          }
-        }
-
-        if (datacell) {
-          switch (cell.type) {
-            case cst.TYPE_NUMERIC:
-            case cst.TYPE_AMOUNT:
-              return _react.default.createElement(_CellNumeric.default, {
-                value: datacell.value,
-                view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type],
-                precision: cell.precision,
-                currency: datacell.currency,
-                locale: datacell.locale || cell.locale || locale
-              });
-
-            case cst.TYPE_COUNTRY:
-              return _react.default.createElement(_CellImage.default, {
-                label: datacell.label,
-                shortLabel: datacell.id,
-                path: datacell.img,
-                size: datacell.size,
-                view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type]
-              });
-
-            case cst.TYPE_IMAGE:
-              return _react.default.createElement(_CellImage.default, {
-                label: datacell.label,
-                shortLabel: datacell.id,
-                path: datacell.img,
-                size: datacell.size || cell.size,
-                view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type],
-                fallbackImage: datacell.fallbackImage,
-                title: cell.title ? cell.title(datacell, cell) : datacell.title
-              });
-
-            case cst.TYPE_RATE:
-              return _react.default.createElement(_CellRate.default, {
-                indicator: datacell.indicator,
-                isPositive: datacell.isPositive,
-                locale: datacell.locale || cell.locale || locale,
-                value: datacell.value,
-                trendchip: datacell.trendchip,
-                view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type]
-              });
-
-            case cst.TYPE_ADDRESS:
-              return _react.default.createElement(_CellAddress.default, {
-                city: datacell.city,
-                country: datacell.country,
-                isoCountry: datacell.isoCountry,
-                name: datacell.name,
-                postalCode: datacell.postalCode,
-                streetAddress: datacell.streetAddress,
-                view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type]
-              });
 
-            case cst.TYPE_DATE:
-              return _react.default.createElement(_CellDate.default, {
-                date: datacell.date,
-                displayTime: datacell.displayTime,
-                formatShort: datacell.formatShort,
-                locale: datacell.locale || cell.precision || locale,
-                view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type]
-              });
-
-            case cst.TYPE_ICON:
-              return _react.default.createElement(_CellIcon.default, {
-                align: cell.align,
-                color: datacell.color,
-                icon: datacell.icon,
-                label: datacell.label,
-                onClick: datacell.handleClick,
-                view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type],
-                size: cell.size
-              });
-
-            case cst.TYPE_THIRD_PARTY_SECURITY:
-              return _react.default.createElement(_CellIcon.default, {
-                color: datacell.color,
-                icon: datacell.icon,
-                label: datacell.label,
-                view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type],
-                size: cell.size
-              });
-
-            case cst.TYPE_SENTINEL:
-              return _react.default.createElement(_CellSentinel.default, {
-                color: datacell.color,
-                label: datacell.label,
-                letter: datacell.label2,
-                active: datacell.active,
-                reviewer: datacell.reviewer,
-                outlined: datacell.outlined
-              });
-
-            case cst.TYPE_SCORE:
-              return _react.default.createElement(_CellSentinelScore.default, {
-                value: datacell.value,
-                result: datacell.result,
-                active: datacell.active
-              });
-
-            case cst.TYPE_PIN_TO_ACTION:
-              return _react.default.createElement(_CellPinToAction.default, {
-                number: datacell.number // eslint-disable-next-line react/jsx-handler-names
-                ,
-                onClick: datacell.onClick
+            if (refproperties) {
+              Object.keys(refproperties).forEach(function (key) {
+                datacell[key] = refproperties[key];
               });
+            } else {
+              datacell = undefined;
+            }
+          }
 
-            case cst.TYPE_ACCOUNT_NUMBER:
-            case cst.TYPE_CUSTOMER_ACCOUNT_NUMBER:
-            default:
-              return _react.default.createElement(_CellTextStyled.default, {
-                active: datacell.active,
-                color: datacell.color,
-                label: datacell.label,
-                isButton: datacell.isButton,
-                onClick: datacell.handleClick,
-                title: cell.title ? cell.title(datacell, cell) : datacell.title,
-                value: datacell.value
-              });
+          if (datacell) {
+            switch (cell.type) {
+              case cst.TYPE_NUMERIC:
+              case cst.TYPE_AMOUNT:
+                return _react.default.createElement(_CellNumeric.default, {
+                  value: datacell.value,
+                  view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type],
+                  precision: cell.precision,
+                  currency: datacell.currency,
+                  locale: datacell.locale || cell.locale || locale,
+                  isButton: datacell.isButton,
+                  onClick: datacell.handleClick,
+                  rowId: rowdata.rowId
+                });
+
+              case cst.TYPE_COUNTRY:
+                return _react.default.createElement(_CellImage.default, {
+                  label: datacell.label,
+                  shortLabel: datacell.id,
+                  path: datacell.img,
+                  size: datacell.size,
+                  view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type]
+                });
+
+              case cst.TYPE_IMAGE:
+                return _react.default.createElement(_CellImage.default, {
+                  label: datacell.label,
+                  shortLabel: datacell.id,
+                  path: datacell.img,
+                  size: datacell.size || cell.size,
+                  view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type],
+                  fallbackImage: datacell.fallbackImage,
+                  title: cell.title ? cell.title(datacell, cell) : datacell.title
+                });
+
+              case cst.TYPE_RATE:
+                return _react.default.createElement(_CellRate.default, {
+                  indicator: datacell.indicator,
+                  isPositive: datacell.isPositive,
+                  locale: datacell.locale || cell.locale || locale,
+                  value: datacell.value,
+                  trendchip: datacell.trendchip,
+                  view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type]
+                });
+
+              case cst.TYPE_ADDRESS:
+                return _react.default.createElement(_CellAddress.default, {
+                  city: datacell.city,
+                  country: datacell.country,
+                  isoCountry: datacell.isoCountry,
+                  name: datacell.name,
+                  postalCode: datacell.postalCode,
+                  streetAddress: datacell.streetAddress,
+                  view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type]
+                });
+
+              case cst.TYPE_DATE:
+                return _react.default.createElement(_CellDate.default, {
+                  date: datacell.date,
+                  displayTime: datacell.displayTime,
+                  formatShort: datacell.formatShort,
+                  locale: datacell.locale || cell.precision || locale,
+                  view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type]
+                });
+
+              case cst.TYPE_ICON:
+                return _react.default.createElement(_CellIcon.default, {
+                  align: cell.align,
+                  color: datacell.color,
+                  icon: datacell.icon,
+                  label: datacell.label,
+                  onClick: datacell.handleClick,
+                  view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type],
+                  size: cell.size
+                });
+
+              case cst.TYPE_THIRD_PARTY_SECURITY:
+                return _react.default.createElement(_CellIcon.default, {
+                  color: datacell.color,
+                  icon: datacell.icon,
+                  label: datacell.label,
+                  view: cell.view ? cell.view : cst.DEFAULT_VIEWS[cell.type],
+                  size: cell.size
+                });
+
+              case cst.TYPE_SENTINEL:
+                return _react.default.createElement(_CellSentinel.default, {
+                  color: datacell.color,
+                  label: datacell.label,
+                  letter: datacell.label2,
+                  active: datacell.active,
+                  reviewer: datacell.reviewer,
+                  outlined: datacell.outlined
+                });
+
+              case cst.TYPE_SCORE:
+                return _react.default.createElement(_CellSentinelScore.default, {
+                  value: datacell.value,
+                  result: datacell.result,
+                  active: datacell.active
+                });
+
+              case cst.TYPE_PIN_TO_ACTION:
+                return _react.default.createElement(_CellPinToAction.default, {
+                  number: datacell.number // eslint-disable-next-line react/jsx-handler-names
+                  ,
+                  onClick: datacell.onClick
+                });
+
+              case cst.TYPE_ACCOUNT_NUMBER:
+              case cst.TYPE_CUSTOMER_ACCOUNT_NUMBER:
+              default:
+                return _react.default.createElement(_CellTextStyled.default, {
+                  active: datacell.active,
+                  color: datacell.color,
+                  label: datacell.label,
+                  isButton: datacell.isButton,
+                  onClick: datacell.handleClick,
+                  title: cell.title ? cell.title(datacell, cell) : datacell.title,
+                  value: datacell.value,
+                  align: cell.align
+                });
+            }
           }
         }
       }

package/es/HiTable/HiTableBody.js

@@ -43,11 +43,11 @@ function (_React$PureComponent) {
           dense = _this$props.dense,
           locale = _this$props.locale,
           onClick = _this$props.onClick;
-      return _react.default.createElement(_TableBody.default, null, data.map(function (n) {
+      return _react.default.createElement(_TableBody.default, null, data.map(function (n, index) {
         return _react.default.createElement(_HiTableRow.default, {
           columns: columns,
           rowdata: n,
-          key: n.rowId,
+          key: n.rowId || index,
           onClick: onClick,
           dense: dense,
           locale: locale

package/es/HiTable/HiTableHeader.js

@@ -19,6 +19,8 @@ var _getPrototypeOf3 = _interopRequireDefault(require("@babel/runtime/helpers/es
 
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
 
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _styles = require("@material-ui/core/styles");
@@ -40,14 +42,16 @@ var styles = function styles(theme) {
       cursor: 'inherit',
       borderBottom: "solid 1px ".concat(theme.palette.divider)
     },
-    cell: {
+    cell: (0, _objectSpread2.default)({
       border: 'none',
       paddingRight: '13px',
       paddingLeft: '13px',
       overflow: 'hidden',
       textOverflow: 'ellipsis',
-      whiteSpace: 'nowrap'
-    },
+      whiteSpace: 'nowrap',
+      fontWeight: theme.typography.fontWeightLight,
+      color: '#000000'
+    }, theme.typography.b4),
     icon: {
       color: '#00ADE9'
     }

package/es/HiTable/HiTableRow.js

@@ -23,6 +23,8 @@ var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
 
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
 var _react = _interopRequireDefault(require("react"));
 
 var _keycode = _interopRequireDefault(require("keycode"));
@@ -51,14 +53,14 @@ var styles = function styles(theme) {
     clickableRow: {
       cursor: 'pointer'
     },
-    cell: {
+    cell: (0, _objectSpread2.default)({
       border: 'none',
       padding: '0px 13px',
       minHeight: '32px',
       maxHeight: '40px',
       fontWeight: theme.typography.fontWeightRegular,
       lineHeight: 'unset'
-    }
+    }, theme.typography.b3)
   };
 };
 

package/es/hi-svg-icons/HiLogoRounded.js

@@ -35,8 +35,9 @@ var _ref = _react.default.createElement("ellipse", {
  */
 var HiLogoRounded = (0, _pure.default)(function (props) {
   var theme = (0, _styles.useTheme)();
-  var style = props.style,
-      other = (0, _objectWithoutProperties2.default)(props, ["style"]);
+  var color = props.color,
+      style = props.style,
+      other = (0, _objectWithoutProperties2.default)(props, ["color", "style"]);
   return _react.default.createElement(_Icon.default, (0, _extends2.default)({
     style: (0, _objectSpread2.default)({}, style, {
       fontSize: props.size || 24

package/hi-svg-icons/HiLogoRounded.js

@@ -35,8 +35,9 @@ var _ref = _react.default.createElement("ellipse", {
  */
 var HiLogoRounded = (0, _pure.default)(function (props) {
   var theme = (0, _styles.useTheme)();
-  var style = props.style,
-      other = (0, _objectWithoutProperties2.default)(props, ["style"]);
+  var color = props.color,
+      style = props.style,
+      other = (0, _objectWithoutProperties2.default)(props, ["color", "style"]);
   return _react.default.createElement(_Icon.default, (0, _extends2.default)({
     style: (0, _objectSpread2.default)({}, style, {
       fontSize: props.size || 24