@planningcenter/topbar 12.4.0 → 12.4.1-qa-959.0

package/dist/topbar.modern.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 = {"icon-slot":"icon-slot-m3ZIk","name":"name-UNqbW"};
 
 const AppRow = ({
   appName,
@@ -1759,24 +1761,24 @@ const AppRow = ({
 }) => {
   if (appName === "Accounts") {
     return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("span", {
-      className: styles$k["icon-slot"]
+      className: styles$s["icon-slot"]
     }, /*#__PURE__*/React__default.createElement(MonoAppIcon, {
       appName: "Accounts",
       colors: colors,
       size: iconSize
     })), /*#__PURE__*/React__default.createElement("span", {
-      className: styles$k.name
+      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,10 +1790,10 @@ 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",
@@ -1802,13 +1804,13 @@ const AppsButton = /*#__PURE__*/React__default.forwardRef(({
       size: 22
     })),
     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 +1831,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 +1848,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 +2071,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 +2080,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 +2089,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 +2104,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 +2114,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 +2122,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 +2255,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 +2263,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 +2272,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 +2314,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,34 +3224,117 @@ 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,
     onClick: onClick,
     type: "button"
-  }, /*#__PURE__*/React__default.createElement(Spyglass, {
-    fill: "currentColor"
+  }, /*#__PURE__*/React__default.createElement(Icon, {
+    name: "general.search",
+    size: mobile ? 18 : 14
   }));
 }
 
@@ -3564,16 +3649,16 @@ function useRecentlyVisitableMetadata() {
 const ENTRY_VERSION = 3;
 const MAX_ENTRIES = 50;
 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);
@@ -3972,7 +4057,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);
@@ -3996,22 +4087,27 @@ function useCopyLink() {
 // 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) {
+// 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 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 => {
+    if (!enabled) return;
+    setHighlight(current => current.list === list && current.index === index ? current : {
+      index,
+      list
+    });
+  }, [enabled, list]);
   const handleKeyDown = event => {
+    if (!enabled) return;
     const step = verticalStep(event.key);
     if (step && items.length > 0) {
       event.preventDefault();
@@ -4035,41 +4131,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) {
+function describeVisit(visit, timeZone) {
   var _a, _b;
-  const subtitle = (...parts) => parts.filter(Boolean).join(" · ");
   if (visit.status === "page") {
     const {
       app,
@@ -4077,19 +4221,31 @@ 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(productName(app), 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(productName(product), kind, summarize(attributes, timeZone)),
       title,
       url: visit.url
     };
@@ -4103,39 +4259,278 @@ 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
+  }, /*#__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 +4541,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 +4556,14 @@ 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-describedby": `${tabId(product.slug)}-description`,
     "aria-selected": product === selected,
-    className: styles$d.tab,
     id: tabId(product.slug),
     key: product.slug,
     onClick: () => onSelect(product.slug),
@@ -4177,15 +4574,397 @@ 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", {
+    className: styles$k.visuallyHidden
+  }, products.map(product => (/*#__PURE__*/React__default.createElement("span", {
+    id: `${tabId(product.slug)}-description`,
+    key: product.slug
+  }, "Planning Center ", 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 +4984,98 @@ 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,
   highlighted,
   id,
+  imageUrl,
   onHighlight,
+  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"
-    });
+    if (!highlighted) return;
+    if (highlightedByPointer.current) {
+      highlightedByPointer.current = false;
+    } else {
+      (_a = ref.current) === null || _a === void 0 ? void 0 : _a.scrollIntoView({
+        block: "nearest"
+      });
+    }
   }, [highlighted]);
+  const highlightFromPointer = () => {
+    if (highlighted) return;
+    highlightedByPointer.current = true;
+    onHighlight();
+  };
   // 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));
+  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,
+      href: url,
+      id: id,
+      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 = {"message":"message-1-PP-","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({
@@ -4250,13 +5088,19 @@ function ResultListbox({
   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, headingId) => {
     const itemIndex = index++;
     return /*#__PURE__*/React__default.createElement(SearchResult, {
+      category: item.category,
+      describedBy: headingId,
       highlighted: itemIndex === highlightedIndex,
       id: resultId(id, itemIndex),
+      imageUrl: item.imageUrl,
       key: item.key,
       onHighlight: () => onHighlight(itemIndex),
+      product: item.product,
       subtitle: item.subtitle,
       title: item.title,
       url: item.url
@@ -4272,16 +5116,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 => renderItem(item)));
     }
     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 => renderItem(item, headingId)));
   }));
 }
 
@@ -4295,9 +5141,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 +5164,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 +5174,267 @@ 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
+  }, /*#__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(Icon, {
+    name: "general.smallX"
+  })))), 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"
+  })));
+}
+
+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 = {"visuallyHidden":"visuallyHidden-S9VG5"};
+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 +5455,33 @@ 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: 1,
+        style: {
+          color: "var(--t-text-color-placeholder)",
+          fontSize: "var(--t-font-size-md)",
+          marginTop: "var(--t-spacing-5)"
+        }
+      }, /*#__PURE__*/React__default.createElement(LoadingSpinner, {
+        size: 28,
+        trackWidth: 4
+      }), "Searching\u2026");
     case "error":
       return /*#__PURE__*/React__default.createElement("p", {
+        className: styles$d.message,
         role: "alert"
       }, "Search isn\u2019t working right now. Try again.");
     case "done":
       if (sections.length === 0) {
-        return /*#__PURE__*/React__default.createElement("p", {
-          role: "status"
-        }, "No results for \u201C", term.trim(), "\u201D");
+        return /*#__PURE__*/React__default.createElement(BlankState$1, {
+          image: /*#__PURE__*/React__default.createElement(BlankStateNoResults, null),
+          role: "status",
+          subtitle: "Clear search and try again.",
+          title: `No results for “${term.trim()}”`
+        });
       }
       return /*#__PURE__*/React__default.createElement(ResultListbox, {
         busy: false,
@@ -4390,27 +5496,37 @@ function SearchResults({
 // stays put as more recents load and as their lookups answer.
 const RECENTS = "recents";
 function SearchPanel({
+  appName,
+  mobile = false,
   env,
+  onClose,
   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;
@@ -4430,41 +5546,48 @@ 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,
+    sections: sections,
+    status: search.status,
+    term: term
+  })) : (/*#__PURE__*/React__default.createElement(RecentlyVisited, {
+    highlightedIndex: highlightedIndex,
+    id: listboxId,
+    items: recentItems,
+    onHighlight: navigation.highlightIndex,
+    ...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$b.visuallyHidden
-  }, announceHighlight ? (_b = navigation.highlighted) === null || _b === void 0 ? void 0 : _b.title : null), /*#__PURE__*/React__default.createElement(KeyboardHints, {
+    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$k.visuallyHidden,
+    "data-testid": "result-count"
+  }, hasTerm && search.status === "done" && items.length > 0 ? `${items.length} ${items.length === 1 ? "result" : "results"} for “${term.trim()}” in ${product.appName}` : null), mobile ? null : /*#__PURE__*/React__default.createElement(KeyboardHints, {
     copied: navigation.copied
   }));
 }
@@ -4535,32 +5658,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 +5762,59 @@ 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,
     products: searchable.products
   })));
 }
@@ -4976,6 +6108,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 +34023,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","is-active":"is-active-wy8Bg","routes":"routes-Nmt1S","route":"route-kkknQ","actions":"actions-INQ7-","profile-button":"profile-button-a2WO2"};
 
 function AccountSettingsLink({
   env
@@ -33110,7 +34243,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 +34261,7 @@ const SmallTopbar = ({
   }, /*#__PURE__*/React__default.createElement(Avatar, {
     env: props.env,
     url: props.userAvatarPath
-  })));
+  }))));
 };
 const SmallRoute = ({
   active,
@@ -33611,38 +34751,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 = [{
@@ -34427,7 +35535,8 @@ function AskAIButton({
     onClick: () => onClick(),
     type: "button"
   }, /*#__PURE__*/React__default.createElement(SparkleIcon, {
-    className: styles.sparkle
+    className: styles.sparkle,
+    fill: "currentColor"
   }), /*#__PURE__*/React__default.createElement("span", {
     className: styles.label
   }, text));
@@ -34616,6 +35725,9 @@ function createPicobotIframe(picobotOrigin, {
     // Contact support) and picobot's own NEW_ROUTE_RENDERED reports—so it
     // always reflects the live conversation. See buildPicobotSrc.
     const [loadedPath, setLoadedPath] = React__default.useState(iframePath || "");
+    // Hidden until picobot paints so its blank first frame doesn't flash
+    // white against the drawer in dark mode.
+    const [isReady, setIsReady] = React__default.useState(false);
     const hasReportedErrorRef = React__default.useRef(false);
     const loadTimeoutRef = React__default.useRef();
     const reportLoadError = React__default.useCallback(() => {
@@ -34643,7 +35755,10 @@ function createPicobotIframe(picobotOrigin, {
           setLoadedPath(reportedPath);
           onIframeChangePath(reportedPath);
         }
-        if (((_c = e.data) === null || _c === void 0 ? void 0 : _c.type) === "READY") clearTimeout(loadTimeoutRef.current);
+        if (((_c = e.data) === null || _c === void 0 ? void 0 : _c.type) === "READY") {
+          clearTimeout(loadTimeoutRef.current);
+          setIsReady(true);
+        }
         if (onMessage) onMessage(e.data);
       }
       window.addEventListener("message", handleGuestMessage);
@@ -34653,12 +35768,15 @@ function createPicobotIframe(picobotOrigin, {
       setLoadedPath(iframePath || "");
     }, [iframePath]);
     // A one-way channel for sending messages to picobot. Topbar just
-    // forwards the envelope to the iframe and holds no message semantics of
-    // its own—the consumer decides what to send and when.
+    // forwards the envelope to the iframe—the consumer decides what to send
+    // and when. The one exception is PANE_VISIBLE: Safari ignores focus()
+    // from inside a cross-origin iframe, so the host has to focus the iframe
+    // before picobot can focus its composer.
     React__default.useImperativeHandle(ref, () => ({
       postMessage(message) {
-        var _a, _b;
-        (_b = (_a = iframeRef.current) === null || _a === void 0 ? void 0 : _a.contentWindow) === null || _b === void 0 ? void 0 : _b.postMessage(message, picobotOrigin);
+        var _a, _b, _c;
+        if (message.type === "PANE_VISIBLE") (_a = iframeRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+        (_c = (_b = iframeRef.current) === null || _b === void 0 ? void 0 : _b.contentWindow) === null || _c === void 0 ? void 0 : _c.postMessage(message, picobotOrigin);
       }
     }), []);
     const iframeSrc = buildPicobotSrc(picobotOrigin, loadedPath, {
@@ -34672,6 +35790,7 @@ function createPicobotIframe(picobotOrigin, {
         border: 0,
         flex: 1,
         height: "100%",
+        visibility: isReady ? undefined : "hidden",
         width: "100%"
       },
       title: "Picobot"
@@ -35400,6 +36519,7 @@ function PicobotComponent({
   closeDrawer,
   currentPath,
   env,
+  isOpen,
   onChangePath,
   openTool,
   pending
@@ -35444,6 +36564,17 @@ function PicobotComponent({
     }
     clearPending();
   }, [pending, isPicobotReady, clearPending]);
+  // The drawer keeps the iframe mounted while it's closed, so picobot's
+  // autofocus is spent by the time the panel reopens. READY gates the signal
+  // because picobot has no listener before it.
+  React__default.useEffect(function tellPicobotThePanelIsVisible() {
+    var _a;
+    if (isOpen && isPicobotReady) {
+      (_a = picobotRef.current) === null || _a === void 0 ? void 0 : _a.postMessage({
+        type: "PANE_VISIBLE"
+      });
+    }
+  }, [isOpen, isPicobotReady]);
   const [iframeErrored, setIframeErrored] = React__default.useState(false);
   const [mountKey, setMountKey] = React__default.useState(0);
   const handleRetry = React__default.useCallback(() => {
@@ -35960,6 +37091,11 @@ const Profile = {
 };
 
 const DURATION = 100;
+const TOOLBAR_DRAWER_CHANGE_EVENT = "topbar:toolbar-drawer-change";
+const CLOSED_TOOLBAR_DRAWER = {
+  open: false,
+  tool: null
+};
 // Exempt paths match regardless of query, so `email?conversationId=…` is
 // exempt along with `email`.
 function isToolPathExemptFromStorage(toolName, path) {
@@ -36073,6 +37209,27 @@ function Toolbar({
       delete window.openHelpdesk; /* TODO: Remove when products have migrated to window.topbar.openHelpdesk */
     };
   }, [Profile, openHelpdeskAtRoot]);
+  const toolbarDrawerTool = open && currentContent ? currentContent.name.toLowerCase() : null;
+  const lastToolbarDrawer = React__default.useRef(CLOSED_TOOLBAR_DRAWER);
+  React__default.useEffect(() => {
+    const toolbarDrawer = {
+      open,
+      tool: toolbarDrawerTool
+    };
+    window.topbar = window.topbar || {};
+    window.topbar.toolbarDrawer = toolbarDrawer;
+    const last = lastToolbarDrawer.current;
+    if (last.open !== toolbarDrawer.open || last.tool !== toolbarDrawer.tool) {
+      lastToolbarDrawer.current = toolbarDrawer;
+      window.dispatchEvent(new CustomEvent(TOOLBAR_DRAWER_CHANGE_EVENT, {
+        detail: toolbarDrawer
+      }));
+    }
+    return () => {
+      var _a;
+      (_a = window.topbar) === null || _a === void 0 ? true : delete _a.toolbarDrawer;
+    };
+  }, [open, toolbarDrawerTool]);
   const loginSettingsUrl = getLoginProfilePath({
     appName: appName.replace(/[\s-]/, ""),
     env: env,