@hipay/hipay-material-ui 3.12.2 → 3.13.0

package/HiSelectableList/HiSelectableListItem.js

@@ -182,7 +182,7 @@ var useStyles = (0, _makeStyles.default)(function (theme) {
       padding: theme.spacing(2, 0),
       margin: 'auto'
     },
-    listItemContent: (0, _objectSpread2.default)({}, theme.typography.b1, {
+    listItemContent: (0, _objectSpread2.default)({}, theme.typography.body2, {
       fontWeight: 'inherit',
       width: '100%',
       minWidth: '50%',
@@ -207,17 +207,15 @@ var useStyles = (0, _makeStyles.default)(function (theme) {
       color: theme.palette.primary.main,
       textTransform: 'uppercase'
     },
-    secondaryLabel: (0, _objectSpread2.default)({}, theme.typography.b3, {
+    secondaryLabel: (0, _objectSpread2.default)({}, theme.typography.caption, {
       color: theme.palette.neutral.main,
       fontWeight: theme.typography.fontWeightLight,
-      fontSize: 11,
       marginLeft: theme.spacing(1)
     }),
     inline: {},
-    info: (0, _objectSpread2.default)({}, theme.typography.b3, {
+    info: (0, _objectSpread2.default)({}, theme.typography.body3, {
       color: theme.palette.neutral.main,
       fontWeight: theme.typography.fontWeightLight,
-      fontSize: 12,
       textOverflow: 'ellipsis',
       textAlign: 'right',
       alignSelf: 'center'

package/HiTable/HiTableHeader.js

@@ -56,9 +56,10 @@ var styles = function styles(theme) {
       overflow: 'hidden',
       textOverflow: 'ellipsis',
       whiteSpace: 'nowrap',
-      fontWeight: theme.typography.fontWeightLight,
       color: '#000000'
-    }, theme.typography.b4),
+    }, theme.typography.body3, {
+      fontWeight: theme.typography.fontWeightLight
+    }),
     icon: {
       color: '#00ADE9'
     }

package/HiTable/HiTableRow.js

@@ -65,9 +65,8 @@ var styles = function styles(theme) {
       padding: '0px 13px',
       minHeight: '32px',
       maxHeight: '40px',
-      fontWeight: theme.typography.fontWeightRegular,
       lineHeight: 'unset'
-    }, theme.typography.b3)
+    }, theme.typography.body3)
   };
 };
 

package/es/HiAccordionSummary/HiAccordionSummary.js

@@ -40,13 +40,14 @@ var HiAccordionSummary = function HiAccordionSummary(props) {
     }),
     expandIcon: props.editMode ? null : _ref
   }, /*#__PURE__*/_react.default.createElement(_Typography.default, {
-    variant: "h2",
+    variant: "h3",
     className: "heading"
   }, props.heading), !props.editMode && /*#__PURE__*/_react.default.createElement("div", {
     className: "secondary"
   }, !!props.secondaryHeading && /*#__PURE__*/_react.default.createElement(_Typography.default, {
     className: "secondaryHeading",
-    variant: "h5"
+    variant: "caption",
+    color: "textSecondary"
   }, props.secondaryHeading), props.editable && /*#__PURE__*/_react.default.createElement(_HiButton.default, {
     className: "editButton",
     color: "primary",
@@ -65,9 +66,6 @@ HiAccordionSummary.defaultProps = {
 var StyledHiAccordionSummary = (0, _styledComponents.default)(HiAccordionSummary).withConfig({
   displayName: "HiAccordionSummary__StyledHiAccordionSummary",
   componentId: "sc-x8gl70-0"
-})(["&.summary{border-bottom:1px solid #e3e6e7;height:48px;min-height:48px;padding:0;&.editMode{border-bottom:none;cursor:default;.heading{font-weight:bold;}}.summaryContent{display:flex;justify-content:space-between;align-items:center;.secondary{display:flex;align-items:center;.secondaryHeading{color:", ";font-size:11px;}}}.saveLabel{margin-left:6px;}}"], function (_ref3) {
-  var theme = _ref3.theme;
-  return theme.palette.neutral.light;
-});
+})(["&.summary{border-bottom:1px solid #e3e6e7;height:48px;min-height:48px;padding:0;&.editMode{border-bottom:none;cursor:default;.heading{font-weight:bold;}}.summaryContent{display:flex;justify-content:space-between;align-items:center;.secondary{display:flex;align-items:center;}}.saveLabel{margin-left:6px;}}"]);
 var _default = StyledHiAccordionSummary;
 exports.default = _default;

package/es/HiAlertModal/HiAlertModal.js

@@ -67,8 +67,8 @@ var HiAlertModal = function HiAlertModal(props) {
   }, props.title), /*#__PURE__*/_react.default.createElement(_DialogContent.default, {
     className: "dialog-content"
   }, /*#__PURE__*/_react.default.createElement(_material.Typography, {
-    component: 'div',
-    variant: "body1",
+    component: "div",
+    variant: "body2",
     color: "textSecondary"
   }, props.content)), /*#__PURE__*/_react.default.createElement(_DialogActions.default, {
     className: "dialog-actions"

package/es/HiBreadcrumb/HiStepLabel.js

@@ -51,10 +51,9 @@ var styles = function styles(theme) {
     label: (0, _objectSpread2.default)({
       display: 'inline-block',
       marginLeft: 4,
-      fontWeight: theme.typography.fontWeightRegular,
       color: theme.palette.neutral.main,
       marginBottom: -4
-    }, theme.typography.b2),
+    }, theme.typography.body3),
     labelHover: {
       '&:hover': {
         cursor: 'pointer'

package/es/HiChip/HiChip.js

@@ -27,13 +27,12 @@ var _makeStyles = _interopRequireDefault(require("@mui/styles/makeStyles"));
 
 var useStyles = (0, _makeStyles.default)(function (theme) {
   return {
-    root: (0, _objectSpread2.default)({}, theme.typography.b3, {
+    root: (0, _objectSpread2.default)({}, theme.typography.body3, {
       display: 'inline-flex',
       marginRight: 4,
       width: 'fit-content',
       height: 24,
       borderRadius: 12,
-      fontSize: 13,
       backgroundColor: theme.palette.grey[300],
       color: theme.palette.neutral.dark,
       padding: 8,

package/es/HiChip/HiChipSwitch.js

@@ -43,14 +43,13 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 var styles = function styles(theme) {
   return {
-    root: (0, _objectSpread2.default)({}, theme.typography.b3, {
+    root: (0, _objectSpread2.default)({}, theme.typography.body3, {
       display: 'inline-flex',
       alignItems: 'center',
       marginRight: 4,
       width: 'fit-content',
       height: 24,
       borderRadius: 12,
-      fontSize: 13,
       cursor: 'pointer',
       padding: '0 4px',
       outline: 'none',

package/es/HiColoredLabel/HiColoredLabel.js

@@ -38,11 +38,11 @@ var styles = function styles(theme) {
       whiteSpace: 'nowrap',
       lineHeight: 1
     },
-    body1: (0, _objectSpread2.default)({}, theme.typography.b1),
-    body2: (0, _objectSpread2.default)({}, theme.typography.b2),
-    body3: (0, _objectSpread2.default)({}, theme.typography.b3),
-    body4: (0, _objectSpread2.default)({}, theme.typography.b4),
-    body5: (0, _objectSpread2.default)({}, theme.typography.b5),
+    body1: (0, _objectSpread2.default)({}, theme.typography.body2),
+    body2: (0, _objectSpread2.default)({}, theme.typography.body2),
+    body3: (0, _objectSpread2.default)({}, theme.typography.body3),
+    body4: (0, _objectSpread2.default)({}, theme.typography.body3),
+    body5: (0, _objectSpread2.default)({}, theme.typography.body3),
     color: {
       fontWeight: 400
     },

package/es/HiDatePicker/Caption.js

@@ -22,7 +22,7 @@ var styles = function styles(theme) {
       height: 40,
       textAlign: 'center',
       padding: '4px 0'
-    }, theme.typography.body1, {
+    }, theme.typography.body2, {
       color: theme.palette.neutral.main
     })
   };

package/es/HiDatePicker/HiDateRangePicker.js

@@ -117,7 +117,7 @@ var HiDateRangePicker = /*#__PURE__*/function (_React$Component) {
       var today = (0, _momentTimezone.default)();
       var todayDate = new Date(today.year(), today.month(), today.date(), 23, 59, 59);
 
-      if (change && day > todayDate) {
+      if (change && day > todayDate && _this.props.disableFutureDays) {
         change = false;
       }
 

package/es/HiDatePicker/HiDateRangeSelector.js

@@ -131,11 +131,11 @@ function buildDateRangeInfo(t, from, to, format) {
 
 
   switch (prefix) {
-    case "week":
+    case 'week':
       info = "".concat(t.short_week).concat(from.format('w'), ", ").concat(info);
       break;
 
-    case "quarter":
+    case 'quarter':
       info = "".concat(t.short_quarter).concat(from.format('Q'), ", ").concat(info);
       break;
 
@@ -186,7 +186,7 @@ function buildDateRangeOptionByKey(key, t, format) {
       from = (0, _momentTimezone.default)().startOf('week');
       to = (0, _momentTimezone.default)();
       info = buildDateRangeInfo(t, from, to, format, {
-        prefix: "week",
+        prefix: 'week',
         toNow: true,
         displayDays: true
       });
@@ -197,7 +197,7 @@ function buildDateRangeOptionByKey(key, t, format) {
       from = (0, _momentTimezone.default)().subtract(1, 'week').startOf('week');
       to = (0, _momentTimezone.default)().subtract(1, 'week').endOf('week');
       info = buildDateRangeInfo(t, from, to, format, {
-        prefix: "week",
+        prefix: 'week',
         toNow: false,
         displayDays: true
       });
@@ -227,7 +227,7 @@ function buildDateRangeOptionByKey(key, t, format) {
       from = (0, _momentTimezone.default)().startOf('quarter');
       to = (0, _momentTimezone.default)();
       info = buildDateRangeInfo(t, from, to, format, {
-        prefix: "quarter",
+        prefix: 'quarter',
         toNow: true,
         displayDays: true
       });
@@ -238,7 +238,7 @@ function buildDateRangeOptionByKey(key, t, format) {
       from = (0, _momentTimezone.default)().subtract(1, 'quarter').startOf('quarter');
       to = (0, _momentTimezone.default)().subtract(1, 'quarter').endOf('quarter');
       info = buildDateRangeInfo(t, from, to, format, {
-        prefix: "quarter",
+        prefix: 'quarter',
         toNow: false,
         displayDays: true
       });
@@ -255,11 +255,11 @@ function buildDateRangeOptionByKey(key, t, format) {
       });
       break;
 
-    case "1":
-      label = "24h";
+    case '1':
+      label = '24h';
       from = (0, _momentTimezone.default)().subtract(1, 'day');
       to = (0, _momentTimezone.default)();
-      info = "".concat(t.from, " ").concat(from.format("HH:mm"), " ").concat(t.yesterday.toLowerCase(), " ").concat(t.to_now);
+      info = "".concat(t.from, " ").concat(from.format('HH:mm'), " ").concat(t.yesterday.toLowerCase(), " ").concat(t.to_now);
       break;
 
     default:
@@ -327,7 +327,7 @@ var styles = function styles(theme) {
     },
     formControlLabel: {
       top: theme.spacing(5),
-      overflow: "unset"
+      overflow: 'unset'
     }
   };
 };
@@ -352,7 +352,7 @@ var HiDateRangeSelector = /*#__PURE__*/function (_React$Component) {
     var _this;
 
     (0, _classCallCheck2.default)(this, HiDateRangeSelector);
-    _this = _super.call(this);
+    _this = _super.call(this, props);
     _this.options = [];
 
     _this.handleBlur = function (event) {
@@ -441,8 +441,8 @@ var HiDateRangeSelector = /*#__PURE__*/function (_React$Component) {
 
       if (customOptionsAvailable.length) {
         options.push({
-          id: "custom_periods_subheader",
-          type: CUSTOM_PERIOD_LIST.includes(selectedPreset) ? "primary-highlight" : "highlight",
+          id: 'custom_periods_subheader',
+          type: CUSTOM_PERIOD_LIST.includes(selectedPreset) ? 'primary-highlight' : 'highlight',
           icon: _ref2,
           label: translations.custom_periods,
           children: this.options.filter(function (o) {
@@ -454,8 +454,8 @@ var HiDateRangeSelector = /*#__PURE__*/function (_React$Component) {
 
       if (presetOptionsAvailable.length) {
         options.push({
-          id: "preset_periods_subheader",
-          type: PRESET_PERIOD_LIST.includes(selectedPreset) ? "primary-highlight" : "highlight",
+          id: 'preset_periods_subheader',
+          type: PRESET_PERIOD_LIST.includes(selectedPreset) ? 'primary-highlight' : 'highlight',
           icon: _ref3,
           label: translations.preset_periods,
           children: this.options.filter(function (o) {
@@ -467,8 +467,8 @@ var HiDateRangeSelector = /*#__PURE__*/function (_React$Component) {
 
       if (slidingOptionsAvailable.length) {
         options.push({
-          id: "sliding_periods_subheader",
-          type: SLIDING_PERIOD_LIST.includes(selectedPreset) ? "primary-highlight" : "highlight",
+          id: 'sliding_periods_subheader',
+          type: SLIDING_PERIOD_LIST.includes(selectedPreset) ? 'primary-highlight' : 'highlight',
           icon: _ref4,
           label: translations.sliding_periods,
           children: this.options.filter(function (o) {
@@ -497,6 +497,7 @@ var HiDateRangeSelector = /*#__PURE__*/function (_React$Component) {
           idRange = _this$props2.idRange,
           idSelect = _this$props2.idSelect,
           minimumDate = _this$props2.minimumDate,
+          disableFutureDays = _this$props2.disableFutureDays,
           label = _this$props2.label,
           from = _this$props2.from,
           onChange = _this$props2.onChange,
@@ -507,7 +508,7 @@ var HiDateRangeSelector = /*#__PURE__*/function (_React$Component) {
           selectProps = _this$props2.selectProps,
           staticPosition = _this$props2.staticPosition,
           className = _this$props2.className,
-          props = (0, _objectWithoutProperties2.default)(_this$props2, ["availableOptionKeys", "disabled", "enableTime", "errorText", "fromError", "toError", "helperIcon", "helperText", "idRange", "idSelect", "minimumDate", "label", "from", "onChange", "required", "to", "translations", "classes", "selectProps", "staticPosition", "className"]);
+          props = (0, _objectWithoutProperties2.default)(_this$props2, ["availableOptionKeys", "disabled", "enableTime", "errorText", "fromError", "toError", "helperIcon", "helperText", "idRange", "idSelect", "minimumDate", "disableFutureDays", "label", "from", "onChange", "required", "to", "translations", "classes", "selectProps", "staticPosition", "className"]);
       var _this$state = this.state,
           selectedPreset = _this$state.selectedPreset,
           containerWidth = _this$state.containerWidth;
@@ -577,6 +578,7 @@ var HiDateRangeSelector = /*#__PURE__*/function (_React$Component) {
         onChange: onChange,
         toError: toError,
         fromError: fromError,
+        disableFutureDays: disableFutureDays,
         minimumDate: minimumDate,
         errorText: null,
         onReset: this.handleReset,
@@ -604,6 +606,7 @@ var HiDateRangeSelector = /*#__PURE__*/function (_React$Component) {
 
 HiDateRangeSelector.defaultProps = {
   availableOptionKeys: [].concat(PRESET_PERIOD_LIST, CUSTOM_PERIOD_LIST),
+  disableFutureDays: true,
   enableTime: false,
   returnSelectValue: false,
   staticPosition: false,
@@ -638,7 +641,7 @@ HiDateRangeSelector.defaultProps = {
     current_quarter: 'Current Quarter',
     previous_quarter: 'Previous Quarter',
     current_year: 'Current Year',
-    year_on_year: "Last twelve months",
+    year_on_year: 'Last twelve months',
     invalid_format: 'The date format is not valid',
     to_superior_from: 'Date from cannot be greater than date to',
     date_superior_max_date: 'Date from cannot be greater than %s',
@@ -647,7 +650,7 @@ HiDateRangeSelector.defaultProps = {
     missing_date_to: 'Missing date to',
     preset_periods: 'Preset periods',
     custom_periods: 'Custom periods',
-    custom_period_info: "Select a custom period",
+    custom_period_info: 'Select a custom period',
     sliding_periods: 'Sliding periods'
   }
 };

package/es/HiDatePicker/Overlays/CustomOverlayLayout.js

@@ -45,15 +45,13 @@ var styles = function styles(theme) {
       padding: 0,
       height: 325,
       textAlign: 'center'
-    }, theme.typography.body2, {
-      fontWeight: theme.typography.fontWeightRegular
-    }),
+    }, theme.typography.body2),
     header: (0, _objectSpread2.default)({
       display: 'block',
       height: 40,
       textAlign: 'center',
       padding: '10px 0'
-    }, theme.typography.body1, {
+    }, theme.typography.body2, {
       color: theme.palette.neutral.main,
       borderBottom: '1px solid',
       borderBottomColor: theme.palette.divider

package/es/HiDatePicker/Overlays/CustomOverlayLayoutWithoutFooter.js

@@ -45,15 +45,13 @@ var styles = function styles(theme) {
       padding: 0,
       height: 325,
       textAlign: 'center'
-    }, theme.typography.body2, {
-      fontWeight: theme.typography.fontWeightRegular
-    }),
+    }, theme.typography.body2),
     header: (0, _objectSpread2.default)({
       display: 'block',
       height: 40,
       textAlign: 'center',
       padding: '10px 0'
-    }, theme.typography.body1, {
+    }, theme.typography.body2, {
       color: theme.palette.neutral.main,
       borderBottom: '1px solid',
       borderBottomColor: theme.palette.divider

package/es/HiDatePicker/Overlays/TimePickerOverlay.js

@@ -52,15 +52,13 @@ var styles = function styles(theme) {
       padding: 0,
       height: 325,
       textAlign: 'center'
-    }, theme.typography.body2, {
-      fontWeight: theme.typography.fontWeightRegular
-    }),
+    }, theme.typography.body2),
     header: (0, _objectSpread2.default)({
       display: 'block',
       height: 40,
       textAlign: 'center',
       padding: '10px 0'
-    }, theme.typography.body1, {
+    }, theme.typography.body2, {
       color: theme.palette.neutral.main,
       borderBottom: '1px solid',
       borderBottomColor: theme.palette.divider

package/es/HiDatePicker/stylesheet.js

@@ -19,7 +19,7 @@ var _default = function _default(theme) {
       width: '100%',
       maxWidth: 500
     },
-    rootMobile: (0, _objectSpread2.default)({}, theme.typography.b1, {
+    rootMobile: (0, _objectSpread2.default)({}, theme.typography.body2, {
       backgroundColor: theme.palette.background2,
       borderBottom: '1px solid #E0E0E0',
       borderLeft: 'none',
@@ -128,7 +128,6 @@ var _default = function _default(theme) {
       display: 'table-cell'
     }, theme.typography.body2, {
       color: theme.palette.neutral.main,
-      fontWeight: theme.typography.fontWeightRegular,
       textAlign: 'center',
       verticalAlign: 'middle'
     }),
@@ -161,8 +160,7 @@ var _default = function _default(theme) {
       verticalAlign: 'middle',
       outline: 'none'
     }, theme.typography.body2, {
-      color: theme.palette.neutral.dark,
-      fontWeight: theme.typography.fontWeightRegular
+      color: theme.palette.neutral.dark
     }),
     // The calendar footer (only with todayButton prop)
     footer: {

package/es/HiDialog/HiDialog.js

@@ -37,7 +37,7 @@ var useStyles = (0, _makeStyles.default)(function (theme) {
       marginTop: theme.spacing(-2),
       marginRight: theme.spacing(-6)
     },
-    title: (0, _objectSpread2.default)({}, theme.typography.h1, {
+    title: (0, _objectSpread2.default)({}, theme.typography.h2, {
       margin: 0
     })
   };

package/es/HiExpansionPanel/HiExpansionPanel.js

@@ -63,20 +63,17 @@ var useStyles = (0, _makeStyles.default)(function (theme) {
       cursor: 'default',
       pointerEvents: 'none'
     },
-    heading: (0, _objectSpread2.default)({}, theme.typography.b1, {
+    heading: (0, _objectSpread2.default)({}, theme.typography.h3, {
       height: 48,
       display: 'flex',
       alignItems: 'center',
-      fontSize: 20,
-      lineHeight: '24px',
       fontWeight: theme.typography.fontWeightLight
     }),
-    secondaryHeading: (0, _objectSpread2.default)({}, theme.typography.b3, {
-      color: theme.palette.neutral.light,
+    secondaryHeading: (0, _objectSpread2.default)({}, theme.typography.caption, {
+      color: theme.palette.text.secondary,
       height: 48,
       display: 'flex',
       alignItems: 'center',
-      fontSize: 11,
       '&>svg': {
         fontSize: 18,
         marginLeft: 3

package/es/HiForm/HiFormControl.js

@@ -87,15 +87,14 @@ var styles = function styles(theme) {
     iconButtonInfo: {},
     iconButtonInfoActive: {},
     iconFullWidth: {},
-    errorDiv: (0, _objectSpread2.default)({}, theme.typography.b3, {
+    errorDiv: (0, _objectSpread2.default)({}, theme.typography.body3, {
       backgroundColor: theme.palette.negative.main,
       color: '#FFFFFF',
       padding: theme.spacing(4, 2),
       verticalAlign: 'middle',
       borderRadius: 2,
       position: 'relative',
-      marginBottom: theme.spacing(2),
-      fontWeight: theme.typography.fontWeightRegular
+      marginBottom: theme.spacing(2)
     }),
     arrowDown: {
       width: 0,
@@ -117,7 +116,7 @@ var styles = function styles(theme) {
     errorDivArrowDown: {
       borderTopColor: theme.palette.negative.main
     },
-    helperDiv: (0, _objectSpread2.default)({}, theme.typography.b2, {
+    helperDiv: (0, _objectSpread2.default)({}, theme.typography.body2, {
       width: '100%',
       backgroundColor: '#ffffff',
       color: theme.palette.neutral.normal,
@@ -125,9 +124,7 @@ var styles = function styles(theme) {
       borderRadius: 2,
       position: 'relative',
       marginBottom: theme.spacing(2),
-      fontWeight: theme.typography.fontWeightRegular,
-      boxShadow: '0px 1px 7px rgba(0, 0, 0, 0.16)',
-      lineHeight: 1.5
+      boxShadow: '0px 1px 7px rgba(0, 0, 0, 0.16)'
     }),
     helperDivArrowDown: {
       borderTopColor: '#ffffff'
@@ -135,7 +132,7 @@ var styles = function styles(theme) {
     icon: {
       position: 'absolute',
       fontSize: 20,
-      top: 4
+      top: 5
     }
   };
 };

package/es/HiForm/HiFormLabel.js

@@ -37,8 +37,8 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 var styles = function styles(theme) {
   return {
-    root: (0, _objectSpread2.default)({}, theme.typography.h4, {
-      fontWeight: theme.typography.fontWeightRegular,
+    root: (0, _objectSpread2.default)({}, theme.typography.body2, {
+      lineHeight: '18px',
       color: theme.palette.neutral.main,
       position: 'inherit',
       transform: 'inherit',
@@ -52,11 +52,10 @@ var styles = function styles(theme) {
       display: 'flex',
       alignItems: 'baseline'
     }),
-    optional: {
-      fontSize: 11,
+    optional: (0, _objectSpread2.default)({}, theme.typography.caption, {
       marginLeft: 4,
       color: theme.palette.neutral.main
-    },
+    }),
     focused: {},
     error: {}
   };

package/es/HiForm/HiInput.js

@@ -49,7 +49,7 @@ var styles = function styles(theme) {
   return {
     root: (0, _objectSpread2.default)({
       position: 'relative'
-    }, theme.typography.b1, {
+    }, theme.typography.body2, {
       borderBottom: "1px solid ".concat(theme.palette.input.bottomLine),
       paddingLeft: 8,
       backgroundColor: theme.palette.background2,
@@ -123,13 +123,12 @@ var styles = function styles(theme) {
       // Ajout d'1px pour ne pas avoir de décalage en mode error avec le border right
       marginRight: '-1px'
     },
-    input: (0, _objectSpread2.default)({}, theme.typography.b1, {
-      fontWeight: theme.typography.fontWeightRegular,
+    input: (0, _objectSpread2.default)({}, theme.typography.body2, {
       caretColor: theme.palette.primary.main,
       display: 'flex',
       alignItems: 'center'
     }),
-    inputPropsClassName: (0, _objectSpread2.default)({}, theme.typography.b1, {
+    inputPropsClassName: (0, _objectSpread2.default)({}, theme.typography.body2, {
       padding: 0
     }),
     inputText: {
@@ -396,7 +395,7 @@ var HiInput = /*#__PURE__*/function (_React$PureComponent) {
         },
         onClick: this.handleReset,
         onBlur: this.handleBlur,
-        buttonRef: function buttonRef(el) {
+        ref: function ref(el) {
           _this2.eraseIconNode = el;
         }
       }, _ref);

package/es/HiForm/HiSlider.js

@@ -50,7 +50,7 @@ var styles = function styles(theme) {
       zIndex: '2',
       cursor: 'pointer'
     },
-    mainContainer: (0, _objectSpread2.default)({}, theme.typography.body1, {
+    mainContainer: (0, _objectSpread2.default)({}, theme.typography.body2, {
       display: 'flex',
       flexWrap: 'nowrap',
       alignItems: 'center'

package/es/HiForm/HiUploadInput.js

@@ -41,7 +41,7 @@ var styles = function styles(theme) {
   return {
     root: (0, _objectSpread2.default)({
       position: 'relative'
-    }, theme.typography.body1, {
+    }, theme.typography.body2, {
       borderBottom: "1px solid ".concat(theme.palette.input.bottomLine),
       paddingLeft: 8,
       backgroundColor: theme.palette.background2,
@@ -130,8 +130,7 @@ var styles = function styles(theme) {
       backgroundColor: theme.palette.background3
     },
     error: {},
-    label: (0, _objectSpread2.default)({}, theme.typography.body1, {
-      fontWeight: theme.typography.fontWeightRegular,
+    label: (0, _objectSpread2.default)({}, theme.typography.body2, {
       caretColor: theme.palette.primary.main,
       alignItems: 'center',
       whiteSpace: 'nowrap',

package/es/HiIconButton/HiIconButton.js

@@ -52,7 +52,7 @@ var useStyles = (0, _makeStyles.default)(function (theme) {
 });
 exports.useStyles = useStyles;
 
-function HiIconButton(props) {
+var HiIconButton = _react.default.forwardRef(function (props, ref) {
   var children = props.children,
       className = props.className,
       color = props.color,
@@ -71,7 +71,7 @@ function HiIconButton(props) {
     color: isCustomColor ? 'inherit' : color,
     size: "large"
   }, other), children);
-}
+});
 
 HiIconButton.defaultProps = {
   color: 'default'

package/es/HiSelect/HiNestedSelect.js

@@ -191,7 +191,7 @@ var styles = function styles(theme) {
       overflow: 'hidden',
       textOverflow: 'ellipsis',
       paddingRight: 16
-    }, theme.typography.b1, {
+    }, theme.typography.body2, {
       display: 'inline-flex',
       width: '100%'
     }),
@@ -200,7 +200,7 @@ var styles = function styles(theme) {
       overflow: 'hidden',
       textOverflow: 'ellipsis',
       paddingRight: 16
-    }, theme.typography.b1, {
+    }, theme.typography.body2, {
       display: 'inline-flex',
       width: '100%'
     })

package/es/HiSelect/HiSelect.js

@@ -106,7 +106,7 @@ var styles = function styles(theme) {
       overflow: 'hidden',
       textOverflow: 'ellipsis',
       paddingRight: 16
-    }, theme.typography.b1, {
+    }, theme.typography.body2, {
       display: 'inline-block',
       width: '100%'
     }),
@@ -115,7 +115,7 @@ var styles = function styles(theme) {
       overflow: 'hidden',
       textOverflow: 'ellipsis',
       paddingRight: 16
-    }, theme.typography.b1, {
+    }, theme.typography.body2, {
       display: 'inline-flex',
       width: '100%'
     }),