@hipay/hipay-material-ui 3.13.5 → 3.15.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -47,7 +47,7 @@ var styles = function styles(theme) {
47
47
  },
48
48
  line: {
49
49
  display: 'block',
50
- borderColor: theme.palette.grey[600],
50
+ borderColor: '#757575',
51
51
  borderLeftStyle: 'solid',
52
52
  borderLeftWidth: 2,
53
53
  height: 40,
package/HiChip/HiChip.js CHANGED
@@ -33,7 +33,7 @@ var useStyles = (0, _makeStyles.default)(function (theme) {
33
33
  width: 'fit-content',
34
34
  height: 24,
35
35
  borderRadius: 12,
36
- backgroundColor: theme.palette.grey[300],
36
+ backgroundColor: '#e0e0e0',
37
37
  color: theme.palette.neutral.dark,
38
38
  padding: 8,
39
39
  alignItems: 'center',
@@ -94,7 +94,7 @@ var useStyles = (0, _makeStyles.default)(function (theme) {
94
94
  navigate: {
95
95
  // Remove grey highlight
96
96
  WebkitTapHighlightColor: 'transparent',
97
- backgroundColor: theme.palette.grey[300],
97
+ backgroundColor: '#e0e0e0',
98
98
  color: theme.palette.neutral.normal,
99
99
  marginRight: 2,
100
100
  marginLeft: 2,
@@ -102,7 +102,7 @@ var useStyles = (0, _makeStyles.default)(function (theme) {
102
102
  cursor: 'pointer',
103
103
  '&:hover, &:focus': {
104
104
  backgroundColor: theme.palette.primary.main,
105
- color: theme.palette.grey[300]
105
+ color: '#e0e0e0'
106
106
  },
107
107
  position: 'relative'
108
108
  },
@@ -57,7 +57,7 @@ var styles = function styles(theme) {
57
57
  // Remove grey highlight
58
58
  WebkitTapHighlightColor: 'transparent',
59
59
  '&:hover, &:focus': {
60
- backgroundColor: (0, _styles.emphasize)(theme.palette.grey[300], 0.08)
60
+ backgroundColor: (0, _styles.emphasize)('#e0e0e0', 0.08)
61
61
  }
62
62
  }),
63
63
  active: {
@@ -68,7 +68,7 @@ var styles = function styles(theme) {
68
68
  }
69
69
  },
70
70
  inactive: {
71
- backgroundColor: theme.palette.grey[300],
71
+ backgroundColor: '#e0e0e0',
72
72
  color: theme.palette.neutral.dark
73
73
  },
74
74
  icon: {
@@ -112,7 +112,7 @@ var styles = function styles(theme) {
112
112
  WebkitTapHighlightColor: 'transparent',
113
113
  cursor: 'pointer',
114
114
  '&:hover, &:focus': {
115
- backgroundColor: theme.palette.grey[300]
115
+ backgroundColor: '#e0e0e0'
116
116
  }
117
117
  }
118
118
  };
@@ -369,6 +369,7 @@ var HiPaymentMeans = function HiPaymentMeans(props) {
369
369
  colorPrimary = props.colorPrimary,
370
370
  colorSecondary = props.colorSecondary,
371
371
  credit = props.credit,
372
+ hideIbanType = props.hideIbanType,
372
373
  logo = props.logo,
373
374
  logoMerchant = props.logoMerchant,
374
375
  svgPath = props.svgPath,
@@ -552,7 +553,7 @@ var HiPaymentMeans = function HiPaymentMeans(props) {
552
553
  className: (0, _classnames.default)(classes.labelLarge, classes.userNameSepa),
553
554
  title: username,
554
555
  "data-name": "card_name"
555
- }, username), /*#__PURE__*/_react.default.createElement("div", {
556
+ }, username), !hideIbanType && /*#__PURE__*/_react.default.createElement("div", {
556
557
  className: (0, _classnames.default)(classes.labelLarge, classes.labelDebitCredit),
557
558
  "data-name": "type_iban"
558
559
  }, creditDebit));
@@ -613,6 +614,7 @@ var HiPaymentMeans = function HiPaymentMeans(props) {
613
614
  HiPaymentMeans.defaultProps = {
614
615
  cardUserGender: "U",
615
616
  credit: true,
617
+ hideIbanType: false,
616
618
  translations: {
617
619
  credit: "credit",
618
620
  debit: "debit",
package/HiPin/HiPin.js CHANGED
@@ -30,7 +30,7 @@ var useStyles = (0, _makeStyles.default)(function (theme) {
30
30
  fontWeight: theme.typography.fontWeightMedium,
31
31
  fontFamily: theme.typography.fontFamily,
32
32
  color: theme.palette.text.primary,
33
- backgroundColor: theme.palette.grey[300]
33
+ backgroundColor: '#e0e0e0'
34
34
  },
35
35
  clickable: {
36
36
  cursor: 'pointer'
@@ -135,7 +135,7 @@ var styles = function styles(theme) {
135
135
  width: '100%'
136
136
  }),
137
137
  placeholder: {
138
- color: theme.palette.grey[400]
138
+ color: '#bdbdbd'
139
139
  },
140
140
  icon: {
141
141
  transition: theme.transitions.create(['opacity', 'transform'], {
@@ -62,16 +62,16 @@ var styles = function styles(theme) {
62
62
  padding: 2
63
63
  },
64
64
  iconDisabled: {
65
- backgroundColor: theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[800],
66
- color: theme.palette.mode === 'light' ? theme.palette.grey[50] : theme.palette.grey[400],
65
+ backgroundColor: theme.palette.mode === 'light' ? '#bdbdbd' : '#424242',
66
+ color: theme.palette.mode === 'light' ? '#fafafa' : '#bdbdbd',
67
67
  '&:not($iconChecked)': {
68
- color: theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[800]
68
+ color: theme.palette.mode === 'light' ? '#bdbdbd' : '#424242'
69
69
  }
70
70
  },
71
71
  // For SwitchBase
72
72
  switchBaseRoot: {
73
73
  zIndex: 1,
74
- color: theme.palette.mode === 'light' ? theme.palette.grey[50] : theme.palette.grey[400],
74
+ color: theme.palette.mode === 'light' ? '#fafafa' : '#bdbdbd',
75
75
  transition: theme.transitions.create('transform', {
76
76
  duration: theme.transitions.duration.shortest
77
77
  }),
@@ -79,7 +79,7 @@ var styles = function styles(theme) {
79
79
  width: 40
80
80
  },
81
81
  disabled: {
82
- color: theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[800],
82
+ color: theme.palette.mode === 'light' ? '#bdbdbd' : '#424242',
83
83
  '& + $bar': {
84
84
  backgroundColor: theme.palette.mode === 'light' ? '#000' : '#fff',
85
85
  opacity: theme.palette.mode === 'light' ? 0.12 : 0.1
@@ -31,7 +31,7 @@ var styles = function styles(theme) {
31
31
  width: '100%',
32
32
  maxWidth: 200,
33
33
  minWidth: 120,
34
- borderBottom: "solid 1px ".concat(theme.palette.grey[300])
34
+ borderBottom: "solid 1px ".concat(theme.palette.input.bottomLine)
35
35
  },
36
36
  button: {
37
37
  whiteSpace: 'nowrap',
@@ -93,8 +93,8 @@ var styles = function styles(theme) {
93
93
  },
94
94
  disabled: {
95
95
  '&$checked': {
96
- backgroundColor: theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[800],
97
- color: theme.palette.mode === 'light' ? theme.palette.grey[50] : theme.palette.grey[400]
96
+ backgroundColor: theme.palette.mode === 'light' ? '#bdbdbd' : '#424242',
97
+ color: theme.palette.mode === 'light' ? '#fafafa' : '#bdbdbd'
98
98
  },
99
99
  boxShadow: 'none'
100
100
  }
@@ -47,7 +47,7 @@ var styles = function styles(theme) {
47
47
  },
48
48
  line: {
49
49
  display: 'block',
50
- borderColor: theme.palette.grey[600],
50
+ borderColor: '#757575',
51
51
  borderLeftStyle: 'solid',
52
52
  borderLeftWidth: 2,
53
53
  height: 40,
@@ -33,7 +33,7 @@ var useStyles = (0, _makeStyles.default)(function (theme) {
33
33
  width: 'fit-content',
34
34
  height: 24,
35
35
  borderRadius: 12,
36
- backgroundColor: theme.palette.grey[300],
36
+ backgroundColor: '#e0e0e0',
37
37
  color: theme.palette.neutral.dark,
38
38
  padding: 8,
39
39
  alignItems: 'center',
@@ -94,7 +94,7 @@ var useStyles = (0, _makeStyles.default)(function (theme) {
94
94
  navigate: {
95
95
  // Remove grey highlight
96
96
  WebkitTapHighlightColor: 'transparent',
97
- backgroundColor: theme.palette.grey[300],
97
+ backgroundColor: '#e0e0e0',
98
98
  color: theme.palette.neutral.normal,
99
99
  marginRight: 2,
100
100
  marginLeft: 2,
@@ -102,7 +102,7 @@ var useStyles = (0, _makeStyles.default)(function (theme) {
102
102
  cursor: 'pointer',
103
103
  '&:hover, &:focus': {
104
104
  backgroundColor: theme.palette.primary.main,
105
- color: theme.palette.grey[300]
105
+ color: '#e0e0e0'
106
106
  },
107
107
  position: 'relative'
108
108
  },
@@ -57,7 +57,7 @@ var styles = function styles(theme) {
57
57
  // Remove grey highlight
58
58
  WebkitTapHighlightColor: 'transparent',
59
59
  '&:hover, &:focus': {
60
- backgroundColor: (0, _styles.emphasize)(theme.palette.grey[300], 0.08)
60
+ backgroundColor: (0, _styles.emphasize)('#e0e0e0', 0.08)
61
61
  }
62
62
  }),
63
63
  active: {
@@ -68,7 +68,7 @@ var styles = function styles(theme) {
68
68
  }
69
69
  },
70
70
  inactive: {
71
- backgroundColor: theme.palette.grey[300],
71
+ backgroundColor: '#e0e0e0',
72
72
  color: theme.palette.neutral.dark
73
73
  },
74
74
  icon: {
@@ -112,7 +112,7 @@ var styles = function styles(theme) {
112
112
  WebkitTapHighlightColor: 'transparent',
113
113
  cursor: 'pointer',
114
114
  '&:hover, &:focus': {
115
- backgroundColor: theme.palette.grey[300]
115
+ backgroundColor: '#e0e0e0'
116
116
  }
117
117
  }
118
118
  };
@@ -369,6 +369,7 @@ var HiPaymentMeans = function HiPaymentMeans(props) {
369
369
  colorPrimary = props.colorPrimary,
370
370
  colorSecondary = props.colorSecondary,
371
371
  credit = props.credit,
372
+ hideIbanType = props.hideIbanType,
372
373
  logo = props.logo,
373
374
  logoMerchant = props.logoMerchant,
374
375
  svgPath = props.svgPath,
@@ -552,7 +553,7 @@ var HiPaymentMeans = function HiPaymentMeans(props) {
552
553
  className: (0, _classnames.default)(classes.labelLarge, classes.userNameSepa),
553
554
  title: username,
554
555
  "data-name": "card_name"
555
- }, username), /*#__PURE__*/_react.default.createElement("div", {
556
+ }, username), !hideIbanType && /*#__PURE__*/_react.default.createElement("div", {
556
557
  className: (0, _classnames.default)(classes.labelLarge, classes.labelDebitCredit),
557
558
  "data-name": "type_iban"
558
559
  }, creditDebit));
@@ -613,6 +614,7 @@ var HiPaymentMeans = function HiPaymentMeans(props) {
613
614
  HiPaymentMeans.defaultProps = {
614
615
  cardUserGender: "U",
615
616
  credit: true,
617
+ hideIbanType: false,
616
618
  translations: {
617
619
  credit: "credit",
618
620
  debit: "debit",
package/es/HiPin/HiPin.js CHANGED
@@ -30,7 +30,7 @@ var useStyles = (0, _makeStyles.default)(function (theme) {
30
30
  fontWeight: theme.typography.fontWeightMedium,
31
31
  fontFamily: theme.typography.fontFamily,
32
32
  color: theme.palette.text.primary,
33
- backgroundColor: theme.palette.grey[300]
33
+ backgroundColor: '#e0e0e0'
34
34
  },
35
35
  clickable: {
36
36
  cursor: 'pointer'
@@ -135,7 +135,7 @@ var styles = function styles(theme) {
135
135
  width: '100%'
136
136
  }),
137
137
  placeholder: {
138
- color: theme.palette.grey[400]
138
+ color: '#bdbdbd'
139
139
  },
140
140
  icon: {
141
141
  transition: theme.transitions.create(['opacity', 'transform'], {
@@ -62,16 +62,16 @@ var styles = function styles(theme) {
62
62
  padding: 2
63
63
  },
64
64
  iconDisabled: {
65
- backgroundColor: theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[800],
66
- color: theme.palette.mode === 'light' ? theme.palette.grey[50] : theme.palette.grey[400],
65
+ backgroundColor: theme.palette.mode === 'light' ? '#bdbdbd' : '#424242',
66
+ color: theme.palette.mode === 'light' ? '#fafafa' : '#bdbdbd',
67
67
  '&:not($iconChecked)': {
68
- color: theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[800]
68
+ color: theme.palette.mode === 'light' ? '#bdbdbd' : '#424242'
69
69
  }
70
70
  },
71
71
  // For SwitchBase
72
72
  switchBaseRoot: {
73
73
  zIndex: 1,
74
- color: theme.palette.mode === 'light' ? theme.palette.grey[50] : theme.palette.grey[400],
74
+ color: theme.palette.mode === 'light' ? '#fafafa' : '#bdbdbd',
75
75
  transition: theme.transitions.create('transform', {
76
76
  duration: theme.transitions.duration.shortest
77
77
  }),
@@ -79,7 +79,7 @@ var styles = function styles(theme) {
79
79
  width: 40
80
80
  },
81
81
  disabled: {
82
- color: theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[800],
82
+ color: theme.palette.mode === 'light' ? '#bdbdbd' : '#424242',
83
83
  '& + $bar': {
84
84
  backgroundColor: theme.palette.mode === 'light' ? '#000' : '#fff',
85
85
  opacity: theme.palette.mode === 'light' ? 0.12 : 0.1
@@ -31,7 +31,7 @@ var styles = function styles(theme) {
31
31
  width: '100%',
32
32
  maxWidth: 200,
33
33
  minWidth: 120,
34
- borderBottom: "solid 1px ".concat(theme.palette.grey[300])
34
+ borderBottom: "solid 1px ".concat(theme.palette.input.bottomLine)
35
35
  },
36
36
  button: {
37
37
  whiteSpace: 'nowrap',
@@ -93,8 +93,8 @@ var styles = function styles(theme) {
93
93
  },
94
94
  disabled: {
95
95
  '&$checked': {
96
- backgroundColor: theme.palette.mode === 'light' ? theme.palette.grey[400] : theme.palette.grey[800],
97
- color: theme.palette.mode === 'light' ? theme.palette.grey[50] : theme.palette.grey[400]
96
+ backgroundColor: theme.palette.mode === 'light' ? '#bdbdbd' : '#424242',
97
+ color: theme.palette.mode === 'light' ? '#fafafa' : '#bdbdbd'
98
98
  },
99
99
  boxShadow: 'none'
100
100
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@hipay/hipay-material-ui",
3
3
  "private": false,
4
- "version": "3.13.5",
4
+ "version": "3.15.0",
5
5
  "description": "React components that implement Google's Material Design.",
6
6
  "repository": {
7
7
  "type": "git",
@@ -13,7 +13,7 @@
13
13
  },
14
14
  "homepage": "http://materialui.hipay.dev.local/",
15
15
  "peerDependencies": {
16
- "@hipay/design-system": "^1.0.2",
16
+ "@hipay/design-system": "^1.3.1",
17
17
  "@mui/material": "5.8.4",
18
18
  "@mui/styles": "5.8.4",
19
19
  "@mui/styled-engine": "npm:@mui/styled-engine-sc@5.10.0",