@hh.ru/magritte-ui-avatar 7.0.10 → 8.0.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.
package/index.css CHANGED
@@ -29,7 +29,7 @@
29
29
  --magritte-color-background-inverse-v23-2-3:#000000;
30
30
  --magritte-color-background-inverse-secondary-v23-2-3:#303030;
31
31
  --magritte-color-component-avatar-online-positive-v23-2-3:#0ea658;
32
- --magritte-color-component-avatar-online-contrast-v23-2-3:#ffffff;
32
+ --magritte-color-component-avatar-online-constant-v23-2-3:#ffffff;
33
33
  --magritte-color-component-avatar-background-color-01-v23-2-3:#96aabb;
34
34
  --magritte-color-component-avatar-background-color-02-v23-2-3:#ff859f;
35
35
  --magritte-color-component-avatar-background-color-03-v23-2-3:#ff8a77;
@@ -45,9 +45,12 @@
45
45
  --magritte-color-component-avatar-stroke-letters-v23-2-3:#0000000a;
46
46
  --magritte-color-component-avatar-stroke-icon-v23-2-3:#0000000a;
47
47
  --magritte-color-component-avatar-stroke-state-focused-accessible-v23-2-3:#0070ff7a;
48
+ --magritte-color-component-skeleton-background-content-v23-2-3:#8293a23d;
48
49
  }
49
50
 
50
51
  :root{
52
+ --magritte-semantic-animation-time-s-duration-v23-2-3:200ms;
53
+ --magritte-semantic-animation-ease-base-timing-function-v23-2-3:cubic-bezier(0.4, 0.24, 0, 1);
51
54
  --magritte-semantic-animation-ease-in-out-tiger-200-timing-function-v23-2-3:cubic-bezier(0.25, 0.1, 0.25, 1);
52
55
  --magritte-semantic-animation-ease-in-out-tiger-200-duration-v23-2-3:200ms;
53
56
  }
@@ -78,6 +81,7 @@
78
81
  --magritte-color-component-avatar-stroke-placeholder-v23-2-3:#ffffff1f;
79
82
  --magritte-color-component-avatar-stroke-letters-v23-2-3:#ffffff1f;
80
83
  --magritte-color-component-avatar-stroke-icon-v23-2-3:#ffffff1f;
84
+ --magritte-color-component-skeleton-background-content-v23-2-3:#5e5e5e3d;
81
85
  }
82
86
 
83
87
  .magritte-zp-day-theme{
@@ -85,44 +89,36 @@
85
89
  --magritte-color-background-accent-v23-2-3:#7195AF;
86
90
  --magritte-color-background-vivid-v23-2-3:#F9DB76;
87
91
  }
88
- .magritte-avatar-container___jBkeI_7-0-10{
92
+ .magritte-avatar-container___jBkeI_8-0-0{
89
93
  position:relative;
90
94
  }
91
- .magritte-avatar-container_disabled___EkG4l_7-0-10{
95
+ .magritte-avatar-container_disabled___EkG4l_8-0-0{
92
96
  pointer-events:none;
93
97
  opacity:48%;
94
98
  }
95
- .magritte-avatar___x--BK_7-0-10{
99
+ .magritte-avatar___x--BK_8-0-0{
96
100
  display:flex;
97
101
  align-items:center;
98
102
  justify-content:center;
99
103
  overflow:hidden;
100
104
  position:relative;
101
105
  --magritte-ui-text-color-override:var(--magritte-color-component-avatar-text-letters-v23-2-3);
102
- --magritte-ui-avatar-placeholder-background:#EEF1F7;
103
- --magritte-ui-avatar-placeholder-body:#ffffff;
104
- --magritte-ui-avatar-placeholder-clothes:#DCE3EB;
105
- --magritte-ui-avatar-placeholder-hair:#DCE3EB;
106
- --magritte-ui-avatar-placeholder-shadow-female:#F1F4F9;
107
- --magritte-ui-avatar-placeholder-shadow-male:#DCE3EB;
108
- --magritte-ui-avatar-placeholder-city:#ffffff;
109
- --magritte-ui-avatar-placeholder-shadow-city:#DCE3EB;
110
- }
111
- .magritte-avatar___x--BK_7-0-10:not(div){
106
+ }
107
+ .magritte-avatar___x--BK_8-0-0:not(div){
112
108
  cursor:pointer;
113
109
  }
114
- .magritte-avatar___x--BK_7-0-10:focus{
110
+ .magritte-avatar___x--BK_8-0-0:focus{
115
111
  outline:none;
116
112
  }
117
- .magritte-avatar___x--BK_7-0-10.focus-visible{
113
+ .magritte-avatar___x--BK_8-0-0.focus-visible{
118
114
  outline:4px solid var(--magritte-color-component-avatar-stroke-state-focused-accessible-v23-2-3);
119
115
  }
120
- .magritte-avatar___x--BK_7-0-10:not(div):active{
116
+ .magritte-avatar___x--BK_8-0-0:not(div):active{
121
117
  transform:scale(0.96);
122
118
  transition-duration:var(--magritte-semantic-animation-ease-in-out-tiger-200-duration-v23-2-3);
123
119
  transition-timing-function:var(--magritte-semantic-animation-ease-in-out-tiger-200-timing-function-v23-2-3);
124
120
  }
125
- .magritte-avatar___x--BK_7-0-10::after{
121
+ .magritte-avatar___x--BK_8-0-0::after{
126
122
  content:'';
127
123
  top:0;
128
124
  left:0;
@@ -130,229 +126,335 @@
130
126
  width:100%;
131
127
  height:100%;
132
128
  }
133
- .magritte-night-theme .magritte-avatar___x--BK_7-0-10{
134
- --magritte-ui-avatar-placeholder-background:#1B1B1B;
135
- --magritte-ui-avatar-placeholder-body:#767676;
136
- --magritte-ui-avatar-placeholder-clothes:#5E5E5E;
137
- --magritte-ui-avatar-placeholder-hair:#474747;
138
- --magritte-ui-avatar-placeholder-shadow-female:#535353;
139
- --magritte-ui-avatar-placeholder-shadow-male:#535353;
140
- --magritte-ui-avatar-placeholder-city:#767676;
141
- --magritte-ui-avatar-placeholder-shadow-city:#474747;
142
- }
143
- .magritte-avatar-container_size-24___f6DH2_7-0-10,
144
- .magritte-avatar-skeleton-24___9hUuj_7-0-10,
145
- .magritte-avatar_size-24___0dAId_7-0-10{
129
+ .magritte-avatar-container_size-16___bGrZk_8-0-0,
130
+ .magritte-avatar-skeleton-16___Iyj5G_8-0-0,
131
+ .magritte-avatar_size-16___vaXSD_8-0-0{
132
+ width:16px;
133
+ height:16px;
134
+ border-radius:4px;
135
+ }
136
+ .magritte-avatar-container_size-16___bGrZk_8-0-0:after,
137
+ .magritte-avatar-skeleton-16___Iyj5G_8-0-0:after,
138
+ .magritte-avatar_size-16___vaXSD_8-0-0:after{
139
+ border-radius:4px;
140
+ }
141
+ .magritte-avatar-container_size-24___f6DH2_8-0-0,
142
+ .magritte-avatar-skeleton-24___9hUuj_8-0-0,
143
+ .magritte-avatar_size-24___0dAId_8-0-0{
146
144
  width:24px;
147
145
  height:24px;
148
146
  border-radius:8px;
149
147
  }
150
- .magritte-avatar-container_size-24___f6DH2_7-0-10:after,
151
- .magritte-avatar-skeleton-24___9hUuj_7-0-10:after,
152
- .magritte-avatar_size-24___0dAId_7-0-10:after{
148
+ .magritte-avatar-container_size-24___f6DH2_8-0-0:after,
149
+ .magritte-avatar-skeleton-24___9hUuj_8-0-0:after,
150
+ .magritte-avatar_size-24___0dAId_8-0-0:after{
153
151
  border-radius:8px;
154
152
  }
155
- .magritte-avatar-container_size-40___mVeBD_7-0-10,
156
- .magritte-avatar-skeleton-40___ZN6a7_7-0-10,
157
- .magritte-avatar_size-40___zj3fM_7-0-10{
153
+ .magritte-avatar-container_size-40___mVeBD_8-0-0,
154
+ .magritte-avatar-skeleton-40___ZN6a7_8-0-0,
155
+ .magritte-avatar_size-40___zj3fM_8-0-0{
158
156
  width:40px;
159
157
  height:40px;
160
158
  border-radius:12px;
161
159
  }
162
- .magritte-avatar-container_size-40___mVeBD_7-0-10:after,
163
- .magritte-avatar-skeleton-40___ZN6a7_7-0-10:after,
164
- .magritte-avatar_size-40___zj3fM_7-0-10:after{
160
+ .magritte-avatar-container_size-40___mVeBD_8-0-0:after,
161
+ .magritte-avatar-skeleton-40___ZN6a7_8-0-0:after,
162
+ .magritte-avatar_size-40___zj3fM_8-0-0:after{
165
163
  border-radius:12px;
166
164
  }
167
- .magritte-avatar-container_size-48___pflud_7-0-10,
168
- .magritte-avatar-skeleton-48___CC-af_7-0-10,
169
- .magritte-avatar_size-48___JzITc_7-0-10{
165
+ .magritte-avatar-container_size-48___pflud_8-0-0,
166
+ .magritte-avatar-skeleton-48___CC-af_8-0-0,
167
+ .magritte-avatar_size-48___JzITc_8-0-0{
170
168
  width:48px;
171
169
  height:48px;
172
170
  border-radius:12px;
173
171
  }
174
- .magritte-avatar-container_size-48___pflud_7-0-10:after,
175
- .magritte-avatar-skeleton-48___CC-af_7-0-10:after,
176
- .magritte-avatar_size-48___JzITc_7-0-10:after{
172
+ .magritte-avatar-container_size-48___pflud_8-0-0:after,
173
+ .magritte-avatar-skeleton-48___CC-af_8-0-0:after,
174
+ .magritte-avatar_size-48___JzITc_8-0-0:after{
177
175
  border-radius:12px;
178
176
  }
179
- .magritte-avatar-container_size-96___Up8Hn_7-0-10,
180
- .magritte-avatar-skeleton-96___qYG-Z_7-0-10,
181
- .magritte-avatar_size-96___5SeO2_7-0-10{
177
+ .magritte-avatar-container_size-80___y8zNb_8-0-0,
178
+ .magritte-avatar-skeleton-80___Z0Oc8_8-0-0,
179
+ .magritte-avatar_size-80___YiSBZ_8-0-0{
180
+ width:80px;
181
+ height:80px;
182
+ border-radius:24px;
183
+ }
184
+ .magritte-avatar-container_size-80___y8zNb_8-0-0:after,
185
+ .magritte-avatar-skeleton-80___Z0Oc8_8-0-0:after,
186
+ .magritte-avatar_size-80___YiSBZ_8-0-0:after{
187
+ border-radius:24px;
188
+ }
189
+ .magritte-avatar-container_size-96___Up8Hn_8-0-0,
190
+ .magritte-avatar-skeleton-96___qYG-Z_8-0-0,
191
+ .magritte-avatar_size-96___5SeO2_8-0-0{
182
192
  width:96px;
183
193
  height:96px;
184
194
  border-radius:24px;
185
195
  }
186
- .magritte-avatar-container_size-96___Up8Hn_7-0-10:after,
187
- .magritte-avatar-skeleton-96___qYG-Z_7-0-10:after,
188
- .magritte-avatar_size-96___5SeO2_7-0-10:after{
196
+ .magritte-avatar-container_size-96___Up8Hn_8-0-0:after,
197
+ .magritte-avatar-skeleton-96___qYG-Z_8-0-0:after,
198
+ .magritte-avatar_size-96___5SeO2_8-0-0:after{
199
+ border-radius:24px;
200
+ }
201
+ .magritte-avatar-container_size-120___gkMBo_8-0-0,
202
+ .magritte-avatar-skeleton-120___KD5Za_8-0-0,
203
+ .magritte-avatar_size-120___th2TT_8-0-0{
204
+ width:120px;
205
+ height:120px;
206
+ border-radius:24px;
207
+ }
208
+ .magritte-avatar-container_size-120___gkMBo_8-0-0:after,
209
+ .magritte-avatar-skeleton-120___KD5Za_8-0-0:after,
210
+ .magritte-avatar_size-120___th2TT_8-0-0:after{
189
211
  border-radius:24px;
190
212
  }
191
- .magritte-avatar-container_size-208___k7SkJ_7-0-10,
192
- .magritte-avatar-skeleton-208___ybqJw_7-0-10,
193
- .magritte-avatar_size-208___rzfu3_7-0-10{
213
+ .magritte-avatar-container_size-208___k7SkJ_8-0-0,
214
+ .magritte-avatar-skeleton-208___ybqJw_8-0-0,
215
+ .magritte-avatar_size-208___rzfu3_8-0-0{
194
216
  width:208px;
195
217
  height:208px;
196
218
  border-radius:8px;
197
219
  }
198
- .magritte-avatar-container_size-208___k7SkJ_7-0-10:after,
199
- .magritte-avatar-skeleton-208___ybqJw_7-0-10:after,
200
- .magritte-avatar_size-208___rzfu3_7-0-10:after{
220
+ .magritte-avatar-container_size-208___k7SkJ_8-0-0:after,
221
+ .magritte-avatar-skeleton-208___ybqJw_8-0-0:after,
222
+ .magritte-avatar_size-208___rzfu3_8-0-0:after{
201
223
  border-radius:8px;
202
224
  }
203
- .magritte-avatar_shape-circle___kEbru_7-0-10,
204
- .magritte-avatar-skeleton-circle___rD1E0_7-0-10{
225
+ .magritte-avatar_shape-circle___kEbru_8-0-0,
226
+ .magritte-avatar-skeleton-circle___rD1E0_8-0-0{
205
227
  border-radius:50%;
206
228
  }
207
- .magritte-avatar_shape-circle___kEbru_7-0-10::after,
208
- .magritte-avatar-skeleton-circle___rD1E0_7-0-10::after{
229
+ .magritte-avatar_shape-circle___kEbru_8-0-0::after,
230
+ .magritte-avatar-skeleton-circle___rD1E0_8-0-0::after{
209
231
  border-radius:50%;
210
232
  }
211
- .magritte-avatar_style-color-1___xXtkh_7-0-10{
233
+ .magritte-avatar_style-color-1___xXtkh_8-0-0{
212
234
  background-color:var(--magritte-color-component-avatar-background-color-01-v23-2-3);
213
235
  }
214
- .magritte-avatar_style-color-2___JraJd_7-0-10{
236
+ .magritte-avatar_style-color-2___JraJd_8-0-0{
215
237
  background-color:var(--magritte-color-component-avatar-background-color-02-v23-2-3);
216
238
  }
217
- .magritte-avatar_style-color-3___g29U3_7-0-10{
239
+ .magritte-avatar_style-color-3___g29U3_8-0-0{
218
240
  background-color:var(--magritte-color-component-avatar-background-color-03-v23-2-3);
219
241
  }
220
- .magritte-avatar_style-color-4___pHhmj_7-0-10{
242
+ .magritte-avatar_style-color-4___pHhmj_8-0-0{
221
243
  background-color:var(--magritte-color-component-avatar-background-color-04-v23-2-3);
222
244
  }
223
- .magritte-avatar_style-color-5___H9Ie3_7-0-10{
245
+ .magritte-avatar_style-color-5___H9Ie3_8-0-0{
224
246
  background-color:var(--magritte-color-component-avatar-background-color-05-v23-2-3);
225
247
  }
226
- .magritte-avatar_style-color-6___oODXO_7-0-10{
248
+ .magritte-avatar_style-color-6___oODXO_8-0-0{
227
249
  background-color:var(--magritte-color-component-avatar-background-color-06-v23-2-3);
228
250
  }
229
- .magritte-avatar_style-color-7___SfUBl_7-0-10{
251
+ .magritte-avatar_style-color-7___SfUBl_8-0-0{
230
252
  background-color:var(--magritte-color-component-avatar-background-color-07-v23-2-3);
231
253
  }
232
- .magritte-avatar_style-color-8___rlI6h_7-0-10{
254
+ .magritte-avatar_style-color-8___rlI6h_8-0-0{
233
255
  background-color:var(--magritte-color-component-avatar-background-color-08-v23-2-3);
234
256
  }
235
- .magritte-avatar_style-color-9___XQO4B_7-0-10{
257
+ .magritte-avatar_style-color-9___XQO4B_8-0-0{
236
258
  background-color:var(--magritte-color-component-avatar-background-color-09-v23-2-3);
237
259
  }
238
- .magritte-avatar_style-primary___SvqU1_7-0-10{
260
+ .magritte-avatar_style-primary___SvqU1_8-0-0{
239
261
  background-color:var(--magritte-color-background-primary-v23-2-3);
240
262
  }
241
- .magritte-avatar_style-secondary___C6MTH_7-0-10{
263
+ .magritte-avatar_style-secondary___C6MTH_8-0-0{
242
264
  background-color:var(--magritte-color-background-secondary-v23-2-3);
243
265
  }
244
- .magritte-avatar_style-tertiary___3o-90_7-0-10{
266
+ .magritte-avatar_style-tertiary___3o-90_8-0-0{
245
267
  background-color:var(--magritte-color-background-tertiary-v23-2-3);
246
268
  }
247
- .magritte-avatar_style-accent-secondary___vc7Lb_7-0-10{
269
+ .magritte-avatar_style-accent-secondary___vc7Lb_8-0-0{
248
270
  background-color:var(--magritte-color-background-accent-secondary-v23-2-3);
249
271
  }
250
- .magritte-avatar_style-accent___LgPSo_7-0-10{
272
+ .magritte-avatar_style-accent___LgPSo_8-0-0{
251
273
  background-color:var(--magritte-color-background-accent-v23-2-3);
252
274
  }
253
- .magritte-avatar_style-positive-secondary___aQrkm_7-0-10{
275
+ .magritte-avatar_style-positive-secondary___aQrkm_8-0-0{
254
276
  background-color:var(--magritte-color-background-positive-secondary-v23-2-3);
255
277
  }
256
- .magritte-avatar_style-positive___bDzbE_7-0-10{
278
+ .magritte-avatar_style-positive___bDzbE_8-0-0{
257
279
  background-color:var(--magritte-color-background-positive-v23-2-3);
258
280
  }
259
- .magritte-avatar_style-negative-secondary___GW7rc_7-0-10{
281
+ .magritte-avatar_style-negative-secondary___GW7rc_8-0-0{
260
282
  background-color:var(--magritte-color-background-negative-secondary-v23-2-3);
261
283
  }
262
- .magritte-avatar_style-negative___xHHQb_7-0-10{
284
+ .magritte-avatar_style-negative___xHHQb_8-0-0{
263
285
  background-color:var(--magritte-color-background-negative-v23-2-3);
264
286
  }
265
- .magritte-avatar_style-warning-secondary___LKwiW_7-0-10{
287
+ .magritte-avatar_style-warning-secondary___LKwiW_8-0-0{
266
288
  background-color:var(--magritte-color-background-warning-secondary-v23-2-3);
267
289
  }
268
- .magritte-avatar_style-warning___7kKRS_7-0-10{
290
+ .magritte-avatar_style-warning___7kKRS_8-0-0{
269
291
  background-color:var(--magritte-color-background-warning-v23-2-3);
270
292
  }
271
- .magritte-avatar_style-special-secondary___J2CwS_7-0-10{
293
+ .magritte-avatar_style-special-secondary___J2CwS_8-0-0{
272
294
  background-color:var(--magritte-color-background-special-secondary-v23-2-3);
273
295
  }
274
- .magritte-avatar_style-special___gLmS0_7-0-10{
296
+ .magritte-avatar_style-special___gLmS0_8-0-0{
275
297
  background-color:var(--magritte-color-background-special-v23-2-3);
276
298
  }
277
- .magritte-avatar_style-dreamy-secondary___WoWcK_7-0-10{
299
+ .magritte-avatar_style-dreamy-secondary___WoWcK_8-0-0{
278
300
  background-color:var(--magritte-color-background-dreamy-secondary-v23-2-3);
279
301
  }
280
- .magritte-avatar_style-dreamy___-zjx5_7-0-10{
302
+ .magritte-avatar_style-dreamy___-zjx5_8-0-0{
281
303
  background-color:var(--magritte-color-background-dreamy-v23-2-3);
282
304
  }
283
- .magritte-avatar_style-lovely-secondary___YhzZk_7-0-10{
305
+ .magritte-avatar_style-lovely-secondary___YhzZk_8-0-0{
284
306
  background-color:var(--magritte-color-background-lovely-secondary-v23-2-3);
285
307
  }
286
- .magritte-avatar_style-lovely___wy3Zg_7-0-10{
308
+ .magritte-avatar_style-lovely___wy3Zg_8-0-0{
287
309
  background-color:var(--magritte-color-background-lovely-v23-2-3);
288
310
  }
289
- .magritte-avatar_style-vivid-secondary___EcBn1_7-0-10{
311
+ .magritte-avatar_style-vivid-secondary___EcBn1_8-0-0{
290
312
  background-color:var(--magritte-color-background-vivid-secondary-v23-2-3);
291
313
  }
292
- .magritte-avatar_style-vivid___pkKc5_7-0-10{
314
+ .magritte-avatar_style-vivid___pkKc5_8-0-0{
293
315
  background-color:var(--magritte-color-background-vivid-v23-2-3);
294
316
  }
295
- .magritte-avatar_style-body___xmokY_7-0-10{
317
+ .magritte-avatar_style-body___xmokY_8-0-0{
296
318
  background-color:var(--magritte-color-background-body-v23-2-3);
297
319
  }
298
- .magritte-avatar_style-overlay___0yWkS_7-0-10{
320
+ .magritte-avatar_style-overlay___0yWkS_8-0-0{
299
321
  background-color:var(--magritte-color-background-overlay-v23-2-3);
300
322
  }
301
- .magritte-avatar_style-overlay-action___MMxS7_7-0-10{
323
+ .magritte-avatar_style-overlay-action___MMxS7_8-0-0{
302
324
  background-color:var(--magritte-color-background-overlay-action-v23-2-3);
303
325
  }
304
- .magritte-avatar_style-overlay-viewer___4gNO7_7-0-10{
326
+ .magritte-avatar_style-overlay-viewer___4gNO7_8-0-0{
305
327
  background-color:var(--magritte-color-background-overlay-viewer-v23-2-3);
306
328
  }
307
- .magritte-avatar_style-overlay-toolbar___0Lvuf_7-0-10{
329
+ .magritte-avatar_style-overlay-toolbar___0Lvuf_8-0-0{
308
330
  background-color:var(--magritte-color-background-overlay-toolbar-v23-2-3);
309
331
  }
310
- .magritte-avatar_style-transparent___KtjP8_7-0-10{
332
+ .magritte-avatar_style-transparent___KtjP8_8-0-0{
311
333
  background-color:var(--magritte-color-background-transparent-v23-2-3);
312
334
  }
313
- .magritte-avatar_style-constant___HVes8_7-0-10{
335
+ .magritte-avatar_style-constant___HVes8_8-0-0{
314
336
  background-color:var(--magritte-color-background-constant-v23-2-3);
315
337
  }
316
- .magritte-avatar_style-constant-secondary___tfuOw_7-0-10{
338
+ .magritte-avatar_style-constant-secondary___tfuOw_8-0-0{
317
339
  background-color:var(--magritte-color-background-constant-secondary-v23-2-3);
318
340
  }
319
- .magritte-avatar_style-inverse___yupyU_7-0-10{
341
+ .magritte-avatar_style-inverse___yupyU_8-0-0{
320
342
  background-color:var(--magritte-color-background-inverse-v23-2-3);
321
343
  }
322
- .magritte-avatar_style-inverse-secondary___NdawN_7-0-10{
344
+ .magritte-avatar_style-inverse-secondary___NdawN_8-0-0{
323
345
  background-color:var(--magritte-color-background-inverse-secondary-v23-2-3);
324
346
  }
325
- .magritte-avatar_mode-image___02zr1_7-0-10::after{
347
+ .magritte-avatar_mode-image___02zr1_8-0-0::after{
326
348
  box-shadow:inset 0 0 0 1px var(--magritte-color-component-avatar-stroke-image-v23-2-3);
327
349
  }
328
- .magritte-avatar_mode-letters___ot4qB_7-0-10::after{
350
+ .magritte-avatar_mode-letters___ot4qB_8-0-0::after{
329
351
  box-shadow:inset 0 0 0 1px var(--magritte-color-component-avatar-stroke-letters-v23-2-3);
330
352
  }
331
- .magritte-avatar_mode-icon___MYrlv_7-0-10::after{
353
+ .magritte-avatar_mode-icon___MYrlv_8-0-0::after{
332
354
  box-shadow:inset 0 0 0 1px var(--magritte-color-component-avatar-stroke-icon-v23-2-3);
333
355
  }
334
- .magritte-avatar_mode-placeholder___6hOu7_7-0-10::after{
356
+ .magritte-avatar_mode-placeholder___6hOu7_8-0-0::after{
335
357
  box-shadow:inset 0 0 0 1px var(--magritte-color-component-avatar-stroke-placeholder-v23-2-3);
336
358
  }
337
- .magritte-avatar-image___05p9Z_7-0-10{
359
+ .magritte-avatar-image___05p9Z_8-0-0{
338
360
  object-fit:cover;
339
361
  width:100%;
340
362
  height:100%;
363
+ z-index:1;
341
364
  }
342
- .magritte-avatar-image_hidden___DPQBK_7-0-10{
365
+ .magritte-avatar-image-hidden___YNZ3i_8-0-0{
343
366
  display:none;
344
367
  }
345
- .magritte-avatar_with-online-badge-24___helkM_7-0-10{
368
+ .magritte-avatar-image-loading___0QWL4_8-0-0{
369
+ position:absolute;
370
+ inset:0;
371
+ background-color:var(--magritte-color-component-skeleton-background-content-v23-2-3);
372
+ }
373
+ @keyframes magritte-image-animation___6Q4Qv_8-0-0{
374
+ from{
375
+ opacity:0;
376
+ }
377
+ to{
378
+ opacity:1;
379
+ }
380
+ }
381
+ .magritte-avatar-image-animation___Ik79H_8-0-0{
382
+ animation-name:magritte-image-animation___6Q4Qv_8-0-0;
383
+ animation-duration:1ms;
384
+ animation-timing-function:var(--magritte-semantic-animation-ease-base-timing-function-v23-2-3);
385
+ }
386
+ @media (prefers-reduced-motion: no-preference){
387
+ .magritte-avatar-image-animation___Ik79H_8-0-0{
388
+ animation-duration:var(--magritte-semantic-animation-time-s-duration-v23-2-3);
389
+ }
390
+ }
391
+ .magritte-avatar_with-online-badge-16___rhXhS_8-0-0{
392
+ --transparent-area-mask:radial-gradient(circle at calc(100% - calc(4px / 2)) calc(100% - calc(4px / 2)), transparent calc(4px / 2 + 1px), #000 0);
393
+ -webkit-mask-image:var(--transparent-area-mask);
394
+ mask-image:var(--transparent-area-mask);
395
+ }
396
+ .magritte-avatar_shape-circle___kEbru_8-0-0.magritte-avatar_with-online-badge-16___rhXhS_8-0-0{
397
+ --transparent-area-mask:radial-gradient(circle at calc(100% - calc(calc(4px / 2) + 0px)) calc(100% - calc(calc(4px / 2) + 0px)), transparent calc(4px / 2 + 1px), #000 0);
398
+ -webkit-mask-image:var(--transparent-area-mask);
399
+ mask-image:var(--transparent-area-mask);
400
+ }
401
+ .magritte-avatar-online-badge-16___Xtv3l_8-0-0{
402
+ position:absolute;
403
+ border-radius:50%;
404
+ width:4px;
405
+ height:4px;
406
+ right:0px;
407
+ bottom:0px;
408
+ }
409
+ .magritte-avatar-online-badge_style_positive___jHyv3_8-0-0{
410
+ background-color:var(--magritte-color-component-avatar-online-positive-v23-2-3);
411
+ }
412
+ .magritte-avatar-online-badge_style_constant___-TeoG_8-0-0{
413
+ background-color:var(--magritte-color-component-avatar-online-constant-v23-2-3);
414
+ }
415
+ .magritte-avatar_shape-circle___kEbru_8-0-0 ~ .magritte-avatar-online-badge-16___Xtv3l_8-0-0{
416
+ position:absolute;
417
+ border-radius:50%;
418
+ width:4px;
419
+ height:4px;
420
+ right:0px;
421
+ bottom:0px;
422
+ }
423
+ .magritte-avatar___x--BK_8-0-0.focus-visible + .magritte-avatar-focus-border-16___dnSiS_8-0-0{
424
+ --transparent-area-mask:radial-gradient(circle at calc(100% - calc(calc(4px / 2) + 4px)) calc(100% - calc(calc(4px / 2) + 4px)), transparent calc(4px / 2 + 1px), #000 0);
425
+ -webkit-mask-image:var(--transparent-area-mask);
426
+ mask-image:var(--transparent-area-mask);
427
+ position:absolute;
428
+ width:16px;
429
+ height:16px;
430
+ top:0;
431
+ margin:-4px;
432
+ border:4px solid var(--magritte-color-component-avatar-stroke-state-focused-accessible-v23-2-3);
433
+ border-radius:calc(4px + 4px);
434
+ }
435
+ .magritte-avatar___x--BK_8-0-0.focus-visible.magritte-avatar_shape-circle___kEbru_8-0-0 + .magritte-avatar-focus-border-16___dnSiS_8-0-0{
436
+ --transparent-area-mask:radial-gradient(circle at calc(100% - calc(calc(calc(4px / 2) + 0px) + 4px)) calc(100% - calc(calc(calc(4px / 2) + 0px) + 4px)), transparent calc(4px / 2 + 1px), #000 0);
437
+ -webkit-mask-image:var(--transparent-area-mask);
438
+ mask-image:var(--transparent-area-mask);
439
+ position:absolute;
440
+ width:16px;
441
+ height:16px;
442
+ top:0;
443
+ margin:-4px;
444
+ border:4px solid var(--magritte-color-component-avatar-stroke-state-focused-accessible-v23-2-3);
445
+ border-radius:50%;
446
+ }
447
+ .magritte-avatar_with-online-badge-24___helkM_8-0-0{
346
448
  --transparent-area-mask:radial-gradient(circle at calc(100% - calc(6px / 2)) calc(100% - calc(6px / 2)), transparent calc(6px / 2 + 1px), #000 0);
347
449
  -webkit-mask-image:var(--transparent-area-mask);
348
450
  mask-image:var(--transparent-area-mask);
349
451
  }
350
- .magritte-avatar_shape-circle___kEbru_7-0-10.magritte-avatar_with-online-badge-24___helkM_7-0-10{
452
+ .magritte-avatar_shape-circle___kEbru_8-0-0.magritte-avatar_with-online-badge-24___helkM_8-0-0{
351
453
  --transparent-area-mask:radial-gradient(circle at calc(100% - calc(calc(6px / 2) + 0px)) calc(100% - calc(calc(6px / 2) + 0px)), transparent calc(6px / 2 + 1px), #000 0);
352
454
  -webkit-mask-image:var(--transparent-area-mask);
353
455
  mask-image:var(--transparent-area-mask);
354
456
  }
355
- .magritte-avatar-online-badge-24___mjPKB_7-0-10{
457
+ .magritte-avatar-online-badge-24___mjPKB_8-0-0{
356
458
  position:absolute;
357
459
  border-radius:50%;
358
460
  width:6px;
@@ -360,13 +462,13 @@
360
462
  right:0px;
361
463
  bottom:0px;
362
464
  }
363
- .magritte-avatar-online-badge_style_positive___jHyv3_7-0-10{
465
+ .magritte-avatar-online-badge_style_positive___jHyv3_8-0-0{
364
466
  background-color:var(--magritte-color-component-avatar-online-positive-v23-2-3);
365
467
  }
366
- .magritte-avatar-online-badge_style_contrast___GZFCO_7-0-10{
367
- background-color:var(--magritte-color-component-avatar-online-contrast-v23-2-3);
468
+ .magritte-avatar-online-badge_style_constant___-TeoG_8-0-0{
469
+ background-color:var(--magritte-color-component-avatar-online-constant-v23-2-3);
368
470
  }
369
- .magritte-avatar_shape-circle___kEbru_7-0-10 ~ .magritte-avatar-online-badge-24___mjPKB_7-0-10{
471
+ .magritte-avatar_shape-circle___kEbru_8-0-0 ~ .magritte-avatar-online-badge-24___mjPKB_8-0-0{
370
472
  position:absolute;
371
473
  border-radius:50%;
372
474
  width:6px;
@@ -374,7 +476,7 @@
374
476
  right:0px;
375
477
  bottom:0px;
376
478
  }
377
- .magritte-avatar___x--BK_7-0-10.focus-visible + .magritte-avatar-focus-border-24___wnJnb_7-0-10{
479
+ .magritte-avatar___x--BK_8-0-0.focus-visible + .magritte-avatar-focus-border-24___wnJnb_8-0-0{
378
480
  --transparent-area-mask:radial-gradient(circle at calc(100% - calc(calc(6px / 2) + 4px)) calc(100% - calc(calc(6px / 2) + 4px)), transparent calc(6px / 2 + 1px), #000 0);
379
481
  -webkit-mask-image:var(--transparent-area-mask);
380
482
  mask-image:var(--transparent-area-mask);
@@ -386,7 +488,7 @@
386
488
  border:4px solid var(--magritte-color-component-avatar-stroke-state-focused-accessible-v23-2-3);
387
489
  border-radius:calc(8px + 4px);
388
490
  }
389
- .magritte-avatar___x--BK_7-0-10.focus-visible.magritte-avatar_shape-circle___kEbru_7-0-10 + .magritte-avatar-focus-border-24___wnJnb_7-0-10{
491
+ .magritte-avatar___x--BK_8-0-0.focus-visible.magritte-avatar_shape-circle___kEbru_8-0-0 + .magritte-avatar-focus-border-24___wnJnb_8-0-0{
390
492
  --transparent-area-mask:radial-gradient(circle at calc(100% - calc(calc(calc(6px / 2) + 0px) + 4px)) calc(100% - calc(calc(calc(6px / 2) + 0px) + 4px)), transparent calc(6px / 2 + 1px), #000 0);
391
493
  -webkit-mask-image:var(--transparent-area-mask);
392
494
  mask-image:var(--transparent-area-mask);
@@ -398,17 +500,17 @@
398
500
  border:4px solid var(--magritte-color-component-avatar-stroke-state-focused-accessible-v23-2-3);
399
501
  border-radius:50%;
400
502
  }
401
- .magritte-avatar_with-online-badge-40___Tckho_7-0-10{
503
+ .magritte-avatar_with-online-badge-40___Tckho_8-0-0{
402
504
  --transparent-area-mask:radial-gradient(circle at calc(100% - calc(8px / 2)) calc(100% - calc(8px / 2)), transparent calc(8px / 2 + 2px), #000 0);
403
505
  -webkit-mask-image:var(--transparent-area-mask);
404
506
  mask-image:var(--transparent-area-mask);
405
507
  }
406
- .magritte-avatar_shape-circle___kEbru_7-0-10.magritte-avatar_with-online-badge-40___Tckho_7-0-10{
508
+ .magritte-avatar_shape-circle___kEbru_8-0-0.magritte-avatar_with-online-badge-40___Tckho_8-0-0{
407
509
  --transparent-area-mask:radial-gradient(circle at calc(100% - calc(calc(8px / 2) + 2px)) calc(100% - calc(calc(8px / 2) + 2px)), transparent calc(8px / 2 + 2px), #000 0);
408
510
  -webkit-mask-image:var(--transparent-area-mask);
409
511
  mask-image:var(--transparent-area-mask);
410
512
  }
411
- .magritte-avatar-online-badge-40___HRNTS_7-0-10{
513
+ .magritte-avatar-online-badge-40___HRNTS_8-0-0{
412
514
  position:absolute;
413
515
  border-radius:50%;
414
516
  width:8px;
@@ -416,13 +518,13 @@
416
518
  right:0px;
417
519
  bottom:0px;
418
520
  }
419
- .magritte-avatar-online-badge_style_positive___jHyv3_7-0-10{
521
+ .magritte-avatar-online-badge_style_positive___jHyv3_8-0-0{
420
522
  background-color:var(--magritte-color-component-avatar-online-positive-v23-2-3);
421
523
  }
422
- .magritte-avatar-online-badge_style_contrast___GZFCO_7-0-10{
423
- background-color:var(--magritte-color-component-avatar-online-contrast-v23-2-3);
524
+ .magritte-avatar-online-badge_style_constant___-TeoG_8-0-0{
525
+ background-color:var(--magritte-color-component-avatar-online-constant-v23-2-3);
424
526
  }
425
- .magritte-avatar_shape-circle___kEbru_7-0-10 ~ .magritte-avatar-online-badge-40___HRNTS_7-0-10{
527
+ .magritte-avatar_shape-circle___kEbru_8-0-0 ~ .magritte-avatar-online-badge-40___HRNTS_8-0-0{
426
528
  position:absolute;
427
529
  border-radius:50%;
428
530
  width:8px;
@@ -430,7 +532,7 @@
430
532
  right:2px;
431
533
  bottom:2px;
432
534
  }
433
- .magritte-avatar___x--BK_7-0-10.focus-visible + .magritte-avatar-focus-border-40___Qn9NL_7-0-10{
535
+ .magritte-avatar___x--BK_8-0-0.focus-visible + .magritte-avatar-focus-border-40___Qn9NL_8-0-0{
434
536
  --transparent-area-mask:radial-gradient(circle at calc(100% - calc(calc(8px / 2) + 4px)) calc(100% - calc(calc(8px / 2) + 4px)), transparent calc(8px / 2 + 2px), #000 0);
435
537
  -webkit-mask-image:var(--transparent-area-mask);
436
538
  mask-image:var(--transparent-area-mask);
@@ -442,7 +544,7 @@
442
544
  border:4px solid var(--magritte-color-component-avatar-stroke-state-focused-accessible-v23-2-3);
443
545
  border-radius:calc(12px + 4px);
444
546
  }
445
- .magritte-avatar___x--BK_7-0-10.focus-visible.magritte-avatar_shape-circle___kEbru_7-0-10 + .magritte-avatar-focus-border-40___Qn9NL_7-0-10{
547
+ .magritte-avatar___x--BK_8-0-0.focus-visible.magritte-avatar_shape-circle___kEbru_8-0-0 + .magritte-avatar-focus-border-40___Qn9NL_8-0-0{
446
548
  --transparent-area-mask:radial-gradient(circle at calc(100% - calc(calc(calc(8px / 2) + 2px) + 4px)) calc(100% - calc(calc(calc(8px / 2) + 2px) + 4px)), transparent calc(8px / 2 + 2px), #000 0);
447
549
  -webkit-mask-image:var(--transparent-area-mask);
448
550
  mask-image:var(--transparent-area-mask);
@@ -454,17 +556,17 @@
454
556
  border:4px solid var(--magritte-color-component-avatar-stroke-state-focused-accessible-v23-2-3);
455
557
  border-radius:50%;
456
558
  }
457
- .magritte-avatar_with-online-badge-48___BmWaC_7-0-10{
559
+ .magritte-avatar_with-online-badge-48___BmWaC_8-0-0{
458
560
  --transparent-area-mask:radial-gradient(circle at calc(100% - calc(8px / 2)) calc(100% - calc(8px / 2)), transparent calc(8px / 2 + 2px), #000 0);
459
561
  -webkit-mask-image:var(--transparent-area-mask);
460
562
  mask-image:var(--transparent-area-mask);
461
563
  }
462
- .magritte-avatar_shape-circle___kEbru_7-0-10.magritte-avatar_with-online-badge-48___BmWaC_7-0-10{
564
+ .magritte-avatar_shape-circle___kEbru_8-0-0.magritte-avatar_with-online-badge-48___BmWaC_8-0-0{
463
565
  --transparent-area-mask:radial-gradient(circle at calc(100% - calc(calc(8px / 2) + 3px)) calc(100% - calc(calc(8px / 2) + 3px)), transparent calc(8px / 2 + 2px), #000 0);
464
566
  -webkit-mask-image:var(--transparent-area-mask);
465
567
  mask-image:var(--transparent-area-mask);
466
568
  }
467
- .magritte-avatar-online-badge-48___qPmD8_7-0-10{
569
+ .magritte-avatar-online-badge-48___qPmD8_8-0-0{
468
570
  position:absolute;
469
571
  border-radius:50%;
470
572
  width:8px;
@@ -472,13 +574,13 @@
472
574
  right:0px;
473
575
  bottom:0px;
474
576
  }
475
- .magritte-avatar-online-badge_style_positive___jHyv3_7-0-10{
577
+ .magritte-avatar-online-badge_style_positive___jHyv3_8-0-0{
476
578
  background-color:var(--magritte-color-component-avatar-online-positive-v23-2-3);
477
579
  }
478
- .magritte-avatar-online-badge_style_contrast___GZFCO_7-0-10{
479
- background-color:var(--magritte-color-component-avatar-online-contrast-v23-2-3);
580
+ .magritte-avatar-online-badge_style_constant___-TeoG_8-0-0{
581
+ background-color:var(--magritte-color-component-avatar-online-constant-v23-2-3);
480
582
  }
481
- .magritte-avatar_shape-circle___kEbru_7-0-10 ~ .magritte-avatar-online-badge-48___qPmD8_7-0-10{
583
+ .magritte-avatar_shape-circle___kEbru_8-0-0 ~ .magritte-avatar-online-badge-48___qPmD8_8-0-0{
482
584
  position:absolute;
483
585
  border-radius:50%;
484
586
  width:8px;
@@ -486,7 +588,7 @@
486
588
  right:3px;
487
589
  bottom:3px;
488
590
  }
489
- .magritte-avatar___x--BK_7-0-10.focus-visible + .magritte-avatar-focus-border-48___Bc-lN_7-0-10{
591
+ .magritte-avatar___x--BK_8-0-0.focus-visible + .magritte-avatar-focus-border-48___Bc-lN_8-0-0{
490
592
  --transparent-area-mask:radial-gradient(circle at calc(100% - calc(calc(8px / 2) + 4px)) calc(100% - calc(calc(8px / 2) + 4px)), transparent calc(8px / 2 + 2px), #000 0);
491
593
  -webkit-mask-image:var(--transparent-area-mask);
492
594
  mask-image:var(--transparent-area-mask);
@@ -498,7 +600,7 @@
498
600
  border:4px solid var(--magritte-color-component-avatar-stroke-state-focused-accessible-v23-2-3);
499
601
  border-radius:calc(12px + 4px);
500
602
  }
501
- .magritte-avatar___x--BK_7-0-10.focus-visible.magritte-avatar_shape-circle___kEbru_7-0-10 + .magritte-avatar-focus-border-48___Bc-lN_7-0-10{
603
+ .magritte-avatar___x--BK_8-0-0.focus-visible.magritte-avatar_shape-circle___kEbru_8-0-0 + .magritte-avatar-focus-border-48___Bc-lN_8-0-0{
502
604
  --transparent-area-mask:radial-gradient(circle at calc(100% - calc(calc(calc(8px / 2) + 3px) + 4px)) calc(100% - calc(calc(calc(8px / 2) + 3px) + 4px)), transparent calc(8px / 2 + 2px), #000 0);
503
605
  -webkit-mask-image:var(--transparent-area-mask);
504
606
  mask-image:var(--transparent-area-mask);
@@ -510,17 +612,73 @@
510
612
  border:4px solid var(--magritte-color-component-avatar-stroke-state-focused-accessible-v23-2-3);
511
613
  border-radius:50%;
512
614
  }
513
- .magritte-avatar_with-online-badge-96___r4E42_7-0-10{
615
+ .magritte-avatar_with-online-badge-80___jvmKS_8-0-0{
616
+ --transparent-area-mask:radial-gradient(circle at calc(100% - calc(12px / 2)) calc(100% - calc(12px / 2)), transparent calc(12px / 2 + 2px), #000 0);
617
+ -webkit-mask-image:var(--transparent-area-mask);
618
+ mask-image:var(--transparent-area-mask);
619
+ }
620
+ .magritte-avatar_shape-circle___kEbru_8-0-0.magritte-avatar_with-online-badge-80___jvmKS_8-0-0{
621
+ --transparent-area-mask:radial-gradient(circle at calc(100% - calc(calc(12px / 2) + 6px)) calc(100% - calc(calc(12px / 2) + 6px)), transparent calc(12px / 2 + 2px), #000 0);
622
+ -webkit-mask-image:var(--transparent-area-mask);
623
+ mask-image:var(--transparent-area-mask);
624
+ }
625
+ .magritte-avatar-online-badge-80___zA5Rd_8-0-0{
626
+ position:absolute;
627
+ border-radius:50%;
628
+ width:12px;
629
+ height:12px;
630
+ right:0px;
631
+ bottom:0px;
632
+ }
633
+ .magritte-avatar-online-badge_style_positive___jHyv3_8-0-0{
634
+ background-color:var(--magritte-color-component-avatar-online-positive-v23-2-3);
635
+ }
636
+ .magritte-avatar-online-badge_style_constant___-TeoG_8-0-0{
637
+ background-color:var(--magritte-color-component-avatar-online-constant-v23-2-3);
638
+ }
639
+ .magritte-avatar_shape-circle___kEbru_8-0-0 ~ .magritte-avatar-online-badge-80___zA5Rd_8-0-0{
640
+ position:absolute;
641
+ border-radius:50%;
642
+ width:12px;
643
+ height:12px;
644
+ right:6px;
645
+ bottom:6px;
646
+ }
647
+ .magritte-avatar___x--BK_8-0-0.focus-visible + .magritte-avatar-focus-border-80___1X1Aa_8-0-0{
648
+ --transparent-area-mask:radial-gradient(circle at calc(100% - calc(calc(12px / 2) + 4px)) calc(100% - calc(calc(12px / 2) + 4px)), transparent calc(12px / 2 + 2px), #000 0);
649
+ -webkit-mask-image:var(--transparent-area-mask);
650
+ mask-image:var(--transparent-area-mask);
651
+ position:absolute;
652
+ width:80px;
653
+ height:80px;
654
+ top:0;
655
+ margin:-4px;
656
+ border:4px solid var(--magritte-color-component-avatar-stroke-state-focused-accessible-v23-2-3);
657
+ border-radius:calc(24px + 4px);
658
+ }
659
+ .magritte-avatar___x--BK_8-0-0.focus-visible.magritte-avatar_shape-circle___kEbru_8-0-0 + .magritte-avatar-focus-border-80___1X1Aa_8-0-0{
660
+ --transparent-area-mask:radial-gradient(circle at calc(100% - calc(calc(calc(12px / 2) + 6px) + 4px)) calc(100% - calc(calc(calc(12px / 2) + 6px) + 4px)), transparent calc(12px / 2 + 2px), #000 0);
661
+ -webkit-mask-image:var(--transparent-area-mask);
662
+ mask-image:var(--transparent-area-mask);
663
+ position:absolute;
664
+ width:80px;
665
+ height:80px;
666
+ top:0;
667
+ margin:-4px;
668
+ border:4px solid var(--magritte-color-component-avatar-stroke-state-focused-accessible-v23-2-3);
669
+ border-radius:50%;
670
+ }
671
+ .magritte-avatar_with-online-badge-96___r4E42_8-0-0{
514
672
  --transparent-area-mask:radial-gradient(circle at calc(100% - calc(12px / 2)) calc(100% - calc(12px / 2)), transparent calc(12px / 2 + 2px), #000 0);
515
673
  -webkit-mask-image:var(--transparent-area-mask);
516
674
  mask-image:var(--transparent-area-mask);
517
675
  }
518
- .magritte-avatar_shape-circle___kEbru_7-0-10.magritte-avatar_with-online-badge-96___r4E42_7-0-10{
676
+ .magritte-avatar_shape-circle___kEbru_8-0-0.magritte-avatar_with-online-badge-96___r4E42_8-0-0{
519
677
  --transparent-area-mask:radial-gradient(circle at calc(100% - calc(calc(12px / 2) + 8px)) calc(100% - calc(calc(12px / 2) + 8px)), transparent calc(12px / 2 + 2px), #000 0);
520
678
  -webkit-mask-image:var(--transparent-area-mask);
521
679
  mask-image:var(--transparent-area-mask);
522
680
  }
523
- .magritte-avatar-online-badge-96___d6bm-_7-0-10{
681
+ .magritte-avatar-online-badge-96___d6bm-_8-0-0{
524
682
  position:absolute;
525
683
  border-radius:50%;
526
684
  width:12px;
@@ -528,13 +686,13 @@
528
686
  right:0px;
529
687
  bottom:0px;
530
688
  }
531
- .magritte-avatar-online-badge_style_positive___jHyv3_7-0-10{
689
+ .magritte-avatar-online-badge_style_positive___jHyv3_8-0-0{
532
690
  background-color:var(--magritte-color-component-avatar-online-positive-v23-2-3);
533
691
  }
534
- .magritte-avatar-online-badge_style_contrast___GZFCO_7-0-10{
535
- background-color:var(--magritte-color-component-avatar-online-contrast-v23-2-3);
692
+ .magritte-avatar-online-badge_style_constant___-TeoG_8-0-0{
693
+ background-color:var(--magritte-color-component-avatar-online-constant-v23-2-3);
536
694
  }
537
- .magritte-avatar_shape-circle___kEbru_7-0-10 ~ .magritte-avatar-online-badge-96___d6bm-_7-0-10{
695
+ .magritte-avatar_shape-circle___kEbru_8-0-0 ~ .magritte-avatar-online-badge-96___d6bm-_8-0-0{
538
696
  position:absolute;
539
697
  border-radius:50%;
540
698
  width:12px;
@@ -542,7 +700,7 @@
542
700
  right:8px;
543
701
  bottom:8px;
544
702
  }
545
- .magritte-avatar___x--BK_7-0-10.focus-visible + .magritte-avatar-focus-border-96___TVpd0_7-0-10{
703
+ .magritte-avatar___x--BK_8-0-0.focus-visible + .magritte-avatar-focus-border-96___TVpd0_8-0-0{
546
704
  --transparent-area-mask:radial-gradient(circle at calc(100% - calc(calc(12px / 2) + 4px)) calc(100% - calc(calc(12px / 2) + 4px)), transparent calc(12px / 2 + 2px), #000 0);
547
705
  -webkit-mask-image:var(--transparent-area-mask);
548
706
  mask-image:var(--transparent-area-mask);
@@ -554,7 +712,7 @@
554
712
  border:4px solid var(--magritte-color-component-avatar-stroke-state-focused-accessible-v23-2-3);
555
713
  border-radius:calc(24px + 4px);
556
714
  }
557
- .magritte-avatar___x--BK_7-0-10.focus-visible.magritte-avatar_shape-circle___kEbru_7-0-10 + .magritte-avatar-focus-border-96___TVpd0_7-0-10{
715
+ .magritte-avatar___x--BK_8-0-0.focus-visible.magritte-avatar_shape-circle___kEbru_8-0-0 + .magritte-avatar-focus-border-96___TVpd0_8-0-0{
558
716
  --transparent-area-mask:radial-gradient(circle at calc(100% - calc(calc(calc(12px / 2) + 8px) + 4px)) calc(100% - calc(calc(calc(12px / 2) + 8px) + 4px)), transparent calc(12px / 2 + 2px), #000 0);
559
717
  -webkit-mask-image:var(--transparent-area-mask);
560
718
  mask-image:var(--transparent-area-mask);
@@ -566,17 +724,73 @@
566
724
  border:4px solid var(--magritte-color-component-avatar-stroke-state-focused-accessible-v23-2-3);
567
725
  border-radius:50%;
568
726
  }
569
- .magritte-avatar_with-online-badge-208___AS6Lk_7-0-10{
727
+ .magritte-avatar_with-online-badge-120___oqIED_8-0-0{
728
+ --transparent-area-mask:radial-gradient(circle at calc(100% - calc(12px / 2)) calc(100% - calc(12px / 2)), transparent calc(12px / 2 + 2px), #000 0);
729
+ -webkit-mask-image:var(--transparent-area-mask);
730
+ mask-image:var(--transparent-area-mask);
731
+ }
732
+ .magritte-avatar_shape-circle___kEbru_8-0-0.magritte-avatar_with-online-badge-120___oqIED_8-0-0{
733
+ --transparent-area-mask:radial-gradient(circle at calc(100% - calc(calc(12px / 2) + 12px)) calc(100% - calc(calc(12px / 2) + 12px)), transparent calc(12px / 2 + 2px), #000 0);
734
+ -webkit-mask-image:var(--transparent-area-mask);
735
+ mask-image:var(--transparent-area-mask);
736
+ }
737
+ .magritte-avatar-online-badge-120___nmWqZ_8-0-0{
738
+ position:absolute;
739
+ border-radius:50%;
740
+ width:12px;
741
+ height:12px;
742
+ right:0px;
743
+ bottom:0px;
744
+ }
745
+ .magritte-avatar-online-badge_style_positive___jHyv3_8-0-0{
746
+ background-color:var(--magritte-color-component-avatar-online-positive-v23-2-3);
747
+ }
748
+ .magritte-avatar-online-badge_style_constant___-TeoG_8-0-0{
749
+ background-color:var(--magritte-color-component-avatar-online-constant-v23-2-3);
750
+ }
751
+ .magritte-avatar_shape-circle___kEbru_8-0-0 ~ .magritte-avatar-online-badge-120___nmWqZ_8-0-0{
752
+ position:absolute;
753
+ border-radius:50%;
754
+ width:12px;
755
+ height:12px;
756
+ right:12px;
757
+ bottom:12px;
758
+ }
759
+ .magritte-avatar___x--BK_8-0-0.focus-visible + .magritte-avatar-focus-border-120___vHWE1_8-0-0{
760
+ --transparent-area-mask:radial-gradient(circle at calc(100% - calc(calc(12px / 2) + 4px)) calc(100% - calc(calc(12px / 2) + 4px)), transparent calc(12px / 2 + 2px), #000 0);
761
+ -webkit-mask-image:var(--transparent-area-mask);
762
+ mask-image:var(--transparent-area-mask);
763
+ position:absolute;
764
+ width:120px;
765
+ height:120px;
766
+ top:0;
767
+ margin:-4px;
768
+ border:4px solid var(--magritte-color-component-avatar-stroke-state-focused-accessible-v23-2-3);
769
+ border-radius:calc(24px + 4px);
770
+ }
771
+ .magritte-avatar___x--BK_8-0-0.focus-visible.magritte-avatar_shape-circle___kEbru_8-0-0 + .magritte-avatar-focus-border-120___vHWE1_8-0-0{
772
+ --transparent-area-mask:radial-gradient(circle at calc(100% - calc(calc(calc(12px / 2) + 12px) + 4px)) calc(100% - calc(calc(calc(12px / 2) + 12px) + 4px)), transparent calc(12px / 2 + 2px), #000 0);
773
+ -webkit-mask-image:var(--transparent-area-mask);
774
+ mask-image:var(--transparent-area-mask);
775
+ position:absolute;
776
+ width:120px;
777
+ height:120px;
778
+ top:0;
779
+ margin:-4px;
780
+ border:4px solid var(--magritte-color-component-avatar-stroke-state-focused-accessible-v23-2-3);
781
+ border-radius:50%;
782
+ }
783
+ .magritte-avatar_with-online-badge-208___AS6Lk_8-0-0{
570
784
  --transparent-area-mask:radial-gradient(circle at calc(100% - calc(12px / 2)) calc(100% - calc(12px / 2)), transparent calc(12px / 2 + 2px), #000 0);
571
785
  -webkit-mask-image:var(--transparent-area-mask);
572
786
  mask-image:var(--transparent-area-mask);
573
787
  }
574
- .magritte-avatar_shape-circle___kEbru_7-0-10.magritte-avatar_with-online-badge-208___AS6Lk_7-0-10{
788
+ .magritte-avatar_shape-circle___kEbru_8-0-0.magritte-avatar_with-online-badge-208___AS6Lk_8-0-0{
575
789
  --transparent-area-mask:radial-gradient(circle at calc(100% - calc(calc(12px / 2) + 25px)) calc(100% - calc(calc(12px / 2) + 25px)), transparent calc(12px / 2 + 2px), #000 0);
576
790
  -webkit-mask-image:var(--transparent-area-mask);
577
791
  mask-image:var(--transparent-area-mask);
578
792
  }
579
- .magritte-avatar-online-badge-208___m4hXQ_7-0-10{
793
+ .magritte-avatar-online-badge-208___m4hXQ_8-0-0{
580
794
  position:absolute;
581
795
  border-radius:50%;
582
796
  width:12px;
@@ -584,13 +798,13 @@
584
798
  right:0px;
585
799
  bottom:0px;
586
800
  }
587
- .magritte-avatar-online-badge_style_positive___jHyv3_7-0-10{
801
+ .magritte-avatar-online-badge_style_positive___jHyv3_8-0-0{
588
802
  background-color:var(--magritte-color-component-avatar-online-positive-v23-2-3);
589
803
  }
590
- .magritte-avatar-online-badge_style_contrast___GZFCO_7-0-10{
591
- background-color:var(--magritte-color-component-avatar-online-contrast-v23-2-3);
804
+ .magritte-avatar-online-badge_style_constant___-TeoG_8-0-0{
805
+ background-color:var(--magritte-color-component-avatar-online-constant-v23-2-3);
592
806
  }
593
- .magritte-avatar_shape-circle___kEbru_7-0-10 ~ .magritte-avatar-online-badge-208___m4hXQ_7-0-10{
807
+ .magritte-avatar_shape-circle___kEbru_8-0-0 ~ .magritte-avatar-online-badge-208___m4hXQ_8-0-0{
594
808
  position:absolute;
595
809
  border-radius:50%;
596
810
  width:12px;
@@ -598,7 +812,7 @@
598
812
  right:25px;
599
813
  bottom:25px;
600
814
  }
601
- .magritte-avatar___x--BK_7-0-10.focus-visible + .magritte-avatar-focus-border-208___V6We2_7-0-10{
815
+ .magritte-avatar___x--BK_8-0-0.focus-visible + .magritte-avatar-focus-border-208___V6We2_8-0-0{
602
816
  --transparent-area-mask:radial-gradient(circle at calc(100% - calc(calc(12px / 2) + 4px)) calc(100% - calc(calc(12px / 2) + 4px)), transparent calc(12px / 2 + 2px), #000 0);
603
817
  -webkit-mask-image:var(--transparent-area-mask);
604
818
  mask-image:var(--transparent-area-mask);
@@ -610,7 +824,7 @@
610
824
  border:4px solid var(--magritte-color-component-avatar-stroke-state-focused-accessible-v23-2-3);
611
825
  border-radius:calc(8px + 4px);
612
826
  }
613
- .magritte-avatar___x--BK_7-0-10.focus-visible.magritte-avatar_shape-circle___kEbru_7-0-10 + .magritte-avatar-focus-border-208___V6We2_7-0-10{
827
+ .magritte-avatar___x--BK_8-0-0.focus-visible.magritte-avatar_shape-circle___kEbru_8-0-0 + .magritte-avatar-focus-border-208___V6We2_8-0-0{
614
828
  --transparent-area-mask:radial-gradient(circle at calc(100% - calc(calc(calc(12px / 2) + 25px) + 4px)) calc(100% - calc(calc(calc(12px / 2) + 25px) + 4px)), transparent calc(12px / 2 + 2px), #000 0);
615
829
  -webkit-mask-image:var(--transparent-area-mask);
616
830
  mask-image:var(--transparent-area-mask);
@@ -622,50 +836,96 @@
622
836
  border:4px solid var(--magritte-color-component-avatar-stroke-state-focused-accessible-v23-2-3);
623
837
  border-radius:50%;
624
838
  }
839
+ .magritte-female___fSeyG_8-0-0{
840
+ background-image:url("images/female-day.png");
841
+ background-size:cover;
842
+ }
843
+ .magritte-night-theme .magritte-female___fSeyG_8-0-0{
844
+ background-image:url("images/female-night.png");
845
+ }
846
+ .magritte-male___HlZ30_8-0-0{
847
+ background-image:url("images/male-day.png");
848
+ background-size:cover;
849
+ }
850
+ .magritte-night-theme .magritte-male___HlZ30_8-0-0{
851
+ background-image:url("images/male-night.png");
852
+ }
853
+ .magritte-city___jNvGf_8-0-0{
854
+ background-image:url("images/city-day.png");
855
+ background-size:cover;
856
+ }
857
+ .magritte-night-theme .magritte-city___jNvGf_8-0-0{
858
+ background-image:url("images/city-night.png");
859
+ }
860
+ .magritte-undefined___E7573_8-0-0{
861
+ background-image:url("images/undefined-day.png");
862
+ background-size:cover;
863
+ }
864
+ .magritte-night-theme .magritte-undefined___E7573_8-0-0{
865
+ background-image:url("images/undefined-night.png");
866
+ }
625
867
 
626
- .magritte-avatar-stack___yEcSg_7-0-10{
868
+ .magritte-avatar-stack___5qOCC_8-0-0{
627
869
  display:flex;
628
870
  }
629
- .magritte-avatar-stack-inline___jLtu7_7-0-10{
871
+ .magritte-avatar-stack-inline___aXUFe_8-0-0{
630
872
  display:inline-flex;
631
873
  }
632
- .magritte-avatar-stack-item___XGFoG_7-0-10:not(:last-child){
874
+ .magritte-avatar-stack-item___hDdq8_8-0-0:not(:last-child){
633
875
  mask-image:var(--avatar-stack-mask-image);
634
876
  mask-mode:luminance;
635
877
  }
636
- .magritte-avatar-stack-size-24___Sfn0C_7-0-10.magritte-avatar-stack-circle___nDRDS_7-0-10{
878
+ .magritte-avatar-stack-size-16___Yuwfu_8-0-0.magritte-avatar-stack-circle___tQZvM_8-0-0{
879
+ --avatar-stack-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2216%22%20height%3D%2216%22%3E%3Crect%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22white%22%20/%3E%3Ccircle%20cx%3D%2220%22%20cy%3D%228%22%20r%3D%2210%22%20fill%3D%22black%22%20/%3E%3C/svg%3E');
880
+ }
881
+ .magritte-avatar-stack-size-16___Yuwfu_8-0-0.magritte-avatar-stack-rect___Ip8L2_8-0-0{
882
+ --avatar-stack-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2216%22%20height%3D%2216%22%20%3E%3Crect%20width%3D%2216%22%20height%3D%2216%22%20fill%3D%22white%22%20/%3E%3Crect%20width%3D%2220%22%20height%3D%2220%22%20x%3D%2210%22%20y%3D%22-2%22%20rx%3D%226%22%20ry%3D%226%22%20fill%3D%22black%22%20/%3E%3C/svg%3E');
883
+ }
884
+ .magritte-avatar-stack-size-16___Yuwfu_8-0-0 .magritte-avatar-stack-item___hDdq8_8-0-0:not(:first-child){
885
+ margin-left:-4px;
886
+ }
887
+ .magritte-avatar-stack-size-24___oZNQA_8-0-0.magritte-avatar-stack-circle___tQZvM_8-0-0{
637
888
  --avatar-stack-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%3E%3Crect%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22white%22%20/%3E%3Ccircle%20cx%3D%2228%22%20cy%3D%2212%22%20r%3D%2214%22%20fill%3D%22black%22%20/%3E%3C/svg%3E');
638
889
  }
639
- .magritte-avatar-stack-size-24___Sfn0C_7-0-10.magritte-avatar-stack-rect___33hV1_7-0-10{
890
+ .magritte-avatar-stack-size-24___oZNQA_8-0-0.magritte-avatar-stack-rect___Ip8L2_8-0-0{
640
891
  --avatar-stack-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20%3E%3Crect%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22white%22%20/%3E%3Crect%20width%3D%2228%22%20height%3D%2228%22%20x%3D%2214%22%20y%3D%22-2%22%20rx%3D%2210%22%20ry%3D%2210%22%20fill%3D%22black%22%20/%3E%3C/svg%3E');
641
892
  }
642
- .magritte-avatar-stack-size-24___Sfn0C_7-0-10 .magritte-avatar-stack-item___XGFoG_7-0-10:not(:first-child){
893
+ .magritte-avatar-stack-size-24___oZNQA_8-0-0 .magritte-avatar-stack-item___hDdq8_8-0-0:not(:first-child){
643
894
  margin-left:-8px;
644
895
  }
645
- .magritte-avatar-stack-size-40___6d6Xo_7-0-10.magritte-avatar-stack-circle___nDRDS_7-0-10{
896
+ .magritte-avatar-stack-size-40___oBfvX_8-0-0.magritte-avatar-stack-circle___tQZvM_8-0-0{
646
897
  --avatar-stack-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%3E%3Crect%20width%3D%2240%22%20height%3D%2240%22%20fill%3D%22white%22%20/%3E%3Ccircle%20cx%3D%2248%22%20cy%3D%2220%22%20r%3D%2224%22%20fill%3D%22black%22%20/%3E%3C/svg%3E');
647
898
  }
648
- .magritte-avatar-stack-size-40___6d6Xo_7-0-10.magritte-avatar-stack-rect___33hV1_7-0-10{
899
+ .magritte-avatar-stack-size-40___oBfvX_8-0-0.magritte-avatar-stack-rect___Ip8L2_8-0-0{
649
900
  --avatar-stack-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2240%22%20height%3D%2240%22%20%3E%3Crect%20width%3D%2240%22%20height%3D%2240%22%20fill%3D%22white%22%20/%3E%3Crect%20width%3D%2248%22%20height%3D%2248%22%20x%3D%2224%22%20y%3D%22-4%22%20rx%3D%2216%22%20ry%3D%2216%22%20fill%3D%22black%22%20/%3E%3C/svg%3E');
650
901
  }
651
- .magritte-avatar-stack-size-40___6d6Xo_7-0-10 .magritte-avatar-stack-item___XGFoG_7-0-10:not(:first-child){
902
+ .magritte-avatar-stack-size-40___oBfvX_8-0-0 .magritte-avatar-stack-item___hDdq8_8-0-0:not(:first-child){
652
903
  margin-left:-12px;
653
904
  }
654
- .magritte-avatar-stack-size-48___OjxbX_7-0-10.magritte-avatar-stack-circle___nDRDS_7-0-10{
905
+ .magritte-avatar-stack-size-48___KGUEt_8-0-0.magritte-avatar-stack-circle___tQZvM_8-0-0{
655
906
  --avatar-stack-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2248%22%20height%3D%2248%22%3E%3Crect%20width%3D%2248%22%20height%3D%2248%22%20fill%3D%22white%22%20/%3E%3Ccircle%20cx%3D%2260%22%20cy%3D%2224%22%20r%3D%2228%22%20fill%3D%22black%22%20/%3E%3C/svg%3E');
656
907
  }
657
- .magritte-avatar-stack-size-48___OjxbX_7-0-10.magritte-avatar-stack-rect___33hV1_7-0-10{
908
+ .magritte-avatar-stack-size-48___KGUEt_8-0-0.magritte-avatar-stack-rect___Ip8L2_8-0-0{
658
909
  --avatar-stack-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2248%22%20height%3D%2248%22%20%3E%3Crect%20width%3D%2248%22%20height%3D%2248%22%20fill%3D%22white%22%20/%3E%3Crect%20width%3D%2256%22%20height%3D%2256%22%20x%3D%2232%22%20y%3D%22-4%22%20rx%3D%2216%22%20ry%3D%2216%22%20fill%3D%22black%22%20/%3E%3C/svg%3E');
659
910
  }
660
- .magritte-avatar-stack-size-48___OjxbX_7-0-10 .magritte-avatar-stack-item___XGFoG_7-0-10:not(:first-child){
911
+ .magritte-avatar-stack-size-48___KGUEt_8-0-0 .magritte-avatar-stack-item___hDdq8_8-0-0:not(:first-child){
661
912
  margin-left:-12px;
662
913
  }
663
- .magritte-avatar-stack-size-96___7k1Fh_7-0-10.magritte-avatar-stack-circle___nDRDS_7-0-10{
914
+ .magritte-avatar-stack-size-80___JnGV-_8-0-0.magritte-avatar-stack-circle___tQZvM_8-0-0{
915
+ --avatar-stack-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2280%22%20height%3D%2280%22%3E%3Crect%20width%3D%2280%22%20height%3D%2280%22%20fill%3D%22white%22%20/%3E%3Ccircle%20cx%3D%2292%22%20cy%3D%2240%22%20r%3D%2244%22%20fill%3D%22black%22%20/%3E%3C/svg%3E');
916
+ }
917
+ .magritte-avatar-stack-size-80___JnGV-_8-0-0.magritte-avatar-stack-rect___Ip8L2_8-0-0{
918
+ --avatar-stack-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2280%22%20height%3D%2280%22%20%3E%3Crect%20width%3D%2280%22%20height%3D%2280%22%20fill%3D%22white%22%20/%3E%3Crect%20width%3D%2288%22%20height%3D%2288%22%20x%3D%2248%22%20y%3D%22-4%22%20rx%3D%2228%22%20ry%3D%2228%22%20fill%3D%22black%22%20/%3E%3C/svg%3E');
919
+ }
920
+ .magritte-avatar-stack-size-80___JnGV-_8-0-0 .magritte-avatar-stack-item___hDdq8_8-0-0:not(:first-child){
921
+ margin-left:-28px;
922
+ }
923
+ .magritte-avatar-stack-size-96___1LxDK_8-0-0.magritte-avatar-stack-circle___tQZvM_8-0-0{
664
924
  --avatar-stack-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2296%22%20height%3D%2296%22%3E%3Crect%20width%3D%2296%22%20height%3D%2296%22%20fill%3D%22white%22%20/%3E%3Ccircle%20cx%3D%22112%22%20cy%3D%2248%22%20r%3D%2252%22%20fill%3D%22black%22%20/%3E%3C/svg%3E');
665
925
  }
666
- .magritte-avatar-stack-size-96___7k1Fh_7-0-10.magritte-avatar-stack-rect___33hV1_7-0-10{
926
+ .magritte-avatar-stack-size-96___1LxDK_8-0-0.magritte-avatar-stack-rect___Ip8L2_8-0-0{
667
927
  --avatar-stack-mask-image:url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2296%22%20height%3D%2296%22%20%3E%3Crect%20width%3D%2296%22%20height%3D%2296%22%20fill%3D%22white%22%20/%3E%3Crect%20width%3D%22104%22%20height%3D%22104%22%20x%3D%2260%22%20y%3D%22-4%22%20rx%3D%2228%22%20ry%3D%2228%22%20fill%3D%22black%22%20/%3E%3C/svg%3E');
668
928
  }
669
- .magritte-avatar-stack-size-96___7k1Fh_7-0-10 .magritte-avatar-stack-item___XGFoG_7-0-10:not(:first-child){
929
+ .magritte-avatar-stack-size-96___1LxDK_8-0-0 .magritte-avatar-stack-item___hDdq8_8-0-0:not(:first-child){
670
930
  margin-left:-32px;
671
931
  }