@planningcenter/topbar 10.20.0-rc.0 → 10.20.0-rc.2

package/dist/topbar.css

@@ -20,7 +20,7 @@
   --toolbar-inner-width: 48px;
   --toolbar-drawer-width: 360px;
   --toolbar-navbar-height: 56px;
-  --content-wrap-border-color: hsl(0 0% 0% / 0.08);
+  --content-wrap-border-color: hsla(0, 0%, 0%, 0.08);
   --content-wrap-shadow-dimensions: 0 -1px 0 0;
 }
 
@@ -34,7 +34,7 @@
   --topbar-nav-link-background-color-hover: var(--t-fill-color-transparency-light-020);
   --topbar-nav-link-background-color-active: var(--t-fill-color-transparency-light-030);
   --topbar-nav-link-border-color-active: var(--t-fill-color-transparency-light-010);
-  --content-wrap-border-color: hsl(0 0% 100% / 0.04);
+  --content-wrap-border-color: hsla(0, 0%, 100%, 0.04);
 }
 
 @media (prefers-color-scheme: dark) {
@@ -42,7 +42,7 @@
     --topbar-nav-link-background-color-hover: var(--t-fill-color-transparency-light-020);
     --topbar-nav-link-background-color-active: var(--t-fill-color-transparency-light-030);
     --topbar-nav-link-border-color-active: var(--t-fill-color-transparency-light-010);
-    --content-wrap-border-color: hsl(0 0% 100% / 0.04);
+    --content-wrap-border-color: hsla(0, 0%, 100%, 0.04);
   }
 }
 /*
@@ -64,61 +64,88 @@ Caused by products overriding .topbar-wrap’s z-index.
 .hide-scrollbar::-webkit-scrollbar {
   display: none; /* Chrome, Safari, and Opera */
 }
+
+:root[data-app-context=native] {
+  --toolbar-navbar-height: 0;
+}
+
+:root[data-app-context=native] .topbar-wrap {
+  display: none;
+}
+
+:root[data-app-context=native] .toolbar-wrap {
+  overflow: hidden;
+}
+
+@media screen and (min-width: 600px) {
+  :root[data-app-context=native] {
+    --toolbar-width: 0px;
+    --topbar-height: 0px;
+    --toolbar-drawer-width: 48vw;
+  }
+  :root[data-app-context=native] .content-wrap {
+    margin: 0 !important;
+    border-radius: 0;
+  }
+  :root[data-app-context=native] .toolbar-wrap {
+    overflow: visible;
+  }
+}
 .accessibility-toolbar-jgjUG {
-    --topbar-accessibility-toolbar-opacity: 0;
-    --topbar-accessibility-toolbar-translate-y: 4px;
-    --topbar-accessibility-toolbar-pointer-events: none;
-    --topbar-accessibility-toolbar-transition: none;
-    --topbar-accessibility-toolbar-min-width: 100%;
+  --topbar-accessibility-toolbar-opacity: 0;
+  --topbar-accessibility-toolbar-translate-y: 4px;
+  --topbar-accessibility-toolbar-pointer-events: none;
+  --topbar-accessibility-toolbar-transition: none;
+  --topbar-accessibility-toolbar-min-width: 100%;
 
-    position: absolute;
-    top: var(--t-spacing-4);
-    left: 50%;
-    transform: translate(-50%, var(--topbar-accessibility-toolbar-translate-y));
-    z-index: 1000;
+  position: absolute;
+  top: var(--t-spacing-4);
+  left: 50%;
+  transform: translate(-50%, var(--topbar-accessibility-toolbar-translate-y));
+  z-index: 1000;
 
-    padding: var(--t-spacing-2);
-    width: max-content;
-    min-width: var(--topbar-accessibility-toolbar-min-width);
-    max-width: 100vw;
-    display: flex;
-    justify-content: center;
-    gap: var(--t-spacing-2);
-    flex-wrap: wrap;
+  padding: var(--t-spacing-2);
+  width: max-content;
+  min-width: var(--topbar-accessibility-toolbar-min-width);
+  max-width: 100vw;
+  display: flex;
+  justify-content: center;
+  gap: var(--t-spacing-2);
+  flex-wrap: wrap;
 
-    border-radius: var(--t-border-radius-md);
-    background: var(--t-surface-color-card);
-    box-shadow: 0 4px 18px 0 var(--t-fill-color-transparency-dark-020);
-    opacity: var(--topbar-accessibility-toolbar-opacity);
+  border-radius: var(--t-border-radius-md);
+  background: var(--t-surface-color-card);
+  box-shadow: 0 4px 18px 0 var(--t-fill-color-transparency-dark-020);
+  opacity: var(--topbar-accessibility-toolbar-opacity);
 
-    pointer-events: var(--topbar-accessibility-toolbar-pointer-events);
-    transition: var(--topbar-accessibility-toolbar-transition);
+  pointer-events: var(--topbar-accessibility-toolbar-pointer-events);
+  transition: var(--topbar-accessibility-toolbar-transition);
 }
 
 .accessibility-toolbar-jgjUG:focus-within {
-    --topbar-accessibility-toolbar-translate-y: 0;
-    --topbar-accessibility-toolbar-opacity: 1;
-    --topbar-accessibility-toolbar-pointer-events: auto;
-    --topbar-accessibility-toolbar-transition: opacity 160ms ease-out, transform 120ms ease-out;
+  --topbar-accessibility-toolbar-translate-y: 0;
+  --topbar-accessibility-toolbar-opacity: 1;
+  --topbar-accessibility-toolbar-pointer-events: auto;
+  --topbar-accessibility-toolbar-transition: opacity 160ms ease-out, transform 120ms ease-out;
 }
-  
+
 #main-content:focus-visible {
-    outline: none;
+  outline: none;
 }
 
 @media (min-width: 600px) {
-    .accessibility-toolbar-jgjUG {
-        --topbar-accessibility-toolbar-min-width: 0;
-    }
-    
-    .accessibility-toolbar-jgjUG:has(:only-child) {
-        --topbar-accessibility-toolbar-min-width: 300px;
-    }
+  .accessibility-toolbar-jgjUG {
+    --topbar-accessibility-toolbar-min-width: 0;
+  }
+  
+  .accessibility-toolbar-jgjUG:has(:only-child) {
+    --topbar-accessibility-toolbar-min-width: 300px;
+  }
 }
 .announcement-pI5tM {
   font-size: var(--t-font-size-sm);
-  color: hsl(0 0% 94%); /* TODO: Replace with static tokens when we get them */
-  background-color: hsl(0 0% 0% / 0.5); /* TODO: Replace with static tokens when we get them */
+  color: hsl(0, 0%, 94%); /* TODO: Replace with static tokens when we get them */
+  background-color: hsla(0, 0%, 0%, 0.5); /* TODO: Replace with static tokens when we get them */
   display: flex;
   align-items: center;
   padding: var(--t-spacing-2);
@@ -126,7 +153,7 @@ Caused by products overriding .topbar-wrap’s z-index.
   box-sizing: border-box;
 }
 .announcement--platform-EcUn2 {
-  background-color: hsl(0 0% 0% / 0.6); /* TODO: Replace with static tokens when we get them */
+  background-color: hsla(0, 0%, 0%, 0.6); /* TODO: Replace with static tokens when we get them */
 }
 
 .announcement-icon-Ov39- {
@@ -210,7 +237,7 @@ Caused by products overriding .topbar-wrap’s z-index.
   color: var(--t-text-color-default-primary);
   font-size: var(--t-font-size-sm);
   font-weight: var(--t-font-weight-medium);
-  margin-left: var(--t-spacing-quarter);
+  margin-left: var(--t-spacing-fourth);
 }
 
 .chevron-RRg9k {
@@ -247,19 +274,17 @@ Caused by products overriding .topbar-wrap’s z-index.
 
 .popup-nQXYW {
   background: var(--t-surface-color-card);
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05),
-              0 4px 12px 2px rgba(0, 0, 0, 0.16);
+  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.05), 0 4px 12px 2px rgba(0, 0, 0, 0.16);
   border-radius: var(--t-border-radius-lg);
   position: absolute;
-
   overflow: auto;
   scrollbar-color: var(--topbar-scrollbar-color);
   scrollbar-width: var(--topbar-scrollbar-width);
-
   opacity: 0;
   visibility: hidden;
   transition: all 120ms ease-in;
 }
+
 .popup-nQXYW.is-visible-3DAUP {
   opacity: 1;
   transition: none;
@@ -271,7 +296,7 @@ Caused by products overriding .topbar-wrap’s z-index.
   font-family: inherit;
   color: var(--topbar-nav-link-font-color) !important; /* Override product-specific :hover/:visited color */
   height: var(--topbar-nav-link-height);
-  border: 1px solid var(--topbar-nav-link-border-color);
+  border: var(--t-border-width-default) solid var(--topbar-nav-link-border-color);
   display: inline-flex;
   align-items: center;
   text-decoration: none;
@@ -324,7 +349,7 @@ Caused by products overriding .topbar-wrap’s z-index.
   height: var(--topbar-nav-link-height);
   background-color: var(--topbar-nav-link-background-color-active);
   padding: 0 var(--topbar-nav-link-padding-x);
-  border: 1px solid var(--topbar-nav-link-border-color-active);
+  border: var(--t-border-width-default) solid var(--topbar-nav-link-border-color-active);
   border-radius: var(--topbar-nav-link-border-radius);
   min-width: var(--t-container-size-md);
   transition: var(--topbar-nav-link-transition);
@@ -386,9 +411,8 @@ Caused by products overriding .topbar-wrap’s z-index.
 }
 
 .appmenu-layer-0IQpN {
-  color: black;
+  color: var(--t-text-color-default-headline);
   background-color: var(--t-fill-color-transparency-dark-static-070);
-
   display: none;
   position: fixed;
   top: 0;
@@ -396,7 +420,6 @@ Caused by products overriding .topbar-wrap’s z-index.
   left: 0;
   right: 0;
   z-index: 100;
-
   user-select: none;
   -webkit-tap-highlight-color: transparent;
 }
@@ -434,11 +457,11 @@ Caused by products overriding .topbar-wrap’s z-index.
 }
 .appmenu-list-a--top-RT-2F {
   min-height: var(--t-container-size-xl);
-  border-bottom: 1px solid var(--t-border-color-default-base);
+  border-bottom: var(--t-border-width-default) solid var(--t-border-color-default-base);
 }
 .appmenu-list-a--bottom-YDeBC {
   min-height: var(--t-container-size-xl);
-  border-top: 1px solid var(--t-border-color-default-base);
+  border-top: var(--t-border-width-default) solid var(--t-border-color-default-base);
 }
 .appmenu-list-a--bottom-YDeBC svg {
   display: block;
@@ -492,9 +515,7 @@ Caused by products overriding .topbar-wrap’s z-index.
   left: 50%;
   transform: translateX(-50%);
   max-height: calc(100% - var(--topbar-height) - 1px);
-  box-shadow: 0px 0px 0px 1px hsla(0, 0%, 0%, 0.05),
-              0px 4px 12px 2px hsla(0, 0%, 0%, 0.16);
-
+  box-shadow: 0 0 0 1px hsla(0, 0%, 0%, 0.05), 0 4px 12px 2px hsla(0, 0%, 0%, 0.16);
   overflow: auto;
   scrollbar-color: var(--topbar-scrollbar-color);
   scrollbar-width: var(--topbar-scrollbar-width);
@@ -558,9 +579,9 @@ Caused by products overriding .topbar-wrap’s z-index.
 @media (min-width: 600px) {
   .drawer-wrap-J0rSL {
     width: var(--toolbar-drawer-width);
-    border-radius: 6px; /* TODO: Once a token exists, replace with 6px equivalent or inset associated with to --t-border-radius-lg */
-    box-shadow: 0 0 0 1px var(--content-wrap-border-color),
-                0 4px 12px 2px rgba(0, 0, 0, 0.16);
+    border-radius: 6px; /* TODO: Once a token exists, replace with 6px equivalent 
+    or inset associated with to --t-border-radius-lg */
+    box-shadow: 0 0 0 1px var(--content-wrap-border-color), 0 4px 12px 2px rgba(0, 0, 0, 0.16);
 
     display: block;
     position: absolute;
@@ -588,18 +609,19 @@ Caused by products overriding .topbar-wrap’s z-index.
 .indicator-dot-MdX3N {
   width: 12px;
   height: 12px;
-  background-color: #33adff;
   background: radial-gradient(#33adff 50%, transparent 50%);
-  box-shadow: inset 0px 0px 0px 2px #b1bfda;
+  background-color: #33adff;
+  box-shadow: inset 0 0 0 2px #b1bfda;
   border-radius: 50%;
   position: absolute;
   z-index: 6;
   pointer-events: none;
 }
+
 .indicator-dot-MdX3N.is-active-mlX23 {
   width: 10px;
   height: 10px;
-  box-shadow: inset 0px 0px 0px 2px var(--t-fill-color-neutral-100);
+  box-shadow: inset 0 0 0 2px var(--t-fill-color-neutral-100);
   transform: translateX(-1.5px) translateY(1.5px);
 }
 
@@ -618,7 +640,7 @@ Caused by products overriding .topbar-wrap’s z-index.
 .color-mode-switcher-label-beta-pwv5t {
   font-size: var(--t-font-size-xs);
   font-weight: var(--t-font-weight-semibold);
-  color: var(--t-text-color-status-secondary);
+  color: var(--t-text-color-status-neutral);
   background-color: var(--t-fill-color-status-neutral-ghost);
   border-radius: var(--t-border-radius-sm);
   padding: 0 var(--t-spacing-1);
@@ -629,7 +651,7 @@ Caused by products overriding .topbar-wrap’s z-index.
 
 .color-mode-switcher-modes-u-bic {
   padding: var(--t-spacing-half);
-  border: 1px solid var(--t-border-color-default-base);
+  border: var(--t-border-width-default) solid var(--t-border-color-default-base);
   border-radius: var(--t-border-radius-md);
   display: flex;
   gap: var(--t-spacing-half);
@@ -659,15 +681,13 @@ Caused by products overriding .topbar-wrap’s z-index.
 }
 .color-mode-switcher-modes-u-bic svg {
   display: none;
+  margin-right: var(--t-spacing-half);
 }
 @container (width >= 256px) {
   .color-mode-switcher-modes-u-bic svg {
     display: block;
   }
 }
-.color-mode-switcher-modes-u-bic svg {
-  margin-right: var(--t-spacing-half);
-}
 .color-mode-switcher-modes-u-bic svg path {
   stroke: var(--t-icon-color-default-dim);
 }
@@ -697,7 +717,7 @@ Caused by products overriding .topbar-wrap’s z-index.
   font: inherit;
   color: var(--t-fill-color-transparency-dark-060);
   background-color: transparent;
-  border: 1px solid transparent;
+  border: var(--t-border-width-default) solid transparent;
   border-radius: var(--t-border-radius-lg);
   flex-grow: 1;
   transition: var(--topbar-slight-transition-background);
@@ -727,7 +747,7 @@ Caused by products overriding .topbar-wrap’s z-index.
 }
 
 .toolbar-button--home-Pthd0 {
-  color: hsl(221 93% 55%);
+  color: hsl(221, 93%, 55%);
 }
 
 @media (min-width: 600px) {

package/dist/topbar.css.map

@@ -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","drawer.module.css","indicator_dot.module.css","color_mode_switcher.module.scss"],"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\"]) .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: 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 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",".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}"]}
+{"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":"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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: 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}"]}

package/dist/topbar.js

@@ -13,7 +13,7 @@ var people = require('@planningcenter/icons/paths/people');
 var toolbar = require('@planningcenter/icons/paths/toolbar');
 var reactCalendly = require('react-calendly');
 var algoliasearch = require('algoliasearch');
-var reactInstantsearch = require('react-instantsearch');
+var reactInstantsearchCore = require('react-instantsearch-core');
 var reactTransitionGroup = require('react-transition-group');
 var datetimeFmt = require('@planningcenter/datetime-fmt');
 
@@ -2007,6 +2007,31 @@ const sortByAttribute = attr => arr => arr.slice().sort((a, b) => a[attr].locale
 const appsMenuFormatter = apps => sortByAttribute("name")(apps).reduce((acc, item) => (item.name || "") === "Church Center" || (item.name || "") === "API" ? acc : item.name === "Home" ? [item, ...acc] : [...acc, item], []);
 const connectedPeopleMenuFormatter = connectedPeople => connectedPeople.slice().sort((a, b) => a.attributes["organization_name"].localeCompare(b.attributes["organization_name"]));
 
+const useSetCurrentRouteInfo = ({
+  routes,
+  app
+}) => {
+  React.useEffect(() => {
+    if (window.topbar) {
+      window.topbar.routeInfo = {
+        currentApp: app,
+        currentRoutes: routes.map(({
+          key,
+          props: {
+            to,
+            href,
+            active
+          }
+        }) => ({
+          active,
+          name: key,
+          url: to ?? href
+        }))
+      };
+    }
+  }, [routes, app]);
+};
+
 const useStore = (selector = state => state) => shim.useSyncExternalStore(store$1.subscribe, () => selector(store$1.getState()));
 
 const useUpdateStore = () => React.useCallback(updates => {
@@ -2253,6 +2278,10 @@ const NotSmallTopbar = ({
       document.removeEventListener("click", handleToolbarClick, true);
     };
   }, [userMenuVisible]);
+  useSetCurrentRouteInfo({
+    app: props.appName,
+    routes: props.routes
+  });
   return /*#__PURE__*/React.createElement(StyledRoot, {
     style: {
       paddingLeft: "16px",
@@ -2423,6 +2452,10 @@ const SmallTopbar = ({
   }) => active) || [];
   const CurrentRouteComponent = currentRouteComponent;
   const currentRouteText = activeRoute && activeRoute[0] && activeRoute[0].props && activeRoute[0].props.children || props.appName;
+  useSetCurrentRouteInfo({
+    app: props.appName,
+    routes: props.routes
+  });
   const accountsProduct = props.apps.find(({
     name
   }) => name === "Accounts");
@@ -3199,11 +3232,11 @@ const CustomSearchBox = ({
   const {
     query,
     refine: setQuery
-  } = reactInstantsearch.useSearchBox();
+  } = reactInstantsearchCore.useSearchBox();
   const {
     hits,
     results
-  } = reactInstantsearch.useHits();
+  } = reactInstantsearchCore.useHits();
   const groups = results?.hits.reduce((acc, hit) => {
     const key = hit.category.title;
     if (!acc[key]) {
@@ -3276,10 +3309,10 @@ const DocumentationSearch = ({
     }
   } = useStore();
   const searchClient = algoliasearch(algoliaApplicationId, algoliaSearchOnlyApiKey);
-  return /*#__PURE__*/React.createElement(reactInstantsearch.InstantSearch, {
+  return /*#__PURE__*/React.createElement(reactInstantsearchCore.InstantSearch, {
     indexName: indexName,
     searchClient: searchClient
-  }, /*#__PURE__*/React.createElement(reactInstantsearch.Configure, {
+  }, /*#__PURE__*/React.createElement(reactInstantsearchCore.Configure, {
     hitsPerPage: 5
   }), /*#__PURE__*/React.createElement(CustomSearchBox, {
     currentAppName: currentAppName,