@hipay/hipay-material-ui 3.13.5 → 3.15.0

Sign up to get free protection for your applications and to get access to all the features.
@@ -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",