@hipay/hipay-material-ui 3.12.2 → 3.12.3-beta.0

package/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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/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%'
     }),

package/HiSelect/HiSelectContent.js

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

package/HiSelect/HiSelectInput.js

@@ -130,7 +130,7 @@ var styles = function styles(theme) {
       whiteSpace: 'nowrap',
       overflow: 'hidden',
       textOverflow: 'ellipsis'
-    }, theme.typography.b1, {
+    }, theme.typography.body2, {
       display: 'inline-block',
       width: '100%'
     }),

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/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%'
     }),

package/es/HiSelect/HiSelectContent.js

@@ -59,7 +59,7 @@ var styles = function styles(theme) {
       overflow: 'hidden',
       textOverflow: 'ellipsis',
       paddingRight: 16
-    }, theme.typography.b1, {
+    }, theme.typography.body2, {
       display: 'inline-flex',
       width: '100%'
     }),
@@ -68,7 +68,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/HiSelectInput.js

@@ -130,7 +130,7 @@ var styles = function styles(theme) {
       whiteSpace: 'nowrap',
       overflow: 'hidden',
       textOverflow: 'ellipsis'
-    }, theme.typography.b1, {
+    }, theme.typography.body2, {
       display: 'inline-block',
       width: '100%'
     }),

package/es/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/es/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/es/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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hipay/hipay-material-ui",
   "private": false,
-  "version": "3.12.2",
+  "version": "3.12.3-beta.0",
   "description": "React components that implement Google's Material Design.",
   "repository": {
     "type": "git",
@@ -13,6 +13,7 @@
   },
   "homepage": "http://materialui.hipay.dev.local/",
   "peerDependencies": {
+    "@hipay/design-system": "^1.0.1",
     "@mui/material": "5.5.3",
     "@mui/styles": "5.5.3",
     "@mui/styled-engine": "npm:@mui/styled-engine-sc@5.4.2",
@@ -49,7 +50,7 @@
     "react-jss": "10.0.3",
     "react-lazyload": "2.6.2",
     "react-pdf": "5.7.2",
-    "react-spinners": "0.12.0-alpha.2",
+    "react-spinners": "0.12.0",
     "recompose": "0.30.0",
     "validator": "10.7.1"
   },