@megafon/ui-shared 5.15.0 → 5.17.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.
Files changed (24) hide show
  1. package/CHANGELOG.md +40 -0
  2. package/dist/es/components/Card/Card.css +54 -8
  3. package/dist/es/components/Card/Card.d.ts +7 -3
  4. package/dist/es/components/Card/Card.js +27 -6
  5. package/dist/es/components/Card/types.d.ts +6 -0
  6. package/dist/es/components/Container/Container.css +237 -93
  7. package/dist/es/components/Container/Container.js +3 -1
  8. package/dist/es/components/ImageBanner/ImageBanner.css +29 -16
  9. package/dist/es/components/ImageBanner/ImageBanner.d.ts +4 -9
  10. package/dist/es/components/ImageBanner/ImageBanner.js +11 -22
  11. package/dist/es/components/TextWithIcon/TextWithIconItem.css +8 -10
  12. package/dist/es/helpers/getColumnConfig.d.ts +1 -1
  13. package/dist/lib/components/Card/Card.css +54 -8
  14. package/dist/lib/components/Card/Card.d.ts +7 -3
  15. package/dist/lib/components/Card/Card.js +27 -6
  16. package/dist/lib/components/Card/types.d.ts +6 -0
  17. package/dist/lib/components/Container/Container.css +237 -93
  18. package/dist/lib/components/Container/Container.js +3 -1
  19. package/dist/lib/components/ImageBanner/ImageBanner.css +29 -16
  20. package/dist/lib/components/ImageBanner/ImageBanner.d.ts +4 -9
  21. package/dist/lib/components/ImageBanner/ImageBanner.js +10 -22
  22. package/dist/lib/components/TextWithIcon/TextWithIconItem.css +8 -10
  23. package/dist/lib/helpers/getColumnConfig.d.ts +1 -1
  24. package/package.json +4 -4
package/dist/es/components/Container/Container.css CHANGED
@@ -7,299 +7,462 @@ h5 {
7
7
  }
8
8
  .mfui-container {
9
9
  position: relative;
10
+ background-color: var(--background);
11
+ }
12
+ .mfui-container .mfui-container__inner {
10
13
  padding-bottom: 96px;
14
+ border-radius: 24px;
15
+ }
16
+ @media screen and (max-width: 767px) {
17
+ .mfui-container .mfui-container__inner {
18
+ padding-bottom: 48px;
19
+ }
20
+ }
21
+ @media screen and (min-width: 768px) and (max-width: 1023px) {
22
+ .mfui-container .mfui-container__inner {
23
+ padding-bottom: 72px;
24
+ }
25
+ }
26
+ .mfui-container:first-child .mfui-container__inner {
27
+ border-top-left-radius: 0;
28
+ border-top-right-radius: 0;
11
29
  }
12
- .mfui-container_bg-color_default {
13
- background-color: var(--base);
30
+ .mfui-container:last-child .mfui-container__inner {
31
+ border-bottom-right-radius: 0;
32
+ border-bottom-left-radius: 0;
14
33
  }
15
- .mfui-container_bg-color_light-gray {
34
+ .mfui-container_bg-color_default .mfui-container__inner {
35
+ background-color: var(--background);
36
+ }
37
+ .mfui-container_bg-color_light-gray .mfui-container__inner {
16
38
  background-color: var(--spbSky0);
17
39
  }
18
- .mfui-container_bg-color_gray {
40
+ .mfui-container_bg-color_gray .mfui-container__inner {
19
41
  background-color: var(--spbSky1);
20
42
  }
21
- .mfui-container_bg-color_green {
43
+ .mfui-container_bg-color_green .mfui-container__inner {
22
44
  background-color: var(--brandGreen);
23
45
  }
24
- .mfui-container_bg-color_purple {
46
+ .mfui-container_bg-color_purple .mfui-container__inner {
25
47
  background-color: var(--brandPurple);
26
48
  }
49
+ .mfui-container .mfui-container_bottom-shadow:after {
50
+ content: '';
51
+ position: absolute;
52
+ right: 0;
53
+ bottom: 96px;
54
+ width: 100%;
55
+ height: 100%;
56
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(95.25%, rgba(255, 255, 255, 0)), to(rgba(0, 0, 0, 0.024)));
57
+ background: linear-gradient(180deg, rgba(255, 255, 255, 0) 95.25%, rgba(0, 0, 0, 0.024) 100%);
58
+ }
27
59
  @media screen and (min-width: 768px) and (max-width: 1023px) {
28
- .mfui-container {
29
- padding-bottom: 72px;
30
- }
31
- .mfui-container_bottom-shadow:after {
60
+ .mfui-container .mfui-container_bottom-shadow:after {
32
61
  bottom: 72px !important;
33
62
  }
34
63
  }
35
64
  @media screen and (max-width: 767px) {
36
- .mfui-container {
37
- padding-bottom: 48px;
38
- }
39
- .mfui-container_bottom-shadow:after {
65
+ .mfui-container .mfui-container_bottom-shadow:after {
40
66
  bottom: 48px !important;
41
67
  }
42
68
  }
43
- .mfui-container_bg-color_default + .mfui-container_bg-color_light-gray {
69
+ .mfui-container_disable-padding-top .mfui-container__inner {
70
+ padding-top: 0 !important;
71
+ }
72
+ .mfui-container_disable-padding-bottom .mfui-container__inner {
73
+ padding-bottom: 0 !important;
74
+ }
75
+ .mfui-container_disable-padding-bottom.mfui-container_bottom-shadow:after {
76
+ bottom: 0 !important;
77
+ }
78
+ .mfui-container_bg-color_default + .mfui-container_bg-color_light-gray .mfui-container__inner {
44
79
  padding-top: 96px;
45
80
  }
46
81
  @media screen and (min-width: 768px) and (max-width: 1023px) {
47
- .mfui-container_bg-color_default + .mfui-container_bg-color_light-gray {
82
+ .mfui-container_bg-color_default + .mfui-container_bg-color_light-gray .mfui-container__inner {
48
83
  padding-top: 72px;
49
84
  }
50
85
  }
51
86
  @media screen and (max-width: 767px) {
52
- .mfui-container_bg-color_default + .mfui-container_bg-color_light-gray {
87
+ .mfui-container_bg-color_default + .mfui-container_bg-color_light-gray .mfui-container__inner {
53
88
  padding-top: 48px;
54
89
  }
55
90
  }
56
- .mfui-container_bg-color_default + .mfui-container_bg-color_gray {
91
+ .mfui-container_bg-color_default + .mfui-container_bg-color_gray .mfui-container__inner {
57
92
  padding-top: 96px;
58
93
  }
59
94
  @media screen and (min-width: 768px) and (max-width: 1023px) {
60
- .mfui-container_bg-color_default + .mfui-container_bg-color_gray {
95
+ .mfui-container_bg-color_default + .mfui-container_bg-color_gray .mfui-container__inner {
61
96
  padding-top: 72px;
62
97
  }
63
98
  }
64
99
  @media screen and (max-width: 767px) {
65
- .mfui-container_bg-color_default + .mfui-container_bg-color_gray {
100
+ .mfui-container_bg-color_default + .mfui-container_bg-color_gray .mfui-container__inner {
66
101
  padding-top: 48px;
67
102
  }
68
103
  }
69
- .mfui-container_bg-color_default + .mfui-container_bg-color_green {
104
+ .mfui-container_bg-color_default + .mfui-container_bg-color_green .mfui-container__inner {
70
105
  padding-top: 96px;
71
106
  }
72
107
  @media screen and (min-width: 768px) and (max-width: 1023px) {
73
- .mfui-container_bg-color_default + .mfui-container_bg-color_green {
108
+ .mfui-container_bg-color_default + .mfui-container_bg-color_green .mfui-container__inner {
74
109
  padding-top: 72px;
75
110
  }
76
111
  }
77
112
  @media screen and (max-width: 767px) {
78
- .mfui-container_bg-color_default + .mfui-container_bg-color_green {
113
+ .mfui-container_bg-color_default + .mfui-container_bg-color_green .mfui-container__inner {
79
114
  padding-top: 48px;
80
115
  }
81
116
  }
82
- .mfui-container_bg-color_default + .mfui-container_bg-color_purple {
117
+ .mfui-container_bg-color_default + .mfui-container_bg-color_purple .mfui-container__inner {
83
118
  padding-top: 96px;
84
119
  }
85
120
  @media screen and (min-width: 768px) and (max-width: 1023px) {
86
- .mfui-container_bg-color_default + .mfui-container_bg-color_purple {
121
+ .mfui-container_bg-color_default + .mfui-container_bg-color_purple .mfui-container__inner {
87
122
  padding-top: 72px;
88
123
  }
89
124
  }
90
125
  @media screen and (max-width: 767px) {
91
- .mfui-container_bg-color_default + .mfui-container_bg-color_purple {
126
+ .mfui-container_bg-color_default + .mfui-container_bg-color_purple .mfui-container__inner {
92
127
  padding-top: 48px;
93
128
  }
94
129
  }
95
- .mfui-container_bg-color_light-gray + .mfui-container_bg-color_default {
130
+ .mfui-container_bg-color_light-gray + .mfui-container_bg-color_default .mfui-container__inner {
96
131
  padding-top: 96px;
97
132
  }
98
133
  @media screen and (min-width: 768px) and (max-width: 1023px) {
99
- .mfui-container_bg-color_light-gray + .mfui-container_bg-color_default {
134
+ .mfui-container_bg-color_light-gray + .mfui-container_bg-color_default .mfui-container__inner {
100
135
  padding-top: 72px;
101
136
  }
102
137
  }
103
138
  @media screen and (max-width: 767px) {
104
- .mfui-container_bg-color_light-gray + .mfui-container_bg-color_default {
139
+ .mfui-container_bg-color_light-gray + .mfui-container_bg-color_default .mfui-container__inner {
105
140
  padding-top: 48px;
106
141
  }
107
142
  }
108
- .mfui-container_bg-color_light-gray + .mfui-container_bg-color_gray {
143
+ .mfui-container_bg-color_light-gray:has( + .mfui-container_bg-color_light-gray) .mfui-container__inner {
144
+ border-bottom-right-radius: 0;
145
+ border-bottom-left-radius: 0;
146
+ }
147
+ .mfui-container_bg-color_light-gray + .mfui-container_bg-color_light-gray .mfui-container__inner {
148
+ border-top-left-radius: 0;
149
+ border-top-right-radius: 0;
150
+ }
151
+ .mfui-container_bg-color_light-gray + .mfui-container_bg-color_gray .mfui-container__inner {
109
152
  padding-top: 96px;
110
153
  }
111
154
  @media screen and (min-width: 768px) and (max-width: 1023px) {
112
- .mfui-container_bg-color_light-gray + .mfui-container_bg-color_gray {
155
+ .mfui-container_bg-color_light-gray + .mfui-container_bg-color_gray .mfui-container__inner {
113
156
  padding-top: 72px;
114
157
  }
115
158
  }
116
159
  @media screen and (max-width: 767px) {
117
- .mfui-container_bg-color_light-gray + .mfui-container_bg-color_gray {
160
+ .mfui-container_bg-color_light-gray + .mfui-container_bg-color_gray .mfui-container__inner {
118
161
  padding-top: 48px;
119
162
  }
120
163
  }
121
- .mfui-container_bg-color_light-gray + .mfui-container_bg-color_green {
164
+ .mfui-container_bg-color_light-gray:has( + .mfui-container_bg-color_gray) .mfui-container__inner {
165
+ border-bottom-right-radius: 0;
166
+ border-bottom-left-radius: 0;
167
+ }
168
+ .mfui-container_bg-color_light-gray + .mfui-container_bg-color_gray .mfui-container__inner {
169
+ border-top-left-radius: 0;
170
+ border-top-right-radius: 0;
171
+ }
172
+ .mfui-container_bg-color_light-gray + .mfui-container_bg-color_green .mfui-container__inner {
122
173
  padding-top: 96px;
123
174
  }
124
175
  @media screen and (min-width: 768px) and (max-width: 1023px) {
125
- .mfui-container_bg-color_light-gray + .mfui-container_bg-color_green {
176
+ .mfui-container_bg-color_light-gray + .mfui-container_bg-color_green .mfui-container__inner {
126
177
  padding-top: 72px;
127
178
  }
128
179
  }
129
180
  @media screen and (max-width: 767px) {
130
- .mfui-container_bg-color_light-gray + .mfui-container_bg-color_green {
181
+ .mfui-container_bg-color_light-gray + .mfui-container_bg-color_green .mfui-container__inner {
131
182
  padding-top: 48px;
132
183
  }
133
184
  }
134
- .mfui-container_bg-color_light-gray + .mfui-container_bg-color_purple {
185
+ .mfui-container_bg-color_light-gray:has( + .mfui-container_bg-color_green) .mfui-container__inner {
186
+ border-bottom-right-radius: 0;
187
+ border-bottom-left-radius: 0;
188
+ }
189
+ .mfui-container_bg-color_light-gray + .mfui-container_bg-color_green .mfui-container__inner {
190
+ border-top-left-radius: 0;
191
+ border-top-right-radius: 0;
192
+ }
193
+ .mfui-container_bg-color_light-gray + .mfui-container_bg-color_purple .mfui-container__inner {
135
194
  padding-top: 96px;
136
195
  }
137
196
  @media screen and (min-width: 768px) and (max-width: 1023px) {
138
- .mfui-container_bg-color_light-gray + .mfui-container_bg-color_purple {
197
+ .mfui-container_bg-color_light-gray + .mfui-container_bg-color_purple .mfui-container__inner {
139
198
  padding-top: 72px;
140
199
  }
141
200
  }
142
201
  @media screen and (max-width: 767px) {
143
- .mfui-container_bg-color_light-gray + .mfui-container_bg-color_purple {
202
+ .mfui-container_bg-color_light-gray + .mfui-container_bg-color_purple .mfui-container__inner {
144
203
  padding-top: 48px;
145
204
  }
146
205
  }
147
- .mfui-container_bg-color_gray + .mfui-container_bg-color_default {
206
+ .mfui-container_bg-color_light-gray:has( + .mfui-container_bg-color_purple) .mfui-container__inner {
207
+ border-bottom-right-radius: 0;
208
+ border-bottom-left-radius: 0;
209
+ }
210
+ .mfui-container_bg-color_light-gray + .mfui-container_bg-color_purple .mfui-container__inner {
211
+ border-top-left-radius: 0;
212
+ border-top-right-radius: 0;
213
+ }
214
+ .mfui-container_bg-color_gray + .mfui-container_bg-color_default .mfui-container__inner {
148
215
  padding-top: 96px;
149
216
  }
150
217
  @media screen and (min-width: 768px) and (max-width: 1023px) {
151
- .mfui-container_bg-color_gray + .mfui-container_bg-color_default {
218
+ .mfui-container_bg-color_gray + .mfui-container_bg-color_default .mfui-container__inner {
152
219
  padding-top: 72px;
153
220
  }
154
221
  }
155
222
  @media screen and (max-width: 767px) {
156
- .mfui-container_bg-color_gray + .mfui-container_bg-color_default {
223
+ .mfui-container_bg-color_gray + .mfui-container_bg-color_default .mfui-container__inner {
157
224
  padding-top: 48px;
158
225
  }
159
226
  }
160
- .mfui-container_bg-color_gray + .mfui-container_bg-color_light-gray {
227
+ .mfui-container_bg-color_gray + .mfui-container_bg-color_light-gray .mfui-container__inner {
161
228
  padding-top: 96px;
162
229
  }
163
230
  @media screen and (min-width: 768px) and (max-width: 1023px) {
164
- .mfui-container_bg-color_gray + .mfui-container_bg-color_light-gray {
231
+ .mfui-container_bg-color_gray + .mfui-container_bg-color_light-gray .mfui-container__inner {
165
232
  padding-top: 72px;
166
233
  }
167
234
  }
168
235
  @media screen and (max-width: 767px) {
169
- .mfui-container_bg-color_gray + .mfui-container_bg-color_light-gray {
236
+ .mfui-container_bg-color_gray + .mfui-container_bg-color_light-gray .mfui-container__inner {
170
237
  padding-top: 48px;
171
238
  }
172
239
  }
173
- .mfui-container_bg-color_gray + .mfui-container_bg-color_green {
240
+ .mfui-container_bg-color_gray:has( + .mfui-container_bg-color_light-gray) .mfui-container__inner {
241
+ border-bottom-right-radius: 0;
242
+ border-bottom-left-radius: 0;
243
+ }
244
+ .mfui-container_bg-color_gray + .mfui-container_bg-color_light-gray .mfui-container__inner {
245
+ border-top-left-radius: 0;
246
+ border-top-right-radius: 0;
247
+ }
248
+ .mfui-container_bg-color_gray:has( + .mfui-container_bg-color_gray) .mfui-container__inner {
249
+ border-bottom-right-radius: 0;
250
+ border-bottom-left-radius: 0;
251
+ }
252
+ .mfui-container_bg-color_gray + .mfui-container_bg-color_gray .mfui-container__inner {
253
+ border-top-left-radius: 0;
254
+ border-top-right-radius: 0;
255
+ }
256
+ .mfui-container_bg-color_gray + .mfui-container_bg-color_green .mfui-container__inner {
174
257
  padding-top: 96px;
175
258
  }
176
259
  @media screen and (min-width: 768px) and (max-width: 1023px) {
177
- .mfui-container_bg-color_gray + .mfui-container_bg-color_green {
260
+ .mfui-container_bg-color_gray + .mfui-container_bg-color_green .mfui-container__inner {
178
261
  padding-top: 72px;
179
262
  }
180
263
  }
181
264
  @media screen and (max-width: 767px) {
182
- .mfui-container_bg-color_gray + .mfui-container_bg-color_green {
265
+ .mfui-container_bg-color_gray + .mfui-container_bg-color_green .mfui-container__inner {
183
266
  padding-top: 48px;
184
267
  }
185
268
  }
186
- .mfui-container_bg-color_gray + .mfui-container_bg-color_purple {
269
+ .mfui-container_bg-color_gray:has( + .mfui-container_bg-color_green) .mfui-container__inner {
270
+ border-bottom-right-radius: 0;
271
+ border-bottom-left-radius: 0;
272
+ }
273
+ .mfui-container_bg-color_gray + .mfui-container_bg-color_green .mfui-container__inner {
274
+ border-top-left-radius: 0;
275
+ border-top-right-radius: 0;
276
+ }
277
+ .mfui-container_bg-color_gray + .mfui-container_bg-color_purple .mfui-container__inner {
187
278
  padding-top: 96px;
188
279
  }
189
280
  @media screen and (min-width: 768px) and (max-width: 1023px) {
190
- .mfui-container_bg-color_gray + .mfui-container_bg-color_purple {
281
+ .mfui-container_bg-color_gray + .mfui-container_bg-color_purple .mfui-container__inner {
191
282
  padding-top: 72px;
192
283
  }
193
284
  }
194
285
  @media screen and (max-width: 767px) {
195
- .mfui-container_bg-color_gray + .mfui-container_bg-color_purple {
286
+ .mfui-container_bg-color_gray + .mfui-container_bg-color_purple .mfui-container__inner {
196
287
  padding-top: 48px;
197
288
  }
198
289
  }
199
- .mfui-container_bg-color_green + .mfui-container_bg-color_default {
290
+ .mfui-container_bg-color_gray:has( + .mfui-container_bg-color_purple) .mfui-container__inner {
291
+ border-bottom-right-radius: 0;
292
+ border-bottom-left-radius: 0;
293
+ }
294
+ .mfui-container_bg-color_gray + .mfui-container_bg-color_purple .mfui-container__inner {
295
+ border-top-left-radius: 0;
296
+ border-top-right-radius: 0;
297
+ }
298
+ .mfui-container_bg-color_green + .mfui-container_bg-color_default .mfui-container__inner {
200
299
  padding-top: 96px;
201
300
  }
202
301
  @media screen and (min-width: 768px) and (max-width: 1023px) {
203
- .mfui-container_bg-color_green + .mfui-container_bg-color_default {
302
+ .mfui-container_bg-color_green + .mfui-container_bg-color_default .mfui-container__inner {
204
303
  padding-top: 72px;
205
304
  }
206
305
  }
207
306
  @media screen and (max-width: 767px) {
208
- .mfui-container_bg-color_green + .mfui-container_bg-color_default {
307
+ .mfui-container_bg-color_green + .mfui-container_bg-color_default .mfui-container__inner {
209
308
  padding-top: 48px;
210
309
  }
211
310
  }
212
- .mfui-container_bg-color_green + .mfui-container_bg-color_light-gray {
311
+ .mfui-container_bg-color_green + .mfui-container_bg-color_light-gray .mfui-container__inner {
213
312
  padding-top: 96px;
214
313
  }
215
314
  @media screen and (min-width: 768px) and (max-width: 1023px) {
216
- .mfui-container_bg-color_green + .mfui-container_bg-color_light-gray {
315
+ .mfui-container_bg-color_green + .mfui-container_bg-color_light-gray .mfui-container__inner {
217
316
  padding-top: 72px;
218
317
  }
219
318
  }
220
319
  @media screen and (max-width: 767px) {
221
- .mfui-container_bg-color_green + .mfui-container_bg-color_light-gray {
320
+ .mfui-container_bg-color_green + .mfui-container_bg-color_light-gray .mfui-container__inner {
222
321
  padding-top: 48px;
223
322
  }
224
323
  }
225
- .mfui-container_bg-color_green + .mfui-container_bg-color_gray {
324
+ .mfui-container_bg-color_green:has( + .mfui-container_bg-color_light-gray) .mfui-container__inner {
325
+ border-bottom-right-radius: 0;
326
+ border-bottom-left-radius: 0;
327
+ }
328
+ .mfui-container_bg-color_green + .mfui-container_bg-color_light-gray .mfui-container__inner {
329
+ border-top-left-radius: 0;
330
+ border-top-right-radius: 0;
331
+ }
332
+ .mfui-container_bg-color_green + .mfui-container_bg-color_gray .mfui-container__inner {
226
333
  padding-top: 96px;
227
334
  }
228
335
  @media screen and (min-width: 768px) and (max-width: 1023px) {
229
- .mfui-container_bg-color_green + .mfui-container_bg-color_gray {
336
+ .mfui-container_bg-color_green + .mfui-container_bg-color_gray .mfui-container__inner {
230
337
  padding-top: 72px;
231
338
  }
232
339
  }
233
340
  @media screen and (max-width: 767px) {
234
- .mfui-container_bg-color_green + .mfui-container_bg-color_gray {
341
+ .mfui-container_bg-color_green + .mfui-container_bg-color_gray .mfui-container__inner {
235
342
  padding-top: 48px;
236
343
  }
237
344
  }
238
- .mfui-container_bg-color_green + .mfui-container_bg-color_purple {
345
+ .mfui-container_bg-color_green:has( + .mfui-container_bg-color_gray) .mfui-container__inner {
346
+ border-bottom-right-radius: 0;
347
+ border-bottom-left-radius: 0;
348
+ }
349
+ .mfui-container_bg-color_green + .mfui-container_bg-color_gray .mfui-container__inner {
350
+ border-top-left-radius: 0;
351
+ border-top-right-radius: 0;
352
+ }
353
+ .mfui-container_bg-color_green:has( + .mfui-container_bg-color_green) .mfui-container__inner {
354
+ border-bottom-right-radius: 0;
355
+ border-bottom-left-radius: 0;
356
+ }
357
+ .mfui-container_bg-color_green + .mfui-container_bg-color_green .mfui-container__inner {
358
+ border-top-left-radius: 0;
359
+ border-top-right-radius: 0;
360
+ }
361
+ .mfui-container_bg-color_green + .mfui-container_bg-color_purple .mfui-container__inner {
239
362
  padding-top: 96px;
240
363
  }
241
364
  @media screen and (min-width: 768px) and (max-width: 1023px) {
242
- .mfui-container_bg-color_green + .mfui-container_bg-color_purple {
365
+ .mfui-container_bg-color_green + .mfui-container_bg-color_purple .mfui-container__inner {
243
366
  padding-top: 72px;
244
367
  }
245
368
  }
246
369
  @media screen and (max-width: 767px) {
247
- .mfui-container_bg-color_green + .mfui-container_bg-color_purple {
370
+ .mfui-container_bg-color_green + .mfui-container_bg-color_purple .mfui-container__inner {
248
371
  padding-top: 48px;
249
372
  }
250
373
  }
251
- .mfui-container_bg-color_purple + .mfui-container_bg-color_default {
374
+ .mfui-container_bg-color_green:has( + .mfui-container_bg-color_purple) .mfui-container__inner {
375
+ border-bottom-right-radius: 0;
376
+ border-bottom-left-radius: 0;
377
+ }
378
+ .mfui-container_bg-color_green + .mfui-container_bg-color_purple .mfui-container__inner {
379
+ border-top-left-radius: 0;
380
+ border-top-right-radius: 0;
381
+ }
382
+ .mfui-container_bg-color_purple + .mfui-container_bg-color_default .mfui-container__inner {
252
383
  padding-top: 96px;
253
384
  }
254
385
  @media screen and (min-width: 768px) and (max-width: 1023px) {
255
- .mfui-container_bg-color_purple + .mfui-container_bg-color_default {
386
+ .mfui-container_bg-color_purple + .mfui-container_bg-color_default .mfui-container__inner {
256
387
  padding-top: 72px;
257
388
  }
258
389
  }
259
390
  @media screen and (max-width: 767px) {
260
- .mfui-container_bg-color_purple + .mfui-container_bg-color_default {
391
+ .mfui-container_bg-color_purple + .mfui-container_bg-color_default .mfui-container__inner {
261
392
  padding-top: 48px;
262
393
  }
263
394
  }
264
- .mfui-container_bg-color_purple + .mfui-container_bg-color_light-gray {
395
+ .mfui-container_bg-color_purple + .mfui-container_bg-color_light-gray .mfui-container__inner {
265
396
  padding-top: 96px;
266
397
  }
267
398
  @media screen and (min-width: 768px) and (max-width: 1023px) {
268
- .mfui-container_bg-color_purple + .mfui-container_bg-color_light-gray {
399
+ .mfui-container_bg-color_purple + .mfui-container_bg-color_light-gray .mfui-container__inner {
269
400
  padding-top: 72px;
270
401
  }
271
402
  }
272
403
  @media screen and (max-width: 767px) {
273
- .mfui-container_bg-color_purple + .mfui-container_bg-color_light-gray {
404
+ .mfui-container_bg-color_purple + .mfui-container_bg-color_light-gray .mfui-container__inner {
274
405
  padding-top: 48px;
275
406
  }
276
407
  }
277
- .mfui-container_bg-color_purple + .mfui-container_bg-color_gray {
408
+ .mfui-container_bg-color_purple:has( + .mfui-container_bg-color_light-gray) .mfui-container__inner {
409
+ border-bottom-right-radius: 0;
410
+ border-bottom-left-radius: 0;
411
+ }
412
+ .mfui-container_bg-color_purple + .mfui-container_bg-color_light-gray .mfui-container__inner {
413
+ border-top-left-radius: 0;
414
+ border-top-right-radius: 0;
415
+ }
416
+ .mfui-container_bg-color_purple + .mfui-container_bg-color_gray .mfui-container__inner {
278
417
  padding-top: 96px;
279
418
  }
280
419
  @media screen and (min-width: 768px) and (max-width: 1023px) {
281
- .mfui-container_bg-color_purple + .mfui-container_bg-color_gray {
420
+ .mfui-container_bg-color_purple + .mfui-container_bg-color_gray .mfui-container__inner {
282
421
  padding-top: 72px;
283
422
  }
284
423
  }
285
424
  @media screen and (max-width: 767px) {
286
- .mfui-container_bg-color_purple + .mfui-container_bg-color_gray {
425
+ .mfui-container_bg-color_purple + .mfui-container_bg-color_gray .mfui-container__inner {
287
426
  padding-top: 48px;
288
427
  }
289
428
  }
290
- .mfui-container_bg-color_purple + .mfui-container_bg-color_green {
429
+ .mfui-container_bg-color_purple:has( + .mfui-container_bg-color_gray) .mfui-container__inner {
430
+ border-bottom-right-radius: 0;
431
+ border-bottom-left-radius: 0;
432
+ }
433
+ .mfui-container_bg-color_purple + .mfui-container_bg-color_gray .mfui-container__inner {
434
+ border-top-left-radius: 0;
435
+ border-top-right-radius: 0;
436
+ }
437
+ .mfui-container_bg-color_purple + .mfui-container_bg-color_green .mfui-container__inner {
291
438
  padding-top: 96px;
292
439
  }
293
440
  @media screen and (min-width: 768px) and (max-width: 1023px) {
294
- .mfui-container_bg-color_purple + .mfui-container_bg-color_green {
441
+ .mfui-container_bg-color_purple + .mfui-container_bg-color_green .mfui-container__inner {
295
442
  padding-top: 72px;
296
443
  }
297
444
  }
298
445
  @media screen and (max-width: 767px) {
299
- .mfui-container_bg-color_purple + .mfui-container_bg-color_green {
446
+ .mfui-container_bg-color_purple + .mfui-container_bg-color_green .mfui-container__inner {
300
447
  padding-top: 48px;
301
448
  }
302
449
  }
450
+ .mfui-container_bg-color_purple:has( + .mfui-container_bg-color_green) .mfui-container__inner {
451
+ border-bottom-right-radius: 0;
452
+ border-bottom-left-radius: 0;
453
+ }
454
+ .mfui-container_bg-color_purple + .mfui-container_bg-color_green .mfui-container__inner {
455
+ border-top-left-radius: 0;
456
+ border-top-right-radius: 0;
457
+ }
458
+ .mfui-container_bg-color_purple:has( + .mfui-container_bg-color_purple) .mfui-container__inner {
459
+ border-bottom-right-radius: 0;
460
+ border-bottom-left-radius: 0;
461
+ }
462
+ .mfui-container_bg-color_purple + .mfui-container_bg-color_purple .mfui-container__inner {
463
+ border-top-left-radius: 0;
464
+ border-top-right-radius: 0;
465
+ }
303
466
  .mfui-container .mfui-title-description-box + .mfui-benefits-icons {
304
467
  margin-top: 56px;
305
468
  }
@@ -3080,22 +3243,3 @@ h5 {
3080
3243
  margin-top: 24px;
3081
3244
  }
3082
3245
  }
3083
- .mfui-container_bottom-shadow:after {
3084
- content: '';
3085
- position: absolute;
3086
- right: 0;
3087
- bottom: 96px;
3088
- width: 100%;
3089
- height: 100%;
3090
- background: -webkit-gradient(linear, left top, left bottom, color-stop(95.25%, rgba(255, 255, 255, 0)), to(rgba(0, 0, 0, 0.024)));
3091
- background: linear-gradient(180deg, rgba(255, 255, 255, 0) 95.25%, rgba(0, 0, 0, 0.024) 100%);
3092
- }
3093
- .mfui-container_disable-padding-top {
3094
- padding-top: 0 !important;
3095
- }
3096
- .mfui-container_disable-padding-bottom {
3097
- padding-bottom: 0 !important;
3098
- }
3099
- .mfui-container_disable-padding-bottom.mfui-container_bottom-shadow:after {
3100
- bottom: 0 !important;
3101
- }
package/dist/es/components/Container/Container.js CHANGED
@@ -33,7 +33,9 @@ var Container = function Container(_ref) {
33
33
  }, [className]),
34
34
  ref: rootRef,
35
35
  id: id
36
- }, /*#__PURE__*/React.createElement(ContentArea, null, children));
36
+ }, /*#__PURE__*/React.createElement("div", {
37
+ className: cn('inner')
38
+ }, /*#__PURE__*/React.createElement(ContentArea, null, children)));
37
39
  };
38
40
 
39
41
  Container.propTypes = {
package/dist/es/components/ImageBanner/ImageBanner.css CHANGED
@@ -29,7 +29,6 @@ h5 {
29
29
  -ms-flex-align: center;
30
30
  align-items: center;
31
31
  height: 420px;
32
- padding: 0 80px;
33
32
  }
34
33
  }
35
34
  .mfui-image-banner__picture {
@@ -44,15 +43,11 @@ h5 {
44
43
  }
45
44
  @media screen and (min-width: 1024px) {
46
45
  .mfui-image-banner__picture {
47
- width: 356px;
46
+ width: 50%;
47
+ max-width: 672px;
48
48
  height: 100%;
49
49
  }
50
50
  }
51
- @media screen and (min-width: 1280px) {
52
- .mfui-image-banner__picture {
53
- width: 408px;
54
- }
55
- }
56
51
  .mfui-image-banner__picture_v-align_top {
57
52
  -webkit-box-align: start;
58
53
  -ms-flex-align: start;
@@ -68,18 +63,18 @@ h5 {
68
63
  -ms-flex-align: end;
69
64
  align-items: flex-end;
70
65
  }
71
- .mfui-image-banner__background-image {
66
+ .mfui-image-banner__image {
72
67
  display: block;
73
68
  max-width: 100%;
74
69
  max-height: 150px;
75
70
  }
76
71
  @media screen and (min-width: 768px) and (max-width: 1023px) {
77
- .mfui-image-banner__background-image {
72
+ .mfui-image-banner__image {
78
73
  max-height: 230px;
79
74
  }
80
75
  }
81
76
  @media screen and (min-width: 1024px) {
82
- .mfui-image-banner__background-image {
77
+ .mfui-image-banner__image {
83
78
  max-height: 100%;
84
79
  -o-object-fit: contain;
85
80
  object-fit: contain;
@@ -87,6 +82,9 @@ h5 {
87
82
  }
88
83
  .mfui-image-banner__content {
89
84
  z-index: 1;
85
+ -webkit-box-flex: 1;
86
+ -ms-flex-positive: 1;
87
+ flex-grow: 1;
90
88
  }
91
89
  @media screen and (max-width: 1023px) {
92
90
  .mfui-image-banner__content {
@@ -98,6 +96,12 @@ h5 {
98
96
  text-align: center;
99
97
  }
100
98
  }
99
+ @media screen and (min-width: 1024px) {
100
+ .mfui-image-banner__content {
101
+ width: 50%;
102
+ padding: 0 80px;
103
+ }
104
+ }
101
105
  .mfui-image-banner__description {
102
106
  margin-top: 16px;
103
107
  white-space: pre-wrap;
@@ -132,14 +136,18 @@ h5 {
132
136
  -ms-flex-wrap: wrap;
133
137
  flex-wrap: wrap;
134
138
  gap: 16px;
135
- -webkit-box-align: center;
136
- -ms-flex-align: center;
137
- align-items: center;
138
139
  -webkit-box-pack: center;
139
140
  -ms-flex-pack: center;
140
141
  justify-content: center;
141
142
  margin-top: 32px;
142
143
  }
144
+ @media screen and (max-width: 767px) {
145
+ .mfui-image-banner__children {
146
+ -webkit-box-align: center;
147
+ -ms-flex-align: center;
148
+ align-items: center;
149
+ }
150
+ }
143
151
  @media screen and (min-width: 768px) {
144
152
  .mfui-image-banner__children {
145
153
  -webkit-box-orient: horizontal;
@@ -190,7 +198,7 @@ h5 {
190
198
  }
191
199
  @media screen and (min-width: 1024px) {
192
200
  .mfui-image-banner_auto-height .mfui-image-banner__content {
193
- padding: 48px 0;
201
+ padding: 48px 80px;
194
202
  }
195
203
  }
196
204
  @media screen and (min-width: 1024px) {
@@ -199,7 +207,12 @@ h5 {
199
207
  }
200
208
  }
201
209
  @media screen and (min-width: 1024px) {
202
- .mfui-image-banner_full-width .mfui-image-banner__background-image {
210
+ .mfui-image-banner_has-image .mfui-image-banner__content {
211
+ padding-right: 0;
212
+ }
213
+ }
214
+ @media screen and (min-width: 1024px) {
215
+ .mfui-image-banner_full-width .mfui-image-banner__image {
203
216
  position: absolute;
204
217
  right: 0;
205
218
  bottom: 0;
@@ -208,7 +221,7 @@ h5 {
208
221
  }
209
222
  }
210
223
  @media screen and (min-width: 1024px) {
211
- .mfui-image-banner_full-width.mfui-image-banner_auto-height .mfui-image-banner__background-image {
224
+ .mfui-image-banner_full-width.mfui-image-banner_auto-height .mfui-image-banner__image {
212
225
  width: 100%;
213
226
  height: 100%;
214
227
  -o-object-fit: cover;