@planningcenter/topbar 12.4.1 → 12.5.0-qa-988.0

package/dist/topbar.module.js

@@ -1,4 +1,4 @@
-import { Link, Button, Popover, PopoverTrigger, PopoverContent, Modal } from '@planningcenter/tapestry';
+import { Link, Button, Popover, PopoverTrigger, PopoverContent, Flex, Select, IconButton, Modal } from '@planningcenter/tapestry';
 import * as React from 'react';
 import React__default, { useState, useEffect, useMemo, useLayoutEffect, useContext, createContext, useCallback, useRef } from 'react';
 import pcoUrl$1, { pcoUrl as pcoUrl$2, pcoApiUrl } from '@planningcenter/url';
@@ -6,18 +6,20 @@ import * as general from '@planningcenter/icons/paths/general';
 import Jolt from '@planningcenter/jolt-client';
 import { useSyncExternalStore } from 'use-sync-external-store/shim';
 import 'react/jsx-runtime';
+import * as toolbar from '@planningcenter/icons/paths/toolbar';
+import datetimeFmt from '@planningcenter/datetime-fmt';
+import pluralize from 'pluralize';
+import * as logomarks from '@planningcenter/icons/paths/logomark';
 import { ThemeProvider, Divider, Button as Button$1, StackView as StackView$2, Text, Icon as Icon$1, designSystem, Box, Heading, GridView, Avatar as Avatar$1, Link as Link$1, HeadingUppercase, List, Combobox, Logo, Dropdown, Spinner, Badge } from '@planningcenter/tapestry-react';
 import { components, UiExtensionFirstPartyComponent, UiExtensionDataContext } from '@planningcenter/add-ons';
 import * as churchCenter from '@planningcenter/icons/paths/church-center';
 import * as people from '@planningcenter/icons/paths/people';
-import * as toolbar from '@planningcenter/icons/paths/toolbar';
 import { InlineWidget } from 'react-calendly';
 import algoliasearch from 'algoliasearch';
 import { useSearchBox, useHits, InstantSearch, Configure } from 'react-instantsearch-core';
 import { TransitionGroup, Transition } from 'react-transition-group';
-import datetimeFmt from '@planningcenter/datetime-fmt';
 
-var styles$m = {"accessibility-toolbar":"accessibility-toolbar-jgjUG"};
+var styles$u = {"accessibility-toolbar":"accessibility-toolbar-jgjUG"};
 
 const AccessibilityToolbar = ({
   children
@@ -29,7 +31,7 @@ const AccessibilityToolbar = ({
     (_a = document.getElementById("main-content")) === null || _a === void 0 ? void 0 : _a.focus();
   };
   return /*#__PURE__*/React__default.createElement("div", {
-    className: styles$m["accessibility-toolbar"]
+    className: styles$u["accessibility-toolbar"]
   }, /*#__PURE__*/React__default.createElement(Link, {
     href: "#main-content",
     kind: "primary",
@@ -348,11 +350,11 @@ const X = ({
   fill: fill
 })));
 
-var styles$l = {"announcement":"announcement-pI5tM","announcement--platform":"announcement--platform-EcUn2","announcement--promo":"announcement--promo-FarUk","announcement-icon":"announcement-icon-Ov39-","announcement-content":"announcement-content-q2ad6","dismiss":"dismiss-wUAoU","dismiss--promo":"dismiss--promo-7zvO4"};
+var styles$t = {"announcement":"announcement-pI5tM","announcement--platform":"announcement--platform-EcUn2","announcement--promo":"announcement--promo-FarUk","announcement-icon":"announcement-icon-Ov39-","announcement-content":"announcement-content-q2ad6","dismiss":"dismiss-wUAoU","dismiss--promo":"dismiss--promo-7zvO4"};
 
 function AnnouncementIcon() {
   return /*#__PURE__*/React__default.createElement("svg", {
-    className: styles$l["announcement-icon"],
+    className: styles$t["announcement-icon"],
     width: "16",
     height: "16",
     viewBox: "0 0 16 16",
@@ -477,7 +479,7 @@ let StyledAnnouncement$1 = class StyledAnnouncement extends React__default.Compo
     } = this.props;
     const isPromo = variant === "promo";
     return /*#__PURE__*/React__default.createElement("div", {
-      className: classnames(styles$l["announcement"], styles$l[`announcement--${variant !== null && variant !== void 0 ? variant : "platform"}`]),
+      className: classnames(styles$t["announcement"], styles$t[`announcement--${variant !== null && variant !== void 0 ? variant : "platform"}`]),
       "data-announcement-variant": variant !== null && variant !== void 0 ? variant : "platform",
       style: isPromo ? {
         backgroundImage: promoBackgroundUrl,
@@ -486,7 +488,7 @@ let StyledAnnouncement$1 = class StyledAnnouncement extends React__default.Compo
         backgroundSize: "cover"
       } : undefined
     }, !isPromo && /*#__PURE__*/React__default.createElement(AnnouncementIcon, null), /*#__PURE__*/React__default.createElement("div", {
-      className: styles$l["announcement-content"],
+      className: styles$t["announcement-content"],
       style: style,
       ...platformProps
     }));
@@ -535,7 +537,7 @@ function StyledDismissButton$1({
   const isPromo = variant === "promo";
   return /*#__PURE__*/React__default.createElement("button", {
     type: "button",
-    className: classnames(styles$l.dismiss, isPromo && styles$l["dismiss--promo"]),
+    className: classnames(styles$t.dismiss, isPromo && styles$t["dismiss--promo"]),
     ...props
   }, /*#__PURE__*/React__default.createElement(X, {
     fill: isPromo ? "currentColor" : "white",
@@ -615,9 +617,9 @@ class StyledAnnouncement extends React__default.Component {
       ...platformProps
     } = this.props;
     return /*#__PURE__*/React__default.createElement("div", {
-      className: styles$l["announcement"]
+      className: styles$t["announcement"]
     }, /*#__PURE__*/React__default.createElement(AnnouncementIcon, null), /*#__PURE__*/React__default.createElement("div", {
-      className: styles$l["announcement-content"],
+      className: styles$t["announcement-content"],
       style: style,
       ...platformProps
     }));
@@ -628,7 +630,7 @@ function StyledDismissButton({
 }) {
   return /*#__PURE__*/React__default.createElement("button", {
     type: "button",
-    className: styles$l.dismiss,
+    className: styles$t.dismiss,
     ...props
   }, /*#__PURE__*/React__default.createElement(X, {
     fill: "white",
@@ -1750,7 +1752,7 @@ function MonoAppIcon({
   })) : (/*#__PURE__*/React__default.createElement("div", null, "appName not supported")));
 }
 
-var styles$k = {"icon-slot":"icon-slot-m3ZIk","name":"name-UNqbW"};
+var styles$s = {"name":"name-UNqbW"};
 
 const AppRow = ({
   appName,
@@ -1758,25 +1760,23 @@ const AppRow = ({
   iconSize = 24
 }) => {
   if (appName === "Accounts") {
-    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("span", {
-      className: styles$k["icon-slot"]
-    }, /*#__PURE__*/React__default.createElement(MonoAppIcon, {
+    return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(MonoAppIcon, {
       appName: "Accounts",
       colors: colors,
       size: iconSize
-    })), /*#__PURE__*/React__default.createElement("span", {
-      className: styles$k.name
+    }), /*#__PURE__*/React__default.createElement("span", {
+      className: styles$s.name
     }, "Account settings"));
   }
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ColorAppIcon, {
     appName: appName.replace(/[\s-]/, ""),
     size: iconSize
   }), /*#__PURE__*/React__default.createElement("span", {
-    className: styles$k.name
+    className: styles$s.name
   }, appName));
 };
 
-var styles$j = {"button":"button-XMbeQ","label":"label-884of","chevron":"chevron-RRg9k"};
+var styles$r = {"button":"button-XMbeQ","label":"label-884of","chevron":"chevron-RRg9k"};
 
 const AppsButton = /*#__PURE__*/React__default.forwardRef(({
   appName,
@@ -1788,27 +1788,27 @@ const AppsButton = /*#__PURE__*/React__default.forwardRef(({
     ...restProps,
     ref: ref,
     "aria-label": `App switcher: ${appName}`,
-    className: styles$j.button,
+    className: styles$r.button,
     kind: "neutral-inline",
     label: /*#__PURE__*/React__default.createElement("span", {
-      className: styles$j.label
+      className: styles$r.label
     }, isAccounts ? "Account settings" : appName),
     prefix: isAccounts ? (/*#__PURE__*/React__default.createElement(MonoAppIcon, {
       appName: "Accounts",
       colors: colors,
-      size: 22
+      size: 24
     })) : (/*#__PURE__*/React__default.createElement(ColorAppIcon, {
       appName: appName.replace(/[\s-]/, ""),
-      size: 22
+      size: 24
     })),
     suffix: /*#__PURE__*/React__default.createElement(DisclosureChevronIcon, {
-      className: `${styles$j.chevron} symbol`
+      className: `${styles$r.chevron} symbol`
     })
   });
 });
 AppsButton.displayName = "AppsButton";
 
-var styles$i = {"nav":"nav-y-6ML","popover-content":"popover-content-jOAAY","list":"list-jUxvp","link":"link-LMp2h","current":"current-4U4VL","accounts-item":"accounts-item-erJW0","accounts-link":"accounts-link-4jwPW"};
+var styles$q = {"nav":"nav-y-6ML","popover-content":"popover-content-jOAAY","list":"list-jUxvp","link":"link-LMp2h","current":"current-4U4VL","accounts-item":"accounts-item-erJW0","accounts-link":"accounts-link-4jwPW"};
 
 const AppsMenu = ({
   appName,
@@ -1829,8 +1829,8 @@ const AppsMenu = ({
     }, /*#__PURE__*/React__default.createElement("a", {
       "aria-current": isCurrent ? "page" : undefined,
       "aria-label": name,
-      className: classnames(styles$i.link, {
-        [styles$i.current]: isCurrent
+      className: classnames(styles$q.link, {
+        [styles$q.current]: isCurrent
       }),
       "data-pendo": `app-switcher--change-app--${name}`,
       "data-turbolinks": false,
@@ -1846,22 +1846,22 @@ const AppsMenu = ({
     colors: colors
   })), /*#__PURE__*/React__default.createElement(PopoverContent, {
     "aria-label": "Switch app",
-    className: styles$i["popover-content"],
+    className: styles$q["popover-content"],
     placement: "bottom start"
   }, /*#__PURE__*/React__default.createElement("nav", {
-    className: styles$i.nav,
+    className: styles$q.nav,
     "data-pendo": "app-switcher"
   }, /*#__PURE__*/React__default.createElement("ul", {
-    className: styles$i.list,
+    className: styles$q.list,
     role: "list"
   }, homeProduct && renderProductLink(homeProduct.name), restProducts.map(({
     name
   }) => renderProductLink(name)), accountsProduct && (/*#__PURE__*/React__default.createElement("li", {
-    className: styles$i["accounts-item"]
+    className: styles$q["accounts-item"]
   }, /*#__PURE__*/React__default.createElement("a", {
     "aria-current": appName === accountsProduct.name ? "page" : undefined,
     "aria-label": "Account settings",
-    className: classnames(styles$i.link, styles$i["accounts-link"]),
+    className: classnames(styles$q.link, styles$q["accounts-link"]),
     "data-pendo": "app-switcher--change-app--Accounts",
     "data-turbolinks": false,
     href: pcoUrl$1(env)("accounts") + getAppsSwitchProductPath(accountsProduct.name)
@@ -2069,7 +2069,7 @@ function MonoAppName({
   })) : (/*#__PURE__*/React__default.createElement("div", null, "appName not supported"));
 }
 
-var styles$h = {"unbutton":"unbutton-lEbTR"};
+var styles$p = {"unbutton":"unbutton-lEbTR"};
 
 function Unbutton({
   className,
@@ -2078,7 +2078,7 @@ function Unbutton({
   ...nativeProps
 }) {
   return /*#__PURE__*/React__default.createElement("button", {
-    className: classnames(styles$h.unbutton, className),
+    className: classnames(styles$p.unbutton, className),
     style: {
       ...style
     },
@@ -2087,7 +2087,7 @@ function Unbutton({
   });
 }
 
-var styles$g = {"button":"button-wsipc","button-accounts":"button-accounts-zQmBM","chevron":"chevron-obyBF","is-expanded":"is-expanded-PoCQ9"};
+var styles$o = {"button":"button-wsipc","button-accounts":"button-accounts-zQmBM","chevron":"chevron-obyBF","is-expanded":"is-expanded-PoCQ9"};
 
 const LegacyAppsButton = ({
   appName,
@@ -2102,8 +2102,8 @@ const LegacyAppsButton = ({
     "aria-haspopup": "true",
     "aria-label": `App switcher: ${appName}`,
     onClick: onClick,
-    className: classnames(styles$g.button, {
-      [styles$g["is-expanded"]]: expanded
+    className: classnames(styles$o.button, {
+      [styles$o["is-expanded"]]: expanded
     }),
     type: "button",
     style: style,
@@ -2112,7 +2112,7 @@ const LegacyAppsButton = ({
     appName: "Accounts",
     colors: colors
   }), /*#__PURE__*/React__default.createElement("div", {
-    className: styles$g["button-accounts"]
+    className: styles$o["button-accounts"]
   }, "Account settings"))) : (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(ColorAppIcon, {
     appName: appName.replace(/[\s-]/, "")
   }), /*#__PURE__*/React__default.createElement(MonoAppName, {
@@ -2120,7 +2120,7 @@ const LegacyAppsButton = ({
     key: "mono-app-name",
     size: 24
   }))), /*#__PURE__*/React__default.createElement(DisclosureChevronIcon, {
-    className: styles$g.chevron,
+    className: styles$o.chevron,
     key: "disclosure-chevron-icon"
   }));
 };
@@ -2253,7 +2253,7 @@ class Outsider extends React__default.Component {
   }
 }
 
-var styles$f = {"popup-root":"popup-root-SeL5u","popup":"popup-nQXYW","is-visible":"is-visible-3DAUP"};
+var styles$n = {"popup-root":"popup-root-SeL5u","popup":"popup-nQXYW","is-visible":"is-visible-3DAUP"};
 
 const Popup = ({
   className,
@@ -2261,8 +2261,8 @@ const Popup = ({
   isVisible,
   ...nativeProps
 }) => (/*#__PURE__*/React__default.createElement(C, {
-  className: classnames(styles$f.popup, {
-    [styles$f["is-visible"]]: isVisible
+  className: classnames(styles$n.popup, {
+    [styles$n["is-visible"]]: isVisible
   }, className),
   ...nativeProps
 }));
@@ -2270,11 +2270,11 @@ const Popup = ({
 const PopupRoot = ({
   ...nativeProps
 }) => (/*#__PURE__*/React__default.createElement("div", {
-  className: styles$f["popup-root"],
+  className: styles$n["popup-root"],
   ...nativeProps
 }));
 
-var styles$e = {"popup":"popup-bVhSa"};
+var styles$m = {"popup":"popup-bVhSa"};
 
 const LegacyAppsMenu = ({
   appName,
@@ -2312,7 +2312,7 @@ const LegacyAppsMenu = ({
     cleanup: !visible,
     component: Outsider,
     onOutsideClick: toggle,
-    className: styles$e.popup,
+    className: styles$m.popup,
     isVisible: visible
   }, /*#__PURE__*/React__default.createElement("menu", {
     ref: menuRef,
@@ -3222,37 +3222,140 @@ const useUpdateStore = () => useCallback(updates => {
   });
 }, []);
 
+const collections = {
+  general,
+  toolbar
+};
+const paths = collections;
+function Icon({
+  name,
+  size = 16,
+  style,
+  theme,
+  title,
+  ...props
+}) {
+  const [collection, symbol] = name.split(".");
+  return /*#__PURE__*/React__default.createElement("svg", {
+    "aria-hidden": title ? undefined : true,
+    fill: "currentColor",
+    height: size,
+    role: title ? "img" : undefined,
+    style: {
+      color: theme && `var(${theme})`,
+      flexShrink: 0,
+      ...style
+    },
+    viewBox: "0 0 16 16",
+    width: size,
+    ...props
+  }, title && /*#__PURE__*/React__default.createElement("title", null, title), /*#__PURE__*/React__default.createElement("path", {
+    d: paths[collection][symbol]
+  }));
+}
+
+const SEARCHABLE_PRODUCTS = [{
+  appName: "Calendar",
+  slug: "calendar"
+}, {
+  appName: "Check-Ins",
+  slug: "check-ins"
+}, {
+  appName: "Giving",
+  slug: "giving"
+}, {
+  appName: "Groups",
+  slug: "groups"
+}, {
+  appName: "People",
+  slug: "people"
+}, {
+  appName: "Publishing",
+  slug: "publishing"
+}, {
+  appName: "Registrations",
+  slug: "registrations"
+}, {
+  appName: "Services",
+  slug: "services"
+}];
+const KEYBOARD_SHORTCUTS = {
+  copyLink: {
+    key: "c",
+    label: "Copy link",
+    modifierKey: true
+  },
+  openInNewTab: {
+    label: "Open in new tab"},
+  openSearch: {
+    key: "k",
+    label: "Open search",
+    modifierKey: true
+  },
+  select: {
+    label: "Select",
+    modifierKey: false,
+    next: "ArrowDown",
+    previous: "ArrowUp"
+  }
+};
+
 const isMac = () => /Mac|iPhone|iPad|iPod/.test(navigator.platform);
 const hasCommandKey = event => isMac() ? event.metaKey : event.ctrlKey;
-const commandKeyLabel = () => isMac() ? "⌘" : "Ctrl+";
-const isSearchShortcut = event => event.key.toLowerCase() === "k" && !event.altKey && !event.shiftKey && hasCommandKey(event);
+const matchesShortcut = (shortcut, event) => event.key.toLowerCase() === shortcut.key && !event.altKey && !event.shiftKey && hasCommandKey(event) === shortcut.modifierKey;
+const isSearchShortcut = event => matchesShortcut(KEYBOARD_SHORTCUTS.openSearch, event);
 // Products opened their own search with `/` before this one replaced it.
 const isLegacySearchShortcut = event => event.key === "/" && !event.altKey && !event.ctrlKey && !event.metaKey && !isTypingIn(event.target);
-const isCopyShortcut = event => event.key.toLowerCase() === "c" && !event.altKey && !event.shiftKey && hasCommandKey(event);
+const isCopyShortcut = event => matchesShortcut(KEYBOARD_SHORTCUTS.copyLink, event);
 const isTypingIn = target => target instanceof Element && target.closest('input, select, textarea, [contenteditable]:not([contenteditable="false"])') !== null;
 const isTypingKey = event => event.key.length === 1 && event.key !== " " && !event.altKey && !event.ctrlKey && !event.metaKey;
 const verticalStep = key => ({
-  ArrowDown: 1,
-  ArrowUp: -1
+  [KEYBOARD_SHORTCUTS.select.next]: 1,
+  [KEYBOARD_SHORTCUTS.select.previous]: -1
 })[key];
 const horizontalStep = key => ({
   ArrowLeft: -1,
   ArrowRight: 1
 })[key];
 
+var styles$l = {"searchButton":"searchButton-fYa5-"};
+
 function SearchButton({
+  mobile = false,
   onClick
 }) {
   return /*#__PURE__*/React__default.createElement("button", {
-    "aria-keyshortcuts": `${isMac() ? "Meta+K" : "Control+K"} /`,
+    "aria-keyshortcuts": mobile ? undefined : `${isMac() ? "Meta" : "Control"}+${KEYBOARD_SHORTCUTS.openSearch.key.toUpperCase()} /`,
     "aria-label": "Search",
+    className: styles$l.searchButton,
+    "data-search-button": true,
     onClick: onClick,
     type: "button"
-  }, /*#__PURE__*/React__default.createElement(Spyglass, {
-    fill: "currentColor"
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    name: "general.search",
+    size: mobile ? 18 : 14
   }));
 }
 
+// With the search's own debounce, about 1.4 seconds after the last keystroke,
+// as in GOV.UK's accessible-autocomplete.
+const ANNOUNCEMENT_DELAY_MS = 1100;
+// Screen readers echo typing themselves, as each person has set them to, so
+// the message waits until typing settles instead of talking over it. Waiting
+// also lets VoiceOver finish what focus had to say, since it often skips a
+// change made as focus moves, as when a tab with cached results is selected,
+// and only the tab someone stops on when arrowing through them is announced.
+// The region empties at once, so a message that comes back is read again.
+function useAnnouncement(message) {
+  const [announcement, setAnnouncement] = React__default.useState(null);
+  React__default.useEffect(() => {
+    setAnnouncement(null);
+    const timeout = setTimeout(() => setAnnouncement(message), ANNOUNCEMENT_DELAY_MS);
+    return () => clearTimeout(timeout);
+  }, [message]);
+  return announcement;
+}
+
 // useId isn't available on React 17, which our peer range still supports.
 let instanceCount$1 = 0;
 function useInstanceId(prefix) {
@@ -3522,7 +3625,7 @@ const store = createStore(getAllPcoMeta());
 const recentlyVisitableMetadataStore = createStore({
   metadata: getRecentlyVisitableMetadata()
 });
-function sync() {
+function sync$1() {
   const nextState = getAllPcoMeta();
   if (!shallowCompare(store.getState(), nextState)) store.setState(nextState);
   const metadata = getRecentlyVisitableMetadata();
@@ -3532,7 +3635,7 @@ function sync() {
     });
   }
 }
-const observer = new MutationObserver(sync);
+const observer = new MutationObserver(sync$1);
 let hasTriggeredObserve = false;
 function observe() {
   if (hasTriggeredObserve) return;
@@ -3543,7 +3646,7 @@ function observe() {
   // never mutate afterward, so the observer alone would never catch them.
   // Re-read once now, since observe() is only called once a consumer is
   // actually mounting, which is always after the document has fully parsed.
-  sync();
+  sync$1();
   observer.observe(document.head, {
     attributes: true,
     childList: true,
@@ -3559,21 +3662,19 @@ function useRecentlyVisitableMetadata() {
   return useSyncExternalStore(recentlyVisitableMetadataStore.subscribe, () => recentlyVisitableMetadataStore.getState().metadata);
 }
 
-// Entries match the ones home-mobile stores, so one list can sync across web
-// and mobile.
-const ENTRY_VERSION = 3;
 const MAX_ENTRIES = 50;
+const MAX_ENTRY_BYTES = 1024;
 const MAX_TEXT_LENGTH = 200;
-const PRODUCTS = ["accounts", "calendar", "check-ins", "giving", "groups", "home", "login", "people", "publishing", "registrations", "services"];
+const PRODUCTS$1 = ["accounts", "calendar", "check-ins", "giving", "groups", "home", "login", "people", "publishing", "registrations", "services"];
 // Login has no pages worth returning to.
-const APPS = PRODUCTS.filter(product => product !== "login");
+const APPS = PRODUCTS$1.filter(product => product !== "login");
 function isId(value) {
   return value !== "" && Array.from(value).every(character => character >= "0" && character <= "9");
 }
 // A PCRL looks like `<product>/v2/<resource_type>/<id>`.
 function isPcrl(value) {
   const segments = value.split("/");
-  return segments.length === 4 && PRODUCTS.some(product => product === segments[0]) && isId(segments[3]);
+  return segments.length === 4 && PRODUCTS$1.some(product => product === segments[0]) && isId(segments[3]);
 }
 function isApp(value) {
   return APPS.some(app => app === value);
@@ -3609,8 +3710,8 @@ function entryKey(entry) {
     return `page:${entry.app}:${entry.path.split("?")[0]}`;
   }
 }
-function isEntry(value) {
-  if (!isRecord(value) || value.version !== ENTRY_VERSION || typeof value.visitedAt !== "string") {
+function hasEntryShape(value) {
+  if (!isRecord(value) || typeof value.visitedAt !== "string") {
     return false;
   } else if (value.type === "resource") {
     return typeof value.pcrl === "string" && isPcrl(value.pcrl);
@@ -3620,15 +3721,38 @@ function isEntry(value) {
     return false;
   }
 }
+function utf8Length(value) {
+  return Array.from(value).reduce((length, character) => {
+    var _a;
+    const codePoint = (_a = character.codePointAt(0)) !== null && _a !== void 0 ? _a : 0;
+    if (codePoint < 0x80) {
+      return length + 1;
+    } else if (codePoint < 0x800) {
+      return length + 2;
+    } else if (codePoint < 0x10000) {
+      return length + 3;
+    } else {
+      return length + 4;
+    }
+  }, 0);
+}
+function excessBytes(entry) {
+  return utf8Length(JSON.stringify(entry)) - MAX_ENTRY_BYTES;
+}
+// user-store-sync rejects a whole write over one entry above its size limit,
+// so an entry that can't fit isn't one this list can hold.
+function isEntry(value) {
+  return hasEntryShape(value) && excessBytes(value) <= 0;
+}
 // Cuts on code points so a surrogate pair is never split.
 function clampText(value) {
   return Array.from(value).slice(0, MAX_TEXT_LENGTH).join("");
 }
-function clampMetadata({
+function metadataFrom({
   details,
   type
 }) {
-  return {
+  const metadata = {
     ...(details && {
       details: clampText(details)
     }),
@@ -3636,39 +3760,124 @@ function clampMetadata({
       type: clampText(type)
     })
   };
+  return Object.keys(metadata).length > 0 ? {
+    metadata
+  } : {};
+}
+function pageEntry({
+  app,
+  path,
+  visitedAt
+}, {
+  details,
+  title,
+  type
+}) {
+  return {
+    app,
+    ...metadataFrom({
+      details,
+      type
+    }),
+    path,
+    title: clampText(title),
+    type: "page",
+    visitedAt
+  };
+}
+function texts(entry) {
+  var _a, _b, _c, _d;
+  return {
+    details: (_b = (_a = entry.metadata) === null || _a === void 0 ? void 0 : _a.details) !== null && _b !== void 0 ? _b : "",
+    title: entry.title,
+    type: (_d = (_c = entry.metadata) === null || _c === void 0 ? void 0 : _c.type) !== null && _d !== void 0 ? _d : ""
+  };
+}
+function jsonBytes(value) {
+  return utf8Length(JSON.stringify(value)) - 2;
+}
+function longestText(entry) {
+  return Object.entries(texts(entry)).reduce((longest, candidate) => jsonBytes(candidate[1]) > jsonBytes(longest[1]) ? candidate : longest);
 }
-function clampVisit(visit) {
-  if (visit.type === "resource") {
-    return visit;
+// Takes whole characters off the end until at least `excess` bytes are gone,
+// so a surrogate pair is never split.
+function shortenBy(value, excess, minLength) {
+  var _a;
+  const characters = Array.from(value);
+  let removed = 0;
+  while (characters.length > minLength && removed < excess) {
+    removed += jsonBytes((_a = characters.pop()) !== null && _a !== void 0 ? _a : "");
+  }
+  return characters.join("");
+}
+// Trims the longest text field by the overflow, repeating until the entry
+// fits or the title is down to one character.
+function trimTexts(entry) {
+  const excess = excessBytes(entry);
+  const [field, value] = longestText(entry);
+  const shortened = shortenBy(value, excess, field === "title" ? 1 : 0);
+  if (excess <= 0 || shortened === value) {
+    return entry;
   } else {
-    return {
-      ...visit,
-      ...(visit.metadata && {
-        metadata: clampMetadata(visit.metadata)
-      }),
-      title: clampText(visit.title.trim())
-    };
+    return trimTexts(pageEntry(entry, {
+      ...texts(entry),
+      [field]: shortened
+    }));
+  }
+}
+// The query string is the first thing to go, since it's not part of the
+// page's identity; what's left is trimmed to fit under the service's limit.
+function fitPage(entry) {
+  if (excessBytes(entry) <= 0) {
+    return entry;
+  } else {
+    return trimTexts({
+      ...entry,
+      path: entry.path.split("?")[0]
+    });
   }
 }
 function toEntry(visit, visitedAt) {
-  return {
-    ...clampVisit(visit),
-    version: ENTRY_VERSION,
+  const entry = {
+    ...visit,
     visitedAt: visitedAt.toISOString()
   };
+  if (entry.type === "resource") {
+    return entry;
+  } else {
+    return fitPage(pageEntry(entry, {
+      ...texts(entry),
+      title: entry.title.trim()
+    }));
+  }
+}
+// user-store-sync rejects a whole write over one field it doesn't know, so
+// anything else an entry carries (like the version older entries stored) is
+// dropped on the way in.
+function withKnownFields(entry) {
+  if (entry.type === "resource") {
+    return {
+      pcrl: entry.pcrl,
+      type: entry.type,
+      visitedAt: entry.visitedAt
+    };
+  } else {
+    return pageEntry(entry, texts(entry));
+  }
 }
 // Recents are disposable: anything unexpected reads as an empty list (or, for
 // a single bad entry, a list without it) rather than throwing.
+function entriesFrom(value) {
+  if (Array.isArray(value)) {
+    return value.filter(isEntry).map(withKnownFields);
+  } else {
+    return [];
+  }
+}
 function parseRecentlyVisited(value) {
-  let parsed = null;
   try {
-    parsed = JSON.parse(value !== null && value !== void 0 ? value : "null");
+    return entriesFrom(JSON.parse(value !== null && value !== void 0 ? value : "null"));
   } catch {
-    parsed = null;
-  }
-  if (Array.isArray(parsed)) {
-    return parsed.filter(isEntry);
-  } else {
     return [];
   }
 }
@@ -3676,6 +3885,39 @@ function addVisit(entries, entry) {
   const key = entryKey(entry);
   return [entry, ...entries.filter(existing => entryKey(existing) !== key)].slice(0, MAX_ENTRIES);
 }
+// The service may write timestamps with fewer fractional digits than
+// toISOString, so they're compared as times rather than strings.
+function visitTime(entry) {
+  return isRecord(entry) && typeof entry.visitedAt === "string" ? Date.parse(entry.visitedAt) || 0 : 0;
+}
+function newestFirst(entries) {
+  const seen = new Set();
+  return entries.sort((a, b) => visitTime(b) - visitTime(a)).filter(entry => {
+    if (isEntry(entry)) {
+      const key = entryKey(entry);
+      const isFirst = !seen.has(key);
+      seen.add(key);
+      return isFirst;
+    } else {
+      return true;
+    }
+  }).slice(0, MAX_ENTRIES);
+}
+// One list from several, newest visit first wherever it was recorded.
+function mergeEntries(...lists) {
+  return newestFirst(lists.flat());
+}
+// Products pin different topbar versions, so the shared list can hold entries
+// this build doesn't recognize (a newer app or type). They're kept, as stored,
+// in what's written back, so an older topbar never erases a newer client's
+// visits. Recognized entries lose unknown fields, as on any read, since one
+// unknown field would get every write rejected.
+function mergeStored(stored, local) {
+  return newestFirst([...(Array.isArray(stored) ? stored : []).map(entry => isEntry(entry) ? withKnownFields(entry) : entry), ...local]);
+}
+function isSameList(a, b) {
+  return a.length === b.length && a.every((entry, index) => entryKey(entry) === entryKey(b[index]) && visitTime(entry) === visitTime(b[index]));
+}
 
 // The app whose URL, in this environment, has the current page's host.
 // Reversing pcoUrl handles every environment @planningcenter/url knows about,
@@ -3786,9 +4028,195 @@ function useCurrentPersonId() {
   return userId == null ? undefined : String(userId);
 }
 
-// Per-origin localStorage is a stopgap: each product keeps its own list until
-// PCA-409 moves this to storage shared across product subdomains. Only this
-// file should need to change when it does.
+// Tokens last 15 minutes. Refreshing a minute early keeps one from expiring
+// between reading a token and the service checking it.
+const REFRESH_MARGIN_MS = 60000;
+// A failed mint (a CSRF 422, a 5xx, a body that isn't a token) isn't retried
+// on every visit and panel open; the product is left alone for a while.
+const MINT_BACKOFF_MS = 5 * 60000;
+const MAX_ATTEMPTS = 3;
+// A product without the endpoint answers 404 for the rest of the session, so
+// it's asked once per tab rather than on every page.
+const UNAVAILABLE_UNTIL_KEY = "topbar.user_store_sync.unavailable_until";
+const END_OF_SESSION = Number.MAX_SAFE_INTEGER;
+// Per person, so switching connected people never writes one person's visits
+// with another's token.
+function tokenKey(personId) {
+  return `topbar.user_store_sync.token.${personId}`;
+}
+function readSession(key) {
+  try {
+    return sessionStorage.getItem(key);
+  } catch {
+    return null;
+  }
+}
+function writeSession(key, value) {
+  try {
+    sessionStorage.setItem(key, value);
+  } catch {
+    // Without sessionStorage the next request just mints again.
+  }
+}
+function isUserStoreSyncUnavailable() {
+  return Number(readSession(UNAVAILABLE_UNTIL_KEY)) > Date.now();
+}
+function markUnavailable(until) {
+  writeSession(UNAVAILABLE_UNTIL_KEY, String(until));
+}
+function isToken(value) {
+  return isRecord(value) && typeof value.token === "string" && typeof value.url === "string" && Number.isFinite(value.expiresAt) && typeof value.readOnly === "boolean";
+}
+function cachedToken(personId) {
+  var _a;
+  try {
+    const token = JSON.parse((_a = readSession(tokenKey(personId))) !== null && _a !== void 0 ? _a : "null");
+    if (isToken(token) && token.expiresAt - REFRESH_MARGIN_MS > Date.now()) {
+      return token;
+    } else {
+      return null;
+    }
+  } catch {
+    return null;
+  }
+}
+function tokenFrom(json) {
+  if (isRecord(json)) {
+    const token = {
+      expiresAt: typeof json.expires_at === "string" ? Date.parse(json.expires_at) : NaN,
+      readOnly: json.read_only === true,
+      token: json.token,
+      url: json.url
+    };
+    return isToken(token) ? token : null;
+  } else {
+    return null;
+  }
+}
+// The JWT's subject is the person's account center id, the same id the
+// product gives the topbar as `userId`.
+function subject(token) {
+  var _a;
+  try {
+    const payload = ((_a = token.split(".")[1]) !== null && _a !== void 0 ? _a : "").split("-").join("+").split("_").join("/");
+    const claims = JSON.parse(atob(payload));
+    return isRecord(claims) ? claims.sub : undefined;
+  } catch {
+    return undefined;
+  }
+}
+async function mintToken(personId) {
+  const {
+    json,
+    ok,
+    response
+  } = await apiRequest(railsCsrfFetch, `${window.location.origin}/user_store_sync/token`, {
+    method: "POST"
+  });
+  const minted = ok ? tokenFrom(json) : null;
+  // The product mints for whoever the session belongs to now. In a tab left
+  // open after switching to another connected person, that isn't the person
+  // this page rendered for, and syncing with their token would write this
+  // person's visits into their list. The endpoint is working, so there's
+  // nothing to back off from; the next page load picks up the new person.
+  const token = minted && subject(minted.token) === personId ? minted : null;
+  if (token) {
+    writeSession(tokenKey(personId), JSON.stringify(token));
+  } else if ((response === null || response === void 0 ? void 0 : response.status) === 404) {
+    markUnavailable(END_OF_SESSION);
+  } else if (!minted) {
+    markUnavailable(Date.now() + MINT_BACKOFF_MS);
+  }
+  return token;
+}
+function hasReadOnlyToken(personId) {
+  var _a;
+  return ((_a = cachedToken(personId)) === null || _a === void 0 ? void 0 : _a.readOnly) === true;
+}
+async function request(personId, key, init = {}, isRetry = false) {
+  var _a;
+  const token = isRetry ? await mintToken(personId) : (_a = cachedToken(personId)) !== null && _a !== void 0 ? _a : await mintToken(personId);
+  if (token) {
+    const response = await fetch(`${token.url}/v1/data/${key}`, {
+      ...init,
+      headers: {
+        ...init.headers,
+        Authorization: `Bearer ${token.token}`
+      }
+    });
+    if (response.status === 401 && !isRetry) {
+      return request(personId, key, init, true);
+    } else {
+      return {
+        response,
+        token
+      };
+    }
+  } else {
+    return null;
+  }
+}
+// The service answers version 0 for a person with nothing stored yet, and
+// takes `If-Match: "0"` for the first write. Without a version at all, the
+// write goes unconditioned.
+function ifMatch(version) {
+  return typeof version === "number" ? {
+    "If-Match": `"${version}"`
+  } : {};
+}
+// Applies `change` to the stored value and writes the result, rereading and
+// retrying when another tab or device wrote in between. `change` returns null
+// when there's nothing to write. A read-only token (staff impersonating
+// someone) only reads, so nothing is written into the person's history.
+// Resolves to the value now stored, with whether the token was read-only, or
+// null when the service couldn't be reached.
+async function updateStoredValue(personId, key, change, attemptsLeft = MAX_ATTEMPTS) {
+  const read = await request(personId, key);
+  if (read === null || read === void 0 ? void 0 : read.response.ok) {
+    const {
+      value,
+      version
+    } = await read.response.json();
+    const {
+      readOnly
+    } = read.token;
+    const next = readOnly ? null : change(value);
+    if (next === null) {
+      return {
+        readOnly,
+        value: Array.isArray(value) ? value : []
+      };
+    } else {
+      const write = await request(personId, key, {
+        body: JSON.stringify({
+          value: next
+        }),
+        headers: {
+          "Content-Type": "application/json",
+          ...ifMatch(version)
+        },
+        method: "PUT"
+      });
+      if (write === null || write === void 0 ? void 0 : write.response.ok) {
+        return {
+          readOnly,
+          value: next
+        };
+      } else if ((write === null || write === void 0 ? void 0 : write.response.status) === 409 && attemptsLeft > 1) {
+        return updateStoredValue(personId, key, change, attemptsLeft - 1);
+      } else {
+        return null;
+      }
+    }
+  } else {
+    return null;
+  }
+}
+
+// Each product keeps its own copy in localStorage, and user-store-sync joins
+// the copies up across products and devices wherever the product can mint a
+// token for it.
+const SYNC_KEY = "recently_viewed";
 function storageKey({
   env,
   personId
@@ -3807,17 +4235,65 @@ function readRecentlyVisited(scope) {
     return [];
   }
 }
+function writeRecentlyVisited(scope, entries) {
+  try {
+    localStorage.setItem(storageKey(scope), JSON.stringify(entries));
+    changes.setState({
+      version: changes.getState().version + 1
+    });
+  } catch {
+    // Storage can be full or blocked; recents are disposable.
+  }
+}
+async function syncOnce(scope) {
+  try {
+    const synced = await updateStoredValue(scope.personId, SYNC_KEY, stored => {
+      const shared = entriesFrom(stored);
+      const local = readRecentlyVisited(scope);
+      return isSameList(mergeEntries(shared, local), shared) ? null : mergeStored(stored, local);
+    });
+    if (synced) {
+      const shared = entriesFrom(synced.value);
+      writeRecentlyVisited(scope, synced.readOnly ? shared : mergeEntries(shared, readRecentlyVisited(scope)));
+    }
+  } catch {
+    // The service is best-effort; the local copy stands on its own.
+  }
+}
+const syncing = new Map();
+const syncAgain = new Set();
+// One sync per list at a time. A visit recorded while one runs schedules a
+// single follow-up, so it still reaches the service; anything else asking
+// mid-sync just waits for the one running.
+function sync(scope, followUp) {
+  const key = storageKey(scope);
+  const running = syncing.get(key);
+  if (isUserStoreSyncUnavailable()) {
+    return Promise.resolve();
+  } else if (running) {
+    if (followUp) syncAgain.add(key);
+    return running;
+  } else {
+    const run = syncOnce(scope).then(() => {
+      syncing.delete(key);
+      return syncAgain.delete(key) ? sync(scope, false) : undefined;
+    });
+    syncing.set(key, run);
+    return run;
+  }
+}
+function syncRecentlyVisited(scope) {
+  return sync(scope, false);
+}
+// Staff impersonating someone get a read-only token, and their visits stay out
+// of that person's list. Until the token is minted the visit is kept, and the
+// sync that mints it replaces the local list with the synced one, so recording
+// never waits on the network.
 function recordVisit(visit, scope) {
   const entry = toEntry(visit, new Date());
-  if (isEntry(entry)) {
-    try {
-      localStorage.setItem(storageKey(scope), JSON.stringify(addVisit(readRecentlyVisited(scope), entry)));
-      changes.setState({
-        version: changes.getState().version + 1
-      });
-    } catch {
-      // Storage can be full or blocked; recents are disposable.
-    }
+  if (isEntry(entry) && !hasReadOnlyToken(scope.personId)) {
+    writeRecentlyVisited(scope, addVisit(readRecentlyVisited(scope), entry));
+    sync(scope, true);
   }
 }
 function useRecentlyVisited({
@@ -3825,6 +4301,14 @@ function useRecentlyVisited({
   personId
 }) {
   const version = useSyncExternalStore(changes.subscribe, () => changes.getState().version);
+  useEffect(() => {
+    if (personId) {
+      syncRecentlyVisited({
+        env,
+        personId
+      });
+    }
+  }, [env, personId]);
   // `version` isn't read, but listing it re-reads storage after each visit.
   return useMemo(() => personId ? readRecentlyVisited({
     env,
@@ -3972,7 +4456,13 @@ function hasSelectedText(element) {
   return selectedInField || ((_b = (_a = window.getSelection()) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : "") !== "";
 }
 
-const COPIED_FEEDBACK_MS = 1500;
+// eslint-disable-next-line sort-keys-fix/sort-keys-fix
+const COPIED_TIMING = {
+  enter: 240,
+  active: 1000,
+  exit: 240
+};
+const COPIED_FEEDBACK_MS = COPIED_TIMING.enter + COPIED_TIMING.active + COPIED_TIMING.exit;
 // `copiedUrl` stays set briefly after a copy so the UI can confirm it.
 function useCopyLink() {
   const [copiedUrl, setCopiedUrl] = React__default.useState(null);
@@ -3993,25 +4483,46 @@ function useCopyLink() {
   };
 }
 
+function indexOf(highlight, items, list) {
+  const pinnedIndex = items.findIndex(({
+    key
+  }) => key === highlight.key);
+  if (highlight.list !== list) {
+    return 0;
+  } else if (pinnedIndex >= 0) {
+    return pinnedIndex;
+  } else {
+    return highlight.index;
+  }
+}
 // Remembering which list the index belongs to puts the highlight back on the
 // first item whenever a new list replaces it, without an effect to reset it.
-// A list that grows or fills in under the same `list` keeps its highlight.
-function useResultNavigation(items, list) {
+// A list that grows, fills in, or reorders under the same `list` keeps its
+// highlight on the same item, found again by key.
+// Disabled, nothing is highlighted and the keys and pointer leave it alone.
+function useResultNavigation(items, list, enabled = true) {
   const [highlight, setHighlight] = React__default.useState({
     index: 0,
     list
   });
-  const highlightedIndex = highlight.list === list ? highlight.index : 0;
-  const highlighted = items[highlightedIndex];
+  const highlightedIndex = indexOf(highlight, items, list);
+  const highlighted = enabled ? items[highlightedIndex] : undefined;
   const {
     copiedUrl,
     copy
   } = useCopyLink();
-  const highlightIndex = React__default.useCallback(index => setHighlight(current => current.list === list && current.index === index ? current : {
-    index,
-    list
-  }), [list]);
+  const highlightIndex = React__default.useCallback(index => {
+    var _a;
+    if (!enabled) return;
+    const key = (_a = items[index]) === null || _a === void 0 ? void 0 : _a.key;
+    setHighlight(current => current.list === list && current.index === index && current.key === key ? current : {
+      index,
+      key,
+      list
+    });
+  }, [enabled, items, list]);
   const handleKeyDown = event => {
+    if (!enabled) return;
     const step = verticalStep(event.key);
     if (step && items.length > 0) {
       event.preventDefault();
@@ -4035,41 +4546,89 @@ function useResultNavigation(items, list) {
   };
 }
 
-function groupSections(groups = []) {
+var styles$k = {"modal":"modal-NR3TO","visuallyHidden":"visuallyHidden-C28ju","panel":"panel-HlF7S"};
+
+const FALLBACK_SLUGS = ["people", "services"];
+function defaultProduct(products, appName) {
+  var _a;
+  const current = products.find(product => product.appName === appName);
+  const fallback = FALLBACK_SLUGS.map(slug => products.find(product => product.slug === slug)).find(Boolean);
+  return (_a = current !== null && current !== void 0 ? current : fallback) !== null && _a !== void 0 ? _a : products[0];
+}
+
+function groupSections(groups = [], timeZone) {
   return groups.map(({
     results,
     type
   }) => ({
     heading: type,
-    items: results.map(resultItem),
+    items: results.map(result => resultItem(result, timeZone)),
     key: type
   }));
 }
 function resultItem({
   attributes,
   id
-}) {
+}, timeZone) {
   return {
+    category: attributes.category,
+    imageUrl: attributes.image_url,
     key: id,
-    subtitle: summarize(attributes.metadata),
+    product: attributes.product,
+    subtitle: summarize(attributes, timeZone),
     title: attributes.title,
     url: attributes.url
   };
 }
-function visitItem(visit) {
+function visitItem(visit, timeZone) {
   return {
     key: entryKey(visit.entry),
-    ...describeVisit(visit)
+    ...describeVisit(visit, timeZone)
   };
 }
-function summarize(metadata) {
-  return Object.values(metadata !== null && metadata !== void 0 ? metadata : {}).filter(value => typeof value === "string" && value !== "").join(" · ");
+const joinParts = (...parts) => parts.filter(Boolean).join(" · ");
+// Matches home-mobile's search subtitles, so a result reads the same in both.
+function summarize({
+  category,
+  metadata
+}, timeZone) {
+  const text = key => {
+    const value = metadata === null || metadata === void 0 ? void 0 : metadata[key];
+    return typeof value === "string" ? value : "";
+  };
+  if (category === "profile") {
+    return joinParts(text("phone"), text("email"));
+  } else if (category === "event") {
+    return eventTime(text("starts_at"), text("ends_at"), {
+      recurring: (metadata === null || metadata === void 0 ? void 0 : metadata.recurring) === true,
+      timeZone
+    });
+  } else {
+    return text("details");
+  }
+}
+// "Oct 25, 9–10:30am", in the organization's time zone like the rest
+// of Planning Center.
+function eventTime(startsAt, endsAt, {
+  recurring,
+  timeZone
+}) {
+  if (startsAt === "") {
+    return "";
+  } else {
+    const time = datetimeFmt.datetime(startsAt, endsAt || null, {
+      style: "abbreviated",
+      ...(timeZone && {
+        timeZone
+      })
+    });
+    return recurring ? joinParts(time, "Repeating") : time;
+  }
 }
 // Unlike search results, recents come from every product, so each one names
-// its product and type.
-function describeVisit(visit) {
+// its type. The row's product icon says which product it came from.
+function describeVisit(visit, timeZone) {
   var _a, _b;
-  const subtitle = (...parts) => parts.filter(Boolean).join(" · ");
   if (visit.status === "page") {
     const {
       app,
@@ -4077,65 +4636,313 @@ function describeVisit(visit) {
       title
     } = visit.entry;
     return {
-      subtitle: subtitle(productName(app), (_a = metadata === null || metadata === void 0 ? void 0 : metadata.type) !== null && _a !== void 0 ? _a : "", (_b = metadata === null || metadata === void 0 ? void 0 : metadata.details) !== null && _b !== void 0 ? _b : ""),
+      category: "generic",
+      imageUrl: null,
+      product: app,
+      subtitle: joinParts(capitalize((_a = metadata === null || metadata === void 0 ? void 0 : metadata.type) !== null && _a !== void 0 ? _a : ""), (_b = metadata === null || metadata === void 0 ? void 0 : metadata.details) !== null && _b !== void 0 ? _b : ""),
       title,
       url: visit.url
     };
   } else {
     const {
-      metadata,
+      attributes
+    } = visit.result;
+    const {
+      category,
+      image_url,
       product,
       title,
       type
-    } = visit.result.attributes;
+    } = attributes;
+    // Profiles and events say what they are with a phone number or a date.
+    const kind = category === "generic" ? capitalize(pluralize.singular(type)) : "";
     return {
-      subtitle: subtitle(productName(product), type, summarize(metadata)),
+      category,
+      imageUrl: image_url,
+      product,
+      subtitle: joinParts(kind, summarize(attributes, timeZone)),
       title,
       url: visit.url
     };
   }
 }
-// check-ins → Check-Ins
-function productName(slug) {
-  return slug.split("-").map(capitalize).join("-");
-}
 function capitalize(word) {
   return word.charAt(0).toUpperCase() + word.slice(1);
 }
 
-const STORAGE_KEY = "topbar.product_search.last_product";
-function readLastProduct() {
-  try {
-    return localStorage.getItem(STORAGE_KEY);
-  } catch {
-    return null;
-  }
-}
-function saveLastProduct(slug) {
-  try {
-    localStorage.setItem(STORAGE_KEY, slug);
-  } catch {
-    // Storage can be full or blocked; search still works without it.
+var styles$j = {"container":"container-YDdM1","hint":"hint-017Rd","keycap":"keycap-ENJM2","labels":"labels-GHPqL","copied":"copied-DUFa1"};
+
+const SYMBOLS = {
+  command: {
+    label: "⌘",
+    paths: ["M7 9a2 2 0 1 1 2 -2v10a2 2 0 1 1 -2 -2h10a2 2 0 1 1 -2 2v-10a2 2 0 1 1 2 2h-10"]
+  },
+  down: {
+    label: "↓",
+    paths: ["M12 6l0 12", "M16 14l-4 4", "M8 14l4 4"]
+  },
+  return: {
+    label: "↵",
+    paths: ["M18 6v6a3 3 0 0 1 -3 3h-10l4 -4m0 8l-4 -4"]
+  },
+  up: {
+    label: "↑",
+    paths: ["M12 6l0 12", "M16 10l-4 -4", "M8 10l4 -4"]
   }
+};
+function Keycap(props) {
+  return /*#__PURE__*/React__default.createElement("kbd", {
+    className: styles$j.keycap
+  }, "symbol" in props ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("svg", {
+    "aria-hidden": true,
+    fill: "none",
+    stroke: "currentColor",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    viewBox: "0 0 24 24"
+  }, SYMBOLS[props.symbol].paths.map(d => (/*#__PURE__*/React__default.createElement("path", {
+    d: d,
+    key: d
+  })))), /*#__PURE__*/React__default.createElement("span", {
+    className: styles$k.visuallyHidden
+  }, SYMBOLS[props.symbol].label))) : props.label);
+}
+function CommandKey() {
+  return isMac() ? /*#__PURE__*/React__default.createElement(Keycap, {
+    symbol: "command"
+  }) : /*#__PURE__*/React__default.createElement(Keycap, {
+    label: "Ctrl"
+  });
 }
-function initialProduct(products) {
-  var _a, _b, _c;
-  const lastProduct = readLastProduct();
-  const bySlug = slug => products.find(product => product.slug === slug);
-  return (_c = (_b = (_a = bySlug(lastProduct)) !== null && _a !== void 0 ? _a : bySlug("people")) !== null && _b !== void 0 ? _b : bySlug("services")) !== null && _c !== void 0 ? _c : products[0];
+function EnterKey() {
+  return isMac() ? /*#__PURE__*/React__default.createElement(Keycap, {
+    symbol: "return"
+  }) : /*#__PURE__*/React__default.createElement(Keycap, {
+    label: "Enter"
+  });
 }
-
+const {
+  copyLink,
+  openInNewTab,
+  openSearch,
+  select
+} = KEYBOARD_SHORTCUTS;
 function KeyboardHints({
   copied
 }) {
-  const command = commandKeyLabel();
-  return /*#__PURE__*/React__default.createElement("p", null, "\u2191\u2193 Select \u00B7 \u21B5 Open \u00B7 ", command, "\u21B5 Open in new tab \u00B7 ", command, "C", " ", /*#__PURE__*/React__default.createElement("span", {
+  return /*#__PURE__*/React__default.createElement("ul", {
+    "aria-label": "Keyboard shortcuts",
+    className: styles$j.container,
+    "data-platform": isMac() ? "mac" : "pc"
+  }, /*#__PURE__*/React__default.createElement("li", {
+    className: styles$j.hint
+  }, /*#__PURE__*/React__default.createElement(Flex, {
+    gap: 0.5
+  }, select.modifierKey, /*#__PURE__*/React__default.createElement(Keycap, {
+    symbol: "up"
+  }), /*#__PURE__*/React__default.createElement(Keycap, {
+    symbol: "down"
+  })), select.label), /*#__PURE__*/React__default.createElement("li", {
+    className: styles$j.hint
+  }, /*#__PURE__*/React__default.createElement(Flex, {
+    gap: 0.5
+  }, /*#__PURE__*/React__default.createElement(CommandKey, null), /*#__PURE__*/React__default.createElement(EnterKey, null)), openInNewTab.label), /*#__PURE__*/React__default.createElement("li", {
+    className: classnames(styles$j.hint, copied && styles$j.copied),
+    style: {
+      "--copied-active": `${COPIED_TIMING.active}ms`,
+      "--copied-enter": `${COPIED_TIMING.enter}ms`,
+      "--copied-exit": `${COPIED_TIMING.exit}ms`
+    }
+  }, /*#__PURE__*/React__default.createElement(Flex, {
+    gap: 0.5
+  }, /*#__PURE__*/React__default.createElement(CommandKey, null), /*#__PURE__*/React__default.createElement(Keycap, {
+    label: copyLink.key.toUpperCase()
+  })), /*#__PURE__*/React__default.createElement("span", {
+    className: styles$j.labels
+  }, /*#__PURE__*/React__default.createElement("span", {
+    "aria-hidden": copied
+  }, copyLink.label), /*#__PURE__*/React__default.createElement("span", {
     role: "status"
-  }, copied ? "Copied!" : "Copy link"), " \u00B7 ", command, "K Open search");
+  }, copied && "Copied!"))), /*#__PURE__*/React__default.createElement("li", {
+    className: styles$j.hint
+  }, /*#__PURE__*/React__default.createElement(Flex, {
+    gap: 0.5
+  }, /*#__PURE__*/React__default.createElement(CommandKey, null), /*#__PURE__*/React__default.createElement(Keycap, {
+    label: openSearch.key.toUpperCase()
+  })), openSearch.label));
+}
+
+var styles$i = {"icon":"icon-XKLvN","squircle":"squircle-JCHr6"};
+
+const PRODUCTS = {
+  accounts: {
+    gradient: "--t-fill-color-product-accounts-gradient-brand",
+    path: logomarks.accounts
+  },
+  api: {
+    gradient: "--t-fill-color-product-api-gradient-brand",
+    path: logomarks.api
+  },
+  calendar: {
+    gradient: "--t-fill-color-product-calendar-gradient-brand",
+    path: logomarks.calendar
+  },
+  "check-ins": {
+    gradient: "--t-fill-color-product-checkins-gradient-brand",
+    path: logomarks.checkIns
+  },
+  "church-center": {
+    gradient: "--t-fill-color-product-cc-gradient-brand",
+    path: logomarks.churchCenter
+  },
+  giving: {
+    gradient: "--t-fill-color-product-giving-gradient-brand",
+    path: logomarks.giving
+  },
+  groups: {
+    gradient: "--t-fill-color-product-groups-gradient-brand",
+    path: logomarks.groups
+  },
+  home: {
+    gradient: "--t-fill-color-product-home-gradient-brand",
+    path: logomarks.home
+  },
+  "music-stand": {
+    gradient: "--t-fill-color-product-musicstand-gradient-brand",
+    path: logomarks.musicStand
+  },
+  people: {
+    gradient: "--t-fill-color-product-people-gradient-brand",
+    path: logomarks.people
+  },
+  publishing: {
+    gradient: "--t-fill-color-product-publishing-gradient-brand",
+    path: logomarks.publishing
+  },
+  registrations: {
+    gradient: "--t-fill-color-product-registrations-gradient-brand",
+    path: logomarks.registrations
+  },
+  services: {
+    gradient: "--t-fill-color-product-services-gradient-brand",
+    path: logomarks.services
+  }
+};
+const isProductIconSlug = slug => Object.prototype.hasOwnProperty.call(PRODUCTS, slug);
+const maskFor = path => `url("data:image/svg+xml,${encodeURIComponent(`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path d="${path}"/></svg>`)}")`;
+function ProductIcon({
+  size = 16,
+  slug
+}) {
+  const {
+    gradient,
+    path
+  } = PRODUCTS[slug];
+  const mask = maskFor(path);
+  return /*#__PURE__*/React__default.createElement("span", {
+    "aria-hidden": true,
+    className: styles$i.icon,
+    style: {
+      height: size,
+      width: size
+    }
+  }, /*#__PURE__*/React__default.createElement("span", {
+    className: styles$i.squircle,
+    style: {
+      WebkitMaskImage: mask,
+      background: `var(${gradient})`,
+      maskImage: mask
+    }
+  }));
+}
+
+var styles$h = {"picker":"picker-iuzzj","option":"option--7LXg"};
+
+// Phones have no room for a tab per product, so they pick from a dropdown.
+// Complex mode renders each option's logomark, in the list and the trigger.
+function ProductSelect({
+  children,
+  onSelect,
+  products,
+  selected
+}) {
+  const options = products.map(({
+    appName,
+    slug
+  }) => ({
+    label: (/*#__PURE__*/React__default.createElement("span", {
+      className: styles$h.option
+    }, /*#__PURE__*/React__default.createElement(ProductIcon, {
+      slug: slug
+    }), appName)),
+    textValue: appName,
+    value: slug
+  }));
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+    className: styles$h.picker
+  }, /*#__PURE__*/React__default.createElement(Select, {
+    "aria-label": "Product",
+    complex: true,
+    onChange: event => onSelect(event.target.value),
+    options: options,
+    value: selected.slug
+  })), /*#__PURE__*/React__default.createElement("div", {
+    className: styles$k.panel
+  }, children));
+}
+
+// Browsers match :focus-visible on every focused text field, keyboard or not,
+// since typing follows either way. So this remembers what last moved focus,
+// shared by every field and listened for once, in the capture phase so it's
+// known before focus moves.
+let lastInteraction = "pointer";
+let listening = false;
+function listen() {
+  if (listening) return;
+  listening = true;
+  document.addEventListener("keydown", event => {
+    // Shortcuts like ⌘C don't move focus.
+    if (!event.metaKey && !event.ctrlKey && !event.altKey) {
+      lastInteraction = "keyboard";
+    }
+  }, true);
+  document.addEventListener("pointerdown", () => {
+    lastInteraction = "pointer";
+  }, true);
+}
+/**
+ * Whether a field was focused from the keyboard, as by Tab, rather than by a
+ * click or tap. Spread `focusProps` onto the field, and style it by
+ * `data-focus-visible`.
+ */
+function useKeyboardFocus({
+  onBlur,
+  onFocus
+} = {}) {
+  const [focusVisible, setFocusVisible] = React__default.useState(false);
+  React__default.useEffect(listen, []);
+  return {
+    focusProps: {
+      "data-focus-visible": focusVisible || undefined,
+      onBlur: event => {
+        setFocusVisible(false);
+        onBlur === null || onBlur === void 0 ? void 0 : onBlur(event);
+      },
+      onFocus: event => {
+        const keyboard = lastInteraction === "keyboard";
+        setFocusVisible(keyboard);
+        onFocus === null || onFocus === void 0 ? void 0 : onFocus(event, keyboard);
+      }
+    },
+    focusVisible
+  };
 }
 
-var styles$d = {"tab":"tab-dz8ki"};
+var styles$g = {"tablist":"tablist-7ASvc","tab":"tab-dz8ki"};
 
+// With this many tabs or more, only the selected tab shows its name, so they
+// all fit. Fewer always fit with their names.
+const ICON_ONLY_TAB_COUNT = 5;
 function ProductTabs({
   children,
   onKeyDown,
@@ -4146,6 +4953,7 @@ function ProductTabs({
   const id = useInstanceId("product-tabs");
   const tabId = slug => `${id}-tab-${slug}`;
   const tabRefs = React__default.useRef(new Map());
+  const showAllNames = products.length < ICON_ONLY_TAB_COUNT;
   const handleKeyDown = event => {
     var _a;
     const offset = horizontalStep(event.key);
@@ -4160,13 +4968,13 @@ function ProductTabs({
     }
   };
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
-    "aria-label": "Product",
+    "aria-label": "Search in",
+    className: styles$g.tablist,
     onKeyDown: handleKeyDown,
     role: "tablist"
-  }, products.map(product => (/*#__PURE__*/React__default.createElement("button", {
+  }, products.map(product => (/*#__PURE__*/React__default.createElement(Tab, {
     "aria-controls": `${id}-panel`,
     "aria-selected": product === selected,
-    className: styles$d.tab,
     id: tabId(product.slug),
     key: product.slug,
     onClick: () => onSelect(product.slug),
@@ -4177,15 +4985,392 @@ function ProductTabs({
         tabRefs.current.delete(product.slug);
       }
     },
-    role: "tab",
-    tabIndex: product === selected ? 0 : -1,
-    type: "button"
-  }, product.appName)))), /*#__PURE__*/React__default.createElement("div", {
+    tabIndex: product === selected ? 0 : -1
+  }, /*#__PURE__*/React__default.createElement(ProductIcon, {
+    slug: product.slug
+  }), showAllNames || product === selected ? product.appName : (/*#__PURE__*/React__default.createElement("span", {
+    className: styles$k.visuallyHidden
+  }, product.appName)))))), /*#__PURE__*/React__default.createElement("div", {
     "aria-labelledby": tabId(selected.slug),
+    className: styles$k.panel,
     id: `${id}-panel`,
     role: "tabpanel"
   }, children));
 }
+// The modal's focus scope moves focus here by script when Tab is pressed, and
+// Safari doesn't match :focus-visible on focus moved by script. So the tab
+// remembers whether the keyboard brought focus, and the ring keys off that.
+const Tab = /*#__PURE__*/React__default.forwardRef(function Tab(props, ref) {
+  const {
+    focusProps
+  } = useKeyboardFocus();
+  return /*#__PURE__*/React__default.createElement("button", {
+    className: styles$g.tab,
+    ref: ref,
+    role: "tab",
+    type: "button",
+    ...props,
+    ...focusProps
+  });
+});
+
+function BlankStateRecentlyVisited(props) {
+  const id = useInstanceId("blank-state-initial");
+  return /*#__PURE__*/React__default.createElement("svg", {
+    viewBox: "0 0 197 174",
+    fill: "none",
+    "aria-hidden": "true",
+    focusable: "false",
+    ...props
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: "M139.863 32.119c10.938 10.028 21.777 20.154 32.912 30.084 8.376 7.373 21.975 15.828 23.157 28.02.592 6.095-2.167 11.993-5.321 17.204-24.635 40.8-81.098 67.148-127.412 48.862-30.646-12.093-76.172-47.387-59.716-85.041 15.865-36.377 64.84-55.056 83.957-57.71 21.876-4.621 34.883 2.457 52.423 18.58Z",
+    fill: "currentColor"
+  }), /*#__PURE__*/React__default.createElement("g", {
+    clipPath: `url(#${id}-a)`
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: "M115.885 109.31c-.478-.686-.01-1.845 1.046-2.589s2.3-.791 2.778-.105c.478.686.009 1.845-1.047 2.589-1.056.744-2.299.791-2.777.105Z",
+    fill: "#333"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M123.403 113.599c-3.456 0-6.259-2.817-6.259-6.293 0-3.475 2.803-6.293 6.259-6.293 3.457 0 6.259 2.818 6.259 6.293 0 3.476-2.802 6.293-6.259 6.293Z",
+    fill: "#333"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M118.853 100.968a2.85 2.85 0 0 0 2.832-2.484 2.89 2.89 0 0 0-.071-1.115c-2.638-9.955-9.668-9.687-9.964-9.665l.311 5.716h-.104c.119 0 2.853.134 4.254 5.421a2.874 2.874 0 0 0 1.013 1.53 2.846 2.846 0 0 0 1.729.597Z",
+    fill: "#4D4D4D"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M114.96 100.503c-.462-5.894 2.796-10.96 7.279-11.315 4.482-.356 8.491 4.134 8.953 10.027.462 5.894-2.796 10.96-7.279 11.315-4.482.356-8.491-4.134-8.953-10.027Z",
+    fill: "#F2F2F2"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M125.964 107.738c-4.48.354-8.489-4.135-8.953-10.026a12.893 12.893 0 0 1 1.223-6.707c-2.249 2.046-3.591 5.59-3.283 9.505.463 5.895 4.469 10.384 8.953 10.027 2.594-.205 4.765-1.986 6.055-4.591a6.682 6.682 0 0 1-3.995 1.792Z",
+    fill: "#E6E6E6"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M115.885 109.31c-.478-.686-.01-1.845 1.046-2.589s2.3-.791 2.778-.105c.478.686.009 1.845-1.047 2.589-1.056.744-2.299.791-2.777.105Z",
+    fill: "#333"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M123.403 113.599c-3.456 0-6.259-2.817-6.259-6.293 0-3.475 2.803-6.293 6.259-6.293 3.457 0 6.259 2.818 6.259 6.293 0 3.476-2.802 6.293-6.259 6.293Z",
+    fill: "#333"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M118.853 100.968a2.85 2.85 0 0 0 2.832-2.484 2.89 2.89 0 0 0-.071-1.115c-2.638-9.955-9.668-9.687-9.964-9.665l.311 5.716h-.104c.119 0 2.853.134 4.254 5.421a2.874 2.874 0 0 0 1.013 1.53 2.846 2.846 0 0 0 1.729.597Z",
+    fill: "#4D4D4D"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M114.96 100.503c-.462-5.894 2.796-10.96 7.279-11.315 4.482-.356 8.491 4.134 8.953 10.027.462 5.894-2.796 10.96-7.279 11.315-4.482.356-8.491-4.134-8.953-10.027Z",
+    fill: "#F2F2F2"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M125.964 107.738c-4.48.354-8.489-4.135-8.953-10.026a12.893 12.893 0 0 1 1.223-6.707c-2.249 2.046-3.591 5.59-3.283 9.505.463 5.895 4.469 10.384 8.953 10.027 2.594-.205 4.765-1.986 6.055-4.591a6.682 6.682 0 0 1-3.995 1.792Z",
+    fill: "#E6E6E6"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M89.317 121.331a2.836 2.836 0 0 1-1.92-.752 2.869 2.869 0 0 1-.911-1.857c-.534-5.726 3.527-13.808 3.99-14.713a2.849 2.849 0 0 1 1.666-1.413 2.835 2.835 0 0 1 2.172.185 2.86 2.86 0 0 1 1.405 1.675 2.876 2.876 0 0 1-.184 2.183c-1.46 2.843-3.669 8.492-3.383 11.551a2.868 2.868 0 0 1-1.504 2.797 2.84 2.84 0 0 1-1.064.318 1.378 1.378 0 0 1-.267.026Z",
+    fill: "#4D4D4D"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M92.155 112.314c3.308 0 5.989-2.696 5.989-6.021 0-3.326-2.681-6.021-5.989-6.021-3.307 0-5.988 2.695-5.988 6.021 0 3.325 2.681 6.021 5.988 6.021Z",
+    fill: "gray"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M80.597 128.771h11.769v3.726a1.118 1.118 0 0 1-1.112 1.118H78.57a1.118 1.118 0 0 1-1.112-1.118v-.566c0-.841.332-1.648.924-2.242a3.144 3.144 0 0 1 2.23-.929l-.015.011Z",
+    fill: "#333"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M89.572 132.084s8.075.119 6.3-8.268c-1.775-8.387-12.188-15.351-15.234-6.066-3.046 9.285-1.386 15.232 8.934 14.334Z",
+    fill: "#F2F2F2"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M106.67 121.334h-.27a2.84 2.84 0 0 1-1.925-1.025 2.872 2.872 0 0 1-.639-2.093c.285-3.059-1.92-8.708-3.38-11.551a2.873 2.873 0 0 1 1.296-3.721 2.832 2.832 0 0 1 2.102-.199 2.848 2.848 0 0 1 1.66 1.312c.463.906 4.521 8.991 3.988 14.714a2.874 2.874 0 0 1-.926 1.828 2.832 2.832 0 0 1-1.906.735Z",
+    fill: "#4D4D4D"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M103.835 112.314c3.307 0 5.988-2.696 5.988-6.021 0-3.326-2.681-6.021-5.988-6.021-3.307 0-5.988 2.695-5.988 6.021 0 3.325 2.681 6.021 5.988 6.021Z",
+    fill: "gray"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "m117.408 133.652-12.674-.002c-.295 0-.577-.118-.786-.328a1.121 1.121 0 0 1-.325-.79v-3.726l11.773.002c.837 0 1.639.334 2.23.929s.923 1.401.923 2.242v.567a1.116 1.116 0 0 1-1.141 1.106Z",
+    fill: "#333"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M106.414 132.084s-8.075.119-6.318-8.268c1.756-8.387 12.195-15.343 15.237-6.062 3.043 9.281 1.405 15.235-8.919 14.33Z",
+    fill: "#F2F2F2"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M109.107 94.58a2.305 2.305 0 0 0 2.191 2.412 2.302 2.302 0 0 0 2.399-2.202l.333-7.33a2.306 2.306 0 0 0-2.191-2.412 2.303 2.303 0 0 0-2.4 2.203l-.332 7.328Z",
+    fill: "gray"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M80.968 109.31c.478-.686.01-1.845-1.047-2.589-1.056-.744-2.3-.791-2.777-.105-.478.686-.01 1.845 1.046 2.589s2.3.791 2.778.105Z",
+    fill: "#333"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M73.448 113.599c3.457 0 6.26-2.817 6.26-6.293 0-3.475-2.803-6.293-6.26-6.293-3.456 0-6.258 2.818-6.258 6.293 0 3.476 2.802 6.293 6.258 6.293Z",
+    fill: "#333"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M78 100.968a2.853 2.853 0 0 1-2.832-2.484 2.876 2.876 0 0 1 .07-1.115c2.639-9.955 9.669-9.687 9.965-9.665l-.311 5.716h.104c-.12 0-2.854.134-4.255 5.421a2.87 2.87 0 0 1-1.013 1.53 2.845 2.845 0 0 1-1.729.597Z",
+    fill: "#4D4D4D"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M87.37 88.17a2.305 2.305 0 0 0-2.19-2.413 2.302 2.302 0 0 0-2.4 2.202l-.332 7.329a2.305 2.305 0 0 0 2.19 2.413 2.302 2.302 0 0 0 2.4-2.203l.332-7.328Z",
+    fill: "gray"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M81.893 100.503c.462-5.894-2.797-10.96-7.28-11.315-4.482-.356-8.49 4.134-8.953 10.027-.462 5.894 2.797 10.96 7.28 11.315 4.482.356 8.49-4.134 8.953-10.027Z",
+    fill: "#F2F2F2"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M70.888 107.738c4.48.354 8.49-4.135 8.953-10.026a12.89 12.89 0 0 0-1.223-6.707c2.25 2.046 3.591 5.59 3.284 9.505-.464 5.895-4.47 10.384-8.953 10.027-2.594-.205-4.766-1.986-6.055-4.591a6.682 6.682 0 0 0 3.994 1.792Z",
+    fill: "#E6E6E6"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M112.717 94.105c-.511-9.095-7.459-11.703-15.82-11.226-8.36.477-14.97 3.856-14.451 12.951.518 9.095 7.707 16.081 16.067 15.605 8.36-.477 14.719-8.231 14.204-17.33Z",
+    fill: "#F2F2F2"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M112.565 92.656c-1.056 7.496-6.799 13.413-14.059 13.812-7.852.451-14.67-5.686-15.897-13.965a14.571 14.571 0 0 0-.17 3.327c.51 9.095 7.704 16.081 16.067 15.605 8.364-.477 14.723-8.235 14.211-17.33a16.83 16.83 0 0 0-.152-1.45Z",
+    fill: "#E6E6E6"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M103.546 90.353H91.61a.62.62 0 0 0-.619.623v1.762a.62.62 0 0 0 .62.622h11.935a.62.62 0 0 0 .619-.622v-1.762a.62.62 0 0 0-.619-.623Zm0 5.187H91.61a.62.62 0 0 0-.619.622v1.762a.62.62 0 0 0 .62.623h11.935a.62.62 0 0 0 .619-.623v-1.762a.62.62 0 0 0-.619-.622Zm-.004 5.19H91.606a.62.62 0 0 0-.619.622v1.763a.62.62 0 0 0 .62.622h11.935a.62.62 0 0 0 .619-.622v-1.763a.62.62 0 0 0-.619-.622Z",
+    fill: "#3690EA"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M89.317 121.331a2.836 2.836 0 0 1-1.92-.752 2.869 2.869 0 0 1-.911-1.857c-.534-5.726 3.527-13.808 3.99-14.713a2.849 2.849 0 0 1 1.666-1.413 2.835 2.835 0 0 1 2.172.185 2.86 2.86 0 0 1 1.405 1.675 2.876 2.876 0 0 1-.184 2.183c-1.46 2.843-3.669 8.492-3.383 11.551a2.868 2.868 0 0 1-1.504 2.797 2.84 2.84 0 0 1-1.064.318 1.378 1.378 0 0 1-.267.026Z",
+    fill: "#4D4D4D"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M92.155 112.314c3.308 0 5.989-2.696 5.989-6.021 0-3.326-2.681-6.021-5.989-6.021-3.307 0-5.988 2.695-5.988 6.021 0 3.325 2.681 6.021 5.988 6.021Z",
+    fill: "gray"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M80.597 128.771h11.769v3.726a1.118 1.118 0 0 1-1.112 1.118H78.57a1.118 1.118 0 0 1-1.112-1.118v-.566c0-.841.332-1.648.924-2.242a3.144 3.144 0 0 1 2.23-.929l-.015.011Z",
+    fill: "#333"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M89.572 132.084s8.075.119 6.3-8.268c-1.775-8.387-12.188-15.351-15.234-6.066-3.046 9.285-1.386 15.232 8.934 14.334Z",
+    fill: "#F2F2F2"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M106.67 121.334h-.27a2.84 2.84 0 0 1-1.925-1.025 2.872 2.872 0 0 1-.639-2.093c.285-3.059-1.92-8.708-3.38-11.551a2.873 2.873 0 0 1 1.296-3.721 2.832 2.832 0 0 1 2.102-.199 2.848 2.848 0 0 1 1.66 1.312c.463.906 4.521 8.991 3.988 14.714a2.874 2.874 0 0 1-.926 1.828 2.832 2.832 0 0 1-1.906.735Z",
+    fill: "#4D4D4D"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M103.835 112.314c3.307 0 5.988-2.696 5.988-6.021 0-3.326-2.681-6.021-5.988-6.021-3.307 0-5.988 2.695-5.988 6.021 0 3.325 2.681 6.021 5.988 6.021Z",
+    fill: "gray"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "m117.408 133.652-12.674-.002c-.295 0-.577-.118-.786-.328a1.121 1.121 0 0 1-.325-.79v-3.726l11.773.002c.837 0 1.639.334 2.23.929s.923 1.401.923 2.242v.567a1.116 1.116 0 0 1-1.141 1.106Z",
+    fill: "#333"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M106.414 132.084s-8.075.119-6.318-8.268c1.756-8.387 12.195-15.343 15.237-6.062 3.043 9.281 1.405 15.235-8.919 14.33Z",
+    fill: "#F2F2F2"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M109.107 94.58a2.305 2.305 0 0 0 2.191 2.412 2.302 2.302 0 0 0 2.399-2.202l.333-7.33a2.306 2.306 0 0 0-2.191-2.412 2.303 2.303 0 0 0-2.4 2.203l-.332 7.328Z",
+    fill: "gray"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M80.968 109.31c.478-.686.01-1.845-1.047-2.589-1.056-.744-2.3-.791-2.777-.105-.478.686-.01 1.845 1.046 2.589s2.3.791 2.778.105Z",
+    fill: "#333"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M73.448 113.599c3.457 0 6.26-2.817 6.26-6.293 0-3.475-2.803-6.293-6.26-6.293-3.456 0-6.258 2.818-6.258 6.293 0 3.476 2.802 6.293 6.258 6.293Z",
+    fill: "#333"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M78 100.968a2.853 2.853 0 0 1-2.832-2.484 2.876 2.876 0 0 1 .07-1.115c2.639-9.955 9.669-9.687 9.965-9.665l-.311 5.716h.104c-.12 0-2.854.134-4.255 5.421a2.87 2.87 0 0 1-1.013 1.53 2.845 2.845 0 0 1-1.729.597Z",
+    fill: "#4D4D4D"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M87.37 88.17a2.305 2.305 0 0 0-2.19-2.413 2.302 2.302 0 0 0-2.4 2.202l-.332 7.329a2.305 2.305 0 0 0 2.19 2.413 2.302 2.302 0 0 0 2.4-2.203l.332-7.328Z",
+    fill: "gray"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M81.893 100.503c.462-5.894-2.797-10.96-7.28-11.315-4.482-.356-8.49 4.134-8.953 10.027-.462 5.894 2.797 10.96 7.28 11.315 4.482.356 8.49-4.134 8.953-10.027Z",
+    fill: "#F2F2F2"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M70.888 107.738c4.48.354 8.49-4.135 8.953-10.026a12.89 12.89 0 0 0-1.223-6.707c2.25 2.046 3.591 5.59 3.284 9.505-.464 5.895-4.47 10.384-8.953 10.027-2.594-.205-4.766-1.986-6.055-4.591a6.682 6.682 0 0 0 3.994 1.792Z",
+    fill: "#E6E6E6"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M112.717 94.105c-.511-9.095-7.459-11.703-15.82-11.226-8.36.477-14.97 3.856-14.451 12.951.518 9.095 7.707 16.081 16.067 15.605 8.36-.477 14.719-8.231 14.204-17.33Z",
+    fill: "#F2F2F2"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M112.565 92.656c-1.056 7.496-6.799 13.413-14.059 13.812-7.852.451-14.67-5.686-15.897-13.965a14.571 14.571 0 0 0-.17 3.327c.51 9.095 7.704 16.081 16.067 15.605 8.364-.477 14.723-8.235 14.211-17.33a16.83 16.83 0 0 0-.152-1.45Z",
+    fill: "#E6E6E6"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M94.626 78.445c-.114-.488 6.548-.927 5.815.246v.775c0 .746.033 1.49.033 2.258s.037 1.595.044 2.392c.278.593-6.473.935-5.817-.115v-.67c-.015-1.63-.06-3.257-.075-4.886Z",
+    fill: "#999"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M103.546 90.353H91.61a.62.62 0 0 0-.619.623v1.762a.62.62 0 0 0 .62.622h11.935a.62.62 0 0 0 .619-.622v-1.762a.62.62 0 0 0-.619-.623Zm0 5.187H91.61a.62.62 0 0 0-.619.622v1.762a.62.62 0 0 0 .62.623h11.935a.62.62 0 0 0 .619-.623v-1.762a.62.62 0 0 0-.619-.622Zm-.004 5.19H91.606a.62.62 0 0 0-.619.622v1.763a.62.62 0 0 0 .62.622h11.935a.62.62 0 0 0 .619-.622v-1.763a.62.62 0 0 0-.619-.622ZM55.773 64.004c4.349 0 7.874-5.285 7.874-11.804s-3.525-11.804-7.874-11.804-7.875 5.285-7.875 11.804c0 6.52 3.526 11.804 7.875 11.804Zm84.17.015c4.349 0 7.874-5.285 7.874-11.804 0-6.52-3.525-11.804-7.874-11.804s-7.875 5.285-7.875 11.804 3.526 11.804 7.875 11.804Z",
+    fill: "#3690EA"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M97.962 29.036c7.273 0 13.17-2.224 13.17-4.967 0-2.743-5.897-4.966-13.17-4.966-7.274 0-13.17 2.223-13.17 4.966 0 2.743 5.896 4.967 13.17 4.967Z",
+    fill: "#B3B3B3"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M97.962 16.55c4.545 0 8.23-3.705 8.23-8.275S102.507 0 97.962 0c-4.546 0-8.23 3.705-8.23 8.275s3.684 8.275 8.23 8.275Z",
+    fill: "#3690EA"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M141.607 59.283V45.147a19.038 19.038 0 0 0-3.687-11.301 18.872 18.872 0 0 0-9.653-6.874c-8.838-2.69-19.203-4.24-30.29-4.244-11.088-.004-21.452 1.546-30.29 4.233a18.871 18.871 0 0 0-9.668 6.866 19.041 19.041 0 0 0-3.699 11.305v14.132a19.03 19.03 0 0 0 3.685 11.303 18.86 18.86 0 0 0 9.656 6.872c8.841 2.694 19.206 4.244 30.29 4.244 11.083 0 21.452-1.542 30.294-4.233a18.858 18.858 0 0 0 9.666-6.863 19.028 19.028 0 0 0 3.696-11.304Z",
+    fill: "#F2F2F2"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M97.954 75.051c-10.068 0-19.88-1.371-28.381-3.957a12.353 12.353 0 0 1-6.262-4.485 12.463 12.463 0 0 1-2.41-7.34V45.131c.006-2.642.85-5.214 2.411-7.34a12.345 12.345 0 0 1 6.264-4.482c8.501-2.586 18.317-3.95 28.382-3.95 10.065 0 19.877 1.371 28.382 3.96a12.35 12.35 0 0 1 6.262 4.486 12.46 12.46 0 0 1 2.409 7.34V59.28a12.453 12.453 0 0 1-2.41 7.341 12.343 12.343 0 0 1-6.265 4.482c-8.486 2.585-18.317 3.949-28.382 3.949Z",
+    fill: "#E6E6E6"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M100.863 15.992h-5.81v1.293h5.81v-1.293Z",
+    fill: "#F2F2F2"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M76.472 66.05c4.327 0 7.834-6.2 7.834-13.846 0-7.647-3.507-13.846-7.834-13.846-4.326 0-7.833 6.2-7.833 13.846s3.507 13.845 7.833 13.845Z",
+    fill: "#1A1A1A"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M77.844 52.766c1.743 0 3.157-2.088 3.157-4.664 0-2.577-1.414-4.665-3.157-4.665-1.744 0-3.157 2.088-3.157 4.665 0 2.576 1.413 4.664 3.157 4.664Z",
+    fill: "#fff"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M118.662 66.057c4.326 0 7.834-6.2 7.834-13.846s-3.508-13.845-7.834-13.845c-4.327 0-7.834 6.199-7.834 13.845 0 7.647 3.507 13.846 7.834 13.846Z",
+    fill: "#1A1A1A"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M120.032 52.774c1.744 0 3.157-2.089 3.157-4.665s-1.413-4.665-3.157-4.665c-1.743 0-3.157 2.089-3.157 4.665s1.414 4.665 3.157 4.665Z",
+    fill: "#fff"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M92.674 63.11a10.286 10.286 0 0 0 7.949 1.095 13.2 13.2 0 0 0 2.623-1.118.738.738 0 0 1 1.035.639.748.748 0 0 1-.119.453c-2.224 2.82-6.474 3.625-9.672 2.12a7.284 7.284 0 0 1-2.75-2.12.748.748 0 0 1 .465-1.139.738.738 0 0 1 .469.054v.015Z",
+    fill: "#999"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M55.773 64.004c4.349 0 7.874-5.285 7.874-11.804s-3.525-11.804-7.874-11.804-7.875 5.285-7.875 11.804c0 6.52 3.526 11.804 7.875 11.804Zm84.17.015c4.349 0 7.874-5.285 7.874-11.804 0-6.52-3.525-11.804-7.874-11.804s-7.875 5.285-7.875 11.804 3.526 11.804 7.875 11.804Z",
+    fill: "#3690EA"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M95.008 14.315c-.115-.488 6.548-.932 5.815.246v.771c0 .745.033 1.51.037 2.262.003.752.033 1.594.04 2.392.282.592-6.474.935-5.818-.116v-.67c-.014-1.629-.055-3.257-.074-4.885Z",
+    fill: "#F2F2F2"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M97.962 29.036c7.273 0 13.17-2.224 13.17-4.967 0-2.743-5.897-4.966-13.17-4.966-7.274 0-13.17 2.223-13.17 4.966 0 2.743 5.896 4.967 13.17 4.967Z",
+    fill: "#B3B3B3"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M97.962 16.55c4.545 0 8.23-3.705 8.23-8.275S102.507 0 97.962 0c-4.546 0-8.23 3.705-8.23 8.275s3.684 8.275 8.23 8.275Z",
+    fill: "#3690EA"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M141.607 59.283V45.147a19.038 19.038 0 0 0-3.687-11.301 18.872 18.872 0 0 0-9.653-6.874c-8.838-2.69-19.203-4.24-30.29-4.244-11.088-.004-21.452 1.546-30.29 4.233a18.871 18.871 0 0 0-9.668 6.866 19.041 19.041 0 0 0-3.699 11.305v14.132a19.03 19.03 0 0 0 3.685 11.303 18.86 18.86 0 0 0 9.656 6.872c8.841 2.694 19.206 4.244 30.29 4.244 11.083 0 21.452-1.542 30.294-4.233a18.858 18.858 0 0 0 9.666-6.863 19.028 19.028 0 0 0 3.696-11.304Z",
+    fill: "#F2F2F2"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M97.954 75.051c-10.068 0-19.88-1.371-28.381-3.957a12.353 12.353 0 0 1-6.262-4.485 12.463 12.463 0 0 1-2.41-7.34V45.131c.006-2.642.85-5.214 2.411-7.34a12.345 12.345 0 0 1 6.264-4.482c8.501-2.586 18.317-3.95 28.382-3.95 10.065 0 19.877 1.371 28.382 3.96a12.35 12.35 0 0 1 6.262 4.486 12.46 12.46 0 0 1 2.409 7.34V59.28a12.453 12.453 0 0 1-2.41 7.341 12.343 12.343 0 0 1-6.265 4.482c-8.486 2.585-18.317 3.949-28.382 3.949Zm2.909-59.059h-5.81v1.293h5.81v-1.293Z",
+    fill: "#E6E6E6"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M76.472 66.05c4.327 0 7.834-6.2 7.834-13.846 0-7.647-3.507-13.846-7.834-13.846-4.326 0-7.833 6.2-7.833 13.846s3.507 13.845 7.833 13.845Z",
+    fill: "#1A1A1A"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M77.844 52.766c1.743 0 3.157-2.088 3.157-4.664 0-2.577-1.414-4.665-3.157-4.665-1.744 0-3.157 2.088-3.157 4.665 0 2.576 1.413 4.664 3.157 4.664Z",
+    fill: "#fff"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M118.662 66.057c4.326 0 7.834-6.2 7.834-13.846s-3.508-13.845-7.834-13.845c-4.327 0-7.834 6.199-7.834 13.845 0 7.647 3.507 13.846 7.834 13.846Z",
+    fill: "#1A1A1A"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M120.032 52.774c1.744 0 3.157-2.089 3.157-4.665s-1.413-4.665-3.157-4.665c-1.743 0-3.157 2.089-3.157 4.665s1.414 4.665 3.157 4.665Z",
+    fill: "#fff"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M92.674 63.11a10.286 10.286 0 0 0 7.949 1.095 13.2 13.2 0 0 0 2.623-1.118.738.738 0 0 1 1.035.639.748.748 0 0 1-.119.453c-2.224 2.82-6.474 3.625-9.672 2.12a7.284 7.284 0 0 1-2.75-2.12.748.748 0 0 1 .465-1.139.738.738 0 0 1 .469.054v.015Z",
+    fill: "#999"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M101.117 9.562a3.035 3.035 0 0 0 3.027-3.043 3.035 3.035 0 0 0-3.027-3.043A3.035 3.035 0 0 0 98.09 6.52a3.035 3.035 0 0 0 3.027 3.043ZM51.578 54.84c.801 0 1.45-1.64 1.45-3.66 0-2.023-.649-3.662-1.45-3.662-.802 0-1.451 1.64-1.451 3.661 0 2.022.65 3.66 1.45 3.66Zm93.429 0c.802 0 1.451-1.64 1.451-3.66 0-2.023-.649-3.662-1.451-3.662-.801 0-1.45 1.64-1.45 3.661 0 2.022.649 3.66 1.45 3.66Z",
+    fill: "#4BAAF7"
+  }), /*#__PURE__*/React__default.createElement("g", {
+    clipPath: `url(#${id}-b)`
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: "M52.39 160.841h-2.919a1.774 1.774 0 0 1-1.766-1.782v-7.334h9.035l-2.677 7.911a1.766 1.766 0 0 1-1.671 1.206l-.001-.001Zm91.774 0h2.919c.977 0 1.767-.799 1.767-1.782v-7.334h-9.036l2.677 7.911a1.767 1.767 0 0 0 1.672 1.206l.001-.001Z",
+    fill: "#6D4932"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M163.181 108.015H33.375c-2.37 0-4.291 1.479-4.291 3.305v2.216c0 1.825 1.921 3.305 4.29 3.305h129.807c2.369 0 4.29-1.48 4.29-3.305v-2.216c0-1.826-1.921-3.305-4.29-3.305Z",
+    fill: "#A87B5D"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M38.282 116.841h119.992v33.16c0 1.648-1.554 2.985-3.469 2.985H41.752c-1.915 0-3.468-1.337-3.468-2.985v-33.16h-.002Z",
+    fill: "#916A50"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    opacity: ".3",
+    d: "M131.002 109.794h-97.18a.996.996 0 0 0-.992 1.001c0 .552.444 1 .992 1h97.18a.996.996 0 0 0 .991-1 .996.996 0 0 0-.991-1.001Zm30.849 0h-24.24a.996.996 0 0 0-.992 1.001c0 .552.444 1 .992 1h24.24a.996.996 0 0 0 .992-1 .996.996 0 0 0-.992-1.001Z",
+    fill: "#D4B097"
+  })), /*#__PURE__*/React__default.createElement("g", {
+    clipPath: `url(#${id}-c)`
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: "M151.367 97.536h2.894c1.6 0 2.895 1.307 2.895 2.913a2.906 2.906 0 0 1-2.895 2.914h-2.894v-5.827Z",
+    strokeWidth: "6",
+    strokeMiterlimit: "10",
+    stroke: `url(#${id}-d)`
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M135.876 93.304h17.017a.6.6 0 0 1 .597.602v10.166c0 1.942-1.566 3.522-3.499 3.522h-11.214c-1.933 0-3.499-1.58-3.499-3.522V93.906a.6.6 0 0 1 .598-.602Z",
+    fill: `url(#${id}-e)`
+  })), /*#__PURE__*/React__default.createElement("path", {
+    d: "m37.492 78.174 38.863-6.725a3.453 3.453 0 0 1 3.455 3.45v30.087H34.04V81.623a3.452 3.452 0 0 1 3.452-3.45Z",
+    fill: `url(#${id}-f)`
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M34.1 108.015v-3.363h57.697v3.363H34.1Z",
+    fill: `url(#${id}-g)`
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M79.673 108.015v-3.363h12.124v3.363H79.673Z",
+    fill: `url(#${id}-h)`
+  })), /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("linearGradient", {
+    id: `${id}-d`,
+    x1: "150.254",
+    y1: "100.449",
+    x2: "158.273",
+    y2: "100.449",
+    gradientUnits: "userSpaceOnUse"
+  }, /*#__PURE__*/React__default.createElement("stop", {
+    stopColor: "#FEFEFE"
+  }), /*#__PURE__*/React__default.createElement("stop", {
+    offset: "1",
+    stopColor: "#fff"
+  })), /*#__PURE__*/React__default.createElement("linearGradient", {
+    id: `${id}-e`,
+    x1: "132.629",
+    y1: "100.449",
+    x2: "155.32",
+    y2: "100.449",
+    gradientUnits: "userSpaceOnUse"
+  }, /*#__PURE__*/React__default.createElement("stop", {
+    stopColor: "#FEFEFE"
+  }), /*#__PURE__*/React__default.createElement("stop", {
+    offset: "1",
+    stopColor: "#F3F3F3"
+  })), /*#__PURE__*/React__default.createElement("linearGradient", {
+    id: `${id}-f`,
+    x1: "56.925",
+    y1: "45.291",
+    x2: "56.925",
+    y2: "93.076",
+    gradientUnits: "userSpaceOnUse"
+  }, /*#__PURE__*/React__default.createElement("stop", {
+    stopColor: "#FEFEFE"
+  }), /*#__PURE__*/React__default.createElement("stop", {
+    offset: "1",
+    stopColor: "#D1D6E7"
+  })), /*#__PURE__*/React__default.createElement("linearGradient", {
+    id: `${id}-g`,
+    x1: "62.684",
+    y1: "108.015",
+    x2: "62.684",
+    y2: "104.85",
+    gradientUnits: "userSpaceOnUse"
+  }, /*#__PURE__*/React__default.createElement("stop", {
+    stopColor: "#D2D6E8"
+  }), /*#__PURE__*/React__default.createElement("stop", {
+    offset: ".726",
+    stopColor: "#D1D6E7"
+  })), /*#__PURE__*/React__default.createElement("linearGradient", {
+    id: `${id}-h`,
+    x1: "85.68",
+    y1: "108.015",
+    x2: "85.68",
+    y2: "104.85",
+    gradientUnits: "userSpaceOnUse"
+  }, /*#__PURE__*/React__default.createElement("stop", {
+    stopColor: "#D8DDF1"
+  }), /*#__PURE__*/React__default.createElement("stop", {
+    offset: ".726",
+    stopColor: "#E2E6F6"
+  })), /*#__PURE__*/React__default.createElement("clipPath", {
+    id: `${id}-a`
+  }, /*#__PURE__*/React__default.createElement("path", {
+    fill: "#fff",
+    transform: "translate(12.006)",
+    d: "M0 0h172v174H0z"
+  })), /*#__PURE__*/React__default.createElement("clipPath", {
+    id: `${id}-b`
+  }, /*#__PURE__*/React__default.createElement("path", {
+    fill: "#fff",
+    transform: "translate(29.084 105.073)",
+    d: "M0 0h138.387v68.927H0z"
+  })), /*#__PURE__*/React__default.createElement("clipPath", {
+    id: `${id}-c`
+  }, /*#__PURE__*/React__default.createElement("path", {
+    fill: "#fff",
+    transform: "translate(135.278 93.304)",
+    d: "M0 0h22.995v14.29H0z"
+  }))));
+}
+
+var styles$f = {"blank_state":"blank_state-wMOWN","image":"image-uy0Fd"};
+
+function BlankState$1({
+  image,
+  role,
+  subtitle,
+  title
+}) {
+  return /*#__PURE__*/React__default.createElement(Flex, {
+    role: role,
+    className: styles$f.blank_state,
+    direction: "column",
+    align: "center",
+    gap: 3
+  }, /*#__PURE__*/React__default.createElement(Flex, {
+    className: styles$f.image
+  }, image), /*#__PURE__*/React__default.createElement(Flex, {
+    direction: "column",
+    align: "center",
+    gap: 1
+  }, /*#__PURE__*/React__default.createElement("h2", null, title), /*#__PURE__*/React__default.createElement("p", null, subtitle)));
+}
 
 function EndOfResultsObserver({
   onVisible
@@ -4205,39 +5390,119 @@ function EndOfResultsObserver({
 
 const resultId = (listboxId, index) => `${listboxId}-result-${index}`;
 
-var styles$c = {"result":"result-Thq2C"};
+var styles$e = {"result":"result-Thq2C","title":"title-KYUEn","subtitle":"subtitle-R2haq","image":"image-KVDor","avatar":"avatar-6Gh62","photo":"photo-FZR3Q","badge":"badge-trUKt"};
 
 function SearchResult({
+  category,
+  describedBy,
+  headingAbove,
   highlighted,
   id,
+  imageUrl,
   onHighlight,
+  onOpen,
+  product,
   subtitle,
   title,
   url
 }) {
   const ref = React__default.useRef(null);
+  // A hovered result is already under the pointer, and scrolling it clear of
+  // the panel's scroll padding would slide the list out from under the mouse.
+  const highlightedByPointer = React__default.useRef(false);
   React__default.useEffect(() => {
-    var _a;
-    if (highlighted) (_a = ref.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
-      block: "nearest"
-    });
-  }, [highlighted]);
+    var _a, _b;
+    if (!highlighted) return;
+    if (highlightedByPointer.current) {
+      highlightedByPointer.current = false;
+    } else {
+      (_a = ref.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
+        block: "nearest"
+      });
+      // Scrolling up to a section's first result leaves its heading cut off
+      // above it, so bring that in too. Scrolling down, it's already in view.
+      if (headingAbove) {
+        (_b = document.getElementById(headingAbove)) === null || _b === void 0 ? void 0 : _b.scrollIntoView({
+          block: "nearest"
+        });
+      }
+    }
+  }, [headingAbove, highlighted]);
+  const highlightFromPointer = () => {
+    if (highlighted) return;
+    highlightedByPointer.current = true;
+    onHighlight();
+  };
+  // Closes search before the page goes, so coming back to it doesn't find
+  // search still open. Clicks that open a new tab or window leave it open.
+  const openFromClick = event => {
+    if (event.button !== 0 || event.altKey || event.ctrlKey || event.metaKey || event.shiftKey) return;
+    onOpen();
+  };
   // Focus stays in the search input, which points at the highlighted result
   // with aria-activedescendant, so results are kept out of the tab order.
   // Mouse move rather than enter: arrowing scrolls results under a resting
   // pointer, and that shouldn't steal the highlight.
-  return /*#__PURE__*/React__default.createElement("a", {
-    "aria-selected": highlighted,
-    className: styles$c.result,
-    href: url,
-    id: id,
-    onMouseMove: onHighlight,
-    ref: ref,
-    role: "option",
-    tabIndex: -1
-  }, /*#__PURE__*/React__default.createElement("div", null, title), /*#__PURE__*/React__default.createElement("div", null, subtitle));
+  // Results open with a full page load, like Enter does, rather than through
+  // the product's router. Their URLs can go through server redirects, like
+  // People's staff URLs, that Turbo would follow with fetch or prefetch on
+  // hover, and they should open the same way in every product.
+  return (
+    /*#__PURE__*/
+    // Named by the title alone, so screen readers say "Ada Lovelace" rather
+    // than the whole row. The section and subtitle are read after a pause.
+    React__default.createElement("a", {
+      "aria-describedby": [describedBy, subtitle && `${id}-subtitle`].filter(Boolean).join(" ") || undefined,
+      "aria-labelledby": title ? `${id}-title` : undefined,
+      "aria-selected": highlighted,
+      className: styles$e.result,
+      "data-turbo": "false",
+      href: url,
+      id: id,
+      onClick: openFromClick,
+      onMouseMove: highlightFromPointer,
+      ref: ref,
+      role: "option",
+      tabIndex: -1
+    }, /*#__PURE__*/React__default.createElement(ResultImage, {
+      category: category,
+      imageUrl: imageUrl,
+      product: product
+    }), /*#__PURE__*/React__default.createElement("span", {
+      className: styles$e.title,
+      id: `${id}-title`
+    }, title), /*#__PURE__*/React__default.createElement("span", {
+      className: styles$e.subtitle,
+      id: `${id}-subtitle`
+    }, subtitle))
+  );
+}
+// A person's photo or the result's own image, badged with its product, or
+// just the product's logomark when there's no image.
+function ResultImage({
+  category,
+  imageUrl,
+  product
+}) {
+  const icon = size => isProductIconSlug(product) ? (/*#__PURE__*/React__default.createElement(ProductIcon, {
+    size: size,
+    slug: product
+  })) : null;
+  return /*#__PURE__*/React__default.createElement("span", {
+    "aria-hidden": true,
+    className: styles$e.image
+  }, imageUrl ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("img", {
+    alt: "",
+    className: category === "profile" ? styles$e.avatar : styles$e.photo,
+    loading: "lazy",
+    src: imageUrl
+  }), /*#__PURE__*/React__default.createElement("span", {
+    className: styles$e.badge
+  }, icon(16)))) : icon("100%"));
 }
 
+var styles$d = {"heading":"heading-LioUF","group":"group-cKChg"};
+
 // Sections with a heading render as labelled groups; ones without render
 // their items straight into the listbox. Indexes run across every section.
 function ResultListbox({
@@ -4247,16 +5512,27 @@ function ResultListbox({
   label,
   labelledBy,
   onHighlight,
+  onOpen,
   sections
 }) {
   let index = 0;
-  const renderItem = item => {
+  // With aria-activedescendant, screen readers don't reliably announce the
+  // group a highlighted option is in, so each option names its heading too.
+  const renderItem = (item, indexInSection, headingId) => {
     const itemIndex = index++;
+    // Sections without a heading of their own sit under the listbox's label.
+    const headingAbove = indexInSection > 0 ? undefined : headingId !== null && headingId !== void 0 ? headingId : itemIndex === 0 ? labelledBy : undefined;
     return /*#__PURE__*/React__default.createElement(SearchResult, {
+      category: item.category,
+      describedBy: headingId,
+      headingAbove: headingAbove,
       highlighted: itemIndex === highlightedIndex,
       id: resultId(id, itemIndex),
+      imageUrl: item.imageUrl,
       key: item.key,
       onHighlight: () => onHighlight(itemIndex),
+      onOpen: onOpen,
+      product: item.product,
       subtitle: item.subtitle,
       title: item.title,
       url: item.url
@@ -4272,16 +5548,18 @@ function ResultListbox({
     if (section.heading === undefined) {
       return /*#__PURE__*/React__default.createElement(React__default.Fragment, {
         key: section.key
-      }, section.items.map(renderItem));
+      }, section.items.map((item, itemIndex) => renderItem(item, itemIndex)));
     }
     const headingId = `${id}-group-${sectionIndex}`;
     return /*#__PURE__*/React__default.createElement("div", {
       "aria-labelledby": headingId,
+      className: styles$d.group,
       key: section.key,
       role: "group"
     }, /*#__PURE__*/React__default.createElement("div", {
+      className: styles$d.heading,
       id: headingId
-    }, section.heading), section.items.map(renderItem));
+    }, section.heading), section.items.map((item, itemIndex) => renderItem(item, itemIndex, headingId)));
   }));
 }
 
@@ -4295,9 +5573,14 @@ function RecentlyVisited({
 }) {
   const headingId = `${navigation.id}-heading`;
   if (items.length === 0 && !hasMore && !loading) {
-    return /*#__PURE__*/React__default.createElement("p", null, "Pages you visit will show up here.");
+    return /*#__PURE__*/React__default.createElement(BlankState$1, {
+      image: /*#__PURE__*/React__default.createElement(BlankStateRecentlyVisited, null),
+      subtitle: "Pages you visit will show up here.",
+      title: "Recently visited"
+    });
   } else {
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", {
+      className: styles$d.heading,
       id: headingId
     }, "Recently visited"), /*#__PURE__*/React__default.createElement(ResultListbox, {
       labelledBy: headingId,
@@ -4313,6 +5596,8 @@ function RecentlyVisited({
   }
 }
 
+var styles$c = {"row":"row-5P7UQ","header":"header-sXEyG","closeButton":"closeButton-rPJJV","input":"input-YQkTC","clearButton":"clearButton-9Yh9w"};
+
 // A combobox: focus stays here while aria-activedescendant points screen
 // readers at the highlighted result in the listbox it controls.
 function SearchInput({
@@ -4321,29 +5606,441 @@ function SearchInput({
   inputRef,
   listboxId,
   onChange,
+  onClose,
   onFocus,
   onKeyDown,
   value
 }) {
-  return /*#__PURE__*/React__default.createElement("input", {
+  const {
+    focusProps
+  } = useKeyboardFocus({
+    onFocus: (event, keyboard) => {
+      // Tabbing in selects the whole term, which the next keystroke would
+      // replace. Put the cursor after it instead, to keep typing. The
+      // browser selects after the focus event, so this waits a frame and
+      // only undoes that select-all: typing on the tabs moves focus here by
+      // script, which keeps the cursor, and the keystroke may already be in.
+      if (keyboard) {
+        const input = event.currentTarget;
+        requestAnimationFrame(() => {
+          const length = input.value.length;
+          const selectedAll = length > 0 && input.selectionStart === 0 && input.selectionEnd === length;
+          if (document.activeElement !== input || !selectedAll) return;
+          input.setSelectionRange(length, length);
+        });
+      }
+      onFocus();
+    }
+  });
+  return /*#__PURE__*/React__default.createElement("div", {
+    className: styles$c.row
+  }, /*#__PURE__*/React__default.createElement("label", {
+    className: styles$c.header,
+    id: "topbar_product_search_label"
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    name: "general.search",
+    size: 20,
+    theme: "--t-icon-color-dim"
+  }), /*#__PURE__*/React__default.createElement("input", {
     "aria-activedescendant": highlightedIndex === null ? undefined : resultId(listboxId, highlightedIndex),
     "aria-autocomplete": "list",
     "aria-controls": expanded ? listboxId : undefined,
     "aria-expanded": expanded,
     "aria-label": "Search",
     autoFocus: true,
+    className: styles$c.input,
+    id: "product_search",
     onChange: event => onChange(event.target.value),
-    onFocus: onFocus,
     onKeyDown: onKeyDown,
     placeholder: "Search",
     ref: inputRef,
     role: "combobox",
     type: "search",
-    value: value
-  });
+    value: value,
+    ...focusProps
+  }), !onClose && value !== "" && (/*#__PURE__*/React__default.createElement("button", {
+    "aria-label": "Clear search",
+    className: styles$c.clearButton,
+    onClick: () => {
+      var _a;
+      onChange("");
+      (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+    },
+    tabIndex: -1,
+    type: "button"
+  }, /*#__PURE__*/React__default.createElement("svg", {
+    "aria-hidden": true,
+    viewBox: "0 0 20 20"
+  }, /*#__PURE__*/React__default.createElement("circle", {
+    cx: "10",
+    cy: "10",
+    r: "10"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M6.5 6.5l7 7m0 -7l-7 7"
+  }))))), onClose && (/*#__PURE__*/React__default.createElement(IconButton, {
+    "aria-label": "Close search",
+    className: styles$c.closeButton,
+    icon: /*#__PURE__*/React__default.createElement(Icon, {
+      name: "general.x",
+      theme: "--t-icon-color-dim"
+    }),
+    kind: "ghost",
+    onClick: onClose,
+    size: "md"
+  })));
 }
 
-var styles$b = {"visuallyHidden":"visuallyHidden-S9VG5"};
+function BlankStateError(props) {
+  const id = useInstanceId("blank-state-error");
+  return /*#__PURE__*/React__default.createElement("svg", {
+    viewBox: "0 0 197 158",
+    fill: "none",
+    "aria-hidden": "true",
+    focusable: "false",
+    ...props
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: "M139.863 26.119c10.938 10.028 21.777 20.154 32.912 30.084 8.376 7.373 21.975 15.828 23.157 28.02.592 6.095-2.167 11.993-5.321 17.204-24.635 40.8-81.098 67.148-127.412 48.862-30.646-12.093-76.172-47.387-59.716-85.041C19.348 28.87 68.323 10.192 87.44 7.538c21.876-4.621 34.883 2.457 52.423 18.58Z",
+    fill: "currentColor"
+  }), /*#__PURE__*/React__default.createElement("g", {
+    clipPath: `url(#${id}-a)`
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: "M76.296 111.268c-2.63 0-5.95-.883-9.822-3.622a3.39 3.39 0 0 1-1.375-2.212 3.375 3.375 0 0 1 .603-2.529 3.44 3.44 0 0 1 4.777-.767c5.305 3.786 7.949 1.838 8.056 1.767a1.23 1.23 0 0 0-.094.08l4.62 5.004a10.434 10.434 0 0 1-6.765 2.279Z",
+    fill: "#4D4D4D"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M83.313 102.999a2.751 2.751 0 0 0-2.882-2.611 2.747 2.747 0 0 0-2.63 2.86l.399 8.688a2.751 2.751 0 0 0 2.882 2.611 2.746 2.746 0 0 0 2.63-2.86l-.399-8.688Z",
+    fill: "gray"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M119.428 111.268a10.438 10.438 0 0 1-6.751-2.292l4.619-5.005a1.387 1.387 0 0 0-.093-.079c.106.084 2.75 2.032 8.055-1.767a3.439 3.439 0 0 1 4.777.766 3.378 3.378 0 0 1-.772 4.742c-3.885 2.774-7.205 3.635-9.835 3.635Z",
+    fill: "#4D4D4D"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M101.658 18.962H94.68v1.533h6.978v-1.533Z",
+    fill: "#F2F2F2"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M91.823 74.82a12.502 12.502 0 0 0 9.546 1.299 16.005 16.005 0 0 0 3.151-1.326.894.894 0 0 1 1.035.24.882.882 0 0 1 .064 1.053c-2.67 3.345-7.775 4.294-11.62 2.514a8.803 8.803 0 0 1-3.302-2.513.879.879 0 0 1 .561-1.353.887.887 0 0 1 .565.068v.017Z",
+    fill: "#999"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M88.236 143.397a3.433 3.433 0 0 1-2.304-.891 3.383 3.383 0 0 1-1.096-2.201c-.636-6.788 4.237-16.369 4.798-17.442a3.41 3.41 0 0 1 2-1.643 3.442 3.442 0 0 1 2.586.227 3.398 3.398 0 0 1 1.68 1.965 3.368 3.368 0 0 1-.196 2.569c-1.75 3.37-4.402 10.066-4.059 13.693a3.38 3.38 0 0 1-.773 2.479 3.43 3.43 0 0 1-2.31 1.213l-.326.031Z",
+    fill: "#4D4D4D"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M91.645 132.708c3.972 0 7.192-3.195 7.192-7.138 0-3.942-3.22-7.137-7.192-7.137s-7.191 3.195-7.191 7.137c0 3.943 3.22 7.138 7.191 7.138Z",
+    fill: "gray"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M77.765 152.218h14.134v4.417c0 .351-.141.689-.391.937-.25.249-.59.388-.944.388H75.33a1.34 1.34 0 0 1-.945-.388 1.32 1.32 0 0 1-.39-.937v-.671c0-.997.398-1.953 1.109-2.658a3.801 3.801 0 0 1 2.678-1.101l-.018.013Z",
+    fill: "#333"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M88.548 156.141s9.697.141 7.592-9.797c-2.105-9.939-14.641-18.198-18.295-7.191-3.654 11.007-1.695 18.056 10.703 16.988Z",
+    fill: "#F2F2F2"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M109.077 143.402h-.325a3.427 3.427 0 0 1-2.313-1.216 3.38 3.38 0 0 1-.771-2.481c.342-3.627-2.305-10.323-4.054-13.693a3.371 3.371 0 0 1-.11-2.514c.29-.821.887-1.5 1.666-1.897a3.44 3.44 0 0 1 2.525-.236 3.413 3.413 0 0 1 1.993 1.555c.556 1.069 5.429 10.654 4.789 17.443a3.383 3.383 0 0 1-1.113 2.167 3.426 3.426 0 0 1-2.287.872Z",
+    fill: "#4D4D4D"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M105.672 132.708c3.972 0 7.192-3.195 7.192-7.138 0-3.942-3.22-7.137-7.192-7.137s-7.191 3.195-7.191 7.137c0 3.943 3.219 7.138 7.191 7.138Z",
+    fill: "gray"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "m121.972 158.007-15.22-.003c-.354 0-.693-.139-.943-.388a1.317 1.317 0 0 1-.391-.937v-4.417l14.139.003c1.004 0 1.967.396 2.678 1.101a3.745 3.745 0 0 1 1.108 2.658v.671c0 .352-.141.689-.391.937-.25.249-.59.388-.944.388l-.036-.013Z",
+    fill: "#333"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M108.769 156.145s-9.701.137-7.587-9.801c2.114-9.939 14.645-18.19 18.295-7.187 3.649 11.003 1.682 18.061-10.708 16.988Z",
+    fill: "#F2F2F2"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M112.002 111.683c-.07 1.51 1.108 2.791 2.63 2.86a2.75 2.75 0 0 0 2.882-2.611l.399-8.688a2.746 2.746 0 0 0-2.63-2.86 2.75 2.75 0 0 0-2.882 2.611l-.399 8.688Z",
+    fill: "gray"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M47.508 75.88c5.223 0 9.457-6.265 9.457-13.994 0-7.728-4.234-13.993-9.457-13.993-5.223 0-9.457 6.265-9.457 13.993 0 7.729 4.234 13.993 9.457 13.993Zm101.082.017c5.223 0 9.457-6.265 9.457-13.993 0-7.728-4.234-13.993-9.457-13.993-5.223 0-9.457 6.265-9.457 13.993 0 7.728 4.234 13.993 9.457 13.993Z",
+    fill: "#3690EA"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M94.622 16.97c-.133-.574 7.868-1.1 6.987.296 0 .305 0 .61.022.914 0 .884.04 1.767.04 2.681 0 .915.041 1.886.054 2.832.334.706-7.78 1.113-6.991-.133v-.795c-.036-1.935-.09-3.86-.112-5.795Z",
+    fill: "#F2F2F2"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M98.174 34.426c8.734 0 15.816-2.636 15.816-5.888s-7.082-5.888-15.816-5.888c-8.736 0-15.817 2.637-15.817 5.888 0 3.252 7.082 5.888 15.817 5.888Z",
+    fill: "#B3B3B3"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M98.174 19.625c5.458 0 9.883-4.393 9.883-9.81 0-5.418-4.425-9.81-9.883-9.81-5.46 0-9.884 4.392-9.884 9.81s4.425 9.81 9.883 9.81Z",
+    fill: "#3690EA"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M116.339 111.123c-.614-10.782-8.958-13.874-19.002-13.309-10.044.566-17.979 4.567-17.356 15.354.623 10.786 9.252 19.063 19.296 18.498 10.044-.565 17.676-9.761 17.062-20.543Z",
+    fill: "#F2F2F2"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M116.139 109.4c-1.268 8.891-8.171 15.901-16.884 16.378-9.43.53-17.623-6.74-19.096-16.559a17.615 17.615 0 0 0-.205 3.949c.619 10.781 9.257 19.063 19.297 18.498 10.039-.566 17.685-9.762 17.07-20.544a11.69 11.69 0 0 0-.182-1.722Z",
+    fill: "#E6E6E6"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M94.609 92.558c-.134-.579 7.868-1.1 6.987.291v.915c0 .883.035 1.789.04 2.68.004.893.04 1.891.053 2.837.334.702-7.779 1.108-6.991-.137v-.796c-.013-1.93-.067-3.86-.089-5.79Z",
+    fill: "#999"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M150.588 70.279V53.525a22.366 22.366 0 0 0-4.425-13.4 22.645 22.645 0 0 0-11.596-8.146c-10.613-3.19-23.061-5.027-36.376-5.031-13.315-.004-25.762 1.833-36.38 5.018a22.654 22.654 0 0 0-11.609 8.14 22.374 22.374 0 0 0-4.438 13.401v16.754a22.375 22.375 0 0 0 4.435 13.403 22.654 22.654 0 0 0 11.607 8.143c10.614 3.19 23.061 5.026 36.376 5.031 13.315.004 25.763-1.833 36.376-5.018a22.658 22.658 0 0 0 11.598-8.144 22.377 22.377 0 0 0 4.432-13.397Z",
+    fill: "#F2F2F2"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M98.16 88.976c-12.087 0-23.87-1.626-34.08-4.695a14.817 14.817 0 0 1-7.522-5.316 14.635 14.635 0 0 1-2.891-8.704V53.507a14.64 14.64 0 0 1 2.89-8.698 14.82 14.82 0 0 1 7.514-5.317c10.21-3.065 21.993-4.682 34.085-4.682 12.091 0 23.871 1.626 34.079 4.696a14.817 14.817 0 0 1 7.523 5.315 14.635 14.635 0 0 1 2.891 8.704V70.28a14.635 14.635 0 0 1-2.897 8.703 14.824 14.824 0 0 1-7.525 5.312c-10.191 3.047-21.976 4.682-34.067 4.682Zm3.498-70.014H94.68v1.533h6.978v-1.533Z",
+    fill: "#E6E6E6"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M72.367 78.304c5.195 0 9.407-7.348 9.407-16.413 0-9.065-4.212-16.414-9.407-16.414-5.196 0-9.408 7.349-9.408 16.414 0 9.065 4.212 16.413 9.408 16.413Z",
+    fill: "#1A1A1A"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M74.013 62.558c2.094 0 3.792-2.476 3.792-5.53 0-3.054-1.698-5.53-3.792-5.53s-3.791 2.476-3.791 5.53c0 3.054 1.697 5.53 3.791 5.53Z",
+    fill: "#fff"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M123.032 78.313c5.196 0 9.408-7.349 9.408-16.413 0-9.065-4.212-16.414-9.408-16.414-5.195 0-9.407 7.349-9.407 16.414 0 9.065 4.212 16.413 9.407 16.413Z",
+    fill: "#1A1A1A"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M124.679 62.567c2.094 0 3.792-2.476 3.792-5.53 0-3.054-1.698-5.53-3.792-5.53s-3.792 2.476-3.792 5.53c0 3.054 1.698 5.53 3.792 5.53Z",
+    fill: "#fff"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M105.325 106.675H90.991a.74.74 0 0 0-.743.737v2.089a.74.74 0 0 0 .743.738h14.334a.74.74 0 0 0 .743-.738v-2.089a.74.74 0 0 0-.743-.737Zm0 6.148H90.991a.74.74 0 0 0-.743.738v2.089a.74.74 0 0 0 .743.738h14.334c.41 0 .743-.331.743-.738v-2.089a.74.74 0 0 0-.743-.738Zm-.004 6.153H90.987a.74.74 0 0 0-.744.737v2.09a.74.74 0 0 0 .744.737h14.334a.74.74 0 0 0 .743-.737v-2.09a.74.74 0 0 0-.743-.737Z",
+    fill: "#3690EA"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M140.653 109.023c5.67-4.178 7.656-11.053 4.438-15.356-3.219-4.303-10.424-4.405-16.094-.227-5.67 4.177-7.656 11.052-4.438 15.356 3.219 4.303 10.424 4.405 16.094.227Z",
+    fill: "#F2F2F2"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M144.211 97.717c-3.217-4.302-10.422-4.417-16.092-.23a15.277 15.277 0 0 0-5.087 6.339c.067-3.613 2.194-7.58 5.964-10.358 5.669-4.174 12.874-4.073 16.092.23 1.86 2.486 1.976 5.83.649 9.019a7.943 7.943 0 0 0-1.526-5Z",
+    fill: "#E6E6E6"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M141.051 91.524c.966-1.66.874-3.508-.205-4.126-1.08-.618-2.737.226-3.703 1.887-.966 1.66-.874 3.508.205 4.126 1.079.619 2.737-.226 3.703-1.887Z",
+    fill: "#333"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M142.711 103.49c4.151 0 7.517-3.34 7.517-7.46s-3.366-7.46-7.517-7.46-7.516 3.34-7.516 7.46 3.365 7.46 7.516 7.46Z",
+    fill: "#333"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M70.234 108.894c3.219-4.303 1.232-11.178-4.437-15.356-5.67-4.178-12.875-4.076-16.094.227-3.219 4.303-1.232 11.179 4.438 15.356 5.67 4.178 12.875 4.076 16.093-.227Z",
+    fill: "#F2F2F2"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M50.574 97.717c3.218-4.302 10.422-4.417 16.092-.23a15.273 15.273 0 0 1 5.087 6.339c-.067-3.613-2.194-7.58-5.964-10.358-5.67-4.174-12.874-4.073-16.092.23-1.86 2.486-1.971 5.83-.65 9.019a7.945 7.945 0 0 1 1.527-5Z",
+    fill: "#E6E6E6"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M57.434 93.41c1.08-.618 1.171-2.466.206-4.126-.966-1.66-2.624-2.506-3.703-1.887-1.08.618-1.171 2.466-.205 4.126.965 1.66 2.623 2.506 3.702 1.887Z",
+    fill: "#333"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M52.074 103.49c4.151 0 7.516-3.34 7.516-7.46s-3.365-7.46-7.516-7.46-7.517 3.34-7.517 7.46 3.366 7.46 7.517 7.46Z",
+    fill: "#333"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M98.485 83.08c1.523-.183 2.609-1.544 2.426-3.041-.183-1.497-1.565-2.561-3.088-2.378-1.522.183-2.608 1.544-2.425 3.041.182 1.497 1.565 2.561 3.087 2.378Z",
+    fill: "#1A1A1A"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M101.729 11.17c1.733 0 3.138-1.394 3.138-3.113 0-1.72-1.405-3.114-3.138-3.114-1.733 0-3.137 1.394-3.137 3.114s1.404 3.114 3.137 3.114Zm52.37 52.753c.829 0 1.5-1.677 1.5-3.746s-.671-3.746-1.5-3.746c-.828 0-1.499 1.677-1.499 3.746s.671 3.746 1.499 3.746Zm-111.549 0c.829 0 1.5-1.677 1.5-3.746s-.671-3.746-1.5-3.746c-.828 0-1.5 1.677-1.5 3.746s.672 3.746 1.5 3.746Z",
+    fill: "#4BAAF7"
+  })), /*#__PURE__*/React__default.createElement("mask", {
+    id: `${id}-b`,
+    style: {
+      maskType: "alpha"
+    },
+    maskUnits: "userSpaceOnUse",
+    x: "0",
+    y: "6",
+    width: "197",
+    height: "151"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: "M139.863 26.12c10.938 10.028 21.777 20.154 32.912 30.084 8.376 7.373 21.975 15.828 23.157 28.02.592 6.095-2.167 11.993-5.321 17.204-24.635 40.8-81.098 67.148-127.412 48.862-30.646-12.093-76.172-47.387-59.716-85.041 15.865-36.377 64.84-55.056 83.957-57.71 21.876-4.621 34.883 2.457 52.423 18.58Z",
+    fill: "#CEE1FF",
+    fillOpacity: ".8"
+  })), /*#__PURE__*/React__default.createElement("g", {
+    mask: `url(#${id}-b)`
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: "m59.006 101 8 4m-4 1-4-5h6",
+    stroke: "#FFD463"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M60.006 100.999c-14.02-9.35-30.69-13.01-50-11S-26.916 103.01-38.276 115",
+    strokeWidth: "2",
+    stroke: "#fff"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "m125.304 89-8.08 3.84m1.68-3.77 6.4-.07-3.7 4.72",
+    stroke: "#FFD463"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M123.724 89.5c26.45-8.66 23 40.5 47 42.5 22.399 1.867 36.5-31.001 63 12",
+    strokeWidth: "2",
+    stroke: "#fff"
+  })), /*#__PURE__*/React__default.createElement("defs", null, /*#__PURE__*/React__default.createElement("clipPath", {
+    id: `${id}-a`
+  }, /*#__PURE__*/React__default.createElement("path", {
+    fill: "#fff",
+    transform: "translate(38.051)",
+    d: "M0 0h120v158H0z"
+  }))));
+}
+
+function BlankStateNoResults(props) {
+  const id = useInstanceId("blank-state-no-results");
+  return /*#__PURE__*/React__default.createElement("svg", {
+    viewBox: "0 0 197 152",
+    fill: "none",
+    "aria-hidden": "true",
+    focusable: "false",
+    ...props
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: "M139.863 19.971C150.801 30 161.64 40.126 172.775 50.055c8.376 7.374 21.975 15.829 23.157 28.02.592 6.095-2.167 11.994-5.321 17.205-24.635 40.8-81.098 67.148-127.412 48.862C32.553 132.049-12.973 96.754 3.483 59.1 19.348 22.724 68.323 4.044 87.44 1.39c21.876-4.62 34.883 2.458 52.423 18.581Z",
+    fill: "currentColor"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M94.382 27.326c4.859 0 8.797-3.932 8.797-8.783 0-4.85-3.938-8.783-8.797-8.783-4.858 0-8.796 3.933-8.796 8.783 0 4.851 3.938 8.783 8.796 8.783Z",
+    fill: "#3690EA"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M97.481 19.861a3.22 3.22 0 0 0 3.222-3.217 3.22 3.22 0 0 0-3.222-3.217 3.22 3.22 0 0 0-3.222 3.217 3.22 3.22 0 0 0 3.222 3.217Z",
+    fill: "#4BAAF7"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M97.564 26.688h-6.248v3.565h6.248v-3.565Z",
+    fill: "#F2F2F2"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M49.297 77.706c4.649 0 8.417-5.61 8.417-12.53 0-6.921-3.768-12.531-8.417-12.531s-8.417 5.61-8.417 12.53c0 6.92 3.768 12.531 8.417 12.531Zm89.958 0c4.649 0 8.417-5.61 8.417-12.53 0-6.921-3.768-12.531-8.417-12.531s-8.417 5.61-8.417 12.53c0 6.92 3.768 12.531 8.417 12.531Z",
+    fill: "#3690EA"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M94.379 40.574c7.774 0 14.076-2.36 14.076-5.271 0-2.912-6.302-5.272-14.076-5.272-7.774 0-14.076 2.36-14.076 5.272 0 2.911 6.302 5.271 14.076 5.271Z",
+    fill: "#B3B3B3"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M141.036 72.671V57.672a20.118 20.118 0 0 0-3.949-12 20.166 20.166 0 0 0-10.333-7.29c-9.448-2.852-20.529-4.497-32.379-4.497-11.849 0-22.926 1.645-32.374 4.497a20.167 20.167 0 0 0-10.331 7.29 20.117 20.117 0 0 0-3.95 12v15a20.112 20.112 0 0 0 3.949 12A20.163 20.163 0 0 0 62 91.962c9.448 2.856 20.53 4.496 32.375 4.496 11.844 0 22.93-1.64 32.378-4.496a20.153 20.153 0 0 0 10.333-7.289 20.107 20.107 0 0 0 3.949-12.002Z",
+    fill: "#F2F2F2"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M94.387 89.422c-10.76 0-21.248-1.448-30.348-4.193a13.19 13.19 0 0 1-6.698-4.759 13.159 13.159 0 0 1-2.576-7.794v-15a13.163 13.163 0 0 1 2.577-7.793 13.196 13.196 0 0 1 6.697-4.76c9.082-2.744 19.574-4.193 30.348-4.193 10.773 0 21.248 1.449 30.348 4.194a13.2 13.2 0 0 1 6.701 4.757 13.17 13.17 0 0 1 2.582 7.795v15a13.164 13.164 0 0 1-2.577 7.794 13.195 13.195 0 0 1-6.697 4.759c-9.109 2.727-19.597 4.193-30.357 4.193Z",
+    fill: "#E6E6E6"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M71.426 79.868c4.624 0 8.373-6.58 8.373-14.696s-3.749-14.696-8.373-14.696c-4.624 0-8.372 6.58-8.372 14.696 0 8.117 3.748 14.697 8.372 14.697Z",
+    fill: "#1A1A1A"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M72.894 65.765c1.863 0 3.373-2.217 3.373-4.95 0-2.735-1.51-4.952-3.373-4.952-1.864 0-3.375 2.217-3.375 4.951 0 2.734 1.511 4.95 3.374 4.95Z",
+    fill: "#fff"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M116.517 79.868c4.624 0 8.373-6.58 8.373-14.696s-3.749-14.696-8.373-14.696c-4.624 0-8.372 6.58-8.372 14.696 0 8.117 3.748 14.697 8.372 14.697Z",
+    fill: "#1A1A1A"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M117.981 65.765c1.864 0 3.374-2.217 3.374-4.95 0-2.735-1.51-4.952-3.374-4.952-1.863 0-3.374 2.217-3.374 4.951 0 2.734 1.511 4.95 3.374 4.95Z",
+    fill: "#fff"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M100.012 80.196a14.156 14.156 0 0 0-2.785-1.159 10.598 10.598 0 0 0-5.713 0 14.09 14.09 0 0 0-2.78 1.159h-.027a.773.773 0 0 1-.973-1.159 8.74 8.74 0 0 1 6.639-3.049 8.754 8.754 0 0 1 6.638 3.05.773.773 0 0 1-.977 1.158h-.022Z",
+    fill: "#999"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M44.788 67.69c.853 0 1.545-1.731 1.545-3.867 0-2.137-.692-3.868-1.545-3.868-.852 0-1.544 1.731-1.544 3.867 0 2.137.691 3.868 1.544 3.868Zm99.38 0c.853 0 1.544-1.731 1.544-3.867 0-2.137-.691-3.868-1.544-3.868-.853 0-1.544 1.731-1.544 3.867 0 2.137.691 3.868 1.544 3.868Z",
+    fill: "#4BAAF7"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M79.596 106.857s-13.835 0-13.835-18.752",
+    strokeWidth: "13.63",
+    strokeMiterlimit: "10",
+    strokeLinecap: "round",
+    stroke: "#4D4D4D"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M79.295 99.708h-.004a2.453 2.453 0 0 0-2.34 2.56l.353 7.781a2.453 2.453 0 0 0 2.564 2.337h.004a2.452 2.452 0 0 0 2.34-2.559l-.353-7.782a2.453 2.453 0 0 0-2.564-2.337Z",
+    fill: "gray"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M109.137 104.385s3.851 3.681 10.947-1.181",
+    strokeWidth: "13.63",
+    strokeMiterlimit: "10",
+    strokeLinecap: "round",
+    stroke: "#4D4D4D"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "m107.907 112.125.004.001a2.455 2.455 0 0 0 2.859-1.966l1.414-7.661a2.451 2.451 0 0 0-1.97-2.854h-.004a2.455 2.455 0 0 0-2.859 1.965l-1.413 7.661a2.45 2.45 0 0 0 1.969 2.854Z",
+    fill: "gray"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M89.494 121.176s-4.44 8.569-3.936 13.934",
+    strokeWidth: "13.63",
+    strokeMiterlimit: "10",
+    strokeLinecap: "round",
+    stroke: "#4D4D4D"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M88.59 128.571c3.535 0 6.4-2.861 6.4-6.39a6.395 6.395 0 0 0-6.4-6.39 6.395 6.395 0 0 0-6.4 6.39 6.395 6.395 0 0 0 6.4 6.39Z",
+    fill: "gray"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M76.233 146.043h12.585v3.966a1.205 1.205 0 0 1-1.205 1.204H74.068a1.205 1.205 0 0 1-1.205-1.204v-.601a3.367 3.367 0 0 1 .989-2.378 3.38 3.38 0 0 1 2.38-.987Z",
+    fill: "#333"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M85.808 149.557s8.631.125 6.752-8.774c-1.878-8.899-13-16.291-16.263-6.434-3.262 9.857-1.499 16.166 9.511 15.208Z",
+    fill: "#F2F2F2"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M100.159 121.176s4.463 8.569 3.937 13.934",
+    strokeWidth: "13.63",
+    strokeMiterlimit: "10",
+    strokeLinecap: "round",
+    stroke: "#4D4D4D"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M101.064 128.571c3.534 0 6.4-2.861 6.4-6.39 0-3.529-2.866-6.39-6.4-6.39a6.395 6.395 0 0 0-6.4 6.39 6.395 6.395 0 0 0 6.4 6.39Z",
+    fill: "gray"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M115.584 151.216h-13.545a1.206 1.206 0 0 1-1.205-1.203v-3.98h12.586a3.37 3.37 0 0 1 3.374 3.369v.602a1.21 1.21 0 0 1-.745 1.121 1.23 1.23 0 0 1-.465.091Z",
+    fill: "#333"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M103.838 149.557s-8.632.125-6.757-8.774c1.874-8.899 13.036-16.291 16.285-6.434 3.249 9.857 1.5 16.166-9.528 15.208Zm6.725-40.315c-.549-9.652-7.975-12.415-16.91-11.907-8.935.508-16.004 4.091-15.455 13.748.549 9.656 8.243 17.067 17.178 16.559 8.935-.508 15.736-8.743 15.187-18.4Z",
+    fill: "#F2F2F2"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M110.402 107.707c-1.129 7.958-7.271 14.228-15.027 14.665-8.39.477-15.683-6.034-16.995-14.821a15.77 15.77 0 0 0-.183 3.533c.549 9.652 8.239 17.067 17.178 16.559 8.939-.508 15.736-8.742 15.174-18.399a14.03 14.03 0 0 0-.147-1.537Z",
+    fill: "#E6E6E6"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M100.76 105.262H88a.66.66 0 0 0-.66.66v1.871c0 .365.296.66.66.66h12.76a.66.66 0 0 0 .66-.66v-1.871a.66.66 0 0 0-.66-.66Zm0 5.512H88a.66.66 0 0 0-.66.66v1.871c0 .364.296.66.66.66h12.76a.66.66 0 0 0 .66-.66v-1.871a.66.66 0 0 0-.66-.66Zm0 5.505H88a.66.66 0 0 0-.66.66v1.871c0 .364.296.66.66.66h12.76a.66.66 0 0 0 .66-.66v-1.871a.66.66 0 0 0-.66-.66Z",
+    fill: "#3690EA"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M133.43 107.146c5.688-4.463 7.529-11.6 4.111-15.943-3.417-4.343-10.799-4.245-16.487.218-5.688 4.463-7.529 11.601-4.111 15.943 3.417 4.343 10.799 4.245 16.487-.218Z",
+    fill: "#F2F2F2"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M136.74 95.34c-3.418-4.344-10.8-4.246-16.486.22a15.744 15.744 0 0 0-5.034 6.683c-.031-3.725 2.035-7.87 5.802-10.837 5.69-4.456 13.072-4.559 16.491-.218 1.972 2.508 2.182 5.953.919 9.273a8.246 8.246 0 0 0-1.692-5.12Z",
+    fill: "#E6E6E6"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M127.405 89.78c1.87.546 3.824.751 5.766.605v0a16.153 16.153 0 0 0 9.056-3.631",
+    strokeWidth: "13.63",
+    strokeMiterlimit: "10",
+    strokeLinecap: "round",
+    stroke: "#333"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M79.875 85.766c2.25-7.476-.567-14.93-6.293-16.649-5.727-1.718-12.194 2.949-14.444 10.425-2.251 7.476.567 14.93 6.293 16.648 5.727 1.719 12.194-2.948 14.444-10.424Z",
+    fill: "#F2F2F2"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M69.713 71.558c5.726 1.72 8.542 9.175 6.293 16.652a16.978 16.978 0 0 1-4.74 7.687c3.767-1.435 7.141-5.151 8.627-10.12 2.232-7.477-.567-14.932-6.293-16.648-3.311-.993-6.863.152-9.706 2.736 1.85-.75 3.9-.858 5.82-.307Z",
+    fill: "#E6E6E6"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M77.006 68.04a6.195 6.195 0 0 1-4.269-1.866 6.176 6.176 0 0 1 0-8.623 6.195 6.195 0 0 1 4.27-1.867",
+    strokeWidth: "13.63",
+    strokeMiterlimit: "10",
+    strokeLinecap: "round",
+    stroke: "#333"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M81.567 54.262c-.103.03-.205.07-.303.106l-.304.112-.303.111-.3.112-.303.111c-.103.031-.2.071-.303.111-.103.04-.201.072-.304.108l-.299.11-.303.112-.304.112c-.102.03-.2.071-.303.111l-.3.107-.303.111-.303.112-.304.111c-.098.031-.2.072-.299.112-.098.04-.205.07-.303.111-.099.04-.201.071-.304.107l-.299.111-.303.112a5.63 5.63 0 0 0-3.824 4.578 5.62 5.62 0 0 0 1.101 4.178 5.578 5.578 0 0 0 2.754 1.956l.303.112.304.111.308.112.303.11.304.112.303.112.304.111.303.112.308.111.304.111.303.112.304.111c.102.036.2.076.303.107l.308.116c.098.036.2.076.303.107.103.031.201.08.304.111.103.031.2.08.303.112.103.03.201.08.304.111.103.031.2.08.303.111.103.032.206.08.308.112a8.12 8.12 0 0 0 10.027-3.863 8.087 8.087 0 0 0-2.619-10.407 8.117 8.117 0 0 0-7.479-.88v.004Z",
+    fill: "#2278D6"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M97.105 47.237c-.192.062-.389.138-.58.21-.193.07-.393.142-.585.213-.192.072-.389.138-.585.214-.196.076-.388.138-.58.214-.192.076-.393.138-.585.214-.192.076-.388.138-.584.214-.197.076-.389.138-.585.214-.197.075-.388.138-.58.214-.192.075-.389.138-.585.213-.196.076-.388.139-.585.21-.196.071-.388.143-.58.214-.192.071-.392.138-.584.214-.192.075-.389.138-.585.214-.196.075-.388.138-.585.213-.196.076-.388.139-.58.214-.192.076-.393.139-.585.214-.191.076-.388.138-.584.214-.197.076-.389.138-.585.214-.196.076-.388.134-.58.21-.192.075-.388.138-.585.213a10.762 10.762 0 0 0-3.146 1.65 10.844 10.844 0 0 0-1.674 15.763 10.879 10.879 0 0 0 4.883 3.233c.196.075.388.151.589.213.2.063.388.152.585.214.196.063.392.152.589.219.196.067.388.147.584.214l.59.213c.196.076.388.152.589.214.2.063.388.152.584.214.197.063.388.152.59.214.2.063.388.152.584.219.196.066.388.147.59.213.2.067.387.148.584.214.196.067.388.147.589.214.2.067.388.152.584.214.197.063.393.152.59.214.196.062.388.151.584.218l.59.214c.196.072.388.147.584.214.196.067.393.147.59.214.196.067.387.151.588.214.201.062.388.151.585.214a15.669 15.669 0 0 0 14.439-1.806 15.624 15.624 0 0 0 6.706-12.895 15.597 15.597 0 0 0-1.829-7.256 15.659 15.659 0 0 0-19.454-7.244Z",
+    fill: "#3690EA"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M119.065 37.388a25.93 25.93 0 0 0-.978.356c-.326.125-.651.232-.977.357-.326.125-.652.232-.978.356-.325.125-.651.232-.977.361-.326.13-.652.232-.977.357-.326.125-.652.232-.978.356-.326.125-.656.232-.977.357-.322.125-.656.232-.978.36-.321.13-.651.228-.977.357-.326.13-.656.232-.977.357-.322.124-.656.231-.978.356-.321.125-.656.232-.977.357-.321.125-.656.231-.977.36-.322.13-.657.228-.978.357-.321.13-.656.232-.977.357-.322.124-.656.231-.978.356-.321.125-.656.232-.982.361-.325.13-.651.227-.977.357-.326.129-.651.227-.973.356-.321.13-.656.232-.982.357a18.217 18.217 0 0 0-7.281 4.523A18.158 18.158 0 0 0 90.716 72.8a18.097 18.097 0 0 0 8.926 6.314c.326.13.651.254.986.361.335.107.652.254.982.361.33.107.652.25.986.36.335.112.647.25.982.357.335.107.652.254.982.361.33.107.652.25.986.361.335.112.652.25.982.357.33.107.652.254.986.36.335.108.648.25.982.362.335.111.652.25.982.356.33.107.652.254.986.361.335.107.652.25.982.361.331.111.652.25.982.357.33.106.656.253.986.36.331.107.652.254.982.361.331.107.652.25.987.361.334.112.651.25.981.357.331.107.652.254.987.36.334.108.647.25.982.362.334.111.651.25.981.356a26.26 26.26 0 0 0 24.2-3.02 26.2 26.2 0 0 0 8.29-9.42 26.147 26.147 0 0 0-.114-24.35 26.194 26.194 0 0 0-8.377-9.343 26.244 26.244 0 0 0-24.226-2.795l-.022.009Z",
+    fill: "#50B0FF"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M128.994 80.692a18.926 18.926 0 0 1-11.736-4.091 18.853 18.853 0 0 1-5.352-22.825 18.889 18.889 0 0 1 8.696-8.867 18.93 18.93 0 0 1 22.967 4.864 18.856 18.856 0 0 1 .514 23.437 18.738 18.738 0 0 1-6.655 5.529 18.772 18.772 0 0 1-8.434 1.953Z",
+    fill: "#D6DEE5"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M129.021 45.14a16.719 16.719 0 0 1 10.373 3.604 16.67 16.67 0 0 1 5.887 9.258 16.65 16.65 0 0 1-1.144 10.906 16.687 16.687 0 0 1-7.681 7.838 16.724 16.724 0 0 1-10.896 1.38 16.704 16.704 0 0 1-9.398-5.675 16.657 16.657 0 0 1-.449-20.708 16.64 16.64 0 0 1 13.322-6.604h-.014Zm.014-4.417a21.143 21.143 0 0 0-13.684 5.01 21.066 21.066 0 0 0-4.43 26.958 21.12 21.12 0 0 0 11.363 9.113 21.153 21.153 0 0 0 14.569-.404 21.113 21.113 0 0 0 10.84-9.728 21.063 21.063 0 0 0 1.948-14.422 21.086 21.086 0 0 0-7.869-12.249 20.973 20.973 0 0 0-12.737-4.278Z",
+    fill: "#1B64CE"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M131.495 67.397c4.287 0 7.762-3.47 7.762-7.749 0-4.28-3.475-7.75-7.762-7.75-4.286 0-7.761 3.47-7.761 7.75 0 4.28 3.475 7.75 7.761 7.75Z",
+    fill: "#fff"
+  }), /*#__PURE__*/React__default.createElement("path", {
+    d: "M137.039 56.638a3.996 3.996 0 0 0 3.999-3.993 3.996 3.996 0 0 0-3.999-3.992 3.996 3.996 0 0 0-3.999 3.992 3.996 3.996 0 0 0 3.999 3.993Z",
+    fill: "#fff"
+  }), /*#__PURE__*/React__default.createElement("mask", {
+    id: `${id}-a`,
+    style: {
+      maskType: "alpha"
+    },
+    maskUnits: "userSpaceOnUse",
+    x: "90",
+    y: "96",
+    width: "9",
+    height: "4"
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: "M94.651 96.461c-1.785 0-3.26-.038-3.78-.038v2.897h7.14v-2.897c-.371 0-1.574.038-3.36.038Z",
+    fill: "#000"
+  })), /*#__PURE__*/React__default.createElement("g", {
+    mask: `url(#${id}-a)`
+  }, /*#__PURE__*/React__default.createElement("path", {
+    d: "M94.51 95.545c-1.732.049-3.124.25-3.124.494v2.617c0 .245 1.392.446 3.124.495 1.731.049 3.124-.138 3.124-.384v-2.839c0-.245-1.393-.432-3.124-.383Z",
+    fill: "#999"
+  })));
+}
+
+var styles$b = {"spinner":"spinner-b5tlz"};
+
+function LoadingSpinner({
+  size = 48,
+  trackWidth = 6
+}) {
+  return /*#__PURE__*/React__default.createElement("span", {
+    "aria-hidden": "true",
+    className: styles$b.spinner,
+    style: {
+      "--spinner-size": `${size}px`,
+      "--spinner-track-width": `${trackWidth}px`
+    }
+  });
+}
 
 function SearchResults({
   label,
@@ -4364,18 +6061,36 @@ function SearchResults({
           ...navigation
         });
       }
-      return /*#__PURE__*/React__default.createElement("p", {
-        role: "status"
-      }, "Searching\u2026");
+      return /*#__PURE__*/React__default.createElement(Flex, {
+        role: "status",
+        justify: "center",
+        align: "center",
+        gap: 2,
+        direction: "column",
+        style: {
+          color: "var(--t-text-color-placeholder)",
+          fontSize: "var(--t-font-size-md)",
+          marginTop: 48
+        }
+      }, /*#__PURE__*/React__default.createElement(LoadingSpinner, {
+        size: 40,
+        trackWidth: 5
+      }), "Searching\u2026");
     case "error":
-      return /*#__PURE__*/React__default.createElement("p", {
-        role: "alert"
-      }, "Search isn\u2019t working right now. Try again.");
+      return /*#__PURE__*/React__default.createElement(BlankState$1, {
+        image: /*#__PURE__*/React__default.createElement(BlankStateError, null),
+        role: "alert",
+        subtitle: "Try again in a moment.",
+        title: "Search isn\u2019t working right now"
+      });
     case "done":
       if (sections.length === 0) {
-        return /*#__PURE__*/React__default.createElement("p", {
-          role: "status"
-        }, "No results for \u201C", term.trim(), "\u201D");
+        // The panel's result count announces this, so it isn't read twice.
+        return /*#__PURE__*/React__default.createElement(BlankState$1, {
+          image: /*#__PURE__*/React__default.createElement(BlankStateNoResults, null),
+          subtitle: "Clear search and try again.",
+          title: `No results for “${term.trim()}”`
+        });
       }
       return /*#__PURE__*/React__default.createElement(ResultListbox, {
         busy: false,
@@ -4390,31 +6105,43 @@ function SearchResults({
 // stays put as more recents load and as their lookups answer.
 const RECENTS = "recents";
 function SearchPanel({
+  appName,
+  mobile = false,
   env,
+  onClose,
+  onOpenResult,
   products
 }) {
   var _a, _b;
   const listboxId = useInstanceId("product-search-results");
   const [term, setTerm] = React__default.useState("");
-  const [selectedSlug, setSelectedSlug] = React__default.useState(() => initialProduct(products).slug);
+  const [selectedSlug, setSelectedSlug] = React__default.useState(() => defaultProduct(products, appName).slug);
   const product = (_a = products.find(({
     slug
   }) => slug === selectedSlug)) !== null && _a !== void 0 ? _a : products[0];
   const hasTerm = term.trim() !== "";
   const search = useProductSearch(product.slug, term);
   const groups = "groups" in search ? search.groups : undefined;
-  const sections = React__default.useMemo(() => groupSections(groups), [groups]);
+  const {
+    organizationTimeZone
+  } = useStore();
+  const sections = React__default.useMemo(() => groupSections(groups, organizationTimeZone), [groups, organizationTimeZone]);
   const {
     visits,
     ...recents
   } = useRecentVisits(env);
-  const recentItems = visits.map(visitItem);
+  const recentItems = visits.map(visit => visitItem(visit, organizationTimeZone));
   const items = hasTerm ? sections.flatMap(section => section.items) : recentItems;
-  const navigation = useResultNavigation(items, hasTerm ? sections : RECENTS);
+  // Phones open results by tapping them, with no highlight to arrow through.
+  // A narrow window with a keyboard and mouse keeps both, as does the desktop
+  // layout on a touch device, whose keyboard hints still advertise them.
+  const touchOnly = useMediaQuery("(hover: none) and (pointer: coarse)");
+  const navigation = useResultNavigation(items, hasTerm ? sections : RECENTS, !(mobile && touchOnly));
   const {
     highlightedIndex
   } = navigation;
   const inputRef = React__default.useRef(null);
+  const resultCount = useAnnouncement(hasTerm && search.status === "done" ? `${items.length === 0 ? "No results" : `${items.length} ${items.length === 1 ? "result" : "results"}`} for “${term.trim()}” in ${product.appName}` : null);
   const [announceHighlight, setAnnounceHighlight] = React__default.useState(false);
   // The tabs keep focus while arrowing through results, but only the focused
   // input can point screen readers at the highlight, so from the tabs it's
@@ -4430,41 +6157,50 @@ function SearchPanel({
       navigation.handleKeyDown(event);
     }
   };
-  React__default.useEffect(() => {
-    if (hasTerm) saveLastProduct(product.slug);
-  }, [hasTerm, product.slug]);
+  const results = hasTerm ? (/*#__PURE__*/React__default.createElement(SearchResults, {
+    highlightedIndex: highlightedIndex,
+    id: listboxId,
+    label: `Results from Planning Center ${product.appName}`,
+    onHighlight: navigation.highlightIndex,
+    onOpen: onOpenResult,
+    sections: sections,
+    status: search.status,
+    term: term
+  })) : (/*#__PURE__*/React__default.createElement(RecentlyVisited, {
+    highlightedIndex: highlightedIndex,
+    id: listboxId,
+    items: recentItems,
+    onHighlight: navigation.highlightIndex,
+    onOpen: onOpenResult,
+    ...recents
+  }));
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(SearchInput, {
     expanded: items.length > 0,
     highlightedIndex: highlightedIndex,
     inputRef: inputRef,
     listboxId: listboxId,
     onChange: setTerm,
+    onClose: onClose,
     onFocus: () => setAnnounceHighlight(false),
     onKeyDown: navigation.handleKeyDown,
     value: term
-  }), /*#__PURE__*/React__default.createElement(ProductTabs, {
+  }), mobile ? (/*#__PURE__*/React__default.createElement(ProductSelect, {
+    onSelect: setSelectedSlug,
+    products: products,
+    selected: product
+  }, results)) : (/*#__PURE__*/React__default.createElement(ProductTabs, {
     onKeyDown: handleTabsKeyDown,
     onSelect: setSelectedSlug,
     products: products,
     selected: product
-  }, hasTerm ? (/*#__PURE__*/React__default.createElement(SearchResults, {
-    highlightedIndex: highlightedIndex,
-    id: listboxId,
-    label: `${product.appName} results`,
-    onHighlight: navigation.highlightIndex,
-    sections: sections,
-    status: search.status,
-    term: term
-  })) : (/*#__PURE__*/React__default.createElement(RecentlyVisited, {
-    highlightedIndex: highlightedIndex,
-    id: listboxId,
-    items: recentItems,
-    onHighlight: navigation.highlightIndex,
-    ...recents
-  }))), /*#__PURE__*/React__default.createElement("div", {
+  }, results)), /*#__PURE__*/React__default.createElement("div", {
+    "aria-live": "polite",
+    className: styles$k.visuallyHidden
+  }, announceHighlight ? (_b = navigation.highlighted) === null || _b === void 0 ? void 0 : _b.title : null), /*#__PURE__*/React__default.createElement("div", {
     "aria-live": "polite",
-    className: styles$b.visuallyHidden
-  }, announceHighlight ? (_b = navigation.highlighted) === null || _b === void 0 ? void 0 : _b.title : null), /*#__PURE__*/React__default.createElement(KeyboardHints, {
+    className: styles$k.visuallyHidden,
+    "data-testid": "result-count"
+  }, resultCount), mobile ? null : /*#__PURE__*/React__default.createElement(KeyboardHints, {
     copied: navigation.copied
   }));
 }
@@ -4535,32 +6271,6 @@ function useSearchShortcut(enabled, open, setOpen) {
   }, [enabled, open, setOpen]);
 }
 
-const SEARCHABLE_PRODUCTS = [{
-  appName: "Calendar",
-  slug: "calendar"
-}, {
-  appName: "Check-Ins",
-  slug: "check-ins"
-}, {
-  appName: "Giving",
-  slug: "giving"
-}, {
-  appName: "Groups",
-  slug: "groups"
-}, {
-  appName: "People",
-  slug: "people"
-}, {
-  appName: "Publishing",
-  slug: "publishing"
-}, {
-  appName: "Registrations",
-  slug: "registrations"
-}, {
-  appName: "Services",
-  slug: "services"
-}];
-
 const PERMISSION_CHECKS = {
   "check-ins": () => fetchMe("check-ins", "permission").then(({
     permission
@@ -4665,24 +6375,60 @@ function inSwitcherOrder(apps) {
   return groupApps(apps).restProducts.flatMap(app => SEARCHABLE_PRODUCTS.filter(product => product.appName === app.name));
 }
 
+/**
+ * Writes the height of the visible part of the page to the parent of `ref`'s
+ * element as `--visual-viewport-height`. It shrinks when an on-screen keyboard
+ * opens; `100dvh` doesn't, since mobile Safari draws the keyboard over it.
+ */
+function useVisualViewportHeight(ref, enabled) {
+  React__default.useEffect(() => {
+    var _a;
+    const viewport = window.visualViewport;
+    const parent = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.parentElement;
+    if (!enabled || !viewport || !parent) return undefined;
+    const update = () => parent.style.setProperty("--visual-viewport-height", `${viewport.height}px`);
+    update();
+    viewport.addEventListener("resize", update);
+    return () => {
+      viewport.removeEventListener("resize", update);
+      parent.style.removeProperty("--visual-viewport-height");
+    };
+  }, [enabled, ref]);
+}
+
 function ProductSearch({
+  appName,
   apps,
+  mobile = false,
   env
 }) {
   const searchable = useSearchableProducts(apps);
   const [open, setOpen] = React__default.useState(false);
+  const modalRef = React__default.useRef(null);
+  // Sizes Tapestry's modal frame, the dialog's parent, to fit above the keyboard.
+  useVisualViewportHeight(modalRef, mobile && open);
   const available = searchable.status === "done" && searchable.products.length > 0;
   useSearchShortcut(available, open, setOpen);
   if (!available) return null;
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(SearchButton, {
+    mobile: mobile,
     onClick: () => setOpen(true)
   }), /*#__PURE__*/React__default.createElement(Modal, {
     "aria-label": "Search",
+    className: styles$k.modal,
     dismissible: true,
+    id: "product_search_modal",
     onClose: () => setOpen(false),
-    open: open
+    open: open,
+    ref: modalRef,
+    size: "lg"
   }, /*#__PURE__*/React__default.createElement(SearchPanel, {
+    appName: appName,
+    mobile: mobile,
     env: env,
+    // Phones have no Esc, so mobile search gets a close button.
+    onClose: mobile ? () => setOpen(false) : undefined,
+    onOpenResult: () => setOpen(false),
     products: searchable.products
   })));
 }
@@ -4976,6 +6722,7 @@ const NotSmallTopbar = ({
       margin: "auto"
     }
   }), !notificationsEnabled && notifications(), productSearchEnabled ? (/*#__PURE__*/React__default.createElement(ProductSearch, {
+    appName: props.appName,
     apps: props.apps,
     env: props.env
   })) : search({
@@ -32890,7 +34637,7 @@ ClientStorage.defaultProps = {
   method: "localStorage"
 };
 
-var styles$6 = {"appmenu-button":"appmenu-button-b0UvT","appmenu-layer":"appmenu-layer-0IQpN","appmenu-container":"appmenu-container-gackd","appmenu-scroll":"appmenu-scroll-mPSx0","appmenu-list":"appmenu-list-h7clX","appmenu-list-a":"appmenu-list-a-rGIQN","appmenu-list-a--top":"appmenu-list-a--top-RT-2F","appmenu-list-a--bottom":"appmenu-list-a--bottom-YDeBC","appmenu-close-button":"appmenu-close-button-vv9bV","current-route":"current-route-wpJgz","is-active":"is-active-wy8Bg","routes":"routes-Nmt1S","route":"route-kkknQ","profile-button":"profile-button-a2WO2"};
+var styles$6 = {"appmenu-button":"appmenu-button-b0UvT","appmenu-layer":"appmenu-layer-0IQpN","appmenu-container":"appmenu-container-gackd","appmenu-scroll":"appmenu-scroll-mPSx0","appmenu-list":"appmenu-list-h7clX","appmenu-list-a":"appmenu-list-a-rGIQN","appmenu-list-a--top":"appmenu-list-a--top-RT-2F","appmenu-list-a--bottom":"appmenu-list-a--bottom-YDeBC","appmenu-close-button":"appmenu-close-button-vv9bV","current-route":"current-route-wpJgz","actions":"actions-INQ7-","is-active":"is-active-wy8Bg","routes":"routes-Nmt1S","route":"route-kkknQ","profile-button":"profile-button-a2WO2"};
 
 function AccountSettingsLink({
   env
@@ -33110,7 +34857,14 @@ const SmallTopbar = ({
       setProductSwitcherVisible(false);
       setRoutesMenuVisible(visible => !visible);
     } : null
-  }, /*#__PURE__*/React__default.createElement(CurrentRouteComponent, null, capitalize$1(currentRouteText)), props.routes.length > 0 && /*#__PURE__*/React__default.createElement(DisclosureChevronIcon, null)), /*#__PURE__*/React__default.createElement("button", {
+  }, /*#__PURE__*/React__default.createElement(CurrentRouteComponent, null, capitalize$1(currentRouteText)), props.routes.length > 0 && /*#__PURE__*/React__default.createElement(DisclosureChevronIcon, null)), /*#__PURE__*/React__default.createElement("div", {
+    className: styles$6["actions"]
+  }, productSearchEnabled && (/*#__PURE__*/React__default.createElement(ProductSearch, {
+    appName: props.appName,
+    apps: props.apps,
+    mobile: true,
+    env: props.env
+  })), /*#__PURE__*/React__default.createElement("button", {
     type: "button",
     className: styles$6["profile-button"],
     onClick: () => {
@@ -33121,7 +34875,7 @@ const SmallTopbar = ({
   }, /*#__PURE__*/React__default.createElement(Avatar, {
     env: props.env,
     url: props.userAvatarPath
-  })));
+  }))));
 };
 const SmallRoute = ({
   active,
@@ -33611,38 +35365,6 @@ const SwitchView = ({
   }));
 };
 
-const collections = {
-  general,
-  toolbar
-};
-const paths = collections;
-function Icon({
-  name,
-  size = 16,
-  style,
-  theme,
-  title,
-  ...props
-}) {
-  const [collection, symbol] = name.split(".");
-  return /*#__PURE__*/React__default.createElement("svg", {
-    "aria-hidden": title ? undefined : true,
-    fill: "currentColor",
-    height: size,
-    role: title ? "img" : undefined,
-    style: {
-      color: theme && `var(${theme})`,
-      flexShrink: 0,
-      ...style
-    },
-    viewBox: "0 0 16 16",
-    width: size,
-    ...props
-  }, title && /*#__PURE__*/React__default.createElement("title", null, title), /*#__PURE__*/React__default.createElement("path", {
-    d: paths[collection][symbol]
-  }));
-}
-
 var styles$3 = {"color-mode-switcher":"color-mode-switcher-JpczO","color-mode-switcher-label":"color-mode-switcher-label-3jPM2","color-mode-switcher-modes":"color-mode-switcher-modes-u-bic"};
 
 const COLOR_MODES = [{
@@ -35130,13 +36852,15 @@ const useNotifications = ({
       return notification.data;
     }
   };
-  const updateStateFromJoltMessage = React__default.useCallback(message => {
+  const updateStateFromJoltMessage = React__default.useCallback(async message => {
     try {
       const joltMessageNotificationDataPayload = extractPayloadFromJoltMessage(message);
-      fetchNotification(joltMessageNotificationDataPayload.data.id).then(resp => {
-        const notification = buildNotificationFromApiResponse(resp.data, resp);
-        setNotifications(notifications => [...notifications.filter(candidate => candidate.id !== notification.id), notification]);
-      });
+      const resp = await fetchNotification(joltMessageNotificationDataPayload.data.id);
+      if (!(resp === null || resp === void 0 ? void 0 : resp.data)) {
+        return;
+      }
+      const notification = buildNotificationFromApiResponse(resp.data, resp);
+      setNotifications(notifications => [...notifications.filter(candidate => candidate.id !== notification.id), notification]);
     } catch (exception) {
       console.error("topbar encountered error when updating state from jolt message", exception);
     }