@portnet/ui 2.0.6 → 2.0.7

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.
@@ -39,27 +39,22 @@ const StyledMuiFormControl = (0, _styles.styled)(/*#__PURE__*/React.forwardRef((
39
39
  }))))(() => {
40
40
  return {
41
41
  "&.MuiFormControl-root": {
42
- "& .MuiSelect-select": {
43
- minHeight: "auto",
44
- height: "1.4375em",
45
- display: "flex",
46
- alignItems: "center",
47
- lineHeight: "1"
48
- },
42
+ marginBottom: "16px",
43
+ transition: "all 0.2s ease",
49
44
  "&.required .MuiInputBase-root": {
50
- backgroundColor: _apperance.palette.background.required
45
+ backgroundColor: "".concat(_apperance.palette.background.required)
51
46
  },
52
47
  "& .MuiFormLabel-root": {
53
48
  zIndex: 0,
54
49
  lineSpacing: "-0.03em",
55
50
  position: "initial",
56
51
  transform: "none",
57
- fontSize: "0.8rem",
52
+ fontSize: "0.85rem",
58
53
  fontWeight: "600",
59
- marginBottom: "4px",
54
+ marginBottom: "6px",
60
55
  color: _apperance.palette.gray.darker,
61
- "&.Mui-focused ": {
62
- lineHeight: "1.4375em",
56
+ transition: "color 0.2s ease",
57
+ "&.Mui-focused": {
63
58
  color: _apperance.palette.primary
64
59
  },
65
60
  "&.Mui-disabled": {
@@ -71,30 +66,59 @@ const StyledMuiFormControl = (0, _styles.styled)(/*#__PURE__*/React.forwardRef((
71
66
  },
72
67
  "& .MuiInputBase-root": {
73
68
  backgroundColor: _apperance.palette.white,
74
- border: "2px solid ".concat(_apperance.palette.gray.dark),
75
- borderRadius: "5px",
76
- "&.Mui-focused ": {
77
- border: "2px solid ".concat(_apperance.palette.primary)
69
+ border: "1px solid ".concat(_apperance.palette.gray.dark),
70
+ borderRadius: "8px",
71
+ boxShadow: "0 2px 4px rgba(0, 0, 0, 0.05)",
72
+ transition: "all 0.3s ease",
73
+ "&:hover:not(.Mui-disabled):not(.Mui-error)": {
74
+ borderColor: "".concat(_apperance.palette.primary, "80"),
75
+ boxShadow: "0 3px 6px rgba(0, 0, 0, 0.08)"
76
+ },
77
+ "&.Mui-focused": {
78
+ border: "2px solid ".concat(_apperance.palette.primary),
79
+ boxShadow: "0 0 0 3px ".concat(_apperance.palette.primary, "20")
78
80
  },
79
- "&.Mui-error ": {
81
+ "&.Mui-error": {
80
82
  border: "2px solid ".concat(_apperance.palette.error),
81
- backgroundColor: _apperance.palette.background.error
83
+ backgroundColor: _apperance.palette.background.error,
84
+ boxShadow: "0 0 0 3px ".concat(_apperance.palette.error, "20")
82
85
  },
83
- "&.Mui-disabled ": {
86
+ "&.Mui-disabled": {
87
+ opacity: 0.7,
88
+ border: "1px solid ".concat(_apperance.palette.gray.main),
84
89
  backgroundColor: "".concat(_apperance.palette.secondary)
85
90
  },
86
- "& .MuiInputBase-input": {
87
- padding: "1px 6px",
88
- fontSize: "0.7rem"
91
+ "& .MuiSelect-select": {
92
+ lineHeight: "1.5",
93
+ padding: "12px 14px",
94
+ fontSize: "0.9rem",
95
+ fontWeight: 400,
96
+ color: "rgba(0, 0, 0, 0.85)",
97
+ minHeight: "auto",
98
+ display: "flex",
99
+ alignItems: "center"
89
100
  },
90
101
  "& .MuiSvgIcon-root": {
91
- marginRight: "2px"
102
+ fontSize: "1.2rem",
103
+ color: _apperance.palette.gray.dark,
104
+ marginRight: "8px",
105
+ transition: "transform 0.2s ease"
106
+ },
107
+ "&.Mui-focused .MuiSvgIcon-root": {
108
+ transform: "rotate(180deg)",
109
+ color: _apperance.palette.primary
92
110
  }
93
111
  },
94
112
  "& .MuiFormHelperText-root": {
95
- fontWeight: "bold",
96
- fontSize: ".7rem",
97
- color: _apperance.palette.gray.darker
113
+ marginTop: "6px",
114
+ marginLeft: "4px",
115
+ fontWeight: "500",
116
+ fontSize: "0.75rem",
117
+ color: _apperance.palette.gray.darker,
118
+ transition: "color 0.2s ease",
119
+ "&.Mui-error": {
120
+ color: _apperance.palette.error
121
+ }
98
122
  },
99
123
  "& fieldset": {
100
124
  display: "none"
@@ -169,17 +193,46 @@ const PuiStandardSelect = _ref => {
169
193
  },
170
194
  MenuProps: {
171
195
  sx: {
196
+ "& .MuiPaper-root": {
197
+ marginTop: "4px",
198
+ borderRadius: "8px",
199
+ boxShadow: "0 6px 16px rgba(0, 0, 0, 0.1)",
200
+ border: "1px solid ".concat(_apperance.palette.gray.light),
201
+ overflow: "hidden"
202
+ },
172
203
  "& .MuiMenu-list": {
173
- padding: 0,
174
- "& .MuiMenuItem-root:not(:last-child)": {
175
- borderBottom: "1px solid ".concat(_apperance.palette.gray.light)
176
- },
204
+ padding: "4px 0",
177
205
  "& .MuiMenuItem-root": {
178
- fontSize: 13,
179
- height: "fit-content",
180
- minHeight: "auto"
206
+ fontSize: "0.9rem",
207
+ padding: "8px 16px",
208
+ borderRadius: "0",
209
+ transition: "all 0.2s ease",
210
+ height: "auto",
211
+ minHeight: "40px",
212
+ "&:hover": {
213
+ backgroundColor: "rgba(24, 144, 255, 0.05)"
214
+ },
215
+ "&.Mui-selected": {
216
+ backgroundColor: "rgba(24, 144, 255, 0.1)",
217
+ color: _apperance.palette.primary,
218
+ fontWeight: 500,
219
+ "&:hover": {
220
+ backgroundColor: "rgba(24, 144, 255, 0.15)"
221
+ }
222
+ },
223
+ "&:not(:last-child)": {
224
+ borderBottom: "1px solid ".concat(_apperance.palette.gray.light)
225
+ }
181
226
  }
182
227
  }
228
+ },
229
+ anchorOrigin: {
230
+ vertical: "bottom",
231
+ horizontal: "left"
232
+ },
233
+ transformOrigin: {
234
+ vertical: "top",
235
+ horizontal: "left"
183
236
  }
184
237
  }
185
238
  }, rest), {}, {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@portnet/ui",
3
- "version": "2.0.6",
3
+ "version": "2.0.7",
4
4
  "description": "Portnet UI",
5
5
  "keywords": [
6
6
  "react",