@robosophy/ui-vue 1.2.0 → 1.2.1

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/dist/index.css CHANGED
@@ -1,753 +1,753 @@
1
- .rs-icon {
2
- align-items: center;
3
- color: var(--rs-icon-color, currentColor);
4
- display: inline-flex;
5
- flex: 0 0 auto;
6
- flex-shrink: 0;
7
- height: var(--rs-icon-size, 24px);
8
- justify-content: center;
9
- user-select: none;
10
- width: var(--rs-icon-size, 24px);
11
- }
12
-
13
- .rs-icon--interactive {
14
- cursor: pointer;
15
- }
16
-
17
- .rs-icon--primary {
18
- color: var(--rs-color-icon-primary, #48a0d4);
19
- }
20
-
21
- .rs-icon--secondary {
22
- color: var(--rs-color-icon-secondary, #000000);
23
- }
24
-
25
- .rs-icon--success {
26
- color: var(--rs-color-icon-success, #4EAE01);
27
- }
28
-
29
- .rs-icon--warning {
30
- color: var(--rs-color-icon-warning, #FF9001);
31
- }
32
-
33
- .rs-icon--danger {
34
- color: var(--rs-color-icon-danger, #d80115);
35
- }
36
-
37
- .rs-icon--inherit {
38
- color: currentColor;
39
- }
40
-
41
- .rs-icon-wrap {
42
- position: relative;
43
- display: inline-flex;
44
- align-items: center;
45
- justify-content: center;
46
- vertical-align: middle;
47
- }
48
-
49
- .rs-icon__notification {
50
- position: absolute;
51
- top: 0;
52
- right: 0;
53
- width: 10px;
54
- height: 10px;
55
- border-radius: 50%;
56
- background-color: var(--rs-color-yellow-500, #ff9001);
57
- }
58
- .rs-icon {
59
- align-items: center;
60
- color: var(--rs-icon-color, currentColor);
61
- display: inline-flex;
62
- flex: 0 0 auto;
63
- flex-shrink: 0;
64
- height: var(--rs-icon-size, 24px);
65
- justify-content: center;
66
- user-select: none;
1
+ .rs-icon {
2
+ align-items: center;
3
+ color: var(--rs-icon-color, currentColor);
4
+ display: inline-flex;
5
+ flex: 0 0 auto;
6
+ flex-shrink: 0;
7
+ height: var(--rs-icon-size, 24px);
8
+ justify-content: center;
9
+ user-select: none;
10
+ width: var(--rs-icon-size, 24px);
11
+ }
12
+
13
+ .rs-icon--interactive {
14
+ cursor: pointer;
15
+ }
16
+
17
+ .rs-icon--primary {
18
+ color: var(--rs-color-icon-primary, #48a0d4);
19
+ }
20
+
21
+ .rs-icon--secondary {
22
+ color: var(--rs-color-icon-secondary, #000000);
23
+ }
24
+
25
+ .rs-icon--success {
26
+ color: var(--rs-color-icon-success, #4EAE01);
27
+ }
28
+
29
+ .rs-icon--warning {
30
+ color: var(--rs-color-icon-warning, #FF9001);
31
+ }
32
+
33
+ .rs-icon--danger {
34
+ color: var(--rs-color-icon-danger, #d80115);
35
+ }
36
+
37
+ .rs-icon--inherit {
38
+ color: currentColor;
39
+ }
40
+
41
+ .rs-icon-wrap {
42
+ position: relative;
43
+ display: inline-flex;
44
+ align-items: center;
45
+ justify-content: center;
46
+ vertical-align: middle;
47
+ }
48
+
49
+ .rs-icon__notification {
50
+ position: absolute;
51
+ top: 0;
52
+ right: 0;
53
+ width: 10px;
54
+ height: 10px;
55
+ border-radius: 50%;
56
+ background-color: var(--rs-color-yellow-500, #ff9001);
57
+ }
58
+ .rs-icon {
59
+ align-items: center;
60
+ color: var(--rs-icon-color, currentColor);
61
+ display: inline-flex;
62
+ flex: 0 0 auto;
63
+ flex-shrink: 0;
64
+ height: var(--rs-icon-size, 24px);
65
+ justify-content: center;
66
+ user-select: none;
67
67
  width: var(--rs-icon-size, 24px);
68
68
  }
69
- .rs-icon--interactive {
69
+ .rs-icon--interactive {
70
70
  cursor: pointer;
71
71
  }
72
- .rs-icon--primary {
72
+ .rs-icon--primary {
73
73
  color: var(--rs-color-icon-primary, #48a0d4);
74
74
  }
75
- .rs-icon--secondary {
75
+ .rs-icon--secondary {
76
76
  color: var(--rs-color-icon-secondary, #000000);
77
77
  }
78
- .rs-icon--success {
78
+ .rs-icon--success {
79
79
  color: var(--rs-color-icon-success, #4EAE01);
80
80
  }
81
- .rs-icon--warning {
81
+ .rs-icon--warning {
82
82
  color: var(--rs-color-icon-warning, #FF9001);
83
83
  }
84
- .rs-icon--danger {
84
+ .rs-icon--danger {
85
85
  color: var(--rs-color-icon-danger, #d80115);
86
86
  }
87
- .rs-icon--inherit {
87
+ .rs-icon--inherit {
88
88
  color: currentColor;
89
89
  }
90
- .rs-icon-wrap {
91
- position: relative;
92
- display: inline-flex;
93
- align-items: center;
94
- justify-content: center;
90
+ .rs-icon-wrap {
91
+ position: relative;
92
+ display: inline-flex;
93
+ align-items: center;
94
+ justify-content: center;
95
95
  vertical-align: middle;
96
96
  }
97
- .rs-icon__notification {
98
- position: absolute;
99
- top: 0;
100
- right: 0;
101
- width: 10px;
102
- height: 10px;
103
- border-radius: 50%;
97
+ .rs-icon__notification {
98
+ position: absolute;
99
+ top: 0;
100
+ right: 0;
101
+ width: 10px;
102
+ height: 10px;
103
+ border-radius: 50%;
104
104
  background-color: var(--rs-color-yellow-500, #ff9001);
105
- }
106
- .rs-account-selector-host {
107
- --rs-account-selector-width: 270px;
108
- --rs-account-selector-background: var(--rs-color-surface-primary, #ffffff);
109
- --rs-account-selector-border: var(--rs-color-stroke-default, #d1d1d1);
110
- --rs-account-selector-color: var(--rs-color-text-primary, #000000);
111
- --rs-account-selector-muted: var(--rs-color-text-secondary, #909090);
112
- --rs-account-selector-active: var(--rs-color-text-brand-green, #4eae01);
113
- --rs-account-selector-danger: var(--rs-color-text-brand-red, #d80115);
114
-
115
- display: inline-flex;
105
+ }
106
+ .rs-account-selector-host {
107
+ --rs-account-selector-width: 270px;
108
+ --rs-account-selector-background: var(--rs-color-surface-primary, #ffffff);
109
+ --rs-account-selector-border: var(--rs-color-stroke-default, #d1d1d1);
110
+ --rs-account-selector-color: var(--rs-color-text-primary, #000000);
111
+ --rs-account-selector-muted: var(--rs-color-text-secondary, #909090);
112
+ --rs-account-selector-active: var(--rs-color-text-brand-green, #4eae01);
113
+ --rs-account-selector-danger: var(--rs-color-text-brand-red, #d80115);
114
+
115
+ display: inline-flex;
116
116
  position: relative;
117
117
  }
118
- .rs-account-selector__trigger.p-button {
119
- align-items: center;
120
- background: transparent;
121
- border: 0;
122
- color: var(--rs-account-selector-color);
123
- display: inline-flex;
124
- flex: 0 0 auto;
125
- gap: 16px;
126
- min-width: 0;
118
+ .rs-account-selector__trigger.p-button {
119
+ align-items: center;
120
+ background: transparent;
121
+ border: 0;
122
+ color: var(--rs-account-selector-color);
123
+ display: inline-flex;
124
+ flex: 0 0 auto;
125
+ gap: 16px;
126
+ min-width: 0;
127
127
  padding: 0;
128
128
  }
129
- .rs-account-selector__trigger.p-button .p-button-label {
130
- align-items: center;
131
- display: inline-flex;
129
+ .rs-account-selector__trigger.p-button .p-button-label {
130
+ align-items: center;
131
+ display: inline-flex;
132
132
  gap: 20px;
133
133
  }
134
- .rs-account-selector__trigger.p-button:hover,
135
- .rs-account-selector__trigger.p-button:focus-visible {
136
- background: transparent !important;
137
- border: 0 !important;
138
- color: var(--rs-account-selector-color);
139
- gap: 16px !important;
134
+ .rs-account-selector__trigger.p-button:hover,
135
+ .rs-account-selector__trigger.p-button:focus-visible {
136
+ background: transparent !important;
137
+ border: 0 !important;
138
+ color: var(--rs-account-selector-color);
139
+ gap: 16px !important;
140
140
  padding: 0 !important;
141
141
  }
142
- .rs-account-selector__trigger-chevron {
142
+ .rs-account-selector__trigger-chevron {
143
143
  transition: transform 160ms ease;
144
144
  }
145
- .rs-account-selector__trigger--open .rs-account-selector__trigger-chevron {
145
+ .rs-account-selector__trigger--open .rs-account-selector__trigger-chevron {
146
146
  transform: rotate(180deg);
147
147
  }
148
- .rs-account-selector__trigger-avatar {
149
- --rs-account-selector-avatar-size: 46px;
150
-
151
- align-items: center;
152
- background: var(--rs-color-background-info, #e6f6fb);
153
- border-radius: 999px;
154
- color: var(--rs-color-text-brand, #48a0d4);
155
- display: inline-flex;
156
- flex: 0 0 auto;
157
- font-size: 0.875rem;
158
- font-weight: 600;
159
- height: var(--rs-account-selector-avatar-size);
160
- justify-content: center;
161
- line-height: 1;
162
- overflow: hidden;
163
- text-transform: uppercase;
148
+ .rs-account-selector__trigger-avatar {
149
+ --rs-account-selector-avatar-size: 46px;
150
+
151
+ align-items: center;
152
+ background: var(--rs-color-background-info, #e6f6fb);
153
+ border-radius: 999px;
154
+ color: var(--rs-color-text-brand, #48a0d4);
155
+ display: inline-flex;
156
+ flex: 0 0 auto;
157
+ font-size: 0.875rem;
158
+ font-weight: 600;
159
+ height: var(--rs-account-selector-avatar-size);
160
+ justify-content: center;
161
+ line-height: 1;
162
+ overflow: hidden;
163
+ text-transform: uppercase;
164
164
  width: var(--rs-account-selector-avatar-size);
165
165
  }
166
- .rs-account-selector {
167
- background: var(--rs-account-selector-background);
168
- border: 1px solid var(--rs-account-selector-border);
169
- border-radius: 8px;
170
- box-sizing: border-box;
171
- color: var(--rs-account-selector-color);
172
- display: flex;
173
- flex-direction: column;
174
- font-family: var(--rs-font-family, "Inter", sans-serif);
175
- font-size: 16px;
176
- gap: 16px;
177
- z-index: 20;
178
- padding: 20px 0 16px;
179
- max-width: calc(100vw - 32px);
166
+ .rs-account-selector {
167
+ background: var(--rs-account-selector-background);
168
+ border: 1px solid var(--rs-account-selector-border);
169
+ border-radius: 8px;
170
+ box-sizing: border-box;
171
+ color: var(--rs-account-selector-color);
172
+ display: flex;
173
+ flex-direction: column;
174
+ font-family: var(--rs-font-family, "Inter", sans-serif);
175
+ font-size: 16px;
176
+ gap: 16px;
177
+ z-index: 20;
178
+ padding: 20px 0 16px;
179
+ max-width: calc(100vw - 32px);
180
180
  width: var(--rs-account-selector-width);
181
181
  }
182
- .rs-account-selector__summary {
183
- align-items: center;
184
- display: flex;
185
- flex-direction: column;
186
- gap: 8px;
187
- padding: 0 16px;
182
+ .rs-account-selector__summary {
183
+ align-items: center;
184
+ display: flex;
185
+ flex-direction: column;
186
+ gap: 8px;
187
+ padding: 0 16px;
188
188
  text-align: center;
189
189
  }
190
- .rs-account-selector__avatar-stack {
191
- align-items: center;
190
+ .rs-account-selector__avatar-stack {
191
+ align-items: center;
192
192
  display: inline-flex;
193
193
  }
194
- .rs-account-selector__avatar {
195
- --rs-account-selector-avatar-size: 44px;
196
-
197
- align-items: center;
198
- background: var(--rs-color-background-info, #e6f6fb);
199
- border: 2px solid var(--rs-color-surface-primary, #ffffff);
200
- border-radius: 999px;
201
- box-sizing: border-box;
202
- color: var(--rs-color-text-brand, #48a0d4);
203
- display: inline-flex;
204
- flex: 0 0 auto;
205
- font-size: 0.875rem;
206
- font-weight: 600;
207
- height: var(--rs-account-selector-avatar-size);
208
- justify-content: center;
209
- line-height: 1;
210
- overflow: hidden;
211
- text-transform: uppercase;
194
+ .rs-account-selector__avatar {
195
+ --rs-account-selector-avatar-size: 44px;
196
+
197
+ align-items: center;
198
+ background: var(--rs-color-background-info, #e6f6fb);
199
+ border: 2px solid var(--rs-color-surface-primary, #ffffff);
200
+ border-radius: 999px;
201
+ box-sizing: border-box;
202
+ color: var(--rs-color-text-brand, #48a0d4);
203
+ display: inline-flex;
204
+ flex: 0 0 auto;
205
+ font-size: 0.875rem;
206
+ font-weight: 600;
207
+ height: var(--rs-account-selector-avatar-size);
208
+ justify-content: center;
209
+ line-height: 1;
210
+ overflow: hidden;
211
+ text-transform: uppercase;
212
212
  width: var(--rs-account-selector-avatar-size);
213
213
  }
214
- .rs-account-selector__avatar--sm {
215
- --rs-account-selector-avatar-size: 35px;
216
-
214
+ .rs-account-selector__avatar--sm {
215
+ --rs-account-selector-avatar-size: 35px;
216
+
217
217
  font-size: 0.75rem;
218
218
  }
219
- .rs-account-selector__avatar--lg {
220
- --rs-account-selector-avatar-size: 64px;
221
-
219
+ .rs-account-selector__avatar--lg {
220
+ --rs-account-selector-avatar-size: 64px;
221
+
222
222
  font-size: 1.125rem;
223
223
  }
224
- .rs-account-selector__avatar-image {
225
- display: block;
226
- height: 100%;
227
- object-fit: cover;
224
+ .rs-account-selector__avatar-image {
225
+ display: block;
226
+ height: 100%;
227
+ object-fit: cover;
228
228
  width: 100%;
229
229
  }
230
- .rs-account-selector__avatar-placeholder {
231
- align-items: center;
232
- display: inline-flex;
233
- height: 100%;
234
- justify-content: center;
230
+ .rs-account-selector__avatar-placeholder {
231
+ align-items: center;
232
+ display: inline-flex;
233
+ height: 100%;
234
+ justify-content: center;
235
235
  width: 100%;
236
236
  }
237
- .rs-account-selector__secondary-avatar {
237
+ .rs-account-selector__secondary-avatar {
238
238
  margin-left: -20px;
239
239
  }
240
- .rs-account-selector__user {
241
- display: grid;
242
- gap: 2px;
243
- max-width: 100%;
244
- min-width: 0;
240
+ .rs-account-selector__user {
241
+ display: grid;
242
+ gap: 2px;
243
+ max-width: 100%;
244
+ min-width: 0;
245
245
  width: 100%;
246
246
  }
247
- .rs-account-selector__title,
248
- .rs-account-selector__name,
249
- .rs-account-selector__email,
250
- .rs-account-selector__account-label,
251
- .rs-account-selector__account-state,
252
- .rs-account-selector__state {
247
+ .rs-account-selector__title,
248
+ .rs-account-selector__name,
249
+ .rs-account-selector__email,
250
+ .rs-account-selector__account-label,
251
+ .rs-account-selector__account-state,
252
+ .rs-account-selector__state {
253
253
  margin: 0;
254
254
  }
255
- .rs-account-selector__title {
256
- font-weight: 600;
255
+ .rs-account-selector__title {
256
+ font-weight: 600;
257
257
  line-height: 1.35;
258
258
  }
259
- .rs-account-selector__name {
260
- font-size: 0.875rem;
261
- font-weight: 500;
259
+ .rs-account-selector__name {
260
+ font-size: 0.875rem;
261
+ font-weight: 500;
262
262
  line-height: 1.35;
263
263
  }
264
- .rs-account-selector__email {
265
- color: var(--rs-account-selector-muted);
266
- overflow: hidden;
267
- text-overflow: ellipsis;
264
+ .rs-account-selector__email {
265
+ color: var(--rs-account-selector-muted);
266
+ overflow: hidden;
267
+ text-overflow: ellipsis;
268
268
  white-space: nowrap;
269
269
  }
270
- .rs-account-selector__actions,
271
- .rs-account-selector__footer {
272
- align-items: center;
273
- display: flex;
274
- flex-direction: column;
275
- gap: 8px;
270
+ .rs-account-selector__actions,
271
+ .rs-account-selector__footer {
272
+ align-items: center;
273
+ display: flex;
274
+ flex-direction: column;
275
+ gap: 8px;
276
276
  padding: 0 16px;
277
277
  }
278
- .rs-account-selector__button {
278
+ .rs-account-selector__button {
279
279
  width: max-content;
280
280
  }
281
- .rs-account-selector__button-content {
282
- align-items: center;
283
- display: inline-flex;
281
+ .rs-account-selector__button-content {
282
+ align-items: center;
283
+ display: inline-flex;
284
284
  gap: 8px;
285
285
  }
286
- .rs-account-selector__accounts {
286
+ .rs-account-selector__accounts {
287
287
  display: grid;
288
288
  }
289
- .rs-account-selector__account.p-button {
290
- align-items: center;
291
- background: transparent;
292
- border: 0;
293
- border-top: 1px solid var(--rs-account-selector-border);
294
- box-sizing: border-box;
295
- color: inherit;
296
- cursor: pointer;
297
- display: grid;
298
- font: inherit;
299
- gap: 8px;
300
- grid-template-columns: auto minmax(0, 1fr) auto;
301
- min-height: 58px;
302
- padding: 8px 16px;
303
- text-align: left;
289
+ .rs-account-selector__account.p-button {
290
+ align-items: center;
291
+ background: transparent;
292
+ border: 0;
293
+ border-top: 1px solid var(--rs-account-selector-border);
294
+ box-sizing: border-box;
295
+ color: inherit;
296
+ cursor: pointer;
297
+ display: grid;
298
+ font: inherit;
299
+ gap: 8px;
300
+ grid-template-columns: auto minmax(0, 1fr) auto;
301
+ min-height: 58px;
302
+ padding: 8px 16px;
303
+ text-align: left;
304
304
  width: 100%;
305
305
  }
306
- .rs-account-selector__account.p-button .p-button-label {
306
+ .rs-account-selector__account.p-button .p-button-label {
307
307
  display: contents;
308
308
  }
309
- .rs-account-selector__account.p-button:last-child {
309
+ .rs-account-selector__account.p-button:last-child {
310
310
  border-bottom: 1px solid var(--rs-account-selector-border);
311
311
  }
312
- .rs-account-selector__account.p-button:hover:not(:disabled) {
313
- background: var(--rs-color-background-info, #e6f6fb) !important;
312
+ .rs-account-selector__account.p-button:hover:not(:disabled) {
313
+ background: var(--rs-color-background-info, #e6f6fb) !important;
314
314
  color: inherit;
315
315
  }
316
- .rs-account-selector__account.p-button:disabled {
317
- cursor: default;
316
+ .rs-account-selector__account.p-button:disabled {
317
+ cursor: default;
318
318
  opacity: 1;
319
319
  }
320
- .rs-account-selector__account--active .rs-account-selector__account-label {
320
+ .rs-account-selector__account--active .rs-account-selector__account-label {
321
321
  font-weight: 600;
322
322
  }
323
- .rs-account-selector__account--active .rs-account-selector__account-avatar {
324
- outline: 2px solid var(--rs-account-selector-active);
323
+ .rs-account-selector__account--active .rs-account-selector__account-avatar {
324
+ outline: 2px solid var(--rs-account-selector-active);
325
325
  outline-offset: 2px;
326
326
  }
327
- .rs-account-selector__account--active .rs-account-selector__account-trailing {
327
+ .rs-account-selector__account--active .rs-account-selector__account-trailing {
328
328
  opacity: 0.25;
329
329
  }
330
- .rs-account-selector__account-info {
331
- display: grid;
332
- gap: 2px;
330
+ .rs-account-selector__account-info {
331
+ display: grid;
332
+ gap: 2px;
333
333
  min-width: 0;
334
334
  }
335
- .rs-account-selector__account-label {
336
- line-height: 1.35;
337
- overflow: hidden;
338
- text-overflow: ellipsis;
335
+ .rs-account-selector__account-label {
336
+ line-height: 1.35;
337
+ overflow: hidden;
338
+ text-overflow: ellipsis;
339
339
  white-space: nowrap;
340
340
  }
341
- .rs-account-selector__account-state,
342
- .rs-account-selector__state {
343
- color: var(--rs-account-selector-muted);
344
- font-size: 0.8125rem;
341
+ .rs-account-selector__account-state,
342
+ .rs-account-selector__state {
343
+ color: var(--rs-account-selector-muted);
344
+ font-size: 0.8125rem;
345
345
  line-height: 1.35;
346
346
  }
347
- .rs-account-selector__account-state--active {
347
+ .rs-account-selector__account-state--active {
348
348
  color: var(--rs-account-selector-active);
349
349
  }
350
- .rs-account-selector__account-state--inactive {
350
+ .rs-account-selector__account-state--inactive {
351
351
  color: var(--rs-account-selector-muted);
352
352
  }
353
- .rs-account-selector__account-trailing {
354
- align-items: center;
355
- color: var(--rs-color-icon-secondary, #000000);
356
- display: inline-flex;
353
+ .rs-account-selector__account-trailing {
354
+ align-items: center;
355
+ color: var(--rs-color-icon-secondary, #000000);
356
+ display: inline-flex;
357
357
  justify-content: center;
358
358
  }
359
- .rs-account-selector__state {
360
- padding: 8px 16px;
359
+ .rs-account-selector__state {
360
+ padding: 8px 16px;
361
361
  text-align: center;
362
362
  }
363
363
  @media (max-width: 768px) {
364
- .rs-account-selector {
364
+ .rs-account-selector {
365
365
  width: min(100vw - 32px, var(--rs-account-selector-width));
366
366
  }
367
- }
368
- .rs-sidebar {
369
- --rs-sidebar-background: var(--rs-color-surface-primary, #ffffff);
370
- --rs-sidebar-border: var(--rs-color-stroke-default, #d1d1d1);
371
- --rs-sidebar-color: var(--rs-color-text-primary, #000000);
372
- --rs-sidebar-muted: var(--rs-color-text-secondary, #909090);
373
- --rs-sidebar-active: var(--rs-color-text-button-tertiary, #48a0d4);
374
- --rs-sidebar-hover: var(--rs-color-button-blue-surface, #e6f6fb);
375
- --rs-sidebar-width-collapsed: 75px;
376
- --rs-sidebar-width-expanded: 286px;
377
-
378
- background: var(--rs-sidebar-background);
379
- border-right: 1px solid var(--rs-sidebar-border);
380
- box-sizing: border-box;
381
- color: var(--rs-sidebar-color);
382
- display: flex;
383
- flex-direction: column;
384
- flex-shrink: 0;
385
- font-family: var(--rs-font-family, "Inter", sans-serif);
386
- font-size: 16px;
387
- font-weight: 400;
388
- gap: 52px;
389
- height: 100%;
390
- overflow: hidden;
391
- transition: width 0.3s ease-in-out;
392
- will-change: width;
367
+ }
368
+ .rs-sidebar {
369
+ --rs-sidebar-background: var(--rs-color-surface-primary, #ffffff);
370
+ --rs-sidebar-border: var(--rs-color-stroke-default, #d1d1d1);
371
+ --rs-sidebar-color: var(--rs-color-text-primary, #000000);
372
+ --rs-sidebar-muted: var(--rs-color-text-secondary, #909090);
373
+ --rs-sidebar-active: var(--rs-color-text-button-tertiary, #48a0d4);
374
+ --rs-sidebar-hover: var(--rs-color-button-blue-surface, #e6f6fb);
375
+ --rs-sidebar-width-collapsed: 75px;
376
+ --rs-sidebar-width-expanded: 286px;
377
+
378
+ background: var(--rs-sidebar-background);
379
+ border-right: 1px solid var(--rs-sidebar-border);
380
+ box-sizing: border-box;
381
+ color: var(--rs-sidebar-color);
382
+ display: flex;
383
+ flex-direction: column;
384
+ flex-shrink: 0;
385
+ font-family: var(--rs-font-family, "Inter", sans-serif);
386
+ font-size: 16px;
387
+ font-weight: 400;
388
+ gap: 52px;
389
+ height: 100%;
390
+ overflow: hidden;
391
+ transition: width 0.3s ease-in-out;
392
+ will-change: width;
393
393
  width: var(--rs-sidebar-width-collapsed);
394
394
  }
395
- .rs-sidebar--pc {
396
- --rs-sidebar-active: var(--rs-color-icon-project-pc, #014a9f);
395
+ .rs-sidebar--pc {
396
+ --rs-sidebar-active: var(--rs-color-icon-project-pc, #014a9f);
397
397
  --rs-sidebar-hover: var(--rs-color-darkblue-100, #e5ecf5);
398
398
  }
399
- .rs-sidebar--alta {
400
- --rs-sidebar-active: var(--rs-color-icon-project-alta, #65ac1e);
399
+ .rs-sidebar--alta {
400
+ --rs-sidebar-active: var(--rs-color-icon-project-alta, #65ac1e);
401
401
  --rs-sidebar-hover: var(--rs-color-green-100, #edf7e6);
402
402
  }
403
- .rs-sidebar--cc {
404
- --rs-sidebar-active: var(--rs-color-icon-project-cc, #49a0d4);
403
+ .rs-sidebar--cc {
404
+ --rs-sidebar-active: var(--rs-color-icon-project-cc, #49a0d4);
405
405
  --rs-sidebar-hover: var(--rs-color-blue-100, #e6f6fb);
406
406
  }
407
- .rs-sidebar--pog {
408
- --rs-sidebar-active: var(--rs-color-icon-project-pog, #007c2f);
407
+ .rs-sidebar--pog {
408
+ --rs-sidebar-active: var(--rs-color-icon-project-pog, #007c2f);
409
409
  --rs-sidebar-hover: var(--rs-color-navygreen-100, #e5f1ea);
410
410
  }
411
- .rs-sidebar--cyo {
412
- --rs-sidebar-active: var(--rs-color-icon-project-cyo, #49a0d4);
411
+ .rs-sidebar--cyo {
412
+ --rs-sidebar-active: var(--rs-color-icon-project-cyo, #49a0d4);
413
413
  --rs-sidebar-hover: var(--rs-color-blue-100, #e6f6fb);
414
414
  }
415
- .rs-sidebar--expanded,
416
- .rs-sidebar--mobile-open {
417
- overflow: visible;
415
+ .rs-sidebar--expanded,
416
+ .rs-sidebar--mobile-open {
417
+ overflow: visible;
418
418
  width: var(--rs-sidebar-width-expanded);
419
419
  }
420
- .rs-sidebar__header {
421
- align-items: center;
422
- position: relative;
423
- box-sizing: border-box;
424
- display: flex;
425
- gap: 10px;
426
- justify-content: flex-start;
420
+ .rs-sidebar__header {
421
+ align-items: center;
422
+ position: relative;
423
+ box-sizing: border-box;
424
+ display: flex;
425
+ gap: 10px;
426
+ justify-content: flex-start;
427
427
  padding: 0;
428
428
  }
429
- .rs-sidebar__brand {
430
- align-items: center;
431
- display: flex;
432
- color: var(--rs-sidebar-active);
433
- flex: 1;
434
- gap: 10px;
435
- min-width: 0;
429
+ .rs-sidebar__brand {
430
+ align-items: center;
431
+ display: flex;
432
+ color: var(--rs-sidebar-active);
433
+ flex: 1;
434
+ gap: 10px;
435
+ min-width: 0;
436
436
  padding: 32px 24px;
437
437
  }
438
- .rs-sidebar__module-trigger {
439
- align-items: center;
440
- background: transparent;
441
- border: 0;
442
- color: inherit;
443
- cursor: pointer;
444
- display: inline-flex;
445
- justify-content: flex-start;
446
- font: inherit;
447
- gap: 10px;
448
- min-width: 0;
449
- appearance: none;
450
- -webkit-appearance: none;
451
- padding: 0;
452
- text-align: left;
438
+ .rs-sidebar__module-trigger {
439
+ align-items: center;
440
+ background: transparent;
441
+ border: 0;
442
+ color: inherit;
443
+ cursor: pointer;
444
+ display: inline-flex;
445
+ justify-content: flex-start;
446
+ font: inherit;
447
+ gap: 10px;
448
+ min-width: 0;
449
+ appearance: none;
450
+ -webkit-appearance: none;
451
+ padding: 0;
452
+ text-align: left;
453
453
  width: 100%;
454
454
  }
455
- .rs-sidebar__module-trigger:hover:not(:disabled),
456
- .rs-sidebar__module-trigger:active:not(:disabled) {
457
- background: transparent;
455
+ .rs-sidebar__module-trigger:hover:not(:disabled),
456
+ .rs-sidebar__module-trigger:active:not(:disabled) {
457
+ background: transparent;
458
458
  color: inherit;
459
459
  }
460
- .rs-sidebar__module-trigger:focus-visible {
461
- outline: 2px solid var(--rs-color-stroke-focused, #48a0d4);
460
+ .rs-sidebar__module-trigger:focus-visible {
461
+ outline: 2px solid var(--rs-color-stroke-focused, #48a0d4);
462
462
  outline-offset: 2px;
463
463
  }
464
- .rs-sidebar--expanded .rs-sidebar__module-chevron,
465
- .rs-sidebar--mobile-open .rs-sidebar__module-chevron {
464
+ .rs-sidebar--expanded .rs-sidebar__module-chevron,
465
+ .rs-sidebar--mobile-open .rs-sidebar__module-chevron {
466
466
  margin-left: auto;
467
467
  }
468
- .rs-sidebar__module-trigger > .rs-icon:first-child {
468
+ .rs-sidebar__module-trigger > .rs-icon:first-child {
469
469
  margin-left: 0;
470
470
  }
471
- .rs-sidebar__brand > .rs-icon:first-child {
471
+ .rs-sidebar__brand > .rs-icon:first-child {
472
472
  margin-left: 0;
473
473
  }
474
- .rs-sidebar__title,
475
- .rs-sidebar__item-label,
476
- .rs-sidebar__item-chevron,
477
- .rs-sidebar__module-chevron {
478
- max-width: 0;
479
- opacity: 0;
480
- overflow: hidden;
481
- transition:
482
- max-width 0.3s ease-in-out,
483
- opacity 0.3s ease-in-out;
474
+ .rs-sidebar__title,
475
+ .rs-sidebar__item-label,
476
+ .rs-sidebar__item-chevron,
477
+ .rs-sidebar__module-chevron {
478
+ max-width: 0;
479
+ opacity: 0;
480
+ overflow: hidden;
481
+ transition:
482
+ max-width 0.3s ease-in-out,
483
+ opacity 0.3s ease-in-out;
484
484
  white-space: nowrap;
485
485
  }
486
- .rs-sidebar--expanded .rs-sidebar__title,
487
- .rs-sidebar--expanded .rs-sidebar__item-label,
488
- .rs-sidebar--expanded .rs-sidebar__item-chevron,
489
- .rs-sidebar--expanded .rs-sidebar__module-chevron,
490
- .rs-sidebar--mobile-open .rs-sidebar__title,
491
- .rs-sidebar--mobile-open .rs-sidebar__item-label,
492
- .rs-sidebar--mobile-open .rs-sidebar__item-chevron,
493
- .rs-sidebar--mobile-open .rs-sidebar__module-chevron {
494
- max-width: 220px;
486
+ .rs-sidebar--expanded .rs-sidebar__title,
487
+ .rs-sidebar--expanded .rs-sidebar__item-label,
488
+ .rs-sidebar--expanded .rs-sidebar__item-chevron,
489
+ .rs-sidebar--expanded .rs-sidebar__module-chevron,
490
+ .rs-sidebar--mobile-open .rs-sidebar__title,
491
+ .rs-sidebar--mobile-open .rs-sidebar__item-label,
492
+ .rs-sidebar--mobile-open .rs-sidebar__item-chevron,
493
+ .rs-sidebar--mobile-open .rs-sidebar__module-chevron {
494
+ max-width: 220px;
495
495
  opacity: 1;
496
496
  }
497
- .rs-sidebar__title {
498
- color: var(--rs-sidebar-color);
499
- font-family: var(--rs-font-family, "Inter", sans-serif);
500
- font-weight: 400;
501
- line-height: 1;
497
+ .rs-sidebar__title {
498
+ color: var(--rs-sidebar-color);
499
+ font-family: var(--rs-font-family, "Inter", sans-serif);
500
+ font-weight: 400;
501
+ line-height: 1;
502
502
  text-overflow: ellipsis;
503
503
  }
504
- .rs-sidebar__module-menu.p-menu {
505
- background: var(--rs-sidebar-background);
506
- border: 1px solid var(--rs-sidebar-border);
507
- border-radius: 4px;
508
- box-shadow: 0 8px 24px rgb(0 0 0 / 18%);
509
- left: 16px;
510
- min-width: calc(var(--rs-sidebar-width-expanded) - 32px);
511
- overflow: hidden;
512
- padding: 0;
513
- position: absolute;
514
- top: 88px;
504
+ .rs-sidebar__module-menu.p-menu {
505
+ background: var(--rs-sidebar-background);
506
+ border: 1px solid var(--rs-sidebar-border);
507
+ border-radius: 4px;
508
+ box-shadow: 0 8px 24px rgb(0 0 0 / 18%);
509
+ left: 16px;
510
+ min-width: calc(var(--rs-sidebar-width-expanded) - 32px);
511
+ overflow: hidden;
512
+ padding: 0;
513
+ position: absolute;
514
+ top: 88px;
515
515
  z-index: 20;
516
516
  }
517
- .rs-sidebar__module-menu .p-menu-list {
518
- gap: 0;
517
+ .rs-sidebar__module-menu .p-menu-list {
518
+ gap: 0;
519
519
  padding: 0;
520
520
  }
521
- .rs-sidebar__module-option .p-menu-item-content {
522
- color: var(--rs-sidebar-color);
521
+ .rs-sidebar__module-option .p-menu-item-content {
522
+ color: var(--rs-sidebar-color);
523
523
  border-radius: 0;
524
524
  }
525
- .rs-sidebar__module-option .p-menu-item-link {
526
- font-family: inherit;
527
- font-size: inherit;
528
- line-height: 1;
529
- min-height: 38px;
525
+ .rs-sidebar__module-option .p-menu-item-link {
526
+ font-family: inherit;
527
+ font-size: inherit;
528
+ line-height: 1;
529
+ min-height: 38px;
530
530
  padding: 10px 14px;
531
531
  }
532
- .rs-sidebar__module-option:not(.p-disabled) .p-menu-item-content:hover,
533
- .rs-sidebar__module-option--active .p-menu-item-content {
534
- background: var(--rs-sidebar-hover);
532
+ .rs-sidebar__module-option:not(.p-disabled) .p-menu-item-content:hover,
533
+ .rs-sidebar__module-option--active .p-menu-item-content {
534
+ background: var(--rs-sidebar-hover);
535
535
  color: var(--rs-sidebar-color);
536
536
  }
537
- .rs-sidebar__module-option--disabled .p-menu-item-content {
538
- color: var(--rs-sidebar-muted);
537
+ .rs-sidebar__module-option--disabled .p-menu-item-content {
538
+ color: var(--rs-sidebar-muted);
539
539
  cursor: not-allowed;
540
540
  }
541
- .rs-sidebar__module-option--disabled .p-menu-item-content:hover {
541
+ .rs-sidebar__module-option--disabled .p-menu-item-content:hover {
542
542
  background: transparent;
543
543
  }
544
- .rs-sidebar__module-option.p-focus .p-menu-item-content {
545
- background: var(--rs-sidebar-hover);
544
+ .rs-sidebar__module-option.p-focus .p-menu-item-content {
545
+ background: var(--rs-sidebar-hover);
546
546
  color: var(--rs-sidebar-color);
547
547
  }
548
- .rs-sidebar__module-option.p-focus .p-menu-item-link {
549
- outline: 2px solid var(--rs-color-stroke-focused, #48a0d4);
548
+ .rs-sidebar__module-option.p-focus .p-menu-item-link {
549
+ outline: 2px solid var(--rs-color-stroke-focused, #48a0d4);
550
550
  outline-offset: -2px;
551
551
  }
552
- .rs-sidebar__header-button {
553
- align-items: center;
554
- background: transparent;
555
- border: 0;
556
- border-radius: 999px;
557
- color: var(--rs-color-icon-secondary, #000000);
558
- cursor: pointer;
559
- display: inline-flex;
560
- flex: 0 0 auto;
561
- justify-content: center;
562
- appearance: none;
563
- -webkit-appearance: none;
564
- min-height: 24px;
565
- min-width: 24px;
552
+ .rs-sidebar__header-button {
553
+ align-items: center;
554
+ background: transparent;
555
+ border: 0;
556
+ border-radius: 999px;
557
+ color: var(--rs-color-icon-secondary, #000000);
558
+ cursor: pointer;
559
+ display: inline-flex;
560
+ flex: 0 0 auto;
561
+ justify-content: center;
562
+ appearance: none;
563
+ -webkit-appearance: none;
564
+ min-height: 24px;
565
+ min-width: 24px;
566
566
  padding: 2px;
567
567
  }
568
- .rs-sidebar__header-button:hover:not(:disabled),
569
- .rs-sidebar__header-button:active:not(:disabled) {
570
- background: var(--rs-sidebar-hover) !important;
568
+ .rs-sidebar__header-button:hover:not(:disabled),
569
+ .rs-sidebar__header-button:active:not(:disabled) {
570
+ background: var(--rs-sidebar-hover) !important;
571
571
  color: var(--rs-color-icon-secondary, #000000);
572
572
  }
573
- .rs-sidebar__header-button:focus-visible,
574
- .rs-sidebar__item:focus-visible {
575
- outline: 2px solid var(--rs-color-stroke-focused, #48a0d4);
573
+ .rs-sidebar__header-button:focus-visible,
574
+ .rs-sidebar__item:focus-visible {
575
+ outline: 2px solid var(--rs-color-stroke-focused, #48a0d4);
576
576
  outline-offset: -2px;
577
577
  }
578
- .rs-sidebar__content {
579
- display: flex;
580
- flex-direction: column;
581
- flex: 1;
578
+ .rs-sidebar__content {
579
+ display: flex;
580
+ flex-direction: column;
581
+ flex: 1;
582
582
  min-height: 0;
583
583
  }
584
- .rs-sidebar__nav {
585
- flex: 1;
584
+ .rs-sidebar__nav {
585
+ flex: 1;
586
586
  min-height: 0;
587
587
  }
588
- .rs-sidebar__list {
589
- list-style: none;
590
- margin: 0;
588
+ .rs-sidebar__list {
589
+ list-style: none;
590
+ margin: 0;
591
591
  padding: 0;
592
592
  }
593
- .rs-sidebar__item {
594
- align-items: center;
595
- background: transparent;
596
- border: 0;
597
- border-right: 4px solid transparent;
598
- box-sizing: border-box;
599
- color: var(--rs-sidebar-active);
600
- cursor: pointer;
601
- display: flex;
602
- justify-content: flex-start;
603
- font: inherit;
604
- font-weight: 300;
605
- gap: 10px;
606
- appearance: none;
607
- -webkit-appearance: none;
608
- padding: 10px 24px;
609
- text-align: left;
593
+ .rs-sidebar__item {
594
+ align-items: center;
595
+ background: transparent;
596
+ border: 0;
597
+ border-right: 4px solid transparent;
598
+ box-sizing: border-box;
599
+ color: var(--rs-sidebar-active);
600
+ cursor: pointer;
601
+ display: flex;
602
+ justify-content: flex-start;
603
+ font: inherit;
604
+ font-weight: 300;
605
+ gap: 10px;
606
+ appearance: none;
607
+ -webkit-appearance: none;
608
+ padding: 10px 24px;
609
+ text-align: left;
610
610
  width: 100%;
611
611
  }
612
- .rs-sidebar__item:not(.rs-sidebar__item--footer):hover:not(:disabled),
613
- .rs-sidebar__item:not(.rs-sidebar__item--footer):active:not(:disabled) {
612
+ .rs-sidebar__item:not(.rs-sidebar__item--footer):hover:not(:disabled),
613
+ .rs-sidebar__item:not(.rs-sidebar__item--footer):active:not(:disabled) {
614
614
  background: var(--rs-sidebar-hover) !important;
615
615
  }
616
- .rs-sidebar__item:disabled {
617
- color: var(--rs-sidebar-muted);
618
- cursor: not-allowed;
616
+ .rs-sidebar__item:disabled {
617
+ color: var(--rs-sidebar-muted);
618
+ cursor: not-allowed;
619
619
  opacity: 1;
620
620
  }
621
- .rs-sidebar__item--active {
622
- background: var(--rs-sidebar-hover) !important;
621
+ .rs-sidebar__item--active {
622
+ background: var(--rs-sidebar-hover) !important;
623
623
  border-right-color: var(--rs-sidebar-active);
624
624
  }
625
- .rs-sidebar__footer {
626
- align-items: center;
627
- display: flex;
625
+ .rs-sidebar__footer {
626
+ align-items: center;
627
+ display: flex;
628
628
  margin-top: 52px;
629
629
  }
630
- .rs-sidebar__item--footer {
631
- color: var(--rs-sidebar-color);
630
+ .rs-sidebar__item--footer {
631
+ color: var(--rs-sidebar-color);
632
632
  padding: 32px 24px;
633
633
  }
634
- .rs-sidebar__item--footer .rs-sidebar__item-icon {
634
+ .rs-sidebar__item--footer .rs-sidebar__item-icon {
635
635
  color: inherit;
636
636
  }
637
- .rs-sidebar__item-icon {
638
- flex: 0 0 auto;
639
- color: var(--rs-sidebar-active);
640
- margin-left: 0;
641
- width: 24px;
637
+ .rs-sidebar__item-icon {
638
+ flex: 0 0 auto;
639
+ color: var(--rs-sidebar-active);
640
+ margin-left: 0;
641
+ width: 24px;
642
642
  height: 24px;
643
643
  }
644
- .rs-sidebar__brand .rs-icon {
645
- width: 24px;
644
+ .rs-sidebar__brand .rs-icon {
645
+ width: 24px;
646
646
  height: 24px;
647
647
  }
648
- .rs-sidebar__item-label {
649
- color: var(--rs-sidebar-color);
650
- font-family: var(--rs-font-family, "Inter", sans-serif);
651
- min-width: 0;
648
+ .rs-sidebar__item-label {
649
+ color: var(--rs-sidebar-color);
650
+ font-family: var(--rs-font-family, "Inter", sans-serif);
651
+ min-width: 0;
652
652
  text-overflow: ellipsis;
653
653
  }
654
- .rs-sidebar__item-chevron {
654
+ .rs-sidebar__item-chevron {
655
655
  margin-left: auto;
656
656
  }
657
- .rs-sidebar--mobile-open {
658
- border-right: 0;
659
- bottom: 0;
660
- gap: clamp(8px, 4vh, 52px);
661
- left: 0;
662
- position: fixed;
663
- right: 0;
664
- top: 0;
665
- width: 100%;
657
+ .rs-sidebar--mobile-open {
658
+ border-right: 0;
659
+ bottom: 0;
660
+ gap: clamp(8px, 4vh, 52px);
661
+ left: 0;
662
+ position: fixed;
663
+ right: 0;
664
+ top: 0;
665
+ width: 100%;
666
666
  z-index: 10000;
667
667
  }
668
- .rs-sidebar--mobile-open .rs-sidebar__module-menu {
669
- left: 16px;
670
- min-width: min(320px, calc(100% - 32px));
668
+ .rs-sidebar--mobile-open .rs-sidebar__module-menu {
669
+ left: 16px;
670
+ min-width: min(320px, calc(100% - 32px));
671
671
  top: 88px;
672
672
  }
673
- .rs-sidebar--mobile-open .rs-sidebar__item {
674
- font-size: 16px;
673
+ .rs-sidebar--mobile-open .rs-sidebar__item {
674
+ font-size: 16px;
675
675
  padding: 20px 24px;
676
676
  }
677
- .rs-sidebar--mobile-open .rs-sidebar__item--footer {
677
+ .rs-sidebar--mobile-open .rs-sidebar__item--footer {
678
678
  padding: 32px 24px;
679
- }
680
- .rs-icon-picker {
681
- position: relative;
682
- width: 100%;
679
+ }
680
+ .rs-icon-picker {
681
+ position: relative;
682
+ width: 100%;
683
683
  font-family: var(--rs-font-family, inherit);
684
684
  }
685
- .rs-icon-picker__trigger {
686
- border: 1px solid var(--rs-color-gray-300, #d1d1d1);
687
- padding: 10px;
688
- border-radius: 8px;
689
- background-color: var(--rs-color-white-500, #ffffff);
690
- cursor: pointer;
691
- display: flex;
692
- align-items: center;
693
- justify-content: space-between;
685
+ .rs-icon-picker__trigger {
686
+ border: 1px solid var(--rs-color-gray-300, #d1d1d1);
687
+ padding: 10px;
688
+ border-radius: 8px;
689
+ background-color: var(--rs-color-white-500, #ffffff);
690
+ cursor: pointer;
691
+ display: flex;
692
+ align-items: center;
693
+ justify-content: space-between;
694
694
  outline: none;
695
695
  }
696
- .rs-icon-picker__trigger--invalid {
696
+ .rs-icon-picker__trigger--invalid {
697
697
  border-color: var(--rs-color-stroke-error, #d32f2f);
698
698
  }
699
- .rs-icon-picker__value {
700
- display: flex;
701
- align-items: center;
699
+ .rs-icon-picker__value {
700
+ display: flex;
701
+ align-items: center;
702
702
  gap: 8px;
703
703
  }
704
- .rs-icon-picker__placeholder {
704
+ .rs-icon-picker__placeholder {
705
705
  color: var(--rs-color-text-secondary, #909090);
706
706
  }
707
- .rs-icon-picker__dropdown {
708
- position: absolute;
709
- top: calc(100% + 4px);
710
- left: 0;
711
- width: 100%;
712
- background: var(--rs-color-surface-primary, #ffffff);
713
- border: 1px solid var(--rs-color-gray-300, #d1d1d1);
714
- border-radius: 8px;
715
- box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
716
- z-index: 999;
717
- padding: 8px;
718
- display: flex;
719
- flex-direction: column;
707
+ .rs-icon-picker__dropdown {
708
+ position: absolute;
709
+ top: calc(100% + 4px);
710
+ left: 0;
711
+ width: 100%;
712
+ background: var(--rs-color-surface-primary, #ffffff);
713
+ border: 1px solid var(--rs-color-gray-300, #d1d1d1);
714
+ border-radius: 8px;
715
+ box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
716
+ z-index: 999;
717
+ padding: 8px;
718
+ display: flex;
719
+ flex-direction: column;
720
720
  gap: 8px;
721
721
  }
722
- .rs-icon-picker__search {
723
- width: 100%;
724
- padding: 8px 10px;
725
- border: 1px solid var(--rs-color-gray-300, #d1d1d1);
726
- border-radius: 6px;
727
- font-size: 13px;
728
- outline: none;
722
+ .rs-icon-picker__search {
723
+ width: 100%;
724
+ padding: 8px 10px;
725
+ border: 1px solid var(--rs-color-gray-300, #d1d1d1);
726
+ border-radius: 6px;
727
+ font-size: 13px;
728
+ outline: none;
729
729
  box-sizing: border-box;
730
730
  }
731
- .rs-icon-picker__grid {
732
- display: flex;
733
- flex-wrap: wrap;
734
- gap: 4px;
735
- max-height: 220px;
736
- overflow-y: auto;
731
+ .rs-icon-picker__grid {
732
+ display: flex;
733
+ flex-wrap: wrap;
734
+ gap: 4px;
735
+ max-height: 220px;
736
+ overflow-y: auto;
737
737
  overflow-x: hidden;
738
738
  }
739
- .rs-icon-picker__item {
740
- font-size: 28px;
741
- padding: 8px;
742
- display: flex;
743
- align-items: center;
744
- justify-content: center;
745
- border-radius: 4px;
739
+ .rs-icon-picker__item {
740
+ font-size: 28px;
741
+ padding: 8px;
742
+ display: flex;
743
+ align-items: center;
744
+ justify-content: center;
745
+ border-radius: 4px;
746
746
  cursor: pointer;
747
747
  }
748
- .rs-icon-picker__item:hover {
748
+ .rs-icon-picker__item:hover {
749
749
  background-color: var(--rs-color-gray-100, #f5f5f5);
750
750
  }
751
- .rs-icon-picker__item--selected {
751
+ .rs-icon-picker__item--selected {
752
752
  background-color: var(--rs-color-button-blue-surface, #e3f2fd);
753
- }
753
+ }