@planningcenter/topbar 12.4.0 → 12.4.1-qa-959.0

package/dist/topbar.umd.js

@@ -1,8 +1,8 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@planningcenter/tapestry'), require('react'), require('@planningcenter/url'), require('@planningcenter/icons/paths/general'), require('@planningcenter/jolt-client'), require('use-sync-external-store/shim'), require('react/jsx-runtime'), require('@planningcenter/tapestry-react'), require('@planningcenter/add-ons'), require('@planningcenter/icons/paths/church-center'), require('@planningcenter/icons/paths/people'), require('@planningcenter/icons/paths/toolbar'), require('react-calendly'), require('algoliasearch'), require('react-instantsearch-core'), require('react-transition-group'), require('@planningcenter/datetime-fmt')) :
-  typeof define === 'function' && define.amd ? define(['exports', '@planningcenter/tapestry', 'react', '@planningcenter/url', '@planningcenter/icons/paths/general', '@planningcenter/jolt-client', 'use-sync-external-store/shim', 'react/jsx-runtime', '@planningcenter/tapestry-react', '@planningcenter/add-ons', '@planningcenter/icons/paths/church-center', '@planningcenter/icons/paths/people', '@planningcenter/icons/paths/toolbar', 'react-calendly', 'algoliasearch', 'react-instantsearch-core', 'react-transition-group', '@planningcenter/datetime-fmt'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.PLANNINGCENTER = global.PLANNINGCENTER || {}, global.PLANNINGCENTER.Topbar = {}), global.tapestry, global.react, global.pcoUrl, global.general, global.Jolt, global.shim, null, global.tapestryReact, global.addOns, global.churchCenter, global.people, global.toolbar, global.reactCalendly, global.algoliasearch, global.reactInstantsearchCore, global.reactTransitionGroup, global.datetimeFmt));
-})(this, (function (exports, tapestry, React, pcoUrl$1, general, Jolt, shim, jsxRuntime, tapestryReact, addOns, churchCenter, people, toolbar, reactCalendly, algoliasearch, reactInstantsearchCore, reactTransitionGroup, datetimeFmt) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@planningcenter/tapestry'), require('react'), require('@planningcenter/url'), require('@planningcenter/icons/paths/general'), require('@planningcenter/jolt-client'), require('use-sync-external-store/shim'), require('react/jsx-runtime'), require('@planningcenter/icons/paths/toolbar'), require('@planningcenter/datetime-fmt'), require('pluralize'), require('@planningcenter/icons/paths/logomark'), require('@planningcenter/tapestry-react'), require('@planningcenter/add-ons'), require('@planningcenter/icons/paths/church-center'), require('@planningcenter/icons/paths/people'), require('react-calendly'), require('algoliasearch'), require('react-instantsearch-core'), require('react-transition-group')) :
+  typeof define === 'function' && define.amd ? define(['exports', '@planningcenter/tapestry', 'react', '@planningcenter/url', '@planningcenter/icons/paths/general', '@planningcenter/jolt-client', 'use-sync-external-store/shim', 'react/jsx-runtime', '@planningcenter/icons/paths/toolbar', '@planningcenter/datetime-fmt', 'pluralize', '@planningcenter/icons/paths/logomark', '@planningcenter/tapestry-react', '@planningcenter/add-ons', '@planningcenter/icons/paths/church-center', '@planningcenter/icons/paths/people', 'react-calendly', 'algoliasearch', 'react-instantsearch-core', 'react-transition-group'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory((global.PLANNINGCENTER = global.PLANNINGCENTER || {}, global.PLANNINGCENTER.Topbar = {}), global.tapestry, global.react, global.pcoUrl, global.general, global.Jolt, global.shim, null, global.toolbar, global.datetimeFmt, global.pluralize, global.logomark, global.tapestryReact, global.addOns, global.churchCenter, global.people, global.reactCalendly, global.algoliasearch, global.reactInstantsearchCore, global.reactTransitionGroup));
+})(this, (function (exports, tapestry, React, pcoUrl$1, general, Jolt, shim, jsxRuntime, toolbar, datetimeFmt, pluralize, logomarks, tapestryReact, addOns, churchCenter, people, reactCalendly, algoliasearch, reactInstantsearchCore, reactTransitionGroup) { 'use strict';
 
   function _interopNamespaceDefault(e) {
     var n = Object.create(null);
@@ -23,11 +23,12 @@
 
   var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
   var general__namespace = /*#__PURE__*/_interopNamespaceDefault(general);
+  var toolbar__namespace = /*#__PURE__*/_interopNamespaceDefault(toolbar);
+  var logomarks__namespace = /*#__PURE__*/_interopNamespaceDefault(logomarks);
   var churchCenter__namespace = /*#__PURE__*/_interopNamespaceDefault(churchCenter);
   var people__namespace = /*#__PURE__*/_interopNamespaceDefault(people);
-  var toolbar__namespace = /*#__PURE__*/_interopNamespaceDefault(toolbar);
 
-  var styles$m = {"accessibility-toolbar":"accessibility-toolbar-jgjUG"};
+  var styles$u = {"accessibility-toolbar":"accessibility-toolbar-jgjUG"};
 
   const AccessibilityToolbar = ({
     children
@@ -39,7 +40,7 @@
       (_a = document.getElementById("main-content")) === null || _a === void 0 ? void 0 : _a.focus();
     };
     return /*#__PURE__*/React.createElement("div", {
-      className: styles$m["accessibility-toolbar"]
+      className: styles$u["accessibility-toolbar"]
     }, /*#__PURE__*/React.createElement(tapestry.Link, {
       href: "#main-content",
       kind: "primary",
@@ -358,11 +359,11 @@
     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.createElement("svg", {
-      className: styles$l["announcement-icon"],
+      className: styles$t["announcement-icon"],
       width: "16",
       height: "16",
       viewBox: "0 0 16 16",
@@ -487,7 +488,7 @@
       } = this.props;
       const isPromo = variant === "promo";
       return /*#__PURE__*/React.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,
@@ -496,7 +497,7 @@
           backgroundSize: "cover"
         } : undefined
       }, !isPromo && /*#__PURE__*/React.createElement(AnnouncementIcon, null), /*#__PURE__*/React.createElement("div", {
-        className: styles$l["announcement-content"],
+        className: styles$t["announcement-content"],
         style: style,
         ...platformProps
       }));
@@ -545,7 +546,7 @@
     const isPromo = variant === "promo";
     return /*#__PURE__*/React.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.createElement(X, {
       fill: isPromo ? "currentColor" : "white",
@@ -625,9 +626,9 @@
         ...platformProps
       } = this.props;
       return /*#__PURE__*/React.createElement("div", {
-        className: styles$l["announcement"]
+        className: styles$t["announcement"]
       }, /*#__PURE__*/React.createElement(AnnouncementIcon, null), /*#__PURE__*/React.createElement("div", {
-        className: styles$l["announcement-content"],
+        className: styles$t["announcement-content"],
         style: style,
         ...platformProps
       }));
@@ -638,7 +639,7 @@
   }) {
     return /*#__PURE__*/React.createElement("button", {
       type: "button",
-      className: styles$l.dismiss,
+      className: styles$t.dismiss,
       ...props
     }, /*#__PURE__*/React.createElement(X, {
       fill: "white",
@@ -1760,7 +1761,7 @@
     })) : (/*#__PURE__*/React.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,
@@ -1769,24 +1770,24 @@
   }) => {
     if (appName === "Accounts") {
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-        className: styles$k["icon-slot"]
+        className: styles$s["icon-slot"]
       }, /*#__PURE__*/React.createElement(MonoAppIcon, {
         appName: "Accounts",
         colors: colors,
         size: iconSize
       })), /*#__PURE__*/React.createElement("span", {
-        className: styles$k.name
+        className: styles$s.name
       }, "Account settings"));
     }
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ColorAppIcon, {
       appName: appName.replace(/[\s-]/, ""),
       size: iconSize
     }), /*#__PURE__*/React.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.forwardRef(({
     appName,
@@ -1798,10 +1799,10 @@
       ...restProps,
       ref: ref,
       "aria-label": `App switcher: ${appName}`,
-      className: styles$j.button,
+      className: styles$r.button,
       kind: "neutral-inline",
       label: /*#__PURE__*/React.createElement("span", {
-        className: styles$j.label
+        className: styles$r.label
       }, isAccounts ? "Account settings" : appName),
       prefix: isAccounts ? (/*#__PURE__*/React.createElement(MonoAppIcon, {
         appName: "Accounts",
@@ -1812,13 +1813,13 @@
         size: 22
       })),
       suffix: /*#__PURE__*/React.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,
@@ -1839,8 +1840,8 @@
       }, /*#__PURE__*/React.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,
@@ -1856,22 +1857,22 @@
       colors: colors
     })), /*#__PURE__*/React.createElement(tapestry.PopoverContent, {
       "aria-label": "Switch app",
-      className: styles$i["popover-content"],
+      className: styles$q["popover-content"],
       placement: "bottom start"
     }, /*#__PURE__*/React.createElement("nav", {
-      className: styles$i.nav,
+      className: styles$q.nav,
       "data-pendo": "app-switcher"
     }, /*#__PURE__*/React.createElement("ul", {
-      className: styles$i.list,
+      className: styles$q.list,
       role: "list"
     }, homeProduct && renderProductLink(homeProduct.name), restProducts.map(({
       name
     }) => renderProductLink(name)), accountsProduct && (/*#__PURE__*/React.createElement("li", {
-      className: styles$i["accounts-item"]
+      className: styles$q["accounts-item"]
     }, /*#__PURE__*/React.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)
@@ -2079,7 +2080,7 @@
     })) : (/*#__PURE__*/React.createElement("div", null, "appName not supported"));
   }
 
-  var styles$h = {"unbutton":"unbutton-lEbTR"};
+  var styles$p = {"unbutton":"unbutton-lEbTR"};
 
   function Unbutton({
     className,
@@ -2088,7 +2089,7 @@
     ...nativeProps
   }) {
     return /*#__PURE__*/React.createElement("button", {
-      className: classnames(styles$h.unbutton, className),
+      className: classnames(styles$p.unbutton, className),
       style: {
         ...style
       },
@@ -2097,7 +2098,7 @@
     });
   }
 
-  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,
@@ -2112,8 +2113,8 @@
       "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,
@@ -2122,7 +2123,7 @@
       appName: "Accounts",
       colors: colors
     }), /*#__PURE__*/React.createElement("div", {
-      className: styles$g["button-accounts"]
+      className: styles$o["button-accounts"]
     }, "Account settings"))) : (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(ColorAppIcon, {
       appName: appName.replace(/[\s-]/, "")
     }), /*#__PURE__*/React.createElement(MonoAppName, {
@@ -2130,7 +2131,7 @@
       key: "mono-app-name",
       size: 24
     }))), /*#__PURE__*/React.createElement(DisclosureChevronIcon, {
-      className: styles$g.chevron,
+      className: styles$o.chevron,
       key: "disclosure-chevron-icon"
     }));
   };
@@ -2263,7 +2264,7 @@
     }
   }
 
-  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,
@@ -2271,8 +2272,8 @@
     isVisible,
     ...nativeProps
   }) => (/*#__PURE__*/React.createElement(C, {
-    className: classnames(styles$f.popup, {
-      [styles$f["is-visible"]]: isVisible
+    className: classnames(styles$n.popup, {
+      [styles$n["is-visible"]]: isVisible
     }, className),
     ...nativeProps
   }));
@@ -2280,11 +2281,11 @@
   const PopupRoot = ({
     ...nativeProps
   }) => (/*#__PURE__*/React.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,
@@ -2322,7 +2323,7 @@
       cleanup: !visible,
       component: Outsider,
       onOutsideClick: toggle,
-      className: styles$e.popup,
+      className: styles$m.popup,
       isVisible: visible
     }, /*#__PURE__*/React.createElement("menu", {
       ref: menuRef,
@@ -3232,34 +3233,117 @@ true;
     });
   }, []);
 
+  const collections = {
+    general: general__namespace,
+    toolbar: toolbar__namespace
+  };
+  const paths = collections;
+  function Icon({
+    name,
+    size = 16,
+    style,
+    theme,
+    title,
+    ...props
+  }) {
+    const [collection, symbol] = name.split(".");
+    return /*#__PURE__*/React.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.createElement("title", null, title), /*#__PURE__*/React.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.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.createElement(Spyglass, {
-      fill: "currentColor"
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "general.search",
+      size: mobile ? 18 : 14
     }));
   }
 
@@ -3574,16 +3658,16 @@ true;
   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);
@@ -3982,7 +4066,13 @@ true;
     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.useState(null);
@@ -4006,22 +4096,27 @@ true;
   // 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.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.useCallback(index => setHighlight(current => current.list === list && current.index === index ? current : {
-      index,
-      list
-    }), [list]);
+    const highlightIndex = React.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();
@@ -4045,41 +4140,89 @@ true;
     };
   }
 
-  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,
@@ -4087,19 +4230,31 @@ true;
         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
       };
@@ -4113,39 +4268,278 @@ true;
     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.createElement("kbd", {
+      className: styles$j.keycap
+    }, "symbol" in props ? (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.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.createElement("path", {
+      d: d,
+      key: d
+    })))), /*#__PURE__*/React.createElement("span", {
+      className: styles$k.visuallyHidden
+    }, SYMBOLS[props.symbol].label))) : props.label);
+  }
+  function CommandKey() {
+    return isMac() ? /*#__PURE__*/React.createElement(Keycap, {
+      symbol: "command"
+    }) : /*#__PURE__*/React.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.createElement(Keycap, {
+      symbol: "return"
+    }) : /*#__PURE__*/React.createElement(Keycap, {
+      label: "Enter"
+    });
   }
-
+  const {
+    copyLink,
+    openInNewTab,
+    openSearch,
+    select
+  } = KEYBOARD_SHORTCUTS;
   function KeyboardHints({
     copied
   }) {
-    const command = commandKeyLabel();
-    return /*#__PURE__*/React.createElement("p", null, "\u2191\u2193 Select \u00B7 \u21B5 Open \u00B7 ", command, "\u21B5 Open in new tab \u00B7 ", command, "C", " ", /*#__PURE__*/React.createElement("span", {
+    return /*#__PURE__*/React.createElement("ul", {
+      "aria-label": "Keyboard shortcuts",
+      className: styles$j.container
+    }, /*#__PURE__*/React.createElement("li", {
+      className: styles$j.hint
+    }, /*#__PURE__*/React.createElement(tapestry.Flex, {
+      gap: 0.5
+    }, select.modifierKey, /*#__PURE__*/React.createElement(Keycap, {
+      symbol: "up"
+    }), /*#__PURE__*/React.createElement(Keycap, {
+      symbol: "down"
+    })), select.label), /*#__PURE__*/React.createElement("li", {
+      className: styles$j.hint
+    }, /*#__PURE__*/React.createElement(tapestry.Flex, {
+      gap: 0.5
+    }, /*#__PURE__*/React.createElement(CommandKey, null), /*#__PURE__*/React.createElement(EnterKey, null)), openInNewTab.label), /*#__PURE__*/React.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.createElement(tapestry.Flex, {
+      gap: 0.5
+    }, /*#__PURE__*/React.createElement(CommandKey, null), /*#__PURE__*/React.createElement(Keycap, {
+      label: copyLink.key.toUpperCase()
+    })), /*#__PURE__*/React.createElement("span", {
+      className: styles$j.labels
+    }, /*#__PURE__*/React.createElement("span", {
+      "aria-hidden": copied
+    }, copyLink.label), /*#__PURE__*/React.createElement("span", {
       role: "status"
-    }, copied ? "Copied!" : "Copy link"), " \u00B7 ", command, "K Open search");
+    }, copied && "Copied!"))), /*#__PURE__*/React.createElement("li", {
+      className: styles$j.hint
+    }, /*#__PURE__*/React.createElement(tapestry.Flex, {
+      gap: 0.5
+    }, /*#__PURE__*/React.createElement(CommandKey, null), /*#__PURE__*/React.createElement(Keycap, {
+      label: openSearch.key.toUpperCase()
+    })), openSearch.label));
   }
 
-  var styles$d = {"tab":"tab-dz8ki"};
+  var styles$i = {"icon":"icon-XKLvN","squircle":"squircle-JCHr6"};
 
+  const PRODUCTS = {
+    accounts: {
+      gradient: "--t-fill-color-product-accounts-gradient-brand",
+      path: logomarks__namespace.accounts
+    },
+    api: {
+      gradient: "--t-fill-color-product-api-gradient-brand",
+      path: logomarks__namespace.api
+    },
+    calendar: {
+      gradient: "--t-fill-color-product-calendar-gradient-brand",
+      path: logomarks__namespace.calendar
+    },
+    "check-ins": {
+      gradient: "--t-fill-color-product-checkins-gradient-brand",
+      path: logomarks__namespace.checkIns
+    },
+    "church-center": {
+      gradient: "--t-fill-color-product-cc-gradient-brand",
+      path: logomarks__namespace.churchCenter
+    },
+    giving: {
+      gradient: "--t-fill-color-product-giving-gradient-brand",
+      path: logomarks__namespace.giving
+    },
+    groups: {
+      gradient: "--t-fill-color-product-groups-gradient-brand",
+      path: logomarks__namespace.groups
+    },
+    home: {
+      gradient: "--t-fill-color-product-home-gradient-brand",
+      path: logomarks__namespace.home
+    },
+    "music-stand": {
+      gradient: "--t-fill-color-product-musicstand-gradient-brand",
+      path: logomarks__namespace.musicStand
+    },
+    people: {
+      gradient: "--t-fill-color-product-people-gradient-brand",
+      path: logomarks__namespace.people
+    },
+    publishing: {
+      gradient: "--t-fill-color-product-publishing-gradient-brand",
+      path: logomarks__namespace.publishing
+    },
+    registrations: {
+      gradient: "--t-fill-color-product-registrations-gradient-brand",
+      path: logomarks__namespace.registrations
+    },
+    services: {
+      gradient: "--t-fill-color-product-services-gradient-brand",
+      path: logomarks__namespace.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.createElement("span", {
+      "aria-hidden": true,
+      className: styles$i.icon,
+      style: {
+        height: size,
+        width: size
+      }
+    }, /*#__PURE__*/React.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.createElement("span", {
+        className: styles$h.option
+      }, /*#__PURE__*/React.createElement(ProductIcon, {
+        slug: slug
+      }), appName)),
+      textValue: appName,
+      value: slug
+    }));
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+      className: styles$h.picker
+    }, /*#__PURE__*/React.createElement(tapestry.Select, {
+      "aria-label": "Product",
+      complex: true,
+      onChange: event => onSelect(event.target.value),
+      options: options,
+      value: selected.slug
+    })), /*#__PURE__*/React.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.useState(false);
+    React.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$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,
@@ -4156,6 +4550,7 @@ true;
     const id = useInstanceId("product-tabs");
     const tabId = slug => `${id}-tab-${slug}`;
     const tabRefs = React.useRef(new Map());
+    const showAllNames = products.length < ICON_ONLY_TAB_COUNT;
     const handleKeyDown = event => {
       var _a;
       const offset = horizontalStep(event.key);
@@ -4170,13 +4565,14 @@ true;
       }
     };
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
-      "aria-label": "Product",
+      "aria-label": "Search in",
+      className: styles$g.tablist,
       onKeyDown: handleKeyDown,
       role: "tablist"
-    }, products.map(product => (/*#__PURE__*/React.createElement("button", {
+    }, products.map(product => (/*#__PURE__*/React.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),
@@ -4187,15 +4583,397 @@ true;
           tabRefs.current.delete(product.slug);
         }
       },
-      role: "tab",
-      tabIndex: product === selected ? 0 : -1,
-      type: "button"
-    }, product.appName)))), /*#__PURE__*/React.createElement("div", {
+      tabIndex: product === selected ? 0 : -1
+    }, /*#__PURE__*/React.createElement(ProductIcon, {
+      slug: product.slug
+    }), showAllNames || product === selected ? product.appName : (/*#__PURE__*/React.createElement("span", {
+      className: styles$k.visuallyHidden
+    }, product.appName)))))), /*#__PURE__*/React.createElement("div", {
+      className: styles$k.visuallyHidden
+    }, products.map(product => (/*#__PURE__*/React.createElement("span", {
+      id: `${tabId(product.slug)}-description`,
+      key: product.slug
+    }, "Planning Center ", product.appName)))), /*#__PURE__*/React.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.forwardRef(function Tab(props, ref) {
+    const {
+      focusProps
+    } = useKeyboardFocus();
+    return /*#__PURE__*/React.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.createElement("svg", {
+      viewBox: "0 0 197 174",
+      fill: "none",
+      "aria-hidden": "true",
+      focusable: "false",
+      ...props
+    }, /*#__PURE__*/React.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.createElement("g", {
+      clipPath: `url(#${id}-a)`
+    }, /*#__PURE__*/React.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.createElement("path", {
+      d: "M100.863 15.992h-5.81v1.293h5.81v-1.293Z",
+      fill: "#F2F2F2"
+    }), /*#__PURE__*/React.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.createElement("g", {
+      clipPath: `url(#${id}-b)`
+    }, /*#__PURE__*/React.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.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.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.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.createElement("g", {
+      clipPath: `url(#${id}-c)`
+    }, /*#__PURE__*/React.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.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.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.createElement("path", {
+      d: "M34.1 108.015v-3.363h57.697v3.363H34.1Z",
+      fill: `url(#${id}-g)`
+    }), /*#__PURE__*/React.createElement("path", {
+      d: "M79.673 108.015v-3.363h12.124v3.363H79.673Z",
+      fill: `url(#${id}-h)`
+    })), /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
+      id: `${id}-d`,
+      x1: "150.254",
+      y1: "100.449",
+      x2: "158.273",
+      y2: "100.449",
+      gradientUnits: "userSpaceOnUse"
+    }, /*#__PURE__*/React.createElement("stop", {
+      stopColor: "#FEFEFE"
+    }), /*#__PURE__*/React.createElement("stop", {
+      offset: "1",
+      stopColor: "#fff"
+    })), /*#__PURE__*/React.createElement("linearGradient", {
+      id: `${id}-e`,
+      x1: "132.629",
+      y1: "100.449",
+      x2: "155.32",
+      y2: "100.449",
+      gradientUnits: "userSpaceOnUse"
+    }, /*#__PURE__*/React.createElement("stop", {
+      stopColor: "#FEFEFE"
+    }), /*#__PURE__*/React.createElement("stop", {
+      offset: "1",
+      stopColor: "#F3F3F3"
+    })), /*#__PURE__*/React.createElement("linearGradient", {
+      id: `${id}-f`,
+      x1: "56.925",
+      y1: "45.291",
+      x2: "56.925",
+      y2: "93.076",
+      gradientUnits: "userSpaceOnUse"
+    }, /*#__PURE__*/React.createElement("stop", {
+      stopColor: "#FEFEFE"
+    }), /*#__PURE__*/React.createElement("stop", {
+      offset: "1",
+      stopColor: "#D1D6E7"
+    })), /*#__PURE__*/React.createElement("linearGradient", {
+      id: `${id}-g`,
+      x1: "62.684",
+      y1: "108.015",
+      x2: "62.684",
+      y2: "104.85",
+      gradientUnits: "userSpaceOnUse"
+    }, /*#__PURE__*/React.createElement("stop", {
+      stopColor: "#D2D6E8"
+    }), /*#__PURE__*/React.createElement("stop", {
+      offset: ".726",
+      stopColor: "#D1D6E7"
+    })), /*#__PURE__*/React.createElement("linearGradient", {
+      id: `${id}-h`,
+      x1: "85.68",
+      y1: "108.015",
+      x2: "85.68",
+      y2: "104.85",
+      gradientUnits: "userSpaceOnUse"
+    }, /*#__PURE__*/React.createElement("stop", {
+      stopColor: "#D8DDF1"
+    }), /*#__PURE__*/React.createElement("stop", {
+      offset: ".726",
+      stopColor: "#E2E6F6"
+    })), /*#__PURE__*/React.createElement("clipPath", {
+      id: `${id}-a`
+    }, /*#__PURE__*/React.createElement("path", {
+      fill: "#fff",
+      transform: "translate(12.006)",
+      d: "M0 0h172v174H0z"
+    })), /*#__PURE__*/React.createElement("clipPath", {
+      id: `${id}-b`
+    }, /*#__PURE__*/React.createElement("path", {
+      fill: "#fff",
+      transform: "translate(29.084 105.073)",
+      d: "M0 0h138.387v68.927H0z"
+    })), /*#__PURE__*/React.createElement("clipPath", {
+      id: `${id}-c`
+    }, /*#__PURE__*/React.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.createElement(tapestry.Flex, {
+      role: role,
+      className: styles$f.blank_state,
+      direction: "column",
+      align: "center",
+      gap: 3
+    }, /*#__PURE__*/React.createElement(tapestry.Flex, {
+      className: styles$f.image
+    }, image), /*#__PURE__*/React.createElement(tapestry.Flex, {
+      direction: "column",
+      align: "center",
+      gap: 1
+    }, /*#__PURE__*/React.createElement("h2", null, title), /*#__PURE__*/React.createElement("p", null, subtitle)));
+  }
 
   function EndOfResultsObserver({
     onVisible
@@ -4215,39 +4993,98 @@ true;
 
   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.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.useRef(false);
     React.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.createElement("a", {
-      "aria-selected": highlighted,
-      className: styles$c.result,
-      href: url,
-      id: id,
-      onMouseMove: onHighlight,
-      ref: ref,
-      role: "option",
-      tabIndex: -1
-    }, /*#__PURE__*/React.createElement("div", null, title), /*#__PURE__*/React.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.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.createElement(ResultImage, {
+        category: category,
+        imageUrl: imageUrl,
+        product: product
+      }), /*#__PURE__*/React.createElement("span", {
+        className: styles$e.title,
+        id: `${id}-title`
+      }, title), /*#__PURE__*/React.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.createElement(ProductIcon, {
+      size: size,
+      slug: product
+    })) : null;
+    return /*#__PURE__*/React.createElement("span", {
+      "aria-hidden": true,
+      className: styles$e.image
+    }, imageUrl ? (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("img", {
+      alt: "",
+      className: category === "profile" ? styles$e.avatar : styles$e.photo,
+      loading: "lazy",
+      src: imageUrl
+    }), /*#__PURE__*/React.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({
@@ -4260,13 +5097,19 @@ true;
     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.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
@@ -4282,16 +5125,18 @@ true;
       if (section.heading === undefined) {
         return /*#__PURE__*/React.createElement(React.Fragment, {
           key: section.key
-        }, section.items.map(renderItem));
+        }, section.items.map(item => renderItem(item)));
       }
       const headingId = `${id}-group-${sectionIndex}`;
       return /*#__PURE__*/React.createElement("div", {
         "aria-labelledby": headingId,
+        className: styles$d.group,
         key: section.key,
         role: "group"
       }, /*#__PURE__*/React.createElement("div", {
+        className: styles$d.heading,
         id: headingId
-      }, section.heading), section.items.map(renderItem));
+      }, section.heading), section.items.map(item => renderItem(item, headingId)));
     }));
   }
 
@@ -4305,9 +5150,14 @@ true;
   }) {
     const headingId = `${navigation.id}-heading`;
     if (items.length === 0 && !hasMore && !loading) {
-      return /*#__PURE__*/React.createElement("p", null, "Pages you visit will show up here.");
+      return /*#__PURE__*/React.createElement(BlankState$1, {
+        image: /*#__PURE__*/React.createElement(BlankStateRecentlyVisited, null),
+        subtitle: "Pages you visit will show up here.",
+        title: "Recently visited"
+      });
     } else {
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+        className: styles$d.heading,
         id: headingId
       }, "Recently visited"), /*#__PURE__*/React.createElement(ResultListbox, {
         labelledBy: headingId,
@@ -4323,6 +5173,8 @@ true;
     }
   }
 
+  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({
@@ -4331,29 +5183,267 @@ true;
     inputRef,
     listboxId,
     onChange,
+    onClose,
     onFocus,
     onKeyDown,
     value
   }) {
-    return /*#__PURE__*/React.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.createElement("div", {
+      className: styles$c.row
+    }, /*#__PURE__*/React.createElement("label", {
+      className: styles$c.header
+    }, /*#__PURE__*/React.createElement(Icon, {
+      name: "general.search",
+      size: 20,
+      theme: "--t-icon-color-dim"
+    }), /*#__PURE__*/React.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.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.createElement(Icon, {
+      name: "general.smallX"
+    })))), onClose && (/*#__PURE__*/React.createElement(tapestry.IconButton, {
+      "aria-label": "Close search",
+      className: styles$c.closeButton,
+      icon: /*#__PURE__*/React.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.createElement("svg", {
+      viewBox: "0 0 197 152",
+      fill: "none",
+      "aria-hidden": "true",
+      focusable: "false",
+      ...props
+    }, /*#__PURE__*/React.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.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.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.createElement("path", {
+      d: "M97.564 26.688h-6.248v3.565h6.248v-3.565Z",
+      fill: "#F2F2F2"
+    }), /*#__PURE__*/React.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.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.createElement("mask", {
+      id: `${id}-a`,
+      style: {
+        maskType: "alpha"
+      },
+      maskUnits: "userSpaceOnUse",
+      x: "90",
+      y: "96",
+      width: "9",
+      height: "4"
+    }, /*#__PURE__*/React.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.createElement("g", {
+      mask: `url(#${id}-a)`
+    }, /*#__PURE__*/React.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.createElement("span", {
+      "aria-hidden": "true",
+      className: styles$b.spinner,
+      style: {
+        "--spinner-size": `${size}px`,
+        "--spinner-track-width": `${trackWidth}px`
+      }
+    });
+  }
 
   function SearchResults({
     label,
@@ -4374,18 +5464,33 @@ true;
             ...navigation
           });
         }
-        return /*#__PURE__*/React.createElement("p", {
-          role: "status"
-        }, "Searching\u2026");
+        return /*#__PURE__*/React.createElement(tapestry.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.createElement(LoadingSpinner, {
+          size: 28,
+          trackWidth: 4
+        }), "Searching\u2026");
       case "error":
         return /*#__PURE__*/React.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.createElement("p", {
-            role: "status"
-          }, "No results for \u201C", term.trim(), "\u201D");
+          return /*#__PURE__*/React.createElement(BlankState$1, {
+            image: /*#__PURE__*/React.createElement(BlankStateNoResults, null),
+            role: "status",
+            subtitle: "Clear search and try again.",
+            title: `No results for “${term.trim()}”`
+          });
         }
         return /*#__PURE__*/React.createElement(ResultListbox, {
           busy: false,
@@ -4400,27 +5505,37 @@ true;
   // 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.useState("");
-    const [selectedSlug, setSelectedSlug] = React.useState(() => initialProduct(products).slug);
+    const [selectedSlug, setSelectedSlug] = React.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.useMemo(() => groupSections(groups), [groups]);
+    const {
+      organizationTimeZone
+    } = useStore();
+    const sections = React.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;
@@ -4440,41 +5555,48 @@ true;
         navigation.handleKeyDown(event);
       }
     };
-    React.useEffect(() => {
-      if (hasTerm) saveLastProduct(product.slug);
-    }, [hasTerm, product.slug]);
+    const results = hasTerm ? (/*#__PURE__*/React.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.createElement(RecentlyVisited, {
+      highlightedIndex: highlightedIndex,
+      id: listboxId,
+      items: recentItems,
+      onHighlight: navigation.highlightIndex,
+      ...recents
+    }));
     return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.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.createElement(ProductTabs, {
+    }), mobile ? (/*#__PURE__*/React.createElement(ProductSelect, {
+      onSelect: setSelectedSlug,
+      products: products,
+      selected: product
+    }, results)) : (/*#__PURE__*/React.createElement(ProductTabs, {
       onKeyDown: handleTabsKeyDown,
       onSelect: setSelectedSlug,
       products: products,
       selected: product
-    }, hasTerm ? (/*#__PURE__*/React.createElement(SearchResults, {
-      highlightedIndex: highlightedIndex,
-      id: listboxId,
-      label: `${product.appName} results`,
-      onHighlight: navigation.highlightIndex,
-      sections: sections,
-      status: search.status,
-      term: term
-    })) : (/*#__PURE__*/React.createElement(RecentlyVisited, {
-      highlightedIndex: highlightedIndex,
-      id: listboxId,
-      items: recentItems,
-      onHighlight: navigation.highlightIndex,
-      ...recents
-    }))), /*#__PURE__*/React.createElement("div", {
+    }, results)), /*#__PURE__*/React.createElement("div", {
+      "aria-live": "polite",
+      className: styles$k.visuallyHidden
+    }, announceHighlight ? (_b = navigation.highlighted) === null || _b === void 0 ? void 0 : _b.title : null), /*#__PURE__*/React.createElement("div", {
       "aria-live": "polite",
-      className: styles$b.visuallyHidden
-    }, announceHighlight ? (_b = navigation.highlighted) === null || _b === void 0 ? void 0 : _b.title : null), /*#__PURE__*/React.createElement(KeyboardHints, {
+      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.createElement(KeyboardHints, {
       copied: navigation.copied
     }));
   }
@@ -4545,32 +5667,6 @@ true;
     }, [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
@@ -4675,24 +5771,59 @@ true;
     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.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.useState(false);
+    const modalRef = React.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.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SearchButton, {
+      mobile: mobile,
       onClick: () => setOpen(true)
     }), /*#__PURE__*/React.createElement(tapestry.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.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
     })));
   }
@@ -4986,6 +6117,7 @@ true;
         margin: "auto"
       }
     }), !notificationsEnabled && notifications(), productSearchEnabled ? (/*#__PURE__*/React.createElement(ProductSearch, {
+      appName: props.appName,
       apps: props.apps,
       env: props.env
     })) : search({
@@ -32900,7 +34032,7 @@ true;
     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
@@ -33120,7 +34252,14 @@ true;
         setProductSwitcherVisible(false);
         setRoutesMenuVisible(visible => !visible);
       } : null
-    }, /*#__PURE__*/React.createElement(CurrentRouteComponent, null, capitalize$1(currentRouteText)), props.routes.length > 0 && /*#__PURE__*/React.createElement(DisclosureChevronIcon, null)), /*#__PURE__*/React.createElement("button", {
+    }, /*#__PURE__*/React.createElement(CurrentRouteComponent, null, capitalize$1(currentRouteText)), props.routes.length > 0 && /*#__PURE__*/React.createElement(DisclosureChevronIcon, null)), /*#__PURE__*/React.createElement("div", {
+      className: styles$6["actions"]
+    }, productSearchEnabled && (/*#__PURE__*/React.createElement(ProductSearch, {
+      appName: props.appName,
+      apps: props.apps,
+      mobile: true,
+      env: props.env
+    })), /*#__PURE__*/React.createElement("button", {
       type: "button",
       className: styles$6["profile-button"],
       onClick: () => {
@@ -33131,7 +34270,7 @@ true;
     }, /*#__PURE__*/React.createElement(Avatar, {
       env: props.env,
       url: props.userAvatarPath
-    })));
+    }))));
   };
   const SmallRoute = ({
     active,
@@ -33621,38 +34760,6 @@ true;
     }));
   };
 
-  const collections = {
-    general: general__namespace,
-    toolbar: toolbar__namespace
-  };
-  const paths = collections;
-  function Icon({
-    name,
-    size = 16,
-    style,
-    theme,
-    title,
-    ...props
-  }) {
-    const [collection, symbol] = name.split(".");
-    return /*#__PURE__*/React.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.createElement("title", null, title), /*#__PURE__*/React.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 = [{
@@ -34437,7 +35544,8 @@ true;
       onClick: () => onClick(),
       type: "button"
     }, /*#__PURE__*/React.createElement(SparkleIcon, {
-      className: styles.sparkle
+      className: styles.sparkle,
+      fill: "currentColor"
     }), /*#__PURE__*/React.createElement("span", {
       className: styles.label
     }, text));
@@ -34626,6 +35734,9 @@ true;
       // Contact support) and picobot's own NEW_ROUTE_RENDERED reports—so it
       // always reflects the live conversation. See buildPicobotSrc.
       const [loadedPath, setLoadedPath] = React.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.useState(false);
       const hasReportedErrorRef = React.useRef(false);
       const loadTimeoutRef = React.useRef();
       const reportLoadError = React.useCallback(() => {
@@ -34653,7 +35764,10 @@ true;
             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);
@@ -34663,12 +35777,15 @@ true;
         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.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, {
@@ -34682,6 +35799,7 @@ true;
           border: 0,
           flex: 1,
           height: "100%",
+          visibility: isReady ? undefined : "hidden",
           width: "100%"
         },
         title: "Picobot"
@@ -35410,6 +36528,7 @@ true;
     closeDrawer,
     currentPath,
     env,
+    isOpen,
     onChangePath,
     openTool,
     pending
@@ -35454,6 +36573,17 @@ true;
       }
       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.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.useState(false);
     const [mountKey, setMountKey] = React.useState(0);
     const handleRetry = React.useCallback(() => {
@@ -35970,6 +37100,11 @@ true;
   };
 
   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) {
@@ -36083,6 +37218,27 @@ true;
         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.useRef(CLOSED_TOOLBAR_DRAWER);
+    React.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,