@planningcenter/topbar 10.19.0-qa-683.0 → 10.19.0-qa-712.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/README.md +1 -13
  2. package/dist/topbar.css +187 -142
  3. package/dist/topbar.css.map +1 -1
  4. package/dist/topbar.js +260 -360
  5. package/dist/topbar.js.map +1 -1
  6. package/dist/topbar.modern.js +264 -365
  7. package/dist/topbar.modern.js.map +1 -1
  8. package/dist/topbar.module.js +264 -365
  9. package/dist/topbar.module.js.map +1 -1
  10. package/dist/topbar.umd.js +261 -362
  11. package/dist/topbar.umd.js.map +1 -1
  12. package/dist/types/index.d.ts +24 -4
  13. package/package.json +22 -18
package/README.md CHANGED
@@ -9,19 +9,6 @@ In general, it is responsible for a number of things that are shared across our
9
9
  - Admin notifications inbox dropdown (via [`NotificationsMenu`](./modules/components/notifications_menu.tsx))
10
10
  - Platform and/or product announcements (via [`PlatformAnnouncements`](./modules/platform_announcements.jsx) and [`ProductAnnouncements`](./moduels/product_announcements))
11
11
 
12
- > [!IMPORTANT]
13
- >
14
- > ## Classic vs Phoenix
15
- >
16
- > To support both the current Classic version as well as the new Phoenix version, we have two living versions in the following directories:
17
- >
18
- > - Phoenix: `./`
19
- > - Classic `/classic` (a duplicate of the latest changes)
20
- >
21
- > This allows us to actively push code to `main` having Phoenix behind feature-flipping code (handled by `PCO::Firebird`).
22
- >
23
- > This means changes (e.g. bug fixes, new code) not exclusive to Phoenix must be made in both places.
24
-
25
12
  ## Usage
26
13
 
27
14
  To a limited extent, each product can customize the display of these items as they see fit.
@@ -222,3 +209,4 @@ If you like history, here are the initial release notes with technical considera
222
209
  - [Publishing](https://github.com/planningcenter/publishing/blob/master/app/javascript/src/PublishingTopbar.js)
223
210
  - [Registrations](https://github.com/planningcenter/registrations/blob/master/app/javascript/components/registrations_topbar.jsx)
224
211
  - [Services](https://github.com/planningcenter/services/blob/master/app/javascript/components/ServicesTopbar.js)
212
+ DUMMY
package/dist/topbar.css CHANGED
@@ -20,7 +20,7 @@
20
20
  --toolbar-inner-width: 48px;
21
21
  --toolbar-drawer-width: 360px;
22
22
  --toolbar-navbar-height: 56px;
23
- --content-wrap-border-color: hsl(0 0% 0% / 0.08);
23
+ --content-wrap-border-color: hsla(0, 0%, 0%, 0.08);
24
24
  --content-wrap-shadow-dimensions: 0 -1px 0 0;
25
25
  }
26
26
 
@@ -34,7 +34,7 @@
34
34
  --topbar-nav-link-background-color-hover: var(--t-fill-color-transparency-light-020);
35
35
  --topbar-nav-link-background-color-active: var(--t-fill-color-transparency-light-030);
36
36
  --topbar-nav-link-border-color-active: var(--t-fill-color-transparency-light-010);
37
- --content-wrap-border-color: hsl(0 0% 100% / 0.04);
37
+ --content-wrap-border-color: hsla(0, 0%, 100%, 0.04);
38
38
  }
39
39
 
40
40
  @media (prefers-color-scheme: dark) {
@@ -42,7 +42,7 @@
42
42
  --topbar-nav-link-background-color-hover: var(--t-fill-color-transparency-light-020);
43
43
  --topbar-nav-link-background-color-active: var(--t-fill-color-transparency-light-030);
44
44
  --topbar-nav-link-border-color-active: var(--t-fill-color-transparency-light-010);
45
- --content-wrap-border-color: hsl(0 0% 100% / 0.04);
45
+ --content-wrap-border-color: hsla(0, 0%, 100%, 0.04);
46
46
  }
47
47
  }
48
48
  /*
@@ -52,8 +52,7 @@ prevent .top-wrap from covering them.
52
52
 
53
53
  Caused by products overriding .topbar-wrap’s z-index.
54
54
  */
55
- .page-wrap:has(div[class^=appmenu-layer][style*="display: block"],
56
- div[data-small-topbar-user-profile-menu-wrap][style*="display: block"]) .topbar-wrap {
55
+ .page-wrap:has(div[class^=appmenu-layer][style*="display: block"]) .topbar-wrap {
57
56
  z-index: initial !important;
58
57
  }
59
58
 
@@ -65,19 +64,96 @@ div[data-small-topbar-user-profile-menu-wrap][style*="display: block"]) .topbar-
65
64
  .hide-scrollbar::-webkit-scrollbar {
66
65
  display: none; /* Chrome, Safari, and Opera */
67
66
  }
67
+
68
+ :root[data-app-context=native] {
69
+ --toolbar-navbar-height: 0;
70
+ }
71
+
72
+ :root[data-app-context=native] .topbar-wrap {
73
+ display: none;
74
+ }
75
+
76
+ :root[data-app-context=native] .toolbar-wrap {
77
+ overflow: hidden;
78
+ }
79
+
80
+ @media screen and (min-width: 600px) {
81
+ :root[data-app-context=native] {
82
+ --toolbar-width: 0px;
83
+ --topbar-height: 0px;
84
+ --toolbar-drawer-width: 48vw;
85
+ }
86
+ :root[data-app-context=native] .content-wrap {
87
+ margin: 0 !important;
88
+ border-radius: 0;
89
+ }
90
+ :root[data-app-context=native] .toolbar-wrap {
91
+ overflow: visible;
92
+ }
93
+ }
94
+ .accessibility-toolbar-jgjUG {
95
+ --topbar-accessibility-toolbar-opacity: 0;
96
+ --topbar-accessibility-toolbar-translate-y: 4px;
97
+ --topbar-accessibility-toolbar-pointer-events: none;
98
+ --topbar-accessibility-toolbar-transition: none;
99
+ --topbar-accessibility-toolbar-min-width: 100%;
100
+
101
+ position: absolute;
102
+ top: var(--t-spacing-4);
103
+ left: 50%;
104
+ transform: translate(-50%, var(--topbar-accessibility-toolbar-translate-y));
105
+ z-index: 1000;
106
+
107
+ padding: var(--t-spacing-2);
108
+ width: max-content;
109
+ min-width: var(--topbar-accessibility-toolbar-min-width);
110
+ max-width: 100vw;
111
+ display: flex;
112
+ justify-content: center;
113
+ gap: var(--t-spacing-2);
114
+ flex-wrap: wrap;
115
+
116
+ border-radius: var(--t-border-radius-md);
117
+ background: var(--t-surface-color-card);
118
+ box-shadow: 0 4px 18px 0 var(--t-fill-color-transparency-dark-020);
119
+ opacity: var(--topbar-accessibility-toolbar-opacity);
120
+
121
+ pointer-events: var(--topbar-accessibility-toolbar-pointer-events);
122
+ transition: var(--topbar-accessibility-toolbar-transition);
123
+ }
124
+
125
+ .accessibility-toolbar-jgjUG:focus-within {
126
+ --topbar-accessibility-toolbar-translate-y: 0;
127
+ --topbar-accessibility-toolbar-opacity: 1;
128
+ --topbar-accessibility-toolbar-pointer-events: auto;
129
+ --topbar-accessibility-toolbar-transition: opacity 160ms ease-out, transform 120ms ease-out;
130
+ }
131
+
132
+ #main-content:focus-visible {
133
+ outline: none;
134
+ }
135
+
136
+ @media (min-width: 600px) {
137
+ .accessibility-toolbar-jgjUG {
138
+ --topbar-accessibility-toolbar-min-width: 0;
139
+ }
140
+
141
+ .accessibility-toolbar-jgjUG:has(:only-child) {
142
+ --topbar-accessibility-toolbar-min-width: 300px;
143
+ }
144
+ }
68
145
  .announcement-pI5tM {
69
146
  font-size: var(--t-font-size-sm);
70
- color: hsl(0 0% 94%); /* TODO: Replace with static tokens when we get them */
71
- background-color: hsl(0 0% 0% / 0.5); /* TODO: Replace with static tokens when we get them */
147
+ color: hsl(0, 0%, 94%); /* TODO: Replace with static tokens when we get them */
148
+ background-color: hsla(0, 0%, 0%, 0.5); /* TODO: Replace with static tokens when we get them */
72
149
  display: flex;
73
150
  align-items: center;
74
151
  padding: var(--t-spacing-2);
75
- -moz-column-gap: var(--t-spacing-3);
76
- column-gap: var(--t-spacing-3);
152
+ column-gap: var(--t-spacing-3);
77
153
  box-sizing: border-box;
78
154
  }
79
155
  .announcement--platform-EcUn2 {
80
- background-color: hsl(0 0% 0% / 0.6); /* TODO: Replace with static tokens when we get them */
156
+ background-color: hsla(0, 0%, 0%, 0.6); /* TODO: Replace with static tokens when we get them */
81
157
  }
82
158
 
83
159
  .announcement-icon-Ov39- {
@@ -90,8 +166,7 @@ div[data-small-topbar-user-profile-menu-wrap][style*="display: block"]) .topbar-
90
166
  display: flex;
91
167
  align-items: center;
92
168
  justify-content: space-between;
93
- -moz-column-gap: var(--t-spacing-3);
94
- column-gap: var(--t-spacing-3);
169
+ column-gap: var(--t-spacing-3);
95
170
  }
96
171
 
97
172
  .announcement-pI5tM a {
@@ -116,16 +191,12 @@ div[data-small-topbar-user-profile-menu-wrap][style*="display: block"]) .topbar-
116
191
  cursor: pointer;
117
192
  padding: var(--t-spacing-1);
118
193
  margin: calc(var(--t-spacing-1) * -1);
119
- -webkit-appearance: none;
120
- -moz-appearance: none;
121
- appearance: none;
194
+ appearance: none;
122
195
  }
123
196
 
124
197
  .unbutton-lEbTR {
125
198
  font-family: inherit;
126
- -webkit-appearance: none;
127
- -moz-appearance: none;
128
- appearance: none;
199
+ appearance: none;
129
200
  background-color: transparent;
130
201
  border: none;
131
202
  cursor: pointer;
@@ -166,7 +237,7 @@ div[data-small-topbar-user-profile-menu-wrap][style*="display: block"]) .topbar-
166
237
  color: var(--t-text-color-default-primary);
167
238
  font-size: var(--t-font-size-sm);
168
239
  font-weight: var(--t-font-weight-medium);
169
- margin-left: var(--t-spacing-quarter);
240
+ margin-left: var(--t-spacing-fourth);
170
241
  }
171
242
 
172
243
  .chevron-RRg9k {
@@ -203,19 +274,17 @@ div[data-small-topbar-user-profile-menu-wrap][style*="display: block"]) .topbar-
203
274
 
204
275
  .popup-nQXYW {
205
276
  background: var(--t-surface-color-card);
206
- box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05),
207
- 0 4px 12px 2px rgba(0, 0, 0, 0.16);
277
+ box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 4px 12px 2px rgba(0, 0, 0, 0.16);
208
278
  border-radius: var(--t-border-radius-lg);
209
279
  position: absolute;
210
-
211
280
  overflow: auto;
212
281
  scrollbar-color: var(--topbar-scrollbar-color);
213
282
  scrollbar-width: var(--topbar-scrollbar-width);
214
-
215
283
  opacity: 0;
216
284
  visibility: hidden;
217
285
  transition: all 120ms ease-in;
218
286
  }
287
+
219
288
  .popup-nQXYW.is-visible-3DAUP {
220
289
  opacity: 1;
221
290
  transition: none;
@@ -227,7 +296,7 @@ div[data-small-topbar-user-profile-menu-wrap][style*="display: block"]) .topbar-
227
296
  font-family: inherit;
228
297
  color: var(--topbar-nav-link-font-color) !important; /* Override product-specific :hover/:visited color */
229
298
  height: var(--topbar-nav-link-height);
230
- border: 1px solid var(--topbar-nav-link-border-color);
299
+ border: var(--t-border-width-default) solid var(--topbar-nav-link-border-color);
231
300
  display: inline-flex;
232
301
  align-items: center;
233
302
  text-decoration: none;
@@ -280,7 +349,7 @@ div[data-small-topbar-user-profile-menu-wrap][style*="display: block"]) .topbar-
280
349
  height: var(--topbar-nav-link-height);
281
350
  background-color: var(--topbar-nav-link-background-color-active);
282
351
  padding: 0 var(--topbar-nav-link-padding-x);
283
- border: 1px solid var(--topbar-nav-link-border-color-active);
352
+ border: var(--t-border-width-default) solid var(--topbar-nav-link-border-color-active);
284
353
  border-radius: var(--topbar-nav-link-border-radius);
285
354
  min-width: var(--t-container-size-md);
286
355
  transition: var(--topbar-nav-link-transition);
@@ -288,9 +357,7 @@ div[data-small-topbar-user-profile-menu-wrap][style*="display: block"]) .topbar-
288
357
  align-items: center;
289
358
  justify-content: center;
290
359
  outline: 0;
291
- -webkit-appearance: none;
292
- -moz-appearance: none;
293
- appearance: none;
360
+ appearance: none;
294
361
  cursor: pointer;
295
362
  }
296
363
 
@@ -321,7 +388,7 @@ div[data-small-topbar-user-profile-menu-wrap][style*="display: block"]) .topbar-
321
388
  }
322
389
 
323
390
  .avatar-tW-wn {
324
- background-color: white;
391
+ background-color: var(--t-fill-color-transparency-light-020);
325
392
  background-position: center;
326
393
  background-size: cover;
327
394
  border-radius: 50%;
@@ -336,9 +403,7 @@ div[data-small-topbar-user-profile-menu-wrap][style*="display: block"]) .topbar-
336
403
  height: 100%;
337
404
  padding-left: var(--t-spacing-2);
338
405
  padding-right: var(--t-spacing-3);
339
- -webkit-appearance: none;
340
- -moz-appearance: none;
341
- appearance: none;
406
+ appearance: none;
342
407
 
343
408
  display: flex;
344
409
  align-items: center;
@@ -346,9 +411,8 @@ div[data-small-topbar-user-profile-menu-wrap][style*="display: block"]) .topbar-
346
411
  }
347
412
 
348
413
  .appmenu-layer-0IQpN {
349
- color: black;
414
+ color: var(--t-text-color-default-headline);
350
415
  background-color: var(--t-fill-color-transparency-dark-static-070);
351
-
352
416
  display: none;
353
417
  position: fixed;
354
418
  top: 0;
@@ -356,12 +420,7 @@ div[data-small-topbar-user-profile-menu-wrap][style*="display: block"]) .topbar-
356
420
  left: 0;
357
421
  right: 0;
358
422
  z-index: 100;
359
-
360
- -webkit-user-select: none;
361
-
362
- -moz-user-select: none;
363
-
364
- user-select: none;
423
+ user-select: none;
365
424
  -webkit-tap-highlight-color: transparent;
366
425
  }
367
426
 
@@ -398,11 +457,11 @@ div[data-small-topbar-user-profile-menu-wrap][style*="display: block"]) .topbar-
398
457
  }
399
458
  .appmenu-list-a--top-RT-2F {
400
459
  min-height: var(--t-container-size-xl);
401
- border-bottom: 1px solid var(--t-border-color-default-base);
460
+ border-bottom: var(--t-border-width-default) solid var(--t-border-color-default-base);
402
461
  }
403
462
  .appmenu-list-a--bottom-YDeBC {
404
463
  min-height: var(--t-container-size-xl);
405
- border-top: 1px solid var(--t-border-color-default-base);
464
+ border-top: var(--t-border-width-default) solid var(--t-border-color-default-base);
406
465
  }
407
466
  .appmenu-list-a--bottom-YDeBC svg {
408
467
  display: block;
@@ -414,9 +473,7 @@ div[data-small-topbar-user-profile-menu-wrap][style*="display: block"]) .topbar-
414
473
  background-color: transparent;
415
474
  padding: 0;
416
475
  border-width: 0;
417
- -webkit-appearance: none;
418
- -moz-appearance: none;
419
- appearance: none;
476
+ appearance: none;
420
477
  position: absolute;
421
478
  right: var(--t-spacing-2);
422
479
  top: calc(var(--t-spacing-1) + var(--t-spacing-half));
@@ -433,11 +490,8 @@ div[data-small-topbar-user-profile-menu-wrap][style*="display: block"]) .topbar-
433
490
  flex-grow: 1;
434
491
  align-items: center;
435
492
  justify-content: center;
436
- -moz-column-gap: var(--t-spacing-half);
437
- column-gap: var(--t-spacing-half);
438
- -webkit-appearance: none;
439
- -moz-appearance: none;
440
- appearance: none;
493
+ column-gap: var(--t-spacing-half);
494
+ appearance: none;
441
495
  }
442
496
  .current-route-wpJgz svg {
443
497
  vertical-align: middle;
@@ -461,9 +515,7 @@ div[data-small-topbar-user-profile-menu-wrap][style*="display: block"]) .topbar-
461
515
  left: 50%;
462
516
  transform: translateX(-50%);
463
517
  max-height: calc(100% - var(--topbar-height) - 1px);
464
- box-shadow: 0px 0px 0px 1px hsla(0, 0%, 0%, 0.05),
465
- 0px 4px 12px 2px hsla(0, 0%, 0%, 0.16);
466
-
518
+ box-shadow: 0 0 0 1px hsla(0, 0%, 0%, 0.05), 0 4px 12px 2px hsla(0, 0%, 0%, 0.16);
467
519
  overflow: auto;
468
520
  scrollbar-color: var(--topbar-scrollbar-color);
469
521
  scrollbar-width: var(--topbar-scrollbar-width);
@@ -496,9 +548,81 @@ div[data-small-topbar-user-profile-menu-wrap][style*="display: block"]) .topbar-
496
548
  background-color: transparent;
497
549
  border-width: 0;
498
550
  padding: var(--t-spacing-2);
499
- -webkit-appearance: none;
500
- -moz-appearance: none;
501
- appearance: none;
551
+ appearance: none;
552
+ }
553
+
554
+ .drawer-wrap-J0rSL {
555
+ width: 100%;
556
+ background-color: var(--t-surface-color-card);
557
+
558
+ display: none;
559
+ position: fixed;
560
+ top: 0;
561
+ bottom: var(--toolbar-navbar-height);
562
+
563
+ overflow: hidden;
564
+ }
565
+ .drawer-wrap-J0rSL.is-visible-KTME8 {
566
+ display: block;
567
+ }
568
+
569
+ .drawer-j7f4l {
570
+ display: flex;
571
+ flex-direction: column;
572
+ height: 100%;
573
+
574
+ overflow: auto;
575
+ scrollbar-color: var(--t-fill-color-transparency-dark-030);
576
+ scrollbar-width: var(--topbar-scrollbar-width);
577
+ }
578
+
579
+ @media (min-width: 600px) {
580
+ .drawer-wrap-J0rSL {
581
+ width: var(--toolbar-drawer-width);
582
+ border-radius: 6px; /* TODO: Once a token exists, replace with 6px equivalent
583
+ or inset associated with to --t-border-radius-lg */
584
+ box-shadow: 0 0 0 1px var(--content-wrap-border-color), 0 4px 12px 2px rgba(0, 0, 0, 0.16);
585
+
586
+ display: block;
587
+ position: absolute;
588
+ bottom: var(--t-spacing-2);
589
+ right: calc(var(--toolbar-drawer-width) * -1);
590
+ top: calc(var(--topbar-height) + var(--t-spacing-1));
591
+
592
+ opacity: 0;
593
+ transform: translateX(var(--t-spacing-1));
594
+ transition-property: opacity, transform, right;
595
+ transition-duration: 100ms;
596
+ transition-delay: 0s, 0s, 100ms;
597
+ transition-timing-function: ease-in-out;
598
+ }
599
+ .drawer-wrap-J0rSL.is-visible-KTME8 {
600
+ right: calc(var(--toolbar-width) + var(--t-spacing-1) + 1px);
601
+ opacity: 1;
602
+ transform: translateX(0);
603
+
604
+ transition-property: opacity, transform;
605
+ transition-delay: 0s;
606
+ }
607
+ }
608
+
609
+ .indicator-dot-MdX3N {
610
+ width: 12px;
611
+ height: 12px;
612
+ background: radial-gradient(#33adff 50%, transparent 50%);
613
+ background-color: #33adff;
614
+ box-shadow: inset 0 0 0 2px #b1bfda;
615
+ border-radius: 50%;
616
+ position: absolute;
617
+ z-index: 6;
618
+ pointer-events: none;
619
+ }
620
+
621
+ .indicator-dot-MdX3N.is-active-mlX23 {
622
+ width: 10px;
623
+ height: 10px;
624
+ box-shadow: inset 0 0 0 2px var(--t-fill-color-neutral-100);
625
+ transform: translateX(-1.5px) translateY(1.5px);
502
626
  }
503
627
 
504
628
  .color-mode-switcher-JpczO {
@@ -516,7 +640,7 @@ div[data-small-topbar-user-profile-menu-wrap][style*="display: block"]) .topbar-
516
640
  .color-mode-switcher-label-beta-pwv5t {
517
641
  font-size: var(--t-font-size-xs);
518
642
  font-weight: var(--t-font-weight-semibold);
519
- color: var(--t-text-color-status-secondary);
643
+ color: var(--t-text-color-status-neutral);
520
644
  background-color: var(--t-fill-color-status-neutral-ghost);
521
645
  border-radius: var(--t-border-radius-sm);
522
646
  padding: 0 var(--t-spacing-1);
@@ -527,7 +651,7 @@ div[data-small-topbar-user-profile-menu-wrap][style*="display: block"]) .topbar-
527
651
 
528
652
  .color-mode-switcher-modes-u-bic {
529
653
  padding: var(--t-spacing-half);
530
- border: 1px solid var(--t-border-color-default-base);
654
+ border: var(--t-border-width-default) solid var(--t-border-color-default-base);
531
655
  border-radius: var(--t-border-radius-md);
532
656
  display: flex;
533
657
  gap: var(--t-spacing-half);
@@ -545,9 +669,7 @@ div[data-small-topbar-user-profile-menu-wrap][style*="display: block"]) .topbar-
545
669
  align-items: center;
546
670
  justify-content: center;
547
671
  flex-grow: 1;
548
- -webkit-user-select: none;
549
- -moz-user-select: none;
550
- user-select: none;
672
+ user-select: none;
551
673
  margin: 0;
552
674
  position: relative;
553
675
  }
@@ -559,15 +681,13 @@ div[data-small-topbar-user-profile-menu-wrap][style*="display: block"]) .topbar-
559
681
  }
560
682
  .color-mode-switcher-modes-u-bic svg {
561
683
  display: none;
684
+ margin-right: var(--t-spacing-half);
562
685
  }
563
686
  @container (width >= 256px) {
564
687
  .color-mode-switcher-modes-u-bic svg {
565
688
  display: block;
566
689
  }
567
690
  }
568
- .color-mode-switcher-modes-u-bic svg {
569
- margin-right: var(--t-spacing-half);
570
- }
571
691
  .color-mode-switcher-modes-u-bic svg path {
572
692
  stroke: var(--t-icon-color-default-dim);
573
693
  }
@@ -584,79 +704,6 @@ div[data-small-topbar-user-profile-menu-wrap][style*="display: block"]) .topbar-
584
704
  .color-mode-switcher-modes-u-bic label:has(input:checked) svg path {
585
705
  stroke: var(--t-icon-color-status-info-primary);
586
706
  }
587
- .drawer-wrap-J0rSL {
588
- width: 100%;
589
- background-color: var(--t-surface-color-card);
590
-
591
- display: none;
592
- position: fixed;
593
- top: 0;
594
- bottom: var(--toolbar-navbar-height);
595
-
596
- overflow: hidden;
597
- }
598
- .drawer-wrap-J0rSL.is-visible-KTME8 {
599
- display: block;
600
- }
601
-
602
- .drawer-j7f4l {
603
- display: flex;
604
- flex-direction: column;
605
- height: 100%;
606
-
607
- overflow: auto;
608
- scrollbar-color: var(--t-fill-color-transparency-dark-030);
609
- scrollbar-width: var(--topbar-scrollbar-width);
610
- }
611
-
612
- @media (min-width: 600px) {
613
- .drawer-wrap-J0rSL {
614
- width: var(--toolbar-drawer-width);
615
- border-radius: 6px; /* TODO: Once a token exists, replace with 6px equivalent or inset associated with to --t-border-radius-lg */
616
- box-shadow: 0 0 0 1px var(--content-wrap-border-color),
617
- 0 4px 12px 2px rgba(0, 0, 0, 0.16);
618
-
619
- display: block;
620
- position: absolute;
621
- bottom: var(--t-spacing-2);
622
- right: calc(var(--toolbar-drawer-width) * -1);
623
- top: calc(var(--topbar-height) + var(--t-spacing-1));
624
-
625
- opacity: 0;
626
- transform: translateX(var(--t-spacing-1));
627
- transition-property: opacity, transform, right;
628
- transition-duration: 100ms;
629
- transition-delay: 0s, 0s, 100ms;
630
- transition-timing-function: ease-in-out;
631
- }
632
- .drawer-wrap-J0rSL.is-visible-KTME8 {
633
- right: calc(var(--toolbar-width) + var(--t-spacing-1) + 1px);
634
- opacity: 1;
635
- transform: translateX(0);
636
-
637
- transition-property: opacity, transform;
638
- transition-delay: 0s;
639
- }
640
- }
641
-
642
- .indicator-dot-MdX3N {
643
- width: 12px;
644
- height: 12px;
645
- background-color: #33adff;
646
- background: radial-gradient(#33adff 50%, transparent 50%);
647
- box-shadow: inset 0px 0px 0px 2px #b1bfda;
648
- border-radius: 50%;
649
- position: absolute;
650
- z-index: 6;
651
- pointer-events: none;
652
- }
653
- .indicator-dot-MdX3N.is-active-mlX23 {
654
- width: 10px;
655
- height: 10px;
656
- box-shadow: inset 0px 0px 0px 2px var(--t-fill-color-neutral-100);
657
- transform: translateX(-1.5px) translateY(1.5px);
658
- }
659
-
660
707
  .toolbar-KHJR5 {
661
708
  display: flex;
662
709
  width: 100vw;
@@ -670,14 +717,12 @@ div[data-small-topbar-user-profile-menu-wrap][style*="display: block"]) .topbar-
670
717
  font: inherit;
671
718
  color: var(--t-fill-color-transparency-dark-060);
672
719
  background-color: transparent;
673
- border: 1px solid transparent;
720
+ border: var(--t-border-width-default) solid transparent;
674
721
  border-radius: var(--t-border-radius-lg);
675
722
  flex-grow: 1;
676
723
  transition: var(--topbar-slight-transition-background);
677
724
  cursor: pointer;
678
- -webkit-appearance: none;
679
- -moz-appearance: none;
680
- appearance: none;
725
+ appearance: none;
681
726
  display: inline-flex;
682
727
  align-items: center;
683
728
  justify-content: center;
@@ -702,7 +747,7 @@ div[data-small-topbar-user-profile-menu-wrap][style*="display: block"]) .topbar-
702
747
  }
703
748
 
704
749
  .toolbar-button--home-Pthd0 {
705
- color: hsl(221 93% 55%);
750
+ color: hsl(221, 93%, 55%);
706
751
  }
707
752
 
708
753
  @media (min-width: 600px) {
package/dist/topbar.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["topbar.scss","styles.module.css","unbutton.module.css","apps_button.module.scss","apps_menu.module.css","popup.module.css","user_menu.module.css","avatar.module.css","color_mode_switcher.module.scss","drawer.module.css","indicator_dot.module.css"],"names":[],"mappings":"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","file":"topbar.css","sourcesContent":["@charset \"UTF-8\";\n:root {\n --topbar-height: 56px;\n --topbar-slight-transition: 120ms ease-in;\n --topbar-slight-transition-background: background-color var(--topbar-slight-transition);\n --topbar-scrollbar-color: var(--t-fill-color-transparency-dark-030) transparent;\n --topbar-scrollbar-width: thin;\n --topbar-nav-link-font-size: var(--t-font-size-sm);\n --topbar-nav-link-font-color: var(--t-text-color-default-headline);\n --topbar-nav-link-height: var(--t-container-size-md);\n --topbar-nav-link-background-color: transparent;\n --topbar-nav-link-padding-x: 12px;\n --topbar-nav-link-border-color: transparent;\n --topbar-nav-link-border-radius: 999px;\n --topbar-nav-link-transition: var(--topbar-slight-transition-background);\n --topbar-nav-link-background-color-hover: var(--t-fill-color-transparency-light-040);\n --topbar-nav-link-background-color-active: var(--t-fill-color-transparency-light-060);\n --topbar-nav-link-border-color-active: var(--t-fill-color-transparency-light-030);\n --toolbar-width: 64px;\n --toolbar-inner-width: 48px;\n --toolbar-drawer-width: 360px;\n --toolbar-navbar-height: 56px;\n --content-wrap-border-color: hsl(0 0% 0% / 0.08);\n --content-wrap-shadow-dimensions: 0 -1px 0 0;\n}\n\n@media (min-width: 600px) {\n :root {\n --topbar-height: 64px;\n --content-wrap-shadow-dimensions: 0 0 0 1px;\n }\n}\n:root[data-color-mode=dark] {\n --topbar-nav-link-background-color-hover: var(--t-fill-color-transparency-light-020);\n --topbar-nav-link-background-color-active: var(--t-fill-color-transparency-light-030);\n --topbar-nav-link-border-color-active: var(--t-fill-color-transparency-light-010);\n --content-wrap-border-color: hsl(0 0% 100% / 0.04);\n}\n\n@media (prefers-color-scheme: dark) {\n :root[data-color-mode=system] {\n --topbar-nav-link-background-color-hover: var(--t-fill-color-transparency-light-020);\n --topbar-nav-link-background-color-active: var(--t-fill-color-transparency-light-030);\n --topbar-nav-link-border-color-active: var(--t-fill-color-transparency-light-010);\n --content-wrap-border-color: hsl(0 0% 100% / 0.04);\n }\n}\n/*\nFix for Safari bug:\nOn mobile breakpoints, when the app switcher or user profile menu are open,\nprevent .top-wrap from covering them.\n\nCaused by products overriding .topbar-wrap’s z-index.\n*/\n.page-wrap:has(div[class^=appmenu-layer][style*=\"display: block\"],\ndiv[data-small-topbar-user-profile-menu-wrap][style*=\"display: block\"]) .topbar-wrap {\n z-index: initial !important;\n}\n\n.hide-scrollbar {\n -ms-overflow-style: none; /* IE and Edge */\n scrollbar-width: none; /* Firefox */\n}\n\n.hide-scrollbar::-webkit-scrollbar {\n display: none; /* Chrome, Safari, and Opera */\n}",".toolbar {\n display: flex;\n width: 100vw;\n height: var(--toolbar-navbar-height);\n padding: var(--t-spacing-1);\n padding-top: calc(var(--t-spacing-1) - 1px);\n gap: var(--t-spacing-1);\n}\n\n.toolbar-button {\n font: inherit;\n color: var(--t-fill-color-transparency-dark-060);\n background-color: transparent;\n border: 1px solid transparent;\n border-radius: var(--t-border-radius-lg);\n flex-grow: 1;\n transition: var(--topbar-slight-transition-background);\n cursor: pointer;\n appearance: none;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n.toolbar-button:hover {\n background-color: var(--t-fill-color-button-interaction-ghost-hover);\n}\n.toolbar-button:active,\n.toolbar-button.is-current {\n color: var(--t-fill-color-transparency-dark-080);\n background-color: var(--t-fill-color-button-interaction-ghost-active);\n}\n\n.toolbar-button--avatar {\n display: none;\n}\n.toolbar-button--avatar > div {\n margin-left: 0;\n width: var(--t-container-size-md);\n height: auto;\n aspect-ratio: 1 / 1;\n}\n\n.toolbar-button--home {\n color: hsl(221 93% 55%);\n}\n\n@media (min-width: 600px) {\n .toolbar {\n width: var(--toolbar-width);\n height: auto;\n padding-top: var(--t-spacing-1);\n flex-direction: column;\n }\n\n .toolbar-button {\n aspect-ratio: 1 / 1;\n }\n .toolbar-button:hover {\n background-color: var(--t-fill-color-transparency-light-040);\n }\n .toolbar-button:active,\n .toolbar-button.is-current {\n color: var(--t-fill-color-transparency-dark-080);\n background-color: var(--t-fill-color-transparency-light-060);\n border-color: var(--t-fill-color-transparency-light-030);\n }\n\n .toolbar-button--avatar {\n display: inline-flex;\n }\n\n .toolbar-button--home {\n display: none;\n }\n}\n",".unbutton {\n font-family: inherit;\n appearance: none;\n background-color: transparent;\n border: none;\n cursor: pointer;\n display: inline-block;\n outline: 0;\n padding: 0;\n}\n",".button {\n color: var(--t-text-color-default-primary);\n padding-left: var(--t-spacing-1);\n padding-right: var(--t-spacing-1);\n height: 100%;\n white-space: nowrap;\n display: flex;\n align-items: center;\n gap: var(--t-spacing-1);\n transition: var(--topbar-slight-transition-background);\n --_svg-display: none;\n}\n.button svg[data-logo=mono-app-text],\n.button svg[class^=chevron] {\n display: var(--_svg-display);\n}\n@media (min-width: 720px) {\n .button {\n --_svg-display: block;\n padding-left: var(--t-spacing-2);\n padding-right: var(--t-spacing-2);\n }\n .button svg[data-logo=color-app-icon] {\n width: 24px;\n height: 24px;\n }\n}\n\n.button-accounts {\n color: var(--t-text-color-default-primary);\n font-size: var(--t-font-size-sm);\n font-weight: var(--t-font-weight-medium);\n margin-left: var(--t-spacing-quarter);\n}\n\n.chevron {\n border-radius: 100%;\n padding: var(--t-spacing-fourth);\n display: block;\n transition: var(--topbar-slight-transition-background);\n transition-property: background-color, transform;\n}\n\n.chevron polygon {\n transform: translateY(0.5px);\n}\n\n.button:hover .chevron,\n.button.is-expanded .chevron {\n background-color: var(--t-fill-color-transparency-light-050);\n}\n\n.button.is-expanded .chevron {\n transform: rotate(180deg);\n}",".popup {\n top: calc(var(--topbar-height) - var(--t-spacing-1));\n left: var(--t-spacing-2);\n min-width: 180px;\n max-height: calc(100% - var(--topbar-height) - var(--t-spacing-3));\n}\n",".popup-root {\n display: flex;\n align-self: flex-end;\n}\n\n.popup {\n background: var(--t-surface-color-card);\n box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05),\n 0 4px 12px 2px rgba(0, 0, 0, 0.16);\n border-radius: var(--t-border-radius-lg);\n position: absolute;\n\n overflow: auto;\n scrollbar-color: var(--topbar-scrollbar-color);\n scrollbar-width: var(--topbar-scrollbar-width);\n\n opacity: 0;\n visibility: hidden;\n transition: all 120ms ease-in;\n}\n.popup.is-visible {\n opacity: 1;\n transition: none;\n visibility: visible;\n}\n",".popup {\n color: var(--t-text-color-default-primary);\n min-width: 242px;\n max-width: 320px;\n margin-top: calc(var(--t-spacing-1) * -1);\n right: calc(var(--t-spacing-1) + 1px); /* 1px is to account for .product-wrap { padding-right: 1px } */\n max-height: calc(100% - var(--topbar-height) - var(--t-spacing-3));\n}\n\n.trigger-wrap {\n margin-left: var(--t-spacing-1);\n position: relative;\n white-space: nowrap;\n cursor: pointer;\n}\n\n.trigger {\n font-size: var(--topbar-nav-link-font-size);\n color: var(--topbar-nav-link-font-color);\n height: var(--topbar-nav-link-height);\n background-color: var(--topbar-nav-link-background-color-active);\n padding: 0 var(--topbar-nav-link-padding-x);\n border: 1px solid var(--topbar-nav-link-border-color-active);\n border-radius: var(--topbar-nav-link-border-radius);\n min-width: var(--t-container-size-md);\n transition: var(--topbar-nav-link-transition);\n display: flex;\n align-items: center;\n justify-content: center;\n outline: 0;\n appearance: none;\n cursor: pointer;\n}\n\n.trigger svg {\n transition: transform var(--topbar-slight-transition);\n /* Negative margin ensures button is a circle when orgname isn’t visible */\n margin-left: calc(var(--t-spacing-1) * -1);\n margin-right: calc(var(--t-spacing-1) * -1);\n}\n\n.trigger.is-visible svg {\n transform: rotate(180deg);\n}\n\n.trigger-orgname {\n max-width: 240px;\n margin-right: var(--t-spacing-fourth);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.trigger-orgname + svg {\n color: var(--t-fill-color-transparency-dark-050);\n /* Correct margin for when orgname is visible */\n margin-left: 0;\n margin-right: calc(var(--t-spacing-fourth) * -1);\n}\n",".avatar {\n background-color: white;\n background-position: center;\n background-size: cover;\n border-radius: 50%;\n height: var(--t-element-size-2xl);\n width: var(--t-element-size-2xl);\n margin-left: var(--t-spacing-half);\n}\n",".color-mode-switcher {\n color: var(--t-text-color-default-primary); /* Needed to override .tapestry-react-reset. This is the dumbest thing to have to do */\n border: 0;\n padding: 0;\n}\n\n.color-mode-switcher-label {\n font-weight: var(--t-font-weight-semibold);\n display: inline-block;\n margin-bottom: var(--t-spacing-1);\n}\n\n.color-mode-switcher-label-beta {\n font-size: var(--t-font-size-xs);\n font-weight: var(--t-font-weight-semibold);\n color: var(--t-text-color-status-secondary);\n background-color: var(--t-fill-color-status-neutral-ghost);\n border-radius: var(--t-border-radius-sm);\n padding: 0 var(--t-spacing-1);\n line-height: var(--t-element-size-sm);\n vertical-align: middle;\n text-transform: uppercase;\n}\n\n.color-mode-switcher-modes {\n padding: var(--t-spacing-half);\n border: 1px solid var(--t-border-color-default-base);\n border-radius: var(--t-border-radius-md);\n display: flex;\n gap: var(--t-spacing-half);\n container-type: inline-size;\n}\n.color-mode-switcher-modes input[type=radio] {\n opacity: 0;\n position: absolute;\n pointer-events: none;\n}\n.color-mode-switcher-modes label {\n border-radius: var(--t-border-radius-sm);\n min-height: var(--t-element-size-xl);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-grow: 1;\n user-select: none;\n margin: 0;\n position: relative;\n}\n.color-mode-switcher-modes label:hover {\n background: var(--t-fill-color-button-neutral-ghost-hover);\n}\n.color-mode-switcher-modes label:has(input:focus-visible) {\n outline: auto;\n}\n.color-mode-switcher-modes svg {\n display: none;\n}\n@container (width >= 256px) {\n .color-mode-switcher-modes svg {\n display: block;\n }\n}\n.color-mode-switcher-modes svg {\n margin-right: var(--t-spacing-half);\n}\n.color-mode-switcher-modes svg path {\n stroke: var(--t-icon-color-default-dim);\n}\n.color-mode-switcher-modes label,\n.color-mode-switcher-modes svg path {\n transition-property: color, background-color, stroke;\n transition-duration: 0.1s;\n transition-timing-function: linear;\n}\n.color-mode-switcher-modes label:has(input:checked) {\n color: var(--t-text-color-status-info);\n background-color: var(--t-fill-color-status-info-ghost);\n}\n.color-mode-switcher-modes label:has(input:checked) svg path {\n stroke: var(--t-icon-color-status-info-primary);\n}",".drawer-wrap {\n width: 100%;\n background-color: var(--t-surface-color-card);\n\n display: none;\n position: fixed;\n top: 0;\n bottom: var(--toolbar-navbar-height);\n\n overflow: hidden;\n}\n.drawer-wrap.is-visible {\n display: block;\n}\n\n.drawer {\n display: flex;\n flex-direction: column;\n height: 100%;\n\n overflow: auto;\n scrollbar-color: var(--t-fill-color-transparency-dark-030);\n scrollbar-width: var(--topbar-scrollbar-width);\n}\n\n@media (min-width: 600px) {\n .drawer-wrap {\n width: var(--toolbar-drawer-width);\n border-radius: 6px; /* TODO: Once a token exists, replace with 6px equivalent or inset associated with to --t-border-radius-lg */\n box-shadow: 0 0 0 1px var(--content-wrap-border-color),\n 0 4px 12px 2px rgba(0, 0, 0, 0.16);\n\n display: block;\n position: absolute;\n bottom: var(--t-spacing-2);\n right: calc(var(--toolbar-drawer-width) * -1);\n top: calc(var(--topbar-height) + var(--t-spacing-1));\n\n opacity: 0;\n transform: translateX(var(--t-spacing-1));\n transition-property: opacity, transform, right;\n transition-duration: 100ms;\n transition-delay: 0s, 0s, 100ms;\n transition-timing-function: ease-in-out;\n }\n .drawer-wrap.is-visible {\n right: calc(var(--toolbar-width) + var(--t-spacing-1) + 1px);\n opacity: 1;\n transform: translateX(0);\n\n transition-property: opacity, transform;\n transition-delay: 0s;\n }\n}\n",".indicator-dot {\n width: 12px;\n height: 12px;\n background-color: #33adff;\n background: radial-gradient(#33adff 50%, transparent 50%);\n box-shadow: inset 0px 0px 0px 2px #b1bfda;\n border-radius: 50%;\n position: absolute;\n z-index: 6;\n pointer-events: none;\n}\n.indicator-dot.is-active {\n width: 10px;\n height: 10px;\n box-shadow: inset 0px 0px 0px 2px var(--t-fill-color-neutral-100);\n transform: translateX(-1.5px) translateY(1.5px);\n}\n"]}
1
+ {"version":3,"sources":["topbar.scss","styles.module.css","unbutton.module.css","apps_button.module.scss","apps_menu.module.css","popup.module.css","user_menu.module.css","avatar.module.css","drawer.module.css","indicator_dot.module.css","color_mode_switcher.module.scss"],"names":[],"mappings":"AAAA,gBAAgB;AAChB;EACE,qBAAqB;EACrB,yCAAyC;EACzC,uFAAuF;EACvF,+EAA+E;EAC/E,8BAA8B;EAC9B,kDAAkD;EAClD,kEAAkE;EAClE,oDAAoD;EACpD,+CAA+C;EAC/C,iCAAiC;EACjC,2CAA2C;EAC3C,sCAAsC;EACtC,wEAAwE;EACxE,oFAAoF;EACpF,qFAAqF;EACrF,iFAAiF;EACjF,qBAAqB;EACrB,2BAA2B;EAC3B,6BAA6B;EAC7B,6BAA6B;EAC7B,kDAAkD;EAClD,4CAA4C;AAC9C;;AAEA;EACE;IACE,qBAAqB;IACrB,2CAA2C;EAC7C;AACF;AACA;EACE,oFAAoF;EACpF,qFAAqF;EACrF,iFAAiF;EACjF,oDAAoD;AACtD;;AAEA;EACE;IACE,oFAAoF;IACpF,qFAAqF;IACrF,iFAAiF;IACjF,oDAAoD;EACtD;AACF;AACA;;;;;;CAMC;AACD;EACE,2BAA2B;AAC7B;;AAEA;EACE,wBAAwB,EAAE,gBAAgB;EAC1C,qBAAqB,EAAE,YAAY;AACrC;;AAEA;EACE,aAAa,EAAE,8BAA8B;AAC/C;;AAEA;EACE,0BAA0B;AAC5B;;AAEA;EACE,aAAa;AACf;;AAEA;EACE,gBAAgB;AAClB;;AAEA;EACE;IACE,oBAAoB;IACpB,oBAAoB;IACpB,4BAA4B;EAC9B;EACA;IACE,oBAAoB;IACpB,gBAAgB;EAClB;EACA;IACE,iBAAiB;EACnB;AACF;AC5FA;EACE,yCAAyC;EACzC,+CAA+C;EAC/C,mDAAmD;EACnD,+CAA+C;EAC/C,8CAA8C;;EAE9C,kBAAkB;EAClB,uBAAuB;EACvB,SAAS;EACT,2EAA2E;EAC3E,aAAa;;EAEb,2BAA2B;EAC3B,kBAAkB;EAClB,wDAAwD;EACxD,gBAAgB;EAChB,aAAa;EACb,uBAAuB;EACvB,uBAAuB;EACvB,eAAe;;EAEf,wCAAwC;EACxC,uCAAuC;EACvC,kEAAkE;EAClE,oDAAoD;;EAEpD,kEAAkE;EAClE,0DAA0D;AAC5D;;AAEA;EACE,6CAA6C;EAC7C,yCAAyC;EACzC,mDAAmD;EACnD,2FAA2F;AAC7F;;AAEA;EACE,aAAa;AACf;;AAEA;EACE;IACE,2CAA2C;EAC7C;;EAEA;IACE,+CAA+C;EACjD;AACF;AAlDA;EACE,gCAAgC;EAChC,sBAAsB,EAAE,sDAAsD;EAC9E,sCAAsC,EAAE,sDAAsD;EAC9F,aAAa;EACb,mBAAmB;EACnB,2BAA2B;EAC3B,8BAA8B;EAC9B,sBAAsB;AACxB;AACA;EACE,sCAAsC,EAAE,sDAAsD;AAChG;;AAEA;EACE,cAAc;EACd,YAAY;AACd;;AAEA;EACE,YAAY;EACZ,aAAa;EACb,mBAAmB;EACnB,8BAA8B;EAC9B,8BAA8B;AAChC;;AAEA;EACE,mBAAmB;EACnB,0BAA0B;AAC5B;AACA;EACE,mBAAmB;EACnB,qBAAqB;AACvB;;AAEA;EACE;IACE,gCAAgC;IAChC,iCAAiC;EACnC;AACF;;AAEA;EACE,6BAA6B;EAC7B,eAAe;EACf,eAAe;EACf,2BAA2B;EAC3B,qCAAqC;EACrC,gBAAgB;AAClB;;AClDA;EACE,oBAAoB;EACpB,gBAAgB;EAChB,6BAA6B;EAC7B,YAAY;EACZ,eAAe;EACf,qBAAqB;EACrB,UAAU;EACV,UAAU;AACZ;;ACTA;EACE,0CAA0C;EAC1C,gCAAgC;EAChC,iCAAiC;EACjC,YAAY;EACZ,mBAAmB;EACnB,aAAa;EACb,mBAAmB;EACnB,uBAAuB;EACvB,sDAAsD;EACtD,oBAAoB;AACtB;AACA;;EAEE,4BAA4B;AAC9B;AACA;EACE;IACE,qBAAqB;IACrB,gCAAgC;IAChC,iCAAiC;EACnC;EACA;IACE,WAAW;IACX,YAAY;EACd;AACF;;AAEA;EACE,0CAA0C;EAC1C,gCAAgC;EAChC,wCAAwC;EACxC,oCAAoC;AACtC;;AAEA;EACE,mBAAmB;EACnB,gCAAgC;EAChC,cAAc;EACd,sDAAsD;EACtD,gDAAgD;AAClD;;AAEA;EACE,4BAA4B;AAC9B;;AAEA;;EAEE,4DAA4D;AAC9D;;AAEA;EACE,yBAAyB;AAC3B;ACtDA;EACE,oDAAoD;EACpD,wBAAwB;EACxB,gBAAgB;EAChB,kEAAkE;AACpE;;ACLA;EACE,aAAa;EACb,oBAAoB;AACtB;;AAEA;EACE,uCAAuC;EACvC,6EAA6E;EAC7E,wCAAwC;EACxC,kBAAkB;EAClB,cAAc;EACd,8CAA8C;EAC9C,8CAA8C;EAC9C,UAAU;EACV,kBAAkB;EAClB,6BAA6B;AAC/B;;AAEA;EACE,UAAU;EACV,gBAAgB;EAChB,mBAAmB;AACrB;;AJtBA;EACE,2CAA2C;EAC3C,oBAAoB;EACpB,mDAAmD,EAAE,oDAAoD;EACzG,qCAAqC;EACrC,+EAA+E;EAC/E,oBAAoB;EACpB,mBAAmB;EACnB,qBAAqB;EACrB,0BAA0B;EAC1B,sBAAsB;EACtB,mBAAmB;EACnB,mCAAmC,EAAE,aAAa;EAClD,8CAA8C;EAC9C,+CAA+C;EAC/C,mDAAmD;EACnD,6CAA6C;AAC/C;AACA;EACE,+DAA+D;AACjE;AACA;;EAEE,gEAAgE;EAChE,wDAAwD;AAC1D;;AAEA;EACE,gCAAgC;AAClC;AACA;EACE;IACE,gCAAgC;EAClC;AACF;;AKlCA;EACE,0CAA0C;EAC1C,gBAAgB;EAChB,gBAAgB;EAChB,yCAAyC;EACzC,qCAAqC,EAAE,gEAAgE;EACvG,kEAAkE;AACpE;;AAEA;EACE,+BAA+B;EAC/B,kBAAkB;EAClB,mBAAmB;EACnB,eAAe;AACjB;;AAEA;EACE,2CAA2C;EAC3C,wCAAwC;EACxC,qCAAqC;EACrC,gEAAgE;EAChE,2CAA2C;EAC3C,sFAAsF;EACtF,mDAAmD;EACnD,qCAAqC;EACrC,6CAA6C;EAC7C,aAAa;EACb,mBAAmB;EACnB,uBAAuB;EACvB,UAAU;EACV,gBAAgB;EAChB,eAAe;AACjB;;AAEA;EACE,qDAAqD;EACrD,0EAA0E;EAC1E,0CAA0C;EAC1C,2CAA2C;AAC7C;;AAEA;EACE,yBAAyB;AAC3B;;AAEA;EACE,gBAAgB;EAChB,qCAAqC;EACrC,gBAAgB;EAChB,uBAAuB;EACvB,mBAAmB;AACrB;;AAEA;EACE,gDAAgD;EAChD,+CAA+C;EAC/C,cAAc;EACd,gDAAgD;AAClD;;AC1DA;EACE,4DAA4D;EAC5D,2BAA2B;EAC3B,sBAAsB;EACtB,kBAAkB;EAClB,iCAAiC;EACjC,gCAAgC;EAChC,kCAAkC;AACpC;;ANRA;EACE,eAAe;EACf,6BAA6B;EAC7B,YAAY;EACZ,gCAAgC;EAChC,iCAAiC;EACjC,gBAAgB;;EAEhB,aAAa;EACb,mBAAmB;EACnB,uBAAuB;AACzB;;AAEA;EACE,2CAA2C;EAC3C,kEAAkE;EAClE,aAAa;EACb,eAAe;EACf,MAAM;EACN,oCAAoC;EACpC,OAAO;EACP,QAAQ;EACR,YAAY;EACZ,iBAAiB;EACjB,wCAAwC;AAC1C;;AAEA;EACE,6CAA6C;EAC7C,gDAAgD;EAChD,sCAAsC;EACtC,aAAa;EACb,sBAAsB;EACtB,kBAAkB;EAClB,gBAAgB;AAClB;;AAEA;EACE,cAAc;EACd,8CAA8C;EAC9C,8CAA8C;AAChD;;AAEA;EACE,gBAAgB;EAChB,UAAU;EACV,SAAS;AACX;;AAEA;EACE,gCAAgC;EAChC,0CAA0C;EAC1C,qBAAqB;EACrB,sCAAsC;EACtC,iDAAiD;EACjD,aAAa;EACb,mBAAmB;AACrB;AACA;EACE,sCAAsC;EACtC,qFAAqF;AACvF;AACA;EACE,sCAAsC;EACtC,kFAAkF;AACpF;AACA;EACE,cAAc;EACd,mCAAmC;EACnC,+CAA+C;AACjD;;AAEA;EACE,6BAA6B;EAC7B,UAAU;EACV,eAAe;EACf,gBAAgB;EAChB,kBAAkB;EAClB,yBAAyB;EACzB,qDAAqD;AACvD;;AAEA;EACE,aAAa;EACb,2CAA2C;EAC3C,iCAAiC;EACjC,kBAAkB;EAClB,6BAA6B;EAC7B,eAAe;EACf,aAAa;EACb,YAAY;EACZ,mBAAmB;EACnB,uBAAuB;EACvB,iCAAiC;EACjC,gBAAgB;AAClB;AACA;EACE,sBAAsB;EACtB,qDAAqD;AACvD;AACA;EACE,yBAAyB;AAC3B;;AAEA;EACE,6CAA6C;EAC7C,wCAAwC;EACxC,2BAA2B;EAC3B,aAAa;EACb,sBAAsB;EACtB,8BAA8B;EAC9B,kBAAkB;EAClB,sCAAsC;EACtC,gBAAgB;EAChB,uDAAuD;EACvD,SAAS;EACT,2BAA2B;EAC3B,mDAAmD;EACnD,iFAAiF;EACjF,cAAc;EACd,8CAA8C;EAC9C,8CAA8C;AAChD;;AAEA;EACE,oBAAoB;EACpB,gCAAgC;EAChC,iBAAiB;EACjB,oBAAoB;EACpB,kBAAkB;EAClB,qBAAqB;EACrB,0BAA0B;EAC1B,mBAAmB;EACnB,0CAA0C;EAC1C,cAAc;EACd,kBAAkB;EAClB,wCAAwC;AAC1C;AACA;EACE,0EAA0E;AAC5E;AACA;EACE,0CAA0C;EAC1C,2CAA2C;EAC3C,2EAA2E;AAC7E;;AAEA;EACE,6BAA6B;EAC7B,eAAe;EACf,2BAA2B;EAC3B,gBAAgB;AAClB;;AOxJA;EACE,WAAW;EACX,6CAA6C;;EAE7C,aAAa;EACb,eAAe;EACf,MAAM;EACN,oCAAoC;;EAEpC,gBAAgB;AAClB;AACA;EACE,cAAc;AAChB;;AAEA;EACE,aAAa;EACb,sBAAsB;EACtB,YAAY;;EAEZ,cAAc;EACd,0DAA0D;EAC1D,8CAA8C;AAChD;;AAEA;EACE;IACE,kCAAkC;IAClC,kBAAkB,EAAE;sDAC8B;IAClD,0FAA0F;;IAE1F,cAAc;IACd,kBAAkB;IAClB,0BAA0B;IAC1B,6CAA6C;IAC7C,oDAAoD;;IAEpD,UAAU;IACV,yCAAyC;IACzC,8CAA8C;IAC9C,0BAA0B;IAC1B,+BAA+B;IAC/B,uCAAuC;EACzC;EACA;IACE,4DAA4D;IAC5D,UAAU;IACV,wBAAwB;;IAExB,uCAAuC;IACvC,oBAAoB;EACtB;AACF;;ACrDA;EACE,WAAW;EACX,YAAY;EACZ,yDAAyD;EACzD,yBAAyB;EACzB,mCAAmC;EACnC,kBAAkB;EAClB,kBAAkB;EAClB,UAAU;EACV,oBAAoB;AACtB;;AAEA;EACE,WAAW;EACX,YAAY;EACZ,2DAA2D;EAC3D,+CAA+C;AACjD;;ACjBA;EACE,0CAA0C,EAAE,sFAAsF;EAClI,SAAS;EACT,UAAU;AACZ;;AAEA;EACE,0CAA0C;EAC1C,qBAAqB;EACrB,iCAAiC;AACnC;;AAEA;EACE,gCAAgC;EAChC,0CAA0C;EAC1C,yCAAyC;EACzC,0DAA0D;EAC1D,wCAAwC;EACxC,6BAA6B;EAC7B,qCAAqC;EACrC,sBAAsB;EACtB,yBAAyB;AAC3B;;AAEA;EACE,8BAA8B;EAC9B,8EAA8E;EAC9E,wCAAwC;EACxC,aAAa;EACb,0BAA0B;EAC1B,2BAA2B;AAC7B;AACA;EACE,UAAU;EACV,kBAAkB;EAClB,oBAAoB;AACtB;AACA;EACE,wCAAwC;EACxC,oCAAoC;EACpC,oBAAoB;EACpB,mBAAmB;EACnB,uBAAuB;EACvB,YAAY;EACZ,iBAAiB;EACjB,SAAS;EACT,kBAAkB;AACpB;AACA;EACE,0DAA0D;AAC5D;AACA;EACE,aAAa;AACf;AACA;EACE,aAAa;EACb,mCAAmC;AACrC;AACA;EACE;IACE,cAAc;EAChB;AACF;AACA;EACE,uCAAuC;AACzC;AACA;;EAEE,oDAAoD;EACpD,yBAAyB;EACzB,kCAAkC;AACpC;AACA;EACE,sCAAsC;EACtC,uDAAuD;AACzD;AACA;EACE,+CAA+C;AACjD;AT9EA;EACE,aAAa;EACb,YAAY;EACZ,oCAAoC;EACpC,2BAA2B;EAC3B,2CAA2C;EAC3C,uBAAuB;AACzB;;AAEA;EACE,aAAa;EACb,gDAAgD;EAChD,6BAA6B;EAC7B,uDAAuD;EACvD,wCAAwC;EACxC,YAAY;EACZ,sDAAsD;EACtD,eAAe;EACf,gBAAgB;EAChB,oBAAoB;EACpB,mBAAmB;EACnB,uBAAuB;AACzB;AACA;EACE,oEAAoE;AACtE;AACA;;EAEE,gDAAgD;EAChD,qEAAqE;AACvE;;AAEA;EACE,aAAa;AACf;AACA;EACE,cAAc;EACd,iCAAiC;EACjC,YAAY;EACZ,mBAAmB;AACrB;;AAEA;EACE,yBAAyB;AAC3B;;AAEA;EACE;IACE,2BAA2B;IAC3B,YAAY;IACZ,+BAA+B;IAC/B,sBAAsB;EACxB;;EAEA;IACE,mBAAmB;EACrB;EACA;IACE,4DAA4D;EAC9D;EACA;;IAEE,gDAAgD;IAChD,4DAA4D;IAC5D,wDAAwD;EAC1D;;EAEA;IACE,oBAAoB;EACtB;;EAEA;IACE,aAAa;EACf;AACF","file":"topbar.css","sourcesContent":["@charset \"UTF-8\";\n:root {\n --topbar-height: 56px;\n --topbar-slight-transition: 120ms ease-in;\n --topbar-slight-transition-background: background-color var(--topbar-slight-transition);\n --topbar-scrollbar-color: var(--t-fill-color-transparency-dark-030) transparent;\n --topbar-scrollbar-width: thin;\n --topbar-nav-link-font-size: var(--t-font-size-sm);\n --topbar-nav-link-font-color: var(--t-text-color-default-headline);\n --topbar-nav-link-height: var(--t-container-size-md);\n --topbar-nav-link-background-color: transparent;\n --topbar-nav-link-padding-x: 12px;\n --topbar-nav-link-border-color: transparent;\n --topbar-nav-link-border-radius: 999px;\n --topbar-nav-link-transition: var(--topbar-slight-transition-background);\n --topbar-nav-link-background-color-hover: var(--t-fill-color-transparency-light-040);\n --topbar-nav-link-background-color-active: var(--t-fill-color-transparency-light-060);\n --topbar-nav-link-border-color-active: var(--t-fill-color-transparency-light-030);\n --toolbar-width: 64px;\n --toolbar-inner-width: 48px;\n --toolbar-drawer-width: 360px;\n --toolbar-navbar-height: 56px;\n --content-wrap-border-color: hsla(0, 0%, 0%, 0.08);\n --content-wrap-shadow-dimensions: 0 -1px 0 0;\n}\n\n@media (min-width: 600px) {\n :root {\n --topbar-height: 64px;\n --content-wrap-shadow-dimensions: 0 0 0 1px;\n }\n}\n:root[data-color-mode=dark] {\n --topbar-nav-link-background-color-hover: var(--t-fill-color-transparency-light-020);\n --topbar-nav-link-background-color-active: var(--t-fill-color-transparency-light-030);\n --topbar-nav-link-border-color-active: var(--t-fill-color-transparency-light-010);\n --content-wrap-border-color: hsla(0, 0%, 100%, 0.04);\n}\n\n@media (prefers-color-scheme: dark) {\n :root[data-color-mode=system] {\n --topbar-nav-link-background-color-hover: var(--t-fill-color-transparency-light-020);\n --topbar-nav-link-background-color-active: var(--t-fill-color-transparency-light-030);\n --topbar-nav-link-border-color-active: var(--t-fill-color-transparency-light-010);\n --content-wrap-border-color: hsla(0, 0%, 100%, 0.04);\n }\n}\n/*\nFix for Safari bug:\nOn mobile breakpoints, when the app switcher or user profile menu are open,\nprevent .top-wrap from covering them.\n\nCaused by products overriding .topbar-wrap’s z-index.\n*/\n.page-wrap:has(div[class^=appmenu-layer][style*=\"display: block\"]) .topbar-wrap {\n z-index: initial !important;\n}\n\n.hide-scrollbar {\n -ms-overflow-style: none; /* IE and Edge */\n scrollbar-width: none; /* Firefox */\n}\n\n.hide-scrollbar::-webkit-scrollbar {\n display: none; /* Chrome, Safari, and Opera */\n}\n\n:root[data-app-context=native] {\n --toolbar-navbar-height: 0;\n}\n\n:root[data-app-context=native] .topbar-wrap {\n display: none;\n}\n\n:root[data-app-context=native] .toolbar-wrap {\n overflow: hidden;\n}\n\n@media screen and (min-width: 600px) {\n :root[data-app-context=native] {\n --toolbar-width: 0px;\n --topbar-height: 0px;\n --toolbar-drawer-width: 48vw;\n }\n :root[data-app-context=native] .content-wrap {\n margin: 0 !important;\n border-radius: 0;\n }\n :root[data-app-context=native] .toolbar-wrap {\n overflow: visible;\n }\n}",".toolbar {\n display: flex;\n width: 100vw;\n height: var(--toolbar-navbar-height);\n padding: var(--t-spacing-1);\n padding-top: calc(var(--t-spacing-1) - 1px);\n gap: var(--t-spacing-1);\n}\n\n.toolbar-button {\n font: inherit;\n color: var(--t-fill-color-transparency-dark-060);\n background-color: transparent;\n border: var(--t-border-width-default) solid transparent;\n border-radius: var(--t-border-radius-lg);\n flex-grow: 1;\n transition: var(--topbar-slight-transition-background);\n cursor: pointer;\n appearance: none;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n}\n.toolbar-button:hover {\n background-color: var(--t-fill-color-button-interaction-ghost-hover);\n}\n.toolbar-button:active,\n.toolbar-button.is-current {\n color: var(--t-fill-color-transparency-dark-080);\n background-color: var(--t-fill-color-button-interaction-ghost-active);\n}\n\n.toolbar-button--avatar {\n display: none;\n}\n.toolbar-button--avatar > div {\n margin-left: 0;\n width: var(--t-container-size-md);\n height: auto;\n aspect-ratio: 1 / 1;\n}\n\n.toolbar-button--home {\n color: hsl(221, 93%, 55%);\n}\n\n@media (min-width: 600px) {\n .toolbar {\n width: var(--toolbar-width);\n height: auto;\n padding-top: var(--t-spacing-1);\n flex-direction: column;\n }\n\n .toolbar-button {\n aspect-ratio: 1 / 1;\n }\n .toolbar-button:hover {\n background-color: var(--t-fill-color-transparency-light-040);\n }\n .toolbar-button:active,\n .toolbar-button.is-current {\n color: var(--t-fill-color-transparency-dark-080);\n background-color: var(--t-fill-color-transparency-light-060);\n border-color: var(--t-fill-color-transparency-light-030);\n }\n\n .toolbar-button--avatar {\n display: inline-flex;\n }\n\n .toolbar-button--home {\n display: none;\n }\n}\n",".unbutton {\n font-family: inherit;\n appearance: none;\n background-color: transparent;\n border: none;\n cursor: pointer;\n display: inline-block;\n outline: 0;\n padding: 0;\n}\n",".button {\n color: var(--t-text-color-default-primary);\n padding-left: var(--t-spacing-1);\n padding-right: var(--t-spacing-1);\n height: 100%;\n white-space: nowrap;\n display: flex;\n align-items: center;\n gap: var(--t-spacing-1);\n transition: var(--topbar-slight-transition-background);\n --_svg-display: none;\n}\n.button svg[data-logo=mono-app-text],\n.button svg[class^=chevron] {\n display: var(--_svg-display);\n}\n@media (min-width: 720px) {\n .button {\n --_svg-display: block;\n padding-left: var(--t-spacing-2);\n padding-right: var(--t-spacing-2);\n }\n .button svg[data-logo=color-app-icon] {\n width: 24px;\n height: 24px;\n }\n}\n\n.button-accounts {\n color: var(--t-text-color-default-primary);\n font-size: var(--t-font-size-sm);\n font-weight: var(--t-font-weight-medium);\n margin-left: var(--t-spacing-fourth);\n}\n\n.chevron {\n border-radius: 100%;\n padding: var(--t-spacing-fourth);\n display: block;\n transition: var(--topbar-slight-transition-background);\n transition-property: background-color, transform;\n}\n\n.chevron polygon {\n transform: translateY(0.5px);\n}\n\n.button:hover .chevron,\n.button.is-expanded .chevron {\n background-color: var(--t-fill-color-transparency-light-050);\n}\n\n.button.is-expanded .chevron {\n transform: rotate(180deg);\n}",".popup {\n top: calc(var(--topbar-height) - var(--t-spacing-1));\n left: var(--t-spacing-2);\n min-width: 180px;\n max-height: calc(100% - var(--topbar-height) - var(--t-spacing-3));\n}\n",".popup-root {\n display: flex;\n align-self: flex-end;\n}\n\n.popup {\n background: var(--t-surface-color-card);\n box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 4px 12px 2px rgba(0, 0, 0, 0.16);\n border-radius: var(--t-border-radius-lg);\n position: absolute;\n overflow: auto;\n scrollbar-color: var(--topbar-scrollbar-color);\n scrollbar-width: var(--topbar-scrollbar-width);\n opacity: 0;\n visibility: hidden;\n transition: all 120ms ease-in;\n}\n\n.popup.is-visible {\n opacity: 1;\n transition: none;\n visibility: visible;\n}\n",".popup {\n color: var(--t-text-color-default-primary);\n min-width: 242px;\n max-width: 320px;\n margin-top: calc(var(--t-spacing-1) * -1);\n right: calc(var(--t-spacing-1) + 1px); /* 1px is to account for .product-wrap { padding-right: 1px } */\n max-height: calc(100% - var(--topbar-height) - var(--t-spacing-3));\n}\n\n.trigger-wrap {\n margin-left: var(--t-spacing-1);\n position: relative;\n white-space: nowrap;\n cursor: pointer;\n}\n\n.trigger {\n font-size: var(--topbar-nav-link-font-size);\n color: var(--topbar-nav-link-font-color);\n height: var(--topbar-nav-link-height);\n background-color: var(--topbar-nav-link-background-color-active);\n padding: 0 var(--topbar-nav-link-padding-x);\n border: var(--t-border-width-default) solid var(--topbar-nav-link-border-color-active);\n border-radius: var(--topbar-nav-link-border-radius);\n min-width: var(--t-container-size-md);\n transition: var(--topbar-nav-link-transition);\n display: flex;\n align-items: center;\n justify-content: center;\n outline: 0;\n appearance: none;\n cursor: pointer;\n}\n\n.trigger svg {\n transition: transform var(--topbar-slight-transition);\n /* Negative margin ensures button is a circle when orgname isn’t visible */\n margin-left: calc(var(--t-spacing-1) * -1);\n margin-right: calc(var(--t-spacing-1) * -1);\n}\n\n.trigger.is-visible svg {\n transform: rotate(180deg);\n}\n\n.trigger-orgname {\n max-width: 240px;\n margin-right: var(--t-spacing-fourth);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.trigger-orgname + svg {\n color: var(--t-fill-color-transparency-dark-050);\n /* Correct margin for when orgname is visible */\n margin-left: 0;\n margin-right: calc(var(--t-spacing-fourth) * -1);\n}\n",".avatar {\n background-color: var(--t-fill-color-transparency-light-020);\n background-position: center;\n background-size: cover;\n border-radius: 50%;\n height: var(--t-element-size-2xl);\n width: var(--t-element-size-2xl);\n margin-left: var(--t-spacing-half);\n}\n",".drawer-wrap {\n width: 100%;\n background-color: var(--t-surface-color-card);\n\n display: none;\n position: fixed;\n top: 0;\n bottom: var(--toolbar-navbar-height);\n\n overflow: hidden;\n}\n.drawer-wrap.is-visible {\n display: block;\n}\n\n.drawer {\n display: flex;\n flex-direction: column;\n height: 100%;\n\n overflow: auto;\n scrollbar-color: var(--t-fill-color-transparency-dark-030);\n scrollbar-width: var(--topbar-scrollbar-width);\n}\n\n@media (min-width: 600px) {\n .drawer-wrap {\n width: var(--toolbar-drawer-width);\n border-radius: 6px; /* TODO: Once a token exists, replace with 6px equivalent \n or inset associated with to --t-border-radius-lg */\n box-shadow: 0 0 0 1px var(--content-wrap-border-color), 0 4px 12px 2px rgba(0, 0, 0, 0.16);\n\n display: block;\n position: absolute;\n bottom: var(--t-spacing-2);\n right: calc(var(--toolbar-drawer-width) * -1);\n top: calc(var(--topbar-height) + var(--t-spacing-1));\n\n opacity: 0;\n transform: translateX(var(--t-spacing-1));\n transition-property: opacity, transform, right;\n transition-duration: 100ms;\n transition-delay: 0s, 0s, 100ms;\n transition-timing-function: ease-in-out;\n }\n .drawer-wrap.is-visible {\n right: calc(var(--toolbar-width) + var(--t-spacing-1) + 1px);\n opacity: 1;\n transform: translateX(0);\n\n transition-property: opacity, transform;\n transition-delay: 0s;\n }\n}\n",".indicator-dot {\n width: 12px;\n height: 12px;\n background: radial-gradient(#33adff 50%, transparent 50%);\n background-color: #33adff;\n box-shadow: inset 0 0 0 2px #b1bfda;\n border-radius: 50%;\n position: absolute;\n z-index: 6;\n pointer-events: none;\n}\n\n.indicator-dot.is-active {\n width: 10px;\n height: 10px;\n box-shadow: inset 0 0 0 2px var(--t-fill-color-neutral-100);\n transform: translateX(-1.5px) translateY(1.5px);\n}\n",".color-mode-switcher {\n color: var(--t-text-color-default-primary); /* Needed to override .tapestry-react-reset. This is the dumbest thing to have to do */\n border: 0;\n padding: 0;\n}\n\n.color-mode-switcher-label {\n font-weight: var(--t-font-weight-semibold);\n display: inline-block;\n margin-bottom: var(--t-spacing-1);\n}\n\n.color-mode-switcher-label-beta {\n font-size: var(--t-font-size-xs);\n font-weight: var(--t-font-weight-semibold);\n color: var(--t-text-color-status-neutral);\n background-color: var(--t-fill-color-status-neutral-ghost);\n border-radius: var(--t-border-radius-sm);\n padding: 0 var(--t-spacing-1);\n line-height: var(--t-element-size-sm);\n vertical-align: middle;\n text-transform: uppercase;\n}\n\n.color-mode-switcher-modes {\n padding: var(--t-spacing-half);\n border: var(--t-border-width-default) solid var(--t-border-color-default-base);\n border-radius: var(--t-border-radius-md);\n display: flex;\n gap: var(--t-spacing-half);\n container-type: inline-size;\n}\n.color-mode-switcher-modes input[type=radio] {\n opacity: 0;\n position: absolute;\n pointer-events: none;\n}\n.color-mode-switcher-modes label {\n border-radius: var(--t-border-radius-sm);\n min-height: var(--t-element-size-xl);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-grow: 1;\n user-select: none;\n margin: 0;\n position: relative;\n}\n.color-mode-switcher-modes label:hover {\n background: var(--t-fill-color-button-neutral-ghost-hover);\n}\n.color-mode-switcher-modes label:has(input:focus-visible) {\n outline: auto;\n}\n.color-mode-switcher-modes svg {\n display: none;\n margin-right: var(--t-spacing-half);\n}\n@container (width >= 256px) {\n .color-mode-switcher-modes svg {\n display: block;\n }\n}\n.color-mode-switcher-modes svg path {\n stroke: var(--t-icon-color-default-dim);\n}\n.color-mode-switcher-modes label,\n.color-mode-switcher-modes svg path {\n transition-property: color, background-color, stroke;\n transition-duration: 0.1s;\n transition-timing-function: linear;\n}\n.color-mode-switcher-modes label:has(input:checked) {\n color: var(--t-text-color-status-info);\n background-color: var(--t-fill-color-status-info-ghost);\n}\n.color-mode-switcher-modes label:has(input:checked) svg path {\n stroke: var(--t-icon-color-status-info-primary);\n}"]}